ai-control-center 1.15.2

package/lib/web/public/office/js/progress-bars.js

@@ -0,0 +1,117 @@
+export class ProgressBarSystem {
+  constructor() {
+    this.bars = new Map();
+  }
+
+  setProgress(stageId, progress, label) {
+    const colors = {
+      spec: '#4A90D9',
+      architect: '#27AE60',
+      implement: '#F39C12',
+      review: '#9B59B6',
+      deploy: '#E74C3C',
+    };
+    this.bars.set(stageId, {
+      progress: Math.max(0, Math.min(1, progress)),
+      label: label || stageId,
+      color: colors[stageId] || '#666',
+      startTime: this.bars.get(stageId)?.startTime || Date.now(),
+    });
+  }
+
+  clearProgress(stageId) {
+    this.bars.delete(stageId);
+  }
+
+  clearAll() {
+    this.bars.clear();
+  }
+
+  render(ctx, x, y, width) {
+    const barHeight = 20;
+    const gap = 6;
+    let offsetY = 0;
+
+    ctx.fillStyle = '#333';
+    ctx.font = 'bold 14px system-ui, sans-serif';
+    ctx.fillText('Pipeline Progress', x, y + 14);
+    offsetY += 24;
+
+    if (this.bars.size === 0) {
+      ctx.fillStyle = '#999';
+      ctx.font = '12px system-ui, sans-serif';
+      ctx.fillText('No active pipeline', x, y + offsetY + 12);
+      return;
+    }
+
+    for (const [id, bar] of this.bars) {
+      const barY = y + offsetY;
+
+      // Background
+      ctx.fillStyle = '#e0e0e0';
+      this._roundRect(ctx, x, barY, width, barHeight, 4);
+      ctx.fill();
+
+      // Progress fill
+      const fillWidth = width * bar.progress;
+      if (fillWidth > 0) {
+        ctx.fillStyle = bar.color;
+        this._roundRect(ctx, x, barY, Math.max(8, fillWidth), barHeight, 4);
+        ctx.fill();
+      }
+
+      // Label
+      ctx.fillStyle = bar.progress > 0.5 ? '#fff' : '#333';
+      ctx.font = '11px system-ui, sans-serif';
+      const labelText = `${bar.label} ${Math.round(bar.progress * 100)}%`;
+      ctx.fillText(labelText, x + 6, barY + 14);
+
+      // Elapsed time
+      const elapsed = Math.round((Date.now() - bar.startTime) / 1000);
+      const timeText =
+        elapsed < 60 ? `${elapsed}s` : `${Math.floor(elapsed / 60)}m${elapsed % 60}s`;
+      const timeWidth = ctx.measureText(timeText).width;
+      ctx.fillStyle = bar.progress > 0.8 ? '#fff' : '#999';
+      ctx.fillText(timeText, x + width - timeWidth - 6, barY + 14);
+
+      offsetY += barHeight + gap;
+    }
+  }
+
+  _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();
+  }
+
+  handlePipelineEvent(event) {
+    const stageMap = {
+      'spec-generation': 'spec',
+      architecture: 'architect',
+      implementation: 'implement',
+      'code-review': 'review',
+      deployment: 'deploy',
+    };
+
+    if (event.type === 'stage-start') {
+      const stage = stageMap[event.stage] || event.stage;
+      this.setProgress(stage, 0.1, event.stage);
+    } else if (event.type === 'stage-progress') {
+      const stage = stageMap[event.stage] || event.stage;
+      this.setProgress(stage, event.progress, event.stage);
+    } else if (event.type === 'stage-complete') {
+      const stage = stageMap[event.stage] || event.stage;
+      this.setProgress(stage, 1.0, event.stage);
+    } else if (event.type === 'pipeline-complete') {
+      setTimeout(() => this.clearAll(), 3000);
+    }
+  }
+}

package/lib/web/public/office/js/replay.js

