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

package/components/shell/useShellVoiceOutput.d.ts

@@ -0,0 +1,38 @@
+import type { ConversationMessage } from "../../api/client-types-chat.js";
+export interface ShellVoiceOutput {
+    /** True while an assistant reply is being spoken aloud. */
+    speaking: boolean;
+    /** Immediately stop any in-flight assistant speech (e.g. on hands-free exit). */
+    stopSpeaking: () => void;
+    /** True while assistant voice output is muted by the user. */
+    agentVoiceMuted: boolean;
+    /** Mute/unmute assistant voice output. Muting stops any in-flight speech. */
+    toggleAgentVoiceMute: () => void;
+    /** True when autoplay policy blocked playback and a user gesture is needed. */
+    needsAudioUnlock: boolean;
+    /** Resume the audio context in response to a user gesture (enable sound). */
+    unlockAudio: () => void;
+}
+export interface ShellVoiceOutputOptions {
+    conversationMessages: readonly ConversationMessage[];
+    chatSending: boolean;
+    /** True while the mic is capturing — barges in on (stops) assistant speech. */
+    recording: boolean;
+    /** True when the latest user turn was voice-originated (`VOICE_DM`). */
+    lastTurnVoice: boolean;
+    uiLanguage: string;
+    cloudConnected: boolean;
+}
+/**
+ * Voice OUTPUT for the ambient `/chat` overlay — speaks assistant replies aloud
+ * so the overlay is bidirectional. Input (mic → ASR) stays in
+ * {@link useShellController} via the capture factory; this hook only drives TTS.
+ *
+ * It reuses the single TTS engine ({@link useVoiceChat}) output-only: it never
+ * calls `startListening`, so it never opens the microphone (the overlay's own
+ * capture owns that). Replies are spoken only after a voice turn — so a
+ * typed-only chat stays silent and a stale greeting is not read on mount — and
+ * only while not muted. A new mic capture barges in and stops playback.
+ */
+export declare function useShellVoiceOutput(options: ShellVoiceOutputOptions): ShellVoiceOutput;
+//# sourceMappingURL=useShellVoiceOutput.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useShellVoiceOutput.d.ts","sourceRoot":"","sources":["../../../../../../src/components/shell/useShellVoiceOutput.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAmBvE,MAAM,WAAW,gBAAgB;IAC/B,2DAA2D;IAC3D,QAAQ,EAAE,OAAO,CAAC;IAClB,iFAAiF;IACjF,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,8DAA8D;IAC9D,eAAe,EAAE,OAAO,CAAC;IACzB,6EAA6E;IAC7E,oBAAoB,EAAE,MAAM,IAAI,CAAC;IACjC,+EAA+E;IAC/E,gBAAgB,EAAE,OAAO,CAAC;IAC1B,6EAA6E;IAC7E,WAAW,EAAE,MAAM,IAAI,CAAC;CACzB;AAED,MAAM,WAAW,uBAAuB;IACtC,oBAAoB,EAAE,SAAS,mBAAmB,EAAE,CAAC;IACrD,WAAW,EAAE,OAAO,CAAC;IACrB,+EAA+E;IAC/E,SAAS,EAAE,OAAO,CAAC;IACnB,wEAAwE;IACxE,aAAa,EAAE,OAAO,CAAC;IACvB,UAAU,EAAE,MAAM,CAAC;IACnB,cAAc,EAAE,OAAO,CAAC;CACzB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,mBAAmB,CACjC,OAAO,EAAE,uBAAuB,GAC/B,gBAAgB,CAgHlB"}

package/components/shell/useShellVoiceOutput.js

