aidevops 3.32.5 → 3.32.7

package/packages/gui-web/src/styles.css

@@ -1671,7 +1671,6 @@ code {
 
 .vault-modal-backdrop {
   align-items: center;
-  backdrop-filter: blur(10px) saturate(130%);
   background: rgb(0 0 0 / 46%);
   display: flex;
   inset: 0;
@@ -1679,26 +1678,30 @@ code {
   padding: 24px;
   position: fixed;
   z-index: 30;
-  -webkit-backdrop-filter: blur(10px) saturate(130%);
 }
 
 .vault-modal {
   background: var(--surface-elevated);
   border: 1px solid var(--border-accent);
-  border-radius: 24px;
-  box-shadow: 0 30px 90px rgb(0 0 0 / 42%);
+  border-radius: 8px;
   display: grid;
   gap: 18px;
   max-width: min(620px, calc(100vw - 40px));
+  max-height: calc(100vh - 32px);
+  overflow-y: auto;
   padding: 22px;
   width: 100%;
 }
 
+@supports (height: 100dvh) {
+  .vault-modal {
+    max-height: calc(100dvh - 32px);
+  }
+}
+
 .vault-modal-header,
 .vault-modal-actions,
 .vault-modal-body p,
-.vault-field,
-.vault-confirm-check,
 .vault-valid,
 .vault-invalid {
   margin: 0;
@@ -1714,7 +1717,7 @@ code {
   align-items: center;
   background: color-mix(in srgb, var(--accent) 14%, transparent);
   border: 1px solid var(--border-accent);
-  border-radius: 16px;
+  border-radius: 8px;
   color: var(--accent);
   display: inline-flex;
   height: 46px;
@@ -1727,32 +1730,6 @@ code {
   gap: 14px;
 }
 
-.vault-field {
-  display: grid;
-  gap: 7px;
-}
-
-.vault-field span,
-.vault-confirm-check {
-  color: var(--text-secondary);
-  font-size: 0.9rem;
-  font-weight: 800;
-}
-
-.vault-field input {
-  background: var(--surface-muted);
-  border: 1px solid var(--border);
-  border-radius: 12px;
-  color: var(--text-primary);
-  padding: 12px;
-}
-
-.vault-confirm-check {
-  align-items: flex-start;
-  display: flex;
-  gap: 10px;
-}
-
 .warning-notice {
   border-color: var(--border-warning);
   color: #b45309;
@@ -1774,6 +1751,52 @@ code {
   justify-content: flex-end;
 }
 
+.vault-modal-actions button,
+.secrets-hero-actions button {
+  align-items: center;
+  display: inline-flex;
+  gap: 7px;
+  justify-content: center;
+  min-height: 44px;
+}
+
+.vault-command-preview {
+  align-items: center;
+  background: var(--code-bg);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  display: flex;
+  gap: 10px;
+  min-width: 0;
+  padding: 10px 12px;
+}
+
+.vault-command-preview code {
+  overflow-wrap: anywhere;
+}
+
+.vault-modal-state-grid {
+  display: grid;
+  gap: 8px;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.vault-modal-state-grid span {
+  background: var(--surface-muted);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  color: var(--text-secondary);
+  display: grid;
+  gap: 4px;
+  padding: 9px;
+}
+
+.vault-modal-state-grid strong {
+  color: var(--text-muted);
+  font-size: 0.75rem;
+  text-transform: uppercase;
+}
+
 .primary-action {
   background: var(--accent);
   border: 1px solid var(--border-accent);
@@ -1782,13 +1805,25 @@ code {
   font-weight: 900;
 }
 
+.secrets-surface .primary-action,
+.vault-modal .primary-action {
+  background: #238636;
+  border-color: #2ea043;
+  color: #ffffff;
+}
+
+.secrets-surface .primary-action:hover,
+.vault-modal .primary-action:hover {
+  background: #1f6f31;
+}
+
 .primary-action:disabled {
   cursor: not-allowed;
   opacity: 0.5;
 }
 
 .vault-modal-footnote {
-  color: var(--text-muted);
+  color: var(--text-secondary);
   font-size: 0.82rem;
   margin: 0;
 }
@@ -3841,6 +3876,262 @@ button.managed-toggle:focus-visible {
   justify-self: start;
 }
 
+.secrets-hero {
+  border-radius: 8px;
+  display: grid;
+  gap: 16px;
+}
+
+.secrets-hero-actions {
+  align-items: flex-end;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.secrets-state-badge,
+.secret-health,
+.metadata-only-label {
+  align-items: center;
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  display: inline-flex;
+  font-size: 0.78rem;
+  font-weight: 900;
+  gap: 6px;
+  padding: 5px 9px;
+  width: fit-content;
+}
+
+.secrets-state-badge.success,
+.secret-health.configured {
+  background: var(--notification-success-bg);
+  color: var(--notification-success-fg);
+}
+
+.secrets-state-badge.warning,
+.secret-health.unchecked {
+  background: var(--notification-warning-bg);
+  color: var(--notification-warning-fg);
+}
+
+.secrets-state-badge.error,
+.secret-health.missing {
+  background: var(--notification-error-bg);
+  color: var(--notification-error-fg);
+}
+
+.secrets-state-badge.unknown,
+.metadata-only-label {
+  background: var(--surface-muted);
+  color: var(--text-secondary);
+}
+
+.secrets-boundary {
+  align-items: flex-start;
+  background: var(--surface-muted);
+  border: 1px solid var(--border-accent);
+  border-radius: 8px;
+  display: flex;
+  gap: 12px;
+  padding: 14px;
+}
+
+.secrets-boundary > svg {
+  color: var(--accent);
+  flex: 0 0 auto;
+  height: 20px;
+  margin-top: 2px;
+  width: 20px;
+}
+
+.secrets-boundary div {
+  display: grid;
+  gap: 4px;
+}
+
+.secrets-boundary span {
+  color: var(--text-secondary);
+}
+
+.secrets-metric-grid,
+.secrets-capability-grid {
+  display: grid;
+  gap: 12px;
+  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
+}
+
+.secret-metric-card,
+.secret-capability-card {
+  background: var(--surface-elevated);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  display: flex;
+  gap: 12px;
+  min-width: 0;
+  padding: 14px;
+}
+
+.secret-metric-icon,
+.secret-capability-card > span {
+  align-items: center;
+  background: color-mix(in srgb, var(--accent) 12%, transparent);
+  border-radius: 6px;
+  color: var(--accent);
+  display: inline-flex;
+  flex: 0 0 auto;
+  height: 36px;
+  justify-content: center;
+  width: 36px;
+}
+
+.secret-metric-card > div,
+.secret-capability-card > div {
+  display: grid;
+  gap: 4px;
+  min-width: 0;
+}
+
+.secret-metric-card span:not(.secret-metric-icon),
+.secret-metric-card small {
+  color: var(--text-secondary);
+}
+
+.secret-metric-card strong {
+  font-size: 1.35rem;
+  letter-spacing: -0.03em;
+}
+
+.secret-capability-card h3,
+.secret-capability-card p {
+  margin: 0;
+}
+
+.secret-capability-card h3 {
+  font-size: 1rem;
+}
+
+.secret-capability-card p {
+  color: var(--text-secondary);
+}
+
+.secrets-guidance.is-error {
+  border-color: var(--border-danger);
+}
+
+.secrets-evidence-strip {
+  display: grid;
+  gap: 8px;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  margin-top: 14px;
+}
+
+.secrets-evidence-strip span {
+  background: var(--surface-muted);
+  border-radius: 6px;
+  color: var(--text-secondary);
+  display: grid;
+  gap: 3px;
+  padding: 9px;
+}
+
+.secrets-evidence-strip strong {
+  color: var(--text-secondary);
+  font-size: 0.72rem;
+  text-transform: uppercase;
+}
+
+.secrets-toolbar {
+  align-items: center;
+  display: flex;
+  gap: 12px;
+  justify-content: space-between;
+  margin: 14px 0;
+}
+
+.secrets-search {
+  align-items: center;
+  background: var(--surface-muted);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  display: flex;
+  flex: 1 1 260px;
+  gap: 8px;
+  max-width: 420px;
+  min-height: 44px;
+  padding: 0 12px;
+}
+
+.secrets-search:focus-within {
+  border-color: var(--border-accent);
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+.secrets-search input {
+  background: transparent;
+  border: 0;
+  color: var(--text-primary);
+  flex: 1 1 auto;
+  min-width: 0;
+  outline: 0;
+}
+
+.secrets-filters {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.secrets-filters button {
+  background: var(--surface-muted);
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  color: var(--text-secondary);
+  min-height: 36px;
+  padding: 6px 10px;
+}
+
+.secrets-filters button[aria-pressed="true"] {
+  background: var(--accent-aaa-bg);
+  color: #ffffff;
+}
+
+.secrets-table-wrap {
+  overflow-x: auto;
+}
+
+.secrets-reference-table {
+  border-collapse: collapse;
+  width: 100%;
+}
+
+.secrets-reference-table th,
+.secrets-reference-table td {
+  border-bottom: 1px solid var(--border);
+  padding: 12px 10px;
+  text-align: left;
+}
+
+.secrets-reference-table th {
+  color: var(--text-secondary);
+  font-size: 0.75rem;
+  text-transform: uppercase;
+}
+
+.secrets-reference-table td {
+  color: var(--text-secondary);
+}
+
+.secrets-reference-table td:first-child {
+  color: var(--text-primary);
+}
+
+:root:not([data-theme="dark"]) .secrets-state-badge.success,
+:root:not([data-theme="dark"]) .secret-health.configured {
+  color: #116329;
+}
+
 .vault-collection-list li {
   align-items: center;
 }
@@ -4602,6 +4893,19 @@ button.managed-toggle:focus-visible {
     min-width: 0;
     width: 100%;
   }
+
+  .secrets-hero-actions {
+    align-items: flex-start;
+  }
+
+  .secrets-toolbar {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .secrets-search {
+    max-width: none;
+  }
 }
 
 @media (max-width: 720px) {
@@ -4691,4 +4995,51 @@ button.managed-toggle:focus-visible {
   .setup-path-row {
     grid-template-columns: 1fr;
   }
+
+  .vault-modal-state-grid,
+  .secrets-evidence-strip {
+    grid-template-columns: 1fr;
+  }
+
+  .vault-modal-actions {
+    align-items: stretch;
+    flex-direction: column-reverse;
+  }
+
+  .secrets-reference-table,
+  .secrets-reference-table tbody,
+  .secrets-reference-table tr,
+  .secrets-reference-table td {
+    display: block;
+    width: 100%;
+  }
+
+  .secrets-reference-table thead {
+    display: none;
+  }
+
+  .secrets-reference-table tr {
+    background: var(--surface-muted);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    margin-bottom: 10px;
+    padding: 8px;
+  }
+
+  .secrets-reference-table td {
+    align-items: center;
+    border-bottom: 0;
+    display: flex;
+    gap: 10px;
+    justify-content: space-between;
+    padding: 8px;
+  }
+
+  .secrets-reference-table td::before {
+    color: var(--text-muted);
+    content: attr(data-label);
+    font-size: 0.75rem;
+    font-weight: 900;
+    text-transform: uppercase;
+  }
 }

package/packages/gui-web/src/useAppNavigation.ts

@@ -0,0 +1,55 @@
+import { useEffect, useRef, useState } from "react";
+import type { SurfaceId } from "./app-model";
+import { type NavigationHistory, nextHistoryIndex, useNavigationHistoryKeyboard } from "./navigation-history";
+
+interface AppNavigationController {
+  activeSurface: SurfaceId;
+  canGoBack: boolean;
+  canGoForward: boolean;
+  goBack: () => void;
+  goForward: () => void;
+  setActiveSurface: (surface: SurfaceId) => void;
+}
+
+export function useAppNavigation(): AppNavigationController {
+  const [navigation, setNavigation] = useState<NavigationHistory>({ entries: ["overview"], index: 0 });
+  const pendingWorkspaceSurface = useRef<SurfaceId | null>(null);
+  const activeSurface = navigation.entries[navigation.index] ?? "overview";
+  useNavigationHistoryKeyboard(setNavigation);
+
+  useEffect(() => {
+    if (pendingWorkspaceSurface.current !== activeSurface) {
+      return;
+    }
+
+    pendingWorkspaceSurface.current = null;
+    if (typeof window.matchMedia !== "function" || !window.matchMedia("(max-width: 980px)").matches) return;
+    const animationFrame = window.requestAnimationFrame(() => document.querySelector<HTMLElement>(".app-inset")?.scrollIntoView({ block: "start" }));
+    return () => window.cancelAnimationFrame(animationFrame);
+  }, [activeSurface]);
+
+  const setActiveSurface = (surface: SurfaceId) => {
+    setNavigation((current) => navigateToSurface(current, surface, pendingWorkspaceSurface));
+  };
+
+  return {
+    activeSurface,
+    canGoBack: navigation.index > 0,
+    canGoForward: navigation.index < navigation.entries.length - 1,
+    goBack: () => setNavigation((current) => ({ ...current, index: nextHistoryIndex(current, -1) })),
+    goForward: () => setNavigation((current) => ({ ...current, index: nextHistoryIndex(current, 1) })),
+    setActiveSurface,
+  };
+}
+
+function navigateToSurface(current: NavigationHistory, surface: SurfaceId, pendingWorkspaceSurface: { current: SurfaceId | null }): NavigationHistory {
+  const currentSurface = current.entries[current.index] ?? "overview";
+  if (currentSurface === surface) {
+    return current;
+  }
+
+  const entries = current.entries.slice(0, current.index + 1);
+  entries.push(surface);
+  pendingWorkspaceSurface.current = surface;
+  return { entries, index: entries.length - 1 };
+}

package/packages/gui-web/src/useGuiStatus.ts

@@ -0,0 +1,79 @@
+import type { GuiResponseEnvelope, GuiStatusData } from "@aidevops/gui-shared";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { fetchStatus, mockedStatus, unavailableStatus } from "./status-client";
+import { type VaultDialogIntent, vaultDialogIntentForStatus } from "./VaultBadges";
+
+interface GuiStatusController {
+  markVaultTerminalLaunch: () => void;
+  refreshStatus: () => Promise<void>;
+  setVaultDialogIntent: (intent: VaultDialogIntent | null) => void;
+  status: GuiResponseEnvelope<GuiStatusData>;
+  statusLoading: boolean;
+  vaultDialogIntent: VaultDialogIntent | null;
+}
+
+export function useGuiStatus(): GuiStatusController {
+  const [status, setStatus] = useState<GuiResponseEnvelope<GuiStatusData>>(mockedStatus());
+  const [statusLoading, setStatusLoading] = useState(true);
+  const [vaultDialogIntent, setVaultDialogIntent] = useState<VaultDialogIntent | null>(null);
+  const hasPromptedVaultSetup = useRef(false);
+  const refreshVaultAfterTerminal = useRef(false);
+  const currentVaultIntent = vaultDialogIntentForStatus(status.data.vault);
+  const shouldPromptSetup = shouldPromptVaultSetup(statusLoading, status.data.vault, hasPromptedVaultSetup.current);
+
+  const refreshStatus = useCallback(async () => {
+    setStatusLoading(true);
+    try {
+      setStatus(await fetchStatus());
+    } catch {
+      setStatus(unavailableStatus());
+    } finally {
+      setStatusLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    void refreshStatus();
+  }, [refreshStatus]);
+
+  useEffect(() => {
+    const refreshAfterTerminal = () => {
+      if (refreshVaultAfterTerminal.current) {
+        refreshVaultAfterTerminal.current = false;
+        void refreshStatus();
+      }
+    };
+    window.addEventListener("focus", refreshAfterTerminal);
+    return () => window.removeEventListener("focus", refreshAfterTerminal);
+  }, [refreshStatus]);
+
+  useEffect(() => {
+    setVaultDialogIntent((openIntent) => openIntent !== null && openIntent !== currentVaultIntent ? null : openIntent);
+  }, [currentVaultIntent]);
+
+  useEffect(() => {
+    if (shouldPromptSetup) {
+      hasPromptedVaultSetup.current = true;
+      setVaultDialogIntent("setup");
+    }
+  }, [shouldPromptSetup]);
+
+  return {
+    markVaultTerminalLaunch: () => {
+      refreshVaultAfterTerminal.current = true;
+    },
+    refreshStatus,
+    setVaultDialogIntent,
+    status,
+    statusLoading,
+    vaultDialogIntent,
+  };
+}
+
+export function shouldPromptVaultSetup(statusLoading: boolean, vault: GuiStatusData["vault"], hasPromptedVaultSetup: boolean): boolean {
+  const setupIsReady = vault.helper_status === "available"
+    && vault.status === "uninitialized"
+    && vault.setup_state === "uninitialized"
+    && vault.readiness.setup_required;
+  return !statusLoading && setupIsReady && !hasPromptedVaultSetup;
+}