ai-control-center 1.15.2

package/lib/web/public/office/js/chat-bubbles.js

@@ -0,0 +1,177 @@
+export class ChatBubbleSystem {
+  constructor() {
+    this.bubbles = [];
+    this.maxBubbles = 5;
+    this.bubbleDuration = 6000;
+  }
+
+  addBubble(agentId, text, type = 'normal') {
+    const bubble = {
+      id: Date.now() + Math.random(),
+      agentId,
+      text: text.substring(0, 120),
+      type,
+      createdAt: Date.now(),
+      opacity: 0,
+      fadeIn: true,
+    };
+    this.bubbles.push(bubble);
+    if (this.bubbles.length > this.maxBubbles) {
+      this.bubbles.shift();
+    }
+    return bubble;
+  }
+
+  update(deltaTime) {
+    const now = Date.now();
+    this.bubbles = this.bubbles.filter((b) => {
+      const age = now - b.createdAt;
+      if (age > this.bubbleDuration) return false;
+      if (b.fadeIn && b.opacity < 1) {
+        b.opacity = Math.min(1, b.opacity + deltaTime * 0.005);
+        if (b.opacity >= 1) b.fadeIn = false;
+      }
+      if (age > this.bubbleDuration - 1000) {
+        b.opacity = Math.max(0, (this.bubbleDuration - age) / 1000);
+      }
+      return true;
+    });
+  }
+
+  render(ctx, agents) {
+    for (const bubble of this.bubbles) {
+      const agent = agents[bubble.agentId] || agents[Object.keys(agents)[0]];
+      if (!agent) continue;
+
+      const x = agent.x;
+      const y = agent.y - 60;
+      const maxWidth = 200;
+      const padding = 8;
+
+      ctx.save();
+      ctx.globalAlpha = bubble.opacity;
+
+      ctx.font = '12px system-ui, sans-serif';
+      const lines = this._wrapText(ctx, bubble.text, maxWidth - padding * 2);
+      const lineHeight = 16;
+      const boxWidth = Math.min(
+        maxWidth,
+        Math.max(...lines.map((l) => ctx.measureText(l).width)) + padding * 2
+      );
+      const boxHeight = lines.length * lineHeight + padding * 2;
+
+      const colors = {
+        normal: '#ffffff',
+        thinking: '#fff3cd',
+        error: '#f8d7da',
+        success: '#d4edda',
+      };
+      ctx.fillStyle = colors[bubble.type] || colors.normal;
+      this._roundRect(ctx, x - boxWidth / 2, y - boxHeight, boxWidth, boxHeight, 8);
+      ctx.fill();
+      ctx.strokeStyle = '#ccc';
+      ctx.lineWidth = 1;
+      ctx.stroke();
+
+      // Triangle pointer
+      ctx.beginPath();
+      ctx.moveTo(x - 6, y);
+      ctx.lineTo(x, y + 8);
+      ctx.lineTo(x + 6, y);
+      ctx.fillStyle = colors[bubble.type] || colors.normal;
+      ctx.fill();
+
+      // Text
+      ctx.fillStyle = bubble.type === 'error' ? '#721c24' : '#333';
+      lines.forEach((line, i) => {
+        ctx.fillText(
+          line,
+          x - boxWidth / 2 + padding,
+          y - boxHeight + padding + lineHeight * (i + 1)
+        );
+      });
+
+      ctx.restore();
+    }
+  }
+
+  _wrapText(ctx, text, maxWidth) {
+    const words = text.split(' ');
+    const lines = [];
+    let currentLine = '';
+    for (const word of words) {
+      const test = currentLine ? currentLine + ' ' + word : word;
+      if (ctx.measureText(test).width > maxWidth && currentLine) {
+        lines.push(currentLine);
+        currentLine = word;
+      } else {
+        currentLine = test;
+      }
+    }
+    if (currentLine) lines.push(currentLine);
+    return lines.length ? lines : [''];
+  }
+
+  _roundRect(ctx, x, y, w, h, r) {
+    ctx.beginPath();
+    ctx.moveTo(x + r, y);
+    ctx.lineTo(x + w - r, y);
+    ctx.quadraticCurveTo(x + w, y, x + w, y + r);
+    ctx.lineTo(x + w, y + h - r);
+    ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h);
+    ctx.lineTo(x + r, y + h);
+    ctx.quadraticCurveTo(x, y + h, x, y + h - r);
+    ctx.lineTo(x, y + r);
+    ctx.quadraticCurveTo(x, y, x + r, y);
+    ctx.closePath();
+  }
+
+  generateMessage(agentRole, state) {
+    const messages = {
+      pm: {
+        working: [
+          'Analyzing requirements...',
+          'Writing user stories...',
+          'Prioritizing backlog...',
+          'Reviewing scope...',
+        ],
+        idle: ['Checking the roadmap', 'Coffee break ☕', 'Reviewing metrics'],
+        error: ['Hmm, that needs rework', 'Let me re-evaluate...'],
+      },
+      architect: {
+        working: [
+          'Designing architecture...',
+          'Drawing diagrams...',
+          'Evaluating trade-offs...',
+          'Planning components...',
+        ],
+        idle: ['Sketching ideas', 'Reading RFCs', 'Contemplating patterns'],
+        error: ['This design needs revision', 'Back to the whiteboard...'],
+      },
+      coder: {
+        working: [
+          'Writing code...',
+          'Implementing feature...',
+          'Fixing bugs...',
+          'Refactoring...',
+          'npm install...',
+        ],
+        idle: ['Browsing Stack Overflow', 'vim or emacs? 🤔', 'git status'],
+        error: ['Segfault! 💥', 'Undefined is not a function', 'Works on my machine...'],
+      },
+      reviewer: {
+        working: [
+          'Reviewing code...',
+          'Checking for bugs...',
+          'Running tests...',
+          'Analyzing coverage...',
+        ],
+        idle: ['Sharpening red pen', 'Reading best practices', 'LGTM 👍'],
+        error: ['Found issues...', 'This needs more tests', 'Requesting changes...'],
+      },
+    };
+    const role = messages[agentRole] || messages.coder;
+    const stateMessages = role[state] || role.idle;
+    return stateMessages[Math.floor(Math.random() * stateMessages.length)];
+  }
+}

