Answer refinements

web/dist/inbox.js

@@ -7,6 +7,7 @@ import { diagram } from "./mermaid.js";
 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) {
     const list = h("div", { class: "inbox-list" });
     const cards = new Map();
@@ -181,12 +182,15 @@ function card(item) {
         };
         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");
@@ -207,7 +211,7 @@ function card(item) {
                 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: {
@@ -231,6 +235,18 @@ function card(item) {
             break;
         }
     }
+    el.addEventListener("keydown", (e) => {
+        if (e.key !== "ArrowDown" && e.key !== "ArrowUp") {
+            return;
+        }
+        const stops = [...el.querySelectorAll(".pick, .option.choice-box input")].filter((s) => s.offsetParent !== null);
+        const at = stops.indexOf(e.target);
+        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;
 }

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;
 }

web/style.css

@@ -1716,10 +1716,20 @@ pre.file-text .line::before {
 }
 
 .pick.choice-box:hover > .choice-head,
-.pick.choice-box:focus-visible > .choice-head {
+.pick.choice-box:focus-visible > .choice-head,
+.option.choice-box:has(input:focus-visible) > .choice-head {
   background: var(--accent-tint);
 }
 
+.option.choice-box:has(input:focus-visible) {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 2px var(--accent);
+}
+
+.choice-head input:focus-visible {
+  outline: none;
+}
+
 .pick {
   display: block;
   padding: 4px 10px;
@@ -1739,6 +1749,10 @@ pre.file-text .line::before {
   outline: none;
 }
 
+.pick:focus-visible {
+  box-shadow: 0 0 0 2px var(--accent);
+}
+
 .pick[hidden] {
   display: none;
 }