failproofai 0.0.10 → 0.0.11-beta.10

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

@@ -0,0 +1,119 @@
+"use client";
+
+/**
+ * `triggerRun` — POST /api/audit/run, then poll /api/audit/status until the
+ * server reports the run finished. Used by:
+ *  - the audit empty-state CTA (`empty-state.tsx`),
+ *  - the return-section's `[ re-audit now ]` button (`return-section.tsx`).
+ *
+ * The original `<RerunButton>` React component lived here too, but no
+ * caller ever rendered it (the rerun UI is integrated into the two
+ * sections above). Dropped in this refactor to remove dead code and the
+ * stale `lucide-react`/`usePostHog`/`cn` imports it dragged in.
+ *
+ * `triggerRun` throws `RerunError` on POST failure / network failure /
+ * poll-loop timeout — callers should catch and render a distinct
+ * "rerun failed" state. The `kind` discriminates timeout vs other
+ * network failures so the UI can show different copy.
+ */
+import { fetchWithTimeout, isAbortError } from "@/lib/fetch-with-timeout";
+
+export interface ScanParams {
+  /** Empty array = all CLIs. */
+  cli: string[];
+  /** "7d" | "30d" | "90d" | "all" (or any value accepted by parseSinceOpt). */
+  since: string;
+  /** Skip the per-transcript cache and produce a genuinely fresh scan. Set by
+   *  the explicit re-audit affordance so "re-audit" never silently returns the
+   *  identical cached result — it re-scans every transcript from scratch. */
+  noCache?: boolean;
+}
+
+const POLL_INTERVAL_MS = 1000;
+
+/** Give up polling only after this many *consecutive* status-fetch failures.
+ *  There is no duration cap on a run (a cold all-history scan is unbounded), so
+ *  the only thing that should stop a live poll is losing the server — not the
+ *  run taking a while. At POLL_INTERVAL_MS, this is ~10s of an unreachable
+ *  server before we surface a network error. */
+const MAX_CONSECUTIVE_POLL_FAILURES = 10;
+
+/** Exported for unit testing the option-threading. */
+export function paramsToBody(p: ScanParams) {
+  return {
+    cli: p.cli.length > 0 ? p.cli : undefined,
+    since: p.since === "all" ? undefined : p.since,
+    noCache: p.noCache ? true : undefined,
+  };
+}
+
+export class RerunError extends Error {
+  readonly kind: "post_failed" | "network" | "timeout";
+  constructor(kind: RerunError["kind"], message: string) {
+    super(message);
+    this.kind = kind;
+    this.name = "RerunError";
+  }
+}
+
+export async function triggerRun(scanParams: ScanParams): Promise<void> {
+  // Start the run. The route is fire-and-forget — it kicks off runAudit() in
+  // the background and returns 202 in milliseconds — so the default fast fetch
+  // timeout is correct here: it bounds the *kickoff request*, not the run.
+  // 409 (already running) is fine — we just poll the in-flight run.
+  try {
+    const res = await fetchWithTimeout("/api/audit/run", {
+      method: "POST",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify(paramsToBody(scanParams)),
+    });
+    if (!res.ok && res.status !== 409) {
+      const text = await res.text().catch(() => "");
+      console.error("audit run failed:", res.status, text);
+      throw new RerunError("post_failed", `audit run failed (${res.status})`);
+    }
+  } catch (err) {
+    if (err instanceof RerunError) throw err;
+    console.error("audit run request failed:", err);
+    throw new RerunError(isAbortError(err) ? "timeout" : "network", "audit run request failed");
+  }
+
+  // Poll /api/audit/status until the run finishes. There is deliberately NO
+  // duration cap: a cold, all-history scan can run arbitrarily long and must
+  // not be guillotined client-side. The only failure mode that stops polling is
+  // losing the server, tracked as consecutive status-fetch failures.
+  let consecutiveFailures = 0;
+  for (;;) {
+    await new Promise((r) => setTimeout(r, POLL_INTERVAL_MS));
+
+    let status: { running: boolean; error?: string | null } | null = null;
+    try {
+      const sres = await fetchWithTimeout("/api/audit/status", { cache: "no-store" });
+      if (sres.ok) {
+        status = (await sres.json()) as { running: boolean; error?: string | null };
+      }
+    } catch {
+      // Transient fetch/JSON failure (including a per-request timeout) — handled
+      // by the connectivity backstop below.
+    }
+
+    if (status === null) {
+      // Status unreachable or non-OK. Only give up once the server has been
+      // unreachable for MAX_CONSECUTIVE_POLL_FAILURES polls in a row; a single
+      // blip must not kill a long, healthy run.
+      if (++consecutiveFailures >= MAX_CONSECUTIVE_POLL_FAILURES) {
+        throw new RerunError("network", "audit status poll lost the server");
+      }
+      continue;
+    }
+
+    consecutiveFailures = 0;
+    if (!status.running) {
+      // Run finished. A non-null error means the background runAudit() threw —
+      // surface it (the dashboard cache was NOT updated). Otherwise it's a clean
+      // success: writeDashboardCache ran before finishRun(null).
+      if (status.error) throw new RerunError("post_failed", status.error);
+      return;
+    }
+  }
+}

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

