| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <pstm-uri>/</pstm-uri>
- <pstm-template>main</pstm-template>
- <script>
- // Live dashboard: the pulse subscription (see the entrypoint)
- // re-runs the sealed refresh action whenever task or saddle state
- // changes, so progress, blocks and review requests stream in.
- // The notification bell drives the Web Push subscribe flow (plan
- // 11 task E): permission -> service worker -> pushManager.subscribe
- // with the page's VAPID key -> the sealed push_subscribe action.
- if (window.statum) {
- (function () {
- 'use strict';
- statum.addStateListener('pulse', function () {
- var dashboard = statum.read('dashboard');
- if (dashboard && dashboard.refresh) {
- statum.act(dashboard.refresh).catch(function () { });
- }
- });
- function toBase64Url(buffer) {
- var bytes = new Uint8Array(buffer);
- var binary = '';
- for (var index = 0; index < bytes.length; index++) {
- binary += String.fromCharCode(bytes[index]);
- }
- return btoa(binary).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
- }
- function vapidKeyBytes(base64Url) {
- var padding = '='.repeat((4 - base64Url.length % 4) % 4);
- var base64 = (base64Url + padding).replace(/-/g, '+').replace(/_/g, '/');
- var raw = atob(base64);
- var bytes = new Uint8Array(raw.length);
- for (var index = 0; index < raw.length; index++) {
- bytes[index] = raw.charCodeAt(index);
- }
- return bytes;
- }
- function dashboard() {
- return statum.read('dashboard') || {};
- }
- function fail(error) {
- if (window.showToast) {
- showToast('Notifications: ' + (error && error.message ? error.message : error), 'error');
- }
- }
- function enablePush() {
- var state = dashboard();
- if (!state.push_vapid_key) {
- fail('not available on this server');
- return;
- }
- if (!('serviceWorker' in navigator) || !('PushManager' in window)) {
- fail('this browser has no Web Push support');
- return;
- }
- Notification.requestPermission().then(function (permission) {
- if (permission !== 'granted') {
- fail('permission denied in the browser');
- return;
- }
- // The service worker lives at the origin root (GET
- // /sw.js, Service-Worker-Allowed: /), so its scope
- // covers every page.
- return navigator.serviceWorker.register('/sw.js', { scope: '/' })
- .then(function () { return navigator.serviceWorker.ready; })
- .then(function (registration) {
- return registration.pushManager.getSubscription().then(function (existing) {
- if (existing) return existing;
- return registration.pushManager.subscribe({
- userVisibleOnly: true,
- applicationServerKey: vapidKeyBytes(state.push_vapid_key)
- });
- });
- })
- .then(function (subscription) {
- var keys = subscription.toJSON().keys || {};
- return statum.act(state.push_subscribe, {
- endpoint: subscription.endpoint,
- p256dh: keys.p256dh,
- auth: keys.auth
- });
- })
- .catch(function (error) { fail(error); });
- });
- }
- function disablePush() {
- var state = dashboard();
- navigator.serviceWorker.getRegistration('/').then(function (registration) {
- if (!registration) return null;
- return registration.pushManager.getSubscription();
- }).then(function (subscription) {
- var done = subscription ? subscription.unsubscribe() : Promise.resolve(true);
- return done.then(function () {
- if (subscription && state.push_unsubscribe) {
- return statum.act(state.push_unsubscribe, {
- endpoint: subscription.endpoint
- });
- }
- });
- }).catch(function (error) { fail(error); });
- }
- // ---- per-browser bell state (the user-global flag lied) ----
- // The dashboard exposes the user's endpoint FINGERPRINTS;
- // this browser's own pushManager subscription is hashed
- // the same way and looked up in the list. Each browser
- // then shows its own truth: subscribed here ("Turn off")
- // vs subscribed elsewhere only ("Enable" + a count). The
- // client-side check is authoritative - the server flag is
- // just a convenience for other consumers.
- var browserSubscribed = null; // null = still asking the browser
- var hereNow = false; // the displayed verdict (click acts on it)
- function sha256Hex16(text) {
- // Mirrors PushService.endpoint_fingerprint: first 8
- // bytes of the SHA-256, hex - crypto.subtle needs a
- // secure context, exactly like pushManager itself.
- var data = new TextEncoder().encode(text);
- return crypto.subtle.digest('SHA-256', data).then(function (digest) {
- var bytes = new Uint8Array(digest).slice(0, 8);
- var hex = '';
- for (var index = 0; index < bytes.length; index++) {
- hex += ('0' + bytes[index].toString(16)).slice(-2);
- }
- return hex;
- });
- }
- function myFingerprint() {
- if (!('serviceWorker' in navigator) || !('PushManager' in window)) {
- return Promise.resolve(null);
- }
- return navigator.serviceWorker.getRegistration('/').then(function (registration) {
- if (!registration) return null;
- return registration.pushManager.getSubscription().then(function (sub) {
- return sub ? sha256Hex16(sub.endpoint) : null;
- });
- }).catch(function () { return null; });
- }
- function otherBrowserCount() {
- // The dashboard's fingerprints minus this browser's own.
- var mine = browserSubscribed;
- var list = dashboard().push_endpoints || [];
- if (mine === null || mine === undefined) return list.length;
- var others = 0;
- for (var index = 0; index < list.length; index++) {
- if (list[index] !== mine) others++;
- }
- return others;
- }
- function refreshBell() {
- return myFingerprint().then(function (mine) {
- browserSubscribed = mine;
- var list = dashboard().push_endpoints || [];
- var card = document.querySelector('.push-bell-card');
- if (!card) return;
- var here = mine !== null && list.indexOf(mine) !== -1;
- var others = otherBrowserCount();
- var onBtn = card.querySelector('[data-bell-on]');
- var offBtn = card.querySelector('[data-bell-off]');
- var help = card.querySelector('[data-bell-help]');
- var testBtn = card.querySelector('[data-push-test]');
- hereNow = here;
- if (onBtn) onBtn.hidden = here;
- if (offBtn) offBtn.hidden = !here;
- if (testBtn) testBtn.hidden = !here;
- if (help) {
- if (here) {
- help.textContent = others > 0
- ? '\u2014 this browser receives question, RFC, review and waiting-on-drafts alerts; '
- + others + ' other browser(s) are also subscribed; "Notify me" per task adds its start, failure and completion'
- : '\u2014 this browser receives question, RFC, review and waiting-on-drafts alerts; "Notify me" per task adds its start, failure and completion';
- } else if (list.length > 0) {
- help.textContent = '\u2014 you are subscribed on ' + list.length
- + ' other browser(s); enable here too to be notified in this browser';
- } else {
- help.textContent = '\u2014 be told when an agent asks a question, raises an RFC or review';
- }
- }
- });
- }
- function sendTest() {
- var state = dashboard();
- if (!state.push_test) {
- fail('not available on this server');
- return;
- }
- statum.act(state.push_test, {}).catch(function (error) { fail(error); });
- }
- // The dashboard state refreshes on every pulse; the bell's
- // per-browser verdict must be re-derived each time (the
- // browser's own subscription may have changed under us).
- statum.addStateListener('dashboard', refreshBell);
- refreshBell();
- document.addEventListener('click', function (event) {
- if (!event.target.closest) return;
- var card = event.target.closest('.push-bell-card');
- if (!card) return;
- var bell = event.target.closest('[data-push-bell]');
- var test = event.target.closest('[data-push-test]');
- if (bell) {
- event.preventDefault();
- // Follow the DISPLAYED verdict: a browser holding a
- // subscription the server no longer knows (a pruned
- // row) shows Enable - and enabling re-registers the
- // existing subscription, healing it.
- if (hereNow) disablePush();
- else enablePush();
- } else if (test) {
- event.preventDefault();
- sendTest();
- }
- });
- })();
- }
- </script>
- </head>
- <body>
- <section>
- <h2>Dashboard</h2>
- <p stm-if="dashboard == null">Loading…</p>
- <div stm-if="dashboard != null">
- <!-- The notification bell (plan 11 task E): subscribe this
- browser (permission + service worker + VAPID key) or
- turn it off. Block events notify every subscribed user;
- per-task "Notify me" adds start/failure/completion. -->
- <!-- The notification bell (plan 11 task E; per-browser
- since the user-global flag lied to second browsers):
- THIS browser's own subscription decides Enable vs Turn
- off (the JS fingerprints the browser's endpoint and
- matches it against the dashboard's list), the helper
- text counts the user's OTHER subscribed browsers, and
- "Send test notification" fires the real end-to-end
- probe through this user's subscriptions. -->
- <section class="card push-bell-card">
- <form class="inline">
- <button type="button" data-push-bell data-bell-on class="primary"
- hidden>Enable notifications</button>
- <button type="button" data-push-bell data-bell-off
- hidden>Turn off notifications</button>
- <button type="button" data-push-test
- hidden>Send test notification</button>
- <span class="muted" data-bell-help>— be told when an agent asks a
- question, raises an RFC or review</span>
- </form>
- </section>
- <div class="cards">
- <section class="card">
- <h3>Queue</h3>
- <p><strong stm-text="dashboard.ready_count">0</strong> ready to dispatch</p>
- <p class="muted"><span stm-text="dashboard.queued_count">0</span> queued ·
- <span stm-text="dashboard.active_count">0</span> active ·
- <span stm-text="dashboard.blocked_count">0</span> blocked</p>
- <p class="muted"><span stm-text="dashboard.done_count">0</span> done ·
- <span stm-text="dashboard.failed_count">0</span> failed</p>
- </section>
- <section class="card">
- <h3>Saddles</h3>
- <p><strong stm-text="dashboard.idle_saddle_count">0</strong> idle</p>
- <p><a href="/saddles">Manage saddles</a> · <a href="/tasks">Task queue</a></p>
- </section>
- </div>
- <!-- The scratchpad (goal 8 task 3): jot down batches of
- changes before they are ready to be full-on goals.
- Check a note off, delete it, or promote it — promote
- creates a DRAFT goal (title = the first line, brief =
- the whole body) and jumps to its page to finish. -->
- <h3>Notes</h3>
- <section class="card">
- <form stm-action="dashboard.add_note">
- <div class="form-row">
- <textarea name="body" rows="2" required
- placeholder="Note down a batch of changes before it is ready to be a goal…"></textarea></div>
- <button type="submit">Add note</button>
- </form>
- </section>
- <!-- The five newest discoveries (goal 24): the fleet's
- knowledge base at a glance; the Discoveries page owns
- the searchable listing. -->
- <div stm-if="dashboard.discoveries.length > 0">
- <h3>Latest discoveries</h3>
- <ul>
- <li stm-for-discovery-in="dashboard.discoveries" class="md footnote"
- stm-markdown="discovery.body">body</li>
- </ul>
- <p class="muted"><a href="/discoveries">All discoveries →</a></p>
- </div>
- <table stm-if="dashboard.notes.length > 0">
- <thead><tr><th>Done</th><th>Note</th><th>Created</th><th></th></tr></thead>
- <tbody>
- <tr stm-for-note-in="dashboard.notes">
- <td><button type="button" stm-action="note.toggle"
- stm-attribute.class="note.done ? 'approve' : ''"
- stm-text="note.done ? 'Done' : 'Open'">toggle</button></td>
- <td><span stm-attribute.class="note.done ? 'footnote' : ''"
- stm-text="note.body">body</span></td>
- <td class="muted" stm-text="note.created_display">when</td>
- <td>
- <span stm-if="note.goal_id > 0">
- <span class="goal-icon">🎯</span>
- <a stm-attribute.href="'/goals/' + note.goal_id"
- stm-text="note.goal_title">goal</a>
- </span>
- <form class="inline" stm-if="note.goal_id == 0 && !note.done"
- stm-action="note.promote">
- <select name="project_id" required>
- <option stm-for-project-in="dashboard.projects"
- stm-attribute.value="project.id"
- stm-text="project.name">project</option>
- </select>
- <input type="text" name="branch_name" required
- placeholder="goal/branch" size="14">
- <button type="submit" class="primary">Create goal</button>
- </form>
- <span class="muted" stm-if="note.goal_id == 0 && note.done">—</span>
- <form class="inline" stm-action="note.delete">
- <button type="submit">Delete</button>
- </form>
- </td>
- </tr>
- </tbody>
- </table>
- <p stm-if="dashboard.notes.length == 0" class="muted">No notes yet — jot down the
- next batch of changes above.</p>
- <h3 stm-if="dashboard.pinned.length > 0">Needs a human
- (<span stm-text="dashboard.pinned.length">0</span> open)</h3>
- <p class="muted" stm-if="dashboard.pinned.length > 0">Open questions, RFCs and
- reviews across all tasks and goals, newest first — follow the link to
- answer on the task or goal page.</p>
- <div class="cards" stm-if="dashboard.pinned.length > 0">
- <section stm-for-blockview-in="dashboard.pinned"
- stm-attribute.class="blockview.item_type == 'goal' ? 'card goal-card' : 'card'">
- <p>
- <span stm-if="blockview.item_type == 'goal'" class="goal-icon">🎯</span>
- <span stm-attribute.class="'badge badge-kind-' + blockview.item_type"
- stm-text="blockview.item_type">task</span>
- <span stm-attribute.class="'badge badge-' + blockview.block_type" stm-text="blockview.block_type">type</span>
- <span class="muted" stm-text="blockview.created_display">when</span></p>
- <p><strong stm-text="blockview.question">question</strong></p>
- <p stm-if="blockview.item_type == 'task'">
- <a stm-attribute.href="'/tasks/' + blockview.task_id" stm-text="blockview.task_title">task</a></p>
- <p stm-if="blockview.item_type == 'goal'">
- <a stm-attribute.href="'/goals/' + blockview.goal_id" stm-text="blockview.goal_title">goal</a></p>
- </section>
- </div>
- <p stm-if="dashboard.pinned.length == 0" class="muted">Nothing needs a human —
- no open questions, RFCs or reviews.</p>
- <h3 stm-if="dashboard.active_tasks.length > 0">Active tasks</h3>
- <table stm-if="dashboard.active_tasks.length > 0">
- <thead><tr><th>Task</th><th>Status</th><th>Branch</th><th>Latest progress</th></tr></thead>
- <tbody>
- <tr stm-for-active-in="dashboard.active_tasks">
- <td><a stm-attribute.href="'/tasks/' + active.id" stm-text="active.title">task</a></td>
- <td><span stm-attribute.class="'badge badge-' + active.status" stm-text="active.status">status</span></td>
- <td stm-text="active.task_branch">branch</td>
- <td><strong stm-if="active.latest_progress.length > 0" stm-text="active.latest_progress">progress</strong>
- <span class="muted" stm-if="active.latest_progress.length > 0" stm-text="active.progress_display">when</span>
- <span class="muted" stm-if="active.latest_progress.length == 0">—</span></td>
- </tr>
- </tbody>
- </table>
- <h3>Saddles</h3>
- <div class="cards">
- <section class="card" stm-for-saddle-in="dashboard.saddles">
- <h3 stm-text="saddle.name">name</h3>
- <p><span stm-attribute.class="'badge badge-' + saddle.status" stm-text="saddle.status">status</span>
- <span class="muted" stm-text="saddle.host">host</span></p>
- <p stm-if="saddle.current_goal_id > 0">Supervising goal
- <a stm-attribute.href="'/goals/' + saddle.current_goal_id"
- stm-text="saddle.current_goal_title">goal</a>
- <span class="badge badge-kind-goal">goal</span></p>
- <p stm-if="saddle.current_task_id > 0 && saddle.current_goal_id == 0">Working on
- <a stm-attribute.href="'/tasks/' + saddle.current_task_id" stm-text="saddle.current_task_title">task</a></p>
- <p stm-if="saddle.current_task_id == 0" class="muted">No current task</p>
- </section>
- <section class="card" stm-if="dashboard.saddles.length == 0">
- <p class="muted">No saddles registered.</p>
- </section>
- </div>
- <h3>Activity</h3>
- <p class="muted">The last <span stm-text="dashboard.activity.length">0</span> events
- across all tasks, newest first.</p>
- <table>
- <thead><tr><th>When</th><th>Task</th><th>Event</th></tr></thead>
- <tbody>
- <tr stm-for-item-in="dashboard.activity">
- <td stm-text="item.when_display">when</td>
- <td stm-if="item.goal_id > 0">
- <span class="badge badge-kind-goal">goal</span>
- <a stm-attribute.href="'/goals/' + item.goal_id" stm-text="item.goal_title">goal</a>
- <a stm-if="item.task_id > 0" class="muted"
- stm-attribute.href="'/tasks/' + item.task_id"
- >→ <span stm-text="'task #' + item.task_id">task</span></a></td>
- <td stm-if="item.goal_id == 0"><a stm-attribute.href="'/tasks/' + item.task_id" stm-text="item.task_title">task</a>
- <td><span stm-attribute.class="'badge badge-' + item.kind" stm-text="item.kind">kind</span>
- <!-- Comment rows read as footnotes (plan 13
- B4): the body leads, muted and smaller. -->
- <span stm-attribute.class="item.kind == 'comment' || item.kind == 'goal-comment' || item.kind == 'goal-system' ? 'footnote' : ''"
- stm-text="item.text">activity</span></td>
- </tr>
- <tr stm-if="dashboard.activity.length == 0"><td colspan="3" class="muted">Nothing yet.</td></tr>
- </tbody>
- </table>
- </div>
- </section>
- </body>
- </html>
|