agenthub/src/server/board/chrome.ts
2026-07-20 17:26:25 +02:00

61 lines
2.2 KiB
TypeScript

import { escapeHtml } from '../ui-shared.js';
const LOGO = '<img src="/logo.svg" alt="" width="24" height="24" class="b2-logo-img">';
/**
* Fixed app header for board v2. The project cell is visual only — the real
* project switcher dropdown arrives with the multi-project v3 spec.
* The SSE status span keeps the v1 ids (`sseStatus`, `sseLabel`) so the ported
* connection-status JS keeps working unchanged.
*/
export function headerHtml(projectName: string): string {
const name = escapeHtml(projectName);
return `
<header class="b2-hdr">
<span class="b2-brand">${LOGO}<b>agenthub</b></span>
<span class="b2-proj" title="Projektwechsel kommt mit v3">/ ${name}&nbsp;<span class="b2-chev">▾</span></span>
<nav class="b2-nav" aria-label="Primary">
<b aria-current="page">Board</b><a href="/team">Team</a><a href="/activity">Activity</a><a href="/decisions">Decisions</a>
</nav>
<span class="b2-hdr-right">
<button type="button" class="b2-btn" id="newTaskBtn" aria-haspopup="dialog" aria-expanded="false">+ New task</button>
<span class="sse-status stale" id="sseStatus">
<span class="b2-live-dot" aria-hidden="true"></span>
<span id="sseLabel">connecting</span>
</span>
</span>
</header>`;
}
/** Fullscreen splash overlay, shown until first data render (hard cap 1.5s). */
export function splashHtml(): string {
return `
<div id="b2-splash" class="b2-splash" aria-hidden="true">
<div class="b2-splash-inner">
<img src="/logo.svg" alt="agenthub" width="72" height="72" class="b2-splash-logo">
<div class="b2-splash-word">agenthub</div>
</div>
</div>`;
}
/**
* Inline script: hides the splash after the first successful refresh() or after
* a hard 1500ms cap, whichever comes first. Exposes window.__b2SplashDone() so
* the data layer can signal completion.
*/
export function splashJs(): string {
return `
(function () {
var done = false;
window.__b2SplashDone = function () {
if (done) return;
done = true;
var s = document.getElementById('b2-splash');
if (!s) return;
s.classList.add('b2-splash-hide');
setTimeout(function () { if (s.parentNode) s.parentNode.removeChild(s); }, 450);
};
setTimeout(window.__b2SplashDone, 1500); // hard cap — splash must never block
})();`;
}