plugin-scanner 2.0.682__tar.gz → 2.0.684__tar.gz

{plugin_scanner-2.0.682 → plugin_scanner-2.0.684}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: plugin-scanner
-Version: 2.0.682
+Version: 2.0.684
 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.682 → plugin_scanner-2.0.684}/dashboard/src/harness-action-errors.test.ts

@@ -2,6 +2,8 @@ import { GuardHarnessActionError } from "./guard-api";
 import {
   isApprovalGateRequiredError,
   isGuardHarnessActionError,
+  isSupplyChainSyncConnectError,
+  readHarnessActionUserMessage,
   resolveApprovalGateSyncFailure,
 } from "./harness-action-errors";
 
@@ -111,4 +113,41 @@ const withCredentials = resolveApprovalGateSyncFailure(
 );
 assert(withCredentials.kind === "failed", "wrong password stays on approval form with error");
 
+assert(
+  isSupplyChainSyncConnectError(
+    makeHarnessError(403, {
+      error: "guard_cloud_connect_required",
+      message: "Guard Cloud workspace is not connected.",
+    }),
+  ),
+  "connect required sync errors are detected",
+);
+assert(
+  isSupplyChainSyncConnectError(
+    makeHarnessError(403, {
+      error: "guard_cloud_reconnect_required",
+      message: "Guard Cloud authorization expired.",
+    }),
+  ),
+  "reconnect required sync errors are detected",
+);
+assert(
+  !isSupplyChainSyncConnectError(
+    makeHarnessError(502, {
+      error: "supply_chain_sync_failed",
+      message: "Guard supply-chain bundle sync failed.",
+    }),
+  ),
+  "sync transport failures are not connect errors",
+);
+
+const networkFailure = resolveApprovalGateSyncFailure(new Error("Failed to fetch"), {
+  hasCredentials: true,
+});
+assert(
+  networkFailure.kind === "failed" &&
+    networkFailure.message.includes("lost connection while syncing"),
+  "failed to fetch maps to daemon connection guidance",
+);
+
 console.log("harness-action-errors.test.ts: all assertions passed");

{plugin_scanner-2.0.682 → plugin_scanner-2.0.684}/dashboard/src/harness-action-errors.ts

