feat: add font size setting for webview UI

- Add fontSize config option (range: 10-24, default: 13)
- Add slider in Settings > Display tab
- Apply font size via CSS variables
- Persist setting in global config

Closes #441

Author: Ashwinhegde19

packages/kilo-vscode/src/services/cli-backend/types.ts

@@ -318,5 +318,6 @@ export interface Config {
   compaction?: CompactionConfig
   tools?: Record<string, boolean>
   layout?: "auto" | "stretch"
+  fontSize?: number
   experimental?: ExperimentalConfig
 }

packages/kilo-vscode/webview-ui/src/App.tsx

@@ -1,4 +1,4 @@
-import { Component, createSignal, createMemo, Switch, Match, onMount, onCleanup } from "solid-js"
+import { Component, createSignal, createMemo, Switch, Match, onMount, onCleanup, createEffect } from "solid-js"
 import { ThemeProvider } from "@kilocode/kilo-ui/theme"
 import { DialogProvider } from "@kilocode/kilo-ui/context/dialog"
 import { MarkedProvider } from "@kilocode/kilo-ui/context/marked"
@@ -13,7 +13,7 @@ import ProfileView from "./components/ProfileView"
 import { VSCodeProvider } from "./context/vscode"
 import { ServerProvider, useServer } from "./context/server"
 import { ProviderProvider } from "./context/provider"
-import { ConfigProvider } from "./context/config"
+import { ConfigProvider, useConfig } from "./context/config"
 import { SessionProvider, useSession } from "./context/session"
 import { LanguageProvider } from "./context/language"
 import { ChatView } from "./components/chat"
@@ -95,6 +95,19 @@ const AppContent: Component = () => {
   const [currentView, setCurrentView] = createSignal<ViewType>("newTask")
   const session = useSession()
   const server = useServer()
+  const { config } = useConfig()
+
+  const fontSize = createMemo(() => config().fontSize ?? 13)
+
+  // Apply font size on load and when it changes
+  createEffect(() => {
+    const size = fontSize()
+    const root = document.documentElement
+    root.style.setProperty("--font-size-small", `${size}px`)
+    root.style.setProperty("--font-size-base", `${size + 1}px`)
+    root.style.setProperty("--font-size-large", `${size + 3}px`)
+    root.style.setProperty("--font-size-x-large", `${size + 7}px`)
+  })
 
   const handleViewAction = (action: string) => {
     switch (action) {

packages/kilo-vscode/webview-ui/src/components/settings/DisplayTab.tsx

@@ -39,7 +39,6 @@ const DisplayTab: Component = () => {
         <SettingsRow
           title={language.t("settings.display.layout.title")}
           description={language.t("settings.display.layout.description")}
-          last
         >
           <Select
             options={LAYOUT_OPTIONS}
@@ -52,6 +51,30 @@ const DisplayTab: Component = () => {
             triggerVariant="settings"
           />
         </SettingsRow>
+
+        <SettingsRow
+          title={language.t("settings.display.fontSize.title")}
+          description={language.t("settings.display.fontSize.description")}
+          last
+        >
+          <div style={{ display: "flex", "align-items": "center", gap: "8px", width: "160px" }}>
+            <input
+              type="range"
+              min="10"
+              max="24"
+              step="1"
+              value={config().fontSize ?? 13}
+              onInput={(e) => {
+                const value = parseInt(e.currentTarget.value, 10)
+                if (!isNaN(value) && value >= 10 && value <= 24) {
+                  updateConfig({ fontSize: value })
+                }
+              }}
+              style={{ flex: 1 }}
+            />
+            <span style={{ "min-width": "40px", "text-align": "right" }}>{config().fontSize ?? 13}px</span>
+          </div>
+        </SettingsRow>
       </Card>
     </div>
   )

packages/kilo-vscode/webview-ui/src/i18n/en.ts

@@ -972,6 +972,8 @@ export const dict = {
   "settings.display.layout.description": "Layout mode for the chat interface",
   "settings.display.layout.auto": "Auto",
   "settings.display.layout.stretch": "Stretch",
+  "settings.display.fontSize.title": "Font size",
+  "settings.display.fontSize.description": "Adjust the font size for the webview UI (default: 13px)",
 
   "settings.providers.defaultModel.title": "Default Model",
   "settings.providers.defaultModel.description": "Primary model for conversations",

packages/kilo-vscode/webview-ui/src/types/messages.ts

@@ -295,6 +295,7 @@ export interface Config {
   compaction?: CompactionConfig
   tools?: Record<string, boolean>
   layout?: "auto" | "stretch"
+  fontSize?: number
   experimental?: ExperimentalConfig
 }
 

packages/opencode/src/config/config.ts

@@ -1248,6 +1248,7 @@ export namespace Config {
         ),
       instructions: z.array(z.string()).optional().describe("Additional instruction files or patterns to include"),
       layout: Layout.optional().describe("@deprecated Always uses stretch layout."),
+      fontSize: z.number().min(10).max(24).optional().describe("Custom font size for the webview UI (default: 13)"), // kilocode_change
       permission: Permission.optional(),
       tools: z.record(z.string(), z.boolean()).optional(),
       enterprise: z