diff --git a/packages/kilo-vscode/docs/ui-implementation-plan.md b/packages/kilo-vscode/docs/ui-implementation-plan.md index 747d73ccd..b4ff20671 100644 --- a/packages/kilo-vscode/docs/ui-implementation-plan.md +++ b/packages/kilo-vscode/docs/ui-implementation-plan.md @@ -737,7 +737,7 @@ Each phase has specific acceptance criteria (listed above). The general verifica | Session history | List renders, selection works, navigation back to chat | | Login flow | Device auth card renders, QR code displays, success/error states | | Theme switching | Change VS Code theme → webview updates automatically | -| Sidebar ↔ tab | Both webview hosts render identically | +| Sidebar ↔ tab | Both webview hosts render identically | | Markdown content | Headers, lists, code blocks, links render correctly | | Long conversations | Auto-scroll works, performance is acceptable | diff --git a/packages/kilo-vscode/webview-ui/src/components/DeviceAuthCard.tsx b/packages/kilo-vscode/webview-ui/src/components/DeviceAuthCard.tsx index 97746cf80..13b2a89a0 100644 --- a/packages/kilo-vscode/webview-ui/src/components/DeviceAuthCard.tsx +++ b/packages/kilo-vscode/webview-ui/src/components/DeviceAuthCard.tsx @@ -4,6 +4,7 @@ import { Card } from "@kilocode/kilo-ui/card" import { Spinner } from "@kilocode/kilo-ui/spinner" import { showToast } from "@kilocode/kilo-ui/toast" import { useVSCode } from "../context/vscode" +import { useLanguage } from "../context/language" import { generateQRCode } from "../utils/qrcode" import type { DeviceAuthStatus } from "../types/messages" @@ -25,6 +26,7 @@ const formatTime = (seconds: number): string => { const DeviceAuthCard: Component = (props) => { const vscode = useVSCode() + const language = useLanguage() const [timeRemaining, setTimeRemaining] = createSignal(props.expiresIn ?? 900) const [qrDataUrl, setQrDataUrl] = createSignal("") @@ -51,14 +53,14 @@ const DeviceAuthCard: Component = (props) => { const handleCopyUrl = () => { if (props.verificationUrl) { navigator.clipboard.writeText(props.verificationUrl) - showToast({ variant: "success", title: "URL copied to clipboard" }) + showToast({ variant: "success", title: language.t("deviceAuth.toast.urlCopied") }) } } const handleCopyCode = () => { if (props.code) { navigator.clipboard.writeText(props.code) - showToast({ variant: "success", title: "Code copied to clipboard" }) + showToast({ variant: "success", title: language.t("deviceAuth.toast.codeCopied") }) } } @@ -75,7 +77,9 @@ const DeviceAuthCard: Component = (props) => {
- Starting login... + + {language.t("deviceAuth.status.initiating")} +
@@ -92,7 +96,7 @@ const DeviceAuthCard: Component = (props) => { "text-align": "center", }} > - Sign in to Kilo Code + {language.t("deviceAuth.title")} {/* Step 1: URL */} @@ -107,7 +111,7 @@ const DeviceAuthCard: Component = (props) => { "letter-spacing": "0.5px", }} > - Step 1: Open this URL + {language.t("deviceAuth.step1")}

= (props) => { > {props.verificationUrl}
- @@ -152,7 +161,7 @@ const DeviceAuthCard: Component = (props) => { > QR Code = (props) => { "letter-spacing": "0.5px", }} > - Step 2: Enter this code + {language.t("deviceAuth.step2")}

= (props) => { "text-align": "center", cursor: "pointer", }} - title="Click to copy" + title={language.t("deviceAuth.action.clickToCopy")} > = (props) => { margin: "4px 0 0 0", }} > - Click to copy + {language.t("deviceAuth.action.clickToCopy")}

@@ -230,13 +239,13 @@ const DeviceAuthCard: Component = (props) => { color: "var(--vscode-descriptionForeground)", }} > - Waiting for authorization... ({formatTime(timeRemaining())}) + {language.t("deviceAuth.status.waiting")} ({formatTime(timeRemaining())}) {/* Cancel button */} @@ -254,7 +263,7 @@ const DeviceAuthCard: Component = (props) => { margin: "8px 0 0 0", }} > - Login successful! + {language.t("deviceAuth.status.success")}

@@ -272,10 +281,10 @@ const DeviceAuthCard: Component = (props) => { margin: "8px 0 12px 0", }} > - {props.error || "Login failed"} + {props.error || language.t("deviceAuth.status.failed")}

