Add per-model descriptions + repo-cleanup polish

- models.yaml: add 'description' field for all 5 models (generic, anyone-can-use)
- ModelDef gains optional description: str | None field
- UI: render description below meta tags; mute the repo line further
- escapeHtml() for safety in case descriptions/names contain HTML chars
- Update runbook: how to add a new model with description

image/app/static/app.js

@@ -18,6 +18,16 @@ const state = {
 const el = (sel) => document.querySelector(sel);
 const $$ = (sel) => document.querySelectorAll(sel);
 
+function escapeHtml(s) {
+  if (s == null) return '';
+  return String(s)
+    .replaceAll('&', '&')
+    .replaceAll('<', '&lt;')
+    .replaceAll('>', '&gt;')
+    .replaceAll('"', '&quot;')
+    .replaceAll("'", '&#39;');
+}
+
 async function fetchJSON(url, opts) {
   const r = await fetch(url, opts);
   if (!r.ok) {
@@ -38,14 +48,18 @@ function renderCards() {
     const isActive = key === state.current_model_key;
     const card = document.createElement('div');
     card.className = 'card' + (isActive ? ' active' : '');
+    const desc = m.description
+      ? `<div class="desc">${escapeHtml(m.description)}</div>`
+      : '';
     card.innerHTML = `
-      <div class="name">${m.display_name}</div>
+      <div class="name">${escapeHtml(m.display_name)}</div>
       <div class="meta">
         <span class="tag mode-${m.mode}">${m.mode}</span>
         <span class="tag">${m.size_gb} GB</span>
-        ${(m.capabilities || []).map(c => `<span class="tag cap">${c}</span>`).join('')}
+        ${(m.capabilities || []).map(c => `<span class="tag cap">${escapeHtml(c)}</span>`).join('')}
       </div>
-      <div class="muted small repo">${m.repo}</div>
+      ${desc}
+      <div class="muted small repo">${escapeHtml(m.repo)}</div>
       <div class="spacer"></div>
       <button class="btn ${isActive ? '' : 'primary'}" data-key="${key}" ${isActive || isSwapping ? 'disabled' : ''}>
         ${isActive ? 'Current' : 'Switch to this'}

image/app/static/style.css

@@ -170,7 +170,16 @@ main {
 }
 .card .name { font-weight: 600; font-size: 15px; }
 .card .meta { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; color: var(--muted); }
-.card .repo { word-break: break-all; }
+.card .desc {
+  font-size: 13.5px;
+  line-height: 1.5;
+  color: #b9b9c4;
+}
+.card .repo {
+  word-break: break-all;
+  font-size: 11px;
+  color: #5c5c66;
+}
 .tag {
   background: var(--surface-2);
   border: 1px solid var(--border);