Skip to main content

Valenar UX captures — index

The Playwright capture pipeline drives the live Vite dev server, walks each rail tab / panel / modal, and produces a fixed set of PNGs that land under Temp/bundles/valenar*-ui/captures/ and a stable baseline copy under legacy/v1/examples/valenar/docs/current-ux/screenshots/. This file is the human-readable index of what every capture is, so reviewers can scan the set without reading the JSON / JS adapter pair.

Authoritative pair: tools/llm-bundles/captures/valenar.scenarios.json declares which scenarios exist and which files each produces; tools/llm-bundles/captures/valenar.adapter.js is the per-scenario interaction sequence that drives the page. The scenario index below is generated from the JSON by sbundle gen captures-md valenar; the Coverage Gaps section beneath the marker line is hand-written.

How to run captures​

The sbundle tool builds bundles that include capture passes; the captures are produced as a side effect of the bundle build.

# Rebuild all bundles, capturing whatever is stale:
tools/llm-bundles/target/release/sbundle build

# Rebuild a subset of profiles:
tools/llm-bundles/target/release/sbundle build valenar valenar-ui valenar-full-ui

# Re-shoot a single scenario (helpful while iterating on capture code):
tools/llm-bundles/target/release/sbundle capture valenar location-context-panel

# CI / pre-commit drift gate (fails if captures or bundles are stale):
tools/llm-bundles/target/release/sbundle check

The captures require the dev server. sbundle status reports whether node, npx repomix, and the dev server are reachable; if the dev server is not running, the capture pass cannot proceed.

The pipeline uses Playwright with a fixed 1440x900 viewport, animations disabled, floating overlays (Outliner / Favourites / Events) hidden by default in localStorage so panels are captured clean.

Overview rail tab​

  • mc-overview — 01-mc-overview-collapsed.png — compact — MC's Overview rail tab in compact size, showing the main character's status header, vital signs, and current activity at a glance — the player's home view onto the protagonist.

Location rail tab​

  • mc-location-compact — 02-mc-location-collapsed-selected.png — compact — MC's Location rail tab in compact size with the current location selected. Shows the place card, its primary stats, and quick verbs without the expanded dossier.

Location rail tab — dossier (expanded)​

  • location-dossier-tabs — 03-mc-location-dossier-overview.png, 04-mc-location-dossier-survey.png, 05-mc-location-dossier-activities.png, 06-mc-location-dossier-features-list.png, 07-mc-location-dossier-approaches.png, 08-mc-location-dossier-threats.png, 09-mc-location-dossier-sites.png — wide — Each inner tab of the expanded Location dossier — Overview, Survey, Activities, Features, Approaches, Threats, and Sites — captured in order. Demonstrates the dossier's full information surface for one location.

Location dossier — Feature detail​

  • location-feature-panels — 10-feature-panel-ruin.png, 11-feature-panel-threat.png — wide — Drilling into individual features from the Features list inside the Location dossier. Shows the per-feature panel for a ruin (Ruined Stonework) and a threat (Black Ash Patch), each with its own verbs and metadata.

Camp rail tab​

  • mc-camp — 12-mc-camp-compact.png, 13-mc-camp-wide.png — compact and wide — MC's Camp rail tab in compact and wide sizes. Camp is the persistent base-of-operations the MC carries with them; the wide variant exposes the supply / shelter / fire breakdown.

Stats rail tab​

  • mc-stats — 14-mc-stats-compact.png, 15-mc-stats-wide.png, 16-mc-stats-wide-alt.png — compact and wide — MC's Stats rail tab compact and wide, plus a wide view with the Armor stat selected in the navigator. Shows the modifier breakdown panel that drives the SECS resolution pipeline at runtime.

Skills rail tab​

  • mc-skills — 17-mc-skills-compact.png, 18-mc-skills-wide.png, 19-mc-skills-wide-alt.png — compact and wide — MC's Skills rail tab compact and wide, plus a wide view with the Hunting skill selected. Skills are the MC-side practice statistics — wide view shows the skill detail panel with rank, XP, and contributing modifiers.

Gear rail tab​

  • mc-gear — 20-mc-gear-compact.png, 21-mc-gear-wide-weapon.png, 22-mc-gear-wide-armor.png, 23-mc-gear-wide-pack.png — compact and wide — MC's Gear rail tab compact, then wide with each slot (Weapon, Armor, Pack) selected in turn. The wide variant exposes the equipped item card and the swap-candidates list per slot.

