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

package/components/shell/__e2e__/chat-sheet-fixture.js

@@ -0,0 +1,264 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Self-contained fixture for the pull-up chat-sheet e2e. Mounts the real
+// ContinuousChatOverlay with a stateful mock controller over a fake "view"
+// background, so a headless browser can drive real drag gestures and capture
+// styled screenshots without an app server. Paired with run-chat-sheet-e2e.mjs.
+import * as React from "react";
+import { createRoot } from "react-dom/client";
+import { ContinuousChatOverlay } from "../ContinuousChatOverlay.js";
+let nextId = 100;
+const uid = () => `m${nextId++}`;
+const SEED = [
+    { id: "m1", role: "user", content: "what's the plan for today?", createdAt: 1 },
+    {
+        id: "m2",
+        role: "assistant",
+        content: "Three things: ship the chat-sheet redesign, review the screenshots, then wire the drag e2e. Want me to start on the first?",
+        createdAt: 2,
+    },
+    { id: "m3", role: "user", content: "yes, and keep the input fixed", createdAt: 3 },
+    {
+        id: "m4",
+        role: "assistant",
+        content: "Done — the composer stays pinned at the bottom; the history pulls up over it and you pull the grabber back down to close.",
+        createdAt: 4,
+    },
+    { id: "m5", role: "user", content: "nice. show me the open state", createdAt: 5 },
+    {
+        id: "m6",
+        role: "assistant",
+        content: "Pull up anywhere on the sheet (or just start typing) and it springs open into the full transcript.",
+        createdAt: 6,
+    },
+    { id: "m7", role: "user", content: "what closes it?", createdAt: 7 },
+    {
+        id: "m8",
+        role: "assistant",
+        content: "Drag the grabber at the top back down, or press Escape. Clicking the view behind does nothing — it stays open until you pull it down.",
+        createdAt: 8,
+    },
+    { id: "m9", role: "user", content: "and the input?", createdAt: 9 },
+    {
+        id: "m10",
+        role: "assistant",
+        content: "The composer is pinned at the very bottom and never moves; the history slides up over it. The latest line always sits just above the input.",
+        createdAt: 10,
+    },
+    { id: "m11", role: "user", content: "great, this scrolls now right?", createdAt: 11 },
+    {
+        id: "m12",
+        role: "assistant",
+        content: "Yes — once the transcript is taller than the open sheet it scrolls, and the newest line stays pinned at the bottom. This thread is intentionally long so the open state has history to scroll through.",
+        createdAt: 12,
+    },
+];
+// Every controller state the harness needs to screenshot is seeded from URL
+// params so each state is a deterministic page load: `?empty`, `?phase=booting`
+// (also listening/responding/summoned), `?recording`, `?transcript=…`,
+// `?speaking`, `?muted`, `?nosend` (canSend=false). The toggles below stay live
+// so interactive flows (mic press, voice mute) still work from the default page.
+const params = typeof location !== "undefined"
+    ? new URLSearchParams(location.search)
+    : new URLSearchParams();
+const startEmpty = params.has("empty");
+// `?streaming` seeds an EMPTY in-flight assistant turn + responding, so its
+// bubble shows the breathing dots anchored where the streamed text fills in.
+const streaming = params.has("streaming");
+const initialPhase = params.get("phase") ??
+    (streaming ? "responding" : "summoned");
+const initialRecording = params.has("recording");
+const initialTranscript = params.get("transcript") ?? (initialRecording ? "tell me the plan for…" : "");
+const initialSpeaking = params.has("speaking");
+const initialMuted = params.has("muted");
+const initialCanSend = !params.has("nosend");
+// `?failure=no_provider` ends the thread with a failed assistant turn so the
+// recovery gate (Connect a provider → Open Settings) can be screenshot.
+const failureKind = params.get("failure");
+const SEED_WITH_FAILURE = failureKind === "no_provider"
+    ? [
+        ...SEED,
+        {
+            id: "m-fail",
+            role: "assistant",
+            content: "No model provider is configured, so I can't reply yet. Connect one to start chatting.",
+            createdAt: 13,
+            failureKind: "no_provider",
+        },
+    ]
+    : SEED;
+function Harness() {
+    const [messages, setMessages] = React.useState(startEmpty
+        ? []
+        : streaming
+            ? [
+                ...SEED,
+                { id: "m-inflight", role: "assistant", content: "", createdAt: 13 },
+            ]
+            : SEED_WITH_FAILURE);
+    const [phase, setPhase] = React.useState(initialPhase);
+    const [recording, setRecording] = React.useState(initialRecording);
+    const [handsFree, setHandsFree] = React.useState(false);
+    const [transcript, setTranscript] = React.useState(initialTranscript);
+    const [agentVoiceMuted, setAgentVoiceMuted] = React.useState(initialMuted);
+    // Log lifecycle so the e2e harness can assert the interaction flow from the
+    // console (the user asked for logs to be checked alongside the visuals).
+    React.useEffect(() => {
+        console.log(`[fixture] phase=${phase} messages=${messages.length} recording=${recording}`);
+    }, [phase, messages.length, recording]);
+    const send = React.useCallback((text, options) => {
+        const trimmed = text.trim();
+        if (!trimmed)
+            return;
+        console.log(`[fixture] send: ${JSON.stringify(trimmed)}${options?.channelType ? ` (${options.channelType})` : ""}`);
+        setMessages((m) => [
+            ...m,
+            { id: uid(), role: "user", content: trimmed, createdAt: nextId },
+        ]);
+        setPhase("responding");
+        window.setTimeout(() => {
+            setMessages((m) => [
+                ...m,
+                {
+                    id: uid(),
+                    role: "assistant",
+                    content: `On it — “${trimmed}”. Here is a reply that runs a little long so the open transcript has something to scroll through and the latest line stays pinned to the bottom near the composer.`,
+                    createdAt: nextId,
+                },
+            ]);
+            setPhase("summoned");
+        }, 500);
+    }, []);
+    // Capture intent of the active mic session — mirrors the real controller:
+    // PTT press → "dictate" (transcript fills the composer draft, no send);
+    // hands-free tap → "converse" (final transcript sends a VOICE_DM).
+    const captureIntentRef = React.useRef("converse");
+    const dictationSinkRef = React.useRef(null);
+    const startRecording = React.useCallback((intent = "converse") => {
+        captureIntentRef.current = intent;
+        console.log(`[fixture] startRecording(${intent})`);
+        setRecording(true);
+        setTranscript("tell me the plan for…");
+        setPhase("listening");
+    }, []);
+    const stopRecording = React.useCallback(() => {
+        console.log("[fixture] stopRecording");
+        setRecording(false);
+        setTranscript("");
+        setPhase("summoned");
+    }, []);
+    const toggleRecording = React.useCallback(() => {
+        setRecording((r) => {
+            const next = !r;
+            console.log(`[fixture] toggleRecording -> ${next}`);
+            setTranscript(next ? "tell me the plan for…" : "");
+            setPhase(next ? "listening" : "summoned");
+            return next;
+        });
+    }, []);
+    // A quick tap on the mic toggles the hands-free conversation loop (the mic
+    // re-opens after each spoken reply). The overlay's mic button reflects this
+    // via aria-pressed (active = recording || handsFree).
+    const toggleHandsFree = React.useCallback(() => {
+        setHandsFree((h) => {
+            const next = !h;
+            console.log(`[fixture] toggleHandsFree -> ${next}`);
+            // Like the real controller, turning hands-free ON opens a "converse"
+            // capture (recording + intent), so a final transcript sends a VOICE_DM.
+            captureIntentRef.current = "converse";
+            setRecording(next);
+            setPhase(next ? "listening" : "summoned");
+            return next;
+        });
+    }, []);
+    // Push-to-talk dictation routes a final transcript into the composer draft.
+    // The overlay registers/clears the sink on mount/unmount; store it so the
+    // __emitDictation/__emitVoiceFinal test hooks can drive it.
+    const setDictationSink = React.useCallback((sink) => {
+        dictationSinkRef.current = sink;
+    }, []);
+    const setTranscriptSessionSink = React.useCallback(() => { }, []);
+    // Test hooks for BIDIRECTIONAL voice (asserted by the e2e): a final transcript
+    // either fills the composer draft (dictate) or sends a VOICE_DM (converse),
+    // routed by the active capture intent — exactly the two real directions.
+    React.useEffect(() => {
+        const w = window;
+        w.__emitDictation = (t) => dictationSinkRef.current?.(t);
+        w.__emitVoiceFinal = (t) => {
+            if (captureIntentRef.current === "dictate")
+                dictationSinkRef.current?.(t);
+            else
+                send(t, { channelType: "VOICE_DM" });
+            setRecording(false);
+            setPhase("summoned");
+        };
+        return () => {
+            w.__emitDictation = undefined;
+            w.__emitVoiceFinal = undefined;
+        };
+    }, [send]);
+    const toggleAgentVoiceMute = React.useCallback(() => {
+        setAgentVoiceMuted((m) => {
+            console.log(`[fixture] toggleAgentVoiceMute -> ${!m}`);
+            return !m;
+        });
+    }, []);
+    const controller = {
+        phase,
+        // Raw in-flight predicate — mirrors the real controller's `chatSending ||
+        // speaking`. In the fixture, "responding" phase stands in for chatSending and
+        // `?speaking` for the spoken reply, so the trailing control + voice-gating
+        // behave exactly as they do in the app.
+        responding: phase === "responding" || initialSpeaking,
+        messages,
+        canSend: initialCanSend && phase !== "booting",
+        recording,
+        handsFree,
+        transcript,
+        speaking: initialSpeaking,
+        agentVoiceMuted,
+        needsAudioUnlock: false,
+        // The overlay reads `modelStatus.kind` unconditionally; "ready" keeps the
+        // local-model status strip dormant in the fixture.
+        modelStatus: { kind: "ready" },
+        send,
+        toggleRecording,
+        toggleHandsFree,
+        setDictationSink,
+        setTranscriptSessionSink,
+        setComposerHasDraft: (hasDraft) => console.log(`[fixture] setComposerHasDraft -> ${hasDraft}`),
+        startRecording,
+        stopRecording,
+        toggleAgentVoiceMute,
+        unlockAudio: () => console.log("[fixture] unlockAudio"),
+        openSettings: () => console.log("[fixture] openSettings"),
+        // `?tab=chat` disables the Home button (already home); `?tab=views` disables
+        // Views; `?tab=settings` disables Settings. Unset → all three are enabled.
+        currentTab: params.get("tab") ?? undefined,
+        navigateHome: () => console.log("[fixture] navigateHome"),
+        navigateToViews: () => console.log("[fixture] navigateToViews"),
+        clearConversation: () => console.log("[fixture] clearConversation"),
+        stop: () => {
+            console.log("[fixture] stop");
+            setPhase("summoned");
+        },
+    };
+    return (_jsxs("div", { "data-testid": "fake-view", style: {
+            position: "fixed",
+            inset: 0,
+            // Flat warm orange — the real /chat ambient home backdrop — so these
+            // screenshots show the true composite (glass chat panel over orange).
+            background: "#ef5a1f",
+            color: "rgba(255,255,255,0.9)",
+            fontFamily: "ui-sans-serif, system-ui, sans-serif",
+            overflow: "hidden",
+        }, children: [_jsxs("div", { "data-testid": "view-content", style: { padding: "48px 28px", maxWidth: 720 }, children: [_jsx("h1", { style: { fontSize: 30, fontWeight: 600, margin: 0 }, children: "Workspace" }), _jsx("p", { style: { opacity: 0.7, marginTop: 12, lineHeight: 1.6 }, children: "This is the live view behind the floating chat. Clicking here must NOT close the chat \u2014 the sheet only closes on a pull-down or Escape." }), _jsx("div", { style: { display: "flex", gap: 10, marginTop: 20 }, children: ["Files", "Tasks", "Notes", "Settings"].map((t) => (_jsx("span", { style: {
+                                padding: "8px 14px",
+                                borderRadius: 999,
+                                background: "rgba(255,255,255,0.08)",
+                                border: "1px solid rgba(255,255,255,0.12)",
+                                fontSize: 13,
+                            }, children: t }, t))) })] }), _jsx(ContinuousChatOverlay, { controller: controller })] }));
+}
+const root = document.getElementById("root");
+if (root)
+    createRoot(root).render(_jsx(Harness, {}));

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

