plugin-scanner 2.0.562__tar.gz → 2.0.564__tar.gz

{plugin_scanner-2.0.562 → plugin_scanner-2.0.564}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: plugin-scanner
-Version: 2.0.562
+Version: 2.0.564
 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.564/dashboard/src/scsr-phase09h-hero-cards.test.ts

@@ -0,0 +1,141 @@
+import { normalizeSupplyChainAuditSnapshot } from "./supply-chain-audit-normalize";
+import { resolveSupplyChainWorkspaceHero } from "./supply-chain-workspace-hero-state";
+import type { GuardRuntimeSnapshot, PackageShimEntry } from "./guard-types";
+
+function assert(condition: boolean, message: string): void {
+  if (!condition) {
+    throw new Error(message);
+  }
+}
+
+const baseSnapshot: GuardRuntimeSnapshot = {
+  generated_at: new Date().toISOString(),
+  approval_center_url: null,
+  runtime_state: {},
+  device: {
+    installation_id: "install-1",
+    device_label: "Test Machine",
+    local_registered: false,
+  },
+  latest_connect_state: null,
+  proof_status: {
+    state: "not_connected",
+    label: "Not connected",
+    detail: "",
+    request_id: null,
+    pairing_completed_at: null,
+    first_synced_at: null,
+    receipts_stored: 0,
+    inventory_items: 0,
+    runtime_session_id: null,
+    runtime_session_synced_at: null,
+  },
+  pending_count: 0,
+  receipt_count: 0,
+  headline_state: "local_only",
+  headline_label: "Local only",
+  headline_detail: "",
+  sync_configured: false,
+  cloud_state: "local_only",
+  cloud_state_label: "On this device only",
+  cloud_state_detail: "",
+  cloud_pairing_state: {
+    state: "local_only",
+    label: "Local only",
+    detail: "",
+    sync_configured: false,
+    dashboard_url: "",
+    inbox_url: "",
+    fleet_url: "",
+    connect_url: "",
+  },
+  cloud_sync_health: {
+    state: "healthy",
+    label: "Healthy",
+    detail: "",
+    pending_events: 0,
+    last_synced_at: null,
+    next_retry_after: null,
+  },
+  dashboard_url: "",
+  inbox_url: "",
+  fleet_url: "",
+  connect_url: "",
+  items: [],
+  latest_receipts: [],
+  managed_installs: [],
+  supply_chain: undefined,
+};
+
+const localHero = resolveSupplyChainWorkspaceHero(baseSnapshot);
+assert(localHero.cloudMode === "local_only", "SCSR151: local-only cloud mode surfaces in hero");
+assert(localHero.title.length > 0, "SCSR151: hero title resolves");
+
+const pairedHero = resolveSupplyChainWorkspaceHero({
+  ...baseSnapshot,
+  cloud_state: "paired_active",
+  cloud_state_label: "Connected",
+  supply_chain: {
+    package_manager_protection: {
+      path_status: "in_path",
+      path_contains_shim_dir: true,
+      restart_shell_required: false,
+      shell_profile_configured: true,
+      shell_profile_path: null,
+      shim_dir: "/shims",
+      supported_managers: ["npm"],
+      installed_managers: ["npm"],
+      active_managers: ["npm"],
+      missing_shims: [],
+      protected_managers: ["npm"],
+      unprotected_managers: [],
+    },
+  },
+});
+assert(pairedHero.cloudMode === "paired_active", "SCSR151-B: paired active cloud mode surfaces in hero");
+assert(pairedHero.protectionStatus === "protected", "SCSR151-B: protected state surfaces in hero");
+
+const shim: PackageShimEntry = {
+  active: true,
+  activation_state: "protected",
+  detected: true,
+  installed: true,
+  integrity: "ok",
+  last_intercept_proof_at: "2026-06-09T12:00:00.000Z",
+  manager: "npm",
+  path_broken: false,
+  path_index: 0,
+  path_summary: "/shims/npm",
+  real_binary_found: true,
+  real_binary_path: "/usr/bin/npm",
+  real_binary_path_index: 1,
+  shim_path: "/shims/npm",
+  tested: true,
+};
+
+assert(shim.detected && shim.installed && shim.tested, "SCSR152: manager card truth fields available from shim");
+
+const auditSnapshot = normalizeSupplyChainAuditSnapshot(
+  {
+    generated_at: "2026-06-09T12:00:00.000Z",
+    source: "local",
+    inventory: { total_packages: 1, direct_package_count: 1, transitive_package_count: 0, sbom_package_count: 0 },
+    evaluation: {
+      decision: "warn",
+      packages: [
+        {
+          name: "left-pad",
+          ecosystem: "npm",
+          namespace: null,
+          decision: "warn",
+          reasons: [{ code: "outdated", message: "Outdated", severity: "medium" }],
+          status: "known",
+        },
+      ],
+    },
+  },
+  "receipt-audit-local",
+);
+assert(auditSnapshot !== null && auditSnapshot.findings.length === 1, "SCSR153: audit findings normalize for summary panel");
+
+console.log("scsr-phase09h-hero-cards.test.ts: all assertions passed");

