aidevops 3.29.21 → 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/InventoryEditorSurfaces.tsx

@@ -0,0 +1,99 @@
+import { type ReactElement, useState } from "react";
+import type { InventoryColumn } from "./app-model";
+import { installationRows, text } from "./app-model";
+
+interface DraftInventoryRow {
+  id: string;
+  values: Record<string, string>;
+}
+
+let draftRowCounter = 0;
+
+export function InstallationSurface(): ReactElement {
+  return (
+    <section className="panel" aria-label={text.installation}>
+      <div className="section-heading">
+        <p className="eyebrow">{text.setup}</p>
+        <h2>{text.installation}</h2>
+        <p>{text.installationIntro}</p>
+      </div>
+      <div className="installation-list">
+        {installationRows.map((row) => (
+          <article className="install-row" key={row.name}>
+            <div><strong>{row.name}</strong><small>{row.scope}</small></div>
+            <TogglePill checked={row.install} label={text.install} />
+            <TogglePill checked={row.update} label={text.update} />
+          </article>
+        ))}
+      </div>
+      <p className="empty-state">{text.plannedNotice}</p>
+    </section>
+  );
+}
+
+export function EditableInventorySurface({ columns, initialRows, intro, title }: {
+  columns: InventoryColumn[];
+  initialRows: Record<string, string>[];
+  intro: string;
+  title: string;
+}): ReactElement {
+  const [draftRows, setDraftRows] = useState(() => initialRows.map((row) => createDraftRow(row)));
+
+  function updateDraftRow(rowId: string, key: string, value: string): void {
+    setDraftRows((currentRows) => currentRows.map((row) => row.id === rowId ? { ...row, values: { ...row.values, [key]: value } } : row));
+  }
+
+  function addDraftRow(): void {
+    setDraftRows((currentRows) => [...currentRows, createDraftRow(emptyRow(columns))]);
+  }
+
+  return (
+    <section className="panel" aria-label={title}>
+      <div className="section-heading split-heading">
+        <div>
+          <p className="eyebrow">{text.infrastructure}</p>
+          <h2>{title}</h2>
+          <p>{intro}</p>
+        </div>
+        <button className="secondary-action" onClick={addDraftRow} type="button">{text.addRow}</button>
+      </div>
+      <p className="notice compact-notice">{text.draftOnly}</p>
+      <div className="editable-table">
+        <div className="editable-row header-row">
+          {columns.map((column) => <span key={column.key}>{column.label}</span>)}
+        </div>
+        {draftRows.map((row) => (
+          <div className="editable-row" key={row.id}>
+            {columns.map((column) => (
+              <input
+                aria-label={`${title} ${column.label}`}
+                key={column.key}
+                onChange={(event) => updateDraftRow(row.id, column.key, event.currentTarget.value)}
+                placeholder={column.label}
+                value={row.values[column.key] ?? ""}
+              />
+            ))}
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}
+
+function TogglePill({ checked, label }: { checked: boolean; label: string }): ReactElement {
+  return <span className={checked ? "toggle-pill checked" : "toggle-pill"}>{label}</span>;
+}
+
+function createDraftRow(values: Record<string, string>): DraftInventoryRow {
+  draftRowCounter += 1;
+  return { id: `draft-row-${draftRowCounter}`, values };
+}
+
+function emptyRow(columns: InventoryColumn[]): Record<string, string> {
+  const row: Record<string, string> = {};
+  for (const column of columns) {
+    row[column.key] = "";
+  }
+
+  return row;
+}