@@ -0,0 +1,191 @@
+export class PipelineReplay {
+  constructor(engine) {
+    this.engine = engine;
+    this.events = [];
+    this.playing = false;
+    this.paused = false;
+    this.speed = 10;
+    this.currentIndex = 0;
+    this.timer = null;
+    this.panel = null;
+  }
+
+  async loadEvents(featureId) {
+    try {
+      const res = await fetch(`/api/replay/${featureId}`);
+      if (!res.ok) throw new Error('Failed to load replay data');
+      const data = await res.json();
+      this.events = data.events || [];
+      return this.events.length;
+    } catch (e) {
+      console.error('Replay load error:', e);
+      return 0;
+    }
+  }
+
+  play() {
+    if (this.events.length === 0) return;
+    this.playing = true;
+    this.paused = false;
+    this.currentIndex = 0;
+    this._playNext();
+  }
+
+  pause() {
+    this.paused = !this.paused;
+    if (!this.paused && this.playing) this._playNext();
+  }
+
+  stop() {
+    this.playing = false;
+    this.paused = false;
+    if (this.timer) clearTimeout(this.timer);
+    this.timer = null;
+    this.currentIndex = 0;
+  }
+
+  setSpeed(speed) {
+    this.speed = Math.max(1, Math.min(50, speed));
+  }
+
+  _playNext() {
+    if (!this.playing || this.paused) return;
+    if (this.currentIndex >= this.events.length) {
+      this.stop();
+      this._onComplete();
+      return;
+    }
+
+    const event = this.events[this.currentIndex];
+    this._applyEvent(event);
+    this.currentIndex++;
+
+    if (this.currentIndex < this.events.length) {
+      const nextEvent = this.events[this.currentIndex];
+      const delay = Math.min(
+        (nextEvent.timestamp - event.timestamp) / this.speed,
+        2000
+      );
+      this.timer = setTimeout(() => this._playNext(), Math.max(50, delay));
+    } else {
+      this.timer = setTimeout(() => {
+        this.stop();
+        this._onComplete();
+      }, 1000);
+    }
+  }
+
+  _applyEvent(event) {
+    const stageMap = {
+      'spec-start': 'spec',
+      'spec-complete': 'spec_complete',
+      'arch-start': 'arch',
+      'arch-complete': 'arch_complete',
+      'impl-start': 'impl',
+      'impl-complete': 'impl_complete',
+      'review-start': 'review',
+      'review-complete': 'review_complete',
+      'deploy-start': 'deploy',
+      'deploy-complete': 'deployed',
+      'pipeline-start': 'spec',
+      'pipeline-complete': 'idle',
+    };
+
+    if (event.stage && stageMap[event.stage]) {
+      this.engine.updateState({ stage: stageMap[event.stage] });
+    }
+
+    if (event.message && this.engine.chatBubbles) {
+      const agentMap = { spec: 'pm', arch: 'architect', impl: 'coder', review: 'pm', deploy: 'deployer' };
+      const agentRole = agentMap[event.stage?.split('-')[0]] || 'pm';
+      this.engine.chatBubbles.addBubble(agentRole, event.message, event.type === 'error' ? 'error' : 'normal');
+    }
+
+    if (event.progress !== undefined && this.engine.progressBars) {
+      this.engine.progressBars.setProgress(event.stage?.split('-')[0] || 'spec', event.progress);
+    }
+  }
+
+  _onComplete() {
+    if (this.onComplete) this.onComplete();
+  }
+
+  getProgress() {
+    if (this.events.length === 0) return 0;
+    return this.currentIndex / this.events.length;
+  }
+
+  createControls(container) {
+    this.panel = document.createElement('div');
+    this.panel.style.cssText = `
+      position: absolute; bottom: 60px; left: 50%; transform: translateX(-50%);
+      background: rgba(15, 23, 42, 0.95); border: 1px solid #334155;
+      border-radius: 12px; padding: 12px 20px; color: #e2e8f0;
+      font-family: system-ui; font-size: 12px; display: none; z-index: 100;
+      backdrop-filter: blur(8px); display: flex; align-items: center; gap: 12px;
+    `;
+    this.panel.innerHTML = `
+      <button id="replay-play" style="background:#3b82f6;border:none;color:white;padding:6px 12px;border-radius:6px;cursor:pointer;font-size:14px">▶ Play</button>
+      <button id="replay-pause" style="background:#334155;border:none;color:white;padding:6px 12px;border-radius:6px;cursor:pointer;font-size:14px" disabled>⏸</button>
+      <button id="replay-stop" style="background:#334155;border:none;color:white;padding:6px 12px;border-radius:6px;cursor:pointer;font-size:14px" disabled>⏹</button>
+      <div style="display:flex;align-items:center;gap:4px">
+        <span>Speed:</span>
+        <select id="replay-speed" style="background:#1e293b;border:1px solid #475569;color:#e2e8f0;padding:4px;border-radius:4px;font-size:11px">
+          <option value="1">1x</option>
+          <option value="5">5x</option>
+          <option value="10" selected>10x</option>
+          <option value="20">20x</option>
+          <option value="50">50x</option>
+        </select>
+      </div>
+      <div style="flex:1;background:#1e293b;height:4px;border-radius:2px;min-width:100px">
+        <div id="replay-progress" style="background:#3b82f6;height:100%;width:0%;border-radius:2px;transition:width 0.2s"></div>
+      </div>
+      <span id="replay-status" style="color:#94a3b8;font-size:11px">Ready</span>
+    `;
+    this.panel.style.display = 'none';
+    container.appendChild(this.panel);
+
+    this.panel.querySelector('#replay-play').onclick = () => {
+      this.play();
+      this._updateControls(true);
+    };
+    this.panel.querySelector('#replay-pause').onclick = () => {
+      this.pause();
+      this._updateControls(this.playing);
+    };
+    this.panel.querySelector('#replay-stop').onclick = () => {
+      this.stop();
+      this._updateControls(false);
+    };
+    this.panel.querySelector('#replay-speed').onchange = (e) => {
+      this.setSpeed(parseInt(e.target.value));
+    };
+
+    this._progressInterval = setInterval(() => {
+      if (this.playing) {
+        const pct = Math.round(this.getProgress() * 100);
+        const bar = this.panel.querySelector('#replay-progress');
+        if (bar) bar.style.width = pct + '%';
+        const status = this.panel.querySelector('#replay-status');
+        if (status) status.textContent = `${this.currentIndex}/${this.events.length}`;
+      }
+    }, 200);
+
+    this.onComplete = () => {
+      this._updateControls(false);
+      const status = this.panel.querySelector('#replay-status');
+      if (status) status.textContent = 'Complete';
+    };
+  }
+
+  _updateControls(isPlaying) {
+    if (!this.panel) return;
+    this.panel.querySelector('#replay-pause').disabled = !isPlaying;
+    this.panel.querySelector('#replay-stop').disabled = !isPlaying;
+  }
+
+  show() { if (this.panel) this.panel.style.display = 'flex'; }
+  hide() { if (this.panel) this.panel.style.display = 'none'; this.stop(); }
+  toggle() { if (this.panel?.style.display === 'none') this.show(); else this.hide(); }
+}

