d834c3187d
- 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
807 lines
38 KiB
HTML
807 lines
38 KiB
HTML
<!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></> 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 & Work Orders
|
||
<span id="dms-count-badge" class="tab-badge">0</span>
|
||
</button>
|
||
<button class="tab-btn" data-tab="jobs">
|
||
Timers & Jobs
|
||
</button>
|
||
<button class="tab-btn" data-tab="loops">
|
||
Loop & Strategy
|
||
<span id="loops-count-badge" class="tab-badge">0</span>
|
||
</button>
|
||
<button class="tab-btn" data-tab="lookup">
|
||
Lookup & Grammar
|
||
</button>
|
||
<button class="tab-btn" data-tab="agentic-dev">
|
||
Agentic Dev & 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 & 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 & 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 & 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 {"in_m": 5, "prompt": "Recheck reachability"}]')">[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 & 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 & 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 & 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 & 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 & 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 & 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 & 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 & 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 & 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 & 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"></> 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 & 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 & 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 & 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>
|