failproofai 1.0.0 → 1.0.1-beta.0

package/.next/standalone/app/settings/settings-client.tsx

@@ -1,31 +1,59 @@
 "use client";
 
 /**
- * /settings client — two sections (scheduled audit, email reports) plus the
- * degraded states that are most of the real screens: daemon not installed /
- * stopped / unsupported, no scan ever run, a scan running now, a last run that
- * failed, signed out, and not cloud-enrolled. Each is shown explicitly, because
- * a missing control reads as a bug.
+ * /settings — what failproof does on its own, while you are not looking.
  *
- * Visual conventions are the site chrome's, matched to /policies: the brutalist
- * `.report`/`.section`/`.panel`/`.btn` classes from globals.css, the same
- * emerald switch /policies uses (PolicyToggle), inline `var(--…)` colours, and
- * the shared `toast()`. No new design language, colour, or component library.
+ * ## The design
  *
- * All writes go through server actions that call `updateConfig` — never a raw
- * file write — so the CLI and dashboard cannot diverge. The parity mapping is
- * documented on each action module.
+ * The subject is not a preferences form, it is a **console for a service running
+ * on your box**, so the page is built from what that service actually has: a
+ * state, a timer, a last result, and an identity it reports under. Two rows,
+ * drawn as one instrument:
+ *
+ *   - a **stat row** — four cells, each a single fact, no two sharing a unit.
+ *     It answers "what is happening right now" with no history and no chart.
+ *   - a **panel row** — the controls on the left, what the scan actually does on
+ *     the right, as three labelled lines rather than the paragraph they used to
+ *     be. Same words, skimmable.
+ *
+ * The hairlines between cells are one `gap: 1px` over a line-coloured
+ * background, not per-cell borders, so every rule is exactly one pixel and they
+ * cannot double up where cells meet.
+ *
+ * **The signature is still the schedule tape**, now under the panels. A scan on
+ * a timer has one fact no number can express — where you are between the last
+ * scan and the next — so it is drawn, and it draws nothing when there aren't two
+ * real ends to sit between.
+ *
+ * Everything is existing tokens: the charcoal stack, pink for the control that
+ * acts and for anything wrong, mint for the thing that is alive. No third hue,
+ * no new webfont, one hard pixel shadow on the console. That is the budget.
+ *
+ * ## One switch, not two
+ *
+ * Scheduling and mailing are the same decision — the reason to put a scan on a
+ * timer is to be told what it found. So there is one toggle, it requires a
+ * sign-in, and "signed out with the timer on" is a real state the page names
+ * rather than a contradiction it prevents.
  */
 
-import { useCallback, useEffect, useRef, useState } from "react";
-import { getScheduledAuditAction, type ScheduledAuditView } from "@/app/actions/get-scheduled-audit";
-import { setAutoAuditAction, setAuditIntervalAction } from "@/app/actions/update-scheduled-audit";
+import { useCallback, useEffect, useRef, useState, type ReactNode } from "react";
+import {
+  getScheduledAuditAction,
+  type ScheduledAuditView,
+} from "@/app/actions/get-scheduled-audit";
+import {
+  setAutoAuditAction,
+  setAuditIntervalAction,
+} from "@/app/actions/update-scheduled-audit";
 import { triggerRun, RerunError } from "@/app/audit/_components/rerun-button";
+import { AuthDialog, type AuthedUser } from "@/app/audit/_components/auth-dialog";
 import { toast } from "@/app/components/toast";
-import { fetchWithTimeout } from "@/lib/fetch-with-timeout";
 import { formatRelativeTime } from "@/lib/format-duration";
+import "./settings.css";
 
