diff --git a/packages/kilo-vscode/.gitignore b/packages/kilo-vscode/.gitignore index e660fd93d3..8563e5fd98 100644 --- a/packages/kilo-vscode/.gitignore +++ b/packages/kilo-vscode/.gitignore @@ -1 +1,2 @@ bin/ +.vite-port diff --git a/packages/kilo-vscode/docs/ui-implementation-plan.md b/packages/kilo-vscode/docs/ui-implementation-plan.md index 5f3adea4d2..8dec45a576 100644 --- a/packages/kilo-vscode/docs/ui-implementation-plan.md +++ b/packages/kilo-vscode/docs/ui-implementation-plan.md @@ -28,6 +28,7 @@ Replace the hand-built UI components in the kilo-vscode webview with components The webview is a Solid.js SPA bundled by esbuild into a single IIFE file ([`dist/webview.js`](../esbuild.js:54)) plus a CSS sidecar ([`dist/webview.css`](../esbuild.js:54)). The HTML shell is generated at runtime by [`KiloProvider._getHtmlForWebview()`](../src/KiloProvider.ts:688). **Provider hierarchy** (in [`App.tsx`](../webview-ui/src/App.tsx:110)): + ``` VSCodeProvider → ServerProvider → SessionProvider → AppContent ``` @@ -36,23 +37,23 @@ VSCodeProvider → ServerProvider → SessionProvider → AppContent ### What is hand-built vs what could use kilo-ui -| Area | Current | kilo-ui available? | -|------|---------|-------------------| -| Buttons (send, abort, login, etc.) | Raw ` @@ -264,10 +272,12 @@ import { IconButton } from "@kilocode/kilo-ui/icon-button" #### 1.2 Replace loading indicators with `Spinner` **Files to modify**: + - [`Message.tsx`](../webview-ui/src/components/chat/Message.tsx:38) — tool status emoji (`⏳`, `⚙️`) - [`ChatView.tsx`](../webview-ui/src/components/chat/ChatView.tsx) — any loading states **Import**: + ```tsx import { Spinner } from "@kilocode/kilo-ui/spinner" ``` @@ -277,6 +287,7 @@ import { Spinner } from "@kilocode/kilo-ui/spinner" **File**: [`PermissionDialog.tsx`](../webview-ui/src/components/chat/PermissionDialog.tsx) The current implementation is a custom overlay `
` with CSS. Replace with: + ```tsx import { Dialog } from "@kilocode/kilo-ui/dialog" @@ -293,10 +304,12 @@ import { Dialog } from "@kilocode/kilo-ui/dialog" #### 1.4 Replace cards with `Card` **Files to modify**: + - [`ProfileView.tsx`](../webview-ui/src/components/ProfileView.tsx) — profile card, balance card - [`DeviceAuthCard.tsx`](../webview-ui/src/components/DeviceAuthCard.tsx) — auth flow card **Import**: + ```tsx import { Card } from "@kilocode/kilo-ui/card" ``` @@ -311,7 +324,7 @@ import { Settings as SettingsIcon } from "lucide-solid" // After import { Icon } from "@kilocode/kilo-ui/icon" - +; ``` ##### Prerequisite: Add 6 missing icons to kilo-ui @@ -327,27 +340,28 @@ Before migrating, the following icons must be added to the `icons` map in [`ui/s ##### Migration mapping -| Settings Tab | lucide-solid | kilo-ui `name` | Notes | -|---|---|---|---| -| Back button | `ArrowLeft` | `arrow-left` | Exact match | -| Providers | `Plug` | `providers` | Semantic match | -| Terminal | `SquareTerminal` | `console` | Good match | -| Prompts | `MessageSquare` | `speech-bubble` | Good match | -| Checkpoints | `GitBranch` | `branch` | Good match | -| Browser | `SquareMousePointer` | `window-cursor` | Approximate — review visually | -| About | `Info` | `help` | Approximate — `?` vs `i` icon | -| Context | `Database` | `server` | Approximate — review visually | -| Auto-Approve | `CheckCheck` | `checklist` | Approximate — review visually | -| Display | `Monitor` | `monitor` | **New icon needed** | -| Autocomplete | `Bot` | `bot` | **New icon needed** | -| Notifications | `Bell` | `bell` | **New icon needed** | -| Agent Behaviour | `Users2` | `users` | **New icon needed** | -| Experimental | `FlaskConical` | `flask` | **New icon needed** | -| Language | `Globe` | `globe` | **New icon needed** | +| Settings Tab | lucide-solid | kilo-ui `name` | Notes | +| --------------- | -------------------- | --------------- | ----------------------------- | +| Back button | `ArrowLeft` | `arrow-left` | Exact match | +| Providers | `Plug` | `providers` | Semantic match | +| Terminal | `SquareTerminal` | `console` | Good match | +| Prompts | `MessageSquare` | `speech-bubble` | Good match | +| Checkpoints | `GitBranch` | `branch` | Good match | +| Browser | `SquareMousePointer` | `window-cursor` | Approximate — review visually | +| About | `Info` | `help` | Approximate — `?` vs `i` icon | +| Context | `Database` | `server` | Approximate — review visually | +| Auto-Approve | `CheckCheck` | `checklist` | Approximate — review visually | +| Display | `Monitor` | `monitor` | **New icon needed** | +| Autocomplete | `Bot` | `bot` | **New icon needed** | +| Notifications | `Bell` | `bell` | **New icon needed** | +| Agent Behaviour | `Users2` | `users` | **New icon needed** | +| Experimental | `FlaskConical` | `flask` | **New icon needed** | +| Language | `Globe` | `globe` | **New icon needed** | Once all lucide icons are replaced and the 6 new icons are added to kilo-ui, remove `lucide-solid` from `package.json` dependencies. #### Acceptance criteria + - 6 missing icons (`monitor`, `bot`, `bell`, `users`, `flask`, `globe`) added to [`ui/src/components/icon.tsx`](../../../ui/src/components/icon.tsx) - All 15 lucide-solid icons in `Settings.tsx` replaced with kilo-ui `Icon` component - All buttons use `Button` or `IconButton` with appropriate variants @@ -368,10 +382,11 @@ Once all lucide icons are replaced and the 6 new icons are added to kilo-ui, rem **File**: [`Settings.tsx`](../webview-ui/src/components/Settings.tsx) Replace the custom signal-based tab navigation (~80 lines of inline styles) with: + ```tsx import { Tabs } from "@kilocode/kilo-ui/tabs" - +; Configuration @@ -392,6 +407,7 @@ import { Tabs } from "@kilocode/kilo-ui/tabs" **Files**: All 14 settings tab components in [`settings/`](../webview-ui/src/components/settings/) Use kilo-ui form components: + ```tsx import { Select } from "@kilocode/kilo-ui/select" import { Switch } from "@kilocode/kilo-ui/switch" @@ -400,6 +416,7 @@ import { TextField } from "@kilocode/kilo-ui/text-field" ``` **Usage patterns** (following the desktop app's [`settings-general.tsx`](../../../app/src/components/settings-general.tsx)): + ```tsx // Toggle setting +; - - {/* ... existing providers ... */} - + {/* ... existing providers ... */} ``` @@ -465,6 +482,7 @@ import { Code } from "@kilocode/kilo-ui/code" **File**: [`Message.tsx`](../webview-ui/src/components/chat/Message.tsx:15) — `TextPartView` Currently renders assistant text as plain text. Replace with: + ```tsx import { Markdown } from "@kilocode/kilo-ui/markdown" @@ -486,10 +504,11 @@ This brings: rendered headings, lists, links, inline code, code blocks with synt **File**: [`Message.tsx`](../webview-ui/src/components/chat/Message.tsx:38) — `ToolPartView` (tool input/output display) Replace raw `
` tags with:
+
 ```tsx
 import { Code } from "@kilocode/kilo-ui/code"
 
