jason.woltjeandClaude Opus 5.5
1f4882d2b4
Brand board revisions, the five dashboard mockups with their verify
script and evidence, the slice 1 S5 design note (SLICE1-VIEWS.md, rev 3
plus the S2c section 10 update), the Console mockup of inbox, tasks,
agents and trail (mockups/slice1/) and checks/slice1-verify.mjs (16
checks; check 16 pinned to bus at d27042fa). Also the CHAT-03 progress
log and the 2026-09-26 dirty-tree manifest. Design and evidence only;
no package code. Row 40 (#1522), committed on its own at Sage's
direction, 2026-10-09.
Co-Authored-By: Claude Opus 5.5 <[email protected]>
62 lines
5.5 KiB
HTML
62 lines
5.5 KiB
HTML
<!doctype html>
|
|
<html lang="en" data-design="rail" data-palette="harbor" data-mode="light">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Control board · Mosaic Stack (Rail)</title>
|
|
<meta name="description" content="Mosaic Stack web interface mockup, design 1: left rail navigation. Prototype only; every action is simulated.">
|
|
<link rel="stylesheet" href="shared/app.css">
|
|
<link rel="stylesheet" href="d1-rail.css">
|
|
</head>
|
|
<body>
|
|
<a class="skip" href="#main">Skip to content</a>
|
|
<div id="shell" class="shell"></div>
|
|
<div id="toasts"></div>
|
|
<div id="announce" class="sr-only" aria-live="polite" aria-atomic="true"></div>
|
|
<script src="../brand.js"></script>
|
|
<script src="shared/data.js"></script>
|
|
<script src="shared/views.js"></script>
|
|
<script>
|
|
window.DesignLayout = {
|
|
id: 'rail', name: 'Rail',
|
|
nav: [["/","home","Control board"],["/sessions","conversation","Sessions"],["/work","board","Work"],["/projects","projects","Projects"],["/agents","agents","Agents"],["/runs","check","Runs"],["/messages","people","Messages"],["/library","extensions","Library"],["/settings","sun","Settings"]],
|
|
shell(ctx, V) {
|
|
const B = window.Brand;
|
|
return `<nav class="rail" id="rail" aria-label="Primary">
|
|
<a href="#/" class="wordmark rail-brand"><i>M</i><span class="rail-text">Mosaic Stack</span><small class="rail-text">prototype</small></a>
|
|
<button type="button" class="rail-toggle btn" id="rail-toggle" aria-expanded="${!ctx.local.collapsed}" aria-controls="rail-list"><span class="ic" aria-hidden="true">${B.icon('arrow')}</span><span class="sr-only">Collapse navigation</span></button>
|
|
<ul class="rail-list" id="rail-list">${this.nav.map(([h, i, l]) => `<li><a href="#${h}" data-nav class="nav-link" title="${l}">${V.icon(i)}<span class="rail-text">${l}</span>${h === '/' ? `<span class="rail-count" aria-label="${window.MosaicData.waiting.length} waiting on you">${window.MosaicData.waiting.length}</span>` : ''}</a></li>`).join('')}</ul>
|
|
<div class="rail-foot">
|
|
<a href="#/launch" class="btn primary rail-launch" data-nav>${V.icon('plus')}<span class="rail-text">Launch</span></a>
|
|
<div class="theme-quick rail-text" role="group" aria-label="Mode">${['light','dim','moon'].map((ic, i) => { const m = ['light','dim','dark'][i]; return `<label class="btn theme-btn" title="${m}"><input type="radio" name="mode-rail" value="${m}" data-theme="mode" class="sr-only"><span class="ic" aria-hidden="true">${B.icon(ic === 'light' ? 'sun' : ic)}</span><span class="sr-only">${m} mode</span></label>`; }).join('')}</div>
|
|
<p class="prototype-note rail-text">Prototype. Actions are simulated.</p>
|
|
</div></nav>
|
|
<div class="frame">
|
|
<header class="topline"><button type="button" class="btn menu-btn" id="menu-btn" aria-expanded="false" aria-controls="rail">${V.icon('board', 'Menu')}</button><span class="topline-title"><span data-theme-summary></span></span><a href="#/settings" class="btn small-btn" data-nav>${V.icon('sun', 'Appearance')}</a></header>
|
|
<main id="main" tabindex="-1" class="content"></main>
|
|
<footer class="foot"><span>Mosaic Stack web interface mockup · design 1 Rail</span><span>Sample data as of ${V.stamp(window.MosaicData.now.toISOString().slice(0, 16) + ':00Z')}</span><a href="index.html">All designs</a></footer></div>`;
|
|
},
|
|
home(ctx, V) {
|
|
const D = window.MosaicData;
|
|
return `<div class="page-head"><h1>Control board</h1><p class="muted">${V.running().length} sessions active across ${D.projects.length} projects. ${D.waiting.length} waiting on you. ${V.feat('proposed')}</p></div>
|
|
<div class="home-grid"><section class="panel panel-waiting" aria-labelledby="h-wait"><h2 id="h-wait">Waiting on you <span class="count">${D.waiting.length}</span></h2>${V.waitingList(ctx, 'row')}</section>
|
|
<section class="panel" aria-labelledby="h-run"><h2 id="h-run">Running now <span class="count">${V.running().length}</span></h2>${V.sessionsTable(ctx, V.running())}</section>
|
|
<section class="panel" aria-labelledby="h-recent"><h2 id="h-recent">Recently settled</h2>${V.sessionsTable(ctx, V.recent(), {compact: true})}</section>
|
|
<aside class="panel panel-side"><section aria-labelledby="h-act"><h2 id="h-act">Activity</h2>${V.eventStream(ctx, 6)}</section>${V.quickLaunch()}</aside></div>`;
|
|
},
|
|
afterRender(ctx) {
|
|
document.body.classList.toggle('rail-collapsed', ctx.local.collapsed);
|
|
const t = document.getElementById('rail-toggle'); if (t) t.setAttribute('aria-expanded', String(!ctx.local.collapsed));
|
|
document.getElementById('menu-btn')?.setAttribute('aria-expanded', 'false'); document.body.classList.remove('rail-open');
|
|
},
|
|
keydown(e) { if (e.key === 'Escape') { document.body.classList.remove('rail-open'); document.getElementById('menu-btn')?.setAttribute('aria-expanded', 'false'); } },
|
|
};
|
|
document.addEventListener('click', e => {
|
|
if (e.target.closest('#rail-toggle')) { const app = window.MosaicApp; app.ctx.local.collapsed = !app.ctx.local.collapsed; app.persist(); document.body.classList.toggle('rail-collapsed', app.ctx.local.collapsed); document.getElementById('rail-toggle').setAttribute('aria-expanded', String(!app.ctx.local.collapsed)); app.announce(app.ctx.local.collapsed ? 'Navigation collapsed to icons.' : 'Navigation expanded.'); }
|
|
if (e.target.closest('#menu-btn')) { const open = document.body.classList.toggle('rail-open'); document.getElementById('menu-btn').setAttribute('aria-expanded', String(open)); if (open) document.querySelector('#rail a')?.focus(); }
|
|
});
|
|
</script>
|
|
<script src="shared/app.js"></script>
|
|
</body>
|
|
</html>
|