@nextclaw/ui 0.15.3 → 0.15.4

package/dist/index.html

@@ -186,34 +186,40 @@
     })();
   </script>
   <title>NextClaw</title>
-  <script type="module" crossorigin src="/assets/index-DGqHne1Q.js"></script>
-  <link rel="modulepreload" crossorigin href="/assets/react-BPIsQIlO.js">
-  <link rel="modulepreload" crossorigin href="/assets/dist-BunzmC4B.js">
-  <link rel="modulepreload" crossorigin href="/assets/dist-ChmGwvtK.js">
-  <link rel="modulepreload" crossorigin href="/assets/tooltip-oQlEN-l6.js">
-  <link rel="modulepreload" crossorigin href="/assets/book-open-C3mJGwiy.js">
-  <link rel="modulepreload" crossorigin href="/assets/plus-D4DsdLN-.js">
-  <link rel="modulepreload" crossorigin href="/assets/x-BBMffEN0.js">
-  <link rel="modulepreload" crossorigin href="/assets/middleware-BILWbJE4.js">
-  <link rel="modulepreload" crossorigin href="/assets/doc-browser-context-BHY-0FSD.js">
-  <link rel="modulepreload" crossorigin href="/assets/es2015-DQZ5JWwK.js">
-  <link rel="modulepreload" crossorigin href="/assets/switch-Cv8Ekb3x.js">
-  <link rel="modulepreload" crossorigin href="/assets/confirm-dialog-Chv50USy.js">
-  <link rel="modulepreload" crossorigin href="/assets/use-confirm-dialog-BAxaVOJI.js">
-  <link rel="modulepreload" crossorigin href="/assets/host-capabilities-9bB_998Z.js">
-  <link rel="modulepreload" crossorigin href="/assets/side-dock-BsBvcJ9i.js">
-  <link rel="modulepreload" crossorigin href="/assets/select-BdgczSNw.js">
-  <link rel="modulepreload" crossorigin href="/assets/api-iNBpppzj.js">
-  <link rel="modulepreload" crossorigin href="/assets/search-DVIV6pfD.js">
-  <link rel="modulepreload" crossorigin href="/assets/external-link-CU0kzzIP.js">
-  <link rel="modulepreload" crossorigin href="/assets/refresh-cw-CILd1vAP.js">
-  <link rel="modulepreload" crossorigin href="/assets/doc-browser-Dg0pmkOg.js">
-  <link rel="modulepreload" crossorigin href="/assets/i18n-provider-Cu8XyZb_.js">
-  <link rel="modulepreload" crossorigin href="/assets/loader-circle-CDSFuzmk.js">
-  <link rel="modulepreload" crossorigin href="/assets/skeleton-DeX1FKw7.js">
-  <link rel="modulepreload" crossorigin href="/assets/tag-chip-RB9uKcoC.js">
-  <link rel="modulepreload" crossorigin href="/assets/mcp-marketplace-page-BeEQK0DL.js">
-  <link rel="stylesheet" crossorigin href="/assets/index-CzfBdvK1.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.3",
+  "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/agent-chat-ui": "0.6.3",
-    "@nextclaw/client-sdk": "0.5.3",
-    "@nextclaw/ncp-http-agent-client": "0.4.3",
+    "@nextclaw/agent-chat-ui": "0.6.4",
+    "@nextclaw/client-sdk": "0.5.4",
     "@nextclaw/ncp": "0.7.3",
-    "@nextclaw/ncp-toolkit": "0.6.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-react": "0.5.3"
+    "@nextclaw/ncp-http-agent-client": "0.4.3"
   },
   "devDependencies": {
     "@testing-library/react": "^16.3.0",

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"}
     />
   );

package/src/features/chat/components/layout/chat-sidebar-toolbar.tsx

@@ -3,9 +3,9 @@ import { IconActionButton } from "@/shared/components/ui/actions/icon-action-but
 import { Input } from "@/shared/components/ui/input";
 import {
   Popover,
-  PopoverContent,
   PopoverTrigger,
 } from "@/shared/components/ui/popover";
+import { ChatPopoverContent } from "@/features/chat/components/chat-popover-content";
 import { SessionContextIconNode } from "@/features/chat/features/session/components/session-context-icon";
 import { ChatSessionTypeMenu } from "@/features/chat/features/session-type/components/chat-session-type-menu";
 import type { ChatSessionTypeOption } from "@/features/chat/features/session-type/utils/chat-session-type.utils";
@@ -175,7 +175,7 @@ export function ChatSidebarDesktopToolbar(props: ChatSidebarToolbarProps) {
                   )}
                 />
               </PopoverTrigger>
-              <PopoverContent
+              <ChatPopoverContent
                 align="start"
                 side="right"
                 className="w-56 rounded-2xl border border-border bg-popover p-1.5 text-popover-foreground shadow-[0_24px_60px_-28px_rgba(15,23,42,0.38)]"
@@ -188,7 +188,7 @@ export function ChatSidebarDesktopToolbar(props: ChatSidebarToolbarProps) {
                     onCreateMenuOpenChange(false);
                   }}
                 />
-              </PopoverContent>
+              </ChatPopoverContent>
             </Popover>
           ) : null}
         </div>
@@ -238,7 +238,7 @@ export function ChatSidebarDesktopToolbar(props: ChatSidebarToolbarProps) {
                   )}
                 />
               </PopoverTrigger>
