@nextclaw/ui 0.15.10 → 0.15.11

package/src/features/channels/components/config/channel-form.tsx

@@ -4,6 +4,7 @@ import { eventKeys } from '@nextclaw/shared';
 import { BookOpen, ChevronDown } from 'lucide-react';
 import { toast } from 'sonner';
 import { LogoBadge } from '@/shared/components/common/logo-badge';
+import { NavigationLink } from '@/shared/components/actions/navigation-link';
 import { Button } from '@/shared/components/ui/button';
 import { FormActions } from '@/shared/components/ui/actions/form-actions';
 import { StatusDot } from '@/shared/components/status/status-dot';
@@ -136,26 +137,25 @@ function ChannelFormHeader({
   tutorialUrl?: string;
 }) {
   return (
-    <ConfigSplitPaneHeader className="px-6 py-5">
-      <div className="flex flex-wrap items-center justify-between gap-3">
-        <div className="min-w-0">
-          <div className="flex items-center gap-3">
+    <ConfigSplitPaneHeader className='px-5 py-4'>
+      <div className='flex flex-wrap items-center justify-between gap-3'>
+        <div className='min-w-0'>
+          <div className='flex items-center gap-3'>
             <LogoBadge
               name={channelName}
               src={getChannelLogo(channelName)}
-              className={cn('h-9 w-9 rounded-lg border', enabled ? 'border-primary/30 bg-white' : 'border-gray-200/70 bg-white')}
-              imgClassName="h-5 w-5 object-contain"
-              fallback={<span className="text-sm font-semibold uppercase text-gray-500">{channelName[0]}</span>}
+              className={cn('h-9 w-9 rounded-lg bg-background/80', enabled && 'ring-1 ring-primary/20')}
+              imgClassName='h-5 w-5 object-contain'
+              fallback={<span className='text-sm font-semibold uppercase text-muted-foreground'>{channelName[0]}</span>}
             />
-            <h3 className="truncate text-lg font-semibold text-gray-900 capitalize">{channelLabel}</h3>
+            <h3 className='truncate text-lg font-semibold text-foreground capitalize'>{channelLabel}</h3>
           </div>
-          <p className="mt-2 text-sm text-gray-500">{t('channelsFormDescription')}</p>
+          <p className='mt-2 text-sm text-muted-foreground'>{t('channelsFormDescription')}</p>
           {channelApplyStatus ? <p className={cn('mt-2 text-xs font-medium', channelApplyStatus.className)}>{channelApplyStatus.label}</p> : null}
           {tutorialUrl ? (
-            <a href={tutorialUrl} className="mt-2 inline-flex items-center gap-1.5 text-xs text-primary transition-colors hover:text-primary-hover">
-              <BookOpen className="h-3.5 w-3.5" />
+            <NavigationLink href={tutorialUrl} external icon={BookOpen} size='xs' className='mt-2'>
               {t('channelsGuideTitle')}
-            </a>
+            </NavigationLink>
           ) : null}
         </div>
         <StatusDot status={enabled ? 'active' : 'inactive'} label={enabled ? t('statusActive') : t('statusInactive')} />
@@ -212,15 +212,15 @@ function ChannelFormBlocks({
             return <div key={`${block.type}-${block.section}-${index}`}>{content}</div>;
           }
           return (
-            <details key={`${block.type}-${block.section}-${index}`} className="group rounded-2xl border border-gray-200/80 bg-white">
-              <summary className="flex cursor-pointer list-none items-center justify-between gap-3 px-5 py-4 text-sm font-medium text-gray-900">
+            <details key={`${block.type}-${block.section}-${index}`} className='group rounded-xl bg-muted/35'>
+              <summary className='flex cursor-pointer list-none items-center justify-between gap-3 px-4 py-3 text-sm font-medium text-foreground'>
                 <div>
                   <p>{block.collapsible.title}</p>
-                  {block.collapsible.description ? <p className="mt-1 text-xs font-normal text-gray-500">{block.collapsible.description}</p> : null}
+                  {block.collapsible.description ? <p className='mt-1 text-xs font-normal text-muted-foreground'>{block.collapsible.description}</p> : null}
                 </div>
-                <ChevronDown className="h-4 w-4 text-gray-400 transition-transform group-open:rotate-180" />
+                <ChevronDown className='h-4 w-4 text-muted-foreground transition-transform group-open:rotate-180' />
               </summary>
-              <div className="space-y-6 border-t border-gray-100 px-5 py-5">{content}</div>
+              <div className='space-y-5 border-t border-border/45 px-4 py-4'>{content}</div>
             </details>
           );
         }
@@ -240,7 +240,7 @@ function ChannelFormBlocks({
             key={`${block.type}-${block.sectionId}-${index}`}
             channelConfig={channelConfig}
             formData={formData}
-            channelName="weixin"
+            channelName='weixin'
             channelEnabled={enabled}
             disabled={disabled}
           />
@@ -347,8 +347,8 @@ function ChannelFormEditor({
         channelApplyStatus={channelApplyStatus}
       />
 
-      <form onSubmit={handleSubmit} className="flex min-h-0 flex-1 flex-col">
-        <ConfigSplitPaneBody className="space-y-6 px-6 py-5">
+      <form onSubmit={handleSubmit} className='flex min-h-0 flex-1 flex-col'>
+        <ConfigSplitPaneBody className='space-y-5 px-5 py-4'>
           <ChannelFormBlocks
             channelConfig={channelConfig}
             channelName={channelName}
@@ -365,15 +365,15 @@ function ChannelFormEditor({
         </ConfigSplitPaneBody>
 
         <ConfigSplitPaneFooter>
-          <FormActions align="between">
-            <div className="flex flex-wrap items-center gap-2">
+          <FormActions align='between'>
+            <div className='flex flex-wrap items-center gap-2'>
               {actions.filter((action) => action.trigger === 'manual').map((action) => (
-                <Button key={action.id} type="button" size="sm" onClick={() => void handleManualAction(action)} disabled={disabled} variant="secondary">
+                <Button key={action.id} type='button' size='sm' onClick={() => void handleManualAction(action)} disabled={disabled} variant='secondary'>
                   {runningActionId === action.id ? t('connecting') : action.title}
                 </Button>
               ))}
             </div>
-            <Button type="submit" size="sm" disabled={disabled}>
+            <Button type='submit' size='sm' disabled={disabled}>
               {updateChannel.isPending ? t('saving') : t('save')}
             </Button>
           </FormActions>
@@ -395,8 +395,8 @@ export function ChannelForm({ channelName }: ChannelFormProps) {
     return (
       <ConfigSplitEmptyPane>
         <div>
-          <h3 className="text-base font-semibold text-gray-900">{t('channelsSelectTitle')}</h3>
-          <p className="mt-2 text-sm text-gray-500">{t('channelsSelectDescription')}</p>
+          <h3 className='text-base font-semibold text-foreground'>{t('channelsSelectTitle')}</h3>
+          <p className='mt-2 text-sm text-muted-foreground'>{t('channelsSelectDescription')}</p>
         </div>
       </ConfigSplitEmptyPane>
     );

package/src/features/channels/components/config/weixin-channel-auth-section.tsx

@@ -1,8 +1,9 @@
 import { useEffect, useMemo, useState } from 'react';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { toDataURL } from 'qrcode';
-import { ExternalLink, Loader2, MessageCircleMore, QrCode } from 'lucide-react';
+import { Loader2, MessageCircleMore, QrCode } from 'lucide-react';
 import { toast } from 'sonner';
+import { NavigationLink } from '@/shared/components/actions/navigation-link';
 import { Button } from '@/shared/components/ui/button';
 import { Input } from '@/shared/components/ui/input';
 import { Label } from '@/shared/components/ui/label';
@@ -217,10 +218,9 @@ function QrAuthPanel({
             <p>{authMessage || activeSession.note || t(copy.scanPrompt)}</p>
             <p>{t('weixinAuthExpiresAt')}: {formatDateTime(activeSession.expiresAt)}</p>
           </div>
-          <a href={activeSession.qrCodeUrl} target="_blank" rel="noreferrer" className="inline-flex items-center gap-1.5 text-xs text-primary transition-colors hover:text-primary-hover">
-            <ExternalLink className="h-3.5 w-3.5" />
+          <NavigationLink href={activeSession.qrCodeUrl} external size="xs">
             {t('weixinAuthOpenQr')}
-          </a>
+          </NavigationLink>
         </div>
       ) : (
         <div className="flex min-h-[280px] flex-col items-center justify-center rounded-2xl bg-gray-50/80 px-6 text-center">
@@ -402,10 +402,9 @@ function ExistingFeishuAgentConnectPanel({
             <h4 className="text-base font-semibold text-gray-900">{t('feishuExistingAgentDescription')}</h4>
             <p className="mt-1 text-sm text-gray-600">{t('feishuExistingAgentHint')}</p>
           </div>
-          <a href={developerConsoleUrl} target="_blank" rel="noreferrer" className="inline-flex items-center gap-1.5 text-sm text-primary transition-colors hover:text-primary-hover">
-            <ExternalLink className="h-4 w-4" />
+          <NavigationLink href={developerConsoleUrl} external>
             {platform === 'lark' ? t('feishuExistingAgentOpenLarkList') : t('feishuExistingAgentOpenFeishuList')}
-          </a>
+          </NavigationLink>
         </div>
         <div className="w-full max-w-sm space-y-4">
           <div className="space-y-2">

package/src/features/channels/pages/__tests__/channels-list-page.test.tsx

@@ -219,13 +219,13 @@ describe('ChannelsList', () => {
 
     const scrollRegions = Array.from(container.querySelectorAll('div')).filter((node) => {
       const classTokens = node.className.split(/\s+/).filter(Boolean);
-      return classTokens.includes('xl:overflow-y-auto');
+      return classTokens.includes('md:overflow-y-auto');
     });
 
     expect(scrollRegions.length).toBeGreaterThanOrEqual(2);
     scrollRegions.forEach((region) => {
       const classTokens = region.className.split(/\s+/).filter(Boolean);
-      expect(classTokens).toContain('xl:overscroll-contain');
+      expect(classTokens).toContain('md:overscroll-contain');
       expect(classTokens).not.toContain('overflow-y-auto');
       expect(classTokens).not.toContain('overscroll-contain');
     });

package/src/features/channels/pages/channels-list-page.tsx

@@ -1,7 +1,7 @@
 import { useMemo, useState } from 'react';
 import { ExternalLink, MessageSquare, Search } from 'lucide-react';
 import { LogoBadge } from '@/shared/components/common/logo-badge';
-import { PageHeader, PageLayout } from '@/app/components/layout/page-layout';
+import { SettingsPage } from '@/shared/components/settings/settings-page';
 import { Input } from '@/shared/components/ui/input';
 import { StatusDot } from '@/shared/components/status/status-dot';
 import { Tabs, TabsList, TabsTrigger } from '@/shared/components/ui/tabs';
@@ -71,46 +71,47 @@ export function ChannelsList() {
         : filteredChannels[0]?.name ?? null;
 
   if (!config || !meta) {
-    return <div className="p-8 text-gray-400">{t('channelsLoading')}</div>;
+    return (
+      <SettingsPage title={t('channelsPageTitle')} description={t('channelsPageDescription')} layout='split'>
+        <div className='text-sm text-muted-foreground'>{t('channelsLoading')}</div>
+      </SettingsPage>
+    );
   }
 
   return (
-    <PageLayout className="pb-0 xl:flex xl:h-full xl:min-h-0 xl:flex-col">
-      <PageHeader title={t('channelsPageTitle')} description={t('channelsPageDescription')} />
+    <SettingsPage title={t('channelsPageTitle')} description={t('channelsPageDescription')} layout='split'>
       <ConfigSplitPage
-        className="xl:min-h-0"
-        mobileView={isMobile ? (resolvedSelectedChannel ? 'detail' : 'list') : undefined}
+        className='md:min-h-0'
+        compactView={selectedChannel ? 'detail' : 'list'}
         onMobileBack={() => setSelectedChannel(null)}
         mobileListLabel={t('channelsPageTitle')}
       >
         <ConfigSplitSidebar>
-          <ConfigSplitPaneHeader className="px-4 pt-4">
+          <ConfigSplitPaneHeader className='px-4 pt-4'>
             <Tabs value={activeTab} onValueChange={setActiveTab}>
-              <TabsList className="mb-0 h-auto gap-3 border-b-0 bg-transparent p-0">
-                <TabsTrigger value="enabled" className="gap-1.5 px-0 pb-3">
+              <TabsList className='mb-0 h-auto gap-3 border-b-0 bg-transparent p-0'>
+                <TabsTrigger value='enabled' className='gap-1.5 px-0 pb-3'>
                   {t('channelsTabEnabled')}
-                  <span className="text-[11px] font-medium text-gray-500">
+                  <span className='text-[11px] font-medium text-gray-500'>
                     {channels.filter((channel) => channelConfigs?.[channel.name]?.enabled).length}
                   </span>
                 </TabsTrigger>
-                <TabsTrigger value="all" className="gap-1.5 px-0 pb-3">
+                <TabsTrigger value='all' className='gap-1.5 px-0 pb-3'>
                   {t('channelsTabAll')}
-                  <span className="text-[11px] font-medium text-gray-500">
-                    {channels.length}
-                  </span>
+                  <span className='text-[11px] font-medium text-gray-500'>{channels.length}</span>
                 </TabsTrigger>
               </TabsList>
             </Tabs>
           </ConfigSplitPaneHeader>
 
-          <div className="border-b border-gray-100 px-4 py-3">
-            <div className="relative">
-              <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400" />
-              <Input value={query} onChange={(event) => setQuery(event.target.value)} placeholder={t('channelsFilterPlaceholder')} className="h-10 rounded-xl pl-9" />
+          <div className='border-b border-border/55 px-4 py-3'>
+            <div className='relative'>
+              <Search className='pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground/70' />
+              <Input value={query} onChange={(event) => setQuery(event.target.value)} placeholder={t('channelsFilterPlaceholder')} className='h-10 rounded-xl pl-9' />
             </div>
           </div>
 
-          <ConfigSplitPaneBody className="space-y-2 p-3">
+          <ConfigSplitPaneBody className='space-y-2 p-3'>
             {filteredChannels.map((channel) => {
               const enabled = Boolean(config.channels[channel.name]?.enabled);
               const tutorialUrl = resolveChannelTutorialUrl(channel);
@@ -118,32 +119,32 @@ export function ChannelsList() {
 
               return (
                 <ConfigSelectionCard key={channel.name} onClick={() => setSelectedChannel(channel.name)} active={resolvedSelectedChannel === channel.name}>
-                  <div className="flex items-start justify-between gap-3">
-                    <div className="flex min-w-0 items-center gap-3">
+                  <div className='flex items-start justify-between gap-3'>
+                    <div className='flex min-w-0 items-center gap-3'>
                       <LogoBadge
                         name={channel.name}
                         src={getChannelLogo(channel.name)}
-                        className={cn('h-10 w-10 rounded-lg border', enabled ? 'border-primary/30 bg-white' : 'border-gray-200/70 bg-white')}
-                        imgClassName="h-5 w-5 object-contain"
-                        fallback={<span className="text-sm font-semibold uppercase text-gray-500">{channel.name[0]}</span>}
+                        className={cn('h-10 w-10 rounded-lg bg-background/80', enabled && 'ring-1 ring-primary/20')}
+                        imgClassName='h-5 w-5 object-contain'
+                        fallback={<span className='text-sm font-semibold uppercase text-muted-foreground'>{channel.name[0]}</span>}
                       />
-                      <div className="min-w-0">
-                        <p className="truncate text-sm font-semibold text-gray-900">{channel.displayName || channel.name}</p>
-                        <p className="line-clamp-1 text-[11px] text-gray-500">{description}</p>
+                      <div className='min-w-0'>
+                        <p className='truncate text-sm font-semibold text-foreground'>{channel.displayName || channel.name}</p>
+                        <p className='line-clamp-1 text-[11px] text-muted-foreground'>{description}</p>
                       </div>
                     </div>
-                    <div className="flex items-center gap-2">
+                    <div className='flex items-center gap-2'>
                       {tutorialUrl ? (
                         <a
                           href={tutorialUrl}
                           onClick={(event) => event.stopPropagation()}
-                          className="inline-flex h-7 w-7 items-center justify-center rounded-md text-gray-300 transition-colors hover:bg-gray-100/70 hover:text-gray-500"
+                          className='inline-flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground/45 transition-colors hover:bg-muted hover:text-foreground'
                           title={t('channelsGuideTitle')}
                         >
-                          <ExternalLink className="h-3.5 w-3.5" />
+                          <ExternalLink className='h-3.5 w-3.5' />
                         </a>
                       ) : null}
-                      <StatusDot status={enabled ? 'active' : 'inactive'} label={enabled ? t('statusActive') : t('statusInactive')} className="min-w-[56px] justify-center" />
+                      <StatusDot status={enabled ? 'active' : 'inactive'} label={enabled ? t('statusActive') : t('statusInactive')} className='min-w-[56px] justify-center' />
                     </div>
                   </div>
                 </ConfigSelectionCard>
@@ -155,6 +156,6 @@ export function ChannelsList() {
 
         <ChannelForm channelName={resolvedSelectedChannel ?? undefined} />
       </ConfigSplitPage>
-    </PageLayout>
+    </SettingsPage>
   );
 }

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

@@ -1,4 +1,4 @@
-import { render, screen } from "@testing-library/react";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import type { NcpMessage } from "@nextclaw/ncp";
 import { beforeEach, expect, it, vi } from "vitest";
@@ -7,6 +7,7 @@ import { useChatMessageLayoutStore } from "@/features/chat/stores/chat-message-l
 
 const captures = vi.hoisted(() => ({
   isAtBottom: true,
+  messageListSessionKeys: [] as Array<string | null>,
   onScroll: vi.fn(),
   scrollToBottom: vi.fn(),
 }));
@@ -19,9 +20,19 @@ vi.mock("@nextclaw/agent-chat-ui", () => ({
   }),
 }));
 
-vi.mock("@/features/chat/features/message/components/chat-message-list.container", () => ({
-  ChatMessageListContainer: () => <div data-testid="chat-message-list" />,
-}));
+vi.mock(
+  "@/features/chat/features/message/components/chat-message-list.container",
+  () => ({
+    ChatMessageListContainer: ({
+      sessionKey,
+    }: {
+      sessionKey: string | null;
+    }) => {
+      captures.messageListSessionKeys.push(sessionKey);
+      return <div data-testid="chat-message-list" />;
+    },
+  }),
+);
 
 vi.mock("@/shared/lib/i18n", () => ({
   t: (key: string) => key,
@@ -38,16 +49,27 @@ const messages = [
   },
 ] as unknown as readonly NcpMessage[];
 
-function renderContent(options: { bottomSlot?: React.ReactNode } = {}) {
+function renderContent(
+  options: {
+    bottomSlot?: React.ReactNode;
+    hasPreviousMessages?: boolean;
+    historyError?: Error | null;
+    onLoadPreviousMessages?: () => Promise<void>;
+  } = {},
+) {
   return render(
     <ChatConversationContent
       bottomSlot={options.bottomSlot}
+      hasPreviousMessages={options.hasPreviousMessages ?? false}
+      historyError={options.historyError ?? null}
       isAwaitingAssistantOutput={false}
       isHistoryLoading={false}
+      isLoadingPreviousMessages={false}
       isSending={false}
       messages={messages}
       sessionKey="session-1"
       showWelcome={false}
+      onLoadPreviousMessages={options.onLoadPreviousMessages ?? vi.fn()}
     />,
   );
 }
@@ -55,6 +77,7 @@ function renderContent(options: { bottomSlot?: React.ReactNode } = {}) {
 beforeEach(() => {
   useChatMessageLayoutStore.getState().setLayout("card");
   captures.isAtBottom = true;
+  captures.messageListSessionKeys = [];
   captures.onScroll.mockReset();
   captures.scrollToBottom.mockReset();
 });
@@ -68,12 +91,15 @@ it("uses the centered reading track in flat message layout", () => {
     .getByTestId("chat-message-list")
     .closest('[data-chat-conversation-track="flat"]');
   expect(track?.className).toContain("max-w-[min(52rem,100%)]");
+  expect(captures.messageListSessionKeys).toEqual(["session-1"]);
 });
 
 it("hides the scroll-to-bottom action while the conversation is already at the bottom", () => {
   renderContent();
 
-  expect(screen.queryByRole("button", { name: "chatScrollToBottom" })).toBeNull();
+  expect(
+    screen.queryByRole("button", { name: "chatScrollToBottom" }),
+  ).toBeNull();
 });
 
 it("scrolls to the latest message when the user clicks the floating action", async () => {
@@ -94,6 +120,41 @@ it("renders bottom slot after the message list", () => {
   const messageList = screen.getByTestId("chat-message-list");
   const bottomSlot = screen.getByTestId("conversation-bottom-slot");
   expect(
-    messageList.compareDocumentPosition(bottomSlot) & Node.DOCUMENT_POSITION_FOLLOWING,
+    messageList.compareDocumentPosition(bottomSlot) &
+      Node.DOCUMENT_POSITION_FOLLOWING,
   ).toBeTruthy();
 });
+
+it("loads older messages when the reader approaches the top", async () => {
+  const onLoadPreviousMessages = vi.fn().mockResolvedValue(undefined);
+  renderContent({ hasPreviousMessages: true, onLoadPreviousMessages });
+  const scrollContainer = document.querySelector<HTMLElement>(
+    '[data-chat-scroll-container="true"]',
+  );
+  if (!scrollContainer) {
+    throw new Error("Expected chat scroll container");
+  }
+  scrollContainer.scrollTop = 200;
+
+  fireEvent.scroll(scrollContainer);
+
+  await waitFor(() => expect(onLoadPreviousMessages).toHaveBeenCalledOnce());
+  expect(captures.onScroll).toHaveBeenCalledOnce();
+});
+
+it("shows a retry action when loading earlier messages fails", async () => {
+  const user = userEvent.setup();
+  const onLoadPreviousMessages = vi.fn().mockResolvedValue(undefined);
+  renderContent({
+    hasPreviousMessages: true,
+    historyError: new Error("network unavailable"),
+    onLoadPreviousMessages,
+  });
+
+  expect(screen.getByRole("alert").textContent).toContain(
+    "chatHistoryLoadFailed",
+  );
+  await user.click(screen.getByRole("button", { name: "chatHistoryRetry" }));
+
+  expect(onLoadPreviousMessages).toHaveBeenCalledOnce();
+});

package/src/features/chat/components/conversation/__tests__/chat-conversation-header-section.test.tsx

@@ -13,6 +13,7 @@ import type { NcpSessionSummaryView, SessionEntryView } from "@/shared/lib/api";
 
 const mocks = vi.hoisted(() => ({
   deleteSession: vi.fn(),
+  createSession: vi.fn(),
   toggleWorkspacePanel: vi.fn(),
   selectSession: vi.fn(),
   setListMode: vi.fn(),
@@ -28,6 +29,7 @@ vi.mock("@/features/chat/components/providers/chat-presenter.provider", () => ({
       toggleWorkspacePanel: mocks.toggleWorkspacePanel,
     },
     chatSessionListManager: {
+      createSession: mocks.createSession,
       selectSession: mocks.selectSession,
       setListMode: mocks.setListMode,
       toggleProjectCollapsed: mocks.toggleProjectCollapsed,
@@ -35,6 +37,15 @@ vi.mock("@/features/chat/components/providers/chat-presenter.provider", () => ({
   }),
 }));
 
+vi.mock("@/features/chat/features/session-type/hooks/use-chat-new-session-type-preference", () => ({
+  useChatNewSessionTypePreference: () => ({
+    selectedSessionType: "codex",
+    selectedSessionTypeOption: null,
+    isLoading: false,
+    setSelectedSessionType: vi.fn(),
+  }),
+}));
+
 vi.mock("@/features/chat/features/ncp/hooks/use-ncp-session-list-view", () => ({
   useNcpSessionListView: (params?: { query?: string | null }) => {
     const query = params?.query?.trim().toLowerCase() ?? "";
@@ -122,6 +133,7 @@ function renderHeaderSection(layoutMode: "desktop" | "mobile" = "desktop") {
 describe("ChatConversationHeaderSection", () => {
   beforeEach(() => {
     mocks.deleteSession.mockReset();
+    mocks.createSession.mockReset();
     mocks.toggleWorkspacePanel.mockReset();
     mocks.selectSession.mockReset();
     mocks.setListMode.mockReset();
@@ -261,6 +273,21 @@ describe("ChatConversationHeaderSection", () => {
     expect(mocks.selectSession).toHaveBeenCalledWith("session:ncp-2");
   });
 
+  it("starts a new preferred session from the mobile conversation header", async () => {
+    const user = userEvent.setup();
+
+    renderHeaderSection("mobile");
+    await user.click(screen.getByRole("button", { name: "New Task" }));
+
+    expect(mocks.createSession).toHaveBeenCalledWith("codex");
+  });
+
+  it("keeps the new-session shortcut mobile-only", () => {
+    renderHeaderSection();
+
+    expect(screen.queryByRole("button", { name: "New Task" })).toBeNull();
+  });
+
   it("uses lightweight static groups for pinned and activity dates", async () => {
     const user = userEvent.setup();
     viewportLayoutManager.setSidebarCollapsed(true);

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

@@ -22,10 +22,6 @@ function createPersistStorage() {
   };
 }
 
-vi.mock("@/features/chat/features/ncp/hooks/use-ncp-chat-derived-state", () => ({
-  useNcpChatProviderStateResolved: () => true,
-}));
-
 vi.mock("@/features/chat/components/providers/chat-presenter.provider", () => ({
   usePresenter: () => ({
     chatUiManager: {
@@ -43,10 +39,6 @@ vi.mock("@/features/chat/components/conversation/chat-conversation-header-sectio
   ChatConversationHeaderSection: () => <div data-testid="chat-header" />,
 }));
 
-vi.mock("@/features/chat/components/conversation/chat-conversation-skeleton", () => ({
-  ChatConversationSkeleton: () => <div data-testid="chat-skeleton" />,
-}));
-
 vi.mock("@/features/chat/components/conversation/chat-conversation-workspace-section", () => ({
   ChatConversationWorkspaceSection: ({ sessionKey }: { sessionKey: string | null }) => (
     <div data-testid="workspace-section" data-session-key={sessionKey ?? ""} />