plugin-scanner 2.0.671__tar.gz → 2.0.673__tar.gz

{plugin_scanner-2.0.671 → plugin_scanner-2.0.673}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: plugin-scanner
-Version: 2.0.671
+Version: 2.0.673
 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.671 → plugin_scanner-2.0.673}/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/supply-chain-ux-consolidation.test.ts && tsx src/supply-chain-audit-connect.test.tsx && tsx src/supply-chain-audit-result.test.ts && tsx src/supply-chain-audit-recovery.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 && tsx src/workspace-page-header.test.tsx && tsx src/policy-cloud-exceptions-boundary.test.ts && tsx src/policy-cloud-exceptions-ia.test.tsx && tsx src/policy-cloud-exception-request-ia.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/supply-chain-audit-result.test.ts && tsx src/supply-chain-audit-recovery.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 && tsx src/workspace-page-header.test.tsx && tsx src/policy-cloud-exceptions-boundary.test.ts && tsx src/policy-cloud-exceptions-ia.test.tsx && tsx src/policy-cloud-exception-request-ia.test.ts && tsx src/policy-cloud-exceptions-utils.test.ts",
     "test:e2e": "playwright test",
     "dev": "vite dev"
   },

{plugin_scanner-2.0.671 → plugin_scanner-2.0.673}/dashboard/src/guard-api.ts

@@ -1606,19 +1606,28 @@ export type GuardCloudExceptionRequestCreateInput = {
   stepUpChallengeId?: string | null;
 };
 
+export type GuardCloudExceptionRequestItem = {
+  requestId: string;
+  scope: GuardCloudExceptionRequestCreateInput["scope"];
+  status: "pending" | "approved" | "rejected";
+  reason: string;
+  owner: string;
+  requestedAt: string;
+  requestedExpiresAt: string;
+};
+
 export type GuardCloudExceptionRequestListResponse = {
   generatedAt: string;
-  items: Array<{
-    requestId: string;
-    scope: GuardCloudExceptionRequestCreateInput["scope"];
-    status: "pending" | "approved" | "rejected";
-    reason: string;
-    owner: string;
-    requestedAt: string;
-    requestedExpiresAt: string;
-  }>;
+  items: GuardCloudExceptionRequestItem[];
 };
 
