Add "Log in with browser" cloud device login

Connects the desktop app to Voicebox Cloud without the user ever handling an
API key. One button in Settings → General opens the system browser to
voicebox.sh, the user authorizes while signed in, and the credential lands
back in the app automatically.

Backend (FastAPI):
- /cloud/login/start opens the browser to the cloud authorize page with a
  state we mint; the existing loopback server catches the redirect at
  /cloud/callback and exchanges the one-time code (server-to-server, over TLS)
  for a voicebox_ API key, verifies it against the API, and stores it.
- /cloud/status and /cloud/disconnect back the settings UI.
- state round-trip guards against login-CSRF; the key never crosses a browser
  URL and is never exposed to the frontend (status returns a prefix only).
- CloudSettings singleton row; config gains VOICEBOX_CLOUD_URL /
  VOICEBOX_CLOUD_API_URL (default the prod hosts, overridable for dev).

Frontend (React):
- CloudSection in Settings → General: "Log in with browser", polls status,
  shows the connected device + a dashboard link. API keys are the advanced
  path only, surfaced in the web dashboard.

The key is stored in the local app DB for now; OS keychain is a marked
follow-up.

app/src/components/ServerTab/CloudSection.tsx

@@ -0,0 +1,131 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { Cloud, Loader2 } from 'lucide-react';
+import { useEffect, useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { useToast } from '@/components/ui/use-toast';
+import { apiClient } from '@/lib/api/client';
+import { SettingRow, SettingSection } from './SettingRow';
+
+// "Log in with browser" device pairing. The backend opens the system browser
+// and completes the code exchange; here we just kick it off and poll status
+// until the link goes live. The API key never touches the frontend.
+export function CloudSection() {
+  const { toast } = useToast();
+  const queryClient = useQueryClient();
+  const [polling, setPolling] = useState(false);
+
+  const { data: status } = useQuery({
+    queryKey: ['cloud-status'],
+    queryFn: () => apiClient.getCloudStatus(),
+    refetchInterval: polling ? 2000 : false,
+  });
+
+  const connected = status?.connected ?? false;
+
+  // Once the browser flow completes, stop polling and celebrate.
+  useEffect(() => {
+    if (connected && polling) {
+      setPolling(false);
+      toast({
+        title: 'Connected to Voicebox Cloud',
+        description: `Linked as ${status?.device_name ?? 'this device'}.`,
+      });
+    }
+  }, [connected, polling, status?.device_name, toast]);
+
+  const startLogin = useMutation({
+    mutationFn: () => apiClient.startCloudLogin(),
+    onSuccess: () => {
+      setPolling(true);
+      toast({
+        title: 'Continue in your browser',
+        description: 'Authorize this device, then return here.',
+      });
+    },
+    onError: (error: Error) =>
+      toast({
+        title: 'Could not start sign-in',
+        description: error.message,
+        variant: 'destructive',
+      }),
+  });
+
+  const disconnect = useMutation({
+    mutationFn: () => apiClient.disconnectCloud(),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['cloud-status'] });
+      toast({
+        title: 'Disconnected',
+        description: 'This device is no longer linked. The key stays valid until revoked in your account.',
+      });
+    },
+    onError: (error: Error) =>
+      toast({ title: 'Could not disconnect', description: error.message, variant: 'destructive' }),
+  });
+
+  const busy = startLogin.isPending || polling;
+
+  return (
+    <SettingSection
+      title="Voicebox Cloud"
+      description="End-to-end encrypted backup & sync across your devices."
+    >
+      <SettingRow
+        title={connected ? 'Connected' : 'Account'}
+        description={
+          connected
+            ? `Linked as ${status?.device_name ?? 'this device'}${
+                status?.key_prefix ? ` · ${status.key_prefix}…` : ''
+              }`
+            : 'Log in to back up and sync your captures and generations.'
+        }
+        action={
+          connected ? (
+            <Button
+              disabled={disconnect.isPending}
+              onClick={() => disconnect.mutate()}
+              size="sm"
+              variant="outline"
+            >
+              {disconnect.isPending ? (
+                <Loader2 className="h-3.5 w-3.5 animate-spin" />
+              ) : (
+                'Disconnect'
+              )}
+            </Button>
+          ) : (
+            <Button disabled={busy} onClick={() => startLogin.mutate()} size="sm">
+              {busy ? (
+                <>
+                  <Loader2 className="h-3.5 w-3.5 mr-1.5 animate-spin" />
+                  {polling ? 'Waiting for browser…' : 'Opening…'}
+                </>
+              ) : (
+                <>
+                  <Cloud className="h-3.5 w-3.5 mr-1.5" />
+                  Log in with browser
+                </>
+              )}
+            </Button>
+          )
+        }
+      />
+
+      {connected && (
+        <SettingRow
+          title="Manage"
+          description="Revoke this device, add API keys, or manage billing from your account."
+        >
+          <a
+            className="text-sm text-accent hover:underline"
+            href="https://voicebox.sh/account"
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            Open account dashboard ↗
+          </a>
+        </SettingRow>
+      )}
+    </SettingSection>
+  );
+}

app/src/components/ServerTab/GeneralPage.tsx

@@ -14,6 +14,7 @@ import { useAutoUpdater } from '@/hooks/useAutoUpdater';
 import { useServerHealth } from '@/lib/hooks/useServer';
 import { usePlatform } from '@/platform/PlatformContext';
 import { useServerStore } from '@/stores/serverStore';
+import { CloudSection } from './CloudSection';
 import { LanguageSelect } from './LanguageSelect';
 import { SettingRow, SettingSection } from './SettingRow';
 import { ThemeSelect } from './ThemeSelect';
@@ -207,6 +208,8 @@ export function GeneralPage() {
         />
       </SettingSection>
 
+      <CloudSection />
+
       <ApiReferenceCard serverUrl={serverUrl} />
 
       {platform.metadata.isTauri && <UpdatesSection />}

app/src/lib/api/client.ts

@@ -50,6 +50,8 @@ import type {
   MCPClientBinding,
   MCPClientBindingListResponse,
   MCPClientBindingUpsert,
+  CloudLoginStartResponse,
+  CloudStatus,
 } from './types';
 
 function formatErrorDetail(detail: unknown, fallback: string): string {
@@ -920,6 +922,21 @@ class ApiClient {
 
     return response.blob();
   }
+
+  // Cloud (backup & sync) — browser-based device login. startCloudLogin opens
+  // the system browser server-side; the UI then polls getCloudStatus until the
+  // backend completes the exchange and the link goes live.
+  async getCloudStatus(): Promise<CloudStatus> {
+    return this.request<CloudStatus>('/cloud/status');
+  }
+
+  async startCloudLogin(): Promise<CloudLoginStartResponse> {
+    return this.request<CloudLoginStartResponse>('/cloud/login/start', { method: 'POST' });
+  }
+
+  async disconnectCloud(): Promise<CloudStatus> {
+    return this.request<CloudStatus>('/cloud/disconnect', { method: 'POST' });
+  }
 }
 
 export const apiClient = new ApiClient();

app/src/lib/api/types.ts

@@ -521,3 +521,17 @@ export interface MCPClientBindingUpsert {
 export interface MCPClientBindingListResponse {
   items: MCPClientBinding[];
 }
+
+/* ─── Cloud (backup & sync) ───────────────────────────────────────────── */
+
+export interface CloudLoginStartResponse {
+  authorize_url: string;
+}
+
+export interface CloudStatus {
+  connected: boolean;
+  device_name: string | null;
+  account_user_id: string | null;
+  key_prefix: string | null;
+  connected_at: string | null;
+}