// Isometric mini-diorama rooms. Viewbox 300x200.
// Uses volumetric Box3D helpers so furniture reads as real volume.
function RoomFrame({ children, tint = "#4FD8FF", floorTint = "#1a3550", wallTint = "#152a44", accent2 = "#7AE0FF" }) {
const id = React.useMemo(() => "rf" + Math.random().toString(36).slice(2, 7), []);
return (
);
}
function SharedDefs() {
return (
);
}
// ============================================================
// VOLUMETRIC HELPERS
// ============================================================
// Box3D — true isometric box with top, front, and right-side faces.
// (cx, baseY) is center of the front-bottom edge; depth pushes back-up.
function Box3D({ cx, baseY, w, h, depth = 10, color = "#4FD8FF", dark = "#0a1628", top, children }) {
const x0 = cx - w / 2;
const x1 = cx + w / 2;
const y0 = baseY; // front-bottom
const y1 = baseY - h; // front-top
const dx = depth * 0.9;
const dy = depth * 0.45;
const tx0 = x0 + dx, tx1 = x1 + dx, ty = y1 - dy;
// ground shadow
return (
{/* right face */}
{/* front face */}
{/* top face */}
{/* front top highlight */}
{/* right edge highlight */}
{children && {children({ w, h })}}
);
}
// Pillar — vertical column with subtle front highlight.
function Pillar({ x, top, bottom, w = 4, color = "#4FD8FF", dark = "#0a1628" }) {
return (
);
}
// WallPanel — recessed paneling with rim light, lives flat on back wall.
function WallPanel({ x, y, w, h, color = "#4FD8FF", children }) {
return (
{children}
);
}
// Screen — premium bezel with inner glass gradient.
function Screen({ x, y, w, h, color = "#4FD8FF", children }) {
const id = React.useMemo(() => "sc" + Math.random().toString(36).slice(2, 7), []);
return (
{children}
);
}
// Plant — small potted plant used as set-dressing.
function Plant({ x, y, color = "#52b788", potColor = "#1a2a3a", ring = "#4FD8FF" }) {
return (
);
}
// Trim — baseboard strip on back wall.
function Baseboard({ color = "#4FD8FF", opacity = 0.4 }) {
return (
);
}
// ------------------------------------------------------------
// EMPTY ROOM LABEL — shown in any room when no agents are assigned.
// Same visual across all rooms, tinted by the caller's palette.
// ------------------------------------------------------------
function EmptyRoomLabel({ tint, label = "ESPERANDO ASIGNACIÓN" }) {
const w = Math.max(100, label.length * 3.3 + 22);
return (
{label}
);
}
// ============ GENERIC ROOM (user-created) ============
// Clean but premium shell for rooms created dynamically by the operator.
// Uses the RoomFrame base + a minimal prop set in the back wall + an empty
// state label when no agents are assigned. Colour comes from the caller's
// tint so each generic room keeps its identity.
function GenericRoom({ agents, tint, title }) {
const T = tint || "#7EE8FF";
const A = "#BEF2FF";
return (
{/* Back wall: 3 subtle screens */}
{/* Floor accent — subtle platform */}
{/* Side desks (volumetric) */}
{/* Plants in corners */}
{(agents || []).map((a, i) => {
const positions = [{x: 104, y: 160}, {x: 196, y: 160}, {x: 150, y: 180}];
const pos = positions[i % 3];
return (
);
})}
{(!agents || agents.length === 0) && }
);
}
// ============ ROOM 1: JARVIS OFFICE ============
function JarvisOffice({ agents }) {
const T = "#4FD8FF", A = "#7AE0FF";
return (
{/* ceiling lights — recessed */}
{/* giant subtle "JARVIS" on back wall */}
JARVIS
{/* back wall — triptych in paneled frame */}
NET · 99.8%
MAINFRAME · JARVIS
CORE ACTIVE
OPS · 24h
{[10,18,14,22,12,24,16].map((v, i) => (
))}
{/* server rack pillars behind desk */}
{[0,1,2,3,4,5].map(i => (
))}
{[0,1,2,3,4,5].map(i => (
))}
{/* curved command desk — with volume */}
{/* desk front lip */}
{/* console slabs on desk — volumetric */}
{/* center desk keyboard slab */}
{[0,1,2,3,4,5,6,7].map(i => (
))}
{/* ======= central holo platform — layered ======= */}
{/* base ring with volume */}
{/* arc light segments */}
{/* holo beam */}
{/* rotating orbit hint */}
{/* foreground corner consoles */}
{(agents || []).map((a, i) => {
// index 0 sits on the central platform — a solo agent (JARVIS) reads as the protagonist
const positions = [{x: 150, y: 172}, {x: 88, y: 156}, {x: 212, y: 156}];
const pos = positions[i % 3];
return (
);
})}
{(!agents || agents.length === 0) && }
);
}
// ============ ROOM 2: STRATEGY ROOM ============
function StrategyRoom({ agents }) {
const T = "#4FE0A8", A = "#7EF0C4";
return (
{/* hanging pendant lights */}
{/* wall section: briefing + center tactical map + KPI */}
OKR · Q2
{["Growth","Product","Ops","Comms"].map((l, i) => (
{l}
{[73,60,87,47][i]}%
))}
{/* center map panel with frame */}
STRATEGY MAP · Q2
3 ACTIVE FRONTS
TARGET · Q2
LOCKED · 92%
{/* side benches (volumetric) */}
{/* ======= tactical holo table — true volume ======= */}
{/* shadow + trapezoidal base */}
{/* table top slab */}
{/* hologram surface */}
{/* pulsing target markers */}
{/* table under-glow */}
{(agents || []).map((a, i) => {
const positions = [{x: 88, y: 178}, {x: 212, y: 178}, {x: 150, y: 190}, {x: 60, y: 188}];
const pos = positions[i % 4];
return (
);
})}
{(!agents || agents.length === 0) && }
);
}
// ============ ROOM 3: RESEARCH LAB ============
function ResearchLab({ agents }) {
const T = "#B78BFF", A = "#C8B0FF";
return (
{/* ceiling grid of panel lights */}
{/* ====== back wall — equipment bay ====== */}
{/* vertical rack on left */}
{[0,1,2,3,4,5].map(i => (
))}
{/* monitor cluster */}
GENOME
{[6,12,18,24,30].map(y => )}
MOLECULE · 3D
EKG · LIVE
{/* vertical rack on right */}
SCAN
{/* storage cabinets under right rack */}
{/* ====== lab benches — volumetric ====== */}
{/* bench top accessories */}
{/* beaker cluster */}
{/* centrifuge */}
{/* right bench: microscope + workstation */}
{/* monitor + keyboard */}
{/* center analysis pedestal with holo sample */}
{/* floating dna */}
{[-10,-4,2,8].map(y => )}
{[-10,-4,2,8].map(y => )}
{(agents || []).map((a, i) => {
const positions = [{x: 70, y: 158}, {x: 150, y: 184}, {x: 228, y: 158}];
const pos = positions[i % 3];
return (
);
})}
{(!agents || agents.length === 0) && }
);
}
// ============ ROOM 4: CONTENT STUDIO ============
function ContentStudio({ agents }) {
const T = "#4FE08A", A = "#7EF0A8";
return (
{/* track lighting */}
{/* ===== cyclorama (green screen) with proper curve + frame ===== */}
{/* floor part of cyc (curved into floor) */}
{/* cyc seam highlight */}
{/* C-stand flags on edges */}
{/* LIVE badge */}
LIVE
{/* monitor rack on left */}
MULTIVIEW · 4-UP
{/* mixing desk — volumetric slant */}
{/* faders */}
{[0,1,2,3,4,5,6,7,8].map(i => (
))}
{/* chair for mixing desk */}
{/* camera on tripod */}
{/* monitor arm */}
{/* tripod */}
{/* tripod feet */}
{/* key light (softbox) on stand */}
{/* barn doors */}
{/* light beam onto cyc */}
{/* boom microphone hanging */}
{/* foreground: director monitor & clapboard */}
{/* clapboard */}
{/* (removed stray red floor marks that read as an artifact) */}
{(agents || []).map((a, i) => {
const positions = [{x: 110, y: 168}, {x: 155, y: 178}, {x: 200, y: 172}];
const pos = positions[i % 3];
return (
);
})}
{(!agents || agents.length === 0) && }
);
}
// ============ ROOM 5: AUTOMATION BAY ============
function AutomationBay({ agents }) {
const T = "#FFA55C", A = "#FFD170";
return (
{/* overhead industrial rail */}
{[60, 110, 160, 210, 260].map(x => (
))}
{/* hanging hazard stripes */}
{[0,1,2,3,4,5,6,7].map(i => (
))}
{/* ======= back wall control panel ======= */}
STATUS
OK
!
X
GAUGES
PSI · 72
{/* emergency panel center */}
SAFETY
STOP
RUN
HOLD
4
{/* right-side telemetry */}
THROUGHPUT · 24H
{[10,18,14,22,12,24,16,20,14,22,12,26].map((v, i) => (
))}
GOAL
{/* ======= conveyor — volumetric ======= */}
{/* shadow */}
{/* side of conveyor */}
{/* top */}
{/* belt segments */}
{[0,1,2,3,4,5,6,7,8,9,10,11,12].map(i => (
))}
{/* rollers */}
{/* support legs */}
{/* crates on belt — volumetric */}
A-21
02
{/* ======= robotic arms — articulated ======= */}
{/* base plate */}
{/* upper arm */}
{/* forearm */}
{/* gripper */}
{/* status light */}
{/* stacked crates foreground */}
03
02
{(agents || []).map((a, i) => {
const positions = [{x: 135, y: 178}, {x: 180, y: 184}, {x: 70, y: 182}];
const pos = positions[i % 3];
return (
);
})}
{(!agents || agents.length === 0) && }
);
}
// ============ ROOM 6: ANALYTICS ============
function AnalyticsRoom({ agents }) {
const T = "#C17AFF", A = "#E0B8FF";
return (
{/* ceiling panel */}
{/* ===== big back wall dashboard ===== */}
{/* header row */}
LIVE · REALTIME · UTC 08:42:16
REC
▲
⚙
{/* chart grid — 4 panels */}
{/* panel 1: line + area */}
ENGAGEMENT
+12.4%
{/* panel 2: stacked bars */}
{[16, 10, 20, 6, 14, 22, 18].map((v, i) => (
))}
SESSIONS · 7D
{/* panel 3: donut with legend */}
68%
Retain
Churn
New
RETENTION
{/* panel 4: KPI + sparkline */}
128K
▲ 12.4%
EVENTS · 24H
{/* ===== workstations — volumetric desks ===== */}
{/* left desk */}
{/* right desk */}
{/* left monitor pair */}
{/* left keyboard + mouse on desk */}
{/* left desk accessories */}
{/* coffee cup */}
{/* right monitor pair */}
{/* chairs */}
{/* central data pedestal — holo sphere */}
{(agents || []).map((a, i) => {
const positions = [{x: 64, y: 158}, {x: 150, y: 182}, {x: 236, y: 158}];
const pos = positions[i % 3];
return (
);
})}
{(!agents || agents.length === 0) && }
);
}
Object.assign(window, {
SharedDefs, JarvisOffice, StrategyRoom, ResearchLab,
ContentStudio, AutomationBay, AnalyticsRoom, GenericRoom
});