Kilo-Org_kilo/packages/kilo-vscode/docs/opencode-migration-plan.md

Feature Parity Plan — Kilo Code VS Code Extension (Rebuild)

Overview

This extension is a ground-up rebuild of the old Kilo Code extension using Kilo CLI as the backend. Rather than migrating the old extension's codebase, we started fresh with a Solid.js webview, a CLI server manager, and a message-based protocol between extension host and webview. This new extension lives in the Kilo monorepo.

This document tracks remaining work needed for feature parity with the old extension. Each feature links to its detailed parity requirement doc. Features sourced from the GitHub project board include issue links.

Current State Summary

The rebuild has a working foundation:

• CLI backend: server lifecycle (spawn, port detection, auth, dispose) in server-manager.ts, HTTP client with 20 endpoints in http-client.ts, SSE client with event subscriptions in sse-client.ts
• Chat UI: message list with text/tool/reasoning parts, streaming text deltas, auto-scroll in ChatView.tsx and MessageList.tsx. Markdown rendering via kilo-ui's <KiloMessage> component with syntax-highlighted code blocks and per-tool renderers.
• Tool parts: delegation to kilo-ui per-tool renderers with status icons, expandable input/output sections, status-based styling in Message.tsx
• Prompt input: send/abort controls with integrated model selector and mode switcher in PromptInput.tsx
• Permissions: rendered through kilo-ui's DataProvider/permission components — reject/once/always with expandable tool details
• Sessions: create, list, select, load messages via session.tsx
• Todo list: todo.updated SSE event → session store → kilo-ui PART_MAPPING["todowrite"] renders todo lists with checkboxes
• Auth: full device auth flow with QR code, verification code, countdown in DeviceAuthCard.tsx; org switching implemented
• Profile: login state, balance, dashboard link, logout in ProfileView.tsx
• Session history: search, date-grouped list, relative timestamps, rename/delete in SessionList.tsx
• Settings: 14-tab settings (Providers, AgentBehaviour, AutoApprove, Browser, Autocomplete, Display, Notifications, Context, Terminal, Prompts, Experimental, Language, AboutKiloCode — all functional; Workflows subtab is a placeholder) in Settings.tsx
• Message protocol: 41 message types (22 ExtensionMessage + 19 WebviewMessage) in messages.ts
• Build pipeline: dual esbuild (extension + webview), CLI binary provisioning in esbuild.js and prepare-cli-binary.mjs
• View title bar button: ✅ Done — #181
• Browser automation: Playwright MCP integration with settings toggle, lifecycle service, and CLI MCP hub registration in BrowserAutomationService
• kilo-ui integration: Webview uses @kilocode/kilo-ui shared component library — ThemeProvider, MarkedProvider, DataProvider, Button, IconButton, Tooltip, Popover, Switch, Select, Toast, KiloMessage
• Task header: Session title, cost display, context token usage with percentage, compact button in TaskHeader.tsx
• Model selector: Popover-based model picker with search, provider grouping, free model tags in ModelSelector.tsx
• Mode switcher: Agent/mode selector with descriptions in ModeSwitcher.tsx
• Localization: Full i18n system with 16 locales, three-layer dict merging, locale auto-detection in language.tsx and i18n/
• Context compaction: summarize endpoint + CompactRequest message + compact button in TaskHeader
• Code blocks: copy buttons, expand/collapse, syntax highlighting via kilo-ui KiloMessage + MarkedProvider + shiki
• Diff viewing: full diff viewer via kilo-ui Diff/DiffChanges components for file edit/write/patch tools
• Command execution: expandable bash tool output in BasicTool accordion via kilo-ui PART_MAPPING["bash"]
• Image handling: clipboard paste, drag-and-drop, thumbnails in PromptInput, ImagePreview dialog in useImageAttachments.ts
• Autocomplete: FIM inline completions via AutocompleteInlineCompletionProvider with debouncing, LRU cache, tree-sitter context
• Agent Manager: parallel worktree sessions, git worktree lifecycle, WorktreeSelector in AgentManagerProvider.ts
• Telemetry: TelemetryProxy POSTs to CLI /telemetry/capture; webview telemetry forwarded via message protocol
• Auto-approval config: per-tool allow/ask/deny dropdowns for all 16 tools in AutoApproveTab
• Provider configuration: default/small model selection, disabled/enabled provider lists in ProvidersTab

