fix(control-ui): hydrate palette commands on open

vincentkoc · vincentkoc · commit e67cf7771ee0 · 2026-06-09T12:59:57.000+09:00
diff --git a/ui/src/ui/app-render.ts b/ui/src/ui/app-render.ts
@@ -2210,6 +2210,9 @@ export function renderApp(state: AppViewState) {
       open: state.paletteOpen,
       query: state.paletteQuery,
       activeIndex: state.paletteActiveIndex,
+      onOpen: () => {
+        void refreshChatCommands(state).finally(requestHostUpdate);
+      },
       onToggle: () => {
         state.paletteOpen = !state.paletteOpen;
       },
diff --git a/ui/src/ui/views/command-palette.test.ts b/ui/src/ui/views/command-palette.test.ts
@@ -130,6 +130,17 @@ describe("command palette", () => {
     expect(prose?.label).toBe("/prose");
   });
 
+  it("requests slash command hydration when the palette opens", async () => {
+    const onOpen = vi.fn();
+
+    await renderPalette({ onOpen });
+    expect(onOpen).toHaveBeenCalledTimes(1);
+
+    render(renderCommandPalette(createProps({ onOpen, query: "overview" })), container);
+    await nextFrame();
+    expect(onOpen).toHaveBeenCalledTimes(1);
+  });
+
   it("matches localized base item labels and descriptions", async () => {
     await i18n.setLocale("zh-CN");
 
diff --git a/ui/src/ui/views/command-palette.ts b/ui/src/ui/views/command-palette.ts
@@ -101,6 +101,7 @@ export type CommandPaletteProps = {
   open: boolean;
   query: string;
   activeIndex: number;
+  onOpen?: () => void | Promise<void>;
   onToggle: () => void;
   onQueryChange: (query: string) => void;
   onActiveIndexChange: (index: number) => void;
@@ -137,6 +138,7 @@ function groupItems(items: PaletteItem[]): Array<[string, PaletteItem[]]> {
 
 let previouslyFocused: Element | null = null;
 let activeDialog: HTMLDialogElement | null = null;
+let activeProps: CommandPaletteProps | null = null;
 
 const FOCUSABLE_SELECTOR = [
   "a[href]",
@@ -288,6 +290,7 @@ function syncDialog(el: Element | undefined) {
   if (activeDialog !== el) {
     saveFocus();
     activeDialog = el;
+    void activeProps?.onOpen?.();
   }
   if (el.open) {
     return;
@@ -319,6 +322,7 @@ export function renderCommandPalette(props: CommandPaletteProps) {
   if (!props.open) {
     return nothing;
   }
+  activeProps = props;
 
   const items = filteredItems(props.query);
   const grouped = groupItems(items);
