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

package/cloud-os/chat/surfaces.tsx

@@ -0,0 +1,90 @@
+"use client";
+
+import type { ComponentProps } from "react";
+import { useLayoutEffect, useRef, useState } from "react";
+import { cn } from "../internal/cn";
+
+export const paper = "bg-background border border-border/60 dark:bg-popover";
+
+export const field = "bg-foreground/[0.04] dark:bg-foreground/[0.06]";
+
+export const ghostButton =
+  "flex items-center justify-center rounded-full text-foreground/45 outline-none transition-[background-color,color,scale] duration-150 hover:bg-foreground/[0.06] hover:text-foreground/90 active:scale-[0.96] focus-visible:ring-1 focus-visible:ring-foreground/20 motion-reduce:transition-none dark:hover:bg-foreground/[0.09]";
+
+export const labelSwap =
+  "col-start-1 row-start-1 flex w-max items-center gap-1.5 leading-none transition-[opacity,filter] duration-300 ease-[cubic-bezier(0.23,1,0.32,1)] motion-reduce:transition-none";
+
+export const labelSwapIn = "opacity-100 blur-none";
+
+export const labelSwapOut =
+  "pointer-events-none select-none opacity-0 blur-[2px]";
+
+export const collapsePanel =
+  "h-(--collapsible-panel-height) overflow-hidden transition-[height] duration-200 ease-[cubic-bezier(0.32,0.72,0,1)] data-[ending-style]:h-0 data-[starting-style]:h-0 motion-reduce:transition-none";
+
+export const mono = "font-mono text-[11px] tracking-tight";
+
+export const codeScroll = "max-h-48 overflow-auto";
+
+export const codeSurface = "w-max min-w-full";
+
+export function ShimmerLabel({
+  active = true,
+  className,
+  ...props
+}: ComponentProps<"span"> & { active?: boolean }) {
+  return (
+    <span
+      className={cn(active && "shimmer motion-reduce:animate-none", className)}
+      {...props}
+    />
+  );
+}
+
+export function SwapLabel({
+  active,
+  children,
+  className,
+}: {
+  active: 0 | 1;
+  children: [React.ReactNode, React.ReactNode];
+  className?: string;
+}) {
+  const layers = [useRef<HTMLSpanElement>(null), useRef<HTMLSpanElement>(null)];
+  const [width, setWidth] = useState<number | null>(null);
+
+  useLayoutEffect(() => {
+    const target = layers[active]?.current;
+    if (!target) return undefined;
+    const measure = () =>
+      setWidth(Math.ceil(target.getBoundingClientRect().width));
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(target);
+    return () => observer.disconnect();
+  }, [active]);
+
+  return (
+    <span
+      style={width === null ? undefined : { width }}
+      className={cn(
+        "grid overflow-x-clip transition-[width] duration-300 ease-[cubic-bezier(0.23,1,0.32,1)] motion-reduce:transition-none",
+        className,
+      )}
+    >
+      {children.map((layer, index) => (
+        <span
+          key={index}
+          ref={layers[index]}
+          aria-hidden={active !== index}
+          className={cn(
+            labelSwap,
+            active === index ? labelSwapIn : labelSwapOut,
+          )}
+        >
+          {layer}
+        </span>
+      ))}
+    </span>
+  );
+}

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