@@ -17,6 +17,13 @@ const APPROVAL_GATE_NON_CREDENTIAL_CODES = new Set([
 const APPROVAL_CREDENTIAL_PROMPT_MESSAGE =
   /approval(?:\s+gate)?\s+password is required|totp code is required/i;
 
+const SUPPLY_CHAIN_CONNECT_ERROR_CODES = new Set([
+  "guard_cloud_connect_required",
+  "guard_cloud_reconnect_required",
+]);
+
+const GUARD_FETCH_NETWORK_ERROR_MESSAGE = /failed to fetch|networkerror|load failed/i;
+
 export function isGuardHarnessActionError(error: unknown): error is GuardHarnessActionError {
   if (error instanceof GuardHarnessActionError) {
     return true;
@@ -65,6 +72,22 @@ function isApprovalCredentialPromptCode(code: string | null): boolean {
   return APPROVAL_CREDENTIAL_PROMPT_MESSAGE.test(code);
 }
 
+export function isSupplyChainSyncConnectError(error: unknown): boolean {
+  const code = readHarnessActionErrorCode(error);
+  return code !== null && SUPPLY_CHAIN_CONNECT_ERROR_CODES.has(code);
+}
+
+export function readHarnessActionUserMessage(error: unknown, fallback: string): string {
+  if (error instanceof Error && GUARD_FETCH_NETWORK_ERROR_MESSAGE.test(error.message)) {
+    return "Guard lost connection while syncing supply-chain intel. Confirm the local daemon is still running, then try again.";
+  }
+  const structuredMessage = readHarnessActionErrorMessage(error);
+  if (structuredMessage !== null) {
+    return structuredMessage;
+  }
+  return fallback;
+}
+
 export function isApprovalGateRequiredError(error: unknown): boolean {
   const code = readHarnessActionErrorCode(error);
   if (code !== null && APPROVAL_GATE_NON_CREDENTIAL_CODES.has(code)) {
@@ -94,6 +117,6 @@ export function resolveApprovalGateSyncFailure(
   }
   return {
     kind: "failed",
-    message: readHarnessActionErrorMessage(error) ?? "Sync failed.",
+    message: readHarnessActionUserMessage(error, "Sync failed."),
   };
 }

{plugin_scanner-2.0.682 → plugin_scanner-2.0.684}/dashboard/src/package-firewall-connect.test.tsx

@@ -149,6 +149,14 @@ assert(
   !freeViewMarkup.includes("AVAILABLE NOW"),
   "PF2: staged local recovery view should stay compact instead of nesting extra helper cards",
 );
+assert(
+  freeViewMarkup.includes("What still works locally"),
+  "PF2: local recovery hint should live in progressive disclosure",
+);
+assert(
+  freeViewMarkup.includes("Connect progress"),
+  "PF2: compact connect view should render the progressive step rail",
+);
 assert(
   !freeViewMarkup.includes("SECURITY"),
   "PF2: staged local recovery view should not render the large nested security card",
@@ -218,3 +226,122 @@ assert(
   reconnectLikeMarkup.includes("Repair required"),
   "PF4: broken post-connect local auth should render repair guidance instead of a first-connect badge",
 );
+
+const failedConnectMarkup = renderToStaticMarkup(
+  <ConnectFlowCard
+    compact
+    connectError="HTTP Error 500: Internal Server Error"
+    connectStarting={false}
+    connectFlow={{
+      state: "failed",
+      title: "Guard Cloud sign-in needs attention",
+      detail: "Reconnect HOL Guard Cloud to restore package firewall access.",
+      action_label: "Repair Guard Cloud access",
+      connect_url: "https://hol.org/guard/connect",
+      authorize_url: "https://hol.org/mock-authorize",
+      browser_opened: false,
+      request_id: "guard-connect-2",
+      poll_after_ms: 1500,
+    }}
+    mode="repair"
+    onStartConnect={() => undefined}
+  />,
+);
+
+assert(
+  failedConnectMarkup.includes("Cloud sign-in is temporarily unavailable"),
+  "PF5: connect errors should surface human guidance instead of raw HTTP text",
+);
+assert(
+  !failedConnectMarkup.includes("HTTP Error 500"),
+  "PF5: raw HTTP errors should not appear in the connect card",
+);
+assert(
+  !failedConnectMarkup.includes("What still works locally"),
+  "PF5: omitted localRecoveryHint should not render an empty disclosure",
+);
+assert(
+  failedConnectMarkup.includes("Connect progress"),
+  "PF5: failed connect card should keep the progressive step rail",
+);
+
+const authExpiredMarkup = renderToStaticMarkup(
+  <ConnectFlowCard
+    compact
+    connectError="HTTP Error 401: Unauthorized"
+    connectStarting={false}
+    connectFlow={{
+      state: "failed",
+      title: "Guard Cloud sign-in needs attention",
+      detail: "Reconnect HOL Guard Cloud to restore package firewall access.",
+      action_label: "Repair Guard Cloud access",
+      connect_url: "https://hol.org/guard/connect",
+      authorize_url: null,
+      browser_opened: null,
+      request_id: null,
+      poll_after_ms: null,
+    }}
+    mode="repair"
+    onStartConnect={() => undefined}
+  />,
+);
+assert(
+  authExpiredMarkup.includes("Guard Cloud authorization expired"),
+  "PF6: 401 connect errors should map to reconnect guidance",
+);
+
+const networkMarkup = renderToStaticMarkup(
+  <ConnectFlowCard
+    compact
+    connectError="Failed to fetch"
+    connectStarting={false}
+    connectFlow={{
+      state: "failed",
+      title: "Guard Cloud sign-in needs attention",
+      detail: "Reconnect HOL Guard Cloud to restore package firewall access.",
+      action_label: "Repair Guard Cloud access",
+      connect_url: "https://hol.org/guard/connect",
+      authorize_url: null,
+      browser_opened: null,
+      request_id: null,
+      poll_after_ms: null,
+    }}
+    mode="repair"
+    onStartConnect={() => undefined}
+  />,
+);
+assert(
+  networkMarkup.includes("Guard lost contact with the local daemon"),
+  "PF6: network connect errors should map to daemon guidance",
+);
+
+const unknownMarkup = renderToStaticMarkup(
+  <ConnectFlowCard
+    compact
+    connectError="traceback at /tmp/guard-connect.log line 42"
+    connectStarting={false}
+    connectFlow={{
+      state: "failed",
+      title: "Guard Cloud sign-in needs attention",
+      detail: "Reconnect HOL Guard Cloud to restore package firewall access.",
+      action_label: "Repair Guard Cloud access",
+      connect_url: "https://hol.org/guard/connect",
+      authorize_url: null,
+      browser_opened: null,
+      request_id: null,
+      poll_after_ms: null,
+    }}
+    mode="repair"
+    onStartConnect={() => undefined}
+  />,
+);
+assert(
+  unknownMarkup.includes("Guard could not connect right now"),
+  "PF6: unknown connect errors should fall back to generic guidance",
+);
+assert(
+  !unknownMarkup.includes("/tmp/guard-connect.log"),
+  "PF6: unknown connect errors should not leak raw diagnostics",
+);
+
+console.log("package-firewall-connect.test.tsx: all assertions passed");

{plugin_scanner-2.0.682 → plugin_scanner-2.0.684}/dashboard/src/supply-chain-audit-connect.ts

@@ -1,6 +1,15 @@
 import { GuardHarnessActionError } from "./guard-api";
+import {
+  isGuardHarnessActionError,
+  isSupplyChainSyncConnectError,
+  readHarnessActionErrorCode,
+} from "./harness-action-errors";
 import type { PackageFirewallStatusResponse } from "./guard-types";
 import { isSupplyChainAuditIncomplete, resolveSupplyChainAuditFailure } from "./supply-chain-audit-result";
+import {
+  resolveSupplyChainAuditRecoveryGate,
+  type SupplyChainAuditRecoveryGate,
+} from "./supply-chain-audit-recovery";
 
 export { isSupplyChainAuditIncomplete, resolveSupplyChainAuditFailure };
 
@@ -20,14 +29,26 @@ export type SupplyChainAuditConnectGate = {
 };
 
 export function isSupplyChainAuditConnectError(error: unknown): error is GuardHarnessActionError {
-  if (!(error instanceof GuardHarnessActionError)) {
-    return false;
+  return isGuardHarnessActionError(error) && isSupplyChainSyncConnectError(error);
+}
+
+export function resolveSupplyChainSyncConnectRecoveryGate(
+  error: unknown,
+): SupplyChainAuditRecoveryGate | null {
+  if (!isSupplyChainSyncConnectError(error)) {
+    return null;
   }
-  const code = error.payload?.error;
-  return (
-    typeof code === "string" &&
-    (SUPPLY_CHAIN_AUDIT_CONNECT_ERROR_CODES as readonly string[]).includes(code)
-  );
+  const code = readHarnessActionErrorCode(error);
+  if (code === "guard_cloud_reconnect_required") {
+    return resolveSupplyChainAuditRecoveryGate({
+      audit_status: "incomplete",
+      audit_outcome: "expired",
+    });
+  }
+  return resolveSupplyChainAuditRecoveryGate({
+    audit_status: "incomplete",
+    audit_outcome: "not_connected",
+  });
 }
 
 export function packageAuditNeedsCloudConnect(data: PackageFirewallStatusResponse): boolean {

{plugin_scanner-2.0.682 → plugin_scanner-2.0.684}/dashboard/src/supply-chain-firewall-panel.tsx

@@ -18,6 +18,8 @@ import {
 } from "./guard-api";
 import {
   isApprovalGateRequiredError,
+  isSupplyChainSyncConnectError,
+  readHarnessActionUserMessage,
   resolveApprovalGateSyncFailure,
 } from "./harness-action-errors";
 import { EntitlementNotice, ConnectFlowCard } from "./supply-chain-firewall-views";
@@ -27,6 +29,7 @@ import {
   packageAuditNeedsCloudConnect,
   resolveSupplyChainAuditConnectGate,
   resolveSupplyChainAuditFailure,
+  resolveSupplyChainSyncConnectRecoveryGate,
   supplyChainAuditUserMessage,
   type SupplyChainAuditConnectGate,
 } from "./supply-chain-audit-connect";
@@ -370,17 +373,14 @@ export const PackageFirewallPanel = forwardRef(function PackageFirewallPanel(
         }
         setAuditRecoveryPhase("ready");
       } catch (err) {
-        if (isSupplyChainAuditConnectError(err)) {
-          const connectGate = resolveSupplyChainAuditRecoveryGate({
-            audit_status: "incomplete",
-            audit_outcome: "not_connected",
-          });
+        if (isSupplyChainSyncConnectError(err)) {
+          const connectGate = resolveSupplyChainSyncConnectRecoveryGate(err);
           if (connectGate !== null) {
             setAuditRecoveryGate(connectGate);
+            setAuditRecoveryPhase("ready");
+            setAuditRecoveryError(null);
+            return;
           }
-          setAuditRecoveryPhase("ready");
-          setAuditRecoveryError(null);
-          return;
         }
         const failure = resolveApprovalGateSyncFailure(err, {
           hasCredentials: credentials !== undefined,
@@ -590,7 +590,16 @@ export const PackageFirewallPanel = forwardRef(function PackageFirewallPanel(
           await openSyncApprovalRecovery();
           return;
         }
-        const message = err instanceof Error ? err.message : "Operation failed.";
+        if (isSupplyChainSyncConnectError(err)) {
+          const connectGate = resolveSupplyChainSyncConnectRecoveryGate(err);
+          if (connectGate !== null) {
+            setAuditRecoveryGate(connectGate);
+            setAuditRecoveryPhase("ready");
+            setAuditRecoveryError(null);
+            return;
+          }
+        }
+        const message = readHarnessActionUserMessage(err, "Operation failed.");
         setLastFailed({ op, manager: null, message });
       } finally {
         setPendingOp(null);

{plugin_scanner-2.0.682 → plugin_scanner-2.0.684}/dashboard/src/supply-chain-firewall-views.tsx

@@ -78,30 +78,127 @@ type ConnectStepProps = {
   body: string;
   current: boolean;
   done: boolean;
+  emphasis?: "default" | "prominent";
   index: number;
   title: string;
 };
 
-function ConnectStep({ body, current, done, index, title }: ConnectStepProps) {
-  const toneClass = done
-    ? "border-brand-green/20 bg-brand-green/[0.04]"
-    : current
-    ? "border-brand-blue/20 bg-brand-blue/[0.04]"
-    : "border-slate-200 bg-white/85";
-  const badgeClass = done
-    ? "bg-brand-green/10 text-brand-green"
-    : current
-    ? "bg-brand-blue/10 text-brand-blue"
-    : "bg-slate-100 text-slate-500";
+function humanizeConnectError(error: string): { detail: string; title: string } {
+  const trimmed = error.trim();
+  if (/HTTP Error 500|internal server error/i.test(trimmed)) {
+    return {
+      title: "Cloud sign-in is temporarily unavailable",
+      detail: "Guard could not finish the repair flow. Wait a moment, then try connect again.",
+    };
+  }
+  if (/HTTP Error 401|unauthorized/i.test(trimmed)) {
+    return {
+      title: "Guard Cloud authorization expired",
+      detail: "Run connect again to refresh signed access on this machine.",
+    };
+  }
+  if (/failed to fetch|networkerror|load failed/i.test(trimmed)) {
+    return {
+      title: "Guard lost contact with the local daemon",
+      detail: "Confirm the local daemon is still running, then try connect again.",
+    };
+  }
+  return {
+    title: "Guard could not start local connect",
+    detail: "Guard could not connect right now. Check that the local daemon is running, then try again.",
+  };
+}
+
+function ConnectStep({
+  body,
+  current,
+  done,
+  emphasis = "default",
+  index,
+  title,
+}: ConnectStepProps) {
+  const prominent = emphasis === "prominent";
+  let toneClass: string;
+  if (done) {
+    toneClass = "border-brand-green/25 bg-brand-green/[0.05]";
+  } else if (current && prominent) {
+    toneClass = "border-brand-blue/30 bg-gradient-to-br from-brand-blue/[0.08] to-white shadow-sm";
+  } else if (current) {
+    toneClass = "border-brand-blue/25 bg-brand-blue/[0.05]";
+  } else {
+    toneClass = "border-slate-200/90 bg-white/90";
+  }
+  let badgeClass: string;
+  if (done) {
+    badgeClass = "bg-brand-green/12 text-brand-green";
+  } else if (current) {
+    badgeClass = "bg-brand-blue/12 text-brand-blue";
+  } else {
+    badgeClass = "bg-slate-100 text-slate-500";
+  }
+  const titleClass = prominent
+    ? "text-base font-semibold tracking-[-0.02em] text-brand-dark"
+    : "text-sm font-semibold text-brand-dark";
+  const bodyClass = prominent
+    ? "mt-1.5 text-sm leading-relaxed text-slate-600"
+    : "mt-1 text-sm leading-relaxed text-slate-500";
   return (
-    <div className={`rounded-[18px] border px-3.5 py-3 ${toneClass}`}>
+    <div className={`rounded-2xl border px-4 py-3.5 ${toneClass}`}>
       <div className="flex items-start gap-3">
-        <span className={`inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-[11px] font-semibold ${badgeClass}`}>
-          {done ? <HiMiniCheckCircle className="h-3.5 w-3.5" aria-hidden="true" /> : index}
+        <span
+          className={`inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-xs font-semibold ${badgeClass}`}
+        >
+          {done ? <HiMiniCheckCircle className="h-4 w-4" aria-hidden="true" /> : index}
         </span>
         <div className="min-w-0">
-          <p className="text-sm font-semibold text-brand-dark">{title}</p>
-          <p className="mt-1 text-xs leading-relaxed text-slate-500">{body}</p>
+          <p className={titleClass}>{title}</p>
+          <p className={bodyClass}>{body}</p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function ConnectProgressRail({
+  steps,
+}: {
+  steps: Array<{ body: string; current: boolean; done: boolean; title: string }>;
+}) {
+  const activeIndex = steps.findIndex((step) => step.current);
+  const focusIndex = activeIndex >= 0 ? activeIndex : steps.findIndex((step) => !step.done);
+  return (
+    <div className="space-y-2.5" role="list" aria-label="Connect progress">
+      {steps.map((step, index) => (
+        <div key={`${index}-${step.title}`} role="listitem">
+          <ConnectStep
+            index={index + 1}
+            title={step.title}
+            body={step.body}
+            current={step.current}
+            done={step.done}
+            emphasis={index === focusIndex ? "prominent" : "default"}
+          />
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function ConnectErrorBanner({ connectError }: { connectError: string }) {
+  const copy = humanizeConnectError(connectError);
+  return (
+    <div
+      className="rounded-2xl border border-brand-attention/30 bg-brand-attention/[0.06] px-4 py-3.5"
+      role="alert"
+    >
+      <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="min-w-0">
+          <p className="text-sm font-semibold text-brand-dark">{copy.title}</p>
+          <p className="mt-1 text-sm leading-relaxed text-slate-600">{copy.detail}</p>
         </div>
       </div>
     </div>
@@ -255,9 +352,7 @@ export function ConnectFlowCard({
         </div>
         <p className="text-sm leading-relaxed text-slate-600">{helperText}</p>
         {connectError !== null ? (
-          <p className="text-sm text-brand-attention" role="alert">
-            {connectError}
-          </p>
+          <ConnectErrorBanner connectError={connectError} />
         ) : null}
         <div className="flex flex-wrap items-center gap-2">
           <ActionButton variant="primary" onClick={onStartConnect} disabled={primaryBusy}>
@@ -280,60 +375,53 @@ export function ConnectFlowCard({
   }
   if (compact) {
     return (
-      <div className="space-y-3">
-        <div className="space-y-2">
+      <div className="space-y-5">
+        <div className="space-y-3">
           <div className="flex flex-wrap items-center gap-2">
-            <p className="text-[10px] font-semibold uppercase tracking-[0.18em] text-brand-blue">
+            <p className="text-[11px] font-semibold uppercase tracking-[0.16em] text-brand-blue">
               HOL Guard Cloud
             </p>
             <Tag tone={statusTone}>{statusLabel}</Tag>
           </div>
-          <div className="space-y-1">
-            <p className="text-base font-semibold tracking-[-0.02em] text-brand-dark">
-              {titleCopy}
-            </p>
-            <p className="max-w-3xl text-sm leading-relaxed text-slate-500">
-              {detailCopy}
-            </p>
+          <div className="space-y-2">
+            <p className="text-lg font-semibold tracking-[-0.02em] text-brand-dark">{titleCopy}</p>
+            <p className="max-w-2xl text-sm leading-relaxed text-slate-600">{detailCopy}</p>
           </div>
         </div>
 
-        <div className="grid gap-2 text-xs leading-relaxed text-slate-500 md:grid-cols-3">
-          {steps.map((step, index) => (
-            <div key={step.title} className="min-w-0">
-              <p className="font-semibold text-brand-dark">
-                {index + 1}. {step.title}
-              </p>
-              <p className="mt-0.5">{step.body}</p>
-            </div>
-          ))}
-        </div>
-
-        <div className="flex flex-wrap gap-x-4 gap-y-1 text-xs leading-relaxed text-slate-500">
-          {localRecoveryHint !== null && <span>{localRecoveryHint}</span>}
-          <span>Guard changes routing only after this machine receives signed cloud access.</span>
-        </div>
+        <ConnectProgressRail steps={steps} />
 
-        {connectError !== null && (
-          <p className="text-xs leading-relaxed text-brand-attention">{connectError}</p>
-        )}
+        {connectError !== null ? <ConnectErrorBanner connectError={connectError} /> : null}
 
-        <div className="flex flex-wrap items-center gap-2">
+        <div className="flex flex-wrap items-center gap-2.5">
           <ActionButton variant="primary" onClick={onStartConnect} disabled={primaryBusy}>
             {primaryBusy ? (
-              <HiMiniArrowPath className="mr-1.5 h-3.5 w-3.5 animate-spin" aria-hidden="true" />
+              <HiMiniArrowPath className="mr-1.5 h-4 w-4 animate-spin" aria-hidden="true" />
             ) : (
-              <HiMiniShieldCheck className="mr-1.5 h-3.5 w-3.5" aria-hidden="true" />
+              <HiMiniShieldCheck className="mr-1.5 h-4 w-4" aria-hidden="true" />
             )}
             {primaryLabel}
           </ActionButton>
-          {showManualLink && (
+          {showManualLink ? (
             <ActionButton href={manualHref} variant="outline">
               Open sign-in page
-              <HiMiniArrowTopRightOnSquare className="ml-1.5 h-3.5 w-3.5" aria-hidden="true" />
+              <HiMiniArrowTopRightOnSquare className="ml-1.5 h-4 w-4" aria-hidden="true" />
             </ActionButton>
-          )}
+          ) : null}
         </div>
+
+        {localRecoveryHint != null ? (
+          <details className="rounded-2xl border border-slate-200 bg-slate-50/70 px-4 py-3">
+            <summary className="cursor-pointer list-none text-sm font-medium text-brand-dark">
+              What still works locally
+            </summary>
+            <p className="mt-2 text-sm leading-relaxed text-slate-600">{localRecoveryHint}</p>
+          </details>
+        ) : null}
+
+        <p className="text-sm leading-relaxed text-slate-500">
+          Guard changes routing only after this machine receives signed cloud access.
+        </p>
       </div>
     );
   }
@@ -367,34 +455,18 @@ export function ConnectFlowCard({
           </div>
         </div>
 
-        <div className="grid gap-2.5 md:grid-cols-3">
-          {steps.map((step, index) => (
-            <ConnectStep
-              key={step.title}
-              index={index + 1}
-              title={step.title}
-              body={step.body}
-              current={step.current}
-              done={step.done}
-            />
-          ))}
-        </div>
+        <ConnectProgressRail steps={steps} />
 
         {localRecoveryHint != null && (
-          <div className="rounded-2xl border border-slate-200 bg-slate-50/80 px-3.5 py-3">
-            <p className="text-xs font-semibold uppercase tracking-[0.14em] text-slate-400">
-              Available now
-            </p>
-            <p className="mt-1 text-xs leading-relaxed text-slate-600">{localRecoveryHint}</p>
-          </div>
+          <details className="rounded-2xl border border-slate-200 bg-slate-50/80 px-4 py-3">
+            <summary className="cursor-pointer list-none text-sm font-medium text-brand-dark">
+              What still works locally
+            </summary>
+            <p className="mt-2 text-sm leading-relaxed text-slate-600">{localRecoveryHint}</p>
+          </details>
         )}
 
-        {connectError !== null && (
-          <div className="rounded-[18px] border border-brand-attention/25 bg-brand-attention/[0.05] px-3.5 py-3">
-            <p className="text-sm font-medium text-brand-dark">Guard could not start local connect</p>
-            <p className="mt-1 text-xs leading-relaxed text-slate-600">{connectError}</p>
-          </div>
-        )}
+        {connectError !== null ? <ConnectErrorBanner connectError={connectError} /> : null}
 
         <div className="flex flex-wrap items-center gap-2">
           <ActionButton variant="primary" onClick={onStartConnect} disabled={primaryBusy}>
@@ -424,17 +496,17 @@ type CliFallbackProps = {
 export function CliFallback({ commands }: CliFallbackProps) {
   const items = Object.entries(commands);
   return (
-    <details className="rounded-xl border border-slate-200 bg-slate-50/80 px-4 py-3">
-      <summary className="cursor-pointer list-none text-xs font-semibold uppercase tracking-[0.18em] text-slate-400">
-        CLI fallback
+    <details className="rounded-2xl border border-slate-200 bg-slate-50/80 px-4 py-3.5">
+      <summary className="cursor-pointer list-none text-sm font-medium text-slate-600">
+        Advanced: run connect from the terminal
       </summary>
-      <div className="mt-3 space-y-1.5">
+      <div className="mt-3 space-y-2">
         {items.map(([label, command]) => (
           <div key={label} className="min-w-0">
-            <span className="mr-2 text-[10px] font-semibold uppercase tracking-wide text-slate-400">
+            <span className="mr-2 text-xs font-semibold uppercase tracking-wide text-slate-400">
               {label}
             </span>
-            <code className="break-all font-mono text-xs text-brand-dark">{command}</code>
+            <code className="break-all font-mono text-sm text-brand-dark">{command}</code>
           </div>
         ))}
       </div>
@@ -478,7 +550,7 @@ export function EntitlementNotice({
     data.package_shims.some((shim) => shim.installed) ||
     data.protection?.path_status === "restart_required";
   return (
-    <div className="space-y-4 px-4 py-4">
+    <div className="space-y-5 px-4 py-5 sm:px-5 sm:py-6">
       {connectRequired && data.connect_flow !== null ? (
         <ConnectFlowCard
           compact={compactConnectNotice}