@nextclaw/ui 0.15.16 → 0.15.18

package/src/features/chat/features/ncp/hooks/__tests__/use-hydrated-ncp-agent.test.tsx

@@ -1,5 +1,10 @@
 import { act, renderHook, waitFor } from "@testing-library/react";
-import { NcpEventType, type NcpAgentClientEndpoint } from "@nextclaw/ncp";
+import {
+  NcpEventType,
+  type NcpAgentClientEndpoint,
+  type NcpEndpointSubscriber,
+  type NcpMessage,
+} from "@nextclaw/ncp";
 import { useHydratedNcpAgent, useNcpAgentRuntime } from "@nextclaw/ncp-react";
 import { DefaultNcpAgentConversationStateManager } from "@nextclaw/ncp-toolkit";
 import { beforeEach, describe, expect, it, vi } from "vitest";
@@ -147,4 +152,120 @@ describe("useHydratedNcpAgent", () => {
     });
     expect(result.current.visibleMessages).toEqual([historyMessage]);
   });
+
+  it("starts the live stream when a draft manager already contains the materialized session", async () => {
+    let subscriber: NcpEndpointSubscriber | null = null;
+    const client = {
+      stop: mocks.stop.mockResolvedValue(undefined),
+      stream: mocks.stream.mockImplementation(() => new Promise(() => {})),
+      subscribe: vi.fn((nextSubscriber: NcpEndpointSubscriber) => {
+        subscriber = nextSubscriber;
+        return () => {};
+      }),
+    } as unknown as NcpAgentClientEndpoint;
+    const loadSeed = vi.fn().mockResolvedValue({
+      messages: [],
+      status: "idle",
+    });
+    const materializedMessage: NcpMessage = {
+      id: "message-materialized",
+      sessionId: "session-materialized",
+      role: "user",
+      status: "final",
+      parts: [{ type: "text", text: "Visible immediately" }],
+      timestamp: "2026-07-24T00:00:00.000Z",
+    };
+    const { result, rerender } = renderHook(
+      ({ sessionId }: { sessionId?: string }) =>
+        useHydratedNcpAgent({
+          sessionId,
+          client: client as never,
+          loadSeed,
+        }),
+      { initialProps: { sessionId: undefined as string | undefined } },
+    );
+
+    await waitFor(() => {
+      expect(subscriber).not.toBeNull();
+    });
+    act(() => {
+      subscriber?.({
+        type: NcpEventType.MessageSent,
+        payload: {
+          sessionId: "session-materialized",
+          message: materializedMessage,
+        },
+      });
+    });
+    await waitFor(() => {
+      expect(result.current.visibleMessages).toEqual([materializedMessage]);
+    });
+
+    rerender({ sessionId: "session-materialized" });
+
+    await waitFor(() => {
+      expect(result.current.isHydrating).toBe(false);
+    });
+    expect(loadSeed).not.toHaveBeenCalled();
+    expect(mocks.stream).toHaveBeenCalledWith({
+      sessionId: "session-materialized",
+    });
+  });
+
+  it("reloads missed state and reconnects after the live stream disconnects", async () => {
+    vi.useFakeTimers();
+    try {
+      const connected = new Promise<void>(() => {});
+      const client = {
+        stop: mocks.stop.mockResolvedValue(undefined),
+        stream: mocks.stream
+          .mockRejectedValueOnce(new Error("stream disconnected"))
+          .mockImplementationOnce(() => connected),
+        subscribe: vi.fn(() => () => {}),
+        send: mocks.send,
+      } as unknown as NcpAgentClientEndpoint;
+      const recoveredMessage = {
+        id: "message-recovered",
+        sessionId: "session-recovery",
+        role: "assistant",
+        status: "final",
+        parts: [{ type: "text", text: "Recovered" }],
+        timestamp: "2026-07-24T00:01:00.000Z",
+      } as const;
+      const loadSeed = vi
+        .fn()
+        .mockResolvedValueOnce({ messages: [], status: "running" })
+        .mockResolvedValueOnce({
+          messages: [recoveredMessage],
+          status: "idle",
+        });
+      const { result } = renderHook(() =>
+        useHydratedNcpAgent({
+          sessionId: "session-recovery",
+          client: client as never,
+          loadSeed,
+        }),
+      );
+
+      await vi.waitFor(() => {
+        expect(result.current.hydrateError?.message).toBe(
+          "stream disconnected",
+        );
+      });
+      await act(async () => {
+        await vi.runOnlyPendingTimersAsync();
+      });
+      await vi.waitFor(() => {
+        expect(result.current.visibleMessages).toEqual([recoveredMessage]);
+      });
+
+      expect(loadSeed).toHaveBeenCalledTimes(2);
+      expect(mocks.stream).toHaveBeenCalledTimes(2);
+      expect(mocks.send).not.toHaveBeenCalled();
+      expect(result.current.hydrateError).toBeNull();
+      expect(result.current.isRunning).toBe(false);
+    } finally {
+      vi.useRealTimers();
+    }
+  });
 });

