Add Project Home, Auth Bridge, shared auth token, and Tier-1 polish

Project Home (DESIGN-REVIEW §B2): the project is promoted from a 280px
sidebar card to a first-class main-area view. ProjectCard.tsx (1,257
lines) is replaced by a select-only ProjectRow plus tabs for Overview,
Sessions, Automation, Config and Files. The PortMappings, FileManager
and ContainerProgress modals are absorbed rather than reimplemented.
Config gains a Saved/Saving/Failed indicator — save-on-blur failures
previously reached only console.error.

Tier-1 polish (DESIGN-REVIEW §A): new elevation, muted-accent, disabled
and focus-ring tokens; a global :focus-visible ring with every
focus:outline-none removed; filled buttons moved to --accent-emphasis
and white-on-success toggles retired, fixing three WCAG AA failures
(2.1:1, 2.5:1, 2.4:1); a shared Modal primitive with role="dialog",
focus trap and restore, adopted by all remaining modals; status
indicators that carry a glyph and word rather than colour alone.

Ctrl+Shift+W closes a tab, deliberately not Ctrl+W — that is readline's
kill-word, used constantly in the terminal this app is built around.

Auth Bridge: a general loopback-callback bridge so browser logins run
inside a container (aws sso login, Concourse fly login, claude login)
can complete against the host browser. Listeners are discovered from
/proc/net/tcp{,6} — ss/netstat/lsof are absent from the image — bound on
host 127.0.0.1 only, and tunnelled in over the Docker API via socat,
which keeps working on Docker Desktop where container IPs are not
routable. Falls back to [::1] because Node resolves localhost to IPv6
first, so claude login often binds ::1 alone. Opt-in per project.

This extracts create_attached_exec() and moves the existing terminal
session path onto it, so there is one attached-exec implementation
rather than two.

Shared auth token: `claude setup-token` is run in a container, the token
is stored in the OS keychain and injected as CLAUDE_CODE_OAUTH_TOKEN
into Anthropic-backend projects. Contrary to the initial design note,
setup-token uses an Anthropic-hosted redirect and blocks on a stdin
paste prompt rather than a loopback callback, so a stdin command is
required for the flow to complete.

The token is never logged, never returned to the frontend, and is
redacted from the streamed output with a stateful matcher that withholds
any tail that could still grow into a secret. Change detection uses a
random rotation id rather than a hash, since a hash in a docker-inspect
readable label would be an offline verification oracle.

Frontend 33 -> 51 tests; Rust 34 tests. Both builds clean.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

app/src/hooks/useContainerProgress.ts

@@ -0,0 +1,25 @@
+import { useEffect } from "react";
+import { listen } from "@tauri-apps/api/event";
+import { useAppState } from "../store/appState";
+
+/**
+ * Single app-wide subscription to `container-progress`. Messages land in the
+ * store keyed by project id so sidebar rows and Project Home can both show
+ * inline progress — no blocking modal. The action that started the operation
+ * clears the line when it settles (see `useProjectActions`).
+ */
+export function useContainerProgress() {
+  useEffect(() => {
+    const unlisten = listen<{ project_id: string; message: string }>(
+      "container-progress",
+      (event) => {
+        useAppState
+          .getState()
+          .setContainerProgress(event.payload.project_id, event.payload.message);
+      },
+    );
+    return () => {
+      unlisten.then((f) => f()).catch(() => {});
+    };
+  }, []);
+}

app/src/hooks/useKeyboardShortcuts.ts

