@nextclaw/ui 0.15.2 → 0.15.4

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

@@ -2,7 +2,6 @@ import { useMemo } from "react";
 import type {
   ChatFileOpenActionViewModel,
   ChatFileOperationBlockViewModel,
-  ChatFilePreviewViewer,
 } from "@nextclaw/agent-chat-ui";
 import {
   ChatMessageMarkdown,
@@ -11,6 +10,11 @@ import {
 import type { ChatWorkspaceFileTab } from "@/features/chat/stores/chat-thread.store";
 import { ChatSessionWorkspaceDirectoryBrowser } from "./chat-session-workspace-directory-browser";
 import { ChatSessionWorkspaceFileBreadcrumbs } from "./chat-session-workspace-file-breadcrumbs";
+import {
+  resolveWorkspaceFileContentKind,
+  WorkspaceFileContentPreview,
+  type WorkspaceFileContentKind,
+} from "./workspace-file-content-preview";
 import { useServerPathBrowse } from "@/shared/hooks/use-server-path-browse";
 import { useServerPathRead } from "@/shared/hooks/use-server-path-read";
 import { buildServerPathContentUrl } from "@/shared/lib/api";
@@ -21,6 +25,7 @@ import {
 import { t } from "@/shared/lib/i18n";
 import { buildWorkspaceFileBreadcrumb } from "@/shared/lib/session-project";
 import { cn } from "@/shared/lib/utils";
+import { resolveWorkspaceFileViewer } from "@/features/chat/features/workspace/utils/chat-workspace-file-viewer.utils";
 
 function inferPreviewKind(params: {
   path: string;
@@ -32,14 +37,10 @@ function inferPreviewKind(params: {
   return /\.mdx?$/i.test(params.path) ? "markdown" : "text";
 }
 
-function resolveFilePreviewViewer(params: {
-  path: string;
-  viewer?: ChatFilePreviewViewer | null;
-}): "source" | "rendered" {
-  return params.viewer === "rendered" && /\.html?$/i.test(params.path) ? "rendered" : "source";
-}
-
-function appendPreviewRefreshVersion(url: string, refreshVersion: number): string {
+function appendPreviewRefreshVersion(
+  url: string,
+  refreshVersion: number,
+): string {
   if (refreshVersion <= 0) {
     return url;
   }
@@ -155,46 +156,50 @@ function WorkspaceCodeSurface({
   block,
 }: {
   block: ChatFileOperationBlockViewModel;
-}) {
-  return <div className="h-full overflow-auto custom-scrollbar bg-white"><FileOperationCodeSurface block={block} layout="workspace" /></div>;
-}
-
-function WorkspaceHtmlRenderedPreview({
-  src,
-}: {
-  src: string;
 }) {
   return (
-    <iframe
-      allowFullScreen
-      className="h-full w-full border-0 bg-white"
-      data-testid="workspace-html-preview"
-      src={src}
-      title={t("chatWorkspaceHtmlPreviewTitle")}
-    />
+    <div className="h-full overflow-auto custom-scrollbar bg-white">
+      <FileOperationCodeSurface block={block} layout="workspace" />
+    </div>
   );
 }
 
 function WorkspacePreviewBody({
+  contentUrl,
+  contentUrlKind,
+  contentLabel,
   directoryQuery,
+  fileBasePath,
   onFileOpen,
   previewBlock,
   previewKind,
+  previewViewer,
   previewQuery,
   previewText,
-  previewUrl,
-  previewViewer,
 }: {
-  directoryQuery: ReturnType<typeof useServerPathBrowse>;
+  contentUrl: string | null;
+  contentUrlKind: WorkspaceFileContentKind | null;
+  contentLabel: string;
+  directoryQuery: ReturnType<typeof useServerPathBrowse> | null | undefined;
+  fileBasePath: string | null;
   onFileOpen: (action: ChatFileOpenActionViewModel) => void;
   previewBlock: ChatFileOperationBlockViewModel | null;
   previewKind: "text" | "markdown" | "binary";
-  previewQuery: ReturnType<typeof useServerPathRead>;
+  previewViewer: "source" | "rendered" | null;
+  previewQuery: ReturnType<typeof useServerPathRead> | null | undefined;
   previewText: string | null;
-  previewUrl: string | null;
-  previewViewer: "source" | "rendered";
 }) {
-  if (directoryQuery.data) {
+  if (contentUrl && contentUrlKind) {
+    return (
+      <WorkspaceFileContentPreview
+        contentUrl={contentUrl}
+        kind={contentUrlKind}
+        label={contentLabel}
+      />
+    );
+  }
+
+  if (directoryQuery?.data) {
     return (
       <ChatSessionWorkspaceDirectoryBrowser
         browseQuery={directoryQuery}
@@ -204,25 +209,25 @@ function WorkspacePreviewBody({
     );
   }
 
-  if (directoryQuery.isLoading && previewQuery.error && !previewBlock) {
+  if (directoryQuery?.isLoading && previewQuery?.error && !previewBlock) {
     return (
       <WorkspaceFilePreviewStatus text={t("chatWorkspaceLoadingDirectory")} />
     );
   }
 
-  if ((directoryQuery.isLoading || previewQuery.isLoading) && !previewBlock) {
+  if ((directoryQuery?.isLoading || previewQuery?.isLoading) && !previewBlock) {
     return (
       <WorkspaceFilePreviewStatus text={t("chatWorkspaceLoadingPreview")} />
     );
   }
 
-  if (previewQuery.data?.kind === "binary") {
+  if (previewQuery?.data?.kind === "binary") {
     return (
       <WorkspaceFilePreviewStatus text={t("chatWorkspacePreviewUnsupported")} />
     );
   }
 
-  if (previewQuery.error && !previewBlock) {
+  if (previewQuery?.error && !previewBlock) {
     return (
       <WorkspaceFilePreviewStatus
         tone="error"
@@ -235,11 +240,7 @@ function WorkspacePreviewBody({
     );
   }
 
-  if (previewViewer === "rendered" && previewUrl) {
-    return <WorkspaceHtmlRenderedPreview src={previewUrl} />;
-  }
-
-  if (previewKind === "markdown" && previewText) {
+  if (previewKind === "markdown" && previewViewer !== "source" && previewText) {
     return (
       <div className="h-full overflow-auto custom-scrollbar px-5 py-4">
         <ChatMessageMarkdown
@@ -250,6 +251,9 @@ function WorkspacePreviewBody({
             copiedCodeLabel: t("chatCodeCopied"),
           }}
           onFileOpen={onFileOpen}
+          resolveFileContentUrl={(action) =>
+            buildServerPathContentUrl(action.path, fileBasePath)
+          }
         />
       </div>
     );
@@ -278,62 +282,87 @@ export function ChatSessionWorkspaceFilePreview({
   onFileOpen,
 }: ChatSessionWorkspaceFilePreviewProps) {
   const isPreviewMode = file.viewMode === "preview";
+  const suppliedContentUrl = file.contentUrl?.trim() || null;
+  const usesServerPath = isPreviewMode && !suppliedContentUrl;
   const previewQuery = useServerPathRead({
     path: file.path,
     basePath: sessionWorkingDir,
-    enabled: isPreviewMode,
+    enabled: usesServerPath,
   });
   const directoryQuery = useServerPathBrowse({
     path: file.path,
     basePath: sessionWorkingDir,
     includeFiles: true,
-    enabled: isPreviewMode,
+    enabled: usesServerPath,
   });
   const diffBlock = useMemo(
     () => (file.viewMode === "diff" ? buildDiffBlock(file) : null),
     [file],
   );
-  const previewText =
-    isPreviewMode ? previewQuery.data?.text ?? file.rawText ?? null : null;
+  const previewText = isPreviewMode
+    ? (previewQuery?.data?.text ?? file.rawText ?? null)
+    : null;
   const previewKind = inferPreviewKind({
-    path: previewQuery.data?.resolvedPath ?? file.path,
-    serverKind: previewQuery.data?.kind,
+    path: previewQuery?.data?.resolvedPath ?? file.path,
+    serverKind: previewQuery?.data?.kind,
   });
+  const suppliedContentKind = suppliedContentUrl
+    ? resolveWorkspaceFileContentKind({
+        path: file.path,
+        mimeType: file.mimeType,
+      })
+    : null;
   const resolvedPath =
-    directoryQuery.data?.currentPath ??
-    previewQuery.data?.resolvedPath ??
+    directoryQuery?.data?.currentPath ??
+    previewQuery?.data?.resolvedPath ??
     file.path;
-  const previewPathKind = directoryQuery.data ? "directory" : "file";
-  const previewViewer = resolveFilePreviewViewer({
+  const previewPathKind = directoryQuery?.data ? "directory" : "file";
+  const previewViewer = resolveWorkspaceFileViewer(
+    resolvedPath,
+    file.previewViewer,
+  );
+  const localContentKind = resolveWorkspaceFileContentKind({
     path: resolvedPath,
-    viewer: file.previewViewer,
   });
-  const previewUrl =
-    previewViewer === "rendered" && previewQuery.data?.resolvedPath
-      ? appendPreviewRefreshVersion(
-          buildServerPathContentUrl(previewQuery.data.resolvedPath),
-          refreshVersion,
-        )
+  const localContentUrlCandidate = buildServerPathContentUrl(
+    file.path,
+    sessionWorkingDir,
+  );
+  const shouldRenderLocalContent = Boolean(
+    !suppliedContentUrl &&
+    isPreviewMode &&
+    localContentUrlCandidate &&
+    file.previewViewer !== "source" &&
+    localContentKind !== "other" &&
+    (localContentKind !== "html" || previewViewer === "rendered"),
+  );
+  const localContentUrl =
+    shouldRenderLocalContent && localContentUrlCandidate
+      ? appendPreviewRefreshVersion(localContentUrlCandidate, refreshVersion)
       : null;
+  const contentUrl = suppliedContentUrl ?? localContentUrl;
+  const contentUrlKind =
+    suppliedContentKind ?? (localContentUrl ? localContentKind : null);
   const previewBlock = useMemo(() => {
-    if (!isPreviewMode || !previewText) {
+    if (!isPreviewMode || !previewText || contentUrl) {
       return null;
     }
     return buildPreviewBlock({
-      path: previewQuery.data?.resolvedPath ?? file.path,
+      path: previewQuery?.data?.resolvedPath ?? file.path,
       text: previewText,
-      languageHint: previewQuery.data?.languageHint ?? null,
+      languageHint: previewQuery?.data?.languageHint ?? null,
       line: file.line,
     });
   }, [
+    contentUrl,
     file.line,
     file.path,
     isPreviewMode,
-    previewQuery.data?.languageHint,
-    previewQuery.data?.resolvedPath,
+    previewQuery?.data?.languageHint,
+    previewQuery?.data?.resolvedPath,
     previewText,
   ]);
-  const isTruncated = Boolean(previewQuery.data?.truncated);
+  const isTextPreviewTruncated = !contentUrl && Boolean(previewQuery?.data?.truncated);
   const breadcrumbBasePath = sessionProjectRoot ?? sessionWorkingDir;
   const breadcrumb = useMemo(
     () =>
@@ -343,13 +372,13 @@ export function ChatSessionWorkspaceFilePreview({
         sessionProjectRoot: breadcrumbBasePath,
         line: file.line,
         column: file.column,
-        truncated: isTruncated,
+        truncated: isTextPreviewTruncated,
       }),
     [
       breadcrumbBasePath,
       file.column,
       file.line,
-      isTruncated,
+      isTextPreviewTruncated,
       previewPathKind,
       resolvedPath,
     ],
@@ -367,14 +396,17 @@ export function ChatSessionWorkspaceFilePreview({
           <WorkspaceDiffBody diffBlock={diffBlock} />
         ) : (
           <WorkspacePreviewBody
+            contentUrl={contentUrl}
+            contentUrlKind={contentUrlKind}
+            contentLabel={file.label?.trim() || resolvedPath}
             directoryQuery={directoryQuery}
+            fileBasePath={sessionWorkingDir}
             onFileOpen={onFileOpen}
             previewBlock={previewBlock}
             previewKind={previewKind}
+            previewViewer={previewViewer}
             previewQuery={previewQuery}
             previewText={previewText}
-            previewUrl={previewUrl}
-            previewViewer={previewViewer}
           />
         )}
       </div>

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