fix(webui): keep slash commands out of streaming state

webui/src/tests/thread-composer.test.tsx

@@ -1312,6 +1312,23 @@ describe("ThreadComposer", () => {
     expect(onSend).toHaveBeenCalledWith("Draw a friendly robot", undefined, undefined);
   });
 
+  it("marks known slash commands as side-channel sends", () => {
+    const onSend = vi.fn();
+    render(
+      <ThreadComposer
+        onSend={onSend}
+        placeholder="Type your message..."
+        slashCommands={COMMANDS}
+      />,
+    );
+
+    const input = screen.getByLabelText("Message input");
+    fireEvent.change(input, { target: { value: "/history" } });
+    fireEvent.click(screen.getByRole("button", { name: "Send message" }));
+
+    expect(onSend).toHaveBeenCalledWith("/history", undefined, { sideChannel: true });
+  });
+
   it("shows a stop button while streaming", () => {
     const onStop = vi.fn();
     render(

webui/src/tests/thread-viewport.test.tsx

@@ -82,6 +82,30 @@ function stubVisualViewport({
   };
 }
 
+function stubResizeObserver() {
+  const original = globalThis.ResizeObserver;
+  const observers: ResizeObserverInstance[] = [];
+  class MockResizeObserver {
+    element?: Element;
+    callback: ResizeObserverCallback;
+    disconnect = vi.fn();
+
+    constructor(callback: ResizeObserverCallback) {
+      this.callback = callback;
+      observers.push(this);
+    }
+
+    observe(element: Element) {
+      this.element = element;
+    }
+  }
+  vi.stubGlobal("ResizeObserver", MockResizeObserver);
+  return {
+    observers,
+    restore: () => vi.stubGlobal("ResizeObserver", original),
+  };
+}
+
 function makeLongMessages(count: number): UIMessage[] {
   return Array.from({ length: count }, (_, index) => ({
     id: `m${index}`,
@@ -362,23 +386,7 @@ describe("ThreadViewport", () => {
   });
 
   it("keeps the scroll-to-bottom button above a growing composer", () => {
-    const originalResizeObserver = globalThis.ResizeObserver;
-    const resizeObservers: ResizeObserverInstance[] = [];
-    class MockResizeObserver {
-      element?: Element;
-      callback: ResizeObserverCallback;
-      disconnect = vi.fn();
-
-      constructor(callback: ResizeObserverCallback) {
-        this.callback = callback;
-        resizeObservers.push(this);
-      }
-
-      observe(element: Element) {
-        this.element = element;
-      }
-    }
-    vi.stubGlobal("ResizeObserver", MockResizeObserver);
+    const resizeObserver = stubResizeObserver();
 
     try {
       const { container } = render(
@@ -418,7 +426,7 @@ describe("ThreadViewport", () => {
           toJSON: () => ({}),
         }) as DOMRect;
 
-      const composerObserver = resizeObservers.find(
+      const composerObserver = resizeObserver.observers.find(
         (observer) => observer.element === composerDock,
       );
       expect(composerObserver).toBeDefined();
@@ -429,7 +437,85 @@ describe("ThreadViewport", () => {
 
       expect(buttonPositioner).toHaveStyle({ bottom: "256px" });
     } finally {
-      vi.stubGlobal("ResizeObserver", originalResizeObserver);
+      resizeObserver.restore();
+    }
+  });
+
+  it("keeps the active prompt visible when the composer grows", async () => {
+    const resizeObserver = stubResizeObserver();
+
+    try {
+      const threaded: UIMessage[] = [
+        { id: "u1", role: "user", content: "old question", createdAt: 1 },
+        { id: "a1", role: "assistant", content: "old answer", createdAt: 2 },
+        { id: "u2", role: "user", content: "new question", createdAt: 3 },
+      ];
+      const scrollTo = vi.fn();
+      const { container, rerender } = render(
+        <ThreadViewport
+          messages={threaded}
+          isStreaming
+          composer={<div>composer</div>}
+          scrollToLatestUserPromptSignal={0}
+        />,
+      );
+
+      const scroller = container.firstElementChild?.firstElementChild as HTMLElement;
+      Object.defineProperties(scroller, {
+        scrollHeight: { configurable: true, value: 1200 },
+        clientHeight: { configurable: true, value: 500 },
+        scrollTop: { configurable: true, writable: true, value: 700 },
+        scrollTo: { configurable: true, value: scrollTo },
+      });
+      const prompt = container.querySelector<HTMLElement>('[data-user-prompt-id="u2"]');
+      expect(prompt).not.toBeNull();
+      Object.defineProperty(prompt, "offsetTop", {
+        configurable: true,
+        value: 420,
+      });
+
+      await act(async () => {
+        rerender(
+          <ThreadViewport
+            messages={threaded}
+            isStreaming
+            composer={<div>composer</div>}
+            scrollToLatestUserPromptSignal={1}
+          />,
+        );
+      });
+
+      scrollTo.mockClear();
+      const composerDock = screen.getByTestId("thread-composer-dock");
+      composerDock.getBoundingClientRect = () =>
+        ({
+          height: 240,
+          width: 800,
+          top: 0,
+          right: 800,
+          bottom: 240,
+          left: 0,
+          x: 0,
+          y: 0,
+          toJSON: () => ({}),
+        }) as DOMRect;
+      const composerObserver = resizeObserver.observers.find(
+        (observer) => observer.element === composerDock,
+      );
+      expect(composerObserver).toBeDefined();
+
+      act(() => {
+        composerObserver!.callback([], composerObserver as unknown as ResizeObserver);
+      });
+
+      await waitFor(() =>
+        expect(scrollTo).toHaveBeenCalledWith({
+          top: 404,
+          behavior: "auto",
+        }),
+      );
+    } finally {
+      resizeObserver.restore();
     }
   });
 

webui/src/tests/useNanobotStream.test.tsx

@@ -1622,7 +1622,89 @@ describe("useNanobotStream", () => {
     expect(result.current.messages[0].content).toBe("long task");
   });
 
-  it("keeps streaming alive across stream_end and completes on turn_end", async () => {
+  it("does not mark side-channel slash commands as streaming", () => {
+    const fake = fakeClient();
+    const { result } = renderHook(() => useNanobotStream("chat-status", EMPTY_MESSAGES), {
+      wrapper: wrap(fake.client),
+    });
+
+    act(() => {
+      result.current.send("/status", undefined, { sideChannel: true });
+    });
+
+    const call = fake.client.sendMessage.mock.calls.at(-1)!;
+    const turnId = call[3]?.turnId;
+    expect(call[3]).not.toHaveProperty("sideChannel");
+    expect(result.current.isStreaming).toBe(false);
+
+    act(() => {
+      fake.emit("chat-status", {
+        event: "message",
+        chat_id: "chat-status",
+        text: "status reply",
+        turn_id: turnId,
+      });
+    });
+
+    expect(result.current.isStreaming).toBe(false);
+    expect(result.current.messages.map((message) => message.content)).toEqual([
+      "/status",
+      "status reply",
+    ]);
+  });
+
+  it("lets stream_end finish streaming while side-channel status replies arrive", () => {
+    vi.useFakeTimers();
+    try {
+      const fake = fakeClient();
+      const { result } = renderHook(() => useNanobotStream("chat-status-loop", EMPTY_MESSAGES), {
+        wrapper: wrap(fake.client),
+      });
+
+      act(() => {
+        result.current.send("write normally");
+      });
+      const promptTurnId = fake.client.sendMessage.mock.calls.at(-1)![3]?.turnId;
+
+      act(() => {
+        fake.emit("chat-status-loop", {
+          event: "stream_end",
+          chat_id: "chat-status-loop",
+          text: "done",
+          turn_id: promptTurnId,
+        });
+      });
+
+      act(() => {
+        result.current.send("/status", undefined, { sideChannel: true });
+      });
+      const statusTurnId = fake.client.sendMessage.mock.calls.at(-1)![3]?.turnId;
+
+      act(() => {
+        fake.emit("chat-status-loop", {
+          event: "message",
+          chat_id: "chat-status-loop",
+          text: "status reply",
+          turn_id: statusTurnId,
+        });
+      });
+
+      expect(result.current.isStreaming).toBe(true);
+
+      act(() => {
+        vi.advanceTimersByTime(1000);
+      });
+
+      expect(result.current.isStreaming).toBe(false);
+      expect(result.current.messages.find((message) => message.content === "done")).toMatchObject({
+        isStreaming: false,
+      });
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
+  it("keeps streaming alive across stream_end when tool activity follows", async () => {
     const fake = fakeClient();
     const onTurnEnd = vi.fn();
     const { result } = renderHook(() => useNanobotStream("chat-s", EMPTY_MESSAGES, false, onTurnEnd), {
@@ -1660,14 +1742,15 @@ describe("useNanobotStream", () => {
       fake.emit("chat-s", {
         event: "message",
         chat_id: "chat-s",
-        text: "Hello world",
+        kind: "progress",
+        text: "Calling tool",
       });
     });
 
     expect(result.current.isStreaming).toBe(true);
     expect(result.current.messages.at(-1)).toMatchObject({
-      role: "assistant",
-      content: "Hello world",
+      role: "tool",
+      content: "Calling tool",
     });
 
     act(() => {