feat: edit and reset feature discovery flags from the dev panel

[flamboh]

Note

🤖 Claude Opus 5.5 on behalf of Oliver

Stacked on #206.

ELI5

The dev panel gets a "feature discovery" section. It lists each one-time hint (right now, the share-links hint) with a checkbox for whether you've seen it, plus a "reset all" button. You can bring a hint back without digging through localStorage.

Why

Once a hint is dismissed, the only way to see it again was to delete tagium:feature-discovery in devtools and reload. That's slow when iterating on hint copy or placement, and it gets worse as more features use discovery flags.

Implementation

• Live store (featureDiscovery.ts): discovery is now a small subscribable store read through useSyncExternalStore, instead of a one-time useState read. Changes from the dev panel, another hook, or another tab (via the storage event) update every mounted hint immediately, with no reload.
  • setFeatureSeen(feature, seen) sets or unsets one flag and keeps the others.
  • resetFeatureDiscovery() clears the whole key.
  • DISCOVERABLE_FEATURES is back as a runtime list, so the panel can show every feature.
• Dev panel: a DiscoveryFlagsSection with one checkbox row per feature and reset all.
• data-spotlight-ignore: a new attribute on the Spotlight primitive. Clicks inside marked elements don't count as dismissing a hint. The dev panel (trigger and popover) uses it, so unsetting a flag doesn't instantly re-dismiss the hint you just brought back.
• Panel height: the dev panel is capped to the available height and scrolls. It was already clipping its header on short windows, and the new section made that worse.

Review guide

Setup: local dev with VITE_PUBLIC_SHARE_LINKS_ENABLED=true; the dev panel only shows when /api/dev/config is enabled.

Flows to check

1. Import a shareable track and dismiss the share hint. Open the dev panel: share-links reads seen.
2. Uncheck it. The hint reappears after the usual 2-second delay (from fix: block sharing until imports finish and explain why #204), and clicking around inside the panel doesn't dismiss it.
3. Check it again and the hint disappears. reset all clears everything and brings the hint back.
4. Close the panel with its button. The hint stays until you interact with the page.

Edge cases

• Flags for features that no longer exist are kept when you edit one flag, and removed by reset all.
• Changing a flag in another tab updates this one through the storage event.

Decisions for the reviewer

• Opt-in ignore attribute: data-spotlight-ignore must be added to each element that shouldn't dismiss hints; it isn't automatic for every floating layer. Only the dev panel uses it today.

Verified

• vp check passes and all 682 unit tests pass. New tests cover unsetting one flag while keeping the others, and two mounted hooks staying in sync through edits and a reset.
• A Playwright script against the dev server checked the seeded "seen" state, unchecking (the hint appears and the storage entry becomes {}), clicking in the panel without dismissing, re-checking, reset all (the storage key is removed), and closing the panel without dismissing.

UI Changes

Before: no discovery controls; the panel clipped its header on short windows.

After:

Full flow:

https://gh-file-drop-api-prod-galwoqjslzlnws6s.oliver-boorstein.workers.dev/f/a79d4e73b9f34120/dev-panel-flow.webm

---

Made by Claude Opus 5.5 in Claude Code (T3 Code).

[cloudflare-workers-and-pages]

Deploying with    Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status	Name	Latest Commit	Preview URL	Updated (UTC)
✅ Deployment successful! View logs	tagium	611f9e5	Commit Preview URL Branch Preview URL	Sep 25 2026, 09:17 AM

[github-actions]

React Doctor found no new issues. 🎉

_{Reviewed by React Doctor for commit 611f9e5.}