plugin-scanner 2.0.818__tar.gz → 2.0.819__tar.gz

{plugin_scanner-2.0.818 → plugin_scanner-2.0.819}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: plugin-scanner
-Version: 2.0.818
+Version: 2.0.819
 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.818 → plugin_scanner-2.0.819}/dashboard/package.json

@@ -5,7 +5,7 @@
   "type": "module",
   "scripts": {
     "build": "vite build",
-    "test": "tsx src/github-issue-link.test.ts && tsx src/shell-footer.test.ts && tsx src/harness-action-errors.test.ts && 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/queue-bulk-approve.test.ts && tsx src/queue-bulk-risk-disclosure.test.ts && tsx src/use-queue-bulk-approve.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 && tsx src/policy-data-truth.test.ts && tsx src/policy-ui-hardening.test.ts && tsx src/policy-review-scope.test.ts && tsx src/policy-final-release-guard.test.ts && tsx src/policy-strict-config-utils.test.ts && tsx src/policy-strict-config-ia.test.ts",
+    "test": "tsx src/github-issue-link.test.ts && tsx src/shell-footer.test.ts && tsx src/harness-action-errors.test.ts && 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/queue-bulk-approve.test.ts && tsx src/queue-bulk-risk-disclosure.test.ts && tsx src/use-queue-bulk-approve.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/package-workbench-panel.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 && tsx src/policy-data-truth.test.ts && tsx src/policy-ui-hardening.test.ts && tsx src/policy-review-scope.test.ts && tsx src/policy-final-release-guard.test.ts && tsx src/policy-strict-config-utils.test.ts && tsx src/policy-strict-config-ia.test.ts",
     "test:e2e": "playwright test",
     "dev": "vite dev"
   },

plugin_scanner-2.0.819/dashboard/src/package-workbench-common.tsx

