ClaudineA kanban board for managing Claude Code and OpenAI Codex conversations
Website • Installation • Features • Standalone • Configuration • Development • Contributing Claudine is a Visual Studio Code extension that gives you a kanban-style overview of all your Claude Code and OpenAI Codex conversations. It reads native JSONL session files, auto-detects status and category, and renders an interactive board directly in VS Code — or as a standalone web app in your browser.
FeaturesBoard & Cards
Task Cards
Smart Board (Cross-Project Overview)
Rate Limit Detection & Auto-Restart
Multi-Provider Support
Search
Conversation Actions
AI Features
Agent Integration
Data Portability
Notifications
Internationalization
Security
Prerequisites
InstallationFrom the VS Code Marketplace
From VSIXFrom sourceSee Development below. Standalone ModeClaudine can also run as a standalone web application outside VS Code. It starts a local server and opens the kanban board in your browser, monitoring all Claude Code and Codex projects on your machine. Quick StartThe board is served at CLI
|
| File | Purpose |
|---|---|
config.json |
User settings (image API, Claude Code path, UI toggles) |
global-state.json |
Board state (column positions, manual overrides) |
.secrets.json |
API keys (OpenAI, Stability AI) |
storage/ |
Persistent data |
Usage
After installation, Claudine appears as a panel tab (alongside Terminal, Problems, etc.) labeled Claudine.
A Getting Started walkthrough guides you through initial setup (also available via Help > Get Started).
Sidebar Controls
| Icon | Action |
|---|---|
| Search | Toggle full-text search |
| Filter | Filter by category (Bug, Feature, etc.) |
| Compact | Toggle compact/expanded card view |
| Expand | Expand or collapse all cards |
| Archive | Show/hide archived conversations |
| Summarize | Toggle AI summarization |
| Refresh | Refresh conversations |
| Zoom +/−/Reset | Board zoom controls |
| Settings | Open settings panel |
| About | About Claudine |
Toolbar location is configurable: sidebar (vertical strip, default) or title bar (VS Code panel header).
Card Interactions
- Click title — Opens the conversation in the Claude Code editor
- Drag handle (dots) — Drag to reorder or move between columns
- Chevron — Collapse/expand individual cards
- Description / Latest — Click to expand truncated text
- Git branch — Click to open Source Control view
- Respond input — Appears on cards needing input; type and press Enter to send
Status Detection
Claudine infers conversation status from message patterns:
| Status | Detection |
|---|---|
| To Do | No assistant response yet |
| Needs Input | AskUserQuestion tool, question patterns, text ending with "?", or recent errors |
| In Progress | Last message is from user, or assistant is using tools |
| In Review | Assistant indicates completion ("all done", "completed", etc.) |
| Done | Manually set via drag-and-drop (preserved until new activity) |
| Cancelled | Manually set via drag-and-drop |
Configuration
Open VS Code Settings (Ctrl+, / Cmd+,) and search for Claudine.
| Setting | Type | Default | Description |
|---|---|---|---|
claudine.claudeCodePath |
string |
~/.claude |
Path to the Claude Code data directory |
claudine.codexPath |
string |
~/.codex |
Path to the OpenAI Codex data directory |
claudine.imageGenerationApi |
string |
none |
API for task icons: openai, stability, or none |
claudine.enableSummarization |
boolean |
false |
Generate short summaries for card titles and descriptions |
claudine.toolbarLocation |
string |
sidebar |
Toolbar placement: sidebar or titlebar |
claudine.autoRestartAfterRateLimit |
boolean |
false |
Auto-send "continue" after rate limit resets |
claudine.showTaskIcon |
boolean |
true |
Show task icon on cards |
claudine.showTaskDescription |
boolean |
true |
Show description on cards |
claudine.showTaskLatest |
boolean |
true |
Show last message preview on cards |
claudine.showTaskGitBranch |
boolean |
true |
Show git branch badge on cards |
claudine.monitorWorktrees |
boolean |
true |
Also scan Claude project folders matching <workspace-name>--claude-worktrees-<worktree-name> for monitored workspaces |
claudine.monitoredWorkspace |
object |
{ mode: 'auto' } |
Monitor the current VS Code workspace, one manual path, or multiple manual paths |
API keys are stored securely via VS Code's SecretStorage and configured through the in-app settings panel.
Icon Generation
When imageGenerationApi is set to openai or stability, Claudine generates a small icon for each conversation card using the conversation's title and description as a prompt.
- OpenAI — Uses gpt-image-1 (requires an OpenAI API key)
- Stability — Uses Stability AI SDXL (requires a Stability API key)
- None — Shows deterministic SVG placeholders with category-colored backgrounds
Summarization
When enabled, Claudine uses the Claude Code CLI to generate concise titles and descriptions for conversation cards. Summaries are cached and applied non-blocking. Toggle between original and summarized text using the star button in the sidebar.
Commands
Open the Command Palette (Ctrl+Shift+P / Cmd+Shift+P) and type "Claudine":
| Command | Keybinding | Description |
|---|---|---|
| Open Kanban Board | Cmd+Shift+K |
Focus the Claudine board |
| Refresh Conversations | Cmd+Shift+R |
Re-scan JSONL files and update the board |
| Open Conversation... | Pick a conversation from a list and open it | |
| Search Conversations... | Cmd+Shift+F |
Search text across all JSONL files |
| Start New Conversation... | Cmd+Shift+N |
Enter a prompt to start a new Claude session |
| Move Conversation to Status... | Pick a conversation and change its column | |
| Show Conversations Needing Input | Cmd+Shift+I |
Quick filter for conversations waiting on you |
| Show In-Progress Conversations | Quick filter for currently running conversations | |
| Focus Active Claude Tab | Cmd+Shift+C |
Switch to the first open Claude Code editor |
| Close Empty Claude Tabs | Clean up restored/duplicate Claude editor tabs | |
| Archive Completed Conversations | Immediately archive all done/cancelled cards | |
| Toggle AI Summarization | Enable or disable AI-generated card summaries | |
| Regenerate All Icons | Clear and regenerate all conversation icons | |
| Export Board... | Save the board as CSV, JSON, or Trello format | |
| Import Board... | Load conversations from a Claudine JSON export | |
| Show Diagnostics | Display extension health info (paths, watcher, counts) | |
| Open Settings | Jump to Claudine settings in VS Code | |
| Setup Agent Integration | Scaffold CLAUDINE.AGENTS.md into workspace |
|
| Toggle Search | Show/hide the in-board search bar | |
| Toggle Filter | Show/hide the category filter bar | |
| Toggle Compact View | Switch between compact and full card layouts | |
| Toggle Expand/Collapse All | Expand or collapse all cards at once | |
| Toggle Archive | Show/hide the archived conversations column | |
| Zoom In | Cmd+= |
Increase board zoom level |
| Zoom Out | Cmd+- |
Decrease board zoom level |
| Zoom Reset | Cmd+0 |
Reset board zoom to 100% |
| Toggle Settings Panel | Open/close the in-board settings panel | |
| Toggle About | Open/close the About dialog |
Keybindings shown are macOS defaults. On Windows/Linux, replace Cmd with Ctrl.
Architecture
claudine/
├── src/ # Extension backend (Node.js)
│ ├── extension.ts # Activation, command registration, service wiring
│ ├── constants.ts # Named constants (thresholds, delays)
│ ├── providers/
│ │ ├── KanbanViewProvider.ts # Webview host, message routing, auto-archive
│ │ ├── TabManager.ts # Claude tab tracking, focus detection
│ │ ├── ClaudeCodeWatcher.ts # Claude Code file watcher, JSONL search
│ │ ├── ConversationParser.ts # Claude Code JSONL → Conversation parsing
│ │ ├── CodexWatcher.ts # OpenAI Codex file watcher
│ │ ├── CodexSessionParser.ts # Codex JSONL → Conversation parsing
│ │ ├── CompositeConversationProvider.ts # Multi-provider wrapper
│ │ ├── ClaudeCodeEditorCommands.ts # claude-vscode command bridge
│ │ └── IConversationProvider.ts # Provider interface
│ ├── services/
│ │ ├── StateManager.ts # In-memory state, merge logic, events
│ │ ├── StorageService.ts # Persistent storage (global + workspace)
│ │ ├── ImageGenerator.ts # Icon generation (OpenAI / Stability / SVG)
│ │ ├── SummaryService.ts # AI summarization via Claude CLI
│ │ ├── CategoryClassifier.ts # Rule-based category detection
│ │ ├── CommandProcessor.ts # Agent command file watcher
│ │ └── BoardExporter.ts # CSV / JSON / Trello export & import
│ ├── platform/
│ │ ├── IPlatformAdapter.ts # Platform abstraction interface
│ │ ├── VsCodeAdapter.ts # VS Code implementation
│ │ └── StandaloneAdapter.ts # Node.js/chokidar implementation
│ ├── types/
│ │ └── index.ts # Shared TypeScript interfaces
│ └── test/ # Unit tests (vitest, 279 tests)
├── webview/ # Frontend (Svelte + Vite)
│ └── src/
│ ├── App.svelte # Root component, toolbar, search, about
│ ├── components/
│ │ ├── KanbanBoard.svelte # Board layout, DnD, column resizing, drafts
│ │ ├── KanbanColumn.svelte # Column header, active counts
│ │ ├── TaskCard.svelte # Card rendering, timer, dots, inline prompt
│ │ ├── SmartBoard.svelte # Cross-project action overview
│ │ ├── ProjectPane.svelte # Collapsible per-project pane (standalone)
│ │ └── SettingsPanel.svelte# Settings UI
│ ├── stores/
│ │ └── conversations.ts # Svelte stores, derived search, zoom
│ └── lib/
│ └── vscode.ts # VS Code webview API bridge
├── standalone/ # Standalone server (Node.js)
│ ├── cli.ts # CLI entry point, arg parsing
│ ├── server.ts # HTTP + WebSocket server
│ └── StandaloneMessageHandler.ts # Message routing for standalone
├── resources/
│ ├── icons/ # Extension icons (PNG + SVG)
│ ├── walkthrough/ # Getting Started walkthrough steps
│ └── CLAUDINE.AGENTS.md # Template for agent integration
├── l10n/ # Runtime translation bundles
├── package.nls.json # English i18n strings
├── package.nls.{de,fr,es,it}.json # Translated i18n strings
└── package.json
Data Flow
~/.claude/projects/**/*.jsonl ~/.codex/sessions/**/*.jsonl
│ │
▼ ▼
ClaudeCodeWatcher CodexWatcher
│ │
▼ ▼
ConversationParser CodexSessionParser
│ │
└──────────┬───────────────────────┘
▼
CompositeConversationProvider
│
▼
StateManager (merge, persist)
│
▼
KanbanViewProvider (postMessage)
│
▼
Svelte Webview (render board)
The extension and webview communicate via postMessage. All message types are defined in src/types/index.ts.
Development
Prerequisites
Setup
git clone https://github.com/salam/claudine.git
cd claudine
npm install
cd webview && npm install && cd ..
Build
# Compile extension TypeScript
npm run compile
# Build webview (Svelte → static assets)
npm run build:webview
Watch Mode
# Terminal 1: Watch extension source
npm run watch
# Terminal 2: Watch webview source
npm run dev:webview
Test
npm test
279 tests across 20 test files (vitest).
Debug
- Open the project in VS Code
- Press
F5to launch the Extension Development Host - The Claudine panel appears in the bottom panel area
- Changes to the extension require restarting the debug session
- Changes to the webview require rebuilding (
npm run build:webview) and reloading the webview
Lint
npm run lint
Package
npx @vscode/vsce package
This produces a .vsix file you can install or distribute.
How It Works
Claudine reads Claude Code's native conversation files stored at ~/.claude/projects/<encoded-workspace-path>/*.jsonl. Each file is a newline-delimited JSON log of a single conversation session, containing user messages, assistant responses, tool calls, and metadata.
The ConversationParser extracts:
- Title — First user message (cleaned of markup tags)
- Description — First assistant response paragraph
- Last message — Most recent assistant text
- Status — Inferred from message patterns and tool usage
- Category — Classified by keyword analysis of title and content
- Agents — Detected from
Tasktool invocations (subagents) - Git branch — From entry metadata or message content
- Error state — From API errors or tool failures in the latest exchange
- Sidechain steps — From subagent tool calls (
isSidechain: true) - Last tool activity — Most recent tool call name and arguments
Parsing is incremental — on file changes, only newly appended bytes are read and parsed, with previous results cached in an LRU cache (200 entries max).
The StateManager merges parsed data with saved state, preserving manual overrides (like marking a conversation as "Done") until new activity is detected.
For OpenAI Codex, the CodexSessionParser reads sessions from the date-tree layout (~/.codex/sessions/YYYY/MM/DD/*.jsonl) and maps Codex event types to Claudine statuses.
Contributing
Contributions are welcome! See CONTRIBUTING.md for development setup, project structure, coding guidelines, and the pull request process.
For security issues, please see SECURITY.md for responsible disclosure.
Please note that this project follows a Code of Conduct.
License
Credits
Developed by @salam and contributors.