From e460c758fd8d2a5efd1dfe7f547439450ae0642e Mon Sep 17 00:00:00 2001
From: "Engineering (agent-engineering)" <engineering@marcus.local>
Date: Wed, 20 May 2026 09:32:48 -0700
Subject: [PATCH] feat(frontend): replace agent blob sprites with LimeZu
 character tiles

---
 src/frontend/FarmCanvas.jsx      |  3 ++-
 src/frontend/src/agentSprites.js | 30 ++++++++++++++++++++++++++++++
 2 files changed, 32 insertions(+), 1 deletion(-)
 create mode 100644 src/frontend/src/agentSprites.js

diff --git a/src/frontend/FarmCanvas.jsx b/src/frontend/FarmCanvas.jsx
index 530e9f3..fd0edc1 100644
--- a/src/frontend/FarmCanvas.jsx
+++ b/src/frontend/FarmCanvas.jsx
@@ -3,6 +3,7 @@ import { useRef, useCallback } from 'react';
 import { useStore } from './store';
 import { rooms, agentDesks } from './officeMap';
 import { TILESET_URL, TILE_INDEX, ROOM_TILE_STYLES } from './src/tileLoader';
+import { getAgentSpriteUrl } from './src/agentSprites';
 
 const TILE = 32;
 const SCALE = 2; // 2x = 64px per tile
@@ -312,7 +313,7 @@ export default function FarmCanvas() {
             }} />
             {/* Sprite at 48x48, centered in 56x56 container */}
             <img
-              src={`/office/sprites/agent-${agent.id}.png`}
+              src={getAgentSpriteUrl(agent.id)}
               alt={agent.name}
               style={{
                 width: 48,
diff --git a/src/frontend/src/agentSprites.js b/src/frontend/src/agentSprites.js
new file mode 100644
index 0000000..98504ac
--- /dev/null
+++ b/src/frontend/src/agentSprites.js
@@ -0,0 +1,30 @@
+// agentSprites.js — Per-agent character sprite assignments
+// Uses LimeZu character sprites from public/agents/ directory
+// 4 base characters (Amelia, Adam, Alex, Bob) with idle/run/sit variations
+// Each agent gets a unique character for distinct silhouettes.
+
+// Character base URL
+export const SPRITES_BASE = '/agents/';
+
+// Per-agent character assignments
+// character: which NPC base to use
+// pose: idle, run, or sit (defaults to idle)
+// Each agent gets a DIFFERENT character so they're distinguishable by silhouette
+export const AGENT_SPRITES = {
+  cos:           { character: 'Alex',    pose: 'idle' },
+  engineering:   { character: 'Adam',    pose: 'idle' },
+  'senior-eng':  { character: 'Bob',     pose: 'idle' },
+  trust:         { character: 'Amelia',  pose: 'idle' },
+  market:        { character: 'Adam',    pose: 'run' },
+  health:        { character: 'Amelia',  pose: 'sit' },
+  content:       { character: 'Alex',    pose: 'sit' },
+  presentations: { character: 'Bob',     pose: 'run' },
+  vault:         { character: 'Bob',     pose: 'sit' },
+};
+
+// Get the sprite URL for an agent
+export function getAgentSpriteUrl(agentId) {
+  const sprite = AGENT_SPRITES[agentId];
+  if (!sprite) return `${SPRITES_BASE}Amelia_idle.png`;
+  return `${SPRITES_BASE}${sprite.character}_${sprite.pose}.png`;
+}