failproofai 0.0.10 → 0.0.11-beta.10

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

@@ -0,0 +1,152 @@
+"use client";
+
+/**
+ * Two-mode empty state for /audit, styled to the audit pixel-craft system:
+ *
+ *   - "no-cache" — first time the user visits /audit. CTA to run.
+ *   - "zero-sessions" — ran a scan but no transcripts were found. Likely the
+ *     user hasn't installed hooks for any CLI yet.
+ *
+ * Both modes use the shared `.panel` chrome with pink corner brackets, a
+ * green section eyebrow, a Bitcount Prop Single display headline, and a
+ * sharp `.btn-press` action button. Sized so it occupies the same vertical
+ * space as the loaded dashboard does on its hero — no more cramped popover.
+ */
+import React from "react";
+import { triggerRun } from "./rerun-button";
+import { usePostHog } from "@/contexts/PostHogContext";
+
+interface Props {
+  mode: "no-cache" | "zero-sessions";
+  running: boolean;
+  onStarted: () => void;
+  onCompleted: () => Promise<void> | void;
+}
+
+export function EmptyState({ mode, running, onStarted, onCompleted }: Props) {
+  const { capture } = usePostHog();
+  const handleRun = async () => {
+    capture("audit_first_run_clicked", {
+      source: "empty_state",
+      mode,
+    });
+    onStarted();
+    try {
+      // since:"all" — scan the user's entire session history, not a window.
+      await triggerRun({ cli: [], since: "all" });
+    } catch (err) {
+      // A failed first run falls back to the empty state via onCompleted's
+      // refetch (no cache was written). Swallow here so it doesn't surface as
+      // an unhandled promise rejection on the click handler.
+      console.error("audit first run failed:", err);
+    } finally {
+      await onCompleted();
+    }
+  };
+
+  if (mode === "no-cache") {
+    return (
+      <section className="section empty-section" data-screen-label="00 Empty">
+        <div className="section-mast">
+          <div className="section-label">
+            <span className="glyph">━━</span> audit{" "}
+            <span style={{ color: "var(--dim)" }}>·</span> first run
+          </div>
+          <div className="section-meta">
+            <span style={{ color: "var(--dim)" }}>○</span> no cache yet
+          </div>
+        </div>
+        <h2 className="section-h">scan and see.</h2>
+
+        <div className="panel empty-panel">
+          <div className="empty-glyph" aria-hidden="true">
+            <div className="empty-glyph-grid">
+              {Array.from({ length: 36 }).map((_, i) => {
+                // Form the word "GO" inside an 8x6 grid using a sparse hard-coded
+                // mask. Pure decoration — the grid layout sells the pixel-craft.
+                const on = ["1", "5", "8", "10", "13", "17", "20", "23", "25", "30", "32"].includes(String(i));
+                return <span key={i} className={"px" + (on ? " on" : "")} />;
+              })}
+            </div>
+            <div className="empty-glyph-label">▮▮ no audit data yet</div>
+          </div>
+
+          <h3 className="empty-headline">run your first audit.</h3>
+          <p className="empty-sub">
+            we&apos;ll walk every transcript across your installed CLIs — Claude Code,
+            Codex, Copilot, Cursor, OpenCode, Pi, Gemini — and count every wasteful
+            or risky action. you&apos;ll get a tier, a score, and a punch-list.
+          </p>
+
+          <div className="empty-actions">
+            <button
+              type="button"
+              className="btn btn-primary btn-press empty-cta"
+              onClick={handleRun}
+              disabled={running}
+            >
+              {running ? "[ scanning… ]" : "[ run audit ]"}
+            </button>
+            <span className="empty-meta">
+              scans all sessions · all installed CLIs · may take a while
+            </span>
+          </div>
+        </div>
+      </section>
+    );
+  }
+
+  // mode === "zero-sessions"
+  return (
+    <section className="section empty-section" data-screen-label="00 Empty">
+      <div className="section-mast">
+        <div className="section-label">
+          <span className="glyph">━━</span> audit{" "}
+          <span style={{ color: "var(--dim)" }}>·</span> zero transcripts
+        </div>
+        <div className="section-meta">
+          <span style={{ color: "var(--amber)" }}>●</span> hooks not installed
+        </div>
+      </div>
+      <h2 className="section-h">nothing to read.</h2>
+
+      <div className="panel empty-panel">
+        <div className="empty-glyph" aria-hidden="true">
+          <div className="empty-glyph-grid">
+            {Array.from({ length: 36 }).map((_, i) => {
+              const on = ["2", "4", "9", "11", "16", "18", "23", "25", "27", "30", "33"].includes(String(i));
+              return <span key={i} className={"px" + (on ? " on" : "")} />;
+            })}
+          </div>
+          <div className="empty-glyph-label">▮▮ no sessions found</div>
+        </div>
+
+        <h3 className="empty-headline">install hooks first.</h3>
+        <p className="empty-sub">
+          failproofai couldn&apos;t find any transcripts to scan on this machine.
+          install the hooks for at least one CLI and come back.
+        </p>
+
+        <div className="empty-actions">
+          <a
+            href="https://docs.befailproof.ai/getting-started"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="btn btn-primary btn-press empty-cta"
+            onClick={() => {
+              capture("audit_install_guide_clicked", {
+                source: "empty_state",
+                mode,
+              });
+            }}
+          >
+            [ install guide → ]
+          </a>
+          <span className="empty-meta">
+            takes about 30 seconds · one command per CLI
+          </span>
+        </div>
+      </div>
+    </section>
+  );
+}

