/** * DirectoryTreeNode - Recursive component for rendering directory tree nodes. */ import React, { useState } from 'react'; import { CopyablePath } from '@renderer/components/common/CopyablePath';import { COLOR_TEXT_MUTED, COLOR_TEXT_SECONDARY } from '@renderer/constants/cssVariables';import { ChevronRight } from 'lucide-react'; import { formatTokens } from '../utils/formatting';import { formatFirstSeen, parseTurnIndex } from '../utils/pathParsing'; import type { TreeNode } from './types'; interface DirectoryTreeNodeProps {  node: TreeNode;  depth?: number;  onNavigateToTurn?: (turnIndex: number) => void;} export const DirectoryTreeNode = ({  node,  depth = 0,  onNavigateToTurn,}: Readonly<DirectoryTreeNodeProps>): React.ReactElement | null => {  const [expanded, setExpanded] = useState(true);  const indent = depth * 12;   const sortedChildren = Array.from(node.children.values()).sort((a, b) => {    if (a.isFile && !b.isFile) return -1;    if (!a.isFile && b.isFile) return 1;    return a.name.localeCompare(b.name);  });   if (node.isFile) {    const turnIndex = node.firstSeenInGroup ? parseTurnIndex(node.firstSeenInGroup) : -1;    const isClickable = onNavigateToTurn && turnIndex >= 0;     return (      <div        style={{ paddingLeft: `${indent}px` }}        className="flex items-center gap-1 py-0.5 text-xs"      >        <CopyablePath          displayText={node.name}          copyText={node.path}          className="text-xs"          style={{ color: COLOR_TEXT_SECONDARY }}        />        <span style={{ color: COLOR_TEXT_MUTED }}>(~{formatTokens(node.tokens ?? 0)})</span>        {node.firstSeenInGroup &&          (isClickable ? (            <button              type="button"              className="cursor-pointer text-xs transition-opacity hover:opacity-80"              style={{                color: '#93c5fd',                textDecoration: 'underline',                textDecorationStyle: 'dotted' as const,                textUnderlineOffset: '2px',                background: 'none',                border: 'none',                padding: 0,                font: 'inherit',                fontSize: '12px',              }}              onClick={() => onNavigateToTurn(turnIndex)}            >              @{formatFirstSeen(node.firstSeenInGroup)}            </button>          ) : (            <span              className="text-xs"              style={{                color: COLOR_TEXT_MUTED,                opacity: 0.7,              }}            >              @{formatFirstSeen(node.firstSeenInGroup)}            </span>          ))}      </div>    );  }   return (    <div>      {node.name && (        <div          role="button"          tabIndex={0}          style={{ paddingLeft: `${indent}px` }}          className="flex cursor-pointer items-center gap-1 py-0.5 text-xs hover:opacity-80"          onClick={(e) => {            e.stopPropagation();            setExpanded(!expanded);          }}          onKeyDown={(e) => {            if (e.key === 'Enter' || e.key === ' ') {              e.preventDefault();              e.stopPropagation();              setExpanded(!expanded);            }          }}        >          <ChevronRight            className={`size-3 shrink-0 transition-transform ${expanded ? 'rotate-90' : ''}`}            style={{ color: COLOR_TEXT_MUTED }}          />          <span style={{ color: COLOR_TEXT_MUTED }}>{node.name}/</span>        </div>      )}      {expanded &&        sortedChildren.map((child) => (          <DirectoryTreeNode            key={child.name}            node={child}            depth={node.name ? depth + 1 : depth}            onNavigateToTurn={onNavigateToTurn}          />        ))}    </div>  );};