---

Chat UI Feature Parity

Feature	Status	Details	Backend	Priority
Auto-Approval Controls	✅ Done	AutoApproveTab in Settings implements per-tool allow/ask/deny dropdowns for all 16 tools with a "Set All" bulk control. Changes written to backend config via updateConfig({ permission: {...} }). #171	CLI owns permissions; webview needs config UI	P1
Browser Session Controls	🔨 Partial	BrowserTab settings UI implemented with enable/disable toggle, system Chrome and headless options. Missing: in-chat browser session controls, action replay, screenshot viewing.	CLI-side (if browser tool exists) + webview	P3
Checkpoint & Task Management	❌ Not started	No checkpoint restore, navigation, or "See New Changes" diff buttons.	CLI session undo/redo/fork + extension git integration	P1
Code Block Interactions	✅ Done	Code blocks render with syntax highlighting, copy buttons, and expand/collapse via kilo-ui's KiloMessage + MarkedProvider + shiki. User messages and assistant text parts both have copy buttons.	Webview-only	P0
Command Execution	✅ Done	Bash tool output renders in an expandable BasicTool accordion via kilo-ui's PART_MAPPING["bash"]. Command output shown in a scrollable code block with ANSI stripping.	CLI executes commands; webview renders output	P0
Connection State UI	🔨 Partial	ServerProvider context tracks connectionState ("connecting"/"connected"/"disconnected"/"error"). Prompt input is disabled when disconnected. Missing: dedicated blocking spinner/error panel overlay.	Webview-only (consumes connection state)	P0
Context Menus & Tooltips	❌ Not started	No right-click context menus or hover tooltips on interactive elements.	Webview-only	P2
Diff Viewing & File Operations	✅ Done	Full diff viewer via kilo-ui Diff + DiffChanges components (built on @pierre/diffs) with line selection, find shortcuts, and worker-pool syntax highlighting. DiffComponentProvider registered in App.tsx. File edit/write/patch tools all use this.	CLI provides diff data; webview renders	P0
File Permission Dialogs	🔨 Partial	Basic permission dialog exists (reject/once/always). Missing batch file read approval and per-file granularity. #171	CLI permission model; webview UI	P1
Follow-Up Questions	❌ Not started	No suggested reply chips, click-to-submit, auto-approval countdown, or mode indicators.	Likely extension-side generation	P2
Image Handling	✅ Done	useImageAttachments hook handles clipboard paste, drag-and-drop, and file reading. Thumbnails with remove buttons shown in PromptInput. kilo-ui ImagePreview dialog for viewing attached images in messages.	CLI provides image data; webview renders + VS Code integration	P1
Inline Actions on Tool Messages	🔨 Partial	Tool parts render with status icons (⏳⚙️✓✕), expandable sections with input/output, and status-based CSS classes. File path links render as clickable anchors in tool subtitles via kilo-ui. Missing: explicit VS Code file-opener wired via postMessage, inline action buttons.	CLI provides tool metadata; webview renders	P1
Kilo Themed Chat Session	✅ Done	kilo-ui components throughout: ThemeProvider with defaultTheme="kilo-vscode", KiloMessage for rendering, MarkedProvider for markdown, Button/IconButton/Tooltip/Popover from kilo-ui. #161	Webview-only (styling/theming)	P0
Markdown Rendering	✅ Done	Message.tsx delegates to kilo-ui's <KiloMessage> component. MarkedProvider in App.tsx provides markdown context. Syntax highlighting via shiki. #161	Webview-only	P0
Mermaid Diagram Features	❌ Not started	No mermaid rendering, "Fix with AI" button, copy, or open-as-PNG. Requires markdown rendering first.	Webview-only (rendering); CLI for "Fix with AI"	P2
Message Editing & Management	❌ Not started	No inline editing, deletion, timestamp display, or redo-previous-message (up-arrow). #177	CLI session fork/undo for edit semantics	P1
Special Content Types	🔨 Partial	Reasoning blocks render (collapsible). Missing: open-markdown-preview button, MCP tool/resource rows, expandable error rows with copy.	Mixed: CLI for MCP data; webview for rendering	P1
Task Header	✅ Done	TaskHeader.tsx implements session title, cost display (formatted USD), context token usage with percentage, compact button with tooltip. Uses kilo-ui IconButton and Tooltip. #166	CLI provides cost/context data; webview renders	P0
Todo List Management	✅ Done	todo.updated SSE event handled through full pipeline: KiloProvider → webview message → session store. kilo-ui PART_MAPPING["todowrite"] renders todo lists with checkboxes showing completed/total counts.	CLI tool or extension-side feature	P2
Toggle Thinking	🔨 Partial	Reasoning blocks render but no toggle to enable/disable thinking. Linked PR #127. #172	CLI controls thinking; webview provides toggle UI	P2