@@ -0,0 +1,116 @@
+import * as React from "react";
+import { useVoiceChat } from "../../hooks/useVoiceChat.js";
+import { useVoiceConfig } from "../../voice/useVoiceConfig.js";
+/** `useVoiceChat` requires a transcript sink; the overlay owns input elsewhere. */
+const NOOP_TRANSCRIPT = () => { };
+function findLatestAssistantText(messages) {
+    for (let index = messages.length - 1; index >= 0; index -= 1) {
+        const message = messages[index];
+        if (message && message.role === "assistant" && message.text.trim()) {
+            return { id: message.id, text: message.text, source: message.source };
+        }
+    }
+    return null;
+}
+/**
+ * Voice OUTPUT for the ambient `/chat` overlay — speaks assistant replies aloud
+ * so the overlay is bidirectional. Input (mic → ASR) stays in
+ * {@link useShellController} via the capture factory; this hook only drives TTS.
+ *
+ * It reuses the single TTS engine ({@link useVoiceChat}) output-only: it never
+ * calls `startListening`, so it never opens the microphone (the overlay's own
+ * capture owns that). Replies are spoken only after a voice turn — so a
+ * typed-only chat stays silent and a stale greeting is not read on mount — and
+ * only while not muted. A new mic capture barges in and stops playback.
+ */
+export function useShellVoiceOutput(options) {
+    const { conversationMessages, chatSending, recording, lastTurnVoice, uiLanguage, cloudConnected, } = options;
+    const { voiceConfig, voiceBootstrapTick } = useVoiceConfig(uiLanguage);
+    const [agentVoiceMuted, setAgentVoiceMuted] = React.useState(false);
+    const { queueAssistantSpeech, stopSpeaking, isSpeaking, needsAudioUnlock, unlockAudio, } = useVoiceChat({
+        voiceConfig,
+        cloudConnected,
+        // Output-only here: the overlay's capture owns the mic, so `useVoiceChat`'s
+        // own speech-interrupt path is unused — barge-in is driven by `recording`.
+        interruptOnSpeech: false,
+        onTranscript: NOOP_TRANSCRIPT,
+    });
+    const spokenRef = React.useRef(null);
+    // Voice-ness is decided PER assistant message at the moment it first appears,
+    // not re-checked on every render. `lastTurnVoice` is a single boolean that any
+    // later send (a typed turn, a hands-free re-arm) flips — reading it at speak
+    // time would silence an in-flight voice reply the instant the user typed.
+    // Instead, when a brand-new assistant message arrives we capture its id IFF
+    // the user's most recent turn was voice; from then on that reply is spoken
+    // regardless of subsequent turns. Replies to typed turns are never captured.
+    const voiceReplyIdsRef = React.useRef(new Set());
+    const lastTurnVoiceRef = React.useRef(lastTurnVoice);
+    lastTurnVoiceRef.current = lastTurnVoice;
+    // Speak the latest assistant message as it streams and completes. Never speaks
+    // a reply to a typed message, nor a pre-existing message on first mount.
+    React.useEffect(() => {
+        if (agentVoiceMuted)
+            return;
+        if (voiceBootstrapTick === 0)
+            return; // voice config not loaded yet
+        const latest = findLatestAssistantText(conversationMessages);
+        if (!latest)
+            return;
+        // Proactive interaction comments (#8792) are text-only by default: they must
+        // never be read aloud unless the user is actively hands-free (the latest turn
+        // was voice). The general voice-turn gate below also enforces this for new
+        // messages, but make it explicit so a proactive comment is never spoken just
+        // because an earlier turn happened to be voice.
+        if (latest.source === "proactive-interaction" &&
+            !lastTurnVoiceRef.current) {
+            return;
+        }
+        if (!voiceReplyIdsRef.current.has(latest.id)) {
+            // First sighting of this assistant message: it's a voice reply only if the
+            // turn that prompted it was voice. A typed-turn reply stays silent forever.
+            if (!lastTurnVoiceRef.current)
+                return;
+            voiceReplyIdsRef.current.add(latest.id);
+        }
+        const previous = spokenRef.current;
+        if (previous &&
+            previous.id === latest.id &&
+            previous.text === latest.text) {
+            return;
+        }
+        // A new assistant message replaces prior playback; a streaming continuation
+        // of the same message appends. `queueAssistantSpeech` dedupes the prefix.
+        const replace = previous?.id !== latest.id;
+        spokenRef.current = latest;
+        queueAssistantSpeech(latest.id, latest.text, !chatSending, { replace });
+    }, [
+        agentVoiceMuted,
+        voiceBootstrapTick,
+        conversationMessages,
+        chatSending,
+        queueAssistantSpeech,
+    ]);
+    // Barge-in: the instant the mic opens, stop talking so the user is heard.
+    React.useEffect(() => {
+        if (recording)
+            stopSpeaking();
+    }, [recording, stopSpeaking]);
+    // Muting silences any in-flight reply immediately.
+    React.useEffect(() => {
+        if (agentVoiceMuted)
+            stopSpeaking();
+    }, [agentVoiceMuted, stopSpeaking]);
+    const toggleAgentVoiceMute = React.useCallback(() => {
+        setAgentVoiceMuted((muted) => !muted);
+    }, []);
+    return {
+        speaking: isSpeaking,
+        stopSpeaking,
+        agentVoiceMuted,
+        toggleAgentVoiceMute,
+        // useVoiceChat always returns these; VoiceChatState types them optional, so
+        // coalesce to keep this hook's (and ShellController's) non-optional contract.
+        needsAudioUnlock: needsAudioUnlock ?? false,
+        unlockAudio: unlockAudio ?? (() => { }),
+    };
+}

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/steward/injected.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useBootConfig } from "../../config/boot-config-react.js";
+import { useBootConfig } from "../../config/boot-config-react.hooks.js";
 export function StewardLogo(props) {
     const { stewardLogo: StewardLogoComponent } = useBootConfig();
     return StewardLogoComponent ? _jsx(StewardLogoComponent, { ...props }) : null;

package/components/stream/StatusBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StatusBar.d.ts","sourceRoot":"","sources":["../../../../../../src/components/stream/StatusBar.tsx"],"names":[],"mappings":"AASA,wBAAgB,SAAS,CAAC,EACxB,SAAS,EACT,eAAe,EACf,UAAU,EACV,aAAa,EACb,cAAc,EACd,MAAM,EACN,UAAU,GACX,EAAE;IACD,SAAS,EAAE,MAAM,CAAC;IAClB,eAAe,EAAE,OAAO,CAAC;IACzB,UAAU,EAAE,OAAO,CAAC;IACpB,aAAa,EAAE,OAAO,CAAC;IACvB,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;CACpB,2CAmIA"}
+{"version":3,"file":"StatusBar.d.ts","sourceRoot":"","sources":["../../../../../../src/components/stream/StatusBar.tsx"],"names":[],"mappings":"AAUA,wBAAgB,SAAS,CAAC,EACxB,SAAS,EACT,eAAe,EACf,UAAU,EACV,aAAa,EACb,cAAc,EACd,MAAM,EACN,UAAU,GACX,EAAE;IACD,SAAS,EAAE,MAAM,CAAC;IAClB,eAAe,EAAE,OAAO,CAAC;IACzB,UAAU,EAAE,OAAO,CAAC;IACpB,aAAa,EAAE,OAAO,CAAC;IACvB,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;CACpB,2CAqHA"}

package/components/stream/StatusBar.js

@@ -1,14 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button } from "@elizaos/ui";
 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(() => {
@@ -19,13 +20,11 @@ export function StatusBar({ agentName, streamAvailable, streamLive, streamLoadin
             }
         };
     }, []);
