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/components/layout/HelpDialog.tsx

@@ -1,5 +1,7 @@
 import { useEffect, useRef, useCallback, useState } from "react";
 import { getHelpContent } from "../../lib/tauri-commands";
+import Modal from "../ui/Modal";
+import Button from "../ui/Button";
 
 interface Props {
   onClose: () => void;
@@ -140,32 +142,16 @@ function renderMarkdown(md: string): string {
 }
 
 export default function HelpDialog({ onClose }: Props) {
-  const overlayRef = useRef<HTMLDivElement>(null);
   const contentRef = useRef<HTMLDivElement>(null);
   const [markdown, setMarkdown] = useState<string | null>(null);
   const [error, setError] = useState<string | null>(null);
 
-  useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === "Escape") onClose();
-    };
-    document.addEventListener("keydown", handleKeyDown);
-    return () => document.removeEventListener("keydown", handleKeyDown);
-  }, [onClose]);
-
   useEffect(() => {
     getHelpContent()
       .then(setMarkdown)
       .catch((e) => setError(String(e)));
   }, []);
 
-  const handleOverlayClick = useCallback(
-    (e: React.MouseEvent<HTMLDivElement>) => {
-      if (e.target === overlayRef.current) onClose();
-    },
-    [onClose],
-  );
-
   // Handle anchor link clicks to scroll within the dialog
   const handleContentClick = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
     const target = e.target as HTMLElement;
@@ -179,40 +165,25 @@ export default function HelpDialog({ onClose }: Props) {
   }, []);
 
   return (
-    <div
-      ref={overlayRef}
-      onClick={handleOverlayClick}
-      className="fixed inset-0 bg-black/50 flex items-center justify-center z-50"
+    <Modal
+      title="How to Use Triple-C"
+      onClose={onClose}
+      widthClassName="w-[48rem]"
+      footer={<Button onClick={onClose}>Close</Button>}
     >
-      <div className="bg-[var(--bg-secondary)] border border-[var(--border-color)] rounded-lg shadow-xl w-[48rem] max-w-[90vw] max-h-[85vh] flex flex-col">
-        {/* Header */}
-        <div className="flex items-center justify-between px-6 py-4 border-b border-[var(--border-color)] flex-shrink-0">
-          <h2 className="text-lg font-semibold">How to Use Triple-C</h2>
-          <button
-            onClick={onClose}
-            className="px-3 py-1.5 text-xs bg-[var(--bg-tertiary)] border border-[var(--border-color)] rounded hover:bg-[var(--border-color)] transition-colors"
-          >
-            Close
-          </button>
-        </div>
-
-        {/* Scrollable content */}
-        <div
-          ref={contentRef}
-          onClick={handleContentClick}
-          className="flex-1 overflow-y-auto px-6 py-4 help-content"
-        >
-          {error && (
-            <p className="text-[var(--error)] text-sm">Failed to load help content: {error}</p>
-          )}
-          {!markdown && !error && (
-            <p className="text-[var(--text-secondary)] text-sm">Loading...</p>
-          )}
-          {markdown && (
-            <div dangerouslySetInnerHTML={{ __html: renderMarkdown(markdown) }} />
-          )}
-        </div>
+      <div ref={contentRef} onClick={handleContentClick} className="help-content">
+        {error && (
+          <p className="text-[var(--error)] text-sm">
+            Failed to load help content: {error}
+          </p>
+        )}
+        {!markdown && !error && (
+          <p className="text-[var(--text-secondary)] text-sm">Loading…</p>
+        )}
+        {markdown && (
+          <div dangerouslySetInnerHTML={{ __html: renderMarkdown(markdown) }} />
+        )}
       </div>
-    </div>
+    </Modal>
   );
 }

app/src/components/layout/MainTabs.tsx

