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

package/cloud-os/chat/activity-indicator.tsx

@@ -0,0 +1,29 @@
+import { ThinkingOrb } from "thinking-orbs";
+import { useCloudOsMode } from "../internal/theme-context";
+import type { CloudOsActivity } from "./transcript-model";
+
+/**
+ * 回合还在跑、但屏幕上没有任何东西在动时的活动指示。
+ *
+ * 用 thinking-orbs 的 canvas 球而不是一行 shimmer 文字:动画本身就是「还活着」
+ * 的信号,文案只负责说清在干什么(`deriveTurnActivity` 给出的四种之一)。
+ *
+ * 和 `src/status.tsx` 的 `ThinkingIndicator` 是同一个上游球、同一套 role/aria
+ * 形状,但**不共用实现** —— cloud-os 不 import `../src`(见 cloud-os/README.md,
+ * 由 check-chat-presentation-boundary.mjs 守着),文案也走 cloud-os 自己的
+ * 工具种类表,不是 src 那套工具名正则。
+ */
+export function CloudOsActivityIndicator({ state, label }: CloudOsActivity) {
+  // 必须显式传 theme,不能用它的 `auto`:auto 先扫祖先的 data-theme / .dark / .light,
+  // 而本仓的浅色**是「没有 .dark」**,扫不到任何标记 → 它回落到
+  // prefers-color-scheme,也就是**操作系统**的深浅。系统深色 + 应用浅色时,
+  // 球会在浅底上画浅墨,几乎看不见。cloud-os 子树的深浅事实源是这个 context
+  // (CloudOsRoot 从宿主的 useThemeMode() 拿到),直接用它。
+  const mode = useCloudOsMode();
+  return (
+    <div className="cos-activity" role="status" aria-label={label}>
+      <ThinkingOrb state={state} size={20} theme={mode} aria-hidden="true" />
+      <span>{label}</span>
+    </div>
+  );
+}

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

@@ -9,11 +9,13 @@ import {
   Terminal,
 } from "@phosphor-icons/react";
 import {
+  Fragment,
   useCallback,
   useEffect,
   useMemo,
   useRef,
   useState,
+  type ReactNode,
 } from "react";
 import { Tooltip } from "../primitives/tooltip";
 import { WorkshopIconButton } from "../primitives/workshop-controls";
@@ -33,8 +35,10 @@ import {
   type ApprovalDecision,
 } from "./rich-blocks";
 import { ThinkingTraceRow, ToolGroupRow } from "./tool-rows";