@@ -0,0 +1,94 @@
+"use client";
+
+import { CheckIcon, ChevronRightIcon } from "lucide-react";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "../primitives/collapsible";
+import { cn } from "../internal/cn";
+import {
+  collapsePanel,
+  field,
+  mono,
+  ShimmerLabel,
+  SwapLabel,
+} from "./surfaces";
+
+export interface ToolCallProps {
+  label: string;
+  activeLabel: string;
+  query: string;
+  result: string;
+  running: boolean;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export function ToolCall({
+  label,
+  activeLabel,
+  query,
+  result,
+  running,
+  open,
+  onOpenChange,
+  className,
+  children,
+}: ToolCallProps) {
+  return (
+    <Collapsible
+      data-slot="tool-call"
+      open={open}
+      onOpenChange={onOpenChange}
+      className={cn("w-full max-w-sm", className)}
+    >
+      <CollapsibleTrigger className="group/trigger text-foreground/55 hover:text-foreground/90 flex items-center gap-2 rounded-md py-1 text-[13.5px] transition-colors outline-none">
+        <ChevronRightIcon className="size-3.5 shrink-0 opacity-60 transition-transform duration-200 ease-[cubic-bezier(0.32,0.72,0,1)] group-data-open/trigger:rotate-90 group-data-panel-open/trigger:rotate-90 motion-reduce:transition-none" />
+        <SwapLabel active={running ? 0 : 1} className="text-start">
+          <ShimmerLabel
+            active={running}
+            className="relative inline-block leading-none"
+          >
+            {activeLabel}
+          </ShimmerLabel>
+          <>{label}</>
+        </SwapLabel>
+        {query && (
+          <span
+            className={cn(
+              mono,
+              "bg-foreground/[0.06] text-foreground/70 rounded-md px-1.5 py-0.5",
+            )}
+          >
+            {query}
+          </span>
+        )}
+        <span className="ms-auto flex w-4 items-center justify-end">
+          {!running && (
+            <CheckIcon className="fade-in zoom-in-90 animate-in size-3.5 text-emerald-500 duration-200" />
+          )}
+        </span>
+      </CollapsibleTrigger>
+      <CollapsibleContent className={cn(collapsePanel, "outline-none")}>
+        {children ? (
+          <div className="mt-2">{children}</div>
+        ) : (
+          <div className={cn(field, "mt-2 overflow-hidden rounded-2xl text-xs")}>
+            <div className="px-3.5 py-2.5">
+              <p className={cn(mono, "text-foreground/35 mb-1")}>Result</p>
+              <p
+                className="text-foreground/90 overflow-auto leading-4"
+                style={{ maxHeight: "5rem" }}
+              >
+                {result}
+              </p>
+            </div>
+          </div>
+        )}
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}

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

@@ -213,7 +213,7 @@ export function canonicalToolKind(name: string): CloudOsToolKind {
     return "web-fetch";
   }
   if (
-    ["javascript", "js_exec", "node_repl", "execute_javascript", "execute_code"].includes(
+    ["javascript", "js_exec", "node_repl", "execute", "execute_javascript", "execute_code"].includes(
       normalized,
     )
   ) {
@@ -329,16 +329,8 @@ export function getToolCallSummary(call: CloudOsToolCall): {
         target: url ? hostnameOf(url) : undefined,
       };
     }
-    case "javascript": {
-      const firstLine = stringField(input, "code")
-        .split("\n")
-        .map((line) => line.trim())
-        .find((line) => line.length > 0);
-      return {
-        verb: running ? "Running code" : "Ran code",
-        target: firstLine ? truncate(firstLine, 60) : undefined,
-      };
-    }
+    case "javascript":
+      return { verb: running ? "Running code" : "Ran code" };
     case "tasks":
       return { verb: running ? "Updating plan" : "Updated plan" };
     case "agent": {

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

@@ -1,15 +1,29 @@
-import { Atom, CaretDown, CaretRight, Copy } from "@phosphor-icons/react";
-import { memo, useId, useState } from "react";
+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";
 
+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 DISCLOSURE_TITLE_WITH_ICON =
+  `${DISCLOSURE_TITLE_BASE} items-start py-1`;
+
+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。
@@ -34,28 +48,18 @@ function displayOutput(value: unknown, fallback: string): string {
   return displayValue(record);
 }
 
-function OutputPre({ value }: { value: string }) {
-  return (
-    <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>
-  );
+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({
@@ -63,21 +67,13 @@ export const ToolCallDetails = memo(function ToolCallDetails({
 }: {
   toolCall: CloudOsToolCall;
 }) {
-  const output = displayOutput(tc.output, tc.outputText);
   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>
-      )}
-      {output && <OutputPre value={output} />}
-      {!output && !tc.errorText && (
-        <p className="m-0 text-[12px] leading-4 text-kumo-inactive">
-          No additional data
-        </p>
-      )}
-    </div>
+    <ToolCall
+      {...toolCallView(tc)}
+      running={tc.running}
+      open
+      onOpenChange={() => undefined}
+    />
   );
 });
 
@@ -90,42 +86,49 @@ 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="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]"
-        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="flex h-5 w-5 flex-shrink-0 items-center justify-center">
-          <WorkIcon Icon={Icon} />
-        </span>
-        <span className="flex min-w-0 flex-1 items-center gap-2 text-[14px] leading-5 tracking-[-0.25px]">
-          <span className="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={13}
-            weight="bold"
-            className={`flex-shrink-0 text-kumo-inactive transition-transform duration-150 ease-out ${open ? "rotate-90" : ""}`}
-          />
-        </span>
-      </button>
-      {open && (
-        <div className="ml-8 mt-1 space-y-3">
-          <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>
+    );
+  }
+
+  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"
+    />
   );
 });
 
@@ -149,21 +152,14 @@ export const ThinkingTraceRow = memo(function ThinkingTraceRow({
       <button
         type="button"
         onClick={() => setOpen((current) => !current)}
-        className="group -ml-0.5 flex w-fit max-w-[80%] min-w-0 items-center gap-1.5 rounded-xl px-1.5 py-1 text-left text-[14px] leading-5 text-kumo-inactive transition-colors hover:text-kumo-default focus-visible:text-kumo-default focus-visible:outline-none"
+        className={`${DISCLOSURE_TITLE_WITH_ICON} group w-fit max-w-[80%]`}
         aria-expanded={open}
         aria-controls={contentId}
       >
-        <span className="relative grid size-4 flex-shrink-0 place-items-center" aria-hidden="true">
-          <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 className={DISCLOSURE_ICON} aria-hidden="true">
+          <img src={thinkingStar} alt="" className="size-[12.2369px]" />
         </span>
-        <span className="flex-shrink-0 text-kumo-subtle">Think</span>
+        <span className="flex-shrink-0">Think</span>
         <span aria-hidden="true">·</span>
         <span
           className="min-w-0 flex-1 truncate"
@@ -175,7 +171,7 @@ export const ThinkingTraceRow = memo(function ThinkingTraceRow({
       {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"
+          className="cos-markdown w-full px-4 text-[14px] leading-[1.4] text-kumo-default/70"
         >
           <MarkdownMessage message={reasoning} />
         </div>
@@ -184,6 +180,20 @@ export const ThinkingTraceRow = memo(function ThinkingTraceRow({
   );
 });
 
+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,
   open,
@@ -195,63 +205,57 @@ export const ToolGroupRow = memo(function ToolGroupRow({
   expandedKeys: ReadonlySet<string>;
   onToggle: (key: string) => void;
 }) {
-  return (
-    <div className="group -ml-0.5">
-      <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]"
-        aria-expanded={open}
-      >
-        <span className="flex h-5 w-5 flex-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={`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={13}
-              weight="bold"
-              className={`flex-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">
-              {group.detailLines.join(" · ")}
-            </span>
-          )}
-        </span>
-      </button>
-      {open &&
-        (group.calls.length === 1 ? (
-          <div className="ml-8 mt-1 space-y-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>
+  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>
+      </div>
+    );
+  }
+  return (
+    <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>
   );
 });