feat: add conversation search modal and shortcut-driven discovery by FraterCCCLXIII · Pull Request #1138 · OpenHands/agent-canvas

FraterCCCLXIII · 2026-06-04T16:45:14Z

Summary

add a command-palette style conversation search modal in the sidebar flow, including keyboard navigation (ArrowUp/ArrowDown/Enter) and contextual result metadata
add global search hotkey support (primary modifier + K) for fast opening when focus is not in a typing target
introduce search-result match highlighting and reusable filtering helpers to keep search behavior consistent across panel and modal interactions
preserve existing conversation list behavior while improving header controls (search/filter/new chat ordering) and reducing modal/header friction
expand i18n coverage with new conversation-search labels and tooltip strings for all supported locales
address review feedback: search now queries the full server conversation index (not just the sidebar-loaded page)

Server-side search (review fix)

Previously the modal filtered sortedVisibleConversations from the sidebar, so only conversations already loaded in the list (e.g. 10 of 100) were searchable.

The modal now uses useConversationSearch → searchMatchingConversations():

Empty query: fetches the 50 most recent conversations from /api/conversations/search
Non-empty query: paginates the server index (100/page, up to 50 pages), then applies the existing multi-field token filter on the aggregated results
Cloud: passes title__contains when available for server-side title filtering
Shows a loading spinner while the debounced (300ms) query is in flight

Files of Note

src/components/features/conversation-panel/conversation-panel-search-modal.tsx
src/api/conversation-service/search-matching-conversations.ts
src/hooks/query/use-conversation-search.ts
src/utils/conversation-search-filter.ts
src/components/features/conversation-panel/conversation-panel.tsx
src/utils/keyboard-shortcut.ts
src/i18n/translation.json

Test Plan

npm test -- __tests__/api/search-matching-conversations.test.ts __tests__/components/features/conversation-panel/conversation-panel-search-modal.test.tsx __tests__/components/features/conversation-panel/filter-conversations-by-query.test.ts __tests__/utils/keyboard-shortcut.test.ts — 13/13 passed
npm test -- __tests__/components/features/conversation-panel/conversation-panel.test.tsx -t "conversation search" — 4/4 passed
npm run typecheck
Rebased onto latest upstream/main (commit 347d877c)

Made with Cursor

vercel · 2026-06-04T16:45:19Z

@FraterCCCLXIII is attempting to deploy a commit to the openhands Team on Vercel.

A member of the Team first needs to authorize it.

FraterCCCLXIII · 2026-06-04T16:49:21Z

hieptl

Hello @FraterCCCLXIII,

Thank you for creating this pull request.

From what I can tell, conversation search appears to be performed on the client side rather than the server side.

If that's the case, when we have 100 conversations but only 10 are currently rendered in the conversation list, the search would only be able to match those 10 rendered conversations instead of all 100 conversations.

Am I understanding this correctly?

Thank you very much! 🙏

github-actions · 2026-06-11T13:58:13Z

✅ Mock-LLM E2E Tests

54/54 passed

Commit: 54a775de · Workflow run · Test artifacts

