feat(cli): refresh hub dashboard navigation

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

@@ -3,11 +3,20 @@ import { isWebviewRoute, normalizeWebviewIndexHtml } from "./http";
 
 describe("isWebviewRoute", () => {
 	it.each([
+		"/",
+		"/chat",
+		"/sessions",
+		"/models",
+		"/customizations",
 		"/marketplace",
 		"/marketplace/mcp",
 		"/marketplace/skills",
 		"/marketplace/plugins",
-	])("matches marketplace SPA route %s", (pathname) => {
+		"/channels",
+		"/schedules",
+		"/settings",
+		"/settings/providers",
+	])("matches dashboard SPA route %s", (pathname) => {
 		expect(isWebviewRoute(pathname)).toBe(true);
 	});
 

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

@@ -49,10 +49,15 @@ export function isWebviewRoute(pathname: string): boolean {
 		pathname === "/" ||
 		pathname === "/index.html" ||
 		pathname === "/chat" ||
+		pathname === "/sessions" ||
+		pathname === "/models" ||
+		pathname === "/customizations" ||
 		pathname === "/marketplace" ||
 		pathname === "/marketplace/mcp" ||
 		pathname === "/marketplace/skills" ||
 		pathname === "/marketplace/plugins" ||
+		pathname === "/channels" ||
+		pathname === "/schedules" ||
 		pathname === "/settings" ||
 		pathname.startsWith("/settings/")
 	);

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";
@@ -40,7 +38,6 @@ const navCategories = [
 ] as const;
 
 export type SettingsSection = (typeof navCategories)[number];
-type Theme = "dark" | "light";
 type GlobalSettingsResponse = {
 	telemetryOptOut: boolean;
 	autoUpdateEnabled: boolean;
@@ -58,17 +55,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 +136,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 +347,73 @@ export function SettingsView({
 		setAddingProvider(false);
 	};
 
+	const content =
+		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 />
+		) : (
+			<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 +505,13 @@ 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 [telemetryOptOut, setTelemetryOptOut] = useState(false);
 	const [telemetryLoading, setTelemetryLoading] = useState(true);
 	const [telemetrySaving, setTelemetrySaving] = useState(false);
@@ -605,43 +595,19 @@ function GeneralSettingsContent({
 
 	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>
+			<div className="px-18 py-10 max-[1200px]:px-8 max-[720px]:px-4 max-[720px]:py-5">
+				<div className="mb-12">
+					<h1 className="text-[32px] font-semibold leading-none tracking-normal text-foreground">
+						General
+					</h1>
 				</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">
+				<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-sm font-medium text-foreground">Theme</p>
-							<p className="mt-1 text-xs text-muted-foreground">
-								Use the light or dark Cline Hub interface.
+							<p className="text-[17px] font-semibold text-foreground">
+								Auto update
 							</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>
-					</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">
+							<p className="mt-1 text-[15px] text-muted-foreground">
 								Automatically install CLI updates on startup.
 							</p>
 							{autoUpdateError ? (
@@ -659,12 +625,12 @@ function GeneralSettingsContent({
 							}
 						/>
 					</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 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-sm font-medium text-foreground">Telemetry</p>
-							<p className="mt-1 text-xs text-muted-foreground">
+							<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 ? (
@@ -674,10 +640,12 @@ function GeneralSettingsContent({
 							) : null}
 						</div>
 						<Switch
-							aria-label="Telemetry opt-out"
+							aria-label="Telemetry"
 							checked={!telemetryOptOut} // If opt-out is true, the switch should be off (unchecked)
 							disabled={telemetryLoading || telemetrySaving}
-							onCheckedChange={(checked) => void updateTelemetryOptOut(checked)}
+							onCheckedChange={(checked) =>
+								void updateTelemetryOptOut(!checked)
+							}
 						/>
 					</div>
 				</section>

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

@@ -1,3 +1,4 @@
+@import url("https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:ital,wght@0,400..900;1,400..900&display=swap");
 @import "tailwindcss";
 @import "tw-animate-css";
 @import "shadcn/tailwind.css";
@@ -6,24 +7,24 @@
 @custom-variant dark (&:is(.dark *));
 
 :root {
-	--background: oklch(1 0 0);
-	--foreground: oklch(0.145 0 0);
+	--background: oklch(0.998 0 0);
+	--foreground: oklch(0.18 0.006 255);
 	--card: oklch(1 0 0);
-	--card-foreground: oklch(0.145 0 0);
+	--card-foreground: oklch(0.18 0.006 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.968 0.004 270);
+	--muted-foreground: oklch(0.52 0.012 270);
+	--accent: oklch(0.94 0.006 270);
+	--accent-foreground: oklch(0.18 0.006 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.91 0.006 270);
+	--input: oklch(0.91 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,18 +32,18 @@
 	--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.975 0.004 270);
+	--sidebar-foreground: oklch(0.18 0.006 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.925 0.006 270);
+	--sidebar-accent-foreground: oklch(0.18 0.006 255);
+	--sidebar-border: oklch(0.91 0.006 270);
 	--sidebar-ring: oklch(0.708 0 0);
 }
 
 @theme inline {
-	--font-sans: "Geist Variable", sans-serif;
+	--font-sans: "Schibsted Grotesk", "Geist Variable", sans-serif;
 	--font-mono:
 		ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono",
 		monospace;