@mecha.im/cli 0.3.4

package/agent/dashboard/src/pixel-engine/layout/layoutSerializer.ts

@@ -0,0 +1,416 @@
+import { getColorizedSprite } from '../colorize.js';
+import type {
+  FloorColor,
+  FurnitureInstance,
+  OfficeLayout,
+  PlacedFurniture,
+  Seat,
+  TileType as TileTypeVal,
+} from '../types.js';
+import { DEFAULT_COLS, DEFAULT_ROWS, Direction, TILE_SIZE, TileType } from '../types.js';
+import { getCatalogEntry, getOrientationInGroup } from './furnitureCatalog.js';
+
+/** Convert flat tile array from layout into 2D grid */
+export function layoutToTileMap(layout: OfficeLayout): TileTypeVal[][] {
+  const map: TileTypeVal[][] = [];
+  for (let r = 0; r < layout.rows; r++) {
+    const row: TileTypeVal[] = [];
+    for (let c = 0; c < layout.cols; c++) {
+      row.push(layout.tiles[r * layout.cols + c]);
+    }
+    map.push(row);
+  }
+  return map;
+}
+
+/** Convert placed furniture into renderable FurnitureInstance[] */
+export function layoutToFurnitureInstances(furniture: PlacedFurniture[]): FurnitureInstance[] {
+  // Pre-compute desk zY per tile so surface items can sort in front of desks
+  const deskZByTile = new Map<string, number>();
+  for (const item of furniture) {
+    const entry = getCatalogEntry(item.type);
+    if (!entry || !entry.isDesk) continue;
+    const deskZY = item.row * TILE_SIZE + entry.sprite.length;
+    for (let dr = 0; dr < entry.footprintH; dr++) {
+      for (let dc = 0; dc < entry.footprintW; dc++) {
+        const key = `${item.col + dc},${item.row + dr}`;
+        const prev = deskZByTile.get(key);
+        if (prev === undefined || deskZY > prev) deskZByTile.set(key, deskZY);
+      }
+    }
+  }
+
+  const instances: FurnitureInstance[] = [];
+  for (const item of furniture) {
+    const entry = getCatalogEntry(item.type);
+    if (!entry) continue;
+    const x = item.col * TILE_SIZE;
+    const y = item.row * TILE_SIZE;
+    const spriteH = entry.sprite.length;
+    let zY = y + spriteH;
+
+    // Chair z-sorting: ensure characters sitting on chairs render correctly
+    if (entry.category === 'chairs') {
+      if (entry.orientation === 'back') {
+        // Back-facing chairs render IN FRONT of the seated character
+        // (the chair back visually occludes the character behind it)
+        zY = (item.row + 1) * TILE_SIZE + 1;
+      } else {
+        // All other chairs: cap zY to first row bottom so characters
+        // at any seat tile render in front of the chair
+        zY = (item.row + 1) * TILE_SIZE;
+      }
+    }
+
+    // Surface items render in front of the desk they sit on
+    if (entry.canPlaceOnSurfaces) {
+      for (let dr = 0; dr < entry.footprintH; dr++) {
+        for (let dc = 0; dc < entry.footprintW; dc++) {
+          const deskZ = deskZByTile.get(`${item.col + dc},${item.row + dr}`);
+          if (deskZ !== undefined && deskZ + 0.5 > zY) zY = deskZ + 0.5;
+        }
+      }
+    }
+
+    // Colorize sprite if this furniture has a color override
+    let sprite = entry.sprite;
+    if (item.color) {
+      const { h, s, b: bv, c: cv } = item.color;
+      sprite = getColorizedSprite(
+        `furn-${item.type}-${h}-${s}-${bv}-${cv}-${item.color.colorize ? 1 : 0}`,
+        entry.sprite,
+        item.color,
+      );
+    }
+
+    // Determine if this instance should be mirrored (side asset used in "left" orientation)
+    let mirrored = false;
+    if (entry.mirrorSide) {
+      const orientInGroup = getOrientationInGroup(item.type);
+      if (orientInGroup === 'left') {
+        mirrored = true;
+      }
+    }
+
+    instances.push({ sprite, x, y, zY, ...(mirrored ? { mirrored: true } : {}) });
+  }
+  return instances;
+}
+
+/** Get all tiles blocked by furniture footprints, optionally excluding a set of tiles.
+ *  Skips top backgroundTiles rows so characters can walk through them. */
+export function getBlockedTiles(
+  furniture: PlacedFurniture[],
+  excludeTiles?: Set<string>,
+): Set<string> {
+  const tiles = new Set<string>();
+  for (const item of furniture) {
+    const entry = getCatalogEntry(item.type);
+    if (!entry) continue;
+    const bgRows = entry.backgroundTiles || 0;
+    for (let dr = 0; dr < entry.footprintH; dr++) {
+      if (dr < bgRows) continue; // skip background rows — characters can walk through
+      for (let dc = 0; dc < entry.footprintW; dc++) {
+        const key = `${item.col + dc},${item.row + dr}`;
+        if (excludeTiles && excludeTiles.has(key)) continue;
+        tiles.add(key);
+      }
+    }
+  }
+  return tiles;
+}
+
+/** Get tiles blocked for placement purposes — skips top backgroundTiles rows per item */
+export function getPlacementBlockedTiles(
+  furniture: PlacedFurniture[],
+  excludeUid?: string,
+): Set<string> {
+  const tiles = new Set<string>();
+  for (const item of furniture) {
+    if (item.uid === excludeUid) continue;
+    const entry = getCatalogEntry(item.type);
+    if (!entry) continue;
+    const bgRows = entry.backgroundTiles || 0;
+    for (let dr = 0; dr < entry.footprintH; dr++) {
+      if (dr < bgRows) continue; // skip background rows
+      for (let dc = 0; dc < entry.footprintW; dc++) {
+        tiles.add(`${item.col + dc},${item.row + dr}`);
+      }
+    }
+  }
+  return tiles;
+}
+
+/** Map chair orientation to character facing direction */
+function orientationToFacing(orientation: string): Direction {
+  switch (orientation) {
+    case 'front':
+      return Direction.DOWN;
+    case 'back':
+      return Direction.UP;
+    case 'left':
+      return Direction.LEFT;
+    case 'right':
+    case 'side':
+      return Direction.RIGHT;
+    default:
+      return Direction.DOWN;
+  }
+}
+
+/** Generate seats from chair furniture.
+ *  Facing priority: 1) chair orientation, 2) adjacent desk, 3) forward (DOWN). */
+export function layoutToSeats(furniture: PlacedFurniture[]): Map<string, Seat> {
+  const seats = new Map<string, Seat>();
+
+  // Build set of all desk tiles
+  const deskTiles = new Set<string>();
+  for (const item of furniture) {
+    const entry = getCatalogEntry(item.type);
+    if (!entry || !entry.isDesk) continue;
+    for (let dr = 0; dr < entry.footprintH; dr++) {
+      for (let dc = 0; dc < entry.footprintW; dc++) {
+        deskTiles.add(`${item.col + dc},${item.row + dr}`);
+      }
+    }
+  }
+
+  const dirs: Array<{ dc: number; dr: number; facing: Direction }> = [
+    { dc: 0, dr: -1, facing: Direction.UP }, // desk is above chair → face UP
+    { dc: 0, dr: 1, facing: Direction.DOWN }, // desk is below chair → face DOWN
+    { dc: -1, dr: 0, facing: Direction.LEFT }, // desk is left of chair → face LEFT
+    { dc: 1, dr: 0, facing: Direction.RIGHT }, // desk is right of chair → face RIGHT
+  ];
+
+  // For each chair, every footprint tile becomes a seat.
+  // Multi-tile chairs (e.g. 2-tile couches) produce multiple seats.
+  for (const item of furniture) {
+    const entry = getCatalogEntry(item.type);
+    if (!entry || entry.category !== 'chairs') continue;
+
+    let seatCount = 0;
+    for (let dr = 0; dr < entry.footprintH; dr++) {
+      for (let dc = 0; dc < entry.footprintW; dc++) {
+        const tileCol = item.col + dc;
+        const tileRow = item.row + dr;
+
+        // Determine facing direction:
+        // 1) Chair orientation takes priority
+        // 2) Adjacent desk direction
+        // 3) Default forward (DOWN)
+        let facingDir: Direction = Direction.DOWN;
+        if (entry.orientation) {
+          facingDir = orientationToFacing(entry.orientation);
+        } else {
+          for (const d of dirs) {
+            if (deskTiles.has(`${tileCol + d.dc},${tileRow + d.dr}`)) {
+              facingDir = d.facing;
+              break;
+            }
+          }
+        }
+
+        // Determine seat kind and PC presence
+        let kind: 'desk' | 'lounge' = 'lounge';
+        let hasPc = false;
+        let deskUid: string | null = null;
+
+        const dCol = facingDir === Direction.RIGHT ? 1 : facingDir === Direction.LEFT ? -1 : 0;
+        const dRow = facingDir === Direction.DOWN ? 1 : facingDir === Direction.UP ? -1 : 0;
+        for (let d = 1; d <= 3; d++) {
+          const checkCol = tileCol + dCol * d;
+          const checkRow = tileRow + dRow * d;
+          const deskItem = furniture.find(f => {
+            const e = getCatalogEntry(f.type);
+            if (!e?.isDesk) return false;
+            return checkCol >= f.col && checkCol < f.col + e.footprintW &&
+                   checkRow >= f.row && checkRow < f.row + e.footprintH;
+          });
+          if (deskItem) {
+            kind = 'desk';
+            deskUid = deskItem.uid;
+            const deskEntry = getCatalogEntry(deskItem.type);
+            const dfw = deskEntry?.footprintW ?? 1;
+            const dfh = deskEntry?.footprintH ?? 1;
+            hasPc = furniture.some(f =>
+              f.type.startsWith('PC_') &&
+              getCatalogEntry(f.type)?.canPlaceOnSurfaces &&
+              f.col >= deskItem.col && f.col < deskItem.col + dfw &&
+              f.row >= deskItem.row && f.row < deskItem.row + dfh
+            );
+            break;
+          }
+        }
+
+        // First seat uses chair uid (backward compat), subsequent use uid:N
+        const seatUid = seatCount === 0 ? item.uid : `${item.uid}:${seatCount}`;
+        seats.set(seatUid, {
+          uid: seatUid,
+          seatCol: tileCol,
+          seatRow: tileRow,
+          facingDir,
+          assigned: false,
+          kind,
+          hasPc,
+          deskUid,
+        });
+        seatCount++;
+      }
+    }
+  }
+
+  return seats;
+}
+
+/** Get the set of tiles occupied by seats (so they can be excluded from blocked tiles) */
+export function getSeatTiles(seats: Map<string, Seat>): Set<string> {
+  const tiles = new Set<string>();
+  for (const seat of seats.values()) {
+    tiles.add(`${seat.seatCol},${seat.seatRow}`);
+  }
+  return tiles;
+}
+
+/** Default floor colors for the two rooms */
+const DEFAULT_LEFT_ROOM_COLOR: FloorColor = { h: 35, s: 30, b: 15, c: 0 }; // warm beige
+const DEFAULT_RIGHT_ROOM_COLOR: FloorColor = { h: 25, s: 45, b: 5, c: 10 }; // warm brown
+
+/** Create a minimal fallback layout (used only when no default-layout.json exists) */
+export function createDefaultLayout(): OfficeLayout {
+  const W = TileType.WALL;
+  const F1 = TileType.FLOOR_1;
+  const F2 = TileType.FLOOR_2;
+
+  const tiles: TileTypeVal[] = [];
+  const tileColors: Array<FloorColor | null> = [];
+
+  for (let r = 0; r < DEFAULT_ROWS; r++) {
+    for (let c = 0; c < DEFAULT_COLS; c++) {
+      if (r === 0 || r === DEFAULT_ROWS - 1 || c === 0 || c === DEFAULT_COLS - 1) {
+        tiles.push(W);
+        tileColors.push(null);
+      } else if (c < 10) {
+        tiles.push(F1);
+        tileColors.push(DEFAULT_LEFT_ROOM_COLOR);
+      } else {
+        tiles.push(F2);
+        tileColors.push(DEFAULT_RIGHT_ROOM_COLOR);
+      }
+    }
+  }
+
+  // Minimal fallback with no furniture — the default-layout.json provides the real default
+  return { version: 1, cols: DEFAULT_COLS, rows: DEFAULT_ROWS, tiles, tileColors, furniture: [], layoutRevision: 2 };
+}
+
+/** Serialize layout to JSON string */
+export function serializeLayout(layout: OfficeLayout): string {
+  return JSON.stringify(layout);
+}
+
+// ── Furniture type migration ────────────────────────────────────
+
+/** Map old hardcoded FurnitureType values to new manifest-based IDs */
+const LEGACY_TYPE_MAP: Record<string, string | null> = {
+  desk: 'DESK_FRONT',
+  chair: 'WOODEN_CHAIR_FRONT',
+  bookshelf: 'BOOKSHELF',
+  plant: 'PLANT',
+  cooler: null, // no equivalent in new assets — remove
+  whiteboard: 'WHITEBOARD',
+  pc: 'PC_FRONT_OFF',
+  lamp: null, // no equivalent in new assets — remove
+};
+
+/** Migrate old furniture type strings to new manifest IDs */
+function migrateFurnitureTypes(furniture: PlacedFurniture[]): PlacedFurniture[] {
+  const migrated: PlacedFurniture[] = [];
+  for (const item of furniture) {
+    const newType = LEGACY_TYPE_MAP[item.type];
+    if (newType === undefined) {
+      // Not a legacy type — keep as-is
+      migrated.push(item);
+    } else if (newType !== null) {
+      // Migrate to new type
+      migrated.push({ ...item, type: newType });
+    }
+    // newType === null → remove the item (no equivalent)
+  }
+  return migrated;
+}
+
+/** Deserialize layout from JSON string, migrating old tile types if needed */
+export function deserializeLayout(json: string): OfficeLayout | null {
+  try {
+    const obj = JSON.parse(json);
+    if (obj && obj.version === 1 && Array.isArray(obj.tiles) && Array.isArray(obj.furniture)) {
+      return migrateLayout(obj as OfficeLayout);
+    }
+  } catch {
+    /* ignore parse errors */
+  }
+  return null;
+}
+
+/**
+ * Ensure layout has tileColors. If missing, generate defaults based on tile types.
+ * Exported for use by message handlers that receive layouts over the wire.
+ */
+export function migrateLayoutColors(layout: OfficeLayout): OfficeLayout {
+  return migrateLayout(layout);
+}
+
+/**
+ * Migrate old layouts that use legacy tile types (TILE_FLOOR=1, WOOD_FLOOR=2, CARPET=3, DOORWAY=4)
+ * to the new pattern-based system. Also migrates old furniture type strings and old VOID value.
+ */
+function migrateLayout(layout: OfficeLayout): OfficeLayout {
+  // Migrate furniture types
+  layout = { ...layout, furniture: migrateFurnitureTypes(layout.furniture) };
+
+  // Migrate old VOID value (was 8, now 255) — only for truly legacy layouts.
+  // Legacy layouts lack layoutRevision AND have legacy furniture types or lack tileColors.
+  const OLD_VOID = 8;
+  if (
+    !layout.layoutRevision &&
+    !layout.tileColors &&
+    layout.tiles.includes(OLD_VOID as TileTypeVal)
+  ) {
+    layout = {
+      ...layout,
+      tiles: layout.tiles.map((t) => (t === OLD_VOID ? (TileType.VOID as TileTypeVal) : t)),
+    };
+  }
+
+  if (layout.tileColors && layout.tileColors.length === layout.tiles.length) {
+    return layout; // Already migrated tile colors
+  }
+
+  // Check if any tiles use old values (1-4) — these map directly to FLOOR_1-4
+  // but need color assignments
+  const tileColors: Array<FloorColor | null> = [];
+  for (const tile of layout.tiles) {
+    switch (tile) {
+      case 0: // WALL
+        tileColors.push(null);
+        break;
+      case 1: // was TILE_FLOOR → FLOOR_1 beige
+        tileColors.push(DEFAULT_LEFT_ROOM_COLOR);
+        break;
+      case 2: // was WOOD_FLOOR → FLOOR_2 brown
+        tileColors.push(DEFAULT_RIGHT_ROOM_COLOR);
+        break;
+      case 3: // was CARPET → FLOOR_3 purple
+        tileColors.push({ h: 280, s: 40, b: -5, c: 0 });
+        break;
+      case 4: // was DOORWAY → FLOOR_4 tan
+        tileColors.push({ h: 35, s: 25, b: 10, c: 0 });
+        break;
+      default:
+        // Floor tile types without colors — use neutral gray
+        tileColors.push(tile > 0 && tile !== TileType.VOID ? { h: 0, s: 0, b: 0, c: 0 } : null);
+    }
+  }
+
+  return { ...layout, tileColors };
+}

