81 lines
4.4 KiB
Markdown
81 lines
4.4 KiB
Markdown
# Components
|
|
|
|
UI components organized by feature domain.
|
|
|
|
## Structure
|
|
```
|
|
components/
|
|
├── chat/ # Session message display
|
|
│ ├── items/ # Individual message/tool items
|
|
│ │ ├── linkedTool/ # Tool call/result display helpers
|
|
│ │ ├── BaseItem # Base item wrapper
|
|
│ │ ├── baseItemHelpers # Base item utility functions
|
|
│ │ ├── ExecutionTrace # Execution trace display
|
|
│ │ ├── LinkedToolItem # Tool call with linked result
|
|
│ │ ├── MetricsPill # Metrics badge display
|
|
│ │ ├── SlashItem # Slash command display
|
|
│ │ ├── SubagentItem # Subagent execution display
|
|
│ │ ├── TeammateMessageItem # Team message cards
|
|
│ │ ├── ThinkingItem # Extended thinking display
|
|
│ │ └── TextItem # Text output display
|
|
│ ├── viewers/ # Content viewers (JSON, code, diff)
|
|
│ ├── SessionContextPanel/ # Visible context tracking panel
|
|
│ │ ├── components/ # Section wrappers (ClaudeMdFilesSection, ToolOutputsSection, UserMessagesSection, etc.)
|
|
│ │ ├── items/ # Per-injection item renderers (ClaudeMdItem, ToolOutputItem, UserMessageItem, etc.)
|
|
│ │ ├── DirectoryTree/ # CLAUDE.md directory navigation
|
|
│ │ ├── utils/ # Formatting helpers
|
|
│ │ ├── index.tsx # Main panel component
|
|
│ │ └── types.ts # SectionType constants, panel props
|
|
│ ├── AIChatGroup.tsx # AI response group display
|
|
│ ├── ChatHistory.tsx # Chat timeline container
|
|
│ ├── ChatHistoryEmptyState.tsx # Empty state display
|
|
│ ├── ChatHistoryItem.tsx # Individual history item
|
|
│ ├── ChatHistoryLoadingState.tsx # Loading state display
|
|
│ ├── CompactBoundary.tsx # Compaction event boundary marker
|
|
│ ├── ContextBadge.tsx # Per-turn context injection popover badge
|
|
│ ├── DisplayItemList.tsx # Display item list rendering
|
|
│ ├── LastOutputDisplay.tsx # Last output display
|
|
│ ├── SystemChatGroup.tsx # System message group display
|
|
│ ├── UserChatGroup.tsx # User message display
|
|
│ ├── markdownComponents.tsx # Custom markdown renderers
|
|
│ └── searchHighlightUtils.ts # Search highlight utilities
|
|
├── common/ # Shared UI primitives
|
|
│ ├── CopyButton # Copy to clipboard button
|
|
│ ├── CopyablePath # Clickable, copyable file path
|
|
│ ├── ErrorBoundary # React error boundary
|
|
│ ├── OngoingIndicator # Session in-progress indicator
|
|
│ ├── RepositoryDropdown # Repository selector dropdown
|
|
│ ├── TokenUsageDisplay # Token breakdown with context stats hover
|
|
│ └── WorktreeBadge # Git worktree badge
|
|
├── dashboard/ # Overview and listing pages
|
|
├── layout/ # App shell, sidebars, headers
|
|
├── notifications/ # Notification panels and badges
|
|
├── search/ # Search UI and results
|
|
├── settings/ # Settings pages and controls
|
|
│ ├── components/ # Reusable setting controls (SettingRow, SettingsToggle, etc.)
|
|
│ ├── hooks/ # Settings-specific hooks
|
|
│ ├── sections/ # Setting sections (General, Notifications, Advanced)
|
|
│ └── NotificationTriggerSettings/ # Trigger config UI
|
|
│ ├── components/ # Trigger form components
|
|
│ ├── hooks/ # Trigger form hooks
|
|
│ └── utils/ # Trigger utilities
|
|
└── sidebar/ # Project/session navigation
|
|
```
|
|
|
|
## Adding Components
|
|
1. Choose appropriate parent directory by feature
|
|
2. If used across features, place in `common/`
|
|
3. Use Tailwind with theme-aware CSS variables
|
|
4. Connect to store via `useStore()` hook if needed
|
|
5. Colocate related hooks/utils in same directory
|
|
|
|
## Component Guidelines
|
|
- One component per file, PascalCase naming
|
|
- Use functional components with hooks
|
|
- Prefer composition over prop drilling
|
|
- Use `TabUIContext` for per-tab UI state
|
|
|
|
## Virtual Scrolling
|
|
Use `@tanstack/react-virtual` for lists > 100 items:
|
|
- Session lists in sidebar
|
|
- Message lists in chat view
|