@elizaos/ui 2.0.0-beta.2 → 2.0.3-beta.3

package/components/shell/__e2e__/home-screen-fixture.platform-stub.js

@@ -0,0 +1,6 @@
+export function getActiveViewModality() {
+    return "gui";
+}
+export function getFrontendPlatform() {
+    return "web";
+}

package/components/shell/__e2e__/home-screen-fixture.view-kinds-stub.d.ts

@@ -0,0 +1,5 @@
+export declare function useEnabledViewKinds(): {
+    developer: boolean;
+    preview: boolean;
+};
+//# sourceMappingURL=home-screen-fixture.view-kinds-stub.d.ts.map

package/components/shell/__e2e__/home-screen-fixture.view-kinds-stub.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"home-screen-fixture.view-kinds-stub.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/shell/__e2e__/home-screen-fixture.view-kinds-stub.ts"],"names":[],"mappings":"AAAA,wBAAgB,mBAAmB;;;EAElC"}

package/components/shell/__e2e__/home-screen-fixture.view-kinds-stub.js

@@ -0,0 +1,3 @@
+export function useEnabledViewKinds() {
+    return { developer: true, preview: true };
+}

package/components/shell/__e2e__/home-screen-fixture.views-stub.d.ts

@@ -0,0 +1,15 @@
+import type { ViewRegistryEntry } from "../../../hooks/useAvailableViews.js";
+export declare function useAvailableViews(): {
+    views: {
+        id: string;
+        path: string;
+    }[];
+    loading: boolean;
+};
+export declare function useRoutableViews(): {
+    views: ViewRegistryEntry[];
+    loading: boolean;
+    error: null;
+    refresh: () => void;
+};
+//# sourceMappingURL=home-screen-fixture.views-stub.d.ts.map

package/components/shell/__e2e__/home-screen-fixture.views-stub.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"home-screen-fixture.views-stub.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/shell/__e2e__/home-screen-fixture.views-stub.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAC;AAE1E,wBAAgB,iBAAiB;;;;;;EAShC;AA2DD,wBAAgB,gBAAgB;;;;;EAuB/B"}

package/components/shell/__e2e__/home-screen-fixture.views-stub.js

@@ -0,0 +1,78 @@
+export function useAvailableViews() {
+    return {
+        views: [
+            { id: "orchestrator", path: "/orchestrator" },
+            { id: "automations", path: "/automations" },
+            { id: "inbox", path: "/inbox" },
+        ],
+        loading: false,
+    };
+}
+function builtinView(id, label, path, icon, visibleInManager = false, heroImageUrl) {
+    return {
+        id,
+        label,
+        path,
+        icon,
+        viewType: "gui",
+        available: true,
+        pluginName: "@elizaos/builtin",
+        builtin: true,
+        // Non-system views must be manager-visible to appear in the springboard
+        // grid (system ids like settings/files/tasks are exempt from that gate).
+        visibleInManager,
+        viewKind: "release",
+        // A real hero image (the agent serves a branded SVG at /api/views/:id/hero
+        // on device). Provided as an inline data-URI here so the file:// e2e renders
+        // the actual <img> tile path — proving the springboard shows real image
+        // icons, not the glyph fallback.
+        ...(heroImageUrl
+            ? { hasHeroImage: true, heroImageUrl }
+            : {}),
+    };
+}
+/** A distinct branded-tile data-URI hero (gradient square), keyed by hue. */
+function heroDataUri(hue) {
+    const svg = `<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'>` +
+        `<defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'>` +
+        `<stop offset='0' stop-color='hsl(${hue} 72% 56%)'/>` +
+        `<stop offset='1' stop-color='hsl(${(hue + 38) % 360} 70% 42%)'/>` +
+        `</linearGradient></defs>` +
+        `<rect width='64' height='64' fill='url(#g)'/>` +
+        `<circle cx='44' cy='20' r='22' fill='#ffffff' opacity='0.18'/>` +
+        `</svg>`;
+    return `data:image/svg+xml,${encodeURIComponent(svg)}`;
+}
+// A roster big enough to fill TWO springboard pages (page size 20). The four
+// dock favorites (settings/activity/files/tasks) pin to the dock; the rest pack
+// into the page grid, so the springboard has 2 pages — which is what makes the
+// doubled-dots regression observable (a single page never rendered inner dots),
+// and gives the icon-distinctness check real, varied glyphs to compare.
+const GRID_ICONS = [
+    "Inbox", "Mail", "CalendarDays", "Heart", "Target", "Network",
+    "Database", "Terminal", "Wallet", "ShoppingBag", "Rss", "Bot",
+    "BrainCircuit", "Monitor", "Radio", "ScrollText", "Globe", "Plug",
+    "Sparkles", "Phone", "Users", "ImageIcon",
+];
+export function useRoutableViews() {
+    const gridViews = GRID_ICONS.map((icon, i) => builtinView(`app${i}`, `App ${i}`, `/apps/app${i}`, icon, true));
+    return {
+        views: [
+            // chat/views are filtered out of the springboard (self-links) — kept so
+            // the e2e can assert their ABSENCE.
+            builtinView("chat", "Chat", "/chat"),
+            builtinView("views", "Views", "/views"),
+            // Dock favorites — real branded hero IMAGES (the agent serves these on
+            // device); rendered as <img> tiles, proving the springboard shows real
+            // image icons, not the glyph fallback (task: real image icons).
+            builtinView("settings", "Settings", "/settings", "Settings", false, heroDataUri(28)),
+            builtinView("activity", "Activity", "/activity", "Activity", true, heroDataUri(150)),
+            builtinView("files", "Files", "/apps/files", "FolderClosed", false, heroDataUri(210)),
+            builtinView("tasks", "Tasks", "/apps/tasks", "ListTodo", false, heroDataUri(280)),
+            ...gridViews,
+        ],
+        loading: false,
+        error: null,
+        refresh: () => { },
+    };
+}