-              <PopoverContent
+              <ChatPopoverContent
                 align="end"
                 className="w-56 rounded-2xl border border-border bg-popover p-1.5 text-popover-foreground shadow-[0_24px_60px_-28px_rgba(15,23,42,0.38)]"
               >
@@ -250,7 +250,7 @@ export function ChatSidebarDesktopToolbar(props: ChatSidebarToolbarProps) {
                     onCreateMenuOpenChange(false);
                   }}
                 />
-              </PopoverContent>
+              </ChatPopoverContent>
             </Popover>
           ) : null}
         </div>
@@ -315,7 +315,7 @@ export function ChatSidebarMobileToolbar(props: ChatSidebarToolbarProps) {
                 className="h-9 w-9 shrink-0 rounded-full bg-muted text-foreground shadow-none hover:bg-accent hover:text-accent-foreground"
               />
             </PopoverTrigger>
-            <PopoverContent
+            <ChatPopoverContent
               align="end"
               className="w-60 rounded-3xl border border-border bg-popover p-2 text-popover-foreground shadow-[0_24px_70px_-30px_rgba(15,23,42,0.45)]"
             >
@@ -329,7 +329,7 @@ export function ChatSidebarMobileToolbar(props: ChatSidebarToolbarProps) {
                   onCreateMenuOpenChange(false);
                 }}
               />
-            </PopoverContent>
+            </ChatPopoverContent>
           </Popover>
         ) : (
           <IconActionButton

package/src/features/chat/components/layout/chat-sidebar-utility-menu.tsx

@@ -1,9 +1,9 @@
 import { NavLink } from "react-router-dom";
 import {
   Popover,
-  PopoverContent,
   PopoverTrigger,
 } from "@/shared/components/ui/popover";
+import { ChatPopoverContent } from "@/features/chat/components/chat-popover-content";
 import {
   Select,
   SelectContent,
@@ -52,12 +52,6 @@ type ChatSidebarUtilityMenuProps = {
   collapsed?: boolean;
 };
 
-function isChatComposerFocusTarget(target: EventTarget | null): boolean {
-  return target instanceof HTMLElement && Boolean(
-    target.closest('.nextclaw-chat-input-bar-shell [role="textbox"][contenteditable="true"]'),
-  );
-}
-
 export function ChatSidebarUtilityMenu({
   isOpen,
   onOpenChange,
@@ -118,15 +112,10 @@ export function ChatSidebarUtilityMenu({
           </button>
         </PopoverTrigger>
       )}
-      <PopoverContent
+      <ChatPopoverContent
         side={collapsed ? "right" : "top"}
         align={collapsed ? "end" : "start"}
         className="w-64 p-2"
-        onFocusOutside={(event) => {
-          if (isChatComposerFocusTarget(event.detail.originalEvent.target)) {
-            event.preventDefault();
-          }
-        }}
       >
         <div className="space-y-1">
           <NavLink
@@ -177,7 +166,7 @@ export function ChatSidebarUtilityMenu({
           onSelect={onSelectLanguage}
           onCloseMenu={() => onOpenChange(false)}
         />
-      </PopoverContent>
+      </ChatPopoverContent>
     </Popover>
   );
 }

package/src/features/chat/features/conversation/components/__tests__/session-conversation-input.streaming.test.tsx

@@ -6,7 +6,7 @@ import {
   type MutableRefObject,
 } from 'react';
 import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
-import { describe, expect, it, vi } from 'vitest';
+import { afterEach, describe, expect, it, vi } from 'vitest';
 import {
   createChatComposerTextNode,
   type ChatComposerNode,
@@ -26,9 +26,14 @@ import type {
   SessionConversationInputSnapshot,
 } from '@/features/chat/features/conversation/hooks/use-session-conversation-input-state';
 import { useSessionConversationInputState } from '@/features/chat/features/conversation/hooks/use-session-conversation-input-state';
+import { useChatMessageLayoutStore } from '@/features/chat/stores/chat-message-layout.store';
 
 const uploadNcpAssetsMock = vi.hoisted(() => vi.fn());
 
+afterEach(() => {
+  useChatMessageLayoutStore.getState().setLayout('card');
+});
+
 vi.mock('@/app/hooks/use-viewport-layout', () => ({
   useViewportLayout: () => ({ isDesktop: true, isMobile: false }),
 }));
@@ -190,6 +195,20 @@ function StreamingSessionConversationInputHarness({
 }
 
 describe('SessionConversationInput streaming stability', () => {
+  it('aligns the default input with the flat message reading track', () => {
+    useChatMessageLayoutStore.getState().setLayout('flat');
+    const controlRef: MutableRefObject<StreamingInputControl | null> = { current: null };
+
+    render(<StreamingSessionConversationInputHarness controlRef={controlRef} />);
+
+    const track = document.querySelector(
+      '[data-chat-conversation-track="flat"][data-chat-conversation-track-width="composer"]',
+    );
+    expect(track?.className).toContain('max-w-[min(54rem,100%)]');
+    expect(track?.querySelector('.nextclaw-chat-input-bar-shell')).toBeTruthy();
+    expect(track?.firstElementChild?.className).toContain('px-0');
+  });
+
   it('keeps IME composition stable while simulated streamed output rerenders the owner', async () => {
     const controlRef: MutableRefObject<StreamingInputControl | null> = { current: null };
     render(<StreamingSessionConversationInputHarness controlRef={controlRef} />);