Merge pull request #11 from offendingcommit/claude/add-honcho-cloud-option-vk93o

2026-05-14 22:06:47 -05:00
parent 4fc54a3581 38e76d33de
commit 403ee48b93
10 changed files with 482 additions and 53 deletions
--- a/packages/web/src/components/layout/Sidebar.tsx
+++ b/packages/web/src/components/layout/Sidebar.tsx
@@ -13,7 +13,9 @@ import {
 	Sun,
 } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
+import { HealthDot } from "@/components/shared/HealthDot";
 import { useDemo } from "@/hooks/useDemo";
+import { useHealthStatus } from "@/hooks/useHealthStatus";
 import { useInstances } from "@/hooks/useInstances";
 import { useTheme } from "@/hooks/useTheme";
 import { COLOR } from "@/lib/constants";
@@ -29,6 +31,7 @@ export function Sidebar() {
 	const { instances, active, activate } = useInstances();
 	const { theme, toggle } = useTheme();
 	const { demo, toggle: toggleDemo, mask } = useDemo();
+	const { data: health } = useHealthStatus();
 	const [switcherOpen, setSwitcherOpen] = useState(false);
 	const switcherRef = useRef<HTMLDivElement | null>(null);

@@ -87,8 +90,12 @@ export function Sidebar() {
 							title={mask(active.baseUrl)}
 						>
 							<div className="min-w-0 flex-1">
-								<p className="text-xs font-medium truncate" style={{ color: "var(--text-2)" }}>
-									{active.name}
+								<p
+									className="text-xs font-medium truncate flex items-center gap-1.5"
+									style={{ color: "var(--text-2)" }}
+								>
+									<HealthDot status={health?.status} message={health?.message} />
+									<span className="truncate">{active.name}</span>
 								</p>
 								<p className="text-xs font-mono truncate" style={{ color: "var(--text-4)" }}>
 									{mask(active.baseUrl.replace(/^https?:\/\//, ""))}
--- a/packages/web/src/components/settings/InstancesManager.tsx
+++ b/packages/web/src/components/settings/InstancesManager.tsx
@@ -1,14 +1,20 @@
-import { motion } from "framer-motion";
-import { Check, Pencil, Plus, Server, Trash2 } from "lucide-react";
-import { useState } from "react";
-import { SettingsForm } from "@/components/settings/SettingsForm";
+import { AnimatePresence, motion } from "framer-motion";
+import { Check, ChevronRight, Cloud, Pencil, Plus, Server, Sparkles, Trash2 } from "lucide-react";
+import { useEffect, useState } from "react";
+import { type ConnectionPreset, SettingsForm } from "@/components/settings/SettingsForm";
 import { Button } from "@/components/ui/button";
 import { Muted } from "@/components/ui/typography";
 import { useInstances } from "@/hooks/useInstances";
-import type { Instance } from "@/lib/config";
+import { checkConnection, HONCHO_CLOUD_URL, type Instance, isCloudInstance } from "@/lib/config";
 import { COLOR } from "@/lib/constants";

-type Mode = { kind: "list" } | { kind: "create" } | { kind: "edit"; id: string };
+const LOCALHOST_PROBE_URL = "http://localhost:8000";
+
+type Mode =
+	| { kind: "list" }
+	| { kind: "choose-type" }
+	| { kind: "create"; preset: ConnectionPreset }
+	| { kind: "edit"; id: string };

 interface InstancesManagerProps {
 	onActivated?: () => void;
@@ -16,18 +22,32 @@ interface InstancesManagerProps {

 export function InstancesManager({ onActivated }: InstancesManagerProps) {
 	const { instances, activeId, activate, remove } = useInstances();
-	const [mode, setMode] = useState<Mode>({ kind: "list" });
+	const isFirstRun = instances.length === 0;
+	const [mode, setMode] = useState<Mode>(isFirstRun ? { kind: "choose-type" } : { kind: "list" });
+
+	const backFromCreate = () => setMode(isFirstRun ? { kind: "choose-type" } : { kind: "list" });
+
+	if (mode.kind === "choose-type") {
+		return (
+			<ConnectionTypeChooser
+				onPick={(preset) => setMode({ kind: "create", preset })}
+				onCancel={isFirstRun ? undefined : () => setMode({ kind: "list" })}
+			/>
+		);
+	}

 	if (mode.kind === "create") {
 		return (
 			<SettingsForm
 				instance={null}
+				preset={mode.preset}
 				onSaved={() => {
 					setMode({ kind: "list" });
 					onActivated?.();
 				}}
-				onCancel={instances.length > 0 ? () => setMode({ kind: "list" }) : undefined}
-				hideCancel={instances.length === 0}
+				onCancel={backFromCreate}
+				hideCancel={false}
+				submitLabel={isFirstRun ? "Save Connection" : undefined}
 			/>
 		);
 	}
@@ -44,17 +64,6 @@ export function InstancesManager({ onActivated }: InstancesManagerProps) {
 		);
 	}

-	if (instances.length === 0) {
-		return (
-			<SettingsForm
-				instance={null}
-				onSaved={() => onActivated?.()}
-				hideCancel
-				submitLabel="Save Connection"
-			/>
-		);
-	}
-
 	return (
 		<div className="space-y-3">
 			<div className="space-y-2">
@@ -76,7 +85,7 @@ export function InstancesManager({ onActivated }: InstancesManagerProps) {
 			<Button
 				type="button"
 				variant="ghost"
-				onClick={() => setMode({ kind: "create" })}
+				onClick={() => setMode({ kind: "choose-type" })}
 				className="w-full py-2.5 px-4 rounded-xl flex items-center justify-center gap-2"
 			>
 				<Plus className="w-4 h-4" strokeWidth={1.5} />
@@ -86,6 +95,153 @@ export function InstancesManager({ onActivated }: InstancesManagerProps) {
 	);
 }

+interface ConnectionTypeChooserProps {
+	onPick: (preset: ConnectionPreset) => void;
+	onCancel?: () => void;
+}
+
+function ConnectionTypeChooser({ onPick, onCancel }: ConnectionTypeChooserProps) {
+	const [localhostDetected, setLocalhostDetected] = useState(false);
+
+	useEffect(() => {
+		let cancelled = false;
+		void checkConnection(LOCALHOST_PROBE_URL).then((result) => {
+			if (cancelled) return;
+			if (result.status === "ok" || result.status === "auth-required") {
+				setLocalhostDetected(true);
+			}
+		});
+		return () => {
+			cancelled = true;
+		};
+	}, []);
+
+	return (
+		<div
+			className="rounded-2xl p-6 space-y-3"
+			style={{
+				background: "var(--bg-2)",
+				border: "1px solid var(--border)",
+			}}
+		>
+			<div className="mb-2">
+				<h2 className="text-base font-medium" style={{ color: "var(--text-1)" }}>
+					How do you want to connect?
+				</h2>
+				<Muted className="text-xs mt-1">
+					You can add more connections later — Cloud, self-hosted, or both.
+				</Muted>
+			</div>
+
+			<AnimatePresence>
+				{localhostDetected && (
+					<motion.button
+						type="button"
+						initial={{ opacity: 0, height: 0 }}
+						animate={{ opacity: 1, height: "auto" }}
+						exit={{ opacity: 0, height: 0 }}
+						onClick={() => onPick("self-hosted")}
+						className="w-full overflow-hidden rounded-xl p-3 flex items-center gap-2.5 text-left"
+						style={{
+							background: COLOR.successDim,
+							border: `1px solid ${COLOR.successBorder}`,
+						}}
+					>
+						<Sparkles
+							className="w-4 h-4 shrink-0"
+							style={{ color: COLOR.success }}
+							strokeWidth={1.5}
+						/>
+						<div className="min-w-0 flex-1">
+							<p className="text-xs font-medium" style={{ color: COLOR.success }}>
+								Detected Honcho at {LOCALHOST_PROBE_URL.replace(/^https?:\/\//, "")}
+							</p>
+							<Muted className="text-xs mt-0.5">Tap to connect to it</Muted>
+						</div>
+					</motion.button>
+				)}
+			</AnimatePresence>
+
+			<ConnectionTypeButton
+				icon={Cloud}
+				title="Honcho Cloud"
+				description={`Hosted at ${HONCHO_CLOUD_URL.replace(/^https?:\/\//, "")} — sign in with your API key`}
+				accent
+				onClick={() => onPick("cloud")}
+			/>
+
+			<ConnectionTypeButton
+				icon={Server}
+				title="Self-Hosted"
+				description="Connect to your own Honcho deployment"
+				onClick={() => onPick("self-hosted")}
+			/>
+
+			{onCancel && (
+				<div className="pt-1">
+					<Button
+						type="button"
+						variant="ghost"
+						onClick={onCancel}
+						className="w-full py-2 px-4 rounded-xl"
+					>
+						Cancel
+					</Button>
+				</div>
+			)}
+		</div>
+	);
+}
+
+interface ConnectionTypeButtonProps {
+	icon: typeof Cloud;
+	title: string;
+	description: string;
+	accent?: boolean;
+	onClick: () => void;
+}
+
+function ConnectionTypeButton({
+	icon: Icon,
+	title,
+	description,
+	accent,
+	onClick,
+}: ConnectionTypeButtonProps) {
+	return (
+		<button
+			type="button"
+			onClick={onClick}
+			className="w-full rounded-xl p-4 flex items-center gap-3 text-left transition-colors"
+			style={{
+				background: "var(--surface)",
+				border: `1px solid ${accent ? "var(--accent-border)" : "var(--border)"}`,
+			}}
+		>
+			<div
+				className="w-10 h-10 rounded-lg flex items-center justify-center shrink-0"
+				style={{
+					background: accent ? "var(--accent)" : "var(--bg-2)",
+					color: accent ? "white" : "var(--text-2)",
+				}}
+			>
+				<Icon className="w-5 h-5" strokeWidth={1.5} />
+			</div>
+			<div className="min-w-0 flex-1">
+				<p className="text-sm font-medium" style={{ color: "var(--text-1)" }}>
+					{title}
+				</p>
+				<Muted className="text-xs mt-0.5">{description}</Muted>
+			</div>
+			<ChevronRight
+				className="w-4 h-4 shrink-0"
+				style={{ color: "var(--text-3)" }}
+				strokeWidth={1.5}
+			/>
+		</button>
+	);
+}
+
 interface InstanceRowProps {
 	instance: Instance;
 	active: boolean;
@@ -96,6 +252,7 @@ interface InstanceRowProps {

 function InstanceRow({ instance, active, onActivate, onEdit, onDelete }: InstanceRowProps) {
 	const [confirmingDelete, setConfirmingDelete] = useState(false);
+	const cloud = isCloudInstance(instance);

 	return (
 		<motion.div
@@ -122,6 +279,8 @@ function InstanceRow({ instance, active, onActivate, onEdit, onDelete }: Instanc
 				>
 					{active ? (
 						<Check className="w-4 h-4" strokeWidth={2} />
+					) : cloud ? (
+						<Cloud className="w-4 h-4" strokeWidth={1.5} />
 					) : (
 						<Server className="w-4 h-4" strokeWidth={1.5} />
 					)}
@@ -134,7 +293,7 @@ function InstanceRow({ instance, active, onActivate, onEdit, onDelete }: Instanc
 						{instance.name}
 					</p>
 					<Muted className="text-xs font-mono truncate">
-						{instance.baseUrl.replace(/^https?:\/\//, "")}
+						{cloud ? "Honcho Cloud" : instance.baseUrl.replace(/^https?:\/\//, "")}
 					</Muted>
 				</div>
 			</button>
--- a/packages/web/src/components/settings/SettingsForm.tsx
+++ b/packages/web/src/components/settings/SettingsForm.tsx
@@ -1,17 +1,37 @@
 import { AnimatePresence, motion } from "framer-motion";
-import { AlertCircle, CheckCircle, Loader, Lock, LockOpen, Wifi, WifiOff } from "lucide-react";
+import {
+	AlertCircle,
+	CheckCircle,
+	Cloud,
+	Loader,
+	Lock,
+	LockOpen,
+	Wifi,
+	WifiOff,
+} from "lucide-react";
 import { useState } from "react";
 import { Button } from "@/components/ui/button";
 import { Input, Textarea } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Muted } from "@/components/ui/typography";
 import { useInstances } from "@/hooks/useInstances";
-import { checkConnection, type HealthStatus, type Instance, instanceSchema } from "@/lib/config";
+import {
+	checkConnection,
+	type HealthStatus,
+	HONCHO_CLOUD_URL,
+	type Instance,
+	instanceSchema,
+	isCloudInstance,
+} from "@/lib/config";
 import { COLOR } from "@/lib/constants";

+export type ConnectionPreset = "cloud" | "self-hosted";
+
 interface SettingsFormProps {
 	/** Instance to edit; pass `null` to create a new one. */
 	instance: Instance | null;
+	/** Whether this form is for a Cloud or Self-Hosted connection. Inferred from `instance` in edit mode. */
+	preset?: ConnectionPreset;
 	/** Called after a successful save. Receives the saved instance id. */
 	onSaved?: (id: string) => void;
 	/** Called when the user cancels (only meaningful when there's something to cancel back to). */
@@ -31,6 +51,7 @@ const statusConfig = {

 export function SettingsForm({
 	instance,
+	preset,
 	onSaved,
 	onCancel,
 	hideCancel,
@@ -38,8 +59,17 @@ export function SettingsForm({
 }: SettingsFormProps) {
 	const { add, update, activate } = useInstances();

-	const [name, setName] = useState(instance?.name ?? "");
-	const [baseUrl, setBaseUrl] = useState(instance?.baseUrl ?? "http://localhost:8000");
+	const resolvedPreset: ConnectionPreset =
+		preset ?? (instance && isCloudInstance(instance) ? "cloud" : "self-hosted");
+	const isCloud = resolvedPreset === "cloud";
+
+	const initialName = instance?.name ?? (isCloud ? "Honcho Cloud" : "");
+	const initialBaseUrl = isCloud
+		? HONCHO_CLOUD_URL
+		: (instance?.baseUrl ?? "http://localhost:8000");
+
+	const [name, setName] = useState(initialName);
+	const [baseUrl, setBaseUrl] = useState(initialBaseUrl);
 	const [token, setToken] = useState(instance?.token ?? "");
 	const [errors, setErrors] = useState<Partial<Record<keyof Instance, string>>>({});
 	const [saved, setSaved] = useState(false);
@@ -64,8 +94,8 @@ export function SettingsForm({
 		e.preventDefault();
 		const candidate = {
 			id: instance?.id ?? "placeholder",
-			name: name.trim() || "Default",
-			baseUrl,
+			name: name.trim() || (isCloud ? "Honcho Cloud" : "Default"),
+			baseUrl: isCloud ? HONCHO_CLOUD_URL : baseUrl,
 			token,
 		};
 		const result = instanceSchema.safeParse(candidate);
@@ -78,6 +108,10 @@ export function SettingsForm({
 			setErrors(fieldErrors);
 			return;
 		}
+		if (isCloud && !token.trim()) {
+			setErrors({ token: "API key is required for Honcho Cloud" });
+			return;
+		}
 		setErrors({});

 		let id: string;
@@ -136,8 +170,25 @@ export function SettingsForm({

 			{/* Base URL */}
 			<div>
-				<Label className="mb-1.5 text-sm">Honcho Base URL</Label>
+				<Label className="mb-1.5 text-sm">{isCloud ? "Endpoint" : "Honcho Base URL"}</Label>
 				<div className="flex gap-2">
+					{isCloud ? (
+						<div
+							className="flex-1 font-mono rounded-xl px-3 py-2 text-sm flex items-center gap-2"
+							style={{
+								background: "var(--surface)",
+								border: "1px solid var(--border)",
+								color: "var(--text-2)",
+							}}
+						>
+							<Cloud
+								className="w-4 h-4 shrink-0"
+								style={{ color: "var(--accent)" }}
+								strokeWidth={1.5}
+							/>
+							<span className="truncate">{HONCHO_CLOUD_URL}</span>
+						</div>
+					) : (
 						<Input
 							type="url"
 							value={baseUrl}
@@ -148,6 +199,7 @@ export function SettingsForm({
 							placeholder="http://localhost:8000"
 							className="flex-1 font-mono rounded-xl"
 						/>
+					)}
 					<Button
 						type="button"
 						variant="accent"
@@ -168,12 +220,16 @@ export function SettingsForm({
 						<span className="hidden sm:block">Test</span>
 					</Button>
 				</div>
-				{errors.baseUrl && (
+				{errors.baseUrl && !isCloud && (
 					<p className="text-xs mt-1" style={{ color: COLOR.destructive }}>
 						{errors.baseUrl}
 					</p>
 				)}
-				<Muted className="text-xs mt-1.5">URL of your self-hosted Honcho instance</Muted>
+				<Muted className="text-xs mt-1.5">
+					{isCloud
+						? "Hosted Honcho service — endpoint is fixed"
+						: "URL of your self-hosted Honcho instance"}
+				</Muted>
 			</div>

 			{/* Health status */}
@@ -225,27 +281,39 @@ export function SettingsForm({
 							strokeWidth={1.5}
 						/>
 					)}
-					API Token
+					{isCloud ? "API key" : "API Token"}
 					<span
 						className="ml-1 text-xs font-normal px-1.5 py-0.5 rounded-full"
 						style={{
 							background: "var(--surface)",
-							border: "1px solid var(--border)",
-							color: "var(--text-3)",
+							border: `1px solid ${isCloud ? COLOR.accentText : "var(--border)"}`,
+							color: isCloud ? COLOR.accentText : "var(--text-3)",
 						}}
 					>
-						optional
+						{isCloud ? "required" : "optional"}
 					</span>
 				</Label>
 				<Textarea
 					id="honcho-token"
 					value={token}
-					onChange={(e) => setToken(e.target.value)}
+					onChange={(e) => {
+						setToken(e.target.value);
+						if (errors.token) setErrors({ ...errors, token: undefined });
+					}}
 					rows={2}
-					placeholder="eyJ... (required only if your instance has auth enabled)"
+					placeholder={
+						isCloud
+							? "Paste your Honcho Cloud API key"
+							: "eyJ... (required only if your instance has auth enabled)"
+					}
 					className="font-mono rounded-xl"
 				/>
-				{health?.status === "auth-required" && !token && (
+				{errors.token && (
+					<p className="text-xs mt-1" style={{ color: COLOR.destructive }}>
+						{errors.token}
+					</p>
+				)}
+				{!errors.token && health?.status === "auth-required" && !token && (
 					<motion.p
 						initial={{ opacity: 0, y: -4 }}
 						animate={{ opacity: 1, y: 0 }}
@@ -274,7 +342,10 @@ export function SettingsForm({
 					className="flex-1 py-2.5 px-4 rounded-xl"
 					style={saved ? { background: "#059669" } : undefined}
 				>
-					{saved ? "✓ Saved" : (submitLabel ?? (isCreate ? "Add Instance" : "Save Changes"))}
+					{saved
+						? "✓ Saved"
+						: (submitLabel ??
+							(isCreate ? (isCloud ? "Connect to Honcho Cloud" : "Add Instance") : "Save Changes"))}
 				</Button>
 			</div>
 		</form>
--- a/packages/web/src/components/shared/HealthDot.tsx
+++ b/packages/web/src/components/shared/HealthDot.tsx
@@ -0,0 +1,48 @@
+import { motion } from "framer-motion";
+import type { HealthStatus } from "@/lib/config";
+import { COLOR } from "@/lib/constants";
+
+interface HealthDotProps {
+	status: HealthStatus | undefined;
+	message?: string;
+	size?: number;
+}
+
+const COLORS: Record<HealthStatus, string> = {
+	ok: COLOR.success,
+	"auth-required": COLOR.warning,
+	unreachable: COLOR.destructive,
+	checking: COLOR.accentText,
+};
+
+const LABELS: Record<HealthStatus, string> = {
+	ok: "Connected",
+	"auth-required": "Auth required",
+	unreachable: "Unreachable",
+	checking: "Checking...",
+};
+
+export function HealthDot({ status, message, size = 8 }: HealthDotProps) {
+	const color = status ? COLORS[status] : "var(--text-4)";
+	const label = status ? LABELS[status] : "Unknown";
+	const title = message ? `${label} — ${message}` : label;
+	const pulsing = status === "checking";
+
+	return (
+		<motion.span
+			aria-label={`Connection status: ${label}`}
+			title={title}
+			animate={pulsing ? { opacity: [0.4, 1, 0.4] } : { opacity: 1 }}
+			transition={pulsing ? { duration: 1.2, repeat: Number.POSITIVE_INFINITY } : undefined}
+			style={{
+				display: "inline-block",
+				width: size,
+				height: size,
+				borderRadius: "50%",
+				background: color,
+				boxShadow: status === "ok" ? `0 0 6px ${color}80` : undefined,
+				flexShrink: 0,
+			}}
+		/>
+	);
+}
--- a/packages/web/src/hooks/useHealthStatus.ts
+++ b/packages/web/src/hooks/useHealthStatus.ts
@@ -0,0 +1,20 @@
+import { useQuery } from "@tanstack/react-query";
+import { useInstances } from "@/hooks/useInstances";
+import { checkConnection } from "@/lib/config";
+
+const POLL_INTERVAL_MS = 30_000;
+
+export function useHealthStatus() {
+	const { active } = useInstances();
+	return useQuery({
+		queryKey: ["health", active?.id, active?.baseUrl, active?.token],
+		queryFn: async () => {
+			if (!active) throw new Error("No active instance");
+			return checkConnection(active.baseUrl, active.token || undefined);
+		},
+		enabled: !!active,
+		refetchInterval: POLL_INTERVAL_MS,
+		refetchOnWindowFocus: true,
+		staleTime: 0,
+	});
+}
--- a/packages/web/src/lib/config.ts
+++ b/packages/web/src/lib/config.ts
@@ -4,6 +4,16 @@ import { httpFetch } from "@/lib/http";
 const LEGACY_KEY = "openconcho:config";
 const STORE_KEY = "openconcho:instances";

+export const HONCHO_CLOUD_URL = "https://api.honcho.dev";
+
+function normalizeBaseUrl(url: string): string {
+	return url.trim().replace(/\/+$/, "").toLowerCase();
+}
+
+export function isCloudInstance(instance: Pick<Instance, "baseUrl">): boolean {
+	return normalizeBaseUrl(instance.baseUrl) === HONCHO_CLOUD_URL;
+}
+
 export const configSchema = z.object({
 	baseUrl: z.string().url({ message: "Must be a valid URL" }),
 	token: z.string().optional().default(""),
--- a/packages/web/src/routes/settings.tsx
+++ b/packages/web/src/routes/settings.tsx
@@ -35,7 +35,7 @@ function SettingsPage() {
 					</h1>
 					<p className="text-sm mt-1" style={{ color: "var(--text-3)" }}>
 						{isFirstRun
-							? "Connect to your self-hosted Honcho instance"
+							? "Connect to Honcho Cloud or your self-hosted instance"
 							: "Manage your Honcho connections"}
 					</p>
 				</div>
--- a/packages/web/src/test/app.test.tsx
+++ b/packages/web/src/test/app.test.tsx
@@ -29,7 +29,7 @@ describe("first load with no config", () => {
 		// Should be visible immediately — bug 1: RootLayout returns null while
 		// a useEffect-driven navigate fires, leaving a blank screen.
 		expect(
-			await screen.findByText(/Connect to your self-hosted Honcho instance/i),
+			await screen.findByText(/Connect to Honcho Cloud or your self-hosted instance/i),
 		).toBeInTheDocument();
 	});
 });
--- a/packages/web/src/test/health-status.test.tsx
+++ b/packages/web/src/test/health-status.test.tsx
@@ -0,0 +1,42 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { renderHook, waitFor } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { useHealthStatus } from "@/hooks/useHealthStatus";
+import { saveStore } from "@/lib/config";
+
+const httpFetch = vi.hoisted(() => vi.fn());
+vi.mock("@/lib/http", () => ({ httpFetch }));
+
+function wrap(qc: QueryClient) {
+	return ({ children }: { children: React.ReactNode }) => (
+		<QueryClientProvider client={qc}>{children}</QueryClientProvider>
+	);
+}
+
+describe("useHealthStatus", () => {
+	beforeEach(() => {
+		httpFetch.mockReset();
+		localStorage.clear();
+	});
+
+	afterEach(() => {
+		localStorage.clear();
+	});
+
+	it("is disabled with no active instance", () => {
+		const qc = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+		const { result } = renderHook(() => useHealthStatus(), { wrapper: wrap(qc) });
+		expect(result.current.fetchStatus).toBe("idle");
+	});
+
+	it("reports ok when the active instance responds 200", async () => {
+		saveStore({
+			instances: [{ id: "i1", name: "Local", baseUrl: "http://localhost:8000", token: "" }],
+			activeId: "i1",
+		});
+		httpFetch.mockResolvedValue(new Response("{}", { status: 200 }));
+		const qc = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+		const { result } = renderHook(() => useHealthStatus(), { wrapper: wrap(qc) });
+		await waitFor(() => expect(result.current.data?.status).toBe("ok"));
+	});
+});
--- a/packages/web/src/test/settings-form.test.tsx
+++ b/packages/web/src/test/settings-form.test.tsx
@@ -0,0 +1,72 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import { SettingsForm } from "@/components/settings/SettingsForm";
+import { HONCHO_CLOUD_URL, loadStore } from "@/lib/config";
+
+function renderForm(ui: React.ReactElement) {
+	const qc = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+	return render(<QueryClientProvider client={qc}>{ui}</QueryClientProvider>);
+}
+
+describe("SettingsForm — cloud preset", () => {
+	it("does not render the editable Base URL input", () => {
+		renderForm(<SettingsForm instance={null} preset="cloud" />);
+		expect(screen.queryByPlaceholderText("http://localhost:8000")).not.toBeInTheDocument();
+	});
+
+	it("marks the API key as required", () => {
+		renderForm(<SettingsForm instance={null} preset="cloud" />);
+		expect(screen.getByText("required")).toBeInTheDocument();
+	});
+
+	it("blocks save when the API key is empty", async () => {
+		const onSaved = vi.fn();
+		const user = userEvent.setup();
+		renderForm(<SettingsForm instance={null} preset="cloud" onSaved={onSaved} />);
+		await user.click(screen.getByRole("button", { name: /Connect to Honcho Cloud/i }));
+		expect(screen.getByText(/API key is required for Honcho Cloud/i)).toBeInTheDocument();
+	});
+
+	it("saves with the Honcho Cloud URL when a token is provided", async () => {
+		const user = userEvent.setup();
+		renderForm(<SettingsForm instance={null} preset="cloud" />);
+		await user.type(screen.getByPlaceholderText(/Paste your Honcho Cloud API key/i), "sk-test-1");
+		await user.click(screen.getByRole("button", { name: /Connect to Honcho Cloud/i }));
+		const store = loadStore();
+		expect(store.instances[0]?.baseUrl).toBe(HONCHO_CLOUD_URL);
+	});
+});
+
+describe("SettingsForm — self-hosted preset", () => {
+	it("renders the editable Base URL input", () => {
+		renderForm(<SettingsForm instance={null} preset="self-hosted" />);
+		expect(screen.getByPlaceholderText("http://localhost:8000")).toBeInTheDocument();
+	});
+
+	it("allows saving without a token", async () => {
+		const user = userEvent.setup();
+		renderForm(<SettingsForm instance={null} preset="self-hosted" />);
+		await user.click(screen.getByRole("button", { name: /Add Instance/i }));
+		const store = loadStore();
+		expect(store.instances).toHaveLength(1);
+	});
+});
+
+describe("SettingsForm — edit mode auto-detects cloud", () => {
+	it("renders the cloud variant when editing an instance with the cloud URL", () => {
+		renderForm(
+			<SettingsForm
+				instance={{
+					id: "id-1",
+					name: "My Cloud",
+					baseUrl: HONCHO_CLOUD_URL,
+					token: "sk-existing",
+				}}
+			/>,
+		);
+		expect(screen.queryByPlaceholderText("http://localhost:8000")).not.toBeInTheDocument();
+		expect(screen.getByText("required")).toBeInTheDocument();
+	});
+});