Epic 4 -- Pixel Office UI

The Magic Tower

A living vertical spire where AI agents work as fantasy characters

A pixel-art desktop application built in Godot 4 where each floor is a project, each agent is a fantasy character class, and the tower breathes with real orchestration data. Emerald at the roots, indigo at the summit.

scroll to explore

Tower Architecture

Vertical spire with hexagonal floors that morph under load

ephemeral -- ad-hoc sprint

permanent -- orchestrator

permanent -- gateway

permanent -- terminal substrate

permanent -- supervisor (base)

ground

Permanent floors hold their configured position. Always visible, even when idle (candles dimmed, agents sleeping). Configured via YAML.

Ephemeral floors materialize when the orchestrator registers agents for an unconfigured project. Build animation: bricks assembling + magical shimmer. Dissolve after 60s of inactivity.

Side cross-section shows one edge of each floor at a time. The wall is "cut away" like a dollhouse to reveal interiors. Rotate with Q/E to see other edges.

Edge width scales with polygon size. A dodecagon edge is visually wider than a hexagon edge. Busy floors literally take up more horizontal space.

Floor height is fixed (48px internal). The tower grows vertically (new floors) and horizontally (polygon expansion).

Polygon Morphing

Floors start as hexagons and expand as composite load increases. Vertices lerp outward over ~0.5s. The floor visibly breathes.

composite_load =

0.4 x agents + 0.3 x throughput + 0.3 x cost

each normalized to 0.0 -- 1.0

Hexagon

load 0.0 -- 0.2

⟶

Octagon

load 0.4 -- 0.6

⟶

Dodecagon

load 0.8 -- 1.0

Character Classes

Seven fantasy archetypes mapped to AI agent roles

The orchestrator assigns each agent a role (what it does) and a provider (which model). The UI maps roles to character classes with distinct sprites, animations, and workstations.

⚗

Alchemist

Code Generation

Goggles, apron, bubbling flask. Stirs the cauldron when working, holds up a glowing potion when reporting.

Cauldron + ingredient shelves

✎

Scribe

Code Review

Quill, magnifying glass, ink-stained fingers. Writes furiously during review, presents an annotated scroll on completion.

Lectern + scroll rack

✪

Archmage

Architecture / Planning

Tall hat, ornate staff, flowing robes. Gestures at star charts when designing, summons a constellation diagram when reporting.

Star chart table + crystal orb

☤

Wardkeeper

Testing / QA

Shield emblem, rune-etched armour. Maintains warding circles, runes glow green on pass, shatter red on failure.

Warding circle + test runes

📖

Librarian

Research / Context

Spectacles, floating tome, book stack. Pages turn themselves while researching. Presents a compiled codex when done.

Towering bookshelf + reading desk

❖

Enchanter

Orchestration / Router

Glowing hands, thread and web motifs. Weaves visible connection threads between agents. The orchestrator made visible.

Enchanting table + connected threads

★

Apprentice

General Worker

Simple robe, satchel, eager posture. The default class for unspecialized agents. Earnest and adaptable.

Basic desk + candle

Animation States

IDLE	Breathing animation at workstation. Occasional fidgets: stretch, flip page, look around.
ASSIGNED	Walks to workstation. Brief "sit down" or "prepare" transition.
WORKING	Class-specific activity loop. Floating runes appear above.
REPORTING	Holds up result. Brief "ta-da" pose before returning to idle.
CRASHED	Stars/swirls above head. Cauldron overflows, scroll catches fire, ward shatters.

Sprite Sheet Strategy

Size: 16x16 or 24x24 per frame at 320x180 internal resolution.

Frames per class: idle (4f), walking (6f), working (6f), reporting (4f), stunned (4f) = ~24 frames.

Palette swap shader produces tier and provider variants at runtime. One texture per class, swapped via LUT. Zero duplicate art.

Phase 1: Placeholder sprites (coloured rectangles with class icons). Polished pixel art is a parallel workstream.

Tier System

Two visual axes: Power Level x Provider Affinity

The character class sets the silhouette. Power level drives intensity of effects. Provider affinity drives colour and element theme. They combine freely -- any class, any power, any provider.

Power Levels

