feat(m1): PR3 T3.0 — shell UI, action kinds, story tab #16

2026-06-11T22:43:34-05:00

ginnoir commented

2026-06-11 22:43:34 -05:00

Summary

Replaces the PR2 single-column overlay UX with the M1 three-region app shell and the behavior-kind action model (T3.0 of PR3).

App shell — left nav rail (Play / Story / Settings / About), center active panel, Play-only right rail (resources, inventory placeholder, optional collapsible event log). No modal overlay; store.activePanel drives the center; unread story beats raise a nav badge.
Action kinds — content actions gain kind (instant/loop/timed/story/context) + group, validated by Zod (kind-specific invariants). Pure-engine performAction dispatches by kind; instant applies immediately, timed enqueues, loop toggles enabledLoopActionIds (idle runner, never offline), story applies the linked choice.
Play columns — actions projected into columns ordered instant→loop→timed→story→context with collapsible, persisted theme groups. Story forks happen only via Story-kind actions.
Story tab — read-only 60/40 split: branching StoryTree (seen emphasized, unseen dimmed) + scrollable StoryProseLog with no choice buttons.
Save — enabledLoopActionIds round-trips; no save-version bump (fields default safely in v1).

Notable fix

Restored boot progression: the boot-intro Continue gate keyed off tree.length === 0, which is never true (the tree is built from content topology), so the player could never advance boot_intro → fork_choice and the fork actions never unlocked. Now gated by a real atBootIntro signal derived from the boot trigger, with a regression test.

Verification

pnpm typecheck   # clean
pnpm lint        # 0 warnings
pnpm test        # 152 passed (18 files)
pnpm build       # clean (PWA + SW)

Engine coverage well above the 80% floor (game.ts 90.8% / story.ts 95.8% / tickLoop.ts 95.2% / num.ts 94.4% stmts). Added guard tests for offline-loop safety and a hardened engine purity test.

Test plan

Boot → Story tab → Continue advances to the fork; fork actions appear in the Play Story column; picking one hides the sibling.
Timed actions queue; loop rest toggles and runs only when idle (and only live, not offline).
Right rail shows resources + inventory placeholder; event log collapsible and hideable via Settings.
Reload preserves state, including enabled loops.

Out of scope (later)

Automation queue + shareable recipes (T3.1), prestige (T3.2), mobile column stacking & save v2 migration (PR4), real item inventory.

Parent spec: docs/superpowers/specs/2026-06-11-m1-pr3-shell-ui-design.md · Plan: docs/superpowers/plans/2026-06-11-m1-pr3-t30-shell-ui.md

## Summary Replaces the PR2 single-column overlay UX with the M1 three-region app shell and the behavior-kind action model (T3.0 of PR3). - **App shell** — left nav rail (Play / Story / Settings / About), center active panel, Play-only right rail (resources, inventory placeholder, optional collapsible event log). No modal overlay; `store.activePanel` drives the center; unread story beats raise a nav badge. - **Action kinds** — content actions gain `kind` (`instant`/`loop`/`timed`/`story`/`context`) + `group`, validated by Zod (kind-specific invariants). Pure-engine `performAction` dispatches by kind; `instant` applies immediately, `timed` enqueues, `loop` toggles `enabledLoopActionIds` (idle runner, **never offline**), `story` applies the linked choice. - **Play columns** — actions projected into columns ordered `instant→loop→timed→story→context` with collapsible, persisted theme groups. Story forks happen **only** via Story-kind actions. - **Story tab** — read-only 60/40 split: branching `StoryTree` (seen emphasized, unseen dimmed) + scrollable `StoryProseLog` with no choice buttons. - **Save** — `enabledLoopActionIds` round-trips; no save-version bump (fields default safely in v1). ## Notable fix Restored boot progression: the boot-intro Continue gate keyed off `tree.length === 0`, which is never true (the tree is built from content topology), so the player could never advance `boot_intro → fork_choice` and the fork actions never unlocked. Now gated by a real `atBootIntro` signal derived from the boot trigger, with a regression test. ## Verification ``` pnpm typecheck # clean pnpm lint # 0 warnings pnpm test # 152 passed (18 files) pnpm build # clean (PWA + SW) ``` Engine coverage well above the 80% floor (game.ts 90.8% / story.ts 95.8% / tickLoop.ts 95.2% / num.ts 94.4% stmts). Added guard tests for offline-loop safety and a hardened engine purity test. ## Test plan - [ ] Boot → Story tab → Continue advances to the fork; fork actions appear in the Play **Story** column; picking one hides the sibling. - [ ] Timed actions queue; loop `rest` toggles and runs only when idle (and only live, not offline). - [ ] Right rail shows resources + inventory placeholder; event log collapsible and hideable via Settings. - [ ] Reload preserves state, including enabled loops. ## Out of scope (later) Automation queue + shareable recipes (T3.1), prestige (T3.2), mobile column stacking & save v2 migration (PR4), real item inventory. Parent spec: `docs/superpowers/specs/2026-06-11-m1-pr3-shell-ui-design.md` · Plan: `docs/superpowers/plans/2026-06-11-m1-pr3-t30-shell-ui.md`

