aidevops 3.32.5 → 3.32.6

package/packages/gui-web/src/SecuritySurface.tsx

@@ -0,0 +1,187 @@
+import type { GuiSecretReference, GuiStatusData, GuiVaultStatusData } from "@aidevops/gui-shared";
+import { type ReactElement, useMemo, useState } from "react";
+import { FiActivity, FiAlertTriangle, FiCheckCircle, FiKey, FiLink, FiLock, FiSearch, FiShield, FiTerminal } from "react-icons/fi";
+import { type VaultDialogIntent, vaultActionLabel, vaultDialogIntentForStatus } from "./VaultBadges";
+
+type SecretFilter = "all" | "configured" | "attention";
+
+export function SecuritySurface({ onVaultRequest, status }: {
+  onVaultRequest: (intent: VaultDialogIntent) => void;
+  status: GuiStatusData;
+}): ReactElement {
+  const [filter, setFilter] = useState<SecretFilter>("all");
+  const [query, setQuery] = useState("");
+  const vault = status.vault;
+  const intent = vaultDialogIntentForStatus(vault);
+  const configured = status.secrets.filter((secret) => secret.status === "configured").length;
+  const needsAttention = status.secrets.length - configured;
+  const hiddenCount = vault.unlocked ? undefined : "Hidden";
+  const filteredSecrets = useMemo(
+    () => status.secrets.filter((secret) => secretMatches(secret, filter, query)),
+    [filter, query, status.secrets],
+  );
+
+  return (
+    <section className="surface-page secrets-surface" aria-label="Secrets">
+      <div className="hero-panel secrets-hero">
+        <div className="section-heading split-heading">
+          <div>
+            <p className="eyebrow">Secret references · metadata only</p>
+            <h2>Secrets</h2>
+            <p>Understand credential readiness and dependencies without exposing, copying, or sending secret values anywhere.</p>
+          </div>
+          <div className="secrets-hero-actions">
+            <span className={`secrets-state-badge ${vaultStateTone(vault)}`}><VaultStateIcon vault={vault} /> {vaultStateLabel(vault)}</span>
+            <button className={intent === "setup" || intent === "unlock" ? "primary-action" : "secondary-action"} onClick={() => onVaultRequest(intent)} type="button">{vaultActionLabel(intent)}</button>
+          </div>
+        </div>
+        <div className="secrets-boundary" role="note">
+          <FiShield aria-hidden="true" />
+          <div><strong>Values stay out of the interface.</strong><span>Only reference names and non-sensitive health metadata become visible after local Vault unlock. Values are never returned, rendered, copied, exported, logged, or sent to AI.</span></div>
+        </div>
+      </div>
+
+      {/* biome-ignore lint/a11y/useSemanticElements: role=group preserves the existing grid element and requested accessible grouping. */}
+      <div className="secrets-metric-grid" aria-label="Secrets summary" role="group">
+        <SecretMetric detail={vault.unlocked ? "metadata records" : "visible after local unlock"} icon={<FiKey />} label="References" value={hiddenCount ?? String(status.secrets.length)} />
+        <SecretMetric detail={vault.unlocked ? "ready for dependent tools" : "visible after local unlock"} icon={<FiCheckCircle />} label="Configured" value={hiddenCount ?? String(configured)} />
+        <SecretMetric detail={vault.unlocked ? "missing or not yet checked" : "visible after local unlock"} icon={<FiAlertTriangle />} label="Needs attention" value={hiddenCount ?? String(needsAttention)} />
+        <SecretMetric detail="hidden local prompt only" icon={<FiTerminal />} label="Value custody" value="Write-only" />
+      </div>
+
+      {vault.unlocked ? (
+        <UnlockedSecrets filter={filter} filteredSecrets={filteredSecrets} onFilterChange={setFilter} onQueryChange={setQuery} query={query} total={status.secrets.length} />
+      ) : (
+        <LockedSecrets intent={intent} onVaultRequest={onVaultRequest} vault={vault} />
+      )}
+    </section>
+  );
+}
+
+function LockedSecrets({ intent, onVaultRequest, vault }: { intent: VaultDialogIntent; onVaultRequest: (intent: VaultDialogIntent) => void; vault: GuiVaultStatusData }): ReactElement {
+  const guidance = vaultGuidance(vault);
+  return (
+    <>
+      <section className={`panel secrets-guidance ${vault.status === "corrupted" ? "is-error" : ""}`} aria-label="Vault access guidance">
+        <div className="section-heading split-heading">
+          <div>
+            <p className="eyebrow">{guidance.eyebrow}</p>
+            <h2>{guidance.title}</h2>
+            <p>{guidance.detail}</p>
+          </div>
+          <button className="secondary-action" onClick={() => onVaultRequest(intent)} type="button">{vaultActionLabel(intent)}</button>
+        </div>
+        <div className="secrets-evidence-strip" role="status">
+          <span><strong>Vault</strong>{vault.status}</span>
+          <span><strong>Setup</strong>{vault.setup_state}</span>
+          <span><strong>Helper</strong>{vault.helper_status}</span>
+          <span><strong>Preview</strong>hidden</span>
+        </div>
+      </section>
+      <section className="panel" aria-label="What Vault unlock enables">
+        <div className="section-heading">
+          <p className="eyebrow">Protected capabilities</p>
+          <h2>What unlock enables</h2>
+          <p>Unlock grants this local session access to reference metadata. Secret material remains behind secure storage helpers.</p>
+        </div>
+        <div className="secrets-capability-grid">
+          <SecretCapability detail="Names and non-sensitive configured, missing, and unchecked health states." icon={<FiKey />} title="Reference inventory" />
+          <SecretCapability detail="See which integrations, routines, and resources depend on each reference as adapters mature." icon={<FiLink />} title="Dependency awareness" />
+          <SecretCapability detail="Run allowlisted checks and rotation handoffs without reveal or copy controls." icon={<FiActivity />} title="Validation and rotation" />
+        </div>
+      </section>
+    </>
+  );
+}
+
+function UnlockedSecrets({ filter, filteredSecrets, onFilterChange, onQueryChange, query, total }: {
+  filter: SecretFilter;
+  filteredSecrets: GuiSecretReference[];
+  onFilterChange: (filter: SecretFilter) => void;
+  onQueryChange: (query: string) => void;
+  query: string;
+  total: number;
+}): ReactElement {
+  return (
+    <section className="panel secrets-inventory" aria-label="Secret reference inventory">
+      <div className="section-heading split-heading">
+        <div><p className="eyebrow">Unlocked for this local session</p><h2>Reference inventory</h2><p>Metadata can be reviewed; values remain unavailable to the browser.</p></div>
+        <span className="count-pill">{filteredSecrets.length} of {total}</span>
+      </div>
+      <div className="secrets-toolbar">
+        <label className="secrets-search"><FiSearch aria-hidden="true" /><span className="sr-only">Search references</span><input onChange={(event) => onQueryChange(event.currentTarget.value)} placeholder="Search reference names" type="search" value={query} /></label>
+        {/* biome-ignore lint/a11y/useSemanticElements: role=group preserves the existing toolbar layout and requested accessible grouping. */}
+        <div className="secrets-filters" aria-label="Filter references" role="group">
+          {(["all", "configured", "attention"] as const).map((option) => <button aria-pressed={filter === option} key={option} onClick={() => onFilterChange(option)} type="button">{option === "attention" ? "Needs attention" : titleCase(option)}</button>)}
+        </div>
+      </div>
+      {filteredSecrets.length === 0 ? <p className="empty-state">No secret references match this view.</p> : (
+        <div className="secrets-table-wrap">
+          <table className="secrets-reference-table">
+            <thead><tr><th scope="col">Reference</th><th scope="col">Health</th><th scope="col">Value access</th><th scope="col">Management</th></tr></thead>
+            <tbody>{filteredSecrets.map((secret) => <SecretRow key={secret.name} secret={secret} />)}</tbody>
+          </table>
+        </div>
+      )}
+    </section>
+  );
+}
+
+function SecretRow({ secret }: { secret: GuiSecretReference }): ReactElement {
+  return (
+    <tr>
+      <td data-label="Reference"><strong>{secret.name}</strong></td>
+      <td data-label="Health"><span className={`secret-health ${secret.status}`}>{secret.status}</span></td>
+      <td data-label="Value access">Never displayed</td>
+      <td data-label="Management"><span className="metadata-only-label"><FiTerminal aria-hidden="true" /> Secure helper</span></td>
+    </tr>
+  );
+}
+
+function SecretMetric({ detail, icon, label, value }: { detail: string; icon: ReactElement; label: string; value: string }): ReactElement {
+  return <article className="secret-metric-card"><span className="secret-metric-icon" aria-hidden="true">{icon}</span><div><span>{label}</span><strong>{value}</strong><small>{detail}</small></div></article>;
+}
+
+function SecretCapability({ detail, icon, title }: { detail: string; icon: ReactElement; title: string }): ReactElement {
+  return <article className="secret-capability-card"><span aria-hidden="true">{icon}</span><div><h3>{title}</h3><p>{detail}</p></div></article>;
+}
+
+function VaultStateIcon({ vault }: { vault: GuiVaultStatusData }): ReactElement {
+  if (vault.unlocked) return <FiCheckCircle aria-hidden="true" />;
+  if (vault.status === "unknown" || vault.status === "corrupted") return <FiAlertTriangle aria-hidden="true" />;
+  return <FiLock aria-hidden="true" />;
+}
+
+function vaultStateLabel(vault: GuiVaultStatusData): string {
+  if (vault.unlocked) return "Vault unlocked";
+  if (vault.status === "locked") return "Vault locked";
+  if (vault.status === "uninitialized") return "Vault not configured";
+  if (vault.status === "corrupted") return "Recovery required";
+  return "Status unavailable";
+}
+
+function vaultStateTone(vault: GuiVaultStatusData): string {
+  if (vault.unlocked) return "success";
+  if (vault.status === "corrupted") return "error";
+  if (vault.status === "locked" || vault.status === "uninitialized") return "warning";
+  return "unknown";
+}
+
+function vaultGuidance(vault: GuiVaultStatusData): { detail: string; eyebrow: string; title: string } {
+  if (vault.status === "locked") return { eyebrow: "Local Vault", title: "Unlock protected metadata", detail: "Use the existing passphrase in the local hidden terminal prompt. The app will refresh when you return." };
+  if (vault.status === "uninitialized") return { eyebrow: "First-use setup", title: "Create the local Vault", detail: "Initialise once in a local hidden prompt, save the passphrase in a trusted password manager, then complete the restart verification." };
+  if (vault.status === "corrupted") return { eyebrow: "Recovery required", title: "Vault metadata needs attention", detail: "Do not initialise over existing data. Review the conservative recovery options before making changes." };
+  return { eyebrow: "Status unavailable", title: "Vault readiness could not be verified", detail: "No setup or passphrase action will be offered until both local status probes return authoritative metadata." };
+}
+
+function secretMatches(secret: GuiSecretReference, filter: SecretFilter, query: string): boolean {
+  const matchesQuery = secret.name.toLocaleLowerCase().includes(query.trim().toLocaleLowerCase());
+  if (!matchesQuery) return false;
+  if (filter === "configured") return secret.status === "configured";
+  if (filter === "attention") return secret.status !== "configured";
+  return true;
+}
+
+function titleCase(value: string): string {
+  return `${value.charAt(0).toLocaleUpperCase()}${value.slice(1)}`;
+}

