@iloveagents/foundry-web-ui 0.2.2 → 0.3.1

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @iloveagents/foundry-web-ui
 
+## 0.3.1
+
+### Patch Changes
+
+- 9ec870e: Surface AG-UI run errors in chat instead of rendering an empty assistant bubble.
+  - @iloveagents/foundry-agent@0.3.1
+  - @iloveagents/foundry-web-primitives@0.3.1
+
+## 0.3.0
+
+### Patch Changes
+
+- @iloveagents/foundry-agent@0.3.0
+- @iloveagents/foundry-web-primitives@0.3.0
+
 ## 0.2.2
 
 ### Patch Changes

package/README.md

@@ -36,6 +36,6 @@ Feature modules (like SPACES) plug into `@iloveagents/foundry-web-ui` via regist
 - **NavItem.dnd** — drag-and-drop behavior on sidebar items
 - **Panel renderer registry** — custom content renderers for the side panel
 - **Citation handler** — handles `[n]` citation clicks in markdown
-- **Tool UI** — custom rendering for agent tools via `useAssistantToolUI`
+- **Tool UI** — custom rendering for agent tools via `makeAssistantToolUI`
 
 See [AGENTS.md](./AGENTS.md) for architecture details and import boundary rules.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iloveagents/foundry-web-ui",
-  "version": "0.2.2",
+  "version": "0.3.1",
   "license": "SEE LICENSE IN LICENSE",
   "type": "module",
   "types": "./src/index.ts",
@@ -46,8 +46,8 @@
     "react-markdown": "^10.0.0",
     "remark-gfm": "^4.0.0",
     "shiki": "^4.0.0",