package/agent/dashboard/src/pixel-engine/layout/tileMap.ts

@@ -0,0 +1,109 @@
+import { TileType } from '../types.js';
+
+/** Check if a tile is walkable (floor, carpet, or doorway, and not blocked by furniture) */
+export function isWalkable(
+  col: number,
+  row: number,
+  tileMap: TileType[][],
+  blockedTiles: Set<string>,
+): boolean {
+  const rows = tileMap.length;
+  const cols = rows > 0 ? tileMap[0].length : 0;
+  if (row < 0 || row >= rows || col < 0 || col >= cols) return false;
+  const t = tileMap[row][col];
+  if (t === TileType.WALL || t === TileType.VOID) return false;
+  if (blockedTiles.has(`${col},${row}`)) return false;
+  return true;
+}
+
+/** Get walkable tile positions (grid coords) for wandering */
+export function getWalkableTiles(
+  tileMap: TileType[][],
+  blockedTiles: Set<string>,
+): Array<{ col: number; row: number }> {
+  const rows = tileMap.length;
+  const cols = rows > 0 ? tileMap[0].length : 0;
+  const tiles: Array<{ col: number; row: number }> = [];
+  for (let r = 0; r < rows; r++) {
+    for (let c = 0; c < cols; c++) {
+      if (isWalkable(c, r, tileMap, blockedTiles)) {
+        tiles.push({ col: c, row: r });
+      }
+    }
+  }
+  return tiles;
+}
+
+/** BFS pathfinding on 4-connected grid (no diagonals). Returns path excluding start, including end. */
+export function findPath(
+  startCol: number,
+  startRow: number,
+  endCol: number,
+  endRow: number,
+  tileMap: TileType[][],
+  blockedTiles: Set<string>,
+): Array<{ col: number; row: number }> {
+  if (startCol === endCol && startRow === endRow) return [];
+
+  const key = (c: number, r: number) => `${c},${r}`;
+  const startKey = key(startCol, startRow);
+  const endKey = key(endCol, endRow);
+
+  // End must be walkable. Seat tiles may be in blockedTiles so we
+  // temporarily unblock the end tile to allow pathing to seats.
+  const endBlocked = blockedTiles.has(endKey);
+  if (endBlocked) blockedTiles.delete(endKey);
+  const endWalkable = isWalkable(endCol, endRow, tileMap, blockedTiles);
+  if (!endWalkable) {
+    if (endBlocked) blockedTiles.add(endKey);
+    return [];
+  }
+
+  const visited = new Set<string>();
+  visited.add(startKey);
+
+  const parent = new Map<string, string>();
+  const queue: Array<{ col: number; row: number }> = [{ col: startCol, row: startRow }];
+
+  const dirs = [
+    { dc: 0, dr: -1 }, // up
+    { dc: 0, dr: 1 }, // down
+    { dc: -1, dr: 0 }, // left
+    { dc: 1, dr: 0 }, // right
+  ];
+
+  while (queue.length > 0) {
+    const curr = queue.shift()!;
+    const currKey = key(curr.col, curr.row);
+
+    if (currKey === endKey) {
+      // Reconstruct path
+      const path: Array<{ col: number; row: number }> = [];
+      let k = endKey;
+      while (k !== startKey) {
+        const [c, r] = k.split(',').map(Number);
+        path.unshift({ col: c, row: r });
+        k = parent.get(k)!;
+      }
+      if (endBlocked) blockedTiles.add(endKey);
+      return path;
+    }
+
+    for (const d of dirs) {
+      const nc = curr.col + d.dc;
+      const nr = curr.row + d.dr;
+      const nk = key(nc, nr);
+
+      if (visited.has(nk)) continue;
+      if (!isWalkable(nc, nr, tileMap, blockedTiles)) continue;
+
+      visited.add(nk);
+      parent.set(nk, currKey);
+      queue.push({ col: nc, row: nr });
+    }
+  }
+
+  // No path found
+  if (endBlocked) blockedTiles.add(endKey);
+  return [];
+}