Status	Test	Duration
✅	mock-llm-acp-agent.spec.ts › mock-LLM ACP agent conversation › step 1: configure ACP agent via Settings → Agent UI	13.7s
✅	mock-llm-acp-agent.spec.ts › mock-LLM ACP agent conversation › step 2: reload and verify ACP settings are persisted in UI	5.5s
✅	mock-llm-acp-agent.spec.ts › mock-LLM ACP agent conversation › step 3: start ACP conversation and verify agent reply	6.3s
✅	mock-llm-acp-agent.spec.ts › mock-LLM ACP agent conversation › step 4: resume ACP conversation from sidebar after navigating away	5.7s
✅	mock-llm-auth-modes.spec.ts › auth mode: fresh install with runtime-injected key › reaches the onboarding modal without pre-seeded localStorage	1.3s
✅	mock-llm-auth-modes.spec.ts › auth mode: non-public key rotation › recovers when localStorage has a stale session API key	5.3s
✅	mock-llm-auth-modes.spec.ts › auth mode: public gate › shows the auth screen when no key is configured	1.1s
✅	mock-llm-auth-modes.spec.ts › auth mode: public gate › rejects an incorrect key with an inline error	1.3s
✅	mock-llm-auth-modes.spec.ts › auth mode: public gate › allows access after pasting the correct key	1.7s
✅	mock-llm-auth-modes.spec.ts › auth mode: public gate › skips auth screen for returning user with valid stored key	715ms
✅	mock-llm-auth-modes.spec.ts › auth mode: public gate › re-prompts when the server rotates its key (stale localStorage)	1.4s
✅	mock-llm-automation.spec.ts › mock-LLM automation lifecycle › step 1: setup LLM profile and register automation trajectory	7.3s
✅	mock-llm-automation.spec.ts › mock-LLM automation lifecycle › step 2: create automation and dispatch run via the UI	30.4s
✅	mock-llm-automation.spec.ts › mock-LLM automation lifecycle › step 3: verify automation and run on the automations page	6.2s
✅	mock-llm-conversation.spec.ts › mock-LLM agent-server conversation › step 1: create an LLM profile pointing at the mock LLM server	6.2s
✅	mock-llm-conversation.spec.ts › mock-LLM agent-server conversation › step 2: activate the mock-llm profile and verify settings API	6.1s
✅	mock-llm-conversation.spec.ts › mock-LLM agent-server conversation › step 3: run a conversation with the mock LLM	6.5s
✅	mock-llm-conversation.spec.ts › mock-LLM agent-server conversation › step 4: resume conversation from sidebar after navigating away	5.7s
✅	mock-llm-cross-connect.spec.ts › cross-connect: frontend-only → backend-only › frontend-only connects to a separate backend-only instance	15.8s
✅	mock-llm-cross-connect.spec.ts › cross-connect: frontend-only → multiple backends › connects to two separate backends and switches between them	19.5s
✅	mock-llm-files-and-git.spec.ts › files tab, git control bar, and browser tab › step 1: ensure mock LLM profile is configured	206ms
✅	mock-llm-files-and-git.spec.ts › files tab, git control bar, and browser tab › step 2: start conversation and attach workspace metadata	11.7s
✅	mock-llm-files-and-git.spec.ts › files tab, git control bar, and browser tab › step 3: git control bar shows workspace pill and git actions	25.3s
✅	mock-llm-files-and-git.spec.ts › files tab, git control bar, and browser tab › step 4: files tab defaults to diff view for attached workspace	5.8s
✅	mock-llm-files-and-git.spec.ts › files tab, git control bar, and browser tab › step 5: browser tab shows empty state	6.3s
✅	mock-llm-files-and-git.spec.ts › files tab, git control bar, and browser tab › step 6: files tab defaults to file-tree view without attached workspace	7.4s
✅	mock-llm-folder-workspace.spec.ts › mock-LLM folder browser → workspace → conversation › step 1: browse to a folder, add it as a workspace, and launch a conversation with the correct working_dir	8.5s
✅	mock-llm-image-upload.spec.ts › mock-LLM image upload › attaching an image embeds it as base64 in the LLM completion call	13.4s
✅	mock-llm-mcp-github.spec.ts › MCP GitHub server install flow › step 1: GitHub card is visible on the MCP marketplace page	5.5s
✅	mock-llm-mcp-github.spec.ts › MCP GitHub server install flow › step 2: clicking GitHub card opens the install modal with correct fields	5.7s
✅	mock-llm-mcp-github.spec.ts › MCP GitHub server install flow › step 3: full install flow — fill PAT, submit, verify installed	12.7s
✅	mock-llm-mcp-github.spec.ts › MCP GitHub server install flow › step 4: installed GitHub server can be deleted	5.8s
✅	mock-llm-model-switch.spec.ts › mock-LLM /model slash command › step 1: configure LLM, create switch-target profile, register trajectory	13.0s
✅	mock-llm-model-switch.spec.ts › mock-LLM /model slash command › step 2: start conversation, switch profile via /model, verify switch	6.9s
✅	mock-llm-onboarding-happy-path.spec.ts › onboarding happy path › completes the full onboarding flow and launches a conversation	4.3s
✅	mock-llm-onboarding-regressions.spec.ts › onboarding recent regressions › keeps the modal open on backdrop click and Escape	1.4s
✅	mock-llm-onboarding-regressions.spec.ts › onboarding recent regressions › defaults the LLM setup step to OpenAI GPT-5.5	1.6s
✅	mock-llm-partial-stack.spec.ts › partial stack: --frontend-only › serves the frontend but returns 503 for backend routes	7.3s
✅	mock-llm-partial-stack.spec.ts › partial stack: --backend-only › serves backend APIs but returns 503 for the frontend root	13.1s
✅	mock-llm-partial-stack.spec.ts › partial stack: port conflict › fails with a clear error when the ingress port is occupied	105ms
✅	mock-llm-partial-stack.spec.ts › partial stack: port conflict › starts successfully on a free port after a conflict	6.0s
✅	mock-llm-preset-automation.spec.ts › preset automation → slash command conversation › automation card sends the correct slash command to a conversation	15.9s
✅	mock-llm-preset-automation.spec.ts › preset automation → slash command conversation › direct slash command from home page triggers skill activation	13.6s
✅	mock-llm-profile-management.spec.ts › active profile deletion + reconciliation › active profile is deletable and reconciliation activates another profile	8.5s
✅	mock-llm-profile-management.spec.ts › same-model profile identity › chat header shows the correct profile when two profiles share the same model	15.8s
✅	mock-llm-profile-management.spec.ts › litellm_proxy proxy base_url preservation › re-saving a litellm_proxy profile from Basic view preserves the proxy base_url	7.7s
✅	mock-llm-skills.spec.ts › skill loading: project, user, and deletion › project skill in workspace/.agents/skills/ triggers on matching keyword	13.5s
✅	mock-llm-skills.spec.ts › skill loading: project, user, and deletion › user skill in ~/.openhands/skills/ triggers on matching keyword	13.4s
✅	mock-llm-skills.spec.ts › skill loading: project, user, and deletion › deleting a user skill removes it from subsequent conversations	13.4s
✅	mock-llm-ui-regressions.spec.ts › UI regressions › scopes standalone styles to the agent-server-ui shell	1.3s
✅	mock-llm-ui-regressions.spec.ts › UI regressions › renders critic results on agent messages and finish actions	1.4s
✅	mock-llm-ui-regressions.spec.ts › UI regressions › loads older events when scrolling up	1.6s
✅	mock-llm-ui-regressions.spec.ts › UI regressions › selected workspace persists after navigating away and returning	1.9s
✅	mock-llm-ui-regressions.spec.ts › UI regressions › cleared sessionStorage yields empty workspace selection	953ms

