Pages UX: story-first showcase, ready-to-explore runs, and collapsible milestone chapters

Open
#863 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
5/5
Estimated time
Over a week
Newbie friendliness
25/100
Issue type
Feature
Clarity
Clearly specified
Activity status
Active
Tech stack
github, typescript

Research direction

Start with docs/index.html and the checked-in docs/m4-preview.json, docs/m3-preview.json, and docs/run.csv artifacts to trace the current Pages experience and available saved runs. Review the existing M3/M4 rendering and validation contracts before shaping the new explorer and milestone disclosures. Done means the acceptance criteria are met, including responsive browser regressions for selection, disclosure, artifact errors, and the absence of fabricated samples.

Written by the indexing model from the issue text.

Description

area:visualization priority:high status:in-progress type:feature

Goal

Make the current static GitHub Pages experience welcoming and legible instead of an unstructured wall of charts. Let a new visitor explore meaningful existing deterministic outcomes immediately, with M0–M4 individually expandable as milestone chapters.

Evidence

Owner feedback (2026-10-26): the Pages UI has become unreadable compared with the legacy visualization; each block should convey a useful idea and each milestone should be behind a disclosure. Source docs/index.html currently leads with all M4 small multiples and then the full M3 dashboard; M0–M2 and the legacy viewer share one historical disclosure. Real docs/m4-preview.json, docs/m3-preview.json and docs/run.csv already exist.

Scope

  • A coherent, responsive editorial hero and concise scenario explorer on initial load using real, checked-in observation artifacts.
  • Show M4 closed economy and M3 market as interactive saved-run timelines; expose the legacy four-city replay as legacy, not the canonical runtime.
  • Meaningful headline data, descriptions of what is measured, correct units and explicit separation of measured changes from causal explanation.
  • One accessible, normally collapsed native details per milestone M0–M4, and one for the legacy experience. Provide direct buttons to expand and navigate.
  • Demote bulk plots and exact numeric tables to user-requested detail; retain existing validation, artifact safety and canonical read-only boundary.
  • Add responsive/browser regressions for selection, disclosure, artifact behavior and no fake samples.

Non-goals

Not the future M11 Worker runner, new economic engine, new invented scenarios, server APIs, fabricated events/causal attribution, major changes to model equations, rewriting the legacy C# oracle.

Acceptance criteria

  1. Loading Pages without interacting shows an inviting, nonempty curated example with actual checked-in simulation values and a working tick scrubber.
  2. Switching from M4 to M3 changes all selected-run summary figures consistently; invalid/unavailable artifacts show honest errors.
  3. Each M0–M4 and legacy has its own collapsed milestone disclosure. Deep-link/CTA opens the correct one; existing M3 and M4 render semantics remain verifiable.
  4. Each visible top-level block explains one question; exact-value tables are not initially expanded, and no incompatible units share a plot.
  5. Keyboard/mobile/reduced-motion layouts work without horizontal overflow. All asset paths remain GitHub Pages compatible.

Verification

Review the diff and published head; Vitest browser checks for Pages and existing M3/M4 contracts; TypeScript/build, retained .NET and Policy Guard CI; independent SLOPSTER exact-head QA prior to any later merge.

Dominant language
TypeScript
Stars
4
Forks
0
Avg merge
7h 21m
Merged PRs (30d)
144

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from drevendev/trade_simulation

All issues in drevendev/trade_simulation

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.