@nextclaw/ui 0.15.2 → 0.15.4

package/dist/index.html

@@ -186,34 +186,40 @@
     })();
   </script>
   <title>NextClaw</title>
-  <script type="module" crossorigin src="/assets/index-Obd4JYU2.js"></script>
-  <link rel="modulepreload" crossorigin href="/assets/react-UirzUuST.js">
-  <link rel="modulepreload" crossorigin href="/assets/dist-7JTjycxE.js">
-  <link rel="modulepreload" crossorigin href="/assets/dist-wXLhk4hl.js">
-  <link rel="modulepreload" crossorigin href="/assets/tooltip-CjkOaHW7.js">
-  <link rel="modulepreload" crossorigin href="/assets/book-open-Ba2f7YiG.js">
-  <link rel="modulepreload" crossorigin href="/assets/plus-Bx7wQbhG.js">
-  <link rel="modulepreload" crossorigin href="/assets/x-DT5x45JU.js">
-  <link rel="modulepreload" crossorigin href="/assets/middleware-BILWbJE4.js">
-  <link rel="modulepreload" crossorigin href="/assets/doc-browser-context-CYAGm5d5.js">
-  <link rel="modulepreload" crossorigin href="/assets/es2015-j1SRCIX5.js">
-  <link rel="modulepreload" crossorigin href="/assets/switch-BU_UEULb.js">
-  <link rel="modulepreload" crossorigin href="/assets/confirm-dialog-D2EG3nqE.js">
-  <link rel="modulepreload" crossorigin href="/assets/use-confirm-dialog-CD9a_SK1.js">
-  <link rel="modulepreload" crossorigin href="/assets/host-capabilities-9bB_998Z.js">
-  <link rel="modulepreload" crossorigin href="/assets/side-dock-DPvakJ0a.js">
-  <link rel="modulepreload" crossorigin href="/assets/select-CdSEOwVM.js">
-  <link rel="modulepreload" crossorigin href="/assets/api-B7Qigvtm.js">
-  <link rel="modulepreload" crossorigin href="/assets/search-BcHjwdsb.js">
-  <link rel="modulepreload" crossorigin href="/assets/external-link-DxuPaDoK.js">
-  <link rel="modulepreload" crossorigin href="/assets/refresh-cw-eT8BF-8B.js">
-  <link rel="modulepreload" crossorigin href="/assets/doc-browser-bHyXnxlj.js">
-  <link rel="modulepreload" crossorigin href="/assets/i18n-provider-B4oMxOFx.js">
-  <link rel="modulepreload" crossorigin href="/assets/loader-circle-CdzgK4eH.js">
-  <link rel="modulepreload" crossorigin href="/assets/skeleton-P5oM14E1.js">
-  <link rel="modulepreload" crossorigin href="/assets/tag-chip-D-WsKoT1.js">
-  <link rel="modulepreload" crossorigin href="/assets/mcp-marketplace-page-Bt7CuOoq.js">
-  <link rel="stylesheet" crossorigin href="/assets/index-CvrvblgX.css">
+  <script type="module" crossorigin src="/assets/index-D_6U-M94.js"></script>
+  <link rel="modulepreload" crossorigin href="/assets/chunk-DseTPa7n.js">
+  <link rel="modulepreload" crossorigin href="/assets/react-5sjAT_6d.js">
+  <link rel="modulepreload" crossorigin href="/assets/dist-DC7f4TJH.js">
+  <link rel="modulepreload" crossorigin href="/assets/select-TYZDBNmq.js">
+  <link rel="modulepreload" crossorigin href="/assets/popover-DImguRok.js">
+  <link rel="modulepreload" crossorigin href="/assets/api-BOXOrpcJ.js">
+  <link rel="modulepreload" crossorigin href="/assets/x-DtCPHwCu.js">
+  <link rel="modulepreload" crossorigin href="/assets/confirm-dialog-GSXIvoRU.js">
+  <link rel="modulepreload" crossorigin href="/assets/search-BTqxG3ZG.js">
+  <link rel="modulepreload" crossorigin href="/assets/external-link-C6ZeSPef.js">
+  <link rel="modulepreload" crossorigin href="/assets/plus-tywizkeY.js">
+  <link rel="modulepreload" crossorigin href="/assets/refresh-cw-CHLBzWWj.js">
+  <link rel="modulepreload" crossorigin href="/assets/middleware-BLMHv9YF.js">
+  <link rel="modulepreload" crossorigin href="/assets/doc-browser-context-CGwEOhBy.js">
+  <link rel="modulepreload" crossorigin href="/assets/doc-browser-D0monHjG.js">
+  <link rel="modulepreload" crossorigin href="/assets/book-open-DWUjS6aW.js">
+  <link rel="modulepreload" crossorigin href="/assets/use-confirm-dialog-C95F6sT1.js">
+  <link rel="modulepreload" crossorigin href="/assets/download-DiP9zx-J.js">
+  <link rel="modulepreload" crossorigin href="/assets/eye-suvKmtwn.js">
+  <link rel="modulepreload" crossorigin href="/assets/folder-CMELbQGG.js">
+  <link rel="modulepreload" crossorigin href="/assets/tabs-CX-ckWoo.js">
+  <link rel="modulepreload" crossorigin href="/assets/use-viewport-layout-C6m3Nte7.js">
+  <link rel="modulepreload" crossorigin href="/assets/loader-circle-tYHStefV.js">
+  <link rel="modulepreload" crossorigin href="/assets/skeleton-CloHeg0S.js">
+  <link rel="modulepreload" crossorigin href="/assets/trash-2-SAW1Z4Po.js">
+  <link rel="modulepreload" crossorigin href="/assets/logo-badge-Cu5UGH_4.js">
+  <link rel="modulepreload" crossorigin href="/assets/host-capabilities-zZvY9U63.js">
+  <link rel="modulepreload" crossorigin href="/assets/provider-models-C_yOh6DE.js">
+  <link rel="modulepreload" crossorigin href="/assets/app-presenter-provider-CkHLbvZQ.js">
+  <link rel="modulepreload" crossorigin href="/assets/tag-chip-mCc23Rhb.js">
+  <link rel="modulepreload" crossorigin href="/assets/mcp-marketplace-page-BUzHDwW6.js">
+  <link rel="stylesheet" crossorigin href="/assets/app-presenter-provider-D3BuuOyZ.css">
+  <link rel="stylesheet" crossorigin href="/assets/index-BFeNDQ4R.css">
 </head>
 
 <body>