_{Posted by the Mock-LLM E2E workflow · results are deterministic (scripted LLM responses)}

Users can filter loaded conversations from an expandable search field in the panel header, with substring matching across title and metadata. Co-authored-by: Cursor <cursoragent@cursor.com>

Search opens in a centered overlay with filtered results, keyboard navigation, and context labels while keeping the sidebar list unchanged. Co-authored-by: Cursor <cursoragent@cursor.com>

Center the search palette with standard modal styling, add result timestamps, wire Cmd/Ctrl+K with grey tooltip hints, and simplify header button labels. Co-authored-by: Cursor <cursoragent@cursor.com>

Reorder the conversation panel header actions so the create chat control renders to the right of the filter icon, matching the intended toolbar layout. Co-authored-by: Cursor <cursoragent@cursor.com>

Rebase onto latest main and route the search modal through paginated /api/conversations/search results instead of filtering only the sidebar's loaded page, so matches include conversations beyond the visible list. Co-authored-by: Cursor <cursoragent@cursor.com>

github-actions · 2026-06-19T16:01:04Z

✅ Mock-LLM E2E Tests

60/60 passed

Commit: 347d877c · Workflow run · Test artifacts

Status	Test	Duration
✅	automations/mock-llm-automation.spec.ts › mock-LLM automation lifecycle › step 1: setup LLM profile and register automation trajectory	7.7s
✅	automations/mock-llm-automation.spec.ts › mock-LLM automation lifecycle › step 2: create automation and dispatch run via the UI	26.5s
✅	automations/mock-llm-automation.spec.ts › mock-LLM automation lifecycle › step 3: verify automation and run on the automations page	6.3s
✅	automations/mock-llm-preset-automation.spec.ts › preset automation → slash command conversation › automation card sends the correct slash command to a conversation	16.1s
✅	automations/mock-llm-preset-automation.spec.ts › preset automation → slash command conversation › direct slash command from home page triggers skill activation	13.8s
✅	backends/mock-llm-auth-modes.spec.ts › auth mode: fresh install with runtime-injected key › reaches the onboarding modal without pre-seeded localStorage	1.4s
✅	backends/mock-llm-auth-modes.spec.ts › auth mode: non-public key rotation › recovers when localStorage has a stale session API key	5.3s
✅	backends/mock-llm-auth-modes.spec.ts › auth mode: public gate › shows first-run onboarding before the auth screen when no key is configured	1.4s
✅	backends/mock-llm-auth-modes.spec.ts › auth mode: public gate › rejects an incorrect key with an inline error	1.7s
✅	backends/mock-llm-auth-modes.spec.ts › auth mode: public gate › allows access after pasting the correct key	1.9s
✅	backends/mock-llm-auth-modes.spec.ts › auth mode: public gate › skips auth screen for returning user with valid stored key	787ms
✅	backends/mock-llm-auth-modes.spec.ts › auth mode: public gate › re-prompts when the server rotates its key (stale localStorage)	1.4s
✅	backends/mock-llm-cross-connect.spec.ts › cross-connect: frontend-only → backend-only › frontend-only connects to a separate backend-only instance	16.0s
✅	backends/mock-llm-cross-connect.spec.ts › cross-connect: frontend-only → multiple backends › connects to two separate backends and switches between them	21.8s
✅	backends/mock-llm-partial-stack.spec.ts › partial stack: --frontend-only › serves the frontend but returns 503 for backend routes	7.4s
✅	backends/mock-llm-partial-stack.spec.ts › partial stack: --backend-only › serves backend APIs but returns 503 for the frontend root	14.1s
✅	backends/mock-llm-partial-stack.spec.ts › partial stack: port conflict › fails with a clear error when the ingress port is occupied	111ms
✅	backends/mock-llm-partial-stack.spec.ts › partial stack: port conflict › starts successfully on a free port after a conflict	6.0s
✅	conversations/mock-llm-conversation.spec.ts › mock-LLM agent-server conversation › step 1: create an LLM profile pointing at the mock LLM server	6.3s
✅	conversations/mock-llm-conversation.spec.ts › mock-LLM agent-server conversation › step 2: activate the mock-llm profile and verify settings API	6.2s
✅	conversations/mock-llm-conversation.spec.ts › mock-LLM agent-server conversation › step 3: run a conversation with the mock LLM	6.6s
✅	conversations/mock-llm-conversation.spec.ts › mock-LLM agent-server conversation › step 4: resume conversation from sidebar after navigating away	5.7s
✅	conversations/mock-llm-image-upload.spec.ts › mock-LLM image upload › attaching an image embeds it as base64 in the LLM completion call	13.5s
✅	files/mock-llm-files-and-git.spec.ts › files tab, git control bar, and browser tab › step 1: ensure mock LLM profile is configured	7.2s
✅	files/mock-llm-files-and-git.spec.ts › files tab, git control bar, and browser tab › step 2: start conversation and attach workspace metadata	11.6s
✅	files/mock-llm-files-and-git.spec.ts › files tab, git control bar, and browser tab › step 3: git control bar shows workspace pill and git actions	25.3s
✅	files/mock-llm-files-and-git.spec.ts › files tab, git control bar, and browser tab › step 4: files tab defaults to diff view for attached workspace	5.9s
✅	files/mock-llm-files-and-git.spec.ts › files tab, git control bar, and browser tab › step 5: browser tab shows empty state	6.3s
✅	files/mock-llm-files-and-git.spec.ts › files tab, git control bar, and browser tab › step 6: files tab defaults to file-tree view without attached workspace	8.3s
✅	home/mock-llm-folder-workspace.spec.ts › mock-LLM folder browser → workspace → conversation › step 1: browse to a folder, add it as a workspace, and launch a conversation with the correct working_dir	8.7s
✅	mcp/mock-llm-mcp-github.spec.ts › MCP GitHub server install flow › step 1: GitHub card is visible on the MCP marketplace page	5.6s
✅	mcp/mock-llm-mcp-github.spec.ts › MCP GitHub server install flow › step 2: clicking GitHub card opens the install modal with correct fields	5.7s
✅	mcp/mock-llm-mcp-github.spec.ts › MCP GitHub server install flow › step 3: full install flow — fill PAT, submit, verify installed	13.1s
✅	mcp/mock-llm-mcp-github.spec.ts › MCP GitHub server install flow › step 4: installed GitHub server can be deleted	5.8s
✅	mcp/mock-llm-mcp-slack-credentials.spec.ts › MCP Test Connection credential verification (Slack) › install: invalid Slack credentials are blocked with a credential-check error	5.8s
✅	mcp/mock-llm-mcp-slack-credentials.spec.ts › MCP Test Connection credential verification (Slack) › install: a valid token missing only a scope still installs (missing_scope is not a credential failure)	6.0s
✅	mcp/mock-llm-mcp-slack-credentials.spec.ts › MCP Test Connection credential verification (Slack) › install: an older agent server that omits tool_result still installs (compat)	5.9s
✅	mcp/mock-llm-mcp-slack-credentials.spec.ts › MCP Test Connection credential verification (Slack) › edit: Test Connection verifies the stored credentials and surfaces a credential failure	5.8s
✅	mcp/mock-llm-mcp-slack-credentials.spec.ts › MCP Test Connection credential verification (Slack) › edit: Test Connection reports success for valid stored credentials	5.8s
✅	mcp/mock-llm-mcp-slack-credentials.spec.ts › MCP Test Connection credential verification (Slack) › custom (non-catalog) server: Test Connection attaches no verification probe	5.8s
✅	onboarding/mock-llm-onboarding-happy-path.spec.ts › onboarding happy path › completes the full onboarding flow and launches a conversation	4.6s
✅	onboarding/mock-llm-onboarding-regressions.spec.ts › onboarding recent regressions › keeps the modal open on backdrop click and Escape	1.5s
✅	onboarding/mock-llm-onboarding-regressions.spec.ts › onboarding recent regressions › defaults the LLM setup step to OpenAI GPT-5.5	1.7s
✅	regressions/mock-llm-ui-regressions.spec.ts › UI regressions › scopes standalone styles to the agent-server-ui shell	1.5s
✅	regressions/mock-llm-ui-regressions.spec.ts › UI regressions › renders critic results on agent messages and finish actions	1.5s
✅	regressions/mock-llm-ui-regressions.spec.ts › UI regressions › loads older events when scrolling up	1.7s
✅	regressions/mock-llm-ui-regressions.spec.ts › UI regressions › selected workspace persists after navigating away and returning	2.5s
✅	regressions/mock-llm-ui-regressions.spec.ts › UI regressions › cleared sessionStorage yields empty workspace selection	1.3s
✅	settings/mock-llm-acp-agent.spec.ts › mock-LLM ACP agent conversation › step 1: configure ACP agent via Settings → Agent UI	13.9s
✅	settings/mock-llm-acp-agent.spec.ts › mock-LLM ACP agent conversation › step 2: reload and verify ACP settings are persisted in UI	5.6s
✅	settings/mock-llm-acp-agent.spec.ts › mock-LLM ACP agent conversation › step 3: start ACP conversation and verify agent reply	6.8s
✅	settings/mock-llm-acp-agent.spec.ts › mock-LLM ACP agent conversation › step 4: resume ACP conversation from sidebar after navigating away	5.8s
✅	settings/mock-llm-model-switch.spec.ts › mock-LLM /model slash command › step 1: configure LLM, create switch-target profile, register trajectory	13.3s
✅	settings/mock-llm-model-switch.spec.ts › mock-LLM /model slash command › step 2: start conversation, switch profile via /model, verify switch	6.9s
✅	settings/mock-llm-profile-management.spec.ts › active profile deletion + reconciliation › active profile is deletable and reconciliation activates another profile	8.7s
✅	settings/mock-llm-profile-management.spec.ts › same-model profile identity › chat header shows the correct profile when two profiles share the same model	15.3s
✅	settings/mock-llm-profile-management.spec.ts › OpenHands provider hidden base_url preservation › re-saving an OpenHands profile from Basic view preserves hidden base_url	7.5s
✅	skills/mock-llm-skills.spec.ts › skill loading: project, user, and deletion › project skill in workspace/.agents/skills/ triggers on matching keyword	13.9s
✅	skills/mock-llm-skills.spec.ts › skill loading: project, user, and deletion › user skill in ~/.openhands/skills/ triggers on matching keyword	13.9s
✅	skills/mock-llm-skills.spec.ts › skill loading: project, user, and deletion › deleting a user skill removes it from subsequent conversations	13.8s

