@nextclaw/ui 0.15.20 → 0.15.21

package/src/app/configs/app-navigation.config.ts

@@ -5,6 +5,7 @@ import {
   AlarmClock,
   Cpu,
   Download,
+  Inbox,
   KeyRound,
   MessageCircle,
   MessageSquare,
@@ -44,6 +45,8 @@ export function isMainWorkspaceRoute(pathname: string): boolean {
   return (
     normalized === "/chat" ||
     normalized.startsWith("/chat/") ||
+    normalized === "/inbox" ||
+    normalized.startsWith("/inbox/") ||
     normalized === "/skills" ||
     normalized.startsWith("/skills/") ||
     normalized === "/cron" ||
@@ -67,6 +70,11 @@ export function getMobileBottomNavItems(
       label: translate("chat"),
       icon: MessageCircle,
     },
+    {
+      target: "/inbox",
+      label: translate("inboxTitle"),
+      icon: Inbox,
+    },
     {
       target: "/skills",
       label: translate("marketplaceFilterSkills"),
@@ -94,6 +102,11 @@ export function getMainSidebarNavItems(
       label: translate("chat"),
       icon: MessageCircle,
     },
+    {
+      target: "/inbox",
+      label: translate("inboxTitle"),
+      icon: Inbox,
+    },
     {
       target: "/chat/cron",
       label: translate("cron"),
@@ -227,6 +240,14 @@ export function resolveMobileRouteMeta(
     };
   }
 
+  if (normalized === "/inbox" || normalized.startsWith("/inbox/")) {
+    return {
+      title: translate("inboxTitle"),
+      backTarget: normalized === "/inbox" ? null : "/inbox",
+      backLabel: translate("inboxTitle"),
+    };
+  }
+
   if (normalized === "/skills" || normalized.startsWith("/skills/")) {
     return {
       title: translate("marketplaceFilterSkills"),

package/src/app/index.tsx

@@ -1,14 +1,17 @@
 import { lazy, Suspense, useEffect } from "react";
-import type { ReactElement } from "react";
+import type { CSSProperties, ReactElement } from "react";
 import { QueryClientProvider } from "@tanstack/react-query";
 import { Navigate, Route, Routes } from "react-router-dom";
 import { Toaster } from "sonner";
 import { appQueryClient } from "@/app-query-client";
 import { AppPresenterProvider } from "@/app/components/app-presenter-provider";
+import { AppNotificationRuntime } from "@/app/components/app-notification-runtime";
 import { AppLayout } from "@/app/components/layout/app-layout";
+import { SIDEBAR_RAIL_WIDTH_PX } from "@/app/components/layout/sidebar-rail.styles";
 import { SettingsEntryPage } from "@/app/components/layout/settings-entry-page";
 import { LoginPage } from "@/components/auth/login-page";
 import { AccountPanel } from "@/features/account";
+import { InboxRuntime } from "@/features/inbox";
 import { ServiceActionAuthorizationDialog } from "@/features/service-apps";
 import { runtimeUpdateManager, useSystemStatusSources } from "@/features/system-status";
 import {
@@ -21,6 +24,8 @@ import {
 } from "@/pwa/components/pwa-install-entry";
 import { startNextClawPwa } from "@/pwa/register-pwa";
 
+const NOTIFICATION_TOASTER_STYLE = { "--width": "320px" } as CSSProperties;
+
 const ModelConfigPage = lazy(async () => ({
   default: (await import("@/features/settings/pages/model-config-page"))
     .ModelConfigPage,
@@ -117,6 +122,10 @@ const protectedRouteDefinitions: ProtectedRouteDefinition[] = [
     path: "/cron",
     element: createLazyElement(<ChatPage view="cron" />),
   },
+  {
+    path: "/inbox/:deliveryId?",
+    element: createLazyElement(<ChatPage view="inbox" />),
+  },
   {
     path: "/appearance",
     element: createLazyElement(<AppearanceSettingsPage />),
@@ -219,6 +228,8 @@ function ProtectedApp() {
 
   return (
     <AppPresenterProvider>
+      <AppNotificationRuntime />
+      <InboxRuntime />
       <AppLayout>
         <ProtectedRoutes />
       </AppLayout>
@@ -257,7 +268,16 @@ export default function AppContent() {
     <QueryClientProvider client={appQueryClient}>
       <AuthGate />
       <PwaInstallBanner />
-      <Toaster position="top-right" richColors offset={window.nextclawDesktop?.platform === "win32" ? 56 : undefined} mobileOffset={window.nextclawDesktop?.platform === "win32" ? 56 : undefined} />
+      <Toaster
+        position="top-right"
+        richColors
+        offset={{
+          top: window.nextclawDesktop?.platform === "win32" ? 56 : 44,
+          right: SIDEBAR_RAIL_WIDTH_PX + 16,
+        }}
+        mobileOffset={window.nextclawDesktop?.platform === "win32" ? 56 : undefined}
+        style={NOTIFICATION_TOASTER_STYLE}
+      />
     </QueryClientProvider>
   );
 }

package/src/app/presenters/app.presenter.ts

@@ -1,10 +1,13 @@
 import { AccountManager } from '@/features/account';
 import { viewportLayoutManager } from '@/app/managers/viewport-layout.manager';
 import {
+  ChatCompletionNotificationManager,
   ChatDraftIntentManager,
   useChatThreadStore,
 } from '@/features/chat';
+import { AppNotificationManager } from '@/features/notifications';
 import { PanelAppBridgeManager } from '@/features/panel-apps';
+import { InboxManager } from '@/features/inbox';
 import { RightPanelResourceRouteResolver } from '@/features/right-panel-resources';
 import { RemoteAccessManager } from '@/features/remote';
 import { ServiceActionAuthorizationManager } from '@/features/service-apps';
@@ -19,6 +22,11 @@ function isChatWorkspacePanelOpen(snapshot: ChatThreadSnapshot): boolean {
 }
 
 export class AppPresenter {
+  notificationManager = new AppNotificationManager();
+  inboxManager = new InboxManager();
+  chatCompletionNotificationManager = new ChatCompletionNotificationManager(
+    this.notificationManager,
+  );
   accountManager = new AccountManager();
   rightPanelResourceRouteResolver = new RightPanelResourceRouteResolver();
   notifyRightPanelOpened = () => {

package/src/features/chat/components/layout/chat-page-shell.tsx

@@ -6,7 +6,8 @@ import { CronConfig } from "@/features/cron";
 import { MarketplacePage } from "@/features/marketplace";
 import { useViewportLayout } from "@/app/hooks/use-viewport-layout";
 import { ChatMobileShell } from "@/platforms/mobile";
-export type MainPanelView = "chat" | "cron" | "skills" | "agents";
+import { InboxPage } from "@/features/inbox";
+export type MainPanelView = "chat" | "cron" | "skills" | "agents" | "inbox";
 export type ChatPageProps = {
   view: MainPanelView;
 };
@@ -51,7 +52,11 @@ export function ChatPageLayout({ view, confirmDialog }: ChatPageLayoutProps) {
         isMobile ? <ChatMobileShell /> : <ChatConversationPanel />
       ) : (
         <section className="flex-1 min-h-0 overflow-hidden bg-background">
-          {view === "cron" ? (
+          {view === "inbox" ? (
+            <div className="mx-auto flex h-full min-h-0 w-full max-w-[min(1180px,100%)] flex-col py-4 sm:px-6 sm:py-5">
+              <InboxPage />
+            </div>
+          ) : view === "cron" ? (
             <div className="h-full overflow-auto custom-scrollbar">
               <div className="mx-auto w-full max-w-[min(1120px,100%)] px-4 py-4 sm:px-6 sm:py-5">
                 <CronConfig />

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

@@ -16,10 +16,12 @@ import {
   AlarmClock,
   Bot,
   BrainCircuit,
+  Inbox,
   PanelLeftClose,
   PanelLeftOpen,
   Plus,
 } from "lucide-react";
+import { useInboxUnreadCount } from "@/features/inbox";
 import { ChatSidebarSessionList } from "@/features/chat/features/session/components/chat-sidebar-session-list";
 import { ChatSidebarUtilityMenu } from "@/features/chat/components/layout/chat-sidebar-utility-menu";
 import { isWindowsDesktopHost } from "@/platforms/desktop";
@@ -34,6 +36,11 @@ import {
 } from "@/app/components/layout/sidebar-rail.styles";
 
 const navItems = [
+  {
+    target: "/inbox",
+    label: () => t("inboxTitle"),
+    icon: Inbox,
+  },
   {
     target: "/cron",
     label: () => t("chatSidebarScheduledTasks"),
@@ -99,6 +106,7 @@ export function ChatSidebarDesktopNav({
 }: {
   isCollapsed: boolean;
 }) {
+  const unreadCount = useInboxUnreadCount();
   return (
     <>
       <div className={cn("pb-2", isCollapsed ? "px-0" : "px-3")}>
@@ -114,6 +122,10 @@ export function ChatSidebarDesktopNav({
                 icon={item.icon}
                 density="compact"
                 collapsed={isCollapsed}
+                indicator={item.target === "/inbox" && unreadCount > 0}
+                trailing={item.target === "/inbox" && unreadCount > 0
+                  ? unreadCount > 99 ? "99+" : unreadCount
+                  : undefined}
               />
             </li>
           ))}

package/src/features/chat/index.ts

@@ -4,6 +4,7 @@ export { ChatPresenterProvider } from "./components/providers/chat-presenter.pro
 export { usePresenter } from "./components/providers/chat-presenter.provider";
 export { ChatPresenter } from "./presenters/chat.presenter";
 export { ChatDraftIntentManager } from "./managers/chat-draft-intent.manager";
+export { ChatCompletionNotificationManager } from "./managers/chat-completion-notification.manager";
 export { useChatSessionListStore } from "./stores/chat-session-list.store";
 export { useChatThreadStore } from "./stores/chat-thread.store";
 export { useChatMessageLayoutStore } from "./stores/chat-message-layout.store";

package/src/features/chat/managers/__tests__/chat-completion-notification.manager.test.ts

@@ -0,0 +1,177 @@
+import {
+  NCP_INTERNAL_VISIBILITY_METADATA_KEY,
+  NcpEventType,
+  type NcpEndpointEvent,
+  type NcpMessage,
+} from "@nextclaw/ncp";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { ChatCompletionNotificationManager } from "@/features/chat/managers/chat-completion-notification.manager";
+import { buildSessionPath } from "@/features/chat/features/session/utils/chat-session-route.utils";
+import { useChatQueryStore } from "@/features/chat/stores/ncp-chat-query.store";
+
+const mocks = vi.hoisted(() => ({
+  eventHandler: null as ((event: NcpEndpointEvent) => void) | null,
+  on: vi.fn(),
+  unsubscribe: vi.fn(),
+}));
+
+vi.mock("@/shared/lib/api", () => ({
+  nextclawClient: {
+    eventBus: {
+      on: mocks.on,
+    },
+  },
+}));
+
+function createMessage(overrides: Partial<NcpMessage> = {}): NcpMessage {
+  return {
+    id: "assistant-message-1",
+    sessionId: "session-background",
+    role: "assistant",
+    status: "final",
+    timestamp: "2026-08-05T10:00:00.000Z",
+    parts: [{ type: "text", text: "  The requested research is complete.  " }],
+    ...overrides,
+  };
+}
+
+function createCompletedEvent(message = createMessage()): NcpEndpointEvent {
+  return {
+    type: NcpEventType.MessageCompleted,
+    payload: {
+      sessionId: message.sessionId,
+      message,
+    },
+  };
+}
+
+function emit(event: NcpEndpointEvent): void {
+  if (!mocks.eventHandler) {
+    throw new Error("Notification manager has not subscribed");
+  }
+  mocks.eventHandler(event);
+}
+
+describe("ChatCompletionNotificationManager", () => {
+  const show = vi.fn();
+  let manager: ChatCompletionNotificationManager;
+
+  beforeEach(() => {
+    mocks.eventHandler = null;
+    mocks.on.mockReset();
+    mocks.unsubscribe.mockReset();
+    mocks.on.mockImplementation((_key, handler: (event: NcpEndpointEvent) => void) => {
+      mocks.eventHandler = handler;
+      return mocks.unsubscribe;
+    });
+    show.mockReset();
+    useChatQueryStore.setState({ snapshot: {} });
+    manager = new ChatCompletionNotificationManager({ show });
+  });
+
+  afterEach(() => {
+    manager.stop();
+  });
+
+  it("maps a background assistant final reply to a navigable global notification", () => {
+    useChatQueryStore.setState({
+      snapshot: {
+        sessionsQuery: {
+          data: {
+            sessions: [{
+              sessionId: "session-background",
+              messageCount: 2,
+              updatedAt: "2026-08-05T10:00:00.000Z",
+              metadata: { label: "Quarterly research" },
+            }],
+            total: 1,
+          },
+        } as never,
+      },
+    });
+    manager.start();
+    emit(createCompletedEvent());
+
+    expect(show).toHaveBeenCalledWith({
+      id: "chat-reply:assistant-message-1",
+      title: "Quarterly research",
+      description: "The requested research is complete.",
+      href: buildSessionPath("session-background"),
+      ariaLabel: "Open the new reply in Quarterly research",
+    });
+  });
+
+  it("suppresses messages completed in the active session, including later replays", () => {
+    manager.start();
+    manager.syncActiveSession("session-background");
+    emit(createCompletedEvent());
+    expect(show).not.toHaveBeenCalled();
+
+    manager.syncActiveSession(null);
+    emit(createCompletedEvent());
+    expect(show).not.toHaveBeenCalled();
+
+    const nextMessage = createMessage({ id: "assistant-message-2" });
+    emit(createCompletedEvent(nextMessage));
+    emit(createCompletedEvent(nextMessage));
+    expect(show).toHaveBeenCalledOnce();
+  });
+
+  it("ignores non-final, non-assistant, hidden, and unrelated events", () => {
+    manager.start();
+    emit(createCompletedEvent(createMessage({ status: "streaming" })));
+    emit(createCompletedEvent(createMessage({ role: "service" })));
+    emit(createCompletedEvent(createMessage({
+      metadata: { [NCP_INTERNAL_VISIBILITY_METADATA_KEY]: "hidden" },
+    })));
+    emit({
+      type: NcpEventType.RunFinished,
+      payload: { sessionId: "session-background" },
+    });
+
+    expect(show).not.toHaveBeenCalled();
+  });
+
+  it("uses localized fallbacks when the session and reply have no display text", () => {
+    manager.start();
+    emit(createCompletedEvent(createMessage({ parts: [] })));
+
+    expect(show).toHaveBeenCalledWith(expect.objectContaining({
+      title: "New reply",
+      description: "A reply is ready. Open the session to view it.",
+    }));
+  });
+
+  it("projects markdown replies into a readable plain-text preview", () => {
+    manager.start();
+    emit(createCompletedEvent(createMessage({
+      parts: [{
+        type: "text",
+        text: [
+          "# Release **complete**",
+          "",
+          "- [x] Open the [report](https://example.com/report)",
+          "> Review `details` and ~~obsolete notes~~",
+          "",
+          "```sh",
+          "pnpm test",
+          "```",
+        ].join("\n"),
+      }],
+    })));
+
+    expect(show).toHaveBeenCalledWith(expect.objectContaining({
+      description: "Release complete Open the report Review details and obsolete notes pnpm test",
+    }));
+  });
+
+  it("owns an idempotent realtime subscription lifecycle", () => {
+    manager.start();
+    manager.start();
+    expect(mocks.on).toHaveBeenCalledOnce();
+
+    manager.stop();
+    manager.stop();
+    expect(mocks.unsubscribe).toHaveBeenCalledOnce();
+  });
+});

package/src/features/chat/managers/chat-completion-notification.manager.ts

@@ -0,0 +1,146 @@
+import {
+  isHiddenNcpMessage,
+  NcpEventType,
+  type NcpEndpointEvent,
+  type NcpMessage,
+} from "@nextclaw/ncp";
+import { eventKeys } from "@nextclaw/shared";
+import type { AppNotificationManager } from "@/features/notifications";
+import { buildSessionPath } from "@/features/chat/features/session/utils/chat-session-route.utils";
+import { sessionDisplayName } from "@/features/chat/features/session/utils/chat-session-display.utils";
+import { adaptNcpSessionSummary } from "@/features/chat/features/session/utils/ncp-session-adapter.utils";
+import { useChatQueryStore } from "@/features/chat/stores/ncp-chat-query.store";
+import { nextclawClient } from "@/shared/lib/api";
+import { t } from "@/shared/lib/i18n";
+
+const NOTIFICATION_PREVIEW_MAX_CHARACTERS = 120;
+const NOTIFIED_MESSAGE_HISTORY_LIMIT = 200;
+
+function buildNotificationPreview(value: string): string {
+  const normalized = value
+    .replace(/\r\n?/gu, "\n")
+    .replace(/^[ \t]*\[[^\]]+\]:\s+\S+.*$/gmu, " ")
+    .replace(/^[ \t]*(?:`{3,}|~{3,})[^\n]*$/gmu, " ")
+    .replace(/^[ \t]*\|?[ \t]*:?-{3,}:?[ \t]*(?:\|[ \t]*:?-{3,}:?[ \t]*)+\|?[ \t]*$/gmu, " ")
+    .replace(/^[ \t]*(?:[-*_][ \t]*){3,}$/gmu, " ")
+    .replace(/!\[([^\]]*)\]\([^\n)]+\)/gu, "$1")
+    .replace(/\[([^\]]+)\]\([^\n)]+\)/gu, "$1")
+    .replace(/\[([^\]]+)\]\[[^\]]*\]/gu, "$1")
+    .replace(/<(https?:\/\/[^>\s]+)>/gu, "$1")
+    .replace(/<[^>]+>/gu, " ")
+    .replace(/^[ \t]{0,3}#{1,6}[ \t]+/gmu, "")
+    .replace(/^[ \t]*>+[ \t]?/gmu, "")
+    .replace(/^[ \t]*(?:[-+*]|\d+[.)])[ \t]+/gmu, "")
+    .replace(/^[ \t]*\[(?: |x|X)\][ \t]*/gmu, "")
+    .replace(/(`+)([^`]*?)\1/gu, "$2")
+    .replace(/(\*\*|__)(?=\S)([\s\S]*?\S)\1/gu, "$2")
+    .replace(/~~(?=\S)([\s\S]*?\S)~~/gu, "$1")
+    .replace(/\*(?=\S)([^*\n]*?\S)\*/gu, "$1")
+    .replace(/\\([\\`*{}[\]()#+.!_>-])/gu, "$1")
+    .replace(/^[ \t]*\|(.+)\|[ \t]*$/gmu, (_match, row: string) =>
+      row.split("|").map((cell) => cell.trim()).filter(Boolean).join(" "),
+    )
+    .replace(/\s+/gu, " ")
+    .trim();
+  const characters = Array.from(normalized);
+  if (characters.length <= NOTIFICATION_PREVIEW_MAX_CHARACTERS) {
+    return normalized;
+  }
+  return `${characters.slice(0, NOTIFICATION_PREVIEW_MAX_CHARACTERS - 1).join("")}…`;
+}
+
+function readAssistantReplyPreview(message: NcpMessage): string {
+  return buildNotificationPreview(
+    message.parts
+      .filter((part) => part.type === "text" || part.type === "rich-text")
+      .map((part) => part.text)
+      .join(" "),
+  );
+}
+
+export class ChatCompletionNotificationManager {
+  private readonly cleanups: Array<() => void> = [];
+  private readonly handledMessageIds = new Set<string>();
+  private activeSessionId: string | null = null;
+  private started = false;
+
+  constructor(
+    private readonly notificationManager: Pick<AppNotificationManager, "show">,
+  ) {}
+
+  start = (): void => {
+    if (this.started) {
+      return;
+    }
+    this.started = true;
+    this.cleanups.push(
+      nextclawClient.eventBus.on(eventKeys.ncpEvent, this.handleNcpEvent),
+    );
+  };
+
+  stop = (): void => {
+    if (!this.started) {
+      return;
+    }
+    this.started = false;
+    while (this.cleanups.length > 0) {
+      this.cleanups.pop()?.();
+    }
+  };
+
+  syncActiveSession = (sessionId: string | null): void => {
+    this.activeSessionId = sessionId?.trim() || null;
+  };
+
+  private readonly handleNcpEvent = (event: NcpEndpointEvent): void => {
+    if (event.type !== NcpEventType.MessageCompleted) {
+      return;
+    }
+
+    const { message } = event.payload;
+    const sessionId = event.payload.sessionId.trim();
+    if (
+      !sessionId ||
+      this.handledMessageIds.has(message.id) ||
+      message.role !== "assistant" ||
+      message.status !== "final" ||
+      isHiddenNcpMessage(message)
+    ) {
+      return;
+    }
+    this.rememberHandledMessage(message.id);
+    if (sessionId === this.activeSessionId) {
+      return;
+    }
+
+    const title = this.resolveSessionTitle(sessionId);
+    const preview = readAssistantReplyPreview(message);
+    this.notificationManager.show({
+      id: `chat-reply:${message.id}`,
+      title,
+      description: preview || t("chatBackgroundReplyFallbackPreview"),
+      href: buildSessionPath(sessionId),
+      ariaLabel: t("chatBackgroundReplyOpenAriaLabel").replace("{title}", title),
+    });
+  };
+
+  private readonly resolveSessionTitle = (sessionId: string): string => {
+    const summaries =
+      useChatQueryStore.getState().snapshot.sessionsQuery?.data?.sessions ?? [];
+    const summary = summaries.find((item) => item.sessionId === sessionId);
+    return summary
+      ? sessionDisplayName(adaptNcpSessionSummary(summary))
+      : t("chatBackgroundReplyFallbackTitle");
+  };
+
+  private readonly rememberHandledMessage = (messageId: string): void => {
+    this.handledMessageIds.add(messageId);
+    if (this.handledMessageIds.size <= NOTIFIED_MESSAGE_HISTORY_LIMIT) {
+      return;
+    }
+    const oldestMessageId = this.handledMessageIds.values().next().value;
+    if (oldestMessageId) {
+      this.handledMessageIds.delete(oldestMessageId);
+    }
+  };
+}

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

@@ -1,15 +1,17 @@
 import { render, screen } from '@testing-library/react';
-import { MemoryRouter } from 'react-router-dom';
-import { describe, expect, it, vi } from 'vitest';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { AppPresenterProvider } from '@/app/components/app-presenter-provider';
 import { NcpChatPage } from '@/features/chat/pages/ncp-chat-page';
+import { buildSessionPath } from '@/features/chat/features/session/utils/chat-session-route.utils';
 
 const mocks = vi.hoisted(() => ({
   confirm: vi.fn(),
   consumePending: vi.fn(() => null),
   markConsumed: vi.fn(),
   subscribe: vi.fn(() => vi.fn()),
+  syncActiveSession: vi.fn(),
   useChatSessionSync: vi.fn(),
 }));
 
@@ -21,6 +23,9 @@ vi.mock('@/app/presenters/app.presenter', () => ({
       markConsumed: mocks.markConsumed,
       subscribe: mocks.subscribe,
     },
+    chatCompletionNotificationManager: {
+      syncActiveSession: mocks.syncActiveSession,
+    },
   }),
 }));
 
@@ -57,6 +62,11 @@ vi.mock('@/features/chat/features/ncp/hooks/use-ui-show-content-event', () => ({
 }));
 
 describe('NcpChatPage render boundary', () => {
+  beforeEach(() => {
+    mocks.syncActiveSession.mockReset();
+    mocks.useChatSessionSync.mockReset();
+  });
+
   it('creates its chat presenter from the global app presenter provider', () => {
     render(
       <MemoryRouter initialEntries={['/chat']}>
@@ -69,4 +79,21 @@ describe('NcpChatPage render boundary', () => {
     expect(screen.getByTestId('chat-page-layout')).toBeTruthy();
     expect(mocks.useChatSessionSync).toHaveBeenCalledOnce();
   });
+
+  it('syncs the active route session and clears it when chat unmounts', () => {
+    const sessionPath = buildSessionPath('session-background');
+    const view = render(
+      <MemoryRouter initialEntries={[sessionPath]}>
+        <AppPresenterProvider>
+          <Routes>
+            <Route path="/chat/:sessionId?" element={<NcpChatPage view="chat" />} />
+          </Routes>
+        </AppPresenterProvider>
+      </MemoryRouter>,
+    );
+
+    expect(mocks.syncActiveSession).toHaveBeenCalledWith('session-background');
+    view.unmount();
+    expect(mocks.syncActiveSession).toHaveBeenLastCalledWith(null);
+  });
 });

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

@@ -59,10 +59,19 @@ export function NcpChatPage({ view }: ChatPageProps) {
 }
 
 function NcpChatPageContent({ view }: ChatPageProps) {
+  const appPresenter = useAppPresenter();
   const presenter = usePresenter();
   const confirmDialog = useNcpChatUiBindings();
   const routeSelection = useNcpChatRouteSelection();
   const { routeSessionKey, sessionKey } = routeSelection;
+  useEffect(() => {
+    appPresenter.chatCompletionNotificationManager.syncActiveSession(
+      sessionKey ?? null,
+    );
+    return () => {
+      appPresenter.chatCompletionNotificationManager.syncActiveSession(null);
+    };
+  }, [appPresenter.chatCompletionNotificationManager, sessionKey]);
   useChatQueryStoreSync({
     sessionKey: sessionKey ?? null,
   });