@nextclaw/ui 0.15.3 → 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,9 +21,14 @@ 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";
+import { useChatMessageLayoutStore } from "@/features/chat/stores/chat-message-layout.store";
+import { useNcpChatSelectedSession } from "@/features/chat/features/ncp/hooks/use-ncp-chat-derived-state";
 import { useI18n } from "@/app/components/i18n-provider";
+import { buildServerPathContentUrl } from "@/shared/lib/api";
 import { formatDateTime, t } from "@/shared/lib/i18n";
 
 type ChatMessageListContainerProps = {
@@ -59,6 +62,9 @@ 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;
@@ -85,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}`,
@@ -115,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}`,
@@ -141,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;
 }
 
@@ -167,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;
@@ -181,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,
   };
 }
 
@@ -196,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,
@@ -286,10 +279,36 @@ export function ChatMessageListContainer({
 }: ChatMessageListContainerProps) {
   const presenter = usePresenter();
   const { language } = useI18n();
-  const texts = useMemo(
-    () => buildChatMessageAdapterTexts(language),
-    [language],
+  const messageLayout = useChatMessageLayoutStore((state) => state.layout);
+  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 messages = useMemo(() => {
     const visibleRawMessages = rawMessages.filter(isVisibleChatMessage);
@@ -322,7 +341,11 @@ export function ChatMessageListContainer({
         texts,
       });
 
-      messageViewModelCache.set(message, { language, processSummaryLabel, viewModel });
+      messageViewModelCache.set(message, {
+        language,
+        processSummaryLabel,
+        viewModel,
+      });
       return [viewModel];
     });
   }, [language, rawMessages, texts]);