package/lib/web/public/office/js/sound-effects.js

@@ -0,0 +1,91 @@
+export class SoundEffects {
+  constructor() {
+    this.enabled = false;
+    this.volume = 0.3;
+    this.ctx = null;
+    this._ambientOsc = null;
+    this._ambientGain = null;
+  }
+
+  init() {
+    this.ctx = new (window.AudioContext || window.webkitAudioContext)();
+  }
+
+  enable() {
+    this.enabled = true;
+    if (!this.ctx) this.init();
+  }
+
+  disable() {
+    this.enabled = false;
+  }
+
+  setVolume(v) {
+    this.volume = Math.max(0, Math.min(1, v));
+  }
+
+  _playTone(frequency, duration, type = 'sine') {
+    if (!this.enabled || !this.ctx) return;
+    const osc = this.ctx.createOscillator();
+    const gain = this.ctx.createGain();
+    osc.type = type;
+    osc.frequency.value = frequency;
+    gain.gain.value = this.volume;
+    gain.gain.exponentialRampToValueAtTime(0.001, this.ctx.currentTime + duration);
+    osc.connect(gain);
+    gain.connect(this.ctx.destination);
+    osc.start();
+    osc.stop(this.ctx.currentTime + duration);
+  }
+
+  playTaskStart() {
+    this._playTone(440, 0.15);
+    setTimeout(() => this._playTone(554, 0.15), 100);
+  }
+
+  playTaskComplete() {
+    this._playTone(523, 0.1);
+    setTimeout(() => this._playTone(659, 0.1), 100);
+    setTimeout(() => this._playTone(784, 0.2), 200);
+  }
+
+  playError() {
+    this._playTone(200, 0.3, 'sawtooth');
+  }
+
+  playNotification() {
+    this._playTone(880, 0.1);
+    setTimeout(() => this._playTone(880, 0.1), 150);
+  }
+
+  playAchievement() {
+    [523, 659, 784, 1047].forEach((f, i) =>
+      setTimeout(() => this._playTone(f, 0.2), i * 100)
+    );
+  }
+
+  playTyping() {
+    this._playTone(800 + Math.random() * 400, 0.05, 'square');
+  }
+
+  playAmbient() {
+    if (!this.enabled || !this.ctx) return;
+    const osc = this.ctx.createOscillator();
+    const gain = this.ctx.createGain();
+    osc.type = 'sine';
+    osc.frequency.value = 100;
+    gain.gain.value = this.volume * 0.05;
+    osc.connect(gain);
+    gain.connect(this.ctx.destination);
+    osc.start();
+    this._ambientOsc = osc;
+    this._ambientGain = gain;
+  }
+
+  stopAmbient() {
+    if (this._ambientOsc) {
+      this._ambientOsc.stop();
+      this._ambientOsc = null;
+    }
+  }
+}

