<!doctype html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Task Graph Phase Concepts</title>
<style>
:root {
color-scheme: light;
--bg: #f5f7fb;
--panel: #ffffff;
--line: #d8e0ea;
--text: #17212f;
--muted: #627086;
--blue: #2f7fd3;
}
* { box-sizing: border-box; }
body {
margin: 0;
font: 14px/1.45 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
background: var(--bg);
color: var(--text);
}
header {
position: sticky;
top: 0;
z-index: 2;
padding: 18px 24px;
background: color-mix(in srgb, var(--bg) 88%, white);
border-bottom: 1px solid var(--line);
}
h1 { margin: 0; font-size: 22px; letter-spacing: 0; }
header p { margin: 4px 0 0; color: var(--muted); max-width: 900px; }
main { padding: 20px 24px 28px; }
section + section { margin-top: 26px; }
h2 { margin: 0 0 10px; font-size: 15px; letter-spacing: 0; }
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 14px;
}
button.card {
display: grid;
gap: 8px;
width: 100%;
padding: 10px;
text-align: left;
background: var(--panel);
border: 1px solid var(--line);
border-radius: 8px;
color: inherit;
cursor: zoom-in;
}
button.card:hover,
button.card:focus-visible {
border-color: var(--blue);
box-shadow: 0 0 0 3px rgba(47, 127, 211, 0.14);
outline: none;
}
.thumb {
width: 100%;
aspect-ratio: 16 / 10;
object-fit: cover;
object-position: top left;
border: 1px solid #e4eaf1;
border-radius: 6px;
background: #f9fbfd;
}
.title { font-weight: 700; }
.note { color: var(--muted); font-size: 13px; min-height: 38px; }
dialog {
width: min(96vw, 1720px);
height: min(94vh, 1100px);
padding: 0;
border: 1px solid var(--line);
border-radius: 10px;
box-shadow: 0 24px 80px rgba(18, 33, 55, 0.34);
}
dialog::backdrop { background: rgba(16, 28, 44, 0.54); }
.modal {
display: grid;
grid-template-rows: auto 1fr;
height: 100%;
background: var(--panel);
}
.modal-bar {
display: grid;
grid-template-columns: auto 1fr auto auto auto;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-bottom: 1px solid var(--line);
}
.modal-title { font-weight: 750; }
.modal-note { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.icon-button {
min-width: 34px;
height: 34px;
border: 1px solid var(--line);
border-radius: 7px;
background: #f9fbfd;
color: var(--text);
cursor: pointer;
}
.icon-button:hover,
.icon-button:focus-visible {
border-color: var(--blue);
outline: none;
}
.modal-stage {
min-height: 0;
overflow: auto;
padding: 14px;
background: #eef3f8;
}
.modal-stage img {
display: block;
max-width: 100%;
height: auto;
margin: 0 auto;
border: 1px solid var(--line);
border-radius: 8px;
background: white;
}
@media (max-width: 720px) {
header, main { padding-left: 14px; padding-right: 14px; }
.grid { grid-template-columns: 1fr; }
.modal-bar { grid-template-columns: auto 1fr auto; }
.modal-note { display: none; }
}
</style>
<header>
<h1>Task Graph Phase Concepts</h1>
<p>Design exploration for Done as artifact lookup, Current as the active dispatch graph, and Backlog as dependency-path planning. Click any thumbnail for a near-full-screen view.</p>
</header>
<main>
<section>
<h2>Baselines</h2>
<div class="grid" data-gallery-section>
<button class="card" data-image="baseline-desktop-graph-hero.png" data-title="Baseline - Graph hero" data-note="Fixture workbench graph surface before phase controls.">
<img class="thumb" src="baseline-desktop-graph-hero.png" alt="">
<span class="title">Baseline - Graph hero</span>
<span class="note">Fixture workbench graph surface before phase controls.</span>
</button>
<button class="card" data-image="baseline-desktop-full.png" data-title="Baseline - Full desktop" data-note="Full app context with Run Detail and Inspector.">
<img class="thumb" src="baseline-desktop-full.png" alt="">
<span class="title">Baseline - Full desktop</span>
<span class="note">Full app context with Run Detail and Inspector.</span>
</button>
<button class="card" data-image="baseline-mobile-graph-hero.png" data-title="Baseline - Mobile crop" data-note="Narrow viewport pressure check from the fixture workbench.">
<img class="thumb" src="baseline-mobile-graph-hero.png" alt="">
<span class="title">Baseline - Mobile crop</span>
<span class="note">Narrow viewport pressure check from the fixture workbench.</span>
</button>
</div>
</section>
<section>
<h2>First Round</h2>
<div class="grid" data-gallery-section>
<button class="card" data-image="concept-01-show-done-backlog-toggles.png" data-title="01 - Simple visibility toggles" data-note="Rejected direction: too vertical, but useful as baseline controls.">
<img class="thumb" src="concept-01-show-done-backlog-toggles.png" alt="">
<span class="title">01 - Simple visibility toggles</span>
<span class="note">Rejected direction: too vertical, but useful as baseline controls.</span>
</button>
<button class="card" data-image="concept-02-done-current-backlog-bands.png" data-title="02 - Done / current / backlog bands" data-note="Useful: left-to-right phase semantics and current-to-backlog arrows.">
<img class="thumb" src="concept-02-done-current-backlog-bands.png" alt="">
<span class="title">02 - Done / current / backlog bands</span>
<span class="note">Useful: left-to-right phase semantics and current-to-backlog arrows.</span>
</button>
<button class="card" data-image="concept-03-collapsible-context-rails.png" data-title="03 - Collapsible side context rails" data-note="Useful: collapsible rails; content model needed refinement.">
<img class="thumb" src="concept-03-collapsible-context-rails.png" alt="">
<span class="title">03 - Collapsible side context rails</span>
<span class="note">Useful: collapsible rails; content model needed refinement.</span>
</button>
<button class="card" data-image="concept-04-temporal-stepper-window.png" data-title="04 - Temporal stepper window" data-note="Useful: focusable panes; timeline dots were too linear.">
<img class="thumb" src="concept-04-temporal-stepper-window.png" alt="">
<span class="title">04 - Temporal stepper window</span>
<span class="note">Useful: focusable panes; timeline dots were too linear.</span>
</button>
<button class="card" data-image="concept-05-done-artifacts-current-future-gantt.png" data-title="05 - Done artifacts + future Gantt" data-note="Discard chrome/date semantics; keep compact PR lookup idea.">
<img class="thumb" src="concept-05-done-artifacts-current-future-gantt.png" alt="">
<span class="title">05 - Done artifacts + future Gantt</span>
<span class="note">Discard chrome/date semantics; keep compact PR lookup idea.</span>
</button>
<button class="card" data-image="concept-06-completed-context-future-path.png" data-title="06 - Completed context + future path" data-note="Discarded direction; too much invented app structure.">
<img class="thumb" src="concept-06-completed-context-future-path.png" alt="">
<span class="title">06 - Completed context + future path</span>
<span class="note">Discarded direction; too much invented app structure.</span>
</button>
</div>
</section>
<section>
<h2>Refined Phase Controls</h2>
<div class="grid" data-gallery-section>
<button class="card" data-image="concept-07-expanded-artifact-rails.png" data-title="07 - Expanded rails default" data-note="Done ledger + current graph + backlog dependency paths.">
<img class="thumb" src="concept-07-expanded-artifact-rails.png" alt="">
<span class="title">07 - Expanded rails default</span>
<span class="note">Done ledger + current graph + backlog dependency paths.</span>
</button>
<button class="card" data-image="concept-08-done-collapsed-current-wide.png" data-title="08 - Done collapsed, current wide" data-note="Current keeps the primary graph while Done compresses to a handle.">
<img class="thumb" src="concept-08-done-collapsed-current-wide.png" alt="">
<span class="title">08 - Done collapsed, current wide</span>
<span class="note">Current keeps the primary graph while Done compresses to a handle.</span>
</button>
<button class="card" data-image="concept-09-backlog-focused-paths.png" data-title="09 - Backlog focused paths" data-note="Future analysis without dates: grouped dependency paths and unblocking flow.">
<img class="thumb" src="concept-09-backlog-focused-paths.png" alt="">
<span class="title">09 - Backlog focused paths</span>
<span class="note">Future analysis without dates: grouped dependency paths and unblocking flow.</span>
</button>
<button class="card" data-image="concept-10-done-focused-ledger.png" data-title="10 - Done focused ledger" data-note="Completed tasks as sortable artifact lookup: PR, capsule, source.">
<img class="thumb" src="concept-10-done-focused-ledger.png" alt="">
<span class="title">10 - Done focused ledger</span>
<span class="note">Completed tasks as sortable artifact lookup: PR, capsule, source.</span>
</button>
<button class="card" data-image="concept-11-phase-lens-overview.png" data-title="11 - Phase lens overview" data-note="One continuous canvas with phase lens controls.">
<img class="thumb" src="concept-11-phase-lens-overview.png" alt="">
<span class="title">11 - Phase lens overview</span>
<span class="note">One continuous canvas with phase lens controls.</span>
</button>
<button class="card" data-image="concept-12-current-focus-downstream.png" data-title="12 - Current focus downstream" data-note="Selected current task reveals only relevant backlog paths.">
<img class="thumb" src="concept-12-current-focus-downstream.png" alt="">
<span class="title">12 - Current focus downstream</span>
<span class="note">Selected current task reveals only relevant backlog paths.</span>
</button>
</div>
</section>
</main>
<dialog id="viewer" aria-labelledby="viewer-title">
<div class="modal">
<div class="modal-bar">
<button class="icon-button" type="button" data-prev aria-label="Previous image"><</button>
<div>
<div class="modal-title" id="viewer-title"></div>
<div class="modal-note" id="viewer-note"></div>
</div>
<button class="icon-button" type="button" data-next aria-label="Next image">></button>
<a class="icon-button" data-open target="_blank" rel="noreferrer" aria-label="Open image in new tab" style="display:grid;place-items:center;text-decoration:none;">↗</a>
<button class="icon-button" type="button" data-close aria-label="Close viewer">x</button>
</div>
<div class="modal-stage">
<img id="viewer-image" alt="">
</div>
</div>
</dialog>
<script>
const cards = Array.from(document.querySelectorAll(".card"));
const viewer = document.querySelector("#viewer");
const image = document.querySelector("#viewer-image");
const title = document.querySelector("#viewer-title");
const note = document.querySelector("#viewer-note");
const openLink = document.querySelector("[data-open]");
let current = 0;
function show(index) {
current = (index + cards.length) % cards.length;
const card = cards[current];
image.src = card.dataset.image;
image.alt = card.dataset.title;
title.textContent = card.dataset.title;
note.textContent = card.dataset.note;
openLink.href = card.dataset.image;
if (!viewer.open) viewer.showModal();
}
cards.forEach((card, index) => {
card.addEventListener("click", () => show(index));
});
document.querySelector("[data-close]").addEventListener("click", () => viewer.close());
document.querySelector("[data-prev]").addEventListener("click", () => show(current - 1));
document.querySelector("[data-next]").addEventListener("click", () => show(current + 1));
viewer.addEventListener("click", (event) => {
if (event.target === viewer) viewer.close();
});
document.addEventListener("keydown", (event) => {
if (!viewer.open) return;
if (event.key === "ArrowLeft") show(current - 1);
if (event.key === "ArrowRight") show(current + 1);
});
</script>