@nextclaw/ui 0.14.4 → 0.15.0

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

@@ -1,8 +1,36 @@
 import { describe, expect, it, vi } from 'vitest';
 import { resolveChatInputSurfaceState } from '@nextclaw/agent-chat-ui';
 import { createSlashCommandInputSurfacePlugin } from '@/features/chat/features/input/input-surface-plugins/slash-command-plugin.utils';
+import type { PanelAppEntryView } from '@/shared/lib/api';
 
-function createPlugin(onSelectCommand = vi.fn()) {
+function createPanelApp(
+  overrides: Partial<PanelAppEntryView> & Pick<PanelAppEntryView, 'appId' | 'title'>,
+): PanelAppEntryView {
+  return {
+    id: overrides.id ?? overrides.appId,
+    appId: overrides.appId,
+    fileName: overrides.fileName ?? `${overrides.appId}.panel.html`,
+    kind: overrides.kind ?? 'single-file',
+    title: overrides.title,
+    description: overrides.description,
+    contentPath: overrides.contentPath ?? `/panels/${overrides.appId}.panel.html`,
+    createdAt: overrides.createdAt ?? '2026-06-18T00:00:00.000Z',
+    updatedAt: overrides.updatedAt ?? '2026-06-18T00:00:00.000Z',
+    sizeBytes: overrides.sizeBytes ?? 100,
+    favorite: overrides.favorite ?? false,
+    clientDeclared: overrides.clientDeclared ?? false,
+    clientGranted: overrides.clientGranted ?? false,
+    lastOpenedAt: overrides.lastOpenedAt,
+    openCount: overrides.openCount ?? 0,
+  };
+}
+
+function createPlugin(
+  params: {
+    onSelectCommand?: () => void;
+    onSelectPanelApp?: (appId: string) => void;
+  } = {},
+) {
   return createSlashCommandInputSurfacePlugin({
     commands: [
       {
@@ -11,19 +39,33 @@ function createPlugin(onSelectCommand = vi.fn()) {
         description: 'Open side chat',
         detailLines: ['Creates a child session on first send'],
         keywords: ['side', 'chat'],
-        onSelect: onSelectCommand,
+        onSelect: params.onSelectCommand ?? vi.fn(),
       },
     ],
     itemTexts: {
-      noSkillDescription: 'No description',
-      slashSkillScopeLabel: 'Scope',
-      slashSkillSpecLabel: 'Spec',
-      slashSkillSubtitle: 'Skill',
+      panelAppTexts: {
+        appIdLabel: 'App ID',
+        fileLabel: 'File',
+        noDescriptionLabel: 'No panel app description',
+        subtitle: 'Panel App',
+      },
+      skillTexts: {
+        noSkillDescription: 'No description',
+        slashSkillScopeLabel: 'Scope',
+        slashSkillSpecLabel: 'Spec',
+        slashSkillSubtitle: 'Skill',
+      },
     },
     labels: {
       commandHintLabel: 'Run command',
       commandSectionLabel: 'Commands',
       commandSubtitle: 'Command',
+      filterAllLabel: 'All',
+      filterCommandsLabel: 'Commands',
+      filterPanelAppsLabel: 'Panel Apps',
+      filterSkillsLabel: 'Skills',
+      panelAppHintLabel: 'Open panel app',
+      panelAppSectionLabel: 'Panel Apps',
       skillHintLabel: 'Add skill',
       skillSectionLabel: 'Skills',
     },
@@ -34,6 +76,7 @@ function createPlugin(onSelectCommand = vi.fn()) {
       loadingLabel: 'Loading',
       sectionLabel: 'Slash',
     },
+    onSelectPanelApp: params.onSelectPanelApp ?? vi.fn(),
     onSelectSkill: vi.fn(),
   });
 }
@@ -44,7 +87,13 @@ describe('createSlashCommandInputSurfacePlugin', () => {
       data: {
         isPanelAppsLoading: false,
         isSkillsLoading: false,
-        panelApps: [],
+        panelApps: [
+          createPanelApp({
+            appId: 'task-board',
+            title: 'Task Board',
+            description: 'Track tasks',
+          }),
+        ],
         recentSkillValues: [],
         skillRecords: [
           {
@@ -67,6 +116,13 @@ describe('createSlashCommandInputSurfacePlugin', () => {
     expect(state.panel?.items.map((item) => item.key)).toEqual([
       'command:side-chat',
       'skill:web-search',
+      'panel-app-action:task-board',
+    ]);
+    expect(state.panel?.filterOptions).toEqual([
+      { key: 'all', label: 'All' },
+      { key: 'commands', label: 'Commands', sectionKeys: ['commands'] },
+      { key: 'skills', label: 'Skills', sectionKeys: ['skills'] },
+      { key: 'panel-apps', label: 'Panel Apps', sectionKeys: ['panel-apps'] },
     ]);
     expect(state.panel?.items[0]).toMatchObject({
       sectionKey: 'commands',
@@ -78,6 +134,11 @@ describe('createSlashCommandInputSurfacePlugin', () => {
       sectionLabel: 'Skills',
       hintLabel: 'Add skill',
     });
+    expect(state.panel?.items[2]).toMatchObject({
+      sectionKey: 'panel-apps',
+      sectionLabel: 'Panel Apps',
+      hintLabel: 'Open panel app',
+    });
   });
 
   it('runs a command item through the panel selection handler', () => {
@@ -90,7 +151,7 @@ describe('createSlashCommandInputSurfacePlugin', () => {
         recentSkillValues: [],
         skillRecords: [],
       },
-      plugins: [createPlugin(onSelectCommand)],
+      plugins: [createPlugin({ onSelectCommand })],
       trigger: {
         key: 'slash',
         marker: '/',
@@ -105,4 +166,43 @@ describe('createSlashCommandInputSurfacePlugin', () => {
     state.panel?.onSelectItem?.(item!);
     expect(onSelectCommand).toHaveBeenCalledTimes(1);
   });
+
+  it('opens a panel app action without turning it into an input token', () => {
+    const onSelectPanelApp = vi.fn();
+    const state = resolveChatInputSurfaceState({
+      data: {
+        isPanelAppsLoading: false,
+        isSkillsLoading: false,
+        panelApps: [
+          createPanelApp({
+            appId: 'task-board',
+            title: 'Task Board',
+            description: 'Track tasks',
+          }),
+        ],
+        recentSkillValues: [],
+        skillRecords: [],
+      },
+      plugins: [createPlugin({ onSelectPanelApp })],
+      trigger: {
+        key: 'slash',
+        marker: '/',
+        query: 'task',
+        start: 0,
+        end: 5,
+      },
+    });
+
+    const item = state.panel?.items[0];
+    expect(item).toMatchObject({
+      key: 'panel-app-action:task-board',
+      title: 'Task Board',
+      sectionKey: 'panel-apps',
+    });
+    expect(item).not.toHaveProperty('tokenKind');
+    expect(item).not.toHaveProperty('tokenKey');
+    expect(item).not.toHaveProperty('value');
+    state.panel?.onSelectItem?.(item!);
+    expect(onSelectPanelApp).toHaveBeenCalledWith('task-board');
+  });
 });

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

@@ -21,16 +21,17 @@ function getPanelAppActivityTime(entry: PanelAppEntryView): number {
   return Date.parse(entry.lastOpenedAt ?? entry.updatedAt) || 0;
 }
 
-function buildPanelAppReferenceItems(params: {
+export type PanelAppInputSurfaceItemTexts = {
+  appIdLabel: string;
+  fileLabel: string;
+  noDescriptionLabel: string;
+  subtitle: string;
+};
+
+function resolvePanelAppInputSurfaceEntries(params: {
   entries: readonly PanelAppEntryView[];
   query: string;
-  texts: {
-    appIdLabel: string;
-    fileLabel: string;
-    noDescriptionLabel: string;
-    subtitle: string;
-  };
-}): ChatInputSurfaceItem[] {
+}): PanelAppEntryView[] {
   const collator = new Intl.Collator(undefined, { sensitivity: 'base', numeric: true });
   return params.entries
     .map((entry, order) => ({
@@ -67,8 +68,23 @@ function buildPanelAppReferenceItems(params: {
       const labelCompare = collator.compare(left.entry.title || left.entry.appId, right.entry.title || right.entry.appId);
       return labelCompare || left.order - right.order;
     })
-    .map(({ entry }) => ({
-      key: `panel-app:${entry.appId}`,
+    .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}`,
       title: entry.title || entry.appId,
       subtitle: params.texts.subtitle,
       description: (entry.description ?? '').trim() || params.texts.noDescriptionLabel,
@@ -76,10 +92,30 @@ function buildPanelAppReferenceItems(params: {
         `${params.texts.appIdLabel}: ${entry.appId}`,
         `${params.texts.fileLabel}: ${entry.fileName}`,
       ],
-      tokenKind: 'panel_app',
-      tokenKey: entry.appId,
-      value: entry.appId,
-    }));
+    },
+  }));
+}
+
+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;
+  texts: PanelAppInputSurfaceItemTexts;
+}): ChatInputSurfaceItem[] {
+  return buildPanelAppInputSurfaceItemEntries(params).map(({ entry, item }) => ({
+    ...item,
+    tokenKind: 'panel_app',
+    tokenKey: entry.appId,
+    value: entry.appId,
+  }));
 }
 
 export function createPanelAppReferenceInputSurfacePlugin(params: {

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

@@ -8,12 +8,18 @@ import {
 import { buildChatSlashItems } from '@/features/chat/features/input/utils/chat-input-bar.utils';
 import type { ChatInputProductPluginData } from './chat-input-product-plugin-adapters.types';
 import type { ChatInputBarAdapterTexts } from '@/features/chat/types/chat-input-bar.types';
+import {
+  buildPanelAppInputSurfaceItems,
+  type PanelAppInputSurfaceItemTexts,
+} from './panel-app-reference-plugin.utils';
 import {
   resolveInputSurfaceMatchTier,
   scoreInputSurfaceSearchCandidate,
 } from './input-surface-search.utils';
 
 const SLASH_COMMAND_SECTION_KEY = 'commands';
+const SLASH_PANEL_APP_KEY_PREFIX = 'panel-app-action';
+const SLASH_PANEL_APP_SECTION_KEY = 'panel-apps';
 const SLASH_SKILL_SECTION_KEY = 'skills';
 
 export type ChatSlashCommandDescriptor = {
@@ -103,20 +109,55 @@ function buildSlashSkillItems(params: {
   }));
 }
 
+function buildSlashPanelAppItems(params: {
+  data: ChatInputProductPluginData;
+  itemTexts: PanelAppInputSurfaceItemTexts;
+  panelAppHintLabel: string;
+  panelAppSectionLabel: string;
+  query: string;
+}): ChatInputSurfaceItem[] {
+  return buildPanelAppInputSurfaceItems({
+    entries: params.data.panelApps,
+    keyPrefix: SLASH_PANEL_APP_KEY_PREFIX,
+    query: params.query,
+    texts: params.itemTexts,
+  }).map((item) => ({
+    ...item,
+    hintLabel: params.panelAppHintLabel,
+    sectionKey: SLASH_PANEL_APP_SECTION_KEY,
+    sectionLabel: params.panelAppSectionLabel,
+  }));
+}
+
+function resolveSlashPanelAppId(item: ChatInputSurfaceItem): string | null {
+  const prefix = `${SLASH_PANEL_APP_KEY_PREFIX}:`;
+  return item.key.startsWith(prefix) ? item.key.slice(prefix.length) : null;
+}
+
 export function createSlashCommandInputSurfacePlugin(params: {
   commands: readonly ChatSlashCommandDescriptor[];
   menuTexts: ChatInputSurfaceMenuTexts;
-  itemTexts: Pick<
-    ChatInputBarAdapterTexts,
-    'slashSkillSubtitle' | 'slashSkillSpecLabel' | 'slashSkillScopeLabel' | 'noSkillDescription'
-  >;
+  itemTexts: {
+    panelAppTexts: PanelAppInputSurfaceItemTexts;
+    skillTexts: Pick<
+      ChatInputBarAdapterTexts,
+      'slashSkillSubtitle' | 'slashSkillSpecLabel' | 'slashSkillScopeLabel' | 'noSkillDescription'
+    >;
+  };
   labels: {
     commandHintLabel: string;
     commandSectionLabel: string;
     commandSubtitle: string;
+    filterAllLabel: string;
+    filterCommandsLabel: string;
+    filterPanelAppsLabel: string;
+    filterSkillsLabel: string;
+    panelAppHintLabel: string;
+    panelAppSectionLabel: string;
     skillHintLabel: string;
     skillSectionLabel: string;
   };
+  onSelectPanelApp: (appId: string) => void;
   onSelectSkill?: (skillRef: string) => void;
 }): ChatInputSurfacePlugin<ChatInputProductPluginData> {
   return createInputSurfaceTriggeredPanelPlugin({
@@ -125,7 +166,25 @@ export function createSlashCommandInputSurfacePlugin(params: {
     resolvePanel: (context) => {
       const { data, trigger } = context;
       return {
-        isLoading: data.isSkillsLoading,
+        filterOptions: [
+          { key: 'all', label: params.labels.filterAllLabel },
+          {
+            key: SLASH_COMMAND_SECTION_KEY,
+            label: params.labels.filterCommandsLabel,
+            sectionKeys: [SLASH_COMMAND_SECTION_KEY],
+          },
+          {
+            key: SLASH_SKILL_SECTION_KEY,
+            label: params.labels.filterSkillsLabel,
+            sectionKeys: [SLASH_SKILL_SECTION_KEY],
+          },
+          {
+            key: SLASH_PANEL_APP_SECTION_KEY,
+            label: params.labels.filterPanelAppsLabel,
+            sectionKeys: [SLASH_PANEL_APP_SECTION_KEY],
+          },
+        ],
+        isLoading: data.isPanelAppsLoading || data.isSkillsLoading,
         items: [
           ...buildSlashCommandItems({
             commands: params.commands,
@@ -138,17 +197,29 @@ export function createSlashCommandInputSurfacePlugin(params: {
           }),
           ...buildSlashSkillItems({
             data,
-            itemTexts: params.itemTexts,
+            itemTexts: params.itemTexts.skillTexts,
             query: trigger.query,
             skillHintLabel: params.labels.skillHintLabel,
             skillSectionLabel: params.labels.skillSectionLabel,
           }),
+          ...buildSlashPanelAppItems({
+            data,
+            itemTexts: params.itemTexts.panelAppTexts,
+            panelAppHintLabel: params.labels.panelAppHintLabel,
+            panelAppSectionLabel: params.labels.panelAppSectionLabel,
+            query: trigger.query,
+          }),
         ],
         onSelectItem: (item) => {
           if (item.key.startsWith('command:')) {
             params.commands.find((command) => item.key === `command:${command.key}`)?.onSelect();
             return;
           }
+          const panelAppId = resolveSlashPanelAppId(item);
+          if (panelAppId) {
+            params.onSelectPanelApp(panelAppId);
+            return;
+          }
           const skillRef = item.tokenKey ?? item.value;
           if (skillRef) {
             params.onSelectSkill?.(skillRef);

package/src/features/chat/features/message/components/__tests__/chat-inline-panel-app-card.test.tsx

@@ -52,27 +52,19 @@ beforeEach(() => {
   mocks.handleIframeMessage.mockReset();
   mocks.open.mockReset();
   mocks.openTarget.mockReset();
+  mocks.panelApps.isLoading = false;
 });
 
 it('renders inline panel apps as bounded card-mode iframes with an expand action', () => {
   render(<ChatInlinePanelAppCard panelApp={{
-    action: {
-      kind: 'show-content',
-      label: 'Show content',
-      request: {
-        placement: 'side_panel',
-        target: {
-          payload: { appId: 'weather-card' },
-          type: 'panel_app',
-        },
-        title: 'Weather',
-      },
-    },
     appId: 'weather-card',
     title: 'Weather',
   }} />);
 
   const iframe = screen.getByTitle('Weather');
+  const card = iframe.closest('[data-chat-message-wide-content="true"]');
+  expect(card?.className).toContain('w-full');
+  expect(card?.className).toContain('max-w-[48rem]');
   expect(iframe.getAttribute('src')).toBe(
     '/api/panel-apps/weather-card/content?nextclawDisplayMode=card&nextclawPlacement=inline',
   );
@@ -87,3 +79,20 @@ it('renders inline panel apps as bounded card-mode iframes with an expand action
     url: '/api/panel-apps/weather-card/content',
   }));
 });
+
+it('can render inline panel apps without a side-panel expand action', () => {
+  render(
+    <ChatInlinePanelAppCard
+      panelApp={{
+        appId: 'weather-card',
+        title: 'Weather',
+      }}
+      showExpandAction={false}
+    />,
+  );
+
+  expect(screen.getByTitle('Weather')).toBeTruthy();
+  expect(screen.queryByLabelText('chatPanelCardExpand')).toBeNull();
+  expect(mocks.open).not.toHaveBeenCalled();
+  expect(mocks.openTarget).not.toHaveBeenCalled();
+});

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

@@ -1,4 +1,5 @@
 import { render, screen } from "@testing-library/react";
+import { isValidElement } from "react";
 import type { NcpMessage } from "@nextclaw/ncp";
 import { beforeEach, expect, it, vi } from "vitest";
 import { ChatMessageListContainer } from "@/features/chat/features/message/components/chat-message-list.container";
@@ -7,6 +8,8 @@ const captures = vi.hoisted(() => ({
   renders: [] as Array<{
     messages: unknown[];
     onToolAction?: (action: unknown) => void;
+    onFileOpen?: (action: unknown) => void;
+    renderInlineDisplay?: (display: unknown) => unknown;
     renderPanelAppCard?: (panelApp: unknown) => unknown;
     texts?: Record<string, unknown>;
   }>,
@@ -22,6 +25,8 @@ vi.mock("@nextclaw/agent-chat-ui", async (importOriginal) => {
     ChatMessageList: (props: {
       messages: unknown[];
       onToolAction?: (action: unknown) => void;
+      onFileOpen?: (action: unknown) => void;
+      renderInlineDisplay?: (display: unknown) => unknown;
       renderPanelAppCard?: (panelApp: unknown) => unknown;
       texts?: Record<string, unknown>;
     }) => {
@@ -171,6 +176,130 @@ it("adapts persisted inline token metadata into markdown token data", () => {
   });
 });
 
+it("adds a completed assistant process summary without inventing a duration", () => {
+  const userMessage = {
+    id: "user-process-request",
+    sessionId: "session-1",
+    role: "user",
+    status: "final",
+    timestamp: "2026-03-31T10:00:00.000Z",
+    parts: [{ type: "text", text: "please inspect the repo" }],
+  } satisfies NcpMessage;
+  const assistantMessage = {
+    id: "assistant-process-result",
+    sessionId: "session-1",
+    role: "assistant",
+    status: "final",
+    timestamp: "2026-03-31T10:01:03.000Z",
+    parts: [
+      {
+        type: "reasoning",
+        text: "Inspecting current state.",
+      },
+      {
+        type: "tool-invocation",
+        toolCallId: "tool-1",
+        toolName: "exec_command",
+        state: "result",
+        args: "{\"cmd\":\"git status\"}",
+        result: "clean",
+      },
+      {
+        type: "text",
+        text: "Done.",
+      },
+    ],
+  } satisfies NcpMessage;
+
+  render(
+    <ChatMessageListContainer
+      messages={[userMessage, assistantMessage]}
+      isSending={false}
+    />,
+  );
+
+  const renderedMessages =
+    captures.renders[captures.renders.length - 1]?.messages ?? [];
+  expect(renderedMessages[1]).toMatchObject({
+    processSummary: {
+      label: "chatProcessSummaryProcessed",
+    },
+  });
+});
+
+it("derives completed assistant process duration from message lifecycle", () => {
+  const assistantMessage = {
+    id: "assistant-process-result",
+    sessionId: "session-1",
+    role: "assistant",
+    status: "final",
+    timestamp: "2026-03-31T10:01:03.000Z",
+    lifecycle: {
+      startedAt: "2026-03-31T10:00:00.000Z",
+      endedAt: "2026-03-31T10:03:51.000Z",
+    },
+    parts: [
+      {
+        type: "reasoning",
+        text: "Inspecting current state.",
+      },
+      {
+        type: "tool-invocation",
+        toolCallId: "tool-1",
+        toolName: "exec_command",
+        state: "result",
+        args: "{\"cmd\":\"git status\"}",
+        result: "clean",
+      },
+      {
+        type: "text",
+        text: "Done.",
+      },
+    ],
+  } satisfies NcpMessage;
+
+  render(
+    <ChatMessageListContainer
+      messages={[assistantMessage]}
+      isSending={false}
+    />,
+  );
+
+  const renderedMessages =
+    captures.renders[captures.renders.length - 1]?.messages ?? [];
+  expect(renderedMessages[0]).toMatchObject({
+    processSummary: {
+      label: "chatProcessSummaryProcessed 3m 51s",
+    },
+  });
+});
+
+it("wires markdown file link actions to the workspace file preview manager", () => {
+  const message = {
+    id: "assistant-file-link",
+    sessionId: "session-1",
+    role: "assistant",
+    status: "final",
+    timestamp: "2026-03-31T10:00:00.000Z",
+    parts: [
+      {
+        type: "text",
+        text: "[particle-cosmos.html](/Users/peiwang/Downloads/particle-cosmos.html)",
+      },
+    ],
+  } satisfies NcpMessage;
+  const action = {
+    path: "/Users/peiwang/Downloads/particle-cosmos.html",
+    label: "particle-cosmos.html",
+    viewMode: "preview",
+  };
+
+  render(<ChatMessageListContainer messages={[message]} isSending={false} />);
+  captures.renders[captures.renders.length - 1]?.onFileOpen?.(action);
+
+  expect(captures.openFilePreview).toHaveBeenCalledWith(action);
+});
+
 it("renders context inheritance as a divider without repeating inherited messages", () => {
   const inheritedMessage = {
     id: "child-session:inherited:1",
@@ -294,6 +423,43 @@ 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", () => {
+  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();
+});
+
+it("keeps inline panel app displays expandable from the card header", () => {
+  render(<ChatMessageListContainer messages={[]} isSending={false} />);
+
+  const renderInlineDisplay =
+    captures.renders[captures.renders.length - 1]?.renderInlineDisplay;
+  const rendered = renderInlineDisplay?.({
+    target: {
+      type: "panel_app",
+      payload: { appId: "weather-card" },
+    },
+    title: "Weather",
+  });
+
+  if (!isValidElement<{ showExpandAction?: boolean }>(rendered)) {
+    throw new Error("Expected inline panel app renderer to return a React element");
+  }
+  expect(rendered.props.showExpandAction).toBeUndefined();
+});
+
 it("renders context compaction as an in-flow divider instead of a chat message", () => {
   const beforeMessage = {
     id: "message-before",