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']]);
+  });
+});