@cookielab.io/klovi 1.1.0 → 2.0.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 CHANGED
@@ -5,16 +5,16 @@
5
5
  [![npm downloads](https://img.shields.io/npm/dm/@cookielab.io/klovi)](https://www.npmjs.com/package/@cookielab.io/klovi)
6
6
  [![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](LICENSE.md)
7
7
 
8
- A local web app for browsing and presenting Claude Code session history. Built for showing AI coding workflows at meetups and conferences.
8
+ A local web app for browsing and presenting AI coding session history. Supports Claude Code, Codex CLI, and OpenCode. Built for showing AI coding workflows at meetups and conferences.
9
9
 
10
10
  ![Klovi homepage screenshot](docs/screenshot-homepage.png)
11
11
  ![Klovi homepage screenshot](docs/screenshot-session.png)
12
12
 
13
13
  ## Why Klovi?
14
14
 
15
- Claude Code stores every conversation as JSONL files in `~/.claude/projects/`, but there's no built-in way to browse, search, or present them. Klovi fills that gap: run a single command and get a local web UI to explore your full session history, review what Claude did across projects, and step through conversations in a presentation mode perfect for demos and talks.
15
+ AI coding tools like Claude Code, Codex CLI, and OpenCode store conversation history locally, but there's no unified way to browse, search, or present them. Klovi fills that gap: run a single command and get a local web UI to explore your full session history across all tools, review what AI assistants did across projects, and step through conversations in a presentation mode perfect for demos and talks.
16
16
 
17
- Klovi reads session data directly from `~/.claude/projects/` (JSONL files) and renders conversations with markdown, syntax highlighting, collapsible tool calls, and a step-through presentation mode.
17
+ Klovi auto-discovers sessions from Claude Code (`~/.claude/projects/`), Codex CLI (`~/.codex/sessions/`), and OpenCode (`~/.local/share/opencode/opencode.db`), then renders conversations with markdown, syntax highlighting, collapsible tool calls, and a step-through presentation mode. Projects from different tools that share the same working directory are merged automatically.
18
18
 
19
19
  ## Quick Start
20
20
 
@@ -52,8 +52,14 @@ bun run dev
52
52
 
53
53
  ## Features
54
54
 
55
+ **Multi-Tool Support**
56
+ - Claude Code, Codex CLI, and OpenCode sessions in one unified viewer
57
+ - Plugin-based architecture — auto-discovers tools from their default data directories
58
+ - Projects from different tools sharing the same working directory are merged
59
+ - Tool name badge shown on each session in the sidebar
60
+
55
61
  **Session Browsing**
56
- - Auto-discovers all projects from `~/.claude/projects/`
62
+ - Auto-discovers all projects across registered tools
57
63
  - Dashboard statistics: project/session/tool counts, token usage breakdown, model distribution
58
64
  - Filterable project list with session counts and last activity
59
65
  - Hide/unhide projects to declutter the list
@@ -61,7 +67,7 @@ bun run dev
61
67
  - Plan/implementation session detection with colored badges and cross-session navigation links
62
68
  - Full conversation rendering with user/assistant/system messages
63
69
  - Sub-agent browsing: navigate into Task tool sub-agent sessions
64
- - Copy resume command (`claude --resume <id>`) from session header
70
+ - Copy resume command from session header (tool-specific: `claude --resume <id>`, `codex resume <id>`)
65
71
 
66
72
  **Message Rendering**
67
73
  - Markdown with GFM support (tables, strikethrough, task lists)
@@ -89,7 +95,9 @@ bun run dev
89
95
 
90
96
  **CLI**
91
97
  - `--port <number>` — specify server port (default: 3583)
92
- - `--claude-code-dir <path>` — path to Claude Code data directory
98
+ - `--claude-code-dir <path>` — path to Claude Code data directory (default: `~/.claude`)
99
+ - `--codex-cli-dir <path>` — path to Codex CLI data directory (default: `~/.codex`)
100
+ - `--opencode-dir <path>` — path to OpenCode data directory (default: `~/.local/share/opencode`)
93
101
  - `--accept-risks` — skip the startup security warning
94
102
  - `--help` / `-h` — show usage information
95
103
 
@@ -136,7 +144,7 @@ bun run dev
136
144
  See [docs/](docs/) for detailed documentation:
137
145
 
138
146
  - [Architecture](docs/architecture.md) - project structure, data flow, component hierarchy
139
- - [JSONL Format](docs/jsonl-format.md) - Claude Code session file format specification
147
+ - [JSONL Format](docs/jsonl-format.md) - session file format specification
140
148
  - [Components](docs/components.md) - frontend component guide and patterns
141
149
  - [Testing](docs/testing.md) - test setup, patterns, and conventions
142
150
  - [Content Types](CONTENT_TYPES.md) - catalog of all JSONL content types and rendering status
@@ -153,4 +161,4 @@ This project was built with love using [Claude Code](https://claude.ai/claude-co
153
161
 
154
162
  ## Trademark Notice
155
163
 
156
- "Claude" and "Claude Code" are trademarks of Anthropic, PBC. This project is not affiliated with, endorsed by, or sponsored by Anthropic. All trademarks and registered trademarks are the property of their respective owners.
164
+ "Claude" and "Claude Code" are trademarks of Anthropic, PBC. "Codex" is a trademark of OpenAI. This project is not affiliated with, endorsed by, or sponsored by Anthropic, OpenAI, or any other AI tool vendor. All trademarks and registered trademarks are the property of their respective owners.
@@ -648,6 +648,21 @@ code {
648
648
  text-decoration: underline;
649
649
  }
650
650
 
651
+ .session-branch-bar {
652
+ font-size: .75rem;
653
+ font-family: var(--font-mono);
654
+ color: var(--text-muted);
655
+ border-bottom: 1px solid var(--border-light);
656
+ width: 100%;
657
+ max-width: 900px;
658
+ margin: 0 auto;
659
+ padding: 6px 20px;
660
+ }
661
+
662
+ .session-branch-icon {
663
+ font-size: .8rem;
664
+ }
665
+
651
666
  .message-list {
652
667
  width: 100%;
653
668
  max-width: 900px;
@@ -1484,6 +1499,19 @@ code {
1484
1499
  color: var(--impl-color);
1485
1500
  }
1486
1501
 
1502
+ .plugin-badge {
1503
+ display: inline-block;
1504
+ background: var(--bg-tertiary);
1505
+ color: var(--text-muted);
1506
+ text-transform: uppercase;
1507
+ letter-spacing: .03em;
1508
+ vertical-align: middle;
1509
+ padding: 1px 6px;
1510
+ font-size: .65rem;
1511
+ font-weight: 600;
1512
+ line-height: 1.4;
1513
+ }
1514
+
1487
1515
  .list-item.plan {
1488
1516
  border-left: 3px solid var(--plan-color);
1489
1517
  }