@nextclaw/ui 0.14.2 → 0.14.3

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

@@ -366,9 +366,9 @@ describe("ChatSidebar create and list basics", () => {
 
     fireEvent.click(screen.getByRole("button", { name: "Settings menu" }));
     fireEvent.click(screen.getByRole("combobox", { name: "Theme" }));
-    fireEvent.click(screen.getByRole("option", { name: "Cool" }));
+    fireEvent.click(screen.getByRole("option", { name: "Probe" }));
 
-    expect(mocks.setTheme).toHaveBeenCalledWith("cool");
+    expect(mocks.setTheme).toHaveBeenCalledWith("probe");
   });
 
   it("creates the default session directly from the compact mobile add button when no menu is needed", () => {

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

@@ -50,7 +50,7 @@ export function ChatPageLayout({ view, confirmDialog }: ChatPageLayoutProps) {
       {view === "chat" ? (
         isMobile ? <ChatMobileShell /> : <ChatConversationPanel />
       ) : (
-        <section className="flex-1 min-h-0 overflow-hidden bg-gradient-to-b from-gray-50/60 to-white">
+        <section className="flex-1 min-h-0 overflow-hidden bg-background">
           {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">

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

@@ -121,7 +121,7 @@ export function ChatSidebarDesktopNav({
       </div>
       <div
         className={cn(
-          "border-t border-gray-200/60",
+          "border-t border-border/70",
           isCollapsed ? "mx-2 my-1.5" : "mx-4",
         )}
       />
@@ -161,7 +161,7 @@ export function ChatSidebarSessionArea({
   return (
     <>
       <div className="flex items-center justify-between px-5 pb-2 pt-3">
-        <div className="text-[11px] font-medium uppercase tracking-wider text-gray-400">
+        <div className="text-[11px] font-medium uppercase tracking-wider text-muted-foreground/75">
           {t("chatSidebarTaskRecords")}
         </div>
         <ChatSidebarListModeSwitch
@@ -221,7 +221,7 @@ export function ChatSidebarDesktopFooter({
   return (
     <div
       className={cn(
-        "border-t border-gray-200/60 py-3",
+        "border-t border-border/70 py-3",
         isCollapsed
           ? cn("flex justify-center", SIDEBAR_RAIL_PADDING_X_CLASS)
           : "px-3",

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

@@ -41,23 +41,23 @@ const NEW_SESSION_ACTION_STYLE_CLASSES: Record<
   neutralSurface: {
     leftVariant: "ghost",
     leftClassName:
-      "bg-white/90 text-gray-700 shadow-none transition-[background-color,color,box-shadow] hover:bg-white hover:text-gray-950 hover:shadow-sm active:bg-white/95",
+      "bg-card text-foreground shadow-none transition-[background-color,color,box-shadow] hover:bg-accent hover:text-accent-foreground hover:shadow-sm active:bg-accent",
     rightClassName:
-      "bg-white/90 text-gray-600 shadow-none transition-[background-color,color,box-shadow] hover:bg-white hover:text-gray-900 hover:shadow-sm active:bg-white/95",
+      "bg-card text-muted-foreground shadow-none transition-[background-color,color,box-shadow] hover:bg-accent hover:text-accent-foreground hover:shadow-sm active:bg-accent",
   },
   brandSoft: {
     leftVariant: "ghost",
     leftClassName:
-      "bg-primary/10 text-primary shadow-none transition-[background-color,color,box-shadow] hover:bg-primary/15 hover:text-primary-700 hover:shadow-sm active:bg-primary/20",
+      "bg-primary/10 text-primary shadow-none ring-1 ring-primary/10 transition-[background-color,color,box-shadow] hover:bg-primary/15 hover:text-primary-700 hover:shadow-sm active:bg-primary/20",
     rightClassName:
-      "bg-primary/10 text-primary shadow-none transition-[background-color,color,box-shadow] hover:bg-primary/15 hover:text-primary-700 hover:shadow-sm active:bg-primary/20",
+      "bg-primary/10 text-primary shadow-none ring-1 ring-primary/10 transition-[background-color,color,box-shadow] hover:bg-primary/15 hover:text-primary-700 hover:shadow-sm active:bg-primary/20",
   },
   brandTextSurface: {
     leftVariant: "ghost",
     leftClassName:
-      "bg-white/90 text-primary shadow-none transition-[background-color,color,box-shadow] hover:bg-primary/10 hover:text-primary-700 hover:shadow-sm active:bg-primary/15",
+      "bg-card text-primary shadow-none transition-[background-color,color,box-shadow] hover:bg-accent hover:text-primary-700 hover:shadow-sm active:bg-primary/15",
     rightClassName:
-      "bg-white/90 text-primary shadow-none transition-[background-color,color,box-shadow] hover:bg-primary/10 hover:text-primary-700 hover:shadow-sm active:bg-primary/15",
+      "bg-card text-primary shadow-none transition-[background-color,color,box-shadow] hover:bg-accent hover:text-primary-700 hover:shadow-sm active:bg-primary/15",
   },
   brandSolid: {
     leftVariant: "primary",
@@ -179,7 +179,7 @@ export function ChatSidebarDesktopToolbar(props: ChatSidebarToolbarProps) {
               <PopoverContent
                 align="start"
                 side="right"
-                className="w-56 rounded-2xl border border-gray-200/80 bg-white p-1.5 shadow-[0_24px_60px_-28px_rgba(15,23,42,0.38)]"
+                className="w-56 rounded-2xl border border-border bg-popover p-1.5 text-popover-foreground shadow-[0_24px_60px_-28px_rgba(15,23,42,0.38)]"
               >
                 <ChatSessionTypeMenu
                   options={sessionTypeOptions}
@@ -241,7 +241,7 @@ export function ChatSidebarDesktopToolbar(props: ChatSidebarToolbarProps) {
               </PopoverTrigger>
               <PopoverContent
                 align="end"
-                className="w-56 rounded-2xl border border-gray-200/80 bg-white p-1.5 shadow-[0_24px_60px_-28px_rgba(15,23,42,0.38)]"
+                className="w-56 rounded-2xl border border-border bg-popover p-1.5 text-popover-foreground shadow-[0_24px_60px_-28px_rgba(15,23,42,0.38)]"
               >
                 <ChatSessionTypeMenu
                   options={sessionTypeOptions}
@@ -259,7 +259,7 @@ export function ChatSidebarDesktopToolbar(props: ChatSidebarToolbarProps) {
 
       <div className="px-4 pb-3">
         <div className="relative">
-          <Search className="absolute left-3 top-2.5 h-3.5 w-3.5 text-gray-400" />
+          <Search className="absolute left-3 top-2.5 h-3.5 w-3.5 text-muted-foreground/70" />
           <Input
             value={query}
             onChange={(event) => onQueryChange(event.target.value)}
@@ -294,12 +294,12 @@ export function ChatSidebarMobileToolbar(props: ChatSidebarToolbarProps) {
     <div className="px-4 pb-2 pt-1">
       <div className="flex items-center gap-2">
         <div className="relative min-w-0 flex-1">
-          <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400" />
+          <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground/70" />
           <Input
             value={query}
             onChange={(event) => onQueryChange(event.target.value)}
             placeholder={t("chatSidebarSearchPlaceholder")}
-            className="h-9 rounded-full border-transparent bg-gray-100/80 pl-9 pr-3 text-[13px] shadow-none focus:border-gray-200/80 focus:bg-white"
+            className="h-9 rounded-full border-transparent bg-muted pl-9 pr-3 text-[13px] shadow-none focus:border-border focus:bg-card"
           />
         </div>
 
@@ -313,12 +313,12 @@ export function ChatSidebarMobileToolbar(props: ChatSidebarToolbarProps) {
                 icon={<Plus className="h-4 w-4" />}
                 label={t("chatSidebarNewTask")}
                 tooltip={false}
-                className="h-9 w-9 shrink-0 rounded-full bg-gray-100/80 text-gray-700 shadow-none hover:bg-gray-200/80 hover:text-gray-900"
+                className="h-9 w-9 shrink-0 rounded-full bg-muted text-foreground shadow-none hover:bg-accent hover:text-accent-foreground"
               />
             </PopoverTrigger>
             <PopoverContent
               align="end"
-              className="w-60 rounded-3xl border border-gray-200/80 bg-white p-2 shadow-[0_24px_70px_-30px_rgba(15,23,42,0.45)]"
+              className="w-60 rounded-3xl border border-border bg-popover p-2 text-popover-foreground shadow-[0_24px_70px_-30px_rgba(15,23,42,0.45)]"
             >
               <ChatSessionTypeMenu
                 options={createOptions}
@@ -336,7 +336,7 @@ export function ChatSidebarMobileToolbar(props: ChatSidebarToolbarProps) {
           <IconActionButton
             icon={<Plus className="h-4 w-4" />}
             label={t("chatSidebarNewTask")}
-            className="h-9 w-9 shrink-0 rounded-full bg-gray-100/80 text-gray-700 shadow-none hover:bg-gray-200/80 hover:text-gray-900"
+            className="h-9 w-9 shrink-0 rounded-full bg-muted text-foreground shadow-none hover:bg-accent hover:text-accent-foreground"
             onClick={() => onCreateSession(defaultSessionType)}
           />
         )}

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

@@ -99,7 +99,7 @@ export function ChatSidebarUtilityMenu({
                   <Settings
                     className={cn(
                       SIDEBAR_RAIL_ICON_CLASS,
-                      "shrink-0 text-gray-500",
+                      "shrink-0 text-muted-foreground",
                     )}
                   />
                 </button>
@@ -115,11 +115,11 @@ export function ChatSidebarUtilityMenu({
           <button
             type="button"
             aria-label={t("settingsMenu")}
-            className="flex w-full items-center gap-2.5 rounded-xl px-3 py-2 text-[13px] font-medium text-gray-600 transition-all duration-base hover:bg-gray-200/60 hover:text-gray-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/35"
+            className="flex w-full items-center gap-2.5 rounded-xl px-3 py-2 text-[13px] font-medium text-muted-foreground transition-all duration-base hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/35"
           >
-            <Settings className="h-4 w-4 shrink-0 text-gray-400" />
+            <Settings className="h-4 w-4 shrink-0 text-muted-foreground/70" />
             <span className="min-w-0 flex-1 text-left">{t("settings")}</span>
-            <span className="max-w-[112px] truncate text-[13px] text-gray-500">
+            <span className="max-w-[112px] truncate text-[13px] text-muted-foreground">
               {currentThemeLabel} / {currentLanguageLabel}
             </span>
           </button>
@@ -134,30 +134,30 @@ export function ChatSidebarUtilityMenu({
           <NavLink
             to="/settings"
             onClick={() => onOpenChange(false)}
-            className="flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-[13px] font-medium text-gray-700 transition-colors hover:bg-gray-100"
+            className="flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-[13px] font-medium text-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
           >
-            <Settings className="h-4 w-4 text-gray-400" />
+            <Settings className="h-4 w-4 text-muted-foreground/70" />
             <span className="flex-1 text-left">{t("settings")}</span>
           </NavLink>
           <button
             type="button"
             onClick={handleOpenDocs}
-            className="flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-[13px] font-medium text-gray-700 transition-colors hover:bg-gray-100"
+            className="flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-[13px] font-medium text-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
           >
-            <BookOpen className="h-4 w-4 text-gray-400" />
+            <BookOpen className="h-4 w-4 text-muted-foreground/70" />
             <span className="flex-1 text-left">{t("docBrowserHelp")}</span>
           </button>
           <button
             type="button"
             onClick={handleOpenApps}
-            className="flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-[13px] font-medium text-gray-700 transition-colors hover:bg-gray-100"
+            className="flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-[13px] font-medium text-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
           >
-            <Boxes className="h-4 w-4 text-gray-400" />
+            <Boxes className="h-4 w-4 text-muted-foreground/70" />
             <span className="flex-1 text-left">{t("appsTitle")}</span>
           </button>
         </div>
 
-        <div className="my-2 h-px bg-gray-200/70" />
+        <div className="my-2 h-px bg-border" />
 
         <ChatSidebarUtilitySelect
           icon={Palette}
@@ -212,14 +212,14 @@ function ChatSidebarUtilitySelect<Value extends string>({
     >
       <SelectTrigger
         aria-label={label}
-        className="h-auto w-full rounded-lg border-0 bg-transparent px-3 py-2 text-[13px] font-medium text-gray-700 shadow-none hover:bg-gray-100 focus:ring-0"
-        indicator={<ChevronRight className="h-4 w-4 text-gray-400" />}
+        className="h-auto w-full rounded-lg border-0 bg-transparent px-3 py-2 text-[13px] font-medium text-foreground shadow-none hover:bg-accent hover:text-accent-foreground focus:ring-0"
+        indicator={<ChevronRight className="h-4 w-4 text-muted-foreground/70" />}
       >
         <div className="flex min-w-0 items-center gap-2.5">
-          <Icon className="h-4 w-4 shrink-0 text-gray-400" />
+          <Icon className="h-4 w-4 shrink-0 text-muted-foreground/70" />
           <span className="text-left">{label}</span>
         </div>
-        <span className="ml-auto max-w-[96px] truncate text-[13px] text-gray-500">
+        <span className="ml-auto max-w-[96px] truncate text-[13px] text-muted-foreground">
           {valueLabel}
         </span>
       </SelectTrigger>

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

@@ -105,7 +105,7 @@ export function ChatSidebar({
   const { language, setLanguage } = useI18n();
   const { theme, setTheme } = useTheme();
   const currentThemeLabel = t(
-    THEME_OPTIONS.find((o) => o.value === theme)?.labelKey ?? "themeWarm",
+    THEME_OPTIONS.find((o) => o.value === theme)?.labelKey ?? "themeNatural",
   );
   const currentLanguageLabel =
     LANGUAGE_OPTIONS.find((o) => o.value === language)?.label ?? language;
@@ -233,9 +233,9 @@ export function ChatSidebar({
           : shouldCollapse
             ? cn(
                 SIDEBAR_RAIL_WIDTH_CLASS,
-                "shrink-0 border-r border-gray-200/60",
+                "shrink-0 border-r border-border/70",
               )
-            : "w-[280px] shrink-0 border-r border-gray-200/60",
+            : "w-[280px] shrink-0 border-r border-border/70",
       )}
       data-sidebar-collapsed={shouldCollapse ? "true" : "false"}
     >

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

@@ -0,0 +1,225 @@
+import { memo, type ReactNode } from 'react';
+import { render, screen } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { describe, expect, it, vi, beforeEach } from 'vitest';
+
+import { SessionConversationArea } from '@/features/chat/features/conversation/components/session-conversation-area';
+
+const mocks = vi.hoisted(() => {
+  const inputRenderSpy = vi.fn();
+  const inputActions = {
+    update: vi.fn(),
+    syncComposer: vi.fn(),
+    resetComposer: vi.fn(),
+    restoreComposer: vi.fn(),
+    applyPromptSuggestion: vi.fn(),
+    requestComposerFocusAtEnd: vi.fn(),
+    consumeComposerFocusRequest: vi.fn(),
+    setAttachments: vi.fn(),
+    addAttachments: vi.fn(() => []),
+    removeAttachment: vi.fn(),
+    setSelectedModel: vi.fn(),
+    setSelectedThinkingLevel: vi.fn(),
+    setPendingSessionType: vi.fn(),
+    setPendingProjectRoot: vi.fn(),
+    setSelectedSkills: vi.fn(),
+    setSendError: vi.fn(),
+  };
+  const inputSnapshot = {
+    text: '',
+    nodes: [],
+    selectedSkills: [],
+    skillRecords: [],
+    attachments: [],
+    selectedModel: undefined,
+    selectedThinkingLevel: null,
+    pendingSessionType: 'default',
+    selectedSessionType: 'default',
+    pendingProjectRoot: null,
+    composerFocusRequestId: 0,
+    sendError: null,
+  };
+  const inputQuery = {
+    defaultModel: undefined,
+    defaultProjectRoot: null,
+    fallbackPreferredModel: undefined,
+    fallbackPreferredThinking: null,
+    isProviderStateResolved: true,
+    isSkillsLoading: false,
+    modelOptions: [],
+    selectedSession: null,
+    selectedSessionKey: null,
+    sessionTypeState: {
+      sessionTypeOptions: [],
+      selectedSessionTypeOption: null,
+      defaultSessionType: 'default',
+      selectedSessionType: 'default',
+      canEditSessionType: true,
+      sessionTypeUnavailable: false,
+      sessionTypeUnavailableMessage: null,
+    },
+    skillRecords: [],
+  };
+  const controller = {
+    canStopGeneration: true,
+    hasSendableDraft: true,
+    isSending: true,
+    send: vi.fn(),
+    sendDisabled: true,
+    stop: vi.fn(),
+    stopDisabled: false,
+  };
+  const agent = {
+    visibleMessages: [] as unknown[],
+    isHydrating: false,
+    isRunning: true,
+    isSending: true,
+    hydrateError: null,
+    snapshot: {
+      activeRun: null,
+      contextWindow: null,
+      error: null,
+    },
+    send: vi.fn(),
+    abort: vi.fn(),
+  };
+
+  return {
+    agent,
+    controller,
+    inputActions,
+    inputQuery,
+    inputRenderSpy,
+    inputSnapshot,
+    presenter: {
+      chatUiManager: {
+        goToProviders: vi.fn(),
+      },
+      chatSessionListManager: {
+        createSession: vi.fn(),
+        setSelectedAgentId: vi.fn(),
+      },
+    },
+    appPresenter: {
+      chatDraftIntentManager: {
+        consumePending: vi.fn(() => null),
+        markConsumed: vi.fn(),
+        subscribe: vi.fn(() => vi.fn()),
+      },
+    },
+  };
+});
+
+vi.mock('@/app/components/app-presenter-provider', () => ({
+  useAppPresenter: () => mocks.appPresenter,
+}));
+
+vi.mock('@/features/chat/components/providers/chat-presenter.provider', () => ({
+  usePresenter: () => mocks.presenter,
+}));
+
+vi.mock('@/features/chat/components/conversation/chat-conversation-content', () => ({
+  ChatConversationContent: ({
+    messages,
+    showWelcome,
+    welcomeSlot,
+  }: {
+    messages: readonly unknown[];
+    showWelcome: boolean;
+    welcomeSlot?: ReactNode;
+  }) => (
+    <div data-testid="conversation-content" data-show-welcome={String(showWelcome)}>
+      {showWelcome ? welcomeSlot : <div data-testid="message-count">{messages.length}</div>}
+    </div>
+  ),
+}));
+
+vi.mock('@/features/chat/features/welcome/components/chat-conversation-welcome', () => ({
+  ChatConversationWelcome: ({ inputSlot }: { inputSlot: ReactNode }) => (
+    <div data-testid="welcome">{inputSlot}</div>
+  ),
+}));
+
+vi.mock('@/features/chat/features/ncp/hooks/use-ncp-session-conversation', () => ({
+  isNcpAgentStartupUnavailableErrorMessage: () => false,
+  useNcpSessionConversation: () => mocks.agent,
+}));
+
+vi.mock('@/features/chat/features/runtime/utils/ncp-chat-runtime-availability.utils', () => ({
+  isNcpChatRuntimeBlocked: () => false,
+  resolveNcpChatSendErrorMessage: ({ message }: { message: string | null }) => message,
+}));
+
+vi.mock('@/features/chat/features/conversation/hooks/use-session-conversation-input-state', () => ({
+  useSessionConversationInputState: () => ({
+    inputActions: mocks.inputActions,
+    inputSnapshot: mocks.inputSnapshot,
+  }),
+}));
+
+vi.mock('@/features/chat/features/conversation/hooks/use-session-conversation-input-query', () => ({
+  useSessionConversationInputQuery: () => mocks.inputQuery,
+}));
+
+vi.mock('@/features/chat/features/conversation/hooks/use-session-conversation-controller', () => ({
+  useSessionConversationController: () => mocks.controller,
+}));
+
+vi.mock('@/features/chat/stores/chat-session-list.store', () => ({
+  useChatSessionListStore: (selector: (state: { snapshot: { selectedAgentId: string } }) => unknown) =>
+    selector({ snapshot: { selectedAgentId: 'main' } }),
+}));
+
+vi.mock('@/features/system-status', () => ({
+  useSystemStatus: () => ({ phase: 'ready', lastReadyAt: 1 }),
+}));
+
+vi.mock('../session-conversation-input', () => ({
+  SessionConversationInput: memo((props: unknown) => {
+    mocks.inputRenderSpy(props);
+    return <div data-testid="conversation-input" />;
+  }),
+}));
+
+function renderArea(sessionKey: string | null = 'session-1') {
+  return render(
+    <MemoryRouter>
+      <SessionConversationArea sessionKey={sessionKey} />
+    </MemoryRouter>,
+  );
+}
+
+describe('SessionConversationArea input boundary', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mocks.agent.visibleMessages = [];
+    mocks.agent.isHydrating = false;
+    mocks.agent.isRunning = true;
+    mocks.agent.isSending = true;
+    mocks.agent.snapshot.contextWindow = null;
+  });
+
+  it('keeps the composer input subtree stable when only streamed messages change', () => {
+    const rendered = renderArea('session-1');
+
+    expect(mocks.inputRenderSpy).toHaveBeenCalledOnce();
+
+    mocks.agent.visibleMessages = [{ id: 'message-1' }];
+    rendered.rerender(
+      <MemoryRouter>
+        <SessionConversationArea sessionKey="session-1" />
+      </MemoryRouter>,
+    );
+
+    expect(screen.getByTestId('message-count').textContent).toBe('1');
+    expect(mocks.inputRenderSpy).toHaveBeenCalledOnce();
+  });
+
+  it('does not replace the welcome composer just because draft send starts', () => {
+    renderArea(null);
+
+    expect(screen.getByTestId('conversation-content').dataset.showWelcome).toBe('true');
+    expect(screen.getByTestId('welcome')).toBeTruthy();
+    expect(screen.getByTestId('conversation-input')).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,199 @@
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+  type MutableRefObject,
+} from 'react';
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import {
+  createChatComposerTextNode,
+  type ChatComposerNode,
+} from '@nextclaw/agent-chat-ui';
+
+import { I18nProvider } from '@/app/components/i18n-provider';
+import { ChatPresenterProvider, type ChatPresenterLike } from '@/features/chat/components/providers/chat-presenter.provider';
+import {
+  SessionConversationInput,
+  type SessionConversationInputController,
+} from '@/features/chat/features/conversation/components/session-conversation-input';
+import type {
+  SessionConversationInputActions,
+  SessionConversationInputPatch,
+  SessionConversationInputSnapshot,
+} from '@/features/chat/features/conversation/hooks/use-session-conversation-input-state';
+
+vi.mock('@/app/hooks/use-viewport-layout', () => ({
+  useViewportLayout: () => ({ isDesktop: true, isMobile: false }),
+}));
+
+vi.mock('@/features/panel-apps', () => ({
+  usePanelApps: () => ({
+    data: { entries: [] },
+    isFetching: false,
+    isLoading: false,
+  }),
+}));
+
+vi.mock('@/features/chat/features/input/hooks/use-chat-model-favorites', () => ({
+  useChatModelFavorites: () => ({
+    favoriteModelValues: [],
+    isLoading: false,
+    setModelFavorite: vi.fn(),
+  }),
+}));
+
+vi.mock('@/shared/lib/api', async (importOriginal) => {
+  const actual = await importOriginal();
+  return {
+    ...(actual as object),
+    updateNcpSession: vi.fn(),
+  };
+});
+
+type StreamingInputControl = {
+  bumpStream: () => void;
+};
+
+const presenter = {
+  chatThreadManager: {
+    openSideChatDraft: vi.fn(),
+  },
+  chatUiManager: {
+    goToProviders: vi.fn(),
+  },
+} as unknown as ChatPresenterLike;
+
+const controller: SessionConversationInputController = {
+  canStopGeneration: true,
+  isSending: true,
+  send: vi.fn(),
+  sendDisabled: true,
+  stop: vi.fn(),
+  stopDisabled: false,
+};
+
+function createStreamingInputSnapshot(
+  nodes: readonly ChatComposerNode[],
+): SessionConversationInputSnapshot {
+  return {
+    attachments: [],
+    composerFocusRequestId: 0,
+    nodes,
+    pendingProjectRoot: null,
+    pendingSessionType: 'default',
+    selectedModel: undefined,
+    selectedSessionType: 'default',
+    selectedSkills: [],
+    selectedThinkingLevel: null,
+    sendError: null,
+    skillRecords: [],
+    text: nodes
+      .map((node) => (node.type === 'text' ? node.text : ''))
+      .join(''),
+  };
+}
+
+function StreamingSessionConversationInputHarness({
+  controlRef,
+}: {
+  controlRef: MutableRefObject<StreamingInputControl | null>;
+}) {
+  const [nodes, setNodes] = useState<readonly ChatComposerNode[]>([
+    createChatComposerTextNode(''),
+  ]);
+  const [streamChunk, setStreamChunk] = useState(0);
+  const bumpStream = useCallback(() => setStreamChunk((chunk) => chunk + 1), []);
+
+  useEffect(() => {
+    controlRef.current = { bumpStream };
+    return () => {
+      controlRef.current = null;
+    };
+  }, [bumpStream, controlRef]);
+
+  const inputSnapshot = useMemo(() => createStreamingInputSnapshot(nodes), [nodes]);
+  const inputActions: SessionConversationInputActions = useMemo(() => ({
+    addAttachments: vi.fn(() => []),
+    applyPromptSuggestion: vi.fn(),
+    consumeComposerFocusRequest: vi.fn(),
+    removeAttachment: vi.fn(),
+    requestComposerFocusAtEnd: vi.fn(),
+    resetComposer: vi.fn(),
+    restoreComposer: vi.fn(),
+    setAttachments: vi.fn(),
+    setPendingProjectRoot: vi.fn(),
+    setPendingSessionType: vi.fn(),
+    setSelectedModel: vi.fn(),
+    setSelectedSkills: vi.fn(),
+    setSelectedThinkingLevel: vi.fn(),
+    setSendError: vi.fn(),
+    syncComposer: vi.fn(),
+    update: (patch: SessionConversationInputPatch) => {
+      setNodes((currentNodes) => {
+        const resolvedPatch = typeof patch === 'function'
+          ? patch(createStreamingInputSnapshot(currentNodes))
+          : patch;
+        return resolvedPatch.nodes ?? currentNodes;
+      });
+    },
+  }), []);
+  const inputQuery = useMemo(() => ({
+    defaultModel: undefined,
+    defaultProjectRoot: null,
+    fallbackPreferredModel: undefined,
+    fallbackPreferredThinking: undefined,
+    isProviderStateResolved: true,
+    isSkillsLoading: false,
+    modelOptions: [],
+    selectedSession: null,
+    selectedSessionKey: null,
+    sessionTypeState: {
+      canEditSessionType: true,
+      defaultSessionType: 'default',
+      selectedSessionType: 'default',
+      selectedSessionTypeOption: null,
+      sessionTypeOptions: [],
+      sessionTypeUnavailable: false,
+      sessionTypeUnavailableMessage: null,
+    },
+    skillRecords: [],
+  }), []);
+
+  return (
+    <I18nProvider>
+      <ChatPresenterProvider presenter={presenter}>
+        <div data-testid="stream-chunk">{streamChunk}</div>
+        <SessionConversationInput
+          contextWindow={null}
+          controller={controller}
+          inputActions={inputActions}
+          inputQuery={inputQuery}
+          inputSnapshot={inputSnapshot}
+        />
+      </ChatPresenterProvider>
+    </I18nProvider>
+  );
+}
+
+describe('SessionConversationInput streaming stability', () => {
+  it('keeps IME composition stable while simulated streamed output rerenders the owner', async () => {
+    const controlRef: MutableRefObject<StreamingInputControl | null> = { current: null };
+    render(<StreamingSessionConversationInputHarness controlRef={controlRef} />);
+
+    const textbox = screen.getByRole('textbox');
+    fireEvent.focus(textbox);
+    fireEvent.compositionStart(textbox);
+
+    act(() => {
+      controlRef.current?.bumpStream();
+      controlRef.current?.bumpStream();
+    });
+    expect(screen.getByTestId('stream-chunk').textContent).toBe('2');
+
+    fireEvent.compositionEnd(textbox, { data: '你' });
+
+    await waitFor(() => expect(textbox.textContent).toBe('你'));
+  });
+});