feat(web): keybinding settings as settings rows

[StiensWout]

Re-files #8174, which was closed during backlog cleanup while the team was still reviewing it (see StiensWout's comment there). The author cannot reopen a PR closed by a maintainer, so this is the same branch rebased onto current main, with every review thread from #8174 (11 Macroscope, 1 Cursor Bugbot) already addressed and Macroscope approved at 4aa02a6.

The keybindings settings page was a dense four-column table that looked nothing like the other settings pages, needed a 680px horizontal scroll on narrow windows, and led with a tinted warning banner on the web build. The add-binding row and the inline When trigger were misaligned with the rest of the page.

Each binding is now a standard settings row: command name (with a Custom/Project badge when it isn't a default), a quiet inline When … trigger under the title that opens the existing expression builder, and the shortcut pill, conflict warning, and actions menu on the right. Rows stack on narrow viewports instead of scrolling sideways. The browser notice is a single line with a warning glyph and the detail in a tooltip. The add-binding form has the same row shape as the bindings below it.

The two large copy-pasted row components are replaced by a shared useKeybindingRowEditor / useNewKeybindingDraft and small controls (KeybindingKeyControl, WhenClauseControl, KeybindingRowMenu). Capture, escape, save/replace, reset, remove, conflict detection, and When validation are unchanged and go through the same server commands.

Before

After

Built with Claude Fable 5 in T3 Code.

🤖 Generated with Claude Code

---

Note

Low Risk
UI-only refactor in settings; save/remove/reset and server commands are unchanged, with minor UX shifts (hover-revealed actions, inline save on dirty drafts).

Overview
Replaces the wide four-column keybindings table (with ScrollArea and ~680px horizontal scroll) with a vertical list of SettingsRow items so the page matches other settings screens and stacks on narrow viewports. The panel no longer uses width="wide" on SettingsPageContainer.

Each binding row now shows the command title (with an outline badge for non-default sources), a compact “When …” control in the description that opens the same expression builder via WhenClauseControl, and on the right the shortcut pill / capture input, conflict warning, and a ⋯ menu that stays hidden until hover, focus, or coarse pointer (KeybindingHoverRowMenu). Save appears next to the shortcut when the key or when clause draft is dirty. The add-binding flow uses the same row shape (NewKeybindingSettingsRow).

Refactor: monolithic KeybindingTableRow / NewKeybindingTableRow are split into useKeybindingRowEditor, useNewKeybindingDraft, and shared UI pieces (KeybindingKeyControl, KeybindingRowMenu, KeybindingsList). Warning tooltips are centralized in WarningTooltipIcon. KeybindingPill gets stable React keys when shortcut strings contain +. The browser shortcut notice drops the tinted banner for a single-line BrowserKeybindingNotice with a warning icon.

^{Reviewed by Cursor Bugbot for commit 245e634. Bugbot is set up for automated code reviews on this repo. Configure here.}

Note

Rework keybindings settings page to use settings rows layout

• Replaces the ScrollArea/table layout in KeybindingsSettingsPanel with a vertical list of KeybindingsSettingsRow items built on SettingsRow, deferring scrolling to the page.
• Splits the former KeybindingTableRow and NewKeybindingTableRow into modular hooks and subcomponents (useKeybindingRowEditor, useNewKeybindingDraft, KeybindingKeyControl, WhenClauseControl, KeybindingRowMenu, etc.).
• Adds hover-revealed row actions, inline Save buttons on dirty drafts, source badges for non-default bindings, and a shared WarningTooltipIcon for conflict and unknown-variable warnings.
• Behavioral Change: row actions are hidden until hover/focus, and the browser-only shortcut notice is restyled as a compact inline BrowserKeybindingNotice row.

^{Macroscope summarized 245e634.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: e0f23f39-d7f5-4f1d-bf45-9b457dbedd02

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

---

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

[macroscopeapp]

UI consistency review of the keybindings settings redesign. The move to SettingsRow and the shared Button/Input/Select primitives is a clear improvement (the old hand-rolled h-7 ... sm:h-7 input override is gone, and data-keybinding-capture, focus/recording behaviour and the menu semantics are preserved). Three items below: one interaction/accessibility affordance lost in the migration, one call-site override of a primitive's core geometry, and one duplicated ad-hoc control treatment.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

Approvability

Verdict: Not approved

Macroscope's review found this PR not approvable — This is an XL production UI redesign that changes the keybindings page layout, responsive behavior, and action discoverability, even though its server commands and persistence paths remain unchanged. The broad user-facing interaction changes merit human review.

^{You can add or adjust custom eligibility rules. Learn more.}

Dismissing prior approval to re-evaluate 257bdff

[macroscopeapp]

One finding on the new hover-revealed row menu; details inline.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

One finding on the redesigned shortcut pill affordance. Everything flagged in earlier rounds (coarse-pointer row actions, the command tooltip, the shared micro When trigger, the extracted warning tooltip) looks addressed.

^{Posted via Macroscope — UI Consistency}

Dismissing prior approval to re-evaluate 245e634

[StiensWout]

Re-files #8174, which was closed during backlog cleanup while the team was still reviewing it (see StiensWout's comment there). The author cannot reopen a PR closed by a maintainer, so this is the same branch rebased onto current main, with every review thread from #8174 (11 Macroscope, 1 Cursor Bugbot) already addressed and Macroscope approved at 4aa02a6.

The keybindings settings page was a dense four-column table that looked nothing like the other settings pages, needed a 680px horizontal scroll on narrow windows, and led with a tinted warning banner on the web build. The add-binding row and the inline When trigger were misaligned with the rest of the page.

Each binding is now a standard settings row: command name (with a Custom/Project badge when it isn't a default), a quiet inline When … trigger under the title that opens the existing expression builder, and the shortcut pill, conflict warning, and actions menu on the right. Rows stack on narrow viewports instead of scrolling sideways. The browser notice is a single line with a warning glyph and the detail in a tooltip. The add-binding form has the same row shape as the bindings below it.

The two large copy-pasted row components are replaced by a shared useKeybindingRowEditor / useNewKeybindingDraft and small controls (KeybindingKeyControl, WhenClauseControl, KeybindingRowMenu). Capture, escape, save/replace, reset, remove, conflict detection, and When validation are unchanged and go through the same server commands.

Before

After

Built with Claude Fable 5 in T3 Code.

🤖 Generated with Claude Code

---

Note

Low Risk
UI-only refactor in settings; save/remove/reset and server commands are unchanged, with minor UX shifts (hover-revealed actions, inline save on dirty drafts).

Overview
Replaces the wide four-column keybindings table (with ScrollArea and ~680px horizontal scroll) with a vertical list of SettingsRow items so the page matches other settings screens and stacks on narrow viewports. The panel no longer uses width="wide" on SettingsPageContainer.

Each binding row now shows the command title (with an outline badge for non-default sources), a compact “When …” control in the description that opens the same expression builder via WhenClauseControl, and on the right the shortcut pill / capture input, conflict warning, and a ⋯ menu that stays hidden until hover, focus, or coarse pointer (KeybindingHoverRowMenu). Save appears next to the shortcut when the key or when clause draft is dirty. The add-binding flow uses the same row shape (NewKeybindingSettingsRow).

Refactor: monolithic KeybindingTableRow / NewKeybindingTableRow are split into useKeybindingRowEditor, useNewKeybindingDraft, and shared UI pieces (KeybindingKeyControl, KeybindingRowMenu, KeybindingsList). Warning tooltips are centralized in WarningTooltipIcon. KeybindingPill gets stable React keys when shortcut strings contain +. The browser shortcut notice drops the tinted banner for a single-line BrowserKeybindingNotice with a warning icon.

^{Reviewed by Cursor Bugbot for commit 245e634. Bugbot is set up for automated code reviews on this repo. Configure here.}

Note

Rework keybindings settings page to use settings rows layout

• Replaces the ScrollArea/table layout in KeybindingsSettingsPanel with a vertical list of KeybindingsSettingsRow items built on SettingsRow, deferring scrolling to the page.
• Splits the former KeybindingTableRow and NewKeybindingTableRow into modular hooks and subcomponents (useKeybindingRowEditor, useNewKeybindingDraft, KeybindingKeyControl, WhenClauseControl, KeybindingRowMenu, etc.).
• Adds hover-revealed row actions, inline Save buttons on dirty drafts, source badges for non-default bindings, and a shared WarningTooltipIcon for conflict and unknown-variable warnings.
• Behavioral Change: row actions are hidden until hover/focus, and the browser-only shortcut notice is restyled as a compact inline BrowserKeybindingNotice row.

^{Macroscope summarized 245e634.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: e0f23f39-d7f5-4f1d-bf45-9b457dbedd02

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

---

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

[macroscopeapp]

UI consistency review of the keybindings settings redesign. The move to SettingsRow and the shared Button/Input/Select primitives is a clear improvement (the old hand-rolled h-7 ... sm:h-7 input override is gone, and data-keybinding-capture, focus/recording behaviour and the menu semantics are preserved). Three items below: one interaction/accessibility affordance lost in the migration, one call-site override of a primitive's core geometry, and one duplicated ad-hoc control treatment.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

Approvability

Verdict: Not approved

Macroscope's review found this PR not approvable — This is an XL production UI redesign that changes the keybindings page layout, responsive behavior, and action discoverability, even though its server commands and persistence paths remain unchanged. The broad user-facing interaction changes merit human review.

^{You can add or adjust custom eligibility rules. Learn more.}

Dismissing prior approval to re-evaluate 257bdff

[macroscopeapp]

One finding on the new hover-revealed row menu; details inline.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

One finding on the redesigned shortcut pill affordance. Everything flagged in earlier rounds (coarse-pointer row actions, the command tooltip, the shared micro When trigger, the extracted warning tooltip) looks addressed.

^{Posted via Macroscope — UI Consistency}

Dismissing prior approval to re-evaluate 245e634

[StiensWout]

Re-files #8174, which was closed during backlog cleanup while the team was still reviewing it (see StiensWout's comment there). The author cannot reopen a PR closed by a maintainer, so this is the same branch rebased onto current main, with every review thread from #8174 (11 Macroscope, 1 Cursor Bugbot) already addressed and Macroscope approved at 4aa02a6.

The keybindings settings page was a dense four-column table that looked nothing like the other settings pages, needed a 680px horizontal scroll on narrow windows, and led with a tinted warning banner on the web build. The add-binding row and the inline When trigger were misaligned with the rest of the page.

Each binding is now a standard settings row: command name (with a Custom/Project badge when it isn't a default), a quiet inline When … trigger under the title that opens the existing expression builder, and the shortcut pill, conflict warning, and actions menu on the right. Rows stack on narrow viewports instead of scrolling sideways. The browser notice is a single line with a warning glyph and the detail in a tooltip. The add-binding form has the same row shape as the bindings below it.

The two large copy-pasted row components are replaced by a shared useKeybindingRowEditor / useNewKeybindingDraft and small controls (KeybindingKeyControl, WhenClauseControl, KeybindingRowMenu). Capture, escape, save/replace, reset, remove, conflict detection, and When validation are unchanged and go through the same server commands.

Before

After

Built with Claude Fable 5 in T3 Code.

🤖 Generated with Claude Code

---

Note

Low Risk
UI-only refactor in settings; save/remove/reset and server commands are unchanged, with minor UX shifts (hover-revealed actions, inline save on dirty drafts).

Overview
Replaces the wide four-column keybindings table (with ScrollArea and ~680px horizontal scroll) with a vertical list of SettingsRow items so the page matches other settings screens and stacks on narrow viewports. The panel no longer uses width="wide" on SettingsPageContainer.

Each binding row now shows the command title (with an outline badge for non-default sources), a compact “When …” control in the description that opens the same expression builder via WhenClauseControl, and on the right the shortcut pill / capture input, conflict warning, and a ⋯ menu that stays hidden until hover, focus, or coarse pointer (KeybindingHoverRowMenu). Save appears next to the shortcut when the key or when clause draft is dirty. The add-binding flow uses the same row shape (NewKeybindingSettingsRow).

Refactor: monolithic KeybindingTableRow / NewKeybindingTableRow are split into useKeybindingRowEditor, useNewKeybindingDraft, and shared UI pieces (KeybindingKeyControl, KeybindingRowMenu, KeybindingsList). Warning tooltips are centralized in WarningTooltipIcon. KeybindingPill gets stable React keys when shortcut strings contain +. The browser shortcut notice drops the tinted banner for a single-line BrowserKeybindingNotice with a warning icon.

^{Reviewed by Cursor Bugbot for commit 245e634. Bugbot is set up for automated code reviews on this repo. Configure here.}

Note

Rework keybindings settings page to use settings rows layout

• Replaces the ScrollArea/table layout in KeybindingsSettingsPanel with a vertical list of KeybindingsSettingsRow items built on SettingsRow, deferring scrolling to the page.
• Splits the former KeybindingTableRow and NewKeybindingTableRow into modular hooks and subcomponents (useKeybindingRowEditor, useNewKeybindingDraft, KeybindingKeyControl, WhenClauseControl, KeybindingRowMenu, etc.).
• Adds hover-revealed row actions, inline Save buttons on dirty drafts, source badges for non-default bindings, and a shared WarningTooltipIcon for conflict and unknown-variable warnings.
• Behavioral Change: row actions are hidden until hover/focus, and the browser-only shortcut notice is restyled as a compact inline BrowserKeybindingNotice row.

^{Macroscope summarized 245e634.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: e0f23f39-d7f5-4f1d-bf45-9b457dbedd02

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

---

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

[macroscopeapp]

UI consistency review of the keybindings settings redesign. The move to SettingsRow and the shared Button/Input/Select primitives is a clear improvement (the old hand-rolled h-7 ... sm:h-7 input override is gone, and data-keybinding-capture, focus/recording behaviour and the menu semantics are preserved). Three items below: one interaction/accessibility affordance lost in the migration, one call-site override of a primitive's core geometry, and one duplicated ad-hoc control treatment.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

Approvability

Verdict: Not approved

Macroscope's review found this PR not approvable — This is an XL production UI redesign that changes the keybindings page layout, responsive behavior, and action discoverability, even though its server commands and persistence paths remain unchanged. The broad user-facing interaction changes merit human review.

^{You can add or adjust custom eligibility rules. Learn more.}

Dismissing prior approval to re-evaluate 257bdff

[macroscopeapp]

One finding on the new hover-revealed row menu; details inline.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

One finding on the redesigned shortcut pill affordance. Everything flagged in earlier rounds (coarse-pointer row actions, the command tooltip, the shared micro When trigger, the extracted warning tooltip) looks addressed.

^{Posted via Macroscope — UI Consistency}

Dismissing prior approval to re-evaluate 245e634

[StiensWout]

Re-files #8174, which was closed during backlog cleanup while the team was still reviewing it (see StiensWout's comment there). The author cannot reopen a PR closed by a maintainer, so this is the same branch rebased onto current main, with every review thread from #8174 (11 Macroscope, 1 Cursor Bugbot) already addressed and Macroscope approved at 4aa02a6.

The keybindings settings page was a dense four-column table that looked nothing like the other settings pages, needed a 680px horizontal scroll on narrow windows, and led with a tinted warning banner on the web build. The add-binding row and the inline When trigger were misaligned with the rest of the page.

Each binding is now a standard settings row: command name (with a Custom/Project badge when it isn't a default), a quiet inline When … trigger under the title that opens the existing expression builder, and the shortcut pill, conflict warning, and actions menu on the right. Rows stack on narrow viewports instead of scrolling sideways. The browser notice is a single line with a warning glyph and the detail in a tooltip. The add-binding form has the same row shape as the bindings below it.

The two large copy-pasted row components are replaced by a shared useKeybindingRowEditor / useNewKeybindingDraft and small controls (KeybindingKeyControl, WhenClauseControl, KeybindingRowMenu). Capture, escape, save/replace, reset, remove, conflict detection, and When validation are unchanged and go through the same server commands.

Before

After

Built with Claude Fable 5 in T3 Code.

🤖 Generated with Claude Code

---

Note

Low Risk
UI-only refactor in settings; save/remove/reset and server commands are unchanged, with minor UX shifts (hover-revealed actions, inline save on dirty drafts).

Overview
Replaces the wide four-column keybindings table (with ScrollArea and ~680px horizontal scroll) with a vertical list of SettingsRow items so the page matches other settings screens and stacks on narrow viewports. The panel no longer uses width="wide" on SettingsPageContainer.

Each binding row now shows the command title (with an outline badge for non-default sources), a compact “When …” control in the description that opens the same expression builder via WhenClauseControl, and on the right the shortcut pill / capture input, conflict warning, and a ⋯ menu that stays hidden until hover, focus, or coarse pointer (KeybindingHoverRowMenu). Save appears next to the shortcut when the key or when clause draft is dirty. The add-binding flow uses the same row shape (NewKeybindingSettingsRow).

Refactor: monolithic KeybindingTableRow / NewKeybindingTableRow are split into useKeybindingRowEditor, useNewKeybindingDraft, and shared UI pieces (KeybindingKeyControl, KeybindingRowMenu, KeybindingsList). Warning tooltips are centralized in WarningTooltipIcon. KeybindingPill gets stable React keys when shortcut strings contain +. The browser shortcut notice drops the tinted banner for a single-line BrowserKeybindingNotice with a warning icon.

^{Reviewed by Cursor Bugbot for commit 245e634. Bugbot is set up for automated code reviews on this repo. Configure here.}

Note

Rework keybindings settings page to use settings rows layout

• Replaces the ScrollArea/table layout in KeybindingsSettingsPanel with a vertical list of KeybindingsSettingsRow items built on SettingsRow, deferring scrolling to the page.
• Splits the former KeybindingTableRow and NewKeybindingTableRow into modular hooks and subcomponents (useKeybindingRowEditor, useNewKeybindingDraft, KeybindingKeyControl, WhenClauseControl, KeybindingRowMenu, etc.).
• Adds hover-revealed row actions, inline Save buttons on dirty drafts, source badges for non-default bindings, and a shared WarningTooltipIcon for conflict and unknown-variable warnings.
• Behavioral Change: row actions are hidden until hover/focus, and the browser-only shortcut notice is restyled as a compact inline BrowserKeybindingNotice row.

^{Macroscope summarized 245e634.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: e0f23f39-d7f5-4f1d-bf45-9b457dbedd02

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

---

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

[macroscopeapp]

UI consistency review of the keybindings settings redesign. The move to SettingsRow and the shared Button/Input/Select primitives is a clear improvement (the old hand-rolled h-7 ... sm:h-7 input override is gone, and data-keybinding-capture, focus/recording behaviour and the menu semantics are preserved). Three items below: one interaction/accessibility affordance lost in the migration, one call-site override of a primitive's core geometry, and one duplicated ad-hoc control treatment.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

Approvability

Verdict: Not approved

Macroscope's review found this PR not approvable — This is an XL production UI redesign that changes the keybindings page layout, responsive behavior, and action discoverability, even though its server commands and persistence paths remain unchanged. The broad user-facing interaction changes merit human review.

^{You can add or adjust custom eligibility rules. Learn more.}

Dismissing prior approval to re-evaluate 257bdff

[macroscopeapp]

One finding on the new hover-revealed row menu; details inline.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

One finding on the redesigned shortcut pill affordance. Everything flagged in earlier rounds (coarse-pointer row actions, the command tooltip, the shared micro When trigger, the extracted warning tooltip) looks addressed.

^{Posted via Macroscope — UI Consistency}

Dismissing prior approval to re-evaluate 245e634

[StiensWout]

Re-files #8174, which was closed during backlog cleanup while the team was still reviewing it (see StiensWout's comment there). The author cannot reopen a PR closed by a maintainer, so this is the same branch rebased onto current main, with every review thread from #8174 (11 Macroscope, 1 Cursor Bugbot) already addressed and Macroscope approved at 4aa02a6.

The keybindings settings page was a dense four-column table that looked nothing like the other settings pages, needed a 680px horizontal scroll on narrow windows, and led with a tinted warning banner on the web build. The add-binding row and the inline When trigger were misaligned with the rest of the page.

Each binding is now a standard settings row: command name (with a Custom/Project badge when it isn't a default), a quiet inline When … trigger under the title that opens the existing expression builder, and the shortcut pill, conflict warning, and actions menu on the right. Rows stack on narrow viewports instead of scrolling sideways. The browser notice is a single line with a warning glyph and the detail in a tooltip. The add-binding form has the same row shape as the bindings below it.

The two large copy-pasted row components are replaced by a shared useKeybindingRowEditor / useNewKeybindingDraft and small controls (KeybindingKeyControl, WhenClauseControl, KeybindingRowMenu). Capture, escape, save/replace, reset, remove, conflict detection, and When validation are unchanged and go through the same server commands.

Before

After

Built with Claude Fable 5 in T3 Code.

🤖 Generated with Claude Code

---

Note

Low Risk
UI-only refactor in settings; save/remove/reset and server commands are unchanged, with minor UX shifts (hover-revealed actions, inline save on dirty drafts).

Overview
Replaces the wide four-column keybindings table (with ScrollArea and ~680px horizontal scroll) with a vertical list of SettingsRow items so the page matches other settings screens and stacks on narrow viewports. The panel no longer uses width="wide" on SettingsPageContainer.

Each binding row now shows the command title (with an outline badge for non-default sources), a compact “When …” control in the description that opens the same expression builder via WhenClauseControl, and on the right the shortcut pill / capture input, conflict warning, and a ⋯ menu that stays hidden until hover, focus, or coarse pointer (KeybindingHoverRowMenu). Save appears next to the shortcut when the key or when clause draft is dirty. The add-binding flow uses the same row shape (NewKeybindingSettingsRow).

Refactor: monolithic KeybindingTableRow / NewKeybindingTableRow are split into useKeybindingRowEditor, useNewKeybindingDraft, and shared UI pieces (KeybindingKeyControl, KeybindingRowMenu, KeybindingsList). Warning tooltips are centralized in WarningTooltipIcon. KeybindingPill gets stable React keys when shortcut strings contain +. The browser shortcut notice drops the tinted banner for a single-line BrowserKeybindingNotice with a warning icon.

^{Reviewed by Cursor Bugbot for commit 245e634. Bugbot is set up for automated code reviews on this repo. Configure here.}

Note

Rework keybindings settings page to use settings rows layout

• Replaces the ScrollArea/table layout in KeybindingsSettingsPanel with a vertical list of KeybindingsSettingsRow items built on SettingsRow, deferring scrolling to the page.
• Splits the former KeybindingTableRow and NewKeybindingTableRow into modular hooks and subcomponents (useKeybindingRowEditor, useNewKeybindingDraft, KeybindingKeyControl, WhenClauseControl, KeybindingRowMenu, etc.).
• Adds hover-revealed row actions, inline Save buttons on dirty drafts, source badges for non-default bindings, and a shared WarningTooltipIcon for conflict and unknown-variable warnings.
• Behavioral Change: row actions are hidden until hover/focus, and the browser-only shortcut notice is restyled as a compact inline BrowserKeybindingNotice row.

^{Macroscope summarized 245e634.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: e0f23f39-d7f5-4f1d-bf45-9b457dbedd02

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

---

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

[macroscopeapp]

UI consistency review of the keybindings settings redesign. The move to SettingsRow and the shared Button/Input/Select primitives is a clear improvement (the old hand-rolled h-7 ... sm:h-7 input override is gone, and data-keybinding-capture, focus/recording behaviour and the menu semantics are preserved). Three items below: one interaction/accessibility affordance lost in the migration, one call-site override of a primitive's core geometry, and one duplicated ad-hoc control treatment.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

Approvability

Verdict: Not approved

Macroscope's review found this PR not approvable — This is an XL production UI redesign that changes the keybindings page layout, responsive behavior, and action discoverability, even though its server commands and persistence paths remain unchanged. The broad user-facing interaction changes merit human review.

^{You can add or adjust custom eligibility rules. Learn more.}

Dismissing prior approval to re-evaluate 257bdff

[macroscopeapp]

One finding on the new hover-revealed row menu; details inline.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

One finding on the redesigned shortcut pill affordance. Everything flagged in earlier rounds (coarse-pointer row actions, the command tooltip, the shared micro When trigger, the extracted warning tooltip) looks addressed.

^{Posted via Macroscope — UI Consistency}

Dismissing prior approval to re-evaluate 245e634

[StiensWout]

Re-files #8174, which was closed during backlog cleanup while the team was still reviewing it (see StiensWout's comment there). The author cannot reopen a PR closed by a maintainer, so this is the same branch rebased onto current main, with every review thread from #8174 (11 Macroscope, 1 Cursor Bugbot) already addressed and Macroscope approved at 4aa02a6.

The keybindings settings page was a dense four-column table that looked nothing like the other settings pages, needed a 680px horizontal scroll on narrow windows, and led with a tinted warning banner on the web build. The add-binding row and the inline When trigger were misaligned with the rest of the page.

Each binding is now a standard settings row: command name (with a Custom/Project badge when it isn't a default), a quiet inline When … trigger under the title that opens the existing expression builder, and the shortcut pill, conflict warning, and actions menu on the right. Rows stack on narrow viewports instead of scrolling sideways. The browser notice is a single line with a warning glyph and the detail in a tooltip. The add-binding form has the same row shape as the bindings below it.

The two large copy-pasted row components are replaced by a shared useKeybindingRowEditor / useNewKeybindingDraft and small controls (KeybindingKeyControl, WhenClauseControl, KeybindingRowMenu). Capture, escape, save/replace, reset, remove, conflict detection, and When validation are unchanged and go through the same server commands.

Before

After

Built with Claude Fable 5 in T3 Code.

🤖 Generated with Claude Code

---

Note

Low Risk
UI-only refactor in settings; save/remove/reset and server commands are unchanged, with minor UX shifts (hover-revealed actions, inline save on dirty drafts).

Overview
Replaces the wide four-column keybindings table (with ScrollArea and ~680px horizontal scroll) with a vertical list of SettingsRow items so the page matches other settings screens and stacks on narrow viewports. The panel no longer uses width="wide" on SettingsPageContainer.

Each binding row now shows the command title (with an outline badge for non-default sources), a compact “When …” control in the description that opens the same expression builder via WhenClauseControl, and on the right the shortcut pill / capture input, conflict warning, and a ⋯ menu that stays hidden until hover, focus, or coarse pointer (KeybindingHoverRowMenu). Save appears next to the shortcut when the key or when clause draft is dirty. The add-binding flow uses the same row shape (NewKeybindingSettingsRow).

Refactor: monolithic KeybindingTableRow / NewKeybindingTableRow are split into useKeybindingRowEditor, useNewKeybindingDraft, and shared UI pieces (KeybindingKeyControl, KeybindingRowMenu, KeybindingsList). Warning tooltips are centralized in WarningTooltipIcon. KeybindingPill gets stable React keys when shortcut strings contain +. The browser shortcut notice drops the tinted banner for a single-line BrowserKeybindingNotice with a warning icon.

^{Reviewed by Cursor Bugbot for commit 245e634. Bugbot is set up for automated code reviews on this repo. Configure here.}

Note

Rework keybindings settings page to use settings rows layout

• Replaces the ScrollArea/table layout in KeybindingsSettingsPanel with a vertical list of KeybindingsSettingsRow items built on SettingsRow, deferring scrolling to the page.
• Splits the former KeybindingTableRow and NewKeybindingTableRow into modular hooks and subcomponents (useKeybindingRowEditor, useNewKeybindingDraft, KeybindingKeyControl, WhenClauseControl, KeybindingRowMenu, etc.).
• Adds hover-revealed row actions, inline Save buttons on dirty drafts, source badges for non-default bindings, and a shared WarningTooltipIcon for conflict and unknown-variable warnings.
• Behavioral Change: row actions are hidden until hover/focus, and the browser-only shortcut notice is restyled as a compact inline BrowserKeybindingNotice row.

^{Macroscope summarized 245e634.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: e0f23f39-d7f5-4f1d-bf45-9b457dbedd02

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

---

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

[macroscopeapp]

UI consistency review of the keybindings settings redesign. The move to SettingsRow and the shared Button/Input/Select primitives is a clear improvement (the old hand-rolled h-7 ... sm:h-7 input override is gone, and data-keybinding-capture, focus/recording behaviour and the menu semantics are preserved). Three items below: one interaction/accessibility affordance lost in the migration, one call-site override of a primitive's core geometry, and one duplicated ad-hoc control treatment.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

Approvability

Verdict: Not approved

Macroscope's review found this PR not approvable — This is an XL production UI redesign that changes the keybindings page layout, responsive behavior, and action discoverability, even though its server commands and persistence paths remain unchanged. The broad user-facing interaction changes merit human review.

^{You can add or adjust custom eligibility rules. Learn more.}

Dismissing prior approval to re-evaluate 257bdff

[macroscopeapp]

One finding on the new hover-revealed row menu; details inline.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

One finding on the redesigned shortcut pill affordance. Everything flagged in earlier rounds (coarse-pointer row actions, the command tooltip, the shared micro When trigger, the extracted warning tooltip) looks addressed.

^{Posted via Macroscope — UI Consistency}

Dismissing prior approval to re-evaluate 245e634

[StiensWout]

Re-files #8174, which was closed during backlog cleanup while the team was still reviewing it (see StiensWout's comment there). The author cannot reopen a PR closed by a maintainer, so this is the same branch rebased onto current main, with every review thread from #8174 (11 Macroscope, 1 Cursor Bugbot) already addressed and Macroscope approved at 4aa02a6.

The keybindings settings page was a dense four-column table that looked nothing like the other settings pages, needed a 680px horizontal scroll on narrow windows, and led with a tinted warning banner on the web build. The add-binding row and the inline When trigger were misaligned with the rest of the page.

Each binding is now a standard settings row: command name (with a Custom/Project badge when it isn't a default), a quiet inline When … trigger under the title that opens the existing expression builder, and the shortcut pill, conflict warning, and actions menu on the right. Rows stack on narrow viewports instead of scrolling sideways. The browser notice is a single line with a warning glyph and the detail in a tooltip. The add-binding form has the same row shape as the bindings below it.

The two large copy-pasted row components are replaced by a shared useKeybindingRowEditor / useNewKeybindingDraft and small controls (KeybindingKeyControl, WhenClauseControl, KeybindingRowMenu). Capture, escape, save/replace, reset, remove, conflict detection, and When validation are unchanged and go through the same server commands.

Before

After

Built with Claude Fable 5 in T3 Code.

🤖 Generated with Claude Code

---

Note

Low Risk
UI-only refactor in settings; save/remove/reset and server commands are unchanged, with minor UX shifts (hover-revealed actions, inline save on dirty drafts).

Overview
Replaces the wide four-column keybindings table (with ScrollArea and ~680px horizontal scroll) with a vertical list of SettingsRow items so the page matches other settings screens and stacks on narrow viewports. The panel no longer uses width="wide" on SettingsPageContainer.

Each binding row now shows the command title (with an outline badge for non-default sources), a compact “When …” control in the description that opens the same expression builder via WhenClauseControl, and on the right the shortcut pill / capture input, conflict warning, and a ⋯ menu that stays hidden until hover, focus, or coarse pointer (KeybindingHoverRowMenu). Save appears next to the shortcut when the key or when clause draft is dirty. The add-binding flow uses the same row shape (NewKeybindingSettingsRow).

Refactor: monolithic KeybindingTableRow / NewKeybindingTableRow are split into useKeybindingRowEditor, useNewKeybindingDraft, and shared UI pieces (KeybindingKeyControl, KeybindingRowMenu, KeybindingsList). Warning tooltips are centralized in WarningTooltipIcon. KeybindingPill gets stable React keys when shortcut strings contain +. The browser shortcut notice drops the tinted banner for a single-line BrowserKeybindingNotice with a warning icon.

^{Reviewed by Cursor Bugbot for commit 245e634. Bugbot is set up for automated code reviews on this repo. Configure here.}

Note

Rework keybindings settings page to use settings rows layout

• Replaces the ScrollArea/table layout in KeybindingsSettingsPanel with a vertical list of KeybindingsSettingsRow items built on SettingsRow, deferring scrolling to the page.
• Splits the former KeybindingTableRow and NewKeybindingTableRow into modular hooks and subcomponents (useKeybindingRowEditor, useNewKeybindingDraft, KeybindingKeyControl, WhenClauseControl, KeybindingRowMenu, etc.).
• Adds hover-revealed row actions, inline Save buttons on dirty drafts, source badges for non-default bindings, and a shared WarningTooltipIcon for conflict and unknown-variable warnings.
• Behavioral Change: row actions are hidden until hover/focus, and the browser-only shortcut notice is restyled as a compact inline BrowserKeybindingNotice row.

^{Macroscope summarized 245e634.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: e0f23f39-d7f5-4f1d-bf45-9b457dbedd02

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

---

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

[macroscopeapp]

UI consistency review of the keybindings settings redesign. The move to SettingsRow and the shared Button/Input/Select primitives is a clear improvement (the old hand-rolled h-7 ... sm:h-7 input override is gone, and data-keybinding-capture, focus/recording behaviour and the menu semantics are preserved). Three items below: one interaction/accessibility affordance lost in the migration, one call-site override of a primitive's core geometry, and one duplicated ad-hoc control treatment.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

Approvability

Verdict: Not approved

Macroscope's review found this PR not approvable — This is an XL production UI redesign that changes the keybindings page layout, responsive behavior, and action discoverability, even though its server commands and persistence paths remain unchanged. The broad user-facing interaction changes merit human review.

^{You can add or adjust custom eligibility rules. Learn more.}

Dismissing prior approval to re-evaluate 257bdff

[macroscopeapp]

One finding on the new hover-revealed row menu; details inline.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

One finding on the redesigned shortcut pill affordance. Everything flagged in earlier rounds (coarse-pointer row actions, the command tooltip, the shared micro When trigger, the extracted warning tooltip) looks addressed.

^{Posted via Macroscope — UI Consistency}

Dismissing prior approval to re-evaluate 245e634

[StiensWout]

Re-files #8174, which was closed during backlog cleanup while the team was still reviewing it (see StiensWout's comment there). The author cannot reopen a PR closed by a maintainer, so this is the same branch rebased onto current main, with every review thread from #8174 (11 Macroscope, 1 Cursor Bugbot) already addressed and Macroscope approved at 4aa02a6.

The keybindings settings page was a dense four-column table that looked nothing like the other settings pages, needed a 680px horizontal scroll on narrow windows, and led with a tinted warning banner on the web build. The add-binding row and the inline When trigger were misaligned with the rest of the page.

Each binding is now a standard settings row: command name (with a Custom/Project badge when it isn't a default), a quiet inline When … trigger under the title that opens the existing expression builder, and the shortcut pill, conflict warning, and actions menu on the right. Rows stack on narrow viewports instead of scrolling sideways. The browser notice is a single line with a warning glyph and the detail in a tooltip. The add-binding form has the same row shape as the bindings below it.

The two large copy-pasted row components are replaced by a shared useKeybindingRowEditor / useNewKeybindingDraft and small controls (KeybindingKeyControl, WhenClauseControl, KeybindingRowMenu). Capture, escape, save/replace, reset, remove, conflict detection, and When validation are unchanged and go through the same server commands.

Before

After

Built with Claude Fable 5 in T3 Code.

🤖 Generated with Claude Code

---

Note

Low Risk
UI-only refactor in settings; save/remove/reset and server commands are unchanged, with minor UX shifts (hover-revealed actions, inline save on dirty drafts).

Overview
Replaces the wide four-column keybindings table (with ScrollArea and ~680px horizontal scroll) with a vertical list of SettingsRow items so the page matches other settings screens and stacks on narrow viewports. The panel no longer uses width="wide" on SettingsPageContainer.

Each binding row now shows the command title (with an outline badge for non-default sources), a compact “When …” control in the description that opens the same expression builder via WhenClauseControl, and on the right the shortcut pill / capture input, conflict warning, and a ⋯ menu that stays hidden until hover, focus, or coarse pointer (KeybindingHoverRowMenu). Save appears next to the shortcut when the key or when clause draft is dirty. The add-binding flow uses the same row shape (NewKeybindingSettingsRow).

Refactor: monolithic KeybindingTableRow / NewKeybindingTableRow are split into useKeybindingRowEditor, useNewKeybindingDraft, and shared UI pieces (KeybindingKeyControl, KeybindingRowMenu, KeybindingsList). Warning tooltips are centralized in WarningTooltipIcon. KeybindingPill gets stable React keys when shortcut strings contain +. The browser shortcut notice drops the tinted banner for a single-line BrowserKeybindingNotice with a warning icon.

^{Reviewed by Cursor Bugbot for commit 245e634. Bugbot is set up for automated code reviews on this repo. Configure here.}

Note

Rework keybindings settings page to use settings rows layout

• Replaces the ScrollArea/table layout in KeybindingsSettingsPanel with a vertical list of KeybindingsSettingsRow items built on SettingsRow, deferring scrolling to the page.
• Splits the former KeybindingTableRow and NewKeybindingTableRow into modular hooks and subcomponents (useKeybindingRowEditor, useNewKeybindingDraft, KeybindingKeyControl, WhenClauseControl, KeybindingRowMenu, etc.).
• Adds hover-revealed row actions, inline Save buttons on dirty drafts, source badges for non-default bindings, and a shared WarningTooltipIcon for conflict and unknown-variable warnings.
• Behavioral Change: row actions are hidden until hover/focus, and the browser-only shortcut notice is restyled as a compact inline BrowserKeybindingNotice row.

^{Macroscope summarized 245e634.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: e0f23f39-d7f5-4f1d-bf45-9b457dbedd02

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

---

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

[macroscopeapp]

UI consistency review of the keybindings settings redesign. The move to SettingsRow and the shared Button/Input/Select primitives is a clear improvement (the old hand-rolled h-7 ... sm:h-7 input override is gone, and data-keybinding-capture, focus/recording behaviour and the menu semantics are preserved). Three items below: one interaction/accessibility affordance lost in the migration, one call-site override of a primitive's core geometry, and one duplicated ad-hoc control treatment.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

Approvability

Verdict: Not approved

Macroscope's review found this PR not approvable — This is an XL production UI redesign that changes the keybindings page layout, responsive behavior, and action discoverability, even though its server commands and persistence paths remain unchanged. The broad user-facing interaction changes merit human review.

^{You can add or adjust custom eligibility rules. Learn more.}

Dismissing prior approval to re-evaluate 257bdff

[macroscopeapp]

One finding on the new hover-revealed row menu; details inline.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

One finding on the redesigned shortcut pill affordance. Everything flagged in earlier rounds (coarse-pointer row actions, the command tooltip, the shared micro When trigger, the extracted warning tooltip) looks addressed.

^{Posted via Macroscope — UI Consistency}

Dismissing prior approval to re-evaluate 245e634