package/agent/dashboard/src/pixel-engine/notificationSound.ts

@@ -0,0 +1,69 @@
+import {
+  NOTIFICATION_NOTE_1_HZ,
+  NOTIFICATION_NOTE_1_START_SEC,
+  NOTIFICATION_NOTE_2_HZ,
+  NOTIFICATION_NOTE_2_START_SEC,
+  NOTIFICATION_NOTE_DURATION_SEC,
+  NOTIFICATION_VOLUME,
+} from './constants.js';
+
+let soundEnabled = true;
+let audioCtx: AudioContext | null = null;
+
+export function setSoundEnabled(enabled: boolean): void {
+  soundEnabled = enabled;
+}
+
+export function isSoundEnabled(): boolean {
+  return soundEnabled;
+}
+
+function playNote(ctx: AudioContext, freq: number, startOffset: number): void {
+  const t = ctx.currentTime + startOffset;
+  const osc = ctx.createOscillator();
+  const gain = ctx.createGain();
+
+  osc.type = 'sine';
+  osc.frequency.setValueAtTime(freq, t);
+
+  gain.gain.setValueAtTime(NOTIFICATION_VOLUME, t);
+  gain.gain.exponentialRampToValueAtTime(0.001, t + NOTIFICATION_NOTE_DURATION_SEC);
+
+  osc.connect(gain);
+  gain.connect(ctx.destination);
+
+  osc.start(t);
+  osc.stop(t + NOTIFICATION_NOTE_DURATION_SEC);
+}
+
+export async function playDoneSound(): Promise<void> {
+  if (!soundEnabled) return;
+  try {
+    if (!audioCtx) {
+      audioCtx = new AudioContext();
+    }
+    // Resume suspended context (webviews suspend until user gesture)
+    if (audioCtx.state === 'suspended') {
+      await audioCtx.resume();
+    }
+    // Ascending two-note chime: E5 → B5
+    playNote(audioCtx, NOTIFICATION_NOTE_1_HZ, NOTIFICATION_NOTE_1_START_SEC);
+    playNote(audioCtx, NOTIFICATION_NOTE_2_HZ, NOTIFICATION_NOTE_2_START_SEC);
+  } catch {
+    // Audio may not be available
+  }
+}
+
+/** Call from any user-gesture handler to ensure AudioContext is unlocked */
+export function unlockAudio(): void {
+  try {
+    if (!audioCtx) {
+      audioCtx = new AudioContext();
+    }
+    if (audioCtx.state === 'suspended') {
+      audioCtx.resume();
+    }
+  } catch {
+    // ignore
+  }
+}

