improvement(home): position @ mention popup at caret and fix icon consistency

[waleedlatif1]

Summary

• @ mention popup now opens relative to where `@` was typed (mirror div technique for caret position) instead of always anchoring to the + button
• • button click still opens the menu anchored to the button as before
• Full keyboard navigation: ArrowDown from search focuses first item, ArrowUp from first item returns to search, Enter selects first filtered result
• Fixed icon spacing inconsistency across resource types — workflow, file, knowledge base, and table items now all use consistent `gap-2` from the parent `DropdownMenuItem`
• Added icons to knowledge base and table dropdown items (previously showed text only)

Type of Change

• Bug fix
• Improvement

Testing

Tested manually

Checklist

• Code follows project style guidelines
• Self-reviewed my changes
• Tests added/updated and passing
• No new warnings introduced
• I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

[vercel]

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

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
docs	Skipped		Mar 28, 2026 9:43pm

[cursor]

PR Summary

Medium Risk
UI behavior changes in the chat input dropdown (anchoring and keyboard focus handling) could introduce regressions in menu positioning/focus across browsers, but scope is limited to client-side interaction. Small auth helper tweak changes a boolean return path but should remain functionally equivalent (undefined vs false).

Overview
The @ mention/plus menu in UserInput is now opened anchored to the caret position (via a mirrored textarea measurement) instead of always anchoring to the + button, while + clicks still open relative to the button.

The dropdown was refactored to support an explicit anchor point and improved keyboard navigation (ArrowDown moves focus into results, ArrowUp from first result returns to search, Enter selects the first match).

Resource dropdown rendering was standardized by adding a reusable IconDropdownItem and updating table/knowledgebase items to include consistent icons/spacing in the registry.

^{Written by Cursor Bugbot for commit 617983e. Configure here.}

[waleedlatif1]

@greptile

[waleedlatif1]

@cursor review

[greptile-apps]

Greptile Summary

This PR improves the @ mention popup to open at the caret position (using a mirror-div technique) instead of always anchoring to the + button, refactors PlusMenuDropdown keyboard navigation to use native focus rather than a managed active-index, and fixes icon consistency across resource dropdown items (knowledge base and table now show icons matching the other resource types).

Key changes:

• getCaretAnchor() in user-input.tsx correctly implements the mirror-div approach with top:0/left:0 origin pinning and scroll offset correction
• plus-menu-dropdown.tsx decouples the visible + button from DropdownMenuTrigger, using a zero-size invisible div as the trigger anchor and calling doOpen() directly from the button; ArrowDown from search focuses the first item, ArrowUp on the first item returns focus to search
• resource-registry.tsx introduces IconDropdownItem and removes redundant spacing overrides (mr-[0px], mr-2) in favour of the parent DropdownMenuItem's existing gap-2
• hybrid.ts: removing ?? false from hasExternalApiCredentials makes the function return boolean | undefined instead of boolean, which is a type error under the project's strict: true TypeScript configuration — the ?? false guard needs to be restored

Confidence Score: 4/5

Safe to merge after restoring the ?? false guard in hybrid.ts to fix the strict-mode TypeScript type error.

All UI improvements are well-implemented and the previously raised concerns (mirror-div origin pinning, early-return for null button rect) have been addressed. A single one-line type regression in hybrid.ts (boolean | undefined returned as boolean under strict: true) needs to be fixed before merge.

apps/sim/lib/auth/hybrid.ts — missing ?? false guard introduces a TypeScript strict-mode type error.

Important Files Changed

Filename	Overview
apps/sim/lib/auth/hybrid.ts	Removes ?? false guard, causing hasExternalApiCredentials to return `boolean
apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx	Adds getCaretAnchor() mirror-div helper (with correctly pinned top:0/left:0 origin and scroll correction) and passes the computed anchor to plusMenuRef.current?.open().
apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/plus-menu-dropdown.tsx	Refactors to zero-size anchor trigger div + external button pattern; replaces index-based keyboard nav with native focus; adds ArrowUp-to-search-field shortcut; early-returns when button ref is unavailable.
apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-registry/resource-registry.tsx	Introduces IconDropdownItem to add icons to knowledge-base and table items; removes no-op mr-[0px] and redundant mr-2 from items that rely on parent gap-2 for spacing.
apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/constants.ts	Updates PlusMenuHandle.open to accept an optional anchor argument — a clean, backward-compatible interface change.

Sequence Diagram

sequenceDiagram
    participant User
    participant Textarea as UserInput (textarea)
    participant getCaretAnchor
    participant PlusMenu as PlusMenuDropdown
    participant DropdownMenu as Radix DropdownMenu

    User->>Textarea: types "@"
    Textarea->>getCaretAnchor: getCaretAnchor(textarea, caretPos)
    getCaretAnchor-->>Textarea: { left, top } (viewport coords)
    Textarea->>PlusMenu: plusMenuRef.open({ left, top })
    PlusMenu->>PlusMenu: setAnchorPos({ left, top })
    PlusMenu->>DropdownMenu: setOpen(true)
    DropdownMenu-->>User: popup appears at caret

    User->>PlusMenu: clicks + button
    PlusMenu->>PlusMenu: doOpen() — reads buttonRef.getBoundingClientRect()
    PlusMenu->>PlusMenu: setAnchorPos({ left, top })
    PlusMenu->>DropdownMenu: setOpen(true)
    DropdownMenu-->>User: popup appears at + button

    User->>PlusMenu: ArrowDown from search input
    PlusMenu->>DropdownMenu: firstItem.focus()
    User->>PlusMenu: ArrowUp from first item
    PlusMenu->>PlusMenu: searchRef.focus()

Loading

Comments Outside Diff (1)

1. apps/sim/lib/auth/hybrid.ts, line 28 (link)

   Type error: boolean | undefined returned as boolean

   Headers.get() returns string | null, so auth?.startsWith(BEARER_PREFIX) evaluates to boolean | undefined (optional chaining on a null value returns undefined). The function declares a boolean return type, and the project's strict: true / strictNullChecks configuration (set in packages/tsconfig/base.json) will flag this as a compilation error.

   The previous ?? false was the correct nullish coalescing guard to collapse undefined into false.

_{Reviews (2): Last reviewed commit: "chore(auth): restore hybrid.ts to stagin..." | Re-trigger Greptile}

[waleedlatif1]

@greptile

[waleedlatif1]

@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.}