@nextclaw/ui 0.12.11 → 0.12.12

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: {

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}