ewilliams28/turnstone
1
0
Fork 0
mirror of https://github.com/turnstonelabs/turnstone.git synced 2026-08-12 23:12:23 -06:00
Code Issues Packages Projects Releases Wiki Activity
Files
729a02a8339d152c7a283430e56dc0b41d14f5c6
turnstone/scripts/livepass.py
T
Patrick Buckley 729a02a833 feat(ui): copy-to-clipboard for messages and rendered blocks 
Three idle-only affordances on every chat surface: a persistent copy
button in each assistant bubble's actions bar, a pointer-only floating
button over the hovered markdown block (fence, mermaid diagram, table),
and Enter on a focused block for keyboard users, with the outcome
flashed on the block itself.

Copy resolves to SOURCE, not rendered text.  The renderer stashes each
table's raw markdown in data-md-source at render time — span sentinels
restored in reverse mask order, footnote-definition bodies restored to
raw before their recursive render — and whole-message copy reads the
streaming pipeline's per-frame stash.  The clipboard transport falls
back to the legacy execCommand path for plain-HTTP LAN nodes, cloning
and restoring the user's selection and focus.

Outcomes surface button-local only: flash + title + one live-region
announcement through the shared makeAnnouncer factory (also adopted by
the interactive voice/tool announcers, whose lazily created regions
swallowed their first announcement).  Busy refusals answer with their
own message.  Coordinator retry and admin token-copy keep
zero-module-dependency degrade paths.
2026-08-02 06:15:40 -07:00

