<!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="#/plan" data-nav="chats">Plan</a>
<a class="rail-link" href="#/questions" data-nav="questions">Questions<span class="badge" id="ask-badge-rail" hidden></span></a>
<button class="btn btn-gold rail-new" type="button" data-compose>New task</button>
</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>
<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>
</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>
<ol class="cards" id="runs-list"></ol>
<p class="empty" id="runs-empty" hidden>
No competitions yet. File a task and the loop will pick it up.
<button class="btn btn-gold" type="button" data-compose>File the first task</button>
</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>
</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-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>
<ol class="cards" id="queue-list"></ol>
<p class="empty" id="queue-empty" hidden>
The backlog is empty. Nothing is waiting to be claimed.
<button class="btn btn-gold" type="button" data-compose>File a task</button>
</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>
<!-- PLANNING: the list ------------------------------------------------ *
`magi plan` hands the terminal to an agent CLI, which a phone does not
have. The same interview runs here one turn at a time, and ends in the
same place: a validated task file in the queue. -->
<section class="view" id="view-chats" aria-labelledby="chats-h" hidden>
<div class="view-head">
<h1 id="chats-h">Planning</h1>
<p class="view-sub" id="chats-count">Loading…</p>
</div>
<div class="panel" id="chat-start">
<h2>Start from an idea</h2>
<div class="field">
<label for="f-idea">What do you want done?</label>
<p class="hint" id="f-idea-hint">Rough is fine. An agent interviews you here, then writes the task file for you to check and file.</p>
<textarea id="f-idea" rows="4" aria-describedby="f-idea-hint"
placeholder="rework the config loader — discovery is doing too much"></textarea>
</div>
<div class="field">
<label for="chat-start-repo">Repository <span class="opt">optional</span></label>
<p class="hint" id="chat-start-repo-hint">Defaults to the repository this server was started against. Pick a known checkout, or type a path.</p>
<select id="chat-start-repo-select" data-placeholder="Server default" aria-describedby="chat-start-repo-hint">
<option value="">Server default</option>
</select>
<input id="chat-start-repo" name="repo" type="text" spellcheck="false" autocapitalize="off"
aria-describedby="chat-start-repo-hint" placeholder="/home/yukimemi/src/github.com/yukimemi/magi">
<button class="btn btn-quiet" type="button" id="chat-start-repo-refresh">Rescan repositories</button>
</div>
<p class="form-error" id="chat-start-error" role="alert" hidden></p>
<button class="btn btn-gold" type="button" id="chat-start-go">Start the interview</button>
<p class="waiting" id="chat-start-wait" role="status" hidden>
<span class="waiting-dots" aria-hidden="true"><i></i><i></i><i></i></span>
<span class="waiting-text">Reading your idea. The first reply takes about as long as any other turn — under a minute, usually.</span>
</p>
</div>
<ol class="cards" id="chats-list"></ol>
<p class="empty" id="chats-empty" hidden>
No conversations yet. Describe an idea above and an agent will ask you
the questions a good task file needs answered.
</p>
</section>
<!-- PLANNING: one conversation ---------------------------------------- -->
<section class="view" id="view-chat" aria-labelledby="chat-h" hidden>
<a class="back" href="#/plan">Planning</a>
<div class="view-head">
<div class="run-status" id="chat-status"></div>
<h1 id="chat-h">Loading conversation…</h1>
<p class="view-sub" id="chat-meta"></p>
<p class="panel-note" id="chat-derived-from" hidden>
Derived from <a id="chat-derived-from-link" href="#"></a>.
</p>
</div>
<ol class="turns" id="chat-turns"></ol>
<!-- A turn takes tens of seconds because a real model is thinking, so the
wait is stated in words with the elapsed time counting up: a silent
spinner and a hung server look identical. -->
<p class="waiting" id="chat-wait" role="status" hidden>
<span class="waiting-dots" aria-hidden="true"><i></i><i></i><i></i></span>
<span class="waiting-text"></span>
<!-- The seconds are aria-hidden on purpose: a counter announced once a
second makes the live region useless. The sentence beside it is
what changes for assistive technology, and only twice. -->
<span class="waiting-secs" aria-hidden="true"></span>
</p>
<div class="panel" id="chat-draft-panel" hidden>
<div class="panel-bar">
<h2>Task file</h2>
<span class="tag" data-tone="gold" id="chat-draft-tag">draft</span>
</div>
<p class="panel-note">This is what gets filed. Read it before you do.</p>
<!-- Formatted is the default read; raw is one tap away and shows the
exact bytes that would be filed, unaltered - the operator must
always be able to check that before filing. -->
<div class="draft-view-toggle">
<button class="btn btn-quiet" type="button" id="chat-draft-raw-toggle" aria-pressed="false">Show raw</button>
</div>
<div class="md" id="chat-draft-rendered"></div>
<pre class="draft" id="chat-draft" tabindex="0" aria-label="Draft task file (raw)" hidden></pre>
<div class="problems" id="chat-problems" role="alert" hidden></div>
<button class="btn btn-gold" type="button" id="chat-file">File this task</button>
</div>
<div class="panel" id="chat-filed-panel" hidden>
<h2>Filed</h2>
<p class="filed-note" id="chat-filed-note"></p>
<a class="btn btn-quiet" id="chat-filed-go" href="#/queue">Open the backlog</a>
</div>
<form class="say" id="chat-say">
<label class="sr-only" for="f-say">Your reply</label>
<textarea id="f-say" rows="2" placeholder="Answer, or push back…"></textarea>
<button class="btn btn-gold" type="submit" id="chat-send">Send</button>
</form>
<p class="form-error" id="chat-error" role="alert" hidden></p>
<p class="panel-note" id="chat-closed" hidden>
This conversation is closed. Start another from Planning.
</p>
<div class="panel" id="chat-derive-panel">
<h2>Continue in another repository</h2>
<p class="panel-note">Starts a new conversation with this whole transcript as background, against a different checkout. This conversation is left exactly as it is.</p>
<select id="chat-derive-repo-select" data-placeholder="Choose a repository…">
<option value="">Choose a repository…</option>
</select>
<input id="chat-derive-repo" type="text" spellcheck="false" autocapitalize="off"
placeholder="/home/yukimemi/src/github.com/yukimemi/rvpm">
<p class="form-error" id="chat-derive-error" role="alert" hidden></p>
<button class="btn btn-quiet" type="button" id="chat-derive-go">Continue here</button>
</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="#/plan" data-nav="chats">
<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 5.5h9l6 6v7a2 2 0 0 1-2 2h-13a2 2 0 0 1-2-2v-11a2 2 0 0 1 2-2z"/>
<path d="M13.5 5.5v6h6"/>
<path d="M7.5 15h7"/>
</svg>
</span>
<span>Plan</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>
<button class="dock-item dock-new" type="button" data-compose>
<span class="dock-glyph" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
<path d="M12 5v14M5 12h14"/>
</svg>
</span>
<span>New task</span>
</button>
</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>
<!-- COMPOSE ------------------------------------------------------------- -->
<dialog class="sheet" id="compose" aria-labelledby="compose-h">
<form id="compose-form" method="dialog">
<div class="sheet-head">
<h2 id="compose-h">File a task</h2>
<button class="icon-btn" type="button" id="compose-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="field">
<label for="f-instruction">Instruction</label>
<p class="hint" id="f-instruction-hint">What the agents must implement. This is the whole brief they get.</p>
<textarea id="f-instruction" name="instruction" rows="7" required
aria-describedby="f-instruction-hint"
placeholder="Add a --json flag to magi list that prints one object per run."></textarea>
</div>
<div class="field">
<label for="f-title">Title <span class="opt">optional</span></label>
<p class="hint" id="f-title-hint">Defaults to the first meaningful line of the instruction.</p>
<input id="f-title" name="title" type="text" maxlength="72" aria-describedby="f-title-hint">
</div>
<div class="field">
<label for="f-priority">Priority</label>
<p class="hint" id="f-priority-hint">Higher runs first; ties break oldest-first.</p>
<select id="f-priority" name="priority" aria-describedby="f-priority-hint">
<option value="2">2 — urgent</option>
<option value="1">1 — high</option>
<option value="0" selected>0 — normal</option>
<option value="-1">-1 — low</option>
</select>
</div>
<details class="advanced">
<summary>Advanced</summary>
<div class="field">
<label for="f-repo">Repository path <span class="opt">optional</span></label>
<p class="hint" id="f-repo-hint">Defaults to the repository this server was started against.</p>
<input id="f-repo" name="repo" type="text" spellcheck="false" autocapitalize="off"
aria-describedby="f-repo-hint" placeholder="/home/yukimemi/src/github.com/yukimemi/magi">
</div>
</details>
<p class="form-error" id="compose-error" role="alert" hidden></p>
<div class="sheet-actions">
<button class="btn btn-quiet" type="button" id="compose-cancel">Cancel</button>
<button class="btn btn-gold" type="submit" id="compose-submit">File task</button>
</div>
</form>
</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>
<p class="sr-only" id="live" aria-live="polite"></p>
<script type="module" src="/app.js"></script>
</body>
</html>