@nextclaw/ui 0.11.21 → 0.11.23

package/src/components/chat/ChatConversationPanel.tsx

@@ -1,16 +1,18 @@
 import { useRef } from "react";
+import { ArrowLeft } from "lucide-react";
 import { useStickyBottomScroll } from "@nextclaw/agent-chat-ui";
-import { Button } from "@/components/ui/button";
 import {
   ChatInputBarContainer,
   ChatMessageListContainer,
 } from "@/components/chat/nextclaw";
+import { ChatChildSessionPanel } from "@/components/chat/chat-child-session-panel";
 import { ChatWelcome } from "@/components/chat/ChatWelcome";
 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 { useChatThreadStore } from "@/components/chat/stores/chat-thread.store";
 import { t } from "@/lib/i18n";
 import { cn } from "@/lib/utils";
-import { Trash2 } from "lucide-react";
 
 function ChatConversationSkeleton() {
   return (
@@ -45,16 +47,20 @@ export function ChatConversationPanel() {
   const snapshot = useChatThreadStore((state) => state.snapshot);
   const fallbackThreadRef = useRef<HTMLDivElement | null>(null);
   const threadRef = snapshot.threadRef ?? fallbackThreadRef;
+  const detailSessionKey =
+    snapshot.childSessionDetailParentSessionKey === snapshot.sessionKey
+      ? snapshot.childSessionDetailSessionKey
+      : null;
   const shouldShowSessionHeader = Boolean(
-    snapshot.selectedSessionKey || snapshot.sessionTypeLabel,
+    snapshot.sessionKey || snapshot.sessionTypeLabel,
   );
   const sessionHeaderTitle =
     snapshot.sessionDisplayName ||
-    snapshot.selectedSessionKey ||
+    (snapshot.canDeleteSession && snapshot.sessionKey ? snapshot.sessionKey : null) ||
     t("chatSidebarNewTask");
 
   const showWelcome =
-    !snapshot.selectedSessionKey &&
+    !snapshot.canDeleteSession &&
     snapshot.messages.length === 0 &&
     !snapshot.isSending;
   const hasConfiguredModel = snapshot.modelOptions.length > 0;
@@ -68,7 +74,7 @@ export function ChatConversationPanel() {
 
   const { onScroll: handleScroll } = useStickyBottomScroll({
     scrollRef: threadRef,
-    resetKey: snapshot.selectedSessionKey,
+    resetKey: snapshot.sessionKey,
     isLoading: snapshot.isHistoryLoading,
     hasContent: snapshot.messages.length > 0,
     contentVersion: snapshot.messages[snapshot.messages.length - 1] ?? null,
@@ -79,91 +85,128 @@ export function ChatConversationPanel() {
   }
 
   return (
-    <section className="flex-1 min-h-0 flex flex-col overflow-hidden bg-gradient-to-b from-gray-50/60 to-white">
-      <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">
-          <span className="text-sm font-medium text-gray-700 truncate">
-            {sessionHeaderTitle}
-          </span>
-          {snapshot.sessionTypeLabel ? (
-            <span className="shrink-0 rounded-full border border-gray-200 bg-gray-100 px-2 py-0.5 text-[11px] font-medium text-gray-600">
-              {snapshot.sessionTypeLabel}
-            </span>
-          ) : null}
-        </div>
-        {snapshot.selectedSessionKey ? (
-          <Button
-            variant="ghost"
-            size="icon"
-            className="rounded-lg shrink-0 text-gray-400 hover:text-destructive"
-            onClick={presenter.chatThreadManager.deleteSession}
-            disabled={!snapshot.canDeleteSession || snapshot.isDeletePending}
-          >
-            <Trash2 className="h-4 w-4" />
-          </Button>
+    <section className="flex-1 min-h-0 flex overflow-hidden bg-gradient-to-b from-gray-50/60 to-white">
+      <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
+        {snapshot.parentSessionKey ? (
+          <div className="border-b border-gray-200/60 bg-white/75 px-5 py-2 backdrop-blur-sm">
+            <button
+              type="button"
+              onClick={presenter.chatThreadManager.goToParentSession}
+              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>
+                Back to parent
+                {snapshot.parentSessionLabel?.trim()
+                  ? ` · ${snapshot.parentSessionLabel.trim()}`
+                  : ""}
+              </span>
+            </button>
+          </div>
         ) : null}
-      </div>
 
-      {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">
-          <span className="text-xs text-amber-800">
-            {t("chatModelNoOptions")}
-          </span>
-          <button
-            type="button"
-            onClick={presenter.chatThreadManager.goToProviders}
-            className="text-xs font-semibold text-amber-900 underline-offset-2 hover:underline"
-          >
-            {t("chatGoConfigureProvider")}
-          </button>
+        <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">
+            <span className="text-sm font-medium text-gray-700 truncate">
+              {sessionHeaderTitle}
+            </span>
+            {snapshot.sessionTypeLabel ? (
+              <span className="shrink-0 rounded-full border border-gray-200 bg-gray-100 px-2 py-0.5 text-[11px] font-medium text-gray-600">
+                {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}
+              onDeleteSession={presenter.chatThreadManager.deleteSession}
+            />
+          ) : null}
         </div>
-      )}
 
-      {snapshot.sessionTypeUnavailable &&
-        snapshot.sessionTypeUnavailableMessage?.trim() && (
-          <div className="px-5 py-2.5 border-b border-amber-200/70 bg-amber-50/70 shrink-0">
+        {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">
             <span className="text-xs text-amber-800">
-              {snapshot.sessionTypeUnavailableMessage}
+              {t("chatModelNoOptions")}
             </span>
+            <button
+              type="button"
+              onClick={presenter.chatThreadManager.goToProviders}
+              className="text-xs font-semibold text-amber-900 underline-offset-2 hover:underline"
+            >
+              {t("chatGoConfigureProvider")}
+            </button>
           </div>
         )}
 
-      <div
-        ref={threadRef}
-        onScroll={handleScroll}
-        className="flex-1 min-h-0 overflow-y-auto custom-scrollbar"
-      >
-        {showWelcome ? (
-          <ChatWelcome
-            onCreateSession={presenter.chatThreadManager.createSession}
-          />
-        ) : hideEmptyHint ? (
-          <div className="h-full" />
-        ) : snapshot.messages.length === 0 ? (
-          <div className="px-5 py-5 text-sm text-gray-500">
-            {t("chatNoMessages")}
-          </div>
-        ) : (
-          <div className="mx-auto w-full max-w-[min(1120px,100%)] px-6 py-5">
-            <ChatMessageListContainer
-              key={snapshot.selectedSessionKey ?? "draft"}
-              messages={snapshot.messages}
-              isSending={
-                snapshot.isSending && snapshot.isAwaitingAssistantOutput
-              }
+        {snapshot.sessionTypeUnavailable &&
+          snapshot.sessionTypeUnavailableMessage?.trim() && (
+            <div className="px-5 py-2.5 border-b border-amber-200/70 bg-amber-50/70 shrink-0">
+              <span className="text-xs text-amber-800">
+                {snapshot.sessionTypeUnavailableMessage}
+              </span>
+            </div>
+          )}
+
+        <div
+          ref={threadRef}
+          onScroll={handleScroll}
+          className="flex-1 min-h-0 overflow-y-auto custom-scrollbar"
+        >
+          {showWelcome ? (
+            <ChatWelcome
+              onCreateSession={presenter.chatThreadManager.createSession}
             />
-          </div>
-        )}
+          ) : hideEmptyHint ? (
+            <div className="h-full" />
+          ) : snapshot.messages.length === 0 ? (
+            <div className="px-5 py-5 text-sm text-gray-500">
+              {t("chatNoMessages")}
+            </div>
+          ) : (
+            <div className="mx-auto w-full max-w-[min(1120px,100%)] px-6 py-5">
+              <ChatMessageListContainer
+                key={snapshot.sessionKey ?? "draft"}
+                messages={snapshot.messages}
+                isSending={
+                  snapshot.isSending && snapshot.isAwaitingAssistantOutput
+                }
+                onToolAction={presenter.chatThreadManager.openSessionFromToolAction}
+              />
+            </div>
+          )}
+        </div>
+
+        <ChatInputBarContainer />
       </div>
 
-      <ChatInputBarContainer />
+      {detailSessionKey ? (
+        <ChatChildSessionPanel
+          sessionKey={detailSessionKey}
+          title={snapshot.childSessionDetailLabel}
+          onClose={presenter.chatThreadManager.closeChildSessionDetail}
+          onBackToParent={presenter.chatThreadManager.goToParentSession}
+          onToolAction={presenter.chatThreadManager.openSessionFromToolAction}
+        />
+      ) : null}
     </section>
   );
 }

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

@@ -36,8 +36,8 @@ vi.mock('@/components/doc-browser', () => ({
   })
 }));
 
-vi.mock('@/components/chat/chat-session-label.service', () => ({
-  useChatSessionLabelService: () => async (params: {
+vi.mock('@/components/chat/hooks/use-chat-session-label', () => ({
+  useChatSessionLabel: () => async (params: {
     sessionKey: string;
     label: string | null;
   }) => {

package/src/components/chat/ChatSidebar.tsx

@@ -8,7 +8,7 @@ import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover
 import { SelectItem } from '@/components/ui/select';
 import { ChatSidebarSessionItem } from '@/components/chat/chat-sidebar-session-item';
 import { resolveSessionContextView } from '@/lib/session-context.utils';
-import { useChatSessionLabelService } from '@/components/chat/chat-session-label.service';
+import { useChatSessionLabel } from '@/components/chat/hooks/use-chat-session-label';
 import { useNcpSessionListView, type NcpSessionListItemView } from '@/components/chat/ncp/use-ncp-session-list-view';
 import { usePresenter } from '@/components/chat/presenter/chat-presenter-context';
 import { useChatInputStore } from '@/components/chat/stores/chat-input.store';
@@ -108,7 +108,7 @@ export function ChatSidebar() {
   const { isLoading, items } = useNcpSessionListView();
   const { language, setLanguage } = useI18n();
   const { theme, setTheme } = useTheme();
-  const updateSessionLabel = useChatSessionLabelService();
+  const updateSessionLabel = useChatSessionLabel();
   const currentThemeLabel = t(THEME_OPTIONS.find((o) => o.value === theme)?.labelKey ?? 'themeWarm');
   const currentLanguageLabel = LANGUAGE_OPTIONS.find((o) => o.value === language)?.label ?? language;
 

package/src/components/chat/adapters/chat-input-bar.adapter.test.ts

@@ -18,6 +18,7 @@ describe('buildChatSlashItems', () => {
   const texts = {
     slashSkillSubtitle: 'Skill',
     slashSkillSpecLabel: 'Spec',
+    slashSkillScopeLabel: 'Scope',
     noSkillDescription: 'No description'
   };
 

package/src/components/chat/adapters/chat-input-bar.adapter.ts

@@ -12,6 +12,7 @@ export type ChatThinkingLevel = 'off' | 'minimal' | 'low' | 'medium' | 'high' |
 export type ChatSkillRecord = {
   key: string;
   label: string;
+  scopeLabel?: string;
   description?: string;
   descriptionZh?: string;
   badgeLabel?: string;
@@ -43,6 +44,7 @@ const SLASH_ITEM_MATCH_SCORE = {
 export type ChatInputBarAdapterTexts = {
   slashSkillSubtitle: string;
   slashSkillSpecLabel: string;
+  slashSkillScopeLabel: string;
   noSkillDescription: string;
   recentSkillsLabel: string;
   allSkillsLabel: string;
@@ -171,7 +173,7 @@ function prioritizeSkillRecords(skillRecords: ChatSkillRecord[], recentSkillValu
 export function buildChatSlashItems(
   skillRecords: ChatSkillRecord[],
   normalizedSlashQuery: string,
-  texts: Pick<ChatInputBarAdapterTexts, 'slashSkillSubtitle' | 'slashSkillSpecLabel' | 'noSkillDescription'>,
+  texts: Pick<ChatInputBarAdapterTexts, 'slashSkillSubtitle' | 'slashSkillSpecLabel' | 'slashSkillScopeLabel' | 'noSkillDescription'>,
   recentSkillValues: string[] = []
 ): ChatSlashItem[] {
   const skillSortCollator = new Intl.Collator(undefined, { sensitivity: 'base', numeric: true });
@@ -211,7 +213,10 @@ export function buildChatSlashItems(
       title: record.label || record.key,
       subtitle: texts.slashSkillSubtitle,
       description: (record.descriptionZh ?? record.description ?? '').trim() || texts.noSkillDescription,
-      detailLines: [`${texts.slashSkillSpecLabel}: ${record.key}`],
+      detailLines: [
+        `${texts.slashSkillSpecLabel}: ${record.key}`,
+        ...(record.scopeLabel ? [`${texts.slashSkillScopeLabel}: ${record.scopeLabel}`] : [])
+      ],
       value: record.key
     }));
 }

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

@@ -3,15 +3,13 @@ import {
   summarizeToolArgs,
   type ToolCard,
 } from "@/lib/chat-message";
-import {
-  type ChatInlineTokenSource,
-} from "@/components/chat/chat-inline-token.utils";
+import { type ChatInlineTokenSource } from "@/components/chat/chat-inline-token.utils";
 import {
   buildRenderableText,
   buildTextPart,
 } from "@/components/chat/adapters/chat-message-inline-content.adapter";
-import { buildFileOperationCardData } from "@/components/chat/adapters/chat-message.file-operation-card";
-import { buildSubagentToolCard } from "@/components/chat/adapters/chat-message.subagent-tool-card";
+import { buildFileOperationCardData } from "@/components/chat/adapters/file-operation/card";
+import { buildSessionRequestToolCard } from "@/components/chat/adapters/chat-message.session-request-tool-card";
 import type {
   ChatMessagePartViewModel,
   ChatToolPartViewModel,
@@ -79,6 +77,7 @@ export type ChatMessagePartSource =
 type ToolCardViewSource = ToolCard & {
   statusTone: ChatToolPartViewModel["statusTone"];
   statusLabel: string;
+  action?: ChatToolPartViewModel["action"];
   fileOperation?: ChatToolPartViewModel["fileOperation"];
   outputData?: unknown;
 };
@@ -116,7 +115,9 @@ function readOptionalNumber(value: unknown): number | null {
   return Number.isFinite(parsed) && parsed >= 0 ? parsed : null;
 }
 
-function isTerminalResultRecord(value: unknown): value is Record<string, unknown> {
+function isTerminalResultRecord(
+  value: unknown,
+): value is Record<string, unknown> {
   if (!isRecord(value)) {
     return false;
   }
@@ -181,9 +182,10 @@ function buildToolCard(
     toolName: toolCard.name,
     summary: toolCard.detail,
     inputLabel: texts.toolInputLabel,
-    input: "input" in toolCard && typeof toolCard.input === "string"
-      ? toolCard.input
-      : undefined,
+    input:
+      "input" in toolCard && typeof toolCard.input === "string"
+        ? toolCard.input
+        : undefined,
     output: toolCard.text,
     outputData: toolCard.outputData,
     hasResult: Boolean(toolCard.hasResult),
@@ -193,6 +195,9 @@ function buildToolCard(
       toolCard.kind === "call" ? texts.toolCallLabel : texts.toolResultLabel,
     outputLabel: texts.toolOutputLabel,
     emptyLabel: texts.toolNoOutputLabel,
+    ...("action" in toolCard && toolCard.action
+      ? { action: toolCard.action }
+      : {}),
     ...("fileOperation" in toolCard && toolCard.fileOperation
       ? { fileOperation: toolCard.fileOperation }
       : {}),
@@ -269,7 +274,10 @@ function parseStructuredValue(value: unknown): unknown {
   }
 }
 
-function buildToolInvocationInput(args?: unknown, parsedArgs?: unknown): string | undefined {
+function buildToolInvocationInput(
+  args?: unknown,
+  parsedArgs?: unknown,
+): string | undefined {
   const source = parsedArgs ?? parseStructuredValue(args);
   const text = stringifyUnknown(source).trim();
   return text || undefined;
@@ -326,14 +334,18 @@ function buildToolInvocationPart(
     return assetFileView;
   }
 
-  const subagentToolCard = buildSubagentToolCard({
+  const sessionRequestToolCard = buildSessionRequestToolCard({
     invocation,
-    texts,
+    texts: {
+      toolStatusRunningLabel: texts.toolStatusRunningLabel,
+      toolStatusCompletedLabel: texts.toolStatusCompletedLabel,
+      toolStatusFailedLabel: texts.toolStatusFailedLabel,
+    },
   });
-  if (subagentToolCard) {
+  if (sessionRequestToolCard) {
     return {
       type: "tool-card",
-      card: buildToolCard(subagentToolCard, texts),
+      card: buildToolCard(sessionRequestToolCard, texts),
     };
   }