feat: add customizable keyboard shortcuts, multi-select elements, and modern ChatInput

[RobertWsp]

Summary

This PR introduces three major features to enhance the react-grab experience:

🎹 Customizable Keyboard Shortcuts

• Platform-aware defaults: Mac uses ⌘+^, Windows/Linux uses Ctrl+Shift+G
• Persistent configuration: Shortcuts saved to localStorage
• Settings panel: New gear icon in toolbar opens shortcut configuration
• Record new shortcuts: Click to record, requires at least one modifier key

🎯 Multi-Select Elements

• Shift+Click to add/remove elements from selection
• Expandable element list showing component name, tag, and source location
• Click to navigate to source file
• Remove individual elements from selection
• Aggregate bounds positioning for selection label

💬 Modern ChatInput Component

• Auto-resizing textarea that grows with content
• Keyboard shortcuts: Enter to submit, Shift+Enter for new line, Esc to cancel
• Focus trap: Tab cycles between input and submit button
• AI status indicator with loading animation
• Clean, minimal design

New Files

• utils/detect-platform.ts - OS detection utility
• utils/format-shortcut.ts - Shortcut formatting with platform symbols
• shortcut/state.ts - Shortcut persistence with localStorage
• components/icons/icon-{close,send,sparkles,settings}.tsx - New icons
• components/selection-label/chat-input.tsx - Modern input component
• components/selection-label/element-list{,-item}.tsx - Multi-select list
• components/toolbar/shortcut-settings.tsx - Settings panel

Modified Files

