failproofai 1.0.1-beta.1 → 1.0.2-beta.0

package/.next/standalone/app/actions/pack-actions.ts

@@ -0,0 +1,153 @@
+"use server";
+
+/**
+ * Installing and managing policy packs from the local dashboard.
+ *
+ * These are USER-INITIATED actions, which is what makes it acceptable for
+ * `addPack` to import the pack's artifact here: it verifies that what a
+ * publisher declared is what their code registers, and refusing at install time
+ * is the whole reason a broken pack cannot brick the machine. `get-hooks-config`
+ * deliberately does the opposite — it lists packs from `installed.json` and
+ * imports nothing, because that runs on every page load.
+ */
+import {
+  addPackFromSource,
+  fetchPackPreview,
+  installBundledPack,
+  removePack,
+  setPackPolicyEnabled,
+} from "@/src/hooks/pack-store";
+import { readHooksConfig, writeHooksConfig } from "@/src/hooks/hooks-config";
+import { readInstalledPacks } from "@/src/hooks/pack-manifest";
+
+export interface PackActionResult {
+  ok: boolean;
+  /** Present when ok — what landed, so the UI can say it without a refetch. */
+  id?: string;
+  version?: string;
+  enabled?: string[];
+  available?: string[];
+  /** Present when not ok — the publisher's or the loader's own words. */
+  error?: string;
+}
+
+/**
+ * Install a pack by the source a person typed: `core`, `acme/ops`,
+ * `acme/ops@v1.2.0`, or a release URL.
+ *
+ * Routed through the SAME resolver the CLI uses. While the alias list lived in
+ * `pack-cli.ts`, `core` worked in the terminal and failed in the browser — the
+ * one thing a shared entry point exists to prevent.
+ */
+export async function addPackWebAction(
+  source: string,
+  opts?: { all?: boolean; only?: string[]; categories?: string[] },
+): Promise<PackActionResult> {
+  const trimmed = source.trim();
+  if (!trimmed) return { ok: false, error: "Enter a pack source, for example acme/ops" };
+  try {
+    const result = await addPackFromSource(trimmed, opts ?? {});
+    return {
+      ok: true,
+      id: result.id,
+      version: result.version,
+      enabled: result.enabled,
+      available: result.available,
+    };
+  } catch (err) {
+    // Surfaced verbatim. Every refusal on this path already names what was wrong
+    // and whose fault it is — an unresolvable source, a digest that does not
+    // match, a manifest declaring a policy its artifact never registers.
+    return { ok: false, error: err instanceof Error ? err.message : String(err) };
+  }
+}
+
+/** Install the pack that ships inside this package. No network. */
+export async function addBundledPackWebAction(): Promise<PackActionResult> {
+  const result = installBundledPack();
+  if (!result.installed) return { ok: false, error: result.reason ?? "could not install" };
+  return {
+    ok: true,
+    id: result.id,
+    version: result.version,
+    enabled: result.enabled,
+    available: result.available,
+  };
+}
+
+export async function removePackWebAction(id: string): Promise<PackActionResult> {
+  return removePack(id) ? { ok: true, id } : { ok: false, error: `No installed pack with id ${id}` };
+}
+
+/**
+ * Turn one policy of an installed pack on or off.
+ *
+ * Writes the pack's own SELECTION, the same lever the CLI uses — not a
+ * `disabledCustomPolicies` entry, which is keyed by version and would silently
+ * switch everything back on at the next upgrade. Enabling also clears any such
+ * key, so a policy switched off before this existed can still be switched back on.
+ */
+export async function togglePackPolicyAction(
+  packId: string,
+  name: string,
+  enabled: boolean,
+): Promise<PackActionResult> {
+  const result = setPackPolicyEnabled(packId, name, enabled);
+  if (!result.ok) return { ok: false, error: result.reason };
+  if (enabled) {
+    const pack = readInstalledPacks().packs.find((p) => p.id === packId);
+    if (pack) {
+      const key = `pack:${pack.id}@${pack.version}:${name}`;
+      const config = readHooksConfig();
+      const remaining = (config.disabledCustomPolicies ?? []).filter((k) => k !== key);
+      if (remaining.length !== (config.disabledCustomPolicies ?? []).length) {
+        const { disabledCustomPolicies: _dropped, ...rest } = config;
+        writeHooksConfig(
+          remaining.length > 0 ? { ...rest, disabledCustomPolicies: remaining } : rest,
+        );
+      }
+    }
+  }
+  return { ok: true, id: packId };
+}
+
+export interface PackPreviewResult {
+  ok: boolean;
+  id?: string;
+  version?: string;
+  source?: string;
+  effect?: "enforce" | "observe";
+  policies?: Array<{ name: string; description: string; category: string; defaultEnabled: boolean }>;
+  error?: string;
+}
+
+/**
+ * Read what a pack contains WITHOUT installing it — the browser half of
+ * `failproofai pack list <source>`.
+ *
+ * Fetches the manifest only. The entry artifact is never downloaded and never
+ * imported, so previewing a stranger's pack from the dashboard cannot run a
+ * stranger's code inside this long-lived server.
+ */
+export async function previewPackWebAction(source: string): Promise<PackPreviewResult> {
+  const trimmed = source.trim();
+  if (!trimmed) return { ok: false, error: "Enter a pack source, for example acme/ops" };
+  try {
+    const preview = await fetchPackPreview(trimmed);
+    return {
+      ok: true,
+      id: preview.id,
+      version: preview.version,
+      source: preview.source,
+      effect: preview.effect,
+      policies: preview.policies.map((p) => ({
+        name: p.name,
+        description: p.description,
+        category: p.category,
+        defaultEnabled: p.defaultEnabled,
+      })),
+    };
+  } catch (err) {
+    return { ok: false, error: err instanceof Error ? err.message : String(err) };
+  }
+}

