[Sidnioulz]

What I did

When working on tree 2.0, my agent stumbled upon an instability in the checklist widget DOM. We are apparently refiring state syncs with mutable data even when the store state has not effectively changed.

This PR adds an equality check to state changes within the underlying store to keep the DOM more stable by not replacing DOM rows with themselves (which triggers Emotion changes).

The PR also fixes a CLS bug where an item that is checked off the list keeps taking 32px of height whilst being animated out, resulting in a temporary state where the checklist shows 4 rows and grows in height.

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

• stories
• unit tests
• integration tests
• end-to-end tests

Manual testing

1. Run the internal UI: cd code && yarn storybook:ui
2. Look at the beautiful onboarding checklist; isn't it a cutie?
3. Open your DevTools and inspect the checklist rows
4. Do whatever task necessary to complete one of the 3 visible steps in your checklist
5. Look out in the DevTools for DOM mutations, they should be minimal
6. Look out in the UI for CLS, you should see none; the completed row should be replaced cleanly in-place

Documentation

• Add or update documentation reflecting your changes
• If you are deprecating/removing a feature, make sure to update
  MIGRATION.MD

Checklist for Maintainers

• When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli-storybook/src/sandbox-templates.ts

• Declare whether manual QA will be needed for this PR during the next release, through qa:needed or qa:skip

• Make sure this PR contains one of the labels below:

  Available labels

  • bug: Internal changes that fixes incorrect behavior.
  • maintenance: User-facing maintenance tasks.
  • dependencies: Upgrading (sometimes downgrading) dependencies.
  • build: Internal-facing build tooling & test updates. Will not show up in release changelog.
  • cleanup: Minor cleanup style change. Will not show up in release changelog.
  • documentation: Documentation only changes. Will not show up in release changelog.
  • feature request: Introducing a new feature.
  • BREAKING CHANGE: Changes that break compatibility in some way with current major version.
  • other: Changes that don't fit in the above categories.

🤖 Generated with Claude Code

https://claude.ai/code/session_014kbAkZeM9HcHMvLjPzK6oG

[ghengeveld]

Code wise I'm fine with this, the approach seems sound.

However, looking at this story (wait for it to animate), it seems the transition is broken. It looks like it's already broken like that on next though, so it's not caused by this PR. Nevertheless we should address it. I verified that the issue exists not just in the story but in the actual sidebar as well.

I think it would help to have a story with some dynamic controls so we can play around with the checklist state easily.

[coderabbitai]

Walkthrough

Store hooks now skip updates when compared states are deeply equal. Checklist transitions register each key once, and ActionList uses shared collapsed and expanded styles. New stories check row stability during state syncs and card height during task completion.

Changes

Checklist state and transitions

Layer / File(s)	Summary
Suppress updates for equal store states code/core/src/shared/universal-store/use-universal-store-manager.ts, code/core/src/shared/universal-store/use-universal-store-preview.ts, code/core/src/shared/universal-store/use-universal-store-manager.test.ts	The manager and preview hooks compare selected values or full states before updating consumers. A test checks that replacing the store state with an equal-content object does not re-render the consumer and preserves the original state object.
Register checklist transitions and define animation styles code/core/src/manager/components/sidebar/ChecklistWidget.tsx, code/core/src/components/components/ActionList/ActionList.tsx, code/core/src/manager/components/sidebar/ChecklistWidget.stories.tsx	The checklist widget registers each transition key once. ActionList uses shared collapsed and expanded styles, with min-height included in its transitions. New stories check row stability across state syncs and card height during task completion.

Priority: ⬇️ Low

Merge Risk: ⚪ Minimal · up to e45eb

No confirmed issue currently prevents merging after normal checks.

✨ Finishing Touches: 💡 1

🛠️ Fix failing CI checks: 💡

• Commit to this branch
• Create a new PR

📝 Generate docstrings

• Commit to this branch
• Create a new PR

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

🔇 Additional comments: 7

