@nextclaw/ui 0.12.23 → 0.12.25

package/src/features/chat/components/layout/chat-sidebar.tsx

@@ -2,7 +2,6 @@ import { useEffect, useMemo, useState } from 'react';
 import type { SessionEntryView } from '@/shared/lib/api';
 import { BrandHeader } from '@/shared/components/common/brand-header';
 import { StatusBadge } from '@/shared/components/common/status-badge';
-import { SelectItem } from '@/shared/components/ui/select';
 import { ChatSidebarListModeSwitch, ChatSidebarProjectGroups, type ChatSidebarProjectGroup } from '@/features/chat';
 import { useChatSidebarSessionLabelEditor } from '@/features/chat/hooks/use-chat-sidebar-session-label-editor';
 import { useNcpSessionListView, type NcpSessionListItemView } from '@/features/chat/hooks/use-ncp-session-list-view';
@@ -14,38 +13,36 @@ import { useAgents } from '@/shared/hooks/use-agents';
 import { getSessionProjectName } from '@/shared/lib/session-project';
 import { cn } from '@/shared/lib/utils';
 import { LANGUAGE_OPTIONS, t, type I18nLanguage } from '@/shared/lib/i18n';
-import { THEME_OPTIONS, type UiTheme } from '@/shared/lib/theme';
+import { THEME_OPTIONS } from '@/shared/lib/theme';
 import { useI18n } from '@/app/components/i18n-provider';
 import { useTheme } from '@/app/components/theme-provider';
 import { useDocBrowser } from '@/shared/components/doc-browser';
-import { SidebarActionItem, SidebarNavLinkItem, SidebarSelectItem } from '@/app/components/layout/sidebar-items';
+import { SidebarNavLinkItem } from '@/app/components/layout/sidebar-items';
 import {
   AlarmClock,
   Bot,
-  BookOpen,
   BrainCircuit,
-  Languages,
   MessageSquareText,
-  Palette,
-  Settings
 } from 'lucide-react';
 import { ChatSidebarSessionEntry } from '@/features/chat/components/layout/chat-sidebar-session-entry';
 import {
   ChatSidebarDesktopToolbar,
   ChatSidebarMobileToolbar,
 } from '@/features/chat/components/layout/chat-sidebar-toolbar';
+import { ChatSidebarUtilityMenu } from '@/features/chat/components/layout/chat-sidebar-utility-menu';
+import { isMacDesktopHost, isWindowsDesktopHost } from '@/platforms/desktop';
 
 type DateGroup = {
   label: string;
   items: NcpSessionListItemView[];
 };
 
