# Design Specification
## Product goal
Codex Machine is a control tower for multiple autonomous coding environments.
The UI must feel:
- calm
- dense but readable
- operator-oriented
- timestamp-forward
- visually structured without decoration overload
## Visual principles
1. One page should answer:
- what is running
- what is blocked
- what changed recently
- what needs me now
2. Every state transition must be timestamped and visible.
3. Workflow graphs must be readable without zooming:
- rounded nodes
- clear directional arrows
- active node highlighted
- terminal states visually distinct
4. Task queues are shown as Kanban columns:
- queued
- active
- blocked
- done
- failed
5. Monospace is used for logs, prompts, outputs, commands, and file paths.
6. Color is semantic:
- blue: running / active
- green: done / pass
- amber: blocked / waiting
- red: failed
- slate: idle / historical
7. Layout prefers cards, sticky headers, and wide content lanes over modals.
## Components
### Environment card
Must show:
- name
- repo path
- container state
- workflow
- active task
- last heartbeat
- queue counters
### Event timeline row
Must show:
- timestamp
- environment
- task
- event type
- concise message
### Workflow graph
Must show:
- node label
- agent or command type
- active highlighting
- edge labels if present
### Question card
Must show:
- why the question exists
- the task and node that raised it
- a clean answer form matching the declared render type
### Active run inspector
Must show:
- current node
- current agent
- model and reasoning
- prompt file
- output file
- log tail
## Interaction model
- Primary actions are inline buttons.
- Dangerous actions require a short confirmation form, not a browser dialog.
- No hidden gesture dependencies.
- Pages must remain useful on a phone.
## Typography and spacing
- Use a tight but readable density.
- Favor 13px–15px body sizing, slightly larger headings, and strong line separation.
- Cards should have generous internal spacing and clear titles.
## Implementation constraints
- No frontend build step.
- Vanilla JS only.
- Server-rendered HTML.
- CSS in one main stylesheet.
- No dependency on a database.