Implement ToolDisplay component #11766

Parent Epic

Part of #11762 (Ink-based TUI Rewrite)

Objective

Create component to display tool calls with status icons, spinners, and summaries.

Current Behavior

✓ bash  git status
◇ bash  running command...
✗ bash  command failed

Component Design

interface ToolDisplayProps {
  id: string
  name: string
  summary: string
  status: 'running' | 'done' | 'error' | 'denied'
}

const ToolDisplay: React.FC<ToolDisplayProps> = ({ name, summary, status }) => {
  const icon = {
    running: <Spinner type="dots" />,
    done: <Text color="green">✓</Text>,
    error: <Text color="red">✗</Text>,
    denied: <Text color="red">✗</Text>
  }[status]
  
  return (
    <Box>
      <Box width={3}>{icon}</Box>
      <Text color="cyan">{name}</Text>
      <Text>  {summary}</Text>
      {status === 'denied' && <Text dimColor> (permission denied)</Text>}
    </Box>
  )
}

Tasks

• Create src/cli/ink/components/ToolDisplay.tsx
• Implement status icons (spinner for running, checkmark for done, X for error)
• Use ink-spinner for animated spinner
• Handle long summaries (truncate with ellipsis based on terminal width)
• Support deduplication display: bash git status (×3)
• Apply theming from existing theme.ts

Acceptance Criteria

• All four status states render correctly
• Spinner animates smoothly
• Long summaries truncate gracefully
• Colors match existing theme

Estimated Effort

1 day

Risk

Low - straightforward component

Dependencies

• Setup Ink dependencies and verify Bun compatibility #11763 (Setup Ink dependencies)
• Implement core App component and state management #11764 (App component)