@nextclaw/ui 0.12.8 → 0.12.10

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

@@ -11,6 +11,7 @@ const mocks = vi.hoisted(() => ({
   setQuery: vi.fn(),
   setListMode: vi.fn(),
   selectSession: vi.fn(),
+  openChildSessionPanel: vi.fn(),
   docOpen: vi.fn(),
   updateNcpSession: vi.fn(),
   agents: [] as Array<{ id: string; displayName?: string; avatarUrl?: string | null }>,
@@ -36,7 +37,10 @@ vi.mock('@/components/chat/presenter/chat-presenter-context', () => ({
         sessionKey: string | null | undefined,
         readAt: string | null | undefined,
       ) => (sessionKey ? useChatSessionListStore.getState().markSessionRead(sessionKey, readAt) : undefined),
-    }
+    },
+    chatThreadManager: {
+      openChildSessionPanel: mocks.openChildSessionPanel,
+    },
   })
 }));
 
@@ -113,6 +117,7 @@ function resetSidebarTestState() {
   mocks.setQuery.mockReset();
   mocks.setListMode.mockReset();
   mocks.selectSession.mockReset();
+  mocks.openChildSessionPanel.mockReset();
   mocks.docOpen.mockReset();
   mocks.updateNcpSession.mockReset();
   mocks.updateNcpSession.mockResolvedValue({});
@@ -630,4 +635,41 @@ describe('ChatSidebar session item interactions', () => {
 
     expect(screen.queryByLabelText('Session has unread updates')).toBeNull();
   });
+
+  it('opens the child-session browser from a parent session row', () => {
+    mocks.sessionItems = [
+      createSessionItem({
+        key: 'session:parent-1',
+        createdAt: '2026-03-19T09:00:00.000Z',
+        updatedAt: '2026-03-19T09:05:00.000Z',
+        label: 'Parent Task',
+        sessionType: 'native',
+        sessionTypeMutable: false,
+        messageCount: 1
+      }),
+      createSessionItem({
+        key: 'session:child-1',
+        createdAt: '2026-03-19T09:06:00.000Z',
+        updatedAt: '2026-03-19T09:07:00.000Z',
+        label: 'Child Task',
+        sessionType: 'native',
+        sessionTypeMutable: false,
+        messageCount: 1,
+        parentSessionId: 'session:parent-1'
+      })
+    ];
+
+    render(
+      <MemoryRouter>
+        <ChatSidebar />
+      </MemoryRouter>
+    );
+
+    fireEvent.click(screen.getByLabelText('View child sessions'));
+
+    expect(mocks.openChildSessionPanel).toHaveBeenCalledWith({
+      parentSessionKey: 'session:parent-1',
+      activeChildSessionKey: 'session:child-1',
+    });
+  });
 });

package/src/components/chat/ChatSidebar.tsx

@@ -7,6 +7,7 @@ import { Input } from '@/components/ui/input';
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
 import { SelectItem } from '@/components/ui/select';
 import { ChatSidebarSessionItem } from '@/components/chat/chat-sidebar-session-item';
