failproofai 0.0.11-beta.4 → 0.0.11-beta.6

package/.next/standalone/app/audit/_components/audit-dashboard.tsx

@@ -30,6 +30,9 @@ import { ReturnSection } from "./return-section";
 import { ReportFooter } from "./report-footer";
 import { EmptyState } from "./empty-state";
 import { RunProgress } from "./run-progress";
+import { TopAuditBar, type TopAuditBarMode } from "./top-audit-bar";
+import { AuditProgressStrip, type RerunStatus } from "./audit-progress-strip";
+import { RerunError, triggerRun } from "./rerun-button";
 
 // IMPORTANT: do NOT import BUILTIN_POLICIES or AUDIT_DETECTORS here.
 // Both pull in node:fs and execSync (workflow policies), which Next.js
@@ -38,7 +41,12 @@ import { RunProgress } from "./run-progress";
 
 type Initial =
   | { status: "cached"; cachedAt: string; params: RunAuditOptions; result: AuditResult }
-  | { status: "empty" };
+  | { status: "empty"; expired: boolean; expiredAt: string | null };
+
+/** Tag passed to the shared `startRerun()` handler so PostHog can tell
+ *  whether the click came from the new top bar or the existing bottom
+ *  return-section button. */
+export type RerunSource = "top_bar" | "return_section" | "empty_state";
 
 interface Props {
   initial: Initial;
@@ -82,6 +90,7 @@ function inferProjectName(result: AuditResult, override?: string): string {
 export function AuditDashboard({ initial, projectFromUrl, totalCatalogSize }: Props) {
   const [cache, setCache] = useState<Initial>(initial);
   const [running, setRunning] = useState(false);
+  const [rerunStatus, setRerunStatus] = useState<RerunStatus>({ kind: "idle" });
   const { capture } = usePostHog();
   const pageViewStateRef = useRef<string | null>(null);
   const scrollTrackedRef = useRef(false);
@@ -90,7 +99,37 @@ export function AuditDashboard({ initial, projectFromUrl, totalCatalogSize }: Pr
 
   const refreshFromCache = useCallback(async () => {
     const payload = await getAuditResultAction();
-    if (payload.status === "cached") setCache(payload);
+    setCache(payload);
+  }, []);
+
+  /** Shared re-audit handler used by the top bar and the bottom button.
+   *  Drives `rerunStatus` (which renders the sticky progress strip) and
+   *  soft-refreshes the dashboard cache on success — no full page reload. */
+  const startRerun = useCallback(async (source: RerunSource) => {
+    if (running) return;
+    capture("audit_rerun_clicked", { source, since: "30d" });
+    setRunning(true);
+    setRerunStatus({ kind: "running", startedAt: Date.now() });
+    try {
+      await triggerRun({ cli: [], since: "30d" });
+      await refreshFromCache();
+      setRerunStatus({ kind: "idle" });
+    } catch (err) {
+      const kind = err instanceof RerunError ? err.kind : "network";
+      capture("audit_rerun_failed", {
+        kind,
+        source,
+        since: "30d",
+        cli_filter: "all",
+      });
+      setRerunStatus({ kind: "failed", reason: kind, failedAt: Date.now() });
+    } finally {
+      setRunning(false);
+    }
+  }, [capture, refreshFromCache, running]);
+
+  const dismissRerunStatus = useCallback(() => {
+    setRerunStatus({ kind: "idle" });
   }, []);
 
   // Body class for audit-only background + grain texture. Applied once on
@@ -152,11 +191,21 @@ export function AuditDashboard({ initial, projectFromUrl, totalCatalogSize }: Pr
     };
   }, [cache.status, capture, resultsCount, running, transcriptsScanned]);
 
+  // Compute the top-bar mode (only matters on empty paths — MainReport
+  // always renders the bar in "cached" mode below).
+  const emptyBarMode: TopAuditBarMode =
+    cache.status === "empty" && cache.expired ? "expired" : "empty";
+  const emptyBarCachedAt =
+    cache.status === "empty" && cache.expired ? cache.expiredAt : null;
+
   /* ---- empty / first-run ----------------------------------------- */
   if (cache.status === "empty" && !running) {
     return (
       <ShellEmpty
         running={false}
+        topBar={{ mode: emptyBarMode, cachedAt: emptyBarCachedAt, isRunning: running, onRerun: () => startRerun("empty_state") }}
+        rerunStatus={rerunStatus}
+        onDismissRerun={dismissRerunStatus}
         onStarted={() => setRunning(true)}
         onCompleted={async () => { setRunning(false); await refreshFromCache(); }}
       />
@@ -166,6 +215,9 @@ export function AuditDashboard({ initial, projectFromUrl, totalCatalogSize }: Pr
     return (
       <ShellEmpty
         running
+        topBar={{ mode: emptyBarMode, cachedAt: emptyBarCachedAt, isRunning: running, onRerun: () => startRerun("empty_state") }}
+        rerunStatus={rerunStatus}
+        onDismissRerun={dismissRerunStatus}
         onStarted={() => {}}
         onCompleted={async () => { setRunning(false); await refreshFromCache(); }}
       />
@@ -184,28 +236,20 @@ export function AuditDashboard({ initial, projectFromUrl, totalCatalogSize }: Pr
       <ShellEmpty
         running={running}
         mode="zero-sessions"
+        topBar={{ mode: "cached", cachedAt, isRunning: running, onRerun: () => startRerun("empty_state") }}
+        rerunStatus={rerunStatus}
+        onDismissRerun={dismissRerunStatus}
         onStarted={() => setRunning(true)}
         onCompleted={async () => { setRunning(false); await refreshFromCache(); }}
       />
     );
   }
 
-  /* ---- in-flight re-run ------------------------------------------ */
-  if (running) {
-    return (
-      <div className="app">
-        <div className="scanline-overlay" />
-        <div className="app-shell">
-          <div className="report">
-            <RunProgress />
-          </div>
-          <ReportFooter cachedAt={cachedAt} />
-        </div>
-      </div>
-    );
-  }
-
   /* ---- main report ----------------------------------------------- */
+  // Note: on re-audit from a cached state, we deliberately stay on the
+  // MainReport instead of swapping to RunProgress. The sticky
+  // AuditProgressStrip provides the in-flight indicator, and the soft
+  // refresh on completion (via refreshFromCache) avoids a full reload.
   return (
     <MainReport
       result={result}
@@ -213,6 +257,10 @@ export function AuditDashboard({ initial, projectFromUrl, totalCatalogSize }: Pr
       params={params}
       projectFromUrl={projectFromUrl}
       totalCatalogSize={totalCatalogSize}
+      isRunning={running}
+      rerunStatus={rerunStatus}
+      onRerun={(source) => startRerun(source)}
+      onDismissRerun={dismissRerunStatus}
     />
   );
 }
@@ -223,9 +271,23 @@ interface MainReportProps {
   params: RunAuditOptions | undefined;
   projectFromUrl?: string;
   totalCatalogSize: number;
+  isRunning: boolean;
+  rerunStatus: RerunStatus;
+  onRerun: (source: RerunSource) => void;
+  onDismissRerun: () => void;
 }
 
-function MainReport({ result, cachedAt, params, projectFromUrl, totalCatalogSize }: MainReportProps) {
+function MainReport({
+  result,
+  cachedAt,
+  params,
+  projectFromUrl,
+  totalCatalogSize,
+  isRunning,
+  rerunStatus,
+  onRerun,
+  onDismissRerun,
+}: MainReportProps) {
   const { capture } = usePostHog();
   const project = useMemo(() => inferProjectName(result, projectFromUrl), [result, projectFromUrl]);
   // Seed classification with the project name so the behaviour fingerprint
@@ -288,9 +350,16 @@ function MainReport({ result, cachedAt, params, projectFromUrl, totalCatalogSize
 
   return (
     <div className="app">
+      <AuditProgressStrip status={rerunStatus} onDismiss={onDismissRerun} />
       <div className="scanline-overlay" />
       <div className="app-shell">
         <div className="report">
+          <TopAuditBar
+            mode="cached"
+            cachedAt={cachedAt}
+            isRunning={isRunning}
+            onRerun={() => onRerun("top_bar")}
+          />
           <IdentitySection
             ref={identityFrameRef}
             archetypeKey={classification.archetype}
@@ -312,7 +381,11 @@ function MainReport({ result, cachedAt, params, projectFromUrl, totalCatalogSize
             archetypeKey={classification.archetype}
             project={project}
           />
-          <ReturnSection result={result} />
+          <ReturnSection
+            result={result}
+            isRunning={isRunning}
+            onRerun={() => onRerun("return_section")}
+          />
           <FindingsSection findings={findings} />
           <PoliciesSection result={result} projected={projected} projectedGrade={projectedGrade} />
         </div>
@@ -333,19 +406,34 @@ function MainReport({ result, cachedAt, params, projectFromUrl, totalCatalogSize
 interface ShellEmptyProps {
   running: boolean;
   mode?: "no-cache" | "zero-sessions";
+  topBar: {
+    mode: TopAuditBarMode;
+    cachedAt: string | null;
+    isRunning: boolean;
+    onRerun: () => void;
+  };
+  rerunStatus: RerunStatus;
+  onDismissRerun: () => void;
   onStarted: () => void;
   onCompleted: () => Promise<void> | void;
 }
 
-function ShellEmpty({ running, mode = "no-cache", onStarted, onCompleted }: ShellEmptyProps) {
+function ShellEmpty({ running, mode = "no-cache", topBar, rerunStatus, onDismissRerun, onStarted, onCompleted }: ShellEmptyProps) {
   // Use the archetype "optimist" sigil for the empty-state visual so the
   // page doesn't render with a dead box. EmptyState itself is unchanged
   // from the previous build.
   return (
     <div className="app">
+      <AuditProgressStrip status={rerunStatus} onDismiss={onDismissRerun} />
       <div className="scanline-overlay" />
       <div className="app-shell">
         <div className="report">
+          <TopAuditBar
+            mode={topBar.mode}
+            cachedAt={topBar.cachedAt}
+            isRunning={topBar.isRunning}
+            onRerun={topBar.onRerun}
+          />
           {running ? (
             <RunProgress />
           ) : (

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

@@ -0,0 +1,98 @@
+"use client";
+
+/**
+ * Sticky banner pinned to the top of the viewport during a re-audit run.
+ * Lifted from the bottom `[ scanning… ]` button so the user has a clear,
+ * persistent signal that work is in progress regardless of scroll
+ * position.
+ *
+ * Visual vocabulary matches the page:
+ *   - pink hard-offset left border (echoes `.share-btn:hover`),
+ *   - mono lowercase,
+ *   - thin pulse on the right edge driven by a CSS keyframe so we don't
+ *     fake progress precision we don't have.
+ *
+ * Reuses the existing `RerunError.kind` discrimination to render a red
+ * error strip with kind-specific copy when a run dies.
+ */
+import React, { useEffect, useState } from "react";
+import type { RerunError } from "./rerun-button";
+
+export type RerunStatus =
+  | { kind: "idle" }
+  | { kind: "running"; startedAt: number }
+  | { kind: "failed"; reason: RerunError["kind"]; failedAt: number };
+
+interface Props {
+  status: RerunStatus;
+  /** Lets the user dismiss the red error strip without re-trying. */
+  onDismiss: () => void;
+}
+
+const ERROR_COPY: Record<RerunError["kind"], string> = {
+  timeout: "audit took too long — try again",
+  network: "network hiccup — check your connection",
+  post_failed: "audit failed to start — try again",
+};
+
+export function formatElapsed(ms: number): string {
+  if (ms < 0) return "00:00";
+  const totalSeconds = Math.floor(ms / 1000);
+  const mm = Math.floor(totalSeconds / 60).toString().padStart(2, "0");
+  const ss = (totalSeconds % 60).toString().padStart(2, "0");
+  return `${mm}:${ss}`;
+}
+
+export function AuditProgressStrip({ status, onDismiss }: Props) {
+  // Tick once a second only while running. setInterval is cheaper than
+  // requestAnimationFrame for a one-second display update.
+  const [now, setNow] = useState(() => Date.now());
+  useEffect(() => {
+    if (status.kind !== "running") return;
+    const t = setInterval(() => setNow(Date.now()), 1000);
+    return () => clearInterval(t);
+  }, [status.kind]);
+
+  if (status.kind === "idle") return null;
+
+  if (status.kind === "running") {
+    const elapsed = Math.max(0, now - status.startedAt);
+    return (
+      <div className="audit-progress-strip" role="status" aria-live="polite">
+        <div className="audit-progress-strip__inner">
+          <span className="audit-progress-strip__label">
+            <span className="audit-progress-strip__spinner" aria-hidden="true" />
+            re-auditing your sessions
+          </span>
+          <span className="audit-progress-strip__elapsed">
+            {formatElapsed(elapsed)}
+          </span>
+        </div>
+        <div className="audit-progress-strip__pulse" aria-hidden="true" />
+      </div>
+    );
+  }
+
+  // kind === "failed"
+  return (
+    <div
+      className="audit-progress-strip audit-progress-strip--failed"
+      role="alert"
+    >
+      <div className="audit-progress-strip__inner">
+        <span className="audit-progress-strip__label">
+          <span className="audit-progress-strip__x" aria-hidden="true">×</span>
+          {ERROR_COPY[status.reason]}
+        </span>
+        <button
+          type="button"
+          className="audit-progress-strip__dismiss"
+          onClick={onDismiss}
+          aria-label="dismiss"
+        >
+          [ dismiss ]
+        </button>
+      </div>
+    </div>
+  );
+}

package/.next/standalone/app/audit/_components/rerun-button.tsx

@@ -63,7 +63,10 @@ export async function triggerRun(scanParams: ScanParams): Promise<void> {
     throw new RerunError(isAbortError(err) ? "timeout" : "network", "audit run request failed");
   }
 
-  // Poll status until running flips false.
+  // Poll status until running flips false. The status route returns
+  // `cachedAt`, which the polling caller can compare against the prior
+  // value to detect "fresh result available" — but for `triggerRun`'s
+  // purposes the `running: false` flip is the success signal.
   const startedAt = Date.now();
   while (Date.now() - startedAt < MAX_POLL_MS) {
     await new Promise((r) => setTimeout(r, POLL_INTERVAL_MS));

package/.next/standalone/app/audit/_components/return-section.tsx

@@ -25,10 +25,14 @@ import type { AuditResult } from "@/src/audit/types";
 import { usePostHog } from "@/contexts/PostHogContext";
 import { isAbortError } from "@/lib/fetch-with-timeout";
 import { AuthDialog, type AuthedUser } from "./auth-dialog";
-import { RerunError, triggerRun } from "./rerun-button";
 
 interface Props {
   result: AuditResult;
+  /** Lifted by AuditDashboard so the bottom button and the top-of-page
+   *  re-audit bar share state — only one rerun at a time. */
+  isRunning: boolean;
+  /** Lifted handler. Drives the sticky progress strip + soft refresh. */
+  onRerun: () => void;
 }
 
 const BULK_INSTALL_CMD = "failproofai policies --install";
@@ -59,7 +63,7 @@ function formatNextAudit(unixSecs: number): string {
   });
 }
 
-export function ReturnSection({ result }: Props) {
+export function ReturnSection({ result, isRunning, onRerun }: Props) {
   const { capture } = usePostHog();
   const hasUnenabled = result.results.some(
     (r) => r.source === "builtin" && !r.enabledInConfig && r.hits > 0,
@@ -70,7 +74,6 @@ export function ReturnSection({ result }: Props) {
   const [reminder, setReminder] = useState<Reminder | null>(null);
   const [dialogOpen, setDialogOpen] = useState(false);
   const [reminderBusy, setReminderBusy] = useState(false);
-  const [rerunBusy, setRerunBusy] = useState(false);
   const ctaShownRef = useRef(false);
   /** Throttle gate for focus/visibility-triggered refreshStatus calls —
    *  rapid alt-tabbing would otherwise hit /api/auth/status (two disk
@@ -233,30 +236,15 @@ export function ReturnSection({ result }: Props) {
     [capture, persistReminder],
   );
 
-  const handleRerun = useCallback(async () => {
-    if (rerunBusy) return;
-    capture("audit_rerun_clicked", {
-      source: "return_section",
-      since: "30d",
-    });
-    setRerunBusy(true);
-    try {
-      await triggerRun({ cli: [], since: "30d" });
-      // Reload the page after the run so the cached result + dashboard cache
-      // get re-hydrated against the new scan. Cheaper than threading state.
-      window.location.reload();
-    } catch (err) {
-      const kind = err instanceof RerunError ? err.kind : "network";
-      capture("audit_rerun_failed", {
-        kind,
-        source: "return_section",
-        since: "30d",
-        cli_filter: "all",
-      });
-    } finally {
-      setRerunBusy(false);
-    }
-  }, [capture, rerunBusy]);
+  // Re-audit is now lifted into AuditDashboard so the top-of-page bar and
+  // this bottom button share state — concurrent clicks are impossible and
+  // success path soft-refreshes the report rather than reloading the page.
+  // PostHog `source: "return_section"` capture happens inside the lifted
+  // handler via the `source` argument it receives.
+  const handleRerun = useCallback(() => {
+    if (isRunning) return;
+    onRerun();
+  }, [isRunning, onRerun]);
 
   const authed = authStatus.kind === "authed";
   const hasReminder = authed && reminder !== null;
@@ -328,7 +316,7 @@ export function ReturnSection({ result }: Props) {
               showSetReminder={!hasReminder}
               setReminderDisabled={reminderBusy}
               reminderBusy={reminderBusy}
-              rerunBusy={rerunBusy}
+              rerunBusy={isRunning}
               hasUnenabled={hasUnenabled}
               copied={copied}
               onSetReminder={handleSetReminder}
@@ -341,7 +329,7 @@ export function ReturnSection({ result }: Props) {
             showSetReminder
             setReminderDisabled={authStatus.kind === "unknown" || reminderBusy}
             reminderBusy={reminderBusy}
-            rerunBusy={rerunBusy}
+            rerunBusy={isRunning}
             hasUnenabled={hasUnenabled}
             copied={copied}
             onSetReminder={handleSetReminder}

package/.next/standalone/app/audit/_components/top-audit-bar.tsx

@@ -0,0 +1,153 @@
+"use client";
+
+/**
+ * Top-of-page re-audit affordance. Renders as a thin strip directly above
+ * the IdentitySection — the first thing the eye lands on after the page
+ * background. Mirrors `.arch-mast`'s dashed-bottom-border vocabulary so
+ * the bar reads as a sibling band rather than a new component family.
+ *
+ * Three rendered states:
+ *
+ *   - "cached"  — shows `audited 3d ago` + a green pulse if fresh, an
+ *                 amber `expires in 14h — re-audit to refresh` chip when
+ *                 inside the last 24h of the 7-day window, and the
+ *                 `[ re-audit ]` action on the right.
+ *   - "expired" — collapses to a single banner: `your audit expired —
+ *                 re-audit to refresh`, same action on the right.
+ *   - "empty"   — `no audit yet`, action on the right. Mirrors the
+ *                 existing empty-state CTA so the page never reads as
+ *                 dead at first glance.
+ *
+ * Action button reuses `.share-btn` for visual continuity with the
+ * existing `[ re-audit now ]` at the bottom of the report (return-section).
+ */
+import React, { useEffect, useState } from "react";
+
+const HOUR_MS = 60 * 60_000;
+const DAY_MS = 24 * HOUR_MS;
+const TTL_MS = 7 * DAY_MS;
+const EXPIRY_NOTE_THRESHOLD_MS = DAY_MS;
+
+export type TopAuditBarMode = "cached" | "expired" | "empty";
+
+export interface TopAuditBarProps {
+  mode: TopAuditBarMode;
+  /** ISO timestamp from the dashboard cache (or the expired-meta probe).
+   *  Required for "cached" and "expired"; ignored for "empty". */
+  cachedAt: string | null;
+  /** True while a re-audit is in flight. Disables the button and swaps
+   *  the label to `[ scanning… ]`. */
+  isRunning: boolean;
+  onRerun: () => void;
+}
+
+export function relativeTimeAgo(now: number, then: number): string {
+  const ageMs = Math.max(0, now - then);
+  if (ageMs < 90_000) return "just now";
+  if (ageMs < 60 * 60_000) return `${Math.round(ageMs / 60_000)}m ago`;
+  if (ageMs < DAY_MS) return `${Math.round(ageMs / HOUR_MS)}h ago`;
+  return `${Math.round(ageMs / DAY_MS)}d ago`;
+}
+
+export function timeUntilExpiry(now: number, cachedAtMs: number): string {
+  const remainingMs = Math.max(0, cachedAtMs + TTL_MS - now);
+  if (remainingMs < 60_000) return "<1m";
+  if (remainingMs < 60 * 60_000) return `${Math.round(remainingMs / 60_000)}m`;
+  if (remainingMs < DAY_MS) return `${Math.round(remainingMs / HOUR_MS)}h`;
+  return `${Math.round(remainingMs / DAY_MS)}d`;
+}
+
+export function TopAuditBar({ mode, cachedAt, isRunning, onRerun }: TopAuditBarProps) {
+  // Re-render once a minute so the relative-time string stays current
+  // without forcing a full page poll. Cheap — one state bump per minute.
+  const [now, setNow] = useState(() => Date.now());
+  useEffect(() => {
+    const t = setInterval(() => setNow(Date.now()), 60_000);
+    return () => clearInterval(t);
+  }, []);
+
+  const cachedAtMs = cachedAt ? new Date(cachedAt).getTime() : null;
+  const validCachedAt = cachedAtMs !== null && !Number.isNaN(cachedAtMs);
+  const ageMs = validCachedAt ? now - cachedAtMs : null;
+  const remainingMs = validCachedAt ? cachedAtMs + TTL_MS - now : null;
+  const expiringSoon =
+    mode === "cached"
+    && remainingMs !== null
+    && remainingMs <= EXPIRY_NOTE_THRESHOLD_MS
+    && remainingMs > 0;
+
+  const buttonLabel = isRunning ? "[ scanning… ]" : "[ re-audit ]";
+
+  // The bar is a single horizontal band: left = status, center = optional
+  // amber note (only when expiring soon), right = action button. On narrow
+  // viewports it wraps to two rows.
+  return (
+    <div
+      className={
+        "top-audit-bar"
+        + (mode === "expired" ? " top-audit-bar--expired" : "")
+        + (mode === "empty" ? " top-audit-bar--empty" : "")
+      }
+      role="region"
+      aria-label="audit status"
+    >
+      <div className="top-audit-bar__left">
+        {mode === "cached" && validCachedAt && ageMs !== null && (
+          <>
+            <span className="top-audit-bar__label">
+              <span className="top-audit-bar__glyph">━━</span> last audit
+            </span>
+            <span
+              className={
+                "top-audit-bar__time"
+                + (ageMs < HOUR_MS ? " top-audit-bar__time--fresh" : "")
+              }
+            >
+              <span className="top-audit-bar__dot" aria-hidden="true" />
+              audited {relativeTimeAgo(now, cachedAtMs!)}
+            </span>
+          </>
+        )}
+        {mode === "expired" && (
+          <>
+            <span className="top-audit-bar__label top-audit-bar__label--warn">
+              <span className="top-audit-bar__glyph">━━</span> audit expired
+            </span>
+            <span className="top-audit-bar__expired-copy">
+              your audit aged past 7d — re-audit to refresh
+            </span>
+          </>
+        )}
+        {mode === "empty" && (
+          <>
+            <span className="top-audit-bar__label">
+              <span className="top-audit-bar__glyph">━━</span> no audit yet
+            </span>
+            <span className="top-audit-bar__time">
+              run one to see your archetype
+            </span>
+          </>
+        )}
+      </div>
+
+      {expiringSoon && remainingMs !== null && (
+        <div className="top-audit-bar__center" aria-live="polite">
+          <span className="top-audit-bar__amber-dot" aria-hidden="true" />
+          expires in {timeUntilExpiry(now, cachedAtMs!)} — re-audit to refresh
+        </div>
+      )}
+
+      <div className="top-audit-bar__right">
+        <button
+          type="button"
+          className="share-btn top-audit-bar__btn"
+          onClick={onRerun}
+          disabled={isRunning}
+          data-state={isRunning ? "scanning" : "idle"}
+        >
+          {buttonLabel}
+        </button>
+      </div>
+    </div>
+  );
+}