@@ -0,0 +1,92 @@
+import { useEffect } from "react";
+import { useAppState, isTerminalTab, tabKeyId } from "../store/appState";
+import { useTerminal } from "./useTerminal";
+
+/**
+ * App-level shortcuts. Registered on `document` in the *capture* phase so they
+ * win over xterm.js, which would otherwise forward them to the shell inside
+ * the container.
+ *
+ *   Ctrl+T        new Claude terminal for the current project
+ *   Ctrl+Shift+W  close the active tab
+ *   Ctrl+Tab      next tab (Ctrl+Shift+Tab for previous)
+ *   Ctrl+1..9     jump to the nth tab
+ */
+export function useKeyboardShortcuts() {
+  const { open: openTerminal, close: closeTerminal } = useTerminal();
+
+  useEffect(() => {
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (!e.ctrlKey || e.altKey || e.metaKey) return;
+
+      const state = useAppState.getState();
+
+      // Ctrl+Tab / Ctrl+Shift+Tab — cycle tabs
+      if (e.key === "Tab") {
+        if (state.tabOrder.length === 0) return;
+        e.preventDefault();
+        e.stopPropagation();
+        state.cycleTab(e.shiftKey ? -1 : 1);
+        return;
+      }
+
+      // Ctrl+Shift+W — close the active tab.
+      //
+      // Deliberately NOT plain Ctrl+W: that is readline's `kill-word` (delete
+      // the previous word), used constantly inside the terminal that is this
+      // app's centerpiece. Swallowing it globally would break word-erase in
+      // every shell and in Claude Code's own prompt.
+      if (e.shiftKey && (e.key === "w" || e.key === "W")) {
+        const key = state.activeTabKey;
+        if (!key) return;
+        e.preventDefault();
+        e.stopPropagation();
+        if (isTerminalTab(key)) {
+          closeTerminal(tabKeyId(key)).catch((err) =>
+            console.error("Failed to close terminal:", err),
+          );
+        } else {
+          state.closeHomeTab(tabKeyId(key));
+        }
+        return;
+      }
+
+      if (e.shiftKey) return;
+
+      // Ctrl+1..9 — jump to tab
+      if (/^[1-9]$/.test(e.key)) {
+        const index = Number(e.key) - 1;
+        if (index >= state.tabOrder.length) return;
+        e.preventDefault();
+        e.stopPropagation();
+        state.focusTabIndex(index);
+        return;
+      }
+
+      // Ctrl+T — new Claude terminal for the current project
+      if (e.key === "t" || e.key === "T") {
+        // Prefer the project owning the focused tab, then the sidebar selection.
+        const projectId =
+          state.sessions.find((s) => s.id === state.activeSessionId)?.projectId ??
+          state.selectedProjectId ??
+          null;
+        const project = state.projects.find((p) => p.id === projectId);
+        if (!project || project.status !== "running") return;
+        e.preventDefault();
+        e.stopPropagation();
+        openTerminal(project.id, project.name).catch((err) => {
+          state.pushToast({
+            kind: "error",
+            message: `Could not open a terminal for “${project.name}”`,
+            detail: String(err),
+          });
+        });
+        return;
+      }
+
+    };
+
+    document.addEventListener("keydown", onKeyDown, true);
+    return () => document.removeEventListener("keydown", onKeyDown, true);
+  }, [openTerminal, closeTerminal]);
+}

app/src/hooks/useProjectActions.ts

