diff --git a/.changeset/vscode-chat-fixes.md b/.changeset/vscode-chat-fixes.md
new file mode 100644
index 00000000..1a2770a7
--- /dev/null
+++ b/.changeset/vscode-chat-fixes.md
@@ -0,0 +1,5 @@
+---
+"pythinker-code": patch
+---
+
+Render long conversations with a virtualized list, fix control overlap at narrow sidebar widths, and make sign-out work from the command palette.
diff --git a/.changeset/vscode-composer-menu.md b/.changeset/vscode-composer-menu.md
new file mode 100644
index 00000000..506f0608
--- /dev/null
+++ b/.changeset/vscode-composer-menu.md
@@ -0,0 +1,5 @@
+---
+"pythinker-code": minor
+---
+
+Combine permission mode, plan mode, and thinking effort into one composer menu, and answer approval prompts with number keys.
diff --git a/.changeset/vscode-config-hub.md b/.changeset/vscode-config-hub.md
new file mode 100644
index 00000000..1c0dea21
--- /dev/null
+++ b/.changeset/vscode-config-hub.md
@@ -0,0 +1,5 @@
+---
+"pythinker-code": minor
+---
+
+Add a config hub page that shows models, providers, MCP servers, the local config file, and extension settings in one place.
diff --git a/.changeset/vscode-editor-theme.md b/.changeset/vscode-editor-theme.md
new file mode 100644
index 00000000..c83bac39
--- /dev/null
+++ b/.changeset/vscode-editor-theme.md
@@ -0,0 +1,5 @@
+---
+"pythinker-code": minor
+---
+
+The extension UI now follows the editor color theme, including light, dark, and high-contrast themes.
diff --git a/.changeset/vscode-host-integrations.md b/.changeset/vscode-host-integrations.md
new file mode 100644
index 00000000..342e0f98
--- /dev/null
+++ b/.changeset/vscode-host-integrations.md
@@ -0,0 +1,5 @@
+---
+"pythinker-code": minor
+---
+
+Add a status bar indicator, quick-fix code actions, terminal and editor context menu entries, a getting-started walkthrough, and a new-conversation keybinding.
diff --git a/apps/vscode/package.json b/apps/vscode/package.json
index 550f5c80..d93fb9cc 100644
--- a/apps/vscode/package.json
+++ b/apps/vscode/package.json
@@ -122,6 +122,11 @@
         "title": "Pythinker Code: Insert Current File",
         "icon": "$(mention)"
       },
+      {
+        "command": "pythinker.addTerminalSelection",
+        "title": "Pythinker Code: Add Terminal Selection to Pythinker",
+        "icon": "$(terminal)"
+      },
       {
         "command": "pythinker.newConversation",
         "title": "Pythinker Code: New Conversation",
@@ -154,6 +159,64 @@
         "key": "alt+k",
         "mac": "alt+k",
         "when": "editorTextFocus"
+      },
+      {
+        "command": "pythinker.newConversation",
+        "key": "ctrl+alt+n",
+        "mac": "cmd+alt+n"
+      }
+    ],
+    "walkthroughs": [
+      {
+        "id": "pythinkerGettingStarted",
+        "title": "Get started with Pythinker Code",
+        "description": "Set up Pythinker Code and run your first conversation.",
+        "steps": [
+          {
+            "id": "openView",
+            "title": "Open the Pythinker view",
+            "description": "Select the Pythinker icon in the Activity Bar to open the chat view.\n[Open Pythinker](command:pythinker.webview.focus)",
+            "media": {
+              "markdown": "walkthrough/open-view.md"
+            },
+            "completionEvents": [
+              "onView:pythinker.webview"
+            ]
+          },
+          {
+            "id": "signIn",
+            "title": "Sign in or add a provider",
+            "description": "Sign in with your Pythinker account, or add a model provider with your own API key.",
+            "media": {
+              "markdown": "walkthrough/sign-in.md"
+            },
+            "completionEvents": [
+              "onContext:pythinker.isLoggedIn"
+            ]
+          },
+          {
+            "id": "firstConversation",
+            "title": "Run your first conversation",
+            "description": "Send a request and learn how the approval modes control what the agent can do.\n[New Conversation](command:pythinker.newConversation)",
+            "media": {
+              "markdown": "walkthrough/first-conversation.md"
+            },
+            "completionEvents": [
+              "onCommand:pythinker.newConversation"
+            ]
+          },
+          {
+            "id": "referenceCode",
+            "title": "Reference your code",
+            "description": "Use @ mentions and Alt+K to point Pythinker at the exact files and lines you mean.",
+            "media": {
+              "markdown": "walkthrough/reference-code.md"
+            },
+            "completionEvents": [
+              "onCommand:pythinker.insertMention"
+            ]
+          }
+        ]
       }
     ],
     "viewsContainers": {
@@ -208,6 +271,10 @@
           "command": "pythinker.insertMention",
           "when": "true"
         },
+        {
+          "command": "pythinker.addTerminalSelection",
+          "when": "false"
+        },
         {
           "command": "pythinker.newConversation",
           "when": "true"
@@ -228,8 +295,14 @@
       "editor/context": [
         {
           "command": "pythinker.insertMention",
-          "group": "pythoughts",
-          "when": "editorTextFocus"
+          "group": "pythinker@1",
+          "when": "editorHasSelection"
+        }
+      ],
+      "terminal/context": [
+        {
+          "command": "pythinker.addTerminalSelection",
+          "group": "pythinker@1"
         }
       ]
     }
@@ -259,12 +332,11 @@
     "@types/node": "^22.15.3",
     "@types/react": "^19.1.2",
     "@types/react-dom": "^19.1.2",
-    "@types/react-scroll-to-bottom": "^4.2.5",
     "@types/react-syntax-highlighter": "^15.5.13",
     "@types/vscode": "1.100.0",
     "@vitejs/plugin-react": "^4.4.1",
     "@vscode/test-cli": "^0.0.11",
-    "@vscode/test-electron": "^2.5.2",
+    "@vscode/test-electron": "^3.1.0",
     "@vscode/vsce": "3.9.2",
     "acorn": "8.17.0",
     "ovsx": "1.0.2",
