@springbrand/message-panel 0.1.3-alpha.23 → 0.1.3-alpha.25

package/cloud-os/chat/rich-blocks.tsx

@@ -4,6 +4,7 @@ import {
   Bell,
   CaretRight,
   Check,
+  CheckCircle,
   CircleNotch,
   Clock,
   Key,
@@ -32,7 +33,7 @@ import {
  * UIMessage 协议里存在、gadgets 那套没有的几类 part —— 计划快照、原位提问、
  * 后续建议、定时任务、并行/子 Agent、原位授权。视觉语言全部沿用 cloud-os:
  * 折叠工作行用 `px-1.5 py-1` 的行式布局,卡片用
- * `themed-surface-inset rounded-2xl border-kumo-line/70 bg-kumo-elevated/45 p-3`,
+ * `rounded-2xl border-kumo-line/70 bg-kumo-elevated/45 p-3`,
  * 授权卡沿用 renderActionCard 的 blocking callout(brand/40 边 + brand/10 底)。
  */
 
@@ -41,13 +42,17 @@ import {
 export function PlanBlock({
   steps,
   running,
+  defaultOpen = true,
+  showCollapsedSummary = true,
 }: {
   steps: PlanStep[];
   running: boolean;
+  defaultOpen?: boolean;
+  showCollapsedSummary?: boolean;
 }) {
   const done = steps.filter((step) => step.status === "done").length;
   const current = steps.find((step) => step.status === "in_progress");
-  const [open, setOpen] = useState(true);
+  const [open, setOpen] = useState(defaultOpen);
 
   return (
     <div className="group -ml-0.5">
@@ -71,7 +76,7 @@ export function PlanBlock({
               className={`flex-shrink-0 text-kumo-inactive transition-transform duration-150 ease-out ${open ? "rotate-90" : ""}`}
             />
           </span>
-          {!open && current && (
+          {!open && showCollapsedSummary && current && (
             <span className="mt-1 block truncate font-mono text-[12px] leading-4 text-kumo-inactive">
               {current.text}
             </span>
@@ -79,35 +84,34 @@ export function PlanBlock({
         </span>
       </button>
       {open && (
-        <div className="themed-surface-inset ml-8 mt-1 space-y-1.5 rounded-2xl border border-kumo-line/70 bg-kumo-elevated/45 p-3">
+        <div className="ml-8 mt-1 flex flex-col gap-2 rounded-xl border border-kumo-line bg-[rgba(0,0,0,0.03)] px-4 py-3">
           {steps.map((step, index) => (
             <div
               key={`${step.text}-${index}`}
-              className="flex items-start gap-2.5 text-[13px] leading-[19px] tracking-[-0.25px]"
+              className="flex items-center gap-2 text-[14px] leading-[1.4] font-normal tracking-normal"
             >
               <span
-                className="mt-0.5 flex h-4 w-4 flex-shrink-0 items-center justify-center"
+                className="flex size-4 flex-shrink-0 items-center justify-center"
                 aria-hidden="true"
               >
                 {step.status === "done" ? (
-                  <Check size={12} weight="bold" className="text-kumo-success" />
+                  <CheckCircle size={16} weight="fill" className="text-[#00bf75]" />
                 ) : step.status === "in_progress" ? (
                   <CircleNotch
-                    size={12}
-                    weight="bold"
-                    className="animate-spin text-kumo-brand motion-reduce:animate-none"
+                    size={16}
+                    className="animate-spin text-[#ff9938] motion-reduce:animate-none"
                   />
                 ) : (
-                  <span className="h-1.5 w-1.5 rounded-full bg-kumo-fill" />
+                  <span className="h-1.5 w-1.5 rounded-full bg-[color:var(--text-color-kumo-default)] opacity-20" />
                 )}
               </span>
               <span
                 className={
                   step.status === "done"
-                    ? "min-w-0 flex-1 text-kumo-inactive line-through"
+                    ? "min-w-0 flex-1 text-kumo-default/30 line-through"
                     : step.status === "in_progress"
-                      ? "min-w-0 flex-1 font-medium text-kumo-default"
-                      : "min-w-0 flex-1 text-kumo-subtle"
+                      ? "min-w-0 flex-1 text-kumo-default"
+                      : "min-w-0 flex-1 text-kumo-default/70"
                 }
               >
                 {step.text}
@@ -255,7 +259,7 @@ export function AskUserBlock({
       data-part-type="ask_user"
       data-state={outcome.kind === "answered" ? "submitted" : outcome.kind}
     >
-      <div className="flex flex-col gap-3 rounded-xl border border-kumo-line bg-kumo-base px-3 py-2.5">
+      <div className="flex flex-col gap-3 rounded-xl border border-kumo-line bg-operation-base px-3 py-2.5">
         {outcome.kind === "pending" ? (
           <>
             {questions.length > 1 && (
@@ -308,7 +312,7 @@ export function AskUserBlock({
                               } ${
                                 selected
                                   ? "border-kumo-brand/45 bg-kumo-brand/10 text-kumo-default"
-                                  : "border-kumo-line bg-kumo-base"
+                                  : "border-kumo-line bg-operation-base"
                               }`}
                             >
                               <input
@@ -543,7 +547,7 @@ export function ScheduleConfirmation({
     <section
       data-slot="schedule-card"
       aria-label={`Confirm scheduled task: ${name}`}
-      className="themed-surface-inset flex w-full max-w-sm flex-col gap-3 rounded-2xl border border-kumo-line/70 bg-kumo-elevated p-4 text-kumo-default shadow-[0_1px_2px_rgba(0,0,0,0.04),0_12px_32px_-16px_rgba(0,0,0,0.12)]"
+      className="flex w-full max-w-sm flex-col gap-3 rounded-2xl border border-kumo-line/70 bg-operation-base p-4 text-kumo-default shadow-[0_1px_2px_rgba(0,0,0,0.04),0_12px_32px_-16px_rgba(0,0,0,0.12)]"
     >
       <div className="flex items-center gap-2.5">
         <span
@@ -607,7 +611,7 @@ export function ScheduleBlock({
               "aria-label": `Open scheduled task: ${String(call.input.label ?? call.input.title ?? "Scheduled task")}`,
             }
           : {})}
-        className={`w-full rounded-2xl border border-kumo-line bg-kumo-base px-4 py-3 text-left${
+        className={`w-full rounded-2xl border border-kumo-line bg-operation-base px-4 py-3 text-left${
           clickable
             ? " cursor-pointer transition-colors duration-150 ease-out hover:bg-kumo-tint focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-kumo-brand/50"
             : ""
@@ -685,7 +689,7 @@ export function PermissionGrant({
   return (
     <section
       aria-label={ariaLabel}
-      className="themed-surface-inset w-full rounded-xl border border-kumo-line bg-kumo-elevated p-4 text-kumo-default"
+      className="w-full rounded-xl border border-kumo-line bg-operation-base p-4 text-kumo-default"
     >
       <div className="flex items-center gap-2">
         <span
@@ -814,67 +818,93 @@ export function ParallelBlock({
   tools: ParallelTool[];
 }) {
   const done = tools.filter((tool) => tool.status === "done").length;
+  const [open, setOpen] = useState(false);
   return (
     <div className="max-w-[860px]">
-      <div className="flex items-center gap-3 px-1.5 py-1 text-[14px] leading-5 tracking-[-0.25px] text-kumo-subtle">
+      <button
+        type="button"
+        onClick={() => setOpen((value) => !value)}
+        className="flex cursor-pointer items-center gap-3 px-1.5 py-1 text-[14px] leading-5 tracking-[-0.25px] text-kumo-subtle transition-colors duration-150 ease-out hover:text-kumo-default focus-visible:text-kumo-default focus-visible:outline-none"
+        aria-expanded={open}
+      >
         <span className="flex h-5 w-5 flex-shrink-0 items-center justify-center">
           <WorkIcon Icon={ListChecks} />
         </span>
         <span className="min-w-0 truncate">
           {label} · {done}/{tools.length}
         </span>
-      </div>
-      <div className="ml-8 mt-1 space-y-1">
-        {tools.map((tool, index) => (
-          <div
-            key={`${tool.label}-${index}`}
-            className="flex items-center gap-2 px-1.5 text-[13px] leading-[19px] tracking-[-0.25px] text-kumo-subtle"
-          >
-            <StatusDot status={tool.status} />
-            <span className="min-w-0 flex-1 truncate">{tool.label}</span>
-            {tool.meta && (
-              <span className="flex-shrink-0 font-mono text-[11px] leading-4 text-kumo-inactive">
-                {tool.meta}
-              </span>
-            )}
-          </div>
-        ))}
-      </div>
+        <CaretRight
+          size={13}
+          weight="bold"
+          className={`flex-shrink-0 text-kumo-inactive transition-transform duration-150 ease-out ${open ? "rotate-90" : ""}`}
+        />
+      </button>
+      {open && (
+        <div className="ml-8 mt-1 space-y-1">
+          {tools.map((tool, index) => (
+            <div
+              key={`${tool.label}-${index}`}
+              className="flex items-center gap-2 px-1.5 text-[13px] leading-[19px] tracking-[-0.25px] text-kumo-subtle"
+            >
+              <StatusDot status={tool.status} />
+              <span className="min-w-0 flex-1 truncate">{tool.label}</span>
+              {tool.meta && (
+                <span className="flex-shrink-0 font-mono text-[11px] leading-4 text-kumo-inactive">
+                  {tool.meta}
+                </span>
+              )}
+            </div>
+          ))}
+        </div>
+      )}
     </div>
   );
 }
 
 export function SubAgentsBlock({ agents }: { agents: SubAgentView[] }) {
+  const [open, setOpen] = useState(false);
   return (
     <div className="max-w-[860px]">
-      <div className="flex items-center gap-3 px-1.5 py-1 text-[14px] leading-5 tracking-[-0.25px] text-kumo-subtle">
+      <button
+        type="button"
+        onClick={() => setOpen((value) => !value)}
+        className="flex cursor-pointer items-center gap-3 px-1.5 py-1 text-[14px] leading-5 tracking-[-0.25px] text-kumo-subtle transition-colors duration-150 ease-out hover:text-kumo-default focus-visible:text-kumo-default focus-visible:outline-none"
+        aria-expanded={open}
+      >
         <span className="flex h-5 w-5 flex-shrink-0 items-center justify-center">
           <WorkIcon Icon={UsersThree} />
         </span>
         <span className="min-w-0 truncate">
           {agents.length === 1 ? "Sub-agent" : `${agents.length} sub-agents`}
         </span>
-      </div>
-      <div className="ml-8 mt-1 space-y-1">
-        {agents.map((agent, index) => (
-          <div
-            key={`${agent.name}-${index}`}
-            className="flex items-start gap-2 px-1.5 text-[13px] leading-[19px] tracking-[-0.25px]"
-          >
-            <span className="mt-1.5 flex">
-              <StatusDot status={agent.status} />
-            </span>
-            <span className="min-w-0 flex-1">
-              <span className="block truncate font-medium text-kumo-default">
-                {agent.name}
+        <CaretRight
+          size={13}
+          weight="bold"
+          className={`flex-shrink-0 text-kumo-inactive transition-transform duration-150 ease-out ${open ? "rotate-90" : ""}`}
+        />
+      </button>
+      {open && (
+        <div className="ml-8 mt-1 space-y-1">
+          {agents.map((agent, index) => (
+            <div
+              key={`${agent.name}-${index}`}
+              className="flex items-start gap-2 px-1.5 text-[13px] leading-[19px] tracking-[-0.25px]"
+            >
+              <span className="mt-1.5 flex">
+                <StatusDot status={agent.status} />
               </span>
-              {agent.summary && (
-                <span className="block text-kumo-subtle">{agent.summary}</span>
-              )}
-            </span>
-          </div>
-        ))}
-      </div>
+              <span className="min-w-0 flex-1">
+                <span className="block truncate font-medium text-kumo-default">
+                  {agent.name}
+                </span>
+                {agent.summary && (
+                  <span className="block text-kumo-subtle">{agent.summary}</span>
+                )}
+              </span>
+            </div>
+          ))}
+        </div>
+      )}
     </div>
   );
 }

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

@@ -1,6 +1,10 @@
 import { Atom, CaretDown, CaretRight, Copy } from "@phosphor-icons/react";
-import { memo, useId, useState } from "react";
-import { MarkdownMessage } from "./markdown-message";
+import { motion, useReducedMotion } from "motion/react";
+import { memo, useId, useState, type ReactNode } from "react";
+import {
+  MarkdownMessage,
+  type CloudOsUrlResolver,
+} from "./markdown-message";
 import {
   getToolCallSummary,
   getToolIcon,
@@ -10,6 +14,11 @@ import {
   type ToolCallGroup,
 } from "./tool-presentation";
 
+const thinkingSpark = new URL(
+  "../assets/thinking-spark.svg",
+  import.meta.url,
+).href;
+
 /**
  * 工作行(work rows): WorkIcon / ToolCallDetails / NestedToolCallRow /
  * ToolGroupRow / ThinkingTraceRow。渲染 UIMessage 归一化后的 CloudOsToolCall。
@@ -34,26 +43,74 @@ function displayOutput(value: unknown, fallback: string): string {
   return displayValue(record);
 }
 
-function OutputPre({ value }: { value: string }) {
+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-kumo-line/70 bg-kumo-elevated/45 px-4 py-3 text-kumo-subtle"
+      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(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"
+          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>
-      <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 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>
   );
 }
@@ -63,22 +120,15 @@ 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>
-  );
+  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({
@@ -184,6 +234,172 @@ export const ThinkingTraceRow = memo(function ThinkingTraceRow({
   );
 });
 
+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>
+  );
+});
+
 export const ToolGroupRow = memo(function ToolGroupRow({
   group,
   open,
@@ -195,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" : ""}`}
             >
@@ -219,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="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>
-        ))}
+      {open && (
+        <div className="mt-3 pl-6">
+          <ToolGroupDetails calls={group.calls} />
+        </div>
+      )}
     </div>
   );
 });