package/.next/standalone/app/audit/_components/run-progress.tsx

@@ -21,7 +21,7 @@ import { useEffect, useState } from "react";
 const STAGES = [
   { label: "discovering transcripts", detail: "walking ~/.claude, ~/.codex, ~/.cursor, …" },
   { label: "parsing session logs",   detail: "reading JSONL + sqlite session stores" },
-  { label: "running policy checks",  detail: "replaying through 30 builtin policies" },
+  { label: "running policy checks",  detail: "replaying every policy against each tool call" },
   { label: "aggregating results",    detail: "counting hits, ranking by frequency" },
 ];
 

package/.next/standalone/app/audit/_components/share-templates.ts

@@ -34,49 +34,49 @@ const PASTE_LINE = "[ audit card copied to your clipboard — paste it into the
 /** Short, curiosity-forward — for X / Twitter. Ends on the npx CTA + @failproofai. */
 export const X_TEMPLATES: ((c: ShareCtx) => string)[] = [
   ({ score, arch }) =>
-    `my coding agent has a personality and it's ${arch}. did not see that coming.\n\nran a failproof audit, scored ${score}/100, all local. find out what yours is → ${X_CTA}`,
+    `my agent has a personality and it's ${arch}. did not see that coming.\n\nran a failproof audit, scored ${score}/100, all local. find out what yours is → ${X_CTA}`,
   ({ score, arch }) =>
-    `spent 30 seconds auditing my coding agent. learned more about it than i did all month.\n\nit's ${arch}. scored ${score}/100. → ${X_CTA}`,
+    `spent 30 seconds auditing my agent. learned more about it than i did all month.\n\nit's ${arch}. scored ${score}/100. → ${X_CTA}`,
   ({ score }) =>
     `my agent scored ${score}/100. think yours can beat it?\n\n30 sec audit, runs locally, gives you a personality too → ${X_CTA}`,
   ({ arch }) =>
-    `turns out my coding agent is ${arch} and honestly it explains everything.\n\n→ ${X_CTA}`,
+    `turns out my agent is ${arch} and honestly it explains everything.\n\n→ ${X_CTA}`,
   ({ score, arch }) =>
     `ran a failproof audit on my agent. it reads how it actually behaves when things break, not just the happy path.\n\npersonality: ${arch}. score: ${score}/100. all local → ${X_CTA}`,
   ({ score, arch }) =>
-    `got to know my coding agent today. it's ${arch} and scored ${score}/100. wow.\n\naudit yours in 30s, nothing leaves your machine → ${X_CTA}`,
+    `got to know my agent today. it's ${arch} and scored ${score}/100. wow.\n\naudit yours in 30s, nothing leaves your machine → ${X_CTA}`,
   ({ score, arch }) =>
-    `your coding agent has a personality. you just haven't met it.\n\ni met mine today: ${arch}, ${score}/100. → ${X_CTA}`,
+    `your agent has a personality. you just haven't met it.\n\ni met mine today: ${arch}, ${score}/100. → ${X_CTA}`,
   ({ score, arch }) =>
     `everyone talks about what their agent can build. nobody talks about how it acts when it breaks.\n\nmine's ${arch}, scored ${score}/100, all local → ${X_CTA}`,
   ({ score, arch }) =>
     `every agent builder should run this once.\n\n30 sec, local, gives your agent a personality and a quality score. mine: ${arch}, ${score}/100.\n\n${X_CTA}`,
   ({ score, arch }) =>
-    `i'll go first: ${arch}, ${score}/100.\n\nwhat's your coding agent? 30 sec audit, no signup → ${X_CTA}`,
+    `i'll go first: ${arch}, ${score}/100.\n\nwhat's your agent? 30 sec audit, no signup → ${X_CTA}`,
 ];
 
 /** Longer, reflective — for LinkedIn. Ends on the npx CTA + @Failproof AI. */
 export const LI_TEMPLATES: ((c: ShareCtx) => string)[] = [
   ({ score, arch }) =>
-    `I've spent more hours with my coding agent this month than with most people I know. Today I realized I couldn't tell you a single thing about how it actually behaves.\n\nSo I audited it. Turns out it's ${arch}, and it scored ${score}/100.\n\nThe audit reads its real history, including how it handles failures, not just the clean runs. 30 seconds, runs entirely locally.\n\nMeet yours: ${LI_CTA}`,
+    `I've spent more hours with my agent this month than with most people I know. Today I realized I couldn't tell you a single thing about how it actually behaves.\n\nSo I audited it. Turns out it's ${arch}, and it scored ${score}/100.\n\nThe audit reads its real history, including how it handles failures, not just the clean runs. 30 seconds, runs entirely locally.\n\nMeet yours: ${LI_CTA}`,
   ({ score, arch }) =>
-    `Took a personality test today. It wasn't for me — it was for my AI coding agent.\n\nThe result: ${arch}, with a quality score of ${score}/100.\n\nIt works by reading the agent's actual run history, so the personality comes from how it really behaves, not a vibe. Took 30 seconds and stayed local.\n\nTry it on yours: ${LI_CTA}`,
+    `Took a personality test today. It wasn't for me — it was for my AI agent.\n\nThe result: ${arch}, with a quality score of ${score}/100.\n\nIt works by reading the agent's actual run history, so the personality comes from how it really behaves, not a vibe. Took 30 seconds and stayed local.\n\nTry it on yours: ${LI_CTA}`,
   ({ score, arch }) =>
     `Everyone asks what their AI agent can build. I just found out mine has a temper.\n\nAfter watching how it reacts to a failed command, the audit called it ${arch}. It also scored its quality at ${score}/100.\n\nOddly useful to see it written down. 30 seconds, all local: ${LI_CTA}`,
   ({ score, arch }) =>
     `My agent does this very specific thing every time a command fails. Today I learned there's basically a name for it.\n\nRan a quick audit and it came back ${arch}, scored ${score}/100. The whole read is based on how the agent handles things going wrong, which is where its real character shows.\n\n30 seconds, nothing leaves your machine: ${LI_CTA}`,
   ({ score, arch }) =>
-    `My AI coding agent scored ${score}/100 today. I didn't know you could even measure that.\n\nThe same audit also handed it a personality: ${arch}.\n\nIt reads the agent's real history and tells you where it's solid and where it slips. Took 30 seconds and ran fully locally: ${LI_CTA}`,
+    `My AI agent scored ${score}/100 today. I didn't know you could even measure that.\n\nThe same audit also handed it a personality: ${arch}.\n\nIt reads the agent's real history and tells you where it's solid and where it slips. Took 30 seconds and ran fully locally: ${LI_CTA}`,
   ({ score, arch }) =>
-    `I'm usually the first to scroll past "audit your X" tools. This one took 30 seconds and actually told me something.\n\nMy coding agent is ${arch}, and it scored ${score}/100.\n\nIt reads the agent's real run history rather than asking me anything, and none of it leaves the machine: ${LI_CTA}`,
+    `I'm usually the first to scroll past "audit your X" tools. This one took 30 seconds and actually told me something.\n\nMy agent is ${arch}, and it scored ${score}/100.\n\nIt reads the agent's real run history rather than asking me anything, and none of it leaves the machine: ${LI_CTA}`,
   ({ score, arch }) =>
-    `What is your coding agent's personality? I realized today that I had no answer.\n\nSo I checked. Mine is ${arch}, scored ${score}/100, with a clear read on where it shines and where it slips.\n\nIf you work with agents, run it and drop yours in the comments. 30 seconds, fully local: ${LI_CTA}`,
+    `What is your agent's personality? I realized today that I had no answer.\n\nSo I checked. Mine is ${arch}, scored ${score}/100, with a clear read on where it shines and where it slips.\n\nIf you work with agents, run it and drop yours in the comments. 30 seconds, fully local: ${LI_CTA}`,
   ({ score, arch }) =>
-    `I trusted my coding agent a little less after this morning, and quite a bit more by the afternoon.\n\nI ran an audit on it. It showed me exactly where it's reliable and where it isn't, gave it a personality (${arch}), and scored it ${score}/100.\n\nKnowing the gaps is what made me trust it more. 30 seconds, all local: ${LI_CTA}`,
+    `I trusted my agent a little less after this morning, and quite a bit more by the afternoon.\n\nI ran an audit on it. It showed me exactly where it's reliable and where it isn't, gave it a personality (${arch}), and scored it ${score}/100.\n\nKnowing the gaps is what made me trust it more. 30 seconds, all local: ${LI_CTA}`,
   ({ score, arch }) =>
     `I almost skipped this because I assumed it would quietly ship my code off somewhere. It doesn't. Everything runs locally.\n\n30 seconds later I had my agent's personality (${arch}) and a quality score (${score}/100).\n\nIf privacy is usually what stops you from trying these, this one is different: ${LI_CTA}`,
   ({ score, arch }) =>
-    `Found out my AI coding agent has a personality type. Found out it's ${arch}. Found out that explains a lot.\n\nIt scored ${score}/100 too. The audit reads how the agent handles failures, not just the runs where everything goes fine.\n\n30 seconds, runs locally: ${LI_CTA}`,
+    `Found out my AI agent has a personality type. Found out it's ${arch}. Found out that explains a lot.\n\nIt scored ${score}/100 too. The audit reads how the agent handles failures, not just the runs where everything goes fine.\n\n30 seconds, runs locally: ${LI_CTA}`,
 ];
 
 /** djb2 hash — stable per seed so the template choice is deterministic. */

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

