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

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

@@ -145,7 +145,7 @@ function truncate(value: string, maxLength: number): string {
   return value.length <= maxLength ? value : `${value.slice(0, maxLength - 1)}…`;
 }
 
-function humanize(name: string): string {
+export function humanizeToolName(name: string): string {
   const spaced = name
     .replace(/^mcp__/, "")
     .replace(/__/g, " ")
@@ -298,7 +298,8 @@ export function getToolCallSummary(call: CloudOsToolCall): {
       return { verb: running ? "Editing" : "Edited", target: filename || undefined };
     case "bash": {
       const command =
-        stringField(input, "description") || stringField(input, "command", "cmd");
+        stringField(input, "description") ||
+        stringField(input, "script", "command", "cmd");
       return {
         verb: running ? "Running" : "Ran",
         target: command ? truncate(command, 60) : undefined,
@@ -343,7 +344,7 @@ export function getToolCallSummary(call: CloudOsToolCall): {
     case "agent": {
       const name =
         stringField(input, "subagentName", "agent", "name", "agentType") ||
-        humanize(toolName);
+        humanizeToolName(toolName);
       return { verb: running ? "Running" : "Ran", target: name };
     }
     case "skill": {
@@ -378,13 +379,15 @@ export function getToolCallSummary(call: CloudOsToolCall): {
       const [, server = "", ...rest] = toolName.split("__");
       return {
         verb: running ? "Calling" : "Called",
-        target: rest.length ? `${humanize(rest.join(" "))} · ${humanize(server)}` : undefined,
+        target: rest.length
+          ? `${humanizeToolName(rest.join(" "))} · ${humanizeToolName(server)}`
+          : undefined,
       };
     }
     case "generic":
       break;
   }
-  const displayName = humanize(toolName);
+  const displayName = humanizeToolName(toolName);
   return { verb: running ? `Using ${displayName}` : `Used ${displayName}` };
 }
 
@@ -435,7 +438,7 @@ export function describeToolCallCount(
     case "generic":
       break;
   }
-  const displayName = humanize(toolName);
+  const displayName = humanizeToolName(toolName);
   return count === 1 ? `Used ${displayName}` : `Used ${displayName} ${formatTimes(count)}`;
 }
 
@@ -489,6 +492,64 @@ export function toCloudOsToolCall(
   };
 }
 
+// ── ask_user 的终局 ─────────────────────────────────────────────────────────
+
+/**
+ * `ask_user` 这次调用的三种终局,全部只看它自己的 state 和 output。
+ *
+ * - `pending`:还等着用户操作,选项可点。**只有 input 态才算 pending** ——
+ *   服务端一旦结算,这次 interaction 就不再接受响应。
+ * - `answered`:`ask_user` 的 settle 写了按问题对应的 `{ answers }`。
+ * - `closed`:被结算掉了但不是一个答案 —— 用户改成直接发言(`{ cancelled: true }`)、
+ *   Turn 提前结束、或工具出错。必须和 pending 分开,否则卡片会留一个点了拿
+ *   `{ ok: false }` 的假 Submit,读起来就是「点了没反应」。
+ *
+ * 判据放在这里而不是卡片里:卡片(能不能点)和底部活动指示器(还在不在等人)
+ * 都要用它,两处各判一次迟早会分叉。
+ */
+export type AskUserOutcome =
+  | { kind: "pending" }
+  | {
+      kind: "answered";
+      answers: Array<{
+        question: string;
+        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.answers) && record.answers.length > 0) {
+    const answers = record.answers.map(recordOf);
+    if (answers.every((answer) =>
+      typeof answer.question === "string" &&
+      Array.isArray(answer.selections) &&
+      answer.selections.every((value) => typeof value === "string") &&
+      (answer.text === undefined || typeof answer.text === "string")
+    )) {
+      return {
+        kind: "answered",
+        answers: answers.map((answer) => ({
+          question: answer.question as string,
+          selections: answer.selections as string[],
+          text: typeof answer.text === "string" ? answer.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/tool-rows.tsx

@@ -1,40 +1,60 @@
-import { CaretRight } from "@phosphor-icons/react";
-import { memo } from "react";
+import { Atom, CaretDown, CaretRight, Copy } from "@phosphor-icons/react";
+import { memo, useId, useState } from "react";
 import { MarkdownMessage } from "./markdown-message";
 import {
   getToolCallSummary,
   getToolIcon,
   normalizeOutputText,
-  safeStringify,
   type CloudOsToolCall,
   type PhosphorIcon,
   type ToolCallGroup,
 } from "./tool-presentation";
 
 /**
- * 工作行(work rows)。整块从 cloudflare-os-main 的 ChatInterface.tsx 拷来:
- * WorkIcon / ToolCallDetails / NestedToolCallRow / ToolGroupRow / ThinkingTraceRow。
- * className 一个字没改;改的只有取数——从 gadgets 的 AiToolCall 换成
- * UIMessage 归一化后的 CloudOsToolCall。
+ * 工作行(work rows): WorkIcon / ToolCallDetails / NestedToolCallRow /
+ * ToolGroupRow / ThinkingTraceRow。渲染 UIMessage 归一化后的 CloudOsToolCall。
  */
 
 export function WorkIcon({ Icon }: { Icon: PhosphorIcon }) {
   return <Icon size={15} className="text-kumo-inactive" />;
 }
 
-function OutputPre({ label, value }: { label?: string; value: string }) {
-  if (!value) return null;
+function displayOutput(value: unknown, fallback: string): string {
+  if (value == null || typeof value !== "object" || Array.isArray(value)) {
+    return fallback;
+  }
+  const record = value as Record<string, unknown>;
+  if (typeof record.summary === "string" && record.summary.trim()) {
+    return record.summary.trim();
+  }
+  const displayValue = (item: unknown): string =>
+    item != null && typeof item === "object"
+      ? Object.entries(item).map(([key, child]) => `${key}: ${displayValue(child)}`).join("\n")
+      : String(item ?? "");
+  return displayValue(record);
+}
+
+function OutputPre({ value }: { value: string }) {
   return (
-    <>
-      {label && (
-        <span className="font-mono text-[11px] leading-4 text-kumo-inactive uppercase tracking-[0.08em]">
-          {label}
-        </span>
-      )}
-      <pre className="max-h-56 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">
+    <div
+      className="rounded-xl border border-kumo-line/70 bg-kumo-elevated/45 px-4 py-3 text-kumo-subtle"
+      data-output-card=""
+    >
+      <div className="flex items-center justify-between gap-3 text-[14px] font-medium leading-5">
+        <span>Output</span>
+        <button
+          type="button"
+          onClick={() => navigator.clipboard.writeText(value)}
+          className="flex h-4 w-4 items-center justify-center text-kumo-subtle transition-colors hover:text-kumo-default focus-visible:outline-none focus-visible:text-kumo-default"
+          aria-label="Copy output"
+        >
+          <Copy size={16} />
+        </button>
+      </div>
+      <pre className="mt-2 max-h-56 overflow-auto border-t border-kumo-line/70 pt-3 font-sans text-[14px] font-normal leading-5 whitespace-pre-wrap">
         {value}
       </pre>
-    </>
+    </div>
   );
 }
 
@@ -43,14 +63,7 @@ export const ToolCallDetails = memo(function ToolCallDetails({
 }: {
   toolCall: CloudOsToolCall;
 }) {
-  const code =
-    typeof tc.input.code === "string"
-      ? tc.input.code
-      : typeof tc.input.command === "string"
-        ? tc.input.command
-        : "";
-  const inputText =
-    Object.keys(tc.input).length > 0 ? safeStringify(tc.input) : "";
+  const output = displayOutput(tc.output, tc.outputText);
   return (
     <div className="space-y-2">
       {tc.errorText && (
@@ -58,18 +71,8 @@ export const ToolCallDetails = memo(function ToolCallDetails({
           {tc.errorText}
         </pre>
       )}
-      {code ? (
-        <>
-          <OutputPre label="Code" value={code} />
-          <OutputPre label="Output" value={tc.outputText} />
-        </>
-      ) : (
-        <>
-          <OutputPre value={inputText} />
-          {tc.outputText && <OutputPre label="Output" value={tc.outputText} />}
-        </>
-      )}
-      {!code && !inputText && !tc.outputText && !tc.errorText && (
+      {output && <OutputPre value={output} />}
+      {!output && !tc.errorText && (
         <p className="m-0 text-[12px] leading-4 text-kumo-inactive">
           No additional data
         </p>
@@ -118,7 +121,7 @@ export const NestedToolCallRow = memo(function NestedToolCallRow({
         </span>
       </button>
       {open && (
-        <div className="themed-surface-inset ml-8 mt-1 space-y-3 rounded-2xl border border-kumo-line/70 bg-kumo-elevated/45 p-3">
+        <div className="ml-8 mt-1 space-y-3">
           <ToolCallDetails toolCall={tc} />
         </div>
       )}
@@ -128,14 +131,55 @@ export const NestedToolCallRow = memo(function NestedToolCallRow({
 
 export const ThinkingTraceRow = memo(function ThinkingTraceRow({
   reasoning,
+  running,
 }: {
   reasoning: string;
+  running: boolean;
 }) {
+  const [open, setOpen] = useState(false);
+  const contentId = useId();
+  const summary = reasoning.replace(/\s+/g, " ").trim();
+
   return (
-    <div className="min-w-0 py-1 text-kumo-subtle">
-      <div className="cos-markdown min-w-0 text-[13px] leading-[19px]">
-        <MarkdownMessage message={reasoning} />
-      </div>
+    <div
+      className="flex min-w-0 flex-col items-start gap-2"
+      data-thinking-trace=""
+      data-state={open ? "open" : "closed"}
+    >
+      <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"
+        aria-expanded={open}
+        aria-controls={contentId}
+      >
+        <span className="relative grid size-4 flex-shrink-0 place-items-center" aria-hidden="true">
+          <Atom
+            size={14}
+            className="transition-opacity group-hover:opacity-0 group-focus-visible:opacity-0"
+          />
+          <CaretDown
+            size={14}
+            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 aria-hidden="true">·</span>
+        <span
+          className="min-w-0 flex-1 truncate"
+          style={running ? { direction: "rtl" } : undefined}
+        >
+          <bdi dir="auto">{summary}</bdi>
+        </span>
+      </button>
+      {open && (
+        <div
+          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>
+      )}
     </div>
   );
 });
@@ -189,7 +233,7 @@ export const ToolGroupRow = memo(function ToolGroupRow({
       </button>
       {open &&
         (group.calls.length === 1 ? (
-          <div className="themed-surface-inset ml-8 mt-1 space-y-3 rounded-2xl border border-kumo-line/70 bg-kumo-elevated/45 p-3">
+          <div className="ml-8 mt-1 space-y-3">
             <ToolCallDetails toolCall={group.calls[0]} />
           </div>
         ) : (

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

@@ -1,8 +1,11 @@
 import type { UIMessage } from "ai";
+import type { OrbState } from "thinking-orbs";
 import {
+  askUserOutcome,
   buildToolCallGroups,
   toCloudOsToolCall,
   type CloudOsToolCall,
+  type CloudOsToolKind,
   type ToolCallGroup,
 } from "./tool-presentation";
 
@@ -27,6 +30,13 @@ export interface CloudOsMessageMetadata extends UnknownRecord {
   turnDurationMs?: number;
   turnStartedAt?: number;
   turnStatus?: string;
+  requestedCapabilities?: unknown;
+}
+
+export interface CloudOsRequestedCapability {
+  kind: "skill" | "plan";
+  name: string;
+  label: string;
 }
 
 export interface CloudOsAttachment {
@@ -41,19 +51,34 @@ export interface PlanStep {
 }
 
 export type AssistantBlock =
-  | { kind: "reasoning"; key: string; text: string }
+  | {
+      kind: "reasoning";
+      key: string;
+      text: string;
+      running: boolean;
+    }
   | { 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 }
   | { kind: "parallel"; key: string; label: string; tools: ParallelTool[] }
   | { kind: "subagents"; key: string; agents: SubAgentView[] }
-  | { kind: "image"; key: string; src: string; alt: string }
+  | {
+      kind: "image";
+      key: string;
+      src: string;
+      alt: string;
+      mediaType?: string;
+    }
+  | { kind: "file"; key: string; file: CloudOsAttachment }
   | { kind: "error"; key: string; title: string; body?: string };
 
 export interface ParallelTool {
@@ -75,6 +100,7 @@ export type CloudOsEntry =
       messageId: string;
       text: string;
       attachments: CloudOsAttachment[];
+      capabilities: CloudOsRequestedCapability[];
       authorName?: string;
       timestamp?: number;
     }
@@ -121,6 +147,31 @@ export function cloudOsMetadata(message: UIMessage): CloudOsMessageMetadata {
   return recordOf(message.metadata) as CloudOsMessageMetadata;
 }
 
+export function requestedCapabilitiesOf(
+  metadata: CloudOsMessageMetadata,
+): CloudOsRequestedCapability[] {
+  if (!Array.isArray(metadata.requestedCapabilities)) return [];
+  const seen = new Set<string>();
+  return metadata.requestedCapabilities.flatMap((value) => {
+    const capability = recordOf(value);
+    if (
+      (capability.kind !== "skill" && capability.kind !== "plan") ||
+      typeof capability.name !== "string" ||
+      !capability.name.trim() ||
+      typeof capability.label !== "string" ||
+      !capability.label.trim()
+    ) return [];
+    const key = `${capability.kind}:${capability.name}`;
+    if (seen.has(key)) return [];
+    seen.add(key);
+    return [{
+      kind: capability.kind,
+      name: capability.name,
+      label: capability.label,
+    }];
+  });
+}
+
 export function messageText(message: UIMessage): string {
   return message.parts
     .filter(
@@ -248,7 +299,6 @@ function assistantBlocks(
   message: UIMessage,
   isActive: boolean,
   showThinkingTraces: boolean,
-  replyText: string | undefined,
   approvalIdOf: (part: unknown) => string | undefined,
 ): AssistantBlock[] {
   const blocks: AssistantBlock[] = [];
@@ -281,7 +331,12 @@ function assistantBlocks(
       const text = String(record.text ?? "").trim();
       if (!text || !showThinkingTraces) return;
       flush();
-      blocks.push({ kind: "reasoning", key, text });
+      blocks.push({
+        kind: "reasoning",
+        key,
+        text,
+        running: record.state === "streaming",
+      });
       return;
     }
 
@@ -339,15 +394,32 @@ function assistantBlocks(
       const data = dataOf(part);
       const src = String(data.src ?? data.url ?? record.url ?? "");
       const mediaType = String(record.mediaType ?? data.mediaType ?? "");
-      if (src && (dataKind === "image" || mediaType.startsWith("image/"))) {
-        flush();
+      if (!src) return;
+
+      flush();
+      const filename = String(
+        data.alt ?? data.filename ?? record.filename ?? "Attachment",
+      );
+      if (dataKind === "image" || mediaType.startsWith("image/")) {
         blocks.push({
           kind: "image",
           key,
           src,
-          alt: String(data.alt ?? data.filename ?? record.filename ?? "Image"),
+          alt: filename,
+          mediaType: mediaType || undefined,
         });
+        return;
       }
+
+      blocks.push({
+        kind: "file",
+        key,
+        file: {
+          url: src,
+          filename,
+          mediaType: mediaType || undefined,
+        },
+      });
       return;
     }
 
@@ -375,15 +447,13 @@ function assistantBlocks(
     }
 
     if (call.kind === "ask-user") {
+      if (call.failed) return;
       flush();
       blocks.push({
         kind: "askUser",
         key,
         call,
-        answeredText:
-          replyText?.trim() ||
-          (typeof call.output === "string" ? call.output.trim() : "") ||
-          undefined,
+        pending: askUserOutcome(call).kind === "pending",
       });
       return;
     }
@@ -432,13 +502,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 消息才算「活着」。 */
@@ -494,6 +557,7 @@ export function buildCloudOsEntries({
         messageId: message.id,
         text,
         attachments,
+        capabilities: requestedCapabilitiesOf(metadata),
         authorName: metadata.authorDisplayName,
         timestamp:
           nonNegativeNumber(metadata.createdAt) ??
@@ -502,12 +566,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 +622,136 @@ function dropSupersededPlans(entries: CloudOsEntry[]): CloudOsEntry[] {
   );
 }
 
+// ── 活动指示(本回合此刻在干什么)────────────────────────────────────────────
+
+/**
+ * 底部活动指示器要显示的动画与文案。
+ */
+export interface CloudOsActivity {
+  state: OrbState;
+  label: string;
+}
+
+const SEARCHING_TOOL_KINDS: ReadonlySet<CloudOsToolKind> = new Set([
+  "read",
+  "glob",
+  "grep",
+  "list",
+  "web-search",
+  "web-fetch",
+]);
+const SHAPING_TOOL_KINDS: ReadonlySet<CloudOsToolKind> = new Set([
+  "write",
+  "edit",
+  "tasks",
+  "create-agent",
+  "publish-extension",
+]);
+
+function activityForTool(call: CloudOsToolCall | undefined): CloudOsActivity {
+  if (!call) return { state: "working", label: "Working…" };
+  const name = call.toolName.replaceAll("-", "_").toLowerCase();
+  if (call.kind === "agent") {
+    return {
+      state: "weaving",
+      label: call.running ? "Coordinating agents…" : "Combining results…",
+    };
+  }
+  if (SEARCHING_TOOL_KINDS.has(call.kind)) {
+    return {
+      state: "searching",
+      label: call.running ? "Searching…" : "Reading results…",
+    };
+  }
+  if (SHAPING_TOOL_KINDS.has(call.kind)) {
+    return { state: "shaping", label: "Shaping result…" };
+  }
+  if (call.kind === "skill" || name === "activate_skill") {
+    return { state: "working", label: "Loading skill…" };
+  }
+  if (name === "run_skill_script") {
+    return { state: "working", label: "Running skill…" };
+  }
+  return { state: "working", label: "Working…" };
+}
+
+function activityForTail(block: AssistantBlock | undefined): CloudOsActivity {
+  if (!block) return { state: "solving", label: "Thinking…" };
+  switch (block.kind) {
+    case "reasoning":
+      return { state: "solving", label: "Reasoning…" };
+    case "text":
+    case "suggestions":
+      return { state: "composing", label: "Composing answer…" };
+    case "toolGroup":
+      return activityForTool(block.group.calls.at(-1));
+    case "plan":
+    case "image":
+    case "file":
+      return { state: "shaping", label: "Shaping result…" };
+    case "askUser":
+      return block.pending
+        ? { state: "listening", label: "Waiting for your answer…" }
+        : { state: "solving", label: "Picking up your answer…" };
+    case "approval":
+      return { state: "breathing", label: "Waiting for approval…" };
+    case "schedule":
+      return block.call.awaitingApproval
+        ? { state: "breathing", label: "Waiting for approval…" }
+        : { state: "working", label: "Working…" };
+    case "parallel":
+      return {
+        state: "weaving",
+        label: block.tools.some((tool) => tool.status === "running")
+          ? "Coordinating tasks…"
+          : "Combining results…",
+      };
+    case "subagents":
+      return {
+        state: "weaving",
+        label: block.agents.some((agent) => agent.status === "running")
+          ? "Coordinating agents…"
+          : "Combining results…",
+      };
+    default:
+      return { state: "working", label: "Working…" };
+  }
+}
+
+/**
+ * 回合活着时始终返回一个 Orb 状态;只有回合终止时才返回 `null`。
+ */
+export function deriveTurnActivity(
+  entries: readonly CloudOsEntry[],
+  options: {
+    isActive: boolean;
+    isRecovering?: boolean;
+    recoveryStatusLabel?: string;
+    awaitingApproval?: boolean;
+    hasPendingSteer?: boolean;
+  },
+): CloudOsActivity | null {
+  if (options.isRecovering) {
+    return {
+      state: "connecting",
+      label: options.recoveryStatusLabel ?? "Reconnecting…",
+    };
+  }
+  if (!options.isActive) return null;
+  if (options.awaitingApproval) {
+    return { state: "breathing", label: "Waiting for approval…" };
+  }
+  if (options.hasPendingSteer) {
+    return {
+      state: "breathing",
+      label: "Waiting for the current step to finish…",
+    };
+  }
+  const tail = entries.at(-1) ?? null;
+  const block = tail?.type === "assistant" ? tail.blocks.at(-1) : undefined;
+  return activityForTail(block);
+}
+
 // ── 行间距节奏(照搬原 rhythmTopClass)──────────────────────────────────────
 
 function isUserEntry(entry: CloudOsEntry): boolean {