package/agent/dashboard/src/pixel-engine/pixel-office.css

@@ -0,0 +1,55 @@
+@font-face {
+  font-family: 'FS Pixel Sans';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('/pixel-engine/fonts/FSPixelSansUnicode-Regular.ttf') format('truetype');
+}
+
+.pixel-engine {
+  --pixel-bg: #1e1e2e;
+  --pixel-border: #4a4a6a;
+  --pixel-border-light: #6a6a8a;
+  --pixel-accent: #5a8cff;
+  --pixel-green: #5ac88c;
+  --pixel-shadow: 2px 2px 0px #0a0a14;
+
+  /* Button base */
+  --pixel-text: rgba(255, 255, 255, 0.8);
+  --pixel-text-dim: rgba(255, 255, 255, 0.7);
+  --pixel-btn-bg: rgba(255, 255, 255, 0.08);
+  --pixel-btn-hover-bg: rgba(255, 255, 255, 0.15);
+  --pixel-btn-disabled-opacity: 0.35;
+
+  /* Active/selected button state */
+  --pixel-active-bg: rgba(90, 140, 255, 0.25);
+
+  /* Agent button */
+  --pixel-agent-bg: rgba(90, 200, 140, 0.15);
+  --pixel-agent-hover-bg: rgba(90, 200, 140, 0.3);
+  --pixel-agent-border: #5ac88c;
+  --pixel-agent-text: rgba(200, 255, 220, 0.95);
+
+  /* Close button */
+  --pixel-close-text: rgba(255, 255, 255, 0.5);
+  --pixel-close-hover: #e55;
+
+  /* Hints & confirmations */
+  --pixel-hint-bg: #3278c8;
+  --pixel-reset-text: #ecc;
+  --pixel-danger-bg: #a33;
+
+  /* Vignette */
+  --pixel-vignette: radial-gradient(ellipse at center, transparent 50%, rgba(0, 0, 0, 0.6) 100%);
+
+  /* Status dot colors */
+  --pixel-status-permission: #cca700;
+  --pixel-status-active: #3794ff;
+
+  /* ToolOverlay z-index layers */
+  --pixel-overlay-z: 41;
+  --pixel-overlay-selected-z: 42;
+  --pixel-controls-z: 50;
+
+  font-family: 'FS Pixel Sans', monospace;
+}

