@nextclaw/ui 0.12.25 → 0.12.27

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

@@ -5,6 +5,8 @@ import {
   type NcpEndpointEvent,
   type NcpEndpointManifest,
   type NcpEndpointSubscriber,
+  type NcpMessage,
+  type NcpStreamRequestPayload,
   NcpEventType,
 } from "@nextclaw/ncp";
 import { beforeEach, describe, expect, it, vi } from "vitest";
@@ -31,9 +33,57 @@ class DeferredSendClient implements NcpAgentClientEndpoint {
   readonly stream = vi.fn(async () => {});
   readonly abort = vi.fn(async () => {});
   private listeners = new Set<NcpEndpointSubscriber>();
-  private releaseCompletion: (() => void) | null = null;
-  private completionGate = new Promise<void>((resolve) => {
-    this.releaseCompletion = resolve;
+
+  emit = async (event: NcpEndpointEvent): Promise<void> => {
+    this.publish(event);
+  };
+
+  subscribe = (listener: NcpEndpointSubscriber): (() => void) => {
+    this.listeners.add(listener);
+    return () => {
+      this.listeners.delete(listener);
+    };
+  };
+
+  send = vi.fn(async (envelope: NcpAgentSendEnvelope) => ({
+    sessionId: "session-created",
+    userMessageId: envelope.message.id,
+    assistantMessageId: "assistant-1",
+    runId: "run-1",
+    ...(envelope.correlationId ? { correlationId: envelope.correlationId } : {}),
+  }));
+
+  private publish = (event: NcpEndpointEvent): void => {
+    for (const listener of this.listeners) {
+      listener(event);
+    }
+  };
+}
+
+class ExistingSessionLiveClient implements NcpAgentClientEndpoint {
+  readonly manifest: NcpEndpointManifest = {
+    endpointKind: "agent",
+    endpointId: "existing-session-live-client",
+    version: "0.1.0",
+    supportsStreaming: true,
+    supportsAbort: true,
+    supportsProactiveMessages: false,
+    supportsLiveSessionStream: true,
+    supportedPartTypes: ["text"],
+    expectedLatency: "seconds",
+  };
+
+  readonly start = vi.fn(async () => {});
+  readonly abort = vi.fn(async () => {});
+  private listeners = new Set<NcpEndpointSubscriber>();
+  private liveStreamActive = false;
+
+  stop = vi.fn(async () => {
+    this.liveStreamActive = false;
+  });
+
+  stream = vi.fn(async (_payload: NcpStreamRequestPayload) => {
+    this.liveStreamActive = true;
   });
 
   emit = async (event: NcpEndpointEvent): Promise<void> => {
@@ -47,78 +97,59 @@ class DeferredSendClient implements NcpAgentClientEndpoint {
     };
   };
 
-  send = vi.fn(async (_envelope: NcpAgentSendEnvelope): Promise<void> => {
-    this.publish({
-      type: NcpEventType.MessageSent,
-      payload: {
-        sessionId: "session-created",
-        message: {
-          id: "user-1",
-          sessionId: "session-created",
-          role: "user",
-          status: "final",
-          parts: [{ type: "text", text: "hello" }],
-          timestamp: now,
+  send = vi.fn(async (envelope: NcpAgentSendEnvelope) => {
+    const events: NcpEndpointEvent[] = [
+      {
+        type: NcpEventType.RunStarted,
+        payload: {
+          sessionId: "session-existing",
+          messageId: "assistant-1",
+          runId: "run-1",
         },
       },
-    });
-    this.publish({
-      type: NcpEventType.RunStarted,
-      payload: {
-        sessionId: "session-created",
-        messageId: "assistant-1",
-        runId: "run-1",
-      },
-    });
-    await this.completionGate;
-    this.publish({
-      type: NcpEventType.MessageTextStart,
-      payload: {
-        sessionId: "session-created",
-        messageId: "assistant-1",
-      },
-    });
-    this.publish({
-      type: NcpEventType.MessageTextDelta,
-      payload: {
-        sessionId: "session-created",
-        messageId: "assistant-1",
-        delta: "done",
+      {
+        type: NcpEventType.MessageTextStart,
+        payload: {
+          sessionId: "session-existing",
+          messageId: "assistant-1",
+        },
       },
-    });
-    this.publish({
-      type: NcpEventType.MessageTextEnd,
-      payload: {
-        sessionId: "session-created",
-        messageId: "assistant-1",
+      {
+        type: NcpEventType.MessageTextDelta,
+        payload: {
+          sessionId: "session-existing",
+          messageId: "assistant-1",
+          delta: "done",
+        },
       },
-    });
-    this.publish({
-      type: NcpEventType.MessageCompleted,
-      payload: {
-        sessionId: "session-created",
-        message: {
-          id: "assistant-1",
-          sessionId: "session-created",
-          role: "assistant",
-          status: "final",
-          parts: [{ type: "text", text: "done" }],
-          timestamp: now,
+      {
+        type: NcpEventType.MessageTextEnd,
+        payload: {
+          sessionId: "session-existing",
+          messageId: "assistant-1",
         },
       },
-    });
-    this.publish({
-      type: NcpEventType.RunFinished,
-      payload: {
-        sessionId: "session-created",
-        runId: "run-1",
+      {
+        type: NcpEventType.RunFinished,
+        payload: {
+          sessionId: "session-existing",
+          runId: "run-1",
+        },
       },
-    });
-  });
+    ];
 
-  release = (): void => {
-    this.releaseCompletion?.();
-  };
+    if (this.liveStreamActive) {
+      for (const event of events) {
+        this.publish(event);
+      }
+    }
+    return {
+      sessionId: "session-existing",
+      userMessageId: envelope.message.id,
+      assistantMessageId: "assistant-1",
+      runId: "run-1",
+    };
+  });
 
   private publish = (event: NcpEndpointEvent): void => {
     for (const listener of this.listeners) {
@@ -127,12 +158,20 @@ class DeferredSendClient implements NcpAgentClientEndpoint {
   };
 }
 
+function readAssistantText(messages: readonly NcpMessage[]): string {
+  const assistant = messages.find((message) => message.role === "assistant");
+  return assistant?.parts
+    .filter((part) => part.type === "text")
+    .map((part) => part.text ?? "")
+    .join("") ?? "";
+}
+
 describe("useNcpAgentRuntime", () => {
   beforeEach(() => {
     vi.clearAllMocks();
   });
 
-  it("keeps the active send stream alive when a new root chat materializes a session id", async () => {
+  it("returns a command handle when a new root chat materializes a session id", async () => {
     const client = new DeferredSendClient();
     const manager = new DefaultNcpAgentConversationStateManager();
     const envelope: NcpAgentSendEnvelope = {
@@ -150,31 +189,21 @@ describe("useNcpAgentRuntime", () => {
       { initialProps: { sessionId: undefined as string | undefined } },
     );
 
-    let sendPromise: Promise<void>;
-    act(() => {
-      sendPromise = result.current.send(envelope);
+    let handle: Awaited<ReturnType<typeof result.current.send>> | null = null;
+    await act(async () => {
+      handle = await result.current.send(envelope);
     });
 
-    await waitFor(() => {
-      expect(result.current.snapshot.activeRun?.sessionId).toBe("session-created");
+    expect(handle).toEqual({
+      sessionId: "session-created",
+      userMessageId: "user-1",
+      assistantMessageId: "assistant-1",
+      runId: "run-1",
     });
-
-    rerender({ sessionId: "session-created" });
-
+    expect(result.current.visibleMessages).toEqual([]);
     expect(client.stop).not.toHaveBeenCalled();
 
-    await act(async () => {
-      client.release();
-      await sendPromise;
-    });
-
-    await waitFor(() => {
-      expect(result.current.snapshot.activeRun).toBeNull();
-    });
-    expect(result.current.visibleMessages.map((message) => message.id)).toEqual([
-      "user-1",
-      "assistant-1",
-    ]);
+    rerender({ sessionId: "session-created" });
   });
 
   it("aborts by session id even before a hydrated active run reaches local state", async () => {
@@ -190,4 +219,34 @@ describe("useNcpAgentRuntime", () => {
 
     expect(client.abort).toHaveBeenCalledWith({ sessionId: "session-running" });
   });
+
+  it("uses the hydrated live stream as the only event source while sending to an existing session", async () => {
+    const client = new ExistingSessionLiveClient();
+    const manager = new DefaultNcpAgentConversationStateManager();
+    await client.stream({ sessionId: "session-existing" });
+    const { result } = renderHook(() =>
+      useNcpAgentRuntime({ sessionId: "session-existing", client, manager: manager as never }),
+    );
+
+    await act(async () => {
+      await result.current.send({
+        sessionId: "session-existing",
+        message: {
+          id: "user-1",
+          sessionId: "session-existing",
+          role: "user",
+          status: "final",
+          parts: [{ type: "text", text: "hello" }],
+          timestamp: now,
+        },
+      });
+    });
+
+    await waitFor(() => {
+      expect(result.current.snapshot.activeRun).toBeNull();
+      expect(readAssistantText(result.current.visibleMessages)).toBe("done");
+    });
+    expect(client.stop).not.toHaveBeenCalled();
+    expect(client.stream).toHaveBeenCalledTimes(1);
+  });
 });

package/src/features/chat/managers/ncp-chat-input.manager.test.ts

@@ -15,6 +15,7 @@ describe('NcpChatInputManager', () => {
         composerNodes: [createChatComposerTextNode('hello from current thread')],
         attachments: [],
         selectedSkills: [],
+        composerFocusRequest: null,
         selectedSessionType: 'native',
         selectedModel: 'gpt-5',
         selectedThinkingLevel: null,
@@ -209,4 +210,23 @@ describe('NcpChatInputManager', () => {
     expect(streamActionsManager.sendMessage).toHaveBeenCalledTimes(1);
     expect(sessionListManager.materializeRootSessionRoute).not.toHaveBeenCalled();
   });
+
+  it('creates and consumes one-shot composer focus requests', () => {
+    const manager = new NcpChatInputManager(
+      {} as ConstructorParameters<typeof NcpChatInputManager>[0],
+      {} as ConstructorParameters<typeof NcpChatInputManager>[1],
+      {} as ConstructorParameters<typeof NcpChatInputManager>[2],
+    );
+
+    manager.requestComposerFocusAtEnd();
+
+    const request = useChatInputStore.getState().snapshot.composerFocusRequest;
+    expect(request).toEqual({ id: 1, placement: 'end' });
+
+    manager.consumeComposerFocusRequest(999);
+    expect(useChatInputStore.getState().snapshot.composerFocusRequest).toEqual(request);
+
+    manager.consumeComposerFocusRequest(request!.id);
+    expect(useChatInputStore.getState().snapshot.composerFocusRequest).toBeNull();
+  });
 });

package/src/features/chat/managers/ncp-chat-input.manager.ts

@@ -132,6 +132,24 @@ export class NcpChatInputManager {
     this.syncComposerSnapshot(createChatComposerNodesFromDraft(value));
   };
 
+  requestComposerFocusAtEnd = () => {
+    const currentRequest = useChatInputStore.getState().snapshot.composerFocusRequest;
+    useChatInputStore.getState().setSnapshot({
+      composerFocusRequest: {
+        id: (currentRequest?.id ?? 0) + 1,
+        placement: 'end',
+      },
+    });
+  };
+
+  consumeComposerFocusRequest = (requestId: number) => {
+    const currentRequest = useChatInputStore.getState().snapshot.composerFocusRequest;
+    if (currentRequest?.id !== requestId) {
+      return;
+    }
+    useChatInputStore.getState().setSnapshot({ composerFocusRequest: null });
+  };
+
   setComposerNodes = (next: SetStateAction<ChatComposerNode[]>) => {
     const prev = useChatInputStore.getState().snapshot.composerNodes;
     const value = this.resolveUpdateValue(prev, next);

package/src/features/chat/managers/ncp-chat-presenter.manager.ts

@@ -23,5 +23,6 @@ export class NcpChatPresenter {
     this.chatSessionListManager.createSession();
     this.chatSessionListManager.setSelectedAgentId('main');
     this.chatInputManager.setDraft(prompt);
+    this.chatInputManager.requestComposerFocusAtEnd();
   };
 }

package/src/features/chat/pages/ncp-chat-page.tsx

@@ -281,7 +281,10 @@ function useNcpChatStreamBindings(params: ReturnType<typeof useNcpChatPageState>
           return;
         }
         try {
-          await agent.send(envelope);
+          const handle = await agent.send(envelope);
+          if (!payload.sessionKey && handle?.sessionId) {
+            presenter.chatSessionListManager.materializeRootSessionRoute(handle.sessionId);
+          }
         } catch (error) {
           if (payload.restoreDraftOnError) {
             if (payload.composerNodes && payload.composerNodes.length > 0) {

package/src/features/chat/stores/chat-input.store.ts

@@ -44,6 +44,7 @@ export type ChatInputSnapshot = {
   skillRecords: SessionSkillEntryView[];
   isSkillsLoading: boolean;
   selectedSkills: string[];
+  composerFocusRequest: { id: number; placement: 'end' } | null;
 };
 
 type ChatInputStore = {
@@ -75,7 +76,8 @@ const initialSnapshot: ChatInputSnapshot = {
   sessionTypeUnavailable: false,
   skillRecords: [],
   isSkillsLoading: false,
-  selectedSkills: []
+  selectedSkills: [],
+  composerFocusRequest: null
 };
 
 export const useChatInputStore = create<ChatInputStore>((set) => ({

package/src/features/chat/utils/ncp-chat-input-availability.utils.test.ts

@@ -36,6 +36,7 @@ function createSnapshot(
     skillRecords: [],
     isSkillsLoading: false,
     selectedSkills: [],
+    composerFocusRequest: null,
     ...overrides,
   };
 }

package/src/features/marketplace/components/curated-shelves/marketplace-curated-scene-route.test.tsx

@@ -18,11 +18,27 @@ type ItemsQueryState = {
   fetchNextPage?: () => Promise<unknown>;
 };
 
+type ScenesQueryState = {
+  data?: {
+    scenes: Array<{
+      scene: string;
+      title: string;
+      description?: string;
+      count?: number;
+    }>;
+  };
+  isLoading: boolean;
+  isFetching: boolean;
+  isError: boolean;
+  error: Error | null;
+};
+
 const mocks = vi.hoisted(() => ({
   navigate: vi.fn(),
   docOpen: vi.fn(),
   routeParams: {} as { scene?: string },
   itemsQuery: null as unknown as ItemsQueryState,
+  scenesQuery: null as unknown as ScenesQueryState,
 }));
 
 vi.mock("react-router-dom", async () => {
@@ -55,21 +71,7 @@ vi.mock("@/shared/hooks/use-confirm-dialog", () => ({
 
 vi.mock("@/features/marketplace/hooks/use-marketplace", () => ({
   useMarketplaceItems: () => mocks.itemsQuery,
-  useMarketplaceSkillScenes: () => ({
-    data: {
-      scenes: [
-        {
-          scene: "development-debugging",
-          title: "Development",
-          description: "Review, debug, analyze, and verify delivery work.",
-        },
-      ],
-    },
-    isLoading: false,
-    isFetching: false,
-    isError: false,
-    error: null,
-  }),
+  useMarketplaceSkillScenes: () => mocks.scenesQuery,
   useMarketplaceSkillSceneCounts: () => new Map([["development-debugging", 2]]),
   useMarketplaceInstalled: () => ({
     data: {
@@ -165,12 +167,32 @@ function createItemsQuery(items: MarketplaceItemSummary[]) {
   };
 }
 
+function createScenesQuery(overrides: Partial<ScenesQueryState> = {}) {
+  return {
+    data: {
+      scenes: [
+        {
+          scene: "development-debugging",
+          title: "Development",
+          description: "Review, debug, analyze, and verify delivery work.",
+        },
+      ],
+    },
+    isLoading: false,
+    isFetching: false,
+    isError: false,
+    error: null,
+    ...overrides,
+  };
+}
+
 describe("Marketplace curated scene routes", () => {
   beforeEach(() => {
     mocks.navigate.mockReset();
     mocks.docOpen.mockReset();
     mocks.routeParams = {};
     mocks.itemsQuery = createItemsQuery(createSceneItems());
+    mocks.scenesQuery = createScenesQuery();
   });
 
   it("opens curated goals through a scene route", async () => {
@@ -183,6 +205,7 @@ describe("Marketplace curated scene routes", () => {
     expect(mocks.navigate).toHaveBeenCalledWith(
       "/skills/scenes/development-debugging",
     );
+    expect(screen.getByText("All Skills")).toBeTruthy();
     expect(container.querySelector("input")?.getAttribute("value") ?? "").toBe("");
   });
 
@@ -196,7 +219,7 @@ describe("Marketplace curated scene routes", () => {
     expect(screen.getByRole("button", { name: "Back" })).toBeTruthy();
     expect(screen.getByText("Code Review")).toBeTruthy();
     expect(screen.queryByText("Calendar Sync")).toBeNull();
-    expect(screen.queryByText("Skill Catalog")).toBeNull();
+    expect(screen.queryByText("All Skills")).toBeNull();
     expect(screen.queryByPlaceholderText("Search skills...")).toBeNull();
 
     await user.click(screen.getByRole("button", { name: "Back" }));
@@ -232,4 +255,19 @@ describe("Marketplace curated scene routes", () => {
 
     expect(screen.getByTestId("marketplace-loading-more")).toBeTruthy();
   });
+
+  it("keeps the shelf layout stable while scenes are still loading", () => {
+    mocks.scenesQuery = createScenesQuery({
+      data: undefined,
+      isLoading: true,
+      isFetching: true,
+    });
+
+    render(<MarketplacePage forcedType="skills" />);
+
+    expect(screen.getByTestId("marketplace-scenes-skeleton")).toBeTruthy();
+    expect(screen.getByText("Recently updated")).toBeTruthy();
+    expect(screen.getByText("All Skills")).toBeTruthy();
+    expect(screen.queryByRole("button", { name: /Development/ })).toBeNull();
+  });
 });