@@ -0,0 +1,120 @@
+"use client";
+
+/**
+ * Fake-progress UI shown while /api/audit/run is in flight. runAudit() does
+ * not emit granular progress events, so we animate through 4 plausible
+ * stages on a fixed 4s interval. The user sees motion + a clear "this is
+ * still working" signal.
+ *
+ * Real runs take up to 30 seconds. The 4 stages would otherwise march
+ * straight to 4/4 and 100% well before the run actually resolves, so we:
+ *   - hold on the last stage in a "finishing up" label
+ *   - cap the visual bar at 90% until the parent unmounts this component
+ *
+ * Visual: audit pixel-craft. A `.panel` with pink corner brackets, a
+ * scanline-style spinner header, a stack of stages with green "✓" /
+ * pink "▮▮" / dim "○" markers, and a marquee progress bar at the bottom
+ * filling pink-on-dark as the run advances.
+ */
+import React, { useEffect, useState } from "react";
+
+const STAGES = [
+  { label: "discovering transcripts", detail: "walking ~/.claude, ~/.codex, ~/.cursor, …" },
+  { label: "parsing session logs",   detail: "reading JSONL + sqlite session stores" },
+  { label: "running policy checks",  detail: "replaying through 30 builtin policies" },
+  { label: "aggregating results",    detail: "counting hits, ranking by frequency" },
+];
+
+const STAGE_DURATION_MS = 4000;
+/** Visual cap until the actual run resolves. The component is unmounted
+ *  by the parent on completion — there is no "hit 100%" frame from here. */
+const MAX_DISPLAY_PROGRESS = 0.9;
+
+export function RunProgress() {
+  const [stage, setStage] = useState(0);
+  const [tick, setTick] = useState(0);
+
+  useEffect(() => {
+    const stageTimer = setInterval(() => {
+      setStage((s) => Math.min(s + 1, STAGES.length - 1));
+    }, STAGE_DURATION_MS);
+    const tickTimer = setInterval(() => setTick((t) => (t + 1) % 4), 350);
+    return () => {
+      clearInterval(stageTimer);
+      clearInterval(tickTimer);
+    };
+  }, []);
+
+  const dots = ".".repeat(tick + 1);
+  const onLastStage = stage === STAGES.length - 1;
+  const barRatio = Math.min(MAX_DISPLAY_PROGRESS, ((stage + 1) / STAGES.length) * MAX_DISPLAY_PROGRESS);
+  const barPercent = Math.round(barRatio * 100);
+
+  return (
+    <section className="section running-section" data-screen-label="00 Running">
+      <div className="section-mast">
+        <div className="section-label">
+          <span className="glyph">━━</span> audit{" "}
+          <span style={{ color: "var(--dim)" }}>·</span> in progress
+        </div>
+        <div className="section-meta">
+          <span style={{ color: "var(--accent-pink)" }}>●</span> scanning
+        </div>
+      </div>
+      <h2 className="section-h">scanning sessions{dots}</h2>
+
+      <div className="panel running-panel">
+        <div className="running-header">
+          <span className="running-prompt">$</span>
+          <span className="running-cmd">failproofai audit</span>
+          <span className="running-cursor" aria-hidden="true">▮</span>
+        </div>
+
+        <ul className="running-stages">
+          {STAGES.map((s, i) => {
+            const done = i < stage;
+            const active = i === stage;
+            return (
+              <li
+                key={i}
+                className={"running-stage" + (done ? " done" : active ? " active" : " queued")}
+              >
+                <span className="running-marker" aria-hidden="true">
+                  {done ? "✓" : active ? "▮▮" : "○"}
+                </span>
+                <div className="running-stage-body">
+                  <div className="running-stage-label">{s.label}</div>
+                  {active && (
+                    <div className="running-stage-detail">
+                      {onLastStage ? "finishing up…" : s.detail}
+                    </div>
+                  )}
+                </div>
+                {active && (
+                  <span className="running-stage-spin" aria-hidden="true">
+                    {["⠋", "⠙", "⠹", "⠸"][tick]}
+                  </span>
+                )}
+              </li>
+            );
+          })}
+        </ul>
+
+        <div className="running-bar-label">
+          <span>progress</span>
+          <span style={{ color: "var(--dim)" }}>{barPercent}%</span>
+        </div>
+        <div className="running-bar-track">
+          <div
+            className="running-bar-fill"
+            style={{ width: `${barPercent}%` }}
+          />
+        </div>
+
+        <p className="running-foot">
+          this can take a while depending on how much session history you have.
+        </p>
+      </div>
+    </section>
+  );
+}