-
+;
 ```
 
 #### 3.4 Adopt chat-specific components
@@ -497,6 +516,7 @@ import { Code } from "@kilocode/kilo-ui/code"
 **File**: [`Message.tsx`](../webview-ui/src/components/chat/Message.tsx)
 
 Consider adopting kilo-ui's higher-level chat components:
+
 ```tsx
 import { MessagePart } from "@kilocode/kilo-ui/message-part"
 import { SessionTurn } from "@kilocode/kilo-ui/session-turn"
@@ -510,11 +530,7 @@ These components handle the rendering of message parts (text, tool calls, reason
 ```tsx
 import { DataProvider } from "@kilocode/kilo-ui/context/data"
 
-
+;
   {/* chat content */}
 
 ```
@@ -534,13 +550,14 @@ Use when displaying file modifications from tool calls.
 ```tsx
 import { Collapsible } from "@kilocode/kilo-ui/collapsible"
 
-
+;
   Thinking...
   {reasoningText}
 
 ```
 
 #### Acceptance criteria
+
 - Assistant messages render markdown (headings, lists, code blocks, links)
 - Code blocks have syntax highlighting
 - Tool call displays use `BasicTool` or `Collapsible` with `Code`
@@ -558,7 +575,7 @@ import { Collapsible } from "@kilocode/kilo-ui/collapsible"
 ```tsx
 import { Tooltip } from "@kilocode/kilo-ui/tooltip"
 
-
+;
   
     
   
@@ -582,7 +599,7 @@ Use for: session list item actions (rename, delete), message actions (copy, retr
 import { Toast, showToast, toaster } from "@kilocode/kilo-ui/toast"
 
 // Add Toast container to App.tsx
-
+;
 
 // Use imperatively
 showToast({
@@ -599,10 +616,11 @@ Use for: connection status changes, error notifications, copy confirmations.
 **File**: [`SessionList.tsx`](../webview-ui/src/components/history/SessionList.tsx)
 
 Replace custom list with kilo-ui `List` for keyboard navigation and accessibility:
+
 ```tsx
 import { List } from "@kilocode/kilo-ui/list"
 
- onSelectSession(session.id)}>
+; onSelectSession(session.id)}>
   {(session) => (
     
       {session.title}
@@ -621,6 +639,7 @@ import { Popover } from "@kilocode/kilo-ui/popover"
 Use for: model selector, provider info cards.
 
 #### Acceptance criteria
+
 - Tooltips on all interactive elements
 - Context menu on session list items
 - Toast notifications for key user actions
@@ -631,31 +650,31 @@ Use for: model selector, provider info cards.
 
 ## 6. Component Migration Reference Table
 
-| Current Component | File | kilo-ui Replacement | Import Path |
-|---|---|---|---|
-| Raw `