code/core/src/shared/universal-store/use-universal-store-manager.ts: 1

11-11: LGTM!

Also applies to: 48-49

code/core/src/shared/universal-store/use-universal-store-preview.ts: 1

10-11: LGTM!

Also applies to: 46-47

code/core/src/shared/universal-store/use-universal-store-manager.test.ts: 1

96-118: LGTM!

code/core/src/components/components/ActionList/ActionList.tsx: 1

19-22: LGTM!

Also applies to: 80-80, 92-96

code/core/src/manager/components/sidebar/ChecklistWidget.tsx: 1

64-76: 🎯 Functional Correctness

Stale keys do not accumulate for returning tasks in this implementation.

The allItems passed to useTransitionArray contains all checklist items derived from the static checklistData.sections. Items never leave this array—they remain present with different computed state flags (completion status, availability, etc.). The renderItems subset changes which items are displayed, but item IDs always remain in allItems.

The transition state keys are registered when items enter allItems, which occurs only once per application session for each checklist ID. Since items do not leave and re-enter allItems, the scenario of a previously-removed key returning is not reachable.

code/core/src/manager/components/sidebar/ChecklistWidget.stories.tsx: 2

174-174: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

⚠️ Unverified finding
Verification ran but could not confirm this finding. It is shown for review, not as a verified issue.

Module-level cardHeights is shared state across story renders.

The array is cleared only inside play. The decorator observer pushes heights during mount, so entries recorded before play runs are cleared at Line 196. This is correct for the current single-story use. Reuse of the decorator, or two renders in one page such as docs mode, could mix measurements. Keeping the array in a useRef or in the story context would remove the risk.

Also applies to: 196-196

---

144-144: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚖️ Poor tradeoff

⚠️ Unverified finding
Verification ran but could not confirm this finding. It is shown for review, not as a verified issue.

Fixed wait() delays make these stories slow and timing-dependent.

The stories wait 3000 ms twice and 600 ms once. A slow CI runner can fail them or give false passes. The 600 ms wait in StableAcrossStateSyncs is the weakest. It only proves that no class change happens in that window. Prefer waitFor conditions where possible. Otherwise, keep the delays tied to --transition-duration.

Also applies to: 165-165, 194-194, 211-211

---

ℹ️ Review info

⚙️ Run configuration

• Configuration used: Organization UI
• Review profile: CHILL
• Plan: Advanced
• Run ID: 639e6830-096e-480e-a278-637162c07f0d

📥 Commits

Reviewing files that changed from the base of the PR and between 37aadd1 and e45eb6f.

📒 Files selected for processing: 6

• code/core/src/components/components/ActionList/ActionList.tsx
• code/core/src/manager/components/sidebar/ChecklistWidget.stories.tsx
• code/core/src/manager/components/sidebar/ChecklistWidget.tsx
• code/core/src/shared/universal-store/use-universal-store-manager.test.ts
• code/core/src/shared/universal-store/use-universal-store-manager.ts
• code/core/src/shared/universal-store/use-universal-store-preview.ts

Included review availability: This review used your included allowance. Your plan provides up to 10 included reviews per hour; 9 remain after this review.

[ghengeveld]

The new equality check can leave the UI out of sync because previousState comes from the sender, rather than the receiving hook’s current snapshot.

I reproduced this with two stores starting at 0: the manager changes locally to 1, then receives a 0 → 0 update from the other runtime before that runtime has received the manager’s change. The manager’s store becomes 0, but the hook still returns 1 because this comparison suppresses notification.

The same test passes against the base branch and fails against this PR. Could we compare the incoming value with the last snapshot exposed by the hook instead? The preview hook appears to need the same adjustment.

[Sidnioulz]

Discussed with the team: we know that concurrent events can be lossy, but we cannot know if the manager or preview's event should be the one that's honoured without building a shared clock system. Considering the lifespan of UniversalStore, we've decided to not pay the price of building such a system to handle this edge case.