@@ -4,7 +4,7 @@ import { useState, useEffect, useCallback, useMemo, useRef, useTransition } from
 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 { Check, ChevronDown, Code, Copy, Package, Plus, Settings, Shield, ShieldAlert, ShieldCheck, ShieldX, Trash2, 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";
@@ -12,9 +12,17 @@ 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 } from "@/app/actions/get-hooks-config";
+import type { HooksConfigPayload, InstalledPackInfo, PolicyInfo } from "@/app/actions/get-hooks-config";
 import type { IntegrationType } from "@/src/hooks/types";
-import { toggleCustomPolicyAction, togglePolicyAction } from "@/app/actions/update-hooks-config";
+import { toggleCustomPolicyAction } from "@/app/actions/update-hooks-config";
+import {
+  addBundledPackWebAction,
+  addPackWebAction,
+  previewPackWebAction,
+  removePackWebAction,
+  togglePackPolicyAction,
+} from "@/app/actions/pack-actions";
+import type { PackPreviewResult } from "@/app/actions/pack-actions";
 import { installHooksWebAction, removeHooksWebAction } from "@/app/actions/install-hooks-web";
 import { updatePolicyParamsAction } from "@/app/actions/update-policy-params";
 import { useAutoRefresh } from "@/contexts/AutoRefreshContext";
