plugin-scanner 2.0.175__tar.gz → 2.0.177__tar.gz

{plugin_scanner-2.0.175 → plugin_scanner-2.0.177}/PKG-INFO

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

{plugin_scanner-2.0.175 → plugin_scanner-2.0.177}/dashboard/src/approval-center-primitives.tsx

@@ -16,6 +16,8 @@ import {
   HiMiniCheckCircle,
   HiMiniArrowRight,
   HiMiniExclamationTriangle,
+  HiMiniChevronDown,
+  HiMiniChevronUp,
 } from "react-icons/hi2";
 
 import { guardAwareHref } from "./guard-api";
@@ -237,7 +239,7 @@ export function Surface(props: {
   const toneClass = surfaceToneClass(props.tone);
   return (
     <section
-      className={`guard-surface-in rounded-[1.35rem] border shadow-sm p-5 sm:p-6 ${toneClass}${props.className ? ` ${props.className}` : ""}`}
+      className={`guard-surface-in rounded-xl border p-4 sm:p-5 ${toneClass}${props.className ? ` ${props.className}` : ""}`}
     >
       {props.children}
     </section>
@@ -296,8 +298,8 @@ export function EmptyState(props: {
 }) {
   const isTeach = props.tone === "teach";
   return (
-    <div className={`guard-surface-in flex flex-col items-center justify-center py-12 text-center sm:py-16 ${isTeach ? "rounded-[2rem] border border-brand-blue/15 bg-gradient-to-br from-white to-brand-blue/[0.03] px-6" : "rounded-lg bg-surface-1 px-6"}`}>
-      <div className={`mb-5 flex h-14 w-14 items-center justify-center rounded-full ${isTeach ? "bg-brand-blue/10" : "bg-white"} ring-1 ring-brand-blue/20`}>
+    <div className={`flex flex-col items-center justify-center py-12 text-center sm:py-16 ${isTeach ? "rounded-2xl border border-brand-blue/10 bg-gradient-to-br from-white to-brand-blue/[0.02] px-6" : "px-6"}`}>
+      <div className={`mb-5 flex h-14 w-14 items-center justify-center rounded-full ${isTeach ? "bg-brand-blue/10" : "bg-slate-100"}`}>
         <HiMiniInformationCircle className={`h-7 w-7 ${isTeach ? "text-brand-blue" : "text-slate-400"}`} aria-hidden="true" />
       </div>
       <h3 className="text-lg font-semibold tracking-tight text-brand-dark">{props.title}</h3>
@@ -472,12 +474,12 @@ function SidebarAction(props: { href: string; children: ReactNode; icon: ReactNo
 }
 
 function surfaceToneClass(tone: "default" | "accent" | "success" | "warning" | "danger" | "attention" | undefined): string {
-  if (tone === "accent") return "border-brand-blue/20 bg-gradient-to-b from-white to-blue-50/40";
-  if (tone === "success") return "border-brand-green/20 bg-brand-green-bg/30";
-  if (tone === "warning") return "border-brand-blue/25 bg-brand-blue/[0.04]";
-  if (tone === "danger") return "border-brand-purple/25 bg-brand-purple/[0.05]";
-  if (tone === "attention") return "border-brand-attention/20 bg-brand-attention-bg";
-  return "border-gray-200/50 bg-white/80";
+  if (tone === "accent") return "border-brand-blue/15 bg-gradient-to-b from-white to-blue-50/30";
+  if (tone === "success") return "border-brand-green/15 bg-brand-green-bg/20";
+  if (tone === "warning") return "border-brand-blue/20 bg-brand-blue/[0.03]";
+  if (tone === "danger") return "border-brand-purple/20 bg-brand-purple/[0.03]";
+  if (tone === "attention") return "border-brand-attention/15 bg-brand-attention-bg/60";
+  return "border-slate-100 bg-white/60";
 }
 
 function badgeToneClass(tone: "default" | "success" | "warning" | "info" | "destructive" | "attention" | undefined): string {
@@ -665,11 +667,10 @@ export function GuardHero(props: {
 
   return (
     <section
-      className={`guard-surface-in relative overflow-hidden rounded-[2rem] border border-brand-blue/15 ${bgClass} p-5 shadow-[0_20px_60px_rgba(63,65,116,0.08)] sm:p-6 lg:p-7`}
+      className={`guard-surface-in relative overflow-hidden rounded-2xl border border-brand-blue/10 ${bgClass} p-5 sm:p-6 lg:p-7`}
       role="region"
       aria-label="Protection status"
     >
-      <div className="pointer-events-none absolute right-10 top-8 h-24 w-24 rounded-full bg-brand-blue/20 blur-3xl" />
       <div className="relative space-y-4">
         <div className="flex flex-wrap items-center gap-2">
           <SectionLabel>Protection status</SectionLabel>
@@ -696,25 +697,19 @@ export function GuardHero(props: {
 }
 
 export function ProofStrip(props: {
-  items: Array<{ label: string; value: string | number; tone?: "blue" | "green" | "purple" | "slate"; icon?: ReactNode; pulse?: boolean; hint?: string }>;
+  items: Array<{ label: string; value: string | number; tone?: "blue" | "green" | "purple" | "slate"; icon?: ReactNode; hint?: string }>;
 }) {
   return (
-    <div className="guard-surface-in grid gap-3 sm:grid-cols-3">
-      {props.items.map((item) => (
-        <div
-          key={item.label}
-          className={`rounded-[1.25rem] border border-white/80 bg-white/80 px-4 py-3 shadow-sm ${item.pulse ? "guard-pulse" : ""}`}
-          title={item.hint}
-        >
-          <div className="flex items-center gap-2">
-            <p className="font-mono text-[10px] font-semibold uppercase tracking-[0.18em] text-muted-foreground">
-              {item.label}
-            </p>
-            {item.icon}
+    <div className="grid gap-x-8 gap-y-4 sm:grid-cols-2 lg:grid-cols-4">
+      {props.items.map((item) => {
+        const toneColor = item.tone === "blue" ? "text-brand-blue" : item.tone === "green" ? "text-emerald-600" : item.tone === "purple" ? "text-brand-purple" : "text-brand-dark";
+        return (
+          <div key={item.label} className="flex flex-col" title={item.hint}>
+            <p className="text-[11px] font-semibold uppercase tracking-wider text-slate-400">{item.label}</p>
+            <p className={`text-2xl font-semibold tracking-tight ${toneColor}`}>{item.value}</p>
           </div>
-          <p className="mt-1 text-2xl font-semibold tracking-tight text-brand-dark">{item.value}</p>
-        </div>
-      ))}
+        );
+      })}
     </div>
   );
 }
@@ -727,22 +722,162 @@ export function NextActionCard(props: {
 }) {
   const borderClass =
     props.tone === "green"
-      ? "border-brand-green/25"
+      ? "border-brand-green/20"
       : props.tone === "purple"
-      ? "border-brand-purple/25"
-      : "border-brand-blue/25";
+      ? "border-brand-purple/20"
+      : "border-brand-blue/20";
   const bgClass =
     props.tone === "green"
-      ? "bg-brand-green-bg/30"
+      ? "bg-brand-green-bg/20"
       : props.tone === "purple"
-      ? "bg-brand-purple/[0.04]"
-      : "bg-brand-blue/[0.04]";
+      ? "bg-brand-purple/[0.03]"
+      : "bg-brand-blue/[0.03]";
 
   return (
-    <div className={`guard-surface-in rounded-[1.75rem] border ${borderClass} ${bgClass} p-5 sm:p-6`}>
+    <div className={`rounded-xl border ${borderClass} ${bgClass} p-4 sm:p-5`}>
       <SectionLabel>{props.title}</SectionLabel>
       <p className="mt-2 text-sm leading-relaxed text-brand-dark/70">{props.body}</p>
       <div className="mt-4">{props.cta}</div>
     </div>
   );
 }
+
+export function SegmentedControl<T extends string>(props: {
+  options: Array<{ value: T; label: string }>;
+  value: T;
+  onChange: (value: T) => void;
+}) {
+  return (
+    <div className="inline-flex rounded-lg border border-slate-200 bg-slate-50 p-0.5">
+      {props.options.map((opt) => (
+        <button
+          key={opt.value}
+          type="button"
+          onClick={() => props.onChange(opt.value)}
+          className={`rounded-md px-2.5 py-1 text-xs font-medium transition-colors ${
+            props.value === opt.value
+              ? "bg-white text-brand-dark shadow-sm"
+              : "text-slate-500 hover:text-brand-dark"
+          }`}
+        >
+          {opt.label}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+export function ListRow(props: {
+  children: ReactNode;
+  accent?: "green" | "attention" | "blue" | "none";
+  onClick?: () => void;
+  href?: string;
+}) {
+  const accentClass =
+    props.accent === "green"
+      ? "border-l-2 border-emerald-500 pl-3"
+      : props.accent === "attention"
+      ? "border-l-2 border-brand-attention pl-3"
+      : props.accent === "blue"
+      ? "border-l-2 border-brand-blue pl-3"
+      : "pl-3.5";
+  const clickable = props.onClick !== undefined || props.href !== undefined;
+  const content = (
+    <div
+      className={`flex items-center gap-3 border-b border-slate-100 py-2.5 transition-colors hover:bg-slate-50/60 ${accentClass} ${
+        clickable ? "cursor-pointer" : ""
+      }`}
+      onClick={props.onClick}
+      role={clickable ? "button" : undefined}
+      tabIndex={clickable ? 0 : undefined}
+      onKeyDown={
+        clickable
+          ? (e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                props.onClick?.();
+              }
+            }
+          : undefined
+      }
+    >
+      {props.children}
+    </div>
+  );
+  if (props.href) {
+    return (
+      <a href={guardAwareHref(props.href)} className="block no-underline">
+        {content}
+      </a>
+    );
+  }
+  return content;
+}
+
+export function TabBar<T extends string>(props: {
+  tabs: Array<{ value: T; label: string }>;
+  active: T;
+  onChange: (value: T) => void;
+}) {
+  return (
+    <div className="flex gap-1 rounded-lg border border-slate-200 bg-slate-50 p-0.5">
+      {props.tabs.map((tab) => (
+        <button
+          key={tab.value}
+          type="button"
+          onClick={() => props.onChange(tab.value)}
+          className={`rounded-md px-3 py-1.5 text-sm font-medium transition-colors ${
+            props.active === tab.value
+              ? "bg-white text-brand-dark shadow-sm"
+              : "text-slate-500 hover:text-brand-dark"
+          }`}
+        >
+          {tab.label}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+export function AccordionSection(props: {
+  title: string;
+  subtitle?: string;
+  expanded: boolean;
+  onToggle: () => void;
+  children: ReactNode;
+}) {
+  return (
+    <div className="rounded-xl border border-slate-100 overflow-hidden">
+      <button
+        onClick={props.onToggle}
+        className="flex w-full items-center justify-between gap-3 px-4 py-3 text-left transition-colors hover:bg-slate-50/60"
+        aria-expanded={props.expanded}
+      >
+        <div>
+          <p className="text-sm font-semibold text-brand-dark">{props.title}</p>
+          {props.subtitle ? <p className="text-xs text-slate-400">{props.subtitle}</p> : null}
+        </div>
+        {props.expanded ? (
+          <HiMiniChevronUp className="h-4 w-4 text-slate-400" aria-hidden="true" />
+        ) : (
+          <HiMiniChevronDown className="h-4 w-4 text-slate-400" aria-hidden="true" />
+        )}
+      </button>
+      {props.expanded && (
+        <div className="border-t border-slate-100 px-4 py-4">
+          {props.children}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function StickyActionBar(props: {
+  children: ReactNode;
+}) {
+  return (
+    <div className="sticky bottom-4 z-30 rounded-xl border border-slate-200 bg-white/95 p-4 shadow-lg backdrop-blur">
+      {props.children}
+    </div>
+  );
+}

{plugin_scanner-2.0.175 → plugin_scanner-2.0.177}/dashboard/src/apps/app-detail-workspace.tsx

@@ -377,7 +377,7 @@ function AppOverviewTab(props: {
   return (
     <div className="grid gap-6 lg:grid-cols-[minmax(0,1.3fr)_minmax(0,0.9fr)]">
       <section className="space-y-6">
-        <div className="rounded-[1.75rem] border border-slate-200/70 bg-white/80 p-5 shadow-sm sm:p-6">
+        <div className="rounded-xl border border-slate-100 p-4 sm:p-5">
           <div className="flex items-center justify-between gap-3">
             <div>
               <SectionLabel>Status</SectionLabel>
@@ -428,7 +428,7 @@ function AppOverviewTab(props: {
         </div>
 
         {props.pendingItems.length > 0 && (
-          <div className="rounded-[1.75rem] border border-brand-blue/15 bg-brand-blue/[0.04] p-5 shadow-sm sm:p-6">
+          <div className="rounded-xl border border-brand-blue/10 bg-brand-blue/[0.03] p-4 sm:p-5">
             <SectionLabel>Pending review</SectionLabel>
             <p className="mt-2 text-sm text-muted-foreground">
               These actions from {harnessDisplayName(props.harness)} need your decision.
@@ -458,7 +458,7 @@ function AppOverviewTab(props: {
 
       <section className="space-y-6">
         {props.harnessReceipts.length > 0 && (
-          <div className="rounded-[1.75rem] border border-slate-200/70 bg-white/80 p-5 shadow-sm sm:p-6">
+          <div className="rounded-xl border border-slate-100 p-4 sm:p-5">
             <SectionLabel>Recent events</SectionLabel>
             <p className="mt-2 text-sm text-muted-foreground">
               What Guard decided recently.
@@ -490,7 +490,7 @@ function AppOverviewTab(props: {
         )}
 
         {props.harnessInventory.length > 0 && (
-          <div className="rounded-[1.75rem] border border-slate-200/70 bg-white/80 p-5 shadow-sm sm:p-6">
+          <div className="rounded-xl border border-slate-100 p-4 sm:p-5">
             <SectionLabel>Discovered items</SectionLabel>
             <p className="mt-2 text-sm text-muted-foreground">
               Tools and plugins Guard found in this app.
@@ -612,7 +612,7 @@ function AppActivityTab(props: {
   return (
     <div className="space-y-6">
       {props.queueError && (
-        <div className="guard-fade-in rounded-[1.75rem] border border-brand-attention/20 bg-brand-attention/[0.04] p-5 shadow-sm sm:p-6">
+        <div className="guard-fade-in rounded-xl border border-brand-attention/10 bg-brand-attention/[0.03] p-4 sm:p-5">
           <div className="flex items-start gap-3">
             <HiMiniExclamationTriangle className="mt-0.5 h-5 w-5 shrink-0 text-brand-attention" aria-hidden="true" />
             <div className="flex-1">
@@ -628,7 +628,7 @@ function AppActivityTab(props: {
           </div>
         </div>
       )}
-      <div className="rounded-[1.75rem] border border-slate-200/70 bg-white/80 p-5 shadow-sm sm:p-6">
+      <div className="rounded-xl border border-slate-100 p-4 sm:p-5">
         <div className="flex flex-wrap items-center gap-2">
           {(
             [
@@ -747,7 +747,7 @@ function AppActivityTab(props: {
 function ReceiptGroup({ title, items, selectedIds, onToggle }: { title: string; items: GuardReceipt[]; selectedIds: Set<string>; onToggle: (id: string) => void }) {
   if (items.length === 0) return null;
   return (
-    <div className="rounded-[1.75rem] border border-slate-200/70 bg-white/80 p-5 shadow-sm sm:p-6">
+    <div className="rounded-xl border border-slate-100 p-4 sm:p-5">
       <div className="flex items-center justify-between">
         <SectionLabel>{title}</SectionLabel>
         <span className="text-xs text-muted-foreground">{items.length} events</span>
@@ -866,7 +866,7 @@ function AppSettingsTab(props: {
     <div className="grid gap-6 lg:grid-cols-[minmax(0,1fr)_minmax(0,0.8fr)]">
       <div className="space-y-6">
         {props.policyError && (
-          <div className="guard-fade-in rounded-[1.75rem] border border-brand-attention/20 bg-brand-attention/[0.04] p-5 shadow-sm sm:p-6">
+          <div className="guard-fade-in rounded-xl border border-brand-attention/10 bg-brand-attention/[0.03] p-4 sm:p-5">
             <div className="flex items-start gap-3">
               <HiMiniExclamationTriangle className="mt-0.5 h-5 w-5 shrink-0 text-brand-attention" aria-hidden="true" />
               <div className="flex-1">
@@ -882,7 +882,7 @@ function AppSettingsTab(props: {
             </div>
           </div>
         )}
-        <div className="rounded-[1.75rem] border border-slate-200/70 bg-white/80 p-5 shadow-sm sm:p-6">
+        <div className="rounded-xl border border-slate-100 p-4 sm:p-5">
           <div className="flex items-center justify-between gap-3">
             <SectionLabel>Remembered decisions</SectionLabel>
             {props.harnessPolicies.length > 0 && props.onClearAppPolicies && (
@@ -937,7 +937,7 @@ function AppSettingsTab(props: {
 
         {/* Clear confirmation */}
         {showClearConfirm && (
-          <div ref={confirmRef} className="guard-fade-in rounded-[1.75rem] border border-brand-attention/20 bg-brand-attention/[0.04] p-5 shadow-sm sm:p-6">
+          <div ref={confirmRef} className="guard-fade-in rounded-xl border border-brand-attention/10 bg-brand-attention/[0.03] p-4 sm:p-5">
             <div className="flex items-start gap-3">
               <HiMiniExclamationTriangle className="mt-0.5 h-5 w-5 shrink-0 text-brand-attention" aria-hidden="true" />
               <div>
@@ -979,7 +979,7 @@ function AppSettingsTab(props: {
 
       <div className="space-y-6">
         {props.status === "needs_setup" && (
-          <div className="rounded-[1.75rem] border border-brand-attention/15 bg-brand-attention/[0.04] p-5 shadow-sm sm:p-6">
+          <div className="rounded-xl border border-brand-attention/10 bg-brand-attention/[0.03] p-4 sm:p-5">
             <div className="flex items-start gap-3">
               <HiMiniExclamationTriangle className="mt-0.5 h-5 w-5 shrink-0 text-brand-attention" />
               <div>
@@ -1026,7 +1026,7 @@ function ActivitySparkline({ receipts }: { receipts: GuardReceipt[] }) {
   const maxVal = Math.max(...data.map((d) => d.allowed + d.blocked), 1);
 
   return (
-    <div className="rounded-[1.75rem] border border-slate-200/70 bg-white/80 p-5 shadow-sm sm:p-6">
+    <div className="rounded-xl border border-slate-100 p-4 sm:p-5">
       <div className="flex items-center justify-between">
         <SectionLabel>Last 7 days</SectionLabel>
         <HiMiniChartBar className="h-4 w-4 text-slate-400" aria-hidden="true" />
@@ -1125,7 +1125,7 @@ function CloudValueBanner({
   cta: { label: string; href: string };
 }) {
   return (
-    <div className="rounded-[1.75rem] border border-brand-purple/15 bg-brand-purple/[0.04] p-5 shadow-sm sm:p-6">
+    <div className="rounded-xl border border-brand-purple/10 bg-brand-purple/[0.03] p-4 sm:p-5">
       <div className="flex items-start gap-3">
         <div className="mt-0.5 shrink-0">{icon}</div>
         <div className="flex-1">

plugin_scanner-2.0.177/dashboard/src/fleet-workspace.tsx

@@ -0,0 +1,210 @@
+import { useCallback } from "react";
+import {
+  HiMiniCheckCircle,
+  HiMiniExclamationCircle,
+  HiMiniWrenchScrewdriver,
+  HiMiniXCircle,
+  HiMiniChevronRight,
+} from "react-icons/hi2";
+import {
+  ActionButton,
+  EmptyState,
+  SectionLabel,
+  Tag,
+  GuardHero,
+  ProofStrip,
+} from "./approval-center-primitives";
+import { harnessDisplayName } from "./approval-center-utils";
+import type { GuardInventoryItem, GuardPolicyDecision, GuardReceipt, GuardRuntimeSnapshot } from "./guard-types";
+
+type FleetWorkspaceProps = {
+  runtime: GuardRuntimeSnapshot;
+  policies: GuardPolicyDecision[];
+  inventory:
+    | { kind: "idle" }
+    | { kind: "loading" }
+    | { kind: "error"; message: string }
+    | { kind: "ready"; items: GuardInventoryItem[] };
+  onConnectHarness?: (harness: string) => void;
+  onTestHarness?: (harness: string) => void;
+  onRepairHarness?: (harness: string) => void;
+  onOpenAppDetail?: (harness: string) => void;
+};
+
+function collectHarnesses(snapshot: GuardRuntimeSnapshot): string[] {
+  const harnesses = new Set<string>();
+  for (const item of snapshot.items) harnesses.add(item.harness);
+  for (const receipt of snapshot.latest_receipts) harnesses.add(receipt.harness);
+  return Array.from(harnesses).sort((a, b) => a.localeCompare(b));
+}
+
+function renderReceiptContext(receipt: GuardReceipt): string {
+  return `${harnessDisplayName(receipt.harness)} · ${receipt.policy_decision.replace(/-/g, " ")}`;
+}
+
+type AppStatus = "protected" | "found_unprotected" | "needs_repair" | "not_found";
+
+function resolveAppStatus(
+  install: { active?: boolean } | undefined,
+  hasInventory: boolean,
+  hasReceipts: boolean
+): AppStatus {
+  if (install !== undefined) {
+    if (install.active) return "protected";
+    return "needs_repair";
+  }
+  if (!hasInventory && !hasReceipts) return "not_found";
+  return "found_unprotected";
+}
+
+function StatusIcon({ status }: { status: AppStatus }) {
+  if (status === "protected") return <HiMiniCheckCircle className="h-4 w-4 text-emerald-500" aria-hidden="true" />;
+  if (status === "found_unprotected") return <HiMiniExclamationCircle className="h-4 w-4 text-brand-attention" aria-hidden="true" />;
+  if (status === "needs_repair") return <HiMiniWrenchScrewdriver className="h-4 w-4 text-brand-purple" aria-hidden="true" />;
+  return <HiMiniXCircle className="h-4 w-4 text-slate-300" aria-hidden="true" />;
+}
+
+function StatusBadge({ status }: { status: AppStatus }) {
+  if (status === "protected") return <span className="text-xs font-medium text-emerald-600">Protected</span>;
+  if (status === "found_unprotected") return <span className="text-xs font-medium text-brand-attention">Found, not installed</span>;
+  if (status === "needs_repair") return <span className="text-xs font-medium text-brand-purple">Repair needed</span>;
+  return <span className="text-xs text-slate-400">Not found</span>;
+}
+
+export function FleetWorkspace(props: FleetWorkspaceProps) {
+  const harnesses = collectHarnesses(props.runtime);
+  const managedInstalls = props.runtime.managed_installs ?? [];
+  const activeInstalls = managedInstalls.filter((i) => i.active);
+  const inventory = props.inventory.kind === "ready" ? props.inventory.items : [];
+  const visibleHarnesses = Array.from(
+    new Set([
+      ...managedInstalls.map((i) => i.harness),
+      ...harnesses,
+      ...inventory.map((i) => i.harness),
+      ...props.policies.map((p) => p.harness),
+    ])
+  ).sort((a, b) => a.localeCompare(b));
+  const runtimeState = props.runtime.runtime_state;
+  const receiptHarnesses = new Set(props.runtime.latest_receipts.map((r) => r.harness));
+
+  return (
+    <div className="space-y-8">
+      <GuardHero
+        status={activeInstalls.length > 0 ? "clear" : "setup_gap"}
+        headline={activeInstalls.length > 0 ? "Your apps are covered" : "Connect an app to start"}
+        subheadline={
+          activeInstalls.length > 0
+            ? "Confirm that Guard is running and protecting your local AI apps."
+            : "Guard works with Codex, Claude Code, Cursor, Hermes, OpenClaw, and more."
+        }
+        cta={<ActionButton href={props.runtime.fleet_url}>Open Cloud Devices</ActionButton>}
+        secondaryCta={
+          <ActionButton href={props.runtime.dashboard_url} variant="outline">
+            Open Home
+          </ActionButton>
+        }
+      />
+
+      <ProofStrip
+        items={[
+          { label: "Needs review", value: `${props.runtime.pending_count}`, tone: props.runtime.pending_count > 0 ? "blue" : "slate" },
+          { label: "History", value: `${props.runtime.receipt_count}`, tone: "purple" },
+          { label: "Watched apps", value: `${activeInstalls.length > 0 ? activeInstalls.length : visibleHarnesses.length}`, tone: activeInstalls.length > 0 ? "green" : "slate" },
+          { label: "Runtime", value: runtimeState ? "active" : "offline", tone: runtimeState ? "green" : "slate" },
+        ]}
+      />
+
+      <div className="grid gap-8 lg:grid-cols-[minmax(0,1.4fr)_minmax(0,0.8fr)]">
+        <section>
+          <div className="mb-4">
+            <SectionLabel>App coverage</SectionLabel>
+            <p className="mt-1 text-sm text-slate-500">Which apps Guard is watching on this machine.</p>
+          </div>
+
+          {visibleHarnesses.length > 0 ? (
+            <div className="divide-y divide-slate-100 border-t border-slate-100">
+              {visibleHarnesses.map((harness) => {
+                const install = managedInstalls.find((i) => i.harness === harness);
+                const harnessInventory = inventory.filter((i) => i.harness === harness && i.present);
+                const harnessPolicies = props.policies.filter((p) => p.harness === harness);
+                const hasReceipts = receiptHarnesses.has(harness);
+                const status = resolveAppStatus(install, harnessInventory.length > 0, hasReceipts);
+                const isClickable = props.onOpenAppDetail !== undefined;
+
+                return (
+                  <div
+                    key={harness}
+                    className={`flex items-center justify-between gap-3 py-3 transition-colors ${
+                      isClickable ? "cursor-pointer hover:bg-slate-50/60" : ""
+                    }`}
+                    onClick={isClickable ? () => props.onOpenAppDetail?.(harness) : undefined}
+                    role={isClickable ? "button" : undefined}
+                    tabIndex={isClickable ? 0 : undefined}
+                    onKeyDown={
+                      isClickable
+                        ? (e) => {
+                            if (e.key === "Enter" || e.key === " ") {
+                              e.preventDefault();
+                              props.onOpenAppDetail?.(harness);
+                            }
+                          }
+                        : undefined
+                    }
+                  >
+                    <div className="flex min-w-0 items-center gap-3">
+                      <StatusIcon status={status} />
+                      <div className="min-w-0">
+                        <p className="text-sm font-medium text-brand-dark">{harnessDisplayName(harness)}</p>
+                        <p className="text-xs text-slate-400">
+                          {harnessInventory.length} actions · {harnessPolicies.length} decisions
+                        </p>
+                      </div>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <StatusBadge status={status} />
+                      {isClickable && <HiMiniChevronRight className="h-4 w-4 text-slate-300" aria-hidden="true" />}
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          ) : (
+            <EmptyState
+              title="No watched apps yet"
+              body="Run HOL Guard once with Codex, Claude Code, Cursor, Hermes, or another supported app and this machine will show coverage here."
+              tone="teach"
+            />
+          )}
+
+          {props.inventory.kind === "error" ? (
+            <p className="mt-3 text-xs text-slate-500">{props.inventory.message}</p>
+          ) : null}
+        </section>
+
+        <section>
+          <div className="mb-4">
+            <SectionLabel>Recent choices</SectionLabel>
+            <p className="mt-1 text-sm text-slate-500">What Guard decided recently.</p>
+          </div>
+          {props.runtime.latest_receipts.length > 0 ? (
+            <div className="space-y-0 divide-y divide-slate-100 border-t border-slate-100">
+              {props.runtime.latest_receipts.slice(0, 6).map((receipt) => (
+                <div key={receipt.receipt_id} className="py-2.5">
+                  <p className="truncate text-sm font-medium text-brand-dark">
+                    {receipt.artifact_name ?? receipt.artifact_id}
+                  </p>
+                  <p className="text-xs text-slate-400">{renderReceiptContext(receipt)}</p>
+                </div>
+              ))}
+            </div>
+          ) : (
+            <EmptyState
+              title="No choices yet"
+              body="Allow or block an action once and HOL Guard will start building local history for this machine."
+            />
+          )}
+        </section>
+      </div>
+    </div>
+  );
+}