fix(spatial-office#12): show agent name labels only on hover

Per design-critique-1 Issue 3 (P1), agent name labels were always visible and stacked into unreadable text when agents were near each other. Now matches Stardew Valley convention: name shows on hover only. Single conditional change. The hover tooltip (Html overlay with status + current task) is unchanged.
feat(frontend): detailed furniture layouts for all 6 rooms
2026-06-01 21:49:59 -07:00 · 2026-05-20 09:37:21 -07:00 · 2026-05-20 09:33:38 -07:00
4 changed files with 170 additions and 48 deletions
--- a/packages/frontend/src/AgentSprite.jsx
+++ b/packages/frontend/src/AgentSprite.jsx
@ -132,7 +132,8 @@ export default function AgentSprite({ agent, hovered, onHover }) {
        />
      </mesh>

-      {/* Agent name label */}
+      {/* Agent name label — hover only (per design-critique-1 Issue 3, P1) */}
+      {hovered && (
        <Text
          position={
            targetPos
@ -148,6 +149,7 @@ export default function AgentSprite({ agent, hovered, onHover }) {
        >
          {agent.name}
        </Text>
+      )}

      {/* Hover tooltip */}
      {hovered && (
--- 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
@ -53,13 +54,16 @@ function TileSprite({ tileCol, tileRow, x, y }) {
 }

 // Render a single furniture item: an <image> element clipped to one tile
-function FurnitureItem({ tileName, tx, ty }) {
+function FurnitureItem({ tileName, tx, ty, w, h }) {
  const t = TILE_INDEX[tileName];
  if (!t) return null;
+  const tw = w || 1;
+  const th = h || 1;
+  const clipId = `clip-f-${tx}-${ty}-${tw}-${th}`;
  return (
    <g>
-      <clipPath id={`clip-f-${tx}-${ty}`}>
-        <rect x={px(tx)} y={py(ty)} width={px(1)} height={py(1)} />
+      <clipPath id={clipId}>
+        <rect x={px(tx)} y={py(ty)} width={px(tw)} height={px(th)} />
      </clipPath>
      <image
        href={TILESET_URL}
@ -68,7 +72,7 @@ function FurnitureItem({ tileName, tx, ty }) {
        width={TILESET_W * SCALE}
        height={TILESET_H * SCALE}
        style={{ imageRendering: 'pixelated' }}
-        clipPath={`url(#clip-f-${tx}-${ty})`}
+        clipPath={`url(#${clipId})`}
      />
    </g>
  );
@ -243,7 +247,7 @@ export default function FarmCanvas() {

              {/* Furniture from tile set */}
              {tileStyle.furniture.map((f, fi) => (
-                <FurnitureItem key={`furn-${fi}`} tileName={f.tile} tx={room.x + f.tx} ty={room.y + f.ty} />
+                <FurnitureItem key={`furn-${fi}`} tileName={f.tile} tx={room.x + f.tx} ty={room.y + f.ty} w={f.w} h={f.h} />
              ))}

              {/* Doorways */}
@ -312,7 +316,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,
--- a/src/frontend/src/agentSprites.js
+++ 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`;
+}
--- a/src/frontend/src/tileLoader.js
+++ b/src/frontend/src/tileLoader.js
@ -38,68 +38,154 @@ export const TILE_INDEX = {
 };

 // Per-room tile style assignments
-// furniture: array of { tile: TILE_INDEX key, tx: room-relative x, ty: room-relative y }
+// furniture: array of { tile: TILE_INDEX key, tx: room-relative x, ty: room-relative y, w?: width in tiles, h?: height in tiles }
+// Room dimensions (from officeMap.js): briefing 7x5, commons 7x5, warroom 7x5, engineering 7x5, quiet 7x5, ops 7x5
+// All rooms are 7 wide x 5 tall in tile coordinates
+
 export const ROOM_TILE_STYLES = {
  briefing: {
    floor: 'floor_light_wood',
    wall: 'wall_inner',
+    // Conference room layout: central table, chairs around it, AV setup at front
    furniture: [
-      { tile: 'conf_table', tx: 2.5, ty: 2 },
-      { tile: 'chair_down', tx: 1.5, ty: 2.5 },
-      { tile: 'chair_up',   tx: 5.7, ty: 2.5 },
+      // Central conference table (spans 3 tiles wide)
+      { tile: 'conf_table', tx: 2, ty: 1.5, w: 3, h: 1 },
+      { tile: 'conf_table', tx: 2, ty: 2.5, w: 3, h: 1 },
+      // Chairs around the table
+      { tile: 'chair_down', tx: 1.5, ty: 1.5 },  // left side
+      { tile: 'chair_up',   tx: 1.5, ty: 2.5 },
+      { tile: 'chair_down', tx: 5.5, ty: 1.5 },  // right side
+      { tile: 'chair_up',   tx: 5.5, ty: 2.5 },
+      // Monitor/screen at front
+      { tile: 'monitor',    tx: 3.5, ty: 0.5 },
+      // Plants for ambiance
      { tile: 'plant',      tx: 0.5, ty: 0.5 },
+      { tile: 'plant',      tx: 6.5, ty: 0.5 },
+      // Whiteboard
+      { tile: 'whiteboard', tx: 6.5, ty: 3.5 },
    ],
  },
  commons: {
    floor: 'floor_modern',
    wall: 'wall_inner',
+    // Lounge layout: seating area, coffee station, bulletin board
    furniture: [
+      // Sofa cluster (two facing sofas)
      { tile: 'sofa',        tx: 1,   ty: 1.5 },
-      { tile: 'sofa',         tx: 1,   ty: 2.5 },
-      { tile: 'desk',         tx: 4,   ty: 2.5 },
-      { tile: 'plant',        tx: 0.5, ty: 0.5 },
-      { tile: 'whiteboard',   tx: 5,   ty: 0.5 },
+      { tile: 'sofa',        tx: 2.5, ty: 1.5 },
+      // Coffee table between sofas
+      { tile: 'conf_table',  tx: 1.5, ty: 2.5, w: 2, h: 1 },
+      // Standing desk / counter area
+      { tile: 'desk',        tx: 5,   ty: 1.5, w: 2, h: 1 },
+      { tile: 'desk',        tx: 5,   ty: 2.5, w: 2, h: 1 },
+      // Decoration
+      { tile: 'plant',       tx: 0.5, ty: 3.5 },
+      { tile: 'whiteboard',  tx: 6.5, ty: 0.5 },
+      // Reading nook
+      { tile: 'bookshelf',   tx: 6.5, ty: 3.5 },
    ],
  },
  warroom: {
    floor: 'floor_dark_wood',
    wall: 'wall_inner',
+    // Command center: large central table, wall screens, command chairs
    furniture: [
-      { tile: 'conf_table',   tx: 2.5, ty: 2 },
-      { tile: 'chair_down',   tx: 1.5, ty: 3 },
-      { tile: 'chair_up',     tx: 5.5, ty: 3 },
-      { tile: 'monitor',      tx: 0.5, ty: 1.5 },
+      // Central war table (large, spans 4 tiles)
+      { tile: 'conf_table',  tx: 1.5, ty: 1.5, w: 4, h: 1 },
+      { tile: 'conf_table',  tx: 1.5, ty: 2.5, w: 4, h: 1 },
+      // Command chairs
+      { tile: 'chair_down',  tx: 1,   ty: 1.5 },
+      { tile: 'chair_down',  tx: 5.5, ty: 1.5 },
+      { tile: 'chair_up',    tx: 1,   ty: 2.5 },
+      { tile: 'chair_up',    tx: 5.5, ty: 2.5 },
+      // Wall-mounted monitors
+      { tile: 'monitor',     tx: 0.5, ty: 0.5 },
+      { tile: 'monitor',     tx: 3.5, ty: 0.5 },
+      { tile: 'monitor',     tx: 6.5, ty: 0.5 },
+      // Equipment rack
+      { tile: 'cabinet',     tx: 6.5, ty: 3.5 },
    ],
  },
  engineering: {
    floor: 'floor_tile',
    wall: 'wall_inner',
+    // Dev workspace: rows of desks with monitors, gear, books
    furniture: [
-      { tile: 'computer_desk', tx: 2.5, ty: 2.5 },
-      { tile: 'monitor',       tx: 3.5, ty: 2 },
-      { tile: 'chair_down',    tx: 3,   ty: 3.5 },
+      // Workstation row 1
+      { tile: 'computer_desk', tx: 1.5, ty: 1.5 },
+      { tile: 'computer_desk', tx: 3.5, ty: 1.5 },
+      { tile: 'computer_desk', tx: 5.5, ty: 1.5 },
+      // Monitors above desks
+      { tile: 'monitor',      tx: 1.5, ty: 0.5 },
+      { tile: 'monitor',      tx: 3.5, ty: 0.5 },
+      { tile: 'monitor',      tx: 5.5, ty: 0.5 },
+      // Workstation row 2
+      { tile: 'computer_desk', tx: 1.5, ty: 3 },
+      { tile: 'computer_desk', tx: 3.5, ty: 3 },
+      { tile: 'computer_desk', tx: 5.5, ty: 3 },
+      // Chairs
+      { tile: 'chair_down',   tx: 2,   ty: 2.5 },
+      { tile: 'chair_down',   tx: 4,   ty: 2.5 },
+      { tile: 'chair_down',   tx: 6,   ty: 2.5 },
+      { tile: 'chair_up',     tx: 2,   ty: 3.5 },
+      { tile: 'chair_up',     tx: 4,   ty: 3.5 },
+      { tile: 'chair_up',     tx: 6,   ty: 3.5 },
+      // Reference books and gear
      { tile: 'bookshelf',    tx: 0.5, ty: 0.5 },
+      { tile: 'bookshelf',    tx: 0.5, ty: 3.5 },
+      { tile: 'plant',        tx: 6.5, ty: 4.5 },
    ],
  },
  quiet: {
    floor: 'floor_rug',
    wall: 'wall_inner',
+    // Reading/relaxation zone: comfortable seating, books, soft lighting
    furniture: [
-      { tile: 'sofa',          tx: 2.5, ty: 2.5 },
+      // Central sofa / reading area
+      { tile: 'sofa',         tx: 2.5, ty: 1.5, w: 2, h: 1 },
+      // Side table / reading desk
+      { tile: 'desk',         tx: 2,   ty: 2.5 },
+      { tile: 'chair_up',     tx: 2,   ty: 3.5 },
+      // Bookshelves lining walls
      { tile: 'bookshelf',    tx: 0.5, ty: 0.5 },
-      { tile: 'plant',         tx: 5,   ty: 0.5 },
+      { tile: 'bookshelf',    tx: 6.5, ty: 0.5 },
+      { tile: 'bookshelf',    tx: 0.5, ty: 2.5 },
+      { tile: 'bookshelf',    tx: 6.5, ty: 2.5 },
+      // Plants and ambiance
+      { tile: 'plant',        tx: 4.5, ty: 0.5 },
+      { tile: 'plant',        tx: 0.5, ty: 4.5 },
    ],
  },
  ops: {
    floor: 'floor_tile',
    wall: 'wall_inner',
+    // Operations center: multi-console setup with central visibility
    furniture: [
-      { tile: 'desk',          tx: 2,   ty: 2 },
-      { tile: 'desk',          tx: 2,   ty: 3 },
-      { tile: 'desk',          tx: 4,   ty: 2 },
-      { tile: 'desk',          tx: 4,   ty: 3 },
-      { tile: 'monitor',       tx: 2.5, ty: 1.5 },
-      { tile: 'chair_down',    tx: 3,   ty: 2.5 },
+      // Main ops desk row
+      { tile: 'desk',         tx: 1,   ty: 1 },
+      { tile: 'desk',         tx: 1,   ty: 2 },
+      { tile: 'desk',         tx: 1,   ty: 3 },
+      // Secondary ops row
+      { tile: 'desk',         tx: 3,   ty: 2 },
+      { tile: 'desk',         tx: 3,   ty: 3 },
+      // Monitoring station
+      { tile: 'computer_desk', tx: 5,  ty: 2 },
+      { tile: 'computer_desk', tx: 5,  ty: 3 },
+      // Wall monitors
+      { tile: 'monitor',      tx: 0.5, ty: 0.5 },
+      { tile: 'monitor',      tx: 3,   ty: 0.5 },
+      { tile: 'monitor',      tx: 5.5, ty: 0.5 },
+      // Chairs at consoles
+      { tile: 'chair_down',   tx: 2,   ty: 1.5 },
+      { tile: 'chair_down',   tx: 2,   ty: 2.5 },
+      { tile: 'chair_down',   tx: 2,   ty: 3.5 },
+      { tile: 'chair_down',   tx: 4,   ty: 2.5 },
+      { tile: 'chair_down',   tx: 4,   ty: 3.5 },
+      { tile: 'chair_up',     tx: 6,   ty: 2.5 },
+      { tile: 'chair_up',     tx: 6,   ty: 3.5 },
+      // Infrastructure
+      { tile: 'cabinet',      tx: 6.5, ty: 0.5 },
+      { tile: 'cabinet',      tx: 6.5, ty: 1.5 },
    ],
  },
 };
Author	SHA1	Message	Date
Scott Scoble	f632f816a4	fix(spatial-office#12): show agent name labels only on hover Per design-critique-1 Issue 3 (P1), agent name labels were always visible and stacked into unreadable text when agents were near each other. Now matches Stardew Valley convention: name shows on hover only. Single conditional change. The hover tooltip (Html overlay with status + current task) is unchanged.	2026-06-01 21:49:59 -07:00
Engineering (agent-engineering)	62f9afc011	feat(frontend): detailed furniture layouts for all 6 rooms	2026-05-20 09:37:21 -07:00
Engineering (agent-engineering)	e460c758fd	feat(frontend): replace agent blob sprites with LimeZu character tiles	2026-05-20 09:33:38 -07:00