@nextclaw/ui 0.15.3 → 0.15.4

package/src/features/chat/features/workspace/utils/chat-workspace-file-tab.utils.ts

@@ -0,0 +1,63 @@
+import type { ChatFileOpenActionViewModel } from '@nextclaw/agent-chat-ui';
+import type { ChatWorkspaceFileTab } from '@/features/chat/stores/chat-thread.store';
+import { normalizeWorkspaceFilePreviewViewer } from './chat-workspace-file-viewer.utils';
+
+export function createWorkspaceFileTab(
+  action: ChatFileOpenActionViewModel,
+  parentSessionKey: string | null,
+): ChatWorkspaceFileTab | null {
+  const path = action.path.trim();
+  if (!path) {
+    return null;
+  }
+  const normalizedParentSessionKey = parentSessionKey?.trim() || null;
+  const previewViewer = action.viewMode === 'preview'
+    ? normalizeWorkspaceFilePreviewViewer(path, action.previewViewer)
+    : action.previewViewer ?? null;
+  const viewIdentity = action.viewMode === 'preview' && previewViewer === 'rendered'
+    ? 'preview:rendered'
+    : action.viewMode;
+  return {
+    key: `${normalizedParentSessionKey ?? 'draft'}::${viewIdentity}::${path}`,
+    parentSessionKey: normalizedParentSessionKey,
+    path,
+    label: action.label?.trim() || null,
+    viewMode: action.viewMode,
+    previewViewer,
+    line: action.line ?? null,
+    column: action.column ?? null,
+    rawText: action.rawText ?? null,
+    contentUrl: action.contentUrl?.trim() || null,
+    mimeType: action.mimeType?.trim() || null,
+    beforeText: action.beforeText ?? null,
+    afterText: action.afterText ?? null,
+    patchText: action.patchText ?? null,
+    oldStartLine: action.oldStartLine ?? null,
+    newStartLine: action.newStartLine ?? null,
+    fullLines: action.fullLines,
+  };
+}
+
+export function upsertWorkspaceFileTab(
+  tabs: readonly ChatWorkspaceFileTab[],
+  nextTab: ChatWorkspaceFileTab,
+  adjacentToKey?: string,
+): ChatWorkspaceFileTab[] {
+  const existingIndex = tabs.findIndex((tab) => tab.key === nextTab.key);
+  if (existingIndex !== -1) {
+    const nextTabs = [...tabs];
+    nextTabs[existingIndex] = { ...tabs[existingIndex], ...nextTab };
+    return nextTabs;
+  }
+  const adjacentIndex = adjacentToKey
+    ? tabs.findIndex((tab) => tab.key === adjacentToKey)
+    : -1;
+  if (adjacentIndex === -1) {
+    return [nextTab, ...tabs];
+  }
+  return [
+    ...tabs.slice(0, adjacentIndex + 1),
+    nextTab,
+    ...tabs.slice(adjacentIndex + 1),
+  ];
+}

package/src/features/chat/features/workspace/utils/chat-workspace-file-viewer.utils.ts

@@ -0,0 +1,49 @@
+import type { ChatFilePreviewViewer } from "@nextclaw/agent-chat-ui";
+
+export type ChatWorkspaceFileViewer = "source" | "rendered";
+
+function resolveDualViewFileKind(path: string): "html" | "markdown" | null {
+  if (/\.html?$/i.test(path)) {
+    return "html";
+  }
+  if (/\.mdx?$/i.test(path)) {
+    return "markdown";
+  }
+  return null;
+}
+
+export function resolveWorkspaceFileViewer(
+  path: string,
+  viewer?: ChatFilePreviewViewer | null,
+): ChatWorkspaceFileViewer | null {
+  const kind = resolveDualViewFileKind(path);
+  if (kind === "html") {
+    return viewer === "rendered" ? "rendered" : "source";
+  }
+  if (kind === "markdown") {
+    return viewer === "source" ? "source" : "rendered";
+  }
+  if (viewer === "source" || viewer === "rendered") {
+    return viewer;
+  }
+  return null;
+}
+
+export function normalizeWorkspaceFilePreviewViewer(
+  path: string,
+  viewer?: ChatFilePreviewViewer | null,
+): ChatFilePreviewViewer | null {
+  return resolveWorkspaceFileViewer(path, viewer) ?? viewer ?? null;
+}
+
+export function resolveAlternateWorkspaceFileViewer(
+  path: string,
+  viewer?: ChatFilePreviewViewer | null,
+): ChatWorkspaceFileViewer | null {
+  if (!resolveDualViewFileKind(path)) {
+    return null;
+  }
+  return resolveWorkspaceFileViewer(path, viewer) === "source"
+    ? "rendered"
+    : "source";
+}

package/src/features/chat/features/workspace/utils/chat-workspace-panel-layout.utils.ts

