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/App.tsx

@@ -5,13 +5,20 @@ import TopBar from "./components/layout/TopBar";
 import StatusBar from "./components/layout/StatusBar";
 import TerminalView from "./components/terminal/TerminalView";
 import DockerInstallDialog from "./components/DockerInstallDialog";
+import ProjectHome from "./components/projects/home/ProjectHome";
+import AddProjectDialog from "./components/projects/AddProjectDialog";
+import ToastHost from "./components/ui/ToastHost";
+import StatusIndicator from "./components/ui/StatusIndicator";
+import Button from "./components/ui/Button";
 import { useDocker } from "./hooks/useDocker";
 import { useSettings } from "./hooks/useSettings";
 import { useProjects } from "./hooks/useProjects";
 import { useUpdates } from "./hooks/useUpdates";
 import { useTerminal } from "./hooks/useTerminal";
 import { useSTT } from "./hooks/useSTT";
-import { useAppState } from "./store/appState";
+import { useContainerProgress } from "./hooks/useContainerProgress";
+import { useKeyboardShortcuts } from "./hooks/useKeyboardShortcuts";
+import { useAppState, isHomeTab, tabKeyId, homeTabKey } from "./store/appState";
 import { reconcileProjectStatuses } from "./lib/tauri-commands";
 
 export default function App() {
@@ -19,9 +26,17 @@ export default function App() {
   const { loadSettings } = useSettings();
   const { refresh } = useProjects();
   const { loadVersion, checkForUpdates, checkImageUpdate, startPeriodicCheck } = useUpdates();
-  const { sessions, activeSessionId, setProjects, setSttToggle } = useAppState(
-    useShallow(s => ({ sessions: s.sessions, activeSessionId: s.activeSessionId, setProjects: s.setProjects, setSttToggle: s.setSttToggle }))
-  );
+  const { sessions, activeSessionId, tabOrder, activeTabKey, setProjects, setSttToggle } =
+    useAppState(
+      useShallow(s => ({
+        sessions: s.sessions,
+        activeSessionId: s.activeSessionId,
+        tabOrder: s.tabOrder,
+        activeTabKey: s.activeTabKey,
+        setProjects: s.setProjects,
+        setSttToggle: s.setSttToggle,
+      }))
+    );
   const [showInstallDialog, setShowInstallDialog] = useState(false);
 
   // Single STT instance bound to the active session. The mic lives in the
@@ -33,6 +48,9 @@ export default function App() {
     setSttToggle(stt.toggle);
   }, [stt.toggle, setSttToggle]);
 
+  useContainerProgress();
+  useKeyboardShortcuts();
+
   // Initialize on mount
   useEffect(() => {
     loadSettings();
@@ -69,16 +87,25 @@ export default function App() {
     };
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
+  const homeProjectIds = tabOrder.filter(isHomeTab).map(tabKeyId);
+
   return (
-    <div className="flex flex-col h-screen p-6 gap-4 bg-[var(--bg-primary)]">
+    <div className="flex flex-col h-screen p-3 gap-3 bg-[var(--bg-primary)]">
       <TopBar />
-      <div className="flex flex-1 min-h-0 gap-4">
+      <div className="flex flex-1 min-h-0 gap-3">
         <Sidebar />
-        <main className="flex-1 bg-[var(--bg-secondary)] border border-[var(--border-color)] rounded-lg min-w-0 overflow-hidden">
-          {sessions.length === 0 ? (
+        <main className="flex-1 bg-[var(--bg-secondary)] border border-[var(--border-color)] rounded-[var(--radius-panel)] min-w-0 overflow-hidden">
+          {tabOrder.length === 0 ? (
             <WelcomeScreen />
           ) : (
             <div className="w-full h-full">
+              {homeProjectIds.map((projectId) => (
+                <ProjectHome
+                  key={projectId}
+                  projectId={projectId}
+                  active={activeTabKey === homeTabKey(projectId)}
+                />
+              ))}
               {sessions.map((session) => (
                 <TerminalView
                   key={session.id}
@@ -91,6 +118,7 @@ export default function App() {
         </main>
       </div>
       <StatusBar stt={stt} />
+      <ToastHost />
       {showInstallDialog && (
         <DockerInstallDialog onClose={() => setShowInstallDialog(false)} />
       )}
@@ -98,18 +126,96 @@ export default function App() {
   );
 }
 
+/**
+ * First run is a checklist, not a paragraph: it reuses state the app already
+ * tracks and ends in a real button.
+ */
 function WelcomeScreen() {
+  const { dockerAvailable, imageExists, projects, openProjectHome } = useAppState(
+    useShallow((s) => ({
+      dockerAvailable: s.dockerAvailable,
+      imageExists: s.imageExists,
+      projects: s.projects,
+      openProjectHome: s.openProjectHome,
+    })),
+  );
+  const [showAdd, setShowAdd] = useState(false);
+
+  const steps: {
+    label: string;
+    state: boolean | null;
+    pendingLabel: string;
+    failLabel: string;
+  }[] = [
+    {
+      label: "Docker detected",
+      state: dockerAvailable,
+      pendingLabel: "Checking for Docker…",
+      failLabel: "Docker not available",
+    },
+    {
+      label: "Container image ready",
+      state: imageExists,
+      pendingLabel: "Checking for the image…",
+      failLabel: "Image not pulled yet — see Settings › Container",
+    },
+    {
+      label: `${projects.length} project${projects.length === 1 ? "" : "s"} configured`,
+      state: projects.length > 0 ? true : false,
+      pendingLabel: "",
+      failLabel: "No projects yet",
+    },
+  ];
+
   return (
-    <div className="flex items-center justify-center h-full text-[var(--text-secondary)]">
-      <div className="text-center">
-        <h1 className="text-3xl font-bold mb-2 text-[var(--text-primary)]">
-          Triple-C
-        </h1>
-        <p className="text-sm mb-4">Claude Code Container</p>
-        <p className="text-xs max-w-md">
-          Add a project from the sidebar, start its container, then open a
-          terminal to begin using Claude Code in a sandboxed environment.
+    <div className="flex items-center justify-center h-full p-6">
+      <div className="w-full max-w-md">
+        <h1 className="text-xl font-semibold text-[var(--text-primary)]">Triple-C</h1>
+        <p className="text-[13px] text-[var(--text-secondary)] mb-5">
+          Claude Code, sandboxed in a container.
         </p>
+
+        <ol className="space-y-2 mb-5">
+          {steps.map((step) => (
+            <li
+              key={step.label}
+              className="flex items-center gap-2 px-3 py-2 bg-[var(--bg-primary)] border border-[var(--border-color)] rounded-[var(--radius-control)]"
+            >
+              <StatusIndicator
+                tone={step.state === true ? "ok" : step.state === false ? "error" : "unknown"}
+                label={
+                  step.state === true
+                    ? step.label
+                    : step.state === false
+                      ? step.failLabel
+                      : step.pendingLabel
+                }
+                className="text-[13px]"
+              />
+            </li>
+          ))}
+        </ol>
+
+        <div className="flex items-center gap-2">
+          <Button size="md" variant="primary" onClick={() => setShowAdd(true)}>
+            {projects.length === 0 ? "Add your first project" : "Add a project"}
+          </Button>
+          {projects.length > 0 && (
+            <Button size="md" onClick={() => openProjectHome(projects[0].id)}>
+              Open {projects[0].name}
+            </Button>
+          )}
+        </div>
+
+        <p className="mt-4 text-xs text-[var(--text-secondary)]">
+          Then start its container and press{" "}
+          <kbd className="px-1 py-0.5 font-mono bg-[var(--bg-tertiary)] border border-[var(--border-color)] rounded-[4px]">
+            Ctrl+T
+          </kbd>{" "}
+          to open a Claude terminal.
+        </p>
+
+        {showAdd && <AddProjectDialog onClose={() => setShowAdd(false)} />}
       </div>
     </div>
   );