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

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)}`;
 }
 
@@ -496,7 +499,7 @@ export function toCloudOsToolCall(
  *
  * - `pending`:还等着用户操作,选项可点。**只有 input 态才算 pending** ——
  *   服务端一旦结算,这次 interaction 就不再接受响应。
- * - `answered`:`ask_user` 的 settle 写了 `{ selections, text }`。
+ * - `answered`:`ask_user` 的 settle 写了按问题对应的 `{ answers }`。
  * - `closed`:被结算掉了但不是一个答案 —— 用户改成直接发言(`{ cancelled: true }`)、
  *   Turn 提前结束、或工具出错。必须和 pending 分开,否则卡片会留一个点了拿
  *   `{ ok: false }` 的假 Submit,读起来就是「点了没反应」。
@@ -506,7 +509,14 @@ export function toCloudOsToolCall(
  */
 export type AskUserOutcome =
   | { kind: "pending" }
-  | { kind: "answered"; selections: string[]; text: string }
+  | {
+      kind: "answered";
+      answers: Array<{
+        question: string;
+        selections: string[];
+        text: string;
+      }>;
+    }
   | { kind: "closed"; reason: "user_replied_freeform" | "other" };
 
 export function askUserOutcome(call: CloudOsToolCall): AskUserOutcome {
@@ -514,14 +524,23 @@ export function askUserOutcome(call: CloudOsToolCall): AskUserOutcome {
     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 : "",
-    };
+  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",

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

@@ -1,40 +1,117 @@
-import { CaretRight } from "@phosphor-icons/react";
-import { memo } from "react";
-import { MarkdownMessage } from "./markdown-message";
+import { Atom, CaretDown, CaretRight, Copy } from "@phosphor-icons/react";
+import { motion, useReducedMotion } from "motion/react";
+import { memo, useId, useState, type ReactNode } from "react";
+import {
+  MarkdownMessage,
+  type CloudOsUrlResolver,
+} from "./markdown-message";
 import {
   getToolCallSummary,
   getToolIcon,
   normalizeOutputText,
-  safeStringify,
   type CloudOsToolCall,
   type PhosphorIcon,
   type ToolCallGroup,
 } from "./tool-presentation";
 
+const thinkingSpark = new URL(
+  "../assets/thinking-spark.svg",
+  import.meta.url,
+).href;
+
 /**
- * 工作行(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);
+}
+
+interface ToolDetailItem {
+  key: string;
+  label: string;
+  output: string;
+  error: string;
+}
+
+function detailItems(calls: readonly CloudOsToolCall[]): ToolDetailItem[] {
+  return calls.map((call) => {
+    const summary = getToolCallSummary(call);
+    return {
+      key: call.toolCallId,
+      label: `${summary.verb}${summary.target ? ` ${summary.target}` : ""}`,
+      output: displayOutput(call.output, call.outputText),
+      error: call.errorText,
+    };
+  });
+}
+
+function OutputCard({ items }: { items: readonly ToolDetailItem[] }) {
+  const copyValue = items
+    .map((item) => {
+      const detail = [item.error, item.output]
+        .filter(Boolean)
+        .join("\n\n") || "No additional data";
+      return items.length === 1 ? detail : `${item.label}\n${detail}`;
+    })
+    .join("\n\n");
   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">
-        {value}
-      </pre>
-    </>
+    <div
+      className="rounded-xl border border-[rgba(0,0,0,0.07)] bg-[rgba(0,0,0,0.03)] px-4 py-3 text-cos-output"
+      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(copyValue)}
+          className="flex h-4 w-4 items-center justify-center text-cos-output transition-colors hover:text-kumo-default focus-visible:outline-none focus-visible:text-kumo-default"
+          aria-label="Copy output"
+        >
+          <Copy size={16} />
+        </button>
+      </div>
+      <div className="mt-3 max-h-56 space-y-3 overflow-auto border-t border-kumo-line/70 pt-3 text-[14px] font-normal leading-[1.4]">
+        {items.map((item) => (
+          <div key={item.key} className="space-y-1.5">
+            {items.length > 1 && (
+              <p className="m-0 text-[12px] leading-4 text-cos-output">
+                {item.label}
+              </p>
+            )}
+            {item.error && (
+              <p className="m-0 whitespace-pre-wrap text-kumo-danger">
+                {item.error}
+              </p>
+            )}
+            {item.output && (
+              <p className="m-0 whitespace-pre-wrap text-cos-output">
+                {item.output}
+              </p>
+            )}
+            {!item.error && !item.output && (
+              <p className="m-0 text-cos-output">No additional data</p>
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
   );
 }
 
@@ -43,39 +120,15 @@ 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) : "";
-  return (
-    <div className="space-y-2">
-      {tc.errorText && (
-        <pre className="rounded-xl border border-kumo-danger/20 bg-kumo-danger-tint/40 p-3 font-mono text-[12px] leading-[18px] text-kumo-danger whitespace-pre-wrap">
-          {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 && (
-        <p className="m-0 text-[12px] leading-4 text-kumo-inactive">
-          No additional data
-        </p>
-      )}
-    </div>
-  );
+  return <OutputCard items={detailItems([tc])} />;
+});
+
+export const ToolGroupDetails = memo(function ToolGroupDetails({
+  calls,
+}: {
+  calls: readonly CloudOsToolCall[];
+}) {
+  return <OutputCard items={detailItems(calls)} />;
 });
 
 export const NestedToolCallRow = memo(function NestedToolCallRow({
@@ -118,7 +171,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 +181,221 @@ 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
+      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>
+  );
+});
+
+export function formatWorkDuration(milliseconds: number): string {
+  const totalSeconds = Math.max(0, Math.floor(milliseconds / 1000));
+  const hours = Math.floor(totalSeconds / 3600);
+  const minutes = Math.floor((totalSeconds % 3600) / 60);
+  const seconds = totalSeconds % 60;
+  if (hours > 0) {
+    return `${hours}h ${minutes}m${seconds > 0 ? ` ${seconds}s` : ""}`;
+  }
+  if (minutes > 0) return `${minutes}m${seconds > 0 ? ` ${seconds}s` : ""}`;
+  return `${seconds}s`;
+}
+
+interface ActivitySummary {
+  leading: string;
+  emphasis?: string;
+  trailing?: string;
+}
+
+function plural(count: number, singular: string, plural = `${singular}s`): string {
+  return `${count} ${count === 1 ? singular : plural}`;
+}
+
+function activitySummary(groups: readonly ToolCallGroup[]): ActivitySummary | null {
+  const calls = groups.flatMap((group) => group.calls);
+  const count = (kind: CloudOsToolCall["kind"]) =>
+    calls.filter((call) => call.kind === kind).length;
+  const webSearches = count("web-search");
+  const webPages = count("web-fetch");
+  if (webSearches > 0 && webPages > 0) {
+    return {
+      leading: "searched the web and retrieved ",
+      emphasis: `${webPages} web`,
+      trailing: webPages === 1 ? " page" : " pages",
+    };
+  }
+  if (webSearches > 0) return { leading: "searched the web" };
+  if (webPages > 0) {
+    return {
+      leading: "retrieved ",
+      emphasis: `${webPages} web`,
+      trailing: webPages === 1 ? " page" : " pages",
+    };
+  }
+
+  const firstKnown = calls.find((call) =>
+    ["read", "write", "edit", "bash", "skill", "javascript"].includes(
+      call.kind,
+    ),
+  );
+  if (!firstKnown) return null;
+  const total = count(firstKnown.kind);
+  switch (firstKnown.kind) {
+    case "read":
+      return { leading: `read ${plural(total, "file")}` };
+    case "write":
+      return { leading: `wrote ${plural(total, "file")}` };
+    case "edit":
+      return { leading: `made ${plural(total, "edit")}` };
+    case "bash":
+      return { leading: `ran ${plural(total, "command")}` };
+    case "skill":
+      return { leading: `read ${plural(total, "instruction set")}` };
+    case "javascript":
+      return { leading: total === 1 ? "ran code" : `ran code ${total} times` };
+    default:
+      return null;
+  }
+}
+
+export const WorkTraceDisclosure = memo(function WorkTraceDisclosure({
+  durationMs,
+  groups,
+  completed = false,
+  open,
+  onToggle,
+  children,
+}: {
+  durationMs?: number;
+  groups: readonly ToolCallGroup[];
+  completed?: boolean;
+  open: boolean;
+  onToggle: () => void;
+  children: ReactNode;
+}) {
+  const contentId = useId();
+  const reduceMotion = useReducedMotion();
+  const activity = activitySummary(groups);
+  const duration = durationMs === undefined ? "" : ` for ${formatWorkDuration(durationMs)}`;
+  const verb = completed ? "Worked" : "Thought";
+  const label = `${verb}${duration}${activity ? `, ${activity.leading}${activity.emphasis ?? ""}${activity.trailing ?? ""}` : ""}`;
+
+  return (
+    <div data-agent-work="" data-state={open ? "open" : "closed"}>
+      <div className="w-full border-b border-kumo-line pb-2">
+        <button
+          type="button"
+          onClick={onToggle}
+          aria-expanded={open}
+          aria-controls={contentId}
+          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>
+          <span className="min-w-0 truncate">
+            <span>{`${verb}${duration}${activity ? `, ${activity.leading}` : ""}`}</span>
+            {activity?.emphasis && (
+              <span className="text-kumo-default">{activity.emphasis}</span>
+            )}
+            {activity?.trailing}
+          </span>
+          <CaretRight
+            size={16}
+            className={`shrink-0 text-kumo-inactive transition-transform duration-150 ease-out ${open ? "rotate-90" : ""}`}
+            aria-hidden="true"
+          />
+        </button>
       </div>
+      {open && (
+        <div id={contentId} className="mt-4 space-y-3" data-agent-work-content="">
+          {children}
+        </div>
+      )}
+    </div>
+  );
+});
+
+export const WorkDescriptionRow = memo(function WorkDescriptionRow({
+  text,
+  resolveUrl,
+}: {
+  text: string;
+  resolveUrl?: CloudOsUrlResolver;
+}) {
+  return (
+    <div className="cos-markdown text-[14px] leading-[1.4] text-cos-work-description">
+      <MarkdownMessage message={text} resolveUrl={resolveUrl} />
     </div>
   );
 });
@@ -151,19 +411,20 @@ export const ToolGroupRow = memo(function ToolGroupRow({
   expandedKeys: ReadonlySet<string>;
   onToggle: (key: string) => void;
 }) {
+  void expandedKeys;
   return (
-    <div className="group -ml-0.5">
+    <div className="group/tool-call">
       <button
         type="button"
         onClick={() => onToggle(group.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="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"
         aria-expanded={open}
       >
-        <span className="flex h-5 w-5 flex-shrink-0 items-center justify-center">
+        <span className="mt-0.5 flex size-4 shrink-0 items-center justify-center">
           <WorkIcon Icon={group.Icon} />
         </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 ${group.hasRunning ? "cos-thinking-shimmer" : ""}`}
             >
