Function TraverseResult

ui/src/components/chat/results/TraverseResult.tsx:53–111

({ entries, onNodeSelect }: Props)

/** Hierarchical tree view with CSS-based tree-line connectors */
export default function TraverseResult({ entries, onNodeSelect }: Props) {
  const [expanded, setExpanded] = useState(false);

  if (entries.length === 0) {
    return <p className="result-empty">No results found.</p>;
  }

  const visible = expanded ? entries : entries.slice(0, INITIAL_LIMIT);
  const hasMore = entries.length > INITIAL_LIMIT;
  const lastAtDepth = computeLastAtDepth(visible);

  return (
    <div className="result-traverse">
      {visible.map((entry, i) => {
        const { node, relationship, depth } = entry;
        const color = getNodeColor(node.type);
        const isRoot = depth === 0;
        const isLast = lastAtDepth.has(i);

        const classes = [
          'result-traverse-entry',
          isRoot && 'root-entry',
          isLast && 'last-at-depth',
        ]
          .filter(Boolean)
          .join(' ');

        return (
          <div
            key={`${node.id}-${i}`}
            className={classes}
            style={{ paddingLeft: isRoot ? 0 : depth * 20 }}
          >
            {relationship && relationship.type && (
              <span className="result-traverse-rel">{relationship.type} →</span>
            )}
            <div
              className="result-traverse-node"
              onClick={() => onNodeSelect?.(node.id)}
            >
              <span className="result-type-badge" style={{ background: color }}>
                {node.type}
              </span>
              <span className="result-node-name">{node.name}</span>
            </div>
          </div>
        );
      })}
      {hasMore && (
        <button
          className="result-show-more"
          onClick={() => setExpanded(!expanded)}
        >
          {expanded ? 'Show less' : `Show all ${entries.length}`}
        </button>
      )}
    </div>
  );