Add Nocturne debug web UI, core process control, and web QR login
This commit is contained in:
Fisto
@@ -0,0 +1,262 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>veskslop debug</title>
|
||||
<link rel="stylesheet" href="nocturne.css" />
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="vk-app">
|
||||
<header class="vk-header">
|
||||
<span class="vk-brand">
|
||||
<span class="vk-brand-name">veskslop</span>
|
||||
<span class="vk-brand-version">debug</span>
|
||||
</span>
|
||||
|
||||
<div class="vk-guild-picker">
|
||||
<button id="guild-picker" class="btn btn-secondary vk-guild-button" type="button">
|
||||
<span id="guild-picker-label">Direct messages</span>
|
||||
<span class="vk-icon" data-icon="caretDown"></span>
|
||||
</button>
|
||||
<div id="guild-menu" class="vk-menu" hidden></div>
|
||||
</div>
|
||||
|
||||
<div class="vk-health">
|
||||
<span class="vk-health-item">
|
||||
<span id="health-dot" class="vk-dot"></span>
|
||||
<span id="health-bridge" class="vk-mono">bridge …</span>
|
||||
</span>
|
||||
<span id="health-uptime" class="vk-mono vk-dim">up …</span>
|
||||
<span id="health-events" class="vk-mono vk-dim">0.0 ev/s</span>
|
||||
</div>
|
||||
|
||||
<div class="vk-header-right">
|
||||
<label class="vk-takeover" title="Read-only unless takeover is on">
|
||||
<input type="checkbox" id="takeover" />
|
||||
<span class="vk-switch"><span class="vk-knob"></span></span>
|
||||
<span class="vk-takeover-label" id="takeover-label">Takeover</span>
|
||||
</label>
|
||||
<button id="settings-open" class="btn btn-secondary vk-settings" type="button">
|
||||
<span class="vk-icon" data-icon="gear"></span>
|
||||
Settings
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div id="call-strip" class="vk-call-strip" hidden></div>
|
||||
|
||||
<div class="vk-body">
|
||||
<aside class="vk-rail">
|
||||
<div id="guild-switcher" class="vk-guild-switcher"></div>
|
||||
|
||||
<div class="vk-rail-section">
|
||||
<div class="vk-rail-label">Text</div>
|
||||
<div id="text-channels" class="vk-rail-list"></div>
|
||||
</div>
|
||||
|
||||
<div class="vk-rail-section">
|
||||
<div class="vk-rail-label">Voice</div>
|
||||
<div id="voice-channels" class="vk-rail-list"></div>
|
||||
</div>
|
||||
|
||||
<div class="vk-rail-section">
|
||||
<div class="vk-rail-label">Direct</div>
|
||||
<div id="direct-list" class="vk-rail-list"></div>
|
||||
</div>
|
||||
|
||||
<div id="agent-identity" class="vk-rail-footer"></div>
|
||||
</aside>
|
||||
|
||||
<main class="vk-center">
|
||||
<div class="vk-channel-header">
|
||||
<span id="channel-icon" class="vk-icon vk-dim"></span>
|
||||
<span id="channel-title" class="vk-channel-title">No channel selected</span>
|
||||
<span id="channel-context" class="vk-mono vk-dim"></span>
|
||||
<div class="vk-channel-actions">
|
||||
<button
|
||||
id="channel-refresh"
|
||||
class="btn btn-secondary vk-icon-btn"
|
||||
type="button"
|
||||
title="Reload the latest 50 messages"
|
||||
>
|
||||
<span class="vk-icon" data-icon="refresh"></span>
|
||||
</button>
|
||||
<button id="raw-events" class="btn btn-secondary vk-small-btn" type="button">Raw events</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="message-scroll" class="vk-message-scroll">
|
||||
<div id="message-list" class="vk-message-list"></div>
|
||||
</div>
|
||||
|
||||
<div class="vk-composer-wrap">
|
||||
<div id="tts-panel" class="vk-tts" hidden>
|
||||
<div class="vk-tts-title">
|
||||
<span class="vk-icon" data-icon="wave"></span>
|
||||
<span class="vk-tts-heading">Text to speech</span>
|
||||
<span id="tts-target" class="vk-mono vk-tts-sub">not implemented</span>
|
||||
<button id="tts-close" class="btn btn-ghost vk-icon-btn" type="button" aria-label="Close">
|
||||
<span class="vk-icon" data-icon="x"></span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="vk-tts-settings">
|
||||
<span class="vk-micro-label">Voice settings</span>
|
||||
<span class="vk-chip vk-chip-on">sv-SE · Mattias</span>
|
||||
<span class="vk-chip">rate 1.0×</span>
|
||||
<span class="vk-chip vk-chip-on">yield to call</span>
|
||||
<span class="vk-chip">duck 30%</span>
|
||||
<span class="vk-chip vk-chip-on">queue lines</span>
|
||||
</div>
|
||||
<div class="vk-tts-body">
|
||||
<textarea id="tts-input" class="vk-tts-field" rows="3" placeholder="Speak text into the call…"></textarea>
|
||||
<div class="vk-tts-meta">
|
||||
<span class="vk-mono vk-dim">voice audio is not implemented yet</span>
|
||||
<button id="tts-speak" class="btn btn-primary vk-small-btn" type="button">Speak</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="composer" class="vk-composer">
|
||||
<span id="composer-state-icon" class="vk-icon vk-dim"></span>
|
||||
<span id="composer-copy" class="vk-composer-copy"></span>
|
||||
<button id="tts-toggle" class="btn btn-secondary vk-icon-btn vk-tts-toggle" type="button" title="Text to speech">
|
||||
<span class="vk-icon" data-icon="wave"></span>
|
||||
</button>
|
||||
<button id="send" class="btn btn-primary vk-send" type="button" disabled>Send</button>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<aside class="vk-right">
|
||||
<div class="vk-right-scroll">
|
||||
<section class="vk-right-section">
|
||||
<div class="vk-section-head">
|
||||
<span class="vk-rail-label vk-rail-label-flat">In voice</span>
|
||||
<span id="voice-count" class="vk-mono vk-dim"></span>
|
||||
</div>
|
||||
<div id="right-voice" class="vk-right-list"></div>
|
||||
</section>
|
||||
|
||||
<section class="vk-right-section">
|
||||
<div class="vk-section-head">
|
||||
<span class="vk-rail-label vk-rail-label-flat">Favourites</span>
|
||||
</div>
|
||||
<div id="right-favourites" class="vk-right-list"></div>
|
||||
</section>
|
||||
|
||||
<section class="vk-right-section">
|
||||
<div class="vk-section-head">
|
||||
<span class="vk-rail-label vk-rail-label-flat">Open DMs & groups</span>
|
||||
<span id="dm-count" class="vk-mono vk-dim"></span>
|
||||
</div>
|
||||
<div id="right-dms" class="vk-right-list"></div>
|
||||
</section>
|
||||
</div>
|
||||
<div class="vk-right-footer vk-mono vk-dim">full roster sits behind the guild header</div>
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
<section class="vk-console">
|
||||
<div class="vk-console-bar">
|
||||
<button id="console-toggle" class="vk-console-button" type="button">
|
||||
<span id="console-caret" class="vk-icon" data-icon="caretUp"></span>
|
||||
Agent console
|
||||
</button>
|
||||
<div class="vk-console-tabs">
|
||||
<button class="vk-console-tab" data-console-tab="tools" type="button">Tool calls</button>
|
||||
<button class="vk-console-tab" data-console-tab="events" type="button">Events</button>
|
||||
<button class="vk-console-tab" data-console-tab="transcript" type="button">Transcript</button>
|
||||
</div>
|
||||
<div class="vk-ticker"><span id="ticker-line">waiting for events</span></div>
|
||||
<div class="vk-console-status vk-mono">
|
||||
<span id="console-count">0 events</span>
|
||||
<span class="vk-health-item"><span id="mcp-dot" class="vk-dot"></span><span id="mcp-state">bridge …</span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="console-drawer" class="vk-console-drawer" hidden>
|
||||
<div id="console-panel-tools" class="vk-console-panel">
|
||||
<div class="vk-roadmap">
|
||||
<span class="tag tag-outline">roadmap</span>
|
||||
<p>MCP tool-call tracing is not implemented yet. Agent tool calls will appear here once the LLM attachment lands.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="console-panel-events" class="vk-console-panel">
|
||||
<div id="event-log" class="vk-event-log"></div>
|
||||
</div>
|
||||
<div id="console-panel-transcript" class="vk-console-panel">
|
||||
<div class="vk-roadmap">
|
||||
<span class="tag tag-outline">roadmap</span>
|
||||
<p>Voice transcription (STT/TTS) is not implemented yet. Transcript segments will appear here once voice audio lands.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div id="settings-overlay" class="vk-overlay" hidden>
|
||||
<div class="vk-settings-panel elev-lg" role="dialog" aria-label="Settings">
|
||||
<div class="vk-settings-head">
|
||||
<span class="vk-settings-title">Settings</span>
|
||||
<button id="settings-close" class="btn btn-ghost vk-icon-btn" type="button" aria-label="Close">
|
||||
<span class="vk-icon" data-icon="x"></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="vk-settings-body">
|
||||
<section class="vk-settings-section">
|
||||
<div class="vk-section-head">
|
||||
<span class="vk-rail-label vk-rail-label-flat">Core process</span>
|
||||
<span class="vk-settings-actions">
|
||||
<button id="core-start" class="btn btn-primary vk-small-btn" type="button">Start</button>
|
||||
<button id="core-stop" class="btn btn-secondary vk-small-btn" type="button">Stop</button>
|
||||
<button id="core-restart" class="btn btn-secondary vk-small-btn" type="button">Restart</button>
|
||||
</span>
|
||||
</div>
|
||||
<div id="core-status" class="vk-settings-card"></div>
|
||||
</section>
|
||||
|
||||
<section class="vk-settings-section">
|
||||
<div class="vk-section-head">
|
||||
<span class="vk-rail-label vk-rail-label-flat">Account login</span>
|
||||
<span class="vk-settings-actions">
|
||||
<button id="auth-start" class="btn btn-primary vk-small-btn" type="button">Start QR login</button>
|
||||
<button id="auth-cancel" class="btn btn-secondary vk-small-btn" type="button">Cancel</button>
|
||||
<button id="auth-restart" class="btn btn-secondary vk-small-btn" type="button">Restart with token</button>
|
||||
</span>
|
||||
</div>
|
||||
<div id="auth-status" class="vk-settings-card"></div>
|
||||
<div id="auth-qr" class="vk-qr" hidden></div>
|
||||
<form id="auth-captcha" class="vk-settings-row" hidden>
|
||||
<input id="auth-captcha-key" class="input" placeholder="hCaptcha response token" />
|
||||
<button class="btn btn-secondary vk-small-btn" type="submit">Submit captcha</button>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<section class="vk-settings-section">
|
||||
<div class="vk-section-head">
|
||||
<span class="vk-rail-label vk-rail-label-flat">Visible guilds</span>
|
||||
<button id="guilds-show-all" class="btn btn-secondary vk-small-btn" type="button">Show all</button>
|
||||
</div>
|
||||
<div id="guild-visibility" class="vk-settings-card"></div>
|
||||
</section>
|
||||
|
||||
<section class="vk-settings-section">
|
||||
<div class="vk-section-head">
|
||||
<span class="vk-rail-label vk-rail-label-flat">Action log</span>
|
||||
<button id="logs-refresh" class="btn btn-secondary vk-small-btn" type="button">Refresh</button>
|
||||
</div>
|
||||
<div id="action-log" class="vk-log"></div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="toasts" class="vk-toasts"></div>
|
||||
|
||||
<script src="icons.js"></script>
|
||||
<script src="api.js"></script>
|
||||
<script src="app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user