failproofai 1.0.0 → 1.0.1-beta.0

package/.next/standalone/app/audit/_components/empty-state.tsx

@@ -49,7 +49,7 @@ export function EmptyState({ mode, running, onStarted, onCompleted }: Props) {
         <div className="section-mast">
           <div className="section-label">
             <span className="glyph">━━</span> audit{" "}
-            <span style={{ color: "var(--dim)" }}>·</span> first run
+            <span className="sep">·</span> first run
           </div>
           <div className="section-meta">
             <span style={{ color: "var(--dim)" }}>○</span> no cache yet
@@ -101,7 +101,7 @@ export function EmptyState({ mode, running, onStarted, onCompleted }: Props) {
       <div className="section-mast">
         <div className="section-label">
           <span className="glyph">━━</span> audit{" "}
-          <span style={{ color: "var(--dim)" }}>·</span> zero transcripts
+          <span className="sep">·</span> zero transcripts
         </div>
         <div className="section-meta">
           <span style={{ color: "var(--amber)" }}>●</span> hooks not installed

package/.next/standalone/app/audit/_components/run-progress.tsx

@@ -55,7 +55,7 @@ export function RunProgress() {
       <div className="section-mast">
         <div className="section-label">
           <span className="glyph">━━</span> audit{" "}
-          <span style={{ color: "var(--dim)" }}>·</span> in progress
+          <span className="sep">·</span> in progress
         </div>
         <div className="section-meta">
           <span style={{ color: "var(--accent-pink)" }}>●</span> scanning

package/.next/standalone/app/audit/audit-styles.css

@@ -211,7 +211,11 @@
   color: var(--accent-green);
   display: inline-flex; align-items: baseline; gap: 10px;
 }
-.section-label .glyph { color: var(--accent-pink); letter-spacing: -2px; }
+/* Kept in step with globals.css, which declares the same selector: this file
+ * loads after it, so a value left behind here silently wins. The leader and
+ * separator inherit the label's colour — one label, one colour. */
+.section-label .glyph { color: inherit; letter-spacing: -2px; }
+.section-label .sep { color: inherit; }
 .section-meta {
   font-family: var(--font-mono);
   font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
@@ -904,8 +908,12 @@
    ============================================================ */
 .cbb-grid {
   display: grid;
-  grid-template-columns: 1fr 1fr;
+  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
   gap: 14px;
+  align-items: stretch;
+}
+@media (max-width: 720px) {
+  .cbb-grid { grid-template-columns: 1fr; }
 }
 .cbb-card {
   border: 1px solid var(--line-2);
@@ -927,42 +935,150 @@
   line-height: 1.55;
 }
 
-.cadence-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
-.cadence-btn {
+/* ── Section 05: scheduled audit panel ───────────────────────────────────────
+   The mock puts the scan controls at 1.3fr against the share card's 1fr, with
+   a pink rail on the panel that acts. Colours are the design-system tokens the
+   rest of the app already uses (--accent-pink #e4587c, --accent-green #66d1b5);
+   the mock's #ff2d78 / #35d07f were approximations of them. */
+.cbb-card-primary {
+  border-left: 2px solid var(--accent-pink);
+}
+.cbb-card-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+.cbb-pill {
   font-family: var(--font-mono);
-  font-size: 11px;
-  letter-spacing: 0.04em;
+  font-size: 9.5px;
+  letter-spacing: 0.1em;
+  padding: 4px 8px;
+  white-space: nowrap;
   border: 1px solid var(--line-2);
-  background: transparent;
+  color: var(--dim);
+}
+.cbb-pill.on {
+  border-color: var(--accent-green-shadow);
+  color: var(--accent-green);
+}
+
+.cbb-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-family: var(--font-mono);
+  font-size: 12px;
   color: var(--ink);
-  padding: 6px 12px;
+  line-height: 1.5;
+}
+.cbb-row-interval { gap: 9px; flex-wrap: wrap; }
+.cbb-muted { color: var(--ink-2); }
+.cbb-hint { color: var(--dim); font-size: 10.5px; }
+.cbb-strong { color: var(--ink); }
+
+.cbb-num {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  width: 58px;
+  padding: 5px 10px;
+  background: var(--bg);
+  border: 1px solid var(--line-2);
+  color: var(--ink);
+  border-radius: 0;
+}
+.cbb-num:focus-visible {
+  outline: 2px solid var(--accent-pink);
+  outline-offset: 1px;
+}
+
+/* The switch /policies uses — copied shape, not a new control. */
+.cbb-toggle {
+  position: relative;
+  flex: none;
+  width: 34px;
+  height: 18px;
+  border-radius: 9px;
+  border: none;
+  background: var(--line-2);
   cursor: pointer;
-  transition: border-color 140ms ease, color 140ms ease, background-color 140ms ease;
+  padding: 0;
+  transition: background 120ms ease;
 }
-.cadence-btn:hover {
-  border-color: var(--accent-pink);
-  color: var(--accent-pink);
+.cbb-toggle[data-on="true"] { background: var(--accent-pink); }
+.cbb-toggle:disabled { opacity: 0.5; cursor: not-allowed; }
+.cbb-toggle:focus-visible { outline: 2px solid var(--accent-pink); outline-offset: 2px; }
+.cbb-toggle-knob {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: var(--bg);
+  transition: transform 120ms ease;
 }
-.cadence-btn.on {
-  border-color: var(--accent-pink);
-  background: var(--accent-pink-bg);
+.cbb-toggle[data-on="true"] .cbb-toggle-knob { transform: translateX(16px); }
+
+.cbb-identity {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--ink-2);
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+.cbb-email { color: var(--accent-green); }
+.cbb-link-inline {
+  font-size: 11px;
+  color: var(--dim);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.cbb-link-inline:hover { color: var(--ink); }
+
+.cbb-warn {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  line-height: 1.6;
   color: var(--accent-pink);
 }
-.cadence-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+.cbb-warn-inline { color: var(--accent-pink); }
 
-.cbb-link {
-  align-self: flex-start;
-  background: transparent;
-  border: none;
-  color: var(--accent-green);
+.cbb-foot-block {
+  border-top: 1px dashed var(--line);
+  padding-top: 12px;
+  margin-top: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
   font-family: var(--font-mono);
   font-size: 11px;
-  letter-spacing: 0.04em;
+}
+.cbb-run-btn {
+  margin-top: 6px;
+  font-family: var(--font-mono);
+  font-size: 12px;
+  text-align: center;
+  padding: 8px 12px;
+  border: 1px solid var(--line-2);
+  background: transparent;
+  color: var(--ink);
   cursor: pointer;
-  padding: 0;
 }
-.cbb-link:hover { color: var(--accent-pink); }
-.cbb-link:disabled { opacity: 0.55; cursor: wait; }
+.cbb-run-btn:hover:not(:disabled) { border-color: var(--accent-pink); color: var(--accent-pink); }
+.cbb-run-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+.cbb-run-btn:focus-visible { outline: 2px solid var(--accent-pink); outline-offset: 2px; }
+
+.cbb-note {
+  font-family: var(--font-mono);
+  font-size: 10.5px;
+  color: var(--dim);
+  line-height: 1.55;
+  margin-top: 14px;
+}
 
 .perks-progress {
   height: 6px;
@@ -1032,4 +1148,12 @@
     padding: 16px 0;
   }
   .quirks-thead { display: none; }
-}
+}
+/* ── Section 05: the share card, now alone ───────────────────────────────────
+   The scheduled-audit panel moved to /settings, so this is the only card in
+   the section. Capped rather than left full-bleed: a single card stretched
+   across the report width reads as an empty row with something in the corner,
+   and the invite is a small ask that should look like one. */
+.share-card {
+  max-width: 420px;
+}

package/.next/standalone/app/globals.css

@@ -245,6 +245,39 @@ input[type="date"] { color-scheme: dark; }
 }
 .h-actions { display: flex; align-items: center; gap: 8px; flex: none; }
 
+/* Icon-only chrome control (settings). Sized to sit level with the refresh
+   group beside it, and dim until touched so the bar stays text-forward — the
+   icon is an affordance, not a highlight. */
+.h-icon-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  color: var(--ink-2);
+  border: 1px solid transparent;
+  transition:
+    color 140ms cubic-bezier(0.22, 1, 0.36, 1),
+    border-color 140ms cubic-bezier(0.22, 1, 0.36, 1),
+    background-color 140ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+.h-icon-btn:hover {
+  color: var(--ink);
+  border-color: var(--line-2);
+  background: rgba(255, 255, 255, 0.03);
+}
+.h-icon-btn.is-active {
+  color: var(--accent-pink);
+  border-color: var(--accent-pink);
+}
+.h-icon-btn:focus-visible {
+  outline: 2px solid var(--accent-pink);
+  outline-offset: 2px;
+}
+@media (prefers-reduced-motion: reduce) {
+  .h-icon-btn { transition: none; }
+}
+
 /* header meta cluster (version + section label) — never wrap mid-token */
 .h-meta { display: flex; align-items: center; gap: 6px; white-space: nowrap; flex: none; }
 .h-version {
@@ -371,7 +404,12 @@ input[type="date"] { color-scheme: dark; }
   color: var(--accent-green);
   display: inline-flex; align-items: baseline; gap: 10px;
 }
-.section-label .glyph { color: var(--accent-pink); letter-spacing: -2px; }
+/* The leader and the separator take the label's own colour rather than each
+ * carrying their own. A three-colour eyebrow (pink rule, dim dot, mint text)
+ * read as three things happening on one line instead of one label; the line
+ * names a section, which is a single fact, so it is a single colour. */
+.section-label .glyph { color: inherit; letter-spacing: -2px; }
+.section-label .sep { color: inherit; }
 .section-meta {
   font-family: var(--font-mono);
   font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;

package/.next/standalone/app/settings/page.tsx

@@ -1,31 +1,48 @@
-/**
- * /settings — one page, sections. The single home for the machine-level
- * controls the design plan collected here: the scheduled local audit and
- * emailed audit reports.
- *
- * Deliberately NOT a home for telemetry: the product decision is that telemetry
- * is documented but not advertised in-product, so there is no telemetry control
- * or status on this page. `config.toml` plus the docs are the whole story.
- *
- * Thin server wrapper (Suspense boundary + the disabled-pages gate every route
- * uses); all the reads/writes live in the client and its server actions.
- */
-import { Suspense } from "react";
+import type { Metadata } from "next";
 import { notFound } from "next/navigation";
+import {
+  getScheduledAuditAction,
+  type ScheduledAuditView,
+} from "@/app/actions/get-scheduled-audit";
 import SettingsClient from "./settings-client";
 
+export const metadata: Metadata = {
+  title: "settings · failproof_ai",
+  description: "Scheduled audits for this machine.",
+};
+
 export const dynamic = "force-dynamic";
 
+/**
+ * Machine-scoped settings.
+ *
+ * The state is read HERE, on the server, and handed to the client as its
+ * initial value — rather than fetched from a `useEffect` after mount. The
+ * difference is visible: with a client-side load the page paints "off. nothing
+ * runs and nothing is sent." and then flips to the truth a moment later, so a
+ * page whose whole job is to tell you whether a security feature is on spends
+ * its first frame telling you the opposite. It reads from local files, so there
+ * is no latency argument for deferring it either.
+ *
+ * `force-dynamic` because that state is `~/.failproofai/config.json` and the
+ * daemon's status — a cached render would show a stale machine.
+ */
 export default async function SettingsPage() {
+  // Same gate the audit, policies and projects pages carry. It was dropped in
+  // the rewrite, and this is the page that least deserves to lose it: it shows
+  // the address digests go to and can sign the machine out, on a dashboard an
+  // operator may deliberately be exposing beyond localhost.
   const disabled = (process.env.FAILPROOFAI_DISABLE_PAGES ?? "")
-    .split(",")
-    .map((s) => s.trim())
-    .filter(Boolean);
+    .split(",").map((s) => s.trim()).filter(Boolean);
   if (disabled.includes("settings")) notFound();
 
-  return (
-    <Suspense>
-      <SettingsClient />
-    </Suspense>
-  );
+  let initial: ScheduledAuditView | null = null;
+  try {
+    initial = await getScheduledAuditAction();
+  } catch {
+    // Left null; the client renders the unreadable-config message. Throwing
+    // here would replace a page that can explain itself with an error boundary
+    // that cannot.
+  }
+  return <SettingsClient initial={initial} />;
 }