diff --git a/webviews/scripts/design-tokens-baseline.jsonl b/webviews/scripts/design-tokens-baseline.jsonl index e41a06ed5119..6e99fefe9ab4 100644 --- a/webviews/scripts/design-tokens-baseline.jsonl +++ b/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}} diff --git a/webviews/src/agent-session/acpmux/needsYou/needsYou.css b/webviews/src/agent-session/acpmux/needsYou/needsYou.css index 9b92fab9a7f6..9b1081249efa 100644 --- a/webviews/src/agent-session/acpmux/needsYou/needsYou.css +++ b/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); } diff --git a/webviews/src/agent-session/acpmux/question/QuestionCard.gallery.css b/webviews/src/agent-session/acpmux/question/QuestionCard.gallery.css index 2811e77d5e07..0d08b7617599 100644 --- a/webviews/src/agent-session/acpmux/question/QuestionCard.gallery.css +++ b/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; +} diff --git a/webviews/src/agent-session/acpmux/question/QuestionCard.gallery.tsx b/webviews/src/agent-session/acpmux/question/QuestionCard.gallery.tsx index c3ef26a8e23d..38075bf3473e 100644 --- a/webviews/src/agent-session/acpmux/question/QuestionCard.gallery.tsx +++ b/webviews/src/agent-session/acpmux/question/QuestionCard.gallery.tsx @@ -24,7 +24,7 @@ type Props = { question: AgentQuestion; onReply(reply: QuestionReply): void | Promise; 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" }, diff --git a/webviews/src/agent-session/acpmux/question/QuestionCard.tsx b/webviews/src/agent-session/acpmux/question/QuestionCard.tsx index d0d8771fcad4..5afb474ad618 100644 --- a/webviews/src/agent-session/acpmux/question/QuestionCard.tsx +++ b/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; /// 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)} > -