failproofai 0.0.11-beta.2 → 0.0.11-beta.3

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

@@ -0,0 +1,126 @@
+"use client";
+
+/**
+ * Section 01 — IDENTITY. The hero. Big archetype name with hard-offset
+ * stamp shadow, sigil to the right, keywords strip, "common in / primary
+ * risk" meta grid, and the closing one-liner.
+ *
+ * Layout uses the ported `.archetype-frame` / `.arch-mast` / `.arch-body`
+ * classes from audit-styles.css. Data sources from `src/audit/archetypes.ts`.
+ *
+ * The variant copy (tagline / keywords / common / risk / closing) is
+ * picked deterministically from a multi-variant catalog using the `seed`
+ * prop — typically the inferred project name. Same seed → same persona
+ * blurb across renders; different seeds → different copy. So two users
+ * who both land on "the optimist" see different language for it.
+ *
+ * Exposes a `frameRef` forwarded onto the `.archetype-frame` element so
+ * the ShowOff "make poster" action can capture it via html2canvas.
+ */
+import React, { forwardRef, useMemo } from "react";
+import { ARCHETYPES, pickArchetypeVariant, type ArchetypeKey } from "@/src/audit/archetypes";
+import { type Grade } from "@/src/audit/scoring";
+import { Sigil } from "./sigil";
+
+interface Props {
+  archetypeKey: ArchetypeKey;
+  secondaryKey: ArchetypeKey;
+  toolCalls: number;
+  sessions: number;
+  /** "30d", "7d", etc. shown in the target line; "all time" otherwise. */
+  window: string;
+  /** Stable seed for variant selection (project name is the natural fit). */
+  seed: string;
+}
+
+export const IdentitySection = forwardRef<HTMLDivElement, Props>(function IdentitySection(
+  { archetypeKey, secondaryKey, toolCalls, sessions, window, seed }: Props,
+  frameRef,
+) {
+  // `pickArchetypeVariant` re-hashes the seed string via djb2 + 4 mix
+  // passes per axis. Deterministic over (archetypeKey, seed) so memoize.
+  const archetype = useMemo(
+    () => pickArchetypeVariant(archetypeKey, seed),
+    [archetypeKey, seed],
+  );
+  const secondary = secondaryKey !== archetypeKey ? ARCHETYPES[secondaryKey] : null;
+
+  return (
+    <section className="identity" data-screen-label="01 Identity">
+      <div className="archetype-frame" ref={frameRef}>
+        <span className="corner tl">┌ identity</span>
+        <span className="corner tr">v1.0 ┐</span>
+        <span className="corner bl">└ № {archetype.index} / 08</span>
+        <span className="corner br">archetype ┘</span>
+
+        <div className="arch-mast">
+          <div className="arch-mast-left">
+            <div className="arch-eyebrow">
+              ━━ identity <span className="ix">·</span> your agent&apos;s archetype
+            </div>
+            <div className="arch-target">
+              detected from{" "}
+              <span style={{ color: "var(--ink)" }}>{toolCalls.toLocaleString()}</span>
+              {" "}tool calls
+              <span className="slash">/</span>
+              <span style={{ color: "var(--ink)" }}>{sessions}</span>
+              {" "}sessions
+              <span className="slash">/</span>
+              <span style={{ color: "var(--ink)" }}>{window}</span>
+              <span className="live">
+                <span className="dot-live"></span>live
+              </span>
+            </div>
+          </div>
+          <div className="arch-counter">
+            <div>
+              № {archetype.index}<span className="of"> of 08</span>
+            </div>
+            <div style={{ color: "var(--ink-2)", marginTop: 4 }}>archetype</div>
+          </div>
+        </div>
+
+        <div className="arch-body">
+          <div>
+            <h1 className="arch-name">{archetype.name}</h1>
+            <p className="arch-tagline">{archetype.tagline}</p>
+
+            {secondary && (
+              <div className="arch-secondary">
+                <span className="with">with</span>
+                <span className="name">{secondary.name.replace("the ", "")}</span>
+                <span className="with">tendencies</span>
+              </div>
+            )}
+
+            <div className="arch-keywords">
+              {archetype.keywords.map((k, i) => (
+                <React.Fragment key={k}>
+                  <span className="kw">{k}</span>
+                  {i < archetype.keywords.length - 1 && (
+                    <span className="kw-sep">·</span>
+                  )}
+                </React.Fragment>
+              ))}
+            </div>
+
+            <div className="arch-meta-grid">
+              <div className="arch-meta-item">
+                <span className="label">common in</span>
+                <span className="body">{archetype.common}</span>
+              </div>
+              <div className="arch-meta-item">
+                <span className="label p">primary risk</span>
+                <span className="body">{archetype.risk}</span>
+              </div>
+            </div>
+
+            <div className="arch-closing">— {archetype.closing}</div>
+          </div>
+
+          <Sigil archetypeKey={archetypeKey} />
+        </div>
+      </div>
+    </section>
+  );
+});

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