-    return (_jsxs("div", { className: "flex items-center justify-between bg-card/80 shadow-sm 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-xl border border-border/45 bg-card/92 px-2.5 py-1.5 text-xs-tight text-muted-strong shadow-sm 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-xl border px-3 text-xs-tight font-semibold uppercase tracking-[0.16em] shadow-sm 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
@@ -35,17 +34,8 @@ 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-xl border border-border/45 bg-card/92 px-0 py-1.5 text-xs-tight text-muted-strong shadow-sm 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 hover:shadow-md", title: t("statusbar.PopOutStreamView"), onClick: () => {
-                            const apiBase = getBootConfig().apiBase;
-                            const base = window.location.origin || "";
-                            const sep = window.location.protocol === "file:" ||
-                                window.location.protocol === "electrobun:"
-                                ? "#"
-                                : "";
-                            const qs = apiBase
-                                ? `popout&apiBase=${encodeURIComponent(apiBase)}`
-                                : "popout";
-                            const popoutWin = window.open(`${base}${sep}/?${qs}`, "elizaos-stream", "width=1280,height=720,menubar=no,toolbar=no,location=no,status=no");
+                                : 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" }));
                                 if (popoutPollRef.current) {

package/components/stream/popout-url.d.ts

@@ -0,0 +1,3 @@
+export declare function buildStreamPopoutUrl(apiBase?: string): string;
+export declare function openStreamPopout(apiBase?: string): Window | null;
+//# sourceMappingURL=popout-url.d.ts.map

package/components/stream/popout-url.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"popout-url.d.ts","sourceRoot":"","sources":["../../../../../../src/components/stream/popout-url.ts"],"names":[],"mappings":"AAIA,wBAAgB,oBAAoB,CAAC,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAY7D;AAED,wBAAgB,gBAAgB,CAAC,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAMhE"}

package/components/stream/popout-url.js

@@ -0,0 +1,17 @@
+const STREAM_POPOUT_WINDOW_TARGET = "elizaos-stream";
+const STREAM_POPOUT_WINDOW_FEATURES = "width=1280,height=720,menubar=no,toolbar=no,location=no,status=no";
+export function buildStreamPopoutUrl(apiBase) {
+    const base = window.location.origin || "";
+    const sep = window.location.protocol === "file:" ||
+        window.location.protocol === "electrobun:"
+        ? "#"
+        : "";
+    const trimmedApiBase = apiBase?.trim();
+    const qs = trimmedApiBase
+        ? `popout&apiBase=${encodeURIComponent(trimmedApiBase)}`
+        : "popout";
+    return `${base}${sep}/?${qs}`;
+}
+export function openStreamPopout(apiBase) {
+    return window.open(buildStreamPopoutUrl(apiBase), STREAM_POPOUT_WINDOW_TARGET, STREAM_POPOUT_WINDOW_FEATURES);
+}

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

@@ -1,10 +1,8 @@
-import type { NativeToolCallEvent } from "../../api/client-types-cloud";
+import type { NativeToolCallEvent } from "../../api/client-types-cloud.js";
 export interface ToolCallEventLogProps {
     event: NativeToolCallEvent;
     className?: string;
 }
 export type ToolCallEventDisplayState = "running" | "success" | "failure";
-export declare function getToolCallEventDisplayState(event: NativeToolCallEvent): ToolCallEventDisplayState;
-export declare function getToolCallName(event: NativeToolCallEvent): string;
 export declare function ToolCallEventLog({ className, event, }: ToolCallEventLogProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ToolCallEventLog.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ToolCallEventLog.d.ts","sourceRoot":"","sources":["../../../../../../src/components/tool-events/ToolCallEventLog.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAExE,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,mBAAmB,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,MAAM,yBAAyB,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAAC;AAE1E,wBAAgB,4BAA4B,CAC1C,KAAK,EAAE,mBAAmB,GACzB,yBAAyB,CAY3B;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,mBAAmB,GAAG,MAAM,CASlE;AAkED,wBAAgB,gBAAgB,CAAC,EAC/B,SAAc,EACd,KAAK,GACN,EAAE,qBAAqB,2CAuDvB"}
+{"version":3,"file":"ToolCallEventLog.d.ts","sourceRoot":"","sources":["../../../../../../src/components/tool-events/ToolCallEventLog.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAMxE,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,mBAAmB,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,MAAM,yBAAyB,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAAC;AAkE1E,wBAAgB,gBAAgB,CAAC,EAC/B,SAAc,EACd,KAAK,GACN,EAAE,qBAAqB,2CAuDvB"}

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

@@ -0,0 +1,5 @@
+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/tool-events/ToolCallEventLog.helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolCallEventLog.helpers.d.ts","sourceRoot":"","sources":["../../../../../../src/components/tool-events/ToolCallEventLog.helpers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AACxE,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAEpE,wBAAgB,4BAA4B,CAC1C,KAAK,EAAE,mBAAmB,GACzB,yBAAyB,CAY3B;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,mBAAmB,GAAG,MAAM,CASlE"}

package/components/tool-events/ToolCallEventLog.helpers.js

@@ -0,0 +1,19 @@
+export function getToolCallEventDisplayState(event) {
+    if (event.type === "tool_error" || event.status === "failed" || event.error) {
+        return "failure";
+    }
+    if (event.type === "tool_result" ||
+        event.status === "completed" ||
+        event.success === true) {
+        return "success";
+    }
+    return "running";
+}
+export function getToolCallName(event) {
+    return (event.actionName ||
+        event.toolName ||
+        event.name ||
+        event.callId ||
+        event.toolCallId ||
+        "tool");
+}

package/components/tool-events/ToolCallEventLog.js

@@ -1,24 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { CheckCircle, ChevronDown, Clock3, XCircle } from "lucide-react";
-export function getToolCallEventDisplayState(event) {
-    if (event.type === "tool_error" || event.status === "failed" || event.error) {
-        return "failure";
-    }
-    if (event.type === "tool_result" ||
-        event.status === "completed" ||
-        event.success === true) {
-        return "success";
-    }
-    return "running";
-}
-export function getToolCallName(event) {
-    return (event.actionName ||
-        event.toolName ||
-        event.name ||
-        event.callId ||
-        event.toolCallId ||
-        "tool");
-}
+import { getToolCallEventDisplayState, getToolCallName, } from "./ToolCallEventLog.helpers.js";
 function previewValue(value) {
     if (value == null)
         return "—";
@@ -73,9 +55,9 @@ export function ToolCallEventLog({ className = "", event, }) {
     const actionName = getToolCallName(event);
     const args = event.args ?? event.input;
     const result = event.result ?? event.output ?? event.error;
-    return (_jsxs("div", { className: `rounded-lg border border-border/50 bg-bg/40 px-4 py-3 ${className}`, "data-testid": "tool-call-event-log", children: [_jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between", children: [_jsxs("div", { className: "min-w-0", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: `shrink-0 ${state === "failure"
+    return (_jsxs("div", { className: `rounded-sm border border-border/50 bg-bg/40 px-4 py-3 ${className}`, "data-testid": "tool-call-event-log", children: [_jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between", children: [_jsxs("div", { className: "min-w-0", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: `shrink-0 ${state === "failure"
                                             ? "text-danger"
                                             : state === "success"
                                                 ? "text-success"
-                                                : "text-primary"}`, children: _jsx(StateIcon, { state: state }) }), _jsx("div", { className: "truncate text-sm font-semibold text-txt", children: actionName })] }), _jsxs("div", { className: "mt-1 text-xs-tight text-muted", children: [event.stage ? String(event.stage).replace(/_/g, " ") : "tool", event.durationMs || event.duration ? (_jsxs(_Fragment, { children: [" - ", event.durationMs ?? event.duration, "ms"] })) : null] })] }), _jsx(StatePill, { state: state })] }), _jsxs("div", { className: "mt-3 grid gap-3 md:grid-cols-2", children: [_jsx(PreviewRow, { label: "Args", value: truncate(previewValue(args)) }), _jsx(PreviewRow, { label: "Result", value: truncate(previewValue(result)) })] }), _jsxs("details", { className: "group mt-3", children: [_jsxs("summary", { className: "flex cursor-pointer select-none items-center gap-1 text-xs-tight font-semibold text-muted hover:text-txt", children: [_jsx(ChevronDown, { className: "h-3.5 w-3.5 transition-transform group-open:rotate-180" }), "JSON details"] }), _jsx("pre", { className: "mt-2 max-h-[24rem] overflow-x-auto overflow-y-auto whitespace-pre-wrap break-words rounded-lg border border-border/40 bg-bg/60 px-3 py-3 text-xs leading-6 text-txt", children: formatJson(event) })] })] }));
+                                                : "text-primary"}`, children: _jsx(StateIcon, { state: state }) }), _jsx("div", { className: "truncate text-sm font-semibold text-txt", children: actionName })] }), _jsxs("div", { className: "mt-1 text-xs-tight text-muted", children: [event.stage ? String(event.stage).replace(/_/g, " ") : "tool", event.durationMs || event.duration ? (_jsxs(_Fragment, { children: [" - ", event.durationMs ?? event.duration, "ms"] })) : null] })] }), _jsx(StatePill, { state: state })] }), _jsxs("div", { className: "mt-3 grid gap-3 md:grid-cols-2", children: [_jsx(PreviewRow, { label: "Args", value: truncate(previewValue(args)) }), _jsx(PreviewRow, { label: "Result", value: truncate(previewValue(result)) })] }), _jsxs("details", { className: "group mt-3", children: [_jsxs("summary", { className: "flex cursor-pointer select-none items-center gap-1 text-xs-tight font-semibold text-muted hover:text-txt", children: [_jsx(ChevronDown, { className: "h-3.5 w-3.5 transition-transform group-open:rotate-180" }), "JSON details"] }), _jsx("pre", { className: "mt-2 max-h-[24rem] overflow-x-auto overflow-y-auto whitespace-pre-wrap break-words rounded-sm border border-border/40 bg-bg/60 px-3 py-3 text-xs leading-6 text-txt", children: formatJson(event) })] })] }));
 }

