pixelcrew 0.2.3 → 0.2.6

package/src/dashboard/index.html

@@ -16,6 +16,7 @@
   <div class="crt-vignette"></div>
 
   <div class="pixel-app">
+    <!-- STARTUP OFFICE HEADER -->
     <!-- STARTUP OFFICE HEADER -->
     <header class="arcade-header">
       <div class="header-left">
@@ -34,24 +35,63 @@
 
       <div class="header-center">
         <div class="office-meters">
-          <div class="meter-item">
+          <div class="meter-item" title="Team Fuel Meter">
             <span class="meter-label">☕ COFFEE:</span>
-            <div class="pixel-meter"><div class="pixel-meter-fill" id="coffeeFill" style="width: 88%;"></div></div>
+            <div class="pixel-meter"><div class="pixel-meter-fill" id="coffeeFill" style="width: 92%;"></div></div>
           </div>
-          <div class="meter-item">
+          <div class="meter-item" title="Swarm Execution Velocity">
             <span class="meter-label">⚡ VELOCITY:</span>
-            <div class="pixel-meter"><div class="pixel-meter-fill velocity" id="velocityFill" style="width: 95%;"></div></div>
+            <div class="pixel-meter"><div class="pixel-meter-fill velocity" id="velocityFill" style="width: 98%;"></div></div>
           </div>
         </div>
         <div class="status-indicator" id="swarmStatusBadge">
           <span class="status-dot" id="statusDot"></span>
           <span class="status-text" id="swarmStatusText">STANDBY</span>
         </div>
+        <div class="provider-indicator clickable-badge" id="providerBadge" title="Click to inspect / switch Coding Agent Provider">
+          <span class="provider-icon" id="providerIcon">🪐</span>
+          <div class="provider-meta">
+            <span class="provider-label">PROVIDER:</span>
+            <span class="provider-name" id="providerName">ANTIGRAVITY</span>
+          </div>
+          <span class="provider-chevron">▼</span>
+        </div>
       </div>
 
       <div class="header-right">
+        <!-- REAL-TIME TOKEN TELEMETRY BADGE -->
+        <div class="token-telemetry-badge clickable-badge" id="btnTokenAnalyticsModal" title="Click to open Real-Time Token Telemetry & Analytics Center">
+          <span class="token-telemetry-icon">⚡</span>
+          <div class="token-telemetry-meta">
+            <span class="token-telemetry-label">TASK TOKENS:</span>
+            <span class="token-telemetry-val" id="headerTokenVal">0 tok</span>
+          </div>
+          <span class="token-telemetry-pill" id="headerSavedPill">72% SAVED</span>
+        </div>
+
+        <!-- PROCEDURAL LO-FI MUSIC PLAYER -->
+        <div class="lofi-player-box" id="lofiPlayerBox" title="Procedural Lo-Fi Music Synthesizer & Radio">
+          <button class="pixel-btn btn-sm btn-lofi" id="btnLofiToggle" title="Play / Pause Lo-Fi Beats">
+            <span id="lofiPlayIcon">▶</span> <span id="lofiBtnLabel">LO-FI BEATS</span>
+          </button>
+          <div class="lofi-visualizer" id="lofiVisualizer">
+            <div class="lofi-bar"></div>
+            <div class="lofi-bar"></div>
+            <div class="lofi-bar"></div>
+            <div class="lofi-bar"></div>
+            <div class="lofi-bar"></div>
+          </div>
+          <select class="lofi-select" id="lofiTrackSelect" title="Select Lo-Fi Track Preset">
+            <option value="floor42">☕ Floor 42 Midnight</option>
+            <option value="rainy">🌧️ Rainy Terminal</option>
+            <option value="antigravity">🪐 Antigravity Orbit</option>
+            <option value="retro8bit">🕹️ 8-Bit Retro Café</option>
+          </select>
+          <input type="range" class="lofi-vol-slider" id="lofiVolSlider" min="0" max="100" value="70" title="Lo-Fi Volume" />
+        </div>
+
         <button class="pixel-btn btn-sm btn-primary" id="btnOneShotModal" title="Open OneShot Multi-Agent Website Generator">
-          <span>✦</span> ONESHOT STUDIO
+          <span>✦</span> ONESHOT
         </button>
         <button class="pixel-btn btn-sm btn-info" id="btnReportsToggle" title="Open Sprint Audit Reports History [R]">
           <span>📋</span> REPORTS (<span id="reportsCountBadge">0</span>)
