aidevops 3.29.21 → 3.29.23

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

package/aidevops.sh

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

package/package.json

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

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

@@ -152,7 +152,6 @@ function binaryPathCandidates(binary: string): string[] {
 }
 
 function expandedPath(): string {
-  const home = process.env.HOME ?? "";
   const extraPaths = [
     "/opt/homebrew/bin",
     "/usr/local/bin",
@@ -160,11 +159,16 @@ function expandedPath(): string {
     "/bin",
     "/usr/sbin",
     "/sbin",
-    join(home, ".bun/bin"),
-    join(home, ".local/bin"),
-    join(home, ".cursor/bin"),
-    join(home, ".qlty/bin"),
   ];
+  const home = process.env.HOME;
+  if (home) {
+    extraPaths.push(
+      join(home, ".bun/bin"),
+      join(home, ".local/bin"),
+      join(home, ".cursor/bin"),
+      join(home, ".qlty/bin"),
+    );
+  }
   return [...new Set([...(process.env.PATH ?? "").split(":"), ...extraPaths].filter(Boolean))].join(":");
 }
 

package/packages/gui-desktop/scripts/install-macos-app.sh

@@ -382,20 +382,35 @@ final class AppDelegate: NSObject, NSApplicationDelegate, WKNavigationDelegate,
     }
 
     func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
-        guard message.name == "accentHue" else {
+        switch message.name {
+        case "accentHue":
+            updateAccentHueFromMessage(message.body)
+        case "externalLink":
+            openExternalLinkFromMessage(message.body)
+        default:
             return
         }
+    }
 
-        if let number = message.body as? NSNumber {
+    private func updateAccentHueFromMessage(_ body: Any) {
+        if let number = body as? NSNumber {
             updateTitlebarAccent(hue: CGFloat(number.doubleValue))
             return
         }
 
-        if let value = message.body as? String, let hue = Double(value) {
+        if let value = body as? String, let hue = Double(value) {
             updateTitlebarAccent(hue: CGFloat(hue))
         }
     }
 
+    private func openExternalLinkFromMessage(_ body: Any) {
+        guard let value = body as? String, let url = URL(string: value) else {
+            return
+        }
+
+        _ = openExternalURL(url)
+    }
+
     func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) {
         guard let url = navigationAction.request.url else {
             decisionHandler(.allow)
@@ -407,8 +422,7 @@ final class AppDelegate: NSObject, NSApplicationDelegate, WKNavigationDelegate,
             return
         }
 
-        if url.scheme == "http" || url.scheme == "https" {
-            NSWorkspace.shared.open(url)
+        if openExternalURL(url) {
             decisionHandler(.cancel)
             return
         }
@@ -421,13 +435,21 @@ final class AppDelegate: NSObject, NSApplicationDelegate, WKNavigationDelegate,
             return nil
         }
 
-        if url.scheme == "http" || url.scheme == "https" {
-            NSWorkspace.shared.open(url)
-        }
+        _ = openExternalURL(url)
 
         return nil
     }
 
+    private func openExternalURL(_ url: URL) -> Bool {
+        let scheme = url.scheme?.lowercased()
+        guard scheme == "http" || scheme == "https" else {
+            return false
+        }
+
+        NSWorkspace.shared.open(url)
+        return true
+    }
+
     private func isLocalAppURL(_ url: URL) -> Bool {
         let host = url.host ?? ""
         return (host == "127.0.0.1" || host == "localhost") && url.port == Int(webPort)
@@ -692,6 +714,7 @@ final class AppDelegate: NSObject, NSApplicationDelegate, WKNavigationDelegate,
         configuration.preferences.javaScriptCanOpenWindowsAutomatically = true
         let userContentController = WKUserContentController()
         userContentController.add(self, name: "accentHue")
+        userContentController.add(self, name: "externalLink")
         configuration.userContentController = userContentController
         webView = WKWebView(frame: .zero, configuration: configuration)
         webView.navigationDelegate = self

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

@@ -97,6 +97,7 @@ function buildGuiStateNotifications(input: BuildNotificationInput): GuiNotificat
   const appNeedsUpdate = (input.aiApps ?? []).filter((app) => app.needs_update);
   const authErrors = (input.oauthPool?.providers ?? []).filter((provider) => provider.auth_errors > 0);
   const rateLimited = (input.oauthPool?.providers ?? []).filter((provider) => provider.rate_limited > 0);
+  const oauthPoolSourceRef = input.oauthPool?.path_ref ?? "oauth_pool";
   const notifications: GuiNotificationSummary[] = [];
 
   if (input.restartRequired) {
@@ -135,7 +136,7 @@ function buildGuiStateNotifications(input: BuildNotificationInput): GuiNotificat
       severity: "error",
       category: "runtime",
       source: "gui-status",
-      source_ref: input.oauthPool.path_ref,
+      source_ref: oauthPoolSourceRef,
       status: "active",
       actions: [surfaceAction("open-ai-providers", "Open AI providers", "aiProviders"), commandAction("check-oauth-pool", "Check provider pool", `aidevops oauth-pool check ${provider.provider}`)],
     }));
