@springbrand/message-panel 0.1.3-alpha.9 → 0.2.0-alpha.37

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,
     )
   ) {
@@ -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,
@@ -328,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": {
@@ -498,7 +491,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,读起来就是「点了没反应」。
@@ -508,7 +501,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 {
@@ -516,14 +516,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,9 +1,11 @@
-import { CaretRight } from "@phosphor-icons/react";
-import { memo } 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,
@@ -11,31 +13,53 @@ import {
   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)。整块从 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;
-  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>
-    </>
-  );
+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 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({
@@ -43,38 +67,13 @@ 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>
+    <ToolCall
+      {...toolCallView(tc)}
+      running={tc.running}
+      open
+      onOpenChange={() => undefined}
+    />
   );
 });
 
@@ -87,58 +86,117 @@ export const NestedToolCallRow = memo(function NestedToolCallRow({
   open: boolean;
   onToggle: (key: string) => void;
 }) {
+  if (tc.kind === "web-search" && !tc.failed) {
+    return <WebSearchToolCall toolCall={tc} />;
+  }
+
+  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"
+      >
+        <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}`;
-  const summary = getToolCallSummary(tc);
-  const label = `${summary.verb}${summary.target ? ` ${summary.target}` : ""}`;
-  const Icon = getToolIcon(tc.kind);
+  return (
+    <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,
+  running,
+}: {
+  reasoning: string;
+  running: boolean;
+}) {
+  const [open, setOpen] = useState(false);
+  const contentId = useId();
+  const summary = reasoning.replace(/\s+/g, " ").trim();
 
   return (
-    <div className="group/nested">
+    <div
+      className="flex min-w-0 flex-col items-start gap-2"
+      data-thinking-trace=""
+      data-state={open ? "open" : "closed"}
+    >
       <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]"
+        onClick={() => setOpen((current) => !current)}
+        className={`${DISCLOSURE_TITLE_WITH_ICON} group w-fit max-w-[80%]`}
         aria-expanded={open}
+        aria-controls={contentId}
       >
-        <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 className={DISCLOSURE_ICON} aria-hidden="true">
+          <img
+            src={thinkingStar}
+            alt=""
+            className={`size-[12.2369px] ${running ? "cos-thinking-star" : ""}`}
           />
         </span>
+        <span className="flex-shrink-0">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 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={tc} />
+        <div
+          id={contentId}
+          className="cos-markdown w-full px-4 text-[14px] leading-[1.4] text-kumo-default/70"
+        >
+          <MarkdownMessage message={reasoning} />
         </div>
       )}
     </div>
   );
 });
 
-export const ThinkingTraceRow = memo(function ThinkingTraceRow({
-  reasoning,
-}: {
-  reasoning: string;
-}) {
-  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>
-  );
-});
+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,
@@ -151,63 +209,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="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>
+  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>
   );
 });