@@ -0,0 +1,156 @@
+import { useCallback } from "react";
+import { HiMiniChevronLeft, HiMiniChevronRight } from "react-icons/hi2";
+import { SectionLabel, Tag, ActionButton } from "./approval-center-primitives";
+import { formatRelativeTime } from "./approval-center-utils";
+import type {
+  SupplyChainAuditDecision,
+  SupplyChainAuditSeverity,
+  SupplyChainAuditSnapshot,
+} from "./guard-types";
+
+export const decisionTone = (
+  decision: SupplyChainAuditDecision,
+): "destructive" | "attention" | "warning" | "info" | "green" | "default" => {
+  if (decision === "block") {
+    return "destructive";
+  }
+  if (decision === "ask") {
+    return "attention";
+  }
+  if (decision === "warn") {
+    return "warning";
+  }
+  if (decision === "monitor") {
+    return "info";
+  }
+  if (decision === "allow") {
+    return "green";
+  }
+  return "default";
+};
+
+export const severityTone = (
+  severity: SupplyChainAuditSeverity,
+): "destructive" | "attention" | "warning" | "info" | "default" => {
+  if (severity === "critical") {
+    return "destructive";
+  }
+  if (severity === "high") {
+    return "attention";
+  }
+  if (severity === "medium") {
+    return "warning";
+  }
+  if (severity === "low") {
+    return "info";
+  }
+  return "default";
+};
+
+type WorkbenchHeaderProps = {
+  auditSnapshot: SupplyChainAuditSnapshot;
+  flaggedCount: number;
+  packageCount: number;
+  cloudState?: string | null;
+};
+
+function cloudIntelLabel(cloudState: string | null | undefined, source: string | null): string {
+  if (cloudState === "local_only") {
+    return "Local intel only";
+  }
+  if (source !== null && source.length > 0) {
+    return `${source} intel`;
+  }
+  return "Guard Cloud";
+}
+
+function cloudIntelTone(cloudState: string | null | undefined): "attention" | "green" | "info" {
+  if (cloudState === "local_only") {
+    return "attention";
+  }
+  if (cloudState === "paired_active") {
+    return "green";
+  }
+  return "info";
+}
+
+export function WorkbenchHeader({
+  auditSnapshot,
+  flaggedCount,
+  packageCount,
+  cloudState,
+}: WorkbenchHeaderProps) {
+  const manifestSummary =
+    auditSnapshot.manifestPaths.length > 0
+      ? `${auditSnapshot.manifestPaths.length} manifest${auditSnapshot.manifestPaths.length === 1 ? "" : "s"}`
+      : null;
+  const lockfileSummary =
+    auditSnapshot.lockfilePaths.length > 0
+      ? `${auditSnapshot.lockfilePaths.length} lockfile${auditSnapshot.lockfilePaths.length === 1 ? "" : "s"}`
+      : null;
+  const scanSummary = [manifestSummary, lockfileSummary].filter((entry) => entry !== null).join(" · ");
+
+  return (
+    <div className="space-y-1">
+      <div className="flex flex-wrap items-center gap-2 text-xs text-slate-500">
+        <Tag tone={decisionTone(auditSnapshot.decision)}>{auditSnapshot.decision}</Tag>
+        <Tag tone={cloudIntelTone(cloudState)}>{cloudIntelLabel(cloudState, auditSnapshot.source)}</Tag>
+        <span>
+          {auditSnapshot.inventory.totalPackages} package
+          {auditSnapshot.inventory.totalPackages === 1 ? "" : "s"} indexed
+        </span>
+        <span aria-hidden="true">·</span>
+        <span>{packageCount} in table</span>
+        <span aria-hidden="true">·</span>
+        <span>{flaggedCount} need review</span>
+        <span aria-hidden="true">·</span>
+        <span>Last audit {formatRelativeTime(auditSnapshot.generatedAt)}</span>
+      </div>
+      {scanSummary.length > 0 ? (
+        <p className="text-[11px] text-slate-400">Scanned {scanSummary} across this workspace.</p>
+      ) : null}
+    </div>
+  );
+}
+
+type WorkbenchPaginationProps = {
+  page: number;
+  pageCount: number;
+  total: number;
+  onPageChange: (page: number) => void;
+};
+
+export function WorkbenchPagination({ page, pageCount, total, onPageChange }: WorkbenchPaginationProps) {
+  const handlePrevious = useCallback(() => {
+    onPageChange(Math.max(0, page - 1));
+  }, [onPageChange, page]);
+  const handleNext = useCallback(() => {
+    onPageChange(Math.min(pageCount - 1, page + 1));
+  }, [onPageChange, page, pageCount]);
+
+  if (pageCount <= 1) {
+    return (
+      <p className="text-xs text-slate-500">
+        Showing {total} finding{total === 1 ? "" : "s"}
+      </p>
+    );
+  }
+
+  return (
+    <div className="flex flex-wrap items-center justify-between gap-2">
+      <p className="text-xs text-slate-500">
+        Page {page + 1} of {pageCount} · {total} finding{total === 1 ? "" : "s"}
+      </p>
+      <div className="flex items-center gap-1">
+        <ActionButton variant="outline" onClick={handlePrevious} disabled={page === 0}>
+          <HiMiniChevronLeft className="h-4 w-4" aria-hidden="true" />
+          Previous
+        </ActionButton>
+        <ActionButton variant="outline" onClick={handleNext} disabled={page >= pageCount - 1}>
+          Next
+          <HiMiniChevronRight className="h-4 w-4" aria-hidden="true" />
+        </ActionButton>
+      </div>
+    </div>
+  );
+}

plugin_scanner-2.0.819/dashboard/src/package-workbench-filter-modal.tsx

