fix(frontend): render Back/Exit/Other controls on the multiselect widget

frontend/src/widgets/MultiselectWidget.test.tsx

@@ -123,3 +123,22 @@ test("confirm is enabled when allow_empty is false but something is checked", as
   await userEvent.click(btn);
   expect(onRespond).toHaveBeenCalledWith({ id: "u1", kind: "multiselect", choices: ["x"] });
 });
+
+test("renders reserved controls and emits control on click", async () => {
+  const onRespond = vi.fn();
+  render(
+    <MultiselectWidget
+      descriptor={{
+        id: "u1",
+        widget: "multiselect",
+        options: [{ id: "a", label: "Alpha" }],
+        reserved: ["back", "exit", "other"],
+      }}
+      onRespond={onRespond}
+    />
+  );
+  await userEvent.click(screen.getByRole("button", { name: /go back/i }));
+  expect(onRespond).toHaveBeenCalledWith({ id: "u1", control: "back" });
+  await userEvent.click(screen.getByRole("button", { name: /^exit$/i }));
+  expect(onRespond).toHaveBeenCalledWith({ id: "u1", control: "exit" });
+});

frontend/src/widgets/MultiselectWidget.tsx

@@ -1,5 +1,6 @@
 import { useState } from "react";
 import type { WidgetProps } from "./types";
+import { ReservedControls } from "./ReservedControls";
 
 export function MultiselectWidget({ descriptor, onRespond }: WidgetProps) {
   const options = descriptor.options ?? [];
@@ -54,6 +55,10 @@ export function MultiselectWidget({ descriptor, onRespond }: WidgetProps) {
       >
         Confirm
       </button>
+      <ReservedControls
+        reserved={descriptor.reserved}
+        onControl={(c) => onRespond({ id: descriptor.id, control: c })}
+      />
     </div>
   );
 }