+export async function fetchCloudExceptionRequests(): Promise<GuardCloudExceptionRequestListResponse> {
+  if (isGuardDemoMode()) {
+    return { generatedAt: new Date().toISOString(), items: [] };
+  }
+  return readJson<GuardCloudExceptionRequestListResponse>("/v1/policy/cloud-exception-requests");
+}
+
 export async function createCloudExceptionRequest(
   input: GuardCloudExceptionRequestCreateInput,
 ): Promise<GuardCloudExceptionRequestListResponse> {

{plugin_scanner-2.0.671 → plugin_scanner-2.0.673}/dashboard/src/guard-types.ts

@@ -505,11 +505,15 @@ export type GuardCloudException = {
   owner: string;
   approver: string | null;
   expiry: string;
+  expires_at?: string;
+  artifact_id?: string | null;
+  publisher?: string | null;
   source_receipt_id: string | null;
   bundle_hash: string | null;
   ack_status: GuardCloudExceptionAckStatus | null;
   last_used_at: string | null;
   rejection_reason: string | null;
+  provenance?: "receipt-sync" | "policy-bundle";
 };
 
 

plugin_scanner-2.0.673/dashboard/src/policy-cloud-exception-detail-panel.tsx

@@ -0,0 +1,160 @@
+import { HiMiniCloudArrowUp, HiMiniXMark } from "react-icons/hi2";
+import { Badge, SectionLabel } from "./approval-center-primitives";
+import { formatRelativeTime, scopeLabel } from "./approval-center-utils";
+import type { GuardCloudException } from "./guard-types";
+import {
+  isCloudExceptionAckFailure,
+  resolveCloudExceptionExpiryTimestamp,
+  resolveCloudExceptionExpiryValue,
+  resolveCloudExceptionHeadline,
+  resolvePersonDisplayLabel,
+  resolvePersonInitials,
+} from "./policy-cloud-exceptions-utils";
+
+type PolicyCloudExceptionDetailPanelProps = {
+  exception: GuardCloudException;
+  cloudControlsUrl: string | null;
+  onClose: () => void;
+};
+
+function PersonRow({
+  label,
+  value,
+}: {
+  label: string;
+  value: string | null | undefined;
+}) {
+  const display = resolvePersonDisplayLabel(value);
+  const initials = resolvePersonInitials(value);
+  return (
+    <div className="flex items-center gap-3">
+      <span
+        aria-hidden="true"
+        className="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-brand-blue/10 text-xs font-semibold text-brand-blue"
+      >
+        {initials}
+      </span>
+      <div>
+        <p className="text-xs font-medium uppercase tracking-wide text-slate-500">{label}</p>
+        <p className="text-sm font-medium text-brand-dark">{display}</p>
+      </div>
+    </div>
+  );
+}
+
+function DetailField({ label, value }: { label: string; value: string | null | undefined }) {
+  if (!value) {
+    return null;
+  }
+  return (
+    <div>
+      <p className="text-xs font-medium uppercase tracking-wide text-slate-500">{label}</p>
+      <p className="mt-1 break-all text-sm text-brand-dark">{value}</p>
+    </div>
+  );
+}
+
+function resolveAckCopy(item: GuardCloudException): { label: string; detail: string } {
+  if (item.ack_status === "synced") {
+    return { label: "Synced", detail: "This device acknowledged the signed policy bundle." };
+  }
+  if (item.ack_status === "pending") {
+    return { label: "Pending ack", detail: "Waiting for this device to acknowledge the signed bundle on next sync." };
+  }
+  if (item.ack_status === "failed") {
+    return {
+      label: "Ack failed",
+      detail: item.rejection_reason?.trim() || "The local daemon could not acknowledge this exception bundle.",
+    };
+  }
+  if (item.ack_status === "offline") {
+    return {
+      label: "Offline",
+      detail: "This device was offline when the signed bundle was issued.",
+    };
+  }
+  return { label: "Unknown", detail: "Local acknowledgement status is unavailable." };
+}
+
+export function PolicyCloudExceptionDetailPanel({
+  exception,
+  cloudControlsUrl,
+  onClose,
+}: PolicyCloudExceptionDetailPanelProps) {
+  const expiryTimestamp = resolveCloudExceptionExpiryTimestamp(exception);
+  const expiryValue = resolveCloudExceptionExpiryValue(exception);
+  const ackCopy = resolveAckCopy(exception);
+  const headline = resolveCloudExceptionHeadline(exception);
+
+  return (
+    <aside
+      className="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm"
+      aria-label="Cloud exception details"
+    >
+      <div className="mb-4 flex items-start justify-between gap-3">
+        <div>
+          <SectionLabel>Exception detail</SectionLabel>
+          <h3 className="mt-1 text-lg font-semibold text-brand-dark">{headline}</h3>
+        </div>
+        <button
+          type="button"
+          onClick={onClose}
+          className="rounded-lg p-1.5 text-slate-500 hover:bg-slate-100 hover:text-brand-dark"
+          aria-label="Close exception detail"
+        >
+          <HiMiniXMark className="h-5 w-5" aria-hidden="true" />
+        </button>
+      </div>
+
+      <div className="mb-4 flex flex-wrap gap-2">
+        <Badge tone="success">{exception.effect}</Badge>
+        <Badge tone="default">{scopeLabel(exception.scope)}</Badge>
+        {isCloudExceptionAckFailure(exception) ? <Badge tone="warning">{ackCopy.label}</Badge> : null}
+      </div>
+
+      <div className="space-y-4">
+        <PersonRow label="Owner" value={exception.owner} />
+        <PersonRow label="Approved by" value={exception.approver} />
+
+        <DetailField
+          label="Expiry"
+          value={
+            expiryTimestamp && expiryValue
+              ? `${expiryTimestamp.toLocaleString()} (${formatRelativeTime(expiryValue)})`
+              : expiryValue
+          }
+        />
+        <DetailField label="Harness" value={exception.harness} />
+        <DetailField label="Source receipt" value={exception.source_receipt_id} />
+        <DetailField label="Signed bundle hash" value={exception.bundle_hash} />
+        <DetailField
+          label="Last used"
+          value={exception.last_used_at ? formatRelativeTime(exception.last_used_at) : null}
+        />
+
+        <div className="rounded-xl border border-slate-100 bg-slate-50/80 p-3">
+          <p className="text-xs font-medium uppercase tracking-wide text-slate-500">Local daemon acknowledgement</p>
+          <p className="mt-1 text-sm font-medium text-brand-dark">{ackCopy.label}</p>
+          <p className="mt-1 text-sm text-slate-600">{ackCopy.detail}</p>
+          {isCloudExceptionAckFailure(exception) ? (
+            <p className="mt-2 text-xs text-slate-500">Run Guard sync to retry bundle acknowledgement.</p>
+          ) : null}
+        </div>
+      </div>
+
+      {cloudControlsUrl ? (
+        <div className="mt-5">
+          <a
+            href={cloudControlsUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="inline-flex items-center gap-1.5 text-sm font-medium text-brand-blue hover:underline"
+          >
+            <HiMiniCloudArrowUp className="h-4 w-4" aria-hidden="true" />
+            Open in Guard Cloud
+          </a>
+        </div>
+      ) : null}
+    </aside>
+  );
+}

{plugin_scanner-2.0.671 → plugin_scanner-2.0.673}/dashboard/src/policy-cloud-exceptions-boundary.test.ts

@@ -39,6 +39,10 @@ const POLICY_SOURCE_FILES = [
   "policy-remembered-rules-right-rail.tsx",
   "policy-cloud-exceptions-tab.tsx",
   "policy-cloud-exception-request-panel.tsx",
+  "policy-cloud-exceptions-utils.ts",
+  "policy-cloud-exceptions-summary.tsx",
+  "policy-cloud-exceptions-list.tsx",
+  "policy-cloud-exception-detail-panel.tsx",
 ];
 
 const FORBIDDEN_FIXTURE_PATTERNS = [
@@ -122,6 +126,7 @@ assert(guardApiSource.includes("savePolicyDecision"), "guard-api must expose sav
 assert(guardApiSource.includes("clearPolicy"), "guard-api must expose clearPolicy");
 assert(guardApiSource.includes("/v1/policy"), "guard-api must call /v1/policy endpoints");
 assert(guardApiSource.includes("fetchCloudExceptions"), "guard-api must expose fetchCloudExceptions");
+assert(guardApiSource.includes("fetchCloudExceptionRequests"), "guard-api must expose fetchCloudExceptionRequests");
 assert(guardApiSource.includes("createCloudExceptionRequest"), "guard-api must expose createCloudExceptionRequest");
 
 assert(boundaryDoc.includes("Remembered rules"), "boundary doc must define Remembered rules");

{plugin_scanner-2.0.671 → plugin_scanner-2.0.673}/dashboard/src/policy-cloud-exceptions-ia.test.tsx

@@ -24,6 +24,10 @@ assert(!workspaceSource.includes("PolicyExceptionForm"), "policy workspace no lo
 assert(!workspaceSource.includes("New exception"), "policy workspace removes local New exception copy");
 assert(tabSource.includes("Request cloud exception"), "cloud exceptions tab exposes request CTA");
 assert(tabSource.includes("PolicyCloudExceptionRequestPanel"), "cloud exceptions tab opens in-dashboard request panel");
+assert(tabSource.includes("fetchCloudExceptions"), "cloud exceptions tab loads synced exceptions");
+assert(tabSource.includes("PolicyCloudExceptionsSummary"), "cloud exceptions tab renders summary cards");
+assert(tabSource.includes("PolicyCloudExceptionDetailPanel"), "cloud exceptions tab renders detail panel");
+assert(tabSource.includes("PolicyCloudExceptionsList"), "cloud exceptions tab renders grouped lists");
 assert(tabSource.includes("Open Guard Cloud"), "cloud exceptions tab exposes Open Guard Cloud CTA");
 assert(tabSource.includes("Guard Cloud is not connected"), "disconnected Cloud copy present");
 assert(!pageSource.includes("add custom exceptions"), "page header removes local exception authoring copy");

plugin_scanner-2.0.673/dashboard/src/policy-cloud-exceptions-list.tsx

@@ -0,0 +1,199 @@
+import { useCallback, useMemo, useState } from "react";
+import type { ReactNode } from "react";
+import { HiMiniChevronDown, HiMiniChevronUp } from "react-icons/hi2";
+import { Badge, EmptyState, Tag } from "./approval-center-primitives";
+import { formatRelativeTime, scopeLabel } from "./approval-center-utils";
+import type { GuardCloudException } from "./guard-types";
+import type { GuardCloudExceptionRequestItem } from "./guard-api";
+import {
+  isCloudExceptionAckFailure,
+  parseCloudExceptionTimestamp,
+  resolveCloudExceptionHeadline,
+  resolveCloudExceptionExpiryTimestamp,
+  resolveCloudExceptionExpiryValue,
+  resolvePersonDisplayLabel,
+} from "./policy-cloud-exceptions-utils";
+
+type PolicyCloudExceptionsListProps = {
+  active: GuardCloudException[];
+  pending: GuardCloudExceptionRequestItem[];
+  expiringSoon: GuardCloudException[];
+  selectedExceptionId: string | null;
+  onSelectException: (exception: GuardCloudException) => void;
+  cloudConnected: boolean;
+};
+
+type GroupSectionProps = {
+  title: string;
+  description: string;
+  defaultOpen?: boolean;
+  children: React.ReactNode;
+};
+
+function GroupSection({ title, description, defaultOpen = true, children }: GroupSectionProps) {
+  const [open, setOpen] = useState(defaultOpen);
+  const handleToggle = useCallback(() => {
+    setOpen((current) => !current);
+  }, []);
+
+  return (
+    <section className="rounded-2xl border border-slate-100 bg-white shadow-sm">
+      <button
+        type="button"
+        onClick={handleToggle}
+        className="flex w-full items-start justify-between gap-3 px-4 py-3 text-left"
+        aria-expanded={open}
+      >
+        <div>
+          <h3 className="text-sm font-semibold text-brand-dark">{title}</h3>
+          <p className="mt-0.5 text-xs text-slate-500">{description}</p>
+        </div>
+        {open ? (
+          <HiMiniChevronUp className="mt-0.5 h-4 w-4 shrink-0 text-slate-400" aria-hidden="true" />
+        ) : (
+          <HiMiniChevronDown className="mt-0.5 h-4 w-4 shrink-0 text-slate-400" aria-hidden="true" />
+        )}
+      </button>
+      {open ? <div className="space-y-2 border-t border-slate-100 px-3 py-3">{children}</div> : null}
+    </section>
+  );
+}
+
+function ExceptionCard({
+  item,
+  selected,
+  onSelect,
+}: {
+  item: GuardCloudException;
+  selected: boolean;
+  onSelect: (item: GuardCloudException) => void;
+}) {
+  const handleSelect = useCallback(() => {
+    onSelect(item);
+  }, [item, onSelect]);
+
+  const expiryTimestamp = resolveCloudExceptionExpiryTimestamp(item);
+  const expiryValue = resolveCloudExceptionExpiryValue(item);
+  const headline = resolveCloudExceptionHeadline(item);
+
+  return (
+    <button
+      type="button"
+      onClick={handleSelect}
+      aria-pressed={selected}
+      className={`w-full rounded-xl border px-3.5 py-3 text-left transition ${
+        selected
+          ? "border-brand-blue/30 bg-brand-blue/[0.04] ring-1 ring-brand-blue/20"
+          : "border-slate-100 bg-white hover:border-brand-blue/20 hover:bg-brand-blue/[0.02]"
+      }`}
+    >
+      <div className="flex flex-wrap items-center gap-2">
+        <Badge tone="success">{item.effect}</Badge>
+        <Tag tone="slate">{scopeLabel(item.scope)}</Tag>
+        {isCloudExceptionAckFailure(item) ? <Badge tone="warning">Ack issue</Badge> : null}
+      </div>
+      <p className="mt-2 text-sm font-semibold text-brand-dark">{headline}</p>
+      <p className="mt-1 text-xs text-slate-500">
+        Owner {resolvePersonDisplayLabel(item.owner)}
+        {expiryTimestamp && expiryValue ? ` · expires ${formatRelativeTime(expiryValue)}` : null}
+      </p>
+    </button>
+  );
+}
+
+function PendingRequestCard({ item }: { item: GuardCloudExceptionRequestItem }) {
+  return (
+    <article className="rounded-xl border border-amber-100 bg-amber-50/40 px-3.5 py-3">
+      <div className="flex flex-wrap items-center gap-2">
+        <Badge tone="warning">Pending</Badge>
+        <Tag tone="slate">{scopeLabel(item.scope)}</Tag>
+      </div>
+      <p className="mt-2 text-sm font-semibold text-brand-dark">{item.reason}</p>
+      <p className="mt-1 text-xs text-slate-600">
+        Requested by {resolvePersonDisplayLabel(item.owner)} · expires{" "}
+        {formatRelativeTime(item.requestedExpiresAt)}
+      </p>
+    </article>
+  );
+}
+
+export function PolicyCloudExceptionsList({
+  active,
+  pending,
+  expiringSoon,
+  selectedExceptionId,
+  onSelectException,
+  cloudConnected,
+}: PolicyCloudExceptionsListProps) {
+  const expiringSoonIds = useMemo(() => new Set(expiringSoon.map((item) => item.id)), [expiringSoon]);
+  const activeWithoutExpiringGroup = useMemo(
+    () => active.filter((item) => !expiringSoonIds.has(item.id)),
+    [active, expiringSoonIds],
+  );
+
+  if (!cloudConnected) {
+    return null;
+  }
+
+  const hasAnyRows = active.length > 0 || pending.length > 0;
+
+  if (!hasAnyRows) {
+    return (
+      <EmptyState
+        title="No Cloud exceptions synced yet"
+        body="Approved Cloud risk acceptances will appear here after Guard Cloud syncs a signed policy bundle to this device."
+        tone="teach"
+      />
+    );
+  }
+
+  return (
+    <div className="space-y-3" role="list" aria-label="Cloud exception groups">
+      {activeWithoutExpiringGroup.length > 0 ? (
+        <GroupSection
+          title="Active on this device"
+          description="Synced Cloud risk acceptances currently enforced locally."
+          defaultOpen
+        >
+          {activeWithoutExpiringGroup.map((item) => (
+            <ExceptionCard
+              key={item.id}
+              item={item}
+              selected={selectedExceptionId === item.id}
+              onSelect={onSelectException}
+            />
+          ))}
+        </GroupSection>
+      ) : null}
+
+      {pending.length > 0 ? (
+        <GroupSection
+          title="Pending in Guard Cloud"
+          description="Requests waiting for Cloud approval before they can sync to this device."
+          defaultOpen
+        >
+          {pending.map((item) => (
+            <PendingRequestCard key={item.requestId} item={item} />
+          ))}
+        </GroupSection>
+      ) : null}
+
+      {expiringSoon.length > 0 ? (
+        <GroupSection
+          title="Expiring soon"
+          description="Active acceptances nearing expiry. Renew or revoke them in Guard Cloud."
+          defaultOpen
+        >
+          {expiringSoon.map((item) => (
+            <ExceptionCard
+              key={`expiring-${item.id}`}
+              item={item}
+              selected={selectedExceptionId === item.id}
+              onSelect={onSelectException}
+            />
+          ))}
+        </GroupSection>
+      ) : null}
+    </div>
+  );
+}

plugin_scanner-2.0.673/dashboard/src/policy-cloud-exceptions-summary.tsx

@@ -0,0 +1,72 @@
+type PolicyCloudExceptionsSummaryProps = {
+  activeCount: number;
+  pendingCount: number;
+  expiringSoonCount: number;
+  ackFailureCount: number;
+  loading?: boolean;
+};
+
+type SummaryTone = "blue" | "amber" | "attention" | "slate";
+
+const SUMMARY_TONE_CLASSES: Record<SummaryTone, string> = {
+  blue: "text-brand-blue",
+  amber: "text-amber-700",
+  attention: "text-brand-attention",
+  slate: "text-brand-dark",
+};
+
+function SummaryCard({
+  label,
+  value,
+  tone = "slate",
+}: {
+  label: string;
+  value: number;
+  tone?: SummaryTone;
+}) {
+  const toneClass = SUMMARY_TONE_CLASSES[tone];
+  return (
+    <div className="rounded-xl border border-slate-200/70 bg-white p-3 text-center shadow-sm">
+      <p className={`text-2xl font-semibold tabular-nums ${toneClass}`}>{value}</p>
+      <p className="mt-1 text-[10px] font-medium uppercase tracking-wider text-muted-foreground">{label}</p>
+    </div>
+  );
+}
+
+function SummarySkeleton() {
+  return (
+    <div className="grid grid-cols-2 gap-3 md:grid-cols-4">
+      {[0, 1, 2, 3].map((index) => (
+        <div
+          key={index}
+          className="h-[72px] animate-pulse rounded-xl border border-slate-200/70 bg-slate-100"
+          aria-hidden="true"
+        />
+      ))}
+    </div>
+  );
+}
+
+export function PolicyCloudExceptionsSummary({
+  activeCount,
+  pendingCount,
+  expiringSoonCount,
+  ackFailureCount,
+  loading = false,
+}: PolicyCloudExceptionsSummaryProps) {
+  if (loading) {
+    return <SummarySkeleton />;
+  }
+
+  return (
+    <div
+      className="grid grid-cols-2 gap-3 md:grid-cols-4"
+      aria-label="Cloud exception summary"
+    >
+      <SummaryCard label="Active synced" value={activeCount} tone="blue" />
+      <SummaryCard label="Pending approval" value={pendingCount} tone="amber" />
+      <SummaryCard label="Expiring soon" value={expiringSoonCount} tone="attention" />
+      <SummaryCard label="Local ack failures" value={ackFailureCount} tone="attention" />
+    </div>
+  );
+}