@nextclaw/ui 0.12.10 → 0.12.12

package/src/{components/config/ChannelsList.tsx → features/channels/pages/channels-list-page.tsx}

@@ -1,42 +1,34 @@
-import { useEffect, useMemo, useState } from "react";
-import { ExternalLink, MessageSquare, Search } from "lucide-react";
-import { useConfig, useConfigMeta, useConfigSchema } from "@/hooks/useConfig";
-import { LogoBadge } from "@/components/common/LogoBadge";
-import { PageHeader, PageLayout } from "@/components/layout/page-layout";
-import { Input } from "@/components/ui/input";
-import { StatusDot } from "@/components/ui/status-dot";
-import { Tabs } from "@/components/ui/tabs-custom";
-import { hintForPath } from "@/lib/config-hints";
-import { resolveChannelTutorialUrl } from "@/lib/channel-tutorials";
-import { t } from "@/lib/i18n";
-import { getChannelLogo } from "@/lib/logos";
-import { cn } from "@/lib/utils";
-import { ChannelForm } from "./ChannelForm";
-import {
-  ConfigSelectionCard,
-  ConfigSplitEmptyState,
-  ConfigSplitPage,
-  ConfigSplitPaneBody,
-  ConfigSplitPaneHeader,
-  ConfigSplitSidebar,
-} from "./config-split-page";
+import { useMemo, useState } from 'react';
+import { ExternalLink, MessageSquare, Search } from 'lucide-react';
+import { LogoBadge } from '@/shared/components/common/logo-badge';
+import { PageHeader, PageLayout } from '@/app/components/layout/page-layout';
+import { Input } from '@/shared/components/ui/input';
+import { StatusDot } from '@/shared/components/ui/status-dot';
+import { Tabs } from '@/shared/components/ui/tabs-custom';
+import { ChannelForm } from '@/features/channels/components/config/channel-form';
+import { useConfig, useConfigMeta, useConfigSchema } from '@/shared/hooks/use-config';
+import { ConfigSelectionCard, ConfigSplitEmptyState, ConfigSplitPage, ConfigSplitPaneBody, ConfigSplitPaneHeader, ConfigSplitSidebar } from '@/shared/components/config-split-page';
+import { hintForPath } from '@/shared/lib/config-hints';
+import { resolveChannelTutorialUrl } from '@/features/channels/utils/channel-tutorials.utils';
+import { t } from '@/shared/lib/i18n';
+import { getChannelLogo } from '@/shared/lib/logos';
+import { cn } from '@/shared/lib/utils';
+import { useViewportLayout } from '@/app/hooks/use-viewport-layout';
 
 const channelDescriptionKeys: Record<string, string> = {
-  telegram: "channelDescTelegram",
-  slack: "channelDescSlack",
-  email: "channelDescEmail",
-  webhook: "channelDescWebhook",
-  discord: "channelDescDiscord",
-  feishu: "channelDescFeishu",
-  weixin: "channelDescWeixin",
+  telegram: 'channelDescTelegram',
+  slack: 'channelDescSlack',
+  email: 'channelDescEmail',
+  webhook: 'channelDescWebhook',
+  discord: 'channelDescDiscord',
+  feishu: 'channelDescFeishu',
+  weixin: 'channelDescWeixin'
 };
 