@@ -0,0 +1,10 @@
+export declare function useActivityEvents(): {
+    events: {
+        id: string;
+        timestamp: number;
+        eventType: string;
+        summary: string;
+    }[];
+    clearEvents(): void;
+};
+//# sourceMappingURL=home-screen-fixture.activity-stub.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"home-screen-fixture.activity-stub.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/shell/__e2e__/home-screen-fixture.activity-stub.ts"],"names":[],"mappings":"AACA,wBAAgB,iBAAiB;;;;;;;;EAUhC"}

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

@@ -0,0 +1,12 @@
+// Stub useActivityEvents for the home-screen e2e.
+export function useActivityEvents() {
+    return {
+        events: [
+            { id: "a1", timestamp: Date.now() - 8000, eventType: "task_complete", summary: "Shipped the chat-sheet redesign" },
+            { id: "a2", timestamp: Date.now() - 95000, eventType: "tool_running", summary: "Running the Android route-coverage suite" },
+            { id: "a3", timestamp: Date.now() - 600000, eventType: "reminder", summary: "Standup at 10:30" },
+            { id: "a4", timestamp: Date.now() - 3600000, eventType: "workflow", summary: "Nightly backup completed" },
+        ],
+        clearEvents() { },
+    };
+}

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

@@ -0,0 +1,15 @@
+export declare const client: {
+    getInboxChats: () => Promise<{
+        chats: {
+            id: string;
+            source: string;
+            worldLabel: string;
+            title: string;
+            lastMessageText: string;
+            lastMessageAt: number;
+            messageCount: number;
+        }[];
+        count: number;
+    }>;
+};
+//# sourceMappingURL=home-screen-fixture.api-stub.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"home-screen-fixture.api-stub.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/shell/__e2e__/home-screen-fixture.api-stub.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,MAAM;;;;;;;;;;;;;CASlB,CAAC"}

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

