@nextclaw/ui 0.12.10 → 0.12.12

package/src/{components/chat → features/chat/components/conversation}/chat-conversation-panel.tsx

@@ -1,24 +1,21 @@
 import { type ComponentProps, useRef } from "react";
-import { ArrowLeft } from "lucide-react";
 import { useStickyBottomScroll } from "@nextclaw/agent-chat-ui";
 import type { ChatFileOpenActionViewModel } from "@nextclaw/agent-chat-ui";
+import { ChatInputBarContainer } from "@/features/chat/components/conversation/chat-input-bar.container";
+import { ChatMessageListContainer } from "@/features/chat/components/conversation/chat-message-list.container";
 import {
-  ChatInputBarContainer,
-  ChatMessageListContainer,
-} from "@/components/chat/nextclaw";
-import { ChatWelcome } from "@/components/chat/ChatWelcome";
-import { ChatSessionWorkspacePanel } from "@/components/chat/chat-session-workspace-panel";
-import { AgentAvatar } from "@/components/common/AgentAvatar";
-import { SessionContextIconNode } from "@/components/common/session-context-icon";
-import { usePresenter } from "@/components/chat/presenter/chat-presenter-context";
-import { ChatSessionHeaderActions } from "@/components/chat/session-header/chat-session-header-actions";
-import { ChatSessionProjectBadge } from "@/components/chat/session-header/chat-session-project-badge";
-import { useChatInputStore } from "@/components/chat/stores/chat-input.store";
-import { useChatThreadStore } from "@/components/chat/stores/chat-thread.store";
-import { Skeleton } from "@/components/ui/skeleton";
-import { resolveAgentRuntimeSessionType } from "@/components/chat/useChatSessionTypeState";
-import { t } from "@/lib/i18n";
-import { cn } from "@/lib/utils";
+  ChatConversationHeader,
+  ChatParentSessionBanner,
+} from "@/features/chat/components/conversation/chat-conversation-header";
+import { ChatWelcome } from "@/features/chat/components/chat-welcome";
+import { ChatSessionWorkspacePanel } from "@/features/chat";
+import { usePresenter } from "@/features/chat/components/providers/chat-presenter.provider";
+import { resolveAgentRuntimeSessionType } from "@/features/chat/hooks/use-chat-session-type-state";
+import { useChatInputStore } from "@/features/chat/stores/chat-input.store";
+import { useChatThreadStore } from "@/features/chat/stores/chat-thread.store";
+import { Skeleton } from "@/shared/components/ui/skeleton";
+import { t } from "@/shared/lib/i18n";
+import { cn } from "@/shared/lib/utils";
 
 const CHAT_CONVERSATION_SKELETON_BUBBLES = [
   {
@@ -105,9 +102,6 @@ function ChatConversationSkeleton() {
 }
 
 type ChatThreadSnapshot = ReturnType<typeof useChatThreadStore.getState>["snapshot"];
-type ChatHeaderDeleteHandler = ComponentProps<
-  typeof ChatSessionHeaderActions
->["onDeleteSession"];
 type ChatToolActionHandler = ComponentProps<
   typeof ChatMessageListContainer
 >["onToolAction"];
@@ -115,126 +109,12 @@ type ChatFileOpenHandler = ComponentProps<
   typeof ChatMessageListContainer
 >["onFileOpen"];
 
-type ChatParentSessionBannerProps = {
-  parentSessionLabel: string | null;
-  onGoToParentSession: () => void;
-};
-
-function ChatParentSessionBanner({
-  parentSessionLabel,
-  onGoToParentSession,
-}: ChatParentSessionBannerProps) {
-  if (!parentSessionLabel) {
-    return null;
-  }
-  const trimmedLabel = parentSessionLabel.trim();
-  return (
-    <div className="border-b border-gray-200/60 bg-white/75 px-5 py-2 backdrop-blur-sm">
-      <button
-        type="button"
-        onClick={onGoToParentSession}
-        className="inline-flex items-center gap-2 text-xs font-medium text-gray-600 transition-colors hover:text-gray-900"
-      >
-        <ArrowLeft className="h-3.5 w-3.5" />
-        <span>
-          {t("chatBackToParent")}
-          {trimmedLabel ? ` · ${trimmedLabel}` : ""}
-        </span>
-      </button>
-    </div>
-  );
-}
-
-type ChatConversationHeaderProps = {
-  snapshot: ChatThreadSnapshot;
-  childSessionCount: number;
-  normalizedAgentId: string;
-  sessionHeaderTitle: string;
-  shouldShowHeaderAgentAvatar: boolean;
-  shouldShowSessionHeader: boolean;
-  onOpenChildSessions: () => void;
-  onDeleteSession: ChatHeaderDeleteHandler;
-};
-
-function ChatConversationHeader({
-  snapshot,
-  childSessionCount,
-  normalizedAgentId,
-  sessionHeaderTitle,
-  shouldShowHeaderAgentAvatar,
-  shouldShowSessionHeader,
-  onOpenChildSessions,
-  onDeleteSession,
-}: ChatConversationHeaderProps) {
-  return (
-    <div
-      className={cn(
-        "px-5 border-b border-gray-200/60 bg-white/80 backdrop-blur-sm flex items-center justify-between shrink-0 overflow-hidden transition-all duration-200",
-        shouldShowSessionHeader ? "py-3 opacity-100" : "h-0 py-0 opacity-0 border-b-0",
-      )}
-    >
-      <div className="min-w-0 flex-1 flex items-center gap-2">
-        {shouldShowHeaderAgentAvatar ? (
-          <div className="inline-flex shrink-0 items-center">
-            <AgentAvatar
-              agentId={normalizedAgentId}
-              displayName={snapshot.agentDisplayName}
-              avatarUrl={snapshot.agentAvatarUrl}
-              className="h-5 w-5"
-            />
-          </div>
-        ) : null}
-        <span className="text-sm font-medium text-gray-700 truncate">
-          {sessionHeaderTitle}
-        </span>
-        {snapshot.sessionTypeLabel ? (
-          <span className="inline-flex shrink-0 items-center gap-1.5 rounded-full border border-gray-200 bg-gray-100 px-2 py-0.5 text-[11px] font-medium text-gray-600">
-            {snapshot.sessionTypeIcon?.src ? (
-              <span className="inline-flex h-[1.125rem] w-[1.125rem] items-center justify-center">
-                <SessionContextIconNode
-                  icon={{
-                    kind: "runtime-image",
-                    src: snapshot.sessionTypeIcon.src,
-                    alt: snapshot.sessionTypeIcon.alt ?? null,
-                    name: snapshot.sessionTypeLabel
-                  }}
-                />
-              </span>
-            ) : null}
-            {snapshot.sessionTypeLabel}
-          </span>
-        ) : null}
-        {snapshot.sessionProjectName ? (
-          <ChatSessionProjectBadge
-            sessionKey={snapshot.sessionKey ?? "draft"}
-            projectName={snapshot.sessionProjectName}
-            projectRoot={snapshot.sessionProjectRoot}
-            persistToServer={snapshot.canDeleteSession}
-          />
-        ) : null}
-      </div>
-      {snapshot.sessionKey ? (
-        <ChatSessionHeaderActions
-          sessionKey={snapshot.sessionKey}
-          canDeleteSession={snapshot.canDeleteSession}
-          isDeletePending={snapshot.isDeletePending}
-          projectRoot={snapshot.sessionProjectRoot}
-          childSessionCount={childSessionCount}
-          onOpenChildSessions={onOpenChildSessions}
-          onDeleteSession={onDeleteSession}
-        />
-      ) : null}
-    </div>
-  );
-}
-
 type ChatConversationAlertsProps = {
   shouldShowProviderHint: boolean;
   sessionTypeUnavailable: boolean;
   sessionTypeUnavailableMessage: string | null;
   onGoToProviders: () => void;
 };
-
 function ChatConversationAlerts({
   shouldShowProviderHint,
   sessionTypeUnavailable,
@@ -244,7 +124,7 @@ function ChatConversationAlerts({
   return (
     <>
       {shouldShowProviderHint ? (
-        <div className="px-5 py-2.5 border-b border-amber-200/70 bg-amber-50/70 flex items-center justify-between gap-3 shrink-0">
+        <div className="px-4 py-2.5 border-b border-amber-200/70 bg-amber-50/70 flex items-center justify-between gap-3 shrink-0 sm:px-5">
           <span className="text-xs text-amber-800">
             {t("chatModelNoOptions")}
           </span>
@@ -258,7 +138,7 @@ function ChatConversationAlerts({
         </div>
       ) : null}
       {sessionTypeUnavailable && sessionTypeUnavailableMessage?.trim() ? (
-        <div className="px-5 py-2.5 border-b border-amber-200/70 bg-amber-50/70 shrink-0">
+        <div className="px-4 py-2.5 border-b border-amber-200/70 bg-amber-50/70 shrink-0 sm:px-5">
           <span className="text-xs text-amber-800">
             {sessionTypeUnavailableMessage}
           </span>
@@ -280,7 +160,6 @@ type ChatConversationContentProps = {
   onToolAction: ChatToolActionHandler;
   onFileOpen: ChatFileOpenHandler;
 };
-
 function ChatConversationContent({
   snapshot,
   availableAgents,
@@ -307,11 +186,11 @@ function ChatConversationContent({
           onSelectAgent={onSelectAgent}
         />
       ) : hideEmptyHint ? null : snapshot.messages.length === 0 ? (
-        <div className="px-5 py-5 text-sm text-gray-500">
+        <div className="px-4 py-4 text-sm text-gray-500 sm:px-5 sm:py-5">
           {t("chatNoMessages")}
         </div>
       ) : (
-        <div className="mx-auto w-full max-w-[min(1120px,100%)] px-6 py-5">
+        <div className="mx-auto w-full max-w-[min(1120px,100%)] px-4 py-4 sm:px-6 sm:py-5">
           <ChatMessageListContainer
             key={snapshot.sessionKey ?? "draft"}
             messages={snapshot.messages}
@@ -336,7 +215,13 @@ function shouldShowWorkspacePanel(
   return childSessionTabs.length > 0 || workspaceFileTabs.length > 0;
 }
 
-export function ChatConversationPanel() {
+export function ChatConversationPanel({
+  layoutMode = "desktop",
+  onBackToList,
+}: {
+  layoutMode?: "desktop" | "mobile";
+  onBackToList?: () => void;
+}) {
   const presenter = usePresenter();
   const defaultSessionType = useChatInputStore(
     (state) => state.snapshot.defaultSessionType,
@@ -432,10 +317,12 @@ export function ChatConversationPanel() {
         <ChatConversationHeader
           snapshot={snapshot}
           childSessionCount={childSessionTabs.length}
+          layoutMode={layoutMode}
           normalizedAgentId={normalizedAgentId}
           sessionHeaderTitle={sessionHeaderTitle}
           shouldShowHeaderAgentAvatar={shouldShowHeaderAgentAvatar}
           shouldShowSessionHeader={shouldShowSessionHeader}
+          onBackToList={onBackToList}
           onOpenChildSessions={openChildSessions}
           onDeleteSession={presenter.chatThreadManager.deleteSession}
         />
@@ -468,6 +355,7 @@ export function ChatConversationPanel() {
           workspaceFileTabs={workspaceFileTabs}
           activeWorkspaceFileKey={snapshot.activeWorkspaceFileKey ?? null}
           sessionProjectRoot={snapshot.sessionProjectRoot ?? null}
+          displayMode={layoutMode === "mobile" ? "overlay" : "docked"}
           onSelectSession={presenter.chatThreadManager.selectChildSessionDetail}
           onSelectFile={presenter.chatThreadManager.selectWorkspaceFile}
           onCloseFile={presenter.chatThreadManager.closeWorkspaceFile}

package/src/{components/chat/containers → features/chat/components/conversation}/chat-input-bar.container.tsx

@@ -1,36 +1,21 @@
-import { useCallback, useMemo, useRef, useState } from 'react';
+import { useCallback, useMemo, useRef, useState, type ChangeEvent, type RefObject } from 'react';
 import { ChatInputBar, type ChatInputBarHandle } from '@nextclaw/agent-chat-ui';
-import {
-  DEFAULT_NCP_ATTACHMENT_MAX_BYTES,
-  uploadFilesAsNcpDraftAttachments
-} from '@nextclaw/ncp-react';
-import { uploadNcpAssets } from '@/api/ncp-attachments';
-import {
-  buildChatSlashItems,
-  buildModelStateHint,
-  buildModelToolbarSelect,
-  buildSkillPickerModel,
-  buildThinkingToolbarSelect,
-  type ChatModelRecord,
-  type ChatSkillRecord,
-  type ChatThinkingLevel
-} from '@/components/chat/adapters/chat-input-bar.adapter';
-import { deriveSelectedSkillsFromComposer } from '@/components/chat/chat-composer-state';
-import { usePresenter } from '@/components/chat/presenter/chat-presenter-context';
-import {
-  CHAT_RECENT_MODELS_MIN_OPTIONS,
-  chatRecentModelsManager
-} from '@/components/chat/chat-recent-models.manager';
-import {
-  CHAT_RECENT_SKILLS_MIN_OPTIONS,
-  chatRecentSkillsManager
-} from '@/components/chat/chat-recent-skills.manager';
-import { useI18n } from '@/components/providers/I18nProvider';
-import { useChatInputStore } from '@/components/chat/stores/chat-input.store';
-import type { SessionSkillEntryView } from '@/api/types';
-import { t } from '@/lib/i18n';
+import { DEFAULT_NCP_ATTACHMENT_MAX_BYTES, uploadFilesAsNcpDraftAttachments } from '@nextclaw/ncp-react';
+import { uploadNcpAssets } from '@/shared/lib/api';
+import type { SessionSkillEntryView } from '@/shared/lib/api';
+import { buildChatSlashItems, buildModelStateHint, buildModelToolbarSelect, buildSkillPickerModel, buildThinkingToolbarSelect, type ChatModelRecord, type ChatSkillRecord, type ChatThinkingLevel } from '@/features/chat/utils/chat-input-bar.utils';
+import { usePresenter } from '@/features/chat/components/providers/chat-presenter.provider';
+import { useI18n } from '@/app/components/i18n-provider';
+import { useChatInputStore } from '@/features/chat/stores/chat-input.store';
+import { chatRecentModelsManager, CHAT_RECENT_MODELS_MIN_OPTIONS } from '@/features/chat/managers/chat-recent-models.manager';
+import { chatRecentSkillsManager, CHAT_RECENT_SKILLS_MIN_OPTIONS } from '@/features/chat/managers/chat-recent-skills.manager';
+import { deriveSelectedSkillsFromComposer } from '@/features/chat/utils/chat-composer-state.utils';
+import { hasNcpChatModelOptions, isNcpChatComposerDisabled, isNcpChatModelOptionsEmpty, isNcpChatModelOptionsLoading, isNcpChatSendDisabled } from '@/features/chat/utils/ncp-chat-input-availability.utils';
+import { useChatRuntimeAvailability } from '@/features/system-status';
+import { t } from '@/shared/lib/i18n';
 import { toast } from 'sonner';
 
+type ChatInputStoreSnapshot = ReturnType<typeof useChatInputStore.getState>['snapshot']; type ChatPresenter = ReturnType<typeof usePresenter>;
 function buildThinkingLabels(): Record<ChatThinkingLevel, string> {
   return {
     off: t('chatThinkingLevelOff'),
@@ -42,7 +27,6 @@ function buildThinkingLabels(): Record<ChatThinkingLevel, string> {
     xhigh: t('chatThinkingLevelXhigh')
   };
 }
-
 function toSkillRecords(
   snapshotRecords: SessionSkillEntryView[],
   scopeLabels: Record<SessionSkillEntryView['scope'], string>
@@ -56,7 +40,6 @@ function toSkillRecords(
     badgeLabel: scopeLabels[record.scope]
   }));
 }
-
 function toModelRecords(snapshotModels: Array<{
   value: string;
   modelLabel: string;
@@ -78,82 +61,58 @@ function toModelRecords(snapshotModels: Array<{
       : null
   }));
 }
-
-export function ChatInputBarContainer() {
-  const presenter = usePresenter();
-  const { language } = useI18n();
-  const snapshot = useChatInputStore((state) => state.snapshot);
-  const [slashQuery, setSlashQuery] = useState<string | null>(null);
-  const inputBarRef = useRef<ChatInputBarHandle | null>(null);
-  const fileInputRef = useRef<HTMLInputElement | null>(null);
-
+function useChatInputBarLabels(language: string) {
   const skillScopeLabels = useMemo<Record<'builtin' | 'project' | 'workspace', string>>(() => {
+    void language;
     return {
       builtin: t('chatSkillScopeBuiltin'),
       project: t('chatSkillScopeProject'),
-      workspace: t('chatSkillScopeWorkspace'),
+      workspace: t('chatSkillScopeWorkspace')
     };
   }, [language]);
-  const slashTexts = useMemo(
-    () => {
-      return {
-        slashSkillSubtitle: t('chatSlashTypeSkill'),
-        slashSkillSpecLabel: t('chatSlashSkillSpec'),
-        slashSkillScopeLabel: t('chatSlashSkillScope'),
-        noSkillDescription: t('chatSkillsPickerNoDescription')
-      };
-    },
-    [language]
-  );
-
+  const slashTexts = useMemo(() => {
+    void language;
+    return {
+      slashSkillSubtitle: t('chatSlashTypeSkill'),
+      slashSkillSpecLabel: t('chatSlashSkillSpec'),
+      slashSkillScopeLabel: t('chatSlashSkillScope'),
+      noSkillDescription: t('chatSkillsPickerNoDescription')
+    };
+  }, [language]);
+  return {
+    skillScopeLabels,
+    slashTexts,
+    recentModelsLabel: t('chatPickerRecentModels'),
+    allModelsLabel: t('chatPickerAllModels'),
+    recentSkillsLabel: t('chatPickerRecent'),
+    allSkillsLabel: t('chatPickerAllSkills')
+  };
+}
+function useChatInputBarCollections(snapshot: ChatInputStoreSnapshot, skillScopeLabels: Record<'builtin' | 'project' | 'workspace', string>) {
   const skillRecords = useMemo(
     () => toSkillRecords(snapshot.skillRecords, skillScopeLabels),
     [snapshot.skillRecords, skillScopeLabels]
   );
   const modelRecords = useMemo(() => toModelRecords(snapshot.modelOptions), [snapshot.modelOptions]);
-  const recentModelValues = chatRecentModelsManager.resolveVisible({
-    availableValues: modelRecords.map((option) => option.value),
-    minAvailableCount: CHAT_RECENT_MODELS_MIN_OPTIONS
-  });
-  const recentSkillValues = chatRecentSkillsManager.resolveVisible({
-    availableValues: skillRecords.map((record) => record.key),
-    minAvailableCount: 0
-  });
-  const recentSkillGroupValues = chatRecentSkillsManager.resolveVisible({
-    availableValues: skillRecords.map((record) => record.key),
-    minAvailableCount: CHAT_RECENT_SKILLS_MIN_OPTIONS
-  });
-
-  const hasModelOptions = modelRecords.length > 0;
-  const isModelOptionsLoading = !snapshot.isProviderStateResolved && !hasModelOptions;
-  const isModelOptionsEmpty = snapshot.isProviderStateResolved && !hasModelOptions;
-  const inputDisabled =
-    ((isModelOptionsLoading || isModelOptionsEmpty) && !snapshot.isSending) || snapshot.sessionTypeUnavailable;
-  const attachmentSupported = typeof presenter.chatInputManager.addAttachments === 'function';
-  const textareaPlaceholder = isModelOptionsLoading
-    ? ''
-    : hasModelOptions
-      ? t('chatInputPlaceholder')
-      : t('chatModelNoOptions');
-  const recentModelsLabel = t('chatPickerRecentModels');
-  const allModelsLabel = t('chatPickerAllModels');
-  const recentSkillsLabel = t('chatPickerRecent');
-  const allSkillsLabel = t('chatPickerAllSkills');
-
-  const slashItems = useMemo(
-    () => buildChatSlashItems(skillRecords, slashQuery ?? '', slashTexts, recentSkillValues),
-    [slashQuery, skillRecords, slashTexts, recentSkillValues]
-  );
-
-  const selectedModelOption = modelRecords.find((option) => option.value === snapshot.selectedModel);
-  const selectedModelThinkingCapability = selectedModelOption?.thinkingCapability;
-  const thinkingSupportedLevels = selectedModelThinkingCapability?.supported ?? [];
-
-  const resolvedStopHint =
-    snapshot.stopDisabledReason === '__preparing__'
-      ? t('chatStopPreparing')
-      : snapshot.stopDisabledReason?.trim() || t('chatStopUnavailable');
-
+  return {
+    skillRecords,
+    modelRecords,
+    recentModelValues: chatRecentModelsManager.resolveVisible({
+      availableValues: modelRecords.map((option) => option.value),
+      minAvailableCount: CHAT_RECENT_MODELS_MIN_OPTIONS
+    }),
+    recentSkillValues: chatRecentSkillsManager.resolveVisible({
+      availableValues: skillRecords.map((record) => record.key),
+      minAvailableCount: 0
+    }),
+    recentSkillGroupValues: chatRecentSkillsManager.resolveVisible({
+      availableValues: skillRecords.map((record) => record.key),
+      minAvailableCount: CHAT_RECENT_SKILLS_MIN_OPTIONS
+    })
+  };
+}
+function useChatInputBarAttachments(params: { attachmentSupported: boolean; inputBarRef: RefObject<ChatInputBarHandle | null>; presenter: ChatPresenter; }) {
+  const { attachmentSupported, inputBarRef, presenter } = params;
   const showAttachmentError = useCallback((reason: 'unsupported-type' | 'too-large' | 'read-failed') => {
     if (reason === 'unsupported-type') {
       toast.error(t('chatInputAttachmentUnsupported'));
@@ -167,35 +126,39 @@ export function ChatInputBarContainer() {
     }
     toast.error(t('chatInputAttachmentReadFailed'));
   }, []);
-
   const handleFilesAdd = useCallback(async (files: File[]) => {
     if (!attachmentSupported || files.length === 0) {
       return;
     }
-    const result = await uploadFilesAsNcpDraftAttachments(files, {
-      uploadBatch: uploadNcpAssets,
-    });
+    const result = await uploadFilesAsNcpDraftAttachments(files, { uploadBatch: uploadNcpAssets });
     if (result.attachments.length > 0) {
       const insertedAttachments = presenter.chatInputManager.addAttachments?.(result.attachments) ?? [];
       if (insertedAttachments.length > 0) {
         inputBarRef.current?.insertFileTokens(
-          insertedAttachments.map((attachment) => ({
-            tokenKey: attachment.id,
-            label: attachment.name
-          }))
+          insertedAttachments.map((attachment) => ({ tokenKey: attachment.id, label: attachment.name }))
         );
       }
     }
     if (result.rejected.length > 0) {
       showAttachmentError(result.rejected[0].reason);
     }
-  }, [attachmentSupported, presenter.chatInputManager, showAttachmentError]);
-
-  const toolbarSelects = [
+  }, [attachmentSupported, inputBarRef, presenter.chatInputManager, showAttachmentError]);
+  return {
+    handleFilesAdd,
+    handleFileInputChange: useCallback(async (event: ChangeEvent<HTMLInputElement>) => {
+      const files = Array.from(event.target.files ?? []);
+      event.currentTarget.value = '';
+      await handleFilesAdd(files);
+    }, [handleFilesAdd])
+  };
+}
+function buildToolbarSelects(params: { allModelsLabel: string; hasModelOptions: boolean; isModelOptionsLoading: boolean; modelRecords: ChatModelRecord[]; presenter: ChatPresenter; recentModelValues: string[]; recentModelsLabel: string; selectedModel: string; selectedThinkingLevel: ChatThinkingLevel | null; thinkingSupportedLevels: ChatThinkingLevel[]; thinkingDefaultLevel: ChatThinkingLevel | null; }) {
+  const { allModelsLabel, hasModelOptions, isModelOptionsLoading, modelRecords, presenter, recentModelValues, recentModelsLabel, selectedModel, selectedThinkingLevel, thinkingSupportedLevels, thinkingDefaultLevel } = params;
+  return [
     buildModelToolbarSelect({
       modelOptions: modelRecords,
       recentModelValues,
-      selectedModel: snapshot.selectedModel,
+      selectedModel,
       isModelOptionsLoading,
       hasModelOptions,
       onValueChange: presenter.chatInputManager.selectModel,
@@ -208,16 +171,18 @@ export function ChatInputBarContainer() {
     }),
     buildThinkingToolbarSelect({
       supportedLevels: thinkingSupportedLevels,
-      selectedThinkingLevel: snapshot.selectedThinkingLevel as ChatThinkingLevel | null,
-      defaultThinkingLevel: selectedModelThinkingCapability?.default ?? null,
+      selectedThinkingLevel,
+      defaultThinkingLevel: thinkingDefaultLevel,
       onValueChange: (value) => presenter.chatInputManager.selectThinkingLevel(value),
       texts: {
         thinkingLabels: buildThinkingLabels()
       }
     })
   ].filter((item): item is NonNullable<typeof item> => item !== null);
-
-  const skillPicker = buildSkillPickerModel({
+}
+function buildSkillPicker(params: { allSkillsLabel: string; presenter: ChatPresenter; recentSkillGroupValues: string[]; recentSkillValues: string[]; recentSkillsLabel: string; skillRecords: ChatSkillRecord[]; snapshot: ChatInputStoreSnapshot; }) {
+  const { allSkillsLabel, presenter, recentSkillGroupValues, recentSkillValues, recentSkillsLabel, skillRecords, snapshot } = params;
+  return buildSkillPickerModel({
     skillRecords,
     recentSkillValues,
     groupedRecentSkillValues: recentSkillGroupValues,
@@ -234,12 +199,56 @@ export function ChatInputBarContainer() {
       allSkillsLabel
     }
   });
-
-  const composerSelectedSkillCount = deriveSelectedSkillsFromComposer(snapshot.composerNodes).length;
-  const hasSendableDraft =
-    snapshot.draft.trim().length > 0 ||
-    snapshot.attachments.length > 0 ||
-    composerSelectedSkillCount > 0;
+}
+export function ChatInputBarContainer() {
+  const presenter = usePresenter();
+  const { language } = useI18n();
+  const snapshot = useChatInputStore((state) => state.snapshot);
+  const runtimeAvailability = useChatRuntimeAvailability();
+  const [slashQuery, setSlashQuery] = useState<string | null>(null);
+  const inputBarRef = useRef<ChatInputBarHandle | null>(null);
+  const fileInputRef = useRef<HTMLInputElement | null>(null);
+  const labels = useChatInputBarLabels(language);
+  const { skillRecords, modelRecords, recentModelValues, recentSkillValues, recentSkillGroupValues } = useChatInputBarCollections(snapshot, labels.skillScopeLabels);
+  const hasModelOptions = hasNcpChatModelOptions(snapshot);
+  const isModelOptionsLoading = isNcpChatModelOptionsLoading(snapshot);
+  const isModelOptionsEmpty = isNcpChatModelOptionsEmpty(snapshot);
+  const inputDisabled = isNcpChatComposerDisabled(snapshot);
+  const attachmentSupported = typeof presenter.chatInputManager.addAttachments === 'function';
+  const textareaPlaceholder = isModelOptionsEmpty ? t('chatModelNoOptions') : t('chatInputPlaceholder');
+  const slashItems = useMemo(
+    () => buildChatSlashItems(skillRecords, slashQuery ?? '', labels.slashTexts, recentSkillValues),
+    [labels.slashTexts, recentSkillValues, skillRecords, slashQuery]
+  );
+  const selectedModelOption = modelRecords.find((option) => option.value === snapshot.selectedModel);
+  const thinkingSupportedLevels = selectedModelOption?.thinkingCapability?.supported ?? [];
+  const resolvedStopHint = snapshot.stopDisabledReason === '__preparing__'
+    ? t('chatStopPreparing')
+    : snapshot.stopDisabledReason?.trim() || t('chatStopUnavailable');
+  const { handleFilesAdd, handleFileInputChange } = useChatInputBarAttachments({ attachmentSupported, inputBarRef, presenter });
+  const toolbarSelects = buildToolbarSelects({
+    allModelsLabel: labels.allModelsLabel,
+    hasModelOptions,
+    isModelOptionsLoading,
+    modelRecords,
+    presenter,
+    recentModelValues,
+    recentModelsLabel: labels.recentModelsLabel,
+    selectedModel: snapshot.selectedModel,
+    selectedThinkingLevel: snapshot.selectedThinkingLevel as ChatThinkingLevel | null,
+    thinkingSupportedLevels,
+    thinkingDefaultLevel: selectedModelOption?.thinkingCapability?.default ?? null
+  });
+  const skillPicker = buildSkillPicker({
+    allSkillsLabel: labels.allSkillsLabel,
+    presenter,
+    recentSkillGroupValues,
+    recentSkillValues,
+    recentSkillsLabel: labels.recentSkillsLabel,
+    skillRecords,
+    snapshot
+  });
+  const hasSendableDraft = snapshot.draft.trim().length > 0 || snapshot.attachments.length > 0 || deriveSelectedSkillsFromComposer(snapshot.composerNodes).length > 0;
 
   return (
     <>
@@ -256,7 +265,7 @@ export function ChatInputBarContainer() {
         slashMenu={{
           isLoading: snapshot.isSkillsLoading,
           items: slashItems,
-          onSelectItem: (item) => {
+          onSelectItem: (item: { value?: string }) => {
             if (item.value) {
               presenter.chatInputManager.rememberSkillSelection(item.value);
             }
@@ -284,7 +293,7 @@ export function ChatInputBarContainer() {
             {
               key: 'attach',
               label: t('chatInputAttach'),
-              icon: 'paperclip',
+              icon: 'paperclip' as const,
               iconOnly: true,
               disabled: !attachmentSupported || inputDisabled || snapshot.isSending,
               ...(attachmentSupported
@@ -298,10 +307,14 @@ export function ChatInputBarContainer() {
           ],
           skillPicker,
           actions: {
-            sendError: snapshot.sendError,
+            sendError: runtimeAvailability.isBlocked ? null : snapshot.sendError,
             isSending: snapshot.isSending,
             canStopGeneration: snapshot.canStopGeneration,
-            sendDisabled: !hasSendableDraft || !hasModelOptions || snapshot.sessionTypeUnavailable,
+            sendDisabled: isNcpChatSendDisabled({
+              snapshot,
+              hasSendableDraft,
+              isRuntimeBlocked: runtimeAvailability.isBlocked
+            }),
             stopDisabled: !snapshot.canStopGeneration,
             stopHint: resolvedStopHint,
             sendButtonLabel: t('chatSend'),
@@ -317,11 +330,7 @@ export function ChatInputBarContainer() {
           type="file"
           multiple
           className="hidden"
-          onChange={async (event) => {
-            const files = Array.from(event.target.files ?? []);
-            event.currentTarget.value = '';
-            await handleFilesAdd(files);
-          }}
+          onChange={handleFileInputChange}
         />
       ) : null}
     </>

package/src/{components/chat/containers → features/chat/components/conversation}/chat-message-list.container.test.tsx

@@ -15,11 +15,11 @@ vi.mock("@nextclaw/agent-chat-ui", () => ({
   },
 }));
 
-vi.mock("@/components/providers/I18nProvider", () => ({
+vi.mock("@/app/components/i18n-provider", () => ({
   useI18n: () => ({ language: captures.language }),
 }));
 
-vi.mock("@/lib/i18n", () => ({
+vi.mock("@/shared/lib/i18n", () => ({
   formatDateTime: (value: string) => `formatted:${value}`,
   t: (key: string) => key,
 }));

package/src/{components/chat/containers → features/chat/components/conversation}/chat-message-list.container.tsx

@@ -10,12 +10,12 @@ import {
   adaptChatMessage,
   type ChatMessageAdapterTexts,
   type ChatMessageSource,
-} from "@/components/chat/adapters/chat-message.adapter";
-import { readInlineTokensFromMetadata } from "@/components/chat/chat-inline-token.utils";
-import { adaptNcpMessageToUiMessage } from "@/components/chat/ncp/ncp-session-adapter";
-import { AgentIdentityAvatar } from "@/components/common/agent-identity";
-import { useI18n } from "@/components/providers/I18nProvider";
-import { formatDateTime, t } from "@/lib/i18n";
+} from "@/features/chat/utils/chat-message.utils";
+import { readInlineTokensFromMetadata } from "@/features/chat/utils/chat-inline-token.utils";
+import { adaptNcpMessageToUiMessage } from "@/features/chat/utils/ncp-session-adapter.utils";
+import { AgentIdentityAvatar } from "@/shared/components/common/agent-identity";
+import { useI18n } from "@/app/components/i18n-provider";
+import { formatDateTime, t } from "@/shared/lib/i18n";
 
 type ChatMessageListContainerProps = {
   messages: readonly NcpMessage[];