Skip to content

[email protected]

200OK

Live operations floor for an algorithmic trading desk

A 3D office, an agent city and an eight-screen wall that let people watch an AI trading backend's agents work, live.

Kind
Realtime visualisation for a trading desk
Our part
Front end and screens by 404 Tech; the backend and its protocol belong to the vendor.

404 Not Found

What was missing

A third-party trading backend runs a team of software agents: research, strategy, risk, execution. They work around the clock, and nobody can see them. Investors and visitors had a log of events and nothing to watch. What was missing was a place: an office, a city and a wall of screens where each agent's work shows up as it happens, driven by the backend's own feed and honest about what is real.

Constraints

What the system had to hold to, before a line was written.

Feed
One vendor WebSocket carries every topic. Its protocol changed many times during the build, always additively.
Hardware
Unattended hardware: a 4K touch wall in kiosk mode and eight TVs, each driven by its own Mac mini. Every screen recovers from lost graphics, a blank canvas or a feed outage without a person.
Honesty
Engine results in percent only, never dollars. Decorative motion never carries invented messages or numbers. Demo pages say "simulated".
Display
PC layout first, and it must hold at fractional display scales of 1.25 and 1.5.
Ownership
The vendor owns the backend and the protocol. No database and no authentication on our side.

The system

One global socket feeds the browser. A transport layer retries forever with capped, jittered backoff and re-subscribes on reconnect. A single shared feed fans topics out to pages, and heavy topics are subscribed only while a page that needs them is open. Stores keep a 10,000-event ring buffer and 24 hours of per-minute aggregates. Renderers sit on top: Pixi.js for the 2D office, three.js for the 3D office, the city, the tower and a shared stage for the screens. A kiosk controller runs the idle tour, reset and recovery. Nine read-only server relays cover what the socket does not carry. Each is cached, key allow-listed and GET-only. A demo mode replaces the socket with five authored timelines. Demo and live never mix.

Figure 1Drawn from the build
Browser applicationpushes framesframestopicsdemo modeeventsstatetourGET onlycachedlive mode onlystatic kits01Trading backendthird party02Global socketevery topic, one line03Transportretries, resubscribes04Demo adapterauthored timelines05Shared feedtopic fan-out06Stores10k ring, 24 h07Renderers2D office, 3D scenes08Kiosk controllertour, reset, recovery09Server relaysnine, read-only GET10Vendor historybehind the relays11Market datapublic candles123D assetsbuilt offline

Vendor socket → transport → shared feed → stores → renderers. The read-only relays and the demo adapter sit beside the live path, never inside it.

  • Built by us
  • Data held
  • Third party
  • Offline or out of band
Read the drawing as text

Parts

  1. 01Trading backend: third party
  2. 02Global socket: every topic, one line
  3. 03Transport: retries, resubscribes
  4. 04Demo adapter: authored timelines
  5. 05Shared feed: topic fan-out
  6. 06Stores: 10k ring, 24 h
  7. 07Renderers: 2D office, 3D scenes
  8. 08Kiosk controller: tour, reset, recovery
  9. 09Server relays: nine, read-only GET
  10. 10Vendor history: behind the relays
  11. 11Market data: public candles
  12. 123D assets: built offline

Flows

  • Trading backend to Global socket: pushes frames
  • Global socket to Transport: frames
  • Transport to Shared feed: topics
  • Demo adapter to Shared feed: demo mode (alternate or out of band)
  • Shared feed to Stores: events
  • Stores to Renderers: state
  • Kiosk controller to Renderers: tour
  • Stores to Server relays: GET only
  • Server relays to Vendor history: cached
  • Shared feed to Market data: live mode only
  • 3D assets to Renderers: static kits (alternate or out of band)

The screen

Most of this system sits behind a login, so its key screen is redrawn here as a schematic. Bars stand in for every name and figure.

The office floor as a schematic: desks, agents, the lift and the council table, with the screen wall above.Schematic, no real data

Decisions

The engineering calls that shaped the build, and why each one was made.

  1. One socket, subscribed on demand.

    The vendor exposes a single global socket. Heavy topics are subscribed only while a page needs them, so idle screens do not pay for traffic they never show.

  2. A failed relay never returns an empty list.

    It returns an error, or the last good answer marked stale. An empty list on a live screen reads as "nothing happened", which would be a false claim.

  3. Honesty lives in code.

    Engine money is converted to percent in one module, and vendor text carrying a dollar figure is withheld whole. Decorative figures are never counted as agents.

  4. Every visual gate must fail its own control.

    Layout gates check for overlapping panels and escaping text at five desktop sizes, including 1280×720 at 1.5 scale. A gate whose control stays green has declared itself blind.

  5. A render budget for every view.

    Draw calls, triangles and shader programs are capped per view. Resolution steps down below 45 fps and back up above 56 fps.

200OK

Shipped

A browser application with a 2D office, a 3D office, an agent city, a tower and a hall, plus an eight-page screen wall built page by page for its TVs. It runs unattended: an idle tour after 90 seconds, a full reset after 120, and an outage screen when the feed drops. The interface reads in English and Chinese.

Counts of the build, taken from its code. Counted on 3 November 2026. No figure here is a business result.
FigureWhat it counts
40page files in the application
9read-only server relays, and zero write endpoints
31automated gate scripts, each run against a control
~516test spec files
36Blender-built 3D assets shipped

Built with

  • Nuxt 4
  • Vue 3
  • TypeScript
  • Pinia
  • three.js
  • Pixi.js
  • MapLibre GL
  • onnxruntime-web
  • Nitro
  • Vitest
  • Playwright
  • Blender