@@ -0,0 +1,194 @@
+"use client";
+
+/**
+ * Section 05 — PRESCRIBED POLICIES. "enable these. close the gap."
+ *
+ * Grid of unenabled-builtin cards with install commands + projected
+ * score uplift callout.
+ *
+ * Sources two layers of "hits":
+ *   1. Unenabled builtin policies that fired on their own
+ *   2. Audit detectors → mapped via DETECTOR_TO_POLICY in findings.ts.
+ *      The detector's hits get attributed to its primary policy so the
+ *      report frames everything as failproofai-coverable.
+ *
+ * Same policy can collect hits from multiple sources; we sum them and
+ * render one card per policy.
+ */
+import React, { useMemo, useState } from "react";
+import type { AuditResult } from "@/src/audit/types";
+import { type Grade, tierName } from "@/src/audit/scoring";
+import { usePostHog } from "@/contexts/PostHogContext";
+
+interface Props {
+  result: AuditResult;
+  projected: number;
+  projectedGrade: Grade;
+}
+
+// Mirror of DETECTOR_TO_POLICY in findings.ts. Could re-export but keep
+// the dependency tree shallow — both modules are stable.
+const DETECTOR_TO_PRIMARY_POLICY: Record<string, string> = {
+  "redundant-cd-cwd":          "warn-repeated-tool-calls",
+  "prefer-edit-over-read-cat": "block-read-outside-cwd",
+  "prefer-edit-over-sed-awk":  "warn-repeated-tool-calls",
+  "prefer-write-over-heredoc": "block-env-files",
+  "sleep-polling-loop":        "warn-background-process",
+  "find-from-root":            "block-read-outside-cwd",
+  "git-commit-no-verify":      "warn-git-amend",
+  "reread-after-edit":         "warn-repeated-tool-calls",
+};
+
+const POLICY_DESC: Record<string, string> = {
+  "warn-repeated-tool-calls": "warns when the same tool is called 3+ times with identical parameters — catches the loops before they spiral.",
+  "block-read-outside-cwd":   "denies any file read whose absolute path falls outside the project root, including symlinks.",
+  "block-env-files":          "blocks reads and writes of `.env` files at the tool layer.",
+  "block-secrets-write":      "blocks writes to .pem, id_rsa, credentials.json, and other secret-key files.",
+  "warn-background-process":  "warns before starting nohup / & / screen / tmux / disown processes that get forgotten about.",
+  "warn-git-amend":           "warns before amending git commits — dangerous-commit-flag class.",
+  "require-ci-green-before-stop": "requires CI checks to pass on HEAD before the agent declares the task done.",
+};
+
+function shortName(name: string): string {
+  const slash = name.indexOf("/");
+  return slash >= 0 ? name.slice(slash + 1) : name;
+}
+
+interface PolicyCard {
+  name: string;        // short slug
+  desc: string;        // displayTitle (low-res) or impact
+  catches: string;     // "would have caught X occurrences..." copy
+  hits: number;
+}
+
+function buildPolicyCards(result: AuditResult): PolicyCard[] {
+  const enabledSet = new Set(result.enabledBuiltinNames ?? []);
+  // policyName → aggregated counts
+  const buckets = new Map<string, { hits: number; projects: number; sources: Set<string> }>();
+
+  for (const row of result.results) {
+    if (row.hits === 0) continue;
+
+    let target: string;
+    let isFromDetector = false;
+    if (row.source === "audit-detector") {
+      const mapped = DETECTOR_TO_PRIMARY_POLICY[shortName(row.name)];
+      if (!mapped) continue;
+      target = mapped;
+      isFromDetector = true;
+    } else if (row.source === "builtin" && !row.enabledInConfig) {
+      target = shortName(row.name);
+    } else {
+      continue; // already-enabled builtins don't need to be prescribed
+    }
+
+    // Skip if the target policy is already in the user's enabled set
+    // (detector hits would land there in production already).
+    if (enabledSet.has(target)) continue;
+
+    const bucket = buckets.get(target) ?? { hits: 0, projects: 0, sources: new Set() };
+    bucket.hits += row.hits;
+    bucket.projects = Math.max(bucket.projects, row.projects);
+    bucket.sources.add(isFromDetector ? shortName(row.name) : "self");
+    buckets.set(target, bucket);
+  }
+
+  return [...buckets.entries()]
+    .sort((a, b) => b[1].hits - a[1].hits)
+    .map(([name, b]) => {
+      const viaList = [...b.sources].filter((s) => s !== "self");
+      const viaCopy = viaList.length > 0
+        ? ` (via ${viaList.join(", ")})`
+        : "";
+      const catches = `would have caught ${b.hits} occurrence${b.hits === 1 ? "" : "s"} across ${b.projects} project${b.projects === 1 ? "" : "s"}${viaCopy}.`;
+      return {
+        name,
+        desc: POLICY_DESC[name] ?? "enable this builtin policy to close the gap.",
+        catches,
+        hits: b.hits,
+      };
+    });
+}
+
+export function PoliciesSection({ result, projected, projectedGrade }: Props) {
+  // Builds a Map+Set aggregation + sort over result.results — non-trivial.
+  // Memoize so unrelated parent re-renders don't recompute every frame.
+  const policies = useMemo(() => buildPolicyCards(result), [result]);
+
+  if (policies.length === 0) return null;
+
+  return (
+    <section className="section" data-screen-label="05 Policies">
+      <div className="section-mast">
+        <div className="section-label">
+          <span className="glyph">━━</span> policies{" "}
+          <span style={{ color: "var(--dim)" }}>·</span> prescribed
+        </div>
+        <div className="section-meta">
+          {policies.length} polic{policies.length === 1 ? "y" : "ies"}{" "}
+          <span style={{ color: "var(--dim)" }}>·</span>{" "}
+          <span className="g">covers your slipping-through hits</span>
+        </div>
+      </div>
+      <h2 className="section-h">enable these. close the gap.</h2>
+
+      <div className="policy-callout">
+        <span>
+          enable all {policies.length === 1 ? "one" : policies.length}
+        </span>
+        <span className="arrow">→</span>
+        <span>projected score</span>
+        <span className="new-score">{projected}</span>
+        <span style={{ color: "var(--dim)" }}>·</span>
+        <span className="new-tier">{tierName(projectedGrade)}</span>
+      </div>
+
+      <div className="policies-grid">
+        {policies.map((p, i) => (
+          <PolicyTile key={p.name} policy={p} idx={i} />
+        ))}
+      </div>
+    </section>
+  );
+}
+
+function PolicyTile({ policy, idx }: { policy: PolicyCard; idx: number }) {
+  const { capture } = usePostHog();
+  const [copied, setCopied] = useState(false);
+  const install = `failproof policy add ${policy.name}`;
+
+  const handleCopy = async (e: React.MouseEvent) => {
+    e.stopPropagation();
+    try {
+      await navigator.clipboard.writeText(install);
+      setCopied(true);
+      capture("audit_copy_clicked", {
+        source: "policies_section",
+        item_type: "single_policy_install_command",
+        policy_name: policy.name,
+        policy_rank: idx + 1,
+      });
+      setTimeout(() => setCopied(false), 1500);
+    } catch { /* ignore */ }
+  };
+
+  return (
+    <article className="policy-card">
+      <div className="head">
+        <div className="policy-name">{policy.name}</div>
+        <div className="policy-slug">№{String(idx + 1).padStart(2, "0")}</div>
+      </div>
+      <div className="policy-desc">{policy.desc}</div>
+      <div className="policy-impact">
+        <span className="check">✓</span>{policy.catches}
+      </div>
+      <div className="policy-install">
+        <span className="prompt">$</span>
+        <span>{install}</span>
+        <span className="copy" onClick={handleCopy}>
+          {copied ? "copied" : "copy"}
+        </span>
+      </div>
+    </article>
+  );
+}