package/lib/web/public/office/js/cost-overlay.js

@@ -0,0 +1,123 @@
+/**
+ * Cost Overlay — real-time token/cost panel for the office visualizer.
+ * Shows budget usage, tokens by stage, and cost by provider.
+ */
+
+export class CostOverlay {
+  constructor(container) {
+    this.container = container;
+    this.visible = false;
+    this.panel = null;
+    this.costData = null;
+    this._createPanel();
+  }
+
+  _createPanel() {
+    this.panel = document.createElement('div');
+    this.panel.className = 'cost-overlay-panel';
+    this.panel.style.cssText = `
+      position: absolute; top: 10px; right: 10px; width: 280px;
+      background: rgba(15, 23, 42, 0.95); border: 1px solid #334155;
+      border-radius: 12px; padding: 16px; color: #e2e8f0;
+      font-family: system-ui, sans-serif; font-size: 12px;
+      display: none; z-index: 100; backdrop-filter: blur(8px);
+    `;
+    this.container.appendChild(this.panel);
+  }
+
+  toggle() {
+    this.visible = !this.visible;
+    this.panel.style.display = this.visible ? 'block' : 'none';
+    if (this.visible) this.fetchAndRender();
+  }
+
+  async fetchAndRender() {
+    try {
+      const res = await fetch('/api/costs');
+      this.costData = await res.json();
+      this.render();
+    } catch (e) {
+      this.panel.innerHTML = '<div style="color:#f87171">Failed to load cost data</div>';
+    }
+  }
+
+  render() {
+    if (!this.costData) return;
+    const data = this.costData;
+    const budget = data.budget || 2.00;
+    const totalCost = data.totalCost || 0;
+    const budgetPct = Math.min(100, (totalCost / budget) * 100);
+    const budgetColor = budgetPct > 80 ? '#ef4444' : budgetPct > 50 ? '#f59e0b' : '#22c55e';
+
+    const byStage = data.byStage || {};
+    const maxTokens = Math.max(1, ...Object.values(byStage).map(s => (s.inputTokens || 0) + (s.outputTokens || 0)));
+
+    const byProvider = data.byProvider || {};
+    const providerColors = { gemini: '#4285F4', claude: '#7C3AED', copilot: '#22C55E', ollama: '#F59E0B' };
+
+    this.panel.innerHTML = `
+      <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px">
+        <span style="font-weight:600;font-size:14px">💰 Cost Overview</span>
+        <span class="cost-overlay-close" style="cursor:pointer;font-size:18px">×</span>
+      </div>
+      
+      <div style="margin-bottom:12px">
+        <div style="display:flex;justify-content:space-between;margin-bottom:4px">
+          <span>Budget</span>
+          <span>$${totalCost.toFixed(4)} / $${budget.toFixed(2)}</span>
+        </div>
+        <div style="background:#1e293b;border-radius:4px;height:8px;overflow:hidden">
+          <div style="background:${budgetColor};height:100%;width:${budgetPct}%;border-radius:4px;transition:width 0.3s"></div>
+        </div>
+      </div>
+      
+      <div style="margin-bottom:12px">
+        <div style="font-weight:500;margin-bottom:6px">Tokens by Stage</div>
+        ${['spec', 'architect', 'implement', 'review'].map(stage => {
+          const s = byStage[stage] || { inputTokens: 0, outputTokens: 0 };
+          const total = (s.inputTokens || 0) + (s.outputTokens || 0);
+          const pct = (total / maxTokens) * 100;
+          const colors = { spec: '#4285F4', architect: '#7C3AED', implement: '#22C55E', review: '#F59E0B' };
+          return `
+            <div style="margin-bottom:4px">
+              <div style="display:flex;justify-content:space-between;font-size:11px;margin-bottom:2px">
+                <span>${stage}</span>
+                <span>${total.toLocaleString()} tokens</span>
+              </div>
+              <div style="background:#1e293b;border-radius:3px;height:6px;overflow:hidden">
+                <div style="background:${colors[stage] || '#666'};height:100%;width:${pct}%;border-radius:3px"></div>
+              </div>
+            </div>
+          `;
+        }).join('')}
+      </div>
+      
+      <div>
+        <div style="font-weight:500;margin-bottom:6px">By Provider</div>
+        <div style="display:flex;flex-wrap:wrap;gap:8px">
+          ${Object.entries(byProvider).map(([provider, stats]) => `
+            <div style="display:flex;align-items:center;gap:4px">
+              <div style="width:8px;height:8px;border-radius:50%;background:${providerColors[provider] || '#666'}"></div>
+              <span>${provider}: $${(stats.cost || 0).toFixed(4)}</span>
+            </div>
+          `).join('')}
+        </div>
+      </div>
+    `;
+
+    // Wire close button
+    const closeBtn = this.panel.querySelector('.cost-overlay-close');
+    if (closeBtn) {
+      closeBtn.addEventListener('click', () => {
+        this.visible = false;
+        this.panel.style.display = 'none';
+      });
+    }
+  }
+
+  handleEvent(event) {
+    if (event.type === 'cost-update' || event.type === 'stage-complete') {
+      if (this.visible) this.fetchAndRender();
+    }
+  }
+}