package/package.json

@@ -1,10 +1,13 @@
 {
   "name": "@nextclaw/ui",
-  "version": "0.15.2",
+  "version": "0.15.4",
   "private": false,
   "type": "module",
   "license": "MIT",
   "dependencies": {
+    "@aiden0z/pptx-renderer": "1.2.4",
+    "@iconify/icons-vscode-icons": "^1.2.29",
+    "@iconify/react": "^6.0.2",
     "@radix-ui/react-dialog": "^1.1.2",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-popover": "^1.1.15",
@@ -16,6 +19,7 @@
     "@tanstack/react-query": "^5.59.20",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "docx-preview": "0.4.0",
     "lucide-react": "^0.462.0",
     "qrcode": "^1.5.4",
     "react": "^18.3.1",
@@ -26,16 +30,17 @@
     "rxjs": "^7.8.2",
     "sonner": "^1.7.1",
     "tailwind-merge": "^2.5.4",
+    "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz",
     "zod": "^3.23.8",
     "zustand": "^5.0.2",
-    "@nextclaw/client-sdk": "0.5.2",
-    "@nextclaw/ncp": "0.7.2",
-    "@nextclaw/ncp-http-agent-client": "0.4.2",
-    "@nextclaw/ncp-toolkit": "0.6.2",
-    "@nextclaw/shared": "0.4.2",
-    "@nextclaw/agent-chat": "0.3.1",
-    "@nextclaw/agent-chat-ui": "0.6.2",
-    "@nextclaw/ncp-react": "0.5.2"
+    "@nextclaw/agent-chat-ui": "0.6.4",
+    "@nextclaw/client-sdk": "0.5.4",
+    "@nextclaw/ncp": "0.7.3",
+    "@nextclaw/ncp-react": "0.5.4",
+    "@nextclaw/ncp-toolkit": "0.6.4",
+    "@nextclaw/shared": "0.4.3",
+    "@nextclaw/agent-chat": "0.3.2",
+    "@nextclaw/ncp-http-agent-client": "0.4.3"
   },
   "devDependencies": {
     "@testing-library/react": "^16.3.0",

package/src/app/components/layout/sidebar-items.tsx

@@ -110,7 +110,7 @@ export function SidebarNavLinkItem({
       aria-label={label}
       aria-current={isActive ? "page" : undefined}
       className={cn(
-        "group flex w-full items-center rounded-xl font-medium transition-colors duration-base focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/35",
+        "group flex w-full items-center rounded-xl font-medium transition-colors duration-base focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border",
         collapsed
           ? cn(SIDEBAR_RAIL_CONTROL_CLASS, "justify-center px-0 py-0")
           : tone.row,
@@ -213,7 +213,7 @@ export function SidebarActionItem({
       onClick={onClick}
       aria-label={label}
       className={cn(
-        "group flex w-full items-center rounded-xl font-medium text-muted-foreground transition-colors duration-base hover:bg-gray-200/60 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/35",
+        "group flex w-full items-center rounded-xl font-medium text-muted-foreground transition-colors duration-base hover:bg-gray-200/60 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border",
         collapsed
           ? cn(
               SIDEBAR_RAIL_CONTROL_CLASS,
@@ -287,7 +287,7 @@ export function SidebarSelectItem({
     <SelectTrigger
       aria-label={label}
       className={cn(
-        "group h-auto w-full rounded-xl border-0 bg-transparent font-medium text-muted-foreground shadow-none hover:bg-gray-200/60 hover:text-gray-900 focus:ring-0 focus-visible:ring-2 focus-visible:ring-primary/35",
+        "group h-auto w-full rounded-xl border-0 bg-transparent font-medium text-muted-foreground shadow-none hover:bg-gray-200/60 hover:text-gray-900 focus:ring-0 focus-visible:ring-1 focus-visible:ring-border",
         collapsed
           ? cn(
               SIDEBAR_RAIL_CONTROL_CLASS,

package/src/app/components/layout/sidebar-rail.styles.ts

@@ -9,9 +9,9 @@ export const SIDEBAR_SCROLL_EDGE_FADE_CLASS =
   "[mask-image:linear-gradient(to_bottom,black_calc(100%_-_28px),transparent)] [-webkit-mask-image:linear-gradient(to_bottom,black_calc(100%_-_28px),transparent)]";
 
 export const SIDEBAR_RAIL_SURFACE_CLASS =
-  "text-muted-foreground transition-colors duration-base hover:bg-gray-200/60 hover:text-gray-900 active:bg-gray-200/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/35";
+  "text-muted-foreground transition-colors duration-base hover:bg-gray-200/60 hover:text-gray-900 active:bg-gray-200/80 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border";
 
 export const SIDEBAR_RAIL_ACTIVE_SURFACE_CLASS = "bg-gray-200/80 text-gray-900";
 
 export const SIDEBAR_RAIL_PRIMARY_SURFACE_CLASS =
-  "bg-primary/10 text-primary transition-colors duration-base hover:bg-primary/15 hover:text-primary-700 active:bg-primary/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/35";
+  "bg-primary/10 text-primary transition-colors duration-base hover:bg-primary/15 hover:text-primary-700 active:bg-primary/20 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border";

package/src/app/components/layout/sidebar.tsx

@@ -133,7 +133,7 @@ function SettingsSidebarHeader({
           to="/chat"
           aria-label={t("backToMain")}
           className={cn(
-            "group inline-flex min-w-0 items-center rounded-lg text-[12px] font-medium text-muted-foreground transition-colors hover:bg-gray-200/60 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/35",
+            "group inline-flex min-w-0 items-center rounded-lg text-[12px] font-medium text-muted-foreground transition-colors hover:bg-gray-200/60 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border",
             isCollapsed
               ? cn(
                   SIDEBAR_RAIL_CONTROL_CLASS,

package/src/app/styles/design-system.css

@@ -364,6 +364,19 @@
       color: hsl(var(--gray-800));
    }
 
+   /* User bubble is light in work theme; keep clickable skill tokens as link-colored text. */
+   :root[data-theme="work"] .nextclaw-chat-message-user .nextclaw-chat-inline-token {
+      border-color: transparent;
+      background-color: transparent;
+      color: var(--md-link, #1f73c9);
+      box-shadow: none;
+   }
+
+   :root[data-theme="work"] .nextclaw-chat-message-user .nextclaw-chat-inline-token > span:first-child {
+      color: currentColor;
+      opacity: 0.8;
+   }
+
 }
 
 @layer base {
@@ -894,10 +907,10 @@
       -webkit-backdrop-filter: blur(12px);
    }
 
-   /* Focus Ring */
+   /* Focus Ring — light inset-style ring, no offset box */
    .focus-ring {
-      @apply focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2;
-      --tw-ring-color: hsl(var(--ring));
-      --tw-ring-offset-color: hsl(var(--ring-offset));
+      @apply focus:outline-none focus-visible:ring-1 focus-visible:ring-offset-0;
+      --tw-ring-color: hsl(var(--border));
+      --tw-ring-offset-color: transparent;
    }
 }

package/src/features/chat/components/__tests__/chat-popover-content.test.tsx

@@ -0,0 +1,41 @@
+import { useState } from "react";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { ChatPopoverContent } from "@/features/chat/components/chat-popover-content";
+import { Popover, PopoverTrigger } from "@/shared/components/ui/popover";
+
+function ChatPopoverHarness() {
+  const [open, setOpen] = useState(true);
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger>Sessions</PopoverTrigger>
+      <ChatPopoverContent>Session search</ChatPopoverContent>
+    </Popover>
+  );
+}
+
+function appendComposerFocusTarget(): HTMLElement {
+  const shell = document.createElement("div");
+  shell.className = "nextclaw-chat-input-bar-shell";
+  const composer = document.createElement("div");
+  composer.setAttribute("contenteditable", "true");
+  composer.setAttribute("role", "textbox");
+  shell.appendChild(composer);
+  document.body.appendChild(shell);
+  return composer;
+}
+
+describe("ChatPopoverContent", () => {
+  it("keeps chat popovers open when the composer receives programmatic focus", () => {
+    const composer = appendComposerFocusTarget();
+    try {
+      render(<ChatPopoverHarness />);
+
+      fireEvent.focusIn(composer);
+
+      expect(screen.getByText("Session search")).toBeTruthy();
+    } finally {
+      composer.closest(".nextclaw-chat-input-bar-shell")?.remove();
+    }
+  });
+});

package/src/features/chat/components/chat-popover-content.tsx

@@ -0,0 +1,26 @@
+import { forwardRef, type ComponentPropsWithoutRef, type ElementRef } from "react";
+import { PopoverContent } from "@/shared/components/ui/popover";
+
+function isChatComposerFocusTarget(target: EventTarget | null): boolean {
+  return target instanceof HTMLElement && Boolean(
+    target.closest('.nextclaw-chat-input-bar-shell [role="textbox"][contenteditable="true"]'),
+  );
+}
+
+export const ChatPopoverContent = forwardRef<
+  ElementRef<typeof PopoverContent>,
+  ComponentPropsWithoutRef<typeof PopoverContent>
+>(function ChatPopoverContent({ onFocusOutside, ...props }, ref) {
+  return (
+    <PopoverContent
+      {...props}
+      ref={ref}
+      onFocusOutside={(event) => {
+        onFocusOutside?.(event);
+        if (!event.defaultPrevented && isChatComposerFocusTarget(event.detail.originalEvent.target)) {
+          event.preventDefault();
+        }
+      }}
+    />
+  );
+});

package/src/features/chat/components/conversation/__tests__/chat-conversation-content.test.tsx

@@ -3,6 +3,7 @@ import userEvent from "@testing-library/user-event";
 import type { NcpMessage } from "@nextclaw/ncp";
 import { beforeEach, expect, it, vi } from "vitest";
 import { ChatConversationContent } from "@/features/chat/components/conversation/chat-conversation-content";
+import { useChatMessageLayoutStore } from "@/features/chat/stores/chat-message-layout.store";
 
 const captures = vi.hoisted(() => ({
   isAtBottom: true,
@@ -52,11 +53,23 @@ function renderContent(options: { bottomSlot?: React.ReactNode } = {}) {
 }
 
 beforeEach(() => {
+  useChatMessageLayoutStore.getState().setLayout("card");
   captures.isAtBottom = true;
   captures.onScroll.mockReset();
   captures.scrollToBottom.mockReset();
 });
 
+it("uses the centered reading track in flat message layout", () => {
+  useChatMessageLayoutStore.getState().setLayout("flat");
+
+  renderContent();
+
+  const track = screen
+    .getByTestId("chat-message-list")
+    .closest('[data-chat-conversation-track="flat"]');
+  expect(track?.className).toContain("max-w-[min(52rem,100%)]");
+});
+
 it("hides the scroll-to-bottom action while the conversation is already at the bottom", () => {
   renderContent();
 

package/src/features/chat/components/conversation/__tests__/chat-conversation-header-section.test.tsx

@@ -13,8 +13,7 @@ import type { NcpSessionSummaryView, SessionEntryView } from "@/shared/lib/api";
 
 const mocks = vi.hoisted(() => ({
   deleteSession: vi.fn(),
-  openChildSessionPanel: vi.fn(),
-  openSessionCronPanel: vi.fn(),
+  toggleWorkspacePanel: vi.fn(),
   selectSession: vi.fn(),
   sessionItems: [] as NcpSessionListItemView[],
   isSessionListLoading: false,
@@ -24,8 +23,7 @@ vi.mock("@/features/chat/components/providers/chat-presenter.provider", () => ({
   usePresenter: () => ({
     chatThreadManager: {
       deleteSession: mocks.deleteSession,
-      openChildSessionPanel: mocks.openChildSessionPanel,
-      openSessionCronPanel: mocks.openSessionCronPanel,
+      toggleWorkspacePanel: mocks.toggleWorkspacePanel,
     },
     chatSessionListManager: {
       selectSession: mocks.selectSession,
@@ -120,8 +118,7 @@ function renderHeaderSection() {
 describe("ChatConversationHeaderSection", () => {
   beforeEach(() => {
     mocks.deleteSession.mockReset();
-    mocks.openChildSessionPanel.mockReset();
-    mocks.openSessionCronPanel.mockReset();
+    mocks.toggleWorkspacePanel.mockReset();
     mocks.selectSession.mockReset();
     mocks.isSessionListLoading = false;
     viewportLayoutManager.resetForTests();
@@ -195,16 +192,29 @@ describe("ChatConversationHeaderSection", () => {
     ];
   });
 
-  it("shows the child-session entry from session query state before a tool card opens it", async () => {
+  it("opens the current session workspace overview from the header", async () => {
     const user = userEvent.setup();
 
     renderHeaderSection();
-    await user.click(screen.getByRole("button", { name: "View child sessions" }));
+    await user.click(screen.getByRole("button", { name: "Open session workspace" }));
 
-    expect(mocks.openChildSessionPanel).toHaveBeenCalledWith({
-      parentSessionKey: "parent-session-1",
-      activeChildSessionKey: "child-session-1",
+    expect(mocks.toggleWorkspacePanel).toHaveBeenCalledWith("parent-session-1");
+  });
+
+  it("shows the close workspace action while the current session panel is open", () => {
+    useChatThreadStore.setState({
+      snapshot: {
+        ...useChatThreadStore.getState().snapshot,
+        workspacePanelParentKey: "parent-session-1",
+        activeWorkspacePanelKind: "overview",
+      },
     });
+
+    renderHeaderSection();
+
+    expect(
+      screen.getByRole("button", { name: "Close session workspace" }),
+    ).toBeTruthy();
   });
 
   it("uses the collapsed desktop title as a session switcher", async () => {

package/src/features/chat/components/conversation/__tests__/chat-conversation-header.test.tsx

@@ -51,8 +51,8 @@ describe("ChatConversationHeader", () => {
           sessionKey="session-1"
           canDeleteSession
           isDeletePending={false}
-          childSessionCount={0}
-          sessionCronJobCount={0}
+          isWorkspaceOpen={false}
+          onToggleWorkspace={vi.fn()}
           onDeleteSession={vi.fn()}
         />
       ),

package/src/features/chat/components/conversation/__tests__/chat-conversation-workspace-section.test.tsx

@@ -14,16 +14,23 @@ vi.mock("@/features/chat/features/workspace/components/chat-session-workspace-pa
   ChatSessionWorkspacePanel: ({
     sessionProjectRoot,
     sessionWorkingDir,
+    workspacePanelWidth,
   }: {
     sessionProjectRoot: string | null;
     sessionWorkingDir: string | null;
+    workspacePanelWidth: number;
   }) => {
-    mocks.panelProps({ sessionProjectRoot, sessionWorkingDir });
+    mocks.panelProps({
+      sessionProjectRoot,
+      sessionWorkingDir,
+      workspacePanelWidth,
+    });
     return (
       <div
         data-testid="workspace-panel"
         data-project-root={sessionProjectRoot ?? ""}
         data-working-dir={sessionWorkingDir ?? ""}
+        data-width={workspacePanelWidth}
       />
     );
   },
@@ -85,6 +92,7 @@ describe("ChatConversationWorkspaceSection", () => {
         workspaceNavigationHistoryIndex: 0,
         sessionProjectRoot: null,
         sessionWorkingDir: null,
+        workspacePanelWidth: 620,
       },
     });
     useChatQueryStore.setState({
@@ -122,11 +130,30 @@ describe("ChatConversationWorkspaceSection", () => {
     expect(panel.getAttribute("data-working-dir")).toBe(
       "/Users/peiwang/Projects/nextbot",
     );
+    expect(panel.getAttribute("data-width")).toBe("620");
     expect(mocks.panelProps).toHaveBeenCalledWith(
       expect.objectContaining({
         sessionProjectRoot: "/Users/peiwang/Projects/nextbot",
         sessionWorkingDir: "/Users/peiwang/Projects/nextbot",
+        workspacePanelWidth: 620,
       }),
     );
   });
+
+  it("renders an explicitly opened overview without requiring existing workspace resources", () => {
+    useChatThreadStore.getState().setSnapshot({
+      activeWorkspacePanelKind: "overview",
+      workspaceFileTabs: [],
+      activeWorkspaceFileKey: null,
+    });
+
+    render(
+      <ChatConversationWorkspaceSection
+        layoutMode="desktop"
+        sessionKey="session-1"
+      />,
+    );
+
+    expect(screen.getByTestId("workspace-panel")).toBeTruthy();
+  });
 });

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

@@ -3,6 +3,7 @@ import { useStickyBottomScroll } from "@nextclaw/agent-chat-ui";
 import type { NcpMessage } from "@nextclaw/ncp";
 import { ArrowDown } from "lucide-react";
 import { ChatMessageListContainer } from "@/features/chat/features/message/components/chat-message-list.container";
+import { ChatConversationTrack } from "@/features/chat/components/conversation/chat-conversation-track";
 import { IconActionButton } from "@/shared/components/ui/actions/icon-action-button";
 import { t } from "@/shared/lib/i18n";
 
@@ -60,17 +61,17 @@ export function ChatConversationContent({
         ) : (
           <>
             {hideEmptyHint || !hasMessages ? null : (
-              <div className="mx-auto w-full max-w-[min(1120px,100%)] px-4 py-4 sm:px-6 sm:py-5">
+              <ChatConversationTrack className="py-4 sm:py-5">
                 <ChatMessageListContainer
                   messages={messages}
                   isSending={hasMessages && isSending && isAwaitingAssistantOutput}
                 />
-              </div>
+              </ChatConversationTrack>
             )}
             {bottomSlot ? (
-              <div className="mx-auto w-full max-w-[min(1120px,100%)] px-4 pb-4 sm:px-6 sm:pb-5">
+              <ChatConversationTrack className="pb-4 sm:pb-5">
                 {bottomSlot}
-              </div>
+              </ChatConversationTrack>
             ) : null}
           </>
         )}

package/src/features/chat/components/conversation/chat-conversation-header-section.tsx

@@ -5,7 +5,6 @@ import { ChatSessionProjectBadge } from "@/features/chat/features/session/compon
 import { ChatSessionTitleSwitcher } from "@/features/chat/features/session/components/session-header/chat-session-title-switcher";
 import { usePresenter } from "@/features/chat/components/providers/chat-presenter.provider";
 import { SessionContextIconNode } from "@/features/chat/features/session/components/session-context-icon";
-import { useChatConversationWorkspaceState } from "@/features/chat/features/workspace/hooks/use-chat-conversation-workspace-state";
 import { useNcpChatSelectedSession } from "@/features/chat/features/ncp/hooks/use-ncp-chat-derived-state";
 import { sessionDisplayName } from "@/features/chat/features/session/utils/chat-session-display.utils";
 import {
@@ -59,8 +58,6 @@ export function ChatConversationHeaderSection({
   const sessionProjectName =
     selectedSession?.projectName ?? getSessionProjectName(sessionProjectRoot);
   const canDeleteSession = Boolean(selectedSession);
-  const { childSessionTabs, sessionCronJobs } =
-    useChatConversationWorkspaceState(snapshot, sessionKey);
   const shouldShowSessionHeader = Boolean(sessionKey || sessionTypeLabel);
   const sessionHeaderTitle =
     (selectedSession ? sessionDisplayName(selectedSession) : undefined) ||
@@ -72,20 +69,16 @@ export function ChatConversationHeaderSection({
     selectedSession?.agentId?.trim() ?? selectedAgentId?.trim() ?? "";
   const shouldShowHeaderAgentAvatar =
     normalizedAgentId.length > 0 && normalizedAgentId.toLowerCase() !== "main";
-  const openChildSessions = () => {
+  const isWorkspaceOpen = Boolean(
+    sessionKey &&
+      snapshot.workspacePanelParentKey === sessionKey &&
+      snapshot.activeWorkspacePanelKind,
+  );
+  const toggleWorkspace = () => {
     if (!sessionKey) {
       return;
     }
-    presenter.chatThreadManager.openChildSessionPanel({
-      parentSessionKey: sessionKey,
-      activeChildSessionKey: childSessionTabs[0]?.sessionKey ?? null,
-    });
-  };
-  const openSessionCronJobs = () => {
-    if (!sessionKey || sessionCronJobs.length === 0) {
-      return;
-    }
-    presenter.chatThreadManager.openSessionCronPanel(sessionKey);
+    presenter.chatThreadManager.toggleWorkspacePanel(sessionKey);
   };
 
   return (
@@ -148,10 +141,8 @@ export function ChatConversationHeaderSection({
             isDeletePending={snapshot.isDeletePending}
             projectRoot={sessionProjectRoot}
             metadata={selectedSession?.metadata ?? null}
-            childSessionCount={childSessionTabs.length}
-            sessionCronJobCount={sessionCronJobs.length}
-            onOpenChildSessions={openChildSessions}
-            onOpenSessionCronJobs={openSessionCronJobs}
+            isWorkspaceOpen={isWorkspaceOpen}
+            onToggleWorkspace={toggleWorkspace}
             onDeleteSession={presenter.chatThreadManager.deleteSession}
           />
         ) : null

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

@@ -0,0 +1,35 @@
+import type { ReactNode } from "react";
+import { useChatMessageLayoutStore } from "@/features/chat/stores/chat-message-layout.store";
+import { cn } from "@/shared/lib/utils";
+
+type ChatConversationTrackProps = {
+  children: ReactNode;
+  className?: string;
+  width?: "messages" | "composer";
+};
+
+export function ChatConversationTrack({
+  children,
+  className,
+  width = "messages",
+}: ChatConversationTrackProps) {
+  const layout = useChatMessageLayoutStore((state) => state.layout);
+
+  return (
+    <div
+      data-chat-conversation-track={layout}
+      data-chat-conversation-track-width={width}
+      className={cn(
+        "mx-auto w-full px-4 sm:px-6",
+        layout === "flat"
+          ? width === "composer"
+            ? "max-w-[min(54rem,100%)]"
+            : "max-w-[min(52rem,100%)]"
+          : "max-w-[min(1120px,100%)]",
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+}

package/src/features/chat/components/conversation/chat-conversation-workspace-section.tsx

@@ -42,6 +42,7 @@ export function ChatConversationWorkspaceSection({
       sessionWorkingDir={
         selectedSession?.workingDir ?? selectedSession?.projectRoot ?? null
       }
+      workspacePanelWidth={snapshot.workspacePanelWidth}
       displayMode={layoutMode === "mobile" ? "overlay" : "docked"}
     />
   );