# UI Wireframes

Wireframes for The Settled Reach UI, authored as JSON source files and rendered to PNG via Frame0.

JSON files are the source of truth. PNGs are exports. `.idmap.json` files are ephemeral (gitignored).

Wireframes are organized in two sets:
- **v01-** prefix: v0.1 critical path (minimal viable UI for first playable)
- **v10-** prefix: v1.0 evolution (discussion pieces for aspirational full design)

---

## HUD / Neural Insert

The player's primary gameplay interface — top-down view with perception overlays.

| Wireframe | Version | Decision References |
|-----------|---------|-------------------|
| [v01-insert-basic](hud/v01-insert-basic.png) | v0.1 | [D-013](../../../decisions/scope.md#d-013-diegetic-insertpoi-navigation-system) (diegetic insert), [D-048](../../../decisions/perception.md#d-048-neural-insert-overlay--visual-design) (insert overlay design), [D-049](../../../decisions/perception.md#d-049-z-level-rendering-stack-8-layers) (z-stack layers 6-7), [D-015](../../../decisions/perception.md#d-015-camera-locked-to-character-rotation-as-future-option) (locked camera), [D-014](../../../decisions/scope.md#d-014-v01-map-specification) (v0.1 map spec) |
| [v10-insert-full](hud/v10-insert-full.png) | v1.0 | [D-017](../../../decisions/perception.md#d-017-perception-modes-as-character-build-system) (perception modes), [D-048](../../../decisions/perception.md#d-048-neural-insert-overlay--visual-design) (insert overlay), [D-059](../../../decisions/perception.md#d-059-fog--shader-based-five-layers-knowledge-graph-driven) (fog layers), [D-033](../../../decisions/perception.md#d-033-entity-color--relationship-to-player) (entity color) |

## Dialogue

Conversation system — NPC speaking, player choosing, overheard conversations.

| Wireframe | Version | Decision References |
|-----------|---------|-------------------|
| [v01-dialogue-speaking](dialogue/v01-dialogue-speaking.png) | v0.1 | [D-061](../../../decisions/perception.md#d-061-dialogue-box--bottom-screen-max-20-height-no-portraits) (dialogue box spec), [D-076](../../../decisions/perception.md#d-076-dialogue-box-max-width--640px-oq-29-resolution) (max-width 1200px), [D-028](../../../decisions/content.md#d-028-dialogue-architecture--tagged-line-pools-with-four-relational-layers) (dialogue architecture) |
| [v01-dialogue-choosing](dialogue/v01-dialogue-choosing.png) | v0.1 | [D-061](../../../decisions/perception.md#d-061-dialogue-box--bottom-screen-max-20-height-no-portraits) (dialogue box), [D-062](../../../decisions/content.md#d-062-invisible-locked-dialogue-options) (invisible locked options), [D-063](../../../decisions/content.md#d-063-confrontation--same-box-different-weight) (confrontation weight) |
| [v01-dialogue-overheard](dialogue/v01-dialogue-overheard.png) | v0.1 | [D-078](../../../decisions/perception.md#d-078-overheard-npc-conversation--passive-dialogue-panel-with-occlusion-filter) (overheard conversation), [D-071](../../../decisions/perception.md#d-071-no-ambient-dip-for-eavesdropping--listeningfocus-boost) (eavesdropping), [D-072](../../../decisions/perception.md#d-072-universal-event-driven-conversation-murmur) (conversation murmur) |
| [v10-dialogue-full](dialogue/v10-dialogue-full.png) | v1.0 | [D-061](../../../decisions/perception.md#d-061-dialogue-box--bottom-screen-max-20-height-no-portraits) (dialogue box), [D-028](../../../decisions/content.md#d-028-dialogue-architecture--tagged-line-pools-with-four-relational-layers) (four relational layers), [D-075](../../../decisions/content.md#d-075-dialogue-filtering--layered-confidence-gate-on-trust-tier-oq-18-resolution) (confidence gating), [D-033](../../../decisions/perception.md#d-033-entity-color--relationship-to-player) (entity color as relationship) |

## Internal Monologue

Player character's thoughts — perception bridge, atmosphere, diegetic hints, unreliable narrator.

| Wireframe | Version | Decision References |
|-----------|---------|-------------------|
| [v01-monologue-idle](monologue/v01-monologue-idle.png) | v0.1 | [D-016](../../../decisions/perception.md#d-016-internal-monologue-as-core-perceptionatmosphere-system) (monologue system), [D-032](../../../decisions/content.md#d-032-separate-monologue-pools-per-character) (separate pools per character), [D-049](../../../decisions/perception.md#d-049-z-level-rendering-stack-8-layers) (z-layer 7) |
| [v01-monologue-reaction](monologue/v01-monologue-reaction.png) | v0.1 | [D-016](../../../decisions/perception.md#d-016-internal-monologue-as-core-perceptionatmosphere-system) (monologue), [D-060](../../../decisions/perception.md#d-060-cognitive-delay-for-fog-recognition) (cognitive delay), [D-067](../../../decisions/perception.md#d-067-recognition-chime-fires-at-onset-of-cognitive-delay) (recognition chime timing) |
| [v10-monologue-threading](monologue/v10-monologue-threading.png) | v1.0 | [D-016](../../../decisions/perception.md#d-016-internal-monologue-as-core-perceptionatmosphere-system) (monologue), [D-035](../../../decisions/content.md#d-035-converged-tag-taxonomy-for-dialogue-and-monologue-line-pools) (monologue tags/triggers), [D-041](../../../decisions/architecture.md#d-041-knowledge-graph-data-model) (knowledge graph) |

## Popups and Dialogs

Confirmations, tooltips, interaction lists, notifications, context menus.

| Wireframe | Version | Decision References |
|-----------|---------|-------------------|
| [v01-modal-confirm](popups/v01-modal-confirm.png) | v0.1 | [D-048](../../../decisions/perception.md#d-048-neural-insert-overlay--visual-design) (insert visual language), [D-049](../../../decisions/perception.md#d-049-z-level-rendering-stack-8-layers) (z-layer 7 UI) |
| [v01-tooltip](popups/v01-tooltip.png) | v0.1 | [D-056](../../../decisions/perception.md#d-056-cursor-states--insert-styled-geometric) (cursor states), [D-057](../../../decisions/perception.md#d-057-entity-interaction--vertical-list-insert-styled) (entity interaction list) |
| [v01-interaction-list](popups/v01-interaction-list.png) | v0.1 | [D-057](../../../decisions/perception.md#d-057-entity-interaction--vertical-list-insert-styled) (vertical list, insert-styled), [D-058](../../../decisions/perception.md#d-058-world-menu--radial-4-spokes) (world menu radial), [D-056](../../../decisions/perception.md#d-056-cursor-states--insert-styled-geometric) (cursor hover states) |
| [v10-context-menu](popups/v10-context-menu.png) | v1.0 | [D-057](../../../decisions/perception.md#d-057-entity-interaction--vertical-list-insert-styled) (entity interaction), [D-058](../../../decisions/perception.md#d-058-world-menu--radial-4-spokes) (world menu radial, 5-6 spokes) |
| [v10-notification-stack](popups/v10-notification-stack.png) | v1.0 | [D-013](../../../decisions/scope.md#d-013-diegetic-insertpoi-navigation-system) (diegetic insert), [D-048](../../../decisions/perception.md#d-048-neural-insert-overlay--visual-design) (insert overlay), [D-018](../../../decisions/perception.md#d-018-three-range-sound-model) (three-range sound — long-range alerts) |

## Menus

Main menu, pause, save/load, options.

| Wireframe | Version | Decision References |
|-----------|---------|-------------------|
| [v01-main-menu](menus/v01-main-menu.png) | v0.1 | [D-043](../../../decisions/perception.md#d-043-art-direction--visual-style-functional-warmth) (functional warmth style), [D-027](../../../decisions/scope.md#d-027-vertical-slice--smuggler--detective-two-character-proof) (two-character proof — character select) |
| [v01-pause-menu](menus/v01-pause-menu.png) | v0.1 | [D-043](../../../decisions/perception.md#d-043-art-direction--visual-style-functional-warmth) (visual style) |
| [v01-save-load](menus/v01-save-load.png) | v0.1 | [D-027](../../../decisions/scope.md#d-027-vertical-slice--smuggler--detective-two-character-proof) (vertical slice), [D-043](../../../decisions/perception.md#d-043-art-direction--visual-style-functional-warmth) (visual style) |
| [v10-main-menu](menus/v10-main-menu.png) | v1.0 | [D-043](../../../decisions/perception.md#d-043-art-direction--visual-style-functional-warmth) (visual style), [D-036](../../../decisions/content.md#d-036-sova-transit-district--krenn-system-as-v01-setting) (setting — Sova Transit District), [D-013](../../../decisions/scope.md#d-013-diegetic-insertpoi-navigation-system) (diegetic insert — in-fiction menu) |
| [v10-options-full](menus/v10-options-full.png) | v1.0 | [D-043](../../../decisions/perception.md#d-043-art-direction--visual-style-functional-warmth) (visual style), [D-068](../../../decisions/architecture.md#d-068-5-bus-audio-architecture) (5-bus audio — per-bus volume controls), [D-069](../../../decisions/perception.md#d-069-audio-dip-profiles-for-dialogue-and-confrontation) (audio dip profiles) |

---

## Workflow

Wireframes are authored as JSON, rendered via Frame0, exported as PNG. See `.claude/skills/frame0-wireframe/SKILL.md` for the full workflow.

Frame0 is treated as a renderer — push, export, clean up. Pull only when the user explicitly requests import of Frame0 edits.