feat(frontend): display Agent Skills and Commands in slash menu by eureka0928 · Pull Request #12982 · OpenHands/OpenHands

eureka0928 · 2026-02-21T09:11:09Z

Summary of PR

Adds a slash command autocomplete menu to the chat input. When the user types /, a dropdown appears showing available agent skills as slash commands with a "Commands" header, bold skill names, command labels, and first-sentence descriptions.

Filtering logic:

Skills with explicit / triggers (TaskTrigger) use those triggers directly
AgentSkills without / triggers get a derived /<skill-name> command
Skills with keyword-only triggers (e.g., docker, container) and repo-type skills are excluded from the menu

Features:

Real-time filtering as the user types (e.g., /in filters to /init)
Keyboard navigation (Arrow Up/Down, Enter/Tab to select, Escape to close)
Mouse selection with mouseDown to prevent input blur
Human-readable skill names (e.g., code-search → "Code search")
First-sentence content descriptions extracted from skill content
Full i18n support for the "Commands" header
ARIA accessibility (role="listbox", role="option", aria-selected)

Demo Screenshots/Videos

N/A.

Change Type

Checklist

I have read and reviewed the code and I understand what the code is doing.
I have tested the code to the best of my ability and ensured it works as expected.

Fixes

Resolves #12623

Release Notes

Include this change in the Release Notes.

Adds a slash command menu to the chat input that displays available agent skills and commands when typing /, with real-time filtering, keyboard navigation, and first-sentence descriptions.

eureka0928 · 2026-02-21T10:26:19Z

I think we need to pass description for item.skill for summary of every skill, currently crop the whole content to show on the command.

I can put the following PR

Looking forward to your review, @jpelletier1

hieptl · 2026-02-23T06:25:26Z

Hello @eureka928,

Thank you very much for creating this pull request. I truly appreciate your effort and contributions.

While running the code locally, I noticed a couple of issues that I would like to share:

Issue 1: The descriptions for each skill do not display as expected, and some of them appear to be truncated. I understand that you have already added a comment and tagged @jpelletier1 regarding this, and we can refer to the image below for additional context.

Issue 2: After selecting a skill, I am unable to trigger a slash command again. Please refer to the video below for more details.

issue2.mov

Thank you very much! 🙏

hieptl

Hello @eureka928, could you please add tests to cover your changes? Thank you very much! 🙏

hieptl · 2026-02-23T06:28:34Z

+          }}
+        >
+          <div className="flex items-center gap-2">
+            <span className="text-sm font-semibold text-white">


suggestion: We should consider using Typography.Text from the /frontend/src/ui folder instead of the span tag. Thank you! 🙏

enyst · 2026-02-24T03:43:38Z

Issue 2: After selecting a skill, I am unable to trigger a slash command again. Please refer to the video below for more details.

This is an interesting question. Should we insert two slash commands on the same line? It’s a command, it tells the agent to do a thing.

I think maybe it makes sense to have only one, and only at the start of the user message, otherwise the agent might get confused, the handling of potential arguments would get complex, and the user wouldn’t be able to use / inside the message 🤔 WDYT?

hieptl · 2026-02-24T09:00:19Z

Issue 2: After selecting a skill, I am unable to trigger a slash command again. Please refer to the video below for more details.

This is an interesting question. Should we insert two slash commands on the same line? It’s a command, it tells the agent to do a thing.

I think maybe it makes sense to have only one, and only at the start of the user message, otherwise the agent might get confused, the handling of potential arguments would get complex, and the user wouldn’t be able to use / inside the message 🤔 WDYT?

Hello @enyst,

I’m currently running the latest code from the main branch and tested triggering two skills within a single prompt. Below is the prompt I used:

I’m attempting to trigger two skills within a single message. The first skill is /onboard, and the second is /vercel.

Based on the prompt and the attached video:

I was able to enter the slash (/) in the middle of the message; it does not need to appear at the start of the user input.
Both skills were successfully triggered.

slash.mov

Please let me know if you need any additional details.

Thank you! 🙏

enyst · 2026-02-24T09:51:42Z

I see, OK, thank you. I think maybe it's a bit confusing, and we probably over-trigger right now:

Vercel trigger doesn't have slash
/onboard does. 🤔

