@nextclaw/ui 0.15.13 → 0.15.15

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

@@ -0,0 +1,170 @@
+import { render, waitFor } from "@testing-library/react";
+import { type ComponentProps, useRef } from "react";
+import { beforeEach, expect, it, vi } from "vitest";
+import { ChatMessageListContainer as RuntimeChatMessageListContainer } from "@/features/chat/features/message/components/chat-message-list.container";
+
+function ChatMessageListContainer({
+  sessionKey = "session-1",
+  ...props
+}: Omit<
+  ComponentProps<typeof RuntimeChatMessageListContainer>,
+  "sessionKey" | "scrollRef"
+> & {
+  sessionKey?: string | null;
+}) {
+  const scrollRef = useRef<HTMLDivElement>(null);
+  return (
+    <RuntimeChatMessageListContainer
+      {...props}
+      scrollRef={scrollRef}
+      sessionKey={sessionKey}
+    />
+  );
+}
+
+const captures = vi.hoisted(() => ({
+  renders: [] as Array<{
+    onInlineTokenClick?: (token: unknown) => void;
+  }>,
+  openFilePreview: vi.fn(),
+  fetchSessionSkills: vi.fn(),
+  toastError: vi.fn(),
+  selectedSession: null as null | {
+    projectRoot: string;
+    workingDir?: string | null;
+  },
+}));
+
+vi.mock("@/shared/lib/api", async (importOriginal) => ({
+  ...(await importOriginal<object>()),
+  fetchNcpSessionSkills: captures.fetchSessionSkills,
+}));
+
+vi.mock("sonner", () => ({
+  toast: { error: captures.toastError },
+}));
+
+vi.mock("@nextclaw/agent-chat-ui", async (importOriginal) => ({
+  ...((await importOriginal()) as object),
+  ChatMessageList: (props: {
+    onInlineTokenClick?: (token: unknown) => void;
+  }) => {
+    captures.renders.push(props);
+    return <div data-testid="chat-message-list" />;
+  },
+}));
+
+vi.mock(
+  "@/features/chat/features/message/hooks/use-chat-message-virtualizer",
+  () => ({
+    useChatMessageVirtualizer: ({
+      rows,
+    }: {
+      rows: Array<{ key: string }>;
+    }) => ({
+      containerRef: vi.fn(),
+      virtualizer: {
+        getVirtualItems: () => rows.map((_, index) => ({ index, start: 0 })),
+        measureElement: vi.fn(),
+      },
+    }),
+  }),
+);
+
+vi.mock("@/features/chat/components/providers/chat-presenter.provider", () => ({
+  usePresenter: () => ({
+    chatThreadManager: {
+      openFilePreview: captures.openFilePreview,
+      handleToolAction: vi.fn(),
+    },
+    chatUiManager: { showContent: vi.fn() },
+  }),
+}));
+
+vi.mock(
+  "@/features/chat/features/ncp/hooks/use-ncp-chat-derived-state",
+  () => ({
+    useNcpChatSelectedSession: () => captures.selectedSession,
+  }),
+);
+
+vi.mock("@/app/components/i18n-provider", () => ({
+  useI18n: () => ({ language: "en" }),
+}));
+
+vi.mock("@/shared/lib/i18n", () => ({
+  formatDateTime: (value: string) => value,
+  t: (key: string) => key,
+}));
+
+beforeEach(() => {
+  captures.renders = [];
+  captures.openFilePreview.mockReset();
+  captures.fetchSessionSkills.mockReset();
+  captures.toastError.mockReset();
+  captures.selectedSession = null;
+});
+
+function clickSkill(token: Record<string, unknown>, sessionKey?: string): void {
+  render(
+    <ChatMessageListContainer
+      messages={[]}
+      isSending
+      sessionKey={sessionKey}
+    />,
+  );
+  captures.renders[captures.renders.length - 1]?.onInlineTokenClick?.(token);
+}
+
+it("opens a persisted skill path without consulting the session catalog", () => {
+  clickSkill({
+    kind: "skill", ref: "global:/skills/review", name: "review", source: "global",
+    path: "/home/.agents/skills/review/SKILL.md", label: "review", rawText: "$review",
+  });
+
+  expect(captures.openFilePreview).toHaveBeenCalledWith({
+    path: "/home/.agents/skills/review/SKILL.md",
+    label: "review",
+    viewMode: "preview",
+    previewViewer: "rendered",
+  });
+  expect(captures.fetchSessionSkills).not.toHaveBeenCalled();
+});
+
+it("resolves a persisted v1 skill against its owning session", async () => {
+  captures.selectedSession = { projectRoot: "/tmp/project" };
+  captures.fetchSessionSkills.mockResolvedValue({
+    records: [{
+      ref: "project:/tmp/project/.agents/skills/review",
+      name: "review",
+      path: "/tmp/project/.agents/skills/review/SKILL.md",
+    }],
+  });
+  clickSkill({
+    kind: "skill", ref: "project:/tmp/project/.agents/skills/review", name: "review",
+    source: null, path: null, label: "review", rawText: "$project:/skills/review",
+  }, "session-legacy");
+
+  await waitFor(() => expect(captures.openFilePreview).toHaveBeenCalledWith({
+    path: "/tmp/project/.agents/skills/review/SKILL.md",
+    label: "review",
+    viewMode: "preview",
+    previewViewer: "rendered",
+  }));
+  expect(captures.fetchSessionSkills).toHaveBeenCalledWith("session-legacy", {
+    projectRoot: "/tmp/project",
+  });
+});
+
+it("shows an error when a persisted v1 skill is no longer resolvable", async () => {
+  captures.fetchSessionSkills.mockResolvedValue({ records: [] });
+  clickSkill({
+    kind: "skill", ref: "workspace:/missing/review", name: "review",
+    source: null, path: null, label: "review", rawText: "$workspace:/missing/review",
+  });
+
+  await waitFor(() => expect(captures.toastError).toHaveBeenCalledWith(
+    "chatSkillPreviewUnavailable",
+  ));
+  expect(captures.openFilePreview).not.toHaveBeenCalled();
+});

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

