@nextclaw/ui 0.15.3 → 0.15.5

package/src/features/chat/components/layout/chat-sidebar-utility-menu.tsx

@@ -1,9 +1,9 @@
 import { NavLink } from "react-router-dom";
 import {
   Popover,
-  PopoverContent,
   PopoverTrigger,
 } from "@/shared/components/ui/popover";
+import { ChatPopoverContent } from "@/features/chat/components/chat-popover-content";
 import {
   Select,
   SelectContent,
@@ -52,12 +52,6 @@ type ChatSidebarUtilityMenuProps = {
   collapsed?: boolean;
 };
 
-function isChatComposerFocusTarget(target: EventTarget | null): boolean {
-  return target instanceof HTMLElement && Boolean(
-    target.closest('.nextclaw-chat-input-bar-shell [role="textbox"][contenteditable="true"]'),
-  );
-}
-
 export function ChatSidebarUtilityMenu({
   isOpen,
   onOpenChange,
@@ -118,15 +112,10 @@ export function ChatSidebarUtilityMenu({
           </button>
         </PopoverTrigger>
       )}
-      <PopoverContent
+      <ChatPopoverContent
         side={collapsed ? "right" : "top"}
         align={collapsed ? "end" : "start"}
         className="w-64 p-2"
-        onFocusOutside={(event) => {
-          if (isChatComposerFocusTarget(event.detail.originalEvent.target)) {
-            event.preventDefault();
-          }
-        }}
       >
         <div className="space-y-1">
           <NavLink
@@ -177,7 +166,7 @@ export function ChatSidebarUtilityMenu({
           onSelect={onSelectLanguage}
           onCloseMenu={() => onOpenChange(false)}
         />
-      </PopoverContent>
+      </ChatPopoverContent>
     </Popover>
   );
 }

package/src/features/chat/features/conversation/components/__tests__/session-conversation-input.streaming.test.tsx

@@ -6,7 +6,7 @@ import {
   type MutableRefObject,
 } from 'react';
 import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
-import { describe, expect, it, vi } from 'vitest';
+import { afterEach, describe, expect, it, vi } from 'vitest';
 import {
   createChatComposerTextNode,
   type ChatComposerNode,
@@ -26,9 +26,14 @@ import type {
   SessionConversationInputSnapshot,
 } from '@/features/chat/features/conversation/hooks/use-session-conversation-input-state';
 import { useSessionConversationInputState } from '@/features/chat/features/conversation/hooks/use-session-conversation-input-state';
+import { useChatMessageLayoutStore } from '@/features/chat/stores/chat-message-layout.store';
 
 const uploadNcpAssetsMock = vi.hoisted(() => vi.fn());
 
+afterEach(() => {
+  useChatMessageLayoutStore.getState().setLayout('card');
+});
+
 vi.mock('@/app/hooks/use-viewport-layout', () => ({
   useViewportLayout: () => ({ isDesktop: true, isMobile: false }),
 }));
@@ -190,6 +195,20 @@ function StreamingSessionConversationInputHarness({
 }
 
 describe('SessionConversationInput streaming stability', () => {
+  it('aligns the default input with the flat message reading track', () => {
+    useChatMessageLayoutStore.getState().setLayout('flat');
+    const controlRef: MutableRefObject<StreamingInputControl | null> = { current: null };
+
+    render(<StreamingSessionConversationInputHarness controlRef={controlRef} />);
+
+    const track = document.querySelector(
+      '[data-chat-conversation-track="flat"][data-chat-conversation-track-width="composer"]',
+    );
+    expect(track?.className).toContain('max-w-[min(54rem,100%)]');
+    expect(track?.querySelector('.nextclaw-chat-input-bar-shell')).toBeTruthy();
+    expect(track?.firstElementChild?.className).toContain('px-0');
+  });
+
   it('keeps IME composition stable while simulated streamed output rerenders the owner', async () => {
     const controlRef: MutableRefObject<StreamingInputControl | null> = { current: null };
     render(<StreamingSessionConversationInputHarness controlRef={controlRef} />);

package/src/features/chat/features/conversation/components/session-conversation-input.tsx

@@ -49,6 +49,8 @@ import {
 } from '@/features/chat/managers/chat-recent-skills.manager';
 
 import { useSessionConversationInputAttachments } from '@/features/chat/features/conversation/hooks/use-session-conversation-input-attachments';
+import { ChatConversationTrack } from '@/features/chat/components/conversation/chat-conversation-track';
+import { useChatMessageLayoutStore } from '@/features/chat/stores/chat-message-layout.store';
 import type { useSessionConversationInputQuery } from '@/features/chat/features/conversation/hooks/use-session-conversation-input-query';
 import type {
   SessionConversationQueuedInput,
@@ -65,6 +67,7 @@ import {
 import { SessionQueuedInputRows } from './session-queued-input-rows';
 
 type SessionConversationInputQuery = ReturnType<typeof useSessionConversationInputQuery>;
+type SkillSource = SessionSkillEntryView['source'];
 
 export type SessionConversationInputController = {
   readonly canStopGeneration: boolean;
@@ -80,15 +83,18 @@ export type SessionConversationInputController = {
 
 function toSkillRecords(
   snapshotRecords: SessionSkillEntryView[],
-  scopeLabels: Record<SessionSkillEntryView['scope'], string>,
+  scopeLabels: Record<SkillSource, string>,
+  groupLabels: Record<SkillSource, string>,
 ): ChatSkillRecord[] {
   return snapshotRecords.map((record) => ({
     key: record.ref,
     label: record.name,
-    scopeLabel: scopeLabels[record.scope],
+    scopeLabel: scopeLabels[record.source],
+    groupKey: record.source,
+    groupLabel: groupLabels[record.source],
     description: record.description,
     descriptionZh: record.descriptionZh,
-    badgeLabel: scopeLabels[record.scope],
+    badgeLabel: scopeLabels[record.source],
   }));
 }
 
@@ -107,12 +113,21 @@ function toModelRecords(snapshotModels: SessionConversationInputQuery['modelOpti
 }
 
 function useSessionConversationInputLabels(language: string) {
-  const skillScopeLabels = useMemo<Record<'builtin' | 'project' | 'workspace', string>>(() => {
+  const { skillGroupLabels, skillScopeLabels } = useMemo(() => {
     void language;
     return {
-      builtin: t('chatSkillScopeBuiltin'),
-      project: t('chatSkillScopeProject'),
-      workspace: t('chatSkillScopeWorkspace'),
+      skillScopeLabels: {
+        builtin: t('chatSkillScopeBuiltin'),
+        global: t('chatSkillScopeGlobal'),
+        project: t('chatSkillScopeProject'),
+        workspace: t('chatSkillScopeWorkspace'),
+      } satisfies Record<SkillSource, string>,
+      skillGroupLabels: {
+        builtin: t('chatSkillGroupBuiltin'),
+        global: t('chatSkillGroupGlobal'),
+        project: t('chatSkillGroupProject'),
+        workspace: t('chatSkillGroupWorkspace'),
+      } satisfies Record<SkillSource, string>,
     };
   }, [language]);
   const slashTexts = useMemo(() => {
@@ -126,6 +141,7 @@ function useSessionConversationInputLabels(language: string) {
   }, [language]);
   return {
     skillScopeLabels,
+    skillGroupLabels,
     slashTexts,
     recentModelsLabel: t('chatPickerRecentModels'),
     allModelsLabel: t('chatPickerAllModels'),
@@ -142,13 +158,15 @@ function useSessionConversationInputLabels(language: string) {
 function useSessionConversationInputCollections(params: {
   modelOptions: SessionConversationInputQuery['modelOptions'];
   skillRecords: SessionSkillEntryView[];
-  skillScopeLabels: Record<'builtin' | 'project' | 'workspace', string>;
+  skillScopeLabels: Record<SkillSource, string>;
+  skillGroupLabels: Record<SkillSource, string>;
 }) {
+  const { modelOptions, skillGroupLabels, skillRecords: sourceSkillRecords, skillScopeLabels } = params;
   const skillRecords = useMemo(
-    () => toSkillRecords(params.skillRecords, params.skillScopeLabels),
-    [params.skillRecords, params.skillScopeLabels],
+    () => toSkillRecords(sourceSkillRecords, skillScopeLabels, skillGroupLabels),
+    [skillGroupLabels, skillScopeLabels, sourceSkillRecords],
   );
-  const modelRecords = useMemo(() => toModelRecords(params.modelOptions), [params.modelOptions]);
+  const modelRecords = useMemo(() => toModelRecords(modelOptions), [modelOptions]);
   return {
     skillRecords,
     modelRecords,
@@ -187,6 +205,7 @@ export const SessionConversationInput = memo(function SessionConversationInput(p
   } = props;
   const presenter = usePresenter();
   const { language } = useI18n();
+  const messageLayout = useChatMessageLayoutStore((state) => state.layout);
   const { isMobile } = useViewportLayout();
   const inputBarRef = useRef<ChatInputBarHandle | null>(null);
   const fileInputRef = useRef<HTMLInputElement | null>(null);
@@ -200,6 +219,7 @@ export const SessionConversationInput = memo(function SessionConversationInput(p
   } = useSessionConversationInputCollections({
     modelOptions: inputQuery.modelOptions,
     skillRecords: inputQuery.skillRecords,
+    skillGroupLabels: labels.skillGroupLabels,
     skillScopeLabels: labels.skillScopeLabels,
   });
   const slashCommands = useMemo(() => {
@@ -389,62 +409,74 @@ export const SessionConversationInput = memo(function SessionConversationInput(p
     selectedSkills: inputSnapshot.selectedSkills,
   });
 
+  const useReadingTrack = surface === 'default' && messageLayout === 'flat';
+  const inputBar = (
+    <ChatInputBar
+      ref={inputBarRef}
+      surface={useReadingTrack ? 'embedded' : surface}
+      sendError={inputSnapshot.sendError}
+      sendErrorDetailsLabel={t('chatErrorDetails', language)}
+      topSlot={controller.queuedInputs.length > 0
+        ? <SessionQueuedInputRows controller={controller} />
+        : null}
+      composer={{
+        nodes: [...inputSnapshot.nodes],
+        placeholder: textareaPlaceholder,
+        disabled: inputDisabled,
+        onNodesChange: handleNodesChange,
+        onFilesAdd: handleFilesAdd,
+        inputSurfaceTriggerSpecs: inputSurfaceState.triggerSpecs,
+        onInputSurfaceTriggerChange: setInputSurfaceTrigger,
+      }}
+      inputSurface={inputSurfaceState.panel ?? undefined}
+      hint={buildModelStateHint({
+        isModelOptionsLoading,
+        isModelOptionsEmpty,
+        onGoToProviders: presenter.chatUiManager.goToProviders,
+        texts: {
+          noModelOptionsLabel: t('chatModelNoOptions'),
+          configureProviderLabel: t('chatGoConfigureProvider'),
+        },
+      })}
+      toolbar={{
+        selects: [],
+        trailingSelects: toolbarSelects,
+        accessories: [
+          {
+            key: 'attach',
+            label: t('chatInputAttach'),
+            icon: 'paperclip' as const,
+            iconOnly: true,
+            disabled: !attachmentSupported || inputDisabled,
+            onClick: () => fileInputRef.current?.click(),
+          },
+        ],
+        skillPicker,
+        actions: {
+          isSending: controller.isSending,
+          canStopGeneration: controller.canStopGeneration,
+          sendDisabled: controller.sendDisabled,
+          stopDisabled: controller.stopDisabled,
+          stopHint: t('chatStopUnavailable'),
+          sendButtonLabel: controller.isSending ? t('chatQueueSend') : t('chatSend'),
+          stopButtonLabel: t('chatStop'),
+          contextWindow,
+          onSend: controller.send,
+          onStop: controller.stop,
+        },
+      }}
+    />
+  );
+
   return (
     <>
-      <ChatInputBar
-        ref={inputBarRef}
-        surface={surface}
-        topSlot={controller.queuedInputs.length > 0
-          ? <SessionQueuedInputRows controller={controller} />
-          : null}
-        composer={{
-          nodes: [...inputSnapshot.nodes],
-          placeholder: textareaPlaceholder,
-          disabled: inputDisabled,
-          onNodesChange: handleNodesChange,
-          onFilesAdd: handleFilesAdd,
-          inputSurfaceTriggerSpecs: inputSurfaceState.triggerSpecs,
-          onInputSurfaceTriggerChange: setInputSurfaceTrigger,
-        }}
-        inputSurface={inputSurfaceState.panel ?? undefined}
-        hint={buildModelStateHint({
-          isModelOptionsLoading,
-          isModelOptionsEmpty,
-          onGoToProviders: presenter.chatUiManager.goToProviders,
-          texts: {
-            noModelOptionsLabel: t('chatModelNoOptions'),
-            configureProviderLabel: t('chatGoConfigureProvider'),
-          },
-        })}
-        toolbar={{
-          selects: [],
-          trailingSelects: toolbarSelects,
-          accessories: [
-            {
-              key: 'attach',
-              label: t('chatInputAttach'),
-              icon: 'paperclip' as const,
-              iconOnly: true,
-              disabled: !attachmentSupported || inputDisabled,
-              onClick: () => fileInputRef.current?.click(),
-            },
-          ],
-          skillPicker,
-          actions: {
-            sendError: inputSnapshot.sendError,
-            isSending: controller.isSending,
-            canStopGeneration: controller.canStopGeneration,
-            sendDisabled: controller.sendDisabled,
-            stopDisabled: controller.stopDisabled,
-            stopHint: t('chatStopUnavailable'),
-            sendButtonLabel: controller.isSending ? t('chatQueueSend') : t('chatSend'),
-            stopButtonLabel: t('chatStop'),
-            contextWindow,
-            onSend: controller.send,
-            onStop: controller.stop,
-          },
-        }}
-      />
+      {useReadingTrack ? (
+        <ChatConversationTrack className="pb-4 pt-2" width="composer">
+          {inputBar}
+        </ChatConversationTrack>
+      ) : (
+        inputBar
+      )}
       <input
         ref={fileInputRef}
         type="file"

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

@@ -141,6 +141,49 @@ describe('createSlashCommandInputSurfacePlugin', () => {
     });
   });
 
+  it('preserves source groups while the skills filter includes every skill section', () => {
+    const state = resolveChatInputSurfaceState({
+      data: {
+        isPanelAppsLoading: false,
+        isSkillsLoading: false,
+        panelApps: [],
+        recentSkillValues: [],
+        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({

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

@@ -104,8 +104,10 @@ function buildSlashSkillItems(params: {
   ).map((item) => ({
     ...item,
     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,
   }));
 }
 
@@ -165,6 +167,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 +186,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 +205,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-input-bar.utils.test.ts

@@ -83,6 +83,25 @@ describe('buildChatSlashItems', () => {
 
     expect(items.map((item) => item.value)).toEqual(['weather', 'web-search', 'docs']);
   });
+
+  it('keeps skill source groups contiguous in their catalog order', () => {
+    const items = buildChatSlashItems(
+      [
+        createSkillRecord({ key: 'project:zeta', label: 'Zeta', groupKey: 'project', groupLabel: 'Project skills' }),
+        createSkillRecord({ key: 'global:alpha', label: 'Alpha', groupKey: 'global', groupLabel: 'Global skills' }),
+        createSkillRecord({ key: 'project:alpha', label: 'Alpha', groupKey: 'project', groupLabel: 'Project skills' }),
+      ],
+      '',
+      texts,
+    );
+
+    expect(items.map((item) => item.value)).toEqual(['project:alpha', 'project:zeta', 'global:alpha']);
+    expect(items.map((item) => [item.sectionKey, item.sectionLabel])).toEqual([
+      ['project', 'Project skills'],
+      ['project', 'Project skills'],
+      ['global', 'Global skills'],
+    ]);
+  });
 });
 
 describe('buildSkillPickerModel', () => {
@@ -158,6 +177,38 @@ describe('buildSkillPickerModel', () => {
     ]);
   });
 
+  it('groups the skill catalog by source when no recent group is visible', () => {
+    const model = buildSkillPickerModel({
+      skillRecords: [
+        createSkillRecord({ key: 'project:review', label: 'Review', groupKey: 'project', groupLabel: 'Project skills' }),
+        createSkillRecord({ key: 'workspace:docs', label: 'Docs', groupKey: 'workspace', groupLabel: 'NextClaw skills' }),
+        createSkillRecord({ key: 'global:browser', label: 'Browser', groupKey: 'global', groupLabel: 'Global skills' }),
+        createSkillRecord({ key: 'builtin:weather', label: 'Weather', groupKey: 'builtin', groupLabel: 'Built-in skills' })
+      ],
+      recentSkillValues: [],
+      groupedRecentSkillValues: [],
+      selectedSkills: [],
+      isLoading: false,
+      onSelectedKeysChange: vi.fn(),
+      texts: {
+        title: 'Skills',
+        searchPlaceholder: 'Search skills',
+        emptyLabel: 'No skills',
+        loadingLabel: 'Loading',
+        manageLabel: 'Manage',
+        recentSkillsLabel: 'Recent',
+        allSkillsLabel: 'All skills'
+      }
+    });
+
+    expect(model.groups?.map((group) => [group.key, group.label])).toEqual([
+      ['project', 'Project skills'],
+      ['workspace', 'NextClaw skills'],
+      ['global', 'Global skills'],
+      ['builtin', 'Built-in skills']
+    ]);
+  });
+
   it('still reorders recent skills even when grouped labels are omitted', () => {
     const model = buildSkillPickerModel({
       skillRecords: [

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

@@ -1,5 +1,6 @@
 import type {
   ChatSkillPickerOption,
+  ChatSkillPickerOptionGroup,
   ChatSkillPickerProps,
   ChatSlashItem,
 } from '@nextclaw/agent-chat-ui';
@@ -139,6 +140,13 @@ export function buildChatSlashItems(
 ): ChatSlashItem[] {
   const skillSortCollator = new Intl.Collator(undefined, { sensitivity: 'base', numeric: true });
   const recentOrderIndex = buildRecentOrderIndex(recentSkillValues);
+  const groupOrderIndex = new Map<string, number>();
+  for (const record of skillRecords) {
+    const groupKey = record.groupKey?.trim();
+    if (groupKey && !groupOrderIndex.has(groupKey)) {
+      groupOrderIndex.set(groupKey, groupOrderIndex.size);
+    }
+  }
 
   return skillRecords
     .map((record, order) => ({
@@ -148,6 +156,11 @@ export function buildChatSlashItems(
     }))
     .filter((entry) => entry.score > 0)
     .sort((left, right) => {
+      const leftGroupIndex = groupOrderIndex.get(left.record.groupKey?.trim() ?? '') ?? Number.POSITIVE_INFINITY;
+      const rightGroupIndex = groupOrderIndex.get(right.record.groupKey?.trim() ?? '') ?? Number.POSITIVE_INFINITY;
+      if (leftGroupIndex !== rightGroupIndex) {
+        return leftGroupIndex - rightGroupIndex;
+      }
       const leftTier = resolveSlashMatchTier(left.score);
       const rightTier = resolveSlashMatchTier(right.score);
       if (rightTier !== leftTier) {
@@ -178,6 +191,8 @@ export function buildChatSlashItems(
         `${texts.slashSkillSpecLabel}: ${record.key}`,
         ...(record.scopeLabel ? [`${texts.slashSkillScopeLabel}: ${record.scopeLabel}`] : [])
       ],
+      sectionKey: record.groupKey,
+      sectionLabel: record.groupLabel,
       tokenKind: 'skill',
       tokenKey: record.key,
       value: record.key
@@ -193,6 +208,46 @@ function buildSkillPickerOptions(skillRecords: ChatSkillRecord[]): ChatSkillPick
   }));
 }
 
+function buildSkillPickerGroups(params: {
+  skillRecords: ChatSkillRecord[];
+  recentKeySet: Set<string>;
+  recentSkillsLabel: string;
+  allSkillsLabel: string;
+}): ChatSkillPickerOptionGroup[] | undefined {
+  const { allSkillsLabel, recentKeySet, recentSkillsLabel, skillRecords } = params;
+  const recentRecords = skillRecords.filter((record) => recentKeySet.has(record.key));
+  const groupedRecords = new Map<string, { label: string; records: ChatSkillRecord[] }>();
+  for (const record of skillRecords) {
+    if (recentKeySet.has(record.key)) {
+      continue;
+    }
+    const groupKey = record.groupKey?.trim() || 'all-skills';
+    const groupLabel = record.groupLabel?.trim() || allSkillsLabel;
+    const group = groupedRecords.get(groupKey) ?? { label: groupLabel, records: [] };
+    group.records.push(record);
+    groupedRecords.set(groupKey, group);
+  }
+  const sourceGroups = [...groupedRecords].map(([key, group]) => ({
+    key,
+    label: group.label,
+    options: buildSkillPickerOptions(group.records),
+  }));
+  const hasSourceGroups = sourceGroups.some((group) => group.key !== 'all-skills');
+  if (recentRecords.length === 0 && !hasSourceGroups) {
+    return undefined;
+  }
+  return [
+    ...(recentRecords.length > 0
+      ? [{
+          key: 'recent-skills',
+          label: recentSkillsLabel,
+          options: buildSkillPickerOptions(recentRecords),
+        }]
+      : []),
+    ...sourceGroups,
+  ].filter((group) => group.options.length > 0);
+}
+
 export function buildSkillPickerModel(params: {
   skillRecords: ChatSkillRecord[];
   recentSkillValues?: string[];
@@ -221,12 +276,6 @@ export function buildSkillPickerModel(params: {
   } = params;
   const prioritizedSkillRecords = prioritizeSkillRecords(skillRecords, recentSkillValues ?? []);
   const recentKeySet = new Set(groupedRecentSkillValues ?? []);
-  const recentSkillOptions = buildSkillPickerOptions(
-    prioritizedSkillRecords.filter((record) => recentKeySet.has(record.key))
-  );
-  const remainingSkillOptions = buildSkillPickerOptions(
-    prioritizedSkillRecords.filter((record) => !recentKeySet.has(record.key))
-  );
   return {
     title: texts.title,
     searchPlaceholder: texts.searchPlaceholder,
@@ -236,21 +285,12 @@ export function buildSkillPickerModel(params: {
     manageLabel: texts.manageLabel,
     manageHref: '/marketplace/skills',
     options: buildSkillPickerOptions(prioritizedSkillRecords),
-    groups:
-      recentSkillOptions.length > 0
-        ? [
-            {
-              key: 'recent-skills',
-              label: texts.recentSkillsLabel,
-              options: recentSkillOptions
-            },
-            {
-              key: 'all-skills',
-              label: texts.allSkillsLabel,
-              options: remainingSkillOptions
-            }
-          ].filter((group) => group.options.length > 0)
-        : undefined,
+    groups: buildSkillPickerGroups({
+      skillRecords: prioritizedSkillRecords,
+      recentKeySet,
+      recentSkillsLabel: texts.recentSkillsLabel,
+      allSkillsLabel: texts.allSkillsLabel,
+    }),
     selectedKeys: selectedSkills,
     onSelectedKeysChange
   };