Routing Sub-Menu UX Design
Status: Complete | Agent: PERISCOPE (UX Design) | Timestamp: 2026-05-11 14:30 UTC Target: Anbernic RG40XXV (640×480, D-pad + A/B/X/Y, L1/R1, START/SELECT) Game: Turn-based strategy, hex-node traversal
1. Flow Overview
NODE OUTPUT VIEW → [Route] → CONTENT SELECTION → METHOD SELECTION
↓
TARGET SELECTION (Grid)
↓
CONFIRMATION DIALOG
↓
EXECUTION / ANIMATION
2. Entry Point — Node Output View
┌────────────────────────────────────────────────────────────┐
│ ▓▓▓▓▓▓ HEX 14: DESIGN ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ [B:Back] │
│ │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ OUT: "Tile Dimensions & Hex Grid Layout" │ │
│ │ │ │
│ │ §1 Grid Philosophy (120w) │ │
│ │ §2 Tile Dimensions (340w) ◄ highlighted │ │
│ │ §3 Viewport Constraints (180w) │ │
│ │ §4 Future Considerations (90w) │ │
│ │ │ │
│ │ ──────────────────────────────────────────────── │ │
│ │ [A:Route] [Y:View Raw] [X:Chain View] │ │
│ └──────────────────────────────────────────────────────┘ │
│ │
│ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ │
└────────────────────────────────────────────────────────────┘
640×480 — 32px border, 14px mono font, 4-color palette
Entry trigger: Select a node that has produced output, press A to open output view, then press A again on "Route."
3. Screen 1 — Content Selection
┌────────────────────────────────────────────────────────────┐
│ ▓▓▓▓▓▓ ROUTE FROM HEX 14 ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ [B:Cancel] │
│ │
│ WHAT TO ROUTE? │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ ○ ENTIRE OUTPUT (4 sections, 730w) │ │
│ │ │ │
│ │ ● SPECIFIC SECTION │ │
│ │ ┌─────────────────────────────────────────────┐ │ │
│ │ │ §1 Grid Philosophy │ │ │
│ │ │ §2 Tile Dimensions ◄ selected │ │ │
│ │ │ §3 Viewport Constraints │ │ │
│ │ │ §4 Future Considerations │ │ │
│ │ └─────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ ○ CURATED SUBSET (agent filters) │ │
│ │ Agent reads source → extracts what target needs │ │
│ │ │ │
│ └──────────────────────────────────────────────────────┘ │
│ │
│ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ [A:Confirm] [Y:Next] ▓▓▓▓▓▓▓▓▓▓▓▓▓ │
└────────────────────────────────────────────────────────────┘
Controls: - D-pad ↑↓: Navigate radio buttons / section list - A: Select / toggle radio - B: Back to output view - Y: Accept and proceed to method selection
State: Radio + optional sub-list (shown only when "Specific Section" selected).
4. Screen 2 — Method Selection
┌────────────────────────────────────────────────────────────┐
│ ▓▓▓▓▓▓ DELIVERY METHOD ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ [B:Back] │
│ │
│ CONTENT: §2 Tile Dimensions (340w) │
│ │
│ HOW TO DELIVER? │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ ● CURATED │ │
│ │ Agent reads source, filters for relevance to │ │
│ │ target's prompt thrust. Target receives a │ │
│ │ distilled, context-optimized version. │ │
│ │ │ │
│ │ ┌────────────────────────────────────────────┐ │ │
│ │ │ ✓ Reduces context window pressure │ │ │
│ │ │ ✓ Target gets only what matters │ │ │
│ │ │ ✗ Adds agent latency (1–3s) │ │ │
│ │ └────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ ○ POINTER │ │
│ │ Target gets a read-only pointer to source. │ │
│ │ Can inspect it but it's NOT injected into │ │
│ │ target's context unless explicitly requested. │ │
│ │ │ │
│ │ ┌────────────────────────────────────────────┐ │ │
│ │ │ ✓ Zero latency, no context cost │ │ │
│ │ │ ✓ Target checks on-demand │ │ │
│ │ │ ✗ Requires target to actively pull │ │ │
│ │ └────────────────────────────────────────────┘ │ │
│ │ │ │
│ └──────────────────────────────────────────────────────┘ │
│ │
│ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ [A:Confirm] [X:Toggle] [Y:Next] ▓▓▓▓▓▓▓ │
└────────────────────────────────────────────────────────────┘
Controls: - D-pad ↑↓: Select curated or pointer - A: Confirm choice - X: Toggle between options (fast swap) - B: Back to content selection - Y: Accept and proceed to target selection
5. Screen 3 — Target Selection (Hex Grid Routing Mode)
┌────────────────────────────────────────────────────────────┐
│ ▓▓▓▓▓▓ ROUTING MODE ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ [B:Cancel] │
│ │
│ ┌────────────────────────────────────────┐ PREVIEW: │
│ │ │ │
│ │ ⬡───⬡───⬡───⬡ │ Route: H14→H22│
│ │ ╱ ╲ ╱ ╲ ╱ ╲ ╱ ╲ │ Content: §2 │
│ │ ⬡───⬡───⬡───⬡───⬡ ◄ Grid │ Method: CURATED│
│ │ ╲ ╱ ╲ ╱ ╲ ▓ ╲ ╱ ╲ Cursor: ▓ │ │
│ │ ⬡───⬡───●───⬡───⬡ Selected: ● │ PRESS A TO │
│ │ ╲ ╱ ╲ ╱ ╲ ╱ ╲ ╱ Source: ◉ │ SELECT HEX 22 │
│ │ ⬡───⬡───⬡───⬡ │ │
│ │ │ │
│ │ ◉ = H14 (DESIGN) SOURCE │ [X] Method │
│ │ ▓ = H22 (DEVELOP) CURSOR │ [Y] Scope │
│ │ │ [L1/R1] Chains │
│ └────────────────────────────────────────┘ │
│ │
│ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ │
└────────────────────────────────────────────────────────────┘
Routing Mode Controls: | Button | Action | |--------|--------| | D-pad | Navigate hex grid cursor | | A | Select highlighted hex as target | | B | Cancel → back to method selection | | X | Toggle method: Curated ↔ Pointer | | Y | Toggle content scope: Entire → Section → Curated Subset | | L1/R1 | Cycle through pending routing chains | | START | Execute all pending routes immediately |
Visual states:
- ◉ = Source node (pulsing highlight)
- ● = Already-confirmed target (solid)
- ▓ = Current cursor position (blinking)
- ⬡ = Empty / unselected hex
- Valid targets glow green on hover; invalid (already targeted, offline) glow red
Info panel (right side): Shows live preview of the routing action as player navigates.
6. Screen 4 — Confirmation Dialog
┌────────────────────────────────────────────────────────────┐
│ ▓▓▓▓▓▓ CONFIRM ROUTE ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ │
│ │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ SOURCE: HEX 14 (DESIGN) │ │
│ │ TARGET: HEX 22 (DEVELOP) │ │
│ │ METHOD: CURATED │ │
│ │ CONTENT: §2 Tile Dimensions (340w) │ │
│ │ │ │
│ │ ┌────────────────────────────────────────────┐ │ │
│ │ │ "Tile dimensions are set at 64×56px per │ │ │
│ │ │ hex, with a 2px gutter. The grid uses │ │ │
│ │ │ axial coordinates (q,r). Viewport is │ │ │
│ │ │ 640×480 with a 32px HUD margin..." │ │ │
│ │ └────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ ┌──────────────────────────────────────────────┐ │ │
│ │ │ ⚠ Agent will read source, filter for target │ │ │
│ │ │ prompt thrust, and inject curated context. │ │ │
│ │ │ Est. latency: 2.1s │ │ │
│ │ └──────────────────────────────────────────────┘ │ │
│ │ │ │
│ └──────────────────────────────────────────────────────┘ │
│ │
│ ▓▓▓▓▓▓ [A:EXECUTE] [B:CANCEL] [Y:EDIT] ▓▓▓▓▓▓▓▓▓▓▓▓▓ │
│ [X:Add to chain] [SELECT:Edit source] │
└────────────────────────────────────────────────────────────┘
Controls: - A: Execute the route - B: Cancel → back to target selection - Y: Edit → go back through the flow (content → method → target) - X: Add to chain (queue this route, stay in routing mode for next hop) - SELECT: Edit source node → re-enter target selection with different source
Content preview: Shows first ~200 characters of selected content, truncated with "…"
7. Screen 5 — Execution Feedback
┌────────────────────────────────────────────────────────────┐
│ │
│ │
│ │
│ ┌──────────────┐ │
│ │ ROUTING… │ │
│ │ │ │
│ │ H14 ──→ H22 │ │
│ │ ▓▓▓░░░░ │ │
│ └──────────────┘ │
│ │
│ ┌────────────────────────────────────┐ │
│ │ Agent is curating §2 for DEVELOP │ │
│ │ prompt thrust: "implement hex │ │
│ │ grid renderer" │ │
│ └────────────────────────────────────┘ │
│ │
│ [B:HALT] [SELECT:Skip animation] │
│ │
└────────────────────────────────────────────────────────────┘
Progress bar: Fills over ~2s (curated) or instant (pointer).
Controls during execution: - B: Halt — immediately stops the routing action (confirmation: "Halt routing? [A:Yes] [B:No]") - SELECT: Skip animation → jump to completion message
8. Screen 6 — Completion
┌────────────────────────────────────────────────────────────┐
│ │
│ │
│ │
│ ✓ ROUTED │
│ │
│ H14 (DESIGN) ──────→ H22 (DEVELOP) │
│ §2 Tile Dimensions │
│ Method: CURATED │
│ │
│ ┌────────────────────────────────────────┐ │
│ │ HEX 22 can now access HEX 14's │ │
│ │ output in its context. │ │
│ │ │ │
│ │ Multi-hop chain: │ │
│ │ H14 → H22 ◄ │ │
│ │ │ │
│ │ [A:View target] [Y:Route again] │ │
│ └────────────────────────────────────────┘ │
│ │
│ [B:Return to grid] [X:Chain next] │
│ │
└────────────────────────────────────────────────────────────┘
Controls: - A: Jump to target node's output view - B: Return to hex grid - X: Chain next — start routing from H22 to another node - Y: Route again — start new route from same source
9. Multi-Hop Chain View
┌────────────────────────────────────────────────────────────┐
│ ▓▓▓▓▓▓ ROUTING CHAINS ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ │
│ │
│ ACTIVE CHAIN: CHAIN 1/2 [L1/R1:Cycle chains] │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ H14 ──→ H22 ──→ H28 ──→ ? │ │
│ │ DESIGN DEVELOP TEST (select next target) │ │
│ │ §2 §2 §2 │ │
│ │ CURATED CURATED CURATED │ │
│ │ │ │
│ │ PENDING ROUTES IN THIS CHAIN: │ │
│ │ ┌────────────────────────────────────────────────┐ │ │
│ │ │ ✓ H14→H22 (executed) │ │ │
│ │ │ ✓ H22→H28 (executed) │ │ │
│ │ │ ○ H28→? (pending — select target) │ │ │
│ │ └────────────────────────────────────────────────┘ │ │
│ │ │ │
│ └──────────────────────────────────────────────────────┘ │
│ │
│ OTHER CHAINS: │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ CHAIN 2: H08 → H15 (1 hop, executed) │ │
│ └──────────────────────────────────────────────────────┘ │
│ │
│ ▓▓▓▓ [A:Continue chain] [X:New chain] [Y:Clear chain] ▓ │
└────────────────────────────────────────────────────────────┘
Controls: - L1/R1: Cycle through active chains - A: Continue chain (enter routing mode for next hop) - X: Start new chain - Y: Clear current chain (confirmation required) - B: Return to grid
10. Clear / Halt / Clarify — Interruption States
10a. Clear (Dismiss pending route)
┌────────────────────────────────────────────────────────────┐
│ ┌──────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ CLEAR PENDING ROUTE? │ │
│ │ │ │
│ │ H14 → H22 (CURATED, §2) — not yet executed │ │
│ │ │ │
│ │ [A:Clear route] [B:Keep it] │ │
│ │ │ │
│ └──────────────────────────────────────────────────────┘ │
└────────────────────────────────────────────────────────────┘
Triggered by pressing B on the confirmation screen, or Y on the chain view.
10b. Halt (Stop in-progress routing)
┌────────────────────────────────────────────────────────────┐
│ ┌──────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ ▓▓▓▓▓░░░ HALTING… │ │
│ │ │ │
│ │ Routing H14→H22 was interrupted. │ │
│ │ No context was injected. │ │
│ │ │ │
│ │ [A:Retry] [B:Dismiss] [Y:Change method] │ │
│ │ │ │
│ └──────────────────────────────────────────────────────┘ │
└────────────────────────────────────────────────────────────┘
Triggered by B during the "Routing…" progress screen.
10c. Clarify (Redo selection)
┌────────────────────────────────────────────────────────────┐
│ ▓▓▓▓▓▓ WHAT NEEDS FIXING? ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ [B:Nevermind]│
│ │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ ○ WRONG SOURCE NODE (Hex 14 → pick new) │ │
│ │ │ │
│ │ ○ WRONG CONTENT SECTION (§2 → pick new) │ │
│ │ │ │
│ │ ○ WRONG TARGET NODE (Hex 22 → pick new) │ │
│ │ │ │
│ │ ○ WRONG METHOD (Curated→Pointer) │ │
│ │ │ │
│ │ ○ DON'T WANT TO ROUTE AT ALL (dismiss) │ │
│ │ │ │
│ └──────────────────────────────────────────────────────┘ │
│ │
│ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ [A:Select] [B:Back] ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ │
└────────────────────────────────────────────────────────────┘
Triggered by holding SELECT for 0.5s on any routing screen, or by pressing Y on the confirmation screen.
Each option redirects: - "Wrong source" → back to hex grid, pick new source node - "Wrong content" → back to content selection - "Wrong target" → back to routing mode grid - "Wrong method" → back to method selection - "Don't want to route" → dismiss everything, return to grid
11. Complete Button Map Reference
| Button | Context | Action |
|---|---|---|
| D-pad ↑↓ | All menus | Navigate options / sections |
| D-pad ←→↑↓ | Routing mode | Move hex grid cursor |
| A | Menu | Select / confirm current item |
| A | Routing mode | Select hex under cursor as target |
| A | Confirmation | Execute route |
| B | Any screen | Back one step |
| B | Execution | Halt routing in progress |
| B (hold 0.5s) | Any screen | Open Clarify menu |
| X | Routing mode | Toggle method (Curated ↔ Pointer) |
| X | Confirmation | Add to chain (queue, don't execute) |
| X | Completion | Chain next (route from target onward) |
| Y | Content select | Accept and proceed |
| Y | Routing mode | Toggle content scope (Entire → Section → Curated) |
| Y | Confirmation | Edit (go back through flow) |
| Y | Completion | Route again (new route from same source) |
| L1 | Any routing screen | Previous pending chain |
| R1 | Any routing screen | Next pending chain |
| START | Any routing screen | Execute all pending routes |
| SELECT | Confirmation | Edit source node |
| SELECT (hold) | Any routing screen | Open Clarify menu |
| SELECT | Execution | Skip animation |
12. State Machine
┌─────────────┐
│ GRID VIEW │
└──────┬──────┘
│ [A on node with output]
▼
┌───────────────┐
│ OUTPUT VIEW │
└───────┬───────┘
│ [A:Route]
▼
┌───────────────┐
┌───▶│ CONTENT │◀──┐
│ │ SELECTION │───┘
│ └───────┬───────┘ │ [Y:Edit from confirm]
│ │ [Y:Next] │
│ ▼ │
│ ┌───────────────┐ │
│ │ METHOD │◀───┘
│ │ SELECTION │
│ └───────┬───────┘
│ │ [Y:Next]
│ ▼
│ ┌───────────────┐
│ │ TARGET │◀──────────┐
│ │ SELECTION │ │
│ └───────┬───────┘ │
│ │ [A on hex] │
│ ▼ │
│ ┌───────────────┐ │
│ │ CONFIRMATION │───[Y:Edit]┘
│ └───────┬───────┘
│ │
│ ┌───────┴───────┐
│ │ │
│ ▼ ▼
│ [X:Chain] [A:Execute]
│ │ │
│ │ ▼
│ │ ┌───────────────┐
│ │ │ EXECUTION │───[B:Halt]──▶ HALTED
│ │ └───────┬───────┘
│ │ │
│ │ ▼
│ │ ┌───────────────┐
│ │ │ COMPLETION │
│ │ └───────┬───────┘
│ │ │
│ │ ┌─────────┼─────────┐
│ │ │ │ │
│ │ ▼ ▼ ▼
│ │ [B:Grid] [X:Chain] [Y:Route again]
│ │ │
└────┘ │
[Chain loops back to target selection
with previous target as new source]
13. Design Principles
-
One thumb, four buttons. Every critical action maps to A/B/X/Y within thumb reach. No D-pad + button combos required for primary flow.
-
Preview before commit. The confirmation screen shows everything: source, target, method, content snippet, estimated latency. No surprises.
-
Undo is cheap. B always goes back. Clarify always offers granular correction. Clear always has a confirmation step.
-
Chains are first-class. L1/R1 cycle chains everywhere. START executes all pending. Multi-hop isn't an afterthought — it's built into the core loop.
-
Latency is visible. During curated routing, the progress bar + status text make the wait feel intentional, not broken. Pointer method is instant for impatient players.
-
640×480 economy. Every pixel counts. No wasted chrome. ASCII-art borders are 1 character wide. Info panels share screen real estate with the grid. Content previews truncate at ~200 chars.
-
Color as state, not decoration. Source nodes pulse. Valid targets glow green. Invalid targets glow red. Confirmed routes show chain lines. Color carries information — nothing is purely decorative.
14. Edge Cases
| Case | Behavior |
|---|---|
| Target node has no prompt yet | Warn: "HEX 22 has no active prompt. Route will be stored until prompt is set." Confirm or cancel. |
| Target already has a route from same source | "HEX 22 already has a route from HEX 14. Overwrite? [A:Yes] [B:No]" |
| Target == Source | Cursor skips source hex. Grid shows source as ◉, not selectable. |
| Chain loop (A→B→A) | Detect and warn: "This creates a circular route. Continue? [A:Yes] [B:No]" |
| Agent offline (Curated method) | "Agent unavailable. Use Pointer method instead?" Fallback offered. |
| Output has no sections (empty) | "HEX 14 has no output to route." Only "Entire output" shown (with "(empty)" note). |
| Max chain length (10 hops) | "Chain limit reached (10). Execute or start new chain." |
| Routing to off-grid / deleted node | Node removed from valid target list. If already targeted, clear with warning. |
15. Accessibility Notes
- All actions available via D-pad + A/B/X/Y (no simultaneous multi-button)
- Hold duration for Clarify is configurable (default 500ms)
- Color-only states have secondary indicators (pulse animation, border style)
- Text size: 14px minimum, high-contrast palette (4-color: bg, fg, accent, dim)
- Audio cues: optional click on grid move, chime on completion, buzz on error