@nextclaw/ui 0.12.8 → 0.12.10

package/src/components/chat/chat-session-workspace-panel.tsx

@@ -0,0 +1,318 @@
+import { useEffect, useMemo, useRef } from "react";
+import { ArrowLeft, FolderGit2, Loader2, X } from "lucide-react";
+import type {
+  ChatFileOpenActionViewModel,
+  ChatToolActionViewModel,
+} from "@nextclaw/agent-chat-ui";
+import { useStickyBottomScroll } from "@nextclaw/agent-chat-ui";
+import { ChatMessageListContainer } from "@/components/chat/containers/chat-message-list.container";
+import {
+  useNcpChildSessionTabsView,
+  type ResolvedChildSessionTab,
+} from "@/components/chat/ncp/session-conversation/use-ncp-child-session-tabs-view";
+import { useNcpSessionConversation } from "@/components/chat/ncp/session-conversation/use-ncp-session-conversation";
+import {
+  shouldShowUnreadSessionIndicator,
+  useChatSessionListStore,
+} from "@/components/chat/stores/chat-session-list.store";
+import type {
+  ChatChildSessionTab,
+  ChatWorkspaceFileTab,
+} from "@/components/chat/stores/chat-thread.store";
+import {
+  readWorkspaceFileTitle,
+  resolveWorkspaceSelection,
+  type WorkspaceTabViewModel,
+  WorkspaceTabsBar,
+} from "@/components/chat/chat-session-workspace-panel-nav";
+import { usePresenter } from "@/components/chat/presenter/chat-presenter-context";
+import { ChatSessionWorkspaceFilePreview } from "@/components/chat/chat-session-workspace-file-preview";
+import { AgentIdentityAvatar } from "@/components/common/agent-identity";
+import { t } from "@/lib/i18n";
+import { cn } from "@/lib/utils";
+
+type ChatSessionWorkspacePanelProps = {
+  childSessionTabs: readonly ChatChildSessionTab[];
+  activeChildSessionKey: string | null;
+  workspaceFileTabs: readonly ChatWorkspaceFileTab[];
+  activeWorkspaceFileKey: string | null;
+  sessionProjectRoot: string | null;
+  onSelectSession: (sessionKey: string) => void;
+  onSelectFile: (fileKey: string) => void;
+  onCloseFile: (fileKey: string) => void;
+  onClose: () => void;
+  onBackToParent: () => void;
+  onToolAction?: (action: ChatToolActionViewModel) => void;
+  onFileOpen: (action: ChatFileOpenActionViewModel) => void;
+};
+
+function ChildSessionContent({
+  sessionKey,
+  onToolAction,
+  onFileOpen,
+}: {
+  sessionKey: string;
+  onToolAction?: (action: ChatToolActionViewModel) => void;
+  onFileOpen: (action: ChatFileOpenActionViewModel) => void;
+}) {
+  const agent = useNcpSessionConversation(sessionKey);
+  const messages = agent.visibleMessages;
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const { onScroll } = useStickyBottomScroll({
+    scrollRef,
+    resetKey: sessionKey,
+    isLoading: agent.isHydrating,
+    hasContent: messages.length > 0,
+    contentVersion: messages[messages.length - 1] ?? null,
+    stickyThresholdPx: 20,
+  });
+
+  return (
+    <div
+      ref={scrollRef}
+      onScroll={onScroll}
+      className="h-full overflow-y-auto custom-scrollbar"
+    >
+      {agent.isHydrating ? (
+        <div className="flex h-full items-center justify-center text-sm text-gray-500">
+          <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+          {t("chatChildSessionLoading")}
+        </div>
+      ) : agent.hydrateError ? (
+        <div className="px-4 py-5 text-sm text-rose-600">
+          {agent.hydrateError.message}
+        </div>
+      ) : messages.length === 0 && !agent.isRunning ? (
+        <div className="px-4 py-5 text-sm text-gray-500">
+          {t("chatChildSessionEmpty")}
+        </div>
+      ) : (
+        <div className="px-4 py-5">
+          <ChatMessageListContainer
+            messages={messages}
+            isSending={agent.isRunning}
+            onToolAction={onToolAction}
+            onFileOpen={onFileOpen}
+          />
+        </div>
+      )}
+    </div>
+  );
+}
+
+function ChildSessionMetaChip({ value }: { value: string }) {
+  return (
+    <span className="inline-flex max-w-full items-center rounded border border-gray-200 bg-gray-50 px-2 py-0.5 text-[10px] font-medium text-gray-600">
+      <span className="truncate">{value}</span>
+    </span>
+  );
+}
+
+function ChildSessionMetaStrip({ tab }: { tab: ResolvedChildSessionTab }) {
+  const metaItems = [
+    tab.sessionTypeLabel,
+    tab.preferredModel,
+    tab.projectName,
+  ].filter((value): value is string => Boolean(value?.trim()));
+
+  if (metaItems.length === 0 && !tab.projectRoot) {
+    return null;
+  }
+
+  return (
+    <div className="mt-3 space-y-2">
+      {metaItems.length > 0 ? (
+        <div className="flex flex-wrap gap-1.5">
+          {metaItems.map((item) => (
+            <ChildSessionMetaChip key={item} value={item} />
+          ))}
+        </div>
+      ) : null}
+      {tab.projectRoot ? (
+        <div
+          title={tab.projectRoot}
+          className="truncate rounded border border-gray-200 bg-gray-50 px-2 py-1.5 font-mono text-[11px] text-gray-500"
+        >
+          {tab.projectRoot}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+function WorkspaceActiveChildHeader({
+  tab,
+}: {
+  tab: ResolvedChildSessionTab;
+}) {
+  return (
+    <div className="border-b border-gray-200/70 px-4 py-3">
+      <div className="flex min-w-0 items-center gap-2 text-sm font-semibold text-gray-900">
+        {tab.agentId ? (
+          <AgentIdentityAvatar
+            agentId={tab.agentId}
+            className="h-4 w-4 shrink-0"
+          />
+        ) : (
+          <FolderGit2 className="h-4 w-4 shrink-0 text-gray-400" />
+        )}
+        <span className="truncate">{tab.title}</span>
+      </div>
+      <ChildSessionMetaStrip tab={tab} />
+    </div>
+  );
+}
+
+export function ChatSessionWorkspacePanel({
+  childSessionTabs,
+  activeChildSessionKey,
+  workspaceFileTabs,
+  activeWorkspaceFileKey,
+  sessionProjectRoot,
+  onSelectSession,
+  onSelectFile,
+  onCloseFile,
+  onClose,
+  onBackToParent,
+  onToolAction,
+  onFileOpen,
+}: ChatSessionWorkspacePanelProps) {
+  const presenter = usePresenter();
+  const resolvedChildTabs = useNcpChildSessionTabsView(childSessionTabs);
+  const optimisticReadAtBySessionKey = useChatSessionListStore(
+    (state) => state.optimisticReadAtBySessionKey,
+  );
+  const activeSelection = resolveWorkspaceSelection({
+    activeChildSessionKey,
+    activeWorkspaceFileKey,
+    childSessionTabs: resolvedChildTabs,
+    workspaceFileTabs,
+  });
+  const hasParentSession = resolvedChildTabs.some((tab) =>
+    Boolean(tab.parentSessionKey),
+  );
+
+  useEffect(() => {
+    if (activeSelection?.kind !== "child-session") {
+      return;
+    }
+    const activeTabReadAt = activeSelection.tab.lastMessageAt?.trim() ?? null;
+    if (!activeTabReadAt) {
+      return;
+    }
+    presenter.chatSessionListManager.markSessionRead(
+      activeSelection.tab.sessionKey,
+      activeTabReadAt,
+      activeSelection.tab.readAt ?? null,
+    );
+  }, [activeSelection, presenter]);
+
+  const workspaceTabs = useMemo<WorkspaceTabViewModel[]>(() => {
+    const childTabs = resolvedChildTabs.map((tab) => {
+      const optimisticReadAt = optimisticReadAtBySessionKey[tab.sessionKey];
+      const effectiveReadAt =
+        optimisticReadAt && tab.readAt
+          ? optimisticReadAt.localeCompare(tab.readAt) > 0
+            ? optimisticReadAt
+            : tab.readAt
+          : optimisticReadAt ?? tab.readAt;
+      return {
+        key: `child:${tab.sessionKey}`,
+        kind: "child-session" as const,
+        title: tab.title,
+        tooltip: tab.title,
+        agentId: tab.agentId,
+        active:
+          activeSelection?.kind === "child-session" &&
+          activeSelection.tab.sessionKey === tab.sessionKey,
+        showUnreadDot: shouldShowUnreadSessionIndicator({
+          active:
+            activeSelection?.kind === "child-session" &&
+            activeSelection.tab.sessionKey === tab.sessionKey,
+          lastMessageAt: tab.lastMessageAt,
+          readAt: effectiveReadAt,
+          runStatus: tab.runStatus,
+        }),
+        onSelect: () => onSelectSession(tab.sessionKey),
+      };
+    });
+
+    const fileTabs = workspaceFileTabs.map((file) => ({
+      key: `file:${file.key}`,
+      kind: "file" as const,
+      title: readWorkspaceFileTitle(file),
+      tooltip: file.path,
+      viewMode: file.viewMode,
+      active:
+        activeSelection?.kind === "file" &&
+        activeSelection.file.key === file.key,
+      onSelect: () => onSelectFile(file.key),
+      onClose: () => onCloseFile(file.key),
+    }));
+
+    return [...childTabs, ...fileTabs];
+  }, [
+    activeSelection,
+    onCloseFile,
+    onSelectFile,
+    onSelectSession,
+    optimisticReadAtBySessionKey,
+    resolvedChildTabs,
+    workspaceFileTabs,
+  ]);
+
+  if (!activeSelection) {
+    return null;
+  }
+
+  return (
+    <aside className="hidden shrink-0 border-l border-gray-200/70 bg-white/95 backdrop-blur-sm md:flex md:w-[26rem] lg:w-[30rem] xl:w-[34rem]">
+      <div className="flex h-full min-h-0 w-full flex-col">
+        <div className="flex items-center justify-between gap-3 border-b border-gray-200/70 px-4 py-2.5">
+          <button
+            type="button"
+            onClick={onBackToParent}
+            className={cn(
+              "inline-flex items-center gap-1 text-xs font-medium text-gray-600 transition-colors hover:text-gray-900",
+              !hasParentSession && "pointer-events-none opacity-0",
+            )}
+          >
+            <ArrowLeft className="h-3.5 w-3.5" />
+            <span>{t("chatBackToParent")}</span>
+          </button>
+          <button
+            type="button"
+            onClick={onClose}
+            className="rounded-full border border-gray-200/80 p-1.5 text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-900"
+            aria-label={t("chatWorkspaceClosePanel")}
+          >
+            <X className="h-4 w-4" />
+          </button>
+        </div>
+
+        <WorkspaceTabsBar tabs={workspaceTabs} />
+
+        <div className="flex min-h-0 flex-1 flex-col bg-white">
+          {activeSelection.kind === "child-session" ? (
+            <>
+              <WorkspaceActiveChildHeader tab={activeSelection.tab} />
+              <div className="flex-1 min-h-0">
+                <ChildSessionContent
+                  sessionKey={activeSelection.tab.sessionKey}
+                  onToolAction={onToolAction}
+                  onFileOpen={onFileOpen}
+                />
+              </div>
+            </>
+          ) : (
+            <ChatSessionWorkspaceFilePreview
+              file={activeSelection.file}
+              sessionProjectRoot={sessionProjectRoot}
+              onFileOpen={onFileOpen}
+            />
+          )}
+        </div>
+      </div>
+    </aside>
+  );
+}

package/src/components/chat/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 { cn } from '@/lib/utils';
 
 export type ChatSidebarProjectGroup = {
   projectRoot: string;
@@ -34,16 +34,6 @@ function resolveProjectGroupDefaultSessionType(
   return sessionTypeOptions[0]?.value ?? defaultSessionType;
 }
 
-function resolveSessionTypeStatusText(option: {
-  ready?: boolean;
-  reasonMessage?: string | null;
-}): string {
-  if (option.ready === false) {
-    return option.reasonMessage?.trim() || t('statusSetup');
-  }
-  return t('statusReady');
-}
-
 export function ChatSidebarProjectGroups(props: ChatSidebarProjectGroupsProps) {
   const { groups, defaultSessionType, sessionTypeOptions, renderSessionItem, onCreateSession } = props;
   const [openProjectRoot, setOpenProjectRoot] = useState<string | null>(null);
@@ -91,38 +81,23 @@ export function ChatSidebarProjectGroups(props: ChatSidebarProjectGroupsProps) {
                       <Plus className="h-3.5 w-3.5" />
                     </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">
                       {sessionTypeOptions.map((option) => (
-                        <button
+                        <ChatSessionTypeOptionItem
                           key={`${group.projectRoot}:${option.value}`}
-                          type="button"
-                          onClick={() => {
+                          option={option}
+                          onSelect={() => {
                             onCreateSession(option.value, group.projectRoot);
                             setOpenProjectRoot(null);
                           }}
-                          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/chat-sidebar-session-item.tsx

@@ -8,7 +8,7 @@ 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 { Check, Pencil, X } from 'lucide-react';
+import { Check, GitBranch, Pencil, X } from 'lucide-react';
 
 type ChatSidebarSessionItemProps = {
   session: SessionEntryView;
@@ -20,10 +20,12 @@ type ChatSidebarSessionItemProps = {
   agentId?: string | null;
   agentLabel?: string | null;
   agentAvatarUrl?: string | null;
+  childSessionCount?: number;
   isEditing: boolean;
   draftLabel: string;
   isSaving: boolean;
   onSelect: () => void;
+  onOpenChildSessions?: () => void;
   onStartEditing: () => void;
   onDraftLabelChange: (value: string) => void;
   onSave: () => void | Promise<void>;
@@ -108,7 +110,9 @@ function ChatSidebarSessionDisplayView({
   agentId,
   agentLabel,
   agentAvatarUrl,
+  childSessionCount = 0,
   onSelect,
+  onOpenChildSessions,
   onStartEditing
 }: ChatSidebarSessionDisplayViewProps) {
   const iconTone = active ? 'text-gray-700' : 'text-gray-500';
@@ -162,9 +166,31 @@ function ChatSidebarSessionDisplayView({
           </span>
         </div>
         <div className="mt-0.5 text-[11px] text-gray-400 truncate">
-          {agentLabel?.trim() ? `${agentLabel} · ` : ''}{session.messageCount} · {formatDateTime(session.updatedAt)}
+          <span>
+            {agentLabel?.trim() ? `${agentLabel} · ` : ''}{session.messageCount} · {formatDateTime(session.updatedAt)}
+          </span>
         </div>
       </button>
+      {childSessionCount > 0 && onOpenChildSessions ? (
+        <button
+          type="button"
+          onClick={(event) => {
+            event.stopPropagation();
+            onOpenChildSessions();
+          }}
+          className={cn(
+            'absolute right-7 top-0 inline-flex h-7 items-center gap-1 rounded-lg px-1.5 text-[10px] font-medium text-gray-400 transition-all hover:bg-white hover:text-gray-900',
+            active
+              ? 'opacity-100'
+              : 'opacity-0 group-hover/session:opacity-100 group-focus-within/session:opacity-100'
+          )}
+          aria-label={t('chatSessionOpenChildSessions')}
+          title={t('chatSessionOpenChildSessions')}
+        >
+          <GitBranch className="h-3.5 w-3.5" />
+          <span>{childSessionCount}</span>
+        </button>
+      ) : null}
       <button
         type="button"
         onClick={(event) => {
@@ -195,10 +221,12 @@ export function ChatSidebarSessionItem({
   agentId,
   agentLabel,
   agentAvatarUrl,
+  childSessionCount,
   isEditing,
   draftLabel,
   isSaving,
   onSelect,
+  onOpenChildSessions,
   onStartEditing,
   onDraftLabelChange,
   onSave,
@@ -234,6 +262,8 @@ export function ChatSidebarSessionItem({
           agentLabel={agentLabel}
           agentAvatarUrl={agentAvatarUrl}
           onSelect={onSelect}
+          childSessionCount={childSessionCount}
+          onOpenChildSessions={onOpenChildSessions}
           onStartEditing={onStartEditing}
         />
       )}

package/src/components/chat/containers/chat-message-list.container.test.tsx

@@ -147,6 +147,55 @@ it("adapts persisted inline token metadata into rich message parts", () => {
   });
 });
 
+it("keeps Hermes tool invocation parts as tool cards instead of flattening them into plain text", () => {
+  const message = {
+    id: "assistant-hermes-tool-1",
+    sessionId: "session-1",
+    role: "assistant",
+    status: "final",
+    timestamp: "2026-04-16T00:00:00.000Z",
+    parts: [
+      {
+        type: "reasoning",
+        text: "The user wants Python files.",
+      },
+      {
+        type: "text",
+        text: "\n",
+      },
+      {
+        type: "tool-invocation",
+        toolCallId: "hermes-inline-tool-1",
+        toolName: "search_files",
+        state: "call",
+        args: "{\"pattern\":\"*.py\"}",
+      },
+      {
+        type: "text",
+        text: "\nFound them.",
+      },
+    ],
+  } satisfies NcpMessage;
+
+  render(<ChatMessageListContainer messages={[message]} isSending={false} />);
+
+  const renderedMessages =
+    captures.renders[captures.renders.length - 1]?.messages ?? [];
+  expect(renderedMessages[0]).toMatchObject({
+    parts: expect.arrayContaining([
+      expect.objectContaining({
+        type: "tool-card",
+        card: expect.objectContaining({
+          toolName: "search_files",
+          titleLabel: "chatToolCall",
+          statusTone: "running",
+          statusLabel: "chatToolStatusRunning",
+        }),
+      }),
+    ]),
+  });
+});
+
 it("passes localized attachment card texts to the shared chat UI", () => {
   captures.language = "zh";
 

package/src/components/chat/containers/chat-message-list.container.tsx

@@ -1,6 +1,7 @@
 import { useMemo } from "react";
 import type { NcpMessage } from "@nextclaw/ncp";
 import {
+  type ChatFileOpenActionViewModel,
   type ChatToolActionViewModel,
   type ChatMessageViewModel,
   ChatMessageList,
@@ -21,6 +22,7 @@ type ChatMessageListContainerProps = {
   isSending: boolean;
   className?: string;
   onToolAction?: (action: ChatToolActionViewModel) => void;
+  onFileOpen?: (action: ChatFileOpenActionViewModel) => void;
 };
 
 const messageViewModelCache = new WeakMap<
@@ -87,6 +89,7 @@ export function ChatMessageListContainer({
   isSending,
   className,
   onToolAction,
+  onFileOpen,
 }: ChatMessageListContainerProps) {
   const { language } = useI18n();
   const texts = useMemo<ChatMessageAdapterTexts>(
@@ -144,6 +147,7 @@ export function ChatMessageListContainer({
       className={className}
       texts={messageTexts}
       onToolAction={onToolAction}
+      onFileOpen={onFileOpen}
       renderToolAgent={(agentId) => (
         <AgentIdentityAvatar
           agentId={agentId}

package/src/components/chat/managers/chat-session-list.manager.test.ts

@@ -2,6 +2,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { ChatSessionListManager } from '@/components/chat/managers/chat-session-list.manager';
 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';
 
 const mocks = vi.hoisted(() => ({
   updateNcpSession: vi.fn(),
@@ -33,6 +34,14 @@ describe('ChatSessionListManager', () => {
         listMode: 'time-first'
       }
     });
+    useChatThreadStore.setState({
+      snapshot: {
+        ...useChatThreadStore.getState().snapshot,
+        workspacePanelParentKey: 'session-1',
+        activeChildSessionKey: 'child-session-1',
+        activeWorkspaceFileKey: 'session-1::/tmp/demo.md',
+      },
+    });
   });
 
   it('applies the requested session type when creating a session', () => {
@@ -133,6 +142,9 @@ describe('ChatSessionListManager', () => {
 
     expect(uiManager.goToSession).toHaveBeenCalledWith('session-2');
     expect(useChatSessionListStore.getState().snapshot.selectedSessionKey).toBe('session-1');
+    expect(useChatThreadStore.getState().snapshot.workspacePanelParentKey).toBeNull();
+    expect(useChatThreadStore.getState().snapshot.activeChildSessionKey).toBeNull();
+    expect(useChatThreadStore.getState().snapshot.activeWorkspaceFileKey).toBeNull();
   });
 
   it('updates the sidebar list mode without touching other session list state', () => {

package/src/components/chat/managers/chat-session-list.manager.ts

@@ -25,8 +25,10 @@ export class ChatSessionListManager {
       isAwaitingAssistantOutput: false,
       parentSessionKey: null,
       parentSessionLabel: null,
+      workspacePanelParentKey: null,
       childSessionTabs: [],
       activeChildSessionKey: null,
+      activeWorkspaceFileKey: null,
     });
   };
 
@@ -157,6 +159,11 @@ export class ChatSessionListManager {
   };
 
   selectSession = (sessionKey: string) => {
+    useChatThreadStore.getState().setSnapshot({
+      workspacePanelParentKey: null,
+      activeChildSessionKey: null,
+      activeWorkspaceFileKey: null,
+    });
     this.uiManager.goToSession(sessionKey);
   };