@nextclaw/ui 0.15.4 → 0.15.5

package/src/features/chat/features/message/components/__tests__/chat-message-list.container.test.tsx

@@ -19,6 +19,7 @@ const captures = vi.hoisted(() => ({
   openFilePreview: vi.fn(),
   handleToolAction: vi.fn(),
   showContent: vi.fn(),
+  filePreviewProps: [] as Array<{ showBreadcrumbs?: boolean }>,
 }));
 
 vi.mock("@nextclaw/agent-chat-ui", async (importOriginal) => {
@@ -61,12 +62,25 @@ vi.mock("@/shared/lib/i18n", () => ({
   t: (key: string) => key,
 }));
 
+vi.mock(
+  "@/features/chat/features/workspace/components/chat-session-workspace-file-preview",
+  () => ({
+    ChatSessionWorkspaceFilePreview: (props: {
+      showBreadcrumbs?: boolean;
+    }) => {
+      captures.filePreviewProps.push(props);
+      return <div data-testid="inline-workspace-file-preview" />;
+    },
+  }),
+);
+
 beforeEach(() => {
   captures.renders = [];
   captures.language = "en";
   captures.openFilePreview.mockReset();
   captures.handleToolAction.mockReset();
   captures.showContent.mockReset();
+  captures.filePreviewProps = [];
 });
 
 it("reuses adapted message references when the source message object is unchanged", () => {
@@ -484,22 +498,40 @@ it("passes the inline panel app renderer to the shared chat UI", () => {
   expect(captures.renders[captures.renders.length - 1]?.renderPanelAppCard).toEqual(expect.any(Function));
 });
 
-it("passes the inline display renderer to the shared chat UI", () => {
+it("renders inline file displays through the workspace file preview", () => {
   render(<ChatMessageListContainer messages={[]} isSending={false} />);
 
   const renderInlineDisplay =
     captures.renders[captures.renders.length - 1]?.renderInlineDisplay;
 
   expect(renderInlineDisplay).toEqual(expect.any(Function));
-  expect(
-    renderInlineDisplay?.({
-      target: {
-        type: "file",
-        payload: { path: "README.md" },
-      },
-      title: "README",
-    }),
-  ).toBeUndefined();
+  const rendered = renderInlineDisplay?.({
+    target: {
+      type: "file",
+      payload: { path: "preview.html", viewer: "rendered" },
+    },
+    title: "Preview",
+    description: "Rendered HTML",
+  });
+
+  if (!isValidElement<{ display?: unknown }>(rendered)) {
+    throw new Error("Expected inline file renderer to return a React element");
+  }
+  expect(rendered.props.display).toEqual({
+    target: {
+      type: "file",
+      payload: { path: "preview.html", viewer: "rendered" },
+    },
+    title: "Preview",
+    description: "Rendered HTML",
+  });
+
+  render(rendered);
+
+  expect(screen.getByText("Preview")).toBeTruthy();
+  expect(screen.getByText("preview.html")).toBeTruthy();
+  expect(screen.queryByText("Rendered HTML")).toBeNull();
+  expect(captures.filePreviewProps.at(-1)?.showBreadcrumbs).toBe(false);
 });
 
 it("keeps inline panel app displays expandable from the card header", () => {

package/src/features/chat/features/message/components/chat-inline-file-preview.tsx

@@ -0,0 +1,80 @@
+import type {
+  ChatFileOpenActionViewModel,
+  ChatInlineDisplayViewModel,
+} from "@nextclaw/agent-chat-ui";
+import { FileText } from "lucide-react";
+import { ChatSessionWorkspaceFilePreview } from "@/features/chat/features/workspace/components/chat-session-workspace-file-preview";
+import { createWorkspaceFileTab } from "@/features/chat/features/workspace/utils/chat-workspace-file-tab.utils";
+
+type ChatInlineFilePreviewProps = {
+  display: ChatInlineDisplayViewModel;
+  parentSessionKey: string | null;
+  sessionProjectRoot: string | null;
+  sessionWorkingDir: string | null;
+  onFileOpen: (action: ChatFileOpenActionViewModel) => void;
+};
+
+function readFileName(path: string): string {
+  return path.split(/[\\/]/).filter(Boolean).pop() ?? path;
+}
+
+export function ChatInlineFilePreview({
+  display,
+  parentSessionKey,
+  sessionProjectRoot,
+  sessionWorkingDir,
+  onFileOpen,
+}: ChatInlineFilePreviewProps) {
+  if (display.target.type !== "file") {
+    return null;
+  }
+  const { path, line, column, viewer } = display.target.payload;
+  const file = createWorkspaceFileTab(
+    {
+      path,
+      label: display.title,
+      viewMode: "preview",
+      previewViewer: viewer,
+      line,
+      column,
+    },
+    parentSessionKey,
+  );
+  if (!file) {
+    return null;
+  }
+  const title = display.title ?? readFileName(file.path);
+
+  return (
+    <section
+      className="my-2 w-full max-w-[48rem] overflow-hidden rounded-lg border border-border bg-card shadow-sm"
+      data-chat-inline-file-preview="true"
+      data-chat-message-wide-content="true"
+    >
+      <header className="border-b border-border bg-muted/45 px-3 py-2">
+        <div className="flex min-w-0 items-center gap-2 text-xs font-medium text-foreground">
+          <FileText
+            className="h-3.5 w-3.5 shrink-0 text-muted-foreground"
+            aria-hidden
+          />
+          <span className="truncate">{title}</span>
+        </div>
+        <p
+          className="mt-1 truncate font-mono text-[11px] font-normal text-muted-foreground"
+          title={file.path}
+        >
+          {file.path}
+        </p>
+      </header>
+      <div className="h-[420px] min-h-[240px] max-h-[min(60vh,420px)] overflow-hidden">
+        <ChatSessionWorkspaceFilePreview
+          file={file}
+          sessionProjectRoot={sessionProjectRoot}
+          sessionWorkingDir={sessionWorkingDir}
+          showBreadcrumbs={false}
+          onFileOpen={onFileOpen}
+        />
+      </div>
+    </section>
+  );
+}

package/src/features/chat/features/message/components/chat-message-list.container.tsx

@@ -4,13 +4,11 @@ import {
   type ChatInlineDisplayViewModel,
   type ChatInlineTokenViewModel,
   type ChatMessageViewModel,
+  type ChatPanelAppCardViewModel,
   ChatMessageList,
 } from "@nextclaw/agent-chat-ui";
 import { usePresenter } from "@/features/chat/components/providers/chat-presenter.provider";
-import {
-  adaptChatMessage,
-  type ChatMessageSource,
-} from "@/features/chat/features/message/utils/chat-message.utils";
+import { adaptChatMessage, type ChatMessageSource } from "@/features/chat/features/message/utils/chat-message.utils";
 import { buildChatMessageProcessSummary } from "@/features/chat/features/message/utils/chat-message-process-summary.utils";
 import {
   buildChatMessageAdapterTexts,
@@ -23,6 +21,7 @@ import {
   type ContextCompactionTimelineView,
 } from "@/features/chat/features/session/utils/ncp-session-context-metadata.utils";
 import { AgentIdentityAvatar } from "@/shared/components/common/agent-identity";
+import { ChatInlineFilePreview } from "@/features/chat/features/message/components/chat-inline-file-preview";
 import { ChatInlinePanelAppCard } from "@/features/chat/features/message/components/chat-inline-panel-app-card";
 import { useChatQueryStore } from "@/features/chat/stores/ncp-chat-query.store";
 import { useChatSessionListStore } from "@/features/chat/stores/chat-session-list.store";
@@ -62,6 +61,10 @@ function renderChatInlineDisplay(display: ChatInlineDisplayViewModel) {
     />
   );
 }
+
+const renderChatToolAgent = (agentId: string) => <AgentIdentityAvatar agentId={agentId} className="h-4 w-4 shrink-0" />;
+const renderChatPanelAppCard = (panelApp: ChatPanelAppCardViewModel) => <ChatInlinePanelAppCard panelApp={panelApp} />;
+
 type ContextInheritanceTimelineView = {
   sourceSessionId: string;
   inheritedMessageCount: number;
@@ -88,11 +91,7 @@ type ChatTimelineItem =
       inheritance: ContextInheritanceTimelineView;
     };
 
-function ChatContextCompactionDivider({
-  checkpoint,
-}: {
-  checkpoint: ContextCompactionTimelineView;
-}) {
+function ChatContextCompactionDivider({ checkpoint }: { checkpoint: ContextCompactionTimelineView }) {
   const title = [
     `${t("chatContextCompactionCoveredMessages")}: ${checkpoint.coveredSessionMessageCount}`,
     `${t("chatContextCompactionOriginalTokens")}: ${checkpoint.originalEstimatedTokens}`,
@@ -118,11 +117,7 @@ function ChatContextCompactionDivider({
   );
 }
 
-function ChatContextInheritanceDivider({
-  inheritance,
-}: {
-  inheritance: ContextInheritanceTimelineView;
-}) {
+function ChatContextInheritanceDivider({ inheritance }: { inheritance: ContextInheritanceTimelineView }) {
   const title = [
     `${t("chatContextInheritanceSourceSession")}: ${inheritance.sourceSessionId}`,
     `${t("chatContextInheritanceMessages")}: ${inheritance.inheritedMessageCount}`,
@@ -144,20 +139,12 @@ function resolveCompactionBoundaryIndex(params: {
   visibleRawMessages: readonly NcpMessage[];
   rawMessageId: string;
 }): number {
-  const {
-    rawMessageId,
-    rawMessages,
-    visibleRawMessages,
-  } = params;
-  const physicalIndex = rawMessages.findIndex(
-    (message) => message.id === rawMessageId,
-  );
+  const { rawMessageId, rawMessages, visibleRawMessages } = params;
+  const physicalIndex = rawMessages.findIndex((message) => message.id === rawMessageId);
   if (physicalIndex < 0) {
     return visibleRawMessages.length - 1;
   }
-  const previousVisibleCount = rawMessages
-    .slice(0, physicalIndex)
-    .filter(isVisibleChatMessage).length;
+  const previousVisibleCount = rawMessages.slice(0, physicalIndex).filter(isVisibleChatMessage).length;
   return previousVisibleCount - 1;
 }
 
@@ -170,9 +157,7 @@ function isVisibleChatMessage(message: NcpMessage): boolean {
   return !readContextCompactionTimeline(message) && !readInheritedSourceSessionId(message);
 }
 
-function resolveContextInheritanceBoundary(
-  messages: readonly NcpMessage[],
-): ContextInheritanceTimelineBoundary | null {
+function resolveContextInheritanceBoundary(messages: readonly NcpMessage[]): ContextInheritanceTimelineBoundary | null {
   const boundaryIndex = messages.findIndex((message) => readInheritedSourceSessionId(message));
   if (boundaryIndex < 0) {
     return null;
@@ -184,7 +169,8 @@ function resolveContextInheritanceBoundary(
   return {
     boundaryIndex: messages.slice(0, boundaryIndex).filter(isVisibleChatMessage).length,
     sourceSessionId,
-    inheritedMessageCount: messages.filter((message) => readInheritedSourceSessionId(message) === sourceSessionId).length,
+    inheritedMessageCount: messages.filter((message) => readInheritedSourceSessionId(message) === sourceSessionId)
+      .length,
   };
 }
 
@@ -199,8 +185,12 @@ function buildTimelineItems(params: {
       checkpoint: readContextCompactionTimeline(message),
     }))
     .filter(
-      (entry): entry is { rawMessageId: string; checkpoint: ContextCompactionTimelineView } =>
-        Boolean(entry.checkpoint),
+      (
+        entry,
+      ): entry is {
+        rawMessageId: string;
+        checkpoint: ContextCompactionTimelineView;
+      } => Boolean(entry.checkpoint),
     )
     .map((entry) => ({
       key: entry.rawMessageId,
@@ -290,19 +280,35 @@ export function ChatMessageListContainer({
   const presenter = usePresenter();
   const { language } = useI18n();
   const messageLayout = useChatMessageLayoutStore((state) => state.layout);
-  const selectedSessionKey = useChatSessionListStore(
-    (state) => state.snapshot.selectedSessionKey,
-  );
+  const selectedSessionKey = useChatSessionListStore((state) => state.snapshot.selectedSessionKey);
   const selectedSession = useNcpChatSelectedSession(selectedSessionKey);
   const localFileBasePath = selectedSession?.workingDir ?? selectedSession?.projectRoot ?? null;
+  const renderInlineDisplayWithFiles = useCallback(
+    (display: ChatInlineDisplayViewModel) => {
+      const panelAppDisplay = renderChatInlineDisplay(display);
+      if (panelAppDisplay) {
+        return panelAppDisplay;
+      }
+      if (display.target.type === "file") {
+        return (
+          <ChatInlineFilePreview
+            display={display}
+            parentSessionKey={selectedSessionKey}
+            sessionProjectRoot={selectedSession?.projectRoot ?? null}
+            sessionWorkingDir={localFileBasePath}
+            onFileOpen={presenter.chatThreadManager.openFilePreview}
+          />
+        );
+      }
+      return undefined;
+    },
+    [localFileBasePath, presenter.chatThreadManager, selectedSession?.projectRoot, selectedSessionKey],
+  );
   const resolveFileContentUrl = useCallback(
     (action: { path: string }) => buildServerPathContentUrl(action.path, localFileBasePath),
     [localFileBasePath],
   );
-  const texts = useMemo(
-    () => buildChatMessageAdapterTexts(language),
-    [language],
-  );
+  const texts = useMemo(() => buildChatMessageAdapterTexts(language), [language]);
 
   const messages = useMemo(() => {
     const visibleRawMessages = rawMessages.filter(isVisibleChatMessage);
@@ -335,7 +341,11 @@ export function ChatMessageListContainer({
         texts,
       });
 
-      messageViewModelCache.set(message, { language, processSummaryLabel, viewModel });
+      messageViewModelCache.set(message, {
+        language,
+        processSummaryLabel,
+        viewModel,
+      });
       return [viewModel];
     });
   }, [language, rawMessages, texts]);
@@ -343,20 +353,12 @@ export function ChatMessageListContainer({
   const hasAssistantDraft = useMemo(
     () =>
       messages.some(
-        (message) =>
-          message.role === "assistant" &&
-          (message.status === "streaming" || message.status === "pending"),
+        (message) => message.role === "assistant" && (message.status === "streaming" || message.status === "pending"),
       ),
     [messages],
   );
-  const messageTexts = useMemo(
-    () => buildChatMessageTexts(language),
-    [language],
-  );
-  const timelineItems = useMemo(
-    () => buildTimelineItems({ rawMessages, messages }),
-    [messages, rawMessages],
-  );
+  const messageTexts = useMemo(() => buildChatMessageTexts(language), [language]);
+  const timelineItems = useMemo(() => buildTimelineItems({ rawMessages, messages }), [messages, rawMessages]);
   const sessionSkillsQuery = useChatQueryStore((state) => state.snapshot.sessionSkillsQuery);
   const handleInlineTokenClick = useCallback(
     (token: ChatInlineTokenViewModel) => {
@@ -419,16 +421,9 @@ export function ChatMessageListContainer({
             onAttachmentOpen={handleAttachmentOpen}
             onInlineTokenClick={handleInlineTokenClick}
             resolveFileContentUrl={resolveFileContentUrl}
-            renderInlineDisplay={renderChatInlineDisplay}
-            renderToolAgent={(agentId) => (
-              <AgentIdentityAvatar
-                agentId={agentId}
-                className="h-4 w-4 shrink-0"
-              />
-            )}
-            renderPanelAppCard={(panelApp) => (
-              <ChatInlinePanelAppCard panelApp={panelApp} />
-            )}
+            renderInlineDisplay={renderInlineDisplayWithFiles}
+            renderToolAgent={renderChatToolAgent}
+            renderPanelAppCard={renderChatPanelAppCard}
           />
         ),
       )}

package/src/features/chat/features/message/utils/chat-message-texts.utils.ts

@@ -106,6 +106,8 @@ export function buildChatMessageTexts(
     copiedCodeLabel: t("chatCodeCopied"),
     copyMessageLabel: t("chatMessageCopy"),
     copiedMessageLabel: t("chatMessageCopied"),
+    mermaidDiagramLabel: t("chatMermaidDiagram"),
+    mermaidRenderErrorLabel: t("chatMermaidRenderError"),
     typingLabel: t("chatTyping"),
     reasoningCharacterCountTemplates: {
       inProgress: t("chatReasoningInProgressCharacterCount"),

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

@@ -6,6 +6,7 @@ import type {
 } from "@nextclaw/agent-chat-ui";
 import { ChatSessionWorkspaceFilePreview } from "@/features/chat/features/workspace/components/chat-session-workspace-file-preview";
 import type { ChatWorkspaceFileTab } from "@/features/chat/stores/chat-thread.store";
+import type { ServerPathReadView } from "@/shared/lib/api";
 import { t } from "@/shared/lib/i18n";
 
 const serverPathReadMock = vi.fn();
@@ -22,15 +23,10 @@ type RenderWorkspaceFilePreviewOptions = {
   refreshVersion?: number;
   sessionProjectRoot?: string | null;
   sessionWorkingDir?: string | null;
+  showBreadcrumbs?: boolean;
 };
 
-type TextReadDataOverrides = {
-  kind?: "text" | "markdown" | "binary";
-  languageHint?: string;
-  resolvedPath?: string;
-  text?: string;
-  truncated?: boolean;
-};
+type TextReadDataOverrides = Partial<ServerPathReadView>;
 
 vi.mock("@/shared/hooks/use-server-path-read", () => ({
   useServerPathRead: (...args: unknown[]) => serverPathReadMock(...args),
@@ -97,6 +93,7 @@ function mockTextRead(overrides: TextReadDataOverrides = {}) {
     data: {
       kind: "text",
       resolvedPath: "/tmp/example.ts",
+      startLine: 1,
       text: "const answer = 42;\n",
       truncated: false,
       ...overrides,
@@ -110,6 +107,7 @@ function renderWorkspaceFilePreview({
   refreshVersion,
   sessionProjectRoot = "/tmp",
   sessionWorkingDir = "/tmp",
+  showBreadcrumbs,
 }: RenderWorkspaceFilePreviewOptions = {}) {
   const view = render(
     <ChatSessionWorkspaceFilePreview
@@ -117,6 +115,7 @@ function renderWorkspaceFilePreview({
       sessionProjectRoot={sessionProjectRoot}
       sessionWorkingDir={sessionWorkingDir}
       refreshVersion={refreshVersion}
+      showBreadcrumbs={showBreadcrumbs}
       onFileOpen={onFileOpen}
     />,
   );
@@ -525,11 +524,16 @@ describe("ChatSessionWorkspaceFilePreview text rendering", () => {
     ).toBe("workspace");
   });
 
-  it("passes server language hints to the workspace code surface", () => {
-    mockTextRead({ languageHint: "js", resolvedPath: "/tmp/example.js" });
+  it("passes server language hints and keeps location out of breadcrumbs", () => {
+    mockTextRead({
+      languageHint: "js",
+      resolvedPath: "/tmp/example.js",
+    });
     renderWorkspaceFilePreview({
       file: {
+        column: 4,
         label: "example.js",
+        line: 12,
         path: "/tmp/example.js",
         viewMode: "preview",
       },
@@ -540,6 +544,7 @@ describe("ChatSessionWorkspaceFilePreview text rendering", () => {
         .getByTestId("file-code-surface")
         .getAttribute("data-language-hint"),
     ).toBe("js");
+    expect(screen.queryByText("L12:4")).toBeNull();
   });
 
   it("renders Markdown by default and keeps source view explicit", () => {
@@ -761,6 +766,14 @@ describe("ChatSessionWorkspaceFilePreview text rendering", () => {
 });
 
 describe("ChatSessionWorkspaceFilePreview breadcrumbs", () => {
+  it("can hide workspace breadcrumbs for inline placements", () => {
+    mockTextRead();
+    renderWorkspaceFilePreview({ showBreadcrumbs: false });
+
+    expect(screen.queryByTestId("workspace-file-breadcrumbs")).toBeNull();
+    expect(screen.getByTestId("file-code-surface")).toBeTruthy();
+  });
+
   it("renders project-relative breadcrumbs when the file is inside the workspace", () => {
     mockTextRead({ resolvedPath: "/tmp/workspace/src/example.ts" });
     renderWorkspaceFilePreview({
@@ -832,21 +845,6 @@ describe("ChatSessionWorkspaceFilePreview breadcrumbs", () => {
     ).toContain("h-6");
   });
 
-  it("keeps line and truncation metadata without the duplicated type badge", () => {
-    mockTextRead({ truncated: true });
-    renderWorkspaceFilePreview({
-      file: {
-        viewMode: "preview",
-        line: 12,
-        column: 4,
-      },
-    });
-
-    expect(screen.getByText("L12:4")).toBeTruthy();
-    expect(screen.getByText(t("chatWorkspacePreviewTruncated"))).toBeTruthy();
-    expect(screen.queryByText(t("chatWorkspacePreview"))).toBeNull();
-  });
-
   it("uses the session working directory as the base path when no project root is set", () => {
     mockTextRead({
       resolvedPath: "/tmp/agent-workspace/AGENTS.md",

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

@@ -9,7 +9,7 @@ const mocks = vi.hoisted(() => ({
   syncVisibleWorkspaceSelection: vi.fn(),
   selectChildSessionDetail: vi.fn(),
   selectWorkspaceFile: vi.fn(),
-  closeWorkspaceFile: vi.fn(),
+  closeWorkspaceTab: vi.fn(),
   openSessionCronPanel: vi.fn(),
   goBackWorkspacePanel: vi.fn(),
   goForwardWorkspacePanel: vi.fn(),
@@ -72,6 +72,7 @@ function renderPanel(displayMode: "docked" | "overlay" = "docked") {
       activeSideChatDraft={null}
       workspaceFileTabs={[fileTab]}
       activeWorkspaceFileKey={fileTab.key}
+      closedWorkspaceTabEntries={[]}
       workspaceNavigationHistory={[{ kind: "file", key: fileTab.key }]}
       workspaceNavigationHistoryIndex={0}
       activePanelKind="file"

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

@@ -12,15 +12,10 @@ import type {
 import { t } from "@/shared/lib/i18n";
 import { cn } from "@/shared/lib/utils";
 
-function WorkspaceBreadcrumbMetaChip({ tone = "neutral", value }: { tone?: "neutral" | "warning"; value: string }) {
+function WorkspaceBreadcrumbWarningChip({ value }: { value: string }) {
   return (
     <span
-      className={cn(
-        "inline-flex h-5 items-center rounded-sm border px-1.5 text-[10px] font-medium leading-none",
-        tone === "warning"
-          ? "border-amber-200 bg-amber-50 text-amber-700"
-          : "border-gray-200 bg-gray-50 text-gray-500",
-      )}
+      className="inline-flex h-5 items-center rounded-sm border border-amber-200 bg-amber-50 px-1.5 text-[10px] font-medium leading-none text-amber-700"
     >
       {value}
     </span>
@@ -116,17 +111,11 @@ export function ChatSessionWorkspaceFileBreadcrumbs({
           ))}
         </div>
 
-        {breadcrumb.locationLabel || breadcrumb.truncated ? (
+        {breadcrumb.truncated ? (
           <div className="flex shrink-0 flex-wrap items-center justify-end gap-1">
-            {breadcrumb.locationLabel ? (
-              <WorkspaceBreadcrumbMetaChip value={breadcrumb.locationLabel} />
-            ) : null}
-            {breadcrumb.truncated ? (
-              <WorkspaceBreadcrumbMetaChip
-                tone="warning"
-                value={t("chatWorkspacePreviewTruncated")}
-              />
-            ) : null}
+            <WorkspaceBreadcrumbWarningChip
+              value={t("chatWorkspacePreviewTruncated")}
+            />
           </div>
         ) : null}
       </div>