checkpoint: scaffold qrunproxy timeline API

2026-02-19 20:55:28 -07:00
parent ea932d3225
commit 0778ffa6f8
7 changed files with 1405 additions and 39 deletions
--- a/cmd/qrunproxy/static/index.html
+++ b/cmd/qrunproxy/static/index.html
@@ -0,0 +1,216 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Qrun</title>
+<style>
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+:root {
+  --bg: #111;
+  --bg2: #1a1a1a;
+  --fg: #eee;
+  --fg-dim: #888;
+  --border: #333;
+  --cue-color: #f72;
+  --cue-bg: rgba(58, 24, 0, 0.7);
+  --light-color: #c8e;
+  --light-bg: rgba(42, 10, 42, 0.55);
+  --video-color: #4d4;
+  --video-bg: rgba(10, 42, 10, 0.55);
+  --audio-color: #58f;
+  --audio-bg: rgba(10, 10, 42, 0.55);
+  --delay-color: #999;
+  --delay-bg: rgba(26, 26, 26, 0.55);
+  --infinity-color: #666;
+}
+
+html, body {
+  background: var(--bg);
+  color: var(--fg);
+  font-family: "SF Mono", "Menlo", "Consolas", "DejaVu Sans Mono", monospace;
+  font-size: 13px;
+  line-height: 1.4;
+  height: 100%;
+  overflow: hidden;
+}
+
+.app { display: flex; flex-direction: column; height: 100%; }
+
+header {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 8px 16px; background: var(--bg2);
+  border-bottom: 1px solid var(--border); flex-shrink: 0;
+}
+header h1 { font-size: 16px; font-weight: 600; letter-spacing: 0.05em; }
+.header-status { display: flex; gap: 16px; align-items: center; font-size: 12px; color: var(--fg-dim); }
+.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #4d4; margin-right: 4px; }
+
+.timeline-container { flex: 1; overflow: auto; }
+
+.timeline {
+  display: grid;
+  grid-auto-rows: 24px;
+}
+
+.track-header {
+  position: sticky; top: 0; z-index: 10;
+  padding: 6px 8px; font-size: 10px; font-weight: 600;
+  text-transform: uppercase; letter-spacing: 0.08em; text-align: center;
+  border-bottom: 2px solid var(--border); border-right: 1px solid var(--border);
+  background: var(--bg2); color: var(--fg-dim);
+}
+
+.cell {
+  border-right: 1px solid var(--border);
+  border-bottom: 1px solid var(--border);
+  padding: 0; position: relative;
+  display: flex; flex-direction: column;
+  justify-content: center;
+}
+
+.block {
+  margin: 0 3px; position: relative; z-index: 1; flex: 1;
+  display: flex; align-items: center; justify-content: center;
+}
+.block-start {
+  border-top: 2px solid; border-left: 2px solid; border-right: 2px solid;
+  border-top-left-radius: 3px; border-top-right-radius: 3px;
+  margin-top: 1px; margin-bottom: -1px;
+}
+.block-mid {
+  border-left: 2px solid; border-right: 2px solid;
+  margin-top: -1px; margin-bottom: -1px; min-height: 4px;
+}
+.block-end {
+  border-bottom: 2px solid; border-left: 2px solid; border-right: 2px solid;
+  border-bottom-left-radius: 3px; border-bottom-right-radius: 3px;
+  margin-top: -1px; margin-bottom: 1px;
+}
+.block-single {
+  border: 2px solid; border-radius: 3px; margin: 1px 3px;
+}
+
+.block.cue { color: var(--cue-color); border-color: var(--cue-color); background: var(--cue-bg); }
+
+.cell.cue-row {
+  background: rgba(255, 119, 34, 0.12);
+  border-top: 1px solid var(--cue-color);
+  border-bottom: 1px solid var(--cue-color);
+}
+
+.cell.sig-row {
+  background: rgba(255, 204, 0, 0.07);
+  border-top: 1px solid rgba(255, 204, 0, 0.3);
+  border-bottom: 1px solid rgba(255, 204, 0, 0.3);
+}
+.block.light { color: var(--light-color); border-color: var(--light-color); background: var(--light-bg); }
+.block.video { color: var(--video-color); border-color: var(--video-color); background: var(--video-bg); }
+.block.audio { color: var(--audio-color); border-color: var(--audio-color); background: var(--audio-bg); }
+.block.delay { color: var(--delay-color); border-color: var(--delay-color); background: var(--delay-bg); }
+
+.hook {
+  font-size: 8px; font-weight: 600; text-transform: uppercase;
+  letter-spacing: 0.06em; opacity: 0.8;
+}
+
+.sig {
+  background: #fc0;
+  color: #000;
+  border-radius: 2px;
+  padding: 0 6px;
+  font-weight: 700;
+}
+
+.hk {
+  padding: 0 5px;
+}
+
+.title {
+  text-align: center; font-size: 11px; font-weight: 500;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+
+.cue-label {
+  font-size: 10px; font-weight: 600; color: var(--cue-color);
+  padding: 0 4px;
+}
+
+.infinity-cell { position: relative; overflow: hidden; }
+.infinity-cell .block { border-bottom: none !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; }
+.infinity-marker {
+  position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%);
+  font-size: 9px; color: var(--infinity-color);
+  letter-spacing: 0.1em; z-index: 1; white-space: nowrap;
+}
+</style>
+</head>
+<body>
+<div class="app">
+<header>
+  <h1>QRUN</h1>
+  <div class="header-status" id="header-status"></div>
+</header>
+<div class="timeline-container">
+<div class="timeline" id="timeline"></div>
+</div>
+</div>
+<script>
+fetch('/api/timeline').then(r => r.json()).then(render).catch(err => {
+  const status = document.getElementById('header-status');
+  status.textContent = `Error loading timeline: ${err}`;
+});
+
+function render(data) {
+  document.getElementById('header-status').innerHTML =
+    `<span><span class="status-dot"></span>QLab Connected</span>`;
+
+  const timeline = document.getElementById('timeline');
+  timeline.style.gridTemplateColumns = `repeat(${data.tracks.length}, 140px)`;
+  data.tracks.forEach(track => {
+    const el = document.createElement('div');
+    el.className = 'track-header';
+    el.textContent = track.name || '';
+    timeline.appendChild(el);
+  });
+
+  data.rows.forEach((row, rowIndex) => {
+    const hasCue = row.cells.some(c => c.block_id && c.event && (data.blocks[c.block_id] || {}).type === 'cue');
+    const hasSignal = !hasCue && row.cells.some(c => c.event && c.is_signal);
+    const rowCls = hasCue ? ' cue-row' : (hasSignal ? ' sig-row' : '');
+
+    row.cells.forEach(c => {
+      const div = document.createElement('div');
+      div.className = 'cell' + rowCls;
+      if (c.is_title) {
+        const block = data.blocks[c.block_id] || {};
+        div.innerHTML = `<div class="block block-mid ${block.type || ''}"><div class="title">${block.name || ''}</div></div>`;
+      } else if (c.block_id) {
+        const block = data.blocks[c.block_id] || {};
+        const isInfinity = rowIndex === data.rows.length - 1 && !c.is_end && !c.is_title;
+        let seg = 'mid';
+        if (c.is_start && c.is_end) seg = 'single';
+        else if (c.is_start) seg = 'start';
+        else if (c.is_end) seg = 'end';
+
+        div.className += isInfinity ? ' infinity-cell' : '';
+        let inner = `<div class="block block-${seg} ${block.type || ''}">`;
+        if (block.type === 'cue') {
+          inner += `<div class="cue-label">${block.name || ''}</div>`;
+        } else if (c.event) {
+          let hCls = 'hook';
+          if (c.is_signal) hCls += ' sig';
+          inner += `<div class="${hCls}">${c.event.replace('_', ' ')}</div>`;
+        }
+        inner += `</div>`;
+        if (isInfinity) inner += `<div class="infinity-marker">&#x223F;&#x223F;&#x223F;</div>`;
+        div.innerHTML = inner;
+      }
+      timeline.appendChild(div);
+    });
+  });
+}
+</script>
+</body>
+</html>
--- a/cmd/qrunproxy/static/show.json
+++ b/cmd/qrunproxy/static/show.json
@@ -0,0 +1,159 @@
+{
+  "tracks": [
+    {"id": "track_01kht419m1e65bfgqzj28se459", "name": "Lighting A"},
+    {"id": "track_01kht419n7esr929mxvsacsy0k", "name": "Lighting B"},
+    {"id": "track_01kht419pbfx2992sjpagc0syy", "name": "Video"},
+    {"id": "track_01kht419qdeb1bjm9qe5acas2f", "name": "Video OVL"},
+    {"id": "track_01kht419rffhnayzmgqnnkddtz", "name": "Audio"}
+  ],
+  "blocks": [
+    {"id": "block_01kht41ax6f0ntbmqc5jxfda2m", "type": "cue", "name": "Q10 Preshow"},
+    {"id": "block_01kht41aygemwtrw590cet1en9", "type": "light", "track": "track_01kht419m1e65bfgqzj28se459", "name": "Preshow Wash"},
+    {"id": "block_01kht41azrenbaxyc2vebv7s4q", "type": "light", "track": "track_01kht419n7esr929mxvsacsy0k", "name": "Warm 70%"},
+    {"id": "block_01kht41b10emgt1gfvg7dy60ws", "type": "video", "track": "track_01kht419pbfx2992sjpagc0syy", "name": "Preshow Loop", "loop": true},
+    {"id": "block_01kht41b29eyes3b6neh4h56mn", "type": "audio", "track": "track_01kht419rffhnayzmgqnnkddtz", "name": "Preshow Music", "loop": true},
+    {"id": "block_01kht41b3ge6ntqwjqrjq4wsxm", "type": "cue", "name": "Q11 House Open"},
+    {"id": "block_01kht41b4rfnhvk83p9afhp08y", "type": "cue", "name": "Q12 Top of Show"},
+    {"id": "block_01kht41b5zf4ya2044tczm8tz6", "type": "light", "track": "track_01kht419n7esr929mxvsacsy0k", "name": "Cool 50%"},
+    {"id": "block_01kht41b76ebtraravpknavdm5", "type": "delay", "track": "track_01kht419pbfx2992sjpagc0syy", "name": "3s Delay"},
+    {"id": "block_01kht41b8deg8ae996tzqay0rg", "type": "light", "track": "track_01kht419m1e65bfgqzj28se459", "name": "SC1 Focus"},
+    {"id": "block_01kht41b9neqf84ap7dm3mey9r", "type": "light", "track": "track_01kht419n7esr929mxvsacsy0k", "name": "SC1 Blue 80%"},
+    {"id": "block_01kht41bawfbhr38a49tjvyahy", "type": "video", "track": "track_01kht419pbfx2992sjpagc0syy", "name": "Sc1 Projection"},
+    {"id": "block_01kht41bc3evybtn5hqnk6p2f7", "type": "video", "track": "track_01kht419qdeb1bjm9qe5acas2f", "name": "Lightning Flash"},
+    {"id": "block_01kht41bdafggbbm8959svkm4n", "type": "audio", "track": "track_01kht419rffhnayzmgqnnkddtz", "name": "Storm Ambience", "loop": true},
+    {"id": "block_01kht41bejev2997rfps2kpbat", "type": "cue", "name": "Q13 Sc1 Dialog"},
+    {"id": "block_01kht41bfsfhkvtvze4rh7k7z6", "type": "video", "track": "track_01kht419qdeb1bjm9qe5acas2f", "name": "Wave Overlay"},
+    {"id": "block_01kht41bgzfjcrkwrvrrjkqs0f", "type": "light", "track": "track_01kht419m1e65bfgqzj28se459", "name": "Dialog Spots"},
+    {"id": "block_01kht41bj7ea89xn71nn5h400a", "type": "light", "track": "track_01kht419n7esr929mxvsacsy0k", "name": "Warm 90%"},
+    {"id": "block_01kht41bkee1n81gnfq6bydmm2", "type": "audio", "track": "track_01kht419rffhnayzmgqnnkddtz", "name": "Dialog Underscore"},
+    {"id": "block_01kht41bmnfdbvfr4d08brj19k", "type": "cue", "name": "Q14 Sc2 Trans"},
+    {"id": "block_01kht41bnxfme95cspptf87j9b", "type": "light", "track": "track_01kht419m1e65bfgqzj28se459", "name": "SC2 Focus"},
+    {"id": "block_01kht41bq2ekwswsf51b0h1bd2", "type": "light", "track": "track_01kht419n7esr929mxvsacsy0k", "name": "SC2 Amber 60%"},
+    {"id": "block_01kht41br4eajaj99tmey3eph0", "type": "video", "track": "track_01kht419pbfx2992sjpagc0syy", "name": "Sc2 Background", "loop": true},
+    {"id": "block_01kht41bs5fxrr0a7mznd026v4", "type": "audio", "track": "track_01kht419rffhnayzmgqnnkddtz", "name": "SC2 Atmos", "loop": true}
+  ],
+  "triggers": [
+    {
+      "source": {"block": "block_01kht41ax6f0ntbmqc5jxfda2m", "signal": "GO"},
+      "targets": [
+        {"block": "block_01kht41aygemwtrw590cet1en9", "hook": "START"},
+        {"block": "block_01kht41azrenbaxyc2vebv7s4q", "hook": "START"},
+        {"block": "block_01kht41b10emgt1gfvg7dy60ws", "hook": "START"},
+        {"block": "block_01kht41b29eyes3b6neh4h56mn", "hook": "START"}
+      ]
+    },
+    {
+      "source": {"block": "block_01kht41b3ge6ntqwjqrjq4wsxm", "signal": "GO"},
+      "targets": [
+        {"block": "block_01kht41azrenbaxyc2vebv7s4q", "hook": "FADE_OUT"}
+      ]
+    },
+    {
+      "source": {"block": "block_01kht41azrenbaxyc2vebv7s4q", "signal": "END"},
+      "targets": [
+        {"block": "block_01kht41b5zf4ya2044tczm8tz6", "hook": "START"}
+      ]
+    },
+    {
+      "source": {"block": "block_01kht41b4rfnhvk83p9afhp08y", "signal": "GO"},
+      "targets": [
+        {"block": "block_01kht41aygemwtrw590cet1en9", "hook": "FADE_OUT"},
+        {"block": "block_01kht41b10emgt1gfvg7dy60ws", "hook": "FADE_OUT"},
+        {"block": "block_01kht41b29eyes3b6neh4h56mn", "hook": "FADE_OUT"}
+      ]
+    },
+    {
+      "source": {"block": "block_01kht41b10emgt1gfvg7dy60ws", "signal": "END"},
+      "targets": [
+        {"block": "block_01kht41b76ebtraravpknavdm5", "hook": "START"}
+      ]
+    },
+    {
+      "source": {"block": "block_01kht41b76ebtraravpknavdm5", "signal": "END"},
+      "targets": [
+        {"block": "block_01kht41bawfbhr38a49tjvyahy", "hook": "START"}
+      ]
+    },
+    {
+      "source": {"block": "block_01kht41bawfbhr38a49tjvyahy", "signal": "START"},
+      "targets": [
+        {"block": "block_01kht41b8deg8ae996tzqay0rg", "hook": "START"},
+        {"block": "block_01kht41b5zf4ya2044tczm8tz6", "hook": "END"},
+        {"block": "block_01kht41bdafggbbm8959svkm4n", "hook": "START"}
+      ]
+    },
+    {
+      "source": {"block": "block_01kht41b5zf4ya2044tczm8tz6", "signal": "END"},
+      "targets": [
+        {"block": "block_01kht41b9neqf84ap7dm3mey9r", "hook": "START"}
+      ]
+    },
+    {
+      "source": {"block": "block_01kht41b9neqf84ap7dm3mey9r", "signal": "START"},
+      "targets": [
+        {"block": "block_01kht41bc3evybtn5hqnk6p2f7", "hook": "START"}
+      ]
+    },
+    {
+      "source": {"block": "block_01kht41bawfbhr38a49tjvyahy", "signal": "FADE_OUT"},
+      "targets": [
+        {"block": "block_01kht41bc3evybtn5hqnk6p2f7", "hook": "END"}
+      ]
+    },
+    {
+      "source": {"block": "block_01kht41bejev2997rfps2kpbat", "signal": "GO"},
+      "targets": [
+        {"block": "block_01kht41b8deg8ae996tzqay0rg", "hook": "FADE_OUT"},
+        {"block": "block_01kht41b9neqf84ap7dm3mey9r", "hook": "FADE_OUT"},
+        {"block": "block_01kht41bdafggbbm8959svkm4n", "hook": "FADE_OUT"},
+        {"block": "block_01kht41bfsfhkvtvze4rh7k7z6", "hook": "START"}
+      ]
+    },
+    {
+      "source": {"block": "block_01kht41b9neqf84ap7dm3mey9r", "signal": "END"},
+      "targets": [
+        {"block": "block_01kht41bj7ea89xn71nn5h400a", "hook": "START"}
+      ]
+    },
+    {
+      "source": {"block": "block_01kht41bdafggbbm8959svkm4n", "signal": "END"},
+      "targets": [
+        {"block": "block_01kht41bkee1n81gnfq6bydmm2", "hook": "START"}
+      ]
+    },
+    {
+      "source": {"block": "block_01kht41bkee1n81gnfq6bydmm2", "signal": "START"},
+      "targets": [
+        {"block": "block_01kht41bgzfjcrkwrvrrjkqs0f", "hook": "START"}
+      ]
+    },
+    {
+      "source": {"block": "block_01kht41bmnfdbvfr4d08brj19k", "signal": "GO"},
+      "targets": [
+        {"block": "block_01kht41bgzfjcrkwrvrrjkqs0f", "hook": "FADE_OUT"},
+        {"block": "block_01kht41bj7ea89xn71nn5h400a", "hook": "FADE_OUT"},
+        {"block": "block_01kht41br4eajaj99tmey3eph0", "hook": "START"},
+        {"block": "block_01kht41bfsfhkvtvze4rh7k7z6", "hook": "FADE_OUT"},
+        {"block": "block_01kht41bkee1n81gnfq6bydmm2", "hook": "END"}
+      ]
+    },
+    {
+      "source": {"block": "block_01kht41bgzfjcrkwrvrrjkqs0f", "signal": "END"},
+      "targets": [
+        {"block": "block_01kht41bnxfme95cspptf87j9b", "hook": "START"}
+      ]
+    },
+    {
+      "source": {"block": "block_01kht41bj7ea89xn71nn5h400a", "signal": "END"},
+      "targets": [
+        {"block": "block_01kht41bq2ekwswsf51b0h1bd2", "hook": "START"}
+      ]
+    },
+    {
+      "source": {"block": "block_01kht41bfsfhkvtvze4rh7k7z6", "signal": "END"},
+      "targets": [
+        {"block": "block_01kht41bs5fxrr0a7mznd026v4", "hook": "START"}
+      ]
+    }
+  ]
+}