package/components/shell/__e2e__/usePromptSuggestions.stub.d.ts

@@ -0,0 +1,2 @@
+export declare function usePromptSuggestions(): string[];
+//# sourceMappingURL=usePromptSuggestions.stub.d.ts.map

package/components/shell/__e2e__/usePromptSuggestions.stub.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePromptSuggestions.stub.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/shell/__e2e__/usePromptSuggestions.stub.ts"],"names":[],"mappings":"AAIA,wBAAgB,oBAAoB,IAAI,MAAM,EAAE,CAM/C"}

package/components/shell/__e2e__/usePromptSuggestions.stub.js

@@ -0,0 +1,11 @@
+// Browser-pure stand-in for usePromptSuggestions in the e2e bundle. The real
+// hook reaches the API client (which drags in Node-only deps at bundle time and
+// only matters for the small-model fetch). The harness just needs the static
+// strip, so return three fixed prompts.
+export function usePromptSuggestions() {
+    return [
+        "what's on my plate today?",
+        "summarize this view",
+        "draft a quick note",
+    ];
+}

package/components/shell/first-run-theme.d.ts

@@ -0,0 +1,6 @@
+import type { CSSProperties } from "react";
+import type { FirstRunThemeConfig } from "../../config/branding.js";
+type FirstRunCssVars = CSSProperties & Record<`--${string}`, string>;
+export declare function getFirstRunThemeVars(theme: FirstRunThemeConfig | undefined): FirstRunCssVars;
+export {};
+//# sourceMappingURL=first-run-theme.d.ts.map

package/components/shell/first-run-theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"first-run-theme.d.ts","sourceRoot":"","sources":["../../../../../../src/components/shell/first-run-theme.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAEjE,KAAK,eAAe,GAAG,aAAa,GAAG,MAAM,CAAC,KAAK,MAAM,EAAE,EAAE,MAAM,CAAC,CAAC;AAkBrE,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,mBAAmB,GAAG,SAAS,GACrC,eAAe,CAejB"}

package/components/shell/first-run-theme.js

@@ -0,0 +1,31 @@
+const DEFAULT_FIRST_RUN_THEME = {
+    // Brand rule (#8796): no blue. Near-black background with the orange button +
+    // white text is the on-brand first-run look (orange/black/white).
+    background: "#0b0e11",
+    foreground: "#ffffff",
+    mutedForeground: "rgba(255, 255, 255, 0.78)",
+    controlBackground: "rgba(255, 255, 255, 0.18)",
+    controlForeground: "#ffffff",
+    buttonBackground: "#ff8a24",
+    buttonForeground: "#fff7ee",
+    buttonHighlightBackground: "#fff7ee",
+    inputBackground: "rgba(255, 255, 255, 0.92)",
+    inputForeground: "#06131f",
+    errorForeground: "#fff0e8",
+};
+export function getFirstRunThemeVars(theme) {
+    const resolved = { ...DEFAULT_FIRST_RUN_THEME, ...theme };
+    return {
+        "--first-run-bg": resolved.background,
+        "--first-run-fg": resolved.foreground,
+        "--first-run-muted": resolved.mutedForeground,
+        "--first-run-control-bg": resolved.controlBackground,
+        "--first-run-control-fg": resolved.controlForeground,
+        "--first-run-button-bg": resolved.buttonBackground,
+        "--first-run-button-fg": resolved.buttonForeground,
+        "--first-run-button-highlight": resolved.buttonHighlightBackground,
+        "--first-run-input-bg-flat": resolved.inputBackground,
+        "--first-run-input-fg-flat": resolved.inputForeground,
+        "--first-run-error": resolved.errorForeground,
+    };
+}

