Loading files
This file is pinned to the selected release. Download the original to open it in your design tool.
/**
* Self-contained local dashboard for the machine-adapter, served by the hook server on
* 127.0.0.1:<port>. Vanilla HTML/CSS/JS (no framework, no build) — polls GET /api/status and drives
* the loopback management API (approve pairing, unpair, stop). Scoped to LOCAL-only concerns (adapter
* health, machine fingerprint, local pairings); it never renders chat/transcripts — that's the cloud
* web (WEB_URL/machine/<agentId>).
*
* CSRF: mutating calls send the `x-adapter-local: 1` header, which a cross-origin page cannot set on a
* simple request (a custom header forces a CORS preflight the server never allows) — so only this
* same-origin page (and the CLI) can trigger actions.
*/
export const LOCAL_WEB_HTML = /* html */ `<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>harness</title>
<style>
:root { color-scheme: dark; --bg:#0e1116; --card:#161b22; --line:#232a34; --fg:#e6edf3; --mut:#8b949e; --faint:#6e7681; --grn:#3fb950; --red:#e5534b; --yel:#d29922; --acc:#4c8bf5; --mono: ui-monospace, SFMono-Regular, Menlo, monospace; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:14px/1.5 -apple-system, system-ui, sans-serif; }
a { color:var(--acc); text-decoration:none; } a:hover { text-decoration:underline; }
.wrap { max-width:960px; margin:0 auto; padding:20px 16px 48px; }
.bar { display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px 16px; }
.brand { font-weight:600; }
.dot { width:9px; height:9px; border-radius:50%; display:inline-block; vertical-align:middle; }
.on { background:var(--grn); } .off { background:var(--red); } .idle { background:var(--faint); }
.mut { color:var(--mut); } .mono { font-family:var(--mono); }
.fp { font-family:var(--mono); letter-spacing:.04em; }
.pill { display:inline-block; border:1px solid var(--line); border-radius:999px; padding:1px 7px; font-size:11px; color:var(--mut); margin-right:6px; text-transform:uppercase; }
.spacer { flex:1; }
.btn { background:none; border:1px solid var(--line); color:var(--fg); border-radius:8px; padding:5px 12px; font-size:12.5px; cursor:pointer; }
.btn:hover { border-color:var(--acc); }
.btn.danger:hover { border-color:var(--red); color:var(--red); }
.btn.primary { background:var(--acc); border-color:var(--acc); color:#fff; font-weight:600; }
.btn.primary:hover { filter:brightness(1.08); }
.btn:disabled { opacity:.6; cursor:default; }
/* approve modal */
.modal { position:fixed; inset:0; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; z-index:50; padding:16px; }
.modalCard { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:22px 22px 18px; max-width:440px; width:100%; box-shadow:0 12px 40px rgba(0,0,0,.5); }
.mTitle { font-size:17px; font-weight:600; }
.mSub { color:var(--mut); font-size:13px; margin-top:8px; line-height:1.5; }
.mCodeLabel { font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); margin-top:16px; }
.mCode { font-family:var(--mono); font-size:30px; letter-spacing:.22em; font-weight:700; margin-top:4px; }
.mNote { font-size:12px; color:var(--mut); margin-top:6px; }
.mInput { font-family:var(--mono); background:var(--bg); border:1px solid var(--line); color:var(--fg); border-radius:8px; padding:8px 12px; letter-spacing:.2em; text-transform:uppercase; width:150px; margin-top:6px; }
.mFp { font-size:12px; color:var(--mut); margin-top:16px; }
.mBtns { display:flex; justify-content:flex-end; gap:10px; margin-top:20px; }
.grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px; }
@media (max-width:720px){ .grid { grid-template-columns:1fr; } }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px 16px; }
.card h2 { margin:0 0 10px; font-size:13px; font-weight:600; color:var(--mut); text-transform:uppercase; letter-spacing:.05em; }
.row { display:flex; align-items:center; gap:10px; padding:8px 0; border-top:1px solid var(--line); }
.row:first-of-type { border-top:0; }
.row .main { flex:1; min-width:0; }
.row .name { font-weight:500; }
.row .sub { color:var(--faint); font-size:12px; font-family:var(--mono); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.empty { color:var(--faint); padding:8px 0; }
.pending { margin-top:16px; background:#20160a; border:1px solid #4a3a12; border-radius:12px; padding:14px 16px; }
.pending input { font-family:var(--mono); background:var(--bg); border:1px solid var(--line); color:var(--fg); border-radius:8px; padding:6px 10px; letter-spacing:.2em; text-transform:uppercase; width:120px; }
.about { margin-top:16px; }
.statusGrid { display:grid; grid-template-columns:1fr 1fr; gap:8px 18px; }
@media (max-width:520px){ .statusGrid { grid-template-columns:1fr; } }
.metric { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:7px 0; border-top:1px solid var(--line); }
.metric:first-child, .metric:nth-child(2) { border-top:0; }
@media (max-width:520px){ .metric:nth-child(2) { border-top:1px solid var(--line); } }
.metric .k { color:var(--mut); }
.metric .v { font-weight:600; white-space:nowrap; }
.actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.adv { margin-top:12px; border-top:1px solid var(--line); padding-top:10px; }
.adv summary { cursor:pointer; color:var(--mut); font-size:12.5px; }
.adv .kv { display:flex; gap:8px; padding:3px 0; font-size:12.5px; }
.adv .k { color:var(--faint); width:110px; flex:none; }
.adv .v { font-family:var(--mono); overflow:hidden; text-overflow:ellipsis; }
.toast { position:fixed; bottom:16px; left:50%; transform:translateX(-50%); background:var(--card); border:1px solid var(--line); border-radius:10px; padding:10px 16px; opacity:0; transition:opacity .2s; }
.toast.show { opacity:1; }
pre.logs { max-height:220px; overflow:auto; background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:10px; font-size:11.5px; color:var(--mut); margin:0; }
</style>
</head>
<body>
<div class="wrap">
<div class="bar">
<span class="brand">harness</span>
<span id="conn"><span class="dot idle"></span> <span class="mut">connecting…</span></span>
<span id="device"><span class="dot idle"></span> <span class="mut">device —</span></span>
<span class="mut">machine <span id="agent" class="mono">—</span></span>
<span class="mut" id="agents">no agents</span>
<span class="mut">up <span id="uptime">—</span></span>
<span class="spacer"></span>
<button class="btn danger" onclick="stopAdapter()">Stop</button>
</div>
<div class="bar" style="margin-top:10px;">
<span class="mut">machine fingerprint</span> <span id="fp" class="fp">—</span>
</div>
<div id="pending"></div>
<div class="grid">
<div class="card">
<h2>Sessions (tmux claude)</h2>
<div id="sessions"><div class="empty">loading…</div></div>
</div>
<div class="card">
<h2>Paired browsers <button class="btn danger" style="float:right;font-size:11px;padding:2px 8px" onclick="unpairAll()">Unpair all</button></h2>
<div id="pairs"><div class="empty">loading…</div></div>
</div>
</div>
<div class="card about">
<h2>Machine</h2>
<div id="about"></div>
<details id="logsBox" style="margin-top:10px"><summary class="mut" style="cursor:pointer">Logs</summary>
<pre class="logs" id="logs">—</pre>
</details>
</div>
</div>
<div class="toast" id="toast"></div>
<script>
const H = { 'x-adapter-local': '1' };
let pendKey = null; // identity of the pending shown — so polling doesn't clobber the modal/input
let dismissedKey = null; // pending fully handled (approved) — don't rebuild until it changes
let modalClosed = false; // user hit Close on the approve modal → behave like no ?code (normal UI) this session
let lastStatus = null; // last /api/status snapshot (for closeModal to re-render inline immediately)
// Code from the "Open dashboard & approve" link on the web (?code=…). It travels via the URL the user
// clicks in their own browser (loopback), never through the backend — so CPace security is preserved.
const params = new URLSearchParams(location.search);
const urlCode = (params.get('code') || '').toUpperCase();
function esc(s){ return String(s==null?'':s).replace(/[&<>"']/g, c => ({'&':'&','<':'<','>':'>','"':'"',"'":'''}[c])); }
function toast(m){ const t=document.getElementById('toast'); t.textContent=m; t.classList.add('show'); clearTimeout(t._h); t._h=setTimeout(()=>t.classList.remove('show'),1800); }
function fmtDur(s){ s=Math.max(0,s|0); const d=s/86400|0,h=s%86400/3600|0,m=s%3600/60|0; return d?d+'d '+h+'h':h?h+'h '+m+'m':m?m+'m':s+'s'; }
function fmtWhen(ts){ try{ return new Date(ts).toISOString().slice(0,16).replace('T',' ') }catch{ return '' } }
async function post(path, body){
const r = await fetch(path, { method:'POST', headers:{...H, ...(body?{'content-type':'application/json'}:{})}, body: body?JSON.stringify(body):undefined });
const j = await r.json().catch(()=>({})); return { ok:r.ok, status:r.status, j };
}
// Strip ?code=… from the address bar (no reload) once the pairing is handled — so a refresh doesn't
// re-open the modal with a stale/consumed code, and the code doesn't linger in history.
function clearUrlCode(){ try { history.replaceState(null, '', location.pathname); } catch(e) {} }
async function doApprove(){
const el = document.getElementById('code');
const code = (urlCode || (el ? el.value.trim().toUpperCase() : '')).trim();
if(!code){ toast('Enter the pairing code'); return; }
clearUrlCode();
const btn = document.getElementById('approveBtn'); if(btn){ btn.disabled = true; btn.textContent = 'Approving…'; }
const { ok, j } = await post('/api/pair', { code });
if (ok){ toast('✓ Paired '+(j.fingerprint||'')); dismissedKey = pendKey; document.getElementById('pending').innerHTML = ''; }
else { toast('✗ '+(j.error||'failed')); if(btn){ btn.disabled = false; btn.textContent = 'Approve'; } }
refresh();
}
// Close = don't approve now → drop back to the normal page (same as opening without ?code): show the
// subtle inline banner instead of the blocking modal, for the rest of this session.
function closeModal(){ modalClosed = true; clearUrlCode(); pendKey = null; if (lastStatus) render(lastStatus); else document.getElementById('pending').innerHTML = ''; }
function pendingRoleLabel(s){ return s && s.pending && s.pending.role === 'device' ? 'device' : 'browser'; }
// Inline (non-blocking) banner when the dashboard is opened directly and a client happens to be waiting.
function buildInlinePending(s){
const role = pendingRoleLabel(s);
document.getElementById('pending').innerHTML =
'<div class="pending"><b>🔒 A '+esc(role)+' is waiting to pair</b> — <span class="mut">'+esc(s.pending.label)+'</span>'
+ '<div style="margin-top:8px">Enter the code shown on that '+esc(role)+': '
+ '<input id="code" maxlength="8" placeholder="ABC123" onkeydown="if(event.key===\\'Enter\\')doApprove()"> '
+ '<button class="btn" onclick="doApprove()">Approve</button></div></div>';
}
function buildApproveModal(s){
const p = s.pending;
const role = pendingRoleLabel(s);
const codeBlock = urlCode
? '<div class="mCodeLabel">verification code</div><div class="mCode">'+esc(urlCode)+'</div><div class="mNote">Make sure this matches the code on your '+esc(role)+' screen.</div>'
: '<div class="mCodeLabel">enter the code shown on your '+esc(role)+'</div><input id="code" class="mInput" maxlength="8" placeholder="ABC123" onkeydown="if(event.key===\\'Enter\\')doApprove()">';
document.getElementById('pending').innerHTML =
'<div class="modal"><div class="modalCard">'
+ '<div class="mTitle">🔒 Approve this '+esc(role)+'?</div>'
+ '<div class="mSub">A '+esc(role)+' (<b>'+esc(p.label)+'</b>) is asking to pair for end-to-end encryption. Approve only if you started this flow.</div>'
+ codeBlock
+ '<div class="mFp">this computer · <span class="fp">'+esc(s.fingerprint||'')+'</span></div>'
+ '<div class="mBtns"><button class="btn" onclick="closeModal()">Close</button><button id="approveBtn" class="btn primary" onclick="doApprove()">Approve</button></div>'
+ '</div></div>';
const el = document.getElementById('code'); if (el) el.focus();
}
async function unpair(id){ const { ok, j } = await post('/api/revoke', { id }); toast(ok?('✓ Unpaired '+(j.fingerprint||'')):('✗ '+(j.error||'failed'))); refresh(); }
async function unpairAll(){ if(!confirm('Unpair every browser?')) return; const { j } = await post('/api/revoke-all'); toast('✓ Unpaired '+(j.count||0)); refresh(); }
async function stopAdapter(){ if(!confirm('Stop the adapter?')) return; await post('/api/stop'); toast('Stopping…'); }
function isDevicePair(p){
return !!p && (p.role === 'device' || String(p.label || '').toLowerCase() === 'device');
}
function render(s){
lastStatus = s;
const c = document.getElementById('conn');
c.innerHTML = '<span class="dot '+(s.connected?'on':'off')+'"></span> <span class="mut">'+(s.connected?'cloud connected':'cloud reconnecting…')+'</span>';
const d = document.getElementById('device');
const deviceOnline = !!s.deviceE2eeConnected || !!((s.pairs||[]).find(p => isDevicePair(p) && p.online));
const deviceTransport = !!s.deviceTransportConnected;
d.innerHTML = '<span class="dot '+(deviceOnline?'on':deviceTransport?'idle':'off')+'"></span> <span class="mut">device '+(deviceOnline?'connected':deviceTransport?'pairing':'offline')+'</span>';
document.getElementById('agent').textContent = (s.agentId||'').slice(0,8) || '—';
const nAgents = (s.sessions||[]).length;
document.getElementById('agents').textContent = s.discoveryReady === false
? 'discovering terminal agents…'
: nAgents === 0 ? 'no agents' : nAgents + (nAgents === 1 ? ' agent' : ' agents');
document.getElementById('uptime').textContent = fmtDur(s.uptimeSec);
document.getElementById('fp').textContent = s.fingerprint || '—';
// sessions
const se = document.getElementById('sessions');
se.innerHTML = s.discoveryReady === false
? '<div class="empty">Discovering terminal agents…</div>'
: (s.sessions&&s.sessions.length) ? s.sessions.map(x =>
'<div class="row"><div class="main"><div class="name">'+esc(x.name)+'</div><div class="sub">'+esc(x.cwd||'')+' · '+esc((x.terminal&&x.terminal.primary)||x.tmuxPane||'')+'</div></div><div class="mut" style="font-size:12px">'+fmtWhen(x.updatedAt)+'</div></div>'
).join('') : '<div class="empty">'+(s.discoveryError ? esc('Terminal discovery unavailable: '+s.discoveryError) : 'No terminal agents.')+'</div>';
// pairs
const pe = document.getElementById('pairs');
pe.innerHTML = (s.pairs&&s.pairs.length) ? s.pairs.map(p => {
const role = isDevicePair(p) ? 'device' : (p.role || 'web');
return '<div class="row"><span class="dot '+(p.online?'on':'idle')+'"></span><div class="main"><div class="name fp">'+esc(p.fingerprint)+'</div><div class="sub"><span class="pill">'+esc(role)+'</span>'+esc(p.label)+' · paired '+fmtWhen(p.pairedAt)+'</div></div><button class="btn danger" onclick="unpair(\\''+esc(p.fingerprint)+'\\')">Unpair</button></div>';
}).join('') : '<div class="empty">No clients paired.</div>';
// pending — rebuild ONLY when it actually changes (new/rotated pairing), else leave the code input
// and whatever the user typed/pasted intact (polling every 2.5s must not wipe the field).
// Pending pairing → a MODAL popup. Built once per pending (guarded by pendKey) so polling every 2.5s
// doesn't clobber it. If the web link supplied ?code=…, it's pre-filled and the user just clicks
// Approve — nothing to type. Otherwise a code input is shown as a fallback.
const pd = document.getElementById('pending');
if (s.pending) {
const key = s.pending.expiresAt + '|' + s.pending.label;
if (key !== pendKey) {
pendKey = key;
// A blocking modal ONLY when arrived via the web "Approve" link (?code=…) and not yet closed;
// opening directly (or after Close) shows a subtle inline banner instead (normal UI, no overlay).
if (dismissedKey !== key) { if (urlCode && !modalClosed) buildApproveModal(s); else buildInlinePending(s); }
}
} else if (pendKey !== null) { pd.innerHTML = ''; pendKey = null; dismissedKey = null; }
// machine summary — keep the default view human-readable; tuck raw paths/ports into Advanced.
const cfg = s.config||{};
const sessionCount = (s.sessions&&s.sessions.length) || 0;
const pairCount = (s.pairs&&s.pairs.length) || 0;
document.getElementById('about').innerHTML =
'<div class="statusGrid">'
+ metric('Machine cloud', s.connected ? 'Connected' : 'Reconnecting')
+ metric('Claude sessions', sessionCount ? ('Watching '+sessionCount) : 'Waiting')
+ metric('Browsers', pairCount ? (pairCount+' paired') : 'None paired')
+ metric('Device', deviceOnline ? 'Connected' : deviceTransport ? 'Pairing' : 'Offline')
+ '</div>'
+ '<div class="actions"><a class="btn" href="#pairs">Clients</a><button class="btn" onclick="document.getElementById(\\'logsBox\\').open=true;document.getElementById(\\'logsBox\\').scrollIntoView({behavior:\\'smooth\\',block:\\'nearest\\'});">View logs</button></div>'
+ '<details class="adv"><summary>Advanced</summary>'
+ kv('Backend URL', s.backendUrl)
+ kv('Watched folder', cfg.watching)
+ kv('CLI data', cfg.dataDir)
+ kv('Local control', cfg.port)
+ '</details>';
}
function metric(k,v){ return '<div class="metric"><span class="k">'+esc(k)+'</span><span class="v">'+esc(v||'')+'</span></div>'; }
function kv(k,v){ return '<div class="kv"><span class="k">'+esc(k)+'</span><span class="v">'+esc(v||'')+'</span></div>'; }
async function refresh(){
try {
const s = await (await fetch('/api/status')).json();
render(s);
fetch('/api/logs').then(r=>r.ok?r.text():'').then(t=>{ if(t) document.getElementById('logs').textContent = t; }).catch(()=>{});
} catch { document.getElementById('conn').innerHTML = '<span class="dot off"></span> <span class="mut">cloud unreachable</span>'; }
}
refresh(); setInterval(refresh, 2500);
</script>
</body>
</html>`
56ae2e47fThis file is pinned to the selected release. Download the original to open it in your design tool.