@nextclaw/ui 0.12.10 → 0.12.12

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/ChatSidebar";
-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>
   );

package/src/features/chat/components/layout/chat-sidebar-session-entry.tsx

@@ -0,0 +1,82 @@
+import type { SessionEntryView } from "@/shared/lib/api";
+import type { NcpSessionListItemView } from "@/features/chat/hooks/use-ncp-session-list-view";
+import { ChatSidebarSessionItem } from "@/features/chat";
+import { useChatInputStore } from "@/features/chat/stores/chat-input.store";
+import { shouldShowUnreadSessionIndicator } from "@/features/chat/stores/chat-session-list.store";
+import { resolveSessionContextView } from "@/features/chat/utils/session-context.utils";
+
+export function ChatSidebarSessionEntry(props: {
+  item: NcpSessionListItemView;
+  selectedSessionKey: string | null;
+  optimisticReadAtBySessionKey: Record<string, string>;
+  agentsById: Map<string, { displayName?: string | null; avatarUrl?: string | null }>;
+  childSessionsByParentKey: Map<string, NcpSessionListItemView[]>;
+  editingSessionKey: string | null;
+  draftLabel: string;
+  savingSessionKey: string | null;
+  sessionTitle: (session: SessionEntryView) => string;
+  onSelectSession: (sessionKey: string) => void;
+  onOpenChildSessions: (parentSessionKey: string, activeChildSessionKey: string | null) => void;
+  onStartEditingSessionLabel: (session: SessionEntryView) => void;
+  onDraftLabelChange: (value: string) => void;
+  onSaveSessionLabel: (session: SessionEntryView) => void;
+  onCancelEditingSessionLabel: () => void;
+}) {
+  const {
+    item,
+    selectedSessionKey,
+    optimisticReadAtBySessionKey,
+    agentsById,
+    childSessionsByParentKey,
+    editingSessionKey,
+    draftLabel,
+    savingSessionKey,
+    sessionTitle,
+    onSelectSession,
+    onOpenChildSessions,
+    onStartEditingSessionLabel,
+    onDraftLabelChange,
+    onSaveSessionLabel,
+    onCancelEditingSessionLabel,
+  } = props;
+  const { session, runStatus } = item;
+  const inputSnapshot = useChatInputStore((state) => state.snapshot);
+  const active = selectedSessionKey === session.key;
+  const optimisticReadAt = optimisticReadAtBySessionKey[session.key];
+  const effectiveReadAt =
+    optimisticReadAt && session.readAt
+      ? (optimisticReadAt.localeCompare(session.readAt) > 0 ? optimisticReadAt : session.readAt)
+      : optimisticReadAt ?? session.readAt;
+  const childSessions = childSessionsByParentKey.get(session.key) ?? [];
+
+  return (
+    <ChatSidebarSessionItem
+      session={session}
+      active={active}
+      showUnreadDot={shouldShowUnreadSessionIndicator({
+        active,
+        lastMessageAt: session.lastMessageAt,
+        readAt: effectiveReadAt,
+        runStatus,
+      })}
+      runStatus={runStatus}
+      context={resolveSessionContextView(session, inputSnapshot.sessionTypeOptions)}
+      title={sessionTitle(session)}
+      agentId={session.agentId ?? null}
+      agentLabel={session.agentId ? (agentsById.get(session.agentId)?.displayName ?? session.agentId) : null}
+      agentAvatarUrl={session.agentId ? (agentsById.get(session.agentId)?.avatarUrl ?? null) : null}
+      childSessionCount={childSessions.length}
+      isEditing={editingSessionKey === session.key}
+      draftLabel={draftLabel}
+      isSaving={savingSessionKey === session.key}
+      onSelect={() => onSelectSession(session.key)}
+      onOpenChildSessions={() =>
+        onOpenChildSessions(session.key, childSessions[0]?.session.key ?? null)
+      }
+      onStartEditing={() => onStartEditingSessionLabel(session)}
+      onDraftLabelChange={onDraftLabelChange}
+      onSave={() => onSaveSessionLabel(session)}
+      onCancel={onCancelEditingSessionLabel}
+    />
+  );
+}

package/src/features/chat/components/layout/chat-sidebar-toolbar.tsx

