@kimuson/claude-code-viewer 0.4.14 → 0.5.0

package/README.md

@@ -4,9 +4,11 @@
 [![CI](https://github.com/d-kimuson/claude-code-viewer/actions/workflows/ci.yml/badge.svg)](https://github.com/d-kimuson/claude-code-viewer/actions/workflows/ci.yml)
 [![GitHub Release](https://img.shields.io/github/v/release/d-kimuson/claude-code-viewer)](https://github.com/d-kimuson/claude-code-viewer/releases)
 
+<img height="auto" width="50%" alt="ccv-logo" src="https://github.com/user-attachments/assets/0e092b2b-6acd-4380-b924-eed7a28acd69" />
+
 A full-featured web-based Claude Code client that provides complete interactive functionality for managing Claude Code projects. Start new conversations, resume existing sessions, monitor running tasks in real-time, and browse your conversation history—all through a modern web interface.
 
-![demo](./docs/assets/claude-code-viewer-demo-min.gif)
+https://github.com/user-attachments/assets/090d4806-163f-4bac-972a-002c7433145e
 
 ## Introduction
 
@@ -32,14 +34,14 @@ Claude Code Viewer is a web-based Claude Code client focused on **comprehensive
 | 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 |
 | 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 |
 | System Information | Monitor Claude Code and Claude Code Viewer versions, feature compatibility, and system status |
-| Multi-language Support | Full internationalization support with English and Japanese language options |
+| Multi-language Support | Full internationalization support with English, Japanese, and Simplified Chinese language options |
 
 ## Screenshots
 
 | Feature | Capture |
 | --- | --- |
-| BasicChat (Desktop) | ![](./e2e/snapshots/projects/L2hvbWUvcnVubmVyL3dvcmsvY2xhdWRlLWNvZGUtdmlld2VyL2NsYXVkZS1jb2RlLXZpZXdlci9tb2NrLWdsb2JhbC1jbGF1ZGUtZGlyL3Byb2plY3RzL3NhbXBsZS1wcm9qZWN0/sessions/fe5e1c67-53e7-4862-81ae-d0e013e3270b/desktop-dark.png) |
-| BasicChat (Mobile) | ![](./e2e/snapshots/projects/L2hvbWUvcnVubmVyL3dvcmsvY2xhdWRlLWNvZGUtdmlld2VyL2NsYXVkZS1jb2RlLXZpZXdlci9tb2NrLWdsb2JhbC1jbGF1ZGUtZGlyL3Byb2plY3RzL3NhbXBsZS1wcm9qZWN0/sessions/fe5e1c67-53e7-4862-81ae-d0e013e3270b/mobile-dark.png) |
+| BasicChat (Desktop) | ![](./e2e/snapshots/projects/L2hvbWUvcnVubmVyL3dvcmsvY2xhdWRlLWNvZGUtdmlld2VyL2NsYXVkZS1jb2RlLXZpZXdlci9tb2NrLWdsb2JhbC1jbGF1ZGUtZGlyL3Byb2plY3RzL3NhbXBsZS1wcm9qZWN0/session_sessionId_fe5e1c67-53e7-4862-81ae-d0e013e3270b/desktop-dark.png) |
+| BasicChat (Mobile) | ![](./e2e/snapshots/projects/L2hvbWUvcnVubmVyL3dvcmsvY2xhdWRlLWNvZGUtdmlld2VyL2NsYXVkZS1jb2RlLXZpZXdlci9tb2NrLWdsb2JhbC1jbGF1ZGUtZGlyL3Byb2plY3RzL3NhbXBsZS1wcm9qZWN0/session_sessionId_fe5e1c67-53e7-4862-81ae-d0e013e3270b/mobile-dark.png) |
 | CommandCompletion | ![](./docs/assets/command_completion.png) |
 | FileCompletion | ![](./docs/assets/file_completion.png) |
 | Diff Viewer | ![](./docs/assets/git_diff.png) |
@@ -53,17 +55,30 @@ Note: Additional UI screenshots are available in [/e2e/snapshots/](./e2e/snapsho
 Run directly from npm without installation:
 
 ```bash
-PORT=3400 npx @kimuson/claude-code-viewer@latest
+npx @kimuson/claude-code-viewer@latest --port 3400
 ```
 
 Alternatively, install globally:
 
 ```bash
 npm install -g @kimuson/claude-code-viewer
-claude-code-viewer
+claude-code-viewer --port 3400
 ```
 
-The server will start on port 3400 (or your specified PORT). Open `http://localhost:3400` in your browser to access the interface.
+The server will start on port 3400 (or the default port 3000). Open `http://localhost:3400` in your browser to access the interface.
+
+**Available Options:**
+
+```bash
+claude-code-viewer [options]
+
+Options:
+  -p, --port <port>                Port to listen on (default: 3000)
+  -h, --hostname <hostname>        Hostname to listen on (default: localhost)
+  -P, --password <password>        Password for authentication
+  -e, --executable <executable>    Path to Claude Code executable
+  --claude-dir <claude-dir>        Path to Claude directory
+```
 
 ### Docker Deployment
 
@@ -77,7 +92,8 @@ Run the container directly:
 
 ```bash
 docker run --rm -p 3400:3400 \
-  -e CLAUDE_CODE_VIEWER_AUTH_PASSWORD=your-password \
+  -e PORT=3400 \
+  -e CCV_PASSWORD=your-password \
   -e ANTHROPIC_BASE_URL=... \
   -e ANTHROPIC_API_KEY=... \
   -e ANTHROPIC_AUTH_TOKEN=... \
@@ -124,15 +140,22 @@ The application reads Claude Code conversation logs from:
 
 ## Configuration
 
-### Environment Variables
+### Command-Line Options and Environment Variables
 
-Claude Code Viewer reads several reserved environment variables. All values are optional and only need to be set if you want to override the defaults.
+Claude Code Viewer can be configured using command-line options or environment variables. Command-line options take precedence over environment variables.
 
-| Key | Description |
-| --- | --- |
-| CLAUDE_CODE_VIEWER_CC_EXECUTABLE_PATH | Path to Claude Code installation. If not set, uses system PATH installation, or falls back to bundled version from dependencies |
-| CLAUDE_CODE_VIEWER_AUTH_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 |
-| PORT | Port number for Claude Code Viewer to run on |
+| Command-Line Option | Environment Variable | Description | Default |
+| --- | --- | --- | --- |
+| `-p, --port <port>` | `PORT` | Port number for Claude Code Viewer to run on | `3000` |
+| `-h, --hostname <hostname>` | `HOSTNAME` | Hostname to listen on for remote access | `localhost` |
+| `-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) |
+| `-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) |
+| `--claude-dir <claude-dir>` | `CCV_GLOBAL_CLAUDE_DIR` | Path to Claude directory where session logs are stored | `~/.claude` |
+
+**Breaking Change**: Environment variable names have been changed. If you're using environment variables, update them as follows:
+- `CLAUDE_CODE_VIEWER_AUTH_PASSWORD` → `CCV_PASSWORD`
+- `CLAUDE_CODE_VIEWER_CC_EXECUTABLE_PATH` → `CCV_CC_EXECUTABLE_PATH`
+- New environment variable added: `CCV_GLOBAL_CLAUDE_DIR` (previously the Claude directory path was hardcoded to `~/.claude`)
 
 ### User Settings
 
@@ -146,13 +169,13 @@ Settings can be configured from the sidebar in Claude Code Viewer.
 | Permission Mode | Ask permission | Controls the approval logic when Claude Code requests tool invocations. By default, users approve requests through the UI. This feature requires Claude Code v1.0.82 or later; earlier versions automatically approve regardless of this setting. |
 | Theme | System | Toggles between Dark Mode and Light Mode. Default follows system settings. |
 | Notifications | None | Enables sound notifications when running session processes complete. Choose from multiple notification sounds with test playback functionality. |
-| Language | System | Interface language selection. Supports English and Japanese with automatic system detection. |
+| Language | System | Interface language selection. Supports English, Japanese, and Simplified Chinese with automatic system detection. |
 
 ## Internationalization (i18n)
 
-Claude Code Viewer currently supports **English** and **Japanese**. Adding new languages is straightforward—simply add a new `messages.json` file for your locale (see [src/i18n/locales/](./src/i18n/locales/) for examples).
+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).
 
-However, we haven't added other languages yet because we're uncertain about demand. **If you'd like support for your language, please open an issue**—we'll add it quickly!
+If you'd like support for your language, please open an issue—we'll add it quickly!
 
 ## Alternatives & Differentiation
 
@@ -199,7 +222,7 @@ Claude Code Viewer is designed with remote hosting in mind. To support remote de
 - **Real-time Notifications**: Audio notifications for task completion to maintain workflow awareness
 - **System Monitoring**: Monitor Claude Code compatibility and feature availability across environments
 
-The application features a separated client-server architecture that enables remote hosting. **Basic password authentication is available** via the `CLAUDE_CODE_VIEWER_AUTH_PASSWORD` environment variable. When set, users must authenticate with the configured password before accessing the application. However, this is a simple single-password authentication mechanism without advanced features like multi-user support, role-based access control, or OAuth integration. If you require more sophisticated authentication, carefully evaluate your security requirements and implement appropriate access controls at the infrastructure level (e.g., reverse proxy with OAuth, VPN, IP whitelisting).
+The application features a separated client-server architecture that enables remote hosting. **Basic password authentication is available** via the `--password` command-line option or `CCV_PASSWORD` environment variable. When set, users must authenticate with the configured password before accessing the application. However, this is a simple single-password authentication mechanism without advanced features like multi-user support, role-based access control, or OAuth integration. If you require more sophisticated authentication, carefully evaluate your security requirements and implement appropriate access controls at the infrastructure level (e.g., reverse proxy with OAuth, VPN, IP whitelisting).
 
 ## License