aidevops 3.23.1 → 3.24.1

package/README.md

@@ -58,7 +58,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.23.1-blue.svg)](https://github.com/marcusquinn/aidevops/releases)
+[![Version](https://img.shields.io/badge/Version-3.24.1-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.23.1
+3.24.1

package/aidevops.sh

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

package/package.json

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

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

@@ -191,7 +191,7 @@ export function App(): ReactElement {
         status={status.data}
         themePreference={themePreference}
       />
-      <Workspace activeItem={activeItem} activeSectionLabel={activeSectionLabel} activeSurface={activeSurface} fileRoot={fileRoot} status={status.data} />
+      <Workspace activeItem={activeItem} activeSectionLabel={activeSectionLabel} activeSurface={activeSurface} fileRoot={fileRoot} setActiveSurface={setActiveSurface} status={status.data} />
       <DesktopStatusBar status={status.data} />
     </main>
   );

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

@@ -1,24 +1,31 @@
 /* jshint esversion: 11 */
-import type { ReactNode } from "react";
+import { type ReactElement, type ReactNode, useEffect, useMemo, useState } from "react";
+import { FiBell, FiCommand, FiCpu, FiGlobe, FiLogOut, FiMessageSquare, FiSearch, FiSettings, FiShield, FiUser } from "react-icons/fi";
 import type { GuiFileRootId, GuiStatusData } from "../../gui-shared/src";
 import { SurfaceGlyph } from "./AppNavigation";
 import type { SurfaceId, SurfaceNavItem } from "./app-model";
-import { inventorySurfaceConfigs, text } from "./app-model";
+import { inventorySurfaceConfigs, orderedNavItems, text } from "./app-model";
 import { FileExplorerSurface } from "./FileExplorerSurface";
 import { AppsSurface, EditableInventorySurface, InstallationSurface } from "./InventorySurfaces";
 import { AiProvidersSurface, LocalReposSurface, LockedVaultGate, OverviewSurface, PlannedSurface, ProjectsSurface, SecuritySurface, VaultSurface } from "./StatusSurfaces";
 import { isVaultSurfaceLocked, vaultCollectionForSurface } from "./VaultBadges";
 
-export function Workspace({ activeItem, activeSectionLabel, activeSurface, fileRoot, status }: {
+const communityLinks = {
+  github: "https://github.com/marcusquinn/aidevops",
+  x: "https://x.com/marcuswquinn",
+} as const;
+
+export function Workspace({ activeItem, activeSectionLabel, activeSurface, fileRoot, setActiveSurface, status }: {
   activeItem: SurfaceNavItem;
   activeSectionLabel: string;
   activeSurface: SurfaceId;
   fileRoot: GuiFileRootId | undefined;
+  setActiveSurface: (surface: SurfaceId) => void;
   status: GuiStatusData;
 }) {
   return (
     <section className="app-inset" aria-label={text.workspaceLabel}>
-      <WorkspaceHeader activeItem={activeItem} activeSectionLabel={activeSectionLabel} version={displayVersion(status)} />
+      <WorkspaceHeader activeItem={activeItem} activeSectionLabel={activeSectionLabel} activeSurface={activeSurface} setActiveSurface={setActiveSurface} status={status} />
       <div className="workspace-scroll">
         <SurfaceContent activeItem={activeItem} activeSurface={activeSurface} fileRoot={fileRoot} status={status} />
       </div>
@@ -26,12 +33,42 @@ export function Workspace({ activeItem, activeSectionLabel, activeSurface, fileR
   );
 }
 
-function WorkspaceHeader({ activeItem, activeSectionLabel, version }: {
+function WorkspaceHeader({ activeItem, activeSectionLabel, activeSurface, setActiveSurface, status }: {
   activeItem: SurfaceNavItem;
   activeSectionLabel: string;
-  version: string;
-}) {
-  const versionLabel = version.startsWith("v") ? version : `v${version}`;
+  activeSurface: SurfaceId;
+  setActiveSurface: (surface: SurfaceId) => void;
+  status: GuiStatusData;
+}): ReactElement {
+  const [assistantOpen, setAssistantOpen] = useState(false);
+  const [commandOpen, setCommandOpen] = useState(false);
+  const [notificationsOpen, setNotificationsOpen] = useState(false);
+  const [profileOpen, setProfileOpen] = useState(false);
+  const userInitials = status.machine.initials || "AI";
+  const userName = status.machine.username || "Local user";
+
+  useEffect(() => {
+    const openCommandPalette = (event: KeyboardEvent) => {
+      if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") {
+        event.preventDefault();
+        setCommandOpen(true);
+      }
+    };
+
+    window.addEventListener("keydown", openCommandPalette);
+    return () => window.removeEventListener("keydown", openCommandPalette);
+  }, []);
+
+  const closeMenus = () => {
+    setNotificationsOpen(false);
+    setProfileOpen(false);
+  };
+
+  const openSurface = (surface: SurfaceId) => {
+    setActiveSurface(surface);
+    closeMenus();
+    setCommandOpen(false);
+  };
 
   return (
     <header className="workspace-header">
@@ -43,22 +80,118 @@ function WorkspaceHeader({ activeItem, activeSectionLabel, version }: {
         </div>
       </div>
       <div className="header-actions">
-        <label className="workspace-search">
+        <button className="workspace-search command-trigger" onClick={() => setCommandOpen(true)} type="button">
+          <FiSearch aria-hidden="true" />
           <span>⌘K</span>
-          <input disabled placeholder={text.searchPlaceholder} />
-        </label>
-        <span className="version-pill" title={`aidevops version ${versionLabel}`}>{versionLabel}</span>
+          <strong>{text.searchPlaceholder}</strong>
+        </button>
+        <div className="header-action-menu">
+          <button aria-expanded={notificationsOpen} aria-label="Open notifications" className="header-icon-button" onClick={() => { setNotificationsOpen((current) => !current); setProfileOpen(false); }} type="button">
+            <FiBell aria-hidden="true" />
+            <span className="notification-dot" aria-hidden="true" />
+          </button>
+          {notificationsOpen ? <NotificationsMenu openSurface={openSurface} /> : null}
+        </div>
+        <button aria-pressed={assistantOpen} aria-label="Toggle AI Assistant" className={assistantOpen ? "header-icon-button active" : "header-icon-button"} onClick={() => setAssistantOpen((current) => !current)} type="button">
+          <FiCpu aria-hidden="true" />
+        </button>
+        <div className="header-action-menu">
+          <button aria-expanded={profileOpen} aria-label={`Open profile menu for ${userName}`} className="profile-avatar-button" onClick={() => { setProfileOpen((current) => !current); setNotificationsOpen(false); }} title={userName} type="button">
+            <span>{userInitials}</span>
+          </button>
+          {profileOpen ? <ProfileMenu openSurface={openSurface} userName={userName} /> : null}
+        </div>
       </div>
+      {assistantOpen ? <AssistantPanel activeSurface={activeSurface} userName={userName} /> : null}
+      {commandOpen ? <CommandPalette close={() => setCommandOpen(false)} openSurface={openSurface} /> : null}
     </header>
   );
 }
 
-function displayVersion(status: GuiStatusData): string {
-  if (status.update.installed_version !== "unknown") {
-    return status.update.installed_version;
-  }
+function NotificationsMenu({ openSurface }: { openSurface: (surface: SurfaceId) => void }): ReactElement {
+  return (
+    <div className="popover-menu notifications-menu" role="menu">
+      <strong>Notifications</strong>
+      <p>Local readiness updates, release activity, and account alerts will collect here.</p>
+      <button onClick={() => openSurface("notifications")} role="menuitem" type="button">Open notifications</button>
+    </div>
+  );
+}
 
-  return status.aidevops_version;
+function ProfileMenu({ openSurface, userName }: { openSurface: (surface: SurfaceId) => void; userName: string }): ReactElement {
+  return (
+    <div className="popover-menu profile-menu" role="menu">
+      <div className="profile-menu-heading">
+        <FiUser aria-hidden="true" />
+        <span>{userName}</span>
+      </div>
+      <button onClick={() => openSurface("settings")} role="menuitem" type="button"><FiSettings aria-hidden="true" /> Settings</button>
+      <button onClick={() => openSurface("settings")} role="menuitem" type="button"><FiCommand aria-hidden="true" /> Theme</button>
+      <button onClick={() => openSurface("settings")} role="menuitem" type="button"><FiGlobe aria-hidden="true" /> Language</button>
+      <div className="menu-separator" />
+      <strong>Community</strong>
+      <a href={communityLinks.github} rel="noreferrer" role="menuitem" target="_blank"><FiMessageSquare aria-hidden="true" /> GitHub</a>
+      <a href={communityLinks.x} rel="noreferrer" role="menuitem" target="_blank"><FiGlobe aria-hidden="true" /> X</a>
+      <div className="menu-separator" />
+      <button onClick={() => openSurface("admin")} role="menuitem" type="button"><FiShield aria-hidden="true" /> Admin</button>
+      <button className="disabled-menu-item" disabled role="menuitem" title="Hosted login is planned" type="button"><FiLogOut aria-hidden="true" /> Logout</button>
+    </div>
+  );
+}
+
+function AssistantPanel({ activeSurface, userName }: { activeSurface: SurfaceId; userName: string }): ReactElement {
+  return (
+    <aside className="assistant-panel" aria-label="AI Assistant">
+      <div>
+        <strong>AI Assistant</strong>
+        <p>Ready to help {userName} with the current {activeSurface} surface.</p>
+      </div>
+      <div className="assistant-message">Hosted chat, local context, and workflow hand-off controls are planned.</div>
+    </aside>
+  );
+}
+
+function CommandPalette({ close, openSurface }: { close: () => void; openSurface: (surface: SurfaceId) => void }): ReactElement {
+  const [query, setQuery] = useState("");
+  const matches = useMemo(() => {
+    const normalizedQuery = query.trim().toLowerCase();
+    return orderedNavItems
+      .filter((item) => normalizedQuery.length === 0 || `${item.label} ${item.description}`.toLowerCase().includes(normalizedQuery))
+      .slice(0, 8);
+  }, [query]);
+
+  useEffect(() => {
+    const closeOnEscape = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        close();
+      }
+    };
+
+    window.addEventListener("keydown", closeOnEscape);
+    return () => window.removeEventListener("keydown", closeOnEscape);
+  }, [close]);
+
+  return (
+    <div className="command-palette-backdrop" role="presentation">
+      <button aria-label="Close command palette" className="command-palette-scrim" onClick={close} type="button" />
+      <section aria-label="Command palette" className="command-palette">
+        <label className="command-input-row">
+          <FiSearch aria-hidden="true" />
+          <input onChange={(event) => setQuery(event.currentTarget.value)} placeholder="Search commands and surfaces" value={query} />
+        </label>
+        <ul>
+          {matches.map((item) => (
+            <li key={item.id}>
+              <button onClick={() => openSurface(item.id)} type="button">
+                <span className="surface-icon" aria-hidden="true"><SurfaceGlyph icon={item.icon} /></span>
+                <span><strong>{item.label}</strong><small>{item.description}</small></span>
+              </button>
+            </li>
+          ))}
+        </ul>
+      </section>
+    </div>
+  );
 }
 
 function SurfaceContent({ activeItem, activeSurface, fileRoot, status }: {
@@ -71,6 +204,9 @@ function SurfaceContent({ activeItem, activeSurface, fileRoot, status }: {
   const vaultCollection = vaultCollectionForSurface(status.vault, activeSurface);
   const staticSurfaces: Partial<Record<SurfaceId, ReactNode>> = {
     overview: <OverviewSurface status={status} />,
+    settings: <SettingsSurface status={status} />,
+    notifications: <NotificationsSurface />,
+    admin: <AdminSurface />,
     vault: <VaultSurface status={status} />,
     routines: <PlannedSurface label={text.routines} detail={text.routineDetail} />,
     devices: <PlannedSurface label={text.devices} detail={text.devicesIntro} />,
@@ -120,3 +256,49 @@ function SurfaceContent({ activeItem, activeSurface, fileRoot, status }: {
 
   return staticSurfaces[activeSurface] ?? null;
 }
+
+function SettingsSurface({ status }: { status: GuiStatusData }): ReactElement {
+  return (
+    <section className="settings-surface">
+      <div className="planned-card">
+        <h2>General settings</h2>
+        <p>{text.settingsAccountIntro}</p>
+      </div>
+      <form className="settings-form">
+        <label><span>Name</span><input defaultValue={status.machine.username} disabled /></label>
+        <label><span>Login email</span><input disabled placeholder="email sign-in planned" type="email" /></label>
+        <label><span>Login password</span><input disabled placeholder="password management planned" type="password" /></label>
+        <label><span>Alternative notification email</span><input disabled placeholder="notifications email planned" type="email" /></label>
+        <label><span>Language</span><select disabled defaultValue="en"><option value="en">English</option></select></label>
+        <label><span>Theme</span><select disabled defaultValue="system"><option value="system">System</option><option value="light">Light</option><option value="dark">Dark</option></select></label>
+      </form>
+    </section>
+  );
+}
+
+function NotificationsSurface(): ReactElement {
+  return (
+    <section className="settings-surface">
+      <div className="planned-card">
+        <h2>Notifications</h2>
+        <p>Release updates, workflow failures, security notices, and hosted account messages will appear here.</p>
+      </div>
+      <ul className="notification-list">
+        <li><strong>Readiness</strong><span>Local status and restart notices.</span></li>
+        <li><strong>Workflow</strong><span>PR, release, and routine activity.</span></li>
+        <li><strong>Security</strong><span>Vault and credentials posture reminders.</span></li>
+      </ul>
+    </section>
+  );
+}
+
+function AdminSurface(): ReactElement {
+  return (
+    <section className="settings-surface">
+      <div className="planned-card">
+        <h2>Admin</h2>
+        <p>Hosted administration, user access, billing, audit, and deployment controls are placeholders until authenticated server routes land.</p>
+      </div>
+    </section>
+  );
+}

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

@@ -46,6 +46,9 @@ export const surfaceIconNames = {
 export type SurfaceIconName = keyof typeof surfaceIconNames;
 export const surfaceIds = [
   "overview",
+  "settings",
+  "notifications",
+  "admin",
   "vault",
   "agents",
   "config",
@@ -221,6 +224,7 @@ export const text = {
   secrets: "Secrets",
   security: "Secrets",
   securityBoundary: "No write routes, no shell bridge, no hosted app control, no pairing, no secret values. Vault policy distinguishes Provider AI, Local AI, and Hybrid modes before protected data leaves the device.",
+  settingsAccountIntro: "Hosted account settings are prepared as disabled controls until authenticated write routes, confirmation, and audit trails land.",
   servers: "Servers",
   serversIntro: "Server inventory by provider, operating system, orchestrator, and installed apps.",
   setup: "Setup",
@@ -379,8 +383,15 @@ export const dashboardNavItem: SurfaceNavItem = {
   icon: "grid",
 };
 
+export const utilityNavItems: SurfaceNavItem[] = [
+  { id: "settings", label: "Settings", description: "Profile, login, notifications, language, and theme preferences", icon: "settings", badge: text.planned },
+  { id: "notifications", label: "Notifications", description: "Notification inbox and delivery preferences", icon: "message", badge: text.planned },
+  { id: "admin", label: "Admin", description: "Hosted administration controls", icon: "shield", badge: text.planned },
+];
+
 export const orderedNavItems: SurfaceNavItem[] = [
   dashboardNavItem,
+  ...utilityNavItems,
   ...navGroups.flatMap((group) => group.items),
 ];
 
@@ -516,6 +527,10 @@ export function isFontSizePreference(value: string | null): value is FontSizePre
 }
 
 export function sidebarModeForSurface(id: SurfaceId): SidebarMode {
+  if (utilityNavItems.some((item) => item.id === id)) {
+    return "comms";
+  }
+
   return navGroups.find((group) => group.items.some((item) => item.id === id))?.mode ?? "devops";
 }
 
@@ -528,6 +543,10 @@ export function findSurfaceSectionLabel(id: SurfaceId): string {
     return text.aidevops;
   }
 
+  if (utilityNavItems.some((item) => item.id === id)) {
+    return "Account";
+  }
+
   for (const group of navGroups) {
     for (const item of group.items) {
       if (item.id === id) {

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

@@ -38,6 +38,7 @@ export function renderDashboardHtml(status: GuiResponseEnvelope<GuiStatusData>):
     .join("");
   const navSections = [
     { heading: "Development", items: ["Local Repos", "Remote Repos", "Secrets", "AI Providers"] },
+    { heading: "Account", items: ["Settings", "Notifications", "Admin"] },
     { heading: "Operations", items: ["Dashboard", "Vault", "Agents file explorer", "Config", "Local Setup", "Routines"] },
     { heading: "Infrastructure", items: ["Devices", "VPNs & Proxies", "Apps", "Installation", "Registrars", "Hosts", "Servers"] },
     { heading: "Identities", items: ["Brands", "Domains", "Personas"] },
@@ -54,7 +55,7 @@ export function renderDashboardHtml(status: GuiResponseEnvelope<GuiStatusData>):
     `<h1>aidevops app interface</h1>`,
     `<p>Made for creators.</p>`,
     `<p>AI-assisted development workflows, code quality, and deployment automation.</p>`,
-    `<p>Theme follows system preferences with light and dark overrides. Sidebar modes: DevOps and Comms. Appearance controls can be hidden or shown, and include editable Hue, icon Reset, Show borders toggle, Show counts toggle, Font size choices xs, s, m, lg, xl, and Font options: IBM Plex Mono, IBM Plex Sans, IBM Plex Serif, Inter, Menlo (default), Playpen Sans, Poppins, Source Sans, Source Serif, Tilt Neon, Ubuntu Mono. A desktop status bar shows local readiness, repo totals, secret reference count, provider accounts, and update state.</p>`,
+    `<p>Theme follows system preferences with light and dark overrides. Sidebar modes: DevOps and Comms. Appearance controls can be hidden or shown, and include editable Hue, icon Reset, Show borders toggle, Show counts toggle, Font size choices xs, s, m, lg, xl, and Font options: IBM Plex Mono, IBM Plex Sans, IBM Plex Serif, Inter, Menlo (default), Playpen Sans, Poppins, Source Sans, Source Serif, Tilt Neon, Ubuntu Mono. The workspace header includes a command palette, notifications menu, AI Assistant panel, and profile menu with Settings, Theme, Language, Community, Admin, and Logout entries. A desktop status bar shows local readiness, repo totals, secret reference count, provider accounts, and update state.</p>`,
     `<p>Secret references stay read-only and redacted.</p>`,
     `<p>Vault surfaces show padlock indicators. Encrypted by aidevops Vault; contents visible only when unlocked through app or authorised vault commands.</p>`,
     `<p>${escapeHtml(status.data.update.message)}</p>`,

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

@@ -729,13 +729,29 @@ code {
 
 .workspace-search {
   background: var(--surface-muted);
+  border: 1px solid var(--border);
   border-radius: 999px;
+  color: var(--text-secondary);
   flex: 1 1 auto;
   gap: 8px;
   min-width: 160px;
   padding: 8px 12px;
 }
 
+.command-trigger {
+  justify-content: flex-start;
+  max-width: 340px;
+}
+
+.command-trigger strong {
+  color: var(--text-muted);
+  font-size: 0.86rem;
+  font-weight: 700;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .workspace-search span,
 .workspace-search input {
   color: var(--text-muted);
@@ -759,6 +775,234 @@ code {
   white-space: nowrap;
 }
 
+.header-action-menu {
+  position: relative;
+}
+
+.header-icon-button,
+.profile-avatar-button {
+  align-items: center;
+  background: var(--surface-muted);
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  color: var(--text-secondary);
+  display: inline-flex;
+  height: 38px;
+  justify-content: center;
+  padding: 0;
+  position: relative;
+  width: 38px;
+}
+
+.header-icon-button:hover,
+.header-icon-button:focus-visible,
+.header-icon-button.active,
+.profile-avatar-button:hover,
+.profile-avatar-button:focus-visible,
+.command-trigger:hover,
+.command-trigger:focus-visible {
+  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
+  color: var(--accent);
+  outline: none;
+}
+
+.header-icon-button svg {
+  height: 19px;
+  width: 19px;
+}
+
+.profile-avatar-button {
+  background: color-mix(in srgb, var(--accent) 18%, var(--surface-muted));
+  color: var(--accent);
+  font-weight: 900;
+}
+
+.notification-dot {
+  background: var(--accent);
+  border: 2px solid var(--surface-elevated);
+  border-radius: 999px;
+  height: 10px;
+  position: absolute;
+  right: 7px;
+  top: 7px;
+  width: 10px;
+}
+
+.popover-menu {
+  background: var(--surface-elevated);
+  border: 1px solid var(--border);
+  border-radius: 18px;
+  box-shadow: 0 18px 60px rgb(0 0 0 / 18%);
+  display: grid;
+  gap: 8px;
+  min-width: 220px;
+  padding: 12px;
+  position: absolute;
+  right: 0;
+  top: calc(100% + 10px);
+  z-index: 8;
+}
+
+.profile-menu {
+  min-width: 240px;
+}
+
+.popover-menu button,
+.popover-menu a {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  border-radius: 12px;
+  color: var(--text-secondary);
+  display: flex;
+  gap: 10px;
+  padding: 9px 10px;
+  text-align: left;
+  text-decoration: none;
+}
+
+.popover-menu button:hover:not(:disabled),
+.popover-menu a:hover,
+.popover-menu button:focus-visible,
+.popover-menu a:focus-visible {
+  background: var(--surface-muted);
+  color: var(--accent);
+  outline: none;
+}
+
+.popover-menu p {
+  color: var(--text-muted);
+  font-size: 0.88rem;
+  margin: 0;
+}
+
+.profile-menu-heading {
+  align-items: center;
+  display: flex;
+  gap: 10px;
+  padding: 4px 6px 8px;
+}
+
+.menu-separator {
+  border-top: 1px solid var(--border);
+  margin: 2px 0;
+}
+
+.disabled-menu-item {
+  opacity: 0.55;
+}
+
+.assistant-panel {
+  background: color-mix(in srgb, var(--surface-elevated) 98%, transparent);
+  border: 1px solid var(--border);
+  border-radius: 20px;
+  box-shadow: var(--glass-panel-shadow);
+  display: grid;
+  gap: 12px;
+  max-width: 360px;
+  padding: 16px;
+  position: absolute;
+  right: 14px;
+  top: calc(100% + 10px);
+  z-index: 7;
+}
+
+.assistant-panel p,
+.assistant-message {
+  color: var(--text-muted);
+  margin: 0;
+}
+
+.assistant-message {
+  background: var(--surface-muted);
+  border-radius: 14px;
+  padding: 12px;
+}
+
+.command-palette-backdrop {
+  align-items: flex-start;
+  background: rgb(0 0 0 / 28%);
+  display: flex;
+  inset: 0;
+  justify-content: center;
+  padding-top: 12vh;
+  position: fixed;
+  z-index: 20;
+}
+
+.command-palette-scrim {
+  background: transparent;
+  border: 0;
+  inset: 0;
+  padding: 0;
+  position: absolute;
+}
+
+.command-palette {
+  background: var(--surface-elevated);
+  border: 1px solid var(--border);
+  border-radius: 22px;
+  box-shadow: 0 26px 90px rgb(0 0 0 / 32%);
+  display: grid;
+  gap: 12px;
+  max-width: min(680px, calc(100vw - 32px));
+  padding: 14px;
+  position: relative;
+  width: 100%;
+}
+
+.command-input-row {
+  align-items: center;
+  background: var(--surface-muted);
+  border: 1px solid var(--border);
+  border-radius: 16px;
+  display: flex;
+  gap: 10px;
+  padding: 12px;
+}
+
+.command-input-row input {
+  background: transparent;
+  border: 0;
+  color: var(--text-primary);
+  flex: 1 1 auto;
+  outline: none;
+}
+
+.command-palette ul,
+.notification-list {
+  display: grid;
+  gap: 8px;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.command-palette button {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  border-radius: 14px;
+  color: var(--text-secondary);
+  display: flex;
+  gap: 12px;
+  padding: 10px;
+  text-align: left;
+  width: 100%;
+}
+
+.command-palette button:hover,
+.command-palette button:focus-visible {
+  background: var(--surface-muted);
+  color: var(--accent);
+  outline: none;
+}
+
+.command-palette small {
+  color: var(--text-muted);
+  display: block;
+}
+
 .workspace-scroll {
   display: grid;
   gap: 16px;
@@ -774,6 +1018,7 @@ code {
 .hero-panel,
 .panel,
 .metric-card,
+.planned-card,
 .planned-home {
   background: var(--surface-elevated);
   border: 1px solid var(--border);
@@ -829,11 +1074,54 @@ code {
 }
 
 .metric-card,
+.planned-card,
 .planned-home,
 .panel {
   padding: 18px;
 }
 
+.settings-surface,
+.settings-form {
+  display: grid;
+  gap: 16px;
+}
+
+.settings-form {
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+}
+
+.settings-form label {
+  display: grid;
+  gap: 8px;
+}
+
+.settings-form span {
+  color: var(--text-secondary);
+  font-weight: 800;
+}
+
+.settings-form input,
+.settings-form select {
+  background: var(--surface-muted);
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  color: var(--text-secondary);
+  padding: 11px 12px;
+}
+
+.notification-list li {
+  background: var(--surface-elevated);
+  border: 1px solid var(--border);
+  border-radius: 16px;
+  display: grid;
+  gap: 4px;
+  padding: 14px;
+}
+
+.notification-list span {
+  color: var(--text-muted);
+}
+
 .metric-card span,
 .planned-home span,
 .data-row.header-row,

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.23.1
+# Version: 3.24.1
 #
 # Quick Install:
 #   npm install -g aidevops && aidevops update          (recommended)
@@ -1205,6 +1205,7 @@ _setup_run_scoped_stage() {
 		;;
 	"$SETUP_STAGE_AGENTS")
 		_time_step "$SETUP_STAGE_AGENTS" deploy_aidevops_agents
+		_time_step "setup_opencode_plugins" setup_opencode_plugins
 		_time_step "_deploy_hotfix_config" _deploy_hotfix_config
 		;;
 	"$SETUP_STAGE_HOOKS")
@@ -1264,6 +1265,7 @@ _setup_run_non_interactive() {
 	_time_step "$SETUP_STAGE_OPENCODE" setup_opencode_cli
 	_time_step "validate_opencode_config" validate_opencode_config
 	_time_step "$SETUP_STAGE_AGENTS" deploy_aidevops_agents
+	_time_step "setup_opencode_plugins" setup_opencode_plugins
 	_time_step "_setup_install_pulse_plist_early" _setup_install_pulse_plist_early
 	_time_step "_deploy_hotfix_config" _deploy_hotfix_config
 	_time_step "setup_opencode_desktop_launcher" setup_opencode_desktop_launcher