@nextclaw/ui 0.15.2 → 0.15.4

package/src/features/chat/features/workspace/components/workspace-file-content-preview.tsx

@@ -0,0 +1,191 @@
+import { WorkspaceDocxPreview } from "./file-content-preview/workspace-docx-preview";
+import { WorkspacePresentationPreview } from "./file-content-preview/workspace-presentation-preview";
+import { WorkspaceSpreadsheetPreview } from "./file-content-preview/workspace-spreadsheet-preview";
+import { t } from "@/shared/lib/i18n";
+
+export type WorkspaceFileContentKind =
+  | "image"
+  | "audio"
+  | "video"
+  | "pdf"
+  | "html"
+  | "docx"
+  | "spreadsheet"
+  | "presentation"
+  | "other";
+
+export function resolveWorkspaceFileContentKind(params: {
+  path: string;
+  mimeType?: string | null;
+}): WorkspaceFileContentKind {
+  const mime = params.mimeType?.trim().toLowerCase() ?? "";
+  const path = params.path.trim().toLowerCase();
+  if (
+    mime.startsWith("image/") ||
+    /\.(avif|bmp|gif|heic|heif|ico|jpe?g|png|svg|tiff?|webp)$/i.test(path)
+  ) {
+    return "image";
+  }
+  if (
+    mime.startsWith("audio/") ||
+    /\.(aac|flac|m4a|mp3|ogg|opus|wav|weba)$/i.test(path)
+  ) {
+    return "audio";
+  }
+  if (
+    mime.startsWith("video/") ||
+    /\.(avi|m4v|mkv|mov|mp4|webm|wmv)$/i.test(path)
+  ) {
+    return "video";
+  }
+  if (mime.includes("pdf") || path.endsWith(".pdf")) {
+    return "pdf";
+  }
+  if (
+    mime ===
+      "application/vnd.openxmlformats-officedocument.wordprocessingml.document" ||
+    path.endsWith(".docx")
+  ) {
+    return "docx";
+  }
+  if (
+    mime.includes("spreadsheet") ||
+    mime.includes("excel") ||
+    /\.(ods|xls|xlsb|xlsm|xlsx)$/i.test(path)
+  ) {
+    return "spreadsheet";
+  }
+  if (
+    mime ===
+      "application/vnd.openxmlformats-officedocument.presentationml.presentation" ||
+    path.endsWith(".pptx")
+  ) {
+    return "presentation";
+  }
+  if (mime.includes("html") || /\.html?$/i.test(path)) {
+    return "html";
+  }
+  return "other";
+}
+
+function WorkspaceUnsupportedContent({
+  contentUrl,
+  label,
+}: {
+  contentUrl: string;
+  label: string;
+}) {
+  return (
+    <div
+      className="flex h-full flex-col items-center justify-center gap-4 px-6 text-center"
+      data-testid="workspace-content-unsupported"
+    >
+      <div className="max-w-sm space-y-1.5">
+        <p
+          className="truncate text-sm font-medium text-foreground"
+          title={label}
+        >
+          {label}
+        </p>
+        <p className="text-sm text-muted-foreground">
+          {t("chatWorkspacePreviewUnsupported")}
+        </p>
+        <p className="text-xs leading-5 text-muted-foreground/80">
+          {t("chatWorkspacePreviewUnsupportedHint")}
+        </p>
+      </div>
+      <div className="flex flex-wrap items-center justify-center gap-2">
+        <a
+          href={contentUrl}
+          download={label}
+          className="inline-flex h-8 items-center rounded-lg border border-border bg-card px-3 text-xs font-medium text-foreground transition-colors hover:bg-muted"
+        >
+          {t("chatWorkspacePreviewDownload")}
+        </a>
+        <a
+          href={contentUrl}
+          target="_blank"
+          rel="noreferrer"
+          className="inline-flex h-8 items-center rounded-lg bg-primary px-3 text-xs font-medium text-primary-foreground transition-colors hover:bg-primary/90"
+        >
+          {t("chatWorkspacePreviewOpenExternally")}
+        </a>
+      </div>
+    </div>
+  );
+}
+
+export function WorkspaceFileContentPreview({
+  contentUrl,
+  kind,
+  label,
+}: {
+  contentUrl: string;
+  kind: WorkspaceFileContentKind;
+  label: string;
+}) {
+  if (kind === "image") {
+    return (
+      <div className="flex h-full items-center justify-center overflow-auto bg-white p-4 custom-scrollbar">
+        <img
+          src={contentUrl}
+          alt={label}
+          className="max-h-full max-w-full object-contain"
+          data-testid="workspace-content-image"
+        />
+      </div>
+    );
+  }
+  if (kind === "audio") {
+    return (
+      <div className="flex h-full items-center justify-center bg-white px-6">
+        <audio
+          controls
+          preload="metadata"
+          aria-label={label}
+          className="w-full max-w-xl"
+          data-testid="workspace-content-audio"
+          src={contentUrl}
+        />
+      </div>
+    );
+  }
+  if (kind === "video") {
+    return (
+      <div className="flex h-full items-center justify-center bg-black">
+        <video
+          controls
+          playsInline
+          preload="metadata"
+          aria-label={label}
+          className="max-h-full max-w-full"
+          data-testid="workspace-content-video"
+          src={contentUrl}
+        />
+      </div>
+    );
+  }
+  if (kind === "pdf" || kind === "html") {
+    return (
+      <iframe
+        allowFullScreen
+        className="h-full w-full border-0 bg-white"
+        data-testid={
+          kind === "pdf" ? "workspace-content-pdf" : "workspace-html-preview"
+        }
+        src={contentUrl}
+        title={label}
+      />
+    );
+  }
+  if (kind === "docx") {
+    return <WorkspaceDocxPreview contentUrl={contentUrl} />;
+  }
+  if (kind === "spreadsheet") {
+    return <WorkspaceSpreadsheetPreview contentUrl={contentUrl} />;
+  }
+  if (kind === "presentation") {
+    return <WorkspacePresentationPreview contentUrl={contentUrl} />;
+  }
+  return <WorkspaceUnsupportedContent contentUrl={contentUrl} label={label} />;
+}