package/components/training/BudgetPanel.d.ts

@@ -0,0 +1,14 @@
+interface BudgetPanelProps {
+    jobId: string;
+}
+/**
+ * Running-cost panel for a Vast.ai training job (M9).
+ *
+ * Renders the live `dph_total × uptime` snapshot plus the soft / hard
+ * budget caps from `ELIZA_VAST_MAX_USD`. The hard cap is enforced by
+ * the watcher (auto-teardown) — this panel only displays state, it
+ * does not call any destructive endpoint.
+ */
+export declare function BudgetPanel({ jobId }: BudgetPanelProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=BudgetPanel.d.ts.map

package/components/training/BudgetPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BudgetPanel.d.ts","sourceRoot":"","sources":["../../../../../../src/components/training/BudgetPanel.tsx"],"names":[],"mappings":"AAUA,UAAU,gBAAgB;IACxB,KAAK,EAAE,MAAM,CAAC;CACf;AA8DD;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,EAAE,gBAAgB,2CA0HtD"}

package/components/training/BudgetPanel.js

@@ -0,0 +1,91 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Loader2 } from "lucide-react";
+import { useTranslation, } from "../../state/TranslationContext.hooks.js";
+import { useTrainingBudget } from "./hooks/useTrainingApi.js";
+function formatUsd(n) {
+    return `$${n.toFixed(2)}`;
+}
+function BudgetGauge({ budget, t, }) {
+    // Compute the bar fill percentage as a fraction of the hard cap (1.5×
+    // soft). When no cap is configured we anchor against $50 just so the
+    // bar has a sensible visible domain — the gauge is informational only
+    // in the unbounded case.
+    const cap = budget.hard_cap_usd ?? Math.max(50, budget.total_so_far_usd * 1.5);
+    const fraction = Math.min(1, budget.total_so_far_usd / cap);
+    const pct = fraction * 100;
+    let barColor = "bg-green-500";
+    if (budget.over_hard) {
+        barColor = "bg-red-500";
+    }
+    else if (budget.over_soft) {
+        barColor = "bg-amber-500";
+    }
+    else if (budget.soft_cap_usd !== null && fraction > 0.66) {
+        barColor = "bg-amber-400";
+    }
+    return (_jsxs("div", { className: "space-y-1", children: [_jsx("div", { className: "h-2 w-full bg-card border border-border rounded-sm overflow-hidden", children: _jsx("div", { className: `h-full ${barColor} transition-all`, style: { width: `${pct}%` } }) }), _jsxs("div", { className: "flex justify-between text-[10px] text-muted", children: [_jsx("span", { children: formatUsd(0) }), budget.soft_cap_usd !== null && (_jsx("span", { children: t("budgetpanel.softCap", {
+                            amount: formatUsd(budget.soft_cap_usd),
+                            defaultValue: "soft {{amount}}",
+                        }) })), budget.hard_cap_usd !== null && (_jsx("span", { children: t("budgetpanel.hardCap", {
+                            amount: formatUsd(budget.hard_cap_usd),
+                            defaultValue: "hard {{amount}}",
+                        }) }))] })] }));
+}
+/**
+ * Running-cost panel for a Vast.ai training job (M9).
+ *
+ * Renders the live `dph_total × uptime` snapshot plus the soft / hard
+ * budget caps from `ELIZA_VAST_MAX_USD`. The hard cap is enforced by
+ * the watcher (auto-teardown) — this panel only displays state, it
+ * does not call any destructive endpoint.
+ */
+export function BudgetPanel({ jobId }) {
+    const { t } = useTranslation();
+    const { data: budget, loading, error } = useTrainingBudget(jobId);
+    if (loading && !budget) {
+        return (_jsxs("div", { className: "border border-border rounded-sm p-3 bg-card flex items-center gap-2", children: [_jsx(Loader2, { className: "w-3 h-3 animate-spin" }), _jsx("span", { className: "text-xs text-muted", children: t("budgetpanel.loading", {
+                        defaultValue: "Loading running cost...",
+                    }) })] }));
+    }
+    if (error) {
+        return (_jsx("div", { className: "border border-border rounded-sm p-3 bg-red-500/10", children: _jsx("div", { className: "text-xs text-red-500", children: t("budgetpanel.unavailable", {
+                    error,
+                    defaultValue: "Budget unavailable: {{error}}",
+                }) }) }));
+    }
+    if (!budget) {
+        return (_jsx("div", { className: "border border-border rounded-sm p-3 bg-card", children: _jsx("div", { className: "text-xs text-muted", children: t("budgetpanel.noInstance", {
+                    defaultValue: "No Vast instance provisioned yet — running cost will appear once the instance is up.",
+                }) }) }));
+    }
+    const stateClass = budget.over_hard
+        ? "text-red-500"
+        : budget.over_soft
+            ? "text-amber-500"
+            : "text-green-500";
+    return (_jsxs("div", { className: "border border-border rounded-sm p-3 bg-card space-y-3", children: [_jsxs("div", { className: "flex items-start justify-between gap-3", children: [_jsxs("div", { children: [_jsx("div", { className: "text-xs text-muted uppercase tracking-wide", children: t("budgetpanel.runningCost", { defaultValue: "Running Cost" }) }), _jsx("div", { className: "text-lg font-semibold text-txt-strong font-mono", children: formatUsd(budget.total_so_far_usd) }), _jsx("div", { className: "text-[11px] text-muted", children: t("budgetpanel.rateUptime", {
+                                    rate: formatUsd(budget.dph_total),
+                                    uptime: budget.uptime_pretty,
+                                    defaultValue: "{{rate}}/hr × {{uptime}}",
+                                }) })] }), _jsxs("div", { className: "text-right", children: [_jsx("div", { className: "text-xs text-muted uppercase tracking-wide", children: t("budgetpanel.pipeline", { defaultValue: "Pipeline" }) }), _jsx("div", { className: "text-xs font-mono text-txt", children: budget.pipeline }), _jsx("div", { className: "text-[11px] text-muted", children: budget.gpu_sku })] })] }), _jsx(BudgetGauge, { budget: budget, t: t }), _jsxs("div", { className: "grid grid-cols-2 gap-2 text-[11px]", children: [_jsxs("div", { children: [_jsx("div", { className: "text-muted", children: t("budgetpanel.softCapLabel", { defaultValue: "Soft cap" }) }), _jsx("div", { className: "text-txt font-mono", children: budget.soft_cap_usd !== null
+                                    ? formatUsd(budget.soft_cap_usd)
+                                    : t("budgetpanel.unset", { defaultValue: "unset" }) })] }), _jsxs("div", { children: [_jsx("div", { className: "text-muted", children: t("budgetpanel.hardCapLabel", {
+                                    defaultValue: "Hard cap (auto-teardown)",
+                                }) }), _jsx("div", { className: "text-txt font-mono", children: budget.hard_cap_usd !== null
+                                    ? formatUsd(budget.hard_cap_usd)
+                                    : t("budgetpanel.unset", { defaultValue: "unset" }) })] })] }), _jsx("div", { className: `text-[11px] font-semibold ${stateClass}`, children: budget.over_hard
+                    ? t("budgetpanel.overHard", {
+                        defaultValue: "OVER HARD CAP — auto-teardown initiated",
+                    })
+                    : budget.over_soft
+                        ? t("budgetpanel.overSoft", {
+                            defaultValue: "OVER SOFT CAP — warning",
+                        })
+                        : budget.soft_cap_usd !== null
+                            ? t("budgetpanel.withinBudget", {
+                                defaultValue: "Within budget",
+                            })
+                            : t("budgetpanel.enforcementDisabled", {
+                                defaultValue: "Enforcement disabled (set ELIZA_VAST_MAX_USD)",
+                            }) })] }));
+}

