failproofai 0.0.11-beta.7 → 0.0.11-beta.9

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

@@ -2,14 +2,15 @@
 
 /**
  * Auth dialog — modal overlay shown when an unauthenticated user clicks
- * "[ set a reminder ]". Two-step flow:
+ * a cadence button to 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.
+ * Calm chrome to match the rest of /audit: 1px borders, plain
+ * lowercase copy, no corner crosshair 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";
@@ -23,15 +24,12 @@ export interface AuthedUser {
 
 interface Props {
   open: boolean;
-  /** Copy shown above the title, e.g. "oops — you are unknown." */
+  /** Optional title. Defaults to "set a reminder". */
   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. */
+  /** Telemetry tag identifying which CTA opened the dialog. */
   source?: string;
 }
 
@@ -52,8 +50,7 @@ function describeFetchError(err: unknown): string {
 
 export function AuthDialog({
   open,
-  headline = "oops — you are unknown.",
-  reason = "verify yourself to continue.",
+  headline = "where to route the reminder?",
   onClose,
   onAuthed,
   source = "unknown",
@@ -65,8 +62,6 @@ export function AuthDialog({
   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 });
@@ -76,9 +71,6 @@ export function AuthDialog({
     }
   }, [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) {
@@ -94,7 +86,6 @@ export function AuthDialog({
     wasOpenRef.current = false;
   }, [capture, open, source, step.kind]);
 
-  // Autofocus the right input as the step changes.
   useEffect(() => {
     if (!open) return;
     const t = setTimeout(() => {
@@ -104,7 +95,6 @@ export function AuthDialog({
     return () => clearTimeout(t);
   }, [open, step.kind]);
 
-  // ESC to close.
   useEffect(() => {
     if (!open) return;
     const onKey = (e: KeyboardEvent): void => {
@@ -114,7 +104,6 @@ export function AuthDialog({
     return () => window.removeEventListener("keydown", onKey);
   }, [open, busy, onClose]);
 
-  // Resend countdown ticker.
   const resendActive = step.kind === "code" && step.resendIn > 0;
   useEffect(() => {
     if (!resendActive) return;
@@ -129,9 +118,6 @@ export function AuthDialog({
   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));
@@ -268,11 +254,6 @@ export function AuthDialog({
       }}
     >
       <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"
@@ -280,21 +261,19 @@ export function AuthDialog({
           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>
+            <p className="auth-sub">
+              we&apos;ll send a one-time code to confirm.
+            </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"
@@ -311,7 +290,7 @@ export function AuthDialog({
               {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 ]"}
+                  {busy ? "sending…" : "send code"}
                 </button>
                 <button
                   type="button"
@@ -319,7 +298,7 @@ export function AuthDialog({
                   onClick={onClose}
                   disabled={busy}
                 >
-                  [ cancel ]
+                  cancel
                 </button>
               </div>
             </form>
@@ -329,14 +308,10 @@ export function AuthDialog({
         {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.
+              code sent to <span className="auth-email">{step.email}</span>.
+              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"
@@ -354,7 +329,7 @@ export function AuthDialog({
               {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 ]"}
+                  {busy ? "verifying…" : "verify"}
                 </button>
                 <button
                   type="button"
@@ -363,8 +338,8 @@ export function AuthDialog({
                   disabled={busy || step.resendIn > 0}
                 >
                   {step.resendIn > 0
-                    ? `[ resend in ${step.resendIn}s ]`
-                    : "[ resend code ]"}
+                    ? `resend in ${step.resendIn}s`
+                    : "resend code"}
                 </button>
               </div>
               <button
@@ -382,15 +357,12 @@ export function AuthDialog({
         {step.kind === "done" && (
           <>
             <p className="auth-sub">
-              <span className="auth-ok">✓</span> you are{" "}
+              <span className="auth-ok">✓</span> signed in as{" "}
               <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 ]
+                continue
               </button>
             </div>
           </>

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/empty-state.tsx

@@ -32,7 +32,13 @@ export function EmptyState({ mode, running, onStarted, onCompleted }: Props) {
     });
     onStarted();
     try {
-      await triggerRun({ cli: [], since: "30d" });
+      // 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();
     }
@@ -82,7 +88,7 @@ export function EmptyState({ mode, running, onStarted, onCompleted }: Props) {
               {running ? "[ scanning… ]" : "[ run audit ]"}
             </button>
             <span className="empty-meta">
-              scans the last 30 days · all installed CLIs · 10–30s
+              scans all sessions · all installed CLIs · may take a while
             </span>
           </div>
         </div>