Answer refinements

web/src/inbox.ts

@@ -8,6 +8,8 @@ import { reviewCard } from "./reviews.js";
 import { focusTab, onEach, state } from "./state.js";
 import { taskStyle } from "./taskcolor.js";
 
+const delegateText = "Use your judgment for this decision and continue within the existing task instructions.";
+
 export function mountInbox(root: HTMLElement): () => void {
   const list = h("div", { class: "inbox-list" });
   const cards = new Map<string, { sig: string; el: HTMLElement }>();
@@ -208,12 +210,17 @@ function card(item: InboxItem): HTMLElement {
     return h("div", { class: "text-entry" }, block, editor);
   };
 
+  const delegate = () =>
+    clickable(h("div", { class: "pick other", role: "button", tabIndex: 0 }, "Let the agent decide"), () => {
+      void submit({ item_id: item.id, type: "other", text: delegateText });
+    });
+
   const renderActions = () => {
     switch (item.kind) {
       case "question": {
         const placeholder = "Your answer, a question back, or new instructions";
         if (!multiple) {
-          replace(actions, textEntry("Other…", placeholder));
+          replace(actions, delegate(), textEntry("Other…", placeholder));
           return;
         }
         const send = h("button", { type: "button", class: "primary" }, "Submit");
@@ -234,7 +241,7 @@ function card(item: InboxItem): HTMLElement {
         const other = textEntry("Other…", placeholder, { onInput: refresh, onSubmit: go });
         send.onclick = go;
         refresh();
-        replace(actions, other, h("div", { class: "submit-row" }, send));
+        replace(actions, delegate(), other, h("div", { class: "submit-row" }, send));
         return;
       }
       default: {
@@ -266,6 +273,19 @@ function card(item: InboxItem): HTMLElement {
     }
   }
 
+  el.addEventListener("keydown", (e) => {
+    if (e.key !== "ArrowDown" && e.key !== "ArrowUp") {
+      return;
+    }
+    const stops = [...el.querySelectorAll<HTMLElement>(".pick, .option.choice-box input")].filter((s) => s.offsetParent !== null);
+    const at = stops.indexOf(e.target as HTMLElement);
+    if (at < 0) {
+      return;
+    }
+    e.preventDefault();
+    stops[Math.min(Math.max(at + (e.key === "ArrowDown" ? 1 : -1), 0), stops.length - 1)]!.focus();
+  });
+
   renderActions();
   return el;
 }