Skip to content

Commit b126d9d

Browse files
mvachaclaude
authored and
Vrtak-CZ
committed
docs: update docs for lightbox feature and catch up missing entries
- Add ImageLightbox, SmartToolOutput, BashToolContent, DiffView, ErrorBoundary, SearchModal to architecture tree and components guide - Add useFetch hook and format-detector util to architecture tree - Update test count from 161/14 to 469/44 and list all test files - Update image rendering descriptions in README and CONTENT_TYPES Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1 parent b74b49d commit b126d9d

5 files changed

Lines changed: 66 additions & 7 deletions

File tree

‎CONTENT_TYPES.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -164,7 +164,7 @@ Arrive as user messages with content array:
164164
| Text result | `content` is string | Handled | Monospace, truncated at 5000 chars |
165165
| Error result | `is_error: true` | Handled | Red text (`.tool-call-error`) |
166166
| Array content | `content` is array of objects | Partially | Joins text items |
167-
| Image in result | `content[].type === "image"` | Handled | Rendered as clickable thumbnails |
167+
| Image in result | `content[].type === "image"` | Handled | Rendered as clickable thumbnails with fullscreen lightbox |
168168
| Empty result | `content` is empty/null | Handled | Shows nothing |
169169

170170
---
@@ -285,7 +285,7 @@ Fields available on message lines for potential display:
285285

286286
- **Token usage** - Input/output/cache token counts shown as footer on assistant messages
287287
- **Timestamps** - Relative timestamps shown on user and assistant messages
288-
- **Image results in tool output** - Rendered as clickable thumbnails
288+
- **Image results in tool output** - Rendered as clickable thumbnails with fullscreen lightbox (ImageLightbox component)
289289
- **`AskUserQuestion`** - Summary shows first question text
290290
- **`Skill`** - Summary shows skill name
291291
- **`TaskCreate` / `TaskUpdate` / `TaskList` / `TaskGet` / `TaskOutput` / `TaskStop`** - Summaries for all task management tools

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ bun run dev
7070
- Collapsible thinking/reasoning blocks
7171
- Token usage display (input/output/cache tokens per assistant message)
7272
- Timestamps on messages (relative time format)
73-
- Tool result images rendered as clickable thumbnails
73+
- Tool result images rendered as clickable thumbnails with fullscreen lightbox
7474
- File references (`@filepath.ext`) highlighted as green badges
7575
- Image attachments displayed as media-type badges
7676
- Slash commands shown with green `> /command` badge

