@nextclaw/ui 0.13.13 → 0.14.0

package/src/features/chat/{hooks → features/session-type/hooks}/use-chat-session-type-state.ts

@@ -1,102 +1,26 @@
 import { useEffect, useMemo, useRef } from 'react';
 import type { Dispatch, SetStateAction } from 'react';
-import type { AgentProfileView, ChatSessionTypeOptionView, SessionEntryView, SessionTypeIconView } from '@/shared/lib/api';
+import type { ChatSessionTypeOptionView, SessionEntryView } from '@/shared/lib/api';
 import { t } from '@/shared/lib/i18n';
+import {
+  buildSessionTypeOptions,
+  DEFAULT_SESSION_TYPE,
+  normalizeSessionType,
+  resolveSessionTypeLabel,
+  type ChatSessionTypeOption,
+} from '@/features/chat/features/session-type/utils/chat-session-type.utils';
 
-export const DEFAULT_SESSION_TYPE = 'native';
-
-export type ChatSessionTypeOption = {
-  value: string;
-  label: string;
-  icon: SessionTypeIconView | null;
-  ready: boolean;
-  reason?: string | null;
-  reasonMessage?: string | null;
-  supportedModels?: string[];
-  recommendedModel?: string | null;
-  cta?: {
-    kind: string;
-    label?: string;
-    href?: string;
-  } | null;
-};
+export {
+  buildSessionTypeOptions,
+  DEFAULT_SESSION_TYPE,
+  normalizeSessionType,
+  resolveAgentRuntimeSessionType,
+  resolveSessionTypeLabel,
+  type ChatSessionTypeOption,
+} from '@/features/chat/features/session-type/utils/chat-session-type.utils';
 
 type UseChatSessionTypeStateParams = { selectedSession: SessionEntryView | null; pendingSessionType: string; setPendingSessionType: Dispatch<SetStateAction<string>>; sessionTypesData?: { defaultType?: string; options?: ChatSessionTypeOptionView[] } | null };
 
-export function normalizeSessionType(value: unknown): string {
-  if (typeof value !== 'string') {
-    return DEFAULT_SESSION_TYPE;
-  }
-  const normalized = value.trim().toLowerCase();
-  return normalized || DEFAULT_SESSION_TYPE;
-}
-
-export function resolveAgentRuntimeSessionType(
-  agent: Pick<AgentProfileView, 'runtime' | 'engine'> | null | undefined,
-  fallbackSessionType: string = DEFAULT_SESSION_TYPE
-): string {
-  const runtime = agent?.runtime?.trim() || agent?.engine?.trim() || fallbackSessionType;
-  return normalizeSessionType(runtime);
-}
-
-export function resolveSessionTypeLabel(sessionType: string, fallbackLabel?: string): string {
-  if (sessionType === 'native') {
-    return t('chatSessionTypeNative');
-  }
-  const normalizedFallback = fallbackLabel?.trim();
-  if (normalizedFallback) {
-    return normalizedFallback;
-  }
-  return sessionType
-    .trim()
-    .split(/[-_]+/g)
-    .filter(Boolean)
-    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
-    .join(' ') || sessionType;
-}
-
-export function buildSessionTypeOptions(
-  options: ChatSessionTypeOptionView[]
-): ChatSessionTypeOption[] {
-  const deduped = new Map<string, ChatSessionTypeOption>();
-  for (const option of options) {
-    const value = normalizeSessionType(option.value);
-    deduped.set(value, {
-      value,
-      label: option.label?.trim() || resolveSessionTypeLabel(value),
-      icon: option.icon ?? null,
-      ready: option.ready ?? true,
-      reason: option.reason ?? null,
-      reasonMessage: option.reasonMessage ?? null,
-      supportedModels: option.supportedModels,
-      recommendedModel: option.recommendedModel ?? null,
-      cta: option.cta ?? null
-    });
-  }
-  if (!deduped.has(DEFAULT_SESSION_TYPE)) {
-    deduped.set(DEFAULT_SESSION_TYPE, {
-      value: DEFAULT_SESSION_TYPE,
-      label: resolveSessionTypeLabel(DEFAULT_SESSION_TYPE),
-      icon: null,
-      ready: true,
-      reason: null,
-      reasonMessage: null,
-      supportedModels: undefined,
-      recommendedModel: null,
-      cta: null
-    });
-  }
-  return Array.from(deduped.values()).sort((left, right) => {
-    if (left.value === DEFAULT_SESSION_TYPE) {
-      return -1;
-    }
-    if (right.value === DEFAULT_SESSION_TYPE) {
-      return 1;
-    }
-    return left.value.localeCompare(right.value);
-  });
-}
-
 export function useChatSessionTypeState(params: UseChatSessionTypeStateParams): {
   sessionTypeOptions: ChatSessionTypeOption[];
   selectedSessionTypeOption: ChatSessionTypeOption | null;
@@ -130,6 +54,7 @@ export function useChatSessionTypeState(params: UseChatSessionTypeStateParams):
         reasonMessage: null,
         supportedModels: undefined,
         recommendedModel: null,
+        modelSelectionMode: 'nextclaw',
         cta: null
       });
     }