@@ -0,0 +1,342 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import type { ChangeEvent } from "react";
+import {
+  HiMiniArrowDown,
+  HiMiniArrowUp,
+  HiMiniFunnel,
+  HiMiniMagnifyingGlass,
+  HiMiniXMark,
+} from "react-icons/hi2";
+import { ActionButton, IconActionButton } from "./approval-center-primitives";
+import { GuardModalLayer } from "./guard-modal-layer";
+import type {
+  PackageWorkbenchFilters,
+  PackageWorkbenchSortKey,
+} from "./guard-types";
+
+type FilterModalView = "filters" | "sort";
+
+type FilterModalContentProps = {
+  filters: PackageWorkbenchFilters;
+  ecosystems: string[];
+  onEcosystemChange: (ecosystem: string) => void;
+  onDecisionChange: (decision: PackageWorkbenchFilters["decision"]) => void;
+  onSeverityChange: (severity: PackageWorkbenchFilters["severity"]) => void;
+};
+
+function FilterModalContent({
+  filters,
+  ecosystems,
+  onEcosystemChange,
+  onDecisionChange,
+  onSeverityChange,
+}: FilterModalContentProps) {
+  const options = useMemo(() => {
+    return {
+      ecosystems: ["all", ...ecosystems],
+      decisions: ["all", "block", "ask", "warn", "monitor", "allow"] as PackageWorkbenchFilters["decision"][],
+      severities: ["all", "critical", "high", "medium", "low", "unknown"] as PackageWorkbenchFilters["severity"][],
+    };
+  }, [ecosystems]);
+
+  const handleEcosystemChange = useCallback(
+    (event: ChangeEvent<HTMLSelectElement>) => onEcosystemChange(event.target.value),
+    [onEcosystemChange],
+  );
+  const handleDecisionChange = useCallback(
+    (event: ChangeEvent<HTMLSelectElement>) => onDecisionChange(event.target.value as PackageWorkbenchFilters["decision"]),
+    [onDecisionChange],
+  );
+  const handleSeverityChange = useCallback(
+    (event: ChangeEvent<HTMLSelectElement>) => onSeverityChange(event.target.value as PackageWorkbenchFilters["severity"]),
+    [onSeverityChange],
+  );
+
+  return (
+    <div className="space-y-4">
+      <label className="block">
+        <span className="text-[11px] font-semibold uppercase tracking-[0.12em] text-slate-400">Ecosystem</span>
+        <select
+          value={filters.ecosystem}
+          onChange={handleEcosystemChange}
+          className="mt-1.5 min-h-11 w-full rounded-lg border border-slate-200 bg-white px-3 text-sm font-medium text-brand-dark transition-colors focus:border-brand-blue focus:outline-none focus:ring-2 focus:ring-brand-blue/20"
+        >
+          {options.ecosystems.map((value) => (
+            <option key={value} value={value}>
+              {value === "all" ? "All ecosystems" : value}
+            </option>
+          ))}
+        </select>
+      </label>
+      <label className="block">
+        <span className="text-[11px] font-semibold uppercase tracking-[0.12em] text-slate-400">Decision</span>
+        <select
+          value={filters.decision}
+          onChange={handleDecisionChange}
+          className="mt-1.5 min-h-11 w-full rounded-lg border border-slate-200 bg-white px-3 text-sm font-medium text-brand-dark transition-colors focus:border-brand-blue focus:outline-none focus:ring-2 focus:ring-brand-blue/20"
+        >
+          {options.decisions.map((value) => (
+            <option key={value} value={value}>
+              {value === "all" ? "All decisions" : value}
+            </option>
+          ))}
+        </select>
+      </label>
+      <label className="block">
+        <span className="text-[11px] font-semibold uppercase tracking-[0.12em] text-slate-400">Severity</span>
+        <select
+          value={filters.severity}
+          onChange={handleSeverityChange}
+          className="mt-1.5 min-h-11 w-full rounded-lg border border-slate-200 bg-white px-3 text-sm font-medium text-brand-dark transition-colors focus:border-brand-blue focus:outline-none focus:ring-2 focus:ring-brand-blue/20"
+        >
+          {options.severities.map((value) => (
+            <option key={value} value={value}>
+              {value === "all" ? "All severities" : value}
+            </option>
+          ))}
+        </select>
+      </label>
+    </div>
+  );
+}
+
+function SortModalContent({
+  sortKey,
+  sortDirection,
+  onSortChange,
+}: {
+  sortKey: PackageWorkbenchSortKey;
+  sortDirection: "asc" | "desc";
+  onSortChange: (sortKey: PackageWorkbenchSortKey) => void;
+}) {
+  const handleSortChange = useCallback(
+    (event: ChangeEvent<HTMLSelectElement>) => onSortChange(event.target.value as PackageWorkbenchSortKey),
+    [onSortChange],
+  );
+  const toggleDirection = useCallback(() => {
+    onSortChange(sortKey);
+  }, [onSortChange, sortKey]);
+
+  return (
+    <div className="space-y-4">
+      <label className="block">
+        <span className="text-[11px] font-semibold uppercase tracking-[0.12em] text-slate-400">Sort by</span>
+        <select
+          value={sortKey}
+          onChange={handleSortChange}
+          className="mt-1.5 min-h-11 w-full rounded-lg border border-slate-200 bg-white px-3 text-sm font-medium text-brand-dark transition-colors focus:border-brand-blue focus:outline-none focus:ring-2 focus:ring-brand-blue/20"
+        >
+          <option value="severity">Severity</option>
+          <option value="package">Package</option>
+          <option value="ecosystem">Ecosystem</option>
+          <option value="decision">Decision</option>
+        </select>
+      </label>
+      <button
+        type="button"
+        onClick={toggleDirection}
+        className="flex w-full items-center justify-center gap-1.5 rounded-lg border border-slate-200 bg-white px-3 py-2.5 text-sm font-medium text-brand-dark transition-colors hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-brand-blue/20"
+      >
+        {sortDirection === "desc" ? (
+          <>
+            <HiMiniArrowDown className="h-4 w-4" aria-hidden="true" /> Descending
+          </>
+        ) : (
+          <>
+            <HiMiniArrowUp className="h-4 w-4" aria-hidden="true" /> Ascending
+          </>
+        )}
+      </button>
+    </div>
+  );
+}
+
+export type FilterModalProps = {
+  filters: PackageWorkbenchFilters;
+  activeFilterCount: number;
+  ecosystems: string[];
+  sortKey: PackageWorkbenchSortKey;
+  sortDirection: "asc" | "desc";
+  onClose: () => void;
+  onSearchChange: (event: ChangeEvent<HTMLInputElement>) => void;
+  onEcosystemChange: (ecosystem: string) => void;
+  onDecisionChange: (decision: PackageWorkbenchFilters["decision"]) => void;
+  onSeverityChange: (severity: PackageWorkbenchFilters["severity"]) => void;
+  onSortChange: (sortKey: PackageWorkbenchSortKey) => void;
+  onClearFilters: () => void;
+};
+
+export function FilterModal({
+  filters,
+  activeFilterCount,
+  ecosystems,
+  sortKey,
+  sortDirection,
+  onClose,
+  onSearchChange,
+  onEcosystemChange,
+  onDecisionChange,
+  onSeverityChange,
+  onSortChange,
+  onClearFilters,
+}: FilterModalProps) {
+  const [activeView, setActiveView] = useState<FilterModalView>("filters");
+  const searchRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (searchRef.current) {
+      searchRef.current.focus();
+    }
+  }, [activeView]);
+
+  const handleClearSearch = useCallback(() => {
+    onSearchChange({ target: { value: "" } } as ChangeEvent<HTMLInputElement>);
+  }, [onSearchChange]);
+
+  return (
+    <GuardModalLayer ariaLabel="Filter and sort package findings" onClose={onClose} panelClassName="w-full max-w-md">
+      <div className="max-h-[min(85vh,44rem)] overflow-y-auto rounded-2xl border border-slate-100 bg-white shadow-xl">
+        <div className="sticky top-0 z-10 flex items-center justify-between border-b border-slate-100 bg-white/95 px-4 py-3 backdrop-blur-sm">
+          <div className="flex items-center gap-2">
+            <HiMiniFunnel className="h-4 w-4 text-slate-500" aria-hidden="true" />
+            <p className="text-sm font-semibold text-brand-dark">Filters</p>
+            {activeFilterCount > 0 ? (
+              <span className="rounded-full bg-brand-blue px-2 py-0.5 text-[10px] font-semibold text-white">
+                {activeFilterCount}
+              </span>
+            ) : null}
+          </div>
+          <IconActionButton
+            variant="ghost"
+            label="Close filters"
+            icon={<HiMiniXMark className="h-4 w-4" />}
+            onClick={onClose}
+          />
+        </div>
+        <div className="px-4 py-4">
+          <div className="flex gap-2 border-b border-slate-100 pb-4">
+            <button
+              type="button"
+              onClick={() => setActiveView("filters")}
+              aria-pressed={activeView === "filters"}
+              className={`flex-1 rounded-lg px-3 py-2 text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-brand-blue/30 ${
+                activeView === "filters" ? "bg-brand-blue/10 text-brand-blue" : "text-slate-600 hover:bg-slate-50"
+              }`}
+            >
+              Filters
+            </button>
+            <button
+              type="button"
+              onClick={() => setActiveView("sort")}
+              aria-pressed={activeView === "sort"}
+              className={`flex-1 rounded-lg px-3 py-2 text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-brand-blue/30 ${
+                activeView === "sort" ? "bg-brand-blue/10 text-brand-blue" : "text-slate-600 hover:bg-slate-50"
+              }`}
+            >
+              Sort
+            </button>
+          </div>
+          <div className="pt-4">
+            {activeView === "filters" ? (
+              <div className="space-y-4">
+                <label className="block">
+                  <span className="text-[11px] font-semibold uppercase tracking-[0.12em] text-slate-400">Search</span>
+                  <div className="mt-1.5 flex items-center gap-2 rounded-lg border border-slate-200 bg-white px-3 py-2 focus-within:border-brand-blue focus-within:ring-2 focus-within:ring-brand-blue/20">
+                    <HiMiniMagnifyingGlass className="h-4 w-4 text-slate-400" aria-hidden="true" />
+                    <input
+                      ref={searchRef}
+                      type="search"
+                      value={filters.search}
+                      onChange={onSearchChange}
+                      placeholder="Search packages, advisories, CVEs…"
+                      aria-label="Search package findings"
+                      className="w-full bg-transparent text-sm text-brand-dark placeholder:text-slate-400 focus:outline-none"
+                    />
+                    {filters.search.length > 0 ? (
+                      <button
+                        type="button"
+                        onClick={handleClearSearch}
+                        aria-label="Clear search"
+                        className="rounded p-0.5 text-slate-400 hover:bg-slate-100 hover:text-slate-600"
+                      >
+                        <HiMiniXMark className="h-3.5 w-3.5" />
+                      </button>
+                    ) : null}
+                  </div>
+                </label>
+                <FilterModalContent
+                  filters={filters}
+                  ecosystems={ecosystems}
+                  onEcosystemChange={onEcosystemChange}
+                  onDecisionChange={onDecisionChange}
+                  onSeverityChange={onSeverityChange}
+                />
+              </div>
+            ) : (
+              <SortModalContent sortKey={sortKey} sortDirection={sortDirection} onSortChange={onSortChange} />
+            )}
+          </div>
+        </div>
+        <div className="border-t border-slate-100 px-4 py-3">
+          <div className="flex items-center justify-between gap-3">
+            <button
+              type="button"
+              onClick={onClearFilters}
+              className="text-sm font-medium text-slate-500 hover:text-slate-700"
+            >
+              Reset all
+            </button>
+            <ActionButton variant="primary" onClick={onClose}>
+              Show results
+            </ActionButton>
+          </div>
+        </div>
+      </div>
+    </GuardModalLayer>
+  );
+}
+
+export type ActiveFilterChipProps = {
+  label: string;
+  onRemove: () => void;
+};
+
+export function ActiveFilterChip({ label, onRemove }: ActiveFilterChipProps) {
+  return (
+    <span className="inline-flex items-center gap-1 rounded-full border border-slate-200 bg-white px-2.5 py-1 text-xs font-medium text-brand-dark">
+      {label}
+      <button
+        type="button"
+        onClick={onRemove}
+        aria-label={`Remove ${label}`}
+        className="rounded p-0.5 text-slate-400 hover:bg-slate-100 hover:text-slate-600"
+      >
+        <HiMiniXMark className="h-3 w-3" />
+      </button>
+    </span>
+  );
+}
+
+export function buildFilterSummary(
+  filters: PackageWorkbenchFilters,
+  sortKey: PackageWorkbenchSortKey,
+  sortDirection: "asc" | "desc",
+): { key: string; label: string }[] {
+  const items: { key: string; label: string }[] = [];
+  if (filters.ecosystem !== "all") {
+    items.push({ key: "ecosystem", label: `Ecosystem: ${filters.ecosystem}` });
+  }
+  if (filters.decision !== "all") {
+    items.push({ key: "decision", label: `Decision: ${filters.decision}` });
+  }
+  if (filters.severity !== "all") {
+    items.push({ key: "severity", label: `Severity: ${filters.severity}` });
+  }
+  if (filters.search.trim().length > 0) {
+    items.push({ key: "search", label: `Search: "${filters.search.trim()}"` });
+  }
+  if (sortKey !== "severity" || sortDirection !== "desc") {
+    items.push({ key: "sort", label: `Sort: ${sortKey} ${sortDirection === "desc" ? "↓" : "↑"}` });
+  }
+  return items;
+}

