Agent pane: Needs your input pill, option rows and custom answer restyled

webviews/scripts/design-tokens-baseline.jsonl

@@ -232,7 +232,7 @@
 {"file":"agent-session/acpmux/modelPicker.css","kind":"spacing","property":"padding","values":{"6px":1,"4px var(--ui-row-padding-inline) 2px":1}}
 {"file":"agent-session/acpmux/multiplayer/multiplayer.css","kind":"duration","property":"animation","values":{"cv-typing-wave 1.2s ease-in-out infinite":1}}
 {"file":"agent-session/acpmux/multiplayer/multiplayer.css","kind":"spacing","property":"margin-left","values":{"-6px":1}}
-{"file":"agent-session/acpmux/needsYou/needsYou.css","kind":"height","property":"height","values":{"8px":1,"6px":2,"16px":1,"34px":1}}
+{"file":"agent-session/acpmux/needsYou/needsYou.css","kind":"height","property":"height","values":{"8px":1,"6px":2,"16px":1}}
 {"file":"agent-session/acpmux/needsYou/needsYou.css","kind":"spacing","property":"gap","values":{"2px":1,"1px":1,"5px":1}}
 {"file":"agent-session/acpmux/needsYou/needsYou.css","kind":"spacing","property":"margin-bottom","values":{"2px":1}}
 {"file":"agent-session/acpmux/needsYou/needsYou.css","kind":"spacing","property":"margin-top","values":{"1px":1,"2px":1}}
@@ -283,7 +283,6 @@
 {"file":"agent-session/acpmux/prototype/prototype.css","kind":"spacing","property":"right","values":{"-2px":1,"72px":1}}
 {"file":"agent-session/acpmux/prototype/prototype.css","kind":"spacing","property":"top","values":{"2px":1,"92px":1}}
 {"file":"agent-session/acpmux/question/questionCard.css","kind":"height","property":"min-height","values":{"calc(var(--ds-control-primary, 32px) + var(--ds-space-1, 4px))":1}}
-{"file":"agent-session/acpmux/question/questionCard.css","kind":"spacing","property":"margin-top","values":{"3px":1}}
 {"file":"agent-session/acpmux/question/QuestionEnded.gallery.css","kind":"spacing","property":"padding","values":{"2px 0 2px 10px":1}}
 {"file":"agent-session/acpmux/QuickModelMenu.gallery.tsx","kind":"spacing","property":"padding-top","values":{"280px":1,"400px":1}}
 {"file":"agent-session/acpmux/replay/replay.css","kind":"font-weight","property":"font-weight","values":{"500":2}}
@@ -387,7 +386,7 @@
 {"file":"agent-session/acpmux/styles.css","kind":"easing","property":"animation","values":{"acpmux-chief-card-in var(--cmux-motion-quick) cubic-bezier(.22,.7,.28,1) both":1}}
 {"file":"agent-session/acpmux/styles.css","kind":"easing","property":"transition","values":{"background-color var(--acpmux-motion-hover) ease-out,color var(--acpmux-motion-hover) ease-out,box-shadow var(--acpmux-motion-hover) ease-out":1,"opacity var(--acpmux-motion-hover) ease-out":1}}
 {"file":"agent-session/acpmux/styles.css","kind":"font-weight","property":"font-weight","values":{"500":4,"650":2,"700":1}}