plugin_scanner-2.0.564/dashboard/src/supply-chain-audit-findings-summary.tsx

@@ -0,0 +1,189 @@
+import { useMemo } from "react";
+import { HiMiniBugAnt, HiMiniExclamationTriangle } from "react-icons/hi2";
+import { SectionLabel, Tag, EmptyState, ActionButton } from "./approval-center-primitives";
+import { formatRelativeTime } from "./approval-center-utils";
+import type { SupplyChainAuditFinding, SupplyChainAuditSnapshot } from "./guard-types";
+
+type SupplyChainAuditFindingsSummaryProps = {
+  auditSnapshot: SupplyChainAuditSnapshot | null;
+  auditRunning: boolean;
+  onRunAudit?: () => void;
+};
+
+const decisionPriority: Record<string, number> = {
+  block: 0,
+  ask: 1,
+  warn: 2,
+  monitor: 3,
+  allow: 4,
+};
+
+const severityPriority: Record<string, number> = {
+  critical: 0,
+  high: 1,
+  medium: 2,
+  low: 3,
+  unknown: 4,
+};
+
+function sortFindings(findings: SupplyChainAuditFinding[]): SupplyChainAuditFinding[] {
+  return [...findings].sort((left, right) => {
+    const decisionDelta =
+      (decisionPriority[left.decision] ?? 9) - (decisionPriority[right.decision] ?? 9);
+    if (decisionDelta !== 0) {
+      return decisionDelta;
+    }
+    return (severityPriority[left.severity] ?? 9) - (severityPriority[right.severity] ?? 9);
+  });
+}
+
+function countByDecision(findings: SupplyChainAuditFinding[]): {
+  block: number;
+  warn: number;
+  ask: number;
+  monitor: number;
+  allow: number;
+} {
+  return findings.reduce(
+    (counts, finding) => {
+      if (finding.decision === "block") {
+        counts.block += 1;
+      } else if (finding.decision === "warn") {
+        counts.warn += 1;
+      } else if (finding.decision === "ask") {
+        counts.ask += 1;
+      } else if (finding.decision === "monitor") {
+        counts.monitor += 1;
+      } else if (finding.decision === "allow") {
+        counts.allow += 1;
+      }
+      return counts;
+    },
+    { block: 0, warn: 0, ask: 0, monitor: 0, allow: 0 },
+  );
+}
+
+type FindingSummaryRowProps = {
+  finding: SupplyChainAuditFinding;
+};
+
+function findingDecisionTone(
+  decision: SupplyChainAuditFinding["decision"],
+): "destructive" | "attention" | "warning" | "default" {
+  if (decision === "block") {
+    return "destructive";
+  }
+  if (decision === "ask") {
+    return "attention";
+  }
+  if (decision === "warn") {
+    return "warning";
+  }
+  return "default";
+}
+
+function FindingSummaryRow({ finding }: FindingSummaryRowProps) {
+  const tone = findingDecisionTone(finding.decision);
+
+  return (
+    <div className="flex min-w-0 items-center justify-between gap-3 border-b border-slate-100 px-4 py-2.5 last:border-b-0">
+      <div className="min-w-0">
+        <p className="truncate text-sm font-medium text-brand-dark">{finding.packageName}</p>
+        <p className="truncate text-xs text-slate-500">{finding.ecosystem}</p>
+      </div>
+      <div className="flex shrink-0 items-center gap-1.5">
+        <Tag tone={tone}>{finding.decision}</Tag>
+        <Tag tone="default">{finding.severity}</Tag>
+      </div>
+    </div>
+  );
+}
+
+export function SupplyChainAuditFindingsSummary({
+  auditSnapshot,
+  auditRunning,
+  onRunAudit,
+}: SupplyChainAuditFindingsSummaryProps) {
+  const topFindings = useMemo(() => {
+    if (auditSnapshot === null) {
+      return [];
+    }
+    return sortFindings(auditSnapshot.findings).slice(0, 5);
+  }, [auditSnapshot]);
+
+  const counts = useMemo(() => {
+    if (auditSnapshot === null) {
+      return { block: 0, warn: 0, ask: 0, monitor: 0, allow: 0 };
+    }
+    return countByDecision(auditSnapshot.findings);
+  }, [auditSnapshot]);
+
+  return (
+    <section
+      className="overflow-hidden rounded-2xl border border-slate-100 bg-white shadow-sm"
+      aria-label="Local audit findings"
+      data-testid="supply-chain-audit-findings"
+    >
+      <div className="border-b border-slate-100 px-4 py-3">
+        <SectionLabel>Audit findings</SectionLabel>
+        <p className="mt-1 text-sm leading-relaxed text-slate-500">
+          Packages flagged the last time Guard audited this workspace.
+        </p>
+        {auditSnapshot !== null ? (
+          <p className="mt-2 text-xs text-slate-500">
+            Last audit {formatRelativeTime(auditSnapshot.generatedAt)}
+            {auditSnapshot.source ? ` · ${auditSnapshot.source} intel` : ""}
+          </p>
+        ) : null}
+      </div>
+
+      {auditSnapshot === null ? (
+        <div className="px-4 py-4">
+          <EmptyState
+            title={auditRunning ? "Audit running" : "No audit findings yet"}
+            body={
+              auditRunning
+                ? "Guard is scanning installed packages on this device."
+                : "Run an audit from the firewall panel to see package risks here."
+            }
+            tone="teach"
+            action={
+              auditRunning || onRunAudit === undefined ? undefined : (
+                <ActionButton variant="primary" onClick={onRunAudit}>
+                  Run audit
+                </ActionButton>
+              )
+            }
+          />
+        </div>
+      ) : topFindings.length === 0 ? (
+        <div className="px-4 py-4">
+          <EmptyState
+            title="No risky packages found"
+            body="The last audit did not flag packages that need action on this device."
+          />
+        </div>
+      ) : (
+        <>
+          <div className="flex flex-wrap gap-2 border-b border-slate-100 px-4 py-3">
+            {counts.block > 0 ? (
+              <Tag tone="destructive">
+                <HiMiniExclamationTriangle className="mr-1 inline h-3.5 w-3.5" aria-hidden="true" />
+                {counts.block} block
+              </Tag>
+            ) : null}
+            {counts.ask > 0 ? <Tag tone="attention">{counts.ask} ask</Tag> : null}
+            {counts.warn > 0 ? <Tag tone="warning">{counts.warn} warn</Tag> : null}
+            {counts.monitor > 0 ? <Tag tone="info">{counts.monitor} monitor</Tag> : null}
+            {counts.allow > 0 ? <Tag tone="green">{counts.allow} allow</Tag> : null}
+            <Tag tone="default">
+              <HiMiniBugAnt className="mr-1 inline h-3.5 w-3.5" aria-hidden="true" />
+              {auditSnapshot.findings.length} total
+            </Tag>
+          </div>
+          <div>{topFindings.map((finding) => <FindingSummaryRow key={finding.id} finding={finding} />)}</div>
+        </>
+      )}
+    </section>
+  );
+}