@@ -0,0 +1,13 @@
+export const CHAT_WORKSPACE_PANEL_DEFAULT_WIDTH = 480;
+export const CHAT_WORKSPACE_PANEL_MIN_WIDTH = 360;
+export const CHAT_WORKSPACE_PANEL_MAX_WIDTH = 860;
+
+export function normalizeChatWorkspacePanelWidth(value: unknown): number {
+  if (typeof value !== 'number' || !Number.isFinite(value)) {
+    return CHAT_WORKSPACE_PANEL_DEFAULT_WIDTH;
+  }
+  return Math.max(
+    CHAT_WORKSPACE_PANEL_MIN_WIDTH,
+    Math.min(CHAT_WORKSPACE_PANEL_MAX_WIDTH, value),
+  );
+}

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

@@ -1,12 +1,24 @@
 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 {
+  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";
 
 export type WorkspaceSelection =
+  | {
+      kind: "overview";
+    }
+  | {
+      kind: "child-sessions";
+    }
   | {
       kind: "child-session";
       tab: ResolvedChildSessionTab;
@@ -15,6 +27,9 @@ export type WorkspaceSelection =
       kind: "side-chat-draft";
       draft: ChatWorkspaceSideChatDraft;
     }
+  | {
+      kind: "project-files";
+    }
   | {
       kind: "file";
       file: ChatWorkspaceFileTab;
@@ -25,13 +40,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 +64,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 +78,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,10 +148,6 @@ export function resolveWorkspaceSelection(params: {
     };
   }
 
-  if (sessionCronJobCount > 0) {
-    return { kind: "cron" };
-  }
-
   return null;
 }
 
@@ -127,27 +155,68 @@ export function buildWorkspaceTabsViewModel(params: {
   resolvedChildTabs: ResolvedChildSessionTab[];
   activeSideChatDraft: ChatWorkspaceSideChatDraft | null;
   workspaceFileTabs: readonly ChatWorkspaceFileTab[];
-  sessionCronJobCount: number;
   activeSelection: WorkspaceSelection | null;
   optimisticReadAtBySessionKey: Record<string, string>;
   onSelectSession: (sessionKey: string) => void;
   onSelectFile: (fileKey: string) => void;
+  onOpenFileViewer: (fileKey: string, viewer: ChatWorkspaceFileViewer) => void;
   onCloseFile: (fileKey: string) => void;
+  onSelectOverview: () => void;
+  onSelectChildSessions: () => void;
+  onSelectProjectFiles: () => void;
   onSelectCronJobs: () => void;
 }): WorkspaceTabViewModel[] {
   const {
     activeSideChatDraft,
     resolvedChildTabs,
     workspaceFileTabs,
-    sessionCronJobCount,
     activeSelection,
     optimisticReadAtBySessionKey,
     onSelectSession,
     onSelectFile,
+    onOpenFileViewer,
     onCloseFile,
+    onSelectOverview,
+    onSelectChildSessions,
+    onSelectProjectFiles,
     onSelectCronJobs,
   } = params;
 
+  const workspacePages = [
+    {
+      key: "overview",
+      kind: "overview" as const,
+      title: t("chatWorkspaceOverview"),
+      tooltip: t("chatWorkspaceOverview"),
+      active: activeSelection?.kind === "overview",
+      onSelect: onSelectOverview,
+    },
+    {
+      key: "child-sessions",
+      kind: "child-sessions" as const,
+      title: t("chatWorkspaceChildSessions"),
+      tooltip: t("chatWorkspaceChildSessions"),
+      active: activeSelection?.kind === "child-sessions",
+      onSelect: onSelectChildSessions,
+    },
+    {
+      key: "cron:session",
+      kind: "cron" as const,
+      title: t("chatWorkspaceSessionCronJobs"),
+      tooltip: t("chatWorkspaceSessionCronJobs"),
+      active: activeSelection?.kind === "cron",
+      onSelect: onSelectCronJobs,
+    },
+    {
+      key: "project-files",
+      kind: "project-files" as const,
+      title: t("chatWorkspaceProjectFiles"),
+      tooltip: t("chatWorkspaceProjectFiles"),
+      active: activeSelection?.kind === "project-files",
+      onSelect: onSelectProjectFiles,
+    },
+  ];
+
   const sideChatDraftTabs = activeSideChatDraft
     ? [
         {
@@ -193,31 +262,44 @@ export function buildWorkspaceTabsViewModel(params: {
     };
   });
 
-  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];
+  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: () => onCloseFile(file.key),
+    };
+  });
+
+  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,76 @@
+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,
+        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,
+    });
+  });
+});

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

@@ -315,7 +315,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 +331,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 +365,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 +378,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 +427,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 +448,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 +504,7 @@ describe('ChatThreadManager workspace navigation', () => {
       label: 'README.md',
       viewMode: 'preview',
     });
-    manager.closeWorkspaceFile('parent-session-1::preview::README.md');
+    manager.closeWorkspaceFile('parent-session-1::preview:rendered::README.md');
 
     expect(useChatThreadStore.getState().snapshot).toMatchObject({
       activeWorkspacePanelKind: 'child-session',