@nextclaw/ui 0.12.10 → 0.12.12

package/src/features/chat/components/chat-sidebar-list-mode-switch.tsx

@@ -0,0 +1,28 @@
+import { t } from '@/shared/lib/i18n';
+import { cn } from '@/shared/lib/utils';
+
+type ChatSidebarListModeSwitchProps = { isProjectFirstView: boolean; onSelectMode: (mode: 'time-first' | 'project-first') => void };
+
+export function ChatSidebarListModeSwitch({ isProjectFirstView, onSelectMode }: ChatSidebarListModeSwitchProps) {
+  return (
+    <div className="flex items-center gap-1.5 text-[11px]">
+      <button
+        type="button"
+        aria-pressed={!isProjectFirstView}
+        onClick={() => onSelectMode('time-first')}
+        className={cn('transition-colors', isProjectFirstView ? 'text-gray-400 hover:text-gray-600' : 'font-medium text-gray-600')}
+      >
+        {t('chatSidebarViewTime')}
+      </button>
+      <span className="text-gray-300">/</span>
+      <button
+        type="button"
+        aria-pressed={isProjectFirstView}
+        onClick={() => onSelectMode('project-first')}
+        className={cn('transition-colors', isProjectFirstView ? 'font-medium text-gray-600' : 'text-gray-400 hover:text-gray-600')}
+      >
+        {t('chatSidebarViewProject')}
+      </button>
+    </div>
+  );
+}

package/src/{components/chat → features/chat/components}/chat-sidebar-project-groups.tsx

@@ -1,11 +1,11 @@
 import { useMemo, useState, type ReactNode } from 'react';
 import { Plus } from 'lucide-react';
