Bundle frontend in desktop app and add server connection picker

desktop/src-tauri/tauri.conf.json

@@ -5,7 +5,9 @@
   "identifier": "sh.spacebot.desktop",
   "build": {
     "devUrl": "http://localhost:19840",
-    "frontendDist": "http://localhost:19898"
+    "beforeDevCommand": "bun run --cwd ../interface dev --host 127.0.0.1 --strictPort",
+    "beforeBuildCommand": "bun run --cwd ../interface build && ./scripts/build-opencode-embed.sh",
+    "frontendDist": "../../interface/dist"
   },
   "app": {
     "macOSPrivateApi": true,

interface/src/App.tsx

@@ -2,6 +2,8 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { RouterProvider } from "@tanstack/react-router";
 import { ErrorBoundary } from "@/components/ErrorBoundary";
+import { DesktopInstanceDialog, DesktopInstanceGate } from "@/components/DesktopInstanceDialog";
+import { useDesktopInstance, DesktopInstanceProvider } from "@/hooks/useDesktopInstance";
 import { LiveContextProvider } from "@/hooks/useLiveContext";
 import { router } from "@/router";
 
@@ -15,17 +17,32 @@ const queryClient = new QueryClient({
 	},
 });
 
-export function App() {
+function AppShell() {
+	const { isDesktop, hasConfiguredInstance } = useDesktopInstance();
+
+	if (isDesktop && !hasConfiguredInstance) {
+		return <DesktopInstanceGate />;
+	}
+
 	return (
 		<ErrorBoundary>
 			<QueryClientProvider client={queryClient}>
 				<LiveContextProvider>
 					<RouterProvider router={router} />
 				</LiveContextProvider>
+				<DesktopInstanceDialog />
 				{import.meta.env.DEV && (
 				<ReactQueryDevtools initialIsOpen={false} buttonPosition="bottom-right" />
 			)}
 			</QueryClientProvider>
 		</ErrorBoundary>
 	);
 }
+
+export function App() {
+	return (
+		<DesktopInstanceProvider>
+			<AppShell />
+		</DesktopInstanceProvider>
+	);
+}

interface/src/api/client.ts

@@ -1,6 +1,8 @@
-export const BASE_PATH: string = (window as any).__SPACEBOT_BASE_PATH || "";
-export const IS_TAURI: boolean = !!(window as any).__TAURI_INTERNALS__;
-const API_BASE = BASE_PATH + "/api";
+import { assetUrl, getApiBaseUrl, isTauriDesktop } from "@/lib/backend";
+
+export const BASE_PATH: string = assetUrl("").replace(/\/$/, "");
+export const IS_TAURI: boolean = isTauriDesktop();
+const API_BASE = getApiBaseUrl();
 
 export interface StatusResponse {
 	status: string;

interface/src/components/ConnectionBanner.tsx

@@ -1,5 +1,6 @@
 import { Banner } from "@/ui";
 import type { ConnectionState } from "@/hooks/useEventSource";
+import { useDesktopInstance } from "@/hooks/useDesktopInstance";
 
 const stateConfig: Record<Exclude<ConnectionState, "connected">, { label: string; variant: "info" | "warning" | "error" }> = {
 	connecting: { label: "Connecting...", variant: "info" },
@@ -8,6 +9,7 @@ const stateConfig: Record<Exclude<ConnectionState, "connected">, { label: string
 };
 
 export function ConnectionBanner({ state, hasData }: { state: ConnectionState; hasData: boolean }) {
+	const { currentLabel, isDesktop, openDialog } = useDesktopInstance();
 	// Don't show "Connecting..." if we already have data loaded
 	if (state === "connecting" && hasData) return null;
 
@@ -17,7 +19,18 @@ export function ConnectionBanner({ state, hasData }: { state: ConnectionState; h
 
 	return (
 		<Banner variant={variant} dot="pulse">
-			{label}
+			<div className="flex w-full items-center justify-between gap-4">
+				<span>{label}</span>
+				{isDesktop ? (
+					<button
+						type="button"
+						onClick={openDialog}
+						className="shrink-0 text-xs text-current underline underline-offset-4 opacity-90 hover:opacity-100"
+					>
+						{currentLabel}
+					</button>
+				) : null}
+			</div>
 		</Banner>
 	);
 }

interface/src/components/DesktopInstanceDialog.tsx

@@ -0,0 +1,113 @@
+import { useState, type FormEvent } from "react";
+import { LinkSquare02Icon } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/react";
+import { useDesktopInstance } from "@/hooks/useDesktopInstance";
+import {
+	Button,
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogHeader,
+	DialogTitle,
+	Input,
+} from "@/ui";
+
+function ConnectForm({ onCancel }: { onCancel?: () => void }) {
+	const { currentUrl, connectToInstance } = useDesktopInstance();
+	const [value, setValue] = useState(currentUrl);
+	const [error, setError] = useState<string | null>(null);
+	const [isSaving, setIsSaving] = useState(false);
+
+	const handleSubmit = (event: FormEvent) => {
+		event.preventDefault();
+		setIsSaving(true);
+		setError(null);
+		try {
+			connectToInstance(value);
+		} catch (submitError) {
+			setError(submitError instanceof Error ? submitError.message : "Invalid URL.");
+			setIsSaving(false);
+		}
+	};
+
+	return (
+		<form className="space-y-5" onSubmit={handleSubmit}>
+			<div className="space-y-2">
+				<label htmlFor="desktop-instance-url" className="sr-only">
+					Spacebot server URL
+				</label>
+				<Input
+					id="desktop-instance-url"
+					type="url"
+					value={value}
+					onChange={(event) => setValue(event.target.value)}
+					placeholder="http://127.0.0.1:19898"
+					icon={<HugeiconsIcon icon={LinkSquare02Icon} size={14} />}
+					size="md"
+					autoFocus
+					aria-invalid={!!error}
+					aria-describedby={error ? "desktop-instance-url-error" : undefined}
+				/>
+				{error ? (
+					<p id="desktop-instance-url-error" className="text-xs text-red-400">
+						{error}
+					</p>
+				) : null}
+			</div>
+
+			<div className="flex items-center justify-end gap-2">
+				{onCancel ? (
+					<Button type="button" variant="ghost" onClick={onCancel}>
+						Cancel
+					</Button>
+				) : null}
+				<Button type="submit" loading={isSaving}>
+					Connect
+				</Button>
+			</div>
+		</form>
+	);
+}
+
+export function DesktopInstanceDialog() {
+	const { dialogOpen, closeDialog } = useDesktopInstance();
+
+	return (
+		<Dialog open={dialogOpen} onOpenChange={(open) => !open && closeDialog()}>
+			<DialogContent className="max-w-sm">
+				<DialogHeader>
+					<DialogTitle>Change Server</DialogTitle>
+					<DialogDescription>
+						Point this app at a different Spacebot server.
+					</DialogDescription>
+				</DialogHeader>
+				<ConnectForm onCancel={closeDialog} />
+			</DialogContent>
+		</Dialog>
+	);
+}
+
+export function DesktopInstanceGate() {
+	const { isDesktop } = useDesktopInstance();
+
+	if (!isDesktop) return null;
+
+	return (
+		<div className="flex h-full items-center justify-center bg-app">
+			<Card className="w-full max-w-sm">
+				<CardHeader className="pb-4">
+					<CardTitle>Connect to Spacebot</CardTitle>
+					<CardDescription>Enter the URL of a running Spacebot server.</CardDescription>
+				</CardHeader>
+				<CardContent>
+					<ConnectForm />
+				</CardContent>
+			</Card>
+		</div>
+	);
+}

interface/src/components/Sidebar.tsx

@@ -79,7 +79,6 @@ function SortableAgentItem({ agentId, displayName, gradientStart, gradientEnd, i
 
 export function Sidebar({ liveStates: _liveStates }: SidebarProps) {
 	const [createOpen, setCreateOpen] = useState(false);
-
 	const { data: agentsData } = useQuery({
 		queryKey: ["agents"],
 		queryFn: api.agents,

interface/src/components/TopBar.tsx

@@ -1,6 +1,9 @@
 import { createContext, useContext, useRef, useCallback, useSyncExternalStore, type ReactNode, type MouseEvent } from "react";
 import { Link } from "@tanstack/react-router";
+import { LinkSquare02Icon } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/react";
 import { BASE_PATH, IS_TAURI } from "@/api/client";
+import { useDesktopInstance } from "@/hooks/useDesktopInstance";
 
 // ── Context ──────────────────────────────────────────────────────────────
 
@@ -68,6 +71,7 @@ export function useSetTopBar(node: ReactNode) {
 export function TopBar() {
 	const store = useContext(TopBarContext);
 	if (!store) throw new Error("TopBar must be used within TopBarProvider");
+	const { currentLabel, isDesktop, openDialog } = useDesktopInstance();
 
 	const content = useSyncExternalStore(
 		store.subscribe,
@@ -113,6 +117,19 @@ export function TopBar() {
 			<div className="flex min-w-0 flex-1 items-center">
 				{content}
 			</div>
+
+			{isDesktop ? (
+				<div className="mr-3 flex shrink-0 items-center">
+					<button
+						type="button"
+						onClick={openDialog}
+						className="flex items-center gap-2 rounded-lg border border-app-line bg-app-box/70 px-3 py-1.5 text-xs text-ink-dull transition-colors hover:border-accent/40 hover:text-ink"
+					>
+						<HugeiconsIcon icon={LinkSquare02Icon} size={14} />
+						<span className="max-w-[180px] truncate">{currentLabel}</span>
+					</button>
+				</div>
+			) : null}
 		</div>
 	);
 }

interface/src/hooks/useDesktopInstance.tsx

@@ -0,0 +1,62 @@
+import { createContext, useContext, useMemo, useState, type ReactNode } from "react";
+import {
+	getDesktopInstanceLabel,
+	getDesktopInstanceUrl,
+	hasSavedDesktopInstanceUrl,
+	isTauriDesktop,
+	saveDesktopInstanceUrl,
+} from "@/lib/backend";
+
+interface DesktopInstanceContextValue {
+	isDesktop: boolean;
+	currentUrl: string;
+	currentLabel: string;
+	hasConfiguredInstance: boolean;
+	dialogOpen: boolean;
+	openDialog: () => void;
+	closeDialog: () => void;
+	connectToInstance: (value: string) => string;
+}
+
+const DesktopInstanceContext = createContext<DesktopInstanceContextValue>({
+	isDesktop: false,
+	currentUrl: "",
+	currentLabel: "",
+	hasConfiguredInstance: false,
+	dialogOpen: false,
+	openDialog: () => {},
+	closeDialog: () => {},
+	connectToInstance: (value) => value,
+});
+
+export function DesktopInstanceProvider({ children }: { children: ReactNode }) {
+	const isDesktop = isTauriDesktop();
+	const [currentUrl, setCurrentUrl] = useState(() => getDesktopInstanceUrl());
+	const [dialogOpen, setDialogOpen] = useState(false);
+
+	const value = useMemo<DesktopInstanceContextValue>(() => ({
+		isDesktop,
+		currentUrl,
+		currentLabel: getDesktopInstanceLabel(currentUrl),
+		hasConfiguredInstance: hasSavedDesktopInstanceUrl(),
+		dialogOpen,
+		openDialog: () => setDialogOpen(true),
+		closeDialog: () => setDialogOpen(false),
+		connectToInstance: (value: string) => {
+			const nextUrl = saveDesktopInstanceUrl(value);
+			setCurrentUrl(nextUrl);
+			window.location.reload();
+			return nextUrl;
+		},
+	}), [currentUrl, dialogOpen, isDesktop]);
+
+	return (
+		<DesktopInstanceContext.Provider value={value}>
+			{children}
+		</DesktopInstanceContext.Provider>
+	);
+}
+
+export function useDesktopInstance() {
+	return useContext(DesktopInstanceContext);
+}