@iloveagents/foundry-web-ui 0.4.0 → 0.5.0

package/dist/components/assistant-chat.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState, useRef, useCallback } from "react";
-import { ThreadPrimitive, ComposerPrimitive, MessagePrimitive, ActionBarPrimitive, BranchPickerPrimitive, ErrorPrimitive, useAuiState, useComposerRuntime, useThreadViewport, } from "@assistant-ui/react";
+import { ThreadPrimitive, ComposerPrimitive, MessagePrimitive, ActionBarPrimitive, BranchPickerPrimitive, useAuiState, useComposerRuntime, useThreadViewport, } from "@assistant-ui/react";
 import { ArrowUp, Copy, Check, RefreshCw, PencilIcon, ChevronLeft, ChevronRight, ChevronDown, Square, Bot, Paperclip, Minimize2, PanelRightClose, PanelRightOpen, } from "lucide-react";
 import { cn } from "@iloveagents/foundry-web-primitives";
 import { Button } from "@iloveagents/foundry-web-primitives";
@@ -13,18 +13,19 @@ import { useChatBubbleStore } from "../lib/chat-bubble-store.js";
 import { MarkdownText } from "./markdown-text.js";
 import { ToolFallback } from "./tool-fallback.js";
 import { LoadingIndicator, LoadingBar } from "./loading-indicator.js";
+import { MessageTimestamp } from "./message-timestamp.js";
+import { MessageError } from "./message-error.js";
 const BranchPicker = () => (_jsxs(BranchPickerPrimitive.Root, { hideWhenSingleBranch: true, className: "inline-flex items-center gap-1 text-xs", children: [_jsx(BranchPickerPrimitive.Previous, { asChild: true, children: _jsx(TooltipIconButton, { tooltip: "Previous", size: "icon", children: _jsx(ChevronLeft, { className: "size-4" }) }) }), _jsxs("span", { className: "text-muted-foreground", children: [_jsx(BranchPickerPrimitive.Number, {}), " / ", _jsx(BranchPickerPrimitive.Count, {})] }), _jsx(BranchPickerPrimitive.Next, { asChild: true, children: _jsx(TooltipIconButton, { tooltip: "Next", size: "icon", children: _jsx(ChevronRight, { className: "size-4" }) }) })] }));
 const UserMessage = () => {
     const messageId = useAuiState((s) => s.message.id);
-    return (_jsx(MessagePrimitive.Root, { className: "w-full mb-2 group", children: _jsxs("div", { className: "flex flex-col items-end gap-1", children: [_jsx(MessagePrimitive.Attachments, { components: userAttachmentComponents }), _jsx(SentContextBadges, { messageId: messageId }), _jsx("div", { className: cn("max-w-[80%]", "bg-muted rounded-2xl", "px-4 py-3", "text-foreground"), children: _jsx(MessagePrimitive.Content, {}) }), _jsxs("div", { className: "flex h-8 items-center justify-end gap-2 pr-2", children: [_jsx(BranchPicker, {}), _jsx("div", { className: "flex h-8 w-10 items-center justify-end", children: _jsx(UserActionBar, {}) })] })] }) }));
+    return (_jsx(MessagePrimitive.Root, { className: "w-full mb-2 group", children: _jsxs("div", { className: "flex flex-col items-end gap-1", children: [_jsx(MessagePrimitive.Attachments, { components: userAttachmentComponents }), _jsx(SentContextBadges, { messageId: messageId }), _jsx("div", { className: cn("max-w-[80%]", "bg-muted rounded-2xl", "px-4 py-3", "text-foreground"), children: _jsx(MessagePrimitive.Content, {}) }), _jsxs("div", { className: "flex h-8 items-center justify-end gap-2 pr-2", children: [_jsx(MessageTimestamp, {}), _jsx(BranchPicker, {}), _jsx("div", { className: "flex h-8 w-10 items-center justify-end", children: _jsx(UserActionBar, {}) })] })] }) }));
 };
 const UserActionBar = () => (_jsx(ActionBarPrimitive.Root, { hideWhenRunning: true, className: "flex items-center opacity-0 group-hover:opacity-100 transition-opacity", children: _jsx(ActionBarPrimitive.Edit, { asChild: true, children: _jsx(TooltipIconButton, { tooltip: "Edit", size: "icon", children: _jsx(PencilIcon, { className: "size-4" }) }) }) }));
 const AssistantMessage = () => (_jsx(MessagePrimitive.Root, { className: "w-full mb-2 group", children: _jsxs("div", { className: "mx-auto max-w-3xl px-4", children: [_jsx("div", { className: "text-foreground leading-relaxed flex flex-col gap-4", children: _jsx(MessagePrimitive.Parts, { components: {
                         Text: MarkdownText,
                         tools: { Fallback: ToolFallback },
-                    } }) }), _jsx(MessageError, {}), _jsxs("div", { className: "flex items-center gap-2 mt-1", children: [_jsx("div", { className: "flex h-8 w-[4.25rem] items-center", children: _jsx(AssistantActionBar, {}) }), _jsx(BranchPicker, {})] })] }) }));
+                    } }) }), _jsx(MessageError, {}), _jsxs("div", { className: "flex items-center gap-2 mt-1", children: [_jsx("div", { className: "flex h-8 w-[4.25rem] items-center", children: _jsx(AssistantActionBar, {}) }), _jsx(BranchPicker, {}), _jsx(MessageTimestamp, {})] })] }) }));
 const AssistantActionBar = () => (_jsxs(ActionBarPrimitive.Root, { hideWhenRunning: true, className: cn("pointer-events-none flex items-center gap-1 -ml-2 opacity-0 transition-opacity", "group-hover:pointer-events-auto group-hover:opacity-100", "group-focus-within:pointer-events-auto group-focus-within:opacity-100"), children: [_jsx(ActionBarPrimitive.Copy, { asChild: true, children: _jsxs(TooltipIconButton, { tooltip: "Copy", size: "icon", children: [_jsx(MessagePrimitive.If, { copied: false, children: _jsx(Copy, { className: "size-4" }) }), _jsx(MessagePrimitive.If, { copied: true, children: _jsx(Check, { className: "size-4 text-primary" }) })] }) }), _jsx(ActionBarPrimitive.Reload, { asChild: true, children: _jsx(TooltipIconButton, { tooltip: "Refresh", size: "icon", children: _jsx(RefreshCw, { className: "size-4" }) }) })] }));