package/components/shell/glass-composer.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+export declare function GlassIconButton({ icon, label, disabled, active, onClick, onPointerDown, onPointerUp, onPointerCancel, }: {
+    icon: "mic" | "send";
+    label: string;
+    disabled?: boolean;
+    /** Mic only: reflects recording state (adds a pulse + aria-pressed). */
+    active?: boolean;
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    onPointerDown?: (event: React.PointerEvent<HTMLButtonElement>) => void;
+    onPointerUp?: (event: React.PointerEvent<HTMLButtonElement>) => void;
+    onPointerCancel?: (event: React.PointerEvent<HTMLButtonElement>) => void;
+}): React.JSX.Element;
+//# sourceMappingURL=glass-composer.d.ts.map

package/components/shell/glass-composer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"glass-composer.d.ts","sourceRoot":"","sources":["../../../../../../src/components/shell/glass-composer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA4B/B,wBAAgB,eAAe,CAAC,EAC9B,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,MAAM,EACN,OAAO,EACP,aAAa,EACb,WAAW,EACX,eAAe,GAChB,EAAE;IACD,IAAI,EAAE,KAAK,GAAG,MAAM,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wEAAwE;IACxE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC/D,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACvE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACrE,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CAC1E,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAuDpB"}

package/components/shell/glass-composer.helpers.d.ts

@@ -0,0 +1,3 @@
+/** Class for the composer bar — translucent, edge-highlighted; no plain borders. */
+export declare const GLASS_COMPOSER_CLASS = "flex items-center gap-1.5 rounded-[6px] border border-txt/15 bg-txt/10 p-1.5";
+//# sourceMappingURL=glass-composer.helpers.d.ts.map

package/components/shell/glass-composer.helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"glass-composer.helpers.d.ts","sourceRoot":"","sources":["../../../../../../src/components/shell/glass-composer.helpers.ts"],"names":[],"mappings":"AAAA,oFAAoF;AACpF,eAAO,MAAM,oBAAoB,iFAC+C,CAAC"}

package/components/shell/glass-composer.helpers.js

@@ -0,0 +1,2 @@
+/** Class for the composer bar — translucent, edge-highlighted; no plain borders. */
+export const GLASS_COMPOSER_CLASS = "flex items-center gap-1.5 rounded-[6px] border border-txt/15 bg-txt/10 p-1.5";

