failproofai 0.0.11-beta.2 → 0.0.11-beta.4

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

@@ -0,0 +1,401 @@
+"use client";
+
+/**
+ * Auth dialog — modal overlay shown when an unauthenticated user clicks
+ * "[ set a reminder ]". Two-step flow:
+ *
+ *   1. Email entry  → POST /api/auth/login-request
+ *   2. OTP entry    → POST /api/auth/login-verify
+ *
+ * Styled to match the rest of the /audit page: pixel brackets, sharp pink
+ * accent, terminal-style frame. The dialog never sees the refresh token —
+ * the dashboard's API route writes it to ~/.failproofai/auth.json.
+ */
+
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { usePostHog } from "@/contexts/PostHogContext";
+import { fetchWithTimeout, isAbortError } from "@/lib/fetch-with-timeout";
+
+export interface AuthedUser {
+  id: string;
+  email: string;
+}
+
+interface Props {
+  open: boolean;
+  /** Copy shown above the title, e.g. "oops — you are unknown." */
+  headline?: string;
+  /** Copy under the title explaining why we need auth right now. */
+  reason?: string;
+  onClose: () => void;
+  /** Fired after successful verify. Caller decides what to do next. */
+  onAuthed: (user: AuthedUser) => void;
+  /** Telemetry tag identifying which CTA opened the dialog. Defaults to
+   *  "unknown" so existing call sites continue to compile. */
+  source?: string;
+}
+
+type Step =
+  | { kind: "email"; error: string | null }
+  | { kind: "code"; email: string; error: string | null; expiresIn: number; resendIn: number }
+  | { kind: "done"; user: AuthedUser };
+
+const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+function describeFetchError(err: unknown): string {
+  if (isAbortError(err)) {
+    return "request timed out. check your network and try again.";
+  }
+  const message = err instanceof Error ? err.message : String(err);
+  return `network error: ${message}`;
+}
+
+export function AuthDialog({
+  open,
+  headline = "oops — you are unknown.",
+  reason = "verify yourself to continue.",
+  onClose,
+  onAuthed,
+  source = "unknown",
+}: Props): React.ReactElement | null {
+  const { capture } = usePostHog();
+  const [step, setStep] = useState<Step>({ kind: "email", error: null });
+  const [busy, setBusy] = useState(false);
+  const succeededRef = useRef(false);
+  const emailInputRef = useRef<HTMLInputElement | null>(null);
+  const codeInputRef = useRef<HTMLInputElement | null>(null);
+
+  // Reset internal state every time the dialog opens. Also fire the
+  // funnel-opened event so we can measure dismissal vs verification rates.
+  useEffect(() => {
+    if (open) {
+      setStep({ kind: "email", error: null });
+      setBusy(false);
+      succeededRef.current = false;
+      capture("audit_auth_dialog_opened", { source });
+    }
+  }, [capture, open, source]);
+
+  // Fire dismissed when the dialog closes WITHOUT a successful verify.
+  // We piggyback on `open` flipping false instead of intercepting every
+  // close path so resend / step transitions don't double-count.
+  const wasOpenRef = useRef(false);
+  useEffect(() => {
+    if (open) {
+      wasOpenRef.current = true;
+      return;
+    }
+    if (wasOpenRef.current && !succeededRef.current) {
+      capture("audit_auth_dialog_dismissed", {
+        source,
+        step: step.kind,
+      });
+    }
+    wasOpenRef.current = false;
+  }, [capture, open, source, step.kind]);
+
+  // Autofocus the right input as the step changes.
+  useEffect(() => {
+    if (!open) return;
+    const t = setTimeout(() => {
+      if (step.kind === "email") emailInputRef.current?.focus();
+      else if (step.kind === "code") codeInputRef.current?.focus();
+    }, 50);
+    return () => clearTimeout(t);
+  }, [open, step.kind]);
+
+  // ESC to close.
+  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]);
+
+  // Resend countdown ticker.
+  const resendActive = step.kind === "code" && step.resendIn > 0;
+  useEffect(() => {
+    if (!resendActive) return;
+    const id = setInterval(() => {
+      setStep((s) =>
+        s.kind === "code" ? { ...s, resendIn: Math.max(0, s.resendIn - 1) } : s,
+      );
+    }, 1000);
+    return () => clearInterval(id);
+  }, [resendActive]);
+
+  const requestCode = useCallback(
+    async (email: string, opts: { isResend?: boolean } = {}): Promise<void> => {
+      const { isResend = false } = opts;
+      // Show resend errors inline on the OTP step — the previously sent
+      // code is still usable. Only the first-send error path bounces back
+      // to the email step.
+      const setError = (msg: string) => {
+        if (isResend) {
+          setStep((s) => (s.kind === "code" ? { ...s, error: msg } : s));
+        } else {
+          setStep({ kind: "email", error: msg });
+        }
+      };
+      setBusy(true);
+      try {
+        const res = await fetchWithTimeout("/api/auth/login-request", {
+          method: "POST",
+          headers: { "content-type": "application/json" },
+          body: JSON.stringify({ email }),
+        });
+        const body = (await res.json().catch(() => ({}))) as {
+          code?: string;
+          message?: string;
+          expires_in?: number;
+          resend_available_in?: number;
+          retry_after_secs?: number;
+        };
+        if (!res.ok) {
+          let msg = body.message ?? "could not send code.";
+          if (body.code === "rate_limited" && body.retry_after_secs !== undefined) {
+            msg = `too many tries. wait ${body.retry_after_secs}s and try again.`;
+          } else if (body.code === "upstream_unreachable") {
+            msg = "api-server unreachable. check your network.";
+          }
+          setError(msg);
+          return;
+        }
+        setStep({
+          kind: "code",
+          email,
+          error: null,
+          expiresIn: body.expires_in ?? 600,
+          resendIn: body.resend_available_in ?? 30,
+        });
+      } catch (err) {
+        setError(describeFetchError(err));
+      } finally {
+        setBusy(false);
+      }
+    },
+    [],
+  );
+
+  const verifyCode = useCallback(
+    async (email: string, code: string): Promise<void> => {
+      setBusy(true);
+      try {
+        const res = await fetchWithTimeout("/api/auth/login-verify", {
+          method: "POST",
+          headers: { "content-type": "application/json" },
+          body: JSON.stringify({ email, code }),
+        });
+        const body = (await res.json().catch(() => ({}))) as {
+          authenticated?: boolean;
+          user?: AuthedUser;
+          code?: string;
+          message?: string;
+        };
+        if (!res.ok || !body.authenticated || !body.user) {
+          let msg = body.message ?? "invalid code.";
+          if (body.code === "invalid_code") msg = "wrong code, or it expired. try again.";
+          setStep((s) =>
+            s.kind === "code" ? { ...s, error: msg } : s,
+          );
+          return;
+        }
+        succeededRef.current = true;
+        capture("audit_auth_dialog_succeeded", { source });
+        setStep({ kind: "done", user: body.user });
+        onAuthed(body.user);
+      } catch (err) {
+        const msg = describeFetchError(err);
+        setStep((s) =>
+          s.kind === "code" ? { ...s, error: msg } : s,
+        );
+      } finally {
+        setBusy(false);
+      }
+    },
+    [capture, onAuthed, source],
+  );
+
+  const onEmailSubmit = useCallback(
+    async (e: React.FormEvent<HTMLFormElement>) => {
+      e.preventDefault();
+      if (busy || step.kind !== "email") return;
+      const fd = new FormData(e.currentTarget);
+      const email = String(fd.get("email") ?? "").trim().toLowerCase();
+      if (!EMAIL_RE.test(email)) {
+        setStep({ kind: "email", error: "that doesn't look like an email." });
+        return;
+      }
+      await requestCode(email);
+    },
+    [busy, step, requestCode],
+  );
+
+  const onCodeSubmit = useCallback(
+    async (e: React.FormEvent<HTMLFormElement>) => {
+      e.preventDefault();
+      if (busy || step.kind !== "code") return;
+      const fd = new FormData(e.currentTarget);
+      const code = String(fd.get("code") ?? "").trim();
+      if (code.length < 4 || code.length > 12) {
+        setStep((s) =>
+          s.kind === "code" ? { ...s, error: "code is 4–12 characters." } : s,
+        );
+        return;
+      }
+      await verifyCode(step.email, code);
+    },
+    [busy, step, verifyCode],
+  );
+
+  const onResend = useCallback(async () => {
+    if (step.kind !== "code" || step.resendIn > 0 || busy) return;
+    await requestCode(step.email, { isResend: true });
+  }, [step, busy, requestCode]);
+
+  if (!open) return null;
+
+  return (
+    <div
+      className="auth-dialog-backdrop"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="auth-dialog-title"
+      onClick={(e) => {
+        if (!busy && e.target === e.currentTarget) onClose();
+      }}
+    >
+      <div className="auth-dialog">
+        <span className="corner tl">┌</span>
+        <span className="corner tr">┐</span>
+        <span className="corner bl">└</span>
+        <span className="corner br">┘</span>
+
+        <button
+          type="button"
+          className="auth-close"
+          onClick={onClose}
+          disabled={busy}
+          aria-label="close"
+        >
+          [ x ]
+        </button>
+
+        <div className="auth-label">━━ identity check</div>
+        <h2 id="auth-dialog-title" className="auth-headline">
+          {headline}
+        </h2>
+
+        {step.kind === "email" && (
+          <>
+            <p className="auth-sub">{reason}</p>
+            <form onSubmit={onEmailSubmit} className="auth-form">
+              <label className="auth-field-label" htmlFor="auth-dialog-email">
+                email
+              </label>
+              <input
+                ref={emailInputRef}
+                id="auth-dialog-email"
+                name="email"
+                type="email"
+                autoComplete="email"
+                inputMode="email"
+                spellCheck={false}
+                placeholder="you@yourdomain.com"
+                disabled={busy}
+                className="auth-input"
+                required
+              />
+              {step.error && <div className="auth-error">{step.error}</div>}
+              <div className="auth-actions">
+                <button type="submit" className="auth-btn primary" disabled={busy}>
+                  {busy ? "[ sending… ]" : "[ send code ]"}
+                </button>
+                <button
+                  type="button"
+                  className="auth-btn"
+                  onClick={onClose}
+                  disabled={busy}
+                >
+                  [ cancel ]
+                </button>
+              </div>
+            </form>
+          </>
+        )}
+
+        {step.kind === "code" && (
+          <>
+            <p className="auth-sub">
+              we sent a code to <span className="auth-email">{step.email}</span>.
+              <br />
+              check your inbox — it expires in {Math.ceil(step.expiresIn / 60)} min.
+            </p>
+            <form onSubmit={onCodeSubmit} className="auth-form">
+              <label className="auth-field-label" htmlFor="auth-dialog-code">
+                one-time code
+              </label>
+              <input
+                ref={codeInputRef}
+                id="auth-dialog-code"
+                name="code"
+                type="text"
+                inputMode="numeric"
+                autoComplete="one-time-code"
+                spellCheck={false}
+                placeholder="123456"
+                disabled={busy}
+                className="auth-input auth-input-code"
+                maxLength={12}
+                required
+              />
+              {step.error && <div className="auth-error">{step.error}</div>}
+              <div className="auth-actions">
+                <button type="submit" className="auth-btn primary" disabled={busy}>
+                  {busy ? "[ verifying… ]" : "[ verify ]"}
+                </button>
+                <button
+                  type="button"
+                  className="auth-btn"
+                  onClick={onResend}
+                  disabled={busy || step.resendIn > 0}
+                >
+                  {step.resendIn > 0
+                    ? `[ resend in ${step.resendIn}s ]`
+                    : "[ resend code ]"}
+                </button>
+              </div>
+              <button
+                type="button"
+                className="auth-back"
+                onClick={() => setStep({ kind: "email", error: null })}
+                disabled={busy}
+              >
+                ← use a different email
+              </button>
+            </form>
+          </>
+        )}
+
+        {step.kind === "done" && (
+          <>
+            <p className="auth-sub">
+              <span className="auth-ok">✓</span> you are{" "}
+              <span className="auth-email">{step.user.email}</span>.
+            </p>
+            <p className="auth-sub" style={{ marginTop: 8 }}>
+              session saved locally.
+            </p>
+            <div className="auth-actions">
+              <button type="button" className="auth-btn primary" onClick={onClose}>
+                [ continue ]
+              </button>
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,146 @@
+"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 {
+      await triggerRun({ cli: [], since: "30d" });
+    } 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 the last 30 days · all installed CLIs · 10–30s
+            </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/findings-section.tsx

@@ -0,0 +1,135 @@
+"use client";
+
+/**
+ * Section 04 — FINDINGS. "your agent has some quirks."
+ *
+ * Per-finding cards with four blocks: what happened / what this costs /
+ * evidence sample / the fix. Data sourced from `src/audit/findings.ts`.
+ */
+import React, { useState } from "react";
+import type { FindingCard } from "@/src/audit/findings";
+import { usePostHog } from "@/contexts/PostHogContext";
+
+interface Props {
+  findings: FindingCard[];
+}
+
+export function FindingsSection({ findings }: Props) {
+  if (findings.length === 0) return null;
+
+  return (
+    <section className="section" data-screen-label="04 Findings">
+      <div className="section-mast">
+        <div className="section-label">
+          <span className="glyph">━━</span> findings{" "}
+          <span style={{ color: "var(--dim)" }}>·</span> ranked by impact
+        </div>
+        <div className="section-meta">
+          <span className="p">●</span> {findings.length} detector{findings.length === 1 ? "" : "s"} triggered
+        </div>
+      </div>
+      <h2 className="section-h">your agent has some quirks.</h2>
+
+      <div className="findings-list">
+        {findings.map((f) => <Finding key={f.sourceSlug} f={f} />)}
+      </div>
+    </section>
+  );
+}
+
+function Finding({ f }: { f: FindingCard }) {
+  const { capture } = usePostHog();
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async (e: React.MouseEvent) => {
+    e.stopPropagation();
+    try {
+      await navigator.clipboard.writeText(f.fix.install);
+      setCopied(true);
+      capture("audit_copy_clicked", {
+        source: "findings_section",
+        item_type: "single_policy_install_command",
+        policy_name: f.fix.slug,
+        finding_slug: f.sourceSlug,
+      });
+      setTimeout(() => setCopied(false), 1500);
+    } catch { /* ignore */ }
+  };
+
+  return (
+    <article className="finding">
+      <header className="finding-head">
+        <div className="finding-num">№{f.num}</div>
+        <div className="finding-title">{f.title}</div>
+        <div className="finding-count">
+          {f.count}×
+          <span className="label">occurrences</span>
+        </div>
+      </header>
+      <div className="finding-meta">
+        <span>
+          <span style={{ color: "var(--dim)" }}>policy</span>{" "}
+          <span className="policy">{f.policy}</span>
+        </span>
+        <span className="sep">·</span>
+        <span>{f.projects} {f.projects === 1 ? "project" : "projects"}</span>
+        <span className="sep">·</span>
+        <span>last seen {f.lastSeen}</span>
+        {f.alreadyEnabled && (
+          <>
+            <span className="sep">·</span>
+            <span style={{ color: "var(--accent-green)" }}>enforced</span>
+          </>
+        )}
+      </div>
+      <div className="finding-body">
+        <div className="finding-block">
+          <div className="fb-label">what happened</div>
+          <div className="fb-body">{f.body}</div>
+        </div>
+        <div className="finding-block">
+          <div className="fb-label cost">what this costs</div>
+          <div className="fb-body">{f.cost}</div>
+        </div>
+        <div className="finding-block">
+          <div className="fb-label">evidence · sample</div>
+          <div className="fb-evidence">
+            {f.evidence.map((e, i) => {
+              if (e.kind === "comment") {
+                return <div key={i} className="comment">{e.text}</div>;
+              }
+              if (e.kind === "err") {
+                return <div key={i} className="err">{e.text}</div>;
+              }
+              return (
+                <div key={i}>
+                  <span className="arrow">→ </span>
+                  <span>{e.text}</span>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+        <div className="finding-block">
+          <div className="fb-label fix">the fix</div>
+          <div className="fb-fix">
+            <span className="slug">{f.fix.slug}</span>
+            <div style={{ color: "var(--ink-2)" }}>{f.fix.desc}</div>
+            {f.fix.alsoCoveredBy && (
+              <div style={{ color: "var(--dim)", fontSize: 11, marginTop: 4 }}>
+                also covered by{" "}
+                <span style={{ color: "var(--accent-green)" }}>{f.fix.alsoCoveredBy}</span>
+              </div>
+            )}
+            <code className="cmd" onClick={handleCopy} style={{ cursor: "pointer" }}>
+              <span className="prompt">$</span>{f.fix.install}{" "}
+              <span style={{ color: "var(--dim)", marginLeft: 8, fontSize: 10, letterSpacing: "0.15em", textTransform: "uppercase" }}>
+                {copied ? "copied" : "click to copy"}
+              </span>
+            </code>
+          </div>
+        </div>
+      </div>
+    </article>
+  );
+}