homepage: rounded corners, aligned title glyphs, greyed closed items, spliced dragoon tagline, inline privacy notes

serverAppConfigs-docs/Infrastructure/Homepage.md

@@ -205,6 +205,17 @@ systemd services keep the `frank-primary`/`frank-large`/
 `frank-secondary` names. Homepage, docs page and harness now agree on
 one name per model.
 
+**Console polish (2026-10-08, eighth wave):** five fixes — octagon
+clip-paths replaced with `border-radius` (the clipped corners read as
+gaps in the 1px border); section-title diamonds moved from absolute
+positioning to a fixed-width inline glyph (aligned, wrap-safe); closed
+WIP items grey out (dim type, desaturated art, muted border via
+`:has(.badge.wip-closed)`); the Dragoon tagline is one spliced track
+(`sfx/dragoon-tagline.ogg` — loudnorm-matched, silence-trimmed, 350 ms
+beat; the two SC2 source oggs are trashed); privacy notes render as
+full inline text — the hover-tooltip pattern was unreachable on touch
+devices.
+
 ## Design decision — 2026-08-22
 
 The live up/down check runs server-side. A checker on Dankclaw probes each backend and writes a same-origin `status.json`. The page fetches only that file and renders the badges. The browser never calls a backend directly. The checker runs as a systemd timer every 3 minutes.

shared/homepage/app.js

