aidevops 3.29.22 → 3.29.23

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

@@ -11,6 +11,7 @@ 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";
+import { applyCommandPaletteSelection, useHeaderMenuState } from "./workspace-header-state";
 
 const communityLinks = {
   github: "https://github.com/marcusquinn/aidevops",
@@ -64,11 +65,9 @@ function WorkspaceHeader({ activeItem, activeSectionLabel, activeSurface, canGoB
   setShellMode: (mode: ShellMode) => void;
   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);
+  const headerMenus = useHeaderMenuState();
   const userInitials = status.machine.initials || "AI";
   const userName = status.machine.username || "Local user";
   const activeNotifications = status.notifications.filter((notification) => notification.status === "active");
@@ -89,24 +88,17 @@ function WorkspaceHeader({ activeItem, activeSectionLabel, activeSurface, canGoB
     return () => window.removeEventListener("keydown", openCommandPalette);
   }, [goBack, goForward]);
 
-  const closeMenus = () => {
-    setNotificationsOpen(false);
-    setProfileOpen(false);
-  };
-
-  const openItem = ({ conversationMode, repoPathRef, sessionId, shellMode, surface }: CommandPaletteSelection) => {
-    const repoIndex = status.local_repos.repos.findIndex((repo) => repo.path_ref === repoPathRef);
-    setShellMode(shellMode ?? "devices");
-    if (repoIndex >= 0) {
-      setSelectedLocalRepoIndex(repoIndex);
-    }
-    setSelectedSessionId(sessionId);
-    if (conversationMode) {
-      setConversationMode(conversationMode);
-    }
-    setActiveSurface(surface);
-    closeMenus();
-    setCommandOpen(false);
+  const openItem = (selection: CommandPaletteSelection) => {
+    applyCommandPaletteSelection(selection, {
+      closeCommandPalette: () => setCommandOpen(false),
+      closeHeaderMenus: headerMenus.closeHeaderMenus,
+      setActiveSurface,
+      setConversationMode,
+      setSelectedLocalRepoIndex,
+      setSelectedSessionId,
+      setShellMode,
+      status,
+    });
   };
 
   return (
@@ -129,28 +121,28 @@ function WorkspaceHeader({ activeItem, activeSectionLabel, activeSurface, canGoB
           <strong>{text.searchPlaceholder}</strong>
         </button>
       </div>
-      <div className="header-actions">
+      <div className="header-actions" onPointerEnter={headerMenus.clearScheduledHeaderClose} onPointerLeave={headerMenus.scheduleHeaderMenusClose} ref={headerMenus.headerActionsRef}>
         <div className="header-action-menu">
-          <button aria-label="Open signposts and help" className="header-icon-button" onClick={() => openItem({ surface: "help" })} title="Signposts and help (?)" type="button">
+          <button aria-label="Open signposts and help" className="header-icon-button" onClick={() => { headerMenus.closeHeaderMenus(); openItem({ surface: "help" }); }} title="Signposts and help (?)" type="button">
             <FiHelpCircle aria-hidden="true" />
           </button>
-          <button aria-expanded={notificationsOpen} aria-label="Open notifications" className="header-icon-button" onClick={() => { setNotificationsOpen((current) => !current); setProfileOpen(false); }} type="button">
+          <button aria-expanded={headerMenus.notificationsOpen} aria-label="Open notifications" className="header-icon-button" onClick={headerMenus.toggleNotifications} type="button">
             <FiBell aria-hidden="true" />
             {activeNotifications.length > 0 ? <span className="notification-dot" aria-hidden="true" /> : null}
           </button>
-          {notificationsOpen ? <NotificationsMenu notifications={status.notifications} openSurface={(surface) => openItem({ surface })} /> : null}
+          {headerMenus.notificationsOpen ? <NotificationsMenu notifications={status.notifications} openSurface={(surface) => openItem({ surface })} /> : null}
         </div>
-        <button aria-pressed={assistantOpen} aria-label="Toggle AI Assistant" className={assistantOpen ? "header-icon-button active" : "header-icon-button"} onClick={() => setAssistantOpen((current) => !current)} title="AI sessions (_)" type="button">
+        <button aria-pressed={headerMenus.assistantOpen} aria-label="Toggle AI Assistant" className={headerMenus.assistantOpen ? "header-icon-button active" : "header-icon-button"} onClick={headerMenus.toggleAssistant} title="AI sessions (_)" type="button">
           <FiTerminal 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">
+          <button aria-expanded={headerMenus.profileOpen} aria-label={`Open profile menu for ${userName}`} className="profile-avatar-button" onClick={headerMenus.toggleProfile} title={userName} type="button">
             <span>{userInitials}</span>
           </button>
-          {profileOpen ? <ProfileMenu openSurface={(surface) => openItem({ surface })} userName={userName} /> : null}
+          {headerMenus.profileOpen ? <ProfileMenu openSurface={(surface) => openItem({ surface })} userName={userName} /> : null}
         </div>
       </div>
-      {assistantOpen ? <AssistantPanel activeSurface={activeSurface} userName={userName} /> : null}
+      {headerMenus.assistantOpen ? <AssistantPanel activeSurface={activeSurface} userName={userName} /> : null}
       {commandOpen ? <CommandPalette activeSurface={activeSurface} close={() => setCommandOpen(false)} initialQuery={commandInitialQuery} openItem={openItem} status={status} /> : null}
     </header>
   );

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

@@ -0,0 +1,244 @@
+import { type ReactElement, useEffect, useState } from "react";
+import { FiChevronDown, FiChevronLeft, FiChevronRight, FiChevronUp, FiRotateCcw } from "react-icons/fi";
+import type { ContrastPreference, FontPreference, FontSizePreference, ThemePreference } from "./app-model";
+import { DEFAULT_ACCENT_HUE, contrastOptions, fontFamilyForPreference, fontOptions, fontSizeOptions, text } from "./app-model";
+
+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 SidebarFooter(props: SidebarFooterProps): ReactElement {
+  const [appearanceOpen, setAppearanceOpen] = useState(true);
+  const AppearanceChevron = appearanceOpen ? FiChevronDown : FiChevronUp;
+
+  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 ? <AppearancePanelBody {...props} /> : null}
+      </section>
+    </footer>
+  );
+}
+
+interface SidebarFooterProps {
+  accentHue: number;
+  contrastPreference: ContrastPreference;
+  fontPreference: FontPreference;
+  fontSizePreference: FontSizePreference;
+  setAccentHue: (hue: number) => void;
+  setContrastPreference: (contrast: ContrastPreference) => 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;
+}
+
+function AppearancePanelBody({ accentHue, contrastPreference, fontPreference, fontSizePreference, setAccentHue, setContrastPreference, setFontPreference, setFontSizePreference, setShowBorders, setShowNavCounts, setThemePreference, showBorders, showNavCounts, themePreference }: SidebarFooterProps): ReactElement {
+  return (
+    <div className="appearance-panel-body">
+      <ThemeControl setThemePreference={setThemePreference} themePreference={themePreference} />
+      <HueControl accentHue={accentHue} setAccentHue={setAccentHue} />
+      <ContrastControl contrastPreference={contrastPreference} setContrastPreference={setContrastPreference} />
+      <AppearanceSwitches setShowBorders={setShowBorders} setShowNavCounts={setShowNavCounts} showBorders={showBorders} showNavCounts={showNavCounts} />
+      <FontSizeControl fontSizePreference={fontSizePreference} setFontSizePreference={setFontSizePreference} />
+      <FontControl fontPreference={fontPreference} setFontPreference={setFontPreference} />
+    </div>
+  );
+}
+
+function ThemeControl({ setThemePreference, themePreference }: { setThemePreference: (theme: ThemePreference) => void; themePreference: ThemePreference }): ReactElement {
+  return (
+    <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>
+  );
+}
+
+function HueControl({ accentHue, setAccentHue }: { accentHue: number; setAccentHue: (hue: number) => void }): ReactElement {
+  const [hueInput, setHueInput] = useState(() => String(accentHue));
+  const updateAccentHue = (value: number) => {
+    if (Number.isFinite(value)) {
+      setAccentHue(Math.min(359, Math.max(0, value)));
+    }
+  };
+  const updateHueInput = (value: string) => {
+    setHueInput(value);
+    const nextHue = hueFromInputValue(value);
+    if (nextHue !== null) {
+      updateAccentHue(nextHue);
+    }
+  };
+
+  useEffect(() => {
+    setHueInput(String(accentHue));
+  }, [accentHue]);
+
+  return (
+    <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>
+  );
+}
+
+function ContrastControl({ contrastPreference, setContrastPreference }: { contrastPreference: ContrastPreference; setContrastPreference: (contrast: ContrastPreference) => void }): ReactElement {
+  return (
+    <fieldset className="contrast-control" aria-label={text.contrast}>
+      <legend>{text.contrast}</legend>
+      <div className="contrast-options">
+        {contrastOptions.map((option) => (
+          <button
+            aria-pressed={contrastPreference === option.value}
+            className={contrastPreference === option.value ? "active" : ""}
+            key={option.value}
+            onClick={() => setContrastPreference(option.value)}
+            type="button"
+          >
+            {option.label}
+          </button>
+        ))}
+      </div>
+    </fieldset>
+  );
+}
+
+function AppearanceSwitches({ setShowBorders, setShowNavCounts, showBorders, showNavCounts }: { setShowBorders: (show: boolean) => void; setShowNavCounts: (show: boolean) => void; showBorders: boolean; showNavCounts: boolean }): ReactElement {
+  return (
+    <>
+      <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>
+    </>
+  );
+}
+
+function FontSizeControl({ fontSizePreference, setFontSizePreference }: { fontSizePreference: FontSizePreference; setFontSizePreference: (size: FontSizePreference) => void }): ReactElement {
+  const fontSizeIndex = Math.max(0, fontSizeOptions.findIndex((option) => option.value === fontSizePreference));
+
+  return (
+    <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>
+  );
+}
+
+function FontControl({ fontPreference, setFontPreference }: { fontPreference: FontPreference; setFontPreference: (font: FontPreference) => void }): ReactElement {
+  const selectedFontFamily = fontFamilyForPreference(fontPreference);
+  const fontIndex = Math.max(0, fontOptions.findIndex((option) => option.value === fontPreference));
+  const canSelectPreviousFont = fontIndex > 0;
+  const canSelectNextFont = fontIndex < fontOptions.length - 1;
+  const setFontByIndex = (index: number) => {
+    const nextFont = fontOptions[index]?.value;
+    if (nextFont !== undefined) {
+      setFontPreference(nextFont);
+    }
+  };
+
+  return (
+    <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>
+  );
+}

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

@@ -238,6 +238,7 @@ function writeManagedPolicyToggles(policy: ManagedPolicyToggleState): void {
 }
 
 interface AppTooltipState {
+  align: "start" | "center" | "end";
   text: string;
   x: number;
   y: number;
@@ -270,7 +271,16 @@ function tooltipForElement(element: HTMLElement): AppTooltipState | null {
   }
 
   const rect = element.getBoundingClientRect();
-  return { text: textValue, x: rect.left + (rect.width / 2), y: rect.top };
+  const viewportWidth = document.documentElement.clientWidth || window.innerWidth;
+  const edgeSafeWidth = 240;
+  if (rect.left < edgeSafeWidth) {
+    return { align: "start", text: textValue, x: rect.left, y: rect.top };
+  }
+  if (viewportWidth - rect.right < edgeSafeWidth) {
+    return { align: "end", text: textValue, x: rect.right, y: rect.top };
+  }
+
+  return { align: "center", text: textValue, x: rect.left + (rect.width / 2), y: rect.top };
 }
 
 function AppTooltip({ tooltip }: { tooltip: AppTooltipState }): ReactElement {
@@ -279,5 +289,5 @@ function AppTooltip({ tooltip }: { tooltip: AppTooltipState }): ReactElement {
     "--tooltip-y": `${tooltip.y}px`,
   } as CSSProperties;
 
-  return <div className="app-global-tooltip" role="tooltip" style={style}>{tooltip.text}</div>;
+  return <div className={`app-global-tooltip ${tooltip.align}`} role="tooltip" style={style}>{tooltip.text}</div>;
 }

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

@@ -1,8 +1,9 @@
 import type { GuiAppActionId, GuiAppActionJobSummary, GuiManagedAppSummary, GuiResponseEnvelope } from "@aidevops/gui-shared";
-import { type MouseEvent as ReactMouseEvent, type ReactElement, useState } from "react";
+import { type ReactElement, useState } from "react";
 import { FiChevronDown, FiDownload, FiExternalLink, FiRefreshCw, FiRepeat, FiTrash2 } from "react-icons/fi";
 import { AppActionTerminal } from "./AppActionTerminal";
 import { text } from "./app-model";
+import { openExternalLink } from "./external-links";
 
 type ManagedPolicyId = "setup" | "update";
 
@@ -55,7 +56,7 @@ function isEssentialManagedApp(app: GuiManagedAppSummary): boolean {
 
 function SummaryChip({ label, value }: { label: string; value: string }): ReactElement {
   const tooltip = `${label}: ${value}`;
-  return <span className="managed-summary-chip" data-tooltip={tooltip} title={tooltip}><small>{label}</small><span>{value}</span></span>;
+  return <span className="managed-summary-chip" data-tooltip={tooltip}><small>{label}</small><span>{value}</span></span>;
 }
 
 function OriginLink({ href, label }: { href: string; label: string }): ReactElement {
@@ -63,11 +64,11 @@ function OriginLink({ href, label }: { href: string; label: string }): ReactElem
     return <span className="origin-missing">{label}: source pending</span>;
   }
 
-  return <a data-tooltip={href} href={href} onClick={(event) => openExternalLink(event, href)} rel="noreferrer" target="_blank" title={href}>{label} <FiExternalLink aria-hidden="true" /></a>;
+  return <a aria-label={`${label}: ${href}`} data-tooltip={href} href={href} onClick={(event) => openExternalLink(event, href)} rel="noreferrer" target="_blank">{label} <FiExternalLink aria-hidden="true" /></a>;
 }
 
 function ToggleSwitch({ checked, disabled = false, label, onChange }: { checked: boolean; disabled?: boolean; label: string; onChange: (checked: boolean) => void }): ReactElement {
-  return <button aria-pressed={checked} className={checked ? "managed-toggle checked" : "managed-toggle"} data-tooltip={disabled ? "Essential aidevops component; policy is locked on" : undefined} disabled={disabled} onClick={() => onChange(!checked)} title={disabled ? "Essential aidevops component; policy is locked on" : undefined} type="button"><span className="managed-toggle-label">{label}</span><span aria-hidden="true" className={checked ? "switch-track checked" : "switch-track"}><span /></span></button>;
+  return <button aria-pressed={checked} className={checked ? "managed-toggle checked" : "managed-toggle"} data-tooltip={disabled ? "Essential aidevops component; policy is locked on" : undefined} disabled={disabled} onClick={() => onChange(!checked)} type="button"><span className="managed-toggle-label">{label}</span><span aria-hidden="true" className={checked ? "switch-track checked" : "switch-track"}><span /></span></button>;
 }
 
 function AppMeta({ className = "", label, value }: { className?: string; label: string; value: string }): ReactElement {
@@ -87,9 +88,34 @@ function AppActionButton({ action, app, commandPreview, disabled, onJob }: { act
       return;
     }
 
-    const response = await fetch(`/api/apps/${encodeURIComponent(app.id)}/actions/${action}`, { method: "POST" });
-    const envelope = await response.json() as GuiResponseEnvelope<GuiAppActionJobSummary>;
-    onJob(envelope.data);
+    try {
+      const response = await fetch(`/api/apps/${encodeURIComponent(app.id)}/actions/${action}`, { method: "POST" });
+      if (!response.ok) {
+        console.error(`Failed to run ${action} for ${app.id}: ${response.status} ${response.statusText}`);
+        return;
+      }
+
+      const envelope = await response.json() as Partial<GuiResponseEnvelope<GuiAppActionJobSummary>> | null;
+      if (envelope === null || typeof envelope !== "object") {
+        console.error(`Action ${action} for ${app.id} returned an invalid response envelope`);
+        return;
+      }
+
+      if (envelope.ok !== true) {
+        const errors = Array.isArray(envelope.errors) && envelope.errors.length > 0 ? envelope.errors.join("; ") : "unknown error";
+        console.error(`Action ${action} for ${app.id} returned an error envelope: ${errors}`);
+        return;
+      }
+
+      if (!("data" in envelope)) {
+        console.error(`Action ${action} for ${app.id} returned a response envelope without job data`);
+        return;
+      }
+
+      onJob(envelope.data as GuiAppActionJobSummary);
+    } catch (error) {
+      console.error(`Network error running ${action} for ${app.id}:`, error);
+    }
   }
 
   return <>
@@ -114,28 +140,3 @@ function ConfirmActionModal({ action, app, close, commandPreview, confirm }: { a
     </div>
   );
 }
-
-function openExternalLink(event: ReactMouseEvent<HTMLAnchorElement>, href: string): void {
-  event.stopPropagation();
-  if (!shouldUseBrowserDefault(event)) {
-    event.preventDefault();
-    openExternalDestination(href);
-  }
-}
-
-function shouldUseBrowserDefault(event: ReactMouseEvent<HTMLAnchorElement>): boolean {
-  return [event.defaultPrevented, event.metaKey, event.ctrlKey, event.shiftKey, event.altKey].some(Boolean);
-}
-
-function openExternalDestination(href: string): void {
-  if (document.documentElement.dataset.desktopShell === "macos") {
-    window.location.assign(href);
-  } else {
-    const opened = window.open(href, "_blank", "noopener,noreferrer");
-    if (opened === null) {
-      window.location.assign(href);
-    } else {
-      opened.opener = null;
-    }
-  }
-}

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

@@ -1,10 +1,11 @@
-import type { MouseEvent as ReactMouseEvent, ReactElement } from "react";
+import type { ReactElement } from "react";
 import type { IconType } from "react-icons";
 import { FaApple, FaLinux, FaWindows } from "react-icons/fa";
 import { FiCode, FiExternalLink, FiGlobe, FiMonitor, FiTerminal } from "react-icons/fi";
 import { IoLogoAndroid } from "react-icons/io";
 import { SiIos } from "react-icons/si";
 import { text } from "./app-model";
+import { openExternalLink } from "./external-links";
 
 export type RecommendedOsId = "all" | "macos" | "linux" | "windows" | "ios" | "android";
 export type RecommendedPlatformId = "webapp" | "saas" | "cli" | "api";
@@ -117,7 +118,7 @@ export function RecommendedAppsSurface({ apps, os, platform, setOs, setPlatform
 function RecommendedAppCard({ app, setOs, setPlatform }: { app: RecommendedApp; setOs: (os: RecommendedOsId) => void; setPlatform: (platform: RecommendedPlatformFilterId) => void }): ReactElement {
   return <article className="recommended-app-card">
     <div>
-      <strong>{app.name}</strong>
+      <a aria-label={`${app.name}: ${app.websiteUrl}`} className="recommended-app-title-link" data-tooltip={app.websiteUrl} href={app.websiteUrl} onClick={(event) => openExternalLink(event, app.websiteUrl)} rel="noreferrer" target="_blank"><strong>{app.name}</strong></a>
       <p>{app.description}</p>
     </div>
     <div className="app-icon-groups">
@@ -141,7 +142,7 @@ function OriginLink({ href, label }: { href: string; label: string }): ReactElem
     return <span className="origin-missing">{label}: source pending</span>;
   }
 
-  return <a data-tooltip={href} href={href} onClick={(event) => openExternalLink(event, href)} rel="noreferrer" target="_blank" title={href}>{label} <FiExternalLink aria-hidden="true" /></a>;
+  return <a aria-label={`${label}: ${href}`} data-tooltip={href} href={href} onClick={(event) => openExternalLink(event, href)} rel="noreferrer" target="_blank">{label} <FiExternalLink aria-hidden="true" /></a>;
 }
 
 function PlatformIconList({ platforms, setPlatform }: { platforms: RecommendedPlatformId[]; setPlatform: (platform: RecommendedPlatformFilterId) => void }): ReactElement | null {
@@ -161,7 +162,7 @@ function PlatformIcon({ id, setPlatform }: { id: RecommendedPlatformId; setPlatf
   };
   const { Icon, label } = iconMap[id];
 
-  return <button aria-label={`Filter by ${label}`} data-tooltip={`Filter by ${label}`} onClick={() => setPlatform(id)} title={`Filter by ${label}`} type="button"><Icon aria-hidden="true" focusable="false" /></button>;
+  return <button aria-label={`Filter by ${label}`} data-tooltip={`Filter by ${label}`} onClick={() => setPlatform(id)} type="button"><Icon aria-hidden="true" focusable="false" /></button>;
 }
 
 function OsIconList({ os, setOs }: { os: RecommendedOsId[]; setOs: (os: RecommendedOsId) => void }): ReactElement | null {
@@ -183,7 +184,7 @@ function OsIcon({ id, setOs }: { id: RecommendedOsId; setOs: (os: RecommendedOsI
   };
   const { Icon, label } = iconMap[id];
 
-  return <button aria-label={`Filter by ${label}`} data-tooltip={`Filter by ${label}`} onClick={() => setOs(id)} title={`Filter by ${label}`} type="button"><Icon aria-hidden="true" focusable="false" /></button>;
+  return <button aria-label={`Filter by ${label}`} data-tooltip={`Filter by ${label}`} onClick={() => setOs(id)} type="button"><Icon aria-hidden="true" focusable="false" /></button>;
 }
 
 export function recommendedAppMatchesFilters(app: RecommendedApp, platform: RecommendedPlatformFilterId, os: RecommendedOsId): boolean {
@@ -196,28 +197,3 @@ export function recommendedAppMatchesFilters(app: RecommendedApp, platform: Reco
 export function nextRecommendedFilterValue<T extends string>(current: T, next: T, defaultValue: T): T {
   return current === next && next !== defaultValue ? defaultValue : next;
 }
-
-function openExternalLink(event: ReactMouseEvent<HTMLAnchorElement>, href: string): void {
-  event.stopPropagation();
-  if (!shouldUseBrowserDefault(event)) {
-    event.preventDefault();
-    openExternalDestination(href);
-  }
-}
-
-function shouldUseBrowserDefault(event: ReactMouseEvent<HTMLAnchorElement>): boolean {
-  return [event.defaultPrevented, event.metaKey, event.ctrlKey, event.shiftKey, event.altKey].some(Boolean);
-}
-
-function openExternalDestination(href: string): void {
-  if (document.documentElement.dataset.desktopShell === "macos") {
-    window.location.assign(href);
-  } else {
-    const opened = window.open(href, "_blank", "noopener,noreferrer");
-    if (opened === null) {
-      window.location.assign(href);
-    } else {
-      opened.opener = null;
-    }
-  }
-}

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

@@ -1,6 +1,7 @@
 import type { GuiFileRootId, GuiStatusData } from "@aidevops/gui-shared";
 
 export type ThemePreference = "system" | "light" | "dark";
+export type ContrastPreference = "low" | "medium" | "high";
 export type SidebarMode = "devops" | "comms";
 export type ShellMode = "devices" | "sessions";
 export type ConversationMode = "ai" | "people";
@@ -129,6 +130,11 @@ export interface FontSizeOption {
   cssSize: string;
 }
 
+export interface ContrastOption {
+  label: string;
+  value: ContrastPreference;
+}
+
 export interface InventoryColumn {
   key: string;
   label: string;
@@ -153,6 +159,7 @@ export const text = {
   brandsIntro: "Draft brand inventory for names and website references.",
   codeView: "Code",
   config: "Config",
+  contrast: "Contrast",
   configIntro: "Read-only file explorer for ~/.config/aidevops. Contents stay hidden until redaction rules land.",
   copyPath: "Copy path",
   dashboard: "Dashboard",
@@ -303,9 +310,16 @@ export const text = {
 } as const;
 
 export const DEFAULT_ACCENT_HUE = 123;
+export const DEFAULT_CONTRAST: ContrastPreference = "low";
 export const DEFAULT_FONT: FontPreference = "Inter";
 export const DEFAULT_FONT_SIZE: FontSizePreference = "xs";
 
+export const contrastOptions: ContrastOption[] = [
+  { value: "low", label: "Low" },
+  { value: "medium", label: "Medium" },
+  { value: "high", label: "High" },
+];
+
 export const fontOptions: FontOption[] = [
   { value: "IBM Plex Mono", label: "IBM Plex Mono", fontFamily: '"IBM Plex Mono", Menlo, Monaco, Consolas, monospace' },
   { value: "IBM Plex Sans", label: "IBM Plex Sans", fontFamily: '"IBM Plex Sans", Inter, system-ui, sans-serif' },
@@ -558,6 +572,10 @@ export function isFontSizePreference(value: string | null): value is FontSizePre
   return fontSizeOptions.some((option) => option.value === value);
 }
 
+export function isContrastPreference(value: string | null): value is ContrastPreference {
+  return contrastOptions.some((option) => option.value === value);
+}
+
 export function sidebarModeForSurface(id: SurfaceId): SidebarMode {
   if (utilityNavItems.some((item) => item.id === id)) {
     return "comms";

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

@@ -55,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 (default), Menlo, Playpen Sans, Poppins, Source Sans, Source Serif, Tilt Neon, Ubuntu Mono. The workspace header includes a command palette, reserved signposts/help slot immediately left of notifications, notifications menu, AI Assistant panel, and profile menu with Settings, Theme, Language, Community, Admin, and Logout entries. Notifications reuse the OpenCode toast status cache and GUI readiness data. 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, Contrast levels low, medium, high, 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 (default), Menlo, Playpen Sans, Poppins, Source Sans, Source Serif, Tilt Neon, Ubuntu Mono. The workspace header includes a command palette, reserved signposts/help slot immediately left of notifications, notifications menu, AI Assistant panel, and profile menu with Settings, Theme, Language, Community, Admin, and Logout entries. Notifications reuse the OpenCode toast status cache and GUI readiness data. 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>`,