@nextclaw/ui 0.14.1 → 0.14.2

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,

package/src/features/chat/features/workspace/hooks/use-chat-conversation-workspace-state.ts

@@ -1,63 +1,72 @@
 import { useMemo } from "react";
 import { useCronJobs } from "@/features/cron";
 import type { useChatThreadStore } from "@/features/chat/stores/chat-thread.store";
+import { adaptNcpSessionSummaries } from "@/features/chat/features/session/utils/ncp-session-adapter.utils";
 import { isCronJobForSession } from "@/shared/lib/cron";
+import { useChatQueryStore } from "@/features/chat/stores/ncp-chat-query.store";
 
 type ChatThreadSnapshot = ReturnType<
   typeof useChatThreadStore.getState
 >["snapshot"];
 
-function shouldShowWorkspacePanel(
-  snapshot: ChatThreadSnapshot,
-  childSessionTabs: ChatThreadSnapshot["childSessionTabs"],
-  workspaceFileTabs: ChatThreadSnapshot["workspaceFileTabs"],
-  sessionCronJobCount: number,
-) {
-  if (snapshot.workspacePanelParentKey !== snapshot.sessionKey) {
-    return false;
-  }
-  return (
-    childSessionTabs.length > 0 ||
-    workspaceFileTabs.length > 0 ||
-    sessionCronJobCount > 0
-  );
-}
+const EMPTY_SESSION_SUMMARIES: never[] = [];
 
 export function useChatConversationWorkspaceState(
   snapshot: ChatThreadSnapshot,
+  sessionKey: string | null,
 ) {
-  const childSessionTabs = useMemo(
-    () =>
-      snapshot.childSessionTabs.filter(
-        (tab) => tab.parentSessionKey === snapshot.sessionKey,
-      ),
-    [snapshot.childSessionTabs, snapshot.sessionKey],
+  const sessionSummaries = useChatQueryStore(
+    (state) =>
+      state.snapshot.sessionsQuery?.data?.sessions ?? EMPTY_SESSION_SUMMARIES,
   );
+  const childSessionTabs = useMemo(() => {
+    const tabs = snapshot.childSessionTabs.filter(
+      (tab) => tab.parentSessionKey === sessionKey,
+    );
+    const tabKeys = new Set(tabs.map((tab) => tab.sessionKey));
+    return [
+      ...tabs,
+      ...adaptNcpSessionSummaries(sessionSummaries)
+        .filter(
+          (session) =>
+            session.parentSessionId === sessionKey && !tabKeys.has(session.key),
+        )
+        .map((session) => ({
+          sessionKey: session.key,
+          parentSessionKey: sessionKey,
+        })),
+    ];
+  }, [sessionKey, sessionSummaries, snapshot.childSessionTabs]);
   const workspaceFileTabs = useMemo(
     () =>
       snapshot.workspaceFileTabs.filter(
-        (tab) => tab.parentSessionKey === snapshot.sessionKey,
+        (tab) => tab.parentSessionKey === sessionKey,
       ),
-    [snapshot.sessionKey, snapshot.workspaceFileTabs],
+    [sessionKey, snapshot.workspaceFileTabs],
   );
+  const activeSideChatDraft =
+    snapshot.activeSideChatDraft?.parentSessionKey === sessionKey
+      ? snapshot.activeSideChatDraft
+      : null;
   const cronQuery = useCronJobs({ all: true });
   const sessionCronJobs = useMemo(
     () =>
       (cronQuery.data?.jobs ?? []).filter((job) =>
-        isCronJobForSession(job, snapshot.sessionKey),
+        isCronJobForSession(job, sessionKey),
       ),
-    [cronQuery.data?.jobs, snapshot.sessionKey],
+    [cronQuery.data?.jobs, sessionKey],
   );
 
   return {
     childSessionTabs,
+    activeSideChatDraft,
     workspaceFileTabs,
     sessionCronJobs,
-    showWorkspacePanel: shouldShowWorkspacePanel(
-      snapshot,
-      childSessionTabs,
-      workspaceFileTabs,
-      sessionCronJobs.length,
-    ),
+    showWorkspacePanel:
+      snapshot.workspacePanelParentKey === sessionKey &&
+      (activeSideChatDraft !== null ||
+        childSessionTabs.length > 0 ||
+        workspaceFileTabs.length > 0 ||
+        sessionCronJobs.length > 0),
   };
 }

package/src/features/chat/features/workspace/utils/__tests__/chat-workspace-panel-view-model.utils.test.ts

@@ -3,7 +3,7 @@ import type { ResolvedChildSessionTab } from "@/features/chat/features/ncp/hooks
 import {
   buildWorkspaceTabsViewModel,
   resolveWorkspaceSelection,
-} from "../chat-workspace-panel-view-model.utils";
+} from "@/features/chat/features/workspace/utils/chat-workspace-panel-view-model.utils";
 
 function createChildTab(
   overrides: Partial<ResolvedChildSessionTab> = {},
@@ -39,6 +39,7 @@ describe("resolveWorkspaceSelection", () => {
       resolveWorkspaceSelection({
         activePanelKind: "file",
         activeChildSessionKey: childTab.sessionKey,
+        activeSideChatDraft: null,
         activeWorkspaceFileKey: fileTab.key,
         childSessionTabs: [childTab],
         workspaceFileTabs: [fileTab],
@@ -57,6 +58,7 @@ describe("resolveWorkspaceSelection", () => {
       resolveWorkspaceSelection({
         activePanelKind: null,
         activeChildSessionKey: null,
+        activeSideChatDraft: null,
         activeWorkspaceFileKey: null,
         childSessionTabs: [childTab],
         workspaceFileTabs: [],
@@ -67,6 +69,28 @@ describe("resolveWorkspaceSelection", () => {
       tab: childTab,
     });
   });
+
+  it("honors the explicit side chat draft selection", () => {
+    const draft = {
+      draftKey: "draft-1",
+      parentSessionKey: "parent-1",
+    };
+
+    expect(
+      resolveWorkspaceSelection({
+        activePanelKind: "side-chat-draft",
+        activeChildSessionKey: null,
+        activeSideChatDraft: draft,
+        activeWorkspaceFileKey: null,
+        childSessionTabs: [createChildTab()],
+        workspaceFileTabs: [],
+        sessionCronJobCount: 0,
+      }),
+    ).toMatchObject({
+      kind: "side-chat-draft",
+      draft,
+    });
+  });
 });
 
 describe("buildWorkspaceTabsViewModel", () => {
@@ -79,6 +103,7 @@ describe("buildWorkspaceTabsViewModel", () => {
 
     const tabs = buildWorkspaceTabsViewModel({
       resolvedChildTabs: [childTab],
+      activeSideChatDraft: null,
       workspaceFileTabs: [],
       sessionCronJobCount: 0,
       activeSelection: null,
@@ -100,4 +125,37 @@ describe("buildWorkspaceTabsViewModel", () => {
     tabs[0]?.onSelect();
     expect(onSelectSession).toHaveBeenCalledWith("child-1");
   });
+
+  it("places the side chat draft tab before child session tabs", () => {
+    const draft = {
+      draftKey: "draft-1",
+      parentSessionKey: "parent-1",
+    };
+    const childTab = createChildTab();
+
+    const tabs = buildWorkspaceTabsViewModel({
+      resolvedChildTabs: [childTab],
+      activeSideChatDraft: draft,
+      workspaceFileTabs: [],
+      sessionCronJobCount: 0,
+      activeSelection: {
+        kind: "side-chat-draft",
+        draft,
+      },
+      optimisticReadAtBySessionKey: {},
+      onSelectSession: vi.fn(),
+      onSelectFile: vi.fn(),
+      onCloseFile: vi.fn(),
+      onSelectCronJobs: vi.fn(),
+    });
+
+    expect(tabs.map((tab) => tab.key)).toEqual([
+      "side-chat-draft:draft-1",
+      "child:child-1",
+    ]);
+    expect(tabs[0]).toMatchObject({
+      kind: "side-chat-draft",
+      active: true,
+    });
+  });
 });

package/src/features/chat/features/workspace/utils/chat-thread-workspace-session.utils.ts

@@ -0,0 +1,109 @@
+import type {
+  ChatChildSessionTab,
+  ChatThreadSnapshot,
+  ChatWorkspaceNavigationEntry,
+  ChatWorkspaceSideChatDraft,
+} from "@/features/chat/stores/chat-thread.store";
+import {
+  filterNavigationHistoryEntries,
+  pushNavigationHistoryEntry,
+} from "@/shared/lib/navigation-history";
+
+export function areWorkspaceNavigationEntriesEqual(
+  current: ChatWorkspaceNavigationEntry,
+  next: ChatWorkspaceNavigationEntry,
+): boolean {
+  if (current.kind !== next.kind) {
+    return false;
+  }
+  if (current.kind === 'cron') {
+    return true;
+  }
+  return next.kind !== 'cron' && current.key === next.key;
+}
+
+export function createSideChatDraft(parentSessionKey: string): ChatWorkspaceSideChatDraft {
+  const randomPart =
+    typeof globalThis.crypto?.randomUUID === 'function'
+      ? globalThis.crypto.randomUUID()
+      : `${Date.now().toString(36)}-${Math.random().toString(36).slice(2)}`;
+  return {
+    draftKey: `side-chat-draft:${parentSessionKey}:${randomPart}`,
+    parentSessionKey,
+  };
+}
+
+export function upsertChildSessionTab(
+  childSessionTabs: readonly ChatChildSessionTab[],
+  nextTab: ChatChildSessionTab,
+): ChatChildSessionTab[] {
+  const existingIndex = childSessionTabs.findIndex((tab) => tab.sessionKey === nextTab.sessionKey);
+  if (existingIndex === -1) {
+    return [nextTab, ...childSessionTabs];
+  }
+  const existingTab = childSessionTabs[existingIndex];
+  const nextTabs = [...childSessionTabs];
+  nextTabs[existingIndex] = {
+    ...existingTab,
+    parentSessionKey: existingTab.parentSessionKey ?? nextTab.parentSessionKey,
+    label: existingTab.label?.trim() ? existingTab.label : nextTab.label,
+    agentId: existingTab.agentId?.trim() ? existingTab.agentId : nextTab.agentId,
+  };
+  return nextTabs;
+}
+
+export function materializeSideChatDraftSnapshot(params: {
+  snapshot: ChatThreadSnapshot;
+  draftKey: string;
+  sessionKey: string;
+  label?: string | null;
+  agentId?: string | null;
+}): { patch: Partial<ChatThreadSnapshot>; parentSessionKey: string } | null {
+  const {
+    agentId: rawAgentId,
+    draftKey: rawDraftKey,
+    label: rawLabel,
+    sessionKey: rawSessionKey,
+    snapshot,
+  } = params;
+  const sessionKey = rawSessionKey.trim();
+  const draftKey = rawDraftKey.trim();
+  const { activeSideChatDraft } = snapshot;
+  if (!sessionKey || !draftKey || activeSideChatDraft?.draftKey !== draftKey) {
+    return null;
+  }
+  const { parentSessionKey } = activeSideChatDraft;
+  const filteredHistory = filterNavigationHistoryEntries(
+    {
+      entries: snapshot.workspaceNavigationHistory,
+      index: snapshot.workspaceNavigationHistoryIndex,
+    },
+    (entry) => entry.kind !== 'side-chat-draft' || entry.key !== draftKey,
+  );
+  const history = pushNavigationHistoryEntry(
+    filteredHistory,
+    {
+      kind: 'child-session',
+      key: sessionKey,
+    },
+    areWorkspaceNavigationEntriesEqual,
+  );
+  return {
+    parentSessionKey,
+    patch: {
+      workspacePanelParentKey: parentSessionKey,
+      activeWorkspacePanelKind: 'child-session',
+      activeChildSessionKey: sessionKey,
+      activeSideChatDraft: null,
+      activeWorkspaceFileKey: null,
+      childSessionTabs: upsertChildSessionTab(snapshot.childSessionTabs, {
+        sessionKey,
+        parentSessionKey,
+        label: rawLabel?.trim() || null,
+        agentId: rawAgentId?.trim() || null,
+      }),
+      workspaceNavigationHistory: [...history.entries],
+      workspaceNavigationHistoryIndex: history.index,
+    },
+  };
+}

package/src/features/chat/features/workspace/utils/chat-workspace-panel-view-model.utils.ts

@@ -1,6 +1,9 @@
 import type { ResolvedChildSessionTab } from "@/features/chat/features/ncp/hooks/use-ncp-child-session-tabs-view";
 import { shouldShowUnreadSessionIndicator } from "@/features/chat/stores/chat-session-list.store";
-import type { ChatWorkspaceFileTab } from "@/features/chat/stores/chat-thread.store";
+import type {
+  ChatWorkspaceFileTab,
+  ChatWorkspaceSideChatDraft,
+} from "@/features/chat/stores/chat-thread.store";
 import { t } from "@/shared/lib/i18n";
 
 export type WorkspaceSelection =
@@ -8,6 +11,10 @@ export type WorkspaceSelection =
       kind: "child-session";
       tab: ResolvedChildSessionTab;
     }
+  | {
+      kind: "side-chat-draft";
+      draft: ChatWorkspaceSideChatDraft;
+    }
   | {
       kind: "file";
       file: ChatWorkspaceFileTab;
@@ -18,7 +25,7 @@ export type WorkspaceSelection =
 
 export type WorkspaceTabViewModel = {
   key: string;
-  kind: "child-session" | "file" | "cron";
+  kind: "child-session" | "side-chat-draft" | "file" | "cron";
   title: string;
   tooltip: string;
   active: boolean;
@@ -35,8 +42,9 @@ export function readWorkspaceFileTitle(file: ChatWorkspaceFileTab): string {
 }
 
 export function resolveWorkspaceSelection(params: {
-  activePanelKind?: "child-session" | "file" | "cron" | null;
+  activePanelKind?: "child-session" | "side-chat-draft" | "file" | "cron" | null;
   activeChildSessionKey: string | null;
+  activeSideChatDraft: ChatWorkspaceSideChatDraft | null;
   activeWorkspaceFileKey: string | null;
   childSessionTabs: ResolvedChildSessionTab[];
   workspaceFileTabs: readonly ChatWorkspaceFileTab[];
@@ -45,6 +53,7 @@ export function resolveWorkspaceSelection(params: {
   const {
     activePanelKind,
     activeChildSessionKey,
+    activeSideChatDraft,
     activeWorkspaceFileKey,
     childSessionTabs,
     workspaceFileTabs,
@@ -55,6 +64,13 @@ export function resolveWorkspaceSelection(params: {
     return { kind: "cron" };
   }
 
+  if (activePanelKind === "side-chat-draft" && activeSideChatDraft) {
+    return {
+      kind: "side-chat-draft",
+      draft: activeSideChatDraft,
+    };
+  }
+
   if (activePanelKind !== "child-session" && activeWorkspaceFileKey) {
     const activeFile = workspaceFileTabs.find(
       (file) => file.key === activeWorkspaceFileKey,
@@ -86,6 +102,13 @@ export function resolveWorkspaceSelection(params: {
     };
   }
 
+  if (activeSideChatDraft) {
+    return {
+      kind: "side-chat-draft",
+      draft: activeSideChatDraft,
+    };
+  }
+
   if (workspaceFileTabs[0]) {
     return {
       kind: "file",
@@ -102,6 +125,7 @@ export function resolveWorkspaceSelection(params: {
 
 export function buildWorkspaceTabsViewModel(params: {
   resolvedChildTabs: ResolvedChildSessionTab[];
+  activeSideChatDraft: ChatWorkspaceSideChatDraft | null;
   workspaceFileTabs: readonly ChatWorkspaceFileTab[];
   sessionCronJobCount: number;
   activeSelection: WorkspaceSelection | null;
@@ -112,6 +136,7 @@ export function buildWorkspaceTabsViewModel(params: {
   onSelectCronJobs: () => void;
 }): WorkspaceTabViewModel[] {
   const {
+    activeSideChatDraft,
     resolvedChildTabs,
     workspaceFileTabs,
     sessionCronJobCount,
@@ -123,6 +148,21 @@ export function buildWorkspaceTabsViewModel(params: {
     onSelectCronJobs,
   } = params;
 
+  const sideChatDraftTabs = activeSideChatDraft
+    ? [
+        {
+          key: `side-chat-draft:${activeSideChatDraft.draftKey}`,
+          kind: "side-chat-draft" as const,
+          title: t("chatWorkspaceSideChatDraftTitle"),
+          tooltip: t("chatWorkspaceSideChatDraftSubtitle"),
+          active:
+            activeSelection?.kind === "side-chat-draft" &&
+            activeSelection.draft.draftKey === activeSideChatDraft.draftKey,
+          onSelect: () => undefined,
+        },
+      ]
+    : [];
+
   const childTabs = resolvedChildTabs.map((tab) => {
     const optimisticReadAt = optimisticReadAtBySessionKey[tab.sessionKey];
     const effectiveReadAt =
@@ -179,5 +219,5 @@ export function buildWorkspaceTabsViewModel(params: {
         ]
       : [];
 
-  return [...childTabs, ...fileTabs, ...cronTab];
+  return [...sideChatDraftTabs, ...childTabs, ...fileTabs, ...cronTab];
 }

package/src/features/chat/index.ts

@@ -4,7 +4,6 @@ export { ChatPresenterProvider } from "./components/providers/chat-presenter.pro
 export { usePresenter } from "./components/providers/chat-presenter.provider";
 export { ChatPresenter } from "./presenters/chat.presenter";
 export { ChatDraftIntentManager } from "./managers/chat-draft-intent.manager";
-export { useChatInputStore } from "./stores/chat-input.store";
 export { useChatSessionListStore } from "./stores/chat-session-list.store";
 export { useChatThreadStore } from "./stores/chat-thread.store";
 export { useNcpChatSessionTypes } from "./features/session-type/hooks/use-ncp-chat-session-types";