@nextclaw/ui 0.15.17 → 0.15.18

package/src/features/chat/features/conversation/components/__tests__/session-conversation-area.test.tsx

@@ -1,5 +1,5 @@
 import { memo, type ReactNode } from "react";
-import { render, screen } from "@testing-library/react";
+import { act, render, screen } from "@testing-library/react";
 import { MemoryRouter } from "react-router-dom";
 import { describe, expect, it, vi, beforeEach } from "vitest";
 
@@ -20,7 +20,6 @@ const mocks = vi.hoisted(() => {
     setAttachments: vi.fn(),
     addAttachments: vi.fn(() => []),
     removeAttachment: vi.fn(),
-    setSelectedModel: vi.fn(),
     setSelectedThinkingLevel: vi.fn(),
     syncSessionPreferences: vi.fn(),
     setPendingSessionType: vi.fn(),
@@ -43,9 +42,9 @@ const mocks = vi.hoisted(() => {
     sendError: null,
   };
   const inputQuery = {
-    defaultModel: undefined,
+    defaultModel: undefined as string | undefined,
     defaultProjectRoot: null,
-    fallbackPreferredModel: undefined,
+    fallbackPreferredModel: undefined as string | undefined,
     fallbackPreferredThinking: null,
     isProviderStateResolved: true,
     isSkillsLoading: false,
@@ -138,17 +137,20 @@ vi.mock(
   () => ({
     ChatConversationContent: ({
       bottomSlot,
+      isContextCompacting,
       messages,
       showWelcome,
       welcomeSlot,
     }: {
       bottomSlot?: ReactNode;
+      isContextCompacting?: boolean;
       messages: readonly unknown[];
       showWelcome: boolean;
       welcomeSlot?: ReactNode;
     }) => (
       <div
         data-testid="conversation-content"
+        data-context-compacting={String(Boolean(isContextCompacting))}
         data-show-welcome={String(showWelcome)}
       >
         {showWelcome ? (
@@ -264,7 +266,10 @@ describe("SessionConversationArea input boundary", () => {
     mocks.agent.isRunning = true;
     mocks.agent.isSending = true;
     mocks.agent.snapshot.contextWindow = null;
+    mocks.inputQuery.defaultModel = undefined;
+    mocks.inputQuery.fallbackPreferredModel = undefined;
     mocks.inputQuery.selectedSession = null;
+    mocks.inputQuery.sessionTypeState.selectedSessionType = "default";
   });
 
   it("passes running state without treating an active run as a send request in flight", () => {
@@ -297,6 +302,23 @@ describe("SessionConversationArea input boundary", () => {
     expect(mocks.inputRenderSpy).toHaveBeenCalledOnce();
   });
 
+  it("shows compaction feedback only for the active session", () => {
+    renderArea("session-1");
+    const inputProps = mocks.inputRenderSpy.mock.calls[0]?.[0] as {
+      onContextCompactingChange: (sessionId: string, isCompacting: boolean) => void;
+    };
+
+    act(() => inputProps.onContextCompactingChange("session-1", true));
+
+    expect(screen.getByTestId("conversation-content").dataset.contextCompacting)
+      .toBe("true");
+
+    act(() => inputProps.onContextCompactingChange("session-1", false));
+
+    expect(screen.getByTestId("conversation-content").dataset.contextCompacting)
+      .toBe("false");
+  });
+
   it("does not replace the welcome composer just because draft send starts", () => {
     renderArea(null);
 
@@ -330,6 +352,30 @@ describe("SessionConversationArea input boundary", () => {
     expect(mocks.initialPromptSpy).toHaveBeenCalledWith("每天整理项目风险");
   });
 
+  it("syncs draft preferences with the selected runtime context", () => {
+    mocks.inputQuery.defaultModel = "openai/gpt-5";
+    mocks.inputQuery.fallbackPreferredModel = "minimax/MiniMax-M3";
+    const rendered = renderArea(null);
+    mocks.inputActions.syncSessionPreferences.mockClear();
+
+    mocks.inputQuery.sessionTypeState.selectedSessionType = "codex";
+    rendered.rerender(
+      <MemoryRouter>
+        <SessionConversationArea sessionKey={null} />
+      </MemoryRouter>,
+    );
+
+    expect(mocks.inputActions.syncSessionPreferences).toHaveBeenCalledOnce();
+    expect(mocks.inputActions.syncSessionPreferences).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        defaultModel: "openai/gpt-5",
+        fallbackPreferredModel: "minimax/MiniMax-M3",
+        selectedSessionKey: null,
+        selectedSessionType: "codex",
+      }),
+    );
+  });
+
   it("surfaces selected-session failure previews at the conversation bottom", () => {
     mocks.inputQuery.selectedSession = {
       activityPreview: {

package/src/features/chat/features/conversation/components/session-conversation-area.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useRef } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useLocation } from "react-router-dom";
 
 import { useAppPresenter } from "@/app/components/app-presenter-provider";
@@ -200,6 +200,23 @@ export function SessionConversationArea(props: SessionConversationAreaProps) {
     inputSnapshot,
     setPendingSessionType: inputActions.setPendingSessionType,
   });
+  const [compactingSessionIds, setCompactingSessionIds] = useState<ReadonlySet<string>>(
+    () => new Set(),
+  );
+  const handleContextCompactingChange = useCallback(
+    (compactingSessionId: string, isCompacting: boolean) => {
+      setCompactingSessionIds((current) => {
+        const next = new Set(current);
+        if (isCompacting) {
+          next.add(compactingSessionId);
+        } else {
+          next.delete(compactingSessionId);
+        }
+        return next;
+      });
+    },
+    [],
+  );
   useEffect(() => {
     inputActions.syncSessionPreferences({
       defaultModel: inputQuery.defaultModel,
@@ -208,6 +225,7 @@ export function SessionConversationArea(props: SessionConversationAreaProps) {
       modelOptions: inputQuery.modelOptions,
       selectedSessionExists: Boolean(inputQuery.selectedSession),
       selectedSessionKey: inputQuery.selectedSessionKey,
+      selectedSessionType: inputQuery.sessionTypeState.selectedSessionType,
       selectedSessionPreferredModel:
         inputQuery.selectedSession?.preferredModel ?? undefined,
       selectedSessionPreferredThinking:
@@ -221,6 +239,7 @@ export function SessionConversationArea(props: SessionConversationAreaProps) {
     inputQuery.modelOptions,
     inputQuery.selectedSession,
     inputQuery.selectedSessionKey,
+    inputQuery.sessionTypeState.selectedSessionType,
   ]);
   useSessionConversationDraftRouteState({
     sessionKey,
@@ -336,6 +355,7 @@ export function SessionConversationArea(props: SessionConversationAreaProps) {
         inputActions={inputActions}
         inputQuery={inputQuery}
         inputSnapshot={displayInputSnapshot}
+        onContextCompactingChange={handleContextCompactingChange}
         surface={surface}
       />
     ),
@@ -345,6 +365,7 @@ export function SessionConversationArea(props: SessionConversationAreaProps) {
       inputController,
       inputActions,
       inputQuery,
+      handleContextCompactingChange,
     ],
   );
   const showWelcome =
@@ -365,6 +386,9 @@ export function SessionConversationArea(props: SessionConversationAreaProps) {
         isHistoryLoading={agent.isHydrating}
         isLoadingPreviousMessages={agent.isLoadingPreviousMessages}
         isSending={controller.isSending}
+        isContextCompacting={Boolean(
+          sessionKey && compactingSessionIds.has(sessionKey),
+        )}
         bottomSlot={sessionFailureSlot}
         messages={agent.visibleMessages}
         sessionKey={sessionKey}

package/src/features/chat/features/conversation/components/session-conversation-input.tsx

@@ -192,6 +192,7 @@ type SessionConversationInputProps = {
   readonly inputActions: SessionConversationInputActions;
   readonly inputQuery: SessionConversationInputQuery;
   readonly inputSnapshot: SessionConversationInputSnapshot;
+  readonly onContextCompactingChange?: (sessionId: string, isCompacting: boolean) => void;
   readonly surface?: 'default' | 'embedded';
 };
 
@@ -202,6 +203,7 @@ export const SessionConversationInput = memo(function SessionConversationInput(p
     inputActions,
     inputQuery,
     inputSnapshot,
+    onContextCompactingChange,
     surface = 'default',
   } = props;
   const presenter = usePresenter();
@@ -225,6 +227,7 @@ export const SessionConversationInput = memo(function SessionConversationInput(p
   });
   const slashCommands = useSessionConversationSlashCommands({
     language,
+    onContextCompactingChange,
     selectedSessionKey: inputQuery.selectedSessionKey,
   });
   const handleSlashPanelAppSelect = useCallback(

package/src/features/chat/features/conversation/hooks/__tests__/use-session-conversation-input-state.test.tsx

@@ -36,6 +36,7 @@ describe('useSessionConversationInputState session preferences', () => {
         modelOptions: MODEL_OPTIONS,
         selectedSessionExists: true,
         selectedSessionKey: 'session-a',
+        selectedSessionType: 'native',
         selectedSessionPreferredModel: 'deepseek/deepseek-v4-flash',
       });
     });
@@ -46,6 +47,7 @@ describe('useSessionConversationInputState session preferences', () => {
         modelOptions: MODEL_OPTIONS,
         selectedSessionExists: false,
         selectedSessionKey: 'session-b',
+        selectedSessionType: 'native',
       });
     });
     expect(result.current.inputSnapshot.selectedModel).toBe('deepseek/deepseek-v4-flash');
@@ -55,9 +57,48 @@ describe('useSessionConversationInputState session preferences', () => {
         modelOptions: MODEL_OPTIONS,
         selectedSessionExists: true,
         selectedSessionKey: 'session-b',
+        selectedSessionType: 'native',
         selectedSessionPreferredModel: 'minimax/MiniMax-M3',
       });
     });
     expect(result.current.inputSnapshot.selectedModel).toBe('minimax/MiniMax-M3');
   });
+
+  it('prefers the runtime recent model and otherwise restores the runtime default in a draft', () => {
+    const { result } = renderHook(() => useSessionConversationInputState());
+
+    act(() => {
+      result.current.inputActions.syncSessionPreferences({
+        fallbackPreferredModel: 'deepseek/deepseek-v4-flash',
+        modelOptions: MODEL_OPTIONS,
+        selectedSessionExists: false,
+        selectedSessionKey: null,
+        selectedSessionType: 'native',
+      });
+    });
+    expect(result.current.inputSnapshot.selectedModel).toBe('deepseek/deepseek-v4-flash');
+
+    act(() => {
+      result.current.inputActions.syncSessionPreferences({
+        defaultModel: 'deepseek/deepseek-v4-flash',
+        fallbackPreferredModel: 'minimax/MiniMax-M3',
+        modelOptions: MODEL_OPTIONS,
+        selectedSessionExists: false,
+        selectedSessionKey: null,
+        selectedSessionType: 'codex',
+      });
+    });
+    expect(result.current.inputSnapshot.selectedModel).toBe('minimax/MiniMax-M3');
+
+    act(() => {
+      result.current.inputActions.syncSessionPreferences({
+        defaultModel: 'deepseek/deepseek-v4-flash',
+        modelOptions: MODEL_OPTIONS,
+        selectedSessionExists: false,
+        selectedSessionKey: null,
+        selectedSessionType: 'hermes',
+      });
+    });
+    expect(result.current.inputSnapshot.selectedModel).toBe('deepseek/deepseek-v4-flash');
+  });
 });

package/src/features/chat/features/conversation/hooks/__tests__/use-session-conversation-slash-commands.test.tsx

@@ -68,6 +68,34 @@ describe('useSessionConversationSlashCommands', () => {
     ));
   });
 
+  it('reports visible compaction state for the lifetime of the request', async () => {
+    let resolveRequest!: () => void;
+    mocks.compactNcpSessionContext.mockReturnValue(new Promise((resolve) => {
+      resolveRequest = () => resolve({
+        compacted: true,
+        sessionId: 'session-1',
+      });
+    }));
+    const onContextCompactingChange = vi.fn();
+    const { result } = renderHook(() => useSessionConversationSlashCommands({
+      language: 'en',
+      selectedSessionKey: 'session-1',
+      onContextCompactingChange,
+    }));
+
+    act(() => result.current.find((entry) => entry.key === 'compact-context')?.onSelect());
+
+    expect(onContextCompactingChange).toHaveBeenCalledWith('session-1', true);
+    expect(onContextCompactingChange).not.toHaveBeenCalledWith('session-1', false);
+
+    act(() => resolveRequest());
+
+    await waitFor(() => expect(onContextCompactingChange).toHaveBeenLastCalledWith(
+      'session-1',
+      false,
+    ));
+  });
+
   it('does not expose session commands before a session exists', () => {
     const { result } = renderHook(() => useSessionConversationSlashCommands({
       language: 'en',

package/src/features/chat/features/conversation/hooks/use-session-conversation-input-query.ts

@@ -124,7 +124,7 @@ export function useSessionConversationInputQuery(params: UseSessionConversationI
   );
 
   return useMemo(() => ({
-    defaultModel: config?.agents.defaults.model,
+    defaultModel: sessionTypeState.selectedSessionTypeOption?.recommendedModel ?? config?.agents.defaults.model,
     defaultProjectRoot,
     fallbackPreferredModel,
     fallbackPreferredThinking,

package/src/features/chat/features/conversation/hooks/use-session-conversation-input-state.ts

@@ -53,7 +53,6 @@ export type SessionConversationInputActions = {
   readonly setAttachments: (attachments: readonly NcpDraftAttachment[]) => void;
   readonly addAttachments: (attachments: readonly NcpDraftAttachment[]) => readonly NcpDraftAttachment[];
   readonly removeAttachment: (attachmentId: string) => void;
-  readonly setSelectedModel: (model: SessionConversationInputStateValue) => void;
   readonly setSelectedThinkingLevel: (level: ThinkingLevel | null) => void;
   readonly syncSessionPreferences: (params: SessionConversationPreferenceSyncParams) => void;
   readonly setPendingSessionType: (sessionType: SetStateAction<string>) => void;

package/src/features/chat/features/conversation/hooks/use-session-conversation-preference-actions.ts

@@ -16,6 +16,7 @@ export type SessionConversationPreferenceSyncParams = {
   readonly modelOptions: ChatModelOption[];
   readonly selectedSessionExists: boolean;
   readonly selectedSessionKey?: string | null;
+  readonly selectedSessionType: string;
   readonly selectedSessionPreferredModel?: string;
   readonly selectedSessionPreferredThinking?: ThinkingLevel | null;
 };
@@ -34,10 +35,7 @@ export const useSessionConversationPreferenceActions = ({
   selectedThinkingLevel: currentSelectedThinkingLevel,
   updatePreferences,
 }: SessionConversationPreferenceActionsParams) => {
-  const previousSessionKeyRef = useRef<string | null | undefined>(undefined);
-  const setSelectedModel = useCallback((selectedModel: ConversationPreferenceValue) => {
-    updatePreferences({ selectedModel });
-  }, [updatePreferences]);
+  const previousPreferenceContextRef = useRef<string | undefined>(undefined);
   const setSelectedThinkingLevel = useCallback((selectedThinkingLevel: ThinkingLevel | null) => {
     updatePreferences({ selectedThinkingLevel });
   }, [updatePreferences]);
@@ -48,19 +46,21 @@ export const useSessionConversationPreferenceActions = ({
     modelOptions,
     selectedSessionExists,
     selectedSessionKey: sessionKey,
+    selectedSessionType,
     selectedSessionPreferredModel,
     selectedSessionPreferredThinking,
   }: SessionConversationPreferenceSyncParams) => {
     const selectedSessionKey = sessionKey ?? null;
-    const sessionChanged = previousSessionKeyRef.current !== selectedSessionKey;
-    const preserveCurrentPreference = sessionChanged && Boolean(selectedSessionKey) && !selectedSessionExists;
+    const preferenceContextKey = JSON.stringify([selectedSessionType, selectedSessionKey]);
+    const preferenceContextChanged = previousPreferenceContextRef.current !== preferenceContextKey;
+    const preserveCurrentPreference = preferenceContextChanged && Boolean(selectedSessionKey) && !selectedSessionExists;
     const selectedModel = resolveSelectedModelValue({
       currentSelectedModel: currentSelectedModel ?? undefined,
       modelOptions,
       selectedSessionPreferredModel,
       fallbackPreferredModel,
       defaultModel,
-      preferSessionPreferredModel: sessionChanged,
+      preferSessionPreferredModel: preferenceContextChanged,
       preserveCurrentSelectedModelOnSessionChange: preserveCurrentPreference,
     });
     const modelOption = modelOptions.find((option) => option.value === selectedModel);
@@ -72,7 +72,7 @@ export const useSessionConversationPreferenceActions = ({
       fallbackPreferredThinking,
       defaultThinkingLevel:
         (modelOption?.thinkingCapability?.default as ThinkingLevel | null | undefined) ?? null,
-      preferSessionPreferredThinking: sessionChanged,
+      preferSessionPreferredThinking: preferenceContextChanged,
       preserveCurrentSelectedThinkingOnSessionChange: preserveCurrentPreference,
     });
     if (
@@ -82,13 +82,12 @@ export const useSessionConversationPreferenceActions = ({
       updatePreferences({ selectedModel, selectedThinkingLevel });
     }
     if (!selectedSessionKey || selectedSessionExists) {
-      previousSessionKeyRef.current = selectedSessionKey;
+      previousPreferenceContextRef.current = preferenceContextKey;
     }
   }, [currentSelectedModel, currentSelectedThinkingLevel, updatePreferences]);
 
   return useMemo(() => ({
-    setSelectedModel,
     setSelectedThinkingLevel,
     syncSessionPreferences,
-  }), [setSelectedModel, setSelectedThinkingLevel, syncSessionPreferences]);
+  }), [setSelectedThinkingLevel, syncSessionPreferences]);
 };

package/src/features/chat/features/conversation/hooks/use-session-conversation-slash-commands.ts

@@ -7,9 +7,10 @@ import type { ChatSlashCommandDescriptor } from '@/features/chat/features/input/
 
 export function useSessionConversationSlashCommands(params: {
   language: I18nLanguage;
+  onContextCompactingChange?: (sessionId: string, isCompacting: boolean) => void;
   selectedSessionKey?: string | null;
 }): readonly ChatSlashCommandDescriptor[] {
-  const { language, selectedSessionKey } = params;
+  const { language, onContextCompactingChange, selectedSessionKey } = params;
   const presenter = usePresenter();
   const compactingSessionIdsRef = useRef(new Set<string>());
   const compactContext = useCallback(async (sessionId: string) => {
@@ -17,6 +18,7 @@ export function useSessionConversationSlashCommands(params: {
       return;
     }
     compactingSessionIdsRef.current.add(sessionId);
+    onContextCompactingChange?.(sessionId, true);
     try {
       await compactNcpSessionContext(sessionId);
       toast.success(t('chatSlashCommandCompactContextSuccess', language));
@@ -25,8 +27,9 @@ export function useSessionConversationSlashCommands(params: {
       toast.error(`${t('chatSlashCommandCompactContextFailed', language)}: ${message}`);
     } finally {
       compactingSessionIdsRef.current.delete(sessionId);
+      onContextCompactingChange?.(sessionId, false);
     }
-  }, [language]);
+  }, [language, onContextCompactingChange]);
 
   return useMemo(() => {
     const sessionId = selectedSessionKey?.trim();

package/src/features/chat/features/message/components/chat-message-list.container.tsx

@@ -159,16 +159,19 @@ const renderChatPanelAppCard = (panelApp: ChatPanelAppCardViewModel) => (
   <ChatInlinePanelAppCard panelApp={panelApp} />
 );
 
-function ChatContextCompactionDivider({
+export function ChatContextCompactionDivider({
   checkpoint,
 }: {
-  checkpoint: ContextCompactionTimelineView;
+  checkpoint?: ContextCompactionTimelineView;
 }) {
-  const title = [
-    `${t("chatContextCompactionCoveredMessages")}: ${checkpoint.coveredSessionMessageCount}`,
-    `${t("chatContextCompactionOriginalTokens")}: ${checkpoint.originalEstimatedTokens}`,
-    `${t("chatContextCompactionProjectedTokens")}: ${checkpoint.projectedEstimatedTokens}`,
-  ].join("\n");
+  const isCompacting = !checkpoint || checkpoint.status === "compressing";
+  const title = checkpoint
+    ? [
+        `${t("chatContextCompactionCoveredMessages")}: ${checkpoint.coveredSessionMessageCount}`,
+        `${t("chatContextCompactionOriginalTokens")}: ${checkpoint.originalEstimatedTokens}`,
+        `${t("chatContextCompactionProjectedTokens")}: ${checkpoint.projectedEstimatedTokens}`,
+      ].join("\n")
+    : undefined;
   return (
     <div
       className="my-4 flex items-center gap-3 text-[11px] text-muted-foreground"
@@ -176,13 +179,13 @@ function ChatContextCompactionDivider({
     >
       <div className="h-px flex-1 bg-border" />
       <div className="inline-flex items-center gap-2 rounded-full border border-border bg-muted px-3 py-1">
-        {checkpoint.status === "compressing" ? (
+        {isCompacting ? (
           <span className="h-1.5 w-1.5 animate-pulse rounded-full bg-muted-foreground" />
         ) : (
           <span className="h-1.5 w-1.5 rounded-full bg-muted-foreground/45" />
         )}
         <span>
-          {checkpoint.status === "compressing"
+          {isCompacting
             ? t("chatContextCompactionCompressing")
             : t("chatContextCompactionCompressed")}
         </span>

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' }],
+      }),
+    ]);
   });
 });