feat: implement issue #2302 phases 1-3 easter egg mode#2303
feat: implement issue #2302 phases 1-3 easter egg mode#2303github-actions[bot] wants to merge 23 commits into
Conversation
…er-egg layer with persisted mode state,\nworld map metadata, quest progression, narrative rewards, docs updates,\nand UI integrations in settings/sidebar/app overlay.\n\nValidation:\n- make lint\n- cd peek && npm run test:unit -- tests/unit/easterEggProgress.test.ts tests/unit/useEasterEggStore.test.ts tests/unit/storeResetters.test.ts tests/component/SettingsPage.test.tsx tests/component/AppSidebar.test.tsx\n- make build\n\nCo-authored-by: Copilot <[email protected]>
|
|
/ai I get the following when activating the Easter mode Something went wrong Minified React error #185; visit https://reactjs.org/docs/error-decoder.html?invariant=185 for the full message or use the non-minified dev environment for full errors and additional helpful warnings. |
Use a shallow selector in IsometricOverlay to avoid useSyncExternalStore snapshot churn, which caused maximum update depth errors when Easter Egg mode was enabled. Also make progression actions idempotent to avoid no-op store updates and add regression tests. Co-authored-by: Copilot <[email protected]>
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
📝 WalkthroughWalkthroughAdds an opt-in Easter Egg Mode: a persisted Zustand store ( Possibly related PRs
🚥 Pre-merge checks | ✅ 2✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
- Gate page-visit tracking on `connected` state to prevent false completions - Wrap IsometricOverlay in ErrorBoundary to isolate render failures - Fix dual-selected menu items in settings menu (mutually exclusive) - Move easter-egg docs to alphabetical position in sections array - Fix invalid `success.50` palette key → use `success.main` with alpha - Simplify pendingReward derivation (remove redundant null check) - Make buildQuestProgress order-independent with two-pass approach - Improve test to cover runtime activation path, not just cold-start Co-Authored-By: Claude Opus 4.6 <[email protected]>
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
✅ UI Smoke Test Review —
|
| Total | Passed | Failed | Flaky | Skipped |
|---|---|---|---|---|
| 11 | 11 | 0 | 0 | 0 |
Individual test results
| Status | Test | Duration |
|---|---|---|
| ✅ | onboarding user reaches the connect entrypoint from the welcome screen | 589ms |
| ✅ | add data entrypoint exposes the technology picker and step 2 | 1596ms |
| ✅ | metrics user connects, picks a metric, and gets a line chart-ready result | 1883ms |
| ✅ | traces user opens a trace and pivots from service map context into Query Lab | 2248ms |
| ✅ | security-focused user validates auth tab switching before submitting credentials | 653ms |
| ✅ | ops user confirms connection guardrails and can reset back to the landing state | 2454ms |
| ✅ | query lab preserves query text and results after navigating to Console and back | 2335ms |
| ✅ | logs explorer route is available and runs a logs query | 1814ms |
| ✅ | logs landing page dimension drill-down opens query lab with selected filter | 1778ms |
| ✅ | task manager, ILM, and templates pages render with headings | 1581ms |
| ✅ | pages have no axe accessibility violations | 15292ms |
📸 Screenshot Preflight
Result: ✅ Clean — no errors detected
No console errors, page errors, or UI alerts detected.
💡 Recommendations
- ✨ All smoke tests pass and no UI errors detected. Ready for review.
📎 Full diagnostics and screenshots: workflow run
Co-authored-by: Copilot <[email protected]>
This comment has been minimized.
This comment has been minimized.
|
Addressed all currently unresolved review threads with surgical fixes and pushed commit
Validation run
Notes:
What is this? | From workflow: Address PR Review Feedback Give us feedback! React with 🚀 if perfect, 👍 if helpful, 👎 if not. |
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
- split stable store actions out of useShallow selection in overlay - add overlay collapse toggle and responsive mobile positioning - export STORE_NAME and use it in unit test expectations Co-authored-by: Copilot <[email protected]>
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
- rank static routes ahead of parameterized routes in easter egg page matching - expose overlay collapse state and objective-specific button labels for a11y - ensure reset clears persisted easter egg store key - add regression tests for route matching and persistence reset Co-authored-by: Copilot <[email protected]>
|
Addressed all currently unresolved review threads with a focused follow-up and pushed commit Implemented fixes:
No inline reply-only threads were needed; all unresolved items were addressed directly and resolved. Validation
All executed test targets passed. What is this? | From workflow: Address PR Review Feedback Give us feedback! React with 🚀 if perfect, 👍 if helpful, 👎 if not. |
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@peek/tests/unit/useEasterEggStore.test.ts`:
- Around line 5-77: Add a component-level regression test in the same test file
that mounts the routed app, toggles the easter-egg mode via the store, and
asserts the UI overlay mounts without crashing: use
useEasterEggStore.getState().setEasterEggMode(true) (and reset with
resetEasterEggState() in beforeEach/afterEach), render the app component used by
your app's routing (the routed app or <App /> used elsewhere in tests), then
assert the easter egg overlay element is present (query for the overlay DOM node
or component that appears when mode is enabled); ensure the test cleans up
localStorage/STORE_NAME as other tests do so it doesn't leak state.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository YAML (base), Organization UI (inherited)
Review profile: ASSERTIVE
Plan: Pro
Run ID: 2473b643-fd2b-4016-8ee1-9d2754d2cc8c
📒 Files selected for processing (5)
peek/src/features/easterEgg/IsometricOverlay.tsxpeek/src/features/easterEgg/routeMatching.tspeek/src/store/useEasterEggStore.tspeek/tests/unit/routeMatching.test.tspeek/tests/unit/useEasterEggStore.test.ts
Replace the quest overlay with a full-screen isometric map where the wizard character walks to locations representing app pages. Each page is a themed building with tooltips and visited indicators. Add a FAB button (bottom-right) to open the map when easter egg mode is active. Co-Authored-By: Claude Opus 4.6 <[email protected]>
Co-authored-by: Copilot <[email protected]>
|
Addressed review feedback with a surgical test update.
Validation
What is this? | From workflow: Address PR Review Feedback Give us feedback! React with 🚀 if perfect, 👍 if helpful, 👎 if not. |
TL;DR
Remediation
Investigation detailsRoot CauseThe failing step is Evidence
Validation
Follow-up
What is this? | From workflow: PR Actions Detective Give us feedback! React with 🚀 if perfect, 👍 if helpful, 👎 if not. |
Add a close button to the isometric map header so users can dismiss the overlay without navigating. Fix stale aria-label in the store test that still referenced the removed IsometricOverlay component. Co-Authored-By: Claude Opus 4.6 <[email protected]>
There was a problem hiding this comment.
Request changes.
peek/src/features/easterEgg/IsometricMap.tsx (around line 170) schedules delayed navigation with setTimeout but never cancels it when the map is closed/unmounted. Repro: click a destination, then close the map immediately; navigation still fires ~1s later. Please track/clear the timeout and guard the callback.
peek/src/features/easterEgg/quests.ts introduces multiple confirmAction objectives (e.g. line 26), but there is no runtime caller of completeObjective in app code (only store/tests). This makes those objectives impossible to complete in normal UI flow, blocking quest progression. Please wire a user action path to completeObjective and cover it with a component/integration test.
What is this? | From workflow: PR Review
Give us feedback! React with 🚀 if perfect, 👍 if helpful, 👎 if not.
…celebrations Redesign the easter egg as a fun onboarding experience: - Add Quest Journal panel (left side of map) showing active quest with objective checklist, progress bars, lock/complete indicators, and earned reward badges - Highlight quest-target buildings with pulse animation and warning- colored labels so users know where to go next - Show reward celebration overlay with pop animation when a quest completes (Scout Badge, Signal Keeper, Navigator Sigil) - Add quest progress badge on the map FAB button (e.g. "1/3") - Auto-open the map when easter egg mode is first enabled - Simplify all objectives to visitPage (drop confirmAction) so progress happens naturally as users explore the app - Rewrite quest narratives to teach observability concepts: dashboards, queries, cluster health, logs, metrics, hosts, traces, services, and the dev console Co-Authored-By: Claude Opus 4.6 <[email protected]>
There was a problem hiding this comment.
Requesting changes for one confirmed behavior bug.
In peek/src/features/easterEgg/IsometricMap.tsx (around lines 564–568 and 615), map travel uses setTimeout to navigate after the walk animation, but closing the map does not cancel that pending timer. Repro: click a destination, immediately click Close map before animation completes; the app still navigates anyway. Please cancel the pending timeout on close/unmount (and ideally guard in the callback) so closing the map truly aborts travel.
What is this? | From workflow: PR Review
Give us feedback! React with 🚀 if perfect, 👍 if helpful, 👎 if not.
Extract MapBuilding, QuestJournal, and RewardCelebration into their own files to improve readability and maintainability. IsometricMap.tsx goes from ~730 lines to ~320 lines. Co-Authored-By: Claude Opus 4.6 <[email protected]>
# Conflicts: # peek/src/components/AppSidebar.tsx
| setWalking(true); | ||
| setCharacterPosition({ x: location.mapX, y: location.mapY }); | ||
|
|
||
| setTimeout(() => { |
There was a problem hiding this comment.
Clicking a location schedules a delayed navigation, but closing the map does not cancel that pending timer. Repro: click a building, then immediately click Close map before the walk delay completes; the app still navigates after the map is dismissed.
This creates surprising state transitions and can pull users away from their current view.
Consider storing the timeout handle in a ref and clearing it when the map closes/unmounts (and treating close as cancel).
There was a problem hiding this comment.
Requesting changes due to two user-facing issues:
-
peek/src/features/easterEgg/QuestJournal.tsx(line 80): onxs, the journal iswidth: 100%with higher z-index than the map, while the map area inIsometricMapalso starts atleft: 0forxs. This fully covers the map and blocks location interaction on small screens. -
peek/src/features/easterEgg/IsometricMap.tsx(around lines 127-140): reward detection stores only onependingRewardwhile advancingprevProgressRefimmediately. If multiple completions are processed before reward acknowledgement, earlier reward moments can be overwritten and never surfaced.
Please address these before merge.
What is this? | From workflow: PR Review
Give us feedback! React with 🚀 if perfect, 👍 if helpful, 👎 if not.
| .filter((objective) => isObjectiveComplete(objective, state)) | ||
| .map((objective) => objective.id); | ||
| const complete = | ||
| quest.objectives.length > 0 && completedObjectiveIds.length === quest.objectives.length; |
There was a problem hiding this comment.
complete is computed without considering unlocked, so a locked quest can be counted as complete before prerequisites are met.
Concrete repro from current code:
buildQuestProgress(EASTER_EGG_QUESTS, { visitedPages: ['traces','services','console'], completedObjectiveIds: [] })
returns quest 3 as { unlocked: false, complete: true }.
That leaks into user-facing state (GoToMapFab counts p.complete) and can trigger out-of-order reward moments in IsometricMap (cur.complete && !old.complete) before the prerequisite quest is finished.
Please gate completion on unlock (for example, const complete = unlocked && ...) or otherwise prevent locked quests from being treated as complete/rewardable.
1 participant
Summary
This PR implements phases 1–3 requested in issue #2302 as an opt-in easter egg layer over existing observability pages (no route rewrite, off by default).
Phase 1 — foundation
easterEggModestate via new store:peek/src/store/useEasterEggStore.tspeek/src/features/easterEgg/worldMap.tspeek/src/features/easterEgg/routeMatching.tspeek/src/features/easterEgg/types.tspeek/src/features/easterEgg/IsometricMap.tsxpeek/src/features/easterEgg/GoToMapFab.tsxpeek/src/App.tsxPhase 2 — progression + discoverability
peek/src/features/easterEgg/quests.tspeek/src/features/easterEgg/progress.tspeek/src/components/AppSidebar.tsxpeek/src/components/SettingsPage.tsxPhase 3 — narrative polish + docs
peek/src/features/easterEgg/content.tspeek/src/docs/easter-egg-mode.mdpeek/src/docs/sections.tspeek/src/components/DocsNavSidebar.tsxpeek/src/components/DocsPage.tsxTests
Added/updated tests for new behavior:
peek/tests/unit/easterEggProgress.test.tspeek/tests/unit/useEasterEggStore.test.tspeek/tests/unit/storeResetters.test.tspeek/tests/component/SettingsPage.test.tsxpeek/tests/component/AppSidebar.test.tsxValidation run
make lintcd peek && npm run test:unit -- tests/unit/easterEggProgress.test.ts tests/unit/useEasterEggStore.test.ts tests/unit/storeResetters.test.ts tests/component/SettingsPage.test.tsx tests/component/AppSidebar.test.tsxmake buildAll passed.
The body of this PR is automatically managed by the workflow runtime.
The body of this PR is automatically managed by the Update PR Body workflow.