@nextclaw/ui 0.14.1-beta.1 → 0.14.2

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

@@ -1,9 +1,9 @@
 import type { ReactNode } from "react";
+import type { SetStateAction } from "react";
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import { ChatConversationWelcome } from "@/features/chat/features/welcome/components/chat-conversation-welcome";
-import { useChatInputStore } from "@/features/chat/stores/chat-input.store";
 import { useChatQueryStore } from "@/features/chat/stores/ncp-chat-query.store";
 import { useChatSessionListStore } from "@/features/chat/stores/chat-session-list.store";
 import { useChatThreadStore } from "@/features/chat/stores/chat-thread.store";
@@ -11,14 +11,24 @@ import type { ChatQuerySnapshot } from "@/features/chat/stores/ncp-chat-query.st
 
 const mocks = vi.hoisted(() => ({
   setSelectedAgentId: vi.fn(),
-  applyPromptSuggestion: vi.fn(),
-  setPendingProjectRoot: vi.fn(),
-  setPendingSessionType: vi.fn(),
   agents: [
     { id: "main", displayName: "Main", runtime: "native" },
     { id: "engineer", displayName: "Engineer", runtime: "codex" },
   ],
 }));
+const persistStorage = new Map<string, unknown>();
+
+function createPersistStorage() {
+  return {
+    getItem: (name: string) => persistStorage.get(name) ?? null,
+    setItem: (name: string, value: unknown) => {
+      persistStorage.set(name, value);
+    },
+    removeItem: (name: string) => {
+      persistStorage.delete(name);
+    },
+  };
+}
 
 vi.mock("@/features/chat/features/welcome/components/chat-welcome", () => ({
   ChatWelcome: ({
@@ -60,11 +70,6 @@ vi.mock("@/features/chat/components/providers/chat-presenter.provider", () => ({
     chatSessionListManager: {
       setSelectedAgentId: mocks.setSelectedAgentId,
     },
-    chatInputManager: {
-      applyPromptSuggestion: mocks.applyPromptSuggestion,
-      setPendingProjectRoot: mocks.setPendingProjectRoot,
-      setPendingSessionType: mocks.setPendingSessionType,
-    },
   }),
 }));
 
@@ -88,19 +93,10 @@ function createFetchedQuery<TData>(data: TData) {
 }
 
 function resetWelcomeTestState() {
+  persistStorage.clear();
+  useChatSessionListStore.persist.setOptions({ storage: createPersistStorage() as never });
+  useChatThreadStore.persist.setOptions({ storage: createPersistStorage() as never });
   mocks.setSelectedAgentId.mockReset();
-  mocks.applyPromptSuggestion.mockReset();
-  mocks.setPendingProjectRoot.mockReset();
-  mocks.setPendingSessionType.mockReset();
-  useChatInputStore.setState({
-    snapshot: {
-      ...useChatInputStore.getState().snapshot,
-      defaultSessionType: "native",
-      pendingSessionType: "native",
-      selectedSessionType: undefined,
-      pendingProjectRoot: null,
-    },
-  });
   useChatSessionListStore.setState({
     snapshot: {
       ...useChatSessionListStore.getState().snapshot,
@@ -138,56 +134,78 @@ function resetWelcomeTestState() {
   });
 }
 
+function renderWelcome(overrides: Partial<{
+  onSelectPrompt: (prompt: string) => void;
+  onSelectProjectRoot: (projectRoot: string | null) => void;
+  onSelectSessionType: (sessionType: SetStateAction<string>) => void;
+}> = {}) {
+  return render(
+    <ChatConversationWelcome
+      inputSlot={<div data-testid="input-slot" />}
+      pendingProjectRoot={null}
+      pendingSessionType="native"
+      selectedSessionTypeValue={null}
+      onSelectPrompt={overrides.onSelectPrompt ?? vi.fn()}
+      onSelectProjectRoot={overrides.onSelectProjectRoot ?? vi.fn()}
+      onSelectSessionType={overrides.onSelectSessionType ?? vi.fn()}
+    />,
+  );
+}
+
 describe("ChatConversationWelcome", () => {
   beforeEach(resetWelcomeTestState);
 
-  it("stores the selected welcome project through the input manager", async () => {
+  it("emits the selected welcome project through the local input callback", async () => {
     const user = userEvent.setup();
+    const onSelectProjectRoot = vi.fn();
 
-    render(<ChatConversationWelcome inputSlot={<div data-testid="input-slot" />} />);
+    renderWelcome({ onSelectProjectRoot });
 
     await user.click(
       screen.getByRole("button", { name: "select draft project" }),
     );
 
-    expect(mocks.setPendingProjectRoot).toHaveBeenCalledWith("/tmp/project-alpha");
+    expect(onSelectProjectRoot).toHaveBeenCalledWith("/tmp/project-alpha");
   });
 
-  it("applies a selected prompt suggestion through the input manager", async () => {
+  it("emits a selected prompt suggestion through the local input callback", async () => {
     const user = userEvent.setup();
+    const onSelectPrompt = vi.fn();
 
-    render(<ChatConversationWelcome inputSlot={<div data-testid="input-slot" />} />);
+    renderWelcome({ onSelectPrompt });
 
     await user.click(
       screen.getByRole("button", { name: "pick prompt" }),
     );
 
-    expect(mocks.applyPromptSuggestion).toHaveBeenCalledWith("example prompt");
+    expect(onSelectPrompt).toHaveBeenCalledWith("example prompt");
   });
 
 
   it("syncs the pending session type when switching the draft agent", async () => {
     const user = userEvent.setup();
+    const onSelectSessionType = vi.fn();
 
-    render(<ChatConversationWelcome inputSlot={<div data-testid="input-slot" />} />);
+    renderWelcome({ onSelectSessionType });
 
     await user.click(
       screen.getByRole("button", { name: "switch draft agent" }),
     );
 
     expect(mocks.setSelectedAgentId).toHaveBeenCalledWith("engineer");
-    expect(mocks.setPendingSessionType).toHaveBeenCalledWith("codex");
+    expect(onSelectSessionType).toHaveBeenCalledWith("codex");
   });
 
   it("stores an explicit welcome session type selection", async () => {
     const user = userEvent.setup();
+    const onSelectSessionType = vi.fn();
 
-    render(<ChatConversationWelcome inputSlot={<div data-testid="input-slot" />} />);
+    renderWelcome({ onSelectSessionType });
 
     await user.click(
       screen.getByRole("button", { name: "switch session type" }),
     );
 
-    expect(mocks.setPendingSessionType).toHaveBeenCalledWith("codex");
+    expect(onSelectSessionType).toHaveBeenCalledWith("codex");
   });
 });

package/src/features/chat/features/welcome/components/__tests__/chat-welcome.test.tsx

@@ -10,8 +10,8 @@ vi.mock(
 );
 
 const sessionTypeOptions = [
-  { value: 'native', label: 'Native', ready: true },
-  { value: 'codex', label: 'Codex', ready: true },
+  { value: 'native', label: 'Native', icon: null, ready: true },
+  { value: 'codex', label: 'Codex', icon: null, ready: true },
 ];
 
 function renderWelcome(

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

@@ -1,4 +1,5 @@
 import type { ReactNode } from "react";
+import type { SetStateAction } from "react";
 import { usePresenter } from "@/features/chat/components/providers/chat-presenter.provider";
 import {
   buildSessionTypeOptions,
@@ -11,7 +12,6 @@ import {
   resolveChatWelcomeSelectedSessionType,
 } from "@/features/chat/features/welcome/utils/chat-welcome-selection.utils";
 import { buildChatWelcomeProjectOptions } from "@/features/chat/features/welcome/utils/chat-welcome-project-options.utils";
-import { useChatInputStore } from "@/features/chat/stores/chat-input.store";
 import { useChatQueryStore } from "@/features/chat/stores/ncp-chat-query.store";
 import { useChatSessionListStore } from "@/features/chat/stores/chat-session-list.store";
 import { useChatThreadStore } from "@/features/chat/stores/chat-thread.store";
@@ -23,13 +23,24 @@ const EMPTY_NCP_SESSION_SUMMARIES: NcpSessionSummaryView[] = [];
 
 type ChatConversationWelcomeProps = {
   inputSlot: ReactNode;
+  pendingProjectRoot: string | null;
+  pendingSessionType: string;
+  selectedSessionTypeValue: string | null;
+  onSelectProjectRoot: (projectRoot: string | null) => void;
+  onSelectPrompt: (prompt: string) => void;
+  onSelectSessionType: (sessionType: SetStateAction<string>) => void;
 };
 
 export function ChatConversationWelcome({
   inputSlot,
+  pendingProjectRoot,
+  pendingSessionType,
+  selectedSessionTypeValue,
+  onSelectProjectRoot,
+  onSelectPrompt,
+  onSelectSessionType,
 }: ChatConversationWelcomeProps) {
   const presenter = usePresenter();
-  const inputSnapshot = useChatInputStore((state) => state.snapshot);
   const selectedAgentId = useChatSessionListStore(
     (state) => state.snapshot.selectedAgentId,
   );
@@ -53,18 +64,18 @@ export function ChatConversationWelcome({
     config?.agents.defaults.workspace,
   );
   const selectedProjectRoot = normalizeSessionProjectRootValue(
-    inputSnapshot.pendingProjectRoot,
+    pendingProjectRoot,
   );
   const sessionTypeOptions = buildSessionTypeOptions(
     sessionTypesData?.options ?? [],
   );
   const defaultSessionType = normalizeSessionType(
-    sessionTypesData?.defaultType ?? inputSnapshot.defaultSessionType ?? DEFAULT_SESSION_TYPE,
+    sessionTypesData?.defaultType ?? DEFAULT_SESSION_TYPE,
   );
   const selectedSessionType = resolveChatWelcomeSelectedSessionType({
     defaultSessionType,
-    pendingSessionType: inputSnapshot.pendingSessionType,
-    selectedSessionType: inputSnapshot.selectedSessionType,
+    pendingSessionType,
+    selectedSessionType: selectedSessionTypeValue,
     sessionTypeOptions,
   });
   const projectOptions = buildChatWelcomeProjectOptions({
@@ -73,7 +84,7 @@ export function ChatConversationWelcome({
   });
   const selectDraftAgent = (agentId: string) => {
     presenter.chatSessionListManager.setSelectedAgentId(agentId);
-    presenter.chatInputManager.setPendingSessionType(
+    onSelectSessionType(
       resolveChatWelcomeSelectedSessionType({
         agents: availableAgents,
         agentId,
@@ -96,9 +107,9 @@ export function ChatConversationWelcome({
       selectedSessionType={selectedSessionType}
       sessionTypeOptions={sessionTypeOptions}
       onSelectAgent={selectDraftAgent}
-      onSelectPrompt={presenter.chatInputManager.applyPromptSuggestion}
-      onSelectProjectRoot={presenter.chatInputManager.setPendingProjectRoot}
-      onSelectSessionType={presenter.chatInputManager.setPendingSessionType}
+      onSelectPrompt={onSelectPrompt}
+      onSelectProjectRoot={onSelectProjectRoot}
+      onSelectSessionType={onSelectSessionType}
     />
   );
 }

package/src/features/chat/features/welcome/components/chat-welcome-session-type-picker.tsx

@@ -2,7 +2,7 @@ import { useState } from 'react';
 import { Bot, ChevronDown } from 'lucide-react';
 import { SessionContextIconNode } from '@/features/chat/features/session/components/session-context-icon';
 import { ChatSessionTypeOptionItem } from '@/features/chat/features/session-type/components/chat-session-type-option-item';
-import type { ChatInputSnapshot } from '@/features/chat/stores/chat-input.store';
+import type { ChatSessionTypeOption } from '@/features/chat/features/session-type/utils/chat-session-type.utils';
 import {
   Popover,
   PopoverContent,
@@ -11,7 +11,7 @@ import {
 } from '@/shared/components/ui/popover';
 import { t } from '@/shared/lib/i18n';
 
-type SessionTypeOption = ChatInputSnapshot['sessionTypeOptions'][number];
+type SessionTypeOption = ChatSessionTypeOption;
 
 type ChatWelcomeSessionTypePickerProps = {
   options: readonly SessionTypeOption[];

package/src/features/chat/features/welcome/components/chat-welcome.tsx

@@ -7,11 +7,11 @@ import { ChatWelcomeCapabilityGrid } from '@/features/chat/features/welcome/comp
 import { ChatWelcomeProjectPicker } from '@/features/chat/features/welcome/components/chat-welcome-project-picker';
 import { ChatWelcomeSessionTypePicker } from '@/features/chat/features/welcome/components/chat-welcome-session-type-picker';
 import type { ChatWelcomeProjectOption } from '@/features/chat/features/welcome/utils/chat-welcome-project-options.utils';
-import type { ChatInputSnapshot } from '@/features/chat/stores/chat-input.store';
+import type { ChatSessionTypeOption } from '@/features/chat/features/session-type/utils/chat-session-type.utils';
 import type { AgentProfileView } from '@/shared/lib/api';
 import { t } from '@/shared/lib/i18n';
 
-type SessionTypeOption = ChatInputSnapshot['sessionTypeOptions'][number];
+type SessionTypeOption = ChatSessionTypeOption;
 
 type ChatWelcomeProps = {
   agents: AgentProfileView[];

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

@@ -0,0 +1,54 @@
+import { render, screen } from "@testing-library/react";
+import { expect, it, vi } from "vitest";
+import { ChatSessionWorkspacePanelContent } from "@/features/chat/features/workspace/components/chat-session-workspace-panel-content";
+import type { ResolvedChildSessionTab } from "@/features/chat/features/ncp/hooks/use-ncp-child-session-tabs-view";
+
+vi.mock("@/features/chat/components/providers/chat-presenter.provider", () => ({
+  usePresenter: () => ({
+    chatThreadManager: {
+      materializeSideChatDraft: vi.fn(),
+      openFilePreview: vi.fn(),
+    },
+  }),
+}));
+
+vi.mock("@/features/chat/features/conversation/components/session-conversation-area", () => ({
+  SessionConversationArea: () => <div data-testid="session-conversation-area" />,
+}));
+
+function createChildTab(): ResolvedChildSessionTab {
+  return {
+    sessionKey: "child-1",
+    parentSessionKey: "parent-1",
+    title: "Child title",
+    agentId: "agent-1",
+    updatedAt: null,
+    lastMessageAt: null,
+    readAt: null,
+    runStatus: undefined,
+    sessionTypeLabel: "原生",
+    preferredModel: "minimax/MiniMax-M3",
+    projectName: "nextbot",
+    projectRoot: "/Users/peiwang/Projects/nextbot",
+  };
+}
+
+it("shows compact child session metadata without repeating the tab title", () => {
+  render(
+    <ChatSessionWorkspacePanelContent
+      activeSelection={{
+        kind: "child-session",
+        tab: createChildTab(),
+      }}
+      sessionCronJobs={[]}
+      sessionProjectRoot={null}
+      sessionWorkingDir={null}
+    />,
+  );
+
+  expect(screen.queryByText("Child title")).toBeNull();
+  expect(screen.getByText("原生")).toBeTruthy();
+  expect(screen.getByText("minimax/MiniMax-M3")).toBeTruthy();
+  expect(screen.getByText("nextbot")).toBeTruthy();
+  expect(screen.getByTitle("/Users/peiwang/Projects/nextbot")).toBeTruthy();
+});

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

@@ -1,15 +1,11 @@
-import { useRef } from "react";
-import { useStickyBottomScroll } from "@nextclaw/agent-chat-ui";
-import { FolderGit2, Loader2 } from "lucide-react";
+import { MessageSquarePlus } from "lucide-react";
 import type { CronJobView } from "@/shared/lib/api";
-import { ChatMessageListContainer } from "@/features/chat/features/message/components/chat-message-list.container";
 import { usePresenter } from "@/features/chat/components/providers/chat-presenter.provider";
+import { SessionConversationArea } from "@/features/chat/features/conversation/components/session-conversation-area";
 import { ChatSessionWorkspaceFilePreview } from "@/features/chat/features/workspace/components/chat-session-workspace-file-preview";
 import { SessionCronJobContent } from "@/features/chat/features/workspace/components/session-cron-job-content";
 import type { ResolvedChildSessionTab } from "@/features/chat/features/ncp/hooks/use-ncp-child-session-tabs-view";
-import { useNcpSessionConversation } from "@/features/chat/features/ncp/hooks/use-ncp-session-conversation";
 import type { WorkspaceSelection } from "@/features/chat/features/workspace/utils/chat-workspace-panel-view-model.utils";
-import { AgentIdentityAvatar } from "@/shared/components/common/agent-identity";
 import { t } from "@/shared/lib/i18n";
 
 type ChatSessionWorkspacePanelContentProps = {
@@ -19,53 +15,9 @@ type ChatSessionWorkspacePanelContentProps = {
   sessionWorkingDir: string | null;
 };
 
-function ChildSessionContent({ sessionKey }: { sessionKey: string }) {
-  const agent = useNcpSessionConversation(sessionKey);
-  const messages = agent.visibleMessages;
-  const scrollRef = useRef<HTMLDivElement>(null);
-  const { onScroll } = useStickyBottomScroll({
-    scrollRef,
-    resetKey: sessionKey,
-    isLoading: agent.isHydrating,
-    hasContent: messages.length > 0,
-    contentVersion: messages[messages.length - 1] ?? null,
-    stickyThresholdPx: 20,
-  });
-
-  return (
-    <div
-      ref={scrollRef}
-      onScroll={onScroll}
-      className="h-full overflow-y-auto custom-scrollbar"
-    >
-      {agent.isHydrating ? (
-        <div className="flex h-full items-center justify-center text-sm text-gray-500">
-          <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-          {t("chatChildSessionLoading")}
-        </div>
-      ) : agent.hydrateError ? (
-        <div className="px-4 py-5 text-sm text-rose-600">
-          {agent.hydrateError.message}
-        </div>
-      ) : messages.length === 0 && !agent.isRunning ? (
-        <div className="px-4 py-5 text-sm text-gray-500">
-          {t("chatChildSessionEmpty")}
-        </div>
-      ) : (
-        <div className="px-4 py-5">
-          <ChatMessageListContainer
-            messages={messages}
-            isSending={agent.isRunning}
-          />
-        </div>
-      )}
-    </div>
-  );
-}
-
 function ChildSessionMetaChip({ value }: { value: string }) {
   return (
-    <span className="inline-flex max-w-full items-center rounded border border-gray-200 bg-gray-50 px-2 py-0.5 text-[10px] font-medium text-gray-600">
+    <span className="inline-flex max-w-full shrink-0 items-center rounded border border-gray-200 bg-gray-50 px-1.5 py-0.5 text-[10px] font-medium text-gray-600">
       <span className="truncate">{value}</span>
     </span>
   );
@@ -83,41 +35,32 @@ function ChildSessionMetaStrip({ tab }: { tab: ResolvedChildSessionTab }) {
   }
 
   return (
-    <div className="mt-3 space-y-2">
-      {metaItems.length > 0 ? (
-        <div className="flex flex-wrap gap-1.5">
-          {metaItems.map((item) => (
-            <ChildSessionMetaChip key={item} value={item} />
-          ))}
-        </div>
-      ) : null}
+    <div className="flex min-h-9 min-w-0 items-center gap-1.5 border-b border-gray-200/70 px-3 py-1.5 text-[11px] text-gray-500">
+      {metaItems.map((item) => (
+        <ChildSessionMetaChip key={item} value={item} />
+      ))}
       {tab.projectRoot ? (
-        <div
+        <span
           title={tab.projectRoot}
-          className="truncate rounded border border-gray-200 bg-gray-50 px-2 py-1.5 font-mono text-[11px] text-gray-500"
+          className="min-w-0 flex-1 truncate rounded border border-gray-200 bg-gray-50 px-1.5 py-0.5 font-mono text-[10px] text-gray-500"
         >
           {tab.projectRoot}
-        </div>
+        </span>
       ) : null}
     </div>
   );
 }
 
-function WorkspaceActiveChildHeader({ tab }: { tab: ResolvedChildSessionTab }) {
+function WorkspaceSideChatDraftHeader() {
   return (
     <div className="border-b border-gray-200/70 px-4 py-3">
       <div className="flex min-w-0 items-center gap-2 text-sm font-semibold text-gray-900">
-        {tab.agentId ? (
-          <AgentIdentityAvatar
-            agentId={tab.agentId}
-            className="h-4 w-4 shrink-0"
-          />
-        ) : (
-          <FolderGit2 className="h-4 w-4 shrink-0 text-gray-400" />
-        )}
-        <span className="truncate">{tab.title}</span>
+        <MessageSquarePlus className="h-4 w-4 shrink-0 text-primary" />
+        <span className="truncate">{t("chatWorkspaceSideChatDraftTitle")}</span>
       </div>
-      <ChildSessionMetaStrip tab={tab} />
+      <p className="mt-1 text-xs leading-5 text-gray-500">
+        {t("chatWorkspaceSideChatDraftSubtitle")}
+      </p>
     </div>
   );
 }
@@ -130,12 +73,37 @@ export function ChatSessionWorkspacePanelContent({
 }: ChatSessionWorkspacePanelContentProps) {
   const presenter = usePresenter();
 
+  if (activeSelection.kind === "side-chat-draft") {
+    return (
+      <>
+        <WorkspaceSideChatDraftHeader />
+        <div className="flex min-h-0 flex-1 flex-col">
+          <SessionConversationArea
+            materializationContext={{
+              kind: "child",
+              parentSessionKey: activeSelection.draft.parentSessionKey,
+              inheritContext: true,
+            }}
+            sessionKey={null}
+            showWelcomeForDraft={false}
+            onSessionMaterialized={(sessionKey) =>
+              presenter.chatThreadManager.materializeSideChatDraft({
+                draftKey: activeSelection.draft.draftKey,
+                sessionKey,
+              })
+            }
+          />
+        </div>
+      </>
+    );
+  }
+
   if (activeSelection.kind === "child-session") {
     return (
       <>
-        <WorkspaceActiveChildHeader tab={activeSelection.tab} />
-        <div className="flex-1 min-h-0">
-          <ChildSessionContent sessionKey={activeSelection.tab.sessionKey} />
+        <ChildSessionMetaStrip tab={activeSelection.tab} />
+        <div className="flex min-h-0 flex-1 flex-col">
+          <SessionConversationArea sessionKey={activeSelection.tab.sessionKey} />
         </div>
       </>
     );

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

@@ -1,4 +1,4 @@
-import { AlarmClock, ArrowLeft, ArrowRight, FileCode2, MessageSquareText, X } from "lucide-react";
+import { AlarmClock, ArrowLeft, ArrowRight, FileCode2, MessageSquarePlus, MessageSquareText, X } from "lucide-react";
 import type { WorkspaceTabViewModel } from "@/features/chat/features/workspace/utils/chat-workspace-panel-view-model.utils";
 import { AgentIdentityAvatar } from "@/shared/components/common/agent-identity";
 import {
@@ -17,6 +17,10 @@ function WorkspaceTabIcon({ agentId, kind }: Pick<WorkspaceTabViewModel, "agentI
     return <FileCode2 className="h-3.5 w-3.5 shrink-0 text-gray-400" />;
   }
 
+  if (kind === "side-chat-draft") {
+    return <MessageSquarePlus className="h-3.5 w-3.5 shrink-0 text-primary" />;
+  }
+
   if (agentId) {
     return (
       <AgentIdentityAvatar agentId={agentId} className="h-3.5 w-3.5 shrink-0" />

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

@@ -4,6 +4,7 @@ import { useNcpChildSessionTabsView } from "@/features/chat/features/ncp/hooks/u
 import { useChatSessionListStore } from "@/features/chat/stores/chat-session-list.store";
 import type {
   ChatChildSessionTab,
+  ChatWorkspaceSideChatDraft,
   ChatWorkspaceNavigationEntry,
   ChatWorkspaceFileTab,
 } from "@/features/chat/stores/chat-thread.store";
@@ -26,11 +27,12 @@ type ChatSessionWorkspacePanelProps = {
   sessionKey: string | null;
   childSessionTabs: readonly ChatChildSessionTab[];
   activeChildSessionKey: string | null;
+  activeSideChatDraft: ChatWorkspaceSideChatDraft | null;
   workspaceFileTabs: readonly ChatWorkspaceFileTab[];
   activeWorkspaceFileKey: string | null;
   workspaceNavigationHistory?: readonly ChatWorkspaceNavigationEntry[];
   workspaceNavigationHistoryIndex?: number;
-  activePanelKind?: "child-session" | "file" | "cron" | null;
+  activePanelKind?: "child-session" | "side-chat-draft" | "file" | "cron" | null;
   sessionCronJobs?: readonly CronJobView[];
   sessionProjectRoot: string | null;
   sessionWorkingDir: string | null;
@@ -41,6 +43,7 @@ export function ChatSessionWorkspacePanel({
   sessionKey,
   childSessionTabs,
   activeChildSessionKey,
+  activeSideChatDraft,
   workspaceFileTabs,
   activeWorkspaceFileKey,
   workspaceNavigationHistory = [],
@@ -58,6 +61,7 @@ export function ChatSessionWorkspacePanel({
   );
   const activeSelection = resolveWorkspaceSelection({
     activeChildSessionKey,
+    activeSideChatDraft,
     activeWorkspaceFileKey,
     activePanelKind,
     childSessionTabs: resolvedChildTabs,
@@ -77,6 +81,7 @@ export function ChatSessionWorkspacePanel({
     () =>
       buildWorkspaceTabsViewModel({
         resolvedChildTabs,
+        activeSideChatDraft,
         workspaceFileTabs,
         sessionCronJobCount: sessionCronJobs.length,
         activeSelection,
@@ -91,6 +96,7 @@ export function ChatSessionWorkspacePanel({
       }),
     [
       activeSelection,
+      activeSideChatDraft,
       optimisticReadAtBySessionKey,
       presenter.chatThreadManager,
       resolvedChildTabs,