@@ -330,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) => {
@@ -396,6 +411,7 @@ export function ChatMessageListContainer({
         ) : (
           <ChatMessageList
             key={item.key}
+            layout={messageLayout}
             messages={item.messages}
             isSending={index === timelineItems.length - 1 ? isSending : false}
             hasAssistantDraft={hasAssistantDraft}
@@ -404,16 +420,10 @@ export function ChatMessageListContainer({
             onFileOpen={presenter.chatThreadManager.openFilePreview}
             onAttachmentOpen={handleAttachmentOpen}
             onInlineTokenClick={handleInlineTokenClick}
-            renderInlineDisplay={renderChatInlineDisplay}
-            renderToolAgent={(agentId) => (
-              <AgentIdentityAvatar
-                agentId={agentId}
-                className="h-4 w-4 shrink-0"
-              />
-            )}
-            renderPanelAppCard={(panelApp) => (
-              <ChatInlinePanelAppCard panelApp={panelApp} />
-            )}
+            resolveFileContentUrl={resolveFileContentUrl}
+            renderInlineDisplay={renderInlineDisplayWithFiles}
+            renderToolAgent={renderChatToolAgent}
+            renderPanelAppCard={renderChatPanelAppCard}
           />
         ),
       )}

package/src/features/chat/features/message/utils/__tests__/chat-message-file-operation.utils.test.ts

@@ -63,6 +63,36 @@ it("builds edit-file previews from structured args before the tool finishes", ()
   expect(editLines[1]).not.toHaveProperty("newLineNumber");
 });
 
+it("keeps incomplete edit-file arguments available before preview fields arrive", () => {
+  const partialArgs = '{"path":"src/app.ts","oldText":';
+  const adapted = adapt([
+    {
+      id: "assistant-partial-edit-input",
+      role: "assistant",
+      parts: [
+        {
+          type: "tool-invocation",
+          toolInvocation: {
+            status: ToolInvocationStatus.PARTIAL_CALL,
+            toolCallId: "edit-partial-1",
+            toolName: "edit_file",
+            args: partialArgs,
+          },
+        },
+      ],
+    },
+  ] as unknown as ChatMessageSource[]);
+
+  expect(adapted[0]?.parts[0]).toMatchObject({
+    type: "tool-card",
+    card: {
+      toolName: "edit_file",
+      input: partialArgs,
+      statusTone: "running",
+    },
+  });
+});
+
 it("uses structured edit-file result line numbers after the tool finishes", () => {
   const adapted = adapt([
     {

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/session/components/__tests__/chat-sidebar-session-item.test.tsx

@@ -0,0 +1,37 @@
+import { render, screen } from '@testing-library/react';
+import { expect, it, vi } from 'vitest';
+import { ChatSidebarSessionItem } from '@/features/chat/features/session/components/chat-sidebar-session-item';
+
+it('shows session actions only on hover or when an action owns focus', () => {
+  render(
+    <ChatSidebarSessionItem
+      sessionKey="session:current"
+      active
+      showUnreadDot={false}
+      context={{ icon: null, label: null }}
+      isPinned={false}
+      title="Current Task"
+      previewText="Preview"
+      trailingText="Now"
+      isEditing={false}
+      draftLabel="Current Task"
+      isSaving={false}
+      onSelect={vi.fn()}
+      onStartEditing={vi.fn()}
+      onDraftLabelChange={vi.fn()}
+      onSave={vi.fn()}
+      onCancel={vi.fn()}
+      onTogglePinned={vi.fn()}
+    />,
+  );
+
+  screen.getByText('Current Task').closest('button')?.focus();
+  const actions = screen.getByLabelText('Pin session').parentElement;
+
+  expect(actions?.className).toContain('opacity-0');
+  expect(actions?.className).toContain('group-hover/session:opacity-100');
+  expect(actions?.className).toContain('focus-within:opacity-100');
+  expect(actions?.className).not.toContain(
+    'group-focus-within/session:opacity-100',
+  );
+});

package/src/features/chat/features/session/components/chat-sidebar-project-groups.tsx

@@ -2,7 +2,8 @@ import { useMemo, useState, type ReactNode } from 'react';
 import { ChevronDown, ChevronRight, Folder, Pin, Plus } from 'lucide-react';
 import { usePresenter } from '@/features/chat/components/providers/chat-presenter.provider';
 import { ChatSessionTypeMenu } from "@/features/chat/features/session-type/components/chat-session-type-menu";
-import { Popover, PopoverContent, PopoverTrigger } from '@/shared/components/ui/popover';
+import { Popover, PopoverTrigger } from '@/shared/components/ui/popover';
+import { ChatPopoverContent } from '@/features/chat/components/chat-popover-content';
 import { IconActionButton } from '@/shared/components/ui/actions/icon-action-button';
 import type { ChatSessionTypeOption } from "@/features/chat/features/session-type/utils/chat-session-type.utils";
 import type { NcpSessionListItemView } from '@/features/chat/features/ncp/hooks/use-ncp-session-list-view';
@@ -107,7 +108,7 @@ export function ChatSidebarProjectGroups(props: ChatSidebarProjectGroupsProps) {
                         label={actionLabel}
                       />
                     </PopoverTrigger>
-                    <PopoverContent
+                    <ChatPopoverContent
                       align="end"
                       className="w-56 rounded-2xl border border-border bg-popover p-1.5 text-popover-foreground shadow-[0_24px_60px_-28px_rgba(15,23,42,0.38)]"
                     >
@@ -122,7 +123,7 @@ export function ChatSidebarProjectGroups(props: ChatSidebarProjectGroupsProps) {
                           setOpenProjectRoot(null);
                         }}
                       />
-                    </PopoverContent>
+                    </ChatPopoverContent>
                   </Popover>
                 ) : (
                   <IconActionButton

package/src/features/chat/features/session/components/chat-sidebar-session-item.tsx

@@ -169,12 +169,7 @@ function ChatSidebarSessionDisplayView({
             event.stopPropagation();
             onOpenChildSessions();
           }}
-          className={cn(
-            'absolute right-12 top-0 inline-flex h-6 items-center gap-1 rounded-md px-1.5 text-[10px] font-medium text-muted-foreground transition-colors hover:bg-black/10 hover:text-foreground',
-            active
-              ? 'opacity-100'
-              : 'opacity-0 group-hover/session:opacity-100 group-focus-within/session:opacity-100'
-          )}
+          className="pointer-events-none absolute right-12 top-0 inline-flex h-6 items-center gap-1 rounded-md px-1.5 text-[10px] font-medium text-muted-foreground opacity-0 transition-colors hover:bg-black/10 hover:text-foreground group-hover/session:pointer-events-auto group-hover/session:opacity-100 focus-visible:pointer-events-auto focus-visible:opacity-100"
           aria-label={t('chatSessionOpenChildSessions')}
           title={t('chatSessionOpenChildSessions')}
         >
@@ -183,11 +178,11 @@ function ChatSidebarSessionDisplayView({
         </button>
       ) : null}
       {runStatus ? (
-        <span className="absolute right-0 top-0 inline-flex h-6 w-6 items-center justify-center transition-opacity group-hover/session:opacity-0 group-focus-within/session:opacity-0">
+        <span className="absolute right-0 top-0 inline-flex h-6 w-6 items-center justify-center transition-opacity group-hover/session:opacity-0">
           <SessionRunBadge status={runStatus} />
         </span>
       ) : null}
-      <div className="absolute right-0 top-0 flex h-6 items-center gap-0.5 opacity-0 transition-opacity group-hover/session:opacity-100 group-focus-within/session:opacity-100">
+      <div className="pointer-events-none absolute right-0 top-0 flex h-6 items-center gap-0.5 opacity-0 transition-opacity group-hover/session:pointer-events-auto group-hover/session:opacity-100 focus-within:pointer-events-auto focus-within:opacity-100">
         <IconActionButton
           size="sm"
           tone="strong"