- 
-
- ),
-}`)
- storyIndex++
- })
- })
-
- return `import type { Meta, StoryObj } from '@storybook/react'
-
-const meta: Meta = {
- title: 'Playwight Screenshots/${testSuite}',
- parameters: {
- layout: 'fullscreen',
- disableChromaticDualThemeSnapshot: true,
- },
-}
-
-export default meta
-type Story = StoryObj
-
- )
-}
diff --git a/apps/storybook/src/decorators/withI18n.tsx b/apps/storybook/src/decorators/withI18n.tsx
deleted file mode 100644
index d0b8fd7a41..0000000000
--- a/apps/storybook/src/decorators/withI18n.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { useEffect } from "react"
-import type { Decorator } from "@storybook/react-vite"
-import i18n from "../../../../webview-ui/src/i18n/setup"
-import { loadTranslations } from "../../../../webview-ui/src/i18n/setup"
-import TranslationProvider from "@/i18n/TranslationContext"
-
-/**
- * Storybook decorator that sets up i18n for all stories
- * This eliminates the need for individual wrapper components in each story file
- */
-export const withI18n: Decorator = (Story) => {
- useEffect(() => {
- loadTranslations()
- i18n.changeLanguage("en") // English
- }, [])
-
- return (
-
-
- )
-}
diff --git a/apps/storybook/src/decorators/withQueryClient.tsx b/apps/storybook/src/decorators/withQueryClient.tsx
deleted file mode 100644
index 82996c5202..0000000000
--- a/apps/storybook/src/decorators/withQueryClient.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import type { Decorator } from "@storybook/react-vite"
-import { QueryClientProvider, QueryClient } from "../../../../webview-ui/src/exports"
-
-const queryClient = new QueryClient()
-
-// Decorator to provide QueryClient for all stories using the shared provider from webview-ui
-export const withQueryClient: Decorator = (Story) => {
- return (
-
-
- )
-}
diff --git a/apps/storybook/src/decorators/withTheme.tsx b/apps/storybook/src/decorators/withTheme.tsx
deleted file mode 100644
index e6c1a27fe0..0000000000
--- a/apps/storybook/src/decorators/withTheme.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import type { Decorator } from "@storybook/react-vite"
-import { useEffect } from "react"
-
-// Decorator to handle theme switching by applying the data-theme attribute to the body
-export const withTheme: Decorator = (Story, context) => {
- const theme = context.globals.theme || "dark"
-
- useEffect(() => {
- document.body.setAttribute("data-theme", theme)
- return () => {
- document.body.removeAttribute("data-theme")
- }
- }, [theme])
-
- return \n
\n )\n}",
- }),
- })
-
- // Quick tool execution (800ms - 2 seconds)
- currentTime += randomInterval(800, 2000)
- messages.push({
- ts: currentTime,
- type: "say",
- say: "command_output",
- text: "File created successfully",
- })
-
- // Immediate checkpoint (200-800ms)
- currentTime += randomInterval(200, 800)
- // messages.push({
- // ts: currentTime,
- // type: "say",
- // say: "checkpoint_saved",
- // text: "Checkpoint saved",
- // })
-
- // Long completion summary (10-20 seconds)
- currentTime += randomInterval(10000, 20000)
- messages.push({
- ts: currentTime,
- type: "ask",
- ask: "completion_result",
- text: "Task completed successfully! I've created a new React component with proper TypeScript typing, including an interface for props and exported it for use in your application. The component follows React best practices and is ready to be imported and used.",
- })
-
- return messages
-}
-
-/**
- * Create mock messages for a debugging workflow
- * Shows error handling and recovery patterns
- */
-export const createDebuggingMessages = (): ClineMessage[] => {
- let currentTime = BASE_TIMESTAMP
-
- const messages: ClineMessage[] = [
- {
- ts: currentTime,
- type: "ask",
- ask: "command",
- text: "Debug the application and fix any critical issues found in the codebase",
- },
- ]
-
- // Initial analysis response (2-4 seconds)
- currentTime += randomInterval(2000, 4000)
- messages.push({
- ts: currentTime,
- type: "say",
- say: "text",
- text: "I'll analyze the code for issues. Let me start by examining the main application files to identify potential problems.",
- })
-
- // Quick file read (1-2 seconds)
- currentTime += randomInterval(1000, 2000)
- messages.push({
- ts: currentTime,
- type: "ask",
- ask: "tool",
- text: JSON.stringify({
- tool: "read_file",
- path: "app.ts",
- }),
- })
-
- // Analysis time (6-10 seconds)
- currentTime += randomInterval(6000, 10000)
- messages.push({
- ts: currentTime,
- type: "say",
- say: "text",
- text: "Found several issues in the code including memory leaks, unhandled promise rejections, and type safety problems. Let me fix these systematically.",
- })
-
- // First fix attempt (3-5 seconds)
- currentTime += randomInterval(3000, 5000)
- messages.push({
- ts: currentTime,
- type: "ask",
- ask: "tool",
- text: JSON.stringify({
- tool: "apply_diff",
- path: "app.ts",
- diff: "Fix memory leak and add proper error handling",
- }),
- })
-
- // Error occurs quickly (500-1500ms)
- currentTime += randomInterval(500, 1500)
- messages.push({
- ts: currentTime,
- type: "say",
- say: "error",
- text: "Error applying the fix: merge conflict detected. Let me try a different approach.",
- })
-
- // Recovery attempt (2-4 seconds)
- currentTime += randomInterval(2000, 4000)
- messages.push({
- ts: currentTime,
- type: "ask",
- ask: "tool",
- text: JSON.stringify({
- tool: "write_to_file",
- path: "app.ts",
- content: "// Fixed code with proper error handling and memory management",
- }),
- })
-
- // Success (1-2 seconds)
- currentTime += randomInterval(1000, 2000)
- messages.push({
- ts: currentTime,
- type: "say",
- say: "command_output",
- text: "File updated successfully. All critical issues have been resolved.",
- })
-
- return messages
-}
-
-/**
- * Create mock messages for a complex full-stack development task
- * Shows extended workflow with many varied operations
- */
-export const createFullStackMessages = (): ClineMessage[] => {
- let currentTime = BASE_TIMESTAMP
-
- const messages: ClineMessage[] = [
- {
- ts: currentTime,
- type: "ask",
- ask: "command",
- text: "Build a complete full-stack application with authentication, database, and API",
- },
- ]
-
- // Generate 15-20 messages with varied timing
- const messageCount = 15 + randomInterval(0, 5) // 15-20 messages
-
- const messageTypes = [
- { type: "say", say: "text", baseText: "Analyzing requirements and planning architecture" },
- { type: "ask", ask: "tool", baseText: "Creating database schema" },
- { type: "say", say: "command_output", baseText: "Database created successfully" },
- { type: "ask", ask: "tool", baseText: "Setting up authentication middleware" },
- { type: "say", say: "text", baseText: "Implementing user registration and login" },
- { type: "ask", ask: "tool", baseText: "Creating API endpoints" },
- { type: "say", say: "checkpoint_saved", baseText: "Checkpoint saved" },
- { type: "ask", ask: "tool", baseText: "Building frontend components" },
- { type: "say", say: "text", baseText: "Adding responsive design and styling" },
- { type: "ask", ask: "tool", baseText: "Implementing state management" },
- { type: "say", say: "error", baseText: "Build error: dependency conflict" },
- { type: "ask", ask: "tool", baseText: "Fixing dependency issues" },
- { type: "say", say: "command_output", baseText: "Build successful" },
- { type: "ask", ask: "tool", baseText: "Running tests and deployment" },
- { type: "say", say: "text", baseText: "Application deployed successfully" },
- ]
-
- for (let i = 1; i < messageCount && i < messageTypes.length + 1; i++) {
- // Vary timing based on message type
- let interval: number
- const msgType = messageTypes[(i - 1) % messageTypes.length]
-
- if (msgType.ask === "tool") {
- // Tool operations: 2-8 seconds
- interval = randomInterval(2000, 8000)
- } else if (msgType.say === "command_output") {
- // Command outputs: quick 500ms-2s
- interval = randomInterval(500, 2000)
- } else if (msgType.say === "checkpoint_saved") {
- // Checkpoints: very quick 200-600ms
- interval = randomInterval(200, 600)
- } else if (msgType.say === "error") {
- // Errors: quick 800-2s
- interval = randomInterval(800, 2000)
- } else {
- // Text responses: 3-15 seconds (thinking time)
- interval = randomInterval(3000, 15000)
- }
-
- currentTime += interval
-
- messages.push({
- ts: currentTime,
- type: msgType.type as "ask" | "say",
- ...(msgType.ask && { ask: msgType.ask as any }),
- ...(msgType.say && { say: msgType.say as any }),
- text:
- msgType.baseText + (msgType.ask === "tool" ? JSON.stringify({ tool: "example", path: "file.ts" }) : ""),
- })
- }
-
- return messages
-}
-
-/**
- * Create mock messages for TaskHeader stories
- * Shows a realistic agent workflow with proper read/write ratios
- */
-export const createTaskHeaderMessages = (): ClineMessage[] => {
- let currentTime = BASE_TIMESTAMP
- const messages: ClineMessage[] = []
-
- // Helper to add message with realistic timing
- const addMessage = (message: Omit{title}
\n {children}\n{user.name}
\n{user.email}
\nHello World
",
- }),
- },
- [2000, 4000],
- )
-
- addMessage(
- {
- type: "ask",
- ask: "browser_action_launch",
- text: "Launching browser to test the component",
- },
- [1000, 2000],
- )
-
- addMessage(
- {
- type: "ask",
- ask: "use_mcp_server",
- text: "Using MCP server to fetch additional data",
- },
- [1500, 3000],
- )
-
- addMessage(
- {
- type: "ask",
- ask: "completion_result",
- text: "Task completed successfully! Created a new React component with proper TypeScript typing and error handling.",
- },
- [3000, 5000],
- )
-
- // All supported SAY message types from registry
- addMessage(
- {
- type: "say",
- say: "text",
- text: "I'll help you create a new React component. Let me analyze the requirements first.",
- },
- [2000, 4000],
- )
-
- addMessage(
- {
- type: "say",
- say: "reasoning",
- text: "Based on the project structure, I should use functional components with hooks for better performance and maintainability.",
- },
- [3000, 6000],
- )
-
- addMessage(
- {
- type: "say",
- say: "command_output",
- text: "File created successfully: src/components/NewComponent.tsx",
- },
- [500, 1500],
- )
-
- addMessage(
- {
- type: "say",
- say: "mcp_server_response",
- text: "MCP server returned user data successfully",
- },
- [1000, 2000],
- )
-
- addMessage(
- {
- type: "say",
- say: "browser_action",
- text: "Clicking on the submit button to test form functionality",
- },
- [800, 1500],
- )
-
- addMessage(
- {
- type: "say",
- say: "browser_action_result",
- text: "Button click successful - form submitted correctly",
- },
- [500, 1000],
- )
-
- addMessage(
- {
- type: "say",
- say: "checkpoint_saved",
- text: "Checkpoint saved after component creation",
- },
- [200, 600],
- )
-
- addMessage(
- {
- type: "say",
- say: "completion_result",
- text: "All components have been successfully created and tested",
- },
- [2000, 4000],
- )
-
- addMessage(
- {
- type: "say",
- say: "error",
- text: "Error: TypeScript compilation failed. Missing import statement for React.",
- },
- [800, 2000],
- )
-
- addMessage(
- {
- type: "say",
- say: "condense_context",
- text: "Condensing conversation to save context space",
- },
- [1000, 2000],
- )
-
- addMessage(
- {
- type: "say",
- say: "text",
- text: "Context condensed - removed redundant information while preserving key details",
- },
- [1500, 3000],
- )
-
- return messages
-}
diff --git a/apps/storybook/src/mockData/index.ts b/apps/storybook/src/mockData/index.ts
deleted file mode 100644
index bb0b05c212..0000000000
--- a/apps/storybook/src/mockData/index.ts
+++ /dev/null
@@ -1,91 +0,0 @@
-// kilocode_change - new file
-export * from "./clineMessages"
-
-export const mockMarketplaceItems = [
- {
- id: "filesystem-mcp",
- name: "File System MCP",
- description: "Provides tools for reading, writing, and managing files and directories on the local filesystem.",
- author: "Anthropic",
- tags: ["files", "filesystem", "core"],
- type: "mcp" as const,
- url: "https://github.com/anthropics/mcp-filesystem",
- content: "npm install @anthropic-ai/mcp-filesystem",
- },
- {
- id: "database-mcp",
- name: "Database MCP",
- description: "Connect to and query various databases including PostgreSQL, MySQL, and SQLite.",
- author: "Community",
- tags: ["database", "sql", "data"],
- type: "mcp" as const,
- url: "https://github.com/community/mcp-database",
- content: "npm install mcp-database",
- },
- {
- id: "architect-mode",
- name: "Architect Mode",
- description: "Plan and design system architecture before implementation. Perfect for complex projects.",
- author: "Kilocode",
- tags: ["planning", "design", "architecture"],
- type: "mode" as const,
- content:
- "slug: architect\nname: Architect\nmodel: anthropic/claude-sonnet-4\nprompt: |\n You are an experienced software architect.",
- },
- {
- id: "debug-mode",
- name: "Debug Mode",
- description: "Advanced debugging capabilities with step-by-step analysis and error tracking.",
- author: "Kilocode",
- tags: ["debugging", "analysis", "troubleshooting"],
- type: "mode" as const,
- content:
- "slug: debug\nname: Debug\nmodel: anthropic/claude-sonnet-4\nprompt: |\n You are a debugging specialist.",
- },
-]
-
-export const mockModes = [
- {
- slug: "code",
- name: "Code",
- description:
- "Write, modify, or refactor code. Ideal for implementing features, fixing bugs, creating new files, or making code improvements across any programming language or framework.",
- roleDefinition:
- "You are Axon Code, a highly skilled software engineer with extensive knowledge in many programming languages, frameworks, design patterns, and best practices.",
- whenToUse: "Use this mode when you need to write, modify, or refactor code.",
- groups: ["edit", "read", "command"],
- source: "builtin" as const,
- },
- {
- slug: "architect",
- name: "Architect",
- description:
- "Plan, design, or strategize before implementation. Perfect for breaking down complex problems, creating technical specifications, designing system architecture.",
- roleDefinition: "You are an experienced software architect specializing in system design and planning.",
- whenToUse: "Use this mode when you need to plan, design, or strategize before implementation.",
- groups: ["edit", "read"],
- source: "builtin" as const,
- },
-]
-
-export const createMockMarketplaceStateManager = (activeTab: "mcp" | "mode" = "mcp") => ({
- getState: () => ({
- allItems: mockMarketplaceItems,
- organizationMcps: [],
- displayItems: mockMarketplaceItems,
- displayOrganizationMcps: [],
- isFetching: false,
- activeTab,
- filters: {
- type: "",
- search: "",
- tags: [],
- installed: "all" as const,
- },
- installedMetadata: { global: {}, project: {} },
- }),
- transition: () => Promise.resolve(),
- onStateChange: () => () => {},
- cleanup: () => {},
- handleMessage: () => Promise.resolve(),
-})
diff --git a/apps/storybook/src/mocks/ProfileValidator.ts b/apps/storybook/src/mocks/ProfileValidator.ts
deleted file mode 100644
index 74cef22cf0..0000000000
--- a/apps/storybook/src/mocks/ProfileValidator.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export class ProfileValidator {
- static isProfileAllowed(apiConfiguration: any, organizationAllowList: any): boolean {
- // Mock implementation for Storybook - always return true
- return true
- }
-}
diff --git a/apps/storybook/src/mocks/vscode.ts b/apps/storybook/src/mocks/vscode.ts
deleted file mode 100644
index 7fbb7fb967..0000000000
--- a/apps/storybook/src/mocks/vscode.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-// Minimal VSCode API mock for browser environments (Storybook)
-
-const ColorThemeKind = {
- Light: 1,
- Dark: 2,
- HighContrast: 3,
- HighContrastLight: 4,
-} as const
-
-const window = {
- get activeColorTheme() {
- try {
- // In browser/Storybook environment, detect theme from DOM
- const themeContainer = document.querySelector("[data-theme]")
- const currentTheme = themeContainer?.getAttribute("data-theme")
-
- if (currentTheme === "light") {
- return { kind: ColorThemeKind.Light }
- }
- } catch {
- // Fallback on any DOM errors
- }
-
- // Default to dark theme
- return { kind: ColorThemeKind.Dark }
- },
-}
-
-const workspace = {
- getConfiguration: () => ({
- get: (key: string) => {
- if (key === "workbench.colorTheme") {
- try {
- const themeContainer = document.querySelector("[data-theme]")
- const currentTheme = themeContainer?.getAttribute("data-theme")
-
- if (currentTheme === "light") {
- return "Light+ (default light)"
- }
- } catch {
- // Fallback on any DOM errors
- }
-
- return "Dark+ (default dark)"
- }
- return undefined
- },
- }),
-}
-
-// Export everything for both namespace and named imports
-export { ColorThemeKind, window, workspace }
-
-// Export everything as default for compatibility
-export default {
- ColorThemeKind,
- window,
- workspace,
-}
diff --git a/apps/storybook/src/utils/StoryTable.tsx b/apps/storybook/src/utils/StoryTable.tsx
deleted file mode 100644
index 42fc3d7089..0000000000
--- a/apps/storybook/src/utils/StoryTable.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import { cn } from "@/lib/utils"
-import type { ReactNode } from "react"
-
-export interface StoryTableCellProps| - {columnsWithDefault.map((col) => ( - |
- {col.label}
- |
- ))}
-
|---|---|
|
- {row.label}
- |
-
- {columnsWithDefault.map((col) => (
-
- {renderCellFn?.({ ...col.props, ...row.props })}
- |
- ))}
-
-
- ),
- ],
-} satisfies Meta
-
- )
- },
- ],
- parameters: {
- extensionState: {
- clineMessages: [], // Empty messages for empty chat view
- organizationAllowList: {
- allowAll: true,
- providers: {},
- },
- dismissedNotificationIds: [], // Add this to fix the undefined error
- currentTaskItem: null, // No current task
- taskHistory: [
- {
- id: "task-1",
- ts: BASE_TIMESTAMP - 7200000, // 2 hours ago
- task: "Create a responsive navigation component with TypeScript",
- tokensIn: 1850,
- tokensOut: 1200,
- cacheWrites: 65,
- cacheReads: 180,
- totalCost: 0.22,
- conversationStats: {
- messagesTotal: 18,
- messagesEnvironment: 4,
- messagesUser: 3,
- messagesAssistant: 11,
- },
- },
- {
- id: "task-2",
- ts: BASE_TIMESTAMP - 3600000, // 1 hour ago
- task: "Debug authentication flow and fix login issues",
- tokensIn: 950,
- tokensOut: 720,
- cacheWrites: 30,
- cacheReads: 95,
- totalCost: 0.12,
- conversationStats: {
- messagesTotal: 10,
- messagesEnvironment: 2,
- messagesUser: 2,
- messagesAssistant: 6,
- },
- },
- ],
- apiConfiguration: {
- apiProvider: "kilocode", // Set to kilocode to show notifications
- apiModelId: "claude-3-5-sonnet-20241022",
- apiKey: "mock-key",
- },
- mcpServers: [],
- allowedCommands: [],
- mode: "code",
- customModes: [],
- gitCommits: [],
- openedTabs: [{ path: "src/components/Navigation.tsx", isDirty: false }],
- filePaths: ["src/components/Navigation.tsx", "src/auth/login.ts", "package.json", "README.md"],
- telemetrySetting: "enabled", // Set to enabled to show notifications instead of telemetry banner
- },
- },
-}
diff --git a/apps/storybook/stories/Colors.stories.tsx b/apps/storybook/stories/Colors.stories.tsx
deleted file mode 100644
index fe21f9186d..0000000000
--- a/apps/storybook/stories/Colors.stories.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite"
-
-interface ColorSampleProps {
- variable: string
-}
-
-const ColorSample = ({ variable }: ColorSampleProps) => (
-
-
-
-
- {variable}
-
-
-
-
-
-
- )
-}
-
-const meta: MetaVS Code Theme Colors
-| - Color Variable - | -
|---|
-
- )
-}
-
-const meta: Meta
-
- )
-}
-
-const meta: Meta
-
- ),
- ],
-}
diff --git a/apps/storybook/stories/TelemetryBanner.stories.tsx b/apps/storybook/stories/TelemetryBanner.stories.tsx
deleted file mode 100644
index bc84f25023..0000000000
--- a/apps/storybook/stories/TelemetryBanner.stories.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite"
-import TelemetryBanner from "../../../webview-ui/src/components/common/TelemetryBanner"
-
-const meta = {
- title: "System/TelemetryBanner",
- component: TelemetryBanner,
- tags: ["autodocs"],
-} satisfies Meta
+
setCodebaseSearchResultsExpanded(!codebaseSearchResultsExpanded)}
className="cursor-pointer flex items-center justify-between px-2 py-1.5 bg-[var(--vscode-editor-background)] rounded-lg">
diff --git a/webview-ui/src/components/chat/CommandExecution.tsx b/webview-ui/src/components/chat/CommandExecution.tsx
index 53ea6161d7..aeefd5a426 100644
--- a/webview-ui/src/components/chat/CommandExecution.tsx
+++ b/webview-ui/src/components/chat/CommandExecution.tsx
@@ -18,6 +18,7 @@ import { extractPatternsFromCommand } from "../../utils/command-parser"
import { parseCommand } from "../../utils/command-validation"
import CodeBlock from "../kilocode/common/CodeBlock" // kilocode_change
import { CommandPatternSelector } from "./CommandPatternSelector"
+import { VSCodeButton } from "@vscode/webview-ui-toolkit/react"
interface CommandPattern {
pattern: string
@@ -197,22 +198,20 @@ export const CommandExecution = ({
{onPrimaryButtonClick && onSecondaryButtonClick && enableButtons && (
-
+
-
+
)}
diff --git a/webview-ui/src/components/common/MarkdownBlock.tsx b/webview-ui/src/components/common/MarkdownBlock.tsx
index 4c51af19d6..2e0073ee80 100644
--- a/webview-ui/src/components/common/MarkdownBlock.tsx
+++ b/webview-ui/src/components/common/MarkdownBlock.tsx
@@ -77,7 +77,7 @@ const StyledMarkdown = styled.div`
padding: 0.5em;
overflow-x: auto;
overflow-y: hidden;
- background-color: var(--vscode-textCodeBlock-background);
+ background-color: bg-vscode-editor-background;
border-radius: 3px;
}
diff --git a/webview-ui/src/components/history/HistoryView.tsx b/webview-ui/src/components/history/HistoryView.tsx
index d0515bfebc..ebe47194a4 100644
--- a/webview-ui/src/components/history/HistoryView.tsx
+++ b/webview-ui/src/components/history/HistoryView.tsx
@@ -4,7 +4,7 @@ import { DeleteTaskDialog } from "./DeleteTaskDialog"
import { BatchDeleteTaskDialog } from "./BatchDeleteTaskDialog"
import { Virtuoso } from "react-virtuoso"
-import { VSCodeTextField } from "@vscode/webview-ui-toolkit/react"
+import { VSCodeButton, VSCodeTextField } from "@vscode/webview-ui-toolkit/react"
import {
Button,
@@ -102,17 +102,19 @@ const HistoryView = ({ onDone }: HistoryViewProps) => {
? `${t("history:exitSelectionMode")}`
: `${t("history:enterSelectionMode")}`
}>
-
+
-
+
+ {t("history:done")}
+
diff --git a/webview-ui/src/components/kilocode/common/ButtonPrimary.tsx b/webview-ui/src/components/kilocode/common/ButtonPrimary.tsx
index 5311f61379..9e0d622757 100644
--- a/webview-ui/src/components/kilocode/common/ButtonPrimary.tsx
+++ b/webview-ui/src/components/kilocode/common/ButtonPrimary.tsx
@@ -10,7 +10,7 @@ const StyledButton = styled.button`
text-decoration: none;
font-weight: 600;
font-size: 12px;
- border-radius: 4px;
+ border-radius: 6px;
padding: 14px;
transition: all 0.2s;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
diff --git a/webview-ui/src/components/kilocode/common/CodeBlock.tsx b/webview-ui/src/components/kilocode/common/CodeBlock.tsx
index b12ac5fee4..a3d7a8fcd3 100644
--- a/webview-ui/src/components/kilocode/common/CodeBlock.tsx
+++ b/webview-ui/src/components/kilocode/common/CodeBlock.tsx
@@ -123,7 +123,7 @@ export const StyledPre = styled.div<{
pre,
code {
/* Undefined wordwrap defaults to true (pre-wrap) behavior. */
- background-color: var(--vscode-textCodeBlock-background) !important;
+ background-color: bg-vscode-editor-background !important;
white-space: ${({ wordwrap }) => (wordwrap === "false" ? "pre" : "pre-wrap")};
word-break: ${({ wordwrap }) => (wordwrap === "false" ? "normal" : "normal")};
overflow-wrap: ${({ wordwrap }) => (wordwrap === "false" ? "normal" : "break-word")};
diff --git a/webview-ui/src/components/kilocode/common/KiloCodeAuth.tsx b/webview-ui/src/components/kilocode/common/KiloCodeAuth.tsx
index 761d64e671..c4f51a774f 100644
--- a/webview-ui/src/components/kilocode/common/KiloCodeAuth.tsx
+++ b/webview-ui/src/components/kilocode/common/KiloCodeAuth.tsx
@@ -1,10 +1,10 @@
import React from "react"
-import { ButtonLink } from "./ButtonLink"
// import { ButtonSecondary } from "./ButtonSecondary"
-import Logo from "./Logo"
+import { VSCodeButtonLink } from "@/components/common/VSCodeButtonLink"
+import { useExtensionState } from "@/context/ExtensionStateContext"
import { useAppTranslation } from "@/i18n/TranslationContext"
import { getKiloCodeBackendSignUpUrl } from "../helpers"
-import { useExtensionState } from "@/context/ExtensionStateContext"
+import Logo from "./Logo"
interface KiloCodeAuthProps {
onManualConfigClick?: () => void
@@ -33,8 +33,9 @@ const KiloCodeAuth: React.FC = ({ onManualConfigClick, classN
{t("kilocode:welcome.introText2")}
-
-
+ {
if (uiKind === "Web" && onManualConfigClick) {
@@ -42,9 +43,11 @@ const KiloCodeAuth: React.FC = ({ onManualConfigClick, classN
}
}}>
{t("kilocode:welcome.ctaButton")}
-
+
- {t("kilocode:welcome.exploreMatterAI")}
+
+ {t("kilocode:welcome.exploreMatterAI")}
+
{/* {!!onManualConfigClick && (
onManualConfigClick && onManualConfigClick()}>
diff --git a/webview-ui/src/components/kilocode/rules/RuleRow.tsx b/webview-ui/src/components/kilocode/rules/RuleRow.tsx
index 115ff4c84a..e3e58fbc18 100644
--- a/webview-ui/src/components/kilocode/rules/RuleRow.tsx
+++ b/webview-ui/src/components/kilocode/rules/RuleRow.tsx
@@ -24,7 +24,7 @@ const RuleRow: React.FC<{
return (
+ {t("mcp:done")}
+
@@ -133,33 +133,33 @@ const McpView = ({ onDone, hideHeader = false }: McpViewProps) => {
gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))",
gap: "10px",
}}>
-
-
-
+
{/* kilocode_change
(({ onDone, t
currentApiConfigName,
// listApiConfigMeta,
uriScheme,
- kiloCodeWrapperProperties, // kilocode_change
settingsImportedAt,
} = extensionState
@@ -587,7 +584,6 @@ const SettingsView = forwardRef(({ onDone, t
{ id: "browser", icon: SquareMousePointer },
// { id: "checkpoints", icon: MapPinCheck },
// { id: "display", icon: Monitor }, // kilocode_change
- ...(kiloCodeWrapperProperties?.kiloCodeWrapped ? [] : [{ id: "ghost" as const, icon: Bot }]), // kilocode_change
{ id: "notifications", icon: Bell },
// { id: "contextManagement", icon: Database },
{ id: "terminal", icon: SquareTerminal },
@@ -598,7 +594,7 @@ const SettingsView = forwardRef(({ onDone, t
{ id: "mcp", icon: Server },
{ id: "about", icon: Info },
],
- [kiloCodeWrapperProperties?.kiloCodeWrapped], // kilocode_change
+ [], // kilocode_change
)
// Update target section logic to set active tab
useEffect(() => {
@@ -655,14 +651,14 @@ const SettingsView = forwardRef(({ onDone, t
? t("settings:header.saveButtonTooltip")
: t("settings:header.nothingChangedTooltip")
}>
-
+
@@ -726,9 +720,7 @@ const SettingsView = forwardRef(({ onDone, t
(({ onDone, t
setCachedStateField={setCachedStateField}
/>
)} */}
- {activeTab === "ghost" && (
-
& {
- ghostServiceSettings: GhostServiceSettings
- setCachedStateField: SetCachedStateField<"ghostServiceSettings">
-}
-
-export const GhostServiceSettingsView = ({
- ghostServiceSettings,
- setCachedStateField,
- className,
- ...props
-}: GhostServiceSettingsViewProps) => {
- const { t } = useAppTranslation()
- const { enableAutoTrigger, enableQuickInlineTaskKeybinding, enableSmartInlineTaskKeybinding } =
- ghostServiceSettings || {}
- const keybindings = useKeybindings(["axon-code.addToContextAndFocus", "axon-code.ghost.generateSuggestions"])
-
- const onEnableAutoTriggerChange = (newValue: boolean) => {
- setCachedStateField("ghostServiceSettings", {
- ...ghostServiceSettings,
- enableAutoTrigger: newValue,
- })
- }
-
- const onEnableQuickInlineTaskKeybindingChange = (newValue: boolean) => {
- setCachedStateField("ghostServiceSettings", {
- ...ghostServiceSettings,
- enableQuickInlineTaskKeybinding: newValue,
- })
- }
-
- const onEnableSmartInlineTaskKeybindingChange = (newValue: boolean) => {
- setCachedStateField("ghostServiceSettings", {
- ...ghostServiceSettings,
- enableSmartInlineTaskKeybinding: newValue,
- })
- }
-
- const openGlobalKeybindings = (filter?: string) => {
- vscode.postMessage({ type: "openGlobalKeybindings", text: filter })
- }
-
- return (
-
+
Manage/Upgrade plan
diff --git a/webview-ui/src/components/mcp/McpView.tsx b/webview-ui/src/components/mcp/McpView.tsx
index 37fe0c27e7..b5c21a5dbc 100644
--- a/webview-ui/src/components/mcp/McpView.tsx
+++ b/webview-ui/src/components/mcp/McpView.tsx
@@ -1,5 +1,3 @@
-import React, { useState } from "react"
-import { Trans } from "react-i18next"
import {
VSCodeButton,
VSCodeCheckbox,
@@ -8,29 +6,29 @@ import {
VSCodePanelTab,
VSCodePanelView,
} from "@vscode/webview-ui-toolkit/react"
+import React, { useState } from "react"
+import { Trans } from "react-i18next"
import { McpServer } from "@roo/mcp"
-import { vscode } from "@src/utils/vscode"
-import { useExtensionState } from "@src/context/ExtensionStateContext"
-import { useAppTranslation } from "@src/i18n/TranslationContext"
import {
- Button,
Dialog,
DialogContent,
- DialogHeader,
- DialogTitle,
DialogDescription,
DialogFooter,
+ DialogHeader,
+ DialogTitle,
ToggleSwitch,
- // StandardTooltip, // kilocode_change: not used
} from "@src/components/ui"
+import { useExtensionState } from "@src/context/ExtensionStateContext"
+import { useAppTranslation } from "@src/i18n/TranslationContext"
import { buildDocLink } from "@src/utils/docLinks"
+import { vscode } from "@src/utils/vscode"
import { Tab, TabContent, TabHeader } from "../common/Tab"
-import McpToolRow from "./McpToolRow"
import McpResourceRow from "./McpResourceRow"
+import McpToolRow from "./McpToolRow"
// import McpEnabledToggle from "./McpEnabledToggle" // kilocode_change not used
import { McpErrorRow } from "./McpErrorRow"
@@ -56,7 +54,9 @@ const McpView = ({ onDone, hideHeader = false }: McpViewProps) => {
{/* kilocode_change: display header conditionally */}
-
-
-
-
-
-
- )
-}
diff --git a/webview-ui/src/components/kilocode/settings/__tests__/GhostServiceSettings.spec.tsx b/webview-ui/src/components/kilocode/settings/__tests__/GhostServiceSettings.spec.tsx
deleted file mode 100644
index 5036b32d25..0000000000
--- a/webview-ui/src/components/kilocode/settings/__tests__/GhostServiceSettings.spec.tsx
+++ /dev/null
@@ -1,247 +0,0 @@
-import { render, screen, fireEvent } from "@testing-library/react"
-import { describe, expect, it, vi, beforeEach } from "vitest"
-import { GhostServiceSettingsView } from "../GhostServiceSettings"
-import { GhostServiceSettings } from "@roo-code/types"
-import React from "react"
-
-// Mock react-i18next
-vi.mock("react-i18next", () => ({
- Trans: ({ i18nKey, children }: any) => {i18nKey || children},
- useTranslation: () => ({
- t: (key: string) => key,
- }),
- initReactI18next: {
- type: "3rdParty",
- init: () => {},
- },
-}))
-
-vi.mock("@/i18n/TranslationContext", () => ({
- useAppTranslation: () => ({
- t: (key: string) => key,
- }),
- TranslationProvider: ({ children }: any) =>
-
- {t("kilocode:ghost.title")}
-
-
-
-
-
-
-
- {t("kilocode:ghost.settings.triggers")}
-
-
- {t("kilocode:ghost.settings.enableAutoTrigger.label")}
-
-
-
-
-
-
-
-
- {t("kilocode:ghost.settings.enableQuickInlineTaskKeybinding.label", {
- keybinding: keybindings["axon-code.addToContextAndFocus"],
- })}
-
-
-
-
- openGlobalKeybindings("axon-code.addToContextAndFocus")}
- className="text-[var(--vscode-list-highlightForeground)] hover:underline cursor-pointer">
- ),
- }}
- />
-
-
-
-
- {t("kilocode:ghost.settings.enableSmartInlineTaskKeybinding.label", {
- keybinding: keybindings["axon-code.ghost.generateSuggestions"],
- })}
-
-
-
- {/*
-
- openGlobalKeybindings("axon-code.ghost.generateSuggestions")}
- className="text-[var(--vscode-list-highlightForeground)] hover:underline cursor-pointer">
- ),
- }}
- />
-
-
-
*/}
-
- {/*
-
- {t("kilocode:ghost.settings.model")}
-
-
*/}
-
- {provider && model ? (
- <>
-
-
- {t("kilocode:ghost.settings.provider")}:{" "}
- {provider}
-
-
- {t("kilocode:ghost.settings.model")}:{" "}
- {model}
-
-
- ) : (
-
- {t("kilocode:ghost.settings.noModelConfigured")}
-
- )}
- {children}
,
-}))
-
-// Mock lucide-react icons
-vi.mock("lucide-react", () => ({
- Bot: ({ className }: any) => Bot Icon,
- Zap: ({ className }: any) => Zap Icon,
-}))
-
-// Mock cn utility
-vi.mock("@/lib/utils", () => ({
- cn: (...classes: any[]) => classes.filter(Boolean).join(" "),
-}))
-
-// Mock the vscode module
-vi.mock("@/utils/vscode", () => ({
- vscode: {
- postMessage: vi.fn(),
- },
-}))
-
-// Mock ControlledCheckbox
-vi.mock("../../common/ControlledCheckbox", () => ({
- ControlledCheckbox: ({ children, checked, onChange }: any) => (
-
- ),
-}))
-
-// Mock the UI components
-vi.mock("@src/components/ui", () => ({
- Slider: ({ value, onValueChange, disabled }: any) => (
- onValueChange?.([parseInt(e.target.value)])}
- disabled={disabled}
- />
- ),
-}))
-
-// Mock the settings components
-vi.mock("../../settings/SectionHeader", () => ({
- SectionHeader: ({ children }: any) => {children}
,
-}))
-
-vi.mock("../../settings/Section", () => ({
- Section: ({ children }: any) => {children}
,
-}))
-
-const defaultGhostServiceSettings: GhostServiceSettings = {
- enableAutoTrigger: false,
- enableQuickInlineTaskKeybinding: false,
- enableSmartInlineTaskKeybinding: false,
- provider: "openrouter",
- model: "openai/gpt-4o-mini",
-}
-
-const renderComponent = (props = {}) => {
- const defaultProps = {
- ghostServiceSettings: defaultGhostServiceSettings,
- setCachedStateField: vi.fn(),
- ...props,
- }
-
- return render({t("mcp:title")}
- +
@@ -562,12 +560,12 @@ const ServerRow = ({ server, alwaysAllowMcp }: { server: McpServer; alwaysAllowM
-
-
+
diff --git a/webview-ui/src/components/memories/MemoriesView.tsx b/webview-ui/src/components/memories/MemoriesView.tsx
index db2b9b02c2..15ee9db392 100644
--- a/webview-ui/src/components/memories/MemoriesView.tsx
+++ b/webview-ui/src/components/memories/MemoriesView.tsx
@@ -1,5 +1,5 @@
import React, { memo, useState, useEffect } from "react"
-import { VSCodeTextField } from "@vscode/webview-ui-toolkit/react"
+import { VSCodeButton, VSCodeTextField } from "@vscode/webview-ui-toolkit/react"
import { Button } from "@/components/ui"
import { useAppTranslation } from "@/i18n/TranslationContext"
import { Tab, TabHeader, TabContent } from "../common/Tab"
@@ -86,7 +86,9 @@ const MemoriesView = ({ onDone }: MemoriesViewProps) => {
{t("memories:title")}
-
+
+ {t("memories:done")}
+
{id === "mcp" ? t(`kilocode:settings.sections.mcp`) - : id === "ghost" - ? t(`kilocode:ghost.title`) - : t(`settings:sections.${id}`)} + : t(`settings:sections.${id}`)}
@@ -854,12 +846,6 @@ const SettingsView = forwardRef