@@ -69,35 +109,66 @@
           <span>🔄</span> RESET
         </button>
         <button class="pixel-btn btn-sm btn-primary" id="btnDemo" title="Launch Startup Sprint Demo">
-          <span>🚀</span> SPRINT DEMO
+          <span>🚀</span> DEMO
         </button>
       </div>
     </header>
 
+    <!-- LIVE ACTIVE TASK HUD BANNER -->
+    <section class="active-task-hud" id="activeTaskHud">
+      <div class="hud-left">
+        <span class="hud-pulse-dot"></span>
+        <span class="hud-label">ACTIVE OBJECTIVE:</span>
+        <span class="hud-task-text" id="hudActiveTaskText">Ready for mission dispatch — type / or select a ticket below</span>
+      </div>
+      <div class="hud-right">
+        <div class="hud-token-badge" id="hudTokenBadge" title="Real-time tokens consumed for this task">
+          <span class="hud-token-icon">⚡</span>
+          <span class="hud-token-val" id="hudTokenVal">0 tokens</span>
+          <span class="hud-cost-val" id="hudCostVal">($0.00)</span>
+        </div>
+        <div class="hud-tool-badge" id="hudToolBadge" style="display: none;">
+          <span class="tool-badge-icon">⚡</span>
+          <span class="tool-badge-name" id="hudToolName">TOOL: view_file</span>
+        </div>
+        <div class="hud-timer-box">
+          <span class="hud-timer-label">SPRINT TIME:</span>
+          <span class="hud-timer-val" id="hudTimerVal">00:00</span>
+        </div>
+      </div>
+    </section>
+
     <!-- SPRINT OBJECTIVE & TASK BAR -->
     <section class="task-dispatch-section">
       <form class="task-form" id="taskForm">
         <div class="prompt-input-wrapper">
-          <span class="prompt-prefix">SPRINT GOAL &gt;</span>
+          <span class="prompt-prefix">SPRINT &gt;</span>
           <input 
             type="text" 
             class="pixel-input" 
             id="taskInput" 
-            placeholder="Assign product milestone to the engineering team (e.g. 'Optimize Prisma queries & deploy CRM search bar')..." 
+            placeholder="Type / for slash commands (/oneshot, /plan, /crew, /review...) or assign any product goal..." 
             autocomplete="off"
           />
           <button type="submit" class="pixel-btn btn-primary" id="btnSubmitTask">
-            <span>💻</span> ASSIGN SPRINT
+            <span>💻</span> RUN / DISPATCH
           </button>
+          
+          <!-- SLASH COMMAND AUTOCOMPLETE POPUP -->
+          <div class="command-autocomplete-popup" id="commandAutocomplete" style="display: none;">
+            <div class="autocomplete-header">COMMANDS &nbsp;<span class="autocomplete-hint">Tab or Enter to select • Esc to dismiss</span></div>
+            <div class="autocomplete-list" id="autocompleteList"></div>
+          </div>
         </div>
       </form>
       <div class="quick-prompts">
         <span class="quick-title">QUICK TICKETS:</span>
-        <button class="quick-tag" data-prompt="Build a modern website for a design agency specializing in AI products. Dark, editorial, premium.">✦ OneShot: AI Agency</button>
-        <button class="quick-tag" data-prompt="Build a modern portfolio for an AI engineer inspired by editorial design and developer tools.">✦ OneShot: AI Portfolio</button>
+        <button class="quick-tag" data-prompt="/oneshot Build a modern website for a design agency specializing in AI products. Dark, editorial, premium.">✦ /oneshot AI Agency</button>
+        <button class="quick-tag" data-prompt="/oneshot Build a modern portfolio for an AI engineer inspired by editorial design and developer tools.">✦ /oneshot AI Portfolio</button>
+        <button class="quick-tag" data-prompt="/plan Build high-performance real-time SaaS vector query engine">⚡ /plan SaaS Infra</button>
+        <button class="quick-tag" data-prompt="/review">🔍 /review Quality</button>
+        <button class="quick-tag" data-prompt="/doctor">🩺 /doctor Providers</button>
         <button class="quick-tag" data-prompt="Find slow Prisma queries and create optimized database index">☕ DB: Optimize Indexes</button>
-        <button class="quick-tag" data-prompt="Build customer CRM dashboard with React and API endpoints">🎨 FE/BE: Build CRM Module</button>
-        <button class="quick-tag" data-prompt="Audit security authentication and profile Core Web Vitals">🛡️ SEC/PERF: Audit & Speed</button>
       </div>
     </section>
 