Level	Palette	Outline	Particles	Workstation	Models
1 -- Novice	Muted, desaturated none	None	None	Basic wooden desk	Haiku, Flash, local small
2 -- Adept	Saturated base 1px subtle	1px glow	None	Polished + candle	Sonnet, Pro, GPT-4o-mini
3 -- Master	Rich + metallic 2px pulsing	2px pulsing	Sparse sparkles	Enchanted + floating candles	Opus, Ultra, GPT-4o
4 -- Grandmaster	Gold/silver threads 3px animated	3px animated	Orbiting motes	Arcane altar + rune circle	Future frontier models
5 -- Legendary	Chromatic / iridescent full halo	Full aura	Trail + distortion	Throne + celestial orrery	Reserved -- headroom

How They Combine

Power level is a float (0.0--1.0) in config. The shader reads it directly for smooth glow intensity. Only particle systems and prop swaps are discrete breakpoints.

Novice + Arcane Haiku Alchemist

Muted amber robes, no glow, basic desk. Clean and humble. The workhorse.

Master + Arcane Opus Archmage

Rich amber with gold threads, pulsing glow, rune circle, orbiting glyphs. Unmistakably powerful.

Novice + Prismatic Flash Scribe

Pale blue robes, no glow, basic desk. Crystalline but subdued.

Master + Prismatic Ultra Scribe

Deep crystal blue with silver threads, refracting light shards. Geometric brilliance.

Sprite count stays at 7 (one per class). Everything else is shader + particle config. Adding a 6th provider or 6th power level needs zero new sprite art.

Output Layers

Three levels of detail -- floating runes, spell scrolls, raw terminal

All three layers share one data pipeline (SSE events into OutputBuffer) and just render it differently. Same agent, same data, three presentations.

Layer 1: Floating Runes (Ambient)

created main.go

go build ./...

PASS ok 0.42s

reviewing PR #42

2 issues found

          runes drift up and fade -- 3-5 lines max
        

Layer 2: Spell Scroll (Click Agent)

14:22 $ go build ./cmd/...

compiling orchestrator

linking binary

14:22 $ go test ./internal/...

ok internal/agent 0.42s

ok internal/dag 0.18s

ok internal/state 0.31s

14:23 $ created main.go

package main

import "fmt"

14:24 PASS all checks

          parchment panel -- sepia monospace -- quill writing animation
        

agent-03 (tmux)

~/project $ go build ./cmd/...

compiling orchestrator

linking binary

~/project $ go test ./internal/...

--- PASS: TestAgent (0.42s)

--- PASS: TestDAG (0.18s)

--- PASS: TestState (0.31s)

PASS

~/project $ cat main.go

package main

func main() {

fmt.Println("hello")

}

~/project $

Same data, three presentations -- runes (glance) / scroll (read) / terminal (debug)

Canopy Spire Colour Palette

Emerald at the roots, indigo at the summit, gold throughout

Tower Gradient (bottom to top)

#142a20

Grove

#1a2e30

Canopy

#162228

Teal

#1e1a35

Twilight

#2a2545

Arcane

#0c0c1a

Summit

Accents

#c8a84e

Gold Leaf

#d4a574

Amber

Provider Elemental Themes

Claude -- Arcane

#d4a574 -- warm amber

Gemini -- Prismatic

#88c8f7 -- cool crystal

OpenAI -- Infernal

#d06060 -- crimson

Ollama -- Forge

#f0a070 -- ember

DeepSeek -- Abyssal

#a088e0 -- violet

UI Surfaces

#ede0c4

Parchment

#2e2a18

Ink

#0a0e14

Terminal Dark

#111822

Terminal Header

Navigation

Four methods to move through the tower -- all toggleable

↕

Scroll / Keys

Smooth vertical pan with Camera2D easing. Clamps to tower bounds.

W S Scroll

↺

Edge Rotation

Rotate all floors to next/previous edge. Walls slide, interior swaps over ~0.3s.

Q E

▣

Minimap

Small vertical tower outline in corner. Floors coloured by activity. Click to jump.

☰

Floor Tabs

Vertical tab strip on left edge. Project name + agent count badge. Click or press number.

Tab 1-9

Panel System

Move, resize, dock, fullscreen -- layout persists across sessions

Capabilities

