Files
box/web/box/www/index.html
T
operator d834c3187d feat(web): add Operator PIN 3128 auth and Agentic Dev console tab
- Add front-door operator authentication modal with PIN 3128 and ops_session cookie
- Add 6th navigation tab: Agentic Dev & Tmux Console with live worker badge
- Implement 5 sub-panels: Onboard Connects, Tmux Workers, Regex Rules, Dev/Git & Tests, Audit Logs
- Implement modals for worker spawning, OTP verification, and regex evaluator
- Integrate with HTTPS exec endpoints and realistic live machine fallbacks
2026-10-07 00:25:00 +00:00

807 lines
38 KiB
HTML
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.
<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>BOX — Fleet Console</title>
<meta name="description" content="NetVM & Box Agent Fleet Console — Operator Interface for Autonomous Browser Agents">
<meta name="theme-color" content="#111111">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="stylesheet" href="box.css">
</head>
<body>
<!-- App Header -->
<header class="app-header">
<div class="brand-section">
<div class="brand-badge">BOX</div>
<div class="brand-title">
Fleet Console
<span class="brand-host">box.muse-dev.online</span>
<span id="fleet-pulse" class="pulse-indicator" title="Live Fleet Health Active"></span>
</div>
</div>
<div class="header-controls">
<button id="operator-auth-btn" class="btn-control" title="Operator PIN / Passkey Console Auth (PIN: 3128)">
<span id="operator-auth-icon">🔒</span> <span id="operator-auth-label">PIN 3128</span>
</button>
<span id="operator-chip" class="node-status-badge badge-active" style="display: none; cursor: pointer;" title="Operator session active (PIN 3128) — click to logout">● OPERATOR [3128]</span>
<button id="curl-toggle-btn" class="btn-control" title="View as curl (API Steering)">
<code>&lt;/&gt; API</code>
</button>
<button id="theme-toggle-btn" class="btn-control" title="Cycle theme: dark / light / sepia / contrast">
◐ dark
</button>
</div>
</header>
<!-- Navigation Tabs -->
<nav class="app-tabs">
<button class="tab-btn active" data-tab="dashboard">
Fleet Pulse
</button>
<button class="tab-btn" data-tab="dms">
DMs &amp; Work Orders
<span id="dms-count-badge" class="tab-badge">0</span>
</button>
<button class="tab-btn" data-tab="jobs">
Timers &amp; Jobs
</button>
<button class="tab-btn" data-tab="loops">
Loop &amp; Strategy
<span id="loops-count-badge" class="tab-badge">0</span>
</button>
<button class="tab-btn" data-tab="lookup">
Lookup &amp; Grammar
</button>
<button class="tab-btn" data-tab="agentic-dev">
Agentic Dev &amp; Tmux
<span id="dev-workers-badge" class="tab-badge">0</span>
</button>
</nav>
<!-- Main Container -->
<main class="app-main">
<!-- Tab 1: Dashboard (Fleet Pulse) -->
<section id="tab-dashboard" class="tab-pane active">
<div id="fleet-grid" class="grid-nodes">
<!-- Rendered dynamically by box.js -->
</div>
<!-- CDP helper panels (Engine 4) -->
<div class="section-heading">
<div class="section-title">
<span>Watchdog Alerts</span>
<span id="watchdog-alerts-badge" class="node-status-badge badge-active">0</span>
</div>
<div class="section-subtitle">new failed browser relaunches since watermark</div>
</div>
<div id="watchdog-alerts-panel" class="table-card">
<!-- Rendered dynamically by box.js -->
</div>
<div class="section-heading">
<div class="section-title">
<span>Pending Approvals</span>
<span id="approvals-count-badge" class="node-status-badge badge-active">0</span>
</div>
<div class="section-subtitle">permission dialogs awaiting operator decision</div>
</div>
<div id="approvals-panel" class="table-card">
<!-- Rendered dynamically by box.js -->
</div>
<div style="background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 16px; margin-top: 16px; display: flex; justify-content: space-between; align-items: center; font-size: 13px;">
<div style="display: flex; gap: 24px;">
<div>
<span style="color: var(--muted); font-size: 11px; text-transform: uppercase;">Topology</span>
<div style="font-weight: 700; font-family: var(--font-mono);">WireGuard in Netns (Warp)</div>
</div>
<div>
<span style="color: var(--muted); font-size: 11px; text-transform: uppercase;">Egress Strategy</span>
<div style="font-weight: 700; font-family: var(--font-mono);">Dedicated Stable Colo IP / Node</div>
</div>
<div>
<span style="color: var(--muted); font-size: 11px; text-transform: uppercase;">Orchestration Control</span>
<div style="font-weight: 700; font-family: var(--font-mono);">Off-board super / box CLI</div>
</div>
</div>
<div>
<button class="btn-control" onclick="copyText('super fleet', this)">Copy CLI Command</button>
</div>
</div>
</section>
<!-- Tab 2: DMs & Work Orders -->
<section id="tab-dms" class="tab-pane">
<!-- Filter Bar -->
<div class="filter-bar">
<div class="filter-group">
<span class="filter-label">Agent:</span>
<div class="filter-btn-group">
<button class="filter-chip filter-agent-chip active" data-agent="all">All</button>
<button class="filter-chip filter-agent-chip" data-agent="super">super</button>
<button class="filter-chip filter-agent-chip" data-agent="muse">muse</button>
<button class="filter-chip filter-agent-chip" data-agent="pip">pip</button>
<button class="filter-chip filter-agent-chip" data-agent="646">646</button>
<button class="filter-chip filter-agent-chip" data-agent="opm">opm</button>
</div>
</div>
<div class="filter-group">
<span class="filter-label">Kind:</span>
<div class="filter-btn-group">
<button class="filter-chip filter-kind-chip active" data-kind="all">All</button>
<button class="filter-chip filter-kind-chip" data-kind="wo">[WO]</button>
<button class="filter-chip filter-kind-chip" data-kind="ack">[ACK]</button>
<button class="filter-chip filter-kind-chip" data-kind="job">[JOB]</button>
<button class="filter-chip filter-kind-chip" data-kind="result">[RESULT]</button>
</div>
</div>
<div class="filter-group">
<input type="text" id="search-dms-input" class="search-input" placeholder="Search messages...">
</div>
</div>
<!-- Data Table Card -->
<div class="table-card">
<table id="dms-table" class="data-table">
<thead>
<tr>
<th style="width: 100px;">Time</th>
<th style="width: 170px;">From → To</th>
<th style="width: 110px;">Target</th>
<th>Message / Work Order</th>
<th style="width: 110px; text-align: right;">Status</th>
</tr>
</thead>
<tbody id="dms-tbody">
<!-- Rendered dynamically by box.js -->
</tbody>
</table>
</div>
</section>
<!-- Tab 3: Timers & Jobs -->
<section id="tab-jobs" class="tab-pane">
<div class="table-card">
<table id="jobs-table" class="data-table">
<thead>
<tr>
<th style="width: 200px;">Job Name</th>
<th style="width: 110px;">Agent</th>
<th style="width: 180px;">Schedule (Cron)</th>
<th style="width: 90px;">Timeout</th>
<th>Description</th>
<th style="width: 120px; text-align: right;">Actions</th>
</tr>
</thead>
<tbody id="jobs-tbody">
<!-- Rendered dynamically by box.js -->
</tbody>
</table>
</div>
</section>
<!-- Tab 4: Loop & Strategy -->
<section id="tab-loops" class="tab-pane">
<!-- Section 1: Fleet Loop Health -->
<div class="section-heading">
<div class="section-title">
<span>Fleet Loop Health</span>
<span id="overall-health-badge" class="node-status-badge badge-active">HEALTHY</span>
</div>
<div class="section-subtitle">answered + closed / landed ratio vs threshold</div>
</div>
<div id="loop-health-grid" class="stat-grid">
<!-- Rendered dynamically by box.js -->
</div>
<!-- Section 2: Active Loops -->
<div class="section-heading">
<div class="section-title">Active &amp; Tracked Loops</div>
<div class="section-subtitle">Real-time intrinsic loop state and nudge deadlines</div>
</div>
<div class="table-card">
<table id="loops-table" class="data-table">
<thead>
<tr>
<th style="width: 100px;">Loop ID</th>
<th style="width: 90px;">Agent</th>
<th style="width: 130px;">Purpose</th>
<th style="width: 100px;">Sent</th>
<th style="width: 110px;">State</th>
<th style="width: 110px;">Deadline</th>
<th style="width: 80px;">Nudges</th>
<th style="width: 160px; text-align: right;">Actions</th>
</tr>
</thead>
<tbody id="loops-tbody">
<!-- Rendered dynamically by box.js -->
</tbody>
</table>
</div>
<!-- Section 3: Loop Modulation Strategy -->
<div class="section-heading">
<div class="section-title">Loop Modulation Strategies</div>
<div class="section-subtitle">Input modulation matrix with hierarchical agent overrides</div>
</div>
<div class="table-card">
<table id="strats-table" class="data-table">
<thead>
<tr>
<th style="width: 110px;">Input Type</th>
<th style="width: 100px;">Subtype</th>
<th style="width: 80px;">Agent</th>
<th style="width: 90px;">Track</th>
<th style="width: 90px;">Priority</th>
<th style="width: 90px;">Timeout</th>
<th style="width: 70px;">Nudges</th>
<th style="width: 90px;">Escalate</th>
<th style="width: 90px;">Source</th>
<th style="width: 140px; text-align: right;">Actions</th>
</tr>
</thead>
<tbody id="strats-tbody">
<!-- Rendered dynamically by box.js -->
</tbody>
</table>
</div>
<!-- Section 4: Runtime Control Variables -->
<div class="section-heading">
<div class="section-title">Runtime Control Variables</div>
<div class="section-subtitle">Dynamic behavior parameters managed without deployments</div>
</div>
<div class="table-card">
<table id="vars-table" class="data-table">
<thead>
<tr>
<th style="width: 220px;">Variable Name</th>
<th style="width: 120px;">Current Value</th>
<th style="width: 90px;">Default</th>
<th style="width: 80px;">Unit</th>
<th style="width: 100px;">Range</th>
<th>Description</th>
<th style="width: 170px; text-align: right;">Actions</th>
</tr>
</thead>
<tbody id="vars-tbody">
<!-- Rendered dynamically by box.js -->
</tbody>
</table>
</div>
</section>
<!-- Tab 5: Lookup & Grammar -->
<section id="tab-lookup" class="tab-pane">
<!-- Section 1: Interactive Regex & Sentence Parser -->
<div class="section-heading">
<div class="section-title">Interactive Sentence &amp; Regex Parser</div>
<div class="section-subtitle">Test and validate agent sentence structures against lookup_internal patterns</div>
</div>
<div class="table-card" style="padding: 16px;">
<div style="display: flex; gap: 8px; margin-bottom: 12px;">
<input type="text" id="lookup-test-input" placeholder="Type or paste an agent message (e.g. [WO:7fce46e0] [from super] Audit — Check stats)..." style="flex: 1; padding: 10px 14px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; color: var(--fg); font-family: var(--font-mono); font-size: 13px;">
<button id="lookup-parse-btn" class="btn-control" style="background: var(--accent); color: #fff; font-weight: 600; padding: 0 18px;">Parse &amp; Validate</button>
</div>
<div style="display: flex; gap: 8px; margin-bottom: 12px;">
<span style="font-size: 11px; color: var(--muted); text-transform: uppercase; align-self: center;">Presets:</span>
<button class="btn-control preset-btn" onclick="setLookupPreset('[WO:7fce46e0] [from super] Audit exec.muse-dev.online — Check 200 OK codes')">[WO]</button>
<button class="btn-control preset-btn" onclick="setLookupPreset('[ACK:7fce46e0] [from 646]')">[ACK]</button>
<button class="btn-control preset-btn" onclick="setLookupPreset('[CLAIM 7fce46e0]')">[CLAIM]</button>
<button class="btn-control preset-btn" onclick="setLookupPreset('[RESULT 7fce46e0] OK 14 endpoints verified healthy')">[RESULT]</button>
<button class="btn-control preset-btn" onclick="setLookupPreset('[TOOL followup.create {&quot;in_m&quot;: 5, &quot;prompt&quot;: &quot;Recheck reachability&quot;}]')">[TOOL]</button>
</div>
<div id="lookup-parse-result" style="display: none; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 12px; font-family: var(--font-mono); font-size: 13px;">
<!-- Rendered dynamically -->
</div>
</div>
<!-- Section 2: Sentence Structure Catalog -->
<div class="section-heading" style="margin-top: 24px;">
<div class="section-title">Protocol Grammar &amp; Conversational Contracts</div>
<div class="section-subtitle">Authoritative patterns from lookup_internal/sentence_structure.json</div>
</div>
<div id="lookup-sentence-grid" class="grid-nodes">
<!-- Rendered dynamically by box.js -->
</div>
<!-- Section 3: Assistive Surfaces Catalog -->
<div class="section-heading" style="margin-top: 24px;">
<div class="section-title">Assistive Surfaces Map for box.muse-dev.online</div>
<div class="section-subtitle">DOM Selectors, data-testids, and REST endpoints for browser agents</div>
</div>
<div class="table-card">
<table id="lookup-surfaces-table" class="data-table">
<thead>
<tr>
<th style="width: 120px;">Surface</th>
<th style="width: 150px;">Tab / Pane ID</th>
<th style="width: 240px;">DOM Tab Selector</th>
<th style="width: 240px;">API Route</th>
<th>Assistive Purpose &amp; Hint</th>
</tr>
</thead>
<tbody id="lookup-surfaces-tbody">
<!-- Rendered dynamically by box.js -->
</tbody>
</table>
</div>
</section>
<!-- Tab 6: Agentic Dev & Tmux Workers -->
<section id="tab-agentic-dev" class="tab-pane">
<!-- Dev Surface Banner & Quick Actions -->
<div style="background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 18px; margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px;">
<div>
<div style="display: flex; align-items: center; gap: 10px; margin-bottom: 4px;">
<span style="font-weight: 700; font-size: 16px;">Agentic Dev &amp; Tmux Runtime Surface</span>
<span id="dev-auth-badge" class="node-status-badge badge-active" style="background: var(--surface2); color: var(--muted); border: 1px solid var(--border);">VISITOR / PIN 3128 REQUIRED FOR WRITES</span>
</div>
<div style="font-size: 12px; color: var(--muted);">
Onboard Connects · Multi-Socket Tmux Workers · Terminal Regex Auto-Approvals · Remote Exec Ops (<a href="https://box.muse-dev.online/" style="color: var(--accent); text-decoration: none;">box.muse-dev.online</a>)
</div>
</div>
<div style="display: flex; gap: 8px; flex-wrap: wrap;">
<button id="dev-toggle-master-btn" class="btn-control" style="background: var(--ok-bg); border-color: var(--ok); color: var(--ok); font-weight: 600;">
Master Approvals: <span id="dev-master-state-text">ENABLED</span>
</button>
<button id="dev-run-once-btn" class="btn-control" title="Scan all panes and execute one-shot auto-approvals">
⚡ Scan Once
</button>
<button id="dev-spawn-worker-btn" class="btn-control" title="Spawn a background tmux worker session">
+ Spawn Worker
</button>
<button id="dev-test-suite-btn" class="btn-control" title="Execute unit test runner">
▶ Run Tests
</button>
</div>
</div>
<!-- Section 1: Onboard Connects & Client Pipelines -->
<div class="section-heading">
<div class="section-title">
<span>Onboard Connects &amp; Fleet Pipelines</span>
<span id="connects-count-badge" class="tab-badge" style="display: inline-block;">0</span>
</div>
<div class="section-subtitle">Active fleet profiles, CDP endpoints, invite codes &amp; client onboarding salvage status</div>
</div>
<div class="table-card">
<table id="connects-table" class="data-table">
<thead>
<tr>
<th style="width: 100px;">Node</th>
<th style="width: 140px;">Type</th>
<th style="width: 130px;">Stage / Status</th>
<th style="width: 90px;">CDP Port</th>
<th style="width: 110px;">Invite Code</th>
<th style="width: 110px;">Weight</th>
<th>Role / Onboarding Detail</th>
<th style="width: 160px; text-align: right;">Actions</th>
</tr>
</thead>
<tbody id="connects-tbody">
<!-- Rendered dynamically by box.js -->
</tbody>
</table>
</div>
<!-- Section 2: Tmux Multi-Socket Workers & Panes -->
<div class="section-heading" style="margin-top: 24px;">
<div class="section-title">
<span>Tmux Multi-Socket Workers &amp; Tallies</span>
<span id="tmux-panes-count-badge" class="tab-badge" style="display: inline-block;">0</span>
</div>
<div class="section-subtitle">Aggregated workers across default, lte, muse.sock, and agent netns sockets</div>
</div>
<div id="tmux-tally-stats-grid" class="stat-grid" style="margin-bottom: 12px;">
<!-- Rendered dynamically by box.js: sockets, sessions, panes, active workers -->
</div>
<div class="table-card">
<table id="tmux-panes-table" class="data-table">
<thead>
<tr>
<th style="width: 150px;">Socket</th>
<th style="width: 120px;">Session</th>
<th style="width: 80px;">Pane</th>
<th style="width: 80px;">PID</th>
<th style="width: 90px;">Agent</th>
<th style="width: 170px;">Command</th>
<th style="width: 110px;">Auto-Approve</th>
<th style="width: 150px; text-align: right;">Actions</th>
</tr>
</thead>
<tbody id="tmux-panes-tbody">
<!-- Rendered dynamically by box.js -->
</tbody>
</table>
</div>
<!-- Section 3: Regex Match Engine & Guardrails -->
<div class="section-heading" style="margin-top: 24px;">
<div class="section-title">
<span>Terminal Regex Rules &amp; Security Guardrails</span>
<span class="node-status-badge badge-active">7 ACTIVE RULES</span>
</div>
<div class="section-subtitle">Autonomous prompt matching engine with hard security backstops</div>
</div>
<!-- Guardrails Alert Card -->
<div style="background: var(--bad-bg); border: 1px solid var(--bad); border-radius: 6px; padding: 12px 16px; margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; font-size: 13px;">
<div>
<span style="color: var(--bad); font-weight: 700;">🛡 Security Guardrails Enforced:</span>
<span style="color: var(--text); margin-left: 6px;">Prompts requesting sudo passwords, passkeys, PINs, or destructive commands (<code>rm -rf /</code>, <code>mkfs</code>) are strictly BLOCKED and never auto-approved.</span>
</div>
<button class="btn-control" id="dev-test-regex-btn" style="border-color: var(--bad); color: var(--bad);">Test Regex Match</button>
</div>
<div class="table-card">
<table id="regex-rules-table" class="data-table">
<thead>
<tr>
<th style="width: 190px;">Rule Name</th>
<th style="width: 110px;">Category</th>
<th style="width: 90px;">Response</th>
<th style="width: 90px;">Enter?</th>
<th>Pattern &amp; Target Prompt Description</th>
<th style="width: 90px; text-align: right;">Status</th>
</tr>
</thead>
<tbody id="regex-rules-tbody">
<!-- Rendered dynamically by box.js -->
</tbody>
</table>
</div>
<!-- Section 4: Dev Git & Test Output Console -->
<div class="section-heading" style="margin-top: 24px;">
<div class="section-title">Agentic Dev Console &amp; Test Suite</div>
<div class="section-subtitle">Real-time git visibility and test execution without SSH (riding HTTPS ops)</div>
</div>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px;">
<!-- Git Box -->
<div class="table-card" style="padding: 14px;">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
<div style="font-weight: 700; font-size: 13px;">Git Status &amp; Branch</div>
<button class="btn-control" id="dev-git-refresh-btn" style="padding: 2px 8px;">↻ Refresh</button>
</div>
<div id="dev-git-branch" style="font-family: var(--font-mono); font-size: 12px; color: var(--accent); margin-bottom: 8px;">branch: dev/operator-646/retention-rotations-p1</div>
<pre id="dev-git-output" style="background: var(--code-bg); border: 1px solid var(--border); border-radius: 4px; padding: 10px; font-family: var(--font-mono); font-size: 11px; max-height: 180px; overflow-y: auto; color: var(--text);"></pre>
</div>
<!-- Tests Runner Box -->
<div class="table-card" style="padding: 14px;">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
<div style="font-weight: 700; font-size: 13px;">Test Runner (HTTPS ops)</div>
<div style="display: flex; gap: 6px;">
<button class="btn-control preset-btn" onclick="setTestPreset('tests.test_tmux_auto_approver')">tmux</button>
<button class="btn-control preset-btn" onclick="setTestPreset('tests.test_box_onboard_tui')">tui</button>
<button class="btn-control preset-btn" onclick="setTestPreset('tests.test_onboard_pipeline')">onboard</button>
</div>
</div>
<div style="display: flex; gap: 6px; margin-bottom: 8px;">
<input type="text" id="dev-test-module-input" class="form-input" placeholder="tests.test_tmux_auto_approver or leave empty for suite" style="font-size: 12px;">
<button id="dev-run-tests-exec-btn" class="btn-control active" style="padding: 0 14px; white-space: nowrap;">Run</button>
</div>
<pre id="dev-test-output" style="background: var(--code-bg); border: 1px solid var(--border); border-radius: 4px; padding: 10px; font-family: var(--font-mono); font-size: 11px; max-height: 180px; overflow-y: auto; color: var(--text);">Ready to execute tests via tests.run op...</pre>
</div>
</div>
<!-- Section 5: Real-time Auto-Approvals Audit Stream -->
<div class="section-heading">
<div class="section-title">Auto-Approvals Audit Log Stream</div>
<div class="section-subtitle">Structured audit stream from logs/tmux/auto-approvals.jsonl</div>
</div>
<div class="table-card">
<table id="dev-audit-table" class="data-table">
<thead>
<tr>
<th style="width: 140px;">Timestamp</th>
<th style="width: 110px;">Action</th>
<th style="width: 90px;">Agent</th>
<th style="width: 100px;">Session / Pane</th>
<th style="width: 170px;">Rule Matched</th>
<th style="width: 90px;">Key Sent</th>
<th>Prompt Excerpt</th>
</tr>
</thead>
<tbody id="dev-audit-tbody">
<!-- Rendered dynamically by box.js -->
</tbody>
</table>
</div>
</section>
</main>
<!-- 'View as curl' Drawer -->
<aside id="curl-drawer" class="curl-drawer">
<div class="curl-drawer-header">
<span class="curl-drawer-title">&lt;/&gt; API Equivalent (Steering)</span>
<button id="curl-close-btn" class="btn-control" style="padding: 2px 8px;">✕</button>
</div>
<p style="font-size: 11px; color: var(--muted); margin-bottom: 8px;">
Every UI surface is a thin client over the Box REST API:
</p>
<pre id="curl-code-snippet" class="curl-code"></pre>
<div style="margin-top: 10px; text-align: right;">
<button class="btn-control" onclick="copyText(document.getElementById('curl-code-snippet').textContent, this)">Copy curl</button>
</div>
</aside>
<!-- Modal: Edit Variable -->
<div id="modal-var-edit" class="modal-backdrop">
<div class="modal-card">
<div class="modal-header">
<span id="modal-var-title">Edit Variable</span>
<button class="btn-control" onclick="closeModal('modal-var-edit')">✕</button>
</div>
<div class="modal-body">
<div class="form-group">
<label class="form-label">Variable Name</label>
<input type="text" id="modal-var-name" class="form-input" readonly>
</div>
<div class="form-group">
<label class="form-label">Description</label>
<div id="modal-var-desc" style="font-size: 12px; color: var(--muted);"></div>
</div>
<div class="form-group">
<label class="form-label">New Value</label>
<input type="text" id="modal-var-value" class="form-input">
<div id="modal-var-hint" style="font-size: 11px; color: var(--muted); margin-top: 2px;"></div>
</div>
</div>
<div class="modal-footer">
<button class="btn-control" onclick="closeModal('modal-var-edit')">Cancel</button>
<button id="modal-var-save-btn" class="btn-control active">Save Value</button>
</div>
</div>
</div>
<!-- Modal: Variable History -->
<div id="modal-var-history" class="modal-backdrop">
<div class="modal-card" style="max-width: 700px;">
<div class="modal-header">
<span id="modal-hist-title">Variable History</span>
<button class="btn-control" onclick="closeModal('modal-var-history')">✕</button>
</div>
<div class="modal-body">
<table class="data-table">
<thead>
<tr>
<th style="width: 150px;">Timestamp</th>
<th style="width: 80px;">Action</th>
<th style="width: 80px;">Old</th>
<th style="width: 80px;">New</th>
<th>Changed By</th>
</tr>
</thead>
<tbody id="modal-hist-tbody">
</tbody>
</table>
</div>
<div class="modal-footer">
<button class="btn-control" onclick="closeModal('modal-var-history')">Close</button>
</div>
</div>
</div>
<!-- Modal: Edit Strategy Override -->
<div id="modal-strat-edit" class="modal-backdrop">
<div class="modal-card">
<div class="modal-header">
<span id="modal-strat-title">Configure Strategy Override</span>
<button class="btn-control" onclick="closeModal('modal-strat-edit')">✕</button>
</div>
<div class="modal-body">
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
<div class="form-group">
<label class="form-label">Input Type</label>
<input type="text" id="modal-strat-type" class="form-input" readonly>
</div>
<div class="form-group">
<label class="form-label">Subtype</label>
<input type="text" id="modal-strat-subtype" class="form-input" readonly>
</div>
</div>
<div class="form-group">
<label class="form-label">Agent Scope (Optional)</label>
<select id="modal-strat-agent" class="form-input">
<option value="">All Agents (Default)</option>
<option value="muse">muse</option>
<option value="pip">pip</option>
<option value="646">646</option>
<option value="opm">opm</option>
</select>
</div>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
<div class="form-group">
<label class="form-label">Priority</label>
<select id="modal-strat-prio" class="form-input">
<option value="routine">routine</option>
<option value="normal">normal</option>
<option value="important">important</option>
<option value="critical">critical</option>
</select>
</div>
<div class="form-group">
<label class="form-label">Track Mode</label>
<select id="modal-strat-track" class="form-input">
<option value="true">True (Always)</option>
<option value="false">False (Never)</option>
<option value="actionable">Actionable</option>
</select>
</div>
</div>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
<div class="form-group">
<label class="form-label">Timeout (seconds)</label>
<input type="number" id="modal-strat-timeout" class="form-input" min="60" max="604800">
</div>
<div class="form-group">
<label class="form-label">Max Nudges</label>
<input type="number" id="modal-strat-nudges" class="form-input" min="0" max="10">
</div>
</div>
<div class="form-group">
<label class="form-label">Escalate Target</label>
<input type="text" id="modal-strat-escalate" class="form-input" placeholder="opm, user, or none">
</div>
</div>
<!-- Modal: Operator PIN 3128 Auth -->
<div id="modal-ops-auth" class="modal-backdrop">
<div class="modal-card" style="max-width: 460px;">
<div class="modal-header">
<span id="modal-ops-title">Operator Console Authentication</span>
<button class="btn-control" onclick="closeModal('modal-ops-auth')">✕</button>
</div>
<div class="modal-body">
<div style="font-size: 13px; color: var(--text); margin-bottom: 12px;">
Front-door console access (<span style="color: var(--accent);">box.muse-dev.online</span>) requires Operator PIN authorization to unlock mutating commands, auto-approval toggles, test runners, and unredacted logs.
</div>
<div class="form-group">
<label class="form-label">Operator PIN / Passkey</label>
<input type="password" id="modal-ops-pin-input" class="form-input" placeholder="Enter PIN (e.g. 3128)" value="3128" style="font-size: 16px; letter-spacing: 2px;">
<div style="font-size: 11px; color: var(--muted); margin-top: 4px;">
Default Operator PIN is <strong>3128</strong>. Sets session cookie <code>ops_session</code>.
</div>
</div>
<div style="background: var(--surface2); border: 1px solid var(--border); border-radius: 6px; padding: 10px; font-size: 11px; color: var(--muted);">
<strong>Passkey Location Note:</strong> Canonical passkey material is stored in <code>/srv/box/passkey.txt</code> on Google Cloud VM (<code>34.139.37.135</code>). Retrieve anytime via <code>box passkey</code>.
</div>
</div>
<div class="modal-footer" style="justify-content: space-between;">
<button class="btn-control" id="modal-ops-logout-btn" style="color: var(--bad); display: none;">Logout</button>
<div style="display: flex; gap: 8px;">
<button class="btn-control" onclick="closeModal('modal-ops-auth')">Cancel</button>
<button id="modal-ops-submit-btn" class="btn-control active">Unlock Operator Mode</button>
</div>
</div>
</div>
</div>
<!-- Modal: Spawn Tmux Worker -->
<div id="modal-spawn-worker" class="modal-backdrop">
<div class="modal-card" style="max-width: 520px;">
<div class="modal-header">
<span>Spawn Background Tmux Worker</span>
<button class="btn-control" onclick="closeModal('modal-spawn-worker')">✕</button>
</div>
<div class="modal-body">
<div class="form-group">
<label class="form-label">Target Socket</label>
<select id="modal-spawn-socket" class="form-input">
<option value="/tmp/tmux-1000/default">/tmp/tmux-1000/default (User Primary)</option>
<option value="/tmp/tmux-1000/lte">/tmp/tmux-1000/lte (LTE Host)</option>
<option value="/tmp/tmux-muse.sock">/tmp/tmux-muse.sock (Shared Muse)</option>
<option value="/tmp/tmux-pip.sock">/tmp/tmux-pip.sock (Netns Pip)</option>
<option value="/tmp/tmux-646.sock">/tmp/tmux-646.sock (Netns 646)</option>
<option value="/tmp/tmux-opm.sock">/tmp/tmux-opm.sock (Netns Opm)</option>
<option value="/tmp/tmux-dev.sock">/tmp/tmux-dev.sock (Netns Dev)</option>
<option value="/tmp/tmux-def.sock">/tmp/tmux-def.sock (Netns Def)</option>
</select>
</div>
<div class="form-group">
<label class="form-label">Session Name</label>
<input type="text" id="modal-spawn-session" class="form-input" placeholder="e.g. worker-audit-01">
</div>
<div class="form-group">
<label class="form-label">Agent Node Association</label>
<select id="modal-spawn-agent" class="form-input">
<option value="muse">muse (Core Engine / Dev)</option>
<option value="pip">pip (Production Worker)</option>
<option value="646">646 (Production Lead)</option>
<option value="opm">opm (Coordinator)</option>
<option value="dev">dev (Test &amp; Staging)</option>
<option value="def">def (Defense / Standby)</option>
</select>
</div>
<div class="form-group">
<label class="form-label">Command to Execute</label>
<input type="text" id="modal-spawn-cmd" class="form-input" placeholder="e.g. python3 bin/monitor.py or bash">
</div>
</div>
<div class="modal-footer">
<button class="btn-control" onclick="closeModal('modal-spawn-worker')">Cancel</button>
<button id="modal-spawn-submit-btn" class="btn-control active">Spawn Worker Session</button>
</div>
</div>
</div>
<!-- Modal: Enter Onboard OTP -->
<div id="modal-onboard-otp" class="modal-backdrop">
<div class="modal-card" style="max-width: 440px;">
<div class="modal-header">
<span>Submit Onboarding Verification OTP</span>
<button class="btn-control" onclick="closeModal('modal-onboard-otp')">✕</button>
</div>
<div class="modal-body">
<div class="form-group">
<label class="form-label">Client Pipeline Node</label>
<input type="text" id="modal-otp-node" class="form-input" readonly>
</div>
<div class="form-group">
<label class="form-label">6-Digit Verification OTP</label>
<input type="text" id="modal-otp-code" class="form-input" placeholder="123456" maxlength="6" style="font-size: 18px; letter-spacing: 4px; text-align: center;">
</div>
</div>
<div class="modal-footer">
<button class="btn-control" onclick="closeModal('modal-onboard-otp')">Cancel</button>
<button id="modal-otp-submit-btn" class="btn-control active">Verify &amp; Activate Node</button>
</div>
</div>
</div>
<!-- Modal: Test Regex Match -->
<div id="modal-test-regex" class="modal-backdrop">
<div class="modal-card" style="max-width: 600px;">
<div class="modal-header">
<span>Test Regex Auto-Approver &amp; Guardrails</span>
<button class="btn-control" onclick="closeModal('modal-test-regex')">✕</button>
</div>
<div class="modal-body">
<div class="form-group">
<label class="form-label">Terminal Prompt Text to Test</label>
<textarea id="modal-regex-input" class="form-input" rows="6" placeholder="Paste prompt text here (e.g. Would you like to run the following... › 1. Yes, proceed (y))..."></textarea>
</div>
<div style="display: flex; gap: 8px; margin-bottom: 12px;">
<span style="font-size: 11px; color: var(--muted); align-self: center;">Presets:</span>
<button class="btn-control preset-btn" onclick="setRegexTestPreset('muse_run')">Muse Run</button>
<button class="btn-control preset-btn" onclick="setRegexTestPreset('choice_abc')">A/B/C</button>
<button class="btn-control preset-btn" onclick="setRegexTestPreset('confirm_yn')">y/n</button>
<button class="btn-control preset-btn" onclick="setRegexTestPreset('guard_sudo')">Sudo (Blocked)</button>
<button class="btn-control preset-btn" onclick="setRegexTestPreset('guard_rm')">rm -rf (Blocked)</button>
</div>
<div id="modal-regex-verdict" style="display: none; background: var(--code-bg); border: 1px solid var(--border); border-radius: 6px; padding: 12px; font-family: var(--font-mono); font-size: 12px;"></div>
</div>
<div class="modal-footer">
<button class="btn-control" onclick="closeModal('modal-test-regex')">Close</button>
<button id="modal-regex-eval-btn" class="btn-control active">Evaluate Match</button>
</div>
</div>
</div>
<!-- Global Footer -->
<footer class="app-footer">
<div id="footer-agents-container" class="footer-agents">
<!-- Live dots rendered dynamically -->
</div>
<div id="footer-freshness" class="mono">
Updated just now
</div>
<div class="footer-links">
<a href="https://muse-dev.online/">front door</a>
<a href="https://board.muse-dev.online/">board</a>
<a href="https://status.muse-dev.online/">status</a>
<a href="https://net.muse-dev.online/">net</a>
</div>
</footer>
<script src="box.js?v=20261004b"></script>
</body>
</html>