@kimuson/claude-code-viewer 0.6.0 → 0.6.1-beta.2
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.
- package/README.md +78 -59
- package/dist/main.js +5241 -5070
- package/dist/main.js.map +4 -4
- package/dist/migrations/20260401113328_cute_stryfe/migration.sql +34 -0
- package/dist/migrations/20260401113328_cute_stryfe/snapshot.json +315 -0
- package/dist/static/apple-touch-icon.png +0 -0
- package/dist/static/assets/AuthProvider-BKc7q7ka.js +22 -0
- package/dist/static/assets/ProtectedRoute-DvQQEf13.js +1 -0
- package/dist/static/assets/card-DGrqtTaC.js +1 -0
- package/dist/static/assets/createLucideIcon-BL_meogc.js +1 -0
- package/dist/static/assets/dist-CG2L4mx5.js +1 -0
- package/dist/static/assets/dist-DiGJ7VFi.js +84 -0
- package/dist/static/assets/eye-SsvAY8oF.js +1 -0
- package/dist/static/assets/index-CxG0FuBy.css +2 -0
- package/dist/static/assets/index-Dmx9Pg1o.js +20 -0
- package/dist/static/assets/input-B_6IT1CP.js +1 -0
- package/dist/static/assets/label-Cw6sZ5kQ.js +1 -0
- package/dist/static/assets/login-pLhQHKNI.js +1 -0
- package/dist/static/assets/markdown-parser-vendor-D9j1a-bm.js +29 -0
- package/dist/static/assets/messages-C8LOJGiE.js +1 -0
- package/dist/static/assets/messages-DdODLCjv.js +1 -0
- package/dist/static/assets/messages-V7iLbj1C.js +1 -0
- package/dist/static/assets/projects-DdfUtEAX.js +1 -0
- package/dist/static/assets/refractor-vendor-B-OUwWR7.js +4 -0
- package/dist/static/assets/rolldown-runtime-Dw2cE7zH.js +1 -0
- package/dist/static/assets/routes-9aZugTrf.js +1 -0
- package/dist/static/assets/session-B8VBnvYB.js +8 -0
- package/dist/static/assets/session-BZFmVWep.js +1 -0
- package/dist/static/assets/syntax-highlighter-vendor-CwGXx8v4.js +6 -0
- package/dist/static/assets/workbox-window.prod.es5-DaBTyiAs.js +2 -0
- package/dist/static/assets/xterm-vendor-BrP-ENHg.css +1 -0
- package/dist/static/assets/xterm-vendor-DRG2K165.js +36 -0
- package/dist/static/favicon.ico +0 -0
- package/dist/static/icon-192x192.png +0 -0
- package/dist/static/icon-512x512.png +0 -0
- package/dist/static/icon-maskable-192x192.png +0 -0
- package/dist/static/icon-maskable-512x512.png +0 -0
- package/dist/static/index.html +20 -9
- package/dist/static/manifest.webmanifest +1 -0
- package/dist/static/sw.js +1 -0
- package/package.json +79 -66
- package/dist/static/assets/ProtectedRoute-KMCDjFpr.js +0 -1
- package/dist/static/assets/eye-DsqhY3YQ.js +0 -1
- package/dist/static/assets/index-BU5VCG8M.js +0 -1
- package/dist/static/assets/index-BUy-hZ_L.js +0 -1
- package/dist/static/assets/index-CTq99aOX.css +0 -1
- package/dist/static/assets/index-DhqtKAUx.js +0 -101
- package/dist/static/assets/label-Bx75JYJV.js +0 -1
- package/dist/static/assets/login-CIKB0Oew.js +0 -1
- package/dist/static/assets/messages-D_2afeYc.js +0 -1
- package/dist/static/assets/messages-lrmcxVGh.js +0 -1
- package/dist/static/assets/messages-m0e3n_U5.js +0 -1
- package/dist/static/assets/session-D50bOHyT.js +0 -58
- package/dist/static/assets/session-DDGTF8rc.css +0 -1
- package/dist/static/assets/session-WhX_gGJt.js +0 -1
package/README.md
CHANGED
|
@@ -18,27 +18,38 @@ Claude Code Viewer is a web-based Claude Code client focused on **comprehensive
|
|
|
18
18
|
|
|
19
19
|
## Features
|
|
20
20
|
|
|
21
|
-
| Feature
|
|
22
|
-
|
|
|
23
|
-
| View Chat Logs
|
|
24
|
-
| Search Conversations
|
|
25
|
-
|
|
|
26
|
-
|
|
|
27
|
-
|
|
|
28
|
-
|
|
|
29
|
-
|
|
|
30
|
-
|
|
|
31
|
-
|
|
|
32
|
-
|
|
|
33
|
-
|
|
|
34
|
-
|
|
|
35
|
-
|
|
|
36
|
-
|
|
|
37
|
-
|
|
|
38
|
-
|
|
|
39
|
-
|
|
|
40
|
-
|
|
|
41
|
-
|
|
|
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 |
|
|
42
53
|
|
|
43
54
|
## Installation & Usage
|
|
44
55
|
|
|
@@ -67,6 +78,7 @@ claude-code-viewer [options]
|
|
|
67
78
|
Options:
|
|
68
79
|
-p, --port <port> Port to listen on (default: 3000)
|
|
69
80
|
-h, --hostname <hostname> Hostname to listen on (default: localhost)
|
|
81
|
+
-v, --verbose Enable verbose debug logging
|
|
70
82
|
-P, --password <password> Password for authentication
|
|
71
83
|
-e, --executable <executable> Path to Claude Code executable
|
|
72
84
|
--claude-dir <claude-dir> Path to Claude directory
|
|
@@ -110,25 +122,24 @@ docker compose up --build
|
|
|
110
122
|
|
|
111
123
|
## Screenshots
|
|
112
124
|
|
|
113
|
-
| Feature
|
|
114
|
-
|
|
|
115
|
-
| BasicChat (Desktop)
|
|
116
|
-
| BasicChat (Mobile)
|
|
117
|
-
| Browser Preview (Right Panel) | 
|
|
118
|
-
| Git Tab (Right Panel)
|
|
119
|
-
| Review Panel (Right Panel)
|
|
120
|
-
| File Diffs (Right Panel)
|
|
121
|
-
| Settings
|
|
122
|
-
| Start New Chat
|
|
123
|
-
| Projects List
|
|
124
|
-
| New Project Modal
|
|
125
|
-
| CommandCompletion
|
|
126
|
-
| FileCompletion
|
|
127
|
-
| Diff Viewer
|
|
125
|
+
| Feature | Capture |
|
|
126
|
+
| ----------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
127
|
+
| BasicChat (Desktop) |  |
|
|
128
|
+
| BasicChat (Mobile) |  |
|
|
129
|
+
| Browser Preview (Right Panel) |  |
|
|
130
|
+
| Git Tab (Right Panel) |  |
|
|
131
|
+
| Review Panel (Right Panel) |  |
|
|
132
|
+
| File Diffs (Right Panel) |  |
|
|
133
|
+
| Settings |  |
|
|
134
|
+
| Start New Chat |  |
|
|
135
|
+
| Projects List |  |
|
|
136
|
+
| New Project Modal |  |
|
|
137
|
+
| CommandCompletion |  |
|
|
138
|
+
| FileCompletion |  |
|
|
139
|
+
| Diff Viewer |  |
|
|
128
140
|
|
|
129
141
|
Note: Additional UI screenshots are available in [/e2e/snapshots/](./e2e/snapshots/)
|
|
130
142
|
|
|
131
|
-
|
|
132
143
|
## Data Source
|
|
133
144
|
|
|
134
145
|
The application reads Claude Code conversation logs from:
|
|
@@ -148,6 +159,8 @@ The application reads Claude Code conversation logs from:
|
|
|
148
159
|
|
|
149
160
|
- **Minimum Version**: Claude Code v1.0.50 or later
|
|
150
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)
|
|
151
164
|
|
|
152
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.
|
|
153
166
|
|
|
@@ -161,19 +174,21 @@ The application reads Claude Code conversation logs from:
|
|
|
161
174
|
|
|
162
175
|
Claude Code Viewer can be configured using command-line options or environment variables. Command-line options take precedence over environment variables.
|
|
163
176
|
|
|
164
|
-
| Command-Line Option
|
|
165
|
-
|
|
|
166
|
-
| `-p, --port <port>`
|
|
167
|
-
| `-h, --hostname <hostname>`
|
|
168
|
-
| `-
|
|
169
|
-
| `-
|
|
170
|
-
|
|
|
171
|
-
| `--
|
|
172
|
-
| `--terminal-
|
|
173
|
-
| `--terminal-
|
|
174
|
-
| `--
|
|
177
|
+
| Command-Line Option | Environment Variable | Description | Default |
|
|
178
|
+
| ------------------------------- | --------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
|
|
179
|
+
| `-p, --port <port>` | `PORT` | Port number for Claude Code Viewer to run on | `3000` |
|
|
180
|
+
| `-h, --hostname <hostname>` | `HOSTNAME` | Hostname to listen on for remote access | `localhost` |
|
|
181
|
+
| `-v, --verbose` | — | Enable verbose debug logging. Outputs detailed server-side logs to stderr for troubleshooting | (unset) |
|
|
182
|
+
| `-P, --password <password>` | `CCV_PASSWORD` | Password for authentication. When set, enables password-based authentication to protect access to Claude Code Viewer. All `/api` routes (except login, logout, check, config, and version endpoints) require authentication. If not set, authentication is disabled and the application is publicly accessible | (none) |
|
|
183
|
+
| `-e, --executable <executable>` | `CCV_CC_EXECUTABLE_PATH` | Path to Claude Code installation. If not set, uses system PATH installation, or falls back to bundled version from dependencies | (auto-detect) |
|
|
184
|
+
| `--claude-dir <claude-dir>` | `CCV_GLOBAL_CLAUDE_DIR` | Path to Claude directory where session logs are stored | `~/.claude` |
|
|
185
|
+
| `--terminal-disabled` | `CCV_TERMINAL_DISABLED` | Disable the in-app terminal panel when set to `1`/`true` (env) or when the flag is present (CLI) | (unset) |
|
|
186
|
+
| `--terminal-shell <path>` | `CCV_TERMINAL_SHELL` | Shell executable for terminal sessions (e.g. `/bin/zsh`) | (auto-detect) |
|
|
187
|
+
| `--terminal-unrestricted` | `CCV_TERMINAL_UNRESTRICTED` | When set to `1` (env) or when the flag is present (CLI), disables the restricted shell flags for bash | (unset) |
|
|
188
|
+
| `--api-only` | `CCV_API_ONLY` | Run in API-only mode. Disables Web UI, terminal WebSocket, and non-essential endpoints. Only core API routes (`/api/version`, `/api/config`, `/api/projects`, `/api/claude-code`, `/api/search`, `/api/sse`) are exposed. Useful for integrating with external tools like n8n | (unset) |
|
|
175
189
|
|
|
176
190
|
**Breaking Change**: Environment variable names have been changed. If you're using environment variables, update them as follows:
|
|
191
|
+
|
|
177
192
|
- `CLAUDE_CODE_VIEWER_AUTH_PASSWORD` → `CCV_PASSWORD`
|
|
178
193
|
- `CLAUDE_CODE_VIEWER_CC_EXECUTABLE_PATH` → `CCV_CC_EXECUTABLE_PATH`
|
|
179
194
|
- New environment variable added: `CCV_GLOBAL_CLAUDE_DIR` (previously the Claude directory path was hardcoded to `~/.claude`)
|
|
@@ -191,17 +206,19 @@ If no password is configured, API authentication is disabled.
|
|
|
191
206
|
|
|
192
207
|
Settings can be configured from the sidebar in Claude Code Viewer.
|
|
193
208
|
|
|
194
|
-
| Setting
|
|
195
|
-
|
|
|
196
|
-
| Hide sessions without user messages
|
|
197
|
-
| Unify sessions with same title
|
|
198
|
-
| Auto-schedule Continue on Rate Limit | false
|
|
199
|
-
| Enter Key Behavior
|
|
200
|
-
| Search Hotkey
|
|
201
|
-
|
|
|
202
|
-
|
|
|
203
|
-
|
|
|
204
|
-
|
|
|
209
|
+
| Setting | Default | Description |
|
|
210
|
+
| ------------------------------------ | ---------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
211
|
+
| Hide sessions without user messages | true | Claude Code creates logs for operations like `/compact` that aren't tied to actual tasks, which can create noise. When enabled, sessions without user messages are hidden. |
|
|
212
|
+
| Unify sessions with same title | false | When resuming, Claude Code creates a new session with regenerated conversation logs. When enabled, only the latest session with the same title is displayed. |
|
|
213
|
+
| Auto-schedule Continue on Rate Limit | false | Automatically schedules a continue message when Claude hits rate limits. When enabled, the system detects rate limit errors in live sessions and creates a scheduled job to send "continue" one minute after the limit reset time. This prevents manual intervention for rate limit recovery. |
|
|
214
|
+
| Enter Key Behavior | Shift+Enter | Specifies which key combination sends messages. Options include Enter, Shift+Enter, and Command+Enter. |
|
|
215
|
+
| Search Hotkey | Command+K | Select the hotkey to open the search dialog. Options include Ctrl+K and Command+K. |
|
|
216
|
+
| Find Hotkey | Command+F | Select the hotkey to open the in-page find bar. Options include Ctrl+F and Command+F. |
|
|
217
|
+
| Model Choices | default, haiku, sonnet, opus | Customize the list of model options shown in the Session Options Toolbar. Add any model identifier supported by Claude Code (e.g. `claude-opus-4-5`). |
|
|
218
|
+
| Permission Mode | Ask permission | Controls the approval logic when Claude Code requests tool invocations. Configured per project via the Session Options Toolbar above the chat input. Requires Claude Code v1.0.82 or later. |
|
|
219
|
+
| Theme | System | Toggles between Dark Mode and Light Mode. Default follows system settings. |
|
|
220
|
+
| Notifications | None | Enables sound notifications when running session processes complete. Choose from multiple notification sounds with test playback functionality. |
|
|
221
|
+
| Language | System | Interface language selection. Supports English, Japanese, and Simplified Chinese with automatic system detection. |
|
|
205
222
|
|
|
206
223
|
## Internationalization (i18n)
|
|
207
224
|
|
|
@@ -216,11 +233,13 @@ If you'd like support for your language, please open an issue—we'll add it qui
|
|
|
216
233
|
Anthropic provides [Claude Code on the Web](https://docs.claude.com/en/docs/claude-code/claude-code-on-the-web), which runs Claude Code sessions in Anthropic's cloud VMs. Each session clones your repository and executes predefined setup commands (e.g., `pnpm install`).
|
|
217
234
|
|
|
218
235
|
**When to use Claude Code on the Web**:
|
|
236
|
+
|
|
219
237
|
- Quick testing without local setup or self-hosting infrastructure
|
|
220
238
|
- Casual development from mobile devices or public computers
|
|
221
239
|
- Simple repository structures with single CLAUDE.md at the root
|
|
222
240
|
|
|
223
241
|
**When to use Claude Code Viewer**:
|
|
242
|
+
|
|
224
243
|
- Working with pre-configured local environments (databases, services, large dependencies)
|
|
225
244
|
- Monorepo projects with multiple CLAUDE.md files in different directories
|
|
226
245
|
- Development requiring significant computational resources or long-running processes
|