From 29b93bed98fd728acd25cc6d8ba26e6aaf4c584b Mon Sep 17 00:00:00 2001 From: dj-oyu <68707227+dj-oyu@users.noreply.github.com> Date: Wed, 25 Feb 2026 04:46:07 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20add=20Orch=20tab=20to=20miniapp=20?= =?UTF-8?q?=E2=80=94=20orchestration=20room=20canvas=20with=20real=20WS?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Adds a 7th "Orch" tab to the Telegram Mini App that displays the orchestration room canvas live via WebSocket. - Tab indicator pill updated from 100%/6 to 100%/7 - Orch-specific CSS: badge styles, canvas-wrap, status dot + blink animation - Silkscreen font + map.js loaded for pixel-font and map rendering - Canvas panel: conductor/secretary badges (left), 320×320 canvas (center), s0–s4 subagent slot badges (right), WS status bar (bottom) - Full JS orchestration engine (_orch* namespace): - Character system with bob animation, state rings, speech bubbles - _orchCharForId(): heartbeat→secretary, subagent-N→slot, else→conductor - Spawn/GC lifecycle: subagents walk door↔station; main sessions toggle alive - Conversation: characters move toward each other, say text, return home - requestAnimationFrame render loop with dt capped at 80ms - connectOrchWs(): opens /miniapp/api/orchestration/ws, handles init (snapshot replay) and event messages; auto-reconnects while tab active - disconnectOrchWs(): closes WS, clears reconnect timer - Lazy orchInit(): canvas initialised on first Orch tab open only Co-Authored-By: Claude Sonnet 4.6 --- pkg/miniapp/static/index.html | 263 +++++++++++++++++++++++++++++++++- 1 file changed, 262 insertions(+), 1 deletion(-) diff --git a/pkg/miniapp/static/index.html b/pkg/miniapp/static/index.html index 2ad862472..569fc7132 100644 --- a/pkg/miniapp/static/index.html +++ b/pkg/miniapp/static/index.html @@ -84,7 +84,7 @@ top: 2px; bottom: 2px; left: 2px; - width: calc(100%/6 - 2px); + width: calc(100%/7 - 2px); border-radius: 8px; background: var(--tab-pill-bg); box-shadow: 0 0.5px 2px rgba(0,0,0,0.12), 0 0.5px 1px rgba(0,0,0,0.08); @@ -768,7 +768,30 @@ cursor: pointer; } + /* ── Orch panel ── */ + .orch-room-row { display:flex; align-items:flex-start; padding:12px 0; } + .orch-side { display:flex; flex-direction:column; align-items:center; gap:12px; padding-top:20px; width:40px; flex-shrink:0; } + .orch-badge { display:flex; flex-direction:column; align-items:center; gap:3px; opacity:0.3; transition:opacity 0.3s; } + .orch-badge.alive { opacity:1; } + .orch-badge.alive .orch-badge-label { color:#4a6ac0; } + .orch-badge.alive .orch-badge-dot { background:#4ade80; } + .orch-badge.toolcall .orch-badge-dot { background:#fb923c; animation:orch-blink 0.2s step-end infinite; } + .orch-badge.waiting .orch-badge-dot { background:#60a5fa; } + .orch-badge.talking .orch-badge-label{ color:#facc15; } + .orch-badge.talking .orch-badge-dot { background:#facc15; animation:orch-blink 0.6s step-end infinite; } + .orch-badge-emoji { font-size:16px; line-height:1; } + .orch-badge-label { font-size:7px; color:var(--hint); letter-spacing:0.05em; text-transform:uppercase; } + .orch-badge-dot { width:4px; height:4px; border-radius:50%; background:var(--hint); } + @keyframes orch-blink { 50% { opacity:0; } } + .orch-canvas-wrap { flex:1; min-width:0; border-radius:12px; overflow:hidden; background:#060810; } + .orch-canvas-wrap canvas { image-rendering:pixelated; image-rendering:crisp-edges; display:block; width:100%; aspect-ratio:1/1; } + .orch-status { text-align:center; font-size:11px; color:var(--hint); padding:6px 0 4px; } + .orch-dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--hint); margin-right:4px; vertical-align:middle; } + .orch-dot.on { background:#4ade80; } + + + @@ -781,6 +804,7 @@ + @@ -852,6 +876,57 @@ +
+
+
+
+
👑
+
CNDR
+
+
+
+
👩‍💼
+
SEC
+
+
+
+
+ +
+
+
+
🔍
+
SCOUT
+
+
+
+
📊
+
ANLY
+
+
+
+
💻
+
CODE
+
+
+
+
🔧
+
WRKR
+
+
+
+
🎯
+
CORD
+
+
+
+
+
+ + Connecting… +
+
+