-    "@iloveagents/foundry-agent": "0.2.2",
-    "@iloveagents/foundry-web-primitives": "0.2.2"
+    "@iloveagents/foundry-agent": "0.3.1",
+    "@iloveagents/foundry-web-primitives": "0.3.1"
   },
   "devDependencies": {
     "typescript": "~5.9.3",

package/src/components/sidebar.tsx

@@ -1407,6 +1407,7 @@ function SidebarContent({ collapsed }: { collapsed: boolean }) {
   const toggle = useSidebarStore((s) => s.toggle);
   const handleNewConversation = useNewConversation();
   const rawNavConfig = useNavStore((s) => s.config);
+  const navLoading = useNavStore((s) => s.navLoading);
   // Sort by `priority` descending so feature hooks can declare slot
   // intent (e.g. "Recents above Tasks") instead of relying on the
   // order in which addGroup() happened to be called. Stable sort: ties
@@ -1420,6 +1421,12 @@ function SidebarContent({ collapsed }: { collapsed: boolean }) {
         .map(({ g }) => g),
     [rawNavConfig],
   );
+  // Show skeleton rows during the cold nav fetch — but only until the
+  // integrator's primary dynamic group ("Workspaces") has been published.
+  // Once it exists, real rows render even if a later phase (status dots) is
+  // still resolving, so the skeleton never flashes over a populated tree.
+  const hasWorkspacesGroup = navConfig.some((group) => group.label === "Workspaces");
+  const showNavSkeleton = navLoading && !hasWorkspacesGroup;
   const currentPage = useAppStore((s) => s.currentPage);
   const navContext = useAppStore((s) => s.navContext);
 
@@ -1546,6 +1553,16 @@ function SidebarContent({ collapsed }: { collapsed: boolean }) {
         {navConfig.map((group) => (
           <NavGroupSection key={group.label} group={group} />
         ))}
+        {showNavSkeleton && (
+          <div className="space-y-1 px-1 pt-2" aria-hidden="true">
+            {Array.from({ length: 6 }).map((_, index) => (
+              <div
+                key={index}
+                className="h-7 mx-1 rounded-lg animate-pulse bg-sidebar-accent/40"
+              />
+            ))}
+          </div>
+        )}
       </nav>
 
       {/* Footer actions — registered by feature modules */}

package/src/lib/__tests__/ag-ui-adapter.test.ts

@@ -4,10 +4,11 @@
  * The shim is a generator-driven assistant-ui `ChatModelAdapter` wrapping
  * `@iloveagents/foundry-agent`'s `AGUIRunner`. The contract under test:
  *   - Every intermediate yield carries `status: { type: "running" }`.
- *   - The FINAL yield carries `status: { type: "complete", reason: "stop" }`
- *     even after a multi-turn client-tool follow-up — the previous adapter
- *     left this status as `running` and the message bubble got stuck in
- *     the loading state. See PR #116 review.
+ *   - The FINAL yield settles the message so the bubble unsticks (the
+ *     previous adapter left it `running` and it got stuck loading — PR #116):
+ *     `{ type: "complete", reason: "stop" }` on success, or
+ *     `{ type: "incomplete", reason: "error", error }` on RUN_ERROR so the
+ *     UI shows a visible error instead of a silent empty bubble.
  *   - `content` is cumulative — every yield holds the full content array,
  *     not deltas (assistant-ui v0.12 contract).
  */
@@ -170,7 +171,7 @@ describe("AGUIAdapterSDK", () => {
     expect(finalContent.find((p) => p.type === "text")?.text).toBe("Done");
   });
 
-  it("yields a terminal complete on run-error (does not throw)", async () => {
+  it("settles run-error as incomplete/error so the UI shows it (does not throw)", async () => {
     runMock.mockImplementation(async function* (): AsyncGenerator<RunnerEvent> {
       yield { type: "turn-started" };
       yield { type: "request-sent", input: {} };
@@ -181,15 +182,20 @@ describe("AGUIAdapterSDK", () => {
 
     const adapter = new AGUIAdapterSDK();
     const out: ChatModelRunResultLike[] = [];
-    // The shim swallows run errors and emits a terminal complete so the
-    // bubble unsticks. Throwing here would re-introduce the stuck-running
-    // regression because assistant-ui treats unhandled throws as the
-    // message being abandoned mid-run.
+    // On RUN_ERROR the adapter settles the message as incomplete/error
+    // (NOT a silent complete/stop) so assistant-ui's <MessagePrimitive.Error>
+    // renders a visible, retryable error. It must still settle via a
+    // terminal yield rather than throw — an unhandled throw re-introduces
+    // the stuck-running regression (message abandoned mid-run).
     for await (const r of adapter.run(makeRunInput())) {
       out.push({ status: r.status, content: r.content });
     }
 
-    expect(out[out.length - 1].status).toEqual({ type: "complete", reason: "stop" });
+    expect(out[out.length - 1].status).toEqual({
+      type: "incomplete",
+      reason: "error",
+      error: "boom",
+    });
   });
 
   it("forwards app context items through the native AG-UI context field", async () => {

package/src/lib/ag-ui-adapter.ts

@@ -243,13 +243,27 @@ export class AGUIAdapterSDK implements ChatModelAdapter {
 
       // Terminal yield — runner generator returned. assistant-ui leaves
       // the message stuck in the loading state if the last yield's
-      // `status` is `running`, so we always emit a final `complete` once
-      // the runner is fully done (after every turn + every follow-up).
-      // `runError` is recorded above but not re-thrown: the terminal yield
-      // settles the message with reason=stop so the bubble unsticks; an
-      // unhandled throw would re-introduce the stuck-running bug.
-      void runError;
-      yield buildResult({ type: "complete", reason: "stop" });
+      // `status` is `running`, so we always emit a final settle once the
+      // runner is fully done (after every turn + every follow-up).
+      //
+      // If the run errored (the AG-UI backend emitted RUN_ERROR — e.g. the
+      // agent exhausted rate-limit/transient retries, or a non-retryable
+      // 4xx), settle as `incomplete`/`error` instead of `complete`/`stop`,
+      // carrying the error message. This keeps any partial content AND
+      // flips the message into assistant-ui's error state so the existing
+      // `<MessagePrimitive.Error>` renders a visible, retryable error —
+      // not a silent empty bubble. We yield the terminal status rather
+      // than throwing; an unhandled throw re-introduces the stuck-running
+      // bug (the runner generator has already returned here).
+      if (runError !== null) {
+        yield buildResult({
+          type: "incomplete",
+          reason: "error",
+          error: runError || "The run failed.",
+        });
+      } else {
+        yield buildResult({ type: "complete", reason: "stop" });
+      }
     } finally {
       streamingStatusStore.getState().setStreamingStatus({ status: "idle" });
     }

package/src/lib/nav-store.ts

@@ -24,8 +24,18 @@ export interface NavFooterAction {
 interface NavStoreState {
   config: NavGroup[];
   footerActions: NavFooterAction[];
+  /**
+   * True while an integrator's nav sync is loading its first batch of
+   * groups. Optional/defaulted (starts ``false``) so existing consumers
+   * that never set it are unaffected. The sidebar reads it to render
+   * skeleton rows instead of an empty list during the cold fetch —
+   * avoids the "empty sidebar for N seconds" gap on a slow nav sync.
+   */
+  navLoading: boolean;
   /** Replace the entire config */
   setConfig: (config: NavGroup[]) => void;
+  /** Toggle the cold-load skeleton state. */
+  setNavLoading: (loading: boolean) => void;
   /** Add a group (replaces existing group with the same label) */
   addGroup: (group: NavGroup) => void;
   /** Remove a group by label */
@@ -39,9 +49,12 @@ interface NavStoreState {
 export const useNavStore = create<NavStoreState>((set, get) => ({
   config: DEFAULT_NAV_CONFIG,
   footerActions: [],
+  navLoading: false,
 
   setConfig: (config) => set({ config }),
 
+  setNavLoading: (navLoading) => set({ navLoading }),
+
   addGroup: (group) => {
     const config = get().config;
     const idx = config.findIndex((g) => g.label === group.label);