Inventory rail tab​

  • mc-inventory — 24-mc-inventory-compact.png, 25-mc-inventory-wide-on-mc.png, 26-mc-inventory-wide-prepared.png, 27-mc-inventory-wide-materials.png — compact and wide — MC's Inventory rail tab compact, then wide variants across the three scopes — items on MC, prepared (ready-to-use), and raw materials. Demonstrates how inventory is partitioned by usage context.

Queue rail tab + bottom HUD​

  • mc-queue — 28-mc-queue-compact.png, 29-mc-queue-wide.png, 30-mc-queue-bottom-hud-wide.png — compact and wide — MC's Queue rail tab compact and wide, plus the same queue expanded via the bottom HUD's Open Queue button. Shows the activity queue surface that the MC ticks through on each game tick.

Objectives rail tab​

  • mc-missions — 31-mc-missions-compact-leads.png, 32-mc-missions-wide-leads.png, 33-mc-missions-wide-missions.png, 34-mc-missions-wide-quests.png, 35-mc-missions-wide-discoveries.png, 36-mc-missions-wide-encounters.png, 37-mc-missions-wide-journal.png — compact and wide — The Objectives rail tab compact (Leads default), then wide across every inner Objectives sub-tab — Leads, Missions, Quests, Discoveries, Encounters, Journal. 'Missions' here refers to the inner sub-tab inside the Objectives panel, not the rail tab itself. The Objectives surface is the player's notebook of what they've learned and what they should do next.

Location rail tab — Travel row​

  • location-travel-row — 38-mc-location-travel-row.png — compact — MC Location compact with a non-current location selected on the map. Shows the Travel row at the top of the Activities section — the affordance that lets the MC walk to that location.

Camp (full) + Outliner + Favourites + Events​

  • overlays-over-full-panel — 91-overlays-over-full-panel.png — full — Showcase composite: Camp expanded to the full panel size with the three floating overlays (Outliner, Favourites, Events) open on top. Demonstrates the z-layering of overlays above the main rail panel.

Every rail tab at full size​

  • mc-modes-full — 82-mc-overview-full.png, 83-mc-location-full.png, 84-mc-stats-full.png, 85-mc-skills-full.png, 86-mc-gear-full.png, 87-mc-inventory-full.png, 88-mc-queue-full.png, 89-mc-missions-full.png, 90-mc-activities-full.png — full — Every MC rail tab (Overview, Location, Stats, Skills, Gear, Inventory, Queue, Objectives, Activities) captured at the full panel size. Demonstrates how each surface scales to its widest layout.

Camp rail tab — Panel size group​

  • size-cycle — 44-size-cycle-compact.png, 45-size-cycle-wide.png, 46-size-cycle-full.png — compact -> wide -> full — The Camp panel walked through all three Panel size states (compact, wide, full) in order. Shows the layout-by-size system that every rail tab inherits.

Map mode dock​

  • map-modes — 47-map-terrain.png, 48-map-elevation.png, 49-map-water.png, 50-map-resources.png, 51-map-threat.png, 52-map-corruption.png, 53-map-settlement.png, 54-map-political.png, 55-map-claims.png, 56-map-admin.png, 57-map-province.png, 58-map-area.png, 59-map-region.png, 60-map-location-cell.png — varied — Every map mode the map canvas can render, walked through in dock order: Surface group (Terrain, Elevation, Water, Resources), Pressure group (Threat, Corruption, Settlement), Realm group (Political, Claims, Administration), and Hierarchy group (Province, Area, Region, Location Cell).

Realm view​

  • realm — 61-realm-locked-state.png — locked — The Realm view in its locked state — Realm is unlockable only after the player founds a Core, and the boot save predates that. Captures the gated-feature affordance shown to the player.

Tooltip layer (multiple sources)​

  • tooltips — 62-tooltip-character-portrait.png, 63-tooltip-skill.png, 65-tooltip-item-compare.png — overlay — Three representative tooltips: the character portrait tooltip from the Outliner, the skill tooltip from the Overview tab, and the item-compare tooltip layered over a primary item tooltip. Demonstrates the multi-layer tooltip stack.

Map mode dock — Surface group flyout​

  • map-mode-flyout-open — 67-map-mode-flyout-surface-open.png, 68-map-mode-flyout-surface-active-elevation.png — overlay — The Surface map-mode group's popover flyout open, first in its default state and then with the Elevation mode active. Shows the grouped-mode picker UX that compresses 14 map modes into 4 dock buttons.

