@nextclaw/ui 0.15.3 → 0.15.5

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

@@ -1,21 +1,234 @@
-import { MessageSquarePlus } from "lucide-react";
+import type { ReactNode } from "react";
+import {
+  AlarmClock,
+  ChevronRight,
+  FolderTree,
+  GitBranch,
+  MessageSquarePlus,
+} from "lucide-react";
 import type { CronJobView } from "@/shared/lib/api";
 import { usePresenter } from "@/features/chat/components/providers/chat-presenter.provider";
 import { SessionConversationArea } from "@/features/chat/features/conversation/components/session-conversation-area";
 import { ChatSessionWorkspaceFilePreview } from "@/features/chat/features/workspace/components/chat-session-workspace-file-preview";
+import { ChatSessionWorkspaceDirectoryBrowser } from "@/features/chat/features/workspace/components/chat-session-workspace-directory-browser";
 import { SessionCronJobContent } from "@/features/chat/features/workspace/components/session-cron-job-content";
 import type { ResolvedChildSessionTab } from "@/features/chat/features/ncp/hooks/use-ncp-child-session-tabs-view";
 import type { WorkspaceSelection } from "@/features/chat/features/workspace/utils/chat-workspace-panel-view-model.utils";
+import { useServerPathBrowse } from "@/shared/hooks/use-server-path-browse";
 import { t } from "@/shared/lib/i18n";
+import { cn } from "@/shared/lib/utils";
 
 type ChatSessionWorkspacePanelContentProps = {
   activeSelection: WorkspaceSelection;
+  childSessionTabs: readonly ResolvedChildSessionTab[];
   filePreviewRefreshVersion: number;
+  sessionKey: string | null;
   sessionCronJobs: readonly CronJobView[];
   sessionProjectRoot: string | null;
   sessionWorkingDir: string | null;
 };
 
