@nextclaw/ui 0.25.4 → 0.26.0

package/src/features/chat/features/session/components/session-header/chat-session-more-actions-menu.tsx

@@ -1,3 +1,6 @@
+import { PageResourceActionItems } from '@/features/right-panel-resources';
+import { pageResourceFromTarget } from '@/features/right-panel-resources';
+import { buildSessionPanelUrl } from '@/features/chat/features/session/utils/chat-session-route.utils';
 import { useState, type ReactNode } from 'react';
 import { copyText } from '@nextclaw/agent-chat-ui';
 import { Copy, MoreVertical } from 'lucide-react';
@@ -14,6 +17,7 @@ import { ChatSessionHeaderMenuItem } from './chat-session-header-menu-item';
 
 type ChatSessionMoreActionsMenuProps = {
   sessionKey: string;
+  sessionTitle?: string;
   children?: ReactNode;
   disabled?: boolean;
   triggerSize?: IconActionButtonSize;
@@ -30,6 +34,7 @@ export async function copySessionId(sessionKey: string) {
 
 export function ChatSessionMoreActionsMenu({
   sessionKey,
+  sessionTitle,
   children,
   disabled = false,
   triggerSize = 'md',
@@ -59,6 +64,7 @@ export function ChatSessionMoreActionsMenu({
       </PopoverTrigger>
       <ChatPopoverContent align="end" className="w-56 p-2">
         <div className="space-y-1" onClick={() => setIsOpen(false)}>
+          <PageResourceActionItems page={pageResourceFromTarget({ kind: 'chat-session', title: sessionTitle || t('chatFloatingConversation'), url: buildSessionPanelUrl(sessionKey), resourceUri: buildSessionPanelUrl(sessionKey), historyPolicy: 'none' })} onSelect={() => setIsOpen(false)} />
           <ChatSessionHeaderMenuItem
             icon={Copy}
             label={t('chatSessionCopyId')}

package/src/features/chat/features/session/utils/chat-session-route.utils.ts

@@ -1,4 +1,16 @@
 const SESSION_ROUTE_PREFIX = 'sid_';
+export const CHAT_SESSION_PANEL_KIND = 'chat-session';
+const SESSION_PANEL_PREFIX = 'nextclaw://chat-session/';
+
+export function buildSessionPanelUrl(sessionKey: string): string {
+  return SESSION_PANEL_PREFIX + encodeSessionRouteId(sessionKey);
+}
+
+export function parseSessionKeyFromPanelUrl(url: string): string | null {
+  return url.startsWith(SESSION_PANEL_PREFIX)
+    ? decodeSessionRouteId(url.slice(SESSION_PANEL_PREFIX.length))
+    : null;
+}
 export const CHAT_DRAFT_SESSION_PATH = '/chat/draft';
 const DRAFT_SESSION_ROUTE_ID = CHAT_DRAFT_SESSION_PATH.slice('/chat/'.length);
 

package/src/features/chat/features/workspace/components/__tests__/chat-session-child-sessions.test.tsx

@@ -65,6 +65,26 @@ it('keeps existing child sessions selectable beside the create action', async ()
   expect(mocks.selectChildSessionDetail).toHaveBeenCalledWith('child-1');
 });
 
+it('shows a spinner only for child sessions that are running', () => {
+  render(
+    <ChatSessionChildSessions
+      childSessionTabs={[
+        createChildSession(),
+        {
+          ...createChildSession(),
+          sessionKey: 'child-2',
+          title: 'Running branch',
+          runStatus: 'running',
+        },
+      ]}
+      sessionKey="parent-1"
+    />,
+  );
+
+  expect(screen.getAllByLabelText('Running')).toHaveLength(1);
+  expect(screen.getByRole('button', { name: /Running branch.*Running/ })).toBeTruthy();
+});
+
 it('copies a child session ID from its own more-actions menu', async () => {
   const user = userEvent.setup();
   render(<ChatSessionChildSessions childSessionTabs={[createChildSession()]} sessionKey="parent-1" />);
@@ -75,3 +95,11 @@ it('copies a child session ID from its own more-actions menu', async () => {
   expect(mocks.copyText).toHaveBeenCalledWith('child-1');
   expect(mocks.selectChildSessionDetail).not.toHaveBeenCalled();
 });
+
+vi.mock("react-router-dom", async (importOriginal) => ({ ...(await importOriginal<object>()), useNavigate: () => vi.fn(), useLocation: () => ({ pathname: '/chat', search: '' }) }));
+vi.mock("@/features/panel-apps/hooks/use-panel-apps", () => ({ usePanelApps: () => ({ data: { entries: [] } }), useUpdatePanelAppPreferences: () => ({ mutate: vi.fn() }) }));
+vi.mock("@/app/components/app-presenter-provider", async () => {
+  const { PageResourceManager } = await import("@/features/right-panel-resources/managers/page-resource.manager");
+  const app = { docBrowserManager: { openTarget: vi.fn() }, chatComposerIntentManager: { requestUiResourceReference: vi.fn() } };
+  return { useAppPresenter: () => ({ ...app, pageResourceManager: new PageResourceManager(app as never) }) };
+});

package/src/features/chat/features/workspace/components/__tests__/chat-session-workspace-file-preview.test.tsx

@@ -534,6 +534,15 @@ describe("ChatSessionWorkspaceFilePreview Office rendering", () => {
 });
 
 describe("ChatSessionWorkspaceFilePreview text rendering", () => {
+  it("renders an immutable object snapshot without reading a same-named local file", () => {
+    serverPathReadMock.mockReturnValue({ data: null, isLoading: false });
+    serverPathBrowseMock.mockReturnValue({ data: null, isLoading: false });
+    renderWorkspaceFilePreview({ file: { path: "snapshot.md", rawText: "# Resource snapshot", previewViewer: "rendered" } });
+    expect(screen.getByTestId("markdown-preview").textContent).toBe("# Resource snapshot");
+    expect(serverPathReadMock).toHaveBeenCalledWith(expect.objectContaining({ enabled: false }));
+    expect(serverPathBrowseMock).toHaveBeenCalledWith(expect.objectContaining({ enabled: false }));
+  });
+
   it("renders preview files inside a full-height workspace code surface", () => {
     mockTextRead();
     renderWorkspaceFilePreview();

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

@@ -205,7 +205,9 @@ beforeEach(() => {
   });
 });
 
-function createChildTab(): ResolvedChildSessionTab {
+function createChildTab(
+  overrides: Partial<ResolvedChildSessionTab> = {},
+): ResolvedChildSessionTab {
   return {
     sessionKey: 'child-1',
     parentSessionKey: 'parent-1',
@@ -219,6 +221,7 @@ function createChildTab(): ResolvedChildSessionTab {
     preferredModel: 'minimax/MiniMax-M3',
     projectName: 'nextbot',
     projectRoot: '/Users/peiwang/Projects/nextbot',
+    ...overrides,
   };
 }
 
@@ -252,7 +255,7 @@ it('shows child session content without a redundant metadata header', () => {
 
 it('shows all session workspace entries in the overview', async () => {
   const user = userEvent.setup();
-  const childTab = createChildTab();
+  const childTab = createChildTab({ runStatus: 'running' });
 
   render(
     <ChatSessionWorkspacePanelContent
@@ -277,6 +280,7 @@ it('shows all session workspace entries in the overview', async () => {
   const projectFilesButton = screen.getByRole('button', { name: /Project files/ });
 
   expect((childSessionsButton as HTMLButtonElement).disabled).toBe(false);
+  expect(within(childSessionsButton).getByLabelText('Running')).toBeTruthy();
   expect((cronJobsButton as HTMLButtonElement).disabled).toBe(false);
   expect(projectFilesButton.compareDocumentPosition(screen.getByText('Token usage')) & Node.DOCUMENT_POSITION_FOLLOWING)
     .toBeTruthy();

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

@@ -1,4 +1,18 @@
-import { render, screen } from "@testing-library/react";
+import { getPresenter } from '@/app/presenters/app.presenter';
+import { buildSessionPath } from '@/features/chat/features/session/utils/chat-session-route.utils';
+import { AppPresenterProvider } from '@/app/components/app-presenter-provider';
+import type { ReactElement } from 'react';
+import { MemoryRouter } from 'react-router-dom';
+
+vi.mock('@/features/panel-apps/hooks/use-panel-apps', () => ({
+  usePanelApps: () => ({ data: { entries: [] } }),
+  useUpdatePanelAppPreferences: () => ({ mutate: vi.fn(), isPending: false }),
+}));
+function render(ui: ReactElement) {
+  return renderUi(<AppPresenterProvider><MemoryRouter initialEntries={[buildSessionPath('session-1')]}>{ui}</MemoryRouter></AppPresenterProvider>);
+}
+import { useWorkbenchSurfaceStore } from '@/shared/components/workbench/stores/workbench-surface.store';
+import { render as renderUi, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import { ChatSessionWorkspacePanel } from "@/features/chat/features/workspace/components/chat-session-workspace-panel";
@@ -91,7 +105,9 @@ function renderPanel(displayMode: "docked" | "overlay" = "docked") {
 
 describe("ChatSessionWorkspacePanel", () => {
   beforeEach(() => {
+    useWorkbenchSurfaceStore.setState({ surfaces: {} });
     vi.clearAllMocks();
+    vi.spyOn(getPresenter().chatComposerIntentManager, 'requestFileReference').mockImplementation(mocks.requestFileReference);
   });
 
   it("refreshes the active workspace file from the top action bar", async () => {
@@ -130,23 +146,46 @@ describe("ChatSessionWorkspacePanel", () => {
             onSelect: vi.fn(),
           },
         ]}
-        onClose={vi.fn()}
         onGoBack={vi.fn()}
         onGoForward={vi.fn()}
       />,
     );
 
-    await user.click(screen.getByRole("button", { name: "More actions" }));
+    await user.click(screen.getByRole("button", { name: "Page actions: Child session" }));
 
     expect(screen.getByRole("menuitem", { name: "Copy session ID" })).toBeTruthy();
   });
 
+  it("shows the running spinner on workspace tabs", () => {
+    render(
+      <WorkspaceTabsBar
+        canGoBack={false}
+        canGoForward={false}
+        tabs={[
+          {
+            key: "child-sessions",
+            kind: "child-sessions",
+            title: "Child sessions",
+            tooltip: "Child sessions",
+            active: true,
+            runStatus: "running",
+            onSelect: vi.fn(),
+          },
+        ]}
+        onGoBack={vi.fn()}
+        onGoForward={vi.fn()}
+      />,
+    );
+
+    expect(screen.getByLabelText("Running")).toBeTruthy();
+  });
+
   it("adds an opened project file to the active chat from its action menu", async () => {
     const user = userEvent.setup();
     renderPanel();
 
     await user.click(
-      screen.getByRole("button", { name: "File actions" }),
+      screen.getByRole("button", { name: "Page actions: Preview: README.md" }),
     );
     await user.click(screen.getByRole("menuitem", { name: "Add to chat" }));
 
@@ -166,17 +205,17 @@ describe("ChatSessionWorkspacePanel", () => {
     expect(panel.getAttribute("data-theme-surface")).toBe("workspace-panel");
 
     await user.click(
-      screen.getByRole("button", { name: "Maximize workspace panel" }),
+      screen.getByRole("button", { name: "Maximize" }),
     );
 
-    expect(panel.className).toContain("absolute");
-    expect(panel.className).not.toContain("fixed");
+    expect(panel.style.position).toBe("fixed");
+    expect(panel.style.position).toBe("fixed");
     expect(
       screen.queryByTestId("resizable-right-panel-handle"),
     ).toBeNull();
 
     await user.click(
-      screen.getByRole("button", { name: "Restore workspace panel" }),
+      screen.getByRole("button", { name: "Restore size" }),
     );
 
     expect(panel.className).not.toContain("absolute");
@@ -187,10 +226,8 @@ describe("ChatSessionWorkspacePanel", () => {
     renderPanel("overlay");
 
     expect(
-      screen.queryByRole("button", { name: "Maximize workspace panel" }),
+      screen.queryByRole("button", { name: "Maximize" }),
     ).toBeNull();
-    expect(screen.getByTestId("chat-session-workspace-panel").className).toContain(
-      "fixed",
-    );
+    expect(screen.getByTestId("chat-session-workspace-panel").style.position).toBe("fixed");
   });
 });

package/src/features/chat/features/workspace/components/chat-session-workspace-file-preview.tsx

@@ -152,30 +152,34 @@ export function resolveWorkspacePreviewErrorText(error: unknown): string {
     : t('chatWorkspacePreviewFailed');
 }
 
-function WorkspaceDiffBody({ diffBlock }: { diffBlock: ChatFileOperationBlockViewModel | null }) {
+function WorkspaceDiffBody({ diffBlock, fileKey }: { diffBlock: ChatFileOperationBlockViewModel | null; fileKey: string }) {
   if (!diffBlock) {
     return <WorkspaceFilePreviewStatus text={t('chatWorkspaceDiffEmpty')} />;
   }
-  return <WorkspaceCodeSurface block={diffBlock} />;
+  return <WorkspaceCodeSurface block={diffBlock} restorationKey={`workspace-preview:diff:${fileKey}`} />;
 }
 
 function WorkspaceCodeSurface({
   block,
+  restorationKey,
   targetColumn,
   targetLine,
 }: {
   block: ChatFileOperationBlockViewModel;
+  restorationKey: string;
   targetColumn?: number | null;
   targetLine?: number | null;
 }) {
+  const { scrollRef, onScroll } = useScrollRestoration<HTMLDivElement>({ restorationKey, isEnabled: !targetLine });
   return (
-    <div className="h-full overflow-auto custom-scrollbar bg-white">
+    <div ref={scrollRef} onScroll={onScroll} className="h-full overflow-auto custom-scrollbar bg-card">
       <FileOperationCodeSurface block={block} layout="workspace" targetColumn={targetColumn} targetLine={targetLine} />
     </div>
   );
 }
 
 function WorkspacePreviewBody({
+  fileKey,
   contentUrl,
   contentUrlKind,
   contentLabel,
@@ -194,6 +198,7 @@ function WorkspacePreviewBody({
   targetColumn,
   targetLine,
 }: {
+  fileKey: string;
   contentUrl: string | null;
   contentUrlKind: WorkspaceFileContentKind | null;
   contentLabel: string;
@@ -272,7 +277,7 @@ function WorkspacePreviewBody({
   }
 
   if (previewBlock) {
-    return <WorkspaceCodeSurface block={previewBlock} targetColumn={targetColumn} targetLine={targetLine} />;
+    return <WorkspaceCodeSurface block={previewBlock} restorationKey={`workspace-preview:source:${fileKey}`} targetColumn={targetColumn} targetLine={targetLine} />;
   }
 
   return <WorkspaceFilePreviewStatus text={t('chatWorkspacePreviewEmpty')} />;
@@ -304,7 +309,7 @@ export function ChatSessionWorkspaceFilePreview({
   const markdownScrollRef = useRef<HTMLDivElement>(null);
   const isPreviewMode = file.viewMode === 'preview';
   const suppliedContentUrl = file.contentUrl?.trim() || null;
-  const usesServerPath = isPreviewMode && !suppliedContentUrl;
+  const usesServerPath = isPreviewMode && !suppliedContentUrl && file.rawText == null;
   const previewQuery = useServerPathRead({
     path: file.path,
     basePath: sessionWorkingDir,
@@ -338,6 +343,7 @@ export function ChatSessionWorkspaceFilePreview({
   const localContentUrlCandidate = buildServerPathContentUrl(file.path, sessionWorkingDir);
   const shouldRenderLocalContent = Boolean(
     !suppliedContentUrl &&
+    file.rawText == null &&
     isPreviewMode &&
     localContentUrlCandidate &&
     file.previewViewer !== 'source' &&
@@ -400,6 +406,7 @@ export function ChatSessionWorkspaceFilePreview({
   );
   const previewBody = (
     <WorkspacePreviewBody
+      fileKey={file.key}
       contentUrl={contentUrl}
       contentUrlKind={contentUrlKind}
       contentLabel={file.label?.trim() || resolvedPath}
@@ -445,7 +452,7 @@ export function ChatSessionWorkspaceFilePreview({
 
       <div className="flex-1 min-h-0 overflow-hidden">
         {file.viewMode === 'diff' ? (
-          <WorkspaceDiffBody diffBlock={diffBlock} />
+          <WorkspaceDiffBody diffBlock={diffBlock} fileKey={file.key} />
         ) : excerptPath && previewText ? (
           <WorkspaceTextSelectionMenu
             fileLabel={file.label?.trim() || excerptPath.split('/').at(-1) || excerptPath}

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

@@ -17,6 +17,7 @@ import { ChatSessionWorkspaceFilePreview } from '@/features/chat/features/worksp
 import { ChatSessionWorkspaceDirectoryBrowser } from '@/features/chat/features/workspace/components/chat-session-workspace-directory-browser';
 import { SessionCronJobContent } from '@/features/chat/features/workspace/components/session-cron-job-content';
 import { ChatSessionChildSessions } from '@/features/chat/features/workspace/components/child-sessions/chat-session-child-sessions';
+import { SessionRunBadge } from '@/features/chat/features/session/components/session-run-badge';
 import { ChatSessionTokenUsage } from '@/features/chat/features/workspace/components/overview/chat-session-token-usage';
 import { ChatSessionContinuousAttention } from '@/features/chat/features/workspace/components/overview/chat-session-continuous-attention';
 import { useNcpSessionObservations } from '@/features/chat/features/ncp/hooks/use-ncp-session-queries';
@@ -32,6 +33,7 @@ import { t } from '@/shared/lib/i18n';
 import { resolveWorkspaceRelativePath } from '@/shared/lib/session-project';
 import { cn } from '@/shared/lib/utils';
 import { IconActionButton } from '@/shared/components/ui/actions/icon-action-button';
+import type { SessionRunStatus } from '@/features/chat/types/session-run-status.types';
 
 type ChatSessionWorkspacePanelContentProps = {
   activeSelection: WorkspaceSelection;
@@ -51,12 +53,14 @@ function WorkspaceOverviewEntry({
   description,
   icon,
   onClick,
+  runStatus,
   title,
 }: {
   count?: number;
   description: string;
   icon: ReactNode;
   onClick: () => void;
+  runStatus?: SessionRunStatus;
   title: string;
 }) {
   return (
@@ -76,6 +80,7 @@ function WorkspaceOverviewEntry({
               {count}
             </span>
           ) : null}
+          {runStatus ? <SessionRunBadge status={runStatus} /> : null}
         </span>
         <span className="mt-0.5 block text-xs leading-5 text-gray-500">{description}</span>
       </span>
@@ -117,6 +122,7 @@ function WorkspaceOverview({
             count={childSessionTabs.length}
             description={t('chatWorkspaceChildSessionsDescription')}
             icon={<GitBranch className="h-4 w-4" />}
+            runStatus={childSessionTabs.some((tab) => tab.runStatus === 'running') ? 'running' : undefined}
             title={t('chatWorkspaceChildSessions')}
             onClick={() => {
               if (sessionKey) {

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

@@ -8,15 +8,16 @@ import {
   FolderTree,
   GitBranch,
   LayoutDashboard,
-  Maximize2,
   MessageSquarePlus,
   MessageSquareText,
-  Minimize2,
   RefreshCw,
+  PanelRight,
+  PictureInPicture2,
   X,
 } from "lucide-react";
 import type { WorkspaceTabViewModel } from "@/features/chat/features/workspace/utils/chat-workspace-panel-view-model.utils";
 import { copySessionId } from "@/features/chat/features/session/components/session-header/chat-session-more-actions-menu";
+import { SessionRunBadge } from "@/features/chat/features/session/components/session-run-badge";
 import { AgentIdentityAvatar } from "@/shared/components/common/agent-identity";
 import { FileTypeIcon } from "@/shared/components/file-type-icon";
 import {
@@ -104,7 +105,7 @@ function buildWorkspaceFileMenuGroups(
     ? [{
         key: "close",
         icon: <X className="h-4 w-4" />,
-        label: t("chatWorkspaceCloseFile"),
+        label: t("workbenchCloseTab"),
         onSelect: tab.onClose,
       }]
     : [];
@@ -153,7 +154,9 @@ function buildCompactWorkspaceTabs(
         fileName={tab.fileName}
       />
     ),
-    badge: tab.kind === "file" && tab.viewMode === "diff" ? (
+    badge: tab.runStatus ? (
+      <SessionRunBadge status={tab.runStatus} />
+    ) : 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>
@@ -162,41 +165,39 @@ function buildCompactWorkspaceTabs(
     closeLabel: `${
       tab.kind === "file"
         ? t("chatWorkspaceCloseFile")
-        : t("chatWorkspaceCloseTab")
+        : t("workbenchCloseTab")
     }: ${tab.title}`,
     closePlacement: "leading-hover",
     onSelect: tab.onSelect,
     onClose: tab.onClose,
-    menuLabel:
-      tab.kind === "child-session"
-        ? t("chatSessionMoreActions")
-        : t("chatWorkspaceFileMoreActions"),
-    menuGroups:
-      tab.menuGroups ??
-      buildWorkspaceSessionMenuGroups(tab) ??
-      buildWorkspaceFileMenuGroups(tab),
+    menuLabel: `${t('pageActions')}: ${tab.title}`,
+    menuGroups: [
+      ...(tab.menuGroups ?? []),
+      ...(buildWorkspaceSessionMenuGroups(tab) ?? buildWorkspaceFileMenuGroups(tab) ?? []).map((group) => ({
+        ...group,
+        items: group.items.filter((item) => !tab.menuGroups?.some((shared) => shared.items.some((action) => action.key === item.key))),
+      })).filter((group) => group.items.length > 0),
+      { key: 'placement', items: [
+        ...(tab.onMoveGlobal ? [{ key: 'move-global', label: t('workbenchMoveGlobal'), icon: <PanelRight className="h-4 w-4" />, onSelect: tab.onMoveGlobal }] : []),
+        ...(tab.onFloat ? [{ key: 'float', label: t('workbenchFloatView'), icon: <PictureInPicture2 className="h-4 w-4" />, onSelect: tab.onFloat }] : []),
+      ] },
+    ],
   }));
 }
 
 export function WorkspaceTabsBar({
   canGoBack,
   canGoForward,
-  isMaximized = false,
-  onClose,
   onGoBack,
   onGoForward,
   onRefreshFile,
-  onToggleMaximize,
   tabs,
 }: {
   canGoBack: boolean;
   canGoForward: boolean;
-  isMaximized?: boolean;
-  onClose: () => void;
   onGoBack: () => void;
   onGoForward: () => void;
   onRefreshFile?: () => void;
-  onToggleMaximize?: () => void;
   tabs: readonly WorkspaceTabViewModel[];
 }) {
   const compactTabs = buildCompactWorkspaceTabs(tabs);
@@ -213,27 +214,11 @@ export function WorkspaceTabsBar({
           },
         ]
       : []),
-    ...(onToggleMaximize
-      ? [
-          {
-            key: "maximize",
-            icon: isMaximized ? (
-              <Minimize2 className="h-4 w-4" />
-            ) : (
-              <Maximize2 className="h-4 w-4" />
-            ),
-            label: isMaximized
-              ? t("chatWorkspaceRestorePanel")
-              : t("chatWorkspaceMaximizePanel"),
-            onClick: onToggleMaximize,
-          },
-        ]
-      : []),
-    { key: "close", icon: <X className="h-4 w-4" />, label: t("chatWorkspaceClosePanel"), onClick: onClose },
   ];
 
   return (
     <CompactTabStrip
+      className="h-10 min-w-0 flex-1 border-0 bg-transparent px-0"
       testId="workspace-tabs-bar"
       scrollTestId="workspace-tabs-scroll"
       tabs={compactTabs}

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

@@ -1,3 +1,8 @@
+import { usePageResourceActions } from '@/features/right-panel-resources';
+import { pageResourceFromTarget } from '@/features/right-panel-resources';
+import { createWorkspaceFilePanelTarget } from '@/features/chat/features/workspace/utils/workspace-file-panel-route.utils';
+import { buildSessionPanelUrl } from '@/features/chat/features/session/utils/chat-session-route.utils';
+import { sessionSurfaceManager } from '@/features/chat/managers/session-surface.manager';
 import { useEffect, useMemo, useState } from "react";
 import { useQueryClient } from "@tanstack/react-query";
 import type { CronJobView } from "@/shared/lib/api";
@@ -23,8 +28,9 @@ import {
 import { WorkspaceTabsBar } from "./chat-session-workspace-panel-nav";
 import { usePresenter } from "@/features/chat/components/providers/chat-presenter.provider";
 import { ChatSessionWorkspacePanelContent } from "@/features/chat/features/workspace/components/chat-session-workspace-panel-content";
-import { ResizableRightPanel } from "@/shared/components/resizable-right-panel/resizable-right-panel";
-import { cn } from "@/shared/lib/utils";
+import { WorkbenchSurface } from "@/shared/components/workbench/workbench-surface";
+import { getAppPresenter } from "@/app/presenters/app.presenter";
+import { t } from "@/shared/lib/i18n";
 import {
   canGoBackInNavigationHistory,
   canGoForwardInNavigationHistory,
@@ -34,6 +40,7 @@ import { buildServerPathReadQueryKey } from "@/shared/hooks/use-server-path-read
 
 type ChatSessionWorkspacePanelProps = {
   sessionKey: string | null;
+  hidden?: boolean;
   childSessionTabs: readonly ChatChildSessionTab[];
   activeChildSessionKey: string | null;
   activeSideChatDraft: ChatWorkspaceSideChatDraft | null;
@@ -55,6 +62,7 @@ type ChatSessionWorkspacePanelProps = {
 
 export function ChatSessionWorkspacePanel({
   sessionKey,
+  hidden = false,
   childSessionTabs,
   activeChildSessionKey,
   activeSideChatDraft,
@@ -74,8 +82,8 @@ export function ChatSessionWorkspacePanel({
   displayMode = "docked",
 }: ChatSessionWorkspacePanelProps) {
   const presenter = usePresenter();
+  const pageActions = usePageResourceActions();
   const queryClient = useQueryClient();
-  const [isMaximized, setIsMaximized] = useState(false);
   const [filePreviewRefreshVersion, setFilePreviewRefreshVersion] = useState(0);
   const resolvedChildTabs = useNcpChildSessionTabsView(childSessionTabs);
   const optimisticReadAtBySessionKey = useChatSessionListStore(
@@ -159,8 +167,6 @@ export function ChatSessionWorkspacePanel({
     return null;
   }
 
-  const isContainerMaximized = displayMode === "docked" && isMaximized;
-  const isOverlayPanel = displayMode === "overlay" || isContainerMaximized;
   const activeFile =
     activeSelection.kind === "file" && activeSelection.file.viewMode === "preview"
       ? activeSelection.file
@@ -185,40 +191,43 @@ export function ChatSessionWorkspacePanel({
     : undefined;
 
   return (
-    <ResizableRightPanel
-      data-testid="chat-session-workspace-panel"
-      data-theme-surface="workspace-panel"
-      className={cn(
-        isOverlayPanel
-          ? "bg-white"
-          : "hidden border-gray-200/70 bg-white/95 backdrop-blur-sm md:flex",
-        isContainerMaximized ? "shadow-xl" : null,
-      )}
-      defaultWidth={workspacePanelWidth}
-      width={workspacePanelWidth}
-      minWidth={CHAT_WORKSPACE_PANEL_MIN_WIDTH}
-      maxWidth={CHAT_WORKSPACE_PANEL_MAX_WIDTH}
+    <WorkbenchSurface
+      id={`session-workspace:${sessionKey ?? 'draft'}`} manager={getAppPresenter().workbenchSurfaceManager}
+      title={t('workbenchSessionGroup')} testId="chat-session-workspace-panel" hidden={hidden}
+      width={workspacePanelWidth} minWidth={CHAT_WORKSPACE_PANEL_MIN_WIDTH} maxWidth={CHAT_WORKSPACE_PANEL_MAX_WIDTH}
       onWidthCommit={presenter.chatThreadManager.setWorkspacePanelWidth}
-      overlay={isOverlayPanel}
-      overlayScope={isContainerMaximized ? "container" : "viewport"}
-    >
+      fullscreen={displayMode === "overlay"} onClose={presenter.chatThreadManager.closeWorkspacePanel} closeLabel={t('workbenchHideGroup')}
+      navigation={
       <WorkspaceTabsBar
-        tabs={workspaceTabs}
+        tabs={workspaceTabs.map((tab) => ({
+          ...tab,
+          menuGroups: (() => {
+            const file = workspaceFileTabs.find((item) => `file:${item.key}` === tab.key);
+            const target = file ? createWorkspaceFilePanelTarget(file, { workingDir: sessionWorkingDir, projectRoot: sessionProjectRoot })
+              : tab.sessionKey ? { kind: 'chat-session', title: tab.title, url: buildSessionPanelUrl(tab.sessionKey), resourceUri: buildSessionPanelUrl(tab.sessionKey), historyPolicy: 'none' as const } : tab.kind !== 'side-chat-draft' ? { kind: 'workspace', title: tab.title, url: `nextclaw://workspace?${new URLSearchParams({ session: sessionKey ?? '', page: tab.kind })}`, historyPolicy: 'none' as const } : null;
+            return target ? [...pageActions(pageResourceFromTarget(target), 'workspace'), ...(tab.menuGroups ?? [])] : tab.menuGroups;
+          })(),
+          onMoveGlobal: tab.kind === 'file' ? () => presenter.chatThreadManager.moveFileToGlobal(tab.key.slice('file:'.length), { workingDir: sessionWorkingDir, projectRoot: sessionProjectRoot }, getAppPresenter().docBrowserManager)
+            : tab.kind === 'child-session' && tab.sessionKey ? () => {
+              sessionSurfaceManager.dock({ sessionKey: tab.sessionKey!, title: tab.title }, getAppPresenter().docBrowserManager);
+              tab.onClose?.();
+            } : undefined,
+          onFloat: tab.kind === 'child-session' && tab.sessionKey ? () => {
+            sessionSurfaceManager.open({ sessionKey: tab.sessionKey!, title: tab.title });
+            tab.onClose?.();
+          } : undefined,
+        }))}
         canGoBack={canGoBackInNavigationHistory(workspaceHistory)}
         canGoForward={canGoForwardInNavigationHistory(workspaceHistory)}
-        isMaximized={isContainerMaximized}
         onGoBack={presenter.chatThreadManager.goBackWorkspacePanel}
         onGoForward={presenter.chatThreadManager.goForwardWorkspacePanel}
         onRefreshFile={refreshActiveFile}
-        onToggleMaximize={
-          displayMode === "docked"
-            ? () => setIsMaximized((value) => !value)
-            : undefined
-        }
-        onClose={presenter.chatThreadManager.closeWorkspacePanel}
+
       />
+      }
+    >
 
-      <div className="flex min-h-0 flex-1 flex-col bg-white">
+      <div className="flex min-h-0 flex-1 flex-col bg-card">
         <ChatSessionWorkspacePanelContent
           activeSelection={activeSelection}
           childSessionTabs={resolvedChildTabs}
@@ -232,6 +241,6 @@ export function ChatSessionWorkspacePanel({
           sessionWorkingDir={sessionWorkingDir}
         />
       </div>
-    </ResizableRightPanel>
+    </WorkbenchSurface>
   );
 }