diff --git a/apps/examples/desktop-app/webview/app/layout.tsx b/apps/examples/desktop-app/webview/app/layout.tsx
index 19d313a290..317b8e39a7 100644
--- a/apps/examples/desktop-app/webview/app/layout.tsx
+++ b/apps/examples/desktop-app/webview/app/layout.tsx
@@ -1,6 +1,7 @@
 import { Analytics } from "@vercel/analytics/next";
 import type { Metadata } from "next";
 import { Toaster } from "@/components/ui/toaster";
+import { HUB_THEME_BOOTSTRAP_SCRIPT } from "@/lib/theme";
 import "./globals.css";
 
 export const metadata: Metadata = {
@@ -31,7 +32,19 @@ export default function RootLayout({
 	children: React.ReactNode;
 }>) {
 	return (
-		<html className="h-full" lang="en">
+		<html
+			className="dark h-full"
+			data-cline-hub-theme="dark"
+			lang="en"
+			suppressHydrationWarning
+		>
+			<head>
+				<script
+					// biome-ignore lint/security/noDangerouslySetInnerHtml: static bootstrap must run before the first paint
+					dangerouslySetInnerHTML={{ __html: HUB_THEME_BOOTSTRAP_SCRIPT }}
+					id="cline-hub-theme-bootstrap"
+				/>
+			</head>
 			<body className="h-full min-h-screen font-sans antialiased">
 				{children}
 				<Toaster />
diff --git a/apps/examples/desktop-app/webview/app/page.tsx b/apps/examples/desktop-app/webview/app/page.tsx
index f47612201d..b9e37642af 100644
--- a/apps/examples/desktop-app/webview/app/page.tsx
+++ b/apps/examples/desktop-app/webview/app/page.tsx
@@ -54,6 +54,7 @@ import {
 } from "@/lib/desktop-app-state";
 import { desktopClient } from "@/lib/desktop-client";
 import { syncDesktopWindowTitle } from "@/lib/desktop-window-title";
+import { createLatestSuccessfulRequestGate } from "@/lib/latest-successful-request";
 import {
 	hasCompletedOnboarding,
 	markOnboardingCompleted,
@@ -79,6 +80,8 @@ function makeThreadId(): string {
 	return `thread_${Date.now()}_${Math.random().toString(36).slice(2, 7)}`;
 }
 
+const GIT_BRANCH_REFRESH_INTERVAL_MS = 5_000;
+
 type AppLocation = DesktopAppLocation<SettingsSection>;
 
 function toThreadTitle(options: { title?: string; prompt?: string }): string {
@@ -299,7 +302,7 @@ export default function Home() {
 						<SidebarRail />
 					</Sidebar>
 					<SidebarInset className="min-h-0 min-w-0 overflow-hidden">
-						<SidebarTrigger className="absolute left-3 top-3 z-40 md:hidden" />
+						<SidebarTrigger className="absolute left-20 top-0 z-40 md:hidden" />
 						{view === "sessions" ? (
 							<SessionsView
 								activeSessionId={activeHistorySessionId}
@@ -440,6 +443,7 @@ function ChatThreadPane({
 	const resetThreadRef = useRef<string | null>(null);
 	const manualTitleSessionRef = useRef<string | null>(null);
 	const workspaceSelectionRequestRef = useRef(0);
+	const gitBranchRequestGateRef = useRef(createLatestSuccessfulRequestGate());
 	const workspaceRef = useRef({
 		cwd: config.cwd,
 		workspaceRoot: config.workspaceRoot,
@@ -448,6 +452,7 @@ function ChatThreadPane({
 		cwd: config.cwd,
 		workspaceRoot: config.workspaceRoot,
 	};
+	const activeWorkspaceCwd = (config.cwd || config.workspaceRoot || "").trim();
 
 	useEffect(() => {
 		setWorkspaces((current) => {
@@ -526,9 +531,12 @@ function ChatThreadPane({
 	);
 
 	const refreshGitBranch = useCallback(async () => {
+		const requestId = gitBranchRequestGateRef.current.begin();
 		const cwd = getWorkspaceCwd();
 		if (!cwd) {
-			setGitBranch("no-git");
+			if (gitBranchRequestGateRef.current.commit(requestId)) {
+				setGitBranch("no-git");
+			}
 			return;
 		}
 		try {
@@ -536,13 +544,21 @@ function ChatThreadPane({
 				"get_git_branch",
 				{ cwd },
 			);
+			if (!gitBranchRequestGateRef.current.commit(requestId)) {
+				return;
+			}
 			const branch = payload?.branch?.trim();
 			setGitBranch(branch && branch.length > 0 ? branch : "no-git");
 		} catch {
-			setGitBranch("no-git");
+			// Preserve the latest successful branch through transient failures.
 		}
 	}, [getWorkspaceCwd]);
 
+	const invalidateGitBranch = useCallback(() => {
+		gitBranchRequestGateRef.current.invalidate();
+		setGitBranch("no-git");
+	}, []);
+
 	const listGitBranches = useCallback(async (): Promise<{
 		current: string;
 		branches: string[];
@@ -573,18 +589,18 @@ function ChatThreadPane({
 				return false;
 			}
 			try {
-				const payload = await desktopClient.invoke<{ branch?: string }>(
-					"checkout_git_branch",
-					{ cwd, branch: nextBranch },
-				);
-				const branch = payload?.branch?.trim();
-				setGitBranch(branch && branch.length > 0 ? branch : "no-git");
+				await desktopClient.invoke<{ branch?: string }>("checkout_git_branch", {
+					cwd,
+					branch: nextBranch,
+				});
+				invalidateGitBranch();
+				await refreshGitBranch();
 				return true;
 			} catch {
 				return false;
 			}
 		},
-		[getWorkspaceCwd],
+		[getWorkspaceCwd, invalidateGitBranch, refreshGitBranch],
 	);
 
 	const listWorkspaces = useCallback(
@@ -653,43 +669,26 @@ function ChatThreadPane({
 				return false;
 			}
 
+			invalidateGitBranch();
 			setWorkspacePath(nextWorkspace);
 			setWorkspaces((prev) =>
 				filterWorkspacePaths(mergeWorkspacePaths(prev, [nextWorkspace])),
 			);
 
-			// Fire git branch + workspace list refresh in the background
-			desktopClient
-				.invoke<{ branch?: string }>("get_git_branch", {
-					cwd: nextWorkspace,
-				})
-				.then((payload) => {
-					if (requestId !== workspaceSelectionRequestRef.current) {
-						return;
-					}
-					const branch = payload?.branch?.trim();
-					setGitBranch(branch && branch.length > 0 ? branch : "no-git");
-				})
-				.catch(() => {
-					if (requestId === workspaceSelectionRequestRef.current) {
-						setGitBranch("no-git");
-					}
-				});
-
 			// Refresh the merged history, stored, and current workspace catalog.
 			void refreshWorkspaces(nextWorkspace);
 
 			return true;
 		},
-		[refreshWorkspaces, setWorkspacePath],
+		[invalidateGitBranch, refreshWorkspaces, setWorkspacePath],
 	);
 
 	const selectChat = useCallback(async (): Promise<boolean> => {
 		workspaceSelectionRequestRef.current += 1;
+		invalidateGitBranch();
 		setWorkspacePath("");
-		setGitBranch("no-git");
 		return true;
-	}, [setWorkspacePath]);
+	}, [invalidateGitBranch, setWorkspacePath]);
 
 	const pickWorkspaceDirectory = useCallback(
 		async (initialPath?: string): Promise<string | null> => {
@@ -714,7 +713,27 @@ function ChatThreadPane({
 
 	useEffect(() => {
 		void refreshGitBranch();
-	}, [refreshGitBranch]);
+		if (!activeWorkspaceCwd) {
+			return;
+		}
+
+		const refreshVisibleBranch = () => {
+			if (document.visibilityState === "visible") {
+				void refreshGitBranch();
+			}
+		};
+		const intervalId = window.setInterval(
+			refreshVisibleBranch,
+			GIT_BRANCH_REFRESH_INTERVAL_MS,
+		);
+		window.addEventListener("focus", refreshVisibleBranch);
+		document.addEventListener("visibilitychange", refreshVisibleBranch);
+		return () => {
+			window.clearInterval(intervalId);
+			window.removeEventListener("focus", refreshVisibleBranch);
+			document.removeEventListener("visibilitychange", refreshVisibleBranch);
+		};
+	}, [activeWorkspaceCwd, refreshGitBranch]);
 
 	useEffect(() => {
 		setDismissedHistorySessionId(null);
diff --git a/apps/examples/desktop-app/webview/components/agent-header.test.tsx b/apps/examples/desktop-app/webview/components/agent-header.test.tsx
index e49c3b706c..be8fcbace8 100644
--- a/apps/examples/desktop-app/webview/components/agent-header.test.tsx
+++ b/apps/examples/desktop-app/webview/components/agent-header.test.tsx
@@ -37,6 +37,15 @@ describe("AgentHeader title editor", () => {
 		const titleButton = container.querySelector<HTMLButtonElement>(
 			'button[title="A title wide enough to expose resizing"]',
 		);
+		expect(container.querySelector("header")?.className).toContain(
+			"max-md:pl-28",
+		);
+		expect(container.querySelector("header")?.className).toContain(
+			"max-md:h-7",
+		);
+		expect(container.querySelector("header")?.className).toContain(
+			"md:group-data-[state=collapsed]/sidebar-wrapper:pl-7",
+		);
 		expect(titleButton).not.toBeNull();
 		vi.spyOn(
 			titleButton as HTMLButtonElement,
diff --git a/apps/examples/desktop-app/webview/components/agent-header.tsx b/apps/examples/desktop-app/webview/components/agent-header.tsx
index 5e70afb80a..6f09d66f1e 100644
--- a/apps/examples/desktop-app/webview/components/agent-header.tsx
+++ b/apps/examples/desktop-app/webview/components/agent-header.tsx
@@ -96,7 +96,7 @@ export function AgentHeader({
 	const triggerDeleteSession = () => onDeleteSession?.();
 
 	return (
-		<header className="flex h-12 items-center justify-between gap-2 px-4 max-md:pl-12">
+		<header className="flex h-12 items-center justify-between gap-2 px-4 max-md:h-7 max-md:pl-28 md:group-data-[state=collapsed]/sidebar-wrapper:pl-7">
 			{/* Left: thread title */}
 			<div className="flex min-w-0 flex-1 items-center gap-2">
 				<SessionStatus
@@ -189,24 +189,26 @@ export function AgentHeader({
 
 			{showSessionActions ? (
 				<div className="flex shrink-0 items-center gap-2">
-					<Button
-						aria-label={`Open diff: ${additions} additions, ${deletions} deletions`}
-						className={cn(
-							"flex items-center gap-1 rounded-md bg-secondary px-2 py-1 text-xs font-mono transition-colors",
-							hasChanges
-								? "hover:bg-secondary/80"
-								: "cursor-default opacity-60",
-						)}
-						disabled={!hasChanges}
-						id="diff-stats"
-						onClick={() => onOpenDiff?.()}
-						size="sm"
-						type="button"
-						variant="secondary"
-					>
-						<span className="text-chart-2">+{additions}</span>
-						<span className="text-destructive">-{deletions}</span>
-					</Button>
+					{additions !== 0 && (
+						<Button
+							aria-label={`Open diff: ${additions} additions, ${deletions} deletions`}
+							className={cn(
+								"flex items-center gap-1 rounded-md bg-secondary px-2 py-1 text-xs font-mono transition-colors",
+								hasChanges
+									? "hover:bg-secondary/80"
+									: "cursor-default opacity-60",
+							)}
+							disabled={!hasChanges}
+							id="diff-stats"
+							onClick={() => onOpenDiff?.()}
+							size="sm"
+							type="button"
+							variant="secondary"
+						>
+							<span className="text-chart-2">+{additions}</span>
+							<span className="text-destructive">-{deletions}</span>
+						</Button>
+					)}
 					<Button
 						aria-label="New session"
 						className="flex items-center gap-1 rounded-md text-sm text-muted-foreground hover:bg-accent hover:text-foreground transition-colors"
@@ -214,7 +216,7 @@ export function AgentHeader({
 						size="icon-sm"
 						variant="ghost"
 					>
-						<Plus />
+						<Plus className="size-4" />
 					</Button>
 				</div>
 			) : null}
diff --git a/apps/examples/desktop-app/webview/components/agent-sidebar.test.tsx b/apps/examples/desktop-app/webview/components/agent-sidebar.test.tsx
index 211a48e879..7acec5469a 100644
--- a/apps/examples/desktop-app/webview/components/agent-sidebar.test.tsx
+++ b/apps/examples/desktop-app/webview/components/agent-sidebar.test.tsx
@@ -93,6 +93,24 @@ function sessionIsVisible(title: string): boolean {
 	);
 }
 
+const signedInUser = {
+	id: "user-1",
+	email: "beatrix@cline.bot",
+	displayName: "Beatrix",
+	photoUrl: "",
+	createdAt: "2024-01-01T00:00:00Z",
+	updatedAt: "2024-01-01T00:00:00Z",
+	organizations: [
+		{
+			active: true,
+			memberId: "member-1",
+			name: "Cline Bot Inc",
+			organizationId: "org-1",
+			roles: ["admin"],
+		},
+	],
+};
+
 beforeEach(() => {
 	Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
 	window.localStorage.clear();
@@ -276,23 +294,7 @@ describe("AgentSidebar session organization", () => {
 	});
 
 	it("shows the signed-in account and active organization in the footer", async () => {
-		invoke.mockResolvedValue({
-			id: "user-1",
-			email: "beatrix@cline.bot",
-			displayName: "Beatrix",
-			photoUrl: "",
-			createdAt: "2024-01-01T00:00:00Z",
-			updatedAt: "2024-01-01T00:00:00Z",
-			organizations: [
-				{
-					active: true,
-					memberId: "member-1",
-					name: "Cline Bot Inc",
-					organizationId: "org-1",
-					roles: ["admin"],
-				},
-			],
-		});
+		invoke.mockResolvedValue(signedInUser);
 
 		await act(async () => {
 			root.render(
@@ -319,11 +321,26 @@ describe("AgentSidebar session organization", () => {
 		});
 		expect(container.textContent).not.toContain("Cline Desktop");
 		expect(container.textContent).not.toContain("Local");
+		const accountButton = container.querySelector(
+			'[aria-label="Account settings"]',
+		);
+		const settingsButton = container.querySelector('[aria-label="Settings"]');
+		expect(accountButton?.parentElement).toBe(settingsButton?.parentElement);
+		expect(settingsButton?.textContent).toBe("");
+		const accountName = [
+			...(accountButton?.querySelectorAll("span") ?? []),
+		].find((element) => element.textContent === "Beatrix");
+		const organizationName = [
+			...(accountButton?.querySelectorAll("span") ?? []),
+		].find((element) => element.textContent === "Cline Bot Inc");
+		expect(accountName?.nextElementSibling).toBe(organizationName);
+		expect(accountName?.parentElement?.className).toContain("flex-col");
 	});
 
 	it("opens the Account settings section when the footer account row is clicked", async () => {
 		const setView = vi.fn();
 		const onSettingsSectionChange = vi.fn();
+		invoke.mockResolvedValue(signedInUser);
 
 		await act(async () => {
 			root.render(
@@ -344,10 +361,11 @@ describe("AgentSidebar session organization", () => {
 			);
 		});
 
-		const accountButton = container.querySelector(
-			'[aria-label="Account settings"]',
-		);
-		expect(accountButton).not.toBeNull();
+		const accountButton = await vi.waitFor(() => {
+			const button = container.querySelector('[aria-label="Account settings"]');
+			expect(button).not.toBeNull();
+			return button;
+		});
 		await click(accountButton as Element);
 
 		expect(onSettingsSectionChange).toHaveBeenCalledWith("Account");
@@ -541,9 +559,61 @@ describe("AgentSidebar session organization", () => {
 
 		expect(container.querySelector('[aria-label="Cline home"]')).not.toBeNull();
 		expect(container.querySelector('[aria-label="New Session"]')).toBeNull();
+		expect(
+			container.querySelector('[aria-label="Expand sidebar"]')?.className,
+		).toContain("mt-auto");
 	});
 
-	it("falls back to a signed-out footer without account data", async () => {
+	it("uses a compact overlay-friendly width in collapsed settings", async () => {
+		await act(async () => {
+			root.render(
+				<AccountProvider>
+					<SidebarProvider defaultOpen={false}>
+						<AgentSidebar
+							activeSessionId={null}
+							onHome={vi.fn()}
+							onNewThread={vi.fn()}
+							onSettingsSectionChange={vi.fn()}
+							sessionHistory={makeSessionHistory([], vi.fn())}
+							setView={vi.fn()}
+							settingsSection="Account"
+							view="settings"
+						/>
+					</SidebarProvider>
+				</AccountProvider>,
+			);
+		});
+
+		const sidebarWrapper = container.querySelector<HTMLElement>(
+			'[data-slot="sidebar-wrapper"]',
+		);
+		expect(sidebarWrapper?.style.getPropertyValue("--sidebar-width-icon")).toBe(
+			"3rem",
+		);
+		expect(sidebarWrapper?.dataset.state).toBe("collapsed");
+		expect(
+			container.querySelector('[aria-label="Settings sections"]'),
+		).not.toBeNull();
+		const leftAlignedButtons = [
+			"Cline home",
+			"General",
+			"Account",
+			"Expand sidebar",
+			"Settings",
+		];
+		for (const label of leftAlignedButtons) {
+			const button = container.querySelector(`[aria-label="${label}"]`);
+			expect(button?.className).not.toContain("mx-auto");
+		}
+		expect(
+			container.querySelector('[aria-label="Expand sidebar"]')?.className,
+		).toContain("mt-auto");
+		expect(
+			container.querySelector('[aria-label="Settings sections"]')?.className,
+		).toContain("items-start");
+	});
+
+	it("shows only the labeled Settings button when signed out", async () => {
 		await act(async () => {
 			root.render(
 				<AccountProvider>
@@ -563,9 +633,14 @@ describe("AgentSidebar session organization", () => {
 			);
 		});
 
-		await vi.waitFor(() => {
-			expect(container.textContent).toContain("Cline Desktop");
-		});
-		expect(container.textContent).not.toContain("Local");
+		await vi.waitFor(() =>
+			expect(container.querySelector('[aria-label="Settings"]')).not.toBeNull(),
+		);
+		expect(
+			container.querySelector('[aria-label="Account settings"]'),
+		).toBeNull();
+		expect(
+			container.querySelector('[aria-label="Settings"]')?.textContent,
+		).toContain("Settings");
 	});
 });
diff --git a/apps/examples/desktop-app/webview/components/agent-sidebar.tsx b/apps/examples/desktop-app/webview/components/agent-sidebar.tsx
index ab244e0297..1b5990a727 100644
--- a/apps/examples/desktop-app/webview/components/agent-sidebar.tsx
+++ b/apps/examples/desktop-app/webview/components/agent-sidebar.tsx
@@ -155,7 +155,7 @@ function SettingsSectionNavigation({
 					"min-w-0 justify-start",
 					activeSection === section &&
 						"bg-sidebar-accent text-sidebar-accent-foreground",
-					collapsed && "mx-auto size-9 justify-center px-0",
+					collapsed && "size-9 justify-center px-0",
 				)}
 				key={section}
 				onClick={() => onSelect(section)}
@@ -174,7 +174,7 @@ function SettingsSectionNavigation({
 			aria-label="Settings sections"
 			className={cn(
 				"flex h-full min-h-0 flex-col gap-0.5 overflow-y-auto",
-				collapsed ? "w-full items-center" : "w-full",
+				collapsed ? "w-full items-start" : "w-full",
 			)}
 		>
 			{!collapsed ? (
@@ -598,12 +598,15 @@ export function AgentSidebar({
 						<HoverCardTrigger asChild>
 							<button
 								aria-label="Cline home"
-								className="flex size-8 shrink-0 items-center justify-center rounded-md text-sidebar-foreground transition-colors hover:bg-sidebar-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sidebar-ring"
+								className={cn(
+									"flex size-8 shrink-0 items-center justify-center rounded-md text-sidebar-foreground transition-colors hover:bg-sidebar-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sidebar-ring",
+									isCollapsed && "size-9",
+								)}
 								onClick={openHome}
 								title="Home"
 								type="button"
 							>
-								<ClineLogo className="size-6" />
+								<ClineLogo className="size-5" />
 							</button>
 						</HoverCardTrigger>
 						<HoverCardContent align="start" className="w-64 p-3" side="bottom">
@@ -649,7 +652,7 @@ export function AgentSidebar({
 				</div>
 
 				{isCollapsed ? (
-					<div className="mt-2 flex min-h-0 flex-1 flex-col items-center gap-1 px-1.5">
+					<div className="mt-2 flex min-h-0 flex-1 flex-col items-start gap-1 px-1.5">
 						{view === "settings" ? (
 							<SettingsSectionNavigation
 								activeSection={settingsSection}
@@ -659,7 +662,7 @@ export function AgentSidebar({
 						) : null}
 						<Button
 							aria-label="Expand sidebar"
-							className="mx-auto size-9 justify-center px-0"
+							className="mt-auto size-9 justify-center px-0"
 							onClick={() => setOpen(true)}
 							title="Expand sidebar"
 							type="button"
@@ -829,49 +832,74 @@ export function AgentSidebar({
 					</>
 				)}
 
-				<div className="shrink-0 border-t border-sidebar-border/70 px-2 py-3">
-					{view !== "settings" && (
+				<div
+					className={cn(
+						"shrink-0 border-t border-sidebar-border/70 py-3",
+						isCollapsed ? "px-1.5" : "px-2",
+					)}
+				>
+					{user && !isCollapsed ? (
+						<div className="flex min-w-0 items-center gap-2">
+							<button
+								aria-label="Account settings"
+								className={cn(
+									"flex min-w-0 flex-1 items-center gap-2 rounded-md px-3 py-2 text-left text-sidebar-foreground transition-colors hover:bg-sidebar-accent/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sidebar-ring",
+									view === "settings" &&
+										settingsSection === "Account" &&
+										"bg-sidebar-accent text-sidebar-accent-foreground",
+								)}
+								onClick={() => openSettingsSection("Account")}
+								title={user.email || undefined}
+								type="button"
+							>
+								<span className="flex size-4 shrink-0 items-center justify-center rounded-full bg-primary text-[11px] font-semibold text-primary-foreground">
+									{accountInitial}
+								</span>
+								<span className="flex min-w-0 flex-col leading-tight">
+									<span className="truncate text-sm font-medium">
+										{accountName}
+									</span>
+									{accountScope ? (
+										<span className="truncate text-[11px] text-muted-foreground">
+											{accountScope}
+										</span>
+									) : null}
+								</span>
+							</button>
+							<Button
+								aria-label="Settings"
+								className={cn(
+									"size-9 shrink-0 justify-center px-0",
+									view === "settings" &&
+										settingsSection !== "Account" &&
+										"bg-sidebar-accent text-sidebar-accent-foreground",
+								)}
+								onClick={openSettings}
+								title="Settings"
+								type="button"
+								variant="sidebarItem"
+							>
+								<Settings className="size-4" />
+							</Button>
+						</div>
+					) : (
 						<Button
 							aria-label="Settings"
-							type="button"
-							variant="sidebarItem"
 							className={cn(
 								"min-w-0 justify-start",
-								isCollapsed && "mx-auto size-9 justify-center px-0",
+								isCollapsed && "size-9 justify-center px-0",
+								view === "settings" &&
+									"bg-sidebar-accent text-sidebar-accent-foreground",
 							)}
 							onClick={openSettings}
 							title="Settings"
+							type="button"
+							variant="sidebarItem"
 						>
 							<Settings className="size-4" />
 							{!isCollapsed ? "Settings" : null}
 						</Button>
 					)}
-					{!isCollapsed ? (
-						<button
-							aria-label="Account settings"
-							className={cn(
-								"flex w-full items-center gap-2 rounded-md px-3 py-2 text-left text-sidebar-foreground transition-colors hover:bg-sidebar-accent/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sidebar-ring",
-								view === "settings" &&
-									settingsSection === "Account" &&
-									"bg-sidebar-accent text-sidebar-accent-foreground",
-							)}
-							onClick={() => openSettingsSection("Account")}
-							title={user?.email || undefined}
-							type="button"
-						>
-							<span className="min-w-0 flex gap-2 items-center">
-								<span className="flex size-4 shrink-0 items-center justify-center rounded-full bg-primary text-[11px] font-semibold text-primary-foreground">
-									{accountInitial}
-								</span>
-								<span className="block truncate text-sm font-medium">
-									{accountName}
-									<span className="pl-1 truncate text-[11px] text-muted-foreground">
-										{accountScope}
-									</span>
-								</span>
-							</span>
-						</button>
-					) : null}
 				</div>
 			</div>
 			<AlertDialog
diff --git a/apps/examples/desktop-app/webview/components/ui/sidebar.tsx b/apps/examples/desktop-app/webview/components/ui/sidebar.tsx
index c88e00a5a3..750826114f 100644
--- a/apps/examples/desktop-app/webview/components/ui/sidebar.tsx
+++ b/apps/examples/desktop-app/webview/components/ui/sidebar.tsx
@@ -28,9 +28,9 @@ const SIDEBAR_COOKIE_NAME = "sidebar_state";
 const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
 const SIDEBAR_WIDTH = 240;
 const SIDEBAR_WIDTH_MOBILE = "18rem";
-// The collapsed desktop sidebar still owns the macOS title-bar controls when
-// the native title bar overlays the webview.
-const SIDEBAR_WIDTH_ICON = "4.5rem";
+// macOS title-bar controls overlay the webview, so the collapsed rail only
+// needs to reserve enough width for its own controls.
+const SIDEBAR_WIDTH_ICON = "3rem";
 const SIDEBAR_KEYBOARD_SHORTCUT = "b";
 const SIDEBAR_WIDTH_COOKIE_NAME = "sidebar_width";
 const SIDEBAR_MIN_WIDTH = 224;
@@ -215,6 +215,7 @@ function SidebarProvider({
 			<TooltipProvider delayDuration={0}>
 				<div
 					data-slot="sidebar-wrapper"
+					data-state={state}
 					style={
 						{
 							"--sidebar-width": `${desktopWidth}px`,
@@ -357,7 +358,7 @@ function SidebarTrigger({
 			}}
 			{...props}
 		>
-			<PanelLeftIcon />
+			<PanelLeftIcon className="size-3.5" />
 			<span className="sr-only">Toggle Sidebar</span>
 		</Button>
 	);
diff --git a/apps/examples/desktop-app/webview/components/views/chat/chat-input-bar.test.tsx b/apps/examples/desktop-app/webview/components/views/chat/chat-input-bar.test.tsx
index 29405cdc5d..0774153891 100644
--- a/apps/examples/desktop-app/webview/components/views/chat/chat-input-bar.test.tsx
+++ b/apps/examples/desktop-app/webview/components/views/chat/chat-input-bar.test.tsx
@@ -106,20 +106,92 @@ describe("ChatInputBar", () => {
 			);
 			expect(trigger?.textContent).toContain("High");
 			expect(trigger?.disabled).toBe(true);
+			expect(
+				trigger?.querySelector('[data-slot="select-value"]')?.parentElement
+					?.className,
+			).toContain("max-[560px]:sr-only");
 		});
+		const compactModelTrigger = container.querySelector<HTMLButtonElement>(
+			'[aria-label="Model and provider"]',
+		);
+		expect(compactModelTrigger?.disabled).toBe(false);
+		await act(async () => compactModelTrigger?.click());
+		expect(compactModelTrigger?.getAttribute("aria-expanded")).toBe("true");
+		expect(
+			container.querySelectorAll<HTMLButtonElement>('[aria-label="Provider"]'),
+		).toHaveLength(2);
+		expect(
+			container.querySelectorAll<HTMLButtonElement>('[aria-label="Model"]'),
+		).toHaveLength(2);
+		await act(async () =>
+			container
+				.querySelector<HTMLButtonElement>('[aria-label="Close model selector"]')
+				?.click(),
+		);
+		expect(compactModelTrigger?.getAttribute("aria-expanded")).toBe("false");
+
+		const promptInput = container.querySelector<HTMLTextAreaElement>(
+			'textarea[role="combobox"]',
+		);
+		expect(promptInput?.className).toContain("overflow-y-hidden");
+		expect(promptInput?.className).not.toContain("overflow-y-auto");
+
+		await act(async () => {
+			if (!promptInput) return;
+			const setValue = Object.getOwnPropertyDescriptor(
+				HTMLTextAreaElement.prototype,
+				"value",
+			)?.set;
+			setValue?.call(promptInput, "first line\nsecond line");
+			promptInput.dispatchEvent(new Event("input", { bubbles: true }));
+		});
+		expect(promptInput?.className).toContain("overflow-y-auto");
+
 		await render("starting");
 		expect(container.querySelector('[aria-label="Stop agent"]')).toBeNull();
 		await render("running");
 		expect(container.querySelector('[aria-label="Stop agent"]')).not.toBeNull();
 
 		expect(onReasoningChange).not.toHaveBeenCalled();
-		const workspaceTrigger = container.querySelector("#git-branch-btn");
-		expect(workspaceTrigger?.parentElement?.parentElement?.className).toContain(
-			"overflow-visible",
+		const providerTrigger = container.querySelector<HTMLButtonElement>(
+			'[aria-label="Provider"]',
 		);
+		expect(providerTrigger?.parentElement?.parentElement?.className).toContain(
+			"max-[560px]:hidden",
+		);
+		expect(compactModelTrigger?.className).toContain("max-[560px]:inline-flex");
+		expect(compactModelTrigger?.querySelector(".lucide-cpu")).not.toBeNull();
+		const workspaceTrigger =
+			container.querySelector<HTMLButtonElement>("#git-branch-btn");
+		const attachTrigger = container.querySelector<HTMLButtonElement>(
+			'[aria-label="Attach files"]',
+		);
+		const thinkingTrigger = container.querySelector<HTMLButtonElement>(
+			'[aria-label="Thinking level"]',
+		);
+		const leftControls = attachTrigger?.parentElement;
+		expect(leftControls?.className).toContain("max-[560px]:flex-nowrap");
+		expect(leftControls?.contains(compactModelTrigger ?? null)).toBe(true);
+		expect(leftControls?.contains(thinkingTrigger ?? null)).toBe(true);
+
+		expect(workspaceTrigger?.disabled).toBe(true);
+		expect(workspaceTrigger?.className).toContain("max-[560px]:size-7");
+		expect(workspaceTrigger?.textContent).toContain("cline");
+		expect(workspaceTrigger?.textContent).toContain("main");
+		const workspaceFooterSlot =
+			workspaceTrigger?.parentElement?.parentElement?.parentElement;
+		expect(workspaceFooterSlot?.className).toContain("overflow-visible");
+		expect(workspaceFooterSlot?.className).not.toContain("truncate");
+		expect(workspaceFooterSlot?.className).not.toContain("hidden");
+		expect(workspaceFooterSlot?.className).not.toContain("max-w-");
+		const rightControls = workspaceFooterSlot?.parentElement;
+		expect(rightControls?.contains(workspaceTrigger ?? null)).toBe(true);
 		expect(
-			workspaceTrigger?.parentElement?.parentElement?.className,
-		).not.toContain("truncate");
+			rightControls?.contains(
+				container.querySelector('[aria-label="Send message"]'),
+			),
+		).toBe(true);
+		expect(leftControls?.parentElement).toBe(rightControls?.parentElement);
 	});
 
 	it("selects High from the supported model thinking menu", async () => {
diff --git a/apps/examples/desktop-app/webview/components/views/chat/chat-input-bar.tsx b/apps/examples/desktop-app/webview/components/views/chat/chat-input-bar.tsx
index 3977103d5e..a51de38a8c 100644
--- a/apps/examples/desktop-app/webview/components/views/chat/chat-input-bar.tsx
+++ b/apps/examples/desktop-app/webview/components/views/chat/chat-input-bar.tsx
@@ -10,6 +10,7 @@ import {
 	CircleStop,
 	Clock3,
 	Coins,
+	Cpu,
 	Paperclip,
 	Pencil,
 	Trash2,
@@ -965,7 +966,12 @@ export function ChatInputBar({
 							}
 							aria-expanded={slashOpen || mentionOpen}
 							aria-haspopup="listbox"
-							className="max-h-60 min-h-5 flex-1 resize-none overflow-y-auto bg-transparent text-sm leading-5 text-foreground placeholder:text-muted-foreground outline-none"
+							className={cn(
+								"max-h-60 min-h-5 flex-1 resize-none bg-transparent text-sm leading-5 text-foreground placeholder:text-muted-foreground outline-none",
+								promptInput.includes("\n")
+									? "overflow-y-auto"
+									: "overflow-y-hidden",
+							)}
 							onChange={(e) => {
 								setPromptInput(e.target.value);
 								setCursorIndex(
@@ -1094,11 +1100,11 @@ export function ChatInputBar({
 			</div>
 
 			{/* Composer settings and submit */}
-			<div className="flex min-w-0 flex-wrap items-center justify-between gap-x-3 gap-y-2 border-t border-border px-3 py-2 text-[11px] text-muted-foreground max-[560px]:grid max-[560px]:grid-cols-[auto_auto_minmax(0,1fr)_auto] max-[560px]:items-center">
-				<div className="flex min-w-0 flex-1 flex-wrap items-center gap-2 max-[560px]:contents">
+			<div className="flex min-w-0 items-center justify-between gap-x-3 gap-y-2 border-t border-border px-3 py-2 text-[11px] text-muted-foreground">
+				<div className="flex min-w-0 flex-auto flex-wrap items-center gap-2 max-[560px]:flex-nowrap">
 					<button
 						aria-label="Attach files"
-						className="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground max-[560px]:col-start-1 max-[560px]:row-start-1"
+						className="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
 						onClick={() => fileInputRef.current?.click()}
 						type="button"
 					>
@@ -1116,7 +1122,7 @@ export function ChatInputBar({
 						ref={fileInputRef}
 						type="file"
 					/>
-					<div className="hidden flex shrink-0 items-center rounded-md bg-muted p-0.5 max-[560px]:col-start-2 max-[560px]:row-start-1">
+					<div className="hidden flex shrink-0 items-center rounded-md bg-muted p-0.5">
 						<button
 							aria-pressed={mode === "plan"}
 							className={cn(
@@ -1148,7 +1154,7 @@ export function ChatInputBar({
 							Act
 						</button>
 					</div>
-					<div className="min-w-0 shrink-0 max-[560px]:col-start-3 max-[560px]:col-end-5 max-[560px]:row-start-1">
+					<div className="min-w-0 shrink-0">
 						<ModelSelector
 							isBusy={isBusy}
 							model={model}
@@ -1167,7 +1173,7 @@ export function ChatInputBar({
 					>
 						<SelectTrigger
 							aria-label="Thinking level"
-							className="h-7 gap-1.5 border-0 bg-muted px-2 text-[11px] shadow-none data-[size=sm]:h-7 [&>svg:last-child]:hidden max-[560px]:col-span-2 max-[560px]:col-start-1 max-[560px]:row-start-2"
+							className="h-7 gap-1.5 border-0 bg-muted px-2 text-[11px] shadow-none data-[size=sm]:h-7 [&>svg:last-child]:hidden max-[560px]:size-7 max-[560px]:justify-center max-[560px]:p-0"
 							size="sm"
 							title={
 								modelSupportsReasoning === false
@@ -1176,7 +1182,9 @@ export function ChatInputBar({
 							}
 						>
 							<Brain className="size-3" />
-							<SelectValue>{effortLabel}</SelectValue>
+							<span className="max-[560px]:sr-only">
+								<SelectValue>{effortLabel}</SelectValue>
+							</span>
 						</SelectTrigger>
 						<SelectContent align="start">
 							{EFFORT_LEVELS.map((option) => (
@@ -1197,20 +1205,23 @@ export function ChatInputBar({
 					) : null}
 				</div>
 
-				<div className="ml-auto flex min-w-0 shrink-0 items-center gap-2 max-[560px]:contents">
-					<div className="hidden max-w-48 overflow-visible max-[720px]:max-w-36 max-[560px]:col-start-3 max-[560px]:row-start-2">
-						<WorkspaceSelector
-							currentBranch={gitBranch}
-							onListGitBranches={onListGitBranches}
-							onRefreshWorkspaces={onRefreshWorkspaces}
-							onPickWorkspaceDirectory={onPickWorkspaceDirectory}
-							onSwitchGitBranch={onSwitchGitBranch}
-							onSwitchWorkspace={onSwitchWorkspace}
-							workspaces={workspaces}
-							workspaceRoot={workspaceRoot}
-						/>
-					</div>
-					<div className="flex shrink-0 items-center gap-2 max-[560px]:col-start-4 max-[560px]:row-start-2">
+				<div className="ml-auto flex min-w-0 items-center gap-2 max-[560px]:shrink-0">
+					{variant === "conversation" ? (
+						<div className="min-w-0 overflow-visible">
+							<WorkspaceSelector
+								currentBranch={gitBranch}
+								disabled
+								onListGitBranches={onListGitBranches}
+								onRefreshWorkspaces={onRefreshWorkspaces}
+								onPickWorkspaceDirectory={onPickWorkspaceDirectory}
+								onSwitchGitBranch={onSwitchGitBranch}
+								onSwitchWorkspace={onSwitchWorkspace}
+								workspaces={workspaces}
+								workspaceRoot={workspaceRoot}
+							/>
+						</div>
+					) : null}
+					<div className="flex shrink-0 items-center gap-2">
 						{canAbort && (
 							<button
 								aria-label="Stop agent"
@@ -1278,6 +1289,7 @@ const ModelSelector = memo(function ModelSelector({
 	const [lastSelection, setLastSelection] = useState(() =>
 		readModelSelectionStorageFromWindow(),
 	);
+	const [mobileOpen, setMobileOpen] = useState(false);
 	const visibleProviderModels = useMemo(() => {
 		const next: Record<string, string[]> = {};
 		for (const providerId of enabledProviderIds) {
@@ -1485,47 +1497,115 @@ const ModelSelector = memo(function ModelSelector({
 		reasoningCapabilitySource,
 	]);
 
+	const handleProviderSelect = useCallback(
+		(value: string) => {
+			onProviderChange(value);
+			const rememberedModel = lastSelection.lastModelByProvider[value];
+			const providerModelIds = visibleProviderModels[value] ?? [];
+			if (
+				rememberedModel &&
+				providerModelIds.includes(rememberedModel) &&
+				rememberedModel !== model
+			) {
+				onModelChange(rememberedModel);
+				return;
+			}
+			const firstModel = providerModelIds[0];
+			if (firstModel && firstModel !== model) {
+				onModelChange(firstModel);
+			}
+		},
+		[
+			lastSelection.lastModelByProvider,
+			model,
+			onModelChange,
+			onProviderChange,
+			visibleProviderModels,
+		],
+	);
+	const renderProviderSelect = (triggerClassName: string) => (
+		<SearchableSelect
+			ariaLabel="Provider"
+			disabled={isBusy || providers.length === 0}
+			emptyLabel="No providers found."
+			items={providers}
+			onSelect={handleProviderSelect}
+			placeholder="Provider"
+			searchPlaceholder="Search providers"
+			triggerClassName={triggerClassName}
+			value={resolvedProvider}
+		/>
+	);
+	const renderModelSelect = (
+		triggerClassName: string,
+		closeMobileMenu = false,
+	) => (
+		<SearchableSelect
+			ariaLabel="Model"
+			disabled={isBusy || modelsForProvider.length === 0}
+			emptyLabel="No models found."
+			items={modelsForProvider}
+			onSelect={(value) => {
+				onModelChange(value);
+				if (closeMobileMenu) setMobileOpen(false);
+			}}
+			placeholder="Model"
+			searchPlaceholder="Search models"
+			triggerClassName={triggerClassName}
+			value={resolvedModel}
+		/>
+	);
+
 	return (
-		<div className="flex min-w-0 shrink-0 items-center gap-0.5 text-[11px]">
-			<SearchableSelect
-				ariaLabel="Provider"
+		<div className="relative min-w-0 shrink-0 text-[11px]">
+			<button
+				aria-expanded={mobileOpen}
+				aria-haspopup="dialog"
+				aria-label="Model and provider"
+				className="hidden size-7 items-center justify-center rounded-md text-foreground transition-colors hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 max-[560px]:inline-flex"
 				disabled={isBusy || providers.length === 0}
-				emptyLabel="No providers found."
-				items={providers}
-				onSelect={(value) => {
-					onProviderChange(value);
-					const rememberedModel = lastSelection.lastModelByProvider[value];
-					const providerModelIds = visibleProviderModels[value] ?? [];
-					if (
-						rememberedModel &&
-						providerModelIds.includes(rememberedModel) &&
-						rememberedModel !== model
-					) {
-						onModelChange(rememberedModel);
-						return;
-					}
-					const firstModel = providerModelIds[0];
-					if (firstModel && firstModel !== model) {
-						onModelChange(firstModel);
-					}
-				}}
-				placeholder="Provider"
-				searchPlaceholder="Search providers"
-				triggerClassName="max-w-28 text-[11px]"
-				value={resolvedProvider}
-			/>
-			<span className="text-muted-foreground/50">/</span>
-			<SearchableSelect
-				ariaLabel="Model"
-				disabled={isBusy || modelsForProvider.length === 0}
-				emptyLabel="No models found."
-				items={modelsForProvider}
-				onSelect={(value) => onModelChange(value)}
-				placeholder="Model"
-				searchPlaceholder="Search models"
-				triggerClassName="max-w-52 text-[11px]"
-				value={resolvedModel}
-			/>
+				onClick={() => setMobileOpen((current) => !current)}
+				title={`${resolvedProvider || "Provider"} / ${resolvedModel || "Model"}`}
+				type="button"
+			>
+				<Cpu className="size-3.5" />
+			</button>
+
+			{mobileOpen ? (
+				<>
+					<button
+						aria-label="Close model selector"
+						className="fixed inset-0 z-40 hidden cursor-default opacity-0 max-[560px]:block"
+						onClick={() => setMobileOpen(false)}
+						type="button"
+					/>
+					<div className="absolute bottom-full left-0 z-50 mb-2 hidden w-64 max-w-[calc(100vw-2rem)] space-y-3 rounded-lg border border-border bg-popover p-3 shadow-xl max-[560px]:block">
+						<div className="space-y-1">
+							<div className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
+								Provider
+							</div>
+							{renderProviderSelect(
+								"w-full max-w-none justify-between text-xs",
+							)}
+						</div>
+						<div className="space-y-1">
+							<div className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
+								Model
+							</div>
+							{renderModelSelect(
+								"w-full max-w-none justify-between text-xs",
+								true,
+							)}
+						</div>
+					</div>
+				</>
+			) : null}
+
+			<div className="flex min-w-0 items-center gap-0.5 max-[560px]:hidden">
+				{renderProviderSelect("max-w-28 text-[11px]")}
+				<span className="text-muted-foreground/50">/</span>
+				{renderModelSelect("max-w-52 text-[11px]")}
+			</div>
 		</div>
 	);
 });
diff --git a/apps/examples/desktop-app/webview/components/views/chat/workspace-selector.test.tsx b/apps/examples/desktop-app/webview/components/views/chat/workspace-selector.test.tsx
index 6cc87723b0..096f6d3fcb 100644
--- a/apps/examples/desktop-app/webview/components/views/chat/workspace-selector.test.tsx
+++ b/apps/examples/desktop-app/webview/components/views/chat/workspace-selector.test.tsx
@@ -39,6 +39,54 @@ function buttonWithText(text: string): HTMLButtonElement {
 }
 
 describe("WorkspaceSelector", () => {
+	it("shows the current workspace and follows branch changes while disabled", async () => {
+		const onListGitBranches = vi.fn(async () => ({
+			current: "main",
+			branches: ["main", "feature/review"],
+		}));
+		const render = async (currentBranch: string) => {
+			await act(async () => {
+				root.render(
+					<WorkspaceSelector
+						currentBranch={currentBranch}
+						disabled
+						onListGitBranches={onListGitBranches}
+						onPickWorkspaceDirectory={vi.fn(async () => null)}
+						onRefreshWorkspaces={vi.fn(async () => undefined)}
+						onSwitchGitBranch={vi.fn(async () => true)}
+						onSwitchWorkspace={vi.fn(async () => true)}
+						workspaceRoot="/workspace/one"
+						workspaces={["/workspace/one"]}
+					/>,
+				);
+			});
+		};
+
+		await render("main");
+		const trigger =
+			container.querySelector<HTMLButtonElement>("#git-branch-btn");
+		expect(trigger?.disabled).toBe(true);
+		expect(trigger?.textContent).toContain("one");
+		expect(trigger?.textContent).toContain("main");
+		const branchLabel = trigger?.querySelector("span:last-child");
+		expect(branchLabel?.className).toContain("min-w-0");
+		expect(branchLabel?.className).toContain("truncate");
+		expect(branchLabel?.className).toContain("max-[560px]:sr-only");
+		expect(branchLabel?.className).not.toContain("max-w-");
+		expect(trigger?.className).toContain("max-[560px]:size-7");
+		expect(trigger?.parentElement?.dataset.slot).toBe("tooltip-trigger");
+		expect(trigger?.parentElement?.className).toContain(
+			"[&>button]:pointer-events-none",
+		);
+
+		await click(trigger as Element);
+		expect(onListGitBranches).not.toHaveBeenCalled();
+		expect(container.querySelector('input[placeholder*="Search"]')).toBeNull();
+
+		await render("feature/review");
+		expect(trigger?.textContent).toContain("feature/review");
+	});
+
 	it("switches both workspace and branch choices from the opened menu", async () => {
 		const onSwitchWorkspace = vi.fn(async () => true);
 		const onSwitchGitBranch = vi.fn(async () => true);
diff --git a/apps/examples/desktop-app/webview/components/views/chat/workspace-selector.tsx b/apps/examples/desktop-app/webview/components/views/chat/workspace-selector.tsx
index ef4a231801..13a6966fa7 100644
--- a/apps/examples/desktop-app/webview/components/views/chat/workspace-selector.tsx
+++ b/apps/examples/desktop-app/webview/components/views/chat/workspace-selector.tsx
@@ -5,6 +5,11 @@ import { Check, FolderCode, GitBranch, Plus, Search } from "lucide-react";
 import { useMemo, useState } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipTrigger,
+} from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 import { normalizeWorkspacePath } from "@/lib/workspace-paths";
 
@@ -31,6 +36,7 @@ export function WorkspaceSelector({
 	onSwitchWorkspace,
 	onPickWorkspaceDirectory,
 	onCreateGitBranch,
+	disabled = false,
 }: {
 	currentBranch: string;
 	workspaceRoot: string;
@@ -41,6 +47,7 @@ export function WorkspaceSelector({
 	onSwitchWorkspace: (workspacePath: string) => Promise<boolean>;
 	onPickWorkspaceDirectory?: (initialPath?: string) => Promise<string | null>;
 	onCreateGitBranch?: (branchName: string) => Promise<boolean>;
+	disabled?: boolean;
 }) {
 	const [open, setOpen] = useState(false);
 	const [search, setSearch] = useState("");
@@ -71,6 +78,9 @@ export function WorkspaceSelector({
 	);
 
 	const openMenu = async () => {
+		if (disabled) {
+			return;
+		}
 		setOpen(true);
 		setSearch("");
 		setShowWorkspacePathInput(false);
@@ -194,30 +204,51 @@ export function WorkspaceSelector({
 	);
 
 	return (
-		<div className="relative">
-			<Button
-				variant="ghost"
-				className="flex items-center gap-1 h-auto px-1 py-0.5 hover:text-foreground transition-colors"
-				disabled={switching}
-				id="git-branch-btn"
-				onClick={() => {
-					if (open) {
-						setOpen(false);
-						setSearch("");
-						setShowCreateBranch(false);
-						setNewBranchName("");
-						return;
-					}
-					void openMenu();
-				}}
-			>
-				<GitBranch className="size-3" />
-				<span className="max-w-20 truncate">{workspaceName}</span>
-				<span className="text-muted-foreground/60">/</span>
-				<span className="max-w-20 truncate">{currentBranch}</span>
-			</Button>
+		<div className="relative min-w-0 max-w-full">
+			<Tooltip>
+				<TooltipTrigger asChild>
+					<span
+						className={cn(
+							"inline-flex max-w-full",
+							(disabled || switching) && "[&>button]:pointer-events-none",
+						)}
+					>
+						<Button
+							variant="ghost"
+							aria-label={`Workspace ${workspaceName}, branch ${currentBranch}`}
+							className="flex max-w-full min-w-0 items-center gap-1 h-auto px-1 py-0.5 hover:text-foreground transition-colors max-[560px]:size-7 max-[560px]:justify-center max-[560px]:p-0"
+							disabled={disabled || switching}
+							id="git-branch-btn"
+							onClick={() => {
+								if (open) {
+									setOpen(false);
+									setSearch("");
+									setShowCreateBranch(false);
+									setNewBranchName("");
+									return;
+								}
+								void openMenu();
+							}}
+						>
+							<GitBranch className="size-3" />
+							<span className="max-w-20 shrink-0 truncate max-[560px]:sr-only">
+								{workspaceName}
+							</span>
+							<span className="shrink-0 text-muted-foreground/60 max-[560px]:sr-only">
+								/
+							</span>
+							<span className="min-w-0 truncate max-[560px]:sr-only">
+								{currentBranch}
+							</span>
+						</Button>
+					</span>
+				</TooltipTrigger>
+				<TooltipContent align="end" side="top" sideOffset={6}>
+					{workspaceRoot || workspaceName} / {currentBranch}
+				</TooltipContent>
+			</Tooltip>
 
-			{open && (
+			{open && !disabled && (
 				<>
 					<Button
 						variant="ghost"
diff --git a/apps/examples/desktop-app/webview/components/views/settings/settings-view.tsx b/apps/examples/desktop-app/webview/components/views/settings/settings-view.tsx
index e3148429db..3d8d6264ee 100644
--- a/apps/examples/desktop-app/webview/components/views/settings/settings-view.tsx
+++ b/apps/examples/desktop-app/webview/components/views/settings/settings-view.tsx
@@ -6,6 +6,7 @@ import {
 	APP_ICONS,
 	type AppIconId,
 	appIconAssetPath,
+	DEFAULT_APP_ICON,
 	readStoredAppIcon,
 	setStoredAppIcon,
 } from "@/lib/app-icon";
@@ -494,7 +495,7 @@ function GeneralSettingsContent() {
 		return readStoredHubAccent();
 	});
 	const [appIcon, setAppIcon] = useState<AppIconId>(() => {
-		if (typeof window === "undefined") return "classic";
+		if (typeof window === "undefined") return DEFAULT_APP_ICON;
 		return readStoredAppIcon();
 	});
 	const [appIconError, setAppIconError] = useState<string | null>(null);
diff --git a/apps/examples/desktop-app/webview/lib/app-icon.test.ts b/apps/examples/desktop-app/webview/lib/app-icon.test.ts
index b88a50a8a6..1a21e5c2b4 100644
--- a/apps/examples/desktop-app/webview/lib/app-icon.test.ts
+++ b/apps/examples/desktop-app/webview/lib/app-icon.test.ts
@@ -29,7 +29,8 @@ afterEach(() => {
 });
 
 describe("app icon", () => {
-	it("defaults to classic and validates stored values", () => {
+	it("defaults to the bundled midnight icon and validates stored values", () => {
+		expect(DEFAULT_APP_ICON).toBe("midnight");
 		expect(readStoredAppIcon()).toBe(DEFAULT_APP_ICON);
 		window.localStorage.setItem(APP_ICON_STORAGE_KEY, "bogus");
 		expect(readStoredAppIcon()).toBe(DEFAULT_APP_ICON);
@@ -55,14 +56,14 @@ describe("app icon", () => {
 		expect(invoke).toHaveBeenCalledWith("set_app_icon", { icon: "midnight" });
 	});
 
-	it("re-applies only non-default choices at boot", async () => {
+	it("re-applies only non-bundled choices at boot", async () => {
 		isTauriAvailable.mockReturnValue(true);
 		invoke.mockResolvedValue(true);
 		await syncAppIcon();
 		expect(invoke).not.toHaveBeenCalled();
 
-		window.localStorage.setItem(APP_ICON_STORAGE_KEY, "sunrise");
+		window.localStorage.setItem(APP_ICON_STORAGE_KEY, "classic");
 		await syncAppIcon();
-		expect(invoke).toHaveBeenCalledWith("set_app_icon", { icon: "sunrise" });
+		expect(invoke).toHaveBeenCalledWith("set_app_icon", { icon: "classic" });
 	});
 });
diff --git a/apps/examples/desktop-app/webview/lib/app-icon.ts b/apps/examples/desktop-app/webview/lib/app-icon.ts
index 6fee902782..45b16e8d65 100644
--- a/apps/examples/desktop-app/webview/lib/app-icon.ts
+++ b/apps/examples/desktop-app/webview/lib/app-icon.ts
@@ -3,7 +3,7 @@ import { desktopClient, isTauriAvailable } from "@/lib/desktop-client";
 export const APP_ICON_STORAGE_KEY = "cline.code.app-icon.v1";
 
 /**
- * App icon variants selectable in Settings. "classic" is the icon bundled
+ * App icon variants selectable in Settings. "midnight" is the icon bundled
  * with the app; the others live in webview/public/app-icons (picker +
  * browser favicon) and src-tauri/icons/dock (runtime dock icon resources).
  */
@@ -16,7 +16,7 @@ export const APP_ICONS = [
 
 export type AppIconId = (typeof APP_ICONS)[number]["id"];
 
-export const DEFAULT_APP_ICON: AppIconId = "classic";
+export const DEFAULT_APP_ICON: AppIconId = "midnight";
 
 export function isAppIconId(value: unknown): value is AppIconId {
 	return APP_ICONS.some((icon) => icon.id === value);
diff --git a/apps/examples/desktop-app/webview/lib/latest-successful-request.test.ts b/apps/examples/desktop-app/webview/lib/latest-successful-request.test.ts
new file mode 100644
index 0000000000..3371737fae
--- /dev/null
+++ b/apps/examples/desktop-app/webview/lib/latest-successful-request.test.ts
@@ -0,0 +1,31 @@
+import { describe, expect, it } from "vitest";
+import { createLatestSuccessfulRequestGate } from "./latest-successful-request";
+
+describe("createLatestSuccessfulRequestGate", () => {
+	it("allows an earlier successful request to commit when a newer request fails", () => {
+		const gate = createLatestSuccessfulRequestGate();
+		const successfulRequest = gate.begin();
+		gate.begin();
+
+		expect(gate.commit(successfulRequest)).toBe(true);
+	});
+
+	it("rejects a successful result older than the latest committed result", () => {
+		const gate = createLatestSuccessfulRequestGate();
+		const olderRequest = gate.begin();
+		const newerRequest = gate.begin();
+
+		expect(gate.commit(newerRequest)).toBe(true);
+		expect(gate.commit(olderRequest)).toBe(false);
+	});
+
+	it("rejects in-flight results after an explicit invalidation", () => {
+		const gate = createLatestSuccessfulRequestGate();
+		const staleRequest = gate.begin();
+
+		gate.invalidate();
+
+		expect(gate.commit(staleRequest)).toBe(false);
+		expect(gate.commit(gate.begin())).toBe(true);
+	});
+});
diff --git a/apps/examples/desktop-app/webview/lib/latest-successful-request.ts b/apps/examples/desktop-app/webview/lib/latest-successful-request.ts
new file mode 100644
index 0000000000..ad87629f21
--- /dev/null
+++ b/apps/examples/desktop-app/webview/lib/latest-successful-request.ts
@@ -0,0 +1,33 @@
+export type LatestSuccessfulRequestGate = {
+	begin: () => number;
+	commit: (requestId: number) => boolean;
+	invalidate: () => void;
+};
+
+/**
+ * Coordinates overlapping reads so failures do not invalidate a known-good
+ * result. A successful read may commit unless a newer successful read or an
+ * explicit invalidation has already advanced the commit watermark.
+ */
+export function createLatestSuccessfulRequestGate(): LatestSuccessfulRequestGate {
+	let issuedRequestId = 0;
+	let committedRequestId = 0;
+
+	return {
+		begin: () => {
+			issuedRequestId += 1;
+			return issuedRequestId;
+		},
+		commit: (requestId) => {
+			if (requestId <= committedRequestId) {
+				return false;
+			}
+			committedRequestId = requestId;
+			return true;
+		},
+		invalidate: () => {
+			issuedRequestId += 1;
+			committedRequestId = issuedRequestId;
+		},
+	};
+}
diff --git a/apps/examples/desktop-app/webview/lib/theme.test.ts b/apps/examples/desktop-app/webview/lib/theme.test.ts
index 19bac495b5..b651755fc3 100644
--- a/apps/examples/desktop-app/webview/lib/theme.test.ts
+++ b/apps/examples/desktop-app/webview/lib/theme.test.ts
@@ -1,19 +1,79 @@
 // @vitest-environment jsdom
 
+import { runInNewContext } from "node:vm";
 import { afterEach, describe, expect, it } from "vitest";
 import {
 	applyHubAccent,
 	DEFAULT_HUB_ACCENT,
+	DEFAULT_HUB_THEME,
 	HUB_ACCENT_STORAGE_KEY,
+	HUB_THEME_BOOTSTRAP_SCRIPT,
+	HUB_THEME_STORAGE_KEY,
 	isHubAccent,
 	readStoredHubAccent,
+	readStoredHubTheme,
+	readSystemHubTheme,
 	setStoredHubAccent,
 	syncHubAccent,
+	syncHubTheme,
 } from "./theme";
 
 afterEach(() => {
 	window.localStorage.clear();
+	delete document.body.dataset.vscodeThemeKind;
+	document.documentElement.classList.remove("dark");
 	delete document.documentElement.dataset.clineAccent;
+	delete document.documentElement.dataset.clineHubTheme;
+	Reflect.deleteProperty(window, "matchMedia");
+});
+
+function setSystemTheme(theme: "light" | "dark" | null): void {
+	window.matchMedia = ((query: string) =>
+		({
+			matches: theme !== null && query === `(prefers-color-scheme: ${theme})`,
+			media: query,
+			addEventListener() {},
+			removeEventListener() {},
+		}) as unknown as MediaQueryList) as typeof window.matchMedia;
+}
+
+function runThemeBootstrap(): void {
+	runInNewContext(HUB_THEME_BOOTSTRAP_SCRIPT, { document, window });
+}
+
+describe("hub theme", () => {
+	it("applies a saved theme before the system preference", () => {
+		setSystemTheme("light");
+		window.localStorage.setItem(HUB_THEME_STORAGE_KEY, "dark");
+
+		runThemeBootstrap();
+
+		expect(document.documentElement.classList.contains("dark")).toBe(true);
+		expect(document.documentElement.dataset.clineHubTheme).toBe("dark");
+	});
+
+	it("applies the system preference before the first paint when unsaved", () => {
+		setSystemTheme("light");
+
+		runThemeBootstrap();
+
+		expect(document.documentElement.classList.contains("dark")).toBe(false);
+		expect(document.documentElement.dataset.clineHubTheme).toBe("light");
+	});
+
+	it("defaults to dark when no saved or system preference is available", () => {
+		expect(readStoredHubTheme()).toBeNull();
+		expect(readSystemHubTheme()).toBe(DEFAULT_HUB_THEME);
+		expect(syncHubTheme()).toBe("dark");
+		expect(document.documentElement.classList.contains("dark")).toBe(true);
+
+		document.documentElement.classList.remove("dark");
+		delete document.documentElement.dataset.clineHubTheme;
+		runThemeBootstrap();
+
+		expect(document.documentElement.classList.contains("dark")).toBe(true);
+		expect(document.documentElement.dataset.clineHubTheme).toBe("dark");
+	});
 });
 
 describe("hub accent", () => {
diff --git a/apps/examples/desktop-app/webview/lib/theme.ts b/apps/examples/desktop-app/webview/lib/theme.ts
index 4e5a200be3..075bcfd0f4 100644
--- a/apps/examples/desktop-app/webview/lib/theme.ts
+++ b/apps/examples/desktop-app/webview/lib/theme.ts
@@ -2,21 +2,70 @@ export const HUB_THEME_STORAGE_KEY = "cline-hub-theme";
 
 export type HubTheme = "light" | "dark";
 
+export const DEFAULT_HUB_THEME: HubTheme = "dark";
+
+/**
+ * Runs from the document head before the webview paints. Keep this
+ * self-contained: the browser executes it before the client bundle loads.
+ */
+export const HUB_THEME_BOOTSTRAP_SCRIPT = `(() => {
+	const root = document.documentElement;
+	let theme;
+
+	try {
+		const stored = window.localStorage.getItem(${JSON.stringify(HUB_THEME_STORAGE_KEY)});
+		if (stored === "light" || stored === "dark") {
+			theme = stored;
+		}
+	} catch {}
+
+	if (!theme) {
+		try {
+			if (typeof window.matchMedia === "function") {
+				if (window.matchMedia("(prefers-color-scheme: light)").matches) {
+					theme = "light";
+				} else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+					theme = "dark";
+				}
+			}
+		} catch {}
+	}
+
+	if (!theme) {
+		theme = ${JSON.stringify(DEFAULT_HUB_THEME)};
+	}
+	root.classList.toggle("dark", theme === "dark");
+	root.dataset.clineHubTheme = theme;
+})();`;
+
 export function readStoredHubTheme(): HubTheme | null {
-	const stored = window.localStorage.getItem(HUB_THEME_STORAGE_KEY);
-	return stored === "light" || stored === "dark" ? stored : null;
+	try {
+		const stored = window.localStorage.getItem(HUB_THEME_STORAGE_KEY);
+		return stored === "light" || stored === "dark" ? stored : null;
+	} catch {
+		return null;
+	}
 }
 
 export function readSystemHubTheme(): HubTheme {
 	const kind = document.body.dataset.vscodeThemeKind;
-	if (kind) {
-		return kind === "vscode-dark" || kind === "vscode-high-contrast"
-			? "dark"
-			: "light";
+	if (kind === "vscode-dark" || kind === "vscode-high-contrast") {
+		return "dark";
 	}
-	return window.matchMedia?.("(prefers-color-scheme: dark)").matches
-		? "dark"
-		: "light";
+	if (kind === "vscode-light" || kind === "vscode-high-contrast-light") {
+		return "light";
+	}
+	try {
+		if (window.matchMedia?.("(prefers-color-scheme: dark)").matches) {
+			return "dark";
+		}
+		if (window.matchMedia?.("(prefers-color-scheme: light)").matches) {
+			return "light";
+		}
+	} catch {
+		// Use the app default when the host cannot expose its color scheme.
+	}
+	return DEFAULT_HUB_THEME;
 }
 
 export function applyHubTheme(theme: HubTheme): HubTheme {
@@ -30,7 +79,11 @@ export function syncHubTheme(): HubTheme {
 }
 
 export function setStoredHubTheme(theme: HubTheme): HubTheme {
-	window.localStorage.setItem(HUB_THEME_STORAGE_KEY, theme);
+	try {
+		window.localStorage.setItem(HUB_THEME_STORAGE_KEY, theme);
+	} catch {
+		// Applying still works for this session when persistence is unavailable.
+	}
 	return applyHubTheme(theme);
 }
 