@@ -0,0 +1,150 @@
+import { useCallback, useState } from "react";
+import { save } from "@tauri-apps/plugin-dialog";
+import type { Project } from "../lib/types";
+import * as commands from "../lib/tauri-commands";
+import { useAppState } from "../store/appState";
+import { useProjects } from "./useProjects";
+import { useTerminal } from "./useTerminal";
+
+/**
+ * Lifecycle + terminal actions for one project, shared by the sidebar row and
+ * Project Home so both surfaces behave identically. Failures raise a toast
+ * (with expandable detail) rather than a blocking modal or a 12px card line.
+ */
+export function useProjectActions(project: Project) {
+  const { start, stop, rebuild } = useProjects();
+  const { open: openTerminal, sendInput } = useTerminal();
+  const pushToast = useAppState((s) => s.pushToast);
+  const setContainerProgress = useAppState((s) => s.setContainerProgress);
+  const [busy, setBusy] = useState(false);
+  const [backingUp, setBackingUp] = useState(false);
+
+  const fail = useCallback(
+    (message: string, error: unknown) => {
+      pushToast({ kind: "error", message, detail: String(error) });
+    },
+    [pushToast],
+  );
+
+  const run = useCallback(
+    async (label: string, fn: () => Promise<unknown>) => {
+      setBusy(true);
+      setContainerProgress(project.id, null);
+      try {
+        await fn();
+      } catch (e) {
+        fail(`${label} failed for “${project.name}”`, e);
+      } finally {
+        setContainerProgress(project.id, null);
+        setBusy(false);
+      }
+    },
+    [fail, project.id, project.name, setContainerProgress],
+  );
+
+  const handleStart = useCallback(
+    () => run("Start", () => start(project.id)),
+    [run, start, project.id],
+  );
+
+  const handleStop = useCallback(
+    () => run("Stop", () => stop(project.id)),
+    [run, stop, project.id],
+  );
+
+  const handleReset = useCallback(
+    () => run("Reset", () => rebuild(project.id)),
+    [run, rebuild, project.id],
+  );
+
+  const openClaudeTerminal = useCallback(async () => {
+    try {
+      return await openTerminal(project.id, project.name);
+    } catch (e) {
+      fail(`Could not open a Claude terminal for “${project.name}”`, e);
+      return null;
+    }
+  }, [openTerminal, project.id, project.name, fail]);
+
+  const openShell = useCallback(async () => {
+    try {
+      return await openTerminal(project.id, project.name, "bash");
+    } catch (e) {
+      fail(`Could not open a shell for “${project.name}”`, e);
+      return null;
+    }
+  }, [openTerminal, project.id, project.name, fail]);
+
+  /**
+   * Open a shell tab and type `command` into it. Used for [Resume] and for the
+   * capability drawer's "Manage in terminal" — the backend has no
+   * run-a-command entry point, so we drive the shell we just opened.
+   */
+  const openTerminalWithCommand = useCallback(
+    async (command: string, sessionLabel?: string) => {
+      try {
+        const sessionId = await openTerminal(
+          project.id,
+          project.name,
+          "bash",
+          sessionLabel,
+        );
+        // Give the login shell a moment to draw its prompt before typing.
+        setTimeout(() => {
+          sendInput(sessionId, `${command}\n`).catch((e) =>
+            fail("Could not send the command to the terminal", e),
+          );
+        }, 700);
+        return sessionId;
+      } catch (e) {
+        fail(`Could not open a terminal for “${project.name}”`, e);
+        return null;
+      }
+    },
+    [openTerminal, sendInput, project.id, project.name, fail],
+  );
+
+  const handleBackup = useCallback(async () => {
+    if (!project.container_id) {
+      pushToast({
+        kind: "error",
+        message: "Start the project at least once before backing up.",
+      });
+      return;
+    }
+    const stamp = new Date().toISOString().slice(0, 19).replace(/[:T]/g, "-");
+    const safeName = project.name.replace(/[^a-zA-Z0-9_-]+/g, "_");
+    try {
+      const hostPath = await save({
+        defaultPath: `${safeName}-backup-${stamp}.tar.gz`,
+        filters: [{ name: "Gzipped tarball", extensions: ["tar.gz"] }],
+      });
+      if (!hostPath) return;
+      setBackingUp(true);
+      const bytes = await commands.downloadContainerBackup(project.id, hostPath);
+      const mb = (bytes / (1024 * 1024)).toFixed(1);
+      pushToast({
+        kind: "success",
+        message: `Backup saved (${mb} MB).`,
+        detail:
+          "Includes Claude config — may contain API keys. Keep the archive private.",
+      });
+    } catch (e) {
+      fail("Backup failed", e);
+    } finally {
+      setBackingUp(false);
+    }
+  }, [project.container_id, project.id, project.name, pushToast, fail]);
+
+  return {
+    busy,
+    backingUp,
+    handleStart,
+    handleStop,
+    handleReset,
+    handleBackup,
+    openClaudeTerminal,
+    openShell,
+    openTerminalWithCommand,
+  };
+}

app/src/hooks/useSaveState.ts

@@ -0,0 +1,50 @@
+import { useCallback, useRef, useState } from "react";
+import type { Project } from "../lib/types";
+import { useAppState } from "../store/appState";
+import { useProjects } from "./useProjects";
+
+export type SaveStatus = "idle" | "saving" | "saved" | "failed";
+
+export interface SaveState {
+  status: SaveStatus;
+  error: string | null;
+}
+
+/**
+ * Save-on-blur with a *visible* outcome. Previously every config write
+ * swallowed its failure into `console.error`, which is silent data loss.
+ */
+export function useProjectSave(project: Project) {
+  const { update } = useProjects();
+  const pushToast = useAppState((s) => s.pushToast);
+  const [state, setState] = useState<SaveState>({ status: "idle", error: null });
+  const resetTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const save = useCallback(
+    async (patch: Partial<Project>) => {
+      if (resetTimer.current) clearTimeout(resetTimer.current);
+      setState({ status: "saving", error: null });
+      try {
+        await update({ ...project, ...patch });
+        setState({ status: "saved", error: null });
+        resetTimer.current = setTimeout(
+          () => setState({ status: "idle", error: null }),
+          2500,
+        );
+        return true;
+      } catch (e) {
+        const message = String(e);
+        setState({ status: "failed", error: message });
+        pushToast({
+          kind: "error",
+          message: `Could not save settings for “${project.name}”`,
+          detail: message,
+        });
+        return false;
+      }
+    },
+    [project, update, pushToast],
+  );
+
+  return { save, saveState: state };
+}