@springbrand/message-panel 0.1.3-alpha.33 → 0.1.3-alpha.36

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

@@ -1,37 +1,29 @@
-import { Atom, CaretDown, CaretRight, Copy } from "@phosphor-icons/react";
-import { motion, useReducedMotion } from "motion/react";
-import { memo, useId, type ReactNode } from "react";
-import {
-  MarkdownMessage,
-  type CloudOsUrlResolver,
-} from "./markdown-message";
+import { memo, useEffect, useId, useState } from "react";
+import { CodeRunner } from "./code-runner";
+import { MarkdownMessage } from "./markdown-message";
+import { ToolCall } from "./tool-call";
+import { ToolTimeline } from "./tool-timeline";
+import { WebSearchToolCall } from "./web-search";
 import {
   getToolCallSummary,
-  getToolIcon,
   normalizeOutputText,
+  safeStringify,
   type CloudOsToolCall,
   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]";
+const DISCLOSURE_TITLE_BASE =
+  "flex min-w-0 cursor-pointer gap-2 rounded-xl text-left text-[14px] leading-[1.4] text-kumo-inactive transition-colors duration-150 ease-out hover:text-kumo-subtle focus-visible:text-kumo-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 DISCLOSURE_TITLE_WITH_ICON =
+  `${DISCLOSURE_TITLE_BASE} items-start 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 =
+export const DISCLOSURE_ICON =
   "mt-0.5 flex size-4 shrink-0 items-center justify-center";
 
+const thinkingStar = new URL("../assets/thinking-star.svg", import.meta.url).href;
+
 /**
  * 工作行(work rows): WorkIcon / ToolCallDetails / NestedToolCallRow /
  * ToolGroupRow / ThinkingTraceRow。渲染 UIMessage 归一化后的 CloudOsToolCall。
@@ -56,76 +48,18 @@ function displayOutput(value: unknown, fallback: string): string {
   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 (
-    <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>
-  );
+function toolCallView(tc: CloudOsToolCall) {
+  const settled = getToolCallSummary({ ...tc, running: false });
+  const active = getToolCallSummary({ ...tc, running: true });
+  return {
+    label: settled.verb,
+    activeLabel: active.verb,
+    query: settled.target ?? "",
+    result:
+      tc.errorText ||
+      displayOutput(tc.output, tc.outputText) ||
+      (tc.running ? "Running…" : "No additional data"),
+  };
 }
 
 export const ToolCallDetails = memo(function ToolCallDetails({
@@ -133,15 +67,14 @@ export const ToolCallDetails = memo(function ToolCallDetails({
 }: {
   toolCall: CloudOsToolCall;
 }) {
-  return <OutputCard items={detailItems([tc])} />;
-});
-
-export const ToolGroupDetails = memo(function ToolGroupDetails({
-  calls,
-}: {
-  calls: readonly CloudOsToolCall[];
-}) {
-  return <OutputCard items={detailItems(calls)} />;
+  return (
+    <ToolCall
+      {...toolCallView(tc)}
+      running={tc.running}
+      open
+      onOpenChange={() => undefined}
+    />
+  );
 });
 
 export const NestedToolCallRow = memo(function NestedToolCallRow({
@@ -153,64 +86,51 @@ export const NestedToolCallRow = memo(function NestedToolCallRow({
   open: boolean;
   onToggle: (key: string) => void;
 }) {
-  const key = `call-${tc.toolCallId}`;
-  const summary = getToolCallSummary(tc);
-  const label = `${summary.verb}${summary.target ? ` ${summary.target}` : ""}`;
-  const Icon = getToolIcon(tc.kind);
+  if (tc.kind === "web-search" && !tc.failed) {
+    return <WebSearchToolCall toolCall={tc} />;
+  }
 
-  return (
-    <div className="group/nested">
-      <button
-        type="button"
-        onClick={() => onToggle(key)}
-        className={`${SECONDARY_DISCLOSURE_TITLE_WITH_ICON} w-full`}
-        aria-expanded={open}
+  if (tc.kind === "javascript") {
+    const code = typeof tc.input.code === "string"
+      ? tc.input.code
+      : safeStringify(tc.input);
+    const output =
+      tc.errorText || displayOutput(tc.output, tc.outputText);
+    const key = `call-${tc.toolCallId}`;
+    return (
+      <ToolCall
+        {...toolCallView(tc)}
+        running={tc.running}
+        open={open}
+        onOpenChange={(next) => {
+          if (next !== open) onToggle(key);
+        }}
+        className="max-w-none"
       >
-        <span className={SECONDARY_DISCLOSURE_ICON}>
-          <WorkIcon Icon={Icon} />
-        </span>
-        <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">
-              Error
-            </span>
-          )}
-          <CaretRight
-            size={16}
-            className={`flex-shrink-0 text-kumo-inactive transition-transform duration-150 ease-out ${open ? "rotate-90" : ""}`}
-          />
-        </span>
-      </button>
-      {open && (
-        <div className="mt-1 space-y-3">
-          <ToolCallDetails toolCall={tc} />
-        </div>
-      )}
-    </div>
-  );
-});
+        <CodeRunner
+          language="javascript"
+          code={code}
+          state={tc.running ? "running" : tc.failed ? "error" : "ok"}
+          output={output ? output.split(/\r?\n/) : []}
+          className="max-w-none"
+        />
+      </ToolCall>
+    );
+  }
 
-function ThinkingContent({
-  id,
-  text,
-  resolveUrl,
-  className = "",
-}: {
-  id?: string;
-  text: string;
-  resolveUrl?: CloudOsUrlResolver;
-  className?: string;
-}) {
+  const key = `call-${tc.toolCallId}`;
   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>
+    <ToolCall
+      {...toolCallView(tc)}
+      running={tc.running}
+      open={open}
+      onOpenChange={(next) => {
+        if (next !== open) onToggle(key);
+      }}
+      className="max-w-none"
+    />
   );
-}
+});
 
 export const ThinkingTraceRow = memo(function ThinkingTraceRow({
   reasoning,
@@ -219,7 +139,7 @@ export const ThinkingTraceRow = memo(function ThinkingTraceRow({
   reasoning: string;
   running: boolean;
 }) {
-  const [open, toggle] = useLifecycleDisclosure(running);
+  const [open, setOpen] = useState(false);
   const contentId = useId();
   const summary = reasoning.replace(/\s+/g, " ").trim();
 
@@ -231,20 +151,13 @@ export const ThinkingTraceRow = memo(function ThinkingTraceRow({
     >
       <button
         type="button"
-        onClick={toggle}
-        className={`${SECONDARY_DISCLOSURE_TITLE_WITH_ICON} group w-fit max-w-[80%]`}
+        onClick={() => setOpen((current) => !current)}
+        className={`${DISCLOSURE_TITLE_WITH_ICON} group w-fit max-w-[80%]`}
         aria-expanded={open}
         aria-controls={contentId}
       >
-        <span className={`${SECONDARY_DISCLOSURE_ICON} relative`} aria-hidden="true">
-          <Atom
-            size={15}
-            className="transition-opacity group-hover:opacity-0 group-focus-visible:opacity-0"
-          />
-          <CaretDown
-            size={15}
-            className={`absolute opacity-0 transition-[opacity,transform] group-hover:opacity-100 group-focus-visible:opacity-100 ${open ? "" : "-rotate-90"}`}
-          />
+        <span className={DISCLOSURE_ICON} aria-hidden="true">
+          <img src={thinkingStar} alt="" className="size-[12.2369px]" />
         </span>
         <span className="flex-shrink-0">Think</span>
         <span aria-hidden="true">·</span>
@@ -256,185 +169,30 @@ export const ThinkingTraceRow = memo(function ThinkingTraceRow({
         </span>
       </button>
       {open && (
-        <ThinkingContent
+        <div
           id={contentId}
-          text={reasoning}
-          className="w-full"
-        />
-      )}
-    </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 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"
+          className="cos-markdown w-full px-4 text-[14px] leading-[1.4] text-kumo-default/70"
         >
-          {!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 && (
-              <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}
+          <MarkdownMessage message={reasoning} />
         </div>
       )}
     </div>
   );
 });
 
-export const WorkDescriptionRow = memo(function WorkDescriptionRow({
-  text,
-  resolveUrl,
-}: {
-  text: string;
-  running?: boolean;
-  resolveUrl?: CloudOsUrlResolver;
-}) {
-  return (
-    <ThinkingContent
-      text={text}
-      resolveUrl={resolveUrl}
-    />
-  );
-});
+function useElapsedSeconds(running: boolean) {
+  const [elapsed, setElapsed] = useState(0);
+  useEffect(() => {
+    if (!running) return undefined;
+    const startedAt = Date.now() - elapsed * 1000;
+    const timer = window.setInterval(
+      () => setElapsed(Math.floor((Date.now() - startedAt) / 1000)),
+      1000,
+    );
+    return () => window.clearInterval(timer);
+  }, [running]);
+  return elapsed;
+}
 
 export const ToolGroupRow = memo(function ToolGroupRow({
   group,
@@ -447,48 +205,57 @@ export const ToolGroupRow = memo(function ToolGroupRow({
   expandedKeys: ReadonlySet<string>;
   onToggle: (key: string) => void;
 }) {
-  void expandedKeys;
+  const elapsed = useElapsedSeconds(group.hasRunning && group.calls.length > 1);
+  const onlyCall = group.calls.length === 1 ? group.calls[0] : undefined;
+  if (onlyCall) {
+    return (
+      <NestedToolCallRow
+        toolCall={onlyCall}
+        open={expandedKeys.has(`call-${onlyCall.toolCallId}`)}
+        onToggle={onToggle}
+      />
+    );
+  }
+  if (group.calls.every((call) => call.kind === "web-search")) {
+    return (
+      <div className="flex w-full max-w-sm flex-col gap-4">
+        {group.calls.map((toolCall) => (
+          <NestedToolCallRow
+            key={toolCall.toolCallId}
+            toolCall={toolCall}
+            open={expandedKeys.has(`call-${toolCall.toolCallId}`)}
+            onToggle={onToggle}
+          />
+        ))}
+      </div>
+    );
+  }
   return (
-    <div className="group/tool-call">
-      <button
-        type="button"
-        onClick={() => onToggle(group.key)}
-        className={SECONDARY_DISCLOSURE_TITLE_WITH_ICON}
-        aria-expanded={open}
-      >
-        <span className={SECONDARY_DISCLOSURE_ICON}>
-          <WorkIcon Icon={group.Icon} />
-        </span>
-        <span className="min-w-0 flex-1">
-          <span className="flex min-w-0 items-center gap-2">
-            <span
-              className={`min-w-0 truncate ${group.hasRunning ? "cos-thinking-shimmer" : ""}`}
-            >
-              {group.label}
-            </span>
-            {group.hasError && (
-              <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">
-                Error
-              </span>
-            )}
-            <CaretRight
-              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-2 block truncate text-[12px] leading-4 text-[rgba(0,0,0,0.3)]">
-              {group.detailLines.join(" · ")}
-            </span>
-          )}
-        </span>
-      </button>
-      {open && (
-        <div className="mt-3">
-          <ToolGroupDetails calls={group.calls} />
-        </div>
-      )}
-    </div>
+    <ToolTimeline
+      steps={[]}
+      visibleSteps={0}
+      streaming={group.hasRunning}
+      open={open}
+      onOpenChange={(next) => {
+        if (next !== open) onToggle(group.key);
+      }}
+      restingLabel={group.label}
+      activeLabel={`Working for ${elapsed}s`}
+      stats={[]}
+      className="max-w-none"
+    >
+      {group.calls.map((toolCall) => {
+        const key = `call-${toolCall.toolCallId}`;
+        return (
+          <NestedToolCallRow
+            key={toolCall.toolCallId}
+            toolCall={toolCall}
+            open={expandedKeys.has(key)}
+            onToggle={onToggle}
+          />
+        );
+      })}
+    </ToolTimeline>
   );
 });