feat(vscode): editor-theme design system, config hub, and host UX (#48)

## Related Issue

No linked issue — the problem is explained below.

## Problem

The VS Code extension UI did not follow the editor color theme: it
shipped a fixed dark palette with a bundled font, so light and
high-contrast themes rendered incorrectly. Composer controls (permission
mode, plan mode, thinking effort) were separate buttons that overlapped
at narrow sidebar widths. Configuration was fragmented across three
separate modals with no way to inspect the local config file or MCP
connections. Host integration was minimal: no status bar presence, no
code actions, no terminal/editor context menus, and long conversations
rendered every message at once.

## What changed

- **Editor-theme design system.** The webview token layer now derives
every semantic color from `--vscode-*` variables via Tailwind `@theme
inline`, with Dark+ fallbacks. Light, dark, and both high-contrast
themes work with zero runtime theme detection; the only JS consumer is a
single `useIsDark` hook backed by the host-maintained body classes. The
bundled Inter font and the hardcoded `.dark` palette are removed.
- **Config hub.** One page (rail + sections) replaces the three modals:
models, providers, MCP servers, a read-only view of the local
`config.toml` (with an open-in-editor action), and extension settings.
Adapts to narrow sidebar widths.
- **Consolidated composer menu.** Permission mode, plan mode, and
thinking effort live in a single popover; approval prompts answer to
number keys. Fixes the control overlap at narrow widths.
- **Host integrations.** Status bar indicator with activity count,
quick-fix code actions, terminal and editor context menu entries, a
getting-started walkthrough, and a new-conversation keybinding.
- **Chat fixes.** Long conversations render through a virtualized list
(react-virtuoso, bottom-anchored); sign-out works from the command
palette.
- **Dependency hygiene.** Removed `@fontsource-variable/inter` and
`react-scroll-to-bottom`; bumped `@vscode/test-electron` to ^3.1.0 (VS
Code ≥ 1.132 renamed the macOS binary, which broke the extension-host
smoke test).

This approach fits the extension because VS Code already maintains the
theme contract (`--vscode-*` variables and body classes) — deriving from
it removes an entire parallel theming system instead of maintaining one.

Verified locally: typecheck (tsc + tsgo, both tsconfigs), build, all 338
existing tests, type-aware lint, VSIX packaging audit, and an
extension-host smoke test that activates the extension and opens the
webview.

## Checklist

- [x] I have read the
[CONTRIBUTING](https://github.com/Pythoughts-labs/pythinker-code/blob/main/CONTRIBUTING.md)
document.
- [x] I have linked a related issue, or explained the problem above.
- [ ] I have added tests that prove my feature works. (No new tests —
this is UI/theming work; all 338 existing tests pass and the VSIX audit
+ extension-host smoke test cover activation.)
- [x] Ran `gen-changesets` skill, or this PR needs no changeset.
- [x] Ran `gen-docs` skill, or this PR needs no doc update. (Extension
is a private package; no docs affected.)


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Added a unified configuration hub for models, providers, MCP servers,
local configuration, and extension settings.
  * Added composer controls for permission, plan, and thinking modes.
* Added VS Code integrations for terminal selections, quick fixes,
context menus, walkthroughs, shortcuts, and status indicators.
* Added conversation sorting, grouping, recent-session shortcuts, and
context-usage visibility.
* **Bug Fixes**
* Improved long-conversation performance and fixed narrow-sidebar
control overlap.
* Enhanced approval and question dialogs with keyboard navigation and
pending-request indicators.
* **Style**
* Improved light, dark, and high-contrast theme support across the
interface.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: elkaix

.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.

.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.

.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.

.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.

.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.

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",

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:

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;

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;

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()}`;