Wireframe — Post-walk sync
Wireframe — Post-walk sync
Data source: POST /step/ingest response body.
Mock-mode constraints (ADR-0006):
provisionalis alwaysfalse— no provisional pending banner is shown.- No quarantine toast.
- No App Check failure modal.
- Streak is computed in trust-mode: step bucket accepted → streak advances synchronously.
- Energy is
count * tierMult(simple, immediate, no reconciliation worker).
These are production-only UI states NOT designed here:
- Provisional badge (“validating your walk”)
- Quarantine toast (“we’re checking this step bucket”)
- App Check failure modal
- Reconciliation pending spinner
Trigger conditions
This screen appears when:
- User ends a walk session (returns to app after background step collection).
- App re-foregrounds and detects a pending step sync (offline steps to submit).
- Manual sync triggered from home screen.
In all cases, the app has already fired POST /step/ingest before this screen renders. The screen shows the response.
Primary layout
┌─────────────────────────────────────────────┐│ ← [dismiss / back to Home] │ header — dismiss always available├─────────────────────────────────────────────┤│ ││ ┌─────────────────────────────────────┐ ││ │ │ │ step delta — dominant read│ │ [icon.footprint × 3] │ ││ │ │ ││ │ + 1,240 │ │ --type-display, --color-on-surface│ │ kroków / steps │ │ sub-label --type-body, muted│ │ │ ││ └─────────────────────────────────────┘ ││ ││ ┌─────────────────────────────────────┐ │ energy delta│ │ [icon.footprint] + 1,488 energii │ ││ │ + 1,488 energy │ ││ │ Premia serii T1: ×1.20 │ ││ │ T1 streak bonus: ×1.20 │ ││ └─────────────────────────────────────┘ ││ ││ ┌─────────────────────────────────────┐ │ streak update (if changed)│ │ [icon.streak-flame] │ ││ │ Dzień 7 — Premia T1 odblokowana! │ │ --color-success text, celebration│ │ Day 7 — Tier 1 bonus unlocked! │ │ animation if tier JUST changed│ └─────────────────────────────────────┘ ││ ││ ┌─────────────────────────────────────┐ │ quest progress (if walk advanced a beat)│ │ ◉ Quest 001 — Pierwszy Trakt │ ││ │ ● ● ○ ○ ○ Etap 2 ukończony! │ ││ │ Beat 2 completed! │ ││ └─────────────────────────────────────┘ ││ ││ ┌─────────────────────────────────────┐ │ primary CTA│ │ [PRIMARY CTA] │ ││ └─────────────────────────────────────┘ ││ │└─────────────────────────────────────────────┘Step delta block
The single dominant element on screen. Large numeral. Footprint icon animation (3 footprints fade in sequentially).
┌────────────────────────────────────────────┐│ ││ 👣 👣 👣 (animated on mount) ││ ││ + 1,240 │ --type-display (32px), --color-on-surface│ kroków / steps │ --type-body, --color-on-surface-muted│ ││ Total today: 8,421 │ --type-caption, muted│ Łącznie dziś: 8,421 │└────────────────────────────────────────────┘Number formatting: locale-aware thousands separator. EN: 1,240. PL: 1 240 (space as thousands separator per Polish convention). Mobile platform handles via Intl.NumberFormat.
Copy table — step delta
| Slot | pl | en |
|---|---|---|
| Steps label | kroków | steps |
| Total today label | Łącznie dziś: {n} | Total today: {n} |
| Delta prefix | + | + |
Energy delta block
Shows immediately below step delta. Includes streak multiplier context.
┌────────────────────────────────────────────┐│ [icon.footprint] + 1,488 energii │ --type-h2, --color-region-plenny│ + 1,488 energy │ (second line is the other language)│ ││ 1,240 × 1.20 (premia T1) │ --type-caption, --color-on-surface-muted│ 1,240 × 1.20 (T1 bonus) │└────────────────────────────────────────────┘Formula display: {steps} × {multiplier} ({tier label}). When no streak bonus (T0, multiplier = 1.00), omit the formula and show just +{n} energii / energy.
Energy delta: zero-bonus state (T0)
┌────────────────────────────────────────────┐│ [icon.footprint] + 1,240 energii ││ + 1,240 energy │└────────────────────────────────────────────┘Copy table — energy delta
| Slot | pl | en |
|---|---|---|
| Energy label | energii | energy |
| T0 label | (omit formula) | (omit formula) |
| T1 bonus label | premia T1 ×1.20 | T1 bonus ×1.20 |
| T2 bonus label | premia T2 ×1.50 | T2 bonus ×1.50 |
| Formula | {n} × {mult} ({label}) | {n} × {mult} ({label}) |
Streak update notification
Shown when the walk advances or confirms the current streak day. Three sub-states:
State A — Streak maintained (existing day, no tier change)
┌────────────────────────────────────────────┐│ [icon.streak-flame — gold] ││ Dzień 14 — Seria trwa! │ --type-h2│ Day 14 — Streak continues! │└────────────────────────────────────────────┘State B — New tier unlocked (streak just hit 7 or 30 days)
┌────────────────────────────────────────────┐│ [icon.streak-flame — animated, large] ││ ││ Dzień 7 — Premia T1 odblokowana! │ --type-h2, --color-success│ Day 7 — Tier 1 bonus unlocked! ││ ││ Twoje kroki są teraz o 20% wydajniejsze │ --type-body│ Your steps are now 20% more efficient ││ │└────────────────────────────────────────────┘Haptic: heavy impact + celebration sound on new tier unlock.
State C — Streak started (first attested day ever)
┌────────────────────────────────────────────┐│ [icon.streak-flame — white, starting] ││ Dzień 1 — Seria rozpoczęta! ││ Day 1 — Streak started! │└────────────────────────────────────────────┘Copy table — streak update
| Slot | pl | en |
|---|---|---|
| Streak maintained | Dzień {n} — Seria trwa! | Day {n} — Streak continues! |
| Tier 1 unlocked | Dzień 7 — Premia T1 odblokowana! | Day 7 — Tier 1 bonus unlocked! |
| Tier 1 detail | Twoje kroki są teraz o 20% wydajniejsze | Your steps are now 20% more efficient |
| Tier 2 unlocked | Dzień 30 — Premia T2 odblokowana! | Day 30 — Tier 2 bonus unlocked! |
| Tier 2 detail | Twoje kroki są teraz o 50% wydajniejsze | Your steps are now 50% more efficient |
| Streak started | Dzień 1 — Seria rozpoczęta! | Day 1 — Streak started! |
Quest progress block
Shown only if the walk advanced a quest beat. Quest progress is inferred from the home screen state before/after sync — not directly from the /step/ingest response. The mobile client compares activeQuests[].currentStepId before and after the sync round-trip.
State — Beat advanced
┌────────────────────────────────────────────┐│ ◉ Quest 001 — Pierwszy Trakt ││ Quest 001 — The First Road ││ ││ ● ● ○ ○ ○ Etap 2 z 5 ukończony! ││ ● ● ○ ○ ○ Beat 2 of 5 completed! ││ ││ Opuść Plenny przez Bramę Południową ││ Leave Plenny through the South Gate ││ [checkmark animation] │└────────────────────────────────────────────┘State — Quest completed (all 5 beats done)
┌────────────────────────────────────────────┐│ ✦ Quest 001 COMPLETED │ --color-success, large│ Quest 001 UKOŃCZONY ││ ││ ┌──────────────────────────────────────┐ │ D-016 grant callout (always 1pt)│ │ +1 Tree Point banked. │ │ EN chrome per D-011│ │ Linijka oddana do składu. │ │ PL prose per D-013 register│ │ Spis przyjął. │ │ --color-region-plenny text│ └──────────────────────────────────────┘ │ --color-surface-variant bg│ ││ [icon.keystone-lock → unlocked] ││ Krok Niezachwiany odblokowany! ││ Unshaken Step unlocked! ││ ││ ┌──────────────────────────────────────┐ │ keystone grant callout (D-016)│ │ Keystone unlocked. +1 Tree Point │ │ EN chrome per D-011│ │ banked. │ │ (keystone banner shown alongside│ │ Kamień węgielny postawiony. │ │ quest-completion banner when│ │ Spis dopisuje rozdział. │ │ keystone is the quest reward)│ └──────────────────────────────────────┘ │└────────────────────────────────────────────┘D-016 note: The grant is always flat +1 tree point per quest completion and +1 tree point per keystone unlock. The pre-D-016 wording +4 tree points was a placeholder that predates the ratified math. All reward references must use +1 Tree Point banked. (EN) or Linijka oddana do składu. Spis przyjął. (PL). See wiki/src/content/docs/tree/progression.md §Banner copy on grants.
State — No quest progress (walk did not advance any beat)
Quest progress block is hidden. Do not show a “no progress” message — it would feel punitive. The step delta and energy delta are celebration enough.
Copy table — quest progress
| Slot | pl | en |
|---|---|---|
| Beat completed | Etap {n} z {total} ukończony! | Beat {n} of {total} completed! |
| Quest completed | Quest {id} UKOŃCZONY | Quest {id} COMPLETED |
| Tree point grant (D-016) | „Linijka oddana do składu. Spis przyjął." | "+1 Tree Point banked." |
| Keystone + tree point grant (D-016) | „Kamień węgielny postawiony. Spis dopisuje rozdział." | "Keystone unlocked. +1 Tree Point banked." |
| Keystone unlocked label | Krok Niezachwiany odblokowany! | Unshaken Step unlocked! |
Removed (pre-D-016): +{n} punkty drzewa / +{n} tree points as a variable-count reward string. D-016 specifies flat 1pt; the copy above is canonical. If a future D-decision introduces variable point grants, this copy table must be revisited.
Tree point grant callout — standalone spec (D-016)
This callout appears whenever a tree point is granted post-walk. It is a distinct UI element from the quest-complete block — it can appear:
- Inside the quest-complete block (quest completion grants the point).
- Standalone after a keystone allocation confirmation (rare on post-walk sync — more commonly on the tree screen).
Layout
┌─────────────────────────────────────────────┐│ +1 Tree Point banked. │ --type-body, --color-region-plenny│ ││ Linijka oddana do składu. │ --type-caption, --color-on-surface-muted│ Spis przyjął. │ (PL prose, italic in Literata if available)└─────────────────────────────────────────────┘Background: --color-surface-variant. Corner radius: 8dp. Horizontal padding: 12dp. Vertical padding: 8dp.
The PL prose line is always shown below the EN chrome line. This is the D-011 convention for UI chrome surfaces: EN is the system label, PL is the diegetic register. The two lines coexist; the player reads both.
Haptic: medium impact on appearance. No animation — the callout fades in with a 150ms opacity transition. The parchment background and Plenny-gold text provide visual weight without motion.
Screen reader
Announce: +1 Tree Point banked. Linijka oddana do składu, Spis przyjął. (full bilingual read). aria-live="polite" region — it is a result notification, not a critical alert.
Continue button
Primary CTA, bottom-anchored, full width.
┌─────────────────────────────────────────────┐│ Kontynuuj / Continue │ --type-body, 56dp height└─────────────────────────────────────────────┘Tapping navigates to home screen. If quest was completed or keystone unlocked, home screen refreshes via GET /walker/profile.
Copy table — CTA
| Slot | pl | en |
|---|---|---|
| Primary CTA | Kontynuuj | Continue |
States matrix
| Condition | Step delta | Energy delta | Streak block | Quest block | Grant callout | Notes |
|---|---|---|---|---|---|---|
| Normal walk, no tier change, no beat | Yes | Yes | Maintained | Hidden | Hidden | Most common |
| First attested day | Yes | Yes | Streak started | Beat 1 advance possible | Hidden | Day 1 |
| Tier 1 unlock (day 7) | Yes | Yes (with new multiplier) | Tier unlock banner | If beat advanced | If quest completed | Haptic: heavy |
| Tier 2 unlock (day 30) | Yes | Yes (×1.50) | Tier unlock banner | If beat advanced | If quest completed | Haptic: heavy |
| Quest beat advanced (not final) | Yes | Yes | Maintained or new | Beat progress | Hidden | No point granted yet |
| Quest 001 completed (all 5 beats) | Yes | Yes | Maintained | Quest completed + keystone unlocked | Yes — “+1 Tree Point banked.” | D-016 flat grant; keystone also grants +1 |
Accessibility — Post-walk sync
Walking-specific baseline answers:
| Check | Result |
|---|---|
| One-handed while walking | PASS — this screen appears at the END of a walk (returning to app). The user is typically stationary or slowing down. All elements stacked vertically, CTA at bottom. |
| Glance ≤ 2 seconds | PASS — step count delta (+1,240) is the dominant read, full-width, largest type on screen. Energy and streak are secondary and readable in the same glance. |
| Tap target ≥ 48dp | PASS — only CTA is interactive. 56dp height, full width. |
| Color contrast ≥ 4.5:1 body | PASS — all text on --color-surface uses --color-on-surface which clears contrast requirements. Success banners use --color-success at --type-h2 (large text, 3:1 requirement met at 5.6:1). |
| Font scale 200% | PASS — step delta number is large (--type-display, 32px → effectively 64px at 200%). Layout becomes two-column or vertically stacked. CTA wraps if needed. |
| Audio/haptic alternatives | PASS — step count appearance: light impact. Tier unlock: heavy impact + chime. Quest complete: success haptic + chime. All celebrations have sound + haptic — neither alone. |
Screen reader traversal order:
- Header dismiss button: “Back to home”
- Step delta: “+1,240 steps — 1,240 new steps this walk, 8,421 total today”
- Energy delta: “+1,488 energy — 1,240 steps × 1.20 Tier 1 bonus”
- Streak update: “Day 14 — streak continues” OR tier unlock announcement
- Quest progress (if present): “Quest 001 beat 2 of 5 completed — Leave Plenny through the South Gate”
- Tree point grant callout (if present, D-016):
+1 Tree Point banked. Linijka oddana do składu, Spis przyjął.—aria-live="polite"region. - Keystone unlock (if present): “Unshaken Step unlocked!”
- Continue button: “Continue — return to home”