package/components/training/InferenceEndpointPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InferenceEndpointPanel.d.ts","sourceRoot":"","sources":["../../../../../../src/components/training/InferenceEndpointPanel.tsx"],"names":[],"mappings":"AA2DA,wBAAgB,sBAAsB,4CAyLrC"}
+{"version":3,"file":"InferenceEndpointPanel.d.ts","sourceRoot":"","sources":["../../../../../../src/components/training/InferenceEndpointPanel.tsx"],"names":[],"mappings":"AAoEA,wBAAgB,sBAAsB,4CA2OrC"}

package/components/training/InferenceEndpointPanel.js

@@ -1,22 +1,28 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, Input } from "@elizaos/ui";
 import { Loader2, Plus, Trash2 } from "lucide-react";
 import { useCallback, useState } from "react";
+import { useTranslation } from "../../state/TranslationContext.hooks.js";
+import { Button } from "../ui/button.js";
+import { Input } from "../ui/input.js";
 import { useCreateInferenceEndpoint, useDeleteInferenceEndpoint, useInferenceEndpoints, useInferenceStats, } from "./hooks/useTrainingApi.js";
 function StatsCard({ label, value, unit, }) {
-    return (_jsxs("div", { className: "border border-border rounded p-2 text-center bg-card/50", children: [_jsx("div", { className: "text-xs text-muted mb-1", children: label }), _jsx("div", { className: "text-sm font-semibold text-txt-strong", children: value !== null ? `${value.toFixed(2)} ${unit}` : "—" })] }));
+    return (_jsxs("div", { className: "border border-border rounded-sm p-2 text-center bg-card/50", children: [_jsx("div", { className: "text-xs text-muted mb-1", children: label }), _jsx("div", { className: "text-sm font-semibold text-txt-strong", children: value !== null ? `${value.toFixed(2)} ${unit}` : "—" })] }));
 }
 function EndpointStats({ label }) {
+    const { t } = useTranslation();
     const { data: stats, loading, error } = useInferenceStats(label);
     if (error) {
         return _jsx("div", { className: "text-xs text-red-500", children: error });
     }
     if (loading || !stats) {
-        return _jsx("div", { className: "text-xs text-muted", children: "Loading stats..." });
+        return (_jsx("div", { className: "text-xs text-muted", children: t("inferenceendpoint.loadingStats", {
+                defaultValue: "Loading stats...",
+            }) }));
     }
     return (_jsxs("div", { className: "grid grid-cols-2 gap-2", children: [_jsx(StatsCard, { label: "p50 TPS", value: stats.p50_tps, unit: "tok/s" }), _jsx(StatsCard, { label: "p95 TPS", value: stats.p95_tps, unit: "tok/s" }), _jsx(StatsCard, { label: "p50 TPOT", value: stats.p50_tpot_ms, unit: "ms" }), _jsx(StatsCard, { label: "p95 TPOT", value: stats.p95_tpot_ms, unit: "ms" }), _jsx(StatsCard, { label: "KV Cache", value: stats.kv_usage_pct, unit: "%" }), _jsx(StatsCard, { label: "Peak VRAM", value: stats.peak_vram_mb, unit: "MB" }), _jsx(StatsCard, { label: "Spec Decode", value: stats.spec_decode_accept_rate, unit: "%" }), _jsx(StatsCard, { label: "APC Hit", value: stats.apc_hit_rate, unit: "%" })] }));
 }
 export function InferenceEndpointPanel() {
+    const { t } = useTranslation();
     const { data: endpoints, loading, error, refetch } = useInferenceEndpoints();
     const { create, loading: createLoading } = useCreateInferenceEndpoint();
     const { delete: deleteEndpoint, loading: deleteLoading } = useDeleteInferenceEndpoint();
@@ -25,11 +31,14 @@ export function InferenceEndpointPanel() {
     const [baseUrl, setBaseUrl] = useState("");
     const [model, setModel] = useState("");
     const [createErrorMsg, setCreateErrorMsg] = useState(null);
+    const [deleteErrorMsg, setDeleteErrorMsg] = useState(null);
     const [expandedId, setExpandedId] = useState(null);
     const handleCreate = useCallback(async () => {
         setCreateErrorMsg(null);
         if (!label || !baseUrl || !model) {
-            setCreateErrorMsg("All fields required");
+            setCreateErrorMsg(t("inferenceendpoint.allFieldsRequired", {
+                defaultValue: "All fields required",
+            }));
             return;
         }
         try {
@@ -41,23 +50,55 @@ export function InferenceEndpointPanel() {
             await refetch();
         }
         catch (err) {
-            setCreateErrorMsg(err instanceof Error ? err.message : "Failed to create endpoint");
+            setCreateErrorMsg(err instanceof Error
+                ? err.message
+                : t("inferenceendpoint.createError", {
+                    defaultValue: "Failed to create endpoint",
+                }));
         }
-    }, [label, baseUrl, model, create, refetch]);
+    }, [label, baseUrl, model, create, refetch, t]);
     const handleDelete = useCallback(async (endpointId) => {
+        setDeleteErrorMsg(null);
         try {
             await deleteEndpoint(endpointId);
             await refetch();
         }
         catch (err) {
-            console.error("Failed to delete endpoint:", err);
+            setDeleteErrorMsg(err instanceof Error
+                ? err.message
+                : t("inferenceendpoint.deleteError", {
+                    defaultValue: "Failed to delete endpoint",
+                }));
         }
-    }, [deleteEndpoint, refetch]);
+    }, [deleteEndpoint, refetch, t]);
     if (error) {
-        return (_jsx("div", { className: "p-4 border border-border rounded bg-red-500/10", children: _jsx("div", { className: "text-sm text-red-500", children: error }) }));
+        return (_jsx("div", { className: "p-4 border border-border rounded-sm bg-red-500/10", children: _jsx("div", { className: "text-sm text-red-500", children: error }) }));
     }
     if (loading) {
-        return (_jsxs("div", { className: "p-4 flex items-center gap-2", children: [_jsx(Loader2, { className: "w-4 h-4 animate-spin" }), _jsx("span", { className: "text-sm", children: "Loading endpoints..." })] }));
+        return (_jsxs("div", { className: "p-4 flex items-center gap-2", children: [_jsx(Loader2, { className: "w-4 h-4 animate-spin" }), _jsx("span", { className: "text-sm", children: t("inferenceendpoint.loadingEndpoints", {
+                        defaultValue: "Loading endpoints...",
+                    }) })] }));
     }
