erne-universal 0.2.0 → 0.3.0

package/dashboard/public/canvas.js

@@ -0,0 +1,275 @@
+/**
+ * ERNE Dashboard — Pixel-art office canvas renderer
+ * Draws 4 rooms with walls, floors, doors, desks, and computers.
+ */
+(function () {
+  'use strict';
+
+  const TILE_SIZE = 16;
+  const OFFICE_COLS = 52;
+  const OFFICE_ROWS = 36;
+  const CANVAS_W = OFFICE_COLS * TILE_SIZE; // 832
+  const CANVAS_H = OFFICE_ROWS * TILE_SIZE; // 576
+
+  const COLORS = {
+    wall: '#2C2137',
+    wallLight: '#4A3F5C',
+    floor: '#8B7355',
+    floorAlt: '#7A6548',
+    desk: '#5C4033',
+    deskTop: '#8B6914',
+    computer: '#1a1a2e',
+    computerScreen: '#16213e',
+    door: '#6B4226',
+    doorFrame: '#8B5A2B',
+    whiteboard: '#E8E8E8',
+    whiteboardFrame: '#666666',
+    chair: '#4A3F5C',
+    headerBg: '#1a1a2e',
+    headerText: '#E0E0E0',
+  };
+
+  const ROOMS = {
+    development: { x: 1, y: 3, w: 24, h: 14 },
+    review: { x: 27, y: 3, w: 24, h: 14 },
+    testing: { x: 1, y: 19, w: 24, h: 14 },
+    conference: { x: 27, y: 19, w: 24, h: 14 },
+  };
+
+  const DESK_POSITIONS = {
+    development: [
+      { x: 4, y: 4, agent: 'architect' },
+      { x: 12, y: 4, agent: 'native-bridge-builder' },
+      { x: 4, y: 9, agent: 'expo-config-resolver' },
+      { x: 12, y: 9, agent: 'ui-designer' },
+      { x: 20, y: 4, agent: 'senior-developer' },
+      { x: 20, y: 9, agent: 'feature-builder' },
+    ],
+    review: [
+      { x: 4, y: 4, agent: 'code-reviewer' },
+      { x: 12, y: 4, agent: 'upgrade-assistant' },
+    ],
+    testing: [
+      { x: 4, y: 4, agent: 'tdd-guide' },
+      { x: 12, y: 4, agent: 'performance-profiler' },
+    ],
+    conference: [],
+  };
+
+  const ROOM_LABELS = {
+    development: 'DEVELOPMENT',
+    review: 'CODE REVIEW',
+    testing: 'TESTING',
+    conference: 'CONFERENCE',
+  };
+
+  /* ---- Drawing helpers ---- */
+
+  const fillTile = (ctx, col, row, color) => {
+    ctx.fillStyle = color;
+    ctx.fillRect(col * TILE_SIZE, row * TILE_SIZE, TILE_SIZE, TILE_SIZE);
+  };
+
+  const drawRoom = (ctx, room, name) => {
+    const rx = room.x;
+    const ry = room.y;
+    const rw = room.w;
+    const rh = room.h;
+
+    // Floor — checkerboard
+    for (let r = ry; r < ry + rh; r++) {
+      for (let c = rx; c < rx + rw; c++) {
+        const alt = (r + c) % 2 === 0;
+        fillTile(ctx, c, r, alt ? COLORS.floor : COLORS.floorAlt);
+      }
+    }
+
+    // Walls — top and sides
+    for (let c = rx; c < rx + rw; c++) {
+      fillTile(ctx, c, ry, COLORS.wall);
+      // Highlight strip
+      ctx.fillStyle = COLORS.wallLight;
+      ctx.fillRect(c * TILE_SIZE, ry * TILE_SIZE + TILE_SIZE - 3, TILE_SIZE, 3);
+    }
+    for (let r = ry; r < ry + rh; r++) {
+      fillTile(ctx, rx, r, COLORS.wall);
+      fillTile(ctx, rx + rw - 1, r, COLORS.wall);
+    }
+    // Bottom wall
+    for (let c = rx; c < rx + rw; c++) {
+      fillTile(ctx, c, ry + rh - 1, COLORS.wall);
+    }
+
+    // Door — bottom center
+    const doorC = rx + Math.floor(rw / 2);
+    fillTile(ctx, doorC, ry + rh - 1, COLORS.door);
+    fillTile(ctx, doorC - 1, ry + rh - 1, COLORS.doorFrame);
+    fillTile(ctx, doorC + 1, ry + rh - 1, COLORS.doorFrame);
+    // Door knob
+    ctx.fillStyle = '#C0A060';
+    ctx.fillRect(doorC * TILE_SIZE + 10, (ry + rh - 1) * TILE_SIZE + 7, 3, 3);
+
+    // Room label
+    ctx.fillStyle = COLORS.headerText;
+    ctx.font = 'bold 10px monospace';
+    ctx.textAlign = 'center';
+    ctx.fillText(
+      ROOM_LABELS[name] || name.toUpperCase(),
+      (rx + rw / 2) * TILE_SIZE,
+      ry * TILE_SIZE + 11
+    );
+
+    // Desks
+    const desks = DESK_POSITIONS[name] || [];
+    for (const d of desks) {
+      drawDesk(ctx, (rx + d.x) * TILE_SIZE, (ry + d.y) * TILE_SIZE);
+    }
+
+    // Whiteboards for development and testing
+    if (name === 'development' || name === 'testing') {
+      drawWhiteboard(ctx, (rx + 20) * TILE_SIZE, (ry + 1) * TILE_SIZE);
+    }
+
+    // Conference table
+    if (name === 'conference') {
+      drawConferenceTable(ctx, rx, ry, rw, rh);
+    }
+  };
+
+  const drawDesk = (ctx, x, y) => {
+    // Desk body
+    ctx.fillStyle = COLORS.desk;
+    ctx.fillRect(x, y + 12, 32, 18);
+    // Desk top
+    ctx.fillStyle = COLORS.deskTop;
+    ctx.fillRect(x - 2, y + 10, 36, 4);
+    // Computer monitor
+    ctx.fillStyle = COLORS.computer;
+    ctx.fillRect(x + 8, y, 16, 12);
+    // Screen
+    ctx.fillStyle = COLORS.computerScreen;
+    ctx.fillRect(x + 10, y + 2, 12, 8);
+    // Screen glow
+    ctx.fillStyle = '#0f3460';
+    ctx.fillRect(x + 11, y + 3, 10, 6);
+    // Keyboard
+    ctx.fillStyle = '#333';
+    ctx.fillRect(x + 6, y + 14, 20, 4);
+    // Chair
+    ctx.fillStyle = COLORS.chair;
+    ctx.fillRect(x + 10, y + 22, 12, 8);
+    ctx.fillRect(x + 12, y + 18, 8, 4);
+  };
+
+  const drawConferenceTable = (ctx, rx, ry, rw, rh) => {
+    const cx = (rx + rw / 2) * TILE_SIZE;
+    const cy = (ry + rh / 2) * TILE_SIZE;
+    const tw = 10 * TILE_SIZE;
+    const th = 5 * TILE_SIZE;
+    // Table shadow
+    ctx.fillStyle = 'rgba(0,0,0,0.2)';
+    ctx.fillRect(cx - tw / 2 + 3, cy - th / 2 + 3, tw, th);
+    // Table
+    ctx.fillStyle = COLORS.desk;
+    ctx.fillRect(cx - tw / 2, cy - th / 2, tw, th);
+    ctx.fillStyle = COLORS.deskTop;
+    ctx.fillRect(cx - tw / 2 + 2, cy - th / 2 + 2, tw - 4, th - 4);
+    // Chairs around table
+    ctx.fillStyle = COLORS.chair;
+    for (let i = 0; i < 4; i++) {
+      const chairX = cx - tw / 2 + 20 + i * 40;
+      ctx.fillRect(chairX, cy - th / 2 - 14, 12, 10);
+      ctx.fillRect(chairX, cy + th / 2 + 4, 12, 10);
+    }
+    for (let i = 0; i < 2; i++) {
+      const chairY = cy - th / 2 + 14 + i * 30;
+      ctx.fillRect(cx - tw / 2 - 14, chairY, 10, 12);
+      ctx.fillRect(cx + tw / 2 + 4, chairY, 10, 12);
+    }
+  };
+
+  const drawWhiteboard = (ctx, x, y) => {
+    // Frame
+    ctx.fillStyle = COLORS.whiteboardFrame;
+    ctx.fillRect(x - 2, y - 2, 36, 22);
+    // Board
+    ctx.fillStyle = COLORS.whiteboard;
+    ctx.fillRect(x, y, 32, 18);
+    // Some scribbles
+    ctx.fillStyle = '#888';
+    ctx.fillRect(x + 4, y + 4, 12, 2);
+    ctx.fillRect(x + 4, y + 8, 18, 2);
+    ctx.fillRect(x + 4, y + 12, 8, 2);
+  };
+
+  const drawHeader = (ctx) => {
+    ctx.fillStyle = COLORS.headerBg;
+    ctx.fillRect(0, 0, CANVAS_W, 3 * TILE_SIZE);
+    ctx.fillStyle = COLORS.headerText;
+    ctx.font = 'bold 20px monospace';
+    ctx.textAlign = 'center';
+    ctx.fillText('ERNE HQ', CANVAS_W / 2, 30);
+    // Decorative line
+    ctx.fillStyle = COLORS.wallLight;
+    ctx.fillRect(CANVAS_W / 2 - 60, 38, 120, 2);
+  };
+
+  const drawOffice = (ctx) => {
+    // Background
+    ctx.fillStyle = '#0a0a1a';
+    ctx.fillRect(0, 0, CANVAS_W, CANVAS_H);
+
+    drawHeader(ctx);
+
+    // Hallway floor between rooms
+    for (let r = 0; r < OFFICE_ROWS; r++) {
+      for (let c = 0; c < OFFICE_COLS; c++) {
+        // Only fill hallway areas (outside rooms, below header)
+        if (r >= 3) {
+          let inRoom = false;
+          for (const room of Object.values(ROOMS)) {
+            if (c >= room.x && c < room.x + room.w && r >= room.y && r < room.y + room.h) {
+              inRoom = true;
+              break;
+            }
+          }
+          if (!inRoom) {
+            fillTile(ctx, c, r, (r + c) % 2 === 0 ? '#3a3040' : '#332a3a');
+          }
+        }
+      }
+    }
+
+    // Draw rooms
+    for (const [name, room] of Object.entries(ROOMS)) {
+      drawRoom(ctx, room, name);
+    }
+  };
+
+  const getAgentDeskPosition = (agentName) => {
+    for (const [roomName, desks] of Object.entries(DESK_POSITIONS)) {
+      for (const d of desks) {
+        if (d.agent === agentName) {
+          const room = ROOMS[roomName];
+          return {
+            x: (room.x + d.x) * TILE_SIZE + 10,
+            y: (room.y + d.y) * TILE_SIZE + 20,
+            room: roomName,
+          };
+        }
+      }
+    }
+    return null;
+  };
+
+  window.OfficeCanvas = {
+    TILE_SIZE,
+    CANVAS_W,
+    CANVAS_H,
+    COLORS,
+    ROOMS,
+    DESK_POSITIONS,
+    drawOffice,
+    getAgentDeskPosition,
+  };
+})();