-const MessageError = () => (_jsx(MessagePrimitive.Error, { children: _jsx(ErrorPrimitive.Root, { className: "mt-2 rounded-lg border border-destructive bg-destructive/10 p-3", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-sm font-medium text-destructive", children: "Error:" }), _jsx(ErrorPrimitive.Message, { className: "text-sm text-destructive" })] }) }) }));
 const EditComposer = () => (_jsx(MessagePrimitive.Root, { className: "w-full mb-2", children: _jsx("div", { className: "flex items-start justify-end", children: _jsx("div", { className: "w-full max-w-[80%]", children: _jsxs(ComposerPrimitive.Root, { className: cn("flex flex-col gap-2", "rounded-2xl border border-input", "bg-background shadow-sm", "px-4 py-3"), children: [_jsx(ComposerPrimitive.Input, { autoFocus: true, className: cn("w-full bg-transparent", "text-base text-foreground", "outline-none resize-none", "placeholder:text-muted-foreground") }), _jsxs("div", { className: "flex items-center justify-end gap-2", children: [_jsx(ComposerPrimitive.Cancel, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "sm", children: "Cancel" }) }), _jsx(ComposerPrimitive.Send, { asChild: true, children: _jsx(Button, { size: "sm", children: "Update" }) })] })] }) }) }) }));
 const ComposerActionButton = () => {
     return (_jsxs(_Fragment, { children: [_jsx(ThreadPrimitive.If, { running: true, children: _jsx(ComposerPrimitive.Cancel, { asChild: true, children: _jsx(Button, { variant: "secondary", size: "icon", className: "rounded-full size-10 flex-shrink-0", "aria-label": "Stop generating", children: _jsx(Square, { className: "size-4" }) }) }) }), _jsx(ThreadPrimitive.If, { running: false, children: _jsx(ComposerPrimitive.Send, { asChild: true, children: _jsx(Button, { size: "icon", className: "rounded-full size-10 flex-shrink-0", "aria-label": "Send message", children: _jsx(ArrowUp, { className: "size-5" }) }) }) })] }));

package/dist/components/chat-bubble.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useRef, useState } from "react";
 import { ThreadPrimitive, ComposerPrimitive, MessagePrimitive, ActionBarPrimitive, useAuiState, useThreadViewport, } from "@assistant-ui/react";
-import { MessageSquare, X, Maximize2, SquarePen, ArrowUp, Square, ChevronDown, Copy, Check, Paperclip, } from "lucide-react";
+import { MessageSquare, X, Maximize2, SquarePen, ArrowUp, Square, ChevronDown, Copy, Check, Paperclip, RefreshCw, } from "lucide-react";
 import { cn } from "@iloveagents/foundry-web-primitives";
 import { Button } from "@iloveagents/foundry-web-primitives";
 import { TooltipIconButton } from "./tooltip-icon-button.js";
@@ -10,6 +10,8 @@ import { ComposerContextBadges, SentContextBadges } from "./context-badges.js";
 import { ComposerSubmitBridge } from "./composer-submit-bridge.js";
 import { MarkdownText } from "./markdown-text.js";
 import { LoadingIndicator } from "./loading-indicator.js";
+import { MessageTimestamp } from "./message-timestamp.js";
+import { MessageError } from "./message-error.js";
 import { useAppStore } from "../lib/app-store.js";
 import { useChatBubbleStore } from "../lib/chat-bubble-store.js";
 import { useNewConversation } from "../lib/use-new-conversation.js";
@@ -18,7 +20,7 @@ const CHAT_BUBBLE_INSET = 8;
 function BubbleAssistantMessage() {
     return (_jsxs(MessagePrimitive.Root, { className: "w-full mb-2 group", children: [_jsx("div", { className: "text-foreground text-sm leading-relaxed flex flex-col gap-2", children: _jsx(MessagePrimitive.Parts, { components: {
                         Text: MarkdownText,
-                    } }) }), _jsx("div", { className: "flex h-7 w-8 items-center mt-1", children: _jsx(ActionBarPrimitive.Root, { hideWhenRunning: true, className: cn("pointer-events-none flex items-center gap-1 opacity-0 transition-opacity", "group-hover:pointer-events-auto group-hover:opacity-100", "group-focus-within:pointer-events-auto group-focus-within:opacity-100"), children: _jsx(ActionBarPrimitive.Copy, { asChild: true, children: _jsxs(TooltipIconButton, { tooltip: "Copy", size: "icon", className: "size-7", children: [_jsx(MessagePrimitive.If, { copied: false, children: _jsx(Copy, { className: "size-3" }) }), _jsx(MessagePrimitive.If, { copied: true, children: _jsx(Check, { className: "size-3 text-primary" }) })] }) }) }) })] }));
+                    } }) }), _jsx(MessageError, { compact: true }), _jsxs("div", { className: "flex h-7 items-center gap-2 mt-1", children: [_jsxs(ActionBarPrimitive.Root, { hideWhenRunning: true, className: cn("pointer-events-none flex items-center gap-1 opacity-0 transition-opacity", "group-hover:pointer-events-auto group-hover:opacity-100", "group-focus-within:pointer-events-auto group-focus-within:opacity-100"), children: [_jsx(ActionBarPrimitive.Copy, { asChild: true, children: _jsxs(TooltipIconButton, { tooltip: "Copy", size: "icon", className: "size-7", children: [_jsx(MessagePrimitive.If, { copied: false, children: _jsx(Copy, { className: "size-3" }) }), _jsx(MessagePrimitive.If, { copied: true, children: _jsx(Check, { className: "size-3 text-primary" }) })] }) }), _jsx(ActionBarPrimitive.Reload, { asChild: true, children: _jsx(TooltipIconButton, { tooltip: "Retry", size: "icon", className: "size-7", children: _jsx(RefreshCw, { className: "size-3" }) }) })] }), _jsx(MessageTimestamp, {})] })] }));
 }
 function BubbleUserMessage() {
     const messageId = useAuiState((s) => s.message.id);

package/dist/components/loading-indicator.d.ts

@@ -1,4 +1,13 @@
 /** Shimmer bar shown above the composer while the agent is running. */
 export declare function LoadingBar(): import("react/jsx-runtime").JSX.Element;
-/** Inline status text shown in the message area while the agent is running. */
+/**
+ * Inline status shown in the message area while the agent is running.
+ *
+ * Visible for the whole run (assistant-ui `running` gate) with the current
+ * phase, plus a distinct amber "stalled" treatment when no event or server
+ * heartbeat has arrived for a while — so a user can always tell "still
+ * working" from "connection is dead". A dead stream is additionally
+ * surfaced as an explicit run error by the runner; this indicator covers
+ * the in-flight phases.
+ */
 export declare function LoadingIndicator(): import("react/jsx-runtime").JSX.Element;

package/dist/components/loading-indicator.js

@@ -8,15 +8,28 @@ function formatToolName(name) {
 export function LoadingBar() {
     return (_jsx("div", { className: "w-full h-px bg-primary/30 overflow-hidden", children: _jsx("div", { className: "h-full w-1/4 bg-primary animate-[shimmer_1.5s_ease-in-out_infinite]" }) }));
 }
-/** Inline status text shown in the message area while the agent is running. */
+/**
+ * Inline status shown in the message area while the agent is running.
+ *
+ * Visible for the whole run (assistant-ui `running` gate) with the current
+ * phase, plus a distinct amber "stalled" treatment when no event or server
+ * heartbeat has arrived for a while — so a user can always tell "still
+ * working" from "connection is dead". A dead stream is additionally
+ * surfaced as an explicit run error by the runner; this indicator covers
+ * the in-flight phases.
+ */
 export function LoadingIndicator() {
     const streaming = useStore(streamingStatusStore, (s) => s.streamingStatus);
+    const stalled = streaming.status === "stalled";
     let label = "Thinking";
-    if (streaming.status === "calling" && streaming.toolName) {
+    if (stalled) {
+        label = "Still working — no signal from the agent";
+    }
+    else if (streaming.status === "calling" && streaming.toolName) {
         label = `Running ${formatToolName(streaming.toolName)}`;
     }
     else if (streaming.status === "streaming") {
         label = "Generating response";
     }
-    return (_jsx("div", { className: "h-10 px-4", children: _jsxs("div", { className: "flex items-center gap-2 py-2 text-foreground leading-relaxed animate-in fade-in duration-300", children: [_jsx("span", { className: "text-sm text-muted-foreground", children: label }), _jsxs("div", { className: "flex gap-1", children: [_jsx("span", { className: "size-1.5 rounded-full bg-primary/60 animate-[pulse_1.4s_ease-in-out_infinite]" }), _jsx("span", { className: "size-1.5 rounded-full bg-primary/60 animate-[pulse_1.4s_ease-in-out_0.2s_infinite]" }), _jsx("span", { className: "size-1.5 rounded-full bg-primary/60 animate-[pulse_1.4s_ease-in-out_0.4s_infinite]" })] })] }) }));
+    return (_jsx("div", { className: "h-10 px-4", children: _jsxs("div", { className: "flex items-center gap-2 py-2 text-foreground leading-relaxed animate-in fade-in duration-300", children: [_jsx("span", { className: stalled ? "text-sm text-warning" : "text-sm text-muted-foreground", children: label }), _jsxs("div", { className: "flex gap-1", children: [_jsx("span", { className: `size-1.5 rounded-full ${stalled ? "bg-warning/70" : "bg-primary/60"} animate-[pulse_1.4s_ease-in-out_infinite]` }), _jsx("span", { className: `size-1.5 rounded-full ${stalled ? "bg-warning/70" : "bg-primary/60"} animate-[pulse_1.4s_ease-in-out_0.2s_infinite]` }), _jsx("span", { className: `size-1.5 rounded-full ${stalled ? "bg-warning/70" : "bg-primary/60"} animate-[pulse_1.4s_ease-in-out_0.4s_infinite]` })] })] }) }));
 }

package/dist/components/message-error.d.ts

@@ -0,0 +1,10 @@
+import type { FC } from "react";
+/**
+ * Visible, styled run-error for an assistant message — rendered whenever the
+ * message settled with an error status (agent RUN_ERROR, lost connection,
+ * transport failure). Shared by the full-page thread and the compact chat
+ * bubble so a failed run is NEVER silent in either surface.
+ */
+export declare const MessageError: FC<{
+    compact?: boolean;
+}>;

package/dist/components/message-error.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MessagePrimitive, ErrorPrimitive } from "@assistant-ui/react";
+import { cn } from "@iloveagents/foundry-web-primitives";
+/**
+ * Visible, styled run-error for an assistant message — rendered whenever the
+ * message settled with an error status (agent RUN_ERROR, lost connection,
+ * transport failure). Shared by the full-page thread and the compact chat
+ * bubble so a failed run is NEVER silent in either surface.
+ */
+export const MessageError = ({ compact }) => (_jsx(MessagePrimitive.Error, { children: _jsx(ErrorPrimitive.Root, { className: cn("mt-2 rounded-lg border border-destructive bg-destructive/10", compact ? "p-2" : "p-3"), children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: cn("font-medium text-destructive", compact ? "text-xs" : "text-sm"), children: "Error:" }), _jsx(ErrorPrimitive.Message, { className: cn("text-destructive", compact ? "text-xs" : "text-sm") })] }) }) }));

