feat(web): show model capabilities as badges

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.

Author: elkaix

.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.

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;
   }
 }

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;