plugin_scanner-2.0.819/dashboard/src/package-workbench-finding-detail.tsx

@@ -0,0 +1,119 @@
+import { useCallback } from "react";
+import { HiMiniXMark } from "react-icons/hi2";
+import { Tag, IconActionButton } from "./approval-center-primitives";
+import { decisionTone, severityTone } from "./package-workbench-common";
+import type { SupplyChainAuditFinding } from "./guard-types";
+
+function humanizeReasonMessage(code: string, message: string): string {
+  if (code === "unknown_package") {
+    return "Guard Cloud has not indexed this package yet. It is not treated as a security finding.";
+  }
+  if (code === "no_cached_match") {
+    return "No local intel match yet. Sync Guard Cloud or retry after the next bundle refresh.";
+  }
+  return message;
+}
+
+type FindingDetailPanelProps = {
+  finding: SupplyChainAuditFinding;
+  onClose: () => void;
+};
+
+export function FindingDetailPanel({ finding, onClose }: FindingDetailPanelProps) {
+  const handleClose = useCallback(() => {
+    onClose();
+  }, [onClose]);
+
+  return (
+    <div className="max-h-[min(85vh,40rem)] overflow-y-auto rounded-2xl border border-slate-100 bg-white shadow-xl">
+      <div className="sticky top-0 z-10 flex items-start justify-between gap-3 border-b border-slate-100 bg-white/95 px-4 py-3 backdrop-blur-sm">
+        <div className="min-w-0">
+          <p className="text-base font-semibold text-brand-dark">{finding.packageName}</p>
+          <p className="mt-0.5 text-xs text-slate-500">
+            {finding.ecosystem}
+            {finding.namespace !== null ? ` · ${finding.namespace}` : ""}
+          </p>
+        </div>
+        <IconActionButton
+          variant="ghost"
+          label="Close finding detail"
+          icon={<HiMiniXMark className="h-4 w-4" />}
+          onClick={handleClose}
+        />
+      </div>
+      <div className="px-4 py-4">
+        <div className="flex flex-wrap items-center gap-2">
+          <Tag tone={decisionTone(finding.decision)}>{finding.decision}</Tag>
+          <Tag tone={severityTone(finding.severity)}>{finding.severity}</Tag>
+        </div>
+        {finding.reasons.length > 0 ? (
+          <ul className="mt-4 space-y-3">
+            {finding.reasons.map((reason) => (
+              <li
+                key={`${finding.id}-${reason.code}`}
+                className="rounded-xl border border-slate-100 bg-slate-50/80 px-3 py-2.5 text-xs leading-relaxed text-slate-600"
+              >
+                <span className="font-semibold text-slate-700">{reason.code}</span>
+                <span className="text-slate-400"> · </span>
+                {humanizeReasonMessage(reason.code, reason.message)}
+              </li>
+            ))}
+          </ul>
+        ) : (
+          <p className="mt-4 text-xs text-slate-500">No advisory detail recorded for this package yet.</p>
+        )}
+        <div className="mt-5">
+          <p className="text-[10px] font-semibold uppercase tracking-[0.18em] text-slate-400">Advisory aliases</p>
+          <div className="mt-2 flex flex-wrap gap-1.5">
+            {finding.advisoryAliases.map((alias) => (
+              <span
+                key={`${finding.id}-${alias}`}
+                className="rounded-full border border-slate-200 bg-white px-2.5 py-0.5 font-mono text-[11px] text-slate-600"
+              >
+                {alias}
+              </span>
+            ))}
+          </div>
+          {finding.advisoryAliases.length === 0 ? (
+            <p className="mt-2 text-[11px] text-slate-500">No linked CVE or GHSA aliases for this finding.</p>
+          ) : null}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+type FindingRowProps = {
+  finding: SupplyChainAuditFinding;
+  selected: boolean;
+  onSelect: (id: string) => void;
+};
+
+export function FindingRow({ finding, selected, onSelect }: FindingRowProps) {
+  const handleSelect = useCallback(() => {
+    onSelect(finding.id);
+  }, [finding.id, onSelect]);
+
+  return (
+    <button
+      type="button"
+      onClick={handleSelect}
+      aria-pressed={selected}
+      className={`flex w-full items-center justify-between gap-3 border-b border-slate-100 px-4 py-3 text-left transition-colors last:border-b-0 hover:bg-slate-50/70 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-brand-blue/30 ${
+        selected ? "bg-brand-blue/[0.04]" : ""
+      }`}
+    >
+      <div className="min-w-0">
+        <p className="truncate text-sm font-medium text-brand-dark">{finding.packageName}</p>
+        <p className="mt-0.5 truncate text-xs text-slate-500">
+          {finding.ecosystem}
+          {finding.namespace !== null ? ` · ${finding.namespace}` : ""}
+        </p>
+      </div>
+      <div className="flex shrink-0 items-center gap-2">
+        <Tag tone={decisionTone(finding.decision)}>{finding.decision}</Tag>
+        <Tag tone={severityTone(finding.severity)}>{finding.severity}</Tag>
+      </div>
+    </button>
+  );
+}