‎docs/architecture.md‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,8 @@ Klovi/
5959
│ │ ├── UserMessage.tsx # User bubble: text, commands, attachments
6060
│ │ ├── AssistantMessage.tsx # Assistant: thinking + text + tool calls
6161
│ │ ├── ToolCall.tsx # Collapsible tool call with smart summary
62+
│ │ ├── SmartToolOutput.tsx # Tool output: format detection, images, lightbox
63+
│ │ ├── BashToolContent.tsx # Bash tool input/output display
6264
│ │ ├── ThinkingBlock.tsx # Collapsible thinking/reasoning block
6365
│ │ └── SubAgentView.tsx # Inline sub-agent session display
6466
│ ├── session/
@@ -70,19 +72,26 @@ Klovi/
7072
│ │ ├── ProjectList.tsx # Home view: all projects
7173
│ │ ├── SessionList.tsx # Sidebar: sessions for selected project
7274
│ │ └── HiddenProjectList.tsx # Hidden projects management view
75+
│ ├── search/
76+
│ │ └── SearchModal.tsx # Global session search (Cmd+K)
7377
│ └── ui/
7478
│ ├── MarkdownRenderer.tsx # react-markdown + GFM + file ref detection
7579
│ ├── CodeBlock.tsx # Syntax-highlighted code (Prism)
76-
│ └── CollapsibleSection.tsx # Reusable expand/collapse
80+
│ ├── CollapsibleSection.tsx # Reusable expand/collapse
81+
│ ├── DiffView.tsx # Side-by-side diff display for Edit tool
82+
│ ├── ErrorBoundary.tsx # React error boundary with retry
83+
│ └── ImageLightbox.tsx # Fullscreen image lightbox overlay
7784
├── hooks/
7885
│ ├── useTheme.ts # Light/dark/system theme + font size persistence
86+
│ ├── useFetch.ts # Generic data fetching hook with loading/error state
7987
│ ├── useHiddenProjects.ts # Hidden projects state + localStorage persistence
8088
│ ├── usePresentationMode.ts # Step-through state machine
8189
│ └── useKeyboard.ts # Arrow/Space/Esc/F key bindings
8290
└── utils/
8391
├── time.ts # Relative time formatting + timestamp display
8492
├── model.ts # Model name shortening (Opus/Sonnet/Haiku)
85-
└── project.ts # Project path utilities
93+
├── project.ts # Project path utilities
94+
└── format-detector.ts # Auto-detect output format (JSON, XML, diff, etc.)
8695
```
8796

8897
## Data Flow
@@ -169,6 +178,7 @@ App
169178
│ │ │ ├── ThinkingBlock(s)
170179
│ │ │ ├── MarkdownRenderer (text blocks)
171180
│ │ │ ├── ToolCall(s)
181+
│ │ │ │ └── SmartToolOutput (format detection, images → ImageLightbox)
172182
│ │ │ └── SubAgentView (inline sub-agent)
173183
│ │ └── SystemMessage (inline)
174184
│ ├── SubAgentView (sub-agent route, normal mode)

‎docs/components.md‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ Collapsible tool call display. Key features:
5454
- **Input display** - JSON-formatted tool input
5555
- **Result display** - monospace text, truncated at 5000 chars
5656
- **Error styling** - red text for `isError: true` results
57-
- **Image results** - base64 images rendered as thumbnails with zoom
57+
- **Image results** - base64 images rendered as thumbnails, click to open in `ImageLightbox`
5858

5959
#### Tool Summary Mapping
6060

@@ -174,6 +174,20 @@ Syntax-highlighted code using `react-syntax-highlighter` with Prism (oneDark the
174174

175175
Reusable expand/collapse wrapper with animated disclosure. Max height 500px with scroll when expanded.
176176

177+
### ImageLightbox (`src/frontend/components/ui/ImageLightbox.tsx`)
178+
179+
Fullscreen image lightbox overlay. Displays an image centered on a dark backdrop. Click anywhere or press Escape to dismiss. Animates in/out with fade + scale transition (200ms).
180+
181+
Used by `SmartToolOutput` for tool result images (e.g. screenshots from chrome-devtools).
182+
183+
### DiffView (`src/frontend/components/ui/DiffView.tsx`)
184+
185+
Side-by-side diff display for Edit tool results. Shows old and new strings with syntax highlighting.
186+
187+
### ErrorBoundary (`src/frontend/components/ui/ErrorBoundary.tsx`)
188+
189+
React error boundary with retry functionality. Two variants: view-level (full-page fallback) and inline (per-component fallback with retry button).
190+
177191
## Hooks
178192

179193
### useTheme (`src/frontend/hooks/useTheme.ts`)

‎docs/testing.md‎

Lines changed: 36 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,23 +27,58 @@ bun test src/frontend # Frontend tests only
2727
bun test --watch # Watch mode
2828
```
2929

30-
**Current:** 161 tests across 14 files
30+
**Current:** 469 tests across 44 files
3131

3232
## Test Files
3333

