@nextclaw/ui 0.15.3 → 0.15.4

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

@@ -0,0 +1,180 @@
+import { useEffect, useState } from "react";
+import { useWorkspaceFileBuffer } from "./use-workspace-file-buffer";
+import { WorkspaceDocumentPreviewState } from "./workspace-document-preview-state";
+import { t } from "@/shared/lib/i18n";
+import { cn } from "@/shared/lib/utils";
+
+const MAX_PREVIEW_ROWS = 500;
+const MAX_PREVIEW_COLUMNS = 100;
+
+type SpreadsheetSheet = {
+  name: string;
+  rows: string[][];
+  columnCount: number;
+  truncated: boolean;
+};
+
+type SpreadsheetState = {
+  contentUrl: string;
+  status: "ready" | "error";
+  sheets: SpreadsheetSheet[];
+};
+
+function spreadsheetColumnLabel(index: number): string {
+  let label = "";
+  let value = index + 1;
+  while (value > 0) {
+    value -= 1;
+    label = String.fromCharCode(65 + (value % 26)) + label;
+    value = Math.floor(value / 26);
+  }
+  return label;
+}
+
+export function WorkspaceSpreadsheetPreview({
+  contentUrl,
+}: {
+  contentUrl: string;
+}) {
+  const fileBuffer = useWorkspaceFileBuffer(contentUrl);
+  const [spreadsheetState, setSpreadsheetState] =
+    useState<SpreadsheetState | null>(null);
+  const [selectedSheetName, setSelectedSheetName] = useState("");
+  const currentState =
+    spreadsheetState?.contentUrl === contentUrl ? spreadsheetState : null;
+  const status =
+    fileBuffer.status === "ready"
+      ? (currentState?.status ?? "loading")
+      : fileBuffer.status;
+  const activeSheet =
+    currentState?.sheets.find((sheet) => sheet.name === selectedSheetName) ??
+    currentState?.sheets[0] ??
+    null;
+
+  useEffect(() => {
+    if (!fileBuffer.data) {
+      return undefined;
+    }
+    let disposed = false;
+    void import("xlsx")
+      .then((xlsx) => {
+        const workbook = xlsx.read(fileBuffer.data as ArrayBuffer, {
+          dense: true,
+          sheetRows: MAX_PREVIEW_ROWS + 1,
+        });
+        const sheets = workbook.SheetNames.map((name) => {
+          const worksheet = workbook.Sheets[name];
+          const allRows = worksheet
+            ? xlsx.utils.sheet_to_json<unknown[]>(worksheet, {
+                header: 1,
+                raw: false,
+                defval: "",
+                blankrows: false,
+              })
+            : [];
+          const rows = allRows
+            .slice(0, MAX_PREVIEW_ROWS)
+            .map((row) =>
+              row
+                .slice(0, MAX_PREVIEW_COLUMNS)
+                .map((cell) => String(cell ?? "")),
+            );
+          return {
+            name,
+            rows,
+            columnCount: Math.min(
+              MAX_PREVIEW_COLUMNS,
+              rows.reduce((maximum, row) => Math.max(maximum, row.length), 0),
+            ),
+            truncated:
+              allRows.length > MAX_PREVIEW_ROWS ||
+              allRows.some((row) => row.length > MAX_PREVIEW_COLUMNS),
+          };
+        });
+        if (!disposed) {
+          setSpreadsheetState({ contentUrl, status: "ready", sheets });
+        }
+      })
+      .catch((error: unknown) => {
+        if (!disposed) {
+          console.error("Failed to render spreadsheet preview", error);
+          setSpreadsheetState({ contentUrl, status: "error", sheets: [] });
+        }
+      });
+    return () => {
+      disposed = true;
+    };
+  }, [contentUrl, fileBuffer.data]);
+
+  return (
+    <div
+      className="relative flex h-full min-h-0 flex-col bg-white"
+      data-testid="workspace-content-spreadsheet"
+    >
+      <WorkspaceDocumentPreviewState status={status} />
+      {currentState && currentState.sheets.length > 1 ? (
+        <div className="flex shrink-0 gap-1 overflow-x-auto border-b border-border px-2 py-1.5 custom-scrollbar">
+          {currentState.sheets.map((sheet) => (
+            <button
+              key={sheet.name}
+              type="button"
+              className={cn(
+                "h-7 shrink-0 rounded-md px-2.5 text-xs transition-colors",
+                sheet.name === activeSheet?.name
+                  ? "bg-accent font-medium text-accent-foreground"
+                  : "text-muted-foreground hover:bg-muted hover:text-foreground",
+              )}
+              onClick={() => setSelectedSheetName(sheet.name)}
+            >
+              {sheet.name}
+            </button>
+          ))}
+        </div>
+      ) : null}
+      {activeSheet ? (
+        <div className="min-h-0 flex-1 overflow-auto custom-scrollbar">
+          <table className="min-w-full border-collapse text-xs text-foreground">
+            <thead className="sticky top-0 z-[1] bg-muted">
+              <tr>
+                <th className="sticky left-0 z-[2] h-7 min-w-10 border border-border bg-muted px-2" />
+                {Array.from({ length: activeSheet.columnCount }, (_, index) => (
+                  <th
+                    key={index}
+                    className="h-7 min-w-24 border border-border px-2 text-center font-medium text-muted-foreground"
+                  >
+                    {spreadsheetColumnLabel(index)}
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {activeSheet.rows.map((row, rowIndex) => (
+                <tr key={rowIndex}>
+                  <th className="sticky left-0 min-w-10 border border-border bg-muted px-2 text-right font-normal text-muted-foreground">
+                    {rowIndex + 1}
+                  </th>
+                  {Array.from(
+                    { length: activeSheet.columnCount },
+                    (_, columnIndex) => (
+                      <td
+                        key={columnIndex}
+                        className="max-w-80 whitespace-pre-wrap border border-border px-2 py-1.5 align-top"
+                      >
+                        {row[columnIndex] ?? ""}
+                      </td>
+                    ),
+                  )}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      ) : null}
+      {activeSheet?.truncated ? (
+        <div className="shrink-0 border-t border-border bg-muted/60 px-3 py-1.5 text-xs text-muted-foreground">
+          {t("chatWorkspaceSpreadsheetPreviewTruncated")}
+        </div>
+      ) : null}
+    </div>
+  );
+}

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

@@ -85,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];
+}