{plugin_scanner-2.0.562 → plugin_scanner-2.0.564}/dashboard/src/supply-chain-firewall-controls.tsx

@@ -16,6 +16,7 @@ import {
 } from "./supply-chain-firewall-views";
 import { resolvePackageFirewallNextAction } from "./supply-chain-firewall-next-action";
 import { ManagerRow, resolveShimStatus } from "./supply-chain-firewall-manager-row";
+import { SupplyChainManagerCards } from "./supply-chain-manager-cards";
 
 export type FirewallOpKey = PackageFirewallActionType | "audit" | "sync";
 
@@ -220,6 +221,13 @@ export function FirewallControlsView({
         protection={data.protection}
       />
 
+      <SupplyChainManagerCards
+        managers={
+          data.supported_managers.length > 0 ? data.supported_managers : data.detected_managers
+        }
+        shims={data.package_shims}
+      />
+
       {lastFailed !== null && <FailureBanner failed={lastFailed} />}
 
       {lastCompleted !== null && (

plugin_scanner-2.0.564/dashboard/src/supply-chain-manager-cards.tsx

@@ -0,0 +1,110 @@
+import {
+  HiMiniBeaker,
+  HiMiniCheckCircle,
+  HiMiniClock,
+  HiMiniExclamationTriangle,
+  HiMiniMagnifyingGlass,
+} from "react-icons/hi2";
+import { formatRelativeTime } from "./approval-center-utils";
+import { Tag } from "./approval-center-primitives";
+import type { PackageShimEntry } from "./guard-types";
+import { resolveShimStatus } from "./supply-chain-firewall-manager-row";
+
+type SupplyChainManagerCardsProps = {
+  managers: string[];
+  shims: PackageShimEntry[];
+};
+
+type ManagerCardProps = {
+  manager: string;
+  shim: PackageShimEntry | undefined;
+};
+
+function testedLabel(shim: PackageShimEntry | undefined): { label: string; tone: "green" | "slate" | "attention" } {
+  if (shim === undefined || !shim.installed) {
+    return { label: "Not protected yet", tone: "attention" };
+  }
+  if (shim.last_intercept_proof_at != null) {
+    return {
+      label: `Tested ${formatRelativeTime(shim.last_intercept_proof_at)}`,
+      tone: "green",
+    };
+  }
+  if (shim.tested) {
+    return { label: "Test recorded", tone: "green" };
+  }
+  return { label: "Not tested yet", tone: "slate" };
+}
+
+function ManagerCard({ manager, shim }: ManagerCardProps) {
+  const status = resolveShimStatus(shim);
+  const tested = testedLabel(shim);
+
+  return (
+    <article
+      className="min-w-0 rounded-xl border border-slate-100 bg-white p-4 shadow-sm"
+      data-testid={`supply-chain-manager-card-${manager}`}
+    >
+      <div className="flex items-start justify-between gap-2">
+        <p className="truncate font-mono text-sm font-semibold text-brand-dark">{manager}</p>
+        <Tag tone={status.tone}>{status.label}</Tag>
+      </div>
+      <dl className="mt-3 space-y-2 text-xs text-slate-600">
+        <div className="flex items-center gap-2">
+          <dt className="sr-only">Detected</dt>
+          <HiMiniMagnifyingGlass className="h-3.5 w-3.5 shrink-0 text-slate-400" aria-hidden="true" />
+          <dd>{shim?.detected ? "Detected on this device" : "Not detected on PATH"}</dd>
+        </div>
+        <div className="flex items-center gap-2">
+          <dt className="sr-only">Protected</dt>
+          {status.tone === "green" ? (
+            <HiMiniCheckCircle className="h-3.5 w-3.5 shrink-0 text-brand-green" aria-hidden="true" />
+          ) : (
+            <HiMiniExclamationTriangle className="h-3.5 w-3.5 shrink-0 text-brand-attention" aria-hidden="true" />
+          )}
+          <dd>
+            {shim?.installed
+              ? status.label
+              : "Install protection to block risky package commands"}
+          </dd>
+        </div>
+        <div className="flex items-center gap-2">
+          <dt className="sr-only">Tested</dt>
+          {tested.tone === "green" ? (
+            <HiMiniBeaker className="h-3.5 w-3.5 shrink-0 text-brand-green" aria-hidden="true" />
+          ) : (
+            <HiMiniClock className="h-3.5 w-3.5 shrink-0 text-slate-400" aria-hidden="true" />
+          )}
+          <dd className={tested.tone === "attention" ? "text-brand-attention" : undefined}>{tested.label}</dd>
+        </div>
+      </dl>
+    </article>
+  );
+}
+
+export function SupplyChainManagerCards({ managers, shims }: SupplyChainManagerCardsProps) {
+  if (managers.length === 0) {
+    return null;
+  }
+
+  return (
+    <section
+      className="space-y-3"
+      aria-label="Package tool status cards"
+      data-testid="supply-chain-manager-cards"
+    >
+      <div>
+        <h3 className="text-sm font-semibold text-brand-dark">Package tools on this device</h3>
+        <p className="mt-0.5 text-xs leading-relaxed text-slate-500">
+          Detected, protected, and tested status for each manager Guard can watch.
+        </p>
+      </div>
+      <div className="grid min-w-0 gap-3 sm:grid-cols-2 xl:grid-cols-3">
+        {managers.map((manager) => {
+          const shim = shims.find((entry) => entry.manager === manager);
+          return <ManagerCard key={manager} manager={manager} shim={shim} />;
+        })}
+      </div>
+    </section>
+  );
+}

plugin_scanner-2.0.564/dashboard/src/supply-chain-workspace-hero-state.ts

@@ -0,0 +1,98 @@
+import { resolveHomeProtectionStatus, type HomeProtectionStatus } from "./home-protection-module";
+import type { GuardRuntimeSnapshot } from "./guard-types";
+import { buildSupplyChainStats } from "./supply-chain-protection-stats";
+
+export type SupplyChainWorkspaceHeroState = {
+  cloudMode: GuardRuntimeSnapshot["cloud_state"];
+  cloudLabel: string;
+  protectionStatus: HomeProtectionStatus;
+  title: string;
+  detail: string;
+  tone: "green" | "blue" | "attention" | "slate";
+  statLine: string;
+};
+
+function protectionTitle(status: HomeProtectionStatus): string {
+  if (status === "protected") {
+    return "Package installs are protected on this device";
+  }
+  if (status === "partial") {
+    return "Protection is only partly set up";
+  }
+  if (status === "staged") {
+    return "Finish setup in a new terminal";
+  }
+  if (status === "unprotected") {
+    return "Package installs are not protected yet";
+  }
+  return "Checking package protection on this device";
+}
+
+function protectionDetail(
+  snapshot: GuardRuntimeSnapshot,
+  status: HomeProtectionStatus,
+): string {
+  const protection = snapshot.supply_chain?.package_manager_protection;
+  if (status === "protected" && protection) {
+    return `${protection.protected_managers.length} package tool${
+      protection.protected_managers.length === 1 ? "" : "s"
+    } active. Guard can block risky installs before they run.`;
+  }
+  if (status === "partial" && protection) {
+    return `${protection.unprotected_managers.length} tool${
+      protection.unprotected_managers.length === 1 ? "" : "s"
+    } still open: ${protection.unprotected_managers.join(", ")}.`;
+  }
+  if (status === "staged") {
+    return "Guard updated your shell profile. Open a new terminal, then run a protection test.";
+  }
+  if (status === "unprotected") {
+    return "Turn on protection for npm, pip, and other tools in the firewall panel below.";
+  }
+  return "Refresh status after installing package tools on this machine.";
+}
+
+function protectionTone(status: HomeProtectionStatus): SupplyChainWorkspaceHeroState["tone"] {
+  if (status === "protected") {
+    return "green";
+  }
+  if (status === "staged") {
+    return "blue";
+  }
+  if (status === "partial" || status === "unprotected") {
+    return "attention";
+  }
+  return "slate";
+}
+
+function cloudLabel(snapshot: GuardRuntimeSnapshot): string {
+  const label = snapshot.cloud_state_label ?? "";
+  if (snapshot.cloud_state === "paired_active") {
+    return label.trim().length > 0 ? label : "Guard Cloud connected";
+  }
+  if (snapshot.cloud_state === "paired_waiting") {
+    return label.trim().length > 0 ? label : "Pairing in progress";
+  }
+  return label.trim().length > 0 ? label : "On this device only";
+}
+
+export function resolveSupplyChainWorkspaceHero(
+  snapshot: GuardRuntimeSnapshot,
+): SupplyChainWorkspaceHeroState {
+  const protectionStatus = resolveHomeProtectionStatus(snapshot);
+  const stats = buildSupplyChainStats(snapshot);
+  const preventedLabel =
+    stats.preventedInstalls > 0
+      ? `${stats.preventedInstalls} blocked install${stats.preventedInstalls === 1 ? "" : "s"}`
+      : "No blocked installs yet";
+
+  return {
+    cloudMode: snapshot.cloud_state,
+    cloudLabel: cloudLabel(snapshot),
+    protectionStatus,
+    title: protectionTitle(protectionStatus),
+    detail: protectionDetail(snapshot, protectionStatus),
+    tone: protectionTone(protectionStatus),
+    statLine: `${stats.protectedManagers} protected · ${stats.unprotectedManagers} open · ${preventedLabel}`,
+  };
+}

plugin_scanner-2.0.564/dashboard/src/supply-chain-workspace-hero.tsx

@@ -0,0 +1,94 @@
+import {
+  HiMiniCheckCircle,
+  HiMiniCloud,
+  HiMiniComputerDesktop,
+  HiMiniExclamationTriangle,
+  HiMiniArrowPath,
+} from "react-icons/hi2";
+import type { SupplyChainWorkspaceHeroState } from "./supply-chain-workspace-hero-state";
+import { Tag } from "./approval-center-primitives";
+
+type SupplyChainWorkspaceHeroProps = {
+  hero: SupplyChainWorkspaceHeroState;
+};
+
+function heroSurfaceClass(tone: SupplyChainWorkspaceHeroState["tone"]): string {
+  if (tone === "green") {
+    return "border-brand-green/20 bg-brand-green/[0.04]";
+  }
+  if (tone === "blue") {
+    return "border-brand-blue/20 bg-brand-blue/[0.04]";
+  }
+  if (tone === "attention") {
+    return "border-amber-200 bg-amber-50/70";
+  }
+  return "border-slate-200 bg-slate-50/80";
+}
+
+function heroIcon(hero: SupplyChainWorkspaceHeroState) {
+  if (hero.protectionStatus === "protected") {
+    return HiMiniCheckCircle;
+  }
+  if (hero.protectionStatus === "staged") {
+    return HiMiniArrowPath;
+  }
+  if (hero.protectionStatus === "partial" || hero.protectionStatus === "unprotected") {
+    return HiMiniExclamationTriangle;
+  }
+  return HiMiniComputerDesktop;
+}
+
+function heroIconClass(tone: SupplyChainWorkspaceHeroState["tone"]): string {
+  if (tone === "green") {
+    return "text-brand-green";
+  }
+  if (tone === "blue") {
+    return "text-brand-blue";
+  }
+  if (tone === "attention") {
+    return "text-amber-600";
+  }
+  return "text-slate-500";
+}
+
+function cloudTagTone(mode: SupplyChainWorkspaceHeroState["cloudMode"]): "green" | "blue" | "attention" {
+  if (mode === "paired_active") {
+    return "green";
+  }
+  if (mode === "paired_waiting") {
+    return "blue";
+  }
+  return "attention";
+}
+
+export function SupplyChainWorkspaceHero({ hero }: SupplyChainWorkspaceHeroProps) {
+  const Icon = heroIcon(hero);
+  const titleClass = hero.tone === "attention" ? "text-amber-950" : "text-brand-dark";
+
+  return (
+    <section
+      className={`rounded-2xl border px-4 py-4 sm:px-5 sm:py-5 ${heroSurfaceClass(hero.tone)}`}
+      aria-label="Supply chain protection status"
+      data-testid="supply-chain-workspace-hero"
+    >
+      <div className="flex flex-wrap items-center gap-2">
+        <Tag tone={cloudTagTone(hero.cloudMode)}>
+          {hero.cloudMode === "local_only" ? (
+            <HiMiniComputerDesktop className="mr-1 inline h-3.5 w-3.5" aria-hidden="true" />
+          ) : (
+            <HiMiniCloud className="mr-1 inline h-3.5 w-3.5" aria-hidden="true" />
+          )}
+          {hero.cloudLabel}
+        </Tag>
+        <span className="text-xs text-slate-500">{hero.statLine}</span>
+      </div>
+      <div className="mt-3 flex items-start gap-2.5">
+        <Icon className={`mt-0.5 h-5 w-5 shrink-0 ${heroIconClass(hero.tone)}`} aria-hidden="true" />
+        <div className="min-w-0">
+          <h2 className={`text-lg font-semibold tracking-tight ${titleClass}`}>{hero.title}</h2>
+          <p className="mt-1 max-w-2xl text-sm leading-relaxed text-slate-600">{hero.detail}</p>
+        </div>
+      </div>
+    </section>
+  );
+}