homepage: add per-model input modalities to the LLM cards

Each LLM card now lists its accepted inputs as a line (Inputs: text · image ·
audio), sourced from the harness models.yml:
- frank-large: text (no vision projector)
- frank-medium: text, image (Gemma4 vision path)
- frank-small: text, image, audio (Gemma4 projector audio encoder; audio is
  not in models.yml's input list only because OMP's schema rejects it, but the
  endpoint accepts input_audio parts)

New .desc-inputs CSS + bare-mode reset; /docs model guide gains an Inputs line
per model. bats 30/30 + live render verified.

shared/homepage/app.js

@@ -35,10 +35,11 @@ function esc(s) {
 // them (the LLM cards), else the plain description string.
 function descHTML(svc) {
     const d = svc.details;
-    if (d && (d.role || d.spec || d.use)) {
+    if (d && (d.role || d.spec || d.inputs || 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.inputs && d.inputs.length) lines.push('<div class="desc-inputs">Inputs: ' + esc(d.inputs.join(' · ')) + '</div>');
         if (d.use) lines.push('<div class="desc-use">Use: ' + esc(d.use) + '</div>');
         return lines.join('');
     }

shared/homepage/docs.html

@@ -49,6 +49,7 @@
   <ul>
     <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>Inputs:</strong> text.</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>
@@ -57,6 +58,7 @@
   <ul>
     <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>Inputs:</strong> text, image.</li>
     <li><strong>Best for:</strong> software engineering, system administration, and instruction tasks. Beats Claude Sonnet 5 per Artificial Analysis.</li>
   </ul>
 
@@ -64,6 +66,7 @@
   <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); fastest at images.</li>
+    <li><strong>Inputs:</strong> text, image, audio.</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>
 

shared/homepage/services.json

@@ -270,6 +270,7 @@
     "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.",
+      "inputs": ["text"],
       "use": "Cybersecurity and debugging. Requires Frank's permission."
     },
     "url": "",
@@ -286,6 +287,7 @@
     "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.",
+      "inputs": ["text", "image"],
       "use": "Software engineering, system administration, and instruction tasks."
     },
     "url": "",
@@ -302,6 +304,7 @@
     "details": {
       "role": "Fast utility model",
       "spec": "Gemma4-12B QAT (Q4_K_M, 7.4 GiB) — 1M-token pool across four conversations; fastest at images.",
+      "inputs": ["text", "image", "audio"],
       "use": "Agentic search, RAG, research subagents, translation, roleplay, and summarization — any small task that doesn't need much intelligence."
     },
     "url": "",

shared/homepage/style.css

@@ -80,6 +80,7 @@ body::before {
 .desc { color: var(--fg); margin: 8px 0; }
 .desc-role { color: var(--head); font-weight: bold; }
 .desc-spec { color: var(--fg); }
+.desc-inputs { color: var(--fg); }
 .desc-use { color: var(--dim); margin-top: 4px; }
 .links a { color: var(--link); text-decoration: underline; margin-right: 12px; }
 
@@ -108,6 +109,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"] .desc-role, html[data-bare="1"] .desc-spec, html[data-bare="1"] .desc-inputs, 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; }