THE PIXEL OFFICE

ApogeeAI Offices is a public pixel-art isometric office that visualizes how a fleet of autonomous AI agents works. There are 11 agents at desks, a scrolling LED marquee of shipped tasks, an economics dashboard, and a click-to-inspect panel for every character.

The meta-hook is this: the agents built the window they are shown through. The fleet designed the product, wrote the 12,800 lines of TypeScript and 1,934 lines of CSS, and stood up the public HTTPS deploy. The interface is itself a piece of the fleet's work.

Go look: agents.apogeeai.co. The public site is a live demo with simulated agents and sample tasks.

The visualization was designed to be driven by receipts rather than hand-placed animation. Here is the data architecture it is built on (the public site runs it against simulated agents and sample tasks):

Receipts, not sensors. Every task the fleet ships writes a structured receipt — title, timestamp, agent role, completion status. No receipt, no credit. This is the fleet's ground truth.

A scheduled snapshot. On a schedule, a backend job parses a rolling window of receipts and writes a small JSON snapshot — one entry per agent, with a current task, a shipped-today count (derived from a rolling 24h window — more on that fix below), and a status derived from receipt freshness. The job writes locally, then publishes only the snapshot.

A simple frontend poll. The browser periodically polls the snapshot endpoint and re-renders the office state. No WebSockets, no streaming — deterministic, cacheable, debuggable.

The ticker is the receipts. The scrolling LED marquee at the bottom of the screen is fed from the same receipt format as the agent panels, so the marquee and the desks can never disagree.

Each agent character shows a current task — not a status tag or a label, but a task title from the receipt feed. If an agent has been idle, the panel says so.

Dual theme: Professional ⟷ Cyberpunk. A single localStorage-persisted toggle switches between a clean corporate isometric office (safe to show a boss) and a neon cyberpunk room with LED matrix scanlines, DotGothic16 terminals, and VT323 readouts. Same data under both. No different data pipeline, no different logic — same receipt feed, different paint.

Day / night cycle from actual solar position. The scene tints across six phases — dawn, morning, noon, afternoon, dusk, night — derived from a real solar-position approximation (declination + hour angle). This is not a 24-hour clock timer. The light matches where the sun actually is.

Rolling 24h bug fix — told honestly. Early builds reset "shipped today" at calendar midnight. That was wrong: an agent that shipped 20 things between 11pm and 1am would look idle by 1:01am. The fix: a rolling 24-hour window keyed to "receipts in the last 86,400 seconds", not "receipts since midnight." The bug and fix are both on record.

Click-to-inspect panels via React Portals. Clicking any agent opens an inspect panel: role, status, current task, recent shipped items. The panels are built with React Portals so they layer on top of the full scene without any surgery on the main stage component. Portal mount point is a dedicated DOM node outside the scene tree.

Ambient wander. Idle agents drift ±3% around their desks every 22 seconds. Enough movement to feel inhabited. No pathfinding, no collision resolution, no behavioral AI — just a CSS transform oscillating on a timer. The point is ambient life, not a simulation.

Mobile scaling: one formula, no breakpoints. The office stage is a fixed 1056×682 canvas. On smaller viewports, a single CSS transform scales it by min(vw/1056, vh/682) × 0.97. Verified down to a 390px viewport (headless). No media queries, no separate mobile layout — one coordinate system, one scale factor.

DOM, not WebGL — a deliberate choice. The whole scene runs on DOM elements with CSS transforms over painted backgrounds. No WebGL, no canvas engine, no WASM. The tradeoff is explicit: DOM limits particle counts and shader effects; it makes the inspector tools (click, right-click, DOM diff) work exactly as expected, loads on every browser without a GPU handshake, and lets the portal system compose cleanly. The right tool for a data-driven office visualization with click targets is not a game engine.

GPU-generated room art. The pixel backgrounds were generated by the fleet's own local GPU image pipeline (img2img on local GPU hardware), then compressed PNG→WebP at quality 82. Result: 820–1,140 KB per room as PNG → 50–95 KB per room as WebP. The art budget for the whole office fits in a fast mobile connection's first second.

Build timeline. Initial build and public HTTPS deploy: one overnight session, June 28. v2 — click-to-inspect panels, ticker, receipt-driven data feed — shipped the next day after a research pass across 12 open-source "agent town" projects. Promoted to root June 29. Data layer finalized July 2. Full cycle: 5 days, two agents in relay. The floor plan (11 rooms, 18 desk spots, 36 pixel sprites, 8 components) was fully designed and built by the fleet itself.

The public viewer is read-only by construction — not by access control, but by architecture.

The public site is a demo with simulated agents; the design keeps any real fleet data private by default. A private backend builds the snapshot and publishes a single small file outbound — the only data designed to cross the boundary. The public host serves static files and that snapshot. It has no access to any receipt store, no connection to an agent runtime, no ability to issue commands. Its surface is: serve a file, refuse a POST.

What the public host serves:

• Static build artifacts (HTML, JS, CSS, WebP)
• A small JSON snapshot at a fixed GET endpoint

What it refuses: POST requests, control endpoints, anything that could modify state. The public host does not know what any agent is doing. It knows only the snapshot it was handed.

The separation is not a single rule that could be misconfigured. It is a topology: one data direction, one file.

The app surfaces a value/compute/ROI dashboard alongside the office. This section exists to say precisely what that dashboard is and is not.

What the design guarantees: ship counts are derived from receipts without modification — the receipt feed is the ground truth for everything the app displays. On the public demo, that feed is simulated.

What is illustrative: the dollar conversion. The value-per-shipped-item and cost-per-item figures are configured constants, not wired to live accounting or token metering. The ROI multiple the dashboard displays is arithmetic on those constants — it is a useful mental model for the economics of agent leverage, clearly labeled as such in the UI.

The constitution this fleet operates under requires this distinction be stated plainly: the ship counts come from receipts; the dollar conversion is honest theater, labeled as such. Do not cite the ROI figure as a measured business outcome. It is not. It is a configured estimate that helps communicate the model — which is itself worth communicating.

ApogeeAI Offices runs as a live demo with simulated agents at agents.apogeeai.co. The numbers, measured:

• 12,800 lines of TypeScript/React + 1,934 lines of CSS
• 8 components · 11 rooms · 18 desk spots · 11 agents in the cast · 36 pixel sprites
• Room art: 820–1,140 KB PNG → 50–95 KB WebP per room (q82)
• 5-day build cycle, two agents in relay, deployed in one overnight session
• Mobile: verified to 390px viewport via headless scaling

The demo cast spans archetypal roles — builders, planners, researchers, reviewers, and a factory swarm. Each has a desk, a current task display, and an inspect panel. The site has no analytics by design — visitor count is unmeasured and the studio prefers it that way.

For the fleet's governance framework — the rules that determine what these agents may do unattended and how their work is verified — see The Agent Platform →

UNMEASURED (labeled as such):

• Visitor count — no analytics by choice
• Uptime SLA — not tracked
• Real per-agent token cost — the economics HUD uses configured constants, not wired metering
• Real-device mobile testing — headless-verified only (390px via Chromium screenshot)