failproofai 0.0.10 → 0.0.11-beta.10

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

@@ -0,0 +1,375 @@
+"use client";
+
+/**
+ * Auth dialog — modal overlay shown when an unauthenticated user clicks
+ * 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
+ *
+ * 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";
+import { usePostHog } from "@/contexts/PostHogContext";
+import { fetchWithTimeout, isAbortError } from "@/lib/fetch-with-timeout";
+
+export interface AuthedUser {
+  id: string;
+  email: string;
+}
+
+interface Props {
+  open: boolean;
+  /** Optional title. Defaults to "where to route the reminder?". */
+  headline?: string;
+  /** Optional subtitle shown under the title on the email step. Defaults to
+   *  "we'll send a one-time code to confirm." */
+  subhead?: 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. */
+  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 = "where to route the reminder?",
+  subhead = "we'll send a one-time code to confirm.",
+  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);
+
+  useEffect(() => {
+    if (open) {
+      setStep({ kind: "email", error: null });
+      setBusy(false);
+      succeededRef.current = false;
+      capture("audit_auth_dialog_opened", { source });
+    }
+  }, [capture, open, source]);
+
+  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]);
+
+  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]);
+
+  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 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;
+      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">
+        <button
+          type="button"
+          className="auth-close"
+          onClick={onClose}
+          disabled={busy}
+          aria-label="close"
+        >
+          ×
+        </button>
+
+        <h2 id="auth-dialog-title" className="auth-headline">
+          {headline}
+        </h2>
+
+        {step.kind === "email" && (
+          <>
+            <p className="auth-sub">{subhead}</p>
+            <form onSubmit={onEmailSubmit} className="auth-form">
+              <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">
+              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">
+              <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> signed in as{" "}
+              <span className="auth-email">{step.user.email}</span>.
+            </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/come-back-better-section.tsx

@@ -0,0 +1,333 @@
+"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.";
+
+// The AuthDialog is shared by the reminder and invite CTAs. The reminder path
+// keeps the dialog's default copy; the invite path swaps in login-required
+// copy. Content only — the auth flow is identical for both.
+const INVITE_AUTH_COPY = {
+  headline: "Oops! Login required",
+  subhead: "What's your email?",
+} as const;
+
+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);
+  // Copy for the shared AuthDialog: {} keeps the reminder defaults,
+  // INVITE_AUTH_COPY shows the invite variant. Set by whichever CTA opens the
+  // dialog — content selection only, no effect on the auth flow.
+  const [authCopy, setAuthCopy] = useState<{ headline?: string; subhead?: string }>({});
+  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") {
+        setAuthCopy({}); // reminder context → keep the dialog's default copy
+        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") {
+      setAuthCopy(INVITE_AUTH_COPY); // invite context → "Oops! Login required"
+      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);
+          setAuthCopy(INVITE_AUTH_COPY); // still the invite context
+          setDialogOpen(true);
+        }}
+      />
+
+      <AuthDialog
+        open={dialogOpen}
+        source="return_section"
+        headline={authCopy.headline}
+        subhead={authCopy.subhead}
+        onClose={() => setDialogOpen(false)}
+        onAuthed={(u) => {
+          setDialogOpen(false);
+          void handleAuthed(u);
+        }}
+      />
+    </section>
+  );
+}