@@ -275,7 +347,6 @@
   },
   "dependencies": {
     "@base-ui/react": "^1.0.0",
-    "@fontsource-variable/inter": "5.2.8",
     "@pythoughts/pythinker-code-sdk": "workspace:^",
     "@radix-ui/react-accordion": "^1.2.12",
     "@tabler/icons-react": "^3.36.0",
@@ -293,8 +364,8 @@
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-markdown": "^10.1.0",
-    "react-scroll-to-bottom": "^4.2.0",
     "react-syntax-highlighter": "^16.1.0",
+    "react-virtuoso": "^4.18.11",
     "rehype-katex": "^7.0.1",
     "remark-gfm": "^4.0.1",
     "remark-math": "^6.0.0",
diff --git a/apps/vscode/shared/bridge.ts b/apps/vscode/shared/bridge.ts
index 2a6e896d..e042a6b4 100644
--- a/apps/vscode/shared/bridge.ts
+++ b/apps/vscode/shared/bridge.ts
@@ -19,6 +19,7 @@ export const Methods = {
   Login: "login",
   Logout: "logout",
   SaveConfig: "saveConfig",
+  GetConfigInfo: "getConfigInfo",
   GetExtensionConfig: "getExtensionConfig",
   SaveExtensionConfig: "saveExtensionConfig",
   OpenSettings: "openSettings",
@@ -103,7 +104,6 @@ export const Events = {
   InsertMention: "insertMention",
   NewConversation: "newConversation",
   FileChangesUpdated: "fileChangesUpdated",
-  RollbackInput: "rollbackInput",
 } as const;
 
 const rpcMethods = new Set<string>(Object.values(Methods));
@@ -142,6 +142,7 @@ function validateParams(method: RpcMethod, params: unknown): boolean {
     case Methods.CheckLoginStatus:
     case Methods.Login:
     case Methods.Logout:
+    case Methods.GetConfigInfo:
     case Methods.GetExtensionConfig:
     case Methods.OpenSettings:
     case Methods.OpenFolder:
diff --git a/apps/vscode/shared/legacy-sdk.ts b/apps/vscode/shared/legacy-sdk.ts
index 63de4074..e992ac3a 100644
--- a/apps/vscode/shared/legacy-sdk.ts
+++ b/apps/vscode/shared/legacy-sdk.ts
@@ -196,6 +196,8 @@ export interface ModelConfig {
   name: string;
   provider: string;
   capabilities: string[];
+  /** Maximum context size in tokens, from the model alias config (maxContextSize). */
+  contextWindow?: number;
   adaptive_thinking?: boolean;
   support_efforts?: string[];
   default_effort?: string;
diff --git a/apps/vscode/shared/types.ts b/apps/vscode/shared/types.ts
index c9b86a30..491d04bd 100644
--- a/apps/vscode/shared/types.ts
+++ b/apps/vscode/shared/types.ts
@@ -36,6 +36,13 @@ export interface ExtensionConfig {
   version: string;
 }
 
+/** The user's local config file, verbatim. Content is the raw on-disk text and may contain API keys. */
+export interface ConfigInfo {
+  path: string | null;
+  exists: boolean;
+  content: string | null;
+}
+
 export interface WorkspaceStatus {
   hasWorkspace: boolean;
   path?: string;
diff --git a/apps/vscode/src/PythinkerWebviewProvider.ts b/apps/vscode/src/PythinkerWebviewProvider.ts
index 94090bf5..f46afc1a 100644
--- a/apps/vscode/src/PythinkerWebviewProvider.ts
+++ b/apps/vscode/src/PythinkerWebviewProvider.ts
@@ -19,6 +19,8 @@ function getNonce(): string {
 export class PythinkerWebviewProvider implements vscode.WebviewViewProvider {
   private webviews = new Map<string, vscode.Webview>();
   private bridgeHandler: BridgeHandler;
+  private sidebarView: vscode.WebviewView | undefined;
+  private badgeCount = 0;
 
   constructor(
     private readonly extensionUri: vscode.Uri,
@@ -51,13 +53,37 @@ export class PythinkerWebviewProvider implements vscode.WebviewViewProvider {
   resolveWebviewView(webviewView: vscode.WebviewView): void {
     const webviewId = `sidebar_${crypto.randomUUID()}`;
     this.setupWebview(webviewId, webviewView.webview);
+    this.sidebarView = webviewView;
+    this.applyBadge();
 
     webviewView.onDidDispose(() => {
       void this.bridgeHandler.disposeView(webviewId);
       this.webviews.delete(webviewId);
+      if (this.sidebarView === webviewView) this.sidebarView = undefined;
     });
   }
 
+  /** Shows `count` pending approval requests on the sidebar view; 0 clears the badge. */
+  setSidebarBadge(count: number): void {
+    this.badgeCount = count;
+    this.applyBadge();
+  }
+
+  private applyBadge(): void {
+    const view = this.sidebarView;
+    if (view === undefined) return;
+    view.badge =
+      this.badgeCount > 0
+        ? {
+            value: this.badgeCount,
+            tooltip:
+              this.badgeCount === 1
+                ? "1 approval request waits for your decision"
+                : `${this.badgeCount} approval requests wait for your decision`,
+          }
+        : undefined;
+  }
+
   createPanel(): vscode.WebviewPanel {
     const webviewId = `panel_${crypto.randomUUID()}`;
 
diff --git a/apps/vscode/src/activity.ts b/apps/vscode/src/activity.ts
new file mode 100644
index 00000000..425b6e99
--- /dev/null
+++ b/apps/vscode/src/activity.ts
@@ -0,0 +1,42 @@
+/**
+ * Host-side activity counters for the status bar and view badge. Streams are
+ * counted around the StreamChat handler; approvals and questions are counted
+ * in the reverse-RPC controller. No `vscode` import on purpose: the runtime
+ * files that call in here run under plain-node vitest.
+ */
+
+export interface ActivityStatus {
+  readonly activeStreams: number;
+  readonly pendingApprovals: number;
+}
+
+type ActivityListener = (status: ActivityStatus) => void;
+
+let activeStreams = 0;
+let pendingApprovals = 0;
+const listeners = new Set<ActivityListener>();
+
+export function getActivity(): ActivityStatus {
+  return { activeStreams, pendingApprovals };
+}
+
+export function onActivityChange(listener: ActivityListener): () => void {
+  listeners.add(listener);
+  return () => listeners.delete(listener);
+}
+
+export function trackStream(delta: number): void {
+  activeStreams = Math.max(0, activeStreams + delta);
+  fire();
+}
+
+export function trackApprovals(delta: number): void {
+  if (delta === 0) return;
+  pendingApprovals = Math.max(0, pendingApprovals + delta);
+  fire();
+}
+
+function fire(): void {
+  const status = getActivity();
+  for (const listener of listeners) listener(status);
+}
diff --git a/apps/vscode/src/config/vscode-settings.ts b/apps/vscode/src/config/vscode-settings.ts
index c0c14c53..31e200b1 100644
--- a/apps/vscode/src/config/vscode-settings.ts
+++ b/apps/vscode/src/config/vscode-settings.ts
@@ -27,7 +27,7 @@ export const VSCodeSettings = {
   },
 
   get showThinkingContent(): boolean {
-    return getConfig().get<boolean>("showThinkingContent", false);
+    return getConfig().get<boolean>("showThinkingContent", true);
   },
 
   get showThinkingExpanded(): boolean {
diff --git a/apps/vscode/src/extension.ts b/apps/vscode/src/extension.ts
index 088b564d..5680cdc6 100644
--- a/apps/vscode/src/extension.ts
+++ b/apps/vscode/src/extension.ts
@@ -2,7 +2,11 @@ import * as vscode from "vscode";
 
 import { Events } from "../shared/bridge";
 import { PythinkerWebviewProvider } from "./PythinkerWebviewProvider";
+import { getActivity, onActivityChange, type ActivityStatus } from "./activity";
 import { onSettingsChange, VSCodeSettings } from "./config/vscode-settings";
+import { performLogout } from "./handlers/auth.handler";
+import { clearInputHistory } from "./handlers/workspace.handler";
+import { registerChatContext } from "./integrations/chat-context";
 import { defaultPermissionMode } from "./runtime/permission-mode";
 import { updateLoginContext } from "./utils/context";
 
@@ -56,11 +60,35 @@ export async function activate(context: vscode.ExtensionContext): Promise<void>
       webviewOptions: { retainContextWhenHidden: true },
     }));
 
+  const statusItem = vscode.window.createStatusBarItem(vscode.StatusBarAlignment.Right, 100);
+  statusItem.name = "Pythinker Code";
+  statusItem.command = "pythinker.webview.focus";
+  const renderActivity = (activity: ActivityStatus): void => {
+    if (activity.pendingApprovals > 0) {
+      statusItem.text = "$(bell) Pythinker: approval needed";
+      statusItem.tooltip =
+        activity.pendingApprovals === 1
+          ? "1 request waits for your decision"
+          : `${activity.pendingApprovals} requests wait for your decision`;
+      statusItem.backgroundColor = new vscode.ThemeColor("statusBarItem.warningBackground");
+    } else if (activity.activeStreams > 0) {
+      statusItem.text = "$(sync~spin) Pythinker";
+      statusItem.tooltip = "Pythinker works on your request";
+      statusItem.backgroundColor = undefined;
+    } else {
+      statusItem.text = "$(sparkle) Pythinker";
+      statusItem.tooltip = "Open Pythinker Code";
+      statusItem.backgroundColor = undefined;
+    }
+    statusItem.show();
+    provider?.setSidebarBadge(activity.pendingApprovals);
+  };
+  renderActivity(getActivity());
+  context.subscriptions.push(statusItem, { dispose: onActivityChange(renderActivity) });
+
   const commands: Record<string, () => void | Promise<void>> = {
     "pythinker.clearAllState": async () => {
-      await context.globalState.update("pythinker.config", undefined);
-      await context.globalState.update("pythinker.mcpServers", undefined);
-      await context.workspaceState.update("pythinker.mcpEnabled", undefined);
+      await clearInputHistory(context.workspaceState);
       await vscode.window.showInformationMessage("Pythinker: Extension UI state cleared.");
     },
     "pythinker.openInTab": () => {
@@ -91,8 +119,17 @@ export async function activate(context: vscode.ExtensionContext): Promise<void>
     "pythinker.showLogs": () => outputChannel?.show(),
     "pythinker.resetPythinker": () => provider?.resetAllWebviews(),
     "pythinker.logout": async () => {
-      await vscode.commands.executeCommand("pythinker.webview.focus");
-      await vscode.window.showInformationMessage("Use the logout button in Pythinker settings.");
+      if (!provider) return;
+      const result = await performLogout(provider.harness, logError);
+      if (!result.success) {
+        await vscode.window.showErrorMessage(
+          `Pythinker: Sign out failed.${result.error ? ` ${result.error}` : ""}`,
+        );
+        return;
+      }
+      // No login-state broadcast exists on the bridge; a reload re-runs the
+      // webview init, which re-checks the login status and provider list.
+      provider.reloadAllWebviews();
     },
   };
 
@@ -100,6 +137,15 @@ export async function activate(context: vscode.ExtensionContext): Promise<void>
     context.subscriptions.push(vscode.commands.registerCommand(id, handler));
   }
 
+  context.subscriptions.push(
+    ...registerChatContext({
+      insertMention: (uri, selection) =>
+        provider?.insertEditorMention(uri, selection) ?? Promise.resolve(false),
+      insertText: (text) => provider?.broadcast(Events.InsertMention, { mention: text }),
+      logError,
+    }),
+  );
+
   log("Pythinker Code activated");
 }
 
diff --git a/apps/vscode/src/handlers/auth.handler.ts b/apps/vscode/src/handlers/auth.handler.ts
index d3f33693..4d158d55 100644
--- a/apps/vscode/src/handlers/auth.handler.ts
+++ b/apps/vscode/src/handlers/auth.handler.ts
@@ -1,4 +1,4 @@
-import { runLogin } from "@pythoughts/pythinker-code-sdk";
+import { runLogin, type PythinkerHarness } from "@pythoughts/pythinker-code-sdk";
 import * as vscode from "vscode";
 
 import { Methods } from "../../shared/bridge";
@@ -80,42 +80,53 @@ export const authHandlers: Record<string, Handler<any, any>> = {
   },
 
   [Methods.Logout]: async (_, ctx): Promise<LoginResult> => {
-    try {
-      // Only providers a login created carry a `source` (catalog id, custom
-      // registry URL, or the OpenAI Codex OAuth marker). Hand-written
-      // `config.toml` entries have none and must survive a sign-out. One
-      // `replaceConfig` write so a failure cannot leave a half-signed-out
-      // config behind.
-      const config = await ctx.harness.getConfig({ reload: true });
-      const providers = Object.fromEntries(
-        Object.entries(config.providers ?? {}).filter(([, provider]) => provider.source === undefined),
-      );
-      const removed = new Set(
-        Object.keys(config.providers ?? {}).filter((id) => providers[id] === undefined),
-      );
-      const models = Object.fromEntries(
-        Object.entries(config.models ?? {}).filter(([, alias]) => !removed.has(alias.provider)),
-      );
-      await ctx.harness.replaceConfig({
-        ...config,
-        providers,
-        models,
-        defaultModel:
-          config.defaultModel !== undefined && models[config.defaultModel] === undefined
-            ? undefined
-            : config.defaultModel,
-      });
-      await updateLoginContext(ctx.harness);
-      return { success: true };
-    } catch (error) {
-      ctx.logError("Pythinker logout failed", error);
-      await updateLoginContext(ctx.harness).catch((statusError: unknown) => {
-        ctx.logError("Unable to refresh login status after a failed logout", statusError);
-      });
-      return {
-        success: false,
-        error: error instanceof Error ? error.message : String(error),
-      };
-    }
+    return performLogout(ctx.harness, ctx.logError);
   },
 };
+
+/**
+ * The one logout path — shared by the webview bridge and the
+ * `pythinker.logout` command.
+ */
+export async function performLogout(
+  harness: PythinkerHarness,
+  logError: (message: string, error: unknown) => void,
+): Promise<LoginResult> {
+  try {
+    // Only providers a login created carry a `source` (catalog id, custom
+    // registry URL, or the OpenAI Codex OAuth marker). Hand-written
+    // `config.toml` entries have none and must survive a sign-out. One
+    // `replaceConfig` write so a failure cannot leave a half-signed-out
+    // config behind.
+    const config = await harness.getConfig({ reload: true });
+    const providers = Object.fromEntries(
+      Object.entries(config.providers ?? {}).filter(([, provider]) => provider.source === undefined),
+    );
+    const removed = new Set(
+      Object.keys(config.providers ?? {}).filter((id) => providers[id] === undefined),
+    );
+    const models = Object.fromEntries(
+      Object.entries(config.models ?? {}).filter(([, alias]) => !removed.has(alias.provider)),
+    );
+    await harness.replaceConfig({
+      ...config,
+      providers,
+      models,
+      defaultModel:
+        config.defaultModel !== undefined && models[config.defaultModel] === undefined
+          ? undefined
+          : config.defaultModel,
+    });
+    await updateLoginContext(harness);
+    return { success: true };
+  } catch (error) {
+    logError("Pythinker logout failed", error);
+    await updateLoginContext(harness).catch((statusError: unknown) => {
+      logError("Unable to refresh login status after a failed logout", statusError);
+    });
+    return {
+      success: false,
+      error: error instanceof Error ? error.message : String(error),
+    };
+  }
+}
diff --git a/apps/vscode/src/handlers/chat.handler.ts b/apps/vscode/src/handlers/chat.handler.ts
index a3d416e8..021c1344 100644
--- a/apps/vscode/src/handlers/chat.handler.ts
+++ b/apps/vscode/src/handlers/chat.handler.ts
@@ -5,6 +5,7 @@ import { Events, Methods } from "../../shared/bridge";
 import type { ApprovalResponse, ContentPart } from "../../shared/legacy-sdk";
 import { getUserMessage } from "../../shared/errors";
 import type { ErrorPhase } from "../../shared/types";
+import { trackStream } from "../activity";
 import { VSCodeSettings } from "../config/vscode-settings";
 import { defaultPermissionMode } from "../runtime/permission-mode";
 import { normalizeEffort } from "../runtime/pythinker-runtime";
@@ -212,7 +213,16 @@ const resetSession: Handler<void, { ok: boolean }> = async (_, ctx) => {
 };
 
 export const chatHandlers: Record<string, Handler<any, any>> = {
-  [Methods.StreamChat]: streamChat,
+  // The stream is active for exactly the lifetime of the StreamChat request:
+  // the handler resolves only when the turn reaches its terminal event.
+  [Methods.StreamChat]: async (params: StreamChatParams, ctx) => {
+    trackStream(1);
+    try {
+      return await streamChat(params, ctx);
+    } finally {
+      trackStream(-1);
+    }
+  },
   [Methods.AbortChat]: abortChat,
   [Methods.RespondApproval]: respondApproval,
   [Methods.RespondQuestion]: respondQuestion,
diff --git a/apps/vscode/src/handlers/config.handler.ts b/apps/vscode/src/handlers/config.handler.ts
index 4804b2eb..63c71d85 100644
--- a/apps/vscode/src/handlers/config.handler.ts
+++ b/apps/vscode/src/handlers/config.handler.ts
@@ -1,3 +1,4 @@
+import { readFile } from "node:fs/promises";
 import * as vscode from "vscode";
 import { buildSkillSlashCommands, type SkillSlashCommand } from "@pythoughts/pythinker-code-sdk";
 type SdkConfig = any;
@@ -8,7 +9,7 @@ import type {
   ModelsConfig,
   SlashCommandInfo,
 } from "../../shared/legacy-sdk";
-import type { ExtensionConfig, SessionConfig } from "../../shared/types";
+import type { ConfigInfo, ExtensionConfig, SessionConfig } from "../../shared/types";
 import { VSCodeSettings } from "../config/vscode-settings";
 import { normalizeEffort } from "../runtime/pythinker-runtime";
 import type { Handler } from "./types";
@@ -68,6 +69,23 @@ const saveConfig: Handler<SessionConfig, { ok: boolean }> = async (params, ctx)
   return { ok: true };
 };
 
+/**
+ * The raw config file, verbatim — deliberately NOT the parsed+redacted webview
+ * config. It is the user's own local file rendered in their own editor, so any
+ * API keys in it are shown as-is; nothing is redacted silently.
+ */
+const getConfigInfo: Handler<void, ConfigInfo> = async (_, ctx) => {
+  const path = ctx.harness.configPath;
+  try {
+    return { path, exists: true, content: await readFile(path, "utf8") };
+  } catch (error) {
+    if ((error as NodeJS.ErrnoException).code === "ENOENT") {
+      return { path, exists: false, content: null };
+    }
+    throw error;
+  }
+};
+
 const getExtensionConfig: Handler<void, ExtensionConfig> = async () => {
   return VSCodeSettings.getExtensionConfig();
 };
@@ -132,6 +150,7 @@ const reloadWebview: Handler<void, { ok: boolean }> = async (_, ctx) => {
 
 export const configHandlers = {
   [Methods.SaveConfig]: saveConfig,
+  [Methods.GetConfigInfo]: getConfigInfo,
   [Methods.GetExtensionConfig]: getExtensionConfig,
   [Methods.SaveExtensionConfig]: saveExtensionConfig,
   [Methods.OpenSettings]: openSettings,
@@ -159,6 +178,7 @@ function toWebviewModel(id: string, model: any): ModelConfig {
     name: model.displayName ?? model.model ?? id,
     provider: model.provider ?? "unknown",
     capabilities: [...(model.capabilities ?? [])],
+    contextWindow: typeof model.maxContextSize === "number" ? model.maxContextSize : undefined,
     adaptive_thinking: model.adaptiveThinking,
     support_efforts:
       model.supportEfforts === undefined ? undefined : [...model.supportEfforts],
diff --git a/apps/vscode/src/handlers/workspace.handler.ts b/apps/vscode/src/handlers/workspace.handler.ts
index c11c8c91..dacb2529 100644
--- a/apps/vscode/src/handlers/workspace.handler.ts
+++ b/apps/vscode/src/handlers/workspace.handler.ts
@@ -19,6 +19,10 @@ const openFolder: Handler<void, { ok: boolean }> = async () => {
   return { ok: true };
 };
 
+export async function clearInputHistory(workspaceState: vscode.Memento): Promise<void> {
+  await workspaceState.update(INPUT_HISTORY_KEY, undefined);
+}
+
 const getInputHistory: Handler<void, string[]> = async (_, ctx) => {
   return ctx.workspaceState.get<string[]>(INPUT_HISTORY_KEY, []);
 };
diff --git a/apps/vscode/src/integrations/chat-context.ts b/apps/vscode/src/integrations/chat-context.ts
new file mode 100644
index 00000000..69447244
--- /dev/null
+++ b/apps/vscode/src/integrations/chat-context.ts
@@ -0,0 +1,114 @@
+import * as vscode from "vscode";
+
+/**
+ * Editor and terminal entry points that push context into the chat input.
+ * All inserts go through the existing insertMention flow — no new webview
+ * protocol.
+ */
+export interface ChatContextDeps {
+  /** Insert an @file mention into the open webviews; false when no webview can mention the file. */
+  insertMention(documentUri: vscode.Uri, selection: vscode.Selection): Promise<boolean>;
+  /** Append plain text to the chat input of the open webviews. */
+  insertText(text: string): void;
+  logError(message: string, error: unknown): void;
+}
+
+const OUTSIDE_WORKDIR_WARNING = "The active file is outside the selected working directory.";
+
+class PythinkerCodeActionProvider implements vscode.CodeActionProvider {
+  // Built at registration time: the VSIX audit imports this bundle with an
+  // empty `vscode` stub, so module-load code must not touch vscode members.
+  static metadata(): vscode.CodeActionProviderMetadata {
+    return { providedCodeActionKinds: [vscode.CodeActionKind.QuickFix] };
+  }
+
+  provideCodeActions(
+    document: vscode.TextDocument,
+    _range: vscode.Range,
+    context: vscode.CodeActionContext,
+  ): vscode.CodeAction[] {
+    const editor = vscode.window.activeTextEditor;
+    const selection =
+      editor?.document === document && !editor.selection.isEmpty ? editor.selection : undefined;
+    const diagnosticRange = context.diagnostics.reduce<vscode.Range | undefined>(
+      (union, diagnostic) => (union ? union.union(diagnostic.range) : diagnostic.range),
+      undefined,
+    );
+    const target = selection ?? diagnosticRange;
+    if (!target) return [];
+
+    const addAction = new vscode.CodeAction("Add to Pythinker", vscode.CodeActionKind.QuickFix);
+    addAction.command = {
+      command: "pythinker.addToChat",
+      title: "Add to Pythinker",
+      arguments: [document.uri, target],
+    };
+    const actions = [addAction];
+
+    if (diagnosticRange) {
+      const fixAction = new vscode.CodeAction("Fix with Pythinker", vscode.CodeActionKind.QuickFix);
+      fixAction.command = {
+        command: "pythinker.fixWithPythinker",
+        title: "Fix with Pythinker",
+        arguments: [document.uri, diagnosticRange, [...context.diagnostics]],
+      };
+      actions.push(fixAction);
+    }
+    return actions;
+  }
+}
+
+export function registerChatContext(deps: ChatContextDeps): vscode.Disposable[] {
+  const insertMention = async (uri: vscode.Uri, range: vscode.Range): Promise<void> => {
+    await vscode.commands.executeCommand("pythinker.webview.focus");
+    if (!(await deps.insertMention(uri, new vscode.Selection(range.start, range.end)))) {
+      await vscode.window.showWarningMessage(OUTSIDE_WORKDIR_WARNING);
+    }
+  };
+
+  return [
+    vscode.languages.registerCodeActionsProvider(
+      "*",
+      new PythinkerCodeActionProvider(),
+      PythinkerCodeActionProvider.metadata(),
+    ),
+
+    vscode.commands.registerCommand(
+      "pythinker.addToChat",
+      (uri: vscode.Uri, range: vscode.Range) => insertMention(uri, range),
+    ),
+
+    vscode.commands.registerCommand(
+      "pythinker.fixWithPythinker",
+      async (uri: vscode.Uri, range: vscode.Range, diagnostics: vscode.Diagnostic[]) => {
+        const problems = diagnostics.map((diagnostic) => diagnostic.message.trim()).join("; ");
+        await vscode.commands.executeCommand("pythinker.webview.focus");
+        deps.insertText(`Fix these problems: ${problems}`);
+        await insertMention(uri, range);
+      },
+    ),
+
+    vscode.commands.registerCommand("pythinker.addTerminalSelection", async () => {
+      // Clipboard round-trip: workbench.action.terminal.copySelection is the
+      // only way to read the terminal selection, so save and restore the
+      // user's clipboard around it. A sentinel distinguishes "no selection"
+      // (copySelection is a no-op) from a selection that happens to equal the
+      // old clipboard content.
+      const previousClipboard = await vscode.env.clipboard.readText();
+      const sentinel = `__pythinker_no_selection_${Date.now()}__`;
+      let selection = "";
+      try {
+        await vscode.env.clipboard.writeText(sentinel);
+        await vscode.commands.executeCommand("workbench.action.terminal.copySelection");
+        selection = (await vscode.env.clipboard.readText()).trim();
+      } catch (error) {
+        deps.logError("Unable to read the terminal selection", error);
+      } finally {
+        await vscode.env.clipboard.writeText(previousClipboard);
+      }
+      if (!selection || selection === sentinel) return;
+      await vscode.commands.executeCommand("pythinker.webview.focus");
+      deps.insertText(`Terminal output:\n\`\`\`\n${selection}\n\`\`\``);
+    }),
+  ];
+}
diff --git a/apps/vscode/src/runtime/reverse-rpc.ts b/apps/vscode/src/runtime/reverse-rpc.ts
index e49e8b19..73c21ccf 100644
--- a/apps/vscode/src/runtime/reverse-rpc.ts
+++ b/apps/vscode/src/runtime/reverse-rpc.ts
@@ -8,6 +8,7 @@ import type {
 } from "@pythoughts/pythinker-code-sdk";
 
 import type { ApprovalResponse, QuestionRequest as LegacyQuestionRequest } from "../../shared/legacy-sdk";
+import { trackApprovals } from "../activity";
 import { describeToolDisplay, toLegacyDisplay } from "./tool-display";
 
 export type ReverseRpcEvent =
@@ -24,6 +25,7 @@ export class ReverseRpcController {
     const id = randomUUID();
     return new Promise((resolve) => {
       this.approvals.set(id, resolve);
+      trackApprovals(1);
       this.emit({ type: "ApprovalRequest", payload: approvalPayload(id, request) });
     });
   }
@@ -32,6 +34,7 @@ export class ReverseRpcController {
     const id = randomUUID();
     return new Promise((resolve) => {
       this.questions.set(id, resolve);
+      trackApprovals(1);
       this.emit({
         type: "QuestionRequest",
         payload: {
@@ -55,6 +58,7 @@ export class ReverseRpcController {
     const resolve = this.approvals.get(id);
     if (!resolve) return false;
     this.approvals.delete(id);
+    trackApprovals(-1);
     if (response === "approve_for_session") {
       resolve({ decision: "approved", scope: "session" });
     } else if (response === "approve") {
@@ -69,11 +73,13 @@ export class ReverseRpcController {
     const resolve = this.questions.get(id);
     if (!resolve) return false;
     this.questions.delete(id);
+    trackApprovals(-1);
     resolve({ answers });
     return true;
   }
 
   cancelAll(reason: string): void {
+    trackApprovals(-(this.approvals.size + this.questions.size));
     for (const resolve of this.approvals.values()) {
       resolve({ decision: "cancelled", feedback: reason });
     }
diff --git a/apps/vscode/walkthrough/first-conversation.md b/apps/vscode/walkthrough/first-conversation.md
new file mode 100644
index 00000000..039c2ab3
--- /dev/null
+++ b/apps/vscode/walkthrough/first-conversation.md
@@ -0,0 +1,17 @@
+# Run your first conversation
+
+1. Open a folder in VS Code. Pythinker works inside your workspace.
+2. Type a request in the chat input, for example: "Explain this repository."
+3. Press `Enter` to send it.
+
+Start a fresh conversation at any time with `Ctrl+Alt+N` (`Cmd+Alt+N` on Mac).
+
+## Approval modes
+
+Pythinker asks before it runs actions that change your files or your system. Three modes control this:
+
+- **Manual** — Pythinker asks you to approve each sensitive action. This is the default.
+- **Auto** — Pythinker approves tool calls and dismisses questions automatically.
+- **YOLO** — Pythinker approves regular tool calls automatically, but can still ask you questions.
+
+Type `/auto` or `/yolo` in the chat to change the mode. When a request waits for your decision, the status bar shows a bell and the Pythinker view shows a badge.
diff --git a/apps/vscode/walkthrough/open-view.md b/apps/vscode/walkthrough/open-view.md
new file mode 100644
index 00000000..957f4fa1
--- /dev/null
+++ b/apps/vscode/walkthrough/open-view.md
@@ -0,0 +1,10 @@
+# Open the Pythinker view
+
+Select the Pythinker icon in the Activity Bar to open the chat view.
+
+Other ways to get there:
+
+- Press `Ctrl+Shift+K` (`Cmd+Shift+K` on Mac) to focus the chat input from anywhere.
+- Run **Pythinker Code: Open in New Tab** to use Pythinker in a full editor tab.
+
+The status bar shows a Pythinker item on the right. Click it to open the view at any time.
diff --git a/apps/vscode/walkthrough/reference-code.md b/apps/vscode/walkthrough/reference-code.md
new file mode 100644
index 00000000..a059c3fd
--- /dev/null
+++ b/apps/vscode/walkthrough/reference-code.md
@@ -0,0 +1,9 @@
+# Reference your code
+
+Give Pythinker the exact files and lines you mean:
+
+- Type `@` in the chat input to search the workspace and attach a file to your message.
+- Put the cursor in an editor (or select some lines) and press `Alt+K`. Pythinker inserts a mention of that file into the chat input.
+- A selection adds the line range to the mention, so Pythinker reads exactly the code you selected.
+
+You can also right-click in an editor and select **Pythinker Code: Insert Current File**.
diff --git a/apps/vscode/walkthrough/sign-in.md b/apps/vscode/walkthrough/sign-in.md
new file mode 100644
index 00000000..1ef22673
--- /dev/null
+++ b/apps/vscode/walkthrough/sign-in.md
@@ -0,0 +1,10 @@
+# Sign in or add a provider
+
+Pythinker Code can talk to many model providers. Set up one of these:
+
+- **Pythinker account** — select **Sign in** in the chat view. A browser window opens to complete the sign-in.
+- **Your own API key** — open the settings menu in the chat view and add a provider from the catalog. Enter your API key for that provider.
+
+You do this once. Pythinker stores the configuration and uses it for all later sessions.
+
+To sign out later, run **Pythinker Code: Logout** from the Command Palette.
diff --git a/apps/vscode/webview-ui/src/App.tsx b/apps/vscode/webview-ui/src/App.tsx
index f066d5f0..0531e538 100644
--- a/apps/vscode/webview-ui/src/App.tsx
+++ b/apps/vscode/webview-ui/src/App.tsx
@@ -3,10 +3,8 @@ import { useEffect, useState, useCallback } from "react";
 import { Header } from "./components/Header";
 import { ChatArea } from "./components/ChatArea";
 import { InputArea } from "./components/inputarea/InputArea";
-import { MCPServersModal } from "./components/MCPServersModal";
-import { ProvidersModal } from "./components/ProvidersModal";
 import { WorkDirModal } from "./components/WorkDirModal";
-import { SettingsDialog } from "./components/SettingsDialog";
+import { ConfigHub } from "./components/confighub/ConfigHub";
 import { ConfigErrorScreen } from "./components/ConfigErrorScreen";
 import { LoginScreen } from "./components/LoginScreen";
 import { Toaster, toast } from "./components/ui/sonner";
@@ -19,13 +17,12 @@ import "./styles/index.css";
 
 function MainContent({ onAuthAction }: { onAuthAction: () => void }) {
   const { processEvent, startNewConversation, sessionId } = useChatStore();
-  const { setMCPServers, setExtensionConfig, extensionConfig, setWireSlashCommands } = useSettingsStore();
+  const { setMCPServers, setExtensionConfig, extensionConfig, setWireSlashCommands, configHub } = useSettingsStore();
 
   useEffect(() => {
     return bridge.on(Events.StreamEvent, (event: UIStreamEvent) => {
       // Filter only when a session already exists to ensure session_start is handled properly
       if (sessionId && "_sessionId" in event && event._sessionId && event._sessionId !== sessionId) {
-        console.log("Ignored stream event from another session:", event._sessionId);
         return;
       }
       processEvent(event);
@@ -69,16 +66,19 @@ function MainContent({ onAuthAction }: { onAuthAction: () => void }) {
 
   return (
     <>
-      <div className="flex-1 min-h-0 relative group/chat">
-        <ChatArea />
-      </div>
-      <div className="shrink-0 max-h-[80vh] flex flex-col min-h-0">
-        <InputArea onAuthAction={onAuthAction} />
-      </div>
-      <MCPServersModal />
-      <ProvidersModal />
+      {configHub.open ? (
+        <ConfigHub />
+      ) : (
+        <>
+          <div className="flex-1 min-h-0 relative group/chat">
+            <ChatArea />
+          </div>
+          <div className="shrink-0 max-h-[80vh] flex flex-col min-h-0">
+            <InputArea onAuthAction={onAuthAction} />
+          </div>
+        </>
+      )}
       <WorkDirModal />
-      <SettingsDialog />
     </>
   );
 }
diff --git a/apps/vscode/webview-ui/src/components/ActionMenu.tsx b/apps/vscode/webview-ui/src/components/ActionMenu.tsx
index 23c02ae7..fe0586a6 100644
--- a/apps/vscode/webview-ui/src/components/ActionMenu.tsx
+++ b/apps/vscode/webview-ui/src/components/ActionMenu.tsx
@@ -33,7 +33,7 @@ function MenuItem({ onClick, disabled, danger, children }: { onClick: () => void
       className={cn(
         "w-full flex items-center gap-2 px-2.5 py-1.5 text-xs hover:bg-accent transition-colors text-left cursor-pointer",
         disabled && "opacity-50 cursor-not-allowed",
-        danger && "text-red-500 hover:text-red-600",
+        danger && "text-destructive hover:text-destructive/80",
       )}
     >
       {children}
@@ -44,7 +44,7 @@ function MenuItem({ onClick, disabled, danger, children }: { onClick: () => void
 export function ActionMenu({ className, onAuthAction }: ActionMenuProps) {
   const [open, setOpen] = useState(false);
   const [loading, setLoading] = useState(false);
-  const { setMCPModalOpen, setProvidersModalOpen, isLoggedIn, setIsLoggedIn, extensionConfig } = useSettingsStore();
+  const { openConfigHub, isLoggedIn, setIsLoggedIn, extensionConfig } = useSettingsStore();
 
   const handleOpenSettings = () => {
     void bridge.openSettings();
@@ -52,12 +52,12 @@ export function ActionMenu({ className, onAuthAction }: ActionMenuProps) {
   };
 
   const handleOpenProviders = () => {
-    setProvidersModalOpen(true);
+    openConfigHub("providers");
     setOpen(false);
   };
 
   const handleOpenMCPServers = () => {
-    setMCPModalOpen(true);
+    openConfigHub("mcp");
     setOpen(false);
   };
 
diff --git a/apps/vscode/webview-ui/src/components/ApprovalDialog.tsx b/apps/vscode/webview-ui/src/components/ApprovalDialog.tsx
index 6c2d8773..955d7d82 100644
--- a/apps/vscode/webview-ui/src/components/ApprovalDialog.tsx
+++ b/apps/vscode/webview-ui/src/components/ApprovalDialog.tsx
@@ -1,22 +1,29 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
 import { IconChevronDown, IconChevronUp } from "@tabler/icons-react";
 import { useApprovalStore } from "@/stores";
 import { DisplayBlocks } from "./DisplayBlocks";
 import { cn } from "@/lib/utils";
 import type { ApprovalResponse } from "shared/legacy-sdk";
 
+const focusComposer = () => document.querySelector<HTMLTextAreaElement>("textarea")?.focus();
+
 export function ApprovalDialog() {
   const { pending, respondToRequest } = useApprovalStore();
   const [selectedIndex, setSelectedIndex] = useState(1);
   const [expanded, setExpanded] = useState(false);
+  const cardRef = useRef<HTMLDivElement>(null);
+  // The request stays in the store until the RPC settles, so repeated key
+  // presses would send duplicate responses without this guard.
+  const inFlightRef = useRef(false);
 
   const req = pending[0];
 
-  // Auto-expand if there's a diff block (code change)
+  // Auto-expand if there's a diff block (code change); focus the card so number shortcuts work.
   useEffect(() => {
     if (req) {
       const hasDiff = req.display?.some((b) => b.type === "diff") ?? false;
       setExpanded(hasDiff);
+      cardRef.current?.focus();
     }
   }, [req?.id]);
 
@@ -24,9 +31,16 @@ export function ApprovalDialog() {
   const hasDisplay = req.display && req.display.length > 0;
 
   const handleResponse = async (response: ApprovalResponse) => {
-    await respondToRequest(req.id, response);
-    setSelectedIndex(1);
-    setExpanded(false);
+    if (inFlightRef.current) return;
+    inFlightRef.current = true;
+    try {
+      await respondToRequest(req.id, response);
+      setSelectedIndex(1);
+      setExpanded(false);
+      focusComposer();
+    } finally {
+      inFlightRef.current = false;
+    }
   };
 
   const options = [
@@ -35,11 +49,43 @@ export function ApprovalDialog() {
     { key: "reject", label: "No", index: 3 },
   ] as const;
 
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+    const digit = Number(e.key);
+    if (digit >= 1 && digit <= options.length) {
+      e.preventDefault();
+      const opt = options[digit - 1];
+      if (opt) void handleResponse(opt.key);
+    } else if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setSelectedIndex((i) => Math.min(i + 1, options.length));
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setSelectedIndex((i) => Math.max(i - 1, 1));
+    } else if (e.key === "Enter") {
+      e.preventDefault();
+      const opt = options[selectedIndex - 1];
+      if (opt) void handleResponse(opt.key);
+    } else if (e.key === "Escape") {
+      e.preventDefault();
+      focusComposer();
+    }
+  };
+
   return (
-    <div className={cn("mb-0.5 border border-blue-200 dark:border-blue-800 rounded-lg overflow-hidden bg-background flex flex-col shrink")}>
+    <div
+      ref={cardRef}
+      tabIndex={-1}
+      onKeyDown={handleKeyDown}
+      className={cn("mb-0.5 border border-brand/40 rounded-lg overflow-hidden bg-background flex flex-col shrink", "outline-none focus:ring-1 focus:ring-ring")}
+    >
       <div className="p-2 space-y-2 flex-1 min-h-0 overflow-hidden flex flex-col">
         <div className="flex items-center justify-between shrink-0">
-          <div className="text-xs font-semibold text-foreground">Allow this {req.action.toLowerCase()}?</div>
+          <div className="flex items-center gap-1.5 min-w-0">
+            <div className="text-xs font-semibold text-foreground">Allow this {req.action.toLowerCase()}?</div>
+            {pending.length > 1 && (
+              <span className="text-[10px] px-1.5 py-px rounded-full bg-badge text-badge-foreground shrink-0">+{pending.length - 1} more pending</span>
+            )}
+          </div>
           {hasDisplay && (
             <button onClick={() => setExpanded(!expanded)} className="p-1 hover:bg-muted rounded transition-colors">
               {expanded ? <IconChevronDown className="size-4 text-muted-foreground" /> : <IconChevronUp className="size-4 text-muted-foreground" />}
@@ -68,10 +114,10 @@ export function ApprovalDialog() {
               className={cn(
                 "w-full text-left px-2 py-1 rounded-md text-xs transition-colors",
                 "border border-border cursor-pointer",
-                selectedIndex === opt.index ? "bg-blue-500 text-white border-blue-500" : "bg-background hover:bg-muted/50",
+                selectedIndex === opt.index ? "bg-primary text-primary-foreground border-primary" : "bg-background hover:bg-muted/50",
               )}
             >
-              <span className={cn("mr-2", selectedIndex === opt.index ? "text-blue-200" : "text-muted-foreground")}>{opt.index}</span>
+              <span className={cn("mr-2", selectedIndex === opt.index ? "text-primary-foreground/70" : "text-muted-foreground")}>{opt.index}</span>
               <span className="font-medium">{opt.label}</span>
             </button>
           ))}
diff --git a/apps/vscode/webview-ui/src/components/BottomToolbar.tsx b/apps/vscode/webview-ui/src/components/BottomToolbar.tsx
index dde016c6..5ea27eac 100644
--- a/apps/vscode/webview-ui/src/components/BottomToolbar.tsx
+++ b/apps/vscode/webview-ui/src/components/BottomToolbar.tsx
@@ -83,7 +83,7 @@ export function BottomToolbar() {
                 <IconFileCode className="size-3.5" />
                 <span>{fileChanges.length} Changed</span>
                 <span className="text-[10px] tabular-nums">
-                  <span className="text-green-600 dark:text-green-400">+{fileStats.additions}</span> <span className="text-red-600 dark:text-red-400">-{fileStats.deletions}</span>
+                  <span className="text-success">+{fileStats.additions}</span> <span className="text-destructive">-{fileStats.deletions}</span>
                 </span>
                 <IconChevronUp className={cn("size-3 transition-transform", activeTab === "changes" && "rotate-180")} />
               </button>
diff --git a/apps/vscode/webview-ui/src/components/BrailleSpinner.tsx b/apps/vscode/webview-ui/src/components/BrailleSpinner.tsx
deleted file mode 100644
index 39cb958c..00000000
--- a/apps/vscode/webview-ui/src/components/BrailleSpinner.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { useState, useEffect } from "react";
-
-const BRAILLE_FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
-
-export function BrailleSpinner({ className }: { className?: string }) {
-  const [frameIndex, setFrameIndex] = useState(0);
-
-  useEffect(() => {
-    const timer = setInterval(() => {
-      setFrameIndex((prev) => (prev + 1) % BRAILLE_FRAMES.length);
-    }, 80);
-
-    return () => clearInterval(timer);
-  }, []);
-
-  return (
-    <span className={className} aria-hidden="true">
-      {BRAILLE_FRAMES[frameIndex]}
-    </span>
-  );
-}
diff --git a/apps/vscode/webview-ui/src/components/ChatArea.tsx b/apps/vscode/webview-ui/src/components/ChatArea.tsx
index 5d4f8e88..72f3da73 100644
--- a/apps/vscode/webview-ui/src/components/ChatArea.tsx
+++ b/apps/vscode/webview-ui/src/components/ChatArea.tsx
@@ -1,4 +1,5 @@
-import ScrollToBottom, { useScrollToBottom, useSticky } from "react-scroll-to-bottom";
+import { useRef, useState } from "react";
+import { Virtuoso, type VirtuosoHandle } from "react-virtuoso";
 import { IconArrowDown } from "@tabler/icons-react";
 import { ChatMessage } from "./ChatMessage";
 import { WelcomeScreen } from "./WelcomeScreen";
@@ -6,47 +7,25 @@ import { useChatStore } from "@/stores";
 import { cn } from "@/lib/utils";
 import { getForkTurnIndex } from "shared/fork-turn-index";
 
-function ScrollButton() {
-  const scrollToBottom = useScrollToBottom();
-  const [sticky] = useSticky();
-
-  if (sticky) return null;
-
+function ScrollButton({ onClick }: { onClick: () => void }) {
   return (
     <button
-      onClick={() => scrollToBottom()}
-      className={cn("absolute bottom-4 right-4 p-2 rounded-full z-10", "bg-blue-400 text-white shadow-lg", "hover:bg-blue-600 transition-all")}
+      onClick={onClick}
+      className={cn("absolute bottom-4 right-4 p-2 rounded-full z-10", "bg-primary text-primary-foreground shadow-lg", "hover:bg-primary/90 transition-all")}
     >
       <IconArrowDown className="size-4" />
     </button>
   );
 }
 
-function MessageList() {
+export function ChatArea() {
   const messages = useChatStore((s) => s.messages);
   const isStreaming = useChatStore((s) => s.isStreaming);
+  const sessionId = useChatStore((s) => s.sessionId);
+  const virtuosoRef = useRef<VirtuosoHandle>(null);
+  const [atBottom, setAtBottom] = useState(true);
 
-  return (
-    <>
-      <div className="">
-        {messages.map((message, idx) => (
-          <ChatMessage
-            key={message.id}
-            message={message}
-            turnIndex={getForkTurnIndex(messages, idx)}
-            isStreaming={isStreaming && idx === messages.length - 1 && message.role === "assistant"}
-          />
-        ))}
-      </div>
-      <ScrollButton />
-    </>
-  );
-}
-
-export function ChatArea() {
-  const messageCount = useChatStore((s) => s.messages.length);
-
-  if (messageCount === 0) {
+  if (messages.length === 0) {
     return (
       <div className="h-full flex items-center justify-center relative">
         <WelcomeScreen />
@@ -56,9 +35,41 @@ export function ChatArea() {
 
   return (
     <div className="h-full relative">
-      <ScrollToBottom className="h-full" scrollViewClassName="h-full overflow-y-auto overflow-x-hidden" followButtonClassName="hidden" initialScrollBehavior="auto">
-        <MessageList />
-      </ScrollToBottom>
+      <Virtuoso
+        ref={virtuosoRef}
+        // Remount on session switch so initialTopMostItemIndex re-anchors the
+        // replayed list at the bottom instead of keeping the old scroll offset.
+        key={sessionId ?? "new"}
+        className="h-full overflow-x-hidden"
+        data={messages}
+        computeItemKey={(_, message) => message.id}
+        initialTopMostItemIndex={messages.length - 1}
+        // "auto" sticks to the bottom on new rows only while already there;
+        // scrolling up breaks the pin, returning to the bottom restores it.
+        // Virtuoso also re-pins when the streaming tail grows in place.
+        followOutput="auto"
+        atBottomStateChange={setAtBottom}
+        atBottomThreshold={10}
+        // Pre-render a few hundred px above the viewport; keep everything below
+        // it mounted so the streaming tail never unmounts mid-stream (Cline's
+        // always-rendered-tail trick — cheap because below-viewport content is
+        // just the tail while pinned to the bottom).
+        increaseViewportBy={{ top: 400, bottom: Number.MAX_SAFE_INTEGER }}
+        // Virtuoso manages scroll position itself; native anchoring fights it.
+        style={{ overflowAnchor: "none" }}
+        itemContent={(idx, message) => (
+          <ChatMessage
+            message={message}
+            turnIndex={getForkTurnIndex(messages, idx)}
+            isStreaming={isStreaming && idx === messages.length - 1 && message.role === "assistant"}
+          />
+        )}
+      />
+      {!atBottom && (
+        <ScrollButton
+          onClick={() => virtuosoRef.current?.scrollToIndex({ index: messages.length - 1, align: "end", behavior: "smooth" })}
+        />
+      )}
     </div>
   );
 }
diff --git a/apps/vscode/webview-ui/src/components/ChatMessage.tsx b/apps/vscode/webview-ui/src/components/ChatMessage.tsx
index 67534678..b02bf732 100644
--- a/apps/vscode/webview-ui/src/components/ChatMessage.tsx
+++ b/apps/vscode/webview-ui/src/components/ChatMessage.tsx
@@ -1,5 +1,5 @@
 import { useState, Fragment, memo, type ReactNode } from "react";
-import { IconGitFork, IconBolt } from "@tabler/icons-react";
+import { IconGitFork } from "@tabler/icons-react";
 import { cn } from "@/lib/utils";
 import { Content } from "@/lib/content";
 import { Markdown } from "./Markdown";
@@ -12,7 +12,6 @@ import { MediaPreviewModal } from "./MediaPreviewModal";
 import { InlineError } from "./InlineError";
 import { PlanCard } from "./PlanCard";
 import { PythinkerLogo } from "./PythinkerLogo";
-import { useTokenSpeed } from "./ChatStatus";
 import { StreamingConfirmDialog } from "./StreamingConfirmDialog";
 import { Button } from "@/components/ui/button";
 import { toast } from "@/components/ui/sonner";
@@ -29,13 +28,11 @@ interface ChatMessageProps {
 }
 
 function ThinkingIndicator() {
-  const { speed } = useTokenSpeed();
-
   return (
     <div className="flex items-center gap-2.5 mt-1 py-1">
       <div className="flex min-w-0 items-center gap-2">
         <PythinkerLogo className="size-4 shrink-0" />
-        <span className="text-[11px] font-medium tracking-wide text-zinc-400 dark:text-zinc-300 flex items-center">
+        <span className="text-[11px] font-medium tracking-wide text-muted-foreground flex items-center">
           <span className="animate-shimmer-text">Pythinking</span>
           <span className="inline-flex ml-[1px]">
             <span className="animate-dot-1">.</span>
@@ -44,12 +41,6 @@ function ThinkingIndicator() {
           </span>
         </span>
       </div>
-      {speed > 0 && (
-        <span className="inline-flex shrink-0 items-center gap-1 whitespace-nowrap text-[10px] font-mono text-zinc-400 dark:text-zinc-400 bg-zinc-800/20 dark:bg-zinc-800/40 px-1.5 py-0.5 rounded-full border border-zinc-700/30">
-          <IconBolt className="size-3 shrink-0 text-amber-400 animate-pulse" />
-          <span className="tabular-nums">{speed.toFixed(1)} t/s</span>
-        </span>
-      )}
     </div>
   );
 }
@@ -58,7 +49,7 @@ function SteerBubble({ content }: { content: string | ContentPart[] }) {
   const text = typeof content === "string" ? content : Content.getText(content);
   return (
     <div className="flex justify-end my-1">
-      <div className="max-w-[85%] px-3 py-1 rounded-2xl rounded-br-md bg-zinc-100 dark:bg-zinc-800 text-foreground">
+      <div className="max-w-[85%] px-3 py-1 rounded-2xl rounded-br-md bg-muted text-foreground">
         <p className="text-xs leading-relaxed">{text}</p>
       </div>
     </div>
@@ -110,13 +101,13 @@ function StepContent({ step, showConnector, showLogo }:{ step: UIStep; showConne
       {showIndicator ? (
         <div className="hidden @[420px]:flex shrink-0 w-5 flex-col items-center relative">
           <div
-            className={cn("size-1.5 rounded-full mt-2 shrink-0 relative z-10", hasActiveItem ? "bg-blue-400 shadow-[0_0_8px_rgba(59,130,246,0.6)] animate-pulse" : "bg-blue-400")}
+            className={cn("size-1.5 rounded-full mt-2 shrink-0 relative z-10", hasActiveItem ? "bg-brand shadow-[0_0_8px_color-mix(in_srgb,var(--brand)_60%,transparent)] animate-pulse" : "bg-brand")}
           />
           {showConnector && (
             <div
               className={cn(
                 "absolute left-1/2 w-px",
-                hasActiveItem ? "bg-gradient-to-b from-zinc-300 to-transparent dark:from-zinc-600 dark:to-transparent" : "bg-zinc-300 dark:bg-zinc-600",
+                hasActiveItem ? "bg-gradient-to-b from-border to-transparent" : "bg-border",
               )}
               style={{ top: "calc(0.5rem + 0.1875rem)", bottom: "calc(-0.75rem - 0.5rem - 0.1875rem)", transform: "translateX(-50%)" }}
             />
@@ -223,7 +214,7 @@ function ForkButton({ turnIndex, className }: ForkButtonProps) {
         variant="ghost"
         size="icon-xs"
         className={cn(
-          "h-5 w-5 text-muted-foreground hover:text-foreground transition-all border-0! hover:bg-zinc-200 dark:hover:bg-zinc-800 cursor-pointer",
+          "h-5 w-5 text-muted-foreground hover:text-foreground transition-all border-0! hover:bg-toolbar-hover cursor-pointer",
           isForking && "opacity-50 pointer-events-none",
           className,
         )}
@@ -260,20 +251,22 @@ function UserMessage({ message }: { message: ChatMessageType }) {
   const videos = Content.getVideos(message.content);
 
   return (
-    <div className="px-3 pt-3 pb-1 flex justify-end">
-      <div className={cn("max-w-[85%] px-3.5 py-1.5 rounded-2xl rounded-br-md", "bg-zinc-100 dark:bg-zinc-800", "text-foreground")}>
-        {displayContent && (
-          // FIX: removed whitespace-pre-wrap — it conflicted with ReactMarkdown's
-          // block-level elements (<p>, <ol>, <li>), doubling vertical spacing.
-          // ReactMarkdown already handles paragraph breaks from \n\n.
-          <div className="text-xs leading-relaxed wrap-break-word">
-            <Markdown content={displayContent} enableEnrichment enableLocalImageRender={false} />
-          </div>
-        )}
-        <MessageMedia images={images} videos={videos} onPreview={setPreviewMedia} />
+    <>
+      <div className="px-3 pt-3 pb-1 flex justify-end">
+        <div className={cn("max-w-[85%] px-3.5 py-1.5 rounded-2xl rounded-br-md", "bg-muted", "text-foreground")}>
+          {displayContent && (
+            // FIX: removed whitespace-pre-wrap — it conflicted with ReactMarkdown's
+            // block-level elements (<p>, <ol>, <li>), doubling vertical spacing.
+            // ReactMarkdown already handles paragraph breaks from \n\n.
+            <div className="text-xs leading-relaxed wrap-break-word">
+              <Markdown content={displayContent} enableEnrichment enableLocalImageRender={false} />
+            </div>
+          )}
+          <MessageMedia images={images} videos={videos} onPreview={setPreviewMedia} />
+        </div>
       </div>
       <MediaPreviewModal src={previewMedia} onClose={() => setPreviewMedia(null)} />
-    </div>
+    </>
   );
 }
 
@@ -311,67 +304,69 @@ function AssistantMessage({ message, turnIndex, isStreaming }: { message: ChatMe
   const isShowingInlineError = message.inlineError && !isStreaming;
 
   return (
-    <div className="@container px-3 py-3 group/message">
-      <div className="flex gap-3 flex-col">
-        <div className="flex-1 min-w-0">
-          <div className="flex flex-col">
-            <div className="[&>*:not(:last-child)]:mb-3">
-              {hasSteps &&
-                groupStepsByPlanMode(steps).map((group, gi) => {
-                  const totalSteps = steps.length;
-                  // The logo identifies the assistant on its first reply, but only when the
-                  // message draws no timeline: sitting in the gutter, it would cut the
-                  // connector running between the step markers.
-                  const hasTimeline = stepHasIndicator.filter(Boolean).length > 1;
-                  const firstTextStepIndex = hasTimeline ? -1 : steps.findIndex((s) => s.items.some((item) => item.type === "text"));
-                  const stepsContent = group.steps.map((step, i) => {
-                    const globalIndex = group.startIndex + i;
-                    const isLastInGroup = i === group.steps.length - 1;
-                    const isLastOverall = globalIndex === totalSteps - 1;
-                    const hasIndicator = stepHasIndicator[globalIndex];
-                    const hasNextIndicator = stepHasIndicator.slice(globalIndex + 1).some(Boolean);
-                    const showConnector = hasIndicator && hasNextIndicator && !isLastInGroup && !isLastOverall;
-                    return <StepContent key={step.n} step={step} showConnector={showConnector} showLogo={globalIndex === firstTextStepIndex} />;
-                  });
+    <>
+      <div className="@container px-3 py-3 group/message">
+        <div className="flex gap-3 flex-col">
+          <div className="flex-1 min-w-0">
+            <div className="flex flex-col">
+              <div className="[&>*:not(:last-child)]:mb-3">
+                {hasSteps &&
+                  groupStepsByPlanMode(steps).map((group, gi) => {
+                    const totalSteps = steps.length;
+                    // The logo identifies the assistant on its first reply, but only when the
+                    // message draws no timeline: sitting in the gutter, it would cut the
+                    // connector running between the step markers.
+                    const hasTimeline = stepHasIndicator.filter(Boolean).length > 1;
+                    const firstTextStepIndex = hasTimeline ? -1 : steps.findIndex((s) => s.items.some((item) => item.type === "text"));
+                    const stepsContent = group.steps.map((step, i) => {
+                      const globalIndex = group.startIndex + i;
+                      const isLastInGroup = i === group.steps.length - 1;
+                      const isLastOverall = globalIndex === totalSteps - 1;
+                      const hasIndicator = stepHasIndicator[globalIndex];
+                      const hasNextIndicator = stepHasIndicator.slice(globalIndex + 1).some(Boolean);
+                      const showConnector = hasIndicator && hasNextIndicator && !isLastInGroup && !isLastOverall;
+                      return <StepContent key={step.n} step={step} showConnector={showConnector} showLogo={globalIndex === firstTextStepIndex} />;
+                    });
+
+                    if (group.planMode) {
+                      return <PlanCard key={`plan-${gi}`}>{stepsContent}</PlanCard>;
+                    }
+                    return <Fragment key={`normal-${gi}`}>{stepsContent}</Fragment>;
+                  })}
+                {!hasSteps && displayContent && (
+                  <LogoRow>
+                    <Markdown content={displayContent} className="text-xs leading-relaxed" enableEnrichment={!isStreaming} />
+                  </LogoRow>
+                )}
+                {(images.length > 0 || videos.length > 0) && (
+                  <div className="@[420px]:pl-5">
+                    <MessageMedia images={images} videos={videos} onPreview={setPreviewMedia} />
+                  </div>
+                )}
+              </div>
 
-                  if (group.planMode) {
-                    return <PlanCard key={`plan-${gi}`}>{stepsContent}</PlanCard>;
-                  }
-                  return <Fragment key={`normal-${gi}`}>{stepsContent}</Fragment>;
-                })}
-              {!hasSteps && displayContent && (
-                <LogoRow>
-                  <Markdown content={displayContent} className="text-xs leading-relaxed" enableEnrichment={!isStreaming} />
-                </LogoRow>
-              )}
-              {(images.length > 0 || videos.length > 0) && (
+              {/* Inline error display */}
+              {isShowingInlineError && message.inlineError && (
                 <div className="@[420px]:pl-5">
-                  <MessageMedia images={images} videos={videos} onPreview={setPreviewMedia} />
+                  <InlineError error={message.inlineError} />
                 </div>
               )}
-            </div>
-
-            {/* Inline error display */}
-            {isShowingInlineError && message.inlineError && (
-              <div className="@[420px]:pl-5">
-                <InlineError error={message.inlineError} />
+              <div className="flex flex-row items-center space-between">
+                <div className="inline-flex flex-1">{isStreaming && !isShowingInlineError && !isCompacting && <ThinkingIndicator />}</div>
+                <div className="inline-flex flex-1" />
+                {!isStreaming && contentToCopy.trim().length > 0 && (
+                  <div className="flex justify-start pt-1 gap-1 opacity-0 group-hover/message:opacity-100 transition-opacity duration-100">
+                    <CopyButton content={contentToCopy} />
+                    {message.forkable !== false && turnIndex !== undefined && turnIndex >= 0 && <ForkButton turnIndex={turnIndex} />}
+                  </div>
+                )}
               </div>
-            )}
-            <div className="flex flex-row items-center space-between">
-              <div className="inline-flex flex-1">{isStreaming && !isShowingInlineError && !isCompacting && <ThinkingIndicator />}</div>
-              <div className="inline-flex flex-1" />
-              {!isStreaming && contentToCopy.trim().length > 0 && (
-                <div className="flex justify-start pt-1 gap-1 opacity-0 group-hover/message:opacity-100 transition-opacity duration-100">
-                  <CopyButton content={contentToCopy} />
-                  {message.forkable !== false && turnIndex !== undefined && turnIndex >= 0 && <ForkButton turnIndex={turnIndex} />}
-                </div>
-              )}
             </div>
           </div>
         </div>
       </div>
       <MediaPreviewModal src={previewMedia} onClose={() => setPreviewMedia(null)} />
-    </div>
+    </>
   );
 }
 
diff --git a/apps/vscode/webview-ui/src/components/ChatStatus.tsx b/apps/vscode/webview-ui/src/components/ChatStatus.tsx
index a363c1eb..4b438676 100644
--- a/apps/vscode/webview-ui/src/components/ChatStatus.tsx
+++ b/apps/vscode/webview-ui/src/components/ChatStatus.tsx
@@ -58,6 +58,14 @@ function subscribeToSpeed(listener: () => void): () => void {
   return () => speedListeners.delete(listener);
 }
 
+/** Compact token count in Cline's style: 999, 12.3k, 1.2m. */
+function formatTokens(count: number): string {
+  // 999_950+ rounds to 1.0m; without this the k branch prints "1000.0k".
+  if (count >= 999_950) return `${(count / 1e6).toFixed(1)}m`;
+  if (count >= 1e3) return `${(count / 1e3).toFixed(1)}k`;
+  return String(count);
+}
+
 export function useTokenSpeed() {
   const isStreaming = useChatStore((s) => s.isStreaming);
   const outputTokens = useChatStore((s) => s.tokenUsage.output + s.activeTokenUsage.output);
@@ -107,7 +115,7 @@ export function TokenInfo() {
           <span className="text-muted-foreground text-[10px] flex items-center gap-1">
             <IconGauge className="size-3" /> Context Window
           </span>
-          <span className={cn("text-sm font-semibold mt-0.5", contextPercent > 80 && "text-amber-500", contextPercent > 95 && "text-destructive")}>
+          <span className={cn("text-sm font-semibold mt-0.5", contextPercent > 80 && "text-warning", contextPercent > 95 && "text-destructive")}>
             {contextPercent}%
           </span>
           <span className="text-[10px] text-muted-foreground font-mono mt-0.5">
@@ -117,7 +125,7 @@ export function TokenInfo() {
 
         <div className="flex flex-col p-2 rounded bg-muted/40 border border-border/40">
           <span className="text-muted-foreground text-[10px] flex items-center gap-1">
-            <IconBolt className="size-3 text-amber-400" /> Generation Speed
+            <IconBolt className="size-3 text-warning" /> Generation Speed
           </span>
           <span className="text-sm font-semibold font-mono text-foreground mt-0.5 whitespace-nowrap tabular-nums">
             {speed > 0 ? `${speed.toFixed(1)} tok/s` : "Idle"}
@@ -150,6 +158,7 @@ export function TokenInfo() {
 
 export function ChatStatus() {
   const { lastStatus, tokenUsage, activeTokenUsage } = useChatStore();
+  const { currentModel, models } = useSettingsStore();
   const { speed, isStreaming } = useTokenSpeed();
 
   if (!lastStatus && !isStreaming) {
@@ -168,14 +177,24 @@ export function ChatStatus() {
     activeTokenUsage.input_cache_creation;
 
   const outputTotal = tokenUsage.output + activeTokenUsage.output;
+  const cacheRead = tokenUsage.input_cache_read + activeTokenUsage.input_cache_read;
+  const cacheWrite = tokenUsage.input_cache_creation + activeTokenUsage.input_cache_creation;
+  const hasUsage = inputTotal + outputTotal > 0;
   const contextPercent = context_usage ? Math.round(context_usage * 1000) / 10 : 0;
+  // ponytail: the bar reuses the engine-reported context_usage fraction so it
+  // never competes with the percent shown next to it; contextWindow only
+  // supplies the tooltip's absolute numbers.
+  const contextWindow = models.find((m) => m.id === currentModel)?.contextWindow;
+  const contextUsedTokens = contextWindow !== undefined && context_usage
+    ? Math.round(context_usage * contextWindow)
+    : undefined;
 
   return (
     <div className="flex items-center gap-2 text-[10px] text-muted-foreground border border-border/40 rounded-full px-2.5 py-0.5 select-none h-6 box-border mr-2 @max-[240px]:hidden bg-muted/20">
       {retrying && (
         <Tooltip>
           <TooltipTrigger asChild>
-            <span className="flex items-center gap-1 text-amber-500 font-mono">
+            <span className="flex items-center gap-1 text-warning font-mono">
               <IconRefresh className="size-3 animate-spin" />
               Retry {retrying.next_attempt}/{retrying.max_attempts}
             </span>
@@ -191,8 +210,8 @@ export function ChatStatus() {
       {speed > 0 && (
         <Tooltip>
           <TooltipTrigger asChild>
-            <span className="flex items-center gap-1 whitespace-nowrap text-amber-500 font-mono font-medium">
-              <IconBolt className="size-3 shrink-0 fill-amber-400/20 text-amber-400 animate-pulse" />
+            <span className="flex items-center gap-1 whitespace-nowrap text-warning font-mono font-medium">
+              <IconBolt className="size-3 shrink-0 fill-warning/20 text-warning animate-pulse" />
               {/* tabular-nums keeps the pill from resizing as the rate changes,
                   and nowrap stops "74.7" and "t/s" breaking onto two lines in a
                   narrow sidebar. */}
@@ -209,46 +228,79 @@ export function ChatStatus() {
       <div className="flex items-center gap-1" title="Context Window Usage">
         <Tooltip>
           <TooltipTrigger asChild>
-            <span className="flex items-center gap-1 font-mono">
+            <span className="flex items-center gap-1.5 font-mono">
               <IconGauge className="size-3 opacity-70" />
-              <span className={cn(contextPercent > 70 && "text-amber-500", contextPercent > 90 && "text-destructive font-semibold")}>
+              <span className={cn(contextPercent > 70 && "text-warning", contextPercent > 90 && "text-destructive font-semibold")}>
                 {contextPercent}%
               </span>
+              {/* Cline-style context bar: 2px track, fill turns warning above 80%. */}
+              <span className="w-10 h-0.5 rounded-full bg-muted overflow-hidden shrink-0 @max-[300px]:hidden">
+                <span
+                  className={cn("block h-full rounded-full", contextPercent > 80 ? "bg-warning" : "bg-brand")}
+                  style={{ width: `${Math.min(contextPercent, 100)}%` }}
+                />
+              </span>
             </span>
           </TooltipTrigger>
-          <TooltipContent>Context Window Usage ({contextPercent}%)</TooltipContent>
+          <TooltipContent>
+            <div className="space-y-0.5">
+              <div>
+                Context Window Usage ({contextPercent}%)
+                {contextWindow !== undefined && (
+                  <>
+                    {contextUsedTokens !== undefined && <> — {formatTokens(contextUsedTokens)}</>} of{" "}
+                    {formatTokens(contextWindow)} tokens
+                  </>
+                )}
+              </div>
+              {hasUsage && (
+                <div className="text-muted-foreground">
+                  Input {formatTokens(inputTotal)} (cache read {formatTokens(cacheRead)}, cache write{" "}
+                  {formatTokens(cacheWrite)})
+                </div>
+              )}
+            </div>
+          </TooltipContent>
         </Tooltip>
       </div>
 
-      <div className="w-px h-3 bg-border/50 @max-[440px]:hidden" />
+      {/* Session token usage — only shown when the session has used tokens. */}
+      {hasUsage && (
+        <>
+          <div className="w-px h-3 bg-border/50 @max-[440px]:hidden" />
 
-      {/* Input Tokens */}
-      <div className="flex items-center gap-1 @max-[440px]:hidden" title="Total Input Tokens">
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <span className="flex items-center gap-1 font-mono">
-              <IconArrowUp className="size-3 opacity-70" />
-              <span>{inputTotal.toLocaleString()}</span>
-            </span>
-          </TooltipTrigger>
-          <TooltipContent>Total Input Tokens</TooltipContent>
-        </Tooltip>
-      </div>
+          {/* Input Tokens */}
+          <div className="flex items-center gap-1 @max-[440px]:hidden">
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <span className="flex items-center gap-1 font-mono tabular-nums">
+                  <IconArrowUp className="size-3 opacity-70" />
+                  <span>{formatTokens(inputTotal)}</span>
+                </span>
+              </TooltipTrigger>
+              <TooltipContent>
+                Input {inputTotal.toLocaleString()} tokens (cache read {cacheRead.toLocaleString()}, cache write{" "}
+                {cacheWrite.toLocaleString()})
+              </TooltipContent>
+            </Tooltip>
+          </div>
 
-      <div className="w-px h-3 bg-border/50 @max-[440px]:hidden" />
+          <div className="w-px h-3 bg-border/50 @max-[440px]:hidden" />
 
-      {/* Output Tokens */}
-      <div className="flex items-center gap-1 @max-[440px]:hidden" title="Output Tokens">
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <span className="flex items-center gap-1 font-mono">
-              <IconArrowDown className="size-3 opacity-70" />
-              <span>{outputTotal.toLocaleString()}</span>
-            </span>
-          </TooltipTrigger>
-          <TooltipContent>Total Output Tokens</TooltipContent>
-        </Tooltip>
-      </div>
+          {/* Output Tokens */}
+          <div className="flex items-center gap-1 @max-[440px]:hidden">
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <span className="flex items-center gap-1 font-mono tabular-nums">
+                  <IconArrowDown className="size-3 opacity-70" />
+                  <span>{formatTokens(outputTotal)}</span>
+                </span>
+              </TooltipTrigger>
+              <TooltipContent>Output {outputTotal.toLocaleString()} tokens</TooltipContent>
+            </Tooltip>
+          </div>
+        </>
+      )}
     </div>
   );
 }
diff --git a/apps/vscode/webview-ui/src/components/CompactionCard.tsx b/apps/vscode/webview-ui/src/components/CompactionCard.tsx
index 43e6d85e..25647744 100644
--- a/apps/vscode/webview-ui/src/components/CompactionCard.tsx
+++ b/apps/vscode/webview-ui/src/components/CompactionCard.tsx
@@ -8,10 +8,10 @@ export function CompactionCard() {
     <div className="rounded-lg border border-border bg-muted/20 overflow-hidden">
       <div className="flex items-center gap-3 px-3 py-2.5">
         {isCompacting ? (
-          <IconLoader2 className="size-4 text-blue-500 animate-spin" />
+          <IconLoader2 className="size-4 text-brand animate-spin" />
         ) : (
           <div className="size-4 flex items-center justify-center">
-            <div className="size-2 rounded-full bg-emerald-500" />
+            <div className="size-2 rounded-full bg-success" />
           </div>
         )}
         <div className="flex-1 min-w-0">
diff --git a/apps/vscode/webview-ui/src/components/ComposerModeMenu.tsx b/apps/vscode/webview-ui/src/components/ComposerModeMenu.tsx
new file mode 100644
index 00000000..3a5645e7
--- /dev/null
+++ b/apps/vscode/webview-ui/src/components/ComposerModeMenu.tsx
@@ -0,0 +1,203 @@
+import { useState } from "react";
+import { IconAdjustmentsHorizontal, IconBolt, IconBulb, IconCheck, IconClipboardList, IconRobot, IconShieldCheck } from "@tabler/icons-react";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { applyPermissionCommand, type PermissionCommand } from "@/stores/chat.store";
+import { cn } from "@/lib/utils";
+import type { PermissionMode, ThinkingMode } from "shared/legacy-sdk";
+
+interface ModeEntry {
+  id: PermissionMode;
+  label: string;
+  description: string;
+  icon: typeof IconShieldCheck;
+}
+
+/** Descriptions match the host's `/yolo` and `/auto` command help. */
+const MODES: readonly ModeEntry[] = [
+  { id: "manual", label: "Manual", description: "Approve every action.", icon: IconShieldCheck },
+  { id: "yolo", label: "YOLO", description: "Auto-approve tools; the agent may still ask questions.", icon: IconBolt },
+  { id: "auto", label: "Auto", description: "Fully autonomous; the agent will not ask questions.", icon: IconRobot },
+];
+
+/** Same path as the `/yolo` / `/auto` slash commands, so the flush-pending-approvals rule lives in one place. */
+function applyMode(current: PermissionMode, next: PermissionMode): Promise<void> {
+  const command: PermissionCommand =
+    next === "manual" ? { mode: current === "auto" ? "auto" : "yolo", request: "off" } : { mode: next, request: "on" };
+  return applyPermissionCommand(command);
+}
+
+function effortLabel(effort: string): string {
+  return effort.charAt(0).toUpperCase() + effort.slice(1);
+}
+
+function SectionLabel({ children }: { children: string }) {
+  return <div className="px-2 pt-1.5 pb-0.5 text-[10px] font-medium uppercase tracking-wider text-muted-foreground">{children}</div>;
+}
+
+interface RowProps {
+  icon: typeof IconShieldCheck;
+  label: string;
+  description?: string;
+  checked: boolean;
+  warning?: boolean;
+  disabled?: boolean;
+  onSelect: () => void;
+}
+
+function Row({ icon: Icon, label, description, checked, warning, disabled, onSelect }: RowProps) {
+  return (
+    <button
+      type="button"
+      disabled={disabled}
+      onClick={onSelect}
+      className={cn(
+        "flex w-full items-start gap-2 rounded-md px-2 py-1.5 text-left text-xs transition-colors",
+        disabled ? "cursor-default opacity-60" : "hover:bg-list-hover cursor-pointer",
+      )}
+    >
+      <Icon className={cn("mt-0.5 size-3.5 shrink-0", warning ? "text-warning" : "text-muted-foreground")} />
+      <span className="flex min-w-0 flex-col">
+        <span className="font-medium text-foreground">{label}</span>
+        {description !== undefined && <span className="text-muted-foreground">{description}</span>}
+      </span>
+      {checked && <IconCheck className="ml-auto mt-0.5 size-3.5 shrink-0 text-foreground" />}
+    </button>
+  );
+}
+
+interface ComposerModeMenuProps {
+  permissionMode: PermissionMode;
+  planMode: boolean;
+  onTogglePlanMode: () => void;
+  thinkingMode: ThinkingMode;
+  thinkingEffort: string;
+  thinkingEfforts?: string[];
+  thinkingAlwaysOn?: boolean;
+  /** Streaming: thinking cannot change mid-turn; permission and plan still can. */
+  thinkingDisabled?: boolean;
+  /** Muted wrapping note below the effort options (mid-conversation cache-cost notice). */
+  cacheNote?: string;
+  onToggleThinking: () => void;
+  onSelectThinkingEffort: (effort: string) => void;
+}
+
+/**
+ * Single composer control for permission mode, plan mode, and thinking
+ * effort. The store's `permissionMode` updates through host status events,
+ * so selection only fires the RPC — no optimistic state.
+ */
+export function ComposerModeMenu({
+  permissionMode,
+  planMode,
+  onTogglePlanMode,
+  thinkingMode,
+  thinkingEffort,
+  thinkingEfforts = [],
+  thinkingAlwaysOn = false,
+  thinkingDisabled = false,
+  cacheNote,
+  onToggleThinking,
+  onSelectThinkingEffort,
+}: ComposerModeMenuProps) {
+  const [open, setOpen] = useState(false);
+  const permission = MODES.find((entry) => entry.id === permissionMode) ?? MODES[0]!;
+  const thinkingActive = thinkingEffort !== "off" || thinkingAlwaysOn;
+
+  const selectPermission = (next: PermissionMode) => {
+    setOpen(false);
+    if (next === permissionMode) return;
+    void applyMode(permissionMode, next);
+  };
+
+  const stateSummary = [
+    permission.label,
+    planMode ? "Plan" : undefined,
+    thinkingMode !== "none" && thinkingActive ? `Thinking ${effortLabel(thinkingEffort)}` : undefined,
+  ]
+    .filter((part) => part !== undefined)
+    .join(" · ");
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <button
+          type="button"
+          title={stateSummary}
+          className={cn(
+            "flex h-6 shrink-0 items-center gap-1 rounded-md px-1.5 text-xs select-none transition-colors cursor-pointer",
+            permissionMode !== "manual"
+              ? "bg-warning/10 text-warning hover:bg-warning/20"
+              : planMode || thinkingActive
+                ? "bg-brand/15 text-brand hover:bg-brand/25"
+                : "bg-muted/50 text-muted-foreground hover:bg-muted hover:text-foreground",
+          )}
+        >
+          <IconAdjustmentsHorizontal className="size-4" />
+          <span className="max-[380px]:hidden">{permission.label}</span>
+        </button>
+      </PopoverTrigger>
+      <PopoverContent align="start" side="top" className="w-64 gap-0 p-1">
+        <SectionLabel>Permissions</SectionLabel>
+        {MODES.map((entry) => (
+          <Row
+            key={entry.id}
+            icon={entry.icon}
+            label={entry.label}
+            description={entry.description}
+            checked={entry.id === permissionMode}
+            warning={entry.id !== "manual"}
+            onSelect={() => selectPermission(entry.id)}
+          />
+        ))}
+        <div className="mx-1 my-1 border-t border-border/60" />
+        <Row
+          icon={IconClipboardList}
+          label="Plan mode"
+          description="Plan and review before making changes."
+          checked={planMode}
+          onSelect={() => {
+            setOpen(false);
+            onTogglePlanMode();
+          }}
+        />
+        {thinkingMode !== "none" && (
+          <>
+            <div className="mx-1 my-1 border-t border-border/60" />
+            <SectionLabel>Thinking</SectionLabel>
+            {thinkingMode === "always" && <Row icon={IconBulb} label="Always on" description="This model always thinks." checked disabled onSelect={() => {}} />}
+            {thinkingMode === "switch" && (
+              <Row
+                icon={IconBulb}
+                label="Thinking"
+                description={thinkingActive ? "Enabled." : "Disabled."}
+                checked={thinkingActive}
+                disabled={thinkingDisabled}
+                onSelect={() => {
+                  setOpen(false);
+                  onToggleThinking();
+                }}
+              />
+            )}
+            {thinkingMode === "effort" &&
+              (thinkingAlwaysOn ? thinkingEfforts : ["off", ...thinkingEfforts]).map((option) => (
+                <Row
+                  key={option}
+                  icon={IconBulb}
+                  label={effortLabel(option)}
+                  checked={option === thinkingEffort}
+                  disabled={thinkingDisabled}
+                  onSelect={() => {
+                    setOpen(false);
+                    onSelectThinkingEffort(option);
+                  }}
+                />
+              ))}
+            {cacheNote !== undefined && (
+              <div className="px-2 py-1.5 text-[10px] leading-snug whitespace-normal text-muted-foreground">{cacheNote}</div>
+            )}
+          </>
+        )}
+      </PopoverContent>
+    </Popover>
+  );
+}
diff --git a/apps/vscode/webview-ui/src/components/ConfigErrorScreen.tsx b/apps/vscode/webview-ui/src/components/ConfigErrorScreen.tsx
index 8df33962..7b58ada0 100644
--- a/apps/vscode/webview-ui/src/components/ConfigErrorScreen.tsx
+++ b/apps/vscode/webview-ui/src/components/ConfigErrorScreen.tsx
@@ -61,7 +61,7 @@ function NoModelsContent({ onRefresh, onBackToLogin }: Pick<Props, "onRefresh" |
   return (
     <>
       <div className="space-y-2">
-        <div className="inline-flex items-center gap-2 text-amber-500">
+        <div className="inline-flex items-center gap-2 text-warning">
           <IconAlertTriangle className="size-5" />
           <span className="text-sm font-medium">Model setup required</span>
         </div>
@@ -119,7 +119,7 @@ export function ConfigErrorScreen({ type, errorMessage, onRefresh, onBackToLogin
         <div className="max-w-sm text-center space-y-6">
           <PythinkerMascot className="h-10 mx-auto opacity-50" />
           <div className="space-y-2">
-            <div className="inline-flex items-center gap-2 text-amber-500">
+            <div className="inline-flex items-center gap-2 text-warning">
               <IconFolderOpen className="size-5" />
               <span className="text-sm font-medium">No workspace open</span>
             </div>
@@ -155,7 +155,7 @@ export function ConfigErrorScreen({ type, errorMessage, onRefresh, onBackToLogin
       <div className="max-w-sm mx-auto text-center space-y-6">
         <PythinkerMascot className="h-10 mx-auto opacity-50" />
         <div className="space-y-2">
-          <div className="inline-flex items-center gap-2 text-red-500">
+          <div className="inline-flex items-center gap-2 text-destructive">
             <IconAlertTriangle className="size-5" />
             <span className="text-sm font-medium">Pythinker Code could not start</span>
           </div>
diff --git a/apps/vscode/webview-ui/src/components/CopyButton.tsx b/apps/vscode/webview-ui/src/components/CopyButton.tsx
index ab444649..9b9a5d9d 100644
--- a/apps/vscode/webview-ui/src/components/CopyButton.tsx
+++ b/apps/vscode/webview-ui/src/components/CopyButton.tsx
@@ -30,8 +30,8 @@ export function CopyButton({ content, className }: CopyButtonProps) {
       variant="ghost"
       size="icon-xs"
       className={cn(
-        "h-5 w-5 text-muted-foreground hover:text-foreground transition-all border-0! hover:bg-zinc-200 dark:hover:bg-zinc-800 cursor-pointer",
-        isCopied && "text-emerald-500 hover:text-emerald-600",
+        "h-5 w-5 text-muted-foreground hover:text-foreground transition-all border-0! hover:bg-toolbar-hover cursor-pointer",
+        isCopied && "text-success hover:text-success",
         className,
       )}
       onClick={() => {
diff --git a/apps/vscode/webview-ui/src/components/DisplayBlocks.tsx b/apps/vscode/webview-ui/src/components/DisplayBlocks.tsx
index 53b269ce..828b8038 100644
--- a/apps/vscode/webview-ui/src/components/DisplayBlocks.tsx
+++ b/apps/vscode/webview-ui/src/components/DisplayBlocks.tsx
@@ -4,10 +4,7 @@ import { oneDark, oneLight } from "react-syntax-highlighter/dist/esm/styles/pris
 import type { DisplayBlock, DiffBlock, TodoBlock, BriefBlock, ShellBlock } from "shared/legacy-sdk";
 import { cn } from "@/lib/utils";
 import * as Diff from "diff";
-
-function useIsDark(): boolean {
-  return typeof document !== "undefined" && document.documentElement.classList.contains("dark");
-}
+import { useIsDark } from "@/hooks/useIsDark";
 
 interface DiffBlockProps {
   block: DiffBlock;
@@ -25,18 +22,17 @@ function renderDiffLine(parts: DiffPart[], type: "added" | "removed"): React.Rea
     if (type === "removed") {
       if (part.added) return null;
       return (
-        <span key={i} className={cn(part.removed && "bg-red-300/50 dark:bg-red-700/50 rounded-sm")}>
+        <span key={i} className={cn(part.removed && "bg-diff-removed rounded-sm")}>
           {part.value}
         </span>
       );
     }
-      if (part.removed) return null;
-      return (
-        <span key={i} className={cn(part.added && "bg-emerald-300/50 dark:bg-emerald-700/50 rounded-sm")}>
-          {part.value}
-        </span>
-      );
-    
+    if (part.removed) return null;
+    return (
+      <span key={i} className={cn(part.added && "bg-diff-added rounded-sm")}>
+        {part.value}
+      </span>
+    );
   });
 }
 
@@ -97,24 +93,24 @@ export function DiffBlockView({ block, maxHeight = "max-h-40" }: DiffBlockProps)
       <div className="px-2 py-1 bg-muted/50 border-b border-border text-muted-foreground truncate">{fileName}</div>
       <div className="flex flex-col md:flex-row">
         {hasOld && (
-          <div className="bg-red-500/5 dark:bg-red-500/10 border-b md:border-b-0 md:border-r border-border/50 flex-1 min-w-0">
+          <div className="bg-diff-removed/40 border-b md:border-b-0 md:border-r border-border/50 flex-1 min-w-0">
             <div className={cn("px-2 py-1.5 overflow-auto", maxHeight)}>
               {oldLines.map((lineParts, i) => (
                 <div key={i} className="flex">
-                  <span className="text-red-500 select-none mr-2 shrink-0">-</span>
-                  <span className="text-red-600 dark:text-red-400 whitespace-pre-wrap break-all">{renderDiffLine(lineParts, "removed") || " "}</span>
+                  <span className="text-destructive select-none mr-2 shrink-0">-</span>
+                  <span className="whitespace-pre-wrap break-all">{renderDiffLine(lineParts, "removed") || " "}</span>
                 </div>
               ))}
             </div>
           </div>
         )}
         {hasNew && (
-          <div className="bg-emerald-500/5 dark:bg-emerald-500/10 flex-1 min-w-0">
+          <div className="bg-diff-added/40 flex-1 min-w-0">
             <div className={cn("px-2 py-1.5 overflow-auto", maxHeight)}>
               {newLines.map((lineParts, i) => (
                 <div key={i} className="flex">
-                  <span className="text-emerald-500 select-none mr-2 shrink-0">+</span>
-                  <span className="text-emerald-600 dark:text-emerald-400 whitespace-pre-wrap break-all">{renderDiffLine(lineParts, "added") || " "}</span>
+                  <span className="text-success select-none mr-2 shrink-0">+</span>
+                  <span className="whitespace-pre-wrap break-all">{renderDiffLine(lineParts, "added") || " "}</span>
                 </div>
               ))}
             </div>
@@ -137,9 +133,9 @@ export function TodoBlockView({ block }: TodoBlockProps) {
           <span
             className={cn(
               "size-2 rounded-full shrink-0",
-              item.status === "done" && "bg-emerald-500",
-              item.status === "in_progress" && "bg-amber-500",
-              item.status === "pending" && "bg-zinc-400",
+              item.status === "done" && "bg-success",
+              item.status === "in_progress" && "bg-warning",
+              item.status === "pending" && "bg-muted-foreground",
             )}
           />
           <span className="truncate">{item.title}</span>
@@ -163,7 +159,6 @@ interface ShellBlockProps {
 }
 
 export function ShellBlockView({ block, maxHeight = "max-h-40" }: ShellBlockProps) {
-  console.log("ShellBlockView render", { block });
   const isDark = useIsDark();
   const language = block.language || "bash";
 
@@ -201,6 +196,8 @@ export function DisplayBlockView({ block, maxHeight }: DisplayBlockViewProps) {
       return <TodoBlockView block={block as TodoBlock} />;
     case "brief":
       return <BriefBlockView block={block as BriefBlock} />;
+    case "shell":
+      return <ShellBlockView block={block as ShellBlock} maxHeight={maxHeight} />;
     default:
       return null;
   }
diff --git a/apps/vscode/webview-ui/src/components/FileChangesPanel.tsx b/apps/vscode/webview-ui/src/components/FileChangesPanel.tsx
index 725395e9..19cedc87 100644
--- a/apps/vscode/webview-ui/src/components/FileChangesPanel.tsx
+++ b/apps/vscode/webview-ui/src/components/FileChangesPanel.tsx
@@ -9,9 +9,9 @@ import { FileChange } from "shared/types";
 import { toast } from "./ui/sonner";
 
 const STATUS_CONFIG = {
-  Added: { icon: IconFilePlus, color: "text-green-600 dark:text-green-400" },
-  Deleted: { icon: IconFileX, color: "text-red-600 dark:text-red-400" },
-  Modified: { icon: IconFileMinus, color: "text-yellow-600 dark:text-yellow-400" },
+  Added: { icon: IconFilePlus, color: "text-success" },
+  Deleted: { icon: IconFileX, color: "text-destructive" },
+  Modified: { icon: IconFileMinus, color: "text-warning" },
 } as const;
 
 function getTotalStats(changes: FileChange[]) {
@@ -76,8 +76,8 @@ function FileItem({ file, onRevert, onKeep, onViewDiff, disabled, isStreaming }:
         )}
       </div>
       <div className="flex items-center gap-1 text-[10px] tabular-nums shrink-0">
-        <span className="text-green-600 dark:text-green-400">+{file.additions}</span>
-        <span className="text-red-600 dark:text-red-400">-{file.deletions}</span>
+        <span className="text-success">+{file.additions}</span>
+        <span className="text-destructive">-{file.deletions}</span>
       </div>
     </div>
   );
@@ -128,8 +128,8 @@ export function FileChangesPanel({ changes }: FileChangesPanelProps) {
             {changes.length} file{changes.length !== 1 ? "s" : ""}
           </span>
           <div className="flex items-center gap-1 text-[10px] tabular-nums">
-            <span className="text-green-600 dark:text-green-400">+{stats.additions}</span>
-            <span className="text-red-600 dark:text-red-400">-{stats.deletions}</span>
+            <span className="text-success">+{stats.additions}</span>
+            <span className="text-destructive">-{stats.deletions}</span>
           </div>
         </div>
         {!isStreaming && (
diff --git a/apps/vscode/webview-ui/src/components/Header.tsx b/apps/vscode/webview-ui/src/components/Header.tsx
index 15019dce..084f9011 100644
--- a/apps/vscode/webview-ui/src/components/Header.tsx
+++ b/apps/vscode/webview-ui/src/components/Header.tsx
@@ -14,7 +14,7 @@ export function Header() {
   const [showSessionInfo, setShowSessionInfo] = useState(false);
   const [showConfirmNew, setShowConfirmNew] = useState(false);
   const { startNewConversation, sessionId, messages, isStreaming } = useChatStore();
-  const { setSettingsDialogOpen } = useSettingsStore();
+  const { openConfigHub } = useSettingsStore();
 
   const handleNewSession = async () => {
     // If streaming, show confirmation dialog
@@ -71,7 +71,7 @@ export function Header() {
         >
           <IconPlus className="size-3.5" />
         </Button>
-        <Button variant="ghost" size="icon-xs" onClick={() => setSettingsDialogOpen(true)}>
+        <Button variant="ghost" size="icon-xs" onClick={() => openConfigHub("settings")}>
           <IconSettings className="size-3.5" />
         </Button>
       </div>
diff --git a/apps/vscode/webview-ui/src/components/InlineError.tsx b/apps/vscode/webview-ui/src/components/InlineError.tsx
index 5bce041f..302d93b4 100644
--- a/apps/vscode/webview-ui/src/components/InlineError.tsx
+++ b/apps/vscode/webview-ui/src/components/InlineError.tsx
@@ -15,14 +15,14 @@ export function InlineError({ error }: InlineErrorProps) {
   const showDetail = error.detail && error.detail !== error.message;
 
   return (
-    <div className={cn("flex flex-col gap-1 px-3 py-2 mt-2 rounded-md", "bg-red-50 dark:bg-red-950/30", "border border-red-200 dark:border-red-900/50")}>
+    <div className={cn("flex flex-col gap-1 px-3 py-2 mt-2 rounded-md", "bg-destructive/10", "border border-destructive/40")}>
       <div className="flex items-center gap-2">
-        <IconAlertCircle className="size-4 text-red-500 shrink-0" />
-        <span className="text-xs text-red-600 dark:text-red-400 flex-1">{error.message}</span>
+        <IconAlertCircle className="size-4 text-destructive shrink-0" />
+        <span className="text-xs text-destructive flex-1">{error.message}</span>
         <Button
           variant="ghost"
           size="sm"
-          className="h-6 px-2 text-xs text-red-600 dark:text-red-400 hover:bg-red-100 dark:hover:bg-red-900/30"
+          className="h-6 px-2 text-xs text-destructive hover:bg-destructive/20"
           onClick={retryLastMessage}
           disabled={isStreaming}
         >
@@ -30,7 +30,7 @@ export function InlineError({ error }: InlineErrorProps) {
           Retry
         </Button>
       </div>
-      {showDetail && <div className="text-[10px] text-red-500/70 dark:text-red-400/70 pl-6 font-mono break-all">{error.detail}</div>}
+      {showDetail && <div className="text-[10px] text-destructive/70 pl-6 font-mono break-all">{error.detail}</div>}
     </div>
   );
 }
diff --git a/apps/vscode/webview-ui/src/components/LoginScreen.tsx b/apps/vscode/webview-ui/src/components/LoginScreen.tsx
index f8c982fe..024f75f5 100644
--- a/apps/vscode/webview-ui/src/components/LoginScreen.tsx
+++ b/apps/vscode/webview-ui/src/components/LoginScreen.tsx
@@ -40,7 +40,7 @@ export function LoginScreen({ onLoginSuccess, onSkip }: LoginScreenProps) {
         <div className="max-w-sm w-full text-center space-y-6">
           <PythinkerMascot className="h-24 w-auto max-w-[280px] mx-auto" />
           <div className="space-y-2">
-            <div className="inline-flex items-center gap-2 text-blue-500">
+            <div className="inline-flex items-center gap-2 text-brand">
               <IconLoader2 className="size-5 animate-spin" />
               <span className="text-sm font-medium">Waiting for authentication...</span>
             </div>
@@ -64,8 +64,8 @@ export function LoginScreen({ onLoginSuccess, onSkip }: LoginScreenProps) {
           </div>
 
           {error && (
-            <div className="bg-red-50 dark:bg-red-950/30 border border-red-200 dark:border-red-900/50 rounded-lg px-3 py-2 text-left">
-              <p className="text-xs text-red-600 dark:text-red-400">{error}</p>
+            <div className="bg-destructive/10 border border-destructive/40 rounded-lg px-3 py-2 text-left">
+              <p className="text-xs text-destructive">{error}</p>
             </div>
           )}
 
diff --git a/apps/vscode/webview-ui/src/components/Markdown.tsx b/apps/vscode/webview-ui/src/components/Markdown.tsx
index ab84e06d..fa1f1b18 100644
--- a/apps/vscode/webview-ui/src/components/Markdown.tsx
+++ b/apps/vscode/webview-ui/src/components/Markdown.tsx
@@ -13,6 +13,7 @@ import { CopyButton } from "@/components/CopyButton";
 import { MediaPreviewModal, StreamImagePreview, ImageLoadFail } from "@/components/MediaPreviewModal";
 import { getMediaTypeFromSrc } from "@/lib/media-utils";
 import { bridge } from "@/services";
+import { useIsDark } from "@/hooks/useIsDark";
 
 interface MarkdownProps {
   content: string;
@@ -21,18 +22,6 @@ interface MarkdownProps {
   enableLocalImageRender?: boolean;
 }
 
-function useIsDark(): boolean {
-  const [isDark, setIsDark] = useState(() => typeof document !== "undefined" && document.documentElement.classList.contains("dark"));
-  useEffect(() => {
-    if (typeof document === "undefined") return;
-    const el = document.documentElement;
-    const obs = new MutationObserver(() => setIsDark(el.classList.contains("dark")));
-    obs.observe(el, { attributes: true, attributeFilter: ["class"] });
-    return () => obs.disconnect();
-  }, []);
-  return isDark;
-}
-
 function ColorSwatch({ color }: { color: string }) {
   return <span className="inline-block size-2.75 rounded-sm align-middle mr-0.5 mb-0.5" style={{ backgroundColor: color }} />;
 }
@@ -46,7 +35,7 @@ export function FileLink({ path, display }: { path: string; display: string }) {
     [path],
   );
   return (
-    <button type="button" className="hover:text-zinc-900 dark:hover:text-white hover:underline cursor-pointer break-all text-left" onClick={onClick}>
+    <button type="button" className="hover:text-link hover:underline cursor-pointer break-all text-left" onClick={onClick}>
       {display}
     </button>
   );
@@ -154,7 +143,7 @@ const CodeBlock = memo(function CodeBlock({ code, language, enableHighlight, sty
           {code}
         </SyntaxHighlighter>
       ) : (
-        <pre className="bg-muted rounded px-2 py-1 overflow-x-auto text-[11px]">
+        <pre className="bg-code-block text-editor-foreground rounded px-2 py-1 overflow-x-auto text-[11px]">
           <code className="bg-transparent!">{code}</code>
         </pre>
       )}
@@ -222,7 +211,7 @@ export const Markdown = memo(function Markdown({ content, className, enableEnric
       ul: ({ children }) => <ul className="list-disc list-outside pl-5 mb-2 space-y-1">{children}</ul>,
       ol: ({ children }) => <ol className="list-decimal list-outside pl-5 mb-2 space-y-1">{children}</ol>,
       a: ({ href, children }) => (
-        <a href={href} className="text-blue-600 dark:text-blue-400 underline hover:no-underline" target="_blank" rel="noopener noreferrer">
+        <a href={href} className="text-link underline hover:no-underline" target="_blank" rel="noopener noreferrer">
           {children}
         </a>
       ),
diff --git a/apps/vscode/webview-ui/src/components/MediaPreviewModal.tsx b/apps/vscode/webview-ui/src/components/MediaPreviewModal.tsx
index d056fed8..399bddd1 100644
--- a/apps/vscode/webview-ui/src/components/MediaPreviewModal.tsx
+++ b/apps/vscode/webview-ui/src/components/MediaPreviewModal.tsx
@@ -16,7 +16,7 @@ export function ImagePlaceholder() {
 export function ImageLoadFail({ path }: { path: string }) {
   return (
     <span className="flex flex-col items-center justify-center bg-muted rounded my-2" style={{ width: 192, height: IMG_HEIGHT }}>
-      <IconPhoto className="size-6 text-red-400" />
+      <IconPhoto className="size-6 text-destructive" />
       <span className="text-xs">{path}</span>
     </span>
   );
diff --git a/apps/vscode/webview-ui/src/components/MediaThumbnail.tsx b/apps/vscode/webview-ui/src/components/MediaThumbnail.tsx
index ffc7dc56..315ddfd1 100644
--- a/apps/vscode/webview-ui/src/components/MediaThumbnail.tsx
+++ b/apps/vscode/webview-ui/src/components/MediaThumbnail.tsx
@@ -21,7 +21,7 @@ function ThumbnailWrapper({ onClick, onRemove, sizeClass, children }: ThumbnailW
             e.stopPropagation();
             onRemove();
           }}
-          className="absolute -top-1.5 -right-1.5 size-5 rounded-full text-red-500 bg-white border border-red-500 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer"
+          className="absolute -top-1.5 -right-1.5 size-5 rounded-full text-destructive bg-background border border-destructive/40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer"
         >
           <IconX className="size-3" />
         </button>
diff --git a/apps/vscode/webview-ui/src/components/PermissionModeBadge.tsx b/apps/vscode/webview-ui/src/components/PermissionModeBadge.tsx
deleted file mode 100644
index 52e6d069..00000000
--- a/apps/vscode/webview-ui/src/components/PermissionModeBadge.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
-import type { PermissionMode } from "shared/legacy-sdk";
-
-const LABELS: Partial<Record<PermissionMode, { text: string; hint: string }>> = {
-  yolo: {
-    text: "YOLO",
-    hint: "Tool actions are auto-approved; the agent may still ask questions. Send /yolo off to stop.",
-  },
-  auto: {
-    text: "AUTO",
-    hint: "Fully autonomous; the agent will not ask questions. Send /auto off to stop.",
-  },
-};
-
-/**
- * Shows the permission mode whenever it is not the default.
- *
- * `/yolo` and `/auto` toggle when sent without an argument, so a chat that
- * never showed the mode let the same command mean "on" or "off" depending on
- * state nobody could see — sending `/yolo` to be sure it was on turned it off.
- * The terminal has always shown this; the red matches its danger row.
- */
-export function PermissionModeBadge({ mode }: { mode: PermissionMode }) {
-  const label = LABELS[mode];
-  if (label === undefined) return null;
-
-  return (
-    <Tooltip>
-      <TooltipTrigger asChild>
-        <span className="inline-flex items-center rounded border border-destructive/40 bg-destructive/10 px-1.5 py-0.5 text-[10px] font-semibold tracking-wide text-destructive select-none">
-          {label.text}
-        </span>
-      </TooltipTrigger>
-      <TooltipContent>{label.hint}</TooltipContent>
-    </Tooltip>
-  );
-}
diff --git a/apps/vscode/webview-ui/src/components/PlanCard.tsx b/apps/vscode/webview-ui/src/components/PlanCard.tsx
index df0decf0..f6d61bfd 100644
--- a/apps/vscode/webview-ui/src/components/PlanCard.tsx
+++ b/apps/vscode/webview-ui/src/components/PlanCard.tsx
@@ -10,15 +10,15 @@ export function PlanCard({ children }: PlanCardProps) {
   const [collapsed, setCollapsed] = useState(false);
 
   return (
-    <div className="my-2 rounded-lg border border-amber-300/50 dark:border-amber-700/50 bg-amber-50/30 dark:bg-amber-950/20 overflow-hidden">
+    <div className="my-2 rounded-lg border border-brand/40 bg-brand/5 overflow-hidden">
       <button
         type="button"
         onClick={() => setCollapsed(!collapsed)}
-        className="flex items-center gap-1.5 w-full px-3 py-1.5 bg-amber-100/50 dark:bg-amber-900/30 border-b border-amber-300/50 dark:border-amber-700/50 cursor-pointer hover:bg-amber-100/80 dark:hover:bg-amber-900/50 transition-colors"
+        className="flex items-center gap-1.5 w-full px-3 py-1.5 bg-brand/10 border-b border-brand/40 cursor-pointer hover:bg-brand/20 transition-colors"
       >
-        <IconClipboardList className="size-3.5 text-amber-600 dark:text-amber-400" />
-        <span className="text-[11px] font-semibold text-amber-700 dark:text-amber-300 flex-1 text-left">Plan Mode</span>
-        <IconChevronDown className={cn("size-3.5 text-amber-600 dark:text-amber-400 transition-transform", collapsed && "-rotate-90")} />
+        <IconClipboardList className="size-3.5 text-brand" />
+        <span className="text-[11px] font-semibold text-brand flex-1 text-left">Plan Mode</span>
+        <IconChevronDown className={cn("size-3.5 text-brand transition-transform", collapsed && "-rotate-90")} />
       </button>
       {!collapsed && (
         <div className="px-1 py-1 [&>*:not(:last-child)]:mb-3">
diff --git a/apps/vscode/webview-ui/src/components/PlanModeButton.tsx b/apps/vscode/webview-ui/src/components/PlanModeButton.tsx
deleted file mode 100644
index be2d0c3f..00000000
--- a/apps/vscode/webview-ui/src/components/PlanModeButton.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { IconClipboardList } from "@tabler/icons-react";
-import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
-import { cn } from "@/lib/utils";
-
-interface PlanModeButtonProps {
-  active: boolean;
-  onToggle: () => void;
-}
-
-export function PlanModeButton({ active, onToggle }: PlanModeButtonProps) {
-  const tooltipText = active ? "Plan mode active (click to exit)" : "Enter plan mode";
-
-  return (
-    <Tooltip>
-      <TooltipTrigger asChild>
-        <button
-          type="button"
-          onClick={onToggle}
-          className={cn(
-            "flex items-center justify-center size-6 rounded-md transition-all cursor-pointer",
-            active
-              ? "bg-amber-500/15 text-amber-600 dark:text-amber-400 hover:bg-amber-500/25"
-              : "bg-muted/50 text-muted-foreground hover:bg-muted hover:text-foreground",
-          )}
-        >
-          <IconClipboardList className="size-4" />
-        </button>
-      </TooltipTrigger>
-      <TooltipContent>{tooltipText}</TooltipContent>
-    </Tooltip>
-  );
-}
diff --git a/apps/vscode/webview-ui/src/components/PythinkerMascot.tsx b/apps/vscode/webview-ui/src/components/PythinkerMascot.tsx
index 587603a1..a9d28805 100644
--- a/apps/vscode/webview-ui/src/components/PythinkerMascot.tsx
+++ b/apps/vscode/webview-ui/src/components/PythinkerMascot.tsx
@@ -1,23 +1,9 @@
 import { cn } from "@/lib/utils";
-import { useState, useEffect } from "react";
 import { useExtensionImageUrl } from "./hooks/useExtensionImageUrl";
+import { useIsDark } from "@/hooks/useIsDark";
 
 export function PythinkerMascot({ className }: { className?: string }) {
-  const [isDark, setIsDark] = useState(() => document.documentElement.classList.contains("dark"));
-
-  useEffect(() => {
-    const checkTheme = () => {
-      setIsDark(document.documentElement.classList.contains("dark"));
-    };
-
-    const observer = new MutationObserver(checkTheme);
-    observer.observe(document.documentElement, {
-      attributes: true,
-      attributeFilter: ["class"],
-    });
-
-    return () => observer.disconnect();
-  }, []);
+  const isDark = useIsDark();
 
   const imageName = isDark ? "pythinker_banner_dark.svg" : "pythinker_banner_light.svg";
   const logoUrl = useExtensionImageUrl(imageName);
diff --git a/apps/vscode/webview-ui/src/components/QuestionDialog.tsx b/apps/vscode/webview-ui/src/components/QuestionDialog.tsx
index c4919269..6f3a15c2 100644
--- a/apps/vscode/webview-ui/src/components/QuestionDialog.tsx
+++ b/apps/vscode/webview-ui/src/components/QuestionDialog.tsx
@@ -1,7 +1,9 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
 import { useChatStore } from "@/stores";
 import { cn } from "@/lib/utils";
 
+const focusComposer = () => document.querySelector<HTMLTextAreaElement>("textarea")?.focus();
+
 export function QuestionDialog() {
   const { pendingQuestion, respondQuestion } = useChatStore();
   const [customInput, setCustomInput] = useState("");
@@ -9,6 +11,10 @@ export function QuestionDialog() {
   const [selectedIndex, setSelectedIndex] = useState(1);
   const [questionIndex, setQuestionIndex] = useState(0);
   const [answers, setAnswers] = useState<Record<string, string>>({});
+  const cardRef = useRef<HTMLDivElement>(null);
+  // The question stays pending until the RPC settles, so repeated key presses
+  // would submit duplicate answers without this guard.
+  const inFlightRef = useRef(false);
 
   const questions = pendingQuestion?.questions ?? [];
   const question = questions[questionIndex];
@@ -20,6 +26,7 @@ export function QuestionDialog() {
       setSelectedIndex(1);
       setQuestionIndex(0);
       setAnswers({});
+      cardRef.current?.focus();
     }
   }, [pendingQuestion?.id]);
 
@@ -35,7 +42,14 @@ export function QuestionDialog() {
       setCustomInput("");
       setSelectedIndex(1);
     } else {
-      await respondQuestion(nextAnswers);
+      if (inFlightRef.current) return;
+      inFlightRef.current = true;
+      try {
+        await respondQuestion(nextAnswers);
+        focusComposer();
+      } finally {
+        inFlightRef.current = false;
+      }
     }
   };
 
@@ -51,8 +65,44 @@ export function QuestionDialog() {
   const options = question.options || [];
   const customIndex = options.length + 1;
 
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+    if (showCustom) return; // the custom input owns the keyboard while open
+    const digit = Number(e.key);
+    if (digit >= 1 && digit <= customIndex) {
+      e.preventDefault();
+      if (digit === customIndex) {
+        setShowCustom(true);
+      } else {
+        const opt = options[digit - 1];
+        if (opt) void handleSelect(opt.label);
+      }
+    } else if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setSelectedIndex((i) => Math.min(i + 1, customIndex));
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setSelectedIndex((i) => Math.max(i - 1, 1));
+    } else if (e.key === "Enter") {
+      e.preventDefault();
+      if (selectedIndex === customIndex) {
+        setShowCustom(true);
+      } else {
+        const opt = options[selectedIndex - 1];
+        if (opt) void handleSelect(opt.label);
+      }
+    } else if (e.key === "Escape") {
+      e.preventDefault();
+      focusComposer();
+    }
+  };
+
   return (
-    <div className={cn("mb-0.5 border border-blue-200 dark:border-blue-800 rounded-lg overflow-hidden bg-background flex flex-col shrink")}>
+    <div
+      ref={cardRef}
+      tabIndex={-1}
+      onKeyDown={handleKeyDown}
+      className={cn("mb-0.5 border border-brand/40 rounded-lg overflow-hidden bg-background flex flex-col shrink", "outline-none focus:ring-1 focus:ring-ring")}
+    >
       <div className="p-2 space-y-2">
         {questions.length > 1 && (
           <div className="text-[10px] text-muted-foreground">
@@ -72,13 +122,13 @@ export function QuestionDialog() {
               className={cn(
                 "w-full text-left px-2 py-1 rounded-md text-xs transition-colors",
                 "border border-border cursor-pointer",
-                selectedIndex === idx + 1 ? "bg-blue-500 text-white border-blue-500" : "bg-background hover:bg-muted/50",
+                selectedIndex === idx + 1 ? "bg-primary text-primary-foreground border-primary" : "bg-background hover:bg-muted/50",
               )}
             >
-              <span className={cn("mr-2", selectedIndex === idx + 1 ? "text-blue-200" : "text-muted-foreground")}>{idx + 1}</span>
+              <span className={cn("mr-2", selectedIndex === idx + 1 ? "text-primary-foreground/70" : "text-muted-foreground")}>{idx + 1}</span>
               <span className="font-medium">{option.label}</span>
               {option.description && (
-                <span className={cn("ml-2", selectedIndex === idx + 1 ? "text-blue-200" : "text-muted-foreground")}>- {option.description}</span>
+                <span className={cn("ml-2", selectedIndex === idx + 1 ? "text-primary-foreground/70" : "text-muted-foreground")}>- {option.description}</span>
               )}
             </button>
           ))}
@@ -90,17 +140,20 @@ export function QuestionDialog() {
                 onChange={(e) => setCustomInput(e.target.value)}
                 onKeyDown={(e) => {
                   if (e.key === "Enter") void handleCustomSubmit();
-                  if (e.key === "Escape") setShowCustom(false);
+                  if (e.key === "Escape") {
+                    setShowCustom(false);
+                    cardRef.current?.focus();
+                  }
                 }}
                 placeholder="Enter your response..."
-                className="flex-1 px-2 py-1 rounded-md text-xs border border-border bg-background outline-none focus:border-blue-500"
+                className="flex-1 px-2 py-1 rounded-md text-xs border border-border bg-background outline-none focus:border-ring"
               />
               <button
                 onClick={() => {
                   void handleCustomSubmit();
                 }}
                 disabled={!customInput.trim()}
-                className="px-2 py-1 rounded-md text-xs bg-blue-500 text-white disabled:opacity-50 cursor-pointer"
+                className="px-2 py-1 rounded-md text-xs bg-primary text-primary-foreground hover:bg-primary/90 disabled:opacity-50 cursor-pointer"
               >
                 Send
               </button>
@@ -112,10 +165,10 @@ export function QuestionDialog() {
               className={cn(
                 "w-full text-left px-2 py-1 rounded-md text-xs transition-colors",
                 "border border-border cursor-pointer",
-                selectedIndex === customIndex ? "bg-blue-500 text-white border-blue-500" : "bg-background hover:bg-muted/50",
+                selectedIndex === customIndex ? "bg-primary text-primary-foreground border-primary" : "bg-background hover:bg-muted/50",
               )}
             >
-              <span className={cn("mr-2", selectedIndex === customIndex ? "text-blue-200" : "text-muted-foreground")}>{customIndex}</span>
+              <span className={cn("mr-2", selectedIndex === customIndex ? "text-primary-foreground/70" : "text-muted-foreground")}>{customIndex}</span>
               <span className="font-medium">Custom response...</span>
             </button>
           )}
diff --git a/apps/vscode/webview-ui/src/components/QueuedMessagesPanel.tsx b/apps/vscode/webview-ui/src/components/QueuedMessagesPanel.tsx
index dc6c982b..290f98e3 100644
--- a/apps/vscode/webview-ui/src/components/QueuedMessagesPanel.tsx
+++ b/apps/vscode/webview-ui/src/components/QueuedMessagesPanel.tsx
@@ -31,7 +31,7 @@ function QueueItem({ id, content, isStreaming, onEdit }: { id: string; content:
           <Button
             variant="ghost"
             size="icon"
-            className="size-5 border-0! text-amber-500 hover:text-amber-600"
+            className="size-5 border-0! text-warning hover:text-warning/80"
             onClick={() => {
               void handleSteer();
             }}
diff --git a/apps/vscode/webview-ui/src/components/SessionList.tsx b/apps/vscode/webview-ui/src/components/SessionList.tsx
index bc139f78..f25935cb 100644
--- a/apps/vscode/webview-ui/src/components/SessionList.tsx
+++ b/apps/vscode/webview-ui/src/components/SessionList.tsx
@@ -1,12 +1,14 @@
 import { useMemo, useState } from "react";
 import { useRequest } from "ahooks";
-import { IconSearch, IconDots, IconTrash, IconCheck } from "@tabler/icons-react";
+import { IconSearch, IconDots, IconTrash, IconCheck, IconSortDescending, IconSortAscending } from "@tabler/icons-react";
 import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
 import { StreamingConfirmDialog } from "./StreamingConfirmDialog";
 import { bridge } from "@/services";
 import type { SessionInfo } from "shared/legacy-sdk";
 import { cn } from "@/lib/utils";
+import { formatRelativeDate } from "@/lib/format";
 import { useChatStore, useSettingsStore } from "@/stores";
 import { cleanSystemTags } from "shared/utils";
 import { toast } from "./ui/sonner";
@@ -15,16 +17,39 @@ interface SessionListProps {
   onClose: () => void;
 }
 
-function formatRelativeDate(timestamp: number): string {
-  const diff = Date.now() - timestamp;
-  const m = Math.floor(diff / 60000);
-  const h = Math.floor(diff / 3600000);
-  const d = Math.floor(diff / 86400000);
-  if (m < 1) return "Just now";
-  if (m < 60) return `${m}m ago`;
-  if (h < 24) return `${h}h ago`;
-  if (d < 7) return `${d}d ago`;
-  return new Date(timestamp).toLocaleDateString();
+interface GroupBoundaries {
+  startOfToday: number;
+  startOfYesterday: number;
+  startOfWeekWindow: number;
+}
+
+function getGroupLabel(timestamp: number, boundaries: GroupBoundaries): string {
+  if (timestamp >= boundaries.startOfToday) return "Today";
+  if (timestamp >= boundaries.startOfYesterday) return "Yesterday";
+  if (timestamp >= boundaries.startOfWeekWindow) return "This week";
+  return "Older";
+}
+
+function highlightMatch(text: string, query: string): React.ReactNode {
+  const q = query.trim().toLowerCase();
+  if (!q) return text;
+  const lower = text.toLowerCase();
+  const parts: React.ReactNode[] = [];
+  let cursor = 0;
+  let idx = lower.indexOf(q);
+  while (idx !== -1) {
+    if (idx > cursor) parts.push(text.slice(cursor, idx));
+    parts.push(
+      <span key={idx} className="bg-selection text-selection-foreground rounded-[2px]">
+        {text.slice(idx, idx + q.length)}
+      </span>,
+    );
+    cursor = idx + q.length;
+    idx = lower.indexOf(q, cursor);
+  }
+  if (parts.length === 0) return text;
+  if (cursor < text.length) parts.push(text.slice(cursor));
+  return parts;
 }
 
 interface SessionItemProps {
@@ -33,9 +58,10 @@ interface SessionItemProps {
   onSelect: () => void;
   onDelete: () => void;
   dirLabel: string | null; // null = current dir, string = relative path
+  searchQuery: string;
 }
 
-function SessionItem({ session, isSelected, onSelect, onDelete, dirLabel }: SessionItemProps) {
+function SessionItem({ session, isSelected, onSelect, onDelete, dirLabel, searchQuery }: SessionItemProps) {
   const [isHovered, setIsHovered] = useState(false);
 
   return (
@@ -45,10 +71,10 @@ function SessionItem({ session, isSelected, onSelect, onDelete, dirLabel }: Sess
       onMouseLeave={() => setIsHovered(false)}
       onClick={onSelect}
     >
-      <p className="text-xs leading-relaxed line-clamp-3 text-foreground">{cleanSystemTags(session.brief) || "Untitled"}</p>
+      <p className="text-xs leading-relaxed line-clamp-3 text-foreground">{highlightMatch(cleanSystemTags(session.brief) || "Untitled", searchQuery)}</p>
       <div className="flex items-center justify-between mt-0.5">
         <div className="flex items-center gap-1.5 min-w-0 flex-1">
-          {isSelected && <IconCheck className="size-3 text-blue-500 shrink-0" />}
+          {isSelected && <IconCheck className="size-3 text-brand shrink-0" />}
           <span className="text-[10px] text-muted-foreground shrink-0">{formatRelativeDate(session.updatedAt)}</span>
           {dirLabel && <span className="text-[10px] text-muted-foreground/70 truncate" title={session.workDir}>· {dirLabel}</span>}
         </div>
@@ -82,6 +108,7 @@ export function SessionList({ onClose }: SessionListProps) {
   const { loadSession, sessionId, startNewConversation, isStreaming } = useChatStore();
   const { workspaceRoot, currentWorkDir, setCurrentWorkDir } = useSettingsStore();
   const [searchQuery, setSearchQuery] = useState("");
+  const [sortOrder, setSortOrder] = useState<"recent" | "oldest">("recent");
   const [deleteTarget, setDeleteTarget] = useState<SessionInfo | null>(null);
   const [isDeleting, setIsDeleting] = useState(false);
   const [pendingSession, setPendingSession] = useState<SessionInfo | null>(null);
@@ -102,15 +129,36 @@ export function SessionList({ onClose }: SessionListProps) {
     return sessionWorkDir;
   };
 
-  const filteredSessions = useMemo(() => {
-    if (!searchQuery.trim()) return sessions;
-    const q = searchQuery.toLowerCase();
-    return sessions.filter((s) => s.brief.toLowerCase().includes(q));
-  }, [sessions, searchQuery]);
+  const groupedSessions = useMemo(() => {
+    const q = searchQuery.trim().toLowerCase();
+    const filtered = q ? sessions.filter((s) => cleanSystemTags(s.brief).toLowerCase().includes(q)) : sessions;
+    const sorted = [...filtered].sort((a, b) => (sortOrder === "recent" ? b.updatedAt - a.updatedAt : a.updatedAt - b.updatedAt));
 
-  const handleSelect = async (session: SessionInfo) => {
-    console.log("[SessionList] Loading session:", session.id);
+    const now = new Date();
+    // Calendar-day arithmetic, not fixed 24h offsets — a DST change makes a
+    // local day 23 or 25 hours, which would shift sessions between groups.
+    const boundaries = {
+      startOfToday: new Date(now.getFullYear(), now.getMonth(), now.getDate()).getTime(),
+      startOfYesterday: new Date(now.getFullYear(), now.getMonth(), now.getDate() - 1).getTime(),
+      startOfWeekWindow: new Date(now.getFullYear(), now.getMonth(), now.getDate() - 6).getTime(),
+    };
+    // Map preserves insertion order, so group order follows the sort direction
+    const groups = new Map<string, SessionInfo[]>();
+    for (const session of sorted) {
+      const label = getGroupLabel(session.updatedAt, boundaries);
+      const bucket = groups.get(label);
+      if (bucket) {
+        bucket.push(session);
+      } else {
+        groups.set(label, [session]);
+      }
+    }
+    return [...groups.entries()].map(([label, items]) => ({ label, items }));
+  }, [sessions, searchQuery, sortOrder]);
+
+  const isEmpty = groupedSessions.length === 0;
 
+  const handleSelect = async (session: SessionInfo) => {
     // If streaming, show confirmation dialog
     if (isStreaming) {
       setPendingSession(session);
@@ -170,33 +218,50 @@ export function SessionList({ onClose }: SessionListProps) {
   return (
     <>
       <div className="flex flex-col max-h-[70vh]">
-        <div className="p-2 border-b border-border shrink-0">
-          <div className="relative">
+        <div className="flex items-center gap-1 p-2 border-b border-border shrink-0">
+          <div className="relative flex-1">
             <IconSearch className="absolute left-2.5 top-1/2 -translate-y-1/2 size-3.5 text-muted-foreground" />
             <Input placeholder="Search conversations..." value={searchQuery} onChange={(e) => setSearchQuery(e.target.value)} className="pl-8 h-8 text-xs" />
           </div>
+          <Button
+            variant="ghost"
+            size="icon-xs"
+            title={sortOrder === "recent" ? "Recent first — click for oldest first" : "Oldest first — click for recent first"}
+            aria-label={sortOrder === "recent" ? "Sort: recent first" : "Sort: oldest first"}
+            onClick={() => setSortOrder((prev) => (prev === "recent" ? "oldest" : "recent"))}
+          >
+            {sortOrder === "recent" ? <IconSortDescending className="size-3.5 text-muted-foreground" /> : <IconSortAscending className="size-3.5 text-muted-foreground" />}
+          </Button>
         </div>
         <div className="overflow-y-auto flex-1 min-h-0">
-          <div className="p-1.5 space-y-1">
-            {loading ? (
-              <div className="px-3 py-8 text-center text-xs text-muted-foreground">Loading...</div>
-            ) : filteredSessions.length === 0 ? (
-              <div className="px-3 py-8 text-center text-xs text-muted-foreground">{searchQuery ? "No conversations found" : "No conversations yet"}</div>
-            ) : (
-              filteredSessions.map((session) => (
-                <SessionItem
-                  key={session.id}
-                  session={session}
-                  isSelected={sessionId === session.id}
-                  onSelect={() => {
-                    void handleSelect(session);
-                  }}
-                  onDelete={() => setDeleteTarget(session)}
-                  dirLabel={getWorkDirLabel(session.workDir)}
-                />
-              ))
-            )}
-          </div>
+          {loading ? (
+            <div className="px-3 py-8 text-center text-xs text-muted-foreground">Loading...</div>
+          ) : isEmpty ? (
+            <div className="px-3 py-8 text-center text-xs text-muted-foreground">{searchQuery ? "No conversations found" : "No conversations yet"}</div>
+          ) : (
+            <div className="pb-1.5">
+              {groupedSessions.map((group) => (
+                <div key={group.label}>
+                  <div className="sticky top-0 z-10 bg-popover px-3 py-1 text-[10px] font-medium uppercase tracking-wider text-muted-foreground">{group.label}</div>
+                  <div className="px-1.5 space-y-1">
+                    {group.items.map((session) => (
+                      <SessionItem
+                        key={session.id}
+                        session={session}
+                        isSelected={sessionId === session.id}
+                        onSelect={() => {
+                          void handleSelect(session);
+                        }}
+                        onDelete={() => setDeleteTarget(session)}
+                        dirLabel={getWorkDirLabel(session.workDir)}
+                        searchQuery={searchQuery}
+                      />
+                    ))}
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
         </div>
       </div>
 
diff --git a/apps/vscode/webview-ui/src/components/SilverSpinner.tsx b/apps/vscode/webview-ui/src/components/SilverSpinner.tsx
index 41b59dd0..1fa4d471 100644
--- a/apps/vscode/webview-ui/src/components/SilverSpinner.tsx
+++ b/apps/vscode/webview-ui/src/components/SilverSpinner.tsx
@@ -3,7 +3,7 @@ import { cn } from "@/lib/utils";
 export function SilverSpinner({ className }: { className?: string }) {
   return (
     <span className={cn("inline-flex items-center justify-center size-3.5 shrink-0", className)}>
-      <span className="size-2 rounded-full bg-zinc-400 dark:bg-zinc-300 animate-pulse-slow shadow-[0_0_6px_rgba(212,212,216,0.4)]" />
+      <span className="size-2 rounded-full bg-muted-foreground animate-pulse-slow shadow-[0_0_6px_color-mix(in_srgb,var(--muted-foreground)_40%,transparent)]" />
     </span>
   );
 }
diff --git a/apps/vscode/webview-ui/src/components/ThinkingBlock.tsx b/apps/vscode/webview-ui/src/components/ThinkingBlock.tsx
index 8c093807..321dd7a2 100644
--- a/apps/vscode/webview-ui/src/components/ThinkingBlock.tsx
+++ b/apps/vscode/webview-ui/src/components/ThinkingBlock.tsx
@@ -21,14 +21,14 @@ export function ThinkingBlock({ content, finished, compact }: ThinkingBlockProps
   if (!showThinkingContent) {
     // Hidden mode: static label, no interaction
     return (
-      <div className="rounded-lg border border-zinc-200/50 bg-zinc-50/30 dark:border-zinc-800/50 dark:bg-zinc-900/10 overflow-hidden">
+      <div className="rounded-lg border border-border/50 bg-muted/30 overflow-hidden">
         <div
           className={cn("w-full flex items-center gap-2", compact ? "px-2 py-1.5" : "px-3 py-2")}
         >
           <div className="inline-flex items-center gap-2">
-            <IconBulb className={cn("text-zinc-500", compact ? "size-3" : "size-3.5")} />
-            <span className={cn("font-medium text-zinc-700 dark:text-zinc-300", compact ? "text-[0.75rem]" : "text-xs")}>Thinking</span>
-            {isStreaming && <SilverSpinner className={cn("text-zinc-400 dark:text-zinc-300", compact ? "size-3" : "size-3.5")} />}
+            <IconBulb className={cn("text-muted-foreground", compact ? "size-3" : "size-3.5")} />
+            <span className={cn("font-medium text-foreground", compact ? "text-[0.75rem]" : "text-xs")}>Thinking</span>
+            {isStreaming && <SilverSpinner className={cn("text-muted-foreground", compact ? "size-3" : "size-3.5")} />}
           </div>
         </div>
       </div>
@@ -41,23 +41,23 @@ export function ThinkingBlock({ content, finished, compact }: ThinkingBlockProps
   }
 
   return (
-    <div className="rounded-lg border border-zinc-200/50 bg-zinc-50/30 dark:border-zinc-800/50 dark:bg-zinc-900/10 overflow-hidden">
+    <div className="rounded-lg border border-border/50 bg-muted/30 overflow-hidden">
       <button
         onClick={() => setExpanded(!expanded)}
-        className={cn("w-full flex items-center gap-2 hover:bg-zinc-100/50 dark:hover:bg-zinc-800/20 transition-colors", compact ? "px-2 py-1.5" : "px-3 py-2")}
+        className={cn("w-full flex items-center gap-2 hover:bg-muted/50 transition-colors", compact ? "px-2 py-1.5" : "px-3 py-2")}
       >
         <div className="inline-flex items-center gap-2">
-          <IconBulb className={cn("text-zinc-500", compact ? "size-3" : "size-3.5")} />
-          <span className={cn("font-medium text-zinc-700 dark:text-zinc-300", compact ? "text-[0.75rem]" : "text-xs")}>Thinking</span>
-          {isStreaming && <SilverSpinner className={cn("text-zinc-400 dark:text-zinc-300", compact ? "size-3" : "size-3.5")} />}
+          <IconBulb className={cn("text-muted-foreground", compact ? "size-3" : "size-3.5")} />
+          <span className={cn("font-medium text-foreground", compact ? "text-[0.75rem]" : "text-xs")}>Thinking</span>
+          {isStreaming && <SilverSpinner className={cn("text-muted-foreground", compact ? "size-3" : "size-3.5")} />}
         </div>
-        <IconChevronDown className={cn("text-zinc-400 ml-auto transition-transform", compact ? "size-3" : "size-3.5", expanded && "rotate-180")} />
+        <IconChevronDown className={cn("text-muted-foreground ml-auto transition-transform", compact ? "size-3" : "size-3.5", expanded && "rotate-180")} />
       </button>
 
       {expanded && content && (
         <Markdown
           content={content}
-          className={cn("border-t border-zinc-200/50 dark:border-zinc-700/50", compact ? "py-2 px-2 text-[0.75rem]" : "py-3 px-2 pl-3.5 text-xs")}
+          className={cn("border-t border-border/50", compact ? "py-2 px-2 text-[0.75rem]" : "py-3 px-2 pl-3.5 text-xs")}
           enableEnrichment={finished}
         />
       )}
diff --git a/apps/vscode/webview-ui/src/components/ThinkingButton.tsx b/apps/vscode/webview-ui/src/components/ThinkingButton.tsx
deleted file mode 100644
index 236d53fc..00000000
--- a/apps/vscode/webview-ui/src/components/ThinkingButton.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import { IconBulb, IconCheck } from "@tabler/icons-react";
-
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
-import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
-import { cn } from "@/lib/utils";
-import type { ThinkingMode } from "shared/legacy-sdk";
-
-interface ThinkingButtonProps {
-  mode: ThinkingMode;
-  effort: string;
-  efforts?: string[];
-  alwaysOn?: boolean;
-  disabled?: boolean;
-  /** When set, rendered as a muted wrapping note below the effort options
-   * (e.g. the mid-conversation switch cache-cost notice). */
-  cacheNote?: string;
-  onToggle: () => void;
-  onSelectEffort: (effort: string) => void;
-}
-
-function label(effort: string): string {
-  return effort.charAt(0).toUpperCase() + effort.slice(1);
-}
-
-export function ThinkingButton({ mode, effort, efforts = [], alwaysOn = false, disabled, cacheNote, onToggle, onSelectEffort }: ThinkingButtonProps) {
-  if (mode === "none") return null;
-
-  const active = effort !== "off" || alwaysOn;
-  const button = (
-    <button
-      type="button"
-      onClick={mode === "switch" && !disabled ? onToggle : undefined}
-      disabled={disabled || mode === "always"}
-      className={cn(
-        "flex items-center gap-0.5 justify-center h-6 min-w-6 px-1 rounded-md transition-all",
-        active ? "bg-blue-500/15 text-blue-500" : "bg-muted/50 text-muted-foreground hover:bg-muted hover:text-foreground",
-        !disabled && mode !== "always" && "cursor-pointer hover:bg-blue-500/25",
-        (disabled || mode === "always") && "cursor-default",
-      )}
-    >
-      <IconBulb className="size-4" />
-      {mode === "effort" && <span className="text-[9px] font-medium leading-none">{label(effort)}</span>}
-    </button>
-  );
-
-  if (mode === "effort") {
-    const options = alwaysOn ? efforts : ["off", ...efforts];
-    return (
-      <DropdownMenu>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <DropdownMenuTrigger asChild disabled={disabled}>{button}</DropdownMenuTrigger>
-          </TooltipTrigger>
-          <TooltipContent>Thinking effort: {label(effort)}</TooltipContent>
-        </Tooltip>
-        <DropdownMenuContent align="start">
-          {options.map((option) => (
-            <DropdownMenuItem key={option} onClick={() => onSelectEffort(option)} className="text-xs gap-2">
-              <IconCheck className={cn("size-3", option !== effort && "opacity-0")} />
-              {label(option)}
-            </DropdownMenuItem>
-          ))}
-          {cacheNote !== undefined && (
-            <div className="w-44 px-2 py-1.5 text-[10px] leading-snug whitespace-normal text-muted-foreground">
-              {cacheNote}
-            </div>
-          )}
-        </DropdownMenuContent>
-      </DropdownMenu>
-    );
-  }
-
-  const tooltip = mode === "always" ? "Thinking is always enabled for this model" : active ? "Thinking enabled" : "Enable thinking";
-  return (
-    <Tooltip>
-      <TooltipTrigger asChild>{button}</TooltipTrigger>
-      <TooltipContent>{tooltip}</TooltipContent>
-    </Tooltip>
-  );
-}
diff --git a/apps/vscode/webview-ui/src/components/ToolRenderers.tsx b/apps/vscode/webview-ui/src/components/ToolRenderers.tsx
index 9026683a..207ba584 100644
--- a/apps/vscode/webview-ui/src/components/ToolRenderers.tsx
+++ b/apps/vscode/webview-ui/src/components/ToolRenderers.tsx
@@ -50,7 +50,7 @@ function getRichDisplayBlocks(display?: DisplayBlock[]): DisplayBlock[] {
   if (!display) {
     return [];
   }
-  return display.filter((b) => b.type === "diff");
+  return display.filter((b) => b.type === "diff" || b.type === "shell");
 }
 
 function CodeBlock({ content, maxLines = 10 }: { content: string; maxLines?: number }) {
@@ -61,14 +61,14 @@ function CodeBlock({ content, maxLines = 10 }: { content: string; maxLines?: num
 
   return (
     <div className="relative group/codeblock">
-      <pre className="text-[11px] bg-zinc-100 dark:bg-zinc-800 text-zinc-700 dark:text-zinc-300 rounded px-3 py-2 overflow-x-auto whitespace-pre-wrap break-all">
+      <pre className="text-[11px] bg-muted text-foreground rounded px-3 py-2 overflow-x-auto whitespace-pre-wrap break-all">
         {displayContent}
-        {shouldCollapse && !expanded && <span className="text-zinc-500">{"\n"}...</span>}
+        {shouldCollapse && !expanded && <span className="text-muted-foreground">{"\n"}...</span>}
       </pre>
       {shouldCollapse && (
         <button
           onClick={() => setExpanded(!expanded)}
-          className="absolute bottom-1.5 right-1.5 text-[11px] px-1.5 py-0.5 rounded bg-zinc-200 dark:bg-zinc-700 text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-100 opacity-0 group-hover/codeblock:opacity-100 transition-opacity cursor-pointer"
+          className="absolute bottom-1.5 right-1.5 text-[11px] px-1.5 py-0.5 rounded bg-muted text-muted-foreground hover:text-foreground opacity-0 group-hover/codeblock:opacity-100 transition-opacity cursor-pointer"
         >
           {expanded ? "Less" : `Expand +${lines.length - maxLines}`}
         </button>
@@ -81,12 +81,12 @@ function StatusIndicator({ status }: { status: "pending" | "success" | "error" }
   if (status === "pending") {
     return (
       <span className="relative flex size-2">
-        <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-amber-400 opacity-75" />
-        <span className="relative inline-flex rounded-full size-2 bg-amber-500" />
+        <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-warning opacity-75" />
+        <span className="relative inline-flex rounded-full size-2 bg-warning" />
       </span>
     );
   }
-  return <span className={cn("inline-flex rounded-full size-2", status === "success" ? "bg-emerald-500" : "bg-red-500")} />;
+  return <span className={cn("inline-flex rounded-full size-2", status === "success" ? "bg-success" : "bg-destructive")} />;
 }
 
 function ToolIcon({ name }: { name: string }) {
@@ -124,14 +124,14 @@ function TodoStatusIcon({ status }: { status: string }) {
   if (status === "done") {
     return (
       <div className="size-4 rounded flex items-center justify-center">
-        <IconSquareCheck className="size-3 text-zinc-600 dark:text-zinc-400" />
+        <IconSquareCheck className="size-3 text-muted-foreground" />
       </div>
     );
   }
   if (status === "in_progress") {
-    return <IconSquareChevronRight className="size-4 text-amber-500" />;
+    return <IconSquareChevronRight className="size-4 text-warning" />;
   }
-  return <IconSquare className="size-4 text-zinc-300 dark:text-zinc-600" />;
+  return <IconSquare className="size-4 text-muted-foreground/50" />;
 }
 
 function SetTodoListTool({ result }: ToolRendererProps) {
@@ -217,7 +217,7 @@ function WriteFileTool({ call, result }: ToolRendererProps) {
           {hasRichDisplay ? (
             <DisplayBlocks blocks={richDisplay} maxHeight="max-h-48" />
           ) : (
-            <span className={cn("text-xs", !result.is_error ? "text-emerald-500" : "text-red-500")}>{!result.is_error ? "✓ Written" : formatOutput(result.output)}</span>
+            <span className={cn("text-xs", !result.is_error ? "text-success" : "text-destructive")}>{!result.is_error ? "✓ Written" : formatOutput(result.output)}</span>
           )}
         </IORow>
       )}
@@ -241,7 +241,7 @@ function StrReplaceFileTool({ call, result }: ToolRendererProps) {
           {hasRichDisplay ? (
             <DisplayBlocks blocks={richDisplay} maxHeight="max-h-48" />
           ) : (
-            <span className={cn("text-xs font-medium", !result.is_error ? "text-emerald-600 dark:text-emerald-500" : "text-destructive")}>
+            <span className={cn("text-xs font-medium", !result.is_error ? "text-success" : "text-destructive")}>
               {!result.is_error ? "✓ Replaced successfully" : formatOutput(result.output)}
             </span>
           )}
@@ -292,7 +292,7 @@ function GenericTool({ call, result }: ToolRendererProps) {
           ) : output ? (
             <CodeBlock content={output} />
           ) : (
-            <span className={cn("text-xs", !result.is_error ? "text-emerald-500" : "text-red-500")}>{!result.is_error ? "✓ Done" : "✗ Failed"}</span>
+            <span className={cn("text-xs", !result.is_error ? "text-success" : "text-destructive")}>{!result.is_error ? "✓ Done" : "✗ Failed"}</span>
           )}
         </IORow>
       )}
@@ -340,7 +340,7 @@ function TaskTool({ call, result, subagentSteps }: ToolRendererProps) {
     <div className="divide-y divide-border">
       <div className="py-2">
         <div className="flex items-center gap-2 mb-1.5">
-          <span className="text-[10px] px-1.5 py-0.5 rounded bg-blue-500/10 text-blue-600 dark:text-blue-400 font-medium">{subagentName}</span>
+          <span className="text-[10px] px-1.5 py-0.5 rounded bg-brand/10 text-brand font-medium">{subagentName}</span>
           <span className="text-xs font-medium">{description}</span>
         </div>
         {prompt && <div className="text-[10px] text-muted-foreground line-clamp-2">{prompt}</div>}
@@ -427,7 +427,7 @@ export function ToolCallCard({ call, result, subagentSteps, subagentStatus, work
         <ToolIcon name={call.name} />
         <span className="text-xs font-medium">{call.name}</span>
         <span className="text-xs text-muted-foreground truncate flex-1 text-left">{getToolLabel(call)}</span>
-        {subagentSteps && subagentSteps.length > 0 && <span className="text-[10px] px-1.5 py-0.5 rounded bg-blue-500/10 text-blue-500">{subagentSteps.length} steps</span>}
+        {subagentSteps && subagentSteps.length > 0 && <span className="text-[10px] px-1.5 py-0.5 rounded bg-brand/10 text-brand">{subagentSteps.length} steps</span>}
         <IconChevronDown className={cn("size-3.5 text-muted-foreground transition-transform", expanded && "rotate-180")} />
       </button>
       {expanded && <div className="@container px-3 py-0.5 border-t border-border">{renderContent()}</div>}
diff --git a/apps/vscode/webview-ui/src/components/WelcomeScreen.tsx b/apps/vscode/webview-ui/src/components/WelcomeScreen.tsx
index 4d4d2a29..dec3c5fc 100644
--- a/apps/vscode/webview-ui/src/components/WelcomeScreen.tsx
+++ b/apps/vscode/webview-ui/src/components/WelcomeScreen.tsx
@@ -1,8 +1,26 @@
 import { PythinkerMascot } from "./PythinkerMascot";
 import { useWelcomeHint } from "@/hooks/useWelcomeHint";
+import { Button } from "@/components/ui/button";
+import { bridge, Events } from "@/services";
+import { useChatStore } from "@/stores";
+import { cleanSystemTags } from "shared/utils";
+import { toast } from "./ui/sonner";
+import type { SessionInfo } from "shared/legacy-sdk";
+import { formatRelativeDate } from "@/lib/format";
 
 export function WelcomeScreen() {
-  const hint = useWelcomeHint();
+  const { hint, recentSessions } = useWelcomeHint();
+  const loadSession = useChatStore((s) => s.loadSession);
+  const { slashCommand } = hint;
+
+  const openSession = async (session: SessionInfo) => {
+    try {
+      const events = await bridge.loadSessionHistory(session.id);
+      await loadSession(session.id, events);
+    } catch (error) {
+      toast.error(`Unable to open the conversation: ${error instanceof Error ? error.message : String(error)}`);
+    }
+  };
 
   return (
     <div className="flex flex-col items-center gap-3 px-4">
@@ -10,9 +28,40 @@ export function WelcomeScreen() {
       {hint.component ? (
         hint.component
       ) : (
-        <div className="text-center space-y-0.5">
+        <div className="flex flex-col items-center text-center space-y-0.5">
           <p className="text-xs font-medium text-foreground">{hint.title}</p>
           <p className="text-xs text-muted-foreground">{hint.description}</p>
+          {slashCommand && (
+            <Button
+              variant="outline"
+              size="xs"
+              className="mt-1.5 text-xs"
+              onClick={() => bridge.emit(Events.InsertMention, { mention: slashCommand })}
+            >
+              {slashCommand}
+            </Button>
+          )}
+        </div>
+      )}
+      {recentSessions.length > 0 && (
+        <div className="w-full max-w-96 mt-2">
+          <p className="px-2 mb-1 text-[10px] font-medium uppercase tracking-wide text-muted-foreground">
+            Recent sessions
+          </p>
+          <div className="space-y-0.5">
+            {recentSessions.map((session) => (
+              <button
+                key={session.id}
+                className="w-full text-left px-2 py-1 rounded-md cursor-pointer transition-colors hover:bg-accent/50"
+                onClick={() => {
+                  void openSession(session);
+                }}
+              >
+                <p className="text-xs text-muted-foreground truncate">{cleanSystemTags(session.brief) || "Untitled"}</p>
+                <span className="text-[10px] text-muted-foreground/70">{formatRelativeDate(session.updatedAt)}</span>
+              </button>
+            ))}
+          </div>
         </div>
       )}
     </div>
diff --git a/apps/vscode/webview-ui/src/components/WorkDirModal.tsx b/apps/vscode/webview-ui/src/components/WorkDirModal.tsx
index 3cba9263..a15c60cb 100644
--- a/apps/vscode/webview-ui/src/components/WorkDirModal.tsx
+++ b/apps/vscode/webview-ui/src/components/WorkDirModal.tsx
@@ -84,7 +84,7 @@ export function WorkDirModal() {
                 <IconFolder className="size-4 text-muted-foreground shrink-0" />
               )}
               <span className="flex-1 truncate">{displayPath(dir)}</span>
-              {isSelected(dir) && <IconCheck className="size-4 text-blue-500 shrink-0" />}
+              {isSelected(dir) && <IconCheck className="size-4 text-brand shrink-0" />}
               {dir === workspaceRoot && <span className="text-xs text-muted-foreground">(root)</span>}
             </button>
           ))}
diff --git a/apps/vscode/webview-ui/src/components/WorkflowCard.tsx b/apps/vscode/webview-ui/src/components/WorkflowCard.tsx
index ace218c1..47ec3669 100644
--- a/apps/vscode/webview-ui/src/components/WorkflowCard.tsx
+++ b/apps/vscode/webview-ui/src/components/WorkflowCard.tsx
@@ -78,7 +78,7 @@ function LaneRow({ lane, workflowEnded, renderStepItem }: { lane: WorkflowLane;
         {/* What the lane is doing now takes the slack, so the counts stay in a
             column instead of drifting with the width of each label. */}
         <span className="flex-1 min-w-0 truncate text-muted-foreground">{abandoned ? "" : (runningToolLabel ?? "")}</span>
-        <span className={cn("tabular-nums shrink-0", abandoned ? "text-amber-600 dark:text-amber-400" : "text-muted-foreground")}>
+        <span className={cn("tabular-nums shrink-0", abandoned ? "text-warning" : "text-muted-foreground")}>
           {queued ? "queued" : `${abandoned ? "no result · " : lane.status === "done" ? "done · " : ""}${lane.stepCount} step${lane.stepCount === 1 ? "" : "s"}`}
           {duration && ` · ${duration}`}
         </span>
@@ -140,7 +140,7 @@ export function WorkflowCard({ call, result, subagentSteps, subagentStatus, work
         </div>
       </div>
       {workflowWarning && (
-        <div className="px-3 pb-2 text-[11px] text-amber-600 dark:text-amber-400 break-words">
+        <div className="px-3 pb-2 text-[11px] text-warning break-words">
           {workflowWarning.message}
         </div>
       )}
@@ -150,7 +150,7 @@ export function WorkflowCard({ call, result, subagentSteps, subagentStatus, work
         ))}
       </div>
       {abandonedCount > 0 && (
-        <div className="px-3 pb-2 text-[11px] text-amber-600 dark:text-amber-400">
+        <div className="px-3 pb-2 text-[11px] text-warning">
           {abandonedCount} agent{abandonedCount === 1 ? "" : "s"} stopped without reporting a result.
         </div>
       )}
diff --git a/apps/vscode/webview-ui/src/components/confighub/ConfigFileSection.tsx b/apps/vscode/webview-ui/src/components/confighub/ConfigFileSection.tsx
new file mode 100644
index 00000000..5cfb7497
--- /dev/null
+++ b/apps/vscode/webview-ui/src/components/confighub/ConfigFileSection.tsx
@@ -0,0 +1,80 @@
+import { useCallback, useEffect, useState } from "react";
+import { IconExternalLink, IconLoader2, IconRefresh } from "@tabler/icons-react";
+import { Button } from "@/components/ui/button";
+import { bridge } from "@/services";
+import type { ConfigInfo } from "shared/types";
+
+export function ConfigFileSection() {
+  const [info, setInfo] = useState<ConfigInfo | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | undefined>();
+
+  const load = useCallback(() => {
+    setLoading(true);
+    setError(undefined);
+    bridge
+      .getConfigInfo()
+      .then(setInfo)
+      .catch((error: unknown) => setError(error instanceof Error ? error.message : String(error)))
+      .finally(() => setLoading(false));
+  }, []);
+
+  useEffect(() => {
+    load();
+  }, [load]);
+
+  if (loading && info === null) {
+    return (
+      <div className="flex items-center gap-2 text-xs text-muted-foreground py-6 justify-center">
+        <IconLoader2 className="size-3.5 animate-spin" />
+        Reading config file…
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center justify-between gap-2">
+        <h2 className="text-xs font-medium">Config File</h2>
+        <Button variant="outline" size="sm" className="h-6 text-xs" onClick={load} disabled={loading}>
+          {loading ? <IconLoader2 className="size-3 mr-1 animate-spin" /> : <IconRefresh className="size-3 mr-1" />}
+          Refresh
+        </Button>
+      </div>
+
+      {error && (
+        <div className="rounded border border-destructive/30 bg-destructive/5 px-2.5 py-2 text-xs text-destructive">
+          {error}
+        </div>
+      )}
+
+      {info === null ? (
+        // A load error with no result means the state is unknown — the error
+        // banner above is the whole story, so do not claim the file is missing.
+        error === undefined && <p className="text-xs text-muted-foreground text-center py-10">No config file was found.</p>
+      ) : info.path === null || !info.exists ? (
+        <p className="text-xs text-muted-foreground text-center py-10">No config file was found.</p>
+      ) : (
+        <>
+          <div className="flex items-center gap-2 min-w-0">
+            <code className="text-[11px] font-mono text-muted-foreground truncate flex-1" title={info.path}>
+              {info.path}
+            </code>
+            <Button
+              variant="outline"
+              size="sm"
+              className="h-6 text-xs shrink-0"
+              onClick={() => info.path && void bridge.openFile(info.path)}
+            >
+              <IconExternalLink className="size-3 mr-1" />
+              Open in editor
+            </Button>
+          </div>
+          <pre className="text-[11px] font-mono bg-code-block border border-border rounded p-3 overflow-auto max-h-[60vh] whitespace-pre">
+            {info.content ?? ""}
+          </pre>
+        </>
+      )}
+    </div>
+  );
+}
diff --git a/apps/vscode/webview-ui/src/components/confighub/ConfigHub.tsx b/apps/vscode/webview-ui/src/components/confighub/ConfigHub.tsx
new file mode 100644
index 00000000..9bcfc6c7
--- /dev/null
+++ b/apps/vscode/webview-ui/src/components/confighub/ConfigHub.tsx
@@ -0,0 +1,104 @@
+import { useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import { useSettingsStore } from "@/stores";
+import type { ConfigHubSection } from "@/stores/settings.store";
+import { bridge } from "@/services";
+import { cn } from "@/lib/utils";
+import { SECTIONS } from "./sections";
+import { OverviewSection } from "./OverviewSection";
+import { ModelsSection } from "./ModelsSection";
+import { ProvidersSection } from "./ProvidersSection";
+import { MCPServersSection } from "./MCPServersSection";
+import { ConfigFileSection } from "./ConfigFileSection";
+import { SettingsSection } from "./SettingsSection";
+
+export function useSectionCounts(): Partial<Record<ConfigHubSection, number>> {
+  const { models, mcpServers } = useSettingsStore();
+  return {
+    models: models.length,
+    providers: new Set(models.map((m) => m.provider)).size,
+    mcp: mcpServers.length,
+  };
+}
+
+export function ConfigHub() {
+  const { configHub, openConfigHub, closeConfigHub, setMCPServers } = useSettingsStore();
+  const counts = useSectionCounts();
+  const section = configHub.section;
+  const active = SECTIONS.find((s) => s.id === section) ?? SECTIONS[0];
+
+  // Keep the rail/overview MCP count fresh; the MCP section surfaces fetch
+  // errors itself, so a failed count refresh stays silent here.
+  useEffect(() => {
+    void bridge.getMCPServers().then(setMCPServers).catch(() => undefined);
+  }, [setMCPServers]);
+
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if (e.key !== "Escape") return;
+      // A nested dialog (e.g. delete confirm) owns Escape while it is open.
+      if (e.target instanceof Element && e.target.closest('[role="dialog"], [role="alertdialog"]')) return;
+      closeConfigHub();
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [closeConfigHub]);
+
+  return (
+    <div className="flex-1 min-h-0 flex flex-col @container">
+      <div className="flex items-center justify-between gap-2 px-3 py-2 border-b border-border shrink-0">
+        <div className="flex items-center gap-1.5 min-w-0">
+          <span className="text-sm font-semibold whitespace-nowrap">Config Hub</span>
+          <span className="text-muted-foreground text-xs">/</span>
+          <span className="text-xs text-muted-foreground truncate">{active.label}</span>
+        </div>
+        <Button size="sm" className="h-6 text-xs" onClick={closeConfigHub}>
+          Done
+        </Button>
+      </div>
+
+      <div className="flex-1 min-h-0 flex">
+        <nav
+          aria-label="Config sections"
+          className="shrink-0 w-40 @max-[480px]:w-auto border-r border-border overflow-y-auto py-1.5 px-1.5 space-y-0.5"
+        >
+          {SECTIONS.map((s) => {
+            const isActive = s.id === section;
+            const count = counts[s.id];
+            return (
+              <button
+                key={s.id}
+                type="button"
+                onClick={() => openConfigHub(s.id)}
+                aria-current={isActive ? "page" : undefined}
+                title={s.label}
+                className={cn(
+                  "w-full flex items-center gap-2 px-2 py-1.5 rounded text-xs text-left transition-colors cursor-pointer",
+                  "@max-[480px]:justify-center @max-[480px]:px-1.5",
+                  isActive ? "bg-list-hover text-foreground" : "text-muted-foreground hover:bg-toolbar-hover hover:text-foreground",
+                )}
+              >
+                <s.icon className="size-4 shrink-0" />
+                <span className="flex-1 truncate @max-[480px]:hidden">{s.label}</span>
+                {count !== undefined && (
+                  <span className="shrink-0 text-[10px] tabular-nums rounded-full bg-badge text-badge-foreground px-1.5 py-px @max-[480px]:hidden">
+                    {count}
+                  </span>
+                )}
+              </button>
+            );
+          })}
+        </nav>
+
+        <main className="flex-1 min-w-0 min-h-0 overflow-y-auto p-3">
+          {section === "overview" && <OverviewSection onNavigate={openConfigHub} counts={counts} />}
+          {section === "models" && <ModelsSection />}
+          {section === "providers" && <ProvidersSection />}
+          {section === "mcp" && <MCPServersSection />}
+          {section === "config" && <ConfigFileSection />}
+          {section === "settings" && <SettingsSection />}
+        </main>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/vscode/webview-ui/src/components/MCPServersModal.tsx b/apps/vscode/webview-ui/src/components/confighub/MCPServersSection.tsx
similarity index 83%
rename from apps/vscode/webview-ui/src/components/MCPServersModal.tsx
rename to apps/vscode/webview-ui/src/components/confighub/MCPServersSection.tsx
index 326534f6..fd3ca56c 100644
--- a/apps/vscode/webview-ui/src/components/MCPServersModal.tsx
+++ b/apps/vscode/webview-ui/src/components/confighub/MCPServersSection.tsx
@@ -207,7 +207,7 @@ function ServerForm({
                 onClick={() => set("transport", t)}
                 className={cn(
                   "flex-1 h-7 text-xs rounded border flex items-center justify-center gap-1",
-                  data.transport === t ? "border-blue-500 bg-blue-500/10 text-blue-500" : "border-border",
+                  data.transport === t ? "border-brand bg-brand/10 text-brand" : "border-border",
                 )}
               >
                 {t === "stdio" ? <IconTerminal2 className="size-3" /> : <IconWorld className="size-3" />}
@@ -348,13 +348,13 @@ function ServerItem({ server, onDelete }: { server: MCPServerConfig; onDelete: (
   return (
     <div className="rounded-md border border-border/60 bg-card/30">
       <div className="flex items-center gap-2 px-2.5 py-1.5 cursor-pointer hover:bg-muted/30" onClick={() => setExpanded(!expanded)}>
-        <div className={cn("size-6 rounded flex items-center justify-center text-xs", isHttp ? "bg-blue-500/10 text-blue-500" : "bg-emerald-500/10 text-emerald-500")}>
+        <div className={cn("size-6 rounded flex items-center justify-center text-xs", isHttp ? "bg-brand/10 text-brand" : "bg-success/15 text-success")}>
           {isHttp ? <IconWorld className="size-3.5" /> : <IconTerminal2 className="size-3.5" />}
         </div>
         <div className="flex-1 min-w-0">
           <div className="flex items-center gap-1.5">
             <span className="text-xs font-medium">{server.name}</span>
-            {server.auth === "oauth" && <span className="text-[9px] px-1 py-0.5 rounded bg-amber-500/10 text-amber-600 dark:text-amber-400">OAuth</span>}
+            {server.auth === "oauth" && <span className="text-[9px] px-1 py-0.5 rounded bg-warning/15 text-warning">OAuth</span>}
           </div>
           <p className="text-[10px] text-muted-foreground truncate font-mono">
             {isHttp ? server.url : (
@@ -407,7 +407,7 @@ function ServerItem({ server, onDelete }: { server: MCPServerConfig; onDelete: (
 function RecommendedItem({ server, onInstall, isInstalling }: { server: RecommendedMCPServer; onInstall: () => void; isInstalling: boolean }) {
   return (
     <div className="flex items-center gap-2 px-2.5 py-1.5 rounded-md border border-dashed border-border/50">
-      <div className="size-6 rounded flex items-center justify-center bg-violet-500/10 text-violet-500">
+      <div className="size-6 rounded flex items-center justify-center bg-brand/10 text-brand">
         <IconTerminal2 className="size-3.5" />
       </div>
       <div className="flex-1 min-w-0">
@@ -435,8 +435,8 @@ function RecommendedItem({ server, onInstall, isInstalling }: { server: Recommen
   );
 }
 
-export function MCPServersModal() {
-  const { mcpServers, mcpModalOpen, setMCPServers, setMCPModalOpen } = useSettingsStore();
+export function MCPServersSection() {
+  const { mcpServers, setMCPServers } = useSettingsStore();
   const [showAdd, setShowAdd] = useState(false);
   const [addForm, setAddForm] = useState<FormData>(() => emptyForm());
   const [installingRecommended, setInstallingRecommended] = useState<string | null>(null);
@@ -445,12 +445,10 @@ export function MCPServersModal() {
   const [actionError, setActionError] = useState<string | null>(null);
 
   useEffect(() => {
-    if (mcpModalOpen) {
-      void bridge.getMCPServers().then(setMCPServers).catch((error: unknown) => {
-        setActionError(error instanceof Error ? error.message : String(error));
-      });
-    }
-  }, [mcpModalOpen, setMCPServers]);
+    void bridge.getMCPServers().then(setMCPServers).catch((error: unknown) => {
+      setActionError(error instanceof Error ? error.message : String(error));
+    });
+  }, [setMCPServers]);
 
   useEffect(() => {
     if (!showAdd) setAddForm(emptyForm());
@@ -496,68 +494,55 @@ export function MCPServersModal() {
     setInstallingRecommended(null);
   };
 
-  if (!mcpModalOpen) return null;
-
   return (
     <>
-      <div className="fixed inset-0 z-40 flex flex-col bg-background">
-        <div className="flex items-center justify-between px-3 py-2 border-b">
-          <div className="flex items-center gap-2">
-            <IconServer className="size-4 text-blue-500" />
-            <h2 className="text-xs font-medium">MCP Servers</h2>
-          </div>
-          <div className="flex items-center gap-1">
-            <Button variant="outline" size="sm" className="h-6 text-xs" onClick={() => setShowAdd(true)}>
-              <IconPlus className="size-3 mr-1" />
-              Add
-            </Button>
-            <Button variant="ghost" size="icon" className="size-6" onClick={() => setMCPModalOpen(false)}>
-              <IconX className="size-3.5" />
-            </Button>
-          </div>
+      <div className="space-y-4">
+        <div className="flex items-center justify-between">
+          <h2 className="text-xs font-medium">MCP Servers</h2>
+          <Button variant="outline" size="sm" className="h-6 text-xs" onClick={() => setShowAdd(true)}>
+            <IconPlus className="size-3 mr-1" />
+            Add
+          </Button>
         </div>
-        <div className="flex-1 overflow-y-auto">
-          <div className="max-w-2xl mx-auto px-3 py-3 space-y-4">
-            {actionError && (
-              <div className="rounded border border-destructive/30 bg-destructive/5 px-2.5 py-2 text-xs text-destructive">
-                {actionError}
-              </div>
-            )}
-            {showAdd && (
-              <div className="rounded-md border border-blue-500/5 p-2.5">
-                <div className="flex items-center gap-2 mb-2">
-                  <IconPlus className="size-3.5 text-blue-500" />
-                  <span className="text-xs font-medium">Add MCP Server</span>
-                </div>
-                <ServerForm data={addForm} onChange={setAddForm} onSubmit={() => { void handleAdd(); }} onCancel={() => setShowAdd(false)} submitLabel="Add Server" />
-              </div>
-            )}
 
-            {mcpServers.length > 0 && (
-              <div className="space-y-1.5">
-                {mcpServers.map((server) => (
-                  <ServerItem key={server.name} server={server} onDelete={() => setDeleteTarget(server.name)} />
-                ))}
-              </div>
-            )}
+        {actionError && (
+          <div className="rounded border border-destructive/30 bg-destructive/5 px-2.5 py-2 text-xs text-destructive">
+            {actionError}
+          </div>
+        )}
+        {showAdd && (
+          <div className="rounded-md border border-brand/40 p-2.5">
+            <div className="flex items-center gap-2 mb-2">
+              <IconPlus className="size-3.5 text-brand" />
+              <span className="text-xs font-medium">Add MCP Server</span>
+            </div>
+            <ServerForm data={addForm} onChange={setAddForm} onSubmit={() => { void handleAdd(); }} onCancel={() => setShowAdd(false)} submitLabel="Add Server" />
+          </div>
+        )}
 
-            {mcpServers.length === 0 && !showAdd && (
-              <div className="py-6 text-center">
-                <IconServer className="size-6 mx-auto text-muted-foreground/30 mb-1" />
-                <p className="text-xs text-muted-foreground">No MCP servers configured</p>
-              </div>
-            )}
+        {mcpServers.length > 0 && (
+          <div className="space-y-1.5">
+            {mcpServers.map((server) => (
+              <ServerItem key={server.name} server={server} onDelete={() => setDeleteTarget(server.name)} />
+            ))}
+          </div>
+        )}
 
-            <div className="space-y-1.5">
-              <h3 className="text-[10px] font-medium text-muted-foreground uppercase tracking-wider">Recommended</h3>
-              {RECOMMENDED_MCP_SERVERS.filter((s) => !installedNames.has(s.id)).map((server) => (
-                <RecommendedItem key={server.id} server={server} onInstall={() => { void handleInstallRecommended(server); }} isInstalling={installingRecommended === server.id} />
-              ))}
-              {RECOMMENDED_MCP_SERVERS.every((s) => installedNames.has(s.id)) && (
-                <p className="text-[10px] text-muted-foreground text-center py-2">All recommended servers installed</p>
-              )}
-            </div>
+        {mcpServers.length === 0 && !showAdd && (
+          <div className="py-6 text-center">
+            <IconServer className="size-6 mx-auto text-muted-foreground/30 mb-1" />
+            <p className="text-xs text-muted-foreground">No MCP servers configured</p>
           </div>
+        )}
+
+        <div className="space-y-1.5">
+          <h3 className="text-[10px] font-medium text-muted-foreground uppercase tracking-wider">Recommended</h3>
+          {RECOMMENDED_MCP_SERVERS.filter((s) => !installedNames.has(s.id)).map((server) => (
+            <RecommendedItem key={server.id} server={server} onInstall={() => { void handleInstallRecommended(server); }} isInstalling={installingRecommended === server.id} />
+          ))}
+          {RECOMMENDED_MCP_SERVERS.every((s) => installedNames.has(s.id)) && (
+            <p className="text-[10px] text-muted-foreground text-center py-2">All recommended servers installed</p>
+          )}
         </div>
       </div>
 
diff --git a/apps/vscode/webview-ui/src/components/confighub/ModelsSection.tsx b/apps/vscode/webview-ui/src/components/confighub/ModelsSection.tsx
new file mode 100644
index 00000000..dcf83d87
--- /dev/null
+++ b/apps/vscode/webview-ui/src/components/confighub/ModelsSection.tsx
@@ -0,0 +1,72 @@
+import { IconCheck } from "@tabler/icons-react";
+import { Badge } from "@/components/ui/badge";
+import { groupModelsByProvider, useSettingsStore } from "@/stores";
+import { cn } from "@/lib/utils";
+
+const CAPABILITY_LABELS: Record<string, string> = {
+  image_in: "vision",
+  video_in: "video",
+  thinking: "thinking",
+  always_thinking: "always thinking",
+  tools: "tools",
+  tool_use: "tools",
+};
+
+function formatContextWindow(tokens: number): string {
+  return `${Math.round(tokens / 1000)}k`;
+}
+
+export function ModelsSection() {
+  const { models, currentModel } = useSettingsStore();
+  const groups = groupModelsByProvider(models);
+
+  if (groups.length === 0) {
+    return <p className="text-xs text-muted-foreground text-center py-10">No models available. Add a provider first.</p>;
+  }
+
+  return (
+    <div className="space-y-4">
+      {groups.map((group) => (
+        <div key={group.provider}>
+          <h3 className="text-[10px] font-medium text-muted-foreground uppercase tracking-wider mb-1.5">
+            {group.label}
+          </h3>
+          <div className="space-y-1">
+            {group.models.map((model) => {
+              const isCurrent = model.id === currentModel;
+              return (
+                <div
+                  key={model.id}
+                  className={cn(
+                    "rounded border border-border/60 px-2.5 py-1.5 flex items-center gap-2",
+                    isCurrent ? "bg-list-hover" : "bg-muted/20",
+                  )}
+                >
+                  <IconCheck className={cn("size-3.5 shrink-0 text-brand", !isCurrent && "opacity-0")} />
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center gap-1.5">
+                      <span className="text-xs font-medium truncate">{model.name}</span>
+                      {model.contextWindow !== undefined && (
+                        <span className="text-[10px] text-muted-foreground tabular-nums shrink-0">
+                          {formatContextWindow(model.contextWindow)}
+                        </span>
+                      )}
+                    </div>
+                    <p className="text-[10px] text-muted-foreground font-mono truncate">{model.id}</p>
+                  </div>
+                  <div className="flex items-center gap-1 shrink-0 flex-wrap justify-end">
+                    {model.capabilities.map((capability) => (
+                      <Badge key={capability} variant="outline" className="h-4 px-1.5 text-[9px]">
+                        {CAPABILITY_LABELS[capability] ?? capability.replaceAll("_", " ")}
+                      </Badge>
+                    ))}
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/apps/vscode/webview-ui/src/components/confighub/OverviewSection.tsx b/apps/vscode/webview-ui/src/components/confighub/OverviewSection.tsx
new file mode 100644
index 00000000..ae07c189
--- /dev/null
+++ b/apps/vscode/webview-ui/src/components/confighub/OverviewSection.tsx
@@ -0,0 +1,43 @@
+import { Button } from "@/components/ui/button";
+import type { ConfigHubSection } from "@/stores/settings.store";
+import { SECTIONS } from "./sections";
+
+const DESCRIPTIONS: Record<Exclude<ConfigHubSection, "overview">, string> = {
+  models: "Every model available to the agent, grouped by provider.",
+  providers: "API providers in config.toml — add, inspect, or remove them.",
+  mcp: "MCP servers the agent can call — manage, test, and authenticate.",
+  config: "The raw config.toml the extension and the CLI share.",
+  settings: "Extension behavior: approvals, autosave, shortcuts, thinking display.",
+};
+
+export function OverviewSection({
+  onNavigate,
+  counts,
+}: {
+  onNavigate: (section: ConfigHubSection) => void;
+  counts: Partial<Record<ConfigHubSection, number>>;
+}) {
+  return (
+    <div className="grid grid-cols-1 @[480px]:grid-cols-2 gap-2.5">
+      {SECTIONS.filter((s) => s.id !== "overview").map((s) => (
+        <div key={s.id} className="rounded-md border border-border bg-card/30 p-3 flex flex-col gap-2">
+          <div className="flex items-center gap-2">
+            <s.icon className="size-4 text-brand shrink-0" />
+            <span className="text-xs font-medium flex-1 truncate">{s.label}</span>
+            {counts[s.id] !== undefined && (
+              <span className="text-[10px] tabular-nums rounded-full bg-badge text-badge-foreground px-1.5 py-px shrink-0">
+                {counts[s.id]}
+              </span>
+            )}
+          </div>
+          <p className="text-[11px] text-muted-foreground leading-4 flex-1">
+            {DESCRIPTIONS[s.id as Exclude<ConfigHubSection, "overview">]}
+          </p>
+          <Button variant="outline" size="sm" className="h-6 text-xs self-start" onClick={() => onNavigate(s.id)}>
+            Open {s.label}
+          </Button>
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/apps/vscode/webview-ui/src/components/ProvidersModal.tsx b/apps/vscode/webview-ui/src/components/confighub/ProvidersSection.tsx
similarity index 51%
rename from apps/vscode/webview-ui/src/components/ProvidersModal.tsx
rename to apps/vscode/webview-ui/src/components/confighub/ProvidersSection.tsx
index 8c487cd0..118c0b08 100644
--- a/apps/vscode/webview-ui/src/components/ProvidersModal.tsx
+++ b/apps/vscode/webview-ui/src/components/confighub/ProvidersSection.tsx
@@ -1,14 +1,13 @@
 import { useEffect, useMemo, useState } from "react";
 import {
+  IconArrowLeft,
   IconCheck,
   IconChevronDown,
   IconKey,
   IconLoader2,
-  IconPlug,
   IconPlus,
   IconSearch,
   IconTrash,
-  IconX,
 } from "@tabler/icons-react";
 
 import { Button } from "@/components/ui/button";
@@ -25,7 +24,6 @@ import {
   AlertDialogTitle,
 } from "@/components/ui/alert-dialog";
 import { bridge } from "@/services";
-import { useSettingsStore } from "@/stores";
 import { cn } from "@/lib/utils";
 import type {
   CatalogProviderSummary,
@@ -40,8 +38,7 @@ const KEY_SOURCE_LABEL: Record<ConfiguredProvider["keySource"], string> = {
   none: "No key configured",
 };
 
-export function ProvidersModal() {
-  const { providersModalOpen, setProvidersModalOpen } = useSettingsStore();
+export function ProvidersSection() {
   const [view, setView] = useState<ProvidersView>({ providers: [], defaultModel: null });
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | undefined>();
@@ -49,7 +46,6 @@ export function ProvidersModal() {
   const [deleteTarget, setDeleteTarget] = useState<string | undefined>();
 
   useEffect(() => {
-    if (!providersModalOpen) return;
     setLoading(true);
     setError(undefined);
     bridge
@@ -57,9 +53,7 @@ export function ProvidersModal() {
       .then(setView)
       .catch((error: unknown) => setError(messageOf(error)))
       .finally(() => setLoading(false));
-  }, [providersModalOpen]);
-
-  if (!providersModalOpen) return null;
+  }, []);
 
   const remove = async (providerId: string) => {
     setDeleteTarget(undefined);
@@ -73,71 +67,59 @@ export function ProvidersModal() {
 
   return (
     <>
-      <div className="fixed inset-0 z-40 flex flex-col bg-background">
-        <div className="flex items-center justify-between px-3 py-2 border-b">
-          <div className="flex items-center gap-2">
-            <IconPlug className="size-4 text-brand" />
+      {addOpen ? (
+        <AddProviderPanel
+          onClose={() => setAddOpen(false)}
+          onAdded={(next) => {
+            setView(next);
+            setAddOpen(false);
+          }}
+        />
+      ) : (
+        <div className="space-y-3">
+          <div className="flex items-center justify-between">
             <h2 className="text-xs font-medium">Model Providers</h2>
-          </div>
-          <div className="flex items-center gap-1">
             <Button variant="outline" size="sm" className="h-6 text-xs" onClick={() => setAddOpen(true)}>
               <IconPlus className="size-3 mr-1" />
               Add
             </Button>
-            <Button variant="ghost" size="icon" className="size-6" onClick={() => setProvidersModalOpen(false)}>
-              <IconX className="size-3.5" />
-            </Button>
           </div>
-        </div>
 
-        <div className="flex-1 overflow-y-auto">
-          <div className="max-w-2xl mx-auto px-3 py-3 space-y-3">
-            {error && (
-              <div className="rounded border border-destructive/30 bg-destructive/5 px-2.5 py-2 text-xs text-destructive">
-                {error}
-              </div>
-            )}
+          {error && (
+            <div className="rounded border border-destructive/30 bg-destructive/5 px-2.5 py-2 text-xs text-destructive">
+              {error}
+            </div>
+          )}
 
-            <p className="text-[11px] text-muted-foreground">
-              Providers live in <code className="text-brand">~/.pythinker-code/config.toml</code>, the same file the
-              CLI reads. Anything added here works in the terminal too.
-            </p>
+          <p className="text-[11px] text-muted-foreground">
+            Providers live in <code className="text-brand">~/.pythinker-code/config.toml</code>, the same file the
+            CLI reads. Anything added here works in the terminal too.
+          </p>
 
-            {loading && view.providers.length === 0 ? (
-              <div className="flex items-center gap-2 text-xs text-muted-foreground py-6 justify-center">
-                <IconLoader2 className="size-3.5 animate-spin" />
-                Reading config.toml…
-              </div>
-            ) : view.providers.length === 0 ? (
-              <div className="text-center py-10 space-y-2">
-                <p className="text-xs text-muted-foreground">No providers configured yet.</p>
-                <Button variant="outline" size="sm" className="h-6 text-xs" onClick={() => setAddOpen(true)}>
-                  <IconPlus className="size-3 mr-1" />
-                  Add your first provider
-                </Button>
-              </div>
-            ) : (
-              view.providers.map((provider) => (
-                <ProviderRow
-                  key={provider.id}
-                  provider={provider}
-                  defaultModel={view.defaultModel}
-                  onRemove={() => setDeleteTarget(provider.id)}
-                />
-              ))
-            )}
-          </div>
+          {loading && view.providers.length === 0 ? (
+            <div className="flex items-center gap-2 text-xs text-muted-foreground py-6 justify-center">
+              <IconLoader2 className="size-3.5 animate-spin" />
+              Reading config.toml…
+            </div>
+          ) : view.providers.length === 0 ? (
+            <div className="text-center py-10 space-y-2">
+              <p className="text-xs text-muted-foreground">No providers configured yet.</p>
+              <Button variant="outline" size="sm" className="h-6 text-xs" onClick={() => setAddOpen(true)}>
+                <IconPlus className="size-3 mr-1" />
+                Add your first provider
+              </Button>
+            </div>
+          ) : (
+            view.providers.map((provider) => (
+              <ProviderRow
+                key={provider.id}
+                provider={provider}
+                defaultModel={view.defaultModel}
+                onRemove={() => setDeleteTarget(provider.id)}
+              />
+            ))
+          )}
         </div>
-      </div>
-
-      {addOpen && (
-        <AddProviderPanel
-          onClose={() => setAddOpen(false)}
-          onAdded={(next) => {
-            setView(next);
-            setAddOpen(false);
-          }}
-        />
       )}
 
       <AlertDialog open={deleteTarget !== undefined} onOpenChange={(open) => !open && setDeleteTarget(undefined)}>
@@ -178,23 +160,26 @@ function ProviderRow({
           className="flex items-center gap-2 flex-1 min-w-0 text-left"
           aria-expanded={expanded}
         >
-          <IconChevronDown className={cn("size-3 text-muted-foreground transition-transform", !expanded && "-rotate-90")} />
-          <span className="text-xs font-medium truncate">{provider.id}</span>
-          <span className="text-[10px] text-muted-foreground shrink-0 truncate">
+          <IconChevronDown className={cn("size-3 shrink-0 text-muted-foreground transition-transform", !expanded && "-rotate-90")} />
+          <span className="text-xs font-medium truncate min-w-8">{provider.id}</span>
+          <span className="text-[10px] text-muted-foreground truncate max-[340px]:hidden">
             {provider.host ?? provider.type}
           </span>
-          <span className="text-[10px] text-muted-foreground tabular-nums shrink-0">
+          <span className="text-[10px] text-muted-foreground tabular-nums shrink-0 whitespace-nowrap max-[300px]:hidden">
             {provider.models.length} model{provider.models.length === 1 ? "" : "s"}
           </span>
         </button>
         <span
+          title={provider.keySource === "env" ? provider.apiKeyEnvVar : KEY_SOURCE_LABEL[provider.keySource]}
           className={cn(
             "flex items-center gap-1 text-[10px] shrink-0",
             provider.keySource === "none" ? "text-destructive" : "text-muted-foreground",
           )}
         >
-          <IconKey className="size-3" />
-          {provider.keySource === "env" ? provider.apiKeyEnvVar : KEY_SOURCE_LABEL[provider.keySource]}
+          <IconKey className="size-3 shrink-0" />
+          <span className="whitespace-nowrap max-[420px]:hidden">
+            {provider.keySource === "env" ? provider.apiKeyEnvVar : KEY_SOURCE_LABEL[provider.keySource]}
+          </span>
         </span>
         <button onClick={onRemove} className="text-muted-foreground hover:text-destructive p-1" aria-label="Remove">
           <IconTrash className="size-3" />
@@ -276,141 +261,139 @@ function AddProviderPanel({
   const canSubmit = selected !== undefined && (useEnvVar ? selected.apiKeyEnvVar !== undefined : apiKey.trim().length > 0);
 
   return (
-    <div className="fixed inset-0 z-50 flex flex-col bg-background">
-      <div className="flex items-center justify-between px-3 py-2 border-b">
-        <h2 className="text-xs font-medium">{selected === undefined ? "Choose a provider" : `Connect ${selected.name}`}</h2>
-        <Button variant="ghost" size="icon" className="size-6" onClick={onClose}>
-          <IconX className="size-3.5" />
+    <div className="space-y-3">
+      <div className="flex items-center gap-1.5">
+        <Button variant="ghost" size="icon" className="size-6" onClick={onClose} aria-label="Back">
+          <IconArrowLeft className="size-3.5" />
         </Button>
+        <h2 className="text-xs font-medium">{selected === undefined ? "Choose a provider" : `Connect ${selected.name}`}</h2>
       </div>
 
-      <div className="flex-1 overflow-y-auto">
-        <div className="max-w-2xl mx-auto px-3 py-3 space-y-3">
-          {error && (
-            <div className="rounded border border-destructive/30 bg-destructive/5 px-2.5 py-2 text-xs text-destructive">
-              {error}
-            </div>
-          )}
+      <div className="space-y-3">
+        {error && (
+          <div className="rounded border border-destructive/30 bg-destructive/5 px-2.5 py-2 text-xs text-destructive">
+            {error}
+          </div>
+        )}
 
-          {selected === undefined ? (
-            <>
-              <div className="relative">
-                <IconSearch className="size-3.5 absolute left-2 top-1/2 -translate-y-1/2 text-muted-foreground" />
-                <Input
-                  autoFocus
-                  value={query}
-                  onChange={(event) => setQuery(event.target.value)}
-                  placeholder="Search providers…"
-                  className="h-7 text-xs pl-7"
-                />
+        {selected === undefined ? (
+          <>
+            <div className="relative">
+              <IconSearch className="size-3.5 absolute left-2 top-1/2 -translate-y-1/2 text-muted-foreground" />
+              <Input
+                autoFocus
+                value={query}
+                onChange={(event) => setQuery(event.target.value)}
+                placeholder="Search providers…"
+                className="h-7 text-xs pl-7"
+              />
+            </div>
+            {loading ? (
+              <div className="flex items-center gap-2 text-xs text-muted-foreground py-6 justify-center">
+                <IconLoader2 className="size-3.5 animate-spin" />
+                Loading the models.dev catalog…
               </div>
-              {loading ? (
-                <div className="flex items-center gap-2 text-xs text-muted-foreground py-6 justify-center">
-                  <IconLoader2 className="size-3.5 animate-spin" />
-                  Loading the models.dev catalog…
-                </div>
-              ) : (
-                <div className="space-y-0.5">
-                  {matches.map((entry) => (
-                    <button
-                      key={entry.id}
-                      onClick={() => {
-                        setSelected(entry);
-                        setUseEnvVar(false);
-                        setDefaultModel(undefined);
-                        // A key typed for one provider must not be submittable
-                        // under another provider's id.
-                        setApiKey("");
-                      }}
-                      className="w-full flex items-center gap-2 px-2.5 py-1.5 rounded hover:bg-muted/60 text-left"
-                    >
-                      <span className="text-xs flex-1 truncate">{entry.name}</span>
-                      <span className="text-[10px] text-muted-foreground tabular-nums">
-                        {entry.models.length} model{entry.models.length === 1 ? "" : "s"}
-                      </span>
-                    </button>
-                  ))}
-                  {matches.length === 0 && (
-                    <p className="text-xs text-muted-foreground text-center py-6">No provider matches “{query}”.</p>
-                  )}
-                </div>
-              )}
-            </>
-          ) : (
-            <>
-              <div className="space-y-1.5">
-                <Label className="text-[10px] text-muted-foreground">API key</Label>
-                {useEnvVar ? (
-                  <p className="text-xs">
-                    Read at connection time from{" "}
-                    <code className="text-brand">{selected.apiKeyEnvVar}</code>. The key is never written to disk.
-                  </p>
-                ) : (
-                  <Input
-                    autoFocus
-                    type="password"
-                    value={apiKey}
-                    onChange={(event) => setApiKey(event.target.value)}
-                    placeholder="sk-…"
-                    className="h-7 text-xs font-mono"
-                  />
-                )}
-                {selected.apiKeyEnvVar !== undefined && (
+            ) : (
+              <div className="space-y-0.5">
+                {matches.map((entry) => (
                   <button
-                    onClick={() => setUseEnvVar(!useEnvVar)}
-                    className="text-[10px] text-muted-foreground hover:text-foreground"
+                    key={entry.id}
+                    onClick={() => {
+                      setSelected(entry);
+                      setUseEnvVar(false);
+                      setDefaultModel(undefined);
+                      // A key typed for one provider must not be submittable
+                      // under another provider's id.
+                      setApiKey("");
+                    }}
+                    className="w-full flex items-center gap-2 px-2.5 py-1.5 rounded hover:bg-muted/60 text-left"
                   >
-                    {useEnvVar
-                      ? "Paste a key instead"
-                      : `Use the ${selected.apiKeyEnvVar} environment variable instead`}
+                    <span className="text-xs flex-1 truncate">{entry.name}</span>
+                    <span className="text-[10px] text-muted-foreground tabular-nums">
+                      {entry.models.length} model{entry.models.length === 1 ? "" : "s"}
+                    </span>
                   </button>
-                )}
-                {!useEnvVar && (
-                  <p className="text-[10px] text-muted-foreground">
-                    Stored in config.toml in plain text, as the CLI does.
-                  </p>
+                ))}
+                {matches.length === 0 && (
+                  <p className="text-xs text-muted-foreground text-center py-6">No provider matches “{query}”.</p>
                 )}
               </div>
-
-              <div className="space-y-1">
-                <Label className="text-[10px] text-muted-foreground">
-                  Default model <span className="text-muted-foreground/70">(optional)</span>
-                </Label>
-                <div className="space-y-0.5 max-h-64 overflow-y-auto rounded border border-border/60 p-1">
-                  {selected.models.map((model) => (
-                    <button
-                      key={model.id}
-                      onClick={() => setDefaultModel(defaultModel === model.id ? undefined : model.id)}
-                      className={cn(
-                        "w-full flex items-center gap-2 px-2 py-1 rounded text-left hover:bg-muted/60",
-                        defaultModel === model.id && "bg-brand/15",
-                      )}
-                    >
-                      <IconCheck
-                        className={cn("size-3 shrink-0", defaultModel === model.id ? "text-brand" : "opacity-0")}
-                      />
-                      <span className="text-[11px] flex-1 truncate">{model.name}</span>
-                      {model.thinking && <span className="text-[10px] text-muted-foreground">thinking</span>}
-                      {model.maxContextTokens !== undefined && (
-                        <span className="text-[10px] text-muted-foreground tabular-nums">
-                          {Math.round(model.maxContextTokens / 1000)}k
-                        </span>
-                      )}
-                    </button>
-                  ))}
-                </div>
+            )}
+          </>
+        ) : (
+          <>
+            <div className="space-y-1.5">
+              <Label className="text-[10px] text-muted-foreground">API key</Label>
+              {useEnvVar ? (
+                <p className="text-xs">
+                  Read at connection time from{" "}
+                  <code className="text-brand">{selected.apiKeyEnvVar}</code>. The key is never written to disk.
+                </p>
+              ) : (
+                <Input
+                  autoFocus
+                  type="password"
+                  value={apiKey}
+                  onChange={(event) => setApiKey(event.target.value)}
+                  placeholder="sk-…"
+                  className="h-7 text-xs font-mono"
+                />
+              )}
+              {selected.apiKeyEnvVar !== undefined && (
+                <button
+                  onClick={() => setUseEnvVar(!useEnvVar)}
+                  className="text-[10px] text-muted-foreground hover:text-foreground"
+                >
+                  {useEnvVar
+                    ? "Paste a key instead"
+                    : `Use the ${selected.apiKeyEnvVar} environment variable instead`}
+                </button>
+              )}
+              {!useEnvVar && (
                 <p className="text-[10px] text-muted-foreground">
-                  All {selected.models.length} models are imported either way. Leave this unset to keep your current
-                  default.
+                  Stored in config.toml in plain text, as the CLI does.
                 </p>
+              )}
+            </div>
+
+            <div className="space-y-1">
+              <Label className="text-[10px] text-muted-foreground">
+                Default model <span className="text-muted-foreground/70">(optional)</span>
+              </Label>
+              <div className="space-y-0.5 max-h-64 overflow-y-auto rounded border border-border/60 p-1">
+                {selected.models.map((model) => (
+                  <button
+                    key={model.id}
+                    onClick={() => setDefaultModel(defaultModel === model.id ? undefined : model.id)}
+                    className={cn(
+                      "w-full flex items-center gap-2 px-2 py-1 rounded text-left hover:bg-muted/60",
+                      defaultModel === model.id && "bg-brand/15",
+                    )}
+                  >
+                    <IconCheck
+                      className={cn("size-3 shrink-0", defaultModel === model.id ? "text-brand" : "opacity-0")}
+                    />
+                    <span className="text-[11px] flex-1 truncate">{model.name}</span>
+                    {model.thinking && <span className="text-[10px] text-muted-foreground">thinking</span>}
+                    {model.maxContextTokens !== undefined && (
+                      <span className="text-[10px] text-muted-foreground tabular-nums">
+                        {Math.round(model.maxContextTokens / 1000)}k
+                      </span>
+                    )}
+                  </button>
+                ))}
               </div>
-            </>
-          )}
-        </div>
+              <p className="text-[10px] text-muted-foreground">
+                All {selected.models.length} models are imported either way. Leave this unset to keep your current
+                default.
+              </p>
+            </div>
+          </>
+        )}
       </div>
 
       {selected !== undefined && (
-        <div className="flex items-center justify-between gap-2 px-3 py-2 border-t">
+        <div className="flex items-center justify-between gap-2 pt-3 border-t">
           <Button
             variant="ghost"
             size="sm"
diff --git a/apps/vscode/webview-ui/src/components/SettingsDialog.tsx b/apps/vscode/webview-ui/src/components/confighub/SettingsSection.tsx
similarity index 56%
rename from apps/vscode/webview-ui/src/components/SettingsDialog.tsx
rename to apps/vscode/webview-ui/src/components/confighub/SettingsSection.tsx
index 96b27b1b..8c49225b 100644
--- a/apps/vscode/webview-ui/src/components/SettingsDialog.tsx
+++ b/apps/vscode/webview-ui/src/components/confighub/SettingsSection.tsx
@@ -1,4 +1,3 @@
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
 import { Switch } from "@/components/ui/switch";
 import { Label } from "@/components/ui/label";
 import { useSettingsStore } from "@/stores";
@@ -47,8 +46,8 @@ const SETTING_ROWS: SettingRow[] = [
   },
 ];
 
-export function SettingsDialog() {
-  const { settingsDialogOpen, setSettingsDialogOpen, extensionConfig, setExtensionConfig } = useSettingsStore();
+export function SettingsSection() {
+  const { extensionConfig, setExtensionConfig } = useSettingsStore();
 
   const handleToggle = (key: SettingRow["key"], value: boolean) => {
     const previous = extensionConfig;
@@ -60,34 +59,28 @@ export function SettingsDialog() {
   };
 
   return (
-    <Dialog open={settingsDialogOpen} onOpenChange={setSettingsDialogOpen}>
-      <DialogContent className="sm:max-w-md">
-        <DialogHeader>
-          <DialogTitle className="text-sm">Settings</DialogTitle>
-        </DialogHeader>
-        <div className="space-y-4 py-1">
-          {SETTING_ROWS.map((row) => {
-            const isDisabled = row.disabled?.(extensionConfig) ?? false;
-            return (
-              <div key={row.key} className="flex items-start justify-between gap-4">
-                <div className="space-y-0.5">
-                  <Label htmlFor={`setting-${row.key}`} className="text-xs font-medium">
-                    {row.label}
-                  </Label>
-                  <p className="text-[11px] text-muted-foreground leading-4">{row.description}</p>
-                </div>
-                <Switch
-                  id={`setting-${row.key}`}
-                  checked={extensionConfig[row.key]}
-                  disabled={isDisabled}
-                  onCheckedChange={(checked) => handleToggle(row.key, checked)}
-                  className="mt-0.5 shrink-0"
-                />
-              </div>
-            );
-          })}
-        </div>
-      </DialogContent>
-    </Dialog>
+    <div className="space-y-4 max-w-md">
+      <h2 className="text-xs font-medium">Settings</h2>
+      {SETTING_ROWS.map((row) => {
+        const isDisabled = row.disabled?.(extensionConfig) ?? false;
+        return (
+          <div key={row.key} className="flex items-start justify-between gap-4">
+            <div className="space-y-0.5">
+              <Label htmlFor={`setting-${row.key}`} className="text-xs font-medium">
+                {row.label}
+              </Label>
+              <p className="text-[11px] text-muted-foreground leading-4">{row.description}</p>
+            </div>
+            <Switch
+              id={`setting-${row.key}`}
+              checked={extensionConfig[row.key]}
+              disabled={isDisabled}
+              onCheckedChange={(checked) => handleToggle(row.key, checked)}
+              className="mt-0.5 shrink-0"
+            />
+          </div>
+        );
+      })}
+    </div>
   );
 }
diff --git a/apps/vscode/webview-ui/src/components/confighub/sections.ts b/apps/vscode/webview-ui/src/components/confighub/sections.ts
new file mode 100644
index 00000000..51575b6e
--- /dev/null
+++ b/apps/vscode/webview-ui/src/components/confighub/sections.ts
@@ -0,0 +1,24 @@
+import {
+  IconAdjustmentsHorizontal,
+  IconCpu,
+  IconFileCode,
+  IconLayoutGrid,
+  IconPlug,
+  IconServer,
+} from "@tabler/icons-react";
+import type { ConfigHubSection } from "@/stores/settings.store";
+
+export interface SectionDef {
+  id: ConfigHubSection;
+  label: string;
+  icon: typeof IconLayoutGrid;
+}
+
+export const SECTIONS: SectionDef[] = [
+  { id: "overview", label: "Overview", icon: IconLayoutGrid },
+  { id: "models", label: "Models", icon: IconCpu },
+  { id: "providers", label: "Providers", icon: IconPlug },
+  { id: "mcp", label: "MCP Servers", icon: IconServer },
+  { id: "config", label: "Config File", icon: IconFileCode },
+  { id: "settings", label: "Settings", icon: IconAdjustmentsHorizontal },
+];
diff --git a/apps/vscode/webview-ui/src/components/index.ts b/apps/vscode/webview-ui/src/components/index.ts
index 00e6f29c..02ba1061 100644
--- a/apps/vscode/webview-ui/src/components/index.ts
+++ b/apps/vscode/webview-ui/src/components/index.ts
@@ -10,10 +10,10 @@ export { PythinkerLogo } from "./PythinkerLogo";
 export { PythinkerMascot } from "./PythinkerMascot";
 export { ToolCallCard } from "./ToolRenderers";
 export { ApprovalDialog } from "./ApprovalDialog";
-export { MCPServersModal } from "./MCPServersModal";
+export { ConfigHub } from "./confighub/ConfigHub";
 export { WorkDirModal } from "./WorkDirModal";
 export { ThinkingBlock } from "./ThinkingBlock";
-export { ThinkingButton } from "./ThinkingButton";
+export { ComposerModeMenu } from "./ComposerModeMenu";
 export { CompactionCard } from "./CompactionCard";
 export { ConfigErrorScreen } from "./ConfigErrorScreen";
 export { LoginScreen } from "./LoginScreen";
@@ -23,7 +23,4 @@ export { BottomToolbar } from "./BottomToolbar";
 export { InlineError } from "./InlineError";
 export { QuestionDialog } from "./QuestionDialog";
 export { PlanCard } from "./PlanCard";
-export { PlanModeButton } from "./PlanModeButton";
-export * from "./PermissionModeBadge";
-export { BrailleSpinner } from "./BrailleSpinner";
 export { SilverSpinner } from "./SilverSpinner";
diff --git a/apps/vscode/webview-ui/src/components/inputarea/InputArea.tsx b/apps/vscode/webview-ui/src/components/inputarea/InputArea.tsx
index 6e8b34fe..192cee29 100644
--- a/apps/vscode/webview-ui/src/components/inputarea/InputArea.tsx
+++ b/apps/vscode/webview-ui/src/components/inputarea/InputArea.tsx
@@ -18,9 +18,7 @@ import { MediaThumbnail } from "../MediaThumbnail";
 import { MediaPreviewModal } from "../MediaPreviewModal";
 import { BottomToolbar } from "../BottomToolbar";
 import { StreamingConfirmDialog } from "../StreamingConfirmDialog";
-import { ThinkingButton } from "../ThinkingButton";
-import { PlanModeButton } from "../PlanModeButton";
-import { PermissionModeBadge } from "../PermissionModeBadge";
+import { ComposerModeMenu } from "../ComposerModeMenu";
 import {
   getModelById,
   getMediaFallbackModel,
@@ -128,7 +126,6 @@ export function InputArea({ onAuthAction }: InputAreaProps) {
       setText(textContent);
       setTimeout(() => {
         textareaRef.current?.focus();
-        adjustHeight();
       }, 0);
     }
   }, [pendingInput, isStreaming]);
@@ -137,14 +134,6 @@ export function InputArea({ onAuthAction }: InputAreaProps) {
 
   const { handlePaste, handlePickMedia } = useMediaUpload();
 
-  const adjustHeight = useMemoizedFn(() => {
-    const ta = textareaRef.current;
-    if (ta) {
-      ta.style.height = "auto";
-      ta.style.height = `${Math.min(ta.scrollHeight, 140)}px`;
-    }
-  });
-
   const {
     handleKey: handleHistoryKey,
     add: addToHistory,
@@ -152,13 +141,11 @@ export function InputArea({ onAuthAction }: InputAreaProps) {
   } = useInputHistory({
     text,
     setText,
-    onHeightChange: () => setTimeout(adjustHeight, 0),
   });
 
   const clearInput = useMemoizedFn(() => {
     setText("");
     setCursorPos(0);
-    setTimeout(adjustHeight, 0);
   });
 
   const removeActiveToken = useMemoizedFn(() => {
@@ -169,7 +156,6 @@ export function InputArea({ onAuthAction }: InputAreaProps) {
     setCursorPos(newCursorPos);
     setTimeout(() => {
       textareaRef.current?.setSelectionRange(newCursorPos, newCursorPos);
-      adjustHeight();
     }, 0);
   });
 
@@ -189,7 +175,6 @@ export function InputArea({ onAuthAction }: InputAreaProps) {
     setTimeout(() => {
       textareaRef.current?.setSelectionRange(newCursorPos, newCursorPos);
       textareaRef.current?.focus();
-      adjustHeight();
     }, 0);
   });
 
@@ -269,12 +254,11 @@ export function InputArea({ onAuthAction }: InputAreaProps) {
 
       setTimeout(() => {
         textareaRef.current?.focus();
-        adjustHeight();
       }, 0);
     });
 
     return unsub;
-  }, [adjustHeight]);
+  }, []);
 
   const handleKeyDown = useMemoizedFn((e: React.KeyboardEvent<HTMLTextAreaElement>) => {
     if (e.nativeEvent.isComposing) {
@@ -310,7 +294,6 @@ export function InputArea({ onAuthAction }: InputAreaProps) {
     setText(e.target.value);
     setCursorPos(e.target.selectionStart);
     resetHistoryIndex();
-    setTimeout(adjustHeight, 0);
   };
 
   const handleSelect = () => {
@@ -324,7 +307,6 @@ export function InputArea({ onAuthAction }: InputAreaProps) {
     setTimeout(() => {
       textareaRef.current?.focus();
       textareaRef.current?.setSelectionRange(newText.length, newText.length);
-      adjustHeight();
     }, 0);
   });
 
@@ -408,7 +390,7 @@ export function InputArea({ onAuthAction }: InputAreaProps) {
             onPaste={handlePaste}
             placeholder={isStreaming ? "Add a follow-up..." : "Ask Pythinker Code... (/ commands · @ files · Alt+K code)"}
             className={cn(
-              "w-full min-h-12 max-h-35 px-2.5 py-1.5 text-xs leading-relaxed",
+              "w-full field-sizing-content min-h-12 max-h-35 px-2.5 py-1.5 text-xs leading-relaxed",
               "bg-transparent resize-none outline-none border-none overflow-y-auto",
               "placeholder:text-muted-foreground",
             )}
@@ -473,21 +455,22 @@ export function InputArea({ onAuthAction }: InputAreaProps) {
                 </DropdownMenuContent>
               </DropdownMenu>
 
-              <ThinkingButton
-                mode={thinkingMode}
-                effort={thinkingEffort}
-                efforts={currentModelConfig?.support_efforts}
-                alwaysOn={currentModelConfig?.capabilities.includes("always_thinking")}
-                disabled={isStreaming}
+              <ComposerModeMenu
+                permissionMode={permissionMode}
+                planMode={planMode}
+                onTogglePlanMode={handleTogglePlanMode}
+                thinkingMode={thinkingMode}
+                thinkingEffort={thinkingEffort}
+                thinkingEfforts={currentModelConfig?.support_efforts}
+                thinkingAlwaysOn={currentModelConfig?.capabilities.includes("always_thinking")}
+                thinkingDisabled={isStreaming}
                 cacheNote={hasConversationHistory ? SWITCH_CACHE_NOTE : undefined}
-                onToggle={toggleThinking}
-                onSelectEffort={selectThinkingEffort}
+                onToggleThinking={toggleThinking}
+                onSelectThinkingEffort={selectThinkingEffort}
               />
-              <PlanModeButton active={planMode} onToggle={handleTogglePlanMode} />
-              <PermissionModeBadge mode={permissionMode} />
             </div>
 
-            <div className="flex items-center gap-2 shrink-0">
+            <div className="flex items-center gap-1.5 shrink-0">
               <Tooltip>
                 <TooltipTrigger asChild>
                   <Button variant="ghost" size="icon-xs" onClick={handleAddButtonClick} className="text-muted-foreground">
diff --git a/apps/vscode/webview-ui/src/components/inputarea/hooks/useInputHistory.ts b/apps/vscode/webview-ui/src/components/inputarea/hooks/useInputHistory.ts
index fd67d57d..16b1e590 100644
--- a/apps/vscode/webview-ui/src/components/inputarea/hooks/useInputHistory.ts
+++ b/apps/vscode/webview-ui/src/components/inputarea/hooks/useInputHistory.ts
@@ -4,10 +4,9 @@ import { bridge } from "@/services";
 interface UseInputHistoryOptions {
   text: string;
   setText: (text: string) => void;
-  onHeightChange?: () => void;
 }
 
-export function useInputHistory({ text, setText, onHeightChange }: UseInputHistoryOptions) {
+export function useInputHistory({ text, setText }: UseInputHistoryOptions) {
   const [history, setHistory] = useState<string[]>([]);
   const [index, setIndex] = useState(-1);
 
@@ -39,7 +38,6 @@ export function useInputHistory({ text, setText, onHeightChange }: UseInputHisto
           e.preventDefault();
           setIndex(newIndex);
           setText(history[history.length - 1 - newIndex]);
-          onHeightChange?.();
           return true;
         }
       }
@@ -49,13 +47,12 @@ export function useInputHistory({ text, setText, onHeightChange }: UseInputHisto
         const newIndex = index - 1;
         setIndex(newIndex);
         setText(newIndex === -1 ? "" : history[history.length - 1 - newIndex]);
-        onHeightChange?.();
         return true;
       }
 
       return false;
     },
-    [history, index, text, setText, onHeightChange],
+    [history, index, text, setText],
   );
 
   const reset = useCallback(() => setIndex(-1), []);
diff --git a/apps/vscode/webview-ui/src/components/ui/badge.tsx b/apps/vscode/webview-ui/src/components/ui/badge.tsx
index 484b0254..9199d4d6 100644
--- a/apps/vscode/webview-ui/src/components/ui/badge.tsx
+++ b/apps/vscode/webview-ui/src/components/ui/badge.tsx
@@ -5,16 +5,16 @@ import { Slot } from "radix-ui";
 import { cn } from "@/lib/utils";
 
 const badgeVariants = cva(
-  "h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-colors overflow-hidden group/badge",
+  "h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 aria-invalid:border-destructive transition-colors overflow-hidden group/badge",
   {
     variants: {
       variant: {
         default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
         secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
         destructive:
-          "bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20",
+          "bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 text-destructive",
         outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
-        ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
+        ghost: "hover:bg-muted hover:text-muted-foreground",
         link: "text-primary underline-offset-4 hover:underline",
       },
     },
diff --git a/apps/vscode/webview-ui/src/components/ui/button.tsx b/apps/vscode/webview-ui/src/components/ui/button.tsx
index d3782a34..9023df08 100644
--- a/apps/vscode/webview-ui/src/components/ui/button.tsx
+++ b/apps/vscode/webview-ui/src/components/ui/button.tsx
@@ -5,17 +5,17 @@ import { Slot } from "radix-ui";
 import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
-  "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none",
+  "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 aria-invalid:border-destructive rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none",
   {
     variants: {
       variant: {
         default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
         outline:
-          "border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground",
+          "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground",
         secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
-        ghost: "hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground",
+        ghost: "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground",
         destructive:
-          "bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30",
+          "bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 text-destructive focus-visible:border-destructive/40",
         link: "text-primary underline-offset-4 hover:underline",
       },
       size: {
diff --git a/apps/vscode/webview-ui/src/components/ui/checkbox.tsx b/apps/vscode/webview-ui/src/components/ui/checkbox.tsx
index e1d7411e..8b320e50 100644
--- a/apps/vscode/webview-ui/src/components/ui/checkbox.tsx
+++ b/apps/vscode/webview-ui/src/components/ui/checkbox.tsx
@@ -9,7 +9,7 @@ function Checkbox({ className, ...props }: React.ComponentProps<typeof CheckboxP
     <CheckboxPrimitive.Root
       data-slot="checkbox"
       className={cn(
-        "border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-[4px] border transition-colors group-has-disabled/field:opacity-50 focus-visible:ring-[3px] aria-invalid:ring-[3px] peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50",
+        "border-input data-checked:bg-primary data-checked:text-primary-foreground data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 flex size-4 items-center justify-center rounded-[4px] border transition-colors group-has-disabled/field:opacity-50 focus-visible:ring-[3px] aria-invalid:ring-[3px] peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50",
         className,
       )}
       {...props}
diff --git a/apps/vscode/webview-ui/src/components/ui/combobox.tsx b/apps/vscode/webview-ui/src/components/ui/combobox.tsx
index a29330bc..9ddb56b9 100644
--- a/apps/vscode/webview-ui/src/components/ui/combobox.tsx
+++ b/apps/vscode/webview-ui/src/components/ui/combobox.tsx
@@ -81,7 +81,7 @@ function ComboboxContent({
           data-slot="combobox-content"
           data-chips={!!anchor}
           className={cn(
-            "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:border-input/30 max-h-72 min-w-36 overflow-hidden rounded-lg shadow-md ring-1 duration-100 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:shadow-none group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) data-[chips=true]:min-w-(--anchor-width)",
+            "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 *:data-[slot=input-group]:border-input/30 max-h-72 min-w-36 overflow-hidden rounded-lg shadow-md ring-1 duration-100 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:shadow-none group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) data-[chips=true]:min-w-(--anchor-width)",
             className,
           )}
           {...props}
@@ -153,7 +153,7 @@ function ComboboxChips({ className, ...props }: React.ComponentPropsWithRef<type
     <ComboboxPrimitive.Chips
       data-slot="combobox-chips"
       className={cn(
-        "dark:bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-8 flex-wrap items-center gap-1 rounded-lg border bg-transparent bg-clip-padding px-2.5 py-1 text-sm transition-colors focus-within:ring-[3px] has-aria-invalid:ring-[3px] has-data-[slot=combobox-chip]:px-1",
+        "border-input bg-input-background focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:ring-destructive/20 has-aria-invalid:border-destructive flex min-h-8 flex-wrap items-center gap-1 rounded-lg border bg-clip-padding px-2.5 py-1 text-sm transition-colors focus-within:ring-[3px] has-aria-invalid:ring-[3px] has-data-[slot=combobox-chip]:px-1",
         className,
       )}
       {...props}
diff --git a/apps/vscode/webview-ui/src/components/ui/command.tsx b/apps/vscode/webview-ui/src/components/ui/command.tsx
index c4af18bc..bcad042a 100644
--- a/apps/vscode/webview-ui/src/components/ui/command.tsx
+++ b/apps/vscode/webview-ui/src/components/ui/command.tsx
@@ -43,7 +43,7 @@ function CommandDialog({
 function CommandInput({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Input>) {
   return (
     <div data-slot="command-input-wrapper" className="p-1 pb-0">
-      <InputGroup className="bg-input/30 border-input/30 h-8! rounded-lg! shadow-none! *:data-[slot=input-group-addon]:pl-2!">
+      <InputGroup className="border-input/30 h-8! rounded-lg! shadow-none! *:data-[slot=input-group-addon]:pl-2!">
         <CommandPrimitive.Input data-slot="command-input" className={cn("w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50", className)} {...props} />
         <InputGroupAddon>
           <IconSearch className="size-4 shrink-0 opacity-50" />
diff --git a/apps/vscode/webview-ui/src/components/ui/context-menu.tsx b/apps/vscode/webview-ui/src/components/ui/context-menu.tsx
index 79c38957..ba6743e4 100644
--- a/apps/vscode/webview-ui/src/components/ui/context-menu.tsx
+++ b/apps/vscode/webview-ui/src/components/ui/context-menu.tsx
@@ -65,7 +65,7 @@ function ContextMenuItem({
       data-inset={inset}
       data-variant={variant}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive focus:*:[svg]:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm [&_svg:not([class*='size-'])]:size-4 group/context-menu-item relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive focus:*:[svg]:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm [&_svg:not([class*='size-'])]:size-4 group/context-menu-item relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
         className,
       )}
       {...props}
diff --git a/apps/vscode/webview-ui/src/components/ui/dropdown-menu.tsx b/apps/vscode/webview-ui/src/components/ui/dropdown-menu.tsx
index 1831e469..05772ca7 100644
--- a/apps/vscode/webview-ui/src/components/ui/dropdown-menu.tsx
+++ b/apps/vscode/webview-ui/src/components/ui/dropdown-menu.tsx
@@ -52,7 +52,7 @@ function DropdownMenuItem({
       data-inset={inset}
       data-variant={variant}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-item relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-item relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
         className,
       )}
       {...props}
diff --git a/apps/vscode/webview-ui/src/components/ui/field.tsx b/apps/vscode/webview-ui/src/components/ui/field.tsx
index c0f75afc..337ec779 100644
--- a/apps/vscode/webview-ui/src/components/ui/field.tsx
+++ b/apps/vscode/webview-ui/src/components/ui/field.tsx
@@ -60,7 +60,7 @@ function FieldLabel({ className, ...props }: React.ComponentProps<typeof Label>)
     <Label
       data-slot="field-label"
       className={cn(
-        "has-data-checked:bg-primary/5 has-data-checked:border-primary dark:has-data-checked:bg-primary/10 gap-2 group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-2.5 group/field-label peer/field-label flex w-fit leading-snug",
+        "has-data-checked:bg-primary/5 has-data-checked:border-primary gap-2 group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-2.5 group/field-label peer/field-label flex w-fit leading-snug",
         "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col",
         className,
       )}
diff --git a/apps/vscode/webview-ui/src/components/ui/input-group.tsx b/apps/vscode/webview-ui/src/components/ui/input-group.tsx
index 0fe2975a..c3f1b332 100644
--- a/apps/vscode/webview-ui/src/components/ui/input-group.tsx
+++ b/apps/vscode/webview-ui/src/components/ui/input-group.tsx
@@ -14,7 +14,7 @@ function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
       data-slot="input-group"
       role="group"
       className={cn(
-        "border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-disabled:bg-input/50 dark:has-disabled:bg-input/80 h-8 rounded-lg border transition-colors has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] has-[[data-slot][aria-invalid=true]]:ring-[3px] has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 [[data-slot=combobox-content]_&]:focus-within:border-inherit [[data-slot=combobox-content]_&]:focus-within:ring-0 group/input-group relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto",
+        "border-input bg-input-background has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive h-8 rounded-lg border transition-colors has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] has-[[data-slot][aria-invalid=true]]:ring-[3px] has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 [[data-slot=combobox-content]_&]:focus-within:border-inherit [[data-slot=combobox-content]_&]:focus-within:ring-0 group/input-group relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto",
         className,
       )}
       {...props}
@@ -90,7 +90,7 @@ function InputGroupInput({ className, ...props }: React.ComponentProps<"input">)
     <Input
       data-slot="input-group-control"
       className={cn(
-        "rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent flex-1",
+        "rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 flex-1",
         className,
       )}
       {...props}
@@ -103,7 +103,7 @@ function InputGroupTextarea({ className, ...props }: React.ComponentProps<"texta
     <Textarea
       data-slot="input-group-control"
       className={cn(
-        "rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent flex-1 resize-none",
+        "rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 flex-1 resize-none",
         className,
       )}
       {...props}
diff --git a/apps/vscode/webview-ui/src/components/ui/input.tsx b/apps/vscode/webview-ui/src/components/ui/input.tsx
index bcc9491a..da19bec6 100644
--- a/apps/vscode/webview-ui/src/components/ui/input.tsx
+++ b/apps/vscode/webview-ui/src/components/ui/input.tsx
@@ -8,7 +8,7 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
       type={type}
       data-slot="input"
       className={cn(
-        "dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+        "border-input bg-input-background text-input-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 aria-invalid:border-destructive h-8 rounded-lg border px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] md:text-sm file:text-foreground placeholder:text-input-placeholder w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
         className,
       )}
       {...props}
diff --git a/apps/vscode/webview-ui/src/components/ui/select.tsx b/apps/vscode/webview-ui/src/components/ui/select.tsx
index a5769f7d..8b505ccd 100644
--- a/apps/vscode/webview-ui/src/components/ui/select.tsx
+++ b/apps/vscode/webview-ui/src/components/ui/select.tsx
@@ -31,7 +31,7 @@ function SelectTrigger({
       data-slot="select-trigger"
       data-size={size}
       className={cn(
-        "border-input data-[placeholder]:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-lg border bg-transparent py-2 pr-2 pl-2.5 text-sm transition-colors select-none focus-visible:ring-[3px] aria-invalid:ring-[3px] data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:flex *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        "border-input bg-input-background text-input-foreground data-[placeholder]:text-input-placeholder focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 aria-invalid:border-destructive gap-1.5 rounded-lg border py-2 pr-2 pl-2.5 text-sm transition-colors select-none focus-visible:ring-[3px] aria-invalid:ring-[3px] data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:flex *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
         className,
       )}
       {...props}
diff --git a/apps/vscode/webview-ui/src/components/ui/sonner.tsx b/apps/vscode/webview-ui/src/components/ui/sonner.tsx
index 2591ccfe..2f579063 100644
--- a/apps/vscode/webview-ui/src/components/ui/sonner.tsx
+++ b/apps/vscode/webview-ui/src/components/ui/sonner.tsx
@@ -1,10 +1,15 @@
 import { Toaster as Sonner, toast } from "sonner";
 
+import { useIsDark } from "@/hooks/useIsDark";
+
 type ToasterProps = React.ComponentProps<typeof Sonner>;
 
 function Toaster({ ...props }: ToasterProps) {
+  const isDark = useIsDark();
+
   return (
     <Sonner
+      theme={isDark ? "dark" : "light"}
       className="toaster group"
       toastOptions={{
         classNames: {
@@ -12,7 +17,7 @@ function Toaster({ ...props }: ToasterProps) {
           description: "group-[.toast]:text-muted-foreground",
           actionButton: "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
           cancelButton: "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
-          error: "group-[.toaster]:bg-destructive group-[.toaster]:text-white group-[.toaster]:border-destructive",
+          error: "group-[.toaster]:bg-destructive group-[.toaster]:text-destructive-foreground group-[.toaster]:border-destructive",
         },
       }}
       {...props}
diff --git a/apps/vscode/webview-ui/src/components/ui/switch.tsx b/apps/vscode/webview-ui/src/components/ui/switch.tsx
index 414da096..088ddcce 100644
--- a/apps/vscode/webview-ui/src/components/ui/switch.tsx
+++ b/apps/vscode/webview-ui/src/components/ui/switch.tsx
@@ -20,14 +20,14 @@ function Switch({
         // sides. The previous geometry (18.4px track, 16px thumb) left ~0.6px
         // above and below but 2px at the travel end, so it read as a blob
         // rather than a track.
-        "data-unchecked:bg-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 dark:data-unchecked:bg-input/80 shrink-0 rounded-full border border-transparent p-[2px] focus-visible:ring-[3px] aria-invalid:ring-[3px] data-[size=default]:h-[18px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] peer group/switch relative inline-flex items-center transition-colors outline-none after:absolute after:-inset-x-3 after:-inset-y-2 data-disabled:cursor-not-allowed data-disabled:opacity-50",
+        "data-unchecked:bg-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 aria-invalid:border-destructive shrink-0 rounded-full border border-transparent p-[2px] focus-visible:ring-[3px] aria-invalid:ring-[3px] data-[size=default]:h-[18px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] peer group/switch relative inline-flex items-center transition-colors outline-none after:absolute after:-inset-x-3 after:-inset-y-2 data-disabled:cursor-not-allowed data-disabled:opacity-50",
 
-        // variants — the "on" track has to be lighter than the "off" track.
-        // `bg-primary` is oklch(0.21) in BOTH themes, darker than the unchecked
-        // `--input` (oklch 0.274), so turning a switch on made it recede into
-        // the dark background instead of lighting up.
+        // variants — the "on" track has to light up against the "off" track.
+        // `bg-primary` maps to the editor's button color, which some themes
+        // render darker than the unchecked `--input` track, so the on state
+        // uses the success/brand accents instead.
         variant === "default" && "data-checked:bg-success",
-        variant === "blue" && "data-checked:bg-blue-400",
+        variant === "blue" && "data-checked:bg-brand",
 
         className,
       )}
@@ -41,7 +41,7 @@ function Switch({
           asks of a control that signals state by colour. */}
       <SwitchPrimitive.Thumb
         data-slot="switch-thumb"
-        className="bg-background dark:data-unchecked:bg-foreground data-checked:bg-success-foreground rounded-full group-data-[size=default]/switch:size-3.5 group-data-[size=sm]/switch:size-2.5 group-data-[size=default]/switch:data-checked:translate-x-[12px] group-data-[size=sm]/switch:data-checked:translate-x-[8px] group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 pointer-events-none block ring-0 transition-transform"
+        className="data-unchecked:bg-foreground data-checked:bg-success-foreground rounded-full group-data-[size=default]/switch:size-3.5 group-data-[size=sm]/switch:size-2.5 group-data-[size=default]/switch:data-checked:translate-x-[12px] group-data-[size=sm]/switch:data-checked:translate-x-[8px] group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 pointer-events-none block ring-0 transition-transform"
       />
     </SwitchPrimitive.Root>
   );
diff --git a/apps/vscode/webview-ui/src/components/ui/tabs.tsx b/apps/vscode/webview-ui/src/components/ui/tabs.tsx
index 21e6f634..66a981c5 100644
--- a/apps/vscode/webview-ui/src/components/ui/tabs.tsx
+++ b/apps/vscode/webview-ui/src/components/ui/tabs.tsx
@@ -36,9 +36,9 @@ function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPr
     <TabsPrimitive.Trigger
       data-slot="tabs-trigger"
       className={cn(
-        "gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg:not([class*='size-'])]:size-4 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
-        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
-        "data-active:bg-background dark:data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 data-active:text-foreground",
+        "gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg:not([class*='size-'])]:size-4 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-muted-foreground hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent",
+        "data-active:bg-background data-active:text-foreground",
         "after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
         className,
       )}
diff --git a/apps/vscode/webview-ui/src/components/ui/textarea.tsx b/apps/vscode/webview-ui/src/components/ui/textarea.tsx
index 85af792c..2a8f9d1f 100644
--- a/apps/vscode/webview-ui/src/components/ui/textarea.tsx
+++ b/apps/vscode/webview-ui/src/components/ui/textarea.tsx
@@ -7,7 +7,7 @@ function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
     <textarea
       data-slot="textarea"
       className={cn(
-        "border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 rounded-lg border bg-transparent px-2.5 py-2 text-base transition-colors focus-visible:ring-[1px] aria-invalid:ring-[1px] md:text-sm placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full outline-none disabled:cursor-not-allowed disabled:opacity-50",
+        "border-input bg-input-background text-input-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 aria-invalid:border-destructive rounded-lg border px-2.5 py-2 text-base transition-colors focus-visible:ring-[1px] aria-invalid:ring-[1px] md:text-sm placeholder:text-input-placeholder flex field-sizing-content min-h-16 w-full outline-none disabled:cursor-not-allowed disabled:opacity-50",
         className,
       )}
       {...props}
diff --git a/apps/vscode/webview-ui/src/hooks/useAppInit.ts b/apps/vscode/webview-ui/src/hooks/useAppInit.ts
index c27945bc..c52fcf2c 100644
--- a/apps/vscode/webview-ui/src/hooks/useAppInit.ts
+++ b/apps/vscode/webview-ui/src/hooks/useAppInit.ts
@@ -106,8 +106,6 @@ export function useAppInit(): AppInitState {
           return;
         }
 
-        console.log("[AppInit] Login status:", loginStatus, "models config:", modelsConfig);
-
         setIsLoggedIn(loginStatus.loggedIn);
         initModels(modelsConfig.models, modelsConfig.defaultModel, modelsConfig.defaultThinking, modelsConfig.defaultThinkingEffort);
 
diff --git a/apps/vscode/webview-ui/src/hooks/useIsDark.ts b/apps/vscode/webview-ui/src/hooks/useIsDark.ts
new file mode 100644
index 00000000..08d9cdc5
--- /dev/null
+++ b/apps/vscode/webview-ui/src/hooks/useIsDark.ts
@@ -0,0 +1,23 @@
+import { useSyncExternalStore } from "react";
+
+/*
+ * VS Code maintains theme-kind classes on <body> (vscode-light, vscode-dark,
+ * vscode-high-contrast, vscode-high-contrast-light); colors come from
+ * --vscode-* variables in CSS, so this hook exists only for the few JS
+ * consumers that need a binary theme kind (syntax-highlighter style, artwork).
+ */
+function isDarkTheme(): boolean {
+  const cls = document.body.classList;
+  if (cls.contains("vscode-high-contrast-light")) return false;
+  return cls.contains("vscode-dark") || cls.contains("vscode-high-contrast");
+}
+
+function subscribe(onChange: () => void): () => void {
+  const observer = new MutationObserver(onChange);
+  observer.observe(document.body, { attributes: true, attributeFilter: ["class"] });
+  return () => observer.disconnect();
+}
+
+export function useIsDark(): boolean {
+  return useSyncExternalStore(subscribe, isDarkTheme);
+}
diff --git a/apps/vscode/webview-ui/src/hooks/useWelcomeHint.tsx b/apps/vscode/webview-ui/src/hooks/useWelcomeHint.tsx
index 0044e98c..8ddd8f8d 100644
--- a/apps/vscode/webview-ui/src/hooks/useWelcomeHint.tsx
+++ b/apps/vscode/webview-ui/src/hooks/useWelcomeHint.tsx
@@ -1,5 +1,6 @@
 import { useState, useEffect, useMemo } from "react";
 import { bridge } from "@/services";
+import type { SessionInfo } from "shared/legacy-sdk";
 
 export interface WelcomeHint {
   title: string;
@@ -98,34 +99,48 @@ function pickRandom<T>(arr: T[]): T {
   return arr[Math.floor(Math.random() * arr.length)];
 }
 
-function withProbability(p: number): boolean {
-  return Math.random() < p;
+// Rolled once per app load so the hint stays stable when the chat empties again.
+const SESSION_HINT = pickRandom(HINTS_POOL);
+const SHOW_AGENTS_HINT = Math.random() < 0.3;
+
+export interface WelcomeContent {
+  hint: WelcomeHint;
+  recentSessions: SessionInfo[];
 }
 
-export function useWelcomeHint(): WelcomeHint {
-  const [hasAgentMd, setHasAgentMd] = useState<boolean | null>(null);
-  const [hasHistory, setHasHistory] = useState<boolean | null>(null);
+export function useWelcomeHint(): WelcomeContent {
+  const [hasAgentsMd, setHasAgentsMd] = useState<boolean | null>(null);
+  const [sessions, setSessions] = useState<SessionInfo[] | null>(null);
 
   useEffect(() => {
     bridge
-      .checkFileExists("AGENT.md")
-      .then(setHasAgentMd)
-      .catch(() => setHasAgentMd(false));
+      .checkFileExists("AGENTS.md")
+      .then(setHasAgentsMd)
+      .catch(() => setHasAgentsMd(false));
     bridge
       .getSessions()
-      .then((s) => setHasHistory(s.length > 0))
-      .catch(() => setHasHistory(false));
+      .then(setSessions)
+      .catch(() => setSessions([]));
   }, []);
 
-  return useMemo(() => {
+  const hasHistory = sessions === null ? null : sessions.length > 0;
+
+  const hint = useMemo(() => {
     // First time user: show shortcut guide
     if (hasHistory === false) {
       return HINT_FIRST_TIME;
     }
-    // 30% chance to show AGENT.md hint if missing
-    if (hasAgentMd === false && withProbability(0.3)) {
+    // 30% chance to show AGENTS.md hint if missing
+    if (hasAgentsMd === false && SHOW_AGENTS_HINT) {
       return HINT_AGENT_MD;
     }
-    return pickRandom(HINTS_POOL);
-  }, [hasAgentMd, hasHistory]);
+    return SESSION_HINT;
+  }, [hasAgentsMd, hasHistory]);
+
+  const recentSessions = useMemo(
+    () => [...(sessions ?? [])].sort((a, b) => b.updatedAt - a.updatedAt).slice(0, 3),
+    [sessions],
+  );
+
+  return { hint, recentSessions };
 }
diff --git a/apps/vscode/webview-ui/src/lib/format.ts b/apps/vscode/webview-ui/src/lib/format.ts
new file mode 100644
index 00000000..cb9d5521
--- /dev/null
+++ b/apps/vscode/webview-ui/src/lib/format.ts
@@ -0,0 +1,11 @@
+export function formatRelativeDate(timestamp: number): string {
+  const diff = Date.now() - timestamp;
+  const m = Math.floor(diff / 60000);
+  const h = Math.floor(diff / 3600000);
+  const d = Math.floor(diff / 86400000);
+  if (m < 1) return "Just now";
+  if (m < 60) return `${m}m ago`;
+  if (h < 24) return `${h}h ago`;
+  if (d < 7) return `${d}d ago`;
+  return new Date(timestamp).toLocaleDateString();
+}
diff --git a/apps/vscode/webview-ui/src/main.tsx b/apps/vscode/webview-ui/src/main.tsx
index 841c204d..a002dda2 100644
--- a/apps/vscode/webview-ui/src/main.tsx
+++ b/apps/vscode/webview-ui/src/main.tsx
@@ -2,19 +2,6 @@ import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import App from "./App";
 
-function syncTheme() {
-  const isDark = document.body.classList.contains("vscode-dark");
-  document.documentElement.classList.toggle("dark", isDark);
-}
-
-syncTheme();
-
-const observer = new MutationObserver(syncTheme);
-observer.observe(document.body, {
-  attributes: true,
-  attributeFilter: ["class"],
-});
-
 const container = document.querySelector("#root");
 
 if (container) {
diff --git a/apps/vscode/webview-ui/src/services/bridge.ts b/apps/vscode/webview-ui/src/services/bridge.ts
index e7fa842e..3ac11a37 100644
--- a/apps/vscode/webview-ui/src/services/bridge.ts
+++ b/apps/vscode/webview-ui/src/services/bridge.ts
@@ -12,6 +12,7 @@ import type {
 import type {
   AddCatalogProviderRequest,
   CatalogProviderSummary,
+  ConfigInfo,
   FileChange,
   SessionConfig,
   ExtensionConfig,
@@ -111,6 +112,11 @@ class Bridge {
     };
   }
 
+  /** Dispatches an event to local subscribers only — no host round-trip. */
+  emit<T>(event: string, data: T) {
+    this.eventHandlers.get(event)?.forEach((h) => h(data));
+  }
+
   checkWorkspace() {
     return this.call<WorkspaceStatus>(Methods.CheckWorkspace);
   }
@@ -143,6 +149,10 @@ class Bridge {
     return this.call<{ ok: boolean }>(Methods.SaveConfig, sessionConfig);
   }
 
+  getConfigInfo() {
+    return this.call<ConfigInfo>(Methods.GetConfigInfo);
+  }
+
   getExtensionConfig() {
     return this.call<ExtensionConfig>(Methods.GetExtensionConfig);
   }
diff --git a/apps/vscode/webview-ui/src/stores/chat.store.ts b/apps/vscode/webview-ui/src/stores/chat.store.ts
index be3f3f55..b7c2f401 100644
--- a/apps/vscode/webview-ui/src/stores/chat.store.ts
+++ b/apps/vscode/webview-ui/src/stores/chat.store.ts
@@ -137,7 +137,6 @@ export interface ChatState {
   clearDraftMedia: () => void;
   getMediaInConversation: () => MediaInConversation;
   hasProcessingMedia: () => boolean;
-  rollbackInput: (content: string | ContentPart[]) => void;
   respondQuestion: (answers: Record<string, string>) => Promise<void>;
 
   enqueue: (content: string | ContentPart[], model: string) => void;
@@ -164,7 +163,7 @@ function clearAllInlineErrors(draft: ChatState): void {
   }
 }
 
-interface PermissionCommand {
+export interface PermissionCommand {
   readonly mode: "yolo" | "auto";
   readonly request: "on" | "off" | "toggle";
 }
@@ -186,7 +185,7 @@ function parsePermissionCommand(text: string): PermissionCommand | undefined {
  * already asked for, so the requests on screen are answered here — otherwise
  * the turn stays parked on the very prompt the user just turned off.
  */
-async function applyPermissionCommand(command: PermissionCommand): Promise<void> {
+export async function applyPermissionCommand(command: PermissionCommand): Promise<void> {
   const result = await bridge
     .setPermissionMode(command.mode, command.request)
     .catch(() => undefined);
@@ -499,11 +498,6 @@ export const useChatStore = create<ChatState>((set, get) => ({
     return get().draftMedia.some((m) => !m.dataUri);
   },
 
-  rollbackInput: (content) => {
-    const { currentModel } = useSettingsStore.getState();
-    set({ pendingInput: { content, model: currentModel } });
-  },
-
   respondQuestion: async (answers) => {
     const { pendingQuestion } = get();
     if (!pendingQuestion) return;
diff --git a/apps/vscode/webview-ui/src/stores/settings.store.ts b/apps/vscode/webview-ui/src/stores/settings.store.ts
index f6db1291..612e7b19 100644
--- a/apps/vscode/webview-ui/src/stores/settings.store.ts
+++ b/apps/vscode/webview-ui/src/stores/settings.store.ts
@@ -125,15 +125,15 @@ export function getMediaFallbackModel(
     ?? compatibleModels[0];
 }
 
+export type ConfigHubSection = "overview" | "models" | "providers" | "mcp" | "config" | "settings";
+
 interface SettingsState {
   currentModel: string;
   thinkingEffort: string;
   extensionConfig: ExtensionConfig;
   mcpServers: MCPServerConfig[];
-  mcpModalOpen: boolean;
-  providersModalOpen: boolean;
+  configHub: { open: boolean; section: ConfigHubSection };
   workDirModalOpen: boolean;
-  settingsDialogOpen: boolean;
   currentWorkDir: string | null;
   workspaceRoot: string | null;
   models: ModelConfig[];
@@ -152,10 +152,9 @@ interface SettingsState {
   selectThinkingEffort: (effort: string) => void;
   setExtensionConfig: (config: ExtensionConfig) => void;
   setMCPServers: (servers: MCPServerConfig[]) => void;
-  setMCPModalOpen: (open: boolean) => void;
-  setProvidersModalOpen: (open: boolean) => void;
+  openConfigHub: (section?: ConfigHubSection) => void;
+  closeConfigHub: () => void;
   setWorkDirModalOpen: (open: boolean) => void;
-  setSettingsDialogOpen: (open: boolean) => void;
   setCurrentWorkDir: (workDir: string | null) => void;
   setWorkspaceRoot: (root: string | null) => void;
   initModels: (models: ModelConfig[], defaultModel: string | null, defaultThinking: boolean, defaultThinkingEffort?: string) => void;
@@ -169,10 +168,8 @@ export const useSettingsStore = create<SettingsState>((set, get) => ({
   thinkingEffort: "off",
   extensionConfig: DEFAULT_EXTENSION_CONFIG,
   mcpServers: [],
-  mcpModalOpen: false,
-  providersModalOpen: false,
+  configHub: { open: false, section: "overview" },
   workDirModalOpen: false,
-  settingsDialogOpen: false,
   currentWorkDir: null,
   workspaceRoot: null,
   models: [],
@@ -269,13 +266,11 @@ export const useSettingsStore = create<SettingsState>((set, get) => ({
 
   setMCPServers: (mcpServers) => set({ mcpServers }),
 
-  setMCPModalOpen: (mcpModalOpen) => set({ mcpModalOpen }),
-  setProvidersModalOpen: (providersModalOpen) => set({ providersModalOpen }),
+  openConfigHub: (section = "overview") => set({ configHub: { open: true, section } }),
+  closeConfigHub: () => set((state) => ({ configHub: { ...state.configHub, open: false } })),
 
   setWorkDirModalOpen: (workDirModalOpen) => set({ workDirModalOpen }),
 
-  setSettingsDialogOpen: (settingsDialogOpen) => set({ settingsDialogOpen }),
-
   setCurrentWorkDir: (currentWorkDir) => set({ currentWorkDir }),
 
   setWorkspaceRoot: (workspaceRoot) => set({ workspaceRoot }),
diff --git a/apps/vscode/webview-ui/src/styles/index.css b/apps/vscode/webview-ui/src/styles/index.css
index 7f3f34aa..65f55f99 100644
--- a/apps/vscode/webview-ui/src/styles/index.css
+++ b/apps/vscode/webview-ui/src/styles/index.css
@@ -1,63 +1,63 @@
 @import "tailwindcss";
 @import "tw-animate-css";
 @import "shadcn/tailwind.css";
-@import "@fontsource-variable/inter";
 @import "katex/dist/katex.min.css";
 
-@custom-variant dark (&:is(.dark *));
-
+/*
+ * Editor-driven theme: every semantic token derives from the host's
+ * --vscode-* variables, so any editor theme (dark, light, high contrast)
+ * applies with zero runtime detection. Fallbacks approximate VS Code's
+ * Dark+ for builds rendered outside a webview (vite dev in a browser).
+ */
 :root {
   --radius: 0.5rem;
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.141 0.005 285.823);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.141 0.005 285.823);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.141 0.005 285.823);
-  --primary: oklch(0.21 0.006 285.885);
-  --primary-foreground: oklch(1 0 0);
-  --secondary: oklch(0.967 0.001 286.375);
-  --secondary-foreground: oklch(0.21 0.006 285.885);
-  --muted: oklch(0.967 0.001 286.375);
-  --muted-foreground: oklch(0.552 0.016 285.938);
-  --accent: oklch(0.967 0.001 286.375);
-  --accent-foreground: oklch(0.21 0.006 285.885);
-  --destructive: oklch(0.577 0.245 27.325);
-  /* Muted periwinkle accent (CLI primary). Used for inline code and progress
-     fills — --primary is a near-black neutral and disappears against --muted. */
-  --brand: #4a5bc4;
-  /* CLI lightColors.success — the "on" colour for toggles. */
-  --success: #0e7a38;
-  --success-foreground: oklch(1 0 0);
-  --border: oklch(0.92 0.004 286.32);
-  --input: oklch(0.92 0.004 286.32);
-  --ring: oklch(0.552 0.016 285.938);
+  --background: var(--vscode-sideBar-background, #1e1e1e);
+  --foreground: var(--vscode-foreground, #cccccc);
+  --card: var(--vscode-editorWidget-background, #252526);
+  --card-foreground: var(--vscode-foreground, #cccccc);
+  --popover: var(--vscode-menu-background, var(--vscode-editorWidget-background, #252526));
+  --popover-foreground: var(--vscode-menu-foreground, var(--vscode-foreground, #cccccc));
+  --primary: var(--vscode-button-background, #0e639c);
+  --primary-foreground: var(--vscode-button-foreground, #ffffff);
+  --secondary: var(--vscode-button-secondaryBackground, #3a3d41);
+  --secondary-foreground: var(--vscode-button-secondaryForeground, #ffffff);
+  --muted: color-mix(in srgb, var(--vscode-foreground, #cccccc) 8%, transparent);
+  --muted-foreground: var(--vscode-descriptionForeground, #9d9d9d);
+  --accent: var(--vscode-list-hoverBackground, #2a2d2e);
+  --accent-foreground: var(--vscode-foreground, #cccccc);
+  --destructive: var(--vscode-errorForeground, #f48771);
+  --destructive-foreground: var(--vscode-button-foreground, #ffffff);
+  --success: var(--vscode-charts-green, #89d185);
+  --success-foreground: var(--vscode-editor-background, #1e1e1e);
+  --warning: var(--vscode-charts-yellow, #cca700);
+  --border: var(--vscode-panel-border, var(--vscode-editorWidget-border, #454545));
+  --input: var(--vscode-input-border, var(--vscode-panel-border, #454545));
+  --input-background: var(--vscode-input-background, #3c3c3c);
+  --input-foreground: var(--vscode-input-foreground, #cccccc);
+  --input-placeholder: var(--vscode-input-placeholderForeground, #989898);
+  --ring: var(--vscode-focusBorder, #007fd4);
+  --link: var(--vscode-textLink-foreground, #3794ff);
+  --link-hover: var(--vscode-textLink-activeForeground, #3794ff);
+  --editor: var(--vscode-editor-background, #1e1e1e);
+  --editor-foreground: var(--vscode-editor-foreground, #d4d4d4);
+  --code-block: var(--vscode-textCodeBlock-background, var(--vscode-editor-background, #1e1e1e));
+  --preformat: var(--vscode-textPreformat-foreground, #d7ba7d);
+  --diff-added: var(--vscode-diffEditor-insertedTextBackground, rgba(155, 185, 85, 0.2));
+  --diff-removed: var(--vscode-diffEditor-removedTextBackground, rgba(255, 0, 0, 0.2));
+  --list-hover: var(--vscode-list-hoverBackground, #2a2d2e);
+  --selection: var(--vscode-list-activeSelectionBackground, #04395e);
+  --selection-foreground: var(--vscode-list-activeSelectionForeground, #ffffff);
+  --badge: var(--vscode-badge-background, #4d4d4d);
+  --badge-foreground: var(--vscode-badge-foreground, #ffffff);
+  --icon: var(--vscode-icon-foreground, #c5c5c5);
+  --toolbar-hover: var(--vscode-toolbar-hoverBackground, #37373d);
+  /* Brand periwinkle (CLI primary) — the one intentionally theme-fixed pair. */
+  --brand: #b3b9f4;
 }
 
-.dark {
-  --background: oklch(0.141 0.005 285.823);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.18 0.005 285.823);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.18 0.005 285.823);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.21 0.006 285.885);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.274 0.006 286.033);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.274 0.006 286.033);
-  --muted-foreground: oklch(0.705 0.015 286.067);
-  --accent: oklch(0.274 0.006 286.033);
-  --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.704 0.191 22.216);
-  /* Muted periwinkle accent (CLI primary), dark variant. */
-  --brand: #b3b9f4;
-  /* CLI darkColors.success — the "on" colour for toggles. */
-  --success: #4ec87e;
-  --success-foreground: oklch(0.141 0.005 285.823);
-  --border: oklch(0.274 0.006 286.033);
-  --input: oklch(0.274 0.006 286.033);
-  --ring: oklch(0.552 0.016 285.938);
+body.vscode-light,
+body.vscode-high-contrast-light {
+  --brand: #4a5bc4;
 }
 
 * {
@@ -73,8 +73,8 @@ body {
 }
 
 body {
-  font-family: var(--vscode-font-family, "Inter Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
-  font-size: var(--vscode-font-size, 12px);
+  font-family: var(--font-sans);
+  font-size: var(--text-base);
   background-color: var(--background);
   color: var(--foreground);
 }
@@ -87,7 +87,10 @@ body {
 }
 
 @theme inline {
-  --font-sans: "Inter Variable", sans-serif;
+  --font-sans:
+    var(--vscode-font-family, system-ui), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  --font-mono:
+    var(--vscode-editor-font-family, ui-monospace), ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
   --color-background: var(--background);
   --color-foreground: var(--foreground);
   --color-card: var(--card);
@@ -103,17 +106,42 @@ body {
   --color-accent: var(--accent);
   --color-accent-foreground: var(--accent-foreground);
   --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
   --color-success: var(--success);
   --color-success-foreground: var(--success-foreground);
+  --color-warning: var(--warning);
   --color-brand: var(--brand);
   --color-border: var(--border);
   --color-input: var(--input);
+  --color-input-background: var(--input-background);
+  --color-input-foreground: var(--input-foreground);
+  --color-input-placeholder: var(--input-placeholder);
   --color-ring: var(--ring);
+  --color-link: var(--link);
+  --color-link-hover: var(--link-hover);
+  --color-editor: var(--editor);
+  --color-editor-foreground: var(--editor-foreground);
+  --color-code-block: var(--code-block);
+  --color-preformat: var(--preformat);
+  --color-diff-added: var(--diff-added);
+  --color-diff-removed: var(--diff-removed);
+  --color-list-hover: var(--list-hover);
+  --color-selection: var(--selection);
+  --color-selection-foreground: var(--selection-foreground);
+  --color-badge: var(--badge);
+  --color-badge-foreground: var(--badge-foreground);
+  --color-icon: var(--icon);
+  --color-toolbar-hover: var(--toolbar-hover);
   --radius-sm: calc(var(--radius) - 4px);
   --radius-md: calc(var(--radius) - 2px);
   --radius-lg: var(--radius);
   --radius-xl: calc(var(--radius) + 4px);
-  --text-xs: 0.795rem;
+  --text-2xl: calc(1.6 * var(--vscode-font-size, 13px));
+  --text-xl: calc(1.3 * var(--vscode-font-size, 13px));
+  --text-lg: calc(1.15 * var(--vscode-font-size, 13px));
+  --text-base: var(--vscode-font-size, 13px);
+  --text-sm: calc(0.92 * var(--vscode-font-size, 13px));
+  --text-xs: calc(0.85 * var(--vscode-font-size, 13px));
 }
 
 @layer base {
@@ -123,6 +151,12 @@ body {
   body {
     @apply bg-background text-foreground font-sans antialiased;
   }
+  :focus-visible {
+    outline-color: var(--ring);
+  }
+  ::selection {
+    background-color: var(--vscode-editor-selectionBackground, #264f78);
+  }
 }
 
 ::-webkit-scrollbar {
@@ -135,13 +169,20 @@ body {
 }
 
 ::-webkit-scrollbar-thumb {
-  background: var(--muted-foreground);
+  background: var(--vscode-scrollbarSlider-background, rgba(121, 121, 121, 0.4));
   border-radius: 3px;
-  opacity: 0.5;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  opacity: 0.8;
+  background: var(--vscode-scrollbarSlider-hoverBackground, rgba(100, 100, 100, 0.7));
+}
+
+::-webkit-scrollbar-thumb:active {
+  background: var(--vscode-scrollbarSlider-activeBackground, rgba(191, 191, 191, 0.4));
+}
+
+::-webkit-scrollbar-corner {
+  background: transparent;
 }
 
 @keyframes cursor-blink {
@@ -170,9 +211,9 @@ body {
 .animate-shimmer-text {
   background: linear-gradient(
     90deg,
-    rgba(161, 161, 170, 0.4) 0%,
-    rgba(255, 255, 255, 0.95) 50%,
-    rgba(161, 161, 170, 0.4) 100%
+    color-mix(in srgb, var(--foreground) 40%, transparent) 0%,
+    var(--foreground) 50%,
+    color-mix(in srgb, var(--foreground) 40%, transparent) 100%
   );
   background-size: 200% 100%;
   -webkit-background-clip: text;
@@ -220,16 +261,13 @@ body {
   animation: pulse-slow 3.6s ease-in-out infinite;
 }
 
-
-
-
 @keyframes glow-pulse {
   0%,
   100% {
-    box-shadow: 0 0 4px rgba(59, 130, 246, 0.4);
+    box-shadow: 0 0 4px color-mix(in srgb, var(--ring) 40%, transparent);
   }
   50% {
-    box-shadow: 0 0 12px rgba(59, 130, 246, 0.8);
+    box-shadow: 0 0 12px color-mix(in srgb, var(--ring) 80%, transparent);
   }
 }
 
@@ -242,36 +280,12 @@ body {
   -webkit-overflow-scrolling: touch;
 }
 
-@keyframes slide-in-from-bottom {
-  from {
-    opacity: 0;
-    transform: translateY(8px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.animate-in {
-  animation-duration: 200ms;
-  animation-fill-mode: both;
-}
-
-.fade-in {
-  animation-name: slide-in-from-bottom;
-}
-
-.slide-in-from-bottom-2 {
-  --tw-enter-translate-y: 0.5rem;
-}
-
 .kbd {
   display: inline-block;
   min-width: 1.5em;
   padding: 0.1em 0.4em;
   margin-right: 0.4em;
-  font-family: var(--vscode-editor-font-family, monospace);
+  font-family: var(--font-mono);
   font-size: 0.9em;
   background: var(--muted);
   border-radius: 3px;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a5cfeb68..1ba9391d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -342,9 +342,6 @@ importers:
       '@base-ui/react':
         specifier: ^1.0.0
         version: 1.7.0(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@fontsource-variable/inter':
-        specifier: 5.2.8
-        version: 5.2.8
       '@pythoughts/pythinker-code-sdk':
         specifier: workspace:^
         version: link:../../packages/node-sdk
@@ -396,12 +393,12 @@ importers:
       react-markdown:
         specifier: ^10.1.0
         version: 10.1.0(@types/react@19.2.18)(react@19.2.8)
-      react-scroll-to-bottom:
-        specifier: ^4.2.0
-        version: 4.2.0(@babel/core@7.29.7)(react@19.2.8)
       react-syntax-highlighter:
         specifier: ^16.1.0
         version: 16.1.1(react@19.2.8)
+      react-virtuoso:
+        specifier: ^4.18.11
+        version: 4.18.11(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       rehype-katex:
         specifier: ^7.0.1
         version: 7.0.1
@@ -445,9 +442,6 @@ importers:
       '@types/react-dom':
         specifier: ^19.1.2
         version: 19.2.4(@types/react@19.2.18)
-      '@types/react-scroll-to-bottom':
-        specifier: ^4.2.5
-        version: 4.2.5
       '@types/react-syntax-highlighter':
         specifier: ^15.5.13
         version: 15.5.13
@@ -461,8 +455,8 @@ importers:
         specifier: ^0.0.11
         version: 0.0.11
       '@vscode/test-electron':
-        specifier: ^2.5.2
-        version: 2.5.2
+        specifier: ^3.1.0
+        version: 3.1.0
       '@vscode/vsce':
         specifier: 3.9.2
         version: 3.9.2
@@ -483,7 +477,7 @@ importers:
         version: 3.5.2(vite@6.4.3(@types/node@22.20.1)(jiti@2.7.0)(lightningcss@1.33.0)(tsx@4.23.5)(yaml@2.9.0))
       vitest:
         specifier: 4.1.4
-        version: 4.1.4(@types/node@22.20.1)(@vitest/coverage-v8@4.1.9(vitest@4.1.9))(jsdom@25.0.1)(msw@2.15.0(@types/node@22.20.1)(typescript@6.0.3))(vite@6.4.3(@types/node@22.20.1)(jiti@2.7.0)(lightningcss@1.33.0)(tsx@4.23.5)(yaml@2.9.0))
+        version: 4.1.4(@types/node@22.20.1)(@vitest/coverage-v8@4.1.9)(jsdom@25.0.1)(msw@2.15.0(@types/node@22.20.1)(typescript@6.0.3))(vite@6.4.3(@types/node@22.20.1)(jiti@2.7.0)(lightningcss@1.33.0)(tsx@4.23.5)(yaml@2.9.0))
 
   docs:
     dependencies:
@@ -1131,10 +1125,6 @@ packages:
     peerDependencies:
       '@babel/core': ^7.29.6
 
-  '@babel/runtime-corejs3@7.29.7':
-    resolution: {integrity: sha512-ppj9ouYku+RX0ljtgZd+KMO5mkM2bCqg8H2PYAFWnLsHEIKIdRojqbJ2i3eVHrisuxy7nOFCmngTDdWtUCdXUQ==}
-    engines: {node: '>=6.9.0'}
-
   '@babel/runtime@7.29.7':
     resolution: {integrity: sha512-Nq8OhGWiZIZGV6hLHoyAKLLcJihP/xFeBMGJoUrxTX2psI8dCifzLhZISFb+VWS3wFMRDmCGw5R+dOySCqPLhw==}
     engines: {node: '>=6.9.0'}
@@ -1357,41 +1347,6 @@ packages:
   '@emnapi/wasi-threads@1.2.2':
     resolution: {integrity: sha512-c95qOXkHdydNKhscBTebqEC1CVAZpyqOfVfBzQ1qgzyl3gfeldUjIggDbIZgDKsHLgnsM+igH7TJ/eAasaVuMA==}
 
-  '@emotion/babel-plugin@11.13.5':
-    resolution: {integrity: sha512-pxHCpT2ex+0q+HH91/zsdHkw/lXd468DIN2zvfvLtPKLLMo6gQj7oLObq8PhkrxOZb/gGCq03S3Z7PDhS8pduQ==}
-
-  '@emotion/cache@11.14.0':
-    resolution: {integrity: sha512-L/B1lc/TViYk4DcpGxtAVbx0ZyiKM5ktoIyafGkH6zg/tj+mA+NE//aPYKG0k8kCHSHVJrpLpcAlOBEXQ3SavA==}
-
-  '@emotion/css@11.1.3':
-    resolution: {integrity: sha512-RSQP59qtCNTf5NWD6xM08xsQdCZmVYnX/panPYvB6LQAPKQB6GL49Njf0EMbS3CyDtrlWsBcmqBtysFvfWT3rA==}
-    peerDependencies:
-      '@babel/core': ^7.29.6
-    peerDependenciesMeta:
-      '@babel/core':
-        optional: true
-
-  '@emotion/hash@0.9.2':
-    resolution: {integrity: sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==}
-
-  '@emotion/memoize@0.9.0':
-    resolution: {integrity: sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==}
-
-  '@emotion/serialize@1.3.3':
-    resolution: {integrity: sha512-EISGqt7sSNWHGI76hC7x1CksiXPahbxEOrC5RjmFRJTqLyEK9/9hZvBbiYn70dw4wuwMKiEMCUlR6ZXTSWQqxA==}
-
-  '@emotion/sheet@1.4.0':
-    resolution: {integrity: sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg==}
-
-  '@emotion/unitless@0.10.0':
-    resolution: {integrity: sha512-dFoMUuQA20zvtVTuxZww6OHoJYgrzfKM1t52mVySDJnMSEa08ruEvdYQbhvyu6soU+NeLVd3yKfTfT0NeV6qGg==}
-
-  '@emotion/utils@1.4.2':
-    resolution: {integrity: sha512-3vLclRofFziIa3J2wDh9jjbkUz9qk5Vi3IZ/FSTKViB0k+ef0fPV7dYrUIugbgupYDx7v9ud/SjrtEP8Y4xLoA==}
-
-  '@emotion/weak-memoize@0.4.0':
-    resolution: {integrity: sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg==}
-
   '@esbuild/aix-ppc64@0.21.5':
     resolution: {integrity: sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==}
     engines: {node: '>=12'}
@@ -1887,9 +1842,6 @@ packages:
   '@floating-ui/utils@0.2.12':
     resolution: {integrity: sha512-HpCo8tmWzLVad5s2d19EhAz5zqrrQ6s69qd6moPMQvkOuSwDT1YgRfWSVuc4ennqrgv3OHppiOGMQ7oC13yIww==}
 
-  '@fontsource-variable/inter@5.2.8':
-    resolution: {integrity: sha512-kOfP2D+ykbcX/P3IFnokOhVRNoTozo5/JxhAIVYLpea/UBmCQ/YWPBfWIDuBImXX/15KH+eKh4xpEUyS2sQQGQ==}
-
   '@fontsource-variable/inter@5.3.0':
     resolution: {integrity: sha512-OupL48va4JNofb97w6NYeF9S7W/kHNKM0Er8Dem5nqi4jeOLrVJDoE8tZEpnMJmtkvNbB1EIPPwHcdkF6b1oUA==}
 
@@ -4164,9 +4116,6 @@ packages:
     peerDependencies:
       '@types/react': ^19.2.0
 
-  '@types/react-scroll-to-bottom@4.2.5':
-    resolution: {integrity: sha512-gYMMxxhphzTNfKc4NIkEgu4XRiQjfj/6R7QK10Igz8jOUPNXBLSnK3RS7ofsNWnJDEgpLkNOwSLuASASiGsfHQ==}
-
   '@types/react-syntax-highlighter@15.5.13':
     resolution: {integrity: sha512-uLGJ87j6Sz8UaBAooU0T6lWJ0dBmjZgN1PZTrj05TNql2/XpC6+4HhMT5syIdFUUt+FASfCeLLv4kBygNU+8qA==}
 
@@ -4385,9 +4334,9 @@ packages:
     engines: {node: '>=18'}
     hasBin: true
 
-  '@vscode/test-electron@2.5.2':
-    resolution: {integrity: sha512-8ukpxv4wYe0iWMRQU18jhzJOHkeGKbnw7xWRX3Zw1WJA4cEKbHcmmLPdPrPtL6rhDcrlCZN+xKRpv09n4gRHYg==}
-    engines: {node: '>=16'}
+  '@vscode/test-electron@3.1.0':
+    resolution: {integrity: sha512-CRqv5u+YYoseuNVJ6Tyo4k0sF0mx4qnKMihRB0PjsUF8Dc0WKtCXo6CNL6nWWm5esfFQsQA/pejMj4ZbpJVLTw==}
+    engines: {node: '>=22'}
 
   '@vscode/vsce-sign-alpine-arm64@2.0.6':
     resolution: {integrity: sha512-wKkJBsvKF+f0GfsUuGT0tSW0kZL87QggEiqNqK6/8hvqsXvpx8OsTEc3mnE1kejkh5r+qUyQ7PtF8jZYN0mo8Q==}
@@ -4955,9 +4904,6 @@ packages:
   class-variance-authority@0.7.1:
     resolution: {integrity: sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==}
 
-  classnames@2.3.1:
-    resolution: {integrity: sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==}
-
   cli-cursor@5.0.0:
     resolution: {integrity: sha512-aCj4O5wKyszjMmDT4tZj93kxyydN/K5zPWSCe6/0AV/AA1pqe5ZBIw0a2ZfPQV7lL5/yb5HsUreJ6UFAF1tEQw==}
     engines: {node: '>=18'}
@@ -5091,9 +5037,6 @@ packages:
     resolution: {integrity: sha512-j/O/d7GcZCyNl7/hwZAb606rzqkyvaDctLmckbxLzHvFBzTJHuGEdodATcP3yIRoDrLHkIATJuvzbFlp/ki2cQ==}
     engines: {node: '>=18'}
 
-  convert-source-map@1.9.0:
-    resolution: {integrity: sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==}
-
   convert-source-map@2.0.0:
     resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
 
@@ -5116,13 +5059,6 @@ packages:
     resolution: {integrity: sha512-7Vv6asjS4gMOuILabD3l739tsaxFQmC+a7pLZm02zyvs8p977bL3zEgq3yDk5rn9B0PbYgIv++jmHcuUab4RhA==}
     engines: {node: '>=18'}
 
-  core-js-pure@3.49.0:
-    resolution: {integrity: sha512-XM4RFka59xATyJv/cS3O3Kml72hQXUeGRuuTmMYFxwzc9/7C8OYTaIR/Ji+Yt8DXzsFLNhat15cE/JP15HrCgw==}
-
-  core-js@3.18.3:
-    resolution: {integrity: sha512-tReEhtMReZaPFVw7dajMx0vlsz3oOb8ajgPoHVYGxr8ErnZ6PcYEvvmjGmXlfpnxpkYSdOQttjB+MvVbCGfvLw==}
-    deprecated: core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.
-
   core-util-is@1.0.3:
     resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}
 
@@ -5844,9 +5780,6 @@ packages:
     resolution: {integrity: sha512-f2JHn75x2JlwUwLenZypgczR7YWMb/uO9BvUXtus+JMgkbIkLADd38cI4EiV+OQqrGo1Zlq6V8wnqMJ8e62wUQ==}
     engines: {node: '>=20'}
 
-  find-root@1.1.0:
-    resolution: {integrity: sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==}
-
   find-up@3.0.0:
     resolution: {integrity: sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==}
     engines: {node: '>=6'}
@@ -6945,10 +6878,6 @@ packages:
   longest-streak@3.1.0:
     resolution: {integrity: sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g==}
 
-  loose-envify@1.4.0:
-    resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
-    hasBin: true
-
   lowlight@1.20.0:
     resolution: {integrity: sha512-8Ktj+prEb1RoCPkEOrPMYUN/nCggB7qAWe3a7OpMjWQkh3l2RD5wKRQ+o8Q8YuI9RG/xs95waaI/E6ym/7NsTw==}
 
@@ -7075,9 +7004,6 @@ packages:
     resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
     engines: {node: '>= 0.4'}
 
-  math-random@2.0.1:
-    resolution: {integrity: sha512-oIEbWiVDxDpl5tIF4S6zYS9JExhh3bun3uLb3YAinHPTlRtW4g1S66LtJrJ4Npq8dgIa8CLK5iPVah5n4n0s2w==}
-
   mdast-util-find-and-replace@3.0.2:
     resolution: {integrity: sha512-Tmd1Vg/m3Xz43afeNxDIhWRtFZgM2VLyaf4vSTYwudTyeuTneoL3qtWMA5jeLyz/O1vDJmmV4QuScFCA2tBPwg==}
 
@@ -7876,9 +7802,6 @@ packages:
     resolution: {integrity: sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==}
     engines: {node: '>= 6'}
 
-  prop-types@15.7.2:
-    resolution: {integrity: sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==}
-
   proper-lockfile@4.1.2:
     resolution: {integrity: sha512-TjNPblN4BwAWMXU8s9AEz4JmQxnD1NNL7bNOY/AKUzyamc379FWASUhc/K1pL2noVb+XmZKLL68cjzLsiOAMaA==}
 
@@ -7964,9 +7887,6 @@ packages:
   react-fast-compare@3.2.2:
     resolution: {integrity: sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==}
 
-  react-is@16.13.1:
-    resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
-
   react-markdown@10.1.0:
     resolution: {integrity: sha512-qKxVopLT/TyA6BX3Ue5NwabOsAzm0Q7kAPwq6L+wWDwisYs7R8vZ0nRXqq6rkueboxpkjvLGU9fWifiX/ZZFxQ==}
     peerDependencies:
@@ -8007,11 +7927,6 @@ packages:
       react-dom:
         optional: true
 
-  react-scroll-to-bottom@4.2.0:
-    resolution: {integrity: sha512-1WweuumQc5JLzeAR81ykRdK/cEv9NlCPEm4vSwOGN1qS2qlpGVTyMgdI8Y7ZmaqRmzYBGV5/xPuJQtekYzQFGg==}
-    peerDependencies:
-      react: '>= 16.8.6'
-
   react-style-singleton@2.2.3:
     resolution: {integrity: sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==}
     engines: {node: '>=10'}
@@ -8028,6 +7943,12 @@ packages:
     peerDependencies:
       react: '>= 0.14.0'
 
+  react-virtuoso@4.18.11:
+    resolution: {integrity: sha512-Qeeq9vqa5seCxACvzbQTUeq3s2/Bu+VlwOMF0jfy3E/ZKHLiXWwJpXBhv2rckqYkvm1XRVFLCBMCmqCU8JNEJg==}
+    peerDependencies:
+      react: '>=16 || >=17 || >= 18 || >= 19'
+      react-dom: '>=16 || >=17 || >= 18 || >=19'
+
   react@19.2.8:
     resolution: {integrity: sha512-PWaYA1L/q9u2u7xYQi+Y3L3Yfnie7XyLeaJICV1MGD6LprsBxcAqGjYyr0eY3p+QdsA+x/Irkt4Qif8D63+Sbw==}
     engines: {node: '>=0.10.0'}
@@ -8493,9 +8414,6 @@ packages:
     resolution: {integrity: sha512-1sbhsxqI+I2tqlmjbz99GXNmZtr6tKIyEgGGnJw/MKGblalqk/XoOYYFJlBzTKZCxx8kLaD3FD5s9BEEjx5Pyg==}
     engines: {node: '>=10'}
 
-  simple-update-in@2.2.0:
-    resolution: {integrity: sha512-FrW41lLiOs82jKxwq39UrE1HDAHOvirKWk4Nv8tqnFFFknVbTxcHZzDS4vt02qqdU/5+KNsQHWzhKHznDBmrww==}
-
   sinon@22.1.0:
     resolution: {integrity: sha512-n1ajF2rBWMTtEwbKcw4UdFg4nCnDdq/U6RDoxtOd7oapOlRoJ5ynwFx60owROyhDpA9QhMZi0pCO/xtmwFjG7w==}
 
@@ -8559,10 +8477,6 @@ packages:
     resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
     engines: {node: '>=0.10.0'}
 
-  source-map@0.5.7:
-    resolution: {integrity: sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==}
-    engines: {node: '>=0.10.0'}
-
   source-map@0.6.1:
     resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
     engines: {node: '>=0.10.0'}
@@ -8722,9 +8636,6 @@ packages:
   style-to-object@1.0.14:
     resolution: {integrity: sha512-LIN7rULI0jBscWQYaSswptyderlarFkjQ+t79nzty8tcIAceVomEVlLzH5VP4Cmsv6MtKhs7qaAiwlcp+Mgaxw==}
 
-  stylis@4.2.0:
-    resolution: {integrity: sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==}
-
   stylis@4.4.0:
     resolution: {integrity: sha512-5Z9ZpRzfuH6l/UAvCPAPUo3665Nk2wLaZU3x+TLHKVzIz33+sbJqbtrYoC3KD4/uVOr2Zp+L0LySezP9OHV9yA==}
 
@@ -10162,10 +10073,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/runtime-corejs3@7.29.7':
-    dependencies:
-      core-js-pure: 3.49.0
-
   '@babel/runtime@7.29.7': {}
 
   '@babel/template@7.29.7':
@@ -10510,62 +10417,6 @@ snapshots:
       tslib: 2.8.1
     optional: true
 
-  '@emotion/babel-plugin@11.13.5':
-    dependencies:
-      '@babel/helper-module-imports': 7.29.7
-      '@babel/runtime': 7.29.7
-      '@emotion/hash': 0.9.2
-      '@emotion/memoize': 0.9.0
-      '@emotion/serialize': 1.3.3
-      babel-plugin-macros: 3.1.0
-      convert-source-map: 1.9.0
-      escape-string-regexp: 4.0.0
-      find-root: 1.1.0
-      source-map: 0.5.7
-      stylis: 4.2.0
-    transitivePeerDependencies:
-      - supports-color
-
-  '@emotion/cache@11.14.0':
-    dependencies:
-      '@emotion/memoize': 0.9.0
-      '@emotion/sheet': 1.4.0
-      '@emotion/utils': 1.4.2
-      '@emotion/weak-memoize': 0.4.0
-      stylis: 4.2.0
-
-  '@emotion/css@11.1.3(@babel/core@7.29.7)':
-    dependencies:
-      '@emotion/babel-plugin': 11.13.5
-      '@emotion/cache': 11.14.0
-      '@emotion/serialize': 1.3.3
-      '@emotion/sheet': 1.4.0
-      '@emotion/utils': 1.4.2
-    optionalDependencies:
-      '@babel/core': 7.29.7
-    transitivePeerDependencies:
-      - supports-color
-
-  '@emotion/hash@0.9.2': {}
-
-  '@emotion/memoize@0.9.0': {}
-
-  '@emotion/serialize@1.3.3':
-    dependencies:
-      '@emotion/hash': 0.9.2
-      '@emotion/memoize': 0.9.0
-      '@emotion/unitless': 0.10.0
-      '@emotion/utils': 1.4.2
-      csstype: 3.2.3
-
-  '@emotion/sheet@1.4.0': {}
-
-  '@emotion/unitless@0.10.0': {}
-
-  '@emotion/utils@1.4.2': {}
-
-  '@emotion/weak-memoize@0.4.0': {}
-
   '@esbuild/aix-ppc64@0.21.5':
     optional: true
 
@@ -10853,8 +10704,6 @@ snapshots:
 
   '@floating-ui/utils@0.2.12': {}
 
-  '@fontsource-variable/inter@5.2.8': {}
-
   '@fontsource-variable/inter@5.3.0': {}
 
   '@fontsource-variable/jetbrains-mono@5.3.0': {}
@@ -13025,7 +12874,8 @@ snapshots:
 
   '@types/nunjucks@3.2.6': {}
 
-  '@types/parse-json@4.0.2': {}
+  '@types/parse-json@4.0.2':
+    optional: true
 
   '@types/picomatch@4.0.3': {}
 
@@ -13039,10 +12889,6 @@ snapshots:
     dependencies:
       '@types/react': 19.2.18
 
-  '@types/react-scroll-to-bottom@4.2.5':
-    dependencies:
-      '@types/react': 19.2.18
-
   '@types/react-syntax-highlighter@15.5.13':
     dependencies:
       '@types/react': 19.2.18
@@ -13317,7 +13163,7 @@ snapshots:
       supports-color: 9.4.0
       yargs: 17.7.3
 
-  '@vscode/test-electron@2.5.2':
+  '@vscode/test-electron@3.1.0':
     dependencies:
       http-proxy-agent: 7.0.2
       https-proxy-agent: 7.0.6
@@ -13722,6 +13568,7 @@ snapshots:
       '@babel/runtime': 7.29.7
       cosmiconfig: 7.1.0
       resolve: 1.22.12
+    optional: true
 
   babel-plugin-module-resolver@5.0.2:
     dependencies:
@@ -13961,8 +13808,6 @@ snapshots:
     dependencies:
       clsx: 2.1.1
 
-  classnames@2.3.1: {}
-
   cli-cursor@5.0.0:
     dependencies:
       restore-cursor: 5.1.0
@@ -14091,8 +13936,6 @@ snapshots:
 
   content-type@2.0.0: {}
 
-  convert-source-map@1.9.0: {}
-
   convert-source-map@2.0.0: {}
 
   cookie-es@3.1.1: {}
@@ -14107,10 +13950,6 @@ snapshots:
     dependencies:
       is-what: 5.5.0
 
-  core-js-pure@3.49.0: {}
-
-  core-js@3.18.3: {}
-
   core-util-is@1.0.3: {}
 
   cors@2.8.6:
@@ -14133,6 +13972,7 @@ snapshots:
       parse-json: 5.2.0
       path-type: 4.0.0
       yaml: 1.10.3
+    optional: true
 
   cosmiconfig@9.0.2(typescript@6.0.3):
     dependencies:
@@ -15014,8 +14854,6 @@ snapshots:
       fast-querystring: 1.1.2
       safe-regex2: 5.1.1
 
-  find-root@1.1.0: {}
-
   find-up@3.0.0:
     dependencies:
       locate-path: 3.0.0
@@ -16114,10 +15952,6 @@ snapshots:
 
   longest-streak@3.1.0: {}
 
-  loose-envify@1.4.0:
-    dependencies:
-      js-tokens: 4.0.0
-
   lowlight@1.20.0:
     dependencies:
       fault: 1.0.4
@@ -16221,8 +16055,6 @@ snapshots:
 
   math-intrinsics@1.1.0: {}
 
-  math-random@2.0.1: {}
-
   mdast-util-find-and-replace@3.0.2:
     dependencies:
       '@types/mdast': 4.0.4
@@ -17317,12 +17149,6 @@ snapshots:
       kleur: 3.0.3
       sisteransi: 1.0.5
 
-  prop-types@15.7.2:
-    dependencies:
-      loose-envify: 1.4.0
-      object-assign: 4.1.1
-      react-is: 16.13.1
-
   proper-lockfile@4.1.2:
     dependencies:
       graceful-fs: 4.2.11
@@ -17477,8 +17303,6 @@ snapshots:
 
   react-fast-compare@3.2.2: {}
 
-  react-is@16.13.1: {}
-
   react-markdown@10.1.0(@types/react@19.2.18)(react@19.2.8):
     dependencies:
       '@types/hast': 3.0.5
@@ -17525,20 +17349,6 @@ snapshots:
     optionalDependencies:
       react-dom: 19.2.8(react@19.2.8)
 
-  react-scroll-to-bottom@4.2.0(@babel/core@7.29.7)(react@19.2.8):
-    dependencies:
-      '@babel/runtime-corejs3': 7.29.7
-      '@emotion/css': 11.1.3(@babel/core@7.29.7)
-      classnames: 2.3.1
-      core-js: 3.18.3
-      math-random: 2.0.1
-      prop-types: 15.7.2
-      react: 19.2.8
-      simple-update-in: 2.2.0
-    transitivePeerDependencies:
-      - '@babel/core'
-      - supports-color
-
   react-style-singleton@2.2.3(@types/react@19.2.18)(react@19.2.8):
     dependencies:
       get-nonce: 1.0.1
@@ -17557,6 +17367,11 @@ snapshots:
       react: 19.2.8
       refractor: 5.0.0
 
+  react-virtuoso@4.18.11(react-dom@19.2.8(react@19.2.8))(react@19.2.8):
+    dependencies:
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+
   react@19.2.8: {}
 
   read-pkg@9.0.1:
@@ -18224,8 +18039,6 @@ snapshots:
 
   simple-invariant@2.0.1: {}
 
-  simple-update-in@2.2.0: {}
-
   sinon@22.1.0:
     dependencies:
       '@sinonjs/commons': 3.0.1
@@ -18291,8 +18104,6 @@ snapshots:
 
   source-map-js@1.2.1: {}
 
-  source-map@0.5.7: {}
-
   source-map@0.6.1: {}
 
   space-separated-tokens@2.0.2: {}
@@ -18476,8 +18287,6 @@ snapshots:
     dependencies:
       inline-style-parser: 0.2.7
 
-  stylis@4.2.0: {}
-
   stylis@4.4.0: {}
 
   superjson@2.2.6:
@@ -19096,7 +18905,7 @@ snapshots:
       - typescript
       - universal-cookie
 
-  vitest@4.1.4(@types/node@22.20.1)(@vitest/coverage-v8@4.1.9(vitest@4.1.9))(jsdom@25.0.1)(msw@2.15.0(@types/node@22.20.1)(typescript@6.0.3))(vite@6.4.3(@types/node@22.20.1)(jiti@2.7.0)(lightningcss@1.33.0)(tsx@4.23.5)(yaml@2.9.0)):
+  vitest@4.1.4(@types/node@22.20.1)(@vitest/coverage-v8@4.1.9)(jsdom@25.0.1)(msw@2.15.0(@types/node@22.20.1)(typescript@6.0.3))(vite@6.4.3(@types/node@22.20.1)(jiti@2.7.0)(lightningcss@1.33.0)(tsx@4.23.5)(yaml@2.9.0)):
     dependencies:
       '@vitest/expect': 4.1.4
       '@vitest/mocker': 4.1.4(msw@2.15.0(@types/node@22.20.1)(typescript@6.0.3))(vite@6.4.3(@types/node@22.20.1)(jiti@2.7.0)(lightningcss@1.33.0)(tsx@4.23.5)(yaml@2.9.0))
@@ -19349,7 +19158,8 @@ snapshots:
 
   yallist@5.0.0: {}
 
-  yaml@1.10.3: {}
+  yaml@1.10.3:
+    optional: true
 
   yaml@2.9.0: {}