package/lib/web/public/office/js/day-night.js

@@ -0,0 +1,68 @@
+export class DayNightCycle {
+  constructor(canvas) {
+    this.canvas = canvas;
+    this.time = 'day';
+    this.autoMode = true;
+    this.transitionProgress = 1;
+  }
+
+  getCurrentPhase() {
+    if (!this.autoMode) return this.time;
+    const hour = new Date().getHours();
+    if (hour >= 6 && hour < 10) return 'morning';
+    if (hour >= 10 && hour < 17) return 'day';
+    if (hour >= 17 && hour < 20) return 'evening';
+    return 'night';
+  }
+
+  getColors() {
+    const phases = {
+      morning: { sky: '#FFE4B5', ambient: 'rgba(255,200,100,0.1)', shadow: 0.2 },
+      day: { sky: '#87CEEB', ambient: 'rgba(255,255,255,0)', shadow: 0.3 },
+      evening: { sky: '#FF6B6B', ambient: 'rgba(255,100,50,0.15)', shadow: 0.4 },
+      night: { sky: '#1a1a2e', ambient: 'rgba(0,0,50,0.3)', shadow: 0.6 },
+    };
+    return phases[this.getCurrentPhase()];
+  }
+
+  setTime(phase) {
+    this.autoMode = false;
+    this.time = phase;
+    this.transitionProgress = 0;
+  }
+
+  setAutoMode() {
+    this.autoMode = true;
+  }
+
+  update(deltaTime) {
+    if (this.transitionProgress < 1) {
+      this.transitionProgress = Math.min(1, this.transitionProgress + deltaTime * 0.001);
+    }
+  }
+
+  applyLighting(ctx, width, height) {
+    const colors = this.getColors();
+
+    ctx.fillStyle = colors.ambient;
+    ctx.fillRect(0, 0, width, height);
+
+    if (this.getCurrentPhase() === 'night') {
+      ctx.save();
+      ctx.globalAlpha = 0.15;
+      ctx.fillStyle = '#ffdd57';
+      const windowSize = 12;
+      const spacing = 80;
+      for (let x = spacing; x < width; x += spacing) {
+        for (let y = spacing; y < height * 0.6; y += spacing) {
+          if (Math.sin(x * 0.1 + y * 0.07) > 0) {
+            ctx.beginPath();
+            ctx.arc(x, y, windowSize, 0, Math.PI * 2);
+            ctx.fill();
+          }
+        }
+      }
+      ctx.restore();
+    }
+  }
+}