@springbrand/message-panel 0.1.3-alpha.32 → 0.1.3-alpha.34

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

@@ -1,8 +1,9 @@
 import {
+  ArrowLeft,
+  ArrowRight,
   Bell,
   CaretRight,
   Check,
-  CheckCircle,
   CircleNotch,
   Clock,
   Key,
@@ -10,16 +11,11 @@ import {
   UsersThree,
   WarningCircle,
 } from "@phosphor-icons/react";
-import { useId, useState } from "react";
+import { useRef, useState } from "react";
 import { Tooltip } from "../primitives/tooltip";
 import { WorkshopButton } from "../primitives/workshop-controls";
 import { MarkdownMessage } from "./markdown-message";
-import {
-  SECONDARY_DISCLOSURE_ICON,
-  SECONDARY_DISCLOSURE_TITLE_WITH_ICON,
-  SECONDARY_DISCLOSURE_TITLE_WITHOUT_ICON,
-  WorkIcon,
-} from "./tool-rows";
+import { WorkIcon } from "./tool-rows";
 import type {
   ParallelTool,
   PlanStep,
@@ -31,13 +27,12 @@ import {
   safeStringify,
   type CloudOsToolCall,
 } from "./tool-presentation";
-import { useLifecycleDisclosure } from "./use-lifecycle-disclosure";
 
 /**
  * UIMessage 协议里存在、gadgets 那套没有的几类 part —— 计划快照、原位提问、
  * 后续建议、定时任务、并行/子 Agent、原位授权。视觉语言全部沿用 cloud-os:
  * 折叠工作行用 `px-1.5 py-1` 的行式布局,卡片用
- * `rounded-2xl border-kumo-line/70 bg-kumo-elevated/45 p-3`,
+ * `themed-surface-inset rounded-2xl border-kumo-line/70 bg-kumo-elevated/45 p-3`,
  * 授权卡沿用 renderActionCard 的 blocking callout(brand/40 边 + brand/10 底)。
  */
 
@@ -46,38 +41,37 @@ import { useLifecycleDisclosure } from "./use-lifecycle-disclosure";
 export function PlanBlock({
   steps,
   running,
-  showCollapsedSummary = true,
 }: {
   steps: PlanStep[];
   running: boolean;
-  showCollapsedSummary?: boolean;
 }) {
   const done = steps.filter((step) => step.status === "done").length;
   const current = steps.find((step) => step.status === "in_progress");
-  const [open, toggle] = useLifecycleDisclosure(running);
+  const [open, setOpen] = useState(true);
 
   return (
-    <div className="group">
+    <div className="group -ml-0.5">
       <button
         type="button"
-        onClick={toggle}
-        className={`${SECONDARY_DISCLOSURE_TITLE_WITH_ICON} w-full`}
+        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}
       >
-        <span className={SECONDARY_DISCLOSURE_ICON}>
+        <span className="flex h-5 w-5 flex-shrink-0 items-center justify-center">
           <WorkIcon Icon={ListChecks} />
         </span>
         <span className="min-w-0 flex-1">
-          <span className="flex min-w-0 items-center gap-2">
+          <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={16}
+              size={13}
+              weight="bold"
               className={`flex-shrink-0 text-kumo-inactive transition-transform duration-150 ease-out ${open ? "rotate-90" : ""}`}
             />
           </span>
-          {!open && showCollapsedSummary && current && (
+          {!open && current && (
             <span className="mt-1 block truncate font-mono text-[12px] leading-4 text-kumo-inactive">
               {current.text}
             </span>
@@ -85,34 +79,35 @@ export function PlanBlock({
         </span>
       </button>
       {open && (
-        <div className="mt-1 flex flex-col gap-2 rounded-xl border border-kumo-line bg-[rgba(0,0,0,0.03)] px-4 py-3">
+        <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">
           {steps.map((step, index) => (
             <div
               key={`${step.text}-${index}`}
-              className="flex items-center gap-2 text-[14px] leading-[1.4] font-normal tracking-normal"
+              className="flex items-start gap-2.5 text-[13px] leading-[19px] tracking-[-0.25px]"
             >
               <span
-                className="flex size-4 flex-shrink-0 items-center justify-center"
+                className="mt-0.5 flex h-4 w-4 flex-shrink-0 items-center justify-center"
                 aria-hidden="true"
               >
                 {step.status === "done" ? (
-                  <CheckCircle size={16} weight="fill" className="text-[#00bf75]" />
+                  <Check size={12} weight="bold" className="text-kumo-success" />
                 ) : step.status === "in_progress" ? (
                   <CircleNotch
-                    size={16}
-                    className="animate-spin text-[#ff9938] motion-reduce:animate-none"
+                    size={12}
+                    weight="bold"
+                    className="animate-spin text-kumo-brand motion-reduce:animate-none"
                   />
                 ) : (
-                  <span className="h-1.5 w-1.5 rounded-full bg-[color:var(--text-color-kumo-default)] opacity-20" />
+                  <span className="h-1.5 w-1.5 rounded-full bg-kumo-fill" />
                 )}
               </span>
               <span
                 className={
                   step.status === "done"
-                    ? "min-w-0 flex-1 text-kumo-default/30 line-through"
+                    ? "min-w-0 flex-1 text-kumo-inactive line-through"
                     : step.status === "in_progress"
-                      ? "min-w-0 flex-1 text-kumo-default"
-                      : "min-w-0 flex-1 text-kumo-default/70"
+                      ? "min-w-0 flex-1 font-medium text-kumo-default"
+                      : "min-w-0 flex-1 text-kumo-subtle"
                 }
               >
                 {step.text}
@@ -172,7 +167,8 @@ export function AskUserBlock({
   // 首帧 questions 往往还是空数组,那之后每次 setAnswers 都在空数组上 map,
   // 选择永远存不进去 → Submit 永久禁用。改成稀疏存 + 按当前 questions 补齐。
   const [answers, setAnswers] = useState<DraftAnswer[]>([]);
-  const contentId = useId();
+  const [current, setCurrent] = useState(0);
+  const direction = useRef<"back" | "forward">("forward");
   const answerAt = (index: number): DraftAnswer =>
     answers[index] ?? { selections: [], text: "" };
   const toggle = (questionIndex: number, option: string, multi: boolean) =>
@@ -202,43 +198,31 @@ export function AskUserBlock({
   // 在途只用于按钮转圈；权威状态永远是 part 的 state。
   const [inFlight, setInFlight] = useState(false);
   const outcome = askUserOutcome(call);
-  const [open, toggleDisclosure] = useLifecycleDisclosure(
-    outcome.kind === "pending",
-  );
-  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 settledAnswers = outcome.kind === "answered" ? outcome.answers : [];
   // 服务端已经结算 = 这张卡永久不可操作，不管结算成什么。
   const resolved = outcome.kind !== "pending" || inFlight;
   const valid = questions.length > 0 && questions.every(
     (_question, index) =>
       answerAt(index).selections.length > 0 || answerAt(index).text.trim(),
   );
-  const titleBase = questions.length === 1
-    ? "Clarifying question"
-    : "Clarifying questions";
-  const disclosureTitle = outcome.kind === "pending"
-    ? questions.length === 1 && questions[0]
-      ? `${titleBase} — ${questions[0].prompt}`
-      : questions.length > 1
-        ? `${titleBase} · ${questions.length} questions`
-        : titleBase
-    : outcome.kind === "answered"
-      ? questions.length > 1
-        ? `${titleBase} · ${questions.length} answered`
-        : `${titleBase} · Answered`
-      : `${titleBase} · Closed`;
-  const buttonLabel = inFlight ? "Submitting…" : "Submit";
+  const currentIndex = Math.min(current, Math.max(questions.length - 1, 0));
+  const currentQuestion = questions[currentIndex];
+  const currentAnswer = answerAt(currentIndex);
+  const currentValid = currentAnswer.selections.length > 0 ||
+    Boolean(currentAnswer.text.trim());
+  const isLast = currentIndex === questions.length - 1;
+  const buttonLabel = outcome.kind === "answered"
+    ? "Submitted"
+    : outcome.kind === "closed"
+      ? "Closed"
+      : inFlight
+        ? "Submitting…"
+        : "Submit";
   const footnote = outcome.kind === "closed"
-    ? outcome.reason === "user_replied_freeform"
-      ? "Answered in the chat instead."
-      : "Closed without an answer."
-    : "";
+      ? outcome.reason === "user_replied_freeform"
+        ? "Answered in the chat instead."
+        : "Closed without an answer."
+      : "";
 
   const submit = () => {
     if (!onRespond) return;
@@ -254,129 +238,205 @@ export function AskUserBlock({
     }, () => setInFlight(false));
   };
 
-  const closedButton = (
+  const settledButton = (
     <WorkshopButton
       tone="primary"
       disabled
       className="ml-auto !h-7 flex-shrink-0 gap-1 !rounded-lg px-2.5 text-[12px]"
     >
-      Closed
+      {buttonLabel}
     </WorkshopButton>
   );
 
   return (
+    // 收成 w-fit：短问题不该撑成一条横贯全栏的长条,长问题到 560px 再换行。
     <div
-      className="w-full"
+      className="w-fit min-w-[15rem] max-w-[560px]"
       data-part-type="ask_user"
       data-state={outcome.kind === "answered" ? "submitted" : outcome.kind}
     >
-      <div className="flex flex-col gap-3 py-2.5">
-        <button
-          type="button"
-          onClick={toggleDisclosure}
-          aria-expanded={open}
-          aria-controls={contentId}
-          title={disclosureTitle}
-          className={`${SECONDARY_DISCLOSURE_TITLE_WITHOUT_ICON} max-w-full`}
-        >
-          <span className="min-w-0 truncate">{disclosureTitle}</span>
-          <CaretRight
-            size={16}
-            className={`shrink-0 transition-transform duration-150 ease-out ${open ? "rotate-90" : ""}`}
-          />
-        </button>
-        <div
-          id={contentId}
-          data-ask-user-content=""
-          className={open ? "flex flex-col gap-3" : "hidden"}
-        >
-          {outcome.kind !== "closed" ? (
-            <>
-              <div className="flex flex-col gap-4">
-                {questions.map((question, questionIndex) => {
-                  const answer = displayAnswerAt(questionIndex);
-                  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-black">
-                        {question.prompt}
-                      </p>
-                      {question.options.length > 0 && (
-                        <div className="flex flex-wrap items-center gap-2">
-                          {question.options.map((option) => {
-                            const selected = answer.selections.includes(option);
-                            return (
-                              <button
-                                key={option}
-                                type="button"
-                                aria-pressed={selected}
+      <div className="flex flex-col gap-3 rounded-xl border border-kumo-line bg-kumo-base px-3 py-2.5">
+        {outcome.kind === "pending" ? (
+          <>
+            {questions.length > 1 && (
+              <div className="flex flex-col gap-2">
+                <div className="flex items-center justify-between text-[11px] font-medium leading-4 text-kumo-inactive">
+                  <span>Clarifying questions</span>
+                  <span className="tabular-nums">
+                    {currentIndex + 1}/{questions.length}
+                  </span>
+                </div>
+                <div className="flex gap-1" aria-hidden="true">
+                  {questions.map((question, index) => (
+                    <span
+                      key={`${question.prompt}:${index}`}
+                      className={`h-1 flex-1 rounded-full ${
+                        index < currentIndex
+                          ? "bg-kumo-brand"
+                          : index === currentIndex
+                            ? "bg-kumo-brand/60"
+                            : "bg-kumo-fill"
+                      }`}
+                    />
+                  ))}
+                </div>
+              </div>
+            )}
+            {currentQuestion && (
+              <div className="overflow-hidden">
+                <div
+                  key={currentIndex}
+                  className="cos-ask-user-question flex flex-col gap-2.5"
+                  data-direction={direction.current}
+                >
+                  <p className="m-0 text-[13px] leading-[18px] font-medium tracking-[-0.25px] text-kumo-default">
+                    {currentQuestion.prompt}
+                  </p>
+                  {currentQuestion.options.length > 0 && (
+                    <ul className="m-0 flex list-none flex-col gap-1.5 p-0">
+                      {currentQuestion.options.map((option) => {
+                        const selected = currentAnswer.selections.includes(
+                          option,
+                        );
+                        return (
+                          <li key={option} className="m-0 p-0">
+                            <label
+                              className={`flex min-h-8 items-center gap-2 rounded-lg border px-2.5 py-1.5 text-[13px] leading-[18px] tracking-[-0.25px] transition-colors duration-150 ease-out ${
+                                resolved || !onRespond
+                                  ? "cursor-default text-kumo-inactive"
+                                  : "cursor-pointer text-kumo-subtle hover:bg-kumo-tint hover:text-kumo-default"
+                              } ${
+                                selected
+                                  ? "border-kumo-brand/45 bg-kumo-brand/10 text-kumo-default"
+                                  : "border-kumo-line bg-kumo-base"
+                              }`}
+                            >
+                              <input
+                                type={currentQuestion.multi
+                                  ? "checkbox"
+                                  : "radio"}
+                                name={`${call.toolCallId}-${currentIndex}`}
+                                checked={selected}
                                 disabled={resolved || !onRespond}
-                                onClick={() =>
-                                  toggle(questionIndex, option, question.multi)}
-                                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
-                                    ? `${resolved || !onRespond ? "cursor-default" : "cursor-pointer"} border-[#ff9938] bg-[#fff]`
-                                    : resolved
-                                      ? "cursor-default border-[rgba(0,0,0,0.07)] bg-[#fff]"
-                                      : !onRespond
-                                      ? "cursor-default border-[rgba(0,0,0,0.07)] bg-[#fff] opacity-60"
-                                      : "cursor-pointer border-[rgba(0,0,0,0.07)] bg-[#fff] hover:border-transparent hover:bg-[linear-gradient(#fff,#fff)_padding-box,linear-gradient(90deg,#ff9938,#ffe46c)_border-box]"
-                                }`}
-                              >
-                                {option}
-                              </button>
-                            );
-                          })}
-                        </div>
-                      )}
-                      {question.allowCustom && (
-                        <label className="flex w-full flex-col gap-2">
-                          <span className="m-0 text-[14px] leading-[1.4] font-normal text-black">
-                            {question.options.length > 0 ? "Other" : "Answer"}
-                          </span>
-                          <input
-                            type="text"
-                            value={answer.text}
-                            maxLength={2_000}
-                            disabled={resolved || !onRespond}
-                            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-[#fff] px-4 py-2 text-[14px] leading-[1.4] font-normal text-[rgba(0,0,0,0.7)] outline-none placeholder:text-kumo-inactive focus:border-[#ff9938] focus:ring-2 focus:ring-[#ff9938]/30 disabled:cursor-default"
-                          />
-                        </label>
-                      )}
-                    </div>
-                  );
-                })}
+                                onChange={() =>
+                                  toggle(
+                                    currentIndex,
+                                    option,
+                                    currentQuestion.multi,
+                                  )}
+                                className="h-4 w-4 shrink-0 accent-[var(--color-kumo-brand)]"
+                              />
+                              <span>{option}</span>
+                            </label>
+                          </li>
+                        );
+                      })}
+                    </ul>
+                  )}
+                  {currentQuestion.allowCustom && (
+                    <label className="flex flex-col gap-1 text-[12px] leading-4 text-kumo-subtle">
+                      <span>
+                        {currentQuestion.options.length > 0 ? "Other" : "Answer"}
+                      </span>
+                      <input
+                        type="text"
+                        value={currentAnswer.text}
+                        maxLength={2_000}
+                        disabled={resolved || !onRespond}
+                        aria-label={`自定义回答：${currentQuestion.prompt}`}
+                        placeholder={currentQuestion.options.length > 0
+                          ? "Add a custom answer"
+                          : "Type your answer"}
+                        onChange={(event) =>
+                          setText(currentIndex, event.currentTarget.value)}
+                        className="h-8 rounded-lg border border-kumo-line bg-kumo-base px-2.5 text-[13px] text-kumo-default outline-none placeholder:text-kumo-inactive focus:border-kumo-brand focus:ring-2 focus:ring-kumo-brand/20 disabled:cursor-default"
+                      />
+                    </label>
+                  )}
+                </div>
               </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"
+            )}
+            <div className="flex items-center gap-2">
+              {questions.length > 1 && (
+                <WorkshopButton
+                  disabled={currentIndex === 0 || resolved}
+                  onClick={() => {
+                    direction.current = "back";
+                    setCurrent((index) => Math.max(0, index - 1));
+                  }}
+                  className="!h-7 gap-1 !rounded-lg px-2.5 text-[12px]"
                 >
-                  {buttonLabel}
-                </button>
+                  <ArrowLeft size={13} weight="bold" />
+                  Back
+                </WorkshopButton>
               )}
-            </>
-          ) : (
+              <WorkshopButton
+                tone="primary"
+                disabled={
+                  resolved || !onRespond ||
+                  (questions.length > 1 && !isLast ? !currentValid : !valid)
+                }
+                onClick={() => {
+                  if (questions.length > 1 && !isLast) {
+                    direction.current = "forward";
+                    setCurrent((index) =>
+                      Math.min(questions.length - 1, index + 1)
+                    );
+                    return;
+                  }
+                  submit();
+                }}
+                className="ml-auto !h-7 gap-1 !rounded-lg px-2.5 text-[12px]"
+              >
+                {questions.length > 1 && !isLast ? (
+                  <>
+                    Next
+                    <ArrowRight size={13} weight="bold" />
+                  </>
+                ) : buttonLabel}
+              </WorkshopButton>
+            </div>
+          </>
+        ) : (
+          <>
+            {outcome.kind === "answered" &&
+              questions.map((question, questionIndex) => (
+                <div
+                  key={`${question.prompt}:${questionIndex}`}
+                  className="flex flex-col gap-1.5"
+                >
+                  <p className="m-0 text-[13px] leading-[18px] font-medium tracking-[-0.25px] text-kumo-default">
+                    {question.prompt}
+                  </p>
+                  {settledAnswers[questionIndex] && (
+                    <div className="flex flex-col gap-1 text-[12px] leading-4 text-kumo-inactive">
+                      {settledAnswers[questionIndex]!.selections.length > 0 && (
+                        <p className="m-0">
+                          Answered: {settledAnswers[questionIndex]!.selections
+                            .join(" / ")}
+                        </p>
+                      )}
+                      {settledAnswers[questionIndex]!.text.trim() && (
+                        <p className="m-0">
+                          {settledAnswers[questionIndex]!.selections.length > 0
+                            ? `补充：${settledAnswers[questionIndex]!.text.trim()}`
+                            : `Answered: ${settledAnswers[questionIndex]!.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>
               )}
-              {closedButton}
+              {settledButton}
             </div>
-          )}
-        </div>
+          </>
+        )}
       </div>
     </div>
   );
@@ -483,7 +543,7 @@ export function ScheduleConfirmation({
     <section
       data-slot="schedule-card"
       aria-label={`Confirm scheduled task: ${name}`}
-      className="flex w-full max-w-sm flex-col gap-3 rounded-2xl border border-kumo-line/70 bg-operation-base 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)]"
+      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">
         <span
@@ -547,7 +607,7 @@ export function ScheduleBlock({
               "aria-label": `Open scheduled task: ${String(call.input.label ?? call.input.title ?? "Scheduled task")}`,
             }
           : {})}
-        className={`w-full rounded-2xl border border-kumo-line bg-operation-base px-4 py-3 text-left${
+        className={`w-full rounded-2xl border border-kumo-line bg-kumo-base px-4 py-3 text-left${
           clickable
             ? " cursor-pointer transition-colors duration-150 ease-out hover:bg-kumo-tint focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-kumo-brand/50"
             : ""
@@ -625,7 +685,7 @@ export function PermissionGrant({
   return (
     <section
       aria-label={ariaLabel}
-      className="w-full rounded-xl border border-kumo-line bg-operation-base p-4 text-kumo-default"
+      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">
         <span
@@ -749,104 +809,72 @@ function StatusDot({ status }: { status: ParallelTool["status"] }) {
 export function ParallelBlock({
   label,
   tools,
-  running = tools.some((tool) => tool.status === "running"),
 }: {
   label: string;
   tools: ParallelTool[];
-  running?: boolean;
 }) {
   const done = tools.filter((tool) => tool.status === "done").length;
-  const [open, toggle] = useLifecycleDisclosure(running);
   return (
     <div className="max-w-[860px]">
-      <button
-        type="button"
-        onClick={toggle}
-        className={SECONDARY_DISCLOSURE_TITLE_WITH_ICON}
-        aria-expanded={open}
-      >
-        <span className={SECONDARY_DISCLOSURE_ICON}>
+      <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">
           <WorkIcon Icon={ListChecks} />
         </span>
         <span className="min-w-0 truncate">
           {label} · {done}/{tools.length}
         </span>
-        <CaretRight
-          size={16}
-          className={`flex-shrink-0 text-kumo-inactive transition-transform duration-150 ease-out ${open ? "rotate-90" : ""}`}
-        />
-      </button>
-      {open && (
-        <div className="mt-1 space-y-1">
-          {tools.map((tool, index) => (
-            <div
-              key={`${tool.label}-${index}`}
-              className="flex items-center gap-2 px-1.5 text-[13px] leading-[19px] tracking-[-0.25px] text-kumo-subtle"
-            >
-              <StatusDot status={tool.status} />
-              <span className="min-w-0 flex-1 truncate">{tool.label}</span>
-              {tool.meta && (
-                <span className="flex-shrink-0 font-mono text-[11px] leading-4 text-kumo-inactive">
-                  {tool.meta}
-                </span>
-              )}
-            </div>
-          ))}
-        </div>
-      )}
+      </div>
+      <div className="ml-8 mt-1 space-y-1">
+        {tools.map((tool, index) => (
+          <div
+            key={`${tool.label}-${index}`}
+            className="flex items-center gap-2 px-1.5 text-[13px] leading-[19px] tracking-[-0.25px] text-kumo-subtle"
+          >
+            <StatusDot status={tool.status} />
+            <span className="min-w-0 flex-1 truncate">{tool.label}</span>
+            {tool.meta && (
+              <span className="flex-shrink-0 font-mono text-[11px] leading-4 text-kumo-inactive">
+                {tool.meta}
+              </span>
+            )}
+          </div>
+        ))}
+      </div>
     </div>
   );
 }
 
-export function SubAgentsBlock({
-  agents,
-  running = agents.some((agent) => agent.status === "running"),
-}: {
-  agents: SubAgentView[];
-  running?: boolean;
-}) {
-  const [open, toggle] = useLifecycleDisclosure(running);
+export function SubAgentsBlock({ agents }: { agents: SubAgentView[] }) {
   return (
     <div className="max-w-[860px]">
-      <button
-        type="button"
-        onClick={toggle}
-        className={SECONDARY_DISCLOSURE_TITLE_WITH_ICON}
-        aria-expanded={open}
-      >
-        <span className={SECONDARY_DISCLOSURE_ICON}>
+      <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">
           <WorkIcon Icon={UsersThree} />
         </span>
         <span className="min-w-0 truncate">
           {agents.length === 1 ? "Sub-agent" : `${agents.length} sub-agents`}
         </span>
-        <CaretRight
-          size={16}
-          className={`flex-shrink-0 text-kumo-inactive transition-transform duration-150 ease-out ${open ? "rotate-90" : ""}`}
-        />
-      </button>
-      {open && (
-        <div className="mt-1 space-y-1">
-          {agents.map((agent, index) => (
-            <div
-              key={`${agent.name}-${index}`}
-              className="flex items-start gap-2 px-1.5 text-[13px] leading-[19px] tracking-[-0.25px]"
-            >
-              <span className="mt-1.5 flex">
-                <StatusDot status={agent.status} />
-              </span>
-              <span className="min-w-0 flex-1">
-                <span className="block truncate font-medium text-kumo-default">
-                  {agent.name}
-                </span>
-                {agent.summary && (
-                  <span className="block text-kumo-subtle">{agent.summary}</span>
-                )}
+      </div>
+      <div className="ml-8 mt-1 space-y-1">
+        {agents.map((agent, index) => (
+          <div
+            key={`${agent.name}-${index}`}
+            className="flex items-start gap-2 px-1.5 text-[13px] leading-[19px] tracking-[-0.25px]"
+          >
+            <span className="mt-1.5 flex">
+              <StatusDot status={agent.status} />
+            </span>
+            <span className="min-w-0 flex-1">
+              <span className="block truncate font-medium text-kumo-default">
+                {agent.name}
               </span>
-            </div>
-          ))}
-        </div>
-      )}
+              {agent.summary && (
+                <span className="block text-kumo-subtle">{agent.summary}</span>
+              )}
+            </span>
+          </div>
+        ))}
+      </div>
     </div>
   );
 }
@@ -862,30 +890,31 @@ export function ErrorBlock({
   body?: string;
   onRetry?: () => void;
 }) {
-  const [expanded, toggle] = useLifecycleDisclosure(false);
+  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">
+      <div className="flex w-full items-center gap-2 px-1.5 py-1">
         <button
           type="button"
-          onClick={toggle}
-          className={`${SECONDARY_DISCLOSURE_TITLE_WITH_ICON} flex-1`}
+          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]"
           aria-expanded={expanded}
         >
           <span
-            className={`${SECONDARY_DISCLOSURE_ICON} text-kumo-danger`}
+            className="flex h-5 w-5 flex-shrink-0 items-center justify-center text-kumo-danger"
             aria-hidden="true"
           >
-            <WarningCircle size={15} weight="fill" />
+            <WarningCircle size={16} weight="fill" />
           </span>
           <span className="flex min-w-0 flex-1 items-center gap-1">
             <span className="min-w-0 truncate">
-              <span>{title}: </span>
-              <span>{body}</span>
+              <span className="font-medium text-kumo-danger">{title}: </span>
+              <span className="text-kumo-subtle">{body}</span>
             </span>
             {body && (
               <CaretRight
-                size={16}
+                size={13}
+                weight="bold"
                 className={`flex-shrink-0 text-kumo-inactive transition-transform duration-150 ease-out ${expanded ? "rotate-90" : ""}`}
               />
             )}
@@ -904,7 +933,7 @@ export function ErrorBlock({
         )}
       </div>
       {expanded && body && (
-        <div className="mt-1">
+        <div className="ml-8 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>