failproofai 0.0.14 → 0.0.15-beta.1

package/.next/standalone/app/components/project-list.tsx

@@ -7,7 +7,7 @@
 import { useState, useMemo, useEffect, useRef } from "react";
 import { ProjectFolder } from "@/lib/projects";
 import { CliBadge } from "./cli-badge";
-import { decodeFolderName } from "@/lib/paths";
+import { projectDisplayName } from "@/lib/paths";
 import { formatDate } from "@/lib/format-date";
 import {
   FILTER_PRESETS,
@@ -24,7 +24,13 @@ import {
   pageToParam, paramToPage,
 } from "@/lib/url-filter-serializers";
 import { KNOWN_CLI_IDS, getCliLabel, isKnownCli, type CliId } from "@/lib/cli-registry";
-import { Folder, Search, X } from "lucide-react";
+import {
+  buildProjectTree,
+  visibleTreeRows,
+  collapsibleKeys,
+  type ProjectTreeNode,
+} from "@/lib/project-tree";
+import { ChevronDown, ChevronRight, Folder, Search, X } from "lucide-react";
 import Link from "next/link";
 import PaginationControls from "./pagination-controls";
 import DatePickerInput from "./date-picker-input";
@@ -44,6 +50,126 @@ function normalizeKeywordForSearch(keyword: string): string {
   return keyword.trim().toLowerCase().replace(/\//g, "-");
 }
 
+/** Where collapsed folder rows are remembered between visits. */
+const COLLAPSED_STORAGE_KEY = "failproofai.projects.collapsed";
+
+function readCollapsed(): string[] {
+  try {
+    const raw = window.localStorage.getItem(COLLAPSED_STORAGE_KEY);
+    const parsed = raw ? JSON.parse(raw) : null;
+    return Array.isArray(parsed) ? parsed.filter((k) => typeof k === "string") : [];
+  } catch {
+    // Private mode / disabled storage / corrupt value — everything stays expanded.
+    return [];
+  }
+}
+
+function persistCollapsed(keys: Set<string>): void {
+  try {
+    window.localStorage.setItem(COLLAPSED_STORAGE_KEY, JSON.stringify([...keys]));
+  } catch {
+    // Storage unavailable — collapsing still works for this session.
+  }
+}
+
+/**
+ * One row of the projects table — a leaf project, or a folder grouping the
+ * gateway CLIs' (profile/agent, channel) hierarchy.
+ *
+ * Both shapes render as a `<tr>` in the SAME table so the Path and Last
+ * Modified columns stay aligned down the page; depth becomes left padding on
+ * the name cell rather than a nested table.
+ */
+function ProjectRow({
+  node,
+  collapsed,
+  interactive,
+  onToggle,
+}: {
+  node: ProjectTreeNode;
+  collapsed: boolean;
+  /** False while a search force-expands the tree — see the folder branch below. */
+  interactive: boolean;
+  onToggle: (key: string) => void;
+}) {
+  const isFolder = node.children.length > 0;
+  const project = node.project;
+  const Chevron = collapsed ? ChevronRight : ChevronDown;
+
+  // Depth is indentation, capped so a deep gateway path can't push the name off
+  // a narrow screen.
+  //
+  // Applied to the icon cell as well as the name, not just the name: the icon
+  // lives in its own <td>, so indenting only the name left every child's folder
+  // icon sitting at the same x as its parent's. The row then read as a flat
+  // list with ragged text rather than a hierarchy. Shifting both by the same
+  // amount moves icon and label together, so a child visibly starts to the
+  // right of its parent's icon.
+  const indent = { paddingLeft: `${Math.min(node.depth, 4) * 1.25}rem` };
+
+  return (
+    <tr className="border-b border-border hover:bg-muted/50 transition-colors">
+      <td className="px-4 py-3">
+        <div style={indent}>
+          <Folder className={`w-5 h-5 ${isFolder ? "text-muted-foreground" : "text-primary"}`} />
+        </div>
+      </td>
+      <td className="px-4 py-3 max-w-md">
+        <div className="flex flex-wrap items-center gap-2" style={indent}>
+          {isFolder ? (
+            // While a search is active the tree is force-expanded, so a toggle
+            // could only flip hidden state: it would look interactive, do
+            // nothing on screen, and silently invert what gets remembered once
+            // the search is cleared. Render it inert instead.
+            interactive ? (
+              <button
+                type="button"
+                onClick={() => onToggle(node.key)}
+                aria-expanded={!collapsed}
+                aria-label={`${collapsed ? "Expand" : "Collapse"} ${node.label}`}
+                className="flex items-center gap-1 font-semibold text-foreground hover:text-primary transition-colors break-words break-all text-left"
+              >
+                <Chevron className="w-4 h-4 shrink-0" />
+                {node.label}
+              </button>
+            ) : (
+              <span className="flex items-center gap-1 font-semibold text-foreground break-words break-all">
+                <Chevron className="w-4 h-4 shrink-0" />
+                {node.label}
+              </span>
+            )
+          ) : project ? (
+            <Link
+              href={`/project/${encodeURIComponent(project.name)}`}
+              className="font-semibold text-foreground hover:text-primary transition-colors break-words break-all inline-block max-w-full"
+            >
+              {/* Leaves of a gateway tree show only their own segment; a
+                  filesystem project keeps its full decoded path. */}
+              {node.depth > 0 ? node.label : projectDisplayName(project.name, project.path)}
+            </Link>
+          ) : (
+            <span className="font-semibold text-foreground">{node.label}</span>
+          )}
+          {node.cli.map((c) => (
+            <CliBadge key={c} cli={c} />
+          ))}
+          {isFolder && node.sessionCount !== undefined && (
+            <span className="text-xs text-muted-foreground">
+              {node.sessionCount} session{node.sessionCount === 1 ? "" : "s"}
+            </span>
+          )}
+        </div>
+      </td>
+      <td className="px-4 py-3 text-sm text-muted-foreground hidden md:table-cell truncate max-w-md">
+        {project ? project.path : ""}
+      </td>
+      <td className="px-4 py-3 text-sm text-muted-foreground">
+        <DateDisplay date={node.lastModified} formatted={node.lastModifiedFormatted} />
+      </td>
+    </tr>
+  );
+}
+
 export default function ProjectList({ folders }: ProjectListProps) {
   const url = useUrlParams();
   const mountedRef = useRef(false);
@@ -127,13 +253,88 @@ export default function ProjectList({ folders }: ProjectListProps) {
     return filtered.sort((a, b) => b.lastModified.getTime() - a.lastModified.getTime());
   }, [normalizedFolders, filterPreset, dateRange, keywords, filterCli]);
 
-  const totalPages = Math.max(1, Math.ceil(filteredFolders.length / ITEMS_PER_PAGE));
+  // ── Folder tree ──
+  //
+  // Built from ALL filtered projects, never from a page slice: a gateway root's
+  // channels are individual projects interleaved by recency, so slicing first
+  // would split one profile across two pages — rendering the root twice, each
+  // time rolling up only the sessions that happened to land on that page, with
+  // the true total shown nowhere. Grouping is pure presentation; project names,
+  // and therefore every /project/<name> link, are untouched.
+  const tree = useMemo(() => buildProjectTree(filteredFolders), [filteredFolders]);
+
+  // Pagination walks TOP-LEVEL rows. With no gateway CLIs every root is exactly
+  // one project, so the page size and the reported range are identical to the
+  // flat table's; a gateway CLI simply folds its channels into one entry.
+  const totalPages = Math.max(1, Math.ceil(tree.length / ITEMS_PER_PAGE));
   useEffect(() => {
     if (currentPage > totalPages) setCurrentPage(totalPages);
   }, [currentPage, totalPages, setCurrentPage]);
-  const startIndex = (currentPage - 1) * ITEMS_PER_PAGE;
-  const endIndex = Math.min(startIndex + ITEMS_PER_PAGE, filteredFolders.length);
-  const paginatedFolders = filteredFolders.slice(startIndex, endIndex);
+  const rootStart = (currentPage - 1) * ITEMS_PER_PAGE;
+  const rootEnd = Math.min(rootStart + ITEMS_PER_PAGE, tree.length);
+  const pageRoots = useMemo(() => tree.slice(rootStart, rootEnd), [tree, rootStart, rootEnd]);
+
+  // The summary counts PROJECTS, so derive its range from the projects the
+  // displayed roots actually cover rather than from the row indices.
+  const projectsBefore = tree
+    .slice(0, rootStart)
+    .reduce((sum, node) => sum + node.projectCount, 0);
+  const projectsOnPage = pageRoots.reduce((sum, node) => sum + node.projectCount, 0);
+  const startIndex = projectsBefore;
+  const endIndex = projectsBefore + projectsOnPage;
+
+  // Collapsed (not expanded) is what we persist: a profile or agent appearing
+  // for the first time should be visible, not hidden behind a click nobody
+  // knows to make. Loaded in an effect, never during render — reading
+  // localStorage while rendering would desync the server-rendered HTML.
+  const [collapsed, setCollapsed] = useState<Set<string>>(() => new Set());
+  useEffect(() => {
+    setCollapsed(new Set(readCollapsed()));
+  }, []);
+
+  const toggleCollapsed = (key: string) => {
+    setCollapsed((prev) => {
+      const next = new Set(prev);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      persistCollapsed(next);
+      return next;
+    });
+  };
+
+  // A search that matched something must not leave the match hidden inside a
+  // collapsed folder, so an active search force-expands everything.
+  const searching = keywords.length > 0;
+  const visibleRows = useMemo(
+    () => visibleTreeRows(pageRoots, (key) => !searching && collapsed.has(key)),
+    [pageRoots, collapsed, searching],
+  );
+
+  // Keys the bulk toggle acts on: everything collapsible in the CURRENT view
+  // (this page, this filter). It must never be used to REPLACE the stored set —
+  // see toggleAll.
+  const pageCollapsibleKeys = useMemo(() => collapsibleKeys(pageRoots), [pageRoots]);
+  // The label, though, follows what is on SCREEN. Judging it by the whole page's
+  // keys would keep saying "Collapse all" after a root was collapsed, because
+  // its hidden descendants are still expanded — a button that then does nothing
+  // visible.
+  const visibleCollapsibleKeys = visibleRows.filter((n) => n.children.length > 0).map((n) => n.key);
+  const anyExpanded = visibleCollapsibleKeys.some((k) => !collapsed.has(k));
+
+  const toggleAll = () => {
+    setCollapsed((prev) => {
+      // MERGE, never replace: the stored set spans every page and filter, so
+      // assigning this view's keys wholesale would silently discard collapses
+      // the user made elsewhere.
+      const next = new Set(prev);
+      for (const key of pageCollapsibleKeys) {
+        if (anyExpanded) next.add(key);
+        else next.delete(key);
+      }
+      persistCollapsed(next);
+      return next;
+    });
+  };
 
   return (
     <div className="space-y-4">
@@ -266,11 +467,20 @@ export default function ProjectList({ folders }: ProjectListProps) {
           </div>
 
           {/* Results Count */}
-          <div className="text-sm text-muted-foreground">
+          <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-sm text-muted-foreground">
+            {pageCollapsibleKeys.length > 0 && !searching && (
+              <button
+                type="button"
+                onClick={toggleAll}
+                className="text-xs text-muted-foreground hover:text-foreground underline underline-offset-2 transition-colors"
+              >
+                {anyExpanded ? "Collapse all" : "Expand all"}
+              </button>
+            )}
             {filteredFolders.length === 0 ? (
-              <>No projects found</>
+              <span>No projects found</span>
             ) : (
-              <>
+              <span>
                 Showing {startIndex + 1}-{endIndex} of {filteredFolders.length} projects
                 {filteredFolders.length !== normalizedFolders.length && (
                   <span className="ml-1">
@@ -282,7 +492,7 @@ export default function ProjectList({ folders }: ProjectListProps) {
                     with {keywords.length} keyword{keywords.length !== 1 ? "s" : ""}
                   </span>
                 )}
-              </>
+              </span>
             )}
           </div>
         </div>
@@ -309,44 +519,21 @@ export default function ProjectList({ folders }: ProjectListProps) {
               </tr>
             </thead>
             <tbody>
-              {paginatedFolders.length === 0 ? (
+              {visibleRows.length === 0 ? (
                 <tr>
                   <td colSpan={4} className="px-4 py-8 text-center text-muted-foreground">
                     No projects found matching the selected filter.
                   </td>
                 </tr>
               ) : (
-                paginatedFolders.map((folder) => (
-                  <tr
-                    key={folder.name}
-                    className="border-b border-border hover:bg-muted/50 transition-colors"
-                  >
-                    <td className="px-4 py-3">
-                      <Folder className="w-5 h-5 text-primary" />
-                    </td>
-                    <td className="px-4 py-3 max-w-md">
-                      <div className="flex flex-wrap items-center gap-2">
-                        <Link
-                          href={`/project/${encodeURIComponent(folder.name)}`}
-                          className="font-semibold text-foreground hover:text-primary transition-colors break-words break-all inline-block max-w-full"
-                        >
-                          {decodeFolderName(folder.name)}
-                        </Link>
-                        {folder.cli.map((c) => (
-                          <CliBadge key={c} cli={c} />
-                        ))}
-                      </div>
-                    </td>
-                    <td className="px-4 py-3 text-sm text-muted-foreground hidden md:table-cell truncate max-w-md">
-                      {folder.path}
-                    </td>
-                    <td className="px-4 py-3 text-sm text-muted-foreground">
-                      <DateDisplay
-                        date={folder.lastModified}
-                        formatted={folder.lastModifiedFormatted}
-                      />
-                    </td>
-                  </tr>
+                visibleRows.map((node) => (
+                  <ProjectRow
+                    key={node.key}
+                    node={node}
+                    collapsed={!searching && collapsed.has(node.key)}
+                    interactive={!searching}
+                    onToggle={toggleCollapsed}
+                  />
                 ))
               )}
             </tbody>

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

@@ -3,25 +3,14 @@
 import React, { useState, useEffect, useCallback, useMemo, useRef, useTransition } from "react";
 import { createPortal } from "react-dom";
 import Link from "next/link";
-import {
-  ShieldCheck,
-  ShieldX,
-  ShieldAlert,
-  Shield,
-  ChevronDown,
-  Copy,
-  Check,
-  Settings,
-  Code,
-  X,
-} from "lucide-react";
+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 { getHooksConfigAction } from "@/app/actions/get-hooks-config";
 import type { HooksConfigPayload, PolicyInfo, CustomPolicyInfo } from "@/app/actions/get-hooks-config";
 import type { IntegrationType } from "@/src/hooks/types";
-import { togglePolicyAction } from "@/app/actions/update-hooks-config";
+import { toggleCustomPolicyAction, togglePolicyAction } from "@/app/actions/update-hooks-config";
 import { installHooksWebAction, removeHooksWebAction } from "@/app/actions/install-hooks-web";
 import { updatePolicyParamsAction } from "@/app/actions/update-policy-params";
 import { useAutoRefresh } from "@/contexts/AutoRefreshContext";
@@ -29,6 +18,7 @@ import { usePostHog } from "@/contexts/PostHogContext";
 import { useUrlParams } from "@/lib/use-url-params";
 import { pageToParam, paramToPage } from "@/lib/url-filter-serializers";
 import { getCliLabel, getCliBadgeClasses, KNOWN_CLI_IDS, isKnownCli, type CliId } from "@/lib/cli-registry";
+import { enforcementFor } from "@/src/hooks/enforcement-capability";
 import { formatRelativeTime } from "@/lib/format-duration";
 import { Button } from "@/components/ui/button";
 
@@ -330,6 +320,58 @@ function StatsBar({ stats }: { stats: HookActivityPayload["stats"] }) {
 
 // -- Expandable Detail Panel --
 
+
+/**
+ * "Your policy ran, but this event cannot block on this CLI."
+ *
+ * Renders ONLY when the (cli, event) pair is a verified `observe`. A pair we
+ * have not traced returns undefined from `enforcementFor` and this renders
+ * nothing — a hedge ("capability unverified") would still be a claim, and
+ * unverified claims are the failure this whole matrix exists to prevent.
+ *
+ * The deny case matters more than the allow case: the row already says
+ * "denied", the activity store recorded a deny, and telemetry counted one — so
+ * without this note the UI actively reports enforcement that did not happen.
+ */
+function EnforcementNote({
+  item,
+}: {
+  item: HookActivityPayload["entries"][number];
+}) {
+  const capability = enforcementFor(
+    item.integration as IntegrationType | undefined,
+    item.eventType,
+  );
+  if (capability !== "observe") return null;
+
+  const ran = item.matchedPolicies ?? [];
+  // Rows written before matchedPolicies existed have no list; naming no policy
+  // is better than implying none ran.
+  if (ran.length === 0) return null;
+
+  const cli = item.integration ? getCliLabel(item.integration as IntegrationType) : "This CLI";
+  const names = ran.map((n) => n.replace(/^(custom|\.failproofai-(project|user))\//, ""));
+  const label = names.length === 1 ? names[0] : `${names.length} policies`;
+  const denied = item.decision === "deny";
+
+  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">
+          {denied ? "Not enforced." : "Ran, but cannot enforce here."}
+        </span>{" "}
+        <span className="font-mono">{label}</span> ran on{" "}
+        <span className="font-mono">{item.eventType}</span>, but {cli} discards hook
+        verdicts for this event
+        {denied ? " — the action went ahead anyway." : ", so a policy cannot block here."}{" "}
+        Move the check to an event {cli} enforces on, such as{" "}
+        <span className="font-mono">PreToolUse</span>.
+      </p>
+    </div>
+  );
+}
+
 function DetailPanel({
   item,
 }: {
@@ -340,10 +382,11 @@ function DetailPanel({
       <td colSpan={11} className="px-0 py-0">
         <div className="activity-detail animate-expand text-xs">
           <span className="activity-detail-eyebrow">
-            <span aria-hidden="true">\u25be</span>
+            <span aria-hidden="true">{"\u25BE"}</span>
             event detail
           </span>
           <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-2">
+            <EnforcementNote item={item} />
             <div>
               <span className="text-muted-foreground">Session ID: </span>
               <span className="font-mono text-foreground">
@@ -1171,6 +1214,26 @@ function PoliciesTab({ onHooksInstallChange }: { onHooksInstallChange?: (install
     });
   };
 
+  const handleCustomToggle = (id: string, currentlyEnabled: boolean) => {
+    if (!config) return;
+    setConfig((prev) => prev ? {
+      ...prev,
+      customPolicies: prev.customPolicies?.map((p) => p.id === id ? { ...p, enabled: !currentlyEnabled } : p),
+      conventionPolicies: prev.conventionPolicies.map((entry) => ({
+        ...entry,
+        policies: entry.policies.map((p) => p.id === id ? { ...p, enabled: !currentlyEnabled } : p),
+      })),
+    } : prev);
+    startTransition(async () => {
+      try {
+        await toggleCustomPolicyAction(id, !currentlyEnabled);
+      } catch {
+        fireActionError("custom_policy_toggle", "Failed to save custom policy change.");
+        reload();
+      }
+    });
+  };
+
   const handleApply = () => {
     const { toInstall, toRemove } = pendingChanges;
     if (toInstall.length === 0 && toRemove.length === 0) return;
@@ -1233,7 +1296,7 @@ function PoliciesTab({ onHooksInstallChange }: { onHooksInstallChange?: (install
   if (!config) {
     return (
       <div className="flex items-center justify-center py-16">
-        <span className="text-sm text-muted-foreground">Loading\u2026</span>
+        <span className="text-sm text-muted-foreground">Loading{"\u2026"}</span>
       </div>
     );
   }
@@ -1427,7 +1490,7 @@ function PoliciesTab({ onHooksInstallChange }: { onHooksInstallChange?: (install
         <span className="text-xs text-muted-foreground">
           <span className="font-semibold text-foreground">{config.enabledPolicies.length}</span>
           {" / "}
-          {config.policies.length + (config.customPolicies?.length ?? 0)}{" "}
+          {config.policies.length + (config.customPolicies?.length ?? 0) + (config.conventionPolicies?.reduce((n, e) => n + e.policies.length, 0) ?? 0)}{" "}
           policies enabled
         </span>
         {installed && (
@@ -1546,7 +1609,7 @@ function PoliciesTab({ onHooksInstallChange }: { onHooksInstallChange?: (install
       })}
 
       {/* Custom policies section */}
-      {config.customPoliciesPath && (
+      {(config.customPoliciesPaths?.length || config.customPoliciesPath) && (
         <div>
           {/* Section header — matches category header style */}
           <div className="flex items-center justify-between px-4 py-2.5 bg-muted/20 border-b border-border/50">
@@ -1557,26 +1620,28 @@ function PoliciesTab({ onHooksInstallChange }: { onHooksInstallChange?: (install
               {config.customPolicies?.length ?? 0} detected
             </span>
           </div>
-          {/* File path row */}
-          <div className="flex items-center gap-3 px-4 py-3 border-b border-border/20">
-            <Code className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
-            <span className="text-xs font-mono text-muted-foreground truncate">{config.customPoliciesPath}</span>
-          </div>
+          {(config.customPoliciesPaths ?? [config.customPoliciesPath!]).map((path) => (
+            <div key={path} className="flex items-center gap-3 px-4 py-3 border-b border-border/20">
+              <Code className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
+              <span className="text-xs font-mono text-muted-foreground truncate">{path}</span>
+            </div>
+          ))}
           {/* Reconfigure notice */}
           <div className="flex items-start gap-2 px-4 py-2.5 border-b border-border/20 bg-muted/10">
             <Shield className="h-3.5 w-3.5 text-muted-foreground/60 shrink-0 mt-0.5" />
             <p className="text-[0.7rem] text-muted-foreground/70 leading-relaxed">
-              Custom policies are always active. To add, remove, or reorder them, edit the JS file above.
+              Re-run the install command to add, remove, or reorder files.
             </p>
           </div>
           {/* Rich policy rows — mirrors built-in layout without toggle */}
           {config.customPolicies?.map((policy) => (
             <div
-              key={policy.name}
+              key={policy.id}
               className="flex items-start gap-3 px-4 py-3 border-b border-border/20 hover:bg-muted/20 transition-colors"
             >
-              {/* Invisible spacer matching PolicyToggle dimensions (h-4 w-7) */}
-              <div className="h-4 w-7 shrink-0 mt-0.5" />
+              <div className="mt-0.5 shrink-0">
+                <PolicyToggle enabled={policy.enabled} onChange={() => handleCustomToggle(policy.id, policy.enabled)} disabled={isPending} />
+              </div>
               <div className="flex items-center gap-1.5 min-w-0 w-56 shrink-0 mt-0.5">
                 <span className="text-xs font-mono text-foreground truncate">{policy.name}</span>
               </div>
@@ -1596,6 +1661,60 @@ function PoliciesTab({ onHooksInstallChange }: { onHooksInstallChange?: (install
           ))}
         </div>
       )}
+
+      {/* Convention policies — discovered from .failproofai/policies/, never
+          from config, so they are grouped by the file that declares them. */}
+      {config.conventionPolicies?.map((entry) => (
+        <div key={entry.path}>
+          <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">
+              Convention Policies — {entry.scope === "project" ? "Project" : "User"}
+            </span>
+            <span className="text-[0.7rem] text-muted-foreground">
+              {entry.policies.length} hook{entry.policies.length === 1 ? "" : "s"}
+            </span>
+          </div>
+          <div className="flex items-center gap-3 px-4 py-3 border-b border-border/20">
+            <Code className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
+            <span className="text-xs font-mono text-muted-foreground truncate">{entry.path}</span>
+          </div>
+          {entry.policies.length === 0 ? (
+            <div className="flex items-start gap-2 px-4 py-2.5 border-b border-border/20 bg-muted/10">
+              <Shield className="h-3.5 w-3.5 text-muted-foreground/60 shrink-0 mt-0.5" />
+              <p className="text-[0.7rem] text-muted-foreground/70 leading-relaxed">
+                No policies could be read from this file. It is still loaded at runtime —
+                run <span className="font-mono">failproofai policies</span> to see what it registers.
+              </p>
+            </div>
+          ) : (
+            entry.policies.map((policy) => (
+              <div
+                key={`${entry.path}:${policy.name}`}
+                className="flex items-start gap-3 px-4 py-3 border-b border-border/20 hover:bg-muted/20 transition-colors"
+              >
+                <div className="mt-0.5 shrink-0">
+                  <PolicyToggle enabled={policy.enabled} onChange={() => handleCustomToggle(policy.id, policy.enabled)} disabled={isPending} />
+                </div>
+                <div className="flex items-center gap-1.5 min-w-0 w-56 shrink-0 mt-0.5">
+                  <span className="text-xs font-mono text-foreground truncate">{policy.name}</span>
+                </div>
+                <div className="flex-1 min-w-0">
+                  {policy.description && (
+                    <span className="text-xs text-muted-foreground leading-relaxed">
+                      {policy.description}
+                    </span>
+                  )}
+                  {policy.eventScope && (
+                    <span className="block text-[0.65rem] text-muted-foreground/40 font-mono mt-0.5 hidden lg:block">
+                      {policy.eventScope}
+                    </span>
+                  )}
+                </div>
+              </div>
+            ))
+          )}
+        </div>
+      ))}
     </div>
     </>
   );
@@ -1646,7 +1765,10 @@ export default function HooksClient({ initialTab = "activity" }: { initialTab?:
         setHooksInstalled(cfg.clis.some((c) => c.installed));
         setPolicyCounts({
           enabled: cfg.enabledPolicies.length,
-          total: cfg.policies.length + (cfg.customPolicies?.length ?? 0),
+          total:
+            cfg.policies.length +
+            (cfg.customPolicies?.length ?? 0) +
+            (cfg.conventionPolicies?.reduce((n, e) => n + e.policies.length, 0) ?? 0),
         });
         setInstalledCliLabels(cfg.clis.filter((c) => c.installed).map((c) => c.label));
       })

package/.next/standalone/app/project/[name]/page.tsx

@@ -13,7 +13,7 @@ import { getCachedDevinSessionsByEncodedName } from "@/lib/devin-projects";
 import { getCachedAntigravitySessionsByEncodedName } from "@/lib/antigravity-projects";
 import { getCachedGooseSessionsByEncodedName } from "@/lib/goose-projects";
 import { logWarn } from "@/lib/logger";
-import { decodeFolderName } from "@/lib/paths";
+import { decodeFolderName, projectDisplayName, isSyntheticProjectPath } from "@/lib/paths";
 import { notFound } from "next/navigation";
 import { existsSync } from "fs";
 import { stat } from "fs/promises";
@@ -150,7 +150,17 @@ export default async function ProjectPage({ params }: ProjectPageProps) {
           back to projects
         </Link>
 
-        <h1 className="project-page-title">{canonicalRoot}</h1>
+        {/* Gateway projects carry a synthetic `hermes:profile:source` root; show
+            the same slash form the projects panel does, so the page you land on
+            is titled what you clicked. Everything else keeps the LITERAL cwd
+            recovered above — passing it through projectDisplayName would discard
+            it and re-derive a lossy name from the slug, turning a real
+            `/home/u/my-app` into `/home/u/my/app`. */}
+        <h1 className="project-page-title">
+          {isSyntheticProjectPath(canonicalRoot)
+            ? projectDisplayName(name, canonicalRoot)
+            : canonicalRoot}
+        </h1>
 
         <div className="project-page-meta">
           <span className="label">path</span>