@@ -157,16 +228,20 @@
         </div>
       </section>
 
-      <!-- BOTTOM SPLIT: SLACK / TERMINAL & JIRA SKILLS -->
+      <!-- BOTTOM SPLIT: SIDECHAT STREAM / SLACK & JIRA SKILLS -->
       <div class="bottom-split-section">
-        <!-- STARTUP SLACK CHAT & LIVE TERMINAL -->
+        <!-- STARTUP STREAM & LIVE CODING AGENT SIDECHAT -->
         <section class="activity-panel pixel-panel">
           <div class="panel-header">
-            <div class="terminal-controls">
-              <span class="term-btn term-red"></span>
-              <span class="term-btn term-yellow"></span>
-              <span class="term-btn term-green"></span>
-              <span class="panel-title">#engineering-feed // SLACK STREAM</span>
+            <div class="stream-tab-controls">
+              <button class="stream-tab active" id="tabSidechat" data-mode="sidechat">
+                <span class="tab-dot live-pulse"></span>
+                <span>⚡ #AI-SIDECHAT</span>
+                <span class="tab-badge" id="sidechatCountBadge">LIVE</span>
+              </button>
+              <button class="stream-tab" id="tabSlack" data-mode="slack">
+                <span>💬 #TEAM-SLACK</span>
+              </button>
             </div>
             <div class="activity-actions">
               <div class="filter-group" id="agentFilters">
@@ -179,10 +254,28 @@
                 <button class="filter-chip" data-filter="performance">#PERF</button>
                 <button class="filter-chip" data-filter="qa">#QA</button>
               </div>
+              <button class="pixel-btn btn-xs" id="btnAutoScroll" title="Toggle Auto-Scroll Lock">
+                <span id="autoScrollIcon">⬇️</span> LOCK
+              </button>
               <button class="pixel-btn btn-xs" id="btnClearLogs">CLEAR</button>
             </div>
           </div>
-          <div class="terminal-logs" id="terminalLogs">
+
+          <!-- SIDECHAT STREAM CONTAINER (ANTIGRAVITY IDE SIDECHAT VIEW) -->
+          <div class="sidechat-stream-container" id="sidechatStream">
+            <div class="sidechat-intro-card">
+              <div class="sidechat-intro-header">
+                <span class="intro-icon">🪐</span>
+                <div>
+                  <div class="intro-title">ANTIGRAVITY REALTIME AGENT STREAM</div>
+                  <div class="intro-sub">Live telemetry: thought reasoning, tool invocations, subagents & file modifications</div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- STANDARD SLACK TERMINAL LOGS -->
+          <div class="terminal-logs" id="terminalLogs" style="display: none;">
             <div class="log-entry log-system">
               <span class="log-time">[09:00:00]</span>
               <span class="log-agent log-agent-orchestrator">SLACKBOT</span>
@@ -381,14 +474,121 @@
                   <span>🌐</span> OPEN LIVE PREVIEW
                 </a>
               </div>
-              <div class="preview-iframe-wrapper">
-                <iframe id="sitePreviewIframe" class="site-preview-iframe" src="about:blank"></iframe>
+              <div class="preview-frame-wrapper" id="previewFrameWrapper">
+                <div class="preview-placeholder">Live preview will appear here upon sprint completion.</div>
               </div>
             </div>
           </div>
         </div>
       </div>
     </div>
