aidevops 3.25.0 → 3.26.0

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

package/aidevops.sh

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

package/package.json

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

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

@@ -221,14 +221,14 @@ function ConversationSidebar({ conversationMode, selectedLocalRepoIndex, setConv
       {conversationMode === "people" ? <PeopleChannelList /> : <>
       <button className="new-session-button" disabled title="Creating sessions needs an audited OpenCode write route." type="button">{text.newSession}</button>
       <section className="repo-session-selector" aria-label={text.localRepoSelector}>
-        <button aria-label="Previous local repo" disabled={!canSelectPreviousRepo} onClick={() => setSelectedLocalRepoIndex(Math.max(0, selectedLocalRepoIndex - 1))} type="button"><FiChevronLeft /></button>
-        <label>
-          <span>{text.localRepos}</span>
-          <select onChange={(event) => setSelectedLocalRepoIndex(Number.parseInt(event.currentTarget.value, 10))} value={Math.min(selectedLocalRepoIndex, Math.max(0, repos.length - 1))}>
+        <span className="repo-selector-heading" id="local-repo-selector-label">{text.localRepos}</span>
+        <div className="selector-with-stepper repo-selector-row">
+          <button aria-label="Previous local repo" className="selector-step-button" disabled={!canSelectPreviousRepo} onClick={() => setSelectedLocalRepoIndex(Math.max(0, selectedLocalRepoIndex - 1))} type="button"><FiChevronLeft aria-hidden="true" /></button>
+          <select aria-labelledby="local-repo-selector-label" onChange={(event) => setSelectedLocalRepoIndex(Number.parseInt(event.currentTarget.value, 10))} value={Math.min(selectedLocalRepoIndex, Math.max(0, repos.length - 1))}>
             {repos.length === 0 ? <option value={0}>No local repos</option> : repos.map((repo, index) => <option key={repo.path_ref} value={index}>{repo.name}</option>)}
           </select>
-        </label>
-        <button aria-label="Next local repo" disabled={!canSelectNextRepo} onClick={() => setSelectedLocalRepoIndex(Math.min(repos.length - 1, selectedLocalRepoIndex + 1))} type="button"><FiChevronRight /></button>
+          <button aria-label="Next local repo" className="selector-step-button" disabled={!canSelectNextRepo} onClick={() => setSelectedLocalRepoIndex(Math.min(repos.length - 1, selectedLocalRepoIndex + 1))} type="button"><FiChevronRight aria-hidden="true" /></button>
+        </div>
       </section>
       <section className="sidebar-group session-history-list">
         <h2>{text.sessionHistory}</h2>
@@ -386,8 +386,20 @@ function SidebarFooter({ accentHue, fontPreference, fontSizePreference, setAccen
   const [appearanceOpen, setAppearanceOpen] = useState(true);
   const AppearanceChevron = appearanceOpen ? FiChevronDown : FiChevronUp;
   const selectedFontFamily = fontFamilyForPreference(fontPreference);
+  const fontIndex = Math.max(0, fontOptions.findIndex((option) => option.value === fontPreference));
   const fontSizeIndex = Math.max(0, fontSizeOptions.findIndex((option) => option.value === fontSizePreference));
+  const canSelectPreviousFont = fontIndex > 0;
+  const canSelectNextFont = fontIndex < fontOptions.length - 1;
   const [hueInput, setHueInput] = useState(() => String(accentHue));
+  const setFontByIndex = (index: number) => {
+    const nextFont = fontOptions[index]?.value;
+
+    if (nextFont === undefined) {
+      return;
+    }
+
+    setFontPreference(nextFont);
+  };
   const updateAccentHue = (value: number) => {
     if (!Number.isFinite(value)) {
       return;
@@ -486,20 +498,25 @@ function SidebarFooter({ accentHue, fontPreference, fontSizePreference, setAccen
               {fontSizeOptions.map((option) => <span className={option.value === fontSizePreference ? "active" : ""} key={option.value}>{option.label}</span>)}
             </div>
           </div>
-          <label className="font-control">
-            <span>{text.font}</span>
-            <select
-              onChange={(event) => setFontPreference(event.currentTarget.value as FontPreference)}
-              style={{ fontFamily: selectedFontFamily }}
-              value={fontPreference}
-            >
-              {fontOptions.map((option) => (
-                <option key={option.value} style={{ fontFamily: option.fontFamily }} value={option.value}>
-                  {option.label}
-                </option>
-              ))}
-            </select>
-          </label>
+          <div className="font-control">
+            <span id="appearance-font-selector-label">{text.font}</span>
+            <div className="selector-with-stepper font-selector-row">
+              <button aria-label="Previous font" className="selector-step-button" disabled={!canSelectPreviousFont} onClick={() => setFontByIndex(fontIndex - 1)} type="button"><FiChevronLeft aria-hidden="true" /></button>
+              <select
+                aria-labelledby="appearance-font-selector-label"
+                onChange={(event) => setFontPreference(event.currentTarget.value as FontPreference)}
+                style={{ fontFamily: selectedFontFamily }}
+                value={fontPreference}
+              >
+                {fontOptions.map((option) => (
+                  <option key={option.value} style={{ fontFamily: option.fontFamily }} value={option.value}>
+                    {option.label}
+                  </option>
+                ))}
+              </select>
+              <button aria-label="Next font" className="selector-step-button" disabled={!canSelectNextFont} onClick={() => setFontByIndex(fontIndex + 1)} type="button"><FiChevronRight aria-hidden="true" /></button>
+            </div>
+          </div>
         </div>
         : null}
       </section>

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

@@ -1,5 +1,5 @@
 /* jshint esversion: 11 */
-import { type ReactElement, type ReactNode, useEffect, useMemo, useState } from "react";
+import { type ReactElement, type ReactNode, useEffect, useMemo, useRef, useState } from "react";
 import { FiBell, FiChevronLeft, FiChevronRight, FiCommand, FiCpu, FiGlobe, FiHash, FiLogOut, FiMessageSquare, FiSearch, FiSettings, FiShield, FiUser } from "react-icons/fi";
 import type { GuiFileRootId, GuiStatusData } from "../../gui-shared/src";
 import { SurfaceGlyph } from "./AppNavigation";
@@ -54,6 +54,7 @@ function WorkspaceHeader({ activeItem, activeSectionLabel, activeSurface, canGoB
   status: GuiStatusData;
 }): ReactElement {
   const [assistantOpen, setAssistantOpen] = useState(false);
+  const [commandInitialQuery, setCommandInitialQuery] = useState("");
   const [commandOpen, setCommandOpen] = useState(false);
   const [notificationsOpen, setNotificationsOpen] = useState(false);
   const [profileOpen, setProfileOpen] = useState(false);
@@ -64,6 +65,14 @@ function WorkspaceHeader({ activeItem, activeSectionLabel, activeSurface, canGoB
     const openCommandPalette = (event: KeyboardEvent) => {
       if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") {
         event.preventDefault();
+        setCommandInitialQuery("");
+        setCommandOpen(true);
+        return;
+      }
+
+      if (event.key === "/" && !isEditableShortcutTarget(event.target)) {
+        event.preventDefault();
+        setCommandInitialQuery("/");
         setCommandOpen(true);
       }
     };
@@ -92,16 +101,18 @@ function WorkspaceHeader({ activeItem, activeSectionLabel, activeSurface, canGoB
           <h1>{activeItem.label}</h1>
         </div>
       </div>
-      <div className="header-actions">
+      <div className="header-center-controls">
         <div className="sidebar-history-controls workspace-history-controls">
           <button aria-label="Previous surface" disabled={!canGoBack} onClick={goBack} type="button"><FiChevronLeft /></button>
           <button aria-label="Next surface" disabled={!canGoForward} onClick={goForward} type="button"><FiChevronRight /></button>
         </div>
-        <button className="workspace-search command-trigger" onClick={() => setCommandOpen(true)} type="button">
+        <button className="workspace-search command-trigger" onClick={() => { setCommandInitialQuery(""); setCommandOpen(true); }} type="button">
           <FiSearch aria-hidden="true" />
           <span>⌘K</span>
           <strong>{text.searchPlaceholder}</strong>
         </button>
+      </div>
+      <div className="header-actions">
         <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" />
@@ -120,11 +131,19 @@ function WorkspaceHeader({ activeItem, activeSectionLabel, activeSurface, canGoB
         </div>
       </div>
       {assistantOpen ? <AssistantPanel activeSurface={activeSurface} userName={userName} /> : null}
-      {commandOpen ? <CommandPalette close={() => setCommandOpen(false)} openSurface={openSurface} /> : null}
+      {commandOpen ? <CommandPalette close={() => setCommandOpen(false)} initialQuery={commandInitialQuery} openSurface={openSurface} status={status} /> : null}
     </header>
   );
 }
 
+function isEditableShortcutTarget(target: EventTarget | null): boolean {
+  if (!(target instanceof HTMLElement)) {
+    return false;
+  }
+
+  return target.isContentEditable || ["INPUT", "SELECT", "TEXTAREA"].includes(target.tagName);
+}
+
 function NotificationsMenu({ openSurface }: { openSurface: (surface: SurfaceId) => void }): ReactElement {
   return (
     <div className="popover-menu notifications-menu" role="menu">
@@ -216,14 +235,79 @@ function AssistantPanel({ activeSurface, userName }: { activeSurface: SurfaceId;
   );
 }
 
-function CommandPalette({ close, openSurface }: { close: () => void; openSurface: (surface: SurfaceId) => void }): ReactElement {
-  const [query, setQuery] = useState("");
+interface CommandPaletteItem {
+  description: string;
+  icon: SurfaceNavItem["icon"];
+  id: string;
+  label: string;
+  searchText: string;
+  surface: SurfaceId;
+  tag: string;
+}
+
+const slashCommandItems: CommandPaletteItem[] = [
+  { id: "slash-add-device", label: "/add-device", description: "Start device pairing setup", icon: "device", searchText: "/add-device add device pair machine", surface: "devices", tag: "Command" },
+  { id: "slash-add-local-repo", label: "/add-local-repo", description: "Add a local repository path", icon: "folder", searchText: "/add-local-repo add local repo git", surface: "git", tag: "Command" },
+  { id: "slash-add-remote-repo", label: "/add-remote-repo", description: "Register a remote repository", icon: "git", searchText: "/add-remote-repo add remote repo", surface: "projects", tag: "Command" },
+  { id: "slash-add-secret", label: "/add-secret", description: "Add a protected secret reference", icon: "shield", searchText: "/add-secret add secret vault", surface: "security", tag: "Command" },
+  { id: "slash-add-ai-provider", label: "/add-ai-provider", description: "Connect an AI provider account", icon: "users", searchText: "/add-ai-provider add ai provider oauth", surface: "aiProviders", tag: "Command" },
+];
+
+const plannedChannelItems: CommandPaletteItem[] = [
+  { id: "channel-devops", label: "#devops", description: "Chat channel for aidevops operations", icon: "message", searchText: "#devops devops channel chat", surface: "messagingAccounts", tag: "Channel" },
+  { id: "channel-comms", label: "#comms", description: "Chat channel for communications", icon: "message", searchText: "#comms comms channel chat", surface: "messagingAccounts", tag: "Channel" },
+];
+
+function CommandPalette({ close, initialQuery, openSurface, status }: { close: () => void; initialQuery: string; openSurface: (surface: SurfaceId) => void; status: GuiStatusData }): ReactElement {
+  const [query, setQuery] = useState(initialQuery);
+  const inputRef = useRef<HTMLInputElement>(null);
   const matches = useMemo(() => {
     const normalizedQuery = query.trim().toLowerCase();
-    return orderedNavItems
-      .filter((item) => normalizedQuery.length === 0 || `${item.label} ${item.description}`.toLowerCase().includes(normalizedQuery))
+    const surfaceItems: CommandPaletteItem[] = orderedNavItems.map((item) => ({
+      description: item.description,
+      icon: item.icon,
+      id: `surface-${item.id}`,
+      label: item.label,
+      searchText: `${item.label} ${item.description}`,
+      surface: item.id,
+      tag: "Surface",
+    }));
+    const sessionItems: CommandPaletteItem[] = status.opencode_sessions.sessions.map((session) => ({
+      description: `AI session in ${session.repo_path_ref}`,
+      icon: "terminal",
+      id: `session-${session.id_ref}`,
+      label: `#${session.title}`,
+      searchText: `#${session.title} ${session.title} ${session.repo_path_ref} ${session.agent} ${session.model}`,
+      surface: "git",
+      tag: "AI session",
+    }));
+    const directMessageItems: CommandPaletteItem[] = [{
+      description: "Direct message thread placeholder",
+      icon: "users",
+      id: "dm-local-user",
+      label: `@${status.machine.username || "local-user"}`,
+      searchText: `@${status.machine.username || "local-user"} direct message dm person local user`,
+      surface: "messagingAccounts",
+      tag: "Direct message",
+    }];
+    const items = [...surfaceItems, ...sessionItems, ...plannedChannelItems, ...directMessageItems, ...slashCommandItems];
+    const prefix = normalizedQuery.charAt(0);
+    const scopedItems = prefix === "/"
+      ? slashCommandItems
+      : prefix === "@"
+        ? directMessageItems
+        : prefix === "#"
+          ? [...sessionItems, ...plannedChannelItems]
+          : items;
+
+    return scopedItems
+      .filter((item) => normalizedQuery.length === 0 || item.searchText.toLowerCase().includes(normalizedQuery))
       .slice(0, 8);
-  }, [query]);
+  }, [query, status.machine.username, status.opencode_sessions.sessions]);
+
+  useEffect(() => {
+    inputRef.current?.focus();
+  }, []);
 
   useEffect(() => {
     const closeOnEscape = (event: KeyboardEvent) => {
@@ -242,14 +326,14 @@ function CommandPalette({ close, openSurface }: { close: () => void; openSurface
       <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} />
+          <input ref={inputRef} onChange={(event) => setQuery(event.currentTarget.value)} placeholder="Search commands, #sessions, #channels, @people, or /actions" value={query} />
         </label>
         <ul>
           {matches.map((item) => (
             <li key={item.id}>
-              <button onClick={() => openSurface(item.id)} type="button">
+              <button onClick={() => openSurface(item.surface)} type="button">
                 <span className="surface-icon" aria-hidden="true"><SurfaceGlyph icon={item.icon} /></span>
-                <span><strong>{item.label}</strong><small>{item.description}</small></span>
+                <span><strong>{item.label}</strong><small>{item.tag} · {item.description}</small></span>
               </button>
             </li>
           ))}

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

@@ -211,6 +211,7 @@ code {
 .theme-control-heading,
 .appearance-panel-tab,
 .header-title,
+.header-center-controls,
 .header-actions,
 .workspace-search,
 .version-pill,
@@ -377,42 +378,65 @@ code {
 }
 
 .repo-session-selector {
-  align-items: end;
+  display: grid;
+  gap: 7px;
+}
+
+.selector-with-stepper {
+  align-items: center;
   display: grid;
   gap: 8px;
   grid-template-columns: auto minmax(0, 1fr) auto;
 }
 
-.repo-session-selector button {
+.repo-session-selector .selector-step-button,
+.selector-step-button {
   align-items: center;
   background: var(--surface-muted);
   border: 1px solid var(--border);
   border-radius: 999px;
   color: var(--text-secondary);
   display: inline-flex;
-  height: 34px;
+  height: 40px;
   justify-content: center;
-  width: 34px;
 }
 
-.repo-session-selector label {
-  display: grid;
-  gap: 5px;
-  min-width: 0;
+.selector-step-button {
+  padding: 0;
+  width: 40px;
 }
 
-.repo-session-selector label span {
+.selector-step-button:hover:not(:disabled),
+.selector-step-button:focus-visible {
+  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
+  color: var(--accent);
+  outline: none;
+}
+
+.selector-step-button svg {
+  height: 18px;
+  stroke-width: 2.5;
+  width: 18px;
+}
+
+.repo-selector-heading {
   color: var(--text-muted);
   font-size: 0.72rem;
   font-weight: 900;
+  text-align: center;
   text-transform: uppercase;
 }
 
+.repo-selector-row {
+  align-items: center;
+}
+
 .repo-session-selector select {
   background: var(--surface-muted);
   border: 1px solid var(--border);
   border-radius: 10px;
   color: var(--text-primary);
+  min-height: 40px;
   min-width: 0;
   padding: 8px;
 }
@@ -754,11 +778,16 @@ code {
   border: 1px solid var(--border);
   border-radius: 12px;
   color: var(--text-primary);
+  min-height: 40px;
   min-width: 0;
   padding: 9px 10px;
   width: 100%;
 }
 
+.font-selector-row {
+  align-items: center;
+}
+
 .app-inset {
   display: grid;
   grid-template-rows: auto minmax(0, 1fr);
@@ -770,9 +799,9 @@ code {
   background: color-mix(in srgb, var(--surface-elevated) 94%, transparent);
   border-bottom: 1px solid var(--border);
   display: flex;
-  gap: 16px;
-  min-height: 58px;
-  padding: 10px 14px;
+  gap: 12px;
+  min-height: 54px;
+  padding: 8px 14px;
   position: sticky;
   top: 0;
   z-index: 2;
@@ -780,7 +809,7 @@ code {
 
 .header-title {
   flex: 0 0 auto;
-  gap: 10px;
+  gap: 8px;
   min-width: 0;
 }
 
@@ -788,12 +817,14 @@ code {
   color: var(--text-muted);
   font-size: 0.76rem;
   font-weight: 900;
+  line-height: 1.15;
   margin: 0;
   text-transform: uppercase;
 }
 
 .header-title h1 {
   font-size: 1rem;
+  line-height: 1.15;
   margin: 0;
 }
 
@@ -809,15 +840,25 @@ code {
   align-items: center;
   color: var(--accent);
   display: inline-flex;
-  height: 34px;
+  height: 32px;
   justify-content: center;
-  width: 34px;
+  width: 32px;
 }
 
 .workspace-surface-icon svg {
-  height: 24px;
+  height: 23px;
   stroke-width: 2.2;
-  width: 24px;
+  width: 23px;
+}
+
+.header-center-controls {
+  gap: 10px;
+  left: 50%;
+  max-width: min(560px, 48vw);
+  min-width: 0;
+  position: absolute;
+  transform: translateX(-50%);
+  width: min(560px, 48vw);
 }
 
 .header-actions {
@@ -840,7 +881,7 @@ code {
 
 .command-trigger {
   justify-content: flex-start;
-  max-width: 340px;
+  max-width: none;
 }
 
 .command-trigger strong {
@@ -1024,12 +1065,11 @@ code {
 }
 
 .command-palette-backdrop {
-  align-items: flex-start;
+  align-items: center;
   background: rgb(0 0 0 / 28%);
   display: flex;
   inset: 0;
   justify-content: center;
-  padding-top: 12vh;
   position: fixed;
   z-index: 20;
 }
@@ -1052,6 +1092,7 @@ code {
   max-width: min(680px, calc(100vw - 32px));
   padding: 14px;
   position: relative;
+  transform: translateY(-2vh);
   width: 100%;
 }
 
@@ -2071,12 +2112,20 @@ code {
   }
 
   .workspace-header,
+  .header-center-controls,
   .header-actions,
   .split-heading {
     align-items: stretch;
     flex-direction: column;
   }
 
+  .header-center-controls {
+    max-width: none;
+    position: static;
+    transform: none;
+    width: 100%;
+  }
+
   .workspace-search {
     min-width: 0;
     width: 100%;

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.25.0
+# Version: 3.26.0
 #
 # Quick Install:
 #   npm install -g aidevops && aidevops update          (recommended)