CM
Codex Machine

Global settings

Global AGENTS.md

Global config.base.toml

Design spec

# 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.