plugin-scanner 2.0.643__tar.gz → 2.0.645__tar.gz

{plugin_scanner-2.0.643 → plugin_scanner-2.0.645}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: plugin-scanner
-Version: 2.0.643
+Version: 2.0.645
 Summary: Lint, verify, and gate plugin ecosystems for maintainers, CI, and publish workflows.
 Project-URL: Homepage, https://github.com/hashgraph-online/hol-guard
 Project-URL: Repository, https://github.com/hashgraph-online/hol-guard

{plugin_scanner-2.0.643 → plugin_scanner-2.0.645}/dashboard/package.json

@@ -5,7 +5,7 @@
   "type": "module",
   "scripts": {
     "build": "vite build",
-    "test": "tsx src/guard-api.test.ts && tsx src/guard-update.test.ts && tsx src/approval-scopes.test.ts && tsx src/approval-center-layout.test.ts && tsx src/runtime-overview.test.ts && tsx src/receipts-workspace.test.ts && tsx src/settings/settings-ia.test.ts && tsx src/settings-workspace.test.ts && tsx src/settings-save-proof-modal.test.ts && tsx src/queue-state.test.ts && tsx src/approval-center-mobile.test.ts && tsx src/home-dashboard.test.ts && tsx src/fleet-workspace.test.ts && tsx src/evidence/evidence-filters.test.ts && tsx src/evidence/evidence-sort.test.ts && tsx src/evidence/evidence-pagination.test.ts && tsx src/evidence/evidence-url-state.test.ts && tsx src/evidence/evidence-metrics.test.ts && tsx src/evidence/evidence-export.test.ts && tsx src/evidence/scoped-evidence-table.test.ts && tsx src/app-routing.test.ts && tsx src/app-activity-evidence.test.ts && tsx src/app-detail-workspace.test.ts && tsx src/clear-policy-payload.test.ts && tsx src/policy-workspace-helpers.test.ts && tsx src/phase09-review.test.ts && tsx src/evidence/evidence-story.test.ts && tsx src/evidence/evidence-detail.test.ts && tsx src/evidence/evidence-copy.test.ts && tsx src/evidence/evidence-perf.test.ts && tsx src/fleet-workspace-phase11.test.ts && tsx src/settings-workspace-phase11.test.ts && tsx src/app-detail-phase11.test.ts && tsx src/security-fixes.test.ts && tsx src/approval-gate.test.ts && tsx src/scrg159-170.test.ts && tsx src/scrg171-172.test.ts && tsx src/scsr-phase09-package-firewall-status.test.ts && tsx src/scsr-phase09-next-action.test.ts && tsx src/scsr-phase10-package-workbench.test.ts && tsx src/about/about-content.test.ts && tsx src/about/about-external-links.test.ts && tsx src/about/about-design.test.ts && tsx src/about/about-section-shell.test.ts",
+    "test": "tsx src/guard-api.test.ts && tsx src/guard-update.test.ts && tsx src/approval-scopes.test.ts && tsx src/approval-center-layout.test.ts && tsx src/runtime-overview.test.ts && tsx src/receipts-workspace.test.ts && tsx src/settings/settings-ia.test.ts && tsx src/settings-workspace.test.ts && tsx src/settings-save-proof-modal.test.ts && tsx src/queue-state.test.ts && tsx src/approval-center-mobile.test.ts && tsx src/home-dashboard.test.ts && tsx src/fleet-workspace.test.ts && tsx src/evidence/evidence-filters.test.ts && tsx src/evidence/evidence-sort.test.ts && tsx src/evidence/evidence-pagination.test.ts && tsx src/evidence/evidence-url-state.test.ts && tsx src/evidence/evidence-metrics.test.ts && tsx src/evidence/evidence-export.test.ts && tsx src/evidence/scoped-evidence-table.test.ts && tsx src/app-routing.test.ts && tsx src/app-activity-evidence.test.ts && tsx src/app-detail-workspace.test.ts && tsx src/clear-policy-payload.test.ts && tsx src/policy-workspace-helpers.test.ts && tsx src/phase09-review.test.ts && tsx src/evidence/evidence-story.test.ts && tsx src/evidence/evidence-detail.test.ts && tsx src/evidence/evidence-copy.test.ts && tsx src/evidence/evidence-perf.test.ts && tsx src/fleet-workspace-phase11.test.ts && tsx src/settings-workspace-phase11.test.ts && tsx src/app-detail-phase11.test.ts && tsx src/security-fixes.test.ts && tsx src/approval-gate.test.ts && tsx src/scrg159-170.test.ts && tsx src/scrg171-172.test.ts && tsx src/scsr-phase09-package-firewall-status.test.ts && tsx src/scsr-phase09-next-action.test.ts && tsx src/scsr-phase10-package-workbench.test.ts && tsx src/supply-chain-ux-consolidation.test.ts && tsx src/supply-chain-audit-connect.test.tsx && tsx src/about/about-content.test.ts && tsx src/about/about-external-links.test.ts && tsx src/about/about-design.test.ts && tsx src/about/about-section-shell.test.ts",
     "test:e2e": "playwright test",
     "dev": "vite dev"
   },