ginnoir added 26 commits 2026-06-11 22:43:35 -05:00

feat(content): add action kind and group schema c48e53cc7b

fix(content): guard optional durationMs and cover loop validation c1b38e36aa

feat(content): migrate stub actions to kind/group model b54805637c

feat(engine): add instant action execution b3940774c4

Implements executeInstant, which applies an instant action's costs and
yields immediately with no queue slot and no duration requirement.

feat(engine): execute story actions via storyChoiceId 8d9484171f

feat(engine): loop idle runner with enabledLoopActionIds 0de61d3e41

feat(engine): add performAction dispatcher by kind 163f710f4c

feat(state): project actions into columns and story tree 73d836fe96

feat(state): nav panel store and expanded prefs 9b2793b264

refactor(state): fix code quality findings for nav panel store and prefs 09e2d06b87

refactor(state): address review recommendations for store and prefs adf730702d

feat(state): runtime performAction and nav story signals 239b2506ec

refactor(state): fix code quality findings for runtime and story log b29b17c6cb

refactor(state): address HMR and defensive slicing recommendations for runtime ed9607e9e8

feat(ui): app shell with nav rail ee79872d4d

refactor(ui): resolve mobile layout and HMR findings for app shell and nav rail 232b84299c

refactor: clean up unused panel overlay state and methods 08d186f42e

feat(ui): action columns with collapsible groups bbded8a266

refactor(ui): improve action card accessibility, flex layout and scroll styling 75273a76de

feat(ui): story tab with tree and prose log e9f2514308

refactor(ui): finalize review fixes for action cards and view model 91348ed42f

- Guard ActionCard click-outside listener behind open state
- Add aria-expanded to ActionGroup collapse toggle
- Use optional chaining and drop non-null assertions in column projection

fix(ui): restore boot-intro continue and fix story tree a11y 880abe5888

Finding 1 (critical): atBootIntro was derived from tree.length === 0 in
StoryView.tsx, but buildStoryTree always returns all topology-root nodes,
so tree.length is always > 0 and the Continue button never rendered.
Fix: add atBootIntro: boolean to StoryView (viewModel), computed by
finding the boot-trigger node id without hardcoding the literal string,
then comparing to the current node. StoryView.tsx reads it from the store.
Also add a viewModel test covering both true and false cases.

Finding 2: onSelect in StoryView.tsx called useGameStore.getState()
directly, bypassing the runtime command layer. Fix: add
GameRuntime.selectStoryNode(id) and wire onSelect through gameRuntime.

Finding 3: aria-pressed on story tree nodes wrongly signals toggle-button
semantics. Fix: replace with aria-current={isSelected ? 'true' : undefined}.

Optional: hoist h-[calc(100dvh-6rem)] to SHELL_HEIGHT const in StoryView.tsx.

feat(ui): right rail inventory placeholder and optional event log 10a43729c5

- RightRail: add Inventory section (placeholder "Items coming soon") between
  Resources and Event Log, matching the existing heading style
- RightRail: gate Event Log section on prefs.showEventLog; add local-state
  collapse toggle with aria-expanded and chevron indicator
- SettingsPanel: add "Show event log" checkbox row bound to prefs.showEventLog
  via setPrefs, matching existing card styling
- PlayPanel: gate mobile EventLog behind prefs.showEventLog for consistency
  with desktop; mobile ResourceBar unchanged

refactor(ui): link event-log disclosure with aria-controls 4d508ae77c

Add aria-controls to the right-rail event-log collapse toggle pointing at
the log region, and title-case the settings label for consistency.

docs: document PR3 shell UI and action kinds 977dd8e878

test(engine): guard offline-loop safety and harden purity test

CI / verify (push) Successful in 1m13s

Details

CI / verify (pull_request) Successful in 58s

Details

f7ad9e7ecd

- save.test.ts: add regression test proving loop actions do NOT start
  or yield during offline catch-up (applyOfflineProgress replays
  tickGame directly; maybeStartLoopAction is never called, so an
  enabled loop with no active action stays idle and yields 0).

- purity.test.ts: extend FORBIDDEN list to catch environment APIs
  (Date.now(), localStorage., indexedDB., idb-keyval import, document.,
  window., requestAnimationFrame()) in addition to the existing
  React/react-dom/zustand import guards. Patterns are scoped to call
  sites and member-access forms so prose comments (e.g. save.ts's
  "Date scheduling" doc comment) do not false-positive. lz-string is
  intentionally omitted — it is a pure compression library.

- NavRail.tsx: add sr-only "New story" span alongside the aria-hidden
  pulse dot so screen readers can perceive the unread-story badge.

ginnoir merged commit 4b7adf718d into main

2026-06-11 22:52:29 -05:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: ginnoir/idlegame#16