@kimuson/claude-code-viewer 0.6.1-beta.4 → 0.7.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (31) hide show
  1. package/README.md +102 -110
  2. package/dist/main.js +1694 -1401
  3. package/dist/main.js.map +4 -4
  4. package/dist/migrations/20260403053302_nappy_night_thrasher/migration.sql +28 -0
  5. package/dist/migrations/20260403053302_nappy_night_thrasher/snapshot.json +318 -0
  6. package/dist/static/assets/{AuthProvider-BKc7q7ka.js → AuthProvider-Ds-c4CWc.js} +1 -1
  7. package/dist/static/assets/ProtectedRoute-BTfjJdM-.js +1 -0
  8. package/dist/static/assets/{dist-DiGJ7VFi.js → dist-Cartj9I0.js} +3 -3
  9. package/dist/static/assets/index-DPQFjjdS.css +2 -0
  10. package/dist/static/assets/index-Dd_UGB4w.js +20 -0
  11. package/dist/static/assets/{login-pLhQHKNI.js → login-CKSjZM5v.js} +1 -1
  12. package/dist/static/assets/messages-BIF6nUZW.js +1 -0
  13. package/dist/static/assets/messages-BLphVEYK.js +1 -0
  14. package/dist/static/assets/messages-CuPsU53l.js +1 -0
  15. package/dist/static/assets/projects-DH0K12HM.js +1 -0
  16. package/dist/static/assets/routes-CzLZwWu9.js +1 -0
  17. package/dist/static/assets/session-CJWdf6N4.js +12 -0
  18. package/dist/static/assets/session-vY-62UKf.js +1 -0
  19. package/dist/static/index.html +4 -4
  20. package/dist/static/sw.js +1 -1
  21. package/package.json +3 -1
  22. package/dist/static/assets/ProtectedRoute-DtqWc34B.js +0 -1
  23. package/dist/static/assets/index-CxzFZpzV.js +0 -20
  24. package/dist/static/assets/index-DgQxQj-3.css +0 -2
  25. package/dist/static/assets/messages-Cq0t_Ljz.js +0 -1
  26. package/dist/static/assets/messages-DJ70MfCl.js +0 -1
  27. package/dist/static/assets/messages-DRdgpO3i.js +0 -1
  28. package/dist/static/assets/projects-DWwR_fHN.js +0 -1
  29. package/dist/static/assets/routes-9aZugTrf.js +0 -1
  30. package/dist/static/assets/session-D5eScPGc.js +0 -8
  31. package/dist/static/assets/session-DK1CQBjg.js +0 -1
package/README.md CHANGED
@@ -10,46 +10,39 @@ A full-featured web-based Claude Code client that provides complete interactive
10
10
 
11
11
  https://github.com/user-attachments/assets/090d4806-163f-4bac-972a-002c7433145e
12
12
 
13
+ ## Important Notice: Agent SDK and Subscription Usage
14
+
15
+ > [!WARNING]
16
+ > As of April 2026, Anthropic's [Terms of Service](https://code.claude.com/docs/en/legal-and-compliance#authentication-and-credential-use) prohibit using the Agent SDK to **send chat messages** with a subscription account. While Anthropic's X/Twitter announcements suggested personal use may be acceptable, the boundary between permitted and prohibited use remains ambiguous.
17
+ >
18
+ > In response, **chat sending, session resuming, permission approval, and `AskUserQuestion`** have been made opt-in.
19
+ >
20
+ > Note that real-time conversation log viewing, session history browsing, Git operations, and all other read-oriented features are implemented independently of the Agent SDK and remain fully available regardless of your authentication mode. You can start a Claude Code session from the CLI (or the built-in terminal) and watch it live in Claude Code Viewer without any restrictions.
21
+
22
+ ### Choosing Your Authentication Mode
23
+
24
+ On first launch (or from the Settings screen), you will be prompted to select your authentication method:
25
+
26
+ - **API Key** (default) — Uses the Anthropic API directly. All features, including chat sending, are fully available.
27
+ - **Subscription** — Opts out of Agent SDK chat features. The chat input switches to a copy mode: configure your session options in the form, then click the **Copy** button to get the equivalent `claude` CLI command with the corresponding arguments already set. Paste and run it in any terminal to start or resume your session. Once the session is running, Claude Code Viewer will display the conversation in real-time as usual.
28
+
29
+ ### Built-in Terminal
30
+
31
+ Claude Code Viewer includes an integrated terminal emulator accessible via the **panel at the bottom of the screen**. Open it, paste the copied command, and launch Claude Code without ever leaving the browser.
32
+
33
+ ---
34
+
13
35
  ## Introduction