-function getSessionUpdatedAtTimestamp(item: NcpSessionListItemView): number {
-  return new Date(item.session.updatedAt).getTime();
+function getSessionActivityAtTimestamp(item: NcpSessionListItemView): number {
+  return new Date(item.session.lastMessageAt ?? item.session.createdAt).getTime();
 }
 
-function sortSessionItemsByUpdatedAtDesc(items: NcpSessionListItemView[]): NcpSessionListItemView[] {
-  return [...items].sort((left, right) => getSessionUpdatedAtTimestamp(right) - getSessionUpdatedAtTimestamp(left));
+function sortSessionItemsByActivityAtDesc(items: NcpSessionListItemView[]): NcpSessionListItemView[] {
+  return [...items].sort((left, right) => getSessionActivityAtTimestamp(right) - getSessionActivityAtTimestamp(left));
 }
 
 function groupSessionsByDate(items: NcpSessionListItemView[]): DateGroup[] {
@@ -60,8 +57,7 @@ function groupSessionsByDate(items: NcpSessionListItemView[]): DateGroup[] {
   const older: NcpSessionListItemView[] = [];
 
   for (const item of items) {
-    const { session } = item;
-    const ts = new Date(session.updatedAt).getTime();
+    const ts = getSessionActivityAtTimestamp(item);
     if (ts >= todayStart) {
       today.push(item);
     } else if (ts >= yesterdayStart) {
@@ -90,7 +86,7 @@ function groupSessionsByProject(items: NcpSessionListItemView[]): ChatSidebarPro
       continue;
     }
     const existingGroup = grouped.get(projectRoot);
-    const updatedAt = getSessionUpdatedAtTimestamp(item);
+    const updatedAt = getSessionActivityAtTimestamp(item);
     if (existingGroup) {
       existingGroup.items.push(item);
       existingGroup.latestUpdatedAt = Math.max(existingGroup.latestUpdatedAt, updatedAt);
@@ -107,11 +103,28 @@ function groupSessionsByProject(items: NcpSessionListItemView[]): ChatSidebarPro
   return [...grouped.values()]
     .map((group) => ({
       ...group,
-      items: sortSessionItemsByUpdatedAtDesc(group.items)
+      items: sortSessionItemsByActivityAtDesc(group.items)
     }))
     .sort((left, right) => right.latestUpdatedAt - left.latestUpdatedAt);
 }
 
+function groupChildSessionsByParentKey(items: NcpSessionListItemView[]): Map<string, NcpSessionListItemView[]> {
+  const grouped = new Map<string, NcpSessionListItemView[]>();
+  for (const item of items) {
+    const parentSessionKey = item.session.parentSessionId?.trim();
+    if (!parentSessionKey) {
+      continue;
+    }
+    const bucket = grouped.get(parentSessionKey) ?? [];
+    bucket.push(item);
+    grouped.set(parentSessionKey, bucket);
+  }
+  for (const bucket of grouped.values()) {
+    bucket.sort((left, right) => getSessionActivityAtTimestamp(right) - getSessionActivityAtTimestamp(left));
+  }
+  return grouped;
+}
+
 function sessionTitle(session: SessionEntryView): string {
   if (session.label && session.label.trim()) {
     return session.label.trim();
@@ -170,6 +183,7 @@ export function ChatSidebar({
   const presenter = usePresenter();
   const docBrowser = useDocBrowser();
   const [isCreateMenuOpen, setIsCreateMenuOpen] = useState(false);
+  const [isUtilityMenuOpen, setIsUtilityMenuOpen] = useState(false);
   const inputSnapshot = useChatInputStore((state) => state.snapshot);
   const listSnapshot = useChatSessionListStore((state) => state.snapshot);
   const systemStatus = useSystemStatus();
@@ -179,27 +193,20 @@ export function ChatSidebar({
   const { theme, setTheme } = useTheme();
   const currentThemeLabel = t(THEME_OPTIONS.find((o) => o.value === theme)?.labelKey ?? 'themeWarm');
   const currentLanguageLabel = LANGUAGE_OPTIONS.find((o) => o.value === language)?.label ?? language;
+  const utilityThemeOptions = useMemo(
+    () => THEME_OPTIONS.map((option) => ({ value: option.value, label: t(option.labelKey) })),
+    [],
+  );
+  const utilityLanguageOptions = useMemo(
+    () => LANGUAGE_OPTIONS.map((option) => ({ value: option.value, label: option.label })),
+    [],
+  );
   const agentsById = useMemo(
     () => new Map((agentsQuery.data?.agents ?? []).map((agent) => [agent.id, agent])),
     [agentsQuery.data?.agents]
   );
-  const sortedItems = useMemo(() => sortSessionItemsByUpdatedAtDesc(items), [items]);
-  const childSessionsByParentKey = useMemo(() => {
-    const grouped = new Map<string, NcpSessionListItemView[]>();
-    for (const item of items) {
-      const parentSessionKey = item.session.parentSessionId?.trim();
-      if (!parentSessionKey) {
-        continue;
-      }
-      const bucket = grouped.get(parentSessionKey) ?? [];
-      bucket.push(item);
-      grouped.set(parentSessionKey, bucket);
-    }
-    for (const bucket of grouped.values()) {
-      bucket.sort((left, right) => getSessionUpdatedAtTimestamp(right) - getSessionUpdatedAtTimestamp(left));
-    }
-    return grouped;
-  }, [items]);
+  const sortedItems = useMemo(() => sortSessionItemsByActivityAtDesc(items), [items]);
+  const childSessionsByParentKey = useMemo(() => groupChildSessionsByParentKey(items), [items]);
   const groups = useMemo(() => groupSessionsByDate(sortedItems), [sortedItems]);
   const projectGroups = useMemo(() => groupSessionsByProject(sortedItems), [sortedItems]);
   const defaultSessionType = inputSnapshot.defaultSessionType || 'native';
@@ -248,10 +255,8 @@ export function ChatSidebar({
     />
   );
   const createSessionAndOpenIfNeeded = (sessionType: string, projectRoot?: string | null) => {
-    const sessionKey = typeof projectRoot === "string"
-      ? presenter.chatSessionListManager.createSession(sessionType, projectRoot)
-      : presenter.chatSessionListManager.createSession(sessionType);
-    if (isMobileVariant) presenter.chatUiManager.goToSession(sessionKey);
+    presenter.chatSessionListManager.createSession(sessionType, typeof projectRoot === "string" ? projectRoot : undefined);
+    if (isMobileVariant) presenter.chatUiManager.goToChatRoot();
   };
 
   return (
@@ -263,10 +268,10 @@ export function ChatSidebar({
           : 'w-[280px] shrink-0 border-r border-gray-200/60',
       )}
     >
-      {!isMobileVariant ? (
-        <div className="px-5 pt-5 pb-3">
+      {!isMobileVariant && !isWindowsDesktopHost() ? (
+        <div className={cn('px-5 pb-3', isMacDesktopHost() ? 'pt-1.5' : 'pt-5')}>
           <BrandHeader
-            className="flex items-center gap-2.5 min-w-0"
+            className="flex min-w-0 items-center gap-2"
             suffix={<StatusBadge status={systemStatus.connectionStatus} />}
           />
         </div>
@@ -362,43 +367,20 @@ export function ChatSidebar({
       </div>
 
       {!isMobileVariant ? (
-        <div className="px-3 py-3 border-t border-gray-200/60 space-y-0.5">
-          <SidebarNavLinkItem
-            to="/settings"
-            label={t('settings')}
-            icon={Settings}
-            density="compact"
-          />
-          <SidebarActionItem
-            onClick={() => docBrowser.open(undefined, { kind: 'docs', newTab: true, title: 'Docs' })}
-            icon={BookOpen}
-            label={t('docBrowserHelp')}
-            density="compact"
+        <div className="px-3 py-3 border-t border-gray-200/60">
+          <ChatSidebarUtilityMenu
+            isOpen={isUtilityMenuOpen}
+            onOpenChange={setIsUtilityMenuOpen}
+            currentTheme={theme}
+            currentThemeLabel={currentThemeLabel}
+            themeOptions={utilityThemeOptions}
+            onSelectTheme={setTheme}
+            currentLanguage={language}
+            currentLanguageLabel={currentLanguageLabel}
+            languageOptions={utilityLanguageOptions}
+            onSelectLanguage={handleLanguageSwitch}
+            onOpenDocs={() => docBrowser.open(undefined, { kind: 'docs', newTab: true, title: 'Docs' })}
           />
-          <SidebarSelectItem
-            value={theme}
-            onValueChange={(value) => setTheme(value as UiTheme)}
-            icon={Palette}
-            label={t('theme')}
-            valueLabel={currentThemeLabel}
-            density="compact"
-          >
-            {THEME_OPTIONS.map((option) => (
-              <SelectItem key={option.value} value={option.value} className="text-xs">{t(option.labelKey)}</SelectItem>
-            ))}
-          </SidebarSelectItem>
-          <SidebarSelectItem
-            value={language}
-            onValueChange={(value) => handleLanguageSwitch(value as I18nLanguage)}
-            icon={Languages}
-            label={t('language')}
-            valueLabel={currentLanguageLabel}
-            density="compact"
-          >
-            {LANGUAGE_OPTIONS.map((option) => (
-              <SelectItem key={option.value} value={option.value} className="text-xs">{option.label}</SelectItem>
-            ))}
-          </SidebarSelectItem>
         </div>
       ) : null}
     </aside>

package/src/features/chat/components/providers/chat-presenter.provider.tsx

@@ -33,6 +33,7 @@ export type ChatThreadManagerLike = {
   createSession: () => void;
   goToProviders: () => void;
   openChildSessionPanel: (params: { parentSessionKey: string; activeChildSessionKey?: string | null }) => void;
+  openSessionCronPanel: (sessionKey: string) => void;
   openFilePreview: (action: ChatFileOpenActionViewModel) => void;
   openSessionFromToolAction: (action: ChatToolActionViewModel) => void;
   selectChildSessionDetail: (sessionKey: string) => void;
@@ -48,6 +49,7 @@ export type ChatPresenterLike = {
   chatInputManager: ChatInputManagerLike;
   chatSessionListManager: ChatSessionListManager;
   chatThreadManager: ChatThreadManagerLike;
+  startAgentCreationDraft: (prompt: string) => void;
 };
 
 const ChatPresenterContext = createContext<ChatPresenterLike | null>(null);

package/src/features/chat/components/workspace/session-cron-job-content.tsx

@@ -0,0 +1,103 @@
+import { Trash2 } from "lucide-react";
+import type { CronJobView } from "@/shared/lib/api";
+import { Button } from "@/shared/components/ui/button";
+import { useConfirmDialog } from "@/shared/hooks/use-confirm-dialog";
+import { useDeleteCronJob } from "@/shared/hooks/use-config";
+import {
+  describeCronDelivery,
+  describeCronSchedule,
+  formatCronDate,
+} from "@/shared/lib/cron";
+import { t } from "@/shared/lib/i18n";
+
+export function SessionCronJobContent({ jobs }: { jobs: readonly CronJobView[] }) {
+  const deleteCronJob = useDeleteCronJob();
+  const { confirm, ConfirmDialog } = useConfirmDialog();
+
+  const handleDelete = async (job: CronJobView) => {
+    const confirmed = await confirm({
+      title: `${t("cronDeleteConfirm")}?`,
+      description: job.name ? `${job.name} (${job.id})` : job.id,
+      confirmLabel: t("delete"),
+    });
+    if (!confirmed) {
+      return;
+    }
+    deleteCronJob.mutate({ id: job.id });
+  };
+
+  return (
+    <div className="h-full overflow-y-auto custom-scrollbar px-4 py-4">
+      <div className="mb-4">
+        <div className="text-sm font-semibold text-gray-900">
+          {t("chatWorkspaceSessionCronJobs")}
+        </div>
+        <div className="mt-1 text-xs text-gray-500">
+          {t("cronTotalLabel")}: {jobs.length}
+        </div>
+      </div>
+      {jobs.length === 0 ? (
+        <div className="py-8 text-center text-sm text-gray-500">
+          {t("chatWorkspaceCronJobEmpty")}
+        </div>
+      ) : (
+        <div className="space-y-3">
+          {jobs.map((job) => (
+            <div
+              key={job.id}
+              className="rounded-lg border border-gray-200 bg-white px-3 py-3"
+            >
+              <div className="flex items-start justify-between gap-3">
+                <div className="min-w-0">
+                  <div className="truncate text-sm font-semibold text-gray-900">
+                    {job.name || job.id}
+                  </div>
+                  <div className="mt-1 text-[11px] text-gray-400">
+                    {job.id}
+                  </div>
+                </div>
+                <Button
+                  type="button"
+                  variant="subtle"
+                  size="sm"
+                  className="h-7 gap-1 rounded-lg px-2"
+                  onClick={() => void handleDelete(job)}
+                  disabled={deleteCronJob.isPending}
+                >
+                  <Trash2 className="h-3.5 w-3.5" />
+                  {t("delete")}
+                </Button>
+              </div>
+              <div className="mt-3 space-y-1.5 text-xs text-gray-500">
+                <div>
+                  <span className="font-medium text-gray-700">{t("cronScheduleLabel")}:</span>{" "}
+                  {describeCronSchedule(job)}
+                </div>
+                <div>
+                  <span className="font-medium text-gray-700">{t("cronNextRun")}:</span>{" "}
+                  {formatCronDate(job.state.nextRunAt)}
+                </div>
+                <div>
+                  <span className="font-medium text-gray-700">{t("cronLastRun")}:</span>{" "}
+                  {formatCronDate(job.state.lastRunAt)}
+                </div>
+                <div>
+                  <span className="font-medium text-gray-700">{t("cronLastStatus")}:</span>{" "}
+                  {job.state.lastStatus ?? "-"}
+                </div>
+                <div>
+                  <span className="font-medium text-gray-700">{t("cronDeliverTo")}:</span>{" "}
+                  {describeCronDelivery(job)}
+                </div>
+              </div>
+              <div className="mt-3 whitespace-pre-wrap break-words text-sm text-gray-700">
+                {job.payload.message}
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+      <ConfirmDialog />
+    </div>
+  );
+}

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

@@ -7,6 +7,11 @@ const mocks = vi.hoisted(() => ({
   manager: {
     reset: vi.fn(),
     hydrate: vi.fn(),
+    getSnapshot: vi.fn(() => ({
+      messages: [],
+      streamingMessage: null,
+      activeRun: null,
+    })),
   },
   runtime: {
     snapshot: {
@@ -37,6 +42,7 @@ describe("useHydratedNcpAgent", () => {
   beforeEach(() => {
     mocks.manager.reset.mockReset();
     mocks.manager.hydrate.mockReset();
+    mocks.manager.getSnapshot.mockClear();
     mocks.runtime.send.mockReset();
     mocks.runtime.abort.mockReset();
     mocks.runtime.streamRun.mockReset();

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

@@ -1,90 +1,193 @@
-import { act, renderHook } from "@testing-library/react";
-import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import { NcpEventType, type NcpEndpointEvent } from "@nextclaw/ncp";
+import { act, renderHook, waitFor } from "@testing-library/react";
+import {
+  type NcpAgentClientEndpoint,
+  type NcpAgentSendEnvelope,
+  type NcpEndpointEvent,
+  type NcpEndpointManifest,
+  type NcpEndpointSubscriber,
+  NcpEventType,
+} from "@nextclaw/ncp";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { DefaultNcpAgentConversationStateManager } from "../../../../../ncp-packages/nextclaw-ncp-toolkit/src/agent/agent-conversation-state-manager.ts";
 import { useNcpAgentRuntime } from "../../../../../ncp-packages/nextclaw-ncp-react/src/hooks/use-ncp-agent-runtime.ts";
 
-function createEvent(type: NcpEventType, delta: string): NcpEndpointEvent {
-  return {
-    type,
-    payload: {
-      sessionId: "session-1",
-      messageId: "assistant-1",
-      toolCallId: "tool-1",
-      delta,
-    },
-  } as NcpEndpointEvent;
+const now = "2026-05-14T00:00:00.000Z";
+
+class DeferredSendClient implements NcpAgentClientEndpoint {
+  readonly manifest: NcpEndpointManifest = {
+    endpointKind: "agent",
+    endpointId: "deferred-send-client",
+    version: "0.1.0",
+    supportsStreaming: true,
+    supportsAbort: true,
+    supportsProactiveMessages: false,
+    supportsLiveSessionStream: true,
+    supportedPartTypes: ["text"],
+    expectedLatency: "seconds",
+  };
+
+  readonly stop = vi.fn(async () => {});
+  readonly start = vi.fn(async () => {});
+  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): 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,
+        },
+      },
+    });
+    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",
+      },
+    });
+    this.publish({
+      type: NcpEventType.MessageTextEnd,
+      payload: {
+        sessionId: "session-created",
+        messageId: "assistant-1",
+      },
+    });
+    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,
+        },
+      },
+    });
+    this.publish({
+      type: NcpEventType.RunFinished,
+      payload: {
+        sessionId: "session-created",
+        runId: "run-1",
+      },
+    });
+  });
+
+  release = (): void => {
+    this.releaseCompletion?.();
+  };
+
+  private publish = (event: NcpEndpointEvent): void => {
+    for (const listener of this.listeners) {
+      listener(event);
+    }
+  };
 }
 
 describe("useNcpAgentRuntime", () => {
   beforeEach(() => {
-    vi.useFakeTimers();
+    vi.clearAllMocks();
   });
 
-  afterEach(() => {
-    vi.useRealTimers();
-  });
-
-  it("batches streamed endpoint events before dispatching them to the manager", async () => {
-    let subscriber: ((event: NcpEndpointEvent) => void) | null = null;
-    const snapshot = {
-      messages: [],
-      streamingMessage: null,
-      error: null,
-      activeRun: null,
-    };
-    const client = {
-      subscribe: vi.fn((callback: (event: NcpEndpointEvent) => void) => {
-        subscriber = callback;
-        return () => {
-          subscriber = null;
-        };
-      }),
-      stop: vi.fn().mockResolvedValue(undefined),
-      send: vi.fn().mockResolvedValue(undefined),
-      abort: vi.fn().mockResolvedValue(undefined),
-      stream: vi.fn().mockResolvedValue(undefined),
+  it("keeps the active send stream alive when a new root chat materializes a session id", async () => {
+    const client = new DeferredSendClient();
+    const manager = new DefaultNcpAgentConversationStateManager();
+    const envelope: NcpAgentSendEnvelope = {
+      message: {
+        id: "user-1",
+        role: "user",
+        status: "final",
+        parts: [{ type: "text", text: "hello" }],
+        timestamp: now,
+      },
     };
-    const manager = {
-      getSnapshot: vi.fn(() => snapshot),
-      subscribe: vi.fn(() => () => {}),
-      dispatch: vi.fn().mockResolvedValue(undefined),
-      dispatchBatch: vi.fn().mockResolvedValue(undefined),
-    };
-
-    renderHook(() =>
-      useNcpAgentRuntime({
-        sessionId: "session-1",
-        client: client as never,
-        manager: manager as never,
-      }),
+    const { result, rerender } = renderHook(
+      ({ sessionId }: { sessionId?: string }) =>
+        useNcpAgentRuntime({ sessionId, client, manager: manager as never }),
+      { initialProps: { sessionId: undefined as string | undefined } },
     );
 
-    expect(subscriber).not.toBeNull();
-
+    let sendPromise: Promise<void>;
     act(() => {
-      subscriber?.(createEvent(NcpEventType.MessageToolCallArgsDelta, '{"path":"src/app.ts",'));
-      subscriber?.(
-        createEvent(
-          NcpEventType.MessageToolCallArgsDelta,
-          '"content":"console.log(1);"}',
-        ),
-      );
+      sendPromise = result.current.send(envelope);
+    });
+
+    await waitFor(() => {
+      expect(result.current.snapshot.activeRun?.sessionId).toBe("session-created");
     });
 
-    expect(manager.dispatchBatch).not.toHaveBeenCalled();
+    rerender({ sessionId: "session-created" });
+
+    expect(client.stop).not.toHaveBeenCalled();
 
     await act(async () => {
-      vi.advanceTimersByTime(16);
-      await Promise.resolve();
+      client.release();
+      await sendPromise;
     });
 
-    expect(manager.dispatchBatch).toHaveBeenCalledTimes(1);
-    expect(manager.dispatchBatch).toHaveBeenCalledWith([
-      createEvent(NcpEventType.MessageToolCallArgsDelta, '{"path":"src/app.ts",'),
-      createEvent(
-        NcpEventType.MessageToolCallArgsDelta,
-        '"content":"console.log(1);"}',
-      ),
+    await waitFor(() => {
+      expect(result.current.snapshot.activeRun).toBeNull();
+    });
+    expect(result.current.visibleMessages.map((message) => message.id)).toEqual([
+      "user-1",
+      "assistant-1",
     ]);
   });
+
+  it("aborts by session id even before a hydrated active run reaches local state", async () => {
+    const client = new DeferredSendClient();
+    const manager = new DefaultNcpAgentConversationStateManager();
+    const { result } = renderHook(() =>
+      useNcpAgentRuntime({ sessionId: "session-running", client, manager: manager as never }),
+    );
+
+    await act(async () => {
+      await result.current.abort();
+    });
+
+    expect(client.abort).toHaveBeenCalledWith({ sessionId: "session-running" });
+  });
 });

package/src/features/chat/hooks/use-ncp-chat-derived-state.ts

@@ -113,7 +113,7 @@ export function useNcpChatSnapshotSync(params: {
   sessionTypeUnavailableMessage: string | null;
   currentSessionTypeLabel: string;
   currentSessionTypeIcon: ChatSessionTypeOption['icon'];
-  sessionKey: string;
+  sessionKey: string | null | undefined;
   currentAgentId: string;
   currentAgent: AgentProfileView | null;
   availableAgents: AgentProfileView[];
@@ -152,7 +152,7 @@ export function useNcpChatSnapshotSync(params: {
       sessionTypeUnavailableMessage: params.sessionTypeUnavailableMessage,
       sessionTypeLabel: params.currentSessionTypeLabel,
       sessionTypeIcon: params.currentSessionTypeIcon,
-      sessionKey: params.sessionKey,
+      sessionKey: params.sessionKey ?? null,
       agentId: params.currentAgentId,
       agentDisplayName: params.currentAgent?.displayName ?? null,
       agentAvatarUrl: params.currentAgent?.avatarUrl ?? null,