@@ -148,9 +73,13 @@ export function useChatSessionTypeState(params: UseChatSessionTypeStateParams):
     [sessionTypesData?.defaultType]
   );
   const lastAutoPendingSessionTypeRef = useRef<string | null>(null);
+  const normalizedPendingSessionType =
+    typeof pendingSessionType === 'string' && pendingSessionType.trim().length > 0
+      ? pendingSessionType
+      : undefined;
   const selectedSessionType = useMemo(
-    () => normalizeSessionType(selectedSession?.sessionType ?? pendingSessionType ?? defaultSessionType),
-    [defaultSessionType, pendingSessionType, selectedSession?.sessionType]
+    () => normalizeSessionType(selectedSession?.sessionType ?? normalizedPendingSessionType ?? defaultSessionType),
+    [defaultSessionType, normalizedPendingSessionType, selectedSession?.sessionType]
   );
   const selectedSessionTypeOption = useMemo(
     () => sessionTypeOptions.find((option) => option.value === selectedSessionType) ?? null,

package/src/features/chat/features/session-type/utils/chat-session-type.utils.ts

@@ -0,0 +1,105 @@
+import type {
+  AgentProfileView,
+  ChatSessionTypeOptionView,
+  SessionTypeIconView,
+} from "@/shared/lib/api";
+import type { RuntimeModelSelectionMode } from "@nextclaw/shared";
+import { t } from "@/shared/lib/i18n";
+
+export const DEFAULT_SESSION_TYPE = "native";
+
+export type ChatSessionTypeOption = {
+  value: string;
+  label: string;
+  icon: SessionTypeIconView | null;
+  ready: boolean;
+  reason?: string | null;
+  reasonMessage?: string | null;
+  supportedModels?: string[];
+  recommendedModel?: string | null;
+  modelSelectionMode?: RuntimeModelSelectionMode;
+  cta?: {
+    kind: string;
+    label?: string;
+    href?: string;
+  } | null;
+};
+
+export function normalizeSessionType(value: unknown): string {
+  if (typeof value !== "string") {
+    return DEFAULT_SESSION_TYPE;
+  }
+  const normalized = value.trim().toLowerCase();
+  return normalized || DEFAULT_SESSION_TYPE;
+}
+
+export function resolveAgentRuntimeSessionType(
+  agent: Pick<AgentProfileView, "runtime" | "engine"> | null | undefined,
+  fallbackSessionType: string = DEFAULT_SESSION_TYPE,
+): string {
+  const runtime = agent?.runtime?.trim() || agent?.engine?.trim() || fallbackSessionType;
+  return normalizeSessionType(runtime);
+}
+
+export function resolveSessionTypeLabel(
+  sessionType: string,
+  fallbackLabel?: string,
+): string {
+  if (sessionType === "native") {
+    return t("chatSessionTypeNative");
+  }
+  const normalizedFallback = fallbackLabel?.trim();
+  if (normalizedFallback) {
+    return normalizedFallback;
+  }
+  return sessionType
+    .trim()
+    .split(/[-_]+/g)
+    .filter(Boolean)
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+    .join(" ") || sessionType;
+}
+
+export function buildSessionTypeOptions(
+  options: ChatSessionTypeOptionView[],
+): ChatSessionTypeOption[] {
+  const deduped = new Map<string, ChatSessionTypeOption>();
+  for (const option of options) {
+    const value = normalizeSessionType(option.value);
+    deduped.set(value, {
+      value,
+      label: option.label?.trim() || resolveSessionTypeLabel(value),
+      icon: option.icon ?? null,
+      ready: option.ready ?? true,
+      reason: option.reason ?? null,
+      reasonMessage: option.reasonMessage ?? null,
+      supportedModels: option.supportedModels,
+      recommendedModel: option.recommendedModel ?? null,
+      modelSelectionMode: option.modelSelectionMode ?? "nextclaw",
+      cta: option.cta ?? null,
+    });
+  }
+  if (!deduped.has(DEFAULT_SESSION_TYPE)) {
+    deduped.set(DEFAULT_SESSION_TYPE, {
+      value: DEFAULT_SESSION_TYPE,
+      label: resolveSessionTypeLabel(DEFAULT_SESSION_TYPE),
+      icon: null,
+      ready: true,
+      reason: null,
+      reasonMessage: null,
+      supportedModels: undefined,
+      recommendedModel: null,
+      modelSelectionMode: "nextclaw",
+      cta: null,
+    });
+  }
+  return Array.from(deduped.values()).sort((left, right) => {
+    if (left.value === DEFAULT_SESSION_TYPE) {
+      return -1;
+    }
+    if (right.value === DEFAULT_SESSION_TYPE) {
+      return 1;
+    }
+    return left.value.localeCompare(right.value);
+  });
+}

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

@@ -1,6 +1,6 @@
 import { render, screen } from "@testing-library/react";
 import { beforeEach, describe, expect, it, vi } from "vitest";
-import { ChatSessionWorkspaceFilePreview } from "./chat-session-workspace-file-preview";
+import { ChatSessionWorkspaceFilePreview } from "@/features/chat/features/workspace/components/chat-session-workspace-file-preview";
 import type { ChatWorkspaceFileTab } from "@/features/chat/stores/chat-thread.store";
 import { t } from "@/shared/lib/i18n";
 

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

@@ -2,9 +2,9 @@ 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 "@/features/chat/stores/chat-thread.store";
-import { ChatSessionWorkspaceFileBreadcrumbs } from "./workspace/chat-session-workspace-file-breadcrumbs";
+import { ChatSessionWorkspaceFileBreadcrumbs } from "./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 { buildLineDiff, buildPreviewLines } from "@/features/chat/features/message/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";

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

@@ -0,0 +1,156 @@
+import { useRef } from "react";
+import { useStickyBottomScroll } from "@nextclaw/agent-chat-ui";
+import { FolderGit2, Loader2 } 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 { 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 = {
+  activeSelection: WorkspaceSelection;
+  sessionCronJobs: readonly CronJobView[];
+  sessionProjectRoot: string | null;
+  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="truncate">{value}</span>
+    </span>
+  );
+}
+
+function ChildSessionMetaStrip({ tab }: { tab: ResolvedChildSessionTab }) {
+  const metaItems = [
+    tab.sessionTypeLabel,
+    tab.preferredModel,
+    tab.projectName,
+  ].filter((value): value is string => Boolean(value?.trim()));
+
+  if (metaItems.length === 0 && !tab.projectRoot) {
+    return null;
+  }
+
+  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}
+      {tab.projectRoot ? (
+        <div
+          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"
+        >
+          {tab.projectRoot}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+function WorkspaceActiveChildHeader({ tab }: { tab: ResolvedChildSessionTab }) {
+  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>
+      </div>
+      <ChildSessionMetaStrip tab={tab} />
+    </div>
+  );
+}
+
+export function ChatSessionWorkspacePanelContent({
+  activeSelection,
+  sessionCronJobs,
+  sessionProjectRoot,
+  sessionWorkingDir,
+}: ChatSessionWorkspacePanelContentProps) {
+  const presenter = usePresenter();
+
+  if (activeSelection.kind === "child-session") {
+    return (
+      <>
+        <WorkspaceActiveChildHeader tab={activeSelection.tab} />
+        <div className="flex-1 min-h-0">
+          <ChildSessionContent sessionKey={activeSelection.tab.sessionKey} />
+        </div>
+      </>
+    );
+  }
+
+  if (activeSelection.kind === "file") {
+    return (
+      <ChatSessionWorkspaceFilePreview
+        file={activeSelection.file}
+        sessionProjectRoot={sessionProjectRoot}
+        sessionWorkingDir={sessionWorkingDir}
+        onFileOpen={presenter.chatThreadManager.openFilePreview}
+      />
+    );
+  }
+
+  return <SessionCronJobContent jobs={sessionCronJobs} />;
+}

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

@@ -0,0 +1,84 @@
+import { AlarmClock, ArrowLeft, ArrowRight, FileCode2, 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 {
+  CompactTabStrip,
+  type CompactTabStripAction,
+  type CompactTabStripTab,
+} from "@/shared/components/ui/tab-strip/compact-tab-strip";
+import { t } from "@/shared/lib/i18n";
+
+function WorkspaceTabIcon({ agentId, kind }: Pick<WorkspaceTabViewModel, "agentId" | "kind">) {
+  if (kind === "cron") {
+    return <AlarmClock className="h-3.5 w-3.5 shrink-0 text-gray-400" />;
+  }
+
+  if (kind === "file") {
+    return <FileCode2 className="h-3.5 w-3.5 shrink-0 text-gray-400" />;
+  }
+
+  if (agentId) {
+    return (
+      <AgentIdentityAvatar agentId={agentId} className="h-3.5 w-3.5 shrink-0" />
+    );
+  }
+
+  return <MessageSquareText className="h-3.5 w-3.5 shrink-0 text-gray-400" />;
+}
+
+function buildCompactWorkspaceTabs(
+  tabs: readonly WorkspaceTabViewModel[],
+): CompactTabStripTab[] {
+  return tabs.map((tab) => ({
+    key: tab.key,
+    label: tab.title,
+    active: tab.active,
+    tooltip: tab.tooltip,
+    leadingIcon: <WorkspaceTabIcon kind={tab.kind} agentId={tab.agentId} />,
+    badge:
+      tab.kind === "file" && tab.viewMode === "diff" ? (
+        <span className="shrink-0 rounded border border-amber-200 bg-amber-50 px-1 py-0 text-[9px] font-medium uppercase tracking-[0.08em] text-amber-700">
+          {t("chatWorkspaceDiff")}
+        </span>
+      ) : null,
+    unreadIndicator: tab.showUnreadDot ? <span aria-label={t("chatSessionUnread")} className="h-2 w-2 shrink-0 rounded-full bg-primary" /> : null,
+    closeLabel: t("chatWorkspaceCloseFile"),
+    closePlacement: "leading-hover",
+    onSelect: tab.onSelect,
+    onClose: tab.onClose,
+  }));
+}
+
+export function WorkspaceTabsBar({
+  canGoBack,
+  canGoForward,
+  onClose,
+  onGoBack,
+  onGoForward,
+  tabs,
+}: {
+  canGoBack: boolean;
+  canGoForward: boolean;
+  onClose: () => void;
+  onGoBack: () => void;
+  onGoForward: () => void;
+  tabs: readonly WorkspaceTabViewModel[];
+}) {
+  const compactTabs = buildCompactWorkspaceTabs(tabs);
+  const actions: CompactTabStripAction[] = [
+    { key: "back", icon: <ArrowLeft className="h-4 w-4" />, label: t("chatWorkspaceBack"), disabled: !canGoBack, onClick: onGoBack },
+    { key: "forward", icon: <ArrowRight className="h-4 w-4" />, label: t("chatWorkspaceForward"), disabled: !canGoForward, onClick: onGoForward },
+    { key: "close", icon: <X className="h-4 w-4" />, label: t("chatWorkspaceClosePanel"), onClick: onClose },
+  ];
+
+  return (
+    <CompactTabStrip
+      testId="workspace-tabs-bar"
+      scrollTestId="workspace-tabs-scroll"
+      tabs={compactTabs}
+      actions={actions}
+      scrollClassName="workspace-horizontal-scrollbar"
+      actionsClassName="ml-1 mr-1 self-stretch"
+    />
+  );
+}

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

@@ -0,0 +1,138 @@
+import { useEffect, useMemo } from "react";
+import type { CronJobView } from "@/shared/lib/api";
+import { useNcpChildSessionTabsView } from "@/features/chat/features/ncp/hooks/use-ncp-child-session-tabs-view";
+import { useChatSessionListStore } from "@/features/chat/stores/chat-session-list.store";
+import type {
+  ChatChildSessionTab,
+  ChatWorkspaceNavigationEntry,
+  ChatWorkspaceFileTab,
+} from "@/features/chat/stores/chat-thread.store";
+import {
+  buildWorkspaceTabsViewModel,
+  resolveWorkspaceSelection,
+  type WorkspaceTabViewModel,
+} from "@/features/chat/features/workspace/utils/chat-workspace-panel-view-model.utils";
+import { WorkspaceTabsBar } from "./chat-session-workspace-panel-nav";
+import { usePresenter } from "@/features/chat/components/providers/chat-presenter.provider";
+import { ChatSessionWorkspacePanelContent } from "@/features/chat/features/workspace/components/chat-session-workspace-panel-content";
+import { ResizableRightPanel } from "@/shared/components/resizable-right-panel/resizable-right-panel";
+import { cn } from "@/shared/lib/utils";
+import {
+  canGoBackInNavigationHistory,
+  canGoForwardInNavigationHistory,
+} from "@/shared/lib/navigation-history";
+
+type ChatSessionWorkspacePanelProps = {
+  sessionKey: string | null;
+  childSessionTabs: readonly ChatChildSessionTab[];
+  activeChildSessionKey: string | null;
+  workspaceFileTabs: readonly ChatWorkspaceFileTab[];
+  activeWorkspaceFileKey: string | null;
+  workspaceNavigationHistory?: readonly ChatWorkspaceNavigationEntry[];
+  workspaceNavigationHistoryIndex?: number;
+  activePanelKind?: "child-session" | "file" | "cron" | null;
+  sessionCronJobs?: readonly CronJobView[];
+  sessionProjectRoot: string | null;
+  sessionWorkingDir: string | null;
+  displayMode?: "docked" | "overlay";
+};
+
+export function ChatSessionWorkspacePanel({
+  sessionKey,
+  childSessionTabs,
+  activeChildSessionKey,
+  workspaceFileTabs,
+  activeWorkspaceFileKey,
+  workspaceNavigationHistory = [],
+  workspaceNavigationHistoryIndex = 0,
+  activePanelKind,
+  sessionCronJobs = [],
+  sessionProjectRoot,
+  sessionWorkingDir,
+  displayMode = "docked",
+}: ChatSessionWorkspacePanelProps) {
+  const presenter = usePresenter();
+  const resolvedChildTabs = useNcpChildSessionTabsView(childSessionTabs);
+  const optimisticReadAtBySessionKey = useChatSessionListStore(
+    (state) => state.optimisticReadAtBySessionKey,
+  );
+  const activeSelection = resolveWorkspaceSelection({
+    activeChildSessionKey,
+    activeWorkspaceFileKey,
+    activePanelKind,
+    childSessionTabs: resolvedChildTabs,
+    workspaceFileTabs,
+    sessionCronJobCount: sessionCronJobs.length,
+  });
+  const workspaceHistory = {
+    entries: workspaceNavigationHistory,
+    index: workspaceNavigationHistoryIndex,
+  };
+
+  useEffect(() => {
+    presenter.chatThreadManager.syncVisibleWorkspaceSelection(activeSelection);
+  }, [activeSelection, presenter]);
+
+  const workspaceTabs = useMemo<WorkspaceTabViewModel[]>(
+    () =>
+      buildWorkspaceTabsViewModel({
+        resolvedChildTabs,
+        workspaceFileTabs,
+        sessionCronJobCount: sessionCronJobs.length,
+        activeSelection,
+        optimisticReadAtBySessionKey,
+        onSelectSession: presenter.chatThreadManager.selectChildSessionDetail,
+        onSelectFile: presenter.chatThreadManager.selectWorkspaceFile,
+        onCloseFile: presenter.chatThreadManager.closeWorkspaceFile,
+        onSelectCronJobs: () => {
+          if (sessionKey)
+            presenter.chatThreadManager.openSessionCronPanel(sessionKey);
+        },
+      }),
+    [
+      activeSelection,
+      optimisticReadAtBySessionKey,
+      presenter.chatThreadManager,
+      resolvedChildTabs,
+      sessionKey,
+      workspaceFileTabs,
+      sessionCronJobs.length,
+    ],
+  );
+
+  if (!activeSelection) {
+    return null;
+  }
+
+  return (
+    <ResizableRightPanel
+      className={cn(
+        displayMode === "overlay"
+          ? "bg-white"
+          : "hidden border-gray-200/70 bg-white/95 backdrop-blur-sm md:flex",
+      )}
+      defaultWidth={480}
+      minWidth={360}
+      maxWidth={860}
+      overlay={displayMode === "overlay"}
+    >
+      <WorkspaceTabsBar
+        tabs={workspaceTabs}
+        canGoBack={canGoBackInNavigationHistory(workspaceHistory)}
+        canGoForward={canGoForwardInNavigationHistory(workspaceHistory)}
+        onGoBack={presenter.chatThreadManager.goBackWorkspacePanel}
+        onGoForward={presenter.chatThreadManager.goForwardWorkspacePanel}
+        onClose={presenter.chatThreadManager.closeWorkspacePanel}
+      />
+
+      <div className="flex min-h-0 flex-1 flex-col bg-white">
+        <ChatSessionWorkspacePanelContent
+          activeSelection={activeSelection}
+          sessionCronJobs={sessionCronJobs}
+          sessionProjectRoot={sessionProjectRoot}
+          sessionWorkingDir={sessionWorkingDir}
+        />
+      </div>
+    </ResizableRightPanel>
+  );
+}

package/src/features/chat/{components/workspace → features/workspace/components}/session-cron-job-content.tsx

@@ -2,7 +2,7 @@ import { Trash2 } from "lucide-react";
 import type { CronJobView } from "@/shared/lib/api";
 import { Button } from "@/shared/components/ui/button";
 import { useConfirmDialog } from "@/shared/hooks/use-confirm-dialog";
-import { useDeleteCronJob } from "@/shared/hooks/use-config";
+import { useDeleteCronJob } from "@/features/cron";
 import {
   describeCronSchedule,
   describeCronSession,