@@ -96,8 +96,8 @@ function miCard(svc, state) {
     if (m.compaction) parts.push('<div class="mi-comp">&#9889; ' + esc(m.compaction) + '</div>');
     if (m.supervision) parts.push('<div class="mi-super">' + esc(m.supervision) + '</div>');
     if (m.permission) parts.push('<div class="mi-perm" title="' + esc(m.permission) + '">&#9888; ' + esc(m.permission) + '</div>');
-    if (m.warn) parts.push('<div class="mi-warn" title="' + esc(m.warn) + '">' +
-        '&#9888; ' + esc(m.warn.split(':')[0]) + ' \u2014 hover to read</div>');
+    if (m.warn) parts.push('<div class="mi-warn">' +
+        '&#9888; ' + esc(m.warn) + '</div>');
     const card = document.createElement('article');
     card.className = 'mi-card mi-' + esc(m.unit);
     card.innerHTML = parts.join('');
@@ -132,7 +132,7 @@ function renderPanel(svc, state) {
     const art = svc.art ? '<img class="app-art" src="' + esc(svc.art) + '" alt=""' +
         (svc.art_bg ? ' style="background:' + esc(svc.art_bg) + ';border-color:' + esc(svc.art_bg) + '"' : '') + '>' : '';
     const warn = svc.warn
-        ? '<div class="svc-warn" title="' + esc(svc.warn) + '">&#9888; privacy note \u2014 hover to read</div>'
+        ? '<div class="svc-warn">&#9888; ' + esc(svc.warn) + '</div>'
         : '';
     panel.innerHTML =
         '<div class="panel-head">' + art +

shared/homepage/services.json

@@ -334,8 +334,7 @@
       "hf": "https://huggingface.co/Quat3rnion/halogen-swift1.5-qwen3.8-flash-next-v2-abliterated",
       "tagline": "I have returned — make use of me.",
       "sfx": [
-        "dragoon-returned.ogg",
-        "dragoon-makeuse.ogg"
+        "dragoon-tagline.ogg"
       ],
       "equiv": "Equivalent to Claude Sonnet 5 / OpenAI-Luna (Summer 2026 frontier intelligence).",
       "spec": "Qwen3.8-Flash-Next v2 Swift1.5 abliterated (halogen flash-server, ~62 GiB) on the Strix Halo iGPU — 200k-token context, two submissions at a time; sees images.",

shared/homepage/style.css

@@ -1,6 +1,6 @@
 /* The homepage theme: StarCraft Protoss console — flat deep-space navy,
    warp-blue/cyan accents used sparingly, Share Tech Mono body with
-   Rajdhani headings (Google Fonts CDN), octagon-cut panels on crisp
+   Rajdhani headings (Google Fonts CDN), soft-radius panels on crisp
    1px steel borders, quiet section headers. Motion is reserved for
    state (speaking voice). A ?bare=1 toggle strips the page to bare,
    unstyled HTML (Q27). The page never sets a custom or hidden cursor,
@@ -71,8 +71,8 @@ body::after {
   position: relative;
   border-bottom: 1px solid var(--border);
 }
-.section-title::before { content: "\25C7"; position: absolute; left: 3px; top: 50%;
-  transform: translateY(-55%); color: var(--proto-cyan); }
+.section-title::before { content: "\25C7"; display: inline-block; width: 18px;
+  margin-left: -24px; color: var(--proto-cyan); }
 
 .grid {
   display: grid;
@@ -81,7 +81,7 @@ body::after {
 }
 
 .panel { border: 1px solid var(--border); background: var(--panel); padding: 12px 14px;
-  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px); }
+  border-radius: 6px; }
 .panel.clickable { cursor: pointer; transition: border-color 0.15s, filter 0.15s, transform 0.15s; }
 .panel.clickable:hover {
   border-color: var(--proto-cyan);
@@ -113,11 +113,19 @@ body::after {
 }
 .name { color: var(--head); }
 .badge { border: 1px solid currentColor; padding: 0 6px; font-size: 12px;
-  clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px); }
+  border-radius: 3px; }
 .badge.up { color: var(--fg); }
 .badge.down { color: var(--down); }
 .badge.wip-open { color: var(--wip); }
 .badge.wip-closed { color: var(--dim); }
+/* Closed WIP items grey out: darker type, desaturated art. */
+.panel:has(.badge.wip-closed) { border-color: color-mix(in srgb, var(--dim) 45%, var(--border)); }
+.panel:has(.badge.wip-closed) .name,
+.panel:has(.badge.wip-closed) .desc,
+.panel:has(.badge.wip-closed) .desc-role,
+.panel:has(.badge.wip-closed) .desc-spec,
+.panel:has(.badge.wip-closed) .desc-use { color: var(--dim); }
+.panel:has(.badge.wip-closed) .app-art { filter: grayscale(0.75) brightness(0.7); }
 .badge.wip-down { color: var(--down); }
 .desc { color: var(--fg); margin: 8px 0; }
 .desc-role { color: var(--dim); font-weight: bold; }
@@ -144,7 +152,7 @@ body::after {
   padding: 2px 14px;
   text-transform: uppercase;
   letter-spacing: 1px;
-  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
+  border-radius: 4px;
 }
 .foot-btn:hover {
   background: color-mix(in srgb, var(--link) 14%, transparent);
@@ -179,7 +187,7 @@ html[data-bare="1"] .desc-role, html[data-bare="1"] .desc-spec, html[data-bare="
 html[data-bare="1"] .section-title { border-color: #000; padding: 0 0 6px 2px; }
 html[data-bare="1"] .links a, html[data-bare="1"] .toggle, html[data-bare="1"] .foot a { color: #000; }
 html[data-bare="1"] .foot-btn { border-color: #000; text-shadow: none; }
-html[data-bare="1"] .panel, html[data-bare="1"] .mi-card, html[data-bare="1"] .badge, html[data-bare="1"] .foot-btn, html[data-bare="1"] .model-info { clip-path: none; filter: none; animation: none; box-shadow: none; }
+html[data-bare="1"] .panel, html[data-bare="1"] .mi-card, html[data-bare="1"] .badge, html[data-bare="1"] .foot-btn, html[data-bare="1"] .model-info { clip-path: none; border-radius: 0; filter: none; animation: none; box-shadow: none; }
 html[data-bare="1"] body::after { display: none; }
 html[data-bare="1"] .section-title::before, html[data-bare="1"] .section-title::after, html[data-bare="1"] .title::after { content: none; }
 html[data-bare="1"] .top { border-image: none; }
@@ -191,7 +199,7 @@ html[data-bare="1"] .top { border-image: none; }
   grid-column: 1 / -1;
   background: var(--panel);
   box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--proto-cyan) 25%, transparent);
-  clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px);
+  border-radius: 8px;
 }
 .mi-title {
   color: var(--proto-cyan);
@@ -211,7 +219,7 @@ html[data-bare="1"] .top { border-image: none; }
   line-height: 1.35;
   border: 1px solid var(--mi);
   padding: 10px 12px;
-  clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px);
+  border-radius: 6px;
   background: linear-gradient(160deg, color-mix(in srgb, var(--mi) 5%, var(--panel)), var(--panel) 60%);
 }
 .mi-zealot  { --mi: #4fb4ff; }  /* Zealot: Khai's blue blades   */
@@ -253,15 +261,14 @@ html[data-bare="1"] .top { border-image: none; }
 .mi-inputs { color: var(--dim); }
 .mi-use { color: var(--fg); margin-top: 4px; }
 .mi-super { color: var(--link); margin-top: 6px; }
-.mi-warn { color: var(--down); margin-top: 4px; cursor: help;
-  text-decoration: underline dotted color-mix(in srgb, var(--down) 60%, transparent); }
+.mi-warn { color: var(--down); margin-top: 4px; }
 .mi-perm {
   margin-top: 8px;
   padding: 6px 8px;
   border: 1px solid var(--down);
   color: var(--down);
   font-weight: bold;
-  clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px);
+  border-radius: 4px;
 }
 .mi-comp {
   margin-top: 8px;
@@ -269,10 +276,9 @@ html[data-bare="1"] .top { border-image: none; }
   border: 1px solid var(--head);
   color: var(--head);
   background: color-mix(in srgb, var(--head) 8%, transparent);
-  clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px);
+  border-radius: 4px;
 }
-.svc-warn { color: var(--down); margin-top: 6px; cursor: help;
-  text-decoration: underline dotted color-mix(in srgb, var(--down) 60%, transparent); }
+.svc-warn { color: var(--down); margin-top: 6px; }
 
 /* Bare mode strips the model component to plain prose too. */
 html[data-bare="1"] .mi-card { border-color: #000; box-shadow: none; background: none; }