---
title: Apollo — Surface map
type: design-spec
status: capture-pass-1
captured_from: https://apollo.apisett.com
captured_on: 2026-05-02
captured_by: Playwright walkthrough (Ishai logged in)
---

# Apollo — Surface Map

> First-pass capture of the live Apollo app. Screenshots, DOM snapshots, and design tokens are in `apollo-capture/`. This file is the structured index — what surfaces exist, what each one does, and where the source material lives. Replica work in `screens/apollo/` (TBD) builds on this.

---

## Tech stack (observed)

- **Framework:** React + Tailwind CSS
- **Component library:** [shadcn/ui](https://ui.shadcn.com/) — observed token names match its conventions exactly (`--primary`, `--secondary`, `--muted`, `--card`, `--popover`, `--ring`, `--destructive`, `--accent`, `--success`, `--warning` — all in HSL triplet form)
- **Fonts:** System stack (`ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji"…`). No custom typeface.
- **Border radius base:** `0.75rem`
- **Color palette (HSL, light theme):**
  - Primary: `238 70% 60%` — indigo (used for active nav pill, send-message button, "Search" button)
  - Accent: `210 100% 60%` — bright blue
  - Success: `142 71% 45%` — green
  - Warning: `38 92% 50%` — amber
  - Destructive: `0 72% 51%` — red
  - Background: `240 20% 99%` — near-white, cool tint
  - Foreground: `240 10% 10%` — near-black, cool tint
  - Muted: `240 5% 96%`, Border/Input: `240 6% 90%`

Full token dump: [apollo-capture/dom/01-design-tokens.json](apollo-capture/dom/01-design-tokens.json)

---

## Top-level surfaces (3)

| Route | Title | Purpose |
|---|---|---|
| `/create-task` | Create Task | Form for kicking off a new task (a Version of an existing playable, or a New Concept) |
| `/auditor` | Auditor | The auditor's main workspace — game preview + AI chat + task list |
| `/weekly-goals` | Weekly Goals | Per-auditor weekly quota / pipeline dashboard |

Top nav: Apollo logo (left) · 3 nav links (center-right) · user avatar (right). The active route is rendered as a filled indigo pill; inactive routes are ghost text-buttons with a small icon.

---

## 1. `/create-task` — Create Task

Screenshot: [01 — Create Task](apollo-capture/screenshots/02-create-task.png)

A single-column centered form (max-width ~720px) inside a white card on the page background. Form is labeled "Create Task — Create a new task version or concept task."

### Fields (in order)

1. **Mode tabs** — segmented toggle: `Version` (default selected) / `New Concept`. Switches the form between revising an existing playable and starting from scratch.
2. **Game** — searchable dropdown. Shows the slug (e.g. `we-are-warriors`).
3. **Playable** — dropdown. Filters to playables for the selected game.
4. **Version** — dropdown. "Version to use for this task" — picks which existing version to base the new task on. (Only present in Version mode.)
5. **Advanced Settings** — collapsible accordion with a gear icon. Contents not yet captured (collapsed by default).
6. **Assets (Files)** — file upload zone with "Choose files…" button. These are direct inputs the AI will use.
7. **Attachments (Reference Files)** — second file upload zone, distinct from Assets. Helper text: "Upload reference files to help describe your task (won't be used as direct inputs)." Important distinction: Assets feed the AI; Attachments are documentation only.
8. **Task Description** — multi-line textarea, placeholder "Describe the changes for this version…"
9. **(Submit button — below fold; not yet captured)**

### Notes
- "New Concept" mode should reveal a different field set (no Version dropdown, possibly no Playable dropdown). To be captured.
- Game/Playable/Version are dependent: each filters the next.

---

## 2. `/auditor` — Auditor (the main workspace)

This is where the auditor spends 90% of their time. Three-pane layout fills the viewport below the top nav.

| Pane | Width | Purpose |
|---|---|---|
| **Left** — Game preview | ~25% | Live iframe of the playable being built, plus build/console controls |
| **Center** — Workspace tabs | ~50% | 5 tabs: Scene Editor · Chat · Pins · Files · Workspace |
| **Right** — Task list | ~25% | All auditor tasks across statuses, filterable |

### Left pane — Game preview

Screenshot: [01 — Auditor dashboard (Chat tab)](apollo-capture/screenshots/01-auditor-dashboard.png)

- Top toolbar (icons left, controls right):
  - Eye toggle (visibility) and `>>` expand
  - `Build versions` dropdown — selects which build of the playable to preview
  - `iPhone SE - Portrait` — device frame picker
  - `100%` — zoom level
- Status bar above the iframe: `Modified · 4.4 MB · Live` (build name, size, live/stale indicator) and a row of action buttons: refresh, power (kill), record video, screenshot, open-external.
- The playable itself runs inside an `<iframe>` with the chosen device aspect ratio.
- Bottom: collapsible `Console Logs - Modified [count]` bar showing iframe console output.

### Center pane — Workspace tabs

Five tabs. Default is **Chat**.

#### Tab: Chat
Screenshot: [01 — Auditor Chat](apollo-capture/screenshots/01-auditor-dashboard.png)

A threaded conversation between the auditor and the AI agent ("Developer"). Each message bubble has:
- Header row: pin icon · author name (`Developer` or auditor's name, e.g. `Antontrus`) · timestamp · "Restore Point" button (Developer messages only) or "Viewing Latest Version" indicator on the most recent.
- Body: rich text — supports headings (`✅ FIXED`), paragraphs, ordered/unordered lists, inline `<code>` and `<strong>`. AI replies often include a "Context" line, a "What was done" list, and follow-up suggestion options (A/B/C/D).
- Optional attachments section — `Download all` button + per-file cards. Files seen: `.webm` recordings (5MB), `.json` console logs.

Composer at bottom: attach button (+), `Type your message…` textbox, send button (paper plane), overflow menu (3-dot). Send is disabled when textbox is empty.

#### Tab: Scene Editor
Screenshot: [04 — Scene Editor](apollo-capture/screenshots/04-auditor-scene-editor.png)

A live scene-tree inspector for the running build (Phaser/Unity-style).
- Game preview shows a "Press pause to edit" overlay; toolbar gains pause/undo/redo/clear buttons.
- Center splits into two: scene tree (left) and properties panel (right, "Select an element" empty state until a node is picked).
- Scene tree is a hierarchical disclosure list with icons per type. Top of tree: `Scene > _Container2 > [ui_root, tutorial_arrow_container, world > ...]`. Each node has an eye-visibility checkbox.
- A vertical icon toolbar pinned to the far left of the editor: move, rotate, expand, copy, delete.
- Bottom right: floating green `Apply Changes` button (only visible when changes are pending).

#### Tab: Pins
Screenshot: [05 — Pins](apollo-capture/screenshots/05-auditor-pins.png)

Pinned messages from the chat, surfaced separately. Currently shows a single very long pinned message: the **original task brief** from the task creator (timestamp `Apr 27, 11:40:33`, author `Auditor`). The brief is plain text — "Transform the existing Scrolling Tetris build…" — followed by numbered gameplay changes and bulleted visual identity specs. Functions as the source-of-truth context for the AI throughout the conversation.

#### Tab: Files
Screenshot: [06 — Files](apollo-capture/screenshots/06-auditor-files.png)

A code-file browser/editor.
- Top: `File Editor` heading, `+ New` button (top right).
- Search bar: `Search in files (e.g., print("hi"))` with a Search button (indigo, primary color).
- File tree (collapsible folders): root folder `woodoku_blast_7_tetris_sc...` containing `.gitignore`, `README.md`, `apollo/`, `asset_specs.json`, `assets/`, `atlas_coder_todo.json`, `build.js`, `build.json`, `capture_logs.py`, `globals.d.ts`, `package-lock.json`, `package.json`, `src/`, `tsconfig.json`.
- Right pane: empty-state `Select a file to edit`. (Edit pane likely opens a Monaco-style editor on selection — to be captured.)

#### Tab: Workspace
Screenshot: [07 — Workspace](apollo-capture/screenshots/07-auditor-workspace.png)

A second tree, **separate from Files** — shows reference/spec/analysis artifacts rather than build code. Same tree UI but the contents are different: `BUILD_CONFIG_CHECKLIST.md`, `PLAN.md`, `asset_specs.json`, `base-playable-analysis/` (with `analysis/`, `base-gdd.md`, `frames/`, `key-gameplay-moments.md`, `technical-map.md`), `defringe_logo.py`, `fix_frost_alpha.py`, frost asset PNGs (`frost_final_raw_lod1.png` …), per-asset spec JSONs (`frost_final_specs.json`, `logo_clean_spec.json` …), `media_analysis/`. Counts on folders (e.g. `analysis/ 6`, `frames/ 46`, `media_analysis/ 186`).
- Functions as the "everything else relevant to the task" lane: GDDs, analysis docs, raw image sources, per-image specs.

### Right pane — Task list

Screenshot: [01 — Task list (right column)](apollo-capture/screenshots/01-auditor-dashboard.png)

- Header: collapse arrow · `All tasks (2748)` heading · download icon (export?) · filter icon.
- Status tabs (pill row): `All (2762)` selected by default, then 7 icon-only tabs each with a count: `(0)`, `(675)`, `(44)`, `(55)`, `(1587)`, `(4)`, `(383)`, `(2720)`. (Total > All — overlap because a task can be in multiple status buckets, or "All" excludes some categories like "Done".)
- Task cards (5 per page). Each card shows:
  - Pin icon (left edge) · large task ID (e.g. `4916`) · `/ 1` (version count) · status indicator dot (green = active task)
  - Status pill (`Waiting`, `Pending TL`) and `Xm/Xh/Xd ago` timestamp
  - **Optional badge row** on revision tasks: `Revision 2` · `New Concept` (only on task 3328 in the captured set)
  - Task title (one paragraph): `Add bomb blocks to pre-filled rows triggering cascade chain reactions`
  - Sub-bullet (likely the latest user message in the chat): icon + truncated paragraph: `Give simpler shapes in early moves`
  - Footer: game slug · `/` · playable slug · `More ▾` button (expand)
- Currently-selected task is highlighted with a thick indigo left border and a subtle indigo background tint.
- Pagination footer: `Task 1 to 5 of 2748` · prev · `1` · next.

---

## 3. `/weekly-goals` — Weekly Goals

Screenshot: [03 — Weekly Goals (empty state)](apollo-capture/screenshots/03-weekly-goals.png)

Two-column dashboard. (For Ishai's account it's empty since he is not an auditor — both columns show empty states.)

- Header: `Weekly Goals` (left, large heading) · `Apr 27 – May 1` (right, week range).
- Left column — `DAILY BREAKDOWN` (small caps eyebrow). Empty: `No goals assigned for this week`.
- Right column — `WEEKLY PIPELINE`. Shows a single tile `Total this week 0/0` (in indigo numerals), then `No pipeline data` empty state below.

To get a populated capture: log in as an auditor (e.g. Antontrus). For replica purposes the empty state is still useful as a baseline.

---

## Captured material — index

```
vault/08-Design-specs/apollo-capture/
├── dom/
│   ├── 01-design-tokens.json          ← all 80 CSS custom properties from <html>
│   ├── 02-create-task-snapshot.md     ← accessibility-tree DOM snapshot
│   └── 03-weekly-goals-snapshot.md
└── screenshots/
    ├── 01-auditor-dashboard.png       ← Chat tab (default)
    ├── 02-create-task.png             ← form, full page
    ├── 02b-create-task-bottom.png     ← scrolled to bottom (no extra fields)
    ├── 03-weekly-goals.png            ← empty state
    ├── 04-auditor-scene-editor.png
    ├── 05-auditor-pins.png
    ├── 06-auditor-files.png
    └── 07-auditor-workspace.png
```

---

## Gaps — to capture in pass 2

- `/create-task` "New Concept" mode (different field set)
- `/create-task` Advanced Settings expanded
- `/create-task` submit button + post-submit state
- Auditor task list: a different status filter selected (each tab's icon meaning is unknown without selecting it)
- Auditor task card: `More ▾` expanded
- Auditor: clicking a task to load it (does the right column collapse? is there a detail view?)
- Auditor Chat: a fresh task with no messages (empty-state)
- Auditor Scene Editor: a node selected (right panel populated with properties)
- Auditor Files: a file open in the edit pane
- `Build versions` dropdown contents
- User menu (clicking the `I` avatar)
- `/weekly-goals` populated — log in as an auditor to see the real layout

---

## Implications for the replica

1. **Drop in our DS, not Apollo's.** Apollo is a stock shadcn build with system fonts; replacing tokens with Cosmo's (`--cream-*`, `--ink-*`, `--orange-*`, Barlow + Red Hat Text + Rubik) is a substantive visual change but a structurally identical app — every shadcn component class maps cleanly onto our existing components.
2. **Three-pane layout is the spine of the Auditor.** Most redesign value lives there. Top nav and Create Task / Weekly Goals are simpler.
3. **The chat thread is the AI agent's main UI.** It's the nucleus — the iframe and task list orbit it. Worth a dedicated design pass.
4. **Two file trees (Files vs. Workspace) is a strong signal.** Users have to switch between code and reference material. There may be a redesign opportunity to unify or distinguish them better.
5. **No real backend in replica.** Mock data goes in `mock-data/apollo.json` mirroring the observed shape: tasks, pins, chat messages, files, workspace assets.