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

package/components/shell/useShellController.d.ts

@@ -1,7 +1,7 @@
 import type { TranscriptSegment } from "@elizaos/shared/transcripts";
-import type { ImageAttachment } from "../../api/client-types-chat";
-import type { HomeModelStatus } from "../../services/local-inference/home-model-status";
-import type { ShellMessage, ShellPhase } from "./shell-state";
+import type { ChatTurnStatus, Conversation, ImageAttachment } from "../../api/client-types-chat.js";
+import type { HomeModelStatus } from "../../services/local-inference/home-model-status.js";
+import type { ShellMessage, ShellPhase } from "./shell-state.js";
 /** How a voice capture turn is consumed when it produces a final transcript.
  *  `"transcription"` records long-form: finals accumulate into ONE recording
  *  session (not per-utterance chat bubbles) and the agent stays quiet until an
@@ -15,6 +15,12 @@ export interface ShellController {
      *  phase to "listening"), so the composer reads one honest busy signal: send
      *  stays enabled (queue another turn) while voice input is gated. */
     responding: boolean;
+    /** The rich, phase-aware status of the in-flight turn (#8813) — what the agent
+     *  is *doing* right now (thinking / streaming / running an action / waking /
+     *  speaking), or null when idle. Prefers the live server-reported phase, then
+     *  falls back to client-derived signals. Use this for the status indicator;
+     *  `responding` remains the coarse busy boolean for gating. */
+    turnStatus: ChatTurnStatus | null;
     messages: readonly ShellMessage[];
     canSend: boolean;
     /** Local text-model readiness for the home surface. Gates send while not ready. */
@@ -64,8 +70,12 @@ export interface ShellController {
      *  phrase ("exit transcription mode"), then the session becomes a Transcript. */
     transcriptionMode: boolean;
     /** Toggle transcription mode on/off. Enabling opens a long-running capture
-     *  that suppresses replies; disabling stops it and resumes normal evaluation. */
+     *  that suppresses replies; disabling stops it and RESUMES the hands-free mic
+     *  loop it paused (transcript off leaves the mic on — they are linked). */
     toggleTranscriptionMode: () => void;
+    /** End transcription AND turn the mic fully off (the mic button's action while
+     *  transcribing — turning off the mic turns off transcript). */
+    stopTranscriptionAndMic: () => void;
     /** Register where push-to-talk dictation drops its final transcript (the
      *  overlay wires this to its composer draft). Pass null to clear. */
     setDictationSink: (sink: ((text: string) => void) | null) => void;
@@ -79,32 +89,45 @@ export interface ShellController {
      *  the mic isn't listening over the keyboard; clearing the draft (on send)
      *  resumes it — restoring the prior voice state without a re-tap. */
     setComposerHasDraft: (hasDraft: boolean) => void;
-    /** DEV-only: clear the conversation and start a fresh, greeted one. */
+    /** Clear the conversation and start a fresh, greeted one. */
     clearConversation: () => void;
     /** Jump to Settings (where ProviderSwitcher lives) — used by the chat's
      *  `no_provider` failure gate to let the user wire a provider in one tap. */
     openSettings: () => void;
-    /** Return to the home dashboard (the /chat route). Drives the chat header's
-     *  Home button, which is disabled while already on the home screen. */
+    /** Return to the combined Home/Springboard surface and select Home. */
     navigateHome?: () => void;
-    /** Open the Views catalog. Drives the chat header's Views button, which is
-     *  disabled while already on the views screen. */
+    /** Open the combined Home/Springboard surface and select Springboard. */
     navigateToViews?: () => void;
-    /** The active app tab. Lets the chat header DISABLE the Home button on the
-     *  home screen ("chat"), Views on "views", and Settings on "settings". */
+    /** The active app tab. */
     currentTab?: string;
     /** Stop an in-flight reply stream (the composer's stop control). */
     stop: () => void;
+    /** Horizontal-swipe navigation between conversations (sheet-open only). */
+    conversationNav: ConversationNav;
+    /** True while a conversation switch or clear is fetching messages. The overlay
+     *  only renders the spinner when the visible thread is empty. */
+    conversationLoading?: boolean;
+}
+/** Adjacent-conversation navigation for the overlay's horizontal swipe. */
+export interface ConversationNav {
+    /** A newer conversation exists to swipe toward. */
+    hasPrev: boolean;
+    /** An older conversation exists to swipe toward. */
+    hasNext: boolean;
+    /** Select the newer (previous) conversation. */
+    goPrev: () => void;
+    /** Select the older (next) conversation. */
+    goNext: () => void;
 }
 /**
- * Bridges the shell foundation (HomePill + AssistantOverlay + ChatSurface) to
- * the real agent message flow exposed by {@link useApp}. Replaces the v1
- * mocked echo: text submitted here goes through `sendChatText`, the same path
- * the main ChatView uses, so messages actually send and stream back.
- *
- * Voice capture uses the hook-free {@link createVoiceCapture} factory (the
- * standalone-surface path). A final transcript is submitted through the same
- * `send` handler. The phase drives the pill glow and waveform mode.
+ * Pure adjacent-conversation navigation for the overlay's horizontal swipe
+ * (#8929). The list is most-recent-first, so "prev" moves toward the newer
+ * (lower index) conversation and "next" toward the older (higher index) one.
+ * `hasPrev`/`hasNext` drive the swipe edge hints; `goPrev`/`goNext` select the
+ * adjacent conversation by id. When the active conversation isn't in the list
+ * (not-found), neither direction is navigable. Extracted as a pure function so
+ * the index-walk is unit-testable without rendering the AppContext-bound hook.
  */
+export declare function buildConversationNav(conversations: readonly Pick<Conversation, "id">[] | null | undefined, activeConversationId: string | null | undefined, onSelect: (id: string) => void): ConversationNav;
 export declare function useShellController(): ShellController;
 //# sourceMappingURL=useShellController.d.ts.map

package/components/shell/useShellController.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useShellController.d.ts","sourceRoot":"","sources":["../../../../../../src/components/shell/useShellController.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"useShellController.d.ts","sourceRoot":"","sources":["../../../../../../src/components/shell/useShellController.ts"],"names":[],"mappings":"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"}

