chore(vscode): bump to 4.0.12 for legacy release

* Suport cline-free models in the legacy extension

* fix retry display

* fix ci

* Fix model info resolution

.github/workflows/ext-vscode-test.yml

@@ -8,6 +8,7 @@ on:
     pull_request:
         branches:
             - main
+            - legacy-extension
     workflow_call:
 
 # Set default permissions for all jobs

CHANGELOG.md

@@ -1,5 +1,115 @@
 # Changelog
 
+## [4.0.12]
+
+### Added
+
+- Add support for free Cline models, shown as "(free)" in the model picker, with a dedicated error card that includes the reset time when the free limit is reached.
+
+### Fixed
+
+- Keep Claude Code responses that were already streamed when the CLI exits with a max-turns error, instead of discarding a valid response.
+
+## [4.0.11]
+
+### Added
+
+- Add Claude Opus 5 across the Anthropic, Claude Code, Bedrock, Vertex, Cline, and OpenRouter providers, including 1M context window variants.
+- Add Moonshot Kimi K3 support.
+- Include the host plugin version in telemetry events.
+
+### Fixed
+
+- Correct pricing for the Claude Opus 1M context variants, which overstated costs for requests above 200k tokens.
+- Enable native tool calling for Kimi K3 models, fixing empty responses.
+
+## [4.0.10]
+
+### Added
+
+- Add telemetry to track when Cline reaches the consecutive mistake limit.
+
+## [4.0.9]
+
+### Added
+
+- Add GPT-5.6 ChatGPT subscription models.
+
+### Changed
+
+- Soften and shorten the message shown when Cline hits the consecutive mistake limit.
+
+### Fixed
+
+- Handle cumulative usage snapshots from OpenAI-compatible providers so token counts are no longer over-reported.
+- Load skills from files saved as UTF-8 with a byte-order mark (BOM).
+
+## [4.0.8]
+
+### Added
+
+- Add more models to the GCP Vertex provider, plus a free-form entry option in the model dropdown for specifying custom Vertex models.
+
+## [4.0.7]
+
+### Added
+
+- Add a ClinePass limit-reached error with a one-click option to switch to Cline usage-based billing.
+- Allow selecting Cline free models on the ClinePass provider, organized into Subscribed and Free tabs with model descriptions.
+
+### Changed
+
+- Refine ClinePass onboarding and provider settings copy, and open the "learn more" link via the in-app URL handler.
+- Remove the Cline model picker recommendation copy.
+
+### Removed
+
+- Remove all references to GLM 5.1.
+
+## [4.0.6]
+
+### Fixed
+
+- Generalize the model capability warning so it applies more broadly.
+
+## [4.0.5]
+
+### Added
+
+- Add support for Claude Sonnet 5 across the Anthropic, Bedrock, Vertex, Claude Code, SAP AI Core, OpenRouter, and Vercel AI Gateway providers, including model picker and recommended-model updates.
+
+## [4.0.4]
+
+### Changed
+
+- Fully remove the ClinePass feature flag so ClinePass is available everywhere in the UI — onboarding, settings, the welcome promo banner, and the credit-limit "Switch to ClinePass" action.
+
+## [4.0.3]
+
+### Changed
+
+- Enable the ClinePass provider for all users by removing the feature-flag gate that previously fell back to the standard Cline provider.
+
+## [4.0.2]
+
+### Added
+
+- Add reasoning effort support (including `xhigh`) for DeepSeek thinking models.
+- Improve the ClinePass provider experience with clearer reasoning controls and model selection.
+
+### Fixed
+
+- Show reasoning effort controls for ClinePass models and align ClinePass model resolution with the rest of the provider.
+- Prefer canonical Cline Z.ai model ids and polish ClinePass and Z.ai model metadata.
+- Fix environment variable replacement in the webview.
+- Default focus chain settings in webview state so the toggle reflects the correct value on load.
+
+## [4.0.1]
+
+### Changed
+
+- Roll the stable VS Code extension back to the pre-SDK-migration codebase to resolve regressions reported in 4.0.0. This release ships the 3.89.2 extension code under a higher version number so existing 4.0.0 users receive the update. SDK-migration work continues separately on `main`.
+
 ## [3.89.2]
 
 ### Fixed

apps/cli/CHANGELOG.md

@@ -1,5 +1,48 @@
 # Cline CLI Changelog
 
+## 3.0.29
+
+- Costs are now hidden for Cline free models
+- Fixed Z.ai model metadata resolution for Z.ai models accessed through the Cline provider
+- Reverted the model-name-only display change from v3.0.28; the model picker, selector, and status bar return to their previous display behavior
+
+## 3.0.28
+
+- Added a ClinePass onboarding flow with selectable ClinePass models, plus improved ClinePass error handling
+- Added hub primitive catalogs and refreshed the hub dashboard design with a dedicated customizations breakout
+- Auto-approve toggles now apply immediately when changed
+- Feature flags now resolve using your user ID on startup
+- Fixed Cline model display names so they resolve by model name
+- Truncate large tool results by default (including MCP and custom tool output) to keep requests within context budget
+- Hardened parallel tool-call guidance for faster, more reliable multi-tool execution
+
+## 3.0.27
+
+- Added a `cline skill` command to install and manage skills, matching `cline plugin install` and `cline mcp` (installs default to the Cline agent directory)
+- Added a prefilled MCP install wizard command for quicker MCP server setup
+- Improved error handling and messaging when plugin MCP OAuth authorization fails
+- The CLI now rejects unknown commands and unquoted multi-word input with a clear error instead of silently treating bad arguments as a prompt
+
+## 3.0.26
+
+- Reverted the expandable model picker sections and ClinePass models, restoring the previous model-selection UI
+
+## 3.0.25
+
+- Added ClinePass support, with selectable ClinePass models in the model picker
+- Made model picker sections expandable
+- Added MCP server support to plugins, including authorizing plugin MCP OAuth during install
+- Encouraged parallel tool calls for faster task execution
+- Capped tool output for bash commands and file reads to keep large output within context limits
+- Allowed ranged reads on large files
+- Fixed apply_patch to fail when a hunk is skipped
+- Fixed run_commands to return captured stdout on failure and handle split heredocs
+- Fixed search tools to treat zero results as success
+- Fixed disabled-reasoning handling for StepFun flash
+- Fixed history resume rendering isolation
+- Fixed the Hugging Face URL
+- Fixed Cline OAuth token formatting in provider config
+
 ## 3.0.24
 
 - Plugin commands can now submit prompts to the agent

apps/cli/README.md

@@ -163,6 +163,30 @@ cline auth --provider anthropic --apikey sk-... --modelid claude-sonnet-4-6
 cline auth --provider openai-native --apikey sk-... --modelid gpt-5 --baseurl https://api.example.com/v1
 ```
 
+### MCP servers
+
+Manage MCP servers with the interactive wizard:
+
+```sh
+cline mcp
+cline config mcp
+```
+
+Open the add-server wizard with the name, transport, and command or URL already filled in with `cline mcp install` (`cline mcp add` also works). Stdio servers use everything after `--` as the command and arguments:
+
+```sh
+cline mcp install fs -- npx -y @modelcontextprotocol/server-filesystem /tmp
+```
+
+Remote HTTP and SSE servers take a name, transport, and URL. The wizard still asks for auth details before saving:
+
+```sh
+cline mcp install ctx7 --transport http https://mcp.context7.com/mcp
+cline mcp install events --transport sse https://example.com/sse
+```
+
+Because this command opens the wizard, it requires a TTY.
+
 ### Connectors
 
 Bridge a chat surface into RPC-backed Cline sessions. Each conversation thread maps to a session with full context. Supported platforms: Telegram, Slack, Google Chat, WhatsApp, and Linear.

apps/cli/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@cline/cli",
 	"displayName": "cline",
-	"version": "3.0.24",
+	"version": "3.0.29",
 	"description": "Autonomous coding agent CLI - capable of creating/editing files, running commands, using the browser, and more",
 	"type": "module",
 	"publishConfig": {

apps/cli/src/cli.e2e.test.ts

@@ -746,6 +746,27 @@ Break work into clear steps.`,
 		).toBe(true);
 	});
 
+	it("routes mcp install and requires a TTY for the prefilled wizard", () => {
+		const result = runCli(
+			[
+				"mcp",
+				"install",
+				"fs",
+				"--",
+				"npx",
+				"-y",
+				"@modelcontextprotocol/server-filesystem",
+				"/tmp",
+			],
+			{ env: createIsolatedEnv() },
+		);
+
+		expect(result.status).toBe(1);
+		expect(asText(result.stderr)).toContain(
+			"cline mcp install opens the MCP wizard and requires a TTY.",
+		);
+	});
+
 	it("lists available tools", () => {
 		const homeDir = mkdtempSync(path.join(os.tmpdir(), "cli-e2e-home-"));
 		const dataDir = mkdtempSync(path.join(os.tmpdir(), "cli-e2e-data-"));

apps/cli/src/commands/dashboard.test.ts

@@ -6,6 +6,15 @@ import { runDashboardCommand, waitForProcessShutdown } from "./dashboard";
 
 const ENV_KEYS = [
 	"WORKSPACE_ROOT",
+	"CLINE_DIR",
+	"CLINE_SANDBOX",
+	"CLINE_SANDBOX_DATA_DIR",
+	"CLINE_DATA_DIR",
+	"CLINE_DB_DATA_DIR",
+	"CLINE_SESSION_DATA_DIR",
+	"CLINE_TEAM_DATA_DIR",
+	"CLINE_PROVIDER_SETTINGS_PATH",
+	"CLINE_HOOKS_LOG_PATH",
 	"HOST",
 	"CLINE_HUB_DASHBOARD_PORT",
 	"PUBLIC_URL",
@@ -38,6 +47,9 @@ describe("runDashboardCommand", () => {
 		let observedEnv:
 			| {
 					workspaceRoot: string | undefined;
+					clineDir: string | undefined;
+					clineDataDir: string | undefined;
+					providerSettingsPath: string | undefined;
 					host: string | undefined;
 					port: string | undefined;
 					publicUrl: string | undefined;
@@ -50,7 +62,9 @@ describe("runDashboardCommand", () => {
 		process.env.CLINE_HUB_WEBVIEW_DIST_DIR = webviewDistDir;
 
 		const exitCode = await runDashboardCommand({
+			configDir: "/tmp/cline-config",
 			cwd: "sdk",
+			dataDir: ".cline-dashboard-data",
 			host: "127.0.0.1",
 			port: "9090",
 			publicUrl: "http://127.0.0.1:9090",
@@ -62,6 +76,9 @@ describe("runDashboardCommand", () => {
 			startServer: async () => {
 				observedEnv = {
 					workspaceRoot: process.env.WORKSPACE_ROOT,
+					clineDir: process.env.CLINE_DIR,
+					clineDataDir: process.env.CLINE_DATA_DIR,
+					providerSettingsPath: process.env.CLINE_PROVIDER_SETTINGS_PATH,
 					host: process.env.HOST,
 					port: process.env.CLINE_HUB_DASHBOARD_PORT,
 					publicUrl: process.env.PUBLIC_URL,
@@ -87,6 +104,13 @@ describe("runDashboardCommand", () => {
 		expect(exitCode).toBe(0);
 		expect(observedEnv).toEqual({
 			workspaceRoot: resolve("sdk"),
+			clineDir: "/tmp/cline-config",
+			clineDataDir: resolve("sdk", ".cline-dashboard-data"),
+			providerSettingsPath: join(
+				resolve("sdk", ".cline-dashboard-data"),
+				"settings",
+				"providers.json",
+			),
 			host: "127.0.0.1",
 			port: "9090",
 			publicUrl: "http://127.0.0.1:9090",

apps/cli/src/commands/dashboard.ts

@@ -3,6 +3,7 @@ import { arch, platform } from "node:os";
 import { dirname, join, resolve } from "node:path";
 import { fileURLToPath } from "node:url";
 import open from "open";
+import { configureSandboxEnvironment } from "../utils/helpers";
 import { c } from "../utils/output";
 
 export interface DashboardServerHandle {
@@ -19,7 +20,9 @@ interface DashboardCommandIo {
 }
 
 export interface RunDashboardCommandOptions {
+	configDir?: string;
 	cwd?: string;
+	dataDir?: string;
 	host?: string;
 	port?: string;
 	publicUrl?: string;
@@ -36,10 +39,9 @@ const WEBVIEW_DIST_ENV = "CLINE_HUB_WEBVIEW_DIST_DIR";
 
 function setEnvValue(name: string, value: string | undefined): () => void {
 	const previous = process.env[name];
-	if (value === undefined) {
-		return () => {};
+	if (value !== undefined) {
+		process.env[name] = value;
 	}
-	process.env[name] = value;
 	return () => {
 		if (previous === undefined) {
 			delete process.env[name];
@@ -49,21 +51,39 @@ function setEnvValue(name: string, value: string | undefined): () => void {
 	};
 }
 
+const SANDBOX_ENV_KEYS = [
+	"CLINE_SANDBOX",
+	"CLINE_SANDBOX_DATA_DIR",
+	"CLINE_DATA_DIR",
+	"CLINE_DB_DATA_DIR",
+	"CLINE_SESSION_DATA_DIR",
+	"CLINE_TEAM_DATA_DIR",
+	"CLINE_PROVIDER_SETTINGS_PATH",
+	"CLINE_HOOKS_LOG_PATH",
+] as const;
+
 async function withDashboardEnvironment<T>(
 	options: RunDashboardCommandOptions,
 	fn: () => Promise<T>,
 ): Promise<T> {
+	const cwd = options.cwd ? resolve(options.cwd) : process.cwd();
 	const restore = [
-		setEnvValue(
-			"WORKSPACE_ROOT",
-			options.cwd ? resolve(options.cwd) : undefined,
-		),
+		setEnvValue("WORKSPACE_ROOT", options.cwd ? cwd : undefined),
+		setEnvValue("CLINE_DIR", options.configDir?.trim() || undefined),
 		setEnvValue("HOST", options.host),
 		setEnvValue(DASHBOARD_PORT_ENV, options.port),
 		setEnvValue("PUBLIC_URL", options.publicUrl),
 		setEnvValue("ROOM_SECRET", options.roomSecret),
 		setEnvValue(WEBVIEW_DIST_ENV, resolveDefaultWebviewDistDir()),
+		...SANDBOX_ENV_KEYS.map((key) => setEnvValue(key, undefined)),
 	];
+	if (options.dataDir || process.env.CLINE_SANDBOX?.trim() === "1") {
+		configureSandboxEnvironment({
+			enabled: true,
+			cwd,
+			explicitDir: options.dataDir,
+		});
+	}
 	try {
 		return await fn();
 	} finally {

apps/cli/src/commands/mcp.test.ts

@@ -0,0 +1,145 @@
+import { describe, expect, it, vi } from "vitest";
+import { buildMcpInstallDefaults, runMcpInstallCommand } from "./mcp";
+
+describe("mcp install command", () => {
+	it("builds stdio wizard defaults from command args", () => {
+		expect(
+			buildMcpInstallDefaults({
+				name: "fs",
+				targetArgs: [
+					"npx",
+					"-y",
+					"@modelcontextprotocol/server-filesystem",
+					"/tmp/my dir",
+				],
+			}),
+		).toEqual({
+			name: "fs",
+			type: "stdio",
+			command: 'npx -y @modelcontextprotocol/server-filesystem "/tmp/my dir"',
+		});
+	});
+
+	it("builds remote wizard defaults and normalizes http transport", () => {
+		expect(
+			buildMcpInstallDefaults({
+				name: "ctx7",
+				transport: "http",
+				targetArgs: ["https://mcp.context7.com/mcp"],
+			}),
+		).toEqual({
+			name: "ctx7",
+			type: "streamableHttp",
+			url: "https://mcp.context7.com/mcp",
+		});
+	});
+
+	it("normalizes streamable-http transport", () => {
+		expect(
+			buildMcpInstallDefaults({
+				name: "docs",
+				transport: "streamable-http",
+				targetArgs: ["https://example.com/mcp"],
+			}),
+		).toEqual({
+			name: "docs",
+			type: "streamableHttp",
+			url: "https://example.com/mcp",
+		});
+	});
+
+	it("builds SSE wizard defaults", () => {
+		expect(
+			buildMcpInstallDefaults({
+				name: "events",
+				transport: "sse",
+				targetArgs: ["https://example.com/sse"],
+			}),
+		).toEqual({
+			name: "events",
+			type: "sse",
+			url: "https://example.com/sse",
+		});
+	});
+
+	it("rejects missing stdio command and invalid remote URL", () => {
+		expect(() =>
+			buildMcpInstallDefaults({
+				name: "fs",
+			}),
+		).toThrow(/requires a command/);
+
+		expect(() =>
+			buildMcpInstallDefaults({
+				name: "bad",
+				transport: "http",
+				targetArgs: ["not-a-url"],
+			}),
+		).toThrow(/Invalid MCP server URL/);
+	});
+
+	it("rejects remote URL schemes other than http and https", () => {
+		expect(() =>
+			buildMcpInstallDefaults({
+				name: "bad",
+				transport: "http",
+				targetArgs: ["file:///etc/passwd"],
+			}),
+		).toThrow(/only http and https are supported/);
+	});
+
+	it("opens the add wizard with prefilled defaults", async () => {
+		const runWizard = vi.fn(async () => 0);
+
+		const code = await runMcpInstallCommand({
+			name: "ctx7",
+			transport: "http",
+			targetArgs: ["https://mcp.context7.com/mcp"],
+			isTty: true,
+			runWizard,
+			io: { writeErr: vi.fn() },
+		});
+
+		expect(code).toBe(0);
+		expect(runWizard).toHaveBeenCalledWith({
+			name: "ctx7",
+			type: "streamableHttp",
+			url: "https://mcp.context7.com/mcp",
+		});
+	});
+
+	it("requires a TTY because it opens the wizard", async () => {
+		const writeErr = vi.fn();
+		const runWizard = vi.fn(async () => 0);
+
+		const code = await runMcpInstallCommand({
+			name: "ctx7",
+			transport: "http",
+			targetArgs: ["https://mcp.context7.com/mcp"],
+			isTty: false,
+			runWizard,
+			io: { writeErr },
+		});
+
+		expect(code).toBe(1);
+		expect(runWizard).not.toHaveBeenCalled();
+		expect(writeErr).toHaveBeenCalledWith(
+			"cline mcp install opens the MCP wizard and requires a TTY.",
+		);
+	});
+
+	it("checks for TTY before validating install arguments", async () => {
+		const writeErr = vi.fn();
+
+		const code = await runMcpInstallCommand({
+			name: "fs",
+			isTty: false,
+			io: { writeErr },
+		});
+
+		expect(code).toBe(1);
+		expect(writeErr).toHaveBeenCalledWith(
+			"cline mcp install opens the MCP wizard and requires a TTY.",
+		);
+	});
+});

apps/cli/src/commands/mcp.ts

@@ -0,0 +1,121 @@
+import type { McpAddDefaults } from "../wizards/mcp";
+
+export interface McpCommandIo {
+	writeErr: (text: string) => void;
+}
+
+export interface McpInstallOptions {
+	name: string;
+	targetArgs?: string[];
+	transport?: string;
+	io?: McpCommandIo;
+	isTty?: boolean;
+	runWizard?: (defaults: McpAddDefaults) => Promise<number>;
+}
+
+function normalizeTransportType(
+	value: string | undefined,
+): McpAddDefaults["type"] {
+	const normalized = (value ?? "stdio").trim();
+	if (normalized === "http" || normalized === "streamable-http") {
+		return "streamableHttp";
+	}
+	if (
+		normalized === "stdio" ||
+		normalized === "sse" ||
+		normalized === "streamableHttp"
+	) {
+		return normalized;
+	}
+	throw new Error(
+		`Unsupported MCP transport "${normalized}". Expected stdio, sse, http, streamable-http, or streamableHttp.`,
+	);
+}
+
+function assertValidUrl(url: string): void {
+	let parsed: URL;
+	try {
+		parsed = new URL(url);
+	} catch {
+		throw new Error(`Invalid MCP server URL: ${url}`);
+	}
+	if (parsed.protocol !== "http:" && parsed.protocol !== "https:") {
+		throw new Error(
+			`Invalid MCP server URL: ${url} (only http and https are supported)`,
+		);
+	}
+}
+
+function quoteCommandArg(arg: string): string {
+	if (/^[^\s"'\\]+$/.test(arg)) {
+		return arg;
+	}
+	return `"${arg.replace(/(["\\])/g, "\\$1")}"`;
+}
+
+export function buildMcpInstallDefaults(options: {
+	name: string;
+	targetArgs?: string[];
+	transport?: string;
+}): McpAddDefaults {
+	const name = options.name.trim();
+	if (!name) {
+		throw new Error("MCP server name is required");
+	}
+	const type = normalizeTransportType(options.transport);
+	const targetArgs = options.targetArgs ?? [];
+	if (type === "stdio") {
+		if (targetArgs.length === 0) {
+			throw new Error(
+				"Stdio MCP install requires a command after the server name, for example: cline mcp install fs -- npx -y @modelcontextprotocol/server-filesystem /tmp",
+			);
+		}
+		return {
+			name,
+			type,
+			command: targetArgs.map(quoteCommandArg).join(" "),
+		};
+	}
+
+	if (targetArgs.length !== 1) {
+		throw new Error(
+			"Remote MCP install requires exactly one URL argument after the server name.",
+		);
+	}
+	const url = targetArgs[0]?.trim() ?? "";
+	assertValidUrl(url);
+	return {
+		name,
+		type,
+		url,
+	};
+}
+
+async function runPrefilledWizard(defaults: McpAddDefaults): Promise<number> {
+	const { runMcpWizard } = await import("../wizards/mcp");
+	return runMcpWizard({
+		initialAction: "add",
+		addDefaults: defaults,
+		exitAfterInitialAction: true,
+	});
+}
+
+export async function runMcpInstallCommand(
+	options: McpInstallOptions,
+): Promise<number> {
+	try {
+		const isTty =
+			options.isTty ?? (process.stdin.isTTY && process.stdout.isTTY);
+		if (!isTty) {
+			throw new Error(
+				"cline mcp install opens the MCP wizard and requires a TTY.",
+			);
+		}
+		const defaults = buildMcpInstallDefaults(options);
+		return await (options.runWizard ?? runPrefilledWizard)(defaults);
+	} catch (error) {
+		const message = error instanceof Error ? error.message : String(error);
+		options.io?.writeErr(message);
+		return 1;
+	}
+}

apps/cli/src/commands/plugin.ts

@@ -1207,12 +1207,10 @@ function serializePluginInstallResult(
 	};
 }
 
-function isInteractivePluginInstall(
-	options: PluginInstallOptions & { json?: boolean },
-): boolean {
+function isInteractivePluginInstall(options: PluginInstallOptions): boolean {
 	return (
 		options.mcpOAuth?.interactive ??
-		(options.json !== true && process.stdin.isTTY && process.stdout.isTTY)
+		(process.stdin.isTTY && process.stdout.isTTY)
 	);
 }
 
@@ -1268,14 +1266,16 @@ async function authorizeMcpOAuthCandidate(
 	const { authorizeMcpServerOAuthWithBrowser } = await import(
 		"../wizards/mcp/oauth"
 	);
-	await authorizeMcpServerOAuthWithBrowser(candidate.name);
+	await authorizeMcpServerOAuthWithBrowser(candidate.name, {
+		throwOnError: true,
+	});
 }
 
 async function runPluginMcpOAuthFollowup(
 	candidates: PluginMcpOAuthCandidate[],
-	options: PluginInstallOptions & { json?: boolean },
+	options: PluginInstallOptions,
 ): Promise<void> {
-	if (candidates.length === 0 || options.json === true) {
+	if (candidates.length === 0) {
 		return;
 	}
 
@@ -1303,7 +1303,7 @@ async function runPluginMcpOAuthFollowup(
 		} catch (error) {
 			const message = error instanceof Error ? error.message : String(error);
 			options.io?.writeErr(
-				`Warning: failed to authorize MCP server ${candidate.name}: ${message}`,
+				`Warning: failed to authorize MCP server ${candidate.name}: ${message}. Run "cline mcp" and choose "Authorize OAuth" to retry.`,
 			);
 		}
 	}

apps/cli/src/commands/program.ts

@@ -116,7 +116,6 @@ export function createProgram(): Command {
 			writeOut: () => {}, // suppress by default; main.ts re-enables for routing
 			writeErr: () => {},
 		})
-		.allowUnknownOption()
 		.allowExcessArguments()
 		.enablePositionalOptions()
 		.argument(

apps/cli/src/commands/skill.test.ts

@@ -0,0 +1,88 @@
+import { describe, expect, it } from "vitest";
+import { buildSkillsArgs } from "./skill";
+
+describe("buildSkillsArgs", () => {
+	it("runs the skills package through npx with -y", () => {
+		expect(buildSkillsArgs(["list"])).toEqual(["-y", "skills@latest", "list"]);
+	});
+
+	it("injects --agent cline for install-style subcommands", () => {
+		expect(buildSkillsArgs(["install", "owner/repo"])).toEqual([
+			"-y",
+			"skills@latest",
+			"add",
+			"owner/repo",
+			"--agent",
+			"cline",
+		]);
+		expect(buildSkillsArgs(["add", "owner/repo"])).toContain("cline");
+		expect(buildSkillsArgs(["i", "owner/repo"])).toContain("cline");
+		expect(buildSkillsArgs(["update", "owner/repo"])).toContain("cline");
+	});
+
+	it("aliases uninstall to the skills remove subcommand", () => {
+		expect(buildSkillsArgs(["uninstall", "my-skill"])).toEqual([
+			"-y",
+			"skills@latest",
+			"remove",
+			"my-skill",
+			"--agent",
+			"cline",
+		]);
+	});
+
+	it("does not inject when the user already targeted an agent", () => {
+		expect(
+			buildSkillsArgs(["install", "owner/repo", "--agent", "cursor"]),
+		).not.toContain("cline");
+		expect(
+			buildSkillsArgs(["install", "owner/repo", "-a", "cursor"]),
+		).not.toContain("cline");
+		expect(
+			buildSkillsArgs(["install", "owner/repo", "--agent=cursor"]),
+		).not.toContain("cline");
+	});
+
+	it("aliases install and uninstall when agent options come before the subcommand", () => {
+		expect(
+			buildSkillsArgs(["--agent", "cursor", "install", "owner/repo"]),
+		).toEqual([
+			"-y",
+			"skills@latest",
+			"--agent",
+			"cursor",
+			"add",
+			"owner/repo",
+		]);
+		expect(
+			buildSkillsArgs(["--agent=cursor", "uninstall", "my-skill"]),
+		).toEqual(["-y", "skills@latest", "--agent=cursor", "remove", "my-skill"]);
+	});
+
+	it("does not scope non-install subcommands to cline", () => {
+		expect(buildSkillsArgs(["use", "owner/repo"])).not.toContain("--agent");
+		expect(buildSkillsArgs(["list"])).not.toContain("--agent");
+	});
+
+	it("scopes remove-style subcommands to cline", () => {
+		expect(buildSkillsArgs(["remove"])).toEqual([
+			"-y",
+			"skills@latest",
+			"remove",
+			"--agent",
+			"cline",
+		]);
+		expect(buildSkillsArgs(["rm", "my-skill"])).toContain("cline");
+		expect(buildSkillsArgs(["r", "my-skill"])).toContain("cline");
+	});
+
+	it("ignores leading flags when detecting the subcommand", () => {
+		expect(buildSkillsArgs(["--global", "install", "owner/repo"])).toContain(
+			"cline",
+		);
+	});
+
+	it("forwards an empty arg list unchanged", () => {
+		expect(buildSkillsArgs([])).toEqual(["-y", "skills@latest"]);
+	});
+});

apps/cli/src/commands/skill.ts

@@ -0,0 +1,160 @@
+import { type SpawnOptions, spawn } from "node:child_process";
+
+export interface SkillCommandIo {
+	writeln: (text?: string) => void;
+	writeErr: (text: string) => void;
+}
+
+// `cline skill` is a thin wrapper around the open skills CLI
+// (https://www.npmjs.com/package/skills). We run it through `npx` so users
+// don't need a separate global install. Pin the version here if we ever need to
+// lock behavior to a known-good release.
+const SKILLS_PACKAGE = "skills@latest";
+
+// Subcommands that write skill files into an agent's skills directory. For a
+// `cline skill` command we default these to Cline unless the user picked their
+// own agent. `use` is intentionally excluded: without --agent it prints the
+// generated prompt to stdout, whereas adding --agent would launch that agent
+// interactively instead — not what someone scoping to Cline would expect.
+const CLINE_SCOPED_SUBCOMMANDS = new Set([
+	"add",
+	"install",
+	"i",
+	"update",
+	"remove",
+	"rm",
+	"r",
+	"uninstall",
+]);
+
+const SKILLS_SUBCOMMAND_ALIASES = new Map([
+	["install", "add"],
+	["uninstall", "remove"],
+]);
+
+function hasAgentFlag(args: readonly string[]): boolean {
+	return args.some(
+		(arg) => arg === "-a" || arg === "--agent" || arg.startsWith("--agent="),
+	);
+}
+
+function optionConsumesNextValue(arg: string): boolean {
+	return arg === "-a" || arg === "--agent";
+}
+
+function findSubcommandIndex(args: readonly string[]): number {
+	for (let index = 0; index < args.length; index++) {
+		const arg = args[index];
+		if (arg.startsWith("-")) {
+			if (optionConsumesNextValue(arg)) {
+				index++;
+			}
+			continue;
+		}
+		return index;
+	}
+	return -1;
+}
+
+function findSubcommand(args: readonly string[]): string | undefined {
+	const index = findSubcommandIndex(args);
+	return index >= 0 ? args[index] : undefined;
+}
+
+function normalizeSkillsSubcommandAliases(args: string[]): void {
+	const index = findSubcommandIndex(args);
+	if (index < 0) return;
+	const alias = SKILLS_SUBCOMMAND_ALIASES.get(args[index]);
+	if (alias) {
+		args[index] = alias;
+	}
+}
+
+/**
+ * Build the argument list passed to `npx`, injecting `--agent cline` for
+ * install-style subcommands unless the user already targeted an agent.
+ */
+export function buildSkillsArgs(userArgs: readonly string[]): string[] {
+	const args = [...userArgs];
+	const subcommand = findSubcommand(args);
+	normalizeSkillsSubcommandAliases(args);
+	if (
+		subcommand &&
+		CLINE_SCOPED_SUBCOMMANDS.has(subcommand) &&
+		!hasAgentFlag(args)
+	) {
+		args.push("--agent", "cline");
+	}
+	return ["-y", SKILLS_PACKAGE, ...args];
+}
+
+function resolveExitCode(
+	code: number | null,
+	signal: NodeJS.Signals | null,
+): number {
+	if (code !== null) {
+		return code;
+	}
+	switch (signal) {
+		case "SIGINT":
+			return 130;
+		case "SIGTERM":
+			return 143;
+		default:
+			return 1;
+	}
+}
+
+/**
+ * Forward all arguments to the open skills CLI via `npx skills`.
+ *
+ * Returns the child process exit code, or 1 if npx is unavailable or fails to
+ * spawn. stdio is inherited so the skills CLI's interactive prompts and output
+ * pass straight through to the user's terminal.
+ */
+export async function runSkillCommand(
+	userArgs: readonly string[],
+	io: SkillCommandIo,
+): Promise<number> {
+	const args = buildSkillsArgs(userArgs);
+	const isWindows = process.platform === "win32";
+	const options: SpawnOptions = {
+		stdio: "inherit",
+		env: process.env,
+		// Prevent a console window from flashing on Windows.
+		windowsHide: true,
+		...(isWindows ? { shell: true } : {}),
+	};
+
+	return new Promise<number>((resolve) => {
+		const child = spawn("npx", args, options);
+
+		const forward = (signal: NodeJS.Signals) => {
+			child.kill(signal);
+		};
+		const handleSigint = () => forward("SIGINT");
+		const handleSigterm = () => forward("SIGTERM");
+		process.on("SIGINT", handleSigint);
+		process.on("SIGTERM", handleSigterm);
+		const cleanup = () => {
+			process.off("SIGINT", handleSigint);
+			process.off("SIGTERM", handleSigterm);
+		};
+
+		child.once("error", (error: NodeJS.ErrnoException) => {
+			cleanup();
+			if (error.code === "ENOENT") {
+				io.writeErr(
+					'npx was not found. Install Node.js (which includes npx) to use "cline skill".',
+				);
+			} else {
+				io.writeErr(`Failed to run npx ${SKILLS_PACKAGE}: ${error.message}`);
+			}
+			resolve(1);
+		});
+		child.once("close", (code, signal) => {
+			cleanup();
+			resolve(resolveExitCode(code, signal));
+		});
+	});
+}

apps/cli/src/connectors/catalog.ts

@@ -1,36 +1,2 @@
-export type ConnectorCatalogEntry = {
-	name: string;
-	description: string;
-};
-
-export const CONNECTOR_CATALOG: ConnectorCatalogEntry[] = [
-	{
-		name: "discord",
-		description:
-			"Discord interactions and gateway bridge backed by RPC runtime sessions",
-	},
-	{
-		name: "gchat",
-		description: "Google Chat webhook bridge backed by RPC runtime sessions",
-	},
-	{
-		name: "linear",
-		description: "Linear webhook bridge backed by RPC runtime sessions",
-	},
-	{
-		name: "slack",
-		description: "Slack webhook/socket bridge backed by RPC runtime sessions",
-	},
-	{
-		name: "telegram",
-		description: "Bridge Telegram bot messages into RPC chat sessions",
-	},
-	{
-		name: "whatsapp",
-		description: "Bridge WhatsApp webhook messages into RPC chat sessions",
-	},
-];
-
-export function listConnectorCatalog(): ConnectorCatalogEntry[] {
-	return CONNECTOR_CATALOG.map((entry) => ({ ...entry }));
-}
+export type { ConnectorCatalogEntry } from "@cline/shared";
+export { CONNECTOR_CATALOG, listConnectorCatalog } from "@cline/shared";

apps/cli/src/connectors/session-runtime.test.ts

@@ -125,12 +125,12 @@ describe("buildConnectorStartRequest", () => {
 			io: { writeln: vi.fn(), writeErr: vi.fn() },
 			loggerConfig: { enabled: false, level: "info", destination: "stdout" },
 			systemRules: "Rules",
-			defaultModel: "cline-pass/glm-5.1",
+			defaultModel: "cline-pass/glm-5.2",
 		});
 
 		expect(request.provider).toBe("cline-pass");
 		expect(request.apiKey).toBe("workos:resolved-token");
-		expect(request.model).toBe("cline-pass/glm-5.1");
+		expect(request.model).toBe("cline-pass/glm-5.2");
 	});
 
 	it("uses auth material resolved by provider settings manager", async () => {
@@ -153,11 +153,11 @@ describe("buildConnectorStartRequest", () => {
 			io: { writeln: vi.fn(), writeErr: vi.fn() },
 			loggerConfig: { enabled: false, level: "info", destination: "stdout" },
 			systemRules: "Rules",
-			defaultModel: "cline-pass/glm-5.1",
+			defaultModel: "cline-pass/glm-5.2",
 		});
 
 		expect(request.provider).toBe("cline-pass");
 		expect(request.apiKey).toBe("workos:resolved-token");
-		expect(request.model).toBe("cline-pass/glm-5.1");
+		expect(request.model).toBe("cline-pass/glm-5.2");
 	});
 });

apps/cli/src/main.test.ts

@@ -114,6 +114,7 @@ const telemetryMocks = vi.hoisted(() => ({
 }));
 const featureFlagMocks = vi.hoisted(() => ({
 	getBooleanFlagEnabled: vi.fn(() => false),
+	setCliFeatureFlagsAccountContext: vi.fn(),
 }));
 
 function forcePromptModeInput() {
@@ -179,6 +180,8 @@ vi.mock("./utils/feature-flags", () => ({
 		getBooleanFlagEnabled: featureFlagMocks.getBooleanFlagEnabled,
 	}),
 	refreshCliFeatureFlagsInBackground: vi.fn(),
+	setCliFeatureFlagsAccountContext:
+		featureFlagMocks.setCliFeatureFlagsAccountContext,
 }));
 vi.mock("./runtime/prompt", () => ({
 	resolveSystemPrompt: promptMocks.resolveSystemPrompt,
@@ -252,6 +255,9 @@ describe("runCli lightweight command dispatch", () => {
 		providerSettingsMocks.getProviderSettings.mockReset();
 		providerSettingsMocks.getProviderSettings.mockReturnValue(undefined);
 		providerSettingsMocks.saveProviderSettings.mockReset();
+		featureFlagMocks.getBooleanFlagEnabled.mockReset();
+		featureFlagMocks.getBooleanFlagEnabled.mockReturnValue(false);
+		featureFlagMocks.setCliFeatureFlagsAccountContext.mockReset();
 		kanbanMocks.launchKanban.mockReset();
 		kanbanMocks.launchKanban.mockResolvedValue(0);
 		dashboardMocks.runDashboardCommand.mockReset();
@@ -411,6 +417,61 @@ describe("runCli lightweight command dispatch", () => {
 		expect(mockState.runInteractiveImports).toBe(0);
 	});
 
+	it("rejects multiple bare positional prompt tokens", async () => {
+		const consoleError = vi
+			.spyOn(console, "error")
+			.mockImplementation(() => undefined);
+		forcePromptModeInput();
+		process.argv = ["bun", "src/index.ts", "hello", "world"];
+
+		const { runCli } = await import("./main");
+
+		await expect(runCli()).resolves.toBeUndefined();
+		expect(process.exitCode).toBe(1);
+		expect(consoleError).toHaveBeenCalledWith(
+			expect.stringContaining(
+				"Unknown command or extra arguments: hello world",
+			),
+		);
+		expect(runtimeMocks.runAgent).not.toHaveBeenCalled();
+		expect(mockState.runAgentImports).toBe(0);
+		expect(mockState.runInteractiveImports).toBe(0);
+	});
+
+	it("runs quoted positional prompt text", async () => {
+		forcePromptModeInput();
+		process.argv = ["bun", "src/index.ts", "hello world"];
+
+		const { runCli } = await import("./main");
+
+		await expect(runCli()).resolves.toBeUndefined();
+		expect(runtimeMocks.runAgent).toHaveBeenCalledTimes(1);
+		expect(runtimeMocks.runAgent).toHaveBeenCalledWith(
+			"hello world",
+			expect.any(Object),
+			expect.anything(),
+		);
+	});
+
+	it("rejects unknown root flags before loading runtime modules", async () => {
+		const consoleError = vi
+			.spyOn(console, "error")
+			.mockImplementation(() => undefined);
+		forcePromptModeInput();
+		process.argv = ["bun", "src/index.ts", "--made-up-flag"];
+
+		const { runCli } = await import("./main");
+
+		await expect(runCli()).resolves.toBeUndefined();
+		expect(process.exitCode).toBe(1);
+		expect(consoleError).toHaveBeenCalledWith(
+			expect.stringContaining("unknown option '--made-up-flag'"),
+		);
+		expect(runtimeMocks.runAgent).not.toHaveBeenCalled();
+		expect(mockState.runAgentImports).toBe(0);
+		expect(mockState.runInteractiveImports).toBe(0);
+	});
+
 	it("creates a worktree and runs prompt sessions from it", async () => {
 		forcePromptModeInput();
 		process.argv = ["bun", "src/index.ts", "--worktree", "hello"];
@@ -857,6 +918,33 @@ describe("runCli lightweight command dispatch", () => {
 		);
 	});
 
+	it("seeds feature flag identity from persisted Cline account id before checking flags", async () => {
+		const clineSettings = {
+			provider: "cline",
+			model: "anthropic/claude-sonnet-4.6",
+			auth: {
+				accountId: "acct-startup",
+				accessToken: "workos:token",
+				refreshToken: "refresh-token",
+			},
+		};
+		providerSettingsMocks.getProviderSettings.mockReturnValue(clineSettings);
+		process.argv = ["bun", "src/index.ts"];
+
+		const { runCli } = await import("./main");
+
+		await expect(runCli()).resolves.toBeUndefined();
+		expect(
+			featureFlagMocks.setCliFeatureFlagsAccountContext,
+		).toHaveBeenCalledWith({ id: "acct-startup" });
+		expect(
+			featureFlagMocks.setCliFeatureFlagsAccountContext.mock
+				.invocationCallOrder[0],
+		).toBeLessThan(
+			featureFlagMocks.getBooleanFlagEnabled.mock.invocationCallOrder[0],
+		);
+	});
+
 	it("runs kanban before loading runtime modules", async () => {
 		process.argv = ["bun", "src/index.ts", "kanban"];
 
@@ -874,6 +962,10 @@ describe("runCli lightweight command dispatch", () => {
 			"bun",
 			"src/index.ts",
 			"dashboard",
+			"--config",
+			"/tmp/cline-config",
+			"--data-dir",
+			".cline-dashboard-data",
 			"--port",
 			"9090",
 			"--no-open",
@@ -884,6 +976,8 @@ describe("runCli lightweight command dispatch", () => {
 		await expect(runCli()).resolves.toBeUndefined();
 		expect(dashboardMocks.runDashboardCommand).toHaveBeenCalledWith(
 			expect.objectContaining({
+				configDir: "/tmp/cline-config",
+				dataDir: ".cline-dashboard-data",
 				port: "9090",
 				openBrowser: false,
 				io: expect.any(Object),
@@ -932,7 +1026,7 @@ describe("runCli lightweight command dispatch", () => {
 		runtimeMocks.runAgent.mockClear();
 
 		forcePromptModeInput();
-		process.argv = ["bun", "src/index.ts", "/team", "find", "the", "bug"];
+		process.argv = ["bun", "src/index.ts", "/team find the bug"];
 
 		const { runCli } = await import("./main");
 

apps/cli/src/main.ts

@@ -22,6 +22,7 @@ import {
 import {
 	getCliFeatureFlagsService,
 	refreshCliFeatureFlagsInBackground,
+	setCliFeatureFlagsAccountContext,
 } from "./utils/feature-flags";
 import {
 	configureSandboxEnvironment,
@@ -139,7 +140,7 @@ export async function runCli(): Promise<void> {
 	// Re-enable built-in help/version output for the routing program
 	program.configureOutput({
 		writeOut: (str: string) => process.stdout.write(str),
-		writeErr: (str: string) => process.stderr.write(str),
+		writeErr: () => {},
 	});
 	// Default action handles non-subcommand args (e.g. prompt text)
 	program.action(() => {});
@@ -315,6 +316,28 @@ export async function runCli(): Promise<void> {
 				io,
 			});
 		});
+	const skillCmd = program
+		.command("skill")
+		.description("Manage Cline Skills via the open skills CLI (npx skills)")
+		.allowUnknownOption()
+		.passThroughOptions()
+		.argument("[args...]", "arguments forwarded to the skills CLI")
+		.addHelpText(
+			"after",
+			"\nForwards to the open skills CLI via npx. Examples:\n" +
+				"  cline skill add <owner/repo>       Add a skill into Cline\n" +
+				"  cline skill install <owner/repo>   Alias for add\n" +
+				"  cline skill list                   List installed skills\n" +
+				"  cline skill remove                 Remove installed skills\n" +
+				"  cline skill uninstall              Alias for remove\n" +
+				"\nadd/install and remove/uninstall default to '--agent cline' unless you pass your own --agent.\n" +
+				"Run 'npx skills --help' for the full command reference.",
+		)
+		.action(async () => {
+			const { runSkillCommand } = await import("./commands/skill");
+			ctx.exitCode = await runSkillCommand(skillCmd.args, io);
+		});
+
 	const connectCmd = program
 		.command("connect")
 		.description("Connect to an external channel")
@@ -356,7 +379,7 @@ export async function runCli(): Promise<void> {
 			}
 		});
 
-	program
+	const mcpCmd = program
 		.command("mcp")
 		.description("Manage MCP servers")
 		.action(async () => {
@@ -368,6 +391,31 @@ export async function runCli(): Promise<void> {
 				);
 			}
 		});
+	const mcpInstallCmd = mcpCmd
+		.command("install")
+		.alias("add")
+		.description("Open the MCP add wizard with server fields prefilled")
+		.argument("<name>", "MCP server name")
+		.argument(
+			"[targetArgs...]",
+			"URL for remote transports, or command and args after -- for stdio",
+		)
+		.option(
+			"--transport <transport>",
+			"stdio, sse, http, streamable-http, or streamableHttp (default: stdio)",
+		)
+		.action(async (name: string, targetArgs: string[]) => {
+			const opts = mcpInstallCmd.opts<{
+				transport?: string;
+			}>();
+			const { runMcpInstallCommand } = await import("./commands/mcp");
+			ctx.exitCode = await runMcpInstallCommand({
+				name,
+				targetArgs,
+				transport: opts.transport,
+				io,
+			});
+		});
 
 	const createDoctorRuntimeCommand = async () => {
 		const { createDoctorCommand } = await import("./commands/doctor");
@@ -548,7 +596,12 @@ export async function runCli(): Promise<void> {
 	const dashboardCmd = program
 		.command("dashboard")
 		.description("Start the Cline Hub dashboard and open it in a browser")
+		.option("--config <dir>", "configuration directory")
 		.option("-c, --cwd <path>", "Workspace root", process.cwd())
+		.option(
+			"--data-dir <dir>",
+			"Use isolated local state at <dir> instead of ~/.cline (enables sandbox mode)",
+		)
 		.option("--host <host>", "Dashboard bind host")
 		.option("--port <port>", "Dashboard HTTP/WebSocket port")
 		.option("--public-url <url>", "Public dashboard URL")
@@ -556,7 +609,9 @@ export async function runCli(): Promise<void> {
 		.option("--no-open", "Start the dashboard without opening a browser")
 		.action(async () => {
 			const opts = dashboardCmd.opts<{
+				config?: string;
 				cwd?: string;
+				dataDir?: string;
 				host?: string;
 				port?: string;
 				publicUrl?: string;
@@ -565,7 +620,9 @@ export async function runCli(): Promise<void> {
 			}>();
 			const { runDashboardCommand } = await import("./commands/dashboard");
 			ctx.exitCode = await runDashboardCommand({
+				configDir: opts.config,
 				cwd: opts.cwd,
+				dataDir: opts.dataDir,
 				host: opts.host,
 				port: opts.port,
 				publicUrl: opts.publicUrl,
@@ -614,6 +671,7 @@ export async function runCli(): Promise<void> {
 		if (err instanceof CommanderError) {
 			if (err.exitCode !== 0) {
 				writeErr(err.message);
+				process.exitCode = err.exitCode;
 				return;
 			}
 			return;
@@ -664,6 +722,13 @@ export async function runCli(): Promise<void> {
 
 	// Default flow: no subcommand matched, or fall-through from config/history.
 	let args = commanderToParsedArgs(program);
+	if (program.args.length > 1) {
+		writeErr(
+			`Unknown command or extra arguments: ${program.args.join(" ")}\nPrompt text with spaces must be quoted as a single argument, for example: cline "fix the tests". Use "cline --help" to see available commands and flags.`,
+		);
+		process.exitCode = 1;
+		return;
+	}
 
 	let resumeSessionId: string | undefined = ctx.resumeSessionId;
 	if (resumeSessionId) {
@@ -855,6 +920,12 @@ export async function runCli(): Promise<void> {
 	};
 	registerDisposable(stopUserInstructionService);
 	try {
+		const persistedClineAccountId = providerSettingsManager
+			.getProviderSettings("cline")
+			?.auth?.accountId?.trim();
+		if (persistedClineAccountId) {
+			setCliFeatureFlagsAccountContext({ id: persistedClineAccountId });
+		}
 		refreshCliFeatureFlagsInBackground();
 		const lastUsedProviderSettings =
 			providerSettingsManager.getLastUsedProviderSettings({

apps/cli/src/runtime/interactive/approvals.test.ts

@@ -61,6 +61,20 @@ describe("createInteractiveApprovalController", () => {
 		).resolves.toEqual({ approved: false, reason: "no" });
 	});
 
+	it("approves stale required-approval requests after auto-approve is enabled", async () => {
+		const controller = createInteractiveApprovalController(makeConfig(false));
+		controller.tuiToolApprover.current = async () => ({
+			approved: false,
+			reason: "stale prompt",
+		});
+
+		controller.setInteractiveAutoApprove(true);
+
+		await expect(
+			controller.requestToolApproval(makeRequest({ autoApprove: false })),
+		).resolves.toEqual({ approved: true });
+	});
+
 	it("denies approval-required requests when no TUI approver is available", async () => {
 		const controller = createInteractiveApprovalController(makeConfig(false));
 
@@ -77,6 +91,7 @@ describe("createInteractiveApprovalController", () => {
 
 		expect(controller.autoApproveAllRef.current).toBe(true);
 		expect(config.defaultToolAutoApprove).toBe(false);
-		expect(config.toolPolicies["*"]?.autoApprove).toBe(false);
+		expect(config.toolPolicies["*"]?.autoApprove).toBe(true);
+		expect(controller.resolveToolPolicy("run_commands").autoApprove).toBe(true);
 	});
 });

apps/cli/src/runtime/interactive/approvals.ts

@@ -3,6 +3,7 @@ import type { Config } from "../../utils/types";
 import {
 	applyInteractiveAutoApproveOverride,
 	cloneToolPolicies,
+	resolveInteractiveAutoApprovePolicy,
 } from "../tool-policies";
 
 export interface InteractiveRuntimeRefs {
@@ -38,10 +39,10 @@ export function createInteractiveApprovalController(config: Config) {
 	const requestToolApproval = async (
 		request: ToolApprovalRequest,
 	): Promise<ToolApprovalResult> => {
-		if (request.policy?.autoApprove === true) {
+		if (autoApproveAllRef.current) {
 			return { approved: true };
 		}
-		if (autoApproveAllRef.current && request.policy?.autoApprove !== false) {
+		if (request.policy?.autoApprove === true) {
 			return { approved: true };
 		}
 		if (refs.tuiToolApprover.current) {
@@ -54,6 +55,12 @@ export function createInteractiveApprovalController(config: Config) {
 		autoApproveAllRef,
 		setInteractiveAutoApprove,
 		requestToolApproval,
+		resolveToolPolicy: (toolName: string) =>
+			resolveInteractiveAutoApprovePolicy({
+				toolName,
+				baselinePolicies: baselineToolPolicies,
+				enabled: autoApproveAllRef.current,
+			}),
 		...refs,
 	};
 }

apps/cli/src/runtime/interactive/session-runtime.test.ts

@@ -152,7 +152,10 @@ function deferred<T>() {
 
 function makeRuntime(
 	manager: ReturnType<typeof makeManager>,
-	options: { resumeSessionId?: string } = {},
+	options: {
+		resumeSessionId?: string;
+		resolveToolPolicy?: (toolName: string) => Config["toolPolicies"][string];
+	} = {},
 ) {
 	mockCreateCliCore.mockResolvedValue(manager);
 	const config = makeConfig();
@@ -164,6 +167,8 @@ function makeRuntime(
 		requestToolApproval: async (
 			_request: ToolApprovalRequest,
 		): Promise<ToolApprovalResult> => ({ approved: true }),
+		resolveToolPolicy:
+			options.resolveToolPolicy ?? (() => ({ autoApprove: true })),
 		askQuestionRef: { current: null },
 		resolveMistakeLimitDecision: undefined,
 		switchToActModeTool: makeSwitchToActModeTool(),
@@ -205,6 +210,68 @@ describe("createInteractiveSessionRuntime", () => {
 		expect(runtime.getActiveSessionId()).toBe("session-2");
 	});
 
+	it("adds a live interactive approval policy hook to started sessions", async () => {
+		const manager = makeManager();
+		const upstreamBeforeTool = vi.fn(async () => ({
+			input: { text: "updated" },
+		}));
+		mockCreateRuntimeHooks.mockReturnValueOnce({
+			hooks: {
+				beforeTool: upstreamBeforeTool,
+			},
+			shutdown: vi.fn(async () => {}),
+		});
+		const runtime = makeRuntime(manager, {
+			resolveToolPolicy: (toolName) => ({
+				autoApprove: toolName === "echo",
+			}),
+		});
+
+		await runtime.ensureReady();
+
+		const startInput = manager.start.mock.calls[0]?.[0] as
+			| { config?: Config }
+			| undefined;
+		const beforeTool = startInput?.config?.hooks?.beforeTool;
+		expect(beforeTool).toBeTypeOf("function");
+
+		const result = await beforeTool?.({
+			snapshot: {
+				agentId: "agent-1",
+				conversationId: "conversation-1",
+				status: "running",
+				iteration: 1,
+				messages: [],
+				pendingToolCalls: [],
+				usage: {
+					inputTokens: 0,
+					outputTokens: 0,
+					cacheReadTokens: 0,
+					cacheWriteTokens: 0,
+				},
+			},
+			tool: {
+				name: "echo",
+				description: "",
+				inputSchema: {},
+				execute: async () => "ok",
+			},
+			toolCall: {
+				type: "tool-call",
+				toolCallId: "call-1",
+				toolName: "echo",
+				input: { text: "original" },
+			},
+			input: { text: "original" },
+		});
+
+		expect(upstreamBeforeTool).toHaveBeenCalledOnce();
+		expect(result).toEqual({
+			input: { text: "updated" },
+			policy: { autoApprove: true },
+		});
+	});
+
 	it("starts fresh after resetting an initially resumed session", async () => {
 		const manager = makeManager();
 		const runtime = makeRuntime(manager, {

apps/cli/src/runtime/interactive/session-runtime.ts

@@ -1,5 +1,6 @@
 import {
 	type AgentEvent,
+	type AgentHooks,
 	type CheckpointEntry,
 	isSessionNotFoundError,
 	type PendingPromptMutationResult,
@@ -48,6 +49,32 @@ type CurrentTurnResult = Awaited<ReturnType<CliCore["send"]>>;
 type AskQuestionRef = {
 	current: ((question: string, options: string[]) => Promise<string>) | null;
 };
+type ToolPolicyResolver = (
+	toolName: string,
+) => NonNullable<Config["toolPolicies"]>[string];
+
+function withInteractiveApprovalPolicyHook(
+	hooks: AgentHooks | undefined,
+	resolveToolPolicy: ToolPolicyResolver,
+): AgentHooks {
+	return {
+		...hooks,
+		beforeTool: async (ctx) => {
+			const result = await hooks?.beforeTool?.(ctx);
+			if (result?.stop || result?.skip) {
+				return result;
+			}
+			const policy = resolveToolPolicy(ctx.toolCall.toolName);
+			return {
+				...result,
+				policy: {
+					...result?.policy,
+					autoApprove: policy.autoApprove,
+				},
+			};
+		},
+	};
+}
 
 export function createInteractiveSessionRuntime(input: {
 	config: Config;
@@ -58,6 +85,7 @@ export function createInteractiveSessionRuntime(input: {
 	requestToolApproval: (
 		request: ToolApprovalRequest,
 	) => Promise<ToolApprovalResult>;
+	resolveToolPolicy: ToolPolicyResolver;
 	askQuestionRef: AskQuestionRef;
 	resolveMistakeLimitDecision: Config["onConsecutiveMistakeLimitReached"];
 	switchToActModeTool: NonNullable<Config["extraTools"]>[number];
@@ -152,10 +180,14 @@ export function createInteractiveSessionRuntime(input: {
 		if (!runtimeHooks) {
 			throw new Error("interactive runtime hooks are unavailable");
 		}
+		const hooks = withInteractiveApprovalPolicyHook(
+			runtimeHooks.hooks,
+			input.resolveToolPolicy,
+		);
 		return buildInteractiveSessionConfig({
 			config: input.config,
 			chatCommandState: input.chatCommandState,
-			runtimeHooks,
+			runtimeHooks: { hooks },
 			onTeamEvent: input.onTeamEvent,
 			resolveMistakeLimitDecision: input.resolveMistakeLimitDecision,
 		});

apps/cli/src/runtime/run-agent.test.ts

@@ -27,7 +27,41 @@ const outputMocks = vi.hoisted(() => ({
 	c: { dim: "", reset: "" },
 }));
 
+const sessionEventsMocks = vi.hoisted(() => ({
+	listener: undefined as ((event: unknown) => void) | undefined,
+	subscribeToAgentEvents: vi.fn(
+		(_: unknown, listener: (event: unknown) => void) => {
+			sessionEventsMocks.listener = listener;
+			return () => {};
+		},
+	),
+}));
+
+const CLINE_PASS_SUBSCRIPTION_URL =
+	"https://app.cline.bot/dashboard/subscription?personal=true";
+const CLINE_PASS_SUBSCRIPTION_MESSAGE = `No access to ClinePass subscription models yet. Subscribe to ClinePass, the low cost open weights model coding plan: ${CLINE_PASS_SUBSCRIPTION_URL}`;
+const CLINE_ORG_INDIVIDUAL_INFERENCE_SUBSCRIPTION_MESSAGE =
+	"Organization accounts cannot use ClinePass subscriptions. Go to /account -> change account to switch to your personal account for ClinePass";
+
 vi.mock("@cline/core", () => ({
+	getClineOrgIndividualInferenceSubscriptionMessage: () =>
+		CLINE_ORG_INDIVIDUAL_INFERENCE_SUBSCRIPTION_MESSAGE,
+	getClinePassSubscriptionUrl: () => CLINE_PASS_SUBSCRIPTION_URL,
+	isClineNotSubscribedError: (error: unknown) =>
+		error instanceof Error && error.name === "ClineNotSubscribedError",
+	isClineNotSubscribedMessage: (text: string) =>
+		text
+			.toLowerCase()
+			.includes("the user is not subscribed to required model plan"),
+	isClineOrgIndividualInferenceSubscriptionError: (error: unknown) =>
+		error instanceof Error &&
+		error.name === "ClineOrgIndividualInferenceSubscriptionError",
+	isClineOrgIndividualInferenceSubscriptionMessage: (text: string) =>
+		text
+			.toLowerCase()
+			.includes(
+				"organization accounts cannot use individual model inference subscriptions",
+			),
 	prewarmFileIndex: vi.fn(async () => undefined),
 	SessionSource: {
 		CLI: "cli",
@@ -77,7 +111,7 @@ vi.mock("./prompt", () => ({
 }));
 
 vi.mock("./session-events", () => ({
-	subscribeToAgentEvents: vi.fn(() => () => {}),
+	subscribeToAgentEvents: sessionEventsMocks.subscribeToAgentEvents,
 }));
 
 describe("runAgent", () => {
@@ -101,6 +135,9 @@ describe("runAgent", () => {
 		outputMocks.writeln.mockReset();
 		outputMocks.emitJsonLine.mockReset();
 		outputMocks.setActiveCliSession.mockReset();
+		sessionEventsMocks.listener = undefined;
+		sessionEventsMocks.subscribeToAgentEvents.mockClear();
+		vi.unstubAllGlobals();
 	});
 
 	afterEach(() => {
@@ -511,6 +548,39 @@ describe("runAgent", () => {
 		expect(outputMocks.writeErr).toHaveBeenCalledWith("Missing API key");
 	});
 
+	it("renders ClinePass subscription errors with friendly copy when startup throws", async () => {
+		const error = new Error(CLINE_PASS_SUBSCRIPTION_MESSAGE);
+		error.name = "ClineNotSubscribedError";
+		sessionManagerMocks.start.mockRejectedValue(error);
+
+		const { runAgent } = await import("./run-agent");
+
+		await expect(
+			runAgent("test prompt", {
+				cwd: process.cwd(),
+				enableAgentTeams: false,
+				enableSpawnAgent: false,
+				enableTools: [],
+				execution: { maxConsecutiveMistakes: 3 },
+				logger: undefined,
+				mode: "yolo",
+				modelId: "premium-model",
+				outputMode: "text",
+				providerId: "cline-pass",
+				systemPrompt: "system",
+				thinking: false,
+				toolPolicies: { "*": { autoApprove: true } },
+				verbose: false,
+				workspaceRoot: process.cwd(),
+			} as never),
+		).resolves.toBeUndefined();
+
+		expect(process.exitCode).toBe(1);
+		expect(outputMocks.writeErr).toHaveBeenCalledWith(
+			CLINE_PASS_SUBSCRIPTION_MESSAGE,
+		);
+	});
+
 	it("emits JSON error lines for non-completed results", async () => {
 		const startedAt = new Date("2026-03-22T00:00:00.000Z");
 		const endedAt = new Date("2026-03-22T00:00:01.000Z");
@@ -576,6 +646,63 @@ describe("runAgent", () => {
 		);
 	});
 
+	it("renders ClinePass subscription errors with friendly copy for failed results", async () => {
+		const startedAt = new Date("2026-03-22T00:00:00.000Z");
+		const endedAt = new Date("2026-03-22T00:00:01.000Z");
+		sessionManagerMocks.start.mockResolvedValue({
+			sessionId: "session-1",
+			manifestPath: "/tmp/manifest.json",
+			messagesPath: "/tmp/messages.json",
+			manifest: { session_id: "session-1" },
+			result: {
+				text: CLINE_PASS_SUBSCRIPTION_MESSAGE,
+				usage: {
+					inputTokens: 0,
+					outputTokens: 0,
+					cacheReadTokens: 0,
+					cacheWriteTokens: 0,
+					totalCost: 0,
+				},
+				messages: [],
+				toolCalls: [],
+				iterations: 1,
+				finishReason: "error",
+				model: { id: "premium-model", provider: "cline-pass", info: {} },
+				startedAt,
+				endedAt,
+				durationMs: 1000,
+			},
+		});
+		sessionManagerMocks.getAccumulatedUsage.mockResolvedValue(undefined);
+
+		const { runAgent } = await import("./run-agent");
+
+		await expect(
+			runAgent("test prompt", {
+				cwd: process.cwd(),
+				enableAgentTeams: false,
+				enableSpawnAgent: false,
+				enableTools: [],
+				execution: { maxConsecutiveMistakes: 3 },
+				logger: undefined,
+				mode: "yolo",
+				modelId: "premium-model",
+				outputMode: "text",
+				providerId: "cline-pass",
+				systemPrompt: "system",
+				thinking: false,
+				toolPolicies: { "*": { autoApprove: true } },
+				verbose: false,
+				workspaceRoot: process.cwd(),
+			} as never),
+		).resolves.toBeUndefined();
+
+		expect(process.exitCode).toBe(1);
+		expect(outputMocks.writeErr).toHaveBeenCalledWith(
+			CLINE_PASS_SUBSCRIPTION_MESSAGE,
+		);
+	});
+
 	it("surfaces post-run bookkeeping failures after a completed result", async () => {
 		const startedAt = new Date("2026-03-22T00:00:00.000Z");
 		const endedAt = new Date("2026-03-22T00:00:01.000Z");
@@ -837,4 +964,121 @@ describe("runAgent", () => {
 			expect.stringContaining("est. cost"),
 		);
 	});
+
+	it("zeros Cline free model costs in JSON results and agent events", async () => {
+		const startedAt = new Date("2026-03-22T00:00:00.000Z");
+		const endedAt = new Date("2026-03-22T00:00:01.000Z");
+		vi.stubGlobal(
+			"fetch",
+			vi.fn(async () => {
+				return new Response(
+					JSON.stringify({
+						free: [{ id: "deepseek/deepseek-v4-flash" }],
+					}),
+					{ status: 200, headers: { "content-type": "application/json" } },
+				);
+			}),
+		);
+		sessionManagerMocks.start.mockResolvedValue({
+			sessionId: "session-1",
+			manifestPath: "/tmp/manifest.json",
+			messagesPath: "/tmp/messages.json",
+			manifest: {
+				session_id: "session-1",
+			},
+			result: {
+				text: "completed text",
+				usage: {
+					inputTokens: 1,
+					outputTokens: 1,
+					cacheReadTokens: 0,
+					cacheWriteTokens: 0,
+					totalCost: 0.25,
+				},
+				messages: [],
+				toolCalls: [],
+				iterations: 1,
+				finishReason: "completed",
+				model: {
+					id: "deepseek/deepseek-v4-flash",
+					provider: "cline",
+					info: {},
+				},
+				startedAt,
+				endedAt,
+				durationMs: 1000,
+			},
+		});
+		sessionManagerMocks.getAccumulatedUsage.mockResolvedValue({
+			usage: {
+				inputTokens: 1,
+				outputTokens: 1,
+				cacheReadTokens: 0,
+				cacheWriteTokens: 0,
+				totalCost: 0.25,
+			},
+			aggregateUsage: {
+				inputTokens: 1,
+				outputTokens: 1,
+				cacheReadTokens: 0,
+				cacheWriteTokens: 0,
+				totalCost: 0.25,
+			},
+		});
+
+		const { runAgent } = await import("./run-agent");
+		const { handleEvent } = await import("../utils/events");
+
+		await expect(
+			runAgent("test prompt", {
+				baseUrl: "https://cline.test/api/v1",
+				cwd: process.cwd(),
+				enableAgentTeams: false,
+				enableSpawnAgent: false,
+				enableTools: [],
+				execution: {
+					maxConsecutiveMistakes: 3,
+				},
+				logger: undefined,
+				mode: "yolo",
+				modelId: "deepseek/deepseek-v4-flash",
+				outputMode: "json",
+				providerId: "cline",
+				systemPrompt: "system",
+				thinking: false,
+				toolPolicies: { "*": { autoApprove: true } },
+				verbose: false,
+				workspaceRoot: process.cwd(),
+			} as never),
+		).resolves.toBeUndefined();
+
+		const runResult = outputMocks.emitJsonLine.mock.calls.find(
+			([, payload]) =>
+				(payload as { type?: string } | undefined)?.type === "run_result",
+		)?.[1] as
+			| {
+					usage?: { totalCost?: number };
+					aggregateUsage?: { totalCost?: number };
+			  }
+			| undefined;
+		expect(runResult?.usage?.totalCost).toBe(0);
+		expect(runResult?.aggregateUsage?.totalCost).toBe(0);
+
+		sessionEventsMocks.listener?.({
+			type: "usage",
+			inputTokens: 1,
+			outputTokens: 1,
+			cost: 0.25,
+			totalCost: 0.25,
+		});
+
+		expect(handleEvent).toHaveBeenLastCalledWith(
+			expect.objectContaining({
+				type: "usage",
+				cost: 0,
+				totalCost: 0,
+			}),
+			expect.any(Object),
+		);
+	});
 });

apps/cli/src/runtime/run-agent.ts

@@ -16,7 +16,13 @@ import {
 	requestToolApproval,
 	submitAndExitInTerminal,
 } from "../utils/approval";
+import { formatCliErrorMessage } from "../utils/cline-pass-errors";
 import { handleEvent, handleTeamEvent } from "../utils/events";
+import {
+	shouldZeroClineFreeModelCost,
+	zeroCliAgentEventCost,
+	zeroCliUsageCost,
+} from "../utils/free-model-cost";
 import { createRuntimeHooks } from "../utils/hooks";
 import {
 	c,
@@ -183,8 +189,10 @@ export async function runAgent(
 	let reasoningChunkCount = 0;
 	let redactedReasoningChunkCount = 0;
 	const displayedErrorMessages = new Set<string>();
+	const shouldZeroCost = await shouldZeroClineFreeModelCost(config);
 
-	const onAgentEvent = (event: AgentEvent): void => {
+	const onAgentEvent = (rawEvent: AgentEvent): void => {
+		const event = zeroCliAgentEventCost(rawEvent, shouldZeroCost);
 		if (event.type === "content_start" && event.contentType === "reasoning") {
 			reasoningChunkCount += 1;
 			if (event.redacted) {
@@ -338,8 +346,14 @@ export async function runAgent(
 		const usageSummary = await sessionManager.getAccumulatedUsage(
 			started.sessionId,
 		);
-		const aggregateUsage = usageSummary?.aggregateUsage;
-		const usage = aggregateUsage ?? usageSummary?.usage ?? result.usage;
+		const aggregateUsage = zeroCliUsageCost(
+			usageSummary?.aggregateUsage,
+			shouldZeroCost,
+		);
+		const usage = zeroCliUsageCost(
+			aggregateUsage ?? usageSummary?.usage ?? result.usage,
+			shouldZeroCost,
+		);
 
 		if (config.outputMode === "json") {
 			emitJsonLine("stdout", {
@@ -374,7 +388,7 @@ export async function runAgent(
 		}
 
 		if (result.finishReason !== "completed") {
-			const errorText = result.text.trim();
+			const errorText = formatCliErrorMessage(result.text).trim();
 			if (
 				errorText &&
 				(config.outputMode === "json" || !displayedErrorMessages.has(errorText))
@@ -395,7 +409,7 @@ export async function runAgent(
 		);
 		process.exitCode = 0;
 	} catch (err) {
-		const message = err instanceof Error ? err.message : String(err);
+		const message = formatCliErrorMessage(err);
 		logCliError(config.logger, "CLI task run failed", { error: err });
 		writeErr(message);
 		process.exitCode = 1;

apps/cli/src/runtime/run-interactive.ts

@@ -24,6 +24,11 @@ import { disableOpenTuiGraphicsProbe } from "../tui/opentui-env";
 import type { QueuedPromptItem } from "../tui/types";
 import { type ChatCommandState, chatCommandHost } from "../utils/chat-commands";
 import { applyCliCompactionMode } from "../utils/compaction-mode";
+import {
+	shouldZeroClineFreeModelCost,
+	zeroCliAgentEventCost,
+	zeroCliUsageCost,
+} from "../utils/free-model-cost";
 import {
 	prepareTerminalForPostTuiOutput,
 	writeErr,
@@ -121,6 +126,7 @@ export async function runInteractive(
 		autoApproveAllRef,
 		setInteractiveAutoApprove,
 		requestToolApproval,
+		resolveToolPolicy,
 		tuiToolApprover,
 		tuiAskQuestion,
 	} = createInteractiveApprovalController(config);
@@ -152,6 +158,7 @@ export async function runInteractive(
 		askQuestionRef: tuiAskQuestion,
 	});
 	const providerSettingsManager = new ProviderSettingsManager();
+	let zeroCurrentTurnCost = false;
 
 	const sessionRuntime = createInteractiveSessionRuntime({
 		config,
@@ -160,11 +167,12 @@ export async function runInteractive(
 		resumeSessionId,
 		chatCommandState,
 		requestToolApproval,
+		resolveToolPolicy,
 		askQuestionRef: tuiAskQuestion,
 		resolveMistakeLimitDecision,
 		switchToActModeTool,
 		onAgentEvent: (event) => {
-			uiEvents.emit("agent", event);
+			uiEvents.emit("agent", zeroCliAgentEventCost(event, zeroCurrentTurnCost));
 		},
 		onTeamEvent: (event) => {
 			uiEvents.emit("team", event);
@@ -430,6 +438,7 @@ export async function runInteractive(
 		},
 		onSubmit: async (input, mode, delivery, attachments, onCommandOutput) => {
 			let commandOutput: string | undefined;
+			let zeroTurnCost = false;
 			try {
 				await sessionRuntime.ensureReady();
 				await waitForSubmittedMode(mode);
@@ -476,6 +485,8 @@ export async function runInteractive(
 				}
 				input = chatCommandResult.input;
 				commandOutput = chatCommandResult.commandOutput;
+				zeroTurnCost = await shouldZeroClineFreeModelCost(config);
+				zeroCurrentTurnCost = zeroTurnCost;
 				const {
 					prompt: userInput,
 					userImages,
@@ -517,8 +528,9 @@ export async function runInteractive(
 				}
 				if (result.finishReason !== "completed") {
 					if (result.finishReason === "aborted" || isAbortInProgress()) {
-						const usage = await sessionRuntime.getAccumulatedUsage(
-							result.usage,
+						const usage = zeroCliUsageCost(
+							await sessionRuntime.getAccumulatedUsage(result.usage),
+							zeroTurnCost,
 						);
 						return {
 							usage,
@@ -533,7 +545,10 @@ export async function runInteractive(
 						errorText || `Turn finished with ${result.finishReason}`,
 					);
 				}
-				const usage = await sessionRuntime.getAccumulatedUsage(result.usage);
+				const usage = zeroCliUsageCost(
+					await sessionRuntime.getAccumulatedUsage(result.usage),
+					zeroTurnCost,
+				);
 				return {
 					usage,
 					currentContextSize: getCurrentContextSize(result.messages),
@@ -557,6 +572,7 @@ export async function runInteractive(
 				});
 				throw error;
 			} finally {
+				zeroCurrentTurnCost = false;
 				if (!delivery) {
 					isRunning = false;
 					clearAbortInProgress();

apps/cli/src/runtime/tool-policies.test.ts

@@ -2,6 +2,7 @@ import { describe, expect, it } from "vitest";
 import {
 	applyInteractiveAutoApproveOverride,
 	cloneToolPolicies,
+	resolveInteractiveAutoApprovePolicy,
 } from "./tool-policies";
 
 describe("tool policy helpers", () => {
@@ -53,9 +54,9 @@ describe("tool policy helpers", () => {
 		});
 	});
 
-	it("restores the baseline policies when toggled back on", () => {
+	it("forces all baseline policies to auto-approve when toggled back on", () => {
 		const baseline = {
-			"*": { autoApprove: true },
+			"*": { autoApprove: false },
 			run_commands: { autoApprove: true, enabled: true },
 			editor: { autoApprove: false, enabled: true },
 		};
@@ -72,6 +73,40 @@ describe("tool policy helpers", () => {
 			enabled: true,
 		});
 
-		expect(target).toEqual(baseline);
+		expect(target).toEqual({
+			"*": { autoApprove: true },
+			run_commands: { autoApprove: true, enabled: true },
+			editor: { autoApprove: true, enabled: true },
+		});
+	});
+
+	it("resolves live per-tool policies from the interactive auto-approve state", () => {
+		const baseline = {
+			"*": { autoApprove: false },
+			read_files: { enabled: true },
+			editor: { autoApprove: false, enabled: true },
+		};
+
+		expect(
+			resolveInteractiveAutoApprovePolicy({
+				toolName: "editor",
+				baselinePolicies: baseline,
+				enabled: true,
+			}),
+		).toEqual({ autoApprove: true, enabled: true });
+		expect(
+			resolveInteractiveAutoApprovePolicy({
+				toolName: "run_commands",
+				baselinePolicies: baseline,
+				enabled: false,
+			}),
+		).toEqual({ autoApprove: false });
+		expect(
+			resolveInteractiveAutoApprovePolicy({
+				toolName: "read_files",
+				baselinePolicies: baseline,
+				enabled: false,
+			}),
+		).toEqual({ autoApprove: true, enabled: true });
 	});
 });

apps/cli/src/runtime/tool-policies.ts

@@ -27,21 +27,51 @@ export function cloneToolPolicies(
 	);
 }
 
+export function resolveInteractiveAutoApprovePolicy(input: {
+	toolName: string;
+	baselinePolicies: Record<string, ToolPolicy>;
+	enabled: boolean;
+}): ToolPolicy {
+	const toolPolicy = input.baselinePolicies[input.toolName] ?? {};
+	const baselinePolicy = {
+		...(input.baselinePolicies["*"] ?? {}),
+		...toolPolicy,
+	};
+	return {
+		...baselinePolicy,
+		autoApprove: input.enabled
+			? true
+			: SAFE_AUTO_APPROVE_TOOLS.has(input.toolName)
+				? (toolPolicy.autoApprove ?? true)
+				: false,
+	};
+}
+
 export function applyInteractiveAutoApproveOverride(input: {
 	targetPolicies: Record<string, ToolPolicy>;
 	baselinePolicies: Record<string, ToolPolicy>;
 	enabled: boolean;
 }): void {
 	const nextPolicies: Record<string, ToolPolicy> = input.enabled
-		? cloneToolPolicies(input.baselinePolicies)
+		? Object.fromEntries(
+				Object.entries(input.baselinePolicies).map(([name, policy]) => [
+					name,
+					{
+						...policy,
+						autoApprove: true,
+					},
+				]),
+			)
 		: Object.fromEntries(
 				Object.entries(input.baselinePolicies).map(([name, policy]) => [
 					name,
 					{
 						...policy,
-						autoApprove: SAFE_AUTO_APPROVE_TOOLS.has(name)
-							? (policy.autoApprove ?? true)
-							: false,
+						autoApprove: resolveInteractiveAutoApprovePolicy({
+							toolName: name,
+							baselinePolicies: input.baselinePolicies,
+							enabled: false,
+						}).autoApprove,
 					},
 				]),
 			);
@@ -53,9 +83,7 @@ export function applyInteractiveAutoApproveOverride(input: {
 	}
 
 	const globalPolicy = clonePolicy(nextPolicies["*"]);
-	globalPolicy.autoApprove = input.enabled
-		? (input.baselinePolicies["*"]?.autoApprove ?? true)
-		: false;
+	globalPolicy.autoApprove = input.enabled;
 	nextPolicies["*"] = globalPolicy;
 
 	for (const key of Object.keys(input.targetPolicies)) {

apps/cli/src/tui/components/chat-entry.tsx

@@ -2,6 +2,12 @@ import { useTerminalDimensions } from "@opentui/react";
 import type React from "react";
 import { useState } from "react";
 import "opentui-spinner/react";
+import {
+	getClineOrgIndividualInferenceSubscriptionMessage,
+	getClinePassSubscriptionUrl,
+	isClineOrgIndividualInferenceSubscriptionErrorMessage,
+	isClinePassSubscriptionError,
+} from "../../utils/cline-pass-errors";
 import {
 	CLINE_CREDITS_DASHBOARD_URL,
 	isClineAccountCreditsErrorMessage,
@@ -290,6 +296,65 @@ function ClineCreditsErrorView(props: { defaultFg?: string }) {
 	);
 }
 
+function ClinePassSubscriptionErrorView(props: { defaultFg?: string }) {
+	const subscriptionUrl = getClinePassSubscriptionUrl();
+	return (
+		<box flexDirection="row">
+			<text fg="yellow" content="* " />
+			<box
+				flexDirection="column"
+				border
+				borderStyle="rounded"
+				borderColor="yellow"
+				paddingX={1}
+			>
+				<text fg="yellow">ClinePass subscription required</text>
+				<text
+					fg={props.defaultFg}
+					selectable
+					content="No access to ClinePass subscription models yet. Subscribe to ClinePass, the low cost open weights model coding plan."
+				/>
+				<box flexDirection="row">
+					<text fg="gray">Subscribe: </text>
+					<text fg="cyan" selectable>
+						<a href={subscriptionUrl}>Open subscription page</a>
+					</text>
+				</box>
+				<box flexDirection="row">
+					<text fg="gray">URL: </text>
+					<text fg="cyan" selectable>
+						<a href={subscriptionUrl}>{subscriptionUrl}</a>
+					</text>
+				</box>
+			</box>
+		</box>
+	);
+}
+
+function ClineOrgIndividualInferenceSubscriptionErrorView(props: {
+	defaultFg?: string;
+}) {
+	return (
+		<box flexDirection="row">
+			<text fg="yellow" content="* " />
+			<box
+				flexDirection="column"
+				border
+				borderStyle="rounded"
+				borderColor="yellow"
+				paddingX={1}
+			>
+				<text fg="yellow">Personal ClinePass required</text>
+				<text
+					fg={props.defaultFg}
+					selectable
+					content={getClineOrgIndividualInferenceSubscriptionMessage()}
+				/>
+			</box>
+		</box>
+	);
+}
+
 export function ChatEntryView(props: {
 	entry: ChatEntry;
 	accent?: string;
@@ -388,6 +453,14 @@ export function ChatEntryView(props: {
 			if (isClineAccountCreditsErrorMessage(entry.text)) {
 				return <ClineCreditsErrorView defaultFg={defaultFg} />;
 			}
+			if (isClineOrgIndividualInferenceSubscriptionErrorMessage(entry.text)) {
+				return (
+					<ClineOrgIndividualInferenceSubscriptionErrorView defaultFg={defaultFg} />
+				);
+			}
+			if (isClinePassSubscriptionError(entry.text)) {
+				return <ClinePassSubscriptionErrorView defaultFg={defaultFg} />;
+			}
 			return (
 				<box flexDirection="row">
 					<text fg="red" content="* " />

apps/cli/src/tui/components/model-selector/model-selector.tsx

@@ -134,6 +134,7 @@ export function ModelSelectorContent(
 		currentModel: string;
 		currentProviderName: string;
 		models: ModelOption[];
+		showCustomModelId?: boolean;
 	},
 ) {
 	const {
@@ -143,6 +144,7 @@ export function ModelSelectorContent(
 		currentModel,
 		currentProviderName,
 		models,
+		showCustomModelId = true,
 	} = props;
 	const [search, setSearch] = useState("");
 	const [selected, setSelected] = useState(() => {
@@ -164,7 +166,7 @@ export function ModelSelectorContent(
 		return scored.map((r) => r.model);
 	}, [models, search]);
 
-	const optionCount = filtered.length + 1;
+	const optionCount = filtered.length + (showCustomModelId ? 1 : 0);
 	const safeSelected = Math.min(selected, Math.max(0, optionCount - 1));
 
 	useDialogKeyboard((key) => {
@@ -188,7 +190,7 @@ export function ModelSelectorContent(
 				resolve(model.key);
 				return;
 			}
-			if (safeSelected === filtered.length) {
+			if (showCustomModelId && safeSelected === filtered.length) {
 				setIsCreatingCustomModel(true);
 				setCustomModelId("");
 				setCustomModelError("");
@@ -290,6 +292,7 @@ export function ModelSelectorContent(
 				dimmed={onProvider}
 				currentModel={currentModel}
 				onSelect={resolve}
+				showCustomModelId={showCustomModelId}
 				onCreateCustomModel={() => {
 					setIsCreatingCustomModel(true);
 					setCustomModelId("");
@@ -408,6 +411,7 @@ function ModelList(props: {
 	dimmed?: boolean;
 	currentModel: string;
 	onSelect: (key: string) => void;
+	showCustomModelId: boolean;
 	onCreateCustomModel: () => void;
 }) {
 	const {
@@ -416,11 +420,12 @@ function ModelList(props: {
 		dimmed,
 		currentModel,
 		onSelect,
+		showCustomModelId,
 		onCreateCustomModel,
 	} = props;
 	const rows: ({ type: "model"; model: ModelOption } | { type: "custom" })[] = [
 		...items.map((model) => ({ type: "model" as const, model })),
-		{ type: "custom" as const },
+		...(showCustomModelId ? ([{ type: "custom" as const }] as const) : []),
 	];
 
 	if (rows.length <= MAX_VISIBLE) {

apps/cli/src/tui/components/status-bar.test.ts

@@ -57,7 +57,7 @@ describe("formatStatusBarUsageText", () => {
 				totalCost: 0.123,
 				showCost: true,
 			}),
-		).toBe("(12,345) $0.12");
+		).toBe("(12,345 tokens) $0.12");
 	});
 
 	it("omits cost when usage cost is hidden", () => {
@@ -67,6 +67,6 @@ describe("formatStatusBarUsageText", () => {
 				totalCost: 0.123,
 				showCost: false,
 			}),
-		).toBe("(12,345)");
+		).toBe("(12,345 tokens)");
 	});
 });

apps/cli/src/tui/components/status-bar.tsx

@@ -51,7 +51,7 @@ export function formatStatusBarUsageText(input: {
 	totalCost: number;
 	showCost: boolean;
 }): string {
-	const tokens = `(${input.totalTokens.toLocaleString()})`;
+	const tokens = `(${input.totalTokens.toLocaleString()} tokens)`;
 	if (!input.showCost) return tokens;
 	return `${tokens} ${formatCost(input.totalCost)}`;
 }

apps/cli/src/tui/contexts/session-context.tsx

@@ -106,9 +106,9 @@ export function SessionProvider(props: {
 	const [uiMode, setUiMode] = useState<AgentMode>(
 		config.mode === "plan" ? "plan" : "act",
 	);
-	const [autoApproveAll, _setAutoApproveAll] = useState(
-		config.toolPolicies["*"]?.autoApprove !== false,
-	);
+	const initialAutoApproveAll = config.toolPolicies["*"]?.autoApprove !== false;
+	const autoApproveAllRef = useRef(initialAutoApproveAll);
+	const [autoApproveAll, _setAutoApproveAll] = useState(initialAutoApproveAll);
 	const [compactionMode, _setCompactionMode] = useState<CliCompactionMode>(() =>
 		getCliCompactionMode(config),
 	);
@@ -192,11 +192,10 @@ export function SessionProvider(props: {
 	}, []);
 
 	const toggleAutoApprove = useCallback(() => {
-		_setAutoApproveAll((prev) => {
-			const next = !prev;
-			onAutoApproveChange(next);
-			return next;
-		});
+		const next = !autoApproveAllRef.current;
+		autoApproveAllRef.current = next;
+		onAutoApproveChange(next);
+		_setAutoApproveAll(next);
 	}, [onAutoApproveChange]);
 
 	const setCompactionMode = useCallback(

apps/cli/src/tui/hooks/use-agent-events.ts

@@ -4,6 +4,7 @@ import type {
 	PendingPromptSnapshot,
 	PendingPromptSubmittedEvent,
 } from "../../runtime/session-events";
+import { formatCliErrorMessage } from "../../utils/cline-pass-errors";
 import { resolveStatusNoticeLabel } from "../../utils/events";
 import {
 	formatToolInput,
@@ -171,7 +172,10 @@ export function useAgentEventHandlers(deps: AgentEventDeps) {
 					turnErrorReportedRef.current = true;
 					onTurnErrorReported(true);
 					if (!event.recoverable || verbose) {
-						appendEntry({ kind: "error", text: event.error.message });
+						appendEntry({
+							kind: "error",
+							text: formatCliErrorMessage(event.error),
+						});
 					}
 					break;
 				case "notice":

apps/cli/src/tui/hooks/use-model-selector.tsx

@@ -323,6 +323,7 @@ export function useModelSelector(opts: {
 									currentModel={config.modelId}
 									currentProviderName={providerDisplayName}
 									models={modelOptions}
+									showCustomModelId={config.providerId !== "cline-pass"}
 								/>
 							),
 						});
@@ -413,6 +414,7 @@ export function useModelSelector(opts: {
 							currentModel={config.modelId}
 							currentProviderName={providerDisplayName}
 							models={modelOptions}
+							showCustomModelId={config.providerId !== "cline-pass"}
 						/>
 					),
 				});

apps/cli/src/tui/hooks/use-prompt-input-controller.ts

@@ -1,4 +1,5 @@
 import { useCallback, useLayoutEffect, useRef, useState } from "react";
+import { formatCliErrorMessage } from "../../utils/cline-pass-errors";
 import { shouldShowCliUsageCost } from "../../utils/usage-cost-display";
 import type { SlashCommandRegistry } from "../commands/slash-command-registry";
 import {
@@ -376,7 +377,7 @@ export function usePromptInputController(input: {
 				if (!turnErrorReportedRef.current) {
 					session.appendEntry({
 						kind: "error",
-						text: error instanceof Error ? error.message : String(error),
+						text: formatCliErrorMessage(error),
 					});
 				}
 			} finally {

apps/cli/src/tui/views/onboarding/auth.test.ts

@@ -5,6 +5,7 @@ const hoisted = vi.hoisted(() => ({
 	startClineDeviceAuth: vi.fn(),
 	completeClineDeviceAuth: vi.fn(),
 	saveLocalProviderOAuthCredentials: vi.fn(),
+	identifyFeatureFlagsAccount: vi.fn(async () => {}),
 	openMock: vi.fn(() => Promise.resolve()),
 }));
 
@@ -22,6 +23,10 @@ vi.mock("@cline/shared", () => ({
 
 vi.mock("open", () => ({ default: hoisted.openMock }));
 
+vi.mock("../../../utils/feature-flags", () => ({
+	identifyFeatureFlagsAccount: hoisted.identifyFeatureFlagsAccount,
+}));
+
 import { runDeviceCodeAuthFlow, runOAuthAuthFlow } from "./auth";
 
 // Minimal stand-in for a telemetry service. The auth helpers must forward this
@@ -45,6 +50,8 @@ describe("onboarding auth telemetry forwarding", () => {
 		hoisted.startClineDeviceAuth.mockReset();
 		hoisted.completeClineDeviceAuth.mockReset();
 		hoisted.saveLocalProviderOAuthCredentials.mockReset();
+		hoisted.identifyFeatureFlagsAccount.mockReset();
+		hoisted.identifyFeatureFlagsAccount.mockResolvedValue(undefined);
 		hoisted.openMock.mockReset();
 		hoisted.openMock.mockResolvedValue(undefined);
 	});
@@ -85,6 +92,7 @@ describe("onboarding auth telemetry forwarding", () => {
 		// Identity, not deep-equal — we are validating the exact reference flows
 		// through so opt-out / common metadata stays consistent.
 		expect(telemetryArg).toBe(fakeTelemetry);
+		expect(hoisted.identifyFeatureFlagsAccount).not.toHaveBeenCalled();
 	});
 
 	it("does not pass telemetry when none is provided (back-compat)", () => {
@@ -121,6 +129,8 @@ describe("onboarding auth telemetry forwarding", () => {
 			access: "a",
 			refresh: "r",
 			expires: 0,
+			accountId: "acct-1",
+			email: "user@example.com",
 		});
 
 		runDeviceCodeAuthFlow({
@@ -146,6 +156,10 @@ describe("onboarding auth telemetry forwarding", () => {
 		// emitted by completeClineDeviceAuth, so passing telemetry to the start
 		// helper would double-emit the event.
 		expect(hoisted.startClineDeviceAuth).toHaveBeenCalledWith();
+		expect(hoisted.identifyFeatureFlagsAccount).toHaveBeenCalledWith({
+			id: "acct-1",
+			email: "user@example.com",
+		});
 		expect(hoisted.openMock).toHaveBeenCalledWith(
 			"https://verify?user_code=uc",
 			{ wait: false },

apps/cli/src/tui/views/onboarding/auth.ts

@@ -9,6 +9,7 @@ import {
 } from "@cline/core";
 import { getClineEnvironmentConfig } from "@cline/shared";
 import open from "open";
+import { identifyFeatureFlagsAccount } from "../../../utils/feature-flags";
 
 export type OnboardingOAuthProviderId = string;
 
@@ -18,6 +19,10 @@ export function isOnboardingOAuthProviderId(
 	return isOAuthProvider(providerId);
 }
 
+function isClineAccountOAuthProvider(providerId: string): boolean {
+	return providerId === "cline" || providerId === "cline-pass";
+}
+
 export function runOAuthAuthFlow(input: {
 	providerId: OnboardingOAuthProviderId;
 	providerSettingsManager: ProviderSettingsManager;
@@ -56,6 +61,12 @@ export function runOAuthAuthFlow(input: {
 				existing,
 				credentials,
 			);
+			if (isClineAccountOAuthProvider(input.providerId)) {
+				void identifyFeatureFlagsAccount({
+					id: credentials.accountId,
+					email: credentials.email,
+				}).catch(() => {});
+			}
 			input.onComplete(input.providerId);
 		})
 		.catch((err: unknown) => {
@@ -118,6 +129,12 @@ export function runDeviceCodeAuthFlow(input: {
 						existing,
 						credentials,
 					);
+					if (isClineAccountOAuthProvider(input.providerId)) {
+						void identifyFeatureFlagsAccount({
+							id: credentials.accountId,
+							email: credentials.email,
+						}).catch(() => {});
+					}
 					input.onComplete(input.providerId);
 				})
 				.catch((err: unknown) => {

apps/cli/src/tui/views/onboarding/controller.ts

@@ -9,12 +9,14 @@ import {
 	resolveProviderConfig,
 	saveLocalProviderSettings,
 } from "@cline/core";
+import { isClineProvider } from "@cline/shared";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import {
 	type CodexCliStatus,
 	checkCodexCliInstalled,
 	isOpenAICodexCliProvider,
 } from "../../../utils/codex-cli";
+import { getCliFeatureFlagsService } from "../../../utils/feature-flags";
 import { getPersistedProviderApiKey } from "../../../utils/provider-auth";
 import { listLocalProviders } from "../../../utils/provider-catalog";
 import { getCliTelemetryService } from "../../../utils/telemetry";
@@ -46,11 +48,13 @@ import {
 import { FIELD_ORDER } from "./fields";
 import { useOnboardingKeyboard } from "./keyboard";
 import {
+	getMainMenuOptions,
 	type ModelEntry,
 	type OnboardingResult,
 	type OnboardingStep,
 	type ProviderEntry,
 	type ReasoningEffort,
+	shouldUseFeaturedClineModelPicker,
 	type ThinkingLevel,
 	toModelEntriesFromKnownModels,
 	toModelEntry,
@@ -71,6 +75,14 @@ export function useOnboardingController(props: OnboardingControllerProps) {
 		() => props.providerSettingsManager ?? new ProviderSettingsManager(),
 		[props.providerSettingsManager],
 	);
+	const menuOptions = useMemo(
+		() =>
+			getMainMenuOptions({
+				isClinePassEnabled:
+					getCliFeatureFlagsService().getBooleanFlagEnabled("ext-cline-pass"),
+			}),
+		[],
+	);
 	const [step, setStep] = useState<OnboardingStep>("menu");
 	const [menuSelected, setMenuSelected] = useState(0);
 	const [oauthProvider, setOauthProvider] = useState("");
@@ -153,6 +165,9 @@ export function useOnboardingController(props: OnboardingControllerProps) {
 
 	const createCustomModelItem = useCallback(
 		(_search: string, filteredItems: SearchableItem[]) => {
+			if (activeProviderId === "cline-pass") {
+				return undefined;
+			}
 			if (filteredItems.some((item) => item.key === CUSTOM_MODEL_ID_ACTION)) {
 				return undefined;
 			}
@@ -163,7 +178,7 @@ export function useOnboardingController(props: OnboardingControllerProps) {
 				searchText: "create custom model id manual entry",
 			} satisfies SearchableItem;
 		},
-		[],
+		[activeProviderId],
 	);
 
 	const modelList = useSearchableList(modelItems, createCustomModelItem);
@@ -256,7 +271,7 @@ export function useOnboardingController(props: OnboardingControllerProps) {
 			const provider = providers.find((p) => p.id === providerId);
 			setActiveProviderName(provider?.name ?? providerId);
 			setModelsDefaultId(provider?.defaultModelId ?? "");
-			if (providerId === "cline") {
+			if (shouldUseFeaturedClineModelPicker(providerId)) {
 				setClineModelSelected(0);
 				setStep("cline_model");
 			} else if (providerId === "openai-compatible") {
@@ -307,7 +322,7 @@ export function useOnboardingController(props: OnboardingControllerProps) {
 
 	const startOAuthFlow = useCallback(
 		(providerId: OnboardingOAuthProviderId) => {
-			if (providerId === "cline") {
+			if (isClineProvider(providerId)) {
 				startDeviceCodeFlow(providerId);
 				return;
 			}
@@ -611,6 +626,7 @@ export function useOnboardingController(props: OnboardingControllerProps) {
 		onExit: props.onExit,
 		oauthProvider,
 		activeProviderId,
+		menuOptions,
 		menuSelected,
 		providerList,
 		modelList,
@@ -685,6 +701,7 @@ export function useOnboardingController(props: OnboardingControllerProps) {
 		},
 		handleModelItemSelect: selectModelItem,
 		menuSelected,
+		menuOptions,
 		modelItems,
 		modelList,
 		modelsLoading,

apps/cli/src/tui/views/onboarding/keyboard.ts

@@ -3,10 +3,13 @@ import { useKeyboard } from "@opentui/react";
 import type { Dispatch, SetStateAction } from "react";
 import type { ClineModelPickerEntry } from "../../components/model-selector/cline-model-picker";
 import type { SearchableListState } from "../../components/searchable-list";
-import type { OnboardingOAuthProviderId } from "./auth";
+import {
+	isOnboardingOAuthProviderId,
+	type OnboardingOAuthProviderId,
+} from "./auth";
 import { FIELD_ORDER } from "./fields";
 import {
-	MAIN_MENU,
+	type MenuOption,
 	type OnboardingStep,
 	THINKING_LEVELS,
 	type ThinkingLevel,
@@ -17,6 +20,7 @@ export function useOnboardingKeyboard(input: {
 	onExit: () => void;
 	oauthProvider: string;
 	activeProviderId: string;
+	menuOptions: MenuOption[];
 	menuSelected: number;
 	providerList: SearchableListState;
 	modelList: SearchableListState;
@@ -133,17 +137,21 @@ export function useOnboardingKeyboard(input: {
 
 		if (input.step === "menu") {
 			if (key.name === "up") {
-				input.setMenuSelected((s) => (s <= 0 ? MAIN_MENU.length - 1 : s - 1));
+				input.setMenuSelected((s) =>
+					s <= 0 ? input.menuOptions.length - 1 : s - 1,
+				);
 				return;
 			}
 			if (key.name === "down") {
-				input.setMenuSelected((s) => (s >= MAIN_MENU.length - 1 ? 0 : s + 1));
+				input.setMenuSelected((s) =>
+					s >= input.menuOptions.length - 1 ? 0 : s + 1,
+				);
 				return;
 			}
 			if (key.name === "return") {
-				const option = MAIN_MENU[input.menuSelected];
+				const option = input.menuOptions[input.menuSelected];
 				if (!option) return;
-				if (option.value === "cline" || option.value === "openai-codex") {
+				if (isOnboardingOAuthProviderId(option.value)) {
 					input.startOAuthFlow(option.value);
 				} else {
 					input.setStep("byo_provider");

apps/cli/src/tui/views/onboarding/model.test.ts

@@ -1,12 +1,30 @@
 import { describe, expect, it } from "vitest";
 import {
+	getMainMenuOptions,
 	getOAuthProviderLabel,
+	shouldUseFeaturedClineModelPicker,
 	toModelEntriesFromKnownModels,
 	toModelEntry,
 	toProviderEntry,
 } from "./model";
 
 describe("onboarding model helpers", () => {
+	it("hides ClinePass from the main menu unless its feature flag is enabled", () => {
+		expect(
+			getMainMenuOptions().some((option) => option.value === "cline-pass"),
+		).toBe(false);
+		expect(
+			getMainMenuOptions({ isClinePassEnabled: false }).some(
+				(option) => option.value === "cline-pass",
+			),
+		).toBe(false);
+		expect(
+			getMainMenuOptions({ isClinePassEnabled: true }).some(
+				(option) => option.value === "cline-pass",
+			),
+		).toBe(true);
+	});
+
 	it("maps provider catalog entries into onboarding provider entries", () => {
 		expect(
 			toProviderEntry({
@@ -112,7 +130,14 @@ describe("onboarding model helpers", () => {
 
 	it("formats OAuth provider labels for onboarding status views", () => {
 		expect(getOAuthProviderLabel("cline")).toBe("Cline");
+		expect(getOAuthProviderLabel("cline-pass")).toBe("ClinePass");
 		expect(getOAuthProviderLabel("openai-codex")).toBe("ChatGPT");
 		expect(getOAuthProviderLabel("oca")).toBe("oca");
 	});
+
+	it("uses the featured Cline model picker only for the Cline provider", () => {
+		expect(shouldUseFeaturedClineModelPicker("cline")).toBe(true);
+		expect(shouldUseFeaturedClineModelPicker("cline-pass")).toBe(false);
+		expect(shouldUseFeaturedClineModelPicker("anthropic")).toBe(false);
+	});
 });

apps/cli/src/tui/views/onboarding/model.ts

@@ -43,6 +43,12 @@ export const MAIN_MENU: MenuOption[] = [
 		detail: "Latest models with regular free promos",
 		icon: "\u263a",
 	},
+	{
+		label: "Sign in with ClinePass",
+		value: "cline-pass",
+		detail: "Low cost subscription for everyone",
+		icon: "\u2726",
+	},
 	{
 		label: "Sign in with ChatGPT",
 		value: "openai-codex",
@@ -57,6 +63,14 @@ export const MAIN_MENU: MenuOption[] = [
 	},
 ];
 
+export function getMainMenuOptions(options?: {
+	isClinePassEnabled?: boolean;
+}): MenuOption[] {
+	return MAIN_MENU.filter(
+		(option) => option.value !== "cline-pass" || options?.isClinePassEnabled,
+	);
+}
+
 export interface OnboardingResult {
 	providerId: string;
 	modelId: string;
@@ -139,6 +153,9 @@ export function toModelEntriesFromKnownModels(
 }
 
 export function getOAuthProviderLabel(providerId: string): string {
+	if (providerId === "cline-pass") {
+		return "ClinePass";
+	}
 	if (providerId === "cline") {
 		return "Cline";
 	}
@@ -147,3 +164,7 @@ export function getOAuthProviderLabel(providerId: string): string {
 	}
 	return providerId;
 }
+
+export function shouldUseFeaturedClineModelPicker(providerId: string): boolean {
+	return providerId === "cline";
+}

apps/cli/src/tui/views/onboarding/screens.tsx

@@ -20,7 +20,7 @@ import {
 import { useTerminalBackground } from "../../hooks/use-terminal-background";
 import { getDefaultForeground, palette } from "../../palette";
 import { FIELD_ORDER } from "./fields";
-import { MAIN_MENU, THINKING_LEVELS } from "./model";
+import { type MenuOption, THINKING_LEVELS } from "./model";
 
 type MouseTrackerState = ReturnType<typeof useMouseTracker>;
 
@@ -633,6 +633,7 @@ export function OnboardingThinkingLevelScreen(props: {
 
 export function OnboardingMainMenuScreen(props: {
 	contentWidth: number;
+	menuOptions: MenuOption[];
 	menuSelected: number;
 	mouse: MouseTrackerState;
 }) {
@@ -671,7 +672,7 @@ export function OnboardingMainMenuScreen(props: {
 				marginTop={1}
 				gap={0}
 			>
-				{MAIN_MENU.map((option, i) => {
+				{props.menuOptions.map((option, i) => {
 					const isSel = i === props.menuSelected;
 					return (
 						<box

apps/cli/src/tui/views/onboarding/view.tsx

@@ -166,6 +166,7 @@ export function OnboardingView(props: OnboardingViewProps) {
 	return (
 		<OnboardingMainMenuScreen
 			contentWidth={contentWidth}
+			menuOptions={state.menuOptions}
 			menuSelected={state.menuSelected}
 			mouse={mouse}
 		/>

apps/cli/src/utils/cline-pass-errors.test.ts

@@ -0,0 +1,44 @@
+import { describe, expect, it } from "vitest";
+import {
+	formatCliErrorMessage,
+	getClineOrgIndividualInferenceSubscriptionMessage,
+	getClinePassSubscriptionUrl,
+	isClineOrgIndividualInferenceSubscriptionErrorMessage,
+	isClinePassSubscriptionError,
+} from "./cline-pass-errors";
+
+describe("cline-pass-errors", () => {
+	it("recognizes both raw and formatted ClinePass subscription messages", () => {
+		expect(
+			isClinePassSubscriptionError(
+				"the user is not subscribed to required model plan",
+			),
+		).toBe(true);
+
+		const formatted = `No access to ClinePass subscription models yet. Subscribe to ClinePass, the low cost open weights model coding plan: ${getClinePassSubscriptionUrl()}`;
+		expect(isClinePassSubscriptionError(formatted)).toBe(true);
+		expect(formatCliErrorMessage(new Error(formatted))).toBe(formatted);
+	});
+
+	it("formats the ClinePass subscription URL", () => {
+		expect(getClinePassSubscriptionUrl()).toBe(
+			"https://app.cline.bot/dashboard/subscription?personal=true",
+		);
+	});
+
+	it("recognizes and formats organization account individual subscription errors", () => {
+		const raw =
+			"403 Error 403: organization accounts cannot use individual model inference subscriptions";
+		const formatted = getClineOrgIndividualInferenceSubscriptionMessage();
+
+		expect(isClineOrgIndividualInferenceSubscriptionErrorMessage(raw)).toBe(
+			true,
+		);
+		expect(
+			isClineOrgIndividualInferenceSubscriptionErrorMessage(
+				new Error(formatted),
+			),
+		).toBe(true);
+		expect(formatCliErrorMessage(new Error(raw))).toBe(formatted);
+	});
+});

apps/cli/src/utils/cline-pass-errors.ts

@@ -0,0 +1,69 @@
+import {
+	getClineOrgIndividualInferenceSubscriptionMessage,
+	getClinePassSubscriptionUrl,
+	isClineNotSubscribedError,
+	isClineNotSubscribedMessage,
+	isClineOrgIndividualInferenceSubscriptionError,
+	isClineOrgIndividualInferenceSubscriptionMessage,
+} from "@cline/core";
+
+export {
+	getClineOrgIndividualInferenceSubscriptionMessage,
+	getClinePassSubscriptionUrl,
+};
+
+function isFormattedClinePassSubscriptionMessage(message: string): boolean {
+	const normalized = message.trim().toLowerCase();
+	return (
+		normalized.includes("no access to clinepass subscription models yet") &&
+		normalized.includes("subscribe to clinepass")
+	);
+}
+
+export function isClinePassSubscriptionError(error: unknown): boolean {
+	if (isClineNotSubscribedError(error)) {
+		return true;
+	}
+	if (error instanceof Error) {
+		return (
+			error.name === "ClineNotSubscribedError" ||
+			isClineNotSubscribedMessage(error.message) ||
+			isFormattedClinePassSubscriptionMessage(error.message)
+		);
+	}
+	return (
+		typeof error === "string" &&
+		(isClineNotSubscribedMessage(error) ||
+			isFormattedClinePassSubscriptionMessage(error))
+	);
+}
+
+export function isClineOrgIndividualInferenceSubscriptionErrorMessage(
+	error: unknown,
+): boolean {
+	if (isClineOrgIndividualInferenceSubscriptionError(error)) {
+		return true;
+	}
+	if (error instanceof Error) {
+		return (
+			error.name === "ClineOrgIndividualInferenceSubscriptionError" ||
+			isClineOrgIndividualInferenceSubscriptionMessage(error.message) ||
+			error.message === getClineOrgIndividualInferenceSubscriptionMessage()
+		);
+	}
+	return (
+		typeof error === "string" &&
+		(isClineOrgIndividualInferenceSubscriptionMessage(error) ||
+			error === getClineOrgIndividualInferenceSubscriptionMessage())
+	);
+}
+
+export function formatCliErrorMessage(error: unknown): string {
+	if (isClineOrgIndividualInferenceSubscriptionErrorMessage(error)) {
+		return getClineOrgIndividualInferenceSubscriptionMessage();
+	}
+	if (error instanceof Error) {
+		return error.message;
+	}
+	return String(error);
+}

apps/cli/src/utils/feature-flags.ts

@@ -87,22 +87,29 @@ export async function disposeCliFeatureFlagsService(): Promise<void> {
 	await current.dispose();
 }
 
-export async function identifyFeatureFlagsAccount(
-	account: { id?: string; email?: string },
-	logger?: BasicLogger,
-): Promise<void> {
+export function setCliFeatureFlagsAccountContext(account: {
+	id?: string;
+	email?: string;
+}): void {
 	const accountId = account.id?.trim();
 	cliFeatureFlagsContext = {
 		...cliFeatureFlagsContext,
 		...(accountId ? { distinctId: accountId, userId: accountId } : {}),
 		...(account.email?.trim() ? { email: account.email.trim() } : {}),
 	};
+	cliFeatureFlagsService?.setContext(getCliFeatureFlagsContext());
+}
+
+export async function identifyFeatureFlagsAccount(
+	account: { id?: string; email?: string },
+	logger?: BasicLogger,
+): Promise<void> {
+	setCliFeatureFlagsAccountContext(account);
 
 	if (!cliFeatureFlagsService) {
 		return;
 	}
 
-	cliFeatureFlagsService.setContext(getCliFeatureFlagsContext());
 	try {
 		await cliFeatureFlagsService.poll();
 	} catch (error) {

apps/cli/src/utils/free-model-cost.test.ts

@@ -0,0 +1,162 @@
+import type { AgentEvent } from "@cline/core";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import {
+	clearClineFreeModelCostCache,
+	shouldZeroClineFreeModelCost,
+	zeroCliAgentEventCost,
+	zeroCliUsageCost,
+} from "./free-model-cost";
+
+afterEach(() => {
+	clearClineFreeModelCostCache();
+	vi.unstubAllGlobals();
+});
+
+describe("shouldZeroClineFreeModelCost", () => {
+	it("uses the Cline free model list", async () => {
+		const fetchMock = vi.fn(
+			async (_input: Parameters<typeof fetch>[0], _init?: RequestInit) => {
+				return new Response(
+					JSON.stringify({
+						free: [{ id: "deepseek/deepseek-v4-flash" }],
+					}),
+					{ status: 200, headers: { "content-type": "application/json" } },
+				);
+			},
+		);
+		vi.stubGlobal("fetch", fetchMock);
+
+		await expect(
+			shouldZeroClineFreeModelCost({
+				providerId: "cline",
+				modelId: "deepseek/deepseek-v4-flash",
+				baseUrl: "https://cline.test/api/v1",
+			}),
+		).resolves.toBe(true);
+
+		expect(fetchMock.mock.calls[0]?.[0]).toBe(
+			"https://cline.test/api/v1/ai/cline/recommended-models",
+		);
+	});
+
+	it("does not zero non-Cline providers", async () => {
+		const fetchMock = vi.fn();
+		vi.stubGlobal("fetch", fetchMock);
+
+		await expect(
+			shouldZeroClineFreeModelCost({
+				providerId: "openrouter",
+				modelId: "deepseek/deepseek-v4-flash",
+				baseUrl: "https://cline.test/api/v1",
+			}),
+		).resolves.toBe(false);
+		expect(fetchMock).not.toHaveBeenCalled();
+	});
+
+	it("does not match a paid model by only the final path segment", async () => {
+		vi.stubGlobal(
+			"fetch",
+			vi.fn(async () => {
+				return new Response(
+					JSON.stringify({
+						free: [{ id: "deepseek/deepseek-v4-flash" }],
+					}),
+					{ status: 200, headers: { "content-type": "application/json" } },
+				);
+			}),
+		);
+
+		await expect(
+			shouldZeroClineFreeModelCost({
+				providerId: "cline",
+				modelId: "acme/deepseek-v4-flash",
+				baseUrl: "https://cline.test/api/v1",
+			}),
+		).resolves.toBe(false);
+	});
+
+	it("retries after a failed free model list fetch", async () => {
+		const fetchMock = vi
+			.fn()
+			.mockResolvedValueOnce(new Response("unavailable", { status: 503 }))
+			.mockResolvedValueOnce(
+				new Response(
+					JSON.stringify({
+						free: [{ id: "deepseek/deepseek-v4-flash" }],
+					}),
+					{ status: 200, headers: { "content-type": "application/json" } },
+				),
+			);
+		vi.stubGlobal("fetch", fetchMock);
+
+		await expect(
+			shouldZeroClineFreeModelCost({
+				providerId: "cline",
+				modelId: "deepseek/deepseek-v4-flash",
+				baseUrl: "https://cline.test/api/v1",
+			}),
+		).resolves.toBe(false);
+		await expect(
+			shouldZeroClineFreeModelCost({
+				providerId: "cline",
+				modelId: "deepseek/deepseek-v4-flash",
+				baseUrl: "https://cline.test/api/v1",
+			}),
+		).resolves.toBe(true);
+		expect(fetchMock).toHaveBeenCalledTimes(2);
+	});
+});
+
+describe("zeroCliUsageCost", () => {
+	it("zeros total cost while preserving token usage", () => {
+		expect(
+			zeroCliUsageCost(
+				{
+					inputTokens: 10,
+					outputTokens: 5,
+					totalCost: 0.001,
+				},
+				true,
+			),
+		).toEqual({
+			inputTokens: 10,
+			outputTokens: 5,
+			totalCost: 0,
+		});
+	});
+});
+
+describe("zeroCliAgentEventCost", () => {
+	it("zeros usage event cost fields", () => {
+		const event = {
+			type: "usage",
+			inputTokens: 10,
+			outputTokens: 5,
+			cost: 0.001,
+			totalCost: 0.001,
+		} as AgentEvent;
+
+		expect(zeroCliAgentEventCost(event, true)).toMatchObject({
+			cost: 0,
+			totalCost: 0,
+		});
+	});
+
+	it("zeros done event usage cost", () => {
+		const event = {
+			type: "done",
+			reason: "completed",
+			text: "ok",
+			iterations: 1,
+			usage: {
+				inputTokens: 10,
+				outputTokens: 5,
+				totalCost: 0.001,
+			},
+		} as AgentEvent;
+
+		expect(zeroCliAgentEventCost(event, true)).toMatchObject({
+			usage: { totalCost: 0 },
+		});
+	});
+});

apps/cli/src/utils/free-model-cost.ts

@@ -0,0 +1,123 @@
+import type { AgentEvent } from "@cline/core";
+import { getClineEnvironmentConfig } from "@cline/shared";
+import type { Config } from "./types";
+
+const CLINE_RECOMMENDED_MODELS_TIMEOUT_MS = 5_000;
+const freeModelIdsByBaseUrl = new Map<
+	string,
+	Promise<readonly string[] | undefined>
+>();
+
+function normalizeModelId(modelId: string | undefined): string {
+	return modelId?.trim().toLowerCase() ?? "";
+}
+
+function modelIdsMatch(selectedModelId: string, freeModelId: string): boolean {
+	const selected = normalizeModelId(selectedModelId);
+	const free = normalizeModelId(freeModelId);
+	if (!selected || !free) return false;
+	return selected === free;
+}
+
+function resolveClineRecommendedModelsUrl(baseUrl: string): string {
+	const normalizedBaseUrl = baseUrl.trim().replace(/\/+$/, "");
+	const apiBaseUrl = normalizedBaseUrl.endsWith("/api/v1")
+		? normalizedBaseUrl.slice(0, -"/api/v1".length)
+		: normalizedBaseUrl;
+	return `${apiBaseUrl}/api/v1/ai/cline/recommended-models`;
+}
+
+async function fetchClineFreeModelIds(
+	baseUrl: string,
+): Promise<readonly string[] | undefined> {
+	const controller = new AbortController();
+	const timeout = setTimeout(
+		() => controller.abort(),
+		CLINE_RECOMMENDED_MODELS_TIMEOUT_MS,
+	);
+	try {
+		const response = await fetch(resolveClineRecommendedModelsUrl(baseUrl), {
+			signal: controller.signal,
+		});
+		if (!response.ok) return undefined;
+		const json = (await response.json()) as { free?: unknown };
+		return Array.isArray(json.free)
+			? json.free
+					.map((model) =>
+						model && typeof model === "object"
+							? (model as Record<string, unknown>).id
+							: undefined,
+					)
+					.filter((id): id is string => typeof id === "string" && id.length > 0)
+			: [];
+	} catch {
+		return undefined;
+	} finally {
+		clearTimeout(timeout);
+	}
+}
+
+function getClineFreeModelIds(baseUrl: string): Promise<readonly string[]> {
+	const cacheKey = baseUrl.trim();
+	let cached = freeModelIdsByBaseUrl.get(cacheKey);
+	if (!cached) {
+		cached = fetchClineFreeModelIds(cacheKey).then((ids) => {
+			if (!ids) freeModelIdsByBaseUrl.delete(cacheKey);
+			return ids;
+		});
+		freeModelIdsByBaseUrl.set(cacheKey, cached);
+	}
+	return cached.then((ids) => ids ?? []);
+}
+
+export async function shouldZeroClineFreeModelCost(
+	config: Pick<Config, "providerId" | "modelId" | "baseUrl">,
+): Promise<boolean> {
+	if (config.providerId !== "cline") return false;
+	const modelId = normalizeModelId(config.modelId);
+	if (!modelId) return false;
+
+	const baseUrl =
+		config.baseUrl?.trim() || getClineEnvironmentConfig().apiBaseUrl;
+	const freeModelIds = await getClineFreeModelIds(baseUrl);
+	return freeModelIds.some((freeModelId) =>
+		modelIdsMatch(modelId, freeModelId),
+	);
+}
+
+export function zeroCliUsageCost<T extends { totalCost?: number } | undefined>(
+	usage: T,
+	shouldZeroCost: boolean,
+): T {
+	if (
+		!shouldZeroCost ||
+		!usage ||
+		typeof usage.totalCost !== "number" ||
+		usage.totalCost === 0
+	) {
+		return usage;
+	}
+	return { ...usage, totalCost: 0 } as T;
+}
+
+export function zeroCliAgentEventCost(
+	event: AgentEvent,
+	shouldZeroCost: boolean,
+): AgentEvent {
+	if (!shouldZeroCost) return event;
+	if (event.type === "done" && event.usage) {
+		return {
+			...event,
+			usage: zeroCliUsageCost(event.usage, true),
+		};
+	}
+	if (event.type !== "usage") return event;
+	const next = { ...event } as Record<string, unknown>;
+	if (typeof next.cost === "number") next.cost = 0;
+	if (typeof next.totalCost === "number") next.totalCost = 0;
+	return next as unknown as AgentEvent;
+}
+
+export function clearClineFreeModelCostCache(): void {
+	freeModelIdsByBaseUrl.clear();
+}

apps/cli/src/wizards/connect/platforms.ts

@@ -1,325 +1,16 @@
-export interface PlatformDef {
-	id: string;
-	name: string;
-	type: "polling" | "webhook" | "hybrid";
-	hint: string;
-	fields: FieldDef[];
-	security?: SecurityDef;
-}
+import {
+	CONNECTOR_PLATFORMS,
+	shouldIncludeConnectorField,
+} from "@cline/shared";
 
-export interface FieldDef {
-	flag: string;
-	label: string;
-	placeholder?: string;
-	required?: boolean;
-	help?: string[];
-	initialValue?: string;
-	options?: Array<{ value: string; label: string; hint?: string }>;
-	includeWhen?: FieldCondition;
-}
+export type {
+	ConnectorFieldCondition as FieldCondition,
+	ConnectorFieldDef as FieldDef,
+	ConnectorPlatformDef as PlatformDef,
+	ConnectorSecurityDef as SecurityDef,
+	ConnectorSecurityFieldDef as SecurityFieldDef,
+} from "@cline/shared";
+export { CONNECTOR_PLATFORMS, shouldIncludeConnectorField };
 
-export type FieldCondition = {
-	flag: string;
-	equals?: string;
-	notEquals?: string;
-};
-
-export interface SecurityFieldDef {
-	key: string;
-	label: string;
-	placeholder?: string;
-	help?: string[];
-	requiredMessage: string;
-	validate?: (value: string) => string | undefined;
-}
-
-export interface SecurityDef {
-	prompt: string;
-	fields: SecurityFieldDef[];
-	buildArgs: (values: Record<string, string>) => string[];
-}
-
-export function shouldIncludeField(
-	field: FieldDef,
-	values: Record<string, string>,
-): boolean {
-	const condition = field.includeWhen;
-	if (!condition) {
-		return true;
-	}
-	const value = values[condition.flag] ?? "";
-	if (condition.equals !== undefined && value !== condition.equals) {
-		return false;
-	}
-	if (condition.notEquals !== undefined && value === condition.notEquals) {
-		return false;
-	}
-	return true;
-}
-
-function validateTelegramUserId(value: string): string | undefined {
-	return /^\d+$/.test(value)
-		? undefined
-		: "Telegram user ID must contain digits only";
-}
-
-function validateSlackTeamId(value: string): string | undefined {
-	return /^T[A-Z0-9]+$/.test(value)
-		? undefined
-		: "Slack workspace ID must start with T and contain uppercase letters or digits only";
-}
-
-function validateSlackUserId(value: string): string | undefined {
-	return /^[UW][A-Z0-9]+$/.test(value)
-		? undefined
-		: "Slack member ID must start with U or W and contain uppercase letters or digits only";
-}
-
-export const PLATFORMS: PlatformDef[] = [
-	{
-		id: "telegram",
-		name: "Telegram",
-		type: "polling",
-		hint: "Easiest to set up. No public URL needed.",
-		fields: [
-			{
-				flag: "-k",
-				label: "Bot token",
-				placeholder: "7123456789:AAH...",
-				required: true,
-				help: [
-					"Open Telegram and start a chat with @BotFather",
-					"Send /newbot and follow the prompts",
-					"BotFather gives you this after creating the bot",
-					"It looks like 7123456789:AAHxxx...",
-				],
-			},
-		],
-		security: {
-			prompt:
-				"By default, anyone who finds your bot can message it and run tasks on your machine. Restrict access to your Telegram user ID?",
-			fields: [
-				{
-					key: "userId",
-					label: "Your Telegram user ID",
-					placeholder: "123456789",
-					help: [
-						"Message @userinfobot on Telegram",
-						"It will reply with your numeric user ID",
-					],
-					requiredMessage: "User ID is required to restrict access",
-					validate: validateTelegramUserId,
-				},
-			],
-			buildArgs: ({ userId }) => ["--allowed-user-id", userId ?? ""],
-		},
-	},
-	{
-		id: "slack",
-		name: "Slack",
-		type: "hybrid",
-		hint: "Public URL for webhook mode; leave blank for socket mode.",
-		fields: [
-			{
-				flag: "--bot-token",
-				label: "Bot token",
-				placeholder: "xoxb-...",
-				required: true,
-				help: [
-					"Go to api.slack.com/apps and create a new app",
-					"Add Bot Token Scopes: chat:write, app_mentions:read, channels:history, channels:read, im:history, im:read, im:write, users:read",
-					"Install to workspace and copy the Bot Token",
-				],
-			},
-			{
-				flag: "--base-url",
-				label: "Public base URL",
-				placeholder: "leave blank for socket mode",
-				help: [
-					"Enter a publicly accessible URL for webhook mode",
-					"Leave blank to use Slack socket mode instead",
-				],
-			},
-			{
-				flag: "--signing-secret",
-				label: "Signing secret",
-				required: true,
-				help: ["Found in your app's Basic Information page"],
-				includeWhen: { flag: "--base-url", notEquals: "" },
-			},
-			{
-				flag: "--app-token",
-				label: "App-level token",
-				placeholder: "xapp-...",
-				required: true,
-				help: [
-					"Enable Socket Mode in the Slack app",
-					"Generate an app-level token with the connections:write scope",
-				],
-				includeWhen: { flag: "--base-url", equals: "" },
-			},
-		],
-		security: {
-			prompt: "Restrict which Slack users can interact with the bot?",
-			fields: [
-				{
-					key: "teamId",
-					label: "Allowed Slack workspace ID",
-					placeholder: "T01ABC123",
-					help: [
-						"Open your Slack workspace URL in a browser",
-						"The workspace ID is the segment after /client/, for example T01ABC123",
-					],
-					requiredMessage: "Workspace ID is required to restrict access",
-					validate: validateSlackTeamId,
-				},
-				{
-					key: "userId",
-					label: "Allowed Slack member ID",
-					placeholder: "U01ABC123",
-					help: [
-						"Click a user's name in Slack, then View full profile",
-						"Click ... and Copy member ID",
-					],
-					requiredMessage: "Member ID is required to restrict access",
-					validate: validateSlackUserId,
-				},
-			],
-			buildArgs: ({ teamId, userId }) => [
-				"--hook-command",
-				`jq -r ".payload.actor.participantKey" | grep -qx "slack:team:${teamId}:user:${userId}" && echo '{"action":"allow"}' || echo '{"action":"deny"}'`,
-			],
-		},
-	},
-	{
-		id: "discord",
-		name: "Discord",
-		type: "webhook",
-		hint: "Requires a Discord app and public URL.",
-		fields: [
-			{
-				flag: "--application-id",
-				label: "Application ID",
-				required: true,
-				help: [
-					"Go to discord.com/developers/applications",
-					"Create a new app, copy the Application ID",
-				],
-			},
-			{
-				flag: "--bot-token",
-				label: "Bot token",
-				required: true,
-				help: ["Go to Bot section, create a bot, copy the token"],
-			},
-			{
-				flag: "--public-key",
-				label: "Public key",
-				required: true,
-				help: ["Found in General Information of your app"],
-			},
-			{
-				flag: "--base-url",
-				label: "Public base URL",
-				placeholder: "https://example.com",
-				required: true,
-				help: [
-					"Base URL for the connector",
-					"For Discord, set the Interactions Endpoint URL to <base-url>/api/webhooks/discord",
-				],
-			},
-		],
-	},
-	{
-		id: "whatsapp",
-		name: "WhatsApp",
-		type: "webhook",
-		hint: "Requires Meta developer account and public URL.",
-		fields: [
-			{
-				flag: "--phone-number-id",
-				label: "Phone number ID",
-				required: true,
-				help: ["From your WhatsApp Business account in Meta Developer portal"],
-			},
-			{
-				flag: "--access-token",
-				label: "Access token",
-				required: true,
-				help: ["Generate a permanent token in Meta Developer portal"],
-			},
-			{
-				flag: "--app-secret",
-				label: "App secret",
-				required: true,
-				help: ["Found in App Settings > Basic"],
-			},
-			{
-				flag: "--verify-token",
-				label: "Webhook verify token",
-				placeholder: "my-verify-token",
-				required: true,
-				help: ["Any string you choose, used to verify webhook setup"],
-			},
-			{
-				flag: "--base-url",
-				label: "Public base URL",
-				placeholder: "https://example.com",
-				required: true,
-			},
-		],
-	},
-	{
-		id: "gchat",
-		name: "Google Chat",
-		type: "webhook",
-		hint: "Requires Google Cloud project and public URL.",
-		fields: [
-			{
-				flag: "--credentials-json",
-				label: "Service account credentials JSON",
-				required: true,
-				help: [
-					"Create a service account in Google Cloud Console",
-					"Download the credentials JSON file",
-					"Paste the JSON content here",
-				],
-			},
-			{
-				flag: "--base-url",
-				label: "Public base URL",
-				placeholder: "https://example.com",
-				required: true,
-			},
-		],
-	},
-	{
-		id: "linear",
-		name: "Linear",
-		type: "webhook",
-		hint: "React to Linear issues and comments.",
-		fields: [
-			{
-				flag: "--api-key",
-				label: "API key",
-				required: true,
-				help: ["Go to Linear Settings > API > Personal API keys"],
-			},
-			{
-				flag: "--webhook-secret",
-				label: "Webhook signing secret",
-				required: true,
-				help: [
-					"Go to Settings > API > Webhooks, create one",
-					"Copy the signing secret",
-				],
-			},
-			{
-				flag: "--base-url",
-				label: "Public base URL",
-				placeholder: "https://example.com",
-				required: true,
-			},
-		],
-	},
-];
+export const PLATFORMS = CONNECTOR_PLATFORMS;
+export const shouldIncludeField = shouldIncludeConnectorField;

apps/cli/src/wizards/mcp/index.ts

@@ -51,6 +51,19 @@ interface UrlServerConfig {
 	authMode: RemoteAuthMode;
 }
 
+export interface McpAddDefaults {
+	name?: string;
+	type?: McpTransport["type"];
+	command?: string;
+	url?: string;
+}
+
+export interface RunMcpWizardOptions {
+	initialAction?: "add";
+	addDefaults?: McpAddDefaults;
+	exitAfterInitialAction?: boolean;
+}
+
 export function parseStdioCommand(input: string): string[] {
 	const tokens: string[] = [];
 	let current = "";
@@ -96,12 +109,15 @@ export function parseStdioCommand(input: string): string[] {
 	return tokens;
 }
 
-async function collectStdioTransport(): Promise<McpTransport | null> {
+async function collectStdioTransport(
+	defaultCommand?: string,
+): Promise<McpTransport | null> {
 	p.log.info("Quoted arguments and escaped spaces are supported");
 
 	const command = await p.text({
 		message: "Command to run",
 		placeholder: "npx -y @modelcontextprotocol/server-filesystem",
+		initialValue: defaultCommand,
 		validate: (v) => {
 			if (!v?.trim()) return "Command is required";
 			return undefined;
@@ -141,10 +157,12 @@ async function collectStdioTransport(): Promise<McpTransport | null> {
 
 async function collectUrlTransport(
 	type: "sse" | "streamableHttp",
+	defaultUrl?: string,
 ): Promise<UrlServerConfig | null> {
 	const url = await p.text({
 		message: "Server URL",
 		placeholder: "https://example.com/mcp",
+		initialValue: defaultUrl,
 		validate: (v) => {
 			if (!v?.trim()) return "URL is required";
 			try {
@@ -211,10 +229,11 @@ async function collectUrlTransport(
 	};
 }
 
-async function actionAdd(): Promise<void> {
+async function actionAdd(defaults?: McpAddDefaults): Promise<void> {
 	const name = await p.text({
 		message: "Server name",
 		placeholder: "my-mcp-server",
+		initialValue: defaults?.name,
 		validate: (v) => {
 			if (!v?.trim()) return "Name is required";
 			const existing = loadServers();
@@ -228,6 +247,7 @@ async function actionAdd(): Promise<void> {
 
 	const type = await p.select({
 		message: "Server type",
+		initialValue: defaults?.type,
 		options: [
 			{
 				value: "stdio",
@@ -251,9 +271,12 @@ async function actionAdd(): Promise<void> {
 	let transport: McpTransport | null;
 	let authMode: RemoteAuthMode = "none";
 	if (type === "stdio") {
-		transport = await collectStdioTransport();
+		transport = await collectStdioTransport(defaults?.command);
 	} else {
-		const config = await collectUrlTransport(type as "sse" | "streamableHttp");
+		const config = await collectUrlTransport(
+			type as "sse" | "streamableHttp",
+			defaults?.url,
+		);
 		transport = config?.transport ?? null;
 		authMode = config?.authMode ?? "none";
 	}
@@ -407,9 +430,25 @@ async function actionAuthorizeOAuth(): Promise<void> {
 	await authorizeOAuth(name);
 }
 
-export async function runMcpWizard(): Promise<number> {
+export async function runMcpWizard(
+	options: RunMcpWizardOptions = {},
+): Promise<number> {
 	p.intro("MCP Servers");
 
+	if (options.initialAction === "add") {
+		let initialActionExitCode = 0;
+		try {
+			await actionAdd(options.addDefaults);
+		} catch (err) {
+			initialActionExitCode = 1;
+			p.log.error(err instanceof Error ? err.message : String(err));
+		}
+		if (options.exitAfterInitialAction === true) {
+			p.outro("Done");
+			return initialActionExitCode;
+		}
+	}
+
 	let keepGoing = true;
 	while (keepGoing) {
 		const action = await p.select({

apps/cli/src/wizards/mcp/oauth.ts

@@ -17,6 +17,7 @@ function toErrorMessage(error: unknown): string {
 
 export async function authorizeMcpServerOAuthWithBrowser(
 	name: string,
+	options: { throwOnError?: boolean } = {},
 ): Promise<void> {
 	p.log.info("Opening browser for MCP OAuth authorization");
 	try {
@@ -33,6 +34,9 @@ export async function authorizeMcpServerOAuthWithBrowser(
 		});
 		p.log.success(result.message);
 	} catch (error) {
+		if (options.throwOnError === true) {
+			throw error instanceof Error ? error : new Error(toErrorMessage(error));
+		}
 		p.log.error(`OAuth authorization failed: ${toErrorMessage(error)}`);
 		p.log.warn(
 			`Server "${name}" is still saved. Choose "Authorize OAuth" to retry.`,

apps/cline-hub/package.json

@@ -12,6 +12,7 @@
 		"dev": "bun run src/dev.ts",
 		"start": "bun run src/server.ts",
 		"smoke:options": "bun run src/validate-options.ts",
+		"test": "bunx vitest run --config vitest.config.ts",
 		"typecheck": "bun tsc -p tsconfig.json --noEmit"
 	},
 	"dependencies": {

apps/cline-hub/src/options.ts

@@ -1,3 +1,5 @@
+import { isIP } from "node:net";
+
 export interface ClineHubServerOptions {
 	host: string;
 	port: number;
@@ -47,6 +49,9 @@ function normalizePublicUrl(
 			`PUBLIC_URL must use http: or https:, got ${parsed.protocol}`,
 		);
 	}
+	if (shouldAddDashboardPortToPublicUrl(parsed, port)) {
+		parsed.port = String(port);
+	}
 	parsed.hash = "";
 	return parsed.toString().replace(/\/$/, "");
 }
@@ -85,12 +90,26 @@ export function resolveClineHubServerOptions(
 	};
 }
 
+function isDefaultProtocolPort(url: URL, port: number): boolean {
+	return (
+		(url.protocol === "http:" && port === 80) ||
+		(url.protocol === "https:" && port === 443)
+	);
+}
+
+function shouldAddDashboardPortToPublicUrl(url: URL, port: number): boolean {
+	if (url.port || isDefaultProtocolPort(url, port)) return false;
+	const hostname = url.hostname.replace(/^\[|\]$/g, "");
+	return hostname === "localhost" || isIP(hostname) !== 0;
+}
+
 export function buildInviteUrl(
 	publicUrl: string,
 	roomSecret: string | undefined,
 ): string {
-	if (!roomSecret) return publicUrl;
 	const url = new URL(publicUrl);
-	url.searchParams.set("roomSecret", roomSecret);
+	if (roomSecret) {
+		url.searchParams.set("roomSecret", roomSecret);
+	}
 	return url.toString();
 }

apps/cline-hub/src/server.ts

@@ -4,6 +4,7 @@ import {
 	handleToolApprovalResponse,
 	rejectOrphanedApprovals,
 } from "./server/approvals";
+import { isAuthorizedBrowserToDesktopRequest } from "./server/browser-auth";
 import {
 	browserConfig,
 	host,
@@ -14,7 +15,11 @@ import {
 	webviewDistDir,
 } from "./server/deps";
 import { handleDesktopCommand } from "./server/desktop-commands";
-import { createJsonResponse, WebviewAssets } from "./server/http";
+import {
+	createJsonResponse,
+	isWebviewRoute,
+	WebviewAssets,
+} from "./server/http";
 import {
 	attachHub,
 	detachHub,
@@ -22,6 +27,7 @@ import {
 	syncHubClientsAndSessions,
 	syncHubHealth,
 } from "./server/hub";
+import { fetchMarketplaceCatalog } from "./server/marketplace";
 import {
 	loadModels,
 	runProviderOAuthLogin,
@@ -52,17 +58,33 @@ export interface ClineHubDashboardServer {
 	stop: () => Promise<void>;
 }
 
+const PUBLIC_BROWSER_PATHS = new Set([
+	"/version",
+	"/health",
+	"/config.json",
+	"/api/marketplace/catalog",
+	"/icon.png",
+	"/icon.svg",
+	"/icon.ico",
+	"/32x32.png",
+	"/cline-logo-filled.svg",
+	"/favicon.svg",
+]);
+
+function isPublicStaticAssetPath(pathname: string): boolean {
+	return pathname.startsWith("/assets/") || PUBLIC_BROWSER_PATHS.has(pathname);
+}
+
+function isPublicBrowserRoute(_req: Request, url: URL): boolean {
+	return isWebviewRoute(url.pathname) || isPublicStaticAssetPath(url.pathname);
+}
+
 export async function startClineHubDashboardServer(): Promise<ClineHubDashboardServer> {
 	const ctx = new HubContext();
 	const assets = new WebviewAssets(webviewDistDir);
 	const syncClientsAndSessions = () => syncHubClientsAndSessions(ctx);
 	let stopped = false;
 
-	function isAuthorizedBrowserRequest(url: URL): boolean {
-		if (!roomSecret) return true;
-		return url.searchParams.get("roomSecret") === roomSecret;
-	}
-
 	await attachHub(ctx);
 	const healthInterval = setInterval(() => {
 		void (async () => {
@@ -76,6 +98,21 @@ export async function startClineHubDashboardServer(): Promise<ClineHubDashboardS
 		hostname: host,
 		async fetch(req, server) {
 			const url = new URL(req.url);
+			if (
+				!isAuthorizedBrowserToDesktopRequest(
+					req,
+					url,
+					{
+						bindHost: host,
+						port,
+						publicUrl,
+						roomSecret,
+					},
+					isPublicBrowserRoute,
+				)
+			) {
+				return createJsonResponse({ error: "unauthorized_browser" }, 403);
+			}
 			if (url.pathname === "/version") {
 				return createJsonResponse({ coreVersion: CORE_BUILD_VERSION });
 			}
@@ -84,9 +121,6 @@ export async function startClineHubDashboardServer(): Promise<ClineHubDashboardS
 				return createJsonResponse(hubStatusPayload(ctx));
 			}
 			if (url.pathname === "/browser") {
-				if (!isAuthorizedBrowserRequest(url)) {
-					return createJsonResponse({ error: "invalid_room_secret" }, 401);
-				}
 				const displayName = `Browser ${Math.random().toString(36).slice(2, 6)}`;
 				const data = {
 					socket: undefined as never,
@@ -99,6 +133,21 @@ export async function startClineHubDashboardServer(): Promise<ClineHubDashboardS
 			if (url.pathname === "/config.json") {
 				return createJsonResponse(browserConfig);
 			}
+			if (url.pathname === "/api/marketplace/catalog") {
+				try {
+					return createJsonResponse(await fetchMarketplaceCatalog());
+				} catch (error) {
+					return createJsonResponse(
+						{
+							error:
+								error instanceof Error
+									? error.message
+									: "Failed to fetch marketplace catalog",
+						},
+						502,
+					);
+				}
+			}
 			return assets.serve(url.pathname);
 		},
 		websocket: {

apps/cline-hub/src/server/browser-auth.test.ts

@@ -0,0 +1,359 @@
+import { describe, expect, it } from "vitest";
+import {
+	allowedBrowserHosts,
+	allowedBrowserOrigins,
+	isAuthorizedBrowserRequest,
+	isAuthorizedBrowserToDesktopRequest,
+	requiresBrowserRequestAuth,
+} from "./browser-auth";
+
+const defaultOptions = {
+	bindHost: "127.0.0.1",
+	port: 8787,
+	publicUrl: "http://127.0.0.1:8787",
+};
+
+const publicRoute = (_req: Request, url: URL) => url.pathname === "/public";
+
+function browserRequest(
+	origin?: string,
+	init?: Omit<RequestInit, "headers"> & {
+		headers?: Record<string, string>;
+	},
+): Request {
+	return new Request("http://127.0.0.1:8787/browser", {
+		...init,
+		headers: {
+			host: "127.0.0.1:8787",
+			...(origin === undefined ? {} : { origin }),
+			...(init?.headers ?? {}),
+		},
+	});
+}
+
+describe("allowedBrowserOrigins", () => {
+	it("allows the configured public URL origin and local aliases for local binds", () => {
+		expect([...allowedBrowserOrigins(defaultOptions)].sort()).toEqual([
+			"http://127.0.0.1:8787",
+			"http://[::1]:8787",
+			"http://localhost:8787",
+		]);
+	});
+
+	it("uses the configured public URL scheme for local aliases", () => {
+		expect(
+			[
+				...allowedBrowserOrigins({
+					...defaultOptions,
+					publicUrl: "https://127.0.0.1:8787",
+				}),
+			].sort(),
+		).toEqual([
+			"https://127.0.0.1:8787",
+			"https://[::1]:8787",
+			"https://localhost:8787",
+		]);
+	});
+
+	it("omits default protocol ports for local alias origins", () => {
+		expect(
+			[
+				...allowedBrowserOrigins({
+					bindHost: "127.0.0.1",
+					port: 80,
+					publicUrl: "http://localhost",
+				}),
+			].sort(),
+		).toEqual(["http://127.0.0.1", "http://[::1]", "http://localhost"]);
+
+		expect(
+			[
+				...allowedBrowserOrigins({
+					bindHost: "127.0.0.1",
+					port: 443,
+					publicUrl: "https://localhost",
+				}),
+			].sort(),
+		).toEqual(["https://127.0.0.1", "https://[::1]", "https://localhost"]);
+	});
+
+	it("allows the configured public URL origin and explicit bind origin for non-local binds", () => {
+		expect(
+			[
+				...allowedBrowserOrigins({
+					bindHost: "0.0.0.0",
+					port: 8787,
+					publicUrl: "https://example.ngrok-free.app",
+					roomSecret: "secret",
+				}),
+			].sort(),
+		).toEqual(["https://0.0.0.0:8787", "https://example.ngrok-free.app"]);
+	});
+});
+
+describe("allowedBrowserHosts", () => {
+	it("allows the configured public URL host and local aliases for local binds", () => {
+		expect([...allowedBrowserHosts(defaultOptions)].sort()).toEqual([
+			"127.0.0.1:8787",
+			"[::1]:8787",
+			"localhost:8787",
+		]);
+	});
+
+	it("omits default protocol ports for local alias hosts", () => {
+		expect(
+			[
+				...allowedBrowserHosts({
+					bindHost: "127.0.0.1",
+					port: 80,
+					publicUrl: "http://localhost",
+				}),
+			].sort(),
+		).toEqual(["127.0.0.1", "[::1]", "localhost"]);
+
+		expect(
+			[
+				...allowedBrowserHosts({
+					bindHost: "127.0.0.1",
+					port: 443,
+					publicUrl: "https://localhost",
+				}),
+			].sort(),
+		).toEqual(["127.0.0.1", "[::1]", "localhost"]);
+	});
+
+	it("allows the configured public URL host and explicit bind host for non-local binds", () => {
+		expect(
+			[
+				...allowedBrowserHosts({
+					bindHost: "0.0.0.0",
+					port: 8787,
+					publicUrl: "https://example.ngrok-free.app",
+					roomSecret: "secret",
+				}),
+			].sort(),
+		).toEqual(["0.0.0.0:8787", "example.ngrok-free.app"]);
+	});
+});
+
+describe("requiresBrowserRequestAuth", () => {
+	it("does not require browser auth for public GET routes", () => {
+		expect(
+			requiresBrowserRequestAuth(
+				new Request("http://127.0.0.1:8787/public"),
+				new URL("http://127.0.0.1:8787/public"),
+				publicRoute,
+			),
+		).toBe(false);
+	});
+
+	it("requires browser auth for unknown paths even when they use GET", () => {
+		expect(
+			requiresBrowserRequestAuth(
+				new Request("http://127.0.0.1:8787/future-api"),
+				new URL("http://127.0.0.1:8787/future-api"),
+				publicRoute,
+			),
+		).toBe(true);
+	});
+
+	it("requires browser auth for privileged paths even when they use GET", () => {
+		expect(
+			requiresBrowserRequestAuth(
+				new Request("http://127.0.0.1:8787/browser"),
+				new URL("http://127.0.0.1:8787/browser"),
+				publicRoute,
+			),
+		).toBe(true);
+	});
+
+	it("requires browser auth for every WebSocket upgrade path", () => {
+		expect(
+			requiresBrowserRequestAuth(
+				new Request("http://127.0.0.1:8787/future-socket", {
+					headers: { upgrade: "websocket" },
+				}),
+				new URL("http://127.0.0.1:8787/future-socket"),
+				publicRoute,
+			),
+		).toBe(true);
+	});
+
+	it("requires browser auth for every unsafe HTTP method", () => {
+		expect(
+			requiresBrowserRequestAuth(
+				new Request("http://127.0.0.1:8787/future-api", { method: "POST" }),
+				new URL("http://127.0.0.1:8787/future-api"),
+				publicRoute,
+			),
+		).toBe(true);
+	});
+});
+
+describe("isAuthorizedBrowserRequest", () => {
+	it.each([
+		"http://127.0.0.1:8787",
+		"http://localhost:8787",
+		"http://[::1]:8787",
+	])("accepts local dashboard origin %s without a room secret", (origin) => {
+		expect(
+			isAuthorizedBrowserRequest(
+				browserRequest(origin),
+				new URL("http://127.0.0.1:8787/browser"),
+				defaultOptions,
+			),
+		).toBe(true);
+	});
+
+	it.each([
+		undefined,
+		"",
+		"null",
+		"not a url",
+		"http://evil.attacker.example.com",
+		"http://127.0.0.1:9999",
+		"https://127.0.0.1:8787",
+	])("rejects untrusted origin %s", (origin) => {
+		expect(
+			isAuthorizedBrowserRequest(
+				browserRequest(origin),
+				new URL("http://127.0.0.1:8787/browser"),
+				defaultOptions,
+			),
+		).toBe(false);
+	});
+
+	it.each([
+		undefined,
+		"",
+		"evil.attacker.example.com",
+		"127.0.0.1:9999",
+		"localhost:9999",
+	])("rejects untrusted host %s", (host) => {
+		expect(
+			isAuthorizedBrowserRequest(
+				browserRequest("http://127.0.0.1:8787", {
+					headers: host === undefined ? { host: "" } : { host },
+				}),
+				new URL("http://127.0.0.1:8787/browser"),
+				defaultOptions,
+			),
+		).toBe(false);
+	});
+
+	it("allows explicit wildcard bind host and origin when a room secret is configured", () => {
+		expect(
+			isAuthorizedBrowserRequest(
+				browserRequest("http://0.0.0.0:8787", {
+					headers: { host: "0.0.0.0:8787" },
+				}),
+				new URL("http://0.0.0.0:8787/browser?roomSecret=invite-123"),
+				{
+					bindHost: "0.0.0.0",
+					port: 8787,
+					publicUrl: "http://127.0.0.1:8787",
+					roomSecret: "invite-123",
+				},
+			),
+		).toBe(true);
+	});
+
+	it("requires trusted origin, trusted host, and room secret when a room secret is configured", () => {
+		const options = { ...defaultOptions, roomSecret: "invite-123" };
+
+		expect(
+			isAuthorizedBrowserRequest(
+				browserRequest("http://127.0.0.1:8787"),
+				new URL("http://127.0.0.1:8787/browser?roomSecret=invite-123"),
+				options,
+			),
+		).toBe(true);
+		expect(
+			isAuthorizedBrowserRequest(
+				browserRequest("http://127.0.0.1:8787"),
+				new URL("http://127.0.0.1:8787/browser"),
+				options,
+			),
+		).toBe(false);
+		expect(
+			isAuthorizedBrowserRequest(
+				browserRequest("http://evil.attacker.example.com"),
+				new URL("http://127.0.0.1:8787/browser?roomSecret=invite-123"),
+				options,
+			),
+		).toBe(false);
+		expect(
+			isAuthorizedBrowserRequest(
+				browserRequest("http://127.0.0.1:8787", {
+					headers: { host: "evil.attacker.example.com" },
+				}),
+				new URL("http://127.0.0.1:8787/browser?roomSecret=invite-123"),
+				options,
+			),
+		).toBe(false);
+	});
+});
+
+describe("isAuthorizedBrowserToDesktopRequest", () => {
+	it("allows safe public GET routes without an origin", () => {
+		expect(
+			isAuthorizedBrowserToDesktopRequest(
+				new Request("http://127.0.0.1:8787/public"),
+				new URL("http://127.0.0.1:8787/public"),
+				defaultOptions,
+				publicRoute,
+			),
+		).toBe(true);
+	});
+
+	it("rejects future WebSocket paths from untrusted origins by default", () => {
+		expect(
+			isAuthorizedBrowserToDesktopRequest(
+				new Request("http://127.0.0.1:8787/future-socket", {
+					headers: {
+						host: "127.0.0.1:8787",
+						origin: "http://evil.attacker.example.com",
+						upgrade: "websocket",
+					},
+				}),
+				new URL("http://127.0.0.1:8787/future-socket"),
+				defaultOptions,
+				publicRoute,
+			),
+		).toBe(false);
+	});
+
+	it("rejects future unsafe HTTP routes from untrusted origins by default", () => {
+		expect(
+			isAuthorizedBrowserToDesktopRequest(
+				new Request("http://127.0.0.1:8787/future-api", {
+					method: "POST",
+					headers: {
+						host: "127.0.0.1:8787",
+						origin: "http://evil.attacker.example.com",
+					},
+				}),
+				new URL("http://127.0.0.1:8787/future-api"),
+				defaultOptions,
+				publicRoute,
+			),
+		).toBe(false);
+	});
+
+	it("allows future unsafe HTTP routes from trusted origins", () => {
+		expect(
+			isAuthorizedBrowserToDesktopRequest(
+				new Request("http://127.0.0.1:8787/future-api", {
+					method: "POST",
+					headers: {
+						host: "127.0.0.1:8787",
+						origin: "http://127.0.0.1:8787",
+					},
+				}),
+				new URL("http://127.0.0.1:8787/future-api"),
+				defaultOptions,
+				publicRoute,
+			),
+		).toBe(true);
+	});
+});

apps/cline-hub/src/server/browser-auth.ts

@@ -0,0 +1,134 @@
+import { isNonLocalBindHost } from "../options";
+
+export interface BrowserRequestAuthOptions {
+	bindHost: string;
+	port: number;
+	publicUrl: string;
+	roomSecret?: string;
+}
+
+const SAFE_HTTP_METHODS = new Set(["GET", "HEAD", "OPTIONS"]);
+
+export type PublicBrowserRoutePredicate = (req: Request, url: URL) => boolean;
+
+function isWebSocketUpgrade(req: Request): boolean {
+	return req.headers.get("upgrade")?.toLowerCase() === "websocket";
+}
+
+function parseOrigin(value: string | null): string | undefined {
+	const origin = parseHeader(value);
+	try {
+		return new URL(origin ?? "").origin;
+	} catch {
+		return undefined;
+	}
+}
+
+function parseHeader(value: string | null): string | undefined {
+	const host = value?.trim().toLowerCase();
+	return host || undefined;
+}
+
+function formatHostForOrigin(host: string): string {
+	return host.includes(":") && !host.startsWith("[") ? `[${host}]` : host;
+}
+
+function isDefaultProtocolPort(protocol: string, port: number): boolean {
+	return (
+		(protocol === "http:" && port === 80) ||
+		(protocol === "https:" && port === 443)
+	);
+}
+
+function originForHost(protocol: string, host: string, port: number): string {
+	return new URL(`${protocol}//${formatHostForOrigin(host)}:${port}`).origin;
+}
+
+function hostHeaderForHost(
+	protocol: string,
+	host: string,
+	port: number,
+): string {
+	const formattedHost = formatHostForOrigin(host).toLowerCase();
+	return isDefaultProtocolPort(protocol, port)
+		? formattedHost
+		: `${formattedHost}:${port}`;
+}
+
+export function allowedBrowserOrigins({
+	bindHost,
+	port,
+	publicUrl,
+}: BrowserRequestAuthOptions): Set<string> {
+	const publicUrlParts = new URL(publicUrl);
+	const origins = new Set<string>();
+	origins.add(publicUrlParts.origin);
+
+	origins.add(originForHost(publicUrlParts.protocol, bindHost, port));
+
+	if (!isNonLocalBindHost(bindHost)) {
+		for (const hostname of ["127.0.0.1", "localhost", "[::1]"]) {
+			origins.add(originForHost(publicUrlParts.protocol, hostname, port));
+		}
+	}
+
+	return origins;
+}
+
+export function allowedBrowserHosts({
+	bindHost,
+	port,
+	publicUrl,
+}: BrowserRequestAuthOptions): Set<string> {
+	const publicUrlParts = new URL(publicUrl);
+	const hosts = new Set<string>();
+	const publicHost = publicUrlParts.host.toLowerCase();
+	hosts.add(publicHost);
+
+	hosts.add(hostHeaderForHost(publicUrlParts.protocol, bindHost, port));
+
+	if (!isNonLocalBindHost(bindHost)) {
+		for (const hostname of ["127.0.0.1", "localhost", "[::1]"]) {
+			hosts.add(hostHeaderForHost(publicUrlParts.protocol, hostname, port));
+		}
+	}
+
+	return hosts;
+}
+
+export function requiresBrowserRequestAuth(
+	req: Request,
+	url: URL,
+	isPublicBrowserRoute: PublicBrowserRoutePredicate,
+): boolean {
+	if (isWebSocketUpgrade(req)) return true;
+	if (!SAFE_HTTP_METHODS.has(req.method.toUpperCase())) return true;
+	return !isPublicBrowserRoute(req, url);
+}
+
+export function isAuthorizedBrowserRequest(
+	req: Request,
+	url: URL,
+	options: BrowserRequestAuthOptions,
+): boolean {
+	const host = parseHeader(req.headers.get("host"));
+	if (!host || !allowedBrowserHosts(options).has(host)) return false;
+
+	const origin = parseOrigin(req.headers.get("origin"));
+	if (!origin || !allowedBrowserOrigins(options).has(origin)) return false;
+
+	if (!options.roomSecret) return true;
+	return url.searchParams.get("roomSecret") === options.roomSecret;
+}
+
+export function isAuthorizedBrowserToDesktopRequest(
+	req: Request,
+	url: URL,
+	options: BrowserRequestAuthOptions,
+	isPublicBrowserRoute: PublicBrowserRoutePredicate,
+): boolean {
+	return (
+		!requiresBrowserRequestAuth(req, url, isPublicBrowserRoute) ||
+		isAuthorizedBrowserRequest(req, url, options)
+	);
+}

apps/cline-hub/src/server/connectors.test.ts

@@ -0,0 +1,97 @@
+import { describe, expect, it } from "vitest";
+import { __test__ } from "./connectors";
+
+describe("connector launch command", () => {
+	it("uses Bun conditions when launching the source CLI from Bun", () => {
+		expect(
+			__test__.buildCliConnectCommand(["telegram", "--bot-token", "token"], {
+				execPath: "/Users/test/.bun/bin/bun",
+				cliPath: "/repo/apps/cli/src/index.ts",
+				exists: () => true,
+			}),
+		).toEqual({
+			launcher: "/Users/test/.bun/bin/bun",
+			childArgs: [
+				"--conditions=development",
+				"/repo/apps/cli/src/index.ts",
+				"connect",
+				"telegram",
+				"--bot-token",
+				"token",
+			],
+		});
+	});
+
+	it("uses compiled CLI subcommands without Bun flags", () => {
+		expect(
+			__test__.buildCliConnectCommand(["telegram", "--bot-token", "token"], {
+				execPath: "/Applications/Cline/bin/cline",
+				cliPath: "/repo/apps/cli/src/index.ts",
+				exists: () => true,
+			}),
+		).toEqual({
+			launcher: "/Applications/Cline/bin/cline",
+			childArgs: ["connect", "telegram", "--bot-token", "token"],
+		});
+	});
+
+	it("uses Bun conditions when launching the source CLI from Node", () => {
+		expect(
+			__test__.buildCliConnectCommand(["telegram", "--bot-token", "token"], {
+				execPath: "/usr/local/bin/node",
+				cliPath: "/repo/apps/cli/src/index.ts",
+				exists: () => true,
+			}),
+		).toEqual({
+			launcher: "bun",
+			childArgs: [
+				"--conditions=development",
+				"/repo/apps/cli/src/index.ts",
+				"connect",
+				"telegram",
+				"--bot-token",
+				"token",
+			],
+		});
+	});
+
+	it("detects Windows Node when launching the source CLI", () => {
+		expect(
+			__test__.buildCliConnectCommand(["telegram", "--bot-token", "token"], {
+				execPath: "node.exe",
+				cliPath: "C:\\repo\\apps\\cli\\src\\index.ts",
+				exists: () => true,
+			}),
+		).toEqual({
+			launcher: "bun",
+			childArgs: [
+				"--conditions=development",
+				"C:\\repo\\apps\\cli\\src\\index.ts",
+				"connect",
+				"telegram",
+				"--bot-token",
+				"token",
+			],
+		});
+	});
+
+	it("strips terminal color codes from connector command failures", () => {
+		expect(
+			__test__.normalizeConnectorError(
+				"\u001B[31merror:\u001B[0m error: unknown option '--conditions=development'",
+				"connector start failed",
+			),
+		).toBe("unknown option '--conditions=development'");
+	});
+
+	it("turns Telegram unauthorized responses into a token validation message", () => {
+		expect(
+			__test__.normalizeConnectorError(
+				"\u001B[31merror:\u001B[0m Telegram getMe failed (401 Unauthorized): Unauthorized",
+				"connector start failed",
+			),
+		).toBe(
+			"Telegram rejected this bot token. Copy the token from @BotFather and try again.",
+		);
+	});
+});

apps/cline-hub/src/server/connectors.ts

@@ -1,5 +1,8 @@
 import { spawn } from "node:child_process";
+import { existsSync } from "node:fs";
+import { basename } from "node:path";
 import process from "node:process";
+import { withResolvedClineBuildEnv } from "@cline/shared";
 import { listConnectorCatalog } from "../../../cli/src/connectors/catalog";
 import { listActiveConnectors } from "../../../cli/src/connectors/status";
 import {
@@ -13,6 +16,68 @@ import type {
 import { cliIndexPath, workspaceRoot } from "./deps";
 import { asRecord, asString } from "./utils";
 
+type CliConnectCommand = {
+	launcher: string;
+	childArgs: string[];
+};
+
+const ANSI_ESCAPE_PATTERN = new RegExp(
+	[
+		"[\\u001B\\u009B][[\\]()#;?]*",
+		"(?:(?:(?:[a-zA-Z\\d]*(?:;[a-zA-Z\\d]*)*)?\\u0007)",
+		"|(?:(?:\\d{1,4}(?:;\\d{0,4})*)?[\\dA-PR-TZcf-nq-uy=><~]))",
+	].join(""),
+	"g",
+);
+
+function stripAnsi(value: string): string {
+	return value.replace(ANSI_ESCAPE_PATTERN, "");
+}
+
+function normalizeConnectorError(rawMessage: string, fallback: string): string {
+	const message =
+		stripAnsi(rawMessage)
+			.replace(/\r\n/g, "\n")
+			.trim()
+			.replace(/^(?:error:\s*)+/i, "")
+			.trim() || fallback;
+
+	if (
+		/^Telegram getMe failed \(401 Unauthorized\): Unauthorized$/i.test(message)
+	) {
+		return "Telegram rejected this bot token. Copy the token from @BotFather and try again.";
+	}
+
+	return message.slice(0, 2_000);
+}
+
+function buildCliConnectCommand(
+	args: string[],
+	options: {
+		execPath?: string;
+		cliPath?: string;
+		exists?: (path: string) => boolean;
+	} = {},
+): CliConnectCommand {
+	const execPath = options.execPath ?? process.execPath;
+	const cliPath = options.cliPath ?? cliIndexPath;
+	const exists = options.exists ?? existsSync;
+	const runtimeName = basename(execPath).toLowerCase();
+	const isBunRuntime = runtimeName.includes("bun");
+	const isNodeRuntime = runtimeName === "node" || runtimeName === "node.exe";
+	const useBunSourceEntrypoint =
+		(isBunRuntime || isNodeRuntime) && exists(cliPath);
+	const launcher = isBunRuntime
+		? execPath
+		: useBunSourceEntrypoint
+			? "bun"
+			: execPath;
+	const childArgs = useBunSourceEntrypoint
+		? ["--conditions=development", cliPath, "connect", ...args]
+		: ["connect", ...args];
+	return { launcher, childArgs };
+}
+
 export function connectorChannelsPayload(): WebviewConnectorChannelsResponse {
 	const supported = new Set(
 		listConnectorCatalog().map((connector) => connector.name),
@@ -55,23 +120,14 @@ async function runCliConnectCommand(args: string[]): Promise<{
 	stdout: string;
 	stderr: string;
 }> {
-	const launcher = (process.versions as Record<string, string | undefined>).bun
-		? process.execPath
-		: "bun";
-	const child = spawn(
-		launcher,
-		["--conditions=development", cliIndexPath, "connect", ...args],
-		{
-			cwd: workspaceRoot,
-			env: {
-				...process.env,
-				CLINE_BUILD_ENV: process.env.CLINE_BUILD_ENV ?? "development",
-			},
-			stdio: ["ignore", "pipe", "pipe"],
-			// Prevent a console window from flashing on Windows.
-			windowsHide: true,
-		},
-	);
+	const { launcher, childArgs } = buildCliConnectCommand(args);
+	const child = spawn(launcher, childArgs, {
+		cwd: workspaceRoot,
+		env: withResolvedClineBuildEnv(process.env),
+		stdio: ["ignore", "pipe", "pipe"],
+		// Prevent a console window from flashing on Windows.
+		windowsHide: true,
+	});
 	let stdout = "";
 	let stderr = "";
 	child.stdout?.setEncoding("utf8");
@@ -157,9 +213,10 @@ export async function startConnectorChannel(
 	const result = await runCliConnectCommand(cliArgs);
 	if (result.code !== 0) {
 		throw new Error(
-			(result.stderr.trim() || result.stdout.trim() || "connector start failed")
-				.trim()
-				.slice(0, 2_000),
+			normalizeConnectorError(
+				result.stderr || result.stdout,
+				"connector start failed",
+			),
 		);
 	}
 	await waitForConnectorState(() =>
@@ -168,6 +225,11 @@ export async function startConnectorChannel(
 	return connectorChannelsPayload();
 }
 
+export const __test__ = {
+	buildCliConnectCommand,
+	normalizeConnectorError,
+};
+
 export async function stopConnectorChannel(
 	args?: Record<string, unknown>,
 ): Promise<WebviewConnectorChannelsResponse> {
@@ -182,9 +244,10 @@ export async function stopConnectorChannel(
 	const result = await runCliConnectCommand([channel, "--stop"]);
 	if (result.code !== 0) {
 		throw new Error(
-			(result.stderr.trim() || result.stdout.trim() || "connector stop failed")
-				.trim()
-				.slice(0, 2_000),
+			normalizeConnectorError(
+				result.stderr || result.stdout,
+				"connector stop failed",
+			),
 		);
 	}
 	await waitForConnectorState(

apps/cline-hub/src/server/desktop-commands.ts

@@ -4,15 +4,20 @@ import {
 	ClineAccountService,
 	ensureCustomProvidersLoaded,
 	executeClineAccountAction,
+	formatProviderOAuthApiKey,
 	getLocalProviderModels,
+	getPersistedProviderApiKey,
+	getProviderOAuthCredentialsFromSettings,
+	getValidClineCredentials,
 	listLocalProviders,
 	loginAndSaveLocalProviderOAuthCredentials,
 	normalizeOAuthProvider,
 	type ProviderCapability,
 	type ProviderClient,
 	type ProviderProtocol,
+	type ProviderSettings,
 	readGlobalSettings,
-	resolveLocalClineAuthToken,
+	saveLocalProviderOAuthCredentials,
 	saveLocalProviderSettings,
 	setAutoUpdateEnabledGlobally,
 	setDisabledPlugin,
@@ -27,6 +32,12 @@ import {
 	stopConnectorChannel,
 } from "./connectors";
 import { providerSettingsManager, workspaceRoot } from "./deps";
+import {
+	installMarketplaceEntryForDesktopCommand,
+	listMarketplaceInstalledEntries,
+	uninstallLocalPrimitive,
+	uninstallMarketplaceEntryForDesktopCommand,
+} from "./marketplace";
 import {
 	deleteMcpServer,
 	ensureMcpSettingsFile,
@@ -52,6 +63,39 @@ const ROUTINE_SCHEDULE_COMMANDS = new Set([
 	"delete_routine_schedule",
 ]);
 
+async function resolveHubClineAccountAuthToken(input: {
+	settings?: ProviderSettings;
+	apiBaseUrl: string;
+}): Promise<string | undefined> {
+	const credentials = input.settings
+		? getProviderOAuthCredentialsFromSettings("cline", input.settings)
+		: null;
+	if (!credentials || !input.settings) {
+		return getPersistedProviderApiKey("cline", input.settings);
+	}
+
+	const nextCredentials = await getValidClineCredentials(credentials, {
+		apiBaseUrl: input.apiBaseUrl,
+	});
+	if (!nextCredentials) {
+		throw new Error(
+			"Cline account requires re-authentication. Run cline auth cline.",
+		);
+	}
+
+	if (nextCredentials !== credentials) {
+		saveLocalProviderOAuthCredentials(
+			providerSettingsManager,
+			"cline",
+			input.settings,
+			nextCredentials,
+			{ setLastUsed: false },
+		);
+	}
+
+	return formatProviderOAuthApiKey("cline", nextCredentials);
+}
+
 export async function handleDesktopCommand(
 	ctx: HubContext,
 	command: string,
@@ -128,10 +172,18 @@ export async function handleDesktopCommand(
 	}
 	if (command === "cline_account") {
 		const settings = providerSettingsManager.getProviderSettings("cline");
+		const apiBaseUrl =
+			settings?.baseUrl?.trim() || getClineEnvironmentConfig().apiBaseUrl;
+		const authToken = await resolveHubClineAccountAuthToken({
+			settings,
+			apiBaseUrl,
+		});
+		if (!authToken) {
+			throw new Error("No Cline account auth token found");
+		}
 		const accountService = new ClineAccountService({
-			apiBaseUrl:
-				settings?.baseUrl?.trim() || getClineEnvironmentConfig().apiBaseUrl,
-			getAuthToken: async () => resolveLocalClineAuthToken(settings),
+			apiBaseUrl,
+			getAuthToken: async () => authToken,
 		});
 		return await executeClineAccountAction(
 			args as ClineAccountActionRequest,
@@ -213,6 +265,27 @@ export async function handleDesktopCommand(
 	if (command === "list_user_instruction_configs") {
 		return await listUserInstructionConfigs(workspaceRoot);
 	}
+	if (command === "list_marketplace_installed_entries") {
+		return listMarketplaceInstalledEntries(
+			args,
+			await listUserInstructionConfigs(workspaceRoot),
+		);
+	}
+	if (command === "install_marketplace_entry") {
+		const result = await installMarketplaceEntryForDesktopCommand(args);
+		broadcastHubState(ctx);
+		return result;
+	}
+	if (command === "uninstall_marketplace_entry") {
+		const result = await uninstallMarketplaceEntryForDesktopCommand(args);
+		broadcastHubState(ctx);
+		return result;
+	}
+	if (command === "uninstall_local_primitive") {
+		const result = await uninstallLocalPrimitive(args, { workspaceRoot });
+		broadcastHubState(ctx);
+		return result;
+	}
 	if (command === "toggle_disabled_plugin_tool") {
 		const toolName = String(args?.name ?? "").trim();
 		if (!toolName) throw new Error("tool name is required");

apps/cline-hub/src/server/http.test.ts

@@ -0,0 +1,54 @@
+import { describe, expect, it } from "vitest";
+import { isWebviewRoute, normalizeWebviewIndexHtml } from "./http";
+
+describe("isWebviewRoute", () => {
+	it.each([
+		"/",
+		"/chat",
+		"/sessions",
+		"/models",
+		"/customizations",
+		"/rules",
+		"/hooks",
+		"/mcp",
+		"/plugins",
+		"/skills",
+		"/agents",
+		"/tools",
+		"/marketplace",
+		"/marketplace/mcp",
+		"/marketplace/skills",
+		"/marketplace/plugins",
+		"/channels",
+		"/schedules",
+		"/settings",
+		"/settings/providers",
+	])("matches dashboard SPA route %s", (pathname) => {
+		expect(isWebviewRoute(pathname)).toBe(true);
+	});
+
+	it("does not treat nested marketplace asset requests as SPA routes", () => {
+		expect(isWebviewRoute("/marketplace/assets/index.js")).toBe(false);
+	});
+});
+
+describe("normalizeWebviewIndexHtml", () => {
+	it("rewrites relative built asset URLs so deep links can refresh", () => {
+		expect(
+			normalizeWebviewIndexHtml(
+				'<script type="module" src="./assets/index.js"></script><link href="./assets/index.css">',
+			),
+		).toBe(
+			'<script type="module" src="/assets/index.js"></script><link href="/assets/index.css">',
+		);
+	});
+
+	it("injects the persisted theme bootstrap once", () => {
+		const normalized = normalizeWebviewIndexHtml(
+			"<html><head></head><body></body></html>",
+		);
+
+		expect(normalized).toContain('id="cline-hub-theme-bootstrap"');
+		expect(normalizeWebviewIndexHtml(normalized)).toBe(normalized);
+	});
+});

apps/cline-hub/src/server/http.ts

@@ -15,6 +15,25 @@ export function createTextResponse(text: string, status = 200): Response {
 	});
 }
 
+const NO_STORE_HEADERS = {
+	"cache-control": "no-store, no-cache, must-revalidate, proxy-revalidate",
+	pragma: "no-cache",
+	expires: "0",
+};
+
+const IMMUTABLE_ASSET_CACHE = "public, max-age=31536000, immutable";
+const THEME_BOOTSTRAP_SCRIPT = `<script id="cline-hub-theme-bootstrap">
+  (() => {
+    try {
+      const theme = window.localStorage.getItem("cline-hub-theme");
+      if (theme === "dark" || theme === "light") {
+        document.documentElement.classList.toggle("dark", theme === "dark");
+        document.documentElement.dataset.clineHubTheme = theme;
+      }
+    } catch {}
+  })();
+</script>`;
+
 function contentTypeFor(path: string): string {
 	switch (extname(path)) {
 		case ".html":
@@ -36,20 +55,47 @@ function contentTypeFor(path: string): string {
 	}
 }
 
-function isWebviewRoute(pathname: string): boolean {
+export function isWebviewRoute(pathname: string): boolean {
 	return (
 		pathname === "/" ||
 		pathname === "/index.html" ||
 		pathname === "/chat" ||
+		pathname === "/sessions" ||
+		pathname === "/models" ||
+		pathname === "/customizations" ||
+		pathname === "/rules" ||
+		pathname === "/hooks" ||
+		pathname === "/mcp" ||
+		pathname === "/plugins" ||
+		pathname === "/skills" ||
+		pathname === "/agents" ||
+		pathname === "/tools" ||
+		pathname === "/marketplace" ||
+		pathname === "/marketplace/mcp" ||
+		pathname === "/marketplace/skills" ||
+		pathname === "/marketplace/plugins" ||
+		pathname === "/channels" ||
+		pathname === "/schedules" ||
 		pathname === "/settings" ||
 		pathname.startsWith("/settings/")
 	);
 }
 
+export function normalizeWebviewIndexHtml(html: string): string {
+	const normalized = html
+		.replaceAll('src="./', 'src="/')
+		.replaceAll('href="./', 'href="/');
+	if (normalized.includes('id="cline-hub-theme-bootstrap"')) {
+		return normalized;
+	}
+	return normalized.replace("<head>", `<head>\n${THEME_BOOTSTRAP_SCRIPT}`);
+}
+
 function renderDevIndexHtml(devServerUrl: string): string {
 	return `<!doctype html>
 <html lang="en">
 <head>
+  ${THEME_BOOTSTRAP_SCRIPT}
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <script type="module">
@@ -60,7 +106,7 @@ function renderDevIndexHtml(devServerUrl: string): string {
     window.__vite_plugin_react_preamble_installed__ = true;
   </script>
   <script type="module" src="${devServerUrl}/@vite/client"></script>
-  <link rel="icon" type="image/svg+xml" href="${devServerUrl}/favicon.svg" />
+  <link rel="icon" type="image/svg+xml" href="${devServerUrl}/cline-logo-filled.svg" />
   <title>Cline Hub</title>
 </head>
 <body>
@@ -74,6 +120,14 @@ function renderDevIndexHtml(devServerUrl: string): string {
 export class WebviewAssets {
 	constructor(private readonly webviewDistDir: string) {}
 
+	private async resolveCurrentMainAssetPath(): Promise<string | undefined> {
+		const indexFile = Bun.file(join(this.webviewDistDir, "index.html"));
+		if (!(await indexFile.exists())) return undefined;
+		const html = await indexFile.text();
+		const match = html.match(/src="\.\/(assets\/index-[^"]+\.js)"/);
+		return match?.[1] ? join(this.webviewDistDir, match[1]) : undefined;
+	}
+
 	private resolveStaticPath(pathname: string): string | undefined {
 		const decoded = decodeURIComponent(pathname);
 		const requested = decoded === "/" ? "/index.html" : decoded;
@@ -89,8 +143,11 @@ export class WebviewAssets {
 	private async serveIndex(): Promise<Response> {
 		const indexFile = Bun.file(join(this.webviewDistDir, "index.html"));
 		if (await indexFile.exists()) {
-			return new Response(indexFile, {
-				headers: { "content-type": "text/html; charset=utf-8" },
+			return new Response(normalizeWebviewIndexHtml(await indexFile.text()), {
+				headers: {
+					"content-type": "text/html; charset=utf-8",
+					...NO_STORE_HEADERS,
+				},
 			});
 		}
 		return createTextResponse(
@@ -103,7 +160,10 @@ export class WebviewAssets {
 		const devServerUrl = process.env.VITE_DEV_SERVER_URL?.trim();
 		if (devServerUrl && isWebviewRoute(pathname)) {
 			return new Response(renderDevIndexHtml(devServerUrl), {
-				headers: { "content-type": "text/html; charset=utf-8" },
+				headers: {
+					"content-type": "text/html; charset=utf-8",
+					...NO_STORE_HEADERS,
+				},
 			});
 		}
 		if (isWebviewRoute(pathname)) {
@@ -112,12 +172,37 @@ export class WebviewAssets {
 
 		const filePath = this.resolveStaticPath(pathname);
 		if (!filePath) return createTextResponse("not found", 404);
-		const file = Bun.file(filePath);
+		let responsePath = filePath;
+		let file = Bun.file(responsePath);
+		if (
+			!(await file.exists()) &&
+			/^\/assets\/index-[A-Za-z0-9_-]+\.js$/.test(pathname)
+		) {
+			const currentMainAssetPath = await this.resolveCurrentMainAssetPath();
+			if (currentMainAssetPath) {
+				responsePath = currentMainAssetPath;
+				file = Bun.file(responsePath);
+			}
+		}
 		if (!(await file.exists())) {
 			return createTextResponse("not found", 404);
 		}
+		const isHashedAsset = /^\/assets\/.+-[A-Za-z0-9_-]+\.[A-Za-z0-9]+$/.test(
+			pathname,
+		);
 		return new Response(file, {
-			headers: { "content-type": contentTypeFor(filePath) },
+			headers: {
+				"content-type": contentTypeFor(responsePath),
+				"cache-control": isHashedAsset
+					? IMMUTABLE_ASSET_CACHE
+					: NO_STORE_HEADERS["cache-control"],
+				...(isHashedAsset
+					? {}
+					: {
+							pragma: NO_STORE_HEADERS.pragma,
+							expires: NO_STORE_HEADERS.expires,
+						}),
+			},
 		});
 	}
 }

apps/cline-hub/src/server/marketplace.test.ts

@@ -0,0 +1,870 @@
+import { createHash } from "node:crypto";
+import {
+	existsSync,
+	mkdirSync,
+	mkdtempSync,
+	readFileSync,
+	rmSync,
+	writeFileSync,
+} from "node:fs";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import {
+	buildMarketplaceMcpInput,
+	fetchMarketplaceCatalog,
+	installMarketplaceEntry,
+	installMarketplaceEntryForDesktopCommand,
+	listMarketplaceInstalledEntries,
+	uninstallLocalPrimitive,
+	uninstallMarketplaceEntry,
+	uninstallMarketplaceEntryForDesktopCommand,
+} from "./marketplace";
+
+describe("marketplace installer", () => {
+	const originalWrapperPath = process.env.CLINE_WRAPPER_PATH;
+	const originalClineDir = process.env.CLINE_DIR;
+	const originalHome = process.env.HOME;
+	const originalMcpSettingsPath = process.env.CLINE_MCP_SETTINGS_PATH;
+
+	afterEach(() => {
+		if (originalWrapperPath === undefined) {
+			delete process.env.CLINE_WRAPPER_PATH;
+		} else {
+			process.env.CLINE_WRAPPER_PATH = originalWrapperPath;
+		}
+		if (originalClineDir === undefined) {
+			delete process.env.CLINE_DIR;
+		} else {
+			process.env.CLINE_DIR = originalClineDir;
+		}
+		if (originalHome === undefined) {
+			delete process.env.HOME;
+		} else {
+			process.env.HOME = originalHome;
+		}
+		if (originalMcpSettingsPath === undefined) {
+			delete process.env.CLINE_MCP_SETTINGS_PATH;
+		} else {
+			process.env.CLINE_MCP_SETTINGS_PATH = originalMcpSettingsPath;
+		}
+		vi.restoreAllMocks();
+	});
+
+	it("maps remote MCP catalog args to the hub MCP upsert shape", () => {
+		expect(
+			buildMarketplaceMcpInput([
+				"context7",
+				"--transport",
+				"http",
+				"https://mcp.context7.com/mcp",
+			]),
+		).toEqual({
+			name: "context7",
+			transportType: "streamableHttp",
+			url: "https://mcp.context7.com/mcp",
+			disabled: false,
+		});
+	});
+
+	it("maps stdio MCP catalog args to command and args", () => {
+		expect(
+			buildMarketplaceMcpInput(["filesystem", "npx", "-y", "server", "/tmp"]),
+		).toEqual({
+			name: "filesystem",
+			transportType: "stdio",
+			command: "npx",
+			args: ["-y", "server", "/tmp"],
+			disabled: false,
+		});
+	});
+
+	it("preserves server flags after stdio MCP command args begin", () => {
+		expect(
+			buildMarketplaceMcpInput([
+				"search",
+				"npx",
+				"-y",
+				"server",
+				"--transport",
+				"stdio",
+			]),
+		).toEqual({
+			name: "search",
+			transportType: "stdio",
+			command: "npx",
+			args: ["-y", "server", "--transport", "stdio"],
+			disabled: false,
+		});
+	});
+
+	it("runs skills globally for Cline without prompts", async () => {
+		const homeDir = mkdtempSync(join(tmpdir(), "cline-marketplace-home-"));
+		process.env.HOME = homeDir;
+		const spawnCommand = vi.fn(async () => {
+			mkdirSync(join(homeDir, ".agents", "skills", "web-design-guidelines"), {
+				recursive: true,
+			});
+			writeFileSync(
+				join(homeDir, ".agents", "skills", "web-design-guidelines", "SKILL.md"),
+				"---\nname: web-design-guidelines\n---\n",
+			);
+			return {
+				exitCode: 0,
+				stdout: "installed",
+				stderr: "",
+			};
+		});
+
+		await installMarketplaceEntry(
+			{
+				entry: {
+					id: "web-design-guidelines",
+					type: "skill",
+					name: "Web Design Guidelines",
+					install: {
+						args: [
+							"vercel-labs/agent-skills",
+							"--skill",
+							"web-design-guidelines",
+						],
+					},
+				},
+			},
+			{ spawnCommand },
+		);
+
+		expect(spawnCommand).toHaveBeenCalledWith("npx", [
+			"-y",
+			"skills@latest",
+			"add",
+			"vercel-labs/agent-skills",
+			"--skill",
+			"web-design-guidelines",
+			"-g",
+			"-a",
+			"cline",
+			"-y",
+		]);
+	});
+
+	it("skips skill install commands when the global skill already exists", async () => {
+		const homeDir = mkdtempSync(join(tmpdir(), "cline-marketplace-home-"));
+		process.env.HOME = homeDir;
+		mkdirSync(join(homeDir, ".agents", "skills", "cline-sdk"), {
+			recursive: true,
+		});
+		writeFileSync(
+			join(homeDir, ".agents", "skills", "cline-sdk", "SKILL.md"),
+			"---\nname: cline-sdk\n---\n",
+		);
+		const spawnCommand = vi.fn(async () => ({
+			exitCode: 0,
+			stdout: "",
+			stderr: "",
+		}));
+
+		await expect(
+			installMarketplaceEntry(
+				{
+					entry: {
+						id: "cline-sdk",
+						type: "skill",
+						name: "Cline SDK",
+						install: { args: ["cline/sdk-skill"] },
+					},
+				},
+				{ spawnCommand },
+			),
+		).resolves.toMatchObject({
+			status: "installed",
+			message: "Cline SDK is already installed.",
+		});
+		expect(spawnCommand).not.toHaveBeenCalled();
+	});
+
+	it("reports Cline global skills as marketplace-installed", () => {
+		const clineDir = mkdtempSync(join(tmpdir(), "cline-marketplace-cline-"));
+		process.env.CLINE_DIR = clineDir;
+		mkdirSync(join(clineDir, "skills", "cline-sdk"), {
+			recursive: true,
+		});
+		writeFileSync(
+			join(clineDir, "skills", "cline-sdk", "SKILL.md"),
+			"---\nname: cline-sdk\n---\n",
+		);
+
+		expect(
+			listMarketplaceInstalledEntries({
+				entries: [
+					{
+						id: "cline-sdk",
+						type: "skill",
+						name: "Cline SDK",
+						install: { args: ["cline/sdk-skill"] },
+					},
+				],
+			}),
+		).toEqual({ installedKeys: ["skill:cline-sdk"] });
+	});
+
+	it("accepts skill installs that create Cline global skills", async () => {
+		const homeDir = mkdtempSync(join(tmpdir(), "cline-marketplace-home-"));
+		const clineDir = join(homeDir, ".cline");
+		process.env.HOME = homeDir;
+		process.env.CLINE_DIR = clineDir;
+		const spawnCommand = vi.fn(async () => {
+			mkdirSync(join(clineDir, "skills", "cline-sdk"), {
+				recursive: true,
+			});
+			writeFileSync(
+				join(clineDir, "skills", "cline-sdk", "SKILL.md"),
+				"---\nname: cline-sdk\n---\n",
+			);
+			return {
+				exitCode: 0,
+				stdout: "installed",
+				stderr: "",
+			};
+		});
+
+		await expect(
+			installMarketplaceEntry(
+				{
+					entry: {
+						id: "cline-sdk",
+						type: "skill",
+						name: "Cline SDK",
+						install: { args: ["cline/sdk-skill"] },
+					},
+				},
+				{ spawnCommand },
+			),
+		).resolves.toMatchObject({
+			status: "installed",
+			message: "Installed Cline SDK globally for Cline.",
+		});
+	});
+
+	it("removes Cline global marketplace skills without prompts", async () => {
+		const homeDir = mkdtempSync(join(tmpdir(), "cline-marketplace-home-"));
+		process.env.HOME = homeDir;
+		const skillDir = join(homeDir, ".agents", "skills", "cline-sdk");
+		mkdirSync(skillDir, { recursive: true });
+		writeFileSync(join(skillDir, "SKILL.md"), "---\nname: cline-sdk\n---\n");
+		const spawnCommand = vi.fn(async () => {
+			rmSync(skillDir, { recursive: true, force: true });
+			return {
+				exitCode: 0,
+				stdout: "removed",
+				stderr: "",
+			};
+		});
+
+		await expect(
+			uninstallMarketplaceEntry(
+				{
+					entry: {
+						id: "cline-sdk",
+						type: "skill",
+						name: "Cline SDK",
+						install: { args: ["cline/sdk-skill"] },
+					},
+				},
+				{ spawnCommand },
+			),
+		).resolves.toMatchObject({
+			status: "uninstalled",
+			message: "Uninstalled Cline SDK.",
+		});
+		expect(spawnCommand).toHaveBeenCalledWith("npx", [
+			"-y",
+			"skills@latest",
+			"remove",
+			"cline-sdk",
+			"-g",
+			"-a",
+			"cline",
+			"-y",
+		]);
+	});
+
+	it("does not report project-local skills as marketplace-installed globals", () => {
+		const homeDir = mkdtempSync(join(tmpdir(), "cline-marketplace-home-"));
+		process.env.HOME = homeDir;
+
+		expect(
+			listMarketplaceInstalledEntries(
+				{
+					entries: [
+						{
+							id: "cline-sdk",
+							type: "skill",
+							name: "Cline SDK",
+							install: { args: ["cline/sdk-skill"] },
+						},
+					],
+				},
+				{
+					skills: [
+						{
+							id: "cline-sdk",
+							name: "cline-sdk",
+							path: "/workspace/project/.agents/skills/cline-sdk/SKILL.md",
+						},
+					],
+				},
+			),
+		).toEqual({ installedKeys: [] });
+	});
+
+	it("rejects skill installs that exit zero but report failure", async () => {
+		const homeDir = mkdtempSync(join(tmpdir(), "cline-marketplace-home-"));
+		process.env.HOME = homeDir;
+		const spawnCommand = vi.fn(async () => ({
+			exitCode: 0,
+			stdout: "Failed to install 1",
+			stderr: "",
+		}));
+
+		await expect(
+			installMarketplaceEntry(
+				{
+					entry: {
+						id: "cline-sdk",
+						type: "skill",
+						name: "Cline SDK",
+						install: { args: ["cline/sdk-skill"] },
+					},
+				},
+				{ spawnCommand },
+			),
+		).rejects.toThrow("Skill install failed");
+	});
+
+	it("redacts common secret formats from failed install output", async () => {
+		const homeDir = mkdtempSync(join(tmpdir(), "cline-marketplace-home-"));
+		process.env.HOME = homeDir;
+		const spawnCommand = vi.fn(async () => ({
+			exitCode: 1,
+			stdout:
+				"Authorization: Bearer stdout-token\napi key stdout-key\nOPENAI_API_KEY=compound-key",
+			stderr:
+				"TOKEN=stderr-token\npassword is stderr-password\nANTHROPIC_SECRET_KEY=anthropic-secret",
+		}));
+
+		let message = "";
+		try {
+			await installMarketplaceEntry(
+				{
+					entry: {
+						id: "cline-sdk",
+						type: "skill",
+						name: "Cline SDK",
+						install: { args: ["cline/sdk-skill"] },
+					},
+				},
+				{ spawnCommand },
+			);
+		} catch (error) {
+			message = error instanceof Error ? error.message : String(error);
+		}
+
+		expect(message).toContain("Authorization: [redacted]");
+		expect(message).toContain("api key [redacted]");
+		expect(message).toContain("OPENAI_API_KEY=[redacted]");
+		expect(message).toContain("TOKEN=[redacted]");
+		expect(message).toContain("password is [redacted]");
+		expect(message).toContain("ANTHROPIC_SECRET_KEY=[redacted]");
+		expect(message).not.toContain("stdout-token");
+		expect(message).not.toContain("stdout-key");
+		expect(message).not.toContain("compound-key");
+		expect(message).not.toContain("stderr-token");
+		expect(message).not.toContain("stderr-password");
+		expect(message).not.toContain("anthropic-secret");
+	});
+
+	it("rejects skill installs before spawning when the global skill directory is not writable", async () => {
+		const homeDir = mkdtempSync(join(tmpdir(), "cline-marketplace-home-"));
+		process.env.HOME = homeDir;
+		mkdirSync(join(homeDir, ".agents"), { recursive: true });
+		writeFileSync(join(homeDir, ".agents", "skills"), "");
+		const spawnCommand = vi.fn(async () => ({
+			exitCode: 0,
+			stdout: "",
+			stderr: "",
+		}));
+
+		await expect(
+			installMarketplaceEntry(
+				{
+					entry: {
+						id: "cline-sdk",
+						type: "skill",
+						name: "Cline SDK",
+						install: { args: ["cline/sdk-skill"] },
+					},
+				},
+				{ spawnCommand },
+			),
+		).rejects.toThrow(
+			"Cannot install skill globally because ~/.agents/skills is not writable",
+		);
+		expect(spawnCommand).not.toHaveBeenCalled();
+	});
+
+	it("rejects skill installs that do not create a global skill", async () => {
+		const homeDir = mkdtempSync(join(tmpdir(), "cline-marketplace-home-"));
+		process.env.HOME = homeDir;
+		const spawnCommand = vi.fn(async () => ({
+			exitCode: 0,
+			stdout: "Installation complete",
+			stderr: "",
+		}));
+
+		await expect(
+			installMarketplaceEntry(
+				{
+					entry: {
+						id: "cline-sdk",
+						type: "skill",
+						name: "Cline SDK",
+						install: { args: ["cline/sdk-skill"] },
+					},
+				},
+				{ spawnCommand },
+			),
+		).rejects.toThrow("was not found in Cline's global skills directories");
+	});
+
+	it("runs official plugin installs through the current Cline CLI", async () => {
+		process.env.CLINE_WRAPPER_PATH = "/usr/local/bin/cline";
+		const spawnCommand = vi.fn(async () => ({
+			exitCode: 0,
+			stdout: JSON.stringify({ installPath: "/tmp/plugin" }),
+			stderr: "",
+		}));
+
+		await installMarketplaceEntry(
+			{
+				entry: {
+					id: "marketplace-test-plugin",
+					type: "plugin",
+					name: "Marketplace Test Plugin",
+					install: { args: ["marketplace-test-plugin"] },
+				},
+			},
+			{ spawnCommand },
+		);
+
+		expect(spawnCommand).toHaveBeenCalledWith("/usr/local/bin/cline", [
+			"plugin",
+			"install",
+			"marketplace-test-plugin",
+			"--json",
+		]);
+	});
+
+	it("runs official plugin uninstalls through the current Cline CLI", async () => {
+		process.env.CLINE_WRAPPER_PATH = "/usr/local/bin/cline";
+		const spawnCommand = vi.fn(async () => ({
+			exitCode: 0,
+			stdout: JSON.stringify({
+				name: "goal",
+				installPath: "/tmp/plugin",
+				removedPaths: ["/tmp/plugin"],
+				entryPaths: [],
+			}),
+			stderr: "",
+		}));
+
+		await expect(
+			uninstallMarketplaceEntry(
+				{
+					entry: {
+						id: "goal",
+						type: "plugin",
+						name: "Goal",
+						install: { args: ["goal"] },
+					},
+				},
+				{ spawnCommand },
+			),
+		).resolves.toMatchObject({
+			status: "uninstalled",
+			message: "Uninstalled Goal.",
+		});
+
+		expect(spawnCommand).toHaveBeenCalledWith("/usr/local/bin/cline", [
+			"plugin",
+			"uninstall",
+			"goal",
+			"--json",
+		]);
+	});
+
+	it("resolves desktop installs from the server catalog instead of browser-sent args", async () => {
+		process.env.CLINE_WRAPPER_PATH = "/usr/local/bin/cline";
+		const spawnCommand = vi.fn(async () => ({
+			exitCode: 0,
+			stdout: JSON.stringify({ installPath: "/tmp/plugin" }),
+			stderr: "",
+		}));
+
+		await installMarketplaceEntryForDesktopCommand(
+			{
+				entry: {
+					id: "marketplace-test-plugin",
+					type: "plugin",
+					name: "Tampered",
+					install: { args: ["malicious-source"] },
+				},
+			},
+			{
+				spawnCommand,
+				loadCatalog: async () => ({
+					entries: [
+						{
+							id: "marketplace-test-plugin",
+							type: "plugin",
+							name: "Marketplace Test Plugin",
+							install: { args: ["marketplace-test-plugin"] },
+						},
+					],
+				}),
+			},
+		);
+
+		expect(spawnCommand).toHaveBeenCalledWith("/usr/local/bin/cline", [
+			"plugin",
+			"install",
+			"marketplace-test-plugin",
+			"--json",
+		]);
+	});
+
+	it("resolves desktop uninstalls from the server catalog instead of browser-sent args", async () => {
+		process.env.CLINE_WRAPPER_PATH = "/usr/local/bin/cline";
+		const spawnCommand = vi.fn(async () => ({
+			exitCode: 0,
+			stdout: JSON.stringify({
+				name: "goal",
+				installPath: "/tmp/plugin",
+				removedPaths: ["/tmp/plugin"],
+				entryPaths: [],
+			}),
+			stderr: "",
+		}));
+
+		await uninstallMarketplaceEntryForDesktopCommand(
+			{
+				entry: {
+					id: "goal",
+					type: "plugin",
+					name: "Tampered",
+					install: { args: ["malicious-source"] },
+				},
+			},
+			{
+				spawnCommand,
+				loadCatalog: async () => ({
+					entries: [
+						{
+							id: "goal",
+							type: "plugin",
+							name: "Goal",
+							install: { args: ["goal"] },
+						},
+					],
+				}),
+			},
+		);
+
+		expect(spawnCommand).toHaveBeenCalledWith("/usr/local/bin/cline", [
+			"plugin",
+			"uninstall",
+			"goal",
+			"--json",
+		]);
+	});
+
+	it("uninstalls MCP marketplace entries from Cline MCP settings", async () => {
+		const settingsPath = join(
+			mkdtempSync(join(tmpdir(), "cline-marketplace-mcp-")),
+			"cline_mcp_settings.json",
+		);
+		process.env.CLINE_MCP_SETTINGS_PATH = settingsPath;
+		writeFileSync(
+			settingsPath,
+			JSON.stringify(
+				{
+					mcpServers: {
+						context7: {
+							transport: {
+								type: "streamableHttp",
+								url: "https://mcp.context7.com/mcp",
+							},
+						},
+					},
+				},
+				null,
+				2,
+			),
+		);
+
+		await expect(
+			uninstallMarketplaceEntry({
+				entry: {
+					id: "context7",
+					type: "mcp",
+					name: "Context7",
+					install: {
+						args: [
+							"context7",
+							"--transport",
+							"http",
+							"https://mcp.context7.com/mcp",
+						],
+					},
+				},
+			}),
+		).resolves.toMatchObject({
+			status: "uninstalled",
+			message: "Uninstalled Context7.",
+		});
+		expect(
+			listMarketplaceInstalledEntries({
+				entries: [
+					{
+						id: "context7",
+						type: "mcp",
+						name: "Context7",
+						install: {
+							args: [
+								"context7",
+								"--transport",
+								"http",
+								"https://mcp.context7.com/mcp",
+							],
+						},
+					},
+				],
+			}),
+		).toEqual({ installedKeys: [] });
+	});
+
+	it("uninstalls local MCP servers by name", async () => {
+		const settingsPath = join(
+			mkdtempSync(join(tmpdir(), "cline-local-mcp-")),
+			"cline_mcp_settings.json",
+		);
+		process.env.CLINE_MCP_SETTINGS_PATH = settingsPath;
+		writeFileSync(
+			settingsPath,
+			JSON.stringify(
+				{
+					mcpServers: {
+						context7: {
+							transport: {
+								type: "streamableHttp",
+								url: "https://mcp.context7.com/mcp",
+							},
+						},
+					},
+				},
+				null,
+				2,
+			),
+		);
+
+		await expect(
+			uninstallLocalPrimitive({
+				type: "mcp",
+				id: "context7",
+				name: "context7",
+			}),
+		).resolves.toMatchObject({
+			status: "uninstalled",
+			message: "Uninstalled context7.",
+		});
+		expect(readFileSync(settingsPath, "utf8")).not.toContain("context7");
+	});
+
+	it("uninstalls local skills by removing their configured skill directory", async () => {
+		const workspaceRoot = mkdtempSync(join(tmpdir(), "cline-local-skill-"));
+		const skillDir = join(workspaceRoot, ".cline", "skills", "review");
+		mkdirSync(skillDir, { recursive: true });
+		const skillPath = join(skillDir, "SKILL.md");
+		writeFileSync(skillPath, "---\nname: review\n---\nReview changes.");
+
+		await expect(
+			uninstallLocalPrimitive(
+				{
+					type: "skill",
+					id: "review",
+					name: "Review",
+					path: skillPath,
+				},
+				{ workspaceRoot },
+			),
+		).resolves.toMatchObject({
+			status: "uninstalled",
+			message: "Uninstalled Review.",
+		});
+		expect(existsSync(skillDir)).toBe(false);
+	});
+
+	it("reports official plugin marketplace entries installed from Cline home", () => {
+		const clineDir = mkdtempSync(join(tmpdir(), "cline-marketplace-test-"));
+		process.env.CLINE_DIR = clineDir;
+		const sourceKey =
+			"official:https://github.com/cline/plugins.git#plugins/goal";
+		const hash = createHash("sha256")
+			.update(sourceKey)
+			.digest("hex")
+			.slice(0, 12);
+		mkdirSync(
+			join(clineDir, "plugins", "_installed", "official", `goal-${hash}`),
+			{
+				recursive: true,
+			},
+		);
+
+		expect(
+			listMarketplaceInstalledEntries({
+				entries: [
+					{
+						id: "goal",
+						type: "plugin",
+						name: "Goal",
+						install: { args: ["goal"] },
+					},
+				],
+			}),
+		).toEqual({ installedKeys: ["plugin:goal"] });
+	});
+
+	it("does not report plugin inventory substring matches as installed", () => {
+		process.env.CLINE_DIR = mkdtempSync(
+			join(tmpdir(), "cline-marketplace-test-"),
+		);
+
+		expect(
+			listMarketplaceInstalledEntries(
+				{
+					entries: [
+						{
+							id: "goal",
+							type: "plugin",
+							name: "Goal",
+							install: { args: ["goal"] },
+						},
+					],
+				},
+				{
+					plugins: [
+						{
+							name: "goal-helper",
+							path: "/workspace/.cline/plugins/goal-helper/index.ts",
+						},
+					],
+				},
+			),
+		).toEqual({ installedKeys: [] });
+	});
+
+	it("skips invalid marketplace entries during installed-status checks", () => {
+		const clineDir = mkdtempSync(join(tmpdir(), "cline-marketplace-test-"));
+		process.env.CLINE_DIR = clineDir;
+		const sourceKey =
+			"official:https://github.com/cline/plugins.git#plugins/goal";
+		const hash = createHash("sha256")
+			.update(sourceKey)
+			.digest("hex")
+			.slice(0, 12);
+		mkdirSync(
+			join(clineDir, "plugins", "_installed", "official", `goal-${hash}`),
+			{
+				recursive: true,
+			},
+		);
+
+		expect(
+			listMarketplaceInstalledEntries({
+				entries: [
+					{
+						id: "broken-mcp",
+						type: "mcp",
+						name: "Broken MCP",
+						install: {
+							args: [
+								"broken-mcp",
+								"--transport",
+								"ws",
+								"https://example.com/mcp",
+							],
+						},
+					},
+					{
+						id: "goal",
+						type: "plugin",
+						name: "Goal",
+						install: { args: ["goal"] },
+					},
+				],
+			}),
+		).toEqual({ installedKeys: ["plugin:goal"] });
+	});
+
+	it("rejects invalid marketplace entries before spawning commands", async () => {
+		const spawnCommand = vi.fn(async () => ({
+			exitCode: 0,
+			stdout: "",
+			stderr: "",
+		}));
+
+		await expect(
+			installMarketplaceEntry(
+				{
+					entry: {
+						id: "bad",
+						type: "skill",
+						install: { args: [] },
+					},
+				},
+				{ spawnCommand },
+			),
+		).rejects.toThrow("marketplace install args are required");
+		expect(spawnCommand).not.toHaveBeenCalled();
+	});
+
+	it("fetches the marketplace catalog through the server helper", async () => {
+		const fetchImpl = vi.fn(async () => {
+			return new Response(JSON.stringify({ version: 1, entries: [] }), {
+				headers: { "content-type": "application/json" },
+			});
+		});
+
+		await expect(fetchMarketplaceCatalog(fetchImpl)).resolves.toEqual({
+			version: 1,
+			entries: [],
+		});
+		expect(fetchImpl).toHaveBeenCalledWith(
+			"https://cline.github.io/marketplace/catalog.json",
+			{ headers: { Accept: "application/json" } },
+		);
+	});
+
+	it("surfaces marketplace catalog upstream failures", async () => {
+		const fetchImpl = vi.fn(async () => {
+			return new Response("nope", {
+				status: 503,
+				statusText: "Service Unavailable",
+			});
+		});
+
+		await expect(fetchMarketplaceCatalog(fetchImpl)).rejects.toThrow(
+			"Failed to fetch marketplace catalog: 503 Service Unavailable",
+		);
+	});
+});

apps/cline-hub/src/server/session-mapping.ts

@@ -235,6 +235,7 @@ export function toWebviewSessionSummary(
 		providerId: session.provider,
 		model: session.model,
 		workspaceRoot: session.workspaceRoot,
+		createdAt: session.createdAt,
 		updatedAt: session.updatedAt,
 		inputTokens: session.inputTokens,
 		outputTokens: session.outputTokens,

apps/cline-hub/src/server/user-instructions.test.ts

@@ -0,0 +1,70 @@
+import { mkdir, mkdtemp, rm, writeFile } from "node:fs/promises";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import { afterEach, describe, expect, it } from "vitest";
+import { listUserInstructionConfigs } from "./user-instructions";
+
+describe("listUserInstructionConfigs", () => {
+	const tempRoots: string[] = [];
+	const envSnapshot = {
+		CLINE_GLOBAL_SETTINGS_PATH: process.env.CLINE_GLOBAL_SETTINGS_PATH,
+		CLINE_MCP_SETTINGS_PATH: process.env.CLINE_MCP_SETTINGS_PATH,
+	};
+
+	afterEach(async () => {
+		if (envSnapshot.CLINE_GLOBAL_SETTINGS_PATH === undefined) {
+			delete process.env.CLINE_GLOBAL_SETTINGS_PATH;
+		} else {
+			process.env.CLINE_GLOBAL_SETTINGS_PATH =
+				envSnapshot.CLINE_GLOBAL_SETTINGS_PATH;
+		}
+		if (envSnapshot.CLINE_MCP_SETTINGS_PATH === undefined) {
+			delete process.env.CLINE_MCP_SETTINGS_PATH;
+		} else {
+			process.env.CLINE_MCP_SETTINGS_PATH = envSnapshot.CLINE_MCP_SETTINGS_PATH;
+		}
+		await Promise.all(
+			tempRoots.map((dir) => rm(dir, { recursive: true, force: true })),
+		);
+		tempRoots.length = 0;
+	});
+
+	it("uses the package name for package-backed plugin entries", async () => {
+		const tempRoot = await mkdtemp(join(tmpdir(), "cline-hub-config-"));
+		tempRoots.push(tempRoot);
+		process.env.CLINE_GLOBAL_SETTINGS_PATH = join(tempRoot, "settings.json");
+		process.env.CLINE_MCP_SETTINGS_PATH = join(tempRoot, "mcp.json");
+		const packageDir = join(
+			tempRoot,
+			".cline",
+			"plugins",
+			"_installed",
+			"git",
+			"github.com",
+			"demo",
+			"package",
+		);
+		await mkdir(packageDir, { recursive: true });
+		const pluginPath = join(packageDir, "index.ts");
+		await writeFile(
+			join(packageDir, "package.json"),
+			JSON.stringify(
+				{
+					name: "cline-sdk-portable-agents",
+					cline: {
+						plugins: [{ paths: ["./index.ts"] }],
+					},
+				},
+				null,
+				2,
+			),
+		);
+		await writeFile(pluginPath, "export default {};\n");
+
+		const data = await listUserInstructionConfigs(tempRoot);
+		const plugins = data.plugins as Array<{ name: string; path: string }>;
+		const plugin = plugins.find((item) => item.path === pluginPath);
+
+		expect(plugin?.name).toBe("cline-sdk-portable-agents");
+	});
+});

apps/cline-hub/src/server/user-instructions.ts

@@ -1,5 +1,13 @@
 import { existsSync, readdirSync, readFileSync } from "node:fs";
-import { extname, join, basename as pathBasename } from "node:path";
+import {
+	dirname,
+	extname,
+	isAbsolute,
+	join,
+	basename as pathBasename,
+	relative,
+	resolve,
+} from "node:path";
 import {
 	createUserInstructionConfigService,
 	discoverPluginModulePaths,
@@ -17,6 +25,48 @@ function resolveAgentConfigSearchPaths(workspaceRoot?: string): string[] {
 	return resolveSharedAgentConfigSearchPaths(workspaceRoot);
 }
 
+function readPackageName(packageJsonPath: string): string | undefined {
+	try {
+		const packageJson = JSON.parse(readFileSync(packageJsonPath, "utf8")) as {
+			name?: unknown;
+		};
+		return typeof packageJson.name === "string" && packageJson.name.trim()
+			? packageJson.name.trim()
+			: undefined;
+	} catch {
+		return undefined;
+	}
+}
+
+function isPathWithin(parentPath: string, childPath: string): boolean {
+	const relativePath = relative(resolve(parentPath), resolve(childPath));
+	return (
+		relativePath === "" ||
+		(!relativePath.startsWith("..") && !isAbsolute(relativePath))
+	);
+}
+
+function getPluginDisplayName(filePath: string, searchRoot: string): string {
+	let current = dirname(filePath);
+	const root = resolve(searchRoot);
+	while (isPathWithin(root, current)) {
+		const packageJsonPath = join(current, "package.json");
+		if (existsSync(packageJsonPath)) {
+			const packageName = readPackageName(packageJsonPath);
+			if (packageName) {
+				return packageName;
+			}
+			break;
+		}
+		const parent = resolve(current, "..");
+		if (parent === current) {
+			break;
+		}
+		current = parent;
+	}
+	return pathBasename(filePath, extname(filePath));
+}
+
 export async function listUserInstructionConfigs(
 	targetWorkspaceRoot: string,
 ): Promise<JsonRecord> {
@@ -115,7 +165,7 @@ export async function listUserInstructionConfigs(
 				for (const filePath of discoverPluginModulePaths(directory)) {
 					if (pluginsByPath.has(filePath)) continue;
 					pluginsByPath.set(filePath, {
-						name: pathBasename(filePath, extname(filePath)),
+						name: getPluginDisplayName(filePath, directory),
 						path: filePath,
 						enabled: !disabledPlugins.has(filePath),
 					});

apps/cline-hub/src/validate-options.ts

@@ -41,6 +41,23 @@ expectEqual(
 	"invite URL",
 );
 
+const tailscale = resolveClineHubServerOptions({
+	HOST: "0.0.0.0",
+	CLINE_HUB_DASHBOARD_PORT: "8787",
+	PUBLIC_URL: "http://100.82.5.118",
+	ROOM_SECRET: "invite-123",
+});
+expectEqual(
+	tailscale.publicUrl,
+	"http://100.82.5.118:8787",
+	"direct IP public URL gets dashboard port",
+);
+expectEqual(
+	buildInviteUrl(tailscale.publicUrl, tailscale.roomSecret),
+	"http://100.82.5.118:8787/?roomSecret=invite-123",
+	"invite URL for direct IP public URL",
+);
+
 expectThrows(
 	() => resolveClineHubServerOptions({ HOST: "0.0.0.0" }),
 	"non-local bind without ROOM_SECRET",

apps/cline-hub/src/webview-protocol.ts

@@ -109,6 +109,7 @@ export type WebviewSessionSummary = {
 	providerId?: string;
 	model?: string;
 	workspaceRoot?: string;
+	createdAt?: number;
 	updatedAt?: number;
 	inputTokens?: number;
 	outputTokens?: number;

apps/cline-hub/src/webview/index.html

@@ -2,9 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="icon" type="image/svg+xml" href="/cline-logo-filled.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>webview</title>
+    <title>Cline Hub</title>
   </head>
   <body>
     <div id="root"></div>

apps/cline-hub/src/webview/package.json

@@ -10,13 +10,12 @@
 	},
 	"dependencies": {
 		"@base-ui/react": "^1.3.0",
-		"@fontsource-variable/geist": "^5.2.8",
+		"@fontsource-variable/schibsted-grotesk": "^5.2.8",
 		"@radix-ui/react-use-controllable-state": "^1.2.2",
 		"@rive-app/react-webgl2": "^4.27.2",
+		"@shikijs/langs": "^4.2.0",
+		"@shikijs/themes": "^4.2.0",
 		"@streamdown/cjk": "^1.0.3",
-		"@streamdown/code": "^1.1.1",
-		"@streamdown/math": "^1.0.2",
-		"@streamdown/mermaid": "^1.0.2",
 		"@tailwindcss/vite": "^4.2.1",
 		"@xyflow/react": "^12.10.1",
 		"ai": "^6.0.116",
@@ -27,6 +26,7 @@
 		"embla-carousel-react": "^8.6.0",
 		"lucide-react": "^0.577.0",
 		"media-chrome": "^4.18.1",
+		"mermaid": "^11.15.0",
 		"motion": "^12.38.0",
 		"nanoid": "^5.1.7",
 		"next-themes": "^0.4.6",

apps/cline-hub/src/webview/public/cline-logo-filled.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Ebene_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 466.73 487.04">
+  <!-- Generator: Adobe Illustrator 29.8.1, SVG Export Plug-In . SVG Version: 2.1.1 Build 2)  -->
+  <path d="M463.6,275.08l-29.26-58.75v-33.83c0-56.08-45.01-101.5-100.53-101.5h-50.01c3.62-7.43,5.61-15.79,5.61-24.61,0-31.17-25.08-56.39-56.07-56.39s-56.07,25.22-56.07,56.39c0,8.82,1.99,17.17,5.61,24.61h-50.01c-55.51,0-100.52,45.42-100.52,101.5v33.83l-29.87,58.59c-3.01,5.9-3.01,12.92,0,18.81l29.87,57.93v33.83c0,56.08,45.01,101.5,100.52,101.5h200.95c55.51,0,100.53-45.42,100.53-101.5v-33.83l29.21-58.13c2.9-5.79,2.9-12.61.05-18.46ZM202.75,322.96c0,25.48-20.54,46.14-45.88,46.14s-45.88-20.66-45.88-46.14v-82.02c0-25.48,20.54-46.14,45.88-46.14s45.88,20.66,45.88,46.14v82.02ZM350.58,322.96c0,25.48-20.54,46.14-45.88,46.14s-45.88-20.66-45.88-46.14v-82.02c0-25.48,20.54-46.14,45.88-46.14s45.88,20.66,45.88,46.14v82.02Z"/>
+</svg>

apps/cline-hub/src/webview/src/components/ai-elements/code-block.tsx

@@ -11,12 +11,13 @@ import {
 	useState,
 } from "react";
 import type {
-	BundledLanguage,
-	BundledTheme,
-	HighlighterGeneric,
+	HighlighterCore,
+	LanguageRegistration,
 	ThemedToken,
-} from "shiki";
-import { createHighlighter } from "shiki";
+	ThemeRegistration,
+} from "shiki/core";
+import { createHighlighterCore } from "shiki/core";
+import { createJavaScriptRegexEngine } from "shiki/engine/javascript";
 import { Button } from "@/components/ui/button";
 import {
 	Select,
@@ -36,6 +37,78 @@ const isUnderline = (fontStyle: number | undefined) =>
 	// oxlint-disable-next-line eslint(no-bitwise)
 	fontStyle && fontStyle & 4;
 
+const SUPPORTED_LANGUAGES = [
+	"bash",
+	"css",
+	"diff",
+	"html",
+	"javascript",
+	"json",
+	"jsonc",
+	"jsx",
+	"markdown",
+	"python",
+	"shellscript",
+	"tsx",
+	"typescript",
+	"yaml",
+] as const;
+
+export type SupportedCodeLanguage = (typeof SUPPORTED_LANGUAGES)[number];
+
+const SUPPORTED_LANGUAGE_SET = new Set<string>(SUPPORTED_LANGUAGES);
+
+const LANGUAGE_LOADERS: Record<
+	SupportedCodeLanguage,
+	() => Promise<LanguageRegistration[]>
+> = {
+	bash: () => import("@shikijs/langs/bash").then((module) => module.default),
+	css: () => import("@shikijs/langs/css").then((module) => module.default),
+	diff: () => import("@shikijs/langs/diff").then((module) => module.default),
+	html: () => import("@shikijs/langs/html").then((module) => module.default),
+	javascript: () =>
+		import("@shikijs/langs/javascript").then((module) => module.default),
+	json: () => import("@shikijs/langs/json").then((module) => module.default),
+	jsonc: () => import("@shikijs/langs/jsonc").then((module) => module.default),
+	jsx: () => import("@shikijs/langs/jsx").then((module) => module.default),
+	markdown: () =>
+		import("@shikijs/langs/markdown").then((module) => module.default),
+	python: () =>
+		import("@shikijs/langs/python").then((module) => module.default),
+	shellscript: () =>
+		import("@shikijs/langs/shellscript").then((module) => module.default),
+	tsx: () => import("@shikijs/langs/tsx").then((module) => module.default),
+	typescript: () =>
+		import("@shikijs/langs/typescript").then((module) => module.default),
+	yaml: () => import("@shikijs/langs/yaml").then((module) => module.default),
+};
+
+const LANGUAGE_ALIASES: Record<string, SupportedCodeLanguage> = {
+	console: "shellscript",
+	cjs: "javascript",
+	htm: "html",
+	js: "javascript",
+	json5: "jsonc",
+	md: "markdown",
+	mjs: "javascript",
+	py: "python",
+	sh: "shellscript",
+	shell: "shellscript",
+	ts: "typescript",
+	yml: "yaml",
+};
+
+const normalizeLanguage = (
+	language: string,
+): SupportedCodeLanguage | "text" => {
+	const normalized = language.trim().toLowerCase();
+	if (!normalized) {
+		return "text";
+	}
+	const aliased = LANGUAGE_ALIASES[normalized] ?? normalized;
+	return SUPPORTED_LANGUAGE_SET.has(aliased) ? aliased : "text";
+};
+
 // Transform tokens to include pre-computed keys to avoid noArrayIndexKey lint
 interface KeyedToken {
 	token: ThemedToken;
@@ -108,7 +181,7 @@ const LineSpan = ({
 // Types
 type CodeBlockProps = HTMLAttributes<HTMLDivElement> & {
 	code: string;
-	language: BundledLanguage;
+	language: string;
 	showLineNumbers?: boolean;
 };
 
@@ -128,10 +201,9 @@ const CodeBlockContext = createContext<CodeBlockContextType>({
 });
 
 // Highlighter cache (singleton per language)
-const highlighterCache = new Map<
-	string,
-	Promise<HighlighterGeneric<BundledLanguage, BundledTheme>>
->();
+let highlighterPromise: Promise<HighlighterCore> | undefined;
+let themesPromise: Promise<void> | undefined;
+const languagePromises = new Map<SupportedCodeLanguage, Promise<void>>();
 
 // Token cache
 const tokensCache = new Map<string, TokenizedCode>();
@@ -139,27 +211,44 @@ const tokensCache = new Map<string, TokenizedCode>();
 // Subscribers for async token updates
 const subscribers = new Map<string, Set<(result: TokenizedCode) => void>>();
 
-const getTokensCacheKey = (code: string, language: BundledLanguage) => {
+const getTokensCacheKey = (code: string, language: string) => {
 	const start = code.slice(0, 100);
 	const end = code.length > 100 ? code.slice(-100) : "";
 	return `${language}:${code.length}:${start}:${end}`;
 };
 
-const getHighlighter = (
-	language: BundledLanguage,
-): Promise<HighlighterGeneric<BundledLanguage, BundledTheme>> => {
-	const cached = highlighterCache.get(language);
+const getHighlighter = (): Promise<HighlighterCore> => {
+	if (!highlighterPromise) {
+		highlighterPromise = createHighlighterCore({
+			engine: createJavaScriptRegexEngine({ forgiving: true }),
+		});
+	}
+	return highlighterPromise;
+};
+
+const ensureThemes = (highlighter: HighlighterCore): Promise<void> => {
+	if (!themesPromise) {
+		themesPromise = Promise.all([
+			import("@shikijs/themes/github-light").then((module) => module.default),
+			import("@shikijs/themes/github-dark").then((module) => module.default),
+		]).then((themes: ThemeRegistration[]) => highlighter.loadTheme(...themes));
+	}
+	return themesPromise;
+};
+
+const ensureLanguage = (
+	highlighter: HighlighterCore,
+	language: SupportedCodeLanguage,
+): Promise<void> => {
+	const cached = languagePromises.get(language);
 	if (cached) {
 		return cached;
 	}
-
-	const highlighterPromise = createHighlighter({
-		langs: [language],
-		themes: ["github-light", "github-dark"],
-	});
-
-	highlighterCache.set(language, highlighterPromise);
-	return highlighterPromise;
+	const languagePromise = LANGUAGE_LOADERS[language]().then((registrations) =>
+		highlighter.loadLanguage(...registrations),
+	);
+	languagePromises.set(language, languagePromise);
+	return languagePromise;
 };
 
 // Create raw tokens for immediate display while highlighting loads
@@ -181,11 +270,16 @@ const createRawTokens = (code: string): TokenizedCode => ({
 // Synchronous highlight with callback for async results
 export const highlightCode = (
 	code: string,
-	language: BundledLanguage,
+	language: string,
 	// oxlint-disable-next-line eslint-plugin-promise(prefer-await-to-callbacks)
 	callback?: (result: TokenizedCode) => void,
 ): TokenizedCode | null => {
-	const tokensCacheKey = getTokensCacheKey(code, language);
+	const langToUse = normalizeLanguage(language);
+	if (langToUse === "text") {
+		return createRawTokens(code);
+	}
+
+	const tokensCacheKey = getTokensCacheKey(code, langToUse);
 
 	// Return cached result if available
 	const cached = tokensCache.get(tokensCacheKey);
@@ -202,11 +296,11 @@ export const highlightCode = (
 	}
 
 	// Start highlighting in background - fire-and-forget async pattern
-	getHighlighter(language)
+	getHighlighter()
 		// oxlint-disable-next-line eslint-plugin-promise(prefer-await-to-then)
-		.then((highlighter) => {
-			const availableLangs = highlighter.getLoadedLanguages();
-			const langToUse = availableLangs.includes(language) ? language : "text";
+		.then(async (highlighter) => {
+			await ensureThemes(highlighter);
+			await ensureLanguage(highlighter, langToUse);
 
 			const result = highlighter.codeToTokens(code, {
 				lang: langToUse,
@@ -376,7 +470,7 @@ export const CodeBlockContent = ({
 	showLineNumbers = false,
 }: {
 	code: string;
-	language: BundledLanguage;
+	language: string;
 	showLineNumbers?: boolean;
 }) => {
 	// Memoized raw tokens for immediate display

apps/cline-hub/src/webview/src/components/ai-elements/message.tsx

@@ -1,9 +1,5 @@
 "use client";
 
-import { cjk } from "@streamdown/cjk";
-import { code } from "@streamdown/code";
-import { math } from "@streamdown/math";
-import { mermaid } from "@streamdown/mermaid";
 import type { UIMessage } from "ai";
 import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
 import type { ComponentProps, HTMLAttributes, ReactElement } from "react";
@@ -16,7 +12,6 @@ import {
 	useMemo,
 	useState,
 } from "react";
-import { Streamdown } from "streamdown";
 import { Button } from "@/components/ui/button";
 import { ButtonGroup, ButtonGroupText } from "@/components/ui/button-group";
 import {
@@ -26,6 +21,7 @@ import {
 	TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
+import { HubStreamdown } from "./streamdown";
 
 export type MessageProps = HTMLAttributes<HTMLDivElement> & {
 	from: UIMessage["role"];
@@ -316,24 +312,18 @@ export const MessageBranchPage = ({
 	);
 };
 
-export type MessageResponseProps = ComponentProps<typeof Streamdown>;
-
-const streamdownPlugins = { cjk, code, math, mermaid };
+export type MessageResponseProps = ComponentProps<typeof HubStreamdown>;
 
 export const MessageResponse = memo(
 	({ className, ...props }: MessageResponseProps) => (
-		<Streamdown
+		<HubStreamdown
 			className={cn(
 				"size-full [&>*:first-child]:mt-0 [&>*:last-child]:mb-0",
 				className,
 			)}
-			plugins={streamdownPlugins}
 			{...props}
 		/>
 	),
-	(prevProps, nextProps) =>
-		prevProps.children === nextProps.children &&
-		nextProps.isAnimating === prevProps.isAnimating,
 );
 
 MessageResponse.displayName = "MessageResponse";

apps/cline-hub/src/webview/src/components/ai-elements/reasoning.tsx

@@ -1,10 +1,6 @@
 "use client";
 
 import { useControllableState } from "@radix-ui/react-use-controllable-state";
-import { cjk } from "@streamdown/cjk";
-import { code } from "@streamdown/code";
-import { math } from "@streamdown/math";
-import { mermaid } from "@streamdown/mermaid";
 import { BrainIcon, ChevronDownIcon } from "lucide-react";
 import type { ComponentProps, ReactNode } from "react";
 import {
@@ -17,7 +13,6 @@ import {
 	useRef,
 	useState,
 } from "react";
-import { Streamdown } from "streamdown";
 import {
 	Collapsible,
 	CollapsibleContent,
@@ -26,6 +21,7 @@ import {
 import { cn } from "@/lib/utils";
 
 import { Shimmer } from "./shimmer";
+import { HubStreamdown } from "./streamdown";
 
 interface ReasoningContextValue {
 	isStreaming: boolean;
@@ -204,8 +200,6 @@ export type ReasoningContentProps = ComponentProps<
 	children: string;
 };
 
-const streamdownPlugins = { cjk, code, math, mermaid };
-
 export const ReasoningContent = memo(
 	({ className, children, ...props }: ReasoningContentProps) => (
 		<CollapsibleContent
@@ -216,7 +210,7 @@ export const ReasoningContent = memo(
 			)}
 			{...props}
 		>
-			<Streamdown plugins={streamdownPlugins}>{children}</Streamdown>
+			<HubStreamdown>{children}</HubStreamdown>
 		</CollapsibleContent>
 	),
 );

apps/cline-hub/src/webview/src/components/ai-elements/streamdown.tsx

@@ -0,0 +1,170 @@
+import { cjk } from "@streamdown/cjk";
+import type { MermaidConfig } from "mermaid";
+import type { ComponentProps, ReactNode } from "react";
+import { isValidElement, memo } from "react";
+import {
+	type Components,
+	type DiagramPlugin,
+	Streamdown,
+	type StreamdownProps,
+} from "streamdown";
+import {
+	CodeBlock,
+	CodeBlockActions,
+	CodeBlockCopyButton,
+	CodeBlockFilename,
+	CodeBlockHeader,
+	CodeBlockTitle,
+} from "@/components/ai-elements/code-block";
+import { cn } from "@/lib/utils";
+
+type MarkdownCodeProps = ComponentProps<"code"> & {
+	"data-block"?: boolean | string;
+	node?: {
+		properties?: {
+			metastring?: string;
+		};
+	};
+};
+
+const LANGUAGE_CLASS_PATTERN = /(?:^|\s)language-([^\s]+)/;
+const START_LINE_PATTERN = /startLine=(\d+)/;
+const NO_LINE_NUMBERS_PATTERN = /\bnoLineNumbers\b/;
+
+function codeText(children: ReactNode): string {
+	if (typeof children === "string" || typeof children === "number") {
+		return String(children);
+	}
+	if (Array.isArray(children)) {
+		return children.map(codeText).join("");
+	}
+	if (isValidElement<{ children?: ReactNode }>(children)) {
+		return codeText(children.props.children);
+	}
+	return "";
+}
+
+const MarkdownCode = ({
+	children,
+	className,
+	node,
+	"data-block": dataBlock,
+	...props
+}: MarkdownCodeProps) => {
+	const language = className?.match(LANGUAGE_CLASS_PATTERN)?.[1] ?? "text";
+
+	if (!dataBlock) {
+		return (
+			<code
+				className={cn(
+					"rounded bg-muted px-1.5 py-0.5 font-mono text-sm",
+					className,
+				)}
+				{...props}
+			>
+				{children}
+			</code>
+		);
+	}
+
+	const meta = node?.properties?.metastring;
+	const startLineMatch = meta?.match(START_LINE_PATTERN);
+	const startLine = startLineMatch ? Number.parseInt(startLineMatch[1], 10) : 1;
+	const showLineNumbers = meta ? !NO_LINE_NUMBERS_PATTERN.test(meta) : true;
+
+	return (
+		<CodeBlock
+			code={codeText(children)}
+			data-start-line={startLine > 1 ? startLine : undefined}
+			language={language}
+			showLineNumbers={showLineNumbers}
+		>
+			<CodeBlockHeader>
+				<CodeBlockTitle>
+					<CodeBlockFilename>{language}</CodeBlockFilename>
+				</CodeBlockTitle>
+				<CodeBlockActions>
+					<CodeBlockCopyButton />
+				</CodeBlockActions>
+			</CodeBlockHeader>
+		</CodeBlock>
+	);
+};
+
+const markdownComponents = {
+	code: MarkdownCode,
+} satisfies Components;
+
+const DEFAULT_MERMAID_CONFIG = {
+	fontFamily: "monospace",
+	securityLevel: "strict",
+	startOnLoad: false,
+	suppressErrorRendering: true,
+	theme: "default",
+} satisfies MermaidConfig;
+
+interface LazyMermaidInstance {
+	initialize: (config: MermaidConfig) => void;
+	render: (
+		id: string,
+		source: string,
+	) => Promise<{
+		svg: string;
+	}>;
+}
+
+function createLazyMermaidPlugin(): DiagramPlugin {
+	let config: MermaidConfig = DEFAULT_MERMAID_CONFIG;
+	let initialized = false;
+
+	const instance: LazyMermaidInstance = {
+		initialize(nextConfig: MermaidConfig) {
+			config = { ...DEFAULT_MERMAID_CONFIG, ...config, ...nextConfig };
+			initialized = false;
+		},
+		async render(id: string, source: string) {
+			const mermaidModule = await import("mermaid");
+			const mermaid = mermaidModule.default;
+			if (!initialized) {
+				mermaid.initialize(config);
+				initialized = true;
+			}
+			return mermaid.render(id, source);
+		},
+	};
+
+	return {
+		getMermaid(nextConfig?: MermaidConfig) {
+			if (nextConfig) {
+				instance.initialize(nextConfig);
+			}
+			return instance;
+		},
+		language: "mermaid",
+		name: "mermaid",
+		type: "diagram",
+	};
+}
+
+const streamdownPlugins = { cjk, mermaid: createLazyMermaidPlugin() };
+
+export type HubStreamdownProps = StreamdownProps;
+
+export const HubStreamdown = memo(
+	({ className, components, ...props }: HubStreamdownProps) => {
+		const mergedComponents = components
+			? { ...markdownComponents, ...components }
+			: markdownComponents;
+
+		return (
+			<Streamdown
+				className={className}
+				components={mergedComponents}
+				plugins={streamdownPlugins}
+				{...props}
+			/>
+		);
+	},
+);
+
+HubStreamdown.displayName = "HubStreamdown";

apps/cline-hub/src/webview/src/components/ui/accordion.tsx

@@ -32,7 +32,7 @@ function AccordionTrigger({
 			<AccordionPrimitive.Trigger
 				data-slot="accordion-trigger"
 				className={cn(
-					"group/accordion-trigger relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground",
+					"group/accordion-trigger relative flex flex-1 cursor-pointer items-start justify-between rounded-lg border border-transparent py-2.5 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring aria-disabled:pointer-events-none aria-disabled:cursor-not-allowed aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground",
 					className,
 				)}
 				{...props}

apps/cline-hub/src/webview/src/components/ui/checkbox.tsx

@@ -9,7 +9,7 @@ function Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {
 		<CheckboxPrimitive.Root
 			data-slot="checkbox"
 			className={cn(
-				"peer relative flex size-4 shrink-0 items-center justify-center rounded-lg border border-input transition-colors outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary",
+				"peer relative flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-lg border border-input transition-colors outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-disabled:cursor-not-allowed aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary",
 				className,
 			)}
 			{...props}

apps/cline-hub/src/webview/src/components/ui/combobox.tsx

@@ -24,7 +24,10 @@ function ComboboxTrigger({
 	return (
 		<ComboboxPrimitive.Trigger
 			data-slot="combobox-trigger"
-			className={cn("[&_svg:not([class*='size-'])]:size-4", className)}
+			className={cn(
+				"cursor-pointer data-disabled:cursor-not-allowed [&_svg:not([class*='size-'])]:size-4",
+				className,
+			)}
 			{...props}
 		>
 			{children}
@@ -140,7 +143,7 @@ function ComboboxItem({
 		<ComboboxPrimitive.Item
 			data-slot="combobox-item"
 			className={cn(
-				"relative flex w-full cursor-default items-center gap-2 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				"relative flex w-full cursor-pointer items-center gap-2 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 				className,
 			)}
 			{...props}
@@ -250,7 +253,7 @@ function ComboboxChip({
 			{showRemove && (
 				<ComboboxPrimitive.ChipRemove
 					render={<Button variant="ghost" size="icon-xs" />}
-					className="-ml-1 opacity-50 hover:opacity-100"
+					className="-ml-1 cursor-pointer opacity-50 hover:opacity-100"
 					data-slot="combobox-chip-remove"
 				>
 					<XIcon className="pointer-events-none" />

apps/cline-hub/src/webview/src/components/ui/command.tsx

@@ -152,7 +152,7 @@ function CommandItem({
 		<CommandPrimitive.Item
 			data-slot="command-item"
 			className={cn(
-				"group/command-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-selected:bg-muted data-selected:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-selected:*:[svg]:text-foreground",
+				"group/command-item relative flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! data-[disabled=true]:pointer-events-none data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50 data-selected:bg-muted data-selected:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-selected:*:[svg]:text-foreground",
 				className,
 			)}
 			{...props}

apps/cline-hub/src/webview/src/components/ui/dropdown-menu.tsx

@@ -90,7 +90,7 @@ function DropdownMenuItem({
 			data-inset={inset}
 			data-variant={variant}
 			className={cn(
-				"group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive",
+				"group/dropdown-menu-item relative flex cursor-pointer items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive",
 				className,
 			)}
 			{...props}
@@ -115,7 +115,7 @@ function DropdownMenuSubTrigger({
 			data-slot="dropdown-menu-sub-trigger"
 			data-inset={inset}
 			className={cn(
-				"flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-popup-open:bg-accent data-popup-open:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				"flex cursor-pointer items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-popup-open:bg-accent data-popup-open:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground data-disabled:cursor-not-allowed [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 				className,
 			)}
 			{...props}
@@ -164,7 +164,7 @@ function DropdownMenuCheckboxItem({
 			data-slot="dropdown-menu-checkbox-item"
 			data-inset={inset}
 			className={cn(
-				"relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				"relative flex cursor-pointer items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 				className,
 			)}
 			checked={checked}
@@ -205,7 +205,7 @@ function DropdownMenuRadioItem({
 			data-slot="dropdown-menu-radio-item"
 			data-inset={inset}
 			className={cn(
-				"relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				"relative flex cursor-pointer items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 				className,
 			)}
 			{...props}

apps/cline-hub/src/webview/src/components/ui/menubar.tsx

@@ -56,7 +56,7 @@ function MenubarTrigger({
 		<DropdownMenuTrigger
 			data-slot="menubar-trigger"
 			className={cn(
-				"flex items-center rounded-sm px-1.5 py-0.5 text-sm font-medium outline-hidden select-none hover:bg-muted aria-expanded:bg-muted",
+				"flex cursor-pointer items-center rounded-sm px-1.5 py-0.5 text-sm font-medium outline-hidden select-none hover:bg-muted aria-expanded:bg-muted",
 				className,
 			)}
 			{...props}
@@ -120,7 +120,7 @@ function MenubarCheckboxItem({
 			data-slot="menubar-checkbox-item"
 			data-inset={inset}
 			className={cn(
-				"relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+				"relative flex cursor-pointer items-center gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
 				className,
 			)}
 			checked={checked}
@@ -155,7 +155,7 @@ function MenubarRadioItem({
 			data-slot="menubar-radio-item"
 			data-inset={inset}
 			className={cn(
-				"relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				"relative flex cursor-pointer items-center gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 				className,
 			)}
 			{...props}

apps/cline-hub/src/webview/src/components/ui/native-select.tsx

@@ -23,7 +23,7 @@ function NativeSelect({
 			<select
 				data-slot="native-select"
 				data-size={size}
-				className="h-full w-full min-w-0 appearance-none rounded-lg border border-input bg-transparent py-1 pr-8 pl-2.5 text-sm transition-colors outline-none select-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40"
+				className="h-full w-full min-w-0 cursor-pointer appearance-none rounded-lg border border-input bg-transparent py-1 pr-8 pl-2.5 text-sm transition-colors outline-none select-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40"
 				{...props}
 			/>
 			<ChevronDownIcon

apps/cline-hub/src/webview/src/components/ui/radio-group.tsx

@@ -18,7 +18,7 @@ function RadioGroupItem({ className, ...props }: RadioPrimitive.Root.Props) {
 		<RadioPrimitive.Root
 			data-slot="radio-group-item"
 			className={cn(
-				"group/radio-group-item peer relative flex aspect-square size-4 shrink-0 rounded-full border border-input outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary",
+				"group/radio-group-item peer relative flex aspect-square size-4 shrink-0 cursor-pointer rounded-full border border-input outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-disabled:cursor-not-allowed aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary",
 				className,
 			)}
 			{...props}

apps/cline-hub/src/webview/src/components/ui/select.tsx

@@ -38,7 +38,7 @@ function SelectTrigger({
 			data-slot="select-trigger"
 			data-size={size}
 			className={cn(
-				"flex w-fit items-center justify-between gap-1.5 rounded-lg border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				"flex w-fit cursor-pointer items-center justify-between gap-1.5 rounded-lg border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 				className,
 			)}
 			{...props}
@@ -117,7 +117,7 @@ function SelectItem({
 		<SelectPrimitive.Item
 			data-slot="select-item"
 			className={cn(
-				"relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+				"relative flex w-full cursor-pointer items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
 				className,
 			)}
 			{...props}
@@ -157,7 +157,7 @@ function SelectScrollUpButton({
 		<SelectPrimitive.ScrollUpArrow
 			data-slot="select-scroll-up-button"
 			className={cn(
-				"top-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
+				"top-0 z-10 flex w-full cursor-pointer items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
 				className,
 			)}
 			{...props}
@@ -175,7 +175,7 @@ function SelectScrollDownButton({
 		<SelectPrimitive.ScrollDownArrow
 			data-slot="select-scroll-down-button"
 			className={cn(
-				"bottom-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
+				"bottom-0 z-10 flex w-full cursor-pointer items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
 				className,
 			)}
 			{...props}

apps/cline-hub/src/webview/src/components/ui/switch.tsx

@@ -16,7 +16,7 @@ function Switch({
 			data-slot="switch"
 			data-size={size}
 			className={cn(
-				"peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=default]:h-[18.4px] data-[size=default]:w-8 data-[size=sm]:h-3.5 data-[size=sm]:w-6 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50",
+				"peer group/switch relative inline-flex cursor-pointer shrink-0 items-center rounded-full border border-transparent transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=default]:h-[18.4px] data-[size=default]:w-8 data-[size=sm]:h-3.5 data-[size=sm]:w-6 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50",
 				className,
 			)}
 			{...props}

apps/cline-hub/src/webview/src/components/ui/tabs.tsx

@@ -58,7 +58,7 @@ function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
 		<TabsPrimitive.Tab
 			data-slot="tabs-trigger"
 			className={cn(
-				"relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				"relative inline-flex h-[calc(100%-1px)] flex-1 cursor-pointer items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:cursor-not-allowed aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 				"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 data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground",
 				"after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",

apps/cline-hub/src/webview/src/components/views/page-layout.tsx

@@ -0,0 +1,111 @@
+import type { ComponentType, ReactNode } from "react";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { cn } from "@/lib/utils";
+
+type PageFrameProps = {
+	children: ReactNode;
+	className?: string;
+	contentClassName?: string;
+};
+
+export function PageFrame({
+	children,
+	className,
+	contentClassName,
+}: PageFrameProps) {
+	return (
+		<ScrollArea className="h-full">
+			<div
+				className={cn(
+					"px-18 py-10 max-[1200px]:px-8 max-[720px]:px-4 max-[720px]:py-5",
+					className,
+				)}
+			>
+				<div className={cn("max-w-[86rem]", contentClassName)}>{children}</div>
+			</div>
+		</ScrollArea>
+	);
+}
+
+type PageHeaderProps = {
+	actions?: ReactNode;
+	className?: string;
+	description?: ReactNode;
+	icon?: ComponentType<{ className?: string }>;
+	meta?: ReactNode;
+	title: ReactNode;
+};
+
+export function PageHeader({
+	actions,
+	className,
+	description,
+	icon: Icon,
+	meta,
+	title,
+}: PageHeaderProps) {
+	return (
+		<section
+			className={cn(
+				"mb-8 flex items-start justify-between gap-6 max-[860px]:flex-col max-[860px]:items-stretch",
+				className,
+			)}
+		>
+			<div className="min-w-0">
+				<div className="flex min-w-0 items-center gap-3">
+					{Icon ? <Icon className="size-8 shrink-0 text-primary" /> : null}
+					<h1 className="truncate text-[32px] font-semibold leading-[1.15] tracking-normal text-foreground">
+						{title}
+					</h1>
+					{meta}
+				</div>
+				{description ? (
+					<p className="mt-3 max-w-2xl text-[15px] leading-6 text-muted-foreground">
+						{description}
+					</p>
+				) : null}
+			</div>
+			{actions ? (
+				<div className="flex shrink-0 flex-wrap items-center justify-end gap-2 max-[860px]:justify-start">
+					{actions}
+				</div>
+			) : null}
+		</section>
+	);
+}
+
+type PageEmptyStateProps = {
+	children: ReactNode;
+	className?: string;
+};
+
+export function PageEmptyState({ children, className }: PageEmptyStateProps) {
+	return (
+		<div
+			className={cn(
+				"rounded-lg border border-dashed border-border bg-card px-5 py-4 text-sm leading-6 text-muted-foreground",
+				className,
+			)}
+		>
+			{children}
+		</div>
+	);
+}
+
+type CommandBadgeProps = {
+	children: ReactNode;
+	className?: string;
+};
+
+export function CommandBadge({ children, className }: CommandBadgeProps) {
+	return (
+		<span
+			className={cn(
+				"rounded-md border border-border bg-background px-2 py-0.5 font-mono text-xs text-muted-foreground",
+				className,
+			)}
+		>
+			{children}
+		</span>
+	);
+}

apps/cline-hub/src/webview/src/components/views/settings/account-view.tsx

@@ -15,15 +15,18 @@ import {
 	CreditCard,
 	ExternalLink,
 	Loader2,
+	LogIn,
 	LogOut,
 	Plus,
 	Receipt,
 	RefreshCw,
+	UserCircleIcon,
 } from "lucide-react";
 import { useCallback, useEffect, useRef, useState } from "react";
-import { ScrollArea } from "@/components/ui/scroll-area";
+import { Button } from "@/components/ui/button";
 import { desktopClient } from "@/lib/desktop-client";
 import { cn } from "@/lib/utils";
+import { PageFrame, PageHeader } from "../page-layout";
 
 function normalizeAccountViewError(error: unknown): Error {
 	const message = error instanceof Error ? error.message : String(error);
@@ -35,6 +38,16 @@ function normalizeAccountViewError(error: unknown): Error {
 	return error instanceof Error ? error : new Error(message);
 }
 
+function isAccountAuthError(message: string): boolean {
+	const normalized = message.toLowerCase();
+	return (
+		normalized.includes("no cline account auth token found") ||
+		normalized.includes("requires re-authentication") ||
+		normalized.includes("auth token") ||
+		normalized.includes("unauthorized")
+	);
+}
+
 // ---------------------------------------------------------------------------
 // Data fetching helpers via sidecar command
 // ---------------------------------------------------------------------------
@@ -125,6 +138,9 @@ export function AccountView() {
 	const [activeTab, setActiveTab] = useState<"overview" | "usage" | "billing">(
 		"overview",
 	);
+	const [accountActionPending, setAccountActionPending] = useState<
+		"sign-in" | "sign-out" | null
+	>(null);
 
 	// Overview data
 	const [user, setUser] = useState<ClineAccountUser | null>(null);
@@ -155,6 +171,19 @@ export function AccountView() {
 	const [billingLoaded, setBillingLoaded] = useState(false);
 	const activeOrganization = organizations.find((org) => org.active) ?? null;
 
+	const resetAccountData = useCallback(() => {
+		setUser(null);
+		setBalance(null);
+		setOrganizationBalance(null);
+		setOrganizations([]);
+		setUsageTransactions([]);
+		setUsageLoaded(false);
+		setUsageError(null);
+		setPaymentTransactions([]);
+		setBillingLoaded(false);
+		setBillingError(null);
+	}, []);
+
 	// -- Overview fetch --
 	const loadOverview = useCallback(async () => {
 		setOverviewLoading(true);
@@ -175,17 +204,61 @@ export function AccountView() {
 			setOrganizationBalance(organizationBalanceData);
 			setOrganizations(orgsData);
 		} catch (err) {
+			resetAccountData();
 			const message = normalizeAccountViewError(err).message;
 			setOverviewError(message);
 		} finally {
 			setOverviewLoading(false);
 		}
-	}, []);
+	}, [resetAccountData]);
 
 	useEffect(() => {
 		void loadOverview();
 	}, [loadOverview]);
 
+	const signIn = async () => {
+		setAccountActionPending("sign-in");
+		setOverviewError(null);
+		try {
+			await desktopClient.invoke("run_provider_oauth_login", {
+				provider: "cline",
+			});
+			await loadOverview();
+			setActiveTab("overview");
+		} catch (err) {
+			const message = normalizeAccountViewError(err).message;
+			setOverviewError(message);
+			resetAccountData();
+		} finally {
+			setAccountActionPending(null);
+		}
+	};
+
+	const signOut = async () => {
+		setAccountActionPending("sign-out");
+		try {
+			await desktopClient.invoke("save_provider_settings", {
+				provider: "cline",
+				api_key: "",
+				settings: {
+					auth: {
+						accessToken: "",
+						refreshToken: "",
+						accountId: "",
+					},
+				},
+			});
+			resetAccountData();
+			setActiveTab("overview");
+			setOverviewError("No Cline account auth token found");
+		} catch (err) {
+			const message = normalizeAccountViewError(err).message;
+			setOverviewError(message);
+		} finally {
+			setAccountActionPending(null);
+		}
+	};
+
 	// -- Usage fetch (lazy on tab switch) --
 	const loadUsage = useCallback(async () => {
 		const generation = usageGenerationRef.current;
@@ -295,6 +368,48 @@ export function AccountView() {
 		</div>
 	);
 
+	const renderSignedOut = () => (
+		<div className="rounded-lg border border-border bg-card p-6">
+			<div className="mx-auto flex max-w-xl flex-col items-center gap-4 py-8 text-center">
+				<div className="flex size-12 items-center justify-center rounded-lg bg-primary/10 text-primary">
+					<UserCircleIcon className="h-6 w-6" />
+				</div>
+				<div>
+					<h3 className="text-lg font-semibold text-foreground">
+						Sign in to Cline
+					</h3>
+					<p className="mt-2 text-sm text-muted-foreground">
+						Connect your Cline account to review credits, usage, billing, and
+						organization details from Cline Hub.
+					</p>
+				</div>
+				<div className="flex flex-wrap items-center justify-center gap-2">
+					<Button
+						disabled={accountActionPending !== null}
+						onClick={() => void signIn()}
+						type="button"
+					>
+						{accountActionPending === "sign-in" ? (
+							<Loader2 className="h-4 w-4 animate-spin" />
+						) : (
+							<LogIn className="h-4 w-4" />
+						)}
+						{accountActionPending === "sign-in" ? "Signing in" : "Sign in"}
+					</Button>
+					<a
+						className="inline-flex h-9 items-center gap-2 rounded-lg border border-border px-3.5 text-sm font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+						href="https://app.cline.bot"
+						rel="noopener noreferrer"
+						target="_blank"
+					>
+						Create account
+						<ExternalLink className="h-4 w-4" />
+					</a>
+				</div>
+			</div>
+		</div>
+	);
+
 	const renderLoading = () => (
 		<div className="flex items-center justify-center py-12">
 			<Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
@@ -302,24 +417,19 @@ export function AccountView() {
 	);
 
 	return (
-		<ScrollArea className="h-full">
-			<div className="mx-auto max-w-3xl px-8 py-6">
-				{/* Header */}
-				<div className="mb-6 flex items-center justify-between">
-					<h2 className="text-lg font-semibold text-foreground">Account</h2>
-					<button
-						type="button"
-						className="flex items-center gap-2 rounded-lg border border-border px-3.5 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-foreground transition-colors"
-					>
-						<LogOut className="h-4 w-4" />
-						Sign Out
-					</button>
-				</div>
+		<PageFrame>
+			<PageHeader
+				description="Review account, usage, billing, and organization details."
+				title="Account"
+			/>
 
-				{/* Tabs */}
-				<div className="mb-6 flex items-center gap-0 border-b border-border">
-					{tabs.map((tab) => (
+			{/* Tabs */}
+			<div className="mb-6 flex items-center gap-0 border-b border-border">
+				{tabs.map((tab) => {
+					const disabled = !user && tab !== "overview";
+					return (
 						<button
+							disabled={disabled}
 							key={tab}
 							type="button"
 							onClick={() => setActiveTab(tab)}
@@ -328,6 +438,8 @@ export function AccountView() {
 								activeTab === tab
 									? "text-foreground"
 									: "text-muted-foreground hover:text-foreground",
+								disabled &&
+									"cursor-not-allowed opacity-45 hover:text-muted-foreground",
 							)}
 						>
 							{tab}
@@ -335,243 +447,265 @@ export function AccountView() {
 								<span className="absolute inset-x-0 -bottom-px h-0.5 bg-foreground" />
 							)}
 						</button>
-					))}
-				</div>
+					);
+				})}
+			</div>
 
-				{/* Overview Tab */}
-				{activeTab === "overview" && (
-					<div className="flex flex-col gap-6">
-						{overviewLoading && renderLoading()}
-						{overviewError && renderError(overviewError, loadOverview)}
-						{!overviewLoading && !overviewError && user && (
-							<>
-								{/* User Profile Card */}
-								<div className="rounded-lg border border-border p-5">
-									<div className="flex items-start gap-4">
-										<div className="flex h-16 w-16 shrink-0 items-center justify-center rounded-full bg-primary/20 text-2xl font-bold text-primary">
-											{user.displayName?.charAt(0) ??
-												user.email?.charAt(0) ??
-												"?"}
-										</div>
-										<div className="min-w-0 flex-1">
-											<h3 className="text-base font-semibold text-foreground">
-												{user.displayName || user.email}
-											</h3>
-											<p className="mt-0.5 text-sm text-muted-foreground">
-												{user.email}
-											</p>
-											<p className="mt-2 text-xs text-muted-foreground">
-												Member since {formatDate(user.createdAt)}
-											</p>
-										</div>
+			{/* Overview Tab */}
+			{activeTab === "overview" && (
+				<div className="flex flex-col gap-6">
+					{overviewLoading && renderLoading()}
+					{overviewError &&
+						(isAccountAuthError(overviewError)
+							? renderSignedOut()
+							: renderError(overviewError, loadOverview))}
+					{!overviewLoading && !overviewError && user && (
+						<>
+							{/* User Profile Card */}
+							<div className="rounded-lg border border-border p-5">
+								<div className="flex items-start gap-4">
+									<div className="flex h-16 w-16 shrink-0 items-center justify-center rounded-full bg-primary/20 text-2xl font-bold text-primary">
+										{user.displayName?.charAt(0) ??
+											user.email?.charAt(0) ??
+											"?"}
+									</div>
+									<div className="min-w-0 flex-1">
+										<h3 className="text-base font-semibold text-foreground">
+											{user.displayName || user.email}
+										</h3>
+										<p className="mt-0.5 text-sm text-muted-foreground">
+											{user.email}
+										</p>
+										<p className="mt-2 text-xs text-muted-foreground">
+											Member since {formatDate(user.createdAt)}
+										</p>
+									</div>
+									<div className="flex shrink-0 items-center gap-2">
 										<a
 											href="https://app.cline.bot/dashboard"
 											target="_blank"
 											rel="noopener noreferrer"
-											className="rounded-md p-1.5 text-muted-foreground hover:bg-accent hover:text-foreground transition-colors"
+											className="inline-flex h-8 items-center gap-1.5 rounded-md border border-border px-2.5 text-xs font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
 										>
-											<ExternalLink className="h-4 w-4" />
+											Open dashboard
+											<ExternalLink className="h-3.5 w-3.5" />
 										</a>
+										<Button
+											className="h-8 rounded-md px-2.5 text-xs"
+											disabled={accountActionPending !== null}
+											onClick={() => void signOut()}
+											type="button"
+											variant="outline"
+										>
+											{accountActionPending === "sign-out" ? (
+												<Loader2 className="h-3.5 w-3.5 animate-spin" />
+											) : (
+												<LogOut className="h-3.5 w-3.5" />
+											)}
+											{accountActionPending === "sign-out"
+												? "Signing out"
+												: "Sign out"}
+										</Button>
 									</div>
 								</div>
+							</div>
 
-								{/* Balance Card */}
-								{displayedBalance !== null && (
-									<div className="rounded-lg border border-border p-5">
-										<div className="flex items-center justify-between mb-4">
-											<div className="flex items-center gap-3">
-												<CreditCard className="h-5 w-5 text-primary" />
-												<h3 className="text-sm font-semibold text-foreground">
-													{activeOrganization
-														? `${activeOrganization.name} Balance`
-														: "Credits Balance"}
-												</h3>
-											</div>
-											<a
-												href="https://app.cline.bot/dashboard/organization?tab=credits&redirect=true"
-												target="_blank"
-												rel="noopener noreferrer"
-												className="flex items-center gap-1.5 rounded-md px-2.5 py-1.5 text-xs font-medium text-muted-foreground hover:bg-accent hover:text-foreground transition-colors"
-											>
-												<Plus className="h-3.5 w-3.5" />
-												Credit
-											</a>
-										</div>
-										<div className="flex items-baseline gap-2">
-											<span className="text-3xl font-bold text-foreground">
-												${formatCreditBalance(displayedBalance)}
-											</span>
-										</div>
-										{activeOrganization && balance && (
-											<p className="mt-2 text-xs text-muted-foreground">
-												Personal account: {formatCreditBalance(balance.balance)}{" "}
-												credits
-											</p>
-										)}
-									</div>
-								)}
-
-								{/* Organizations */}
+							{/* Balance Card */}
+							{displayedBalance !== null && (
 								<div className="rounded-lg border border-border p-5">
 									<div className="flex items-center justify-between mb-4">
 										<div className="flex items-center gap-3">
-											<Building className="h-5 w-5 text-muted-foreground" />
+											<CreditCard className="h-5 w-5 text-primary" />
 											<h3 className="text-sm font-semibold text-foreground">
-												Organizations
+												{activeOrganization
+													? `${activeOrganization.name} Balance`
+													: "Credits Balance"}
 											</h3>
 										</div>
 										<a
-											href="https://app.cline.bot/onboarding?step=1"
+											href="https://app.cline.bot/dashboard/organization?tab=credits&redirect=true"
 											target="_blank"
 											rel="noopener noreferrer"
 											className="flex items-center gap-1.5 rounded-md px-2.5 py-1.5 text-xs font-medium text-muted-foreground hover:bg-accent hover:text-foreground transition-colors"
 										>
 											<Plus className="h-3.5 w-3.5" />
-											Create
+											Credit
 										</a>
 									</div>
-									{organizations.length === 0 ? (
-										<p className="text-sm text-muted-foreground">
-											No organizations yet.
+									<div className="flex items-baseline gap-2">
+										<span className="text-3xl font-bold text-foreground">
+											${formatCreditBalance(displayedBalance)}
+										</span>
+									</div>
+									{activeOrganization && balance && (
+										<p className="mt-2 text-xs text-muted-foreground">
+											Personal account: {formatCreditBalance(balance.balance)}{" "}
+											credits
 										</p>
-									) : (
-										<div className="flex flex-col gap-2">
-											{organizations.map((org) => (
-												<div
-													key={org.organizationId}
-													className="flex items-center gap-3 rounded-lg border border-border px-4 py-3 transition-colors hover:bg-accent/20"
-												>
-													<div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-secondary text-sm font-bold text-foreground">
-														{org.name.charAt(0)}
-													</div>
-													<div className="min-w-0 flex-1">
-														<p className="text-sm font-medium text-foreground">
-															{org.name}
-														</p>
-														<p className="text-xs text-muted-foreground capitalize">
-															{org.roles.join(", ")}
-														</p>
-													</div>
-													{org.active && (
-														<span className="rounded-full bg-primary/20 px-2 py-0.5 text-xs font-medium text-primary">
-															Active
-														</span>
-													)}
-												</div>
-											))}
-										</div>
 									)}
 								</div>
-							</>
-						)}
-					</div>
-				)}
+							)}
 
-				{/* Usage Tab */}
-				{activeTab === "usage" && (
-					<div>
-						<p className="mb-6 text-sm text-muted-foreground">
-							{activeOrganization
-								? `Recent API usage and token consumption for ${activeOrganization.name}.`
-								: "Recent API usage and token consumption across all providers."}
-						</p>
-						{usageLoading && renderLoading()}
-						{usageError && renderError(usageError, loadUsage)}
-						{!usageLoading &&
-							!usageError &&
-							usageLoaded &&
-							(usageTransactions.length === 0 ? (
-								<p className="py-8 text-center text-sm text-muted-foreground">
-									No usage transactions yet.
-								</p>
-							) : (
-								<div className="rounded-lg border border-border overflow-hidden">
-									<div className="grid grid-cols-[1fr_auto_auto_auto] gap-4 border-b border-border bg-secondary/50 px-4 py-2.5 text-xs font-medium text-muted-foreground">
-										<span>Model</span>
-										<span className="text-right">Tokens</span>
-										<span className="text-right">Credits</span>
-										<span className="text-right">Time</span>
-									</div>
-									<div className="divide-y divide-border">
-										{usageTransactions.map((tx) => (
-											<div
-												key={tx.id}
-												className="grid grid-cols-[1fr_auto_auto_auto] gap-4 px-4 py-3 text-sm transition-colors hover:bg-accent/20"
-											>
-												<div className="min-w-0">
-													<p className="font-medium text-foreground truncate">
-														{tx.aiModelName}
-													</p>
-													<p className="text-xs text-muted-foreground">
-														{tx.aiInferenceProviderName}
-													</p>
-												</div>
-												<div className="text-right text-muted-foreground">
-													{tx.totalTokens.toLocaleString()}
-												</div>
-												<div className="text-right text-foreground font-medium">
-													{formatCreditBalance(tx.creditsUsed)}
-												</div>
-												<div className="text-right text-xs text-muted-foreground">
-													<p>{formatDate(tx.createdAt)}</p>
-													<p>{formatTime(tx.createdAt)}</p>
-												</div>
-											</div>
-										))}
+							{/* Organizations */}
+							<div className="rounded-lg border border-border p-5">
+								<div className="flex items-center justify-between mb-4">
+									<div className="flex items-center gap-3">
+										<Building className="h-5 w-5 text-muted-foreground" />
+										<h3 className="text-sm font-semibold text-foreground">
+											Organizations
+										</h3>
 									</div>
+									<a
+										href="https://app.cline.bot/onboarding?step=1"
+										target="_blank"
+										rel="noopener noreferrer"
+										className="flex items-center gap-1.5 rounded-md px-2.5 py-1.5 text-xs font-medium text-muted-foreground hover:bg-accent hover:text-foreground transition-colors"
+									>
+										<Plus className="h-3.5 w-3.5" />
+										Create
+									</a>
 								</div>
-							))}
-					</div>
-				)}
-
-				{/* Billing Tab */}
-				{activeTab === "billing" && (
-					<div>
-						<p className="mb-6 text-sm text-muted-foreground">
-							Payment history and credit purchases.
-						</p>
-						{billingLoading && renderLoading()}
-						{billingError && renderError(billingError, loadBilling)}
-						{!billingLoading &&
-							!billingError &&
-							billingLoaded &&
-							(paymentTransactions.length === 0 ? (
-								<p className="py-8 text-center text-sm text-muted-foreground">
-									No payment transactions yet.
-								</p>
-							) : (
-								<div className="rounded-lg border border-border overflow-hidden">
-									<div className="grid grid-cols-[1fr_auto_auto] gap-4 border-b border-border bg-secondary/50 px-4 py-2.5 text-xs font-medium text-muted-foreground">
-										<span>Date</span>
-										<span className="text-right">Amount</span>
-										<span className="text-right">Credits</span>
-									</div>
-									<div className="divide-y divide-border">
-										{paymentTransactions.map((tx) => (
+								{organizations.length === 0 ? (
+									<p className="text-sm text-muted-foreground">
+										No organizations yet.
+									</p>
+								) : (
+									<div className="flex flex-col gap-2">
+										{organizations.map((org) => (
 											<div
-												key={`${tx.paidAt}-${tx.amountCents}-${tx.credits}`}
-												className="grid grid-cols-[1fr_auto_auto] gap-4 px-4 py-3 text-sm transition-colors hover:bg-accent/20"
+												key={org.organizationId}
+												className="flex items-center gap-3 rounded-lg border border-border px-4 py-3 transition-colors hover:bg-accent/20"
 											>
-												<div className="flex items-center gap-3">
-													<Receipt className="h-4 w-4 text-muted-foreground" />
-													<span className="text-foreground">
-														{formatDate(tx.paidAt)}
+												<div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-secondary text-sm font-bold text-foreground">
+													{org.name.charAt(0)}
+												</div>
+												<div className="min-w-0 flex-1">
+													<p className="text-sm font-medium text-foreground">
+														{org.name}
+													</p>
+													<p className="text-xs text-muted-foreground capitalize">
+														{org.roles.join(", ")}
+													</p>
+												</div>
+												{org.active && (
+													<span className="rounded-full bg-primary/20 px-2 py-0.5 text-xs font-medium text-primary">
+														Active
 													</span>
-												</div>
-												<div className="text-right text-foreground font-medium">
-													${(tx.amountCents / 100).toFixed(2)}
-												</div>
-												<div className="text-right text-primary font-medium">
-													+{formatCreditBalance(tx.credits)}
-												</div>
+												)}
 											</div>
 										))}
 									</div>
+								)}
+							</div>
+						</>
+					)}
+				</div>
+			)}
+
+			{/* Usage Tab */}
+			{activeTab === "usage" && (
+				<div>
+					<p className="mb-6 text-sm text-muted-foreground">
+						{activeOrganization
+							? `Recent API usage and token consumption for ${activeOrganization.name}.`
+							: "Recent API usage and token consumption across all providers."}
+					</p>
+					{usageLoading && renderLoading()}
+					{usageError && renderError(usageError, loadUsage)}
+					{!usageLoading &&
+						!usageError &&
+						usageLoaded &&
+						(usageTransactions.length === 0 ? (
+							<p className="py-8 text-center text-sm text-muted-foreground">
+								No usage transactions yet.
+							</p>
+						) : (
+							<div className="rounded-lg border border-border overflow-hidden">
+								<div className="grid grid-cols-[1fr_auto_auto_auto] gap-4 border-b border-border bg-secondary/50 px-4 py-2.5 text-xs font-medium text-muted-foreground">
+									<span>Model</span>
+									<span className="text-right">Tokens</span>
+									<span className="text-right">Credits</span>
+									<span className="text-right">Time</span>
 								</div>
-							))}
-					</div>
-				)}
-			</div>
-		</ScrollArea>
+								<div className="divide-y divide-border">
+									{usageTransactions.map((tx) => (
+										<div
+											key={tx.id}
+											className="grid grid-cols-[1fr_auto_auto_auto] gap-4 px-4 py-3 text-sm transition-colors hover:bg-accent/20"
+										>
+											<div className="min-w-0">
+												<p className="font-medium text-foreground truncate">
+													{tx.aiModelName}
+												</p>
+												<p className="text-xs text-muted-foreground">
+													{tx.aiInferenceProviderName}
+												</p>
+											</div>
+											<div className="text-right text-muted-foreground">
+												{tx.totalTokens.toLocaleString()}
+											</div>
+											<div className="text-right text-foreground font-medium">
+												{formatCreditBalance(tx.creditsUsed)}
+											</div>
+											<div className="text-right text-xs text-muted-foreground">
+												<p>{formatDate(tx.createdAt)}</p>
+												<p>{formatTime(tx.createdAt)}</p>
+											</div>
+										</div>
+									))}
+								</div>
+							</div>
+						))}
+				</div>
+			)}
+
+			{/* Billing Tab */}
+			{activeTab === "billing" && (
+				<div>
+					<p className="mb-6 text-sm text-muted-foreground">
+						Payment history and credit purchases.
+					</p>
+					{billingLoading && renderLoading()}
+					{billingError && renderError(billingError, loadBilling)}
+					{!billingLoading &&
+						!billingError &&
+						billingLoaded &&
+						(paymentTransactions.length === 0 ? (
+							<p className="py-8 text-center text-sm text-muted-foreground">
+								No payment transactions yet.
+							</p>
+						) : (
+							<div className="rounded-lg border border-border overflow-hidden">
+								<div className="grid grid-cols-[1fr_auto_auto] gap-4 border-b border-border bg-secondary/50 px-4 py-2.5 text-xs font-medium text-muted-foreground">
+									<span>Date</span>
+									<span className="text-right">Amount</span>
+									<span className="text-right">Credits</span>
+								</div>
+								<div className="divide-y divide-border">
+									{paymentTransactions.map((tx) => (
+										<div
+											key={`${tx.paidAt}-${tx.amountCents}-${tx.credits}`}
+											className="grid grid-cols-[1fr_auto_auto] gap-4 px-4 py-3 text-sm transition-colors hover:bg-accent/20"
+										>
+											<div className="flex items-center gap-3">
+												<Receipt className="h-4 w-4 text-muted-foreground" />
+												<span className="text-foreground">
+													{formatDate(tx.paidAt)}
+												</span>
+											</div>
+											<div className="text-right text-foreground font-medium">
+												${(tx.amountCents / 100).toFixed(2)}
+											</div>
+											<div className="text-right text-primary font-medium">
+												+{formatCreditBalance(tx.credits)}
+											</div>
+										</div>
+									))}
+								</div>
+							</div>
+						))}
+				</div>
+			)}
+		</PageFrame>
 	);
 }

apps/cline-hub/src/webview/src/components/views/settings/add-provider.tsx

@@ -13,8 +13,8 @@ import {
 import { useMemo, useState } from "react";
 import { Button } from "@/components/ui/button";
 import { Label } from "@/components/ui/label";
-import { ScrollArea } from "@/components/ui/scroll-area";
 import { cn } from "@/lib/utils";
+import { PageFrame, PageHeader } from "../page-layout";
 
 const CAPABILITY_OPTIONS = [
 	"streaming",
@@ -204,9 +204,11 @@ export function AddProviderContent({
 	};
 
 	return (
-		<ScrollArea className="h-full">
-			<div className="mx-auto max-w-3xl px-8 py-6">
-				<div className="mb-6 flex items-center gap-3">
+		<PageFrame contentClassName="max-w-4xl">
+			<PageHeader
+				description="Add an OpenAI-compatible provider and choose its available models."
+				title="Add Provider"
+				actions={
 					<Button
 						onClick={onBack}
 						variant="secondary"
@@ -214,320 +216,314 @@ export function AddProviderContent({
 						aria-label="Back to providers"
 					>
 						<ArrowLeft className="h-4 w-4" />
+						Providers
 					</Button>
-					<h2 className="text-lg font-semibold text-foreground">
-						Add Provider
-					</h2>
-				</div>
+				}
+			/>
 
-				<div className="flex flex-col gap-6">
-					<div className="rounded-lg border border-border p-5">
-						<h3 className="mb-4 text-sm font-semibold text-foreground">
-							OpenAI-Compatible Provider
-						</h3>
-						<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
-							<div>
-								<Label className="mb-2 block text-xs font-medium text-muted-foreground">
-									Provider ID
-								</Label>
-								<input
-									type="text"
-									value={form.providerId}
-									onChange={(e) =>
-										setForm((prev) => ({ ...prev, providerId: e.target.value }))
-									}
-									placeholder="my-provider"
-									className="w-full rounded-lg border border-border bg-input px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground/50 outline-none focus:ring-1 focus:ring-ring"
-								/>
-								<p className="mt-1.5 text-xs text-muted-foreground">
-									Lowercase ID used in provider registry.
-								</p>
-								{duplicateProviderId ? (
-									<p className="mt-1 text-xs text-destructive">
-										This provider ID already exists.
-									</p>
-								) : null}
-							</div>
-							<div>
-								<Label className="mb-2 block text-xs font-medium text-muted-foreground">
-									Provider Name
-								</Label>
-								<input
-									type="text"
-									value={form.name}
-									onChange={(e) =>
-										setForm((prev) => ({ ...prev, name: e.target.value }))
-									}
-									placeholder="My Provider"
-									className="w-full rounded-lg border border-border bg-input px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground/50 outline-none focus:ring-1 focus:ring-ring"
-								/>
-							</div>
-						</div>
-					</div>
-
-					<div className="rounded-lg border border-border p-5">
-						<Label className="mb-2 block text-xs font-medium text-muted-foreground">
-							Base URL
-						</Label>
-						<input
-							type="url"
-							value={form.baseUrl}
-							onChange={(e) =>
-								setForm((prev) => ({ ...prev, baseUrl: e.target.value }))
-							}
-							placeholder="https://api.example.com/v1"
-							className="w-full rounded-lg border border-border bg-input px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground/50 outline-none focus:ring-1 focus:ring-ring"
-						/>
-					</div>
-
-					<div className="rounded-lg border border-border p-5">
-						<Label className="mb-2 block text-xs font-medium text-muted-foreground">
-							Model Source URL (Optional)
-						</Label>
-						<input
-							type="url"
-							value={form.modelsSourceUrl}
-							onChange={(e) =>
-								setForm((prev) => ({
-									...prev,
-									modelsSourceUrl: e.target.value,
-								}))
-							}
-							placeholder="https://api.example.com/v1/models"
-							className="w-full rounded-lg border border-border bg-input px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground/50 outline-none focus:ring-1 focus:ring-ring"
-						/>
-						<p className="mt-1.5 text-xs text-muted-foreground">
-							Supported JSON: OpenAI `/models` shape with a `data` array, or a
-							direct model array.
-						</p>
-					</div>
-
-					<div className="rounded-lg border border-border p-5">
-						<Label className="mb-2 block text-xs font-medium text-muted-foreground">
-							Models
-						</Label>
-						<div className="flex min-h-11 flex-wrap content-start gap-1.5 rounded-lg border border-border bg-input px-3 py-2 focus-within:ring-1 focus-within:ring-ring">
-							{form.models.map((model) => (
-								<span
-									key={model}
-									className="inline-flex items-center gap-1 rounded-md bg-primary/10 px-2 py-1 text-xs font-medium text-primary"
-								>
-									<span className="font-mono">{model}</span>
-									<Button
-										onClick={() => removeModel(model)}
-										className="text-primary/60 hover:text-primary transition-colors"
-										aria-label={`Remove ${model}`}
-									>
-										<X className="h-3 w-3" />
-									</Button>
-								</span>
-							))}
+			<div className="flex flex-col gap-6">
+				<div className="rounded-lg border border-border p-5">
+					<h3 className="mb-4 text-sm font-semibold text-foreground">
+						OpenAI-Compatible Provider
+					</h3>
+					<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+						<div>
+							<Label className="mb-2 block text-xs font-medium text-muted-foreground">
+								Provider ID
+							</Label>
 							<input
 								type="text"
-								value={modelInput}
-								onChange={(e) => setModelInput(e.target.value)}
-								onKeyDown={handleAddModel}
-								placeholder={
-									form.models.length === 0
-										? "Type model ID and press Enter"
-										: ""
+								value={form.providerId}
+								onChange={(e) =>
+									setForm((prev) => ({ ...prev, providerId: e.target.value }))
 								}
-								className="min-w-35 flex-1 bg-transparent text-sm text-foreground placeholder:text-muted-foreground/50 outline-none"
+								placeholder="my-provider"
+								className="w-full rounded-lg border border-border bg-input px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground/50 outline-none focus:ring-1 focus:ring-ring"
 							/>
+							<p className="mt-1.5 text-xs text-muted-foreground">
+								Lowercase ID used in provider registry.
+							</p>
+							{duplicateProviderId ? (
+								<p className="mt-1 text-xs text-destructive">
+									This provider ID already exists.
+								</p>
+							) : null}
 						</div>
-						<p className="mt-1.5 text-xs text-muted-foreground">
-							Add at least one model or set a Model Source URL.
-						</p>
-					</div>
-
-					{form.models.length > 1 ? (
-						<div className="rounded-lg border border-border p-5">
+						<div>
 							<Label className="mb-2 block text-xs font-medium text-muted-foreground">
-								Default Model
+								Provider Name
 							</Label>
-							<select
-								value={form.defaultModel}
-								onChange={(e) =>
-									setForm((prev) => ({ ...prev, defaultModel: e.target.value }))
-								}
-								className="w-full rounded-lg border border-border bg-input px-3 py-2 text-sm text-foreground outline-none focus:ring-1 focus:ring-ring"
-							>
-								{form.models.map((model) => (
-									<option key={model} value={model}>
-										{model}
-									</option>
-								))}
-							</select>
-						</div>
-					) : null}
-
-					<div className="rounded-lg border border-border p-5">
-						<Label className="mb-2 block text-xs font-medium text-muted-foreground">
-							API Key (Optional)
-						</Label>
-						<div className="relative">
 							<input
-								type={showApiKey ? "text" : "password"}
-								value={form.apiKey}
+								type="text"
+								value={form.name}
 								onChange={(e) =>
-									setForm((prev) => ({ ...prev, apiKey: e.target.value }))
+									setForm((prev) => ({ ...prev, name: e.target.value }))
 								}
-								placeholder="sk-..."
-								className="w-full rounded-lg border border-border bg-input px-3 py-2 pr-20 font-mono text-sm text-foreground placeholder:text-muted-foreground/50 outline-none focus:ring-1 focus:ring-ring"
+								placeholder="My Provider"
+								className="w-full rounded-lg border border-border bg-input px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground/50 outline-none focus:ring-1 focus:ring-ring"
 							/>
-							<div className="absolute right-2 top-1/2 flex -translate-y-1/2 items-center gap-1">
-								<Button
-									onClick={() => setShowApiKey(!showApiKey)}
-									variant="ghost"
-									className="rounded-md p-1 transition-colors"
-									aria-label={showApiKey ? "Hide API key" : "Show API key"}
-								>
-									{showApiKey ? (
-										<EyeOff className="h-4 w-4" />
-									) : (
-										<Eye className="h-4 w-4" />
-									)}
-								</Button>
-								<Button
-									onClick={() => navigator.clipboard.writeText(form.apiKey)}
-									variant="ghost"
-									className="rounded-md p-1 transition-colors"
-									aria-label="Copy API key"
-								>
-									<Copy className="h-4 w-4" />
-								</Button>
-							</div>
 						</div>
 					</div>
-
-					<div className="rounded-lg border border-border p-5">
-						<Label className="mb-3 block text-xs font-medium text-muted-foreground">
-							Capabilities
-						</Label>
-						<div className="flex flex-wrap gap-2">
-							{CAPABILITY_OPTIONS.map((cap) => (
-								<Button
-									key={cap}
-									onClick={() => toggleCapability(cap)}
-									className={cn(
-										"rounded-lg border px-3 py-1.5 text-xs font-medium transition-all",
-										form.capabilities.includes(cap)
-											? "border-primary/40 bg-primary/10 text-primary"
-											: "border-border bg-card text-muted-foreground hover:border-muted-foreground/50 hover:text-foreground",
-									)}
-								>
-									{cap.replace(/-/g, " ")}
-								</Button>
-							))}
-						</div>
-					</div>
-
-					<div className="rounded-lg border border-border overflow-hidden">
-						<Button
-							onClick={() => setShowAdvanced(!showAdvanced)}
-							className="flex w-full items-center justify-between px-5 py-4 text-sm font-medium transition-colors text-foreground/40"
-							variant="ghost"
-						>
-							Advanced Settings
-							<ChevronDown
-								className={cn(
-									"h-4 w-4 text-muted-foreground transition-transform",
-									showAdvanced && "rotate-180",
-								)}
-							/>
-						</Button>
-
-						{showAdvanced ? (
-							<div className="border-t border-border px-5 py-5 flex flex-col gap-5">
-								<div>
-									<Label className="mb-2 block text-xs font-medium text-muted-foreground">
-										Timeout (ms)
-									</Label>
-									<input
-										type="number"
-										value={form.timeoutMs}
-										onChange={(e) =>
-											setForm((prev) => ({
-												...prev,
-												timeoutMs: e.target.value,
-											}))
-										}
-										placeholder="30000"
-										className="w-full rounded-lg border border-border bg-input px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground/50 outline-none focus:ring-1 focus:ring-ring"
-									/>
-								</div>
-
-								<div>
-									<Label className="mb-2 block text-xs font-medium text-muted-foreground">
-										Custom Headers
-									</Label>
-									<div className="flex flex-col gap-2">
-										{Object.entries(form.headers).map(([key, value], idx) => (
-											<div key={key} className="flex items-center gap-2">
-												<input
-													type="text"
-													value={key}
-													onChange={(e) =>
-														updateHeaderKey(key, e.target.value, idx)
-													}
-													placeholder="Header name"
-													className="flex-1 rounded-lg border border-border bg-input px-3 py-2 font-mono text-xs text-foreground placeholder:text-muted-foreground/50 outline-none focus:ring-1 focus:ring-ring"
-												/>
-												<input
-													type="text"
-													value={value}
-													onChange={(e) =>
-														updateHeaderValue(key, e.target.value)
-													}
-													placeholder="Value"
-													className="flex-1 rounded-lg border border-border bg-input px-3 py-2 font-mono text-xs text-foreground placeholder:text-muted-foreground/50 outline-none focus:ring-1 focus:ring-ring"
-												/>
-												<Button
-													onClick={() => removeHeader(key)}
-													className="rounded-md p-2 text-muted-foreground hover:text-destructive transition-colors"
-													aria-label="Remove header"
-												>
-													<Trash2 className="h-4 w-4" />
-												</Button>
-											</div>
-										))}
-										<Button
-											onClick={addHeader}
-											className="flex items-center gap-1.5 rounded-md px-2 py-1.5 text-xs font-medium text-muted-foreground hover:text-foreground transition-colors w-fit"
-										>
-											<Plus className="h-3 w-3" />
-											Add Header
-										</Button>
-									</div>
-								</div>
-							</div>
-						) : null}
-					</div>
-
-					{error ? <p className="text-sm text-destructive">{error}</p> : null}
-
-					<div className="flex items-center justify-end gap-3 pt-2">
-						<Button
-							onClick={onBack}
-							className="rounded-lg border border-border px-4 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-foreground transition-colors"
-						>
-							Cancel
-						</Button>
-						<Button
-							onClick={() => void handleSave()}
-							disabled={!canSave || saving}
-							className={cn(
-								"rounded-lg px-4 py-2 text-sm font-medium transition-colors",
-								canSave && !saving
-									? "bg-primary text-primary-foreground hover:bg-primary/90"
-									: "bg-muted text-muted-foreground cursor-not-allowed",
-							)}
-						>
-							{saving ? "Saving..." : "Add Provider"}
-						</Button>
-					</div>
+				</div>
+
+				<div className="rounded-lg border border-border p-5">
+					<Label className="mb-2 block text-xs font-medium text-muted-foreground">
+						Base URL
+					</Label>
+					<input
+						type="url"
+						value={form.baseUrl}
+						onChange={(e) =>
+							setForm((prev) => ({ ...prev, baseUrl: e.target.value }))
+						}
+						placeholder="https://api.example.com/v1"
+						className="w-full rounded-lg border border-border bg-input px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground/50 outline-none focus:ring-1 focus:ring-ring"
+					/>
+				</div>
+
+				<div className="rounded-lg border border-border p-5">
+					<Label className="mb-2 block text-xs font-medium text-muted-foreground">
+						Model Source URL (Optional)
+					</Label>
+					<input
+						type="url"
+						value={form.modelsSourceUrl}
+						onChange={(e) =>
+							setForm((prev) => ({
+								...prev,
+								modelsSourceUrl: e.target.value,
+							}))
+						}
+						placeholder="https://api.example.com/v1/models"
+						className="w-full rounded-lg border border-border bg-input px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground/50 outline-none focus:ring-1 focus:ring-ring"
+					/>
+					<p className="mt-1.5 text-xs text-muted-foreground">
+						Supported JSON: OpenAI `/models` shape with a `data` array, or a
+						direct model array.
+					</p>
+				</div>
+
+				<div className="rounded-lg border border-border p-5">
+					<Label className="mb-2 block text-xs font-medium text-muted-foreground">
+						Models
+					</Label>
+					<div className="flex min-h-11 flex-wrap content-start gap-1.5 rounded-lg border border-border bg-input px-3 py-2 focus-within:ring-1 focus-within:ring-ring">
+						{form.models.map((model) => (
+							<span
+								key={model}
+								className="inline-flex items-center gap-1 rounded-md bg-primary/10 px-2 py-1 text-xs font-medium text-primary"
+							>
+								<span className="font-mono">{model}</span>
+								<Button
+									onClick={() => removeModel(model)}
+									className="text-primary/60 hover:text-primary transition-colors"
+									aria-label={`Remove ${model}`}
+								>
+									<X className="h-3 w-3" />
+								</Button>
+							</span>
+						))}
+						<input
+							type="text"
+							value={modelInput}
+							onChange={(e) => setModelInput(e.target.value)}
+							onKeyDown={handleAddModel}
+							placeholder={
+								form.models.length === 0 ? "Type model ID and press Enter" : ""
+							}
+							className="min-w-35 flex-1 bg-transparent text-sm text-foreground placeholder:text-muted-foreground/50 outline-none"
+						/>
+					</div>
+					<p className="mt-1.5 text-xs text-muted-foreground">
+						Add at least one model or set a Model Source URL.
+					</p>
+				</div>
+
+				{form.models.length > 1 ? (
+					<div className="rounded-lg border border-border p-5">
+						<Label className="mb-2 block text-xs font-medium text-muted-foreground">
+							Default Model
+						</Label>
+						<select
+							value={form.defaultModel}
+							onChange={(e) =>
+								setForm((prev) => ({ ...prev, defaultModel: e.target.value }))
+							}
+							className="w-full rounded-lg border border-border bg-input px-3 py-2 text-sm text-foreground outline-none focus:ring-1 focus:ring-ring"
+						>
+							{form.models.map((model) => (
+								<option key={model} value={model}>
+									{model}
+								</option>
+							))}
+						</select>
+					</div>
+				) : null}
+
+				<div className="rounded-lg border border-border p-5">
+					<Label className="mb-2 block text-xs font-medium text-muted-foreground">
+						API Key (Optional)
+					</Label>
+					<div className="relative">
+						<input
+							type={showApiKey ? "text" : "password"}
+							value={form.apiKey}
+							onChange={(e) =>
+								setForm((prev) => ({ ...prev, apiKey: e.target.value }))
+							}
+							placeholder="sk-..."
+							className="w-full rounded-lg border border-border bg-input px-3 py-2 pr-20 font-mono text-sm text-foreground placeholder:text-muted-foreground/50 outline-none focus:ring-1 focus:ring-ring"
+						/>
+						<div className="absolute right-2 top-1/2 flex -translate-y-1/2 items-center gap-1">
+							<Button
+								onClick={() => setShowApiKey(!showApiKey)}
+								variant="ghost"
+								className="rounded-md p-1 transition-colors"
+								aria-label={showApiKey ? "Hide API key" : "Show API key"}
+							>
+								{showApiKey ? (
+									<EyeOff className="h-4 w-4" />
+								) : (
+									<Eye className="h-4 w-4" />
+								)}
+							</Button>
+							<Button
+								onClick={() => navigator.clipboard.writeText(form.apiKey)}
+								variant="ghost"
+								className="rounded-md p-1 transition-colors"
+								aria-label="Copy API key"
+							>
+								<Copy className="h-4 w-4" />
+							</Button>
+						</div>
+					</div>
+				</div>
+
+				<div className="rounded-lg border border-border p-5">
+					<Label className="mb-3 block text-xs font-medium text-muted-foreground">
+						Capabilities
+					</Label>
+					<div className="flex flex-wrap gap-2">
+						{CAPABILITY_OPTIONS.map((cap) => (
+							<Button
+								key={cap}
+								onClick={() => toggleCapability(cap)}
+								className={cn(
+									"rounded-lg border px-3 py-1.5 text-xs font-medium transition-all",
+									form.capabilities.includes(cap)
+										? "border-primary/40 bg-primary/10 text-primary"
+										: "border-border bg-card text-muted-foreground hover:border-muted-foreground/50 hover:text-foreground",
+								)}
+							>
+								{cap.replace(/-/g, " ")}
+							</Button>
+						))}
+					</div>
+				</div>
+
+				<div className="rounded-lg border border-border overflow-hidden">
+					<Button
+						onClick={() => setShowAdvanced(!showAdvanced)}
+						className="flex w-full items-center justify-between px-5 py-4 text-sm font-medium transition-colors text-foreground/40"
+						variant="ghost"
+					>
+						Advanced Settings
+						<ChevronDown
+							className={cn(
+								"h-4 w-4 text-muted-foreground transition-transform",
+								showAdvanced && "rotate-180",
+							)}
+						/>
+					</Button>
+
+					{showAdvanced ? (
+						<div className="border-t border-border px-5 py-5 flex flex-col gap-5">
+							<div>
+								<Label className="mb-2 block text-xs font-medium text-muted-foreground">
+									Timeout (ms)
+								</Label>
+								<input
+									type="number"
+									value={form.timeoutMs}
+									onChange={(e) =>
+										setForm((prev) => ({
+											...prev,
+											timeoutMs: e.target.value,
+										}))
+									}
+									placeholder="30000"
+									className="w-full rounded-lg border border-border bg-input px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground/50 outline-none focus:ring-1 focus:ring-ring"
+								/>
+							</div>
+
+							<div>
+								<Label className="mb-2 block text-xs font-medium text-muted-foreground">
+									Custom Headers
+								</Label>
+								<div className="flex flex-col gap-2">
+									{Object.entries(form.headers).map(([key, value], idx) => (
+										<div key={key} className="flex items-center gap-2">
+											<input
+												type="text"
+												value={key}
+												onChange={(e) =>
+													updateHeaderKey(key, e.target.value, idx)
+												}
+												placeholder="Header name"
+												className="flex-1 rounded-lg border border-border bg-input px-3 py-2 font-mono text-xs text-foreground placeholder:text-muted-foreground/50 outline-none focus:ring-1 focus:ring-ring"
+											/>
+											<input
+												type="text"
+												value={value}
+												onChange={(e) => updateHeaderValue(key, e.target.value)}
+												placeholder="Value"
+												className="flex-1 rounded-lg border border-border bg-input px-3 py-2 font-mono text-xs text-foreground placeholder:text-muted-foreground/50 outline-none focus:ring-1 focus:ring-ring"
+											/>
+											<Button
+												onClick={() => removeHeader(key)}
+												className="rounded-md p-2 text-muted-foreground hover:text-destructive transition-colors"
+												aria-label="Remove header"
+											>
+												<Trash2 className="h-4 w-4" />
+											</Button>
+										</div>
+									))}
+									<Button
+										onClick={addHeader}
+										className="flex items-center gap-1.5 rounded-md px-2 py-1.5 text-xs font-medium text-muted-foreground hover:text-foreground transition-colors w-fit"
+									>
+										<Plus className="h-3 w-3" />
+										Add Header
+									</Button>
+								</div>
+							</div>
+						</div>
+					) : null}
+				</div>
+
+				{error ? <p className="text-sm text-destructive">{error}</p> : null}
+
+				<div className="flex items-center justify-end gap-3 pt-2">
+					<Button
+						onClick={onBack}
+						className="rounded-lg border border-border px-4 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-foreground transition-colors"
+					>
+						Cancel
+					</Button>
+					<Button
+						onClick={() => void handleSave()}
+						disabled={!canSave || saving}
+						className={cn(
+							"rounded-lg px-4 py-2 text-sm font-medium transition-colors",
+							canSave && !saving
+								? "bg-primary text-primary-foreground hover:bg-primary/90"
+								: "bg-muted text-muted-foreground cursor-not-allowed",
+						)}
+					>
+						{saving ? "Saving..." : "Add Provider"}
+					</Button>
 				</div>
 			</div>
-		</ScrollArea>
+		</PageFrame>
 	);
 }

apps/cline-hub/src/webview/src/components/views/settings/channels-view.tsx

@@ -23,7 +23,6 @@ import {
 } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { ScrollArea } from "@/components/ui/scroll-area";
 import {
 	Select,
 	SelectContent,
@@ -35,6 +34,12 @@ import { Switch } from "@/components/ui/switch";
 import { Textarea } from "@/components/ui/textarea";
 import { desktopClient } from "@/lib/desktop-client";
 import { cn } from "@/lib/utils";
+import {
+	CommandBadge,
+	PageEmptyState,
+	PageFrame,
+	PageHeader,
+} from "../page-layout";
 
 type ConnectorField = {
 	flag: string;
@@ -341,16 +346,13 @@ export function ChannelsContent() {
 	};
 
 	return (
-		<ScrollArea className="h-full">
-			<div className="mx-auto flex max-w-5xl flex-col gap-6 p-6">
-				<div className="flex items-center justify-between gap-3">
-					<div>
-						<h2 className="text-lg font-semibold">Channels</h2>
-						<p className="text-sm text-muted-foreground">
-							{activeConnectors.length} connected
-						</p>
-					</div>
-					<div className="flex items-center gap-2">
+		<PageFrame>
+			<PageHeader
+				description={`${activeConnectors.length} connected. Start and manage connector channels for Cline Hub.`}
+				title="Channels"
+				meta={<CommandBadge>cline connect</CommandBadge>}
+				actions={
+					<>
 						<Button
 							disabled={isLoading}
 							onClick={() => void refreshChannels()}
@@ -371,85 +373,81 @@ export function ChannelsContent() {
 							<Plus className="size-4" />
 							Add Channel
 						</Button>
-					</div>
+					</>
+				}
+			/>
+
+			{errorMessage ? (
+				<div className="rounded-md border border-destructive/40 bg-destructive/10 px-3 py-2 text-sm text-destructive">
+					{errorMessage}
 				</div>
+			) : null}
 
-				{errorMessage ? (
-					<div className="rounded-md border border-destructive/40 bg-destructive/10 px-3 py-2 text-sm text-destructive">
-						{errorMessage}
-					</div>
-				) : null}
-
+			{isLoading ? (
+				<PageEmptyState>Loading channels...</PageEmptyState>
+			) : activeConnectors.length === 0 ? (
+				<PageEmptyState>No channels connected.</PageEmptyState>
+			) : (
 				<section className="overflow-hidden rounded-lg border bg-card">
 					<div className="grid gap-2 p-2.5">
-						{isLoading ? (
-							<p className="px-1 py-4 text-[13px] text-muted-foreground">
-								Loading channels...
-							</p>
-						) : activeConnectors.length === 0 ? (
-							<p className="px-1 py-4 text-[13px] text-muted-foreground">
-								No channels connected.
-							</p>
-						) : (
-							activeConnectors.map((connector) => (
-								<div
-									className="grid gap-3 border bg-[color-mix(in_oklch,var(--background)_70%,var(--card))] p-3 md:grid-cols-[minmax(0,1fr)_auto] md:items-center"
-									key={connector.id}
-								>
-									<div className="min-w-0">
-										<div className="flex items-center gap-2">
-											<Circle className="size-2 fill-emerald-300 text-emerald-300" />
-											<p className="truncate text-[13px] font-semibold leading-tight">
-												{connectorName(connector, channels)}
-											</p>
-											<span className="rounded-md border bg-background px-1.5 py-0.5 text-[11px] text-muted-foreground">
-												{connectorIdentity(connector)}
-											</span>
-										</div>
-										<div className="mt-2 flex flex-wrap gap-1.5 text-[11px] text-muted-foreground">
-											<span className="rounded-md border bg-background px-1.5 py-0.5">
-												pid={connector.pid}
-											</span>
+						{activeConnectors.map((connector) => (
+							<div
+								className="grid gap-3 border bg-[color-mix(in_oklch,var(--background)_70%,var(--card))] p-3 md:grid-cols-[minmax(0,1fr)_auto] md:items-center"
+								key={connector.id}
+							>
+								<div className="min-w-0">
+									<div className="flex items-center gap-2">
+										<Circle className="size-2 fill-emerald-300 text-emerald-300" />
+										<p className="truncate text-[13px] font-semibold leading-tight">
+											{connectorName(connector, channels)}
+										</p>
+										<span className="rounded-md border bg-background px-1.5 py-0.5 text-[11px] text-muted-foreground">
+											{connectorIdentity(connector)}
+										</span>
+									</div>
+									<div className="mt-2 flex flex-wrap gap-1.5 text-[11px] text-muted-foreground">
+										<span className="rounded-md border bg-background px-1.5 py-0.5">
+											pid={connector.pid}
+										</span>
+										<span
+											className="max-w-full break-all rounded-md border bg-background px-1.5 py-0.5"
+											title={connector.hubUrl}
+										>
+											{connector.hubUrl}
+										</span>
+										{connector.baseUrl ? (
 											<span
 												className="max-w-full break-all rounded-md border bg-background px-1.5 py-0.5"
-												title={connector.hubUrl}
+												title={connector.baseUrl}
 											>
-												{connector.hubUrl}
+												{connector.baseUrl}
 											</span>
-											{connector.baseUrl ? (
-												<span
-													className="max-w-full break-all rounded-md border bg-background px-1.5 py-0.5"
-													title={connector.baseUrl}
-												>
-													{connector.baseUrl}
-												</span>
-											) : null}
+										) : null}
+										<span className="rounded-md border bg-background px-1.5 py-0.5">
+											{formatDateTime(connector.startedAt)}
+										</span>
+										{connector.connectionMode ? (
 											<span className="rounded-md border bg-background px-1.5 py-0.5">
-												{formatDateTime(connector.startedAt)}
+												{connector.connectionMode}
 											</span>
-											{connector.connectionMode ? (
-												<span className="rounded-md border bg-background px-1.5 py-0.5">
-													{connector.connectionMode}
-												</span>
-											) : null}
-										</div>
+										) : null}
 									</div>
-									<Button
-										disabled={busyChannel === connector.type}
-										onClick={() => setRemoveTarget(connector)}
-										size="sm"
-										type="button"
-										variant="outline"
-									>
-										<Trash2 className="size-4" />
-										Remove...
-									</Button>
 								</div>
-							))
-						)}
+								<Button
+									disabled={busyChannel === connector.type}
+									onClick={() => setRemoveTarget(connector)}
+									size="sm"
+									type="button"
+									variant="outline"
+								>
+									<Trash2 className="size-4" />
+									Remove...
+								</Button>
+							</div>
+						))}
 					</div>
 				</section>
-			</div>
+			)}
 
 			<Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
 				<DialogContent className="max-h-[86vh] overflow-y-auto sm:max-w-xl">
@@ -639,6 +637,6 @@ export function ChannelsContent() {
 					</AlertDialogFooter>
 				</AlertDialogContent>
 			</AlertDialog>
-		</ScrollArea>
+		</PageFrame>
 	);
 }

apps/cline-hub/src/webview/src/components/views/settings/mcp-view.tsx

@@ -23,7 +23,6 @@ import {
 } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { ScrollArea } from "@/components/ui/scroll-area";
 import {
 	Select,
 	SelectContent,
@@ -35,6 +34,7 @@ import { Switch } from "@/components/ui/switch";
 import { Textarea } from "@/components/ui/textarea";
 import { desktopClient } from "@/lib/desktop-client";
 import { cn } from "@/lib/utils";
+import { CommandBadge, PageFrame, PageHeader } from "../page-layout";
 
 type McpTransportType = "stdio" | "sse" | "streamableHttp";
 
@@ -405,18 +405,24 @@ export function McpServersContent() {
 	};
 
 	return (
-		<ScrollArea className="h-full">
-			<div className="mx-auto max-w-3xl px-8 py-6">
-				<div className="mb-6 flex items-center justify-between gap-3">
-					<div className="flex min-w-0 items-center gap-3">
-						<h2 className="truncate text-lg font-semibold text-foreground">
-							MCP Servers
-						</h2>
-						<span className="rounded-md border border-border px-2 py-0.5 text-xs text-muted-foreground">
+		<PageFrame>
+			<PageHeader
+				description={
+					hasSettingsFile
+						? "Editing this list updates cline_mcp_settings.json."
+						: "No MCP settings file found yet. Add a server to create it."
+				}
+				title="MCP Servers"
+				meta={
+					<>
+						<CommandBadge>cline config mcp</CommandBadge>
+						<span className="rounded-md border border-border bg-background px-2 py-0.5 text-xs text-muted-foreground">
 							From settings file
 						</span>
-					</div>
-					<div className="flex items-center gap-2">
+					</>
+				}
+				actions={
+					<>
 						<Button
 							variant="outline"
 							size="sm"
@@ -431,145 +437,133 @@ export function McpServersContent() {
 							<Plus className="h-4 w-4" />
 							Add MCP Server
 						</Button>
-					</div>
+					</>
+				}
+			/>
+
+			<div className="mb-1 flex flex-wrap items-center gap-2 text-sm text-muted-foreground">
+				<span>MCP settings path:</span>
+				<Button
+					variant="link"
+					className="h-auto p-0 font-mono text-xs"
+					onClick={() => void openSettingsFile()}
+					disabled={isOpeningSettingsFile}
+				>
+					{settingsPath || "Open settings file"}
+				</Button>
+			</div>
+			{errorMessage && (
+				<div className="mb-4 rounded-md border border-destructive/40 bg-destructive/10 px-3 py-2 text-sm text-destructive">
+					{errorMessage}
 				</div>
+			)}
 
-				<div className="mb-1 flex flex-wrap items-center gap-2 text-sm text-muted-foreground">
-					<span>MCP settings path:</span>
-					<Button
-						variant="link"
-						className="h-auto p-0 font-mono text-xs"
-						onClick={() => void openSettingsFile()}
-						disabled={isOpeningSettingsFile}
-					>
-						{settingsPath || "Open settings file"}
-					</Button>
+			{isLoading ? (
+				<div className="rounded-lg border border-border px-5 py-4 text-sm text-muted-foreground">
+					Loading MCP servers...
 				</div>
-				<p className="mb-6 text-xs text-muted-foreground">
-					{hasSettingsFile
-						? "Editing this list updates cline_mcp_settings.json."
-						: "No MCP settings file found yet. Add a server to create it."}
-				</p>
-
-				{errorMessage && (
-					<div className="mb-4 rounded-md border border-destructive/40 bg-destructive/10 px-3 py-2 text-sm text-destructive">
-						{errorMessage}
-					</div>
-				)}
-
-				{isLoading ? (
-					<div className="rounded-lg border border-border px-5 py-4 text-sm text-muted-foreground">
-						Loading MCP servers...
-					</div>
-				) : sortedServers.length === 0 ? (
-					<div className="rounded-lg border border-border px-5 py-4 text-sm text-muted-foreground">
-						No MCP servers configured.
-					</div>
-				) : (
-					<div className="flex flex-col gap-3">
-						{sortedServers.map((server) => {
-							const isBusy = busyServerName === server.name;
-							return (
-								<div
-									key={server.name}
-									className="rounded-lg border border-border px-5 py-4 transition-colors hover:bg-accent/20"
-								>
-									<div className="flex items-center gap-3">
-										<Circle
-											className={cn(
-												"h-2.5 w-2.5 shrink-0",
-												server.disabled
-													? "fill-muted-foreground/40 text-muted-foreground/40"
-													: "fill-primary text-primary",
-											)}
+			) : sortedServers.length === 0 ? (
+				<div className="rounded-lg border border-border px-5 py-4 text-sm text-muted-foreground">
+					No MCP servers configured.
+				</div>
+			) : (
+				<div className="flex flex-col gap-3">
+					{sortedServers.map((server) => {
+						const isBusy = busyServerName === server.name;
+						return (
+							<div
+								key={server.name}
+								className="rounded-lg border border-border px-5 py-4 transition-colors hover:bg-accent/20"
+							>
+								<div className="flex items-center gap-3">
+									<Circle
+										className={cn(
+											"h-2.5 w-2.5 shrink-0",
+											server.disabled
+												? "fill-muted-foreground/40 text-muted-foreground/40"
+												: "fill-primary text-primary",
+										)}
+									/>
+									<h3 className="text-sm font-semibold text-foreground">
+										{server.name}
+									</h3>
+									<span className="rounded-md border border-border px-2 py-0.5 text-xs text-muted-foreground">
+										{server.transportType}
+									</span>
+									<div className="flex-1" />
+									<div className="flex items-center gap-1">
+										<Button
+											variant="ghost"
+											size="icon-sm"
+											aria-label={`Edit ${server.name}`}
+											onClick={() => openEditDialog(server)}
+											disabled={isBusy}
+										>
+											<Pencil className="h-3.5 w-3.5" />
+										</Button>
+										<Button
+											variant="ghost"
+											size="icon-sm"
+											aria-label={`Delete ${server.name}`}
+											onClick={() => setDeleteTarget(server)}
+											disabled={isBusy}
+										>
+											<Trash2 className="h-3.5 w-3.5" />
+										</Button>
+										<Switch
+											checked={!server.disabled}
+											onCheckedChange={(enabled) =>
+												toggleServer(server, !enabled)
+											}
+											disabled={isBusy}
+											aria-label={`Enable ${server.name}`}
 										/>
-										<h3 className="text-sm font-semibold text-foreground">
-											{server.name}
-										</h3>
-										<span className="rounded-md border border-border px-2 py-0.5 text-xs text-muted-foreground">
-											{server.transportType}
-										</span>
-										<div className="flex-1" />
-										<div className="flex items-center gap-1">
-											<Button
-												variant="ghost"
-												size="icon-sm"
-												aria-label={`Edit ${server.name}`}
-												onClick={() => openEditDialog(server)}
-												disabled={isBusy}
-											>
-												<Pencil className="h-3.5 w-3.5" />
-											</Button>
-											<Button
-												variant="ghost"
-												size="icon-sm"
-												aria-label={`Delete ${server.name}`}
-												onClick={() => setDeleteTarget(server)}
-												disabled={isBusy}
-											>
-												<Trash2 className="h-3.5 w-3.5" />
-											</Button>
-											<Switch
-												checked={!server.disabled}
-												onCheckedChange={(enabled) =>
-													toggleServer(server, !enabled)
-												}
-												disabled={isBusy}
-												aria-label={`Enable ${server.name}`}
-											/>
-										</div>
-									</div>
-
-									<div className="mt-2.5 ml-5.5 flex flex-col gap-1 text-xs text-muted-foreground">
-										{server.command && (
-											<p>
-												<span className="text-muted-foreground/70">
-													Command:
-												</span>{" "}
-												{server.command}
-											</p>
-										)}
-										{server.args && server.args.length > 0 && (
-											<p>
-												<span className="text-muted-foreground/70">Args:</span>{" "}
-												{server.args.join(", ")}
-											</p>
-										)}
-										{server.cwd && (
-											<p>
-												<span className="text-muted-foreground/70">CWD:</span>{" "}
-												{server.cwd}
-											</p>
-										)}
-										{server.url && (
-											<p>
-												<span className="text-muted-foreground/70">URL:</span>{" "}
-												{server.url}
-											</p>
-										)}
-										{server.env && Object.keys(server.env).length > 0 && (
-											<p>
-												<span className="text-muted-foreground/70">Env:</span>{" "}
-												{stringifyRedactedKeyValuePairs(server.env)}
-											</p>
-										)}
-										{server.headers &&
-											Object.keys(server.headers).length > 0 && (
-												<p>
-													<span className="text-muted-foreground/70">
-														Headers:
-													</span>{" "}
-													{stringifyKeyValuePairs(server.headers)}
-												</p>
-											)}
 									</div>
 								</div>
-							);
-						})}
-					</div>
-				)}
-			</div>
 
+								<div className="mt-2.5 ml-5.5 flex flex-col gap-1 text-xs text-muted-foreground">
+									{server.command && (
+										<p>
+											<span className="text-muted-foreground/70">Command:</span>{" "}
+											{server.command}
+										</p>
+									)}
+									{server.args && server.args.length > 0 && (
+										<p>
+											<span className="text-muted-foreground/70">Args:</span>{" "}
+											{server.args.join(", ")}
+										</p>
+									)}
+									{server.cwd && (
+										<p>
+											<span className="text-muted-foreground/70">CWD:</span>{" "}
+											{server.cwd}
+										</p>
+									)}
+									{server.url && (
+										<p>
+											<span className="text-muted-foreground/70">URL:</span>{" "}
+											{server.url}
+										</p>
+									)}
+									{server.env && Object.keys(server.env).length > 0 && (
+										<p>
+											<span className="text-muted-foreground/70">Env:</span>{" "}
+											{stringifyRedactedKeyValuePairs(server.env)}
+										</p>
+									)}
+									{server.headers && Object.keys(server.headers).length > 0 && (
+										<p>
+											<span className="text-muted-foreground/70">Headers:</span>{" "}
+											{stringifyKeyValuePairs(server.headers)}
+										</p>
+									)}
+								</div>
+							</div>
+						);
+					})}
+				</div>
+			)}
 			<Dialog
 				open={editorOpen}
 				onOpenChange={(open) => {
@@ -854,6 +848,6 @@ export function McpServersContent() {
 					</AlertDialogFooter>
 				</AlertDialogContent>
 			</AlertDialog>
-		</ScrollArea>
+		</PageFrame>
 	);
 }

apps/cline-hub/src/webview/src/components/views/settings/provider-list-view.tsx

@@ -2,6 +2,7 @@
 
 import {
 	ArrowLeft,
+	ChevronRight,
 	Copy,
 	Eye,
 	EyeOff,
@@ -12,8 +13,8 @@ import {
 	PlusCircle,
 	RefreshCw,
 	Search,
-	Settings2,
 	Star,
+	X,
 } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 import { Button } from "@/components/ui/button";
@@ -89,58 +90,142 @@ export function ProviderListContent({
 	onToggle,
 	onConfigure,
 	onAddProvider,
+	selectedProviderId,
+	variant = "page",
 }: {
 	providers: Provider[];
 	onToggle: (id: string) => void;
 	onConfigure: (id: string) => void;
 	onAddProvider: () => void;
+	selectedProviderId?: string | null;
+	variant?: "page" | "panel";
 }) {
+	const [providerSearchOpen, setProviderSearchOpen] = useState(false);
+	const [providerSearch, setProviderSearch] = useState("");
+	const enabledProviderCount = providers.filter(
+		(provider) => provider.enabled,
+	).length;
+	const providerSearchQuery = providerSearch.trim().toLowerCase();
+	const filteredProviders = providerSearchQuery
+		? providers.filter((provider) =>
+				provider.name.toLowerCase().includes(providerSearchQuery),
+			)
+		: providers;
+	const isPanel = variant === "panel";
+
 	return (
 		<ScrollArea className="h-full">
-			<div className="mx-auto max-w-3xl px-8 py-6">
-				<div className="mb-6 flex items-center justify-between">
-					<h2 className="text-lg font-semibold text-foreground">
-						Model Providers
-					</h2>
-					<Button
-						className="flex items-center gap-2 rounded-lg border border-border bg-accent px-3.5 py-2 text-sm font-medium text-foreground hover:bg-accent/80 transition-colors"
-						onClick={onAddProvider}
-						variant="ghost"
-					>
-						<PlusCircle className="h-4 w-4" />
-						Add Provider
-					</Button>
+			<div
+				className={cn(
+					"py-10 max-[720px]:px-4 max-[720px]:py-5",
+					isPanel ? "px-8" : "px-18 max-[1200px]:px-8",
+				)}
+			>
+				<div
+					className={cn(
+						"mb-8 flex items-start justify-between gap-6 max-[860px]:flex-col max-[860px]:items-stretch",
+						isPanel ? "max-w-none" : "max-w-[42rem]",
+					)}
+				>
+					<div className="min-w-0">
+						<h1
+							className={cn(
+								"truncate font-semibold leading-[1.15] tracking-normal text-foreground",
+								isPanel ? "text-[24px]" : "text-[32px]",
+							)}
+						>
+							Models
+						</h1>
+						<p className="mt-3 text-[15px] leading-6 text-muted-foreground">
+							Configure model providers and choose which ones are available.{" "}
+							{providers.length} available &middot; {enabledProviderCount}{" "}
+							enabled
+						</p>
+					</div>
+					<div className="flex shrink-0 items-center gap-2 max-[860px]:justify-start">
+						<Button
+							aria-label="Search providers"
+							className="size-8 rounded-md"
+							onClick={() => setProviderSearchOpen((open) => !open)}
+							size="icon-sm"
+							type="button"
+							variant={providerSearchOpen ? "default" : "secondary"}
+						>
+							<Search className="size-4" />
+						</Button>
+						<Button
+							className="h-8 rounded-md bg-foreground px-3 text-sm text-background hover:bg-foreground/90"
+							onClick={onAddProvider}
+							type="button"
+						>
+							<PlusCircle className="size-4" />
+							Add provider
+						</Button>
+					</div>
 				</div>
 
-				<div className="flex flex-col divide-y divide-border rounded-lg border border-border overflow-hidden">
-					{providers.map((prov) => (
+				{providerSearchOpen ? (
+					<div className={cn("mb-4", isPanel ? "max-w-none" : "max-w-[42rem]")}>
+						<div className="flex h-9 items-center gap-2 rounded border bg-background px-3">
+							<Search className="size-4 shrink-0 text-muted-foreground" />
+							<Input
+								aria-label="Search model providers"
+								autoFocus
+								className="h-7 border-0 bg-transparent px-0 text-sm"
+								onChange={(event) => setProviderSearch(event.target.value)}
+								placeholder="Search providers"
+								value={providerSearch}
+							/>
+						</div>
+					</div>
+				) : null}
+
+				<div
+					className={cn(
+						"overflow-hidden",
+						isPanel ? "max-w-none" : "max-w-[42rem]",
+					)}
+				>
+					{filteredProviders.length === 0 ? (
+						<div className="border-b px-2 py-6 text-[15px] text-muted-foreground">
+							No providers match "{providerSearch.trim()}".
+						</div>
+					) : null}
+					{filteredProviders.map((prov) => (
 						<div
-							className="flex items-center gap-4 px-5 py-4 transition-colors hover:bg-accent/30"
+							className={cn(
+								"flex min-h-11 items-center gap-4 border-b px-2 py-2 transition-colors hover:bg-accent/30",
+								selectedProviderId === prov.id && "bg-accent/45",
+							)}
 							key={prov.id}
 						>
-							<div className="min-w-0 flex-1">
-								<p className="text-sm font-medium text-foreground">
+							<button
+								className="flex min-w-0 flex-1 items-center gap-3 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+								onClick={() => onConfigure(prov.id)}
+								type="button"
+							>
+								<p className="min-w-0 flex-1 truncate text-[17px] font-semibold text-foreground">
 									{prov.name}
 								</p>
-								<p className="text-xs text-muted-foreground">
+								<p className="shrink-0 text-[15px] text-muted-foreground">
 									{prov.models === null
 										? "Models load on demand"
-										: `${prov.models} Model${prov.models !== 1 ? "s" : ""}`}
+										: `${prov.models} model${prov.models !== 1 ? "s" : ""}`}
 								</p>
-							</div>
-							<Button
-								aria-label={`Configure ${prov.name}`}
-								className="rounded-md p-1.5 text-muted-foreground hover:bg-accent hover:text-foreground transition-colors"
-								onClick={() => onConfigure(prov.id)}
-								variant="ghost"
-							>
-								<Settings2 className="h-4 w-4" />
-							</Button>
+							</button>
 							<Switch
 								aria-label={`Toggle ${prov.name}`}
 								checked={prov.enabled}
 								onCheckedChange={() => onToggle(prov.id)}
 							/>
+							<button
+								aria-label={`Configure ${prov.name}`}
+								className="grid size-7 shrink-0 place-items-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+								onClick={() => onConfigure(prov.id)}
+								type="button"
+							>
+								<ChevronRight className="size-4" />
+							</button>
 						</div>
 					))}
 				</div>
@@ -158,6 +243,7 @@ export function ProviderDetailContent({
 	modelsError,
 	onOAuthLogin,
 	oauthLoginPending = false,
+	variant = "page",
 }: {
 	provider: Provider;
 	onBack: () => void;
@@ -167,6 +253,7 @@ export function ProviderDetailContent({
 	modelsError?: string | null;
 	onOAuthLogin?: () => void;
 	oauthLoginPending?: boolean;
+	variant?: "page" | "panel";
 }) {
 	const [shownSecrets, setShownSecrets] = useState<Record<string, boolean>>({});
 	const [localConfigValues, setLocalConfigValues] = useState<
@@ -199,6 +286,7 @@ export function ProviderDetailContent({
 					model.id.toLowerCase().includes(modelSearchQuery),
 			)
 		: modelList;
+	const isPanel = variant === "panel";
 
 	useEffect(
 		() => () => {
@@ -250,44 +338,65 @@ export function ProviderDetailContent({
 
 	return (
 		<ScrollArea className="h-full">
-			<div className="mx-auto max-w-3xl px-8 py-6">
+			<div
+				className={cn(
+					"py-10 max-[720px]:px-4 max-[720px]:py-5",
+					isPanel ? "px-6" : "px-18 max-[1200px]:px-8",
+				)}
+			>
 				{/* Back + title */}
 				<div className="mb-8 flex items-center gap-3">
 					<Button
-						aria-label="Back to providers"
+						aria-label={
+							isPanel ? "Close provider details" : "Back to providers"
+						}
 						className="rounded-md p-1.5 text-muted-foreground hover:bg-accent hover:text-foreground transition-colors"
 						onClick={onBack}
 						variant="ghost"
 					>
-						<ArrowLeft className="h-4 w-4" />
+						{isPanel ? (
+							<X className="h-4 w-4" />
+						) : (
+							<ArrowLeft className="h-4 w-4" />
+						)}
 					</Button>
-					<h2 className="text-lg font-semibold text-foreground">
+					<h1
+						className={cn(
+							"truncate font-semibold leading-[1.15] tracking-normal text-foreground",
+							isPanel ? "text-[24px]" : "text-[32px]",
+						)}
+					>
 						{provider.name}
-					</h2>
+					</h1>
 				</div>
 
 				{configFields.length > 0 ? (
-					<section className="mb-8">
-						<div className="flex flex-col gap-5">
+					<section
+						className={cn("mb-8", isPanel ? "max-w-none" : "max-w-[86rem]")}
+					>
+						<div className="flex flex-col">
 							{configFields.map((field) => {
 								const value = localConfigValues[field.path];
 								const valueText = fieldValueToString(value);
 								const isSecret = field.type === "password" || field.secret;
 								const isShown = shownSecrets[field.path] ?? false;
 								return (
-									<div key={field.path}>
-										<header className="mb-2">
-											<h3 className="text-sm font-semibold text-foreground">
+									<div
+										className="grid min-h-18 grid-cols-[minmax(12rem,0.55fr)_minmax(16rem,0.45fr)] items-center gap-6 border-b py-4 max-[900px]:grid-cols-1 max-[900px]:gap-3"
+										key={field.path}
+									>
+										<header>
+											<h3 className="text-[17px] font-semibold text-foreground">
 												{field.label}
 											</h3>
 											{field.description ? (
-												<p className="mt-1 text-sm leading-relaxed text-muted-foreground">
+												<p className="mt-1 text-[15px] leading-relaxed text-muted-foreground">
 													{field.description}
 												</p>
 											) : null}
 										</header>
 										{field.type === "boolean" ? (
-											<div className="flex items-center justify-between rounded-lg border border-border px-4 py-3">
+											<div className="flex items-center justify-end">
 												<span className="text-sm text-muted-foreground">
 													{field.label}
 												</span>
@@ -300,7 +409,7 @@ export function ProviderDetailContent({
 											</div>
 										) : field.type === "select" ? (
 											<select
-												className="w-full rounded-lg border border-border bg-input px-3 py-2 text-sm text-foreground outline-none focus:ring-1 focus:ring-ring"
+												className="h-9 w-full rounded border border-border bg-background px-3 text-sm text-foreground outline-none focus:ring-1 focus:ring-ring"
 												onChange={(event) =>
 													commitField(field, event.target.value)
 												}
@@ -317,12 +426,12 @@ export function ProviderDetailContent({
 												))}
 											</select>
 										) : (
-											<div className="flex items-center gap-2 rounded-lg border border-border bg-input px-4 py-3">
+											<div className="flex h-9 items-center gap-2 rounded border border-border bg-background px-3">
 												{field.type === "url" ? (
 													<LinkIcon className="h-4 w-4 shrink-0 text-muted-foreground" />
 												) : null}
 												<Input
-													className="flex-1 text-sm text-foreground placeholder:text-muted-foreground outline-none border-0"
+													className="h-7 flex-1 border-0 bg-transparent px-0 text-sm text-foreground outline-none placeholder:text-muted-foreground"
 													onBlur={() => commitField(field, valueText)}
 													onChange={(event) =>
 														setLocalConfigValues((current) => ({
@@ -408,10 +517,18 @@ export function ProviderDetailContent({
 				) : null}
 
 				{/* Models section */}
-				<section>
-					<div className="mb-4 flex items-center justify-between">
-						<h3 className="text-sm font-semibold text-foreground">Models</h3>
+				<section
+					className={cn(
+						"overflow-hidden rounded-lg border",
+						isPanel ? "max-w-none" : "max-w-[46rem]",
+					)}
+				>
+					<div className="flex h-12 items-center justify-between bg-muted/40 px-4">
+						<h2 className="text-[17px] font-medium text-muted-foreground">
+							Models
+						</h2>
 						<div className="flex items-center gap-1">
+							<Search className="size-4 text-muted-foreground" />
 							<Button
 								aria-label="Refresh models"
 								className="rounded-md p-1.5 text-muted-foreground hover:bg-accent hover:text-foreground transition-colors"
@@ -432,7 +549,7 @@ export function ProviderDetailContent({
 						</div>
 					) : modelList.length > 0 ? (
 						<div className="space-y-3">
-							<div className="flex items-center gap-2 rounded-lg border border-border bg-input px-3 py-2">
+							<div className="mx-4 mt-4 flex items-center gap-2 rounded border border-border bg-background px-3 py-2">
 								<Search className="size-4 shrink-0 text-muted-foreground" />
 								<Input
 									aria-label="Search models"
@@ -449,10 +566,10 @@ export function ProviderDetailContent({
 								/>
 							</div>
 							{filteredModelList.length > 0 ? (
-								<div className="flex flex-col divide-y divide-border rounded-lg border border-border max-h-125 overflow-y-scroll">
+								<div className="max-h-125 overflow-y-scroll border-t">
 									{filteredModelList.map((model) => (
 										<div
-											className="group flex items-center gap-3 px-4 py-3 transition-colors hover:bg-accent/30"
+											className="group flex min-h-16 items-center gap-3 border-b px-4 py-3 transition-colors hover:bg-accent/30"
 											key={model.id}
 										>
 											<div className="min-w-0 flex-1 font-mono">

apps/cline-hub/src/webview/src/components/views/settings/routine-view.tsx

@@ -42,7 +42,6 @@ import {
 } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { ScrollArea } from "@/components/ui/scroll-area";
 import {
 	Select,
 	SelectContent,
@@ -60,6 +59,12 @@ import {
 	loadProviderModels,
 } from "@/lib/provider-model-catalog";
 import { cn } from "@/lib/utils";
+import {
+	CommandBadge,
+	PageEmptyState,
+	PageFrame,
+	PageHeader,
+} from "../page-layout";
 
 type DateTimeValue = number | string;
 
@@ -871,18 +876,13 @@ export function RoutineSchedulesContent() {
 	);
 
 	return (
-		<ScrollArea className="h-full">
-			<div className="mx-auto max-w-3xl px-8 py-6">
-				<div className="mb-6 flex items-center justify-between gap-3">
-					<div className="flex min-w-0 items-center gap-3">
-						<h2 className="truncate text-lg font-semibold text-foreground">
-							Schedules
-						</h2>
-						<span className="rounded-md border border-border px-2 py-0.5 text-xs text-muted-foreground">
-							cline schedule
-						</span>
-					</div>
-					<div className="flex items-center gap-2">
+		<PageFrame>
+			<PageHeader
+				description="Scheduled jobs are run through the hub."
+				title="Schedules"
+				meta={<CommandBadge>cline schedule</CommandBadge>}
+				actions={
+					<>
 						<Button
 							variant="outline"
 							size="sm"
@@ -897,223 +897,204 @@ export function RoutineSchedulesContent() {
 							<Plus className="h-4 w-4" />
 							New Schedule
 						</Button>
-					</div>
+					</>
+				}
+			/>
+
+			{errorMessage && (
+				<div className="mb-4 rounded-md border border-destructive/40 bg-destructive/10 px-3 py-2 text-sm text-destructive">
+					{errorMessage}
 				</div>
+			)}
 
-				<p className="mb-6 text-xs text-muted-foreground">
-					Scheduled jobs are run through the hub.
-				</p>
-
-				{errorMessage && (
-					<div className="mb-4 rounded-md border border-destructive/40 bg-destructive/10 px-3 py-2 text-sm text-destructive">
-						{errorMessage}
-					</div>
-				)}
-
-				{isLoading ? (
-					<div className="rounded-lg border border-border px-5 py-4 text-sm text-muted-foreground">
-						Loading routines...
-					</div>
-				) : sortedSchedules.length === 0 ? (
-					<div className="rounded-lg border border-border px-5 py-4 text-sm text-muted-foreground">
-						No schedules found. Create a schedule to run routines on a recurring
-						basis.
-					</div>
-				) : (
-					<div className="flex flex-col gap-3">
-						{sortedSchedules.map((schedule) => {
-							const isBusy = busyScheduleId === schedule.scheduleId;
-							const activeExecution = executionBySchedule.get(
-								schedule.scheduleId,
-							);
-							const lastExecution = lastExecutionBySchedule.get(
-								schedule.scheduleId,
-							);
-							const upcoming = upcomingRuns.find(
-								(item) => item.scheduleId === schedule.scheduleId,
-							);
-							return (
-								<div
-									key={schedule.scheduleId}
-									className="rounded-lg border border-border px-5 py-4 transition-colors hover:bg-accent/20"
-								>
-									<div className="flex items-center gap-3">
-										<Circle
-											className={cn(
-												"h-2.5 w-2.5 shrink-0",
+			{isLoading ? (
+				<PageEmptyState>Loading schedules...</PageEmptyState>
+			) : sortedSchedules.length === 0 ? (
+				<PageEmptyState>
+					No schedules found. Create a schedule to run routines on a recurring
+					basis.
+				</PageEmptyState>
+			) : (
+				<div className="flex flex-col gap-3">
+					{sortedSchedules.map((schedule) => {
+						const isBusy = busyScheduleId === schedule.scheduleId;
+						const activeExecution = executionBySchedule.get(
+							schedule.scheduleId,
+						);
+						const lastExecution = lastExecutionBySchedule.get(
+							schedule.scheduleId,
+						);
+						const upcoming = upcomingRuns.find(
+							(item) => item.scheduleId === schedule.scheduleId,
+						);
+						return (
+							<div
+								key={schedule.scheduleId}
+								className="rounded-lg border border-border px-5 py-4 transition-colors hover:bg-accent/20"
+							>
+								<div className="flex items-center gap-3">
+									<Circle
+										className={cn(
+											"h-2.5 w-2.5 shrink-0",
+											schedule.enabled
+												? "fill-primary text-primary"
+												: "fill-muted-foreground/40 text-muted-foreground/40",
+										)}
+									/>
+									<h3 className="text-sm font-semibold text-foreground">
+										{schedule.name}
+									</h3>
+									<span className="rounded-md border border-border px-2 py-0.5 text-xs text-muted-foreground">
+										{schedule.mode}
+									</span>
+									<span className="rounded-md border border-border px-2 py-0.5 text-xs text-muted-foreground">
+										{schedule.cronPattern}
+									</span>
+									<div className="flex-1" />
+									<div className="flex items-center gap-1">
+										<Button
+											variant="ghost"
+											size="icon-sm"
+											aria-label={`View ${schedule.name}`}
+											onClick={() => {
+												window.alert(JSON.stringify(schedule, null, 2));
+											}}
+										>
+											<Eye className="h-3.5 w-3.5" />
+										</Button>
+										<Button
+											variant="ghost"
+											size="icon-sm"
+											aria-label={`Edit ${schedule.name}`}
+											onClick={() => openEditDialog(schedule)}
+											disabled={isBusy}
+										>
+											<Pencil className="h-3.5 w-3.5" />
+										</Button>
+										<Button
+											variant="ghost"
+											size="icon-sm"
+											aria-label={`Run ${schedule.name} now`}
+											onClick={() => void triggerSchedule(schedule.scheduleId)}
+											disabled={isBusy}
+										>
+											<Zap className="h-3.5 w-3.5" />
+										</Button>
+										<Button
+											variant="ghost"
+											size="icon-sm"
+											aria-label={
 												schedule.enabled
-													? "fill-primary text-primary"
-													: "fill-muted-foreground/40 text-muted-foreground/40",
+													? `Pause ${schedule.name}`
+													: `Resume ${schedule.name}`
+											}
+											onClick={() =>
+												void upsertScheduleEnabled(schedule, !schedule.enabled)
+											}
+											disabled={isBusy}
+										>
+											{schedule.enabled ? (
+												<Pause className="h-3.5 w-3.5" />
+											) : (
+												<Play className="h-3.5 w-3.5" />
 											)}
+										</Button>
+										<Button
+											variant="ghost"
+											size="icon-sm"
+											aria-label={`Delete ${schedule.name}`}
+											onClick={() => setSchedulePendingDelete(schedule)}
+											disabled={isBusy}
+										>
+											<Trash2 className="h-3.5 w-3.5" />
+										</Button>
+										<Switch
+											checked={schedule.enabled}
+											onCheckedChange={(checked) =>
+												void upsertScheduleEnabled(schedule, checked)
+											}
+											disabled={isBusy}
+											aria-label={`Enable ${schedule.name}`}
 										/>
-										<h3 className="text-sm font-semibold text-foreground">
-											{schedule.name}
-										</h3>
-										<span className="rounded-md border border-border px-2 py-0.5 text-xs text-muted-foreground">
-											{schedule.mode}
-										</span>
-										<span className="rounded-md border border-border px-2 py-0.5 text-xs text-muted-foreground">
-											{schedule.cronPattern}
-										</span>
-										<div className="flex-1" />
-										<div className="flex items-center gap-1">
-											<Button
-												variant="ghost"
-												size="icon-sm"
-												aria-label={`View ${schedule.name}`}
-												onClick={() => {
-													window.alert(JSON.stringify(schedule, null, 2));
-												}}
-											>
-												<Eye className="h-3.5 w-3.5" />
-											</Button>
-											<Button
-												variant="ghost"
-												size="icon-sm"
-												aria-label={`Edit ${schedule.name}`}
-												onClick={() => openEditDialog(schedule)}
-												disabled={isBusy}
-											>
-												<Pencil className="h-3.5 w-3.5" />
-											</Button>
-											<Button
-												variant="ghost"
-												size="icon-sm"
-												aria-label={`Run ${schedule.name} now`}
-												onClick={() =>
-													void triggerSchedule(schedule.scheduleId)
-												}
-												disabled={isBusy}
-											>
-												<Zap className="h-3.5 w-3.5" />
-											</Button>
-											<Button
-												variant="ghost"
-												size="icon-sm"
-												aria-label={
-													schedule.enabled
-														? `Pause ${schedule.name}`
-														: `Resume ${schedule.name}`
-												}
-												onClick={() =>
-													void upsertScheduleEnabled(
-														schedule,
-														!schedule.enabled,
-													)
-												}
-												disabled={isBusy}
-											>
-												{schedule.enabled ? (
-													<Pause className="h-3.5 w-3.5" />
-												) : (
-													<Play className="h-3.5 w-3.5" />
-												)}
-											</Button>
-											<Button
-												variant="ghost"
-												size="icon-sm"
-												aria-label={`Delete ${schedule.name}`}
-												onClick={() => setSchedulePendingDelete(schedule)}
-												disabled={isBusy}
-											>
-												<Trash2 className="h-3.5 w-3.5" />
-											</Button>
-											<Switch
-												checked={schedule.enabled}
-												onCheckedChange={(checked) =>
-													void upsertScheduleEnabled(schedule, checked)
-												}
-												disabled={isBusy}
-												aria-label={`Enable ${schedule.name}`}
-											/>
-										</div>
-									</div>
-
-									<div className="mt-2.5 ml-5.5 flex flex-col gap-1 text-xs text-muted-foreground">
-										<p>
-											<span className="text-muted-foreground/70">ID:</span>{" "}
-											{schedule.scheduleId}
-										</p>
-										<p>
-											<span className="text-muted-foreground/70">Prompt:</span>{" "}
-											{schedule.prompt}
-										</p>
-										<p>
-											<span className="text-muted-foreground/70">Model:</span>{" "}
-											{formatScheduleModel(schedule)}
-										</p>
-										{schedule.workspaceRoot && (
-											<p>
-												<span className="text-muted-foreground/70">
-													Workspace:
-												</span>{" "}
-												{schedule.workspaceRoot}
-											</p>
-										)}
-										{schedule.cwd && (
-											<p>
-												<span className="text-muted-foreground/70">CWD:</span>{" "}
-												{schedule.cwd}
-											</p>
-										)}
-										<p>
-											<span className="text-muted-foreground/70">
-												Last run:
-											</span>{" "}
-											{formatDateTime(schedule.lastRunAt)}
-										</p>
-										<p>
-											<span className="text-muted-foreground/70">
-												Last result:
-											</span>{" "}
-											{formatExecutionResult(lastExecution)}
-										</p>
-										{lastExecution?.sessionId && (
-											<p>
-												<span className="text-muted-foreground/70">
-													Last session:
-												</span>{" "}
-												{lastExecution.sessionId}
-											</p>
-										)}
-										{lastExecution?.errorMessage && (
-											<p className="text-destructive">
-												<span className="text-muted-foreground/70">
-													Last error:
-												</span>{" "}
-												{lastExecution.errorMessage}
-											</p>
-										)}
-										<p>
-											<span className="text-muted-foreground/70">
-												Next run:
-											</span>{" "}
-											{formatDateTime(
-												schedule.nextRunAt || upcoming?.nextRunAt,
-											)}
-										</p>
-										{activeExecution && (
-											<p>
-												<span className="text-muted-foreground/70">
-													Active:
-												</span>{" "}
-												{activeExecution.executionId} since{" "}
-												{formatDateTime(activeExecution.startedAt)}
-											</p>
-										)}
-										{schedule.tags && schedule.tags.length > 0 && (
-											<p>
-												<span className="text-muted-foreground/70">Tags:</span>{" "}
-												{schedule.tags.join(", ")}
-											</p>
-										)}
 									</div>
 								</div>
-							);
-						})}
-					</div>
-				)}
-			</div>
+
+								<div className="mt-2.5 ml-5.5 flex flex-col gap-1 text-xs text-muted-foreground">
+									<p>
+										<span className="text-muted-foreground/70">ID:</span>{" "}
+										{schedule.scheduleId}
+									</p>
+									<p>
+										<span className="text-muted-foreground/70">Prompt:</span>{" "}
+										{schedule.prompt}
+									</p>
+									<p>
+										<span className="text-muted-foreground/70">Model:</span>{" "}
+										{formatScheduleModel(schedule)}
+									</p>
+									{schedule.workspaceRoot && (
+										<p>
+											<span className="text-muted-foreground/70">
+												Workspace:
+											</span>{" "}
+											{schedule.workspaceRoot}
+										</p>
+									)}
+									{schedule.cwd && (
+										<p>
+											<span className="text-muted-foreground/70">CWD:</span>{" "}
+											{schedule.cwd}
+										</p>
+									)}
+									<p>
+										<span className="text-muted-foreground/70">Last run:</span>{" "}
+										{formatDateTime(schedule.lastRunAt)}
+									</p>
+									<p>
+										<span className="text-muted-foreground/70">
+											Last result:
+										</span>{" "}
+										{formatExecutionResult(lastExecution)}
+									</p>
+									{lastExecution?.sessionId && (
+										<p>
+											<span className="text-muted-foreground/70">
+												Last session:
+											</span>{" "}
+											{lastExecution.sessionId}
+										</p>
+									)}
+									{lastExecution?.errorMessage && (
+										<p className="text-destructive">
+											<span className="text-muted-foreground/70">
+												Last error:
+											</span>{" "}
+											{lastExecution.errorMessage}
+										</p>
+									)}
+									<p>
+										<span className="text-muted-foreground/70">Next run:</span>{" "}
+										{formatDateTime(schedule.nextRunAt || upcoming?.nextRunAt)}
+									</p>
+									{activeExecution && (
+										<p>
+											<span className="text-muted-foreground/70">Active:</span>{" "}
+											{activeExecution.executionId} since{" "}
+											{formatDateTime(activeExecution.startedAt)}
+										</p>
+									)}
+									{schedule.tags && schedule.tags.length > 0 && (
+										<p>
+											<span className="text-muted-foreground/70">Tags:</span>{" "}
+											{schedule.tags.join(", ")}
+										</p>
+									)}
+								</div>
+							</div>
+						);
+					})}
+				</div>
+			)}
 			<AlertDialog
 				open={Boolean(schedulePendingDelete)}
 				onOpenChange={(open) => {
@@ -1554,6 +1535,6 @@ export function RoutineSchedulesContent() {
 					</DialogFooter>
 				</DialogContent>
 			</Dialog>
-		</ScrollArea>
+		</PageFrame>
 	);
 }

apps/cline-hub/src/webview/src/components/views/settings/settings-view.tsx

@@ -1,6 +1,4 @@
-"use client";
-
-import { ChevronDown, ChevronRight, Moon, Sun, X } from "lucide-react";
+import { ChevronDown, ChevronRight, X } from "lucide-react";
 import { useCallback, useEffect, useState } from "react";
 import { Button } from "@/components/ui/button";
 import { ScrollArea } from "@/components/ui/scroll-area";
@@ -12,11 +10,17 @@ import type {
 	ProviderModelsResponse,
 	ProviderSettingsUpdate,
 } from "@/lib/provider-schema";
+import {
+	type HubTheme,
+	readStoredHubTheme,
+	readSystemHubTheme,
+	setStoredHubTheme,
+} from "@/lib/theme";
 import { cn } from "@/lib/utils";
+import { PageFrame, PageHeader } from "../page-layout";
 import { AccountView } from "./account-view";
 import { AddProviderContent, type AddProviderPayload } from "./add-provider";
 import { ChannelsContent } from "./channels-view";
-import { RulesView } from "./extensions-view";
 import { McpServersContent } from "./mcp-view";
 import {
 	ProviderDetailContent,
@@ -32,7 +36,6 @@ import { toSettingsPatch } from "./settings-patch";
 const navCategories = [
 	"General",
 	"Providers",
-	"Customizations",
 	"MCP",
 	"Channels",
 	"Schedules",
@@ -40,7 +43,6 @@ const navCategories = [
 ] as const;
 
 export type SettingsSection = (typeof navCategories)[number];
-type Theme = "dark" | "light";
 type GlobalSettingsResponse = {
 	telemetryOptOut: boolean;
 	autoUpdateEnabled: boolean;
@@ -58,17 +60,15 @@ let providerCatalogCache: {
 // -----------------------------------------------------------
 
 export function SettingsView({
+	chrome = "full",
 	initialSection = "General",
 	onClose,
 	onNavigateSection,
-	onThemeChange,
-	theme,
 }: {
+	chrome?: "full" | "content";
 	initialSection?: SettingsSection;
 	onClose: () => void;
 	onNavigateSection?: (section: SettingsSection) => void;
-	onThemeChange: (theme: Theme) => void;
-	theme: Theme;
 }) {
 	const [activeNav, setActiveNav] = useState<SettingsSection>(initialSection);
 	const [providersExpanded, setProvidersExpanded] = useState(true);
@@ -141,11 +141,14 @@ export function SettingsView({
 	}, [setProvidersWithCache]);
 
 	useEffect(() => {
+		if (activeNav !== "Providers") {
+			return;
+		}
 		const timeoutId = window.setTimeout(() => {
 			void loadProviderCatalog();
 		}, 0);
 		return () => window.clearTimeout(timeoutId);
-	}, [loadProviderCatalog]);
+	}, [activeNav, loadProviderCatalog]);
 
 	const persistProviderSettings = useCallback(
 		async (
@@ -349,6 +352,86 @@ export function SettingsView({
 		setAddingProvider(false);
 	};
 
+	const providerContent = addingProvider ? (
+		<AddProviderContent
+			existingProviderIds={providers.map((provider) => provider.id)}
+			onBack={backToProviderList}
+			onSave={saveNewProvider}
+		/>
+	) : providersLoading ? (
+		<div className="flex h-full items-center justify-center">
+			<p className="text-sm text-muted-foreground">Loading providers...</p>
+		</div>
+	) : providerCatalogError ? (
+		<div className="flex h-full items-center justify-center">
+			<p className="max-w-xl px-4 text-center text-sm text-destructive">
+				Failed to load providers: {providerCatalogError}
+			</p>
+		</div>
+	) : selectedProvider ? (
+		<div className="grid h-full grid-cols-[minmax(24rem,0.95fr)_minmax(28rem,1.05fr)] overflow-hidden max-[1100px]:grid-cols-1 max-[1100px]:grid-rows-[minmax(24rem,0.9fr)_minmax(26rem,1fr)]">
+			<ProviderListContent
+				onAddProvider={openAddProvider}
+				onConfigure={openProviderDetail}
+				onToggle={toggleProvider}
+				providers={providers}
+				selectedProviderId={selectedProvider.id}
+				variant="panel"
+			/>
+			<aside className="min-h-0 overflow-hidden border-l bg-background max-[1100px]:border-l-0 max-[1100px]:border-t">
+				<ProviderDetailContent
+					modelsError={modelsErrorByProvider[selectedProvider.id] ?? null}
+					modelsLoading={modelsLoadingByProvider[selectedProvider.id] ?? false}
+					oauthLoginPending={oauthSigningProviderId === selectedProvider.id}
+					onBack={backToProviderList}
+					onLoadModels={() => void loadProviderModels(selectedProvider.id)}
+					onOAuthLogin={
+						isOAuthProvider(selectedProvider.id)
+							? () => void runOAuthProviderLogin(selectedProvider.id)
+							: undefined
+					}
+					onUpdate={(updates) => updateProvider(selectedProvider.id, updates)}
+					provider={selectedProvider}
+					variant="panel"
+				/>
+			</aside>
+		</div>
+	) : (
+		<ProviderListContent
+			onAddProvider={openAddProvider}
+			onConfigure={openProviderDetail}
+			onToggle={toggleProvider}
+			providers={providers}
+		/>
+	);
+
+	const content =
+		activeNav === "Providers" ? (
+			providerContent
+		) : activeNav === "MCP" ? (
+			<McpServersContent />
+		) : activeNav === "Channels" ? (
+			<ChannelsContent />
+		) : activeNav === "Schedules" ? (
+			<RoutineSchedulesContent />
+		) : activeNav === "Account" ? (
+			<AccountView />
+		) : activeNav === "General" ? (
+			<GeneralSettingsContent />
+		) : (
+			<div className="flex h-full items-center justify-center">
+				<p className="text-sm text-muted-foreground">
+					{activeNav} settings coming soon.
+				</p>
+			</div>
+		);
+
+	if (chrome === "content") {
+		return (
+			<div className="h-full overflow-hidden bg-background">{content}</div>
+		);
+	}
+
 	return (
 		<div className="flex h-full flex-col overflow-hidden bg-background">
 			{/* Header bar */}
@@ -440,88 +523,17 @@ export function SettingsView({
 				</nav>
 
 				{/* Content area */}
-				<div className="flex-1 overflow-hidden">
-					{activeNav === "Providers" && selectedProvider ? (
-						<ProviderDetailContent
-							modelsError={modelsErrorByProvider[selectedProvider.id] ?? null}
-							modelsLoading={
-								modelsLoadingByProvider[selectedProvider.id] ?? false
-							}
-							oauthLoginPending={oauthSigningProviderId === selectedProvider.id}
-							onBack={backToProviderList}
-							onLoadModels={() => void loadProviderModels(selectedProvider.id)}
-							onOAuthLogin={
-								isOAuthProvider(selectedProvider.id)
-									? () => void runOAuthProviderLogin(selectedProvider.id)
-									: undefined
-							}
-							onUpdate={(updates) =>
-								updateProvider(selectedProvider.id, updates)
-							}
-							provider={selectedProvider}
-						/>
-					) : activeNav === "Providers" ? (
-						addingProvider ? (
-							<AddProviderContent
-								existingProviderIds={providers.map((provider) => provider.id)}
-								onBack={backToProviderList}
-								onSave={saveNewProvider}
-							/>
-						) : providersLoading ? (
-							<div className="flex h-full items-center justify-center">
-								<p className="text-sm text-muted-foreground">
-									Loading providers...
-								</p>
-							</div>
-						) : providerCatalogError ? (
-							<div className="flex h-full items-center justify-center">
-								<p className="max-w-xl px-4 text-center text-sm text-destructive">
-									Failed to load providers: {providerCatalogError}
-								</p>
-							</div>
-						) : (
-							<ProviderListContent
-								onAddProvider={openAddProvider}
-								onConfigure={openProviderDetail}
-								onToggle={toggleProvider}
-								providers={providers}
-							/>
-						)
-					) : activeNav === "MCP" ? (
-						<McpServersContent />
-					) : activeNav === "Channels" ? (
-						<ChannelsContent />
-					) : activeNav === "Schedules" ? (
-						<RoutineSchedulesContent />
-					) : activeNav === "Customizations" ? (
-						<RulesView />
-					) : activeNav === "Account" ? (
-						<AccountView />
-					) : activeNav === "General" ? (
-						<GeneralSettingsContent
-							onThemeChange={onThemeChange}
-							theme={theme}
-						/>
-					) : (
-						<div className="flex h-full items-center justify-center">
-							<p className="text-sm text-muted-foreground">
-								{activeNav} settings coming soon.
-							</p>
-						</div>
-					)}
-				</div>
+				<div className="flex-1 overflow-hidden">{content}</div>
 			</div>
 		</div>
 	);
 }
 
-function GeneralSettingsContent({
-	onThemeChange,
-	theme,
-}: {
-	onThemeChange: (theme: Theme) => void;
-	theme: Theme;
-}) {
+function GeneralSettingsContent() {
+	const [theme, setTheme] = useState<HubTheme>(() => {
+		if (typeof window === "undefined") return "light";
+		return readStoredHubTheme() ?? readSystemHubTheme();
+	});
 	const [telemetryOptOut, setTelemetryOptOut] = useState(false);
 	const [telemetryLoading, setTelemetryLoading] = useState(true);
 	const [telemetrySaving, setTelemetrySaving] = useState(false);
@@ -603,85 +615,77 @@ function GeneralSettingsContent({
 		}
 	};
 
+	const updateTheme = (darkModeEnabled: boolean) => {
+		const nextTheme = darkModeEnabled ? "dark" : "light";
+		setTheme(setStoredHubTheme(nextTheme));
+		window.dispatchEvent(new Event("cline-hub-theme-change"));
+	};
+
 	return (
-		<ScrollArea className="h-full">
-			<div className="mx-auto max-w-3xl px-8 py-6">
-				<div className="mb-6">
-					<h2 className="text-lg font-semibold text-foreground">General</h2>
+		<PageFrame>
+			<PageHeader
+				description="Manage Hub preferences for this browser and CLI environment."
+				title="Settings"
+			/>
+			<section className="max-w-[86rem]">
+				<div className="flex min-h-20 items-center justify-between gap-5 border-b max-[720px]:flex-col max-[720px]:items-stretch max-[720px]:py-4">
+					<div>
+						<p className="text-[17px] font-semibold text-foreground">
+							Dark mode
+						</p>
+						<p className="mt-1 text-[15px] text-muted-foreground">
+							Keep the Hub interface in dark mode on this browser.
+						</p>
+					</div>
+					<Switch
+						aria-label="Dark mode"
+						checked={theme === "dark"}
+						onCheckedChange={updateTheme}
+					/>
 				</div>
-				<section className="rounded-lg border border-border p-5">
-					<div className="flex items-center justify-between gap-5 max-[720px]:flex-col max-[720px]:items-stretch">
-						<div>
-							<p className="text-sm font-medium text-foreground">Theme</p>
-							<p className="mt-1 text-xs text-muted-foreground">
-								Use the light or dark Cline Hub interface.
+				<div className="flex min-h-20 items-center justify-between gap-5 border-b max-[720px]:flex-col max-[720px]:items-stretch max-[720px]:py-4">
+					<div>
+						<p className="text-[17px] font-semibold text-foreground">
+							Auto update
+						</p>
+						<p className="mt-1 text-[15px] text-muted-foreground">
+							Automatically install CLI updates on startup.
+						</p>
+						{autoUpdateError ? (
+							<p className="mt-2 text-xs text-destructive">
+								Failed to update auto update setting: {autoUpdateError}
 							</p>
-						</div>
-						<div className="flex items-center gap-2 max-[720px]:justify-start">
-							<Button
-								onClick={() => onThemeChange("dark")}
-								type="button"
-								variant={theme === "dark" ? "default" : "outline"}
-							>
-								<Moon className="size-4" />
-								Dark
-							</Button>
-							<Button
-								onClick={() => onThemeChange("light")}
-								type="button"
-								variant={theme === "light" ? "default" : "outline"}
-							>
-								<Sun className="size-4" />
-								Light
-							</Button>
-						</div>
+						) : null}
 					</div>
-				</section>
-				<section className="mt-4 rounded-lg border border-border p-5">
-					<div className="flex items-center justify-between gap-5 max-[720px]:flex-col max-[720px]:items-stretch">
-						<div>
-							<p className="text-sm font-medium text-foreground">Auto update</p>
-							<p className="mt-1 text-xs text-muted-foreground">
-								Automatically install CLI updates on startup.
+					<Switch
+						aria-label="Auto update"
+						checked={autoUpdateEnabled}
+						disabled={autoUpdateLoading || autoUpdateSaving}
+						onCheckedChange={(checked) => void updateAutoUpdateEnabled(checked)}
+					/>
+				</div>
+				<div className="flex min-h-20 items-center justify-between gap-5 border-b max-[720px]:flex-col max-[720px]:items-stretch max-[720px]:py-4">
+					<div>
+						<p className="text-[17px] font-semibold text-foreground">
+							Telemetry
+						</p>
+						<p className="mt-1 text-[15px] text-muted-foreground">
+							Enable error and usage report to help us improve Cline.
+						</p>
+						{telemetryError ? (
+							<p className="mt-2 text-xs text-destructive">
+								Failed to update telemetry setting: {telemetryError}
 							</p>
-							{autoUpdateError ? (
-								<p className="mt-2 text-xs text-destructive">
-									Failed to update auto update setting: {autoUpdateError}
-								</p>
-							) : null}
-						</div>
-						<Switch
-							aria-label="Auto update"
-							checked={autoUpdateEnabled}
-							disabled={autoUpdateLoading || autoUpdateSaving}
-							onCheckedChange={(checked) =>
-								void updateAutoUpdateEnabled(checked)
-							}
-						/>
+						) : null}
 					</div>
-				</section>
-				<section className="mt-4 rounded-lg border border-border p-5">
-					<div className="flex items-center justify-between gap-5 max-[720px]:flex-col max-[720px]:items-stretch">
-						<div>
-							<p className="text-sm font-medium text-foreground">Telemetry</p>
-							<p className="mt-1 text-xs text-muted-foreground">
-								Enable error and usage report to help us improve Cline.
-							</p>
-							{telemetryError ? (
-								<p className="mt-2 text-xs text-destructive">
-									Failed to update telemetry setting: {telemetryError}
-								</p>
-							) : null}
-						</div>
-						<Switch
-							aria-label="Telemetry opt-out"
-							checked={!telemetryOptOut} // If opt-out is true, the switch should be off (unchecked)
-							disabled={telemetryLoading || telemetrySaving}
-							onCheckedChange={(checked) => void updateTelemetryOptOut(checked)}
-						/>
-					</div>
-				</section>
-			</div>
-		</ScrollArea>
+					<Switch
+						aria-label="Telemetry"
+						checked={!telemetryOptOut} // If opt-out is true, the switch should be off (unchecked)
+						disabled={telemetryLoading || telemetrySaving}
+						onCheckedChange={(checked) => void updateTelemetryOptOut(!checked)}
+					/>
+				</div>
+			</section>
+		</PageFrame>
 	);
 }

apps/cline-hub/src/webview/src/index.css

@@ -1,29 +1,29 @@
 @import "tailwindcss";
 @import "tw-animate-css";
 @import "shadcn/tailwind.css";
-@import "@fontsource-variable/geist";
+@import "@fontsource-variable/schibsted-grotesk";
 
 @custom-variant dark (&:is(.dark *));
 
 :root {
 	--background: oklch(1 0 0);
-	--foreground: oklch(0.145 0 0);
+	--foreground: oklch(0.18 0.008 255);
 	--card: oklch(1 0 0);
-	--card-foreground: oklch(0.145 0 0);
+	--card-foreground: oklch(0.18 0.008 255);
 	--popover: oklch(1 0 0);
 	--popover-foreground: oklch(0.145 0 0);
 	--primary: oklch(0.205 0 0);
 	--primary-foreground: oklch(0.985 0 0);
 	--secondary: oklch(0.97 0 0);
 	--secondary-foreground: oklch(0.205 0 0);
-	--muted: oklch(0.97 0 0);
-	--muted-foreground: oklch(0.556 0 0);
-	--accent: oklch(0.97 0 0);
-	--accent-foreground: oklch(0.205 0 0);
+	--muted: oklch(0.974 0.003 270);
+	--muted-foreground: oklch(0.52 0.014 270);
+	--accent: oklch(0.94 0.004 270);
+	--accent-foreground: oklch(0.18 0.008 255);
 	--destructive: oklch(0.577 0.245 27.325);
 	--destructive-foreground: oklch(0.93 0 0);
-	--border: oklch(0.922 0 0);
-	--input: oklch(0.922 0 0);
+	--border: oklch(0.92 0.005 270);
+	--input: oklch(0.9 0.006 270);
 	--ring: oklch(0.708 0 0);
 	--chart-1: oklch(0.809 0.105 251.813);
 	--chart-2: oklch(0.623 0.214 259.815);
@@ -31,19 +31,21 @@
 	--chart-4: oklch(0.488 0.243 264.376);
 	--chart-5: oklch(0.424 0.199 265.638);
 	--radius: 0.625rem;
-	--sidebar: oklch(0.985 0 0);
-	--sidebar-foreground: oklch(0.145 0 0);
+	--sidebar: oklch(0.977 0.004 270);
+	--sidebar-foreground: oklch(0.18 0.008 255);
 	--sidebar-primary: oklch(0.205 0 0);
 	--sidebar-primary-foreground: oklch(0.985 0 0);
-	--sidebar-accent: oklch(0.97 0 0);
-	--sidebar-accent-foreground: oklch(0.205 0 0);
-	--sidebar-border: oklch(0.922 0 0);
+	--sidebar-accent: oklch(0.928 0.006 270);
+	--sidebar-accent-foreground: oklch(0.18 0.008 255);
+	--sidebar-border: oklch(0.92 0.005 270);
 	--sidebar-ring: oklch(0.708 0 0);
 }
 
 @theme inline {
-	--font-sans: "Geist Variable", sans-serif;
-	--font-mono: "Geist Mono", "Geist Mono Fallback";
+	--font-sans: "Schibsted Grotesk Variable", sans-serif;
+	--font-mono:
+		ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono",
+		monospace;
 	--color-background: var(--background);
 	--color-foreground: var(--foreground);
 	--color-card: var(--card);
@@ -91,13 +93,86 @@
 	}
 	body {
 		@apply bg-background text-foreground;
+		font-optical-sizing: auto;
 	}
 	html {
 		@apply font-sans;
 	}
+	a[href],
+	button:not(:disabled),
+	[role="button"]:not([aria-disabled="true"]),
+	summary,
+	input[type="button"]:not(:disabled),
+	input[type="checkbox"]:not(:disabled),
+	input[type="radio"]:not(:disabled),
+	input[type="reset"]:not(:disabled),
+	input[type="submit"]:not(:disabled),
+	label[for],
+	select:not(:disabled) {
+		cursor: pointer;
+	}
+	button:disabled,
+	[aria-disabled="true"],
+	input:disabled,
+	select:disabled,
+	textarea:disabled {
+		cursor: not-allowed;
+	}
+}
+
+:is(
+		[role="menuitem"],
+		[role="menuitemcheckbox"],
+		[role="menuitemradio"],
+		[role="option"],
+		[role="tab"],
+		[role="switch"],
+		[role="checkbox"],
+		[role="radio"],
+		[data-slot="switch"],
+		[data-slot="checkbox"],
+		[data-slot="radio-group-item"],
+		[data-slot="tabs-trigger"],
+		[data-slot="dropdown-menu-trigger"],
+		[data-slot="dropdown-menu-item"],
+		[data-slot="dropdown-menu-checkbox-item"],
+		[data-slot="dropdown-menu-radio-item"],
+		[data-slot="dropdown-menu-sub-trigger"],
+		[data-slot="menubar-trigger"],
+		[data-slot="menubar-item"],
+		[data-slot="menubar-checkbox-item"],
+		[data-slot="menubar-radio-item"],
+		[data-slot="menubar-sub-trigger"],
+		[data-slot="select-trigger"],
+		[data-slot="select-item"],
+		[data-slot="select-scroll-up-button"],
+		[data-slot="select-scroll-down-button"],
+		[data-slot="combobox-trigger"],
+		[data-slot="combobox-clear"],
+		[data-slot="combobox-item"],
+		[data-slot="combobox-chip-remove"],
+		[data-slot="command-item"],
+		[data-slot="accordion-trigger"],
+		[data-slot="collapsible-trigger"],
+		[data-slot="dialog-trigger"],
+		[data-slot="dialog-close"],
+		[data-slot="alert-dialog-trigger"],
+		[data-slot="alert-dialog-action"],
+		[data-slot="alert-dialog-cancel"],
+		[data-slot="popover-trigger"],
+		[data-slot="hover-card-trigger"],
+		[data-slot="tooltip-trigger"]
+	):not(:disabled):not([aria-disabled="true"]):not([data-disabled]):not(
+		[data-disabled="true"]
+	) {
+	cursor: pointer;
+}
+
+[data-disabled],
+[data-disabled="true"] {
+	cursor: not-allowed;
 }
 
-/* Custom scrollbar for dark theme */
 ::-webkit-scrollbar {
 	width: 6px;
 	height: 6px;
@@ -108,12 +183,12 @@
 }
 
 ::-webkit-scrollbar-thumb {
-	background: oklch(0.3 0.005 260);
+	background: oklch(0.82 0.006 270);
 	border-radius: 3px;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-	background: oklch(0.4 0.005 260);
+	background: oklch(0.72 0.01 270);
 }
 
 /* Selection color */

apps/cline-hub/src/webview/src/lib/desktop-client.test.ts

@@ -0,0 +1,71 @@
+import { describe, expect, it, vi } from "vitest";
+import type { WebviewInboundMessage } from "../../../webview-protocol";
+import { HubDesktopClient, isBrowserTransportFailure } from "./desktop-client";
+
+function createClient() {
+	const postToHost = vi.fn<(message: WebviewInboundMessage) => void>();
+	const client = new HubDesktopClient({ postToHost, listen: false });
+	return { client, postToHost };
+}
+
+function lastDesktopCommand(postToHost: ReturnType<typeof vi.fn>) {
+	const message = postToHost.mock.lastCall?.[0] as
+		| Extract<WebviewInboundMessage, { type: "desktopCommand" }>
+		| undefined;
+	if (message?.type !== "desktopCommand") {
+		throw new Error("Expected a desktop command to be posted");
+	}
+	return message;
+}
+
+describe("HubDesktopClient", () => {
+	it("does not reject pending desktop commands for unrelated hub errors", async () => {
+		const { client, postToHost } = createClient();
+		const pending = client.invoke<{ installedKeys: string[] }>(
+			"list_marketplace_installed_entries",
+		);
+		const command = lastDesktopCommand(postToHost);
+
+		client.handleMessage({
+			data: { type: "error", text: "Failed to restore previous session." },
+		});
+		client.handleMessage({
+			data: {
+				type: "desktopCommandResult",
+				id: command.id,
+				ok: true,
+				result: { installedKeys: ["plugin:goal"] },
+			},
+		});
+
+		await expect(pending).resolves.toEqual({ installedKeys: ["plugin:goal"] });
+	});
+
+	it("rejects pending desktop commands for browser transport failures", async () => {
+		const { client } = createClient();
+		const pending = client.invoke("list_marketplace_installed_entries");
+
+		client.handleMessage({
+			data: { type: "status", text: "Disconnected from the Cline Hub server." },
+		});
+
+		await expect(pending).rejects.toThrow(
+			"Disconnected from the Cline Hub server.",
+		);
+	});
+
+	it("only treats exact browser lifecycle messages as transport failures", () => {
+		expect(
+			isBrowserTransportFailure({
+				type: "error",
+				text: "Failed to connect to the Cline Hub server.",
+			}),
+		).toBe(true);
+		expect(
+			isBrowserTransportFailure({
+				type: "error",
+				text: "Failed to restore previous session.",
+			}),
+		).toBe(false);
+	});
+});

apps/cline-hub/src/webview/src/lib/desktop-client.ts

@@ -3,28 +3,62 @@
 import type { WebviewOutboundMessage } from "../../../webview-protocol";
 import { postToHost } from "../vscode";
 
+type PostToHost = typeof postToHost;
+
 type PendingRequest = {
+	command: string;
 	resolve: (value: unknown) => void;
 	reject: (error: Error) => void;
 	timeoutId: ReturnType<typeof setTimeout>;
 };
 
 const REQUEST_TIMEOUT_MS = 120_000;
+const BROWSER_TRANSPORT_FAILURE_MESSAGES = new Set([
+	"Disconnected from the Cline Hub server.",
+	"Failed to connect to the Cline Hub server.",
+	"Received an invalid message from the Cline Hub server.",
+]);
 
-class HubDesktopClient {
+export function isBrowserTransportFailure(
+	message: WebviewOutboundMessage,
+): boolean {
+	if (message.type !== "status" && message.type !== "error") {
+		return false;
+	}
+	return BROWSER_TRANSPORT_FAILURE_MESSAGES.has(message.text);
+}
+
+export class HubDesktopClient {
 	private requestCounter = 0;
 	private readonly pending = new Map<string, PendingRequest>();
+	private readonly postToHost: PostToHost;
 
-	constructor() {
-		if (typeof window !== "undefined") {
+	constructor(options: { postToHost?: PostToHost; listen?: boolean } = {}) {
+		this.postToHost = options.postToHost ?? postToHost;
+		if ((options.listen ?? true) && typeof window !== "undefined") {
 			window.addEventListener("message", (event) => {
 				this.handleMessage(event as MessageEvent<WebviewOutboundMessage>);
 			});
 		}
 	}
 
-	private handleMessage(event: MessageEvent<WebviewOutboundMessage>) {
+	handleMessage(event: Pick<MessageEvent<WebviewOutboundMessage>, "data">) {
 		const message = event.data;
+		if (
+			message &&
+			typeof message === "object" &&
+			(message.type === "status" || message.type === "error")
+		) {
+			if (isBrowserTransportFailure(message) && this.pending.size > 0) {
+				const error = new Error(message.text);
+				for (const pending of this.pending.values()) {
+					clearTimeout(pending.timeoutId);
+					pending.reject(error);
+				}
+				this.pending.clear();
+			}
+			return;
+		}
 		if (
 			!message ||
 			typeof message !== "object" ||
@@ -46,19 +80,24 @@ class HubDesktopClient {
 		pending.reject(new Error(message.error));
 	}
 
-	async invoke<T>(command: string, args?: Record<string, unknown>): Promise<T> {
+	async invoke<T>(
+		command: string,
+		args?: Record<string, unknown>,
+		options?: { timeoutMs?: number },
+	): Promise<T> {
 		const id = `desktop_${Date.now()}_${this.requestCounter++}`;
 		return await new Promise<T>((resolve, reject) => {
 			const timeoutId = setTimeout(() => {
 				this.pending.delete(id);
 				reject(new Error(`Timed out waiting for desktop command: ${command}`));
-			}, REQUEST_TIMEOUT_MS);
+			}, options?.timeoutMs ?? REQUEST_TIMEOUT_MS);
 			this.pending.set(id, {
+				command,
 				resolve: (value) => resolve(value as T),
 				reject,
 				timeoutId,
 			});
-			postToHost({ type: "desktopCommand", id, command, args });
+			this.postToHost({ type: "desktopCommand", id, command, args });
 		});
 	}
 }