---

Non-Agent Feature Parity

Feature	Status	Details	Backend	Priority
Agent Manager	✅ Done	AgentManagerProvider opens editor panel, creates git worktrees for parallel sessions, full createWorktreeSession lifecycle (worktree → session → first message). WorktreeManager handles git worktree add, metadata, and discovery. WorktreeSelector in PromptInput toggles local/worktree mode. #178	Extension orchestrates multiple CLI sessions	P1
Authentication & Enterprise	🔨 Partial	Device auth flow works, organization switching implemented. Missing: org feature flags, MDM policy enforcement. #160	CLI handles its auth; extension handles org/MDM	P1
Auto-Purge	❌ Not started	No scheduled cleanup of old session/task storage.	Extension-side (storage ownership TBD)	P3
Autocomplete / Ghost	✅ Done	AutocompleteInlineCompletionProvider implements vscode.InlineCompletionItemProvider with FIM completions via Kilo Gateway. Includes debouncing, LRU cache, tree-sitter context, bracket matching, and stream-based completion. AutocompleteServiceManager registers/unregisters the provider. #164	Extension-side (VS Code InlineCompletionProvider)	P1
Browser Automation & URL Ingestion	🔨 Partial	Playwright MCP integration implemented: settings toggle, BrowserAutomationService, CLI MCP hub registration, BrowserTab settings UI. Missing: URL-to-markdown ingestion, screenshot viewing in chat.	CLI MCP hub (POST /mcp); extension manages lifecycle	P3
Checkpoints	❌ Not started	No shadow git repo, per-task snapshots, restore UI, or diff viewing. Settings tab is a stub.	CLI (partial: session undo/redo); extension for git snapshots	P1
Cloud Task Support	❌ Not started	No cloud sync for tasks across devices. #168	Kilo cloud API + CLI; extension provides UI	P2
Code Actions & Editor Menus	🔨 Partial	Editor/terminal right-click submenus, CodeActionProvider lightbulb, keyboard shortcuts, and prompt templates implemented. Terminal content capture is a stub (needs shell integration API). Missing: custom prompt overrides via settings.	Extension-side (VS Code CodeActionProvider + menus + keybindings)	P1
Code Reviews	❌ Not started	No local review mode or automated AI review of uncommitted/branch changes.	CLI (partial); extension for VS Code review UX	P2
Codebase Indexing & Semantic Search	❌ Not started	No vector indexing, semantic search, or embeddings infrastructure.	CLI has grep/glob endpoints; semantic indexing is extension or cloud	P2
Contribution Tracking	❌ Not started	No AI attribution tracking, line fingerprinting, or reporting.	Extension-side	P3
Custom Commands	❌ Not started	No slash commands, project-level command discovery, or YAML frontmatter support.	CLI has custom commands; extension provides UI entry points	P2
Deploy & Secure Surfaces	❌ Not started	No deploy workflows, managed indexing UI, or security review surfaces.	Extension-side	P3
Fast Edits	❌ Not started	No fast edit mode for quick inline code changes.	CLI fast-edit runtime; extension provides UI	P2
Git Commit Message Generation	❌ Not started	No AI commit message generation or VS Code Source Control integration. #165	Extension-side (VS Code Git API)	P2
Integrations	❌ Not started	No external system integrations (GitHub, etc.) beyond basic auth.	CLI plugin system (partial); extension for IDE hooks	P3
Kilo Gateway	✅ Done	Kilo Gateway (KILO_GATEWAY_ID = "kilo") is the default provider, listed first in ModelSelector via PROVIDER_ORDER. Login/logout/org switching fully implemented in KiloProvider.ts and ProfileView.tsx. Default model selection in ProvidersTab. #176	CLI handles gateway connection; extension provides config UI	P0
Localization	✅ Done	Full i18n system with 16 locales in i18n/, three-layer dict merging, locale auto-detection, LanguageTab settings UI with locale selector.	Extension + webview; CLI locale mapping needed	P3
Marketplace	🔨 Partial	Placeholder view exists but is non-functional. No catalog, install, or update capabilities. #169	Extension-side	P2
MCP & MCP Hub	🔨 Partial	MCP types and HTTP client methods added (getMcpStatus, addMcpServer, connectMcpServer, disconnectMcpServer). Used by BrowserAutomationService. Missing: general MCP configuration UI, server management, tool allowlisting, connection status display.	CLI owns MCP lifecycle; extension provides config UI	P1
Mode Switcher	✅ Done	ModeSwitcher.tsx implements popover-based agent/mode selector with descriptions, persisted via session.selectAgent(). Integrated into PromptInput. #162	CLI manages modes; extension provides switcher UI	P2
Model Switcher	✅ Done	ModelSelector.tsx implements popover-based selector with search/filter, keyboard navigation, provider grouping, free model tags. Integrated into PromptInput. #163	CLI provides model list; extension provides switcher UI	P1
Provider Configuration	🔨 Partial	Provider context fetches and exposes provider data, connected providers, defaults, model lists — wired into ModelSelector. ProvidersTab UI still a stub. #175	CLI manages providers; extension provides config UI	P1
Repository Initialization	❌ Not started	No /init command support for setting up agentic engineering. #174	CLI /init endpoint; extension provides UI trigger	P3
Rules & Workflows	❌ Not started	No rules or workflow management UI. #173	CLI owns rules runtime; extension provides management UI	P3
Search & Repo Scanning	❌ Not started	No search infrastructure beyond CLI grep/glob.	CLI has grep/glob; extension may add UI	P2
Settings Sync	❌ Not started	No VS Code Settings Sync allowlist registration. Settings tabs are all stubs.	Extension-side (VS Code API)	P3
Settings UI	🔨 Partial	15-tab settings shell exists. BrowserTab has real settings controls (enable/disable, system Chrome, headless toggles). LanguageTab has working locale selector. Remaining 13 tabs are stubs. #170	CLI exposes config; extension provides settings forms	P1
Skills System	❌ Not started	No skill discovery, management, or hot-reload in extension.	CLI has skills runtime; extension provides packaging/UI	P2
Speech-to-Text	❌ Not started	No voice input or streaming STT.	Webview (mic capture); CLI-compatible STT optional	P3
Task History	🔨 Partial	Session list exists but lacks search, metadata, and full persistence. #167	CLI session storage; extension provides history UI	P1
Telemetry	❌ Not started	Dual-layer telemetry (PostHog Node server-side + PostHog JS client-side) for extension usage, errors, LLM completions, and AI interactions. Includes privacy controls, typed events, and structured error tracking. See detailed plan.	Extension-side (PostHog + kilo-telemetry)	P1
Terminal / Shell Integration	❌ Not started	No VS Code terminal integration for command execution display, exit code tracking, or working directory changes.	CLI executes commands; extension provides terminal UX	P1

