@springbrand/message-panel 0.1.3-alpha.2 → 0.1.3-alpha.22

package/cloud-os/README.md

@@ -46,10 +46,10 @@ pnpm dev:cloud-os        # http://localhost:9992
    shadcn 主题正面冲突。
 4. **作用域化主题**。只有 kumo 命名空间的 token 进 `@theme`;通用 token(字体 /
    圆角 / 字号 / 缓动)挂在 `.cloud-os-root` 上靠继承生效,宿主主题分毫不动。
-5. **删掉的东西**:capsule(URL → 资源胶囊)、行内 slash picker、ComposerMirror、
-   GatekeeperModal、Yjs 草稿 / 「接受改动」那一整套。它们都直挂 gadgets 的 capnweb
-   RPC,UIMessage 协议下没有对应物。slash 命令退成「+」菜单里的一组条目 —— 能力
-   保住,但没有边打字边过滤的行内补全。
+5. **删掉的东西**:capsule(URL → 资源胶囊)、ComposerMirror、GatekeeperModal、
+   Yjs 草稿 / 「接受改动」那一整套。它们都直挂 gadgets 的 capnweb RPC,
+   UIMessage 协议下没有对应物。命令补全使用 package 内的 assistant-ui
+   `ComposerTriggerPopover`,宿主只传命令数据。
 6. **窄栏适配**。授权卡 / 提问卡 / 定时卡在上游是「图标 + 正文 + 右侧动作」一行到底;
    聊天栏默认只有 420px,一行放不下会把正文挤成 0 宽,所以改成允许换行。
 
@@ -57,8 +57,8 @@ pnpm dev:cloud-os        # http://localhost:9992
 
 - `update_plan` 是**整份快照覆盖**,不是增量事件。整条会话只保留最后一份计划快照
   (`dropSupersededPlans`),否则同一份计划会被画上四遍。
-- `ask_user` 的「已回答」取的是**这条消息之后的第一条用户直答**,不是工具 output ——
-  后者往往只是 `{ asked: true }` 之类的回执。
+- `ask_user` 的「已回答」只取该 Tool Part 的 `output.answers[]`;
+  不扫描后续用户消息,问题与答案按数组下标一一对应。
 - `approval-requested` 的工具是否渲染成原位授权卡,由宿主的 `approvalIdOf` 决定;
   返回 `undefined` 就退回普通工具行(本仓的持久化审批走输入框上方那条队列)。
 

package/cloud-os/assets/followup-arrow.svg

@@ -0,0 +1,3 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="11.6667" height="8.33333" viewBox="0 0 11.6667 8.33333" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector (Stroke)" d="M3.92575 0.159107C4.14614 -0.0530669 4.50354 -0.0530047 4.72403 0.159107C4.94441 0.371284 4.94435 0.715363 4.72403 0.927642L1.92639 3.62317H11.1021C11.4139 3.62317 11.6667 3.8665 11.6667 4.16667C11.6667 4.46683 11.4139 4.71016 11.1021 4.71016H1.92639L4.72403 7.40569C4.94435 7.61797 4.94441 7.96205 4.72403 8.17423C4.50354 8.38634 4.14614 8.3864 3.92575 8.17423L0.165189 4.55093C-0.0550631 4.33872 -0.0550631 3.99461 0.165189 3.7824L3.92575 0.159107Z" fill="black" fill-opacity="0.5"/>
+</svg>

package/cloud-os/assets/loading-corner.svg

@@ -0,0 +1,3 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="21.8891" height="21.9254" viewBox="0 0 21.8891 21.9254" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector" d="M11.6017 6.11877H0.752769C0.337056 6.11877 3.87367e-05 5.78171 3.87367e-05 5.36611L0 0.849598C0 0.433872 0.337004 0.0968018 0.75273 0.0968018H11.5558L15.6704 0.00163975C19.0193 -0.0757287 21.7878 2.59451 21.8311 5.94405L21.8891 10.4301V21.1726C21.8891 21.5883 21.552 21.9254 21.1363 21.9254H16.6199C16.2042 21.9254 15.8671 21.5883 15.8671 21.1726V10.3695L15.7581 7.55744C15.7267 6.74739 15.0595 6.10781 14.249 6.11039L11.6017 6.11877Z" fill="#FF9938"/>
+</svg>

package/cloud-os/assets/loading-mark.svg