package/.next/standalone/app/audit/_components/how-to-improve-section.tsx

@@ -0,0 +1,187 @@
+"use client";
+
+/**
+ * Section 04 — HOW TO IMPROVE. Calm row list, one per prescribed
+ * policy:
+ *
+ *   <policy-name>                 $ failproofai policy add <slug>   [📋]
+ *   <one-line explanation>
+ *
+ * A single "install all" button at the section header copies the
+ * combined install command for every prescribed 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;
+}
+
+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.",
+  "block-read-outside-cwd":   "denies any file read 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 processes.",
+  "warn-git-amend":           "warns before amending git commits.",
+  "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 FixRow {
+  name: string;
+  desc: string;
+  hits: number;
+}
+
+function buildFixes(result: AuditResult): FixRow[] {
+  const enabledSet = new Set(result.enabledBuiltinNames ?? []);
+  const buckets = new Map<string, number>();
+
+  for (const row of result.results) {
+    if (row.hits === 0) continue;
+
+    let target: string;
+    if (row.source === "audit-detector") {
+      const mapped = DETECTOR_TO_PRIMARY_POLICY[shortName(row.name)];
+      if (!mapped) continue;
+      target = mapped;
+    } else if (row.source === "builtin" && !row.enabledInConfig) {
+      target = shortName(row.name);
+    } else {
+      continue;
+    }
+
+    if (enabledSet.has(target)) continue;
+    buckets.set(target, (buckets.get(target) ?? 0) + row.hits);
+  }
+
+  return [...buckets.entries()]
+    .sort((a, b) => b[1] - a[1])
+    .map(([name, hits]) => ({
+      name,
+      desc: POLICY_DESC[name] ?? "enable this builtin policy to close the gap.",
+      hits,
+    }));
+}
+
+function bulkInstall(fixes: FixRow[]): string {
+  if (fixes.length === 0) return "";
+  if (fixes.length === 1) return `failproofai policy add ${fixes[0]!.name}`;
+  return `failproofai policy add ${fixes.map((f) => f.name).join(" ")}`;
+}
+
+export function HowToImproveSection({ result, projected, projectedGrade }: Props) {
+  const { capture } = usePostHog();
+  const fixes = useMemo(() => buildFixes(result), [result]);
+  const installAllCmd = useMemo(() => bulkInstall(fixes), [fixes]);
+  const [copiedAll, setCopiedAll] = useState(false);
+
+  if (fixes.length === 0) return null;
+
+  const handleInstallAll = async () => {
+    try {
+      await navigator.clipboard.writeText(installAllCmd);
+      setCopiedAll(true);
+      capture("audit_copy_clicked", {
+        source: "how_to_improve_section_install_all",
+        item_type: "bulk_install_command",
+        policy_count: fixes.length,
+      });
+      setTimeout(() => setCopiedAll(false), 1500);
+    } catch { /* ignore */ }
+  };
+
+  return (
+    <section className="audit-sec" data-screen-label="04 How to improve">
+      <div className="audit-sec-head">
+        <span className="audit-sec-eyebrow">
+          <span className="ix">04</span>{"// how to improve"}
+        </span>
+        <button
+          type="button"
+          className="install-all-btn"
+          onClick={handleInstallAll}
+          aria-label="Copy install-all command"
+        >
+          {copiedAll ? "copied" : "install all"}
+        </button>
+      </div>
+      <h2 className="audit-sec-title">install or configure</h2>
+      <div className="audit-sec-sub">
+        enable all {fixes.length === 1 ? "one" : fixes.length} → projected{" "}
+        <strong>{projected}</strong> · {tierName(projectedGrade).toLowerCase()}
+      </div>
+
+      <div className="fix-list">
+        {fixes.map((f, i) => (
+          <FixRow key={f.name} fix={f} idx={i} />
+        ))}
+      </div>
+    </section>
+  );
+}
+
+function FixRow({ fix, idx }: { fix: FixRow; idx: number }) {
+  const { capture } = usePostHog();
+  const [copied, setCopied] = useState(false);
+  const install = `failproofai policy add ${fix.name}`;
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(install);
+      setCopied(true);
+      capture("audit_copy_clicked", {
+        source: "how_to_improve_section",
+        item_type: "single_policy_install_command",
+        policy_name: fix.name,
+        policy_rank: idx + 1,
+      });
+      setTimeout(() => setCopied(false), 1500);
+    } catch { /* ignore */ }
+  };
+
+  return (
+    <div className="fix-row">
+      <div className="fix-row-info">
+        <div className="fix-name">{fix.name}</div>
+        <div className="fix-desc">{fix.desc}</div>
+      </div>
+      <div className="fix-row-cmd">
+        <code className="fix-cmd-code">{install}</code>
+        <button
+          type="button"
+          className="copy-icon-btn"
+          onClick={handleCopy}
+          aria-label={`Copy install command for ${fix.name}`}
+        >
+          {copied ? "✓" : (
+            <svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true">
+              <rect x="3" y="3" width="9" height="11" fill="none" stroke="currentColor" strokeWidth="1.2" />
+              <rect x="5.5" y="0.5" width="9" height="11" fill="none" stroke="currentColor" strokeWidth="1.2" />
+            </svg>
+          )}
+        </button>
+      </div>
+    </div>
+  );
+}