---

Infrastructure & Robustness

These items were identified from the JetBrains plugin analysis — patterns the JetBrains plugin implements that are missing in the VSCode extension. They primarily affect reliability and developer experience rather than feature parity.

Feature	Status	Details	Scope	Priority
SSE Auto-Reconnect	❌ Not started	SSE connection has no reconnect logic. Network hiccups, laptop sleep, or server restart kill the extension with no recovery.	Extension (SSEClient + ConnectionService)	P0
HTTP Request Timeouts	❌ Not started	HTTP client uses bare fetch() with no timeouts. Hung requests block indefinitely.	Extension (HttpClient)	P1
VSCode Error Notifications	❌ Not started	Critical errors (CLI missing, server crash) are only shown in the webview. No vscode.window.showErrorMessage() notifications.	Extension (KiloProvider)	P1
Dedicated Output Channel	❌ Not started	All logging goes to console.log mixed with other extensions. No dedicated "Kilo Code" output channel.	Extension (new logger utility)	P2

---

Pre-Production Checklist

Before publishing this extension to the VS Code Marketplace or deploying to users, verify every item below.

Security

• Review and tighten CSP — The current policy in KiloProvider._getHtmlForWebview() has several areas to audit:
  • style-src 'unsafe-inline' is broadly permissive — investigate whether nonce-based style loading is feasible now that kilo-ui styles are bundled
  • connect-src http://127.0.0.1:* http://localhost:* allows connections to any localhost port — tighten to the actual CLI server port once known at runtime
  • img-src … https: allows images from any HTTPS origin — scope to ${webview.cspSource} data: unless external images are explicitly needed
  • 'wasm-unsafe-eval' in script-src was added for shiki — confirm it is still required and document the reason
  • ws:// connections to any localhost port — same concern as connect-src