{plugin_scanner-2.0.643 → plugin_scanner-2.0.645}/dashboard/src/guard-api.ts

@@ -2596,7 +2596,7 @@ export async function runAuditRemediation(input: AuditRemediationInput): Promise
 }
 
 export async function runPackageAudit(): Promise<PackageFirewallActionResponse> {
-  const response = await readJson<unknown>("/v1/supply-chain/audit", {
+  const response = await fetchGuardApi("/v1/supply-chain/audit", {
     method: "POST",
     headers: {
       "Content-Type": "application/json",
@@ -2604,11 +2604,18 @@ export async function runPackageAudit(): Promise<PackageFirewallActionResponse>
     },
     body: JSON.stringify({}),
   });
-  return normalizePackageFirewallAction(response);
+  const payloadBody = (await response.json().catch(() => null)) as unknown;
+  if (!response.ok) {
+    throw new GuardHarnessActionError(
+      response.status,
+      isGuardHarnessActionErrorPayload(payloadBody) ? payloadBody : null,
+    );
+  }
+  return normalizePackageFirewallAction(payloadBody);
 }
 
 export async function runPackageSync(): Promise<PackageFirewallActionResponse> {
-  const response = await readJson<unknown>("/v1/supply-chain/sync", {
+  const response = await fetchGuardApi("/v1/supply-chain/sync", {
     method: "POST",
     headers: {
       "Content-Type": "application/json",
@@ -2616,7 +2623,14 @@ export async function runPackageSync(): Promise<PackageFirewallActionResponse> {
     },
     body: JSON.stringify({}),
   });
-  return normalizePackageFirewallAction(response);
+  const payloadBody = (await response.json().catch(() => null)) as unknown;
+  if (!response.ok) {
+    throw new GuardHarnessActionError(
+      response.status,
+      isGuardHarnessActionErrorPayload(payloadBody) ? payloadBody : null,
+    );
+  }
+  return normalizePackageFirewallAction(payloadBody);
 }
 
 export type EvidencePageData = {

{plugin_scanner-2.0.643 → plugin_scanner-2.0.645}/dashboard/src/package-workbench-panel.tsx

@@ -21,8 +21,11 @@ import {
   packageWorkbenchEcosystems,
   sortPackageWorkbenchFindings,
 } from "./supply-chain-audit-normalize";
+import { ConnectFlowCard } from "./supply-chain-firewall-views";
+import type { AuditConnectGateViewState } from "./supply-chain-firewall-panel";
 
 type PackageWorkbenchPanelProps = {
+  auditConnectGate?: AuditConnectGateViewState | null;
   auditSnapshot: SupplyChainAuditSnapshot | null;
   onRunAudit?: () => void;
   auditRunning?: boolean;
@@ -329,15 +332,32 @@ function EcosystemChip({ ecosystem, active, onSelect }: EcosystemChipProps) {
 }
 
 type WorkbenchEmptyStateProps = {
+  auditConnectGate?: AuditConnectGateViewState | null;
   onRunAudit?: () => void;
   auditRunning?: boolean;
 };
 
-function WorkbenchEmptyState({ onRunAudit, auditRunning }: WorkbenchEmptyStateProps) {
+function WorkbenchEmptyState({ auditConnectGate, onRunAudit, auditRunning }: WorkbenchEmptyStateProps) {
+  if (auditConnectGate !== null && auditConnectGate !== undefined) {
+    return (
+      <ConnectFlowCard
+        compact
+        connectError={auditConnectGate.connectError}
+        connectStarting={auditConnectGate.connectStarting}
+        connectFlow={auditConnectGate.connectFlow}
+        detail={auditConnectGate.gate.detail}
+        headline={auditConnectGate.gate.headline}
+        mode={auditConnectGate.gate.mode}
+        onStartConnect={auditConnectGate.onStartConnect}
+        purpose="audit"
+      />
+    );
+  }
+
   return (
     <EmptyState
       title="No workspace audit yet"
-      body="Run a package audit from the firewall panel to index dependencies and surface flagged packages here."
+      body="Run a package audit to index dependencies and surface flagged packages here."
       tone="teach"
       action={
         onRunAudit !== undefined ? (
@@ -352,6 +372,7 @@ function WorkbenchEmptyState({ onRunAudit, auditRunning }: WorkbenchEmptyStatePr
 }
 
 export function PackageWorkbenchPanel({
+  auditConnectGate = null,
   auditSnapshot,
   onRunAudit,
   auditRunning = false,
@@ -426,9 +447,9 @@ export function PackageWorkbenchPanel({
   return (
     <div className="rounded-2xl border border-slate-100 bg-white shadow-sm">
       <div className="border-b border-slate-100 px-4 py-3">
-        <SectionLabel>Package findings workbench</SectionLabel>
+        <SectionLabel>Audit findings</SectionLabel>
         <p className="mt-0.5 text-sm text-slate-500">
-          Review workspace audit inventory, filter flagged packages, and inspect advisory detail.
+          Review flagged packages from the latest workspace audit. Filter, sort, and inspect advisory detail.
         </p>
         {auditSnapshot !== null && (
           <div className="mt-2">
@@ -439,7 +460,11 @@ export function PackageWorkbenchPanel({
 
       {auditSnapshot === null && (
         <div className="px-4 py-6">
-          <WorkbenchEmptyState onRunAudit={onRunAudit} auditRunning={auditRunning} />
+          <WorkbenchEmptyState
+            auditConnectGate={auditConnectGate}
+            onRunAudit={onRunAudit}
+            auditRunning={auditRunning}
+          />
         </div>
       )}
       {auditSnapshot !== null && findings.length === 0 && (

plugin_scanner-2.0.645/dashboard/src/supply-chain-audit-connect.test.tsx

@@ -0,0 +1,107 @@
+import { renderToStaticMarkup } from "react-dom/server";
+import { GuardHarnessActionError } from "./guard-api";
+import { ConnectFlowCard } from "./supply-chain-firewall-views";
+import {
+  isSupplyChainAuditConnectError,
+  packageAuditNeedsCloudConnect,
+  resolveSupplyChainAuditConnectGate,
+  supplyChainAuditConnectUserMessage,
+} from "./supply-chain-audit-connect";
+import type { PackageFirewallStatusResponse } from "./guard-types";
+
+function assert(condition: boolean, message: string): void {
+  if (!condition) {
+    throw new Error(message);
+  }
+}
+
+const connectRequiredStatus: PackageFirewallStatusResponse = {
+  operation: "status",
+  status: "completed",
+  supported_managers: ["npm"],
+  detected_managers: ["npm"],
+  last_audit_proof_at: null,
+  protection: null,
+  package_shims: [],
+  entitlement: {
+    allowed: false,
+    reason: "guard_cloud_connect_required",
+    tier: "unknown",
+    upgrade_cta: "Connect HOL Guard Cloud to check package firewall access and run package firewall actions.",
+    upgrade_url: null,
+  },
+  actions: {
+    install: "connect_required",
+    repair: "disabled",
+    test: "connect_required",
+    audit: "connect_required",
+    sync: "connect_required",
+    remove: "disabled",
+  },
+  cli_fallback: {
+    connect: "hol-guard connect",
+  },
+  connect_flow: {
+    state: "idle",
+    title: "Connect HOL Guard Cloud to enable package firewall",
+    detail: "Connect HOL Guard Cloud here so the daemon can verify package-firewall access.",
+    action_label: "Connect HOL Guard Cloud",
+    connect_url: "https://hol.org/guard/connect",
+    authorize_url: null,
+    browser_opened: null,
+    request_id: null,
+    poll_after_ms: null,
+  },
+};
+
+assert(packageAuditNeedsCloudConnect(connectRequiredStatus), "audit action should require cloud connect");
+const gate = resolveSupplyChainAuditConnectGate(connectRequiredStatus, { resumeAfterConnect: true });
+assert(gate !== null, "audit connect gate should resolve for connect-required status");
+assert(
+  gate?.headline.includes("Sign in"),
+  "audit connect gate should use human-readable sign-in copy",
+);
+assert(
+  !gate?.headline.includes("guard_cloud_connect_required"),
+  "audit connect gate should not surface raw daemon error codes",
+);
+
+const connectError = new GuardHarnessActionError(403, {
+  error: "guard_cloud_connect_required",
+  message: "Connect HOL Guard Cloud on this machine before running package firewall actions.",
+  operation: "audit",
+});
+assert(isSupplyChainAuditConnectError(connectError), "structured audit connect errors should be detectable");
+assert(
+  supplyChainAuditConnectUserMessage(connectError)?.includes("Sign in"),
+  "audit connect user message should guide sign-in before retry",
+);
+
+const auditConnectMarkup = renderToStaticMarkup(
+  <ConnectFlowCard
+    compact
+    connectError={null}
+    connectStarting={false}
+    connectFlow={connectRequiredStatus.connect_flow!}
+    detail={gate!.detail}
+    headline={gate!.headline}
+    mode="connect"
+    onStartConnect={() => undefined}
+    purpose="audit"
+  />,
+);
+
+assert(
+  auditConnectMarkup.includes("Run workspace audit"),
+  "audit connect card should show audit-specific final step",
+);
+assert(
+  auditConnectMarkup.includes("Connect HOL Guard Cloud"),
+  "audit connect card should keep the primary connect action",
+);
+assert(
+  !auditConnectMarkup.includes("guard_cloud_connect_required"),
+  "audit connect card markup should not expose raw error codes",
+);
+
+console.log("supply-chain-audit-connect.test.ts: all assertions passed");

plugin_scanner-2.0.645/dashboard/src/supply-chain-audit-connect.ts

@@ -0,0 +1,83 @@
+import { GuardHarnessActionError } from "./guard-api";
+import type { PackageFirewallStatusResponse } from "./guard-types";
+
+export const SUPPLY_CHAIN_AUDIT_CONNECT_ERROR_CODES = [
+  "guard_cloud_connect_required",
+  "guard_cloud_reconnect_required",
+] as const;
+
+export type SupplyChainAuditConnectErrorCode =
+  (typeof SUPPLY_CHAIN_AUDIT_CONNECT_ERROR_CODES)[number];
+
+export type SupplyChainAuditConnectGate = {
+  mode: "connect" | "repair";
+  headline: string;
+  detail: string;
+  resumeAfterConnect: boolean;
+};
+
+export function isSupplyChainAuditConnectError(error: unknown): error is GuardHarnessActionError {
+  if (!(error instanceof GuardHarnessActionError)) {
+    return false;
+  }
+  const code = error.payload?.error;
+  return (
+    typeof code === "string" &&
+    (SUPPLY_CHAIN_AUDIT_CONNECT_ERROR_CODES as readonly string[]).includes(code)
+  );
+}
+
+export function packageAuditNeedsCloudConnect(data: PackageFirewallStatusResponse): boolean {
+  const auditAction = data.actions.audit;
+  return auditAction === "connect_required" || auditAction === "reconnect_required";
+}
+
+function resolveAuditConnectMode(data: PackageFirewallStatusResponse): "connect" | "repair" {
+  if (data.entitlement.reason === "guard_cloud_reconnect_required") {
+    return "repair";
+  }
+  if (
+    data.entitlement.reason === "guard_cloud_connect_required" &&
+    (data.entitlement.tier !== "unknown" || data.package_shims.some((shim) => shim.installed))
+  ) {
+    return "repair";
+  }
+  return "connect";
+}
+
+export function resolveSupplyChainAuditConnectGate(
+  data: PackageFirewallStatusResponse,
+  options?: { resumeAfterConnect?: boolean },
+): SupplyChainAuditConnectGate | null {
+  if (!packageAuditNeedsCloudConnect(data) || data.connect_flow === null) {
+    return null;
+  }
+  const mode = resolveAuditConnectMode(data);
+  if (mode === "repair") {
+    return {
+      mode,
+      headline: "Reconnect Guard Cloud to run the workspace audit",
+      detail:
+        "Guard needs a fresh Cloud sign-in on this machine before it can scan workspace packages and surface findings here.",
+      resumeAfterConnect: options?.resumeAfterConnect ?? false,
+    };
+  }
+  return {
+    mode,
+    headline: "Sign in to Guard Cloud before running the audit",
+    detail:
+      "Package audits run through Guard Cloud. Sign in once on this machine, then Guard can scan dependencies and list flagged packages.",
+    resumeAfterConnect: options?.resumeAfterConnect ?? false,
+  };
+}
+
+export function supplyChainAuditConnectUserMessage(error: unknown): string | null {
+  if (!isSupplyChainAuditConnectError(error)) {
+    return null;
+  }
+  const code = error.payload?.error;
+  if (code === "guard_cloud_reconnect_required") {
+    return "Reconnect HOL Guard Cloud, then run the workspace audit again.";
+  }
+  return "Sign in to HOL Guard Cloud on this machine, then run the workspace audit.";
+}

{plugin_scanner-2.0.643 → plugin_scanner-2.0.645}/dashboard/src/supply-chain-evidence-rail-panel.tsx

@@ -108,12 +108,12 @@ export function SupplyChainCloudDegradedBanner({ state }: SupplyChainCloudDegrad
 
   return (
     <div
-      className="rounded-2xl border border-amber-200 bg-amber-50/70 px-4 py-3"
+      className="rounded-2xl border border-brand-attention/20 bg-brand-attention/[0.04] px-4 py-3"
       role="status"
       data-testid="supply-chain-cloud-degraded"
     >
-      <p className="text-sm font-medium text-amber-950">{state.title}</p>
-      <p className="mt-1 text-xs leading-relaxed text-amber-900/90">{state.detail}</p>
+      <p className="text-sm font-medium text-brand-dark">{state.title}</p>
+      <p className="mt-1 text-xs leading-relaxed text-slate-600">{state.detail}</p>
     </div>
   );
 }

{plugin_scanner-2.0.643 → plugin_scanner-2.0.645}/dashboard/src/supply-chain-firewall-controls.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useMemo } from "react";
+import { useMemo } from "react";
 import type { ChangeEvent } from "react";
 import {
   HiMiniArrowPath,
@@ -11,10 +11,8 @@ import type { PackageFirewallActionType, PackageFirewallStatusResponse } from ".
 import {
   ActionResultPanel,
   ActivationSummary,
-  NextActionHero,
   type CompletedOp,
 } from "./supply-chain-firewall-views";
-import { resolvePackageFirewallNextAction } from "./supply-chain-firewall-next-action";
 import { ManagerRow, resolveShimStatus } from "./supply-chain-firewall-manager-row";
 
 export type FirewallOpKey = PackageFirewallActionType | "audit" | "sync";
@@ -135,31 +133,6 @@ export function FirewallControlsView({
   onOpenManagerDetails,
 }: FirewallControlsViewProps) {
   const anyPending = pendingOp !== null;
-  const nextAction = useMemo(() => resolvePackageFirewallNextAction(data), [data]);
-  const handleNextAction = useCallback(
-    (op: "install" | "repair" | "test" | "sync", manager: string | null) => {
-      if (op === "install" && manager !== null) {
-        onInstall(manager);
-        return;
-      }
-      if (op === "repair" && manager !== null) {
-        onRepair(manager);
-        return;
-      }
-      if (op === "test") {
-        if (manager !== null) {
-          onTest(manager);
-          return;
-        }
-        onOpenShell();
-        return;
-      }
-      if (op === "sync") {
-        onSync();
-      }
-    },
-    [onInstall, onOpenShell, onRepair, onSync, onTest],
-  );
 
   const noDetectedManagers = data.detected_managers.length === 0;
   const filteredManagers = useMemo(() => {
@@ -197,10 +170,13 @@ export function FirewallControlsView({
 
   return (
     <div className="space-y-4 px-4 py-4">
-      <NextActionHero action={nextAction} anyPending={anyPending} onRunAction={handleNextAction} />
-
       <div className="flex flex-wrap items-center justify-between gap-2">
-        <p className="text-sm font-medium text-brand-dark">Per-manager controls</p>
+        <div>
+          <p className="text-sm font-medium text-brand-dark">Package tools on this device</p>
+          <p className="mt-0.5 text-xs leading-relaxed text-slate-500">
+            Detect, protect, test, and repair each package manager Guard can watch.
+          </p>
+        </div>
         {showGlobalActions && (
           <GlobalActionsBar
             anyPending={anyPending}
@@ -276,55 +252,29 @@ export function FirewallControlsView({
           tone="teach"
         />
       ) : (
-        <div role="table" aria-label="Package manager firewall status">
-          <div
-            className="hidden sm:flex sm:items-center sm:justify-between border-b border-slate-100 bg-slate-50 px-4 py-2"
-            role="row"
-          >
-            <span
-              className="text-[10px] font-semibold uppercase tracking-[0.18em] text-slate-400"
-              role="columnheader"
-            >
-              Manager
-            </span>
-            <div className="flex items-center gap-3">
-              <span
-                className="text-[10px] font-semibold uppercase tracking-[0.18em] text-slate-400"
-                role="columnheader"
-              >
-                Status
-              </span>
-              <span
-                className="text-[10px] font-semibold uppercase tracking-[0.18em] text-slate-400"
-                role="columnheader"
-              >
-                Actions
-              </span>
-            </div>
-          </div>
-          <div role="rowgroup">
-            {filteredManagers.map((manager) => {
-              const shim = data.package_shims.find((s) => s.manager === manager);
-              return (
-                <ManagerRow
-                  key={manager}
-                  manager={manager}
-                  shim={shim}
-                  actions={data.actions}
-                  anyPending={anyPending}
-                  isMine={pendingOp?.manager === manager}
-                  isConfirmingRemove={confirmRemoveManager === manager}
-                  onInstall={onInstall}
-                  onRepair={onRepair}
-                  onTest={onTest}
-                  onRemoveRequest={onRemoveRequest}
-                  onRemoveConfirm={onRemoveConfirm}
-                  onRemoveCancel={onRemoveCancel}
-                  onOpenDetails={onOpenManagerDetails}
-                />
-              );
-            })}
-          </div>
+        <div className="grid min-w-0 gap-3 sm:grid-cols-2 xl:grid-cols-3" role="list" aria-label="Package manager controls">
+          {filteredManagers.map((manager) => {
+            const shim = data.package_shims.find((s) => s.manager === manager);
+            return (
+              <ManagerRow
+                key={manager}
+                layout="card"
+                manager={manager}
+                shim={shim}
+                actions={data.actions}
+                anyPending={anyPending}
+                isMine={pendingOp?.manager === manager}
+                isConfirmingRemove={confirmRemoveManager === manager}
+                onInstall={onInstall}
+                onRepair={onRepair}
+                onTest={onTest}
+                onRemoveRequest={onRemoveRequest}
+                onRemoveConfirm={onRemoveConfirm}
+                onRemoveCancel={onRemoveCancel}
+                onOpenDetails={onOpenManagerDetails}
+              />
+            );
+          })}
         </div>
       )}
     </div>

{plugin_scanner-2.0.643 → plugin_scanner-2.0.645}/dashboard/src/supply-chain-firewall-manager-row.tsx

@@ -48,6 +48,7 @@ function actionIsAvailable(state: string | undefined): boolean {
 }
 
 type ManagerRowProps = {
+  layout?: "row" | "card";
   manager: string;
   shim: PackageShimEntry | undefined;
   actions: PackageFirewallStatusResponse["actions"];
@@ -64,6 +65,7 @@ type ManagerRowProps = {
 };
 
 export function ManagerRow({
+  layout = "row",
   manager,
   shim,
   actions,
@@ -103,10 +105,15 @@ export function ManagerRow({
   const handleRemoveConfirm = useCallback(() => onRemoveConfirm(manager), [onRemoveConfirm, manager]);
   const handleOpenDetails = useCallback(() => onOpenDetails(manager), [onOpenDetails, manager]);
 
+  const cardLayout = layout === "card";
+  const outerClass = cardLayout
+    ? "min-w-0 rounded-xl border border-slate-100 bg-white p-4 shadow-sm"
+    : "border-b border-slate-100 last:border-b-0";
+
   return (
-    <div className="border-b border-slate-100 last:border-b-0" role="row">
-      <div className="flex flex-col gap-2 px-4 py-3 sm:flex-row sm:items-center sm:justify-between">
-        <div className="flex min-w-0 flex-col gap-1 sm:flex-1" role="cell">
+    <div className={outerClass} role={cardLayout ? "listitem" : "row"}>
+      <div className={cardLayout ? "flex flex-col gap-3" : "flex flex-col gap-2 px-4 py-3 sm:flex-row sm:items-center sm:justify-between"}>
+        <div className={`flex min-w-0 flex-col gap-1 ${cardLayout ? "" : "sm:flex-1"}`} role="cell">
           <div className="flex min-w-0 flex-wrap items-center gap-2">
             {status.icon === "check" ? (
               <HiMiniCheckCircle className="h-4 w-4 shrink-0 text-brand-green" aria-hidden="true" />
@@ -132,24 +139,24 @@ export function ManagerRow({
             )}
           </div>
           {shim?.path_summary !== null && shim?.path_summary !== undefined && (
-            <p className="break-all font-mono text-[11px] leading-relaxed text-slate-500 sm:pl-6">
+            <p className={`break-all font-mono text-[11px] leading-relaxed text-slate-500 ${cardLayout ? "" : "sm:pl-6"}`}>
               Shell path: {shim.path_summary}
             </p>
           )}
           {shim?.last_intercept_proof_at !== null && shim?.last_intercept_proof_at !== undefined ? (
-            <p className="flex flex-wrap items-center gap-1.5 text-[11px] text-slate-500 sm:pl-6">
+            <p className={`flex flex-wrap items-center gap-1.5 text-[11px] text-slate-500 ${cardLayout ? "" : "sm:pl-6"}`}>
               <HiMiniCheckCircle className="h-3.5 w-3.5 shrink-0 text-brand-green" aria-hidden="true" />
               Last protection test {formatRelativeTime(shim.last_intercept_proof_at)}
             </p>
           ) : shim?.installed ? (
-            <p className="flex flex-wrap items-center gap-1.5 text-[11px] text-slate-500 sm:pl-6">
+            <p className={`flex flex-wrap items-center gap-1.5 text-[11px] text-slate-500 ${cardLayout ? "" : "sm:pl-6"}`}>
               <HiMiniClock className="h-3.5 w-3.5 shrink-0" aria-hidden="true" />
               No protection test recorded yet
             </p>
           ) : null}
         </div>
 
-        <div className="flex flex-wrap items-center gap-2 sm:gap-3" role="cell">
+        <div className={`flex flex-wrap items-center gap-2 ${cardLayout ? "justify-between" : "sm:gap-3"}`} role="cell">
           <div className="shrink-0">
             <Tag tone={status.tone}>{status.label}</Tag>
           </div>
@@ -217,7 +224,7 @@ export function ManagerRow({
       </div>
 
       {shim?.activation_state === "restart_required" && (
-        <div className="px-4 pb-2">
+        <div className={cardLayout ? "mt-2" : "px-4 pb-2"}>
           <p className="text-xs text-slate-500">
             Guard updated your shell profile. Open a new shell or restart AI apps to activate this shim.
           </p>
@@ -225,7 +232,7 @@ export function ManagerRow({
       )}
 
       {shim?.activation_state === "repair_required" && (
-        <div className="px-4 pb-2">
+        <div className={cardLayout ? "mt-2" : "px-4 pb-2"}>
           <p className="text-xs text-slate-500">
             Guard can add the shim directory to your shell profile automatically, then this manager will be ready after a restart.
           </p>
@@ -233,7 +240,7 @@ export function ManagerRow({
       )}
 
       {shim?.path_broken && (
-        <div className="px-4 pb-2">
+        <div className={cardLayout ? "mt-2" : "px-4 pb-2"}>
           <p className="text-xs text-brand-attention">
             Restart your shell after repair so PATH exports reload.
           </p>