Activities rail tab​

  • mc-actions — 69-mc-actions-compact-here.png, 70-mc-actions-compact-reachable.png, 71-mc-actions-compact-all.png, 72-mc-actions-wide-empty.png, 73-mc-actions-wide-focused.png, 74-mc-actions-wide-schedule.png — compact and wide — The Activities rail tab walked across all three filter states (Here / Nearby / All) compact, then expanded wide showing empty selection, an activity focused, and the Schedule configurator open. Activities is the MC's verb surface — what they can do given the current location and inventory.

Bottom HUD — queue slots​

  • bottom-hud-slot-flows — 75-bottom-hud-empty-slot.png — overlay — An empty queue slot in the bottom HUD with its prescriptive tooltip open, showing how the player is guided to queue an activity when none is currently scheduled.

Top HUD — Situations drawer​

  • situations — 77-top-situations-open.png — overlay — The Situations drawer opened from the top HUD — the player's inbox of game events that need their attention (a discovery, a threat escalation, a finished scheduled activity).

Settings modal​

  • settings — 78-settings-interface-modal.png — modal — The Settings modal opened from the top HUD, showing the Interface tab with theme controls and tooltip behavior toggles. Demonstrates the application-level configuration surface.

Location rail tab — LocationPlanningBoard​

  • mc-location-full — 92-mc-location-full-planning-board.png — full — MC Location rail tab walked to the full panel size, surfacing the LocationPlanningBoard layout — spatial overview, route preview text breakdown, full activity catalog grouped by family, nearby comparison, and queue preview strip. This is the planning surface (distinct from the wide dossier) the player uses to compare locations and stage a route.

LocationContextPanel — quick-actions overlay​

  • location-context-panel — 93-location-context-panel.png — overlay — The LocationContextPanel opened by right-clicking a location on the map. Renders Travel / Survival / Explore / Planning groups in a compact menu near the cursor — the canonical quick-activity affordance over the map.

Map canvas — marker layer at high pixel density​

  • location-marker-close-zoom — 94-location-markers-close-zoom.png — overlay — The map canvas rendered at a deliberately enlarged effective scale so individual location markers and their labels are visible at close range. Shows the marker affordances (current location, hovered, knowledge state) at a level of detail the default fit-to-viewport view never reaches.

Map canvas — route preview overlay​

  • location-route-preview — 95-location-route-preview.png — overlay — The dotted route preview overlay rendered after right-clicking a non-current location. The LocationContextPanel auto-triggers the preview on mount when MC is not at the target, so the player sees the projected path before committing to Travel.

ActionConfirmModal — dangerous-action confirmation​

  • action-confirm-modal — 96-action-confirm-modal.png — modal — The ActionConfirmModal opened with a fixture payload (clearly-fake activity 'Enter the Ruined Sanctum'). Demonstrates the confirmation surface for dangerous, expensive, or irreversible actions — duration, stamina cost, requirement breakdown, and the Cancel / Confirm pair.

FeatureDiscoveryModal — story interstitial with choices​

  • feature-discovery-modal — 97-feature-discovery-modal.png — modal — The FeatureDiscoveryModal opened with a fixture payload (clearly-fake reveal 'A Rune Etched in Stone') and two choice buttons. Demonstrates the client-driven story-interstitial surface used for branching reveals that are not yet routed through the server pending-choice pipeline.

Coverage gaps​

The pipeline does not yet capture the following surfaces. None of these are blockers for the current sbundle drop; each will need a new scenario id + adapter case when its UX stabilises.

  • Realm cluster (7 tabs: Overv / Terr / Settl / Bldg / Court / Pops / Queue). Realm is locked in the boot save (realm scenario captures the locked affordance only), so the tab walk has nothing to render against today. Unblock once a scripted seed reaches the first-settlement stage.
  • CombatDetailModal, PendingChoiceModal, NotificationStack, WorldMessageStack (dedicated capture). No fixture-driven entry point exists yet; __valenarCapture.uxModalStore only exposes ConfirmAction and FeatureDiscovery openers. Add openers + scenarios when these surfaces stabilise.
  • Skills expansion inner tabs (Overview / Exercises / Techniques). Today mc-skills only captures Overview (compact + wide). The Exercises and Techniques inner tabs are not yet walked.
  • Right-click on inventory rows, queue slots, character portraits. No right-click handlers exist on those surfaces in source today; whether to add them is a product decision pending. The map canvas is currently the only right-click owner.
  • mc/activity-detail — Activity Detail inspector panel (hiddenFromRail, opened from queue/missions/activities drillthrough). Requires fixture-driven opener via __valenarCapture bridge. Not yet captured.