package/src/features/chat/features/workspace/hooks/use-chat-conversation-workspace-state.ts

@@ -64,9 +64,6 @@ export function useChatConversationWorkspaceState(
     sessionCronJobs,
     showWorkspacePanel:
       snapshot.workspacePanelParentKey === sessionKey &&
-      (activeSideChatDraft !== null ||
-        childSessionTabs.length > 0 ||
-        workspaceFileTabs.length > 0 ||
-        sessionCronJobs.length > 0),
+      snapshot.activeWorkspacePanelKind != null,
   };
 }

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

@@ -4,6 +4,7 @@ import {
   buildWorkspaceTabsViewModel,
   resolveWorkspaceSelection,
 } from "@/features/chat/features/workspace/utils/chat-workspace-panel-view-model.utils";
+import { t } from "@/shared/lib/i18n";
 
 function createChildTab(
   overrides: Partial<ResolvedChildSessionTab> = {},
@@ -26,6 +27,19 @@ function createChildTab(
 }
 
 describe("resolveWorkspaceSelection", () => {
+  it("keeps the explicit workspace overview even when no resources exist", () => {
+    expect(
+      resolveWorkspaceSelection({
+        activePanelKind: "overview",
+        activeChildSessionKey: null,
+        activeSideChatDraft: null,
+        activeWorkspaceFileKey: null,
+        childSessionTabs: [],
+        workspaceFileTabs: [],
+      }),
+    ).toEqual({ kind: "overview" });
+  });
+
   it("honors the explicit active panel kind before fallback order", () => {
     const childTab = createChildTab();
     const fileTab = {
@@ -43,7 +57,6 @@ describe("resolveWorkspaceSelection", () => {
         activeWorkspaceFileKey: fileTab.key,
         childSessionTabs: [childTab],
         workspaceFileTabs: [fileTab],
-        sessionCronJobCount: 1,
       }),
     ).toMatchObject({
       kind: "file",
@@ -62,7 +75,6 @@ describe("resolveWorkspaceSelection", () => {
         activeWorkspaceFileKey: null,
         childSessionTabs: [childTab],
         workspaceFileTabs: [],
-        sessionCronJobCount: 1,
       }),
     ).toMatchObject({
       kind: "child-session",
@@ -84,7 +96,6 @@ describe("resolveWorkspaceSelection", () => {
         activeWorkspaceFileKey: null,
         childSessionTabs: [createChildTab()],
         workspaceFileTabs: [],
-        sessionCronJobCount: 0,
       }),
     ).toMatchObject({
       kind: "side-chat-draft",
@@ -105,16 +116,19 @@ describe("buildWorkspaceTabsViewModel", () => {
       resolvedChildTabs: [childTab],
       activeSideChatDraft: null,
       workspaceFileTabs: [],
-      sessionCronJobCount: 0,
       activeSelection: null,
       optimisticReadAtBySessionKey: {},
       onSelectSession,
       onSelectFile: vi.fn(),
+      onOpenFileViewer: vi.fn(),
       onCloseFile: vi.fn(),
+      onSelectOverview: vi.fn(),
+      onSelectChildSessions: vi.fn(),
+      onSelectProjectFiles: vi.fn(),
       onSelectCronJobs: vi.fn(),
     });
 
-    expect(tabs[0]).toMatchObject({
+    expect(tabs[4]).toMatchObject({
       key: "child:child-1",
       kind: "child-session",
       title: "Child session",
@@ -122,7 +136,7 @@ describe("buildWorkspaceTabsViewModel", () => {
       showUnreadDot: true,
     });
 
-    tabs[0]?.onSelect();
+    tabs[4]?.onSelect();
     expect(onSelectSession).toHaveBeenCalledWith("child-1");
   });
 
@@ -137,7 +151,6 @@ describe("buildWorkspaceTabsViewModel", () => {
       resolvedChildTabs: [childTab],
       activeSideChatDraft: draft,
       workspaceFileTabs: [],
-      sessionCronJobCount: 0,
       activeSelection: {
         kind: "side-chat-draft",
         draft,
@@ -145,15 +158,23 @@ describe("buildWorkspaceTabsViewModel", () => {
       optimisticReadAtBySessionKey: {},
       onSelectSession: vi.fn(),
       onSelectFile: vi.fn(),
+      onOpenFileViewer: vi.fn(),
       onCloseFile: vi.fn(),
+      onSelectOverview: vi.fn(),
+      onSelectChildSessions: vi.fn(),
+      onSelectProjectFiles: vi.fn(),
       onSelectCronJobs: vi.fn(),
     });
 
     expect(tabs.map((tab) => tab.key)).toEqual([
+      "overview",
+      "child-sessions",
+      "cron:session",
+      "project-files",
       "side-chat-draft:draft-1",
       "child:child-1",
     ]);
-    expect(tabs[0]).toMatchObject({
+    expect(tabs[4]).toMatchObject({
       kind: "side-chat-draft",
       active: true,
     });
@@ -177,11 +198,11 @@ describe("buildWorkspaceTabsViewModel", () => {
       previewViewer: "source" as const,
     };
 
+    const onOpenFileViewer = vi.fn();
     const tabs = buildWorkspaceTabsViewModel({
       resolvedChildTabs: [],
       activeSideChatDraft: null,
       workspaceFileTabs: [sourceTab, renderedTab],
-      sessionCronJobCount: 0,
       activeSelection: {
         kind: "file",
         file: sourceTab,
@@ -189,19 +210,41 @@ describe("buildWorkspaceTabsViewModel", () => {
       optimisticReadAtBySessionKey: {},
       onSelectSession: vi.fn(),
       onSelectFile: vi.fn(),
+      onOpenFileViewer,
       onCloseFile: vi.fn(),
+      onSelectOverview: vi.fn(),
+      onSelectChildSessions: vi.fn(),
+      onSelectProjectFiles: vi.fn(),
       onSelectCronJobs: vi.fn(),
     });
 
-    expect(tabs).toEqual([
+    expect(tabs.slice(4)).toEqual([
       expect.objectContaining({
         key: "file:parent::preview::demo.html",
         active: true,
+        fileName: "demo.html",
+        title: "demo.html",
+        isRenderedPreview: false,
+        alternateViewerAction: expect.objectContaining({
+          label: t("chatWorkspaceOpenPreview"),
+          viewer: "rendered",
+        }),
       }),
       expect.objectContaining({
         key: "file:parent::preview:rendered::demo.html",
         active: false,
+        title: `${t("chatWorkspacePreview")}: demo.html`,
+        isRenderedPreview: true,
+        alternateViewerAction: expect.objectContaining({
+          label: t("chatWorkspaceOpenSource"),
+          viewer: "source",
+        }),
       }),
     ]);
+    tabs[4]?.alternateViewerAction?.onSelect();
+    expect(onOpenFileViewer).toHaveBeenCalledWith(
+      "parent::preview::demo.html",
+      "rendered",
+    );
   });
 });

package/src/features/chat/features/workspace/utils/chat-thread-workspace-session.utils.ts

@@ -16,10 +16,76 @@ export function areWorkspaceNavigationEntriesEqual(
   if (current.kind !== next.kind) {
     return false;
   }
-  if (current.kind === 'cron') {
+  if (
+    current.kind === 'overview' ||
+    current.kind === 'child-sessions' ||
+    current.kind === 'project-files' ||
+    current.kind === 'cron'
+  ) {
     return true;
   }
-  return next.kind !== 'cron' && current.key === next.key;
+  return (
+    next.kind !== 'overview' &&
+    next.kind !== 'child-sessions' &&
+    next.kind !== 'project-files' &&
+    next.kind !== 'cron' &&
+    current.key === next.key
+  );
+}
+
+export function createWorkspaceSelectionPatch(
+  entry: ChatWorkspaceNavigationEntry,
+  snapshot: ChatThreadSnapshot,
+): Partial<ChatThreadSnapshot> | null {
+  if (
+    entry.kind === 'overview' ||
+    entry.kind === 'child-sessions' ||
+    entry.kind === 'project-files'
+  ) {
+    return {
+      activeWorkspacePanelKind: entry.kind,
+      activeChildSessionKey: null,
+      activeSideChatDraft: null,
+      activeWorkspaceFileKey: 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,
+    };
+  }
+  return {
+    activeWorkspacePanelKind: 'child-session',
+    activeChildSessionKey: entry.key,
+    activeSideChatDraft: null,
+    activeWorkspaceFileKey: null,
+  };
 }
 
 export function createSideChatDraft(parentSessionKey: string): ChatWorkspaceSideChatDraft {

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

@@ -53,6 +53,8 @@ export function normalizePersistedWorkspaceFileTab(
     line: normalizeOptionalNumber(value.line),
     column: normalizeOptionalNumber(value.column),
     rawText: normalizeOptionalText(value.rawText),
+    contentUrl: normalizeOptionalString(value.contentUrl),
+    mimeType: normalizeOptionalString(value.mimeType),
     beforeText: normalizeOptionalText(value.beforeText),
     afterText: normalizeOptionalText(value.afterText),
     patchText: normalizeOptionalText(value.patchText),
@@ -74,6 +76,8 @@ export function toPersistedWorkspaceFileTab(
     line: tab.line,
     column: tab.column,
     rawText: tab.rawText,
+    contentUrl: tab.contentUrl,
+    mimeType: tab.mimeType,
     beforeText: tab.beforeText,
     afterText: tab.afterText,
     patchText: tab.patchText,
@@ -81,3 +85,20 @@ export function toPersistedWorkspaceFileTab(
     newStartLine: tab.newStartLine,
   };
 }
+
+export function retainWorkspaceFileTabs(
+  tabs: readonly ChatWorkspaceFileTab[],
+  activeWorkspaceFileKey: string | null | undefined,
+  maxTabs: number,
+): ChatWorkspaceFileTab[] {
+  const retained = tabs.slice(0, maxTabs);
+  const activeTab = activeWorkspaceFileKey
+    ? tabs.find((tab) => tab.key === activeWorkspaceFileKey)
+    : null;
+  if (!activeTab || retained.some((tab) => tab.key === activeTab.key)) {
+    return retained;
+  }
+  return retained.length < maxTabs
+    ? [...retained, activeTab]
+    : [...retained.slice(0, -1), activeTab];
+}

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),
+  );
+}