@@ -149,7 +150,7 @@ function buildGuiStateNotifications(input: BuildNotificationInput): GuiNotificat
       severity: "warning",
       category: "runtime",
       source: "gui-status",
-      source_ref: input.oauthPool.path_ref,
+      source_ref: oauthPoolSourceRef,
       status: "active",
       actions: [surfaceAction("open-ai-providers", "Open AI providers", "aiProviders")],
     }));

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

@@ -2,8 +2,8 @@ import type { GuiResponseEnvelope, GuiStatusData } from "@aidevops/gui-shared";
 import { type KeyboardEvent as ReactKeyboardEvent, type MouseEvent as ReactMouseEvent, type ReactElement, useEffect, useState } from "react";
 import { MachineRail, Sidebar } from "./AppNavigation";
 import { Workspace } from "./AppWorkspace";
-import type { ConversationMode, FontPreference, FontSizePreference, ShellMode, SurfaceId, ThemePreference } from "./app-model";
-import { DEFAULT_ACCENT_HUE, DEFAULT_FONT, DEFAULT_FONT_SIZE, fileRootBySurface, findSurface, findSurfaceSectionLabel, fontFamilyForPreference, fontSizeForPreference, getSystemTheme, isFontPreference, isFontSizePreference } from "./app-model";
+import type { ContrastPreference, ConversationMode, FontPreference, FontSizePreference, ShellMode, SurfaceId, ThemePreference } from "./app-model";
+import { DEFAULT_ACCENT_HUE, DEFAULT_CONTRAST, DEFAULT_FONT, DEFAULT_FONT_SIZE, fileRootBySurface, findSurface, findSurfaceSectionLabel, fontFamilyForPreference, fontSizeForPreference, getSystemTheme, isContrastPreference, isFontPreference, isFontSizePreference } from "./app-model";
 import { type NavigationHistory, nextHistoryIndex, useNavigationHistoryKeyboard } from "./navigation-history";
 import { fetchStatus, mockedStatus } from "./status-client";
 