14
36
 
15
37
  Claude Code Viewer is a web-based Claude Code client focused on **comprehensive session log analysis**. It preserves and organizes all conversation data through strict schema validation and a progressive disclosure UI that reveals details on demand.
16
38
 
17
39
  **Core Philosophy**: Zero data loss + Effective organization + Remote-friendly design
18
40
 
19
- ## Features
41
+ ## System Requirements
20
42
 
21
- | Feature | Description |
22
- | ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
23
- | View Chat Logs | View Claude Code session logs in real-time through the web UI. Supports historical logs as it uses standard Claude Code logs (~/.claude/projects/...) as the data source |
24
- | Search Conversations | Full-text search across conversations with `⌘K` (macOS) or `Ctrl+K` (Linux). Search within a specific project or across all projects. Features fuzzy matching, prefix search, and keyboard navigation (↑↓ to navigate, Enter to select) |
25
- | In-page Find | Jump to any text in the current conversation with a configurable hotkey (`Ctrl+F` / `Command+F`). Cycles through all matches with keyboard navigation |
26
- | Start Conversations | Start Claude Code sessions directly from Claude Code Viewer. Enjoy core functionality like file/command completion, pause/resume, and tool approval through a superior web experience |
27
- | Resume Sessions | Resume conversations directly from existing session logs |
28
- | Continue Sessions | Claude Code Viewer provides advanced session process control. Sessions started through Claude Code Viewer remain alive (unless aborted), allowing you to continue conversations without resuming (no session-id reassignment) |
29
- | Create Projects | Create new projects from Claude Code Viewer. Select a directory through the web UI to execute the `/init` command and begin project setup |
30
- | Session Options Toolbar | Inline toolbar above the chat input for configuring per-project session options: model selection, thinking effort (low/medium/high/max), permission mode, and system prompt preset. Settings persist per project |
31
- | Voice Input | Dictate messages directly in the chat input using the built-in voice input button. Transcribed text is inserted into the input field for review before sending |
32
- | File Upload & Preview | Upload images (PNG, JPEG, GIF, WebP), PDFs, and text files directly from the chat interface. Each file type displays with dedicated preview components—images render inline, PDFs embed with a viewer, and text files show formatted content |
33
- | Clipboard Image Paste | Paste images directly from the clipboard into the chat input with `Ctrl+V` / `⌘+V`. Pasted images are attached and previewed before sending |
34
- | Chat Draft Saving | Chat input drafts are automatically saved per project and session. Unsent text is restored when returning to the same conversation |
35
- | Browser Preview | Preview web applications directly within Claude Code Viewer. Click the preview button on any URL in chat messages to open a resizable browser panel on the right side. Features include URL input with keyboard navigation, reload functionality, and automatic chat window width adjustment. The embedded browser tracks URL changes as you navigate (same-origin only) |
36
- | Message Scheduler | Schedule Claude Code messages using cron expressions for recurring tasks or specific datetime for one-time execution. Supports concurrency control (skip/run) for periodic jobs and auto-deletion for reserved jobs |
37
- | Review Changes | Built-in Git Diff Viewer lets you review all changes directly within Claude Code Viewer. Supports inline diff comments for annotating specific lines |
38
- | Commit Changes | Execute Git commits directly from the web interface within the Git Diff Viewer |
39
- | Push Changes | Push committed changes directly from the Git Diff Viewer. Supports both separate push operations and combined commit-and-push workflows for streamlined deployment |
40
- | Branch Switcher | Switch local Git branches directly from the Git tab (with search and status indicators) |
41
- | Explorer | Right panel tab that summarizes edited files with action buttons, groups them by project, lists tool invocations with filters and quick file preview, and shows agent sub-sessions in a dedicated section |
42
- | Visual Tool Display | Tool invocations render with dedicated visual components (e.g. file diffs, structured outputs). A Raw toggle switches to the plain JSON view when needed |
43
- | Todo Viewer | Extracts the latest `TodoWrite` items from sessions and displays them as inline collapsible checklists directly within the conversation |
44
- | PR Link Display | Pull request metadata (title, number, URL) from `pr-link` log entries is rendered as a rich card in the conversation, making it easy to navigate to associated PRs |
45
- | Copy Buttons | Every markdown message includes a copy button to copy the full text content to clipboard with a single click |
46
- | Project Switcher | Quickly jump to any project via the combobox in the header without navigating back to the projects list |
47
- | Inline Approvals | Tool permission requests and custom questions from the `CCVAskUserQuestion` MCP tool are surfaced as inline panels directly in the chat, removing the need to switch to another window for approval |
48
- | Terminal Panel | Bottom panel terminal over WebSocket for running shell commands without leaving the UI |
49
- | MCP Server Viewer | View MCP server configurations directly in the session sidebar. Lists all configured servers with their names and commands, with real-time reload capability |
50
- | PWA Support | Install Claude Code Viewer as a Progressive Web App on desktop or mobile. Supports home screen installation and push notifications for session completion events |
51
- | System Information | Monitor Claude Code and Claude Code Viewer versions, feature compatibility, and system status |
52
- | Multi-language Support | Full internationalization support with English, Japanese, and Simplified Chinese language options |
43
+ - **Node.js**: Version 22.13.0 or later
44
+ - **Claude Code**: v1.0.125 or later
45
+ - **Operating Systems**: macOS and Linux (Windows is not supported)
53
46
 