package/.next/standalone/app/audit/_components/share-templates.ts

@@ -0,0 +1,94 @@
+/**
+ * Social-share copy for the audit identity card.
+ *
+ * Ten short, curiosity-forward templates for X and ten short, professional
+ * templates for LinkedIn. `pickTemplate` selects one deterministically from a
+ * seed (the behaviour fingerprint), so a given audit run always renders the
+ * same post while different runs / personas vary — then appends a clipboard
+ * paste hint. Pure — no React, no DOM — so it's unit-testable and shared by the
+ * client poster component.
+ */
+import type { Grade } from "@/src/audit/scoring";
+
+export interface ShareCtx {
+  score: number;
+  /** Lowercased archetype name, e.g. "the cowboy". */
+  arch: string;
+  grade: Grade;
+  /** Count of unenabled prescribed policies. */
+  missing: number;
+}
+
+const pol = (n: number) => (n === 1 ? "policy" : "policies");
+
+/** Appended to every picked share so the user knows the audit-card PNG is on
+ *  their clipboard and just needs pasting into the post. */
+const PASTE_LINE = "[ audit card copied to your clipboard — paste it into the post ]";
+
+/** Short, catchy, curiosity-forward — for X / Twitter. Emoji-forward, no
+ *  grade-tier framing (it sounds bad at the low end). Subtly tags @failproofai. */
+export const X_TEMPLATES: ((c: ShareCtx) => string)[] = [
+  ({ score, arch }) =>
+    `my AI coding agent has a personality and it's "${arch}" 🤠\n\n${score}/100 on the failproofai audit. what's yours?\n\nnpx -y failproofai audit · @failproofai`,
+  ({ score, arch }) =>
+    `turns out my coding agent is ${arch} 💀\n\n${score}/100 — it read my own session logs and did not miss.\n\nnpx -y failproofai audit · @failproofai`,
+  ({ score, arch }) =>
+    `my AI agent's archetype: ${arch} 👀\n\nscored ${score}/100. unsettlingly accurate.\n\nrun yours → npx -y failproofai audit · @failproofai`,
+  ({ score, arch, missing }) =>
+    `plot twist: my coding agent is ${arch} 🎭\n\n${score}/100${missing > 0 ? `, ${missing} ${pol(missing)} from clean` : `, somehow spotless`}.\n\nnpx -y failproofai audit · @failproofai`,
+  ({ score, arch }) =>
+    `@failproofai audited my coding agent and called it ${arch} ${score >= 80 ? "😎" : "😬"}\n\n${score}/100. brutal, accurate, no notes.\n\nnpx -y failproofai audit`,
+  ({ score, arch }) =>
+    `every AI agent has a tell. mine is "${arch}" 🎲\n\n${score}/100. find out what yours does when you're not looking.\n\nnpx -y failproofai audit · @failproofai`,
+  ({ score, arch }) =>
+    `${score}/100. archetype: ${arch}. 🔍\n\n@failproofai reverse-engineered my agent's whole vibe from its logs.\n\nnpx -y failproofai audit`,
+  ({ score, arch }) =>
+    `apparently my AI agent is "${arch}" and that explains a lot 😅\n\n${score}/100. audit yours in 30s:\n\nnpx -y failproofai audit · @failproofai`,
+  ({ score, arch }) =>
+    `ran my coding agent through @failproofai → ${arch}, ${score}/100 🎯\n\nbet yours has skeletons too. go find them:\n\nnpx -y failproofai audit`,
+  ({ score, arch, missing }) =>
+    `my coding agent is officially "${arch}" 🪞\n\n${score}/100${missing > 0 ? ` · ${missing} ${pol(missing)} to a clean run` : ` · every guardrail live`}.\n\nnpx -y failproofai audit · @failproofai`,
+];
+
+/** Short, professional, well-said — for LinkedIn. No emoji, no grade-tier
+ *  framing. Subtly references the @Failproof AI page. */
+export const LI_TEMPLATES: ((c: ShareCtx) => string)[] = [
+  ({ score, arch, missing }) =>
+    `I ran a failproofai audit on our AI coding agents: ${score}/100, behavioural archetype "${arch}". ${missing > 0 ? `${missing} prescribed ${pol(missing)} would close the gaps.` : `Every prescribed policy is already live.`}\n\nHow your agents behave unsupervised is finally measurable. Run yours: npx -y failproofai audit — @Failproof AI`,
+  ({ score, arch, missing }) =>
+    `Security posture check on our coding-agent stack: ${score}/100, profile "${arch}". ${missing > 0 ? `${missing} ${pol(missing)} flagged as real attack surface.` : `No open policy gaps.`}\n\nThirty seconds to assess your own: npx -y failproofai audit — @Failproof AI`,
+  ({ score, arch }) =>
+    `Most teams can't say how their AI agents behave when no one is watching. failproofai profiled ours as "${arch}" — ${score}/100, mapped to the exact policies that close each gap.\n\nRun yours: npx -y failproofai audit — @Failproof AI`,
+  ({ score, arch, missing }) =>
+    `Agent security isn't a vibe — it's measurable. We scored ${score}/100, archetype "${arch}". ${missing > 0 ? `${missing} prescribed ${pol(missing)} left to harden.` : `Full policy coverage.`}\n\nnpx -y failproofai audit — @Failproof AI`,
+  ({ score, arch }) =>
+    `Ran our coding agents through a failproofai behavioural audit: ${score}/100, "${arch}". It maps every risky pattern to the policy that prevents it, so remediation becomes a checklist.\n\nnpx -y failproofai audit — @Failproof AI`,
+  ({ score, arch }) =>
+    `What does your AI coding agent actually do when a command fails? Ours scored ${score}/100 as "${arch}" on the failproofai audit.\n\nFind out in 30 seconds: npx -y failproofai audit — @Failproof AI`,
+  ({ score, arch, missing }) =>
+    `Shipping with AI agents means owning their failure modes. failproofai profiled ours as "${arch}", ${score}/100${missing > 0 ? `, with ${missing} ${pol(missing)} still to close` : `, fully covered`}.\n\nnpx -y failproofai audit — @Failproof AI`,
+  ({ score, arch }) =>
+    `Observability for AI coding agents, distilled to one number: ${score}/100. Archetype "${arch}", every risk mapped to a preventive policy.\n\nOpen-source: npx -y failproofai audit — @Failproof AI`,
+  ({ score, arch }) =>
+    `We let failproofai read our agents' own session logs. Result: "${arch}", ${score}/100 — evidence-backed and mapped to the policies that prevent each pattern.\n\nAssess yours: npx -y failproofai audit — @Failproof AI`,
+  ({ score, arch }) =>
+    `The first step to securing AI agents is understanding how they behave. failproofai scored ours ${score}/100 ("${arch}") and prescribed every fix.\n\nnpx -y failproofai audit — @Failproof AI`,
+];
+
+/** djb2 hash — stable per seed so the template choice is deterministic. */
+function hashStr(s: string): number {
+  let h = 5381;
+  for (let i = 0; i < s.length; i++) h = ((h << 5) + h + s.charCodeAt(i)) | 0;
+  return h >>> 0;
+}
+
+/** Deterministically pick + render one template for the given seed, then append
+ *  the clipboard paste hint so the user knows to paste the copied audit card. */
+export function pickTemplate(
+  templates: ((c: ShareCtx) => string)[],
+  seed: string,
+  ctx: ShareCtx,
+): string {
+  const body = templates[hashStr(seed) % templates.length](ctx);
+  return `${body}\n\n${PASTE_LINE}`;
+}

