fix(frontend): 'Other — specify' opens a text field and emits control:freetext

frontend/src/widgets/ReservedControls.tsx

@@ -1,7 +1,42 @@
+import { useState } from "react";
+
 const LABELS: Record<string, string> = { back: "Go back", exit: "Exit", other: "Other — specify" };
-export function ReservedControls({ reserved, onControl }: { reserved?: string[]; onControl: (c: string) => void }) {
+
+export function ReservedControls({
+  reserved,
+  onControl,
+}: {
+  reserved?: string[];
+  onControl: (c: string, text?: string) => void;
+}) {
+  const [otherOpen, setOtherOpen] = useState(false);
+  const [text, setText] = useState("");
   if (!reserved?.length) return null;
-  return <div className="flex gap-2 pt-2">{reserved.map((c) => (
-    <button key={c} className="text-sm border rounded px-2 py-1" onClick={() => onControl(c)}>{LABELS[c] ?? c}</button>
-  ))}</div>;
+  return (
+    <div className="flex flex-col gap-2 pt-2">
+      <div className="flex gap-2">
+        {reserved.map((c) => (
+          <button
+            key={c}
+            className="text-sm border rounded px-2 py-1"
+            onClick={() => (c === "other" ? setOtherOpen(true) : onControl(c))}
+          >
+            {LABELS[c] ?? c}
+          </button>
+        ))}
+      </div>
+      {otherOpen && (
+        <div className="flex flex-col gap-1">
+          <textarea
+            className="w-full border rounded p-2"
+            value={text}
+            onChange={(e) => setText(e.target.value)}
+          />
+          <button className="text-sm border rounded px-2 py-1 self-start" onClick={() => onControl("freetext", text)}>
+            Send
+          </button>
+        </div>
+      )}
+    </div>
+  );
 }