diff --git a/.changeset/neat-worktree-dialogs.md b/.changeset/neat-worktree-dialogs.md
new file mode 100644
index 00000000000..b57f336d6b2
--- /dev/null
+++ b/.changeset/neat-worktree-dialogs.md
@@ -0,0 +1,5 @@
+---
+"@kilocode/kilo-console": patch
+---
+
+Replace native worktree prompts with consistent dialogs for creating, renaming, resetting, and deleting worktrees.
diff --git a/.changeset/resize-console-context.md b/.changeset/resize-console-context.md
new file mode 100644
index 00000000000..bb9dca3f1b8
--- /dev/null
+++ b/.changeset/resize-console-context.md
@@ -0,0 +1,6 @@
+---
+"@kilocode/kilo-console": patch
+"@kilocode/cli": patch
+---
+
+Configure the project context sidebar width and default diff layout from Global Settings.
diff --git a/.changeset/rich-worktree-review.md b/.changeset/rich-worktree-review.md
new file mode 100644
index 00000000000..bffd4bb44d4
--- /dev/null
+++ b/.changeset/rich-worktree-review.md
@@ -0,0 +1,5 @@
+---
+"@kilocode/kilo-console": patch
+---
+
+Review worktree changes in a richer panel with per-file stats and syntax-highlighted diffs.
diff --git a/packages/kilo-console/src/client.ts b/packages/kilo-console/src/client.ts
index 9a3eb364893..adca1648a7b 100644
--- a/packages/kilo-console/src/client.ts
+++ b/packages/kilo-console/src/client.ts
@@ -52,6 +52,7 @@ export type ProjectConsoleQuery = ProjectQuery & {
 
 export type ProjectConsoleSnapshot = {
   project: ProjectItem
+  config: EffectiveConfig
   vcs: VcsInfo
   worktrees: string[]
   terminals: ProjectTerminalItem[]
@@ -439,7 +440,8 @@ export async function loadProjectConsole(input: ProjectConsoleQuery): Promise<Pr
   const project = await resolved(input)
   const query = { url: input.url, dir: project.worktree }
   const sdk = client(query)
-  const [vcs, worktrees] = await Promise.all([
+  const [config, vcs, worktrees] = await Promise.all([
+    sdk.config.overlay({ scope: "global" }),
     sdk.vcs.get({ directory: query.dir }),
     sdk.worktree.list({ directory: query.dir }),
   ])
@@ -450,6 +452,7 @@ export async function loadProjectConsole(input: ProjectConsoleQuery): Promise<Pr
 
   return {
     project,
+    config: demand("Config", config).effective,
     vcs: demand("VCS", vcs),
     worktrees: dirs,
     terminals: terminals.flat(),
diff --git a/packages/kilo-console/src/components/ConfirmDialog.tsx b/packages/kilo-console/src/components/ConfirmDialog.tsx
index 6fba52e63a8..2ed84f88b9a 100644
--- a/packages/kilo-console/src/components/ConfirmDialog.tsx
+++ b/packages/kilo-console/src/components/ConfirmDialog.tsx
@@ -1,4 +1,4 @@
-import { Show } from "solid-js"
+import { createUniqueId, Show } from "solid-js"
 import { Button } from "@kilocode/kilo-web-ui/button"
 import { Icon } from "@kilocode/kilo-web-ui/icon"
 
@@ -14,21 +14,31 @@ type Props = {
 }
 
 export function ConfirmDialog(props: Props) {
+  const id = createUniqueId()
+  const title = `${id}-title`
+  const message = `${id}-message`
+
   return (
     <Show when={props.open}>
-      <div class="confirm-scrim">
-        <section class="confirm-dialog" role="alertdialog" aria-modal="true" aria-labelledby="confirm-title">
+      <div class="confirm-scrim" onKeyDown={(event) => event.key === "Escape" && props.onCancel()}>
+        <section
+          class="confirm-dialog"
+          role="alertdialog"
+          aria-modal="true"
+          aria-labelledby={title}
+          aria-describedby={props.message ? message : undefined}
+        >
           <div class="confirm-body">
             <div class="confirm-icon" aria-hidden="true">
               <Icon name="warning" />
             </div>
             <div>
-              <h2 id="confirm-title">{props.title}</h2>
-              <Show when={props.message}>{(text) => <p>{text()}</p>}</Show>
+              <h2 id={title}>{props.title}</h2>
+              <Show when={props.message}>{(text) => <p id={message}>{text()}</p>}</Show>
             </div>
           </div>
           <footer class="confirm-actions">
-            <Button variant="ghost" disabled={props.busy} onClick={props.onCancel}>
+            <Button variant="ghost" disabled={props.busy} onClick={props.onCancel} autofocus>
               {props.cancel ?? "Cancel"}
             </Button>
             <Button variant="primary" disabled={props.busy} onClick={props.onConfirm}>
diff --git a/packages/kilo-console/src/components/PromptDialog.tsx b/packages/kilo-console/src/components/PromptDialog.tsx
new file mode 100644
index 00000000000..dc1729e50ce
--- /dev/null
+++ b/packages/kilo-console/src/components/PromptDialog.tsx
@@ -0,0 +1,73 @@
+import { Button } from "@kilocode/kilo-web-ui/button"
+import { Input } from "@kilocode/kilo-web-ui/input"
+import { createUniqueId, Show } from "solid-js"
+
+type Props = {
+  open: boolean
+  title: string
+  message?: string
+  label: string
+  value: string
+  placeholder?: string
+  confirm?: string
+  cancel?: string
+  busy?: boolean
+  onInput: (value: string) => void
+  onCancel: () => void
+  onConfirm: () => void
+}
+
+export function PromptDialog(props: Props) {
+  const id = createUniqueId()
+  const title = `${id}-title`
+  const message = `${id}-message`
+  const input = `${id}-input`
+
+  return (
+    <Show when={props.open}>
+      <div class="confirm-scrim" onKeyDown={(event) => event.key === "Escape" && props.onCancel()}>
+        <section
+          class="confirm-dialog prompt-dialog"
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby={title}
+          aria-describedby={props.message ? message : undefined}
+        >
+          <form
+            class="prompt-form"
+            onSubmit={(event) => {
+              event.preventDefault()
+              props.onConfirm()
+            }}
+          >
+            <div class="prompt-body">
+              <div class="prompt-copy">
+                <h2 id={title}>{props.title}</h2>
+                <Show when={props.message}>{(text) => <p id={message}>{text()}</p>}</Show>
+              </div>
+              <label class="prompt-field" for={input}>
+                <span>{props.label}</span>
+                <Input
+                  id={input}
+                  value={props.value}
+                  placeholder={props.placeholder}
+                  disabled={props.busy}
+                  autofocus
+                  onInput={(event) => props.onInput(event.currentTarget.value)}
+                />
+              </label>
+            </div>
+            <footer class="confirm-actions">
+              <Button type="button" variant="ghost" disabled={props.busy} onClick={props.onCancel}>
+                {props.cancel ?? "Cancel"}
+              </Button>
+              <Button type="submit" variant="primary" disabled={props.busy}>
+                {props.confirm ?? "Confirm"}
+              </Button>
+            </footer>
+          </form>
+        </section>
+      </div>
+    </Show>
+  )
+}
diff --git a/packages/kilo-console/src/layouts/ConfigLayout.tsx b/packages/kilo-console/src/layouts/ConfigLayout.tsx
index 8f779b93283..be9be5043ef 100644
--- a/packages/kilo-console/src/layouts/ConfigLayout.tsx
+++ b/packages/kilo-console/src/layouts/ConfigLayout.tsx
@@ -30,13 +30,6 @@ function ConfigContent(props: { children?: JSX.Element }) {
             </Card>
           )}
         </Show>
-        <Show when={ctx.saving()}>
-          {(item) => (
-            <Card class="banner" variant="info">
-              {item()}...
-            </Card>
-          )}
-        </Show>
         <Show when={ctx.data.error}>
           <Card class="banner" variant="error">
             <strong>Dashboard request failed</strong>
diff --git a/packages/kilo-console/src/routes/config/ConfigSidebar.tsx b/packages/kilo-console/src/routes/config/ConfigSidebar.tsx
index 0a3a9c31cee..c6a282ec597 100644
--- a/packages/kilo-console/src/routes/config/ConfigSidebar.tsx
+++ b/packages/kilo-console/src/routes/config/ConfigSidebar.tsx
@@ -32,6 +32,7 @@ export function ConfigSidebar() {
   const href = (path: string) => `${path === "/" ? base() : `${base()}${path}`}${loc.search}`
   const current = (path: string) => path === active() || (path !== "/" && active().startsWith(`${path}/`))
   const group = (item: ConfigNode): item is ConfigGroup => "items" in item
+  const navigation = createMemo(() => configNav.filter((item) => !project() || !group(item) || !item.globalOnly))
 
   return (
     <aside class="config-sidebar" aria-label="Configuration sections">
@@ -42,7 +43,7 @@ export function ConfigSidebar() {
         </span>
       </div>
       <nav class="config-options">
-        <For each={configNav}>
+        <For each={navigation()}>
           {(item) => {
             if (!group(item)) {
               return (
diff --git a/packages/kilo-console/src/routes/config/ConsoleUiRoute.tsx b/packages/kilo-console/src/routes/config/ConsoleUiRoute.tsx
new file mode 100644
index 00000000000..d972686f7c5
--- /dev/null
+++ b/packages/kilo-console/src/routes/config/ConsoleUiRoute.tsx
@@ -0,0 +1,100 @@
+import { Show } from "solid-js"
+import { Button } from "@kilocode/kilo-web-ui/button"
+import { Card } from "@kilocode/kilo-web-ui/card"
+import { Spinner } from "@kilocode/kilo-web-ui/spinner"
+import { CustomSelect, type SelectOption } from "../../components/CustomSelect"
+import { ConfigPage } from "./ConfigPage"
+import {
+  MAX_CONTEXT_SIDEBAR_WIDTH,
+  MIN_CONTEXT_SIDEBAR_WIDTH,
+  type ConsoleDiffStyle,
+  useConsoleUiSettings,
+} from "./state/console"
+
+const styles = [
+  { value: "unified", label: "Unified" },
+  { value: "split", label: "Split" },
+] satisfies SelectOption<ConsoleDiffStyle>[]
+
+export function ConsoleUiRoute() {
+  const state = useConsoleUiSettings()
+
+  return (
+    <ConfigPage
+      title="Console UI"
+      description="Configure the local Kilo Console interface. These preferences are saved in your user config."
+      actions={
+        <>
+          <Show when={state.configured()}>
+            <Button variant="secondary" disabled={Boolean(state.ctx.saving())} onClick={state.reset}>
+              Use default
+            </Button>
+          </Show>
+          <Button
+            variant="primary"
+            disabled={Boolean(state.ctx.saving()) || !state.dirty()}
+            aria-busy={Boolean(state.ctx.saving())}
+            onClick={state.save}
+          >
+            <Show when={state.ctx.saving()}>
+              <Spinner />
+            </Show>
+            Save
+          </Button>
+        </>
+      }
+    >
+      <div class="ui-settings">
+        <Card class="ui-card" padding={0}>
+          <header class="ui-card-header">
+            <div>
+              <h2>Project context sidebar</h2>
+              <p>Set the default width used by the Context and Changes panel in project consoles.</p>
+            </div>
+          </header>
+          <div class="ui-form">
+            <label class="ui-field">
+              <span>Sidebar width</span>
+              <input
+                type="number"
+                min={MIN_CONTEXT_SIDEBAR_WIDTH}
+                max={MAX_CONTEXT_SIDEBAR_WIDTH}
+                step="1"
+                value={state.width()}
+                onInput={(event) => state.setWidth(event.currentTarget.value)}
+              />
+              <small>
+                Width in pixels, between {MIN_CONTEXT_SIDEBAR_WIDTH} and {MAX_CONTEXT_SIDEBAR_WIDTH}. You can also
+                resize the sidebar by dragging its left edge.
+              </small>
+            </label>
+          </div>
+        </Card>
+        <Card class="ui-card" padding={0}>
+          <header class="ui-card-header">
+            <div>
+              <h2>Diff review</h2>
+              <p>Choose the default layout used when reviewing changed files in project consoles.</p>
+            </div>
+          </header>
+          <div class="ui-form">
+            <div class="ui-field">
+              <span>Diff layout</span>
+              <CustomSelect
+                class="console-diff-select"
+                label="Diff layout"
+                value={state.style()}
+                options={styles}
+                disabled={Boolean(state.ctx.saving())}
+                onSelect={state.setStyle}
+              />
+              <small>
+                Unified shows changes in one column. Split shows the original and modified file side by side.
+              </small>
+            </div>
+          </div>
+        </Card>
+      </div>
+    </ConfigPage>
+  )
+}
diff --git a/packages/kilo-console/src/routes/config/sections.tsx b/packages/kilo-console/src/routes/config/sections.tsx
index 4d7ce6547b3..c2f41390669 100644
--- a/packages/kilo-console/src/routes/config/sections.tsx
+++ b/packages/kilo-console/src/routes/config/sections.tsx
@@ -3,6 +3,7 @@ import type { IconProps } from "@kilocode/kilo-web-ui/icon"
 import { AgentBuilderRoute, AgentsRoute } from "./AgentsRoute"
 import { CliNotificationsRoute } from "./CliNotificationsRoute"
 import { CliUiRoute } from "./CliUiRoute"
+import { ConsoleUiRoute } from "./ConsoleUiRoute"
 import { FormattersRoute, LspRoute } from "./FormattersRoute"
 import { IndexingRoute } from "./IndexingRoute"
 import { KeybindsRoute } from "./KeybindsRoute"
@@ -26,6 +27,7 @@ export type ConfigSection = {
 export type ConfigGroup = {
   id: string
   label: string
+  globalOnly?: boolean
   items: ConfigSection[]
 }
 
@@ -130,6 +132,14 @@ export const configNav: ConfigNode[] = [
       },
     ],
   },
+  {
+    id: "console",
+    label: "Console",
+    globalOnly: true,
+    items: [
+      { path: "/console/ui", href: "/settings/console/ui", icon: "sliders", label: "UI", component: ConsoleUiRoute },
+    ],
+  },
   {
     id: "advanced",
     label: "Advanced",
diff --git a/packages/kilo-console/src/routes/config/state/console.test.ts b/packages/kilo-console/src/routes/config/state/console.test.ts
new file mode 100644
index 00000000000..98ae950f3ae
--- /dev/null
+++ b/packages/kilo-console/src/routes/config/state/console.test.ts
@@ -0,0 +1,36 @@
+import { describe, expect, test } from "bun:test"
+import {
+  DEFAULT_CONTEXT_SIDEBAR_WIDTH,
+  MAX_CONTEXT_SIDEBAR_WIDTH,
+  MIN_CONTEXT_SIDEBAR_WIDTH,
+  normalizeConsoleDiffStyle,
+  normalizeContextSidebarWidth,
+  parseContextSidebarWidth,
+} from "./console"
+
+describe("console UI config state", () => {
+  test("defaults the diff layout to unified", () => {
+    expect(normalizeConsoleDiffStyle(undefined)).toBe("unified")
+    expect(normalizeConsoleDiffStyle("unified")).toBe("unified")
+    expect(normalizeConsoleDiffStyle("split")).toBe("split")
+    expect(normalizeConsoleDiffStyle("side-by-side")).toBe("unified")
+  })
+
+  test("normalizes missing and out-of-range widths", () => {
+    expect(normalizeContextSidebarWidth(undefined)).toBe(DEFAULT_CONTEXT_SIDEBAR_WIDTH)
+    expect(normalizeContextSidebarWidth(Number.NaN)).toBe(DEFAULT_CONTEXT_SIDEBAR_WIDTH)
+    expect(normalizeContextSidebarWidth(100)).toBe(MIN_CONTEXT_SIDEBAR_WIDTH)
+    expect(normalizeContextSidebarWidth(900)).toBe(MAX_CONTEXT_SIDEBAR_WIDTH)
+    expect(normalizeContextSidebarWidth(411.6)).toBe(412)
+  })
+
+  test("accepts only integer widths within the supported range", () => {
+    expect(parseContextSidebarWidth("352")).toBe(352)
+    expect(parseContextSidebarWidth(String(MIN_CONTEXT_SIDEBAR_WIDTH))).toBe(MIN_CONTEXT_SIDEBAR_WIDTH)
+    expect(parseContextSidebarWidth(String(MAX_CONTEXT_SIDEBAR_WIDTH))).toBe(MAX_CONTEXT_SIDEBAR_WIDTH)
+    expect(parseContextSidebarWidth("249")).toBeUndefined()
+    expect(parseContextSidebarWidth("801")).toBeUndefined()
+    expect(parseContextSidebarWidth("352.5")).toBeUndefined()
+    expect(parseContextSidebarWidth("wide")).toBeUndefined()
+  })
+})
diff --git a/packages/kilo-console/src/routes/config/state/console.ts b/packages/kilo-console/src/routes/config/state/console.ts
new file mode 100644
index 00000000000..8393a7c7acd
--- /dev/null
+++ b/packages/kilo-console/src/routes/config/state/console.ts
@@ -0,0 +1,80 @@
+import { createEffect, createSignal } from "solid-js"
+import { useConfig } from "../../../context/config"
+
+export const DEFAULT_CONTEXT_SIDEBAR_WIDTH = 300
+export const MIN_CONTEXT_SIDEBAR_WIDTH = 250
+export const MAX_CONTEXT_SIDEBAR_WIDTH = 800
+export const DEFAULT_CONSOLE_DIFF_STYLE = "unified" as const
+export type ConsoleDiffStyle = "unified" | "split"
+
+export function normalizeConsoleDiffStyle(value: unknown): ConsoleDiffStyle {
+  return value === "split" ? "split" : DEFAULT_CONSOLE_DIFF_STYLE
+}
+
+export function normalizeContextSidebarWidth(value: unknown) {
+  if (typeof value !== "number" || !Number.isFinite(value)) return DEFAULT_CONTEXT_SIDEBAR_WIDTH
+  return Math.min(MAX_CONTEXT_SIDEBAR_WIDTH, Math.max(MIN_CONTEXT_SIDEBAR_WIDTH, Math.round(value)))
+}
+
+export function parseContextSidebarWidth(value: string) {
+  const width = Number(value)
+  if (!Number.isInteger(width)) return undefined
+  if (width < MIN_CONTEXT_SIDEBAR_WIDTH || width > MAX_CONTEXT_SIDEBAR_WIDTH) return undefined
+  return width
+}
+
+export function useConsoleUiSettings() {
+  const ctx = useConfig()
+  const [width, setWidth] = createSignal(String(DEFAULT_CONTEXT_SIDEBAR_WIDTH))
+  const [style, setStyle] = createSignal<ConsoleDiffStyle>(DEFAULT_CONSOLE_DIFF_STYLE)
+  const [dirty, setDirty] = createSignal(false)
+
+  createEffect(() => {
+    if (dirty()) return
+    const config = ctx.data()?.effective.console
+    setWidth(String(normalizeContextSidebarWidth(config?.context_sidebar_width)))
+    setStyle(normalizeConsoleDiffStyle(config?.diff_style))
+  })
+
+  function save() {
+    const value = parseContextSidebarWidth(width())
+    if (value === undefined) {
+      ctx.fail(`Enter a sidebar width between ${MIN_CONTEXT_SIDEBAR_WIDTH} and ${MAX_CONTEXT_SIDEBAR_WIDTH} pixels.`)
+      return
+    }
+    ctx.patch({ console: { context_sidebar_width: value, diff_style: style() } })
+    setWidth(String(value))
+    setDirty(false)
+  }
+
+  function reset() {
+    ctx.unset([
+      ["console", "context_sidebar_width"],
+      ["console", "diff_style"],
+    ])
+    setWidth(String(DEFAULT_CONTEXT_SIDEBAR_WIDTH))
+    setStyle(DEFAULT_CONSOLE_DIFF_STYLE)
+    setDirty(false)
+  }
+
+  return {
+    ctx,
+    width,
+    setWidth: (value: string) => {
+      setWidth(value)
+      setDirty(true)
+    },
+    style,
+    setStyle: (value: string) => {
+      setStyle(normalizeConsoleDiffStyle(value))
+      setDirty(true)
+    },
+    dirty,
+    configured: () => {
+      const config = ctx.data()?.effective.console
+      return config?.context_sidebar_width !== undefined || config?.diff_style !== undefined
+    },
+    save,
+    reset,
+  }
+}
diff --git a/packages/kilo-console/src/routes/projects/ProjectConsoleRoute.tsx b/packages/kilo-console/src/routes/projects/ProjectConsoleRoute.tsx
index 7f576e7fb60..f4ad90840d8 100644
--- a/packages/kilo-console/src/routes/projects/ProjectConsoleRoute.tsx
+++ b/packages/kilo-console/src/routes/projects/ProjectConsoleRoute.tsx
@@ -1,8 +1,17 @@
 import { A, useLocation, useParams } from "@solidjs/router"
-import { createEffect, createMemo, createResource, createSignal, For, onCleanup, Show } from "solid-js"
+import { createEffect, createMemo, createResource, createSignal, For, on, onCleanup, Show } from "solid-js"
+import { Badge } from "@kilocode/kilo-web-ui/badge"
+import { Button } from "@kilocode/kilo-web-ui/button"
 import { Card } from "@kilocode/kilo-web-ui/card"
 import { Icon } from "@kilocode/kilo-web-ui/icon"
+import { ResizeHandle } from "@kilocode/kilo-web-ui/resize-handle"
+import { Spinner } from "@kilocode/kilo-web-ui/spinner"
+import { File } from "@opencode-ai/ui/file"
+import { FileComponentProvider } from "@opencode-ai/ui/context/file"
+import { SessionReview, type SessionReviewDiffStyle } from "@opencode-ai/ui/session-review"
+import { ConfirmDialog } from "../../components/ConfirmDialog"
 import { LoadingScreen } from "../../components/LoadingScreen"
+import { PromptDialog } from "../../components/PromptDialog"
 import {
   createProjectPty,
   createProjectWorktree,
@@ -12,6 +21,7 @@ import {
   loadProjectConsole,
   loadProjectDiff,
   loadProjectDiffFile,
+  patchConfig,
   removeProjectPty,
   removeProjectWorktree,
   resetProjectWorktree,
@@ -21,6 +31,7 @@ import {
   viewProjectSessions,
   type ProjectConsoleEvent,
   type ProjectConsoleQuery,
+  type ProjectDiffItem,
   type ProjectTerminalItem,
   type Query,
 } from "../../client"
@@ -30,6 +41,14 @@ import {
   clearUnread as storeClearUnread,
   sessionHasUnread,
 } from "../../shared/terminal-status"
+import {
+  DEFAULT_CONSOLE_DIFF_STYLE,
+  DEFAULT_CONTEXT_SIDEBAR_WIDTH,
+  MAX_CONTEXT_SIDEBAR_WIDTH,
+  MIN_CONTEXT_SIDEBAR_WIDTH,
+  normalizeConsoleDiffStyle,
+  normalizeContextSidebarWidth,
+} from "../config/state/console"
 import { GhosttyTerminal } from "./terminal/GhosttyTerminal"
 
 const ui = new Set(["3017", "3018"])
@@ -41,6 +60,13 @@ type Context = {
   kind: "local" | "worktree"
 }
 
+type Editor = { kind: "create"; value: string } | { kind: "rename"; item: Context; value: string }
+
+type Pending = {
+  kind: "delete" | "reset"
+  item: Context
+}
+
 function discoverable(search: URLSearchParams) {
   if (search.get("server")) return false
   return ui.has(window.location.port)
@@ -125,13 +151,21 @@ export function ProjectConsoleRoute() {
   const [selected, setSelected] = createSignal(window.localStorage.getItem(`kilo.console.${params.project}.dir`) ?? "")
   const [active, setActive] = createSignal(window.localStorage.getItem(`kilo.console.${params.project}.pty`) ?? "")
   const [local, setLocal] = createSignal<ProjectTerminalItem[]>([])
-  const [file, setFile] = createSignal<string | undefined>()
+  const [openFiles, setOpenFiles] = createSignal<string[]>([])
+  const [details, setDetails] = createSignal<Record<string, ProjectDiffItem>>({})
+  const [infoWidth, setInfoWidth] = createSignal(DEFAULT_CONTEXT_SIDEBAR_WIDTH)
+  const [viewport, setViewport] = createSignal(window.innerWidth)
+  const [diffStyle, setDiffStyle] = createSignal<SessionReviewDiffStyle>(DEFAULT_CONSOLE_DIFF_STYLE)
   const [saving, setSaving] = createSignal<string | undefined>()
   const [failure, setFailure] = createSignal<string | undefined>()
   const [unread, setUnread] = createSignal(new Set<string>())
   const [closing, setClosing] = createSignal(new Set<string>())
   const [labelRev, setLabelRev] = createSignal(0)
+  const [editor, setEditor] = createSignal<Editor | undefined>()
+  const [pending, setPending] = createSignal<Pending | undefined>()
   const events = { timer: undefined as number | undefined }
+  const resize = { timer: undefined as number | undefined, pending: false }
+  const detailPending = new Set<string>()
   const project = () => params.project ?? ""
   const query = createMemo<ProjectConsoleQuery | undefined>(() => {
     const target = clean(url()) || fallback()
@@ -139,6 +173,7 @@ export function ProjectConsoleRoute() {
     return { url: target, dir: "", project: project() }
   })
   const [snap, { refetch }] = createResource(query, loadProjectConsole)
+  const visibleInfoWidth = createMemo(() => Math.min(infoWidth(), maxInfoWidth()))
 
   const contexts = createMemo<Context[]>(() => {
     const data = snap()
@@ -185,11 +220,13 @@ export function ProjectConsoleRoute() {
     return { input: item, dir: item.dir }
   })
   const [diffs] = createResource(diffKey, (item) => loadProjectDiff(item.input, item.dir))
-  const detailKey = createMemo(() => {
-    const item = target()
-    const path = file()
-    if (!item || !path) return undefined
-    return { input: item, dir: item.dir, file: path }
+  // Diff summary items carry no content (patch/before/after empty); overlay full file
+  // diffs as they load so the review renders syntax-highlighted changes per file.
+  const reviewDiffs = createMemo<ProjectDiffItem[]>(() => {
+    const map = details()
+    return (diffs() ?? [])
+      .filter((item): item is ProjectDiffItem & { file: string } => typeof item.file === "string")
+      .map((item) => map[item.file] ?? item)
   })
   const terminal = createMemo(() => {
     const item = activeTerminal()
@@ -205,7 +242,6 @@ export function ProjectConsoleRoute() {
     return items
   })
   const terminalKeys = createMemo(() => Array.from(terminalMap().keys()))
-  const [detail] = createResource(detailKey, (item) => loadProjectDiffFile(item.input, item.dir, item.file))
   const settings = createMemo(() => {
     const q = search().toString()
     return `/projects/${encodeURIComponent(project())}/settings${q ? `?${q}` : ""}`
@@ -300,18 +336,67 @@ export function ProjectConsoleRoute() {
     setSelected(item.dir)
     const pty = terminalsFor(item.dir)[0]
     setActive(pty?.id ?? "")
-    setFile(undefined)
     remember(item.dir, pty?.id)
   }
 
   function selectTerminal(item: ProjectTerminalItem) {
     setSelected(item.directory)
     setActive(item.id)
-    setFile(undefined)
     clearUnread(item)
     remember(item.directory, item.id)
   }
 
+  function fetchDetail(path: string) {
+    const base = target()
+    if (!base) return
+    if (details()[path] || detailPending.has(path)) return
+    detailPending.add(path)
+    void loadProjectDiffFile(base, base.dir, path)
+      .then((item) => {
+        if (item && item.file) setDetails((prev) => ({ ...prev, [item.file!]: item }))
+      })
+      .catch((err) => console.warn("Worktree diff file:", err))
+      .finally(() => detailPending.delete(path))
+  }
+
+  function openReviewFiles(next: string[]) {
+    setOpenFiles(next)
+    for (const path of next) fetchDetail(path)
+  }
+
+  function changeDiffStyle(style: SessionReviewDiffStyle) {
+    setDiffStyle(style)
+    const base = query()
+    if (!base) return
+    void patchConfig({ url: base.url, dir: "", scope: "global" }, { console: { diff_style: style } }).catch((err) =>
+      console.warn(`Console diff style: ${errMsg(err)}`),
+    )
+  }
+
+  function resizeInfo(value: number) {
+    const width = normalizeContextSidebarWidth(value)
+    setInfoWidth(width)
+    resize.pending = true
+    if (resize.timer) window.clearTimeout(resize.timer)
+    resize.timer = window.setTimeout(() => {
+      resize.timer = undefined
+      const base = query()
+      if (!base) {
+        resize.pending = false
+        return
+      }
+      void patchConfig({ url: base.url, dir: "", scope: "global" }, { console: { context_sidebar_width: width } })
+        .catch((err) => console.warn(`Console sidebar width: ${errMsg(err)}`))
+        .finally(() => {
+          resize.pending = false
+        })
+    }, 350)
+  }
+
+  function maxInfoWidth() {
+    return Math.max(MIN_CONTEXT_SIDEBAR_WIDTH, Math.min(MAX_CONTEXT_SIDEBAR_WIDTH, viewport() - 604))
+  }
+
   function run(label: string, job: () => Promise<unknown>) {
     setSaving(label)
     setFailure(undefined)
@@ -322,10 +407,26 @@ export function ProjectConsoleRoute() {
   }
 
   function addWorktree() {
+    if (!projectInput()) return
+    setEditor({ kind: "create", value: "" })
+  }
+
+  function submitEditor() {
+    const state = editor()
+    if (!state) return
+    if (state.kind === "rename") {
+      const value = state.value.trim()
+      if (value) window.localStorage.setItem(labelKey(state.item.dir), value)
+      if (!value) window.localStorage.removeItem(labelKey(state.item.dir))
+      setLabelRev((revision) => revision + 1)
+      setEditor(undefined)
+      return
+    }
+
     const input = projectInput()
-    const data = snap()
-    if (!input || !data) return
-    const name = window.prompt("Worktree name") ?? undefined
+    if (!input) return
+    const name = state.value.trim() || undefined
+    setEditor(undefined)
     run("Creating worktree", async () => {
       const next = await createProjectWorktree(input, name)
       setSelected(next.directory)
@@ -395,27 +496,12 @@ export function ProjectConsoleRoute() {
 
   function renameWorktree(item: Context) {
     if (item.kind === "local") return
-    const input = window.prompt("Worktree label", displayLabel(item))
-    if (input === null) return
-    const next = input.trim()
-    if (next) window.localStorage.setItem(labelKey(item.dir), next)
-    else window.localStorage.removeItem(labelKey(item.dir))
-    setLabelRev((value) => value + 1)
+    setEditor({ kind: "rename", item, value: displayLabel(item) })
   }
 
   function removeWorktree(item: Context) {
-    const input = projectInput()
-    if (!input || item.kind === "local") return
-    if (!window.confirm(`Remove worktree ${displayLabel(item)}?`)) return
-    run("Removing worktree", async () => {
-      await removeProjectWorktree(input, item.dir)
-      window.localStorage.removeItem(labelKey(item.dir))
-      setLabelRev((value) => value + 1)
-      if (selected() === item.dir) {
-        setSelected(input.dir)
-        remember(input.dir)
-      }
-    })
+    if (!projectInput() || item.kind === "local") return
+    setPending({ kind: "delete", item })
   }
 
   function removeSelected() {
@@ -425,18 +511,88 @@ export function ProjectConsoleRoute() {
   }
 
   function resetSelected() {
-    const input = projectInput()
     const item = current()
-    if (!input || !item || item.kind === "local") return
-    if (!window.confirm(`Reset worktree ${displayLabel(item)}?`)) return
-    run("Resetting worktree", async () => resetProjectWorktree(input, item.dir))
+    if (!projectInput() || !item || item.kind === "local") return
+    setPending({ kind: "reset", item })
+  }
+
+  function confirmWorktree() {
+    const state = pending()
+    const input = projectInput()
+    if (!state || !input) return
+    setPending(undefined)
+    if (state.kind === "reset") {
+      run("Resetting worktree", async () => resetProjectWorktree(input, state.item.dir))
+      return
+    }
+
+    run("Removing worktree", async () => {
+      await removeProjectWorktree(input, state.item.dir)
+      window.localStorage.removeItem(labelKey(state.item.dir))
+      setLabelRev((revision) => revision + 1)
+      if (selected() === state.item.dir) {
+        setSelected(input.dir)
+        remember(input.dir)
+      }
+    })
+  }
+
+  function updateEditor(value: string) {
+    setEditor((state) => {
+      if (!state) return state
+      return { ...state, value }
+    })
+  }
+
+  function editorTitle() {
+    const state = editor()
+    if (!state || state.kind === "create") return "Create worktree"
+    return `Rename ${displayLabel(state.item)}`
+  }
+
+  function editorMessage() {
+    if (editor()?.kind === "rename") return "Leave the name blank to restore the generated worktree name."
+    return "Choose a recognizable name, or leave it blank to generate one automatically."
+  }
+
+  function pendingTitle() {
+    const state = pending()
+    if (!state) return ""
+    const action = state.kind === "reset" ? "Reset" : "Delete"
+    return `${action} worktree ${displayLabel(state.item)}?`
+  }
+
+  function pendingMessage() {
+    if (pending()?.kind === "reset") return "This discards all uncommitted changes in the worktree."
+    return "This removes the worktree directory and its files from the project."
   }
 
+  createEffect(() => {
+    const data = snap()
+    if (!data) return
+    if (!resize.pending) setInfoWidth(normalizeContextSidebarWidth(data.config.console?.context_sidebar_width))
+    setDiffStyle(normalizeConsoleDiffStyle(data.config.console?.diff_style))
+  })
+
   createEffect(() => {
     const next = search().get("server")
     if (next && next !== url()) setUrl(next)
   })
 
+  // Reset review state when the selected worktree changes so one worktree's
+  // file contents never leak into another.
+  createEffect(
+    on(
+      () => target()?.dir,
+      () => {
+        setOpenFiles([])
+        setDetails({})
+        detailPending.clear()
+      },
+      { defer: true },
+    ),
+  )
+
   createEffect(() => {
     if (!discoverable(search())) return
     void resolveServer().then((value) => {
@@ -507,8 +663,13 @@ export function ProjectConsoleRoute() {
     onCleanup(stop)
   })
 
+  const updateViewport = () => setViewport(window.innerWidth)
+  window.addEventListener("resize", updateViewport)
+
   onCleanup(() => {
     if (events.timer) window.clearTimeout(events.timer)
+    if (resize.timer) window.clearTimeout(resize.timer)
+    window.removeEventListener("resize", updateViewport)
   })
 
   createEffect(() => {
@@ -525,7 +686,7 @@ export function ProjectConsoleRoute() {
   })
 
   return (
-    <section class="project-console">
+    <section class="project-console" style={`--project-info-width: ${visibleInfoWidth()}px`}>
       <aside class="project-console-sidebar" aria-label="Project console sections">
         <div class="project-console-title">
           <span class="project-console-heading">
@@ -734,52 +895,87 @@ export function ProjectConsoleRoute() {
       </main>
 
       <aside class="project-console-info" aria-label="Project details">
-        <div class="project-info-card">
-          <div class="project-panel-heading">Context</div>
-          <strong>{currentLabel()}</strong>
-          <code>{current()?.dir ?? snap()?.project.worktree ?? project()}</code>
+        <ResizeHandle
+          direction="horizontal"
+          edge="start"
+          size={visibleInfoWidth()}
+          min={MIN_CONTEXT_SIDEBAR_WIDTH}
+          max={maxInfoWidth()}
+          aria-label="Resize project context sidebar"
+          onResize={resizeInfo}
+        />
+        <div class="project-info-card project-info-context">
+          <div class="project-info-context-head">
+            <span class="project-panel-heading">Context</span>
+            <Badge variant="outline">{current()?.kind === "worktree" ? "Worktree" : "Local"}</Badge>
+          </div>
+          <strong class="project-info-title">{currentLabel()}</strong>
+          <code class="project-info-path" title={current()?.dir}>
+            {current()?.dir ?? snap()?.project.worktree ?? project()}
+          </code>
           <Show when={current()?.kind === "worktree"}>
             <div class="project-info-actions">
-              <button type="button" onClick={resetSelected} disabled={!!saving()}>
+              <Button variant="secondary" size="small" onClick={resetSelected} disabled={!!saving()}>
                 Reset
-              </button>
-              <button type="button" onClick={removeSelected} disabled={!!saving()}>
-                Remove
-              </button>
+              </Button>
+              <Button variant="destructive" size="small" onClick={removeSelected} disabled={!!saving()}>
+                Delete
+              </Button>
             </div>
           </Show>
         </div>
-        <div class="project-info-card grow">
-          <div class="project-panel-heading">Changes</div>
-          <Show when={diffs.loading && !diffs()}>
-            <p class="empty">Loading diff...</p>
+        <div class="project-info-review">
+          <Show
+            when={!diffs.error}
+            fallback={<div class="project-review-state project-review-state-error">{errMsg(diffs.error)}</div>}
+          >
+            <Show
+              when={!(diffs.loading && !diffs())}
+              fallback={
+                <div class="project-review-state">
+                  <Spinner />
+                  <span>Loading changes…</span>
+                </div>
+              }
+            >
+              <FileComponentProvider component={File}>
+                <SessionReview
+                  diffs={reviewDiffs()}
+                  title={<span>Changes</span>}
+                  diffStyle={diffStyle()}
+                  onDiffStyleChange={changeDiffStyle}
+                  open={openFiles()}
+                  onOpenChange={openReviewFiles}
+                  empty={<div class="project-review-empty">No changes detected.</div>}
+                />
+              </FileComponentProvider>
+            </Show>
           </Show>
-          <Show when={diffs.error}>
-            <p class="empty">{errMsg(diffs.error)}</p>
-          </Show>
-          <Show when={!diffs.loading && (diffs() ?? []).length === 0 && !diffs.error}>
-            <p class="empty">No changes detected.</p>
-          </Show>
-          <div class="project-diff-list">
-            <For each={diffs() ?? []}>
-              {(item) => (
-                <button
-                  type="button"
-                  class="project-diff-row"
-                  classList={{ active: file() === item.file }}
-                  onClick={() => setFile(item.file)}
-                >
-                  <span>{item.file}</span>
-                  <small>
-                    +{item.additions} -{item.deletions}
-                  </small>
-                </button>
-              )}
-            </For>
-          </div>
-          <Show when={detail()}>{(item) => <pre class="project-diff-detail">{item()?.patch ?? ""}</pre>}</Show>
         </div>
       </aside>
+
+      <PromptDialog
+        open={Boolean(editor())}
+        title={editorTitle()}
+        message={editorMessage()}
+        label="Worktree name"
+        value={editor()?.value ?? ""}
+        placeholder="feature-name"
+        confirm={editor()?.kind === "rename" ? "Save" : "Create"}
+        busy={Boolean(saving())}
+        onInput={updateEditor}
+        onCancel={() => setEditor(undefined)}
+        onConfirm={submitEditor}
+      />
+      <ConfirmDialog
+        open={Boolean(pending())}
+        title={pendingTitle()}
+        message={pendingMessage()}
+        confirm={pending()?.kind === "reset" ? "Reset" : "Delete"}
+        busy={Boolean(saving())}
+        onCancel={() => setPending(undefined)}
+        onConfirm={confirmWorktree}
+      />
     </section>
   )
 }
diff --git a/packages/kilo-console/src/styles/cli-ui.css b/packages/kilo-console/src/styles/cli-ui.css
index 307e0303ac4..89c066f8036 100644
--- a/packages/kilo-console/src/styles/cli-ui.css
+++ b/packages/kilo-console/src/styles/cli-ui.css
@@ -8,6 +8,20 @@
   background: var(--card);
 }
 
+.kilo-console .ui-card:has(.console-diff-select[open]) {
+  position: relative;
+  z-index: 40;
+  overflow: visible;
+}
+
+.kilo-console .console-diff-select[open] {
+  z-index: 41;
+}
+
+.kilo-console .console-diff-select .models-select-menu {
+  z-index: 42;
+}
+
 .kilo-console .ui-card-header,
 .kilo-console .ui-card-footer {
   display: flex;
diff --git a/packages/kilo-console/src/styles/project-console.css b/packages/kilo-console/src/styles/project-console.css
index ba0d84c26aa..d03486b0184 100644
--- a/packages/kilo-console/src/styles/project-console.css
+++ b/packages/kilo-console/src/styles/project-console.css
@@ -1,6 +1,8 @@
 .kilo-console .project-console {
   display: grid;
-  grid-template-columns: 13.75rem minmax(24rem, 1fr) minmax(16rem, 22rem);
+  grid-template-columns:
+    13.75rem minmax(24rem, 1fr)
+    clamp(250px, var(--project-info-width, 300px), min(800px, calc(100vw - 37.75rem)));
   height: 100%;
   min-height: 0;
   overflow: hidden;
@@ -280,8 +282,7 @@
 
 .kilo-console .project-context span,
 .kilo-console .project-terminal-row span,
-.kilo-console .project-settings-link span,
-.kilo-console .project-diff-row span {
+.kilo-console .project-settings-link span {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -340,14 +341,6 @@
   color: var(--foreground) !important;
 }
 
-.kilo-console .project-diff-row small {
-  overflow: hidden;
-  color: var(--muted-foreground);
-  font-size: 0.6875rem;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
 .kilo-console .project-sidebar-bottom {
   flex: 0 0 auto;
   border-top: 1px solid var(--border);
@@ -460,27 +453,40 @@
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
+  position: relative;
   overflow: hidden;
   border-left: 1px solid var(--border);
   background: var(--background);
-  padding: clamp(1rem, 2.4vw, 2rem) clamp(0.875rem, 1.8vw, 1.25rem);
+  padding: 0.875rem;
+}
+
+.kilo-console .project-console-info > [data-component="resize-handle"]::after {
+  background: var(--ring);
 }
 
 .kilo-console .project-info-card {
   display: grid;
-  gap: 0.625rem;
-  min-height: 0;
+  gap: 0.5rem;
+  flex: 0 0 auto;
   border: 1px solid var(--border);
   border-radius: var(--radius-md);
-  background: color-mix(in oklab, var(--muted) 30%, transparent);
+  background: var(--card);
   padding: 0.75rem;
 }
 
-.kilo-console .project-info-card.grow {
-  overflow: auto;
+.kilo-console .project-info-context-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+}
+
+.kilo-console .project-info-context-head .project-panel-heading {
+  min-height: 0;
+  padding: 0;
 }
 
-.kilo-console .project-info-card strong {
+.kilo-console .project-info-title {
   overflow: hidden;
   color: var(--foreground);
   font-size: 0.875rem;
@@ -489,7 +495,7 @@
   white-space: nowrap;
 }
 
-.kilo-console .project-info-card code {
+.kilo-console .project-info-path {
   overflow: hidden;
   color: var(--muted-foreground);
   font-family: var(--font-family-mono, monospace);
@@ -502,62 +508,79 @@
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 0.5rem;
+  margin-top: 0.125rem;
+}
+
+.kilo-console .project-info-actions [data-component="button"] {
+  width: 100%;
 }
 
-.kilo-console .project-info-actions button,
-.kilo-console .project-diff-row {
+/* Rich review panel — fills remaining height; SessionReview scrolls internally. */
+.kilo-console .project-info-review {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
   border: 1px solid var(--border);
   border-radius: var(--radius-md);
-  background: var(--input-base);
-  color: var(--foreground);
-  cursor: pointer;
-  font: inherit;
-  padding: 0.5rem 0.625rem;
-  text-align: left;
+  background: var(--card);
 }
 
-.kilo-console .project-info-actions button:hover,
-.kilo-console .project-info-actions button:focus-visible,
-.kilo-console .project-diff-row:hover,
-.kilo-console .project-diff-row:focus-visible,
-.kilo-console .project-diff-row.active {
-  border-color: var(--ring);
-  outline: 0;
+.kilo-console .project-info-review [data-component="session-review"] {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-height: 0;
+  height: 100%;
 }
 
-.kilo-console .project-info-actions button:disabled {
-  cursor: not-allowed;
-  opacity: 0.55;
+.kilo-console .project-info-review [data-slot="session-review-header"] {
+  box-sizing: border-box;
+  height: auto;
+  min-height: 2.5rem;
+  padding: 0.75rem;
 }
 
-.kilo-console .project-diff-list {
-  display: grid;
-  gap: 0.375rem;
+.kilo-console .project-info-review [data-slot="session-review-title"] {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  min-height: 1.25rem;
+  color: var(--text-weaker);
+  font-family: var(--font-family-sans);
+  font-size: 0.625rem;
+  font-weight: 500;
+  line-height: normal;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
 }
 
-.kilo-console .project-diff-row {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  align-items: center;
-  gap: 0.125rem;
+.kilo-console .project-info-review [data-slot="session-review-actions"] > [data-component="button"] {
+  width: auto;
+  min-width: 0;
+  height: 1.5rem;
+  gap: 0.25rem;
+  padding: 0 0.375rem;
+  font-size: 0.6875rem;
 }
 
-.kilo-console .project-diff-row.active {
-  background: color-mix(in oklab, var(--muted) 55%, transparent);
+.kilo-console .project-review-state,
+.kilo-console .project-review-empty {
+  display: flex;
+  flex: 1 1 auto;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  min-height: 0;
+  color: var(--muted-foreground);
+  font-size: 0.75rem;
+  text-align: center;
+  padding: 1rem;
 }
 
-.kilo-console .project-diff-detail {
-  overflow: auto;
-  max-height: 18rem;
-  margin: 0.5rem 0 0;
-  border: 1px solid var(--border);
-  border-radius: var(--radius-md);
-  background: var(--background-base);
-  color: var(--foreground);
-  font-family: var(--font-family-mono, monospace);
-  font-size: 0.6875rem;
-  line-height: 1.4;
-  padding: 0.75rem;
+.kilo-console .project-review-state-error {
+  color: var(--destructive, #ef4444);
 }
 
 @media (max-width: 1180px) {
diff --git a/packages/kilo-console/src/styles/providers.css b/packages/kilo-console/src/styles/providers.css
index 179400632e6..548e16af5f0 100644
--- a/packages/kilo-console/src/styles/providers.css
+++ b/packages/kilo-console/src/styles/providers.css
@@ -408,7 +408,7 @@
 }
 
 .kilo-console .confirm-dialog {
-  width: min(48rem, 100%);
+  width: min(28rem, 100%);
   overflow: hidden;
   border: 1px solid var(--border-weak-base);
   border-radius: var(--radius-lg);
@@ -435,16 +435,21 @@
   height: 3rem;
 }
 
-.kilo-console .confirm-body h2 {
+.kilo-console .confirm-body h2,
+.kilo-console .prompt-copy h2 {
   margin: 0;
   color: var(--text-strong);
-  font-size: clamp(1.15rem, 2vw, 1.35rem);
-  line-height: 1.35;
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.25rem;
 }
 
-.kilo-console .confirm-body p {
+.kilo-console .confirm-body p,
+.kilo-console .prompt-copy p {
   margin: 0.5rem 0 0;
   color: var(--text-weak);
+  font-size: 0.75rem;
+  line-height: 1.625;
 }
 
 .kilo-console .confirm-actions {
@@ -455,3 +460,25 @@
   background: color-mix(in srgb, var(--background-base) 65%, transparent);
   padding: 1rem;
 }
+
+.kilo-console .prompt-form {
+  margin: 0;
+}
+
+.kilo-console .prompt-body {
+  display: grid;
+  gap: 1rem;
+  padding: 1.5rem;
+}
+
+.kilo-console .prompt-field {
+  display: grid;
+  gap: 0.5rem;
+  color: var(--text-strong);
+  font-size: 0.75rem;
+  font-weight: 500;
+}
+
+.kilo-console .prompt-field input {
+  height: 2rem;
+}
diff --git a/packages/kilo-vscode/webview-ui/pierre-worker.ts b/packages/kilo-vscode/webview-ui/pierre-worker.ts
index 25c126394cb..4ab9aab83e4 100644
--- a/packages/kilo-vscode/webview-ui/pierre-worker.ts
+++ b/packages/kilo-vscode/webview-ui/pierre-worker.ts
@@ -13,6 +13,14 @@
 // plain render. The diff wrapper still needs to keep that initial render cheap,
 // which is why review surfaces pass hunk-bounded patches instead of full files.
 import { WorkerPoolManager } from "@pierre/diffs/worker"
+import { ensureKiloDiffTheme, KILO_DIFF_THEME } from "@opencode-ai/ui/pierre/kilo-diff-theme"
+
+// Register the "Kilo" theme before any pool initializes. resolveThemes([theme])
+// runs on the main thread during initialize() and throws "resolveTheme: No valid
+// loader for Kilo" if the theme name was never registered. Registering here makes
+// the worker self-sufficient rather than depending on the markdown context module
+// having been imported first.
+ensureKiloDiffTheme()
 
 export type WorkerPoolStyle = "unified" | "split"
 
@@ -36,7 +44,7 @@ export function workerFactory(): Worker {
 function createPool(lineDiffType: "none" | "word-alt") {
   const pool = new WorkerPoolManager(
     { workerFactory, poolSize: 2 },
-    { theme: "Kilo", lineDiffType, preferredHighlighter: ENGINE },
+    { theme: KILO_DIFF_THEME, lineDiffType, preferredHighlighter: ENGINE },
   )
   void pool.initialize()
   return pool
diff --git a/packages/opencode/src/config/config.ts b/packages/opencode/src/config/config.ts
index cc3c38a99f7..44ff4f4f091 100644
--- a/packages/opencode/src/config/config.ts
+++ b/packages/opencode/src/config/config.ts
@@ -209,6 +209,18 @@ export const Info = Schema.Struct({
     description: "Automatically collapse reasoning blocks after the agent finishes writing them",
   }),
   indexing: Schema.optional(IndexingRef).annotate({ description: "Codebase indexing configuration" }),
+  console: Schema.optional(
+    Schema.Struct({
+      context_sidebar_width: Schema.optional(
+        Schema.Int.check(Schema.isBetween({ minimum: 250, maximum: 800 })).annotate({
+          description: "Width of the Kilo Console project context sidebar in pixels",
+        }),
+      ),
+      diff_style: Schema.optional(Schema.Literals(["unified", "split"])).annotate({
+        description: "Default diff layout in Kilo Console project reviews",
+      }),
+    }),
+  ).annotate({ description: "Kilo Console user interface configuration" }),
   terminal_command_display: Schema.optional(Schema.Literals(["expanded", "collapsed"])).annotate({
     description: "Controls whether terminal command blocks are expanded or collapsed by default in the VS Code chat UI",
   }),
diff --git a/packages/opencode/test/kilocode/config/console-ui.test.ts b/packages/opencode/test/kilocode/config/console-ui.test.ts
new file mode 100644
index 00000000000..9adeb10d160
--- /dev/null
+++ b/packages/opencode/test/kilocode/config/console-ui.test.ts
@@ -0,0 +1,23 @@
+import { describe, expect, test } from "bun:test"
+import { Schema } from "effect"
+import { Config } from "@/config/config"
+
+describe("Config.Info console UI", () => {
+  test("accepts console UI preferences", () => {
+    const config = Schema.decodeUnknownSync(Config.Info)({
+      console: { context_sidebar_width: 420, diff_style: "split" },
+    })
+
+    expect(config.console?.context_sidebar_width).toBe(420)
+    expect(config.console?.diff_style).toBe("split")
+  })
+
+  test("rejects invalid console UI preferences", () => {
+    expect(() => Schema.decodeUnknownSync(Config.Info)({ console: { context_sidebar_width: 249 } })).toThrow()
+    expect(() => Schema.decodeUnknownSync(Config.Info)({ console: { context_sidebar_width: 801 } })).toThrow()
+    expect(() => Schema.decodeUnknownSync(Config.Info)({ console: { context_sidebar_width: 420.5 } })).toThrow()
+    expect(() => Schema.decodeUnknownSync(Config.Info)({ console: { context_sidebar_width: Number.NaN } })).toThrow()
+    expect(() => Schema.decodeUnknownSync(Config.Info)({ console: { context_sidebar_width: Number.POSITIVE_INFINITY } })).toThrow()
+    expect(() => Schema.decodeUnknownSync(Config.Info)({ console: { diff_style: "side-by-side" } })).toThrow()
+  })
+})
diff --git a/packages/sdk/js/src/v2/gen/types.gen.ts b/packages/sdk/js/src/v2/gen/types.gen.ts
index a77fd25e673..af264d90b77 100644
--- a/packages/sdk/js/src/v2/gen/types.gen.ts
+++ b/packages/sdk/js/src/v2/gen/types.gen.ts
@@ -1320,6 +1320,13 @@ export type Config = {
   remote_control?: boolean
   auto_collapse_reasoning?: boolean
   indexing?: IndexingConfig
+  console?: {
+    /**
+     * Width of the Kilo Console project context sidebar in pixels
+     */
+    context_sidebar_width?: number
+    diff_style?: "unified" | "split"
+  }
   terminal_command_display?: "expanded" | "collapsed"
   model?: string
   small_model?: string
diff --git a/packages/sdk/openapi.json b/packages/sdk/openapi.json
index 9553cb07915..4d66ec8d8ba 100644
--- a/packages/sdk/openapi.json
+++ b/packages/sdk/openapi.json
@@ -18195,6 +18195,22 @@
           "indexing": {
             "$ref": "#/components/schemas/IndexingConfig"
           },
+          "console": {
+            "type": "object",
+            "properties": {
+              "context_sidebar_width": {
+                "type": "integer",
+                "minimum": 250,
+                "maximum": 800,
+                "description": "Width of the Kilo Console project context sidebar in pixels"
+              },
+              "diff_style": {
+                "type": "string",
+                "enum": ["unified", "split"]
+              }
+            },
+            "additionalProperties": false
+          },
           "terminal_command_display": {
             "type": "string",
             "enum": ["expanded", "collapsed"]
diff --git a/packages/ui/src/context/marked.tsx b/packages/ui/src/context/marked.tsx
index 3b332802bf0..ce91a223990 100644
--- a/packages/ui/src/context/marked.tsx
+++ b/packages/ui/src/context/marked.tsx
@@ -12,377 +12,17 @@ import type { MarkedExtension, TokenizerAndRendererExtension } from "marked"
 import { bundledLanguages, type BundledLanguage } from "shiki"
 import { parseFilePath } from "../file-path" // kilocode_change
 import { createSimpleContext } from "./helper"
-import { getSharedHighlighter, registerCustomTheme, ThemeRegistrationResolved } from "@pierre/diffs"
-
-registerCustomTheme("Kilo", () => {
-  return Promise.resolve({
-    name: "Kilo",
-    colors: {
-      "editor.background": "var(--color-background-stronger)",
-      "editor.foreground": "var(--text-base)",
-      "gitDecoration.addedResourceForeground": "var(--syntax-diff-add)",
-      "gitDecoration.deletedResourceForeground": "var(--syntax-diff-delete)",
-      // "gitDecoration.conflictingResourceForeground": "#ffca00",
-      // "gitDecoration.modifiedResourceForeground": "#1a76d4",
-      // "gitDecoration.untrackedResourceForeground": "#00cab1",
-      // "gitDecoration.ignoredResourceForeground": "#84848A",
-      // "terminal.titleForeground": "#adadb1",
-      // "terminal.titleInactiveForeground": "#84848A",
-      // "terminal.background": "#141415",
-      // "terminal.foreground": "#adadb1",
-      // "terminal.ansiBlack": "#141415",
-      // "terminal.ansiRed": "#ff2e3f",
-      // "terminal.ansiGreen": "#0dbe4e",
-      // "terminal.ansiYellow": "#ffca00",
-      // "terminal.ansiBlue": "#008cff",
-      // "terminal.ansiMagenta": "#c635e4",
-      // "terminal.ansiCyan": "#08c0ef",
-      // "terminal.ansiWhite": "#c6c6c8",
-      // "terminal.ansiBrightBlack": "#141415",
-      // "terminal.ansiBrightRed": "#ff2e3f",
-      // "terminal.ansiBrightGreen": "#0dbe4e",
-      // "terminal.ansiBrightYellow": "#ffca00",
-      // "terminal.ansiBrightBlue": "#008cff",
-      // "terminal.ansiBrightMagenta": "#c635e4",
-      // "terminal.ansiBrightCyan": "#08c0ef",
-      // "terminal.ansiBrightWhite": "#c6c6c8",
-    },
-    tokenColors: [
-      {
-        scope: ["comment", "punctuation.definition.comment", "string.comment"],
-        settings: {
-          foreground: "var(--syntax-comment)",
-        },
-      },
-      {
-        scope: ["entity.other.attribute-name"],
-        settings: {
-          foreground: "var(--syntax-property)", // maybe attribute
-        },
-      },
-      {
-        scope: ["constant", "entity.name.constant", "variable.other.constant", "variable.language", "entity"],
-        settings: {
-          foreground: "var(--syntax-constant)",
-        },
-      },
-      {
-        scope: ["entity.name", "meta.export.default", "meta.definition.variable"],
-        settings: {
-          foreground: "var(--syntax-type)",
-        },
-      },
-      {
-        scope: ["meta.object.member"],
-        settings: {
-          foreground: "var(--syntax-primitive)",
-        },
-      },
-      {
-        scope: [
-          "variable.parameter.function",
-          "meta.jsx.children",
-          "meta.block",
-          "meta.tag.attributes",
-          "entity.name.constant",
-          "meta.embedded.expression",
-          "meta.template.expression",
-          "string.other.begin.yaml",
-          "string.other.end.yaml",
-        ],
-        settings: {
-          foreground: "var(--syntax-punctuation)",
-        },
-      },
-      {
-        scope: ["entity.name.function", "support.type.primitive"],
-        settings: {
-          foreground: "var(--syntax-primitive)",
-        },
-      },
-      {
-        scope: ["support.class.component"],
-        settings: {
-          foreground: "var(--syntax-type)",
-        },
-      },
-      {
-        scope: "keyword",
-        settings: {
-          foreground: "var(--syntax-keyword)",
-        },
-      },
-      {
-        scope: [
-          "keyword.operator",
-          "storage.type.function.arrow",
-          "punctuation.separator.key-value.css",
-          "entity.name.tag.yaml",
-          "punctuation.separator.key-value.mapping.yaml",
-        ],
-        settings: {
-          foreground: "var(--syntax-operator)",
-        },
-      },
-      {
-        scope: ["storage", "storage.type"],
-        settings: {
-          foreground: "var(--syntax-keyword)",
-        },
-      },
-      {
-        scope: ["storage.modifier.package", "storage.modifier.import", "storage.type.java"],
-        settings: {
-          foreground: "var(--syntax-primitive)",
-        },
-      },
-      {
-        scope: [
-          "string",
-          "punctuation.definition.string",
-          "string punctuation.section.embedded source",
-          "entity.name.tag",
-        ],
-        settings: {
-          foreground: "var(--syntax-string)",
-        },
-      },
-      {
-        scope: "support",
-        settings: {
-          foreground: "var(--syntax-primitive)",
-        },
-      },
-      {
-        scope: ["support.type.object.module", "variable.other.object", "support.type.property-name.css"],
-        settings: {
-          foreground: "var(--syntax-object)",
-        },
-      },
-      {
-        scope: "meta.property-name",
-        settings: {
-          foreground: "var(--syntax-property)",
-        },
-      },
-      {
-        scope: "variable",
-        settings: {
-          foreground: "var(--syntax-variable)",
-        },
-      },
-      {
-        scope: "variable.other",
-        settings: {
-          foreground: "var(--syntax-variable)",
-        },
-      },
-      {
-        scope: [
-          "invalid.broken",
-          "invalid.illegal",
-          "invalid.unimplemented",
-          "invalid.deprecated",
-          "message.error",
-          "markup.deleted",
-          "meta.diff.header.from-file",
-          "punctuation.definition.deleted",
-          "brackethighlighter.unmatched",
-          "token.error-token",
-        ],
-        settings: {
-          foreground: "var(--syntax-critical)",
-        },
-      },
-      {
-        scope: "carriage-return",
-        settings: {
-          foreground: "var(--syntax-keyword)",
-        },
-      },
-      {
-        scope: "string source",
-        settings: {
-          foreground: "var(--syntax-variable)",
-        },
-      },
-      {
-        scope: "string variable",
-        settings: {
-          foreground: "var(--syntax-constant)",
-        },
-      },
-      {
-        scope: [
-          "source.regexp",
-          "string.regexp",
-          "string.regexp.character-class",
-          "string.regexp constant.character.escape",
-          "string.regexp source.ruby.embedded",
-          "string.regexp string.regexp.arbitrary-repitition",
-          "string.regexp constant.character.escape",
-        ],
-        settings: {
-          foreground: "var(--syntax-regexp)",
-        },
-      },
-      {
-        scope: "support.constant",
-        settings: {
-          foreground: "var(--syntax-primitive)",
-        },
-      },
-      {
-        scope: "support.variable",
-        settings: {
-          foreground: "var(--syntax-variable)",
-        },
-      },
-      {
-        scope: "meta.module-reference",
-        settings: {
-          foreground: "var(--syntax-info)",
-        },
-      },
-      {
-        scope: "punctuation.definition.list.begin.markdown",
-        settings: {
-          foreground: "var(--syntax-punctuation)",
-        },
-      },
-      {
-        scope: ["markup.heading", "markup.heading entity.name"],
-        settings: {
-          fontStyle: "bold",
-          foreground: "var(--syntax-info)",
-        },
-      },
-      {
-        scope: "markup.quote",
-        settings: {
-          foreground: "var(--syntax-info)",
-        },
-      },
-      {
-        scope: "markup.italic",
-        settings: {
-          fontStyle: "italic",
-          // foreground: "",
-        },
-      },
-      {
-        scope: "markup.bold",
-        settings: {
-          fontStyle: "bold",
-          foreground: "var(--text-strong)",
-        },
-      },
-      {
-        scope: [
-          "markup.raw",
-          "markup.inserted",
-          "meta.diff.header.to-file",
-          "punctuation.definition.inserted",
-          "markup.changed",
-          "punctuation.definition.changed",
-          "markup.ignored",
-          "markup.untracked",
-        ],
-        settings: {
-          foreground: "var(--text-base)",
-        },
-      },
-      {
-        scope: "meta.diff.range",
-        settings: {
-          fontStyle: "bold",
-          foreground: "var(--syntax-unknown)",
-        },
-      },
-      {
-        scope: "meta.diff.header",
-        settings: {
-          foreground: "var(--syntax-unknown)",
-        },
-      },
-      {
-        scope: "meta.separator",
-        settings: {
-          fontStyle: "bold",
-          foreground: "var(--syntax-unknown)",
-        },
-      },
-      {
-        scope: "meta.output",
-        settings: {
-          foreground: "var(--syntax-unknown)",
-        },
-      },
-      {
-        scope: "meta.export.default",
-        settings: {
-          foreground: "var(--syntax-unknown)",
-        },
-      },
-      {
-        scope: [
-          "brackethighlighter.tag",
-          "brackethighlighter.curly",
-          "brackethighlighter.round",
-          "brackethighlighter.square",
-          "brackethighlighter.angle",
-          "brackethighlighter.quote",
-        ],
-        settings: {
-          foreground: "var(--syntax-unknown)",
-        },
-      },
-      {
-        scope: ["constant.other.reference.link", "string.other.link"],
-        settings: {
-          fontStyle: "underline",
-          foreground: "var(--syntax-unknown)",
-        },
-      },
-      {
-        scope: "token.info-token",
-        settings: {
-          foreground: "var(--syntax-info)",
-        },
-      },
-      {
-        scope: "token.warn-token",
-        settings: {
-          foreground: "var(--syntax-warning)",
-        },
-      },
-      {
-        scope: "token.debug-token",
-        settings: {
-          foreground: "var(--syntax-info)",
-        },
-      },
-    ],
-    semanticTokenColors: {
-      comment: "var(--syntax-comment)",
-      string: "var(--syntax-string)",
-      number: "var(--syntax-constant)",
-      regexp: "var(--syntax-regexp)",
-      keyword: "var(--syntax-keyword)",
-      variable: "var(--syntax-variable)",
-      parameter: "var(--syntax-variable)",
-      property: "var(--syntax-property)",
-      function: "var(--syntax-primitive)",
-      method: "var(--syntax-primitive)",
-      type: "var(--syntax-type)",
-      class: "var(--syntax-type)",
-      namespace: "var(--syntax-type)",
-      enumMember: "var(--syntax-primitive)",
-      "variable.constant": "var(--syntax-constant)",
-      "variable.defaultLibrary": "var(--syntax-unknown)",
-    },
-  } as unknown as ThemeRegistrationResolved)
-})
+import { getSharedHighlighter } from "@pierre/diffs" // kilocode_change
+import { ensureKiloDiffTheme } from "../pierre/kilo-diff-theme" // kilocode_change
+
+// kilocode_change start: the "Kilo" diff/highlight theme registration moved to
+// ../pierre/kilo-diff-theme so the diff worker pool can register it without
+// importing this module's katex/marked dependencies. This call keeps the markdown
+// highlighter (getSharedHighlighter, below) working. Upstream keeps an inline
+// registerCustomTheme("OpenCode", …) block here — do not restore it on merges;
+// route registration through ensureKiloDiffTheme() instead.
+ensureKiloDiffTheme()
+// kilocode_change end
 
 // kilocode_change start: double-dollar-only math rules for marked.
 const BLOCK = /^\$\$\n((?:\\[^]|[^\\])+?)\n\$\$(?:\n|$)/
diff --git a/packages/ui/src/pierre/kilo-diff-theme.ts b/packages/ui/src/pierre/kilo-diff-theme.ts
new file mode 100644
index 00000000000..7f19c3cd642
--- /dev/null
+++ b/packages/ui/src/pierre/kilo-diff-theme.ts
@@ -0,0 +1,402 @@
+// kilocode_change - new file
+import { registerCustomTheme, RegisteredCustomThemes, type ThemeRegistrationResolved } from "@pierre/diffs"
+
+// The "Kilo" Pierre/Shiki theme used by every diff review surface (Code / Diff /
+// File / SessionReview) and by markdown code highlighting. Pierre resolves the
+// theme by name when a worker pool initializes (resolveThemes(["Kilo"])) or when
+// getSharedHighlighter() attaches it; if the name was never registered it throws
+// "resolveTheme: No valid loader for Kilo".
+//
+// This registration lives next to the worker pool factory (./worker) so that it
+// is a guaranteed, synchronous precondition of using the diff machinery: every
+// diff component imports the worker factory, which calls ensureKiloDiffTheme()
+// at module load — before any WorkerPoolManager.initialize() runs. Previously the
+// registration was only a side effect of importing the (heavy, katex/marked-
+// pulling) markdown context module, which forced consumers that render diffs
+// without markdown (e.g. kilo-console) to fire a racy `void import(...)` purely to
+// register the theme. Keeping it here, free of katex/marked, lets those consumers
+// stay light while removing the race entirely.
+//
+// Upstream owns the equivalent registerCustomTheme("OpenCode", …) block inline in
+// context/marked.tsx. Do not restore that inline block on upstream merges — route
+// the registration through ensureKiloDiffTheme() instead.
+
+export const KILO_DIFF_THEME = "Kilo"
+
+// Idempotent: this is reached from both the markdown context and the diff worker
+// factory. Guard against the authoritative Pierre registry (rather than a local
+// flag) so it stays a no-op even if this module is instantiated more than once
+// across separate bundles — @pierre/diffs otherwise logs an error on duplicates.
+export function ensureKiloDiffTheme(): void {
+  if (RegisteredCustomThemes.has(KILO_DIFF_THEME)) return
+
+  registerCustomTheme(KILO_DIFF_THEME, () => {
+    return Promise.resolve({
+      name: KILO_DIFF_THEME,
+      colors: {
+        "editor.background": "var(--color-background-stronger)",
+        "editor.foreground": "var(--text-base)",
+        "gitDecoration.addedResourceForeground": "var(--syntax-diff-add)",
+        "gitDecoration.deletedResourceForeground": "var(--syntax-diff-delete)",
+        // "gitDecoration.conflictingResourceForeground": "#ffca00",
+        // "gitDecoration.modifiedResourceForeground": "#1a76d4",
+        // "gitDecoration.untrackedResourceForeground": "#00cab1",
+        // "gitDecoration.ignoredResourceForeground": "#84848A",
+        // "terminal.titleForeground": "#adadb1",
+        // "terminal.titleInactiveForeground": "#84848A",
+        // "terminal.background": "#141415",
+        // "terminal.foreground": "#adadb1",
+        // "terminal.ansiBlack": "#141415",
+        // "terminal.ansiRed": "#ff2e3f",
+        // "terminal.ansiGreen": "#0dbe4e",
+        // "terminal.ansiYellow": "#ffca00",
+        // "terminal.ansiBlue": "#008cff",
+        // "terminal.ansiMagenta": "#c635e4",
+        // "terminal.ansiCyan": "#08c0ef",
+        // "terminal.ansiWhite": "#c6c6c8",
+        // "terminal.ansiBrightBlack": "#141415",
+        // "terminal.ansiBrightRed": "#ff2e3f",
+        // "terminal.ansiBrightGreen": "#0dbe4e",
+        // "terminal.ansiBrightYellow": "#ffca00",
+        // "terminal.ansiBrightBlue": "#008cff",
+        // "terminal.ansiBrightMagenta": "#c635e4",
+        // "terminal.ansiBrightCyan": "#08c0ef",
+        // "terminal.ansiBrightWhite": "#c6c6c8",
+      },
+      tokenColors: [
+        {
+          scope: ["comment", "punctuation.definition.comment", "string.comment"],
+          settings: {
+            foreground: "var(--syntax-comment)",
+          },
+        },
+        {
+          scope: ["entity.other.attribute-name"],
+          settings: {
+            foreground: "var(--syntax-property)", // maybe attribute
+          },
+        },
+        {
+          scope: ["constant", "entity.name.constant", "variable.other.constant", "variable.language", "entity"],
+          settings: {
+            foreground: "var(--syntax-constant)",
+          },
+        },
+        {
+          scope: ["entity.name", "meta.export.default", "meta.definition.variable"],
+          settings: {
+            foreground: "var(--syntax-type)",
+          },
+        },
+        {
+          scope: ["meta.object.member"],
+          settings: {
+            foreground: "var(--syntax-primitive)",
+          },
+        },
+        {
+          scope: [
+            "variable.parameter.function",
+            "meta.jsx.children",
+            "meta.block",
+            "meta.tag.attributes",
+            "entity.name.constant",
+            "meta.embedded.expression",
+            "meta.template.expression",
+            "string.other.begin.yaml",
+            "string.other.end.yaml",
+          ],
+          settings: {
+            foreground: "var(--syntax-punctuation)",
+          },
+        },
+        {
+          scope: ["entity.name.function", "support.type.primitive"],
+          settings: {
+            foreground: "var(--syntax-primitive)",
+          },
+        },
+        {
+          scope: ["support.class.component"],
+          settings: {
+            foreground: "var(--syntax-type)",
+          },
+        },
+        {
+          scope: "keyword",
+          settings: {
+            foreground: "var(--syntax-keyword)",
+          },
+        },
+        {
+          scope: [
+            "keyword.operator",
+            "storage.type.function.arrow",
+            "punctuation.separator.key-value.css",
+            "entity.name.tag.yaml",
+            "punctuation.separator.key-value.mapping.yaml",
+          ],
+          settings: {
+            foreground: "var(--syntax-operator)",
+          },
+        },
+        {
+          scope: ["storage", "storage.type"],
+          settings: {
+            foreground: "var(--syntax-keyword)",
+          },
+        },
+        {
+          scope: ["storage.modifier.package", "storage.modifier.import", "storage.type.java"],
+          settings: {
+            foreground: "var(--syntax-primitive)",
+          },
+        },
+        {
+          scope: [
+            "string",
+            "punctuation.definition.string",
+            "string punctuation.section.embedded source",
+            "entity.name.tag",
+          ],
+          settings: {
+            foreground: "var(--syntax-string)",
+          },
+        },
+        {
+          scope: "support",
+          settings: {
+            foreground: "var(--syntax-primitive)",
+          },
+        },
+        {
+          scope: ["support.type.object.module", "variable.other.object", "support.type.property-name.css"],
+          settings: {
+            foreground: "var(--syntax-object)",
+          },
+        },
+        {
+          scope: "meta.property-name",
+          settings: {
+            foreground: "var(--syntax-property)",
+          },
+        },
+        {
+          scope: "variable",
+          settings: {
+            foreground: "var(--syntax-variable)",
+          },
+        },
+        {
+          scope: "variable.other",
+          settings: {
+            foreground: "var(--syntax-variable)",
+          },
+        },
+        {
+          scope: [
+            "invalid.broken",
+            "invalid.illegal",
+            "invalid.unimplemented",
+            "invalid.deprecated",
+            "message.error",
+            "markup.deleted",
+            "meta.diff.header.from-file",
+            "punctuation.definition.deleted",
+            "brackethighlighter.unmatched",
+            "token.error-token",
+          ],
+          settings: {
+            foreground: "var(--syntax-critical)",
+          },
+        },
+        {
+          scope: "carriage-return",
+          settings: {
+            foreground: "var(--syntax-keyword)",
+          },
+        },
+        {
+          scope: "string source",
+          settings: {
+            foreground: "var(--syntax-variable)",
+          },
+        },
+        {
+          scope: "string variable",
+          settings: {
+            foreground: "var(--syntax-constant)",
+          },
+        },
+        {
+          scope: [
+            "source.regexp",
+            "string.regexp",
+            "string.regexp.character-class",
+            "string.regexp constant.character.escape",
+            "string.regexp source.ruby.embedded",
+            "string.regexp string.regexp.arbitrary-repitition",
+            "string.regexp constant.character.escape",
+          ],
+          settings: {
+            foreground: "var(--syntax-regexp)",
+          },
+        },
+        {
+          scope: "support.constant",
+          settings: {
+            foreground: "var(--syntax-primitive)",
+          },
+        },
+        {
+          scope: "support.variable",
+          settings: {
+            foreground: "var(--syntax-variable)",
+          },
+        },
+        {
+          scope: "meta.module-reference",
+          settings: {
+            foreground: "var(--syntax-info)",
+          },
+        },
+        {
+          scope: "punctuation.definition.list.begin.markdown",
+          settings: {
+            foreground: "var(--syntax-punctuation)",
+          },
+        },
+        {
+          scope: ["markup.heading", "markup.heading entity.name"],
+          settings: {
+            fontStyle: "bold",
+            foreground: "var(--syntax-info)",
+          },
+        },
+        {
+          scope: "markup.quote",
+          settings: {
+            foreground: "var(--syntax-info)",
+          },
+        },
+        {
+          scope: "markup.italic",
+          settings: {
+            fontStyle: "italic",
+            // foreground: "",
+          },
+        },
+        {
+          scope: "markup.bold",
+          settings: {
+            fontStyle: "bold",
+            foreground: "var(--text-strong)",
+          },
+        },
+        {
+          scope: [
+            "markup.raw",
+            "markup.inserted",
+            "meta.diff.header.to-file",
+            "punctuation.definition.inserted",
+            "markup.changed",
+            "punctuation.definition.changed",
+            "markup.ignored",
+            "markup.untracked",
+          ],
+          settings: {
+            foreground: "var(--text-base)",
+          },
+        },
+        {
+          scope: "meta.diff.range",
+          settings: {
+            fontStyle: "bold",
+            foreground: "var(--syntax-unknown)",
+          },
+        },
+        {
+          scope: "meta.diff.header",
+          settings: {
+            foreground: "var(--syntax-unknown)",
+          },
+        },
+        {
+          scope: "meta.separator",
+          settings: {
+            fontStyle: "bold",
+            foreground: "var(--syntax-unknown)",
+          },
+        },
+        {
+          scope: "meta.output",
+          settings: {
+            foreground: "var(--syntax-unknown)",
+          },
+        },
+        {
+          scope: "meta.export.default",
+          settings: {
+            foreground: "var(--syntax-unknown)",
+          },
+        },
+        {
+          scope: [
+            "brackethighlighter.tag",
+            "brackethighlighter.curly",
+            "brackethighlighter.round",
+            "brackethighlighter.square",
+            "brackethighlighter.angle",
+            "brackethighlighter.quote",
+          ],
+          settings: {
+            foreground: "var(--syntax-unknown)",
+          },
+        },
+        {
+          scope: ["constant.other.reference.link", "string.other.link"],
+          settings: {
+            fontStyle: "underline",
+            foreground: "var(--syntax-unknown)",
+          },
+        },
+        {
+          scope: "token.info-token",
+          settings: {
+            foreground: "var(--syntax-info)",
+          },
+        },
+        {
+          scope: "token.warn-token",
+          settings: {
+            foreground: "var(--syntax-warning)",
+          },
+        },
+        {
+          scope: "token.debug-token",
+          settings: {
+            foreground: "var(--syntax-info)",
+          },
+        },
+      ],
+      semanticTokenColors: {
+        comment: "var(--syntax-comment)",
+        string: "var(--syntax-string)",
+        number: "var(--syntax-constant)",
+        regexp: "var(--syntax-regexp)",
+        keyword: "var(--syntax-keyword)",
+        variable: "var(--syntax-variable)",
+        parameter: "var(--syntax-variable)",
+        property: "var(--syntax-property)",
+        function: "var(--syntax-primitive)",
+        method: "var(--syntax-primitive)",
+        type: "var(--syntax-type)",
+        class: "var(--syntax-type)",
+        namespace: "var(--syntax-type)",
+        enumMember: "var(--syntax-primitive)",
+        "variable.constant": "var(--syntax-constant)",
+        "variable.defaultLibrary": "var(--syntax-unknown)",
+      },
+    } as unknown as ThemeRegistrationResolved)
+  })
+}
diff --git a/packages/ui/src/pierre/worker.ts b/packages/ui/src/pierre/worker.ts
index d3097e4b120..5e14823361b 100644
--- a/packages/ui/src/pierre/worker.ts
+++ b/packages/ui/src/pierre/worker.ts
@@ -1,5 +1,14 @@
 import { WorkerPoolManager } from "@pierre/diffs/worker"
 import ShikiWorkerUrl from "@pierre/diffs/worker/worker.js?worker&url"
+import { ensureKiloDiffTheme, KILO_DIFF_THEME } from "./kilo-diff-theme" // kilocode_change
+
+// kilocode_change start: register the "Kilo" theme as a precondition of creating
+// any diff worker pool. resolveThemes([theme]) runs on the main thread during
+// initialize(); without the theme registered it throws "resolveTheme: No valid
+// loader for Kilo". Doing it here means every diff component (which imports this
+// factory) is covered, instead of relying on the markdown context being imported.
+ensureKiloDiffTheme()
+// kilocode_change end
 
 export type WorkerPoolStyle = "unified" | "split"
 
@@ -19,7 +28,7 @@ function createPool(lineDiffType: "none" | "word-alt") {
       poolSize: 2,
     },
     {
-      theme: "Kilo",
+      theme: KILO_DIFF_THEME, // kilocode_change
       lineDiffType,
       preferredHighlighter: "shiki-wasm",
     },