@nextclaw/ui 0.14.0 → 0.14.1-beta.1

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

@@ -1,10 +1,9 @@
 import {
   buildChatSlashItems,
   buildModelToolbarSelect,
-  buildSelectedSkillItems,
   buildSkillPickerModel
-} from '../chat-input-bar.utils';
-import type { ChatSkillRecord } from '../chat-input-bar.utils';
+} from '@/features/chat/features/input/utils/chat-input-bar.utils';
+import type { ChatSkillRecord } from '@/features/chat/features/input/utils/chat-input-bar.utils';
 
 function createSkillRecord(partial: Partial<ChatSkillRecord>): ChatSkillRecord {
   return {
@@ -14,6 +13,20 @@ function createSkillRecord(partial: Partial<ChatSkillRecord>): ChatSkillRecord {
   };
 }
 
+function createModelTexts() {
+  return {
+    modelSelectPlaceholder: 'Select model',
+    modelNoOptionsLabel: 'No models',
+    modelSearchPlaceholder: 'Search models',
+    modelSearchEmptyLabel: 'No matching models',
+    favoriteModelsLabel: 'Favorites',
+    favoriteModelLabel: 'Favorite model',
+    unfavoriteModelLabel: 'Remove favorite',
+    recentModelsLabel: 'Recent',
+    allModelsLabel: 'All models'
+  };
+}
+
 describe('buildChatSlashItems', () => {
   const texts = {
     slashSkillSubtitle: 'Skill',
@@ -72,20 +85,6 @@ describe('buildChatSlashItems', () => {
   });
 });
 
-describe('buildSelectedSkillItems', () => {
-  it('keeps selected specs and resolves labels when available', () => {
-    const chips = buildSelectedSkillItems(
-      ['web-search', 'missing-skill'],
-      [createSkillRecord({ key: 'web-search', label: 'Web Search' })]
-    );
-
-    expect(chips).toEqual([
-      { key: 'web-search', label: 'Web Search' },
-      { key: 'missing-skill', label: 'missing-skill' }
-    ]);
-  });
-});
-
 describe('buildSkillPickerModel', () => {
   it('builds a stable semantic model for toolbar skill picker', () => {
     const onSelectedKeysChange = vi.fn();
@@ -203,12 +202,7 @@ describe('buildModelToolbarSelect', () => {
       isModelOptionsLoading: false,
       hasModelOptions: true,
       onValueChange,
-      texts: {
-        modelSelectPlaceholder: 'Select model',
-        modelNoOptionsLabel: 'No models',
-        recentModelsLabel: 'Recent',
-        allModelsLabel: 'All models'
-      }
+      texts: createModelTexts()
     });
 
     expect(select.value).toBe('minimax/MiniMax-M2.7');
@@ -233,12 +227,7 @@ describe('buildModelToolbarSelect', () => {
       isModelOptionsLoading: false,
       hasModelOptions: true,
       onValueChange: vi.fn(),
-      texts: {
-        modelSelectPlaceholder: 'Select model',
-        modelNoOptionsLabel: 'No models',
-        recentModelsLabel: 'Recent',
-        allModelsLabel: 'All models'
-      }
+      texts: createModelTexts()
     });
 
     expect(select.selectedLabel).toBe('Anthropic/claude-sonnet-4-very-long-name');
@@ -269,12 +258,7 @@ describe('buildModelToolbarSelect', () => {
       isModelOptionsLoading: false,
       hasModelOptions: true,
       onValueChange: vi.fn(),
-      texts: {
-        modelSelectPlaceholder: 'Select model',
-        modelNoOptionsLabel: 'No models',
-        recentModelsLabel: 'Recent',
-        allModelsLabel: 'All models'
-      }
+      texts: createModelTexts()
     });
 
     expect(select.groups).toEqual([
@@ -305,6 +289,52 @@ describe('buildModelToolbarSelect', () => {
     ]);
   });
 
+  it('groups favorite models ahead of recent models without duplicates', () => {
+    const onFavoriteToggle = vi.fn();
+    const select = buildModelToolbarSelect({
+      modelOptions: [
+        {
+          value: 'openai/gpt-5',
+          modelLabel: 'gpt-5',
+          providerLabel: 'OpenAI'
+        },
+        {
+          value: 'anthropic/claude-sonnet-4',
+          modelLabel: 'claude-sonnet-4',
+          providerLabel: 'Anthropic'
+        },
+        {
+          value: 'minimax/MiniMax-M2.7',
+          modelLabel: 'MiniMax-M2.7',
+          providerLabel: 'MiniMax'
+        }
+      ],
+      favoriteModelValues: ['openai/gpt-5'],
+      recentModelValues: ['anthropic/claude-sonnet-4', 'openai/gpt-5'],
+      selectedModel: 'openai/gpt-5',
+      isModelOptionsLoading: false,
+      hasModelOptions: true,
+      onFavoriteToggle,
+      onValueChange: vi.fn(),
+      texts: createModelTexts()
+    });
+
+    expect(select.groups?.map((group) => group.key)).toEqual([
+      'favorite-models',
+      'recent-models',
+      'all-models'
+    ]);
+    expect(select.groups?.[0]?.options.map((option) => option.value)).toEqual(['openai/gpt-5']);
+    expect(select.groups?.[1]?.options.map((option) => option.value)).toEqual(['anthropic/claude-sonnet-4']);
+    expect(select.groups?.[2]?.options.map((option) => option.value)).toEqual(['minimax/MiniMax-M2.7']);
+    expect(select.optionAction).toMatchObject({
+      kind: 'favorite',
+      activeValues: ['openai/gpt-5'],
+      activeLabel: 'Remove favorite',
+      inactiveLabel: 'Favorite model'
+    });
+  });
+
   it('preserves recent model order from newest to oldest', () => {
     const select = buildModelToolbarSelect({
       modelOptions: [
@@ -329,12 +359,7 @@ describe('buildModelToolbarSelect', () => {
       isModelOptionsLoading: false,
       hasModelOptions: true,
       onValueChange: vi.fn(),
-      texts: {
-        modelSelectPlaceholder: 'Select model',
-        modelNoOptionsLabel: 'No models',
-        recentModelsLabel: 'Recent',
-        allModelsLabel: 'All models'
-      }
+      texts: createModelTexts()
     });
 
     expect(select.groups?.[0]?.options.map((option) => option.value)).toEqual([

package/src/features/chat/features/input/utils/__tests__/ncp-chat-input-availability.utils.test.ts

@@ -19,6 +19,7 @@ function createSnapshot(
     pendingSessionType: 'native',
     pendingProjectRoot: null,
     pendingProjectRootSessionKey: null,
+    defaultProjectRoot: null,
     defaultSessionType: 'native',
     canStopGeneration: false,
     stopDisabledReason: null,

package/src/features/chat/features/input/utils/chat-input-bar.utils.ts

@@ -1,5 +1,4 @@
 import type {
-  ChatSelectedItem,
   ChatSkillPickerOption,
   ChatSkillPickerProps,
   ChatSlashItem,
@@ -7,7 +6,6 @@ import type {
 export {
   buildModelStateHint,
   buildModelToolbarSelect,
-  buildSessionTypeToolbarSelect,
   buildThinkingToolbarSelect,
 } from "./chat-input-toolbar.utils";
 import type {
@@ -35,14 +33,6 @@ const SLASH_ITEM_MATCH_SCORE = {
   fallback: 1
 } as const;
 
-export function resolveSlashQuery(draft: string): string | null {
-  const match = /^\/([^\s]*)$/.exec(draft);
-  if (!match) {
-    return null;
-  }
-  return (match[1] ?? '').trim().toLowerCase();
-}
-
 function normalizeSearchText(value: string | null | undefined): string {
   return (value ?? '').trim().toLowerCase();
 }
@@ -192,20 +182,7 @@ export function buildChatSlashItems(
     }));
 }
 
-export function buildSelectedSkillItems(
-  selectedSkills: string[],
-  skillRecords: ChatSkillRecord[]
-): ChatSelectedItem[] {
-  return selectedSkills.map((spec) => {
-    const matched = skillRecords.find((record) => record.key === spec);
-    return {
-      key: spec,
-      label: matched?.label || spec
-    };
-  });
-}
-
-export function buildSkillPickerOptions(skillRecords: ChatSkillRecord[]): ChatSkillPickerOption[] {
+function buildSkillPickerOptions(skillRecords: ChatSkillRecord[]): ChatSkillPickerOption[] {
   return skillRecords.map((record) => ({
     key: record.key,
     label: record.label,
@@ -231,8 +208,17 @@ export function buildSkillPickerModel(params: {
     allSkillsLabel: string;
   };
 }): ChatSkillPickerProps {
-  const prioritizedSkillRecords = prioritizeSkillRecords(params.skillRecords, params.recentSkillValues ?? []);
-  const recentKeySet = new Set(params.groupedRecentSkillValues ?? []);
+  const {
+    groupedRecentSkillValues,
+    isLoading,
+    onSelectedKeysChange,
+    recentSkillValues,
+    selectedSkills,
+    skillRecords,
+    texts,
+  } = params;
+  const prioritizedSkillRecords = prioritizeSkillRecords(skillRecords, recentSkillValues ?? []);
+  const recentKeySet = new Set(groupedRecentSkillValues ?? []);
   const recentSkillOptions = buildSkillPickerOptions(
     prioritizedSkillRecords.filter((record) => recentKeySet.has(record.key))
   );
@@ -240,12 +226,12 @@ export function buildSkillPickerModel(params: {
     prioritizedSkillRecords.filter((record) => !recentKeySet.has(record.key))
   );
   return {
-    title: params.texts.title,
-    searchPlaceholder: params.texts.searchPlaceholder,
-    emptyLabel: params.texts.emptyLabel,
-    loadingLabel: params.texts.loadingLabel,
-    isLoading: params.isLoading,
-    manageLabel: params.texts.manageLabel,
+    title: texts.title,
+    searchPlaceholder: texts.searchPlaceholder,
+    emptyLabel: texts.emptyLabel,
+    loadingLabel: texts.loadingLabel,
+    isLoading,
+    manageLabel: texts.manageLabel,
     manageHref: '/marketplace/skills',
     options: buildSkillPickerOptions(prioritizedSkillRecords),
     groups:
@@ -253,17 +239,17 @@ export function buildSkillPickerModel(params: {
         ? [
             {
               key: 'recent-skills',
-              label: params.texts.recentSkillsLabel,
+              label: texts.recentSkillsLabel,
               options: recentSkillOptions
             },
             {
               key: 'all-skills',
-              label: params.texts.allSkillsLabel,
+              label: texts.allSkillsLabel,
               options: remainingSkillOptions
             }
           ].filter((group) => group.options.length > 0)
         : undefined,
-    selectedKeys: params.selectedSkills,
-    onSelectedKeysChange: params.onSelectedKeysChange
+    selectedKeys: selectedSkills,
+    onSelectedKeysChange
   };
 }

package/src/features/chat/features/input/utils/chat-input-toolbar.utils.ts

@@ -35,10 +35,16 @@ export function buildModelStateHint(params: {
     "noModelOptionsLabel" | "configureProviderLabel"
   >;
 }): ChatInlineHint | null {
-  if (!params.isModelOptionsLoading && !params.isModelOptionsEmpty) {
+  const {
+    isModelOptionsEmpty,
+    isModelOptionsLoading,
+    onGoToProviders,
+    texts,
+  } = params;
+  if (!isModelOptionsLoading && !isModelOptionsEmpty) {
     return null;
   }
-  if (params.isModelOptionsLoading) {
+  if (isModelOptionsLoading) {
     return {
       tone: "neutral",
       loading: true,
@@ -46,25 +52,40 @@ export function buildModelStateHint(params: {
   }
   return {
     tone: "warning",
-    text: params.texts.noModelOptionsLabel,
-    actionLabel: params.texts.configureProviderLabel,
-    onAction: params.onGoToProviders,
+    text: texts.noModelOptionsLabel,
+    actionLabel: texts.configureProviderLabel,
+    onAction: onGoToProviders,
   };
 }
 
 export function buildModelToolbarSelect({
-  modelOptions, recentModelValues, selectedModel, isModelOptionsLoading, hasModelOptions, onValueChange, texts,
+  modelOptions,
+  favoriteModelValues,
+  recentModelValues,
+  selectedModel,
+  isModelOptionsLoading,
+  hasModelOptions,
+  onFavoriteToggle,
+  onValueChange,
+  texts,
 }: {
   modelOptions: ChatModelRecord[];
+  favoriteModelValues?: string[];
   recentModelValues?: string[];
   selectedModel: string;
   isModelOptionsLoading: boolean;
   hasModelOptions: boolean;
+  onFavoriteToggle?: (value: string, favorite: boolean) => void;
   onValueChange: (value: string) => void;
   texts: Pick<
     ChatInputBarAdapterTexts,
     | "modelSelectPlaceholder"
     | "modelNoOptionsLabel"
+    | "modelSearchPlaceholder"
+    | "modelSearchEmptyLabel"
+    | "favoriteModelsLabel"
+    | "favoriteModelLabel"
+    | "unfavoriteModelLabel"
     | "recentModelsLabel"
     | "allModelsLabel"
   >;
@@ -76,19 +97,33 @@ export function buildModelToolbarSelect({
   const resolvedValue = hasModelOptions
     ? resolvedModelOption?.value
     : undefined;
-  const recentValueSet = new Set(recentModelValues ?? []);
   const modelOptionMap = new Map(
     modelOptions.map((option) => [option.value, option] as const),
   );
-  const recentOptions = (recentModelValues ?? [])
+  const favoriteOptions = (favoriteModelValues ?? [])
     .map((value) => modelOptionMap.get(value))
     .filter((option): option is ChatModelRecord => Boolean(option));
+  const favoriteValueSet = new Set(favoriteOptions.map((option) => option.value));
+  const recentOptions = (recentModelValues ?? [])
+    .map((value) => modelOptionMap.get(value))
+    .filter(
+      (option): option is ChatModelRecord =>
+        option !== undefined && !favoriteValueSet.has(option.value),
+    );
+  const recentValueSet = new Set(recentOptions.map((option) => option.value));
   const remainingOptions = modelOptions.filter(
-    (option) => !recentValueSet.has(option.value),
+    (option) => !favoriteValueSet.has(option.value) && !recentValueSet.has(option.value),
   );
-  const optionGroups =
-    recentOptions.length > 0
-      ? [
+  const optionGroups = favoriteOptions.length > 0 || recentOptions.length > 0
+    ? [
+          {
+            key: "favorite-models",
+            label: texts.favoriteModelsLabel,
+            options: favoriteOptions.map((option) => ({
+              value: option.value,
+              label: formatModelOptionLabel(option),
+            })),
+          },
           {
             key: "recent-models",
             label: texts.recentModelsLabel,
@@ -106,7 +141,7 @@ export function buildModelToolbarSelect({
             })),
           },
         ].filter((group) => group.options.length > 0)
-      : undefined;
+    : undefined;
 
   return {
     key: "model",
@@ -124,37 +159,23 @@ export function buildModelToolbarSelect({
     disabled: !hasModelOptions,
     loading: isModelOptionsLoading,
     emptyLabel: texts.modelNoOptionsLabel,
+    search: {
+      placeholder: texts.modelSearchPlaceholder,
+      emptyLabel: texts.modelSearchEmptyLabel,
+    },
+    optionAction: onFavoriteToggle
+      ? {
+          kind: "favorite",
+          activeValues: favoriteOptions.map((option) => option.value),
+          activeLabel: texts.unfavoriteModelLabel,
+          inactiveLabel: texts.favoriteModelLabel,
+          onToggle: onFavoriteToggle,
+        }
+      : undefined,
     onValueChange,
   };
 }
 
-export function buildSessionTypeToolbarSelect(params: {
-  selectedSessionType?: string;
-  selectedSessionTypeOption: { value: string; label: string } | null;
-  sessionTypeOptions: Array<{ value: string; label: string }>;
-  onValueChange: (value: string) => void;
-  canEditSessionType: boolean;
-  shouldShow: boolean;
-  texts: Pick<ChatInputBarAdapterTexts, "sessionTypePlaceholder">;
-}): ChatToolbarSelect | null {
-  if (!params.shouldShow) {
-    return null;
-  }
-
-  return {
-    key: "session-type",
-    value: params.selectedSessionType,
-    placeholder: params.texts.sessionTypePlaceholder,
-    selectedLabel: params.selectedSessionTypeOption?.label,
-    options: params.sessionTypeOptions.map((option) => ({
-      value: option.value,
-      label: option.label,
-    })),
-    disabled: !params.canEditSessionType,
-    onValueChange: params.onValueChange,
-  };
-}
-
 export function buildThinkingToolbarSelect(params: {
   supportedLevels: ChatThinkingLevel[];
   selectedThinkingLevel: ChatThinkingLevel | null;
@@ -162,31 +183,38 @@ export function buildThinkingToolbarSelect(params: {
   onValueChange: (value: ChatThinkingLevel) => void;
   texts: Pick<ChatInputBarAdapterTexts, "thinkingLabels">;
 }): ChatToolbarSelect | null {
-  if (params.supportedLevels.length === 0) {
+  const {
+    defaultThinkingLevel,
+    onValueChange,
+    selectedThinkingLevel,
+    supportedLevels,
+    texts,
+  } = params;
+  if (supportedLevels.length === 0) {
     return null;
   }
 
-  const options = normalizeThinkingLevels(params.supportedLevels);
+  const options = normalizeThinkingLevels(supportedLevels);
   const fallback = options.includes("off") ? "off" : options[0];
   const resolvedValue =
-    (params.selectedThinkingLevel &&
-      options.includes(params.selectedThinkingLevel) &&
-      params.selectedThinkingLevel) ||
-    (params.defaultThinkingLevel &&
-      options.includes(params.defaultThinkingLevel) &&
-      params.defaultThinkingLevel) ||
+    (selectedThinkingLevel &&
+      options.includes(selectedThinkingLevel) &&
+      selectedThinkingLevel) ||
+    (defaultThinkingLevel &&
+      options.includes(defaultThinkingLevel) &&
+      defaultThinkingLevel) ||
     fallback;
 
   return {
     key: "thinking",
     value: resolvedValue,
-    placeholder: params.texts.thinkingLabels[resolvedValue],
-    selectedLabel: params.texts.thinkingLabels[resolvedValue],
+    placeholder: texts.thinkingLabels[resolvedValue],
+    selectedLabel: texts.thinkingLabels[resolvedValue],
     icon: "brain",
     options: options.map((level) => ({
       value: level,
-      label: params.texts.thinkingLabels[level],
+      label: texts.thinkingLabels[level],
     })),
-    onValueChange: (value) => params.onValueChange(value as ChatThinkingLevel),
+    onValueChange: (value) => onValueChange(value as ChatThinkingLevel),
   };
 }

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

@@ -0,0 +1,89 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { beforeEach, expect, it, vi } from 'vitest';
+import { ChatInlinePanelAppCard } from '@/features/chat/features/message/components/chat-inline-panel-app-card';
+
+const mocks = vi.hoisted(() => ({
+  handleIframeMessage: vi.fn(),
+  open: vi.fn(),
+  openTarget: vi.fn(),
+  panelApps: {
+    data: {
+      entries: [
+        {
+          appId: 'weather-card',
+          contentPath: '/api/panel-apps/weather-card/content',
+          fileName: 'weather-card.panel.html',
+          icon: '*',
+          id: 'weather-card',
+          title: 'Weather',
+        },
+      ],
+    },
+    isLoading: false,
+  },
+}));
+
+vi.mock('@/app/presenters/app.presenter', () => ({
+  getPresenter: () => ({
+    panelAppBridgeManager: {
+      handleIframeMessage: mocks.handleIframeMessage,
+    },
+  }),
+}));
+
+vi.mock('@/features/panel-apps', () => ({
+  findPanelAppEntryByDisplayId: (entries: Array<{ appId: string; id: string; title: string }>, value: string) =>
+    entries.find((entry) => [entry.appId, entry.id, entry.title].includes(value)) ?? null,
+  usePanelApps: () => mocks.panelApps,
+}));
+
+vi.mock('@/shared/components/doc-browser', () => ({
+  useDocBrowser: () => ({
+    open: mocks.open,
+    openTarget: mocks.openTarget,
+  }),
+}));
+
+vi.mock('@/shared/lib/i18n', () => ({
+  t: (key: string) => key,
+}));
+
+beforeEach(() => {
+  mocks.handleIframeMessage.mockReset();
+  mocks.open.mockReset();
+  mocks.openTarget.mockReset();
+});
+
+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');
+  expect(iframe.getAttribute('src')).toBe(
+    '/api/panel-apps/weather-card/content?nextclawDisplayMode=card&nextclawPlacement=inline',
+  );
+  expect(iframe.getAttribute('scrolling')).toBe('auto');
+
+  fireEvent.click(screen.getByLabelText('chatPanelCardExpand'));
+
+  expect(mocks.openTarget).toHaveBeenCalledWith(expect.objectContaining({
+    dedupeKey: 'panel-app:weather-card',
+    kind: 'panel-app',
+    title: 'Weather',
+    url: '/api/panel-apps/weather-card/content',
+  }));
+});

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

@@ -1,12 +1,13 @@
 import { render } from "@testing-library/react";
 import type { NcpMessage } from "@nextclaw/ncp";
 import { beforeEach, expect, it, vi } from "vitest";
-import { ChatMessageListContainer } from "../chat-message-list.container";
+import { ChatMessageListContainer } from "@/features/chat/features/message/components/chat-message-list.container";
 
 const captures = vi.hoisted(() => ({
   renders: [] as Array<{
     messages: unknown[];
     onToolAction?: (action: unknown) => void;
+    renderPanelAppCard?: (panelApp: unknown) => unknown;
     texts?: Record<string, unknown>;
   }>,
   language: "en",
@@ -21,6 +22,7 @@ vi.mock("@nextclaw/agent-chat-ui", async (importOriginal) => {
     ChatMessageList: (props: {
       messages: unknown[];
       onToolAction?: (action: unknown) => void;
+      renderPanelAppCard?: (panelApp: unknown) => unknown;
       texts?: Record<string, unknown>;
     }) => {
       captures.renders.push(props);
@@ -251,6 +253,12 @@ it("delegates tool actions to the chat thread manager owner", () => {
   expect(captures.handleToolAction).toHaveBeenCalledWith(toolAction);
 });
 
+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));
+});
+
 it("renders context compaction as an in-flow divider instead of a chat message", () => {
   const beforeMessage = {
     id: "message-before",