3434
| File | What it covers |
3535
|---|---|
36+
| **Server** | |
3637
| `src/server/parser/session.test.ts` | `buildTurns()`, `extractSubAgentMap()`, contentBlocks ordering, plan/impl linking |
3738
| `src/server/parser/command-message.test.ts` | `parseCommandMessage()`, `cleanCommandMessage()` |
3839
| `src/server/parser/claude-dir.test.ts` | Session discovery, `classifySessionTypes()`, slug extraction |
3940
| `src/server/parser/stats.test.ts` | `scanStats()` aggregate statistics computation |
41+
| `src/server/api/version.test.ts` | Version API handler |
42+
| `src/server/cli.test.ts` | CLI arg parsing, help text |
43+
| `src/server/config.test.ts` | Projects directory configuration |
44+
| `src/server/http.test.ts` | HTTP server, route matching, static files |
45+
| `src/server/version.test.ts` | Version info extraction |
46+
| **Shared** | |
47+
| `src/shared/content-blocks.test.ts` | ContentBlock grouping for presentation steps |
48+
| **Frontend — Components** | |
4049
| `src/frontend/components/message/UserMessage.test.tsx` | Regular text, commands, status notices, attachments, plan/impl links |
4150
| `src/frontend/components/message/AssistantMessage.test.tsx` | Thinking, text, tool calls, model display, token usage |
4251
| `src/frontend/components/message/ToolCall.test.tsx` | `getToolSummary()` for all tool types, MCP parsing |
52+
| `src/frontend/components/message/SmartToolOutput.test.tsx` | Tool output format detection, image rendering |
53+
| `src/frontend/components/message/BashToolContent.test.tsx` | Bash tool input/output display |
54+
| `src/frontend/components/message/MessageList.test.tsx` | Turn-to-component mapping |
55+
| `src/frontend/components/message/ThinkingBlock.test.tsx` | Thinking block rendering |
56+
| `src/frontend/components/message/SubAgentView.test.tsx` | Sub-agent inline display |
4357
| `src/frontend/components/dashboard/DashboardStats.test.tsx` | Dashboard rendering, loading state, model display |
58+
| `src/frontend/components/layout/Header.test.tsx` | Header bar rendering |
59+
| `src/frontend/components/layout/Layout.test.tsx` | Layout wrapper |
60+
| `src/frontend/components/layout/Sidebar.test.tsx` | Sidebar rendering |
61+
| `src/frontend/components/project/ProjectList.test.tsx` | Project list rendering |
62+
| `src/frontend/components/project/SessionList.test.tsx` | Session list rendering |
63+
| `src/frontend/components/project/HiddenProjectList.test.tsx` | Hidden projects management |
64+
| `src/frontend/components/session/SessionView.test.tsx` | Session view rendering |
65+
| `src/frontend/components/session/SessionPresentation.test.tsx` | Session presentation mode |
66+
| `src/frontend/components/session/PresentationShell.test.tsx` | Presentation shell wrapper |
67+
| `src/frontend/components/session/SubAgentPresentation.test.tsx` | Sub-agent presentation mode |
68+
| `src/frontend/components/search/SearchModal.test.tsx` | Global search modal |
69+
| `src/frontend/components/ui/CodeBlock.test.tsx` | Syntax-highlighted code |
70+
| `src/frontend/components/ui/CollapsibleSection.test.tsx` | Expand/collapse wrapper |
71+
| `src/frontend/components/ui/DiffView.test.tsx` | Diff view rendering |
72+
| `src/frontend/components/ui/ErrorBoundary.test.tsx` | Error boundary with retry |
73+
| `src/frontend/components/ui/MarkdownRenderer.test.tsx` | Markdown rendering |
74+
| **Frontend — Hooks** | |
75+
| `src/frontend/hooks/useFetch.test.ts` | Generic data fetching hook |
4476
| `src/frontend/hooks/useHiddenProjects.test.ts` | `useHiddenProjects` hook: hide, unhide, localStorage persistence |
77+
| `src/frontend/hooks/useKeyboard.test.tsx` | Keyboard event handling |
4578
| `src/frontend/hooks/usePresentationMode.test.ts` | Step counting, navigation, turn boundaries, visibility |
4679
| `src/frontend/hooks/useTheme.test.ts` | Theme cycling, font size, localStorage persistence |
80+
| **Frontend — Utils** | |
81+
| `src/frontend/utils/format-detector.test.ts` | Output format auto-detection |
4782
| `src/frontend/utils/time.test.ts` | Relative time strings |
4883
| `src/frontend/utils/model.test.ts` | Model name shortening (Opus/Sonnet/Haiku) |
4984
| `src/frontend/utils/project.test.ts` | Project path utilities |

0 commit comments

Comments
 (0)