+function WorkspaceOverviewEntry({
+  count,
+  description,
+  icon,
+  onClick,
+  title,
+}: {
+  count?: number;
+  description: string;
+  icon: ReactNode;
+  onClick: () => void;
+  title: string;
+}) {
+  return (
+    <button
+      type="button"
+      className="group flex w-full items-center gap-3 rounded-lg border border-gray-200/80 bg-white px-3 py-3 text-left transition-colors hover:border-gray-300 hover:bg-gray-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/25"
+      onClick={onClick}
+    >
+      <span className="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-gray-100 text-gray-600">
+        {icon}
+      </span>
+      <span className="min-w-0 flex-1">
+        <span className="flex items-center gap-2 text-sm font-medium text-gray-900">
+          <span className="truncate">{title}</span>
+          {typeof count === "number" ? (
+            <span className="rounded-full bg-gray-100 px-1.5 py-0.5 text-[10px] font-semibold tabular-nums text-gray-500">
+              {count}
+            </span>
+          ) : null}
+        </span>
+        <span className="mt-0.5 block text-xs leading-5 text-gray-500">
+          {description}
+        </span>
+      </span>
+      <ChevronRight className="h-4 w-4 shrink-0 text-gray-300 transition-transform group-hover:translate-x-0.5 group-hover:text-gray-500" />
+    </button>
+  );
+}
+
+function WorkspaceOverview({
+  childSessionTabs,
+  sessionCronJobs,
+  sessionKey,
+}: {
+  childSessionTabs: readonly ResolvedChildSessionTab[];
+  sessionCronJobs: readonly CronJobView[];
+  sessionKey: string | null;
+}) {
+  const presenter = usePresenter();
+
+  return (
+    <div className="h-full overflow-auto bg-gray-50/45 px-4 py-5 custom-scrollbar">
+      <div className="mx-auto max-w-xl">
+        <h2 className="text-base font-semibold text-gray-900">
+          {t("chatWorkspaceOverview")}
+        </h2>
+        <p className="mt-1 text-xs leading-5 text-gray-500">
+          {t("chatWorkspaceOverviewDescription")}
+        </p>
+        <div className="mt-4 space-y-2">
+          <WorkspaceOverviewEntry
+            count={childSessionTabs.length}
+            description={t("chatWorkspaceChildSessionsDescription")}
+            icon={<GitBranch className="h-4 w-4" />}
+            title={t("chatWorkspaceChildSessions")}
+            onClick={() => {
+              if (sessionKey) {
+                presenter.chatThreadManager.openChildSessions(sessionKey);
+              }
+            }}
+          />
+          <WorkspaceOverviewEntry
+            count={sessionCronJobs.length}
+            description={t("chatWorkspaceSessionCronJobsDescription")}
+            icon={<AlarmClock className="h-4 w-4" />}
+            title={t("chatWorkspaceSessionCronJobs")}
+            onClick={() => {
+              if (sessionKey) {
+                presenter.chatThreadManager.openSessionCronPanel(sessionKey);
+              }
+            }}
+          />
+          <WorkspaceOverviewEntry
+            description={t("chatWorkspaceProjectFilesDescription")}
+            icon={<FolderTree className="h-4 w-4" />}
+            title={t("chatWorkspaceProjectFiles")}
+            onClick={() => {
+              if (sessionKey) {
+                presenter.chatThreadManager.openProjectFiles(sessionKey);
+              }
+            }}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function WorkspaceChildSessions({
+  childSessionTabs,
+}: {
+  childSessionTabs: readonly ResolvedChildSessionTab[];
+}) {
+  const presenter = usePresenter();
+
+  return (
+    <div className="h-full overflow-auto bg-gray-50/45 px-4 py-5 custom-scrollbar">
+      <div className="mx-auto max-w-xl">
+        <div className="flex items-center gap-2">
+          <h2 className="text-base font-semibold text-gray-900">
+            {t("chatWorkspaceChildSessions")}
+          </h2>
+          <span className="rounded-full bg-gray-100 px-1.5 py-0.5 text-[10px] font-semibold tabular-nums text-gray-500">
+            {childSessionTabs.length}
+          </span>
+        </div>
+        {childSessionTabs.length === 0 ? (
+          <div className="py-10 text-center text-sm text-gray-500">
+            {t("chatWorkspaceChildSessionsEmpty")}
+          </div>
+        ) : (
+          <div className="mt-4 space-y-2">
+            {childSessionTabs.map((tab) => (
+              <button
+                key={tab.sessionKey}
+                type="button"
+                className="group flex w-full items-center gap-3 rounded-lg border border-gray-200/80 bg-white px-3 py-3 text-left transition-colors hover:border-gray-300 hover:bg-gray-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/25"
+                onClick={() =>
+                  presenter.chatThreadManager.selectChildSessionDetail(
+                    tab.sessionKey,
+                  )
+                }
+              >
+                <span className="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-gray-100 text-gray-600">
+                  <GitBranch className="h-4 w-4" />
+                </span>
+                <span className="min-w-0 flex-1">
+                  <span className="block truncate text-sm font-medium text-gray-900">
+                    {tab.title}
+                  </span>
+                  {tab.projectName || tab.sessionTypeLabel ? (
+                    <span className="mt-0.5 block truncate text-xs text-gray-500">
+                      {[tab.sessionTypeLabel, tab.projectName]
+                        .filter(Boolean)
+                        .join(" · ")}
+                    </span>
+                  ) : null}
+                </span>
+                <ChevronRight className="h-4 w-4 shrink-0 text-gray-300 transition-transform group-hover:translate-x-0.5 group-hover:text-gray-500" />
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function WorkspaceProjectFiles({
+  projectRoot,
+  workingDir,
+}: {
+  projectRoot: string | null;
+  workingDir: string | null;
+}) {
+  const presenter = usePresenter();
+  const rootPath = projectRoot ?? workingDir;
+  const browseQuery = useServerPathBrowse({
+    path: rootPath,
+    includeFiles: true,
+    enabled: Boolean(rootPath),
+  });
+
+  if (!rootPath) {
+    return (
+      <div className="flex h-full items-center justify-center px-6 text-center text-sm text-gray-500">
+        {t("chatWorkspaceProjectFilesUnavailable")}
+      </div>
+    );
+  }
+
+  return (
+    <ChatSessionWorkspaceDirectoryBrowser
+      browseQuery={browseQuery}
+      onFileOpen={presenter.chatThreadManager.openFilePreview}
+      renderStatus={({ text, tone = "muted" }) => (
+        <div
+          className={cn(
+            "flex h-full items-center justify-center px-6 text-center text-sm",
+            tone === "error" ? "text-rose-600" : "text-gray-500",
+          )}
+        >
+          {text}
+        </div>
+      )}
+      showRoot
+    />
+  );
+}
+
 function ChildSessionMetaChip({ value }: { value: string }) {
   return (
     <span className="inline-flex max-w-full shrink-0 items-center rounded border border-gray-200 bg-gray-50 px-1.5 py-0.5 text-[10px] font-medium text-gray-600">
@@ -68,13 +281,38 @@ function WorkspaceSideChatDraftHeader() {
 
 export function ChatSessionWorkspacePanelContent({
   activeSelection,
+  childSessionTabs,
   filePreviewRefreshVersion,
+  sessionKey,
   sessionCronJobs,
   sessionProjectRoot,
   sessionWorkingDir,
 }: ChatSessionWorkspacePanelContentProps) {
   const presenter = usePresenter();
 
+  if (activeSelection.kind === "overview") {
+    return (
+      <WorkspaceOverview
+        childSessionTabs={childSessionTabs}
+        sessionCronJobs={sessionCronJobs}
+        sessionKey={sessionKey}
+      />
+    );
+  }
+
+  if (activeSelection.kind === "project-files") {
+    return (
+      <WorkspaceProjectFiles
+        projectRoot={sessionProjectRoot}
+        workingDir={sessionWorkingDir}
+      />
+    );
+  }
+
+  if (activeSelection.kind === "child-sessions") {
+    return <WorkspaceChildSessions childSessionTabs={childSessionTabs} />;
+  }
+
   if (activeSelection.kind === "side-chat-draft") {
     return (
       <>

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,20 +68,53 @@ 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>
       ) : null,
     unreadIndicator: tab.showUnreadDot ? <span aria-label={t("chatSessionUnread")} className="h-2 w-2 shrink-0 rounded-full bg-primary" /> : null,
-    closeLabel: t("chatWorkspaceCloseFile"),
+    closeLabel: `${
+      tab.kind === "file"
+        ? t("chatWorkspaceCloseFile")
+        : t("chatWorkspaceCloseTab")
+    }: ${tab.title}`,
     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,
@@ -33,12 +39,14 @@ type ChatSessionWorkspacePanelProps = {
   activeSideChatDraft: ChatWorkspaceSideChatDraft | null;
   workspaceFileTabs: readonly ChatWorkspaceFileTab[];
   activeWorkspaceFileKey: string | null;
+  closedWorkspaceTabEntries: readonly ChatWorkspaceNavigationEntry[];
   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";
 };
 
@@ -49,12 +57,14 @@ export function ChatSessionWorkspacePanel({
   activeSideChatDraft,
   workspaceFileTabs,
   activeWorkspaceFileKey,
+  closedWorkspaceTabEntries,
   workspaceNavigationHistory = [],
   workspaceNavigationHistoryIndex = 0,
   activePanelKind,
   sessionCronJobs = [],
   sessionProjectRoot,
   sessionWorkingDir,
+  workspacePanelWidth = CHAT_WORKSPACE_PANEL_DEFAULT_WIDTH,
   displayMode = "docked",
 }: ChatSessionWorkspacePanelProps) {
   const presenter = usePresenter();
@@ -72,7 +82,6 @@ export function ChatSessionWorkspacePanel({
     activePanelKind,
     childSessionTabs: resolvedChildTabs,
     workspaceFileTabs,
-    sessionCronJobCount: sessionCronJobs.length,
   });
   const workspaceHistory = {
     entries: workspaceNavigationHistory,
@@ -88,13 +97,26 @@ export function ChatSessionWorkspacePanel({
       buildWorkspaceTabsViewModel({
         resolvedChildTabs,
         activeSideChatDraft,
+        closedWorkspaceTabEntries,
         workspaceFileTabs,
-        sessionCronJobCount: sessionCronJobs.length,
         activeSelection,
         optimisticReadAtBySessionKey,
         onSelectSession: presenter.chatThreadManager.selectChildSessionDetail,
         onSelectFile: presenter.chatThreadManager.selectWorkspaceFile,
-        onCloseFile: presenter.chatThreadManager.closeWorkspaceFile,
+        onOpenFileViewer: presenter.chatThreadManager.openWorkspaceFileViewer,
+        onCloseTab: presenter.chatThreadManager.closeWorkspaceTab,
+        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);
@@ -103,12 +125,12 @@ export function ChatSessionWorkspacePanel({
     [
       activeSelection,
       activeSideChatDraft,
+      closedWorkspaceTabEntries,
       optimisticReadAtBySessionKey,
       presenter.chatThreadManager,
       resolvedChildTabs,
       sessionKey,
       workspaceFileTabs,
-      sessionCronJobs.length,
     ],
   );
 
@@ -150,9 +172,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 +199,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;
+}