The point is that I see a case for the expected UX here to be: a slash command is a command, it feels like a command, it probably starts the message, it can have inputs (which used to open a window or the agent asks for them, that wouldn't work so well with two commands, it seems to me). But I could be wrong.

Thank you for fixing it, @eureka928 ! We'll see how it feels like, in real use?

eureka0928 · 2026-02-24T09:53:30Z

I see, OK, thank you. I think maybe it's a bit confusing, and we probably over-trigger right now:

Vercel trigger doesn't have slash

/onboard does. 🤔

The point is that I see a case for the expected UX here to be: a slash command is a command, it feels like a command, it probably starts the message, it can have inputs (which used to open a window or the agent asks for them, that wouldn't work so well with two commands, it seems to me). But I could be wrong.

Thank you for fixing it, @eureka928 ! We'll see how it feels like, in real use?

Vercel doesn't work? cc: @hieptl I think you tested that?

eureka0928 · 2026-02-25T01:42:44Z

Hi @enyst @hieptl would you give me update on this?
Thank you

enyst · 2026-02-25T01:55:52Z

I withdraw my concern @eureka928 , I’ll be happy to try it as it is now, if Hiep Le is OK with it!

eureka0928 · 2026-02-25T01:58:03Z

I withdraw my concern @eureka928 , I’ll be happy to try it as it is now, if Hiep Le is OK with it!

Hi @hieptl would you give me your opinion? cc: @jpelletier1
If looks good, maybe good to merge?

jpelletier1 · 2026-02-25T17:00:05Z

I am not sure we need human-readable skill names.

As a first pass, it might be better for Skills in the menu to be listed like this:
{{slash command based on name attribute}}
{{description attribute, with trailing dots if it's longer than 1 line}}

Example:
/code-review
Structured code review covering style, readability, and security concerns with actionable...

eureka0928 · 2026-02-25T21:35:29Z

@jpelletier1 I updated the PR, would you review?

hieptl · 2026-02-26T08:59:05Z

Hello @eureka928,

While testing the pull request locally, I noticed a few points that I would like to share.

Issue 1:
It appears that the command description is written in Markdown. As a result, it does not display optimally in the slash command menu. The video below provides additional context for this behavior.

issue1.mov

Issue 2:
At the moment, the command is only triggered when the slash (/) is entered at the beginning of the message. Could you please clarify whether there is a reason it cannot be triggered when the slash is typed in the middle of the prompt?

Issue 3:
If I type some text first, move the cursor back to the beginning of the message, and then enter a slash (/), the menu does not appear. This scenario is also demonstrated in the video below.

issue3.mov

Issue 4:
When resizing the chat input and then typing a slash (/), the UI alignment of the slash command menu does not look correct. Ideally, the menu position should adjust appropriately when the input is resized. Please refer to the video below for more details.

issue4.mov

Thank you very much for your time and effort. 🙏

⸻

Hello @enyst and @jpelletier1,

While testing these changes, I made the following assumptions, and I would appreciate your confirmation:

Assumption 1:
The slash command menu can only be triggered at the start of the message.

Assumption 2:
Only one slash command can be triggered within a single message.

Please feel free to let me know if these assumptions are accurate.

Thank you very much! 🙏

eureka0928 · 2026-02-26T11:46:06Z

Hi @hieptl, thank you for the thorough testing and detailed feedback! 🙏

Regarding Issues #2 and #3 (slash trigger behavior):

These are working as intended. The slash command menu is designed to only trigger when / is at the very start of the message — the regex is ^\/(\S*)$, which requires the entire input to be just the slash command.

This is a deliberate design choice to:

Prevent accidental triggers when typing URLs, file paths, or other text containing /
Keep the interaction model simple: one slash command per message, always at the start

So your assumptions are correct:

Assumption 1 ✅ — The slash command menu can only be triggered at the start of the message.
Assumption 2 ✅ — Only one slash command can be triggered within a single message.

Issue #3 (cursor-to-start) follows from the same constraint — once there's other text in the input, the full innerText won't match the ^/(\S*)$ pattern regardless of cursor position.

I'll look into fixing Issue #1 (Markdown in descriptions) and Issue #4 (menu misalignment on resize) separately.

hieptl · 2026-02-26T11:53:35Z

Hello @eureka928,

Could you please also take a look at issue 3? Based on the requirements, it is still considered valid. While typing / at the very beginning works as expected, the slash command does not trigger if a user enters text first and then moves the cursor back to the starting position.

once there's other text in the input, the full innerText won't match the ^/(\S*)$ pattern regardless of cursor position.

This appears to be related to the current technical approach and would need to be addressed as part of the fix. For example, if a user types a longer message and then moves back to the beginning to insert a command, they currently have to delete all existing text before the slash command will work again, which is not an ideal experience.

Thank you very much! 🙏

eureka0928 · 2026-02-26T21:36:18Z

Screencast.from.2026-02-26.22-30-18.webm

jpelletier1 · 2026-02-26T21:51:12Z

Video looks good to me. I haven't been able to test this branch, but video seems to implement the feature correectly.

enyst

Awesome, thank you!

I think maybe we could take this PR in, and play with the behavior to see if/what more we may need.

eureka0928 · 2026-02-26T22:00:34Z

Video looks good to me. I haven't been able to test this branch, but video seems to implement the feature correectly.

Would you approve on this so that @hieptl can test with branch and merge when he is available?
Thank you for review

Add a hook that detects "/" at the start of chat input, builds a filtered list of skill commands, and handles keyboard navigation (Arrow Up/Down, Enter/Tab to select, Escape to close).

Add an accessible popup menu that renders above the chat input, showing filtered slash commands with role="listbox"/role="option" and keyboard-driven selection highlighting.

Wire the useSlashCommand hook and SlashCommandMenu component into CustomChatInput and ChatInputContainer so typing "/" shows the autocomplete menu with available agent skills and commands. Closes OpenHands#12623

Add mock microagents endpoint to conversation handlers so the slash command menu is testable in dev:mock mode without a backend.

Update menu to match reference design with Commands header, bold skill names, slash command labels, and first-sentence descriptions. Filter skills to only show explicit slash triggers and agentskills type. Update mock data with realistic skill types for testing.

Trim contentEditable innerText to handle trailing newlines that break the slash detection regex. Reset selectedIndex on item selection to prevent stale index on menu reopen.

- Fix description truncation by extracting from YAML frontmatter description field, falling back to first meaningful body line - Add i18n for aria-label using existing CHAT_INTERFACE$COMMANDS key - Replace raw span tags with Typography.Text component - Extract SlashCommandMenuItem into its own component - Add 15 unit tests covering menu rendering, selection, descriptions, accessibility, and getSkillDescription edge cases

- Add bounds check for selectedIndex before calling selectItem - Restore focus after command selection for Enter-to-submit - Memoize getSkillDescription in SlashCommandMenuItem - Fix test import ordering

The isMobileDevice() check used touch support alone, which caused touchscreen laptops to be treated as mobile devices. This disabled Enter-to-submit in the chat input. Now checks the primary pointer type via matchMedia("(pointer: fine)") to distinguish laptops from real mobile devices.

…bile detection, and simplify menu display

…nu positioning Strip inline markdown syntax (bold, italic, code, links, images) from skill descriptions so they render as plain text in the slash command menu. Anchor the slash command menu to the input row instead of the full container so grip-resizing no longer misaligns the menu.

…rt of input Refactor slash command detection to be cursor-aware so the menu triggers when "/" is typed anywhere (after a space or at position 0), not only when the entire input matches /^\/<word>$/. Selection now replaces only the slash word instead of wiping the full input. Cursor-movement keys dismiss the menu to prevent stale range issues.

enyst · 2026-02-26T22:54:53Z

Oh, no worries, eureka! For visibility for everyone: I mentioned in DM, personally I prefer to leave it to our Frontend wizards - Hiep Le, Stephan -, to approve/merge (it's a FE PR), but that's just a detail and I'm sure they'll take a look soon.

Whether or not they may want to test it manually again in this case, I don't know; that, too, is up to them.

In my reading, Joe doesn't have concerns either.

We have 201 PRs in this repo (!), though, that's a very high maintainer load.

I just think we could give some space to our FE do their magic, they know better how FE is like. Hitting some 'approved' button or not doesn't matter compared to that. 😅

jpelletier1 · 2026-02-27T12:00:33Z

Thanks @enyst :)

@eureka928 - overall the video looks like it implements the requirements, so thanks! I am not part of the OpenHands engineering team, so I don't have the authority to review the code ;-) So agree we'll leave it to FE code owners to review next!

…mmand-menu

hieptl

Thank you! 🙏

eureka0928 requested review from amanape and hieptl as code owners February 21, 2026 09:11

eureka0928 force-pushed the feat/12623-slash-command-menu branch from edb8d38 to 5d4a07a Compare February 21, 2026 09:15

hieptl requested review from all-hands-bot and removed request for all-hands-bot February 23, 2026 05:26

hieptl reviewed Feb 23, 2026

View reviewed changes

eureka0928 requested a review from hieptl February 23, 2026 09:07

eureka0928 force-pushed the feat/12623-slash-command-menu branch from 90ad8d8 to c6c6950 Compare February 26, 2026 11:41

eureka0928 force-pushed the feat/12623-slash-command-menu branch from 5f7b92c to 1b979e1 Compare February 26, 2026 21:18

enyst reviewed Feb 26, 2026

View reviewed changes

eureka0928 added 2 commits February 26, 2026 23:30

feat(frontend): add useSlashCommand hook for slash command autocomplete

ff9a150

Add a hook that detects "/" at the start of chat input, builds a filtered list of skill commands, and handles keyboard navigation (Arrow Up/Down, Enter/Tab to select, Escape to close).

feat(frontend): add SlashCommandMenu dropdown component

6a74417

Add an accessible popup menu that renders above the chat input, showing filtered slash commands with role="listbox"/role="option" and keyboard-driven selection highlighting.

eureka0928 added 11 commits February 26, 2026 23:30

feat(frontend): integrate slash command menu into chat input

ef9dd85

Wire the useSlashCommand hook and SlashCommandMenu component into CustomChatInput and ChatInputContainer so typing "/" shows the autocomplete menu with available agent skills and commands. Closes OpenHands#12623

feat(frontend): add mock microagents for slash command menu testing

d1640a8

Add mock microagents endpoint to conversation handlers so the slash command menu is testable in dev:mock mode without a backend.

fix(frontend): fix slash command menu not re-triggering after selection

ec6b7ba

Trim contentEditable innerText to handle trailing newlines that break the slash detection regex. Reset selectedIndex on item selection to prevent stale index on menu reopen.

refactor(frontend): improve slash command robustness and best practices

76c6616

- Add bounds check for selectedIndex before calling selectItem - Restore focus after command selection for Enter-to-submit - Memoize getSkillDescription in SlashCommandMenuItem - Fix test import ordering

fix(frontend): fix slash command menu Enter key, popup re-trigger, mo…

86bf08a

…bile detection, and simplify menu display

style(frontend): fix prettier formatting in use-slash-command

738af18

eureka0928 force-pushed the feat/12623-slash-command-menu branch from 1b979e1 to bb32845 Compare February 26, 2026 22:30

Merge remote-tracking branch 'upstream/main' into feat/12623-slash-co…

ad15dac

…mmand-menu

hieptl approved these changes Feb 27, 2026

View reviewed changes

hieptl merged commit a29ed4d into OpenHands:main Feb 27, 2026
16 checks passed

hieptl mentioned this pull request Mar 9, 2026

feat(frontend): add slash command menu for chat input #12641

Closed

8 tasks

eureka0928 deleted the feat/12623-slash-command-menu branch April 12, 2026 03:36

Conversation

eureka0928 commented Feb 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary of PR

Demo Screenshots/Videos

Change Type

Checklist

Fixes

Release Notes

Uh oh!

eureka0928 commented Feb 21, 2026

Uh oh!

hieptl commented Feb 23, 2026

Uh oh!

hieptl left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

hieptl Feb 23, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

enyst commented Feb 24, 2026

Uh oh!

hieptl commented Feb 24, 2026

Uh oh!

enyst commented Feb 24, 2026

Uh oh!

eureka0928 commented Feb 24, 2026

Uh oh!

eureka0928 commented Feb 25, 2026

Uh oh!

enyst commented Feb 25, 2026

Uh oh!

eureka0928 commented Feb 25, 2026

Uh oh!

jpelletier1 commented Feb 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

eureka0928 commented Feb 25, 2026

Uh oh!

hieptl commented Feb 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

eureka0928 commented Feb 26, 2026

Uh oh!

hieptl commented Feb 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

eureka0928 commented Feb 26, 2026

Uh oh!

jpelletier1 commented Feb 26, 2026

Uh oh!

enyst left a comment

Choose a reason for hiding this comment

Uh oh!

eureka0928 commented Feb 26, 2026

Uh oh!

enyst commented Feb 26, 2026

Uh oh!

jpelletier1 commented Feb 27, 2026

Uh oh!

hieptl left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

eureka0928 commented Feb 21, 2026 •

edited

Loading

jpelletier1 commented Feb 25, 2026 •

edited

Loading

hieptl commented Feb 26, 2026 •

edited

Loading

hieptl commented Feb 26, 2026 •

edited

Loading