package/components/shell/useShellController.js

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { VOICE_CONTROL_EVENT, } from "../../events/index.js";
-import { useApp } from "../../state/index.js";
+import { useChatTurnStatus, useConversationMessages } from "../../state/index.js";
+import { useAppSelectorShallow } from "../../state/app-store.js";
 import { loadContinuousChatMode, loadVadAutoStop, saveContinuousChatMode, } from "../../state/persistence.js";
 import { deriveAgentReady } from "../../state/types.js";
 import { TurnAggregator } from "../../voice/end-of-turn.js";
@@ -10,7 +11,35 @@ import { isTranscriptionExitPhrase, isTranscriptionStartPhrase, stripExitPhrase,
 import { createVoiceCapture, } from "../../voice/voice-capture-factory.js";
 import { buildVoiceTurnSignal } from "../../voice/voice-turn-signal.js";
 import { useHomeModelStatus } from "../local-inference/useHomeModelStatus.js";
+import { dispatchHomeSpringboardNavigation } from "./home-springboard-events.js";
 import { useShellVoiceOutput } from "./useShellVoiceOutput.js";
+/**
+ * Pure adjacent-conversation navigation for the overlay's horizontal swipe
+ * (#8929). The list is most-recent-first, so "prev" moves toward the newer
+ * (lower index) conversation and "next" toward the older (higher index) one.
+ * `hasPrev`/`hasNext` drive the swipe edge hints; `goPrev`/`goNext` select the
+ * adjacent conversation by id. When the active conversation isn't in the list
+ * (not-found), neither direction is navigable. Extracted as a pure function so
+ * the index-walk is unit-testable without rendering the AppContext-bound hook.
+ */
+export function buildConversationNav(conversations, activeConversationId, onSelect) {
+    const list = Array.isArray(conversations) ? conversations : [];
+    const index = list.findIndex((c) => c.id === activeConversationId);
+    const hasPrev = index > 0;
+    const hasNext = index >= 0 && index < list.length - 1;
+    return {
+        hasPrev,
+        hasNext,
+        goPrev: () => {
+            if (hasPrev)
+                onSelect(list[index - 1].id);
+        },
+        goNext: () => {
+            if (hasNext)
+                onSelect(list[index + 1].id);
+        },
+    };
+}
 /**
  * Bridges the shell foundation (HomePill + AssistantOverlay + ChatSurface) to
  * the real agent message flow exposed by {@link useApp}. Replaces the v1
@@ -21,26 +50,96 @@ import { useShellVoiceOutput } from "./useShellVoiceOutput.js";
  * standalone-surface path). A final transcript is submitted through the same
  * `send` handler. The phase drives the pill glow and waveform mode.
  */
+/** Shallow equality for two optional string lists (topic-change detection). */
+function sameStringList(a, b) {
+    if (a === b)
+        return true;
+    if (!a || !b)
+        return (a?.length ?? 0) === (b?.length ?? 0);
+    if (a.length !== b.length)
+        return false;
+    for (let i = 0; i < a.length; i += 1) {
+        if (a[i] !== b[i])
+            return false;
+    }
+    return true;
+}
+// Granular shallow selection instead of useApp() so the shell controller only
+// re-renders when one of the exact fields it reads changes — not on every one of
+// the ~300 AppContext fields. typecheck enforces completeness: any `s.x` used
+// below but not selected here is a compile error, so this stays value-equivalent.
+const selectShellController = (s) => ({
+    tab: s.tab,
+    chatSending: s.chatSending,
+    chatFirstTokenReceived: s.chatFirstTokenReceived,
+    sendChatText: s.sendChatText,
+    agentStatus: s.agentStatus,
+    uiLanguage: s.uiLanguage,
+    elizaCloudVoiceProxyAvailable: s.elizaCloudVoiceProxyAvailable,
+    handleNewConversation: s.handleNewConversation,
+    handleSelectConversation: s.handleSelectConversation,
+    activeConversationId: s.activeConversationId,
+    conversations: s.conversations,
+    setTab: s.setTab,
+    handleChatStop: s.handleChatStop,
+});
 export function useShellController() {
-    const app = useApp();
-    const { conversationMessages, chatSending, sendChatText, agentStatus, uiLanguage, elizaCloudVoiceProxyAvailable, handleNewConversation, setTab, handleChatStop, } = app;
+    const { tab, chatSending, chatFirstTokenReceived, sendChatText, agentStatus, uiLanguage, elizaCloudVoiceProxyAvailable, handleNewConversation, handleSelectConversation, activeConversationId, conversations, setTab, handleChatStop, } = useAppSelectorShallow(selectShellController);
+    // Read per-token streaming messages from the isolated context so token updates
+    // don't depend on the giant AppContext value identity.
+    const { conversationMessages } = useConversationMessages();
+    // Live server-reported phase of the in-flight turn (from the chat-send SSE),
+    // read from its dedicated context so status events re-render only chat surfaces.
+    const { serverTurnStatus } = useChatTurnStatus();
     // Jump to Settings from the chat's no_provider gate. Stable identity.
     const openSettings = React.useCallback(() => setTab("settings"), [setTab]);
-    // Return to the home dashboard (the /chat route) from the chat header's Home
-    // button. Stable identity.
-    const navigateHome = React.useCallback(() => setTab("chat"), [setTab]);
-    // Open the Views catalog from the chat header's Views button. Stable identity.
-    const navigateToViews = React.useCallback(() => setTab("views"), [setTab]);
-    // DEV-only debug affordance: drop the current conversation and start a fresh,
-    // greeted one (handleNewConversation resets draft state + creates a new
-    // conversation with a bootstrap greeting).
+    // Return to the combined Home/Springboard route and reset its internal page.
+    // If the route is not mounted yet, the next mount starts on Home; if it is
+    // already mounted on Springboard, this event flips it without a remount.
+    const navigateHome = React.useCallback(() => {
+        setTab("chat");
+        dispatchHomeSpringboardNavigation("home");
+    }, [setTab]);
+    const navigateToViews = React.useCallback(() => {
+        setTab("chat");
+        dispatchHomeSpringboardNavigation("springboard");
+    }, [setTab]);
+    // True while a clear or conversation switch is fetching the next thread, so
+    // the overlay can show an in-thread spinner instead of an empty sheet. Cache
+    // hits paint synchronously inside handleSelectConversation; the overlay only
+    // renders the spinner when the visible thread is still empty.
+    const [conversationLoading, setConversationLoading] = React.useState(false);
+    const conversationLoadingSeqRef = React.useRef(0);
+    const runWithConversationLoading = React.useCallback((task) => {
+        const seq = conversationLoadingSeqRef.current + 1;
+        conversationLoadingSeqRef.current = seq;
+        setConversationLoading(true);
+        void task().finally(() => {
+            if (conversationLoadingSeqRef.current === seq) {
+                setConversationLoading(false);
+            }
+        });
+    }, []);
+    // Clear the chat: drop the current conversation and start a fresh, greeted one
+    // (handleNewConversation resets draft state + creates a new conversation with a
+    // bootstrap greeting; an empty draft we just left is pruned, a non-empty
+    // conversation is kept and remains swipe-reachable).
     const clearConversation = React.useCallback(() => {
         // A fresh conversation's bootstrap greeting is NOT a reply to a voice turn —
         // clear the voice flag so the greeting isn't spoken aloud after a prior
         // voice session.
         setLastTurnVoice(false);
-        void handleNewConversation();
-    }, [handleNewConversation]);
+        runWithConversationLoading(handleNewConversation);
+    }, [handleNewConversation, runWithConversationLoading]);
+    // Switch conversations behind a loading flag so an uncached swipe shows the
+    // spinner; a cached one resolves within the same tick (thread already painted).
+    const selectConversation = React.useCallback((id) => {
+        runWithConversationLoading(() => handleSelectConversation(id));
+    }, [handleSelectConversation, runWithConversationLoading]);
+    // Horizontal-swipe navigation between conversations (#8929). Computed by the
+    // pure `buildConversationNav` helper (unit-tested) so the index-walk and
+    // boundary logic stay verifiable independent of this AppContext-bound hook.
+    const conversationNav = React.useMemo(() => buildConversationNav(conversations, activeConversationId, selectConversation), [conversations, activeConversationId, selectConversation]);
     // "Ready" here means the agent's FIRST-TURN CAPABILITY is online (it can
     // answer) — NOT that the startup coordinator finished hydrating. The shell now
     // mounts early (isShellPaintable) while the agent warms up; the composer stays
