@springbrand/message-panel 0.1.3-alpha.9 → 0.2.0-alpha.38

package/cloud-os/chat/rich-blocks.tsx

@@ -2,6 +2,7 @@ import {
   Bell,
   CaretRight,
   Check,
+  CheckCircle,
   CircleNotch,
   Clock,
   Key,
@@ -10,10 +11,20 @@ import {
   WarningCircle,
 } from "@phosphor-icons/react";
 import { useState } from "react";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "../primitives/collapsible";
 import { Tooltip } from "../primitives/tooltip";
 import { WorkshopButton } from "../primitives/workshop-controls";
 import { MarkdownMessage } from "./markdown-message";
-import { WorkIcon } from "./tool-rows";
+import { collapsePanel } from "./surfaces";
+import {
+  DISCLOSURE_ICON,
+  DISCLOSURE_TITLE_WITH_ICON,
+  WorkIcon,
+} from "./tool-rows";
 import type {
   ParallelTool,
   PlanStep,
@@ -29,7 +40,7 @@ import {
 /**
  * UIMessage 协议里存在、gadgets 那套没有的几类 part —— 计划快照、原位提问、
  * 后续建议、定时任务、并行/子 Agent、原位授权。视觉语言全部沿用 cloud-os:
- * 折叠工作行用 `px-1.5 py-1` 的行式布局,卡片用
+ * 折叠工作行用 `py-1` 的行式布局,卡片用
  * `themed-surface-inset rounded-2xl border-kumo-line/70 bg-kumo-elevated/45 p-3`,
  * 授权卡沿用 renderActionCard 的 blocking callout(brand/40 边 + brand/10 底)。
  */
@@ -39,73 +50,78 @@ import {
 export function PlanBlock({
   steps,
   running,
+  defaultOpen = true,
 }: {
   steps: PlanStep[];
   running: boolean;
+  defaultOpen?: boolean;
 }) {
   const done = steps.filter((step) => step.status === "done").length;
   const current = steps.find((step) => step.status === "in_progress");
-  const [open, setOpen] = useState(true);
+  const [open, setOpen] = useState(defaultOpen);
 
   return (
-    <div className="group -ml-0.5">
-      <button
-        type="button"
-        onClick={() => setOpen((value) => !value)}
-        className="flex w-full cursor-pointer items-center gap-3 rounded-xl px-1.5 py-1 text-left text-kumo-subtle transition-colors duration-150 ease-out hover:text-kumo-default focus-visible:text-kumo-default focus-visible:outline-none active:scale-[0.995]"
-        aria-expanded={open}
+    <Collapsible open={open} onOpenChange={setOpen} className="group">
+      <CollapsibleTrigger
+        className={`${DISCLOSURE_TITLE_WITH_ICON} w-full`}
       >
-        <span className="flex h-5 w-5 flex-shrink-0 items-center justify-center">
-          <WorkIcon Icon={ListChecks} />
+        <span
+          className={`${DISCLOSURE_ICON} rounded-full`}
+          role="progressbar"
+          aria-label="Plan progress"
+          aria-valuemin={0}
+          aria-valuemax={steps.length}
+          aria-valuenow={done}
+          style={{
+            background: `conic-gradient(var(--color-kumo-brand) ${(done / steps.length) * 100}%, var(--color-kumo-fill) 0)`,
+          }}
+        >
+          <span className="size-2.5 rounded-full bg-kumo-base" />
         </span>
-        <span className="min-w-0 flex-1">
-          <span className="flex min-w-0 items-center gap-2 text-[14px] leading-5 tracking-[-0.25px]">
-            <span className={`min-w-0 truncate ${running ? "cos-thinking-shimmer" : ""}`}>
-              Plan · {done}/{steps.length}
-            </span>
-            <CaretRight
-              size={13}
-              weight="bold"
-              className={`flex-shrink-0 text-kumo-inactive transition-transform duration-150 ease-out ${open ? "rotate-90" : ""}`}
-            />
+        <span className="flex min-w-0 flex-1 items-center gap-2">
+          <span className={`shrink-0 ${running ? "cos-thinking-shimmer" : ""}`}>
+            Plan · {done}/{steps.length}
           </span>
           {!open && current && (
-            <span className="mt-1 block truncate font-mono text-[12px] leading-4 text-kumo-inactive">
+            <span className="min-w-0 flex-1 truncate text-[12px] leading-4 text-[rgba(0,0,0,0.3)]">
               {current.text}
             </span>
           )}
+          <CaretRight
+            size={16}
+            className={`ml-auto flex-shrink-0 text-kumo-inactive transition-transform duration-150 ease-out ${open ? "rotate-90" : ""}`}
+          />
         </span>
-      </button>
-      {open && (
-        <div className="themed-surface-inset ml-8 mt-1 space-y-1.5 rounded-2xl border border-kumo-line/70 bg-kumo-elevated/45 p-3">
+      </CollapsibleTrigger>
+      <CollapsibleContent className={collapsePanel}>
+        <div className="-mx-2.5 mt-1 flex flex-col gap-2 rounded-xl border border-[rgba(0,0,0,0.07)] px-4 py-3">
           {steps.map((step, index) => (
             <div
               key={`${step.text}-${index}`}
-              className="flex items-start gap-2.5 text-[13px] leading-[19px] tracking-[-0.25px]"
+              className="flex items-center gap-2 text-[14px] leading-[1.4] font-normal tracking-normal"
             >
               <span
-                className="mt-0.5 flex h-4 w-4 flex-shrink-0 items-center justify-center"
+                className="flex size-4 shrink-0 items-center justify-center"
                 aria-hidden="true"
               >
                 {step.status === "done" ? (
-                  <Check size={12} weight="bold" className="text-kumo-success" />
+                  <CheckCircle size={16} weight="fill" className="text-[#00bf75]" />
                 ) : step.status === "in_progress" ? (
                   <CircleNotch
-                    size={12}
-                    weight="bold"
-                    className="animate-spin text-kumo-brand motion-reduce:animate-none"
+                    size={16}
+                    className="animate-spin text-[#ff9938] motion-reduce:animate-none"
                   />
                 ) : (
-                  <span className="h-1.5 w-1.5 rounded-full bg-kumo-fill" />
+                  <span className="h-1.5 w-1.5 rounded-full bg-[color:var(--text-color-kumo-default)] opacity-20" />
                 )}
               </span>
               <span
                 className={
                   step.status === "done"
-                    ? "min-w-0 flex-1 text-kumo-inactive line-through"
+                    ? "min-w-0 flex-1 text-kumo-default/30 line-through"
                     : step.status === "in_progress"
-                      ? "min-w-0 flex-1 font-medium text-kumo-default"
-                      : "min-w-0 flex-1 text-kumo-subtle"
+                      ? "min-w-0 flex-1 text-kumo-default"
+                      : "min-w-0 flex-1 text-kumo-default/70"
                 }
               >
                 {step.text}
@@ -113,8 +129,8 @@ export function PlanBlock({
             </div>
           ))}
         </div>
-      )}
-    </div>
+      </CollapsibleContent>
+    </Collapsible>
   );
 }
 
@@ -124,33 +140,32 @@ interface AskQuestion {
   prompt: string;
   options: string[];
   multi: boolean;
+  allowCustom: boolean;
 }
 
 function questionsOf(input: Record<string, unknown>): AskQuestion[] {
-  if (Array.isArray(input.questions)) {
-    return input.questions.map((item) => {
-      const question = (item ?? {}) as Record<string, unknown>;
-      return {
-        prompt: String(question.prompt ?? question.question ?? "Choose an option"),
-        options: Array.isArray(question.options)
-          ? question.options.filter((o): o is string => typeof o === "string")
-          : [],
-        multi: question.kind === "multi" || question.multiSelect === true,
-      };
-    });
-  }
-  if (typeof input.question === "string") {
-    return [
-      {
-        prompt: input.question,
-        options: Array.isArray(input.options)
-          ? input.options.filter((o): o is string => typeof o === "string")
-          : [],
-        multi: input.multiSelect === true,
-      },
-    ];
-  }
-  return [];
+  if (!Array.isArray(input.questions)) return [];
+  return input.questions.map((item) => {
+    const question = (item ?? {}) as Record<string, unknown>;
+    const options = Array.isArray(question.options)
+      ? question.options.filter((option): option is string =>
+        typeof option === "string"
+      )
+      : [];
+    return {
+      prompt: typeof question.question === "string"
+        ? question.question
+        : "Choose an option",
+      options,
+      multi: question.multiSelect === true,
+      allowCustom: question.allowCustom === true || options.length === 0,
+    };
+  });
+}
+
+interface DraftAnswer {
+  selections: string[];
+  text: string;
 }
 
 export function AskUserBlock({
@@ -162,124 +177,171 @@ export function AskUserBlock({
   onRespond?: (toolCallId: string, response: unknown) => Promise<boolean>;
 }) {
   const questions = questionsOf(call.input);
-  // 不能用 `useState(() => questions.map(() => []))` 初始化:工具入参是**流式**到达的,
-  // 首帧 questions 往往还是空数组,那之后每次 setSelections 都在空数组上 map,
+  // 不能用 `useState(() => questions.map(...))` 初始化:工具入参是**流式**到达的,
+  // 首帧 questions 往往还是空数组,那之后每次 setAnswers 都在空数组上 map,
   // 选择永远存不进去 → Submit 永久禁用。改成稀疏存 + 按当前 questions 补齐。
-  const [selections, setSelections] = useState<string[][]>([]);
-  const selectionAt = (index: number) => selections[index] ?? [];
+  const [answers, setAnswers] = useState<DraftAnswer[]>([]);
+  const answerAt = (index: number): DraftAnswer =>
+    answers[index] ?? { selections: [], text: "" };
   const toggle = (questionIndex: number, option: string, multi: boolean) =>
-    setSelections((current) => {
-      const next = questions.map((_, index) => current[index] ?? []);
-      const values = next[questionIndex] ?? [];
-      next[questionIndex] = !multi
-        ? [option]
-        : values.includes(option)
-          ? values.filter((value) => value !== option)
-          : [...values, option];
+    setAnswers((current) => {
+      const next = questions.map((_, index) =>
+        current[index] ?? { selections: [], text: "" }
+      );
+      const answer = next[questionIndex]!;
+      next[questionIndex] = {
+        ...answer,
+        selections: !multi
+          ? [option]
+          : answer.selections.includes(option)
+            ? answer.selections.filter((value) => value !== option)
+            : [...answer.selections, option],
+      };
+      return next;
+    });
+  const setText = (questionIndex: number, text: string) =>
+    setAnswers((current) => {
+      const next = questions.map((_, index) =>
+        current[index] ?? { selections: [], text: "" }
+      );
+      next[questionIndex] = { ...next[questionIndex]!, text };
       return next;
     });
   // 在途只用于按钮转圈；权威状态永远是 part 的 state。
   const [inFlight, setInFlight] = useState(false);
   const outcome = askUserOutcome(call);
-  const answer = outcome.kind === "answered" ? outcome : null;
-  const answeredSelections = new Set(answer?.selections ?? []);
-  const answeredText = [
-    ...(answer?.selections ?? []),
-    ...(answer?.text.trim() ? [answer.text.trim()] : []),
-  ].join(" / ");
+  const displayAnswerAt = (index: number): DraftAnswer => {
+    if (outcome.kind !== "answered") return answerAt(index);
+    const answer = outcome.answers[index];
+    return {
+      selections: answer?.selections ?? [],
+      text: answer?.text ?? "",
+    };
+  };
   // 服务端已经结算 = 这张卡永久不可操作，不管结算成什么。
   const resolved = outcome.kind !== "pending" || inFlight;
   const valid = questions.length > 0 && questions.every(
-    (question, index) =>
-      question.options.length === 0 || selectionAt(index).length > 0,
+    (_question, index) =>
+      answerAt(index).selections.length > 0 || answerAt(index).text.trim(),
   );
-  const buttonLabel = outcome.kind === "answered"
-    ? "Submitted"
-    : outcome.kind === "closed"
-      ? "Closed"
-      : inFlight
-        ? "Submitting…"
-        : "Submit";
-  const footnote = outcome.kind === "answered"
-    ? answeredText && `Answered: ${answeredText}`
-    : outcome.kind === "closed"
+  const buttonLabel = inFlight ? "Submitting…" : "Submit";
+  const footnote = outcome.kind === "closed"
       ? outcome.reason === "user_replied_freeform"
         ? "Answered in the chat instead."
         : "Closed without an answer."
       : "";
 
-  // 提交按钮固定在卡片右下角,和脚注同一行 —— 脚注不再单独占一行,多问题时
-  // 按钮也不会卡在某一题的选项中间。选项没到(流式首帧 questions 为空)时这行
-  // 照样渲染,否则用户看到的是一张空卡。
-  const submit = (
-    <WorkshopButton
-      tone="primary"
-      disabled={resolved || !valid || !onRespond}
-      onClick={() => {
-        if (!onRespond) return;
-        setInFlight(true);
-        // 失败就把按钮放回可点：权威状态由 part 决定，这里只管别把用户锁死。
-        void onRespond(call.toolCallId, {
-          selections: questions.flatMap((_, index) => selectionAt(index)),
-          text: "",
-        }).then((ok) => {
-          if (!ok) setInFlight(false);
-        });
-      }}
-      className="ml-auto !h-7 flex-shrink-0 gap-1 !rounded-lg px-2.5 text-[12px]"
-    >
-      {buttonLabel}
-    </WorkshopButton>
-  );
+  const submit = () => {
+    if (!onRespond) return;
+    setInFlight(true);
+    // 失败就把按钮放回可点：权威状态由 part 决定，这里只管别把用户锁死。
+    void onRespond(call.toolCallId, {
+      answers: questions.map((_, index) => ({
+        selections: answerAt(index).selections,
+        text: answerAt(index).text.trim(),
+      })),
+    }).then((ok) => {
+      if (!ok) setInFlight(false);
+    }, () => setInFlight(false));
+  };
 
   return (
-    // 收成 w-fit：短问题不该撑成一条横贯全栏的长条,长问题到 560px 再换行。
-    <div className="w-fit min-w-[15rem] max-w-[560px]">
-      {/* 组内(问题↔选项)10px、组间(题与题、题与按钮行)12px —— 组间必须比组内
-          松,否则多问题时上一题的选项会看起来像下一题的。
-          用 flex+gap 而不是 space-y-*:Tailwind v4 的 space-y 选择器裹在
-          `:where()` 里,特异性被抹平,会被子元素自己的 `m-0` 压掉 → 不生效。 */}
-      <div className="flex flex-col gap-3 rounded-xl border border-kumo-line bg-kumo-base px-3 py-2.5">
-        {questions.map((question, questionIndex) => (
-          <div
-            key={`${question.prompt}:${questionIndex}`}
-            className="flex flex-col gap-2.5"
-          >
-            <p className="m-0 text-[13px] leading-[18px] font-medium tracking-[-0.25px] text-kumo-default">
-              {question.prompt}
-            </p>
-            <div className="flex flex-wrap items-center gap-1.5">
-              {question.options.map((option) => {
-                const selected = answer
-                  ? answeredSelections.has(option)
-                  : selectionAt(questionIndex).includes(option);
-                return (
-                  <button
-                    key={option}
-                    type="button"
+    <div
+      className="w-full"
+      data-part-type="ask_user"
+      data-state={outcome.kind === "answered" ? "submitted" : outcome.kind}
+    >
+      <div className="flex flex-col gap-4 py-2.5">
+        {outcome.kind !== "closed" && questions.map((question, questionIndex) => {
+          const answer = displayAnswerAt(questionIndex);
+          const options = outcome.kind === "answered"
+            ? [...new Set([...question.options, ...answer.selections])]
+            : question.options;
+          return (
+            <div
+              key={`${question.prompt}:${questionIndex}`}
+              className="flex flex-col items-start gap-2"
+            >
+              <p className="m-0 text-[14px] leading-[1.4] font-normal text-kumo-default">
+                {question.prompt}
+              </p>
+              {options.length > 0 && (
+                <div className="flex flex-wrap items-center gap-2">
+                  {options.map((option) => {
+                    const selected = answer.selections.includes(option);
+                    return (
+                      <button
+                        key={option}
+                        type="button"
+                        aria-pressed={selected}
+                        disabled={resolved || !onRespond}
+                        onClick={() =>
+                          toggle(questionIndex, option, question.multi)}
+                        style={selected
+                          ? {
+                              background:
+                                "linear-gradient(#fff,#fff) padding-box, linear-gradient(90deg,#ff9938,#ffe46c) border-box",
+                            }
+                          : undefined}
+                        className={`inline-flex w-fit items-center justify-center rounded-lg border px-4 py-2 text-left text-[14px] leading-[1.4] font-normal text-[rgba(0,0,0,0.7)] transition-[background,border-color] duration-150 ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#ff9938]/30 ${
+                          selected
+                            ? "border-solid border-transparent"
+                            : resolved || !onRespond
+                              ? "border-[rgba(0,0,0,0.07)] bg-kumo-base opacity-60"
+                              : "cursor-pointer border-[rgba(0,0,0,0.07)] bg-kumo-base hover:border-[#ff9938]"
+                        }`}
+                      >
+                        {option}
+                      </button>
+                    );
+                  })}
+                </div>
+              )}
+              {question.allowCustom && (
+                <label className="flex w-full flex-col gap-2 text-[14px] leading-[1.4] text-kumo-default">
+                  <span>{question.options.length > 0 ? "Other" : "Answer"}</span>
+                  <input
+                    type="text"
+                    value={answer.text}
+                    maxLength={2_000}
                     disabled={resolved || !onRespond}
-                    onClick={() => toggle(questionIndex, option, question.multi)}
-                    className={`inline-flex h-7 cursor-pointer items-center rounded-lg border px-2.5 text-[13px] leading-none tracking-[-0.25px] transition-colors duration-150 ease-out disabled:cursor-default ${
-                      selected
-                        ? "border-kumo-brand/45 bg-kumo-brand/10 text-kumo-default"
-                        : "border-kumo-line bg-kumo-base text-kumo-subtle hover:bg-kumo-tint hover:text-kumo-default"
-                    }`}
-                  >
-                    {option}
-                  </button>
-                );
-              })}
+                    aria-label={`自定义回答：${question.prompt}`}
+                    placeholder={question.options.length > 0
+                      ? "Add a custom answer"
+                      : "Type your answer"}
+                    onChange={(event) =>
+                      setText(questionIndex, event.currentTarget.value)}
+                    className="rounded-lg border border-[rgba(0,0,0,0.07)] bg-kumo-base px-4 py-2 text-[14px] leading-[1.4] text-kumo-subtle outline-none placeholder:text-kumo-inactive focus:border-[#ff9938] focus:ring-2 focus:ring-[#ff9938]/20 disabled:cursor-default disabled:opacity-60"
+                  />
+                </label>
+              )}
+              {outcome.kind === "answered" &&
+                !question.allowCustom && answer.text.trim() && (
+                <p className="m-0 text-[14px] leading-[1.4] text-kumo-subtle">
+                  {answer.text.trim()}
+                </p>
+              )}
             </div>
-          </div>
-        ))}
-        <div className="flex items-center gap-3">
-          {footnote && (
-            <p className="m-0 min-w-0 text-[12px] leading-4 text-kumo-inactive">
-              {footnote}
-            </p>
-          )}
-          {submit}
-        </div>
+          );
+        })}
+        {outcome.kind === "pending" && (
+          <button
+            type="button"
+            disabled={resolved || !onRespond || !valid}
+            onClick={submit}
+            className="inline-flex h-10 min-w-[120px] self-start items-center justify-center rounded-lg bg-gradient-to-r from-[#ff9938] to-[#ffe46c] px-5 py-2.5 text-[14px] leading-5 font-medium text-black transition-opacity duration-150 ease-out hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#ff9938]/30 disabled:cursor-default disabled:opacity-50"
+          >
+            {buttonLabel}
+          </button>
+        )}
+        {outcome.kind === "answered" && (
+          <p className="m-0 text-[12px] leading-4 text-kumo-inactive">Submitted</p>
+        )}
+        {outcome.kind === "closed" && (
+          <p className="m-0 text-[12px] leading-4 text-kumo-inactive">
+            Closed{footnote ? ` · ${footnote}` : ""}
+          </p>
+        )}
       </div>
     </div>
   );
@@ -295,23 +357,26 @@ export function SuggestionsBlock({
   onSuggestion: (text: string) => void;
 }) {
   return (
-    <div className="max-w-[860px] space-y-2 pt-1">
-      <div className="flex items-center gap-2 px-1.5 text-[13px] leading-[18px] text-kumo-success">
-        <Check size={14} weight="bold" />
-        <span>Task complete</span>
-      </div>
-      <div className="flex flex-wrap gap-1.5 px-1.5">
-        {items.map((item) => (
-          <button
-            key={item}
-            type="button"
-            onClick={() => onSuggestion(item)}
-            className="inline-flex h-7 cursor-pointer items-center rounded-full border border-kumo-line bg-kumo-base px-3 text-[13px] leading-none tracking-[-0.25px] text-kumo-subtle transition-colors duration-150 ease-out hover:bg-kumo-tint hover:text-kumo-default focus-visible:outline-none active:scale-[0.98]"
-          >
-            {item}
-          </button>
-        ))}
-      </div>
+    <div className="flex max-w-[860px] flex-col items-start gap-3">
+      {items.map((item) => (
+        <button
+          key={item}
+          type="button"
+          onClick={() => onSuggestion(item)}
+          className="inline-flex cursor-pointer items-center gap-2 text-[14px] leading-[1.4] text-kumo-inactive transition-colors duration-150 ease-out hover:text-kumo-brand focus-visible:text-kumo-brand focus-visible:outline-none active:scale-[0.98]"
+        >
+          <span className="grid size-5 flex-shrink-0 place-items-center" aria-hidden="true">
+            <span className="rotate-180 -scale-y-100">
+              <img
+                src={new URL("../assets/followup-arrow.svg", import.meta.url).href}
+                alt=""
+                className="h-[8.33333px] w-[11.6667px]"
+              />
+            </span>
+          </span>
+          <span className="whitespace-nowrap">{item}</span>
+        </button>
+      ))}
     </div>
   );
 }
@@ -356,7 +421,7 @@ function scheduleCadence(input: Record<string, unknown>): string {
   return timezone ? `${cadence} · ${timezone}` : cadence;
 }
 
-/** `schedule` 工具的 details 是 `{ scheduled: true, id }`,id 即任务在 SchedulerAgent 里的主键。 */
+/** `schedule` 工具的 details 是 `{ scheduled: true, id }`,id 即 Inbox Schedule Definition 主键。 */
 function scheduleIdOf(output: unknown): string {
   if (typeof output !== "object" || output === null) return "";
   const id = (output as Record<string, unknown>).id;
@@ -382,7 +447,7 @@ export function ScheduleConfirmation({
   return (
     <section
       data-slot="schedule-card"
-      aria-label={`确认定时任务：${name}`}
+      aria-label={`Confirm scheduled task: ${name}`}
       className="themed-surface-inset flex w-full max-w-sm flex-col gap-3 rounded-2xl border border-kumo-line/70 bg-kumo-elevated p-4 text-kumo-default shadow-[0_1px_2px_rgba(0,0,0,0.04),0_12px_32px_-16px_rgba(0,0,0,0.12)]"
     >
       <div className="flex items-center gap-2.5">
@@ -413,10 +478,10 @@ export function ScheduleConfirmation({
 
       <div className="flex items-center justify-end gap-2">
         <WorkshopButton disabled={disabled} onClick={onCancel}>
-          取消
+          Cancel
         </WorkshopButton>
         <WorkshopButton tone="primary" disabled={disabled} onClick={onConfirm}>
-          {disabled ? "正在确认…" : "确认安排"}
+          {disabled ? "Confirming…" : "Confirm schedule"}
         </WorkshopButton>
       </div>
     </section>
@@ -520,22 +585,22 @@ export function PermissionGrant({
   "aria-label"?: string;
 }) {
   const actionClassName =
-    "inline-flex h-8 items-center rounded-full px-3 text-[12px] leading-none font-medium tracking-[-0.25px] transition-[background-color,color,opacity,transform] duration-150 ease-out active:scale-[0.96] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-kumo-ring/40 disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100";
+    "inline-flex h-10 w-[120px] items-center justify-center rounded-lg border border-kumo-line px-4 text-[14px] leading-[1.4] font-medium transition-[background-color,color,opacity,transform] duration-150 ease-out active:scale-[0.96] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-kumo-ring/40 disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100";
 
   return (
     <section
       aria-label={ariaLabel}
-      className="themed-surface-inset w-full max-w-sm rounded-[20px] border border-kumo-line bg-kumo-elevated p-4 text-kumo-default shadow-sm"
+      className="themed-surface-inset w-full rounded-xl border border-kumo-line bg-kumo-elevated p-4 text-kumo-default"
     >
-      <div className="flex items-center gap-2.5">
+      <div className="flex items-center gap-2">
         <span
-          className="flex size-7 shrink-0 items-center justify-center rounded-lg bg-kumo-fill/70 text-kumo-subtle"
+          className="flex size-8 shrink-0 items-center justify-center rounded-lg bg-kumo-fill text-kumo-subtle"
           aria-hidden="true"
         >
           <Key size={14} weight="bold" />
         </span>
         <div className="flex min-w-0 flex-1 flex-col">
-          <span className="truncate text-[13.5px] leading-[18px] font-medium">
+          <span className="truncate text-[14px] leading-[1.4] font-medium">
             {capability}
           </span>
           <span className="truncate text-[12px] leading-4 text-kumo-inactive">
@@ -544,41 +609,22 @@ export function PermissionGrant({
         </div>
       </div>
 
-      <div className="mt-3.5 flex max-h-[200px] flex-col gap-1 overflow-y-auto pr-1">
-        <span className="font-mono text-[10px] leading-4 text-kumo-inactive">
+      <div className="mt-4 flex max-h-[200px] flex-col gap-2 overflow-y-auto">
+        <span className="text-[12px] leading-4 text-kumo-inactive">
           this grants
         </span>
         {reach.map((item, index) => (
           <span
             key={`${index}:${item}`}
-            className="flex items-baseline gap-2 text-[12px] leading-[17px] text-kumo-subtle"
+            className="flex items-baseline gap-2 text-[14px] leading-[1.4] text-kumo-subtle"
           >
-            <span
-              className="size-1 shrink-0 rounded-full bg-kumo-interact"
-              aria-hidden="true"
-            />
+            <span aria-hidden="true">•</span>
             <span className="min-w-0 break-words whitespace-pre-wrap">{item}</span>
           </span>
         ))}
       </div>
 
-      <div className="mt-3.5 flex min-h-8 flex-wrap items-center justify-end gap-1">
-        <button
-          type="button"
-          disabled={disabled}
-          onClick={() => onGrant("deny")}
-          className={`${actionClassName} text-kumo-subtle enabled:hover:bg-kumo-fill enabled:hover:text-kumo-default`}
-        >
-          Deny
-        </button>
-        <button
-          type="button"
-          disabled={disabled}
-          onClick={() => onGrant("allow_once")}
-          className={`${actionClassName} text-kumo-subtle enabled:hover:bg-kumo-fill enabled:hover:text-kumo-default`}
-        >
-          Allow once
-        </button>
+      <div className="mt-4 flex flex-wrap items-center gap-2">
         <Tooltip
           content="Allow every action at this execution level, without future prompts."
           asChild
@@ -587,11 +633,27 @@ export function PermissionGrant({
             type="button"
             disabled={disabled}
             onClick={() => onGrant("allow_level")}
-            className={`${actionClassName} bg-kumo-contrast text-kumo-inverse enabled:hover:bg-kumo-strong`}
+            className={`${actionClassName} border-0 bg-[linear-gradient(90deg,#ffd077_0%,#ff9938_100%)] text-kumo-inverse enabled:hover:brightness-95`}
           >
             Allow level
           </button>
         </Tooltip>
+        <button
+          type="button"
+          disabled={disabled}
+          onClick={() => onGrant("allow_once")}
+          className={`${actionClassName} text-kumo-subtle enabled:hover:bg-kumo-fill enabled:hover:text-kumo-default`}
+        >
+          Allow once
+        </button>
+        <button
+          type="button"
+          disabled={disabled}
+          onClick={() => onGrant("deny")}
+          className={`${actionClassName} text-kumo-subtle enabled:hover:bg-kumo-fill enabled:hover:text-kumo-default`}
+        >
+          Deny
+        </button>
       </div>
     </section>
   );
@@ -659,15 +721,15 @@ export function ParallelBlock({
   const done = tools.filter((tool) => tool.status === "done").length;
   return (
     <div className="max-w-[860px]">
-      <div className="flex items-center gap-3 px-1.5 py-1 text-[14px] leading-5 tracking-[-0.25px] text-kumo-subtle">
-        <span className="flex h-5 w-5 flex-shrink-0 items-center justify-center">
+      <div className="flex items-start gap-2 px-1.5 py-1 text-[14px] leading-[1.4] text-kumo-inactive">
+        <span className={DISCLOSURE_ICON}>
           <WorkIcon Icon={ListChecks} />
         </span>
         <span className="min-w-0 truncate">
           {label} · {done}/{tools.length}
         </span>
       </div>
-      <div className="ml-8 mt-1 space-y-1">
+      <div className="mt-1 space-y-1">
         {tools.map((tool, index) => (
           <div
             key={`${tool.label}-${index}`}
@@ -690,15 +752,15 @@ export function ParallelBlock({
 export function SubAgentsBlock({ agents }: { agents: SubAgentView[] }) {
   return (
     <div className="max-w-[860px]">
-      <div className="flex items-center gap-3 px-1.5 py-1 text-[14px] leading-5 tracking-[-0.25px] text-kumo-subtle">
-        <span className="flex h-5 w-5 flex-shrink-0 items-center justify-center">
+      <div className="flex items-start gap-2 px-1.5 py-1 text-[14px] leading-[1.4] text-kumo-inactive">
+        <span className={DISCLOSURE_ICON}>
           <WorkIcon Icon={UsersThree} />
         </span>
         <span className="min-w-0 truncate">
           {agents.length === 1 ? "Sub-agent" : `${agents.length} sub-agents`}
         </span>
       </div>
-      <div className="ml-8 mt-1 space-y-1">
+      <div className="mt-1 space-y-1">
         {agents.map((agent, index) => (
           <div
             key={`${agent.name}-${index}`}
@@ -736,28 +798,24 @@ export function ErrorBlock({
   const [expanded, setExpanded] = useState(false);
   return (
     <div className="group/work max-w-[860px] text-[14px] leading-5 tracking-[-0.25px] text-kumo-subtle">
-      <div className="flex w-full items-center gap-2 px-1.5 py-1">
+      <div className="flex w-full items-start gap-2">
         <button
           type="button"
           onClick={() => setExpanded((value) => !value)}
-          className="flex min-w-0 flex-1 cursor-pointer items-center gap-3 rounded-md text-left transition-colors duration-150 ease-out hover:text-kumo-default focus-visible:text-kumo-default focus-visible:outline-none active:scale-[0.995]"
+          className={`${DISCLOSURE_TITLE_WITH_ICON} flex-1`}
           aria-expanded={expanded}
         >
           <span
-            className="flex h-5 w-5 flex-shrink-0 items-center justify-center text-kumo-danger"
+            className={`${DISCLOSURE_ICON} text-kumo-danger`}
             aria-hidden="true"
           >
-            <WarningCircle size={16} weight="fill" />
+            <WarningCircle size={15} weight="fill" />
           </span>
           <span className="flex min-w-0 flex-1 items-center gap-1">
-            <span className="min-w-0 truncate">
-              <span className="font-medium text-kumo-danger">{title}: </span>
-              <span className="text-kumo-subtle">{body}</span>
-            </span>
+            <span className="min-w-0 truncate text-kumo-danger">{title}</span>
             {body && (
               <CaretRight
-                size={13}
-                weight="bold"
+                size={16}
                 className={`flex-shrink-0 text-kumo-inactive transition-transform duration-150 ease-out ${expanded ? "rotate-90" : ""}`}
               />
             )}
@@ -776,7 +834,7 @@ export function ErrorBlock({
         )}
       </div>
       {expanded && body && (
-        <div className="ml-8 mt-1">
+        <div className="mt-1">
           <pre className="max-h-48 overflow-auto rounded-xl border border-kumo-line/70 bg-kumo-base p-3 font-mono text-[12px] leading-[18px] text-kumo-subtle whitespace-pre-wrap">
             {body}
           </pre>