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

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

@@ -1,4 +1,5 @@
 import type { UIMessage } from "ai";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
 import {
   ArrowDown,
   Brain,
@@ -17,6 +18,11 @@ import {
   type ReactNode,
 } from "react";
 import { Tooltip } from "../primitives/tooltip";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "../primitives/collapsible";
 import { WorkshopIconButton } from "../primitives/workshop-controls";
 import {
   MarkdownMessage,
@@ -34,11 +40,8 @@ import {
   SuggestionsBlock,
   type ApprovalDecision,
 } from "./rich-blocks";
-import {
-  ToolGroupRow,
-  WorkDescriptionRow,
-  WorkTraceDisclosure,
-} from "./tool-rows";
+import { ThinkingTraceRow, ToolGroupRow } from "./tool-rows";
+import { collapsePanel } from "./surfaces";
 import { CloudOsActivityIndicator } from "./activity-indicator";
 import { ProductGeneration } from "./image-generation";
 import { GenerationLoader } from "./loading-state";
@@ -52,14 +55,11 @@ import {
   deriveTurnActivity,
   formatClockTime,
   formatFullTimestamp,
-  partitionAssistantBlocks,
   rhythmTopClass,
+  type AssistantBlock,
   type CloudOsEntry,
   type CloudOsActionPresentation,
 } from "./transcript-model";
-import { useDisclosureExpandedKeys } from "./use-lifecycle-disclosure";
-
-const NO_RUNNING_DISCLOSURES: ReadonlySet<string> = new Set();
 
 export type CloudOsChatStatus = "ready" | "submitted" | "streaming" | "error";
 
@@ -69,6 +69,8 @@ export interface CloudOsChatMessagesProps {
   /** 权威 Turn 生命周期;提供时替代本地 status 推断。 */
   turnActive?: boolean;
   isRecovering?: boolean;
+  recoveryAttempt?: number;
+  recoveryMax?: number;
   recoveryStatusLabel?: string;
   awaitingApproval?: boolean;
   /** 有 pending steer 时,活动占位说明「正在等当前步骤收尾」。 */
@@ -192,7 +194,10 @@ function UserBubble({
         </div>
       )}
       {entry.text && (
-        <div className="themed-user-bubble-shadow cos-markdown cos-user-markdown w-fit max-w-[min(680px,78%)] rounded-[12px] border border-transparent bg-kumo-bubble-user px-4 py-2.5 text-[14px] leading-[22px] tracking-[-0.25px] text-kumo-default">
+        <div
+          data-user-message-bubble=""
+          className="themed-user-bubble-shadow cos-markdown cos-user-markdown w-fit max-w-[min(680px,78%)] rounded-[12px] border border-transparent bg-kumo-bubble-user px-4 py-2.5 text-[14px] leading-[22px] tracking-[-0.25px] text-kumo-default animate-in fade-in slide-in-from-bottom-1 duration-300 motion-reduce:animate-none"
+        >
           <MarkdownMessage
             message={entry.text}
             resolveUrl={resolveUrl}
@@ -323,11 +328,49 @@ function ActionPresentationBlock({
   );
 }
 
+function TurnWorkDisclosure({
+  running,
+  open,
+  onOpenChange,
+  children,
+}: {
+  running: boolean;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  children: ReactNode;
+}) {
+  return (
+    <Collapsible
+      data-slot="turn-work-disclosure"
+      open={open}
+      onOpenChange={onOpenChange}
+    >
+      <CollapsibleTrigger
+        aria-disabled={running}
+        className="group/trigger flex items-center gap-1.5 rounded-md py-1 text-[13.5px] text-kumo-inactive transition-colors outline-none hover:text-kumo-subtle"
+      >
+        <CaretRight
+          size={14}
+          className="shrink-0 transition-transform duration-200 group-data-open/trigger:rotate-90 group-data-panel-open/trigger:rotate-90 motion-reduce:transition-none"
+        />
+        <span>{running ? "Working…" : "Work"}</span>
+      </CollapsibleTrigger>
+      <CollapsibleContent className={collapsePanel}>
+        <div className="cos-trace-chain relative space-y-4 pt-2">
+          {children}
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}
+
 export function CloudOsChatMessages({
   messages,
   status,
   turnActive,
   isRecovering = false,
+  recoveryAttempt,
+  recoveryMax,
   recoveryStatusLabel,
   awaitingApproval = false,
   hasPendingSteer = false,
@@ -353,6 +396,16 @@ export function CloudOsChatMessages({
   const scrollRef = useRef<HTMLDivElement>(null);
   const endRef = useRef<HTMLDivElement>(null);
   const [showScrollButton, setShowScrollButton] = useState(false);
+  const reducedMotion = useReducedMotion();
+  const [expandedToolCalls, setExpandedToolCalls] = useState<ReadonlySet<string>>(
+    () => new Set(),
+  );
+  const [expandedTurnWork, setExpandedTurnWork] = useState<ReadonlySet<string>>(
+    () => new Set(),
+  );
+  const [expandedCompactions, setExpandedCompactions] = useState<
+    ReadonlySet<string>
+  >(() => new Set());
   const { copied, copy } = useCopyAction();
   const isActive =
     turnActive ?? (status === "submitted" || status === "streaming");
@@ -367,74 +420,20 @@ export function CloudOsChatMessages({
       }),
     [approvalIdOf, isActive, messages, showThinkingTraces],
   );
-  const workEntryKeys = useMemo(
-    () =>
-      new Set(
-        entries.flatMap((entry) =>
-          entry.type === "assistant" &&
-            partitionAssistantBlocks(entry.blocks).work.length > 0
-            ? [entry.key]
-            : [],
-        ),
-      ),
-    [entries],
-  );
-  const runningWorkEntryKeys = useMemo(() => {
-    const keys = new Set<string>();
-    if (!isActive) return keys;
-    const entry = entries.findLast(
-      (candidate) => candidate.type === "assistant",
-    );
-    if (entry?.type !== "assistant") return keys;
-    const { work, content } = partitionAssistantBlocks(entry.blocks);
-    if (work.length > 0 && !content.some((block) => block.kind === "text")) {
-      keys.add(entry.key);
-    }
-    return keys;
-  }, [entries, isActive]);
-  const toolCallKeys = useMemo(
-    () =>
-      new Set(
-        entries.flatMap((entry) =>
-          entry.type === "assistant"
-            ? entry.blocks.flatMap((block) =>
-                block.kind === "toolGroup" ? [block.group.key] : [],
-              )
-            : [],
-        ),
-      ),
-    [entries],
-  );
-  const runningToolCallKeys = useMemo(
-    () =>
-      new Set(
-        entries.flatMap((entry) =>
-          entry.type === "assistant" && runningWorkEntryKeys.has(entry.key)
-            ? entry.blocks.flatMap((block) =>
-                block.kind === "toolGroup" && block.group.hasRunning
-                  ? [block.group.key]
-                  : [],
-              )
-            : [],
-        ),
-    ),
-    [entries, runningWorkEntryKeys],
+  const latestUserIndex = entries.findLastIndex((entry) => entry.type === "user");
+  const activeTurnEntry = isActive
+    ? entries.findLast(
+      (entry, index): entry is Extract<CloudOsEntry, { type: "assistant" }> =>
+        index > latestUserIndex && entry.type === "assistant",
+    )
+    : undefined;
+  const currentPlan = activeTurnEntry?.blocks.findLast(
+    (block): block is Extract<AssistantBlock, { kind: "plan" }> =>
+      block.kind === "plan",
   );
-  const compactionKeys = useMemo(
-    () =>
-      new Set(
-        entries.flatMap((entry) =>
-          entry.type === "compactionBoundary" ? [entry.key] : [],
-        ),
-      ),
-    [entries],
-  );
-  const [expandedToolCalls, toggleToolCall] =
-    useDisclosureExpandedKeys(toolCallKeys, runningToolCallKeys);
-  const [expandedWorkEntries, toggleWorkEntry] =
-    useDisclosureExpandedKeys(workEntryKeys, runningWorkEntryKeys);
-  const [expandedCompactions, toggleCompaction] =
-    useDisclosureExpandedKeys(compactionKeys, NO_RUNNING_DISCLOSURES);
+  const completedPlanSteps = currentPlan?.steps.filter(
+    (step) => step.status === "done",
+  ).length ?? 0;
 
   const entryTopClasses = useMemo(
     () =>
@@ -444,6 +443,33 @@ export function CloudOsChatMessages({
     [entries],
   );
 
+  const toggleToolCall = useCallback((key: string) => {
+    setExpandedToolCalls((current) => {
+      const next = new Set(current);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      return next;
+    });
+  }, []);
+
+  const setTurnWorkOpen = useCallback((key: string, open: boolean) => {
+    setExpandedTurnWork((current) => {
+      const next = new Set(current);
+      if (open) next.add(key);
+      else next.delete(key);
+      return next;
+    });
+  }, []);
+
+  const toggleCompaction = useCallback((key: string) => {
+    setExpandedCompactions((current) => {
+      const next = new Set(current);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      return next;
+    });
+  }, []);
+
   const syncScrollButton = useCallback(() => {
     const element = scrollRef.current;
     if (!element) return;
@@ -461,6 +487,8 @@ export function CloudOsChatMessages({
   const activity = deriveTurnActivity(entries, {
     isActive,
     isRecovering,
+    recoveryAttempt,
+    recoveryMax,
     recoveryStatusLabel,
     awaitingApproval,
     hasPendingSteer,
@@ -477,14 +505,15 @@ export function CloudOsChatMessages({
       data-status={status}
       aria-busy={isActive || isRecovering}
     >
-      <div
-        ref={scrollRef}
-        onScroll={syncScrollButton}
-        tabIndex={0}
-        role="region"
-        aria-label="Chat messages"
-        className="cos-chat-panel flex-1 overflow-y-auto"
-      >
+      <div className="relative flex min-h-0 flex-1">
+        <div
+          ref={scrollRef}
+          onScroll={syncScrollButton}
+          tabIndex={0}
+          role="region"
+          aria-label="Chat messages"
+          className="cos-chat-panel flex-1 overflow-y-auto"
+        >
         <div
           className={`flex flex-col px-6 pb-8 pt-8 ${
             constrainWidth ? "mx-auto w-full max-w-[920px]" : ""
@@ -501,7 +530,11 @@ export function CloudOsChatMessages({
 
             if (entry.type === "user") {
               return (
-                <div key={entry.key} className={topClass}>
+                <div
+                  key={entry.key}
+                  data-user-message-entry=""
+                  className={topClass}
+                >
                   <UserBubble
                     entry={entry}
                     onCopy={copyText}
@@ -584,7 +617,7 @@ export function CloudOsChatMessages({
                     <span className="h-px flex-1 bg-kumo-line" aria-hidden="true" />
                   </div>
                   {expanded && (
-                    <div className="cos-markdown mt-3 rounded-2xl border border-kumo-line/70 bg-kumo-elevated/45 p-3.5 text-[13px] leading-[19px]">
+                    <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]">
                       <MarkdownMessage
                         message={entry.summary}
                         resolveUrl={resolveUrl}
@@ -597,116 +630,87 @@ export function CloudOsChatMessages({
               );
             }
 
-            const { work: workBlocks, content: contentBlocks } =
-              partitionAssistantBlocks(entry.blocks);
-            const workGroups = workBlocks.flatMap((block) =>
-              block.kind === "toolGroup" ? [block.group] : [],
+            const entryIsActive =
+              isActive && entryIndex === entries.length - 1;
+            const finalTextBlocks = entryIsActive
+              ? []
+              : entry.blocks.filter(
+                (block): block is Extract<AssistantBlock, { kind: "text" }> =>
+                  block.kind === "text" && block.final,
+              );
+            const finalActionBlocks = entryIsActive
+              ? []
+              : entry.blocks.filter(
+                (block): block is Extract<AssistantBlock, { kind: "actionPresentation" }> =>
+                  block.kind === "actionPresentation" &&
+                  block.presentation.state === "ready",
+              );
+            const finalMediaBlocks = entry.blocks.filter(
+              (block): block is Extract<AssistantBlock, { kind: "image" | "file" }> =>
+                block.kind === "image" || block.kind === "file",
             );
-            const hasNarrative = contentBlocks.some(
-              (block) => block.kind === "text",
+            const workBlocks = entry.blocks.filter(
+              (block) =>
+                block.kind !== "suggestions" &&
+                block.kind !== "image" &&
+                block.kind !== "file" &&
+                !(block.kind === "text" && block.final && !entryIsActive) &&
+                !(block.kind === "actionPresentation" && block.presentation.state === "ready"),
             );
-            const insufficientFailures = contentBlocks.filter(
+            const hasNarrative = finalTextBlocks.length > 0;
+            const insufficientFailures = entry.blocks.filter(
               (block) => block.kind === "actionPresentation" &&
                 block.presentation.state === "failed" &&
                 block.presentation.failureCode === "insufficient_credits",
             );
             const firstInsufficientFailure = insufficientFailures[0];
-            const hasCompletedAction = contentBlocks.some(
+            const hasCompletedAction = entry.blocks.some(
               (block) => block.kind === "actionPresentation" &&
                 block.presentation.state === "ready",
             );
+            const followUpBlocks = entry.blocks.filter(
+              (block) => block.kind === "suggestions",
+            );
+            const footerTimestamp =
+              hasNarrative &&
+              entry.timestamp !== undefined &&
+              !entryIsActive &&
+              !entry.blocks.some(
+                (block) => block.kind === "reasoning" && block.running,
+              )
+                ? entry.timestamp
+                : undefined;
 
             return (
               <div
                 key={entry.key}
-                className={`${topClass} min-w-0 w-full max-w-[860px]`}
+                className={`${topClass} group/agentMessage min-w-0 w-full max-w-[860px] space-y-2`}
               >
-                <div className="group/agentMessage relative space-y-4">
-                  {workBlocks.length > 0 && (
-                    <WorkTraceDisclosure
-                      durationMs={entry.durationMs}
-                      groups={workGroups}
-                      completed={!runningWorkEntryKeys.has(entry.key)}
-                      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}
-                                running={runningWorkEntryKeys.has(entry.key)}
-                                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={
-                                  runningWorkEntryKeys.has(entry.key) && block.running
-                                }
-                                showCollapsedSummary={false}
-                              />
-                            );
-                          case "parallel":
-                            return (
-                              <ParallelBlock
-                                key={block.key}
-                                label={block.label}
-                                tools={block.tools}
-                                running={runningWorkEntryKeys.has(entry.key)}
-                              />
-                            );
-                          case "subagents":
-                            return (
-                              <SubAgentsBlock
-                                key={block.key}
-                                agents={block.agents}
-                                running={runningWorkEntryKeys.has(entry.key)}
-                              />
-                            );
-                          default:
-                            return null;
-                        }
-                      })}
-                    </WorkTraceDisclosure>
-                  )}
-
-                  {contentBlocks.map((block) => {
+                {workBlocks.length > 0 && (
+                  <TurnWorkDisclosure
+                    running={entryIsActive}
+                    open={entryIsActive || expandedTurnWork.has(entry.key)}
+                    onOpenChange={(open) => {
+                      if (!entryIsActive) setTurnWorkOpen(entry.key, open);
+                    }}
+                  >
+                  {workBlocks.map((block) => {
                     switch (block.kind) {
                       case "reasoning":
                         return (
-                          <WorkDescriptionRow
+                          <ThinkingTraceRow
                             key={block.key}
-                            text={block.text}
+                            reasoning={block.text}
                             running={block.running}
-                            resolveUrl={resolveUrl}
                           />
                         );
                       case "text": {
                         const streaming =
-                          isActive &&
-                          entryIndex === entries.length - 1 &&
-                          block === entry.blocks.at(-1);
+                          entryIsActive && block === entry.blocks.at(-1);
                         return (
                           <div
                             key={block.key}
-                            className="cos-markdown text-[14px] leading-[22px] tracking-[-0.25px] text-kumo-default"
+                            className="cos-markdown px-1.5 text-[14px] leading-[22px] tracking-[-0.25px] text-kumo-default"
                           >
                             <MarkdownMessage
                               message={block.text}
@@ -729,13 +733,12 @@ export function CloudOsChatMessages({
                           />
                         );
                       case "plan":
+                        if (currentPlan?.key === block.key) return null;
                         return (
                           <PlanBlock
                             key={block.key}
                             steps={block.steps}
-                            running={
-                              runningWorkEntryKeys.has(entry.key) && block.running
-                            }
+                            running={block.running}
                           />
                         );
                       case "askUser":
@@ -784,49 +787,11 @@ export function CloudOsChatMessages({
                             key={block.key}
                             label={block.label}
                             tools={block.tools}
-                            running={runningWorkEntryKeys.has(entry.key)}
                           />
                         );
                       case "subagents":
                         return (
-                          <SubAgentsBlock
-                            key={block.key}
-                            agents={block.agents}
-                            running={runningWorkEntryKeys.has(entry.key)}
-                          />
-                        );
-                      case "image":
-                        {
-                          const url = resolveUrl?.(block.src) ?? block.src;
-                          const artifactId = resolveArtifactId?.(url);
-                          return (
-                            <Fragment key={block.key}>
-                              {renderFileView(renderFile, {
-                                file: {
-                                  url,
-                                  filename: block.alt,
-                                  mediaType: block.mediaType ?? "image/*",
-                                },
-                                placement: "assistant-message",
-                                onOpen: artifactId && onOpenArtifact
-                                  ? () => onOpenArtifact(artifactId)
-                                  : undefined,
-                              })}
-                            </Fragment>
-                          );
-                        }
-                      case "file":
-                        return (
-                          <Fragment key={block.key}>
-                            {renderFileView(renderFile, {
-                              file: {
-                                ...block.file,
-                                url:
-                                  resolveUrl?.(block.file.url) ?? block.file.url,
-                              },
-                              placement: "assistant-message",
-                            })}
-                          </Fragment>
+                          <SubAgentsBlock key={block.key} agents={block.agents} />
                         );
                       case "actionPresentation":
                         if (
@@ -855,8 +820,67 @@ export function CloudOsChatMessages({
                         );
                     }
                   })}
+                  </TurnWorkDisclosure>
+                )}
+
+                {(finalMediaBlocks.length > 0 || finalActionBlocks.length > 0 || finalTextBlocks.length > 0) && (
+                  <div data-final-message="" className="space-y-4">
+                    {finalMediaBlocks.map((block) => {
+                      if (block.kind === "image") {
+                        const url = resolveUrl?.(block.src) ?? block.src;
+                        const artifactId = resolveArtifactId?.(url);
+                        return (
+                          <Fragment key={block.key}>
+                            {renderFileView(renderFile, {
+                              file: {
+                                url,
+                                filename: block.alt,
+                                mediaType: block.mediaType ?? "image/*",
+                              },
+                              placement: "assistant-message",
+                              onOpen: artifactId && onOpenArtifact
+                                ? () => onOpenArtifact(artifactId)
+                                : undefined,
+                            })}
+                          </Fragment>
+                        );
+                      }
+                      return (
+                        <Fragment key={block.key}>
+                          {renderFileView(renderFile, {
+                            file: {
+                              ...block.file,
+                              url: resolveUrl?.(block.file.url) ?? block.file.url,
+                            },
+                            placement: "assistant-message",
+                          })}
+                        </Fragment>
+                      );
+                    })}
+                    {finalActionBlocks.map((block) => (
+                      <ActionPresentationBlock
+                        key={block.key}
+                        presentation={block.presentation}
+                        renderFile={renderFile}
+                        resolveUrl={resolveUrl}
+                        resolveArtifactId={resolveArtifactId}
+                        onOpenArtifact={onOpenArtifact}
+                      />
+                    ))}
+                    {finalTextBlocks.map((block) => (
+                      <div key={block.key} className="cos-markdown px-1.5 text-[14px] leading-[22px] tracking-[-0.25px] text-kumo-default">
+                        <MarkdownMessage
+                          message={block.text}
+                          resolveUrl={resolveUrl}
+                          resolveArtifactId={resolveArtifactId}
+                          onOpenArtifact={onOpenArtifact}
+                        />
+                      </div>
+                    ))}
+                  </div>
+                )}
 
-                  {entry.terminal?.kind === "error" && (
+                {entry.terminal?.kind === "error" && (
                     <ErrorBlock
                       title={entry.terminal.title}
                       body={entry.terminal.body}
@@ -864,7 +888,7 @@ export function CloudOsChatMessages({
                     />
                   )}
 
-                  {entry.terminal?.kind === "interrupted" && (
+                {entry.terminal?.kind === "interrupted" && (
                     <div
                       className="px-1.5 py-1 text-[13px] leading-[19px] text-kumo-inactive"
                       role="status"
@@ -873,8 +897,11 @@ export function CloudOsChatMessages({
                     </div>
                   )}
 
-                  {hasNarrative && entry.timestamp !== undefined && (
-                    <div className="mt-0.5 -ml-1 flex items-center gap-1">
+                {footerTimestamp !== undefined && (
+                    <div
+                      data-agent-message-footer=""
+                      className="mt-0.5 -ml-1 flex items-center gap-1 opacity-0 transition-opacity duration-150 ease-out group-hover/agentMessage:opacity-100 group-focus-within/agentMessage:opacity-100"
+                    >
                       <Tooltip
                         content={copied === entry.copyText ? "Copied!" : "Copy message"}
                         asChild
@@ -892,24 +919,21 @@ export function CloudOsChatMessages({
                           )}
                         </button>
                       </Tooltip>
-                      <Tooltip content={formatFullTimestamp(entry.timestamp)} asChild>
+                      <Tooltip content={formatFullTimestamp(footerTimestamp)} asChild>
                         <span className="px-1 font-mono text-[11px] leading-4 text-kumo-inactive">
-                          {formatClockTime(entry.timestamp)}
+                          {formatClockTime(footerTimestamp)}
                         </span>
                       </Tooltip>
                     </div>
                   )}
 
-                  {contentBlocks.map((block) =>
-                    block.kind === "suggestions" ? (
-                      <SuggestionsBlock
-                        key={block.key}
-                        items={block.items}
-                        onSuggestion={(text) => onSuggestion?.(text)}
-                      />
-                    ) : null
-                  )}
-                </div>
+                {followUpBlocks.map((block) => (
+                    <SuggestionsBlock
+                      key={block.key}
+                      items={block.items}
+                      onSuggestion={(text) => onSuggestion?.(text)}
+                    />
+                ))}
               </div>
             );
           })}
@@ -938,19 +962,46 @@ export function CloudOsChatMessages({
 
           <div ref={endRef} />
         </div>
+        </div>
+
+        <WorkshopIconButton
+          aria-label="Scroll to bottom"
+          onClick={() => endRef.current?.scrollIntoView({ behavior: "smooth" })}
+          className={`themed-floating-shadow absolute bottom-3 left-1/2 z-20 -translate-x-1/2 !rounded-full border border-kumo-line bg-kumo-base transition-all duration-200 ${
+            showScrollButton
+              ? "translate-y-0 opacity-100"
+              : "pointer-events-none translate-y-2 opacity-0"
+          }`}
+        >
+          <ArrowDown size={15} />
+        </WorkshopIconButton>
       </div>
 
-      <WorkshopIconButton
-        aria-label="Scroll to bottom"
-        onClick={() => endRef.current?.scrollIntoView({ behavior: "smooth" })}
-        className={`themed-floating-shadow absolute bottom-3 left-1/2 z-20 -translate-x-1/2 !rounded-full border border-kumo-line bg-kumo-base transition-all duration-200 ${
-          showScrollButton
-            ? "translate-y-0 opacity-100"
-            : "pointer-events-none translate-y-2 opacity-0"
-        }`}
-      >
-        <ArrowDown size={15} />
-      </WorkshopIconButton>
+      <AnimatePresence initial={false}>
+        {currentPlan && completedPlanSteps < currentPlan.steps.length && (
+          <motion.div
+            key="task-progress"
+            initial={reducedMotion ? { opacity: 1 } : { opacity: 0, y: 8, scale: 0.98 }}
+            animate={{ opacity: 1, y: 0, scale: 1 }}
+            exit={reducedMotion ? { opacity: 0 } : { opacity: 0, y: 8, scale: 0.98 }}
+            transition={{ duration: reducedMotion ? 0 : 0.2, ease: [0.32, 0.72, 0, 1] }}
+            className="relative z-10 mx-auto w-full max-w-3xl shrink-0 px-4"
+          >
+            <section
+              data-cloud-os-plan-progress=""
+              aria-label="Task progress"
+              className="mx-auto border border-b-0 border-kumo-line bg-kumo-base px-4 py-2.5"
+              style={{ width: "90%", borderRadius: "1rem 1rem 0 0" }}
+            >
+              <PlanBlock
+                steps={currentPlan.steps}
+                running={isActive}
+                defaultOpen={false}
+              />
+            </section>
+          </motion.div>
+        )}
+      </AnimatePresence>
 
     </div>
   );