@nextclaw/ui 0.15.2 → 0.15.4

package/src/features/chat/features/workspace/components/chat-session-workspace-panel.tsx

@@ -3,8 +3,14 @@ import { useQueryClient } from "@tanstack/react-query";
 import type { CronJobView } from "@/shared/lib/api";
 import { useNcpChildSessionTabsView } from "@/features/chat/features/ncp/hooks/use-ncp-child-session-tabs-view";
 import { useChatSessionListStore } from "@/features/chat/stores/chat-session-list.store";
+import {
+  CHAT_WORKSPACE_PANEL_DEFAULT_WIDTH,
+  CHAT_WORKSPACE_PANEL_MAX_WIDTH,
+  CHAT_WORKSPACE_PANEL_MIN_WIDTH,
+} from "@/features/chat/features/workspace/utils/chat-workspace-panel-layout.utils";
 import type {
   ChatChildSessionTab,
+  ChatWorkspacePanelKind,
   ChatWorkspaceSideChatDraft,
   ChatWorkspaceNavigationEntry,
   ChatWorkspaceFileTab,
@@ -35,10 +41,11 @@ type ChatSessionWorkspacePanelProps = {
   activeWorkspaceFileKey: string | null;
   workspaceNavigationHistory?: readonly ChatWorkspaceNavigationEntry[];
   workspaceNavigationHistoryIndex?: number;
-  activePanelKind?: "child-session" | "side-chat-draft" | "file" | "cron" | null;
+  activePanelKind?: ChatWorkspacePanelKind | null;
   sessionCronJobs?: readonly CronJobView[];
   sessionProjectRoot: string | null;
   sessionWorkingDir: string | null;
+  workspacePanelWidth?: number;
   displayMode?: "docked" | "overlay";
 };
 
@@ -55,6 +62,7 @@ export function ChatSessionWorkspacePanel({
   sessionCronJobs = [],
   sessionProjectRoot,
   sessionWorkingDir,
+  workspacePanelWidth = CHAT_WORKSPACE_PANEL_DEFAULT_WIDTH,
   displayMode = "docked",
 }: ChatSessionWorkspacePanelProps) {
   const presenter = usePresenter();
@@ -72,7 +80,6 @@ export function ChatSessionWorkspacePanel({
     activePanelKind,
     childSessionTabs: resolvedChildTabs,
     workspaceFileTabs,
-    sessionCronJobCount: sessionCronJobs.length,
   });
   const workspaceHistory = {
     entries: workspaceNavigationHistory,
@@ -89,12 +96,24 @@ export function ChatSessionWorkspacePanel({
         resolvedChildTabs,
         activeSideChatDraft,
         workspaceFileTabs,
-        sessionCronJobCount: sessionCronJobs.length,
         activeSelection,
         optimisticReadAtBySessionKey,
         onSelectSession: presenter.chatThreadManager.selectChildSessionDetail,
         onSelectFile: presenter.chatThreadManager.selectWorkspaceFile,
+        onOpenFileViewer: presenter.chatThreadManager.openWorkspaceFileViewer,
         onCloseFile: presenter.chatThreadManager.closeWorkspaceFile,
+        onSelectOverview: () => {
+          if (sessionKey)
+            presenter.chatThreadManager.openWorkspaceOverview(sessionKey);
+        },
+        onSelectChildSessions: () => {
+          if (sessionKey)
+            presenter.chatThreadManager.openChildSessions(sessionKey);
+        },
+        onSelectProjectFiles: () => {
+          if (sessionKey)
+            presenter.chatThreadManager.openProjectFiles(sessionKey);
+        },
         onSelectCronJobs: () => {
           if (sessionKey)
             presenter.chatThreadManager.openSessionCronPanel(sessionKey);
@@ -108,7 +127,6 @@ export function ChatSessionWorkspacePanel({
       resolvedChildTabs,
       sessionKey,
       workspaceFileTabs,
-      sessionCronJobs.length,
     ],
   );
 
@@ -150,9 +168,11 @@ export function ChatSessionWorkspacePanel({
           : "hidden border-gray-200/70 bg-white/95 backdrop-blur-sm md:flex",
         isContainerMaximized ? "shadow-xl" : null,
       )}
-      defaultWidth={480}
-      minWidth={360}
-      maxWidth={860}
+      defaultWidth={workspacePanelWidth}
+      width={workspacePanelWidth}
+      minWidth={CHAT_WORKSPACE_PANEL_MIN_WIDTH}
+      maxWidth={CHAT_WORKSPACE_PANEL_MAX_WIDTH}
+      onWidthCommit={presenter.chatThreadManager.setWorkspacePanelWidth}
       overlay={isOverlayPanel}
       overlayScope={isContainerMaximized ? "container" : "viewport"}
     >
@@ -175,7 +195,9 @@ export function ChatSessionWorkspacePanel({
       <div className="flex min-h-0 flex-1 flex-col bg-white">
         <ChatSessionWorkspacePanelContent
           activeSelection={activeSelection}
+          childSessionTabs={resolvedChildTabs}
           filePreviewRefreshVersion={filePreviewRefreshVersion}
+          sessionKey={sessionKey}
           sessionCronJobs={sessionCronJobs}
           sessionProjectRoot={sessionProjectRoot}
           sessionWorkingDir={sessionWorkingDir}

package/src/features/chat/features/workspace/components/file-content-preview/use-workspace-file-buffer.ts

@@ -0,0 +1,42 @@
+import { useEffect, useState } from "react";
+
+type WorkspaceFileBufferState =
+  | { contentUrl: string; status: "ready"; data: ArrayBuffer }
+  | { contentUrl: string; status: "error"; data: null };
+
+export function useWorkspaceFileBuffer(contentUrl: string): {
+  status: "loading" | "ready" | "error";
+  data: ArrayBuffer | null;
+} {
+  const [state, setState] = useState<WorkspaceFileBufferState | null>(null);
+  const currentState = state?.contentUrl === contentUrl ? state : null;
+
+  useEffect(() => {
+    const abortController = new AbortController();
+    void fetch(contentUrl, { signal: abortController.signal })
+      .then((response) => {
+        if (!response.ok) {
+          throw new Error(`Unable to load document (${response.status}).`);
+        }
+        return response.arrayBuffer();
+      })
+      .then((data) => {
+        if (!abortController.signal.aborted) {
+          setState({ contentUrl, status: "ready", data });
+        }
+      })
+      .catch((error: unknown) => {
+        if (!abortController.signal.aborted) {
+          console.error("Failed to load workspace document", error);
+          setState({ contentUrl, status: "error", data: null });
+        }
+      });
+
+    return () => abortController.abort();
+  }, [contentUrl]);
+
+  return {
+    status: currentState?.status ?? "loading",
+    data: currentState?.data ?? null,
+  };
+}

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

@@ -0,0 +1,18 @@
+import { t } from "@/shared/lib/i18n";
+
+export function WorkspaceDocumentPreviewState({
+  status,
+}: {
+  status: "loading" | "ready" | "error";
+}) {
+  if (status === "ready") {
+    return null;
+  }
+  return (
+    <div className="absolute inset-0 z-10 flex items-center justify-center bg-background/90 px-6 text-center text-sm text-muted-foreground">
+      {status === "loading"
+        ? t("chatWorkspaceLoadingPreview")
+        : t("chatWorkspacePreviewFailed")}
+    </div>
+  );
+}

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

@@ -0,0 +1,89 @@
+.workspace-docx-preview {
+  container-type: inline-size;
+}
+
+.workspace-docx-preview .docx-wrapper {
+  gap: 1rem;
+  padding: 0 !important;
+  padding-bottom: 0 !important;
+  background: transparent !important;
+}
+
+.workspace-docx-preview .docx-wrapper > section.docx {
+  margin: 0 auto 1rem !important;
+  border: 1px solid rgb(0 0 0 / 8%);
+  border-radius: 4px;
+  box-shadow: 0 4px 18px rgb(0 0 0 / 12%) !important;
+}
+
+.workspace-docx-preview--reflow .docx-wrapper > section.docx {
+  width: 100% !important;
+  min-height: auto !important;
+  padding: clamp(1.5rem, 6cqw, 3.5rem) !important;
+  overflow: visible !important;
+}
+
+.workspace-docx-preview--reflow .docx-wrapper > section.docx > article {
+  min-width: 0;
+}
+
+.workspace-docx-preview--reflow .docx p {
+  line-height: 1.6 !important;
+}
+
+.workspace-docx-preview--reflow .docx p.docx_heading1 span {
+  min-height: 0 !important;
+  font-size: clamp(1.5rem, 6cqw, 2rem) !important;
+  line-height: 1.25 !important;
+}
+
+.workspace-docx-preview--reflow .docx p.docx_heading2 span {
+  min-height: 0 !important;
+  font-size: clamp(1.125rem, 4.5cqw, 1.375rem) !important;
+  line-height: 1.35 !important;
+}
+
+.workspace-docx-preview--reflow .docx table {
+  width: 100% !important;
+  margin: 0.75rem 0 1.25rem;
+  table-layout: auto !important;
+}
+
+.workspace-docx-preview--reflow .docx col {
+  width: auto !important;
+}
+
+.workspace-docx-preview--reflow .docx table td,
+.workspace-docx-preview--reflow .docx table th {
+  padding: 0.45rem 0.55rem !important;
+  border-bottom: 1px solid rgb(0 0 0 / 9%);
+}
+
+.workspace-docx-preview--reflow .docx table tr:first-child > td,
+.workspace-docx-preview--reflow .docx table tr:first-child > th {
+  background: rgb(0 0 0 / 4%);
+  font-weight: 600;
+}
+
+.workspace-docx-preview--reflow .docx table p {
+  min-height: 0;
+  margin: 0 !important;
+}
+
+.workspace-docx-preview--reflow .workspace-docx-wide-table {
+  max-width: 100%;
+  margin: 0.75rem 0 1.25rem;
+  overflow-x: auto;
+  scrollbar-width: thin;
+}
+
+.workspace-docx-preview--reflow .workspace-docx-wide-table table {
+  min-width: 36rem;
+  margin: 0;
+  font-size: 0.875rem;
+}
+
+.workspace-docx-preview--reflow .workspace-docx-wide-table td,
+.workspace-docx-preview--reflow .workspace-docx-wide-table th {
+  white-space: nowrap;
+}

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

@@ -0,0 +1,87 @@
+import { useEffect, useRef, useState } from "react";
+import { useWorkspaceFileBuffer } from "./use-workspace-file-buffer";
+import { WorkspaceDocumentPreviewState } from "./workspace-document-preview-state";
+import "./workspace-docx-preview.css";
+
+function applyResponsiveDocxFallback(container: HTMLDivElement): void {
+  const pages = Array.from(
+    container.querySelectorAll<HTMLElement>(".docx-wrapper > section.docx"),
+  );
+  const needsFallback = pages.some(
+    (page) => !page.style.width && !page.style.padding,
+  );
+  container.classList.toggle("workspace-docx-preview--reflow", needsFallback);
+  if (!needsFallback) {
+    return;
+  }
+  for (const table of container.querySelectorAll<HTMLTableElement>("table")) {
+    if (table.querySelectorAll("col").length < 5) {
+      continue;
+    }
+    const scrollContainer = document.createElement("div");
+    scrollContainer.className = "workspace-docx-wide-table";
+    table.before(scrollContainer);
+    scrollContainer.append(table);
+  }
+}
+
+export function WorkspaceDocxPreview({ contentUrl }: { contentUrl: string }) {
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const fileBuffer = useWorkspaceFileBuffer(contentUrl);
+  const [renderState, setRenderState] = useState<{
+    contentUrl: string;
+    status: "ready" | "error";
+  } | null>(null);
+  const renderStatus =
+    renderState?.contentUrl === contentUrl ? renderState.status : "loading";
+  const status =
+    fileBuffer.status === "ready" ? renderStatus : fileBuffer.status;
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container || !fileBuffer.data) {
+      return undefined;
+    }
+    let disposed = false;
+    container.replaceChildren();
+    void import("docx-preview")
+      .then(async (docxPreview) => {
+        await docxPreview.renderAsync(
+          fileBuffer.data as ArrayBuffer,
+          container,
+          container,
+          {
+            breakPages: true,
+            inWrapper: true,
+            ignoreLastRenderedPageBreak: false,
+          },
+        );
+        if (!disposed) {
+          applyResponsiveDocxFallback(container);
+          setRenderState({ contentUrl, status: "ready" });
+        }
+      })
+      .catch((error: unknown) => {
+        if (!disposed) {
+          console.error("Failed to render DOCX preview", error);
+          setRenderState({ contentUrl, status: "error" });
+        }
+      });
+
+    return () => {
+      disposed = true;
+      container.replaceChildren();
+    };
+  }, [contentUrl, fileBuffer.data]);
+
+  return (
+    <div className="relative h-full overflow-auto bg-muted/40 p-4 custom-scrollbar">
+      <WorkspaceDocumentPreviewState status={status} />
+      <div
+        ref={containerRef}
+        className="workspace-docx-preview min-h-full"
+        data-testid="workspace-content-docx"
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,82 @@
+import { useEffect, useRef, useState } from "react";
+import { useWorkspaceFileBuffer } from "./use-workspace-file-buffer";
+import { WorkspaceDocumentPreviewState } from "./workspace-document-preview-state";
+
+export function WorkspacePresentationPreview({
+  contentUrl,
+}: {
+  contentUrl: string;
+}) {
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const fileBuffer = useWorkspaceFileBuffer(contentUrl);
+  const [renderState, setRenderState] = useState<{
+    contentUrl: string;
+    status: "ready" | "error";
+  } | null>(null);
+  const renderStatus =
+    renderState?.contentUrl === contentUrl ? renderState.status : "loading";
+  const status =
+    fileBuffer.status === "ready" ? renderStatus : fileBuffer.status;
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container || !fileBuffer.data) {
+      return undefined;
+    }
+    const abortController = new AbortController();
+    let viewer: { destroy: () => void } | null = null;
+    container.replaceChildren();
+    void import("@aiden0z/pptx-renderer")
+      .then(async ({ PptxViewer, RECOMMENDED_ZIP_LIMITS }) => {
+        viewer = await PptxViewer.open(
+          fileBuffer.data as ArrayBuffer,
+          container,
+          {
+            renderMode: "list",
+            fitMode: "contain",
+            lazySlides: true,
+            lazyMedia: true,
+            pdfjs: false,
+            scrollContainer: container,
+            signal: abortController.signal,
+            zipLimits: RECOMMENDED_ZIP_LIMITS,
+            listOptions: {
+              windowed: true,
+              batchSize: 8,
+              initialSlides: 4,
+              overscanViewport: 1.5,
+            },
+          },
+        );
+        if (abortController.signal.aborted) {
+          viewer.destroy();
+          viewer = null;
+          return;
+        }
+        setRenderState({ contentUrl, status: "ready" });
+      })
+      .catch((error: unknown) => {
+        if (!abortController.signal.aborted) {
+          console.error("Failed to render presentation preview", error);
+          setRenderState({ contentUrl, status: "error" });
+        }
+      });
+
+    return () => {
+      abortController.abort();
+      viewer?.destroy();
+      container.replaceChildren();
+    };
+  }, [contentUrl, fileBuffer.data]);
+
+  return (
+    <div className="relative h-full bg-muted/40">
+      <WorkspaceDocumentPreviewState status={status} />
+      <div
+        ref={containerRef}
+        className="h-full overflow-auto p-4 custom-scrollbar"
+        data-testid="workspace-content-presentation"
+      />
+    </div>
+  );
+}

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