package/.next/standalone/app/audit/_components/report-footer.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import React from "react";
+
+interface Props {
+  cachedAt: string | null;
+  fixed?: boolean;
+}
+
+function formatUtcShort(iso: string | null): string {
+  if (!iso) return "—";
+  const d = new Date(iso);
+  if (Number.isNaN(d.getTime())) return "—";
+  const day = d.getUTCDate().toString().padStart(2, "0");
+  const monthNames = ["jan", "feb", "mar", "apr", "may", "jun", "jul", "aug", "sep", "oct", "nov", "dec"];
+  const m = monthNames[d.getUTCMonth()];
+  const y = d.getUTCFullYear();
+  const hh = d.getUTCHours().toString().padStart(2, "0");
+  const mm = d.getUTCMinutes().toString().padStart(2, "0");
+  return `${day} ${m} ${y}, ${hh}:${mm} utc`;
+}
+
+export function ReportFooter({ cachedAt, fixed = false }: Props) {
+  return (
+    <footer className={fixed ? "report-footer report-footer--fixed" : "report-footer"}>
+      <img src="/logo.svg" alt="failproof_ai" style={{ height: 18, display: "inline-block", verticalAlign: "middle" }} />
+      <span style={{ margin: "0 12px", color: "var(--line-2)" }}>·</span>
+      audit v1.0
+      <span style={{ margin: "0 12px", color: "var(--line-2)" }}>·</span>
+      generated {formatUtcShort(cachedAt)}
+      <span style={{ margin: "0 12px", color: "var(--line-2)" }}>·</span>
+      <span style={{ color: "var(--ink-2)" }}>auto-healing for your agents.</span>
+    </footer>
+  );
+}

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

@@ -0,0 +1,81 @@
+"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;
+}
+
+const POLL_INTERVAL_MS = 1000;
+const MAX_POLL_MS = 5 * 60_000; // 5 min hard cap
+
+function paramsToBody(p: ScanParams) {
+  return {
+    cli: p.cli.length > 0 ? p.cli : undefined,
+    since: p.since === "all" ? undefined : p.since,
+  };
+}
+
+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> {
+  // Kick off the run. 409 (already running) is OK — we'll just poll.
+  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 status until running flips false.
+  const startedAt = Date.now();
+  while (Date.now() - startedAt < MAX_POLL_MS) {
+    await new Promise((r) => setTimeout(r, POLL_INTERVAL_MS));
+    try {
+      const sres = await fetchWithTimeout("/api/audit/status", { cache: "no-store" });
+      if (!sres.ok) continue;
+      const s = await sres.json() as { running: boolean };
+      if (!s.running) return;
+    } catch {
+      // Transient (including per-request timeout) — keep polling until the
+      // outer MAX_POLL_MS budget runs out.
+    }
+  }
+  throw new RerunError("timeout", "audit poll loop timed out");
+}