-{"file":"agent-session/acpmux/styles.css","kind":"height","property":"height","values":{"16px":4,"7px":1,".5px":1,"48px":1,"18px":1,"22px":6,"40px":3,"1px":1,"26px":5,"34px":1,"30px":1,"12px":1,"8px":2,"36px":1,"180px":2,"360px":1,"6px":2,"164px":1,"42px":1,"68px":1,"56px":3,"max(var(--ui-row-height,28px),calc(96px * var(--cmux-interface-scale,1)))":1,"44px":1,"17px":1,"21px":1,"5px":1}}
+{"file":"agent-session/acpmux/styles.css","kind":"height","property":"height","values":{"16px":4,"7px":1,".5px":1,"48px":1,"18px":1,"22px":6,"40px":3,"1px":1,"26px":5,"34px":1,"30px":1,"12px":1,"8px":2,"36px":1,"180px":2,"360px":1,"6px":1,"164px":1,"42px":1,"68px":1,"56px":3,"max(var(--ui-row-height,28px),calc(96px * var(--cmux-interface-scale,1)))":1,"44px":1,"17px":1,"21px":1,"5px":1}}
 {"file":"agent-session/acpmux/styles.css","kind":"height","property":"min-height","values":{"34px":2,"38px":1,"calc(var(--ds-control-row) + var(--ds-space-3) + 4 * var(--cmux-hairline,.5px))":1,"30px":1,"16px":1,"128px":1,"36px":1,"58px":1,"48px":1,"46px":1,"56px":1,"44px":1}}
 {"file":"agent-session/acpmux/styles.css","kind":"radius","property":"border-radius","values":{"22px":1,"14px":1,"3px":4,"5px":1,"9px":1,"48px":2,"24px":2,"20px":1}}
 {"file":"agent-session/acpmux/styles.css","kind":"spacing","property":"bottom","values":{"2px":1,"calc(100% + 6px)":2}}

webviews/src/agent-session/acpmux/needsYou/needsYou.css

@@ -422,18 +422,21 @@
   box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--agent-text) 40%, transparent);
 }
 
-/* The Needs your input pill: Jump to latest's glass (tint, rim, hover wash), widened to a small-radius rect,
-   a little larger than Claude's (Leo 2026-10-20). */
+/* The Needs your input pill: Jump to latest's glass (tint, rim, hover wash), widened to a capsule.
+   It reads as the question card's pill (QuestionCard.tsx .acpmux-question-status) and Claude
+   desktop's: the Needs you dot, the words in the mark's colour at regular weight, a muted chevron
+   (Leo 2026-11-05, of the bold block it was: "kind of ugly"). */
 .acpmux-jump-latest.acpmux-needs-you-pill {
   display: inline-flex;
   gap: var(--ds-space-2);
   width: auto;
-  height: 34px;
+  height: var(--ds-control-primary);
   padding: 0 var(--ds-space-3);
-  border-radius: var(--ds-radius-popup);
+  border-radius: 999px;
+  color: var(--acpmux-needs-you-mark);
   font-family: var(--font-ui);
   font-size: var(--text-control);
-  font-weight: var(--weight-emphasis, 600);
+  font-weight: var(--weight-regular);
   white-space: nowrap;
   letter-spacing: var(--text-control--letter-spacing);
 }

webviews/src/agent-session/acpmux/question/QuestionCard.gallery.css

@@ -31,3 +31,47 @@
   content: "\2713  ";
   color: var(--agent-soft, var(--agent-text));
 }
+
+/* Leo 2026-11-05, of the pill, option rows and custom answer: "kind of ugly". Three looks of the
+   restyle over the same card; "capsule" ships (styles.css, questionCard.css). Outline rings the
+   pill the way Claude desktop's live-line pill does and rules the rows full width with an underlined
+   custom answer; bare drops the pill's capsule to the dot and words, fills the chosen radio with the
+   accent and keeps the custom answer as a soft filled row. */
+.acpmux-question-visual-gallery[data-question-look="outline"] .acpmux-question-status-pill {
+  background: none;
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acpmux-question-input) 55%, transparent);
+}
+.acpmux-question-visual-gallery[data-question-look="outline"] .acpmux-question-rows {
+  padding: 0;
+}
+.acpmux-question-visual-gallery[data-question-look="outline"] .acpmux-question-row {
+  padding: 12px;
+  border-radius: 0;
+}
+.acpmux-question-visual-gallery[data-question-look="outline"] .acpmux-question-row + .acpmux-question-row {
+  box-shadow: inset 0 var(--cmux-hairline, 0.5px) 0 var(--acpmux-question-edge);
+}
+.acpmux-question-visual-gallery[data-question-look="outline"] .acpmux-question-other textarea {
+  border-radius: 0;
+  background: none;
+  box-shadow: inset 0 -1px 0 var(--acpmux-question-edge);
+}
+.acpmux-question-visual-gallery[data-question-look="bare"] .acpmux-question-status-pill {
+  padding: 0;
+  background: none;
+}
+.acpmux-question-visual-gallery[data-question-look="bare"] .acpmux-question-mark[data-chosen]:not([data-multi]) {
+  border-color: var(--agent-accent, var(--agent-text));
+  background: var(--agent-accent, var(--agent-text));
+}
+.acpmux-question-visual-gallery[data-question-look="bare"] .acpmux-question-mark[data-chosen]:not([data-multi])::after {
+  background: var(--agent-on-accent, var(--acpmux-base));
+}
+.acpmux-question-visual-gallery[data-question-look="bare"] .acpmux-question-row.acpmux-question-other[data-row-editing] {
+  background-color: var(--acpmux-question-highlight);
+}
+.acpmux-question-visual-gallery[data-question-look="bare"] .acpmux-question-other textarea {
+  padding: 0;
+  background: none;
+  box-shadow: none;
+}

