Build the Localization Suite delivery dashboard

.github/workflows/dashboard-pages.yml

@@ -0,0 +1,51 @@
+name: Dashboard Pages
+
+on:
+  push:
+    branches: [main]
+    paths:
+      - index.html
+      - tokens.css
+      - assets/**
+      - scripts/build-dashboard.mjs
+      - .github/workflows/dashboard-pages.yml
+  schedule:
+    - cron: "17,47 * * * *"
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: pages
+  cancel-in-progress: true
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+      - name: Build dashboard data
+        env:
+          GH_TOKEN: ${{ github.token }}
+          PROJECTS_TOKEN: ${{ secrets.PROJECTS_TOKEN }}
+        run: node scripts/build-dashboard.mjs
+      - uses: actions/configure-pages@v5
+      - uses: actions/upload-pages-artifact@v4
+        with:
+          path: .
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

.hallmark/log.json

@@ -0,0 +1,9 @@
+[
+  {
+    "date": "2026-08-01",
+    "macrostructure": "Operations Ledger",
+    "theme": "Control Room",
+    "enrichment": "CSS status rail",
+    "brief": "Cross-repository GitHub delivery dashboard"
+  }
+]

assets/dashboard.css

@@ -0,0 +1,107 @@
+/* Hallmark - macrostructure: Operations Ledger - tone: editorial control room - anchor hue: signal orange
+ * pre-emit critique: Philosophy 5 / Hierarchy 5 / Execution 4 / Specificity 5 / Restraint 4 / Variety 5
+ */
+@import url("../tokens.css");
+* { box-sizing: border-box; }
+html, body { margin: 0; overflow-x: clip; background: var(--color-paper); color: var(--color-ink); }
+body { font-family: var(--font-body); font-size: var(--text-body); line-height: 1.55; background-image: linear-gradient(90deg, transparent 49.8%, color-mix(in oklch, var(--color-rule), transparent 70%) 50%, transparent 50.2%); background-size: 4rem 100%; }
+a { color: inherit; text-underline-offset: 0.22em; }
+a:hover { color: var(--color-accent-deep); }
+a:focus-visible, button:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
+.skip-link { position: fixed; left: var(--space-md); top: var(--space-md); z-index: 20; padding: var(--space-sm) var(--space-md); background: var(--color-ink); color: var(--color-white); transform: translateY(-180%); }
+.skip-link:focus { transform: translateY(0); }
+.masthead { min-height: 5rem; padding: var(--space-md) clamp(1rem, 4vw, 4rem); display: flex; align-items: center; justify-content: space-between; gap: var(--space-xl); border-bottom: var(--rule-heavy) solid var(--color-ink); background: color-mix(in oklch, var(--color-paper), transparent 6%); }
+.wordmark { font-family: var(--font-display); font-weight: 700; text-decoration: none; letter-spacing: -0.04em; white-space: nowrap; }
+.wordmark span { color: var(--color-accent); font-weight: 500; }
+nav { display: flex; align-items: center; gap: clamp(0.75rem, 2vw, 2rem); font-family: var(--font-mono); font-size: var(--text-sm); }
+nav a { white-space: nowrap; }
+.nav-project { padding: var(--space-sm) var(--space-md); border: var(--rule-thin) solid var(--color-ink); text-decoration: none; }
+.nav-project:hover { background: var(--color-ink); color: var(--color-white); }
+main { width: min(100%, 96rem); margin: 0 auto; padding: 0 clamp(1rem, 4vw, 4rem); }
+.hero { min-height: 39rem; display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(16rem, 0.55fr); align-items: end; gap: var(--space-2xl); padding: var(--space-3xl) 0 var(--space-2xl); border-bottom: var(--rule-heavy) solid var(--color-ink); }
+.signal { display: flex; align-items: center; gap: var(--space-sm); font-family: var(--font-mono); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.08em; }
+.signal span { width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--color-good); animation: pulse 2s var(--ease-in-out) infinite; }
+h1, h2, h3 { margin: 0; font-family: var(--font-display); font-style: normal; line-height: 0.95; letter-spacing: -0.055em; overflow-wrap: anywhere; min-width: 0; }
+h1 { max-width: 12ch; margin: var(--space-lg) 0; font-size: var(--text-display); }
+h2 { font-size: clamp(2rem, 4vw, 4.5rem); }
+h3 { font-size: var(--text-lg); letter-spacing: -0.025em; }
+.hero-deck { max-width: 44rem; margin: 0; color: var(--color-ink-soft); font-size: var(--text-lg); }
+.sync-panel { align-self: end; padding: var(--space-xl); border: var(--rule-thin) solid var(--color-ink); background: var(--color-paper-deep); }
+.sync-panel span, .sync-panel strong { display: block; }
+.sync-label { font-family: var(--font-mono); font-size: var(--text-sm); text-transform: uppercase; }
+.sync-panel strong { margin: var(--space-sm) 0 var(--space-lg); font-family: var(--font-display); font-size: var(--text-lg); }
+button { min-height: 2.75rem; padding: var(--space-sm) var(--space-md); border: var(--rule-thin) solid var(--color-ink); border-radius: var(--radius-sm); background: var(--color-ink); color: var(--color-white); font: 600 var(--text-sm) var(--font-mono); cursor: pointer; transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out); }
+button:hover { transform: translateY(-2px); }
+button:active { transform: translateY(0); }
+button:disabled { cursor: wait; opacity: 0.55; transform: none; }
+button[data-state="error"] { background: var(--color-danger); }
+button[data-state="success"] { background: var(--color-good); }
+.metric-rail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: var(--rule-heavy) solid var(--color-ink); }
+.metric-rail article { min-height: 10rem; padding: var(--space-xl) var(--space-lg); border-right: var(--rule-thin) solid var(--color-rule); display: flex; flex-direction: column; justify-content: space-between; }
+.metric-rail article:last-child { border-right: 0; }
+.metric-rail span, .section-head p, .section-head > span, .repo-meta, .status-legend { font-family: var(--font-mono); font-size: var(--text-sm); }
+.metric-rail strong { font: 700 clamp(2.5rem, 5vw, 5rem) var(--font-display); letter-spacing: -0.07em; }
+.workflow, .repositories, .ledger, .gates { padding: var(--space-3xl) 0; border-bottom: var(--rule-heavy) solid var(--color-ink); }
+.section-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-xl); align-items: end; margin-bottom: var(--space-2xl); }
+.section-head p { margin: 0 0 var(--space-sm); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-accent-deep); }
+.section-head > a, .section-head > span { align-self: end; white-space: nowrap; }
+.status-track { min-height: 4rem; display: flex; overflow: hidden; border: var(--rule-thin) solid var(--color-ink); background: var(--color-paper-deep); }
+.status-segment { min-width: 0.35rem; padding: var(--space-md) var(--space-sm); color: var(--color-white); font: 500 var(--text-sm) var(--font-mono); white-space: nowrap; overflow: hidden; }
+.status-segment[data-status="Backlog"] { background: var(--color-ink-soft); }
+.status-segment[data-status="Ready"] { background: var(--color-focus); }
+.status-segment[data-status="In Progress"] { background: var(--color-accent); }
+.status-segment[data-status="In Review"] { background: var(--color-warn); color: var(--color-ink); }
+.status-segment[data-status="Blocked"] { background: var(--color-danger); }
+.status-segment[data-status="Done"] { background: var(--color-good); }
+.status-legend { display: flex; flex-wrap: wrap; gap: var(--space-lg); margin-top: var(--space-md); }
+.repo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
+.repo-card { min-height: 21rem; padding: var(--space-xl); display: flex; flex-direction: column; border: var(--rule-thin) solid var(--color-ink); background: color-mix(in oklch, var(--color-paper), var(--color-white) 30%); transition: transform var(--dur-base) var(--ease-out); }
+.repo-card:hover { transform: translateY(-4px); }
+.repo-card h3 { margin: var(--space-xl) 0 var(--space-sm); font-size: clamp(1.9rem, 4vw, 3.4rem); }
+.repo-card .repo-index { font-family: var(--font-mono); color: var(--color-accent-deep); }
+.repo-card .repo-meta { margin-top: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); padding-top: var(--space-xl); border-top: var(--rule-thin) solid var(--color-rule); }
+.repo-meta strong, .repo-meta span { display: block; }
+.repo-meta strong { font: 600 var(--text-lg) var(--font-display); }
+.repo-card > a { margin-top: var(--space-lg); font-family: var(--font-mono); font-size: var(--text-sm); }
+.milestone-list { border-top: var(--rule-thin) solid var(--color-ink); }
+.milestone-row { display: grid; grid-template-columns: minmax(12rem, 0.8fr) minmax(0, 2fr) auto; gap: var(--space-xl); align-items: center; padding: var(--space-lg) 0; border-bottom: var(--rule-thin) solid var(--color-rule); }
+.milestone-row a { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; }
+.progress { height: 0.65rem; background: var(--color-paper-deep); overflow: hidden; }
+.progress span { display: block; height: 100%; background: var(--color-accent); }
+.milestone-count { min-width: 6rem; text-align: right; font-family: var(--font-mono); font-size: var(--text-sm); }
+.gate-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xl); }
+.gate-columns h3 { padding-bottom: var(--space-md); border-bottom: var(--rule-thin) solid var(--color-ink); }
+.issue-item, .empty-state { display: block; padding: var(--space-md) 0; border-bottom: var(--rule-thin) solid var(--color-rule); }
+.issue-item { text-decoration: none; }
+.issue-item span { display: block; margin-top: var(--space-xs); color: var(--color-ink-soft); font-family: var(--font-mono); font-size: var(--text-sm); }
+footer { width: min(100%, 96rem); margin: 0 auto; padding: var(--space-2xl) clamp(1rem, 4vw, 4rem); display: flex; justify-content: space-between; gap: var(--space-xl); font-family: var(--font-mono); font-size: var(--text-sm); }
+.reveal { opacity: 0; transform: translateY(1rem); animation: reveal var(--dur-slow) var(--ease-out) forwards; }
+.reveal:nth-of-type(2) { animation-delay: 90ms; }
+.reveal:nth-of-type(3) { animation-delay: 150ms; }
+@keyframes reveal { to { opacity: 1; transform: translateY(0); } }
+@keyframes pulse { 50% { opacity: 0.35; transform: scale(0.75); } }
+@media (max-width: 800px) {
+  .masthead { align-items: flex-start; flex-direction: column; }
+  nav { width: 100%; justify-content: space-between; gap: var(--space-sm); }
+  nav a:not(.nav-project) { display: none; }
+  .hero { min-height: auto; grid-template-columns: minmax(0, 1fr); padding-top: var(--space-2xl); }
+  .metric-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .metric-rail article:nth-child(2) { border-right: 0; }
+  .metric-rail article:nth-child(-n+2) { border-bottom: var(--rule-thin) solid var(--color-rule); }
+  .section-head { grid-template-columns: minmax(0, 1fr); align-items: start; }
+  .section-head > a, .section-head > span { justify-self: start; white-space: normal; }
+  .repo-grid, .gate-columns { grid-template-columns: minmax(0, 1fr); }
+  .milestone-row { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-md); }
+  .milestone-row .progress { grid-column: 1 / -1; grid-row: 2; }
+  footer { flex-direction: column; }
+}
+@media (max-width: 420px) {
+  h1 { font-size: clamp(2.65rem, 15vw, 4rem); }
+  .metric-rail { grid-template-columns: minmax(0, 1fr); }
+  .metric-rail article { min-height: 7rem; border-right: 0; border-bottom: var(--rule-thin) solid var(--color-rule); }
+  .repo-card .repo-meta { grid-template-columns: minmax(0, 1fr); }
+  .status-segment { font-size: 0; }
+}
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
+}

