437 lines
25 KiB
HTML
437 lines
25 KiB
HTML
<!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-scope">
|
|
<button id="scope-guild" class="vk-scope-btn active" type="button">Guild</button>
|
|
<button id="scope-dm" class="vk-scope-btn" type="button">DM</button>
|
|
</div>
|
|
|
|
<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">
|
|
<button id="core-start-banner" class="btn btn-primary vk-small-btn vk-start-server" type="button" hidden>
|
|
Start server
|
|
</button>
|
|
<button
|
|
id="client-audio"
|
|
class="btn btn-secondary vk-small-btn vk-client-audio"
|
|
type="button"
|
|
title="Play the call in this browser"
|
|
>
|
|
<span class="vk-icon" data-icon="speaker"></span>
|
|
<span class="vk-btn-text">Client audio</span>
|
|
</button>
|
|
<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>
|
|
<span class="vk-btn-text">Settings</span>
|
|
</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 id="rail-guild" class="vk-rail-scope">
|
|
<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">People</div>
|
|
<div id="people-list" class="vk-rail-list"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="rail-dm" class="vk-rail-scope" hidden>
|
|
<div class="vk-rail-section">
|
|
<div class="vk-rail-label">Direct messages</div>
|
|
<div id="dm-rail-list" class="vk-rail-list"></div>
|
|
</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>
|
|
<select id="tts-provider" class="vk-select">
|
|
<option value="local">local TTS</option>
|
|
<option value="api">API TTS</option>
|
|
</select>
|
|
<span class="vk-chip vk-chip-on">duck on voice</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" id="tts-status">idle</span>
|
|
<button id="tts-stop" class="btn btn-secondary vk-small-btn" type="button">Stop</button>
|
|
<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>
|
|
</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-transcript">
|
|
<div class="vk-transcript-toolbar">
|
|
<span id="transcript-status" class="vk-mono vk-dim">no capture session</span>
|
|
<button id="transcript-refresh" class="btn btn-secondary vk-small-btn" type="button">Refresh</button>
|
|
</div>
|
|
<div id="transcript-list" class="vk-transcript-list"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<nav id="mobile-tabs" class="vk-tabbar" aria-label="Sections">
|
|
<button class="vk-tab" data-mobile-tab="users" type="button">
|
|
<span class="vk-icon" data-icon="users"></span>
|
|
<span>Users</span>
|
|
</button>
|
|
<button class="vk-tab" data-mobile-tab="chat" type="button">
|
|
<span class="vk-icon" data-icon="hash"></span>
|
|
<span>Chat</span>
|
|
<span id="mobile-chat-badge" class="vk-rail-badge unread" hidden></span>
|
|
</button>
|
|
<button class="vk-tab" data-mobile-tab="call" type="button">
|
|
<span class="vk-icon" data-icon="volume"></span>
|
|
<span>Call</span>
|
|
</button>
|
|
<button class="vk-tab" data-mobile-tab="activity" type="button">
|
|
<span class="vk-icon" data-icon="activity"></span>
|
|
<span>Activity</span>
|
|
</button>
|
|
</nav>
|
|
</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">Visible guilds</span>
|
|
<span class="vk-settings-actions">
|
|
<button id="guilds-save" class="btn btn-primary vk-small-btn" type="button" disabled>Save</button>
|
|
<button id="guilds-hide-all" class="btn btn-secondary vk-small-btn" type="button">Hide all</button>
|
|
<button id="guilds-show-all" class="btn btn-secondary vk-small-btn" type="button">Show all</button>
|
|
</span>
|
|
</div>
|
|
<div id="guild-visibility" class="vk-settings-card"></div>
|
|
</section>
|
|
|
|
<details class="vk-settings-group" open>
|
|
<summary class="vk-settings-summary">
|
|
<span class="vk-icon vk-caret" data-icon="caretDown"></span>
|
|
<span>Client</span>
|
|
</summary>
|
|
|
|
<div class="vk-settings-group-body">
|
|
<section class="vk-settings-section">
|
|
<div class="vk-section-head">
|
|
<span class="vk-rail-label vk-rail-label-flat">Bot audio</span>
|
|
<span class="vk-settings-actions">
|
|
<button id="audio-connect" class="btn btn-primary vk-small-btn" type="button">Connect devices</button>
|
|
<button id="audio-refresh" class="btn btn-secondary vk-small-btn" type="button">Refresh</button>
|
|
<button id="audio-capture" class="btn btn-secondary vk-small-btn" type="button">Start capture</button>
|
|
</span>
|
|
</div>
|
|
<div class="vk-settings-card">
|
|
<div class="vk-status-row">
|
|
<span class="vk-status-label">Audio engine</span>
|
|
<span class="vk-status-value" id="audio-status">checking…</span>
|
|
</div>
|
|
<div class="vk-status-row" id="audio-hint-row" hidden>
|
|
<span class="vk-status-label">Fix</span>
|
|
<span class="vk-status-value vk-dim" id="audio-hint"></span>
|
|
</div>
|
|
<div class="vk-status-row">
|
|
<span class="vk-status-label">TTS</span>
|
|
<span class="vk-status-value" id="audio-tts">—</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="vk-settings-section">
|
|
<div class="vk-section-head">
|
|
<span class="vk-rail-label vk-rail-label-flat">Speech</span>
|
|
<span class="vk-mono vk-dim" id="speech-status"></span>
|
|
</div>
|
|
<div class="vk-settings-card">
|
|
<div class="vk-status-row">
|
|
<span class="vk-status-label">TTS engine</span>
|
|
<select class="vk-select" id="speech-provider">
|
|
<option value="">Auto</option>
|
|
<option value="local">Local</option>
|
|
<option value="api">API</option>
|
|
</select>
|
|
</div>
|
|
<div class="vk-status-row">
|
|
<span class="vk-status-label">Language</span>
|
|
<select class="vk-select" id="speech-language">
|
|
<option value="">Auto</option>
|
|
</select>
|
|
</div>
|
|
<div class="vk-status-row">
|
|
<span class="vk-status-label">Voice</span>
|
|
<select class="vk-select" id="speech-voice">
|
|
<option value="">Default</option>
|
|
</select>
|
|
</div>
|
|
<div class="vk-status-row">
|
|
<span class="vk-status-label">STT</span>
|
|
<span class="vk-status-value vk-dim" id="speech-stt">—</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="vk-settings-section">
|
|
<div class="vk-section-head">
|
|
<span class="vk-rail-label vk-rail-label-flat">Display</span>
|
|
<span class="vk-mono vk-dim" id="timezone-status"></span>
|
|
</div>
|
|
<div class="vk-settings-card">
|
|
<div class="vk-status-row">
|
|
<span class="vk-status-label">Timezone</span>
|
|
<select class="vk-select" id="timezone-select"></select>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="vk-settings-section">
|
|
<div class="vk-section-head">
|
|
<span class="vk-rail-label vk-rail-label-flat">Browser audio</span>
|
|
<span class="vk-settings-actions">
|
|
<button id="browser-grant" class="btn btn-primary vk-small-btn" type="button">Enable browser audio</button>
|
|
</span>
|
|
</div>
|
|
<div class="vk-settings-card">
|
|
<div class="vk-status-row">
|
|
<span class="vk-status-label">Output device</span>
|
|
<select class="vk-select" id="browser-output">
|
|
<option value="">Browser default</option>
|
|
</select>
|
|
</div>
|
|
<div class="vk-status-row">
|
|
<span class="vk-status-label">Input device</span>
|
|
<select class="vk-select" id="browser-input" disabled>
|
|
<option value="">Mic puppeting not implemented</option>
|
|
</select>
|
|
</div>
|
|
<div class="vk-status-row">
|
|
<span class="vk-status-label">Call audio</span>
|
|
<span class="vk-status-value vk-dim" id="browser-audio-status">off</span>
|
|
</div>
|
|
<div class="vk-status-row">
|
|
<span class="vk-status-label">Note</span>
|
|
<span class="vk-status-value vk-dim" id="browser-hint">Browser audio needs HTTPS or localhost.</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</details>
|
|
|
|
<details class="vk-settings-group" open>
|
|
<summary class="vk-settings-summary">
|
|
<span class="vk-icon vk-caret" data-icon="caretDown"></span>
|
|
<span>Server</span>
|
|
</summary>
|
|
|
|
<div class="vk-settings-group-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">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>
|
|
</details>
|
|
</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>
|