package/lib/web/public/office/js/sprite-renderer.js

@@ -0,0 +1,211 @@
+/**
+ * Sprite Renderer — draws pixel art from data arrays onto canvas
+ * Each sprite is a 16×16 grid of color values (null = transparent)
+ */
+
+const PIXEL_SIZE = 2; // Each logical pixel = 2×2 canvas pixels
+
+/**
+ * Render a pixel sprite onto the canvas
+ * @param {CanvasRenderingContext2D} ctx
+ * @param {Array<Array<string|null>>} pixelData - 16×16 array of hex colors
+ * @param {number} x - world X position (center)
+ * @param {number} y - world Y position (bottom)
+ * @param {object} opts
+ * @param {boolean} opts.flipX - mirror horizontally
+ * @param {number} opts.offsetY - vertical offset (for bob/jump)
+ * @param {number} opts.scale - additional scale factor
+ * @param {number} opts.opacity - 0-1 opacity
+ */
+export function renderSprite(ctx, pixelData, x, y, opts = {}) {
+  const { flipX = false, offsetY = 0, scale = 1, opacity = 1 } = opts;
+  if (!pixelData || pixelData.length === 0) return;
+
+  const rows = pixelData.length;
+  const cols = pixelData[0].length;
+  const pw = PIXEL_SIZE * scale;
+  const spriteW = cols * pw;
+  const spriteH = rows * pw;
+
+  // Position: x,y is center-bottom of sprite
+  const drawX = x - spriteW / 2;
+  const drawY = y - spriteH + offsetY;
+
+  ctx.save();
+  if (opacity < 1) ctx.globalAlpha = opacity;
+
+  if (flipX) {
+    ctx.translate(drawX + spriteW, drawY);
+    ctx.scale(-1, 1);
+  } else {
+    ctx.translate(drawX, drawY);
+  }
+
+  for (let row = 0; row < rows; row++) {
+    for (let col = 0; col < cols; col++) {
+      const color = pixelData[row][col];
+      if (!color) continue;
+      ctx.fillStyle = color;
+      ctx.fillRect(col * pw, row * pw, pw, pw);
+    }
+  }
+
+  ctx.restore();
+}
+
+/**
+ * Render a small pixel text string (3×5 pixel font)
+ * Used for labels, status text above characters
+ */
+const PIXEL_FONT = {
+  'A': ['010','101','111','101','101'],
+  'B': ['110','101','110','101','110'],
+  'C': ['011','100','100','100','011'],
+  'D': ['110','101','101','101','110'],
+  'E': ['111','100','110','100','111'],
+  'F': ['111','100','110','100','100'],
+  'G': ['011','100','101','101','011'],
+  'H': ['101','101','111','101','101'],
+  'I': ['111','010','010','010','111'],
+  'J': ['001','001','001','101','010'],
+  'K': ['101','110','100','110','101'],
+  'L': ['100','100','100','100','111'],
+  'M': ['101','111','111','101','101'],
+  'N': ['101','111','111','111','101'],
+  'O': ['010','101','101','101','010'],
+  'P': ['110','101','110','100','100'],
+  'Q': ['010','101','101','011','001'],
+  'R': ['110','101','110','101','101'],
+  'S': ['011','100','010','001','110'],
+  'T': ['111','010','010','010','010'],
+  'U': ['101','101','101','101','010'],
+  'V': ['101','101','101','010','010'],
+  'W': ['101','101','111','111','101'],
+  'X': ['101','101','010','101','101'],
+  'Y': ['101','101','010','010','010'],
+  'Z': ['111','001','010','100','111'],
+  '0': ['010','101','101','101','010'],
+  '1': ['010','110','010','010','111'],
+  '2': ['110','001','010','100','111'],
+  '3': ['110','001','010','001','110'],
+  '4': ['101','101','111','001','001'],
+  '5': ['111','100','110','001','110'],
+  '6': ['011','100','110','101','010'],
+  '7': ['111','001','010','010','010'],
+  '8': ['010','101','010','101','010'],
+  '9': ['010','101','011','001','110'],
+  ' ': ['000','000','000','000','000'],
+  '.': ['000','000','000','000','010'],
+  '!': ['010','010','010','000','010'],
+  '?': ['110','001','010','000','010'],
+  ':': ['000','010','000','010','000'],
+  '-': ['000','000','111','000','000'],
+  '/': ['001','001','010','100','100'],
+  "'": ['010','010','000','000','000'],
+  ',': ['000','000','000','010','100'],
+  '(': ['001','010','010','010','001'],
+  ')': ['100','010','010','010','100'],
+  '+': ['000','010','111','010','000'],
+  '=': ['000','111','000','111','000'],
+  '#': ['101','111','101','111','101'],
+  '_': ['000','000','000','000','111'],
+};
+
+/**
+ * Render pixel text
+ * @param {CanvasRenderingContext2D} ctx
+ * @param {string} text
+ * @param {number} x - center X
+ * @param {number} y - top Y
+ * @param {string} color
+ * @param {number} pixelScale - size of each font pixel
+ */
+export function renderPixelText(ctx, text, x, y, color = '#fff', pixelScale = 1) {
+  const chars = text.toUpperCase().split('');
+  const charWidth = 4 * pixelScale; // 3px char + 1px gap
+  // Only count renderable characters for centering
+  const renderableCount = chars.filter(ch => PIXEL_FONT[ch]).length;
+  const totalWidth = renderableCount * charWidth - pixelScale;
+  let cx = x - totalWidth / 2;
+
+  ctx.fillStyle = color;
+  for (const ch of chars) {
+    const glyph = PIXEL_FONT[ch];
+    if (!glyph) { cx += charWidth; continue; }
+    for (let row = 0; row < 5; row++) {
+      for (let col = 0; col < 3; col++) {
+        if (glyph[row][col] === '1') {
+          ctx.fillRect(
+            cx + col * pixelScale,
+            y + row * pixelScale,
+            pixelScale,
+            pixelScale
+          );
+        }
+      }
+    }
+    cx += charWidth;
+  }
+}
+
+/**
+ * Render a pixel art speech/thought bubble
+ */
+export function renderBubble(ctx, x, y, width, height, type = 'speech') {
+  const bx = x - width / 2;
+  const by = y - height;
+  const p = PIXEL_SIZE;
+
+  // Bubble body
+  ctx.fillStyle = '#fff';
+  ctx.fillRect(bx + p, by, width - 2 * p, height);
+  ctx.fillRect(bx, by + p, width, height - 2 * p);
+
+  // Border
+  ctx.fillStyle = '#333';
+  ctx.fillRect(bx + p, by - 1, width - 2 * p, 1);
+  ctx.fillRect(bx + p, by + height, width - 2 * p, 1);
+  ctx.fillRect(bx - 1, by + p, 1, height - 2 * p);
+  ctx.fillRect(bx + width, by + p, 1, height - 2 * p);
+
+  // Tail
+  if (type === 'speech') {
+    ctx.fillStyle = '#fff';
+    ctx.fillRect(x - p, by + height, p, p * 2);
+    ctx.fillRect(x, by + height + p * 2, p, p);
+    ctx.fillStyle = '#333';
+    ctx.fillRect(x - p - 1, by + height, 1, p * 2);
+    ctx.fillRect(x, by + height + p * 2, p, 1);
+  } else {
+    // Thought dots
+    ctx.fillStyle = '#fff';
+    ctx.fillRect(x - p, by + height + 2, p, p);
+    ctx.fillRect(x + p, by + height + p + 4, p - 1, p - 1);
+  }
+}
+
+/**
+ * Create an offscreen canvas with a pre-rendered sprite for performance
+ */
+export function cacheSprite(pixelData, scale = 1) {
+  if (!pixelData || pixelData.length === 0) return null;
+  const rows = pixelData.length;
+  const cols = pixelData[0].length;
+  const pw = PIXEL_SIZE * scale;
+  const canvas = document.createElement('canvas');
+  canvas.width = cols * pw;
+  canvas.height = rows * pw;
+  const ctx = canvas.getContext('2d');
+
+  for (let row = 0; row < rows; row++) {
+    for (let col = 0; col < cols; col++) {
+      const color = pixelData[row][col];
+      if (!color) continue;
+      ctx.fillStyle = color;
+      ctx.fillRect(col * pw, row * pw, pw, pw);
+    }
+  }
+  return canvas;
+}
+
+export { PIXEL_SIZE };

