✨ Rich tool widgets for code mode (reusable for chat)

[TechNickAI]

Summary

Create rich, interactive tool widgets that work in both code mode and regular chat mode. Each tool type gets specialized UI that's more informative than plain text output.

Current State

We have basic tool rendering in code mode (CodeModeMessage, InlineTool) and a tool registry (components/tools/registry.tsx) that routes to specialized components. However, the widgets could be richer and more consistent.

Proposed Tool Widgets

Tool	Current	Proposed Enhancement
Read	FileViewer	Syntax highlighting, line numbers, collapsible
Write	FileWriter	Show file path prominently, success indicator
Edit	DiffViewer	Side-by-side or unified diff with syntax highlighting
Bash	TerminalOutput	ANSI color support, copy button, exit code badge
Grep	SearchResults	Grouped by file, clickable line numbers
Glob	FileList	Tree visualization, file icons by extension
WebSearch	Basic	Source cards with favicons, snippet preview
WebFetch	Basic	Content preview, metadata (title, description)
TodoWrite	Basic	Checkbox list with status colors
Task	AgentTask	Progress indicator, nested tool display
AskUserQuestion	Not rendered	Interactive buttons/input (HIGH PRIORITY)

Architecture

Shared Widget Components

components/tools/widgets/
├── shared/
│   ├── ToolHeader.tsx        # Icon, name, elapsed time
│   ├── ToolOutput.tsx        # Collapsible output container
│   ├── CopyButton.tsx        # One-click copy
│   └── StatusBadge.tsx       # Success/error/running states
├── ReadWidget.tsx
├── EditWidget.tsx
├── BashWidget.tsx
├── GrepWidget.tsx
├── GlobWidget.tsx
├── TodoWidget.tsx
├── AskUserQuestionWidget.tsx  # Interactive!
└── index.ts                   # Registry export

Reusability Pattern

Widgets accept a common interface:

interface ToolWidgetProps {
  toolName: string;
  input: unknown;           // Tool-specific input
  result?: unknown;         // Tool-specific result
  status: 'streaming' | 'running' | 'complete' | 'error';
  elapsed?: number;         // Milliseconds
  onInteraction?: (response: unknown) => void;  // For AskUserQuestion
}

Both CodeModeMessage and HoloThread (chat mode) can use the same widgets.

Reference

• opcode tool widgets: src/components/ToolWidgets.tsx
• Current registry: components/tools/registry.tsx
• Competitor analysis: knowledge/code-mode/competitors/opcode.md

Acceptance Criteria

• Shared widget architecture in components/tools/widgets/
• AskUserQuestion renders interactive UI with buttons/input
• Bash output supports ANSI colors and copy
• Edit shows proper diff visualization
• Widgets work in both code mode and chat mode
• Consistent styling with design system