package/components/shell/glass-composer.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils.js";
+/**
+ * Shared chat-composer chrome: a well-defined refractive-glass bar plus
+ * xs-cornered white "negative-space" icon buttons (the glyph is cut OUT of the
+ * white so the glass/background shows through it, matching the negative-space
+ * face art). Used by both the homescreen composer and the overlay ChatSurface
+ * so the mic and send controls read as one consistent set.
+ *
+ * The bar class lives in {@link ./glass-composer.helpers}.
+ */
+// xs-cornered button rect + filled glyphs, combined under fillRule=evenodd so
+// the glyph becomes a transparent hole in the white button.
+const BTN_RECT = "M6 0H30A6 6 0 0 1 36 6V30A6 6 0 0 1 30 36H6A6 6 0 0 1 0 30V6A6 6 0 0 1 6 0Z";
+// Up arrow — shaft + head, pointing up (send).
+const SEND_GLYPH = "M18 10L25 18H21V27H15V18H11Z";
+// Five-bar waveform — tallest in the center, like OpenAI's voice indicator.
+const MIC_GLYPH = "M6 14H9V22H6Z" +
+    "M11.5 10H14.5V26H11.5Z" +
+    "M16.5 7H19.5V29H16.5Z" +
+    "M22 10H25V26H22Z" +
+    "M27 14H30V22H27Z";
+export function GlassIconButton({ icon, label, disabled, active, onClick, onPointerDown, onPointerUp, onPointerCancel, }) {
+    const pointerActivatedRef = React.useRef(false);
+    const handleClick = React.useCallback((event) => {
+        if (pointerActivatedRef.current) {
+            pointerActivatedRef.current = false;
+            return;
+        }
+        onClick?.(event);
+    }, [onClick]);
+    const handleMouseDown = React.useCallback((event) => {
+        if (onPointerDown || onPointerUp || !onClick)
+            return;
+        pointerActivatedRef.current = true;
+        onClick(event);
+        window.setTimeout(() => {
+            pointerActivatedRef.current = false;
+        }, 0);
+    }, [onClick, onPointerDown, onPointerUp]);
+    return (_jsx("button", { type: "button", "aria-label": label, "aria-pressed": icon === "mic" ? active : undefined, disabled: disabled, onClick: handleClick, onPointerDown: onPointerDown, onPointerUp: onPointerUp, onPointerCancel: onPointerCancel, onMouseDown: handleMouseDown, className: cn("grid h-9 w-9 shrink-0 place-items-center transition-transform", "   ", disabled ? "opacity-40" : "hover:scale-105", active && "animate-pulse"), children: _jsx("svg", { viewBox: "0 0 36 36", className: "pointer-events-none h-full w-full", "aria-hidden": "true", children: _jsx("path", { fill: "#ffffff", fillRule: "evenodd", d: `${BTN_RECT}${icon === "mic" ? MIC_GLYPH : SEND_GLYPH}` }) }) }));
+}

package/components/shell/home-springboard-events.d.ts

@@ -0,0 +1,7 @@
+export declare const HOME_SPRINGBOARD_NAV_EVENT = "eliza:home-springboard:navigate";
+export type HomeSpringboardPage = "home" | "springboard";
+export interface HomeSpringboardNavigationDetail {
+    page: HomeSpringboardPage;
+}
+export declare function dispatchHomeSpringboardNavigation(page: HomeSpringboardPage): void;
+//# sourceMappingURL=home-springboard-events.d.ts.map

package/components/shell/home-springboard-events.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"home-springboard-events.d.ts","sourceRoot":"","sources":["../../../../../../src/components/shell/home-springboard-events.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,0BAA0B,oCAAoC,CAAC;AAE5E,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,aAAa,CAAC;AAEzD,MAAM,WAAW,+BAA+B;IAC9C,IAAI,EAAE,mBAAmB,CAAC;CAC3B;AAED,wBAAgB,iCAAiC,CAC/C,IAAI,EAAE,mBAAmB,GACxB,IAAI,CAQN"}

package/components/shell/home-springboard-events.js

@@ -0,0 +1,6 @@
+export const HOME_SPRINGBOARD_NAV_EVENT = "eliza:home-springboard:navigate";
+export function dispatchHomeSpringboardNavigation(page) {
+    if (typeof window === "undefined")
+        return;
+    window.dispatchEvent(new CustomEvent(HOME_SPRINGBOARD_NAV_EVENT, { detail: { page } }));
+}

package/components/shell/shell-state.d.ts

@@ -0,0 +1,48 @@
+import type { ChatFailureKind, ConversationSecretRequest, MessageAttachment } from "../../api/index.js";
+/**
+ * Shell phase for the device-shell foundation (HomePill + AssistantOverlay +
+ * ChatSurface). Drives the pill's visual treatment.
+ *
+ *   booting    — startup not ready; pill dim, no halo.
+ *   idle       — ready, no overlay; pill solid.
+ *   summoned   — overlay open, no active mic/response; faint halo.
+ *   listening  — push-to-talk capture in flight; red pulse.
+ *   responding — agent stream in flight; ambient glow.
+ */
+export type ShellPhase = "booting" | "idle" | "summoned" | "listening" | "responding";
+export interface ShellMessage {
+    id: string;
+    role: "user" | "assistant";
+    content: string;
+    createdAt: number;
+    /** Set on assistant turns the server flagged as failed (e.g. no provider). */
+    failureKind?: ChatFailureKind;
+    /** Agent reasoning/thought for this turn, rendered as a collapsed block. */
+    reasoning?: string;
+    /** Media attached to this turn — user uploads and agent-generated media. */
+    attachments?: MessageAttachment[];
+    /** Pending secret / OAuth request (rendered as an actionable block). */
+    secretRequest?: ConversationSecretRequest;
+    /**
+     * Short topic labels for this turn (Stage-1 `topics`). Drives the transcript
+     * topic grouping + chips bar (#8928). Absent when the turn had no topic.
+     */
+    topics?: string[];
+}
+/**
+ * Max chat turns actually rendered in the shell transcript. Older turns stay in
+ * state (the agent's context is untouched) — this only bounds DOM nodes so a
+ * long thread can't jank scrolling, without pulling in a virtualizer. Gap 4 of
+ * #9141 (transcript windowing) builds on this seam.
+ */
+export declare const MAX_RENDERED_SHELL_MESSAGES = 80;
+/**
+ * Pure transcript-windowing decision (#9141 gap 4 seam). Drops empty turns —
+ * EXCEPT the in-flight assistant turn while a reply is streaming (phase ===
+ * "responding"), so its bubble can show the breathing dots anchored where the
+ * text will fill in — then keeps only the most recent `max` turns to bound DOM
+ * nodes. Pure + DOM-free so the cap + streaming-turn exception are unit-testable
+ * and any future virtualizer can reuse the same predicate.
+ */
+export declare function selectVisibleShellMessages(messages: readonly ShellMessage[], phase: ShellPhase, max?: number): ShellMessage[];
+//# sourceMappingURL=shell-state.d.ts.map

