@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
|
[](https://www.npmjs.com/package/@cookielab.io/klovi)
|
|
6
6
|
[](LICENSE.md)
|
|
7
7
|
|
|
8
|
-
A local web app for browsing and presenting
|
|
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
|

|
|
11
11
|

|
|
12
12
|
|
|
13
13
|
## Why Klovi?
|
|
14
14
|
|
|
15
|
-
Claude Code
|
|
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
|
|
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
|
|
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
|
|
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) -
|
|
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
|
}
|