54
47
  ## Installation & Usage
55
48
 
@@ -85,88 +78,20 @@ Options:
85
78
  --api-only Run in API-only mode without Web UI
86
79
  ```
87
80
 
88
- ### Docker Deployment
89
-
90
- Build the image locally:
91
-
92
- ```bash
93
- docker build -t claude-code-viewer .
94
- ```
95
-
96
- Run the container directly:
97
-
98
- ```bash
99
- docker run --rm -p 3400:3400 \
100
- -e PORT=3400 \
101
- -e CCV_PASSWORD=your-password \
102
- -e ANTHROPIC_BASE_URL=... \
103
- -e ANTHROPIC_API_KEY=... \
104
- -e ANTHROPIC_AUTH_TOKEN=... \
105
- claude-code-viewer
106
- ```
107
-
108
- Alternatively, use the provided Compose configuration:
109
-
110
- ```bash
111
- docker compose up --build
112
- ```
113
-
114
- > Note: `docker-compose.yml` ships without mounting `claude_home` by default. If you need the container to reuse an existing Claude workspace, map a volume to `/root/.claude`, for example:
115
- >
116
- > ```yaml
117
- > services:
118
- > app:
119
- > volumes:
120
- > - /path/to/claude_home:/root/.claude
121
- > ```
81
+ ### Remote Access via Tailscale (Mobile / PWA)
122
82
 
123
- ## Screenshots
83
+ Claude Code Viewer works great as a persistent server you access from your phone. A convenient approach is to run it on a always-on machine and expose it over [Tailscale](https://tailscale.com/) with HTTPS:
124
84
 
125
- | Feature | Capture |
126
- | ----------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
127
- | BasicChat (Desktop) | ![](./e2e/snapshots/projects/L2hvbWUvcnVubmVyL3dvcmsvY2xhdWRlLWNvZGUtdmlld2VyL2NsYXVkZS1jb2RlLXZpZXdlci9tb2NrLWdsb2JhbC1jbGF1ZGUtZGlyL3Byb2plY3RzL3NhbXBsZS1wcm9qZWN0/session_sessionId_fe5e1c67-53e7-4862-81ae-d0e013e3270b/desktop-dark.png) |
128
- | BasicChat (Mobile) | ![](./e2e/snapshots/projects/L2hvbWUvcnVubmVyL3dvcmsvY2xhdWRlLWNvZGUtdmlld2VyL2NsYXVkZS1jb2RlLXZpZXdlci9tb2NrLWdsb2JhbC1jbGF1ZGUtZGlyL3Byb2plY3RzL3NhbXBsZS1wcm9qZWN0/session_sessionId_fe5e1c67-53e7-4862-81ae-d0e013e3270b/mobile-dark.png) |
129
- | Browser Preview (Right Panel) | ![](./e2e/snapshots/projects/L2hvbWUvcnVubmVyL3dvcmsvY2xhdWRlLWNvZGUtdmlld2VyL2NsYXVkZS1jb2RlLXZpZXdlci9tb2NrLWdsb2JhbC1jbGF1ZGUtZGlyL3Byb2plY3RzL3NhbXBsZS1wcm9qZWN0/session_sessionId_fe5e1c67-53e7-4862-81ae-d0e013e3270b/right-panel-browser-opened/desktop-dark.png) |
130
- | Git Tab (Right Panel) | ![](./e2e/snapshots/projects/L2hvbWUvcnVubmVyL3dvcmsvY2xhdWRlLWNvZGUtdmlld2VyL2NsYXVkZS1jb2RlLXZpZXdlci9tb2NrLWdsb2JhbC1jbGF1ZGUtZGlyL3Byb2plY3RzL3NhbXBsZS1wcm9qZWN0/session_sessionId_fe5e1c67-53e7-4862-81ae-d0e013e3270b/right-panel-git-tab-opened/desktop-dark.png) |
131
- | Review Panel (Right Panel) | ![](./e2e/snapshots/projects/L2hvbWUvcnVubmVyL3dvcmsvY2xhdWRlLWNvZGUtdmlld2VyL2NsYXVkZS1jb2RlLXZpZXdlci9tb2NrLWdsb2JhbC1jbGF1ZGUtZGlyL3Byb2plY3RzL3NhbXBsZS1wcm9qZWN0/session_sessionId_fe5e1c67-53e7-4862-81ae-d0e013e3270b/right-panel-review-opened/desktop-dark.png) |
132
- | File Diffs (Right Panel) | ![](./e2e/snapshots/projects/L2hvbWUvcnVubmVyL3dvcmsvY2xhdWRlLWNvZGUtdmlld2VyL2NsYXVkZS1jb2RlLXZpZXdlci9tb2NrLWdsb2JhbC1jbGF1ZGUtZGlyL3Byb2plY3RzL3NhbXBsZS1wcm9qZWN0/session_sessionId_fe5e1c67-53e7-4862-81ae-d0e013e3270b/right-panel-file-diffs-opened/desktop-dark.png) |
133
- | Settings | ![](./e2e/snapshots/projects/L2hvbWUvcnVubmVyL3dvcmsvY2xhdWRlLWNvZGUtdmlld2VyL2NsYXVkZS1jb2RlLXZpZXdlci9tb2NrLWdsb2JhbC1jbGF1ZGUtZGlyL3Byb2plY3RzL3NhbXBsZS1wcm9qZWN0/session_sessionId_fe5e1c67-53e7-4862-81ae-d0e013e3270b/settings-tab/desktop-dark.png) |
134
- | Start New Chat | ![](./e2e/snapshots/projects/L2hvbWUvcnVubmVyL3dvcmsvY2xhdWRlLWNvZGUtdmlld2VyL2NsYXVkZS1jb2RlLXZpZXdlci9tb2NrLWdsb2JhbC1jbGF1ZGUtZGlyL3Byb2plY3RzL3NhbXBsZS1wcm9qZWN0/session_sessionId_fe5e1c67-53e7-4862-81ae-d0e013e3270b/start-new-chat/desktop-dark.png) |
135
- | Projects List | ![](./e2e/snapshots/projects/desktop-dark.png) |
136
- | New Project Modal | ![](./e2e/snapshots/projects/new-project-modal/desktop-dark.png) |
137
- | CommandCompletion | ![](./docs/assets/command_completion.png) |
138
- | FileCompletion | ![](./docs/assets/file_completion.png) |
139
- | Diff Viewer | ![](./docs/assets/git_diff.png) |
85
+ 1. **Set up HTTPS on your Tailscale node** following the [Tailscale HTTPS certificates guide](https://tailscale.com/docs/how-to/set-up-https-certificates).
86
+ 2. **Start Claude Code Viewer** bound to all interfaces with a password:
140
87
 
141
- Note: Additional UI screenshots are available in [/e2e/snapshots/](./e2e/snapshots/)
88
+ ```bash
89
+ claude-code-viewer --hostname 0.0.0.0 --port 3400 --password your-secret
90
+ ```
142
91
 
143
- ## Data Source
92
+ 3. **Access from your phone** via the Tailscale HTTPS URL (e.g. `https://your-machine.ts.net:3400`).
144
93
 
