Function NodeDetailsPanel

ui/src/appComponents/NodeDetailsPanel.tsx:181–619

({
  node,
  nodeSource,
  sourceLoading,
  sourceError,
  communityName,
  communityColor,
  edges,
  onSelectNode,
  onSelectEdge,
}: NodeDetailsPanelProps)

}

export default function NodeDetailsPanel({
  node,
  nodeSource,
  sourceLoading,
  sourceError,
  communityName,
  communityColor,
  edges,
  onSelectNode,
  onSelectEdge,
}: NodeDetailsPanelProps) {
  const [previewTab, setPreviewTab] = useState<PreviewTab>('rendered');
  const color = getNodeColor(node.type);
  const isLight = document.documentElement.dataset.mode === 'light';
  const prismTheme = isLight ? themes.oneLight : themes.oneDark;

  const hasEnrichment = !!(
    node.properties?.summary || node.properties?.has_embedding
  );
  const sourceUri = node.properties?.sourceUri as string | undefined;
  const sourceName = (
    node.properties?.source_name as string | undefined
  )?.toLowerCase();
  const ProviderIcon = sourceName ? PROVIDER_ICONS[sourceName] : undefined;

  return (
    <div className="node-details-content">
      {/* ── Header: [type] name … [View on] ── */}
      <div className="detail-header">
        <span className="type-badge" style={{ backgroundColor: color }}>
          {node.type}
        </span>
        {communityName && (
          <span
            className="type-badge community-badge"
            style={{
              color: communityColor ?? '#64748b',
              border: `1.5px solid ${communityColor ?? '#64748b'}`,
            }}
          >
            {communityName}
          </span>
        )}
        <span className="detail-name">{node.name || 'N/A'}</span>
        {sourceUri && (
          <a
            className="source-link"
            href={sourceUri}
            target="_blank"
            rel="noopener noreferrer"
          >
            {ProviderIcon ? (
              <ProviderIcon />
            ) : (
              <svg
                width="16"
                height="16"
                viewBox="0 0 24 24"