_{Posted by the Mock-LLM E2E workflow · results are deterministic (scripted LLM responses)}

FraterCCCLXIII · 2026-06-19T16:19:12Z

@hieptl You were right — the initial implementation only filtered conversations already loaded in the sidebar.

Fixed in 347d877c: the search modal now calls the server via searchMatchingConversations() instead of receiving the sidebar list as a prop.

Empty query → recent 50 from /api/conversations/search
With text → paginates the full server index (100/page), then applies the existing multi-field filter on aggregated results
Cloud path also passes title__contains when supported

Tests run locally:

npm test -- __tests__/api/search-matching-conversations.test.ts \
  __tests__/components/features/conversation-panel/conversation-panel-search-modal.test.tsx \
  __tests__/components/features/conversation-panel/filter-conversations-by-query.test.ts \
  __tests__/utils/keyboard-shortcut.test.ts
# 13/13 passed

npm test -- __tests__/components/features/conversation-panel/conversation-panel.test.tsx -t "conversation search"
# 4/4 passed

Rebased onto latest upstream/main. Ready for another look when you have a moment — thank you! 🙏

hieptl requested changes Jun 11, 2026

View reviewed changes

FraterCCCLXIII and others added 5 commits June 19, 2026 08:44

Add inline conversation search in the sidebar panel.