@@ -0,0 +1,328 @@
+import { useEffect, useRef, useState } from "react";
+import { useShallow } from "zustand/react/shallow";
+import { useTerminal } from "../../hooks/useTerminal";
+import { useProjects } from "../../hooks/useProjects";
+import {
+  useAppState,
+  isHomeTab,
+  tabKeyId,
+  terminalTabKey,
+} from "../../store/appState";
+import { effectivePermissionMode } from "../projects/PermissionModeControl";
+import { ProjectStatusIndicator } from "../ui/StatusIndicator";
+import type { PermissionMode } from "../../lib/types";
+
+interface ContextMenuState {
+  sessionId: string;
+  x: number;
+  y: number;
+}
+
+const MODE_BADGE: Record<PermissionMode, { text: string; className: string }> = {
+  plan: { text: "plan", className: "bg-[var(--bg-tertiary)] text-[var(--text-secondary)]" },
+  default: { text: "ask", className: "bg-[var(--bg-tertiary)] text-[var(--text-secondary)]" },
+  acceptEdits: { text: "edits", className: "bg-[var(--accent-muted)] text-[var(--accent)]" },
+  bypass: { text: "bypass", className: "bg-[var(--warning-muted)] text-[var(--warning)]" },
+};
+
+/**
+ * One strip for both main-area tab kinds: Project Home views (⌂) and
+ * terminals (▣).
+ */
+export default function MainTabs() {
+  const { sessions, close } = useTerminal();
+  const { projects, update } = useProjects();
+  const { tabOrder, activeTabKey, setActiveTabKey, closeHomeTab } = useAppState(
+    useShallow((s) => ({
+      tabOrder: s.tabOrder,
+      activeTabKey: s.activeTabKey,
+      setActiveTabKey: s.setActiveTabKey,
+      closeHomeTab: s.closeHomeTab,
+    })),
+  );
+  const [menu, setMenu] = useState<ContextMenuState | null>(null);
+  const [renamingId, setRenamingId] = useState<string | null>(null);
+  const [renameDraft, setRenameDraft] = useState("");
+  const renameInputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (!menu) return;
+    const dismiss = () => setMenu(null);
+    window.addEventListener("click", dismiss);
+    window.addEventListener("scroll", dismiss, true);
+    return () => {
+      window.removeEventListener("click", dismiss);
+      window.removeEventListener("scroll", dismiss, true);
+    };
+  }, [menu]);
+
+  useEffect(() => {
+    if (renamingId) {
+      renameInputRef.current?.focus();
+      renameInputRef.current?.select();
+    }
+  }, [renamingId]);
+
+  if (tabOrder.length === 0) {
+    return (
+      <div className="px-3 text-xs text-[var(--text-secondary)] leading-10">
+        No open tabs — select a project to open its home view.
+      </div>
+    );
+  }
+
+  const getCustomName = (projectId: string, sessionId: string): string | null => {
+    const project = projects.find((p) => p.id === projectId);
+    return project?.renamed_session_names?.[sessionId] ?? null;
+  };
+
+  const startRename = (sessionId: string) => {
+    const session = sessions.find((s) => s.id === sessionId);
+    if (!session) return;
+    const current =
+      getCustomName(session.projectId, sessionId) ??
+      session.sessionName ??
+      session.projectName;
+    setRenameDraft(current);
+    setRenamingId(sessionId);
+    setMenu(null);
+  };
+
+  const commitRename = async (sessionId: string) => {
+    const session = sessions.find((s) => s.id === sessionId);
+    if (!session) {
+      setRenamingId(null);
+      return;
+    }
+    const project = projects.find((p) => p.id === session.projectId);
+    if (!project) {
+      setRenamingId(null);
+      return;
+    }
+    const trimmed = renameDraft.trim();
+    const map = { ...(project.renamed_session_names ?? {}) };
+    if (trimmed) {
+      map[sessionId] = trimmed;
+    } else {
+      delete map[sessionId];
+    }
+    try {
+      await update({ ...project, renamed_session_names: map });
+    } catch (err) {
+      console.error("Failed to rename terminal tab:", err);
+    } finally {
+      setRenamingId(null);
+    }
+  };
+
+  const clearCustomName = async (sessionId: string) => {
+    const session = sessions.find((s) => s.id === sessionId);
+    if (!session) return;
+    const project = projects.find((p) => p.id === session.projectId);
+    if (!project) return;
+    const map = { ...(project.renamed_session_names ?? {}) };
+    if (!(sessionId in map)) {
+      setMenu(null);
+      return;
+    }
+    delete map[sessionId];
+    try {
+      await update({ ...project, renamed_session_names: map });
+    } catch (err) {
+      console.error("Failed to reset terminal tab name:", err);
+    } finally {
+      setMenu(null);
+    }
+  };
+
+  const tabClass = (active: boolean) =>
+    `flex items-center gap-1.5 pl-3 pr-1.5 h-full text-xs cursor-pointer border-r border-[var(--border-color)] transition-colors ${
+      active
+        ? "bg-[var(--bg-primary)] text-[var(--text-primary)]"
+        : "text-[var(--text-secondary)] hover:text-[var(--text-primary)]"
+    }`;
+
+  return (
+    <div className="flex items-center h-full" role="tablist" aria-label="Open tabs">
+      {tabOrder.map((key) => {
+        const active = activeTabKey === key;
+
+        if (isHomeTab(key)) {
+          const projectId = tabKeyId(key);
+          const project = projects.find((p) => p.id === projectId);
+          if (!project) return null;
+          return (
+            <div
+              key={key}
+              role="tab"
+              aria-selected={active}
+              tabIndex={0}
+              onClick={() => setActiveTabKey(key)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  setActiveTabKey(key);
+                }
+              }}
+              className={tabClass(active)}
+            >
+              <span aria-hidden="true" className="text-[var(--text-secondary)]">⌂</span>
+              <span className="truncate max-w-[160px]" title={`${project.name} — project home`}>
+                {project.name}
+              </span>
+              <ProjectStatusIndicator status={project.status} iconOnly />
+              <button
+                type="button"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  closeHomeTab(projectId);
+                }}
+                aria-label={`Close ${project.name} home tab`}
+                title="Close tab"
+                className="w-6 h-6 flex items-center justify-center rounded-[var(--radius-control)] text-[var(--text-secondary)] hover:text-[var(--error)] hover:bg-[var(--bg-tertiary)] transition-colors"
+              >
+                <span aria-hidden="true">×</span>
+              </button>
+            </div>
+          );
+        }
+
+        const sessionId = tabKeyId(key);
+        const session = sessions.find((s) => s.id === sessionId);
+        if (!session) return null;
+        const project = projects.find((p) => p.id === session.projectId);
+        const customName = getCustomName(session.projectId, session.id);
+        const baseLabel =
+          (session.sessionName ?? session.projectName) +
+          (session.sessionType === "bash" ? " (bash)" : "");
+        const displayLabel = customName
+          ? `${session.projectName}: ${customName}`
+          : baseLabel;
+        const isRenaming = renamingId === session.id;
+        const badge = project ? MODE_BADGE[effectivePermissionMode(project)] : null;
+
+        return (
+          <div
+            key={key}
+            role="tab"
+            aria-selected={active}
+            tabIndex={0}
+            onClick={() => setActiveTabKey(terminalTabKey(session.id))}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                setActiveTabKey(terminalTabKey(session.id));
+              }
+            }}
+            onContextMenu={(e) => {
+              e.preventDefault();
+              setMenu({ sessionId: session.id, x: e.clientX, y: e.clientY });
+            }}
+            onDoubleClick={() => startRename(session.id)}
+            className={tabClass(active)}
+          >
+            <span aria-hidden="true" className="text-[var(--text-secondary)]">▣</span>
+            {isRenaming ? (
+              <input
+                ref={renameInputRef}
+                value={renameDraft}
+                aria-label="Rename tab"
+                onChange={(e) => setRenameDraft(e.target.value)}
+                onClick={(e) => e.stopPropagation()}
+                onBlur={() => commitRename(session.id)}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter") (e.target as HTMLInputElement).blur();
+                  if (e.key === "Escape") setRenamingId(null);
+                }}
+                className="max-w-[180px] px-1 py-0 bg-[var(--bg-primary)] border border-[var(--accent)] rounded-[var(--radius-control)] text-xs text-[var(--text-primary)]"
+              />
+            ) : (
+              <span className="truncate max-w-[180px]" title={displayLabel}>
+                {displayLabel}
+              </span>
+            )}
+            {badge && (
+              <span
+                className={`px-1 py-0.5 rounded-[4px] text-[10px] leading-none font-medium ${badge.className}`}
+                title={`Permission mode: ${badge.text}`}
+              >
+                {badge.text}
+              </span>
+            )}
+            <button
+              type="button"
+              onClick={(e) => {
+                e.stopPropagation();
+                close(session.id);
+              }}
+              aria-label={`Close ${displayLabel}`}
+              title="Close terminal"
+              className="w-6 h-6 flex items-center justify-center rounded-[var(--radius-control)] text-[var(--text-secondary)] hover:text-[var(--error)] hover:bg-[var(--bg-tertiary)] transition-colors"
+            >
+              <span aria-hidden="true">×</span>
+            </button>
+          </div>
+        );
+      })}
+
+      {menu && (() => {
+        const session = sessions.find((s) => s.id === menu.sessionId);
+        const hasCustom = session
+          ? !!getCustomName(session.projectId, menu.sessionId)
+          : false;
+        return (
+          <div
+            role="menu"
+            className="fixed z-50 min-w-[160px] py-1 bg-[var(--bg-overlay)] border border-[var(--border-color)] rounded-[var(--radius-panel)] text-xs"
+            style={{ top: menu.y, left: menu.x, boxShadow: "var(--shadow-overlay)" }}
+            onClick={(e) => e.stopPropagation()}
+          >
+            <button
+              type="button"
+              role="menuitem"
+              className="w-full text-left px-3 py-1.5 text-[var(--text-primary)] hover:bg-[var(--bg-tertiary)] transition-colors"
+              onClick={() => startRename(menu.sessionId)}
+            >
+              Rename tab
+            </button>
+            {hasCustom && (
+              <button
+                type="button"
+                role="menuitem"
+                className="w-full text-left px-3 py-1.5 text-[var(--text-secondary)] hover:bg-[var(--bg-tertiary)] transition-colors"
+                onClick={() => clearCustomName(menu.sessionId)}
+              >
+                Reset name
+              </button>
+            )}
+            {session && (
+              <button
+                type="button"
+                role="menuitem"
+                className="w-full text-left px-3 py-1.5 text-[var(--text-primary)] hover:bg-[var(--bg-tertiary)] transition-colors"
+                onClick={() => {
+                  useAppState.getState().openProjectHome(session.projectId);
+                  setMenu(null);
+                }}
+              >
+                Open project home
+              </button>
+            )}
+            <div className="border-t border-[var(--border-color)] my-1" />
+            <button
+              type="button"
+              role="menuitem"
+              className="w-full text-left px-3 py-1.5 text-[var(--error)] hover:bg-[var(--bg-tertiary)] transition-colors"
+              onClick={() => {
+                close(menu.sessionId);
+                setMenu(null);
+              }}
+            >
+              Close tab
+            </button>
+          </div>
+        );
+      })()}
+    </div>
+  );
+}