@@ -0,0 +1,11 @@
+// Stub `../../api` for the home-screen e2e: just the client methods HomeScreen uses.
+export const client = {
+    getInboxChats: async () => ({
+        chats: [
+            { id: "c1", source: "imessage", worldLabel: "iMessage", title: "Alex Rivera", lastMessageText: "see you at 5, bring the deck", lastMessageAt: Date.now() - 120000, messageCount: 4 },
+            { id: "c2", source: "telegram", worldLabel: "Telegram", title: "Eng standup", lastMessageText: "deploy is green ✅", lastMessageAt: Date.now() - 1800000, messageCount: 12 },
+            { id: "c3", source: "discord", worldLabel: "Discord", title: "example", lastMessageText: "gm", lastMessageAt: Date.now() - 5400000, messageCount: 99 },
+        ],
+        count: 3,
+    }),
+};

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=home-screen-fixture.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"home-screen-fixture.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/shell/__e2e__/home-screen-fixture.tsx"],"names":[],"mappings":""}

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

@@ -0,0 +1,3 @@
+export declare function useIntervalWhenDocumentVisible(): void;
+export declare function useDocumentVisibility(): boolean;
+//# sourceMappingURL=home-screen-fixture.docvis-stub.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"home-screen-fixture.docvis-stub.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/shell/__e2e__/home-screen-fixture.docvis-stub.ts"],"names":[],"mappings":"AACA,wBAAgB,8BAA8B,SAAK;AACnD,wBAAgB,qBAAqB,YAAmB"}

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

