@nextclaw/ui 0.7.0 → 0.9.0

package/src/components/chat/ChatSidebar.test.tsx

@@ -0,0 +1,203 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { ChatSidebar } from '@/components/chat/ChatSidebar';
+import { useChatInputStore } from '@/components/chat/stores/chat-input.store';
+import { useChatRunStatusStore } from '@/components/chat/stores/chat-run-status.store';
+import { useChatSessionListStore } from '@/components/chat/stores/chat-session-list.store';
+
+const mocks = vi.hoisted(() => ({
+  createSession: vi.fn(),
+  setQuery: vi.fn(),
+  selectSession: vi.fn(),
+  docOpen: vi.fn()
+}));
+
+vi.mock('@/components/chat/presenter/chat-presenter-context', () => ({
+  usePresenter: () => ({
+    chatSessionListManager: {
+      createSession: mocks.createSession,
+      setQuery: mocks.setQuery,
+      selectSession: mocks.selectSession
+    }
+  })
+}));
+
+vi.mock('@/components/doc-browser', () => ({
+  useDocBrowser: () => ({
+    open: mocks.docOpen
+  })
+}));
+
+vi.mock('@/components/common/BrandHeader', () => ({
+  BrandHeader: () => <div data-testid="brand-header" />
+}));
+
+vi.mock('@/components/common/StatusBadge', () => ({
+  StatusBadge: () => <div data-testid="status-badge" />
+}));
+
+vi.mock('@/components/providers/I18nProvider', () => ({
+  useI18n: () => ({
+    language: 'en',
+    setLanguage: vi.fn()
+  })
+}));
+
+vi.mock('@/components/providers/ThemeProvider', () => ({
+  useTheme: () => ({
+    theme: 'warm',
+    setTheme: vi.fn()
+  })
+}));
+
+vi.mock('@/stores/ui.store', () => ({
+  useUiStore: (selector: (state: { connectionStatus: string }) => unknown) =>
+    selector({ connectionStatus: 'connected' })
+}));
+
+describe('ChatSidebar', () => {
+  beforeEach(() => {
+    mocks.createSession.mockReset();
+    mocks.setQuery.mockReset();
+    mocks.selectSession.mockReset();
+    mocks.docOpen.mockReset();
+
+    useChatInputStore.setState({
+      snapshot: {
+        ...useChatInputStore.getState().snapshot,
+        defaultSessionType: 'native',
+        sessionTypeOptions: [
+          { value: 'native', label: 'Native' },
+          { value: 'codex', label: 'Codex' }
+        ]
+      }
+    });
+    useChatSessionListStore.setState({
+      snapshot: {
+        ...useChatSessionListStore.getState().snapshot,
+        sessions: [],
+        query: '',
+        isLoading: false
+      }
+    });
+    useChatRunStatusStore.setState({
+      snapshot: {
+        ...useChatRunStatusStore.getState().snapshot,
+        sessionRunStatusByKey: new Map()
+      }
+    });
+  });
+
+  it('closes the create-session menu after choosing a non-default session type', async () => {
+    render(
+      <MemoryRouter>
+        <ChatSidebar />
+      </MemoryRouter>
+    );
+
+    fireEvent.click(screen.getByLabelText('Session Type'));
+    fireEvent.click(screen.getByText('Codex'));
+
+    expect(mocks.createSession).toHaveBeenCalledWith('codex');
+    await waitFor(() => {
+      expect(screen.queryByText('Codex')).toBeNull();
+    });
+  });
+
+  it('shows a session type badge for non-native sessions in the list', () => {
+    useChatSessionListStore.setState({
+      snapshot: {
+        ...useChatSessionListStore.getState().snapshot,
+        sessions: [
+          {
+            key: 'session:codex-1',
+            createdAt: '2026-03-19T09:00:00.000Z',
+            updatedAt: '2026-03-19T09:05:00.000Z',
+            label: 'Codex Task',
+            sessionType: 'codex',
+            sessionTypeMutable: false,
+            messageCount: 2
+          }
+        ]
+      }
+    });
+
+    render(
+      <MemoryRouter>
+        <ChatSidebar />
+      </MemoryRouter>
+    );
+
+    expect(screen.getByText('Codex Task')).not.toBeNull();
+    expect(screen.getByText('Codex')).not.toBeNull();
+  });
+
+  it('formats non-native session badges generically when the type is no longer in the available options', () => {
+    useChatInputStore.setState({
+      snapshot: {
+        ...useChatInputStore.getState().snapshot,
+        sessionTypeOptions: [{ value: 'native', label: 'Native' }]
+      }
+    });
+    useChatSessionListStore.setState({
+      snapshot: {
+        ...useChatSessionListStore.getState().snapshot,
+        sessions: [
+          {
+            key: 'session:workspace-agent-1',
+            createdAt: '2026-03-19T09:00:00.000Z',
+            updatedAt: '2026-03-19T09:05:00.000Z',
+            label: 'Workspace Task',
+            sessionType: 'workspace-agent',
+            sessionTypeMutable: false,
+            messageCount: 2
+          }
+        ]
+      }
+    });
+
+    render(
+      <MemoryRouter>
+        <ChatSidebar />
+      </MemoryRouter>
+    );
+
+    expect(screen.getByText('Workspace Task')).not.toBeNull();
+    expect(screen.getByText('Workspace Agent')).not.toBeNull();
+  });
+
+  it('does not show a session type badge for native sessions in the list', () => {
+    useChatInputStore.setState({
+      snapshot: {
+        ...useChatInputStore.getState().snapshot,
+        sessionTypeOptions: [{ value: 'native', label: 'Native' }]
+      }
+    });
+    useChatSessionListStore.setState({
+      snapshot: {
+        ...useChatSessionListStore.getState().snapshot,
+        sessions: [
+          {
+            key: 'session:native-1',
+            createdAt: '2026-03-19T09:00:00.000Z',
+            updatedAt: '2026-03-19T09:05:00.000Z',
+            label: 'Native Task',
+            sessionType: 'native',
+            sessionTypeMutable: false,
+            messageCount: 1
+          }
+        ]
+      }
+    });
+
+    render(
+      <MemoryRouter>
+        <ChatSidebar />
+      </MemoryRouter>
+    );
+
+    expect(screen.getByText('Native Task')).not.toBeNull();
+    expect(screen.queryByText('Native')).toBeNull();
+  });
+});

