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

package/cloud-os/assets/thinking-spark.svg

@@ -0,0 +1,9 @@
+<svg preserveAspectRatio="none" overflow="visible" width="12.2369" height="12.2369" viewBox="0 0 12.2369 12.2369" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M5.18061 0.652963C5.50276 -0.217655 6.73415 -0.217654 7.05631 0.652964L7.64089 2.23277C8.04603 3.32764 8.90927 4.19089 10.0042 4.59603L11.584 5.18061C12.4546 5.50276 12.4546 6.73415 11.584 7.05631L10.0041 7.64089C8.90927 8.04603 8.04603 8.90927 7.64089 10.0042L7.05631 11.584C6.73415 12.4546 5.50276 12.4546 5.18061 11.584L4.59603 10.0041C4.19089 8.90927 3.32764 8.04603 2.23277 7.64089L0.652963 7.05631C-0.217655 6.73415 -0.217654 5.50276 0.652964 5.18061L2.23277 4.59603C3.32764 4.19089 4.19089 3.32764 4.59603 2.23277L5.18061 0.652963Z" fill="url(#thinking-spark-gradient)"/>
+  <defs>
+    <radialGradient id="thinking-spark-gradient" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(6.11846 2.11846) rotate(90) scale(12)">
+      <stop stop-color="#FF9938"/>
+      <stop offset="1" stop-color="#FFE46C"/>
+    </radialGradient>
+  </defs>
+</svg>

package/cloud-os/chat/cloud-os-chat-messages.tsx

@@ -33,7 +33,11 @@ import {
   SuggestionsBlock,
   type ApprovalDecision,
 } from "./rich-blocks";
-import { ThinkingTraceRow, ToolGroupRow } from "./tool-rows";
+import {
+  ToolGroupRow,
+  WorkDescriptionRow,
+  WorkTraceDisclosure,
+} from "./tool-rows";
 import { CloudOsActivityIndicator } from "./activity-indicator";
 import { ProductGeneration } from "./image-generation";
 import { GenerationLoader } from "./loading-state";
@@ -47,6 +51,7 @@ import {
   deriveTurnActivity,
   formatClockTime,
   formatFullTimestamp,
+  partitionAssistantBlocks,
   rhythmTopClass,
   type CloudOsEntry,
   type CloudOsActionPresentation,
@@ -103,6 +108,18 @@ export interface CloudOsChatMessagesProps {
   onCopy?: (text: string) => void;
 }
 
+export function collapseEntriesWithNewNarrative(
+  expanded: ReadonlySet<string>,
+  previousNarrativeKeys: ReadonlySet<string>,
+  narrativeKeys: ReadonlySet<string>,
+): ReadonlySet<string> {
+  const next = new Set(expanded);
+  for (const key of narrativeKeys) {
+    if (!previousNarrativeKeys.has(key)) next.delete(key);
+  }
+  return next.size === expanded.size ? expanded : next;
+}
+
 function useCopyAction(): {
   copied: string | null;
   copy: (text: string) => void;
@@ -311,6 +328,9 @@ export function CloudOsChatMessages({
   const [expandedToolCalls, setExpandedToolCalls] = useState<ReadonlySet<string>>(
     () => new Set(),
   );
+  const [expandedWorkEntries, setExpandedWorkEntries] = useState<
+    ReadonlySet<string>
+  >(() => new Set());
   const [expandedCompactions, setExpandedCompactions] = useState<
     ReadonlySet<string>
   >(() => new Set());
@@ -328,6 +348,31 @@ export function CloudOsChatMessages({
       }),
     [approvalIdOf, isActive, messages, showThinkingTraces],
   );
+  const narrativeEntryKeys = useMemo(
+    () =>
+      new Set(
+        entries.flatMap((entry) =>
+          entry.type === "assistant" &&
+            partitionAssistantBlocks(entry.blocks).content.some(
+              (block) => block.kind === "text",
+            )
+            ? [entry.key]
+            : [],
+        ),
+      ),
+    [entries],
+  );
+  const previousNarrativeEntryKeys = useRef<ReadonlySet<string>>(
+    narrativeEntryKeys,
+  );
+
+  useEffect(() => {
+    const previous = previousNarrativeEntryKeys.current;
+    previousNarrativeEntryKeys.current = narrativeEntryKeys;
+    setExpandedWorkEntries((expanded) =>
+      collapseEntriesWithNewNarrative(expanded, previous, narrativeEntryKeys),
+    );
+  }, [narrativeEntryKeys]);
 
   const entryTopClasses = useMemo(
     () =>
@@ -346,6 +391,15 @@ export function CloudOsChatMessages({
     });
   }, []);
 
+  const toggleWorkEntry = useCallback((key: string) => {
+    setExpandedWorkEntries((current) => {
+      const next = new Set(current);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      return next;
+    });
+  }, []);
+
   const toggleCompaction = useCallback((key: string) => {
     setExpandedCompactions((current) => {
       const next = new Set(current);
@@ -493,7 +547,7 @@ export function CloudOsChatMessages({
                     <span className="h-px flex-1 bg-kumo-line" aria-hidden="true" />
                   </div>
                   {expanded && (
-                    <div className="themed-surface-inset cos-markdown mt-3 rounded-2xl border border-kumo-line/70 bg-kumo-elevated/45 p-3.5 text-[13px] leading-[19px]">
+                    <div className="cos-markdown mt-3 rounded-2xl border border-kumo-line/70 bg-kumo-elevated/45 p-3.5 text-[13px] leading-[19px]">
                       <MarkdownMessage
                         message={entry.summary}
                         resolveUrl={resolveUrl}
@@ -504,24 +558,90 @@ export function CloudOsChatMessages({
               );
             }
 
-            const hasNarrative = entry.blocks.some(
+            const { work: workBlocks, content: contentBlocks } =
+              partitionAssistantBlocks(entry.blocks);
+            const workGroups = workBlocks.flatMap((block) =>
+              block.kind === "toolGroup" ? [block.group] : [],
+            );
+            const hasNarrative = contentBlocks.some(
               (block) => block.kind === "text",
             );
 
             return (
               <div
                 key={entry.key}
-                className={`${topClass} min-w-0 w-full max-w-[860px] space-y-2`}
+                className={`${topClass} min-w-0 w-full max-w-[860px]`}
               >
-                <div className="group/agentMessage relative space-y-1.5">
-                  {entry.blocks.map((block) => {
+                <div className="group/agentMessage relative space-y-4">
+                  {workBlocks.length > 0 && (
+                    <WorkTraceDisclosure
+                      durationMs={entry.durationMs}
+                      groups={workGroups}
+                      completed={!isActive}
+                      open={expandedWorkEntries.has(entry.key)}
+                      onToggle={() => toggleWorkEntry(entry.key)}
+                    >
+                      {workBlocks.map((block) => {
+                        switch (block.kind) {
+                          case "reasoning":
+                          case "text":
+                            return (
+                              <WorkDescriptionRow
+                                key={block.key}
+                                text={block.text}
+                                resolveUrl={resolveUrl}
+                              />
+                            );
+                          case "toolGroup":
+                            return (
+                              <ToolGroupRow
+                                key={block.key}
+                                group={block.group}
+                                open={expandedToolCalls.has(block.group.key)}
+                                expandedKeys={expandedToolCalls}
+                                onToggle={toggleToolCall}
+                              />
+                            );
+                          case "plan":
+                            return (
+                              <PlanBlock
+                                key={block.key}
+                                steps={block.steps}
+                                running={block.running}
+                                defaultOpen={false}
+                                showCollapsedSummary={false}
+                              />
+                            );
+                          case "parallel":
+                            return (
+                              <ParallelBlock
+                                key={block.key}
+                                label={block.label}
+                                tools={block.tools}
+                              />
+                            );
+                          case "subagents":
+                            return (
+                              <SubAgentsBlock
+                                key={block.key}
+                                agents={block.agents}
+                              />
+                            );
+                          default:
+                            return null;
+                        }
+                      })}
+                    </WorkTraceDisclosure>
+                  )}
+
+                  {contentBlocks.map((block) => {
                     switch (block.kind) {
                       case "reasoning":
                         return (
-                          <ThinkingTraceRow
+                          <WorkDescriptionRow
                             key={block.key}
-                            reasoning={block.text}
-                            running={block.running}
+                            text={block.text}
+                            resolveUrl={resolveUrl}
                           />
                         );
                       case "text": {

package/cloud-os/chat/markdown-message.tsx

@@ -1,3 +1,9 @@
+import {
+  TextMessagePartProvider,
+  useMessagePartText,
+  useSmooth,
+  type SmoothOptions,
+} from "@assistant-ui/react";
 import { memo, useMemo, type ReactNode } from "react";
 import {
   defaultRehypePlugins,
@@ -14,7 +20,10 @@ import {
 export type CloudOsUrlResolver = (url: string) => string | null | undefined;
 
 const ALLOWED_PROTOCOLS = new Set(["http:", "https:", "mailto:"]);
-const CJK_TEXT = /[\p{Script=Han}\p{Script=Hiragana}\p{Script=Katakana}\p{Script=Hangul}]/u;
+const SMOOTH_STREAMING = {
+  maxCharsPerFrame: 12,
+  minCommitMs: 32,
+} satisfies SmoothOptions;
 
 export function safeExternalUrl(href: string | undefined): string | undefined {
   if (!href) return undefined;
@@ -101,6 +110,20 @@ export const MarkdownMessage = memo(function MarkdownMessage({
   resolveUrl?: CloudOsUrlResolver;
   streaming?: boolean;
 }): ReactNode {
+  return (
+    <TextMessagePartProvider text={message} isRunning={streaming}>
+      <MarkdownMessageContent resolveUrl={resolveUrl} />
+    </TextMessagePartProvider>
+  );
+});
+
+function MarkdownMessageContent({
+  resolveUrl,
+}: {
+  resolveUrl?: CloudOsUrlResolver;
+}) {
+  const part = useSmooth(useMessagePartText(), SMOOTH_STREAMING);
+  const streaming = part.status.type === "running";
   const rehypePlugins = useMemo(
     () =>
       resolveUrl
@@ -110,13 +133,7 @@ export const MarkdownMessage = memo(function MarkdownMessage({
   );
   return (
     <Streamdown
-      animated={
-        streaming
-          ? CJK_TEXT.test(message)
-            ? { sep: "char", duration: 100, stagger: 5 }
-            : true
-          : false
-      }
+      animated={false}
       className="space-y-0"
       controls={false}
       mode={streaming ? "streaming" : "static"}
@@ -125,7 +142,7 @@ export const MarkdownMessage = memo(function MarkdownMessage({
       skipHtml
       components={DEFAULT_COMPONENTS}
     >
-      {message}
+      {part.text}
     </Streamdown>
   );
-});
+}

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>
   );
 });

package/cloud-os/chat/transcript-model.ts

@@ -27,6 +27,7 @@ export interface CloudOsMessageMetadata extends UnknownRecord {
   createdAt?: number;
   error?: string;
   interruptedByUser?: boolean;
+  turnId?: string;
   turnDurationMs?: number;
   turnStartedAt?: number;
   turnStatus?: string;
@@ -142,8 +143,10 @@ export type CloudOsEntry =
       type: "assistant";
       key: string;
       messageId: string;
+      turnId?: string;
       blocks: AssistantBlock[];
       copyText: string;
+      durationMs?: number;
       timestamp?: number;
       terminal?: { kind: "interrupted" | "error"; title: string; body?: string };
     };
@@ -167,6 +170,10 @@ function nonNegativeNumber(value: unknown): number | undefined {
     : undefined;
 }
 
+function nonEmptyString(value: unknown): string | undefined {
+  return typeof value === "string" && value.trim() ? value : undefined;
+}
+
 export function cloudOsMetadata(message: UIMessage): CloudOsMessageMetadata {
   return recordOf(message.metadata) as CloudOsMessageMetadata;
 }
@@ -221,6 +228,54 @@ export function formatFullTimestamp(timestamp: number): string {
   });
 }
 
+function turnDuration(metadata: CloudOsMessageMetadata): number | undefined {
+  const explicit = nonNegativeNumber(metadata.turnDurationMs);
+  if (explicit !== undefined) return explicit;
+  const startedAt = nonNegativeNumber(metadata.turnStartedAt);
+  const completedAt = nonNegativeNumber(metadata.completedAt);
+  return startedAt !== undefined && completedAt !== undefined
+    ? Math.max(0, completedAt - startedAt)
+    : undefined;
+}
+
+function isWorkBlock(block: AssistantBlock): boolean {
+  return (
+    block.kind === "reasoning" ||
+    block.kind === "toolGroup" ||
+    block.kind === "plan" ||
+    block.kind === "parallel" ||
+    block.kind === "subagents"
+  );
+}
+
+/**
+ * 把一条 assistant 消息拆成可折叠的工作过程与始终可见的最终内容。
+ * 最后一段工作之前的 text 是过程旁白；最后一次工作之后的 text 才是正文。
+ */
+export function partitionAssistantBlocks(blocks: readonly AssistantBlock[]): {
+  work: AssistantBlock[];
+  content: AssistantBlock[];
+} {
+  let lastWorkIndex = -1;
+  blocks.forEach((block, index) => {
+    if (isWorkBlock(block)) lastWorkIndex = index;
+  });
+
+  const work: AssistantBlock[] = [];
+  const content: AssistantBlock[] = [];
+  blocks.forEach((block, index) => {
+    if (
+      isWorkBlock(block) ||
+      (block.kind === "text" && index < lastWorkIndex)
+    ) {
+      work.push(block);
+    } else {
+      content.push(block);
+    }
+  });
+  return { work, content };
+}
+
 function toolNameOf(part: unknown): string | null {
   const type = String(recordOf(part).type ?? "");
   if (type === "dynamic-tool") {
@@ -620,6 +675,9 @@ export function buildCloudOsEntries({
     }
     return -1;
   })();
+  const activeTurnId = isActive && lastAssistantIndex >= 0
+    ? nonEmptyString(cloudOsMetadata(messages[lastAssistantIndex]!).turnId)
+    : undefined;
 
   messages.forEach((message, index) => {
     if (message.role === "system") return;
@@ -674,8 +732,10 @@ export function buildCloudOsEntries({
       type: "assistant",
       key: `assistant-${message.id}-${index}`,
       messageId: message.id,
+      turnId: nonEmptyString(metadata.turnId),
       blocks,
       copyText: messageText(message),
+      durationMs: turnDuration(metadata),
       timestamp:
         nonNegativeNumber(metadata.completedAt) ??
         nonNegativeNumber(metadata.createdAt),
@@ -683,7 +743,54 @@ export function buildCloudOsEntries({
     });
   });
 
-  return dropSupersededActionPresentations(dropSupersededPlans(entries));
+  return aggregateCompletedTurnWork(
+    dropSupersededActionPresentations(dropSupersededPlans(entries)),
+    activeTurnId,
+  );
+}
+
+/** Collapse every completed Turn's assistant segments into one display entry. */
+function aggregateCompletedTurnWork(
+  entries: CloudOsEntry[],
+  activeTurnId: string | undefined,
+): CloudOsEntry[] {
+  const indexesByTurn = new Map<string, number[]>();
+  entries.forEach((entry, index) => {
+    if (entry.type !== "assistant" || !entry.turnId) return;
+    const indexes = indexesByTurn.get(entry.turnId) ?? [];
+    indexes.push(index);
+    indexesByTurn.set(entry.turnId, indexes);
+  });
+
+  const hidden = new Set<number>();
+  const replacements = new Map<number, CloudOsEntry>();
+  for (const [turnId, indexes] of indexesByTurn) {
+    if (turnId === activeTurnId || indexes.length < 2) continue;
+    const assistantEntries = indexes.map(
+      (index) => entries[index] as Extract<CloudOsEntry, { type: "assistant" }>,
+    );
+    const anchorIndex = indexes[indexes.length - 1]!;
+    const anchor = assistantEntries[assistantEntries.length - 1]!;
+    const durations = assistantEntries.flatMap((entry) =>
+      entry.durationMs === undefined ? [] : [entry.durationMs]
+    );
+    const timestamps = assistantEntries.flatMap((entry) =>
+      entry.timestamp === undefined ? [] : [entry.timestamp]
+    );
+
+    indexes.slice(0, -1).forEach((index) => hidden.add(index));
+    replacements.set(anchorIndex, {
+      ...anchor,
+      key: `assistant-turn-${turnId}`,
+      blocks: assistantEntries.flatMap((entry) => entry.blocks),
+      ...(durations.length > 0 ? { durationMs: Math.max(...durations) } : {}),
+      ...(timestamps.length > 0 ? { timestamp: Math.max(...timestamps) } : {}),
+    });
+  }
+
+  return entries.flatMap((entry, index) =>
+    hidden.has(index) ? [] : [replacements.get(index) ?? entry]
+  );
 }
 
 function dropSupersededActionPresentations(entries: CloudOsEntry[]): CloudOsEntry[] {

package/cloud-os/index.ts

@@ -65,8 +65,12 @@ export type { CloudOsUrlResolver } from "./chat/markdown-message";
 export {
   ThinkingTraceRow,
   ToolCallDetails,
+  ToolGroupDetails,
   ToolGroupRow,
+  WorkDescriptionRow,
   WorkIcon,
+  WorkTraceDisclosure,
+  formatWorkDuration,
 } from "./chat/tool-rows";
 export {
   ApprovalBlock,
@@ -91,6 +95,7 @@ export {
   formatClockTime,
   formatFullTimestamp,
   messageText,
+  partitionAssistantBlocks,
   requestedCapabilitiesOf,
   rhythmTopClass,
 } from "./chat/transcript-model";

package/cloud-os/styles/cloud-os.css

@@ -51,6 +51,8 @@
   --color-kumo-success: oklch(72.3% 0.219 149.579);
   --color-kumo-success-tint: oklch(92% 0.08 150);
 
+  --color-operation-base: #ffffff;
+
   --color-kumo-tip-shadow: #14111014;
   --color-kumo-tip-stroke: transparent;
 
@@ -73,6 +75,10 @@
   --color-cos-status-live: oklch(72.3% 0.219 149.579);
   --color-cos-status-draft: oklch(68.1% 0.162 75.834);
   --color-cos-status-building: oklch(62.3% 0.214 259.815);
+  --text-color-cos-work-description: rgba(0, 0, 0, 0.5);
+  --text-color-cos-work-description-subtle: rgba(0, 0, 0, 0.7);
+  --text-color-cos-tool-group: rgba(0, 0, 0, 0.5);
+  --text-color-cos-output: #000000b3;
 }
 
 /* ── 作用域根:通用 token 只在 cloud-os 子树内生效 ─────────────────────────── */
@@ -152,6 +158,8 @@
   --color-kumo-success: oklch(52.7% 0.154 150.069);
   --color-kumo-success-tint: oklch(0.25 0.06 150.069);
 
+  --color-operation-base: var(--color-kumo-base);
+
   --color-kumo-tip-shadow: #00000066;
   --color-kumo-tip-stroke: oklch(0.34 0.022 285);
 
@@ -172,6 +180,10 @@
   --color-cos-status-live: oklch(79.2% 0.209 151.711);
   --color-cos-status-draft: oklch(82.8% 0.189 84.429);
   --color-cos-status-building: oklch(74% 0.16 250);
+  --text-color-cos-work-description: var(--text-color-kumo-subtle);
+  --text-color-cos-work-description-subtle: var(--text-color-kumo-subtle);
+  --text-color-cos-tool-group: var(--text-color-kumo-inactive);
+  --text-color-cos-output: var(--text-color-kumo-subtle);
 
   --color-selection-bg: color-mix(in srgb, var(--color-kumo-brand) 28%, transparent);
   --color-selection-text: oklch(0.97 0.006 285);

package/demo/chat-scenarios.ts

@@ -18,6 +18,7 @@ export interface ComposerCommandLike {
 }
 const demoCompletedAt = Date.now() - 1_000;
 const demoTurnStartedAt = demoCompletedAt - 18_000;
+const demoTurnId = "camel-demo-research-turn";
 export const defaultPrompt =
   "请调研 2026 年 AI Agent 产品的交互趋势，并给出可落地的消息 UI 建议。";
 export const demoModels = [
@@ -744,7 +745,7 @@ const commandMessages = [
 const runningWork = {
   id: "camel-demo-running-work",
   role: "assistant",
-  metadata: { turnStartedAt: demoTurnStartedAt },
+  metadata: { turnId: demoTurnId, turnStartedAt: demoTurnStartedAt },
   parts: [
     {
       type: "reasoning",
@@ -771,7 +772,7 @@ const runningWork = {
 const completedResearch = {
   id: "camel-demo-completed-research",
   role: "assistant",
-  metadata: { turnStartedAt: demoTurnStartedAt },
+  metadata: { turnId: demoTurnId, turnStartedAt: demoTurnStartedAt },
   parts: [
     {
       type: "reasoning",
@@ -806,6 +807,7 @@ const completedResearch = {
 const completedSynthesis = {
   id: "camel-demo-completed-synthesis",
   role: "assistant",
+  metadata: { turnId: demoTurnId },
   parts: [
     {
       type: "tool-update_plan",
@@ -837,6 +839,7 @@ const completedSynthesis = {
 const approvalRequest = {
   id: "camel-demo-approval-request",
   role: "assistant",
+  metadata: { turnId: demoTurnId },
   parts: [
     {
       type: "tool-write_file",
@@ -852,6 +855,7 @@ const approvalRequest = {
 const collectedAnswer = {
   id: "camel-demo-collected-answer",
   role: "assistant",
+  metadata: { turnId: demoTurnId },
   parts: [
     {
       type: "text",
@@ -868,6 +872,7 @@ const finalAnswer = {
   id: "camel-demo-final-answer",
   role: "assistant",
   metadata: {
+    turnId: demoTurnId,
     createdAt: demoCompletedAt,
     completedAt: demoCompletedAt,
     turnDurationMs: 18_000,
@@ -936,6 +941,7 @@ const interruptedByUser = {
   id: "camel-demo-interrupted",
   role: "assistant",
   metadata: {
+    turnId: demoTurnId,
     createdAt: demoCompletedAt,
     completedAt: demoCompletedAt + 2_000,
     turnDurationMs: 2_000,
@@ -965,7 +971,7 @@ const compactSummary = {
 const failedWork = {
   id: "camel-demo-failed-work",
   role: "assistant",
-  metadata: { turnStartedAt: demoTurnStartedAt },
+  metadata: { turnId: demoTurnId, turnStartedAt: demoTurnStartedAt },
   parts: [
     ...completedResearch.parts,
     {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@springbrand/message-panel",
-  "version": "0.1.3-alpha.24",
+  "version": "0.1.3-alpha.25",
   "type": "module",
   "files": [
     "src",