-// ── formatting helpers ───────────────────────────────────────────────────────
+const MIN_INTERVAL_DAYS = 1;
+const MAX_INTERVAL_DAYS = 90;
 
 function fmtAbsolute(ms: number): string {
   return new Date(ms).toLocaleString(undefined, {
@@ -36,18 +64,98 @@ function fmtAbsolute(ms: number): string {
   });
 }
 
-/** "in 6d" / "in 3h" / "in 12m" / "now". formatRelativeTime only speaks past. */
-function fmtFuture(ms: number): string {
-  const diff = ms - Date.now();
+/** "6d 4h" / "3h" / "12m" / "now". `formatRelativeTime` only speaks past. */
+function fmtUntil(ms: number, now: number): string {
+  const diff = ms - now;
   if (diff <= 0) return "now";
-  if (diff < 3_600_000) return `in ${Math.max(1, Math.floor(diff / 60_000))}m`;
-  if (diff < 86_400_000) return `in ${Math.floor(diff / 3_600_000)}h`;
-  return `in ${Math.floor(diff / 86_400_000)}d`;
+  const d = Math.floor(diff / 86_400_000);
+  const h = Math.floor((diff % 86_400_000) / 3_600_000);
+  if (d > 0) return h > 0 ? `${d}d ${h}h` : `${d}d`;
+  if (h > 0) return `${h}h`;
+  return `${Math.max(1, Math.floor(diff / 60_000))}m`;
+}
+
+/** "11d" / "4h" / "9m" — how long the service has been up. */
+function fmtSpan(ms: number): string {
+  const d = Math.floor(ms / 86_400_000);
+  if (d > 0) return `${d}d`;
+  const h = Math.floor(ms / 3_600_000);
+  if (h > 0) return `${h}h`;
+  return `${Math.max(1, Math.floor(ms / 60_000))}m`;
+}
+
+function num(n: number): string {
+  return n.toLocaleString("en-US");
+}
+
+/**
+ * One cell of the stat row: a label, one value, one sub-line.
+ *
+ * `tone` colours the VALUE only — mint for alive, pink for anything that needs a
+ * person. The label and sub-line stay in the ink ramp, so a row of four cells
+ * reads as one instrument rather than four competing signals.
+ */
+function StatCell({
+  label,
+  value,
+  sub,
+  tone,
+}: {
+  label: string;
+  value: ReactNode;
+  sub?: ReactNode;
+  tone?: "ok" | "warn";
+}) {
+  return (
+    <div className="set-stat">
+      <div className="set-stat-label">{label}</div>
+      <div className={`set-stat-value${tone ? ` ${tone}` : ""}`}>{value}</div>
+      <div className="set-stat-sub">{sub ?? " "}</div>
+    </div>
+  );
 }
 
-// ── shared primitives (match /policies) ──────────────────────────────────────
+/**
+ * The schedule tape — where this machine is between two scans.
+ *
+ * Drawn rather than stated because the fact is a POSITION, and a position is
+ * the one thing a number cannot show at a glance. The filled span is elapsed,
+ * the marker is now, the ends are the two scans.
+ *
+ * Renders nothing without both ends: a machine that has never run a scheduled
+ * scan has no interval to be inside, and an empty rail claiming otherwise would
+ * be decoration.
+ */
+function ScheduleTape({
+  lastRunAtMs,
+  nextDueAtMs,
+  now,
+}: {
+  lastRunAtMs: number | null;
+  nextDueAtMs: number | null;
+  /** Stamped by the parent on load and on every focus refresh. Passed in
+   *  rather than read here so this component stays pure during render — and so
+   *  the marker moves when the page is refocused, which is the only moment
+   *  anyone is looking at it. */
+  now: number;
+}) {
+  if (lastRunAtMs == null || nextDueAtMs == null || nextDueAtMs <= lastRunAtMs) return null;
+  const pct = Math.min(100, Math.max(0, ((now - lastRunAtMs) / (nextDueAtMs - lastRunAtMs)) * 100));
+
+  return (
+    <div className="tape" aria-hidden="true">
+      <div className="tape-rail">
+        <div className="tape-fill" style={{ width: `${pct}%` }} />
+        <div className="tape-now" style={{ left: `${pct}%` }} />
+      </div>
+      <div className="tape-ends">
+        <span>last scan · {fmtAbsolute(lastRunAtMs)}</span>
+        <span className="tape-next">next · {fmtUntil(nextDueAtMs, now)}</span>
+      </div>
+    </div>
+  );
+}
 
-/** The exact switch /policies uses — copied shape, not a new control. */
 function Toggle({
   enabled,
   onChange,
@@ -62,426 +170,509 @@ function Toggle({
   return (
     <button
       type="button"
-      onClick={onChange}
-      disabled={disabled}
       role="switch"
       aria-checked={enabled}
       aria-label={label}
-      className={`relative inline-flex h-4 w-7 shrink-0 items-center rounded-full transition-colors disabled:opacity-40 ${
-        enabled ? "bg-emerald-500" : "bg-muted-foreground/30"
-      }`}
+      disabled={disabled}
+      onClick={onChange}
+      className="sw"
+      data-on={enabled ? "true" : "false"}
     >
-      <span
-        className={`inline-block h-3 w-3 rounded-full bg-white shadow transition-transform ${
-          enabled ? "translate-x-3.5" : "translate-x-0.5"
-        }`}
-      />
+      <span className="sw-knob" />
     </button>
   );
 }
 
-type PillTone = "ok" | "warn" | "bad" | "muted";
-const PILL_TONE: Record<PillTone, { fg: string; bg: string; bd: string }> = {
-  ok: { fg: "var(--accent-green)", bg: "rgba(102,209,181,0.10)", bd: "rgba(102,209,181,0.30)" },
-  warn: { fg: "var(--amber)", bg: "rgba(232,196,106,0.10)", bd: "rgba(232,196,106,0.30)" },
-  bad: { fg: "var(--accent-pink)", bg: "rgba(228,88,124,0.10)", bd: "rgba(228,88,124,0.30)" },
-  muted: { fg: "var(--ink-2)", bg: "transparent", bd: "var(--line-2)" },
-};
-
-function Pill({ tone, children }: { tone: PillTone; children: React.ReactNode }) {
-  const t = PILL_TONE[tone];
-  return (
-    <span
-      style={{
-        display: "inline-flex",
-        alignItems: "center",
-        gap: 6,
-        padding: "3px 9px",
-        fontFamily: "var(--font-mono)",
-        fontSize: 11,
-        letterSpacing: "0.04em",
-        color: t.fg,
-        background: t.bg,
-        border: `1px solid ${t.bd}`,
-        textTransform: "uppercase",
-      }}
-    >
-      {children}
-    </span>
-  );
-}
-
-const SECTION_TITLE: React.CSSProperties = {
-  fontFamily: "var(--font-mono)",
-  fontSize: 16,
-  fontWeight: 600,
-  letterSpacing: "-0.01em",
-  color: "var(--ink)",
-  margin: "0 0 4px",
-};
-const BODY: React.CSSProperties = {
-  fontFamily: "var(--font-mono)",
-  fontSize: 13,
-  color: "var(--ink-2)",
-  lineHeight: 1.65,
-  margin: 0,
-};
-const MUTED: React.CSSProperties = { ...BODY, color: "var(--dim)", fontSize: 12 };
-const CODE: React.CSSProperties = { color: "var(--ink)", fontVariantLigatures: "none" };
-
-/** A monospace inline command the user can copy by eye. */
-function Cmd({ children }: { children: React.ReactNode }) {
-  return (
-    <code
-      style={{
-        fontFamily: "var(--font-mono)",
-        fontSize: 12,
-        color: "var(--accent-green)",
-        background: "var(--bg-2)",
-        border: "1px solid var(--line-2)",
-        padding: "1px 6px",
-        whiteSpace: "nowrap",
-      }}
-    >
-      {children}
-    </code>
-  );
-}
-
-// ── scheduled audit section ──────────────────────────────────────────────────
-
-function ScheduledAuditSection({
-  view,
-  onReload,
-}: {
-  view: ScheduledAuditView;
-  onReload: () => Promise<void>;
-}) {
-  const [auto, setAuto] = useState(view.auto);
-  const [interval, setIntervalDays] = useState(view.intervalDays);
-  const [savingAuto, setSavingAuto] = useState(false);
-  const [savingInterval, setSavingInterval] = useState(false);
+/**
+ * What the scan does, as three labelled lines. This is the old footer paragraph
+ * restructured — same claims, scannable instead of a wall.
+ *
+ * "sends" ENUMERATES rather than saying "only counts and redacted examples".
+ * That was very nearly true, and very nearly true is the worse kind: the report
+ * carries the machine's name too — its hostname, which routinely carries its
+ * owner's. A list a person can check beats a stronger claim they cannot, and
+ * this panel is the one place they would come to check. The digest email states
+ * the same three, in the same order.
+ */
+const HOW_IT_WORKS: ReadonlyArray<{ label: string; body: string }> = [
+  {
+    label: "reads",
+    body: "every session transcript on disk — your prompts, the files your agents read and wrote, and command output.",
+  },
+  { label: "runs", body: "entirely on this machine. the transcripts never leave it." },
+  {
+    label: "sends",
+    body: "counts, redacted examples, and this machine's name — and only when a scan finds something harmful.",
+  },
+];
+
+export default function SettingsClient({ initial }: { initial: ScheduledAuditView | null }) {
+  // Seeded from the server render, so the first paint already tells the truth
+  // about whether scheduled audits are on. See the note in `page.tsx`.
+  const [view, setView] = useState<ScheduledAuditView | null>(initial);
+  const [auto, setAuto] = useState(initial?.auto ?? false);
+  const [intervalDays, setIntervalDays] = useState(initial?.intervalDays ?? 7);
+  const [busy, setBusy] = useState(false);
   const [running, setRunning] = useState(false);
-  const [runningNow, setRunningNow] = useState(false);
+  const [authOpen, setAuthOpen] = useState(false);
+  const [loadError, setLoadError] = useState(initial === null);
+  /**
+   * When the view was last read. Drives the tape's marker and the uptime and
+   * countdown readouts; see ScheduleTape.
+   *
+   * Zero until the client has run, deliberately: `Date.now()` on the server and
+   * `Date.now()` in the browser are different clocks, and seeding this from the
+   * server render would put the marker at a position the client then corrects —
+   * a hydration mismatch on the one element whose whole point is a position.
+   * The tape appears on the first client pass instead.
+   */
+  const [nowMs, setNowMs] = useState(0);
+  const mounted = useRef(true);
+  /**
+   * Whether anything is on screen to protect, readable from a stable callback.
+   *
+   * `reload` has an empty dep list on purpose (see below), so the `view` it
+   * closes over is frozen at the FIRST render forever. Testing that state
+   * directly therefore answered a question about page load, not about now: a
+   * page seeded with `initial === null` — the case `page.tsx` builds for when
+   * the server read fails — kept reading `!view` as true even after the client
+   * had successfully loaded, so the next transient failure (the focus listener
+   * below fires on every `visibilitychange`, including a tab hide) replaced a
+   * working console with "could not read this machine's settings". A ref is
+   * read at call time, which is when the question is being asked.
+   */
+  const hasView = useRef(initial !== null);
 
-  // Keep local state honest if a background reload brought new server truth
-  // (e.g. someone toggled via CLI, or the interval clamp changed the value).
-  useEffect(() => setAuto(view.auto), [view.auto]);
-  useEffect(() => setIntervalDays(view.intervalDays), [view.intervalDays]);
+  const reload = useCallback(async () => {
+    try {
+      const next = await getScheduledAuditAction();
+      if (!mounted.current) return;
+      // Every stat comes from this ONE call, so a finished scan updates the
+      // last-scan time, the finding count and the countdown in a single paint.
+      // Fetching them separately is how a page ends up showing a fresh
+      // timestamp beside a stale count.
+      setView(next);
+      hasView.current = true;
+      setAuto(next.auto);
+      setIntervalDays(next.intervalDays);
+      setNowMs(Date.now());
+      setLoadError(false);
+    } catch {
+      if (mounted.current && !hasView.current) setLoadError(true);
+      // An existing view is LEFT ALONE on a failed refresh: it describes real
+      // machine state, and blanking it would report something less true than
+      // what is already on screen.
+    }
+    // Empty on purpose, and now honestly so: reading `view` here would rebuild
+    // this callback on every load and re-fire the focus listener below, which is
+    // why the "is anything on screen" question goes through the ref above
+    // instead. Nothing reactive is left to declare, so the rule no longer needs
+    // suppressing — and the suppression had been hiding the stale read.
+  }, []);
 
-  // Reflect a scan already in flight (started here or from /audit) so the button
-  // and status line don't claim the machine is idle when it isn't.
   useEffect(() => {
-    let cancelled = false;
-    (async () => {
-      try {
-        const res = await fetchWithTimeout("/api/audit/status", { cache: "no-store" });
-        if (res.ok && !cancelled) {
-          const s = (await res.json()) as { running?: boolean };
-          setRunning(Boolean(s.running));
-        }
-      } catch {
-        /* status is best-effort; a missing poll just means we assume idle */
-      }
-    })();
+    mounted.current = true;
+    // Still refreshes on mount even though the server seeded us: it stamps
+    // `nowMs` for the tape, and it picks up anything that changed between the
+    // server render and the browser getting here.
+    void reload();
     return () => {
-      cancelled = true;
+      mounted.current = false;
     };
-  }, []);
+  }, [reload]);
+
+  /**
+   * Re-read when the tab regains focus.
+   *
+   * The CLI writes the same `config.json` through the same `updateConfig`, so
+   * the two can never disagree on disk — but a page left open while somebody
+   * ran `failproofai audit --schedule 7` in a terminal would keep showing the
+   * old toggle. Refreshing on focus picks that up the moment you look at it,
+   * without a timer firing on a page that is usually idle.
+   */
+  useEffect(() => {
+    const onFocus = () => void reload();
+    window.addEventListener("focus", onFocus);
+    document.addEventListener("visibilitychange", onFocus);
+    return () => {
+      window.removeEventListener("focus", onFocus);
+      document.removeEventListener("visibilitychange", onFocus);
+    };
+  }, [reload]);
 
-  const daemonInactive = view.daemon !== "running";
-  const daemonUnsupported = view.daemon === "unsupported-platform";
+  const signedIn = view?.signedInAs ?? null;
+  const daemonRunning = view?.daemon === "running";
+  const daemonUnsupported = view?.daemon === "unsupported-platform";
+  const sched = view?.schedule ?? null;
+  const lastScan = view?.lastScan ?? null;
+  const lastExitBad =
+    sched?.lastExitCode != null && sched.lastExitCode !== 0 && sched.lastExitCode !== 75;
 
-  const onToggleAuto = useCallback(async () => {
-    const next = !auto;
-    setAuto(next); // optimistic
-    setSavingAuto(true);
+  const enable = useCallback(async () => {
+    setBusy(true);
     try {
-      const res = await setAutoAuditAction(next);
+      const res = await setAutoAuditAction(true);
+      if (!res.ok) {
+        setAuto(false);
+        if (res.reason === "unreachable") {
+          // The session is fine and the network is not. Offering a code prompt
+          // here would name a failure the user does not have and hand them a
+          // flow that cannot succeed either — and abandoning it mid-way is how
+          // a working session gets replaced with none at all.
+          toast("could not reach the server. check your connection and try again.");
+          return;
+        }
+        // The server rejected the session this page had been showing an address
+        // for — expired, or minted against a different api-server. The local
+        // file is the only thing that said "signed in", and `whoAmI` has since
+        // cleared it, so re-read before opening the dialog: otherwise the page
+        // asks for an email while still displaying one.
+        await reload();
+        setAuthOpen(true);
+        toast("that sign-in expired. one more code and it's on.");
+        return;
+      }
       setAuto(res.auto);
-      toast(res.auto ? "Scheduled scanning on." : "Scheduled scanning off.");
-      await onReload();
+      toast("scheduled audits on.");
+      await reload();
     } catch {
-      setAuto(!next); // revert
-      toast("Could not save that.");
+      setAuto(false);
+      toast("could not turn that on.");
     } finally {
-      setSavingAuto(false);
+      setBusy(false);
     }
-  }, [auto, onReload]);
+  }, [reload]);
+
+  const onToggle = useCallback(async () => {
+    if (auto) {
+      setBusy(true);
+      try {
+        const res = await setAutoAuditAction(false);
+        // Turning it OFF is never refused, so `ok` is always true here — the
+        // narrowing is the type system's, not a case that can happen.
+        if (res.ok) setAuto(res.auto);
+        toast("scheduled audits off.");
+        await reload();
+      } catch {
+        toast("could not turn that off.");
+      } finally {
+        setBusy(false);
+      }
+      return;
+    }
+    // Turning it on needs somewhere to send the digest.
+    if (!signedIn) {
+      setAuthOpen(true);
+      return;
+    }
+    await enable();
+  }, [auto, enable, reload, signedIn]);
 
   const commitInterval = useCallback(
     async (raw: number) => {
-      setSavingInterval(true);
+      setBusy(true);
       try {
-        // The config owns the 1..90 clamp; we reflect whatever it stored.
         const res = await setAuditIntervalAction(raw);
+        // The action's return IS the authoritative value — it re-reads through
+        // `readConfig`, so it already carries the 1..90 clamp. No reload after:
+        // it would re-fetch the same number, and the schedule it would also
+        // re-read has not changed yet either, since the daemon recomputes the
+        // next due time on its own tick rather than when the interval is saved.
         setIntervalDays(res.intervalDays);
-        toast(`Scanning every ${res.intervalDays} day${res.intervalDays === 1 ? "" : "s"}.`);
+        // `view` is this page's mirror of what is ON DISK, and the write just
+        // changed disk — so it has to be told, even though nothing is re-read.
+        // The blur handler below skips the write when the typed value already
+        // equals `view.intervalDays`, and with the mirror left stale that guard
+        // compared against a number two edits old: type 14, blur, then type the
+        // original 7 back and the second blur was silently dropped. The input
+        // read 7, the config still said 14, and nothing said so until the next
+        // focus refresh flipped the field back.
+        setView((v) => (v ? { ...v, intervalDays: res.intervalDays } : v));
+        toast(`scanning every ${res.intervalDays} day${res.intervalDays === 1 ? "" : "s"}.`);
       } catch {
-        setIntervalDays(view.intervalDays);
-        toast("Could not save that.");
+        setIntervalDays(view?.intervalDays ?? 7);
+        toast("could not save that.");
       } finally {
-        setSavingInterval(false);
+        setBusy(false);
       }
     },
-    [view.intervalDays],
+    [view?.intervalDays],
   );
 
+  const onSignOut = useCallback(async () => {
+    setBusy(true);
+    try {
+      await fetch("/api/auth/logout", { method: "POST" });
+      toast("signed out. scans continue; digests pause.");
+      await reload();
+    } catch {
+      toast("could not sign out.");
+    } finally {
+      setBusy(false);
+    }
+  }, [reload]);
+
   const onRunNow = useCallback(async () => {
-    if (runningNow || running) return;
-    setRunningNow(true);
+    if (running) return;
     setRunning(true);
     try {
       await triggerRun({ cli: [], since: "all", noCache: false });
-      toast("Audit complete.");
-      await onReload();
+      toast("scan complete.");
+      await reload();
     } catch (err) {
-      const msg =
+      toast(
         err instanceof RerunError && err.kind === "timeout"
-          ? "The scan is taking a while — it will finish in the background."
-          : "The scan could not be completed.";
-      toast(msg);
+          ? "the scan is taking a while — it will finish in the background."
+          : "the scan could not be completed.",
+      );
     } finally {
-      setRunningNow(false);
       setRunning(false);
     }
-  }, [runningNow, running, onReload]);
-
-  const sched = view.schedule;
-  const lastExitBad =
-    sched?.lastExitCode != null && sched.lastExitCode !== 0 && sched.lastExitCode !== 75;
-
-  return (
-    <div className="panel" style={{ padding: 20, marginBottom: 20 }}>
-      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12, flexWrap: "wrap" }}>
-        <div>
-          <h3 style={SECTION_TITLE}>Scheduled audit</h3>
-          <p style={MUTED}>Scan this machine on a timer, in the background.</p>
-        </div>
-        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
-          {view.daemon === "running" && <Pill tone="ok">daemon running</Pill>}
-          {view.daemon === "stopped" && <Pill tone="warn">daemon stopped</Pill>}
-          {view.daemon === "not-installed" && <Pill tone="warn">daemon not installed</Pill>}
-          {view.daemon === "unsupported-platform" && <Pill tone="muted">daemon unavailable</Pill>}
-        </div>
-      </div>
-
-      {/* Enable toggle + the plain statement about what the scan reads. */}
-      <div style={{ display: "flex", alignItems: "flex-start", gap: 12, marginTop: 18 }}>
-        <div style={{ marginTop: 2 }}>
-          <Toggle
-            enabled={auto}
-            onChange={onToggleAuto}
-            disabled={savingAuto || daemonUnsupported}
-            label={auto ? "Turn off scheduled scanning" : "Turn on scheduled scanning"}
-          />
-        </div>
-        <div style={{ minWidth: 0 }}>
-          <p style={{ ...BODY, color: "var(--ink)" }}>
-            {auto ? "Scanning this machine on a schedule." : "Scan this machine on a schedule."}
-          </p>
-          <p style={{ ...BODY, marginTop: 6 }}>
-            The scan reads the <span style={CODE}>contents</span> of every session transcript on
-            disk across all installed agent CLIs — your prompts, the files they read and wrote,
-            and command output. It runs entirely on this machine. Nothing is sent anywhere unless
-            you also turn on emailed reports below.
-          </p>
-        </div>
-      </div>
-
-      {/* Interval. The number bounds mirror the config's own 1..90 clamp as a UX
-          hint; the config remains the authority and we reflect what it stored. */}
-      <div style={{ display: "flex", alignItems: "center", gap: 10, marginTop: 16, flexWrap: "wrap" }}>
-        <label htmlFor="scan-interval" style={{ ...BODY }}>
-          Scan every
-        </label>
-        <input
-          id="scan-interval"
-          type="number"
-          min={1}
-          max={90}
-          step={1}
-          value={interval}
-          disabled={savingInterval || daemonUnsupported}
-          onChange={(e) => setIntervalDays(Number(e.target.value))}
-          onBlur={(e) => {
-            const v = Number(e.target.value);
-            // A cleared/garbage field must not persist NaN — snap back to the
-            // stored value and let the config keep owning the real bounds.
-            if (!Number.isFinite(v)) {
-              setIntervalDays(view.intervalDays);
-              return;
-            }
-            if (v !== view.intervalDays) void commitInterval(v);
-          }}
-          style={{
-            width: 64,
-            padding: "6px 8px",
-            background: "var(--bg)",
-            border: "1px solid var(--line-2)",
-            color: "var(--ink)",
-            fontFamily: "var(--font-mono)",
-            fontSize: 13,
-            textAlign: "center",
-          }}
-        />
-        <span style={BODY}>day{interval === 1 ? "" : "s"}.</span>
-        <span style={MUTED}>1–90; the config keeps it in range.</span>
-      </div>
-
-      {/* Last run / next due — read from the daemon-written schedule file. */}
-      <div
-        style={{
-          marginTop: 18,
-          paddingTop: 16,
-          borderTop: "1px dashed var(--line)",
-          display: "flex",
-          flexDirection: "column",
-          gap: 6,
-        }}
-      >
-        {running && (
-          <p style={{ ...BODY, color: "var(--accent-green)" }}>A scan is running now…</p>
-        )}
+  }, [reload, running]);
 
-        {/* Last run */}
-        {sched?.lastRunAtMs != null ? (
-          <p style={BODY}>
-            Last scheduled scan:{" "}
-            <span style={CODE}>{fmtAbsolute(sched.lastRunAtMs)}</span>{" "}
-            <span style={MUTED}>({formatRelativeTime(sched.lastRunAtMs)})</span>
-          </p>
-        ) : view.lastResultAt ? (
-          <p style={BODY}>
-            Last audit result:{" "}
-            <span style={CODE}>{fmtAbsolute(new Date(view.lastResultAt).getTime())}</span>{" "}
-            <span style={MUTED}>(no scheduled scan has run yet)</span>
-          </p>
-        ) : (
-          <p style={BODY}>No scan has run yet.</p>
-        )}
-
-        {/* Next due */}
-        {auto ? (
-          sched?.nextDueAtMs != null ? (
-            <p style={BODY}>
-              Next scan due:{" "}
-              <span style={CODE}>{fmtAbsolute(sched.nextDueAtMs)}</span>{" "}
-              <span style={MUTED}>({fmtFuture(sched.nextDueAtMs)})</span>
-            </p>
-          ) : (
-            <p style={BODY}>
-              Next scan:{" "}
-              <span style={MUTED}>the daemon will schedule it shortly.</span>
-            </p>
-          )
-        ) : (
-          <p style={MUTED}>Scheduled scanning is off — no scan is scheduled.</p>
-        )}
-
-        {lastExitBad && (
-          <p style={{ ...BODY, color: "var(--amber)" }}>
-            The last scheduled scan exited with code {sched?.lastExitCode}. It will retry on the
-            next tick.
-          </p>
-        )}
-        {sched?.schemaAhead && (
-          <p style={MUTED}>
-            A newer daemon wrote this schedule; some fields may not be shown.
-          </p>
-        )}
-      </div>
-
-      {/* Degraded daemon guidance — say plainly why "on" may still not run. */}
-      {auto && daemonInactive && (
-        <p style={{ ...BODY, color: "var(--amber)", marginTop: 14 }}>
-          {daemonUnsupported ? (
-            <>The background daemon isn&apos;t available on this platform, so scheduled scans
-            can&apos;t run here. You can still run one now, and use the audit page.</>
-          ) : view.daemon === "not-installed" ? (
-            <>Scheduled scanning is on, but the background service isn&apos;t installed, so nothing
-            will run on the timer yet. Install it with <Cmd>failproofai config</Cmd>.</>
-          ) : (
-            <>Scheduled scanning is on, but the background service is stopped, so nothing will run
-            until it starts. Reinstall or repair it with <Cmd>failproofai config</Cmd>.</>
-          )}
-        </p>
-      )}
-
-      {/* Run now — reuses the existing /api/audit/run route via triggerRun. */}
-      <div style={{ marginTop: 18 }}>
-        <button
-          type="button"
-          className="btn"
-          onClick={onRunNow}
-          disabled={runningNow || running}
-        >
-          {runningNow || running ? "[ scanning… ]" : "[ run a scan now ]"}
-        </button>
-      </div>
-    </div>
+  const onAuthed = useCallback(
+    async (_user: AuthedUser) => {
+      setAuthOpen(false);
+      await reload();
+      await enable();
+    },
+    [enable, reload],
   );
-}
-
-// ── page ─────────────────────────────────────────────────────────────────────
 
-export default function SettingsClient() {
-  const [scheduled, setScheduled] = useState<ScheduledAuditView | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState(false);
-  const mounted = useRef(true);
-
-  const reload = useCallback(async () => {
-    const s = await getScheduledAuditAction();
-    if (!mounted.current) return;
-    setScheduled(s);
-  }, []);
-
-  useEffect(() => {
-    mounted.current = true;
-    (async () => {
-      try {
-        await reload();
-      } catch {
-        if (mounted.current) setError(true);
-      } finally {
-        if (mounted.current) setLoading(false);
+  // ── the four stats ────────────────────────────────────────────────────────
+  // Each is one fact from one source. Where a value is unknown it says so; "—"
+  // and 0 are deliberately different claims, because a machine that scanned and
+  // found nothing is not the same as a file we could not read.
+
+  const daemonCell = (() => {
+    if (!view) return { value: "…", sub: "reading" } as const;
+    if (daemonRunning) {
+      const up =
+        view.daemonStartedAtMs != null && nowMs > 0
+          ? `up ${fmtSpan(Math.max(0, nowMs - view.daemonStartedAtMs))}`
+          : "";
+      return { value: "running", sub: up, tone: "ok" as const };
+    }
+    if (daemonUnsupported) return { value: "unavailable", sub: "not on this platform" } as const;
+    // The sub-line carries the REMEDY, not a restatement of the value. Both
+    // states have the same one, and naming the command is the actionable half.
+    if (view.daemon === "not-installed")
+      return { value: "not installed", sub: "run failproofai config", tone: "warn" as const };
+    if (view.daemon === "unknown") return { value: "unknown", sub: "could not read it" } as const;
+    return { value: "stopped", sub: "run failproofai config", tone: "warn" as const };
+  })();
+
+  const nextCell = (() => {
+    if (!auto) return { value: "off", sub: "nothing scheduled" } as const;
+    if (sched?.nextDueAtMs == null) return { value: "pending", sub: "after the next scan" } as const;
+    return {
+      value: nowMs > 0 ? fmtUntil(sched.nextDueAtMs, nowMs) : "—",
+      sub: fmtAbsolute(sched.nextDueAtMs),
+    } as const;
+  })();
+
+  const lastCell = lastScan
+    ? {
+        value: formatRelativeTime(Date.parse(lastScan.finishedAt)),
+        sub:
+          lastScan.sessionsScanned != null
+            ? `${num(lastScan.sessionsScanned)} sessions`
+            : "scanned",
       }
-    })();
-    return () => {
-      mounted.current = false;
+    : ({ value: "none yet", sub: "run one below" } as const);
+
+  const findingsCell = (() => {
+    if (!lastScan) return { value: "—", sub: "no scan yet" } as const;
+    if (lastScan.findings == null) return { value: "—", sub: "unreadable" } as const;
+    return {
+      value: num(lastScan.findings),
+      sub: "this scan",
+      ...(lastScan.findings > 0 ? { tone: "warn" as const } : {}),
     };
-  }, [reload]);
+  })();
 
   return (
     <main className="report">
-      <section className="section" data-screen-label="settings">
-        <h2
-          style={{
-            fontFamily: "var(--font-mono)",
-            fontSize: 24,
-            fontWeight: 600,
-            letterSpacing: "-0.01em",
-            color: "var(--ink)",
-            margin: "0 0 8px",
-          }}
-        >
-          Settings
-        </h2>
-        <p style={{ ...BODY, maxWidth: 720, margin: "0 0 24px" }}>
-          Machine-level controls for scheduled scanning and emailed reports.
-        </p>
-
-        {loading ? (
-          <p style={MUTED}>Loading…</p>
-        ) : error || !scheduled ? (
-          <p style={{ ...BODY, color: "var(--accent-pink)" }}>
-            Could not load settings. Refresh to try again.
-          </p>
+      <section className="section set-sec">
+        <div className="set-mast">
+          <h1 className="set-title">settings</h1>
+          <p className="set-lede">keeping watch, so you don&apos;t have to.</p>
+        </div>
+
+        {loadError ? (
+          <div className="set-console">
+            <div className="set-cell">
+              <p className="set-warn">
+                could not read this machine&apos;s settings. check that the
+                dashboard can reach <code>~/.failproofai/config.json</code>.
+              </p>
+            </div>
+          </div>
         ) : (
-          <ScheduledAuditSection view={scheduled} onReload={reload} />
+          <div className="set-console">
+            <div className="set-stats">
+              <StatCell label="daemon" {...daemonCell} />
+              <StatCell label="next scan" {...nextCell} />
+              <StatCell label="last scan" {...lastCell} />
+              <StatCell label="findings" {...findingsCell} />
+            </div>
+
+            <div className="set-cols">
+              <div className="set-cell set-config">
+                <h2 className="set-cell-title">scheduled audit</h2>
+
+                <div className="set-row set-row-main">
+                  <Toggle
+                    enabled={auto}
+                    disabled={busy || view === null}
+                    onChange={() => void onToggle()}
+                    label={auto ? "turn off scheduled audits" : "turn on scheduled audits"}
+                  />
+                  <div className="set-row-copy">
+                    <span className="set-strong">
+                      {auto ? "scanning on a schedule." : "scan on a schedule."}
+                    </span>
+                    <span className="set-dim">
+                      {auto
+                        ? "you'll get an email only when a scan finds something."
+                        : "off. nothing runs and nothing is sent."}
+                    </span>
+                  </div>
+                </div>
+
+                <div className="set-row set-row-interval">
+                  <span className="set-dim">scan every</span>
+                  <input
+                    type="number"
+                    className="set-num"
+                    min={MIN_INTERVAL_DAYS}
+                    max={MAX_INTERVAL_DAYS}
+                    value={intervalDays}
+                    disabled={busy || view === null}
+                    aria-label="days between scheduled scans"
+                    onChange={(e) => setIntervalDays(Number(e.target.value))}
+                    onBlur={(e) => {
+                      const v = Number(e.target.value);
+                      if (!Number.isFinite(v)) {
+                        setIntervalDays(view?.intervalDays ?? 7);
+                        return;
+                      }
+                      if (v !== view?.intervalDays) void commitInterval(v);
+                    }}
+                  />
+                  <span className="set-dim">days</span>
+                  <span className="set-hint">
+                    {MIN_INTERVAL_DAYS}&ndash;{MAX_INTERVAL_DAYS}
+                  </span>
+                </div>
+
+                <div className="set-rule" />
+
+                <div className="set-row set-row-identity">
+                  {signedIn ? (
+                    <>
+                      <span className="set-dim">reports go to</span>
+                      <span className="set-email">{signedIn.email}</span>
+                      <button
+                        type="button"
+                        className="set-link"
+                        disabled={busy}
+                        onClick={() => void onSignOut()}
+                      >
+                        sign out
+                      </button>
+                    </>
+                  ) : auto ? (
+                    // A control, not just a sentence. This state told the user
+                    // to sign in and gave them nothing to sign in WITH: the
+                    // dialog opened only from the off→on toggle and from
+                    // `enable()`'s rejection path, so somebody whose session
+                    // died while the timer stayed on had to guess that toggling
+                    // off and back on was the way through. The CLI recovers
+                    // from this in one command; the dashboard could not recover
+                    // from it at all.
+                    <>
+                      <span className="set-warn">
+                        signed out — scans continue, digests are paused.
+                      </span>
+                      <button
+                        type="button"
+                        className="set-link"
+                        disabled={busy}
+                        onClick={() => setAuthOpen(true)}
+                      >
+                        sign in to resume
+                      </button>
+                    </>
+                  ) : (
+                    <span className="set-dim">
+                      turning this on asks for an email, so there is somewhere to
+                      send the report.
+                    </span>
+                  )}
+                </div>
+
+                {auto && view && !daemonRunning && (
+                  <p className="set-warn">
+                    {daemonUnsupported
+                      ? "the background service isn't available on this platform, so scheduled scans can't run here. you can still run one now."
+                      : view.daemon === "not-installed"
+                        ? "the background service isn't installed, so nothing will run on the timer. install it with `failproofai config`."
+                        : "the background service is stopped, so nothing will run until it starts. repair it with `failproofai config`."}
+                  </p>
+                )}
+
+                {lastExitBad && (
+                  <p className="set-warn">
+                    the last scheduled scan exited {sched?.lastExitCode}. the next
+                    one will still run.
+                  </p>
+                )}
+
+                <div className="set-actions">
+                  <button
+                    type="button"
+                    className="btn btn-press"
+                    disabled={running}
+                    onClick={() => void onRunNow()}
+                  >
+                    {running ? "[ scanning… ]" : "[ run a scan now ]"}
+                  </button>
+                </div>
+              </div>
+
+              <div className="set-cell set-how">
+                <h2 className="set-cell-title">how it works</h2>
+                <dl className="set-how-list">
+                  {HOW_IT_WORKS.map((row) => (
+                    <div className="set-how-row" key={row.label}>
+                      <dt className="set-how-label">{row.label}</dt>
+                      <dd className="set-how-body">{row.body}</dd>
+                    </div>
+                  ))}
+                </dl>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {auto && nowMs > 0 && (
+          <ScheduleTape
+            lastRunAtMs={sched?.lastRunAtMs ?? null}
+            nextDueAtMs={sched?.nextDueAtMs ?? null}
+            now={nowMs}
+          />
         )}
       </section>
+
+      <AuthDialog
+        open={authOpen}
+        source="settings_scheduled_audit"
+        headline="where should the report go?"
+        subhead="we'll send a one-time code to confirm."
+        onClose={() => setAuthOpen(false)}
+        onAuthed={(u) => void onAuthed(u)}
+      />
     </main>
   );
 }