• Validate openExternal URLs — The openExternal handler passes any URL from the webview directly to vscode.env.openExternal() with no allowlist or scheme check. Restrict to https: (and possibly vscode:) schemes, or allowlist specific hosts
• Audit credential storage — CLI stores credentials as plaintext JSON with chmod 0600. Evaluate whether VS Code's SecretStorage API should be used for extension-side secrets, and document the threat model for CLI-managed credentials
• Audit workspace path containment — CLI's path traversal checks are lexical only; symlinks and Windows cross-drive paths can escape the workspace boundary. Determine if additional hardening (realpath canonicalization) is needed before production

Reliability

• VS Code error notifications — Critical errors (CLI missing, server crash, connection lost) are only shown inside the webview (details). Users get no feedback if the webview is hidden
• Connection state UI — No loading spinner, error panel, or reconnecting indicator in the webview (details). Chat renders even when disconnected

Testing

• Test coverage — Only one test file exists (extension.test.ts). Add integration tests for: server lifecycle, SSE event routing, message send/receive, permission flow, session management
• Multi-theme visual check — Verify the webview renders correctly in at least one light theme, one dark theme, and one high-contrast theme
• Multi-platform smoke test — Test on macOS, Windows, and Linux. Particularly: CLI binary provisioning, path handling, chmod-based credential protection on Windows

Packaging & Marketplace

• Bundle size audit — With kilo-ui and its transitive dependencies (shiki, marked, katex, dompurify, etc.) now bundled, measure dist/webview.js size and verify the total .vsix package size is acceptable
• .vscodeignore review — Ensure only necessary files are included in the package (no docs/, src/, test artifacts, or development scripts)
• Marketplace metadata — Verify README.md, CHANGELOG.md, publisher name, extension icon, and package.json fields (displayName, description, categories, keywords, repository) are production-ready
• activationEvents review — Confirm the extension only activates when needed (not *), to avoid impacting VS Code startup time
• Minimum VS Code version — Verify engines.vscode in package.json matches the minimum API features actually used

Logging & Observability

• Dedicated output channel — All logging currently goes to console.log mixed with other extensions (details). Create a dedicated "Kilo Code" output channel before production
• Remove or guard verbose logging — Many console.log calls with emojis and debug detail exist in KiloProvider.ts. Gate behind a debug flag or move to the output channel at appropriate log levels

---

Implementation Notes

Architecture

• Solid.js (not React) powers the webview. JSX compiles via esbuild-plugin-solid. All webview components use Solid's reactive primitives (signals, createEffect, etc.).
• Two separate esbuild builds: extension (Node/CJS) and webview (browser/IIFE), configured in esbuild.js.
• No shared state between extension and webview. All communication is via vscode.Webview.postMessage() with typed messages defined in messages.ts. Provider hierarchy: ThemeProvider → DialogProvider → VSCodeProvider → ServerProvider → LanguageBridge → MarkedProvider → ProviderProvider → SessionProvider → DataBridge.
• CLI backend owns: agent orchestration, MCP lifecycle, tool execution, search/grep/glob, session storage, permissions runtime, custom commands, skills, and fast edits.
• Extension owns: VS Code API integrations (code actions, inline completions, terminal, SCM, settings sync), webview rendering, auth mediation, and any feature not supported by CLI.

kilo-ui Shared Library

• kilo-ui shared library: The webview now heavily uses @kilocode/kilo-ui for UI components. A DataBridge component in App.tsx adapts the session store to kilo-ui's DataProvider expected shape, enabling shared components like <KiloMessage> to work with the extension's data model.

Key Differences from Old Extension

• No Task.ts or webviewMessageHandler.ts — the CLI server replaces the old in-process agent loop.
• Permissions flow through CLI's ask/reply model, not extension-side approval queues. Permissions are rendered through kilo-ui's DataProvider pattern, not a standalone PermissionDialog.
• Session history is CLI-managed, not stored in VS Code global state.
• MCP servers are configured and managed by the CLI, not the extension.