failproofai 1.0.0-beta.2 → 1.0.0-beta.21

package/.next/standalone/app/audit/audit-styles.css

@@ -255,155 +255,12 @@
   margin-right: 6px;
 }
 
-/* ───────────────────────── auth dialog (set-a-reminder gate) ───────────────────────── */
-
-.auth-dialog-backdrop {
-  position: fixed; inset: 0; z-index: 10000;
-  display: grid; place-items: center;
-  padding: 32px 16px;
-  background: rgba(8,8,10,0.7);
-  backdrop-filter: blur(6px);
-  -webkit-backdrop-filter: blur(6px);
-}
-
-.auth-dialog {
-  position: relative;
-  width: 100%;
-  max-width: 420px;
-  padding: 28px 28px 24px;
-  border: 1px solid var(--line-2);
-  background: var(--bg-2);
-  font-family: var(--font-mono);
-  color: var(--ink);
-}
-
-.auth-close {
-  position: absolute; top: 12px; right: 14px;
-  font-family: var(--font-mono); font-size: 20px;
-  line-height: 1;
-  color: var(--dim);
-  background: transparent; border: none; padding: 4px 8px;
-  cursor: pointer;
-  transition: color 120ms;
-}
-.auth-close:hover { color: var(--accent-pink); }
-.auth-close:disabled { color: var(--line-2); cursor: not-allowed; }
-
-.auth-headline {
-  font-family: var(--font-mono);
-  font-size: 18px;
-  font-weight: 600;
-  letter-spacing: 0;
-  line-height: 1.3;
-  text-transform: none;
-  color: var(--ink);
-  margin: 0 0 8px;
-}
-
-.auth-sub {
-  font-family: var(--font-mono); font-size: 12px;
-  line-height: 1.55; color: var(--ink-2);
-  margin: 0 0 18px;
-}
-.auth-sub .auth-email {
-  color: var(--accent-pink);
-}
-.auth-sub .auth-ok {
-  color: var(--accent-green);
-  margin-right: 6px;
-}
-
-.auth-form { display: flex; flex-direction: column; gap: 10px; }
-
-.auth-field-label {
-  font-family: var(--font-mono); font-size: 10px;
-  letter-spacing: 0.22em; text-transform: uppercase;
-  color: var(--accent-green);
-}
-
-.auth-input {
-  width: 100%;
-  padding: 11px 14px;
-  background: var(--bg);
-  border: 1px solid var(--line-2);
-  color: var(--ink);
-  font-family: var(--font-mono); font-size: 14px;
-  letter-spacing: 0.03em;
-  outline: none;
-  transition: border-color 120ms, box-shadow 120ms;
-}
-.auth-input:focus {
-  border-color: var(--accent-pink);
-  box-shadow: 0 0 0 1px var(--accent-pink-soft);
-}
-.auth-input:disabled {
-  opacity: 0.55; cursor: not-allowed;
-}
-.auth-input-code {
-  letter-spacing: 0.5em;
-  text-align: center;
-  font-size: 18px;
-  font-variant-numeric: tabular-nums;
-}
-.auth-input::placeholder { color: var(--dim); }
-
-.auth-error {
-  font-family: var(--font-mono); font-size: 12px;
-  color: var(--accent-pink);
-  padding: 8px 12px;
-  background: var(--accent-pink-bg);
-  border: 1px solid var(--accent-pink);
-  border-left-width: 3px;
-  letter-spacing: 0.02em;
-  margin-top: 4px;
-}
-
-.auth-actions {
-  display: flex; gap: 10px; flex-wrap: wrap;
-  margin-top: 14px;
-}
-
-.auth-btn {
-  display: inline-flex; align-items: center; gap: 8px;
-  padding: 10px 16px;
-  font-family: var(--font-mono); font-size: 12px;
-  letter-spacing: 0.06em;
-  background: transparent;
-  border: 1px solid var(--line-2);
-  color: var(--ink);
-  cursor: pointer;
-  transition: all 120ms ease;
-}
-.auth-btn:hover:not(:disabled) {
-  border-color: var(--ink); background: rgba(255,255,255,0.04);
-}
-.auth-btn:disabled { opacity: 0.45; cursor: not-allowed; }
-.auth-btn.primary {
-  border-color: var(--accent-pink);
-  color: var(--accent-pink);
-  background: var(--accent-pink-bg);
-}
-.auth-btn.primary:hover:not(:disabled) {
-  background: var(--accent-pink); color: var(--bg);
-}
-
-.auth-back {
-  align-self: flex-start;
-  margin-top: 4px;
-  background: transparent; border: none; padding: 6px 0;
-  font-family: var(--font-mono); font-size: 11px;
-  letter-spacing: 0.1em; color: var(--dim);
-  cursor: pointer;
-  transition: color 120ms;
-}
-.auth-back:hover:not(:disabled) { color: var(--ink-2); }
-.auth-back:disabled { opacity: 0.45; cursor: not-allowed; }
-
-@media (max-width: 520px) {
-  .auth-dialog { padding: 26px 22px 22px; }
-  .auth-actions { flex-direction: column; align-items: stretch; }
-  .auth-btn { justify-content: center; }
-}
+/* ───────────────────────── auth dialog (set-a-reminder gate) ─────────────────────────
+ * The dialog's own styles moved to app/audit/_components/auth-dialog.css, which
+ * <AuthDialog> imports directly, so the modal is styled on every route that
+ * renders it (/audit and now /settings) rather than only this route stylesheet.
+ * The `.auth-status-pill` below stays here — it belongs to the /audit return
+ * CTA (come-back-better-section), not the dialog. */
 
 /* status pill in the return CTA: shows current logged-in email */
 .auth-status-pill {

package/.next/standalone/app/components/pause-notices.tsx

@@ -0,0 +1,111 @@
+"use client";
+
+/**
+ * The dashboard's rendering of a paused machine.
+ *
+ * Split out of `hooks-client.tsx` because these are the pieces that keep the
+ * activity view honest: a row evaluated during a pause looks identical to one
+ * where every policy ran and allowed, and without saying so the log asserts a
+ * clean window over exactly the window that was not enforced.
+ */
+import { useEffect, useState } from "react";
+import { ShieldAlert, TriangleAlert } from "lucide-react";
+import type { ActivePause } from "@/src/hooks/session-pause";
+
+/** Compact "time left" for a future timestamp. */
+export function formatRemaining(ms: number): string {
+  if (ms <= 0) return "expiring now";
+  // Sub-minute is checked before rounding: Math.round(30s) is "1m", which tells
+  // someone they have more time than they do. On a countdown to enforcement
+  // coming back, never round up.
+  if (ms < 60_000) return "under a minute";
+  const minutes = Math.round(ms / 60_000);
+  if (minutes < 60) return `${minutes}m`;
+  const hours = Math.floor(minutes / 60);
+  const rest = minutes % 60;
+  return rest === 0 ? `${hours}h` : `${hours}h${rest}m`;
+}
+
+/**
+ * Live state, not history: enforcement is paused RIGHT NOW.
+ *
+ * The rows below cannot carry this on their own — a pause set seconds ago has
+ * produced none yet, and that is precisely when someone needs telling that the
+ * machine is unguarded. An absent banner has to mean "enforcing", so this is fed
+ * from live pause state rather than inferred from whatever is on screen.
+ */
+export function PausedBanner({ pauses, now: nowProp }: { pauses: ActivePause[]; now?: number }) {
+  const [tick, setTick] = useState(() => Date.now());
+  // Re-render on a timer so "22m left" does not sit frozen while the pause
+  // silently drains away.
+  useEffect(() => {
+    const id = setInterval(() => setTick(Date.now()), 30_000);
+    return () => clearInterval(id);
+  }, []);
+  const now = nowProp ?? tick;
+
+  // Filter again here rather than trusting the fetch: the list was accurate
+  // when it arrived, and a short pause can expire between polls.
+  const live = pauses.filter((p) => p.expiresAt > now);
+  if (live.length === 0) return null;
+  const soonest = live.reduce((a, b) => (a.expiresAt < b.expiresAt ? a : b));
+
+  return (
+    <div
+      role="status"
+      className="mb-4 flex items-start gap-2.5 rounded border border-amber-500/40 bg-amber-500/[0.07] px-3 py-2.5"
+    >
+      <ShieldAlert className="h-4 w-4 shrink-0 text-amber-500 mt-0.5" aria-hidden="true" />
+      <div className="text-xs leading-relaxed">
+        <p className="font-medium text-foreground">
+          Enforcement is paused for {live.length} session{live.length === 1 ? "" : "s"} —{" "}
+          {formatRemaining(soonest.expiresAt - now)} left
+          {live.length > 1 ? " on the next to expire" : ""}.
+        </p>
+        <p className="text-muted-foreground mt-0.5">
+          Builtin, custom and convention policies are suspended for{" "}
+          {live.length === 1 ? "that session" : "those sessions"}; cloud-managed policies keep
+          enforcing. It lifts on its own — or run{" "}
+          <span className="font-mono text-foreground">failproofai config --resume</span>.
+        </p>
+      </div>
+    </div>
+  );
+}
+
+/** Marks a row that was evaluated while enforcement was paused. */
+export function PausedPill() {
+  return (
+    <span
+      title="Enforcement was paused for this session — local policies did not run"
+      className="ml-1.5 inline-flex items-center rounded px-1.5 py-0.5 text-[0.6rem] font-medium uppercase tracking-wide border border-amber-500/40 bg-amber-500/10 text-amber-600 dark:text-amber-500"
+    >
+      paused
+    </span>
+  );
+}
+
+/** Why an `allow` on this row proves nothing. */
+export function PausedNote({
+  item,
+}: {
+  item: { pausedBy?: string; pauseExpiresAt?: number };
+}) {
+  if (!item.pausedBy) return null;
+  const lifted =
+    typeof item.pauseExpiresAt === "number"
+      ? new Date(item.pauseExpiresAt).toLocaleTimeString()
+      : null;
+  return (
+    <div className="sm:col-span-2 lg:col-span-3 mt-1 flex items-start gap-2 rounded border border-amber-500/30 bg-amber-500/5 px-2.5 py-2">
+      <TriangleAlert className="h-3.5 w-3.5 shrink-0 text-amber-500/80 mt-0.5" aria-hidden="true" />
+      <p className="text-[0.7rem] leading-relaxed text-muted-foreground">
+        <span className="font-medium text-foreground">Not enforced — paused.</span> Enforcement was
+        suspended for this session
+        {item.pausedBy === "cli" ? " from the CLI" : ` by ${item.pausedBy}`}
+        {lifted ? `, lifting at ${lifted}` : ""}. Builtin, custom and convention policies did not
+        run for this event; cloud-managed policies did.
+      </p>
+    </div>
+  );
+}

package/.next/standalone/app/components/raw-log-viewer.tsx

@@ -5,7 +5,7 @@
  */
 "use client";
 
-import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { useWindowVirtualizer } from "@tanstack/react-virtual";
 import { ChevronDown, Wrench } from "lucide-react";
 import type { LogEntry, ToolUseBlock } from "@/lib/log-entries";

package/.next/standalone/app/components/toast.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useSyncExternalStore, useCallback, useEffect, useState } from "react";
+import { useSyncExternalStore, useEffect, useState } from "react";
 
 interface Toast {
   id: number;

package/.next/standalone/app/policies/hooks-client.tsx

@@ -1,14 +1,18 @@
 "use client";
 
-import React, { useState, useEffect, useCallback, useMemo, useRef, useTransition } from "react";
+import { useState, useEffect, useCallback, useMemo, useRef, useTransition } from "react";
+import * as React from "react";
 import { createPortal } from "react-dom";
 import Link from "next/link";
 import { Check, ChevronDown, Code, Copy, Settings, Shield, ShieldAlert, ShieldCheck, ShieldX, TriangleAlert, X } from "lucide-react";
 import PaginationControls from "@/app/components/pagination-controls";
 import { getHookActivityAction, searchHookActivityAction } from "@/app/actions/get-hook-activity";
 import type { HookActivityPayload } from "@/app/actions/get-hook-activity";
+import { getActivePausesAction } from "@/app/actions/get-active-pauses";
+import type { ActivePause } from "@/src/hooks/session-pause";
+import { PausedBanner, PausedNote, PausedPill } from "@/app/components/pause-notices";
 import { getHooksConfigAction } from "@/app/actions/get-hooks-config";
-import type { HooksConfigPayload, PolicyInfo, CustomPolicyInfo } from "@/app/actions/get-hooks-config";
+import type { HooksConfigPayload, PolicyInfo } from "@/app/actions/get-hooks-config";
 import type { IntegrationType } from "@/src/hooks/types";
 import { toggleCustomPolicyAction, togglePolicyAction } from "@/app/actions/update-hooks-config";
 import { installHooksWebAction, removeHooksWebAction } from "@/app/actions/install-hooks-web";
@@ -386,7 +390,27 @@ function DetailPanel({
             event detail
           </span>
           <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-2">
+            <PausedNote item={item} />
             <EnforcementNote item={item} />
+            {item.policySource && (
+              <div>
+                <span className="text-muted-foreground">Decided by: </span>
+                <span className="font-mono text-foreground">
+                  {item.policySource === "cloud" && item.cloudPolicyId
+                    ? `cloud · ${item.cloudPolicyId} version ${item.cloudVersion}`
+                    : item.policySource}
+                </span>
+              </div>
+            )}
+            {item.cloudDeployment !== undefined && (
+              <div>
+                {/* Present on every row of a managed machine, not just cloud
+                    decisions — it is what separates a rollout that changed no
+                    outcomes from one that never arrived. */}
+                <span className="text-muted-foreground">Cloud deployment: </span>
+                <span className="font-mono text-foreground">{item.cloudDeployment}</span>
+              </div>
+            )}
             <div>
               <span className="text-muted-foreground">Session ID: </span>
               <span className="font-mono text-foreground">
@@ -443,6 +467,7 @@ function ActivityTab({
 
   const [page, setPage] = useState(() => paramToPage(url.get("page")));
   const [data, setData] = useState<HookActivityPayload | null>(null);
+  const [activePauses, setActivePauses] = useState<ActivePause[]>([]);
   const [expandedRow, setExpandedRow] = useState<number | null>(null);
 
   const [filterDecision, setFilterDecision] = useState<"" | "allow" | "deny" | "instruct">(() => {
@@ -456,10 +481,14 @@ function ActivityTab({
     const v = url.get("cli");
     return isKnownCli(v) ? v : "";
   });
+  const [filterSource, setFilterSource] = useState<"" | "builtin" | "custom" | "convention" | "cloud">(() => {
+    const v = url.get("source");
+    return v === "builtin" || v === "custom" || v === "convention" || v === "cloud" ? v : "";
+  });
   const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const filterTelemetryFirstRunRef = useRef(true);
-  const filtersRef = useRef({ filterDecision, filterEventType, filterPolicy, filterSessionId, filterCli });
-  filtersRef.current = { filterDecision, filterEventType, filterPolicy, filterSessionId, filterCli };
+  const filtersRef = useRef({ filterDecision, filterEventType, filterPolicy, filterSessionId, filterCli, filterSource });
+  filtersRef.current = { filterDecision, filterEventType, filterPolicy, filterSessionId, filterCli, filterSource };
 
   useEffect(() => {
     if (!mountedRef.current) {
@@ -472,17 +501,18 @@ function ActivityTab({
       policy: filterPolicy || undefined,
       session: filterSessionId || undefined,
       cli: filterCli || undefined,
+      source: filterSource || undefined,
       page: pageToParam(page),
     });
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [filterDecision, filterEventType, filterPolicy, filterSessionId, filterCli, page]);
+  }, [filterDecision, filterEventType, filterPolicy, filterSessionId, filterCli, filterSource, page]);
 
-  const hasActiveFilters = filterDecision !== "" || filterEventType !== "" || filterPolicy !== "" || filterSessionId !== "" || filterCli !== "";
+  const hasActiveFilters = filterDecision !== "" || filterEventType !== "" || filterPolicy !== "" || filterSessionId !== "" || filterCli !== "" || filterSource !== "";
 
   const fetchData = useCallback(async (p: number) => {
     try {
-      const { filterDecision: fd, filterEventType: fe, filterPolicy: fp, filterSessionId: fs, filterCli: fc } = filtersRef.current;
-      const active = fd !== "" || fe !== "" || fp !== "" || fs !== "" || fc !== "";
+      const { filterDecision: fd, filterEventType: fe, filterPolicy: fp, filterSessionId: fs, filterCli: fc, filterSource: fsrc } = filtersRef.current;
+      const active = fd !== "" || fe !== "" || fp !== "" || fs !== "" || fc !== "" || fsrc !== "";
       let result: HookActivityPayload;
       if (active) {
         result = await searchHookActivityAction(
@@ -492,6 +522,7 @@ function ActivityTab({
             policyName: fp || undefined,
             sessionId: fs || undefined,
             integration: fc || undefined,
+            source: fsrc || undefined,
           },
           p,
         );
@@ -511,6 +542,22 @@ function ActivityTab({
     return () => clearInterval(id);
   }, [page, fetchData, intervalSec]);
 
+  // Pause state is polled independently of the activity page: it is live
+  // machine state, not a property of whichever rows are on screen, and it must
+  // keep updating while the user sits on page 3 of history.
+  useEffect(() => {
+    let cancelled = false;
+    const load = () => {
+      getActivePausesAction()
+        .then((p) => { if (!cancelled) setActivePauses(p); })
+        .catch(() => { /* non-critical: the banner simply stays hidden */ });
+    };
+    load();
+    const ms = intervalSec > 0 ? intervalSec * 1000 : 5000;
+    const id = setInterval(load, ms);
+    return () => { cancelled = true; clearInterval(id); };
+  }, [intervalSec]);
+
   useEffect(() => {
     if (debounceRef.current) clearTimeout(debounceRef.current);
     debounceRef.current = setTimeout(() => {
@@ -565,6 +612,10 @@ function ActivityTab({
 
   return (
     <>
+      {/* Above the stats, deliberately: a paused machine is the most important
+          thing on this screen, and the numbers below it are being produced with
+          local enforcement switched off. */}
+      <PausedBanner pauses={activePauses} />
       {data?.stats && data.stats.totalEvents > 0 && (
         <div style={{ marginBottom: 18 }}>
           <StatsBar stats={data.stats} />
@@ -593,6 +644,29 @@ function ActivityTab({
               <option value="PermissionRequest">PermissionRequest</option>
             </select>
           </div>
+          <div className="filter-group">
+            {/* "What did my organization's policies decide here?" is the
+                question cloud rollout reporting rests on, and it is
+                unanswerable while the source is only a prefix on a name. */}
+            <span className="filter-label">source</span>
+            <select
+              value={filterSource}
+              onChange={(e) => {
+                const v = e.target.value;
+                setFilterSource(
+                  v === "builtin" || v === "custom" || v === "convention" || v === "cloud" ? v : "",
+                );
+              }}
+              className="filter-input"
+              aria-label="Filter by policy source"
+            >
+              <option value="">all sources</option>
+              <option value="builtin">builtin</option>
+              <option value="custom">custom</option>
+              <option value="convention">convention</option>
+              <option value="cloud">cloud</option>
+            </select>
+          </div>
           <div className="filter-group">
             <span className="filter-label">cli</span>
             <select
@@ -642,6 +716,7 @@ function ActivityTab({
                 setFilterCli("");
                 setFilterPolicy("");
                 setFilterSessionId("");
+                setFilterSource("");
               }}
               aria-label="Clear all filters"
             >
@@ -744,6 +819,7 @@ function ActivityTab({
                         </td>
                         <td className="px-3 py-2">
                           <DecisionBadge decision={item.decision} />
+                          {item.pausedBy && <PausedPill />}
                         </td>
                         <td className="px-3 py-2">
                           <EventTypeBadge eventType={item.eventType} />

package/.next/standalone/app/settings/page.tsx

@@ -0,0 +1,31 @@
+/**
+ * /settings — one page, sections. The single home for the machine-level
+ * controls the design plan collected here: the scheduled local audit and
+ * emailed audit reports.
+ *
+ * Deliberately NOT a home for telemetry: the product decision is that telemetry
+ * is documented but not advertised in-product, so there is no telemetry control
+ * or status on this page. `config.toml` plus the docs are the whole story.
+ *
+ * Thin server wrapper (Suspense boundary + the disabled-pages gate every route
+ * uses); all the reads/writes live in the client and its server actions.
+ */
+import { Suspense } from "react";
+import { notFound } from "next/navigation";
+import SettingsClient from "./settings-client";
+
+export const dynamic = "force-dynamic";
+
+export default async function SettingsPage() {
+  const disabled = (process.env.FAILPROOFAI_DISABLE_PAGES ?? "")
+    .split(",")
+    .map((s) => s.trim())
+    .filter(Boolean);
+  if (disabled.includes("settings")) notFound();
+
+  return (
+    <Suspense>
+      <SettingsClient />
+    </Suspense>
+  );
+}