@schlessera/brain-ui-react 0.35.0 → 0.37.0

package/src/stores/provider-store.ts

@@ -1,96 +1,11 @@
-import { create } from "zustand";
-import type { ProviderInfo } from "@schlessera/brain-ui-sdk/protocol";
-import { api, type BackendInfo } from "../lib/api-client.js";
-
-const PROVIDER_ID_KEY = "brain-ui:provider-id";
-
-function readSelectedId(): string {
-  if (typeof localStorage === "undefined") return "";
-  return localStorage.getItem(PROVIDER_ID_KEY) ?? "";
-}
-
-interface ProviderState {
-  /** Provider combos the server currently offers (metadata only). */
-  available: ProviderInfo[];
-  /** User's chosen combo for the next new conversation. Persisted. */
-  selectedId: string;
-  /**
-   * Provider the active session is pinned to (from `session_info`). When set,
-   * it takes display precedence over `selectedId` and the picker locks.
-   */
-  pinnedId: string | null;
-  /** Capability metadata keyed by backend id. */
-  backends: Record<string, BackendInfo>;
-  loaded: boolean;
-
-  loadProviders: () => Promise<void>;
-  setSelected: (id: string) => void;
-  setPinned: (id: string | null) => void;
-}
-
-/** Resolve the backend metadata for an available provider profile. */
-export function selectBackendForProvider(
-  state: Pick<ProviderState, "available" | "backends">,
-  providerId: string | null | undefined
-): BackendInfo | null {
-  const backendId = state.available.find(
-    (provider) => provider.id === providerId
-  )?.backendId;
-  return backendId ? state.backends[backendId] ?? null : null;
-}
-
-export const useProviderStore = create<ProviderState>((set, get) => ({
-  available: [],
-  selectedId: readSelectedId(),
-  pinnedId: null,
-  backends: {},
-  loaded: false,
-
-  loadProviders: async () => {
-    try {
-      const { providers, backends } = await api.providers();
-      set((s) => {
-        // Keep the persisted choice if it's still on offer; otherwise fall
-        // back to the first available combo. This runs on every reload of the
-        // roster, so hiding the selected model in settings moves the selection
-        // instead of leaving the composer pointing at a profile the picker no
-        // longer lists.
-        const stillValid = providers.some((p) => p.id === s.selectedId);
-        const selectedId =
-          stillValid && s.selectedId
-            ? s.selectedId
-            : providers[0]?.id ?? "";
-        // Persist the fallback too — otherwise the stale id sits in
-        // localStorage and has to be re-resolved on every boot.
-        if (
-          selectedId !== s.selectedId &&
-          typeof localStorage !== "undefined"
-        ) {
-          localStorage.setItem(PROVIDER_ID_KEY, selectedId);
-        }
-        return {
-          available: providers,
-          selectedId,
-          backends: backends ?? {},
-          loaded: true,
-        };
-      });
-    } catch {
-      // Soft-fail: leave the picker empty; the composer still works and
-      // sends run on the server default.
-      set({ loaded: true });
-    }
-  },
-
-  setSelected: (id) => {
-    if (typeof localStorage !== "undefined") {
-      localStorage.setItem(PROVIDER_ID_KEY, id);
-    }
-    set({ selectedId: id });
-  },
-
-  setPinned: (id) => {
-    if (get().pinnedId === id) return;
-    set({ pinnedId: id });
+import { useRootStore } from "../root-context.js";
+import { defaultRoot } from "../default-root.js";
+export * from "./provider-state.js";
+
+/** Hook reads the current provider. Statics address the default app only. */
+export const useProviderStore = Object.assign(
+  function useProviderStore<T>(selector: (state: ReturnType<typeof defaultRoot.stores.provider.getState>) => T): T {
+    return useRootStore("provider", selector);
   },
-}));
+  defaultRoot.stores.provider,
+);

package/src/stores/share-state.ts

@@ -0,0 +1,56 @@
+import { createStore } from "zustand/vanilla";
+import type { StoredShare } from "@schlessera/brain-ui-sdk/share-target";
+
+/**
+ * Shares waiting for the user to confirm them.
+ *
+ * They queue rather than run: a share is untrusted input (any website can POST
+ * to the share target), and the client can only have ONE unbound chat draft at
+ * a time — two turns started before the first `session_info` arrives would put
+ * both messages in the same buffer and then silently drop the second session's
+ * transcript. One at a time, each behind a tap, solves both.
+ */
+export interface ShareIntakeState {
+  /** Claimed shares, oldest first. The head is the one on screen. */
+  queue: StoredShare[];
+  /** An upload or send is in flight; no second share may start. */
+  busy: boolean;
+  /** Something the user needs to see rather than a silent failure. */
+  error: string | null;
+  /** Non-fatal notes about the last confirm (images over the vision cap, …). */
+  notes: string[];
+
+  enqueue: (record: StoredShare) => void;
+  remove: (id: string) => void;
+  setBusy: (busy: boolean) => void;
+  setError: (error: string | null) => void;
+  setNotes: (notes: string[]) => void;
+}
+
+export function createShareStore() {
+  return createStore<ShareIntakeState>((set) => ({
+    queue: [],
+    busy: false,
+    error: null,
+    notes: [],
+
+    enqueue: (record) =>
+      set((state) =>
+        state.queue.some((queued) => queued.id === record.id)
+          ? state
+          : { queue: [...state.queue, record] }
+      ),
+
+    remove: (id) =>
+      set((state) => ({ queue: state.queue.filter((queued) => queued.id !== id) })),
+
+    setBusy: (busy) => set({ busy }),
+    setError: (error) => set({ error }),
+    setNotes: (notes) => set({ notes }),
+  }));
+}
+
+/** Whether a share is pending — the shell reads this to defer a reload. */
+export function hasPendingShare(state: ShareIntakeState): boolean {
+  return state.queue.length > 0 || state.busy;
+}

package/src/stores/share-store.ts

@@ -1,54 +1,11 @@
-import { create } from "zustand";
-import type { StoredShare } from "@schlessera/brain-ui-sdk/share-target";
-
-/**
- * Shares waiting for the user to confirm them.
- *
- * They queue rather than run: a share is untrusted input (any website can POST
- * to the share target), and the client can only have ONE unbound chat draft at
- * a time — two turns started before the first `session_info` arrives would put
- * both messages in the same buffer and then silently drop the second session's
- * transcript. One at a time, each behind a tap, solves both.
- */
-export interface ShareIntakeState {
-  /** Claimed shares, oldest first. The head is the one on screen. */
-  queue: StoredShare[];
-  /** An upload or send is in flight; no second share may start. */
-  busy: boolean;
-  /** Something the user needs to see rather than a silent failure. */
-  error: string | null;
-  /** Non-fatal notes about the last confirm (images over the vision cap, …). */
-  notes: string[];
-
-  enqueue: (record: StoredShare) => void;
-  remove: (id: string) => void;
-  setBusy: (busy: boolean) => void;
-  setError: (error: string | null) => void;
-  setNotes: (notes: string[]) => void;
-}
-
-export const useShareStore = create<ShareIntakeState>((set) => ({
-  queue: [],
-  busy: false,
-  error: null,
-  notes: [],
-
-  enqueue: (record) =>
-    set((state) =>
-      state.queue.some((queued) => queued.id === record.id)
-        ? state
-        : { queue: [...state.queue, record] }
-    ),
-
-  remove: (id) =>
-    set((state) => ({ queue: state.queue.filter((queued) => queued.id !== id) })),
-
-  setBusy: (busy) => set({ busy }),
-  setError: (error) => set({ error }),
-  setNotes: (notes) => set({ notes }),
-}));
-
-/** Whether a share is pending — the shell reads this to defer a reload. */
-export function hasPendingShare(state: ShareIntakeState): boolean {
-  return state.queue.length > 0 || state.busy;
-}
+import { useRootStore } from "../root-context.js";
+import { defaultRoot } from "../default-root.js";
+export * from "./share-state.js";
+
+/** Hook reads the current provider. Statics address the default app only. */
+export const useShareStore = Object.assign(
+  function useShareStore<T>(selector: (state: ReturnType<typeof defaultRoot.stores.share.getState>) => T): T {
+    return useRootStore("share", selector);
+  },
+  defaultRoot.stores.share,
+);

package/src/stores/store-environment.ts

@@ -0,0 +1,10 @@
+import type { BrainApi } from "../lib/api-client.js";
+
+/** Concrete dependencies shared by the store factories of one UI root. */
+export interface StoreEnvironment {
+  api: BrainApi;
+  apiBase: () => string;
+  request: (url: string, init?: RequestInit) => Promise<Response>;
+  storage: () => Storage | null;
+  storageKey: (key: string) => string;
+}

package/src/stores/ui-state.ts

@@ -0,0 +1,143 @@
+import { createStore } from "zustand/vanilla";
+import type { StoreEnvironment } from "./store-environment.js";
+
+/**
+ * The design's three-way theme toggle (system / paper / dark). `system` is
+ * the browser's own `prefers-color-scheme`; the other two override it. The
+ * value is written to `<html data-theme>` by `useApplyTheme`, and the kit's
+ * tokens do the rest — no component knows which theme it is in.
+ */
+export type ThemePreference = "system" | "light" | "dark";
+
+const THEME_KEY = "brain-theme";
+const SINGLE_KEY_KEY = "brain-single-key-shortcuts";
+
+function isThemePreference(value: unknown): value is ThemePreference {
+  return value === "system" || value === "light" || value === "dark";
+}
+
+/**
+ * Which section the settings surface shows. `appearance` (D5: theme and
+ * input) is a section column row from `laptop:` up only; the phone strip
+ * keeps those controls above its tabs and folds the value to `models`.
+ */
+export type SettingsTab = "appearance" | "models" | "skills" | "security" | "devices";
+
+/** Full-screen surface currently shown inside the AppShell. */
+export type ActiveView = "chat" | "graph" | "activity";
+
+export interface UIState {
+  activeView: ActiveView;
+  /**
+   * Drill-in stack of open subagent views (Agent tool-call span ids). A
+   * nested subagent pushes; back pops. Kept here rather than component state
+   * so the Activity surface and the chat timeline share one drill-in.
+   */
+  subagentStack: string[];
+  pushSubagentView: (spanId: string) => void;
+  popSubagentView: () => void;
+  sessionPanelOpen: boolean;
+  syncPanelOpen: boolean;
+  whatsupPanelOpen: boolean;
+  searchPanelOpen: boolean;
+  addPanelOpen: boolean;
+  filePanelOpen: boolean;
+  settingsPanelOpen: boolean;
+  settingsTab: SettingsTab;
+  /** Switch the full-screen view; closes any open panel so the new view starts clean. */
+  setActiveView: (view: ActiveView) => void;
+  toggleSessionPanel: () => void;
+  toggleSyncPanel: () => void;
+  toggleWhatsupPanel: () => void;
+  toggleSearchPanel: () => void;
+  toggleAddPanel: () => void;
+  toggleFilePanel: () => void;
+  toggleSettingsPanel: () => void;
+  closeAllPanels: () => void;
+  setSyncPanelOpen: (open: boolean) => void;
+  setWhatsupPanelOpen: (open: boolean) => void;
+  setSearchPanelOpen: (open: boolean) => void;
+  setAddPanelOpen: (open: boolean) => void;
+  setSessionPanelOpen: (open: boolean) => void;
+  setFilePanelOpen: (open: boolean) => void;
+  setSettingsPanelOpen: (open: boolean) => void;
+  /** Open settings straight onto a tab (menu entries, deep links). */
+  openSettings: (tab: SettingsTab) => void;
+  setSettingsTab: (tab: SettingsTab) => void;
+  /** Persisted per root; `dark` until the user says otherwise, which is what
+   * the app has always been. A host that wants `system` as its default sets
+   * it once through `setTheme`. */
+  theme: ThemePreference;
+  setTheme: (theme: ThemePreference) => void;
+  /**
+   * D36: `a` / `d` on a focused approval card and `j` / `k` in a focused
+   * list. On by default; the off switch is WCAG 2.1.4's third escape hatch
+   * for readers whose assistive tech or typing habits collide with single
+   * letters. Persisted per root. Modifier shortcuts (⌘K, ⌘1–⌘5) are not
+   * governed by it.
+   */
+  singleKeyShortcuts: boolean;
+  setSingleKeyShortcuts: (on: boolean) => void;
+}
+
+const CLOSED = {
+  sessionPanelOpen: false,
+  syncPanelOpen: false,
+  whatsupPanelOpen: false,
+  searchPanelOpen: false,
+  addPanelOpen: false,
+  filePanelOpen: false,
+  settingsPanelOpen: false,
+};
+
+export function createUIStore(env?: Pick<StoreEnvironment, "storage" | "storageKey">) {
+  const themeKey = env?.storageKey(THEME_KEY) ?? THEME_KEY;
+  const stored = env?.storage()?.getItem(themeKey);
+  const singleKeyKey = env?.storageKey(SINGLE_KEY_KEY) ?? SINGLE_KEY_KEY;
+  const storedSingleKey = env?.storage()?.getItem(singleKeyKey);
+  return createStore<UIState>((set) => ({
+    ...CLOSED,
+    activeView: "chat",
+    settingsTab: "models",
+    theme: isThemePreference(stored) ? stored : "dark",
+    setTheme: (theme) => {
+      env?.storage()?.setItem(themeKey, theme);
+      set({ theme });
+    },
+    singleKeyShortcuts: storedSingleKey !== "off",
+    setSingleKeyShortcuts: (on) => {
+      env?.storage()?.setItem(singleKeyKey, on ? "on" : "off");
+      set({ singleKeyShortcuts: on });
+    },
+    subagentStack: [],
+    pushSubagentView: (spanId) =>
+      set((s) => ({ subagentStack: [...s.subagentStack, spanId] })),
+    popSubagentView: () => set((s) => ({ subagentStack: s.subagentStack.slice(0, -1) })),
+    setActiveView: (view) => set({ ...CLOSED, activeView: view }),
+    toggleSessionPanel: () =>
+      set((s) => ({ ...CLOSED, sessionPanelOpen: !s.sessionPanelOpen })),
+    toggleSyncPanel: () =>
+      set((s) => ({ ...CLOSED, syncPanelOpen: !s.syncPanelOpen })),
+    toggleWhatsupPanel: () =>
+      set((s) => ({ ...CLOSED, whatsupPanelOpen: !s.whatsupPanelOpen })),
+    toggleSearchPanel: () =>
+      set((s) => ({ ...CLOSED, searchPanelOpen: !s.searchPanelOpen })),
+    toggleAddPanel: () =>
+      set((s) => ({ ...CLOSED, addPanelOpen: !s.addPanelOpen })),
+    toggleFilePanel: () =>
+      set((s) => ({ ...CLOSED, filePanelOpen: !s.filePanelOpen })),
+    toggleSettingsPanel: () =>
+      set((s) => ({ ...CLOSED, settingsPanelOpen: !s.settingsPanelOpen })),
+    closeAllPanels: () => set({ ...CLOSED }),
+    setSyncPanelOpen: (open) => set({ syncPanelOpen: open }),
+    setWhatsupPanelOpen: (open) => set({ whatsupPanelOpen: open }),
+    setSearchPanelOpen: (open) => set({ searchPanelOpen: open }),
+    setAddPanelOpen: (open) => set({ addPanelOpen: open }),
+    setSessionPanelOpen: (open) => set({ sessionPanelOpen: open }),
+    setFilePanelOpen: (open) => set({ filePanelOpen: open }),
+    setSettingsPanelOpen: (open) => set({ settingsPanelOpen: open }),
+    openSettings: (tab) =>
+      set({ ...CLOSED, settingsPanelOpen: true, settingsTab: tab }),
+    setSettingsTab: (tab) => set({ settingsTab: tab }),
+  }));
+}

package/src/stores/ui-store.ts

@@ -1,93 +1,11 @@
-import { create } from "zustand";
-
-/** Which tab the settings panel opens on. */
-export type SettingsTab = "models" | "skills" | "security" | "devices";
-
-/** Full-screen surface currently shown inside the AppShell. */
-export type ActiveView = "chat" | "graph" | "activity";
-
-interface UIState {
-  activeView: ActiveView;
-  /**
-   * Drill-in stack of open subagent views (Agent tool-call span ids). A
-   * nested subagent pushes; back pops. Kept here rather than component state
-   * so the Activity surface and the chat timeline share one drill-in.
-   */
-  subagentStack: string[];
-  pushSubagentView: (spanId: string) => void;
-  popSubagentView: () => void;
-  sessionPanelOpen: boolean;
-  syncPanelOpen: boolean;
-  whatsupPanelOpen: boolean;
-  searchPanelOpen: boolean;
-  addPanelOpen: boolean;
-  filePanelOpen: boolean;
-  settingsPanelOpen: boolean;
-  settingsTab: SettingsTab;
-  /** Switch the full-screen view; closes any open panel so the new view starts clean. */
-  setActiveView: (view: ActiveView) => void;
-  toggleSessionPanel: () => void;
-  toggleSyncPanel: () => void;
-  toggleWhatsupPanel: () => void;
-  toggleSearchPanel: () => void;
-  toggleAddPanel: () => void;
-  toggleFilePanel: () => void;
-  toggleSettingsPanel: () => void;
-  closeAllPanels: () => void;
-  setSyncPanelOpen: (open: boolean) => void;
-  setWhatsupPanelOpen: (open: boolean) => void;
-  setSearchPanelOpen: (open: boolean) => void;
-  setAddPanelOpen: (open: boolean) => void;
-  setSessionPanelOpen: (open: boolean) => void;
-  setFilePanelOpen: (open: boolean) => void;
-  setSettingsPanelOpen: (open: boolean) => void;
-  /** Open settings straight onto a tab (menu entries, deep links). */
-  openSettings: (tab: SettingsTab) => void;
-  setSettingsTab: (tab: SettingsTab) => void;
-}
-
-const CLOSED = {
-  sessionPanelOpen: false,
-  syncPanelOpen: false,
-  whatsupPanelOpen: false,
-  searchPanelOpen: false,
-  addPanelOpen: false,
-  filePanelOpen: false,
-  settingsPanelOpen: false,
-};
-
-export const useUIStore = create<UIState>((set) => ({
-  ...CLOSED,
-  activeView: "chat",
-  settingsTab: "models",
-  subagentStack: [],
-  pushSubagentView: (spanId) =>
-    set((s) => ({ subagentStack: [...s.subagentStack, spanId] })),
-  popSubagentView: () => set((s) => ({ subagentStack: s.subagentStack.slice(0, -1) })),
-  setActiveView: (view) => set({ ...CLOSED, activeView: view }),
-  toggleSessionPanel: () =>
-    set((s) => ({ ...CLOSED, sessionPanelOpen: !s.sessionPanelOpen })),
-  toggleSyncPanel: () =>
-    set((s) => ({ ...CLOSED, syncPanelOpen: !s.syncPanelOpen })),
-  toggleWhatsupPanel: () =>
-    set((s) => ({ ...CLOSED, whatsupPanelOpen: !s.whatsupPanelOpen })),
-  toggleSearchPanel: () =>
-    set((s) => ({ ...CLOSED, searchPanelOpen: !s.searchPanelOpen })),
-  toggleAddPanel: () =>
-    set((s) => ({ ...CLOSED, addPanelOpen: !s.addPanelOpen })),
-  toggleFilePanel: () =>
-    set((s) => ({ ...CLOSED, filePanelOpen: !s.filePanelOpen })),
-  toggleSettingsPanel: () =>
-    set((s) => ({ ...CLOSED, settingsPanelOpen: !s.settingsPanelOpen })),
-  closeAllPanels: () => set({ ...CLOSED }),
-  setSyncPanelOpen: (open) => set({ syncPanelOpen: open }),
-  setWhatsupPanelOpen: (open) => set({ whatsupPanelOpen: open }),
-  setSearchPanelOpen: (open) => set({ searchPanelOpen: open }),
-  setAddPanelOpen: (open) => set({ addPanelOpen: open }),
-  setSessionPanelOpen: (open) => set({ sessionPanelOpen: open }),
-  setFilePanelOpen: (open) => set({ filePanelOpen: open }),
-  setSettingsPanelOpen: (open) => set({ settingsPanelOpen: open }),
-  openSettings: (tab) =>
-    set({ ...CLOSED, settingsPanelOpen: true, settingsTab: tab }),
-  setSettingsTab: (tab) => set({ settingsTab: tab }),
-}));
+import { useRootStore } from "../root-context.js";
+import { defaultRoot } from "../default-root.js";
+export * from "./ui-state.js";
+
+/** Hook reads the current provider. Statics address the default app only. */
+export const useUIStore = Object.assign(
+  function useUIStore<T>(selector: (state: ReturnType<typeof defaultRoot.stores.ui.getState>) => T): T {
+    return useRootStore("ui", selector);
+  },
+  defaultRoot.stores.ui,
+);

package/src/styles.css

@@ -1,4 +1,7 @@
-/* Precompiled-stylesheet entry: `bunx @tailwindcss/cli -i src/styles.css -o dist/styles.css`. */
+/* Precompiled-stylesheet entry: `bunx @tailwindcss/cli -i src/styles.css -o dist/styles.css`.
+ *
+ * `theme.css` carries the kit's `tokens.css` import, so both CSS exports
+ * agree on the `--bk-*` values without a second import here. */
 @import "tailwindcss" source(none);
 @source "./";
 @import "./theme.css";