homepage: link Model Information panel to the docs AI section

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 committed 2026-10-08 18:05:50 -07:00
1 parent f29dbdf7c7
commit c4dca68a03
2 files changed
+51 -14

No files matched your search

+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;