+import { CloudOsActivityIndicator } from "./activity-indicator";
 import {
   buildCloudOsEntries,
+  deriveTurnActivity,
   formatClockTime,
   formatFullTimestamp,
   rhythmTopClass,
@@ -58,6 +62,18 @@ export interface CloudOsChatMessagesProps {
   /** 把某个 part 映射成待授权 id;返回 undefined 表示不在此处渲染授权。 */
   approvalIdOf?: (part: unknown) => string | undefined;
   approvalsDisabled?: boolean;
+  /**
+   * 用宿主自己的卡片渲染某条待授权。返回 undefined 就退回内置的通用授权行。
+   *
+   * 存在的理由：授权行只认得工具名和入参，说不出「这次要花多少钱、买的是什么」。
+   * 需要在决定之前把这些摆到人面前的宿主，得自己画那张卡。
+   */
+  renderApproval?: (approval: {
+    approvalId: string;
+    toolName: string;
+    input: Record<string, unknown>;
+    disabled: boolean;
+  }) => ReactNode;
   /** 把消息里的 `sandbox:/workspace/...` 之类地址翻译成可访问 URL。 */
   resolveUrl?: CloudOsUrlResolver;
   /** 消息区宽度是否收敛到 920px 居中(GadgetEditor 里叫 constrainChatWidth)。 */
@@ -66,7 +82,11 @@ export interface CloudOsChatMessagesProps {
   onRetry?: () => void;
   onApprove?: (approvalId: string, decision: ApprovalDecision) => void;
   onSuggestion?: (text: string) => void;
-  onAnswer?: (payload: unknown) => void;
+  /**
+   * 把交互卡片上的操作回写成那次工具调用的结果(缺省 → 卡片不可操作)。
+   * 卡片不再知道「答案怎么变成消息」—— 它只认自己的 toolCallId。
+   */
+  onRespond?: (toolCallId: string, response: unknown) => Promise<boolean>;
   /** 点击定时任务卡片:宿主决定跳到哪(缺省 → 卡片不可点)。 */
   onOpenSchedule?: (scheduleId: string) => void;
   onCopy?: (text: string) => void;
@@ -173,13 +193,14 @@ export function CloudOsChatMessages({
   showThinkingTraces = true,
   approvalIdOf,
   approvalsDisabled = false,
+  renderApproval,
   resolveUrl,
   constrainWidth = true,
   emptyTitle = "What are we working on?",
   onRetry,
   onApprove,
   onSuggestion,
-  onAnswer,
+  onRespond,
   onOpenSchedule,
   onCopy,
 }: CloudOsChatMessagesProps) {
@@ -246,14 +267,10 @@ export function CloudOsChatMessages({
     element.scrollTo({ top: element.scrollHeight });
   }, [isRecovering, messages, status, showScrollButton]);
 
-  // 只有在「本回合还没吐出任何可见内容」时才显示 Thinking 占位;一旦有真实输出,
-  // 输出自己会说话(照搬原文件的 showThinking 判据)。
-  const lastEntry = entries.at(-1) ?? null;
-  const awaitingFirstOutput =
-    isActive &&
-    (lastEntry === null ||
-      lastEntry.type === "user" ||
-      lastEntry.type === "slashCommand");
+  // 判据是「尾巴有没有活口」,不是原文件的「本回合有没有出过内容」——
+  // 后者会让「答完 ask_user 之后到模型下一个 chunk」这段完全没有指示,
+  // 而卡片此时写着 Submitted,读起来就是卡死了。见 deriveTurnActivity。
+  const activity = deriveTurnActivity(entries, { isActive, hasPendingSteer });
   const copyText = (text: string) => {
     copy(text);
     onCopy?.(text);
@@ -432,8 +449,7 @@ export function CloudOsChatMessages({
                           <AskUserBlock
                             key={block.key}
                             call={block.call}
-                            answeredText={block.answeredText}
-                            onAnswer={(payload) => onAnswer?.(payload)}
+                            onRespond={onRespond}
                           />
                         );
                       case "suggestions":
@@ -452,7 +468,18 @@ export function CloudOsChatMessages({
                             onOpen={onOpenSchedule}
                           />
                         );
-                      case "approval":
+                      case "approval": {
+                        const custom = renderApproval?.({
+                          approvalId: block.approvalId,
+                          toolName: block.call.toolName,
+                          input: block.call.input,
+                          disabled: approvalsDisabled,
+                        });
+                        if (custom !== undefined && custom !== null) {
+                          return (
+                            <Fragment key={block.key}>{custom}</Fragment>
+                          );
+                        }
                         return (
                           <ApprovalBlock
                             key={block.key}
@@ -462,6 +489,7 @@ export function CloudOsChatMessages({
                             onApprove={(id, decision) => onApprove?.(id, decision)}
                           />
                         );
+                      }
                       case "parallel":
                         return (
                           <ParallelBlock
@@ -551,11 +579,9 @@ export function CloudOsChatMessages({
             </div>
           )}
 
-          {awaitingFirstOutput && (
+          {activity && (
             <div className="mt-5 inline-flex px-1.5 py-1 text-[14px] leading-5 tracking-[-0.25px]">
-              <span className="cos-thinking-shimmer">
-                {hasPendingSteer ? "Waiting for the current step to finish…" : "Thinking"}
-              </span>
+              <CloudOsActivityIndicator {...activity} />
             </div>
           )}
 

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

@@ -18,7 +18,7 @@ import type {
   PlanStep,
   SubAgentView,
 } from "./transcript-model";
-import type { CloudOsToolCall } from "./tool-presentation";
+import { askUserOutcome, type CloudOsToolCall } from "./tool-presentation";
 
 /**
  * UIMessage 协议里存在、gadgets 那套没有的几类 part —— 计划快照、原位提问、
@@ -149,99 +149,131 @@ function questionsOf(input: Record<string, unknown>): AskQuestion[] {
 
 export function AskUserBlock({
   call,
-  answeredText,
-  onAnswer,
+  onRespond,
 }: {
   call: CloudOsToolCall;
-  answeredText?: string;
-  onAnswer: (payload: unknown) => void;
+  /** 缺省（宿主没接）时选项不可点 —— 形状对齐 ScheduleBlock 的 onOpen。 */
+  onRespond?: (toolCallId: string, response: unknown) => Promise<boolean>;
 }) {
   const questions = questionsOf(call.input);
-  const [selections, setSelections] = useState<string[][]>(() =>
-    questions.map(() => []),
-  );
-  const [submitted, setSubmitted] = useState(false);
-  const external = answeredText?.trim() ?? "";
-  const externalSelections = new Set(
-    external.split("、").map((value) => value.trim()).filter(Boolean),
-  );
-  const resolved = submitted || Boolean(external);
-  const valid = questions.every(
+  // 不能用 `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 || (selections[index]?.length ?? 0) > 0,
+      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 (
-    <div className="max-w-[860px]">
-      <div className="rounded-2xl border border-kumo-line bg-kumo-base px-4 py-3">
-        {/* 同 ApprovalBlock:窄栏下让提交按钮整体换行,别把问题正文挤没。 */}
-        <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"
+    // 收成 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"
           >
-            <Bell size={18} weight="fill" />
-          </span>
-          <div className="min-w-[12rem] flex-1 space-y-2.5">
-            {questions.map((question, questionIndex) => (
-              <div key={`${question.prompt}:${questionIndex}`} className="space-y-1.5">
-                <p className="m-0 text-[14px] leading-5 font-medium tracking-[-0.25px] text-kumo-default">
-                  {question.prompt}
-                </p>
-                <div className="flex flex-wrap gap-1.5">
-                  {question.options.map((option) => {
-                    const selected = external
-                      ? externalSelections.has(option)
-                      : selections[questionIndex]?.includes(option);
-                    return (
-                      <button
-                        key={option}
-                        type="button"
-                        disabled={resolved}
-                        onClick={() =>
-                          setSelections((current) =>
-                            current.map((values, index) => {
-                              if (index !== questionIndex) return values;
-                              if (!question.multi) return [option];
-                              return values.includes(option)
-                                ? values.filter((value) => value !== option)
-                                : [...values, option];
-                            }),
-                          )
-                        }
-                        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>
-          <div className="ml-auto flex flex-shrink-0 items-center self-center">
-            <WorkshopButton
-              tone="primary"
-              disabled={resolved || !valid}
-              onClick={() => {
-                onAnswer({ selections, text: "" });
-                setSubmitted(true);
-              }}
-              className="!h-8 gap-1 !rounded-lg text-[12px]"
-            >
-              {resolved ? "Submitted" : "Submit"}
-            </WorkshopButton>
+            <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>
-        {external && (
-          <p className="mt-2 mb-0 pl-12 text-[12px] leading-4 text-kumo-inactive">
-            Answered: {external}
-          </p>
-        )}
       </div>
     </div>
   );

package/cloud-os/chat/tool-presentation.ts

@@ -489,6 +489,48 @@ export function toCloudOsToolCall(
   };
 }
 
+// ── ask_user 的终局 ─────────────────────────────────────────────────────────
+
+/**
+ * `ask_user` 这次调用的三种终局,全部只看它自己的 state 和 output。
+ *
+ * - `pending`:还等着用户操作,选项可点。**只有 input 态才算 pending** ——
+ *   服务端一旦结算,这次 interaction 就不再接受响应。
+ * - `answered`:`ask_user` 的 settle 写了 `{ selections, text }`。
+ * - `closed`:被结算掉了但不是一个答案 —— 用户改成直接发言(`{ cancelled: true }`)、
+ *   Turn 提前结束、或工具出错。必须和 pending 分开,否则卡片会留一个点了拿
+ *   `{ ok: false }` 的假 Submit,读起来就是「点了没反应」。
+ *
+ * 判据放在这里而不是卡片里:卡片(能不能点)和底部活动指示器(还在不在等人)
+ * 都要用它,两处各判一次迟早会分叉。
+ */
+export type AskUserOutcome =
+  | { kind: "pending" }
+  | { kind: "answered"; selections: string[]; text: string }
+  | { kind: "closed"; reason: "user_replied_freeform" | "other" };
+
+export function askUserOutcome(call: CloudOsToolCall): AskUserOutcome {
+  if (call.state === "input-streaming" || call.state === "input-available") {
+    return { kind: "pending" };
+  }
+  const record = recordOf(call.output);
+  if (Array.isArray(record.selections)) {
+    return {
+      kind: "answered",
+      selections: record.selections.filter(
+        (value): value is string => typeof value === "string",
+      ),
+      text: typeof record.text === "string" ? record.text : "",
+    };
+  }
+  return {
+    kind: "closed",
+    reason: record.reason === "user_replied_freeform"
+      ? "user_replied_freeform"
+      : "other",
+  };
+}
+
 // ── 分组(逐行对应原 buildToolCallGroups)────────────────────────────────────
 
 export function buildToolCallGroups(calls: CloudOsToolCall[]): ToolCallGroup[] {

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

@@ -1,5 +1,7 @@
 import type { UIMessage } from "ai";
+import type { OrbState } from "thinking-orbs";
 import {
+  askUserOutcome,
   buildToolCallGroups,
   toCloudOsToolCall,
   type CloudOsToolCall,
@@ -45,9 +47,12 @@ export type AssistantBlock =
   | { kind: "text"; key: string; text: string }
   | { kind: "toolGroup"; key: string; group: ToolCallGroup }
   | { kind: "plan"; key: string; steps: PlanStep[]; running: boolean }
-  // answeredText 取的是**这条消息之后的第一条用户直答**,不是工具 output ——
-  // ask_user 的 output 往往只是 `{ asked: true }` 之类的回执。
-  | { kind: "askUser"; key: string; call: CloudOsToolCall; answeredText?: string }
+  // 答案就在 call.output 里(`ask_user` 是 client-settled tool,用户点选后
+  // 经 respondToolInteraction 回写成这次调用的结果)。曾经靠扫下一条用户消息
+  // 推断,那是有损且会误认无关消息的,已彻底删除。
+  // `pending` 是这张卡还在等人 —— 卡片据此决定能不能点,活动指示器据此决定
+  // 该不该出现,同一条判据(askUserOutcome)算一次。
+  | { kind: "askUser"; key: string; call: CloudOsToolCall; pending: boolean }
   | { kind: "suggestions"; key: string; items: string[] }
   | { kind: "schedule"; key: string; call: CloudOsToolCall }
   | { kind: "approval"; key: string; call: CloudOsToolCall; approvalId: string }
@@ -248,7 +253,6 @@ function assistantBlocks(
   message: UIMessage,
   isActive: boolean,
   showThinkingTraces: boolean,
-  replyText: string | undefined,
   approvalIdOf: (part: unknown) => string | undefined,
 ): AssistantBlock[] {
   const blocks: AssistantBlock[] = [];
@@ -380,10 +384,7 @@ function assistantBlocks(
         kind: "askUser",
         key,
         call,
-        answeredText:
-          replyText?.trim() ||
-          (typeof call.output === "string" ? call.output.trim() : "") ||
-          undefined,
+        pending: askUserOutcome(call).kind === "pending",
       });
       return;
     }
@@ -432,13 +433,6 @@ function terminalOf(
   return undefined;
 }
 
-function isDirectUserMessage(message: UIMessage): boolean {
-  return (
-    message.role === "user" &&
-    !message.parts.some((part) => dataKindOf(part) !== null)
-  );
-}
-
 export interface BuildEntriesOptions {
   messages: readonly UIMessage[];
   /** streaming/submitted 时最后一条 assistant 消息才算「活着」。 */
@@ -502,12 +496,10 @@ export function buildCloudOsEntries({
       return;
     }
 
-    const reply = messages.slice(index + 1).find(isDirectUserMessage);
     const blocks = assistantBlocks(
       message,
       isActive && index === lastAssistantIndex,
       showThinkingTraces,
-      reply ? messageText(reply).trim() || undefined : undefined,
       approvalIdOf,
     );
     const terminal = terminalOf(message);
@@ -560,6 +552,87 @@ function dropSupersededPlans(entries: CloudOsEntry[]): CloudOsEntry[] {
   );
 }
 
+// ── 活动指示(本回合此刻在干什么)────────────────────────────────────────────
+
+/**
+ * 底部活动指示器要显示的动画与文案。
+ */
+export interface CloudOsActivity {
+  state: OrbState;
+  label: string;
+}
+
+/**
+ * 尾巴是否**自己会说话** —— 有它在动,就不该再挂一个活动指示器。
+ *
+ * 正在流的正文/思考、还在跑的工具组或计划,以及一张**还等着你作答**的
+ * `ask_user` 卡都算:前三者自身就有动效,最后一个等的是人不是模型,这时候
+ * 显示「Thinking」是在撒谎。
+ */
+function isLiveBlock(block: AssistantBlock): boolean {
+  switch (block.kind) {
+    case "text":
+    case "reasoning":
+      return true;
+    case "toolGroup":
+      return block.group.hasRunning;
+    case "plan":
+      return block.running;
+    case "askUser":
+      return block.pending;
+    // approval 块只在 awaitingApproval 时才建出来,所以它在场就是在等人。
+    case "approval":
+      return true;
+    case "parallel":
+      return block.tools.some((tool) => tool.status === "running");
+    case "subagents":
+      return block.agents.some((agent) => agent.status === "running");
+    default:
+      return false;
+  }
+}
+
+// 已结算的尾巴 → 此刻真正在发生的事。措辞刻意只说得出口的那部分:
+// 工具跑完了,模型在读它的输出;卡答完了,模型在接你的答案。
+function activityForTail(block: AssistantBlock | undefined): CloudOsActivity {
+  if (!block) return { state: "solving", label: "Thinking…" };
+  if (block.kind === "askUser") {
+    return { state: "solving", label: "Picking up your answer…" };
+  }
+  if (block.kind === "toolGroup") {
+    const kind = block.group.calls.at(-1)?.kind;
+    return kind !== undefined &&
+        ["web-search", "web-fetch", "grep", "glob", "list", "read"].includes(
+          kind,
+        )
+      ? { state: "searching", label: "Reading results…" }
+      : { state: "working", label: "Working…" };
+  }
+  return { state: "working", label: "Working…" };
+}
+
+/**
+ * 本回合此刻该显示什么活动;`null` = 尾巴自己会说话,别再叠一个。
+ *
+ * @remarks
+ * 判据是「**尾巴有没有活口**」,不是「本回合有没有出过内容」。后者曾经是这里的
+ * 写法,于是答完 `ask_user`(卡片变成 Submitted,读起来就是"结束了")到模型下一
+ * 个 chunk 之间整屏没有任何在跑的迹象 —— 而那段恰好是最长的一次 TTFT,看起来
+ * 就是卡死。凡是尾巴为**已结算卡片**的断档都是同一个洞,这里一并补上。
+ */
+export function deriveTurnActivity(
+  entries: readonly CloudOsEntry[],
+  options: { isActive: boolean; hasPendingSteer?: boolean },
+): CloudOsActivity | null {
+  if (!options.isActive) return null;
+  const tail = entries.at(-1) ?? null;
+  const block = tail?.type === "assistant" ? tail.blocks.at(-1) : undefined;
+  if (block && isLiveBlock(block)) return null;
+  return options.hasPendingSteer
+    ? { state: "solving", label: "Waiting for the current step to finish…" }
+    : activityForTail(block);
+}
+
 // ── 行间距节奏(照搬原 rhythmTopClass)──────────────────────────────────────
 
 function isUserEntry(entry: CloudOsEntry): boolean {

package/cloud-os/composer/cloud-os-chat-input.tsx

@@ -20,6 +20,11 @@ import { DropdownMenu } from "../primitives/dropdown-menu";
 import { Tooltip } from "../primitives/tooltip";
 import { WorkshopIconButton } from "../primitives/workshop-controls";
 
+const isComposingKeyEvent = (event: {
+  isComposing?: boolean;
+  keyCode?: number;
+}) => event.isComposing === true || event.keyCode === 229;
+
 /**
  * 从 cloudflare-os-main `ChatInterface.tsx` 的 `ChatInput` 拷来。
  *
@@ -303,8 +308,12 @@ export function CloudOsChatInput({
               }
             }}
             onKeyDown={(event) => {
-              // Enter 发送(按住 Shift 换行)
-              if (event.key === "Enter" && !event.shiftKey) {
+              // Enter 发送(按住 Shift 换行); IME 组合中不发送
+              if (
+                event.key === "Enter" &&
+                !event.shiftKey &&
+                !isComposingKeyEvent(event.nativeEvent)
+              ) {
                 event.preventDefault();
                 if (canSend) onSubmit();
               }

package/cloud-os/index.ts

@@ -61,9 +61,12 @@ export {
 } from "./chat/rich-blocks";
 export type { ApprovalDecision } from "./chat/rich-blocks";
 
+export { CloudOsActivityIndicator } from "./chat/activity-indicator";
+
 export {
   buildCloudOsEntries,
   cloudOsMetadata,
+  deriveTurnActivity,
   formatClockTime,
   formatFullTimestamp,
   messageText,
@@ -71,6 +74,7 @@ export {
 } from "./chat/transcript-model";
 export type {
   AssistantBlock,
+  CloudOsActivity,
   CloudOsAttachment,
   CloudOsEntry,
   ParallelTool,

package/cloud-os/layout/cloud-os-workspace-split.tsx

@@ -24,11 +24,12 @@ const WORKSPACE_TRANSITION_MS = 200;
 
 const isBrowser = typeof window !== "undefined";
 
-function clampChatWidth(width: number) {
+function clampChatWidth(width: number, containerWidth?: number) {
   if (!isBrowser) {
     return Math.max(MIN_CHAT_WIDTH, Math.min(DEFAULT_CHAT_WIDTH, width));
   }
-  const max = Math.max(MIN_CHAT_WIDTH, window.innerWidth - MIN_WORKSPACE_WIDTH);
+  const available = containerWidth ?? window.innerWidth;
+  const max = Math.max(MIN_CHAT_WIDTH, available - MIN_WORKSPACE_WIDTH);
   return Math.max(MIN_CHAT_WIDTH, Math.min(max, width));
 }
 
@@ -48,6 +49,11 @@ function getInitialChatWidth() {
   return clampChatWidth(Number.isFinite(parsed) ? parsed : fallback);
 }
 
+type ResizeSession = {
+  startX: number;
+  startWidth: number;
+};
+
 export interface CloudOsWorkspaceSplitProps {
   chat: ReactNode;
   workspace: ReactNode;
@@ -68,23 +74,40 @@ export function CloudOsWorkspaceSplit({
   railWidth = 0,
   rail,
 }: CloudOsWorkspaceSplitProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const resizeSessionRef = useRef<ResizeSession | null>(null);
   const [chatWidth, setChatWidth] = useState(getInitialChatWidth);
   const [isResizing, setIsResizing] = useState(false);
   const [transitionEnabled, setTransitionEnabled] = useState(false);
   const chatWidthRef = useRef(chatWidth);
   chatWidthRef.current = chatWidth;
 
+  const getContainerWidth = useCallback(
+    () => containerRef.current?.getBoundingClientRect().width,
+    [],
+  );
+
+  const clampToContainer = useCallback(
+    (width: number) => clampChatWidth(width, getContainerWidth()),
+    [getContainerWidth],
+  );
+
   // 首帧不要动画:否则每次挂载都会看到面板「滑进来」。
   useEffect(() => {
     const timer = window.setTimeout(() => setTransitionEnabled(true), 0);
     return () => window.clearTimeout(timer);
   }, []);
 
+  // 挂载后按真实容器宽度重新 clamp 一次(宿主可能有左侧 sidebar 等偏移)。
   useEffect(() => {
-    const onResize = () => setChatWidth((width) => clampChatWidth(width));
+    setChatWidth((width) => clampToContainer(width));
+  }, [clampToContainer]);
+
+  useEffect(() => {
+    const onResize = () => setChatWidth((width) => clampToContainer(width));
     window.addEventListener("resize", onResize);
     return () => window.removeEventListener("resize", onResize);
-  }, []);
+  }, [clampToContainer]);
 
   const persistChatWidth = useCallback((width: number) => {
     try {
@@ -94,11 +117,24 @@ export function CloudOsWorkspaceSplit({
     }
   }, []);
 
+  const widthFromPointer = useCallback(
+    (clientX: number) => {
+      const session = resizeSessionRef.current;
+      if (!session) return chatWidthRef.current;
+      return clampToContainer(session.startWidth + clientX - session.startX);
+    },
+    [clampToContainer],
+  );
+
   // 用 pointer capture:拖过右侧 iframe 时事件也不会丢。
   const handleResizePointerDown = useCallback(
     (event: ReactPointerEvent<HTMLDivElement>) => {
       if (!workspaceOpen) return;
       event.preventDefault();
+      resizeSessionRef.current = {
+        startX: event.clientX,
+        startWidth: chatWidthRef.current,
+      };
       event.currentTarget.setPointerCapture(event.pointerId);
       setIsResizing(true);
     },
@@ -107,9 +143,9 @@ export function CloudOsWorkspaceSplit({
   const handleResizePointerMove = useCallback(
     (event: ReactPointerEvent<HTMLDivElement>) => {
       if (!event.currentTarget.hasPointerCapture(event.pointerId)) return;
-      setChatWidth(clampChatWidth(event.clientX));
+      setChatWidth(widthFromPointer(event.clientX));
     },
-    [],
+    [widthFromPointer],
   );
   const handleResizePointerUp = useCallback(
     (event: ReactPointerEvent<HTMLDivElement>) => {
@@ -119,12 +155,13 @@ export function CloudOsWorkspaceSplit({
       const width =
         event.type === "pointercancel"
           ? chatWidthRef.current
-          : clampChatWidth(event.clientX);
+          : widthFromPointer(event.clientX);
+      resizeSessionRef.current = null;
       setChatWidth(width);
       persistChatWidth(width);
       setIsResizing(false);
     },
-    [persistChatWidth],
+    [persistChatWidth, widthFromPointer],
   );
 
   useEffect(() => {
@@ -147,7 +184,10 @@ export function CloudOsWorkspaceSplit({
   return (
     // h-full 而不是只靠 flex-1:宿主给的容器不一定是 flex,那样 flex-1 不生效,
     // 整个分栏会塌成内容高度(聊天区不铺满、输入框吊在半空)。
-    <div className="relative flex h-full min-h-0 flex-1 overflow-hidden bg-kumo-base">
+    <div
+      ref={containerRef}
+      className="relative flex h-full min-h-0 flex-1 overflow-hidden bg-kumo-base"
+    >
       {isAgentActive && (
         <div
           className="absolute left-0 z-10 h-0"

package/cloud-os/styles/cloud-os.css

@@ -505,6 +505,20 @@
   }
 }
 
+/* ── 活动指示:回合在跑但屏幕上没东西在动时 ──────────────────────────────── */
+.cos-activity {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 20px;
+  color: var(--text-color-kumo-subtle);
+}
+
+/* 球是固定 20px 的画布,不许被 flex 压扁。 */
+.cos-activity canvas {
+  flex: none;
+}
+
 /* ── 流式占位:Thinking 扫光 ──────────────────────────────────────────────── */
 .cos-thinking-shimmer {
   color: var(--text-color-kumo-inactive);

package/demo/cloud-os-chat-showcase.tsx

@@ -376,20 +376,21 @@ export function CloudOsChatShowcase() {
                 setValue("");
                 setLastEvent(`已发送后续问题：${text}`);
               }}
-              onAnswer={(payload) => {
+              onRespond={async (_toolCallId, response) => {
                 const data =
-                  payload && typeof payload === "object"
-                    ? (payload as { selections?: string[][]; text?: string })
+                  response && typeof response === "object"
+                    ? (response as { selections?: string[]; text?: string })
                     : {};
                 const answer = [
-                  ...(data.selections?.flat() ?? []),
+                  ...(data.selections ?? []),
                   data.text?.trim() ?? "",
                 ]
                   .filter(Boolean)
-                  .join("、");
+                  .join(" / ");
                 if (answer) setHumanAnswer(answer);
                 selectScenario("planning");
                 setLastEvent(`已回答并继续：${answer || humanAnswer}`);
+                return true;
               }}
             />
 

package/package.json

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

package/src/camel/camel-chat-messages.tsx

@@ -1,3 +1,8 @@
+// camel 是 dev-only 的展示变体(App.tsx 的 `/__camel-chat` 路由),没有接生产宿主。
+// 它的交互卡片仍用旧的 `onAnswer(payload)` 回调,**没有**迁到 client-settled tool 的
+// `onRespond(toolCallId, response)` —— 生产聊天面板走的是 cloud-os,已经迁完。
+// 哪天 camel 要上生产,这里必须一起改,否则卡片点了不会把答案回写给那次工具调用。
+
 import type { UIMessage } from "ai";
 import {
   ArrowDownIcon,

package/src/camel/camel-prompt-input.tsx

@@ -39,6 +39,7 @@ import {
   type ReactNode,
 } from "react";
 import { ComposerTriggerPopover } from "../composer/composer-trigger-popover";
+import { isComposingKeyEvent } from "../composer/key-rules";
 import type { ComposerCommand } from "../composer/types";
 import { cn } from "../internal/cn";
 
@@ -345,7 +346,7 @@ function CamelPromptInputContent({
     if (
       event.key === "Enter" &&
       !event.shiftKey &&
-      !event.nativeEvent.isComposing
+      !isComposingKeyEvent(event.nativeEvent)
     ) {
       event.preventDefault();
       submit();

package/src/chat-summary-panel.tsx

@@ -103,7 +103,7 @@ export function ChatSummaryPanel({
   return (
     <aside
       className={cn(
-        "w-[19rem] min-w-0 max-w-full overflow-hidden rounded-2xl border border-border bg-popover shadow-card",
+        "absolute right-3 top-11 z-30 w-[19rem] min-w-0 max-w-[calc(100%-1.5rem)] overflow-hidden rounded-2xl border border-border bg-popover shadow-card",
         "animate-in fade-in-0 zoom-in-95 slide-in-from-top-2 duration-200 motion-reduce:animate-none",
         className,
       )}

package/src/composer/chat-composer.tsx

@@ -10,6 +10,7 @@ import {
   type KeyboardEvent,
 } from "react";
 import { cn } from "../internal/cn";
+import { isComposingKeyEvent } from "./key-rules";
 import { Composer } from "./composer";
 import type {
   ChatComposerProps,
@@ -152,7 +153,7 @@ function ChatComposerInner<TAttachment>(
     if (
       (event.key === "Enter" &&
         !event.shiftKey &&
-        !event.nativeEvent.isComposing) ||
+        !isComposingKeyEvent(event.nativeEvent)) ||
       event.key === "Tab"
     ) {
       const command = filtered[active] ?? filtered[0];

package/src/composer/composer.tsx

@@ -26,6 +26,7 @@ import {
   Attachments,
 } from "./composer-attachments";
 import { useComposerDrop } from "./drop-controller";
+import { isComposingKeyEvent } from "./key-rules";
 import type {
   ComposerAttachmentView,
   ComposerProps,
@@ -247,7 +248,7 @@ function ComposerInner<TAttachment>(
     if (
       event.key === "Enter" &&
       !event.shiftKey &&
-      !event.nativeEvent.isComposing
+      !isComposingKeyEvent(event.nativeEvent)
     ) {
       event.preventDefault();
       if (canSend) void submit();

package/src/composer/index.ts

@@ -3,4 +3,5 @@ export * from "./composer-attachments";
 export * from "./composer-trigger-popover";
 export * from "./chat-composer";
 export * from "./drop-controller";
+export * from "./key-rules";
 export * from "./types";

package/src/composer/key-rules.ts

@@ -0,0 +1,12 @@
+/**
+ * Whether Enter belongs to an input method rather than to the Composer.
+ *
+ * Both signals are honoured on their own: some Chinese input methods report only the
+ * legacy `keyCode === 229`, and either one alone means a word is still being composed.
+ */
+export function isComposingKeyEvent(event: {
+  isComposing?: boolean;
+  keyCode?: number;
+}): boolean {
+  return event.isComposing === true || event.keyCode === 229;
+}

package/src/styles/index.css

@@ -2128,7 +2128,10 @@
   min-height: 120px;
   gap: 0;
   border-radius: 16px;
-  background: #1c1c1a;
+  /* 这里曾写死 #1c1c1a,于是 light 档下输入框还是近黑的。
+     表面色一律走 token:--mp-card → --card(light #fff / dark #1c1c1c)。
+     本节其余几个写死色是状态/图标强调色(琥珀、蓝),两档背景上都读得出来,不在此列。 */
+  background: var(--mp-card);
   box-shadow: none;
 }