aidevops 3.29.21 → 3.29.23

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

@@ -70,6 +70,61 @@
   color-scheme: dark;
 }
 
+:root[data-contrast="medium"] {
+  --bg-secondary: #f3f3f3;
+  --bg-tertiary: #e8e8e8;
+  --border: color-mix(in srgb, rgb(0 0 0 / 26%) 74%, rgb(255 255 255 / 36%));
+  --border-hover: color-mix(in srgb, rgb(0 0 0 / 40%) 80%, rgb(255 255 255 / 32%));
+  --surface-elevated: #ffffff;
+  --surface-muted: #e8e8e8;
+  --text-muted: rgb(0 0 0 / 68%);
+  --text-secondary: rgb(0 0 0 / 84%);
+}
+
+:root[data-theme="dark"][data-contrast="medium"] {
+  --bg-primary: #050505;
+  --bg-secondary: #0b0b0b;
+  --bg-tertiary: #141414;
+  --border: color-mix(in srgb, rgb(255 255 255 / 22%) 78%, rgb(255 255 255 / 44%));
+  --border-hover: color-mix(in srgb, rgb(255 255 255 / 36%) 80%, rgb(255 255 255 / 52%));
+  --surface-elevated: #101010;
+  --surface-muted: #181818;
+  --text-muted: rgb(255 255 255 / 58%);
+  --text-secondary: rgb(255 255 255 / 82%);
+}
+
+:root[data-contrast="high"] {
+  --bg-primary: #ffffff;
+  --bg-secondary: #ffffff;
+  --bg-tertiary: #f4f4f4;
+  --border: rgb(0 0 0 / 48%);
+  --border-hover: #000000;
+  --code-bg: #ffffff;
+  --glass-panel-shadow: inset 0 0 0 1px rgb(0 0 0 / 18%);
+  --shadow-soft: 0 18px 56px rgb(0 0 0 / 18%);
+  --surface-elevated: #ffffff;
+  --surface-muted: #ffffff;
+  --text-muted: #333333;
+  --text-primary: #000000;
+  --text-secondary: #000000;
+}
+
+:root[data-theme="dark"][data-contrast="high"] {
+  --bg-primary: #000000;
+  --bg-secondary: #000000;
+  --bg-tertiary: #050505;
+  --border: rgb(255 255 255 / 56%);
+  --border-hover: #ffffff;
+  --code-bg: #000000;
+  --glass-panel-shadow: inset 0 0 0 1px rgb(255 255 255 / 24%);
+  --shadow-soft: 0 24px 80px rgb(0 0 0 / 72%);
+  --surface-elevated: #000000;
+  --surface-muted: #050505;
+  --text-muted: #d6d6d6;
+  --text-primary: #ffffff;
+  --text-secondary: #ffffff;
+}
+
 :root[data-borders="hidden"] {
   --border: transparent;
   --border-hover: transparent;
@@ -763,6 +818,7 @@ code {
 }
 
 .theme-hue-control,
+.contrast-control,
 .font-size-control,
 .font-control {
   display: grid;
@@ -782,6 +838,7 @@ code {
 }
 
 .theme-control-heading label,
+.contrast-control legend,
 .font-size-control label,
 .font-control span {
   color: var(--text-muted);
@@ -791,6 +848,38 @@ code {
   text-transform: uppercase;
 }
 
+.contrast-control {
+  border: 0;
+  margin: 0;
+  padding: 0;
+}
+
+.contrast-options {
+  display: grid;
+  gap: 6px;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.contrast-options button {
+  background: var(--surface-elevated);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  color: var(--text-secondary);
+  font-size: 0.72rem;
+  font-weight: 900;
+  padding: 7px 6px;
+  text-transform: uppercase;
+}
+
+.contrast-options button:hover,
+.contrast-options button:focus-visible,
+.contrast-options button.active {
+  background: color-mix(in srgb, var(--accent) 18%, var(--surface-elevated));
+  border-color: color-mix(in srgb, var(--accent) 48%, var(--border));
+  color: var(--accent);
+  outline: none;
+}
+
 .hue-number-input {
   background: var(--surface-elevated);
   border: 1px solid var(--border);
@@ -2570,20 +2659,31 @@ button.managed-toggle:focus-visible {
   color: var(--text-primary);
   font-size: 0.72rem;
   font-weight: 700;
-  left: clamp(12px, var(--tooltip-x), calc(100vw - 12px));
+  left: var(--tooltip-x);
   line-height: 1.35;
-  max-width: min(440px, 72vw);
+  max-width: min(440px, calc(100vw - 24px));
   overflow-wrap: anywhere;
   padding: 8px 10px;
   pointer-events: none;
   position: fixed;
   text-align: left;
   top: var(--tooltip-y);
-  transform: translate(-50%, calc(-100% - 10px));
   width: max-content;
   z-index: 10000;
 }
 
+.app-global-tooltip.center {
+  transform: translate(-50%, calc(-100% - 10px));
+}
+
+.app-global-tooltip.start {
+  transform: translate(0, calc(-100% - 10px));
+}
+
+.app-global-tooltip.end {
+  transform: translate(-100%, calc(-100% - 10px));
+}
+
 .data-row,
 .editable-row {
   display: grid;
@@ -2688,12 +2788,37 @@ button.managed-toggle:focus-visible {
   display: grid;
   gap: 12px;
   padding: 16px;
+  transition: background 150ms ease, border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
+}
+
+.recommended-app-card:hover,
+.recommended-app-card:focus-within {
+  background:
+    linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, transparent), transparent 46%),
+    color-mix(in srgb, var(--accent) 7%, var(--surface-muted));
+  border-color: color-mix(in srgb, var(--accent) 38%, var(--border));
+  box-shadow: 0 18px 46px color-mix(in srgb, var(--accent) 10%, transparent);
+  transform: translateY(-1px);
 }
 
 .recommended-app-card strong {
   font-size: 1.05rem;
 }
 
+.recommended-app-title-link {
+  color: var(--text-primary);
+  display: inline-flex;
+  text-decoration: none;
+  width: fit-content;
+}
+
+.recommended-app-title-link:hover,
+.recommended-app-title-link:focus-visible {
+  color: var(--accent);
+  outline: none;
+  text-decoration: underline;
+}
+
 .recommended-app-card p {
   color: var(--text-secondary);
   margin: 4px 0 0;
@@ -2722,11 +2847,18 @@ button.managed-toggle:focus-visible {
   font-size: 1.12rem;
   font-weight: 900;
   justify-content: center;
+  line-height: 1;
   min-height: 24px;
   min-width: 24px;
   padding: 0;
 }
 
+.os-icon-list svg {
+  display: block;
+  height: 18px;
+  width: 18px;
+}
+
 .platform-icon-list button {
   cursor: pointer;
 }

package/packages/gui-web/src/workspace-header-state.ts

@@ -0,0 +1,107 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import type { GuiStatusData } from "../../gui-shared/src";
+import type { ConversationMode, ShellMode, SurfaceId } from "./app-model";
+import type { CommandPaletteSelection } from "./CommandPalette";
+
+export function useHeaderMenuState() {
+  const [assistantOpen, setAssistantOpen] = useState(false);
+  const [notificationsOpen, setNotificationsOpen] = useState(false);
+  const [profileOpen, setProfileOpen] = useState(false);
+  const headerActionsRef = useRef<HTMLDivElement | null>(null);
+  const closeHeaderTimerRef = useRef<number | null>(null);
+  const clearScheduledHeaderClose = useCallback(() => {
+    if (closeHeaderTimerRef.current !== null) {
+      window.clearTimeout(closeHeaderTimerRef.current);
+      closeHeaderTimerRef.current = null;
+    }
+  }, []);
+  const closeHeaderMenus = useCallback(() => {
+    clearScheduledHeaderClose();
+    setAssistantOpen(false);
+    setNotificationsOpen(false);
+    setProfileOpen(false);
+  }, [clearScheduledHeaderClose]);
+  const scheduleHeaderMenusClose = useCallback(() => {
+    clearScheduledHeaderClose();
+    closeHeaderTimerRef.current = window.setTimeout(closeHeaderMenus, 2_400);
+  }, [clearScheduledHeaderClose, closeHeaderMenus]);
+  const toggleNotifications = useCallback(() => {
+    clearScheduledHeaderClose();
+    setNotificationsOpen((current) => !current);
+    setProfileOpen(false);
+    setAssistantOpen(false);
+  }, [clearScheduledHeaderClose]);
+  const toggleAssistant = useCallback(() => {
+    clearScheduledHeaderClose();
+    setAssistantOpen((current) => !current);
+    setNotificationsOpen(false);
+    setProfileOpen(false);
+  }, [clearScheduledHeaderClose]);
+  const toggleProfile = useCallback(() => {
+    clearScheduledHeaderClose();
+    setProfileOpen((current) => !current);
+    setNotificationsOpen(false);
+    setAssistantOpen(false);
+  }, [clearScheduledHeaderClose]);
+
+  useEffect(() => {
+    const closeOnPointerDown = (event: PointerEvent) => {
+      const target = event.target;
+      if (!(target instanceof Node) || !headerActionsRef.current?.contains(target)) {
+        closeHeaderMenus();
+      }
+    };
+    const closeOnEscape = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        closeHeaderMenus();
+      }
+    };
+
+    document.addEventListener("pointerdown", closeOnPointerDown, true);
+    document.addEventListener("keydown", closeOnEscape);
+    return () => {
+      document.removeEventListener("pointerdown", closeOnPointerDown, true);
+      document.removeEventListener("keydown", closeOnEscape);
+      clearScheduledHeaderClose();
+    };
+  }, [clearScheduledHeaderClose, closeHeaderMenus]);
+
+  return {
+    assistantOpen,
+    clearScheduledHeaderClose,
+    closeHeaderMenus,
+    headerActionsRef,
+    notificationsOpen,
+    profileOpen,
+    scheduleHeaderMenusClose,
+    toggleAssistant,
+    toggleNotifications,
+    toggleProfile,
+  };
+}
+
+export interface CommandPaletteNavigationActions {
+  closeCommandPalette: () => void;
+  closeHeaderMenus: () => void;
+  setActiveSurface: (surface: SurfaceId) => void;
+  setConversationMode: (mode: ConversationMode) => void;
+  setSelectedLocalRepoIndex: (index: number) => void;
+  setSelectedSessionId: (id: string | undefined) => void;
+  setShellMode: (mode: ShellMode) => void;
+  status: GuiStatusData;
+}
+
+export function applyCommandPaletteSelection({ conversationMode, repoPathRef, sessionId, shellMode, surface }: CommandPaletteSelection, actions: CommandPaletteNavigationActions): void {
+  const repoIndex = actions.status.local_repos.repos.findIndex((repo) => repo.path_ref === repoPathRef);
+  actions.setShellMode(shellMode ?? "devices");
+  if (repoIndex >= 0) {
+    actions.setSelectedLocalRepoIndex(repoIndex);
+  }
+  actions.setSelectedSessionId(sessionId);
+  if (conversationMode) {
+    actions.setConversationMode(conversationMode);
+  }
+  actions.setActiveSurface(surface);
+  actions.closeHeaderMenus();
+  actions.closeCommandPalette();
+}

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