@nextclaw/ui 0.15.5 → 0.15.7

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

@@ -1,4 +1,4 @@
-import { render, screen } from "@testing-library/react";
+import { fireEvent, render, screen } from "@testing-library/react";
 import { isValidElement } from "react";
 import type { NcpMessage } from "@nextclaw/ncp";
 import { beforeEach, expect, it, vi } from "vitest";
@@ -20,6 +20,7 @@ const captures = vi.hoisted(() => ({
   handleToolAction: vi.fn(),
   showContent: vi.fn(),
   filePreviewProps: [] as Array<{ showBreadcrumbs?: boolean }>,
+  selectedSession: null as null | { projectRoot: string; workingDir?: string | null },
 }));
 
 vi.mock("@nextclaw/agent-chat-ui", async (importOriginal) => {
@@ -31,6 +32,7 @@ vi.mock("@nextclaw/agent-chat-ui", async (importOriginal) => {
       onToolAction?: (action: unknown) => void;
       onFileOpen?: (action: unknown) => void;
       onAttachmentOpen?: (file: unknown) => void;
+      onInlineTokenClick?: (token: unknown) => void;
       renderInlineDisplay?: (display: unknown) => unknown;
       renderPanelAppCard?: (panelApp: unknown) => unknown;
       texts?: Record<string, unknown>;
@@ -53,6 +55,10 @@ vi.mock("@/features/chat/components/providers/chat-presenter.provider", () => ({
   }),
 }));
 
+vi.mock("@/features/chat/features/ncp/hooks/use-ncp-chat-derived-state", () => ({
+  useNcpChatSelectedSession: () => captures.selectedSession,
+}));
+
 vi.mock("@/app/components/i18n-provider", () => ({
   useI18n: () => ({ language: captures.language }),
 }));
@@ -81,6 +87,7 @@ beforeEach(() => {
   captures.handleToolAction.mockReset();
   captures.showContent.mockReset();
   captures.filePreviewProps = [];
+  captures.selectedSession = null;
 });
 
 it("reuses adapted message references when the source message object is unchanged", () => {
@@ -100,9 +107,7 @@ it("reuses adapted message references when the source message object is unchange
   const firstMessages =
     captures.renders[captures.renders.length - 1]?.messages ?? [];
 
-  rerender(
-    <ChatMessageListContainer messages={[message]} isSending={false} />,
-  );
+  rerender(<ChatMessageListContainer messages={[message]} isSending={false} />);
 
   const secondMessages =
     captures.renders[captures.renders.length - 1]?.messages ?? [];
@@ -223,7 +228,7 @@ it("adds a completed assistant process summary without inventing a duration", ()
         toolCallId: "tool-1",
         toolName: "exec_command",
         state: "result",
-        args: "{\"cmd\":\"git status\"}",
+        args: '{"cmd":"git status"}',
         result: "clean",
       },
       {
@@ -270,7 +275,7 @@ it("derives completed assistant process duration from message lifecycle", () =>
         toolCallId: "tool-1",
         toolName: "exec_command",
         state: "result",
-        args: "{\"cmd\":\"git status\"}",
+        args: '{"cmd":"git status"}',
         result: "clean",
       },
       {
@@ -322,6 +327,53 @@ it("wires markdown file link actions to the workspace file preview manager", ()
   expect(captures.openFilePreview).toHaveBeenCalledWith(action);
 });
 
+it("opens workspace file and directory tokens from the message", () => {
+  captures.selectedSession = {
+    projectRoot: "/tmp/project",
+    workingDir: "/tmp/project/packages/ui",
+  };
+  render(<ChatMessageListContainer messages={[]} isSending={false} />);
+  const onInlineTokenClick = captures.renders[captures.renders.length - 1]?.onInlineTokenClick;
+
+  onInlineTokenClick?.({
+    kind: "workspace_file",
+    key: "docs/guide.md",
+    label: "guide.md",
+    rawText: "@file:docs%2Fguide.md",
+  });
+  onInlineTokenClick?.({
+    kind: "workspace_directory",
+    key: "packages/server",
+    label: "server",
+    rawText: "@folder:packages%2Fserver",
+  });
+
+  expect(captures.openFilePreview).toHaveBeenNthCalledWith(1, {
+    path: "/tmp/project/docs/guide.md",
+    label: "guide.md",
+    viewMode: "preview",
+  });
+  expect(captures.openFilePreview).toHaveBeenNthCalledWith(2, {
+    path: "/tmp/project/packages/server",
+    label: "server",
+    viewMode: "preview",
+  });
+});
+
+it("opens panel app tokens through the existing content owner", () => {
+  render(<ChatMessageListContainer messages={[]} isSending={false} />);
+  captures.renders[captures.renders.length - 1]?.onInlineTokenClick?.({
+    kind: "panel_app",
+    key: "task-board",
+    label: "Task Board",
+    rawText: "@panel-app:task-board",
+  });
+
+  expect(captures.showContent).toHaveBeenCalledWith({
+    target: { type: "panel_app", payload: { appId: "task-board" } },
+  });
+});
+
 it("opens message attachments in the workspace file preview", () => {
   const message = {
     id: "assistant-attachment",
@@ -385,12 +437,16 @@ it("renders context inheritance as a divider without repeating inherited message
       isSending={false}
     />,
   );
-  const renderedMessages = captures.renders.flatMap((rendered) => rendered.messages);
+  const renderedMessages = captures.renders.flatMap(
+    (rendered) => rendered.messages,
+  );
   const renderedPayload = JSON.stringify(renderedMessages);
 
   expect(screen.getByText("chatContextInheritanceInherited")).toBeTruthy();
   expect(container.querySelector('[title*="parent-session"]')).toBeTruthy();
-  expect(container.querySelector('[title*="chatContextInheritanceMessages: 1"]')).toBeTruthy();
+  expect(
+    container.querySelector('[title*="chatContextInheritanceMessages: 1"]'),
+  ).toBeTruthy();
   expect(renderedPayload).toContain("child visible request");
   expect(renderedPayload).not.toContain("parent context");
 });
@@ -416,7 +472,7 @@ it("keeps Hermes tool invocation parts as tool cards instead of flattening them
         toolCallId: "hermes-inline-tool-1",
         toolName: "search_files",
         state: "call",
-        args: "{\"pattern\":\"*.py\"}",
+        args: '{"pattern":"*.py"}',
       },
       {
         type: "text",
@@ -495,10 +551,12 @@ it("delegates tool actions to the chat thread manager owner", () => {
 it("passes the inline panel app renderer to the shared chat UI", () => {
   render(<ChatMessageListContainer messages={[]} isSending={false} />);
 
-  expect(captures.renders[captures.renders.length - 1]?.renderPanelAppCard).toEqual(expect.any(Function));
+  expect(
+    captures.renders[captures.renders.length - 1]?.renderPanelAppCard,
+  ).toEqual(expect.any(Function));
 });
 
-it("renders inline file displays through the workspace file preview", () => {
+it("connects inline HTML actions to the chat thread manager", () => {
   render(<ChatMessageListContainer messages={[]} isSending={false} />);
 
   const renderInlineDisplay =
@@ -514,24 +572,30 @@ it("renders inline file displays through the workspace file preview", () => {
     description: "Rendered HTML",
   });
 
-  if (!isValidElement<{ display?: unknown }>(rendered)) {
+  if (!isValidElement(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);
+  fireEvent.click(screen.getByLabelText("chatPanelCardExpand"));
+  fireEvent.click(screen.getByLabelText("chatWorkspaceOpenSource"));
+
+  expect(captures.openFilePreview).toHaveBeenNthCalledWith(1, {
+    path: "preview.html",
+    label: "Preview",
+    viewMode: "preview",
+    previewViewer: "rendered",
+    line: undefined,
+    column: undefined,
+  });
+  expect(captures.openFilePreview).toHaveBeenNthCalledWith(2, {
+    path: "preview.html",
+    label: "Preview",
+    viewMode: "preview",
+    previewViewer: "source",
+    line: undefined,
+    column: undefined,
+  });
 });
 
 it("keeps inline panel app displays expandable from the card header", () => {
@@ -548,7 +612,9 @@ it("keeps inline panel app displays expandable from the card header", () => {
   });
 
   if (!isValidElement<{ showExpandAction?: boolean }>(rendered)) {
-    throw new Error("Expected inline panel app renderer to return a React element");
+    throw new Error(
+      "Expected inline panel app renderer to return a React element",
+    );
   }
   expect(rendered.props.showExpandAction).toBeUndefined();
 });

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

@@ -1,10 +1,14 @@
+import { useState } from "react";
 import type {
   ChatFileOpenActionViewModel,
   ChatInlineDisplayViewModel,
 } from "@nextclaw/agent-chat-ui";
-import { FileText } from "lucide-react";
+import { Code2, FileText, PanelRightOpen } 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";
+import { IconActionButton } from "@/shared/components/ui/actions/icon-action-button";
+import { t } from "@/shared/lib/i18n";
+import { cn } from "@/shared/lib/utils";
 
 type ChatInlineFilePreviewProps = {
   display: ChatInlineDisplayViewModel;
@@ -14,9 +18,7 @@ type ChatInlineFilePreviewProps = {
   onFileOpen: (action: ChatFileOpenActionViewModel) => void;
 };
 
-function readFileName(path: string): string {
-  return path.split(/[\\/]/).filter(Boolean).pop() ?? path;
-}
+const INLINE_HTML_MIN_HEIGHT = 240;
 
 export function ChatInlineFilePreview({
   display,
@@ -25,6 +27,9 @@ export function ChatInlineFilePreview({
   sessionWorkingDir,
   onFileOpen,
 }: ChatInlineFilePreviewProps) {
+  const [htmlContentHeight, setHtmlContentHeight] = useState<number | null>(
+    null,
+  );
   if (display.target.type !== "file") {
     return null;
   }
@@ -43,35 +48,99 @@ export function ChatInlineFilePreview({
   if (!file) {
     return null;
   }
-  const title = display.title ?? readFileName(file.path);
+  const title =
+    file.label ?? file.path.split(/[\\/]/).filter(Boolean).pop() ?? file.path;
+  const isRenderedHtml =
+    file.previewViewer === "rendered" && /\.html?$/i.test(file.path);
+  const openInWorkspace = (previewViewer: "rendered" | "source") => {
+    onFileOpen({
+      path: file.path,
+      label: file.label ?? undefined,
+      viewMode: "preview",
+      previewViewer,
+      line: file.line ?? undefined,
+      column: file.column ?? undefined,
+    });
+  };
 
   return (
     <section
-      className="my-2 w-full max-w-[48rem] overflow-hidden rounded-lg border border-border bg-card shadow-sm"
+      className={cn(
+        "my-2 w-full max-w-[48rem]",
+        isRenderedHtml
+          ? "group/inline-html relative overflow-visible"
+          : "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}
+      {isRenderedHtml ? (
+        <div
+          className={cn(
+            "pointer-events-none absolute bottom-full left-1/2 z-10 -translate-x-1/2 pb-2 opacity-0 transition-opacity duration-150",
+            "group-hover/inline-html:pointer-events-auto group-hover/inline-html:opacity-100 group-focus-within/inline-html:pointer-events-auto group-focus-within/inline-html:opacity-100",
+          )}
+          data-chat-inline-file-actions="true"
         >
-          {file.path}
-        </p>
-      </header>
-      <div className="h-[420px] min-h-[240px] max-h-[min(60vh,420px)] overflow-hidden">
+          <div
+            className="flex items-center gap-0.5 rounded-lg bg-background/95 p-0.5 shadow-md ring-1 ring-border/60 backdrop-blur-sm"
+            data-chat-inline-file-actions-surface="true"
+          >
+            <IconActionButton
+              size="sm"
+              icon={<PanelRightOpen className="h-3.5 w-3.5" />}
+              label={t("chatPanelCardExpand")}
+              tooltipSide="top"
+              onClick={() => openInWorkspace("rendered")}
+            />
+            <IconActionButton
+              size="sm"
+              icon={<Code2 className="h-3.5 w-3.5" />}
+              label={t("chatWorkspaceOpenSource")}
+              tooltipSide="top"
+              onClick={() => openInWorkspace("source")}
+            />
+          </div>
+        </div>
+      ) : (
+        <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={cn(
+          "min-h-[240px] overflow-hidden",
+          isRenderedHtml
+            ? "h-[240px] max-h-[min(80vh,720px)] rounded-lg"
+            : "h-[420px] max-h-[min(60vh,420px)]",
+        )}
+        data-chat-inline-file-viewport="true"
+        style={
+          isRenderedHtml && htmlContentHeight
+            ? { height: Math.max(INLINE_HTML_MIN_HEIGHT, htmlContentHeight) }
+            : undefined
+        }
+      >
         <ChatSessionWorkspaceFilePreview
           file={file}
           sessionProjectRoot={sessionProjectRoot}
           sessionWorkingDir={sessionWorkingDir}
           showBreadcrumbs={false}
+          onHtmlContentHeightChange={
+            isRenderedHtml ? setHtmlContentHeight : undefined
+          }
           onFileOpen={onFileOpen}
         />
       </div>

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

@@ -14,7 +14,10 @@ import {
   buildChatMessageAdapterTexts,
   buildChatMessageTexts,
 } from "@/features/chat/features/message/utils/chat-message-texts.utils";
-import { readInlineTokensFromMetadata } from "@/features/chat/features/input/utils/chat-inline-token.utils";
+import {
+  readInlineTokensFromMetadata,
+  resolveWorkspaceReferencePath,
+} from "@/features/chat/features/input/utils/chat-inline-token.utils";
 import { adaptNcpMessageToUiMessage } from "@/features/chat/features/session/utils/ncp-session-adapter.utils";
 import {
   readContextCompactionTimeline,
@@ -362,9 +365,27 @@ export function ChatMessageListContainer({
   const sessionSkillsQuery = useChatQueryStore((state) => state.snapshot.sessionSkillsQuery);
   const handleInlineTokenClick = useCallback(
     (token: ChatInlineTokenViewModel) => {
-      if (token.kind !== "skill") {
+      if (token.kind === "panel_app") {
+        void presenter.chatUiManager.showContent({
+          target: { type: "panel_app", payload: { appId: token.key } },
+        });
+        return;
+      }
+      if (token.kind === "workspace_file" || token.kind === "workspace_directory") {
+        const path = resolveWorkspaceReferencePath({
+          projectRoot: selectedSession?.projectRoot,
+          relativePath: token.key,
+        });
+        if (path) {
+          presenter.chatThreadManager.openFilePreview({
+            path,
+            label: token.label,
+            viewMode: "preview",
+          });
+        }
         return;
       }
+      if (token.kind !== "skill") return;
       const skillKey = token.key.trim();
       if (!skillKey) {
         return;
@@ -382,7 +403,7 @@ export function ChatMessageListContainer({
         previewViewer: "rendered",
       });
     },
-    [presenter.chatThreadManager, sessionSkillsQuery],
+    [presenter.chatThreadManager, presenter.chatUiManager, selectedSession?.projectRoot, sessionSkillsQuery],
   );
   const handleAttachmentOpen = useCallback(
     (file: { label: string; mimeType: string; dataUrl?: string; sizeBytes?: number; isImage: boolean }) => {

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

@@ -107,6 +107,7 @@ export function buildChatMessageTexts(
     copyMessageLabel: t("chatMessageCopy"),
     copiedMessageLabel: t("chatMessageCopied"),
     mermaidDiagramLabel: t("chatMermaidDiagram"),
+    mermaidLoadingLabel: t("chatMermaidLoading"),
     mermaidRenderErrorLabel: t("chatMermaidRenderError"),
     typingLabel: t("chatTyping"),
     reasoningCharacterCountTemplates: {

package/src/features/chat/features/ncp/hooks/__tests__/use-hydrated-ncp-agent.test.tsx

@@ -1,19 +1,57 @@
-import { renderHook, waitFor } from "@testing-library/react";
-import type { NcpAgentClientEndpoint } from "@nextclaw/ncp";
-import { useHydratedNcpAgent } from "@nextclaw/ncp-react";
+import { act, renderHook, waitFor } from "@testing-library/react";
+import { NcpEventType, type NcpAgentClientEndpoint } from "@nextclaw/ncp";
+import { useHydratedNcpAgent, useNcpAgentRuntime } from "@nextclaw/ncp-react";
+import { DefaultNcpAgentConversationStateManager } from "@nextclaw/ncp-toolkit";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 
 const mocks = vi.hoisted(() => ({
+  send: vi.fn(),
   stream: vi.fn(),
   stop: vi.fn(),
 }));
 
 describe("useHydratedNcpAgent", () => {
   beforeEach(() => {
+    mocks.send.mockReset();
     mocks.stream.mockReset();
     mocks.stop.mockReset();
   });
 
+  it("clears a draft conversation error when a valid retry starts", async () => {
+    const client = {
+      send: mocks.send.mockResolvedValue(null),
+      stop: mocks.stop.mockResolvedValue(undefined),
+      stream: mocks.stream.mockResolvedValue(undefined),
+      subscribe: vi.fn(() => () => {}),
+    } as unknown as NcpAgentClientEndpoint;
+    const manager = new DefaultNcpAgentConversationStateManager();
+    const { result } = renderHook(() =>
+      useNcpAgentRuntime({
+        client,
+        manager,
+      }),
+    );
+
+    await act(async () => {
+      await manager.dispatch({
+        occurredAt: new Date().toISOString(),
+        type: NcpEventType.EndpointError,
+        payload: {
+          code: "runtime-error",
+          message: "network error",
+        },
+      });
+    });
+    expect(result.current.snapshot.error?.message).toBe("network error");
+
+    await act(async () => {
+      await result.current.send("retry");
+    });
+
+    expect(result.current.snapshot.error).toBeNull();
+    expect(mocks.send).toHaveBeenCalledOnce();
+  });
+
   it("treats a newly selected session as hydrating immediately on rerender", async () => {
     const client = {
       stop: mocks.stop.mockResolvedValue(undefined),
@@ -54,4 +92,59 @@ describe("useHydratedNcpAgent", () => {
     expect(mocks.stream).toHaveBeenCalledWith({ sessionId: "session-b" });
     expect(mocks.stream).toHaveBeenCalledTimes(2);
   });
+
+  it("keeps a selected session hydrated when an earlier empty-session reset finishes late", async () => {
+    const stopResolvers: Array<() => void> = [];
+    const client = {
+      stop: mocks.stop.mockImplementation(
+        () => new Promise<void>((resolve) => stopResolvers.push(resolve)),
+      ),
+      stream: mocks.stream.mockResolvedValue(undefined),
+      subscribe: vi.fn(() => () => {}),
+    } as unknown as NcpAgentClientEndpoint;
+    const historyMessage = {
+      id: "message-1",
+      sessionId: "session-mobile",
+      role: "user",
+      status: "final",
+      parts: [{ type: "text", text: "Existing history" }],
+      timestamp: "2026-07-16T00:00:00.000Z",
+    } as const;
+    const loadSeed = vi.fn().mockResolvedValue({
+      messages: [historyMessage],
+      status: "idle",
+    });
+
+    const { result, rerender } = renderHook(
+      ({ sessionId }: { sessionId: string | undefined }) =>
+        useHydratedNcpAgent({
+          sessionId,
+          client: client as never,
+          loadSeed,
+        }),
+      {
+        initialProps: {
+          sessionId: undefined as string | undefined,
+        },
+      },
+    );
+
+    await waitFor(() => expect(stopResolvers).toHaveLength(1));
+    rerender({ sessionId: "session-mobile" });
+    await waitFor(() => expect(stopResolvers).toHaveLength(2));
+
+    await act(async () => {
+      stopResolvers[1]?.();
+      await Promise.resolve();
+    });
+    await waitFor(() => {
+      expect(result.current.visibleMessages).toEqual([historyMessage]);
+    });
+
+    await act(async () => {
+      stopResolvers[0]?.();
+      await Promise.resolve();
+    });
+    expect(result.current.visibleMessages).toEqual([historyMessage]);
+  });
 });

package/src/features/chat/features/project/components/__tests__/chat-project-create-dialog.test.tsx

@@ -0,0 +1,67 @@
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+import { ChatProjectCreateDialog } from '@/features/chat/features/project/components/chat-project-create-dialog';
+import { setLanguage } from '@/shared/lib/i18n';
+
+const pathPickerSpy = vi.fn();
+
+vi.mock('@/shared/components/path-picker/server-path-picker-dialog', () => ({
+  ServerPathPickerDialog: (props: unknown) => pathPickerSpy(props),
+}));
+
+describe('ChatProjectCreateDialog', () => {
+  it('selects the optional target directory with the shared path picker', async () => {
+    setLanguage('zh');
+    const user = userEvent.setup();
+    const onCreate = vi.fn(async () => undefined);
+
+    render(
+      <ChatProjectCreateDialog
+        open
+        defaultWorkspacePath="/workspace"
+        templates={[
+          { id: 'empty', name: 'Empty', description: 'Empty project' },
+          {
+            id: 'knowledge-base',
+            name: 'Knowledge base',
+            description: 'Knowledge base project',
+          },
+        ]}
+        isCreating={false}
+        onOpenChange={() => {}}
+        onCreate={onCreate}
+      />,
+    );
+
+    await user.type(screen.getByLabelText('项目名称'), '个人知识库');
+    fireEvent.change(document.querySelector('select')!, {
+      target: { value: 'knowledge-base' },
+    });
+    await user.click(screen.getByRole('button', { name: '浏览' }));
+    expect(pathPickerSpy).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        open: true,
+        currentPath: '',
+        defaultWorkspacePath: '/workspace',
+        title: '选择项目目标目录',
+      }),
+    );
+    const pickerProps = pathPickerSpy.mock.lastCall?.[0] as {
+      onConfirm: (path: string) => void;
+    };
+    act(() => pickerProps.onConfirm('/srv/knowledge'));
+    expect((screen.getByLabelText('目标目录（可选）') as HTMLInputElement).value).toBe(
+      '/srv/knowledge',
+    );
+    await user.click(screen.getByRole('button', { name: '创建项目' }));
+
+    await waitFor(() => {
+      expect(onCreate).toHaveBeenCalledWith({
+        name: '个人知识库',
+        rootPath: '/srv/knowledge',
+        template: 'knowledge-base',
+      });
+    });
+  });
+});