+import { ChatSessionTypeOptionItem } from '@/components/chat/chat-session-type-option-item';
 import { ChatSidebarListModeSwitch } from '@/components/chat/chat-sidebar-list-mode-switch';
 import {
   ChatSidebarProjectGroups,
@@ -130,16 +131,6 @@ function sessionTitle(session: SessionEntryView): string {
   return chunks[chunks.length - 1] || session.key;
 }
 
-function resolveSessionTypeStatusText(option: {
-  ready?: boolean;
-  reasonMessage?: string | null;
-}): string {
-  if (option.ready === false) {
-    return option.reasonMessage?.trim() || t('statusSetup');
-  }
-  return t('statusReady');
-}
-
 const navItems = [
   { target: '/cron', label: () => t('chatSidebarScheduledTasks'), icon: AlarmClock },
   { target: '/skills', label: () => t('chatSidebarSkills'), icon: BrainCircuit },
@@ -201,6 +192,22 @@ export function ChatSidebar() {
     [agentsQuery.data?.agents]
   );
   const sortedItems = useMemo(() => sortSessionItemsByUpdatedAtDesc(items), [items]);
+  const childSessionsByParentKey = useMemo(() => {
+    const grouped = new Map<string, NcpSessionListItemView[]>();
+    for (const item of items) {
+      const parentSessionKey = item.session.parentSessionId?.trim();
+      if (!parentSessionKey) {
+        continue;
+      }
+      const bucket = grouped.get(parentSessionKey) ?? [];
+      bucket.push(item);
+      grouped.set(parentSessionKey, bucket);
+    }
+    for (const bucket of grouped.values()) {
+      bucket.sort((left, right) => getSessionUpdatedAtTimestamp(right) - getSessionUpdatedAtTimestamp(left));
+    }
+    return grouped;
+  }, [items]);
   const groups = useMemo(() => groupSessionsByDate(sortedItems), [sortedItems]);
   const projectGroups = useMemo(() => groupSessionsByProject(sortedItems), [sortedItems]);
   const defaultSessionType = inputSnapshot.defaultSessionType || 'native';
@@ -263,6 +270,7 @@ export function ChatSidebar() {
     const context = resolveSessionContextView(session, inputSnapshot.sessionTypeOptions);
     const isEditing = editingSessionKey === session.key;
     const isSaving = savingSessionKey === session.key;
+    const childSessions = childSessionsByParentKey.get(session.key) ?? [];
     return (
       <ChatSidebarSessionItem
         key={session.key}
@@ -275,10 +283,17 @@ export function ChatSidebar() {
         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={isEditing}
         draftLabel={draftLabel}
         isSaving={isSaving}
         onSelect={() => presenter.chatSessionListManager.selectSession(session.key)}
+        onOpenChildSessions={() =>
+          presenter.chatThreadManager.openChildSessionPanel({
+            parentSessionKey: session.key,
+            activeChildSessionKey: childSessions[0]?.session.key ?? null,
+          })
+        }
         onStartEditing={() => startEditingSessionLabel(session)}
         onDraftLabelChange={setDraftLabel}
         onSave={() => saveSessionLabel(session)}
@@ -323,38 +338,23 @@ export function ChatSidebar() {
                   <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">
+              <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="mt-1 space-y-1">
+                <div className="space-y-1">
                   {nonDefaultSessionTypeOptions.map((option) => (
-                    <button
+                    <ChatSessionTypeOptionItem
                       key={option.value}
-                      type="button"
-                      onClick={() => {
+                      option={option}
+                      onSelect={() => {
                         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="flex items-center justify-between gap-3">
-                        <div className="text-[13px] font-medium text-gray-900">{option.label}</div>
-                        <span
-                          className={cn(
-                            'shrink-0 rounded-full px-2 py-0.5 text-[10px] font-semibold',
-                            option.ready === false
-                              ? 'bg-amber-100 text-amber-800'
-                              : 'bg-emerald-100 text-emerald-700'
-                          )}
-                        >
-                          {option.ready === false ? t('statusSetup') : t('statusReady')}
-                        </span>
-                      </div>
-                      <div className="mt-0.5 text-[11px] text-gray-500">
-                        {resolveSessionTypeStatusText(option)}
-                      </div>
-                    </button>
+                    />
                   ))}
                 </div>
               </PopoverContent>

package/src/components/chat/adapters/chat-message.summary-truncation.test.ts

@@ -0,0 +1,66 @@
+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 type { ChatMessagePartViewModel } from "@nextclaw/agent-chat-ui";
+
+const defaultTexts = {
+  roleLabels: {
+    user: "You",
+    assistant: "Assistant",
+    tool: "Tool",
+    system: "System",
+    fallback: "Message",
+  },
+  reasoningLabel: "Reasoning",
+  toolCallLabel: "Tool Call",
+  toolResultLabel: "Tool Result",
+  toolInputLabel: "Input",
+  toolNoOutputLabel: "No output",
+  toolOutputLabel: "Output",
+  toolStatusPreparingLabel: "Preparing",
+  toolStatusRunningLabel: "Running",
+  toolStatusCompletedLabel: "Completed",
+  toolStatusFailedLabel: "Failed",
+  toolStatusCancelledLabel: "Cancelled",
+  imageAttachmentLabel: "Image attachment",
+  fileAttachmentLabel: "File attachment",
+  unknownPartLabel: "Unknown Part",
+};
+
+function adapt(uiMessages: UiMessage[]) {
+  return adaptChatMessages({
+    uiMessages: uiMessages as unknown as ChatMessageSource[],
+    formatTimestamp: (value) => `formatted:${value}`,
+    texts: defaultTexts,
+  });
+}
+
+it("truncates long structured tool summaries into a single-line ellipsis detail", () => {
+  const adapted = adapt([
+    {
+      id: "assistant-long-tool-summary",
+      role: "assistant",
+      parts: [
+        {
+          type: "tool-invocation",
+          toolInvocation: {
+            status: ToolInvocationStatus.PARTIAL_CALL,
+            toolCallId: "call-long-tool-summary",
+            toolName: "terminal",
+            args: JSON.stringify({
+              command:
+                "ls -la /Users/peiwang/.nextclaw/workspace/skills/bird/snapshots/archive/releases/2026-04-17/builds/current/output 2>/dev/null | sed -n '1,160p' && echo 'done'",
+            }),
+          },
+        },
+      ],
+    },
+  ]);
+
+  const summary = (
+    adapted[0]?.parts[0] as Extract<ChatMessagePartViewModel, { type: "tool-card" }> | undefined
+  )?.card.summary;
+
+  expect(summary?.startsWith("command: ls -la /Users/peiwang/.nextclaw/workspace/skills/bird/")).toBe(true);
+  expect(summary?.endsWith("…")).toBe(true);
+});

package/src/components/chat/adapters/file-operation/card.ts

@@ -54,7 +54,16 @@ function finalizeParsedBlocks(
       display: block.display,
       ...(block.caption ? { caption: block.caption } : {}),
       lines: block.lines,
+      ...(block.fullLines ? { fullLines: block.fullLines } : {}),
       ...(block.rawText ? { rawText: block.rawText } : {}),
+      ...(block.beforeText ? { beforeText: block.beforeText } : {}),
+      ...(block.afterText ? { afterText: block.afterText } : {}),
+      ...(typeof block.oldStartLine === "number"
+        ? { oldStartLine: block.oldStartLine }
+        : {}),
+      ...(typeof block.newStartLine === "number"
+        ? { newStartLine: block.newStartLine }
+        : {}),
       ...(block.truncated ? { truncated: true } : {}),
     }))
     .filter((block) => block.lines.length > 0 || Boolean(block.rawText));

package/src/components/chat/adapters/file-operation/diff.ts

@@ -13,7 +13,12 @@ export type ParsedBlock = {
   display: "preview" | "diff";
   caption?: string;
   lines: ChatFileOperationLineViewModel[];
+  fullLines?: ChatFileOperationLineViewModel[];
   rawText?: string;
+  beforeText?: string;
+  afterText?: string;
+  oldStartLine?: number;
+  newStartLine?: number;
   truncated?: boolean;
 };
 
@@ -114,6 +119,9 @@ export function buildRawPreviewBlock(params: {
       lines,
     }),
     lines,
+    rawText: previewText,
+    oldStartLine,
+    newStartLine,
   };
 }
 
@@ -144,6 +152,11 @@ export function buildFullReplaceBlock(params: {
       lines,
     }),
     lines: limited.lines,
+    ...(limited.truncated ? { fullLines: lines } : {}),
+    ...(params.beforeText != null ? { beforeText: params.beforeText } : {}),
+    ...(params.afterText != null ? { afterText: params.afterText } : {}),
+    ...(typeof oldStartLine === "number" ? { oldStartLine } : {}),
+    ...(typeof newStartLine === "number" ? { newStartLine } : {}),
     truncated: limited.truncated,
   };
 }
@@ -162,6 +175,7 @@ function buildParsedPatchBlock(params: {
       lines: params.lines,
     }),
     lines: limited.lines,
+    ...(limited.truncated ? { fullLines: params.lines } : {}),
     truncated: limited.truncated,
   };
 }