failproofai 0.0.11-beta.8 → 0.0.11-beta.9

package/.next/standalone/app/audit/_components/come-back-better-section.tsx

@@ -0,0 +1,316 @@
+"use client";
+
+/**
+ * Section 05 — COME BACK BETTER. "build the habit."
+ *
+ * Two side-by-side cards:
+ *
+ *  • Reminder — set a reminder cadence (3d / 7d / 14d / 30d). The cadence
+ *    selection persists through /api/auth/reminder. Anon users get the
+ *    AuthDialog first; authed-with-existing-reminder users see the next
+ *    audit date and can reset.
+ *
+ *  • Unlock perks — share with N friends to unlock pro features for a
+ *    month. UI only — invite tracking + entitlement is a follow-up; the
+ *    button opens the same X share intent the poster uses.
+ *
+ * Re-audit moves out of this section: a small inline "or re-audit now"
+ * link sits under the reminder card so the affordance survives without
+ * dominating the layout.
+ */
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { usePostHog } from "@/contexts/PostHogContext";
+import { isAbortError } from "@/lib/fetch-with-timeout";
+import { AuthDialog, type AuthedUser } from "./auth-dialog";
+import { InviteDialog } from "./invite-dialog";
+
+interface Props {
+  isRunning: boolean;
+  onRerun: () => void;
+}
+
+const DEFAULT_REMINDER_DAYS = 7;
+const REMINDER_OPTIONS = [3, 7, 14, 30] as const;
+type Cadence = typeof REMINDER_OPTIONS[number];
+
+const PERKS_PERK = "share with 3 friends → unlock pro features for a month.";
+
+type AuthStatus =
+  | { kind: "unknown" }
+  | { kind: "anon" }
+  | { kind: "authed"; user: { id: string; email: string } };
+
+interface Reminder {
+  next_audit_at: number;
+  user_email: string;
+  set_at: number;
+}
+
+function daysUntil(unixSecs: number): number {
+  const nowSecs = Math.floor(Date.now() / 1000);
+  return Math.max(0, Math.ceil((unixSecs - nowSecs) / 86400));
+}
+
+function formatNextAudit(unixSecs: number): string {
+  const d = new Date(unixSecs * 1000);
+  return d.toLocaleDateString(undefined, {
+    weekday: "short",
+    month: "short",
+    day: "numeric",
+  });
+}
+
+export function ComeBackBetterSection({ isRunning, onRerun }: Props) {
+  const { capture } = usePostHog();
+  const [authStatus, setAuthStatus] = useState<AuthStatus>({ kind: "unknown" });
+  const [reminder, setReminder] = useState<Reminder | null>(null);
+  const [cadence, setCadence] = useState<Cadence>(DEFAULT_REMINDER_DAYS);
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [inviteDialogOpen, setInviteDialogOpen] = useState(false);
+  const [reminderBusy, setReminderBusy] = useState(false);
+  const ctaShownRef = useRef(false);
+  const lastRefreshAtRef = useRef(0);
+
+  const refreshStatus = useCallback(async () => {
+    lastRefreshAtRef.current = Date.now();
+    // Preserve current UI state on transient failures (5xx, network blips).
+    // Downgrading to anon on every error would clear a valid reminder mid-
+    // session on a single failed poll, forcing an unnecessary auth prompt.
+    // Only fall through to anon on the very first probe (still "unknown")
+    // so the cadence buttons unlock even if the server is unreachable.
+    const fallbackToAnonOnError = () => {
+      setAuthStatus((prev) => (prev.kind === "unknown" ? { kind: "anon" } : prev));
+    };
+    try {
+      const res = await fetch("/api/auth/status", { cache: "no-store" });
+      if (!res.ok) {
+        fallbackToAnonOnError();
+        return;
+      }
+      const body = (await res.json()) as {
+        authenticated?: boolean;
+        user?: { id: string; email: string };
+        reminder?: Reminder | null;
+      };
+      if (body.authenticated && body.user) {
+        setAuthStatus({ kind: "authed", user: body.user });
+        setReminder(body.reminder ?? null);
+      } else {
+        setAuthStatus({ kind: "anon" });
+        setReminder(null);
+      }
+    } catch {
+      fallbackToAnonOnError();
+    }
+  }, []);
+
+  useEffect(() => {
+    void refreshStatus();
+    const REFRESH_MIN_INTERVAL_MS = 5_000;
+    const maybeRefresh = () => {
+      if (Date.now() - lastRefreshAtRef.current < REFRESH_MIN_INTERVAL_MS) return;
+      void refreshStatus();
+    };
+    const onFocus = () => maybeRefresh();
+    const onVisibility = () => {
+      if (document.visibilityState === "visible") maybeRefresh();
+    };
+    window.addEventListener("focus", onFocus);
+    document.addEventListener("visibilitychange", onVisibility);
+    return () => {
+      window.removeEventListener("focus", onFocus);
+      document.removeEventListener("visibilitychange", onVisibility);
+    };
+  }, [refreshStatus]);
+
+  useEffect(() => {
+    if (ctaShownRef.current) return;
+    if (authStatus.kind === "unknown") return;
+    ctaShownRef.current = true;
+    capture("audit_reminder_cta_shown", {
+      auth_state: authStatus.kind,
+      has_existing_reminder: reminder !== null,
+      source: "come_back_better_section",
+    });
+  }, [authStatus, capture, reminder]);
+
+  const persistReminder = useCallback(
+    async (inDays: number): Promise<Reminder | null> => {
+      const controller = new AbortController();
+      const timer = setTimeout(() => controller.abort(), 10_000);
+      try {
+        setReminderBusy(true);
+        const res = await fetch("/api/auth/reminder", {
+          method: "POST",
+          headers: { "content-type": "application/json" },
+          body: JSON.stringify({ in_days: inDays }),
+          signal: controller.signal,
+        });
+        if (!res.ok) {
+          if (res.status === 401) {
+            setAuthStatus({ kind: "anon" });
+            setReminder(null);
+          }
+          capture("audit_reminder_saved", {
+            status: `http_${res.status}`,
+            source: "come_back_better_section",
+            cadence_days: inDays,
+          });
+          return null;
+        }
+        const body = (await res.json()) as { reminder?: Reminder };
+        capture("audit_reminder_saved", {
+          status: body.reminder ? "success" : "empty",
+          source: "come_back_better_section",
+          cadence_days: inDays,
+        });
+        return body.reminder ?? null;
+      } catch (err) {
+        const kind = isAbortError(err) ? "timeout" : "error";
+        capture("audit_reminder_saved", {
+          status: kind,
+          source: "come_back_better_section",
+          cadence_days: inDays,
+        });
+        return null;
+      } finally {
+        clearTimeout(timer);
+        setReminderBusy(false);
+      }
+    },
+    [capture],
+  );
+
+  const handleCadenceClick = useCallback(
+    async (next: Cadence) => {
+      setCadence(next);
+      capture("audit_reminder_cta_clicked", {
+        auth_state: authStatus.kind,
+        has_existing_reminder: reminder !== null,
+        cadence_days: next,
+        source: "come_back_better_section",
+      });
+      if (authStatus.kind === "authed") {
+        const saved = await persistReminder(next);
+        if (saved) setReminder(saved);
+        return;
+      }
+      if (authStatus.kind === "anon") {
+        setDialogOpen(true);
+      }
+    },
+    [authStatus, capture, persistReminder, reminder],
+  );
+
+  const handleAuthed = useCallback(
+    async (user: AuthedUser) => {
+      setAuthStatus({ kind: "authed", user });
+      capture("audit_auth_completed", {
+        source: "come_back_better_section",
+      });
+      const saved = await persistReminder(cadence);
+      if (saved) setReminder(saved);
+    },
+    [cadence, capture, persistReminder],
+  );
+
+  const handleInvite = useCallback(() => {
+    capture("audit_perks_invite_clicked", {
+      source: "come_back_better_section",
+      auth_state: authStatus.kind,
+    });
+    // Unauthed users go through the AuthDialog first so we have a sender
+    // identity to Cc on the invite email.
+    if (authStatus.kind !== "authed") {
+      setDialogOpen(true);
+      return;
+    }
+    setInviteDialogOpen(true);
+  }, [authStatus.kind, capture]);
+
+  const handleRerunInline = useCallback(() => {
+    if (isRunning) return;
+    onRerun();
+  }, [isRunning, onRerun]);
+
+  const days = reminder ? daysUntil(reminder.next_audit_at) : 0;
+
+  return (
+    <section className="audit-sec" data-screen-label="05 Come back better">
+      <div className="audit-sec-head">
+        <span className="audit-sec-eyebrow">
+          <span className="ix">05</span>{"// come back better"}
+        </span>
+      </div>
+      <h2 className="audit-sec-title">build the habit</h2>
+
+      <div className="cbb-grid">
+        {/* Reminder card */}
+        <div className="cbb-card">
+          <div className="cbb-card-title">set a reminder</div>
+          <div className="cbb-card-sub">
+            {reminder
+              ? `next audit set for ${formatNextAudit(reminder.next_audit_at)} · in ${days} day${days === 1 ? "" : "s"}.`
+              : "we'll nudge you when your next audit is due. pick the cadence:"}
+          </div>
+          <div className="cadence-row">
+            {REMINDER_OPTIONS.map((d) => (
+              <button
+                key={d}
+                type="button"
+                className={`cadence-btn${cadence === d ? " on" : ""}`}
+                disabled={reminderBusy || authStatus.kind === "unknown"}
+                onClick={() => void handleCadenceClick(d)}
+              >
+                {d}d
+              </button>
+            ))}
+          </div>
+          <button
+            type="button"
+            className="cbb-link"
+            disabled={isRunning}
+            onClick={handleRerunInline}
+          >
+            {isRunning ? "scanning…" : "or re-audit now →"}
+          </button>
+        </div>
+
+        {/* Perks card */}
+        <div className="cbb-card">
+          <div className="cbb-card-title">unlock failproof perks</div>
+          <div className="cbb-card-sub">{PERKS_PERK}</div>
+          <button type="button" className="invite-btn" onClick={handleInvite}>
+            invite a friend
+          </button>
+          <div className="cbb-foot">
+            {"// invites are sent from failproof.ai, Cc'd to you, with a link to run their own audit."}
+          </div>
+        </div>
+      </div>
+
+      <InviteDialog
+        open={inviteDialogOpen}
+        source="come_back_better_section"
+        onClose={() => setInviteDialogOpen(false)}
+        onUnauthorized={() => {
+          // Session expired between probe and submit — flip back to anon
+          // and bounce through the AuthDialog so the user re-auths.
+          setAuthStatus({ kind: "anon" });
+          setReminder(null);
+          setDialogOpen(true);
+        }}
+      />
+
+      <AuthDialog
+        open={dialogOpen}
+        source="return_section"
+        onClose={() => setDialogOpen(false)}
+        onAuthed={(u) => {
+          setDialogOpen(false);
+          void handleAuthed(u);
+        }}
+      />
+    </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>
+  );
+}