@nextclaw/ui 0.15.3 → 0.15.5

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

@@ -1,12 +1,26 @@
 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 {
+  ChatWorkspaceNavigationEntry,
+  ChatWorkspacePanelKind,
   ChatWorkspaceFileTab,
   ChatWorkspaceSideChatDraft,
 } from "@/features/chat/stores/chat-thread.store";
 import { t } from "@/shared/lib/i18n";
+import {
+  resolveAlternateWorkspaceFileViewer,
+  resolveWorkspaceFileViewer,
+  type ChatWorkspaceFileViewer,
+} from "@/features/chat/features/workspace/utils/chat-workspace-file-viewer.utils";
+import { areWorkspaceNavigationEntriesEqual } from "@/features/chat/features/workspace/utils/chat-thread-workspace-session.utils";
 
 export type WorkspaceSelection =
+  | {
+      kind: "overview";
+    }
+  | {
+      kind: "child-sessions";
+    }
   | {
       kind: "child-session";
       tab: ResolvedChildSessionTab;
@@ -15,6 +29,9 @@ export type WorkspaceSelection =
       kind: "side-chat-draft";
       draft: ChatWorkspaceSideChatDraft;
     }
+  | {
+      kind: "project-files";
+    }
   | {
       kind: "file";
       file: ChatWorkspaceFileTab;
@@ -25,13 +42,20 @@ export type WorkspaceSelection =
 
 export type WorkspaceTabViewModel = {
   key: string;
-  kind: "child-session" | "side-chat-draft" | "file" | "cron";
+  kind: ChatWorkspacePanelKind;
   title: string;
   tooltip: string;
   active: boolean;
   agentId?: string | null;
+  fileName?: string | null;
   showUnreadDot?: boolean;
   viewMode?: "preview" | "diff";
+  isRenderedPreview?: boolean;
+  alternateViewerAction?: {
+    label: string;
+    viewer: ChatWorkspaceFileViewer;
+    onSelect: () => void;
+  } | null;
   onSelect: () => void;
   onClose?: () => void;
 };
@@ -42,13 +66,12 @@ export function readWorkspaceFileTitle(file: ChatWorkspaceFileTab): string {
 }
 
 export function resolveWorkspaceSelection(params: {
-  activePanelKind?: "child-session" | "side-chat-draft" | "file" | "cron" | null;
+  activePanelKind?: ChatWorkspacePanelKind | null;
   activeChildSessionKey: string | null;
   activeSideChatDraft: ChatWorkspaceSideChatDraft | null;
   activeWorkspaceFileKey: string | null;
   childSessionTabs: ResolvedChildSessionTab[];
   workspaceFileTabs: readonly ChatWorkspaceFileTab[];
-  sessionCronJobCount: number;
 }): WorkspaceSelection | null {
   const {
     activePanelKind,
@@ -57,10 +80,21 @@ export function resolveWorkspaceSelection(params: {
     activeWorkspaceFileKey,
     childSessionTabs,
     workspaceFileTabs,
-    sessionCronJobCount,
   } = params;
 
-  if (activePanelKind === "cron" && sessionCronJobCount > 0) {
+  if (activePanelKind === "overview") {
+    return { kind: "overview" };
+  }
+
+  if (activePanelKind === "child-sessions") {
+    return { kind: "child-sessions" };
+  }
+
+  if (activePanelKind === "project-files") {
+    return { kind: "project-files" };
+  }
+
+  if (activePanelKind === "cron") {
     return { kind: "cron" };
   }
 
@@ -116,38 +150,128 @@ export function resolveWorkspaceSelection(params: {
     };
   }
 
-  if (sessionCronJobCount > 0) {
-    return { kind: "cron" };
-  }
-
   return null;
 }
 
-export function buildWorkspaceTabsViewModel(params: {
+type WorkspaceTabsViewModelParams = {
   resolvedChildTabs: ResolvedChildSessionTab[];
   activeSideChatDraft: ChatWorkspaceSideChatDraft | null;
+  closedWorkspaceTabEntries: readonly ChatWorkspaceNavigationEntry[];
   workspaceFileTabs: readonly ChatWorkspaceFileTab[];
-  sessionCronJobCount: number;
   activeSelection: WorkspaceSelection | null;
   optimisticReadAtBySessionKey: Record<string, string>;
   onSelectSession: (sessionKey: string) => void;
   onSelectFile: (fileKey: string) => void;
-  onCloseFile: (fileKey: string) => void;
+  onOpenFileViewer: (fileKey: string, viewer: ChatWorkspaceFileViewer) => void;
+  onCloseTab: (entry: ChatWorkspaceNavigationEntry) => void;
+  onSelectOverview: () => void;
+  onSelectChildSessions: () => void;
+  onSelectProjectFiles: () => void;
   onSelectCronJobs: () => void;
-}): WorkspaceTabViewModel[] {
+};
+
+function createWorkspacePageTabEntry(
+  kind: ChatWorkspacePanelKind,
+): ChatWorkspaceNavigationEntry | null {
+  if (kind === "child-sessions" || kind === "cron" || kind === "project-files") {
+    return { kind };
+  }
+  return null;
+}
+
+function buildWorkspacePageTabs({
+  activeSelection,
+  closedWorkspaceTabEntries,
+  onCloseTab,
+  onSelectChildSessions,
+  onSelectCronJobs,
+  onSelectOverview,
+  onSelectProjectFiles,
+}: Pick<
+  WorkspaceTabsViewModelParams,
+  | "activeSelection"
+  | "closedWorkspaceTabEntries"
+  | "onCloseTab"
+  | "onSelectChildSessions"
+  | "onSelectCronJobs"
+  | "onSelectOverview"
+  | "onSelectProjectFiles"
+>): WorkspaceTabViewModel[] {
+  const tabs: WorkspaceTabViewModel[] = [
+    {
+      key: "overview",
+      kind: "overview",
+      title: t("chatWorkspaceOverview"),
+      tooltip: t("chatWorkspaceOverview"),
+      active: activeSelection?.kind === "overview",
+      onSelect: onSelectOverview,
+    },
+    {
+      key: "child-sessions",
+      kind: "child-sessions",
+      title: t("chatWorkspaceChildSessions"),
+      tooltip: t("chatWorkspaceChildSessions"),
+      active: activeSelection?.kind === "child-sessions",
+      onSelect: onSelectChildSessions,
+      onClose: () => onCloseTab({ kind: "child-sessions" }),
+    },
+    {
+      key: "cron:session",
+      kind: "cron",
+      title: t("chatWorkspaceSessionCronJobs"),
+      tooltip: t("chatWorkspaceSessionCronJobs"),
+      active: activeSelection?.kind === "cron",
+      onSelect: onSelectCronJobs,
+      onClose: () => onCloseTab({ kind: "cron" }),
+    },
+    {
+      key: "project-files",
+      kind: "project-files",
+      title: t("chatWorkspaceProjectFiles"),
+      tooltip: t("chatWorkspaceProjectFiles"),
+      active: activeSelection?.kind === "project-files",
+      onSelect: onSelectProjectFiles,
+      onClose: () => onCloseTab({ kind: "project-files" }),
+    },
+  ];
+  return tabs.filter((tab) => {
+    const entry = createWorkspacePageTabEntry(tab.kind);
+    return !entry || !closedWorkspaceTabEntries.some((candidate) =>
+      areWorkspaceNavigationEntriesEqual(candidate, entry),
+    );
+  });
+}
+
+export function buildWorkspaceTabsViewModel(
+  params: WorkspaceTabsViewModelParams,
+): WorkspaceTabViewModel[] {
   const {
     activeSideChatDraft,
+    closedWorkspaceTabEntries,
     resolvedChildTabs,
     workspaceFileTabs,
-    sessionCronJobCount,
     activeSelection,
     optimisticReadAtBySessionKey,
     onSelectSession,
     onSelectFile,
-    onCloseFile,
+    onOpenFileViewer,
+    onCloseTab,
+    onSelectOverview,
+    onSelectChildSessions,
+    onSelectProjectFiles,
     onSelectCronJobs,
   } = params;
 
+  const workspacePages = buildWorkspacePageTabs({
+    activeSelection,
+    closedWorkspaceTabEntries,
+    onCloseTab,
+    onSelectChildSessions,
+    onSelectCronJobs,
+    onSelectOverview,
+    onSelectProjectFiles,
+  });
+
   const sideChatDraftTabs = activeSideChatDraft
     ? [
         {
@@ -159,11 +283,23 @@ export function buildWorkspaceTabsViewModel(params: {
             activeSelection?.kind === "side-chat-draft" &&
             activeSelection.draft.draftKey === activeSideChatDraft.draftKey,
           onSelect: () => undefined,
+          onClose: () => onCloseTab({
+            kind: "side-chat-draft",
+            key: activeSideChatDraft.draftKey,
+          }),
         },
       ]
     : [];
 
-  const childTabs = resolvedChildTabs.map((tab) => {
+  const childTabs = resolvedChildTabs.filter(
+    (tab) =>
+      !closedWorkspaceTabEntries.some((entry) =>
+        areWorkspaceNavigationEntriesEqual(entry, {
+          kind: "child-session",
+          key: tab.sessionKey,
+        }),
+      ),
+  ).map((tab) => {
     const optimisticReadAt = optimisticReadAtBySessionKey[tab.sessionKey];
     const effectiveReadAt =
       optimisticReadAt && tab.readAt
@@ -190,34 +326,51 @@ export function buildWorkspaceTabsViewModel(params: {
         runStatus: tab.runStatus,
       }),
       onSelect: () => onSelectSession(tab.sessionKey),
+      onClose: () => onCloseTab({
+        kind: "child-session",
+        key: tab.sessionKey,
+      }),
+    };
+  });
+
+  const fileTabs = workspaceFileTabs.map((file) => {
+    const viewer = file.viewMode === "preview"
+      ? resolveWorkspaceFileViewer(file.path, file.previewViewer)
+      : null;
+    const alternateViewer = file.viewMode === "preview"
+      ? resolveAlternateWorkspaceFileViewer(file.path, file.previewViewer)
+      : null;
+    const fileTitle = readWorkspaceFileTitle(file);
+    return {
+      key: `file:${file.key}`,
+      kind: "file" as const,
+      title: viewer === "rendered"
+        ? `${t("chatWorkspacePreview")}: ${fileTitle}`
+        : fileTitle,
+      tooltip: file.path,
+      fileName: file.path,
+      viewMode: file.viewMode,
+      isRenderedPreview: viewer === "rendered",
+      alternateViewerAction: alternateViewer
+        ? {
+            label: alternateViewer === "rendered"
+              ? t("chatWorkspaceOpenPreview")
+              : t("chatWorkspaceOpenSource"),
+            viewer: alternateViewer,
+            onSelect: () => onOpenFileViewer(file.key, alternateViewer),
+          }
+        : null,
+      active:
+        activeSelection?.kind === "file" && activeSelection.file.key === file.key,
+      onSelect: () => onSelectFile(file.key),
+      onClose: () => onCloseTab({ kind: "file", key: file.key }),
     };
   });
 
-  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),
-  }));
-
-  const cronTab =
-    sessionCronJobCount > 0
-      ? [
-          {
-            key: "cron:session",
-            kind: "cron" as const,
-            title: t("chatWorkspaceSessionCronJobs"),
-            tooltip: t("chatWorkspaceSessionCronJobs"),
-            active: activeSelection?.kind === "cron",
-            onSelect: onSelectCronJobs,
-          },
-        ]
-      : [];
-
-  return [...sideChatDraftTabs, ...childTabs, ...fileTabs, ...cronTab];
+  return [
+    ...workspacePages,
+    ...sideChatDraftTabs,
+    ...childTabs,
+    ...fileTabs,
+  ];
 }

package/src/features/chat/index.ts

@@ -6,6 +6,7 @@ export { ChatPresenter } from "./presenters/chat.presenter";
 export { ChatDraftIntentManager } from "./managers/chat-draft-intent.manager";
 export { useChatSessionListStore } from "./stores/chat-session-list.store";
 export { useChatThreadStore } from "./stores/chat-thread.store";
+export { useChatMessageLayoutStore } from "./stores/chat-message-layout.store";
 export { useNcpChatSessionTypes } from "./features/session-type/hooks/use-ncp-chat-session-types";
 export {
   buildSessionTypeOptions,

package/src/features/chat/managers/__tests__/chat-thread-workspace.manager.test.ts

@@ -0,0 +1,101 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { ChatThreadManager } from '@/features/chat/managers/chat-thread.manager';
+import { useChatSessionListStore } from '@/features/chat/stores/chat-session-list.store';
+import { useChatThreadStore } from '@/features/chat/stores/chat-thread.store';
+
+function createUiManager(): ConstructorParameters<typeof ChatThreadManager>[0] {
+  return {
+    goToSession: vi.fn(),
+  } as unknown as ConstructorParameters<typeof ChatThreadManager>[0];
+}
+
+describe('ChatThreadManager workspace pages', () => {
+  beforeEach(() => {
+    useChatSessionListStore.setState({
+      snapshot: {
+        ...useChatSessionListStore.getState().snapshot,
+        selectedSessionKey: 'parent-session-1',
+      },
+    });
+    useChatThreadStore.setState({
+      snapshot: {
+        ...useChatThreadStore.getState().snapshot,
+        workspacePanelParentKey: null,
+        activeWorkspacePanelKind: null,
+        activeChildSessionKey: null,
+        activeWorkspaceFileKey: null,
+        closedWorkspaceTabEntries: [],
+        workspaceNavigationHistory: [],
+        workspaceNavigationHistoryIndex: 0,
+      },
+    });
+  });
+
+  it('opens the stable pages as navigable session pages', () => {
+    const onWorkspacePanelOpened = vi.fn();
+    const manager = new ChatThreadManager(
+      createUiManager(),
+      {} as ConstructorParameters<typeof ChatThreadManager>[1],
+      onWorkspacePanelOpened,
+    );
+
+    manager.openWorkspaceOverview('parent-session-1');
+    manager.openChildSessions('parent-session-1');
+    manager.openProjectFiles('parent-session-1');
+
+    expect(useChatThreadStore.getState().snapshot).toMatchObject({
+      workspacePanelParentKey: 'parent-session-1',
+      activeWorkspacePanelKind: 'project-files',
+      workspaceNavigationHistory: [
+        { kind: 'overview' },
+        { kind: 'child-sessions' },
+        { kind: 'project-files' },
+      ],
+      workspaceNavigationHistoryIndex: 2,
+    });
+    expect(onWorkspacePanelOpened).toHaveBeenCalledTimes(3);
+  });
+
+  it('toggles the current session workspace from the stable header action', () => {
+    const manager = new ChatThreadManager(
+      createUiManager(),
+      {} as ConstructorParameters<typeof ChatThreadManager>[1],
+    );
+
+    manager.toggleWorkspacePanel('parent-session-1');
+    expect(useChatThreadStore.getState().snapshot).toMatchObject({
+      workspacePanelParentKey: 'parent-session-1',
+      activeWorkspacePanelKind: 'overview',
+    });
+
+    manager.toggleWorkspacePanel('parent-session-1');
+    expect(useChatThreadStore.getState().snapshot).toMatchObject({
+      workspacePanelParentKey: null,
+      activeWorkspacePanelKind: null,
+    });
+  });
+
+  it('closes a workspace page, restores overview, and reopens the page on demand', () => {
+    const manager = new ChatThreadManager(
+      createUiManager(),
+      {} as ConstructorParameters<typeof ChatThreadManager>[1],
+    );
+
+    manager.openWorkspaceOverview('parent-session-1');
+    manager.openProjectFiles('parent-session-1');
+    manager.closeWorkspaceTab({ kind: 'project-files' });
+
+    expect(useChatThreadStore.getState().snapshot).toMatchObject({
+      activeWorkspacePanelKind: 'overview',
+      closedWorkspaceTabEntries: [{ kind: 'project-files' }],
+      workspaceNavigationHistory: [{ kind: 'overview' }],
+      workspaceNavigationHistoryIndex: 0,
+    });
+
+    manager.openProjectFiles('parent-session-1');
+    expect(useChatThreadStore.getState().snapshot).toMatchObject({
+      activeWorkspacePanelKind: 'project-files',
+      closedWorkspaceTabEntries: [],
+    });
+  });
+});

package/src/features/chat/managers/__tests__/chat-thread.manager.test.ts

@@ -60,6 +60,7 @@ beforeEach(() => {
       activeSideChatDraft: null,
       workspaceFileTabs: [],
       activeWorkspaceFileKey: null,
+      closedWorkspaceTabEntries: [],
       workspaceNavigationHistory: [],
       workspaceNavigationHistoryIndex: 0,
     },
@@ -315,7 +316,7 @@ describe('ChatThreadManager', () => {
     expect(useChatThreadStore.getState().snapshot.workspaceFileTabs).toEqual(
       expect.arrayContaining([
         expect.objectContaining({
-          key: 'parent-session-1::preview::README.md',
+          key: 'parent-session-1::preview:rendered::README.md',
           path: 'README.md',
           viewMode: 'preview',
         }),
@@ -331,7 +332,31 @@ describe('ChatThreadManager', () => {
 });
 
 describe('ChatThreadManager workspace file tabs', () => {
-  it('opens HTML previews in source mode when the viewer is omitted or auto', () => {
+  it.each([
+    { path: 'demo.html', previewViewer: undefined, expectedViewer: 'source' },
+    { path: 'auto.html', previewViewer: 'auto' as const, expectedViewer: 'source' },
+    { path: 'README.md', previewViewer: undefined, expectedViewer: 'rendered' },
+    { path: 'report.docx', previewViewer: 'auto' as const, expectedViewer: 'auto' },
+  ])('normalizes the viewer for $path', ({ path, previewViewer, expectedViewer }) => {
+      const manager = new ChatThreadManager(
+        createUiManager(),
+        {} as ConstructorParameters<typeof ChatThreadManager>[1],
+      );
+
+      manager.openFilePreview({
+        path,
+        label: path,
+        viewMode: 'preview',
+        previewViewer,
+      });
+
+      expect(useChatThreadStore.getState().snapshot.workspaceFileTabs[0]).toMatchObject({
+        path,
+        previewViewer: expectedViewer,
+      });
+  });
+
+  it('opens source and rendered previews for the same file as adjacent workspace tabs', () => {
     const manager = new ChatThreadManager(
       createUiManager(),
       {} as ConstructorParameters<typeof ChatThreadManager>[1],
@@ -341,10 +366,12 @@ describe('ChatThreadManager workspace file tabs', () => {
       path: 'demo.html',
       label: 'demo.html',
       viewMode: 'preview',
+      previewViewer: 'source',
     });
+    manager.openWorkspaceFileViewer('parent-session-1::preview::demo.html');
 
     expect(useChatThreadStore.getState().snapshot).toMatchObject({
-      activeWorkspaceFileKey: 'parent-session-1::preview::demo.html',
+      activeWorkspaceFileKey: 'parent-session-1::preview:rendered::demo.html',
       workspaceFileTabs: [
         {
           key: 'parent-session-1::preview::demo.html',
@@ -352,67 +379,25 @@ describe('ChatThreadManager workspace file tabs', () => {
           viewMode: 'preview',
           previewViewer: 'source',
         },
-      ],
-    });
-
-    manager.openFilePreview({
-      path: 'auto.html',
-      label: 'auto.html',
-      viewMode: 'preview',
-      previewViewer: 'auto',
-    });
-
-    expect(useChatThreadStore.getState().snapshot).toMatchObject({
-      activeWorkspaceFileKey: 'parent-session-1::preview::auto.html',
-      workspaceFileTabs: [
         {
-          key: 'parent-session-1::preview::auto.html',
-          path: 'auto.html',
+          key: 'parent-session-1::preview:rendered::demo.html',
+          path: 'demo.html',
           viewMode: 'preview',
-          previewViewer: 'source',
+          previewViewer: 'rendered',
         },
-        expect.objectContaining({
-          key: 'parent-session-1::preview::demo.html',
-        }),
       ],
     });
-  });
 
-  it('keeps source and rendered previews for the same file as separate workspace tabs', () => {
-    const manager = new ChatThreadManager(
-      createUiManager(),
-      {} as ConstructorParameters<typeof ChatThreadManager>[1],
-    );
-
-    manager.openFilePreview({
-      path: 'demo.html',
-      label: 'demo.html',
-      viewMode: 'preview',
-      previewViewer: 'source',
-    });
-    manager.openFilePreview({
-      path: 'demo.html',
-      label: 'demo.html',
-      viewMode: 'preview',
-      previewViewer: 'rendered',
-    });
+    manager.openWorkspaceFileViewer('parent-session-1::preview::demo.html');
+    expect(useChatThreadStore.getState().snapshot.workspaceFileTabs).toHaveLength(2);
 
+    manager.openWorkspaceFileViewer('parent-session-1::preview:rendered::demo.html');
     expect(useChatThreadStore.getState().snapshot).toMatchObject({
-      activeWorkspaceFileKey: 'parent-session-1::preview:rendered::demo.html',
-      workspaceFileTabs: [
-        {
-          key: 'parent-session-1::preview:rendered::demo.html',
-          path: 'demo.html',
-          viewMode: 'preview',
-          previewViewer: 'rendered',
-        },
-        {
-          key: 'parent-session-1::preview::demo.html',
-          path: 'demo.html',
-          viewMode: 'preview',
-          previewViewer: 'source',
-        },
-      ],
+      activeWorkspaceFileKey: 'parent-session-1::preview::demo.html',
+      workspaceFileTabs: expect.arrayContaining([
+        expect.objectContaining({ previewViewer: 'source' }),
+        expect.objectContaining({ previewViewer: 'rendered' }),
+      ]),
     });
   });
 });
@@ -443,14 +428,14 @@ describe('ChatThreadManager workspace navigation', () => {
 
     expect(useChatThreadStore.getState().snapshot.workspaceNavigationHistory).toEqual([
       { kind: 'child-session', key: 'child-session-1' },
-      { kind: 'file', key: 'parent-session-1::preview::README.md' },
+      { kind: 'file', key: 'parent-session-1::preview:rendered::README.md' },
       { kind: 'cron' },
     ]);
 
     manager.goBackWorkspacePanel();
     expect(useChatThreadStore.getState().snapshot).toMatchObject({
       activeWorkspacePanelKind: 'file',
-      activeWorkspaceFileKey: 'parent-session-1::preview::README.md',
+      activeWorkspaceFileKey: 'parent-session-1::preview:rendered::README.md',
       workspaceNavigationHistoryIndex: 1,
     });
 
@@ -464,7 +449,7 @@ describe('ChatThreadManager workspace navigation', () => {
     manager.goForwardWorkspacePanel();
     expect(useChatThreadStore.getState().snapshot).toMatchObject({
       activeWorkspacePanelKind: 'file',
-      activeWorkspaceFileKey: 'parent-session-1::preview::README.md',
+      activeWorkspaceFileKey: 'parent-session-1::preview:rendered::README.md',
       workspaceNavigationHistoryIndex: 1,
     });
   });
@@ -520,7 +505,10 @@ describe('ChatThreadManager workspace navigation', () => {
       label: 'README.md',
       viewMode: 'preview',
     });
-    manager.closeWorkspaceFile('parent-session-1::preview::README.md');
+    manager.closeWorkspaceTab({
+      kind: 'file',
+      key: 'parent-session-1::preview:rendered::README.md',
+    });
 
     expect(useChatThreadStore.getState().snapshot).toMatchObject({
       activeWorkspacePanelKind: 'child-session',

package/src/features/chat/managers/chat-session-list.manager.ts

@@ -39,6 +39,7 @@ export class ChatSessionListManager {
       childSessionTabs: [],
       activeChildSessionKey: null,
       activeWorkspaceFileKey: null,
+      closedWorkspaceTabEntries: [],
       workspaceNavigationHistory: [],
       workspaceNavigationHistoryIndex: 0,
     });