plugin-scanner 2.0.722__tar.gz → 2.0.723__tar.gz

{plugin_scanner-2.0.722 → plugin_scanner-2.0.723}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: plugin-scanner
-Version: 2.0.722
+Version: 2.0.723
 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.723/dashboard/src/audit-run-progress.tsx

@@ -0,0 +1,100 @@
+import { HiMiniArrowPath, HiMiniCheckCircle } from "react-icons/hi2";
+import type { AuditRunPhase } from "./use-supply-chain-audit-session";
+
+type AuditRunProgressProps = {
+  phase: AuditRunPhase;
+  running: boolean;
+};
+
+type StepState = "pending" | "active" | "done";
+
+const STEPS: Array<{ id: AuditRunPhase; label: string }> = [
+  { id: "preparing", label: "Prepare workspace" },
+  { id: "scanning", label: "Scan manifests and lockfiles" },
+  { id: "evaluating", label: "Evaluate packages" },
+  { id: "finalizing", label: "Build findings" },
+];
+
+function stepState(stepId: AuditRunPhase, phase: AuditRunPhase, running: boolean): StepState {
+  const order = STEPS.map((step) => step.id);
+  const stepIndex = order.indexOf(stepId);
+  const phaseIndex = order.indexOf(phase);
+  if (!running && phase === "idle") {
+    return "pending";
+  }
+  if (phase === "finalizing" && stepId !== "finalizing") {
+    return "done";
+  }
+  if (stepIndex < phaseIndex) {
+    return "done";
+  }
+  if (stepIndex === phaseIndex) {
+    return "active";
+  }
+  return "pending";
+}
+
+function stepTextClass(state: StepState): string {
+  if (state === "active") {
+    return "font-medium text-brand-dark";
+  }
+  if (state === "done") {
+    return "text-slate-600";
+  }
+  return "text-slate-400";
+}
+
+function stepBubbleClass(state: StepState): string {
+  if (state === "active") {
+    return "bg-brand-blue text-white";
+  }
+  if (state === "done") {
+    return "bg-brand-green/15 text-brand-green-text";
+  }
+  return "border border-slate-200 bg-white text-slate-400";
+}
+
+export function AuditRunProgress({ phase, running }: AuditRunProgressProps) {
+  if (!running && phase === "idle") {
+    return null;
+  }
+
+  return (
+    <section
+      className="rounded-2xl border border-brand-blue/15 bg-brand-blue/[0.03] px-4 py-4"
+      aria-live="polite"
+      aria-busy={running}
+      data-testid="audit-run-progress"
+    >
+      <div className="flex items-center gap-2">
+        {running ? (
+          <HiMiniArrowPath className="h-4 w-4 shrink-0 animate-spin text-brand-blue" aria-hidden="true" />
+        ) : (
+          <HiMiniCheckCircle className="h-4 w-4 shrink-0 text-brand-green" aria-hidden="true" />
+        )}
+        <p className="text-sm font-medium text-brand-dark">
+          {running ? "Workspace audit in progress" : "Workspace audit complete"}
+        </p>
+      </div>
+      <ol className="mt-4 space-y-2">
+        {STEPS.map((step, index) => {
+          const state = stepState(step.id, phase, running);
+          return (
+            <li
+              key={step.id}
+              className={`flex items-center gap-2 text-sm ${stepTextClass(state)}`}
+            >
+              <span
+                className={`inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-full text-[10px] font-semibold ${stepBubbleClass(state)}`}
+                aria-hidden="true"
+              >
+                {state === "done" ? "✓" : index + 1}
+              </span>
+              {step.label}
+            </li>
+          );
+        })}
+      </ol>
+    </section>
+  );
+}

{plugin_scanner-2.0.722 → plugin_scanner-2.0.723}/dashboard/src/audit-workspace.tsx

@@ -24,6 +24,9 @@ import type { AuditRemediationAction } from "./guard-api";
 import type { GuardApprovalGatePublicConfig, GuardReceipt, GuardRuntimeSnapshot } from "./guard-types";
 import { useResolvedApprovalGate } from "./use-resolved-approval-gate";
 import { resolveManagerCoverageStatus } from "./supply-chain-protection-stats";
+import { PackageWorkbenchPanel } from "./package-workbench-panel";
+import { AuditRunProgress } from "./audit-run-progress";
+import type { SupplyChainAuditSession } from "./use-supply-chain-audit-session";
 
 export type AuditSeverity = "critical" | "high" | "medium" | "low" | "info";
 