package/.next/standalone/app/audit/_components/sigil.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+/**
+ * Pixel sigil — 8×8 grid for the archetype. Bare implementation: no plate,
+ * no crosshairs, no reveal animation. The poster owns whatever framing it
+ * wants around the sigil.
+ *
+ * Cell letters: `.` empty · `o` ink · `p` pink accent · `g` green accent ·
+ * `d` dim.
+ */
+import React from "react";
+import { SIGILS, type ArchetypeKey } from "@/src/audit/archetypes";
+
+interface Props {
+  archetypeKey: ArchetypeKey;
+}
+
+export function Sigil({ archetypeKey }: Props) {
+  const grid = SIGILS[archetypeKey] ?? SIGILS.optimist;
+  const cells: React.ReactElement[] = [];
+
+  for (let y = 0; y < 8; y++) {
+    const row = grid[y] ?? "........";
+    for (let x = 0; x < 8; x++) {
+      const c = row[x] ?? ".";
+      let cls = "px";
+      if (c === "o") cls += " on";
+      else if (c === "p") cls += " p";
+      else if (c === "g") cls += " g";
+      else if (c === "d") cls += " d";
+      cells.push(<div key={`${y}-${x}`} className={cls} />);
+    }
+  }
+
+  return <div className="sigil">{cells}</div>;
+}

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