package/lib/web/public/office/js/stamina-system.js

@@ -0,0 +1,89 @@
+/**
+ * Stamina / Fatigue System — characters get tired while working
+ * and need breaks at the break room or gym to recharge.
+ */
+
+/**
+ * Initialize stamina properties on a Character instance.
+ */
+export function initStamina(character) {
+  character.stamina = 100;
+  character.maxStamina = 100;
+  character.staminaDrainRate = 1.2;   // per second while working
+  character.staminaRegenRate = 4.0;   // per second while resting
+  character.fatigueThreshold = 20;
+  character.restTarget = 80;
+  character.isFatigued = false;
+  character._preBreakState = null;
+}
+
+/**
+ * Per-frame stamina update.
+ * @returns {'ok' | 'needs_break' | 'resting' | 'recovered'}
+ */
+export function updateStamina(char, dt, breakPositions) {
+  if (!('stamina' in char)) return 'ok';
+
+  // Working: drain stamina
+  if (char.isWorking && !char.isFatigued) {
+    char.stamina = Math.max(0, char.stamina - char.staminaDrainRate * dt);
+
+    if (char.stamina <= char.fatigueThreshold) {
+      char.isFatigued = true;
+      char._preBreakState = char.state;
+
+      // Pick gym if very tired, otherwise break room
+      const dest = char.stamina < 10 ? breakPositions.gym : breakPositions.breakRoom;
+      if (dest) {
+        char.moveTo(dest.x, dest.y);
+        char.state = 'coffee_break';
+        char.idleBehavior = char.stamina < 10 ? 'gym' : 'breakRoom';
+      }
+      return 'needs_break';
+    }
+    return 'ok';
+  }
+
+  // Resting: regenerate
+  if (char.isFatigued) {
+    char.stamina = Math.min(char.maxStamina, char.stamina + char.staminaRegenRate * dt);
+
+    if (char.stamina >= char.restTarget) {
+      char.isFatigued = false;
+      char.idleBehavior = null;
+      char.moveTo(char.homeX, char.homeY);
+      char.state = char._preBreakState || 'idle';
+      char._preBreakState = null;
+      return 'recovered';
+    }
+    return 'resting';
+  }
+
+  // Idle: slow passive regen
+  if (!char.isWorking) {
+    char.stamina = Math.min(char.maxStamina, char.stamina + 0.5 * dt);
+  }
+
+  return 'ok';
+}
+
+/**
+ * Draw stamina bar below progress bar.
+ */
+export function drawStaminaBar(ctx, char, yAboveSprite) {
+  if (!('stamina' in char)) return;
+  if (char.stamina > 60 && !char.isFatigued) return; // don't clutter
+
+  const width = 22;
+  const height = 2;
+  const x = char.x - width / 2;
+  const y = yAboveSprite;
+
+  ctx.fillStyle = '#1a1a2e';
+  ctx.fillRect(x - 1, y - 1, width + 2, height + 2);
+
+  const p = char.stamina / char.maxStamina;
+  const fillW = Math.floor(width * p);
+  ctx.fillStyle = p < 0.2 ? '#d04040' : p < 0.5 ? '#d8c020' : '#40b8d0';
+  ctx.fillRect(x, y, fillW, height);
+}