#14967: fix(ui): replace Manual RPC text input with sorted method dropdown
app: web-ui
stale
size: XS
Cluster:
Hooks and UI Fixes
## Summary
- Replace the free-text method input in Debug > Manual RPC with a `<select>` dropdown populated from `hello.features.methods`
- Stack the method and params fields vertically instead of side-by-side (`stack` instead of `form-grid`)
- Add a disabled "Select a method..." placeholder when no method is chosen
## Why
The gateway exposes a known, finite set of RPC methods (~80+ base methods plus channel plugin methods). These are already sent to the client in the WebSocket hello message via `features.methods`. The current free-text input requires users to guess or look up method names in source code, which defeats the purpose of a debug panel.
The side-by-side layout also causes the text input to sit far below its label on narrower viewports.
## Changes
- `ui/src/ui/views/debug.ts` — Add `methods: string[]` prop, replace `<input>` with `<select>`, change `form-grid` to `stack`
- `ui/src/ui/app-render.ts` — Pass sorted `hello.features.methods` array to `renderDebug`
## Test plan
- [x] `pnpm build` passes
- [x] `pnpm check` passes (format + types + lint)
- [x] `pnpm test` — 882 passed
- [x] Tested locally: dropdown renders all gateway methods alphabetically, RPC calls work correctly
## AI Disclosure
- [x] AI-assisted (Claude)
- [x] Lightly tested — verified build/check/test pass and visually confirmed in local Control UI
- [x] I understand what the code does: wires `hello.features.methods` into a `<select>` element and changes the CSS layout class
<!-- greptile_comment -->
<h2>Greptile Overview</h2>
<h3>Greptile Summary</h3>
This PR updates the Debug Manual RPC panel to use a method dropdown populated from the gateway hello payload (`hello.features.methods`), and adjusts the layout from a side-by-side grid to a vertical stack. The method list is passed down from `ui/src/ui/app-render.ts` into `renderDebug` in `ui/src/ui/views/debug.ts`, sorted client-side.
<h3>Confidence Score: 4/5</h3>
- This PR is close to safe to merge, with one UI state management issue to address.
- Changes are small and localized, but the new <select> mixes a controlled `.value` binding with explicit `selected` attributes on options, which can cause the displayed selection to desync from state on rerender.
- ui/src/ui/views/debug.ts
<sub>Last reviewed commit: 7c5b68b</sub>
<!-- greptile_other_comments_section -->
<sub>(2/5) Greptile learns from your feedback when you react with thumbs up/down!</sub>
<!-- /greptile_comment -->
Most Similar PRs
#8342: Fix debug interface CSS layout issues
by Klopib · 2026-02-03
76.3%
#8522: feat(control-ui): Add Model Requests panel for real-time API monito...
by GiantAxeWhy · 2026-02-04
74.0%
#14719: UI: fix debug event log layout and health history toggle
by detecti1 · 2026-02-12
73.6%
#16733: fix(ui): avoid injected newlines when tool output is hidden
by jp117 · 2026-02-15
73.4%
#13960: fix(ui): preserve structured config validation error details
by constansino · 2026-02-11
73.1%
#11864: fix: add missing methods to BASE_METHODS for client discovery
by Yida-Dev · 2026-02-08
72.7%
#12168: feat: integrate Mission Control dashboard into Control UI
by riftagent-git · 2026-02-08
72.0%
#6440: feat(ui): add model picker dialog with provider filtering
by igorls · 2026-02-01
71.9%
#3721: fix(ui): webchat not displaying chat responses
by maxmaxrouge-rgb · 2026-01-29
71.9%
#13838: UI: fix config panel CI failures and modularize rendering
by fresed05 · 2026-02-11
71.0%