@nextclaw/ui 0.15.3 → 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,40 +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";
-}
-
-type ContentUrlPreviewKind = "image" | "audio" | "video" | "pdf" | "html" | "other";
-
-function resolveContentUrlPreviewKind(params: {
-  path: string;
-  mimeType?: string | null;
-}): ContentUrlPreviewKind {
-  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.includes("html") || /\.html?$/i.test(path)) {
-    return "html";
-  }
-  return "other";
-}
-
-function appendPreviewRefreshVersion(url: string, refreshVersion: number): string {
+function appendPreviewRefreshVersion(
+  url: string,
+  refreshVersion: number,
+): string {
   if (refreshVersion <= 0) {
     return url;
   }
@@ -182,119 +157,9 @@ function WorkspaceCodeSurface({
 }: {
   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")}
-    />
-  );
-}
-
-function WorkspaceContentUrlPreview({
-  contentUrl,
-  kind,
-  label,
-}: {
-  contentUrl: string;
-  kind: ContentUrlPreviewKind;
-  label: string;
-}) {
-  if (kind === "image") {
-    return (
-      <div className="flex h-full items-center justify-center overflow-auto custom-scrollbar bg-white p-4">
-        <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}
-      />
-    );
-  }
   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 className="h-full overflow-auto custom-scrollbar bg-white">
+      <FileOperationCodeSurface block={block} layout="workspace" />
     </div>
   );
 }
@@ -304,29 +169,29 @@ function WorkspacePreviewBody({
   contentUrlKind,
   contentLabel,
   directoryQuery,
+  fileBasePath,
   onFileOpen,
   previewBlock,
   previewKind,
+  previewViewer,
   previewQuery,
   previewText,
-  previewUrl,
-  previewViewer,
 }: {
   contentUrl: string | null;
-  contentUrlKind: ContentUrlPreviewKind | 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";
+  previewViewer: "source" | "rendered" | null;
   previewQuery: ReturnType<typeof useServerPathRead> | null | undefined;
   previewText: string | null;
-  previewUrl: string | null;
-  previewViewer: "source" | "rendered";
 }) {
   if (contentUrl && contentUrlKind) {
     return (
-      <WorkspaceContentUrlPreview
+      <WorkspaceFileContentPreview
         contentUrl={contentUrl}
         kind={contentUrlKind}
         label={contentLabel}
@@ -375,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
@@ -390,6 +251,9 @@ function WorkspacePreviewBody({
             copiedCodeLabel: t("chatCodeCopied"),
           }}
           onFileOpen={onFileOpen}
+          resolveFileContentUrl={(action) =>
+            buildServerPathContentUrl(action.path, fileBasePath)
+          }
         />
       </div>
     );
@@ -418,8 +282,8 @@ export function ChatSessionWorkspaceFilePreview({
   onFileOpen,
 }: ChatSessionWorkspaceFilePreviewProps) {
   const isPreviewMode = file.viewMode === "preview";
-  const contentUrl = file.contentUrl?.trim() || null;
-  const usesServerPath = isPreviewMode && !contentUrl;
+  const suppliedContentUrl = file.contentUrl?.trim() || null;
+  const usesServerPath = isPreviewMode && !suppliedContentUrl;
   const previewQuery = useServerPathRead({
     path: file.path,
     basePath: sessionWorkingDir,
@@ -435,14 +299,15 @@ export function ChatSessionWorkspaceFilePreview({
     () => (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,
   });
-  const contentUrlKind = contentUrl
-    ? resolveContentUrlPreviewKind({
+  const suppliedContentKind = suppliedContentUrl
+    ? resolveWorkspaceFileContentKind({
         path: file.path,
         mimeType: file.mimeType,
       })
@@ -452,17 +317,32 @@ export function ChatSessionWorkspaceFilePreview({
     previewQuery?.data?.resolvedPath ??
     file.path;
   const previewPathKind = directoryQuery?.data ? "directory" : "file";
-  const previewViewer = resolveFilePreviewViewer({
+  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 || contentUrl) {
       return null;
@@ -482,7 +362,7 @@ export function ChatSessionWorkspaceFilePreview({
     previewQuery?.data?.resolvedPath,
     previewText,
   ]);
-  const isTruncated = Boolean(previewQuery?.data?.truncated);
+  const isTextPreviewTruncated = !contentUrl && Boolean(previewQuery?.data?.truncated);
   const breadcrumbBasePath = sessionProjectRoot ?? sessionWorkingDir;
   const breadcrumb = useMemo(
     () =>
@@ -492,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,
     ],
@@ -520,13 +400,13 @@ export function ChatSessionWorkspaceFilePreview({
             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 (
       <>