Resize	Drag edges/corners. Snaps to 25%/50%/75%/100% thresholds.
Fullscreen	Double-click title bar or press `F`. Tower dims behind.
Dock	Drag to viewport edge. Two docked panels stack vertically.
Persist	Saved to `user://layout.json`. Restored on launch.

Hotkeys

`F`	Toggle focused panel fullscreen
`Esc`	Exit fullscreen / close panel
`Ctrl+T`	Toggle scroll / terminal on active panel
`Ctrl+\`	Hide all panels (tower-only view)
`Ctrl+Shift+R`	Reset layout to default

orchestrator

gateway

supervisor

Alchemist-03 -- WORKING ✖

14:22 $ go build

compiling...

14:23 $ go test

PASS (0.42s)

14:24 $ go vet

all checks pass

tower viewport + docked spell scroll -- drag the handle to resize

Phasing

27 tasks across 4 phases -- from skeleton to sorcery

Phase 1 -- Skeleton Tower

Tower renders, floors work, agents move, output flows

T1Godot project scaffold (viewport, pixel-perfect, folder structure)

T2HTTP/SSE bridge -- Go side (REST + SSE alongside gRPC)

T3BridgeManager -- Godot side (HTTPClient + SSE parser + event dispatch)

T4Floor scene + tower layout (Polygon2D, TileMap, stack, spawn/despawn)

T5Agent character scene (placeholder sprites, 5 animation states)

T6Floating runes (filtered output, float+fade, provider colour)

T7Basic navigation (scroll/keys, Camera2D, Q/E rotation)

Phase 2 -- Interaction Layer

Panels, output detail, PTY, task submission, full nav

T8Panel framework (move, resize, dock, snap, fullscreen, persistence)

T9Spell scroll panel (parchment theme, output history, quill animation)

T10Raw terminal + PTY (godot-xterm on Linux/macOS, ANSI fallback on Windows)

T11Status overlay (agent nameplate on hover/click)

T12Full navigation (minimap + floor tabs)

T13Task submission UI ("commissioning a quest")

T14Agent interaction menu (right-click: reassign, cancel, view, open terminal)

Phase 3 -- Magic Polish

Polygon morphing, shaders, particles, sound, real art

T15Polygon morphing (composite load, vertex lerp, width scaling)

T16Palette swap shader (power_level float + provider_lut texture)

T17Tier particle effects (glow, sparkles, orbiting motes, trails)

T18Panel floaty animations (hover bob, parchment flutter, particle trail)

T19Ambient floor effects (candles, dust motes, cauldron bubbles, dormant dimming)

T20Floor build/dissolve animations (brick assembly, shimmer, fade-out)

T21Sound design (ambient hum, per-class work sounds, state transition SFX)

T22Pixel art sprites (7 classes x ~24 frames, workstation props, tilesets)

Phase 4 -- Stretch Goals

Beyond MVP -- the tower reaches higher

T23Isometric view -- alternative 2.5D camera mode

T24Agent pathfinding -- A* to workstation, library, stairs between floors

T25Day/night cycle -- exterior changes, candles brighten at night

T26Keyboard command palette -- fuzzy-find agents, floors, tasks (Ctrl+K)

T27Remote orchestrator streaming -- SSH tunnel or network transport

Design Principles

Five tenets that guide every pixel

The Tower is Alive

Everything breathes, pulses, and responds to real data. Idle floors dim. Busy floors swell. Agents animate contextually. Nothing is static decoration.

Showcase First, Dashboard Second

Visual storytelling takes priority over information density. If something can be communicated through animation, colour, or spatial metaphor instead of a label, prefer the metaphor.

Layers of Detail

Three levels everywhere: glance (floating runes, floor size), focus (spell scroll, status overlay), and power-user (raw terminal, keyboard shortcuts). Don't force detail on people who want ambiance.

Fantasy Vocabulary, Real Data

Every UI element has a fantasy name and aesthetic -- spell scrolls, quest boards, enchanted nameplates -- but the data underneath is real and accurate. The theme enhances comprehension, never obscures it.

Texture Over Flatness

Parchment has grain. Stone has moss. Panels float and flutter. Every surface has material presence. The pixel art style is a medium, not a limitation.

Emotional Targets

✨

Wonder / Awe

first impression

☕

Cozy Mastery

daily use

⚛

Playful Delight

ongoing discovery