@nextclaw/ui 0.15.5 → 0.15.6

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,16 +130,19 @@ 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',
@@ -145,9 +153,14 @@ describe('createSlashCommandInputSurfacePlugin', () => {
     const state = resolveChatInputSurfaceState({
       data: {
         isPanelAppsLoading: false,
+        isServerPathSearchLoading: false,
         isSkillsLoading: false,
         panelApps: [],
+        projectRoot: '/tmp/project',
         recentSkillValues: [],
+        referenceMode: 'root',
+        serverPathEntries: [],
+        serverPathSearchError: null,
         skillRecords: [
           {
             key: 'project:review',
@@ -189,9 +202,14 @@ describe('createSlashCommandInputSurfacePlugin', () => {
     const state = resolveChatInputSurfaceState({
       data: {
         isPanelAppsLoading: false,
+        isServerPathSearchLoading: false,
         isSkillsLoading: false,
         panelApps: [],
+        projectRoot: '/tmp/project',
         recentSkillValues: [],
+        referenceMode: 'root',
+        serverPathEntries: [],
+        serverPathSearchError: null,
         skillRecords: [],
       },
       plugins: [createPlugin({ onSelectCommand })],
@@ -215,6 +233,7 @@ describe('createSlashCommandInputSurfacePlugin', () => {
     const state = resolveChatInputSurfaceState({
       data: {
         isPanelAppsLoading: false,
+        isServerPathSearchLoading: false,
         isSkillsLoading: false,
         panelApps: [
           createPanelApp({
@@ -223,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,6 +104,7 @@ function buildSlashSkillItems(params: {
     [...data.recentSkillValues],
   ).map((item) => ({
     ...item,
+    icon: 'skill',
     hintLabel: skillHintLabel,
     sectionKey: item.sectionKey
       ? `${SLASH_SKILL_SECTION_KEY}:${item.sectionKey}`
@@ -125,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,

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(
       [

package/src/features/chat/features/input/utils/__tests__/chat-inline-token.utils.test.ts

@@ -1,8 +1,8 @@
 import { createChatComposerTextNode, createChatComposerTokenNode } from '@nextclaw/agent-chat-ui';
 import {
   buildInlineTokensFromTextProtocol,
-  buildInlineSkillTokensFromComposer,
-  CHAT_UI_INLINE_TOKENS_METADATA_KEY,
+  buildInlineTokensFromComposer,
+  CHAT_INLINE_TOKENS_METADATA_KEY,
   readInlineTokensFromMetadata,
   resolveInlineTokensForText
 } from '@/features/chat/features/input/utils/chat-inline-token.utils';
@@ -10,7 +10,7 @@ import {
 describe('chat-inline-token utils', () => {
   it('builds ordered inline skill tokens from composer nodes', () => {
     expect(
-      buildInlineSkillTokensFromComposer([
+      buildInlineTokensFromComposer([
         createChatComposerTextNode('before '),
         createChatComposerTokenNode({
           tokenKind: 'skill',
@@ -42,7 +42,7 @@ describe('chat-inline-token utils', () => {
   it('reads generic inline token metadata safely', () => {
     expect(
       readInlineTokensFromMetadata({
-        [CHAT_UI_INLINE_TOKENS_METADATA_KEY]: [
+        [CHAT_INLINE_TOKENS_METADATA_KEY]: [
           {
             kind: 'skill',
             key: 'weather',
@@ -97,4 +97,50 @@ describe('chat-inline-token utils', () => {
       }
     ]);
   });
+
+  it('serializes and parses workspace file and directory references', () => {
+    expect(
+      buildInlineTokensFromComposer([
+        createChatComposerTokenNode({
+          tokenKind: 'workspace_file',
+          tokenKey: 'src/file name.ts',
+          label: 'file name.ts',
+        }),
+        createChatComposerTokenNode({
+          tokenKind: 'workspace_directory',
+          tokenKey: 'docs/设计',
+          label: '设计',
+        }),
+      ]),
+    ).toEqual([
+      {
+        kind: 'workspace_file',
+        key: 'src/file name.ts',
+        label: 'file name.ts',
+        rawText: '@file:src%2Ffile%20name.ts',
+      },
+      {
+        kind: 'workspace_directory',
+        key: 'docs/设计',
+        label: '设计',
+        rawText: '@folder:docs%2F%E8%AE%BE%E8%AE%A1',
+      },
+    ]);
+    expect(
+      buildInlineTokensFromTextProtocol('review @file:src%2Ffile%20name.ts and @folder:docs%2F%E8%AE%BE%E8%AE%A1'),
+    ).toEqual([
+      {
+        kind: 'workspace_file',
+        key: 'src/file name.ts',
+        label: 'file name.ts',
+        rawText: '@file:src%2Ffile%20name.ts',
+      },
+      {
+        kind: 'workspace_directory',
+        key: 'docs/设计',
+        label: '设计',
+        rawText: '@folder:docs%2F%E8%AE%BE%E8%AE%A1',
+      },
+    ]);
+  });
 });

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

@@ -10,9 +10,7 @@ import {
 import type { ChatComposerNode } from '@nextclaw/agent-chat-ui';
 import type { NcpMessagePart } from '@nextclaw/ncp';
 import type { NcpDraftAttachment } from '@nextclaw/ncp-react';
-
-const CHAT_SKILL_TOKEN_PREFIX = '$';
-const CHAT_PANEL_APP_TOKEN_PREFIX = '@panel-app:';
+import { serializeChatComposerTokenText } from './chat-composer-token-protocol.utils';
 
 function appendTextPart(parts: NcpMessagePart[], text: string): NcpMessagePart[] {
   if (text.length === 0) {
@@ -110,13 +108,9 @@ export function deriveNcpMessagePartsFromComposer(
       continue;
     }
 
-    if (node.tokenKind === 'skill') {
-      parts = appendTextPart(parts, `${CHAT_SKILL_TOKEN_PREFIX}${node.tokenKey}`);
-      continue;
-    }
-
-    if (node.tokenKind === 'panel_app') {
-      parts = appendTextPart(parts, `${CHAT_PANEL_APP_TOKEN_PREFIX}${node.tokenKey}`);
+    const tokenText = serializeChatComposerTokenText(node);
+    if (tokenText) {
+      parts = appendTextPart(parts, tokenText);
       continue;
     }
 

package/src/features/chat/features/input/utils/chat-composer-token-protocol.utils.ts

@@ -0,0 +1,29 @@
+import {
+  CHAT_WORKSPACE_DIRECTORY_TOKEN_KIND,
+  CHAT_WORKSPACE_FILE_TOKEN_KIND,
+} from '@nextclaw/shared';
+
+const CHAT_SKILL_TOKEN_PREFIX = '$';
+const CHAT_PANEL_APP_TOKEN_PREFIX = '@panel-app:';
+const CHAT_WORKSPACE_FILE_TOKEN_PREFIX = '@file:';
+const CHAT_WORKSPACE_DIRECTORY_TOKEN_PREFIX = '@folder:';
+
+export function serializeChatComposerTokenText(params: {
+  tokenKey: string;
+  tokenKind: string;
+}): string | null {
+  const { tokenKey, tokenKind } = params;
+  if (tokenKind === 'skill') {
+    return `${CHAT_SKILL_TOKEN_PREFIX}${tokenKey}`;
+  }
+  if (tokenKind === 'panel_app') {
+    return `${CHAT_PANEL_APP_TOKEN_PREFIX}${tokenKey}`;
+  }
+  if (tokenKind === CHAT_WORKSPACE_FILE_TOKEN_KIND) {
+    return `${CHAT_WORKSPACE_FILE_TOKEN_PREFIX}${encodeURIComponent(tokenKey)}`;
+  }
+  if (tokenKind === CHAT_WORKSPACE_DIRECTORY_TOKEN_KIND) {
+    return `${CHAT_WORKSPACE_DIRECTORY_TOKEN_PREFIX}${encodeURIComponent(tokenKey)}`;
+  }
+  return null;
+}