From 41bf358d1ea6a56b396bd5944bcadc542b0cdedd Mon Sep 17 00:00:00 2001
From: elkaix <melkholy@techmatrix.com>
Date: Mon, 17 Aug 2026 03:39:03 -0400
Subject: [PATCH] feat(web): show model capabilities as badges
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The picker rendered capabilities as `capabilities.join(', ')`, so a model
with three of them read as one run-on line of text.

Give each known capability a muted glyph with a translated tooltip, and
keep an unrecognised string visible as text rather than dropping it. A
model that reasons adaptively gets its own mark, so it no longer reads as
the same thing as one that exposes an explicit thinking capability.

Rows and the search field move onto the app's metrics, derived from
`--ui-font-size` rather than pinned, so the font-size setting keeps
working. Off-screen rows use `content-visibility` instead of a virtual
list.

The picker stays a modal: it is reached from the composer quick-switch
through "More models…", and the dialog is the better form on a narrow
window.
---
 .changeset/web-model-badges.md                |   5 +
 .../src/components/ModelPicker.vue            | 179 ++++++++++++++++--
 .../src/i18n/locales/en/model.ts              |  15 ++
 apps/pythinker-web/test/model-picker.test.ts  | 138 ++++++++++++++
 4 files changed, 325 insertions(+), 12 deletions(-)
 create mode 100644 .changeset/web-model-badges.md

diff --git a/.changeset/web-model-badges.md b/.changeset/web-model-badges.md
new file mode 100644
index 00000000..5ad63da9
--- /dev/null
+++ b/.changeset/web-model-badges.md
@@ -0,0 +1,5 @@
+---
+"@pymodel/pythinker-code": patch
+---
+
+Show model capabilities as badges in the model picker instead of a comma-separated string, and bring its rows and search field onto the app's row metrics, sized from `--ui-font-size` so the font-size setting still scales them. A model that reasons adaptively is now distinguishable from one that exposes an explicit thinking capability, and an unrecognised capability still renders rather than being dropped.
diff --git a/apps/pythinker-web/src/components/ModelPicker.vue b/apps/pythinker-web/src/components/ModelPicker.vue
index 18abe1b0..7366d77d 100644
--- a/apps/pythinker-web/src/components/ModelPicker.vue
+++ b/apps/pythinker-web/src/components/ModelPicker.vue
@@ -10,6 +10,70 @@ import { formatTokens } from '../lib/formatTokens';
 
 const { t } = useI18n();
 