@@ -81,6 +180,12 @@ export function useShellController() {
     const [transcriptionMode, setTranscriptionMode] = React.useState(false);
     const transcriptionModeRef = React.useRef(false);
     transcriptionModeRef.current = transcriptionMode;
+    // Whether the hands-free mic loop was running when transcription was entered.
+    // The mic and transcript are LINKED but not identical: the transcript button
+    // (and a spoken/server "stop") pauses the hands-free reply loop on enter and
+    // RESUMES it on exit, so turning transcript off leaves the mic on. Only the
+    // mic button turns the mic (and thus transcript) fully off.
+    const resumeHandsFreeAfterTranscriptRef = React.useRef(false);
     // Forward handle to `toggleTranscriptionMode` (defined far below) so the
     // converse capture loop can flip INTO transcription on a spoken "start
     // transcription" without a definition-order/closure problem.
@@ -155,7 +260,9 @@ export function useShellController() {
             if (cached &&
                 cached.content === message.text &&
                 cached.failureKind === message.failureKind &&
-                (cached.reasoning || undefined) === (message.reasoning || undefined)) {
+                (cached.reasoning || undefined) === (message.reasoning || undefined) &&
+                cached.secretRequest === message.secretRequest &&
+                sameStringList(cached.topics, message.topics)) {
                 next.set(message.id, cached);
                 return cached;
             }
@@ -169,6 +276,10 @@ export function useShellController() {
                 ...(message.attachments?.length
                     ? { attachments: message.attachments }
                     : {}),
+                ...(message.secretRequest
+                    ? { secretRequest: message.secretRequest }
+                    : {}),
+                ...(message.topics?.length ? { topics: message.topics } : {}),
             };
             next.set(message.id, mapped);
             return mapped;
@@ -323,6 +434,13 @@ export function useShellController() {
                         transcriptionModeRef.current = false;
                         finalizeTranscriptSession();
                         stopCapture();
+                        // A spoken "stop transcription" turns transcript OFF but leaves
+                        // the mic ON — resume the hands-free loop it paused on enter.
+                        if (resumeHandsFreeAfterTranscriptRef.current) {
+                            resumeHandsFreeAfterTranscriptRef.current = false;
+                            setHandsFree(true);
+                            handsFreeRef.current = true;
+                        }
                         return;
                     }
                     // Accumulate this utterance into the recording session — it does NOT
@@ -457,6 +575,29 @@ export function useShellController() {
     // after the mic opens (which flips phase to "listening"), so the composer-send
     // and voice-gating logic both read one honest "a reply is in flight" signal.
     const responding = chatSending || voiceOutput.speaking;
+    // The rich status (#8813): what the agent is *doing*, distinct from the coarse
+    // `responding` boolean. Voice playback wins (the server can't see local TTS).
+    // Otherwise prefer the live server phase while a text turn is in flight; if no
+    // server status has arrived yet, fall back to thinking (sent, no first token)
+    // → streaming (first token seen). The server's `waking` status (cloud 202) is
+    // surfaced even before chatSending settles, so it shows while the agent boots.
+    const turnStatus = React.useMemo(() => {
+        if (voiceOutput.speaking)
+            return { kind: "speaking" };
+        if (serverTurnStatus &&
+            (chatSending || serverTurnStatus.kind === "waking")) {
+            return serverTurnStatus;
+        }
+        if (chatSending) {
+            return { kind: chatFirstTokenReceived ? "streaming" : "thinking" };
+        }
+        return null;
+    }, [
+        voiceOutput.speaking,
+        serverTurnStatus,
+        chatSending,
+        chatFirstTokenReceived,
+    ]);
     const phase = !ready
         ? "booting"
         : recording
@@ -524,8 +665,21 @@ export function useShellController() {
                 stopCapture();
             // Close the recording session → Transcript record + chat link-widget.
             finalizeTranscriptSession();
+            // Turning transcript OFF must leave the mic ON: resume the hands-free
+            // listen loop the transcription layer paused on enter. (Only the mic
+            // button — handleMicClick → stopTranscriptionAndMic — turns the mic off.)
+            if (resumeHandsFreeAfterTranscriptRef.current) {
+                resumeHandsFreeAfterTranscriptRef.current = false;
+                setHandsFree(true);
+                handsFreeRef.current = true;
+            }
         }
         else {
+            // Remember the mic state so we can restore it on exit, then pause the
+            // hands-free REPLY loop while transcription records silently. The mic
+            // itself stays on (transcription capture) — pressing transcript never
+            // disables the mic.
+            resumeHandsFreeAfterTranscriptRef.current = handsFreeRef.current;
             if (handsFreeRef.current) {
                 setHandsFree(false);
                 handsFreeRef.current = false;
@@ -546,6 +700,22 @@ export function useShellController() {
         beginTranscriptSession,
         finalizeTranscriptSession,
     ]);
+    // The mic button while transcribing: turn the mic (and thus transcript) fully
+    // OFF. Distinct from `toggleTranscriptionMode`'s off-path, which leaves the
+    // mic listening — "turning off the mic turns off transcript" (mic = parent).
+    const stopTranscriptionAndMic = React.useCallback(() => {
+        setTranscriptionMode(false);
+        transcriptionModeRef.current = false;
+        if (captureRef.current)
+            stopCapture();
+        finalizeTranscriptSession();
+        resumeHandsFreeAfterTranscriptRef.current = false;
+        // Turn the mic fully off like a hands-free tap-off: persist the prior
+        // non-always-on mode so the auto-engage loop does NOT re-open the mic.
+        saveContinuousChatMode(priorContinuousModeRef.current);
+        setHandsFree(false);
+        handsFreeRef.current = false;
+    }, [stopCapture, finalizeTranscriptSession]);
     // Keep the forward ref current so the converse capture loop (defined above)
     // can flip into transcription on a spoken start phrase.
     toggleTranscriptionModeRef.current = toggleTranscriptionMode;
@@ -659,6 +829,7 @@ export function useShellController() {
     return {
         phase,
         responding,
+        turnStatus,
         messages,
         canSend,
         modelStatus,
@@ -676,6 +847,7 @@ export function useShellController() {
         toggleHandsFree,
         transcriptionMode,
         toggleTranscriptionMode,
+        stopTranscriptionAndMic,
         setDictationSink,
         setTranscriptSessionSink,
         setComposerHasDraft,
@@ -689,7 +861,9 @@ export function useShellController() {
         openSettings,
         navigateHome,
         navigateToViews,
-        currentTab: app.tab,
+        currentTab: tab,
         stop: stopTurn,
+        conversationNav,
+        conversationLoading,
     };
 }

package/components/shell/useShellVoiceOutput.d.ts

@@ -1,4 +1,4 @@
-import type { ConversationMessage } from "../../api/client-types-chat";
+import type { ConversationMessage } from "../../api/client-types-chat.js";
 export interface ShellVoiceOutput {
     /** True while an assistant reply is being spoken aloud. */
     speaking: boolean;

package/components/steward/injected.d.ts

@@ -1,4 +1,4 @@
-import type { StewardApprovalQueueProps, StewardLogoProps, StewardTransactionHistoryProps } from "../../config/boot-config";
+import type { StewardApprovalQueueProps, StewardLogoProps, StewardTransactionHistoryProps } from "../../config/boot-config.js";
 export declare function StewardLogo(props: StewardLogoProps): import("react/jsx-runtime").JSX.Element | null;
 export declare function ApprovalQueue(props: StewardApprovalQueueProps): import("react/jsx-runtime").JSX.Element | null;
 export declare function TransactionHistory(props: StewardTransactionHistoryProps): import("react/jsx-runtime").JSX.Element | null;

package/components/stream/StatusBar.js

@@ -3,13 +3,13 @@ import { ExternalLink } from "lucide-react";
 import { useEffect, useRef } from "react";
 import { isElectrobunRuntime } from "../../bridge/electrobun-runtime.js";
 import { getBootConfig } from "../../config/boot-config.js";
-import { useApp } from "../../state/useApp.js";
+import { useAppSelector } from "../../state/index.js";
 import { formatUptime } from "../../utils/format.js";
 import { Button } from "../ui/button.js";
 import { IS_POPOUT } from "./helpers.js";
 import { openStreamPopout } from "./popout-url.js";
 export function StatusBar({ agentName, streamAvailable, streamLive, streamLoading, onToggleStream, uptime, frameCount, }) {
-    const { t } = useApp();
+    const t = useAppSelector((s) => s.t);
     const isElectrobun = isElectrobunRuntime();
     const popoutPollRef = useRef(null);
     useEffect(() => {
@@ -20,13 +20,11 @@ export function StatusBar({ agentName, streamAvailable, streamLive, streamLoadin
             }
         };
     }, []);
-    return (_jsxs("div", { className: "flex items-center justify-between bg-card/80 backdrop-blur-xl shrink-0 px-3 py-2 lg:px-4", style: IS_POPOUT ? { WebkitAppRegion: "drag" } : undefined, children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: `w-2.5 h-2.5 rounded-full ${streamLive
-                            ? "bg-danger ring-2 ring-danger/25 animate-pulse"
-                            : "bg-muted"}` }), _jsx("span", { className: "text-xs font-bold uppercase tracking-wider text-txt", children: streamLive
+    return (_jsxs("div", { className: "flex items-center justify-between bg-card/80 shrink-0 px-3 py-2 lg:px-4", style: IS_POPOUT ? { WebkitAppRegion: "drag" } : undefined, children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: `w-2.5 h-2.5 rounded-full ${streamLive ? "bg-danger   animate-pulse" : "bg-muted"}` }), _jsx("span", { className: "text-xs font-bold uppercase tracking-wider text-txt", children: streamLive
                             ? t("statusbar.LiveShort", { defaultValue: "LIVE" })
                             : t("statusbar.OfflineShort", { defaultValue: "OFFLINE" }) }), _jsx("span", { className: "text-sm font-semibold text-txt-strong", children: agentName })] }), _jsxs("div", { className: "flex items-center gap-2 lg:gap-3 text-xs text-muted", style: IS_POPOUT
                     ? { WebkitAppRegion: "no-drag" }
-                    : undefined, children: [streamLive && (_jsxs("span", { className: "inline-flex min-h-9 items-center gap-1.5 rounded-sm border border-border/45 bg-card/92 px-2.5 py-1.5 text-xs-tight text-muted-strong font-mono text-2xs", children: [_jsx("span", { className: "text-txt", children: formatUptime(uptime) }), _jsx("span", { className: "text-border", children: "|" }), _jsxs("span", { className: "text-txt", children: [frameCount.toLocaleString(), "f"] })] })), _jsx(Button, { size: "sm", disabled: !streamAvailable || streamLoading, className: `inline-flex h-9 min-h-9 items-center justify-center rounded-sm border px-3 text-xs-tight font-semibold uppercase tracking-[0.16em] transition-[border-color,background-color,color,box-shadow] focus-visible:ring-2 focus-visible:ring-accent/35 disabled:cursor-wait disabled:opacity-50 ${streamLive
+                    : undefined, children: [streamLive && (_jsxs("span", { className: "inline-flex min-h-9 items-center gap-1.5 rounded-sm border border-border/45 bg-card/92 px-2.5 py-1.5 text-xs-tight text-muted-strong font-mono text-2xs", children: [_jsx("span", { className: "text-txt", children: formatUptime(uptime) }), _jsx("span", { className: "text-border", children: "|" }), _jsxs("span", { className: "text-txt", children: [frameCount.toLocaleString("en-US"), "f"] })] })), _jsx(Button, { size: "sm", disabled: !streamAvailable || streamLoading, className: `inline-flex h-9 min-h-9 items-center justify-center rounded-sm border px-3 text-xs-tight font-semibold uppercase tracking-[0.16em] transition-[border-color,background-color,color,box-shadow]   disabled:cursor-wait disabled:opacity-50 ${streamLive
                             ? "border-danger/35 bg-danger/10 text-danger hover:border-danger/50 hover:bg-danger/16"
                             : "border-ok/35 bg-ok/10 text-ok hover:border-ok/50 hover:bg-ok/16"}`, onClick: onToggleStream, title: streamAvailable
                             ? undefined
@@ -36,7 +34,7 @@ export function StatusBar({ agentName, streamAvailable, streamLive, streamLoadin
                             ? "..."
                             : streamLive
                                 ? t("statusbar.StopStream", { defaultValue: "Stop Stream" })
-                                : t("statusbar.GoLive", { defaultValue: "Go Live" }) }), !IS_POPOUT && !isElectrobun && (_jsx(Button, { variant: "ghost", size: "sm", className: "inline-flex min-h-9 h-9 w-9 items-center justify-center rounded-sm border border-border/45 bg-card/92 px-0 py-1.5 text-xs-tight text-muted-strong transition-[border-color,background-color,color,box-shadow] focus-visible:ring-2 focus-visible:ring-accent/35 hover:border-border-strong hover:bg-bg-hover hover:text-txt ", title: t("statusbar.PopOutStreamView"), onClick: () => {
+                                : t("statusbar.GoLive", { defaultValue: "Go Live" }) }), !IS_POPOUT && !isElectrobun && (_jsx(Button, { variant: "ghost", size: "sm", className: "inline-flex min-h-9 h-9 w-9 items-center justify-center rounded-sm border border-border/45 bg-card/92 px-0 py-1.5 text-xs-tight text-muted-strong transition-[border-color,background-color,color,box-shadow]   hover:border-border-strong hover:bg-bg-hover hover:text-txt ", title: t("statusbar.PopOutStreamView"), onClick: () => {
                             const popoutWin = openStreamPopout(getBootConfig().apiBase);
                             if (popoutWin) {
                                 window.dispatchEvent(new CustomEvent("stream-popout", { detail: "opened" }));

package/components/tool-events/ToolCallEventLog.d.ts

@@ -1,4 +1,4 @@
-import type { NativeToolCallEvent } from "../../api/client-types-cloud";
+import type { NativeToolCallEvent } from "../../api/client-types-cloud.js";
 export interface ToolCallEventLogProps {
     event: NativeToolCallEvent;
     className?: string;

package/components/tool-events/ToolCallEventLog.helpers.d.ts

@@ -1,5 +1,5 @@
-import type { NativeToolCallEvent } from "../../api/client-types-cloud";
-import type { ToolCallEventDisplayState } from "./ToolCallEventLog";
+import type { NativeToolCallEvent } from "../../api/client-types-cloud.js";
+import type { ToolCallEventDisplayState } from "./ToolCallEventLog.js";
 export declare function getToolCallEventDisplayState(event: NativeToolCallEvent): ToolCallEventDisplayState;
 export declare function getToolCallName(event: NativeToolCallEvent): string;
 //# sourceMappingURL=ToolCallEventLog.helpers.d.ts.map

package/components/training/JobDetailPanel.js

@@ -32,7 +32,7 @@ function CheckpointsList({ checkpoints, }) {
     return (_jsx("div", { className: "space-y-2", children: checkpoints.map((cp) => (_jsxs("div", { className: "text-xs border border-border rounded-sm p-2", children: [_jsx("div", { className: "font-mono text-txt-strong", children: t("jobdetail.step", {
                         step: cp.step,
                         defaultValue: "Step {{step}}",
-                    }) }), _jsxs("div", { className: "text-muted", children: [cp.size_mb.toFixed(1), " MB \u00B7", " ", new Date(cp.pulled_at).toLocaleString()] })] }, cp.step))) }));
+                    }) }), _jsxs("div", { className: "text-muted", children: [cp.size_mb.toFixed(1), " MB \u00B7", " ", new Date(cp.pulled_at).toLocaleString("en-US")] })] }, cp.step))) }));
 }
 function JobLogs({ jobId }) {
     const { t } = useTranslation();
@@ -92,7 +92,7 @@ export function JobDetailPanel({ jobId, onClose }) {
     }
     return (_jsxs("div", { className: "space-y-4 border border-border rounded-sm p-4 bg-card", children: [_jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-start justify-between gap-2", children: [_jsxs("div", { children: [_jsx("div", { className: "text-xs text-muted uppercase tracking-wide", children: t("jobdetail.field.status", { defaultValue: "Status" }) }), _jsx("div", { className: "text-sm font-semibold text-txt-strong", children: job.status })] }), _jsx(Button, { variant: "ghost", size: "sm", onClick: onClose, className: "text-muted", children: "\u00D7" })] }), _jsxs("div", { className: "grid grid-cols-2 gap-3 text-xs", children: [_jsxs("div", { children: [_jsx("div", { className: "text-muted", children: t("jobdetail.field.registryKey", {
                                             defaultValue: "Registry Key",
-                                        }) }), _jsx("div", { className: "font-mono text-txt break-all", children: job.registry_key })] }), _jsxs("div", { children: [_jsx("div", { className: "text-muted", children: t("jobdetail.field.started", { defaultValue: "Started" }) }), _jsx("div", { className: "text-txt", children: new Date(job.started_at).toLocaleString() })] }), _jsxs("div", { children: [_jsx("div", { className: "text-muted", children: t("jobdetail.field.step", { defaultValue: "Step" }) }), _jsx("div", { className: "text-txt font-semibold", children: job.last_step })] }), _jsxs("div", { children: [_jsx("div", { className: "text-muted", children: t("jobdetail.field.formatOk", { defaultValue: "Format OK" }) }), _jsx("div", { className: job.last_format_ok ? "text-green-500" : "text-red-500", children: job.last_format_ok
+                                        }) }), _jsx("div", { className: "font-mono text-txt break-all", children: job.registry_key })] }), _jsxs("div", { children: [_jsx("div", { className: "text-muted", children: t("jobdetail.field.started", { defaultValue: "Started" }) }), _jsx("div", { className: "text-txt", children: new Date(job.started_at).toLocaleString("en-US") })] }), _jsxs("div", { children: [_jsx("div", { className: "text-muted", children: t("jobdetail.field.step", { defaultValue: "Step" }) }), _jsx("div", { className: "text-txt font-semibold", children: job.last_step })] }), _jsxs("div", { children: [_jsx("div", { className: "text-muted", children: t("jobdetail.field.formatOk", { defaultValue: "Format OK" }) }), _jsx("div", { className: job.last_format_ok ? "text-green-500" : "text-red-500", children: job.last_format_ok
                                             ? t("jobdetail.yes", { defaultValue: "Yes" })
                                             : t("jobdetail.no", { defaultValue: "No" }) })] })] })] }), actionError && (_jsx("div", { className: "text-xs text-red-500 bg-red-500/10 p-2 rounded-sm", children: actionError })), _jsxs("div", { className: "flex gap-2", children: [_jsxs(Button, { variant: "outline", size: "sm", onClick: handleEval, disabled: evalLoading, className: "flex-1", children: [evalLoading && _jsx(Loader2, { className: "w-3 h-3 mr-1 animate-spin" }), t("jobdetail.triggerEval", { defaultValue: "Trigger Eval" })] }), _jsxs(Button, { variant: "destructive", size: "sm", onClick: handleCancel, disabled: cancelLoading, className: "flex-1", children: [cancelLoading && _jsx(Loader2, { className: "w-3 h-3 mr-1 animate-spin" }), t("jobdetail.cancel", { defaultValue: "Cancel" })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "text-xs font-semibold text-txt-strong", children: t("jobdetail.runningCost", { defaultValue: "Running Cost" }) }), _jsx(BudgetPanel, { jobId: jobId })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "text-xs font-semibold text-txt-strong", children: t("jobdetail.progressChart", { defaultValue: "Progress Chart" }) }), _jsx(ProgressChart, { data: progressData })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "text-xs font-semibold text-txt-strong", children: t("jobdetail.checkpoints", { defaultValue: "Checkpoints" }) }), _jsx(CheckpointsList, { checkpoints: job.checkpoints })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "text-xs font-semibold text-txt-strong", children: t("jobdetail.logs", { defaultValue: "Logs" }) }), _jsx(JobLogs, { jobId: jobId })] })] }));
 }

package/components/training/TrainingDashboard.js

@@ -34,7 +34,7 @@ function JobsTable({ jobs, loading, error, onRowClick, }) {
                                         ? t("trainingdashboard.yes", { defaultValue: "Yes" })
                                         : t("trainingdashboard.no", { defaultValue: "No" }) }) }), _jsx("td", { className: "px-3 py-2", children: _jsx("div", { className: `text-xs font-semibold ${job.last_content_ok ? "text-green-500" : "text-red-500"}`, children: job.last_content_ok
                                         ? t("trainingdashboard.yes", { defaultValue: "Yes" })
-                                        : t("trainingdashboard.no", { defaultValue: "No" }) }) }), _jsx("td", { className: "px-3 py-2", children: _jsx("div", { className: "text-xs text-muted", children: new Date(job.started_at).toLocaleString() }) })] }, job.id))) })] }) }));
+                                        : t("trainingdashboard.no", { defaultValue: "No" }) }) }), _jsx("td", { className: "px-3 py-2", children: _jsx("div", { className: "text-xs text-muted", children: new Date(job.started_at).toLocaleString("en-US") }) })] }, job.id))) })] }) }));
 }
 function ModelsTable({ models, loading, error, onTrainClick, }) {
     const { t } = useTranslation();

package/components/training/hooks/useTrainingApi.d.ts

@@ -1,4 +1,4 @@
-import type { CreateJobRequest, InferenceEndpoint, InferenceStats, TrainingBudget, TrainingJob, TrainingJobDetail, TrainingModel } from "../types";
+import type { CreateJobRequest, InferenceEndpoint, InferenceStats, TrainingBudget, TrainingJob, TrainingJobDetail, TrainingModel } from "../types.js";
 interface ApiState<T> {
     data: T | null;
     loading: boolean;

package/components/training/injected.d.ts

@@ -1,3 +1,3 @@
-import type { FineTuningViewProps } from "../../config/boot-config";
+import type { FineTuningViewProps } from "../../config/boot-config.js";
 export declare function FineTuningView(props: FineTuningViewProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=injected.d.ts.map

package/components/transcripts/TranscriptBody.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TranscriptBody.d.ts","sourceRoot":"","sources":["../../../../../../src/components/transcripts/TranscriptBody.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EAGL,KAAK,UAAU,EAChB,MAAM,6BAA6B,CAAC;AACrC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,WAAW,mBAAmB;IAClC,UAAU,EAAE,UAAU,CAAC;IACvB,6EAA6E;IAC7E,aAAa,EAAE,MAAM,CAAC;IACtB,mEAAmE;IACnE,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACjC;AAYD,wBAAgB,cAAc,CAAC,EAC7B,UAAU,EACV,aAAa,EACb,QAAQ,GACT,EAAE,mBAAmB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAiEzC"}
+{"version":3,"file":"TranscriptBody.d.ts","sourceRoot":"","sources":["../../../../../../src/components/transcripts/TranscriptBody.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EAGL,KAAK,UAAU,EAChB,MAAM,6BAA6B,CAAC;AACrC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,WAAW,mBAAmB;IAClC,UAAU,EAAE,UAAU,CAAC;IACvB,6EAA6E;IAC7E,aAAa,EAAE,MAAM,CAAC;IACtB,mEAAmE;IACnE,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACjC;AAiDD,wBAAgB,cAAc,CAAC,EAC7B,UAAU,EACV,aAAa,EACb,QAAQ,GACT,EAAE,mBAAmB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAgEzC"}

package/components/transcripts/TranscriptBody.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * TranscriptBody — the read + word-sync surface of the Transcripts player
  * (#8789). Pure + presentational: given a transcript and the current playback
@@ -24,18 +24,26 @@ function segmentAt(segments, ms) {
     }
     return found;
 }
+// Memoized so that, as playback advances, only the word whose active-state flips
+// re-renders — not every word button in the transcript on every audio frame.
+// `onSeek` is stable (ref-backed in the parent), so `isActive` is the only prop
+// that changes.
+const TranscriptWord = React.memo(function TranscriptWord({ text, startMs, isActive, testId, onSeek, }) {
+    return (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", "data-testid": testId, "data-active": isActive ? "true" : undefined, onClick: () => onSeek(startMs), className: cn("rounded px-0.5 transition-colors hover:bg-bg-muted/40", isActive && "bg-accent/16 text-accent-fg"), children: text }), " "] }));
+});
 export function TranscriptBody({ transcript, currentTimeMs, onSeekMs, }) {
     const flat = React.useMemo(() => flattenTranscriptWords(transcript.segments), [transcript.segments]);
     const activeFlat = activeWordIndex(flat, currentTimeMs);
     const active = activeFlat >= 0 ? flat[activeFlat] : undefined;
     const fallbackSeg = segmentAt(transcript.segments, currentTimeMs);
+    // Stable seek handler so the memoized words don't see a new prop every frame.
+    const onSeekRef = React.useRef(onSeekMs);
+    onSeekRef.current = onSeekMs;
+    const handleSeek = React.useCallback((ms) => onSeekRef.current?.(ms), []);
     return (_jsx("div", { className: "space-y-4 leading-relaxed text-txt", children: transcript.segments.map((seg, si) => {
             const segActive = seg.words.length === 0 && si === fallbackSeg;
-            return (_jsxs("div", { "data-testid": `transcript-segment-${si}`, children: [seg.speakerLabel ? (_jsx("div", { className: "mb-0.5 text-xs font-medium text-muted", children: seg.speakerLabel })) : null, _jsx("p", { className: cn("rounded", segActive && "bg-accent/12 px-1 text-accent-fg"), children: seg.words.length > 0 ? (seg.words.map((w, wi) => {
-                            const isActive = active !== undefined &&
+            return (_jsxs("div", { "data-testid": `transcript-segment-${si}`, children: [seg.speakerLabel ? (_jsx("div", { className: "mb-0.5 text-xs font-medium text-muted", children: seg.speakerLabel })) : null, _jsx("p", { className: cn("rounded", segActive && "bg-accent/12 px-1 text-accent-fg"), children: seg.words.length > 0 ? (seg.words.map((w, wi) => (_jsx(TranscriptWord, { text: w.text, startMs: w.startMs, isActive: active !== undefined &&
                                 active.segmentIndex === si &&
-                                active.wordIndex === wi;
-                            return (_jsxs(React.Fragment, { children: [_jsx("button", { type: "button", "data-testid": `transcript-word-${si}-${wi}`, "data-active": isActive ? "true" : undefined, onClick: () => onSeekMs?.(w.startMs), className: cn("rounded px-0.5 transition-colors hover:bg-bg-muted/40", isActive && "bg-accent/16 text-accent-fg"), children: w.text }), " "] }, `${seg.id}-${w.startMs}-${w.text}`));
-                        })) : (_jsx("button", { type: "button", "data-testid": `transcript-segment-text-${si}`, onClick: () => onSeekMs?.(seg.startMs), className: "text-left", children: seg.text })) })] }, seg.id));
+                                active.wordIndex === wi, testId: `transcript-word-${si}-${wi}`, onSeek: handleSeek }, `${seg.id}-${w.startMs}-${w.text}`)))) : (_jsx("button", { type: "button", "data-testid": `transcript-segment-text-${si}`, onClick: () => handleSeek(seg.startMs), className: "text-left", children: seg.text })) })] }, seg.id));
         }) }));
 }

package/components/transcripts/index.d.ts

@@ -1,5 +1,5 @@
-export { TranscriptBody, type TranscriptBodyProps } from "./TranscriptBody";
-export { TranscriptPlayer, type TranscriptPlayerProps, } from "./TranscriptPlayer";
-export { TranscriptsView, type TranscriptsViewProps } from "./TranscriptsView";
-export { type AudioElementApi, useAudioElement } from "./useAudioElement";
+export { TranscriptBody, type TranscriptBodyProps } from "./TranscriptBody.js";
+export { TranscriptPlayer, type TranscriptPlayerProps, } from "./TranscriptPlayer.js";
+export { TranscriptsView, type TranscriptsViewProps } from "./TranscriptsView.js";
+export { type AudioElementApi, useAudioElement } from "./useAudioElement.js";
 //# sourceMappingURL=index.d.ts.map

package/components/ui/admin-dialog.d.ts

@@ -1,6 +1,6 @@
 import type * as React from "react";
-import { DialogContent } from "./dialog";
-import { type InputProps } from "./input";
+import { DialogContent } from "./dialog.js";
+import { type InputProps } from "./input.js";
 export interface AdminDialogContentProps extends React.ComponentPropsWithoutRef<typeof DialogContent> {
     className?: string;
     children?: React.ReactNode;