273 lines
12 KiB
HTML
273 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>BridgeSwarm Control Center</title>
|
|
<link rel="stylesheet" href="panel.css">
|
|
</head>
|
|
<body>
|
|
<aside class="sidebar">
|
|
<div class="logo">
|
|
<div class="logo-mark">
|
|
<img class="logo-icon-img" src="icons/128.png" width="32" height="32" alt="" aria-hidden="true">
|
|
<div>
|
|
<h1>Bridge<span>Swarm</span></h1>
|
|
<div class="version" id="extVersion">v—</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<nav class="nav">
|
|
<button type="button" class="nav-item active" data-page="overview">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>
|
|
<span>Overview</span>
|
|
</button>
|
|
<button type="button" class="nav-item" data-page="swarms">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M12 2v2M12 20v2M2 12h2M20 12h2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg>
|
|
<span>Swarms</span>
|
|
<span class="badge" id="swarmCount">0</span>
|
|
</button>
|
|
<button type="button" class="nav-item" data-page="connections">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
|
|
<span>Connections</span>
|
|
<span class="badge" id="connCount">0</span>
|
|
</button>
|
|
<button type="button" class="nav-item" data-page="capabilities">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
|
|
<span>Capabilities</span>
|
|
</button>
|
|
<button type="button" class="nav-item" data-page="activity">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 6h16M4 12h10M4 18h13"/></svg>
|
|
<span>Activity</span>
|
|
<span class="badge" id="logErrorBadge" hidden>0</span>
|
|
</button>
|
|
<button type="button" class="nav-item" data-page="settings">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
|
|
<span>Settings</span>
|
|
</button>
|
|
</nav>
|
|
<div class="sidebar-foot">
|
|
<div id="sidebarHostHint">Host: —</div>
|
|
<div class="refresh-meta" id="lastUpdated">Updated —</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<main class="main">
|
|
<!-- Overview -->
|
|
<div class="page active" id="page-overview">
|
|
<div class="page-header">
|
|
<div>
|
|
<h2>Overview</h2>
|
|
<p class="sub">Host health, examples, and live session snapshot</p>
|
|
</div>
|
|
<span class="status-pill err" id="overviewPill"><span class="dot"></span><span id="overviewPillText">Checking…</span></span>
|
|
</div>
|
|
|
|
<div class="page-body">
|
|
<div class="grid-2 ov-top">
|
|
<div class="card">
|
|
<div class="card-head"><h3>Host health</h3></div>
|
|
<div class="card-body health" id="healthCard">
|
|
<div class="empty-state">
|
|
<h4>Connecting…</h4>
|
|
<p>Waiting for background service worker state.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-head"><h3>Examples server</h3>
|
|
<div class="toggle" id="overviewExamplesToggle" role="switch" aria-checked="false" tabindex="0" title="Enable examples server"></div>
|
|
</div>
|
|
<div class="card-body" id="overviewExamplesBody"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid-stats">
|
|
<div class="stat-card"><div class="label">Swarms</div><div class="value" id="dashSwarms">0</div><div class="hint">Active Hyperswarm instances</div></div>
|
|
<div class="stat-card"><div class="label">Connections</div><div class="value" id="dashConnections">0</div><div class="hint">Live peer sockets</div></div>
|
|
<div class="stat-card"><div class="label">Tabs</div><div class="value" id="dashTabs">0</div><div class="hint">Pages using BridgeSwarm</div></div>
|
|
<div class="stat-card"><div class="label">Panel uptime</div><div class="value" id="dashUptime">0s</div><div class="hint">Service worker lifetime</div></div>
|
|
</div>
|
|
|
|
<div class="grid-2 ov-mid">
|
|
<div class="card">
|
|
<div class="card-head">
|
|
<h3>Recent connections</h3>
|
|
<button type="button" class="btn btn-ghost btn-sm" data-goto="connections">View all</button>
|
|
</div>
|
|
<div class="card-body" style="padding:0">
|
|
<table class="data">
|
|
<thead><tr><th>Connection</th><th>Swarm</th><th>Peer</th><th>Age</th></tr></thead>
|
|
<tbody id="recentConnections"><tr><td colspan="4" class="empty-state muted">No active connections</td></tr></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-head">
|
|
<h3>Recent activity</h3>
|
|
<button type="button" class="btn btn-ghost btn-sm" data-goto="activity">Open Activity</button>
|
|
</div>
|
|
<div class="card-body recent-activity" id="recentActivity">
|
|
<div class="empty-state muted">No events yet</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card ov-bottom">
|
|
<div class="card-head"><h3>Bridge tabs</h3></div>
|
|
<div class="card-body" style="padding:0">
|
|
<table class="data">
|
|
<thead><tr><th>Tab</th><th>Page</th><th>Swarms</th><th></th></tr></thead>
|
|
<tbody id="tabsTable"><tr><td colspan="4" class="muted" style="padding:1rem">No BridgeSwarm tabs</td></tr></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Swarms -->
|
|
<div class="page" id="page-swarms">
|
|
<div class="page-header">
|
|
<div>
|
|
<h2>Swarms</h2>
|
|
<p class="sub">Active Hyperswarm instances and peer counts</p>
|
|
</div>
|
|
</div>
|
|
<div class="page-body">
|
|
<div class="card">
|
|
<div class="card-body" style="padding:0">
|
|
<table class="data">
|
|
<thead>
|
|
<tr>
|
|
<th>Swarm ID</th><th>App name</th><th>Peers</th><th>Tabs</th><th>Firewall</th><th>Created</th><th></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="swarmsTable"></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Connections -->
|
|
<div class="page" id="page-connections">
|
|
<div class="page-header">
|
|
<div>
|
|
<h2>Connections</h2>
|
|
<p class="sub">Live peer sockets across all swarms</p>
|
|
</div>
|
|
</div>
|
|
<div class="page-body">
|
|
<div class="card">
|
|
<div class="card-body" style="padding:0">
|
|
<table class="data">
|
|
<thead><tr><th>Connection</th><th>Swarm</th><th>Peer key</th><th>Topics</th><th>Age</th></tr></thead>
|
|
<tbody id="connectionsTable"></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Capabilities -->
|
|
<div class="page" id="page-capabilities">
|
|
<div class="page-header">
|
|
<div>
|
|
<h2>Capabilities</h2>
|
|
<p class="sub">Host packs, QVAC device, and agent sandbox</p>
|
|
</div>
|
|
</div>
|
|
<div class="page-body">
|
|
<div class="grid-2">
|
|
<div class="card">
|
|
<div class="card-head"><h3>Packs</h3></div>
|
|
<div class="card-body" id="capPacksBody">
|
|
<div class="empty-state muted">Waiting for host…</div>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-head"><h3>QVAC</h3>
|
|
<div class="toggle" id="capQvacToggle" role="switch" aria-checked="false" tabindex="0" title="Enable QVAC"></div>
|
|
</div>
|
|
<div class="card-body" id="capQvacBody">
|
|
<div class="empty-state muted">Waiting for host…</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card" style="margin-top:1rem">
|
|
<div class="card-head"><h3>Agent</h3></div>
|
|
<div class="card-body" id="capAgentBody">
|
|
<div class="empty-state muted">Waiting for host…</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Activity -->
|
|
<div class="page" id="page-activity">
|
|
<div class="page-header">
|
|
<div>
|
|
<h2>Activity</h2>
|
|
<p class="sub">Structured host and extension event stream</p>
|
|
</div>
|
|
</div>
|
|
<div class="page-body">
|
|
<div class="logs-toolbar">
|
|
<div class="chip-row" id="levelChips">
|
|
<button type="button" class="chip level-debug" data-level="debug">Debug</button>
|
|
<button type="button" class="chip active level-info" data-level="info">Info</button>
|
|
<button type="button" class="chip active level-warn" data-level="warn">Warn</button>
|
|
<button type="button" class="chip active level-error" data-level="error">Error</button>
|
|
</div>
|
|
<div class="chip-row" id="categoryChips">
|
|
<button type="button" class="chip active" data-cat="host">Host</button>
|
|
<button type="button" class="chip active" data-cat="swarm">Swarm</button>
|
|
<button type="button" class="chip active" data-cat="conn">Conn</button>
|
|
<button type="button" class="chip active" data-cat="cap">Cap</button>
|
|
<button type="button" class="chip active" data-cat="examples">Examples</button>
|
|
<button type="button" class="chip active" data-cat="settings">Settings</button>
|
|
</div>
|
|
<input type="search" class="logs-search" id="logSearch" placeholder="Search logs…">
|
|
<div class="btn-row">
|
|
<button type="button" class="btn btn-secondary btn-sm" id="btnPauseLogs">Pause</button>
|
|
<button type="button" class="btn btn-secondary btn-sm" id="btnFollowLogs">Follow: ON</button>
|
|
<button type="button" class="btn btn-secondary btn-sm" id="btnExportJson">Export JSON</button>
|
|
<button type="button" class="btn btn-secondary btn-sm" id="btnExportTxt">Export TXT</button>
|
|
<button type="button" class="btn btn-danger btn-sm" id="btnClearLogs">Clear</button>
|
|
</div>
|
|
</div>
|
|
<div class="logs-shell">
|
|
<div class="logs-meta-bar">
|
|
<span id="logsCount">0 events</span>
|
|
<span id="logsFilterHint">Showing all</span>
|
|
</div>
|
|
<div class="logs-list" id="logsContainer"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Settings -->
|
|
<div class="page" id="page-settings">
|
|
<div class="page-header">
|
|
<div>
|
|
<h2>Settings</h2>
|
|
<p class="sub">Changes save automatically</p>
|
|
</div>
|
|
<button type="button" class="btn btn-secondary btn-sm" id="btnResetSettings">Reset defaults</button>
|
|
</div>
|
|
<div class="page-body">
|
|
<div class="card">
|
|
<div class="card-body" id="settingsRoot">
|
|
<!-- filled by dashboard.js -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<div class="toast" id="toast"></div>
|
|
|
|
<script src="dashboard.js"></script>
|
|
</body>
|
|
</html>
|