app/src/components/layout/Sidebar.test.tsx

@@ -34,6 +34,12 @@ describe("Sidebar", () => {
     expect(screen.getByText("Settings")).toBeInTheDocument();
   });
 
+  it("renders the project list, not a settings form, in the projects view", () => {
+    render(<Sidebar />);
+    expect(screen.getByTestId("project-list")).toBeInTheDocument();
+    expect(screen.queryByTestId("settings-panel")).not.toBeInTheDocument();
+  });
+
   it("content area has min-w-0 to prevent flex overflow", () => {
     const { container } = render(<Sidebar />);
     const contentArea = container.querySelector(".overflow-y-auto");

app/src/components/layout/Sidebar.tsx

@@ -63,7 +63,7 @@ export default function Sidebar() {
     };
 
     return (
-      <div className="flex flex-col h-full w-12 bg-[var(--bg-secondary)] border border-[var(--border-color)] rounded-lg overflow-hidden">
+      <div className="flex flex-col h-full w-12 bg-[var(--bg-secondary)] border border-[var(--border-color)] rounded-[var(--radius-panel)] overflow-hidden">
         <button
           onClick={toggleSidebarCollapsed}
           title="Expand sidebar"
@@ -89,7 +89,7 @@ export default function Sidebar() {
     }`;
 
   return (
-    <div className="flex flex-col h-full w-[25%] min-w-56 max-w-80 bg-[var(--bg-secondary)] border border-[var(--border-color)] rounded-lg overflow-hidden">
+    <div className="flex flex-col h-full w-[25%] min-w-56 max-w-80 bg-[var(--bg-secondary)] border border-[var(--border-color)] rounded-[var(--radius-panel)] overflow-hidden">
       {/* Nav tabs */}
       <div className="flex border-b border-[var(--border-color)]">
         <button onClick={() => setSidebarView("projects")} className={tabCls("projects")}>

app/src/components/layout/StatusBar.tsx

@@ -25,7 +25,7 @@ export default function StatusBar({ stt }: Props) {
   const running = projects.filter((p) => p.status === "running").length;
 
   return (
-    <div className="flex items-center h-6 px-4 bg-[var(--bg-tertiary)] border border-[var(--border-color)] rounded-lg text-xs text-[var(--text-secondary)]">
+    <div className="flex items-center h-6 px-4 bg-[var(--bg-tertiary)] border border-[var(--border-color)] rounded-[var(--radius-panel)] text-xs text-[var(--text-secondary)]">
       <span>
         {projects.length} project{projects.length !== 1 ? "s" : ""}
       </span>

app/src/components/layout/TopBar.tsx

@@ -1,11 +1,12 @@
 import { useState } from "react";
 import { useShallow } from "zustand/react/shallow";
-import TerminalTabs from "../terminal/TerminalTabs";
+import MainTabs from "./MainTabs";
 import { useAppState } from "../../store/appState";
 import { useSettings } from "../../hooks/useSettings";
 import UpdateDialog from "../settings/UpdateDialog";
 import ImageUpdateDialog from "../settings/ImageUpdateDialog";
 import HelpDialog from "./HelpDialog";
+import StatusIndicator, { type StatusTone } from "../ui/StatusIndicator";
 
 export default function TopBar() {
   const { dockerAvailable, imageExists, updateInfo, imageUpdateInfo, appVersion, setUpdateInfo, setImageUpdateInfo } = useAppState(
@@ -48,34 +49,48 @@ export default function TopBar() {
 
   return (
     <>
-      <div className="flex items-center h-10 bg-[var(--bg-secondary)] border border-[var(--border-color)] rounded-lg overflow-hidden">
-        <div className="flex-1 overflow-x-auto pl-2">
-          <TerminalTabs />
+      <div className="flex items-center h-10 bg-[var(--bg-secondary)] border border-[var(--border-color)] rounded-[var(--radius-panel)] overflow-hidden">
+        <div className="flex-1 overflow-x-auto pl-1">
+          <MainTabs />
         </div>
-        <div className="flex items-center gap-2 px-4 flex-shrink-0 text-xs text-[var(--text-secondary)]">
+        <div className="flex items-center gap-3 px-3 flex-shrink-0 text-xs text-[var(--text-secondary)]">
           {updateInfo && (
             <button
+              type="button"
               onClick={() => setShowUpdateDialog(true)}
-              className="px-2 py-0.5 rounded text-xs font-medium bg-[var(--accent)] text-white animate-pulse hover:bg-[var(--accent-hover)] transition-colors"
+              className="h-6 px-2 rounded-[var(--radius-control)] text-xs font-medium bg-[var(--accent-emphasis)] text-white hover:bg-[var(--accent-emphasis-hover)] transition-colors"
             >
               Update
             </button>
           )}
           {imageUpdateInfo && (
             <button
+              type="button"
               onClick={() => setShowImageUpdateDialog(true)}
-              className="px-2 py-0.5 rounded text-xs font-medium bg-[var(--warning,#f59e0b)] text-white hover:opacity-80 transition-colors"
+              className="h-6 px-2 rounded-[var(--radius-control)] text-xs font-medium bg-[var(--warning-emphasis)] text-white hover:opacity-90 transition-colors"
               title="A newer container image is available"
             >
               Image Update
             </button>
           )}
-          <StatusDot ok={dockerAvailable === true} label="Docker" />
-          <StatusDot ok={imageExists === true} label="Image" />
+          <HealthDot
+            state={dockerAvailable}
+            okLabel="Docker"
+            failLabel="Docker unavailable"
+            pendingLabel="Docker — checking"
+          />
+          <HealthDot
+            state={imageExists}
+            okLabel="Image"
+            failLabel="Image missing"
+            pendingLabel="Image — checking"
+          />
           <button
+            type="button"
             onClick={() => setShowHelpDialog(true)}
             title="Help"
-            className="ml-1 w-5 h-5 flex items-center justify-center rounded-full border border-[var(--border-color)] text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:border-[var(--text-secondary)] transition-colors text-xs font-semibold leading-none"
+            aria-label="Help"
+            className="w-6 h-6 flex items-center justify-center rounded-[var(--radius-control)] border border-[var(--border-color)] text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:border-[var(--text-secondary)] transition-colors text-xs font-semibold leading-none"
           >
             ?
           </button>
@@ -103,15 +118,29 @@ export default function TopBar() {
   );
 }
 
-function StatusDot({ ok, label }: { ok: boolean; label: string }) {
-  return (
-    <span className="flex items-center gap-1">
-      <span
-        className={`inline-block w-2 h-2 rounded-full ${
-          ok ? "bg-[var(--success)]" : "bg-[var(--text-secondary)]"
-        }`}
-      />
-      {label}
-    </span>
-  );
+/**
+ * `null` (still checking) is visually distinct and pulses; `false` is an
+ * outage and renders red — previously both fell through to the same gray dot.
+ */
+function HealthDot({
+  state,
+  okLabel,
+  failLabel,
+  pendingLabel,
+}: {
+  state: boolean | null;
+  okLabel: string;
+  failLabel: string;
+  pendingLabel: string;
+}) {
+  let tone: StatusTone = "unknown";
+  let label = pendingLabel;
+  if (state === true) {
+    tone = "ok";
+    label = okLabel;
+  } else if (state === false) {
+    tone = "error";
+    label = failLabel;
+  }
+  return <StatusIndicator tone={tone} label={label} />;
 }