@agentdeck/bridge 0.2.2 → 1.0.0

package/dist/pixoo/pixoo-sprites.js

@@ -23,6 +23,8 @@
  *   zoom 2.0 → octopus ~14px wide, crayfish ~24px wide
  */
 import { worldToScreen, isVisible } from './pixoo-camera.js';
+import { State, STATE_COLORS } from '@agentdeck/shared';
+import { OFFICIAL_DOT_GLYPHS, OFFICIAL_DOT_GLYPH_SIZE, } from './official-dot-glyphs.generated.js';
 // ===== Cell Types (shared with ESP32/Android) =====
 const EMPTY = 0;
 const BODY = 1;
@@ -32,132 +34,324 @@ const RIGHT_ARM = 4;
 const LEFT_LEG = 5;
 const RIGHT_LEG = 6;
 const ANTENNA = 7;
-// ===== Octopus 13×13 — Pixoo64 LED pixel art (square pixels, no PIXEL_ASPECT) =====
-//
-// Designed for LED matrix: solid filled pixels, eyes as negative space (black).
-// No outline needed — LED pixel glow provides natural edge definition.
-// At zoom 3.2 with cellSize = zoom/3 ≈ 1.07, sprite ≈ 14×14 screen pixels.
-//
-export const OCTOPUS_GRID = [
-    [0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0], // flat top (9) — angular
-    [0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0], // (11)
-    [0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0], // (11)
-    [0, 1, 1, 1, 2, 1, 1, 1, 2, 1, 1, 1, 0], // eyes top — col 4,8 (11)
-    [0, 1, 1, 1, 2, 1, 1, 1, 2, 1, 1, 1, 0], // eyes bottom — 2px vertical (11)
-    [3, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 4], // arms start + body (13)
-    [3, 3, 1, 1, 1, 1, 1, 1, 1, 1, 1, 4, 4], // arms thick (13) — 2 rows, 2-3px wide
-    [3, 3, 1, 1, 1, 1, 1, 1, 1, 1, 1, 4, 4], // arms continue (13)
-    [0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0], // narrowing (9)
-    [0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0], // (9)
-    [0, 0, 5, 0, 5, 0, 1, 0, 6, 0, 6, 0, 0], // tentacles + center
-    [0, 0, 5, 0, 5, 0, 0, 0, 6, 0, 6, 0, 0], // tentacles
-    [0, 0, 5, 0, 0, 0, 0, 0, 0, 0, 6, 0, 0], // outer tentacles only
+// ===== Octopus HD 24×24 — Claude Code mascot aligned with SVG viewBox =====
+export const OCTOPUS_GRID_HD = [
+    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+    [0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0],
+    [0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0],
+    [0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0],
+    [0, 0, 0, 1, 1, 1, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 1, 1, 1, 0, 0, 0],
+    [0, 0, 0, 1, 1, 1, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 1, 1, 1, 0, 0, 0],
+    [0, 0, 0, 1, 1, 1, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 1, 1, 1, 0, 0, 0],
+    [3, 3, 3, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 4, 4, 4],
+    [3, 3, 3, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 4, 4, 4],
+    [3, 3, 3, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 4, 4, 4],
+    [0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0],
+    [0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0],
+    [0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0],
+    [0, 0, 0, 0, 5, 5, 0, 0, 5, 5, 0, 0, 0, 0, 6, 6, 0, 0, 6, 6, 0, 0, 0, 0],
+    [0, 0, 0, 0, 5, 5, 0, 0, 5, 5, 0, 0, 0, 0, 6, 6, 0, 0, 6, 6, 0, 0, 0, 0],
+    [0, 0, 0, 0, 5, 5, 0, 0, 5, 5, 0, 0, 0, 0, 6, 6, 0, 0, 6, 6, 0, 0, 0, 0],
+    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
 ];
-const OCTO_COLS = 13;
-const OCTO_ROWS = 13;
+const OCTO_HD_COLS = 24;
+const OCTO_HD_ROWS = 24;
+// ===== Octopus MD 14×13 — Claude Code boxy mascot =====
+export const OCTOPUS_GRID_MD = [
+    [0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0], // Flat top (12)
+    [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1], // (14)
+    [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1], // (14)
+    [1, 1, 2, 2, 1, 1, 1, 1, 1, 1, 2, 2, 1, 1], // Wide eye holes (2px)
+    [1, 1, 2, 2, 1, 1, 1, 1, 1, 1, 2, 2, 1, 1], // Eye holes bottom
+    [3, 3, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 4, 4], // Arms + body (14)
+    [3, 3, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 4, 4], // Arms + body (14)
+    [3, 3, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 4, 4], // Arms + body (14)
+    [0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0], // Slightly tapered waist (12)
+    [0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0], // (12)
+    [0, 5, 5, 0, 5, 5, 0, 0, 6, 6, 0, 6, 6, 0], // Thick 2px legs for distortion-free downscaling
+    [0, 5, 5, 0, 5, 5, 0, 0, 6, 6, 0, 6, 6, 0],
+    [0, 5, 5, 0, 0, 0, 0, 0, 0, 0, 0, 6, 6, 0]
+];
+const OCTO_GRID_MD_COLS = 14;
+const OCTO_GRID_MD_ROWS = 13;
+export const OCTOPUS_GRID = OCTOPUS_GRID_HD; // alias for compatibility
+const OCTO_COLS = OCTO_HD_COLS;
+const OCTO_ROWS = OCTO_HD_ROWS;
 /** World width of octopus in normalized coords. */
 export const OCTO_WORLD_W = 7 / 64;
 // ===== Octopus LOD 7×7 — chunky grid for zoom < 1.3 =====
-const OCTOPUS_LOD = [
-    [0, 1, 1, 1, 1, 1, 0], // flat top (5) — angular
-    [1, 1, 1, 1, 1, 1, 1], // full width (7)
-    [1, 1, 2, 1, 2, 1, 1], // eyes (7)
-    [1, 1, 1, 1, 1, 1, 1], // body (7)
-    [0, 1, 1, 1, 1, 1, 0], // waist (5)
-    [0, 0, 5, 1, 6, 0, 0], // tentacles + center
-    [0, 0, 5, 0, 6, 0, 0], // tentacle tips
+export const OCTOPUS_LOD = [
+    [0, 1, 1, 1, 1, 1, 0],
+    [1, 1, 1, 1, 1, 1, 1],
+    [1, 2, 2, 1, 2, 2, 1], // Bold eye holes
+    [3, 1, 1, 1, 1, 1, 4], // Arms + body
+    [0, 1, 1, 1, 1, 1, 0],
+    [0, 5, 5, 1, 6, 6, 0], // Thick limbs
+    [0, 5, 0, 0, 0, 6, 0],
 ];
 const OCTO_LOD_COLS = 7;
 const OCTO_LOD_ROWS = 7;
-// ===== Crayfish 12×8 — front-facing, matches OpenClaw SVG =====
-//
-// OpenClaw SVG: rounded body, compact side claws, antennae from top,
-// dark eyes with teal (#00e5cc) highlights, red gradient body.
-// Body shape: oval (narrow top → wide middle → narrow bottom).
-//
-export const CRAYFISH_GRID = [
-    [0, 0, 7, 0, 0, 0, 0, 0, 0, 7, 0, 0], // antennae tips (wide spread)
-    [0, 0, 0, 7, 0, 0, 0, 0, 7, 0, 0, 0], // antennae shafts
-    [0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0], // head dome top (6w — rounder)
-    [3, 3, 1, 1, 1, 1, 1, 1, 1, 1, 4, 4], // head + claw tips (8w body + 2+2 claws)
-    [0, 3, 1, 1, 2, 1, 1, 2, 1, 1, 4, 0], // eyes + claw arms (8w body)
-    [0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0], // thorax widest (8w)
-    [0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0], // abdomen (6w)
-    [0, 0, 5, 0, 0, 1, 1, 0, 0, 6, 0, 0], // tail + walking legs
+// ===== Crayfish HD 24×24 — OpenClaw mascot, round full body matching design/brand/openclaw.svg =====
+// Round body, antennae curving to the top corners, two separated side-claw blobs (3/4), two leg
+// stubs (5/6). Eyes are NOT in the grid — drawn as a teal+black overlay at eyeRow/eyeCols below.
+export const CRAYFISH_GRID_HD = [
+    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+    [0, 0, 0, 0, 0, 0, 7, 7, 0, 0, 0, 0, 0, 0, 0, 0, 7, 7, 0, 0, 0, 0, 0, 0],
+    [0, 0, 0, 0, 0, 7, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 7, 0, 0, 0, 0, 0],
+    [0, 0, 0, 0, 7, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 7, 0, 0, 0, 0],
+    [0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0],
+    [0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0],
+    [0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0],
+    [0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0],
+    [0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0],
+    [0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0], // eyes overlaid at cols 8,14
+    [0, 3, 3, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 4, 4, 0],
+    [3, 3, 3, 3, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 4, 4, 4, 4],
+    [3, 3, 3, 3, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 4, 4, 4, 4],
+    [0, 3, 3, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 4, 4, 0],
+    [0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0],
+    [0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0],
+    [0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0],
+    [0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0],
+    [0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0],
+    [0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0],
+    [0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0],
+    [0, 0, 0, 0, 0, 0, 0, 1, 5, 5, 1, 1, 1, 1, 6, 6, 1, 0, 0, 0, 0, 0, 0, 0],
+    [0, 0, 0, 0, 0, 0, 0, 0, 5, 5, 1, 1, 1, 1, 6, 6, 0, 0, 0, 0, 0, 0, 0, 0],
+    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
+];
+const CF_HD_COLS = 24;
+const CF_HD_ROWS = 24;
+// ===== Crayfish MD 12×8 — OpenClaw mascot, round body (eyes overlaid at row 3, cols 4/7) =====
+export const CRAYFISH_GRID_MD = [
+    [0, 7, 0, 0, 0, 0, 0, 0, 0, 0, 7, 0], // Antennae tips at the corners
+    [0, 0, 7, 0, 0, 1, 1, 0, 0, 7, 0, 0], // Antennae + head crown
+    [0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0], // Rounded head dome
+    [0, 3, 3, 1, 1, 1, 1, 1, 1, 4, 4, 0], // Claws + body (eyes overlay row 3)
+    [3, 3, 1, 1, 1, 1, 1, 1, 1, 1, 4, 4], // Wide claws + body
+    [0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0], // Thorax
+    [0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0], // Lower body
+    [0, 0, 0, 5, 5, 0, 0, 6, 6, 0, 0, 0] // Walking legs
 ];
-const CF_COLS = 12;
-const CF_ROWS = 8;
-/** World width of crayfish in normalized coords (12 world-pixels / 64). */
+const CF_GRID_MD_COLS = 12;
+const CF_GRID_MD_ROWS = 8;
+export const CRAYFISH_GRID = CRAYFISH_GRID_HD; // alias for compatibility
+const CF_COLS = CF_HD_COLS;
+const CF_ROWS = CF_HD_ROWS;
+/** World width of crayfish in normalized coords. */
 export const CF_WORLD_W = 12 / 64;
-// ===== Crayfish LOD 8×6 — compact for zoom < 1.3 =====
-const CRAYFISH_LOD = [
-    [0, 7, 0, 0, 0, 0, 7, 0], // antennae (wider spread)
-    [0, 0, 1, 1, 1, 1, 0, 0], // head dome (4w — rounder)
-    [3, 1, 1, 1, 1, 1, 1, 4], // claws + body (6w — wider oval)
-    [0, 1, 2, 1, 1, 2, 1, 0], // eyes at col 2,5 (spaced for 3×3 rendering)
-    [0, 0, 1, 1, 1, 1, 0, 0], // lower body (4w)
-    [0, 5, 0, 1, 1, 0, 6, 0], // legs + tail
+// ===== Crayfish LOD 8×6 — compact round body (eyes overlaid at row 2, cols 2/5) =====
+export const CRAYFISH_LOD = [
+    [0, 7, 0, 0, 0, 0, 7, 0], // Antennae at corners
+    [0, 0, 1, 1, 1, 1, 0, 0], // Head crown
+    [3, 3, 1, 1, 1, 1, 4, 4], // Claws + body (eyes overlay row 2)
+    [0, 1, 1, 1, 1, 1, 1, 0], // Body
+    [0, 1, 1, 1, 1, 1, 1, 0], // Body
+    [0, 0, 5, 0, 0, 6, 0, 0], // Legs
 ];
 const CF_LOD_COLS = 8;
 const CF_LOD_ROWS = 6;
-// ===== Jellyfish 10×8 — 6-lobe cloud (matches TUI/Android CloudCreature) =====
-//
-// Codex CLI creature: clover-shaped cloud with >_ terminal prompt marking.
-// Cell types: 0=empty, 1=body, 2=marking(>_), 3=edge(breathe/contract)
-//
-export const JELLYFISH_GRID = [
-    [0, 0, 1, 1, 0, 0, 1, 1, 0, 0], // top lobes
-    [0, 1, 1, 1, 1, 1, 1, 1, 1, 0], // upper merge
-    [1, 1, 1, 1, 1, 1, 1, 1, 1, 1], // widest — side lobes
-    [3, 1, 2, 2, 1, 1, 2, 1, 1, 3], // >_ marking + breathe edges
-    [3, 1, 1, 1, 1, 1, 1, 1, 1, 3], // center + breathe edges
-    [1, 1, 1, 1, 1, 1, 1, 1, 1, 1], // widest
-    [0, 1, 1, 1, 1, 1, 1, 1, 1, 0], // taper
-    [0, 0, 1, 1, 0, 0, 1, 1, 0, 0], // bottom lobes
+// ===== Jellyfish HD 24×24 — Codex cloud mascot aligned with SVG viewBox =====
+export const JELLYFISH_GRID_HD = [
+    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+    [0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0],
+    [0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0],
+    [0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0],
+    [0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0],
+    [0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0],
+    [0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0],
+    [0, 0, 1, 1, 1, 1, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0], // prompt `>`
+    [0, 0, 1, 1, 1, 1, 1, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0],
+    [0, 0, 1, 1, 1, 1, 1, 1, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0],
+    [0, 0, 1, 1, 1, 1, 1, 1, 1, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0],
+    [0, 0, 1, 1, 1, 1, 1, 1, 1, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0],
+    [0, 0, 1, 1, 1, 1, 1, 1, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0],
+    [0, 0, 1, 1, 1, 1, 1, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0],
+    [0, 0, 1, 1, 1, 1, 2, 2, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2, 1, 1, 1, 1, 0, 0], // prompt `_`
+    [0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2, 1, 1, 1, 0, 0, 0],
+    [0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0],
+    [0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0],
+    [0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0],
+    [0, 0, 0, 0, 0, 3, 3, 3, 3, 3, 1, 1, 1, 1, 3, 3, 3, 3, 3, 0, 0, 0, 0, 0], // bottom lobes are BREATHE_EDGE
+    [0, 0, 0, 0, 0, 0, 3, 3, 3, 0, 0, 0, 0, 0, 0, 3, 3, 3, 0, 0, 0, 0, 0, 0],
+    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
+];
+const JF_HD_COLS = 24;
+const JF_HD_ROWS = 24;
+// ===== Jellyfish MD 13×11 — Codex mascot =====
+export const JELLYFISH_GRID_MD = [
+    [0, 0, 0, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0], // Rounded top lobe
+    [0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
+    [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
+    [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
+    [3, 1, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 3], // `>` top stroke (2px thick)
+    [3, 1, 1, 2, 2, 1, 1, 2, 2, 2, 2, 1, 3], // `>` point + long `_` prompt (4px)
+    [3, 1, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 3], // `>` bottom stroke
+    [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
+    [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
+    [0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
+    [0, 0, 0, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0] // Bottom cloud lobe, not dangling legs
 ];
-const JF_COLS = 10;
-const JF_ROWS = 8;
+const JF_GRID_MD_COLS = 13;
+const JF_GRID_MD_ROWS = 11;
+export const JELLYFISH_GRID = JELLYFISH_GRID_HD; // alias for compatibility
+const JF_COLS = JF_HD_COLS;
+const JF_ROWS = JF_HD_ROWS;
 /** World width of jellyfish in normalized coords. */
-export const JF_WORLD_W = 10 / 64;
-// ===== Jellyfish LOD 7×5 — compact for zoom < 1.3 =====
-const JELLYFISH_LOD = [
-    [0, 1, 1, 0, 1, 1, 0], // top lobes
-    [1, 1, 1, 1, 1, 1, 1], // widest
-    [1, 1, 2, 1, 2, 1, 1], // marking
-    [1, 1, 1, 1, 1, 1, 1], // widest
-    [0, 1, 1, 0, 1, 1, 0], // bottom lobes
+export const JF_WORLD_W = 13 / 64;
+// ===== Jellyfish LOD 9×7 — compact for zoom < 1.3 =====
+export const JELLYFISH_LOD = [
+    [0, 0, 1, 1, 1, 1, 1, 0, 0],
+    [0, 1, 1, 1, 1, 1, 1, 1, 0],
+    [1, 2, 2, 1, 1, 1, 1, 1, 1], // `>` upper stroke (2px)
+    [1, 1, 2, 2, 1, 2, 2, 2, 1], // `>` point + `_` prompt (3px)
+    [1, 2, 2, 1, 1, 1, 1, 1, 1], // `>` lower stroke
+    [0, 1, 1, 1, 1, 1, 1, 1, 0],
+    [0, 0, 1, 1, 1, 1, 1, 0, 0],
 ];
-const JF_LOD_COLS = 7;
-const JF_LOD_ROWS = 5;
+const JF_LOD_COLS = 9;
+const JF_LOD_ROWS = 7;
 // Cell type constants for jellyfish
 const MARKING = 2;
 const BREATHE_EDGE = 3;
-// ===== OpenCode 10×9 — nested-square logo sprite (simulator SSOT) =====
+// ===== OpenCode HD 24×24 — OpenCode mascot aligned with SVG viewBox =====
+export const OPENCODE_GRID_HD = [
+    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+    [0, 0, 0, 0, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 0, 0, 0, 0, 0, 0],
+    [0, 0, 0, 0, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 0, 0, 0, 0, 0, 0],
+    [0, 0, 0, 0, 8, 8, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 8, 8, 0, 0, 0, 0, 0, 0],
+    [0, 0, 0, 0, 8, 8, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 8, 8, 0, 0, 0, 0, 0, 0],
+    [0, 0, 0, 0, 8, 8, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 8, 8, 0, 0, 0, 0, 0, 0],
+    [0, 0, 0, 0, 8, 8, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 8, 8, 0, 0, 0, 0, 0, 0],
+    [0, 0, 0, 0, 8, 8, 0, 0, 0, 0, 9, 9, 9, 9, 9, 9, 8, 8, 9, 9, 9, 9, 9, 9],
+    [0, 0, 0, 0, 8, 8, 0, 0, 0, 0, 9, 9, 9, 9, 9, 9, 8, 8, 9, 9, 9, 9, 9, 9],
+    [0, 0, 0, 0, 8, 8, 0, 0, 0, 0, 9, 9, 9, 9, 9, 9, 8, 8, 9, 9, 9, 9, 9, 9],
+    [0, 0, 0, 0, 8, 8, 0, 0, 0, 0, 9, 9, 9, 9, 9, 9, 8, 8, 9, 9, 9, 9, 9, 9],
+    [0, 0, 0, 0, 8, 8, 0, 0, 0, 0, 9, 9, 9, 9, 9, 9, 8, 8, 9, 9, 9, 9, 9, 9],
+    [0, 0, 0, 0, 8, 8, 0, 0, 0, 0, 9, 9, 9, 9, 9, 9, 8, 8, 9, 9, 9, 9, 9, 9],
+    [0, 0, 0, 0, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 9, 9, 9, 9, 9, 9],
+    [0, 0, 0, 0, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 9, 9, 9, 9, 9, 9],
+    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9],
+    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9],
+    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9],
+    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9],
+    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9],
+    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9],
+    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+];
+const OC_HD_COLS = 24;
+const OC_HD_ROWS = 24;
+// ===== OpenCode MD 10×10 — nested-square logo =====
 const OPENCODE_FRAME = 8;
 const OPENCODE_CORE = 9;
-const OPENCODE_GRID = [
-    [8, 8, 8, 8, 8, 8, 8, 8, 8, 8],
-    [8, 0, 0, 0, 0, 0, 0, 0, 0, 8],
-    [8, 0, 9, 9, 9, 9, 9, 9, 0, 8],
-    [8, 0, 9, 0, 0, 0, 0, 9, 0, 8],
-    [8, 0, 9, 0, 0, 0, 0, 9, 0, 8],
-    [8, 0, 9, 0, 0, 0, 0, 9, 0, 8],
-    [8, 0, 9, 9, 9, 9, 9, 9, 0, 8],
-    [8, 0, 0, 0, 0, 0, 0, 0, 0, 8],
-    [8, 8, 8, 8, 8, 8, 8, 8, 8, 8],
+export const OPENCODE_GRID_MD = [
+    [8, 8, 8, 8, 8, 8, 0, 0, 0, 0],
+    [8, 0, 0, 0, 0, 8, 0, 0, 0, 0],
+    [8, 0, 0, 0, 0, 8, 0, 0, 0, 0],
+    [8, 0, 0, 0, 0, 8, 0, 0, 0, 0],
+    [8, 0, 0, 0, 9, 8, 9, 9, 9, 9],
+    [8, 8, 8, 8, 8, 8, 9, 9, 9, 9],
+    [0, 0, 0, 0, 9, 9, 9, 9, 9, 9],
+    [0, 0, 0, 0, 9, 9, 9, 9, 9, 9],
+    [0, 0, 0, 0, 9, 9, 9, 9, 9, 9],
+    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
 ];
-const OC_COLS = 10;
-const OC_ROWS = 9;
-const OPENCODE_LOD = [
-    [8, 8, 8, 8, 8, 8],
-    [8, 0, 0, 0, 0, 8],
-    [8, 0, 9, 9, 0, 8],
-    [8, 0, 9, 9, 0, 8],
-    [8, 0, 0, 0, 0, 8],
-    [8, 8, 8, 8, 8, 8],
+const OC_GRID_MD_COLS = 10;
+const OC_GRID_MD_ROWS = 10;
+export const OPENCODE_GRID = OPENCODE_GRID_HD; // alias for compatibility
+const OC_COLS = OC_HD_COLS;
+const OC_ROWS = OC_HD_ROWS;
+export const OPENCODE_LOD = [
+    [8, 8, 8, 8, 0, 0],
+    [8, 0, 0, 8, 0, 0],
+    [8, 0, 9, 8, 9, 9],
+    [8, 8, 8, 8, 9, 9],
+    [0, 0, 9, 9, 9, 9],
+    [0, 0, 9, 9, 9, 9],
 ];
 const OC_LOD_COLS = 6;
 const OC_LOD_ROWS = 6;
+// ===== Antigravity — rainbow peak/arc mark =====
+const ANTIGRAVITY_GRID = [
+    '....YOO....',
+    '....YOO....',
+    '...LYOOR...',
+    '...LTORR...',
+    '..LLTVPP...',
+    '..TTKKVPP..',
+    '.TQQK.KVU..',
+    '.QQK...KUU.',
+    'NQK.....KUU',
+    'NN.......UU',
+    '...........',
+];
+const AG_COLS = 11;
+const AG_ROWS = 11;
+function selectGrid(zoom, canvasWidth, hd, hdCols, hdRows, md, mdCols, mdRows, lod, lodCols, lodRows) {
+    if (canvasWidth <= 32) {
+        if (zoom < 1.3) {
+            return { grid: lod, cols: lodCols, rows: lodRows };
+        }
+        else {
+            // Zoomed-in on a 32px display (iDotMatrix): use the full HD grid, not MD. Now that cell size
+            // is resolution-aware (creatureCellSize), HD fits the 32px frame (~60% width) and keeps the
+            // creature's true silhouette instead of the coarser MD approximation. MD/LOD stay for the
+            // wide (zoom<1.3) shots where the creature is small and detail would just alias.
+            return { grid: hd, cols: hdCols, rows: hdRows };
+        }
+    }
+    else {
+        if (zoom < 1.3) {
+            return { grid: md, cols: mdCols, rows: mdRows };
+        }
+        else {
+            return { grid: hd, cols: hdCols, rows: hdRows };
+        }
+    }
+}
+/**
+ * On-screen creature width as a fraction of (zoom × output width), independent of LOD grid.
+ *
+ * A sprite spans `SPRITE_W_FRAC × zoom × w` pixels regardless of which HD/MD/LOD grid is selected
+ * (cellSz = span / cols, so the `cols` term cancels). Multiplying by `w` (32 or 64) is what makes
+ * sizing resolution-aware — at 32px a creature is exactly half the pixels it is at 64px, so it stays
+ * inside the iDotMatrix frame instead of overflowing. 0.1875 reproduces the legacy 64px HD size
+ * (24 cols × zoom×0.5 = 12×zoom px = 0.1875 × zoom × 64). See drawOpenCode for the original pattern.
+ */
+const SPRITE_W_FRAC = 0.1875;
+/** Resolution-aware square cell size for a creature sprite.
+ *
+ * Rounded to a whole pixel so every grid cell is a uniform integer block. A
+ * fractional cell size makes adjacent cells round to alternating 1/2px widths,
+ * and on the 2×2 eye holes that intermittently opens a 1px body-coloured seam
+ * between the two eye rows while the creature moves — the eyes appear to "break"
+ * into dots. Integer cells render the eye as a solid block every frame.
+ *
+ * The sizing zoom is itself quantized to a coarse 0.25 step first. The raw zoom
+ * lerps continuously during camera transitions, so a cell size sitting right on
+ * a rounding threshold (e.g. zoom where `…/cols` ≈ x.5) flickers 1↔2px frame to
+ * frame — and since the eye sits at a fixed column, a cellSz change jumps it by
+ * `eyeCol` pixels. Snapping the zoom to discrete steps holds cellSz stable
+ * through a transition so the eye only ever moves by whole-creature translation. */
+export function creatureCellSize(zoom, canvasW, cols) {
+    const zq = Math.round(zoom * 4) / 4; // 0.25 steps — kills threshold-straddle flicker
+    return Math.max(1, Math.round((SPRITE_W_FRAC * zq * canvasW) / cols));
+}
+/** Canonical `#rrggbb` → RGB tuple (LED frame buffers take tuples, not hex). */
+function hexRgb(hex) {
+    return [parseInt(hex.slice(1, 3), 16), parseInt(hex.slice(3, 5), 16), parseInt(hex.slice(5, 7), 16)];
+}
 export const COLORS = {
     // Octopus (terracotta — Android match)
     octopusBody: [0xC0, 0x70, 0x58],
@@ -181,7 +375,7 @@ export const COLORS = {
     // Jellyfish / Codex CLI (indigo — TUI/Android match)
     jellyfishBody: [0x63, 0x66, 0xF1], // indigo #6366F1
     jellyfishEdge: [0x4F, 0x46, 0xE5], // darker edge (breathe cells)
-    jellyfishMarking: [0xA5, 0xB4, 0xFC], // glow #A5B4FC (>_ prompt)
+    jellyfishMarking: [0xF5, 0xF7, 0xFF], // near-white (>_ prompt)
     jellyfishGlow: [0x31, 0x33, 0x78], // dim indigo glow halo
     jellyfishPulse: [0xA5, 0xB4, 0xFC], // bioluminescent pulse
     jellyfishSleeping: [0x3A, 0x3C, 0x90], // dimmed indigo
@@ -190,6 +384,17 @@ export const COLORS = {
     opencodeInner: [0x4B, 0x46, 0x46], // dark core
     opencodePulse: [0xCF, 0xCE, 0xCD], // pulse state
     opencodeSleeping: [0x8A, 0x84, 0x84], // sleep dim
+    // Antigravity (reference rainbow peak/arc)
+    antigravityLime: [0x5C, 0xD6, 0x4D],
+    antigravityTeal: [0x1F, 0xC6, 0xB3],
+    antigravityCyan: [0x3A, 0xC7, 0xEB],
+    antigravityYellow: [0xF5, 0xCB, 0x24],
+    antigravityOrange: [0xFF, 0x84, 0x10],
+    antigravityRed: [0xFF, 0x52, 0x41],
+    antigravityPink: [0xB7, 0x5C, 0xB6],
+    antigravityViolet: [0x66, 0x6F, 0xE1],
+    antigravityBlue: [0x24, 0x7E, 0xFF],
+    antigravitySky: [0x29, 0xB8, 0xEE],
     // Tetra (neon)
     tetraNeon: [0x00, 0xE5, 0xFF],
     tetraBody: [0x1E, 0x40, 0xAF],
@@ -235,11 +440,11 @@ export const COLORS = {
     // Tank walls (above water)
     tankWall: [0x06, 0x0A, 0x10],
     tankWallEdge: [0x10, 0x14, 0x1C],
-    // State shimmer
-    stateIdle: [0x22, 0xC5, 0x5E],
-    stateProcessing: [0x3B, 0x82, 0xF6],
-    stateAwaiting: [0xF5, 0x9E, 0x0B],
-    stateError: [0xEF, 0x44, 0x44],
+    // State shimmer — derived from the canonical shared palette
+    stateIdle: hexRgb(STATE_COLORS[State.IDLE]),
+    stateProcessing: hexRgb(STATE_COLORS[State.PROCESSING]),
+    stateAwaiting: hexRgb(STATE_COLORS[State.AWAITING_PERMISSION]),
+    stateError: [0xEF, 0x44, 0x44], // red — no canonical error state color exists
     white: [0xFF, 0xFF, 0xFF],
     black: [0x00, 0x00, 0x00],
 };
@@ -288,27 +493,45 @@ export function getOpenCodePaletteForSession(sessionIndex = 0) {
         pulse: scaleColor(COLORS.opencodePulse, tone),
     };
 }
+export function getAntigravityPaletteForSession(sessionIndex = 0) {
+    const tone = SESSION_TONE_FACTORS[Math.max(0, Math.min(SESSION_TONE_FACTORS.length - 1, sessionIndex))];
+    return {
+        lime: scaleColor(COLORS.antigravityLime, tone),
+        teal: scaleColor(COLORS.antigravityTeal, tone),
+        cyan: scaleColor(COLORS.antigravityCyan, tone),
+        yellow: scaleColor(COLORS.antigravityYellow, tone),
+        orange: scaleColor(COLORS.antigravityOrange, tone),
+        red: scaleColor(COLORS.antigravityRed, tone),
+        pink: scaleColor(COLORS.antigravityPink, tone),
+        violet: scaleColor(COLORS.antigravityViolet, tone),
+        blue: scaleColor(COLORS.antigravityBlue, tone),
+        sky: scaleColor(COLORS.antigravitySky, tone),
+        cutout: COLORS.black,
+    };
+}
 // ===== Pixel Operations =====
-/** Set a pixel in the 64×64 RGB buffer. */
+/** Set a pixel in the dynamic RGB buffer. */
 export function setPixel(buf, x, y, color) {
-    if (x < 0 || x >= 64 || y < 0 || y >= 64)
+    const w = Math.sqrt(buf.length / 3);
+    if (x < 0 || x >= w || y < 0 || y >= w)
         return;
     const ix = Math.round(x);
     const iy = Math.round(y);
-    if (ix < 0 || ix >= 64 || iy < 0 || iy >= 64)
+    if (ix < 0 || ix >= w || iy < 0 || iy >= w)
         return;
-    const idx = (iy * 64 + ix) * 3;
+    const idx = (iy * w + ix) * 3;
     buf[idx] = color[0];
     buf[idx + 1] = color[1];
     buf[idx + 2] = color[2];
 }
 /** Alpha-blend a pixel onto existing buffer content. */
 export function blendPixel(buf, x, y, color, alpha) {
+    const w = Math.sqrt(buf.length / 3);
     const ix = Math.round(x);
     const iy = Math.round(y);
-    if (ix < 0 || ix >= 64 || iy < 0 || iy >= 64 || alpha <= 0)
+    if (ix < 0 || ix >= w || iy < 0 || iy >= w || alpha <= 0)
         return;
-    const idx = (iy * 64 + ix) * 3;
+    const idx = (iy * w + ix) * 3;
     const a = Math.min(1, alpha);
     const inv = 1 - a;
     buf[idx] = Math.min(255, Math.round(buf[idx] * inv + color[0] * a));
@@ -317,11 +540,12 @@ export function blendPixel(buf, x, y, color, alpha) {
 }
 /** Additive-blend (glow) a pixel. */
 export function glowPixel(buf, x, y, color, intensity) {
+    const w = Math.sqrt(buf.length / 3);
     const ix = Math.round(x);
     const iy = Math.round(y);
-    if (ix < 0 || ix >= 64 || iy < 0 || iy >= 64 || intensity <= 0)
+    if (ix < 0 || ix >= w || iy < 0 || iy >= w || intensity <= 0)
         return;
-    const idx = (iy * 64 + ix) * 3;
+    const idx = (iy * w + ix) * 3;
     buf[idx] = Math.min(255, buf[idx] + Math.round(color[0] * intensity));
     buf[idx + 1] = Math.min(255, buf[idx + 1] + Math.round(color[1] * intensity));
     buf[idx + 2] = Math.min(255, buf[idx + 2] + Math.round(color[2] * intensity));
@@ -336,45 +560,52 @@ export function fillRect(buf, x, y, w, h, color) {
 }
 /** Fill a scaled cell (variable size rectangle) — edge rounding for correct PIXEL_ASPECT. */
 function fillCell(buf, x, y, w, h, color) {
-    const ix = Math.floor(x);
-    const iy = Math.floor(y);
-    const iw = Math.max(1, Math.round(ix + w) - ix); // right edge - left edge
-    const ih = Math.max(1, Math.round(iy + h) - iy);
+    const ix1 = Math.round(x);
+    const iy1 = Math.round(y);
+    const ix2 = Math.round(x + w);
+    const iy2 = Math.round(y + h);
+    const iw = Math.max(1, ix2 - ix1);
+    const ih = Math.max(1, iy2 - iy1);
     for (let dy = 0; dy < ih; dy++) {
         for (let dx = 0; dx < iw; dx++) {
-            setPixel(buf, ix + dx, iy + dy, color);
+            setPixel(buf, ix1 + dx, iy1 + dy, color);
         }
     }
 }
 /** Fill a scaled cell and track drawn pixels for outline generation. */
 function fillCellTracked(buf, x, y, w, h, color, pixels) {
-    const ix = Math.floor(x);
-    const iy = Math.floor(y);
-    const iw = Math.max(1, Math.round(ix + w) - ix);
-    const ih = Math.max(1, Math.round(iy + h) - iy);
+    const canvasW = Math.sqrt(buf.length / 3);
+    const ix1 = Math.round(x);
+    const iy1 = Math.round(y);
+    const ix2 = Math.round(x + w);
+    const iy2 = Math.round(y + h);
+    const iw = Math.max(1, ix2 - ix1);
+    const ih = Math.max(1, iy2 - iy1);
     for (let dy = 0; dy < ih; dy++) {
         for (let dx = 0; dx < iw; dx++) {
-            const px = ix + dx;
-            const py = iy + dy;
-            if (px >= 0 && px < 64 && py >= 0 && py < 64) {
-                const idx = (py * 64 + px) * 3;
+            const px = ix1 + dx;
+            const py = iy1 + dy;
+            if (px >= 0 && px < canvasW && py >= 0 && py < canvasW) {
+                const idx = (py * canvasW + px) * 3;
                 buf[idx] = color[0];
                 buf[idx + 1] = color[1];
                 buf[idx + 2] = color[2];
-                pixels.add(py * 64 + px);
+                pixels.add(py * canvasW + px);
             }
         }
     }
 }
 /** Glow-fill a scaled cell — edge rounding. */
 function glowCell(buf, x, y, w, h, color, intensity) {
-    const ix = Math.floor(x);
-    const iy = Math.floor(y);
-    const iw = Math.max(1, Math.round(ix + w) - ix);
-    const ih = Math.max(1, Math.round(iy + h) - iy);
+    const ix1 = Math.round(x);
+    const iy1 = Math.round(y);
+    const ix2 = Math.round(x + w);
+    const iy2 = Math.round(y + h);
+    const iw = Math.max(1, ix2 - ix1);
+    const ih = Math.max(1, iy2 - iy1);
     for (let dy = 0; dy < ih; dy++) {
         for (let dx = 0; dx < iw; dx++) {
-            glowPixel(buf, ix + dx, iy + dy, color, intensity);
+            glowPixel(buf, ix1 + dx, iy1 + dy, color, intensity);
         }
     }
 }
@@ -408,6 +639,7 @@ function drawCreatureGlow(buf, cx, cy, rx, ry, glowColor, intensity = 0.15, isLO
 // ===== Creature Outline =====
 /** 8-directional colored outline around tracked creature pixels. */
 function drawCreatureOutline(buf, creaturePixels, bodyColor, alpha = 0.8) {
+    const w = Math.sqrt(buf.length / 3);
     const outlineColor = [
         Math.round(bodyColor[0] * 0.5),
         Math.round(bodyColor[1] * 0.5),
@@ -415,17 +647,17 @@ function drawCreatureOutline(buf, creaturePixels, bodyColor, alpha = 0.8) {
     ];
     const neighbors = [-1, 0, 1];
     for (const key of creaturePixels) {
-        const cx = key % 64;
-        const cy = Math.floor(key / 64);
+        const cx = key % w;
+        const cy = Math.floor(key / w);
         for (const ndx of neighbors) {
             for (const ndy of neighbors) {
                 if (ndx === 0 && ndy === 0)
                     continue;
                 const nx = cx + ndx;
                 const ny = cy + ndy;
-                if (nx < 0 || nx >= 64 || ny < 0 || ny >= 64)
+                if (nx < 0 || nx >= w || ny < 0 || ny >= w)
                     continue;
-                if (!creaturePixels.has(ny * 64 + nx)) {
+                if (!creaturePixels.has(ny * w + nx)) {
                     blendPixel(buf, nx, ny, outlineColor, alpha);
                 }
             }
@@ -499,26 +731,37 @@ export function drawOctopus(buf, worldX, worldY, state, animFrame, cam, palette
     if (!isVisible(worldX, worldY, cam, 0.15))
         return;
     const [scx, scy] = worldToScreen(worldX, worldY, cam);
+    const w = Math.sqrt(buf.length / 3);
     // LOD selection
-    const useLOD = cam.zoom < 1.3;
-    const grid = useLOD ? OCTOPUS_LOD : OCTOPUS_GRID;
-    const cols = useLOD ? OCTO_LOD_COLS : OCTO_COLS;
-    const rows = useLOD ? OCTO_LOD_ROWS : OCTO_ROWS;
-    // Fixed 1px per cell — LED pixel art, no fractional sizes, no tearing
-    const cellSz = 1;
-    const spriteW = cols;
-    const spriteH = rows;
+    const select = selectGrid(cam.zoom, w, OCTOPUS_GRID_HD, OCTO_HD_COLS, OCTO_HD_ROWS, OCTOPUS_GRID_MD, OCTO_GRID_MD_COLS, OCTO_GRID_MD_ROWS, OCTOPUS_LOD, OCTO_LOD_COLS, OCTO_LOD_ROWS);
+    const grid = select.grid;
+    const cols = select.cols;
+    const rows = select.rows;
+    // Resolution-aware cell size — sprite spans a fixed fraction of (zoom × output width),
+    // so it scales down on the 32px iDotMatrix instead of overflowing the frame.
+    const cellSz = creatureCellSize(cam.zoom, w, cols);
+    const spriteW = cols * cellSz;
+    const spriteH = rows * cellSz;
+    // Snap the sprite origin to whole pixels. The cells tile from this origin via
+    // round(base + col*cellSz); if `base` is fractional, a swimming creature's
+    // sub-pixel screen drift shifts the rounding phase every frame, so each cell
+    // oscillates ±1px (shimmer). On the small high-contrast eye holes that reads
+    // as the eyes "breaking up" while the octopus moves. Rounding the origin makes
+    // the cell pattern frame-stable (only an integer translation changes), so the
+    // creature moves in clean 1px steps with rock-steady eyes.
     const baseX = Math.round(scx - spriteW / 2);
     const baseY = Math.round(scy - spriteH / 2);
-    // Working: gentle vertical bob (integer pixels only)
+    // Working: gentle vertical bob (scaled by cellSz)
     const breathPx = state === 'working'
-        ? Math.round(Math.sin(animFrame * 0.3) * 1.5)
+        ? Math.round(Math.sin(animFrame * 0.3) * cellSz * 1.5)
         : 0;
     // Body color by state
     const bodyColor = state === 'working' ? palette.starburst
         : state === 'sleeping' ? palette.sleeping
             : palette.body;
-    // Draw all cells — solid fill, no outline
+    // Track drawn pixels for outline generation
+    const trackedPixels = new Set();
+    // Draw all cells
     for (let row = 0; row < rows; row++) {
         for (let col = 0; col < cols; col++) {
             const cellType = grid[row][col];
@@ -541,16 +784,18 @@ export function drawOctopus(buf, worldX, worldY, state, animFrame, cam, palette
             // Tentacle animation only — arms stay fixed (attached to body)
             let dx = 0;
             if (state !== 'sleeping' && (cellType === LEFT_LEG || cellType === RIGHT_LEG)) {
-                dx = Math.round(Math.sin(animFrame * 0.2 + col * 1.8) * 1.5);
+                dx = Math.round(Math.sin(animFrame * 0.2 + col * 1.8) * cellSz * 1.5);
             }
-            fillCell(buf, baseX + col * cellSz + dx, baseY + row * cellSz + breathPx, cellSz, cellSz, color);
+            fillCellTracked(buf, baseX + col * cellSz + dx, baseY + row * cellSz + breathPx, cellSz, cellSz, color, trackedPixels);
         }
     }
+    // Draw outline to separate octopus from blue water (matches crayfish style)
+    drawCreatureOutline(buf, trackedPixels, bodyColor, 0.8);
     // "?" bubble when asking
     if (state === 'asking') {
         const bobY = Math.round(Math.sin(animFrame * 0.25));
         const bx = scx;
-        const by = baseY - 3 + bobY;
+        const by = baseY - Math.round(cellSz * 3) + bobY;
         const r = 3;
         for (let dy = -r; dy <= r; dy++) {
             for (let dx = -r; dx <= r; dx++) {
@@ -569,7 +814,7 @@ export function drawOctopus(buf, worldX, worldY, state, animFrame, cam, palette
     // Starburst particles when working
     if (state === 'working') {
         const sparkPhase = animFrame * 0.35;
-        const dist = 5 + Math.sin(animFrame * 0.25) * 3;
+        const dist = (5 + Math.sin(animFrame * 0.25) * 3) * cellSz;
         for (let i = 0; i < 6; i++) {
             const angle = sparkPhase + (i * Math.PI * 2 / 6);
             const sx = scx + Math.cos(angle) * dist;
@@ -589,28 +834,29 @@ export function drawJellyfish(buf, worldX, worldY, state, animFrame, cam, palett
     if (!isVisible(worldX, worldY, cam, 0.15))
         return;
     const [scx, scy] = worldToScreen(worldX, worldY, cam);
+    const w = Math.sqrt(buf.length / 3);
     // LOD selection
-    const useLOD = cam.zoom < 1.3;
-    const grid = useLOD ? JELLYFISH_LOD : JELLYFISH_GRID;
-    const cols = useLOD ? JF_LOD_COLS : JF_COLS;
-    const rows = useLOD ? JF_LOD_ROWS : JF_ROWS;
-    // Fixed 1px per cell — LED pixel art
-    const cellSz = 1;
-    const spriteW = cols;
-    const spriteH = rows;
-    const baseX = Math.round(scx - spriteW / 2);
-    const baseY = Math.round(scy - spriteH / 2);
+    const select = selectGrid(cam.zoom, w, JELLYFISH_GRID_HD, JF_HD_COLS, JF_HD_ROWS, JELLYFISH_GRID_MD, JF_GRID_MD_COLS, JF_GRID_MD_ROWS, JELLYFISH_LOD, JF_LOD_COLS, JF_LOD_ROWS);
+    const grid = select.grid;
+    const cols = select.cols;
+    const rows = select.rows;
+    // Resolution-aware cell size (see creatureCellSize) — scales with output width.
+    const cellSz = creatureCellSize(cam.zoom, w, cols);
+    const spriteW = cols * cellSz;
+    const spriteH = rows * cellSz;
+    const baseX = scx - spriteW / 2;
+    const baseY = scy - spriteH / 2;
     // Bell pulse: contraction/expansion
     const pulseSpeed = state === 'working' ? 0.25 : 0.06;
     const pulsePhase = Math.sin(animFrame * pulseSpeed);
     const contracting = pulsePhase < 0;
-    // Vertical bob when working
+    // Vertical bob when working (scaled by cellSz)
     const breathPx = state === 'working'
-        ? Math.round(Math.sin(animFrame * 0.3) * 1.5)
+        ? Math.round(Math.sin(animFrame * 0.3) * cellSz * 1.5)
         : 0;
     // Bioluminescent body color pulse when working
     const bodyColor = state === 'working'
-        ? lerpColor(palette.body, palette.pulse, (Math.sin(animFrame * 0.2) + 1) * 0.5)
+        ? lerpColor(palette.body, palette.pulse, 0.18 + ((Math.sin(animFrame * 0.2) + 1) * 0.18))
         : state === 'sleeping' ? palette.sleeping
             : palette.body;
     // >_ marking blink
@@ -646,7 +892,7 @@ export function drawJellyfish(buf, worldX, worldY, state, animFrame, cam, palett
     if (state === 'asking') {
         const bobY = Math.round(Math.sin(animFrame * 0.25));
         const bx = scx;
-        const by = baseY - 3 + bobY;
+        const by = baseY - Math.round(cellSz * 3) + bobY;
         const r = 3;
         for (let dy = -r; dy <= r; dy++) {
             for (let dx = -r; dx <= r; dx++) {
@@ -665,7 +911,7 @@ export function drawJellyfish(buf, worldX, worldY, state, animFrame, cam, palett
     // Orbiting glow particles when working (bioluminescent)
     if (state === 'working') {
         const orbitPhase = animFrame * 0.2;
-        const dist = 5 + Math.sin(animFrame * 0.15) * 2;
+        const dist = (5 + Math.sin(animFrame * 0.15) * 2) * cellSz;
         for (let i = 0; i < 4; i++) {
             const angle = orbitPhase + (i * Math.PI * 2 / 4);
             const sx = scx + Math.cos(angle) * dist;
@@ -676,48 +922,209 @@ export function drawJellyfish(buf, worldX, worldY, state, animFrame, cam, palett
 }
 // ===== OpenCode — nested-square logo (simulator SSOT) =====
 export function drawOpenCode(buf, worldX, worldY, state, animFrame, camera, palette) {
-    const scx = Math.round(((worldX - camera.cx) * camera.zoom + 0.5) * 64);
-    const scy = Math.round(((worldY - camera.cy) * camera.zoom + 0.5) * 64);
+    const w = Math.sqrt(buf.length / 3);
+    const [scx, scy] = worldToScreen(worldX, worldY, camera);
+    // Canonical opencode mark: a single-color vertical rectangular RING (16:20) with a
+    // HOLLOW center — drawn procedurally so it scales cleanly to any panel (64px, 32px,
+    // iDotMatrix) instead of grid sprites that overflowed 32px or drew a filled shadow.
     const worldW = 10 / 64;
-    const pixW = Math.max(1, Math.round(worldW * camera.zoom * 64 / OC_COLS));
-    const pixH = pixW;
+    const unit = Math.max(1, Math.round((worldW * camera.zoom * w) / OC_GRID_MD_COLS));
+    const outerW = Math.max(5, 6 * unit);
+    const outerH = Math.max(6, Math.round(outerW * 1.25)); // slightly tall (16:20)
+    const thick = Math.max(1, Math.round(outerW * 0.28)); // frame thickness ~ brand 4/16
     const breathPx = state === 'working'
         ? Math.round(Math.sin(animFrame * 0.3) * 1.5)
         : state === 'idle' ? Math.round(Math.sin(animFrame * 0.08) * 0.7) : 0;
-    const useLod = camera.zoom < 1.3;
-    const grid = useLod ? OPENCODE_LOD : OPENCODE_GRID;
-    const gc = useLod ? OC_LOD_COLS : OC_COLS;
-    const gr = useLod ? OC_LOD_ROWS : OC_ROWS;
-    const baseX = scx - Math.round((gc * pixW) / 2);
-    const baseY = scy + breathPx - Math.round((gr * pixH) / 2);
-    const outerColor = state === 'working'
+    const color = state === 'working'
         ? lerpColor(palette.outer, palette.pulse, 0.5 + Math.sin(animFrame * 0.2) * 0.5)
         : state === 'sleeping' ? palette.sleeping : palette.outer;
-    const innerColor = state === 'sleeping'
-        ? scaleColor(palette.inner, 0.6) : palette.inner;
-    for (let r = 0; r < gr; r++) {
-        for (let c = 0; c < gc; c++) {
-            const cell = grid[r][c];
-            if (cell === 0)
-                continue;
-            const color = (cell === OPENCODE_CORE) ? innerColor : outerColor;
-            for (let dy = 0; dy < pixH; dy++) {
-                for (let dx = 0; dx < pixW; dx++) {
-                    setPixel(buf, baseX + c * pixW + dx, baseY + r * pixH + dy, color);
-                }
-            }
+    const x0 = scx - Math.round(outerW / 2);
+    const y0 = scy + breathPx - Math.round(outerH / 2);
+    for (let dy = 0; dy < outerH; dy++) {
+        for (let dx = 0; dx < outerW; dx++) {
+            const onFrame = dx < thick || dx >= outerW - thick || dy < thick || dy >= outerH - thick;
+            if (!onFrame)
+                continue; // hollow center
+            setPixel(buf, x0 + dx, y0 + dy, color);
         }
     }
     if (state === 'asking') {
-        // Amber three-dot asking indicator
-        const dotCx = scx + Math.round(gc / 2) + 3;
-        const dotCy = baseY - 2 + Math.round(Math.sin(animFrame * 0.26) * 1.4);
+        // Amber three-dot asking indicator above the mark
+        const dotCx = scx + Math.round(outerW / 2) + 3;
+        const dotCy = y0 - 2 + Math.round(Math.sin(animFrame * 0.26) * 1.4);
         for (let i = -1; i <= 1; i++) {
             blendPixel(buf, dotCx + i * 3, dotCy, COLORS.stateAwaiting, 0.75);
             blendPixel(buf, dotCx + i * 3 + 1, dotCy, COLORS.stateAwaiting, 0.45);
         }
     }
 }
+function antigravityCellColor(ch, palette) {
+    switch (ch) {
+        case 'L': return palette.lime;
+        case 'T': return palette.teal;
+        case 'Q': return palette.cyan;
+        case 'Y': return palette.yellow;
+        case 'O': return palette.orange;
+        case 'R': return palette.red;
+        case 'P': return palette.pink;
+        case 'V': return palette.violet;
+        case 'U': return palette.blue;
+        case 'N': return palette.sky;
+        case 'K': return palette.cutout;
+        default: return null;
+    }
+}
+function drawQuestionMark(buf, x, y, color) {
+    setPixel(buf, x, y, color);
+    setPixel(buf, x + 1, y, color);
+    setPixel(buf, x + 1, y + 1, color);
+    setPixel(buf, x, y + 2, color);
+    setPixel(buf, x, y + 4, color);
+}
+/**
+ * Awaiting affordance: a soft white disc with an amber "?" on top.
+ *
+ * (centerX, centerY) is the CENTER of the disc. The disc is the backing that
+ * keeps the mark legible against mid-water blues; the glyph is the 5-pixel
+ * question mark above, which is the smallest form that still reads as "?"
+ * rather than as noise.
+ *
+ * Mirror of `drawQuestionBubble` in apple/AgentDeck/Daemon/Modules/PixooRenderer.swift —
+ * keep the radius, alpha, and glyph offsets identical.
+ */
+export function drawQuestionBubble(buf, centerX, centerY) {
+    const r = 3;
+    for (let dy = -r; dy <= r; dy++) {
+        for (let dx = -r; dx <= r; dx++) {
+            if (dx * dx + dy * dy <= r * r)
+                blendPixel(buf, centerX + dx, centerY + dy, COLORS.white, 0.7);
+        }
+    }
+    // 5-px "?" centered in the disc — every pixel stays inside radius 3.
+    drawQuestionMark(buf, centerX, centerY - 2, COLORS.stateAwaiting);
+}
+/**
+ * Draw a canonical agent mark rasterized from design/brand/*.svg.
+ *
+ * Pixoo64 and iDotMatrix used to maintain independent hand-drawn creature grids;
+ * the Swift daemon carried another copy. That made the smallest panels look like
+ * approximations of the agents while vector/e-ink surfaces showed their real marks.
+ * This renderer consumes the generated 24×24 alpha masks so both daemon families
+ * preserve the official silhouette and cutouts. State remains a motion/color layer
+ * around the mark, never a geometry rewrite.
+ */
+export function drawOfficialDotGlyph(buf, glyph, worldX, worldY, state, animFrame, camera, sessionToneIndex = 0, sizeScale = 1.0, sick = false) {
+    if (!isVisible(worldX, worldY, camera, 0.15))
+        return;
+    const [scx, scy] = worldToScreen(worldX, worldY, camera);
+    const canvasW = Math.sqrt(buf.length / 3);
+    // The 8px floor is the legibility limit of the official mask — a crowd shrink
+    // is allowed to reach it but never to go under it and turn a brand mark into mush.
+    const target = Math.max(8, Math.round(0.1875 * sizeScale * camera.zoom * canvasW));
+    const bob = state === 'working' ? Math.round(Math.sin(animFrame * 0.28) * Math.max(1, target / 14)) : 0;
+    const x0 = Math.round(scx - target / 2);
+    const y0 = Math.round(scy - target / 2) + bob;
+    const mask = OFFICIAL_DOT_GLYPHS[glyph];
+    const octopus = getOctopusPaletteForSession(sessionToneIndex);
+    const codex = getJellyfishPaletteForSession(sessionToneIndex);
+    const openCode = getOpenCodePaletteForSession(sessionToneIndex);
+    const processingPulse = 0.28 + 0.18 * ((Math.sin(animFrame * 0.2) + 1) / 2);
+    const solidColor = () => {
+        if (sick)
+            return COLORS.crayfishSick;
+        switch (glyph) {
+            case 'claudeCode':
+                return state === 'working' ? octopus.starburst : state === 'sleeping' ? octopus.sleeping : octopus.body;
+            case 'codex':
+                return state === 'working' ? lerpColor(codex.body, codex.pulse, processingPulse) : state === 'sleeping' ? codex.sleeping : codex.body;
+            case 'openCode':
+                return state === 'working' ? lerpColor(openCode.outer, openCode.pulse, processingPulse) : state === 'sleeping' ? openCode.sleeping : openCode.outer;
+            case 'openClaw': {
+                const base = state === 'working' ? COLORS.crayfishRouting : COLORS.crayfishBody;
+                return sick ? COLORS.crayfishSick : base;
+            }
+            case 'antigravity':
+                return COLORS.white;
+        }
+    };
+    const base = solidColor();
+    for (let dy = 0; dy < target; dy++) {
+        const sy = Math.min(OFFICIAL_DOT_GLYPH_SIZE - 1, Math.floor(dy * OFFICIAL_DOT_GLYPH_SIZE / target));
+        for (let dx = 0; dx < target; dx++) {
+            const sx = Math.min(OFFICIAL_DOT_GLYPH_SIZE - 1, Math.floor(dx * OFFICIAL_DOT_GLYPH_SIZE / target));
+            const alpha = mask[sy * OFFICIAL_DOT_GLYPH_SIZE + sx] / 255;
+            if (alpha <= 0.02)
+                continue;
+            let color = base;
+            if (glyph === 'antigravity') {
+                const t = sx / (OFFICIAL_DOT_GLYPH_SIZE - 1);
+                color = t < 0.25 ? lerpColor([0x5c, 0xd6, 0x4d], [0xf5, 0xcb, 0x24], t * 4)
+                    : t < 0.55 ? lerpColor([0xf5, 0xcb, 0x24], [0xff, 0x52, 0x41], (t - 0.25) / 0.3)
+                        : t < 0.78 ? lerpColor([0xff, 0x52, 0x41], [0xb7, 0x5c, 0xb6], (t - 0.55) / 0.23)
+                            : lerpColor([0xb7, 0x5c, 0xb6], [0x24, 0x7e, 0xff], (t - 0.78) / 0.22);
+            }
+            blendPixel(buf, x0 + dx, y0 + dy, color, alpha);
+        }
+    }
+    // OpenClaw's official mark has eye cutouts too small to survive every 32px
+    // camera position. Re-light the canonical eye coordinates without changing
+    // the silhouette so the hardware keeps its teal OpenClaw signature.
+    if (glyph === 'openClaw' && !sick) {
+        const eye = COLORS.crayfishEye;
+        for (const [vx, vy] of [[9.05, 7.63], [15.38, 7.63]]) {
+            setPixel(buf, x0 + Math.round(vx / 24 * target), y0 + Math.round(vy / 24 * target), eye);
+        }
+    }
+    if (state === 'asking') {
+        drawQuestionBubble(buf, x0 + target + 1, y0);
+    }
+    else if (state === 'working') {
+        const sparkle = glyph === 'antigravity' ? [0xff, 0xd8, 0x50] : lerpColor(base, COLORS.white, 0.45);
+        for (let i = 0; i < 4; i++) {
+            const angle = animFrame * 0.22 + i * Math.PI / 2;
+            const distance = target / 2 + 2;
+            setPixel(buf, Math.round(scx + Math.cos(angle) * distance), Math.round(scy + bob + Math.sin(angle) * distance), sparkle);
+        }
+    }
+}
+export function drawAntigravity(buf, worldX, worldY, state, animFrame, camera, palette) {
+    if (!isVisible(worldX, worldY, camera, 0.15))
+        return;
+    const [scx, scy] = worldToScreen(worldX, worldY, camera);
+    const w = Math.sqrt(buf.length / 3);
+    const cellSz = creatureCellSize(camera.zoom, w, AG_COLS);
+    const spriteW = AG_COLS * cellSz;
+    const spriteH = AG_ROWS * cellSz;
+    const breathPx = state === 'working'
+        ? Math.round(Math.sin(animFrame * 0.28) * cellSz)
+        : state === 'idle' ? Math.round(Math.sin(animFrame * 0.08) * 0.5) : 0;
+    const cameraNudgeX = state === 'working' && ((animFrame >> 3) & 1) ? cellSz : 0;
+    const cameraNudgeY = state !== 'idle' && ((animFrame >> 2) & 1) ? -cellSz : 0;
+    const baseX = Math.round(scx - spriteW / 2) + cameraNudgeX;
+    const baseY = Math.round(scy - spriteH / 2) + breathPx + cameraNudgeY;
+    const trackedPixels = new Set();
+    for (let row = 0; row < AG_ROWS; row++) {
+        const line = ANTIGRAVITY_GRID[row];
+        for (let col = 0; col < AG_COLS; col++) {
+            const color = antigravityCellColor(line[col], palette);
+            if (!color)
+                continue;
+            fillCellTracked(buf, baseX + col * cellSz, baseY + row * cellSz, cellSz, cellSz, color, trackedPixels);
+        }
+    }
+    drawCreatureOutline(buf, trackedPixels, palette.violet, 0.45);
+    if (state === 'asking') {
+        drawQuestionMark(buf, Math.round(scx + spriteW * 0.48), Math.round(baseY + spriteH * 0.18), COLORS.stateAwaiting);
+    }
+    if (state === 'working') {
+        const sparkle = lerpColor(palette.yellow, COLORS.white, 0.35);
+        const dist = Math.max(2, cellSz * 3);
+        for (let i = 0; i < 4; i++) {
+            const t = animFrame * 0.22 + i * Math.PI / 2;
+            setPixel(buf, Math.round(scx + Math.cos(t) * dist), Math.round(baseY - 1 + Math.sin(t) * dist * 0.35), sparkle);
+        }
+    }
+}
 /**
  * Draw crayfish scaled by camera zoom.
  * @param worldX  Crayfish center in normalized world X (0~1)
@@ -727,14 +1134,16 @@ export function drawCrayfish(buf, worldX, worldY, routing, animFrame, cam, sick
     if (!isVisible(worldX, worldY, cam, 0.15))
         return;
     const [scx, scy] = worldToScreen(worldX, worldY, cam);
+    const w = Math.sqrt(buf.length / 3);
     // LOD selection — matches octopus threshold
-    const useLOD = cam.zoom < 1.3;
-    const grid = useLOD ? CRAYFISH_LOD : CRAYFISH_GRID;
-    const cols = useLOD ? CF_LOD_COLS : CF_COLS;
-    const rows = useLOD ? CF_LOD_ROWS : CF_ROWS;
-    // Cell size: detail cellW = Z, LOD cellW = 12*Z/8 = 1.5*Z (bigger cells for fewer cols)
-    const cellW = useLOD ? cam.zoom * 1.5 : cam.zoom;
-    const cellH = cellW * 1.5;
+    const select = selectGrid(cam.zoom, w, CRAYFISH_GRID_HD, CF_HD_COLS, CF_HD_ROWS, CRAYFISH_GRID_MD, CF_GRID_MD_COLS, CF_GRID_MD_ROWS, CRAYFISH_LOD, CF_LOD_COLS, CF_LOD_ROWS);
+    const grid = select.grid;
+    const cols = select.cols;
+    const rows = select.rows;
+    // Resolution-aware square cells (see creatureCellSize). Square (cellH = cellW) — the old
+    // cellH = cellW*1.5 stretched the round OpenClaw body into a tall pointed shape.
+    const cellW = creatureCellSize(cam.zoom, w, cols);
+    const cellH = cellW;
     const spriteW = cols * cellW;
     const spriteH = rows * cellH;
     const baseX = scx - spriteW / 2;
@@ -752,7 +1161,7 @@ export function drawCrayfish(buf, worldX, worldY, routing, animFrame, cam, sick
     // 1. Glow halo (before creature — stronger for LOD)
     const glowRx = spriteW / 2 + 2;
     const glowRy = spriteH / 2 + 2;
-    drawCreatureGlow(buf, scx, scy + breathPx, glowRx, glowRy, COLORS.crayfishGlow, 0.12, useLOD);
+    drawCreatureGlow(buf, scx, scy + breathPx, glowRx, glowRy, COLORS.crayfishGlow, 0.12, cols === 8);
     // 2. Draw cells with pixel tracking
     const trackedPixels = new Set();
     for (let row = 0; row < rows; row++) {
@@ -769,7 +1178,7 @@ export function drawCrayfish(buf, worldX, worldY, routing, animFrame, cam, sick
                     const spd = routing ? 0.35 : 0.15;
                     const wiggle = Math.sin(animFrame * spd + col * 3) * cellW * 1.5;
                     // Random-ish twitch: sharp spike every ~30 frames
-                    const twitch = ((animFrame + col * 17) % 60) < 4 ? cellW * 2 * (col < 6 ? -1 : 1) : 0;
+                    const twitch = ((animFrame + col * 17) % 60) < 4 ? cellW * 2 * (col < cols / 2 ? -1 : 1) : 0;
                     dx = ensureMinAmplitude(wiggle + twitch, 1);
                 }
                 // Claw animation — routing: slower, wider clap; idle: gentle sway
@@ -800,11 +1209,11 @@ export function drawCrayfish(buf, worldX, worldY, routing, animFrame, cam, sick
     }
     // 3. Colored outline — moderate alpha for LOD
     const bodyColor = routing ? COLORS.crayfishRouting : COLORS.crayfishBody;
-    const outlineAlpha = useLOD ? 0.6 : 0.8;
+    const outlineAlpha = cols === 8 ? 0.6 : 0.8;
     drawCreatureOutline(buf, trackedPixels, bodyColor, outlineAlpha);
     // Fixed 3×3 eyes (teal center + black ring) — drawn at grid eye positions
-    const eyeRow = useLOD ? 2 : 3;
-    const eyeCols = useLOD ? [2, 5] : [4, 7];
+    const eyeRow = cols === 24 ? 9 : (cols === 8 ? 2 : 3);
+    const eyeCols = cols === 24 ? [8, 14] : (cols === 8 ? [2, 5] : [4, 7]);
     const sickEyeCenter = [0x44, 0x66, 0x60]; // dim teal for sick
     const eyeCenter = sick ? sickEyeCenter : COLORS.crayfishEye;
     const eyeRing = sick ? [0x44, 0x33, 0x33] : COLORS.crayfishEyeRing;
@@ -851,7 +1260,8 @@ export function drawTetra(buf, worldX, worldY, heading, cam) {
     if (!isVisible(worldX, worldY, cam, 0.08))
         return;
     const [sx, sy] = worldToScreen(worldX, worldY, cam);
-    const px = cam.zoom; // pixel scale
+    const w = Math.sqrt(buf.length / 3);
+    const px = cam.zoom * (w / 64); // resolution-aware pixel scale (half-size on 32px iDotMatrix)
     // Body (2px-equivalent)
     const bw = Math.max(1, Math.round(px * 2));
     const bh = Math.max(1, Math.round(px));
@@ -887,6 +1297,7 @@ const PIXEL_FONT = {
     '8': [0b111, 0b101, 0b111, 0b101, 0b111],
     '9': [0b111, 0b101, 0b111, 0b001, 0b111],
     '%': [0b101, 0b001, 0b010, 0b100, 0b101],
+    '/': [0b001, 0b001, 0b010, 0b100, 0b100],
     'h': [0b100, 0b100, 0b111, 0b101, 0b101],
     'm': [0b101, 0b111, 0b101, 0b101, 0b101], // two pillars joined — distinct from 'n'
     'd': [0b001, 0b001, 0b011, 0b101, 0b011], // lowercase d — for day units (e.g. "6d22h")