@@ -292,10 +301,10 @@ const DeviceAuthCard: Component = (props) => { margin: "0 0 12px 0", }} > - Login cancelled + {language.t("deviceAuth.status.cancelled")}

diff --git a/packages/kilo-vscode/webview-ui/src/components/ProfileView.tsx b/packages/kilo-vscode/webview-ui/src/components/ProfileView.tsx index 73244c987..f52643532 100644 --- a/packages/kilo-vscode/webview-ui/src/components/ProfileView.tsx +++ b/packages/kilo-vscode/webview-ui/src/components/ProfileView.tsx @@ -3,6 +3,7 @@ import { Button } from "@kilocode/kilo-ui/button" import { Card } from "@kilocode/kilo-ui/card" import { Tooltip } from "@kilocode/kilo-ui/tooltip" import { useVSCode } from "../context/vscode" +import { useLanguage } from "../context/language" import DeviceAuthCard from "./DeviceAuthCard" import type { ProfileData, DeviceAuthState } from "../types/messages" @@ -20,6 +21,7 @@ const formatBalance = (amount: number): string => { const ProfileView: Component = (props) => { const vscode = useVSCode() + const language = useLanguage() const handleLogin = () => { props.onLogin() @@ -52,7 +54,7 @@ const ProfileView: Component = (props) => { color: "var(--vscode-foreground)", }} > - Profile + {language.t("profile.title")}
= (props) => { margin: "0 0 8px 0", }} > - Not logged in + {language.t("profile.notLoggedIn")}

} @@ -144,7 +146,7 @@ const ProfileView: Component = (props) => { margin: "0 0 4px 0", }} > - Balance + {language.t("profile.balance.title")}

