mirror of
https://github.com/Kilo-Org/kilocode.git
synced 2026-09-24 16:02:55 +08:00
docs: update migration plan with current implementation status
This commit is contained in:
Mark IJbema
@@ -10,21 +10,27 @@ This document tracks remaining work needed for feature parity with the old exten
|
||||
|
||||
The rebuild has a working foundation:
|
||||
|
||||
- **CLI backend**: server lifecycle (spawn, port detection, auth, dispose) in [`server-manager.ts`](../src/services/cli-backend/server-manager.ts), HTTP client with 11 endpoints in [`http-client.ts`](../src/services/cli-backend/http-client.ts), SSE client with event subscriptions in [`sse-client.ts`](../src/services/cli-backend/sse-client.ts)
|
||||
- **Chat UI**: message list with text/tool/reasoning parts, streaming text deltas, auto-scroll in [`ChatView.tsx`](../webview-ui/src/components/chat/ChatView.tsx) and [`MessageList.tsx`](../webview-ui/src/components/chat/MessageList.tsx)
|
||||
- **Tool parts**: status icons (⏳⚙️✓✕), expandable input/output sections, status-based CSS classes in [`Message.tsx`](../webview-ui/src/components/chat/Message.tsx)
|
||||
- **Prompt input**: send/abort controls in [`PromptInput.tsx`](../webview-ui/src/components/chat/PromptInput.tsx)
|
||||
- **Permissions**: reject/once/always dialog with expandable tool details in [`PermissionDialog.tsx`](../webview-ui/src/components/chat/PermissionDialog.tsx)
|
||||
- **CLI backend**: server lifecycle (spawn, port detection, auth, dispose) in [`server-manager.ts`](../src/services/cli-backend/server-manager.ts), HTTP client with 20 endpoints in [`http-client.ts`](../src/services/cli-backend/http-client.ts), SSE client with event subscriptions in [`sse-client.ts`](../src/services/cli-backend/sse-client.ts)
|
||||
- **Chat UI**: message list with text/tool/reasoning parts, streaming text deltas, auto-scroll in [`ChatView.tsx`](../webview-ui/src/components/chat/ChatView.tsx) and [`MessageList.tsx`](../webview-ui/src/components/chat/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`](../webview-ui/src/components/chat/Message.tsx)
|
||||
- **Prompt input**: send/abort controls with integrated model selector and mode switcher in [`PromptInput.tsx`](../webview-ui/src/components/chat/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`](../webview-ui/src/context/session.tsx)
|
||||
- **Todo pipeline**: `todo.updated` SSE event handled through KiloProvider → webview store (no rendering UI yet)
|
||||
- **Auth**: full device auth flow with QR code, verification code, countdown in [`DeviceAuthCard.tsx`](../webview-ui/src/components/DeviceAuthCard.tsx)
|
||||
- **Profile**: login state, balance, dashboard link, logout in [`ProfileView.tsx`](../webview-ui/src/components/ProfileView.tsx)
|
||||
- **Session history**: list with relative dates in [`SessionList.tsx`](../webview-ui/src/components/history/SessionList.tsx)
|
||||
- **Settings**: 14-tab sidebar navigation shell in [`Settings.tsx`](../webview-ui/src/components/Settings.tsx) (tabs are stubs)
|
||||
- **Message protocol**: 28 message types in [`messages.ts`](../webview-ui/src/types/messages.ts)
|
||||
- **Settings**: 15-tab sidebar navigation, 2 functional (BrowserTab, LanguageTab), 13 stubs in [`Settings.tsx`](../webview-ui/src/components/Settings.tsx)
|
||||
- **Message protocol**: 41 message types (22 ExtensionMessage + 19 WebviewMessage) in [`messages.ts`](../webview-ui/src/types/messages.ts)
|
||||
- **Build pipeline**: dual esbuild (extension + webview), CLI binary provisioning in [`esbuild.js`](../esbuild.js) and [`prepare-cli-binary.mjs`](../scripts/prepare-cli-binary.mjs)
|
||||
- **View title bar button**: ✅ Done — [#181](https://github.com/Kilo-Org/kilo/issues/181)
|
||||
- **Browser automation**: Playwright MCP integration with settings toggle, lifecycle service, and CLI MCP hub registration in [`BrowserAutomationService`](../src/services/browser-automation/browser-automation-service.ts)
|
||||
- **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`](../webview-ui/src/components/chat/TaskHeader.tsx)
|
||||
- **Model selector**: Popover-based model picker with search, provider grouping, free model tags in [`ModelSelector.tsx`](../webview-ui/src/components/chat/ModelSelector.tsx)
|
||||
- **Mode switcher**: Agent/mode selector with descriptions in [`ModeSwitcher.tsx`](../webview-ui/src/components/chat/ModeSwitcher.tsx)
|
||||
- **Localization**: Full i18n system with 16 locales, three-layer dict merging, locale auto-detection in [`language.tsx`](../webview-ui/src/context/language.tsx) and [`i18n/`](../webview-ui/src/i18n/)
|
||||
- **Context compaction**: summarize endpoint + CompactRequest message + compact button in TaskHeader
|
||||
|
||||
---
|
||||
|
||||
@@ -35,7 +41,7 @@ The rebuild has a working foundation:
|
||||
| [Auto-Approval Controls](chat-ui-features/auto-approval-controls.md) | ❌ Not started | No auto-approval toggle, scope selectors, or timeout config. Permission dialog exists but only supports per-request decisions. [#171](https://github.com/Kilo-Org/kilo/issues/171) | CLI owns permissions; webview needs config UI | P1 |
|
||||
| [Browser Session Controls](chat-ui-features/browser-session-controls.md) | 🔨 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](chat-ui-features/checkpoint-task-management.md) | ❌ Not started | No checkpoint restore, navigation, or "See New Changes" diff buttons. | CLI session undo/redo/fork + extension git integration | P1 |
|
||||
| [Code Block Interactions](chat-ui-features/code-block-interactions.md) | ❌ Not started | No markdown rendering, syntax highlighting, copy button, expand/collapse, or sticky buttons on code blocks. Messages render as plain text. | Webview-only | P0 |
|
||||
| [Code Block Interactions](chat-ui-features/code-block-interactions.md) | 🔨 Partial | Code blocks render with syntax highlighting via kilo-ui's KiloMessage + MarkedProvider + shiki. Missing: copy button, expand/collapse, sticky buttons (depends on kilo-ui feature completeness). | Webview-only | P0 |
|
||||
| [Command Execution](chat-ui-features/command-execution.md) | 🔨 Partial | Tool messages render but lack expandable terminal output, abort-by-PID, exit status indicators, command pattern selectors, and syntax highlighting. | CLI executes commands; webview renders output | P0 |
|
||||
| [Connection State UI](chat-ui-features/connection-state-ui.md) | ❌ Not started | No loading/connecting spinner, error panel with retry, or reconnecting indicator. Chat renders even when disconnected. | Webview-only (consumes connection state) | P0 |
|
||||
| [Context Menus & Tooltips](chat-ui-features/context-menus-tooltips.md) | ❌ Not started | No right-click context menus or hover tooltips on interactive elements. | Webview-only | P2 |
|
||||
@@ -44,12 +50,12 @@ The rebuild has a working foundation:
|
||||
| [Follow-Up Questions](chat-ui-features/follow-up-questions.md) | ❌ Not started | No suggested reply chips, click-to-submit, auto-approval countdown, or mode indicators. | Likely extension-side generation | P2 |
|
||||
| [Image Handling](chat-ui-features/image-handling.md) | ❌ Not started | No image viewer, zoom/pan modal, thumbnails, file attachment support in prompt input, or image paste support. | CLI provides image data; webview renders + VS Code integration | P1 |
|
||||
| [Inline Actions on Tool Messages](chat-ui-features/inline-actions-on-tool-messages.md) | 🔨 Partial | Tool parts render with status icons (⏳⚙️✓✕), expandable sections with input/output, and status-based CSS classes. Missing: jump-to-file links and inline action buttons. | CLI provides tool metadata; webview renders | P1 |
|
||||
| [Kilo Themed Chat Session](chat-ui-features/kilo-themed-chat-session.md) | 🔨 Partial | Basic chat exists but lacks Kilo theming, markdown rendering, and visual polish. [#161](https://github.com/Kilo-Org/kilo/issues/161) | Webview-only (styling/theming) | P0 |
|
||||
| [Markdown Rendering](chat-ui-features/markdown-rendering.md) | ❌ Not started | Assistant messages render as plain text. No markdown parsing, code syntax highlighting, or clickable links. Blocks Code Block Interactions and Mermaid features. [#161](https://github.com/Kilo-Org/kilo/issues/161) | Webview-only | P0 |
|
||||
| [Kilo Themed Chat Session](chat-ui-features/kilo-themed-chat-session.md) | ✅ Done | kilo-ui components throughout: ThemeProvider with `defaultTheme="kilo-vscode"`, KiloMessage for rendering, MarkedProvider for markdown, Button/IconButton/Tooltip/Popover from kilo-ui. [#161](https://github.com/Kilo-Org/kilo/issues/161) | Webview-only (styling/theming) | P0 |
|
||||
| [Markdown Rendering](chat-ui-features/markdown-rendering.md) | ✅ Done | Message.tsx delegates to kilo-ui's `<KiloMessage>` component. MarkedProvider in App.tsx provides markdown context. Syntax highlighting via shiki. [#161](https://github.com/Kilo-Org/kilo/issues/161) | Webview-only | P0 |
|
||||
| [Mermaid Diagram Features](chat-ui-features/mermaid-diagram-features.md) | ❌ 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](chat-ui-features/message-editing-management.md) | ❌ Not started | No inline editing, deletion, timestamp display, or redo-previous-message (up-arrow). [#177](https://github.com/Kilo-Org/kilo/issues/177) | CLI session fork/undo for edit semantics | P1 |
|
||||
| [Special Content Types](chat-ui-features/special-content-types.md) | 🔨 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](chat-ui-features/task-header.md) | ❌ Not started | No task header with initial prompt, cost, context size, or compaction button. [#166](https://github.com/Kilo-Org/kilo/issues/166) | CLI provides cost/context data; webview renders | P0 |
|
||||
| [Task Header](chat-ui-features/task-header.md) | ✅ 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](https://github.com/Kilo-Org/kilo/issues/166) | CLI provides cost/context data; webview renders | P0 |
|
||||
| [Todo List Management](chat-ui-features/todo-list-management.md) | 🔨 Partial | `todo.updated` SSE event is handled through the full pipeline: KiloProvider → webview message → session store with `todos()` accessor. Missing: UI component to render, display, or interact with todo items. | CLI tool or extension-side feature | P2 |
|
||||
| [Toggle Thinking](chat-ui-features/toggle-thinking.md) | 🔨 Partial | Reasoning blocks render but no toggle to enable/disable thinking. Linked [PR #127](https://github.com/Kilo-Org/kilo/pull/127). [#172](https://github.com/Kilo-Org/kilo/issues/172) | CLI controls thinking; webview provides toggle UI | P2 |
|
||||
|
||||
@@ -76,17 +82,17 @@ The rebuild has a working foundation:
|
||||
| [Git Commit Message Generation](non-agent-features/git-commit-message-generation.md) | ❌ Not started | No AI commit message generation or VS Code Source Control integration. [#165](https://github.com/Kilo-Org/kilo/issues/165) | Extension-side (VS Code Git API) | P2 |
|
||||
| [Integrations](non-agent-features/integrations.md) | ❌ Not started | No external system integrations (GitHub, etc.) beyond basic auth. | CLI plugin system (partial); extension for IDE hooks | P3 |
|
||||
| [Kilo Gateway](non-agent-features/kilo-gateway.md) | 🔨 Partial | Auth flow works but no explicit gateway provider selection or default model. [#176](https://github.com/Kilo-Org/kilo/issues/176) | CLI handles gateway connection; extension provides config UI | P0 |
|
||||
| [Localization](non-agent-features/localization-and-locale-alignment.md) | ❌ Not started | No i18n or locale normalization. All UI is English-only. | Extension + webview; CLI locale mapping needed | P3 |
|
||||
| [Localization](non-agent-features/localization-and-locale-alignment.md) | ✅ Done | Full i18n system with 16 locales in [`i18n/`](../webview-ui/src/i18n/), three-layer dict merging, locale auto-detection, LanguageTab settings UI with locale selector. | Extension + webview; CLI locale mapping needed | P3 |
|
||||
| [Marketplace](non-agent-features/marketplace.md) | 🔨 Partial | Placeholder view exists but is non-functional. No catalog, install, or update capabilities. [#169](https://github.com/Kilo-Org/kilo/issues/169) | Extension-side | P2 |
|
||||
| [MCP & MCP Hub](non-agent-features/mcp-and-mcp-hub.md) | 🔨 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](non-agent-features/mode-switcher.md) | ❌ Not started | No mode switching UI (Code, Architect, Ask, Debug, etc.). [#162](https://github.com/Kilo-Org/kilo/issues/162) | CLI manages modes; extension provides switcher UI | P2 |
|
||||
| [Model Switcher](non-agent-features/model-switcher.md) | 🔨 Partial | No model switching UI. In progress. [#163](https://github.com/Kilo-Org/kilo/issues/163) | CLI provides model list; extension provides switcher UI | P1 |
|
||||
| [Provider Configuration](non-agent-features/provider-configuration.md) | ❌ Not started | No provider add/edit/remove or switching UI. ProvidersTab is a stub. [#175](https://github.com/Kilo-Org/kilo/issues/175) | CLI manages providers; extension provides config UI | P1 |
|
||||
| [Mode Switcher](non-agent-features/mode-switcher.md) | ✅ Done | ModeSwitcher.tsx implements popover-based agent/mode selector with descriptions, persisted via session.selectAgent(). Integrated into PromptInput. [#162](https://github.com/Kilo-Org/kilo/issues/162) | CLI manages modes; extension provides switcher UI | P2 |
|
||||
| [Model Switcher](non-agent-features/model-switcher.md) | ✅ Done | ModelSelector.tsx implements popover-based selector with search/filter, keyboard navigation, provider grouping, free model tags. Integrated into PromptInput. [#163](https://github.com/Kilo-Org/kilo/issues/163) | CLI provides model list; extension provides switcher UI | P1 |
|
||||
| [Provider Configuration](non-agent-features/provider-configuration.md) | 🔨 Partial | Provider context fetches and exposes provider data, connected providers, defaults, model lists — wired into ModelSelector. ProvidersTab UI still a stub. [#175](https://github.com/Kilo-Org/kilo/issues/175) | CLI manages providers; extension provides config UI | P1 |
|
||||
| [Repository Initialization](non-agent-features/repository-initialization.md) | ❌ Not started | No /init command support for setting up agentic engineering. [#174](https://github.com/Kilo-Org/kilo/issues/174) | CLI /init endpoint; extension provides UI trigger | P3 |
|
||||
| [Rules & Workflows](non-agent-features/rules-and-workflows.md) | ❌ Not started | No rules or workflow management UI. [#173](https://github.com/Kilo-Org/kilo/issues/173) | CLI owns rules runtime; extension provides management UI | P3 |
|
||||
| [Search & Repo Scanning](non-agent-features/search-and-repo-scanning-infrastructure.md) | ❌ Not started | No search infrastructure beyond CLI grep/glob. | CLI has grep/glob; extension may add UI | P2 |
|
||||
| [Settings Sync](non-agent-features/settings-sync-integration.md) | ❌ Not started | No VS Code Settings Sync allowlist registration. Settings tabs are all stubs. | Extension-side (VS Code API) | P3 |
|
||||
| [Settings UI](non-agent-features/settings-ui.md) | 🔨 Partial | 14-tab settings shell exists, all tabs are stubs. [#170](https://github.com/Kilo-Org/kilo/issues/170) | CLI exposes config; extension provides settings forms | P1 |
|
||||
| [Settings UI](non-agent-features/settings-ui.md) | 🔨 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](https://github.com/Kilo-Org/kilo/issues/170) | CLI exposes config; extension provides settings forms | P1 |
|
||||
| [Skills System](non-agent-features/skills-system.md) | ❌ Not started | No skill discovery, management, or hot-reload in extension. | CLI has skills runtime; extension provides packaging/UI | P2 |
|
||||
| [Speech-to-Text](non-agent-features/speech-to-text.md) | ❌ Not started | No voice input or streaming STT. | Webview (mic capture); CLI-compatible STT optional | P3 |
|
||||
| [Task History](non-agent-features/task-history.md) | 🔨 Partial | Session list exists but lacks search, metadata, and full persistence. [#167](https://github.com/Kilo-Org/kilo/issues/167) | CLI session storage; extension provides history UI | P1 |
|
||||
@@ -155,13 +161,17 @@ Before publishing this extension to the VS Code Marketplace or deploying to user
|
||||
|
||||
- **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`](../esbuild.js).
|
||||
- **No shared state** between extension and webview. All communication is via `vscode.Webview.postMessage()` with typed messages defined in [`messages.ts`](../webview-ui/src/types/messages.ts).
|
||||
- **No shared state** between extension and webview. All communication is via `vscode.Webview.postMessage()` with typed messages defined in [`messages.ts`](../webview-ui/src/types/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 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.
|
||||
|
||||
Reference in New Issue
Block a user