@kimuson/claude-code-viewer 0.6.1-beta.4 → 0.7.0
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 +80 -110
- package/dist/main.js +1 -1
- package/dist/main.js.map +1 -1
- package/dist/static/assets/ProtectedRoute-Clw5r4X-.js +1 -0
- package/dist/static/assets/index-26yPYMZp.css +2 -0
- package/dist/static/assets/{index-CxzFZpzV.js → index-BO-D9mWo.js} +2 -2
- package/dist/static/assets/projects-BVPr5gWf.js +1 -0
- package/dist/static/assets/session-BkAg5Fs5.js +1 -0
- package/dist/static/assets/session-D-iyWO70.js +8 -0
- package/dist/static/index.html +2 -2
- package/dist/static/sw.js +1 -1
- package/package.json +1 -1
- package/dist/static/assets/ProtectedRoute-DtqWc34B.js +0 -1
- package/dist/static/assets/index-DgQxQj-3.css +0 -2
- package/dist/static/assets/projects-DWwR_fHN.js +0 -1
- package/dist/static/assets/session-D5eScPGc.js +0 -8
- package/dist/static/assets/session-DK1CQBjg.js +0 -1
package/README.md
CHANGED
|
@@ -16,40 +16,11 @@ Claude Code Viewer is a web-based Claude Code client focused on **comprehensive
|
|
|
16
16
|
|
|
17
17
|
**Core Philosophy**: Zero data loss + Effective organization + Remote-friendly design
|
|
18
18
|
|
|
19
|
-
##
|
|
19
|
+
## System Requirements
|
|
20
20
|
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
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 |
|
|
21
|
+
- **Node.js**: Version 22.13.0 or later
|
|
22
|
+
- **Claude Code**: v1.0.125 or later
|
|
23
|
+
- **Operating Systems**: macOS and Linux (Windows is not supported)
|
|
53
24
|
|
|
54
25
|
## Installation & Usage
|
|
55
26
|
|
|
@@ -85,88 +56,20 @@ Options:
|
|
|
85
56
|
--api-only Run in API-only mode without Web UI
|
|
86
57
|
```
|
|
87
58
|
|
|
88
|
-
###
|
|
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
|
-
> ```
|
|
122
|
-
|
|
123
|
-
## Screenshots
|
|
124
|
-
|
|
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 |  |
|
|
140
|
-
|
|
141
|
-
Note: Additional UI screenshots are available in [/e2e/snapshots/](./e2e/snapshots/)
|
|
142
|
-
|
|
143
|
-
## Data Source
|
|
144
|
-
|
|
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)
|
|
59
|
+
### Remote Access via Tailscale (Mobile / PWA)
|
|
157
60
|
|
|
158
|
-
|
|
61
|
+
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:
|
|
159
62
|
|
|
160
|
-
|
|
161
|
-
|
|
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)
|
|
63
|
+
1. **Set up HTTPS on your Tailscale node** following the [Tailscale HTTPS certificates guide](https://tailscale.com/docs/how-to/set-up-https-certificates).
|
|
64
|
+
2. **Start Claude Code Viewer** bound to all interfaces with a password:
|
|
164
65
|
|
|
165
|
-
|
|
66
|
+
```bash
|
|
67
|
+
claude-code-viewer --hostname 0.0.0.0 --port 3400 --password your-secret
|
|
68
|
+
```
|
|
166
69
|
|
|
167
|
-
|
|
70
|
+
3. **Access from your phone** via the Tailscale HTTPS URL (e.g. `https://your-machine.ts.net:3400`).
|
|
168
71
|
|
|
169
|
-
|
|
72
|
+
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
73
|
|
|
171
74
|
## Configuration
|
|
172
75
|
|
|
@@ -220,6 +123,73 @@ Settings can be configured from the sidebar in Claude Code Viewer.
|
|
|
220
123
|
| Notifications | None | Enables sound notifications when running session processes complete. Choose from multiple notification sounds with test playback functionality. |
|
|
221
124
|
| Language | System | Interface language selection. Supports English, Japanese, and Simplified Chinese with automatic system detection. |
|
|
222
125
|
|
|
126
|
+
### Environment Variables
|
|
127
|
+
|
|
128
|
+
**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.
|
|
129
|
+
|
|
130
|
+
## Features
|
|
131
|
+
|
|
132
|
+
| Feature | Description |
|
|
133
|
+
| ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
134
|
+
| 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 |
|
|
135
|
+
| 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) |
|
|
136
|
+
| 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 |
|
|
137
|
+
| 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 |
|
|
138
|
+
| Resume Sessions | Resume conversations directly from existing session logs |
|
|
139
|
+
| 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) |
|
|
140
|
+
| 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 |
|
|
141
|
+
| 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 |
|
|
142
|
+
| 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 |
|
|
143
|
+
| 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 |
|
|
144
|
+
| 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 |
|
|
145
|
+
| Chat Draft Saving | Chat input drafts are automatically saved per project and session. Unsent text is restored when returning to the same conversation |
|
|
146
|
+
| 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) |
|
|
147
|
+
| 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 |
|
|
148
|
+
| 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 |
|
|
149
|
+
| Commit Changes | Execute Git commits directly from the web interface within the Git Diff Viewer |
|
|
150
|
+
| 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 |
|
|
151
|
+
| Branch Switcher | Switch local Git branches directly from the Git tab (with search and status indicators) |
|
|
152
|
+
| 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 |
|
|
153
|
+
| 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 |
|
|
154
|
+
| Todo Viewer | Extracts the latest `TodoWrite` items from sessions and displays them as inline collapsible checklists directly within the conversation |
|
|
155
|
+
| 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 |
|
|
156
|
+
| Copy Buttons | Every markdown message includes a copy button to copy the full text content to clipboard with a single click |
|
|
157
|
+
| Project Switcher | Quickly jump to any project via the combobox in the header without navigating back to the projects list |
|
|
158
|
+
| 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 |
|
|
159
|
+
| Terminal Panel | Bottom panel terminal over WebSocket for running shell commands without leaving the UI |
|
|
160
|
+
| 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 |
|
|
161
|
+
| 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 |
|
|
162
|
+
| System Information | Monitor Claude Code and Claude Code Viewer versions, feature compatibility, and system status |
|
|
163
|
+
| Multi-language Support | Full internationalization support with English, Japanese, and Simplified Chinese language options |
|
|
164
|
+
|
|
165
|
+
## Screenshots
|
|
166
|
+
|
|
167
|
+
| Feature | Capture |
|
|
168
|
+
| ----------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
169
|
+
| BasicChat (Desktop) |  |
|
|
170
|
+
| BasicChat (Mobile) |  |
|
|
171
|
+
| Browser Preview (Right Panel) |  |
|
|
172
|
+
| Git Tab (Right Panel) |  |
|
|
173
|
+
| Review Panel (Right Panel) |  |
|
|
174
|
+
| File Diffs (Right Panel) |  |
|
|
175
|
+
| Settings |  |
|
|
176
|
+
| Start New Chat |  |
|
|
177
|
+
| Projects List |  |
|
|
178
|
+
| New Project Modal |  |
|
|
179
|
+
| CommandCompletion |  |
|
|
180
|
+
| FileCompletion |  |
|
|
181
|
+
| Diff Viewer |  |
|
|
182
|
+
|
|
183
|
+
Note: Additional UI screenshots are available in [/e2e/snapshots/](./e2e/snapshots/)
|
|
184
|
+
|
|
185
|
+
## Data Source
|
|
186
|
+
|
|
187
|
+
The application reads Claude Code conversation logs from:
|
|
188
|
+
|
|
189
|
+
- **Location**: `~/.claude/projects/<project>/<session-id>.jsonl`
|
|
190
|
+
- **Format**: JSONL files containing conversation entries
|
|
191
|
+
- **Auto-detection**: Automatically discovers new projects and sessions
|
|
192
|
+
|
|
223
193
|
## Internationalization (i18n)
|
|
224
194
|
|
|
225
195
|
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).
|
package/dist/main.js
CHANGED
|
@@ -12,7 +12,7 @@ import { Effect as Effect71 } from "effect";
|
|
|
12
12
|
// package.json
|
|
13
13
|
var package_default = {
|
|
14
14
|
name: "@kimuson/claude-code-viewer",
|
|
15
|
-
version: "0.
|
|
15
|
+
version: "0.7.0",
|
|
16
16
|
description: "A full-featured web-based Claude Code client that provides complete interactive functionality for managing Claude Code projects.",
|
|
17
17
|
homepage: "https://github.com/d-kimuson/claude-code-viewer",
|
|
18
18
|
license: "MIT",
|