@nextclaw/ui 0.15.2 → 0.15.4

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

@@ -16,12 +16,15 @@ import type {
   ChatChildSessionTab,
   ChatThreadSnapshot,
   ChatWorkspaceNavigationEntry,
+  ChatWorkspacePanelKind,
   ChatWorkspaceFileTab,
 } from '@/features/chat/stores/chat-thread.store';
 import { useChatThreadStore } from '@/features/chat/stores/chat-thread.store';
+import { normalizeChatWorkspacePanelWidth } from '@/features/chat/features/workspace/utils/chat-workspace-panel-layout.utils';
 import { t } from '@/shared/lib/i18n';
 import {
   areWorkspaceNavigationEntriesEqual,
+  createWorkspaceSelectionPatch,
   createSideChatDraft,
   materializeSideChatDraftSnapshot,
   upsertChildSessionTab,
@@ -31,11 +34,19 @@ import {
   pushNavigationHistoryEntry,
   stepNavigationHistory,
 } from '@/shared/lib/navigation-history';
+import {
+  resolveAlternateWorkspaceFileViewer,
+  type ChatWorkspaceFileViewer,
+} from '@/features/chat/features/workspace/utils/chat-workspace-file-viewer.utils';
+import {
+  createWorkspaceFileTab,
+  upsertWorkspaceFileTab,
+} from '@/features/chat/features/workspace/utils/chat-workspace-file-tab.utils';
 
 type WorkspaceChildReadState = Parameters<ChatSessionListManager['markVisibleWorkspaceChildRead']>[0];
 export type ChatVisibleWorkspaceSelection =
   | { kind: 'child-session'; tab: WorkspaceChildReadState }
-  | { kind: 'file' | 'side-chat-draft' | 'cron' }
+  | { kind: Exclude<ChatWorkspacePanelKind, 'child-session'> }
   | null;
 
 export class ChatThreadManager {
@@ -102,54 +113,29 @@ export class ChatThreadManager {
     return useChatSessionListStore.getState().snapshot.selectedSessionKey ?? null;
   };
 
-  private buildWorkspaceFileTab = (
-    action: ChatFileOpenActionViewModel,
-    parentSessionKey: string | null,
-  ): ChatWorkspaceFileTab | null => {
-    const normalizedPath = action.path.trim();
-    if (!normalizedPath) {
-      return null;
-    }
-    const normalizedParentSessionKey = parentSessionKey?.trim() || null;
-    const previewViewer =
-      action.viewMode === 'preview' &&
-      action.previewViewer !== 'rendered' &&
-      (action.previewViewer === 'auto' || action.previewViewer === 'source' || /\.html?$/i.test(normalizedPath))
-        ? 'source'
-        : action.previewViewer ?? null;
-    const tabViewIdentity = action.viewMode === 'preview' && previewViewer === 'rendered' ? 'preview:rendered' : action.viewMode;
-    return {
-      key: `${normalizedParentSessionKey ?? 'draft'}::${tabViewIdentity}::${normalizedPath}`,
-      parentSessionKey: normalizedParentSessionKey,
-      path: normalizedPath,
-      label: action.label?.trim() || null,
-      viewMode: action.viewMode,
-      previewViewer,
-      line: action.line ?? null,
-      column: action.column ?? null,
-      rawText: action.rawText ?? null,
-      beforeText: action.beforeText ?? null,
-      afterText: action.afterText ?? null,
-      patchText: action.patchText ?? null,
-      oldStartLine: action.oldStartLine ?? null,
-      newStartLine: action.newStartLine ?? null,
-      fullLines: action.fullLines,
-    };
-  };
-
-  private upsertWorkspaceFileTab = (nextTab: ChatWorkspaceFileTab): ChatWorkspaceFileTab[] => {
+  private activateWorkspaceFileTab = (
+    nextTab: ChatWorkspaceFileTab,
+    adjacentToKey?: string,
+  ) => {
+    const { parentSessionKey } = nextTab;
     const { workspaceFileTabs } = useChatThreadStore.getState().snapshot;
-    const existingIndex = workspaceFileTabs.findIndex((tab) => tab.key === nextTab.key);
-    if (existingIndex === -1) {
-      return [nextTab, ...workspaceFileTabs];
-    }
-    const nextTabs = [...workspaceFileTabs];
-    nextTabs.splice(existingIndex, 1);
-    nextTabs.unshift({
-      ...workspaceFileTabs[existingIndex],
-      ...nextTab,
+    this.setWorkspaceSelection({
+      workspacePanelParentKey: parentSessionKey,
+      activeWorkspacePanelKind: 'file',
+      workspaceFileTabs: upsertWorkspaceFileTab(
+        workspaceFileTabs,
+        nextTab,
+        adjacentToKey,
+      ),
+      activeWorkspaceFileKey: nextTab.key,
+      activeChildSessionKey: null,
+      activeSideChatDraft: null,
+    }, {
+      kind: 'file',
+      key: nextTab.key,
     });
-    return nextTabs;
+    this.ensureWorkspaceParentRoute(parentSessionKey);
+    this.onWorkspacePanelOpened?.();
   };
 
   private ensureWorkspaceParentRoute = (parentSessionKey: string | null) => {
@@ -164,52 +150,6 @@ export class ChatThreadManager {
     }
   };
 
-  private createWorkspaceSelectionPatch = (
-    entry: ChatWorkspaceNavigationEntry,
-    snapshot: ChatThreadSnapshot,
-  ): Partial<ChatThreadSnapshot> | null => {
-    if (entry.kind === 'cron') {
-      return {
-        activeWorkspacePanelKind: 'cron',
-        activeChildSessionKey: null,
-        activeSideChatDraft: null,
-        activeWorkspaceFileKey: null,
-      };
-    }
-    if (entry.kind === 'file') {
-      if (!snapshot.workspaceFileTabs.some((tab) => tab.key === entry.key)) {
-        return null;
-      }
-      return {
-        activeWorkspacePanelKind: 'file',
-        activeChildSessionKey: null,
-        activeSideChatDraft: null,
-        activeWorkspaceFileKey: entry.key,
-      };
-    }
-    if (entry.kind === 'side-chat-draft') {
-      const { activeSideChatDraft } = snapshot;
-      if (activeSideChatDraft?.draftKey !== entry.key) {
-        return null;
-      }
-      return {
-        activeWorkspacePanelKind: 'side-chat-draft',
-        activeChildSessionKey: null,
-        activeSideChatDraft,
-        activeWorkspaceFileKey: null,
-      };
-    }
-    if (!entry.key) {
-      return null;
-    }
-    return {
-      activeWorkspacePanelKind: 'child-session',
-      activeChildSessionKey: entry.key,
-      activeSideChatDraft: null,
-      activeWorkspaceFileKey: null,
-    };
-  };
-
   private setWorkspaceSelection = (
     patch: Partial<ChatThreadSnapshot>,
     entry: ChatWorkspaceNavigationEntry,
@@ -230,6 +170,59 @@ export class ChatThreadManager {
     });
   };
 
+  private openWorkspacePage = (
+    rawParentSessionKey: string,
+    kind: 'overview' | 'child-sessions' | 'project-files' | 'cron',
+  ) => {
+    const parentSessionKey = rawParentSessionKey.trim();
+    if (!parentSessionKey) {
+      return;
+    }
+    this.setWorkspaceSelection({
+      workspacePanelParentKey: parentSessionKey,
+      activeWorkspacePanelKind: kind,
+      activeChildSessionKey: null,
+      activeSideChatDraft: null,
+      activeWorkspaceFileKey: null,
+    }, { kind });
+    this.ensureWorkspaceParentRoute(parentSessionKey);
+    this.onWorkspacePanelOpened?.();
+  };
+
+  openWorkspaceOverview = (sessionKey: string) => {
+    this.openWorkspacePage(sessionKey, 'overview');
+  };
+
+  toggleWorkspacePanel = (sessionKey: string) => {
+    const normalizedSessionKey = sessionKey.trim();
+    if (!normalizedSessionKey) {
+      return;
+    }
+    const { snapshot } = useChatThreadStore.getState();
+    if (
+      snapshot.workspacePanelParentKey === normalizedSessionKey &&
+      snapshot.activeWorkspacePanelKind
+    ) {
+      this.closeWorkspacePanel();
+      return;
+    }
+    this.openWorkspaceOverview(normalizedSessionKey);
+  };
+
+  setWorkspacePanelWidth = (width: number) => {
+    this.syncSnapshot({
+      workspacePanelWidth: normalizeChatWorkspacePanelWidth(width),
+    });
+  };
+
+  openChildSessions = (sessionKey: string) => {
+    this.openWorkspacePage(sessionKey, 'child-sessions');
+  };
+
+  openProjectFiles = (sessionKey: string) => {
+    this.openWorkspacePage(sessionKey, 'project-files');
+  };
+
   openChildSessionPanel = (params: {
     parentSessionKey: string;
     activeChildSessionKey?: string | null;
@@ -315,23 +308,43 @@ export class ChatThreadManager {
 
   openFilePreview = (action: ChatFileOpenActionViewModel) => {
     const parentSessionKey = this.resolveWorkspaceParentSessionKey();
-    const nextTab = this.buildWorkspaceFileTab(action, parentSessionKey);
+    const nextTab = createWorkspaceFileTab(action, parentSessionKey);
     if (!nextTab) {
       return;
     }
-    this.setWorkspaceSelection({
-      workspacePanelParentKey: parentSessionKey,
-      activeWorkspacePanelKind: 'file',
-      workspaceFileTabs: this.upsertWorkspaceFileTab(nextTab),
-      activeWorkspaceFileKey: nextTab.key,
-      activeChildSessionKey: null,
-      activeSideChatDraft: null,
-    }, {
-      kind: 'file',
-      key: nextTab.key,
-    });
-    this.ensureWorkspaceParentRoute(parentSessionKey);
-    this.onWorkspacePanelOpened?.();
+    this.activateWorkspaceFileTab(nextTab);
+  };
+
+  openWorkspaceFileViewer = (
+    fileKey: string,
+    viewer?: ChatWorkspaceFileViewer,
+  ) => {
+    const sourceTab = useChatThreadStore.getState().snapshot.workspaceFileTabs
+      .find((tab) => tab.key === fileKey.trim());
+    if (!sourceTab || sourceTab.viewMode !== 'preview') {
+      return;
+    }
+    const nextViewer = viewer ?? resolveAlternateWorkspaceFileViewer(
+      sourceTab.path,
+      sourceTab.previewViewer,
+    );
+    if (!nextViewer) {
+      return;
+    }
+    const nextTab = createWorkspaceFileTab({
+      path: sourceTab.path,
+      label: sourceTab.label ?? undefined,
+      viewMode: 'preview',
+      previewViewer: nextViewer,
+      line: sourceTab.line ?? undefined,
+      column: sourceTab.column ?? undefined,
+      rawText: sourceTab.rawText ?? undefined,
+      contentUrl: sourceTab.contentUrl ?? undefined,
+      mimeType: sourceTab.mimeType ?? undefined,
+    }, sourceTab.parentSessionKey);
+    if (nextTab) {
+      this.activateWorkspaceFileTab(nextTab, sourceTab.key);
+    }
   };
 
   private openSessionFromToolAction = (action: ChatToolActionViewModel) => {
@@ -477,7 +490,7 @@ export class ChatThreadManager {
       };
       const restoreEntry = history.entries[history.index];
       const restorePatch = restoreEntry
-        ? this.createWorkspaceSelectionPatch(restoreEntry, nextSnapshot)
+        ? createWorkspaceSelectionPatch(restoreEntry, nextSnapshot)
         : null;
       Object.assign(nextPatch, restorePatch ?? {
         activeWorkspacePanelKind: null,
@@ -501,21 +514,7 @@ export class ChatThreadManager {
   };
 
   openSessionCronPanel = (sessionKey: string) => {
-    const parentSessionKey = sessionKey.trim();
-    if (!parentSessionKey) {
-      return;
-    }
-    this.setWorkspaceSelection({
-      workspacePanelParentKey: parentSessionKey,
-      activeWorkspacePanelKind: 'cron',
-      activeChildSessionKey: null,
-      activeSideChatDraft: null,
-      activeWorkspaceFileKey: null,
-    }, {
-      kind: 'cron',
-    });
-    this.ensureWorkspaceParentRoute(parentSessionKey);
-    this.onWorkspacePanelOpened?.();
+    this.openWorkspacePage(sessionKey, 'cron');
   };
 
   goBackWorkspacePanel = () => {
@@ -538,7 +537,7 @@ export class ChatThreadManager {
     if (!step) {
       return;
     }
-    const selectionPatch = this.createWorkspaceSelectionPatch(step.entry, snapshot);
+    const selectionPatch = createWorkspaceSelectionPatch(step.entry, snapshot);
     if (!selectionPatch) {
       return;
     }

package/src/features/chat/pages/ncp-chat-page.tsx

@@ -1,7 +1,6 @@
 import {
   useEffect,
   useMemo,
-  useState,
 } from "react";
 import { useLocation, useNavigate, useParams } from "react-router-dom";
 import {
@@ -51,7 +50,7 @@ function useNcpChatUiBindings() {
 
 export function NcpChatPage({ view }: ChatPageProps) {
   const appPresenter = useAppPresenter();
-  const [presenter] = useState(() => new ChatPresenter(appPresenter));
+  const presenter = useMemo(() => new ChatPresenter(appPresenter), [appPresenter]);
   return (
     <ChatPresenterProvider presenter={presenter}>
       <NcpChatPageContent view={view} />

package/src/features/chat/stores/__tests__/chat-thread.store.test.ts

@@ -1,5 +1,8 @@
 import { beforeEach, describe, expect, it } from 'vitest';
-import { useChatThreadStore } from '@/features/chat/stores/chat-thread.store';
+import {
+  useChatThreadStore,
+} from '@/features/chat/stores/chat-thread.store';
+import { CHAT_WORKSPACE_PANEL_DEFAULT_WIDTH } from '@/features/chat/features/workspace/utils/chat-workspace-panel-layout.utils';
 
 const chatThreadWorkspaceStorageKey = 'nextclaw.chat.workspace-panel.state';
 
@@ -27,6 +30,7 @@ function resetChatThreadStore() {
       activeWorkspaceFileKey: null,
       workspaceNavigationHistory: [],
       workspaceNavigationHistoryIndex: 0,
+      workspacePanelWidth: CHAT_WORKSPACE_PANEL_DEFAULT_WIDTH,
     },
   });
 }
@@ -118,6 +122,79 @@ describe('chat thread workspace panel persistence', () => {
     expect(persisted.state.snapshot.activeSideChatDraft).toBeUndefined();
   });
 
+  it('persists the stable workspace pages', async () => {
+    useChatThreadStore.getState().setSnapshot({
+      workspacePanelParentKey: 'session-1',
+      activeWorkspacePanelKind: 'project-files',
+      workspaceNavigationHistory: [
+        { kind: 'overview' },
+        { kind: 'child-sessions' },
+        { kind: 'project-files' },
+      ],
+      workspaceNavigationHistoryIndex: 2,
+      workspacePanelWidth: 620,
+    });
+
+    const persisted = window.localStorage.getItem(chatThreadWorkspaceStorageKey);
+    resetChatThreadStore();
+    if (persisted) {
+      window.localStorage.setItem(chatThreadWorkspaceStorageKey, persisted);
+    }
+    await useChatThreadStore.persist.rehydrate();
+
+    expect(useChatThreadStore.getState().snapshot).toMatchObject({
+      workspacePanelParentKey: 'session-1',
+      activeWorkspacePanelKind: 'project-files',
+      workspaceNavigationHistory: [
+        { kind: 'overview' },
+        { kind: 'child-sessions' },
+        { kind: 'project-files' },
+      ],
+      workspaceNavigationHistoryIndex: 2,
+      workspacePanelWidth: 620,
+    });
+  });
+
+  it('keeps the active file tab when persistence trims older workspace tabs', async () => {
+    const workspaceFileTabs = Array.from({ length: 9 }, (_, index) => ({
+      key: `session-1::preview::file-${index}.txt`,
+      parentSessionKey: 'session-1',
+      path: `file-${index}.txt`,
+      viewMode: 'preview' as const,
+      previewViewer: 'source' as const,
+    }));
+    const activeWorkspaceFileKey = workspaceFileTabs[8]!.key;
+    useChatThreadStore.getState().setSnapshot({
+      workspacePanelParentKey: 'session-1',
+      activeWorkspacePanelKind: 'file',
+      workspaceFileTabs,
+      activeWorkspaceFileKey,
+      workspaceNavigationHistory: [
+        { kind: 'file', key: activeWorkspaceFileKey },
+      ],
+      workspaceNavigationHistoryIndex: 0,
+    });
+
+    const persisted = window.localStorage.getItem(chatThreadWorkspaceStorageKey);
+    resetChatThreadStore();
+    if (persisted) {
+      window.localStorage.setItem(chatThreadWorkspaceStorageKey, persisted);
+    }
+    await useChatThreadStore.persist.rehydrate();
+
+    expect(useChatThreadStore.getState().snapshot).toMatchObject({
+      workspacePanelParentKey: 'session-1',
+      activeWorkspacePanelKind: 'file',
+      activeWorkspaceFileKey,
+    });
+    expect(useChatThreadStore.getState().snapshot.workspaceFileTabs).toHaveLength(8);
+    expect(
+      useChatThreadStore.getState().snapshot.workspaceFileTabs.some(
+        (tab) => tab.key === activeWorkspaceFileKey,
+      ),
+    ).toBe(true);
+  });
+
   it('hydrates the workspace panel state and repairs stale active file keys', async () => {
     window.localStorage.setItem(
       chatThreadWorkspaceStorageKey,

package/src/features/chat/stores/chat-message-layout.store.test.ts

@@ -0,0 +1,37 @@
+import { beforeEach, describe, expect, it } from "vitest";
+import {
+  DEFAULT_CHAT_MESSAGE_LAYOUT,
+  useChatMessageLayoutStore,
+} from "@/features/chat/stores/chat-message-layout.store";
+
+const STORAGE_KEY = "nextclaw.chat.message-layout";
+
+describe("chat message layout store", () => {
+  beforeEach(() => {
+    window.localStorage.clear();
+    useChatMessageLayoutStore.setState({
+      layout: DEFAULT_CHAT_MESSAGE_LAYOUT,
+    });
+  });
+
+  it("preserves an existing card layout preference", async () => {
+    window.localStorage.setItem(
+      STORAGE_KEY,
+      JSON.stringify({ state: { layout: "card" }, version: 1 }),
+    );
+
+    await useChatMessageLayoutStore.persist.rehydrate();
+    expect(useChatMessageLayoutStore.getState().layout).toBe("card");
+  });
+
+  it("falls back to the flat layout for an invalid persisted layout", async () => {
+    window.localStorage.setItem(
+      STORAGE_KEY,
+      JSON.stringify({ state: { layout: "unknown" }, version: 1 }),
+    );
+
+    await useChatMessageLayoutStore.persist.rehydrate();
+
+    expect(useChatMessageLayoutStore.getState().layout).toBe("flat");
+  });
+});

package/src/features/chat/stores/chat-message-layout.store.ts

@@ -0,0 +1,41 @@
+import type { ChatMessageLayout } from "@nextclaw/agent-chat-ui";
+import { create } from "zustand";
+import { createJSONStorage, persist } from "zustand/middleware";
+
+const CHAT_MESSAGE_LAYOUT_STORAGE_KEY = "nextclaw.chat.message-layout";
+const CHAT_MESSAGE_LAYOUT_STORAGE_VERSION = 1;
+export const DEFAULT_CHAT_MESSAGE_LAYOUT: ChatMessageLayout = "flat";
+
+type ChatMessageLayoutStore = {
+  layout: ChatMessageLayout;
+  setLayout: (layout: ChatMessageLayout) => void;
+};
+
+function resolvePersistedLayout(persistedState: unknown): ChatMessageLayout {
+  if (!persistedState || typeof persistedState !== "object") {
+    return DEFAULT_CHAT_MESSAGE_LAYOUT;
+  }
+  const { layout } = persistedState as { layout?: unknown };
+  return layout === "flat" || layout === "card"
+    ? layout
+    : DEFAULT_CHAT_MESSAGE_LAYOUT;
+}
+
+export const useChatMessageLayoutStore = create<ChatMessageLayoutStore>()(
+  persist(
+    (set) => ({
+      layout: DEFAULT_CHAT_MESSAGE_LAYOUT,
+      setLayout: (layout) => set({ layout }),
+    }),
+    {
+      name: CHAT_MESSAGE_LAYOUT_STORAGE_KEY,
+      version: CHAT_MESSAGE_LAYOUT_STORAGE_VERSION,
+      storage: createJSONStorage(() => window.localStorage),
+      partialize: (state) => ({ layout: state.layout }),
+      merge: (persistedState, currentState) => ({
+        ...currentState,
+        layout: resolvePersistedLayout(persistedState),
+      }),
+    },
+  ),
+);