@nextclaw/ui 0.14.1 → 0.14.3

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

@@ -1,8 +1,29 @@
-import { NavLink } from 'react-router-dom';
-import { Popover, PopoverContent, PopoverTrigger } from '@/shared/components/ui/popover';
-import { Select, SelectContent, SelectItem, SelectTrigger } from '@/shared/components/ui/select';
-import { t, type I18nLanguage } from '@/shared/lib/i18n';
-import type { UiTheme } from '@/shared/lib/theme';
+import { NavLink } from "react-router-dom";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/shared/components/ui/popover";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+} from "@/shared/components/ui/select";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/shared/components/ui/tooltip";
+import { t, type I18nLanguage } from "@/shared/lib/i18n";
+import type { UiTheme } from "@/shared/lib/theme";
+import { cn } from "@/shared/lib/utils";
+import {
+  SIDEBAR_RAIL_CONTROL_CLASS,
+  SIDEBAR_RAIL_ICON_CLASS,
+  SIDEBAR_RAIL_SURFACE_CLASS,
+} from "@/app/components/layout/sidebar-rail.styles";
 import {
   BookOpen,
   ChevronRight,
@@ -11,7 +32,7 @@ import {
   Palette,
   Settings,
   type LucideIcon,
-} from 'lucide-react';
+} from "lucide-react";
 
 type ChatSidebarUtilityOption<Value extends string> = {
   value: Value;
@@ -31,6 +52,7 @@ type ChatSidebarUtilityMenuProps = {
   onSelectLanguage: (language: I18nLanguage) => void;
   onOpenDocs: () => void;
   onOpenApps: () => void;
+  collapsed?: boolean;
 };
 
 export function ChatSidebarUtilityMenu({
@@ -46,6 +68,7 @@ export function ChatSidebarUtilityMenu({
   onSelectLanguage,
   onOpenDocs,
   onOpenApps,
+  collapsed = false,
 }: ChatSidebarUtilityMenuProps) {
   const handleOpenDocs = () => {
     onOpenDocs();
@@ -59,52 +82,86 @@ export function ChatSidebarUtilityMenu({
 
   return (
     <Popover open={isOpen} onOpenChange={onOpenChange}>
-      <PopoverTrigger asChild>
-        <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"
-        >
-          <Settings className="h-4 w-4 shrink-0 text-gray-400" />
-          <span className="min-w-0 flex-1 text-left">{t('settings')}</span>
-          <span className="max-w-[112px] truncate text-[13px] text-gray-500">
-            {currentThemeLabel} / {currentLanguageLabel}
-          </span>
-        </button>
-      </PopoverTrigger>
-      <PopoverContent side="top" align="start" className="w-64 p-2">
+      {collapsed ? (
+        <TooltipProvider delayDuration={250}>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <PopoverTrigger asChild>
+                <button
+                  type="button"
+                  aria-label={t("settingsMenu")}
+                  className={cn(
+                    "flex items-center justify-center",
+                    SIDEBAR_RAIL_CONTROL_CLASS,
+                    SIDEBAR_RAIL_SURFACE_CLASS,
+                  )}
+                >
+                  <Settings
+                    className={cn(
+                      SIDEBAR_RAIL_ICON_CLASS,
+                      "shrink-0 text-muted-foreground",
+                    )}
+                  />
+                </button>
+              </PopoverTrigger>
+            </TooltipTrigger>
+            <TooltipContent side="right" className="text-xs">
+              {t("settingsMenu")}
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      ) : (
+        <PopoverTrigger asChild>
+          <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-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-muted-foreground/70" />
+            <span className="min-w-0 flex-1 text-left">{t("settings")}</span>
+            <span className="max-w-[112px] truncate text-[13px] text-muted-foreground">
+              {currentThemeLabel} / {currentLanguageLabel}
+            </span>
+          </button>
+        </PopoverTrigger>
+      )}
+      <PopoverContent
+        side={collapsed ? "right" : "top"}
+        align={collapsed ? "end" : "start"}
+        className="w-64 p-2"
+      >
         <div className="space-y-1">
           <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" />
-            <span className="flex-1 text-left">{t('settings')}</span>
+            <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" />
-            <span className="flex-1 text-left">{t('docBrowserHelp')}</span>
+            <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" />
-            <span className="flex-1 text-left">{t('appsTitle')}</span>
+            <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}
-          label={t('theme')}
+          label={t("theme")}
           options={themeOptions}
           value={currentTheme}
           valueLabel={currentThemeLabel}
@@ -114,7 +171,7 @@ export function ChatSidebarUtilityMenu({
 
         <ChatSidebarUtilitySelect
           icon={Languages}
-          label={t('language')}
+          label={t("language")}
           options={languageOptions}
           value={currentLanguage}
           valueLabel={currentLanguageLabel}
@@ -155,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

@@ -1,7 +1,4 @@
 import { useEffect, useMemo, useState } from "react";
-import { BrandHeader } from "@/shared/components/common/brand-header";
-import { StatusBadge } from "@/shared/components/common/status-badge";
-import { ChatSidebarListModeSwitch } from "@/features/chat/components/chat-sidebar-list-mode-switch";
 import {
   getSessionTitle,
   groupChildSessionsByParentKey,
@@ -25,37 +22,26 @@ 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 { SidebarNavLinkItem } from "@/app/components/layout/sidebar-items";
-import { AlarmClock, Bot, BrainCircuit } from "lucide-react";
 import { ChatSidebarSessionEntry } from "@/features/chat/features/session/components/chat-sidebar-session-entry";
-import { ChatSidebarSessionList } from "@/features/chat/features/session/components/chat-sidebar-session-list";
 import {
   ChatSidebarDesktopToolbar,
   ChatSidebarMobileToolbar,
 } from "@/features/chat/components/layout/chat-sidebar-toolbar";
-import { ChatSidebarUtilityMenu } from "@/features/chat/components/layout/chat-sidebar-utility-menu";
+import {
+  ChatSidebarDesktopFooter,
+  ChatSidebarDesktopHeader,
+  ChatSidebarDesktopNav,
+  ChatSidebarSessionArea,
+} from "@/features/chat/components/layout/chat-sidebar-desktop-layout";
 import { openApps } from "@/features/panel-apps";
-import { isWindowsDesktopHost } from "@/platforms/desktop";
 import {
   buildSessionTypeOptions,
   DEFAULT_SESSION_TYPE,
   normalizeSessionType,
 } from "@/features/chat/features/session-type/utils/chat-session-type.utils";
 import { useChatNewSessionTypePreference } from "@/features/chat/features/session-type/hooks/use-chat-new-session-type-preference";
-
-const navItems = [
-  {
-    target: "/cron",
-    label: () => t("chatSidebarScheduledTasks"),
-    icon: AlarmClock,
-  },
-  {
-    target: "/skills",
-    label: () => t("chatSidebarSkills"),
-    icon: BrainCircuit,
-  },
-  { target: "/agents", label: () => t("agentsPageTitle"), icon: Bot },
-];
+import { useViewportLayoutStore } from "@/app/stores/viewport-layout.store";
+import { SIDEBAR_RAIL_WIDTH_CLASS } from "@/app/components/layout/sidebar-rail.styles";
 
 type ChatSidebarVariant = "desktop" | "mobile";
 
@@ -104,6 +90,9 @@ export function ChatSidebar({
   const isMobileVariant = variant === "mobile";
   const presenter = usePresenter();
   const docBrowser = useDocBrowser();
+  const isSidebarCollapsed = useViewportLayoutStore(
+    (state) => state.isSidebarCollapsed,
+  );
   const [isCreateMenuOpen, setIsCreateMenuOpen] = useState(false);
   const [isUtilityMenuOpen, setIsUtilityMenuOpen] = useState(false);
   const listSnapshot = useChatSessionListStore((state) => state.snapshot);
@@ -116,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;
@@ -179,6 +168,7 @@ export function ChatSidebar({
     sessionTypeOptions,
   });
   const isProjectFirstView = listSnapshot.listMode === "project-first";
+  const shouldCollapse = !isMobileVariant && isSidebarCollapsed;
   const optimisticReadAtBySessionKey = useChatSessionUnreadState(
     items,
     listSnapshot.selectedSessionKey,
@@ -237,19 +227,23 @@ export function ChatSidebar({
   return (
     <aside
       className={cn(
-        "flex h-full min-h-0 flex-col bg-secondary",
+        "flex h-full min-h-0 flex-col bg-secondary transition-[width] duration-200 ease-out",
         isMobileVariant
           ? "flex-1 overflow-hidden"
-          : "w-[280px] shrink-0 border-r border-gray-200/60",
+          : shouldCollapse
+            ? cn(
+                SIDEBAR_RAIL_WIDTH_CLASS,
+                "shrink-0 border-r border-border/70",
+              )
+            : "w-[280px] shrink-0 border-r border-border/70",
       )}
+      data-sidebar-collapsed={shouldCollapse ? "true" : "false"}
     >
-      {!isMobileVariant && !isWindowsDesktopHost() ? (
-        <div className="px-5 py-2.5">
-          <BrandHeader
-            className="flex min-w-0 items-center gap-2"
-            suffix={<StatusBadge status={systemStatus.connectionStatus} />}
-          />
-        </div>
+      {!isMobileVariant ? (
+        <ChatSidebarDesktopHeader
+          connectionStatus={systemStatus.connectionStatus}
+          isCollapsed={shouldCollapse}
+        />
       ) : null}
 
       {isMobileVariant ? (
@@ -287,75 +281,48 @@ export function ChatSidebar({
             newSessionTypePreference.setSelectedSessionType
           }
           onQueryChange={presenter.chatSessionListManager.setQuery}
+          collapsed={shouldCollapse}
         />
       )}
 
       {!isMobileVariant ? (
-        <div className="px-3 pb-2">
-          <ul className="space-y-0.5">
-            {navItems.map((item) => (
-              <li key={item.target}>
-                <SidebarNavLinkItem
-                  to={item.target}
-                  label={item.label()}
-                  icon={item.icon}
-                  density="compact"
-                />
-              </li>
-            ))}
-          </ul>
-        </div>
-      ) : null}
-
-      {!isMobileVariant ? (
-        <div className="mx-4 border-t border-gray-200/60" />
+        <ChatSidebarDesktopNav isCollapsed={shouldCollapse} />
       ) : null}
 
-      <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">
-          {t("chatSidebarTaskRecords")}
-        </div>
-        <ChatSidebarListModeSwitch
-          isProjectFirstView={isProjectFirstView}
-          onSelectMode={presenter.chatSessionListManager.setListMode}
-        />
-      </div>
-
-      <div className="flex-1 min-h-0 overflow-y-auto custom-scrollbar px-3 py-2">
-        <ChatSidebarSessionList
-          isLoading={isLoading}
-          isProjectFirstView={isProjectFirstView}
-          groups={groups}
-          projectGroups={projectGroups}
-          defaultSessionType={newSessionTypePreference.selectedSessionType}
-          sessionTypeOptions={sessionTypeOptions}
-          renderSessionItem={renderSessionItem}
-          onCreateSession={createSessionAndOpenIfNeeded}
-        />
-      </div>
+      <ChatSidebarSessionArea
+        defaultSessionType={newSessionTypePreference.selectedSessionType}
+        groups={groups}
+        isCollapsed={shouldCollapse}
+        isLoading={isLoading}
+        isProjectFirstView={isProjectFirstView}
+        onCreateSession={createSessionAndOpenIfNeeded}
+        onSelectMode={presenter.chatSessionListManager.setListMode}
+        projectGroups={projectGroups}
+        renderSessionItem={renderSessionItem}
+        sessionTypeOptions={sessionTypeOptions}
+      />
 
       {!isMobileVariant ? (
-        <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",
-                title: t("docBrowserHelp"),
-              })
-            }
-            onOpenApps={() => openApps(docBrowser)}
-          />
-        </div>
+        <ChatSidebarDesktopFooter
+          currentLanguage={language}
+          currentLanguageLabel={currentLanguageLabel}
+          currentTheme={theme}
+          currentThemeLabel={currentThemeLabel}
+          isCollapsed={shouldCollapse}
+          isOpen={isUtilityMenuOpen}
+          languageOptions={utilityLanguageOptions}
+          onOpenApps={() => openApps(docBrowser)}
+          onOpenChange={setIsUtilityMenuOpen}
+          onOpenDocs={() =>
+            docBrowser.open(undefined, {
+              kind: "docs",
+              title: t("docBrowserHelp"),
+            })
+          }
+          onSelectLanguage={handleLanguageSwitch}
+          onSelectTheme={setTheme}
+          themeOptions={utilityThemeOptions}
+        />
       ) : null}
     </aside>
   );

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

@@ -2,25 +2,19 @@ import { createContext, useContext, type ReactNode } from 'react';
 import type {
   ChatSessionListManager,
 } from '@/features/chat/managers/chat-session-list.manager';
-import type { ChatRunManager } from '@/features/chat/managers/chat-run.manager';
 import type { ChatUiManager } from '@/features/chat/managers/chat-ui.manager';
-import type { ChatInputManager } from '@/features/chat/managers/chat-input.manager';
 import type { ChatQueryManager } from '@/features/chat/managers/chat-query.manager';
 import type { ChatThreadManager } from '@/features/chat/managers/chat-thread.manager';
 
 type PublicManager<T extends object> = Pick<T, keyof T>;
 
-export type ChatInputManagerLike = PublicManager<ChatInputManager>;
 export type ChatThreadManagerLike = PublicManager<ChatThreadManager>;
 
 export type ChatPresenterLike = {
   chatUiManager: ChatUiManager;
-  chatRunManager: ChatRunManager;
-  chatInputManager: ChatInputManagerLike;
   chatQueryManager: ChatQueryManager;
   chatSessionListManager: ChatSessionListManager;
   chatThreadManager: ChatThreadManagerLike;
-  startAgentCreationDraft: (prompt: string) => void;
 };
 
 const ChatPresenterContext = createContext<ChatPresenterLike | null>(null);

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();
+  });
+});