@@ -0,0 +1,205 @@
+import { Button } from "@/shared/components/ui/button";
+import { Input } from "@/shared/components/ui/input";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/shared/components/ui/popover";
+import { ChatSessionTypeOptionItem } from "@/features/chat/components/chat-session-type-option-item";
+import type { ChatInputSnapshot } from "@/features/chat/stores/chat-input.store";
+import { cn } from "@/shared/lib/utils";
+import { t } from "@/shared/lib/i18n";
+import { ChevronDown, Plus, Search } from "lucide-react";
+
+type SessionTypeOption = ChatInputSnapshot["sessionTypeOptions"][number];
+
+type ChatSidebarToolbarProps = {
+  query: string;
+  defaultSessionType: string;
+  sessionTypeOptions: SessionTypeOption[];
+  nonDefaultSessionTypeOptions: SessionTypeOption[];
+  isCreateMenuOpen: boolean;
+  onCreateMenuOpenChange: (open: boolean) => void;
+  onCreateSession: (sessionType: string) => void;
+  onQueryChange: (query: string) => void;
+};
+
+function getMobileCreateOptions(params: {
+  defaultSessionType: string;
+  sessionTypeOptions: SessionTypeOption[];
+  nonDefaultSessionTypeOptions: SessionTypeOption[];
+}): SessionTypeOption[] {
+  const defaultOption = params.sessionTypeOptions.find(
+    (option) => option.value === params.defaultSessionType,
+  );
+  return [
+    ...(defaultOption ? [defaultOption] : []),
+    ...params.nonDefaultSessionTypeOptions,
+  ];
+}
+
+export function ChatSidebarDesktopToolbar(props: ChatSidebarToolbarProps) {
+  const {
+    query,
+    defaultSessionType,
+    nonDefaultSessionTypeOptions,
+    isCreateMenuOpen,
+    onCreateMenuOpenChange,
+    onCreateSession,
+    onQueryChange,
+  } = props;
+
+  return (
+    <>
+      <div className="px-4 pb-3">
+        <div className="flex items-center gap-2">
+          <Button
+            variant="primary"
+            className={cn(
+              "min-w-0 rounded-xl",
+              nonDefaultSessionTypeOptions.length > 0
+                ? "flex-1 rounded-r-md"
+                : "w-full",
+            )}
+            onClick={() => {
+              onCreateMenuOpenChange(false);
+              onCreateSession(defaultSessionType);
+            }}
+          >
+            <Plus className="mr-2 h-4 w-4" />
+            {t("chatSidebarNewTask")}
+          </Button>
+          {nonDefaultSessionTypeOptions.length > 0 ? (
+            <Popover
+              open={isCreateMenuOpen}
+              onOpenChange={onCreateMenuOpenChange}
+            >
+              <PopoverTrigger asChild>
+                <Button
+                  variant="primary"
+                  size="icon"
+                  className="h-9 w-10 shrink-0 rounded-xl rounded-l-md"
+                  aria-label={t("chatSessionTypeLabel")}
+                >
+                  <ChevronDown className="h-4 w-4" />
+                </Button>
+              </PopoverTrigger>
+              <PopoverContent
+                align="end"
+                className="w-56 rounded-2xl border border-gray-200/80 bg-white p-1.5 shadow-[0_24px_60px_-28px_rgba(15,23,42,0.38)]"
+              >
+                <div className="px-3 pb-1 pt-2 text-[10px] font-semibold uppercase tracking-[0.18em] text-gray-400">
+                  {t("chatSessionTypeLabel")}
+                </div>
+                <div className="space-y-1">
+                  {nonDefaultSessionTypeOptions.map((option) => (
+                    <ChatSessionTypeOptionItem
+                      key={option.value}
+                      option={option}
+                      onSelect={() => {
+                        onCreateSession(option.value);
+                        onCreateMenuOpenChange(false);
+                      }}
+                    />
+                  ))}
+                </div>
+              </PopoverContent>
+            </Popover>
+          ) : null}
+        </div>
+      </div>
+
+      <div className="px-4 pb-3">
+        <div className="relative">
+          <Search className="absolute left-3 top-2.5 h-3.5 w-3.5 text-gray-400" />
+          <Input
+            value={query}
+            onChange={(event) => onQueryChange(event.target.value)}
+            placeholder={t("chatSidebarSearchPlaceholder")}
+            className="h-9 rounded-lg pl-8 text-xs"
+          />
+        </div>
+      </div>
+    </>
+  );
+}
+
+export function ChatSidebarMobileToolbar(props: ChatSidebarToolbarProps) {
+  const {
+    query,
+    defaultSessionType,
+    sessionTypeOptions,
+    nonDefaultSessionTypeOptions,
+    isCreateMenuOpen,
+    onCreateMenuOpenChange,
+    onCreateSession,
+    onQueryChange,
+  } = props;
+  const createOptions = getMobileCreateOptions({
+    defaultSessionType,
+    sessionTypeOptions,
+    nonDefaultSessionTypeOptions,
+  });
+  const hasCreateMenu = createOptions.length > 1;
+
+  return (
+    <div className="px-4 pb-2 pt-1">
+      <div className="flex items-center gap-2">
+        <div className="relative min-w-0 flex-1">
+          <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400" />
+          <Input
+            value={query}
+            onChange={(event) => onQueryChange(event.target.value)}
+            placeholder={t("chatSidebarSearchPlaceholder")}
+            className="h-9 rounded-full border-transparent bg-gray-100/80 pl-9 pr-3 text-[13px] shadow-none focus:border-gray-200/80 focus:bg-white"
+          />
+        </div>
+
+        {hasCreateMenu ? (
+          <Popover open={isCreateMenuOpen} onOpenChange={onCreateMenuOpenChange}>
+            <PopoverTrigger asChild>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-9 w-9 shrink-0 rounded-full bg-gray-100/80 text-gray-700 shadow-none hover:bg-gray-200/80 hover:text-gray-900"
+                aria-label={t("chatSidebarNewTask")}
+              >
+                <Plus className="h-4 w-4" />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent
+              align="end"
+              className="w-60 rounded-3xl border border-gray-200/80 bg-white p-2 shadow-[0_24px_70px_-30px_rgba(15,23,42,0.45)]"
+            >
+              <div className="px-3 pb-1.5 pt-2 text-[11px] font-medium text-gray-400">
+                {t("chatSidebarNewTask")}
+              </div>
+              <div className="space-y-1">
+                {createOptions.map((option) => (
+                  <ChatSessionTypeOptionItem
+                    key={option.value}
+                    option={option}
+                    onSelect={() => {
+                      onCreateSession(option.value);
+                      onCreateMenuOpenChange(false);
+                    }}
+                  />
+                ))}
+              </div>
+            </PopoverContent>
+          </Popover>
+        ) : (
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-9 w-9 shrink-0 rounded-full bg-gray-100/80 text-gray-700 shadow-none hover:bg-gray-200/80 hover:text-gray-900"
+            aria-label={t("chatSidebarNewTask")}
+            onClick={() => onCreateSession(defaultSessionType)}
+          >
+            <Plus className="h-4 w-4" />
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}