@@ -0,0 +1,3 @@
+// Stub the visibility-interval hooks for the e2e (no live timers in headless).
+export function useIntervalWhenDocumentVisible() { }
+export function useDocumentVisibility() { return true; }

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

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createRoot } from "react-dom/client";
+import { ChatAmbientBackground } from "../ChatAmbientBackground.js";
+import { HomeScreen } from "../HomeScreen.js";
+const params = typeof location !== "undefined"
+    ? new URLSearchParams(location.search)
+    : new URLSearchParams();
+const showNativeOsTiles = params.has("native");
+function Harness() {
+    return (_jsxs("div", { "data-testid": "home-fixture-root", style: { position: "fixed", inset: 0, overflow: "hidden" }, children: [_jsx(ChatAmbientBackground, {}), _jsx(HomeScreen, { onOpenTile: (t) => console.log(`[fixture] open ${JSON.stringify(t)}`), showNativeOsTiles: showNativeOsTiles })] }));
+}
+const root = document.getElementById("root");
+if (root)
+    createRoot(root).render(_jsx(Harness, {}));

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

@@ -0,0 +1,8 @@
+export declare function useAvailableViews(): {
+    views: {
+        id: string;
+        path: string;
+    }[];
+    loading: boolean;
+};
+//# 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,wBAAgB,iBAAiB;;;;;;EAShC"}

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