package/dist/components/message-timestamp.d.ts

@@ -0,0 +1,10 @@
+import type { FC } from "react";
+/**
+ * Message send/receive time — revealed on hover in the same row as the
+ * message actions (edit / copy). The short time is shown; the full date
+ * lives in the native tooltip. Shared by the full-page thread and the
+ * compact chat bubble.
+ */
+export declare const MessageTimestamp: FC<{
+    className?: string;
+}>;

package/dist/components/message-timestamp.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useAuiState } from "@assistant-ui/react";
+import { cn } from "@iloveagents/foundry-web-primitives";
+/**
+ * Message send/receive time — revealed on hover in the same row as the
+ * message actions (edit / copy). The short time is shown; the full date
+ * lives in the native tooltip. Shared by the full-page thread and the
+ * compact chat bubble.
+ */
+export const MessageTimestamp = ({ className }) => {
+    const createdAt = useAuiState((s) => s.message.createdAt);
+    if (!createdAt)
+        return null;
+    const d = createdAt instanceof Date ? createdAt : new Date(createdAt);
+    if (Number.isNaN(d.getTime()))
+        return null;
+    return (_jsx("span", { title: d.toLocaleString(undefined, { dateStyle: "medium", timeStyle: "short" }), className: cn("text-xs text-muted-foreground/70 tabular-nums select-none", "opacity-0 transition-opacity group-hover:opacity-100", className), children: d.toLocaleTimeString(undefined, { hour: "2-digit", minute: "2-digit" }) }));
+};

