@nextclaw/ui 0.12.11 → 0.12.12

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

@@ -1,44 +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 {
-  hasNcpChatModelOptions,
-  isNcpChatComposerDisabled,
-  isNcpChatModelOptionsEmpty,
-  isNcpChatModelOptionsLoading,
-  isNcpChatSendDisabled,
-} from '@/components/chat/chat-input/ncp-chat-input-availability.utils';
-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 { 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 type { SessionSkillEntryView } from '@/api/types';
-import { t } from '@/lib/i18n';
+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'),
@@ -50,7 +27,6 @@ function buildThinkingLabels(): Record<ChatThinkingLevel, string> {
     xhigh: t('chatThinkingLevelXhigh')
   };
 }
-
 function toSkillRecords(
   snapshotRecords: SessionSkillEntryView[],
   scopeLabels: Record<SessionSkillEntryView['scope'], string>
@@ -64,7 +40,6 @@ function toSkillRecords(
     badgeLabel: scopeLabels[record.scope]
   }));
 }
-
 function toModelRecords(snapshotModels: Array<{
   value: string;
   modelLabel: string;
@@ -86,82 +61,58 @@ function toModelRecords(snapshotModels: Array<{
       : null
   }));
 }
-
-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);
-
+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(
-    () => {
-      void language;
-      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 = 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 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'));
@@ -175,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,
@@ -216,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,
@@ -242,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 (
     <>
@@ -264,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);
             }
@@ -292,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
@@ -312,7 +313,7 @@ export function ChatInputBarContainer() {
             sendDisabled: isNcpChatSendDisabled({
               snapshot,
               hasSendableDraft,
-              isRuntimeBlocked: runtimeAvailability.isBlocked,
+              isRuntimeBlocked: runtimeAvailability.isBlocked
             }),
             stopDisabled: !snapshot.canStopGeneration,
             stopHint: resolvedStopHint,
@@ -329,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[];

package/src/{components/chat → features/chat/components/conversation}/session-header/chat-session-header-actions.test.tsx

@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { ChatSessionHeaderActions } from '@/components/chat/session-header/chat-session-header-actions';
+import { ChatSessionHeaderActions } from './chat-session-header-actions';
 
 const mocks = vi.hoisted(() => ({
   updateSessionProject: vi.fn(),
@@ -9,11 +9,11 @@ const mocks = vi.hoisted(() => ({
   onOpenChildSessions: vi.fn(),
 }));
 
-vi.mock('@/components/chat/hooks/use-chat-session-project', () => ({
+vi.mock('@/features/chat/hooks/use-chat-session-project', () => ({
   useChatSessionProject: () => mocks.updateSessionProject,
 }));
 
-vi.mock('@/components/chat/session-header/chat-session-project-dialog', () => ({
+vi.mock('./chat-session-project-dialog', () => ({
   ChatSessionProjectDialog: () => null,
 }));
 

package/src/{components/chat → features/chat/components/conversation}/session-header/chat-session-header-actions.tsx

@@ -1,11 +1,11 @@
 import { useState } from 'react';
 import { FolderOpen, GitBranch, MoreHorizontal, Trash2 } from 'lucide-react';
-import { Button } from '@/components/ui/button';
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
-import { useChatSessionProject } from '@/components/chat/hooks/use-chat-session-project';
-import { ChatSessionHeaderMenuItem } from '@/components/chat/session-header/chat-session-header-menu-item';
-import { ChatSessionProjectDialog } from '@/components/chat/session-header/chat-session-project-dialog';
-import { t } from '@/lib/i18n';
+import { Button } from '@/shared/components/ui/button';
+import { Popover, PopoverContent, PopoverTrigger } from '@/shared/components/ui/popover';
+import { useChatSessionProject } from '@/features/chat/hooks/use-chat-session-project';
+import { ChatSessionHeaderMenuItem } from './chat-session-header-menu-item';
+import { ChatSessionProjectDialog } from './chat-session-project-dialog';
+import { t } from '@/shared/lib/i18n';
 
 type ChatSessionHeaderActionsProps = {
   sessionKey: string;

package/src/{components/chat → features/chat/components/conversation}/session-header/chat-session-header-menu-item.tsx

@@ -1,5 +1,5 @@
 import type { LucideIcon } from 'lucide-react';
-import { cn } from '@/lib/utils';
+import { cn } from '@/shared/lib/utils';
 
 type ChatSessionHeaderMenuItemProps = {
   icon: LucideIcon;

package/src/{components/chat → features/chat/components/conversation}/session-header/chat-session-project-badge.test.tsx

@@ -1,17 +1,17 @@
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { ChatSessionProjectBadge } from '@/components/chat/session-header/chat-session-project-badge';
+import { ChatSessionProjectBadge } from './chat-session-project-badge';
 
 const mocks = vi.hoisted(() => ({
   updateSessionProject: vi.fn(),
 }));
 
-vi.mock('@/components/chat/hooks/use-chat-session-project', () => ({
+vi.mock('@/features/chat/hooks/use-chat-session-project', () => ({
   useChatSessionProject: () => mocks.updateSessionProject,
 }));
 
-vi.mock('@/components/chat/session-header/chat-session-project-dialog', () => ({
+vi.mock('./chat-session-project-dialog', () => ({
   ChatSessionProjectDialog: () => null,
 }));
 

package/src/{components/chat → features/chat/components/conversation}/session-header/chat-session-project-badge.tsx

@@ -1,10 +1,10 @@
 import { useState } from 'react';
 import { ChevronDown, FolderOpen, FolderX, Pencil } from 'lucide-react';
-import { useChatSessionProject } from '@/components/chat/hooks/use-chat-session-project';
-import { ChatSessionHeaderMenuItem } from '@/components/chat/session-header/chat-session-header-menu-item';
-import { ChatSessionProjectDialog } from '@/components/chat/session-header/chat-session-project-dialog';
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
-import { t } from '@/lib/i18n';
+import { useChatSessionProject } from '@/features/chat/hooks/use-chat-session-project';
+import { ChatSessionHeaderMenuItem } from './chat-session-header-menu-item';
+import { ChatSessionProjectDialog } from './chat-session-project-dialog';
+import { Popover, PopoverContent, PopoverTrigger } from '@/shared/components/ui/popover';
+import { t } from '@/shared/lib/i18n';
 
 type ChatSessionProjectBadgeProps = {
   sessionKey: string;

package/src/{components/chat → features/chat/components/conversation}/session-header/chat-session-project-dialog.tsx

@@ -1,5 +1,5 @@
-import { ServerPathPickerDialog } from '@/components/path-picker/server-path-picker-dialog';
-import { t } from '@/lib/i18n';
+import { ServerPathPickerDialog } from '@/shared/components/path-picker/server-path-picker-dialog';
+import { t } from '@/shared/lib/i18n';
 
 type ChatSessionProjectDialogProps = {
   open: boolean;

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

@@ -0,0 +1,61 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { ChatPageLayout } from "@/features/chat/components/layout/chat-page-shell";
+
+const { useViewportLayoutMock } = vi.hoisted(() => ({
+  useViewportLayoutMock: vi.fn(() => ({
+    mode: "desktop" as "mobile" | "desktop",
+    isMobile: false,
+    isDesktop: true,
+  })),
+}));
+
+vi.mock("@/app/hooks/use-viewport-layout", () => ({
+  useViewportLayout: useViewportLayoutMock,
+}));
+
+vi.mock("@/features/chat/components/layout/chat-sidebar", () => ({
+  ChatSidebar: () => <div data-testid="desktop-chat-sidebar">Desktop Sidebar</div>,
+}));
+
+vi.mock("@/features/chat/components/conversation/chat-conversation-panel", () => ({
+  ChatConversationPanel: () => <div data-testid="chat-conversation-panel">Conversation</div>,
+}));
+
+vi.mock("@/platforms/mobile", () => ({
+  ChatMobileShell: () => <div data-testid="chat-mobile-shell">Mobile Chat Shell</div>,
+}));
+
+vi.mock("@/features/agents", () => ({
+  AgentsPage: () => <div>Agents</div>,
+}));
+
+vi.mock("@/shared/components/cron-config", () => ({
+  CronConfig: () => <div>Cron</div>,
+}));
+
+vi.mock("@/features/marketplace", () => ({
+  MarketplacePage: () => <div>Marketplace</div>,
+}));
+
+describe("ChatPageLayout", () => {
+  it("uses the dedicated mobile chat shell instead of the desktop split layout", () => {
+    useViewportLayoutMock.mockReturnValue({
+      mode: "mobile",
+      isMobile: true,
+      isDesktop: false,
+    });
+
+    render(
+      <ChatPageLayout
+        view="chat"
+        confirmDialog={<div data-testid="confirm-dialog">Confirm</div>}
+      />,
+    );
+
+    expect(screen.getByTestId("chat-mobile-shell")).toBeTruthy();
+    expect(screen.queryByTestId("desktop-chat-sidebar")).toBeNull();
+    expect(screen.queryByTestId("chat-conversation-panel")).toBeNull();
+    expect(screen.getByTestId("confirm-dialog")).toBeTruthy();
+  });
+});

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

@@ -1,17 +1,16 @@
 import { useEffect } from "react";
 import type { Dispatch, MutableRefObject, SetStateAction } from "react";
-import { ChatSidebar } from "@/components/chat/containers/chat-sidebar";
-import { ChatConversationPanel } from "@/components/chat/chat-conversation-panel";
-import { AgentsPage } from "@/components/agents/agents-page";
-import { CronConfig } from "@/components/config/CronConfig";
-import { MarketplacePage } from "@/components/marketplace/marketplace-page";
-
+import { ChatSidebar } from "@/features/chat/components/layout/chat-sidebar";
+import { ChatConversationPanel } from "@/features/chat/components/conversation/chat-conversation-panel";
+import { AgentsPage } from "@/features/agents";
+import { CronConfig } from "@/shared/components/cron-config";
+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";
-
 export type ChatPageProps = {
   view: MainPanelView;
 };
-
 type UseChatSessionSyncParams = {
   view: MainPanelView;
   routeSessionKey: string | null;
@@ -20,7 +19,6 @@ type UseChatSessionSyncParams = {
   selectedSessionKeyRef: MutableRefObject<string | null>;
   resetStreamState: () => void;
 };
-
 export function useChatSessionSync(params: UseChatSessionSyncParams): void {
   const {
     view,
@@ -57,43 +55,42 @@ export function useChatSessionSync(params: UseChatSessionSyncParams): void {
     selectedSessionKeyRef.current = selectedSessionKey;
   }, [selectedSessionKey, selectedSessionKeyRef]);
 }
-
 type ChatPageLayoutProps = {
   view: MainPanelView;
   confirmDialog: JSX.Element;
 };
-
 export function ChatPageLayout({ view, confirmDialog }: ChatPageLayoutProps) {
+  const { isMobile } = useViewportLayout();
+
   return (
     <div className="h-full flex">
-      <ChatSidebar />
+      {!isMobile ? <ChatSidebar /> : null}
 
       {view === "chat" ? (
-        <ChatConversationPanel />
+        isMobile ? <ChatMobileShell /> : <ChatConversationPanel />
       ) : (
         <section className="flex-1 min-h-0 overflow-hidden bg-gradient-to-b from-gray-50/60 to-white">
           {view === "cron" ? (
             <div className="h-full overflow-auto custom-scrollbar">
-              <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">
                 <CronConfig />
               </div>
             </div>
           ) : view === "agents" ? (
             <div className="h-full overflow-auto custom-scrollbar">
-              <div className="mx-auto w-full max-w-[min(1180px,100%)] px-6 py-5">
+              <div className="mx-auto w-full max-w-[min(1180px,100%)] px-4 py-4 sm:px-6 sm:py-5">
                 <AgentsPage />
               </div>
             </div>
           ) : (
             <div className="h-full overflow-hidden">
-              <div className="mx-auto flex h-full min-h-0 w-full max-w-[min(1120px,100%)] flex-col px-6 py-5">
+              <div className="mx-auto flex h-full min-h-0 w-full max-w-[min(1120px,100%)] flex-col px-4 py-4 sm:px-6 sm:py-5">
                 <MarketplacePage forcedType="skills" />
               </div>
             </div>
           )}
         </section>
       )}
-
       {confirmDialog}
     </div>
   );