package/src/features/chat/features/ncp/hooks/__tests__/use-ncp-agent-runtime-queue.test.tsx

@@ -5,7 +5,7 @@ import { useNcpAgentRuntime } from '@nextclaw/ncp-react';
 import { DefaultNcpAgentConversationStateManager } from '@nextclaw/ncp-toolkit';
 
 describe('useNcpAgentRuntime backend queue submission', () => {
-  it('forwards a new message while a run is active and waits for backend events to add it', async () => {
+  it('forwards and immediately shows a new message while a run is active', async () => {
     const manager = new DefaultNcpAgentConversationStateManager();
     manager.hydrate({ sessionId: 'session-1', messages: [] });
     await manager.dispatch({
@@ -46,6 +46,13 @@ describe('useNcpAgentRuntime backend queue submission', () => {
         parts: [{ type: 'text', text: 'queue this' }],
       }),
     }));
-    expect(result.current.visibleMessages).toEqual([]);
+    expect(result.current.visibleMessages).toEqual([
+      expect.objectContaining({
+        sessionId: 'session-1',
+        role: 'user',
+        status: 'final',
+        parts: [{ type: 'text', text: 'queue this' }],
+      }),
+    ]);
   });
 });

package/src/features/chat/features/ncp/hooks/__tests__/use-ncp-agent-runtime.test.tsx

@@ -200,12 +200,118 @@ describe("useNcpAgentRuntime", () => {
       assistantMessageId: "assistant-1",
       runId: "run-1",
     });
-    expect(result.current.visibleMessages).toEqual([]);
+    expect(result.current.visibleMessages).toEqual([
+      expect.objectContaining({
+        ...envelope.message,
+        sessionId: "session-created",
+      }),
+    ]);
     expect(client.stop).not.toHaveBeenCalled();
 
     rerender({ sessionId: "session-created" });
   });
 
