@springbrand/message-panel 0.1.3-alpha.1 → 0.1.3-alpha.3

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

@@ -0,0 +1,672 @@
+import {
+  Bell,
+  CaretRight,
+  Check,
+  CircleNotch,
+  ListChecks,
+  ShieldCheck,
+  UsersThree,
+  WarningCircle,
+} from "@phosphor-icons/react";
+import { useState } from "react";
+import { Tooltip } from "../primitives/tooltip";
+import { WorkshopButton } from "../primitives/workshop-controls";
+import { MarkdownMessage } from "./markdown-message";
+import { WorkIcon } from "./tool-rows";
+import type {
+  ParallelTool,
+  PlanStep,
+  SubAgentView,
+} from "./transcript-model";
+import { askUserOutcome, type CloudOsToolCall } from "./tool-presentation";
+
+/**
+ * UIMessage 协议里存在、gadgets 那套没有的几类 part —— 计划快照、原位提问、
+ * 后续建议、定时任务、并行/子 Agent、原位授权。视觉语言全部沿用 cloud-os:
+ * 折叠工作行用 `px-1.5 py-1` 的行式布局,卡片用
+ * `themed-surface-inset rounded-2xl border-kumo-line/70 bg-kumo-elevated/45 p-3`,
+ * 授权卡沿用 renderActionCard 的 blocking callout(brand/40 边 + brand/10 底)。
+ */
+
+// ── 计划快照 ────────────────────────────────────────────────────────────────
+
+export function PlanBlock({
+  steps,
+  running,
+}: {
+  steps: PlanStep[];
+  running: boolean;
+}) {
+  const done = steps.filter((step) => step.status === "done").length;
+  const current = steps.find((step) => step.status === "in_progress");
+  const [open, setOpen] = useState(true);
+
+  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}
+      >
+        <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 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>
+          {!open && current && (
+            <span className="mt-1 block truncate font-mono text-[12px] leading-4 text-kumo-inactive">
+              {current.text}
+            </span>
+          )}
+        </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">
+          {steps.map((step, index) => (
+            <div
+              key={`${step.text}-${index}`}
+              className="flex items-start gap-2.5 text-[13px] leading-[19px] tracking-[-0.25px]"
+            >
+              <span
+                className="mt-0.5 flex h-4 w-4 flex-shrink-0 items-center justify-center"
+                aria-hidden="true"
+              >
+                {step.status === "done" ? (
+                  <Check size={12} weight="bold" className="text-kumo-success" />
+                ) : step.status === "in_progress" ? (
+                  <CircleNotch
+                    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-kumo-fill" />
+                )}
+              </span>
+              <span
+                className={
+                  step.status === "done"
+                    ? "min-w-0 flex-1 text-kumo-inactive line-through"
+                    : step.status === "in_progress"
+                      ? "min-w-0 flex-1 font-medium text-kumo-default"
+                      : "min-w-0 flex-1 text-kumo-subtle"
+                }
+              >
+                {step.text}
+              </span>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ── 原位提问 ────────────────────────────────────────────────────────────────
+
+interface AskQuestion {
+  prompt: string;
+  options: string[];
+  multi: 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 [];
+}
+
+export function AskUserBlock({
+  call,
+  onRespond,
+}: {
+  call: CloudOsToolCall;
+  /** 缺省（宿主没接）时选项不可点 —— 形状对齐 ScheduleBlock 的 onOpen。 */
+  onRespond?: (toolCallId: string, response: unknown) => Promise<boolean>;
+}) {
+  const questions = questionsOf(call.input);
+  // 不能用 `useState(() => questions.map(() => []))` 初始化:工具入参是**流式**到达的,
+  // 首帧 questions 往往还是空数组,那之后每次 setSelections 都在空数组上 map,
+  // 选择永远存不进去 → Submit 永久禁用。改成稀疏存 + 按当前 questions 补齐。
+  const [selections, setSelections] = useState<string[][]>([]);
+  const selectionAt = (index: number) => selections[index] ?? [];
+  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];
+      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 resolved = outcome.kind !== "pending" || inFlight;
+  const valid = questions.length > 0 && questions.every(
+    (question, index) =>
+      question.options.length === 0 || selectionAt(index).length > 0,
+  );
+  const buttonLabel = outcome.kind === "answered"
+    ? "Submitted"
+    : outcome.kind === "closed"
+      ? "Closed"
+      : inFlight
+        ? "Submitting…"
+        : "Submit";
+  const footnote = outcome.kind === "answered"
+    ? answeredText && `Answered: ${answeredText}`
+    : 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>
+  );
+
+  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"
+                    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>
+                );
+              })}
+            </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>
+      </div>
+    </div>
+  );
+}
+
+// ── 后续建议 ────────────────────────────────────────────────────────────────
+
+export function SuggestionsBlock({
+  items,
+  onSuggestion,
+}: {
+  items: string[];
+  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>
+  );
+}
+
+// ── 定时任务 ────────────────────────────────────────────────────────────────
+
+function scheduleDuration(seconds: unknown): string {
+  if (typeof seconds !== "number" || !Number.isFinite(seconds) || seconds <= 0) {
+    return "";
+  }
+  for (const [size, unit] of [
+    [86_400, "day"],
+    [3_600, "hour"],
+    [60, "minute"],
+  ] as const) {
+    if (seconds % size === 0) {
+      const value = seconds / size;
+      return `${value} ${unit}${value === 1 ? "" : "s"}`;
+    }
+  }
+  return `${seconds} second${seconds === 1 ? "" : "s"}`;
+}
+
+function scheduleCadence(input: Record<string, unknown>): string {
+  const trigger = (input.trigger ?? {}) as Record<string, unknown>;
+  let cadence = "";
+  if (trigger.kind === "once-in") cadence = `In ${scheduleDuration(trigger.seconds)}`;
+  else if (trigger.kind === "once-at" && typeof trigger.at === "string") {
+    cadence = `Once at ${trigger.at}`;
+  } else if (trigger.kind === "interval") {
+    cadence = `Every ${scheduleDuration(trigger.seconds)}`;
+  } else if (trigger.kind === "cron" && typeof trigger.cron === "string") {
+    cadence = `Cron ${trigger.cron}`;
+  }
+  if (!cadence) cadence = String(input.cadence ?? input.schedule ?? "Scheduled");
+  const timezone =
+    typeof input.timezone === "string"
+      ? input.timezone
+      : typeof input.tz === "string"
+        ? input.tz
+        : "";
+  return timezone ? `${cadence} · ${timezone}` : cadence;
+}
+
+/** `schedule` 工具的 details 是 `{ scheduled: true, id }`,id 即任务在 SchedulerAgent 里的主键。 */
+function scheduleIdOf(output: unknown): string {
+  if (typeof output !== "object" || output === null) return "";
+  const id = (output as Record<string, unknown>).id;
+  return typeof id === "string" ? id : "";
+}
+
+export function ScheduleBlock({
+  call,
+  onOpen,
+}: {
+  call: CloudOsToolCall;
+  /** 有 id 且宿主给了回调时,整张卡变成跳到「已安排」详情的按钮。 */
+  onOpen?: (scheduleId: string) => void;
+}) {
+  const state = call.failed ? "failed" : call.running ? "running" : "scheduled";
+  const scheduleId = state === "scheduled" ? scheduleIdOf(call.output) : "";
+  const clickable = Boolean(scheduleId && onOpen);
+  const Card = clickable ? "button" : "div";
+  return (
+    <div className="max-w-[860px]">
+      <Card
+        {...(clickable
+          ? {
+              type: "button" as const,
+              onClick: () => onOpen?.(scheduleId),
+              "aria-label": `Open scheduled task: ${String(call.input.label ?? call.input.title ?? "Scheduled task")}`,
+            }
+          : {})}
+        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"
+            : ""
+        }`}
+      >
+        <div className="flex flex-wrap items-start gap-3">
+          <span
+            className="flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-lg bg-kumo-tint text-kumo-subtle"
+            aria-hidden="true"
+          >
+            <Bell size={18} />
+          </span>
+          <div className="min-w-[10rem] flex-1">
+            <span className="block truncate text-[14px] leading-5 font-medium tracking-[-0.25px] text-kumo-default">
+              {String(call.input.label ?? call.input.title ?? "Scheduled task")}
+            </span>
+            <p className="mt-1 mb-0 text-[12px] leading-4 text-kumo-inactive">
+              {scheduleCadence(call.input)}
+            </p>
+          </div>
+          <span
+            className={`ml-auto flex flex-shrink-0 items-center gap-1 self-center text-[12px] leading-4 font-medium ${
+              state === "failed"
+                ? "text-kumo-danger"
+                : state === "running"
+                  ? "text-kumo-brand"
+                  : "text-kumo-success"
+            }`}
+          >
+            {state === "failed" ? (
+              <WarningCircle size={13} weight="fill" />
+            ) : state === "running" ? (
+              <CircleNotch
+                size={13}
+                weight="bold"
+                className="animate-spin motion-reduce:animate-none"
+              />
+            ) : (
+              <Check size={13} weight="bold" />
+            )}
+            {state === "failed"
+              ? "Failed"
+              : state === "running"
+                ? "Scheduling…"
+                : "Scheduled"}
+          </span>
+        </div>
+      </Card>
+    </div>
+  );
+}
+
+// ── 原位授权(照搬 renderActionCard 的 blocking callout)────────────────────
+
+export type ApprovalDecision = "deny" | "allow_once" | "allow_level";
+
+export function ApprovalBlock({
+  call,
+  approvalId,
+  disabled = false,
+  onApprove,
+}: {
+  call: CloudOsToolCall;
+  approvalId: string;
+  disabled?: boolean;
+  onApprove: (approvalId: string, decision: ApprovalDecision) => void;
+}) {
+  const title = `${call.toolName} needs approval`;
+  const description =
+    Object.keys(call.input).length > 0
+      ? "```json\n" + JSON.stringify(call.input, null, 2) + "\n```"
+      : "This action pauses the turn until you decide.";
+
+  return (
+    <div className="group/work max-w-[860px] text-[14px] leading-5 tracking-[-0.25px] text-kumo-subtle">
+      {/* 原文件的 blocking callout 是「图标 + 正文 + 右侧动作」一行到底。聊天栏默认
+          只有 420px 宽,一行放不下三段,正文会被挤成 0 宽 —— 所以外层允许换行,
+          动作组在挤不下时整体落到下一行右对齐。 */}
+      <div className="rounded-2xl border border-kumo-brand/40 bg-kumo-brand/10 px-4 py-3">
+        <div className="flex flex-wrap items-start gap-3">
+          <span
+            className="flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-lg bg-kumo-tint text-kumo-brand"
+            aria-hidden="true"
+          >
+            <ShieldCheck size={20} weight="fill" />
+          </span>
+          <div className="min-w-[12rem] flex-1">
+            <div className="flex flex-wrap items-center gap-x-2 gap-y-0.5">
+              <span className="min-w-0 truncate font-medium text-kumo-default">
+                {title}
+              </span>
+            </div>
+            <div className="cos-chat-panel cos-markdown mt-1 max-h-[200px] overflow-y-auto pr-1 text-[13px] leading-[18px] text-kumo-subtle">
+              <MarkdownMessage message={description} />
+            </div>
+          </div>
+          <div className="ml-auto flex flex-wrap items-center justify-end gap-1 self-center">
+            <Tooltip content="Reject this action and let the agent continue without it." asChild>
+              <WorkshopButton
+                tone="secondary"
+                disabled={disabled}
+                onClick={() => onApprove(approvalId, "deny")}
+                className="!h-8 !rounded-lg text-[12px]"
+              >
+                Deny
+              </WorkshopButton>
+            </Tooltip>
+            <Tooltip content="Allow just this call." asChild>
+              <WorkshopButton
+                tone="secondary"
+                disabled={disabled}
+                onClick={() => onApprove(approvalId, "allow_once")}
+                className="!h-8 !rounded-lg text-[12px]"
+              >
+                Allow once
+              </WorkshopButton>
+            </Tooltip>
+            <Tooltip content="Allow every action at this execution level, without future prompts." asChild>
+              <WorkshopButton
+                tone="primary"
+                disabled={disabled}
+                onClick={() => onApprove(approvalId, "allow_level")}
+                className="!h-8 gap-1 !rounded-lg text-[12px]"
+              >
+                <Check size={11} weight="bold" />
+                Allow level
+              </WorkshopButton>
+            </Tooltip>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ── 并行 / 子 Agent ─────────────────────────────────────────────────────────
+
+function StatusDot({ status }: { status: ParallelTool["status"] }) {
+  return (
+    <span
+      className={`h-1.5 w-1.5 flex-shrink-0 rounded-full ${
+        status === "failed"
+          ? "bg-kumo-danger"
+          : status === "running"
+            ? "animate-pulse bg-kumo-brand motion-reduce:animate-none"
+            : status === "done"
+              ? "bg-kumo-success"
+              : "bg-kumo-fill"
+      }`}
+      aria-hidden="true"
+    />
+  );
+}
+
+export function ParallelBlock({
+  label,
+  tools,
+}: {
+  label: string;
+  tools: ParallelTool[];
+}) {
+  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">
+          <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">
+        {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 }: { 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">
+          <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">
+        {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>
+              )}
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+// ── 错误行(照搬 msg.type === "error" 分支)─────────────────────────────────
+
+export function ErrorBlock({
+  title,
+  body,
+  onRetry,
+}: {
+  title: string;
+  body?: string;
+  onRetry?: () => void;
+}) {
+  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">
+        <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]"
+          aria-expanded={expanded}
+        >
+          <span
+            className="flex h-5 w-5 flex-shrink-0 items-center justify-center text-kumo-danger"
+            aria-hidden="true"
+          >
+            <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 className="font-medium text-kumo-danger">{title}: </span>
+              <span className="text-kumo-subtle">{body}</span>
+            </span>
+            {body && (
+              <CaretRight
+                size={13}
+                weight="bold"
+                className={`flex-shrink-0 text-kumo-inactive transition-transform duration-150 ease-out ${expanded ? "rotate-90" : ""}`}
+              />
+            )}
+          </span>
+        </button>
+        {onRetry && (
+          <Tooltip content="Retry the last action." asChild>
+            <button
+              type="button"
+              onClick={onRetry}
+              className="flex flex-shrink-0 cursor-pointer items-center gap-1 rounded-md px-1 py-0.5 text-[13px] leading-4 font-medium text-kumo-default transition-[color,opacity,transform] duration-150 ease-out hover:text-kumo-default-hover focus-visible:text-kumo-default-hover focus-visible:outline-none active:scale-[0.98]"
+            >
+              Retry
+            </button>
+          </Tooltip>
+        )}
+      </div>
+      {expanded && body && (
+        <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>
+        </div>
+      )}
+    </div>
+  );
+}