@nextclaw/ui 0.15.3 → 0.15.4

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

@@ -2,7 +2,11 @@ import {
   AlarmClock,
   ArrowLeft,
   ArrowRight,
-  FileCode2,
+  Code2,
+  Eye,
+  FolderTree,
+  GitBranch,
+  LayoutDashboard,
   Maximize2,
   MessageSquarePlus,
   MessageSquareText,
@@ -12,6 +16,7 @@ import {
 } from "lucide-react";
 import type { WorkspaceTabViewModel } from "@/features/chat/features/workspace/utils/chat-workspace-panel-view-model.utils";
 import { AgentIdentityAvatar } from "@/shared/components/common/agent-identity";
+import { FileTypeIcon } from "@/shared/components/file-type-icon";
 import {
   CompactTabStrip,
   type CompactTabStripAction,
@@ -19,13 +24,29 @@ import {
 } from "@/shared/components/ui/tab-strip/compact-tab-strip";
 import { t } from "@/shared/lib/i18n";
 
-function WorkspaceTabIcon({ agentId, kind }: Pick<WorkspaceTabViewModel, "agentId" | "kind">) {
+function WorkspaceTabIcon({
+  agentId,
+  fileName,
+  kind,
+}: Pick<WorkspaceTabViewModel, "agentId" | "fileName" | "kind">) {
+  if (kind === "overview") {
+    return <LayoutDashboard className="h-3.5 w-3.5 shrink-0 text-gray-400" />;
+  }
+
+  if (kind === "child-sessions") {
+    return <GitBranch className="h-3.5 w-3.5 shrink-0 text-gray-400" />;
+  }
+
+  if (kind === "project-files") {
+    return <FolderTree className="h-3.5 w-3.5 shrink-0 text-gray-400" />;
+  }
+
   if (kind === "cron") {
     return <AlarmClock className="h-3.5 w-3.5 shrink-0 text-gray-400" />;
   }
 
   if (kind === "file") {
-    return <FileCode2 className="h-3.5 w-3.5 shrink-0 text-gray-400" />;
+    return <FileTypeIcon fileName={fileName ?? ""} size="compact" />;
   }
 
   if (kind === "side-chat-draft") {
@@ -47,11 +68,17 @@ function buildCompactWorkspaceTabs(
   return tabs.map((tab) => ({
     key: tab.key,
     label: tab.title,
+    labelClassName: tab.isRenderedPreview ? "italic font-normal" : undefined,
     active: tab.active,
     tooltip: tab.tooltip,
-    leadingIcon: <WorkspaceTabIcon kind={tab.kind} agentId={tab.agentId} />,
-    badge:
-      tab.kind === "file" && tab.viewMode === "diff" ? (
+    leadingIcon: (
+      <WorkspaceTabIcon
+        kind={tab.kind}
+        agentId={tab.agentId}
+        fileName={tab.fileName}
+      />
+    ),
+    badge: tab.kind === "file" && tab.viewMode === "diff" ? (
         <span className="shrink-0 rounded border border-amber-200 bg-amber-50 px-1 py-0 text-[9px] font-medium uppercase tracking-[0.08em] text-amber-700">
           {t("chatWorkspaceDiff")}
         </span>
@@ -61,6 +88,29 @@ function buildCompactWorkspaceTabs(
     closePlacement: "leading-hover",
     onSelect: tab.onSelect,
     onClose: tab.onClose,
+    menuLabel: t("chatWorkspaceFileMoreActions"),
+    menuActions: tab.kind === "file"
+      ? [
+          ...(tab.alternateViewerAction
+            ? [{
+                key: `viewer:${tab.alternateViewerAction.viewer}`,
+                icon: tab.alternateViewerAction.viewer === "rendered"
+                  ? <Eye className="h-3.5 w-3.5" />
+                  : <Code2 className="h-3.5 w-3.5" />,
+                label: tab.alternateViewerAction.label,
+                onClick: tab.alternateViewerAction.onSelect,
+              }]
+            : []),
+          ...(tab.onClose
+            ? [{
+                key: "close",
+                icon: <X className="h-3.5 w-3.5" />,
+                label: t("chatWorkspaceCloseFile"),
+                onClick: tab.onClose,
+              }]
+            : []),
+        ]
+      : undefined,
   }));
 }
 

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