@@ -0,0 +1,45 @@
+"use client";
+
+/**
+ * Section 02 — STRENGTHS. "what it's great at." Calm row list:
+ * ✓ glyph · headline + sub · right-aligned metric. No card chrome,
+ * no hover backgrounds, no checkmark backdrop.
+ */
+import React from "react";
+import type { Strength } from "@/src/audit/strengths";
+
+interface Props {
+  strengths: Strength[];
+}
+
+export function StrengthsSection({ strengths }: Props) {
+  if (strengths.length === 0) return null;
+
+  return (
+    <section className="audit-sec" data-screen-label="02 Strengths">
+      <div className="audit-sec-head">
+        <span className="audit-sec-eyebrow">
+          <span className="ix">02</span>{"// strengths"}
+        </span>
+        <span className="audit-sec-meta">{strengths.length} standouts</span>
+      </div>
+      <h2 className="audit-sec-title">what it&apos;s great at</h2>
+
+      <div className="strength-list">
+        {strengths.map((s, i) => (
+          <div key={i} className="strength-row">
+            <span className="strength-check" aria-hidden="true">✓</span>
+            <span className="strength-body">
+              <span className="strength-headline">{s.headline}</span>
+              <span className="strength-detail">{s.detail}</span>
+            </span>
+            <span className="strength-metric">
+              {s.metric}
+              {s.unit && <span className="unit">{s.unit}</span>}
+            </span>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}