package/dist/lib/ag-ui-adapter.js

@@ -48,6 +48,10 @@ export class AGUIAdapterSDK {
         let currentText = "";
         const toolCalls = new Map();
         let runError = null;
+        // Liveness clock for the working indicator: every runner event (incl.
+        // server heartbeats) proves the run is alive; the indicator derives
+        // elapsed time from runStartedAt and staleness from lastSignalAt.
+        streamingStatusStore.getState().markRunStarted();
         /**
          * Build a `ChatModelRunResult` from the accumulated state.
          *
@@ -103,7 +107,11 @@ export class AGUIAdapterSDK {
                 abortSignal,
             })) {
                 let shouldYield = false;
+                streamingStatusStore.getState().touchSignal();
                 switch (event.type) {
+                    case "heartbeat":
+                        // Server liveness ping — already recorded via touchSignal above.
+                        break;
                     case "request-sent":
                         if (import.meta.env.DEV) {
                             useDevStore.getState().captureRequest(event.input);
@@ -226,6 +234,7 @@ export class AGUIAdapterSDK {
         }
         finally {
             streamingStatusStore.getState().setStreamingStatus({ status: "idle" });
+            streamingStatusStore.getState().markRunEnded();
         }
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iloveagents/foundry-web-ui",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "license": "MIT",
   "type": "module",
   "main": "./dist/index.js",
@@ -53,8 +53,8 @@
     "tailwind-merge": "^3.5.0",
     "react-markdown": "^10.0.0",
     "remark-gfm": "^4.0.0",
-    "@iloveagents/foundry-agent": "^0.4.0",
-    "@iloveagents/foundry-web-primitives": "^0.4.0"
+    "@iloveagents/foundry-agent": "^0.5.0",
+    "@iloveagents/foundry-web-primitives": "^0.5.0"
   },
   "devDependencies": {
     "@ag-ui/client": "^0.0.52",