= (props) => { {formatBalance(balance().balance)}

- + @@ -169,14 +171,14 @@ const ProfileView: Component = (props) => { {/* Action buttons */}
diff --git a/packages/kilo-vscode/webview-ui/src/components/Settings.tsx b/packages/kilo-vscode/webview-ui/src/components/Settings.tsx index 8c5b1a869..f1095ce4e 100644 --- a/packages/kilo-vscode/webview-ui/src/components/Settings.tsx +++ b/packages/kilo-vscode/webview-ui/src/components/Settings.tsx @@ -51,119 +51,119 @@ const Settings: Component = (props) => { {/* Settings tabs */} - Configuration + {language.t("settings.section.configuration")} - Providers + {language.t("settings.providers.title")} - Agent Behaviour + {language.t("settings.agentBehaviour.title")} - Auto-Approve + {language.t("settings.autoApprove.title")} - Browser + {language.t("settings.browser.title")} - Checkpoints + {language.t("settings.checkpoints.title")} - Display + {language.t("settings.display.title")} - Autocomplete + {language.t("settings.autocomplete.title")} - Notifications + {language.t("settings.notifications.title")} - Context + {language.t("settings.context.title")} - Terminal + {language.t("settings.terminal.title")} - Prompts + {language.t("settings.prompts.title")} - Experimental + {language.t("settings.experimental.title")} - Language + {language.t("settings.language.title")} - About Kilo Code + {language.t("settings.aboutKiloCode.title")} -

Providers

+

{language.t("settings.providers.title")}

-

Agent Behaviour

+

{language.t("settings.agentBehaviour.title")}

-

Auto-Approve

+

{language.t("settings.autoApprove.title")}

-

Browser

+

{language.t("settings.browser.title")}

-

Checkpoints

+

{language.t("settings.checkpoints.title")}

-

Display

+

{language.t("settings.display.title")}

-

Autocomplete

+

{language.t("settings.autocomplete.title")}

-

Notifications

+

{language.t("settings.notifications.title")}

-

Context

+

{language.t("settings.context.title")}

-

Terminal

+

{language.t("settings.terminal.title")}

-

Prompts

+

{language.t("settings.prompts.title")}

-

Experimental

+

{language.t("settings.experimental.title")}

-

Language

+

{language.t("settings.language.title")}

-

About Kilo Code

+

{language.t("settings.aboutKiloCode.title")}

diff --git a/packages/kilo-vscode/webview-ui/src/components/chat/MessageList.tsx b/packages/kilo-vscode/webview-ui/src/components/chat/MessageList.tsx index af685d869..037a85438 100644 --- a/packages/kilo-vscode/webview-ui/src/components/chat/MessageList.tsx +++ b/packages/kilo-vscode/webview-ui/src/components/chat/MessageList.tsx @@ -5,10 +5,12 @@ import { Component, For, Show, createSignal, createEffect, onCleanup } from "solid-js" import { useSession } from "../../context/session" +import { useLanguage } from "../../context/language" import { Message } from "./Message" export const MessageList: Component = () => { const session = useSession() + const language = useLanguage() let containerRef: HTMLDivElement | undefined const [isAtBottom, setIsAtBottom] = createSignal(true) @@ -64,14 +66,18 @@ export const MessageList: Component = () => {
-

Start a conversation by typing a message below.

+

{language.t("session.messages.empty")}

{(message) => }
- diff --git a/packages/kilo-vscode/webview-ui/src/components/chat/ModelSelector.tsx b/packages/kilo-vscode/webview-ui/src/components/chat/ModelSelector.tsx index a0fc93608..a7b217284 100644 --- a/packages/kilo-vscode/webview-ui/src/components/chat/ModelSelector.tsx +++ b/packages/kilo-vscode/webview-ui/src/components/chat/ModelSelector.tsx @@ -9,6 +9,7 @@ import { Popover } from "@kilocode/kilo-ui/popover" import { Button } from "@kilocode/kilo-ui/button" import { useProvider, EnrichedModel } from "../../context/provider" import { useSession } from "../../context/session" +import { useLanguage } from "../../context/language" interface ModelGroup { providerName: string @@ -28,6 +29,7 @@ function providerSortKey(providerID: string): number { export const ModelSelector: Component = () => { const { connected, models, findModel } = useProvider() const session = useSession() + const language = useLanguage() const selectedModel = () => findModel(session.selected()) const [open, setOpen] = createSignal(false) @@ -157,7 +159,7 @@ export const ModelSelector: Component = () => { if (raw?.providerID && raw?.modelID) { return raw.providerID === KILO_GATEWAY_ID ? raw.modelID : `${raw.providerID} / ${raw.modelID}` } - return hasProviders() ? "Select model" : "No providers" + return hasProviders() ? language.t("dialog.model.select.title") : language.t("dialog.model.noProviders") } return ( @@ -188,7 +190,7 @@ export const ModelSelector: Component = () => { ref={searchRef} class="model-selector-search" type="text" - placeholder="Search models..." + placeholder={language.t("dialog.model.search.placeholder")} value={search()} onInput={(e) => setSearch(e.currentTarget.value)} /> @@ -196,7 +198,7 @@ export const ModelSelector: Component = () => {
-
No models found
+
{language.t("dialog.model.empty")}
@@ -214,7 +216,7 @@ export const ModelSelector: Component = () => { > {model.name} - free + {language.t("model.tag.free")}
)} diff --git a/packages/kilo-vscode/webview-ui/src/components/chat/PermissionDialog.tsx b/packages/kilo-vscode/webview-ui/src/components/chat/PermissionDialog.tsx index 5b01b2110..3b517a1d0 100644 --- a/packages/kilo-vscode/webview-ui/src/components/chat/PermissionDialog.tsx +++ b/packages/kilo-vscode/webview-ui/src/components/chat/PermissionDialog.tsx @@ -13,6 +13,7 @@ import { Button } from "@kilocode/kilo-ui/button" import { BasicTool } from "@kilocode/kilo-ui/basic-tool" import { useDialog } from "@kilocode/kilo-ui/context/dialog" import { useSession } from "../../context/session" +import { useLanguage } from "../../context/language" import type { PermissionRequest } from "../../types/messages" interface PermissionItemProps { @@ -21,6 +22,7 @@ interface PermissionItemProps { const PermissionItem: Component = (props) => { const session = useSession() + const language = useLanguage() const handleResponse = (response: "once" | "always" | "reject") => { session.respondToPermission(props.permission.id, response) @@ -45,13 +47,13 @@ const PermissionItem: Component = (props) => {
@@ -62,6 +64,7 @@ const PermissionItem: Component = (props) => { export const PermissionDialog: Component = () => { const session = useSession() const dialog = useDialog() + const language = useLanguage() const permissions = () => session.permissions() const hasPermissions = () => permissions().length > 0 @@ -73,7 +76,7 @@ export const PermissionDialog: Component = () => { on(hasPermissions, (has) => { if (has) { dialog.show(() => ( - }> + }> {(permission) => } )) diff --git a/packages/kilo-vscode/webview-ui/src/components/chat/PromptInput.tsx b/packages/kilo-vscode/webview-ui/src/components/chat/PromptInput.tsx index 07cc8e6ba..c700f93ef 100644 --- a/packages/kilo-vscode/webview-ui/src/components/chat/PromptInput.tsx +++ b/packages/kilo-vscode/webview-ui/src/components/chat/PromptInput.tsx @@ -69,7 +69,9 @@ export const PromptInput: Component = () => {