@@ -418,9 +421,10 @@ type AuditWorkspaceProps = {
   snapshot: GuardRuntimeSnapshot;
   receipts: GuardReceipt[];
   approvalGate: GuardApprovalGatePublicConfig | null;
+  auditSession: SupplyChainAuditSession;
 };
 
-export function AuditWorkspace({ snapshot, receipts, approvalGate }: AuditWorkspaceProps) {
+export function AuditWorkspace({ snapshot, receipts, approvalGate, auditSession }: AuditWorkspaceProps) {
   const [filter, setFilter] = useState<AuditFilterState>({
     severityFilter: "all",
     harnessFilter: "",
@@ -555,6 +559,16 @@ export function AuditWorkspace({ snapshot, receipts, approvalGate }: AuditWorksp
 
   return (
     <div className="space-y-6">
+      <AuditRunProgress phase={auditSession.auditPhase} running={auditSession.auditRunning} />
+
+      <PackageWorkbenchPanel
+        auditConnectGate={auditSession.auditConnectGate}
+        auditError={auditSession.auditError}
+        auditSnapshot={auditSession.auditSnapshot}
+        auditRunning={auditSession.auditRunning}
+        onRunAudit={auditSession.handleRunAudit}
+      />
+
       <div className="flex flex-wrap items-start justify-between gap-3">
         <div>
           <p className="text-sm text-slate-500">

{plugin_scanner-2.0.722 → plugin_scanner-2.0.723}/dashboard/src/package-workbench-panel.tsx

@@ -4,11 +4,15 @@ import {
   HiMiniArrowDown,
   HiMiniArrowUp,
   HiMiniBugAnt,
+  HiMiniChevronLeft,
+  HiMiniChevronRight,
   HiMiniExclamationTriangle,
   HiMiniMagnifyingGlass,
+  HiMiniXMark,
 } from "react-icons/hi2";
-import { SectionLabel, Tag, ActionButton, EmptyState } from "./approval-center-primitives";
+import { SectionLabel, Tag, ActionButton, EmptyState, IconActionButton } from "./approval-center-primitives";
 import { formatRelativeTime } from "./approval-center-utils";
+import { GuardModalLayer } from "./guard-modal-layer";
 import type {
   PackageWorkbenchFilters,
   PackageWorkbenchSortKey,
@@ -25,6 +29,8 @@ import {
 import { ConnectFlowCard } from "./supply-chain-firewall-views";
 import type { AuditConnectGateViewState } from "./supply-chain-firewall-panel";
 
+const WORKBENCH_PAGE_SIZE = 25;
+
 type PackageWorkbenchPanelProps = {
   auditConnectGate?: AuditConnectGateViewState | null;
   auditError?: string | null;
@@ -72,75 +78,128 @@ const severityTone = (
   return "default";
 };
 
+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 WorkbenchHeaderProps = {
   auditSnapshot: SupplyChainAuditSnapshot;
+  flaggedCount: number;
 };
 
-function WorkbenchHeader({ auditSnapshot }: WorkbenchHeaderProps) {
+function WorkbenchHeader({ auditSnapshot, flaggedCount }: 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="flex flex-wrap items-center gap-2 text-xs text-slate-500">
-      <Tag tone={decisionTone(auditSnapshot.decision)}>{auditSnapshot.decision}</Tag>
-      <span>
-        {auditSnapshot.inventory.totalPackages} package
-        {auditSnapshot.inventory.totalPackages === 1 ? "" : "s"} indexed
-      </span>
-      <span aria-hidden="true">·</span>
-      <span>Last audit {formatRelativeTime(auditSnapshot.generatedAt)}</span>
-      {auditSnapshot.source !== null && (
-        <>
-          <span aria-hidden="true">·</span>
-          <span className="capitalize">{auditSnapshot.source} intel</span>
-        </>
-      )}
+    <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>
+        <span>
+          {auditSnapshot.inventory.totalPackages} package
+          {auditSnapshot.inventory.totalPackages === 1 ? "" : "s"} indexed
+        </span>
+        <span aria-hidden="true">·</span>
+        <span>
+          {flaggedCount} need review
+        </span>
+        <span aria-hidden="true">·</span>
+        <span>Last audit {formatRelativeTime(auditSnapshot.generatedAt)}</span>
+        {auditSnapshot.source !== null && (
+          <>
+            <span aria-hidden="true">·</span>
+            <span className="capitalize">{auditSnapshot.source} intel</span>
+          </>
+        )}
+      </div>
+      {scanSummary.length > 0 ? (
+        <p className="text-[11px] text-slate-400">Scanned {scanSummary} across this workspace.</p>
+      ) : null}
     </div>
   );
 }
 
 type FindingDetailPanelProps = {
   finding: SupplyChainAuditFinding;
+  onClose: () => void;
 };
 
-function FindingDetailPanel({ finding }: FindingDetailPanelProps) {
+function FindingDetailPanel({ finding, onClose }: FindingDetailPanelProps) {
+  const handleClose = useCallback(() => {
+    onClose();
+  }, [onClose]);
+
   return (
-    <div className="rounded-xl border border-slate-100 bg-slate-50/70 px-4 py-3">
-      <div className="flex flex-wrap items-center gap-2">
-        <p className="text-sm font-semibold text-brand-dark">{finding.packageName}</p>
-        <Tag tone="default">{finding.ecosystem}</Tag>
-        <Tag tone={decisionTone(finding.decision)}>{finding.decision}</Tag>
-        <Tag tone={severityTone(finding.severity)}>{finding.severity}</Tag>
+    <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>
-      {finding.reasons.length > 0 ? (
-        <ul className="mt-3 space-y-2">
-          {finding.reasons.map((reason) => (
-            <li key={`${finding.id}-${reason.code}`} className="text-xs leading-relaxed text-slate-600">
-              <span className="font-semibold text-slate-700">{reason.code}</span>
-              <span className="text-slate-400"> · </span>
-              {reason.message}
-            </li>
-          ))}
-        </ul>
-      ) : (
-        <p className="mt-3 text-xs text-slate-500">No advisory detail recorded for this package yet.</p>
-      )}
-      <div className="mt-4">
-        <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 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.advisoryAliases.length === 0 ? (
-          <p className="mt-2 text-[11px] text-slate-500">
-            No linked CVE or GHSA aliases for this finding.
+        {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>
-        ) : null}
+          <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>
   );
@@ -181,6 +240,48 @@ function FindingRow({ finding, selected, onSelect }: FindingRowProps) {
   );
 }
 
+type WorkbenchPaginationProps = {
+  page: number;
+  pageCount: number;
+  total: number;
+  onPageChange: (page: number) => void;
+};
+
+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>
+  );
+}
+
 type SortButtonProps = {
   label: string;
   sortKey: PackageWorkbenchSortKey;
@@ -415,6 +516,7 @@ export function PackageWorkbenchPanel({
   }>({ sortKey: "severity", sortDirection: "desc" });
   const { sortKey, sortDirection } = sortState;
   const [selectedId, setSelectedId] = useState("");
+  const [page, setPage] = useState(0);
 
   const findings = auditSnapshot?.findings ?? [];
   const ecosystems = useMemo(() => packageWorkbenchEcosystems(findings), [findings]);
@@ -433,25 +535,35 @@ export function PackageWorkbenchPanel({
     () => sortedFindings.find((finding) => finding.id === selectedId) ?? null,
     [selectedId, sortedFindings],
   );
+  const pageCount = Math.max(1, Math.ceil(sortedFindings.length / WORKBENCH_PAGE_SIZE));
+  const safePage = page >= pageCount ? 0 : page;
+  const pagedFindings = useMemo(() => {
+    const start = safePage * WORKBENCH_PAGE_SIZE;
+    return sortedFindings.slice(start, start + WORKBENCH_PAGE_SIZE);
+  }, [safePage, sortedFindings]);
 
   const handleSearchChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {
     setFilters((prev) => ({ ...prev, search: event.target.value }));
     setSelectedId("");
+    setPage(0);
   }, []);
 
   const handleEcosystemChange = useCallback((ecosystem: string) => {
     setFilters((prev) => ({ ...prev, ecosystem }));
     setSelectedId("");
+    setPage(0);
   }, []);
 
   const handleDecisionChange = useCallback((decision: PackageWorkbenchFilters["decision"]) => {
     setFilters((prev) => ({ ...prev, decision }));
     setSelectedId("");
+    setPage(0);
   }, []);
 
   const handleSeverityChange = useCallback((severity: PackageWorkbenchFilters["severity"]) => {
     setFilters((prev) => ({ ...prev, severity }));
     setSelectedId("");
+    setPage(0);
   }, []);
 
   const handleSortChange = useCallback((nextSortKey: PackageWorkbenchSortKey) => {
@@ -464,10 +576,20 @@ export function PackageWorkbenchPanel({
       }
       return { sortKey: nextSortKey, sortDirection: "desc" };
     });
+    setPage(0);
   }, []);
 
   const handleSelectFinding = useCallback((id: string) => {
-    setSelectedId((prev) => (prev === id ? "" : id));
+    setSelectedId(id);
+  }, []);
+
+  const handleCloseFinding = useCallback(() => {
+    setSelectedId("");
+  }, []);
+
+  const handlePageChange = useCallback((nextPage: number) => {
+    setPage(nextPage);
+    setSelectedId("");
   }, []);
 
   return (
@@ -475,11 +597,11 @@ export function PackageWorkbenchPanel({
       <div className="border-b border-slate-100 px-4 py-3">
         <SectionLabel>Audit findings</SectionLabel>
         <p className="mt-0.5 text-sm text-slate-500">
-          Review flagged packages from the latest workspace audit. Filter, sort, and inspect advisory detail.
+          Packages that need review from the latest workspace audit. Filter, sort, and open a finding for detail.
         </p>
         {auditSnapshot !== null && (
           <div className="mt-2">
-            <WorkbenchHeader auditSnapshot={auditSnapshot} />
+            <WorkbenchHeader auditSnapshot={auditSnapshot} flaggedCount={findings.length} />
           </div>
         )}
       </div>
@@ -516,12 +638,22 @@ export function PackageWorkbenchPanel({
             onSeverityChange={handleSeverityChange}
             onSortChange={handleSortChange}
           />
+          <WorkbenchPagination
+            page={safePage}
+            pageCount={pageCount}
+            total={sortedFindings.length}
+            onPageChange={handlePageChange}
+          />
           {sortedFindings.length === 0 ? (
             <p className="py-6 text-center text-sm text-slate-500">No packages match the current filters.</p>
           ) : (
-            <div className="overflow-hidden rounded-xl border border-slate-100" role="table" aria-label="Package audit findings">
+            <div
+              className="overflow-hidden rounded-xl border border-slate-100"
+              role="table"
+              aria-label="Package audit findings"
+            >
               <div
-                className="hidden border-b border-slate-100 bg-slate-50 px-4 py-2 sm:grid sm:grid-cols-[minmax(0,1fr)_auto] sm:gap-3"
+                className="sticky top-0 z-[1] hidden border-b border-slate-100 bg-slate-50 px-4 py-2 sm:grid sm:grid-cols-[minmax(0,1fr)_auto] sm:gap-3"
                 role="row"
               >
                 <span className="text-[10px] font-semibold uppercase tracking-[0.18em] text-slate-400" role="columnheader">
@@ -531,8 +663,8 @@ export function PackageWorkbenchPanel({
                   Decision · Severity
                 </span>
               </div>
-              <div role="rowgroup">
-                {sortedFindings.map((finding) => (
+              <div className="max-h-[min(60vh,32rem)] overflow-y-auto overscroll-y-contain" role="rowgroup">
+                {pagedFindings.map((finding) => (
                   <FindingRow
                     key={finding.id}
                     finding={finding}
@@ -543,9 +675,17 @@ export function PackageWorkbenchPanel({
               </div>
             </div>
           )}
-          {selectedFinding !== null && <FindingDetailPanel finding={selectedFinding} />}
         </div>
       )}
+      {selectedFinding !== null ? (
+        <GuardModalLayer
+          ariaLabel={`Finding detail for ${selectedFinding.packageName}`}
+          onClose={handleCloseFinding}
+          panelClassName="w-full max-w-2xl"
+        >
+          <FindingDetailPanel finding={selectedFinding} onClose={handleCloseFinding} />
+        </GuardModalLayer>
+      ) : null}
     </div>
   );
 }

{plugin_scanner-2.0.722 → plugin_scanner-2.0.723}/dashboard/src/supply-chain-firewall-panel.tsx

@@ -165,6 +165,7 @@ export const PackageFirewallPanel = forwardRef(function PackageFirewallPanel(
   onAuditErrorChange?: (message: string | null) => void;
   onStateChanged?: () => Promise<void> | void;
   onAuditCompleted?: (resultDetail: Record<string, unknown>) => void;
+  onAuditStarted?: () => void;
   onAuditRunningChange?: (running: boolean) => void;
   runAuditRef?: MutableRefObject<(() => void) | null>;
 },
@@ -177,6 +178,7 @@ export const PackageFirewallPanel = forwardRef(function PackageFirewallPanel(
     onAuditErrorChange,
     onStateChanged,
     onAuditCompleted,
+    onAuditStarted,
     onAuditRunningChange,
     runAuditRef,
   } = props;
@@ -285,6 +287,7 @@ export const PackageFirewallPanel = forwardRef(function PackageFirewallPanel(
       setConnectError(null);
       setActivationAssistError(null);
       onAuditErrorChange?.(null);
+      onAuditStarted?.();
       onAuditRunningChange?.(true);
       const statusWorkspaceDir =
         panelLoad.phase === "loaded" ? panelLoad.data.audit_workspace_dir ?? null : null;
@@ -344,6 +347,7 @@ export const PackageFirewallPanel = forwardRef(function PackageFirewallPanel(
       clearAuditConnectGate,
       closeAuditRecovery,
       onAuditCompleted,
+      onAuditStarted,
       onAuditErrorChange,
       onAuditRunningChange,
       onStateChanged,

{plugin_scanner-2.0.722 → plugin_scanner-2.0.723}/dashboard/src/supply-chain-hub-workspace.tsx

@@ -1,7 +1,10 @@
-import { lazy, Suspense, useCallback } from "react";
+import { lazy, Suspense, useCallback, useMemo, useRef } from "react";
 import type { GuardApprovalGatePublicConfig, GuardPolicyDecision, GuardReceipt, GuardRuntimeSnapshot } from "./guard-types";
 import { WorkspacePageHeader } from "./workspace-page-header";
 import { SUPPLY_CHAIN_WORKSPACE_SHELL_CLASS } from "./supply-chain-workspace-layout";
+import { PackageFirewallPanel, type PackageFirewallPanelHandle } from "./supply-chain-firewall-panel";
+import { useSupplyChainAuditSession } from "./use-supply-chain-audit-session";
+import { resolveSupplyChainAuditWorkspaceDir } from "./supply-chain-audit-workspace";
 
 const SupplyChainWorkspace = lazy(() =>
   import("./supply-chain-workspace").then((m) => ({ default: m.SupplyChainWorkspace }))
@@ -45,6 +48,16 @@ export function SupplyChainHubWorkspace(props: {
   onRuntimeRefresh?: () => Promise<void> | void;
 }) {
   const tab = viewToTab(props.activeView);
+  const firewallPanelRef = useRef<PackageFirewallPanelHandle>(null);
+  const auditSession = useSupplyChainAuditSession({
+    snapshot: props.snapshot,
+    onNavigate: props.onNavigate,
+  });
+
+  const auditWorkspaceDir = useMemo(
+    () => resolveSupplyChainAuditWorkspaceDir(props.snapshot.managed_installs ?? []),
+    [props.snapshot.managed_installs],
+  );
 
   const handleTabChange = useCallback(
     (value: HubTab) => {
@@ -67,18 +80,40 @@ export function SupplyChainHubWorkspace(props: {
         {tab === "supply-chain" && (
           <SupplyChainWorkspace
             snapshot={props.snapshot}
-            approvalGate={props.approvalGate}
             onGoHome={props.onGoHome}
             onRuntimeRefresh={props.onRuntimeRefresh}
+            firewallPanelRef={firewallPanelRef}
+            onAuditNavigate={() => props.onNavigate("/audit")}
+            auditSnapshot={auditSession.auditSnapshot}
+            auditRunning={auditSession.auditRunning}
           />
         )}
         {tab === "audit" && (
-          <AuditWorkspace snapshot={props.snapshot} receipts={props.receipts} approvalGate={props.approvalGate} />
+          <AuditWorkspace
+            snapshot={props.snapshot}
+            receipts={props.receipts}
+            approvalGate={props.approvalGate}
+            auditSession={auditSession}
+          />
         )}
         {tab === "feed-health" && (
           <FeedHealthWorkspace snapshot={props.snapshot} onOpenSettings={props.onOpenSettings} />
         )}
       </Suspense>
+      <div className={tab === "supply-chain" ? undefined : "hidden"} aria-hidden={tab !== "supply-chain"}>
+        <PackageFirewallPanel
+          ref={firewallPanelRef}
+          approvalGate={props.approvalGate}
+          auditWorkspaceDir={auditWorkspaceDir}
+          onAuditConnectGateChange={auditSession.setAuditConnectGate}
+          onAuditErrorChange={auditSession.handleAuditErrorChange}
+          onStateChanged={props.onRuntimeRefresh}
+          onAuditStarted={auditSession.handleAuditStarted}
+          onAuditCompleted={auditSession.handleAuditCompleted}
+          onAuditRunningChange={auditSession.handleAuditRunningChange}
+          runAuditRef={auditSession.runAuditRef}
+        />
+      </div>
     </div>
   );
 }