@nextclaw/ui 0.13.11-beta.0 → 0.13.12

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

@@ -1,4 +1,4 @@
-import { AlarmClock, FileCode2, MessageSquareText, X } from "lucide-react";
+import { AlarmClock, ArrowLeft, FileCode2, MessageSquareText, X } from "lucide-react";
 import type { ResolvedChildSessionTab } from "@/features/chat/hooks/use-ncp-child-session-tabs-view";
 import type { ChatWorkspaceFileTab } from "@/features/chat/stores/chat-thread.store";
 import { AgentIdentityAvatar } from "@/shared/components/common/agent-identity";
@@ -117,10 +117,7 @@ function WorkspaceTabIcon({ agentId, kind }: Pick<WorkspaceTabViewModel, "agentI
 
   if (agentId) {
     return (
-      <AgentIdentityAvatar
-        agentId={agentId}
-        className="h-3.5 w-3.5 shrink-0"
-      />
+      <AgentIdentityAvatar agentId={agentId} className="h-3.5 w-3.5 shrink-0" />
     );
   }
 
@@ -129,82 +126,107 @@ function WorkspaceTabIcon({ agentId, kind }: Pick<WorkspaceTabViewModel, "agentI
 
 function WorkspaceTabItem({ tab }: { tab: WorkspaceTabViewModel }) {
   return (
-    <TooltipProvider delayDuration={250}>
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <div
-            className={cn(
-              "group flex max-w-[180px] min-w-0 items-center gap-1.5 border-r border-gray-200/70 border-b-2 px-2.5 py-2 transition-colors",
-              tab.active
-                ? "border-b-primary bg-white text-gray-900"
-                : "border-b-transparent bg-gray-50/85 text-gray-500 hover:bg-gray-100",
-            )}
-          >
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <div
+          className={cn(
+            "group flex max-w-[180px] min-w-0 items-center gap-1.5 border-r border-gray-200/70 border-b-2 px-2.5 py-2 transition-colors",
+            tab.active
+              ? "border-b-primary bg-white text-gray-900"
+              : "border-b-transparent bg-gray-50/85 text-gray-500 hover:bg-gray-100",
+          )}
+        >
+          {tab.onClose ? (
             <button
               type="button"
-              onClick={tab.onSelect}
-              className="flex min-w-0 flex-1 items-center gap-1.5 text-left"
+              onClick={(event) => {
+                event.stopPropagation();
+                tab.onClose?.();
+              }}
+              className="relative inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-md text-gray-400 transition-colors hover:bg-gray-200 hover:text-gray-700"
+              aria-label={t("chatWorkspaceCloseFile")}
             >
-              <WorkspaceTabIcon kind={tab.kind} agentId={tab.agentId} />
-              <span className="min-w-0 truncate text-[12px] font-medium">
-                {tab.title}
+              <span className="flex items-center justify-center group-hover:hidden">
+                <WorkspaceTabIcon kind={tab.kind} agentId={tab.agentId} />
               </span>
-              {tab.kind === "file" && tab.viewMode === "diff" ? (
-                <span className="shrink-0 rounded border border-amber-200 bg-amber-50 px-1 py-0 text-[9px] font-medium uppercase tracking-[0.08em] text-amber-700">
-                  {t("chatWorkspaceDiff")}
-                </span>
-              ) : null}
-              {tab.showUnreadDot ? (
-                <span
-                  aria-label={t("chatSessionUnread")}
-                  className="h-2 w-2 shrink-0 rounded-full bg-primary"
-                />
-              ) : null}
+              <X className="hidden h-3.5 w-3.5 group-hover:block" />
             </button>
-            {tab.onClose ? (
-              <button
-                type="button"
-                onClick={(event) => {
-                  event.stopPropagation();
-                  tab.onClose?.();
-                }}
-                className={cn(
-                  "rounded p-0.5 text-gray-400 transition-colors hover:bg-gray-200 hover:text-gray-700",
-                  tab.active ? "opacity-100" : "opacity-0 group-hover:opacity-100",
-                )}
-                aria-label={t("chatWorkspaceCloseFile")}
-              >
-                <X className="h-3 w-3" />
-              </button>
+          ) : (
+            <WorkspaceTabIcon kind={tab.kind} agentId={tab.agentId} />
+          )}
+          <button
+            type="button"
+            onClick={tab.onSelect}
+            className="flex min-w-0 flex-1 items-center gap-1.5 text-left"
+          >
+            <span className="min-w-0 truncate text-[12px] font-medium">
+              {tab.title}
+            </span>
+            {tab.kind === "file" && tab.viewMode === "diff" ? (
+              <span className="shrink-0 rounded border border-amber-200 bg-amber-50 px-1 py-0 text-[9px] font-medium uppercase tracking-[0.08em] text-amber-700">
+                {t("chatWorkspaceDiff")}
+              </span>
             ) : null}
-          </div>
-        </TooltipTrigger>
-        <TooltipContent side="bottom" className="max-w-[320px] text-xs">
-          {tab.tooltip}
-        </TooltipContent>
-      </Tooltip>
-    </TooltipProvider>
+            {tab.showUnreadDot ? (
+              <span
+                aria-label={t("chatSessionUnread")}
+                className="h-2 w-2 shrink-0 rounded-full bg-primary"
+              />
+            ) : null}
+          </button>
+        </div>
+      </TooltipTrigger>
+      <TooltipContent side="bottom" className="max-w-[320px] text-xs">
+        {tab.tooltip}
+      </TooltipContent>
+    </Tooltip>
   );
 }
 
 export function WorkspaceTabsBar({
+  onBack,
+  onClose,
   tabs,
 }: {
+  onBack?: () => void;
+  onClose: () => void;
   tabs: readonly WorkspaceTabViewModel[];
 }) {
   return (
-    <div
-      data-testid="workspace-tabs-bar"
-      className="workspace-horizontal-scrollbar overflow-x-auto overflow-y-hidden border-b border-gray-200/70 bg-gray-50/85"
-    >
+    <TooltipProvider delayDuration={250}>
       <div
-        data-testid="workspace-tabs-scroll"
-        className="flex min-w-max items-stretch"
+        data-testid="workspace-tabs-bar"
+        className="flex min-w-0 items-stretch border-b border-gray-200/70 bg-gray-50/85"
       >
-        {tabs.map((tab) => (
-          <WorkspaceTabItem key={tab.key} tab={tab} />
-        ))}
+        <div className="workspace-horizontal-scrollbar min-w-0 flex-1 overflow-x-auto overflow-y-hidden">
+          <div
+            data-testid="workspace-tabs-scroll"
+            className="flex min-w-max items-stretch"
+          >
+            {tabs.map((tab) => (
+              <WorkspaceTabItem key={tab.key} tab={tab} />
+            ))}
+          </div>
+        </div>
+        {onBack ? (
+          <button
+            type="button"
+            onClick={onBack}
+            className="mx-1 flex h-7 w-7 shrink-0 self-center items-center justify-center rounded-md text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40"
+            aria-label={t("chatBackToParent")}
+          >
+            <ArrowLeft className="h-4 w-4" />
+          </button>
+        ) : null}
+        <button
+          type="button"
+          onClick={onClose}
+          className="mx-1 flex h-7 w-7 shrink-0 self-center items-center justify-center rounded-md text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40"
+          aria-label={t("chatWorkspaceClosePanel")}
+        >
+          <X className="h-4 w-4" />
+        </button>
       </div>
-    </div>
+    </TooltipProvider>
   );
 }

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

@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useRef } from "react";
-import { ArrowLeft, FolderGit2, Loader2, X } from "lucide-react";
+import { FolderGit2, Loader2 } from "lucide-react";
 import type {
   ChatFileOpenActionViewModel,
   ChatToolActionViewModel,
@@ -43,6 +43,7 @@ type ChatSessionWorkspacePanelProps = {
   activePanelKind?: "child-session" | "file" | "cron" | null;
   sessionCronJobs?: readonly CronJobView[];
   sessionProjectRoot: string | null;
+  sessionWorkingDir: string | null;
   displayMode?: "docked" | "overlay";
 };
 
@@ -249,6 +250,7 @@ export function ChatSessionWorkspacePanel({
   activePanelKind,
   sessionCronJobs = [],
   sessionProjectRoot,
+  sessionWorkingDir,
   displayMode = "docked",
 }: ChatSessionWorkspacePanelProps) {
   const presenter = usePresenter();
@@ -269,7 +271,10 @@ export function ChatSessionWorkspacePanel({
   );
 
   useEffect(() => {
-    if (activeSelection?.kind !== "child-session" || activeSelection.tab.runStatus === "running") {
+    if (
+      activeSelection?.kind !== "child-session" ||
+      activeSelection.tab.runStatus === "running"
+    ) {
       return;
     }
     const activeTabReadAt = activeSelection.tab.lastMessageAt?.trim() ?? null;
@@ -326,29 +331,15 @@ export function ChatSessionWorkspacePanel({
       maxWidth={860}
       overlay={displayMode === "overlay"}
     >
-      <div className="flex items-center justify-between gap-3 border-b border-gray-200/70 px-4 py-2.5">
-        <button
-          type="button"
-          onClick={presenter.chatThreadManager.goToParentSession}
-          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={presenter.chatThreadManager.closeWorkspacePanel}
-          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} />
+      <WorkspaceTabsBar
+        tabs={workspaceTabs}
+        onBack={
+          hasParentSession
+            ? presenter.chatThreadManager.goToParentSession
+            : undefined
+        }
+        onClose={presenter.chatThreadManager.closeWorkspacePanel}
+      />
 
       <div className="flex min-h-0 flex-1 flex-col bg-white">
         {activeSelection.kind === "child-session" ? (
@@ -368,6 +359,7 @@ export function ChatSessionWorkspacePanel({
           <ChatSessionWorkspaceFilePreview
             file={activeSelection.file}
             sessionProjectRoot={sessionProjectRoot}
+            sessionWorkingDir={sessionWorkingDir}
             onFileOpen={presenter.chatThreadManager.openFilePreview}
           />
         ) : (

package/src/features/chat/components/conversation/chat-conversation-panel.test.tsx

@@ -552,6 +552,7 @@ describe("ChatSessionWorkspacePanel", () => {
         workspaceFileTabs={[]}
         activeWorkspaceFileKey={null}
         sessionProjectRoot="/Users/demo/project-alpha"
+        sessionWorkingDir="/Users/demo/project-alpha"
       />,
     );
 
@@ -622,6 +623,7 @@ describe("ChatSessionWorkspacePanel", () => {
         workspaceFileTabs={[]}
         activeWorkspaceFileKey={null}
         sessionProjectRoot="/Users/demo/project-alpha"
+        sessionWorkingDir="/Users/demo/project-alpha"
       />,
     );
 
@@ -645,6 +647,7 @@ describe("ChatSessionWorkspacePanel", () => {
         ]}
         activeWorkspaceFileKey="parent-session-1::preview::README.md"
         sessionProjectRoot="/Users/demo/project-alpha"
+        sessionWorkingDir="/Users/demo/project-alpha"
       />,
     );
 
@@ -653,9 +656,9 @@ describe("ChatSessionWorkspacePanel", () => {
     expect(screen.getByTestId("workspace-file-preview").textContent).toBe(
       "README.md",
     );
-    expect(screen.getByTestId("workspace-tabs-bar").className).toContain(
-      "workspace-horizontal-scrollbar",
-    );
+    expect(
+      screen.getByTestId("workspace-tabs-scroll").parentElement?.className,
+    ).toContain("workspace-horizontal-scrollbar");
   });
 
   it("renders session cron jobs in the workspace sidebar and deletes with a neutral confirmation", async () => {
@@ -691,6 +694,7 @@ describe("ChatSessionWorkspacePanel", () => {
         activePanelKind="cron"
         sessionCronJobs={[job]}
         sessionProjectRoot="/Users/demo/project-alpha"
+        sessionWorkingDir="/Users/demo/project-alpha"
       />,
     );
 

package/src/features/chat/components/conversation/chat-conversation-panel.tsx

@@ -366,6 +366,7 @@ function ChatSessionWorkspacePanelContainer({
       activePanelKind={snapshot.activeWorkspacePanelKind ?? null}
       sessionCronJobs={sessionCronJobs}
       sessionProjectRoot={snapshot.sessionProjectRoot ?? null}
+      sessionWorkingDir={snapshot.sessionWorkingDir ?? snapshot.sessionProjectRoot ?? null}
       displayMode={layoutMode === "mobile" ? "overlay" : "docked"}
     />
   );

package/src/features/chat/hooks/use-ncp-chat-derived-state.ts

@@ -119,6 +119,7 @@ export function useNcpChatSnapshotSync(params: {
   availableAgents: AgentProfileView[];
   currentSessionDisplayName?: string;
   effectiveSessionProjectRoot: string | null;
+  effectiveSessionWorkingDir: string | null;
   effectiveSessionProjectName: string | null;
   selectedSession: SessionEntryView | null;
   threadRef: MutableRefObject<HTMLDivElement | null>;
@@ -159,6 +160,7 @@ export function useNcpChatSnapshotSync(params: {
       availableAgents: params.availableAgents,
       sessionDisplayName: params.currentSessionDisplayName,
       sessionProjectRoot: params.effectiveSessionProjectRoot,
+      sessionWorkingDir: params.effectiveSessionWorkingDir,
       sessionProjectName: params.effectiveSessionProjectName,
       canDeleteSession: Boolean(params.selectedSession),
       threadRef: params.threadRef,

package/src/features/chat/pages/ncp-chat-page.tsx

@@ -195,6 +195,8 @@ function useNcpChatPageState(presenter: NcpChatPresenter) {
   const effectiveSessionProjectRoot = hasSessionProjectRootOverride
     ? pendingProjectRoot
     : (selectedSession?.projectRoot ?? null);
+  const effectiveSessionWorkingDir =
+    selectedSession?.workingDir ?? effectiveSessionProjectRoot;
   const effectiveSessionProjectName = hasSessionProjectRootOverride
     ? getSessionProjectName(effectiveSessionProjectRoot)
     : (selectedSession?.projectName ??
@@ -224,6 +226,7 @@ function useNcpChatPageState(presenter: NcpChatPresenter) {
     ...baseState,
     availableAgents,
     effectiveSessionProjectRoot,
+    effectiveSessionWorkingDir,
     effectiveSessionProjectName,
     isSending: agent.isSending || currentSessionRunning,
     isAwaitingAssistantOutput: currentSessionRunning,
@@ -438,6 +441,7 @@ export function NcpChatPage({ view }: ChatPageProps) {
     availableAgents: state.availableAgents,
     currentSessionDisplayName: state.currentSessionDisplayName,
     effectiveSessionProjectRoot: state.effectiveSessionProjectRoot,
+    effectiveSessionWorkingDir: state.effectiveSessionWorkingDir,
     effectiveSessionProjectName: state.effectiveSessionProjectName,
     selectedSession: state.selectedSession,
     threadRef: state.threadRef,

package/src/features/chat/stores/chat-thread.store.ts

@@ -47,6 +47,7 @@ export type ChatThreadSnapshot = {
   availableAgents?: AgentProfileView[];
   sessionDisplayName?: string;
   sessionProjectRoot?: string | null;
+  sessionWorkingDir?: string | null;
   sessionProjectName?: string | null;
   canDeleteSession: boolean;
   isDeletePending: boolean;
@@ -86,6 +87,7 @@ const initialSnapshot: ChatThreadSnapshot = {
   availableAgents: [],
   sessionDisplayName: undefined,
   sessionProjectRoot: null,
+  sessionWorkingDir: null,
   sessionProjectName: null,
   canDeleteSession: false,
   isDeletePending: false,

package/src/features/chat/utils/ncp-session-adapter.utils.test.ts

@@ -22,6 +22,7 @@ describe('adaptNcpSessionSummary', () => {
       createSummary({
         agentId: 'engineer',
         lastMessageAt: '2026-03-18T00:00:00.000Z',
+        workingDir: '/Users/demo/workspace/project-alpha',
         metadata: {
           label: 'NCP Planning Thread',
           model: 'openai/gpt-5',
@@ -40,6 +41,7 @@ describe('adaptNcpSessionSummary', () => {
       preferredModel: 'openai/gpt-5',
       preferredThinking: 'medium',
       projectRoot: '/Users/demo/workspace/project-alpha',
+      workingDir: '/Users/demo/workspace/project-alpha',
       projectName: 'project-alpha',
       lastMessageAt: '2026-03-18T00:00:00.000Z',
       readAt: '2026-03-17T23:59:00.000Z',
@@ -50,6 +52,25 @@ describe('adaptNcpSessionSummary', () => {
     });
   });
 
+  it('uses workingDir as the local file base even when projectRoot is absent', () => {
+    const adapted = adaptNcpSessionSummary(
+      createSummary({
+        workingDir: '/Users/demo/workspace',
+        metadata: {
+          label: 'Workspace Thread',
+          session_type: 'native',
+        },
+      }),
+    );
+
+    expect(adapted).toMatchObject({
+      key: 'ncp-session-1',
+      label: 'Workspace Thread',
+      workingDir: '/Users/demo/workspace',
+    });
+    expect(adapted.projectRoot).toBeUndefined();
+  });
+
   it('marks child sessions from parent_session_id metadata and keeps the request link', () => {
     const adapted = adaptNcpSessionSummary(
       createSummary({

package/src/features/chat/utils/ncp-session-adapter.utils.ts

@@ -120,6 +120,10 @@ function readNcpSessionProjectRoot(summary: NcpSessionSummaryView): string | nul
   return normalizeSessionProjectRootValue(metadata.project_root ?? metadata.projectRoot);
 }
 
+function readNcpSessionWorkingDir(summary: NcpSessionSummaryView): string | null {
+  return readOptionalString(summary.workingDir);
+}
+
 function readNcpSessionReadAt(summary: NcpSessionSummaryView): string | null {
   const metadata = readMetadata(summary);
   if (!metadata) {
@@ -308,6 +312,7 @@ export function adaptNcpSessionSummary(summary: NcpSessionSummaryView): SessionE
   const preferredModel = readNcpSessionPreferredModel(summary);
   const preferredThinking = readNcpSessionPreferredThinking(summary);
   const projectRoot = readNcpSessionProjectRoot(summary);
+  const workingDir = readNcpSessionWorkingDir(summary) ?? projectRoot;
   const readAt = readNcpSessionReadAt(summary);
   const lastMessageAt = readOptionalString(summary.lastMessageAt);
   const projectName = getSessionProjectName(projectRoot);
@@ -328,6 +333,7 @@ export function adaptNcpSessionSummary(summary: NcpSessionSummaryView): SessionE
     ...(preferredModel ? { preferredModel } : {}),
     ...(preferredThinking ? { preferredThinking } : {}),
     ...(projectRoot ? { projectRoot } : {}),
+    ...(workingDir ? { workingDir } : {}),
     ...(projectName ? { projectName } : {}),
     sessionType: readNcpSessionType(summary),
     sessionTypeMutable: false,