package/.next/standalone/app/audit/_components/invite-dialog.tsx

@@ -0,0 +1,227 @@
+"use client";
+
+/**
+ * Invite dialog — modal that takes a comma/newline-separated list of friend
+ * emails and POSTs them to /api/audit/invite. The api-server composes the
+ * actual invite email (Cc'ing the sender) using the same email infrastructure
+ * that backs the OTP flow.
+ *
+ * Anonymous users get bounced through the AuthDialog by the caller; this
+ * component assumes the session is already established.
+ */
+
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { usePostHog } from "@/contexts/PostHogContext";
+import { toast } from "@/app/components/toast";
+
+interface Props {
+  open: boolean;
+  onClose: () => void;
+  /** Source tag for PostHog so we can split "invited from come-back-better"
+   *  from any future entry points. */
+  source: string;
+  /** Called when the proxy returns 401 (session expired between probe and
+   *  submit). The parent should re-open the AuthDialog so the user can
+   *  re-authenticate; without this, a 401 dead-ends with an inline error. */
+  onUnauthorized?: () => void;
+}
+
+const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+const MAX_RECIPIENTS = 10;
+
+function parseEmails(input: string): { valid: string[]; invalid: string[] } {
+  const tokens = input
+    .split(/[\s,;]+/)
+    .map((t) => t.trim().toLowerCase())
+    .filter(Boolean);
+  const valid: string[] = [];
+  const invalid: string[] = [];
+  const seen = new Set<string>();
+  for (const t of tokens) {
+    if (seen.has(t)) continue;
+    seen.add(t);
+    if (EMAIL_RE.test(t)) valid.push(t);
+    else invalid.push(t);
+  }
+  return { valid, invalid };
+}
+
+export function InviteDialog({ open, onClose, source, onUnauthorized }: Props): React.ReactElement | null {
+  const { capture } = usePostHog();
+  const [value, setValue] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const inputRef = useRef<HTMLTextAreaElement | null>(null);
+
+  useEffect(() => {
+    if (open) {
+      setValue("");
+      setBusy(false);
+      setError(null);
+      capture("audit_invite_dialog_opened", { source });
+    }
+  }, [capture, open, source]);
+
+  useEffect(() => {
+    if (!open) return;
+    const t = setTimeout(() => inputRef.current?.focus(), 50);
+    return () => clearTimeout(t);
+  }, [open]);
+
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e: KeyboardEvent): void => {
+      if (e.key === "Escape" && !busy) onClose();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [open, busy, onClose]);
+
+  const { valid, invalid } = useMemo(() => parseEmails(value), [value]);
+
+  const submit = useCallback(
+    async (e: React.FormEvent<HTMLFormElement>) => {
+      e.preventDefault();
+      if (busy) return;
+      if (valid.length === 0) {
+        setError("add at least one valid email address.");
+        return;
+      }
+      if (valid.length > MAX_RECIPIENTS) {
+        setError(`up to ${MAX_RECIPIENTS} emails at a time. send the rest in a follow-up.`);
+        return;
+      }
+      setBusy(true);
+      setError(null);
+      capture("audit_invite_submitted", {
+        source,
+        recipient_count: valid.length,
+        had_invalid: invalid.length > 0,
+      });
+      try {
+        const res = await fetch("/api/audit/invite", {
+          method: "POST",
+          headers: { "content-type": "application/json" },
+          body: JSON.stringify({ to: valid }),
+        });
+        const body = (await res.json().catch(() => ({}))) as {
+          sent?: string[];
+          failed?: string[];
+          code?: string;
+          message?: string;
+        };
+        if (res.status === 401) {
+          // Session expired between probe and submit — route back through auth.
+          // Without this, repeated submits would dead-end with the same 401.
+          if (onUnauthorized) {
+            onClose();
+            onUnauthorized();
+          } else {
+            setError("session expired. please sign in again.");
+          }
+          return;
+        }
+        if (!res.ok) {
+          const msg = body.message ?? "couldn't send invites.";
+          setError(msg);
+          return;
+        }
+        const sent = body.sent?.length ?? 0;
+        const failed = body.failed?.length ?? 0;
+        toast(
+          failed > 0
+            ? `📨 sent ${sent}, ${failed} bounced — copy the bounce and try again.`
+            : `📨 sent ${sent} ${sent === 1 ? "invite" : "invites"}. thanks for spreading the word.`,
+        );
+        onClose();
+      } catch (err) {
+        const message = err instanceof Error ? err.message : String(err);
+        setError(`network error: ${message}`);
+      } finally {
+        setBusy(false);
+      }
+    },
+    [busy, valid, invalid, capture, source, onClose, onUnauthorized],
+  );
+
+  if (!open) return null;
+
+  return (
+    <div
+      className="auth-dialog-backdrop"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="invite-dialog-title"
+      onClick={(e) => {
+        if (!busy && e.target === e.currentTarget) onClose();
+      }}
+    >
+      <div className="auth-dialog">
+        <button
+          type="button"
+          className="auth-close"
+          onClick={onClose}
+          disabled={busy}
+          aria-label="close"
+        >
+          ×
+        </button>
+
+        <h2 id="invite-dialog-title" className="auth-headline">
+          invite friends to audit theirs
+        </h2>
+        <p className="auth-sub">
+          paste emails separated by commas, spaces, or newlines. you&apos;ll be Cc&apos;d on every invite so they know it&apos;s from you.
+        </p>
+
+        <form onSubmit={submit} className="auth-form">
+          <textarea
+            ref={inputRef}
+            name="emails"
+            placeholder="alice@x.com, bob@y.com&#10;carol@z.com"
+            disabled={busy}
+            className="auth-input invite-textarea"
+            value={value}
+            onChange={(e) => setValue(e.target.value)}
+            rows={4}
+            required
+          />
+          <div className="invite-summary">
+            {valid.length > 0 && (
+              <span className="invite-valid">{valid.length} valid</span>
+            )}
+            {invalid.length > 0 && (
+              <span className="invite-invalid">
+                {invalid.length} invalid: {invalid.slice(0, 3).join(", ")}
+                {invalid.length > 3 ? `, +${invalid.length - 3} more` : ""}
+              </span>
+            )}
+            {valid.length > MAX_RECIPIENTS && (
+              <span className="invite-invalid">
+                only {MAX_RECIPIENTS} per send — first {MAX_RECIPIENTS} will go.
+              </span>
+            )}
+          </div>
+          {error && <div className="auth-error">{error}</div>}
+          <div className="auth-actions">
+            <button
+              type="submit"
+              className="auth-btn primary"
+              disabled={busy || valid.length === 0}
+            >
+              {busy ? "sending…" : `send ${valid.length || ""} invite${valid.length === 1 ? "" : "s"}`.trim()}
+            </button>
+            <button
+              type="button"
+              className="auth-btn"
+              onClick={onClose}
+              disabled={busy}
+            >
+              cancel
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,75 @@
+"use client";
+
+/**
+ * Section 03 — QUIRKS. "what to improve."
+ *
+ * 4-column table: when · what slipped (+ policy that would've caught it) ·
+ * severity pill · recurrence. Each row corresponds to a triggered
+ * detector. No per-finding card chrome, no 4-quad body, no corner
+ * crosshairs — evidence and fix live in section 04 (How to improve).
+ */
+import React from "react";
+import type { FindingCard } from "@/src/audit/findings";
+
+interface Props {
+  findings: FindingCard[];
+}
+
+type Severity = "low" | "medium" | "high";
+
+/** Heuristic severity from occurrence count — until the audit pipeline
+ *  carries a real severity field. Tuned so a single occurrence reads as
+ *  low and >5 reads as high. */
+function severityFromCount(count: number): Severity {
+  if (count >= 6) return "high";
+  if (count >= 2) return "medium";
+  return "low";
+}
+
+function recurrenceLabel(count: number): string {
+  if (count <= 1) return "new";
+  if (count < 10) return `${count}× seen`;
+  return "recurring";
+}
+
+export function QuirksSection({ findings }: Props) {
+  if (findings.length === 0) return null;
+
+  return (
+    <section className="audit-sec" data-screen-label="03 Quirks">
+      <div className="audit-sec-head">
+        <span className="audit-sec-eyebrow">
+          <span className="ix">03</span>{"// quirks"}
+        </span>
+        <span className="audit-sec-meta">{findings.length} slipped through</span>
+      </div>
+      <h2 className="audit-sec-title">what to improve</h2>
+
+      <div className="quirks-table">
+        <div className="quirks-thead">
+          <span>when</span>
+          <span>what slipped</span>
+          <span>severity</span>
+          <span>seen</span>
+        </div>
+        {findings.map((f) => {
+          const sev = severityFromCount(f.count);
+          return (
+            <div key={f.sourceSlug} className="quirks-row">
+              <span className="q-when">{f.lastSeen}</span>
+              <span className="q-what">
+                <span className="q-title">{f.title}</span>
+                <span className="q-policy">
+                  would&apos;ve been caught by:{" "}
+                  <code>{f.policy}</code>
+                </span>
+              </span>
+              <span className={`q-pill q-pill-${sev}`}>{sev}</span>
+              <span className="q-recur">{recurrenceLabel(f.count)}</span>
+            </div>
+          );
+        })}
+      </div>
+    </section>
+  );
+}

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>
+  );
+}