347909a

Users can filter loaded conversations from an expandable search field in the panel header, with substring matching across title and metadata. Co-authored-by: Cursor <cursoragent@cursor.com>

Add modal conversation search command palette.

25c9e46

Search opens in a centered overlay with filtered results, keyboard navigation, and context labels while keeping the sidebar list unchanged. Co-authored-by: Cursor <cursoragent@cursor.com>

Polish modal conversation search UX and header shortcuts.

336bfe2

Center the search palette with standard modal styling, add result timestamps, wire Cmd/Ctrl+K with grey tooltip hints, and simplify header button labels. Co-authored-by: Cursor <cursoragent@cursor.com>

fix: place new chat action after filter icon

306b9c9

Reorder the conversation panel header actions so the create chat control renders to the right of the filter icon, matching the intended toolbar layout. Co-authored-by: Cursor <cursoragent@cursor.com>

FraterCCCLXIII force-pushed the poc/feature/search-conversation-modal branch from 54a775d to 347d877 Compare June 19, 2026 15:49

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add conversation search modal and shortcut-driven discovery#1138

feat: add conversation search modal and shortcut-driven discovery#1138
FraterCCCLXIII wants to merge 5 commits into
OpenHands:mainfrom
FraterCCCLXIII:poc/feature/search-conversation-modal

FraterCCCLXIII commented Jun 4, 2026 •

edited

Loading

Uh oh!

vercel Bot commented Jun 4, 2026

Uh oh!

FraterCCCLXIII commented Jun 4, 2026

Uh oh!

hieptl left a comment

Uh oh!

github-actions Bot commented Jun 11, 2026

Uh oh!

github-actions Bot commented Jun 19, 2026

Uh oh!

FraterCCCLXIII commented Jun 19, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

FraterCCCLXIII commented Jun 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Server-side search (review fix)

Files of Note

Test Plan

Uh oh!

vercel Bot commented Jun 4, 2026

Uh oh!

FraterCCCLXIII commented Jun 4, 2026

Uh oh!

hieptl left a comment

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Jun 11, 2026

✅ Mock-LLM E2E Tests

Uh oh!

github-actions Bot commented Jun 19, 2026

✅ Mock-LLM E2E Tests

Uh oh!

FraterCCCLXIII commented Jun 19, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

FraterCCCLXIII commented Jun 4, 2026 •

edited

Loading