operator
407 lines
16 KiB
HTML
407 lines
16 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="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>
|
|
</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>
|
|
|
|
<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>
|
|
|
|
</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>
|
|
<div class="modal-footer">
|
|
<button class="btn-control" onclick="closeModal('modal-strat-edit')">Cancel</button>
|
|
<button id="modal-strat-save-btn" class="btn-control active">Save Override</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>
|