+
+    <!-- REAL-TIME TOKEN TELEMETRY & ANALYTICS MODAL -->
+    <div class="pixel-modal-backdrop" id="tokenAnalyticsModal">
+      <div class="pixel-modal-card token-modal-card">
+        <div class="modal-header">
+          <div class="modal-title-box">
+            <span class="modal-agent-icon">⚡</span>
+            <h2 class="modal-agent-name" style="color: var(--color-green);">REAL-TIME TOKEN TELEMETRY & EFFICIENCY CENTER</h2>
+          </div>
+          <button class="pixel-btn btn-sm btn-warn" id="btnCloseTokenModal">✕</button>
+        </div>
+        <div class="modal-body token-modal-body">
+          <!-- Top Stats KPI Grid -->
+          <div class="token-analytics-kpi-grid">
+            <div class="token-kpi-card">
+              <span class="kpi-label">TOTAL TOKENS USED</span>
+              <span class="kpi-val text-cyan" id="modalActualTokens">0</span>
+              <span class="kpi-sub" id="modalTokenVelocity">⚡ 0 tok/sec</span>
+            </div>
+            <div class="token-kpi-card highlight-green">
+              <span class="kpi-label">TOKENS CONSERVED</span>
+              <span class="kpi-val text-green" id="modalSavedTokens">0 (72%)</span>
+              <span class="kpi-sub" id="modalRawTokens">Raw Est: 0</span>
+            </div>
+            <div class="token-kpi-card">
+              <span class="kpi-label">ESTIMATED COST</span>
+              <span class="kpi-val text-gold" id="modalEstCost">$0.0000</span>
+              <span class="kpi-sub" id="modalCostSaved">Saved: $0.0000</span>
+            </div>
+            <div class="token-kpi-card">
+              <span class="kpi-label">PROMPT / COMPLETION</span>
+              <span class="kpi-val" id="modalPromptOutputRatio">0 / 0</span>
+              <span class="kpi-sub" id="modalCachedTokens">Cached: 0</span>
+            </div>
+          </div>
+
+          <!-- Real-Time Token Generation Sparkline Canvas -->
+          <div class="token-chart-section">
+            <div class="chart-header">
+              <span class="chart-title">REAL-TIME TOKEN STREAM (LIVE EMISSIONS)</span>
+              <span class="chart-live-indicator">● LIVE SSE STREAM</span>
+            </div>
+            <div class="sparkline-container">
+              <canvas id="tokenSparklineCanvas" width="800" height="130" class="sparkline-canvas"></canvas>
+            </div>
+          </div>
+
+          <!-- Per-Agent Token Distribution Bars -->
+          <div class="token-agent-breakdown-section">
+            <div class="breakdown-header">
+              <span class="breakdown-title">PER-AGENT TOKEN ATTRIBUTION</span>
+              <span class="breakdown-subtitle">Live tokens consumed across engineering squads</span>
+            </div>
+            <div class="agent-token-bars" id="agentTokenBars">
+              <!-- Dynamically populated by app.js -->
+            </div>
+          </div>
+
+          <!-- Optimization Strategies Active -->
+          <div class="token-strategies-card">
+            <div class="strategies-title">ACTIVE TOKEN CONSERVATION STRATEGIES:</div>
+            <div class="strategies-pills-list">
+              <span class="strat-pill active">✓ AST Symbol Graph Skeletonization (-45%)</span>
+              <span class="strat-pill active">✓ Sliding Window Context Pruning (-15%)</span>
+              <span class="strat-pill active">✓ Prompt Caching Prefix Anchoring (-12%)</span>
+              <span class="strat-pill active">✓ Compact JSON Envelopes (-8%)</span>
+              <span class="strat-pill active">✓ Isolated Subagent Sandboxes</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- PROVIDER SELECTOR & ENVIRONMENT DIAGNOSTICS MODAL -->
+    <div class="pixel-modal-backdrop" id="providerModal">
+      <div class="pixel-modal-card provider-modal-card">
+        <div class="modal-header">
+          <div class="modal-title-box">
+            <span class="modal-agent-icon">🪐</span>
+            <h2 class="modal-agent-name" style="color: var(--color-cyan);">CODING AGENT PROVIDER & RUNTIME</h2>
+          </div>
+          <button class="pixel-btn btn-sm btn-warn" id="btnCloseProviderModal">✕</button>
+        </div>
+        <div class="modal-body provider-modal-body">
+          <div class="provider-info-banner">
+            <div class="provider-banner-left">
+              <span class="active-prov-icon" id="modalActiveProvIcon">🪐</span>
+              <div>
+                <div class="active-prov-title">ACTIVE: <span id="modalActiveProvName">Google Antigravity</span></div>
+                <div class="active-prov-desc" id="modalActiveProvDesc">Google Antigravity SDK & Advanced Agentic Coding environment</div>
+              </div>
+            </div>
+            <span class="active-status-badge">● RUNNING IN REALTIME</span>
+          </div>
+
+          <div class="provider-list-title">DETECTED PROVIDERS & IDES:</div>
+          <div class="provider-grid" id="providerGrid">
+            <!-- Populated by app.js -->
+          </div>
+
+          <div class="provider-tips">
+            <span>💡 <strong>Tip:</strong> PixelCrew automatically syncs skills and streams live actions across Google Antigravity, Kiro, Claude Code, and Cursor IDE.</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
     <footer class="arcade-footer">
       <div class="footer-left">
         <span>PRESS [1..6] EMPLOYEE PROFILE</span>