Add live voice transcript, keyboard shortcuts, agent topology map

#3 Live Voice Transcript: Real-time subtitle bar at bottom of screen shows
what JARVIS hears as you speak. Interim results appear word-by-word via
SpeechRecognition.onresult interim events; bar fades 3.2s after final result.

#4 Keyboard Shortcuts: Global keydown handler (skips input fields):
F5=refresh all, Esc=close modals/overlays, M=mute mic toggle,
Space=focus chat input, 1/2/3/4=switch HOME/ALERTS/NEWS/AGENTS tabs.
Shortcut hints added to Ctrl+K palette footer.

#5 Agent Topology Map: TOPOLOGY button in AGENTS tab switches from card
view to animated ring-based canvas showing all agents by type (Proxmox=green
inner ring, HA=yellow mid ring, Linux/Windows=blue outer ring). Live particles
flow hub→agents; offline nodes shown in red. Reads from rendered agent cards.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-06-17 03:32:48 +00:00
parent b014fd96ab
commit 2c712a4fc6
4 changed files with 180 additions and 4 deletions
+12 -4
View File
@@ -243,8 +243,12 @@
</div>
<div id="news-list"><div class="loading-shimmer"></div></div>
</div>
<div id="tab-agents" class="tab-pane" style="overflow-y:auto;flex:1">
<div id="agents-list"><div class="loading-shimmer"></div></div>
<div id="tab-agents" class="tab-pane" style="overflow-y:auto;flex:1;display:flex;flex-direction:column">
<div style="display:flex;align-items:center;justify-content:flex-end;padding:2px 0 4px;gap:6px;flex-shrink:0">
<button id="agent-topo-btn" onclick="toggleAgentTopo()" style="font-family:var(--font-display);font-size:0.42rem;letter-spacing:1.5px;background:rgba(0,212,255,0.06);border:1px solid rgba(0,212,255,0.25);color:var(--cyan);padding:3px 10px;border-radius:2px;cursor:pointer">⬡ TOPOLOGY</button>
</div>
<div id="agents-list" style="flex:1;overflow-y:auto"><div class="loading-shimmer"></div></div>
<canvas id="agentTopoCanvas" style="display:none;flex:1;width:100%;min-height:260px"></canvas>
</div>
<div id="tab-intel" class="tab-pane" style="overflow-y:auto;flex:1;padding:4px 0">
<div id="intel-list"><div class="loading-shimmer"></div></div>
@@ -271,7 +275,10 @@
</div>
</div>
<!-- Bottom Bar -->
<!-- Voice Transcript Bar -->
<div id="voiceTranscriptBar" style="position:fixed;bottom:44px;left:50%;transform:translateX(-50%);max-width:580px;width:88%;background:rgba(0,8,16,0.9);border:1px solid rgba(0,212,255,0.3);border-radius:3px;font-family:var(--font-mono);font-size:0.62rem;color:rgba(0,212,255,0.9);letter-spacing:1px;padding:5px 14px;text-align:center;z-index:900;opacity:0;transition:opacity 0.18s ease;pointer-events:none"></div>
<!-- Bottom Bar -->
<div id="bottomBar">
<div class="bb-item">
<div class="bb-dot online"></div>
@@ -345,7 +352,8 @@
<input id="cmdPaletteInput" type="text" placeholder="TYPE A COMMAND..." autocomplete="off" spellcheck="false"/>
<div id="cmdPaletteList"></div>
<div id="cmdPaletteFooter">
<span>↑↓ navigate</span><span>↵ execute</span><span>ESC close</span><span>CTRL+K toggle</span>
<span>↑↓ navigate</span><span>↵ execute</span><span>ESC close</span>
<span style="margin-left:auto;opacity:0.5">1-4 tabs · M mute · F5 refresh · Space→input</span>
</div>
</div>
</div>