aidevops 3.31.74 → 3.31.76

package/README.md

@@ -60,7 +60,7 @@ The result: an AI operations platform that manages projects across every busines
 [![Copyright](https://img.shields.io/badge/Copyright-Marcus%20Quinn%202025--2026-blue.svg)](https://github.com/marcusquinn)
 
 <!-- Release & Version Info -->
-[![Version](https://img.shields.io/badge/Version-3.31.74-blue.svg)](https://github.com/marcusquinn/aidevops/releases)
+[![Version](https://img.shields.io/badge/Version-3.31.76-blue.svg)](https://github.com/marcusquinn/aidevops/releases)
 [![npm version](https://img.shields.io/npm/v/aidevops)](https://www.npmjs.com/package/aidevops)
 [![Homebrew](https://img.shields.io/badge/homebrew-marcusquinn%2Ftap-orange)](https://github.com/marcusquinn/homebrew-tap)
 [![GitHub repository](https://img.shields.io/badge/github-repository-181717.svg?logo=github)](https://github.com/marcusquinn/aidevops)

package/VERSION

@@ -1 +1 @@
-3.31.74
+3.31.76

package/aidevops.sh

@@ -5,7 +5,7 @@
 # AI DevOps Framework CLI
 # Usage: aidevops <command> [options]
 #
-# Version: 3.31.74
+# Version: 3.31.76
 
 set -euo pipefail
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aidevops",
-  "version": "3.31.74",
+  "version": "3.31.76",
   "description": "AI DevOps Framework - AI-assisted development workflows, code quality, and deployment automation",
   "type": "module",
   "workspaces": [

package/packages/gui-api/src/status-adapter.ts

@@ -191,7 +191,7 @@ export function readVaultStatus(
   return envelope;
 }
 
-const AI_PROVIDER_IDS: GuiAiProviderId[] = ["anthropic", "openai", "cursor", "google"];
+const AI_PROVIDER_IDS: GuiAiProviderId[] = ["anthropic", "openai", "cursor", "google", "zai"];
 const SETUP_TARGET_DEFINITIONS: Array<Pick<GuiSetupTargetSummary, "label" | "path_ref" | "purpose">> = [
   {
     label: "Deployed agents",

package/packages/gui-shared/src/contracts.ts

@@ -446,7 +446,7 @@ export interface GuiConversationThread {
   read_states: GuiConversationReadState[];
 }
 
-export type GuiAiProviderId = "anthropic" | "openai" | "cursor" | "google";
+export type GuiAiProviderId = "anthropic" | "openai" | "cursor" | "google" | "zai";
 
 export interface GuiOAuthPoolAccountSummary {
   email_ref: string;

package/packages/gui-shared/src/fixtures.ts

@@ -254,6 +254,17 @@ export const statusFixture: GuiStatusData = {
         pending_token: false,
         accounts: [],
       },
+      {
+        provider: "zai",
+        configured: false,
+        total: 0,
+        available: 0,
+        active_or_idle: 0,
+        rate_limited: 0,
+        auth_errors: 0,
+        pending_token: false,
+        accounts: [],
+      },
     ],
   },
   setup_targets: [
@@ -351,15 +362,26 @@ export const statusFixture: GuiStatusData = {
         preview_policy: "hidden_while_locked",
         actions_policy: "disabled_while_locked",
       },
+      {
+        id: "security-routing",
+        label: "Security routing metadata",
+        data_class: "config metadata",
+        labels: ["internal", "provider-allowed"],
+        surface_ids: ["security"],
+        encrypted: true,
+        state: "not_configured",
+        preview_policy: "hidden_while_locked",
+        actions_policy: "disabled_while_locked",
+      },
       {
         id: "provider-routing",
         label: "Provider routing metadata",
         data_class: "config metadata",
         labels: ["internal", "provider-allowed"],
-        surface_ids: ["security", "aiProviders"],
+        surface_ids: ["aiProviders"],
         encrypted: true,
         state: "not_configured",
-        preview_policy: "hidden_while_locked",
+        preview_policy: "metadata_only",
         actions_policy: "disabled_while_locked",
       },
       {

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

@@ -0,0 +1,297 @@
+import { useState } from "react";
+import type { IconType } from "react-icons";
+import { FiAlertTriangle, FiCheckCircle, FiClock, FiCommand, FiGlobe, FiInfo, FiKey, FiPlusCircle, FiRefreshCw, FiRepeat, FiShield, FiTerminal, FiThumbsUp, FiTool } from "react-icons/fi";
+import type { GuiOAuthProviderSummary, GuiStatusData } from "../../gui-shared/src";
+import { text } from "./app-model";
+
+type AiProviderGroupId = "recommended-oauth" | "oauth-pool";
+
+interface AiProviderCatalogEntry {
+  id: GuiOAuthProviderSummary["provider"];
+  displayName: string;
+  group: AiProviderGroupId;
+  authKind: string;
+  description: string;
+  connectionHint: string;
+  recommended: boolean;
+  recommendation?: string;
+  opencodeProviders: string[];
+  capabilities: string[];
+  Icon: IconType;
+}
+
+const AI_PROVIDER_GROUPS: Array<{ detail: string; id: AiProviderGroupId; label: string }> = [
+  { id: "recommended-oauth", label: "Recommended OAuth pools", detail: "First-class providers to connect for aidevops model rotation and worker resilience." },
+  { id: "oauth-pool", label: "OAuth pool compatible", detail: "Additional OpenCode providers that can be represented by the local aidevops OAuth pool." },
+];
+
+const AI_PROVIDER_CATALOG: AiProviderCatalogEntry[] = [
+  {
+    id: "openai",
+    displayName: "OpenAI",
+    group: "recommended-oauth",
+    authKind: "OAuth pool",
+    description: "Primary coding and reasoning models through OpenCode's OpenAI provider and the aidevops OAuth pool.",
+    connectionHint: "Use OpenCode auth login, choose OpenAI Pool, then add each account email separately.",
+    recommended: true,
+    recommendation: "Recommended for strong coding coverage and current OAuth rotation support.",
+    opencodeProviders: ["openai", "openai-pool", "openrouter/openai"],
+    capabilities: ["coding", "reasoning", "pool rotation"],
+    Icon: FiCommand,
+  },
+  {
+    id: "cursor",
+    displayName: "Cursor",
+    group: "recommended-oauth",
+    authKind: "OAuth proxy",
+    description: "Cursor account pool routed through the aidevops Cursor proxy for OpenCode-compatible model access.",
+    connectionHint: "Use OpenCode auth login, choose Cursor Pool, then keep every account as a separate pool entry.",
+    recommended: true,
+    recommendation: "Recommended when Cursor subscriptions provide useful fallback capacity.",
+    opencodeProviders: ["cursor", "cursor-pool"],
+    capabilities: ["subscription reuse", "proxy", "fallback capacity"],
+    Icon: FiTerminal,
+  },
+  {
+    id: "zai",
+    displayName: "Z.ai",
+    group: "recommended-oauth",
+    authKind: "OAuth pool",
+    description: "GLM/Z.ai provider family surfaced by OpenCode as zai, z-ai, and zhipuai model prefixes.",
+    connectionHint: "Track Z.ai as a pool target now; audited OAuth connection routes should be added before enabling writes.",
+    recommended: true,
+    recommendation: "Recommended for GLM coding and low-friction non-US provider diversity.",
+    opencodeProviders: ["zai", "zai-coding-plan", "zhipuai", "openrouter/z-ai"],
+    capabilities: ["GLM models", "provider diversity", "planned OAuth"],
+    Icon: FiTool,
+  },
+  {
+    id: "anthropic",
+    displayName: "Anthropic",
+    group: "oauth-pool",
+    authKind: "OAuth pool",
+    description: "Claude provider pool for compatible Anthropic and Claude Code sessions.",
+    connectionHint: "Use OpenCode auth login, choose Anthropic Pool, then rotate accounts with the local OAuth pool helper.",
+    recommended: false,
+    opencodeProviders: ["anthropic", "openrouter/anthropic", "poe/anthropic"],
+    capabilities: ["Claude models", "OAuth", "account rotation"],
+    Icon: FiShield,
+  },
+  {
+    id: "google",
+    displayName: "Google Gemini",
+    group: "oauth-pool",
+    authKind: "OAuth pool",
+    description: "Gemini and Vertex-compatible OAuth accounts represented as metadata-only pool entries.",
+    connectionHint: "Use OpenCode auth login, choose Google Pool, and keep Workspace or AI subscription accounts separate.",
+    recommended: false,
+    opencodeProviders: ["google", "gemini", "openrouter/google", "vercel/google"],
+    capabilities: ["Gemini", "Vertex", "multimodal"],
+    Icon: FiGlobe,
+  },
+];
+
+export function AiProvidersSurface({ status }: { status: GuiStatusData }) {
+  const [activeGroup, setActiveGroup] = useState<AiProviderGroupId | "all">("all");
+  const [query, setQuery] = useState("");
+  const providersById = new Map(status.oauth_pool.providers.map((provider) => [provider.provider, provider]));
+  const catalogCards = AI_PROVIDER_CATALOG.map((entry) => ({ entry, provider: providersById.get(entry.id) ?? emptyProviderSummary(entry.id) }));
+  const normalizedQuery = query.trim().toLowerCase();
+  const visibleCards = catalogCards.filter(({ entry }) => {
+    const matchesGroup = activeGroup === "all" || entry.group === activeGroup;
+    const searchable = [entry.displayName, entry.id, entry.authKind, entry.description, entry.connectionHint, ...entry.opencodeProviders, ...entry.capabilities].join(" ").toLowerCase();
+
+    return matchesGroup && (normalizedQuery.length === 0 || searchable.includes(normalizedQuery));
+  });
+  const totalAccounts = catalogCards.reduce((sum, card) => sum + card.provider.total, 0);
+  const availableAccounts = catalogCards.reduce((sum, card) => sum + card.provider.available, 0);
+  const recommendedConnected = catalogCards.filter((card) => card.entry.recommended && card.provider.configured).length;
+  const needsAttention = catalogCards.filter((card) => card.provider.auth_errors > 0 || card.provider.rate_limited > 0 || card.provider.pending_token).length;
+  const summaryCards = [
+    { label: "accounts", value: String(totalAccounts), detail: "metadata-only pool entries" },
+    { label: "available", value: String(availableAccounts), detail: "ready after cooldown checks" },
+    { label: "recommended", value: `${recommendedConnected}/3`, detail: "OpenAI, Cursor, and Z.ai" },
+    { label: "attention", value: String(needsAttention), detail: "auth errors, rate limits, pending tokens" },
+  ];
+
+  return (
+    <section className="surface-page ai-providers-surface" aria-label={text.aiProviders}>
+      <div className="hero-panel ai-provider-hero">
+        <div className="section-heading split-heading">
+          <div>
+            <p className="eyebrow">{status.oauth_pool.path_ref}</p>
+            <h2>{text.aiProviders}</h2>
+            <p>{text.aiProvidersIntro} Manage provider connections as OAuth pool metadata, with one card per OpenCode provider family and one row per account.</p>
+          </div>
+          <span className="count-pill">{status.oauth_pool.value_policy}</span>
+        </div>
+        <div className="ai-provider-summary-grid">
+          {summaryCards.map((card) => (
+            <article className="ai-provider-summary-card" key={card.label}>
+              <span>{card.label}</span>
+              <strong>{card.value}</strong>
+              <small>{card.detail}</small>
+            </article>
+          ))}
+        </div>
+      </div>
+      <div className="notice compact-notice" role="note">
+        Data-leaves-device warning: provider accounts can process prompts outside this machine. Use `data_classification` and `runtime_policy` metadata to require Local AI or explicit provider approval for confidential work.
+      </div>
+      <section className="panel ai-provider-catalog-panel" aria-label="AI provider catalog">
+        <div className="provider-toolbar">
+          <label className="provider-search">
+            <FiInfo aria-hidden="true" />
+            <span className="sr-only">Search AI providers</span>
+            <input aria-label="Search AI providers" onChange={(event) => setQuery(event.target.value)} placeholder="Search providers, model prefixes, or capabilities" type="search" value={query} />
+          </label>
+          <div aria-label="Provider group filters" className="provider-filter-chips" role="toolbar">
+            <button className={activeGroup === "all" ? "active" : ""} onClick={() => setActiveGroup("all")} type="button">All <span>{catalogCards.length}</span></button>
+            {AI_PROVIDER_GROUPS.map((group) => (
+              <button className={activeGroup === group.id ? "active" : ""} key={group.id} onClick={() => setActiveGroup(group.id)} type="button">
+                {group.label} <span>{catalogCards.filter((card) => card.entry.group === group.id).length}</span>
+              </button>
+            ))}
+          </div>
+        </div>
+        {visibleCards.length === 0 ? (
+          <p className="empty-state">No providers match this filter.</p>
+        ) : (
+          AI_PROVIDER_GROUPS.map((group) => {
+            const groupCards = visibleCards.filter((card) => card.entry.group === group.id);
+            if (groupCards.length === 0) {
+              return null;
+            }
+
+            return (
+              <section className="provider-section" key={group.id} aria-label={group.label}>
+                <div className="section-heading split-heading provider-section-heading">
+                  <div>
+                    <p className="eyebrow">{groupCards.length} provider{groupCards.length === 1 ? "" : "s"}</p>
+                    <h3>{group.label}</h3>
+                    <p>{group.detail}</p>
+                  </div>
+                </div>
+                <div className="provider-grid">
+                  {groupCards.map((card) => <ProviderCard entry={card.entry} key={card.entry.id} provider={card.provider} />)}
+                </div>
+              </section>
+            );
+          })
+        )}
+      </section>
+    </section>
+  );
+}
+
+function ProviderCard({ entry, provider }: { entry: AiProviderCatalogEntry; provider: GuiOAuthProviderSummary }) {
+  const Icon = entry.Icon;
+  const connectLabel = provider.configured ? "Add another account" : "Connect account";
+  const connectionTitle = `${entry.connectionHint} Browser write routes are read-only until audited provider actions are implemented.`;
+
+  return (
+    <article className={entry.recommended ? "provider-card provider-card-recommended" : "provider-card"}>
+      <header className="provider-card-header">
+        <div className="provider-identity">
+          <span className={`provider-avatar provider-avatar-${entry.id}`} aria-hidden="true"><Icon /></span>
+          <div>
+            <p className="eyebrow">{entry.authKind}</p>
+            <div className="provider-title-row">
+              <h3>{entry.displayName}</h3>
+              {entry.recommended ? <span className="recommendation-badge" title={entry.recommendation}><FiThumbsUp aria-hidden="true" />Recommended</span> : null}
+            </div>
+            <p>{entry.description}</p>
+          </div>
+        </div>
+        <div className="provider-count-stack">
+          <strong>{provider.available}/{provider.total}</strong>
+          <ProviderStatusBadge provider={provider} />
+        </div>
+      </header>
+      <ul aria-label={`${entry.displayName} OpenCode provider prefixes`} className="provider-chip-row">
+        {entry.opencodeProviders.map((prefix) => <li className="provider-chip" key={prefix}>{prefix}</li>)}
+      </ul>
+      <p className="provider-connection-hint">{entry.connectionHint}</p>
+      <div className="repo-card-meta provider-metrics">
+        <ProviderDetail label="active/idle" value={String(provider.active_or_idle)} />
+        <ProviderDetail label="rate limited" value={String(provider.rate_limited)} />
+        <ProviderDetail label="auth errors" value={String(provider.auth_errors)} />
+        <ProviderDetail label="pending token" value={provider.pending_token ? "yes" : "no"} />
+      </div>
+      <ul aria-label={`${entry.displayName} capabilities`} className="provider-chip-row provider-capability-row">
+        {entry.capabilities.map((capability) => <li className="provider-chip" key={capability}>{capability}</li>)}
+      </ul>
+      <fieldset className="provider-actions">
+        <legend className="sr-only">{entry.displayName} planned management controls</legend>
+        <button disabled title={connectionTitle} type="button"><FiPlusCircle aria-hidden="true" />{connectLabel}</button>
+        <button disabled title="Read-only preview: rotation uses oauth-pool-helper.sh rotate after audited write routes land." type="button"><FiRepeat aria-hidden="true" />Rotate</button>
+        <button disabled title="Read-only preview: health checks use oauth-pool-helper.sh check after audited write routes land." type="button"><FiRefreshCw aria-hidden="true" />Check</button>
+        <button disabled title="Read-only preview: cooldown resets use oauth-pool-helper.sh reset-cooldowns after audited write routes land." type="button"><FiClock aria-hidden="true" />Cooldowns</button>
+      </fieldset>
+      {provider.accounts.length === 0 ? (
+        <p className="empty-state compact-empty">No accounts in this pool yet. Multiple accounts are supported by adding a separate OAuth entry per email.</p>
+      ) : (
+        <ul className="provider-account-list">
+          {provider.accounts.map((account) => (
+            <li key={`${provider.provider}:${account.email_ref}`}>
+              <strong>{account.email_ref}</strong>
+              <span className="provider-account-status">{account.status}</span>
+              <small>priority {account.priority ?? "default"}</small>
+              <small>last used {account.last_used}</small>
+              <small>expires {account.expires_at}</small>
+              {account.cooldown_until ? <small>cooldown {account.cooldown_until}</small> : null}
+              <button disabled title="Read-only preview: account management requires audited provider write routes." type="button"><FiKey aria-hidden="true" />Manage</button>
+            </li>
+          ))}
+        </ul>
+      )}
+    </article>
+  );
+}
+
+function ProviderStatusBadge({ provider }: { provider: GuiOAuthProviderSummary }) {
+  const status = providerStatus(provider);
+  const Icon = status.Icon;
+
+  return <span className={`status-pill provider-health ${status.className}`}><Icon aria-hidden="true" />{status.label}</span>;
+}
+
+function providerStatus(provider: GuiOAuthProviderSummary): { Icon: IconType; className: string; label: string } {
+  if (provider.auth_errors > 0) {
+    return { Icon: FiAlertTriangle, className: "error", label: "auth attention" };
+  }
+  if (provider.rate_limited > 0) {
+    return { Icon: FiClock, className: "warn", label: "rate limited" };
+  }
+  if (provider.pending_token) {
+    return { Icon: FiKey, className: "warn", label: "pending token" };
+  }
+  if (provider.configured) {
+    return { Icon: FiCheckCircle, className: "ready", label: "configured" };
+  }
+
+  return { Icon: FiInfo, className: "neutral", label: "not connected" };
+}
+
+function emptyProviderSummary(provider: GuiOAuthProviderSummary["provider"]): GuiOAuthProviderSummary {
+  return {
+    provider,
+    configured: false,
+    total: 0,
+    available: 0,
+    active_or_idle: 0,
+    rate_limited: 0,
+    auth_errors: 0,
+    pending_token: false,
+    accounts: [],
+  };
+}
+
+function ProviderDetail({ label, value }: { label: string; value: string }) {
+  return (
+    <span>
+      <small>{label}</small>
+      <strong>{value}</strong>
+    </span>
+  );
+}

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

@@ -37,7 +37,7 @@ import {
 import type { ContrastPreference, ConversationMode, FontPreference, FontSizePreference, ShellMode, SidebarMode, SurfaceIconName, SurfaceId, SurfaceNavGroup, SurfaceNavItem, ThemePreference } from "./app-model";
 import { dashboardNavItem, navGroups, sidebarModeForSurface, surfaceRecordCounts, text } from "./app-model";
 import { SidebarFooter, wrappedOptionIndex } from "./AppearanceControls";
-import { VaultPadlock, vaultCollectionForSurface } from "./VaultBadges";
+import { VaultPadlock, vaultCollectionForSurface, vaultCollectionTooltip } from "./VaultBadges";
 
 function AidevopsPromptIcon() {
   return (
@@ -338,7 +338,7 @@ function SidebarItem({ activeSurface, item, recordCount, setActiveSurface, showC
 }) {
   const isActive = activeSurface === item.id;
   const vaultCollection = vaultCollectionForSurface(status.vault, item.id);
-  const vaultTooltip = vaultCollection ? ` ${text.vaultTooltip}` : "";
+  const vaultTooltip = vaultCollection ? ` ${vaultCollectionTooltip(vaultCollection)}` : "";
   const tooltip = `${item.label}: ${item.description}${vaultTooltip}`;
   const shouldShowCount = showCount && recordCount !== undefined && recordCount > 0;
 

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

@@ -1,11 +1,13 @@
 /* jshint esversion: 11 */
 import { useState } from "react";
-import type { GuiAiAppSummary, GuiLocalRepoSetupSummary, GuiOAuthProviderSummary, GuiSetupTargetSummary, GuiStatusData, GuiVaultCollectionSummary, GuiVaultStatusData } from "../../gui-shared/src";
+import type { GuiAiAppSummary, GuiLocalRepoSetupSummary, GuiSetupTargetSummary, GuiStatusData, GuiVaultCollectionSummary, GuiVaultStatusData } from "../../gui-shared/src";
 import { plannedHomes, text } from "./app-model";
 import { FileExplorerSurface } from "./FileExplorerSurface";
 import { PathActions } from "./PathActions";
 import { VaultPadlock } from "./VaultBadges";
 
+export { AiProvidersSurface } from "./AiProvidersSurface";
+
 export function OverviewSurface({ status }: { status: GuiStatusData }) {
   const metrics = [
     { label: text.setup, value: status.update.restart_required ? "restart" : "current", detail: status.update.installed_version },
@@ -150,9 +152,9 @@ export function VaultSurface({ status }: { status: GuiStatusData }) {
           </div>
           {vaultCollection ? <VaultPadlock collection={vaultCollection} vault={vault} /> : null}
         </div>
-        <div className="vault-readiness-strip" aria-label="Vault readiness">
-          {readiness.map((item) => <span key={item.label}><strong>{item.label}</strong>{item.value}</span>)}
-        </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">
@@ -445,66 +447,6 @@ function AiAppCard({ app }: { app: GuiAiAppSummary }) {
   );
 }
 
-export function AiProvidersSurface({ status }: { status: GuiStatusData }) {
-  return (
-    <section className="panel ai-providers-panel" aria-label={text.aiProviders}>
-      <div className="section-heading split-heading">
-        <div>
-          <p className="eyebrow">{status.oauth_pool.path_ref}</p>
-          <h2>{text.aiProviders}</h2>
-          <p>{text.aiProvidersIntro}</p>
-        </div>
-        <span className="count-pill">{status.oauth_pool.value_policy}</span>
-      </div>
-      <div className="notice compact-notice" role="note">
-        Data-leaves-device warning: provider accounts can process prompts outside this machine. Use `data_classification` and `runtime_policy` metadata to require Local AI or explicit provider approval for confidential work.
-      </div>
-      <div className="provider-grid">
-        {status.oauth_pool.providers.map((provider) => <ProviderCard key={provider.provider} provider={provider} />)}
-      </div>
-    </section>
-  );
-}
-
-function ProviderCard({ provider }: { provider: GuiOAuthProviderSummary }) {
-  return (
-    <article className="provider-card">
-      <header>
-        <div>
-          <p className="eyebrow">{provider.configured ? "configured" : "not configured"}</p>
-          <h3>{provider.provider}</h3>
-        </div>
-        <strong>{provider.available}/{provider.total}</strong>
-      </header>
-      <div className="repo-card-meta provider-metrics">
-        <Detail label="active/idle" value={String(provider.active_or_idle)} />
-        <Detail label="rate limited" value={String(provider.rate_limited)} />
-        <Detail label="auth errors" value={String(provider.auth_errors)} />
-        <Detail label="pending token" value={provider.pending_token ? "yes" : "no"} />
-      </div>
-      <fieldset className="provider-actions" aria-label={`${provider.provider} planned management controls`}>
-        {['Add account', 'Rotate', 'Check', 'Reset cooldowns'].map((action) => <button disabled key={action} type="button">{action}</button>)}
-      </fieldset>
-      {provider.accounts.length === 0 ? (
-        <p className="empty-state compact-empty">No accounts in this pool.</p>
-      ) : (
-        <ul className="provider-account-list">
-          {provider.accounts.map((account) => (
-            <li key={`${provider.provider}:${account.email_ref}`}>
-              <strong>{account.email_ref}</strong>
-              <span>{account.status}</span>
-              <small>priority {account.priority ?? "default"}</small>
-              <small>expires {account.expires_at}</small>
-              {account.cooldown_until ? <small>cooldown {account.cooldown_until}</small> : null}
-              <button disabled type="button">Manage</button>
-            </li>
-          ))}
-        </ul>
-      )}
-    </article>
-  );
-}
-
 function Detail({ label, value }: { label: string; value: string }) {
   return (
     <span>

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

@@ -12,7 +12,15 @@ export function vaultCollectionForSurface(
 
 export function isVaultSurfaceLocked(vault: GuiVaultStatusData, surface: SurfaceId): boolean {
   const collection = vaultCollectionForSurface(vault, surface);
-  return surface !== "vault" && collection?.encrypted === true && !vault.unlocked;
+  return surface !== "vault" && collection?.encrypted === true && collection.preview_policy === "hidden_while_locked" && !vault.unlocked;
+}
+
+export function vaultCollectionTooltip(collection: GuiVaultCollectionSummary): string {
+  if (collection.preview_policy === "metadata_only") {
+    return text.vaultMetadataPreview;
+  }
+
+  return text.vaultTooltip;
 }
 
 export function VaultPadlock({ collection, compact = false, vault }: {
@@ -23,11 +31,10 @@ export function VaultPadlock({ collection, compact = false, vault }: {
   const locked = collection.state !== "unlocked" || !vault.unlocked;
   const stateLabel = locked ? "Locked" : "Unlocked";
   const Icon = locked ? FiLock : FiUnlock;
-  const tooltip = `${stateLabel}: ${text.vaultTooltip}`;
+  const tooltip = `${stateLabel}: ${vaultCollectionTooltip(collection)}`;
 
   return (
     <span
-      aria-label={`${stateLabel} by aidevops Vault: ${collection.label}`}
       className={compact ? "vault-padlock compact" : "vault-padlock"}
       data-vault-state={locked ? "locked" : "unlocked"}
       title={tooltip}

package/packages/gui-web/src/app-model.ts

@@ -316,6 +316,7 @@ export const text = {
   vaultSetup: "First-use Setup",
   vaultStatus: "Status",
   vaultSync: "Sync",
+  vaultMetadataPreview: "Encrypted by aidevops Vault; metadata previews stay visible while locked, and protected previews plus write actions require a local unlock.",
   vaultTooltip: "Encrypted by aidevops Vault; contents visible only when unlocked through app or authorised vault commands.",
   vaultUnlockCta: "Unlock Vault",
   vaultUnlockHint: "Run `aidevops vault unlock` in a local terminal and enter the passphrase only into the hidden prompt.",

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

@@ -1930,9 +1930,12 @@ code {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
+  list-style: none;
+  margin: 0;
+  padding: 0;
 }
 
-.vault-readiness-strip span {
+.vault-readiness-strip li {
   background: var(--surface-elevated);
   border: 1px solid var(--border);
   border-radius: 999px;
@@ -3561,6 +3564,7 @@ button.managed-toggle:focus-visible {
 
 .repo-card-grid,
 .provider-grid,
+.ai-provider-summary-grid,
 .setup-card-grid,
 .ai-app-grid,
 .vault-card-grid,
@@ -3572,6 +3576,7 @@ button.managed-toggle:focus-visible {
 
 .repo-setup-card,
 .provider-card,
+.ai-provider-summary-card,
 .setup-target-card,
 .ai-app-card,
 .vault-feature-card,
@@ -3587,6 +3592,7 @@ button.managed-toggle:focus-visible {
 
 .repo-setup-card header,
 .provider-card header,
+.provider-card-header,
 .setup-target-card header,
 .ai-app-card header,
 .repo-card-footer {
@@ -4065,12 +4071,211 @@ button.managed-toggle:focus-visible {
   transform: translateX(18px);
 }
 
-.provider-card > header > strong {
+.ai-provider-summary-grid {
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+}
+
+.ai-provider-summary-card span {
+  color: var(--text-muted);
+  font-size: 0.74rem;
+  font-weight: 900;
+  text-transform: uppercase;
+}
+
+.ai-provider-summary-card strong {
+  color: var(--accent);
+  display: block;
+  font-size: 1.55rem;
+  letter-spacing: -0.05em;
+}
+
+.ai-provider-summary-card small,
+.provider-card p,
+.provider-connection-hint {
+  color: var(--text-secondary);
+}
+
+.ai-provider-catalog-panel,
+.provider-section {
+  display: grid;
+  gap: 16px;
+}
+
+.provider-toolbar {
+  align-items: center;
+  display: grid;
+  gap: 10px;
+  grid-template-columns: minmax(260px, 1fr) auto;
+}
+
+.provider-search {
+  align-items: center;
+  background: var(--surface-elevated);
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  color: var(--text-muted);
+  display: flex;
+  gap: 8px;
+  min-width: 0;
+  padding: 8px 12px;
+}
+
+.provider-search input {
+  background: transparent;
+  border: 0;
+  color: var(--text-primary);
+  min-width: 0;
+  outline: 0;
+  width: 100%;
+}
+
+.provider-search:focus-within {
+  border-color: var(--border-accent);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 16%, transparent);
+}
+
+.provider-filter-chips,
+.provider-chip-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 7px;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.provider-filter-chips button,
+.provider-chip,
+.recommendation-badge,
+.provider-health {
+  align-items: center;
+  border-radius: 999px;
+  display: inline-flex;
+  gap: 5px;
+  white-space: nowrap;
+}
+
+.provider-filter-chips button,
+.provider-chip {
+  background: var(--surface-elevated);
+  border: 1px solid var(--border);
+  color: var(--text-secondary);
+  font-size: 0.76rem;
+  font-weight: 800;
+  padding: 6px 9px;
+}
+
+.provider-filter-chips button.active {
+  border-color: var(--border-accent);
+  color: var(--accent);
+}
+
+.provider-filter-chips span {
+  color: var(--text-muted);
+}
+
+.provider-section-heading h3 {
+  margin: 0 0 4px;
+}
+
+.provider-card-recommended {
+  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
+}
+
+.provider-identity {
+  align-items: flex-start;
+  display: flex;
+  gap: 12px;
+  min-width: 0;
+}
+
+.provider-avatar {
+  align-items: center;
+  background: color-mix(in srgb, var(--accent) 14%, transparent);
+  border: 1px solid color-mix(in srgb, var(--accent) 36%, transparent);
+  border-radius: 14px;
+  color: var(--accent);
+  display: inline-flex;
+  flex: 0 0 auto;
+  font-size: 1.2rem;
+  height: 42px;
+  justify-content: center;
+  width: 42px;
+}
+
+.provider-avatar-openai,
+.provider-avatar-zai {
+  background: color-mix(in srgb, var(--success-text) 12%, transparent);
+  border-color: color-mix(in srgb, var(--success-text) 34%, transparent);
+  color: var(--success-text);
+}
+
+.provider-avatar-cursor {
+  background: color-mix(in srgb, var(--text-primary) 10%, transparent);
+  color: var(--text-primary);
+}
+
+.provider-title-row {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.provider-title-row h3 {
+  margin: 0;
+}
+
+.recommendation-badge {
+  background: color-mix(in srgb, var(--success-text) 14%, transparent);
+  border: 1px solid color-mix(in srgb, var(--success-text) 38%, transparent);
+  color: var(--success-text);
+  font-size: 0.7rem;
+  font-weight: 900;
+  padding: 4px 7px;
+  text-transform: uppercase;
+}
+
+.provider-count-stack {
+  align-items: flex-end;
+  display: grid;
+  gap: 6px;
+  justify-items: end;
+}
+
+.provider-count-stack > strong {
   color: var(--accent);
   font-size: 1.8rem;
   letter-spacing: -0.06em;
 }
 
+.provider-health.ready {
+  background: color-mix(in srgb, var(--success-text) 14%, transparent);
+  border-color: color-mix(in srgb, var(--success-text) 38%, transparent);
+  color: var(--success-text);
+}
+
+.provider-health.error {
+  background: color-mix(in srgb, var(--notification-error-fg) 14%, transparent);
+  border-color: color-mix(in srgb, var(--notification-error-fg) 38%, transparent);
+  color: var(--notification-error-fg);
+}
+
+.provider-health.neutral {
+  background: var(--surface-elevated);
+  border-color: var(--border);
+  color: var(--text-muted);
+}
+
+.provider-connection-hint {
+  background: var(--surface-elevated);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  font-size: 0.84rem;
+  margin: 0;
+  padding: 10px;
+}
+
 .provider-actions {
   border: 0;
   display: flex;
@@ -4082,10 +4287,13 @@ button.managed-toggle:focus-visible {
 
 .provider-actions button,
 .provider-account-list button {
+  align-items: center;
   background: var(--surface-elevated);
   border: 1px solid var(--border);
   border-radius: 999px;
   color: var(--text-muted);
+  display: inline-flex;
+  gap: 5px;
   padding: 7px 10px;
 }
 
@@ -4103,7 +4311,7 @@ button.managed-toggle:focus-visible {
   border-radius: 12px;
   display: grid;
   gap: 6px;
-  grid-template-columns: minmax(0, 1.5fr) auto auto auto auto;
+  grid-template-columns: minmax(0, 1.5fr) auto auto auto auto auto;
   padding: 10px;
 }
 
@@ -4126,7 +4334,8 @@ button.managed-toggle:focus-visible {
   }
 
   .managed-app-summary,
-  .managed-app-toolbar {
+  .managed-app-toolbar,
+  .provider-toolbar {
     grid-template-columns: 1fr;
   }
 

package/setup.sh

@@ -12,7 +12,7 @@ shopt -s inherit_errexit 2>/dev/null || true
 # AI Assistant Server Access Framework Setup Script
 # Helps developers set up the framework for their infrastructure
 #
-# Version: 3.31.74
+# Version: 3.31.76
 #
 # Quick Install:
 #   npm install -g aidevops && aidevops update          (recommended)