package/src/components/chat/ChatSidebar.tsx

@@ -1,12 +1,14 @@
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';
 import type { SessionEntryView } from '@/api/types';
 import { Button } from '@/components/ui/button';
 import { BrandHeader } from '@/components/common/BrandHeader';
 import { StatusBadge } from '@/components/common/StatusBadge';
 import { Input } from '@/components/ui/input';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
 import { Select, SelectContent, SelectItem, SelectTrigger } from '@/components/ui/select';
 import { SessionRunBadge } from '@/components/common/SessionRunBadge';
 import { usePresenter } from '@/components/chat/presenter/chat-presenter-context';
+import { useChatInputStore } from '@/components/chat/stores/chat-input.store';
 import { useChatRunStatusStore } from '@/components/chat/stores/chat-run-status.store';
 import { useChatSessionListStore } from '@/components/chat/stores/chat-session-list.store';
 import { cn } from '@/lib/utils';
@@ -17,7 +19,7 @@ import { useTheme } from '@/components/providers/ThemeProvider';
 import { useDocBrowser } from '@/components/doc-browser';
 import { useUiStore } from '@/stores/ui.store';
 import { NavLink } from 'react-router-dom';
-import { AlarmClock, BookOpen, BrainCircuit, Languages, MessageSquareText, Palette, Plus, Search, Settings } from 'lucide-react';
+import { AlarmClock, BookOpen, BrainCircuit, ChevronDown, Languages, MessageSquareText, Palette, Plus, Search, Settings } from 'lucide-react';
 
 type DateGroup = {
   label: string;
@@ -64,6 +66,25 @@ function sessionTitle(session: SessionEntryView): string {
   return chunks[chunks.length - 1] || session.key;
 }
 
+function resolveSessionTypeLabel(
+  sessionType: string,
+  options: Array<{ value: string; label: string }>
+): string | null {
+  const normalized = sessionType.trim().toLowerCase();
+  if (!normalized || normalized === 'native') {
+    return null;
+  }
+  const matchedOption = options.find((option) => option.value.trim().toLowerCase() === normalized);
+  if (matchedOption?.label.trim()) {
+    return matchedOption.label.trim();
+  }
+  return normalized
+    .split(/[-_]+/g)
+    .filter(Boolean)
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+    .join(' ');
+}
+
 const navItems = [
   { target: '/cron', label: () => t('chatSidebarScheduledTasks'), icon: AlarmClock },
   { target: '/skills', label: () => t('chatSidebarSkills'), icon: BrainCircuit },
@@ -72,6 +93,8 @@ const navItems = [
 export function ChatSidebar() {
   const presenter = usePresenter();
   const docBrowser = useDocBrowser();
+  const [isCreateMenuOpen, setIsCreateMenuOpen] = useState(false);
+  const inputSnapshot = useChatInputStore((state) => state.snapshot);
   const listSnapshot = useChatSessionListStore((state) => state.snapshot);
   const runSnapshot = useChatRunStatusStore((state) => state.snapshot);
   const connectionStatus = useUiStore((state) => state.connectionStatus);
@@ -81,6 +104,11 @@ export function ChatSidebar() {
   const currentLanguageLabel = LANGUAGE_OPTIONS.find((o) => o.value === language)?.label ?? language;
 
   const groups = useMemo(() => groupSessionsByDate(listSnapshot.sessions), [listSnapshot.sessions]);
+  const defaultSessionType = inputSnapshot.defaultSessionType || 'native';
+  const nonDefaultSessionTypeOptions = useMemo(
+    () => inputSnapshot.sessionTypeOptions.filter((option) => option.value !== defaultSessionType),
+    [defaultSessionType, inputSnapshot.sessionTypeOptions]
+  );
 
   const handleLanguageSwitch = (nextLang: I18nLanguage) => {
     if (language === nextLang) return;
@@ -98,10 +126,57 @@ export function ChatSidebar() {
       </div>
 
       <div className="px-4 pb-3">
-        <Button variant="primary" className="w-full rounded-xl" onClick={presenter.chatSessionListManager.createSession}>
-          <Plus className="h-4 w-4 mr-2" />
-          {t('chatSidebarNewTask')}
-        </Button>
+        <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={() => {
+              setIsCreateMenuOpen(false);
+              presenter.chatSessionListManager.createSession(defaultSessionType);
+            }}
+          >
+            <Plus className="h-4 w-4 mr-2" />
+            {t('chatSidebarNewTask')}
+          </Button>
+          {nonDefaultSessionTypeOptions.length > 0 ? (
+            <Popover open={isCreateMenuOpen} onOpenChange={setIsCreateMenuOpen}>
+              <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-64 p-2">
+                <div className="px-2 py-1 text-[11px] font-medium uppercase tracking-wider text-gray-400">
+                  {t('chatSessionTypeLabel')}
+                </div>
+                <div className="mt-1 space-y-1">
+                  {nonDefaultSessionTypeOptions.map((option) => (
+                    <button
+                      key={option.value}
+                      type="button"
+                      onClick={() => {
+                        presenter.chatSessionListManager.createSession(option.value);
+                        setIsCreateMenuOpen(false);
+                      }}
+                      className="w-full rounded-xl px-3 py-2 text-left transition-colors hover:bg-gray-100"
+                    >
+                      <div className="text-[13px] font-medium text-gray-900">{option.label}</div>
+                      <div className="mt-0.5 text-[11px] text-gray-500">{t('chatSidebarNewTask')}</div>
+                    </button>
+                  ))}
+                </div>
+              </PopoverContent>
+            </Popover>
+          ) : null}
+        </div>
       </div>
 
       <div className="px-4 pb-3">
@@ -168,6 +243,7 @@ export function ChatSidebar() {
                   {group.sessions.map((session) => {
                     const active = listSnapshot.selectedSessionKey === session.key;
                     const runStatus = runSnapshot.sessionRunStatusByKey.get(session.key);
+                    const sessionTypeLabel = resolveSessionTypeLabel(session.sessionType, inputSnapshot.sessionTypeOptions);
                     return (
                       <button
                         key={session.key}
@@ -180,7 +256,21 @@ export function ChatSidebar() {
                         )}
                       >
                         <div className="grid grid-cols-[minmax(0,1fr)_0.875rem] items-center gap-1.5">
-                          <span className="truncate font-medium">{sessionTitle(session)}</span>
+                          <span className="flex min-w-0 items-center gap-1.5">
+                            <span className="truncate font-medium">{sessionTitle(session)}</span>
+                            {sessionTypeLabel ? (
+                              <span
+                                className={cn(
+                                  'shrink-0 rounded-full border px-1.5 py-0.5 text-[10px] font-semibold leading-none',
+                                  active
+                                    ? 'border-gray-300 bg-white/80 text-gray-700'
+                                    : 'border-gray-200 bg-gray-100 text-gray-500'
+                                )}
+                              >
+                                {sessionTypeLabel}
+                              </span>
+                            ) : null}
+                          </span>
                           <span className="inline-flex h-3.5 w-3.5 shrink-0 items-center justify-center">
                             {runStatus ? <SessionRunBadge status={runStatus} /> : null}
                           </span>

package/src/components/chat/adapters/chat-message.adapter.test.ts

@@ -1,40 +1,40 @@
-import { ToolInvocationStatus, type UiMessage } from '@nextclaw/agent-chat';
-import { adaptChatMessages } from '@/components/chat/adapters/chat-message.adapter';
-import type { ChatMessageSource } from '@/components/chat/adapters/chat-message.adapter';
+import { ToolInvocationStatus, type UiMessage } from "@nextclaw/agent-chat";
+import { adaptChatMessages } from "@/components/chat/adapters/chat-message.adapter";
+import type { ChatMessageSource } from "@/components/chat/adapters/chat-message.adapter";
 
 function toSource(uiMessages: UiMessage[]): ChatMessageSource[] {
   return uiMessages as unknown as ChatMessageSource[];
 }
 
-describe('adaptChatMessages', () => {
-  it('maps markdown, reasoning, and tool parts into UI view models', () => {
+describe("adaptChatMessages", () => {
+  it("maps markdown, reasoning, and tool parts into UI view models", () => {
     const messages: UiMessage[] = [
       {
-        id: 'assistant-1',
-        role: 'assistant',
+        id: "assistant-1",
+        role: "assistant",
         meta: {
-          status: 'final',
-          timestamp: '2026-03-17T10:00:00.000Z'
+          status: "final",
+          timestamp: "2026-03-17T10:00:00.000Z",
         },
         parts: [
-          { type: 'text', text: 'hello world' },
+          { type: "text", text: "hello world" },
           {
-            type: 'reasoning',
-            reasoning: 'internal reasoning',
-            details: []
+            type: "reasoning",
+            reasoning: "internal reasoning",
+            details: [],
           },
           {
-            type: 'tool-invocation',
+            type: "tool-invocation",
             toolInvocation: {
               status: ToolInvocationStatus.RESULT,
-              toolCallId: 'call-1',
-              toolName: 'web_search',
+              toolCallId: "call-1",
+              toolName: "web_search",
               args: '{"q":"hello"}',
-              result: { ok: true }
-            }
-          }
-        ]
-      }
+              result: { ok: true },
+            },
+          },
+        ],
+      },
     ];
 
     const adapted = adaptChatMessages({
@@ -42,96 +42,147 @@ describe('adaptChatMessages', () => {
       formatTimestamp: (value) => `formatted:${value}`,
       texts: {
         roleLabels: {
-          user: 'You',
-          assistant: 'Assistant',
-          tool: 'Tool',
-          system: 'System',
-          fallback: 'Message'
+          user: "You",
+          assistant: "Assistant",
+          tool: "Tool",
+          system: "System",
+          fallback: "Message",
         },
-        reasoningLabel: 'Reasoning',
-        toolCallLabel: 'Tool Call',
-        toolResultLabel: 'Tool Result',
-        toolNoOutputLabel: 'No output',
-        toolOutputLabel: 'View Output',
-        unknownPartLabel: 'Unknown Part'
-      }
+        reasoningLabel: "Reasoning",
+        toolCallLabel: "Tool Call",
+        toolResultLabel: "Tool Result",
+        toolNoOutputLabel: "No output",
+        toolOutputLabel: "View Output",
+        unknownPartLabel: "Unknown Part",
+      },
     });
 
     expect(adapted).toHaveLength(1);
-    expect(adapted[0]?.roleLabel).toBe('Assistant');
-    expect(adapted[0]?.timestampLabel).toBe('formatted:2026-03-17T10:00:00.000Z');
-    expect(adapted[0]?.parts.map((part) => part.type)).toEqual(['markdown', 'reasoning', 'tool-card']);
+    expect(adapted[0]?.roleLabel).toBe("Assistant");
+    expect(adapted[0]?.timestampLabel).toBe(
+      "formatted:2026-03-17T10:00:00.000Z",
+    );
+    expect(adapted[0]?.parts.map((part) => part.type)).toEqual([
+      "markdown",
+      "reasoning",
+      "tool-card",
+    ]);
+    expect(adapted[0]?.parts[1]).toMatchObject({
+      type: "reasoning",
+      label: "Reasoning",
+      text: "internal reasoning",
+    });
     expect(adapted[0]?.parts[2]).toMatchObject({
-      type: 'tool-card',
+      type: "tool-card",
       card: {
-        titleLabel: 'Tool Result',
-        outputLabel: 'View Output'
-      }
+        titleLabel: "Tool Result",
+        outputLabel: "View Output",
+      },
     });
   });
 
-  it('maps non-standard roles back to the generic message role', () => {
+  it("maps non-standard roles back to the generic message role", () => {
     const adapted = adaptChatMessages({
       uiMessages: [
         {
-          id: 'data-1',
-          role: 'data',
-          parts: [{ type: 'text', text: 'payload' }]
-        }
+          id: "data-1",
+          role: "data",
+          parts: [{ type: "text", text: "payload" }],
+        },
       ] as unknown as ChatMessageSource[],
-      formatTimestamp: () => 'formatted',
+      formatTimestamp: () => "formatted",
       texts: {
         roleLabels: {
-          user: 'You',
-          assistant: 'Assistant',
-          tool: 'Tool',
-          system: 'System',
-          fallback: 'Message'
+          user: "You",
+          assistant: "Assistant",
+          tool: "Tool",
+          system: "System",
+          fallback: "Message",
         },
-        reasoningLabel: 'Reasoning',
-        toolCallLabel: 'Tool Call',
-        toolResultLabel: 'Tool Result',
-        toolNoOutputLabel: 'No output',
-        toolOutputLabel: 'View Output',
-        unknownPartLabel: 'Unknown Part'
-      }
+        reasoningLabel: "Reasoning",
+        toolCallLabel: "Tool Call",
+        toolResultLabel: "Tool Result",
+        toolNoOutputLabel: "No output",
+        toolOutputLabel: "View Output",
+        unknownPartLabel: "Unknown Part",
+      },
     });
 
-    expect(adapted[0]?.role).toBe('message');
-    expect(adapted[0]?.roleLabel).toBe('Message');
+    expect(adapted[0]?.role).toBe("message");
+    expect(adapted[0]?.roleLabel).toBe("Message");
   });
 
-  it('maps unknown parts into a visible fallback part', () => {
+  it("maps unknown parts into a visible fallback part", () => {
     const adapted = adaptChatMessages({
       uiMessages: [
         {
-          id: 'x-1',
-          role: 'assistant',
-          parts: [{ type: 'step-start', value: 'x' }]
-        }
+          id: "x-1",
+          role: "assistant",
+          parts: [{ type: "step-start", value: "x" }],
+        },
       ] as unknown as ChatMessageSource[],
-      formatTimestamp: () => 'formatted',
+      formatTimestamp: () => "formatted",
       texts: {
         roleLabels: {
-          user: 'You',
-          assistant: 'Assistant',
-          tool: 'Tool',
-          system: 'System',
-          fallback: 'Message'
+          user: "You",
+          assistant: "Assistant",
+          tool: "Tool",
+          system: "System",
+          fallback: "Message",
         },
-        reasoningLabel: 'Reasoning',
-        toolCallLabel: 'Tool Call',
-        toolResultLabel: 'Tool Result',
-        toolNoOutputLabel: 'No output',
-        toolOutputLabel: 'View Output',
-        unknownPartLabel: 'Unknown Part'
-      }
+        reasoningLabel: "Reasoning",
+        toolCallLabel: "Tool Call",
+        toolResultLabel: "Tool Result",
+        toolNoOutputLabel: "No output",
+        toolOutputLabel: "View Output",
+        unknownPartLabel: "Unknown Part",
+      },
+    });
+
+    expect(adapted[0]?.parts[0]).toMatchObject({
+      type: "unknown",
+      rawType: "step-start",
+      label: "Unknown Part",
     });
+  });
 
+  it("drops empty and zero-width text parts during adaptation", () => {
+    const adapted = adaptChatMessages({
+      uiMessages: [
+        {
+          id: "assistant-mixed",
+          role: "assistant",
+          parts: [
+            { type: "text", text: "   " },
+            { type: "text", text: "\u200B\u200B" },
+            { type: "text", text: "\u200Bhello\u200B" },
+          ],
+        },
+      ] as unknown as ChatMessageSource[],
+      formatTimestamp: () => "formatted",
+      texts: {
+        roleLabels: {
+          user: "You",
+          assistant: "Assistant",
+          tool: "Tool",
+          system: "System",
+          fallback: "Message",
+        },
+        reasoningLabel: "Reasoning",
+        toolCallLabel: "Tool Call",
+        toolResultLabel: "Tool Result",
+        toolNoOutputLabel: "No output",
+        toolOutputLabel: "View Output",
+        unknownPartLabel: "Unknown Part",
+      },
+    });
+
+    expect(adapted).toHaveLength(1);
+    expect(adapted[0]?.id).toBe("assistant-mixed");
+    expect(adapted[0]?.parts).toHaveLength(1);
     expect(adapted[0]?.parts[0]).toMatchObject({
-      type: 'unknown',
-      rawType: 'step-start',
-      label: 'Unknown Part'
+      type: "markdown",
+      text: "\u200Bhello\u200B",
     });
   });
 });