-const prioritizedChannelNames = ["weixin", "feishu", "discord", "qq"] as const;
+const prioritizedChannelNames = ['weixin', 'feishu', 'discord', 'qq'] as const;
 
 function sortChannelsForDisplay<T extends { name: string }>(channels: T[]) {
-  const priorityByName = new Map<string, number>(
-    prioritizedChannelNames.map((name, index) => [name, index]),
-  );
+  const priorityByName = new Map<string, number>(prioritizedChannelNames.map((name, index) => [name, index]));
   return channels
     .map((channel, index) => ({ channel, index }))
     .sort((left, right) => {
@@ -48,19 +40,20 @@ function sortChannelsForDisplay<T extends { name: string }>(channels: T[]) {
 }
 
 export function ChannelsList() {
+  const { isMobile } = useViewportLayout();
   const { data: config } = useConfig();
   const { data: meta } = useConfigMeta();
   const { data: schema } = useConfigSchema();
-  const [activeTab, setActiveTab] = useState("enabled");
-  const [selectedChannel, setSelectedChannel] = useState<string>();
-  const [query, setQuery] = useState("");
+  const [activeTab, setActiveTab] = useState('enabled');
+  const [selectedChannel, setSelectedChannel] = useState<string | null>(null);
+  const [query, setQuery] = useState('');
   const channels = useMemo(() => sortChannelsForDisplay(meta?.channels ?? []), [meta?.channels]);
   const channelConfigs = config?.channels;
 
   const filteredChannels = useMemo(() => {
     const keyword = query.trim().toLowerCase();
     return channels
-      .filter((channel) => activeTab !== "enabled" || Boolean(channelConfigs?.[channel.name]?.enabled))
+      .filter((channel) => activeTab !== 'enabled' || Boolean(channelConfigs?.[channel.name]?.enabled))
       .filter((channel) => {
         if (!keyword) {
           return true;
@@ -70,32 +63,36 @@ export function ChannelsList() {
       });
   }, [activeTab, channelConfigs, channels, query]);
 
-  useEffect(() => {
-    setSelectedChannel(
-      filteredChannels.some((channel) => channel.name === selectedChannel)
-        ? selectedChannel
-        : filteredChannels[0]?.name,
-    );
-  }, [filteredChannels, selectedChannel]);
+  const resolvedSelectedChannel =
+    selectedChannel && filteredChannels.some((channel) => channel.name === selectedChannel)
+      ? selectedChannel
+      : isMobile
+        ? null
+        : filteredChannels[0]?.name ?? null;
 
   if (!config || !meta) {
-    return <div className="p-8 text-gray-400">{t("channelsLoading")}</div>;
+    return <div className="p-8 text-gray-400">{t('channelsLoading')}</div>;
   }
 
   return (
     <PageLayout className="pb-0 xl:flex xl:h-full xl:min-h-0 xl:flex-col">
-      <PageHeader title={t("channelsPageTitle")} description={t("channelsPageDescription")} />
-      <ConfigSplitPage className="xl:min-h-0">
+      <PageHeader title={t('channelsPageTitle')} description={t('channelsPageDescription')} />
+      <ConfigSplitPage
+        className="xl:min-h-0"
+        mobileView={isMobile ? (resolvedSelectedChannel ? 'detail' : 'list') : undefined}
+        onMobileBack={() => setSelectedChannel(null)}
+        mobileListLabel={t('channelsPageTitle')}
+      >
         <ConfigSplitSidebar>
           <ConfigSplitPaneHeader className="px-4 pt-4">
             <Tabs
               tabs={[
                 {
-                  id: "enabled",
-                  label: t("channelsTabEnabled"),
-                  count: channels.filter((channel) => channelConfigs?.[channel.name]?.enabled).length,
+                  id: 'enabled',
+                  label: t('channelsTabEnabled'),
+                  count: channels.filter((channel) => channelConfigs?.[channel.name]?.enabled).length
                 },
-                { id: "all", label: t("channelsTabAll"), count: channels.length },
+                { id: 'all', label: t('channelsTabAll'), count: channels.length }
               ]}
               activeTab={activeTab}
               onChange={setActiveTab}
@@ -106,12 +103,7 @@ export function ChannelsList() {
           <div className="border-b border-gray-100 px-4 py-3">
             <div className="relative">
               <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400" />
-              <Input
-                value={query}
-                onChange={(event) => setQuery(event.target.value)}
-                placeholder={t("channelsFilterPlaceholder")}
-                className="h-10 rounded-xl pl-9"
-              />
+              <Input value={query} onChange={(event) => setQuery(event.target.value)} placeholder={t('channelsFilterPlaceholder')} className="h-10 rounded-xl pl-9" />
             </div>
           </div>
 
@@ -119,32 +111,21 @@ export function ChannelsList() {
             {filteredChannels.map((channel) => {
               const enabled = Boolean(config.channels[channel.name]?.enabled);
               const tutorialUrl = resolveChannelTutorialUrl(channel);
-              const description =
-                hintForPath(`channels.${channel.name}`, schema?.uiHints)?.help ||
-                t(channelDescriptionKeys[channel.name] || "channelDescriptionDefault");
+              const description = hintForPath(`channels.${channel.name}`, schema?.uiHints)?.help || t(channelDescriptionKeys[channel.name] || 'channelDescriptionDefault');
 
               return (
-                <ConfigSelectionCard
-                  key={channel.name}
-                  onClick={() => setSelectedChannel(channel.name)}
-                  active={selectedChannel === channel.name}
-                >
+                <ConfigSelectionCard key={channel.name} onClick={() => setSelectedChannel(channel.name)} active={resolvedSelectedChannel === channel.name}>
                   <div className="flex items-start justify-between gap-3">
                     <div className="flex min-w-0 items-center gap-3">
                       <LogoBadge
                         name={channel.name}
                         src={getChannelLogo(channel.name)}
-                        className={cn(
-                          "h-10 w-10 rounded-lg border",
-                          enabled ? "border-primary/30 bg-white" : "border-gray-200/70 bg-white",
-                        )}
+                        className={cn('h-10 w-10 rounded-lg border', enabled ? 'border-primary/30 bg-white' : 'border-gray-200/70 bg-white')}
                         imgClassName="h-5 w-5 object-contain"
                         fallback={<span className="text-sm font-semibold uppercase text-gray-500">{channel.name[0]}</span>}
                       />
                       <div className="min-w-0">
-                        <p className="truncate text-sm font-semibold text-gray-900">
-                          {channel.displayName || channel.name}
-                        </p>
+                        <p className="truncate text-sm font-semibold text-gray-900">{channel.displayName || channel.name}</p>
                         <p className="line-clamp-1 text-[11px] text-gray-500">{description}</p>
                       </div>
                     </div>
@@ -154,29 +135,22 @@ export function ChannelsList() {
                           href={tutorialUrl}
                           onClick={(event) => event.stopPropagation()}
                           className="inline-flex h-7 w-7 items-center justify-center rounded-md text-gray-300 transition-colors hover:bg-gray-100/70 hover:text-gray-500"
-                          title={t("channelsGuideTitle")}
+                          title={t('channelsGuideTitle')}
                         >
                           <ExternalLink className="h-3.5 w-3.5" />
                         </a>
                       ) : null}
-                      <StatusDot
-                        status={enabled ? "active" : "inactive"}
-                        label={enabled ? t("statusActive") : t("statusInactive")}
-                        className="min-w-[56px] justify-center"
-                      />
+                      <StatusDot status={enabled ? 'active' : 'inactive'} label={enabled ? t('statusActive') : t('statusInactive')} className="min-w-[56px] justify-center" />
                     </div>
                   </div>
                 </ConfigSelectionCard>
               );
             })}
-
-            {filteredChannels.length === 0 ? (
-              <ConfigSplitEmptyState icon={MessageSquare} title={t("channelsNoMatch")} />
-            ) : null}
+            {filteredChannels.length === 0 ? <ConfigSplitEmptyState icon={MessageSquare} title={t('channelsNoMatch')} /> : null}
           </ConfigSplitPaneBody>
         </ConfigSplitSidebar>
 
-        <ChannelForm channelName={selectedChannel} />
+        <ChannelForm channelName={resolvedSelectedChannel ?? undefined} />
       </ConfigSplitPage>
     </PageLayout>
   );

package/src/{components/config/channel-form-fields.test.ts → features/channels/utils/channel-form-fields.utils.test.ts}

@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest';
-import { buildChannelFormDefinitions } from './channel-form-fields';
+import { buildChannelFormDefinitions } from './channel-form-fields.utils';
 
 describe('buildChannelFormDefinitions', () => {
   it('keeps default channels on a single all-fields layout', () => {

package/src/{components/config/channel-form-fields.ts → features/channels/utils/channel-form-fields.utils.ts}

@@ -1,4 +1,4 @@
-import { t } from '@/lib/i18n';
+import { t } from '@/shared/lib/i18n';
 
 export type ChannelFieldType = 'boolean' | 'text' | 'email' | 'password' | 'number' | 'tags' | 'select' | 'json';
 export type ChannelOption = { value: string; label: string };

package/src/{lib/channel-tutorials.ts → features/channels/utils/channel-tutorials.utils.ts}

@@ -1,5 +1,5 @@
-import type { ChannelSpecView } from '@/api/types';
-import { getLanguage } from '@/lib/i18n';
+import type { ChannelSpecView } from '@/shared/lib/api';
+import { getLanguage } from '@/shared/lib/i18n';
 
 export function resolveChannelTutorialUrl(channel: Pick<ChannelSpecView, 'tutorialUrl' | 'tutorialUrls'>): string | undefined {
   const lang = getLanguage();

package/src/{components/chat → features/chat/components}/chat-session-type-option-item.test.tsx

@@ -1,6 +1,6 @@
 import { render, screen } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
-import { ChatSessionTypeOptionItem } from "@/components/chat/chat-session-type-option-item";
+import { ChatSessionTypeOptionItem } from "./chat-session-type-option-item";
 
 describe("ChatSessionTypeOptionItem", () => {
   it("renders a runtime icon image when the session type option provides an app resource URI", () => {

package/src/{components/chat → features/chat/components}/chat-session-type-option-item.tsx

@@ -1,7 +1,7 @@
-import type { ChatInputSnapshot } from "@/components/chat/stores/chat-input.store";
-import { SessionContextIconNode } from "@/components/common/session-context-icon";
-import { t } from "@/lib/i18n";
-import { cn } from "@/lib/utils";
+import type { ChatInputSnapshot } from "@/features/chat/stores/chat-input.store";
+import { SessionContextIconNode } from "@/features/chat/components/session/session-context-icon";
+import { t } from "@/shared/lib/i18n";
+import { cn } from "@/shared/lib/utils";
 
 type SessionTypeOption = ChatInputSnapshot["sessionTypeOptions"][number];
 

package/src/{components/chat → features/chat/components}/chat-session-workspace-file-preview.test.tsx

@@ -1,12 +1,12 @@
 import { render, screen } from "@testing-library/react";
 import { beforeEach, describe, expect, it, vi } from "vitest";
-import { ChatSessionWorkspaceFilePreview } from "@/components/chat/chat-session-workspace-file-preview";
-import type { ChatWorkspaceFileTab } from "@/components/chat/stores/chat-thread.store";
-import { t } from "@/lib/i18n";
+import { ChatSessionWorkspaceFilePreview } from "./chat-session-workspace-file-preview";
+import type { ChatWorkspaceFileTab } from "@/features/chat/stores/chat-thread.store";
+import { t } from "@/shared/lib/i18n";
 
 const serverPathReadMock = vi.fn();
 
-vi.mock("@/hooks/server-path/use-server-path-read", () => ({
+vi.mock("@/shared/hooks/use-server-path-read", () => ({
   useServerPathRead: (...args: unknown[]) => serverPathReadMock(...args),
 }));
 

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

@@ -1,22 +1,13 @@
 import { useMemo } from "react";
-import type {
-  ChatFileOpenActionViewModel,
-  ChatFileOperationBlockViewModel,
-} from "@nextclaw/agent-chat-ui";
-import {
-  ChatMessageMarkdown,
-  FileOperationCodeSurface,
-} from "@nextclaw/agent-chat-ui";
-import type { ChatWorkspaceFileTab } from "@/components/chat/stores/chat-thread.store";
-import { ChatSessionWorkspaceFileBreadcrumbs } from "@/components/chat/workspace/chat-session-workspace-file-breadcrumbs";
-import { useServerPathRead } from "@/hooks/server-path/use-server-path-read";
-import {
-  buildLineDiff,
-  buildPreviewLines,
-} from "@/components/chat/adapters/file-operation/line-builder";
-import { t } from "@/lib/i18n";
-import { buildWorkspaceFileBreadcrumb } from "@/lib/session-project/workspace-file-breadcrumb";
-import { cn } from "@/lib/utils";
+import type { ChatFileOpenActionViewModel, ChatFileOperationBlockViewModel } from "@nextclaw/agent-chat-ui";
+import { ChatMessageMarkdown, FileOperationCodeSurface } from "@nextclaw/agent-chat-ui";
+import type { ChatWorkspaceFileTab } from "@/features/chat/stores/chat-thread.store";
+import { ChatSessionWorkspaceFileBreadcrumbs } from "./workspace/chat-session-workspace-file-breadcrumbs";
+import { useServerPathRead } from "@/shared/hooks/use-server-path-read";
+import { buildLineDiff, buildPreviewLines } from "@/features/chat/utils/file-operation/line-builder.utils";
+import { t } from "@/shared/lib/i18n";
+import { buildWorkspaceFileBreadcrumb } from "@/shared/lib/session-project";
+import { cn } from "@/shared/lib/utils";
 
 function inferPreviewKind(params: {
   path: string;
@@ -128,10 +119,7 @@ function WorkspaceDiffBody({
   if (!diffBlock) {
     return <WorkspaceFilePreviewStatus text={t("chatWorkspaceDiffEmpty")} />;
   }
-
-  return (
-    <WorkspaceCodeSurface block={diffBlock} />
-  );
+  return <WorkspaceCodeSurface block={diffBlock} />;
 }
 
 function WorkspaceCodeSurface({
@@ -139,11 +127,7 @@ function WorkspaceCodeSurface({
 }: {
   block: ChatFileOperationBlockViewModel;
 }) {
-  return (
-    <div className="h-full overflow-auto custom-scrollbar bg-white">
-      <FileOperationCodeSurface block={block} layout="workspace" />
-    </div>
-  );
+  return <div className="h-full overflow-auto custom-scrollbar bg-white"><FileOperationCodeSurface block={block} layout="workspace" /></div>;
 }
 
 function WorkspacePreviewBody({
@@ -205,11 +189,7 @@ function WorkspacePreviewBody({
   return <WorkspaceFilePreviewStatus text={t("chatWorkspacePreviewEmpty")} />;
 }
 
-type ChatSessionWorkspaceFilePreviewProps = {
-  file: ChatWorkspaceFileTab;
-  sessionProjectRoot: string | null;
-  onFileOpen: (action: ChatFileOpenActionViewModel) => void;
-};
+type ChatSessionWorkspaceFilePreviewProps = { file: ChatWorkspaceFileTab; sessionProjectRoot: string | null; onFileOpen: (action: ChatFileOpenActionViewModel) => void };
 
 export function ChatSessionWorkspaceFilePreview({
   file,

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

@@ -1,15 +1,10 @@
 import { FileCode2, MessageSquareText, X } from "lucide-react";
-import type { ResolvedChildSessionTab } from "@/components/chat/ncp/session-conversation/use-ncp-child-session-tabs-view";
-import type { ChatWorkspaceFileTab } from "@/components/chat/stores/chat-thread.store";
-import { AgentIdentityAvatar } from "@/components/common/agent-identity";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
-import { t } from "@/lib/i18n";
-import { cn } from "@/lib/utils";
+import type { ResolvedChildSessionTab } from "@/features/chat/hooks/use-ncp-child-session-tabs-view";
+import type { ChatWorkspaceFileTab } from "@/features/chat/stores/chat-thread.store";
+import { AgentIdentityAvatar } from "@/shared/components/common/agent-identity";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/shared/components/ui/tooltip";
+import { t } from "@/shared/lib/i18n";
+import { cn } from "@/shared/lib/utils";
 
 export type WorkspaceSelection =
   | {
@@ -96,10 +91,7 @@ export function resolveWorkspaceSelection(params: {
   return null;
 }
 
-function WorkspaceTabIcon({
-  agentId,
-  kind,
-}: Pick<WorkspaceTabViewModel, "agentId" | "kind">) {
+function WorkspaceTabIcon({ agentId, kind }: Pick<WorkspaceTabViewModel, "agentId" | "kind">) {
   if (kind === "file") {
     return <FileCode2 className="h-3.5 w-3.5 shrink-0 text-gray-400" />;
   }
@@ -116,11 +108,7 @@ function WorkspaceTabIcon({
   return <MessageSquareText className="h-3.5 w-3.5 shrink-0 text-gray-400" />;
 }
 
-function WorkspaceTabItem({
-  tab,
-}: {
-  tab: WorkspaceTabViewModel;
-}) {
+function WorkspaceTabItem({ tab }: { tab: WorkspaceTabViewModel }) {
   return (
     <TooltipProvider delayDuration={250}>
       <Tooltip>

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

@@ -5,31 +5,31 @@ import type {
   ChatToolActionViewModel,
 } from "@nextclaw/agent-chat-ui";
 import { useStickyBottomScroll } from "@nextclaw/agent-chat-ui";
-import { ChatMessageListContainer } from "@/components/chat/containers/chat-message-list.container";
+import { ChatMessageListContainer } from "@/features/chat/components/conversation/chat-message-list.container";
 import {
   useNcpChildSessionTabsView,
   type ResolvedChildSessionTab,
-} from "@/components/chat/ncp/session-conversation/use-ncp-child-session-tabs-view";
-import { useNcpSessionConversation } from "@/components/chat/ncp/session-conversation/use-ncp-session-conversation";
+} from "@/features/chat/hooks/use-ncp-child-session-tabs-view";
+import { useNcpSessionConversation } from "@/features/chat/hooks/use-ncp-session-conversation";
 import {
   shouldShowUnreadSessionIndicator,
   useChatSessionListStore,
-} from "@/components/chat/stores/chat-session-list.store";
+} from "@/features/chat/stores/chat-session-list.store";
 import type {
   ChatChildSessionTab,
   ChatWorkspaceFileTab,
-} from "@/components/chat/stores/chat-thread.store";
+} from "@/features/chat/stores/chat-thread.store";
 import {
   readWorkspaceFileTitle,
   resolveWorkspaceSelection,
   type WorkspaceTabViewModel,
   WorkspaceTabsBar,
-} from "@/components/chat/chat-session-workspace-panel-nav";
-import { usePresenter } from "@/components/chat/presenter/chat-presenter-context";
-import { ChatSessionWorkspaceFilePreview } from "@/components/chat/chat-session-workspace-file-preview";
-import { AgentIdentityAvatar } from "@/components/common/agent-identity";
-import { t } from "@/lib/i18n";
-import { cn } from "@/lib/utils";
+} from "./chat-session-workspace-panel-nav";
+import { usePresenter } from "@/features/chat/components/providers/chat-presenter.provider";
+import { ChatSessionWorkspaceFilePreview } from "./chat-session-workspace-file-preview";
+import { AgentIdentityAvatar } from "@/shared/components/common/agent-identity";
+import { t } from "@/shared/lib/i18n";
+import { cn } from "@/shared/lib/utils";
 
 type ChatSessionWorkspacePanelProps = {
   childSessionTabs: readonly ChatChildSessionTab[];
@@ -37,6 +37,7 @@ type ChatSessionWorkspacePanelProps = {
   workspaceFileTabs: readonly ChatWorkspaceFileTab[];
   activeWorkspaceFileKey: string | null;
   sessionProjectRoot: string | null;
+  displayMode?: "docked" | "overlay";
   onSelectSession: (sessionKey: string) => void;
   onSelectFile: (fileKey: string) => void;
   onCloseFile: (fileKey: string) => void;
@@ -163,12 +164,77 @@ function WorkspaceActiveChildHeader({
   );
 }
 
+function buildWorkspaceTabsViewModel(params: {
+  resolvedChildTabs: ResolvedChildSessionTab[];
+  workspaceFileTabs: readonly ChatWorkspaceFileTab[];
+  activeSelection: ReturnType<typeof resolveWorkspaceSelection>;
+  optimisticReadAtBySessionKey: Record<string, string>;
+  onSelectSession: (sessionKey: string) => void;
+  onSelectFile: (fileKey: string) => void;
+  onCloseFile: (fileKey: string) => void;
+}): WorkspaceTabViewModel[] {
+  const {
+    resolvedChildTabs,
+    workspaceFileTabs,
+    activeSelection,
+    optimisticReadAtBySessionKey,
+    onSelectSession,
+    onSelectFile,
+    onCloseFile,
+  } = params;
+
+  const childTabs = resolvedChildTabs.map((tab) => {
+    const optimisticReadAt = optimisticReadAtBySessionKey[tab.sessionKey];
+    const effectiveReadAt =
+      optimisticReadAt && tab.readAt
+        ? optimisticReadAt.localeCompare(tab.readAt) > 0
+          ? optimisticReadAt
+          : tab.readAt
+        : optimisticReadAt ?? tab.readAt;
+    return {
+      key: `child:${tab.sessionKey}`,
+      kind: "child-session" as const,
+      title: tab.title,
+      tooltip: tab.title,
+      agentId: tab.agentId,
+      active:
+        activeSelection?.kind === "child-session" &&
+        activeSelection.tab.sessionKey === tab.sessionKey,
+      showUnreadDot: shouldShowUnreadSessionIndicator({
+        active:
+          activeSelection?.kind === "child-session" &&
+          activeSelection.tab.sessionKey === tab.sessionKey,
+        lastMessageAt: tab.lastMessageAt,
+        readAt: effectiveReadAt,
+        runStatus: tab.runStatus,
+      }),
+      onSelect: () => onSelectSession(tab.sessionKey),
+    };
+  });
+
+  const fileTabs = workspaceFileTabs.map((file) => ({
+    key: `file:${file.key}`,
+    kind: "file" as const,
+    title: readWorkspaceFileTitle(file),
+    tooltip: file.path,
+    viewMode: file.viewMode,
+    active:
+      activeSelection?.kind === "file" &&
+      activeSelection.file.key === file.key,
+    onSelect: () => onSelectFile(file.key),
+    onClose: () => onCloseFile(file.key),
+  }));
+
+  return [...childTabs, ...fileTabs];
+}
+
 export function ChatSessionWorkspacePanel({
   childSessionTabs,
   activeChildSessionKey,
   workspaceFileTabs,
   activeWorkspaceFileKey,
   sessionProjectRoot,
+  displayMode = "docked",
   onSelectSession,
   onSelectFile,
   onCloseFile,
@@ -207,66 +273,40 @@ export function ChatSessionWorkspacePanel({
     );
   }, [activeSelection, presenter]);
 
-  const workspaceTabs = useMemo<WorkspaceTabViewModel[]>(() => {
-    const childTabs = resolvedChildTabs.map((tab) => {
-      const optimisticReadAt = optimisticReadAtBySessionKey[tab.sessionKey];
-      const effectiveReadAt =
-        optimisticReadAt && tab.readAt
-          ? optimisticReadAt.localeCompare(tab.readAt) > 0
-            ? optimisticReadAt
-            : tab.readAt
-          : optimisticReadAt ?? tab.readAt;
-      return {
-        key: `child:${tab.sessionKey}`,
-        kind: "child-session" as const,
-        title: tab.title,
-        tooltip: tab.title,
-        agentId: tab.agentId,
-        active:
-          activeSelection?.kind === "child-session" &&
-          activeSelection.tab.sessionKey === tab.sessionKey,
-        showUnreadDot: shouldShowUnreadSessionIndicator({
-          active:
-            activeSelection?.kind === "child-session" &&
-            activeSelection.tab.sessionKey === tab.sessionKey,
-          lastMessageAt: tab.lastMessageAt,
-          readAt: effectiveReadAt,
-          runStatus: tab.runStatus,
-        }),
-        onSelect: () => onSelectSession(tab.sessionKey),
-      };
-    });
-
-    const fileTabs = workspaceFileTabs.map((file) => ({
-      key: `file:${file.key}`,
-      kind: "file" as const,
-      title: readWorkspaceFileTitle(file),
-      tooltip: file.path,
-      viewMode: file.viewMode,
-      active:
-        activeSelection?.kind === "file" &&
-        activeSelection.file.key === file.key,
-      onSelect: () => onSelectFile(file.key),
-      onClose: () => onCloseFile(file.key),
-    }));
-
-    return [...childTabs, ...fileTabs];
-  }, [
-    activeSelection,
-    onCloseFile,
-    onSelectFile,
-    onSelectSession,
-    optimisticReadAtBySessionKey,
-    resolvedChildTabs,
-    workspaceFileTabs,
-  ]);
+  const workspaceTabs = useMemo<WorkspaceTabViewModel[]>(
+    () =>
+      buildWorkspaceTabsViewModel({
+        resolvedChildTabs,
+        workspaceFileTabs,
+        activeSelection,
+        optimisticReadAtBySessionKey,
+        onSelectSession,
+        onSelectFile,
+        onCloseFile,
+      }),
+    [
+      activeSelection,
+      onCloseFile,
+      onSelectFile,
+      onSelectSession,
+      optimisticReadAtBySessionKey,
+      resolvedChildTabs,
+      workspaceFileTabs,
+    ],
+  );
 
   if (!activeSelection) {
     return null;
   }
 
   return (
-    <aside className="hidden shrink-0 border-l border-gray-200/70 bg-white/95 backdrop-blur-sm md:flex md:w-[26rem] lg:w-[30rem] xl:w-[34rem]">
+    <aside
+      className={cn(
+        displayMode === "overlay"
+          ? "fixed inset-0 z-40 flex bg-white"
+          : "hidden shrink-0 border-l border-gray-200/70 bg-white/95 backdrop-blur-sm md:flex md:w-[26rem] lg:w-[30rem] xl:w-[34rem]",
+      )}
+    >
       <div className="flex h-full min-h-0 w-full flex-col">
         <div className="flex items-center justify-between gap-3 border-b border-gray-200/70 px-4 py-2.5">
           <button