• types.ts - New interfaces for all features
• core/machine.ts - Multi-select XState actions
• core/keyboard-handlers.ts - Platform-aware defaults
• core/index.tsx - Core integration
• components/*/index.tsx - Component integrations

Test plan

• Verify keyboard shortcuts work on Mac (⌘+^)
• Verify keyboard shortcuts work on Windows/Linux (Ctrl+Shift+G)
• Test custom shortcut recording and persistence
• Test Shift+Click multi-select
• Test element list expand/collapse
• Test element removal from list
• Test ChatInput keyboard shortcuts
• Verify no regressions in existing functionality

🤖 Generated with Claude Code

---

Note

Introduces configurable activation shortcuts, multi-select selection UX, and a refreshed input, with core/state and UI integration.

• Activation shortcut: platform-aware defaults, persisted via localStorage, toolbar settings UI (ShortcutSettings), new utils (detect-platform, format-shortcut), APIs updateShortcut/getShortcut, and exports
• Multi-select: Shift+Click toggles selection, expandable ElementList with open-file and remove, aggregate selection bounds, cursor behavior tweaks, and XState actions (TOGGLE_ELEMENT_SELECTION, TOGGLE_ELEMENT_LIST, REMOVE_ELEMENT_FROM_SELECTION)
• Input UX: new ChatInput (auto-resize, Enter/Shift+Enter/Esc, focus trap, AI status), integrated into SelectionLabel
• Renderer/Toolbar integration: plumb new props (selected elements, list expand/collapse, shortcut settings); add settings icon; new icons (icon-{close,send,sparkles,settings})
• Defaults/handlers: platform-aware modifier defaults in keyboard-handlers, updated bounds/label calculations; extended types.ts for shortcuts, element list, and chat input

^{Written by Cursor Bugbot for commit b0799c0. This will update automatically on new commits. Configure here.}

---

Summary by cubic

Adds customizable activation shortcuts, Shift+Click multi-select with an element list, and a modern ChatInput to improve selection and keyboard workflows. This brings platform-aware defaults and persistent settings, plus a cleaner input experience.

• New Features

  • Customizable activation shortcut with a toolbar settings panel; platform-aware defaults; persisted in localStorage.
  • Shift+Click multi-select with an expandable element list; click to open source and remove items; aggregate selection bounds for label positioning.
  • Modern ChatInput with auto-resize, Enter to submit, Shift+Enter for newline, Esc to cancel, Tab focus trap, and a status indicator.

• Migration

  • Defaults apply if activationKey isn’t set: Mac uses Cmd+Ctrl, Windows/Linux uses Ctrl+Shift+G.
  • To manage shortcuts programmatically, use updateShortcut/getShortcut and new exports (detectPlatform, formatShortcut, getDefaultShortcut, load/save/clear shortcut config).
  • No breaking changes; existing activationKey continues to work.

^{Written for commit 9755b1b. Summary will update on new commits.}

[vercel]

@RobertWsp is attempting to deploy a commit to the Million Team on Vercel.

A member of the Team first needs to authorize it.

[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.

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

Note

Other AI code review bot(s) detected

CodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review.

---

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

[gemini-code-assist]

Summary of Changes

Hello @RobertWsp, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request delivers a substantial upgrade to the react-grab user experience by integrating three key features: customizable keyboard shortcuts, multi-element selection capabilities, and a redesigned chat input component. These additions aim to significantly improve user efficiency and interaction flexibility, allowing for more personalized control over the tool's activation, enhanced precision in selecting and managing multiple UI elements, and a more streamlined, accessible interface for interacting with AI agents.

Highlights

• Customizable Keyboard Shortcuts: Users can now define their own keyboard shortcuts for activating react-grab, with platform-aware defaults (e.g., ⌘+^ on Mac, Ctrl+Shift+G on Windows/Linux). These settings are persistent via localStorage and configurable through a new settings panel accessible from the toolbar.
• Multi-Select Elements: The tool now supports selecting multiple elements using Shift+Click. A new expandable element list displays details (component name, tag, source location) for all selected items, allowing navigation to source files and individual element removal.
• Modern ChatInput Component: A new ChatInput component has been introduced, featuring an auto-resizing textarea, intuitive keyboard shortcuts (Enter to submit, Shift+Enter for new line, Esc to cancel), a focus trap for accessibility, and an AI status indicator with a loading animation, all within a clean, minimal design.

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[mesa-dot-dev]

Mesa Description

TL;DR

Introduces customizable keyboard shortcuts for activation, multi-select elements with Shift+Click, and a modern, auto-resizing ChatInput component. These changes enhance the user experience with platform-aware defaults, persistent configuration, and improved selection and keyboard workflows.

What changed?

• Keyboard Shortcuts & Settings:

  • Added utils/detect-platform.ts for OS detection.
  • Added utils/format-shortcut.ts for human-readable shortcut formatting.
  • Added shortcut/state.ts for managing and persisting shortcut configurations in localStorage.
  • Introduced components/toolbar/shortcut-settings.tsx for the shortcut configuration UI.
  • Updated components/toolbar/index.tsx to include a settings button and render the ShortcutSettings component.
  • Modified core/keyboard-handlers.ts to provide platform-specific default modifier keys.
  • Enhanced core/noop-api.ts to manage activation shortcuts.
  • Updated index.ts to export new shortcut utilities and types.
  • Expanded types.ts with new interfaces for keyboard shortcut management.

• Multi-Select Elements:

  • Added components/selection-label/element-list-item.tsx to display individual selected element details.
  • Added components/selection-label/element-list.tsx for a collapsible and interactive list of selected elements.
  • Enhanced core/machine.ts to manage a list of selected elements (add/remove) and control the element list's expansion state.
  • Modified core/index.tsx to implement multi-selection (Shift+Click), calculate aggregate bounds, and generate detailed element information.
  • Updated components/renderer.tsx to pass new props related to the element list to child components.
  • Refactored components/selection-label/index.tsx to integrate ElementList and conditionally render TagBadge.
  • Expanded types.ts with new interfaces for multi-select functionality (SelectedElementInfo, ElementListProps, ElementListItemProps).

• Modern ChatInput Component:

  • Introduced components/selection-label/chat-input.tsx, a new Solid.js component featuring an auto-resizing textarea, keyboard shortcut handling (submit/cancel), a Tab focus trap, and an AI status indicator.
  • Integrated ChatInput into components/selection-label/index.tsx.
  • Added ChatInputProps interface to types.ts.

• Icons:

  • Added components/icons/icon-close.tsx for a close icon.
  • Added components/icons/icon-send.tsx for a send icon.
  • Updated/added components/icons/icon-settings.tsx for the settings icon.
  • Added components/icons/icon-sparkles.tsx for a sparkles icon.

^{Description generated by Mesa. Update settings}

[gemini-code-assist]

Code Review

This is an impressive pull request that adds significant new functionality: customizable keyboard shortcuts, multi-element selection, and a modern chat input. The code is well-structured, with new features encapsulated in their own components and modules. The core logic and state machine have been updated thoughtfully to integrate these new capabilities.

I've found a few areas for improvement, mainly related to code clarity, adherence to SolidJS best practices, and a minor logical correction. My comments include suggestions to reduce code duplication in the new ChatInput component, improve conditional rendering in ElementListItem, fix an issue with borderRadius calculation for multi-selections, and clean up an unused prop in your type definitions.

Overall, this is a great contribution. Addressing these minor points will make the new code even more robust and maintainable.

[mesa-dot-dev]

Performed full review of 9c642a3...d793336

Analysis

1. Race Condition Risk: Module-level variable wasShiftClickOnMousedown could cause issues with multiple instances or rapid interactions and should be moved to the machine context or a ref.

2. Performance Concerns: selectedElementsInfo performs expensive async operations on every viewport change, and aggregate bounds calculation recalculates frequently. Both need optimization through memoization or debouncing.

3. Duplicate Logic: Platform detection logic is duplicated between getRequiredModifiers() and getDefaultShortcut(), violating DRY principles and risking inconsistent behavior.

4. Error Handling Gaps: Silent failures in localStorage operations within shortcut/state.ts lack proper user feedback, potentially causing confusion.

5. Missing Validation: No validation exists to prevent conflicts between custom shortcuts and browser/OS shortcuts (e.g., Cmd+Q, Cmd+W).

Tip

Help

Slash Commands:

• /review - Request a full code review
• /review latest - Review only changes since the last review
• /describe - Generate PR description. This will update the PR body or issue comment depending on your configuration
• /help - Get help with Mesa commands and configuration options

^{0 files reviewed | 3 comments | Edit Agent Settings • Read Docs}

[greptile-apps]

Greptile Summary

This PR introduces three cohesive enhancements: customizable keyboard shortcuts with platform-aware defaults and persistent configuration, Shift+Click multi-select with an expandable element list, and a modern ChatInput component with auto-resize and keyboard shortcuts.

Key Changes:

• Platform detection utility with caching for Mac/Windows/Linux identification
• Shortcut configuration persisted to localStorage with version tracking
• New toolbar settings panel for recording custom shortcuts (requires modifier keys)
• Multi-select via Shift+Click toggles elements in/out of selection
• Expandable element list shows component names, tags, source locations
• Aggregate selection bounds calculation for multi-element positioning
• Modern ChatInput replaces inline textarea with auto-resize, Enter to submit, Shift+Enter for newlines, Esc to cancel, Tab focus trap
• XState machine actions for TOGGLE_ELEMENT_SELECTION, REMOVE_ELEMENT_FROM_SELECTION, TOGGLE_ELEMENT_LIST
• New icons: close, send, sparkles, settings

Architecture:

• Clean separation: utilities for platform/shortcuts, components for UI, core for integration
• State management via XState with new context fields (frozenElements, isElementListExpanded)
• Backwards compatible: existing activationKey continues to work, defaults apply when not set

Confidence Score: 4/5

• This PR is safe to merge with one minor logical issue in platform detection
• The implementation is well-architected with clean separation of concerns, proper type definitions, and good integration across the codebase. One logical issue exists in detect-platform.ts where Linux detection defaults to true for all unknown platforms. The multi-select and shortcut features are properly wired through XState, components are well-structured, and keyboard handling is comprehensive. No breaking changes, backwards compatible.
• packages/react-grab/src/utils/detect-platform.ts has a logic issue where unknown platforms default to Linux

Important Files Changed

Filename	Overview
packages/react-grab/src/shortcut/state.ts	Implements localStorage-based shortcut persistence with version checking and platform-aware defaults; clean implementation with proper error handling
packages/react-grab/src/utils/detect-platform.ts	Platform detection with caching; Linux detection is a fallback catch-all which may incorrectly identify unknown platforms
packages/react-grab/src/components/selection-label/chat-input.tsx	Modern chat input with auto-resize, keyboard handling, focus trap, and AI status indicator; well-implemented component
packages/react-grab/src/core/machine.ts	XState machine with new actions for multi-select (toggleElementSelection, removeElementFromSelection, toggleElementList); properly integrated
packages/react-grab/src/core/index.tsx	Core integration with shortcut persistence, multi-select handlers (Shift+Click), element list management, and aggregate bounds calculation; comprehensive implementation

Sequence Diagram

sequenceDiagram
    participant User
    participant Toolbar
    participant ShortcutSettings
    participant LocalStorage
    participant Core
    participant Machine
    participant Renderer
    participant SelectionLabel
    participant ElementList
    participant ChatInput

    Note over User,ChatInput: Shortcut Customization Flow
    User->>Toolbar: Click settings icon
    Toolbar->>ShortcutSettings: Open settings panel
    User->>ShortcutSettings: Click record button
    ShortcutSettings->>ShortcutSettings: Start recording
    User->>ShortcutSettings: Press Cmd+Ctrl+K
    ShortcutSettings->>ShortcutSettings: Validate modifiers
    ShortcutSettings->>LocalStorage: saveShortcutConfig()
    ShortcutSettings->>Core: updateShortcut()
    ShortcutSettings->>Toolbar: Close settings
    
    Note over User,ChatInput: Multi-Select Flow
    User->>Core: Activate (Cmd+Ctrl)
    Core->>Machine: ACTIVATE
    Machine->>Renderer: Update state
    User->>Core: Shift+Click element 1
    Core->>Machine: TOGGLE_ELEMENT_SELECTION
    Machine->>Machine: toggleElementSelection
    User->>Core: Shift+Click element 2
    Core->>Machine: TOGGLE_ELEMENT_SELECTION
    Machine->>Machine: Add to frozenElements
    Core->>Renderer: Update with 2 elements
    Renderer->>SelectionLabel: Show with selectedElements
    SelectionLabel->>ElementList: Render element list
    User->>ElementList: Click expand button
    ElementList->>Core: onToggle()
    Core->>Machine: TOGGLE_ELEMENT_LIST
    Machine->>Machine: Toggle isElementListExpanded
    
    Note over User,ChatInput: ChatInput & Submit Flow
    User->>SelectionLabel: Double-click or Enter
    SelectionLabel->>ChatInput: Show input
    User->>ChatInput: Type prompt
    ChatInput->>SelectionLabel: onInput(value)
    SelectionLabel->>Core: onInputChange(value)
    Core->>Machine: INPUT_CHANGE
    User->>ChatInput: Press Enter
    ChatInput->>SelectionLabel: onSubmit()
    SelectionLabel->>Core: onSubmit()
    Core->>Core: copyElementsToClipboard()
    Core->>Machine: COPY_START
    Core->>Machine: COPY_DONE

Loading

[greptile-apps]

Additional Comments (1)

1. packages/react-grab/src/utils/detect-platform.ts, line 22 (link)

   logic: isLinux defaulting to true treats all unknown platforms (mobile, tablets, ChromeOS, etc.) as Linux

_{20 files reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}

[cubic-dev-ai]

1 issue found across 1 file (changes from recent commits).

Prompt for AI agents (all issues)

Check if these issues are valid — if so, understand the root cause of each and fix them.


<file name="packages/react-grab/src/components/selection-label/element-list-item.tsx">

<violation number="1" location="packages/react-grab/src/components/selection-label/element-list-item.tsx:66">
P1: In SolidJS, when using `&lt;Show&gt;` with a callback function without the `keyed` prop, the parameter is an accessor function that must be called. Use `{location()}` instead of `{location}`, or add the `keyed` prop to receive the value directly.</violation>
</file>

---

Since this is your first cubic review, here's how it works:

• cubic automatically reviews your code and comments on bugs and improvements
• Teach cubic by replying to its comments. cubic learns from your replies and gets better over time
• Ask questions if you need clarification on any suggestion

_{Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.}

[cubic-dev-ai]

10 issues found across 20 files

Prompt for AI agents (all issues)

Check if these issues are valid — if so, understand the root cause of each and fix them.


<file name="packages/react-grab/src/utils/detect-platform.ts">

<violation number="1" location="packages/react-grab/src/utils/detect-platform.ts:17">
P1: Missing browser environment check will cause crashes during SSR. The `navigator` object doesn&#39;t exist in Node.js/SSR contexts. Add a guard at the start of the function to return a safe default when not in a browser.</violation>
</file>

<file name="packages/react-grab/src/components/selection-label/element-list.tsx">

<violation number="1" location="packages/react-grab/src/components/selection-label/element-list.tsx:39">
P2: Hardcoded `id` will cause duplicate IDs if multiple `ElementList` components are rendered. Use SolidJS&#39;s `createUniqueId()` to generate a unique ID per component instance for proper accessibility.</violation>
</file>

<file name="packages/react-grab/src/core/index.tsx">

<violation number="1" location="packages/react-grab/src/core/index.tsx:99">
P1: Shortcut initialization can desync UI vs actual activation behavior when both persisted config and options.activationKey exist, and the `as RequiredActivationKey` cast can introduce `undefined` modifier booleans at runtime. Normalize the option value and make `options.activationKey` and `currentShortcut` come from the same resolved shortcut.</violation>

<violation number="2" location="packages/react-grab/src/core/index.tsx:507">
P2: `selectedElementsInfo` refetches on every `viewportVersion` change, which can repeatedly recompute expensive async metadata (stack traces / component names) during scroll/resize. Consider decoupling: keep a metadata resource keyed only on `frozenElements`, and recompute only `bounds` in a memo keyed on `viewportVersion`.</violation>

<violation number="3" location="packages/react-grab/src/core/index.tsx:523">
P2: The ID generation `el-${index}-${Date.now()}` creates unstable and potentially non-unique IDs. All elements in the same batch share the same timestamp, and IDs change on every resource re-run, which can cause unnecessary re-renders and key conflicts in the element list.

Consider using a stable identifier based on the element itself (e.g., a WeakMap-based ID generator or element reference hash).</violation>
</file>

<file name="packages/react-grab/src/components/toolbar/index.tsx">

<violation number="1" location="packages/react-grab/src/components/toolbar/index.tsx:484">
P2: The settings gear button should only be shown (or disabled) when `currentShortcut` and `onShortcutChange` are provided. Also, mirror the other toolbar buttons’ click handling by adding `stopImmediatePropagation()` + a `didDragOccur` guard, and set `type=&quot;button&quot;` to avoid accidental form submits.</violation>

<violation number="2" location="packages/react-grab/src/components/toolbar/index.tsx:517">
P2: Settings panel remains visible when toolbar is collapsed. Add `!isCollapsed()` to the condition to hide the settings panel when the toolbar collapses, preventing a confusing floating UI state.</violation>
</file>

<file name="packages/react-grab/src/components/selection-label/index.tsx">

<violation number="1" location="packages/react-grab/src/components/selection-label/index.tsx:491">
P1: Duplicate keyboard handling: passing `handleKeyDown` to ChatInput causes both parent and child handlers to fire. Escape will call both `onConfirmDismiss` and `onCancel`, and Enter will call `onSubmit` twice. Since ChatInput already handles Enter/Escape internally, remove the `onKeyDown` prop and use `onConfirmDismiss` for cancel to maintain the original behavior.</violation>
</file>

<file name="packages/react-grab/src/shortcut/state.ts">

<violation number="1" location="packages/react-grab/src/shortcut/state.ts:67">
P2: Empty catch block silently swallows errors. Consider logging the error or adding a comment explaining why errors are intentionally ignored to aid future debugging.</violation>
</file>

<file name="packages/react-grab/src/core/machine.ts">

<violation number="1" location="packages/react-grab/src/core/machine.ts:306">
P1: When toggling *off* a selected element, `frozenElement` is always reset to `remaining[0]`, which can unexpectedly change the primary selection even if the removed element wasn’t the active one. Preserve `context.frozenElement` unless it’s the element being removed (or it’s no longer in the remaining selection).</violation>
</file>

_{Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.}