package/packages/gui-web/src/StatusSurfaces.tsx

@@ -1,19 +1,20 @@
 /* jshint esversion: 11 */
 import { useState } from "react";
-import type { GuiAiAppSummary, GuiLocalRepoSetupSummary, GuiSetupTargetSummary, GuiStatusData, GuiVaultCollectionSummary, GuiVaultStatusData } from "../../gui-shared/src";
+import type { GuiAiAppSummary, GuiLocalRepoSetupSummary, GuiSetupTargetSummary, GuiStatusData } from "../../gui-shared/src";
 import { plannedHomes, text } from "./app-model";
 import { FileExplorerSurface } from "./FileExplorerSurface";
 import { PathActions } from "./PathActions";
-import { type VaultDialogIntent, VaultPadlock, vaultDialogIntentForStatus } from "./VaultBadges";
 
 export { AiProvidersSurface } from "./AiProvidersSurface";
+export { SecuritySurface } from "./SecuritySurface";
+export { LockedVaultGate, VaultSurface } from "./VaultSurface";
 
 export function OverviewSurface({ status }: { status: GuiStatusData }) {
   const metrics = [
     { label: text.setup, value: status.update.restart_required ? "restart" : "current", detail: status.update.installed_version },
     { label: text.projects, value: String(status.repos.total), detail: status.repos.health },
     { label: text.config, value: String(status.settings.key_count), detail: status.settings.value_policy },
-    { label: text.security, value: String(status.secrets.length), detail: "secret references" },
+    { label: text.security, value: status.vault.unlocked ? String(status.secrets.length) : "hidden", detail: "secret references" },
   ];
 
   return (
@@ -98,173 +99,6 @@ export function ProjectsSurface({ status }: { status: GuiStatusData }) {
   );
 }
 
-export function SecuritySurface({ status }: { status: GuiStatusData }) {
-  return (
-    <section className="panel" aria-label={text.security}>
-      <div className="section-heading">
-        <p className="eyebrow">{text.readOnly}</p>
-        <h2>{text.security}</h2>
-        <p>{text.securityBoundary}</p>
-      </div>
-      <div className="notice compact-notice" role="note">
-        Vault data policy: Provider AI sends approved plaintext context to a third-party provider; Local AI keeps model processing on this device; Hybrid mode must redact or split protected context before any provider call.
-      </div>
-      <ul className="object-list">
-        {status.secrets.map((secret) => (
-          <li key={secret.name}>
-            <strong>{secret.name}</strong>
-            <span>{secret.status}</span>
-          </li>
-        ))}
-      </ul>
-    </section>
-  );
-}
-
-export function VaultSurface({ onVaultRequest, status }: { onVaultRequest: (intent: VaultDialogIntent) => void; status: GuiStatusData }) {
-  const vault = status.vault;
-  const vaultCollection = vault.collections.find((collection) => collection.surface_ids.includes("vault")) ?? vault.collections[0];
-  const readiness = [
-    { label: "migration", value: vault.readiness.migration_allowed ? "ready" : "blocked" },
-    { label: "setup", value: vault.readiness.setup_required ? "required" : "done" },
-    { label: "restart test", value: vault.readiness.restart_test_required ? "required" : "verified" },
-    { label: "remote unlock", value: vault.readiness.remote_unlock_enabled ? "enabled" : "disabled" },
-  ];
-  const featureCards = [
-    { label: text.vaultStatus, value: vault.status, detail: "Metadata-only lock state from the local helper." },
-    { label: text.vaultSetup, value: vault.setup_state, detail: vault.setup_hint },
-    { label: text.vaultLockUnlock, value: vault.locked ? "locked" : "unlocked", detail: vault.unlock_hint },
-    { label: text.vaultDevices, value: `${vault.devices.length} device`, detail: "Device trust metadata only; private keys are never exposed." },
-    { label: text.vaultSync, value: vault.sync.status, detail: "Encrypted bundles and signed manifests over untrusted transports." },
-    { label: text.vaultMessages, value: vault.secure_messages.status, detail: "Secure message placeholders keep payloads hidden while locked." },
-    { label: text.vaultBackups, value: vault.backups.status, detail: "Encrypted backups and recovery flows are metadata-only here." },
-    { label: text.vaultAudit, value: vault.audit.status, detail: `${vault.audit.event_count} redacted audit events; ${vault.audit.latest_event_ref}.` },
-  ];
-
-  return (
-    <section className="surface-page vault-surface" aria-label={text.vault}>
-      <div className="hero-panel vault-hero">
-        <div className="section-heading split-heading">
-          <div>
-            <p className="eyebrow">{vault.value_policy}</p>
-            <h2>{text.vault}</h2>
-            <p>{text.vaultIntro}</p>
-          </div>
-          {vaultCollection ? <VaultPadlock collection={vaultCollection} onActivate={onVaultRequest} vault={vault} /> : null}
-        </div>
-        <ul aria-label="Vault readiness" className="vault-readiness-strip">
-          {readiness.map((item) => <li key={item.label}><strong>{item.label}</strong>{item.value}</li>)}
-        </ul>
-      </div>
-      {vault.locked ? (
-        <div className="notice compact-notice" role="note">
-          {text.vaultLockedPreview} {vault.unlock_hint}
-        </div>
-      ) : (
-        <div className="notice compact-notice" role="note">
-          Vault is unlocked for this local session. Protected actions remain read-only until audited write routes are implemented.
-        </div>
-      )}
-      <div className="vault-card-grid">
-        {featureCards.map((card) => <VaultFeatureCard detail={card.detail} key={card.label} label={card.label} value={card.value} />)}
-      </div>
-      <section className="panel vault-setup-panel" aria-label={text.vaultSetup}>
-        <div className="section-heading split-heading">
-          <div>
-            <p className="eyebrow">{text.vaultSetup}</p>
-            <h2>{vault.readiness.setup_required ? "Setup required" : "Setup metadata"}</h2>
-            <p>{vault.setup_hint}</p>
-          </div>
-          <button className="secondary-action vault-cta" onClick={() => onVaultRequest(vaultDialogIntentForStatus(vault))} title={vault.unlock_hint} type="button">{vault.unlocked ? "Lock Vault" : text.vaultUnlockCta}</button>
-        </div>
-        <ol className="vault-step-list">
-          <li>Initialize locally with the hidden-prompt helper.</li>
-          <li>Verify the harmless restart test before migrating real data.</li>
-          <li>Keep passphrases, recovery material, and private keys out of chat, arguments, environment variables, logs, issues, and fixtures.</li>
-        </ol>
-        <code>{vault.unlock_hint}</code>
-      </section>
-      <section className="panel" aria-label="Vault encrypted collections">
-        <div className="section-heading">
-          <p className="eyebrow">{text.vaultStatus}</p>
-          <h2>Encrypted collections</h2>
-          <p>{text.vaultCollectionIntro}</p>
-        </div>
-        <ul className="object-list vault-collection-list">
-          {vault.collections.map((collection) => <VaultCollectionRow collection={collection} key={collection.id} onVaultRequest={onVaultRequest} vault={vault} />)}
-        </ul>
-      </section>
-      <section className="panel" aria-label="Vault devices and audit">
-        <div className="section-heading split-heading">
-          <div>
-            <p className="eyebrow">{text.vaultDevices}</p>
-            <h2>Devices, sync, messages, backups, and audit</h2>
-            <p>These placeholders expose readiness and redacted metadata only. Git, object storage, messaging, SSH, VPNs, and VPS disks remain untrusted transports.</p>
-          </div>
-          <span className="count-pill">{vault.sync.transport_policy}</span>
-        </div>
-        <div className="vault-device-grid">
-          {vault.devices.map((device) => (
-            <article className="vault-device-card" key={device.id_ref}>
-              <p className="eyebrow">{device.trust_state}</p>
-              <h3>{device.label}</h3>
-              <Detail label="device" value={device.id_ref} />
-              <Detail label="last seen" value={device.last_seen} />
-              <Detail label="audit head" value={device.audit_head_ref} />
-            </article>
-          ))}
-        </div>
-      </section>
-    </section>
-  );
-}
-
-export function LockedVaultGate({ collection, label, onVaultRequest, vault }: {
-  collection: GuiVaultCollectionSummary;
-  label: string;
-  onVaultRequest: (intent: VaultDialogIntent) => void;
-  vault: GuiVaultStatusData;
-}) {
-  return (
-    <section className="panel vault-locked-gate" aria-label={`${label} locked by Vault`}>
-      <div className="section-heading split-heading">
-        <div>
-          <p className="eyebrow">{collection.data_class}</p>
-          <h2>{label} is locked</h2>
-          <p>{text.vaultLockedPreview}</p>
-        </div>
-        <VaultPadlock collection={collection} onActivate={onVaultRequest} vault={vault} />
-      </div>
-      <div className="notice compact-notice" role="note">
-        {text.vaultTooltip} {vault.unlock_hint}
-      </div>
-      <button className="secondary-action vault-cta" onClick={() => onVaultRequest(vaultDialogIntentForStatus(vault))} title={vault.unlock_hint} type="button">{text.vaultUnlockCta}</button>
-    </section>
-  );
-}
-
-function VaultFeatureCard({ detail, label, value }: { detail: string; label: string; value: string }) {
-  return (
-    <article className="vault-feature-card">
-      <span>{label}</span>
-      <strong>{value}</strong>
-      <small>{detail}</small>
-    </article>
-  );
-}
-
-function VaultCollectionRow({ collection, onVaultRequest, vault }: { collection: GuiVaultCollectionSummary; onVaultRequest: (intent: VaultDialogIntent) => void; vault: GuiVaultStatusData }) {
-  return (
-    <li>
-      <strong>{collection.label}</strong>
-      <VaultPadlock collection={collection} compact onActivate={onVaultRequest} vault={vault} />
-      <span>{collection.preview_policy}</span>
-      <small>{collection.labels.join(", ")}</small>
-      <small>{collection.surface_ids.join(", ")}</small>
-    </li>
-  );
-}
-
 export function LocalReposSurface({ status }: { status: GuiStatusData }) {
   const [activeTab, setActiveTab] = useState<"setup" | "files">("setup");
 

package/packages/gui-web/src/VaultAccessModal.tsx

@@ -0,0 +1,123 @@
+import type { GuiVaultStatusData } from "@aidevops/gui-shared";
+import { type ReactElement, type RefObject, useRef } from "react";
+import type { IconType } from "react-icons";
+import { FiAlertTriangle, FiCheckCircle, FiClipboard, FiLock, FiRefreshCw, FiShield, FiTerminal, FiUnlock } from "react-icons/fi";
+import { terminalActionForIntent, useVaultCommandLaunch, useVaultDialogFocus, type VaultLaunchStatus } from "./useVaultAccessDialog";
+import type { VaultDialogIntent } from "./VaultBadges";
+import { vaultCommandText } from "./vault-command-bridge";
+
+export { terminalActionForIntent } from "./useVaultAccessDialog";
+
+interface VaultAccessModalProps {
+  intent: VaultDialogIntent;
+  onClose: () => void;
+  onRefresh: () => Promise<void> | void;
+  onTerminalLaunch: () => void;
+  vault: GuiVaultStatusData;
+}
+
+export function VaultAccessModal({ intent, onClose, onRefresh, onTerminalLaunch, vault }: VaultAccessModalProps): ReactElement {
+  const primaryActionRef = useRef<HTMLButtonElement | null>(null);
+  const dialogRef = useRef<HTMLElement | null>(null);
+  const content = dialogContentFactories[intent](vault);
+  const terminalAction = terminalActionForIntent(intent);
+  const { launchStatus, launchTerminal } = useVaultCommandLaunch({ intent, onRefresh, onTerminalLaunch });
+  useVaultDialogFocus({ dialogRef, intent, onClose, primaryActionRef });
+
+  return (
+    <div className="vault-modal-backdrop">
+      <section
+        aria-describedby="vault-access-description"
+        aria-labelledby="vault-access-title"
+        aria-modal="true"
+        className="vault-modal"
+        ref={dialogRef}
+        role="dialog"
+      >
+        <header className="vault-modal-header">
+          <span className="vault-modal-icon" aria-hidden="true">{dialogIcon(intent)}</span>
+          <div><p className="eyebrow">aidevops Vault</p><h2 id="vault-access-title">{content.title}</h2></div>
+        </header>
+        <div className="vault-modal-body">
+          <p id="vault-access-description">{content.detail}</p>
+          <div className={`notice compact-notice ${intent === "recover" || intent === "unavailable" ? "warning-notice" : ""}`} role="note">{content.notice}</div>
+          {terminalAction === null ? null : <div className="vault-command-preview"><FiTerminal aria-hidden="true" /><code>{vaultCommandText(terminalAction)}</code></div>}
+          {/* biome-ignore lint/a11y/useSemanticElements: role=group preserves the existing grid element and requested accessible grouping. */}
+          <div className="vault-modal-state-grid" aria-label="Current Vault metadata" role="group">
+            <span><strong>Vault</strong>{vault.status}</span><span><strong>Setup</strong>{vault.setup_state}</span><span><strong>Helper</strong>{vault.helper_status}</span>
+          </div>
+          <VaultLaunchStatusMessage status={launchStatus} />
+        </div>
+        <VaultModalActions content={content} intent={intent} launchStatus={launchStatus} onClose={onClose} onRefresh={onRefresh} onTerminalLaunch={launchTerminal} primaryActionRef={primaryActionRef} />
+        <p className="vault-modal-footnote">This dialog never requests or stores a passphrase. Secret input belongs only in the terminal helper's hidden local prompt.</p>
+      </section>
+    </div>
+  );
+}
+
+interface DialogContent {
+  action: string;
+  detail: string;
+  notice: string;
+  title: string;
+}
+
+const dialogContentFactories: Record<VaultDialogIntent, (vault: GuiVaultStatusData) => DialogContent> = {
+  lock: () => ({ action: "Open lock terminal", detail: "Locking forgets in-memory keys and hides protected previews again.", notice: "The fixed local command does not receive browser data or secret material.", title: "Lock local Vault" }),
+  recover: () => ({ action: "Open recovery guidance", detail: "Vault metadata appears damaged. Preserve existing encrypted data and review conservative recovery options.", notice: "Do not initialise with --force or overwrite the existing Vault.", title: "Review Vault recovery" }),
+  setup: () => ({ action: "Open setup terminal", detail: "Create this device's Vault once through the secure local helper.", notice: "Save the new passphrase in a trusted password manager. aidevops cannot recover it.", title: "Set up Vault" }),
+  unavailable: () => ({ action: "Retry status", detail: "Vault readiness is not authoritative, so setup and passphrase actions are disabled.", notice: "Check the local helper and crypto runtime, then retry. Existing encrypted data will not be reinitialised.", title: "Vault status unavailable" }),
+  unlock: (vault) => ({ action: "Open secure terminal", detail: "Unlock the existing Vault with the passphrase you already saved.", notice: vault.unlock_hint, title: "Unlock existing Vault" }),
+};
+
+const dialogIcons: Record<VaultDialogIntent, IconType> = {
+  lock: FiLock,
+  recover: FiAlertTriangle,
+  setup: FiShield,
+  unavailable: FiAlertTriangle,
+  unlock: FiUnlock,
+};
+
+function dialogIcon(intent: VaultDialogIntent): ReactElement {
+  const Icon = dialogIcons[intent];
+  return <Icon />;
+}
+
+function VaultModalActions({ content, intent, launchStatus, onClose, onRefresh, onTerminalLaunch, primaryActionRef }: {
+  content: DialogContent;
+  intent: VaultDialogIntent;
+  launchStatus: VaultLaunchStatus;
+  onClose: () => void;
+  onRefresh: () => Promise<void> | void;
+  onTerminalLaunch: () => Promise<void>;
+  primaryActionRef: RefObject<HTMLButtonElement | null>;
+}): ReactElement {
+  const retriesStatus = intent === "unavailable";
+  const ActionIcon = retriesStatus ? FiRefreshCw : FiTerminal;
+  const className = intent === "lock" || intent === "recover" ? "secondary-action" : "primary-action";
+  const runAction = retriesStatus ? onRefresh : onTerminalLaunch;
+
+  return (
+    <footer className="vault-modal-actions">
+      <button className="secondary-action" onClick={onClose} type="button">Close</button>
+      <button className={className} data-vault-intent={intent} disabled={!retriesStatus && launchStatus === "requesting"} onClick={() => void runAction()} ref={primaryActionRef} type="button"><ActionIcon aria-hidden="true" /> {content.action}</button>
+    </footer>
+  );
+}
+
+const launchStatusPresentation: Partial<Record<VaultLaunchStatus, { Icon: IconType; className: string; role: "alert" | "status"; text: string }>> = {
+  copied: { Icon: FiClipboard, className: "vault-valid", role: "status", text: "Command copied. Run it in your local terminal." },
+  failed: { Icon: FiAlertTriangle, className: "vault-invalid", role: "alert", text: "Open a local terminal and run the displayed command." },
+  opened: { Icon: FiCheckCircle, className: "vault-valid", role: "status", text: "Secure terminal opened. Return here after the command completes; status refreshes on focus." },
+  requesting: { Icon: FiTerminal, className: "vault-valid", role: "status", text: "Requesting the secure local terminal…" },
+};
+
+function VaultLaunchStatusMessage({ status }: { status: VaultLaunchStatus }): ReactElement | null {
+  const presentation = launchStatusPresentation[status];
+  if (presentation === undefined) {
+    return null;
+  }
+
+  const { Icon, className, role, text } = presentation;
+  return <p className={className} role={role}><Icon aria-hidden="true" /> {text}</p>;
+}