<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- viewport-fit=cover is what lets the safe-area insets in app.css actually
reach the notch and the home indicator; without it iOS letterboxes the
page and the bottom dock sits in dead space. -->
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<meta name="color-scheme" content="light dark">
<meta name="theme-color" content="#f7f5f1" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#191817" media="(prefers-color-scheme: dark)">
<meta name="description" content="magi observation deck — watch blind multi-agent implementation competitions and file new tasks.">
<title>magi — observation deck</title>
<!-- The favicon is the logo, inlined as a data URI. Nothing outside the magi
server is reachable, and nothing outside this binary is fetched. -->
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cg fill='none' stroke-width='18' stroke-linecap='round'%3E%3Cpath d='M 50 80 C 50 124, 78 136, 128 166' stroke='%23c5582d'/%3E%3Cpath d='M 128 80 L 128 166' stroke='%230a7e8c'/%3E%3Cpath d='M 206 80 C 206 124, 178 136, 128 166' stroke='%237d4b9e'/%3E%3Cpath d='M 128 172 L 128 216' stroke='%23c9a227'/%3E%3C/g%3E%3Crect x='111' y='149' width='34' height='34' transform='rotate(45 128 166)' fill='%23c9a227'/%3E%3Ccircle cx='50' cy='54' r='21' fill='%23c5582d'/%3E%3Ccircle cx='128' cy='54' r='21' fill='%230a7e8c'/%3E%3Ccircle cx='206' cy='54' r='21' fill='%237d4b9e'/%3E%3C/svg%3E">
<link rel="stylesheet" href="/app.css">
<script>
/* Applied before the first paint so a dark-mode phone never flashes the
light palette. Inline and tiny for exactly that reason: a deferred module
would run a frame too late. */
try {
var t = localStorage.getItem("magi-theme");
if (t === "light" || t === "dark") document.documentElement.dataset.theme = t;
} catch (e) { /* private browsing denies localStorage; the auto theme is fine */ }
</script>
</head>
<body>
<a class="skip" href="#main">Skip to content</a>
<header class="top">
<a class="brand" href="#/runs" aria-label="magi observation deck, go to runs">
<svg class="brand-mark" viewBox="0 0 256 256" aria-hidden="true" focusable="false">
<g fill="none" stroke-width="18" stroke-linecap="round">
<path d="M 50 80 C 50 124, 78 136, 128 166" stroke="var(--mark-a)"/>
<path d="M 128 80 L 128 166" stroke="var(--mark-b)"/>
<path d="M 206 80 C 206 124, 178 136, 128 166" stroke="var(--mark-c)"/>
<path d="M 128 172 L 128 216" stroke="var(--mark-gold)"/>
</g>
<rect x="111" y="149" width="34" height="34" transform="rotate(45 128 166)" fill="var(--mark-gold)"/>
<circle cx="50" cy="54" r="21" fill="var(--mark-a)"/>
<circle cx="128" cy="54" r="21" fill="var(--mark-b)"/>
<circle cx="206" cy="54" r="21" fill="var(--mark-c)"/>
</svg>
<span class="brand-text">
<span class="brand-name">magi</span>
<span class="brand-sub">observation deck</span>
</span>
</a>
<nav class="rail" aria-label="Sections">
<a class="rail-link" href="#/runs" data-nav="runs">Runs</a>
<a class="rail-link" href="#/queue" data-nav="queue">Queue</a>
<a class="rail-link" href="#/questions" data-nav="questions">Questions<span class="badge" id="ask-badge-rail" hidden></span></a>
<a class="rail-link btn btn-gold" href="#/chat" data-nav="talks">Chat<span class="badge" id="talk-badge-rail" hidden></span></a>
</nav>
<button class="icon-btn" type="button" id="theme-toggle" aria-label="Colour theme: follow system">
<span class="theme-glyph" aria-hidden="true"></span>
</button>
</header>
<!-- The loop strip is the difference between "nothing is queued" and
"nothing is going to happen", so it sits above the content on every view
instead of inside one of them. The loop runs inside this server, so the
strip also carries the control that starts and stops it: a task filed
from a phone that sat in the queue until somebody reached a keyboard was
the last thing in this product that needed a terminal.
The button is deliberately not guarded by a confirmation the way the
merge approval is. Starting is cheap and stopping is not destructive —
the loop finishes the run it is on either way — so a second tap would
only be ceremony. What starting *does* spend is stated next to it
instead, in .daemon-why, which is also the button's description. -->
<div class="daemon" id="daemon" role="status" aria-label="Loop status">
<span class="daemon-dot" aria-hidden="true"></span>
<span class="daemon-body">
<span class="daemon-text">Connecting…</span>
<span class="daemon-why" id="loop-why" hidden></span>
</span>
<!-- One grid cell, always, whatever mix of the version chip and the up to
three buttons below happen to be visible. Letting each of those be its
own grid item let their count change the number of items in the row,
which is what put the button on a row of its own with a stray gap
beside it — see .daemon-controls in app.css. -->
<span class="daemon-controls" id="loop-controls">
<!-- Which build is answering. This strip is already about this process
and it carries Update & restart, so after an upgrade the operator
can tell from the same place whether the new binary is the one
serving them. -->
<span class="daemon-version" id="loop-version" hidden></span>
<button class="btn daemon-btn" type="button" id="loop-toggle" aria-describedby="loop-why" hidden></button>
<!-- The escalation, shown only while a stop is waiting out a run: parking
stops at the run's next step instead, which is what an operator waiting
to replace the binary actually wants. -->
<button class="btn btn-quiet daemon-btn" type="button" id="loop-park" aria-describedby="loop-why" hidden></button>
<!-- Replacing the binary ends this process, so it lives with the other
controls that do, and it arms on the first tap. -->
<button class="btn btn-quiet daemon-btn" type="button" id="loop-upgrade" aria-describedby="loop-why" hidden>Update & restart</button>
</span>
</div>
<!-- An unanswered question is the only state in this product where nothing at
all is happening and only a human can restart it, so it is announced on
every view rather than left for the operator to find. role="status" makes
the appearance itself the announcement; there is no separate live-region
message to double it up. -->
<div class="ask-bar" id="ask-bar" role="status" hidden>
<span class="ask-mark" aria-hidden="true">?</span>
<span class="ask-bar-text">
<b class="ask-bar-count"></b>
<span class="ask-bar-summary"></span>
</span>
<a class="btn btn-gold ask-bar-go" href="#/questions">Answer</a>
</div>
<div class="alert" id="alert" role="alert" hidden>
<span class="alert-text"></span>
<button class="btn btn-quiet" type="button" id="alert-retry">Retry</button>
</div>
<main id="main">
<!-- RUNS -------------------------------------------------------------- -->
<section class="view" id="view-runs" aria-labelledby="runs-h">
<div class="view-head">
<h1 id="runs-h">Competitions</h1>
<p class="view-sub" id="runs-count">Loading…</p>
</div>
<div class="runs-layout">
<!-- Wide screens only; hidden by CSS on a phone, which also removes it
from the tab order, so a narrow viewport never has to skip past it. -->
<nav class="runs-tree" id="runs-tree" aria-label="Filter runs by state and repository" hidden></nav>
<div class="runs-main">
<!-- The state chips, unlike the tree beside them, work on a phone too
(the tree is desktop-only, see .runs-tree in app.css) — this is
the only per-state control a phone gets, which is why it sits
above everything else rather than beside it. -->
<div class="state-chips" id="runs-state-chips" role="radiogroup" aria-label="Filter runs by state" hidden></div>
<div class="runs-filter" id="runs-filter" hidden>
<p id="runs-filter-text"></p>
<button class="btn btn-quiet" type="button" id="runs-filter-clear">Clear filter</button>
</div>
<div id="runs-sections"></div>
<p class="empty" id="runs-state-empty" hidden>
Nothing matches this state filter. Try "All".
</p>
<p class="empty" id="runs-filter-empty" hidden>
No runs match this filter.
</p>
<p class="empty" id="runs-empty" hidden>
No competitions yet. Talk an idea through in Chat, or file one with
<code>magi task add</code>, and the loop will pick it up.
<a class="btn btn-gold" href="#/chat">Open Chat</a>
</p>
<p class="empty" id="runs-unreadable" hidden>
There are runs on disk, but this build cannot read their state — almost
always because they were recorded before a schema change. They are kept,
not deleted; <code>magi fold</code> clears their worktrees when you are
done with them.
</p>
</div>
</div>
</section>
<!-- RUN DETAIL -------------------------------------------------------- -->
<section class="view" id="view-run" aria-labelledby="run-h" hidden>
<a class="back" href="#/runs">Runs</a>
<div class="view-head">
<div class="run-status" id="run-status"></div>
<h1 id="run-h">Loading run…</h1>
<p class="view-sub" id="run-meta"></p>
</div>
<!-- On a phone both wrappers are display:contents, so these panels flow in
one column in source order. On a wide screen they become the analysis
column and the sticky report column. -->
<div class="run-main">
<!-- First in the column: while a question is open nothing below it is
going to change, so the operator should not have to scroll past a
verdict that will not arrive to find the thing blocking it. -->
<div class="panel panel-ask" id="run-ask-panel" hidden>
<h2><span id="run-ask-title">Waiting on you</span> <span class="count" id="run-ask-count"></span></h2>
<ol class="asks" id="run-asks"></ol>
</div>
<div class="panel" id="run-land-panel" hidden>
<h2>Landing</h2>
<div class="land" id="run-land"></div>
</div>
<div class="panel" id="run-active-panel" hidden>
<h2>Running now <span class="count" id="run-active-count"></span></h2>
<p class="panel-note" id="run-active-note" hidden></p>
<ul class="plain" id="run-active"></ul>
</div>
<div class="panel" id="run-advise-panel" hidden>
<h2>Design deliberation <span class="count" id="advise-count"></span></h2>
<p class="panel-note">Advisor seats sketched a design each, read-only, before any implementer began — the record below is what fed the brief they were given.</p>
<div class="converge" id="advise-converge"></div>
<p class="advise-synthesis" id="advise-synthesis" hidden></p>
<ol class="cands" id="run-advisors"></ol>
</div>
<div class="panel" id="run-verdict" hidden>
<h2>Verdict</h2>
<div class="converge" id="converge"></div>
<dl class="facts" id="tally-facts"></dl>
</div>
<div class="panel" id="run-task-panel">
<h2>Task</h2>
<div class="instruction md" id="run-instruction"></div>
</div>
<div class="panel" id="run-cands-panel" hidden>
<h2>Candidates <span class="count" id="cand-count"></span></h2>
<ol class="cands" id="run-cands"></ol>
</div>
<div class="panel" id="run-reviews-panel" hidden>
<h2>Review rounds <span class="count" id="review-count"></span></h2>
<ol class="rounds" id="run-reviews"></ol>
</div>
<div class="panel" id="run-quota-panel" hidden>
<h2>Seats lost to quota</h2>
<p class="panel-note">A collapsed panel is a machine problem, not a verdict.</p>
<ul class="plain" id="run-quota"></ul>
</div>
</div>
<div class="run-side">
<div class="panel" id="run-report-panel">
<div class="panel-bar">
<h2>Report</h2>
<button class="btn btn-quiet" type="button" id="wrap-toggle" aria-pressed="false">Wrap</button>
</div>
<pre class="report" id="run-report" tabindex="0" aria-label="Run report">Loading…</pre>
</div>
<div class="panel" id="run-events-panel" hidden>
<h2>Timeline</h2>
<ol class="timeline" id="run-events"></ol>
</div>
</div>
</section>
<!-- QUEUE ------------------------------------------------------------- -->
<section class="view" id="view-queue" aria-labelledby="queue-h" hidden>
<div class="view-head">
<h1 id="queue-h">Backlog</h1>
<p class="view-sub" id="queue-count">Loading…</p>
</div>
<!-- Resolves an id the same loose way the CLI does (`magi task show
<prefix>`): a leading match on the full id, or a trailing match on
the short form a report actually prints. A match narrows the cards
below instead of opening a second list, so one hit and a pile of
candidates both read the same way. -->
<div class="queue-search" id="queue-search" hidden>
<label class="sr-only" for="queue-search-input">Find a task by id</label>
<input type="search" id="queue-search-input" placeholder="Find by task id… (e.g. c71c)" autocomplete="off" spellcheck="false">
<button class="btn btn-quiet" type="button" id="queue-search-clear" hidden>Clear</button>
</div>
<p class="queue-search-status" id="queue-search-status" role="status" hidden></p>
<ol class="cards" id="queue-search-results" hidden></ol>
<p class="empty" id="queue-search-empty" hidden>No task matches this id.</p>
<div class="panel" id="queue-graph-panel" hidden>
<h2>Blocked on <span class="count" id="queue-graph-count"></span></h2>
<p class="panel-note">
An arrow points from a blocked task to the task it is waiting on.
Tap a node to jump to that task below.
</p>
<div class="dep-graph-wrap" id="queue-graph"></div>
</div>
<div id="queue-sections"></div>
<p class="empty" id="queue-empty" hidden>
The backlog is empty. Talk an idea through in Chat, or file one with
<code>magi task add</code>.
<a class="btn btn-gold" href="#/chat">Open Chat</a>
</p>
</section>
<!-- QUESTIONS --------------------------------------------------------- -->
<section class="view" id="view-questions" aria-labelledby="questions-h" hidden>
<div class="view-head">
<h1 id="questions-h">Questions</h1>
<p class="view-sub" id="questions-count">Loading…</p>
</div>
<ol class="asks" id="questions-list"></ol>
<p class="empty" id="questions-empty" hidden>
No agent is waiting on a decision. When one asks, its run parks here
until you answer — and answered questions stay, as the record of what
you decided and when.
</p>
</section>
<!-- CHAT: the list ------------------------------------------------------ *
A standing conversation for questions, investigation and thinking out
loud. It does not end: any number of tasks can be filed from it with
`magi task add --solo`, and the conversation stays open. -->
<section class="view" id="view-talks" aria-labelledby="talks-h" hidden>
<div class="view-head">
<h1 id="talks-h">Chat</h1>
<p class="view-sub" id="talks-count">Loading…</p>
</div>
<button class="btn btn-gold" type="button" id="talk-start-go">Start a conversation</button>
<ol class="cards" id="talks-list"></ol>
<p class="empty" id="talks-empty" hidden>
No conversations yet. Open one to ask a question, look something up, or
think an idea through with an agent that can read the repository and
run commands, but will not write to it.
</p>
</section>
<!-- CHAT: one conversation ----------------------------------------------- -->
<section class="view" id="view-talk" aria-labelledby="talk-h" hidden>
<a class="back" href="#/chat">Chat</a>
<div class="view-head">
<div class="run-status" id="talk-status"></div>
<h1 id="talk-h">Loading conversation…</h1>
<p class="view-sub" id="talk-meta"></p>
</div>
<ol class="turns" id="talk-turns"></ol>
<!-- A turn can run for `talk::TURN_TIMEOUT` while the agent investigates,
so the wait is stated in words with elapsed time - a silent spinner
and a hung server look identical. -->
<p class="waiting" id="talk-wait" role="status" hidden>
<span class="waiting-dots" aria-hidden="true"><i></i><i></i><i></i></span>
<span class="waiting-text"></span>
<span class="waiting-secs" aria-hidden="true"></span>
</p>
<div id="talk-pending" class="talk-pending" aria-live="polite" hidden></div>
<details class="panel advanced" id="talk-tasks-panel" hidden>
<summary><span class="talk-tasks-label">Filed from here</span> <span class="count" id="talk-tasks-count"></span></summary>
<ol class="plain" id="talk-tasks"></ol>
</details>
<form class="say" id="talk-say">
<div class="say-thumbs" id="talk-say-thumbs" hidden></div>
<p class="say-upload-status" id="talk-say-upload-status" role="status" hidden></p>
<div class="say-row">
<label class="attach-btn" for="talk-file-input" aria-label="Attach image">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M17.5 7.5 9 16a3 3 0 1 1-4.5-4L13 3.5a2 2 0 1 1 3 3L8 14.5a1 1 0 1 1-1.5-1.5L14 6"/>
</svg>
</label>
<input class="sr-only" type="file" id="talk-file-input" accept="image/*" multiple>
<label class="sr-only" for="f-talk-say">Your message</label>
<textarea id="f-talk-say" rows="2" placeholder="Ask, investigate, think out loud…"></textarea>
<button class="btn btn-gold" type="submit" id="talk-send">Send</button>
</div>
</form>
<p class="form-error" id="talk-error" role="alert" hidden></p>
<p class="panel-note" id="talk-closed" hidden>
This conversation is closed.
</p>
<button class="btn btn-quiet" type="button" id="talk-close-go">Close this conversation</button>
<button class="btn btn-quiet" type="button" id="talk-reopen-go" hidden>Reopen this conversation</button>
<div id="talk-delete-box"></div>
</section>
</main>
<!-- RUN ACTIONS: Resume / Fold / Delete used to sit at the bottom of the run
detail's report, so reaching them cost a scroll past the whole write-up.
This fixed button is the one entry point into them now, shown only while
run detail itself is on screen (see applyRoute in app.js). Unlike the
dock, it has no wide-screen replacement, so it is not hidden by width. -->
<button class="run-actions-fab" type="button" id="run-actions-fab" aria-label="Run actions" hidden>
<svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
<circle cx="12" cy="5" r="1.7" fill="currentColor"/>
<circle cx="12" cy="12" r="1.7" fill="currentColor"/>
<circle cx="12" cy="19" r="1.7" fill="currentColor"/>
</svg>
</button>
<!-- Bottom dock: the only navigation on a phone, because the top of a 390x844
screen is not thumb-reachable one-handed. -->
<nav class="dock" aria-label="Sections">
<a class="dock-item" href="#/runs" data-nav="runs">
<span class="dock-glyph" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round">
<circle cx="5" cy="5" r="2.4"/><circle cx="12" cy="5" r="2.4"/><circle cx="19" cy="5" r="2.4"/>
<path d="M5 8.5c0 4 2 4.6 7 6.6M12 8.5v6.6M19 8.5c0 4-2 4.6-7 6.6"/>
<path d="M12 17.6V21"/>
</svg>
</span>
<span>Runs</span>
</a>
<a class="dock-item" href="#/queue" data-nav="queue">
<span class="dock-glyph" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round">
<path d="M4 6h16M4 12h16M4 18h9"/>
</svg>
</span>
<span>Queue</span>
</a>
<a class="dock-item" href="#/questions" data-nav="questions">
<span class="dock-glyph" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
<path d="M20.5 12c0 3.9-3.8 7-8.5 7-1 0-2-.15-2.9-.42L4.2 20.5l1.5-3.7C4.4 15.5 3.5 13.9 3.5 12c0-3.9 3.8-7 8.5-7s8.5 3.1 8.5 7z"/>
<path d="M9.9 9.7a2.2 2.2 0 1 1 3.3 2.1c-.75.44-1.2 1-1.2 1.8"/>
<path d="M12 15.8h.01"/>
</svg>
<span class="badge" id="ask-badge-dock" hidden></span>
</span>
<span>Questions</span>
</a>
<a class="dock-item dock-chat" href="#/chat" data-nav="talks">
<span class="dock-glyph" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
<path d="M4 5.5h16v10h-9l-4 3.5v-3.5H4z"/>
</svg>
<span class="badge" id="talk-badge-dock" hidden></span>
</span>
<span>Chat</span>
</a>
</nav>
<!-- RUN ACTIONS SHEET ---------------------------------------------------- -->
<dialog class="sheet" id="run-actions-sheet" aria-labelledby="run-actions-h">
<div class="sheet-head">
<h2 id="run-actions-h">Run actions</h2>
<button class="icon-btn" type="button" id="run-actions-close" aria-label="Close">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
<path d="M6 6l12 12M18 6L6 18"/>
</svg>
</button>
</div>
<div class="sheet-body">
<div id="run-actions-box"></div>
<div id="run-delete-box"></div>
</div>
</dialog>
<!-- TASK EDIT SHEET -------------------------------------------------------
Full-text replacement of a queued or held task's title and instruction —
the alternative to deleting the task and filing it again, so the id,
when it was filed, who filed it, and its run history all stay. Refused
by the server once a task is running or finished; the error from that
lands in #task-edit-error. -->
<dialog class="sheet" id="task-edit-sheet" aria-labelledby="task-edit-h">
<div class="sheet-head">
<h2 id="task-edit-h">Edit task</h2>
<button class="icon-btn" type="button" id="task-edit-close" aria-label="Close">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
<path d="M6 6l12 12M18 6L6 18"/>
</svg>
</button>
</div>
<div class="sheet-body">
<div class="field">
<label for="task-edit-title">Title</label>
<input id="task-edit-title" type="text" spellcheck="false">
</div>
<div class="field">
<label for="task-edit-instruction">Instruction</label>
<p class="hint">Opens with what is already there. Add to it, or replace it outright — either way this is the whole instruction a run will read.</p>
<textarea id="task-edit-instruction" rows="10"></textarea>
</div>
<p class="form-error" id="task-edit-error" role="alert" hidden></p>
<button class="btn btn-gold" type="button" id="task-edit-save">Save</button>
</div>
</dialog>
<!-- PANEL, FULL SCREEN -------------------------------------------------- *
An agent-authored panel is rendered inside <iframe sandbox> with NO
tokens, so no script in it runs and it can reach neither this document
nor its storage; the server additionally sends a CSP that denies every
network request from inside the frame. A frame with no tokens is also
opaque to this page, so its height cannot be measured — which is why the
inline panel is bounded and this dialog exists. On a phone this is where
a diff becomes readable. The iframe is created on open and removed on
close, so a closed dialog holds no live document. -->
<dialog class="full" id="panel-full" aria-labelledby="panel-full-h">
<div class="full-head">
<h2 id="panel-full-h">Panel</h2>
<button class="icon-btn" type="button" id="panel-full-close" aria-label="Close the panel">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
<path d="M6 6l12 12M18 6L6 18"/>
</svg>
</button>
</div>
<div class="full-body" id="panel-full-body"></div>
</dialog>
<!-- ATTACHMENT, FULL SIZE ------------------------------------------------ *
What a tap on any turn's thumbnail opens. A plain same-origin `<img>`,
not an iframe: an attachment is bytes this server stored and serves
back with a closed content-type whitelist plus `nosniff` (see
`web::attachment_response`), so it carries none of a panel's risk and
needs none of its sandboxing. -->
<dialog class="full" id="attachment-view" aria-labelledby="attachment-view-h">
<div class="full-head">
<h2 id="attachment-view-h">Attachment</h2>
<button class="icon-btn" type="button" id="attachment-view-close" aria-label="Close">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
<path d="M6 6l12 12M18 6L6 18"/>
</svg>
</button>
</div>
<div class="full-body">
<img id="attachment-view-img" alt="">
</div>
</dialog>
<p class="sr-only" id="live" aria-live="polite"></p>
<script type="module" src="/app.js"></script>
</body>
</html>