@@ -0,0 +1,16 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="37.5518" height="37.4985" viewBox="0 0 37.5518 37.4985" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group" filter="url(#filter0_f_0_4)">
+<path id="Vector" d="M31.8173 8.87482C32.1113 9.16882 32.1113 9.64541 31.8173 9.93941L24.16 17.5967H35.009C35.4247 17.5967 35.7616 17.9338 35.7616 18.3494L35.7618 22.8659C35.7618 23.2816 35.4247 23.6185 35.009 23.6185H24.2059L31.8173 31.2299C32.1113 31.5239 32.1113 32.0005 31.8173 32.2945L28.6236 35.488C28.3298 35.782 27.8532 35.782 27.5592 35.488L22.4352 30.3641C22.2939 30.2227 22.2146 30.0309 22.2148 29.831L22.216 28.8867L22.1335 21.8329C22.0894 18.0581 18.9682 15.0475 15.1943 15.1395L8.62867 15.2995L7.68452 15.3007C7.48456 15.3009 7.29271 15.2216 7.15132 15.0802L2.0105 9.93941C1.71653 9.64541 1.71653 9.16882 2.0105 8.87482L5.20408 5.68127C5.49804 5.38731 5.97465 5.38731 6.26861 5.68127L13.8727 13.2853V2.54284C13.8727 2.12712 14.2096 1.79009 14.6254 1.79008L19.1417 1.79002C19.5575 1.79002 19.8945 2.12707 19.8945 2.54279V13.3458L27.5592 5.68127C27.8532 5.38731 28.3298 5.38731 28.6236 5.68127L31.8173 8.87482Z" fill="url(#paint0_linear_0_4)"/>
+</g>
+<defs>
+<filter id="filter0_f_0_4" x="-1.86265e-09" y="0" width="37.5518" height="37.4985" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.895012" result="effect1_foregroundBlur_0_4"/>
+</filter>
+<linearGradient id="paint0_linear_0_4" x1="30.2205" y1="7.27806" x2="22.5471" y2="31.3091" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFD078"/>
+<stop offset="1" stop-color="#FF9938"/>
+</linearGradient>
+</defs>
+</svg>

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

@@ -0,0 +1,3 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="9.81853" height="9.8186" viewBox="0 0 9.81853 9.8186" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector" d="M4.67857 0.881903C5.85442 -0.293968 7.76085 -0.293968 8.93672 0.881903C10.1125 2.05777 10.1125 3.96426 8.93672 5.14L4.25811 9.8186L0 5.5605L4.67857 0.881903Z" fill="#FF9938"/>
+</svg>

package/cloud-os/assets/model-selected.svg

@@ -0,0 +1,5 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Icon Variants">
+<path id="Subtract" d="M8.00033 1.33333C11.6821 1.33351 14.6663 4.31854 14.6663 8.00033C14.6662 11.682 11.682 14.6662 8.00033 14.6663C4.31854 14.6663 1.33351 11.6821 1.33333 8.00033C1.33333 4.31843 4.31843 1.33333 8.00033 1.33333ZM11.138 6.19466C10.8776 5.93464 10.4549 5.93442 10.1947 6.19466L7.33236 9.05697L6.13802 7.86165C5.87764 7.60163 5.4549 7.60141 5.19466 7.86165C4.93469 8.1218 4.93502 8.54369 5.19466 8.80404L6.86165 10.471C7.12195 10.7313 7.54367 10.7312 7.80404 10.471L11.138 7.13802C11.3984 6.87767 11.3984 6.45501 11.138 6.19466Z" fill="#FF9938"/>
+</g>
+</svg>

package/cloud-os/capability-chip.tsx

@@ -0,0 +1,35 @@
+import { Diamond, X } from "@phosphor-icons/react";
+
+export interface CapabilityChipProps {
+  kind: "skill" | "plan";
+  label: string;
+  removable?: boolean;
+  onRemove?: () => void;
+}
+
+export function CapabilityChip({
+  kind,
+  label,
+  removable = false,
+  onRemove,
+}: CapabilityChipProps) {
+  return (
+    <span
+      data-capability-kind={kind}
+      className="inline-flex max-w-full items-center gap-1 rounded-full border border-kumo-line bg-kumo-elevated px-2 py-1 text-[12px] leading-4 text-kumo-subtle"
+    >
+      <Diamond size={11} weight="duotone" className="shrink-0 text-kumo-brand" />
+      <span className="truncate">{label}</span>
+      {removable && onRemove && (
+        <button
+          type="button"
+          onClick={onRemove}
+          aria-label={`Remove ${label}`}
+          className="-mr-1 grid size-5 shrink-0 cursor-pointer place-items-center rounded-full text-kumo-inactive hover:bg-kumo-tint hover:text-kumo-default focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-kumo-brand/40"
+        >
+          <X size={10} weight="bold" />
+        </button>
+      )}
+    </span>
+  );
+}

package/cloud-os/chat/activity-indicator.tsx

@@ -0,0 +1,29 @@
+import { ThinkingOrb } from "thinking-orbs";
+import { useCloudOsMode } from "../internal/theme-context";
+import type { CloudOsActivity } from "./transcript-model";
+
+/**
+ * 回合存活期间持续显示的全局活动指示。
+ *
+ * 用 thinking-orbs 的 canvas 球而不是一行 shimmer 文字:动画本身就是「还活着」
+ * 的信号,文案只负责说清在干什么(`deriveTurnActivity` 给出的九种之一)。
+ *
+ * 和 `src/status.tsx` 的 `ThinkingIndicator` 是同一个上游球、同一套 role/aria
+ * 形状,但**不共用实现** —— cloud-os 不 import `../src`(见 cloud-os/README.md,
+ * 由 check-chat-presentation-boundary.mjs 守着),文案也走 cloud-os 自己的
+ * 工具种类表,不是 src 那套工具名正则。
+ */
+export function CloudOsActivityIndicator({ state, label }: CloudOsActivity) {
+  // 必须显式传 theme,不能用它的 `auto`:auto 先扫祖先的 data-theme / .dark / .light,
+  // 而本仓的浅色**是「没有 .dark」**,扫不到任何标记 → 它回落到
+  // prefers-color-scheme,也就是**操作系统**的深浅。系统深色 + 应用浅色时,
+  // 球会在浅底上画浅墨,几乎看不见。cloud-os 子树的深浅事实源是这个 context
+  // (CloudOsRoot 从宿主的 useThemeMode() 拿到),直接用它。
+  const mode = useCloudOsMode();
+  return (
+    <div className="cos-activity" role="status" aria-label={label}>
+      <ThinkingOrb state={state} size={20} theme={mode} aria-hidden="true" />
+      <span>{label}</span>
+    </div>
+  );
+}

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

@@ -5,15 +5,16 @@ import {
   CaretRight,
   Check,
   Copy,
-  File as FileIcon,
   Terminal,
 } from "@phosphor-icons/react";
 import {
+  Fragment,
   useCallback,
   useEffect,
   useMemo,
   useRef,
   useState,
+  type ReactNode,
 } from "react";
 import { Tooltip } from "../primitives/tooltip";
 import { WorkshopIconButton } from "../primitives/workshop-controls";
@@ -33,8 +34,15 @@ import {
   type ApprovalDecision,
 } from "./rich-blocks";
 import { ThinkingTraceRow, ToolGroupRow } from "./tool-rows";
+import { CloudOsActivityIndicator } from "./activity-indicator";
+import { CapabilityChip } from "../capability-chip";
+import {
+  renderFileView,
+  type FileRenderer,
+} from "../file-view";
 import {
   buildCloudOsEntries,
+  deriveTurnActivity,
   formatClockTime,
   formatFullTimestamp,
   rhythmTopClass,
@@ -46,9 +54,11 @@ export type CloudOsChatStatus = "ready" | "submitted" | "streaming" | "error";
 export interface CloudOsChatMessagesProps {
   messages: readonly UIMessage[];
   status: CloudOsChatStatus;
-  isHydrating?: boolean;
+  /** 权威 Turn 生命周期;提供时替代本地 status 推断。 */
+  turnActive?: boolean;
   isRecovering?: boolean;
   recoveryStatusLabel?: string;
+  awaitingApproval?: boolean;
   /** 有 pending steer 时,活动占位说明「正在等当前步骤收尾」。 */
   hasPendingSteer?: boolean;
   /** 首帧就带着待发消息:此时不显示空会话欢迎语。 */
@@ -58,6 +68,20 @@ export interface CloudOsChatMessagesProps {
   /** 把某个 part 映射成待授权 id;返回 undefined 表示不在此处渲染授权。 */
   approvalIdOf?: (part: unknown) => string | undefined;
   approvalsDisabled?: boolean;
+  /**
+   * 用宿主自己的卡片渲染某条待授权。返回 undefined 就退回内置的通用授权行。
+   *
+   * 存在的理由：授权行只认得工具名和入参，说不出「这次要花多少钱、买的是什么」。
+   * 需要在决定之前把这些摆到人面前的宿主，得自己画那张卡。
+   */
+  renderApproval?: (approval: {
+    approvalId: string;
+    toolName: string;
+    input: Record<string, unknown>;
+    disabled: boolean;
+  }) => ReactNode;
+  /** 接管消息里的文件视图；未提供时使用包内 FileView。 */
+  renderFile?: FileRenderer;
   /** 把消息里的 `sandbox:/workspace/...` 之类地址翻译成可访问 URL。 */
   resolveUrl?: CloudOsUrlResolver;
   /** 消息区宽度是否收敛到 920px 居中(GadgetEditor 里叫 constrainChatWidth)。 */
@@ -66,7 +90,11 @@ export interface CloudOsChatMessagesProps {
   onRetry?: () => void;
   onApprove?: (approvalId: string, decision: ApprovalDecision) => void;
   onSuggestion?: (text: string) => void;
-  onAnswer?: (payload: unknown) => void;
+  /**
+   * 把交互卡片上的操作回写成那次工具调用的结果(缺省 → 卡片不可操作)。
+   * 卡片不再知道「答案怎么变成消息」—— 它只认自己的 toolCallId。
+   */
+  onRespond?: (toolCallId: string, response: unknown) => Promise<boolean>;
   /** 点击定时任务卡片:宿主决定跳到哪(缺省 → 卡片不可点)。 */
   onOpenSchedule?: (scheduleId: string) => void;
   onCopy?: (text: string) => void;
@@ -98,43 +126,54 @@ function UserBubble({
   entry,
   onCopy,
   copied,
+  renderFile,
   resolveUrl,
 }: {
   entry: Extract<CloudOsEntry, { type: "user" }>;
   onCopy: (text: string) => void;
   copied: boolean;
+  renderFile?: FileRenderer;
   resolveUrl?: CloudOsUrlResolver;
 }) {
   return (
     <div className="group/message relative flex flex-col items-end">
+      {entry.capabilities.length > 0 && (
+        <div className="mb-1.5 flex max-w-[min(680px,78%)] flex-wrap justify-end gap-1.5">
+          {entry.capabilities.map((capability) => (
+            <CapabilityChip
+              key={`${capability.kind}:${capability.name}`}
+              kind={capability.kind}
+              label={capability.label}
+            />
+          ))}
+        </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) =>
-            attachment.mediaType?.startsWith("image/") ? (
-              <img
-                key={`${attachment.url}:${index}`}
-                src={attachment.url}
-                alt={attachment.filename ?? "Attachment"}
-                className="themed-thumbnail-shadow max-h-52 max-w-64 rounded-xl border border-kumo-line object-cover"
-              />
+        <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="inline-flex items-center gap-1.5 rounded-lg border border-kumo-line bg-kumo-elevated px-2.5 py-1.5 text-[12px] leading-4 text-kumo-subtle"
+                className="flex basis-full justify-end"
               >
-                <FileIcon size={13} className="text-kumo-inactive" />
-                {attachment.filename ?? "Attachment"}
+                {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 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">
+          <MarkdownMessage message={entry.text} resolveUrl={resolveUrl} />
         </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">
@@ -164,22 +203,25 @@ function UserBubble({
 export function CloudOsChatMessages({
   messages,
   status,
-  isHydrating = false,
+  turnActive,
   isRecovering = false,
   recoveryStatusLabel,
+  awaitingApproval = false,
   hasPendingSteer = false,
   startedWithPending = false,
   error,
   showThinkingTraces = true,
   approvalIdOf,
   approvalsDisabled = false,
+  renderApproval,
+  renderFile,
   resolveUrl,
   constrainWidth = true,
   emptyTitle = "What are we working on?",
   onRetry,
   onApprove,
   onSuggestion,
-  onAnswer,
+  onRespond,
   onOpenSchedule,
   onCopy,
 }: CloudOsChatMessagesProps) {
@@ -193,7 +235,8 @@ export function CloudOsChatMessages({
     ReadonlySet<string>
   >(() => new Set());
   const { copied, copy } = useCopyAction();
-  const isActive = status === "submitted" || status === "streaming";
+  const isActive =
+    turnActive ?? (status === "submitted" || status === "streaming");
 
   const entries = useMemo(
     () =>
@@ -246,14 +289,13 @@ export function CloudOsChatMessages({
     element.scrollTo({ top: element.scrollHeight });
   }, [isRecovering, messages, status, showScrollButton]);
 
-  // 只有在「本回合还没吐出任何可见内容」时才显示 Thinking 占位;一旦有真实输出,
-  // 输出自己会说话(照搬原文件的 showThinking 判据)。
-  const lastEntry = entries.at(-1) ?? null;
-  const awaitingFirstOutput =
-    isActive &&
-    (lastEntry === null ||
-      lastEntry.type === "user" ||
-      lastEntry.type === "slashCommand");
+  const activity = deriveTurnActivity(entries, {
+    isActive,
+    isRecovering,
+    recoveryStatusLabel,
+    awaitingApproval,
+    hasPendingSteer,
+  });
   const copyText = (text: string) => {
     copy(text);
     onCopy?.(text);
@@ -264,7 +306,7 @@ 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}
+      aria-busy={isActive || isRecovering}
     >
       <div
         ref={scrollRef}
@@ -279,7 +321,7 @@ export function CloudOsChatMessages({
             constrainWidth ? "mx-auto w-full max-w-[920px]" : ""
           }`}
         >
-          {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>
@@ -295,6 +337,7 @@ export function CloudOsChatMessages({
                     entry={entry}
                     onCopy={copyText}
                     copied={copied === entry.text}
+                    renderFile={renderFile}
                     resolveUrl={resolveUrl}
                   />
                 </div>
@@ -304,7 +347,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>
@@ -395,9 +438,17 @@ export function CloudOsChatMessages({
                     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 =
+                          isActive &&
+                          entryIndex === entries.length - 1 &&
+                          block === entry.blocks.at(-1);
                         return (
                           <div
                             key={block.key}
@@ -406,9 +457,11 @@ export function CloudOsChatMessages({
                             <MarkdownMessage
                               message={block.text}
                               resolveUrl={resolveUrl}
+                              streaming={streaming}
                             />
                           </div>
                         );
+                      }
                       case "toolGroup":
                         return (
                           <ToolGroupRow
@@ -432,8 +485,7 @@ export function CloudOsChatMessages({
                           <AskUserBlock
                             key={block.key}
                             call={block.call}
-                            answeredText={block.answeredText}
-                            onAnswer={(payload) => onAnswer?.(payload)}
+                            onRespond={onRespond}
                           />
                         );
                       case "suggestions":
@@ -452,7 +504,18 @@ export function CloudOsChatMessages({
                             onOpen={onOpenSchedule}
                           />
                         );
-                      case "approval":
+                      case "approval": {
+                        const custom = renderApproval?.({
+                          approvalId: block.approvalId,
+                          toolName: block.call.toolName,
+                          input: block.call.input,
+                          disabled: approvalsDisabled,
+                        });
+                        if (custom !== undefined && custom !== null) {
+                          return (
+                            <Fragment key={block.key}>{custom}</Fragment>
+                          );
+                        }
                         return (
                           <ApprovalBlock
                             key={block.key}
@@ -462,6 +525,7 @@ export function CloudOsChatMessages({
                             onApprove={(id, decision) => onApprove?.(id, decision)}
                           />
                         );
+                      }
                       case "parallel":
                         return (
                           <ParallelBlock
@@ -476,13 +540,29 @@ export function CloudOsChatMessages({
                         );
                       case "image":
                         return (
-                          <figure key={block.key} className="my-1">
-                            <img
-                              src={resolveUrl?.(block.src) ?? block.src}
-                              alt={block.alt}
-                              className="max-h-[28rem] max-w-full rounded-xl border border-kumo-line object-contain"
-                            />
-                          </figure>
+                          <Fragment key={block.key}>
+                            {renderFileView(renderFile, {
+                              file: {
+                                url: resolveUrl?.(block.src) ?? block.src,
+                                filename: block.alt,
+                                mediaType: block.mediaType ?? "image/*",
+                              },
+                              placement: "assistant-message",
+                            })}
+                          </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>
                         );
                       case "error":
                         return (
@@ -543,19 +623,9 @@ export function CloudOsChatMessages({
             );
           })}
 
-          {isRecovering && (
-            <div className="mt-4 flex max-w-[860px] items-center gap-3 px-1.5 py-1 text-[14px] leading-5 tracking-[-0.25px]">
-              <span className="cos-thinking-shimmer">
-                {recoveryStatusLabel ?? "Reconnecting…"}
-              </span>
-            </div>
-          )}
-
-          {awaitingFirstOutput && (
+          {activity && (
             <div className="mt-5 inline-flex px-1.5 py-1 text-[14px] leading-5 tracking-[-0.25px]">
-              <span className="cos-thinking-shimmer">
-                {hasPendingSteer ? "Waiting for the current step to finish…" : "Thinking"}
-              </span>
+              <CloudOsActivityIndicator {...activity} />
             </div>
           )}
 
@@ -591,16 +661,6 @@ export function CloudOsChatMessages({
         <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>
-      )}
     </div>
   );
 }