145
- The application reads Claude Code conversation logs from:
146
-
147
- - **Location**: `~/.claude/projects/<project>/<session-id>.jsonl`
148
- - **Format**: JSONL files containing conversation entries
149
- - **Auto-detection**: Automatically discovers new projects and sessions
150
-
151
- ## Requirements
152
-
153
- ### System Requirements
154
-
155
- - **Node.js**: Version 20.19.0 or later
156
- - **Operating Systems**: macOS and Linux (Windows is not supported)
157
-
158
- ### Claude Code Compatibility
159
-
160
- - **Minimum Version**: Claude Code v1.0.50 or later
161
- - **Tool Approval Feature**: Requires Claude Code v1.0.82 or later
162
- - **Agent SDK (start/continue sessions)**: Requires Claude Code v1.0.125 or later
163
- - **Agent Sub-session Separation**: Requires Claude Code v2.0.28 or later (agent sessions stored in separate `agent-*.jsonl` files)
164
-
165
- **Note on Version Support**: Recent versions of Claude Code have adopted more aggressive summarization behavior. To accommodate users who prefer to pin to specific versions, Claude Code Viewer maintains compatibility with Claude Code v1.0.50 and later for the foreseeable future.
166
-
167
- ### Environment Variables
168
-
169
- **CCV_ENV Consideration**: If you have `CCV_ENV=development` set in your environment, the application will start in development mode. For production use, set `CCV_ENV=production` or leave it unset.
94
+ Claude Code Viewer is a **PWA (Progressive Web App)**. On mobile, tap "Add to Home Screen" to get an app-like experience with an optimized UI and push notifications when sessions complete.
170
95
 