2186 lines
98 KiB
Python
Executable File
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
#!/usr/bin/env python3
"""Build the livepass harnesses — render real hatch dialogs/shelves headlessly.
The livepass is how converted modal surfaces get verified without booting a
server: a minimal page that symlinks the REAL stylesheets and scripts, embeds
the REAL markup (extracted fresh from the index files at build time), stubs
``window.authFetch`` with canned fixtures, and drives surfaces via ``?open=``
query params — including click-driving submits so dead buttons can't hide
(the model-Save bug class).
Usage:
python3 scripts/livepass.py # build into /tmp/livepass/
python3 scripts/livepass.py --out DIR # build elsewhere
python3 scripts/livepass.py --serve 8950 # build + serve (Ctrl+C stops)
Then screenshot states (file:// blocks ES modules — always serve over http;
the reduced-motion flag is REQUIRED, entrance animations race the capture):
google-chrome --headless --disable-gpu --hide-scrollbars \\
--force-prefers-reduced-motion --window-size=1440,900 \\
--virtual-time-budget=9000 --screenshot=out.png \\
"http://localhost:8950/ui/livepass.html?open=new-ws&theme=light"
UI harness (?open=): new-ws · new-ws-fork · edit-title · delete-ws ·
revoke-mcp · ws-delete · ws-delete-results (+ &theme=light, &busy=1)
Console harness (?open=): schedule-create · schedule-edit · model-create ·
model-edit · model-save (drives a Save click; document.title becomes
PUT-OK-<n> on success) · policy · confirm · token
Plus &tall=1 (90-row users panel — the .admin-content scroll state; the
synthetic rows wrap to two lines, so judge overflow geometry, not row
cadence) · &scrolled=1 lands mid-list, &scrolled=bottom shows the 24px
scroll tail · &focuslast=1 focuses the last shelf-body control (the
displaced-dock regression probe: only .sh-body may scroll; head/foot stay
pinned). All combinable with ?open=. The console page wraps the fragment
in the REAL L-shell chain — pane-pinned height, interior scroller — so
scroll/dock geometry matches production; keep it that way. Body-level
dialogs (confirm/install/coord-delete) are injected as riders; a driven
?open= that ends with no open dialog stamps OPEN-FAILED-<state> into the
title instead of passing silently.
Governance surfaces (roles/HR/OGP/memory/skill) need fixtures that are not
canned yet — add a fixture + driver branch below when you need one.
Shell harness (?split=): right (default) · down · three · none — boots the
REAL shell.js + pane.js split-view engine over stubbed seams (two demo
conversational panes; ?split=three adds the Dashboard cell). + &theme=light.
document.title stamps SPLIT-READY-<visible cells> on success and
SPLIT-FAILED-<reason> when a driven split was denied — judge the focused
cell's top accent bar, the separators, and the .shown tab marker.
Proxy-brand harness (/proxybrand/livepass.html): back-to-console from a
PROXIED node view, driven end to end. An iframe hosts a node page built
from the REAL shell.js rail plus the REAL _JS_PROXY_SHIM (read out of
turnstone/console/server.py by text, never imported -- scripts/ has no
sys.path guard, so an import would silently pick up site-packages). The
host clicks the brand's child span and, because the shim navigates the
FRAME away, reads the frame's post-navigation location from the surviving
top page. document.title stamps PROXYBRAND-READY, or
PROXYBRAND-FAILED-<reason>: sub-not-repointed-server (nothing wired),
showhome-also-ran (shell.js won the click), nav-<path> (went somewhere
other than the console root), sub-not-console-<text>, aria-not-repointed,
no-navigation, no-brand, no-sub. Needs --virtual-time-budget=9000;
there is nothing to screenshot. Read the verdict from <title> --
both literals also appear in the host page's inline script, so a bare
grep over --dump-dom output false-positives.
Attachments harness (/attachments/livepass.html): the composer attachment
chips + the sent-message attachment pills, both driven through the REAL
code paths — createAttachmentController.rehydrate() builds the chips and
Pane.addUserMessage() builds the pills, so the preview nodes (image/pdf
thumbnail, <audio> player, lazy text snippet) render exactly as in
production. Committed fixtures cover every kind plus a long filename;
thumbnails + the audio clip are served by an in-process fixture route
(--serve only), the text snippet flows through the stubbed authFetch.
+ &theme=light. document.title stamps ATTACH-READY-<chips>-<pills> on
success, ATTACH-FAILED-c<n>-p<n> when a surface came up empty. Judge the
thumbnail crop/size, the native audio-control fit at the constrained
height, the snippet contrast, and how a long filename behaves at the
340px chip cap.
Task-agent harness (/taskagent/livepass.html): the task_agent card — a task
agent's sub-tool steps nested under its conversation row, driven through the
REAL InteractivePane.handleEvent (parent tool_pending/tool_info -> child
tool_pending/tool_result/tool_output_chunk/approve_request -> task_agent
tool_result) so the SSE->card routing (_routeAgentItems / _ensureAgentCard,
and appendToolOutput finding the nested row by call_id) is exercised, not
just the leaf builders. Query flags: &theme=light; &collapsed=1 (all-auto,
no approval -> the natural collapse-by-default state); &parallel=1 (card in a
2-tool batch, for the rail-bleed rules); &recall=1 (the RECALL path —
replayHistory rebuilding the card from a /history `agent_steps` overlay, i.e.
a reload while the ws is in memory); &expand=1 (open every card so a shot
shows the nested steps); &race=1 (child steps emitted BEFORE the task_agent
row paints — the parallel-pool ordering window; the orphan buffer must nest
them rather than let them escape to top-level); &orphan=1 (child steps whose
task_agent row NEVER paints — the safety valve must escape them to visible
top-level rows after the grace window, stamping TASKAGENT-ORPHANS-ESCAPED-<n>,
not leave them buffered/invisible). document.title stamps
TASKAGENT-READY-<steps> on
success, TASKAGENT-FAILED-... / TASKAGENT-ERROR when routing breaks, so a
broken card can't screenshot green.
Copy harness (/copy/livepass.html): the copy-to-clipboard affordances — the
per-bubble copy button in .msg-actions and the floating block-copy button
over hovered fences / mermaid diagrams / tables (pointer-only; keyboard
copies with Enter on the focused block) — driven through the REAL
InteractivePane (replayHistory plus a live handleEvent stream turn, so the
retry-holder buttons coexist with the persistent copy buttons on the last
bubble; the turn ends idle, matching the affordances' idle-only gate).
navigator.clipboard is stubbed to a recorder, hover/focus/keys are
dispatched synthetically, and every copied payload is compared byte-exact
against the SOURCE (fences, pipes, mermaid text, the bubble's raw
markdown). + &theme=light. document.title stamps
COPY-READY-<bubbles>-<blocks> only when every probe copied exact source;
COPY-FAILED-<reason> otherwise. &kbd=1 probes the KEYBOARD path: focus a
block, dispatch Enter — the block's source lands on the clipboard, the
block carries the outcome flash class, and the floating button stays out
of it — stamps COPY-KBD-READY / COPY-KBD-FAILED-<step>.
Screenshot states: &flash=1 (visual-only
run — no probes; floating button + ✓ state on the fence, holder bar
revealed via focus) and &bare=1 (single hover, no decoration). Known
capture artifact: the DARK-theme &flash=1 shot can omit the floating
button's pixels (headless software compositor; the DOM state is correct
and light theme paints) — judge the dark floating button from &bare=1
and the ✓ state from the light shot. &stepmax=N bisects a paint
regression to the interaction that triggers it.
Perf harness (/perf/livepass.html): long-session performance baseline for the
interactive pane — mounts the REAL InteractivePane at real scroll geometry
(fixed-height mount, production CSS chain) and drives production-shaped
events through pane.handleEvent/replayHistory with rAF yields, measuring:
replayHistory wall time at N messages, live event-storm cost per turn on top
of that transcript (reasoning/content deltas + tool batches + task_agent
cards), tool_output_chunk throughput, busy/idle churn, heap + node count +
_agentCards size across repeated replay cycles (leak probe), and longtask
counts. Query params: ?n= (history size) &turns= &chunks= &cycles= &idle=
&post=1 (POST the JSON report to /perf/report — the --perf runner captures
it). Results land in <pre id="perf-json"> and document.title stamps
PERF-READY-<n> / PERF-FAILED-<phase>. MEASUREMENT RULES: never run with
--virtual-time-budget (it corrupts performance.now) and never pass
--force-prefers-reduced-motion (it disables the animations whose cost we
measure); the --perf runner passes --js-flags=--expose-gc and
--enable-precise-memory-info so heap numbers are stable and real.
python3 scripts/livepass.py --perf # 300 and 3000 msgs
python3 scripts/livepass.py --perf --perf-n 5000 # match the field run
Rebuild after ANY markup change: the dialog blocks are embedded at build
time. Assets are symlinked, so CSS/JS edits are live on refresh.
"""
from __future__ import annotations
import argparse
import http.server
import json
import re
import shutil
import subprocess
import time
import uuid
from pathlib import Path
ROOT = Path(__file__).resolve().parent.parent
UI_INDEX = ROOT / "turnstone/ui/static/index.html"
CONSOLE_INDEX = ROOT / "turnstone/console/static/index.html"
def extract_dialogs(index: Path, only_id: str | None = None) -> list[str]:
"""Every <dialog class="hatch ..."> block, verbatim from the tree."""
html = index.read_text(encoding="utf-8")
blocks = []
for m in re.finditer(r"[ \t]*<dialog\s[^>]*class=\"[^\"]*\bhatch\b[^\"]*\"", html):
end = html.index("</dialog>", m.start()) + len("</dialog>")
block = html[m.start() : end]
if only_id and f'id="{only_id}"' not in block:
continue
blocks.append(block)
if not blocks:
raise SystemExit(f"no dialog.hatch blocks found in {index}")
return blocks
def extract_admin_fragment() -> str:
"""The console admin pane — the hatch-host all shelves live inside."""
html = CONSOLE_INDEX.read_text(encoding="utf-8")
start = html.index('<div id="admin-layout"')
end = html.index("<!-- /admin-layout -->") + len("<!-- /admin-layout -->")
return html[start:end]
def extract_proxy_shim(prefix: str = "/node/livepass-node") -> str:
"""Pull ``_JS_PROXY_SHIM`` out of console/server.py BY TEXT, not import.
``scripts/`` has no ``sys.path`` guard, so ``import turnstone`` from here
resolves to whatever is installed in site-packages rather than this
checkout -- silently building the page from a DIFFERENT version of the
shim than the one you are trying to verify. Read the source instead.
"""
src = (ROOT / "turnstone/console/server.py").read_text(encoding="utf-8")
m = re.search(r'^_JS_PROXY_SHIM = """\\\n(.*?)^"""', src, re.S | re.M)
if not m:
raise SystemExit(
"livepass: could not find _JS_PROXY_SHIM in turnstone/console/server.py "
"-- the constant was renamed or reshaped; update extract_proxy_shim()."
)
return m.group(1).replace('"PREFIX_PLACEHOLDER"', json.dumps(prefix))
def inject(template: str, marker: str, payload: str) -> str:
begin = template.index(f"<!-- {marker}:BEGIN -->") + len(f"<!-- {marker}:BEGIN -->")
end = template.index(f"<!-- {marker}:END -->")
return template[:begin] + "\n" + payload + "\n" + template[end:]
def symlink(link: Path, target: Path) -> None:
if link.is_symlink() or link.exists():
link.unlink()
link.symlink_to(target)
# --------------------------------------------------------------------------
# UI harness — the standalone app's dialog tier. Drives the REAL cards.js
# controller for the batch surfaces so the production code path renders.
# --------------------------------------------------------------------------
UI_TEMPLATE = """<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>ui livepass</title>
<link rel="stylesheet" href="shared/base.css" />
<link rel="stylesheet" href="shared/ui-base.css" />
<link rel="stylesheet" href="shared/chat.css" />
<link rel="stylesheet" href="shared/conversation.css" />
<link rel="stylesheet" href="shared/cards.css" />
<link rel="stylesheet" href="static/style.css" />
<link rel="stylesheet" href="shared/shell.css" />
<link rel="stylesheet" href="shared/interactive.css" />
<link rel="stylesheet" href="shared/hatch.css" />
</head>
<body>
<!-- DIALOGS:BEGIN -->
<!-- DIALOGS:END -->
<div id="toast" role="status" aria-live="polite"></div>
<script>
window.authFetch = function (url) {
// One canned failure so the results view shows the mixed state.
var fail = url && url.indexOf("c3d4e5f6a1b2") !== -1;
return Promise.resolve({
ok: !fail,
status: fail ? 409 : 200,
headers: { get: function () { return "application/json"; } },
json: function () { return Promise.resolve({}); },
text: function () {
return Promise.resolve(
fail ? '{"error": "workstream is still running"}' : "",
);
},
});
};
window.showToast = function (msg) { console.log("toast:", msg); };
</script>
<script type="module">
import { openDialog, setBusy } from "./shared/hatch.js";
const q = new URLSearchParams(location.search);
if (q.get("theme") === "light")
document.documentElement.dataset.theme = "light";
const open = q.get("open") || "";
function fill(id, text) {
const el = document.getElementById(id);
if (el) el.textContent = text;
}
if (open === "new-ws" || open === "new-ws-fork") {
const dlg = document.getElementById("new-ws-dialog");
const canned = {
"new-ws-model": ["sonnet-4-6", "gpt-5-2", "qwen3-32b"],
"new-ws-judge-model": ["sonnet-4-6", "qwen3-32b"],
"new-ws-skill": ["code-review (default)", "deep-research"],
};
for (const id in canned) {
const s = document.getElementById(id);
for (const n of canned[id]) {
const o = document.createElement("option");
o.value = n;
o.textContent = n;
s.appendChild(o);
}
}
if (open === "new-ws-fork") {
fill("new-ws-title", "Fork workstream");
fill("new-ws-tag", "WS-FORK");
document.getElementById("new-ws-submit").textContent = "Fork";
const skillLabel = document.querySelector('label[for="new-ws-skill"]');
if (skillLabel) skillLabel.hidden = true;
document.getElementById("new-ws-skill").hidden = true;
document.getElementById("new-ws-attach-row").hidden = true;
}
openDialog(dlg);
} else if (open === "edit-title") {
document.getElementById("edit-title-input").value =
"lshell renovation pass 3";
openDialog(document.getElementById("edit-title-dialog"));
} else if (open === "delete-ws") {
fill(
"delete-ws-message",
'Delete "lshell renovation pass 3"? This cannot be undone.',
);
openDialog(document.getElementById("delete-ws-dialog"));
} else if (open === "revoke-mcp") {
fill(
"revoke-mcp-message",
"Revoke the connection to github? Tools that need this server will require re-consent.",
);
openDialog(document.getElementById("revoke-mcp-dialog"));
} else if (open === "ws-delete" || open === "ws-delete-results") {
// Drive the REAL shared controller so the dialog renders through
// the production code path (cards.js confirmSelection/confirm).
const mod = await import("./shared/cards.js");
const c = mod.createSavedCardsController({
idPrefix: "ws-delete",
buttonId: "ws-delete-btn",
noun: "workstream",
activateLabel: (s) => "Resume: " + (s.title || s.ws_id),
render: () => {},
buildDeleteRequest: (wsId) => ({
url: "/v1/api/workstreams/" + encodeURIComponent(wsId) + "/delete",
options: { method: "POST" },
}),
});
c.setItems([
{ ws_id: "a1b2c3d4e5f6", title: "lshell renovation pass 3" },
{ ws_id: "b2c3d4e5f6a1", title: "canonical trajectory spike" },
{
ws_id: "c3d4e5f6a1b2",
title:
"a very long workstream title that should wrap " +
"rather than punch out of the dialog box entirely",
},
]);
c.toggleAll();
c.confirmSelection();
if (open === "ws-delete-results") c.confirm();
}
if (q.get("busy")) {
const d = document.querySelector("dialog[open]");
if (d) setBusy(d, true);
}
</script>
</body>
</html>
"""
# --------------------------------------------------------------------------
# Console harness — the admin pane fragment hosts the shelves (token-created
# included); dialog-tier markup outside the fragment (confirm/install/
# coord-delete) is injected via the RIDERS marker in build().
# model-save click-drives the submit: document.title flips to PUT-OK-<n>.
# --------------------------------------------------------------------------
CONSOLE_TEMPLATE = """<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>console livepass</title>
<link rel="stylesheet" href="shared/base.css" />
<link rel="stylesheet" href="shared/ui-base.css" />
<link rel="stylesheet" href="console-static/style.css" />
<link rel="stylesheet" href="shared/shell.css" />
<link rel="stylesheet" href="shared/hatch.css" />
</head>
<body>
<!-- The REAL L-shell chain (shell.js buildShell + pane.js DOM, verbatim
class names) so the harness inherits production scroll geometry:
.pane-body > #view-admin > .admin-layout height-pin the hatch-host
and .admin-content is the pane's interior scroller. Never replace
this with bespoke height overrides — the clipped-pane / displaced-
shelf regressions were invisible to the harness precisely because
it used to pin #admin-layout with its own CSS. -->
<div class="app">
<aside class="rail" id="shell-rail">
<div class="rail-brand">
<button class="brand-home" type="button">
<div class="brand-mark"></div>
<span class="brand-name">turnstone</span>
<span class="brand-sub">console</span>
</button>
</div>
</aside>
<main class="content">
<div class="tabbar"></div>
<div class="panes">
<section class="pane">
<!-- no .pane-head: PaneManager._mount builds section.pane >
div.pane-body only -->
<div class="pane-body">
<div id="view-admin">
<!-- FRAGMENT:BEGIN -->
<!-- FRAGMENT:END -->
</div>
</div>
</section>
</div>
</main>
</div>
<!-- Body-level dialog tier (confirm / install / coord-delete): their
markup sits OUTSIDE #admin-layout in index.html, so the fragment
extraction misses them — build() injects every hatch dialog the
fragment does not already contain. -->
<!-- RIDERS:BEGIN -->
<!-- RIDERS:END -->
<div id="toast" role="status" aria-live="polite"></div>
<script>
(function () {
function reply(data) {
return Promise.resolve({
ok: true,
status: 200,
headers: { get: function () { return "application/json"; } },
json: function () { return Promise.resolve(data); },
text: function () { return Promise.resolve(JSON.stringify(data)); },
});
}
var SCHED = {
task_id: "t1", name: "nightly-digest", description: "Morning digest",
schedule_type: "cron", cron_expr: "0 6 * * 1,3,5", at_time: "",
target_mode: "auto", model: "fable-5", skill: "daily-digest",
initial_message: "Summarize overnight cluster activity.",
auto_approve: false, enabled: true,
notify_targets: [{ channel_type: "discord", channel_id: "8675309" }],
next_run: "2026-06-10T06:00:00",
};
var MODEL = {
definition_id: "def1", alias: "fable-5", model: "claude-fable-5",
provider: "anthropic", base_url: "", context_window: 200000,
capabilities: JSON.stringify({ supports_vision: true }),
enabled: true, temperature: null, max_tokens: null,
reasoning_effort: null, surface_persisted_reasoning: true,
replay_reasoning_to_model: false,
};
window.__putCount = 0;
window.authFetch = function (url, opts) {
var method = (opts && opts.method) || "GET";
if (method === "PUT" && url.indexOf("/model-definitions/def1") >= 0) {
window.__putCount++;
document.title = "PUT-OK-" + window.__putCount;
return reply({ ok: true });
}
if (url.indexOf("/schedules/preview") >= 0)
return reply({
valid: true, error: "",
next: [
"2026-06-10T06:00:00+00:00",
"2026-06-12T06:00:00+00:00",
"2026-06-15T06:00:00+00:00",
],
});
if (url.indexOf("/schedules/t1") >= 0) return reply(SCHED);
if (url.indexOf("/schedules") >= 0) return reply({ schedules: [SCHED] });
if (url.indexOf("/model-capabilities/known") >= 0)
return reply({ models: ["claude-fable-5", "claude-opus-4-8"] });
if (url.indexOf("/model-capabilities?") >= 0)
return reply({
known: true,
capabilities: {
context_window: 200000, supports_tools: true,
supports_vision: true,
supports_web_search: true, supports_temperature: true,
supports_effort: true,
},
});
if (url.indexOf("/model-definitions/def1") >= 0) return reply(MODEL);
if (url.indexOf("/model-definitions") >= 0) return reply({ models: [] });
if (url.indexOf("/api/models") >= 0)
return reply({ models: [
{ alias: "fable-5", model: "claude-fable-5" },
{ alias: "gpt-5.2", model: "gpt-5.2" },
] });
if (url.indexOf("/skills") >= 0)
return reply({ skills: [{ name: "daily-digest" }, { name: "ops-runbook" }] });
if (url.indexOf("/policies") >= 0)
return reply({ policies: [
{ policy_id: "p1", name: "deny-rm", tool_pattern: "bash*rm*",
action: "deny", priority: 900, enabled: true },
{ policy_id: "p2", name: "default-ask", tool_pattern: "*",
action: "ask", priority: 0, enabled: true },
] });
return reply({});
};
window.showToast = function (m) {
console.log("toast:", m);
var t = document.getElementById("toast");
t.textContent = m;
t.classList.add("show");
};
})();
</script>
<script type="module" src="shared/utils.js"></script>
<script type="module" src="shared/hatch.js"></script>
<script src="console-static/admin.js"></script>
<script src="console-static/governance.js"></script>
<script>
window.addEventListener("load", function () {
var q = new URLSearchParams(location.search);
if (q.get("theme") === "light")
document.documentElement.dataset.theme = "light";
var open = q.get("open") || "";
// ?tall=1 — the scroll state: one panel visible with enough rows to
// overflow the pane, so a screenshot shows .admin-content scrolling
// (and a shelf staying docked above it). Mirrors switchAdminTab's
// one-panel-visible invariant without booting the tab loaders.
if (q.get("tall")) {
var panels = document.querySelectorAll(".admin-panel");
for (var i = 0; i < panels.length; i++)
panels[i].style.display =
panels[i].id === "admin-users" ? "" : "none";
// No fallback: a fragment rename must fail loudly, not misplace rows.
var rowHost = document.querySelector("#admin-users [role=list]");
rowHost.textContent = ""; // drop the static "Loading users…" stub
for (var r = 0; r < 90; r++) {
var row = document.createElement("div");
row.className = "admin-row"; // real row chrome — geometry tracks production
row.textContent =
"user-" + String(r).padStart(3, "0") + " \\u00b7 synthetic row";
rowHost.appendChild(row);
}
var content = document.getElementById("admin-content");
if (content && q.get("scrolled"))
content.scrollTop =
q.get("scrolled") === "bottom"
? content.scrollHeight // the 24px scroll-tail state
: content.scrollHeight / 2; // land mid-list
}
setTimeout(function () {
if (open === "schedule-create") showCreateScheduleModal();
else if (open === "schedule-edit") showEditScheduleModal("t1");
else if (open === "model-create") showCreateModelModal();
else if (open === "model-edit" || open === "model-save")
showEditModelModal("def1");
else if (open === "policy") {
window._govPolicies && _govPolicies.length === 0 &&
loadGovPolicies && loadGovPolicies();
showCreatePolicyModal();
} else if (open === "confirm")
showConfirmModal(
"Delete schedule",
"Delete nightly-digest? Its run history is removed with it. This cannot be undone.",
"Delete",
function () {},
);
else if (open === "token")
showTokenCreatedModal(
"tsk_9f2e41c7a8b35d60e1f4a2b89c7d3e5f6a1b0c9d8e7f6a5b4c3d2e1f0a9b8c7d",
);
if (open === "model-save")
setTimeout(function () {
document.getElementById("model-create-submit").click();
}, 900);
if (q.get("busy"))
setTimeout(function () {
var d = document.querySelector("dialog[open]");
if (d) window.TurnstoneHatch.setBusy(d, true);
}, 400);
// A driven state that ends with nothing open must fail LOUDLY in
// the screenshot pipeline, not render a quietly dialog-less page.
setTimeout(function () {
var top = document.querySelector("dialog[open]");
if (open && !top) document.title = "OPEN-FAILED-" + open;
// &focuslast=1 — the displaced-dock regression probe: focus the
// last form control in the shelf BODY (the visually-hidden
// toggle/radio inputs live there). Only .sh-body may scroll;
// the head/foot strips must stay pinned in the screenshot.
if (top && q.get("focuslast")) {
var els = top.querySelectorAll(
".sh-body input, .sh-body select, .sh-body textarea",
);
if (els.length) els[els.length - 1].focus();
}
}, 600);
}, 150);
});
</script>
</body>
</html>
"""
# --------------------------------------------------------------------------
# Shell harness — the SPLIT-VIEW surface. Unlike the ui/console pages (which
# embed extracted markup), this one boots the REAL shell.js + pane.js over
# stubbed classic seams and drives the split engine via ?split=. Two demo
# conversational panes give the cells plausible content; the Dashboard pane
# (registered by the shell itself) fills the third cell in ?split=three.
# Loud-failure rule: the title stamps SPLIT-READY-<cells> only when the built
# state matches the request — a denied/failed split stamps SPLIT-FAILED-<why>.
# --------------------------------------------------------------------------
SHELL_TEMPLATE = """<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>shell livepass</title>
<link rel="stylesheet" href="shared/base.css" />
<link rel="stylesheet" href="shared/ui-base.css" />
<link rel="stylesheet" href="shared/chat.css" />
<link rel="stylesheet" href="shared/conversation.css" />
<link rel="stylesheet" href="shared/cards.css" />
<link rel="stylesheet" href="static/style.css" />
<link rel="stylesheet" href="shared/shell.css" />
<link rel="stylesheet" href="shared/interactive.css" />
</head>
<body>
<div id="header"><div id="status-bar"></div><button id="theme-toggle">☾</button></div>
<div id="breadcrumb"></div>
<div id="main" style="padding: 18px">
<h2 style="margin: 0 0 8px">Dashboard</h2>
<p style="color: var(--ink-3)">
Launcher + workstreams table live here (livepass stub).
</p>
</div>
<div id="view-admin" style="display: none"></div>
<script>
window.TURNSTONE_SHELL_CAPS = { cluster: false, brandSub: "console" };
window.TS_APP = {
boot() {},
getClusterState() { return { nodes: {} }; },
onRender() {},
};
window.TS_ADMIN = {};
var q = new URLSearchParams(location.search);
if (q.get("theme") === "light")
document.documentElement.dataset.theme = "light";
</script>
<script type="module" src="shared/shell.js"></script>
<script type="module">
const q = new URLSearchParams(location.search);
for (let i = 0; i < 100 && !window.TS_SHELL; i++)
await new Promise((r) => setTimeout(r, 20));
if (!window.TS_SHELL) {
document.title = "SPLIT-FAILED-no-shell";
} else {
sessionStorage.clear();
const pm = window.TS_SHELL.panes;
const { ShellPane } = await import("./shared/pane.js");
const mkConv = (type, title, lines) => {
pm.registerType(type, () => {
const p = new ShellPane({ type, title });
p.tabMenu = () => [
{ label: "Close pane", action: () => pm.close(p.id) },
];
p.onMount = function () {
const wrap = document.createElement("div");
wrap.style.cssText =
"flex:1;min-height:0;padding:16px;display:flex;flex-direction:column;gap:10px;overflow:auto;";
for (const [role, text] of lines) {
const d = document.createElement("div");
d.className = "msg " + role;
d.textContent = text;
wrap.append(d);
}
// Edge-touching opaque chrome — the strip that occluded the
// focus ring before the ::after overlay; keeps the bug class
// visible in every future pass.
const sb = document.createElement("div");
sb.className = "ws-status-bar";
sb.textContent = "17,418 / 393,216 (4.4%) · max 9 tools";
this.bodyEl.append(wrap, sb);
};
return p;
});
};
mkConv("repro", "repro-flaky-suite", [
["user", "Track down the flaky retry in the channel gateway tests."],
[
"assistant",
"Three suspects so far — the debounce window in mcp_client, the " +
"circuit-breaker reset, and the socket-mode reconnect. Bisecting now.",
],
[
"assistant",
"Found it: the breaker reset races the stream pre-close. Patch incoming.",
],
]);
mkConv("relnotes", "draft-1.6.2-notes", [
["user", "Draft the 1.6.2 patch notes from the merged PR list."],
[
"assistant",
"Pulling #657–#662. Consent badge, orphan verb, MCP task hygiene, " +
"the anthropic-compatible lane, and the mcp<2 cap.",
],
]);
pm.openPane("repro");
pm.openPane("relnotes");
const want = q.get("split") || "right";
let failed = null;
if (want !== "none") {
const r1 = pm.splitFocused("right");
if (!r1.ok) failed = r1.reason;
if (!failed && (want === "three" || want === "down")) {
const r2 = pm.splitFocused("down");
if (!r2.ok) failed = r2.reason;
}
}
const cells = document.querySelectorAll(
".panes > section.pane:not([hidden])",
).length;
document.title = failed
? "SPLIT-FAILED-" + failed
: "SPLIT-READY-" + cells;
}
</script>
</body>
</html>
"""
# --------------------------------------------------------------------------
# Attachments harness — the composer attachment chips + the sent-message
# attachment pills. Both are driven through the REAL code paths so the preview
# nodes render exactly as production builds them: createAttachmentController's
# rehydrate() renders the chips (renderChip -> _applyPreview ->
# buildAttachmentPreview), and Pane.addUserMessage() renders the pills (which
# call the same window.buildAttachmentPreview). The page frame is harness-only
# chrome and not under review; the chips row and the pill row are.
# --------------------------------------------------------------------------
# The PROXIED NODE page: the real L-shell (so the rail brand is the real
# element, with the real shell.js click listener on it) plus the real proxy
# shim injected exactly where proxy_index puts it -- first thing inside
# <body>, ahead of the deferred shell.js module. caps mirror a NODE, not
# the console: brandSub "server" is what the shim has to overwrite, and
# leaving it "console" would make the host's /console/i check vacuous.
PROXYBRAND_FRAME_TEMPLATE = """<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>proxied node</title>
<link rel="stylesheet" href="shared/base.css" />
<link rel="stylesheet" href="shared/ui-base.css" />
<link rel="stylesheet" href="static/style.css" />
<link rel="stylesheet" href="shared/shell.css" />
</head>
<body>
<!-- SHIM:BEGIN -->
<!-- SHIM:END -->
<div id="header" style="display: none"><div id="status-bar"></div></div>
<div id="main" style="padding: 18px">
<h2 style="margin: 0 0 8px">Node dashboard</h2>
</div>
<div id="view-admin" style="display: none"></div>
<script>
window.TURNSTONE_SHELL_CAPS = { cluster: false, brandSub: "server" };
window.TS_APP = {
boot() {},
getClusterState() { return { nodes: {} }; },
onRender() {},
};
window.TS_ADMIN = {};
// Record on the PARENT, which survives the frame's navigation.
// A flag on the frame's own window dies with the document, so the
// host would read undefined and pass -- a check that cannot fail.
window.showHome = function () {
try { window.parent.__showHomeRan = true; } catch (e) {}
};
</script>
<script type="module" src="shared/shell.js"></script>
</body>
</html>
"""
# The HOST page. The shim navigates the FRAME to "/", which would destroy
# any verdict stamped inside it -- so the surviving top page reads the
# frame's post-navigation location and stamps its own title instead. No
# landing page at "/" is needed (the harness root serves a directory
# listing) and no CDP client either.
PROXYBRAND_HOST_TEMPLATE = """<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>proxybrand livepass</title>
<style>
html, body { margin: 0; height: 100%; }
iframe { width: 100%; height: 100%; border: 0; }
</style>
</head>
<body>
<iframe id="frame" src="frame.html"></iframe>
<script>
const frame = document.getElementById("frame");
let phase = 0;
const fail = (r) => { phase = 9; document.title = "PROXYBRAND-FAILED-" + r; };
frame.addEventListener("load", () => {
if (phase === 9) return;
if (phase === 0) {
const doc = frame.contentDocument;
const brand = doc.querySelector(".rail-brand .brand-home");
if (!brand) return fail("no-brand");
const sub = brand.querySelector(".brand-sub");
if (!sub) return fail("no-sub");
const text = sub.textContent.trim();
if (text === "server") return fail("sub-not-repointed-server");
if (!/console/i.test(text)) return fail("sub-not-console-" + text);
if (brand.getAttribute("aria-label") !== "Back to console")
return fail("aria-not-repointed");
phase = 1;
// Click the CHILD span, as a real user does: the shim must match
// via contains(), not target identity.
sub.click();
setTimeout(() => { if (phase === 1) fail("no-navigation"); }, 2000);
return;
}
const path = frame.contentWindow.location.pathname;
const ranShowHome = !!window.__showHomeRan;
phase = 2;
if (path !== "/") return fail("nav-" + path);
if (ranShowHome) return fail("showhome-also-ran");
// Sticky, mirroring fail(): a third load must not re-stamp.
phase = 9;
document.title = "PROXYBRAND-READY";
});
</script>
</body>
</html>
"""
ATTACH_TEMPLATE = """<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>attachments livepass</title>
<link rel="stylesheet" href="shared/base.css" />
<link rel="stylesheet" href="shared/ui-base.css" />
<link rel="stylesheet" href="shared/interactive.css" />
<link rel="stylesheet" href="shared/chat.css" />
<style>
/* Harness-only framing (NOT under review) — gives the two real surfaces
a plausible page context at a realistic pane width. */
body {
padding: 24px; margin: 0; display: flex; flex-direction: column;
gap: 28px; background: var(--bg); color: var(--fg);
font-family: var(--font-sans, system-ui, sans-serif);
}
.demo-label {
font: 11px var(--font-mono, monospace); color: var(--fg-dim);
text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 8px;
}
.demo-frame {
width: 560px; max-width: 100%; border: 1px solid var(--border);
border-radius: var(--radius-sm); overflow: hidden;
background: var(--bg-surface);
}
.messages { padding: 16px; }
/* Static composer chrome for context; the chips row is built by the
REAL createAttachmentController. */
.demo-textarea {
width: 100%; min-height: 44px; resize: none; background: var(--bg-elevated);
color: var(--fg); border: 1px solid var(--border);
border-radius: var(--radius-sm); padding: 8px; font: inherit;
}
</style>
</head>
<body>
<div>
<div class="demo-label">composer — attachment chips (real createAttachmentController)</div>
<div class="demo-frame">
<div class="composer">
<div class="composer-chips" id="chips" role="list" aria-label="Attachments"></div>
<div class="composer-row">
<textarea class="demo-textarea" placeholder="Message…"></textarea>
</div>
</div>
</div>
</div>
<div>
<div class="demo-label">conversation — sent-message attachment pills (real Pane.addUserMessage)</div>
<div class="demo-frame">
<div class="messages" id="messages"></div>
</div>
</div>
<div id="toast" role="status" aria-live="polite"></div>
<script>
// Committed-attachment fixtures (no `uploading`, real ids) — one of every
// kind plus a deliberately long filename to probe chip truncation/wrap.
window.__ATTACH = [
{ attachment_id: "att-image", kind: "image",
filename: "observatory-dome.jpg", size_bytes: 184320 },
{ attachment_id: "att-pdf", kind: "pdf",
filename: "q2-cluster-report.pdf", size_bytes: 529408 },
{ attachment_id: "att-audio", kind: "audio",
filename: "standup-2026-06-15.m4a", size_bytes: 2202009 },
{ attachment_id: "att-text", kind: "text",
filename: "release-notes-1.7.0a2.md", size_bytes: 4317 },
{ attachment_id: "att-longname", kind: "text",
filename: "a-deliberately-long-attachment-filename-that-truncates.md",
size_bytes: 8214 },
];
window.__SNIPPET =
"# Release notes \\u2014 1.7.0a2\\n\\nN-sample consensus voting lands behind " +
"a flag; reranker-primary retrieval replaces RRF as the default; " +
"coordinator memory is now keyed per user.";
// image/pdf thumbnails + the audio clip load via element .src and are
// served by the livepass fixture route; the text snippet is the only
// preview that flows through authFetch, so the stub answers .../content.
// Held under a private name: auth.js's legacy window bridge
// (Object.assign(window, {authFetch})) runs at module-import time and
// would clobber a plain window.authFetch — the module reinstates it
// below, after the imports have evaluated.
window.__attachFetch = function (url) {
var path = (url || "").split("?")[0];
function reply(ok, body, asText) {
return Promise.resolve({
ok: ok, status: ok ? 200 : 404,
json: function () { return Promise.resolve(body || {}); },
text: function () {
return Promise.resolve(asText != null ? asText : "");
},
});
}
if (/\\/attachments$/.test(path))
return reply(true, { attachments: window.__ATTACH });
// Any text /content gets the snippet (audio /content is served as
// bytes by the fixture route, never through authFetch).
if (path.indexOf("/content") !== -1)
return reply(true, {}, window.__SNIPPET);
return reply(true, {});
};
window.toast = { error: function (m) { console.log("toast:", m); } };
</script>
<script type="module">
import { createAttachmentController } from "./shared/composer_attachments.js";
import { InteractivePane } from "./shared/interactive.js";
const q = new URLSearchParams(location.search);
if (q.get("theme") === "light")
document.documentElement.dataset.theme = "light";
// Reinstate the fixture fetch now the imports (and auth.js's window
// bridge) have run — the pills' buildAttachmentPreview reads
// window.authFetch directly for the text snippet.
window.authFetch = window.__attachFetch;
// composer chips — drive the REAL controller. Pass the stub explicitly
// so the chip path never depends on window.authFetch timing.
const ctl = createAttachmentController({
chipsEl: document.getElementById("chips"),
getWsId: () => "demo-ws",
authFetch: window.__attachFetch,
});
await ctl.rehydrate();
// message pills — drive the REAL Pane.addUserMessage; stub only the
// host seams (scroll/empty-state/action-row) that need a mounted pane.
const pane = new InteractivePane("demo-ws");
pane.messagesEl = document.getElementById("messages");
pane.removeEmptyState = () => {};
pane._addUserMsgActions = () => {};
pane.scrollToBottom = () => {};
pane.addUserMessage(
"Please review the attached report, the dome photo, the standup " +
"recording, and the release notes.",
window.__ATTACH.slice(0, 4),
);
// Loud failure — a broken harness must not screenshot green.
setTimeout(function () {
const chips = document.querySelectorAll("#chips .composer-chip").length;
const pills = document.querySelectorAll(
"#messages .msg-user-attach-pill",
).length;
document.title =
chips && pills
? "ATTACH-READY-" + chips + "-" + pills
: "ATTACH-FAILED-c" + chips + "-p" + pills;
}, 800);
</script>
</body>
</html>
"""
# --------------------------------------------------------------------------
# Task-agent harness — the task_agent card: a task agent's sub-tool steps
# nested under its conversation row. Driven through the REAL
# InteractivePane.handleEvent so the SSE->card ROUTING (_routeAgentItems /
# _ensureAgentCard, plus appendToolOutput finding the nested row by call_id)
# is exercised, not just the leaf builders. The page frame is harness-only
# chrome; the .conv-batch / task_agent card is what's under review.
# --------------------------------------------------------------------------
# The host seams a mounted InteractivePane provides, stubbed once for every
# harness that drives the REAL pane (taskagent, copy). A new required seam
# gets added HERE — a harness left with a stale stub set does not fail at
# review time, it throws HARNESS ERROR at run time.
PANE_STUB_JS = """\
// Drive the REAL pane; stub only the host seams a mounted pane provides.
const pane = new InteractivePane("demo-ws");
pane.messagesEl = messages;
pane.inputEl = document.createElement("textarea");
pane.sendBtn = document.createElement("button");
pane.isNearBottom = () => false;
pane.scrollToBottom = () => {};
pane.removeEmptyState = () => {};
pane.removeThinkingIndicator = () => {};
pane.setBusy = () => {};"""
TASKAGENT_TEMPLATE = (
"""<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>task_agent livepass</title>
<link rel="stylesheet" href="shared/base.css" />
<link rel="stylesheet" href="shared/ui-base.css" />
<link rel="stylesheet" href="shared/chat.css" />
<link rel="stylesheet" href="shared/conversation.css" />
<link rel="stylesheet" href="shared/cards.css" />
<link rel="stylesheet" href="shared/interactive.css" />
<style>
/* Harness-only framing (NOT under review) — a plausible pane context. */
body {
padding: 24px; margin: 0; background: var(--bg); color: var(--ink);
font-family: var(--font-sans, system-ui, sans-serif);
}
.demo-frame { max-width: 720px; margin: 0 auto; }
.demo-label {
font: 11px var(--font-mono, monospace); color: var(--ink-3);
text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 8px;
}
</style>
</head>
<body>
<div class="demo-frame">
<div class="demo-label">conversation — task_agent card (real InteractivePane.handleEvent)</div>
<div class="messages" id="messages"></div>
</div>
<script>
// interactive.js reads window.toast / window.authFetch; the static render
// never POSTs, so no-op stubs are enough.
window.toast = { error: function (m) { console.log("toast:", m); } };
window.authFetch = function () {
return Promise.resolve({
ok: true,
json: function () { return Promise.resolve({}); },
text: function () { return Promise.resolve(""); },
});
};
</script>
<script type="module">
import { InteractivePane } from "./shared/interactive.js";
const q = new URLSearchParams(location.search);
if (q.get("theme") === "light")
document.documentElement.dataset.theme = "light";
const messages = document.getElementById("messages");
try {
"""
+ PANE_STUB_JS
+ """
const ev = (e) => pane.handleEvent(e);
// ?recall=1: exercise the RECALL path — replayHistory rebuilding the
// card from the /history `agent_steps` overlay (a reload / reopen while
// the ws is still in memory), as opposed to the live SSE path below.
const recall = q.get("recall") === "1";
if (recall) {
pane.replayHistory([
{ role: "user", content: "Find all call sites of resolve_alias and summarize them" },
{ role: "assistant", tool_calls: [{
name: "task_agent", id: "task1",
arguments: JSON.stringify({ prompt: "Find call sites of resolve_alias" }),
agent_steps: [
{ id: "task1::c1", name: "search", arguments: JSON.stringify({ query: "resolve_alias" }), output: "12 matches across 4 files", is_error: false },
{ id: "task1::c2", name: "read_file", arguments: JSON.stringify({ path: "core/registry.py" }), output: "4.1 KB read", is_error: false },
{ id: "task1::c3", name: "bash", arguments: JSON.stringify({ command: "pytest -k registry" }), output: "12 passed in 1.2s", is_error: false },
{ id: "task1::c4", name: "notify", arguments: JSON.stringify({ channel: "#eng", message: "post summary" }), output: "posted to #eng", is_error: false },
],
}] },
{ role: "tool", tool_call_id: "task1", content: "resolve_alias has 4 call sites (registry.py:120, session.py:12200, model_registry.py:88, eval.py:54); all pass a validated alias before use." },
]);
} else if (q.get("race") === "1") {
// ?race=1: reproduce the parallel-pool ordering window — each
// sub-tool's tool_pending is emitted exactly once (as in production)
// but AHEAD of the task_agent row paint, as happens when a pooled
// sub-agent's SSE event is handled before its parent row commits.
// The orphan buffer must hold them and nest them when the parent row
// lands; pre-fix they escaped to top-level rows and the card came up
// short (steps < 4 -> TASKAGENT-FAILED), so this can't screenshot
// green without the fix.
const raceTask = {
call_id: "task1", func_name: "task_agent",
header: 'task_agent: "Find all call sites of resolve_alias and summarize them"',
needs_approval: false,
};
const childPending = (cid, fn, header) =>
ev({ type: "tool_pending", items: [{ call_id: cid, parent_call_id: "task1", func_name: fn, header: header, needs_approval: false }] });
// a) Orphan child pendings arrive first — no parent row yet.
childPending("task1::c1", "search", 'search: "resolve_alias"');
childPending("task1::c2", "read_file", "read_file: core/registry.py");
childPending("task1::c3", "bash", "pytest -k registry");
childPending("task1::c4", "notify", "notify: post summary to #eng");
// b) Parent task_agent row paints (pending -> resolved): must flush the
// buffered orphans into the card AND survive the upgrade rebuild.
ev({ type: "tool_pending", items: [raceTask] });
ev({ type: "tool_info", items: [Object.assign({ auto_approved: false }, raceTask)] });
// c) Results + a streamed chunk follow, nesting into the flushed rows.
ev({ type: "tool_result", call_id: "task1::c1", parent_call_id: "task1", name: "search", output: "12 matches across 4 files" });
ev({ type: "tool_result", call_id: "task1::c2", parent_call_id: "task1", name: "read_file", output: "4.1 KB read" });
ev({ type: "tool_output_chunk", call_id: "task1::c3", parent_call_id: "task1", chunk: "collected 12 items ... " });
ev({ type: "tool_result", call_id: "task1::c3", parent_call_id: "task1", name: "bash", output: "12 passed in 1.2s" });
ev({ type: "tool_result", call_id: "task1::c4", parent_call_id: "task1", name: "notify", output: "posted to #eng" });
ev({ type: "tool_result", call_id: "task1", name: "task_agent", output: "resolve_alias has 4 call sites (registry.py:120, session.py:12200, model_registry.py:88, eval.py:54); all pass a validated alias before use." });
} else if (q.get("orphan") === "1") {
// ?orphan=1: the SAFETY VALVE — child steps whose task_agent row
// NEVER paints (an id-correlation mismatch, or an agent aborted
// before its row painted). They must not vanish: after the grace
// window the buffer escapes them to visible top-level rows (the
// pre-buffer behaviour) rather than holding them forever. The parent
// task_agent row is deliberately never emitted here.
const orphanPending = (cid, fn, header) =>
ev({ type: "tool_pending", items: [{ call_id: cid, parent_call_id: "task1", func_name: fn, header: header, needs_approval: false }] });
orphanPending("task1::c1", "search", 'search: "resolve_alias"');
orphanPending("task1::c2", "read_file", "read_file: core/registry.py");
orphanPending("task1::c3", "bash", "pytest -k registry");
} else {
// 1. Parent paints the task_agent call (a top-level tool row).
const taskItem = {
call_id: "task1", func_name: "task_agent",
header: 'task_agent: "Find all call sites of resolve_alias and summarize them"',
needs_approval: false,
};
// ?parallel=1 puts the task_agent in a 2-tool parallel batch so the
// nested-step rail-bleed fix can be verified against the rail rules.
const parentItems = q.get("parallel") === "1"
? [taskItem, { call_id: "sib1", func_name: "bash", header: "git status", needs_approval: false }]
: [taskItem];
ev({ type: "tool_pending", items: parentItems });
ev({ type: "tool_info", items: parentItems.map((it) => Object.assign({ auto_approved: false }, it)) });
if (parentItems.length > 1)
ev({ type: "tool_result", call_id: "sib1", name: "bash", output: "clean" });
// 2. Sub-agent steps tagged parent_call_id="task1" — exercises routing.
function stepRow(cid, fn, header, result) {
ev({ type: "tool_pending", items: [{ call_id: cid, parent_call_id: "task1", func_name: fn, header: header, needs_approval: false }] });
if (result != null)
ev({ type: "tool_result", call_id: cid, parent_call_id: "task1", name: fn, output: result });
}
stepRow("task1::c1", "search", 'search: "resolve_alias"', "12 matches across 4 files");
stepRow("task1::c2", "read_file", "read_file: core/registry.py", "4.1 KB read");
ev({ type: "tool_pending", items: [{ call_id: "task1::c3", parent_call_id: "task1", func_name: "bash", header: "pytest -k registry", needs_approval: false }] });
ev({ type: "tool_output_chunk", call_id: "task1::c3", parent_call_id: "task1", chunk: "collected 12 items ... " });
ev({ type: "tool_result", call_id: "task1::c3", parent_call_id: "task1", name: "bash", output: "12 passed in 1.2s" });
// 4th step. Default: a nested sub-tool approval (notify is not
// auto-approved) — the pane must auto-expand the collapse-by-default
// card so the blocking prompt is visible. ?collapsed=1: a plain
// completed step instead, so nothing forces the card open and the
// screenshot shows the natural collapsed state (the common case).
if (q.get("collapsed") === "1") {
stepRow("task1::c4", "notify", "notify: post summary to #eng", "posted to #eng");
} else {
ev({ type: "approve_request", judge_pending: false, items: [{ call_id: "task1::c4", parent_call_id: "task1", func_name: "notify", header: "notify: post summary to #eng", needs_approval: true }] });
}
// 3. The task agent's own synthesis, rendered below the card.
ev({ type: "tool_result", call_id: "task1", name: "task_agent", output: "resolve_alias has 4 call sites (registry.py:120, session.py:12200, model_registry.py:88, eval.py:54); all pass a validated alias before use." });
}
// ?expand=1: open every card so a screenshot shows the nested steps
// (cards collapse by default; recall has no approval to auto-expand).
if (q.get("expand") === "1") {
document.querySelectorAll(".conv-agent").forEach(function (c) {
c.dataset.collapsed = "false";
const t = c.querySelector(".conv-agent-toggle");
if (t) t.setAttribute("aria-expanded", "true");
});
}
// Loud failure — broken routing must not screenshot green.
const orphanMode = q.get("orphan") === "1";
setTimeout(function () {
if (orphanMode) {
// The parent never painted; after the grace window the buffered
// steps must have ESCAPED to visible top-level rows, not vanished.
const escaped = document.querySelectorAll('.conv-batch .conv-row[data-call-id^="task1::"]').length;
const leaked = document.querySelector('.conv-row[data-call-id="task1"] .conv-agent');
document.title = escaped >= 3 && !leaked
? "TASKAGENT-ORPHANS-ESCAPED-" + escaped
: "TASKAGENT-FAILED-escaped" + escaped + "-card" + (leaked ? 1 : 0);
return;
}
const row = document.querySelector('.conv-row[data-call-id="task1"]');
const card = row && row.querySelector(".conv-agent");
const steps = card ? card.querySelectorAll(".conv-agent-body .conv-row").length : 0;
const hasResult = !!(row && /call sites/.test(row.textContent || ""));
document.title = card && steps >= 4 && hasResult
? "TASKAGENT-READY-" + steps
: "TASKAGENT-FAILED-card" + (card ? 1 : 0) + "-steps" + steps + "-result" + (hasResult ? 1 : 0);
}, orphanMode ? 900 : 300);
} catch (e) {
messages.textContent = "HARNESS ERROR: " + e.message + "\\n" + (e.stack || "");
document.title = "TASKAGENT-ERROR";
}
</script>
</body>
</html>
"""
)
# --------------------------------------------------------------------------
# Copy harness — the copy-to-clipboard affordances over the REAL pane. The
# bubbles come from the REAL replayHistory / handleEvent paths so the copy
# sources are the ones production stashes (_copySource, the mermaid / table
# data attributes), and the probes drive the REAL buttons and key path and
# compare what landed on the (stubbed) clipboard byte-exact against the
# source.
# --------------------------------------------------------------------------
COPY_TEMPLATE = (
"""<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>copy livepass</title>
<link rel="stylesheet" href="shared/base.css" />
<link rel="stylesheet" href="shared/ui-base.css" />
<link rel="stylesheet" href="shared/chat.css" />
<link rel="stylesheet" href="shared/conversation.css" />
<link rel="stylesheet" href="shared/cards.css" />
<link rel="stylesheet" href="shared/interactive.css" />
<style>
/* Harness-only framing (NOT under review) — a plausible pane context. */
body {
padding: 24px; margin: 0; background: var(--bg); color: var(--ink);
font-family: var(--font-sans, system-ui, sans-serif);
}
.demo-frame { max-width: 720px; margin: 0 auto; }
.demo-label {
font: 11px var(--font-mono, monospace); color: var(--ink-3);
text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 8px;
}
</style>
</head>
<body>
<div class="demo-frame">
<div class="demo-label">conversation — copy affordances (real InteractivePane)</div>
<div class="messages" id="messages"></div>
</div>
<script>
window.toast = { error: function (m) { console.log("toast:", m); } };
window.authFetch = function () {
return Promise.resolve({
ok: true,
json: function () { return Promise.resolve({}); },
text: function () { return Promise.resolve(""); },
});
};
// Deterministic clipboard: record instead of writing. localhost is a
// secure context so copyTextToClipboard takes the async-API branch and
// hits this stub; force isSecureContext for any odd serving setup.
window.__copied = [];
try {
Object.defineProperty(window, "isSecureContext", { value: true });
} catch (e) { /* already true */ }
try {
Object.defineProperty(navigator, "clipboard", {
value: {
writeText: function (t) {
window.__copied.push(t);
return Promise.resolve();
},
},
configurable: true,
});
} catch (e) {
document.title = "COPY-FAILED-clipboard-stub";
}
</script>
<script type="module">
import { InteractivePane } from "./shared/interactive.js";
const q = new URLSearchParams(location.search);
if (q.get("theme") === "light")
document.documentElement.dataset.theme = "light";
const FENCE_SRC = 'def stash(depth):\\n total = 0\\n for k in range(depth):\\n total += k\\n return total';
const TABLE_SRC = '| node | state |\\n|---|:--:|\\n| flat | idle |\\n| blck | busy |';
const MERMAID_SRC = 'graph TD\\n A --> B\\n B --> C';
const MD_ONE =
'First reply with a fence and a table.\\n\\n' +
'```python\\n' + FENCE_SRC + '\\n```\\n\\n' +
TABLE_SRC + '\\n\\nTrailing prose under the table.';
const MD_TWO =
'Second reply with a diagram.\\n\\n' +
'```mermaid\\n' + MERMAID_SRC + '\\n```\\n\\n' +
'And `inline code` after it.';
const MD_LIVE =
'Streamed reply: the **live** turn, so the retry holder lands here.';
const messages = document.getElementById("messages");
const fail = (r) => { document.title = "COPY-FAILED-" + r; };
try {
"""
+ PANE_STUB_JS
+ """
pane.replayHistory([
{ role: "user", content: "Show me the stash helper and the node table." },
{ role: "assistant", content: MD_ONE },
{ role: "user", content: "Now the flow as a diagram, please." },
{ role: "assistant", content: MD_TWO },
]);
// A live streamed turn on top — the retry holder must land on this
// bubble WITHOUT stripping its (or any) copy button.
pane.handleEvent({ type: "state_change", state: "running" });
for (let k = 0; k < MD_LIVE.length; k += 16)
pane.handleEvent({ type: "content", text: MD_LIVE.slice(k, k + 16) });
pane.handleEvent({ type: "stream_end" });
pane.handleEvent({ type: "state_change", state: "idle" });
const hover = (el) =>
el.dispatchEvent(new MouseEvent("mouseover", { bubbles: true }));
const fabEl = () => document.querySelector(".block-copy-btn");
// Let the streamed bubble's rAF render + retry attach settle.
setTimeout(async () => {
try {
const bubbles = messages.querySelectorAll(".msg.assistant");
const bars = messages.querySelectorAll(
".msg.assistant .msg-actions .msg-copy-btn",
);
if (bubbles.length !== 3) return fail("bubbles" + bubbles.length);
if (bars.length !== 3) return fail("bars" + bars.length);
const last = bubbles[bubbles.length - 1];
if (!last.querySelector(".msg-retry-btn"))
return fail("no-retry-on-holder");
if (!last.querySelector(".msg-copy-btn"))
return fail("holder-lost-copy");
// Block probes: hover reveals the floating button; a click must
// land the byte-exact SOURCE on the clipboard.
const probes = [
[messages.querySelector(".msg.assistant pre"), FENCE_SRC, "fence"],
[messages.querySelector(".table-wrap"), TABLE_SRC, "table"],
[messages.querySelector(".mermaid-container"), MERMAID_SRC, "mermaid"],
];
// &bare=1 — diagnostic state: no probe clicks, no repositioning;
// one hover on the fence and stop. Splits "the probe cycle
// corrupts the button's paint" from "it never paints here".
if (q.get("bare") === "1") {
hover(probes[0][0]);
document.title = "COPY-BARE";
return;
}
// &kbd=1 — the keyboard path: Enter on a FOCUSED block copies
// that block's source directly. Blocks are focusable (tabindex=0
// from the fence / table / mermaid renders), the outcome flashes
// on the block itself, and the floating button — pointer-only —
// must stay out of it entirely (never created, never revealed).
if (q.get("kbd") === "1") {
const tw = messages.querySelector(".table-wrap");
if (!tw) return fail("kbd-no-block");
tw.focus();
const focused = document.activeElement === tw;
tw.dispatchEvent(
new KeyboardEvent("keydown", { key: "Enter", bubbles: true }),
);
await new Promise((r) => setTimeout(r, 0));
const copied =
window.__copied[window.__copied.length - 1] === TABLE_SRC;
const flashed = tw.classList.contains("is-copied");
const fabStaysOut =
!fabEl() || !fabEl().classList.contains("is-visible");
document.title =
focused && copied && flashed && fabStaysOut
? "COPY-KBD-READY"
: "COPY-KBD-FAILED-" +
[
focused ? "" : "focus",
copied ? "" : "copy",
flashed ? "" : "flash",
fabStaysOut ? "" : "fab",
]
.filter(Boolean)
.join("-");
return;
}
// &flash=1 — the VISUAL state, screenshot-only: skip the probes so
// the fence hover is the floating button's FIRST show. Returning
// the button to an already-visited position stops it PAINTING in
// headless captures (visible + hit-testable, no pixels — a stale
// compositor tile; bisected via &stepmax). Function and pixels
// are therefore split: the probe run (no flash) is the verdict,
// this state is the picture.
if (q.get("flash") === "1") {
bars[bars.length - 1].focus();
hover(probes[0][0]);
const fab = fabEl();
if (!fab) return fail("no-fab-visual");
fab.classList.add("is-copied");
fab.title = "Copied";
// Freeze: the capture pipeline synthesizes a pointer event
// outside the block at screenshot time, which would hide the
// button (correct in production). Capture-phase stops starve
// the module's delegated listeners for the capture.
for (const t of ["mouseover", "scroll"])
document.addEventListener(t, (e) => e.stopPropagation(), true);
document.title = "COPY-VISUAL";
return;
}
// &stepmax=N — diagnostic: stop after the Nth interaction (hovers
// and clicks count) and stamp COPY-STEP-N, so a paint regression
// can be bisected to the interaction that triggers it.
let step = 0;
const stepMax = parseInt(q.get("stepmax") || "999", 10);
const gate = () => {
step += 1;
if (step > stepMax) {
document.title = "COPY-STEP-" + (step - 1);
throw { __stop: true };
}
};
let done = 0;
for (const [el, want, name] of probes) {
if (!el) return fail("no-" + name);
gate();
hover(el);
const fab = fabEl();
if (!fab || !fab.classList.contains("is-visible"))
return fail("fab-hidden-" + name);
gate();
fab.click();
await new Promise((r) => setTimeout(r, 0));
const got = window.__copied[window.__copied.length - 1];
if (got !== want) {
console.log("copy mismatch", name, JSON.stringify(got));
return fail("source-" + name);
}
done += 1;
}
// Bubble probe: the whole raw markdown, fences and pipes intact.
gate();
bars[0].click();
await new Promise((r) => setTimeout(r, 0));
if (window.__copied[window.__copied.length - 1] !== MD_ONE)
return fail("bubble-source");
document.title = "COPY-READY-" + bars.length + "-" + done;
} catch (e) {
if (!(e && e.__stop)) {
console.log("copy harness error", e);
fail("error");
}
}
}, 400);
} catch (e) {
messages.textContent = "HARNESS ERROR: " + e.message;
fail("error");
}
</script>
</body>
</html>
"""
)
# --------------------------------------------------------------------------
# Perf harness — long-session performance baseline for the interactive pane.
# Mounts the REAL InteractivePane (production DOM via _createDOM, production
# CSS chain) in a fixed-height mount so .pane-messages has REAL scroll
# geometry — the forced-layout costs under measurement (isNearBottom /
# scrollToBottom / chunk-append scroll pins) only exist against live layout,
# which is why nothing here stubs scroll/geometry the way the task-agent
# harness does. All timing is real time (see MEASUREMENT RULES in the module
# docstring). Workload is deterministic (seeded LCG) so runs are comparable.
# --------------------------------------------------------------------------
PERF_TEMPLATE = """<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>perf livepass</title>
<link rel="stylesheet" href="shared/base.css" />
<link rel="stylesheet" href="shared/ui-base.css" />
<link rel="stylesheet" href="shared/chat.css" />
<link rel="stylesheet" href="shared/conversation.css" />
<link rel="stylesheet" href="shared/cards.css" />
<link rel="stylesheet" href="static/style.css" />
<link rel="stylesheet" href="shared/interactive.css" />
<style>
/* Harness-only framing (NOT under review): a fixed-height mount so the
pane's .pane-messages scroller has real production geometry. */
body { margin: 0; background: var(--bg); color: var(--fg); }
#mount { height: 720px; width: 920px; display: flex; overflow: hidden; }
#mount > .pane { flex: 1; display: flex; flex-direction: column; min-height: 0; }
#perf-json { font: 11px monospace; white-space: pre-wrap; padding: 12px; }
</style>
</head>
<body>
<div id="mount"></div>
<pre id="perf-json">running…</pre>
<script>
window.toast = { error: function (m) { console.log("toast:", m); } };
// Collect every uncaught error/rejection into the report — a perf run
// that silently swallowed a pipeline exception must not read as clean.
window.__perfErrors = [];
window.onerror = function (msg, src, line) {
window.__perfErrors.push(String(msg) + " @ " + (src || "?") + ":" + (line || 0));
};
window.addEventListener("unhandledrejection", function (e) {
window.__perfErrors.push("unhandledrejection: " + String(e && e.reason));
});
window.__perfFetch = function () {
return Promise.resolve({
ok: true, status: 200,
json: function () { return Promise.resolve({}); },
text: function () { return Promise.resolve(""); },
});
};
window.authFetch = window.__perfFetch;
</script>
<script type="module">
import { InteractivePane } from "./shared/interactive.js";
// auth.js's legacy window bridge clobbers window.authFetch at module
// import time — reinstate the stub now imports have evaluated (same
// dance as the attachments harness).
window.authFetch = window.__perfFetch;
const q = new URLSearchParams(location.search);
const N = parseInt(q.get("n") || "1000", 10);
const TURNS = parseInt(q.get("turns") || "20", 10);
const CHUNKS = parseInt(q.get("chunks") || "300", 10);
const CYCLES = parseInt(q.get("cycles") || "3", 10);
const IDLE = parseInt(q.get("idle") || "20", 10);
// Long-task accounting across every phase (>50ms main-thread blocks).
const lt = { count: 0, total_ms: 0, max_ms: 0 };
try {
new PerformanceObserver(function (list) {
list.getEntries().forEach(function (e) {
lt.count += 1;
lt.total_ms += Math.round(e.duration);
lt.max_ms = Math.max(lt.max_ms, Math.round(e.duration));
});
}).observe({ type: "longtask", buffered: true });
} catch (e) { /* unsupported — longtasks stay zeroed */ }
// Deterministic workload (seeded LCG) so runs are comparable.
let _seed = 42;
function rnd() {
_seed = (_seed * 1664525 + 1013904223) >>> 0;
return _seed / 4294967296;
}
const WORDS = ("the retry loop grinds the dungeon server while the " +
"judge weighs verdicts and the coordinator shuffles children across " +
"nodes tokens accumulate compaction folds turns storage keeps the " +
"canon and the rail repaints").split(" ");
function sentence(w) {
const parts = [];
for (let i = 0; i < w; i++) parts.push(WORDS[(rnd() * WORDS.length) | 0]);
return parts.join(" ");
}
// Realistic assistant markdown: prose + list + fenced code (varying
// content so the hljs cache behaves as in production) + inline code.
function mdBody(i) {
return (
"Turn " + i + ": " + sentence(18) + ".\\n\\n" +
"- " + sentence(6) + "\\n- " + sentence(7) + "\\n\\n" +
"```python\\n" +
"def step_" + i + "(depth):\\n" +
" total = " + ((rnd() * 1000) | 0) + "\\n" +
" for k in range(depth):\\n" +
" total += k * " + (1 + ((rnd() * 9) | 0)) + "\\n" +
" return total\\n" +
"```\\n\\n" +
sentence(14) + " `inline_" + i + "` " + sentence(8) + "."
);
}
// History in the canonical projected wire shape replayHistory consumes
// (user / assistant content / assistant tool_calls / tool result), with
// periodic reasoning bubbles and task_agent cards (agent_steps overlay).
function buildHistory(n) {
const msgs = [];
let i = 0;
while (msgs.length < n) {
i += 1;
msgs.push({ role: "user", content: "Request " + i + ": " + sentence(10) + "?" });
if (msgs.length >= n) break;
if (i % 10 === 0) {
msgs.push({ role: "assistant", reasoning: sentence(40) + ".", content: mdBody(i) });
} else {
msgs.push({ role: "assistant", content: mdBody(i) });
}
if (msgs.length >= n) break;
const callId = "h" + i;
if (i % 8 === 0) {
msgs.push({ role: "assistant", tool_calls: [{
name: "task_agent", id: callId,
arguments: JSON.stringify({ prompt: "subtask " + i }),
agent_steps: [
{ id: callId + "::c1", name: "search",
arguments: JSON.stringify({ query: "q" + i }),
output: sentence(8), is_error: false },
{ id: callId + "::c2", name: "read_file",
arguments: JSON.stringify({ path: "core/f" + i + ".py" }),
output: sentence(6), is_error: false },
{ id: callId + "::c3", name: "bash",
arguments: JSON.stringify({ command: "pytest -k t" + i }),
output: sentence(7), is_error: false },
],
}] });
} else {
msgs.push({ role: "assistant", tool_calls: [{
name: "bash", id: callId,
arguments: JSON.stringify({ command: "grep -rn pattern_" + i + " src/" }),
}] });
}
if (msgs.length >= n) break;
msgs.push({ role: "tool", tool_call_id: callId,
content: "output " + i + ":\\n" + sentence(20) });
}
return msgs;
}
const tick = () => new Promise((r) => requestAnimationFrame(r));
// One live turn, production event mix: thinking indicator, reasoning
// deltas, content deltas (yield every few so streamingRender's internal
// rAF actually applies frames, as in a real token stream), stream_end,
// an auto-approved bash batch with streamed chunks, every 5th turn a
// task_agent card with routed children, then the idle edge.
async function stormTurn(pane, i) {
pane.handleEvent({ type: "state_change", state: "running" });
pane.handleEvent({ type: "thinking_start" });
const reason = sentence(50);
let d = 0;
for (let k = 0; k < reason.length; k += 20) {
pane.handleEvent({ type: "reasoning", text: reason.slice(k, k + 20) });
d += 1;
if (d % 4 === 3) await tick();
}
const body = mdBody(100000 + i);
d = 0;
for (let k = 0; k < body.length; k += 22) {
pane.handleEvent({ type: "content", text: body.slice(k, k + 22) });
d += 1;
if (d % 6 === 5) await tick();
}
pane.handleEvent({ type: "stream_end" });
const callId = "s" + i;
const item = { call_id: callId, func_name: "bash",
header: "bash: run step " + i, needs_approval: false };
pane.handleEvent({ type: "tool_pending", items: [item] });
pane.handleEvent({ type: "tool_info",
items: [Object.assign({ auto_approved: true }, item)] });
for (let k = 0; k < 24; k++) {
pane.handleEvent({ type: "tool_output_chunk", call_id: callId,
chunk: "line " + k + ": " + sentence(5) + "\\n" });
if (k % 6 === 5) await tick();
}
pane.handleEvent({ type: "tool_result", call_id: callId, name: "bash",
output: "done " + i + "\\n" + sentence(12) });
if (i % 5 === 4) {
const tid = "sa" + i;
const titem = { call_id: tid, func_name: "task_agent",
header: 'task_agent: "subtask ' + i + '"', needs_approval: false };
pane.handleEvent({ type: "tool_pending", items: [titem] });
pane.handleEvent({ type: "tool_info",
items: [Object.assign({ auto_approved: true }, titem)] });
for (let c = 1; c <= 3; c++) {
const cid = tid + "::c" + c;
pane.handleEvent({ type: "tool_pending", items: [{
call_id: cid, parent_call_id: tid, func_name: "search",
header: "search: q" + c, needs_approval: false }] });
pane.handleEvent({ type: "tool_result", call_id: cid,
parent_call_id: tid, name: "search", output: sentence(6) });
}
pane.handleEvent({ type: "tool_result", call_id: tid,
name: "task_agent", output: sentence(15) });
await tick();
}
pane.handleEvent({ type: "state_change", state: "idle" });
await tick();
}
function heapBytes() {
// --js-flags=--expose-gc makes this a real floor, not GC noise.
if (typeof window.gc === "function") {
try { window.gc(); window.gc(); } catch (e) { /* noop */ }
}
return (performance.memory && performance.memory.usedJSHeapSize) || null;
}
const report = {
n: N, turns: TURNS, chunks: CHUNKS, cycles: CYCLES, idle: IDLE,
// Echoed run token — the runner validates it so a straggler POST
// from a killed prior attempt can't be misattributed to this run.
run: q.get("run") || "",
errors: window.__perfErrors,
};
let phase = "mount";
try {
const pane = new InteractivePane("perf-ws");
document.getElementById("mount").appendChild(pane.el);
const msgs = buildHistory(N);
report.heap_start = heapBytes();
phase = "replay";
let t0 = performance.now();
pane.replayHistory(msgs);
report.replay_ms = Math.round(performance.now() - t0);
await tick();
report.nodes_after_replay = pane.messagesEl.querySelectorAll("*").length;
phase = "storm";
t0 = performance.now();
for (let i = 0; i < TURNS; i++) await stormTurn(pane, i);
report.storm_ms = Math.round(performance.now() - t0);
report.storm_ms_per_turn = Math.round(report.storm_ms / TURNS);
phase = "chunkstorm";
const ccItem = { call_id: "cc1", func_name: "bash",
header: "bash: tail -f build.log", needs_approval: false };
pane.handleEvent({ type: "tool_pending", items: [ccItem] });
pane.handleEvent({ type: "tool_info",
items: [Object.assign({ auto_approved: true }, ccItem)] });
t0 = performance.now();
for (let k = 0; k < CHUNKS; k++) {
pane.handleEvent({ type: "tool_output_chunk", call_id: "cc1",
chunk: "log line " + k + "\\n" });
if (k % 6 === 5) await tick();
}
report.chunk_ms = Math.round(performance.now() - t0);
pane.handleEvent({ type: "tool_result", call_id: "cc1", name: "bash",
output: "tail done" });
phase = "idlechurn";
t0 = performance.now();
for (let k = 0; k < IDLE; k++) {
pane.handleEvent({ type: "state_change", state: "running" });
pane.handleEvent({ type: "state_change", state: "idle" });
if (k % 4 === 3) await tick();
}
report.idle_ms = Math.round(performance.now() - t0);
// Leak probe: repeated full replays of the SAME history should
// converge to a flat heap/node/agent-card profile; monotonic growth
// here is retained-detached-DOM (the _agentCards class of bug).
phase = "replaycycles";
report.cycle_stats = [];
for (let c = 0; c < CYCLES; c++) {
t0 = performance.now();
pane.replayHistory(msgs);
const ms = Math.round(performance.now() - t0);
await tick();
report.cycle_stats.push({
replay_ms: ms,
heap: heapBytes(),
nodes: pane.messagesEl.querySelectorAll("*").length,
agent_cards: pane._agentCards ? pane._agentCards.size : 0,
});
}
report.heap_end = heapBytes();
report.longtasks = lt;
document.title = "PERF-READY-" + N;
} catch (e) {
window.__perfErrors.push(
"phase " + phase + ": " + (e && e.message ? e.message : String(e)),
);
report.failed_phase = phase;
report.longtasks = lt;
document.title = "PERF-FAILED-" + phase;
}
document.getElementById("perf-json").textContent =
JSON.stringify(report, null, 2);
if (q.get("post")) {
try {
await fetch("/perf/report", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(report),
});
} catch (e) { /* runner captures the timeout instead */ }
}
</script>
</body>
</html>
"""
# Fixture media for the attachments harness. image/pdf thumbnails and the
# audio clip load via element .src (NOT authFetch), so the --serve dev server
# answers those paths directly with representative bytes: a photo-like image,
# a document-page-like image for the PDF thumbnail, and a short WAV so the
# native <audio> control chrome renders against the constrained CSS height.
_FIXTURE_CACHE: dict[str, bytes] = {}
def _png_photo() -> bytes:
from io import BytesIO
from PIL import Image, ImageDraw
img = Image.new("RGB", (320, 320), (24, 27, 31))
d = ImageDraw.Draw(img)
for y in range(320): # warm vertical wash so object-fit crop is legible
t = y / 320
d.line([(0, y), (320, y)], fill=(int(20 + t * 60), int(18 + t * 40), int(26 + t * 70)))
d.ellipse([180, 36, 300, 156], fill=(229, 160, 66)) # amber "sun"
d.polygon([(0, 320), (130, 170), (250, 320)], fill=(38, 66, 58)) # hill
buf = BytesIO()
img.save(buf, "PNG")
return buf.getvalue()
def _png_page() -> bytes:
from io import BytesIO
from PIL import Image, ImageDraw
img = Image.new("RGB", (320, 414), (250, 250, 248)) # paper white, A4-ish
d = ImageDraw.Draw(img)
d.rectangle([0, 0, 320, 9], fill=(140, 94, 27)) # header rule
y = 30
for i, w in enumerate([260, 240, 280, 200, 250, 230, 270, 180, 255, 210, 240]):
shade = (40, 44, 54) if i == 0 else (150, 154, 164)
d.rectangle([28, y, 28 + w, y + 10], fill=shade)
y += 30
buf = BytesIO()
img.save(buf, "PNG")
return buf.getvalue()
def _wav() -> bytes:
import math
import struct
import wave
from io import BytesIO
buf = BytesIO()
frames = b"".join(
struct.pack("<h", int(2600 * math.sin(2 * math.pi * 440 * i / 8000))) for i in range(8000)
)
with wave.open(buf, "wb") as w:
w.setnchannels(1)
w.setsampwidth(2)
w.setframerate(8000)
w.writeframes(frames)
return buf.getvalue()
def _fixture_for(path: str) -> tuple[bytes, str] | None:
"""Map a media request path to (bytes, content-type), or None to fall through."""
if path.endswith("/thumbnail"):
key = "page" if "att-pdf" in path else "photo"
if key not in _FIXTURE_CACHE:
_FIXTURE_CACHE[key] = _png_page() if key == "page" else _png_photo()
return _FIXTURE_CACHE[key], "image/png"
if path.endswith("/content") and "att-audio" in path:
if "wav" not in _FIXTURE_CACHE:
_FIXTURE_CACHE["wav"] = _wav()
return _FIXTURE_CACHE["wav"], "audio/wav"
return None
def build(out: Path) -> None:
ui = out / "ui"
con = out / "console"
ui.mkdir(parents=True, exist_ok=True)
con.mkdir(parents=True, exist_ok=True)
symlink(ui / "shared", ROOT / "turnstone/shared_static")
symlink(ui / "static", ROOT / "turnstone/ui/static")
blocks = extract_dialogs(UI_INDEX)
# the coordinator batch dialog shares the cards.js builder — ride along
blocks += extract_dialogs(CONSOLE_INDEX, only_id="coord-delete-dialog")
(ui / "livepass.html").write_text(
inject(UI_TEMPLATE, "DIALOGS", "\n".join(blocks)), encoding="utf-8"
)
print(f"{ui}/livepass.html — {len(blocks)} dialogs")
symlink(con / "shared", ROOT / "turnstone/shared_static")
symlink(con / "console-static", ROOT / "turnstone/console/static")
frag = extract_admin_fragment()
# Dialog-tier markup living OUTSIDE #admin-layout (confirm, install,
# coord-delete) would otherwise be silently absent — and ?open=confirm
# would screenshot a dialog-less page while the gate stayed green.
riders = [b for b in extract_dialogs(CONSOLE_INDEX) if b not in frag]
page = inject(CONSOLE_TEMPLATE, "FRAGMENT", frag)
page = inject(page, "RIDERS", "\n".join(riders))
(con / "livepass.html").write_text(page, encoding="utf-8")
print(f"{con}/livepass.html — admin fragment + {len(riders)} rider dialogs")
sh = out / "shell"
sh.mkdir(parents=True, exist_ok=True)
symlink(sh / "shared", ROOT / "turnstone/shared_static")
symlink(sh / "static", ROOT / "turnstone/console/static")
(sh / "livepass.html").write_text(SHELL_TEMPLATE, encoding="utf-8")
print(f"{sh}/livepass.html — split-view shell surface")
att = out / "attachments"
att.mkdir(parents=True, exist_ok=True)
symlink(att / "shared", ROOT / "turnstone/shared_static")
(att / "livepass.html").write_text(ATTACH_TEMPLATE, encoding="utf-8")
print(f"{att}/livepass.html — composer chips + message attachment pills")
ta = out / "taskagent"
ta.mkdir(parents=True, exist_ok=True)
symlink(ta / "shared", ROOT / "turnstone/shared_static")
(ta / "livepass.html").write_text(TASKAGENT_TEMPLATE, encoding="utf-8")
print(f"{ta}/livepass.html — task_agent card (real Pane.handleEvent routing)")
cp = out / "copy"
cp.mkdir(parents=True, exist_ok=True)
symlink(cp / "shared", ROOT / "turnstone/shared_static")
(cp / "livepass.html").write_text(COPY_TEMPLATE, encoding="utf-8")
print(f"{cp}/livepass.html — copy affordances (bubble bars + block button)")
pf = out / "perf"
pf.mkdir(parents=True, exist_ok=True)
symlink(pf / "shared", ROOT / "turnstone/shared_static")
symlink(pf / "static", ROOT / "turnstone/ui/static")
(pf / "livepass.html").write_text(PERF_TEMPLATE, encoding="utf-8")
print(f"{pf}/livepass.html — long-session perf baseline (real InteractivePane)")
pb = out / "proxybrand"
pb.mkdir(parents=True, exist_ok=True)
symlink(pb / "shared", ROOT / "turnstone/shared_static")
symlink(pb / "static", ROOT / "turnstone/ui/static")
shim = "<script>" + extract_proxy_shim() + "</script>"
(pb / "frame.html").write_text(
inject(PROXYBRAND_FRAME_TEMPLATE, "SHIM", shim), encoding="utf-8"
)
(pb / "livepass.html").write_text(PROXYBRAND_HOST_TEMPLATE, encoding="utf-8")
print(f"{pb}/livepass.html — back-to-console brand (real shell.js + real shim)")
class _PerfStore:
"""Rendezvous for the perf page's POSTed JSON report."""
def __init__(self) -> None:
import threading
self.event = threading.Event()
self.data: dict[str, object] | None = None
class _HarnessHandler(http.server.SimpleHTTPRequestHandler):
"""Static file server + attachment media fixtures + perf-report sink.
The attachments harness loads thumbnails + the audio clip via element
.src; serve those from generated fixtures, fall through to static for
everything else. The perf harness POSTs its JSON report to /perf/report
when driven with ?post=1 — the --perf runner blocks on ``perf_store``.
"""
perf_store: _PerfStore | None = None
quiet = False
def do_GET(self) -> None: # noqa: N802 (stdlib casing)
blob = _fixture_for(self.path.split("?")[0])
if blob is None:
super().do_GET()
return
data, ctype = blob
self.send_response(200)
self.send_header("Content-Type", ctype)
self.send_header("Content-Length", str(len(data)))
self.end_headers()
self.wfile.write(data)
def do_POST(self) -> None: # noqa: N802 (stdlib casing)
store = type(self).perf_store
if self.path.split("?")[0] != "/perf/report" or store is None:
self.send_error(404)
return
length = int(self.headers.get("Content-Length") or 0)
body = self.rfile.read(length)
try:
store.data = json.loads(body)
except ValueError:
store.data = {"errors": ["runner: unparseable report body"]}
store.event.set()
self.send_response(204)
self.end_headers()
def log_message(self, format: str, *args: object) -> None: # noqa: A002 (stdlib signature)
if not type(self).quiet:
super().log_message(format, *args)
def _find_chrome() -> str | None:
for name in ("google-chrome", "google-chrome-stable", "chromium", "chromium-browser"):
path = shutil.which(name)
if path:
return path
return None
def _await_report(
store: _PerfStore, proc: subprocess.Popen[bytes], run_token: str, timeout: float
) -> dict[str, object] | None:
"""Wait for THIS attempt's report: validated by run token, bailing early
when Chrome exits without reporting (the sandbox-startup-failure case —
waiting the full timeout there cost minutes before the --no-sandbox
fallback could even start). A straggler POST from a previous attempt
(its handler thread can complete after the next attempt cleared the
store) carries the wrong token and is discarded instead of being
misattributed to this run."""
deadline = time.monotonic() + timeout
proc_exited_at: float | None = None
while time.monotonic() < deadline:
if store.event.wait(0.5):
data = store.data
store.event.clear()
store.data = None
if isinstance(data, dict) and data.get("run") == run_token:
return data
continue # stale straggler from a prior attempt — keep waiting
if proc.poll() is not None:
now = time.monotonic()
if proc_exited_at is None:
proc_exited_at = now # grace: an in-flight POST may still land
elif now - proc_exited_at > 3.0:
return None # exited without reporting — try the next attempt
return None
def _perf_run_one(
chrome: str, out: Path, port: int, store: _PerfStore, n: int, turns: int, timeout: float
) -> dict[str, object] | None:
"""One headless-Chrome perf pass; returns the page's report or None."""
base_flags = [
"--headless=new",
"--disable-gpu",
"--hide-scrollbars",
"--window-size=1440,900",
"--no-first-run",
"--disable-extensions",
# Throttled timers/rAF in a backgrounded renderer would corrupt the
# measurement — pin the renderer foreground-scheduled.
"--disable-background-timer-throttling",
"--disable-renderer-backgrounding",
"--disable-backgrounding-occluded-windows",
# Stable, real heap numbers (heapBytes() calls window.gc() first).
"--js-flags=--expose-gc",
"--enable-precise-memory-info",
]
for attempt, extra in enumerate(
([], ["--no-sandbox"]) # sandboxed first, container fallback second
):
run_token = f"n{n}-a{attempt}-{uuid.uuid4().hex[:8]}"
url = (
f"http://127.0.0.1:{port}/perf/livepass.html?n={n}&turns={turns}&post=1&run={run_token}"
)
store.event.clear()
store.data = None
profile = out / f".chrome-perf-{n}"
proc = subprocess.Popen(
[chrome, *base_flags, *extra, f"--user-data-dir={profile}", url],
stdout=subprocess.DEVNULL,
stderr=subprocess.DEVNULL,
)
try:
report = _await_report(store, proc, run_token, timeout)
if report is not None:
return report
finally:
if proc.poll() is None:
proc.terminate()
try:
proc.wait(10)
except subprocess.TimeoutExpired:
proc.kill()
return None
def run_perf(out: Path, sizes: list[int], turns: int, timeout: float) -> bool:
"""Build, serve, and run the perf page once per history size; print a table."""
import functools
import threading
chrome = _find_chrome()
if chrome is None:
print("perf: no chrome/chromium binary found on PATH")
return False
store = _PerfStore()
_HarnessHandler.perf_store = store
_HarnessHandler.quiet = True
handler = functools.partial(_HarnessHandler, directory=str(out))
server = http.server.ThreadingHTTPServer(("127.0.0.1", 0), handler)
port = server.server_address[1]
threading.Thread(target=server.serve_forever, daemon=True).start()
reports: dict[int, dict[str, object]] = {}
try:
for n in sizes:
print(f"perf: n={n} turns={turns} … ", end="", flush=True)
report = _perf_run_one(chrome, out, port, store, n, turns, timeout)
if report is None:
print("FAILED (no report — timeout or chrome startup failure)")
continue
failed = report.get("failed_phase")
errors = report.get("errors") or []
status = f"failed in {failed}" if failed else "ok"
print(f"{status} ({len(errors) if isinstance(errors, list) else '?'} page errors)")
reports[n] = report
(out / f"perf-report-n{n}.json").write_text(
json.dumps(report, indent=2), encoding="utf-8"
)
finally:
server.shutdown()
_HarnessHandler.perf_store = None
_HarnessHandler.quiet = False
if not reports:
return False
_print_perf_table(reports)
print(f"\nraw reports: {out}/perf-report-n*.json")
return True
def _print_perf_table(reports: dict[int, dict[str, object]]) -> None:
sizes = sorted(reports)
def cell(n: int, key: str) -> str:
value = reports[n].get(key)
return "—" if value is None else str(value)
def mb(value: object) -> str:
return f"{value / 1048576:.1f}MB" if isinstance(value, (int, float)) else "—"
rows: list[tuple[str, list[str]]] = [
("replay_ms (full history build)", [cell(n, "replay_ms") for n in sizes]),
("nodes after replay", [cell(n, "nodes_after_replay") for n in sizes]),
("storm ms/turn (live mix)", [cell(n, "storm_ms_per_turn") for n in sizes]),
("chunk_ms (output chunks)", [cell(n, "chunk_ms") for n in sizes]),
("idle_ms (busy/idle churn)", [cell(n, "idle_ms") for n in sizes]),
("heap start → end", []),
("longtasks count/max_ms", []),
("replay cycles ms", []),
("agent_cards after cycles", []),
]
for n in sizes:
rep = reports[n]
rows[5][1].append(f"{mb(rep.get('heap_start'))} → {mb(rep.get('heap_end'))}")
lt = rep.get("longtasks")
rows[6][1].append(f"{lt.get('count')}/{lt.get('max_ms')}" if isinstance(lt, dict) else "—")
cycles = rep.get("cycle_stats")
if isinstance(cycles, list) and cycles:
rows[7][1].append(",".join(str(c.get("replay_ms", "?")) for c in cycles))
rows[8][1].append(str(cycles[-1].get("agent_cards", "?")))
else:
rows[7][1].append("—")
rows[8][1].append("—")
label_w = max(len(label) for label, _ in rows)
col_w = max(14, *(len(f"n={n}") for n in sizes))
header = " " * label_w + " " + " ".join(f"n={n}".rjust(col_w) for n in sizes)
print("\n" + header)
for label, cells in rows:
print(label.ljust(label_w) + " " + " ".join(c.rjust(col_w) for c in cells))
def main() -> None:
ap = argparse.ArgumentParser(description=__doc__.splitlines()[0])
ap.add_argument("--out", type=Path, default=Path("/tmp/livepass"))
ap.add_argument("--serve", type=int, metavar="PORT")
ap.add_argument("--perf", action="store_true", help="run the perf baseline and exit")
ap.add_argument(
"--perf-n",
default="300,3000",
help="comma-separated history sizes for --perf (default: 300,3000)",
)
ap.add_argument("--perf-turns", type=int, default=20)
ap.add_argument("--perf-timeout", type=float, default=420.0)
args = ap.parse_args()
build(args.out)
if args.perf:
sizes = [int(s) for s in str(args.perf_n).split(",") if s.strip()]
raise SystemExit(0 if run_perf(args.out, sizes, args.perf_turns, args.perf_timeout) else 1)
if args.serve:
import functools
handler = functools.partial(_HarnessHandler, directory=str(args.out))
print(f"serving {args.out} on http://localhost:{args.serve}/ — Ctrl+C stops")
http.server.ThreadingHTTPServer(("127.0.0.1", args.serve), handler).serve_forever()
if __name__ == "__main__":
main()
Reference in New Issue View Git Blame Copy Permalink