diff --git a/frontend/packages/agent/src/Root.tsx b/frontend/packages/agent/src/Root.tsx index 044947ed..5b2dbeb4 100644 --- a/frontend/packages/agent/src/Root.tsx +++ b/frontend/packages/agent/src/Root.tsx @@ -6,9 +6,11 @@ // optional polish. import { useEffect, useRef, useState } from 'preact/hooks'; import type { BadgeTone } from '@hive/shared/badge.js'; +import { SettingsMenu } from '@hive/shared/settings-menu.js'; +import { useApplyThemeOverride } from '@hive/shared/theme-apply.js'; +import { useApplyMotionOverride } from '@hive/shared/motion-apply.js'; import { Header } from './components/Header.js'; import { MetaNav } from './components/MetaNav.js'; -import { SettingsMenu } from './components/SettingsMenu.js'; import { StatusChips } from './components/StatusChips.js'; import { LiveStream, type LiveStreamHandle } from './components/LiveStream.js'; import { HeaderPill } from './components/HeaderPill.js'; @@ -23,11 +25,17 @@ import { fmtAge, fmtTokens } from './lib/format.js'; import { resolveDashboardBase } from './lib/dashboardBase.js'; import { submitPauseResume } from './lib/pauseAction.js'; import { postModel, postEffort } from './lib/modelEffort.js'; -import { useApplyThemeOverride } from './lib/theme-apply.js'; import type { TokenUsage } from './types.js'; type OpenPanel = 'inbox' | 'todos' | null; +// Storage keys this page owns for `@hive/shared`'s settings mechanism — +// kept here, not derived, so `useApplyThemeOverride`/`useApplyMotionOverride` +// (mounted once below) and `` (in `pills`, further down) +// always agree on which browser-local key they're reading/writing. +const THEME_KEY = 'agent:theme-override'; +const MOTION_KEY = 'agent:motion-override'; + const ALIVE_LABELS: Record = { online: { glyph: '●', text: 'alive', tone: 'positive' }, rate_limited: { glyph: '⊘', text: 'rate limited', tone: 'warning' }, @@ -55,7 +63,8 @@ function tokenTotal(u: TokenUsage | null): number | null { } export function Root() { - useApplyThemeOverride(); + useApplyThemeOverride(THEME_KEY); + useApplyMotionOverride(MOTION_KEY); const { state, refresh } = useAgentState(); const { todos, refresh: refreshTodos } = useTodos(); const [openPanel, setOpenPanel] = useState(null); @@ -103,7 +112,7 @@ export function Root() { dashboardBase={resolveDashboardBase(state.dashboard_port)} /> ) : null} - + ); // Kept mounted regardless of `openPanel` (open/closed toggles just the diff --git a/frontend/packages/agent/src/components/SettingsMenu.tsx b/frontend/packages/agent/src/components/SettingsMenu.tsx deleted file mode 100644 index 9652d9be..00000000 --- a/frontend/packages/agent/src/components/SettingsMenu.tsx +++ /dev/null @@ -1,66 +0,0 @@ -// — the header's settings trigger: a single fixed-size -// Badge ("⚙") in the pills cluster that opens a popover holding the -// client-local theme override. Ported from swarm-ui's `SettingsMenu` -// (mara: "agent terminal page should get the settings panel from swarm -// ui as well"), same shape as `MetaNav` here — `Badge` icon-only -// trigger, popover positioned/styled the same way, close on outside- -// click/Escape. -// -// Motion deliberately NOT ported alongside theme: swarm-ui's motion -// override exists to gate its own page-switch animation -// (`data-motion`), and the agent page has no equivalent animation -// wired to that attribute yet — porting the plumbing with nothing to -// control would be dead weight. Revisit if/when agent grows an -// animation worth gating. -import { useEffect, useRef, useState } from 'preact/hooks'; -import { Badge } from '@hive/shared/badge.js'; -import { useThemeOverride, type ThemeOverride } from '../lib/theme-apply.js'; -import './SettingsMenu.css'; - -const THEME_OPTIONS: ThemeOverride[] = ['system', 'light', 'dark']; - -export function SettingsMenu() { - const [open, setOpen] = useState(false); - const rootRef = useRef(null); - const [theme, setTheme] = useThemeOverride(); - - // Same "outside click or Escape closes" contract as MetaNav/Dropdown. - useEffect(() => { - if (!open) return; - function onPointerDown(e: PointerEvent) { - if (rootRef.current && e.target instanceof Node && !rootRef.current.contains(e.target)) setOpen(false); - } - function onKeyDown(e: KeyboardEvent) { - if (e.key === 'Escape') setOpen(false); - } - document.addEventListener('pointerdown', onPointerDown, true); - document.addEventListener('keydown', onKeyDown); - return () => { - document.removeEventListener('pointerdown', onPointerDown, true); - document.removeEventListener('keydown', onKeyDown); - }; - }, [open]); - - return ( -
- setOpen((v) => !v)} expanded={open} /> - {open ? ( - - ) : null} -
- ); -} diff --git a/frontend/packages/agent/src/lib/settings-storage.ts b/frontend/packages/agent/src/lib/settings-storage.ts deleted file mode 100644 index 43d9389a..00000000 --- a/frontend/packages/agent/src/lib/settings-storage.ts +++ /dev/null @@ -1,77 +0,0 @@ -// Generic localStorage-backed setting — ported from swarm-ui's -// `lib/settings-storage.ts` verbatim (mara: "agent terminal page should -// get the settings panel from swarm ui as well"). Not merged into -// `@hive/shared` for this pass — duplicating ~60 lines of already- -// working, dependency-free plumbing is lower-risk than reworking -// swarm-ui's own imports to point at a new shared module in the same -// change; worth revisiting if a third package ever needs this too. -// -// `localStorage`'s own `storage` event only fires in *other* tabs, never -// the tab that made the write — so two components in the same tab both -// watching the same key (e.g. `SettingsMenu` writing, a top-level effect -// reading) need their own same-tab signal. The tiny module-level pub/sub -// below is that signal; it's deliberately not exported, callers only see -// the hook. -import { useEffect, useState } from 'preact/hooks'; - -const listeners = new Map void>>(); - -function subscribe(key: string, onChange: () => void): () => void { - let set = listeners.get(key); - if (!set) { - set = new Set(); - listeners.set(key, set); - } - set.add(onChange); - return () => { - set!.delete(onChange); - if (set!.size === 0) listeners.delete(key); - }; -} - -function notify(key: string): void { - listeners.get(key)?.forEach((fn) => fn()); -} - -// Reads outside a component (e.g. an early top-level check) can call -// this directly; `useLocalSetting` builds on it rather than duplicating -// the try/catch. -export function readLocalSetting(key: string, fallback: T): T { - try { - const raw = localStorage.getItem(key); - return raw === null ? fallback : (JSON.parse(raw) as T); - } catch { - // Private-browsing storage bans, a corrupted value, quota errors — - // all the same answer: behave as if nothing were stored. - return fallback; - } -} - -function writeLocalSetting(key: string, value: T): void { - try { - localStorage.setItem(key, JSON.stringify(value)); - } catch { - // Best-effort: the setting just won't persist this time, not worth - // surfacing an error for a client-local preference. - } - notify(key); -} - -// `[value, setValue]`, same shape as `useState` — deliberately, so a -// caller that later needs to swap a plain `useState` for a persisted -// setting (or vice versa) changes one line, not its whole call site. -// -// `setValue` only writes + notifies; it doesn't also call this -// component's own `setValue` state setter directly. The subscription -// below already fires for a same-instance write (it's in the same -// `listeners` set as every other subscriber), so a self-write reaches -// this component's state through the identical "react to a change" -// path every other subscriber uses — one path, not two that have to -// agree. -export function useLocalSetting(key: string, fallback: T): [T, (value: T) => void] { - const [value, setValue] = useState(() => readLocalSetting(key, fallback)); - - useEffect(() => subscribe(key, () => setValue(readLocalSetting(key, fallback))), [key]); - - return [value, (next: T) => writeLocalSetting(key, next)]; -} diff --git a/frontend/packages/agent/src/lib/theme-apply.ts b/frontend/packages/agent/src/lib/theme-apply.ts deleted file mode 100644 index 84f3fbfd..00000000 --- a/frontend/packages/agent/src/lib/theme-apply.ts +++ /dev/null @@ -1,42 +0,0 @@ -// Applies the stored theme override by setting `data-theme="light"|"dark"` -// on ``, cleared when the override is "system" (letting the -// `prefers-color-scheme` media query in `@hive/shared/colors.css` resume -// control). No palette values live here — `colors.css`'s own -// `:root[data-theme='light']` / `:root[data-theme='dark']` blocks (already -// shipped, previously only reachable from swarm-ui) are what actually -// apply the colours. -// -// Default 'dark', not 'system' — same reasoning as swarm-ui's own default -// flip: `prefers-color-scheme` has no real "unset" value the way -// `prefers-reduced-motion` does, so a browser with no explicit dark-mode -// toggle reports `light`, and 'system' would silently read as light by -// default for most first-time visitors (mara: "light mode seems to be -// default"). Still fully overridable via the settings menu — this only -// changes what a user with no *saved* preference sees. -import { useEffect } from 'preact/hooks'; -import { useLocalSetting } from './settings-storage.js'; - -export type ThemeOverride = 'system' | 'light' | 'dark'; - -export const THEME_OVERRIDE_KEY = 'agent:theme-override'; - -export function useThemeOverride() { - return useLocalSetting(THEME_OVERRIDE_KEY, 'dark'); -} - -// Mounted once, high in the tree (`Root`) — same rationale as swarm-ui's -// `Shell`: one mount point applies the override regardless of what else -// is rendering, and `useLocalSetting`'s same-tab subscription means -// `SettingsMenu` changing the value re-runs this effect without either -// component needing to know about the other directly. -export function useApplyThemeOverride(): void { - const [override] = useThemeOverride(); - useEffect(() => { - const root = document.documentElement; - if (override === 'system') { - delete root.dataset.theme; - } else { - root.dataset.theme = override; - } - }, [override]); -} diff --git a/frontend/packages/shared/package.json b/frontend/packages/shared/package.json index 1815a756..f238cf01 100644 --- a/frontend/packages/shared/package.json +++ b/frontend/packages/shared/package.json @@ -40,7 +40,12 @@ "./badge.js": "./src/badge/Badge.tsx", "./badge.css": "./src/badge/Badge.css", "./dropdown.js": "./src/dropdown/Dropdown.tsx", - "./dropdown.css": "./src/dropdown/Dropdown.css" + "./dropdown.css": "./src/dropdown/Dropdown.css", + "./settings-storage.js": "./src/settings/settings-storage.ts", + "./theme-apply.js": "./src/settings/theme-apply.ts", + "./motion-apply.js": "./src/settings/motion-apply.ts", + "./settings-menu.js": "./src/settings/SettingsMenu.tsx", + "./settings-menu.css": "./src/settings/SettingsMenu.css" }, "files": [ "src/" diff --git a/frontend/packages/agent/src/components/SettingsMenu.css b/frontend/packages/shared/src/settings/SettingsMenu.css similarity index 57% rename from frontend/packages/agent/src/components/SettingsMenu.css rename to frontend/packages/shared/src/settings/SettingsMenu.css index cef0faa9..50e2f7dc 100644 --- a/frontend/packages/agent/src/components/SettingsMenu.css +++ b/frontend/packages/shared/src/settings/SettingsMenu.css @@ -1,10 +1,11 @@ -/* popover — matches `MetaNav`'s popover values exactly - (`../components/MetaNav.css`), which in turn match `@hive/shared`'s - `Dropdown` (`.ui-dropdown`) — same "reuse the values, not the - component" call, this popover holds a `` rows, not `Dropdown`'s + command-dispatch ` - {open ? ( - - ) : null} - - ); -} diff --git a/frontend/packages/swarm-ui/src/shell/Shell.css b/frontend/packages/swarm-ui/src/shell/Shell.css index 77e59c13..1e265176 100644 --- a/frontend/packages/swarm-ui/src/shell/Shell.css +++ b/frontend/packages/swarm-ui/src/shell/Shell.css @@ -12,8 +12,8 @@ Page-switch animation (see Shell.tsx's file-top comment for the JS half): both the nav indicator's slide and the page-body pop follow - the same three-rule motion-guard shape `lib/motion-apply.ts`'s own - doc comment specifies — a base rule, + the same three-rule motion-guard shape `@hive/shared/motion-apply.js`'s + own doc comment specifies — a base rule, `@media (prefers-reduced-motion: reduce)` to respect the OS default, `:root[data-motion='reduce']` as the explicit override (same specificity as the media rule, so source order after it wins), then diff --git a/frontend/packages/swarm-ui/src/shell/Shell.tsx b/frontend/packages/swarm-ui/src/shell/Shell.tsx index 539471d2..8eb9d6cd 100644 --- a/frontend/packages/swarm-ui/src/shell/Shell.tsx +++ b/frontend/packages/swarm-ui/src/shell/Shell.tsx @@ -30,12 +30,20 @@ import { useEffect, useRef, useState } from 'preact/hooks'; import type { ComponentChildren } from 'preact'; import { Link, useLocation } from 'wouter-preact'; import { LinksMenu } from './LinksMenu.js'; -import { SettingsMenu } from './SettingsMenu.js'; import { UserMenu } from './UserMenu.js'; -import { useApplyThemeOverride } from '../lib/theme-apply.js'; -import { useApplyMotionOverride } from '../lib/motion-apply.js'; +import { SettingsMenu } from '@hive/shared/settings-menu.js'; +import { useApplyThemeOverride } from '@hive/shared/theme-apply.js'; +import { useApplyMotionOverride } from '@hive/shared/motion-apply.js'; import './Shell.css'; +// Storage keys this app owns for `@hive/shared`'s settings mechanism — +// kept here, not derived, so the two mount points below (the +// `useApply*` effects and ``) always agree on which +// browser-local key they're reading/writing. Theme defaults to `'dark'`, +// not `'system'` — see `@hive/shared/theme-apply.js`'s file comment. +const THEME_KEY = 'swarm-ui:theme-override'; +const MOTION_KEY = 'swarm-ui:motion-override'; + const NAV_ITEMS: { href: string; label: string; accent: string }[] = [ { href: '/', label: 'hives', accent: 'var(--purple)' }, { href: '/agents', label: 'agents', accent: 'var(--green)' }, @@ -68,7 +76,7 @@ const HOP_MS = 140; // multi-step `setTimeout` sequence has no CSS equivalent to hook, so it // checks the same two sources directly. `data-motion` takes precedence // over the OS preference either direction (reduce *or* allow), same -// override semantics `lib/motion-apply.ts` establishes. +// override semantics `@hive/shared/motion-apply.js` establishes. function prefersReducedMotion(): boolean { const override = document.documentElement.dataset.motion; if (override === 'reduce') return true; @@ -127,11 +135,12 @@ export function Shell({ children }: { children: ComponentChildren }) { // Applied once here, not inside `SettingsMenu` — every route mounts // through this one ``, so the override takes effect regardless // of which page is showing or whether the menu's ever been opened, - // and `useLocalSetting`'s same-tab subscription (settings-storage.ts) - // means `SettingsMenu` changing the stored value re-runs these - // effects without either component needing a reference to the other. - useApplyThemeOverride(); - useApplyMotionOverride(); + // and `useLocalSetting`'s same-tab subscription + // (`@hive/shared/settings-storage.js`) means `SettingsMenu` changing + // the stored value re-runs these effects without either component + // needing a reference to the other. + useApplyThemeOverride(THEME_KEY); + useApplyMotionOverride(MOTION_KEY); // Measures nav item `index`'s rect relative to `.shell-nav`. // `getBoundingClientRect()` on both elements at the same tick keeps @@ -282,7 +291,7 @@ export function Shell({ children }: { children: ComponentChildren }) { `margin-left: auto` split the available space between them instead of sitting flush together at the right edge. */}
- +