homepage: rework LLM model cards to structured role/spec/use lines

Each LLM card now carries a details object (role/spec/use) rendered as a
bold pale-green role, a bright-green spec line, and a dim 'Use:' line.
app.js descHTML() falls back to the plain description for non-LLM cards;
new .desc-role/.desc-spec/.desc-use CSS + bare-mode reset.

Roles made neutral (no nicknames): frank-large = deep reasoning,
frank-medium = primary model, frank-small = fast utility model.

The /docs model guide was fixed — it had drifted to retired model info
(frank-large as Qwen3.8-Flash-Next 87.3 GiB/200k, frank-medium as FP8
~31 GiB) — now Qwen3.8-27B UD-Q8_K_XL 31.5 GiB/262k and MXFP4/W4A8
19.4 GiB, reordered large->medium->small. bats 30/30 + live render.

shared/homepage/app.js

@@ -31,6 +31,20 @@ function esc(s) {
     });
 }
 
+// The description: structured role/spec/use lines when the service defines
+// them (the LLM cards), else the plain description string.
+function descHTML(svc) {
+    const d = svc.details;
+    if (d && (d.role || d.spec || d.use)) {
+        const lines = [];
+        if (d.role) lines.push('<div class="desc-role">' + esc(d.role) + '</div>');
+        if (d.spec) lines.push('<div class="desc-spec">' + esc(d.spec) + '</div>');
+        if (d.use) lines.push('<div class="desc-use">Use: ' + esc(d.use) + '</div>');
+        return lines.join('');
+    }
+    return esc(svc.description || '');
+}
+
 // Shared panel component: one TUI panel for a service in a given state.
 function renderPanel(svc, state) {
     const panel = document.createElement('div');
@@ -43,7 +57,7 @@ function renderPanel(svc, state) {
         '  <span class="badge ' + state + '">' + BADGE_LABEL[state] + '</span>' +
         '  <span class="name">' + esc(svc.name) + '</span>' +
         '</div>' +
-        '<div class="desc">' + esc(svc.description || '') + '</div>' +
+        '<div class="desc">' + descHTML(svc) + '</div>' +
         '<div class="links">' + links.join('') + '</div>';
     return panel;
 }

shared/homepage/docs.html

@@ -45,26 +45,26 @@
   <p>Three models serve the family. The homepage status cards show whether
   each one is up right now.</p>
 
-  <h2>frank-large — the big brain</h2>
+  <h2>frank-large — deep reasoning</h2>
   <ul>
-    <li><strong>Model:</strong> Qwen3.8-Flash-Next, UD-IQ4_XS (87.3 GiB).</li>
-    <li><strong>Capacity:</strong> 200k-token context, exactly one conversation at a time. A second waits — politely, but it waits.</li>
-    <li><strong>Best for:</strong> cybersecurity and debugging tasks. <em>Use requires Frank's permission.</em></li>
+    <li><strong>Model:</strong> Qwen3.8-27B (UD-Q8_K_XL, 31.5 GiB).</li>
+    <li><strong>Capacity:</strong> 262k-token context, exactly one conversation at a time. Text only.</li>
+    <li><strong>Best for:</strong> cybersecurity and debugging. <em>Use requires Frank's permission.</em></li>
     <li><strong>Not for:</strong> images. It cannot see them.</li>
   </ul>
 
-  <h2>frank-small — the eyes</h2>
+  <h2>frank-medium — the primary model</h2>
   <ul>
-    <li><strong>Model:</strong> Gemma4-12B QAT (Balanced, Q4_K_M, 7.4 GiB).</li>
-    <li><strong>Capacity:</strong> one million tokens of pooled context across four simultaneous conversations (up to 262k each).</li>
-    <li><strong>Best for:</strong> the fast, cheap utility model — agentic search, text/audio/image RAG, research subagents, language translation, roleplaying games, summarization, and anything with a picture (screenshots, photos, diagrams). Any small utility task that doesn't require much intelligence.</li>
+    <li><strong>Model:</strong> Qwen3.8-27B-Uncensored (MXFP4/W4A8, 19.4 GiB).</li>
+    <li><strong>Capacity:</strong> 262k-token context shared by up to eight conversations at once; sees images.</li>
+    <li><strong>Best for:</strong> software engineering, system administration, and instruction tasks. Beats Claude Sonnet 5 per Artificial Analysis.</li>
   </ul>
 
-  <h2>frank-medium — the 27B generalist</h2>
+  <h2>frank-small — the fast utility model</h2>
   <ul>
-    <li><strong>Model:</strong> Qwen3.8-27B-Uncensored, FP8 (~31 GiB).</li>
-    <li><strong>Capacity:</strong> 262k-token context shared by up to eight conversations at once. It can see pictures too; <code>frank-small</code> is the faster eye and holds four conversations.</li>
-    <li><strong>Best for:</strong> the primary intelligent model — it surpasses Claude Sonnet 5 per Artificial Analysis. Use it for software engineering, system administration, and instruction tasks.</li>
+    <li><strong>Model:</strong> Gemma4-12B QAT (Balanced, Q4_K_M, 7.4 GiB).</li>
+    <li><strong>Capacity:</strong> one million tokens of pooled context across four simultaneous conversations (up to 262k each); fastest at images.</li>
+    <li><strong>Best for:</strong> agentic search, RAG, research subagents, translation, roleplay, and summarization — any small task that doesn't need much intelligence, and anything with a picture (screenshots, photos, diagrams).</li>
   </ul>
 
   <p class="foot-note">Which one to pick? Small utility work, RAG, search, and

shared/homepage/services.json

@@ -267,7 +267,11 @@
     "name": "frank-large",
     "category": "user",
     "section": "AI",
-    "description": "Qwen3.8-27B (UD-Q8_K_XL, 31.5 GiB) — 262k-token context, one conversation at a time. The big brain: long, thoughtful text conversations, DFlash2 spec decode. Text only; it cannot see images. Suggested use: cybersecurity and debugging tasks — use requires Frank's permission.",
+    "details": {
+      "role": "Deep reasoning model",
+      "spec": "Qwen3.8-27B (UD-Q8_K_XL, 31.5 GiB) — 262k-token context, one conversation at a time, text only.",
+      "use": "Cybersecurity and debugging. Requires Frank's permission."
+    },
     "url": "",
     "docs": "/docs#models",
     "probe": "127.0.0.1:7770",
@@ -279,7 +283,11 @@
     "name": "frank-medium",
     "category": "user",
     "section": "AI",
-    "description": "Qwen3.8-27B-Uncensored (MXFP4/W4A8, 19.4 GiB) — 262k-token context shared by up to eight conversations. The primary intelligent model: surpasses Claude Sonnet 5 per Artificial Analysis. Suggested use: software engineering, system administration, and instruction tasks. It sees images.",
+    "details": {
+      "role": "Primary model",
+      "spec": "Qwen3.8-27B-Uncensored (MXFP4/W4A8, 19.4 GiB) — 262k-token context across up to eight conversations; sees images. Beats Claude Sonnet 5 per Artificial Analysis.",
+      "use": "Software engineering, system administration, and instruction tasks."
+    },
     "url": "",
     "docs": "/docs#models",
     "probe": "192.168.0.235:7770",
@@ -291,7 +299,11 @@
     "name": "frank-small",
     "category": "user",
     "section": "AI",
-    "description": "Gemma4-12B QAT (Q4_K_M, 7.4 GiB) — 1M-token pool across four 262k-token conversations. The fast, cheap utility model and the eyes (screenshots, photos, diagrams). Suggested use: agentic search, text/audio/image RAG, research subagents, language translation, roleplaying games, summarization — any small utility task that doesn't require much intelligence.",
+    "details": {
+      "role": "Fast utility model",
+      "spec": "Gemma4-12B QAT (Q4_K_M, 7.4 GiB) — 1M-token pool across four conversations; fastest at images.",
+      "use": "Agentic search, RAG, research subagents, translation, roleplay, and summarization — any small task that doesn't need much intelligence."
+    },
     "url": "",
     "docs": "/docs#models",
     "probe": "127.0.0.1:7771",

shared/homepage/style.css

@@ -78,6 +78,9 @@ body::before {
 .badge.wip-open { color: var(--wip); }
 .badge.wip-closed { color: var(--dim); }
 .desc { color: var(--fg); margin: 8px 0; }
+.desc-role { color: var(--head); font-weight: bold; }
+.desc-spec { color: var(--fg); }
+.desc-use { color: var(--dim); margin-top: 4px; }
 .links a { color: var(--link); text-decoration: underline; margin-right: 12px; }
 
 .foot {
@@ -105,5 +108,6 @@ html[data-bare="1"] body { background: #fff; color: #000; font-family: serif; te
 html[data-bare="1"] body::before { display: none; }
 html[data-bare="1"] .panel, html[data-bare="1"] .top, html[data-bare="1"] .foot { border-color: #000; background: none; }
 html[data-bare="1"] .badge, html[data-bare="1"] .name, html[data-bare="1"] .desc, html[data-bare="1"] .summary, html[data-bare="1"] .section-title { color: #000; }
+html[data-bare="1"] .desc-role, html[data-bare="1"] .desc-spec, html[data-bare="1"] .desc-use { color: #000; font-weight: normal; }
 html[data-bare="1"] .section-title { border-color: #000; }
 html[data-bare="1"] .links a, html[data-bare="1"] .toggle, html[data-bare="1"] .foot a { color: #000; }