@nextclaw/ui 0.15.4 → 0.15.6

package/src/features/chat/features/input/input-surface-plugins/__tests__/context-reference-plugin.test.ts

@@ -0,0 +1,175 @@
+import { describe, expect, it, vi } from 'vitest';
+import { resolveChatInputSurfaceState } from '@nextclaw/agent-chat-ui';
+import {
+  CONTEXT_REFERENCE_TRIGGER_SPEC,
+  createContextReferenceInputSurfacePlugin,
+} from '@/features/chat/features/input/input-surface-plugins/context-reference-plugin.utils';
+import type { PanelAppEntryView } from '@/shared/lib/api';
+
+function createPanelApp(): PanelAppEntryView {
+  return {
+    id: 'task-board',
+    appId: 'task-board',
+    fileName: 'task-board.panel.html',
+    kind: 'single-file',
+    title: 'Task Board',
+    description: 'Track tasks',
+    contentPath: '/panels/task-board.panel.html',
+    createdAt: '2026-06-18T00:00:00.000Z',
+    updatedAt: '2026-06-18T00:00:00.000Z',
+    sizeBytes: 100,
+    favorite: false,
+    clientDeclared: false,
+    clientGranted: false,
+    openCount: 0,
+  };
+}
+
+function createPlugin(onNavigate = vi.fn()) {
+  return createContextReferenceInputSurfacePlugin({
+    itemTexts: {
+      context: {
+        backLabel: 'Back',
+        backDescription: 'Back to references',
+        backHintLabel: 'Enter to go back',
+        directoryDescription: 'Directory context',
+        fileDescription: 'File context',
+        filesDescription: 'Browse project files',
+        filesHintLabel: 'Enter to browse',
+        filesLabel: 'Files & Folders',
+        filesSubtitle: 'Project Context',
+        panelAppSectionLabel: 'Panel Apps',
+        projectRootLabel: 'Project directory',
+        searchFailedLabel: 'Search failed',
+        workspaceSectionLabel: 'Files & Folders',
+      },
+      panelApp: {
+        appIdLabel: 'App ID',
+        fileLabel: 'File',
+        noDescriptionLabel: 'No description',
+        subtitle: 'Panel App',
+      },
+    },
+    menuTexts: {
+      loadingLabel: 'Loading',
+      sectionLabel: 'References',
+      emptyLabel: 'Empty',
+      hintLabel: 'Type @',
+      itemHintLabel: 'Enter to reference',
+    },
+    onNavigate,
+  });
+}
+
+function createData(referenceMode: 'root' | 'files' = 'root') {
+  return {
+    isPanelAppsLoading: false,
+    isServerPathSearchLoading: false,
+    isSkillsLoading: false,
+    panelApps: [createPanelApp()],
+    projectRoot: '/tmp/project',
+    recentSkillValues: [],
+    referenceMode,
+    serverPathEntries: [
+      {
+        name: 'server-path.ts',
+        path: '/tmp/project/src/server-path.ts',
+        relativePath: 'src/server-path.ts',
+        parentRelativePath: 'src',
+        kind: 'file' as const,
+        hidden: false,
+      },
+      {
+        name: 'docs',
+        path: '/tmp/project/docs',
+        relativePath: 'docs',
+        parentRelativePath: '',
+        kind: 'directory' as const,
+        hidden: false,
+      },
+    ],
+    serverPathSearchError: null,
+    skillRecords: [],
+  };
+}
+
+describe('context reference input surface plugin', () => {
+  it('shows Files & Folders and panel apps in the root @ menu', () => {
+    const state = resolveChatInputSurfaceState({
+      plugins: [createPlugin()],
+      trigger: {
+        ...CONTEXT_REFERENCE_TRIGGER_SPEC,
+        query: '',
+        start: 0,
+        end: 1,
+      },
+      data: createData(),
+    });
+
+    expect(state.panel?.items).toEqual([
+      expect.objectContaining({
+        title: 'Files & Folders',
+        icon: 'files',
+        selectionBehavior: 'navigate',
+      }),
+      expect.objectContaining({
+        key: 'panel-app:task-board',
+        tokenKind: 'panel_app',
+        tokenKey: 'task-board',
+      }),
+    ]);
+  });
+
+  it('builds file and directory tokens with path previews in files mode', () => {
+    const state = resolveChatInputSurfaceState({
+      plugins: [createPlugin()],
+      trigger: {
+        ...CONTEXT_REFERENCE_TRIGGER_SPEC,
+        query: 'server',
+        start: 0,
+        end: 7,
+      },
+      data: createData('files'),
+    });
+
+    expect(state.panel?.items.slice(1)).toEqual([
+      expect.objectContaining({
+        title: 'server-path.ts',
+        tokenKind: 'workspace_file',
+        tokenKey: 'src/server-path.ts',
+        pathPreview: {
+          rootLabel: 'project',
+          segments: [
+            { label: 'src', kind: 'directory' },
+            { label: 'server-path.ts', kind: 'file' },
+          ],
+        },
+      }),
+      expect.objectContaining({
+        title: 'docs',
+        tokenKind: 'workspace_directory',
+        tokenKey: 'docs',
+      }),
+    ]);
+  });
+
+  it('navigates without producing a composer token', () => {
+    const onNavigate = vi.fn();
+    const state = resolveChatInputSurfaceState({
+      plugins: [createPlugin(onNavigate)],
+      trigger: {
+        ...CONTEXT_REFERENCE_TRIGGER_SPEC,
+        query: '',
+        start: 0,
+        end: 1,
+      },
+      data: createData(),
+    });
+    const item = state.panel?.items[0];
+
+    state.panel?.onSelectItem?.(item!);
+
+    expect(onNavigate).toHaveBeenCalledWith('files');
+    expect(item).not.toHaveProperty('tokenKind');
+  });
+});