171
96
  ## Configuration
172
97
 
@@ -220,6 +145,73 @@ Settings can be configured from the sidebar in Claude Code Viewer.
220
145
  | Notifications | None | Enables sound notifications when running session processes complete. Choose from multiple notification sounds with test playback functionality. |
221
146
  | Language | System | Interface language selection. Supports English, Japanese, and Simplified Chinese with automatic system detection. |
222
147
 
148
+ ### Environment Variables
149
+
150
+ **CCV_ENV Consideration**: If you have `CCV_ENV=development` set in your environment, the application will start in development mode. For production use, set `CCV_ENV=production` or leave it unset.
151
+
152
+ ## Features
153
+
154
+ | Feature | Description |
155
+ | ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
156
+ | View Chat Logs | View Claude Code session logs in real-time through the web UI. Supports historical logs as it uses standard Claude Code logs (~/.claude/projects/...) as the data source |
157
+ | Search Conversations | Full-text search across conversations with `⌘K` (macOS) or `Ctrl+K` (Linux). Search within a specific project or across all projects. Features fuzzy matching, prefix search, and keyboard navigation (↑↓ to navigate, Enter to select) |
158
+ | In-page Find | Jump to any text in the current conversation with a configurable hotkey (`Ctrl+F` / `Command+F`). Cycles through all matches with keyboard navigation |
159
+ | Start Conversations | Start Claude Code sessions directly from Claude Code Viewer. Enjoy core functionality like file/command completion, pause/resume, and tool approval through a superior web experience |
160
+ | Resume Sessions | Resume conversations directly from existing session logs |
161
+ | Continue Sessions | Claude Code Viewer provides advanced session process control. Sessions started through Claude Code Viewer remain alive (unless aborted), allowing you to continue conversations without resuming (no session-id reassignment) |
162
+ | Create Projects | Create new projects from Claude Code Viewer. Select a directory through the web UI to execute the `/init` command and begin project setup |
163
+ | Session Options Toolbar | Inline toolbar above the chat input for configuring per-project session options: model selection, thinking effort (low/medium/high/max), permission mode, and system prompt preset. Settings persist per project |
164
+ | Voice Input | Dictate messages directly in the chat input using the built-in voice input button. Transcribed text is inserted into the input field for review before sending |
165
+ | File Upload & Preview | Upload images (PNG, JPEG, GIF, WebP), PDFs, and text files directly from the chat interface. Each file type displays with dedicated preview components—images render inline, PDFs embed with a viewer, and text files show formatted content |
166
+ | Clipboard Image Paste | Paste images directly from the clipboard into the chat input with `Ctrl+V` / `⌘+V`. Pasted images are attached and previewed before sending |
167
+ | Chat Draft Saving | Chat input drafts are automatically saved per project and session. Unsent text is restored when returning to the same conversation |
168
+ | Browser Preview | Preview web applications directly within Claude Code Viewer. Click the preview button on any URL in chat messages to open a resizable browser panel on the right side. Features include URL input with keyboard navigation, reload functionality, and automatic chat window width adjustment. The embedded browser tracks URL changes as you navigate (same-origin only) |
169
+ | Message Scheduler | Schedule Claude Code messages using cron expressions for recurring tasks or specific datetime for one-time execution. Supports concurrency control (skip/run) for periodic jobs and auto-deletion for reserved jobs |
170
+ | Review Changes | Built-in Git Diff Viewer lets you review all changes directly within Claude Code Viewer. Supports inline diff comments for annotating specific lines |
171
+ | Commit Changes | Execute Git commits directly from the web interface within the Git Diff Viewer |
172
+ | Push Changes | Push committed changes directly from the Git Diff Viewer. Supports both separate push operations and combined commit-and-push workflows for streamlined deployment |
173
+ | Branch Switcher | Switch local Git branches directly from the Git tab (with search and status indicators) |
174
+ | Explorer | Right panel tab that summarizes edited files with action buttons, groups them by project, lists tool invocations with filters and quick file preview, and shows agent sub-sessions in a dedicated section |
175
+ | Visual Tool Display | Tool invocations render with dedicated visual components (e.g. file diffs, structured outputs). A Raw toggle switches to the plain JSON view when needed |
176
+ | Todo Viewer | Extracts the latest `TodoWrite` items from sessions and displays them as inline collapsible checklists directly within the conversation |
177
+ | PR Link Display | Pull request metadata (title, number, URL) from `pr-link` log entries is rendered as a rich card in the conversation, making it easy to navigate to associated PRs |
178
+ | Copy Buttons | Every markdown message includes a copy button to copy the full text content to clipboard with a single click |
179
+ | Project Switcher | Quickly jump to any project via the combobox in the header without navigating back to the projects list |
180
+ | Inline Approvals | Tool permission requests and custom questions from the `CCVAskUserQuestion` MCP tool are surfaced as inline panels directly in the chat, removing the need to switch to another window for approval |
181
+ | Terminal Panel | Bottom panel terminal over WebSocket for running shell commands without leaving the UI |
182
+ | MCP Server Viewer | View MCP server configurations directly in the session sidebar. Lists all configured servers with their names and commands, with real-time reload capability |
183
+ | PWA Support | Install Claude Code Viewer as a Progressive Web App on desktop or mobile. Supports home screen installation and push notifications for session completion events |
184
+ | System Information | Monitor Claude Code and Claude Code Viewer versions, feature compatibility, and system status |
185
+ | Multi-language Support | Full internationalization support with English, Japanese, and Simplified Chinese language options |
186
+
187
+ ## Screenshots
188
+
189
+ | Feature | Capture |
190
+ | ----------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
191
+ | BasicChat (Desktop) | ![](./e2e/snapshots/projects/L2hvbWUvcnVubmVyL3dvcmsvY2xhdWRlLWNvZGUtdmlld2VyL2NsYXVkZS1jb2RlLXZpZXdlci9tb2NrLWdsb2JhbC1jbGF1ZGUtZGlyL3Byb2plY3RzL3NhbXBsZS1wcm9qZWN0/session_sessionId_fe5e1c67-53e7-4862-81ae-d0e013e3270b/desktop-dark.png) |
192
+ | BasicChat (Mobile) | ![](./e2e/snapshots/projects/L2hvbWUvcnVubmVyL3dvcmsvY2xhdWRlLWNvZGUtdmlld2VyL2NsYXVkZS1jb2RlLXZpZXdlci9tb2NrLWdsb2JhbC1jbGF1ZGUtZGlyL3Byb2plY3RzL3NhbXBsZS1wcm9qZWN0/session_sessionId_fe5e1c67-53e7-4862-81ae-d0e013e3270b/mobile-dark.png) |
193
+ | Browser Preview (Right Panel) | ![](./e2e/snapshots/projects/L2hvbWUvcnVubmVyL3dvcmsvY2xhdWRlLWNvZGUtdmlld2VyL2NsYXVkZS1jb2RlLXZpZXdlci9tb2NrLWdsb2JhbC1jbGF1ZGUtZGlyL3Byb2plY3RzL3NhbXBsZS1wcm9qZWN0/session_sessionId_fe5e1c67-53e7-4862-81ae-d0e013e3270b/right-panel-browser-opened/desktop-dark.png) |
194
+ | Git Tab (Right Panel) | ![](./e2e/snapshots/projects/L2hvbWUvcnVubmVyL3dvcmsvY2xhdWRlLWNvZGUtdmlld2VyL2NsYXVkZS1jb2RlLXZpZXdlci9tb2NrLWdsb2JhbC1jbGF1ZGUtZGlyL3Byb2plY3RzL3NhbXBsZS1wcm9qZWN0/session_sessionId_fe5e1c67-53e7-4862-81ae-d0e013e3270b/right-panel-git-tab-opened/desktop-dark.png) |
195
+ | Review Panel (Right Panel) | ![](./e2e/snapshots/projects/L2hvbWUvcnVubmVyL3dvcmsvY2xhdWRlLWNvZGUtdmlld2VyL2NsYXVkZS1jb2RlLXZpZXdlci9tb2NrLWdsb2JhbC1jbGF1ZGUtZGlyL3Byb2plY3RzL3NhbXBsZS1wcm9qZWN0/session_sessionId_fe5e1c67-53e7-4862-81ae-d0e013e3270b/right-panel-review-opened/desktop-dark.png) |
196
+ | File Diffs (Right Panel) | ![](./e2e/snapshots/projects/L2hvbWUvcnVubmVyL3dvcmsvY2xhdWRlLWNvZGUtdmlld2VyL2NsYXVkZS1jb2RlLXZpZXdlci9tb2NrLWdsb2JhbC1jbGF1ZGUtZGlyL3Byb2plY3RzL3NhbXBsZS1wcm9qZWN0/session_sessionId_fe5e1c67-53e7-4862-81ae-d0e013e3270b/right-panel-file-diffs-opened/desktop-dark.png) |
197
+ | Settings | ![](./e2e/snapshots/projects/L2hvbWUvcnVubmVyL3dvcmsvY2xhdWRlLWNvZGUtdmlld2VyL2NsYXVkZS1jb2RlLXZpZXdlci9tb2NrLWdsb2JhbC1jbGF1ZGUtZGlyL3Byb2plY3RzL3NhbXBsZS1wcm9qZWN0/session_sessionId_fe5e1c67-53e7-4862-81ae-d0e013e3270b/settings-tab/desktop-dark.png) |
198
+ | Start New Chat | ![](./e2e/snapshots/projects/L2hvbWUvcnVubmVyL3dvcmsvY2xhdWRlLWNvZGUtdmlld2VyL2NsYXVkZS1jb2RlLXZpZXdlci9tb2NrLWdsb2JhbC1jbGF1ZGUtZGlyL3Byb2plY3RzL3NhbXBsZS1wcm9qZWN0/session_sessionId_fe5e1c67-53e7-4862-81ae-d0e013e3270b/start-new-chat/desktop-dark.png) |
199
+ | Projects List | ![](./e2e/snapshots/projects/desktop-dark.png) |
200
+ | New Project Modal | ![](./e2e/snapshots/projects/new-project-modal/desktop-dark.png) |
201
+ | CommandCompletion | ![](./docs/assets/command_completion.png) |
202
+ | FileCompletion | ![](./docs/assets/file_completion.png) |
203
+ | Diff Viewer | ![](./docs/assets/git_diff.png) |
204
+
205
+ Note: Additional UI screenshots are available in [/e2e/snapshots/](./e2e/snapshots/)
206
+
207
+ ## Data Source
208
+
209
+ The application reads Claude Code conversation logs from:
210
+
211
+ - **Location**: `~/.claude/projects/<project>/<session-id>.jsonl`
212
+ - **Format**: JSONL files containing conversation entries
213
+ - **Auto-detection**: Automatically discovers new projects and sessions
214
+
223
215
  ## Internationalization (i18n)
224
216
 
225
217
  Claude Code Viewer currently supports **English**, **Japanese**, and **Simplified Chinese (简体中文)**. Adding new languages is straightforward—simply add a new `messages.json` file for your locale (see [src/i18n/locales/](./src/i18n/locales/) for examples).