-    return (_jsxs("div", { className: "space-y-4", children: [showCreate ? (_jsxs("div", { className: "border border-border rounded p-4 bg-card space-y-3", children: [_jsx("div", { className: "text-sm font-semibold", children: "Add Inference Endpoint" }), createErrorMsg && (_jsx("div", { className: "text-xs text-red-500 bg-red-500/10 p-2 rounded", children: createErrorMsg })), _jsx(Input, { type: "text", placeholder: "Label", value: label, onChange: (e) => setLabel(e.target.value), className: "text-sm" }), _jsx(Input, { type: "text", placeholder: "Base URL", value: baseUrl, onChange: (e) => setBaseUrl(e.target.value), className: "text-sm" }), _jsx(Input, { type: "text", placeholder: "Model ID", value: model, onChange: (e) => setModel(e.target.value), className: "text-sm" }), _jsxs("div", { className: "flex gap-2", children: [_jsxs(Button, { variant: "default", size: "sm", onClick: handleCreate, disabled: createLoading, className: "flex-1", children: [createLoading && (_jsx(Loader2, { className: "w-3 h-3 mr-1 animate-spin" })), "Create"] }), _jsx(Button, { variant: "outline", size: "sm", onClick: () => setShowCreate(false), className: "flex-1", children: "Cancel" })] })] })) : (_jsxs(Button, { variant: "outline", size: "sm", onClick: () => setShowCreate(true), className: "w-full", children: [_jsx(Plus, { className: "w-4 h-4" }), "Add Endpoint"] })), _jsx("div", { className: "space-y-3", children: endpoints && endpoints.length > 0 ? (endpoints.map((endpoint) => (_jsxs("div", { className: "border border-border rounded p-3 bg-card space-y-2", children: [_jsxs("div", { className: "flex items-start justify-between gap-2", children: [_jsxs("div", { children: [_jsx("div", { className: "text-sm font-semibold text-txt-strong", children: endpoint.label }), _jsx("div", { className: "text-xs text-muted font-mono", children: endpoint.base_url }), _jsxs("div", { className: "text-xs text-muted", children: ["Model: ", endpoint.model] })] }), _jsx(Button, { variant: "ghost", size: "sm", onClick: () => handleDelete(endpoint.id), disabled: deleteLoading, className: "text-red-500 hover:text-red-600", children: deleteLoading ? (_jsx(Loader2, { className: "w-4 h-4 animate-spin" })) : (_jsx(Trash2, { className: "w-4 h-4" })) })] }), _jsx("button", { type: "button", onClick: () => setExpandedId(expandedId === endpoint.id ? null : endpoint.id), className: "text-xs text-accent hover:underline", children: expandedId === endpoint.id ? "Hide stats" : "Show stats" }), expandedId === endpoint.id && (_jsx(EndpointStats, { label: endpoint.label }))] }, endpoint.id)))) : (_jsx("div", { className: "text-xs text-muted p-4 text-center border border-border rounded", children: "No inference endpoints configured" })) })] }));
+    return (_jsxs("div", { className: "space-y-4", children: [showCreate ? (_jsxs("div", { className: "border border-border rounded-sm p-4 bg-card space-y-3", children: [_jsx("div", { className: "text-sm font-semibold", children: t("inferenceendpoint.addTitle", {
+                            defaultValue: "Add Inference Endpoint",
+                        }) }), createErrorMsg && (_jsx("div", { className: "text-xs text-red-500 bg-red-500/10 p-2 rounded-sm", children: createErrorMsg })), _jsx(Input, { type: "text", placeholder: t("inferenceendpoint.labelPlaceholder", {
+                            defaultValue: "Label",
+                        }), value: label, onChange: (e) => setLabel(e.target.value), className: "text-sm" }), _jsx(Input, { type: "text", placeholder: t("inferenceendpoint.baseUrlPlaceholder", {
+                            defaultValue: "Base URL",
+                        }), value: baseUrl, onChange: (e) => setBaseUrl(e.target.value), className: "text-sm" }), _jsx(Input, { type: "text", placeholder: t("inferenceendpoint.modelPlaceholder", {
+                            defaultValue: "Model ID",
+                        }), value: model, onChange: (e) => setModel(e.target.value), className: "text-sm" }), _jsxs("div", { className: "flex gap-2", children: [_jsxs(Button, { variant: "default", size: "sm", onClick: handleCreate, disabled: createLoading, className: "flex-1", children: [createLoading && (_jsx(Loader2, { className: "w-3 h-3 mr-1 animate-spin" })), t("inferenceendpoint.create", { defaultValue: "Create" })] }), _jsx(Button, { variant: "outline", size: "sm", onClick: () => setShowCreate(false), className: "flex-1", children: t("inferenceendpoint.cancel", { defaultValue: "Cancel" }) })] })] })) : (_jsxs(Button, { variant: "outline", size: "sm", onClick: () => setShowCreate(true), className: "w-full", children: [_jsx(Plus, { className: "w-4 h-4" }), t("inferenceendpoint.addEndpoint", {
+                        defaultValue: "Add Endpoint",
+                    })] })), deleteErrorMsg && (_jsx("div", { className: "text-xs text-red-500 bg-red-500/10 p-2 rounded", children: deleteErrorMsg })), _jsx("div", { className: "space-y-3", children: endpoints && endpoints.length > 0 ? (endpoints.map((endpoint) => (_jsxs("div", { className: "border border-border rounded-sm p-3 bg-card space-y-2", children: [_jsxs("div", { className: "flex items-start justify-between gap-2", children: [_jsxs("div", { children: [_jsx("div", { className: "text-sm font-semibold text-txt-strong", children: endpoint.label }), _jsx("div", { className: "text-xs text-muted font-mono", children: endpoint.base_url }), _jsx("div", { className: "text-xs text-muted", children: t("inferenceendpoint.modelLabel", {
+                                                model: endpoint.model,
+                                                defaultValue: "Model: {{model}}",
+                                            }) })] }), _jsx(Button, { variant: "ghost", size: "sm", onClick: () => handleDelete(endpoint.id), disabled: deleteLoading, className: "text-red-500 hover:text-red-600", children: deleteLoading ? (_jsx(Loader2, { className: "w-4 h-4 animate-spin" })) : (_jsx(Trash2, { className: "w-4 h-4" })) })] }), _jsx("button", { type: "button", onClick: () => setExpandedId(expandedId === endpoint.id ? null : endpoint.id), className: "text-xs text-accent hover:underline", children: expandedId === endpoint.id
+                                ? t("inferenceendpoint.hideStats", {
+                                    defaultValue: "Hide stats",
+                                })
+                                : t("inferenceendpoint.showStats", {
+                                    defaultValue: "Show stats",
+                                }) }), expandedId === endpoint.id && (_jsx(EndpointStats, { label: endpoint.label }))] }, endpoint.id)))) : (_jsx("div", { className: "text-xs text-muted p-4 text-center border border-border rounded-sm", children: t("inferenceendpoint.noEndpoints", {
+                        defaultValue: "No inference endpoints configured",
+                    }) })) })] }));
 }

package/components/training/JobDetailPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"JobDetailPanel.d.ts","sourceRoot":"","sources":["../../../../../../src/components/training/JobDetailPanel.tsx"],"names":[],"mappings":"AAUA,UAAU,mBAAmB;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAoJD,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,mBAAmB,2CA2JrE"}
+{"version":3,"file":"JobDetailPanel.d.ts","sourceRoot":"","sources":["../../../../../../src/components/training/JobDetailPanel.tsx"],"names":[],"mappings":"AAYA,UAAU,mBAAmB;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AA6KD,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,mBAAmB,2CAgMrE"}