@@ -175,38 +436,22 @@ export const ToolGroupRow = memo(function ToolGroupRow({
               </span>
             )}
             <CaretRight
-              size={13}
-              weight="bold"
-              className={`flex-shrink-0 text-kumo-inactive transition-transform duration-150 ease-out ${open ? "rotate-90" : ""}`}
+              size={16}
+              className={`shrink-0 text-kumo-inactive transition-transform duration-150 ease-out ${open ? "rotate-90" : ""}`}
             />
           </span>
           {group.detailLines.length > 1 && (
-            <span className="mt-1 block truncate font-mono text-[12px] leading-4 text-kumo-inactive">
+            <span className="mt-2 block truncate text-[12px] leading-4 text-[rgba(0,0,0,0.3)]">
               {group.detailLines.join(" · ")}
             </span>
           )}
         </span>
       </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">
-            <ToolCallDetails toolCall={group.calls[0]} />
-          </div>
-        ) : (
-          <div className="ml-8 mt-1 space-y-1">
-            {group.calls.map((toolCall) => {
-              const key = `call-${toolCall.toolCallId}`;
-              return (
-                <NestedToolCallRow
-                  key={toolCall.toolCallId}
-                  toolCall={toolCall}
-                  open={expandedKeys.has(key)}
-                  onToggle={onToggle}
-                />
-              );
-            })}
-          </div>
-        ))}
+      {open && (
+        <div className="mt-3 pl-6">
+          <ToolGroupDetails calls={group.calls} />
+        </div>
+      )}
     </div>
   );
 });