@@ -481,9 +489,9 @@ function ActivityTab({
     const v = url.get("cli");
     return isKnownCli(v) ? v : "";
   });
-  const [filterSource, setFilterSource] = useState<"" | "builtin" | "custom" | "convention" | "cloud">(() => {
+  const [filterSource, setFilterSource] = useState<"" | "builtin" | "custom" | "convention" | "cloud" | "pack">(() => {
     const v = url.get("source");
-    return v === "builtin" || v === "custom" || v === "convention" || v === "cloud" ? v : "";
+    return v === "builtin" || v === "custom" || v === "convention" || v === "cloud" || v === "pack" ? v : "";
   });
   const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const filterTelemetryFirstRunRef = useRef(true);
@@ -654,7 +662,7 @@ function ActivityTab({
               onChange={(e) => {
                 const v = e.target.value;
                 setFilterSource(
-                  v === "builtin" || v === "custom" || v === "convention" || v === "cloud" ? v : "",
+                  v === "builtin" || v === "custom" || v === "convention" || v === "cloud" || v === "pack" ? v : "",
                 );
               }}
               className="filter-input"
@@ -665,6 +673,7 @@ function ActivityTab({
               <option value="custom">custom</option>
               <option value="convention">convention</option>
               <option value="cloud">cloud</option>
+              <option value="pack">pack</option>
             </select>
           </div>
           <div className="filter-group">
@@ -1259,7 +1268,16 @@ function PoliciesTab({ onHooksInstallChange }: { onHooksInstallChange?: (install
     });
   };
 
-  const handleToggle = (name: string, currentlyEnabled: boolean) => {
+  /**
+   * Turn one policy on or off.
+   *
+   * Writes the PACK's selection, because that is what enforcement reads now.
+   * `togglePolicyAction` edits `enabledPolicies`, which stopped deciding
+   * anything the moment this build stopped registering builtins — leaving the
+   * toggle pointed there would have moved a switch that changes nothing.
+   */
+  const handleToggle = (policy: PolicyInfo, currentlyEnabled: boolean) => {
+    const name = policy.name;
     if (!config) return;
     const installed = config.clis.some((c) => c.installed);
     if (!installed) {
@@ -1275,14 +1293,21 @@ function PoliciesTab({ onHooksInstallChange }: { onHooksInstallChange?: (install
         policies: prev.policies.map((p) =>
           p.name === name ? { ...p, enabled: !currentlyEnabled } : p,
         ),
-        enabledPolicies: currentlyEnabled
-          ? prev.enabledPolicies.filter((n) => n !== name)
-          : [...prev.enabledPolicies, name],
+        packs: prev.packs.map((pack) =>
+          pack.id === policy.packId
+            ? {
+                ...pack,
+                policies: pack.policies.map((p) =>
+                  p.name === name ? { ...p, enabled: !currentlyEnabled } : p,
+                ),
+              }
+            : pack,
+        ),
       };
     });
     startTransition(async () => {
       try {
-        await togglePolicyAction(name, !currentlyEnabled);
+        await togglePackPolicyAction(policy.packId, name, !currentlyEnabled);
       } catch {
         fireActionError("policy_toggle", "Failed to save policy change.");
         reload();
@@ -1564,7 +1589,18 @@ function PoliciesTab({ onHooksInstallChange }: { onHooksInstallChange?: (install
       {/* Policy summary */}
       <div className="flex items-center gap-2 px-4 py-2 border-b border-border/40 bg-muted/5">
         <span className="text-xs text-muted-foreground">
-          <span className="font-semibold text-foreground">{config.enabledPolicies.length}</span>
+          {/* What is actually ON, counted from the policies rendered below.
+              `enabledPolicies` is the old builtin switch list — it stopped
+              deciding anything when this build stopped registering builtins, so
+              counting it reported a number matching nothing on screen. */}
+          <span className="font-semibold text-foreground">
+            {config.policies.filter((p) => p.enabled).length +
+              (config.customPolicies?.filter((p) => p.enabled).length ?? 0) +
+              (config.conventionPolicies?.reduce(
+                (n, e) => n + e.policies.filter((p) => p.enabled).length,
+                0,
+              ) ?? 0)}
+          </span>
           {" / "}
           {config.policies.length + (config.customPolicies?.length ?? 0) + (config.conventionPolicies?.reduce((n, e) => n + e.policies.length, 0) ?? 0)}{" "}
           policies enabled
@@ -1614,7 +1650,7 @@ function PoliciesTab({ onHooksInstallChange }: { onHooksInstallChange?: (install
                 <div className="mt-0.5 shrink-0">
                   <PolicyToggle
                     enabled={policy.enabled}
-                    onChange={() => handleToggle(policy.name, policy.enabled)}
+                    onChange={() => handleToggle(policy, policy.enabled)}
                     disabled={isPending}
                   />
                 </div>
@@ -1791,11 +1827,281 @@ function PoliciesTab({ onHooksInstallChange }: { onHooksInstallChange?: (install
           )}
         </div>
       ))}
+
+      {/* Policy packs — sets of policies published as a GitHub release. Anyone
+          can publish one from their own repository, so this is the surface that
+          makes an installed pack visible and switchable without the CLI. */}
+      <PackSection
+        packs={config.packs ?? []}
+        disabled={isPending}
+        onChanged={reload}
+        onError={(message) => fireActionError("pack_action", message)}
+      />
     </div>
     </>
   );
 }
 
+/** Install a pack, and manage the ones already installed. */
+function PackSection({
+  packs,
+  disabled,
+  onChanged,
+  onError,
+}: {
+  packs: InstalledPackInfo[];
+  disabled?: boolean;
+  onChanged: () => void;
+  onError: (message: string) => void;
+}) {
+  const [source, setSource] = useState("");
+  const [busy, setBusy] = useState<string | null>(null);
+  const [installed, setInstalled] = useState<string | null>(null);
+  const [preview, setPreview] = useState<PackPreviewResult | null>(null);
+  const { capture } = usePostHog();
+
+  // Reading a pack before installing it. Fetches the manifest only — the entry
+  // artifact is never downloaded, so looking at a stranger's pack cannot run a
+  // stranger's code inside this server.
+  const runPreview = async () => {
+    if (!source.trim()) return;
+    setBusy("preview");
+    setPreview(null);
+    try {
+      const result = await previewPackWebAction(source);
+      if (!result.ok) {
+        onError(result.error ?? "Could not read that pack.");
+        return;
+      }
+      setPreview(result);
+    } finally {
+      setBusy(null);
+    }
+  };
+
+  const run = async (label: string, action: () => Promise<{ ok: boolean; id?: string; version?: string; error?: string }>) => {
+    setBusy(label);
+    setInstalled(null);
+    try {
+      const result = await action();
+      if (!result.ok) {
+        // The refusal's own words. Every one of them names what was wrong —
+        // a source that resolves to nothing, a digest that does not match, a
+        // manifest declaring a policy its artifact never registers.
+        onError(result.error ?? "Could not install that pack.");
+        return;
+      }
+      setInstalled(result.version ? `${result.id}@${result.version}` : (result.id ?? null));
+      setSource("");
+      onChanged();
+    } catch (err) {
+      onError(err instanceof Error ? err.message : "Could not install that pack.");
+    } finally {
+      setBusy(null);
+    }
+  };
+
+  return (
+    <div>
+      <div className="flex items-center justify-between px-4 py-2.5 bg-muted/20 border-b border-border/50">
+        <span className="text-[0.7rem] font-semibold uppercase tracking-wider text-muted-foreground">
+          Policy Packs
+        </span>
+        <span className="text-[0.7rem] text-muted-foreground">
+          {packs.length === 0 ? "none installed" : `${packs.length} installed`}
+        </span>
+      </div>
+
+      {/* Install by name — any owner/repo on GitHub, not only ours. */}
+      <div className="flex flex-wrap items-center gap-2 px-4 py-3 border-b border-border/20">
+        <input
+          value={source}
+          onChange={(e) => setSource(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" && source.trim() && !busy) {
+              capture("pack_install_submitted", { via: "input" });
+              void run("input", () => addPackWebAction(source));
+            }
+          }}
+          placeholder="core  ·  acme/ops  ·  acme/ops@v1.2.0  ·  a release URL"
+          spellCheck={false}
+          disabled={disabled || busy !== null}
+          className="flex-1 min-w-[16rem] rounded-md border border-border/60 bg-background px-2.5 py-1.5 text-xs font-mono placeholder:text-muted-foreground/50 focus:outline-none focus:ring-1 focus:ring-ring disabled:opacity-50"
+          aria-label="Pack source"
+        />
+        <Button
+          size="sm"
+          variant="outline"
+          disabled={disabled || busy !== null || source.trim().length === 0}
+          onClick={() => {
+            capture("pack_preview_submitted", {});
+            void runPreview();
+          }}
+        >
+          {busy === "preview" ? "Reading…" : "Preview"}
+        </Button>
+        <Button
+          size="sm"
+          variant="default"
+          disabled={disabled || busy !== null || source.trim().length === 0}
+          onClick={() => {
+            capture("pack_install_submitted", { via: "button" });
+            void run("input", () => addPackWebAction(source));
+          }}
+        >
+          <Plus className="h-3.5 w-3.5" />
+          {busy === "input" ? "Installing…" : "Install"}
+        </Button>
+      </div>
+
+      {/* What the pack CONTAINS, read from its manifest before anything is
+          installed. Marks are the publisher's defaults, not this machine's
+          state — nothing is installed, so an "on" would describe no machine. */}
+      {preview?.ok && (
+        <div className="border-b border-border/20 bg-muted/5">
+          <div className="flex items-center gap-3 px-4 py-2.5">
+            <Package className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
+            <span className="text-xs font-mono text-foreground">
+              {preview.id}@{preview.version}
+            </span>
+            <span className="text-[0.7rem] text-muted-foreground">
+              {preview.policies?.length ?? 0} policies ·{" "}
+              {preview.policies?.filter((p) => p.defaultEnabled).length ?? 0} on by default
+            </span>
+            {preview.effect === "observe" && (
+              <span className="text-[0.65rem] uppercase tracking-wider text-amber-500">
+                observes only
+              </span>
+            )}
+            <button
+              onClick={() => setPreview(null)}
+              className="ml-auto text-muted-foreground/60 hover:text-foreground"
+              aria-label="Close preview"
+            >
+              <X className="h-3.5 w-3.5" />
+            </button>
+          </div>
+          <div className="max-h-64 overflow-y-auto">
+            {preview.policies?.map((policy) => (
+              <div key={policy.name} className="flex items-start gap-3 px-4 py-2 border-t border-border/10">
+                <span
+                  className={`text-[0.65rem] uppercase tracking-wider w-14 shrink-0 mt-0.5 ${
+                    policy.defaultEnabled ? "text-emerald-500" : "text-muted-foreground/50"
+                  }`}
+                >
+                  {policy.defaultEnabled ? "default" : "opt-in"}
+                </span>
+                <span className="text-xs font-mono text-foreground w-56 shrink-0 truncate">
+                  {policy.name}
+                </span>
+                <span className="text-xs text-muted-foreground leading-relaxed min-w-0">
+                  {policy.description}
+                  <span className="block text-[0.65rem] text-muted-foreground/40 font-mono mt-0.5">
+                    {policy.category}
+                  </span>
+                </span>
+              </div>
+            ))}
+          </div>
+          <div className="px-4 py-2.5 border-t border-border/20">
+            <Button
+              size="sm"
+              variant="default"
+              disabled={disabled || busy !== null}
+              onClick={() => {
+                capture("pack_install_submitted", { via: "preview" });
+                void run("input", () => addPackWebAction(source)).then(() => setPreview(null));
+              }}
+            >
+              <Plus className="h-3.5 w-3.5" />
+              Install its defaults
+            </Button>
+          </div>
+        </div>
+      )}
+
+      {/* Ours, in one click — both the released pack and the copy that ships
+          inside this package, which needs no network at all. */}
+      <div className="flex flex-wrap items-center gap-2 px-4 py-2.5 border-b border-border/20 bg-muted/10">
+        <span className="text-[0.7rem] text-muted-foreground/70 mr-1">Failproof AI policies:</span>
+        <Button
+          size="sm"
+          variant="outline"
+          disabled={disabled || busy !== null}
+          onClick={() => {
+            capture("pack_install_submitted", { via: "ours" });
+            void run("ours", () => addPackWebAction("FailproofAI/policies"));
+          }}
+        >
+          {busy === "ours" ? "Installing…" : "Install from GitHub"}
+        </Button>
+        <Button
+          size="sm"
+          variant="outline"
+          disabled={disabled || busy !== null}
+          onClick={() => {
+            capture("pack_install_submitted", { via: "bundled" });
+            void run("bundled", () => addBundledPackWebAction());
+          }}
+        >
+          {busy === "bundled" ? "Installing…" : "Install offline copy"}
+        </Button>
+        {installed && (
+          <span className="text-[0.7rem] text-emerald-500 font-mono">installed {installed}</span>
+        )}
+      </div>
+
+      {packs.map((pack) => (
+        <div key={`${pack.id}@${pack.version}`}>
+          <div className="flex items-center gap-3 px-4 py-3 border-b border-border/20">
+            <Package className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
+            <span className="text-xs font-mono text-foreground truncate">
+              {pack.id}{pack.version ? `@${pack.version}` : ""}
+            </span>
+            {pack.effect === "observe" && (
+              <span className="text-[0.65rem] uppercase tracking-wider text-amber-500">observing</span>
+            )}
+            <span className="text-[0.65rem] text-muted-foreground/50 font-mono truncate hidden lg:inline">
+              {pack.source}
+            </span>
+            <button
+              onClick={() => void run(pack.id, () => removePackWebAction(pack.id))}
+              disabled={disabled || busy !== null}
+              className="ml-auto text-muted-foreground/60 hover:text-foreground disabled:opacity-40"
+              aria-label={`Remove ${pack.id}`}
+            >
+              <Trash2 className="h-3.5 w-3.5" />
+            </button>
+          </div>
+
+          {pack.error ? (
+            // A pack that will not load is what the machine denies for. Saying
+            // it here is the difference between a fixable problem and a
+            // mysterious one.
+            <div className="flex items-start gap-2 px-4 py-2.5 border-b border-border/20 bg-amber-500/5">
+              <TriangleAlert className="h-3.5 w-3.5 text-amber-500 shrink-0 mt-0.5" />
+              <p className="text-[0.7rem] text-muted-foreground leading-relaxed">
+                This pack will not load: {pack.error}
+              </p>
+            </div>
+          ) : (
+            // NOT a second list of the pack's policies. Every policy that
+            // enforces here is in the categorised list above, whichever pack it
+            // came from — rendering them again under the pack made the same
+            // toggles appear twice, the second time with no category.
+            <div className="flex items-center gap-3 px-4 py-2.5 border-b border-border/20">
+              <span className="text-[0.7rem] text-muted-foreground">
+                {pack.policies.filter((p) => p.enabled).length} of {pack.policies.length} on —
+                listed by category above
+              </span>
+            </div>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}
+
 // -- Tab Bar --
 
 function TabBar({
@@ -1951,7 +2257,7 @@ export default function HooksClient({ initialTab = "activity" }: { initialTab?:
               margin: "0 0 24px",
             }}
           >
-            switch policies on or off across your installed agent CLIs.
+            switch policies on or off across your installed harnesses.
           </p>
         )}