@wrongstack/tui 0.302.2 → 0.303.0

package/dist/app-action-type.d.ts

@@ -160,6 +160,20 @@ export type Action = {
 } | {
     type: 'autonomyPickerHint';
     text?: string | undefined;
+}
+/** Theme picker — opened by `/theme`. Selecting a row swaps the palette and
+ *  persists the choice via the ConfigStore bridge from the host. */
+ | {
+    type: 'themePickerOpen';
+    selected?: number;
+} | {
+    type: 'themePickerClose';
+} | {
+    type: 'themePickerMove';
+    delta: number;
+} | {
+    type: 'themePickerHint';
+    text?: string | undefined;
 } | {
     type: 'modePickerOpen';
     modes: ModeOption[];

package/dist/app-props.d.ts

@@ -1,9 +1,9 @@
 import type { Agent } from '@wrongstack/core/agent';
 import type { CoordinatorEvent, Director } from '@wrongstack/core/coordination';
+import type { EventBus } from '@wrongstack/core/kernel';
 import type { SlashCommandRegistry } from '@wrongstack/core/registry';
 import type { QueueStore } from '@wrongstack/core/storage';
-import type { AttachmentStore, AutonomyStage, ContextSnapshot, FleetChatVerbosity, Message, TokenCounter, TokenSavingTier } from '@wrongstack/core/types';
-import type { EventBus } from '@wrongstack/core/kernel';
+import type { AttachmentStore, AutonomyStage, ConfigStore, ContextSnapshot, FleetChatVerbosity, Message, TokenCounter, TokenSavingTier } from '@wrongstack/core/types';
 import type { VisionAdapters } from '@wrongstack/runtime/vision';
 import type { SddLifecycleResult, SddRunControl } from '@wrongstack/sdd';
 import type React from 'react';
@@ -205,11 +205,25 @@ export interface AppProps {
      */
     /** Settings shape — shared between getSettings and saveSettings. */
     getSettings?: (() => Settings) | undefined;
+    /**
+     * Live view over the persisted user config. The TUI uses this to:
+     * - apply `themePreset` on boot (so `/theme` choices persist across
+     *   restarts), and
+     * - write `themePreset` back when the picker Enter handler fires
+     *   (so the picker shows `[active]` on the right row next session).
+     *
+     * Optional for hosts that don't expose a config store (e.g. tests);
+     * when omitted the TUI stays on the default catppuccin palette and
+     * picker changes are ephemeral.
+     */
+    configStore?: ConfigStore | undefined;
     /**
      * Persist settings changes. Returns null on success, or an
      * error string on failure (so the TUI can display it as a hint).
      */
     saveSettings?: ((s: Settings) => string | null | Promise<string | null>) | undefined;
+    /** Persist the active theme preset to disk so the next boot starts with it. */
+    saveThemePreset?: ((preset: import('@wrongstack/core/types').ThemePresetId) => Promise<void>) | undefined;
     /** Load toggleable plugin rows for the interactive plugin picker. */
     getPluginItems?: (() => PluginPickerItem[]) | undefined;
     /** Toggle one plugin from the interactive picker and return the refreshed rows. */

package/dist/app-state.d.ts

@@ -167,6 +167,13 @@ export type State = {
         selected: number;
         hint?: string | undefined;
     };
+    /** Single-step theme picker — opened by `/theme`. Lists every preset and
+     *  applies the chosen one instantly (in-place palette mutation + persist). */
+    themePicker: {
+        open: boolean;
+        selected: number;
+        hint?: string | undefined;
+    };
     /** Agent mode picker — opened by `/mode`. Selects teach/brief/code-reviewer/etc. */
     modePicker: {
         open: boolean;

package/dist/components/design-picker.d.ts

@@ -9,6 +9,9 @@ export interface DesignPickerProps {
  * Design Studio kit picker overlay (opened by `/design`). Presentational only —
  * navigation/selection state lives in the reducer; Enter runs `/design <id>
  * <stack>` through the normal submit path, which pins the kit + loads its spec.
+ *
+ * Windowed via {@link useWindowedPicker} so 50+ installed kits stay
+ * navigable on small terminals.
  */
 export declare function DesignPicker({ kits, selected, stack }: DesignPickerProps): React.ReactElement;
 //# sourceMappingURL=design-picker.d.ts.map

package/dist/components/resume-picker.d.ts

@@ -11,6 +11,10 @@ export interface ResumePickerProps {
  * Interactive session-resume picker. Renders a scrollable list of recent
  * sessions with metadata (id, date, tokens, tools, outcome badge) so the user
  * can pick one to resume. The current session is grayed out and non-selectable.
+ *
+ * Windowed via {@link useWindowedPicker} with `rowSpan=3` — each session takes
+ * three rows (title line, meta line, preview line). The window auto-recenters
+ * on the focused session so 30+ entries stay navigable on a 24-row terminal.
  */
 export declare function ResumePicker({ sessions, selected, busy, error, hint, }: ResumePickerProps): React.ReactElement;
 //# sourceMappingURL=resume-picker.d.ts.map

package/dist/components/theme-picker.d.ts

@@ -0,0 +1,21 @@
+import type React from 'react';
+import type { ThemeName, ThemePickerOption } from '../theme.js';
+export interface ThemePickerProps {
+    options: readonly ThemePickerOption[];
+    selected: number;
+    activeId: ThemeName;
+    hint?: string | undefined;
+}
+/**
+ * Interactive theme picker. Mirrors the autonomy-picker visual pattern
+ * (bordered box, ↑/↓ navigate, Enter apply, Esc cancel) so the two
+ * pickers look and feel consistent. The currently active preset is
+ * highlighted with a `[active]` marker so the user can see whether
+ * their selection will actually change anything.
+ *
+ * The list is windowed via {@link useWindowedPicker} so 15+ presets stay
+ * usable on small terminals — a top-aligned `…` marker appears when the
+ * focused row is below the start of the visible window.
+ */
+export declare function ThemePicker({ options, selected, activeId, hint, }: ThemePickerProps): React.ReactElement;
+//# sourceMappingURL=theme-picker.d.ts.map

package/dist/hooks/use-active-theme.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Subscribes to the module-scoped active theme so a render reads the
+ * current `theme` snapshot. Used by the App shell to force a re-render
+ * when `setActiveTheme()` mutates the global theme — child components
+ * read `theme` directly via destructuring, so the parent re-render
+ * propagates the new palette into the whole tree.
+ *
+ * The hook itself returns the live `theme` reference; callers don't
+ * typically need to use it (they can keep reading `theme` directly),
+ * but exposing it lets test code and stat panels introspect the active
+ * palette without re-implementing the listener.
+ */
+export declare function useActiveTheme(): import("../theme.js").Theme;
+//# sourceMappingURL=use-active-theme.d.ts.map

package/dist/hooks/use-app-picker-keys.d.ts

@@ -31,7 +31,8 @@ interface UseAppPickerKeysOptions {
     handleShadowStop: () => Promise<void>;
     statuslineHiddenForPicker: () => StatuslineItem[];
     onPickerEnter: () => Promise<void>;
+    onThemePickerEnter?: () => void;
 }
-export declare function useAppPickerKeys({ host, state, dispatch, environment, statusbar, panelControllers, authPanelController, brainController, lastEnterAtRef, inputGateRef, submitRef, promptUsageRef, setDraft, acceptSlashPickerSelection, changeBrainRisk, handleModelPicked, handleShadowStart, handleShadowStop, statuslineHiddenForPicker, onPickerEnter, }: UseAppPickerKeysOptions): (input: string, key: import("../components/input.js").KeyEvent, isEnter: boolean) => boolean;
+export declare function useAppPickerKeys({ host, state, dispatch, environment, statusbar, panelControllers, authPanelController, brainController, lastEnterAtRef, inputGateRef, submitRef, promptUsageRef, setDraft, acceptSlashPickerSelection, changeBrainRisk, handleModelPicked, handleShadowStart, handleShadowStop, statuslineHiddenForPicker, onPickerEnter, onThemePickerEnter, }: UseAppPickerKeysOptions): (input: string, key: import("../components/input.js").KeyEvent, isEnter: boolean) => boolean;
 export {};
 //# sourceMappingURL=use-app-picker-keys.d.ts.map

package/dist/hooks/use-picker-keys-types.d.ts

@@ -51,6 +51,13 @@ export interface PickerKeysHost {
     onShadowStop: (() => Promise<void> | void) | undefined;
     onFKeyPickerEnter: (() => void) | undefined;
     onPickerEnter: (() => Promise<void>) | undefined;
+    /**
+     * Enter-handler for the `/theme` picker. The key dispatcher delegates
+     * the apply step here so the parent can call `setActiveTheme()` and
+     * persist the choice to configStore. Optional — omitted hosts simply
+     * leave Enter as a no-op (the picker still navigates, just doesn't apply).
+     */
+    onThemePickerEnter?: (() => void) | undefined;
     onSlashPickerTab: (() => void) | undefined;
 }
 //# sourceMappingURL=use-picker-keys-types.d.ts.map

package/dist/hooks/use-theme-state.d.ts

@@ -0,0 +1,16 @@
+import type { ConfigStore } from '@wrongstack/core/types';
+/**
+ * Boot-time theme wiring: reads `config.themePreset` once on mount, applies it
+ * via `setActiveTheme()`, and subscribes to the live `ConfigStore` so any
+ * in-session update (e.g. from the REPL or a future hot-reload) is mirrored
+ * into the visible palette immediately.
+ *
+ * Falls back to the current preset (catppuccin at first mount) if the config
+ * has no `themePreset` set — that's the legacy behaviour for users without an
+ * explicit choice, and it makes the picker UI immediately meaningful on first
+ * run because the active row is highlighted.
+ */
+export declare function useThemeState({ configStore }: {
+    configStore: ConfigStore | undefined;
+}): void;
+//# sourceMappingURL=use-theme-state.d.ts.map

package/dist/hooks/use-windowed-picker.d.ts

@@ -0,0 +1,68 @@
+/**
+ * One shared viewport-windowing rule for the pickers that overlay the chat
+ * history (theme / autonomy / design / resume).
+ *
+ * Before this hook, every picker rendered every option as a static
+ * `<Box flexDirection="column">`. That was fine for autonomy's 5 options but
+ * started overflowing as soon as `/theme` carried 15 presets and `/resume`
+ * could list 30+ sessions. The pickers live inside the scrollable chat
+ * viewport — they share its row budget — so windowing has to be driven off
+ * `useTerminalSize` and per-picker chrome, not a hardcoded count.
+ *
+ * The hook returns the inclusive `start` and exclusive `end` of the visible
+ * slice plus `hasAbove` / `hasBelow` indicators the caller can render as
+ * `…` markers. When the caller moves `selected`, the next call re-centers
+ * the viewport on the new index — no imperative scroll needed.
+ */
+export interface UseWindowedPickerOptions {
+    /** Total option count. */
+    readonly total: number;
+    /** Currently focused option index. The window re-centers on this. */
+    readonly selected: number;
+    /** Rows each option consumes (resume-picker entries take 3 lines). */
+    readonly rowSpan?: number | undefined;
+    /**
+     * Rows the picker itself reserves around the list — top/bottom border,
+     * header, hint, padding. Defaults to 4 which matches the current
+     * `borderStyle="round"` + 2-line header pattern. Pass 0 for a naked list.
+     */
+    readonly chromeRows?: number | undefined;
+    /**
+     * Rows the surrounding app shell reserves — input bar + status bar + the
+     * scrollable history's own chrome. Defaults to 6, which covers the input
+     * bar (1), status bar (1), and a 4-row safety margin for header / hint /
+     * padding. Bump this if your caller knows it needs more breathing room.
+     */
+    readonly shellReservedRows?: number | undefined;
+    /** Minimum visible options even on a tiny terminal. Defaults to 3. */
+    readonly minVisible?: number | undefined;
+}
+export interface WindowedPickerSlice {
+    /** Inclusive start index of the visible window. */
+    readonly start: number;
+    /** Exclusive end index of the visible window. */
+    readonly end: number;
+    /** True when at least one option is hidden above `start`. */
+    readonly hasAbove: boolean;
+    /** True when at least one option is hidden below `end - 1`. */
+    readonly hasBelow: boolean;
+}
+/**
+ * Compute a windowed slice of a picker list. Pure given the inputs — the only
+ * "reactive" part is `useTerminalSize` so the window re-flows when the user
+ * resizes their terminal while a picker is open.
+ *
+ * Behavior contract:
+ *   - Visible count is `floor((rows - chrome) / rowSpan)`, clamped to
+ *     `[minVisible, total]`. A 1-row terminal always shows at least
+ *     `minVisible` options even if that overflows — better to bleed than to
+ *     hide the focused row.
+ *   - The window stays centered on `selected` once the picker is past the
+ *     first page; on the first page it stays top-aligned so the user sees
+ *     the list start. `selected < 0 || selected >= total` is treated as no
+ *     focus and the window anchors to index 0.
+ *   - Empty / single-option lists always render `[0, total)` with both
+ *     `hasAbove` and `hasBelow` false.
+ */
+export declare function useWindowedPicker({ total, selected, rowSpan, chromeRows, shellReservedRows, minVisible, }: UseWindowedPickerOptions): WindowedPickerSlice;
+//# sourceMappingURL=use-windowed-picker.d.ts.map