assets/dashboard.js

@@ -0,0 +1,65 @@
+const DATA_URL = "dashboard-data.json";
+const $ = (selector) => document.querySelector(selector);
+const escapeHtml = (value = "") => String(value).replace(/[&<>'"]/g, (char) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", "'": "&#39;", '"': "&quot;" }[char]));
+const number = (value) => new Intl.NumberFormat("en-US").format(value || 0);
+const dateTime = (value) => value ? new Intl.DateTimeFormat("en-GB", { dateStyle: "medium", timeStyle: "short", timeZone: "Asia/Bangkok" }).format(new Date(value)) : "Not available";
+
+function render(data) {
+  $("#last-sync").textContent = `${dateTime(data.generatedAt)} ICT`;
+  $("#metric-repos").textContent = number(data.totals.repositories);
+  $("#metric-open").textContent = number(data.totals.openIssues);
+  $("#metric-milestones").textContent = number(data.totals.openMilestones);
+  $("#metric-blocked").textContent = number(data.project.blocked.length);
+
+  const statuses = Object.entries(data.project.statusCounts || {});
+  const statusTotal = statuses.reduce((sum, [, count]) => sum + count, 0) || 1;
+  $("#status-track").innerHTML = statuses.map(([status, count]) => `<div class="status-segment" data-status="${escapeHtml(status)}" style="flex:${count}" title="${escapeHtml(status)}: ${count}">${escapeHtml(status)} ${count}</div>`).join("");
+  $("#status-legend").innerHTML = statuses.map(([status, count]) => `<span>${escapeHtml(status)} / ${number(count)} / ${Math.round((count / statusTotal) * 100)}%</span>`).join("");
+
+  $("#repo-grid").innerHTML = data.repositories.map((repo, index) => `
+    <article class="repo-card">
+      <span class="repo-index">0${index + 1} / ${escapeHtml(repo.key.toUpperCase())}</span>
+      <h3>${escapeHtml(repo.displayName)}</h3>
+      <p>${escapeHtml(repo.description || "Repository description pending.")}</p>
+      <div class="repo-meta">
+        <div><span>Open issues</span><strong>${number(repo.openIssues)}</strong></div>
+        <div><span>Milestones</span><strong>${number(repo.openMilestones)}</strong></div>
+        <div><span>Latest CI</span><strong>${escapeHtml(repo.latestWorkflow || "--")}</strong></div>
+      </div>
+      <a href="${escapeHtml(repo.url)}" target="_blank" rel="noreferrer">Inspect repository</a>
+    </article>`).join("");
+  const healthy = data.repositories.filter((repo) => repo.latestWorkflow === "success" || repo.latestWorkflow === "--").length;
+  $("#repo-health").textContent = `${healthy} of ${data.repositories.length} repositories clear`;
+
+  const milestones = data.repositories.flatMap((repo) => repo.milestones.map((milestone) => ({ ...milestone, repo: repo.displayName })));
+  $("#milestone-list").innerHTML = milestones.length ? milestones.slice(0, 16).map((item) => {
+    const total = item.openIssues + item.closedIssues;
+    const percent = total ? Math.round((item.closedIssues / total) * 100) : 0;
+    return `<div class="milestone-row"><a href="${escapeHtml(item.url)}" target="_blank" rel="noreferrer">${escapeHtml(item.repo)} / ${escapeHtml(item.title)}</a><div class="progress" aria-label="${percent}% complete"><span style="width:${percent}%"></span></div><span class="milestone-count">${item.closedIssues}/${total} done</span></div>`;
+  }).join("") : '<p class="empty-state">No open milestones.</p>';
+
+  const issueList = (items, empty) => items.length ? items.slice(0, 12).map((item) => `<a class="issue-item" href="${escapeHtml(item.url)}" target="_blank" rel="noreferrer">${escapeHtml(item.title)}<span>${escapeHtml(item.repository)} / ${escapeHtml(item.targetVersion || "No target")}</span></a>`).join("") : `<p class="empty-state">${empty}</p>`;
+  $("#gate-list").innerHTML = issueList(data.project.requiredGates, "No required gates.");
+  $("#blocked-list").innerHTML = issueList(data.project.blocked, "No blocked work.");
+}
+
+async function load() {
+  const button = $("#refresh-data");
+  button.disabled = true;
+  button.textContent = "Refreshing...";
+  try {
+    const response = await fetch(`${DATA_URL}?t=${Date.now()}`, { cache: "no-store" });
+    if (!response.ok) throw new Error(`HTTP ${response.status}`);
+    render(await response.json());
+    button.dataset.state = "success";
+    button.textContent = "Data refreshed";
+  } catch (error) {
+    button.dataset.state = "error";
+    button.textContent = "Refresh failed";
+    console.error(error);
+  } finally {
+    setTimeout(() => { button.disabled = false; button.dataset.state = ""; button.textContent = "Refresh data"; }, 1400);
+  }
+}
+$("#refresh-data").addEventListener("click", load);
+load();