@@ -224,14 +224,20 @@ it("adapts persisted inline token metadata into markdown token data", () => {
     status: "final",
     timestamp: "2026-03-31T10:00:00.000Z",
     metadata: {
-      ui_inline_tokens: [
-        {
-          kind: "skill",
-          key: "weather",
-          label: "Weather",
-          rawText: "$weather",
-        },
-      ],
+      ui_inline_tokens: {
+        schemaVersion: 2,
+        items: [
+          {
+            kind: "skill",
+            ref: "workspace:/skills/weather",
+            name: "weather",
+            source: "workspace",
+            path: "/skills/weather/SKILL.md",
+            label: "Weather",
+            rawText: "$weather",
+          },
+        ],
+      },
     },
     parts: [{ type: "text", text: "please use $weather now" }],
   } satisfies NcpMessage;
@@ -249,7 +255,10 @@ it("adapts persisted inline token metadata into markdown token data", () => {
         inlineTokens: [
           {
             kind: "skill",
-            key: "weather",
+            ref: "workspace:/skills/weather",
+            name: "weather",
+            source: "workspace",
+            path: "/skills/weather/SKILL.md",
             label: "Weather",
             rawText: "$weather",
           },

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

@@ -6,6 +6,7 @@ import {
   type RefObject,
 } from "react";
 import type { NcpMessage } from "@nextclaw/ncp";
+import { toast } from "sonner";
 import {
   type ChatInlineDisplayViewModel,
   type ChatInlineTokenViewModel,
@@ -51,7 +52,7 @@ import {
   type ChatTimelineItem,
   type ContextInheritanceTimelineView,
 } from "@/features/chat/features/message/utils/chat-message-timeline.utils";
-import { buildServerPathContentUrl } from "@/shared/lib/api";
+import { buildServerPathContentUrl, fetchNcpSessionSkills } from "@/shared/lib/api";
 import { formatDateTime, t } from "@/shared/lib/i18n";
 import { cn } from "@/shared/lib/utils";
 
@@ -331,20 +332,18 @@ export function ChatMessageListContainer({
     activeRowKey,
     focusedRowKey,
   });
-  const sessionSkillsQuery = useChatQueryStore(
-    (state) => state.snapshot.sessionSkillsQuery,
-  );
   const handleInlineTokenClick = useCallback(
     (token: ChatInlineTokenViewModel) => {
-      if (token.kind === "panel_app") {
+      if (token.kind === "panel_app" && "key" in token) {
         void presenter.chatUiManager.showContent({
           target: { type: "panel_app", payload: { appId: token.key } },
         });
         return;
       }
       if (
-        token.kind === "workspace_file" ||
-        token.kind === "workspace_directory"
+        "key" in token &&
+        (token.kind === "workspace_file" ||
+          token.kind === "workspace_directory")
       ) {
         const path = resolveWorkspaceReferencePath({
           projectRoot: selectedSession?.projectRoot,
@@ -359,31 +358,45 @@ export function ChatMessageListContainer({
         }
         return;
       }
-      if (token.kind !== "skill") return;
-      const skillKey = token.key.trim();
-      if (!skillKey) {
+      if (token.kind !== "skill" || !("ref" in token)) return;
+      const skillPath = token.path?.trim();
+      if (skillPath) {
+        presenter.chatThreadManager.openFilePreview({
+          path: skillPath,
+          label: token.label || token.name,
+          viewMode: "preview",
+          previewViewer: "rendered",
+        });
         return;
       }
-      const records = sessionSkillsQuery?.data?.records ?? [];
-      const matched = records.find(
-        (record) => record.ref === skillKey || record.name === skillKey,
-      );
-      const skillPath = matched?.path?.trim();
-      if (!skillPath) {
+      if (!sessionKey) {
+        toast.error(t("chatSkillPreviewUnavailable"));
         return;
       }
-      presenter.chatThreadManager.openFilePreview({
-        path: skillPath,
-        label: token.label || matched?.name || skillKey,
-        viewMode: "preview",
-        previewViewer: "rendered",
-      });
+      void fetchNcpSessionSkills(sessionKey, {
+        projectRoot: selectedSession?.projectRoot ?? null,
+      }).then(({ records }) => {
+        const exact = records.find((record) => record.ref === token.ref);
+        const named = records.filter((record) => record.name === token.name);
+        const matched = exact ?? (named.length === 1 ? named[0] : null);
+        const legacyPath = matched?.path.trim();
+        if (!matched || !legacyPath) {
+          toast.error(t("chatSkillPreviewUnavailable"));
+          return;
+        }
+        presenter.chatThreadManager.openFilePreview({
+          path: legacyPath,
+          label: token.label || matched.name,
+          viewMode: "preview",
+          previewViewer: "rendered",
+        });
+      }).catch(() => toast.error(t("chatSkillPreviewUnavailable")));
     },
     [
       presenter.chatThreadManager,
       presenter.chatUiManager,
       selectedSession?.projectRoot,
-      sessionSkillsQuery,
+      sessionKey,
     ],
   );
   const handleAttachmentOpen = useCallback(

package/src/features/chat/features/message/hooks/__tests__/use-chat-message-virtualizer.test.tsx

@@ -160,4 +160,94 @@ describe("useChatMessageVirtualizer", () => {
     expect(result.current.virtualizer.getTotalSize()).toBe(420);
     row.remove();
   });
+
+  it("keeps the visible anchor when an offscreen earlier row changes height", async () => {
+    const scrollElement = document.createElement("div");
+    Object.defineProperties(scrollElement, {
+      clientHeight: { configurable: true, value: 800 },
+      offsetHeight: { configurable: true, value: 800 },
+      offsetWidth: { configurable: true, value: 800 },
+      scrollTop: { configurable: true, writable: true, value: 0 },
+    });
+    scrollElement.scrollTo = vi.fn((options) => {
+      if (typeof options === "object" && options.top !== undefined) {
+        scrollElement.scrollTop = options.top;
+      }
+    });
+    const rows = Array.from({ length: 10 }, (_, index) => ({
+      key: `message:${index}`,
+    }));
+    const { result } = renderHook(() =>
+      useChatMessageVirtualizer({
+        rows,
+        scrollRef: { current: scrollElement },
+      }),
+    );
+    await waitFor(() =>
+      expect(
+        result.current.virtualizer.getVirtualItems().length,
+      ).toBeGreaterThan(0),
+    );
+    act(() => result.current.virtualizer.resizeItem(0, 220));
+    scrollElement.scrollTop = 900;
+    act(() => scrollElement.dispatchEvent(new Event("scroll")));
+    await waitFor(() =>
+      expect(result.current.virtualizer.scrollOffset).toBe(900),
+    );
+    const anchor = result.current.virtualizer.getVirtualItemForOffset(900);
+    const anchorOffset = 900 - (anchor?.start ?? 0);
+
+    act(() => result.current.virtualizer.resizeItem(0, 480));
+
+    const anchored = result.current.virtualizer.getVirtualItemForOffset(
+      scrollElement.scrollTop,
+    );
+    expect(scrollElement.scrollTop).toBe(1_160);
+    expect(anchored?.key).toBe(anchor?.key);
+    expect(scrollElement.scrollTop - (anchored?.start ?? 0)).toBe(anchorOffset);
+  });
+
+  it("keeps later rows anchored when the first visible row changes height", async () => {
+    const scrollElement = document.createElement("div");
+    Object.defineProperties(scrollElement, {
+      clientHeight: { configurable: true, value: 800 },
+      offsetHeight: { configurable: true, value: 800 },
+      offsetWidth: { configurable: true, value: 800 },
+      scrollTop: { configurable: true, writable: true, value: 0 },
+    });
+    scrollElement.scrollTo = vi.fn((options) => {
+      if (typeof options === "object" && options.top !== undefined) {
+        scrollElement.scrollTop = options.top;
+      }
+    });
+    const rows = Array.from({ length: 10 }, (_, index) => ({
+      key: `message:${index}`,
+    }));
+    const { result } = renderHook(() =>
+      useChatMessageVirtualizer({
+        rows,
+        scrollRef: { current: scrollElement },
+      }),
+    );
+    await waitFor(() =>
+      expect(
+        result.current.virtualizer.getVirtualItems().length,
+      ).toBeGreaterThan(0),
+    );
+    act(() => result.current.virtualizer.resizeItem(4, 220));
+    scrollElement.scrollTop = 900;
+    act(() => scrollElement.dispatchEvent(new Event("scroll")));
+    await waitFor(() =>
+      expect(result.current.virtualizer.scrollOffset).toBe(900),
+    );
+    const anchor = result.current.virtualizer.getVirtualItemForOffset(980);
+    const anchorTop = (anchor?.start ?? 0) - scrollElement.scrollTop;
+
+    act(() => result.current.virtualizer.resizeItem(4, 480));
+
+    const anchored = result.current.virtualizer.getVirtualItemForOffset(1_240);
+    expect(scrollElement.scrollTop).toBe(1_160);
+    expect(anchored?.key).toBe(anchor?.key);
+    expect((anchored?.start ?? 0) - scrollElement.scrollTop).toBe(anchorTop);
+  });
 });

package/src/features/chat/features/message/hooks/use-chat-message-virtualizer.ts

@@ -5,14 +5,10 @@ import {
   useVirtualizer,
 } from "@tanstack/react-virtual";
 
-type ChatMessageVirtualRow = {
-  key: string;
-};
-
 const ESTIMATED_CHAT_MESSAGE_ROW_HEIGHT = 180;
 
 export function useChatMessageVirtualizer(params: {
-  rows: readonly ChatMessageVirtualRow[];
+  rows: readonly { key: string }[];
   scrollRef: RefObject<HTMLDivElement | null>;
   activeRowKey?: string | null;
   focusedRowKey?: string | null;
@@ -56,6 +52,8 @@ export function useChatMessageVirtualizer(params: {
       elementScroll(offset, options, instance);
     },
   });
+  virtualizer.shouldAdjustScrollPositionOnItemSizeChange = (item) =>
+    item.start < (virtualizer.scrollOffset ?? 0);
   const containerRef = useCallback(
     (node: HTMLDivElement | null) => {
       sizeContainerRef.current = node;

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

@@ -0,0 +1,51 @@
+import { act, renderHook } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { NcpEventType, type NcpAgentClientEndpoint } from '@nextclaw/ncp';
+import { useNcpAgentRuntime } from '@nextclaw/ncp-react';
+import { DefaultNcpAgentConversationStateManager } from '@nextclaw/ncp-toolkit';
+
+describe('useNcpAgentRuntime backend queue submission', () => {
+  it('forwards a new message while a run is active and waits for backend events to add it', async () => {
+    const manager = new DefaultNcpAgentConversationStateManager();
+    manager.hydrate({ sessionId: 'session-1', messages: [] });
+    await manager.dispatch({
+      type: NcpEventType.RunStarted,
+      payload: {
+        sessionId: 'session-1',
+        runId: 'run-1',
+        messageId: 'assistant-1',
+      },
+    });
+    const send = vi.fn(async () => ({
+      assistantMessageId: null,
+      runId: null,
+      sessionId: 'session-1',
+      userMessageId: 'user-queued',
+    }));
+    const client = {
+      abort: vi.fn(async () => undefined),
+      send,
+      stop: vi.fn(async () => undefined),
+      stream: vi.fn(async () => undefined),
+      subscribe: vi.fn(() => () => undefined),
+    } as unknown as NcpAgentClientEndpoint;
+    const { result } = renderHook(() => useNcpAgentRuntime({
+      client,
+      manager,
+      sessionId: 'session-1',
+    }));
+
+    expect(result.current.isRunning).toBe(true);
+    await act(async () => {
+      await result.current.send('queue this');
+    });
+
+    expect(send).toHaveBeenCalledWith(expect.objectContaining({
+      sessionId: 'session-1',
+      message: expect.objectContaining({
+        parts: [{ type: 'text', text: 'queue this' }],
+      }),
+    }));
+    expect(result.current.visibleMessages).toEqual([]);
+  });
+});

package/src/features/chat/features/session/utils/chat-run-metadata.utils.ts

@@ -2,7 +2,12 @@ import {
   CHAT_SESSION_MATERIALIZATION_METADATA_KEY,
   type AgentRunSessionMaterializationMetadata,
 } from "@nextclaw/shared";
-import { buildInlineTokensFromComposer, CHAT_INLINE_TOKENS_METADATA_KEY } from "@/features/chat/features/input/utils/chat-inline-token.utils";
+import {
+  buildInlineTokensFromComposer,
+  CHAT_INLINE_TOKENS_METADATA_KEY,
+  createInlineTokensMetadata,
+  type ChatSkillReferenceSnapshot,
+} from "@/features/chat/features/input/utils/chat-inline-token.utils";
 import { normalizeRequestedSkills } from "@/features/chat/features/runtime/utils/chat-runtime.utils";
 import { normalizeSessionProjectRootValue } from "@/shared/lib/session-project";
 
@@ -20,6 +25,7 @@ export function buildChatRunMetadata(payload: {
   sessionType?: string;
   projectRoot?: string | null;
   requestedSkills?: string[];
+  skillRecords?: readonly ChatSkillReferenceSnapshot[];
   composerNodes?: Parameters<typeof buildInlineTokensFromComposer>[0];
   sessionMaterialization?: AgentRunSessionMaterializationMetadata | null;
 }): Record<string, unknown> {
@@ -36,10 +42,10 @@ export function buildChatRunMetadata(payload: {
     metadata.requested_skill_refs = requestedSkills;
   }
   const inlineTokens = payload.composerNodes
-    ? buildInlineTokensFromComposer(payload.composerNodes)
+    ? buildInlineTokensFromComposer(payload.composerNodes, payload.skillRecords)
     : [];
   if (inlineTokens.length > 0) {
-    metadata[CHAT_INLINE_TOKENS_METADATA_KEY] = inlineTokens;
+    metadata[CHAT_INLINE_TOKENS_METADATA_KEY] = createInlineTokensMetadata(inlineTokens);
   }
   if (payload.sessionMaterialization) {
     metadata[CHAT_SESSION_MATERIALIZATION_METADATA_KEY] = payload.sessionMaterialization;

package/src/features/chat/pages/__tests__/ncp-chat-page.test.ts

@@ -190,6 +190,37 @@ describe('buildChatRunMetadata', () => {
     });
   });
 
+  it('snapshots explicit skill references while keeping internal refs out of message text', () => {
+    expect(buildChatRunMetadata({
+      requestedSkills: ['workspace:/tmp/workspace/skills/review'],
+      skillRecords: [{
+        ref: 'workspace:/tmp/workspace/skills/review',
+        name: 'review',
+        source: 'workspace',
+        path: '/tmp/workspace/skills/review/SKILL.md',
+      }],
+      composerNodes: [createChatComposerTokenNode({
+        tokenKind: 'skill',
+        tokenKey: 'workspace:/tmp/workspace/skills/review',
+        label: 'review',
+      })],
+    })).toMatchObject({
+      requested_skill_refs: ['workspace:/tmp/workspace/skills/review'],
+      ui_inline_tokens: {
+        schemaVersion: 2,
+        items: [{
+          kind: 'skill',
+          ref: 'workspace:/tmp/workspace/skills/review',
+          name: 'review',
+          source: 'workspace',
+          path: '/tmp/workspace/skills/review/SKILL.md',
+          label: 'review',
+          rawText: '$review',
+        }],
+      },
+    });
+  });
+
   it('serializes panel app references as text without run metadata', () => {
     expect(
       buildChatRunMetadata({
@@ -227,14 +258,17 @@ describe('buildChatRunMetadata', () => {
         ],
       }),
     ).toMatchObject({
-      ui_inline_tokens: [
-        {
-          kind: 'workspace_file',
-          key: 'src/file name.ts',
-          label: 'file name.ts',
-          rawText: '@file:src%2Ffile%20name.ts',
-        },
-      ],
+      ui_inline_tokens: {
+        schemaVersion: 2,
+        items: [
+          {
+            kind: 'workspace_file',
+            key: 'src/file name.ts',
+            label: 'file name.ts',
+            rawText: '@file:src%2Ffile%20name.ts',
+          },
+        ],
+      },
     });
   });
 

package/src/shared/lib/i18n/locales/en-US/chat.json

@@ -433,6 +433,7 @@
   "chatSkillsPickerNoDescription": "No description",
   "chatSkillsPickerOfficial": "Official",
   "chatSkillsPickerManage": "Manage Skills",
+  "chatSkillPreviewUnavailable": "This skill file is unavailable. It may have been moved or removed.",
   "chatInputAttach": "Attach file",
   "chatInputAttachmentUnsupported": "This file type is not supported in the current upload flow.",
   "chatInputAttachmentTooLarge": "Files must be {maxMb} MB or smaller.",

package/src/shared/lib/i18n/locales/zh-CN/chat.json

@@ -433,6 +433,7 @@
   "chatSkillsPickerNoDescription": "暂无描述",
   "chatSkillsPickerOfficial": "官方",
   "chatSkillsPickerManage": "管理技能",
+  "chatSkillPreviewUnavailable": "无法打开这个技能文件，它可能已被移动或删除。",
   "chatInputAttach": "添加附件",
   "chatInputAttachmentUnsupported": "当前上传流程不支持该文件类型。",
   "chatInputAttachmentTooLarge": "文件不能超过 {maxMb} MB。",