package/components/shell/shell-state.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shell-state.d.ts","sourceRoot":"","sources":["../../../../../../src/components/shell/shell-state.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,eAAe,EACf,yBAAyB,EACzB,iBAAiB,EAClB,MAAM,WAAW,CAAC;AAEnB;;;;;;;;;GASG;AACH,MAAM,MAAM,UAAU,GAClB,SAAS,GACT,MAAM,GACN,UAAU,GACV,WAAW,GACX,YAAY,CAAC;AAEjB,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,GAAG,WAAW,CAAC;IAC3B,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,8EAA8E;IAC9E,WAAW,CAAC,EAAE,eAAe,CAAC;IAC9B,4EAA4E;IAC5E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4EAA4E;IAC5E,WAAW,CAAC,EAAE,iBAAiB,EAAE,CAAC;IAClC,wEAAwE;IACxE,aAAa,CAAC,EAAE,yBAAyB,CAAC;IAC1C;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;CACnB;AAED;;;;;GAKG;AACH,eAAO,MAAM,2BAA2B,KAAK,CAAC;AAE9C;;;;;;;GAOG;AACH,wBAAgB,0BAA0B,CACxC,QAAQ,EAAE,SAAS,YAAY,EAAE,EACjC,KAAK,EAAE,UAAU,EACjB,GAAG,GAAE,MAAoC,GACxC,YAAY,EAAE,CAMhB"}

package/components/shell/shell-state.js

@@ -0,0 +1,19 @@
+/**
+ * Max chat turns actually rendered in the shell transcript. Older turns stay in
+ * state (the agent's context is untouched) — this only bounds DOM nodes so a
+ * long thread can't jank scrolling, without pulling in a virtualizer. Gap 4 of
+ * #9141 (transcript windowing) builds on this seam.
+ */
+export const MAX_RENDERED_SHELL_MESSAGES = 80;
+/**
+ * Pure transcript-windowing decision (#9141 gap 4 seam). Drops empty turns —
+ * EXCEPT the in-flight assistant turn while a reply is streaming (phase ===
+ * "responding"), so its bubble can show the breathing dots anchored where the
+ * text will fill in — then keeps only the most recent `max` turns to bound DOM
+ * nodes. Pure + DOM-free so the cap + streaming-turn exception are unit-testable
+ * and any future virtualizer can reuse the same predicate.
+ */
+export function selectVisibleShellMessages(messages, phase, max = MAX_RENDERED_SHELL_MESSAGES) {
+    const kept = messages.filter((m) => m.content.trim() || (m.role === "assistant" && phase === "responding"));
+    return max > 0 && kept.length > max ? kept.slice(-max) : [...kept];
+}

package/components/shell/startup-shell-types.d.ts

@@ -0,0 +1,25 @@
+import type { ReactNode } from "react";
+import type { StartupErrorState } from "../../state/types.js";
+export type StartupShellView = {
+    kind: "error";
+    error: StartupErrorState;
+} | {
+    kind: "pairing";
+} | {
+    kind: "bootstrap";
+    onAdvance: () => void;
+} | {
+    kind: "first-run";
+} | {
+    kind: "loading";
+    phase: string;
+    status: string;
+} | {
+    kind: "none";
+};
+export interface StartupShellProps {
+    view: StartupShellView;
+    firstRun: ReactNode;
+    onRetry: () => void;
+}
+//# sourceMappingURL=startup-shell-types.d.ts.map

