fix(native-chat): shrink skill pill text (#20254)

Co-authored-by: Merge Sim <sim@local>

src/renderer/src/components/native-chat/NativeChatPromptEditor.test.tsx

@@ -34,7 +34,10 @@ describe('native chat skill editor', () => {
   it('renders only picker insertions as pills and serializes the exact invocation', () => {
     const { input, container } = setup('Please $rev')
     act(() => input.insertSkill!(7, 11, '$review'))
-    expect(container.querySelector('[data-native-chat-skill]')?.textContent).toBe('Review')
+    const pill = container.querySelector('[data-native-chat-skill]')
+    expect(pill?.textContent).toBe('Review')
+    expect(pill?.classList.contains('text-xs')).toBe(true)
+    expect(pill?.classList.contains('text-sm')).toBe(false)
     expect(input.value).toBe('Please $review ')
     expect(input.selectionStart).toBe(15)
     act(() => {

src/renderer/src/components/native-chat/NativeChatSkillPill.tsx

@@ -18,9 +18,9 @@ export function NativeChatSkillPill({ node, selected }: NodeViewProps): React.JS
       <Badge
         variant="secondary"
         data-native-chat-skill={token}
-        className={`gap-1 border-border px-1.5 py-0 text-sm font-medium text-muted-foreground align-baseline ${selected ? 'ring-1 ring-ring' : ''}`}
+        className={`border-border px-1.5 py-0 text-muted-foreground align-baseline ${selected ? 'ring-1 ring-ring' : ''}`}
       >
-        <Package className="size-4" aria-hidden="true" />
+        <Package aria-hidden="true" />
         {skillLabel(token)}
       </Badge>
     </NodeViewWrapper>

src/renderer/src/components/native-chat/native-chat-prompt-document.ts

@@ -17,7 +17,7 @@ export const NativeChatSkill = Node.create({
       'data-native-chat-skill': node.attrs.token,
       contenteditable: 'false',
       class:
-        'inline-flex items-center gap-1 rounded-full border border-border bg-muted px-1.5 text-sm font-medium text-muted-foreground align-baseline select-none'
+        'inline-flex items-center gap-1 rounded-full border border-border bg-muted px-1.5 text-xs font-medium text-muted-foreground align-baseline select-none'
     },
     ['span', { 'aria-hidden': 'true' }, 'ϟ'],
     ['span', {}, String(node.attrs.token).slice(1)]