@@ -0,0 +1,13 @@
+// Stub for useAvailableViews in the home-screen e2e: report the view paths the
+// home tiles gate on as registered, so the gated tiles (orchestrator,
+// workflows, inbox) render deterministically.
+export function useAvailableViews() {
+    return {
+        views: [
+            { id: "orchestrator", path: "/orchestrator" },
+            { id: "automations", path: "/automations" },
+            { id: "inbox", path: "/inbox" },
+        ],
+        loading: false,
+    };
+}

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";
+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 glass composer bar — translucent, blurred, 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/5 p-1.5 backdrop-blur-xl shadow-[inset_0_1px_0_rgba(255,255,255,0.25),inset_0_-1px_0_rgba(0,0,0,0.06),0_10px_30px_rgba(0,0,0,0.18)]";
+//# 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,mGAAmG;AACnG,eAAO,MAAM,oBAAoB,4MAC0K,CAAC"}

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

@@ -0,0 +1,2 @@
+/** Class for the glass composer bar — translucent, blurred, edge-highlighted; no plain borders. */
+export const GLASS_COMPOSER_CLASS = "flex items-center gap-1.5 rounded-[6px] border border-txt/15 bg-txt/5 p-1.5 backdrop-blur-xl shadow-[inset_0_1px_0_rgba(255,255,255,0.25),inset_0_-1px_0_rgba(0,0,0,0.06),0_10px_30px_rgba(0,0,0,0.18)]";

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", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/70 focus-visible:ring-offset-0", 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 drop-shadow-[0_1px_4px_rgba(0,0,0,0.3)]", "aria-hidden": "true", children: _jsx("path", { fill: "#ffffff", fillRule: "evenodd", d: `${BTN_RECT}${icon === "mic" ? MIC_GLYPH : SEND_GLYPH}` }) }) }));
+}

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

@@ -0,0 +1,25 @@
+import type { ChatFailureKind, MessageAttachment } from "../../api";
+/**
+ * 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[];
+}
+//# 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,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAEpE;;;;;;;;;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;CACnC"}

package/components/shell/shell-state.js

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

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

@@ -0,0 +1,25 @@
+import type { ReactNode } from "react";
+import type { StartupErrorState } from "../../state/types";
+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 {};