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

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

@@ -0,0 +1,944 @@
+import {
+  ArrowLeft,
+  ArrowRight,
+  Bell,
+  CaretRight,
+  Check,
+  CircleNotch,
+  Clock,
+  Key,
+  ListChecks,
+  UsersThree,
+  WarningCircle,
+} from "@phosphor-icons/react";
+import { useRef, 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,
+  humanizeToolName,
+  safeStringify,
+  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;
+  allowCustom: boolean;
+}
+
+function questionsOf(input: Record<string, unknown>): AskQuestion[] {
+  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({
+  call,
+  onRespond,
+}: {
+  call: CloudOsToolCall;
+  /** 缺省（宿主没接）时选项不可点 —— 形状对齐 ScheduleBlock 的 onOpen。 */
+  onRespond?: (toolCallId: string, response: unknown) => Promise<boolean>;
+}) {
+  const questions = questionsOf(call.input);
+  // 不能用 `useState(() => questions.map(...))` 初始化:工具入参是**流式**到达的,
+  // 首帧 questions 往往还是空数组,那之后每次 setAnswers 都在空数组上 map,
+  // 选择永远存不进去 → Submit 永久禁用。改成稀疏存 + 按当前 questions 补齐。
+  const [answers, setAnswers] = useState<DraftAnswer[]>([]);
+  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) =>
+    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 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 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."
+      : "";
+
+  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));
+  };
+
+  const settledButton = (
+    <WorkshopButton
+      tone="primary"
+      disabled
+      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]"
+      data-part-type="ask_user"
+      data-state={outcome.kind === "answered" ? "submitted" : outcome.kind}
+    >
+      <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}
+                                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>
+            )}
+            <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]"
+                >
+                  <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>
+              )}
+              {settledButton}
+            </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 ScheduleConfirmation({
+  input,
+  disabled = false,
+  onCancel,
+  onConfirm,
+}: {
+  input: Record<string, unknown>;
+  disabled?: boolean;
+  onCancel: () => void;
+  onConfirm: () => void;
+}) {
+  const name = String(input.label ?? input.title ?? "Scheduled task");
+  const prompt = typeof input.prompt === "string" && input.prompt.trim()
+    ? input.prompt.trim()
+    : "Run the scheduled task";
+
+  return (
+    <section
+      data-slot="schedule-card"
+      aria-label={`确认定时任务：${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">
+        <span
+          className="flex size-7 shrink-0 items-center justify-center rounded-lg bg-kumo-fill/70 text-kumo-subtle"
+          aria-hidden="true"
+        >
+          <Clock size={14} />
+        </span>
+        <div className="flex min-w-0 flex-1 flex-col">
+          <span className="truncate text-[13.5px] leading-[18px] font-medium">
+            {name}
+          </span>
+          <span className="truncate font-mono text-[11px] leading-4 tracking-tight text-kumo-inactive">
+            {scheduleCadence(input)}
+          </span>
+        </div>
+      </div>
+
+      <div className="flex items-start gap-2 rounded-xl bg-kumo-fill/50 px-3 py-2">
+        <span className="shrink-0 font-mono text-[11px] leading-[18px] tracking-tight text-kumo-inactive">
+          task
+        </span>
+        <span className="min-w-0 flex-1 text-[13px] leading-[18px] text-kumo-subtle">
+          {prompt}
+        </span>
+      </div>
+
+      <div className="flex items-center justify-end gap-2">
+        <WorkshopButton disabled={disabled} onClick={onCancel}>
+          取消
+        </WorkshopButton>
+        <WorkshopButton tone="primary" disabled={disabled} onClick={onConfirm}>
+          {disabled ? "正在确认…" : "确认安排"}
+        </WorkshopButton>
+      </div>
+    </section>
+  );
+}
+
+export function ScheduleBlock({
+  call,
+  onOpen,
+}: {
+  call: CloudOsToolCall;
+  /** 有 id 且宿主给了回调时,整张卡变成跳到「已安排」详情的按钮。 */
+  onOpen?: (scheduleId: string) => void;
+}) {
+  // 待确认时由宿主把持久化审批渲染在输入框上方；这里不重复画第二张卡。
+  if (call.awaitingApproval) return null;
+  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>
+  );
+}
+
+// ── 原位授权 ──────────────────────────────────────────────
+
+export type ApprovalDecision = "deny" | "allow_once" | "allow_level";
+
+export function PermissionGrant({
+  capability,
+  requester,
+  reach,
+  disabled = false,
+  onGrant,
+  "aria-label": ariaLabel = `${capability} permission request`,
+}: {
+  capability: string;
+  requester: string;
+  reach: readonly string[];
+  disabled?: boolean;
+  onGrant: (decision: ApprovalDecision) => void;
+  "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";
+
+  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"
+    >
+      <div className="flex items-center gap-2.5">
+        <span
+          className="flex size-7 shrink-0 items-center justify-center rounded-lg bg-kumo-fill/70 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">
+            {capability}
+          </span>
+          <span className="truncate text-[12px] leading-4 text-kumo-inactive">
+            requested by {requester}
+          </span>
+        </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">
+          this grants
+        </span>
+        {reach.map((item, index) => (
+          <span
+            key={`${index}:${item}`}
+            className="flex items-baseline gap-2 text-[12px] leading-[17px] text-kumo-subtle"
+          >
+            <span
+              className="size-1 shrink-0 rounded-full bg-kumo-interact"
+              aria-hidden="true"
+            />
+            <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>
+        <Tooltip
+          content="Allow every action at this execution level, without future prompts."
+          asChild
+        >
+          <button
+            type="button"
+            disabled={disabled}
+            onClick={() => onGrant("allow_level")}
+            className={`${actionClassName} bg-kumo-contrast text-kumo-inverse enabled:hover:bg-kumo-strong`}
+          >
+            Allow level
+          </button>
+        </Tooltip>
+      </div>
+    </section>
+  );
+}
+
+function approvalReach(call: CloudOsToolCall): string[] {
+  const entries = Object.entries(call.input);
+  return entries.length > 0
+    ? entries.map(
+        ([name, value]) => `${humanizeToolName(name)}: ${safeStringify(value)}`,
+      )
+    : ["Run this tool without arguments"];
+}
+
+export function ApprovalBlock({
+  call,
+  approvalId,
+  disabled = false,
+  onApprove,
+}: {
+  call: CloudOsToolCall;
+  approvalId: string;
+  disabled?: boolean;
+  onApprove: (approvalId: string, decision: ApprovalDecision) => void;
+}) {
+  return (
+    <div className="group/work max-w-[860px] text-[14px] leading-5 tracking-[-0.25px] text-kumo-subtle">
+      <PermissionGrant
+        capability={humanizeToolName(call.toolName)}
+        requester="the agent"
+        reach={approvalReach(call)}
+        disabled={disabled}
+        onGrant={(decision) => onApprove(approvalId, decision)}
+      />
+    </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>
+  );
+}