package/src/features/chat/features/input/input-surface-plugins/__tests__/slash-command-plugin.test.ts

@@ -86,6 +86,7 @@ describe('createSlashCommandInputSurfacePlugin', () => {
     const state = resolveChatInputSurfaceState({
       data: {
         isPanelAppsLoading: false,
+        isServerPathSearchLoading: false,
         isSkillsLoading: false,
         panelApps: [
           createPanelApp({
@@ -94,7 +95,11 @@ describe('createSlashCommandInputSurfacePlugin', () => {
             description: 'Track tasks',
           }),
         ],
+        projectRoot: '/tmp/project',
         recentSkillValues: [],
+        referenceMode: 'root',
+        serverPathEntries: [],
+        serverPathSearchError: null,
         skillRecords: [
           {
             key: 'web-search',
@@ -125,30 +130,86 @@ describe('createSlashCommandInputSurfacePlugin', () => {
       { key: 'panel-apps', label: 'Panel Apps', sectionKeys: ['panel-apps'] },
     ]);
     expect(state.panel?.items[0]).toMatchObject({
+      icon: 'command',
       sectionKey: 'commands',
       sectionLabel: 'Commands',
       hintLabel: 'Run command',
     });
     expect(state.panel?.items[1]).toMatchObject({
+      icon: 'skill',
       sectionKey: 'skills',
       sectionLabel: 'Skills',
       hintLabel: 'Add skill',
     });
     expect(state.panel?.items[2]).toMatchObject({
+      icon: 'panel-app',
       sectionKey: 'panel-apps',
       sectionLabel: 'Panel Apps',
       hintLabel: 'Open panel app',
     });
   });
 
+  it('preserves source groups while the skills filter includes every skill section', () => {
+    const state = resolveChatInputSurfaceState({
+      data: {
+        isPanelAppsLoading: false,
+        isServerPathSearchLoading: false,
+        isSkillsLoading: false,
+        panelApps: [],
+        projectRoot: '/tmp/project',
+        recentSkillValues: [],
+        referenceMode: 'root',
+        serverPathEntries: [],
+        serverPathSearchError: null,
+        skillRecords: [
+          {
+            key: 'project:review',
+            label: 'Review',
+            groupKey: 'project',
+            groupLabel: 'Project skills',
+          },
+          {
+            key: 'global:browser',
+            label: 'Browser',
+            groupKey: 'global',
+            groupLabel: 'Global skills',
+          },
+        ],
+      },
+      plugins: [createPlugin()],
+      trigger: {
+        key: 'slash',
+        marker: '/',
+        query: '',
+        start: 0,
+        end: 1,
+      },
+    });
+
+    expect(state.panel?.filterOptions?.find((filter) => filter.key === 'skills')).toEqual({
+      key: 'skills',
+      label: 'Skills',
+      sectionKeys: ['skills:project', 'skills:global'],
+    });
+    expect(state.panel?.items.filter((item) => item.key.startsWith('skill:'))).toMatchObject([
+      { sectionKey: 'skills:project', sectionLabel: 'Project skills' },
+      { sectionKey: 'skills:global', sectionLabel: 'Global skills' },
+    ]);
+  });
+
   it('runs a command item through the panel selection handler', () => {
     const onSelectCommand = vi.fn();
     const state = resolveChatInputSurfaceState({
       data: {
         isPanelAppsLoading: false,
+        isServerPathSearchLoading: false,
         isSkillsLoading: false,
         panelApps: [],
+        projectRoot: '/tmp/project',
         recentSkillValues: [],
+        referenceMode: 'root',
+        serverPathEntries: [],
+        serverPathSearchError: null,
         skillRecords: [],
       },
       plugins: [createPlugin({ onSelectCommand })],
@@ -172,6 +233,7 @@ describe('createSlashCommandInputSurfacePlugin', () => {
     const state = resolveChatInputSurfaceState({
       data: {
         isPanelAppsLoading: false,
+        isServerPathSearchLoading: false,
         isSkillsLoading: false,
         panelApps: [
           createPanelApp({
@@ -180,7 +242,11 @@ describe('createSlashCommandInputSurfacePlugin', () => {
             description: 'Track tasks',
           }),
         ],
+        projectRoot: '/tmp/project',
         recentSkillValues: [],
+        referenceMode: 'root',
+        serverPathEntries: [],
+        serverPathSearchError: null,
         skillRecords: [],
       },
       plugins: [createPlugin({ onSelectPanelApp })],

package/src/features/chat/features/input/input-surface-plugins/chat-input-product-plugin-adapters.types.ts

@@ -1,10 +1,17 @@
 import type { ChatSkillRecord } from '@/features/chat/types/chat-input-bar.types';
-import type { PanelAppEntryView } from '@/shared/lib/api';
+import type { PanelAppEntryView, ServerPathSearchEntryView } from '@/shared/lib/api';
+
+export type ContextReferenceMode = 'root' | 'files';
 
 export type ChatInputProductPluginData = {
   isPanelAppsLoading: boolean;
+  isServerPathSearchLoading: boolean;
   isSkillsLoading: boolean;
   panelApps: readonly PanelAppEntryView[];
+  projectRoot: string;
   recentSkillValues: readonly string[];
+  referenceMode: ContextReferenceMode;
+  serverPathEntries: readonly ServerPathSearchEntryView[];
+  serverPathSearchError: string | null;
   skillRecords: readonly ChatSkillRecord[];
 };

package/src/features/chat/features/input/input-surface-plugins/context-reference-plugin.utils.ts

@@ -0,0 +1,274 @@
+import {
+  createInputSurfaceTriggeredPanelPlugin,
+  type ChatInputSurfaceItem,
+  type ChatInputSurfaceMenuTexts,
+  type ChatInputSurfacePlugin,
+  type ChatInputSurfaceTriggerSpec,
+} from '@nextclaw/agent-chat-ui';
+import {
+  CHAT_WORKSPACE_DIRECTORY_TOKEN_KIND,
+  CHAT_WORKSPACE_FILE_TOKEN_KIND,
+} from '@nextclaw/shared';
+import type { PanelAppEntryView, ServerPathSearchEntryView } from '@/shared/lib/api';
+import type {
+  ChatInputProductPluginData,
+  ContextReferenceMode,
+} from './chat-input-product-plugin-adapters.types';
+import {
+  scoreInputSurfaceSearchCandidate,
+  resolveInputSurfaceMatchTier,
+} from './input-surface-search.utils';
+
+const FILES_NAVIGATION_ITEM_KEY = 'context-reference:navigate:files';
+const ROOT_NAVIGATION_ITEM_KEY = 'context-reference:navigate:root';
+const WORKSPACE_SECTION_KEY = 'workspace';
+const PANEL_APP_SECTION_KEY = 'panel-apps';
+
+export const CONTEXT_REFERENCE_TRIGGER_SPEC: ChatInputSurfaceTriggerSpec = {
+  key: 'context-reference',
+  marker: '@',
+};
+
+export type PanelAppInputSurfaceItemTexts = {
+  appIdLabel: string;
+  fileLabel: string;
+  noDescriptionLabel: string;
+  subtitle: string;
+};
+
+export type ContextReferenceInputSurfaceTexts = {
+  backLabel: string;
+  backDescription: string;
+  backHintLabel: string;
+  directoryDescription: string;
+  fileDescription: string;
+  filesDescription: string;
+  filesHintLabel: string;
+  filesLabel: string;
+  filesSubtitle: string;
+  panelAppSectionLabel: string;
+  projectRootLabel: string;
+  searchFailedLabel: string;
+  workspaceSectionLabel: string;
+};
+
+function getPanelAppActivityTime(entry: PanelAppEntryView): number {
+  return Date.parse(entry.lastOpenedAt ?? entry.updatedAt) || 0;
+}
+
+function resolveProjectLabel(projectRoot: string): string {
+  return projectRoot.split(/[\\/]+/).filter(Boolean).at(-1) ?? projectRoot;
+}
+
+function resolvePanelAppInputSurfaceEntries(params: {
+  entries: readonly PanelAppEntryView[];
+  query: string;
+}): PanelAppEntryView[] {
+  const collator = new Intl.Collator(undefined, { sensitivity: 'base', numeric: true });
+  return params.entries
+    .map((entry, order) => ({
+      entry,
+      order,
+      score: scoreInputSurfaceSearchCandidate(
+        {
+          id: entry.appId,
+          label: entry.title || entry.appId,
+          description: entry.description,
+          aliases: [entry.id, entry.fileName],
+        },
+        params.query,
+      ),
+    }))
+    .filter((entry) => entry.score > 0)
+    .sort((left, right) => {
+      const leftTier = resolveInputSurfaceMatchTier(left.score);
+      const rightTier = resolveInputSurfaceMatchTier(right.score);
+      if (rightTier !== leftTier) {
+        return rightTier - leftTier;
+      }
+      if (left.entry.favorite !== right.entry.favorite) {
+        return left.entry.favorite ? -1 : 1;
+      }
+      const rightActivity = getPanelAppActivityTime(right.entry);
+      const leftActivity = getPanelAppActivityTime(left.entry);
+      if (rightActivity !== leftActivity) {
+        return rightActivity - leftActivity;
+      }
+      if (right.score !== left.score) {
+        return right.score - left.score;
+      }
+      const labelCompare = collator.compare(left.entry.title || left.entry.appId, right.entry.title || right.entry.appId);
+      return labelCompare || left.order - right.order;
+    })
+    .map(({ entry }) => entry);
+}
+
+function buildPanelAppInputSurfaceItemEntries(params: {
+  entries: readonly PanelAppEntryView[];
+  keyPrefix?: string;
+  query: string;
+  texts: PanelAppInputSurfaceItemTexts;
+}): Array<{ entry: PanelAppEntryView; item: ChatInputSurfaceItem }> {
+  const keyPrefix = params.keyPrefix ?? 'panel-app';
+  return resolvePanelAppInputSurfaceEntries({
+    entries: params.entries,
+    query: params.query,
+  }).map((entry) => ({
+    entry,
+    item: {
+      key: `${keyPrefix}:${entry.appId}`,
+      icon: 'panel-app',
+      title: entry.title || entry.appId,
+      subtitle: params.texts.subtitle,
+      description: (entry.description ?? '').trim() || params.texts.noDescriptionLabel,
+      detailLines: [
+        `${params.texts.appIdLabel}: ${entry.appId}`,
+        `${params.texts.fileLabel}: ${entry.fileName}`,
+      ],
+    },
+  }));
+}
+
+export function buildPanelAppInputSurfaceItems(params: {
+  entries: readonly PanelAppEntryView[];
+  keyPrefix?: string;
+  query: string;
+  texts: PanelAppInputSurfaceItemTexts;
+}): ChatInputSurfaceItem[] {
+  return buildPanelAppInputSurfaceItemEntries(params).map(({ item }) => item);
+}
+
+function buildPanelAppReferenceItems(params: {
+  entries: readonly PanelAppEntryView[];
+  query: string;
+  sectionLabel: string;
+  texts: PanelAppInputSurfaceItemTexts;
+}): ChatInputSurfaceItem[] {
+  return buildPanelAppInputSurfaceItemEntries(params).map(({ entry, item }) => ({
+    ...item,
+    sectionKey: PANEL_APP_SECTION_KEY,
+    sectionLabel: params.sectionLabel,
+    tokenKind: 'panel_app',
+    tokenKey: entry.appId,
+    value: entry.appId,
+  }));
+}
+
+function buildWorkspaceReferenceItems(params: {
+  entries: readonly ServerPathSearchEntryView[];
+  projectRoot: string;
+  texts: ContextReferenceInputSurfaceTexts;
+}): ChatInputSurfaceItem[] {
+  const projectLabel = resolveProjectLabel(params.projectRoot);
+  return params.entries.map((entry) => {
+    const pathSegments = entry.relativePath.split('/').filter(Boolean);
+    return {
+      key: `workspace:${entry.kind}:${entry.relativePath}`,
+      icon: entry.kind === 'directory' ? 'folder' : 'file',
+      title: entry.name,
+      subtitle: entry.parentRelativePath || projectLabel,
+      description: entry.kind === 'directory'
+        ? params.texts.directoryDescription
+        : params.texts.fileDescription,
+      detailLines: [
+        `${params.texts.projectRootLabel}: ${params.projectRoot}`,
+        entry.relativePath,
+      ],
+      sectionKey: WORKSPACE_SECTION_KEY,
+      sectionLabel: params.texts.workspaceSectionLabel,
+      tokenKind: entry.kind === 'directory'
+        ? CHAT_WORKSPACE_DIRECTORY_TOKEN_KIND
+        : CHAT_WORKSPACE_FILE_TOKEN_KIND,
+      tokenKey: entry.relativePath,
+      pathPreview: {
+        rootLabel: projectLabel,
+        segments: pathSegments.map((label, index) => ({
+          label,
+          kind: index === pathSegments.length - 1 ? entry.kind : 'directory',
+        })),
+      },
+    } satisfies ChatInputSurfaceItem;
+  });
+}
+
+function buildFilesNavigationItem(texts: ContextReferenceInputSurfaceTexts): ChatInputSurfaceItem {
+  return {
+    key: FILES_NAVIGATION_ITEM_KEY,
+    icon: 'files',
+    title: texts.filesLabel,
+    subtitle: texts.filesSubtitle,
+    description: texts.filesDescription,
+    detailLines: [],
+    hintLabel: texts.filesHintLabel,
+    selectionBehavior: 'navigate',
+  };
+}
+
+function buildRootNavigationItem(texts: ContextReferenceInputSurfaceTexts): ChatInputSurfaceItem {
+  return {
+    key: ROOT_NAVIGATION_ITEM_KEY,
+    icon: 'back',
+    title: texts.backLabel,
+    subtitle: '',
+    description: texts.backDescription,
+    detailLines: [],
+    hintLabel: texts.backHintLabel,
+    selectionBehavior: 'navigate',
+  };
+}
+
+export function createContextReferenceInputSurfacePlugin(params: {
+  itemTexts: {
+    context: ContextReferenceInputSurfaceTexts;
+    panelApp: PanelAppInputSurfaceItemTexts;
+  };
+  menuTexts: ChatInputSurfaceMenuTexts;
+  onNavigate: (mode: ContextReferenceMode) => void;
+}): ChatInputSurfacePlugin<ChatInputProductPluginData> {
+  return createInputSurfaceTriggeredPanelPlugin({
+    key: 'context-reference',
+    trigger: CONTEXT_REFERENCE_TRIGGER_SPEC,
+    resolvePanel: ({ data, trigger }) => {
+      const workspaceItems = buildWorkspaceReferenceItems({
+        entries: data.serverPathEntries,
+        projectRoot: data.projectRoot,
+        texts: params.itemTexts.context,
+      });
+      const items = data.referenceMode === 'files'
+        ? [buildRootNavigationItem(params.itemTexts.context), ...workspaceItems]
+        : [
+            buildFilesNavigationItem(params.itemTexts.context),
+            ...(trigger.query ? workspaceItems : []),
+            ...buildPanelAppReferenceItems({
+              entries: data.panelApps,
+              query: trigger.query,
+              sectionLabel: params.itemTexts.context.panelAppSectionLabel,
+              texts: params.itemTexts.panelApp,
+            }),
+          ];
+      const relevantLoading = data.referenceMode === 'files'
+        ? data.isServerPathSearchLoading
+        : data.isPanelAppsLoading || (Boolean(trigger.query) && data.isServerPathSearchLoading);
+      return {
+        isLoading: data.referenceMode === 'files'
+          ? relevantLoading
+          : relevantLoading && items.length === 0,
+        items,
+        notice: data.serverPathSearchError
+          ? {
+              message: `${params.itemTexts.context.searchFailedLabel}: ${data.serverPathSearchError}`,
+              tone: 'error',
+            }
+          : undefined,
+        onSelectItem: (item) => {
+          if (item.key === FILES_NAVIGATION_ITEM_KEY) {
+            params.onNavigate('files');
+          } else if (item.key === ROOT_NAVIGATION_ITEM_KEY) {
+            params.onNavigate('root');
+          }
+        },
+        texts: params.menuTexts,
+      };
+    },
+  });
+}

package/src/features/chat/features/input/input-surface-plugins/slash-command-plugin.utils.ts

@@ -11,7 +11,7 @@ import type { ChatInputBarAdapterTexts } from '@/features/chat/types/chat-input-
 import {
   buildPanelAppInputSurfaceItems,
   type PanelAppInputSurfaceItemTexts,
-} from './panel-app-reference-plugin.utils';
+} from './context-reference-plugin.utils';
 import {
   resolveInputSurfaceMatchTier,
   scoreInputSurfaceSearchCandidate,
@@ -69,6 +69,7 @@ function buildSlashCommandItems(params: {
     })
     .map(({ command }) => ({
       key: `command:${command.key}`,
+      icon: 'command',
       title: command.title,
       subtitle: params.texts.commandSubtitle,
       description: command.description,
@@ -103,9 +104,12 @@ function buildSlashSkillItems(params: {
     [...data.recentSkillValues],
   ).map((item) => ({
     ...item,
+    icon: 'skill',
     hintLabel: skillHintLabel,
-    sectionKey: SLASH_SKILL_SECTION_KEY,
-    sectionLabel: skillSectionLabel,
+    sectionKey: item.sectionKey
+      ? `${SLASH_SKILL_SECTION_KEY}:${item.sectionKey}`
+      : SLASH_SKILL_SECTION_KEY,
+    sectionLabel: item.sectionLabel || skillSectionLabel,
   }));
 }
 
@@ -123,6 +127,7 @@ function buildSlashPanelAppItems(params: {
     texts: params.itemTexts,
   }).map((item) => ({
     ...item,
+    icon: 'panel-app',
     hintLabel: params.panelAppHintLabel,
     sectionKey: SLASH_PANEL_APP_SECTION_KEY,
     sectionLabel: params.panelAppSectionLabel,
@@ -165,6 +170,14 @@ export function createSlashCommandInputSurfacePlugin(params: {
     trigger: CHAT_INPUT_SURFACE_SLASH_TRIGGER_SPEC,
     resolvePanel: (context) => {
       const { data, trigger } = context;
+      const skillItems = buildSlashSkillItems({
+        data,
+        itemTexts: params.itemTexts.skillTexts,
+        query: trigger.query,
+        skillHintLabel: params.labels.skillHintLabel,
+        skillSectionLabel: params.labels.skillSectionLabel,
+      });
+      const skillSectionKeys = [...new Set(skillItems.flatMap((item) => item.sectionKey ? [item.sectionKey] : []))];
       return {
         filterOptions: [
           { key: 'all', label: params.labels.filterAllLabel },
@@ -176,7 +189,7 @@ export function createSlashCommandInputSurfacePlugin(params: {
           {
             key: SLASH_SKILL_SECTION_KEY,
             label: params.labels.filterSkillsLabel,
-            sectionKeys: [SLASH_SKILL_SECTION_KEY],
+            sectionKeys: skillSectionKeys.length > 0 ? skillSectionKeys : [SLASH_SKILL_SECTION_KEY],
           },
           {
             key: SLASH_PANEL_APP_SECTION_KEY,
@@ -195,13 +208,7 @@ export function createSlashCommandInputSurfacePlugin(params: {
               commandSubtitle: params.labels.commandSubtitle,
             },
           }),
-          ...buildSlashSkillItems({
-            data,
-            itemTexts: params.itemTexts.skillTexts,
-            query: trigger.query,
-            skillHintLabel: params.labels.skillHintLabel,
-            skillSectionLabel: params.labels.skillSectionLabel,
-          }),
+          ...skillItems,
           ...buildSlashPanelAppItems({
             data,
             itemTexts: params.itemTexts.panelAppTexts,

package/src/features/chat/features/input/utils/__tests__/chat-composer-state.utils.test.ts

@@ -89,6 +89,32 @@ describe('deriveNcpMessagePartsFromComposer', () => {
     ]);
   });
 
+  it('serializes workspace references without turning them into uploaded file parts', () => {
+    expect(
+      deriveNcpMessagePartsFromComposer(
+        [
+          createChatComposerTokenNode({
+            tokenKind: 'workspace_file',
+            tokenKey: 'src/file name.ts',
+            label: 'file name.ts',
+          }),
+          createChatComposerTextNode(' and '),
+          createChatComposerTokenNode({
+            tokenKind: 'workspace_directory',
+            tokenKey: 'docs/设计',
+            label: '设计',
+          }),
+        ],
+        [],
+      ),
+    ).toEqual([
+      {
+        type: 'text',
+        text: '@file:src%2Ffile%20name.ts and @folder:docs%2F%E8%AE%BE%E8%AE%A1',
+      },
+    ]);
+  });
+
   it('preserves uploaded attachment references when the attachment has a server uri', () => {
     const parts = deriveNcpMessagePartsFromComposer(
       [