-import { Button } from '@/components/ui/button';
-import { ChatSessionTypeOptionItem } from '@/components/chat/chat-session-type-option-item';
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
-import type { ChatInputSnapshot } from '@/components/chat/stores/chat-input.store';
-import type { NcpSessionListItemView } from '@/components/chat/ncp/use-ncp-session-list-view';
-import { t } from '@/lib/i18n';
+import { Button } from '@/shared/components/ui/button';
+import { ChatSessionTypeOptionItem } from "./chat-session-type-option-item";
+import { Popover, PopoverContent, PopoverTrigger } from '@/shared/components/ui/popover';
+import type { ChatInputSnapshot } from '@/features/chat/stores/chat-input.store';
+import type { NcpSessionListItemView } from '@/features/chat/hooks/use-ncp-session-list-view';
+import { t } from '@/shared/lib/i18n';
 
 export type ChatSidebarProjectGroup = {
   projectRoot: string;

package/src/{components/chat → features/chat/components}/chat-sidebar-session-item.tsx

@@ -1,13 +1,13 @@
-import type { SessionEntryView } from '@/api/types';
-import { AgentAvatar } from '@/components/common/AgentAvatar';
-import { SessionContextIconNode } from '@/components/common/session-context-icon';
-import { SessionRunBadge } from '@/components/common/SessionRunBadge';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { type SessionContextView } from '@/lib/session-context.utils';
-import type { SessionRunStatus } from '@/lib/session-run-status';
-import { cn } from '@/lib/utils';
-import { formatDateTime, t } from '@/lib/i18n';
+import type { SessionEntryView } from '@/shared/lib/api';
+import { AgentAvatar } from '@/shared/components/common/agent-avatar';
+import { SessionContextIconNode } from '@/features/chat/components/session/session-context-icon';
+import { SessionRunBadge } from '@/features/chat/components/session/session-run-badge';
+import { Button } from '@/shared/components/ui/button';
+import { Input } from '@/shared/components/ui/input';
+import { type SessionContextView } from '@/features/chat/utils/session-context.utils';
+import type { SessionRunStatus } from '@/features/chat/types/session-run-status.types';
+import { cn } from '@/shared/lib/utils';
+import { formatDateTime, t } from '@/shared/lib/i18n';
 import { Check, GitBranch, Pencil, X } from 'lucide-react';
 
 type ChatSidebarSessionItemProps = {

package/src/{components/chat/ChatWelcome.test.tsx → features/chat/components/chat-welcome.test.tsx}

@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import { fireEvent } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
-import { ChatWelcome } from '@/components/chat/ChatWelcome';
+import { ChatWelcome } from './chat-welcome';
 
 describe('ChatWelcome', () => {
   it('renders a lightweight draft agent select and allows switching', () => {

package/src/{components/chat/ChatWelcome.tsx → features/chat/components/chat-welcome.tsx}

@@ -1,15 +1,10 @@
-import type { AgentProfileView } from '@/api/types';
-import { AgentAvatar } from '@/components/common/AgentAvatar';
-import { Select, SelectContent, SelectItem, SelectTrigger } from '@/components/ui/select';
-import { t } from '@/lib/i18n';
+import type { AgentProfileView } from '@/shared/lib/api';
+import { AgentAvatar } from '@/shared/components/common/agent-avatar';
+import { Select, SelectContent, SelectItem, SelectTrigger } from '@/shared/components/ui/select';
+import { t } from '@/shared/lib/i18n';
 import { Bot, BrainCircuit, AlarmClock, MessageCircle } from 'lucide-react';
 
-type ChatWelcomeProps = {
-  onCreateSession: () => void;
-  agents: AgentProfileView[];
-  selectedAgentId: string;
-  onSelectAgent: (agentId: string) => void;
-};
+type ChatWelcomeProps = { onCreateSession: () => void; agents: AgentProfileView[]; selectedAgentId: string; onSelectAgent: (agentId: string) => void };
 
 const capabilities = [
   {

package/src/features/chat/components/config/sessions-config-detail-pane.tsx

@@ -0,0 +1,244 @@
+import { useState } from 'react';
+import type { NcpMessageView, NcpSessionSummaryView, SessionEntryView } from '@/shared/lib/api';
+import { useConfirmDialog } from '@/shared/hooks/use-confirm-dialog';
+import { useDeleteNcpSession, useNcpSessionMessages, useUpdateNcpSession } from '@/shared/hooks/use-config';
+import { Button } from '@/shared/components/ui/button';
+import { Input } from '@/shared/components/ui/input';
+import { SessionRunBadge } from '@/features/chat/components/session/session-run-badge';
+import { cn } from '@/shared/lib/utils';
+import { formatDateTime, t } from '@/shared/lib/i18n';
+import { Bot, Hash, Inbox, MessageCircle, RefreshCw, Settings as SettingsIcon, User } from 'lucide-react';
+function normalizeNcpRole(role: NcpMessageView['role']): 'user' | 'assistant' | 'system' | 'tool' {
+  if (role === 'service') {
+    return 'system';
+  }
+  if (role === 'tool') {
+    return 'tool';
+  }
+  return role;
+}
+function extractNcpMessageText(message: NcpMessageView): string {
+  const parts: string[] = [];
+  for (const part of message.parts) {
+    if (part.type === 'text' || part.type === 'rich-text' || part.type === 'reasoning') {
+      parts.push(part.text);
+      continue;
+    }
+    if (part.type !== 'tool-invocation') {
+      continue;
+    }
+    const prefix = part.toolName?.trim() ? `[${part.toolName.trim()}]` : '[tool]';
+    if (part.state === 'result' && typeof part.result === 'string' && part.result.trim()) {
+      parts.push(`${prefix} ${part.result.trim()}`);
+      continue;
+    }
+    parts.push(prefix);
+  }
+  return parts.join('\n').trim();
+}
+function SessionMessageBubble({ message }: { message: NcpMessageView }) {
+  const role = normalizeNcpRole(message.role);
+  const isUser = role === 'user';
+  const content = extractNcpMessageText(message);
+  return (
+    <div className={cn('flex w-full mb-6', isUser ? 'justify-end' : 'justify-start')}>
+      <div
+        className={cn(
+          'max-w-[85%] rounded-[1.25rem] p-5 flex gap-3 text-sm',
+          isUser ? 'bg-primary text-white rounded-tr-sm' : 'bg-gray-50 text-gray-800 rounded-tl-sm border border-gray-100/50'
+        )}
+      >
+        <div className="shrink-0 pt-0.5">
+          {isUser ? <User className="w-4 h-4 text-primary-100" /> : <Bot className="w-4 h-4 text-gray-400" />}
+        </div>
+        <div className="flex-1 space-y-1 overflow-x-hidden">
+          <div className="flex items-baseline justify-between gap-4 mb-2">
+            <span className={cn('font-semibold text-xs capitalize', isUser ? 'text-primary-50' : 'text-gray-900')}>
+              {role}
+            </span>
+            <span className={cn('text-[10px]', isUser ? 'text-primary-200' : 'text-gray-400')}>
+              {formatDateTime(message.timestamp)}
+            </span>
+          </div>
+          <div className="whitespace-pre-wrap break-words leading-relaxed text-[15px]">{content || '-'}</div>
+        </div>
+      </div>
+    </div>
+  );
+}
+function SessionMetadataEditor(props: {
+  session: SessionEntryView;
+  isPending: boolean;
+  onSave: (data: { label: string; preferredModel: string }) => void;
+}) {
+  const [isEditingMeta, setIsEditingMeta] = useState(false);
+  const [draftLabel, setDraftLabel] = useState(props.session.label || '');
+  const [draftModel, setDraftModel] = useState(props.session.preferredModel || '');
+  const handleSave = () => {
+    props.onSave({ label: draftLabel, preferredModel: draftModel });
+    setIsEditingMeta(false);
+  };
+  return (
+    <>
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={() => setIsEditingMeta((value) => !value)}
+        className={cn(
+          'h-8.5 rounded-lg shadow-none border-gray-200 transition-all text-xs font-semibold',
+          isEditingMeta ? 'bg-gray-100 text-gray-900' : 'hover:bg-gray-50 hover:text-gray-900'
+        )}
+      >
+        <SettingsIcon className="w-3.5 h-3.5 mr-1.5" />
+        {t('sessionsMetadata')}
+      </Button>
+      {isEditingMeta ? (
+        <div className="flex items-center gap-3 bg-gray-50/50 p-3 rounded-lg border border-gray-100 animate-slide-in">
+          <Input
+            placeholder={t('sessionsLabelPlaceholder')}
+            value={draftLabel}
+            onChange={(event) => setDraftLabel(event.target.value)}
+            className="h-8 text-sm bg-white"
+          />
+          <Input
+            placeholder={t('sessionsModelPlaceholder')}
+            value={draftModel}
+            onChange={(event) => setDraftModel(event.target.value)}
+            className="h-8 text-sm bg-white"
+          />
+          <Button size="sm" onClick={handleSave} className="h-8 px-4 shrink-0 shadow-none" disabled={props.isPending}>
+            {t('sessionsSaveMeta')}
+          </Button>
+        </div>
+      ) : null}
+    </>
+  );
+}
+function SessionEmptyState() {
+  return (
+    <div className="flex-1 flex flex-col items-center justify-center text-gray-400 p-8 h-full bg-white">
+      <div className="w-20 h-20 bg-gray-50 rounded-3xl flex items-center justify-center mb-6 border border-gray-100 shadow-[0_2px_8px_-2px_rgba(0,0,0,0.02)] rotate-3">
+        <Inbox className="h-8 w-8 text-gray-300 -rotate-3" />
+      </div>
+      <h3 className="text-lg font-bold text-gray-900 mb-2">{t('sessionsNoSelectionTitle')}</h3>
+      <p className="text-sm text-center max-w-sm leading-relaxed">{t('sessionsNoSelectionDescription')}</p>
+    </div>
+  );
+}
+export function SessionsConfigDetailPane(props: {
+  sessionKey: string | null;
+  session: SessionEntryView | null;
+  summary: NcpSessionSummaryView | null;
+  channelLabel: string | null;
+  onClearSelection: () => void;
+}) {
+  const historyQuery = useNcpSessionMessages(props.sessionKey, 300);
+  const updateSession = useUpdateNcpSession();
+  const deleteSession = useDeleteNcpSession();
+  const { confirm, ConfirmDialog } = useConfirmDialog();
+  const handleSaveMeta = (data: { label: string; preferredModel: string }) => {
+    if (!props.sessionKey) {
+      return;
+    }
+    updateSession.mutate({
+      sessionId: props.sessionKey,
+      data: {
+        label: data.label.trim() || null,
+        preferredModel: data.preferredModel.trim() || null
+      }
+    });
+  };
+  const handleDeleteSession = async () => {
+    if (!props.sessionKey) {
+      return;
+    }
+    const confirmed = await confirm({
+      title: t('sessionsDeleteConfirm') + '?',
+      variant: 'destructive',
+      confirmLabel: t('sessionsDeleteConfirm')
+    });
+    if (!confirmed) {
+      return;
+    }
+    deleteSession.mutate({ sessionId: props.sessionKey }, { onSuccess: () => props.onClearSelection() });
+  };
+  return (
+    <div className="flex-1 min-w-0 flex flex-col overflow-hidden relative bg-white rounded-2xl shadow-sm border border-gray-200">
+      {(updateSession.isPending || deleteSession.isPending) ? (
+        <div className="absolute top-0 left-0 w-full h-1 bg-primary/20 overflow-hidden z-20">
+          <div className="h-full bg-primary animate-pulse w-1/3 rounded-r-full" />
+        </div>
+      ) : null}
+      {props.sessionKey && props.session && props.summary && props.channelLabel ? (
+        <>
+          <div className="shrink-0 border-b border-gray-100 bg-white px-4 py-4 z-10 space-y-4 sm:px-8 sm:py-5">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-4">
+                <div className="h-12 w-12 rounded-[14px] bg-gray-50 border border-gray-100 flex items-center justify-center text-gray-400 shrink-0">
+                  <Hash className="h-6 w-6" />
+                </div>
+                <div>
+                  <div className="flex items-center gap-2.5 mb-1.5">
+                    <h3 className="text-lg font-bold text-gray-900 tracking-tight">{props.session.label?.trim() || props.session.key.split(':').pop() || props.session.key}</h3>
+                    <span className="text-[10px] font-bold px-2 py-0.5 rounded-full bg-gray-100 text-gray-500 uppercase tracking-widest">
+                      {props.channelLabel}
+                    </span>
+                    {props.summary.status === 'running' ? <SessionRunBadge status="running" className="h-4 w-4" /> : null}
+                  </div>
+                  <div className="text-xs text-gray-500 font-mono break-all line-clamp-1 opacity-70" title={props.sessionKey}>
+                    {props.sessionKey}
+                  </div>
+                </div>
+              </div>
+              <div className="flex items-center gap-2 shrink-0">
+                <SessionMetadataEditor
+                  key={props.session.key}
+                  session={props.session}
+                  isPending={updateSession.isPending}
+                  onSave={handleSaveMeta}
+                />
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={handleDeleteSession}
+                  className="h-8.5 rounded-lg shadow-none hover:bg-red-50 hover:text-red-600 hover:border-red-200 border-gray-200 text-xs font-semibold text-red-500"
+                >
+                  {t('delete')}
+                </Button>
+              </div>
+            </div>
+          </div>
+          <div className="flex-1 overflow-y-auto p-4 relative [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:bg-gray-300/80 [&::-webkit-scrollbar-thumb]:rounded-full sm:p-6">
+            {historyQuery.isLoading ? (
+              <div className="absolute inset-0 flex items-center justify-center bg-gray-50/50 backdrop-blur-sm z-10">
+                <div className="flex flex-col items-center gap-3 animate-pulse">
+                  <RefreshCw className="w-6 h-6 text-primary animate-spin" />
+                  <span className="text-sm font-medium text-gray-500">{t('sessionsHistoryLoading')}</span>
+                </div>
+              </div>
+            ) : null}
+            {historyQuery.error ? (
+              <div className="text-center p-6 bg-red-50 rounded-xl text-red-600 border border-red-100 text-sm">
+                {(historyQuery.error as Error).message}
+              </div>
+            ) : null}
+            {!historyQuery.isLoading && historyQuery.data?.messages.length === 0 ? (
+              <div className="h-full flex flex-col items-center justify-center text-gray-400">
+                <MessageCircle className="w-12 h-12 mb-3 text-gray-300" />
+                <p className="text-sm">{t('sessionsEmpty')}</p>
+              </div>
+            ) : null}
+            <div className="max-w-3xl mx-auto">
+              {(historyQuery.data?.messages ?? []).map((message) => (
+                <SessionMessageBubble key={message.id} message={message} />
+              ))}
+            </div>
+          </div>
+        </>
+      ) : (
+        <SessionEmptyState />
+      )}
+      <ConfirmDialog />
+    </div>
+  );
+}

package/src/{components/chat → features/chat/components/conversation}/chat-attachment-upload-limit.test.ts

@@ -1,8 +1,5 @@
+import { DEFAULT_NCP_ATTACHMENT_MAX_BYTES, uploadFilesAsNcpDraftAttachments } from '@nextclaw/ncp-react';
 import { describe, expect, it, vi } from 'vitest';
-import {
-  DEFAULT_NCP_ATTACHMENT_MAX_BYTES,
-  uploadFilesAsNcpDraftAttachments
-} from '../../../../ncp-packages/nextclaw-ncp-react/src/attachments/ncp-attachments.ts';
 
 describe('ncp attachment upload limit', () => {
   it('accepts files larger than the previous 10MB cap', async () => {

package/src/features/chat/components/conversation/chat-conversation-header.tsx

@@ -0,0 +1,146 @@
+import type { ComponentProps } from "react";
+import { ArrowLeft } from "lucide-react";
+import { AgentAvatar } from "@/shared/components/common/agent-avatar";
+import { SessionContextIconNode } from "@/features/chat/components/session/session-context-icon";
+import { ChatSessionHeaderActions } from "@/features/chat/components/conversation/session-header/chat-session-header-actions";
+import { ChatSessionProjectBadge } from "@/features/chat/components/conversation/session-header/chat-session-project-badge";
+import type { useChatThreadStore } from "@/features/chat/stores/chat-thread.store";
+import { t } from "@/shared/lib/i18n";
+import { cn } from "@/shared/lib/utils";
+
+type ChatThreadSnapshot = ReturnType<typeof useChatThreadStore.getState>["snapshot"];
+type ChatHeaderDeleteHandler = ComponentProps<
+  typeof ChatSessionHeaderActions
+>["onDeleteSession"];
+
+export function ChatParentSessionBanner({
+  parentSessionLabel,
+  onGoToParentSession,
+}: {
+  parentSessionLabel: string | null;
+  onGoToParentSession: () => void;
+}) {
+  if (!parentSessionLabel) {
+    return null;
+  }
+  const trimmedLabel = parentSessionLabel.trim();
+  return (
+    <div className="border-b border-gray-200/60 bg-white/75 px-4 py-2 backdrop-blur-sm sm:px-5">
+      <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>
+  );
+}
+
+export function ChatConversationHeader({
+  snapshot,
+  childSessionCount,
+  layoutMode,
+  normalizedAgentId,
+  sessionHeaderTitle,
+  shouldShowHeaderAgentAvatar,
+  shouldShowSessionHeader,
+  onBackToList,
+  onOpenChildSessions,
+  onDeleteSession,
+}: {
+  snapshot: ChatThreadSnapshot;
+  childSessionCount: number;
+  layoutMode: "desktop" | "mobile";
+  normalizedAgentId: string;
+  sessionHeaderTitle: string;
+  shouldShowHeaderAgentAvatar: boolean;
+  shouldShowSessionHeader: boolean;
+  onBackToList?: () => void;
+  onOpenChildSessions: () => void;
+  onDeleteSession: ChatHeaderDeleteHandler;
+}) {
+  const isMobileLayout = layoutMode === "mobile";
+
+  return (
+    <div
+      className={cn(
+        "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",
+        isMobileLayout ? "px-3 sm:px-3" : "px-4 sm:px-5",
+        shouldShowSessionHeader ? "opacity-100" : "h-0 py-0 opacity-0 border-b-0",
+        shouldShowSessionHeader && (isMobileLayout ? "pb-2 pt-2" : "py-3"),
+      )}
+      style={
+        isMobileLayout && shouldShowSessionHeader
+          ? { paddingTop: "calc(env(safe-area-inset-top, 0px) + 0.5rem)" }
+          : undefined
+      }
+    >
+      <div className="min-w-0 flex-1 flex items-center gap-2">
+        {isMobileLayout && onBackToList ? (
+          <button
+            type="button"
+            onClick={onBackToList}
+            className="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900"
+            aria-label={t("chat")}
+          >
+            <ArrowLeft className="h-4 w-4" />
+          </button>
+        ) : null}
+        {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>
+  );
+}

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

@@ -1,12 +1,12 @@
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { beforeEach, describe, expect, it, vi } from "vitest";
-import { ChatConversationPanel } from "@/components/chat/chat-conversation-panel";
-import { ChatSessionWorkspacePanel } from "@/components/chat/chat-session-workspace-panel";
-import type { ResolvedChildSessionTab } from "@/components/chat/ncp/session-conversation/use-ncp-child-session-tabs-view";
-import { useChatInputStore } from "@/components/chat/stores/chat-input.store";
-import { useChatSessionListStore } from "@/components/chat/stores/chat-session-list.store";
-import { useChatThreadStore } from "@/components/chat/stores/chat-thread.store";
+import { ChatConversationPanel } from "@/features/chat/components/conversation/chat-conversation-panel";
+import { ChatSessionWorkspacePanel } from "@/features/chat";
+import type { ResolvedChildSessionTab } from "@/features/chat/hooks/use-ncp-child-session-tabs-view";
+import { useChatInputStore } from "@/features/chat/stores/chat-input.store";
+import { useChatSessionListStore } from "@/features/chat/stores/chat-session-list.store";
+import { useChatThreadStore } from "@/features/chat/stores/chat-thread.store";
 
 const mocks = vi.hoisted(() => ({
   deleteSession: vi.fn(),
@@ -42,16 +42,15 @@ vi.mock("@nextclaw/agent-chat-ui", async (importOriginal) => {
   };
 });
 
-vi.mock("@/components/chat/nextclaw", () => ({
+vi.mock("@/features/chat/components/conversation/chat-input-bar.container", () => ({
   ChatInputBarContainer: () => <div data-testid="chat-input-bar" />,
-  ChatMessageListContainer: () => <div data-testid="chat-message-list" />,
 }));
 
-vi.mock("@/components/chat/containers/chat-message-list.container", () => ({
-  ChatMessageListContainer: () => <div data-testid="child-chat-message-list" />,
+vi.mock("@/features/chat/components/conversation/chat-message-list.container", () => ({
+  ChatMessageListContainer: () => <div data-testid="chat-message-list" />,
 }));
 
-vi.mock("@/components/chat/chat-session-workspace-file-preview", () => ({
+vi.mock("@/features/chat/components/chat-session-workspace-file-preview", () => ({
   ChatSessionWorkspaceFilePreview: ({
     file,
   }: {
@@ -59,7 +58,7 @@ vi.mock("@/components/chat/chat-session-workspace-file-preview", () => ({
   }) => <div data-testid="workspace-file-preview">{file.path}</div>,
 }));
 
-vi.mock("@/components/chat/ChatWelcome", () => ({
+vi.mock("@/features/chat/components/chat-welcome", () => ({
   ChatWelcome: ({
     onCreateSession,
     onSelectAgent,
@@ -78,7 +77,7 @@ vi.mock("@/components/chat/ChatWelcome", () => ({
   ),
 }));
 
-vi.mock("@/components/chat/presenter/chat-presenter-context", () => ({
+vi.mock("@/features/chat/components/providers/chat-presenter.provider", () => ({
   usePresenter: () => ({
     chatThreadManager: {
       deleteSession: mocks.deleteSession,
@@ -113,25 +112,25 @@ vi.mock("@/components/chat/presenter/chat-presenter-context", () => ({
   }),
 }));
 
-vi.mock("@/components/chat/session-header/chat-session-header-actions", () => ({
+vi.mock("@/features/chat/components/conversation/session-header/chat-session-header-actions", () => ({
   ChatSessionHeaderActions: () => <button aria-label="More actions" />,
 }));
 
-vi.mock("@/components/chat/session-header/chat-session-project-badge", () => ({
+vi.mock("@/features/chat/components/conversation/session-header/chat-session-project-badge", () => ({
   ChatSessionProjectBadge: ({ projectName }: { projectName: string }) => (
     <button>{projectName}</button>
   ),
 }));
 
 vi.mock(
-  "@/components/chat/ncp/session-conversation/use-ncp-child-session-tabs-view",
+  "@/features/chat/hooks/use-ncp-child-session-tabs-view",
   () => ({
     useNcpChildSessionTabsView: () => mocks.resolvedChildTabs,
   }),
 );
 
 vi.mock(
-  "@/components/chat/ncp/session-conversation/use-ncp-session-conversation",
+  "@/features/chat/hooks/use-ncp-session-conversation",
   () => ({
     useNcpSessionConversation: () => ({
       visibleMessages: [],
@@ -142,13 +141,13 @@ vi.mock(
   }),
 );
 
-vi.mock("@/components/common/AgentAvatar", () => ({
+vi.mock("@/shared/components/common/agent-avatar", () => ({
   AgentAvatar: ({ agentId }: { agentId: string }) => (
     <div data-testid="agent-avatar">{agentId}</div>
   ),
 }));
 
-vi.mock("@/components/common/agent-identity", () => ({
+vi.mock("@/shared/components/common/agent-identity", () => ({
   AgentIdentityAvatar: ({ agentId }: { agentId: string }) => (
     <div data-testid="agent-identity-avatar">{agentId}</div>
   ),
@@ -221,6 +220,19 @@ describe("ChatConversationPanel", () => {
     expect(screen.getByLabelText("More actions")).toBeTruthy();
   });
 
+  it("uses the mobile conversation header as the chat detail back entry", async () => {
+    const user = userEvent.setup();
+    const onBackToList = vi.fn();
+
+    render(
+      <ChatConversationPanel layoutMode="mobile" onBackToList={onBackToList} />,
+    );
+
+    await user.click(screen.getByRole("button", { name: "Chat" }));
+
+    expect(onBackToList).toHaveBeenCalledTimes(1);
+  });
+
   it("shows the selected session project badge and more actions trigger", () => {
     useChatThreadStore.setState({
       snapshot: {
@@ -305,6 +317,16 @@ describe("ChatConversationPanel", () => {
     expect(screen.queryByText("No messages yet. Send one to start.")).toBeNull();
   });
 
+  it("does not render runtime lifecycle copy in the conversation alert strip", () => {
+    render(<ChatConversationPanel />);
+
+    expect(
+      screen.queryByText(
+        "聊天能力正在初始化。你可以先输入内容，完成后即可发送。",
+      ),
+    ).toBeNull();
+  });
+
   it("does not auto-open the child-session panel until the panel is explicitly opened", () => {
     useChatThreadStore.setState({
       snapshot: {