From a479f47b4e8bd440ca077f446a7899d93de84435 Mon Sep 17 00:00:00 2001 From: Kjell Tore Guttormsen Date: Sun, 10 May 2026 16:43:22 +0200 Subject: [PATCH] feat(voyage): implement dashboard via fleet-grid + fleet-tile with status vocabulary MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Step 14 (v4.3 Sesjon 3 — Wave 3) — adds renderDashboard pipeline that turns a ProjectArtifacts struct (produced by loadProjectDirectory in Step 13) into a fleet-grid of fleet-tiles, one per artifact-type (brief / plan / review / research / progress). Status vocabulary: complete, in-progress, blocked, missing, stale Severity mapping: missing → critical, blocked → high, in-progress + stale → medium, complete → low. Severity drives DS color tokens via [data-severity] attribute selectors. When loadProjectDirectory completes, dashboard takes over the main stage (paste-flow elements hidden); topbar updates with project breadcrumb. Step 13's pipeline already calls renderDashboard via graceful-fallback, so wiring is automatic. Test additions (4): fleet-grid + fleet-tile presence, renderDashboard function declaration, status vocabulary completeness. --- .../voyage/playground/voyage-playground.html | 194 ++++++++++++++++++ .../playground/voyage-playground.test.mjs | 27 +++ 2 files changed, 221 insertions(+) diff --git a/plugins/voyage/playground/voyage-playground.html b/plugins/voyage/playground/voyage-playground.html index dcf0e33..853d43a 100644 --- a/plugins/voyage/playground/voyage-playground.html +++ b/plugins/voyage/playground/voyage-playground.html @@ -535,6 +535,48 @@ word-break: break-all; margin-bottom: var(--space-3); } + + /* v4.3 Step 14 — dashboard fleet-grid stage. Tiles inherit DS + fleet-tile typography from components-tier3-supplement.css; severity + badge inherits DS color-severity-* tokens. data-severity drives + border + badge color via attribute selectors below. */ + #voyage-dashboard[hidden], + #voyage-detail[hidden] { display: none; } + .voyage-dashboard__page, + .voyage-detail__page { padding: 0; } + .fleet-tile[data-severity="critical"] { border-left: 3px solid var(--color-severity-critical); } + .fleet-tile[data-severity="high"] { border-left: 3px solid var(--color-severity-high); } + .fleet-tile[data-severity="medium"] { border-left: 3px solid var(--color-severity-medium); } + .fleet-tile[data-severity="low"] { border-left: 3px solid var(--color-state-success); } + .fleet-tile__status-badge { + display: inline-block; + padding: 2px var(--space-2); + border-radius: var(--radius-sm); + font-size: var(--font-size-xs); + font-weight: var(--font-weight-semibold); + letter-spacing: 0.02em; + text-transform: uppercase; + color: #fff; + } + .fleet-tile__status-badge[data-severity="critical"] { background: var(--color-severity-critical); } + .fleet-tile__status-badge[data-severity="high"] { background: var(--color-severity-high); } + .fleet-tile__status-badge[data-severity="medium"] { background: var(--color-severity-medium); color: #1a1a1a; } + .fleet-tile__status-badge[data-severity="low"] { background: var(--color-state-success); } + .fleet-tile__stat { + margin-top: var(--space-2); + font-size: var(--font-size-sm); + color: var(--color-text-secondary); + } + .voyage-back-btn { + margin-bottom: var(--space-4); + padding: var(--space-2) var(--space-3); + background: var(--color-surface); + border: 1px solid var(--color-border-subtle); + border-radius: var(--radius-sm); + cursor: pointer; + font: inherit; + } + .voyage-back-btn:hover { background: var(--color-bg-soft); } @@ -582,6 +624,17 @@ + + + + + +