+interface CapabilityBadgeMeta {
+  readonly labelKey: string;
+  readonly path: string;
+}
+
+const capabilityBadgeMeta: Record<string, CapabilityBadgeMeta> = {
+  image_in: {
+    labelKey: 'model.capabilities.imageIn',
+    path: 'M3 3.5h10v9H3z M4.5 10l2.3-2.3 2 2 1.4-1.4 2.8 2.8',
+  },
+  image_out: {
+    labelKey: 'model.capabilities.imageOut',
+    path: 'M2.5 4h8v8h-8z M8 2.5h5v5 M10 2.5l3 3',
+  },
+  vision: {
+    labelKey: 'model.capabilities.vision',
+    path: 'M2.5 8s2-3 5.5-3 5.5 3 5.5 3-2 3-5.5 3-5.5-3-5.5-3z M8 6.7a1.3 1.3 0 1 0 0 2.6 1.3 1.3 0 0 0 0-2.6z',
+  },
+  video_in: {
+    labelKey: 'model.capabilities.videoIn',
+    path: 'M2.5 4.5h8v7h-8z M10.5 7l3-2v6l-3-2z',
+  },
+  audio_in: {
+    labelKey: 'model.capabilities.audioIn',
+    path: 'M6 3v6a2 2 0 1 1-4 0V7 M2 9a6 6 0 0 0 12 0 M8 15v-3 M5.5 15h5',
+  },
+  audio_out: {
+    labelKey: 'model.capabilities.audioOut',
+    path: 'M3 6h2.5L9 3v10l-3.5-3H3z M11 6a3 3 0 0 1 0 4 M12.5 4.5a5 5 0 0 1 0 7',
+  },
+  thinking: {
+    labelKey: 'model.capabilities.thinking',
+    path: 'M5.2 10.7a4 4 0 1 1 5.6 0c-.5.4-.8.8-.8 1.3H6c0-.5-.3-.9-.8-1.3z M6 14h4',
+  },
+  always_thinking: {
+    labelKey: 'model.capabilities.alwaysThinking',
+    path: 'M8 2.5a5.5 5.5 0 1 0 5.5 5.5 M8 5.5v3l2 1',
+  },
+  tool_use: {
+    labelKey: 'model.capabilities.toolUse',
+    path: 'M3 3.5h10v9H3z M5 6.5l2 1.5-2 1.5 M8.5 9.5h2',
+  },
+  fast_mode: {
+    labelKey: 'model.capabilities.fastMode',
+    path: 'M9.5 1.8 3.5 9h4l-1 5.2L12.5 7h-4z',
+  },
+};
+
+const adaptiveThinkingBadge: CapabilityBadgeMeta = {
+  labelKey: 'model.capabilities.adaptiveThinking',
+  path: 'M3 8a5 5 0 0 1 8.7-3.4 M11.7 4.6V2.5 M11.7 4.6H9.6 M13 8a5 5 0 0 1-8.7 3.4 M4.3 11.4v2.1 M4.3 11.4h2.1',
+};
+
+function capabilityGlyph(capability: string): string | undefined {
+  return capabilityBadgeMeta[capability]?.path;
+}
+
+function capabilityTitle(capability: string): string {
+  const meta = capabilityBadgeMeta[capability];
+  return meta === undefined
+    ? t('model.capabilities.unknown', { capability })
+    : t(meta.labelKey);
+}
+
 const props = defineProps<{
   models: AppModel[];
   current: string;
@@ -223,8 +287,57 @@ function selectTab(tabId: string): void {
           </span>
           <span class="model-provider">{{ m.provider }}</span>
           <span class="model-ctx">{{ t('model.contextSuffix', { size: formatTokens(m.maxContextSize) }) }}</span>
-          <span v-if="m.capabilities && m.capabilities.length > 0" class="caps">
-            {{ m.capabilities.join(', ') }}
+          <span
+            v-if="(m.capabilities && m.capabilities.length > 0) || m.adaptiveThinking"
+            class="caps"
+            :aria-label="t('model.capabilities.label')"
+          >
+            <span
+              v-for="(capability, capabilityIndex) in m.capabilities ?? []"
+              :key="`${capability}-${capabilityIndex}`"
+              class="cap-badge"
+              :class="{ 'is-unknown': capabilityGlyph(capability) === undefined }"
+              :data-capability="capability"
+              :title="capabilityTitle(capability)"
+              :aria-label="capabilityTitle(capability)"
+            >
+              <svg
+                v-if="capabilityGlyph(capability)"
+                viewBox="0 0 16 16"
+                width="12"
+                height="12"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="1.25"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                aria-hidden="true"
+              >
+                <path :d="capabilityGlyph(capability)" />
+              </svg>
+              <span v-else>{{ capability }}</span>
+            </span>
+            <span
+              v-if="m.adaptiveThinking"
+              class="cap-badge is-adaptive"
+              data-capability="adaptive-thinking"
+              :title="t(adaptiveThinkingBadge.labelKey)"
+              :aria-label="t(adaptiveThinkingBadge.labelKey)"
+            >
+              <svg
+                viewBox="0 0 16 16"
+                width="12"
+                height="12"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="1.25"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                aria-hidden="true"
+              >
+                <path :d="adaptiveThinkingBadge.path" />
+              </svg>
+            </span>
           </span>
           <button
             type="button"
@@ -316,16 +429,19 @@ function selectTab(tabId: string): void {
   flex: none;
 }
 .search-input {
+  /* Default 14px: 14 + 13 = 27px. */
   width: 100%;
+  height: calc(var(--ui-font-size) + 13px);
   box-sizing: border-box;
   font-family: var(--mono);
-  font-size: calc(var(--ui-font-size) - 1.5px);
-  padding: 5px 8px;
+  font-size: calc(var(--ui-font-size) - 1px);
+  padding: 0 8px;
   border: 1px solid var(--line);
-  border-radius: 3px;
+  border-radius: var(--r-sm);
   background: var(--panel);
   color: var(--ink);
   outline: none;
+  line-height: 1;
 }
 
 .tab-strip {
@@ -369,14 +485,21 @@ function selectTab(tabId: string): void {
 }
 
 .model-row {
+  /* Default 14px: 14 + 18 = 32px; 14 - 1 = 13px. */
   display: flex;
   align-items: center;
+  box-sizing: border-box;
+  height: calc(var(--ui-font-size) + 18px);
   gap: 8px;
-  padding: 7px 14px;
+  padding: 0 8px;
+  border-radius: var(--r-md);
   cursor: pointer;
-  font-size: calc(var(--ui-font-size) - 1.5px);
+  font-size: calc(var(--ui-font-size) - 1px);
+  line-height: 1;
   color: var(--text);
   min-width: 0;
+  content-visibility: auto;
+  contain-intrinsic-size: calc(var(--ui-font-size) + 18px);
 }
 .model-row:hover, .model-row.is-selected {
   background: var(--soft);
@@ -430,13 +553,45 @@ function selectTab(tabId: string): void {
   flex: none;
 }
 .caps {
-  color: var(--blue);
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  flex: none;
+  min-width: 0;
+  max-width: 180px;
+  overflow: hidden;
+  color: var(--muted);
+}
+.cap-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  box-sizing: border-box;
+  min-width: 16px;
+  height: 18px;
+  padding: 0 4px;
+  border: 1px solid color-mix(in srgb, var(--line) 65%, var(--panel));
+  border-radius: var(--r-xs);
+  background: color-mix(in srgb, var(--panel2) 45%, var(--panel));
+  color: var(--muted);
   font-size: max(9px, calc(var(--ui-font-size) - 4px));
-  border: 1px solid var(--bd);
-  border-radius: 3px;
-  padding: 1px 5px;
+  line-height: 1;
+  white-space: nowrap;
+}
+.cap-badge svg {
+  display: block;
   flex: none;
 }
+.cap-badge.is-adaptive {
+  border-style: dashed;
+  color: var(--dim);
+}
+.cap-badge.is-unknown {
+  max-width: 120px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 .star-btn {
   flex: none;
   display: flex;
@@ -505,7 +660,7 @@ function selectTab(tabId: string): void {
     max-height: calc(100dvh - 24px);
   }
   .model-provider,
-  .caps {
+  .model-provider {
     display: none;
   }
 }
diff --git a/apps/pythinker-web/src/i18n/locales/en/model.ts b/apps/pythinker-web/src/i18n/locales/en/model.ts
index aeba44be..481ec006 100644
--- a/apps/pythinker-web/src/i18n/locales/en/model.ts
+++ b/apps/pythinker-web/src/i18n/locales/en/model.ts
@@ -13,4 +13,19 @@ export default {
   starTitle: 'Add to favorites',
   unstarTitle: 'Remove from favorites',
   footerHint: '↑↓ Navigate · Enter Select · Esc Close',
+  capabilities: {
+    label: 'Model capabilities',
+    imageIn: 'Image input',
+    imageOut: 'Image output',
+    vision: 'Vision',
+    videoIn: 'Video input',
+    audioIn: 'Audio input',
+    audioOut: 'Audio output',
+    thinking: 'Thinking',
+    alwaysThinking: 'Always thinking',
+    adaptiveThinking: 'Adaptive reasoning',
+    toolUse: 'Tool use',
+    fastMode: 'Fast mode',
+    unknown: 'Capability: {capability}',
+  },
 } as const;
diff --git a/apps/pythinker-web/test/model-picker.test.ts b/apps/pythinker-web/test/model-picker.test.ts
index a4d63bc4..3da618ea 100644
--- a/apps/pythinker-web/test/model-picker.test.ts
+++ b/apps/pythinker-web/test/model-picker.test.ts
@@ -1,3 +1,5 @@
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
 import { mount } from '@vue/test-utils';
 import { nextTick } from 'vue';
 import { createI18n } from 'vue-i18n';
@@ -6,6 +8,11 @@ import { afterEach, describe, expect, it } from 'vitest';
 import ModelPicker from '../src/components/ModelPicker.vue';
 import type { AppModel } from '../src/api/types';
 
+const modelPickerSource = readFileSync(
+  join(import.meta.dirname, '../src/components/ModelPicker.vue'),
+  'utf8',
+);
+
 const i18n = createI18n({
   legacy: false,
   locale: 'en',
@@ -24,6 +31,21 @@ const i18n = createI18n({
         searchPlaceholder: 'Search',
         title: 'Switch model',
         unavailable: 'Unavailable',
+        capabilities: {
+          label: 'Model capabilities',
+          imageIn: 'Image input',
+          imageOut: 'Image output',
+          vision: 'Vision',
+          videoIn: 'Video input',
+          audioIn: 'Audio input',
+          audioOut: 'Audio output',
+          thinking: 'Thinking',
+          alwaysThinking: 'Always thinking',
+          adaptiveThinking: 'Adaptive reasoning',
+          toolUse: 'Tool use',
+          fastMode: 'Fast mode',
+          unknown: 'Capability: {capability}',
+        },
       },
     },
   },
@@ -189,3 +211,119 @@ describe('ModelPicker starred models', () => {
     expect(rows[1]!.text()).toContain('GPT-4o');
   });
 });
+
+describe('ModelPicker capability badges', () => {
+  it('renders one badge per capability instead of a comma-separated string', () => {
+    const wrapper = mount(ModelPicker, {
+      props: {
+        models: [{
+          ...models[0]!,
+          capabilities: ['image_in', 'thinking'],
+        }],
+        current: models[0]!.id,
+      },
+      global: { plugins: [i18n] },
+    });
+
+    const row = wrapper.get('.model-row');
+    expect(row.findAll('.cap-badge')).toHaveLength(2);
+    expect(row.find('.caps').text()).not.toContain(',');
+    expect(row.findAll('.cap-badge svg')).toHaveLength(2);
+    expect(row.find('[data-capability="image_in"]').attributes('title')).toBe('Image input');
+    expect(row.find('[data-capability="thinking"]').attributes('title')).toBe('Thinking');
+  });
+
+  it('keeps an unrecognised capability visible as text', () => {
+    const unknownCapability = 'future_capability';
+    const wrapper = mount(ModelPicker, {
+      props: {
+        models: [{
+          ...models[0]!,
+          capabilities: [unknownCapability],
+        }],
+        current: models[0]!.id,
+      },
+      global: { plugins: [i18n] },
+    });
+
+    const badge = wrapper.get('.cap-badge.is-unknown');
+    expect(badge.text()).toBe(unknownCapability);
+    expect(badge.attributes('title')).toBe(`Capability: ${unknownCapability}`);
+  });
+
+  it('distinguishes adaptive reasoning from an explicit thinking capability', () => {
+    const wrapper = mount(ModelPicker, {
+      props: {
+        models: [
+          { ...models[0]!, capabilities: ['thinking'] },
+          { ...models[1]!, adaptiveThinking: true },
+        ],
+        current: models[0]!.id,
+      },
+      global: { plugins: [i18n] },
+    });
+
+    const explicitThinking = wrapper.findAll('.model-row')[0]!;
+    const adaptive = wrapper.findAll('.model-row')[1]!;
+    expect(explicitThinking.find('[data-capability="thinking"]').attributes('title')).toBe('Thinking');
+    expect(adaptive.find('[data-capability="adaptive-thinking"]').attributes('title')).toBe('Adaptive reasoning');
+    expect(adaptive.find('[data-capability="thinking"]').exists()).toBe(false);
+    expect(explicitThinking.find('path').attributes('d')).not.toBe(adaptive.find('path').attributes('d'));
+  });
+});
+
+describe('ModelPicker sizing and source guards', () => {
+  it('derives row and search-field sizes from the UI font token', () => {
+    const rule = (selector: string): string =>
+      modelPickerSource.match(new RegExp(`\\.${selector}\\s*\\{([\\s\\S]*?)\\n\\}`, 'u'))?.[1] ?? '';
+    const rowRule = rule('model-row');
+    const searchRule = rule('search-input');
+
+    expect(rowRule).toContain('height: calc(var(--ui-font-size) + 18px);');
+    expect(rowRule).toContain('font-size: calc(var(--ui-font-size) - 1px);');
+    expect(rowRule).toContain('padding: 0 8px;');
+    expect(rowRule).toContain('border-radius: var(--r-md);');
+    expect(rowRule).toContain('content-visibility: auto;');
+    expect(rowRule).toContain('contain-intrinsic-size: calc(var(--ui-font-size) + 18px);');
+    expect(searchRule).toContain('height: calc(var(--ui-font-size) + 13px);');
+    expect(searchRule).toContain('font-size: calc(var(--ui-font-size) - 1px);');
+    expect(modelPickerSource).toContain('Default 14px: 14 + 18 = 32px; 14 - 1 = 13px.');
+  });
+
+  it('keeps the model picker free of dark utilities and new color literals', () => {
+    expect(modelPickerSource).not.toMatch(/\bdark:/u);
+
+    const colorLiteral = /#[\da-f]{3,8}|rgba?\s*\(/iu;
+    const colorLines = modelPickerSource.split('\n').filter((line) => colorLiteral.test(line));
+    expect(colorLines).toHaveLength(3);
+    expect(colorLines[0]).toMatch(/Light only/u);
+    expect(colorLines[1]).toMatch(/background:/u);
+    expect(colorLines[2]).toMatch(/box-shadow:/u);
+  });
+});
+
+describe('ModelPicker search and keyboard selection', () => {
+  it('narrows search results and moves selection with arrow keys', async () => {
+    const wrapper = mount(ModelPicker, {
+      props: {
+        models,
+        current: models[0]!.id,
+      },
+      global: { plugins: [i18n] },
+    });
+
+    await wrapper.find('.search-input').setValue('gpt');
+    expect(wrapper.findAll('.model-row')).toHaveLength(2);
+    expect(wrapper.text()).not.toContain('Pythinker K2');
+
+    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' }));
+    await nextTick();
+
+    const rows = wrapper.findAll('.model-row');
+    expect(rows[0]!.classes()).not.toContain('is-selected');
+    expect(rows[1]!.classes()).toContain('is-selected');
+
+    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
+    expect(wrapper.emitted('select')).toEqual([['openai/gpt-4o']]);
+  });
+});