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

package/cloud-os/chat/cloud-os-chat-messages.tsx

@@ -57,6 +57,9 @@ import {
   type CloudOsEntry,
   type CloudOsActionPresentation,
 } from "./transcript-model";
+import { useDisclosureExpandedKeys } from "./use-lifecycle-disclosure";
+
+const NO_RUNNING_DISCLOSURES: ReadonlySet<string> = new Set();
 
 export type CloudOsChatStatus = "ready" | "submitted" | "streaming" | "error";
 
@@ -113,18 +116,6 @@ export interface CloudOsChatMessagesProps {
   onCopy?: (text: string) => void;
 }
 
-export function collapseEntriesWithNewNarrative(
-  expanded: ReadonlySet<string>,
-  previousNarrativeKeys: ReadonlySet<string>,
-  narrativeKeys: ReadonlySet<string>,
-): ReadonlySet<string> {
-  const next = new Set(expanded);
-  for (const key of narrativeKeys) {
-    if (!previousNarrativeKeys.has(key)) next.delete(key);
-  }
-  return next.size === expanded.size ? expanded : next;
-}
-
 function useCopyAction(): {
   copied: string | null;
   copy: (text: string) => void;
@@ -362,15 +353,6 @@ export function CloudOsChatMessages({
   const scrollRef = useRef<HTMLDivElement>(null);
   const endRef = useRef<HTMLDivElement>(null);
   const [showScrollButton, setShowScrollButton] = useState(false);
-  const [expandedToolCalls, setExpandedToolCalls] = useState<ReadonlySet<string>>(
-    () => new Set(),
-  );
-  const [expandedWorkEntries, setExpandedWorkEntries] = useState<
-    ReadonlySet<string>
-  >(() => new Set());
-  const [expandedCompactions, setExpandedCompactions] = useState<
-    ReadonlySet<string>
-  >(() => new Set());
   const { copied, copy } = useCopyAction();
   const isActive =
     turnActive ?? (status === "submitted" || status === "streaming");
@@ -385,31 +367,74 @@ export function CloudOsChatMessages({
       }),
     [approvalIdOf, isActive, messages, showThinkingTraces],
   );
-  const narrativeEntryKeys = useMemo(
+  const workEntryKeys = useMemo(
     () =>
       new Set(
         entries.flatMap((entry) =>
           entry.type === "assistant" &&
-            partitionAssistantBlocks(entry.blocks).content.some(
-              (block) => block.kind === "text",
-            )
+            partitionAssistantBlocks(entry.blocks).work.length > 0
             ? [entry.key]
             : [],
         ),
       ),
     [entries],
   );
-  const previousNarrativeEntryKeys = useRef<ReadonlySet<string>>(
-    narrativeEntryKeys,
-  );
-
-  useEffect(() => {
-    const previous = previousNarrativeEntryKeys.current;
-    previousNarrativeEntryKeys.current = narrativeEntryKeys;
-    setExpandedWorkEntries((expanded) =>
-      collapseEntriesWithNewNarrative(expanded, previous, narrativeEntryKeys),
+  const runningWorkEntryKeys = useMemo(() => {
+    const keys = new Set<string>();
+    if (!isActive) return keys;
+    const entry = entries.findLast(
+      (candidate) => candidate.type === "assistant",
     );
-  }, [narrativeEntryKeys]);
+    if (entry?.type !== "assistant") return keys;
+    const { work, content } = partitionAssistantBlocks(entry.blocks);
+    if (work.length > 0 && !content.some((block) => block.kind === "text")) {
+      keys.add(entry.key);
+    }
+    return keys;
+  }, [entries, isActive]);
+  const toolCallKeys = useMemo(
+    () =>
+      new Set(
+        entries.flatMap((entry) =>
+          entry.type === "assistant"
+            ? entry.blocks.flatMap((block) =>
+                block.kind === "toolGroup" ? [block.group.key] : [],
+              )
+            : [],
+        ),
+      ),
+    [entries],
+  );
+  const runningToolCallKeys = useMemo(
+    () =>
+      new Set(
+        entries.flatMap((entry) =>
+          entry.type === "assistant" && runningWorkEntryKeys.has(entry.key)
+            ? entry.blocks.flatMap((block) =>
+                block.kind === "toolGroup" && block.group.hasRunning
+                  ? [block.group.key]
+                  : [],
+              )
+            : [],
+        ),
+    ),
+    [entries, runningWorkEntryKeys],
+  );
+  const compactionKeys = useMemo(
+    () =>
+      new Set(
+        entries.flatMap((entry) =>
+          entry.type === "compactionBoundary" ? [entry.key] : [],
+        ),
+      ),
+    [entries],
+  );
+  const [expandedToolCalls, toggleToolCall] =
+    useDisclosureExpandedKeys(toolCallKeys, runningToolCallKeys);
+  const [expandedWorkEntries, toggleWorkEntry] =
+    useDisclosureExpandedKeys(workEntryKeys, runningWorkEntryKeys);
+  const [expandedCompactions, toggleCompaction] =
+    useDisclosureExpandedKeys(compactionKeys, NO_RUNNING_DISCLOSURES);
 
   const entryTopClasses = useMemo(
     () =>
@@ -419,33 +444,6 @@ export function CloudOsChatMessages({
     [entries],
   );
 
-  const toggleToolCall = useCallback((key: string) => {
-    setExpandedToolCalls((current) => {
-      const next = new Set(current);
-      if (next.has(key)) next.delete(key);
-      else next.add(key);
-      return next;
-    });
-  }, []);
-
-  const toggleWorkEntry = useCallback((key: string) => {
-    setExpandedWorkEntries((current) => {
-      const next = new Set(current);
-      if (next.has(key)) next.delete(key);
-      else next.add(key);
-      return next;
-    });
-  }, []);
-
-  const toggleCompaction = useCallback((key: string) => {
-    setExpandedCompactions((current) => {
-      const next = new Set(current);
-      if (next.has(key)) next.delete(key);
-      else next.add(key);
-      return next;
-    });
-  }, []);
-
   const syncScrollButton = useCallback(() => {
     const element = scrollRef.current;
     if (!element) return;
@@ -628,7 +626,7 @@ export function CloudOsChatMessages({
                     <WorkTraceDisclosure
                       durationMs={entry.durationMs}
                       groups={workGroups}
-                      completed={!isActive}
+                      completed={!runningWorkEntryKeys.has(entry.key)}
                       open={expandedWorkEntries.has(entry.key)}
                       onToggle={() => toggleWorkEntry(entry.key)}
                     >
@@ -640,6 +638,7 @@ export function CloudOsChatMessages({
                               <WorkDescriptionRow
                                 key={block.key}
                                 text={block.text}
+                                running={runningWorkEntryKeys.has(entry.key)}
                                 resolveUrl={resolveUrl}
                               />
                             );
@@ -658,8 +657,9 @@ export function CloudOsChatMessages({
                               <PlanBlock
                                 key={block.key}
                                 steps={block.steps}
-                                running={block.running}
-                                defaultOpen={false}
+                                running={
+                                  runningWorkEntryKeys.has(entry.key) && block.running
+                                }
                                 showCollapsedSummary={false}
                               />
                             );
@@ -669,6 +669,7 @@ export function CloudOsChatMessages({
                                 key={block.key}
                                 label={block.label}
                                 tools={block.tools}
+                                running={runningWorkEntryKeys.has(entry.key)}
                               />
                             );
                           case "subagents":
@@ -676,6 +677,7 @@ export function CloudOsChatMessages({
                               <SubAgentsBlock
                                 key={block.key}
                                 agents={block.agents}
+                                running={runningWorkEntryKeys.has(entry.key)}
                               />
                             );
                           default:
@@ -692,6 +694,7 @@ export function CloudOsChatMessages({
                           <WorkDescriptionRow
                             key={block.key}
                             text={block.text}
+                            running={block.running}
                             resolveUrl={resolveUrl}
                           />
                         );
@@ -730,7 +733,9 @@ export function CloudOsChatMessages({
                           <PlanBlock
                             key={block.key}
                             steps={block.steps}
-                            running={block.running}
+                            running={
+                              runningWorkEntryKeys.has(entry.key) && block.running
+                            }
                           />
                         );
                       case "askUser":
@@ -742,13 +747,7 @@ export function CloudOsChatMessages({
                           />
                         );
                       case "suggestions":
-                        return (
-                          <SuggestionsBlock
-                            key={block.key}
-                            items={block.items}
-                            onSuggestion={(text) => onSuggestion?.(text)}
-                          />
-                        );
+                        return null;
                       case "schedule":
                         return (
                           <ScheduleBlock
@@ -785,11 +784,16 @@ export function CloudOsChatMessages({
                             key={block.key}
                             label={block.label}
                             tools={block.tools}
+                            running={runningWorkEntryKeys.has(entry.key)}
                           />
                         );
                       case "subagents":
                         return (
-                          <SubAgentsBlock key={block.key} agents={block.agents} />
+                          <SubAgentsBlock
+                            key={block.key}
+                            agents={block.agents}
+                            running={runningWorkEntryKeys.has(entry.key)}
+                          />
                         );
                       case "image":
                         {
@@ -870,7 +874,7 @@ export function CloudOsChatMessages({
                   )}
 
                   {hasNarrative && entry.timestamp !== undefined && (
-                    <div className="mt-0.5 -ml-1 flex items-center gap-1 opacity-0 transition-opacity duration-150 ease-out group-hover/agentMessage:opacity-100 group-focus-within/agentMessage:opacity-100">
+                    <div className="mt-0.5 -ml-1 flex items-center gap-1">
                       <Tooltip
                         content={copied === entry.copyText ? "Copied!" : "Copy message"}
                         asChild
@@ -895,6 +899,16 @@ export function CloudOsChatMessages({
                       </Tooltip>
                     </div>
                   )}
+
+                  {contentBlocks.map((block) =>
+                    block.kind === "suggestions" ? (
+                      <SuggestionsBlock
+                        key={block.key}
+                        items={block.items}
+                        onSuggestion={(text) => onSuggestion?.(text)}
+                      />
+                    ) : null
+                  )}
                 </div>
               </div>
             );

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

@@ -1,6 +1,4 @@
 import {
-  ArrowLeft,
-  ArrowRight,
   Bell,
   CaretRight,
   Check,
@@ -12,11 +10,16 @@ import {
   UsersThree,
   WarningCircle,
 } from "@phosphor-icons/react";
-import { useRef, useState } from "react";
+import { useId, 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 {
+  SECONDARY_DISCLOSURE_ICON,
+  SECONDARY_DISCLOSURE_TITLE_WITH_ICON,
+  SECONDARY_DISCLOSURE_TITLE_WITHOUT_ICON,
+  WorkIcon,
+} from "./tool-rows";
 import type {
   ParallelTool,
   PlanStep,
@@ -28,6 +31,7 @@ import {
   safeStringify,
   type CloudOsToolCall,
 } from "./tool-presentation";
+import { useLifecycleDisclosure } from "./use-lifecycle-disclosure";
 
 /**
  * UIMessage 协议里存在、gadgets 那套没有的几类 part —— 计划快照、原位提问、
@@ -42,37 +46,34 @@ import {
 export function PlanBlock({
   steps,
   running,
-  defaultOpen = true,
   showCollapsedSummary = true,
 }: {
   steps: PlanStep[];
   running: boolean;
-  defaultOpen?: boolean;
   showCollapsedSummary?: boolean;
 }) {
   const done = steps.filter((step) => step.status === "done").length;
   const current = steps.find((step) => step.status === "in_progress");
-  const [open, setOpen] = useState(defaultOpen);
+  const [open, toggle] = useLifecycleDisclosure(running);
 
   return (
-    <div className="group -ml-0.5">
+    <div className="group">
       <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]"
+        onClick={toggle}
+        className={`${SECONDARY_DISCLOSURE_TITLE_WITH_ICON} w-full`}
         aria-expanded={open}
       >
-        <span className="flex h-5 w-5 flex-shrink-0 items-center justify-center">
+        <span className={SECONDARY_DISCLOSURE_ICON}>
           <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="flex min-w-0 items-center gap-2">
             <span className={`min-w-0 truncate ${running ? "cos-thinking-shimmer" : ""}`}>
               Plan · {done}/{steps.length}
             </span>
             <CaretRight
-              size={13}
-              weight="bold"
+              size={16}
               className={`flex-shrink-0 text-kumo-inactive transition-transform duration-150 ease-out ${open ? "rotate-90" : ""}`}
             />
           </span>
@@ -84,7 +85,7 @@ export function PlanBlock({
         </span>
       </button>
       {open && (
-        <div className="ml-8 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="mt-1 flex flex-col gap-2 rounded-xl border border-kumo-line bg-[rgba(0,0,0,0.03)] px-4 py-3">
           {steps.map((step, index) => (
             <div
               key={`${step.text}-${index}`}
@@ -171,8 +172,7 @@ export function AskUserBlock({
   // 首帧 questions 往往还是空数组,那之后每次 setAnswers 都在空数组上 map,
   // 选择永远存不进去 → Submit 永久禁用。改成稀疏存 + 按当前 questions 补齐。
   const [answers, setAnswers] = useState<DraftAnswer[]>([]);
-  const [current, setCurrent] = useState(0);
-  const direction = useRef<"back" | "forward">("forward");
+  const contentId = useId();
   const answerAt = (index: number): DraftAnswer =>
     answers[index] ?? { selections: [], text: "" };
   const toggle = (questionIndex: number, option: string, multi: boolean) =>
@@ -202,31 +202,43 @@ export function AskUserBlock({
   // 在途只用于按钮转圈；权威状态永远是 part 的 state。
   const [inFlight, setInFlight] = useState(false);
   const outcome = askUserOutcome(call);
-  const settledAnswers = outcome.kind === "answered" ? outcome.answers : [];
+  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 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 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 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;
@@ -242,205 +254,129 @@ export function AskUserBlock({
     }, () => setInFlight(false));
   };
 
-  const settledButton = (
+  const closedButton = (
     <WorkshopButton
       tone="primary"
       disabled
       className="ml-auto !h-7 flex-shrink-0 gap-1 !rounded-lg px-2.5 text-[12px]"
     >
-      {buttonLabel}
+      Closed
     </WorkshopButton>
   );
 
   return (
-    // 收成 w-fit：短问题不该撑成一条横贯全栏的长条,长问题到 560px 再换行。
     <div
-      className="w-fit min-w-[15rem] max-w-[560px]"
+      className="w-full"
       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-operation-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-operation-base"
-                              }`}
-                            >
-                              <input
-                                type={currentQuestion.multi
-                                  ? "checkbox"
-                                  : "radio"}
-                                name={`${call.toolCallId}-${currentIndex}`}
-                                checked={selected}
+      <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}
                                 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>
+                                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>
                       )}
-                      {settledAnswers[questionIndex]!.text.trim() && (
-                        <p className="m-0">
-                          {settledAnswers[questionIndex]!.selections.length > 0
-                            ? `补充：${settledAnswers[questionIndex]!.text.trim()}`
-                            : `Answered: ${settledAnswers[questionIndex]!.text.trim()}`}
-                        </p>
+                      {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>
-                  )}
-                </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"
+                >
+                  {buttonLabel}
+                </button>
+              )}
+            </>
+          ) : (
             <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}
+              {closedButton}
             </div>
-          </>
-        )}
+          )}
+        </div>
       </div>
     </div>
   );
@@ -813,34 +749,35 @@ 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, setOpen] = useState(false);
+  const [open, toggle] = useLifecycleDisclosure(running);
   return (
     <div className="max-w-[860px]">
       <button
         type="button"
-        onClick={() => setOpen((value) => !value)}
-        className="flex cursor-pointer items-center gap-3 px-1.5 py-1 text-[14px] leading-5 tracking-[-0.25px] text-kumo-subtle transition-colors duration-150 ease-out hover:text-kumo-default focus-visible:text-kumo-default focus-visible:outline-none"
+        onClick={toggle}
+        className={SECONDARY_DISCLOSURE_TITLE_WITH_ICON}
         aria-expanded={open}
       >
-        <span className="flex h-5 w-5 flex-shrink-0 items-center justify-center">
+        <span className={SECONDARY_DISCLOSURE_ICON}>
           <WorkIcon Icon={ListChecks} />
         </span>
         <span className="min-w-0 truncate">
           {label} · {done}/{tools.length}
         </span>
         <CaretRight
-          size={13}
-          weight="bold"
+          size={16}
           className={`flex-shrink-0 text-kumo-inactive transition-transform duration-150 ease-out ${open ? "rotate-90" : ""}`}
         />
       </button>
       {open && (
-        <div className="ml-8 mt-1 space-y-1">
+        <div className="mt-1 space-y-1">
           {tools.map((tool, index) => (
             <div
               key={`${tool.label}-${index}`}
@@ -861,30 +798,35 @@ export function ParallelBlock({
   );
 }
 
-export function SubAgentsBlock({ agents }: { agents: SubAgentView[] }) {
-  const [open, setOpen] = useState(false);
+export function SubAgentsBlock({
+  agents,
+  running = agents.some((agent) => agent.status === "running"),
+}: {
+  agents: SubAgentView[];
+  running?: boolean;
+}) {
+  const [open, toggle] = useLifecycleDisclosure(running);
   return (
     <div className="max-w-[860px]">
       <button
         type="button"
-        onClick={() => setOpen((value) => !value)}
-        className="flex cursor-pointer items-center gap-3 px-1.5 py-1 text-[14px] leading-5 tracking-[-0.25px] text-kumo-subtle transition-colors duration-150 ease-out hover:text-kumo-default focus-visible:text-kumo-default focus-visible:outline-none"
+        onClick={toggle}
+        className={SECONDARY_DISCLOSURE_TITLE_WITH_ICON}
         aria-expanded={open}
       >
-        <span className="flex h-5 w-5 flex-shrink-0 items-center justify-center">
+        <span className={SECONDARY_DISCLOSURE_ICON}>
           <WorkIcon Icon={UsersThree} />
         </span>
         <span className="min-w-0 truncate">
           {agents.length === 1 ? "Sub-agent" : `${agents.length} sub-agents`}
         </span>
         <CaretRight
-          size={13}
-          weight="bold"
+          size={16}
           className={`flex-shrink-0 text-kumo-inactive transition-transform duration-150 ease-out ${open ? "rotate-90" : ""}`}
         />
       </button>
       {open && (
-        <div className="ml-8 mt-1 space-y-1">
+        <div className="mt-1 space-y-1">
           {agents.map((agent, index) => (
             <div
               key={`${agent.name}-${index}`}
@@ -920,31 +862,30 @@ export function ErrorBlock({
   body?: string;
   onRetry?: () => void;
 }) {
-  const [expanded, setExpanded] = useState(false);
+  const [expanded, toggle] = useLifecycleDisclosure(false);
   return (
     <div className="group/work max-w-[860px] text-[14px] leading-5 tracking-[-0.25px] text-kumo-subtle">
-      <div className="flex w-full items-center gap-2 px-1.5 py-1">
+      <div className="flex w-full items-center gap-2">
         <button
           type="button"
-          onClick={() => setExpanded((value) => !value)}
-          className="flex min-w-0 flex-1 cursor-pointer items-center gap-3 rounded-md text-left transition-colors duration-150 ease-out hover:text-kumo-default focus-visible:text-kumo-default focus-visible:outline-none active:scale-[0.995]"
+          onClick={toggle}
+          className={`${SECONDARY_DISCLOSURE_TITLE_WITH_ICON} flex-1`}
           aria-expanded={expanded}
         >
           <span
-            className="flex h-5 w-5 flex-shrink-0 items-center justify-center text-kumo-danger"
+            className={`${SECONDARY_DISCLOSURE_ICON} text-kumo-danger`}
             aria-hidden="true"
           >
-            <WarningCircle size={16} weight="fill" />
+            <WarningCircle size={15} weight="fill" />
           </span>
           <span className="flex min-w-0 flex-1 items-center gap-1">
             <span className="min-w-0 truncate">
-              <span className="font-medium text-kumo-danger">{title}: </span>
-              <span className="text-kumo-subtle">{body}</span>
+              <span>{title}: </span>
+              <span>{body}</span>
             </span>
             {body && (
               <CaretRight
-                size={13}
-                weight="bold"
+                size={16}
                 className={`flex-shrink-0 text-kumo-inactive transition-transform duration-150 ease-out ${expanded ? "rotate-90" : ""}`}
               />
             )}
@@ -963,7 +904,7 @@ export function ErrorBlock({
         )}
       </div>
       {expanded && body && (
-        <div className="ml-8 mt-1">
+        <div className="mt-1">
           <pre className="max-h-48 overflow-auto rounded-xl border border-kumo-line/70 bg-kumo-base p-3 font-mono text-[12px] leading-[18px] text-kumo-subtle whitespace-pre-wrap">
             {body}
           </pre>

package/cloud-os/chat/tool-rows.tsx

@@ -1,6 +1,6 @@
 import { Atom, CaretDown, CaretRight, Copy } from "@phosphor-icons/react";
 import { motion, useReducedMotion } from "motion/react";
-import { memo, useId, useState, type ReactNode } from "react";
+import { memo, useId, type ReactNode } from "react";
 import {
   MarkdownMessage,
   type CloudOsUrlResolver,
@@ -13,12 +13,25 @@ import {
   type PhosphorIcon,
   type ToolCallGroup,
 } from "./tool-presentation";
+import { useLifecycleDisclosure } from "./use-lifecycle-disclosure";
 
 const thinkingSpark = new URL(
   "../assets/thinking-spark.svg",
   import.meta.url,
 ).href;
 
+const SECONDARY_DISCLOSURE_TITLE_BASE =
+  "flex min-w-0 cursor-pointer gap-2 rounded-xl text-left text-[14px] leading-[1.4] text-cos-work-description transition-colors duration-150 ease-out hover:text-cos-work-description-subtle focus-visible:text-cos-work-description-subtle focus-visible:outline-none active:scale-[0.995]";
+
+export const SECONDARY_DISCLOSURE_TITLE_WITH_ICON =
+  `${SECONDARY_DISCLOSURE_TITLE_BASE} items-start px-1.5 py-1`;
+
+export const SECONDARY_DISCLOSURE_TITLE_WITHOUT_ICON =
+  `${SECONDARY_DISCLOSURE_TITLE_BASE} items-center py-1 pr-1.5`;
+
+export const SECONDARY_DISCLOSURE_ICON =
+  "mt-0.5 flex size-4 shrink-0 items-center justify-center";
+
 /**
  * 工作行(work rows): WorkIcon / ToolCallDetails / NestedToolCallRow /
  * ToolGroupRow / ThinkingTraceRow。渲染 UIMessage 归一化后的 CloudOsToolCall。
@@ -150,13 +163,13 @@ export const NestedToolCallRow = memo(function NestedToolCallRow({
       <button
         type="button"
         onClick={() => onToggle(key)}
-        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]"
+        className={`${SECONDARY_DISCLOSURE_TITLE_WITH_ICON} w-full`}
         aria-expanded={open}
       >
-        <span className="flex h-5 w-5 flex-shrink-0 items-center justify-center">
+        <span className={SECONDARY_DISCLOSURE_ICON}>
           <WorkIcon Icon={Icon} />
         </span>
-        <span className="flex min-w-0 flex-1 items-center gap-2 text-[14px] leading-5 tracking-[-0.25px]">
+        <span className="flex min-w-0 flex-1 items-center gap-2">
           <span className="min-w-0 truncate">{label}</span>
           {tc.failed && (
             <span className="flex-shrink-0 rounded-full bg-kumo-danger-tint px-2 py-0.5 text-[10px] font-semibold uppercase tracking-[0.04em] text-kumo-danger">
@@ -164,14 +177,13 @@ export const NestedToolCallRow = memo(function NestedToolCallRow({
             </span>
           )}
           <CaretRight
-            size={13}
-            weight="bold"
+            size={16}
             className={`flex-shrink-0 text-kumo-inactive transition-transform duration-150 ease-out ${open ? "rotate-90" : ""}`}
           />
         </span>
       </button>
       {open && (
-        <div className="ml-8 mt-1 space-y-3">
+        <div className="mt-1 space-y-3">
           <ToolCallDetails toolCall={tc} />
         </div>
       )}
@@ -179,6 +191,27 @@ export const NestedToolCallRow = memo(function NestedToolCallRow({
   );
 });
 
+function ThinkingContent({
+  id,
+  text,
+  resolveUrl,
+  className = "",
+}: {
+  id?: string;
+  text: string;
+  resolveUrl?: CloudOsUrlResolver;
+  className?: string;
+}) {
+  return (
+    <div
+      id={id}
+      className={`cos-markdown max-h-[240px] overflow-y-auto rounded-xl border border-[rgba(0,0,0,0.07)] bg-[#F2F2F2] px-4 py-3 text-[14px] leading-[1.4] text-[rgba(0,0,0,0.7)] ${className}`}
+    >
+      <MarkdownMessage message={text} resolveUrl={resolveUrl} />
+    </div>
+  );
+}
+
 export const ThinkingTraceRow = memo(function ThinkingTraceRow({
   reasoning,
   running,
@@ -186,7 +219,7 @@ export const ThinkingTraceRow = memo(function ThinkingTraceRow({
   reasoning: string;
   running: boolean;
 }) {
-  const [open, setOpen] = useState(false);
+  const [open, toggle] = useLifecycleDisclosure(running);
   const contentId = useId();
   const summary = reasoning.replace(/\s+/g, " ").trim();
 
@@ -198,22 +231,22 @@ export const ThinkingTraceRow = memo(function ThinkingTraceRow({
     >
       <button
         type="button"
-        onClick={() => setOpen((current) => !current)}
-        className="group -ml-0.5 flex w-fit max-w-[80%] min-w-0 items-center gap-1.5 rounded-xl px-1.5 py-1 text-left text-[14px] leading-5 text-kumo-inactive transition-colors hover:text-kumo-default focus-visible:text-kumo-default focus-visible:outline-none"
+        onClick={toggle}
+        className={`${SECONDARY_DISCLOSURE_TITLE_WITH_ICON} group w-fit max-w-[80%]`}
         aria-expanded={open}
         aria-controls={contentId}
       >
-        <span className="relative grid size-4 flex-shrink-0 place-items-center" aria-hidden="true">
+        <span className={`${SECONDARY_DISCLOSURE_ICON} relative`} aria-hidden="true">
           <Atom
-            size={14}
+            size={15}
             className="transition-opacity group-hover:opacity-0 group-focus-visible:opacity-0"
           />
           <CaretDown
-            size={14}
+            size={15}
             className={`absolute opacity-0 transition-[opacity,transform] group-hover:opacity-100 group-focus-visible:opacity-100 ${open ? "" : "-rotate-90"}`}
           />
         </span>
-        <span className="flex-shrink-0 text-kumo-subtle">Think</span>
+        <span className="flex-shrink-0">Think</span>
         <span aria-hidden="true">·</span>
         <span
           className="min-w-0 flex-1 truncate"
@@ -223,12 +256,11 @@ export const ThinkingTraceRow = memo(function ThinkingTraceRow({
         </span>
       </button>
       {open && (
-        <div
+        <ThinkingContent
           id={contentId}
-          className="cos-markdown w-full rounded-xl border border-kumo-line bg-kumo-elevated/45 px-4 py-3 text-[14px] leading-[1.4] text-kumo-default/70"
-        >
-          <MarkdownMessage message={reasoning} />
-        </div>
+          text={reasoning}
+          className="w-full"
+        />
       )}
     </div>
   );
@@ -327,7 +359,7 @@ export const WorkTraceDisclosure = memo(function WorkTraceDisclosure({
 
   return (
     <div data-agent-work="" data-state={open ? "open" : "closed"}>
-      <div className="w-full border-b border-kumo-line pb-2">
+      <div className="w-full pb-2">
         <button
           type="button"
           onClick={onToggle}
@@ -336,33 +368,35 @@ export const WorkTraceDisclosure = memo(function WorkTraceDisclosure({
           aria-label={label}
           className="flex min-w-0 items-center gap-2 text-left text-[14px] leading-[1.4] text-cos-work-description transition-colors duration-150 ease-out hover:text-cos-work-description-subtle focus-visible:text-cos-work-description-subtle focus-visible:outline-none"
         >
-          <span className="grid size-4 shrink-0 place-items-center" aria-hidden="true">
-            <motion.img
-              src={thinkingSpark}
-              alt=""
-              className="size-[12.24px]"
-              initial={{ rotate: 0 }}
-              animate={
-                reduceMotion ? { rotate: 0 } : { rotate: [0, 360, -360, -360] }
-              }
-              transition={
-                reduceMotion
-                  ? { duration: 0 }
-                  : {
-                      rotate: {
-                        duration: 1.68,
-                        times: [0, 0.8368, 0.8373, 1],
-                        ease: [
-                          [0.5, 0, 0.5, 1],
-                          [0.5, 0, 0.5, 1],
-                          "linear",
-                        ],
-                        repeat: Infinity,
-                      },
-                    }
-              }
-            />
-          </span>
+          {!completed && (
+            <span className="grid size-4 shrink-0 place-items-center" aria-hidden="true">
+              <motion.img
+                src={thinkingSpark}
+                alt=""
+                className="size-[12.24px]"
+                initial={{ rotate: 0 }}
+                animate={
+                  reduceMotion ? { rotate: 0 } : { rotate: [0, 360, -360, -360] }
+                }
+                transition={
+                  reduceMotion
+                    ? { duration: 0 }
+                    : {
+                        rotate: {
+                          duration: 1.68,
+                          times: [0, 0.8368, 0.8373, 1],
+                          ease: [
+                            [0.5, 0, 0.5, 1],
+                            [0.5, 0, 0.5, 1],
+                            "linear",
+                          ],
+                          repeat: Infinity,
+                        },
+                      }
+                }
+              />
+            </span>
+          )}
           <span className="min-w-0 truncate">
             <span>{`${verb}${duration}${activity ? `, ${activity.leading}` : ""}`}</span>
             {activity?.emphasis && (
@@ -391,12 +425,14 @@ export const WorkDescriptionRow = memo(function WorkDescriptionRow({
   resolveUrl,
 }: {
   text: string;
+  running?: boolean;
   resolveUrl?: CloudOsUrlResolver;
 }) {
   return (
-    <div className="cos-markdown text-[14px] leading-[1.4] text-cos-work-description">
-      <MarkdownMessage message={text} resolveUrl={resolveUrl} />
-    </div>
+    <ThinkingContent
+      text={text}
+      resolveUrl={resolveUrl}
+    />
   );
 });
 
@@ -417,10 +453,10 @@ export const ToolGroupRow = memo(function ToolGroupRow({
       <button
         type="button"
         onClick={() => onToggle(group.key)}
-        className="flex min-w-0 items-start gap-2 text-left text-[14px] leading-[1.4] text-cos-tool-group transition-colors duration-150 ease-out hover:text-kumo-subtle focus-visible:text-kumo-subtle focus-visible:outline-none"
+        className={SECONDARY_DISCLOSURE_TITLE_WITH_ICON}
         aria-expanded={open}
       >
-        <span className="mt-0.5 flex size-4 shrink-0 items-center justify-center">
+        <span className={SECONDARY_DISCLOSURE_ICON}>
           <WorkIcon Icon={group.Icon} />
         </span>
         <span className="min-w-0 flex-1">
@@ -448,7 +484,7 @@ export const ToolGroupRow = memo(function ToolGroupRow({
         </span>
       </button>
       {open && (
-        <div className="mt-3 pl-6">
+        <div className="mt-3">
           <ToolGroupDetails calls={group.calls} />
         </div>
       )}

package/cloud-os/chat/transcript-model.ts

@@ -636,6 +636,8 @@ function assistantBlocks(
 }
 
 const USER_STOP_REASON = "Stopped by user";
+const REQUEST_UNAVAILABLE_ERROR =
+  "We’re unable to complete your request right now. Please try again in a few moments.";
 
 function terminalOf(
   message: UIMessage,
@@ -650,7 +652,9 @@ function terminalOf(
   if (metadata.turnStatus === "error" || metadata.error) {
     return {
       kind: "error",
-      title: "Error",
+      title: metadata.error === REQUEST_UNAVAILABLE_ERROR
+        ? "Unable to complete your request"
+        : "Error",
       body: metadata.error ?? "The response failed.",
     };
   }

package/cloud-os/chat/use-lifecycle-disclosure.ts

@@ -0,0 +1,65 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+
+export type DisclosurePolicy = "always-open" | "lifecycle";
+
+export const DISCLOSURE_POLICY: DisclosurePolicy = "lifecycle";
+
+export function reconcileExpandedWithAutoOpen(
+  expanded: ReadonlySet<string>,
+  previousAutoOpenKeys: ReadonlySet<string>,
+  autoOpenKeys: ReadonlySet<string>,
+): ReadonlySet<string> {
+  const next = new Set(expanded);
+  for (const key of previousAutoOpenKeys) {
+    if (!autoOpenKeys.has(key)) next.delete(key);
+  }
+  for (const key of autoOpenKeys) {
+    if (!previousAutoOpenKeys.has(key)) next.add(key);
+  }
+  if (next.size !== expanded.size) return next;
+  return [...next].every((key) => expanded.has(key)) ? expanded : next;
+}
+
+export function useDisclosureExpandedKeys(
+  disclosureKeys: ReadonlySet<string>,
+  runningKeys: ReadonlySet<string>,
+) {
+  const autoOpenKeys =
+    DISCLOSURE_POLICY === "always-open" ? disclosureKeys : runningKeys;
+  const [expanded, setExpanded] = useState<ReadonlySet<string>>(autoOpenKeys);
+  const previousAutoOpenKeys = useRef(autoOpenKeys);
+
+  useEffect(() => {
+    const previous = previousAutoOpenKeys.current;
+    previousAutoOpenKeys.current = autoOpenKeys;
+    setExpanded((current) =>
+      reconcileExpandedWithAutoOpen(current, previous, autoOpenKeys),
+    );
+  }, [autoOpenKeys]);
+
+  const toggle = useCallback((key: string) => {
+    setExpanded((current) => {
+      const next = new Set(current);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      return next;
+    });
+  }, []);
+
+  return [expanded, toggle] as const;
+}
+
+/** User choice persists while the policy-derived automatic state is unchanged. */
+export function useLifecycleDisclosure(running: boolean) {
+  const autoOpen = DISCLOSURE_POLICY === "always-open" || running;
+  const [state, setState] = useState(() => ({ autoOpen, open: autoOpen }));
+  const open = state.autoOpen === autoOpen ? state.open : autoOpen;
+
+  useEffect(() => {
+    setState((current) =>
+      current.autoOpen === autoOpen ? current : { autoOpen, open: autoOpen }
+    );
+  }, [autoOpen]);
+
+  return [open, () => setState({ autoOpen, open: !open })] as const;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@springbrand/message-panel",
-  "version": "0.1.3-alpha.31",
+  "version": "0.1.3-alpha.32",
   "type": "module",
   "files": [
     "src",