@nextclaw/ui 0.14.4-beta.0 → 0.15.0

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

@@ -1,6 +1,12 @@
-import { Fragment } from "react";
+import { Fragment, useState } from "react";
+import type { ChatFileOpenActionViewModel } from "@nextclaw/agent-chat-ui";
 import { ChevronRight, FileCode2, FolderTree } from "lucide-react";
-import type { WorkspaceFileBreadcrumbViewModel } from "@/shared/lib/session-project";
+import { Popover, PopoverContent, PopoverTrigger } from "@/shared/components/ui/popover";
+import { WorkspaceBreadcrumbBrowser } from "./chat-session-workspace-file-breadcrumb-browser";
+import type {
+  WorkspaceFileBreadcrumbSegmentViewModel,
+  WorkspaceFileBreadcrumbViewModel,
+} from "@/shared/lib/session-project";
 import { t } from "@/shared/lib/i18n";
 import { cn } from "@/shared/lib/utils";
 
@@ -19,7 +25,69 @@ function WorkspaceBreadcrumbMetaChip({ tone = "neutral", value }: { tone?: "neut
   );
 }
 
-export function ChatSessionWorkspaceFileBreadcrumbs({ breadcrumb }: { breadcrumb: WorkspaceFileBreadcrumbViewModel }) {
+function WorkspaceBreadcrumbSegmentButton({
+  onFileOpen,
+  segment,
+}: {
+  onFileOpen: (action: ChatFileOpenActionViewModel) => void;
+  segment: WorkspaceFileBreadcrumbSegmentViewModel;
+}) {
+  const [open, setOpen] = useState(false);
+  const [browsePath, setBrowsePath] = useState<string | null>(segment.browsePath);
+  const handleOpenChange = (nextOpen: boolean) => {
+    if (nextOpen) {
+      setBrowsePath(segment.browsePath);
+    }
+    setOpen(nextOpen);
+  };
+
+  return (
+    <Popover open={open} onOpenChange={handleOpenChange}>
+      <PopoverTrigger asChild>
+        <button
+          type="button"
+          aria-current={segment.isCurrent ? "page" : undefined}
+          className={cn(
+            "inline-flex h-5 items-center gap-1 rounded-sm px-1 text-[11px] leading-none transition-colors hover:bg-gray-200/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40",
+            segment.kind === "workspace"
+              ? "bg-primary/8 text-primary hover:bg-primary/12"
+              : segment.isCurrent
+                ? "bg-gray-200/70 text-gray-900"
+                : "text-gray-500",
+          )}
+          disabled={!segment.browsePath}
+        >
+          {segment.kind === "workspace" ? (
+            <FolderTree className="h-3 w-3 shrink-0" />
+          ) : segment.isCurrent ? (
+            <FileCode2 className="h-3 w-3 shrink-0" />
+          ) : null}
+          <span>{segment.label}</span>
+        </button>
+      </PopoverTrigger>
+      <PopoverContent
+        data-testid="workspace-breadcrumb-popover"
+        className="w-[22rem] rounded-md p-0"
+        align="start"
+      >
+        <WorkspaceBreadcrumbBrowser
+          browsePath={browsePath}
+          onBrowsePathChange={setBrowsePath}
+          onClose={() => setOpen(false)}
+          onFileOpen={onFileOpen}
+        />
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+export function ChatSessionWorkspaceFileBreadcrumbs({
+  breadcrumb,
+  onFileOpen,
+}: {
+  breadcrumb: WorkspaceFileBreadcrumbViewModel;
+  onFileOpen: (action: ChatFileOpenActionViewModel) => void;
+}) {
   return (
     <div
       data-testid="workspace-file-breadcrumbs"
@@ -33,23 +101,10 @@ export function ChatSessionWorkspaceFileBreadcrumbs({ breadcrumb }: { breadcrumb
         <div className="flex min-w-0 flex-1 items-center gap-1 pr-1">
           {breadcrumb.segments.map((segment, index) => (
             <Fragment key={segment.key}>
-              <span
-                className={cn(
-                  "inline-flex h-5 items-center gap-1 rounded-sm px-1 text-[11px] leading-none",
-                  segment.kind === "workspace"
-                    ? "bg-primary/8 text-primary"
-                    : segment.isCurrent
-                      ? "bg-gray-200/70 text-gray-900"
-                      : "text-gray-500",
-                )}
-              >
-                {segment.kind === "workspace" ? (
-                  <FolderTree className="h-3 w-3 shrink-0" />
-                ) : segment.isCurrent ? (
-                  <FileCode2 className="h-3 w-3 shrink-0" />
-                ) : null}
-                <span>{segment.label}</span>
-              </span>
+              <WorkspaceBreadcrumbSegmentButton
+                segment={segment}
+                onFileOpen={onFileOpen}
+              />
               {index < breadcrumb.segments.length - 1 ? (
                 <ChevronRight className="h-3 w-3 shrink-0 text-gray-300" />
               ) : null}

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

@@ -1,9 +1,14 @@
 import { useMemo } from "react";
-import type { ChatFileOpenActionViewModel, ChatFileOperationBlockViewModel } from "@nextclaw/agent-chat-ui";
+import type {
+  ChatFileOpenActionViewModel,
+  ChatFileOperationBlockViewModel,
+  ChatFilePreviewViewer,
+} from "@nextclaw/agent-chat-ui";
 import { ChatMessageMarkdown, FileOperationCodeSurface } from "@nextclaw/agent-chat-ui";
 import type { ChatWorkspaceFileTab } from "@/features/chat/stores/chat-thread.store";
 import { ChatSessionWorkspaceFileBreadcrumbs } from "./chat-session-workspace-file-breadcrumbs";
 import { useServerPathRead } from "@/shared/hooks/use-server-path-read";
+import { buildServerPathContentUrl } from "@/shared/lib/api";
 import { buildLineDiff, buildPreviewLines } from "@/features/chat/features/message/utils/file-operation/line-builder.utils";
 import { t } from "@/shared/lib/i18n";
 import { buildWorkspaceFileBreadcrumb } from "@/shared/lib/session-project";
@@ -19,12 +24,26 @@ function inferPreviewKind(params: {
   return /\.mdx?$/i.test(params.path) ? "markdown" : "text";
 }
 
+function isHtmlFilePath(path: string): boolean {
+  return /\.html?$/i.test(path);
+}
+
+function resolveFilePreviewViewer(params: {
+  path: string;
+  viewer?: ChatFilePreviewViewer | null;
+}): "source" | "rendered" {
+  return params.viewer === "rendered" && isHtmlFilePath(params.path)
+    ? "rendered"
+    : "source";
+}
+
 function buildPreviewBlock(params: {
   path: string;
   text: string;
+  languageHint?: string | null;
   line?: number | null;
 }): ChatFileOperationBlockViewModel {
-  const { line, path, text } = params;
+  const { languageHint, line, path, text } = params;
   const startLine = line ?? 1;
   return {
     key: `preview:${path}`,
@@ -37,6 +56,7 @@ function buildPreviewBlock(params: {
       newStartLine: startLine,
     }),
     rawText: text,
+    languageHint: languageHint ?? null,
     oldStartLine: startLine,
     newStartLine: startLine,
   };
@@ -130,18 +150,38 @@ function WorkspaceCodeSurface({
   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 WorkspacePreviewBody({
   onFileOpen,
   previewBlock,
   previewKind,
   previewQuery,
   previewText,
+  previewUrl,
+  previewViewer,
 }: {
   onFileOpen: (action: ChatFileOpenActionViewModel) => void;
   previewBlock: ChatFileOperationBlockViewModel | null;
   previewKind: "text" | "markdown" | "binary";
   previewQuery: ReturnType<typeof useServerPathRead>;
   previewText: string | null;
+  previewUrl: string | null;
+  previewViewer: "source" | "rendered";
 }) {
   if (previewQuery.isLoading && !previewBlock) {
     return <WorkspaceFilePreviewStatus text={t("chatWorkspaceLoadingFile")} />;
@@ -166,6 +206,10 @@ function WorkspacePreviewBody({
     );
   }
 
+  if (previewViewer === "rendered" && previewUrl) {
+    return <WorkspaceHtmlRenderedPreview src={previewUrl} />;
+  }
+
   if (previewKind === "markdown" && previewText) {
     return (
       <div className="h-full overflow-auto custom-scrollbar px-5 py-4">
@@ -218,6 +262,15 @@ export function ChatSessionWorkspaceFilePreview({
     path: previewQuery.data?.resolvedPath ?? file.path,
     serverKind: previewQuery.data?.kind,
   });
+  const resolvedPath = previewQuery.data?.resolvedPath ?? file.path;
+  const previewViewer = resolveFilePreviewViewer({
+    path: resolvedPath,
+    viewer: file.previewViewer,
+  });
+  const previewUrl =
+    previewViewer === "rendered" && previewQuery.data?.resolvedPath
+      ? buildServerPathContentUrl(previewQuery.data.resolvedPath)
+      : null;
   const previewBlock = useMemo(() => {
     if (!isPreviewMode || !previewText) {
       return null;
@@ -225,10 +278,17 @@ export function ChatSessionWorkspaceFilePreview({
     return buildPreviewBlock({
       path: previewQuery.data?.resolvedPath ?? file.path,
       text: previewText,
+      languageHint: previewQuery.data?.languageHint ?? null,
       line: file.line,
     });
-  }, [file.line, file.path, isPreviewMode, previewQuery.data?.resolvedPath, previewText]);
-  const resolvedPath = previewQuery.data?.resolvedPath ?? file.path;
+  }, [
+    file.line,
+    file.path,
+    isPreviewMode,
+    previewQuery.data?.languageHint,
+    previewQuery.data?.resolvedPath,
+    previewText,
+  ]);
   const isTruncated = Boolean(previewQuery.data?.truncated);
   const breadcrumbBasePath = sessionProjectRoot ?? sessionWorkingDir;
   const breadcrumb = useMemo(
@@ -245,7 +305,10 @@ export function ChatSessionWorkspaceFilePreview({
 
   return (
     <div className="flex h-full min-h-0 flex-col bg-white">
-      <ChatSessionWorkspaceFileBreadcrumbs breadcrumb={breadcrumb} />
+      <ChatSessionWorkspaceFileBreadcrumbs
+        breadcrumb={breadcrumb}
+        onFileOpen={onFileOpen}
+      />
 
       <div className="flex-1 min-h-0 overflow-hidden">
         {file.viewMode === "diff" ? (
@@ -257,6 +320,8 @@ export function ChatSessionWorkspaceFilePreview({
             previewKind={previewKind}
             previewQuery={previewQuery}
             previewText={previewText}
+            previewUrl={previewUrl}
+            previewViewer={previewViewer}
           />
         )}
       </div>

package/src/features/chat/features/workspace/utils/chat-workspace-file-tab-persistence.utils.ts

@@ -0,0 +1,83 @@
+import type { ChatFilePreviewViewer } from '@nextclaw/agent-chat-ui';
+import type { ChatWorkspaceFileTab } from '@/features/chat/stores/chat-thread.store';
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return !!value && typeof value === 'object';
+}
+
+function normalizeOptionalString(value: unknown): string | null {
+  return typeof value === 'string' && value.trim().length > 0
+    ? value.trim()
+    : null;
+}
+
+function normalizeOptionalNumber(value: unknown): number | null {
+  return typeof value === 'number' && Number.isFinite(value)
+    ? value
+    : null;
+}
+
+function normalizeOptionalText(value: unknown): string | null {
+  return typeof value === 'string' ? value : null;
+}
+
+function normalizeFilePreviewViewer(value: unknown): ChatFilePreviewViewer | null {
+  return value === 'auto' || value === 'source' || value === 'rendered'
+    ? value
+    : null;
+}
+
+export function normalizePersistedWorkspaceFileTab(
+  value: unknown,
+): ChatWorkspaceFileTab | null {
+  if (
+    !isRecord(value)
+    || typeof value.key !== 'string'
+    || typeof value.path !== 'string'
+    || (value.viewMode !== 'preview' && value.viewMode !== 'diff')
+  ) {
+    return null;
+  }
+  const key = value.key.trim();
+  const path = value.path.trim();
+  if (!key || !path) {
+    return null;
+  }
+  return {
+    key,
+    parentSessionKey: normalizeOptionalString(value.parentSessionKey),
+    path,
+    label: normalizeOptionalString(value.label),
+    viewMode: value.viewMode,
+    previewViewer: normalizeFilePreviewViewer(value.previewViewer),
+    line: normalizeOptionalNumber(value.line),
+    column: normalizeOptionalNumber(value.column),
+    rawText: normalizeOptionalText(value.rawText),
+    beforeText: normalizeOptionalText(value.beforeText),
+    afterText: normalizeOptionalText(value.afterText),
+    patchText: normalizeOptionalText(value.patchText),
+    oldStartLine: normalizeOptionalNumber(value.oldStartLine),
+    newStartLine: normalizeOptionalNumber(value.newStartLine),
+  };
+}
+
+export function toPersistedWorkspaceFileTab(
+  tab: ChatWorkspaceFileTab,
+): ChatWorkspaceFileTab {
+  return {
+    key: tab.key,
+    parentSessionKey: tab.parentSessionKey,
+    path: tab.path,
+    label: tab.label,
+    viewMode: tab.viewMode,
+    previewViewer: tab.previewViewer,
+    line: tab.line,
+    column: tab.column,
+    rawText: tab.rawText,
+    beforeText: tab.beforeText,
+    afterText: tab.afterText,
+    patchText: tab.patchText,
+    oldStartLine: tab.oldStartLine,
+    newStartLine: tab.newStartLine,
+  };
+}

package/src/features/chat/managers/__tests__/chat-thread.manager.test.ts

@@ -155,6 +155,40 @@ describe('ChatThreadManager', () => {
     expect(uiManager.goToSession).not.toHaveBeenCalled();
   });
 
+  it('notifies the app layout coordinator after opening the workspace panel', () => {
+    const onWorkspacePanelOpened = vi.fn();
+    const manager = new ChatThreadManager(
+      createUiManager(),
+      {} as ConstructorParameters<typeof ChatThreadManager>[1],
+      onWorkspacePanelOpened,
+    );
+
+    manager.openFilePreview({
+      path: 'README.md',
+      label: 'README.md',
+      viewMode: 'preview',
+    });
+
+    expect(onWorkspacePanelOpened).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not notify the app layout coordinator when no workspace panel opens', () => {
+    const onWorkspacePanelOpened = vi.fn();
+    const manager = new ChatThreadManager(
+      createUiManager(),
+      {} as ConstructorParameters<typeof ChatThreadManager>[1],
+      onWorkspacePanelOpened,
+    );
+
+    manager.openFilePreview({
+      path: ' ',
+      label: 'README.md',
+      viewMode: 'preview',
+    });
+
+    expect(onWorkspacePanelOpened).not.toHaveBeenCalled();
+  });
+
   it('opens a side chat draft beside the selected parent session', () => {
     const uiManager = createUiManager({
       goToSession: vi.fn(),
@@ -293,6 +327,47 @@ describe('ChatThreadManager', () => {
       ]),
     );
   });
+
+});
+
+describe('ChatThreadManager workspace file tabs', () => {
+  it('keeps source and rendered previews for the same file as separate workspace tabs', () => {
+    const manager = new ChatThreadManager(
+      createUiManager(),
+      {} as ConstructorParameters<typeof ChatThreadManager>[1],
+    );
+
+    manager.openFilePreview({
+      path: 'demo.html',
+      label: 'demo.html',
+      viewMode: 'preview',
+      previewViewer: 'source',
+    });
+    manager.openFilePreview({
+      path: 'demo.html',
+      label: 'demo.html',
+      viewMode: 'preview',
+      previewViewer: 'rendered',
+    });
+
+    expect(useChatThreadStore.getState().snapshot).toMatchObject({
+      activeWorkspaceFileKey: 'parent-session-1::preview:rendered::demo.html',
+      workspaceFileTabs: [
+        {
+          key: 'parent-session-1::preview:rendered::demo.html',
+          path: 'demo.html',
+          viewMode: 'preview',
+          previewViewer: 'rendered',
+        },
+        {
+          key: 'parent-session-1::preview::demo.html',
+          path: 'demo.html',
+          viewMode: 'preview',
+          previewViewer: 'source',
+        },
+      ],
+    });
+  });
 });
 
 describe('ChatThreadManager workspace navigation', () => {
@@ -513,6 +588,7 @@ describe('ChatThreadManager showContent', () => {
           payload: {
             path: 'docs/example.md',
             line: 5,
+            viewer: 'rendered',
           },
         },
         title: 'Example',
@@ -522,12 +598,14 @@ describe('ChatThreadManager showContent', () => {
 
     expect(useChatThreadStore.getState().snapshot).toMatchObject({
       activeWorkspacePanelKind: 'file',
-      activeWorkspaceFileKey: 'parent-session-1::preview::docs/example.md',
+      activeWorkspaceFileKey: 'parent-session-1::preview:rendered::docs/example.md',
       workspaceFileTabs: [
         expect.objectContaining({
+          key: 'parent-session-1::preview:rendered::docs/example.md',
           path: 'docs/example.md',
           label: 'Example',
           line: 5,
+          previewViewer: 'rendered',
           viewMode: 'preview',
         }),
       ],

package/src/features/chat/managers/__tests__/chat-ui.manager.test.ts

@@ -68,6 +68,8 @@ describe('ChatUiManager content display', () => {
     });
 
     expect(docBrowserManager.open).toHaveBeenCalledWith('https://example.com/read', {
+      dedupeKey: 'browser:https://example.com/read',
+      kind: 'content',
       title: 'Example URL',
     });
   });

package/src/features/chat/managers/chat-thread.manager.ts

@@ -44,6 +44,7 @@ export class ChatThreadManager {
   constructor(
     private uiManager: ChatUiManager,
     private sessionListManager: ChatSessionListManager,
+    private readonly onWorkspacePanelOpened?: () => void,
   ) {}
 
   private hasSnapshotChanges = (patch: Partial<ChatThreadSnapshot>): boolean => {
@@ -110,14 +111,14 @@ export class ChatThreadManager {
       return null;
     }
     const normalizedParentSessionKey = parentSessionKey?.trim() || null;
-    const key =
-      `${normalizedParentSessionKey ?? 'draft'}::${action.viewMode}::${normalizedPath}`;
+    const tabViewIdentity = action.viewMode === 'preview' && action.previewViewer === 'rendered' ? 'preview:rendered' : action.viewMode;
     return {
-      key,
+      key: `${normalizedParentSessionKey ?? 'draft'}::${tabViewIdentity}::${normalizedPath}`,
       parentSessionKey: normalizedParentSessionKey,
       path: normalizedPath,
       label: action.label?.trim() || null,
       viewMode: action.viewMode,
+      previewViewer: action.previewViewer ?? null,
       line: action.line ?? null,
       column: action.column ?? null,
       rawText: action.rawText ?? null,
@@ -265,6 +266,7 @@ export class ChatThreadManager {
       useChatThreadStore.getState().setSnapshot(patch);
     }
     this.ensureWorkspaceParentRoute(parentSessionKey);
+    this.onWorkspacePanelOpened?.();
   };
 
   openSideChatDraft = (parentSessionKey?: string | null) => {
@@ -285,6 +287,7 @@ export class ChatThreadManager {
       key: activeSideChatDraft.draftKey,
     });
     this.ensureWorkspaceParentRoute(resolvedParentSessionKey);
+    this.onWorkspacePanelOpened?.();
   };
 
   materializeSideChatDraft = (params: {
@@ -322,6 +325,7 @@ export class ChatThreadManager {
       key: nextTab.key,
     });
     this.ensureWorkspaceParentRoute(parentSessionKey);
+    this.onWorkspacePanelOpened?.();
   };
 
   private openSessionFromToolAction = (action: ChatToolActionViewModel) => {
@@ -384,6 +388,7 @@ export class ChatThreadManager {
         path: request.target.payload.path,
         label: request.title,
         viewMode: 'preview',
+        previewViewer: request.target.payload.viewer,
         line: request.target.payload.line,
         column: request.target.payload.column,
       });
@@ -504,6 +509,7 @@ export class ChatThreadManager {
       kind: 'cron',
     });
     this.ensureWorkspaceParentRoute(parentSessionKey);
+    this.onWorkspacePanelOpened?.();
   };
 
   goBackWorkspacePanel = () => {

package/src/features/chat/managers/chat-ui.manager.ts

@@ -89,7 +89,11 @@ export class ChatUiManager {
   showContent = async (params: { target: ChatUiDisplayContentTarget; title?: string }) => {
     const { target, title } = params;
     if (target.type === 'url') {
-      this.docBrowserManager.open(target.payload.url, { title });
+      this.docBrowserManager.open(target.payload.url, {
+        dedupeKey: `browser:${target.payload.url}`,
+        kind: 'content',
+        title,
+      });
       return;
     }
     const { appId } = target.payload;

package/src/features/chat/presenters/chat.presenter.ts

@@ -16,7 +16,8 @@ export class ChatPresenter {
     this.chatQueryManager = new ChatQueryManager();
     this.chatThreadManager = new ChatThreadManager(
       this.chatUiManager,
-      this.chatSessionListManager
+      this.chatSessionListManager,
+      appPresenter.notifyRightPanelOpened,
     );
   }
 }

package/src/features/chat/stores/__tests__/chat-thread.store.test.ts

@@ -54,6 +54,7 @@ describe('chat thread workspace panel persistence', () => {
           path: 'README.md',
           label: 'README.md',
           viewMode: 'preview',
+          previewViewer: 'rendered',
           rawText: '# Hello',
           fullLines: [],
         },
@@ -83,6 +84,7 @@ describe('chat thread workspace panel persistence', () => {
     expect(persisted.state.snapshot.sessionKey).toBeUndefined();
     expect(persisted.state.snapshot.isSending).toBeUndefined();
     expect(persisted.state.snapshot.workspaceFileTabs[0].rawText).toBe('# Hello');
+    expect(persisted.state.snapshot.workspaceFileTabs[0].previewViewer).toBe('rendered');
     expect(persisted.state.snapshot.workspaceFileTabs[0].fullLines).toBeUndefined();
   });
 
@@ -138,6 +140,7 @@ describe('chat thread workspace panel persistence', () => {
                 path: 'README.md',
                 label: 'README.md',
                 viewMode: 'preview',
+                previewViewer: 'rendered',
                 rawText: '# Hello',
               },
               {
@@ -171,6 +174,7 @@ describe('chat thread workspace panel persistence', () => {
           path: 'README.md',
           label: 'README.md',
           viewMode: 'preview',
+          previewViewer: 'rendered',
           rawText: '# Hello',
         },
       ],