/** * MentionedFileItem - Single mentioned file item display. */ import React from 'react'; import { CopyablePath } from '@renderer/components/common/CopyablePath';import { resolveAbsolutePath, shortenDisplayPath } from '@renderer/utils/pathDisplay';import { File } from 'lucide-react'; import { formatTokens } from '../utils/formatting'; import type { MentionedFileInjection } from '@renderer/types/contextInjection'; interface MentionedFileItemProps {  injection: MentionedFileInjection;  projectRoot?: string;  onNavigateToTurn?: (turnIndex: number) => void;} export const MentionedFileItem = ({  injection,  projectRoot,  onNavigateToTurn,}: Readonly<MentionedFileItemProps>): React.ReactElement => {  const turnIndex = injection.firstSeenTurnIndex;  const isClickable = onNavigateToTurn && turnIndex >= 0;  const displayPath = shortenDisplayPath(injection.path, projectRoot);  const absolutePath = resolveAbsolutePath(injection.path, projectRoot);   return (    <div className="rounded px-2 py-1.5">      <div className="flex items-center gap-1.5">        <File size={12} style={{ color: 'var(--color-text-muted)', flexShrink: 0 }} />        <CopyablePath          displayText={displayPath}          copyText={absolutePath}          className="text-xs"          style={{ color: 'var(--color-text-secondary)' }}        />        {!injection.exists && (          <span            className="rounded px-1 py-0.5 text-xs"            style={{              backgroundColor: 'var(--color-error-subtle)',              color: 'var(--color-error)',            }}          >            missing          </span>        )}      </div>      <div className="ml-4 mt-0.5 flex items-center gap-2">        <span className="text-xs" style={{ color: 'var(--color-text-muted)' }}>          ~{formatTokens(injection.estimatedTokens)} tokens        </span>        {isClickable ? (          <span            role="link"            tabIndex={0}            className="cursor-pointer text-xs transition-opacity hover:opacity-80"            style={{              color: '#93c5fd',              textDecoration: 'underline',              textDecorationStyle: 'dotted' as const,              textUnderlineOffset: '2px',            }}            onClick={() => onNavigateToTurn(turnIndex)}            onKeyDown={(e) => {              if (e.key === 'Enter' || e.key === ' ') {                onNavigateToTurn(turnIndex);              }            }}          >            @Turn {turnIndex + 1}          </span>        ) : (          <span            className="text-xs"            style={{              color: 'var(--color-text-muted)',              opacity: 0.7,            }}          >            @Turn {turnIndex + 1}          </span>        )}      </div>    </div>  );};