feat: add FocusChin to guide toolbar v2 with dedicated controls for focus state

[thomaswhyyou]

Description

Adds a "FocusChin" component to the guide toolbar v2, which shows up when currently focused on a guide and has dedicated controls to move to the next or previous guide, or quit out of focus altogether.

This is more of an experiment based on this feedback, and will need inputs from Sam and Krisna.

Screenshots or videos

CleanShot.2026-03-31.at.15.27.56.mp4

[linear]

KNO-12204 [Toolbar] Beta QA and feedback items

[changeset-bot]

🦋 Changeset detected

Latest commit: 91adc51

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 7 packages

Name	Type
@knocklabs/react	Patch
guide-example	Patch
ms-teams-connect-example	Patch
nextjs-app-dir-example	Patch
nextjs-example	Patch
slack-connect-example	Patch
slack-kit-example	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
javascript-ms-teams-connect-example	Ready	Preview, Comment	Apr 1, 2026 6:24pm
javascript-nextjs-example	Ready	Preview, Comment	Apr 1, 2026 6:24pm
javascript-slack-connect-example	Ready	Preview, Comment	Apr 1, 2026 6:24pm
javascript-slack-kit-example	Ready	Preview, Comment	Apr 1, 2026 6:24pm

[thomaswhyyou]

• chore: change filter options to All|Active|Eligible in guides toolbar v2 #925
• feat: add FocusChin to guide toolbar v2 with dedicated controls for focus state #920 👈 (View in Graphite)
• chore: move the toolbar setting UIs to GuideContextDetails #916
• chore: add or update tooltips for various statuses in guide toolbar v2 #915
• feat: add a hotkey to toggle guide toolbar v2 expanded/collapsed #914
• chore: better handling of focus error reason and message in guide toolbar v2 #913
• chore: rename UnknownGuide to UncommittedGuide in guide toolbar v2 #912
• main

This stack of pull requests is managed by Graphite. Learn more about stacking.

[thomaswhyyou]

@cursor review

[thomaswhyyou]

@cursor review

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

[cursor]

Focus navigation uses filtered guide subset

Low Severity

FocusChin receives the already filtered guides list from V2.tsx, then computes previous/next from that subset. If focusedGuideKeys points to a guide no longer in the active filter (for example after live eligibility changes), currentKey is missing from selectableGuides, so both arrow controls become no-ops.

Additional Locations (2)

• packages/react/src/modules/guide/components/Toolbar/V2/FocusChin.tsx#L48-L56
• packages/react/src/modules/guide/components/Toolbar/V2/FocusChin.tsx#L73-L83

 

[thomaswhyyou]

Not an issue as we now unfocus if/when the currently focused guide becomes not visible in the new filtered list.

[connorlindsey]

Looks cool! Could also just be via hotkey like arrow keys to cycle through and auto-focus guides

[codecov]

Codecov Report

❌ Patch coverage is 10.83744% with 181 lines in your changes missing coverage. Please review.
✅ Project coverage is 63.66%. Comparing base (6f079ff) to head (91adc51).
⚠️ Report is 1 commits behind head on main.
✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
.../modules/guide/components/Toolbar/V2/FocusChin.tsx	8.08%	125 Missing ⚠️
...act/src/modules/guide/components/Toolbar/V2/V2.tsx	5.26%	54 Missing ⚠️
...c/modules/guide/components/Toolbar/V2/GuideRow.tsx	33.33%	2 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #920      +/-   ##
==========================================
- Coverage   64.61%   63.66%   -0.96%     
==========================================
  Files         207      208       +1     
  Lines        9711     9882     +171     
  Branches     1254     1254              
==========================================
+ Hits         6275     6291      +16     
- Misses       3411     3566     +155     
  Partials       25       25              

Files with missing lines	Coverage Δ
...src/modules/guide/components/Toolbar/V2/helpers.ts	94.82% <ø> (ø)
...omponents/Toolbar/V2/useInspectGuideClientStore.ts	98.26% <100.00%> (+0.01%)	⬆️
...c/modules/guide/components/Toolbar/V2/GuideRow.tsx	6.25% <33.33%> (+0.28%)	⬆️
...act/src/modules/guide/components/Toolbar/V2/V2.tsx	7.21% <5.26%> (-0.38%)	⬇️
.../modules/guide/components/Toolbar/V2/FocusChin.tsx	8.08% <8.08%> (ø)