package/dashboard/public/index.html

@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>ERNE Dashboard</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body { background: #0a0a1a; display: flex; justify-content: center; align-items: center; min-height: 100vh; overflow: hidden; }
+    canvas { image-rendering: pixelated; image-rendering: crisp-edges; }
+  </style>
+</head>
+<body>
+  <canvas id="dashboard"></canvas>
+  <script src="canvas.js"></script>
+  <script src="agents.js"></script>
+  <script src="sidebar.js"></script>
+  <script src="ws-client.js"></script>
+  <script>
+    (function () {
+      'use strict';
+
+      var CANVAS_W = OfficeCanvas.CANVAS_W;
+      var CANVAS_H = OfficeCanvas.CANVAS_H;
+      var SIDEBAR_W = Sidebar.SIDEBAR_W;
+      var totalW = CANVAS_W + SIDEBAR_W;
+      var totalH = CANVAS_H;
+
+      var canvas = document.getElementById('dashboard');
+      var ctx = canvas.getContext('2d');
+
+      // Scale to fit viewport
+      var scaleX = window.innerWidth / totalW;
+      var scaleY = window.innerHeight / totalH;
+      var scale = Math.min(scaleX, scaleY, 2);
+
+      canvas.width = totalW;
+      canvas.height = totalH;
+      canvas.style.width = Math.floor(totalW * scale) + 'px';
+      canvas.style.height = Math.floor(totalH * scale) + 'px';
+
+      // Handle resize
+      window.addEventListener('resize', function () {
+        var sx = window.innerWidth / totalW;
+        var sy = window.innerHeight / totalH;
+        var s = Math.min(sx, sy, 2);
+        canvas.style.width = Math.floor(totalW * s) + 'px';
+        canvas.style.height = Math.floor(totalH * s) + 'px';
+      });
+
+      // Init sprites
+      AgentSprites.initAgentSprites();
+
+      // Agent server state
+      var agentServerState = {};
+      var wsConnected = false;
+
+      // WebSocket connection
+      WSClient.createWSClient(
+        function onStateUpdate(agents) {
+          agentServerState = agents;
+          // Sync sprite states with server
+          for (var name in agents) {
+            if (agents.hasOwnProperty(name)) {
+              var status = agents[name].status || 'idle';
+              if (AgentSprites.agentSprites[name] &&
+                  AgentSprites.agentSprites[name].status !== status) {
+                AgentSprites.updateAgentState(name, status);
+              }
+            }
+          }
+        },
+        function onConnectionChange(connected) {
+          wsConnected = connected;
+        }
+      );
+
+      // Main render loop
+      var lastTime = performance.now();
+
+      var render = function (now) {
+        var dt = (now - lastTime) / 1000;
+        lastTime = now;
+
+        // Cap dt to avoid jumps
+        if (dt > 0.1) dt = 0.1;
+
+        // Update
+        AgentSprites.updateAgentSprites(dt);
+
+        // Clear
+        ctx.clearRect(0, 0, totalW, totalH);
+
+        // Draw office
+        OfficeCanvas.drawOffice(ctx);
+
+        // Draw agents
+        AgentSprites.drawAgentSprites(ctx);
+
+        // Draw sidebar
+        Sidebar.drawSidebar(ctx, agentServerState, CANVAS_W, CANVAS_H);
+
+        // Draw connection indicator
+        Sidebar.drawConnectionIndicator(ctx, CANVAS_W, CANVAS_H, wsConnected);
+
+        requestAnimationFrame(render);
+      };
+
+      requestAnimationFrame(render);
+    })();
+  </script>
+</body>
+</html>

package/dashboard/public/sidebar.js

@@ -0,0 +1,107 @@
+/**
+ * ERNE Dashboard — Sidebar status panel
+ */
+(function () {
+  'use strict';
+
+  const SIDEBAR_W = 220;
+  const SIDEBAR_PAD = 12;
+  const ROW_H = 52;
+
+  const STATUS_COLORS = {
+    idle: '#9E9E9E',
+    working: '#4CAF50',
+    moving: '#FF9800',
+    done: '#2196F3',
+  };
+
+  const STATUS_LABELS = {
+    idle: 'IDLE',
+    working: 'WORKING',
+    moving: 'MOVING',
+    done: 'DONE',
+  };
+
+  const drawSidebar = (ctx, agents, canvasW, canvasH) => {
+    const sx = canvasW;
+
+    // Background
+    ctx.fillStyle = '#12121e';
+    ctx.fillRect(sx, 0, SIDEBAR_W, canvasH);
+
+    // Header
+    ctx.fillStyle = '#1a1a2e';
+    ctx.fillRect(sx, 0, SIDEBAR_W, 36);
+    ctx.fillStyle = '#E0E0E0';
+    ctx.font = 'bold 14px monospace';
+    ctx.textAlign = 'center';
+    ctx.fillText('AGENTS', sx + SIDEBAR_W / 2, 24);
+
+    // Separator
+    ctx.fillStyle = '#4A3F5C';
+    ctx.fillRect(sx + SIDEBAR_PAD, 36, SIDEBAR_W - SIDEBAR_PAD * 2, 1);
+
+    // Agent list
+    const agentNames = Object.keys(agents);
+    let y = 40;
+
+    for (let i = 0; i < agentNames.length; i++) {
+      const name = agentNames[i];
+      const agent = agents[name];
+      const status = agent.status || 'idle';
+      const task = agent.task || '';
+
+      // Alternating row background
+      ctx.fillStyle = i % 2 === 0 ? '#16162a' : '#1a1a30';
+      ctx.fillRect(sx, y, SIDEBAR_W, ROW_H);
+
+      // Status dot
+      ctx.fillStyle = STATUS_COLORS[status] || STATUS_COLORS.idle;
+      ctx.beginPath();
+      ctx.arc(sx + SIDEBAR_PAD + 6, y + 16, 5, 0, Math.PI * 2);
+      ctx.fill();
+
+      // Agent name
+      ctx.fillStyle = '#E0E0E0';
+      ctx.font = 'bold 11px monospace';
+      ctx.textAlign = 'left';
+      ctx.fillText(name, sx + SIDEBAR_PAD + 18, y + 18);
+
+      // Status label
+      ctx.fillStyle = STATUS_COLORS[status] || STATUS_COLORS.idle;
+      ctx.font = '9px monospace';
+      ctx.fillText(STATUS_LABELS[status] || 'IDLE', sx + SIDEBAR_PAD + 18, y + 30);
+
+      // Task text (truncated)
+      if (task) {
+        ctx.fillStyle = '#888';
+        ctx.font = '8px monospace';
+        const truncated = task.length > 24 ? task.substring(0, 23) + '\u2026' : task;
+        ctx.fillText(truncated, sx + SIDEBAR_PAD + 18, y + 42);
+      }
+
+      y += ROW_H;
+    }
+  };
+
+  const drawConnectionIndicator = (ctx, canvasW, canvasH, connected) => {
+    const sx = canvasW + SIDEBAR_W - SIDEBAR_PAD - 10;
+    const sy = canvasH - SIDEBAR_PAD - 5;
+
+    ctx.fillStyle = connected ? '#4CAF50' : '#f44336';
+    ctx.beginPath();
+    ctx.arc(sx, sy, 5, 0, Math.PI * 2);
+    ctx.fill();
+
+    ctx.fillStyle = '#888';
+    ctx.font = '8px monospace';
+    ctx.textAlign = 'right';
+    ctx.fillText(connected ? 'LIVE' : 'OFFLINE', sx - 10, sy + 3);
+  };
+
+  window.Sidebar = {
+    SIDEBAR_W,
+    drawSidebar,
+    drawConnectionIndicator,
+  };
+})();

package/dashboard/public/ws-client.js

@@ -0,0 +1,69 @@
+/**
+ * ERNE Dashboard — WebSocket client with exponential backoff reconnect
+ */
+(function () {
+  'use strict';
+
+  const createWSClient = (onStateUpdate, onConnectionChange) => {
+    let ws = null;
+    let connected = false;
+    let reconnectDelay = 1000;
+
+    const connect = () => {
+      try {
+        ws = new WebSocket('ws://' + location.host);
+      } catch (e) {
+        scheduleReconnect();
+        return;
+      }
+
+      ws.onopen = () => {
+        connected = true;
+        reconnectDelay = 1000;
+        if (onConnectionChange) onConnectionChange(true);
+      };
+
+      ws.onmessage = (event) => {
+        try {
+          const data = JSON.parse(event.data);
+          // Handle both wrapped {type:'state', agents:{...}} and raw agent state
+          if (data.type === 'state' && data.agents) {
+            onStateUpdate(data.agents);
+          } else if (!data.type) {
+            // Raw agent state object from server
+            onStateUpdate(data);
+          }
+        } catch (e) {
+          // Ignore malformed messages
+        }
+      };
+
+      ws.onclose = () => {
+        connected = false;
+        if (onConnectionChange) onConnectionChange(false);
+        scheduleReconnect();
+      };
+
+      ws.onerror = () => {
+        if (ws) ws.close();
+      };
+    };
+
+    const scheduleReconnect = () => {
+      setTimeout(() => {
+        connect();
+      }, reconnectDelay);
+      reconnectDelay = Math.min(reconnectDelay * 2, 30000);
+    };
+
+    connect();
+
+    return {
+      isConnected: () => connected,
+    };
+  };
+
+  window.WSClient = {
+    createWSClient,
+  };
+})();