package/agent/dashboard/src/pixel-engine/sprites/bubble-permission.json

@@ -0,0 +1,27 @@
+{
+  "name": "bubble-permission",
+  "description": "Permission bubble: white square with '...' in amber, and a tail pointer (11x13)",
+  "width": 11,
+  "height": 13,
+  "palette": {
+    "_": "",
+    "B": "#555566",
+    "F": "#EEEEFF",
+    "A": "#CCA700"
+  },
+  "pixels": [
+    ["B","B","B","B","B","B","B","B","B","B","B"],
+    ["B","F","F","F","F","F","F","F","F","F","B"],
+    ["B","F","F","F","F","F","F","F","F","F","B"],
+    ["B","F","F","F","F","F","F","F","F","F","B"],
+    ["B","F","F","F","F","F","F","F","F","F","B"],
+    ["B","F","F","A","F","A","F","A","F","F","B"],
+    ["B","F","F","F","F","F","F","F","F","F","B"],
+    ["B","F","F","F","F","F","F","F","F","F","B"],
+    ["B","F","F","F","F","F","F","F","F","F","B"],
+    ["B","B","B","B","B","B","B","B","B","B","B"],
+    ["_","_","_","_","B","B","B","_","_","_","_"],
+    ["_","_","_","_","_","B","_","_","_","_","_"],
+    ["_","_","_","_","_","_","_","_","_","_","_"]
+  ]
+}