+  it("shows an existing-session user message before send returns and deduplicates the server event", async () => {
+    const client = new DeferredSendClient();
+    const manager = new DefaultNcpAgentConversationStateManager();
+    const envelope: NcpAgentSendEnvelope = {
+      sessionId: "session-existing",
+      message: {
+        id: "user-optimistic",
+        sessionId: "session-existing",
+        role: "user",
+        status: "final",
+        parts: [{ type: "text", text: "hello now" }],
+        timestamp: now,
+      },
+    };
+    let releaseSend = () => {};
+    client.send.mockImplementationOnce(
+      (pendingEnvelope) =>
+        new Promise((resolve) => {
+          releaseSend = () =>
+            resolve({
+              sessionId: "session-existing",
+              userMessageId: pendingEnvelope.message.id,
+              assistantMessageId: "assistant-1",
+              runId: "run-1",
+            });
+        }),
+    );
+    const { result } = renderHook(() =>
+      useNcpAgentRuntime({
+        sessionId: "session-existing",
+        client,
+        manager: manager as never,
+      }),
+    );
+
+    let sendPromise!: ReturnType<typeof result.current.send>;
+    act(() => {
+      sendPromise = result.current.send(envelope);
+    });
+
+    await waitFor(() => {
+      expect(result.current.visibleMessages).toEqual([envelope.message]);
+    });
+
+    await act(async () => {
+      await client.emit({
+        type: NcpEventType.MessageSent,
+        payload: {
+          sessionId: "session-existing",
+          message: envelope.message as NcpMessage,
+        },
+      });
+    });
+    await waitFor(() => {
+      expect(result.current.visibleMessages).toHaveLength(1);
+    });
+
+    await act(async () => {
+      releaseSend();
+      await sendPromise;
+    });
+    expect(result.current.visibleMessages).toEqual([envelope.message]);
+  });
+
+  it("marks an optimistic user message as failed when send fails", async () => {
+    const client = new DeferredSendClient();
+    const manager = new DefaultNcpAgentConversationStateManager();
+    const envelope: NcpAgentSendEnvelope = {
+      sessionId: "session-existing",
+      message: {
+        id: "user-failed",
+        sessionId: "session-existing",
+        role: "user",
+        status: "final",
+        parts: [{ type: "text", text: "please retry" }],
+        timestamp: now,
+      },
+    };
+    client.send.mockRejectedValueOnce(new Error("network unavailable"));
+    const { result } = renderHook(() =>
+      useNcpAgentRuntime({
+        sessionId: "session-existing",
+        client,
+        manager: manager as never,
+      }),
+    );
+
+    await act(async () => {
+      await expect(result.current.send(envelope)).rejects.toThrow(
+        "network unavailable",
+      );
+    });
+
+    expect(result.current.visibleMessages).toEqual([
+      expect.objectContaining({
+        ...envelope.message,
+        status: "error",
+      }),
+    ]);
+  });
+
   it("aborts by session id even before a hydrated active run reaches local state", async () => {
     const client = new DeferredSendClient();
     const manager = new DefaultNcpAgentConversationStateManager();

package/src/platforms/mobile/components/__tests__/mobile-app-shell.test.tsx

@@ -1,9 +1,13 @@
 import { render, screen } from "@testing-library/react";
 import { MemoryRouter } from "react-router-dom";
-import { describe, expect, it } from "vitest";
+import { describe, expect, it, vi } from "vitest";
 import { I18nProvider } from "@/app/components/i18n-provider";
 import { MobileAppShell } from "@/platforms/mobile/components/mobile-app-shell";
 
+vi.mock("@/shared/components/doc-browser", () => ({
+  useDocBrowser: () => ({ open: vi.fn() }),
+}));
+
 function renderShell(pathname: string) {
   const view = render(
     <I18nProvider>

package/src/platforms/mobile/components/__tests__/mobile-bottom-nav.test.tsx

@@ -1,9 +1,16 @@
-import { render, screen } from "@testing-library/react";
+import { fireEvent, render, screen } from "@testing-library/react";
 import { MemoryRouter } from "react-router-dom";
-import { describe, expect, it } from "vitest";
+import { describe, expect, it, vi } from "vitest";
 import { I18nProvider } from "@/app/components/i18n-provider";
 import { MobileBottomNav } from "@/platforms/mobile/components/mobile-bottom-nav";
 
+const { openAppsMock } = vi.hoisted(() => ({ openAppsMock: vi.fn() }));
+
+vi.mock("@/features/panel-apps", () => ({ openApps: openAppsMock }));
+vi.mock("@/shared/components/doc-browser", () => ({
+  useDocBrowser: () => ({ open: vi.fn() }),
+}));
+
 describe("MobileBottomNav", () => {
   it("highlights the settings tab for nested settings routes", () => {
     render(
@@ -21,7 +28,7 @@ describe("MobileBottomNav", () => {
       screen.getByRole("link", { name: /chat/i }).getAttribute("aria-current"),
     ).toBeNull();
     expect(screen.getByTestId("mobile-nav-active-indicator")).toBeTruthy();
-    expect(screen.getByRole("link", { name: /settings/i }).className).not.toContain(
+    expect(screen.getByRole("link", { name: /settings/i }).className).toContain(
       "bg-gray-100",
     );
     expect(screen.getByTestId("mobile-nav-active-indicator").textContent).toMatch(
@@ -42,4 +49,18 @@ describe("MobileBottomNav", () => {
       screen.getByRole("link", { name: /chat/i }).getAttribute("aria-current"),
     ).toBe("page");
   });
+
+  it("opens the apps panel from the mobile navigation", () => {
+    render(
+      <I18nProvider>
+        <MemoryRouter initialEntries={["/chat"]}>
+          <MobileBottomNav />
+        </MemoryRouter>
+      </I18nProvider>,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "Apps" }));
+
+    expect(openAppsMock).toHaveBeenCalledOnce();
+  });
 });

package/src/platforms/mobile/components/mobile-bottom-nav.tsx

@@ -1,26 +1,18 @@
+import { Boxes } from "lucide-react";
 import { Link, useLocation } from "react-router-dom";
 import {
   getMobileBottomNavItems,
   isSettingsRoute,
+  matchesRouteTarget,
 } from "@/app/configs/app-navigation.config";
+import { openApps } from "@/features/panel-apps";
+import { useDocBrowser } from "@/shared/components/doc-browser";
 import { t } from "@/shared/lib/i18n";
 import { cn } from "@/shared/lib/utils";
 
-function isNavItemActive(pathname: string, target: string): boolean {
-  if (target === "/settings") {
-    return isSettingsRoute(pathname);
-  }
-  const normalizedPath = pathname.toLowerCase();
-  const normalizedTarget = target.toLowerCase();
-  return (
-    normalizedPath === normalizedTarget ||
-    normalizedPath.startsWith(`${normalizedTarget}/`)
-  );
-}
-
 export function MobileBottomNav() {
   const { pathname } = useLocation();
-  const navItems = getMobileBottomNavItems(t);
+  const docBrowser = useDocBrowser();
 
   return (
     <nav
@@ -31,40 +23,45 @@ export function MobileBottomNav() {
         paddingBottom: "calc(env(safe-area-inset-bottom, 0px) + 0.25rem)",
       }}
     >
-      <ul className="grid grid-cols-4 gap-1 px-2 pt-1">
-        {navItems.map((item) => {
-          const active = isNavItemActive(pathname, item.target);
+      <ul className="grid grid-cols-5 gap-1 px-2 pt-1">
+        {getMobileBottomNavItems(t).map((item) => {
+          const active = item.target === "/settings"
+            ? isSettingsRoute(pathname)
+            : matchesRouteTarget(pathname, item.target);
           return (
             <li key={item.target}>
               <Link
                 to={item.target}
                 aria-current={active ? "page" : undefined}
+                data-testid={active ? "mobile-nav-active-indicator" : undefined}
                 className={cn(
-                  "group flex min-h-[2.875rem] items-center justify-center rounded-xl px-1 py-1 text-[10px] font-medium transition-colors",
+                  "group flex min-h-[2.875rem] flex-col items-center justify-center gap-0.5 rounded-xl px-2 py-1 text-[10px] font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border",
                   active
-                    ? "text-gray-900"
-                    : "text-gray-500 hover:text-gray-800",
+                    ? "bg-gray-100 text-gray-900"
+                    : "text-gray-500 hover:bg-gray-50 hover:text-gray-800",
                 )}
               >
-                <span
-                  data-testid={active ? "mobile-nav-active-indicator" : undefined}
+                <item.icon
                   className={cn(
-                    "inline-flex max-w-full min-w-14 flex-col items-center justify-center gap-0.5 rounded-xl px-2 py-1 transition-colors",
-                    active ? "bg-gray-100" : "bg-transparent group-hover:bg-gray-50",
+                    "h-3.5 w-3.5",
+                    active ? "text-gray-900" : "text-gray-400",
                   )}
-                >
-                  <item.icon
-                    className={cn(
-                      "h-3.5 w-3.5",
-                      active ? "text-gray-900" : "text-gray-400",
-                    )}
-                  />
-                  <span className="max-w-full truncate">{item.label}</span>
-                </span>
+                />
+                <span className="max-w-full truncate">{item.label}</span>
               </Link>
             </li>
           );
         })}
+        <li>
+          <button
+            type="button"
+            onClick={() => openApps(docBrowser)}
+            className="group flex min-h-[2.875rem] w-full flex-col items-center justify-center gap-0.5 rounded-xl px-2 py-1 text-[10px] font-medium text-gray-500 transition-colors hover:bg-gray-50 hover:text-gray-800 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
+          >
+            <Boxes className="h-3.5 w-3.5 text-gray-400" />
+            <span className="max-w-full truncate">{t("appsTitle")}</span>
+          </button>
+        </li>
       </ul>
     </nav>
   );