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

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,9 +18,15 @@ 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,
+  type CloudOsArtifactResolver,
   type CloudOsUrlResolver,
 } from "./markdown-message";
 import {
@@ -34,7 +41,10 @@ import {
   type ApprovalDecision,
 } from "./rich-blocks";
 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";
 import { CapabilityChip } from "../capability-chip";
 import {
   renderFileView,
@@ -46,7 +56,9 @@ import {
   formatClockTime,
   formatFullTimestamp,
   rhythmTopClass,
+  type AssistantBlock,
   type CloudOsEntry,
+  type CloudOsActionPresentation,
 } from "./transcript-model";
 
 export type CloudOsChatStatus = "ready" | "submitted" | "streaming" | "error";
@@ -56,8 +68,9 @@ export interface CloudOsChatMessagesProps {
   status: CloudOsChatStatus;
   /** 权威 Turn 生命周期;提供时替代本地 status 推断。 */
   turnActive?: boolean;
-  isHydrating?: boolean;
   isRecovering?: boolean;
+  recoveryAttempt?: number;
+  recoveryMax?: number;
   recoveryStatusLabel?: string;
   awaitingApproval?: boolean;
   /** 有 pending steer 时,活动占位说明「正在等当前步骤收尾」。 */
@@ -85,6 +98,10 @@ export interface CloudOsChatMessagesProps {
   renderFile?: FileRenderer;
   /** 把消息里的 `sandbox:/workspace/...` 之类地址翻译成可访问 URL。 */
   resolveUrl?: CloudOsUrlResolver;
+  /** 把图片 URL 关联到宿主的持久产物。 */
+  resolveArtifactId?: CloudOsArtifactResolver;
+  /** 打开宿主拥有的产物视图。 */
+  onOpenArtifact?: (artifactId: string) => void;
   /** 消息区宽度是否收敛到 920px 居中(GadgetEditor 里叫 constrainChatWidth)。 */
   constrainWidth?: boolean;
   emptyTitle?: string;
@@ -129,12 +146,16 @@ function UserBubble({
   copied,
   renderFile,
   resolveUrl,
+  resolveArtifactId,
+  onOpenArtifact,
 }: {
   entry: Extract<CloudOsEntry, { type: "user" }>;
   onCopy: (text: string) => void;
   copied: boolean;
   renderFile?: FileRenderer;
   resolveUrl?: CloudOsUrlResolver;
+  resolveArtifactId?: CloudOsArtifactResolver;
+  onOpenArtifact?: (artifactId: string) => void;
 }) {
   return (
     <div className="group/message relative flex flex-col items-end">
@@ -150,23 +171,39 @@ function UserBubble({
         </div>
       )}
       {entry.attachments.length > 0 && (
-        <div className="mb-1.5 flex max-w-[min(680px,78%)] flex-wrap justify-end gap-2">
-          {entry.attachments.map((attachment, index) => (
-            <Fragment key={`${attachment.url}:${index}`}>
-              {renderFileView(renderFile, {
-                file: attachment,
-                placement: "user-message",
-              })}
-            </Fragment>
-          ))}
+        <div className="mb-1.5 flex max-w-[min(680px,78%)] flex-wrap items-start justify-end gap-2">
+          {entry.attachments.map((attachment, index) => {
+            const view = renderFileView(renderFile, {
+              file: {
+                ...attachment,
+                url: resolveUrl?.(attachment.url) ?? attachment.url,
+              },
+              placement: "user-message",
+            });
+            return attachment.mediaType?.startsWith("image/") ? (
+              <Fragment key={`${attachment.url}:${index}`}>{view}</Fragment>
+            ) : (
+              <span
+                key={`${attachment.url}:${index}`}
+                className="flex basis-full justify-end"
+              >
+                {view}
+              </span>
+            );
+          })}
         </div>
       )}
       {entry.text && (
-        <div className="themed-user-bubble-shadow cos-markdown w-fit max-w-[min(680px,78%)] rounded-[24px] rounded-br-lg border border-transparent bg-kumo-bubble-user px-4 py-2.5 text-[14px] leading-[22px] tracking-[-0.25px] text-kumo-default">
-          {/* pre-wrap 让用户消息里的单个换行渲染成硬换行 */}
-          <div className="whitespace-pre-wrap">
-            <MarkdownMessage message={entry.text} resolveUrl={resolveUrl} />
-          </div>
+        <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}
+            resolveArtifactId={resolveArtifactId}
+            onOpenArtifact={onOpenArtifact}
+          />
         </div>
       )}
       <div className="mt-0.5 flex items-center justify-end gap-2 pr-1 text-[11px] leading-4 text-kumo-inactive opacity-0 transition-opacity duration-150 ease-out group-hover/message:opacity-100 group-focus-within/message:opacity-100">
@@ -193,12 +230,147 @@ function UserBubble({
   );
 }
 
+function ActionPresentationBlock({
+  presentation,
+  failureCount = 1,
+  partial = false,
+  renderFile,
+  resolveUrl,
+  resolveArtifactId,
+  onOpenArtifact,
+}: {
+  presentation: CloudOsActionPresentation;
+  failureCount?: number;
+  partial?: boolean;
+  renderFile?: FileRenderer;
+  resolveUrl?: CloudOsUrlResolver;
+  resolveArtifactId?: CloudOsArtifactResolver;
+  onOpenArtifact?: (artifactId: string) => void;
+}) {
+  const { state } = presentation;
+  if (state === "ready") {
+    return (
+      <div
+        data-action-presentation={state}
+        role="status"
+        aria-label="Completed"
+        className="space-y-2"
+      >
+        {presentation.content.length === 0
+          ? <p className="m-0 text-[14px] leading-5 text-kumo-subtle">Completed</p>
+          : presentation.content.map((file, index) => {
+            const url = resolveUrl?.(file.url) ?? file.url;
+            const artifactId = resolveArtifactId?.(url);
+            return (
+              <Fragment key={`${file.url}:${index}`}>
+                {renderFileView(renderFile, {
+                  file: {
+                    ...file,
+                    filename: "Generated file",
+                    url,
+                  },
+                  placement: "assistant-message",
+                  variant: "product",
+                  onOpen: file.mediaType?.startsWith("image/") && artifactId && onOpenArtifact
+                    ? () => onOpenArtifact(artifactId)
+                    : undefined,
+                })}
+              </Fragment>
+            );
+          })}
+      </div>
+    );
+  }
+
+  const product = presentation.produces;
+  const productName = product?.type ?? "other";
+  const isFileProduct = productName !== "data" && productName !== "other";
+  const insufficientCredits = state === "failed" &&
+    presentation.failureCode === "insufficient_credits";
+  const body = state === "running"
+    ? isFileProduct
+      ? `Generating ${productName}${product?.mediaType ? ` (${product.mediaType})` : ""}`
+      : "Generating"
+    : state === "outcome_unknown"
+      ? "The provider may have completed this action. Check the status before trying again."
+      : insufficientCredits
+        ? `${failureCount} API call${failureCount === 1 ? " was" : "s were"} not started because there weren't enough Credits.`
+        : undefined;
+  if (state === "running") {
+    return (
+      <div
+        data-action-presentation={state}
+        data-product-type={productName}
+        role="status"
+        aria-label={body}
+      >
+        {isFileProduct
+          ? <ProductGeneration type={productName} mediaType={product?.mediaType} />
+          : <GenerationLoader />}
+      </div>
+    );
+  }
+  return (
+    <div
+      data-action-presentation={state}
+      role={state === "failed" ? "alert" : "status"}
+      className="inline-flex max-w-72 items-start rounded-xl border border-kumo-line bg-kumo-elevated px-3 py-2 text-[13px] leading-5"
+    >
+      <span>
+        <strong className="block font-medium text-kumo-default">
+          {insufficientCredits
+            ? partial ? "Partially completed" : "Not completed"
+            : state === "failed" ? "Action failed" : "Status unavailable"}
+        </strong>
+        {body && <span className="block text-kumo-subtle">{body}</span>}
+      </span>
+    </div>
+  );
+}
+
+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,
-  isHydrating = false,
   isRecovering = false,
+  recoveryAttempt,
+  recoveryMax,
   recoveryStatusLabel,
   awaitingApproval = false,
   hasPendingSteer = false,
@@ -210,6 +382,7 @@ export function CloudOsChatMessages({
   renderApproval,
   renderFile,
   resolveUrl,
+  resolveArtifactId,
   constrainWidth = true,
   emptyTitle = "What are we working on?",
   onRetry,
@@ -217,14 +390,19 @@ export function CloudOsChatMessages({
   onSuggestion,
   onRespond,
   onOpenSchedule,
+  onOpenArtifact,
   onCopy,
 }: CloudOsChatMessagesProps) {
   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());
@@ -242,6 +420,20 @@ export function CloudOsChatMessages({
       }),
     [approvalIdOf, isActive, messages, showThinkingTraces],
   );
+  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 completedPlanSteps = currentPlan?.steps.filter(
+    (step) => step.status === "done",
+  ).length ?? 0;
 
   const entryTopClasses = useMemo(
     () =>
@@ -260,6 +452,15 @@ export function CloudOsChatMessages({
     });
   }, []);
 
+  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);
@@ -286,6 +487,8 @@ export function CloudOsChatMessages({
   const activity = deriveTurnActivity(entries, {
     isActive,
     isRecovering,
+    recoveryAttempt,
+    recoveryMax,
     recoveryStatusLabel,
     awaitingApproval,
     hasPendingSteer,
@@ -300,22 +503,23 @@ export function CloudOsChatMessages({
       className="relative flex min-h-0 flex-1 flex-col overflow-hidden bg-kumo-base"
       data-cloud-os-transcript=""
       data-status={status}
-      aria-busy={isActive || isHydrating || isRecovering}
+      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]" : ""
+            constrainWidth ? "mx-auto w-full max-w-[var(--cos-conversation-max-width)]" : ""
           }`}
         >
-          {entries.length === 0 && !startedWithPending && !isHydrating && (
+          {entries.length === 0 && !startedWithPending && (
             <div className="flex min-h-56 items-center justify-center text-center text-[24px] leading-8 font-semibold tracking-[-0.4px] text-kumo-default">
               {emptyTitle}
             </div>
@@ -326,13 +530,19 @@ 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}
                     copied={copied === entry.text}
                     renderFile={renderFile}
                     resolveUrl={resolveUrl}
+                    resolveArtifactId={resolveArtifactId}
+                    onOpenArtifact={onOpenArtifact}
                   />
                 </div>
               );
@@ -341,7 +551,7 @@ export function CloudOsChatMessages({
             if (entry.type === "slashCommand") {
               return (
                 <div key={entry.key} className={`${topClass} flex flex-col items-end`}>
-                  <div className="themed-user-bubble-shadow w-fit max-w-[min(680px,78%)] rounded-[24px] rounded-br-lg border border-transparent bg-kumo-bubble-user px-4 py-2.5 text-[14px] leading-[22px] tracking-[-0.25px] text-kumo-brand">
+                  <div className="themed-user-bubble-shadow 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-brand">
                     <span className="whitespace-pre-wrap font-mono">{entry.text}</span>
                   </div>
                 </div>
@@ -411,6 +621,8 @@ export function CloudOsChatMessages({
                       <MarkdownMessage
                         message={entry.summary}
                         resolveUrl={resolveUrl}
+                        resolveArtifactId={resolveArtifactId}
+                        onOpenArtifact={onOpenArtifact}
                       />
                     </div>
                   )}
@@ -418,34 +630,95 @@ export function CloudOsChatMessages({
               );
             }
 
-            const hasNarrative = entry.blocks.some(
-              (block) => block.kind === "text",
+            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 actionResultBlocks = entry.blocks.filter(
+              (block): block is Extract<AssistantBlock, { kind: "actionPresentation" }> =>
+                block.kind === "actionPresentation",
+            );
+            const finalMediaBlocks = entry.blocks.filter(
+              (block): block is Extract<AssistantBlock, { kind: "image" | "file" }> =>
+                block.kind === "image" || block.kind === "file",
+            );
+            const workBlocks = entry.blocks.filter(
+              (block) =>
+                block.kind !== "suggestions" &&
+                block.kind !== "image" &&
+                block.kind !== "file" &&
+                block.kind !== "actionPresentation" &&
+                !(block.kind === "text" && block.final && !entryIsActive),
+            );
+            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 = 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] space-y-2`}
+                className={`${topClass} group/agentMessage min-w-0 w-full max-w-[860px] space-y-2`}
               >
-                <div className="group/agentMessage relative space-y-1.5">
-                  {entry.blocks.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 (
-                          <ThinkingTraceRow key={block.key} reasoning={block.text} />
+                          <ThinkingTraceRow
+                            key={block.key}
+                            reasoning={block.text}
+                            running={block.running}
+                          />
                         );
-                      case "text":
+                      case "text": {
+                        const streaming =
+                          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}
                               resolveUrl={resolveUrl}
+                              resolveArtifactId={resolveArtifactId}
+                              onOpenArtifact={onOpenArtifact}
+                              streaming={streaming}
                             />
                           </div>
                         );
+                      }
                       case "toolGroup":
                         return (
                           <ToolGroupRow
@@ -457,6 +730,7 @@ export function CloudOsChatMessages({
                           />
                         );
                       case "plan":
+                        if (currentPlan?.key === block.key) return null;
                         return (
                           <PlanBlock
                             key={block.key}
@@ -473,13 +747,7 @@ export function CloudOsChatMessages({
                           />
                         );
                       case "suggestions":
-                        return (
-                          <SuggestionsBlock
-                            key={block.key}
-                            items={block.items}
-                            onSuggestion={(text) => onSuggestion?.(text)}
-                          />
-                        );
+                        return null;
                       case "schedule":
                         return (
                           <ScheduleBlock
@@ -522,44 +790,92 @@ export function CloudOsChatMessages({
                         return (
                           <SubAgentsBlock key={block.key} agents={block.agents} />
                         );
-                      case "image":
+                      case "actionPresentation":
+                        return null;
+                      case "error":
                         return (
-                          <Fragment key={block.key}>
-                            {renderFileView(renderFile, {
-                              file: {
-                                url: resolveUrl?.(block.src) ?? block.src,
-                                filename: block.alt,
-                                mediaType: block.mediaType ?? "image/*",
-                              },
-                              placement: "assistant-message",
-                            })}
-                          </Fragment>
+                          <ErrorBlock
+                            key={block.key}
+                            title={block.title}
+                            body={block.body}
+                          />
                         );
-                      case "file":
+                    }
+                  })}
+                  </TurnWorkDisclosure>
+                )}
+
+                {actionResultBlocks.length > 0 && (
+                  <div data-action-results="" className="space-y-4">
+                    {actionResultBlocks.map((block) => {
+                      if (
+                        block.presentation.failureCode === "insufficient_credits" &&
+                        block !== firstInsufficientFailure
+                      ) return null;
+                      return (
+                        <ActionPresentationBlock
+                          key={block.key}
+                          presentation={block.presentation}
+                          failureCount={insufficientFailures.length}
+                          partial={hasCompletedAction}
+                          renderFile={renderFile}
+                          resolveUrl={resolveUrl}
+                          resolveArtifactId={resolveArtifactId}
+                          onOpenArtifact={onOpenArtifact}
+                        />
+                      );
+                    })}
+                  </div>
+                )}
+
+                {(finalMediaBlocks.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: {
-                                ...block.file,
-                                url:
-                                  resolveUrl?.(block.file.url) ?? block.file.url,
+                                url,
+                                filename: block.alt,
+                                mediaType: block.mediaType ?? "image/*",
                               },
                               placement: "assistant-message",
+                              onOpen: artifactId && onOpenArtifact
+                                ? () => onOpenArtifact(artifactId)
+                                : undefined,
                             })}
                           </Fragment>
                         );
-                      case "error":
-                        return (
-                          <ErrorBlock
-                            key={block.key}
-                            title={block.title}
-                            body={block.body}
-                          />
-                        );
-                    }
-                  })}
+                      }
+                      return (
+                        <Fragment key={block.key}>
+                          {renderFileView(renderFile, {
+                            file: {
+                              ...block.file,
+                              url: resolveUrl?.(block.file.url) ?? block.file.url,
+                            },
+                            placement: "assistant-message",
+                          })}
+                        </Fragment>
+                      );
+                    })}
+                    {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}
@@ -567,7 +883,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"
@@ -576,8 +892,11 @@ export function CloudOsChatMessages({
                     </div>
                   )}
 
-                  {hasNarrative && entry.timestamp !== undefined && (
-                    <div 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">
+                {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
@@ -595,14 +914,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>
                   )}
-                </div>
+
+                {followUpBlocks.map((block) => (
+                    <SuggestionsBlock
+                      key={block.key}
+                      items={block.items}
+                      onSuggestion={(text) => onSuggestion?.(text)}
+                    />
+                ))}
               </div>
             );
           })}
@@ -631,30 +957,47 @@ 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>
-
-      {isHydrating && (
-        <div className="absolute inset-0 z-30 grid place-items-center bg-kumo-base/90">
-          <div className="flex flex-col items-center gap-3">
-            <div className="h-6 w-6 animate-spin rounded-full border-2 border-kumo-brand border-t-transparent" />
-            <p className="m-0 text-[13px] leading-[18px] text-kumo-subtle">
-              Loading conversation…
-            </p>
-          </div>
-        </div>
-      )}
+      <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>
   );
 }