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]>
47 lines
4.2 KiB
HTML
47 lines
4.2 KiB
HTML
<!doctype html>
|
|
<html lang="en" data-design="deck" 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 (Deck)</title>
|
|
<meta name="description" content="Mosaic Stack web interface mockup, design 2: top bar with tabs and a card deck. Prototype only; every action is simulated.">
|
|
<link rel="stylesheet" href="shared/app.css">
|
|
<link rel="stylesheet" href="d2-deck.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: 'deck', name: 'Deck',
|
|
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, D = window.MosaicData;
|
|
return `<header class="topbar"><div class="topbar-row">
|
|
<a href="#/" class="wordmark"><i>M</i>Mosaic Stack<small>prototype</small></a>
|
|
<form class="topbar-search" role="search" data-form="search"><label for="q" class="sr-only">Search sessions, projects, agents</label><span class="ic" aria-hidden="true">${B.icon('search')}</span><input id="q" type="search" placeholder="Search sessions, projects, agents"><output class="form-result sr-only"></output></form>
|
|
<div class="topbar-actions"><a href="#/launch" class="btn primary" data-nav>${V.icon('plus', 'Launch')}</a>
|
|
<details class="menu" data-overlay><summary class="btn" aria-label="Appearance and prototype controls">${V.icon('sun')}<span class="menu-label" data-theme-summary></span></summary><div class="menu-panel"><label>Palette<select data-theme="palette">${B.palettes.map(p => `<option value="${p.id}">${p.name}</option>`).join('')}</select></label><fieldset class="mode-control"><legend>Mode</legend><div class="segmented">${['light','dim','dark'].map(m => `<label><input type="radio" name="mode-deck" value="${m}" data-theme="mode"><span>${m[0].toUpperCase() + m.slice(1)}</span></label>`).join('')}</div></fieldset><label>Demo state<select data-demo class="demo-select">${['normal','loading','empty','error'].map(s => `<option value="${s}" ${ctx.demoState === s ? 'selected' : ''}>${s}</option>`).join('')}</select></label><p class="prototype-note">Prototype. Actions are simulated.</p></div></details></div></div>
|
|
<nav class="tabs" aria-label="Primary"><ul>${this.nav.map(([h, i, l]) => `<li><a href="#${h}" data-nav class="tab">${V.icon(i)}<span>${l}</span>${h === '/' ? `<span class="count" aria-label="${D.waiting.length} waiting on you">${D.waiting.length}</span>` : ''}</a></li>`).join('')}</ul></nav></header>
|
|
<main id="main" tabindex="-1" class="content"></main>
|
|
<footer class="foot"><span>Mosaic Stack web interface mockup · design 2 Deck</span><a href="index.html">All designs</a></footer>`;
|
|
},
|
|
home(ctx, V) {
|
|
const D = window.MosaicData;
|
|
return `<div class="page-head"><h1>Control board</h1><p class="muted">${V.running().length} active sessions across ${D.projects.length} projects. ${V.feat('proposed')}</p></div>
|
|
<section class="deck-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 aria-labelledby="h-run"><h2 id="h-run">Running now <span class="count">${V.running().length}</span></h2>${V.sessionCards(ctx, V.running())}</section>
|
|
<div class="deck-lower"><section class="panel" aria-labelledby="h-recent"><h2 id="h-recent">Recently settled</h2>${V.sessionsTable(ctx, V.recent(), {compact: true})}</section><section class="panel" aria-labelledby="h-act"><h2 id="h-act">Activity</h2>${V.eventStream(ctx, 8)}</section></div>`;
|
|
},
|
|
afterRender() { document.querySelectorAll('details.menu[open]').forEach(d => d.removeAttribute('open')); },
|
|
};
|
|
</script>
|
|
<script src="shared/app.js"></script>
|
|
</body>
|
|
</html>
|