package/components/shell/startup-shell-types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"startup-shell-types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/shell/startup-shell-types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAE3D,MAAM,MAAM,gBAAgB,GACxB;IAAE,IAAI,EAAE,OAAO,CAAC;IAAC,KAAK,EAAE,iBAAiB,CAAA;CAAE,GAC3C;IAAE,IAAI,EAAE,SAAS,CAAA;CAAE,GACnB;IAAE,IAAI,EAAE,WAAW,CAAC;IAAC,SAAS,EAAE,MAAM,IAAI,CAAA;CAAE,GAC5C;IAAE,IAAI,EAAE,WAAW,CAAA;CAAE,GACrB;IAAE,IAAI,EAAE,SAAS,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,GAClD;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC;AAErB,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,gBAAgB,CAAC;IACvB,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB"}

package/components/shell/startup-shell-types.js

@@ -0,0 +1 @@
+export {};

package/components/shell/topic-grouping.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Topic grouping for the chat transcript (#8928).
+ *
+ * Turns a flat message list into topic-clustered segments using the per-message
+ * `topics` stamped at Stage-1 (see `MessageMetadata.topics`). A message's
+ * dominant topic is its first label; a new segment begins when that dominant
+ * topic changes (the "topic break"). Messages with no topic inherit the current
+ * segment so the transcript never fragments on every untagged turn.
+ *
+ * Pure logic — the overlay/ChatView render the segments and a topic chips bar;
+ * this module is unit-testable in isolation.
+ */
+/** Minimal shape the grouping needs from a message. */
+export interface TopicTaggedMessage {
+    id: string;
+    topics?: string[];
+}
+/** A contiguous run of messages sharing a dominant topic. */
+export interface TopicSegment<T extends TopicTaggedMessage> {
+    /** Stable key for collapse state — the topic, or the first message id. */
+    key: string;
+    /** Dominant topic label, or null for an untitled leading run. */
+    topic: string | null;
+    messages: T[];
+}
+/** Maximum chips rendered in the topic bar before the rest are summarized. */
+export declare const MAX_TOPIC_CHIPS = 12;
+/**
+ * Group consecutive messages into topic segments. A new segment starts when a
+ * message's dominant topic differs from the current segment's topic; untagged
+ * messages extend the current segment.
+ */
+export declare function groupMessagesByTopic<T extends TopicTaggedMessage>(messages: readonly T[]): TopicSegment<T>[];
+/**
+ * Distinct channel topics across the transcript for the chips bar, ordered
+ * most-recent first, capped at {@link MAX_TOPIC_CHIPS}.
+ */
+export declare function deriveChannelTopics(messages: readonly TopicTaggedMessage[]): string[];
+//# sourceMappingURL=topic-grouping.d.ts.map

package/components/shell/topic-grouping.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"topic-grouping.d.ts","sourceRoot":"","sources":["../../../../../../src/components/shell/topic-grouping.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,uDAAuD;AACvD,MAAM,WAAW,kBAAkB;IACjC,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;CACnB;AAED,6DAA6D;AAC7D,MAAM,WAAW,YAAY,CAAC,CAAC,SAAS,kBAAkB;IACxD,0EAA0E;IAC1E,GAAG,EAAE,MAAM,CAAC;IACZ,iEAAiE;IACjE,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,QAAQ,EAAE,CAAC,EAAE,CAAC;CACf;AAED,8EAA8E;AAC9E,eAAO,MAAM,eAAe,KAAK,CAAC;AAWlC;;;;GAIG;AACH,wBAAgB,oBAAoB,CAAC,CAAC,SAAS,kBAAkB,EAC/D,QAAQ,EAAE,SAAS,CAAC,EAAE,GACrB,YAAY,CAAC,CAAC,CAAC,EAAE,CA2BnB;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,CACjC,QAAQ,EAAE,SAAS,kBAAkB,EAAE,GACtC,MAAM,EAAE,CAiBV"}

package/components/shell/topic-grouping.js

@@ -0,0 +1,81 @@
+/**
+ * Topic grouping for the chat transcript (#8928).
+ *
+ * Turns a flat message list into topic-clustered segments using the per-message
+ * `topics` stamped at Stage-1 (see `MessageMetadata.topics`). A message's
+ * dominant topic is its first label; a new segment begins when that dominant
+ * topic changes (the "topic break"). Messages with no topic inherit the current
+ * segment so the transcript never fragments on every untagged turn.
+ *
+ * Pure logic — the overlay/ChatView render the segments and a topic chips bar;
+ * this module is unit-testable in isolation.
+ */
+/** Maximum chips rendered in the topic bar before the rest are summarized. */
+export const MAX_TOPIC_CHIPS = 12;
+function dominantTopic(message) {
+    const topics = message.topics;
+    if (!Array.isArray(topics))
+        return null;
+    for (const topic of topics) {
+        if (typeof topic === "string" && topic.trim())
+            return topic.trim();
+    }
+    return null;
+}
+/**
+ * Group consecutive messages into topic segments. A new segment starts when a
+ * message's dominant topic differs from the current segment's topic; untagged
+ * messages extend the current segment.
+ */
+export function groupMessagesByTopic(messages) {
+    const segments = [];
+    for (const message of messages) {
+        const topic = dominantTopic(message);
+        const last = segments[segments.length - 1];
+        // Start a new segment on the first message, or when a tagged message
+        // introduces a different dominant topic than the current TITLED segment.
+        // A leading untitled run (last.topic === null) instead adopts the topic.
+        if (!last ||
+            (topic !== null && last.topic !== null && topic !== last.topic)) {
+            segments.push({
+                key: topic ?? `untitled-${message.id}`,
+                topic,
+                messages: [message],
+            });
+            continue;
+        }
+        last.messages.push(message);
+        // An untitled leading segment adopts the first topic it encounters.
+        if (last.topic === null && topic !== null) {
+            last.topic = topic;
+            last.key = topic;
+        }
+    }
+    return segments;
+}
+/**
+ * Distinct channel topics across the transcript for the chips bar, ordered
+ * most-recent first, capped at {@link MAX_TOPIC_CHIPS}.
+ */
+export function deriveChannelTopics(messages) {
+    const seen = new Set();
+    const ordered = [];
+    // Walk newest → oldest so the most recent topics lead.
+    for (let i = messages.length - 1; i >= 0; i -= 1) {
+        const topics = messages[i]?.topics;
+        if (!Array.isArray(topics))
+            continue;
+        for (const raw of topics) {
+            if (typeof raw !== "string")
+                continue;
+            const topic = raw.trim();
+            if (!topic || seen.has(topic))
+                continue;
+            seen.add(topic);
+            ordered.push(topic);
+            if (ordered.length >= MAX_TOPIC_CHIPS)
+                return ordered;
+        }
+    }
+    return ordered;
+}

package/components/shell/use-conversation-reset.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Shared "reset the conversation" action.
+ *
+ * Resets to a fresh greeted thread via the existing `handleNewConversation`
+ * path. A non-empty previous conversation is kept (it stays swipe-reachable);
+ * only an empty draft we just left is pruned, so resets don't pile up orphan
+ * conversations.
+ *
+ * Used by the main ChatView reset button; the overlay header reset routes
+ * through `useShellController.clearConversation`, which calls the same
+ * `handleNewConversation` so the behavior is identical everywhere.
+ */
+export declare function useConversationReset(): () => void;
+//# sourceMappingURL=use-conversation-reset.d.ts.map

package/components/shell/use-conversation-reset.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-conversation-reset.d.ts","sourceRoot":"","sources":["../../../../../../src/components/shell/use-conversation-reset.ts"],"names":[],"mappings":"AAGA;;;;;;;;;;;GAWG;AACH,wBAAgB,oBAAoB,IAAI,MAAM,IAAI,CAWjD"}

package/components/shell/use-conversation-reset.js

@@ -0,0 +1,25 @@
+import * as React from "react";
+import { useAppSelectorShallow } from "../../state/index.js";
+/**
+ * Shared "reset the conversation" action.
+ *
+ * Resets to a fresh greeted thread via the existing `handleNewConversation`
+ * path. A non-empty previous conversation is kept (it stays swipe-reachable);
+ * only an empty draft we just left is pruned, so resets don't pile up orphan
+ * conversations.
+ *
+ * Used by the main ChatView reset button; the overlay header reset routes
+ * through `useShellController.clearConversation`, which calls the same
+ * `handleNewConversation` so the behavior is identical everywhere.
+ */
+export function useConversationReset() {
+    // Granular shallow selector instead of useApp() so this hook only re-renders
+    // when the one field it reads changes, not on every app-store field update
+    // (#9141 gap 2 — useApp() → useAppSelector migration).
+    const { handleNewConversation } = useAppSelectorShallow((s) => ({
+        handleNewConversation: s.handleNewConversation,
+    }));
+    return React.useCallback(() => {
+        void handleNewConversation();
+    }, [handleNewConversation]);
+}

package/components/shell/use-pull-gesture.d.ts

@@ -0,0 +1,69 @@
+import * as React from "react";
+/**
+ * Pull/flick + swipe gesture detection for the homescreen shell.
+ *
+ * Drives the Claude/Whisper-Flow-style interactions: pull UP on the homescreen
+ * to reveal the chat, pull DOWN (or flick up on the voice overlay) to dismiss.
+ * Optionally also detects horizontal swipes (left/right) for navigating between
+ * conversations when the sheet is open. Pure pointer-event logic — bind the
+ * returned handlers to any element. A gesture fires on release when it crosses
+ * either a distance OR a velocity threshold, so both deliberate drags and quick
+ * flicks register.
+ *
+ * Axis lock: the gesture commits to a single axis (vertical OR horizontal) once
+ * movement crosses {@link AXIS_COMMIT_SLOP}px, so a horizontal swipe never
+ * fights the vertical pull and vice-versa. Pointer capture is deferred until
+ * commit, so a vertical scroll inside a horizontally-swipeable panel still
+ * scrolls natively (we only capture once the user clearly means to swipe).
+ */
+export interface PullGestureOptions {
+    /** Released after a drag/flick UP past threshold. */
+    onPullUp?: () => void;
+    /** Released after a drag/flick DOWN past threshold. */
+    onPullDown?: () => void;
+    /** Live vertical drag offset while pressed, in px. Positive = dragging up. */
+    onDrag?: (offset: number) => void;
+    /** Released after a horizontal swipe LEFT past threshold. */
+    onSwipeLeft?: () => void;
+    /** Released after a horizontal swipe RIGHT past threshold. */
+    onSwipeRight?: () => void;
+    /** Live horizontal drag offset while pressed, in px. Positive = dragging left. */
+    onDragX?: (offset: number) => void;
+    /** A near-stationary press/release — a tap, not a pull. */
+    onTap?: () => void;
+    /**
+     * A deliberate (slow) drag released without passing the flick/distance
+     * threshold. When provided, the gesture rests exactly where released
+     * (the consumer keeps the live offset) instead of snapping back.
+     */
+    onSettleFree?: (direction: "up" | "down") => void;
+    /** Minimum vertical travel (px) to count as a pull. Default 56. */
+    distanceThreshold?: number;
+    /** Minimum vertical speed (px/ms) to count as a flick. Default 0.5. */
+    velocityThreshold?: number;
+    /** Minimum horizontal travel (px) to count as a swipe. Default 64. */
+    distanceThresholdX?: number;
+    /** Minimum horizontal speed (px/ms) to count as a swipe flick. Default 0.4. */
+    velocityThresholdX?: number;
+}
+export interface PullGestureBinding {
+    onPointerDown: (event: React.PointerEvent) => void;
+    onPointerMove: (event: React.PointerEvent) => void;
+    onPointerUp: (event: React.PointerEvent) => void;
+    onPointerCancel: (event: React.PointerEvent) => void;
+    /** The OS can revoke pointer capture without a pointerup/pointercancel — most
+     *  notably on device ROTATION, which otherwise strands the gesture mid-drag
+     *  (the consumer's morph freezes). Treat it as a release so the sheet settles. */
+    onLostPointerCapture: (event: React.PointerEvent) => void;
+}
+/** Decide whether a release should fire a pull, and in which direction. */
+export declare function resolvePull(deltaUp: number, velocityUp: number, distanceThreshold: number, velocityThreshold: number): "up" | "down" | null;
+/**
+ * Decide whether a release should fire a horizontal swipe, and in which
+ * direction. Requires horizontal dominance over the vertical travel so a
+ * mostly-vertical drag never registers as a swipe. `deltaLeft` is positive when
+ * the finger moved LEFT.
+ */
+export declare function resolveSwipe(deltaLeft: number, velocityLeft: number, deltaUp: number, distanceThresholdX: number, velocityThresholdX: number): "left" | "right" | null;
+export declare function usePullGesture(options: PullGestureOptions): PullGestureBinding;
+//# sourceMappingURL=use-pull-gesture.d.ts.map