Klovi

A native desktop app for browsing and presenting AI coding session history. Supports Claude Code, Codex (CLI & app), and OpenCode. Built for showing AI coding workflows at meetups and conferences.

Why Klovi?

AI coding tools like Claude Code, Codex (CLI & app), and OpenCode store conversation history locally, but there's no unified way to browse, search, or present them. Klovi fills that gap: launch the app and get a native desktop 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 auto-discovers sessions from Claude Code (~/.claude/projects/), Codex CLI & app (~/.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

Download the latest release for your platform from the Releases page.

Or install via Homebrew:

brew install --cask cookielab/tap/klovi

Development

bun install
bun run dev

Monorepo Packages

Klovi is a Bun workspace monorepo with these key packages:

• @cookielab.io/klovi-plugin-core - shared plugin contracts + registry
• @cookielab.io/klovi-plugin-claude-code - Claude Code discovery/parsing
• @cookielab.io/klovi-plugin-codex - Codex discovery/parsing
• @cookielab.io/klovi-plugin-opencode - OpenCode discovery/parsing
• @cookielab.io/klovi-ui - reusable UI feature components
• @cookielab.io/klovi-design-system - design tokens and UI primitives

Features

Multi-Tool Support

• Claude Code, Codex (CLI & app), 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 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
• First-launch onboarding for plugin setup and security acknowledgement
• Settings screen for plugin enable/disable and custom data directories
• Sessions show first message, model, git branch, and timestamp
• 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 from session header (tool-specific: claude --resume <id>, codex resume <id>)

Message Rendering

• Markdown with GFM support (tables, strikethrough, task lists)
• Syntax-highlighted code blocks (language-aware, Prism)
• Collapsible tool calls with smart summaries (file paths for Read/Write/Edit, commands for Bash, patterns for Grep/Glob)
• 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 with fullscreen lightbox
• File references (@filepath.ext) highlighted as green badges
• Image attachments displayed as media-type badges
• Slash commands shown in a dedicated command row

Presentation Mode

• Step-through navigation: each conversation turn is a step, assistant turns have sub-steps (each text block is a step, consecutive non-text blocks like thinking and tool calls are grouped together)
• Keyboard controls: Arrow keys / Space to advance, Escape to exit, F for fullscreen
• Progress bar with step counter at the bottom
• Sidebar hidden, content full-width with larger font
• Fade-in animation for each revealed step

Theme & Display

• System/light/dark theme support (configurable in Settings and via View menu action)
• System theme auto-detection
• Font size control (Settings controls, keyboard +/-, and View menu actions) for projector readability
• Native application menu with keyboard shortcuts

Scripts

Script	Description
bun run dev	Start development mode with hot reload
bun run build	Build native desktop binary for production
bun test	Run all tests
bun run typecheck	TypeScript type checking (tsc --noEmit)
bun run lint	Lint with Biome
bun run format	Format with Biome
bun run check	Biome check (lint + format, no write)
bun run check:fix	Biome check + auto-fix
bun run storybook	Run design system Storybook

Tech Stack

• Electrobun - native desktop framework for Bun
• Bun - runtime, bundler, test runner
• React 19 + TypeScript (strict mode)
• Bun workspaces monorepo (packages/*)
• @cookielab.io/klovi-ui for feature UI modules
• @cookielab.io/klovi-design-system for primitives/tokens/globals
• react-markdown + remark-gfm
• react-syntax-highlighter (Prism themes: oneDark/oneLight)
• CSS custom properties + CSS modules (no CSS framework)
• Biome for linting and formatting
• happy-dom + @testing-library/react for tests

Documentation

See docs/ for detailed documentation:

• Architecture - project structure, data flow, component hierarchy
• JSONL Format - session file format specification
• Components - frontend component guide and patterns
• Testing - test setup, patterns, and conventions
• Content Types - catalog of all JSONL content types and rendering status

Contributing

Contributions are welcome! See CONTRIBUTING.md for development setup and guidelines.

Please note that this project follows a Code of Conduct.

Built With

This project was built with love using Claude Code.

Trademark Notice

"Claude" and "Claude Code" are trademarks of Anthropic, PBC. "OpenAI", "ChatGPT", and "Codex" are trademarks of OpenAI, Inc. "OpenCode" is a trademark of its respective owner. 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.