webviews/src/agent-session/acpmux/question/QuestionCard.gallery.tsx

@@ -24,7 +24,7 @@ type Props = {
   question: AgentQuestion;
   onReply(reply: QuestionReply): void | Promise<unknown>;
   otherText?: string;
-  look?: "compact" | "inset" | "quiet";
+  look?: "compact" | "inset" | "quiet" | "capsule" | "outline" | "bare";
   /// The answered card's look (QuestionCard.gallery.css): `stacked` ships.
   answeredLook?: AnsweredLook;
 };
@@ -271,6 +271,32 @@ export default componentEntry({
     ],
   },
   variants: {
+    // Leo 2026-11-05, of the Needs your input pill, the option rows and the custom answer: "kind of
+    // ugly". Three restyles on the card he showed (two options, a typed custom answer); capsule ships.
+    "restyle-capsule": {
+      ...variant(
+        pendingOther,
+        "Shipped: one capsule tinted with the mark holding the Needs you dot (as the floating pill), regular-weight question and options, the typed custom answer in a quiet hairline field, Skip and Submit with outlined keycaps (esc, ⌘ ↩) as the permission card's.",
+        "do whatever's reasonable",
+      ),
+      props: { ...variant(pendingOther, "", "do whatever's reasonable").props, look: "capsule" },
+    },
+    "restyle-outline": {
+      ...variant(
+        pendingOther,
+        "Alternative: the pill ringed instead of tinted, full-width ruled rows, the custom answer underlined.",
+        "do whatever's reasonable",
+      ),
+      props: { ...variant(pendingOther, "", "do whatever's reasonable").props, look: "outline" },
+    },
+    "restyle-bare": {
+      ...variant(
+        pendingOther,
+        "Alternative: the dot and words with no capsule, the chosen radio filled with the accent, the custom answer a soft filled row.",
+        "do whatever's reasonable",
+      ),
+      props: { ...variant(pendingOther, "", "do whatever's reasonable").props, look: "bare" },
+    },
     "visual-compact": {
       ...variant(pendingSingle, "Compact rules: tighter rows and footer, with full-width hairlines."),
       props: { ...variant(pendingSingle, "").props, look: "compact" },

webviews/src/agent-session/acpmux/question/QuestionCard.tsx

@@ -23,6 +23,7 @@ import {
   type CardInput,
   type CardState,
 } from "./cardState";
+import "../needsYou/needsYou.css";
 import { HtmlPreview } from "./HtmlPreview";
 import { inlineText, plainText } from "./inlineText";
 import {
@@ -101,7 +102,9 @@ export const QuestionCard = memo(function QuestionCard({
 type ReplyHandler = (reply: QuestionReply) => void | Promise<unknown>;
 
 /// The pill over a pending card. Folding hides the card but keeps it mounted, so the person's
-/// picks and Other text survive; the ask stays pending until answered or skipped.
+/// picks and Other text survive; the ask stays pending until answered or skipped. It draws as Claude
+/// desktop's "Needs your input" (Leo 2026-11-05, of the old amber block: "kind of ugly"): the one
+/// Needs you dot (needsYou.css), the words and the fold chevron on one capsule tinted with the mark, as JumpPill's.
 function PendingAsk({ question, onReply }: { question: AgentQuestion; onReply: ReplyHandler }) {
   const t = useT();
   const cardId = useId();
@@ -115,9 +118,11 @@ function PendingAsk({ question, onReply }: { question: AgentQuestion; onReply: R
         aria-controls={cardId}
         onClick={() => setOpen((shown) => !shown)}
       >
-        <span className="acpmux-question-status-dot" aria-hidden="true" />
-        {t("question.needsInput")}
-        <ChevronDown size={12} className="acpmux-question-status-chevron" />
+        <span className="acpmux-question-status-pill">
+          <span className="acpmux-needs-you-dot" aria-hidden="true" />
+          {t("question.needsInput")}
+          <ChevronDown size={12} className="acpmux-question-status-chevron" />
+        </span>
       </button>
       <PendingQuestion id={cardId} hidden={!open} question={question} onReply={onReply} />
     </div>
@@ -630,7 +635,10 @@ function PendingQuestion({
             onClick={() => dispatch({ type: "submit" })}
           >
             {t("question.submit")}
-            <Keycap>⌘↩</Keycap>
+            <span className="acpmux-question-keys">
+              <Keycap>⌘</Keycap>
+              <Keycap>↩</Keycap>
+            </span>
           </button>
         )}
       </div>

webviews/src/agent-session/acpmux/question/questionCard.css

@@ -39,17 +39,25 @@
   align-items: flex-start;
 }
 .acpmux-question-other .acpmux-question-mark {
-  margin-top: 3px;
+  margin-top: var(--ds-space-1);
+}
+/* The custom answer while it is typed (Leo 2026-11-05, of the filled block it was: "kind of ugly"):
+   the row keeps no fill and the words sit in a quiet field, a hairline ring that firms up while it
+   has the keyboard, so it reads as a place to type rather than a selected option. */
+.acpmux-question-row.acpmux-question-other[data-row-editing] {
+  background-color: transparent;
 }
 .acpmux-question-other :is(input, textarea) {
   flex: 1;
   min-width: 0;
   min-height: var(--ds-control-compact, 24px);
   box-sizing: border-box;
-  padding: 0;
+  padding: var(--ds-space-1) var(--ds-space-2);
   border: 0;
+  border-radius: var(--ds-radius-control);
   outline: none;
-  background: none;
+  background: color-mix(in srgb, var(--agent-text) 4%, transparent);
+  box-shadow: inset 0 0 0 var(--cmux-hairline, 0.5px) var(--acpmux-question-edge);
   color: var(--agent-text);
   font: inherit;
   line-height: var(--text-control--line-height, 18px);
@@ -61,6 +69,9 @@
   overflow-y: auto;
   overflow-wrap: anywhere;
 }
+.acpmux-question-other :is(input, textarea):focus {
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--agent-text) 35%, transparent);
+}
 .acpmux-question-other :is(input, textarea)::placeholder {
   color: var(--agent-muted);
 }
@@ -69,8 +80,7 @@
   justify-content: flex-end;
   align-items: center;
   gap: 8px;
-  padding: 8px 12px;
-  box-shadow: inset 0 var(--cmux-hairline, 0.5px) 0 var(--acpmux-question-edge);
+  padding: 4px 12px 12px;
 }
 /* A yes-or-no ask (model.ts consentChoice), as ChatGPT's consent card draws it: the question with
    one muted line of what Allow does under it, then its two buttons with their keys, Allow filled. */
@@ -92,8 +102,3 @@
   align-items: center;
   gap: 8px;
 }
-.acpmux-question-skip .acpmux-keycap {
-  margin: 0;
-  opacity: 0.7;
-  letter-spacing: 0.04em;
-}