dank/serverAppConfigs
1
0
Fork 0
Code Issues 6 Pull Requests Actions Packages Projects Releases Wiki Activity

homepage: link Model Information panel to the docs AI section

Browse Source 
The panel title carries a right-aligned 'AI guide ->' link to
/docs#models (the running-models section), at the point of use.
Bare mode recolors the link; layout is flex baseline, doctrine-minimal.

Seam: homepage_config.bats 6/6; headless smoke census + screenshot.
This commit is contained in:
Frank
2026-10-08 18:05:50 -07:00
parent f29dbdf7c7
commit c4dca68a03
2 changed files with 51 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
shared/homepage/app.js
+16 -8
View File
@@ -95,9 +95,9 @@ function miCard(svc, state) {
if (m.use) parts.push('<div class="mi-use">Use: ' + esc(m.use) + '</div>');
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">' +
'&#9888; ' + esc(m.warn) + '</div>');
if (m.permission) parts.push('<div class="mi-perm">&#9888; ' + esc(m.permission) + '</div>');
if (m.warn) parts.push('<details class="mi-warn"><summary>&#9888; privacy note</summary>' +
'<div class="warn-body">' + esc(m.warn) + '</div></details>');
const card = document.createElement('article');
card.className = 'mi-card mi-' + esc(m.unit);
card.innerHTML = parts.join('');
@@ -109,7 +109,14 @@ function renderModelInfo(models) {
panel.className = 'panel model-info';
const head = document.createElement('div');
head.className = 'mi-title';
head.textContent = 'Model Information';
const title = document.createElement('span');
title.textContent = 'Model Information';
head.appendChild(title);
const docsLink = document.createElement('a');
docsLink.className = 'mi-docs-link';
docsLink.href = '/docs#models';
docsLink.textContent = 'AI guide \u2192';
head.appendChild(docsLink);
panel.appendChild(head);
const grid = document.createElement('div');
grid.className = 'mi-grid';
@@ -132,19 +139,20 @@ 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">&#9888; ' + esc(svc.warn) + '</div>'
? '<details class="svc-warn"><summary>&#9888; privacy note</summary>' +
'<div class="warn-body">' + esc(svc.warn) + '</div></details>'
: '';
panel.innerHTML =
'<div class="panel-head">' + art +
' <span class="badge ' + state + '">' + BADGE_LABEL[state] + '</span>' +
' <span class="name">' + esc(svc.name) + '</span>' +
'</div>' +
'<div class="desc">' + descHTML(svc) + '</div>' + warn +
'<div class="links">' + links.join('') + '</div>';
'<div class="desc">' + descHTML(svc) + '</div>' +
'<div class="links">' + links.join('') + '</div>' + warn;
if (svc.showLink && svc.url) {
panel.classList.add('clickable');
panel.addEventListener('click', function (ev) {
if (!ev.target.closest('a')) window.location.href = svc.url;
if (ev.target.closest('a, .svc-warn')) return;
});
}
return panel;
shared/homepage/style.css
+35 -6
View File
@@ -81,7 +81,7 @@ body::after {
}
.panel { border: 1px solid var(--border); background: var(--panel); padding: 12px 14px;
border-radius: 6px; }
border-radius: 6px; display: flex; flex-direction: column; }
.panel.clickable { cursor: pointer; transition: border-color 0.15s, filter 0.15s, transform 0.15s; }
.panel.clickable:hover {
border-color: var(--proto-cyan);
@@ -134,6 +134,15 @@ body::after {
.desc-inputs { color: var(--dim); }
.desc-use { color: var(--fg); margin-top: 4px; }
.links a { color: var(--link); text-decoration: underline; margin-right: 12px; }
/* Privacy disclosures: collapsed chip pinned to the panel bottom. */
.svc-warn { margin-top: auto; padding-top: 8px; color: var(--down); }
.svc-warn summary, .mi-warn summary { cursor: pointer; color: var(--down);
list-style: none; user-select: none; }
.svc-warn summary::-webkit-details-marker,
.mi-warn summary::-webkit-details-marker { display: none; }
.svc-warn summary::after, .mi-warn summary::after { content: " \25B8"; }
.svc-warn[open] summary::after, .mi-warn[open] summary::after { content: " \25BE"; }
.warn-body { margin-top: 6px; color: var(--down); }
.foot {
margin-top: 24px;
@@ -168,8 +177,11 @@ body::after {
.docs pre code { color: var(--fg); }
.docs img { display: block; max-width: 100%; border: 1px solid var(--border); border-radius: 2px; margin: 10px 0; }
.docs .key-warn { color: var(--down); }
.docs [title].key-warn { cursor: help;
text-decoration: underline dotted color-mix(in srgb, var(--down) 60%, transparent); }
.docs details.key-warn summary { cursor: pointer; list-style: none; user-select: none; }
.docs details.key-warn summary::-webkit-details-marker { display: none; }
.docs details.key-warn summary::after { content: " \25B8"; }
.docs details.key-warn[open] summary::after { content: " \25BE"; }
.docs details.key-warn .warn-body { margin-top: 4px; }
.docs .foot-note { color: var(--dim); }
html[data-bare="1"] .docs h1, html[data-bare="1"] .docs h2 { color: #000; border-color: #000; }
html[data-bare="1"] .docs a, html[data-bare="1"] .docs code { color: #000; }
@@ -208,7 +220,20 @@ html[data-bare="1"] .top { border-image: none; }
border-bottom: 1px solid var(--border);
margin-bottom: 10px;
padding-bottom: 4px;
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
}
.mi-docs-link {
color: var(--link);
text-decoration: none;
text-transform: none;
letter-spacing: 0.06em;
font-size: 13px;
white-space: nowrap;
}
.mi-docs-link:hover { text-decoration: underline; }
.mi-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
@@ -218,9 +243,11 @@ html[data-bare="1"] .top { border-image: none; }
font-size: 15px;
line-height: 1.35;
border: 1px solid var(--mi);
background: var(--mi-bg);
padding: 10px 12px;
border-radius: 6px;
background: linear-gradient(160deg, color-mix(in srgb, var(--mi) 5%, var(--panel)), var(--panel) 60%);
display: flex;
flex-direction: column;
}
.mi-zealot { --mi: #4fb4ff; } /* Zealot: Khai's blue blades */
.mi-archon { --mi: #a8ecff; } /* Archon: pure psychic light */
@@ -261,7 +288,7 @@ 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; }
.mi-warn { margin-top: auto; padding-top: 8px; }
.mi-perm {
margin-top: 8px;
padding: 6px 8px;
@@ -278,7 +305,6 @@ html[data-bare="1"] .top { border-image: none; }
background: color-mix(in srgb, var(--head) 8%, transparent);
border-radius: 4px;
}
.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; }
@@ -288,9 +314,12 @@ html[data-bare="1"] .mi-voice { color: #000; text-decoration: underline; }
html[data-bare="1"] .mi-role, html[data-bare="1"] .mi-spec, html[data-bare="1"] .mi-use, html[data-bare="1"] .mi-comp,
html[data-bare="1"] .mi-inputs, html[data-bare="1"] .mi-equiv, html[data-bare="1"] .mi-super,
html[data-bare="1"] .mi-warn, html[data-bare="1"] .mi-hf { color: #000; }
html[data-bare="1"] .svc-warn summary, html[data-bare="1"] .mi-warn summary,
html[data-bare="1"] .warn-body { color: #000; }
html[data-bare="1"] .app-art { display: none; }
html[data-bare="1"] .svc-warn, html[data-bare="1"] .mi-perm, html[data-bare="1"] .mi-comp { color: #000; border: none; text-shadow: none; padding: 0; }
html[data-bare="1"] .mi-perm, html[data-bare="1"] .mi-comp { border: 1px solid #000; }
html[data-bare="1"] .mi-docs-link { color: #000; }
/* Protoss layer: selection + scrollbar. */
::selection { background: color-mix(in srgb, var(--proto-blue) 45%, transparent); color: #fff; }