@@ -23,6 +23,7 @@ type AppearanceStorageKey = (typeof appearanceStorageKeys)[keyof typeof appearan
 
 export const appearanceStorageKeys = {
   accentHue: "aidevops-gui-accent-hue",
+  contrast: "aidevops-gui-contrast",
   font: "aidevops-gui-font",
   fontSize: "aidevops-gui-font-size",
   machineRail: "aidevops-gui-show-machine-rail",
@@ -37,9 +38,27 @@ const minSidebarWidth = 300;
 const maxSidebarWidth = 520;
 export const loadingSkeletonPanelLabels = ["machine rail", "sidebar", "workspace", "status bar"] as const;
 export const loadingBrandGlyph = ">_";
+const loadingMachineOrbKeys = ["machine-orb-a", "machine-orb-b", "machine-orb-c", "machine-orb-d", "machine-orb-e", "machine-orb-f"] as const;
+const loadingListRows = [
+  { key: "loading-list-a", variant: "short" },
+  { key: "loading-list-b", variant: "line" },
+  { key: "loading-list-c", variant: "line" },
+  { key: "loading-list-d", variant: "short" },
+  { key: "loading-list-e", variant: "line" },
+  { key: "loading-list-f", variant: "line" },
+  { key: "loading-list-g", variant: "short" },
+  { key: "loading-list-h", variant: "line" },
+  { key: "loading-list-i", variant: "line" },
+  { key: "loading-list-j", variant: "short" },
+  { key: "loading-list-k", variant: "line" },
+  { key: "loading-list-l", variant: "line" },
+] as const;
+const loadingCardKeys = ["loading-card-a", "loading-card-b", "loading-card-c", "loading-card-d", "loading-card-e", "loading-card-f"] as const;
+const loadingStatusRows = ["dot", "line-a", "line-b", "line-c", "line-d", "line-e", "line-f", "line-g"] as const;
 
 export interface StoredAppearancePreferences {
   accentHue: number;
+  contrastPreference: ContrastPreference;
   fontPreference: FontPreference;
   fontSizePreference: FontSizePreference;
   machineRailVisible: boolean;
@@ -51,11 +70,13 @@ export interface StoredAppearancePreferences {
 export function readStoredAppearancePreferences(storage: ReadableAppearanceStorage | undefined = browserLocalStorage(), isDesktopShell = isMacosDesktopBrowser()): StoredAppearancePreferences {
   const savedTheme = storage?.getItem(appearanceStorageKeys.theme);
   const savedAccentHue = Number.parseInt(storage?.getItem(appearanceStorageKeys.accentHue) ?? "", 10);
+  const savedContrast = storage?.getItem(appearanceStorageKeys.contrast) ?? null;
   const savedFont = storage?.getItem(appearanceStorageKeys.font) ?? null;
   const savedFontSize = storage?.getItem(appearanceStorageKeys.fontSize) ?? null;
 
   return {
     accentHue: Number.isFinite(savedAccentHue) && savedAccentHue >= 0 && savedAccentHue <= 359 ? savedAccentHue : DEFAULT_ACCENT_HUE,
+    contrastPreference: isContrastPreference(savedContrast) ? savedContrast : DEFAULT_CONTRAST,
     fontPreference: isFontPreference(savedFont) ? savedFont : DEFAULT_FONT,
     fontSizePreference: isFontSizePreference(savedFontSize) ? savedFontSize : DEFAULT_FONT_SIZE,
     machineRailVisible: isDesktopShell ? readStoredBoolean(storage, appearanceStorageKeys.machineRail, true) : true,
@@ -72,6 +93,7 @@ export function App(): ReactElement {
   const [navigation, setNavigation] = useState<NavigationHistory>({ entries: ["overview"], index: 0 });
   const [themePreference, setThemePreference] = useState<ThemePreference>(storedAppearancePreferences.themePreference);
   const [accentHue, setAccentHue] = useState(storedAppearancePreferences.accentHue);
+  const [contrastPreference, setContrastPreference] = useState<ContrastPreference>(storedAppearancePreferences.contrastPreference);
   const [fontPreference, setFontPreference] = useState<FontPreference>(storedAppearancePreferences.fontPreference);
   const [fontSizePreference, setFontSizePreference] = useState<FontSizePreference>(storedAppearancePreferences.fontSizePreference);
   const [machineRailVisible, setMachineRailVisible] = useState(storedAppearancePreferences.machineRailVisible);
@@ -146,6 +168,11 @@ export function App(): ReactElement {
     sendNativeAccentHue(accentHue);
   }, [accentHue]);
 
+  useEffect(() => {
+    document.documentElement.dataset.contrast = contrastPreference;
+    persistAppearancePreference(appearanceStorageKeys.contrast, contrastPreference);
+  }, [contrastPreference]);
+
   useEffect(() => {
     document.documentElement.style.setProperty("--font-family-app", fontFamilyForPreference(fontPreference));
     persistAppearancePreference(appearanceStorageKeys.font, fontPreference);
@@ -191,12 +218,14 @@ export function App(): ReactElement {
       <Sidebar
         activeSurface={activeSurface}
         accentHue={accentHue}
+        contrastPreference={contrastPreference}
         conversationMode={conversationMode}
         fontSizePreference={fontSizePreference}
         fontPreference={fontPreference}
         selectedLocalRepoIndex={selectedLocalRepoIndex}
         selectedSessionId={selectedSessionId}
         setAccentHue={setAccentHue}
+        setContrastPreference={setContrastPreference}
         setActiveSurface={setActiveSurface}
         setConversationMode={setConversationMode}
         setFontSizePreference={setFontSizePreference}
@@ -246,7 +275,7 @@ export function AppLoadingSkeleton({ machineRailVisible }: { machineRailVisible:
       <LoadingBrandOverlay />
       {machineRailVisible ? (
         <section className="machine-rail loading-panel" aria-label={loadingSkeletonPanelLabels[0]}>
-          {Array.from({ length: 6 }, (_, index) => <span className="loading-orb" key={index} />)}
+          {loadingMachineOrbKeys.map((key) => <span className="loading-orb" key={key} />)}
         </section>
       ) : null}
       <section className="app-sidebar loading-panel" aria-label={loadingSkeletonPanelLabels[1]}>
@@ -256,7 +285,7 @@ export function AppLoadingSkeleton({ machineRailVisible }: { machineRailVisible:
         </div>
         <span className="loading-pill" />
         <div className="loading-list">
-          {Array.from({ length: 12 }, (_, index) => <span className={index % 3 === 0 ? "loading-line loading-line-short" : "loading-line"} key={index} />)}
+          {loadingListRows.map((row) => <span className={row.variant === "short" ? "loading-line loading-line-short" : "loading-line"} key={row.key} />)}
         </div>
         <div className="loading-sidebar-footer">
           <span className="loading-pill" />
@@ -275,13 +304,13 @@ export function AppLoadingSkeleton({ machineRailVisible }: { machineRailVisible:
         <div className="loading-workspace-body">
           <span className="loading-line loading-line-hero" />
           <div className="loading-card-grid">
-            {Array.from({ length: 6 }, (_, index) => <span className="loading-card" key={index} />)}
+            {loadingCardKeys.map((key) => <span className="loading-card" key={key} />)}
           </div>
           <span className="loading-panel-block" />
         </div>
       </section>
-      <div className="desktop-status-bar loading-status-bar" aria-label={loadingSkeletonPanelLabels[3]}>
-        {Array.from({ length: 8 }, (_, index) => <span className={index === 0 ? "loading-dot" : "loading-line"} key={index} />)}
+      <div className="desktop-status-bar loading-status-bar" aria-label={loadingSkeletonPanelLabels[3]} role="status">
+        {loadingStatusRows.map((row) => <span className={row === "dot" ? "loading-dot" : "loading-line"} key={row} />)}
       </div>
     </main>
   );
@@ -289,7 +318,7 @@ export function AppLoadingSkeleton({ machineRailVisible }: { machineRailVisible:
 
 function LoadingBrandOverlay(): ReactElement {
   return (
-    <div className="loading-brand-overlay" aria-label="Starting aidevops">
+    <div className="loading-brand-overlay" aria-label="Starting aidevops" role="status">
       <span className="loading-brand-mark" aria-hidden="true">
         <span className="loading-brand-word">aidevops</span>
         <span className="loading-brand-chevron">&gt;</span>

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

@@ -0,0 +1,81 @@
+import type { GuiAppActionJobSummary } from "@aidevops/gui-shared";
+import { type ReactElement, type ReactNode, useEffect, useRef } from "react";
+import { FiX } from "react-icons/fi";
+
+const ANSI_PATTERN = /\x1b\[([0-9;]*)m/g;
+
+export function AppActionTerminal({ job, onDismiss }: { job: GuiAppActionJobSummary; onDismiss: (jobId: string) => void }): ReactElement {
+  const outputRef = useRef<HTMLPreElement | null>(null);
+
+  useEffect(() => {
+    if (outputRef.current !== null) {
+      outputRef.current.scrollTop = outputRef.current.scrollHeight;
+    }
+  }, [job.output.length]);
+
+  return (
+    <section className="app-terminal" id={`app-job-${job.id}`} aria-label="App action terminal output">
+      <header><strong>{job.app_id} {job.action}</strong><span>{terminalStatusLabel(job)}</span><button aria-label={`Dismiss ${job.app_id} ${job.action} terminal output`} className="terminal-close-button" onClick={() => onDismiss(job.id)} title="Dismiss terminal output" type="button"><FiX aria-hidden="true" /></button></header>
+      <pre ref={outputRef}>{renderTerminalOutput(job.output)}</pre>
+    </section>
+  );
+}
+
+function terminalStatusLabel(job: GuiAppActionJobSummary): string {
+  if (job.status === "running") {
+    return "running";
+  }
+  if (job.exit_code === null) {
+    return job.status;
+  }
+  return `${job.status} · exit ${job.exit_code}`;
+}
+
+function renderTerminalOutput(lines: string[]): ReactNode[] {
+  return lines.flatMap((line, index) => [
+    ...renderAnsiLine(line, `line-${index}`),
+    index === lines.length - 1 ? null : "\n",
+  ]).filter((node): node is ReactNode => node !== null);
+}
+
+function renderAnsiLine(line: string, keyPrefix: string): ReactNode[] {
+  const nodes: ReactNode[] = [];
+  ANSI_PATTERN.lastIndex = 0;
+  let activeClass = "";
+  let lastIndex = 0;
+  let match = ANSI_PATTERN.exec(line);
+
+  while (match !== null) {
+    if (match.index > lastIndex) {
+      nodes.push(terminalSpan(line.slice(lastIndex, match.index), activeClass, `${keyPrefix}-${nodes.length}`));
+    }
+    activeClass = ansiClassForCodes(match[1]);
+    lastIndex = ANSI_PATTERN.lastIndex;
+    match = ANSI_PATTERN.exec(line);
+  }
+
+  if (lastIndex < line.length) {
+    nodes.push(terminalSpan(line.slice(lastIndex), activeClass, `${keyPrefix}-${nodes.length}`));
+  }
+
+  if (nodes.length === 0) {
+    nodes.push(terminalSpan(line, activeClass, `${keyPrefix}-0`));
+  }
+
+  return nodes;
+}
+
+function terminalSpan(textValue: string, className: string, key: string): ReactNode {
+  const promptClass = textValue.startsWith("$ ") ? "ansi-prompt" : "";
+  const combinedClass = [className, promptClass].filter(Boolean).join(" ");
+  return combinedClass.length > 0 ? <span className={combinedClass} key={key}>{textValue}</span> : textValue;
+}
+
+function ansiClassForCodes(rawCodes: string): string {
+  const codes = rawCodes.length === 0 ? [0] : rawCodes.split(";").map((code) => Number.parseInt(code, 10));
+  const colorCode = [...codes].reverse().find((code) => (code >= 30 && code <= 37) || (code >= 90 && code <= 97));
+  if (colorCode === undefined) {
+    return "";
+  }
+  return `ansi-fg-${colorCode}`;
+}

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

@@ -7,10 +7,8 @@ import {
   FiBox,
   FiBriefcase,
   FiCalendar,
-  FiChevronDown,
   FiChevronLeft,
   FiChevronRight,
-  FiChevronUp,
   FiClock,
   FiDownloadCloud,
   FiFileText,
@@ -29,17 +27,19 @@ import {
   FiMessageSquare,
   FiMonitor,
   FiPackage,
-  FiRotateCcw,
   FiServer,
   FiSettings,
   FiShield,
   FiTerminal,
   FiUsers,
 } from "react-icons/fi";
-import type { ConversationMode, FontPreference, FontSizePreference, ShellMode, SidebarMode, SurfaceIconName, SurfaceId, SurfaceNavGroup, SurfaceNavItem, ThemePreference } from "./app-model";
-import { DEFAULT_ACCENT_HUE, dashboardNavItem, fontFamilyForPreference, fontOptions, fontSizeOptions, navGroups, sidebarModeForSurface, surfaceRecordCounts, text } from "./app-model";
+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 } from "./AppearanceControls";
 import { VaultPadlock, vaultCollectionForSurface } from "./VaultBadges";
 
+export { hueFromInputValue } from "./AppearanceControls";
+
 const surfaceIcons: Record<SurfaceIconName, IconType> = {
   apps: FiBox,
   bookmark: FiBookmark,
@@ -71,22 +71,6 @@ const surfaceIcons: Record<SurfaceIconName, IconType> = {
   users: FiUsers,
 };
 
-export function hueFromInputValue(value: string): number | null {
-  const trimmedValue = value.trim();
-
-  if (trimmedValue.length === 0) {
-    return null;
-  }
-
-  const hue = Number(trimmedValue);
-
-  if (!Number.isInteger(hue)) {
-    return null;
-  }
-
-  return Math.min(359, Math.max(0, hue));
-}
-
 export function SurfaceGlyph({ icon }: { icon: SurfaceIconName }) {
   const Icon = surfaceIcons[icon];
 
@@ -110,9 +94,10 @@ export function MachineRail({ machine }: { machine?: GuiMachineSummary }) {
   );
 }
 
-export function Sidebar({ activeSurface, accentHue, conversationMode, fontPreference, fontSizePreference, selectedLocalRepoIndex, selectedSessionId, setAccentHue, setActiveSurface, setConversationMode, setFontPreference, setFontSizePreference, setSelectedLocalRepoIndex, setSelectedSessionId, setShellMode, setShowBorders, setShowNavCounts, setThemePreference, shellMode, showBorders, showNavCounts, status, themePreference }: {
+export function Sidebar({ activeSurface, accentHue, contrastPreference, conversationMode, fontPreference, fontSizePreference, selectedLocalRepoIndex, selectedSessionId, setAccentHue, setActiveSurface, setContrastPreference, setConversationMode, setFontPreference, setFontSizePreference, setSelectedLocalRepoIndex, setSelectedSessionId, setShellMode, setShowBorders, setShowNavCounts, setThemePreference, shellMode, showBorders, showNavCounts, status, themePreference }: {
   activeSurface: SurfaceId;
   accentHue: number;
+  contrastPreference: ContrastPreference;
   conversationMode: ConversationMode;
   fontPreference: FontPreference;
   fontSizePreference: FontSizePreference;
@@ -120,6 +105,7 @@ export function Sidebar({ activeSurface, accentHue, conversationMode, fontPrefer
   selectedSessionId: string | undefined;
   setAccentHue: (hue: number) => void;
   setActiveSurface: (surface: SurfaceId) => void;
+  setContrastPreference: (contrast: ContrastPreference) => void;
   setConversationMode: (mode: ConversationMode) => void;
   setFontPreference: (font: FontPreference) => void;
   setFontSizePreference: (size: FontSizePreference) => void;
@@ -165,9 +151,11 @@ export function Sidebar({ activeSurface, accentHue, conversationMode, fontPrefer
       </nav>
       <SidebarFooter
         accentHue={accentHue}
+        contrastPreference={contrastPreference}
         fontPreference={fontPreference}
         fontSizePreference={fontSizePreference}
         setAccentHue={setAccentHue}
+        setContrastPreference={setContrastPreference}
         setFontPreference={setFontPreference}
         setFontSizePreference={setFontSizePreference}
         setShowBorders={setShowBorders}
@@ -365,7 +353,7 @@ function SidebarHeader({ setActiveSurface, setShellMode, shellMode }: {
   return (
     <header className="sidebar-header">
       <div className="sidebar-titlebar">
-        <button className="brand-lockup" onClick={() => setActiveSurface(dashboardNavItem.id)} title="Return to dashboard" type="button">
+        <button className="brand-lockup" onClick={() => { setShellMode("devices"); setActiveSurface(dashboardNavItem.id); }} title="Return to dashboard" type="button">
           <span className="terminal-mark" aria-hidden="true">›_</span>
           <strong>{text.aidevops}</strong>
         </button>
@@ -381,169 +369,3 @@ function SidebarHeader({ setActiveSurface, setShellMode, shellMode }: {
     </header>
   );
 }
-
-function SidebarFooter({ accentHue, fontPreference, fontSizePreference, setAccentHue, setFontPreference, setFontSizePreference, setShowBorders, setShowNavCounts, setThemePreference, showBorders, showNavCounts, themePreference }: {
-  accentHue: number;
-  fontPreference: FontPreference;
-  fontSizePreference: FontSizePreference;
-  setAccentHue: (hue: number) => void;
-  setFontPreference: (font: FontPreference) => void;
-  setFontSizePreference: (size: FontSizePreference) => void;
-  setShowBorders: (show: boolean) => void;
-  setShowNavCounts: (show: boolean) => void;
-  setThemePreference: (theme: ThemePreference) => void;
-  showBorders: boolean;
-  showNavCounts: boolean;
-  themePreference: ThemePreference;
-}) {
-  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;
-    }
-    setAccentHue(Math.min(359, Math.max(0, value)));
-  };
-  const updateHueInput = (value: string) => {
-    setHueInput(value);
-
-    const nextHue = hueFromInputValue(value);
-
-    if (nextHue === null) {
-      return;
-    }
-
-    updateAccentHue(nextHue);
-  };
-
-  useEffect(() => {
-    setHueInput(String(accentHue));
-  }, [accentHue]);
-
-  return (
-    <footer className="sidebar-footer">
-      <section className={appearanceOpen ? "appearance-panel open" : "appearance-panel collapsed"}>
-        <button
-          aria-expanded={appearanceOpen}
-          className="appearance-panel-tab"
-          onClick={() => setAppearanceOpen((current) => !current)}
-          type="button"
-        >
-          {text.appearance}
-          <AppearanceChevron aria-hidden="true" className="appearance-chevron" />
-        </button>
-        {appearanceOpen ? <div className="appearance-panel-body">
-          <fieldset className="theme-control compact" aria-label={text.theme}>
-            {(["system", "light", "dark"] as const).map((theme) => (
-              <button
-                aria-pressed={themePreference === theme}
-                className={themePreference === theme ? "theme-option active" : "theme-option"}
-                key={theme}
-                onClick={() => setThemePreference(theme)}
-                type="button"
-              >
-                {theme}
-              </button>
-            ))}
-          </fieldset>
-          <div className="theme-hue-control">
-            <div className="theme-control-heading">
-              <div className="hue-label-row">
-                <label htmlFor="theme-hue-slider">{text.hue}</label>
-                <input
-                  aria-label="Hue value"
-                  className="hue-number-input"
-                  max="359"
-                  min="0"
-                  onChange={(event) => updateHueInput(event.currentTarget.value)}
-                  type="number"
-                  value={hueInput}
-                />
-              </div>
-              <button aria-label="Reset hue to default" className="icon-reset-button" onClick={() => setAccentHue(DEFAULT_ACCENT_HUE)} title={text.reset} type="button"><FiRotateCcw aria-hidden="true" /></button>
-            </div>
-            <input
-              id="theme-hue-slider"
-              max="359"
-              min="0"
-              onChange={(event) => updateAccentHue(Number.parseInt(event.currentTarget.value, 10))}
-              type="range"
-              value={accentHue}
-            />
-          </div>
-          <label className="switch-control appearance-switch">
-            <strong>{text.showBorders}</strong>
-            <input checked={showBorders} onChange={(event) => setShowBorders(event.currentTarget.checked)} type="checkbox" />
-            <span aria-hidden="true" />
-          </label>
-          <label className="switch-control appearance-switch">
-            <strong>{text.showCounts}</strong>
-            <input checked={showNavCounts} onChange={(event) => setShowNavCounts(event.currentTarget.checked)} type="checkbox" />
-            <span aria-hidden="true" />
-          </label>
-          <div className="font-size-control">
-            <label htmlFor="font-size-slider">{text.fontSize}</label>
-            <input
-              id="font-size-slider"
-              max={fontSizeOptions.length - 1}
-              min="0"
-              onChange={(event) => setFontSizePreference(fontSizeOptions[Number.parseInt(event.currentTarget.value, 10)]?.value ?? "xs")}
-              step="1"
-              type="range"
-              value={fontSizeIndex}
-            />
-            <fieldset className="range-labels">
-              <legend className="sr-only">Font size shortcuts</legend>
-              {fontSizeOptions.map((option) => (
-                <button
-                  aria-pressed={option.value === fontSizePreference}
-                  className={option.value === fontSizePreference ? "active" : ""}
-                  key={option.value}
-                  onClick={() => setFontSizePreference(option.value)}
-                  type="button"
-                >
-                  {option.label}
-                </button>
-              ))}
-            </fieldset>
-          </div>
-          <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>
-    </footer>
-  );
-}