@cookielab.io/klovi 1.0.0 → 2.0.0

package/README.md

@@ -5,16 +5,16 @@
 [![npm downloads](https://img.shields.io/npm/dm/@cookielab.io/klovi)](https://www.npmjs.com/package/@cookielab.io/klovi)
 [![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](LICENSE.md)
 
-A local web app for browsing and presenting Claude Code session history. Built for showing AI coding workflows at meetups and conferences.
+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.
 
 ![Klovi homepage screenshot](docs/screenshot-homepage.png)
 ![Klovi homepage screenshot](docs/screenshot-session.png)
 
 ## Why Klovi?
 
-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.
+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.
 
-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.
+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.
 
 ## Quick Start
 
@@ -52,8 +52,14 @@ bun run dev
 
 ## Features
 
+**Multi-Tool Support**
+- Claude Code, Codex CLI, and OpenCode sessions in one unified viewer
+- Plugin-based architecture — auto-discovers tools from their default data directories
+- Projects from different tools sharing the same working directory are merged
+- Tool name badge shown on each session in the sidebar
+
 **Session Browsing**
-- Auto-discovers all projects from `~/.claude/projects/`
+- Auto-discovers all projects across registered tools
 - Dashboard statistics: project/session/tool counts, token usage breakdown, model distribution
 - Filterable project list with session counts and last activity
 - Hide/unhide projects to declutter the list
@@ -61,7 +67,7 @@ bun run dev
 - Plan/implementation session detection with colored badges and cross-session navigation links
 - Full conversation rendering with user/assistant/system messages
 - Sub-agent browsing: navigate into Task tool sub-agent sessions
-- Copy resume command (`claude --resume <id>`) from session header
+- Copy resume command from session header (tool-specific: `claude --resume <id>`, `codex resume <id>`)
 
 **Message Rendering**
 - Markdown with GFM support (tables, strikethrough, task lists)
@@ -70,7 +76,7 @@ bun run dev
 - Collapsible thinking/reasoning blocks
 - Token usage display (input/output/cache tokens per assistant message)
 - Timestamps on messages (relative time format)
-- Tool result images rendered as clickable thumbnails
+- Tool result images rendered as clickable thumbnails with fullscreen lightbox
 - File references (`@filepath.ext`) highlighted as green badges
 - Image attachments displayed as media-type badges
 - Slash commands shown with green `> /command` badge
@@ -89,7 +95,9 @@ bun run dev
 
 **CLI**
 - `--port <number>` — specify server port (default: 3583)
-- `--claude-code-dir <path>` — path to Claude Code data directory
+- `--claude-code-dir <path>` — path to Claude Code data directory (default: `~/.claude`)
+- `--codex-cli-dir <path>` — path to Codex CLI data directory (default: `~/.codex`)
+- `--opencode-dir <path>` — path to OpenCode data directory (default: `~/.local/share/opencode`)
 - `--accept-risks` — skip the startup security warning
 - `--help` / `-h` — show usage information
 
@@ -136,7 +144,7 @@ bun run dev
 See [docs/](docs/) for detailed documentation:
 
 - [Architecture](docs/architecture.md) - project structure, data flow, component hierarchy
-- [JSONL Format](docs/jsonl-format.md) - Claude Code session file format specification
+- [JSONL Format](docs/jsonl-format.md) - session file format specification
 - [Components](docs/components.md) - frontend component guide and patterns
 - [Testing](docs/testing.md) - test setup, patterns, and conventions
 - [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
 
 ## Trademark Notice
 
-"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.
+"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.

package/dist/public/{index-n88qe90q.css → index-cq4jk40s.css}

@@ -648,6 +648,21 @@ code {
   text-decoration: underline;
 }
 
+.session-branch-bar {
+  font-size: .75rem;
+  font-family: var(--font-mono);
+  color: var(--text-muted);
+  border-bottom: 1px solid var(--border-light);
+  width: 100%;
+  max-width: 900px;
+  margin: 0 auto;
+  padding: 6px 20px;
+}
+
+.session-branch-icon {
+  font-size: .8rem;
+}
+
 .message-list {
   width: 100%;
   max-width: 900px;
@@ -1369,6 +1384,37 @@ code {
   border-color: var(--accent);
 }
 
+.lightbox-overlay {
+  position: fixed;
+  z-index: 9999;
+  display: flex;
+  cursor: pointer;
+  background: none;
+  justify-content: center;
+  align-items:  center;
+  transition: background .2s;
+  inset: 0;
+}
+
+.lightbox-overlay.lightbox-visible {
+  background: #000000d9;
+}
+
+.lightbox-image {
+  object-fit: contain;
+  border-radius: var(--radius-md);
+  opacity: 0;
+  max-width: 90vw;
+  max-height: 90vh;
+  transition: opacity .2s, transform .2s;
+  transform: scale(.95);
+}
+
+.lightbox-visible .lightbox-image {
+  opacity: 1;
+  transform: scale(1);
+}
+
 .tool-mcp-server {
   display: inline-block;
   background: var(--bg-tertiary);
@@ -1453,6 +1499,19 @@ code {
   color: var(--impl-color);
 }
 
+.plugin-badge {
+  display: inline-block;
+  background: var(--bg-tertiary);
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: .03em;
+  vertical-align: middle;
+  padding: 1px 6px;
+  font-size: .65rem;
+  font-weight: 600;
+  line-height: 1.4;
+}
+
 .list-item.plan {
   border-left: 3px solid var(--plan-color);
 }