diff --git a/serverAppConfigs-docs/Infrastructure/Homepage.md b/serverAppConfigs-docs/Infrastructure/Homepage.md
index ed84a15..4f555b9 100644
--- a/serverAppConfigs-docs/Infrastructure/Homepage.md
+++ b/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.
diff --git a/shared/homepage/app.js b/shared/homepage/app.js
index d14c639..3f9ad8c 100644
--- a/shared/homepage/app.js
+++ b/shared/homepage/app.js
@@ -96,8 +96,8 @@ function miCard(svc, state) {
if (m.compaction) parts.push('⚡ ' + esc(m.compaction) + '
');
if (m.supervision) parts.push('' + esc(m.supervision) + '
');
if (m.permission) parts.push('⚠ ' + esc(m.permission) + '
');
- if (m.warn) parts.push('' +
- '⚠ ' + esc(m.warn.split(':')[0]) + ' \u2014 hover to read
');
+ if (m.warn) parts.push('' +
+ '⚠ ' + esc(m.warn) + '
');
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 ? ' + ')
' : '';
const warn = svc.warn
- ? '⚠ privacy note \u2014 hover to read
'
+ ? '⚠ ' + esc(svc.warn) + '
'
: '';
panel.innerHTML =
'' + art +
diff --git a/shared/homepage/services.json b/shared/homepage/services.json
index ee12276..fd5b57b 100644
--- a/shared/homepage/services.json
+++ b/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.",
diff --git a/shared/homepage/sfx/dragoon-makeuse.ogg b/shared/homepage/sfx/dragoon-makeuse.ogg
deleted file mode 100644
index f08b185..0000000
Binary files a/shared/homepage/sfx/dragoon-makeuse.ogg and /dev/null differ
diff --git a/shared/homepage/sfx/dragoon-returned.ogg b/shared/homepage/sfx/dragoon-returned.ogg
deleted file mode 100644
index 962e091..0000000
Binary files a/shared/homepage/sfx/dragoon-returned.ogg and /dev/null differ
diff --git a/shared/homepage/sfx/dragoon-tagline.ogg b/shared/homepage/sfx/dragoon-tagline.ogg
new file mode 100644
index 0000000..ebc4e4f
Binary files /dev/null and b/shared/homepage/sfx/dragoon-tagline.ogg differ
diff --git a/shared/homepage/style.css b/shared/homepage/style.css
index 2bcf6f9..8ec8023 100644
--- a/shared/homepage/style.css
+++ b/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; }