@springbrand/message-panel 0.1.3-alpha.4 → 0.1.3-alpha.6

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

@@ -3,10 +3,10 @@ import { useCloudOsMode } from "../internal/theme-context";
 import type { CloudOsActivity } from "./transcript-model";
 
 /**
- * 回合还在跑、但屏幕上没有任何东西在动时的活动指示。
+ * 回合存活期间持续显示的全局活动指示。
  *
  * 用 thinking-orbs 的 canvas 球而不是一行 shimmer 文字:动画本身就是「还活着」
- * 的信号,文案只负责说清在干什么(`deriveTurnActivity` 给出的四种之一)。
+ * 的信号,文案只负责说清在干什么(`deriveTurnActivity` 给出的九种之一)。
  *
  * 和 `src/status.tsx` 的 `ThinkingIndicator` 是同一个上游球、同一套 role/aria
  * 形状,但**不共用实现** —— cloud-os 不 import `../src`(见 cloud-os/README.md,

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

@@ -5,7 +5,6 @@ import {
   CaretRight,
   Check,
   Copy,
-  File as FileIcon,
   Terminal,
 } from "@phosphor-icons/react";
 import {
@@ -37,6 +36,10 @@ import {
 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,
@@ -51,9 +54,12 @@ export type CloudOsChatStatus = "ready" | "submitted" | "streaming" | "error";
 export interface CloudOsChatMessagesProps {
   messages: readonly UIMessage[];
   status: CloudOsChatStatus;
+  /** 权威 Turn 生命周期;提供时替代本地 status 推断。 */
+  turnActive?: boolean;
   isHydrating?: boolean;
   isRecovering?: boolean;
   recoveryStatusLabel?: string;
+  awaitingApproval?: boolean;
   /** 有 pending steer 时,活动占位说明「正在等当前步骤收尾」。 */
   hasPendingSteer?: boolean;
   /** 首帧就带着待发消息:此时不显示空会话欢迎语。 */
@@ -75,6 +81,8 @@ export interface CloudOsChatMessagesProps {
     input: Record<string, unknown>;
     disabled: boolean;
   }) => ReactNode;
+  /** 接管消息里的文件视图；未提供时使用包内 FileView。 */
+  renderFile?: FileRenderer;
   /** 把消息里的 `sandbox:/workspace/...` 之类地址翻译成可访问 URL。 */
   resolveUrl?: CloudOsUrlResolver;
   /** 消息区宽度是否收敛到 920px 居中(GadgetEditor 里叫 constrainChatWidth)。 */
@@ -119,11 +127,13 @@ function UserBubble({
   entry,
   onCopy,
   copied,
+  renderFile,
   resolveUrl,
 }: {
   entry: Extract<CloudOsEntry, { type: "user" }>;
   onCopy: (text: string) => void;
   copied: boolean;
+  renderFile?: FileRenderer;
   resolveUrl?: CloudOsUrlResolver;
 }) {
   return (
@@ -141,24 +151,14 @@ function UserBubble({
       )}
       {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"
-              />
-            ) : (
-              <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"
-              >
-                <FileIcon size={13} className="text-kumo-inactive" />
-                {attachment.filename ?? "Attachment"}
-              </span>
-            ),
-          )}
+          {entry.attachments.map((attachment, index) => (
+            <Fragment key={`${attachment.url}:${index}`}>
+              {renderFileView(renderFile, {
+                file: attachment,
+                placement: "user-message",
+              })}
+            </Fragment>
+          ))}
         </div>
       )}
       {entry.text && (
@@ -196,9 +196,11 @@ function UserBubble({
 export function CloudOsChatMessages({
   messages,
   status,
+  turnActive,
   isHydrating = false,
   isRecovering = false,
   recoveryStatusLabel,
+  awaitingApproval = false,
   hasPendingSteer = false,
   startedWithPending = false,
   error,
@@ -206,6 +208,7 @@ export function CloudOsChatMessages({
   approvalIdOf,
   approvalsDisabled = false,
   renderApproval,
+  renderFile,
   resolveUrl,
   constrainWidth = true,
   emptyTitle = "What are we working on?",
@@ -226,7 +229,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(
     () =>
@@ -279,10 +283,13 @@ export function CloudOsChatMessages({
     element.scrollTo({ top: element.scrollHeight });
   }, [isRecovering, messages, status, showScrollButton]);
 
-  // 判据是「尾巴有没有活口」,不是原文件的「本回合有没有出过内容」——
-  // 后者会让「答完 ask_user 之后到模型下一个 chunk」这段完全没有指示,
-  // 而卡片此时写着 Submitted,读起来就是卡死了。见 deriveTurnActivity。
-  const activity = deriveTurnActivity(entries, { isActive, hasPendingSteer });
+  const activity = deriveTurnActivity(entries, {
+    isActive,
+    isRecovering,
+    recoveryStatusLabel,
+    awaitingApproval,
+    hasPendingSteer,
+  });
   const copyText = (text: string) => {
     copy(text);
     onCopy?.(text);
@@ -293,7 +300,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 || isHydrating || isRecovering}
     >
       <div
         ref={scrollRef}
@@ -324,6 +331,7 @@ export function CloudOsChatMessages({
                     entry={entry}
                     onCopy={copyText}
                     copied={copied === entry.text}
+                    renderFile={renderFile}
                     resolveUrl={resolveUrl}
                   />
                 </div>
@@ -516,13 +524,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 (
@@ -583,14 +607,6 @@ 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>
-          )}
-
           {activity && (
             <div className="mt-5 inline-flex px-1.5 py-1 text-[14px] leading-5 tracking-[-0.25px]">
               <CloudOsActivityIndicator {...activity} />

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

@@ -3,8 +3,9 @@ import {
   CaretRight,
   Check,
   CircleNotch,
+  Clock,
+  Key,
   ListChecks,
-  ShieldCheck,
   UsersThree,
   WarningCircle,
 } from "@phosphor-icons/react";
@@ -18,7 +19,12 @@ import type {
   PlanStep,
   SubAgentView,
 } from "./transcript-model";
-import { askUserOutcome, type CloudOsToolCall } from "./tool-presentation";
+import {
+  askUserOutcome,
+  humanizeToolName,
+  safeStringify,
+  type CloudOsToolCall,
+} from "./tool-presentation";
 
 /**
  * UIMessage 协议里存在、gadgets 那套没有的几类 part —— 计划快照、原位提问、
@@ -357,6 +363,66 @@ function scheduleIdOf(output: unknown): string {
   return typeof id === "string" ? id : "";
 }
 
+export function ScheduleConfirmation({
+  input,
+  disabled = false,
+  onCancel,
+  onConfirm,
+}: {
+  input: Record<string, unknown>;
+  disabled?: boolean;
+  onCancel: () => void;
+  onConfirm: () => void;
+}) {
+  const name = String(input.label ?? input.title ?? "Scheduled task");
+  const prompt = typeof input.prompt === "string" && input.prompt.trim()
+    ? input.prompt.trim()
+    : "Run the scheduled task";
+
+  return (
+    <section
+      data-slot="schedule-card"
+      aria-label={`确认定时任务：${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)]"
+    >
+      <div className="flex items-center gap-2.5">
+        <span
+          className="flex size-7 shrink-0 items-center justify-center rounded-lg bg-kumo-fill/70 text-kumo-subtle"
+          aria-hidden="true"
+        >
+          <Clock size={14} />
+        </span>
+        <div className="flex min-w-0 flex-1 flex-col">
+          <span className="truncate text-[13.5px] leading-[18px] font-medium">
+            {name}
+          </span>
+          <span className="truncate font-mono text-[11px] leading-4 tracking-tight text-kumo-inactive">
+            {scheduleCadence(input)}
+          </span>
+        </div>
+      </div>
+
+      <div className="flex items-start gap-2 rounded-xl bg-kumo-fill/50 px-3 py-2">
+        <span className="shrink-0 font-mono text-[11px] leading-[18px] tracking-tight text-kumo-inactive">
+          task
+        </span>
+        <span className="min-w-0 flex-1 text-[13px] leading-[18px] text-kumo-subtle">
+          {prompt}
+        </span>
+      </div>
+
+      <div className="flex items-center justify-end gap-2">
+        <WorkshopButton disabled={disabled} onClick={onCancel}>
+          取消
+        </WorkshopButton>
+        <WorkshopButton tone="primary" disabled={disabled} onClick={onConfirm}>
+          {disabled ? "正在确认…" : "确认安排"}
+        </WorkshopButton>
+      </div>
+    </section>
+  );
+}
+
 export function ScheduleBlock({
   call,
   onOpen,
@@ -365,6 +431,8 @@ export function ScheduleBlock({
   /** 有 id 且宿主给了回调时,整张卡变成跳到「已安排」详情的按钮。 */
   onOpen?: (scheduleId: string) => void;
 }) {
+  // 待确认时由宿主把持久化审批渲染在输入框上方；这里不重复画第二张卡。
+  if (call.awaitingApproval) return null;
   const state = call.failed ? "failed" : call.running ? "running" : "scheduled";
   const scheduleId = state === "scheduled" ? scheduleIdOf(call.output) : "";
   const clickable = Boolean(scheduleId && onOpen);
@@ -432,10 +500,112 @@ export function ScheduleBlock({
   );
 }
 
-// ── 原位授权(照搬 renderActionCard 的 blocking callout)────────────────────
+// ── 原位授权 ──────────────────────────────────────────────
 
 export type ApprovalDecision = "deny" | "allow_once" | "allow_level";
 
+export function PermissionGrant({
+  capability,
+  requester,
+  reach,
+  disabled = false,
+  onGrant,
+  "aria-label": ariaLabel = `${capability} permission request`,
+}: {
+  capability: string;
+  requester: string;
+  reach: readonly string[];
+  disabled?: boolean;
+  onGrant: (decision: ApprovalDecision) => void;
+  "aria-label"?: string;
+}) {
+  const actionClassName =
+    "inline-flex h-8 items-center rounded-full px-3 text-[12px] leading-none font-medium tracking-[-0.25px] transition-[background-color,color,opacity,transform] duration-150 ease-out active:scale-[0.96] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-kumo-ring/40 disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100";
+
+  return (
+    <section
+      aria-label={ariaLabel}
+      className="themed-surface-inset w-full max-w-sm rounded-[20px] border border-kumo-line bg-kumo-elevated p-4 text-kumo-default shadow-sm"
+    >
+      <div className="flex items-center gap-2.5">
+        <span
+          className="flex size-7 shrink-0 items-center justify-center rounded-lg bg-kumo-fill/70 text-kumo-subtle"
+          aria-hidden="true"
+        >
+          <Key size={14} weight="bold" />
+        </span>
+        <div className="flex min-w-0 flex-1 flex-col">
+          <span className="truncate text-[13.5px] leading-[18px] font-medium">
+            {capability}
+          </span>
+          <span className="truncate text-[12px] leading-4 text-kumo-inactive">
+            requested by {requester}
+          </span>
+        </div>
+      </div>
+
+      <div className="mt-3.5 flex max-h-[200px] flex-col gap-1 overflow-y-auto pr-1">
+        <span className="font-mono text-[10px] leading-4 text-kumo-inactive">
+          this grants
+        </span>
+        {reach.map((item, index) => (
+          <span
+            key={`${index}:${item}`}
+            className="flex items-baseline gap-2 text-[12px] leading-[17px] text-kumo-subtle"
+          >
+            <span
+              className="size-1 shrink-0 rounded-full bg-kumo-interact"
+              aria-hidden="true"
+            />
+            <span className="min-w-0 break-words whitespace-pre-wrap">{item}</span>
+          </span>
+        ))}
+      </div>
+
+      <div className="mt-3.5 flex min-h-8 flex-wrap items-center justify-end gap-1">
+        <button
+          type="button"
+          disabled={disabled}
+          onClick={() => onGrant("deny")}
+          className={`${actionClassName} text-kumo-subtle enabled:hover:bg-kumo-fill enabled:hover:text-kumo-default`}
+        >
+          Deny
+        </button>
+        <button
+          type="button"
+          disabled={disabled}
+          onClick={() => onGrant("allow_once")}
+          className={`${actionClassName} text-kumo-subtle enabled:hover:bg-kumo-fill enabled:hover:text-kumo-default`}
+        >
+          Allow once
+        </button>
+        <Tooltip
+          content="Allow every action at this execution level, without future prompts."
+          asChild
+        >
+          <button
+            type="button"
+            disabled={disabled}
+            onClick={() => onGrant("allow_level")}
+            className={`${actionClassName} bg-kumo-contrast text-kumo-inverse enabled:hover:bg-kumo-strong`}
+          >
+            Allow level
+          </button>
+        </Tooltip>
+      </div>
+    </section>
+  );
+}
+
+function approvalReach(call: CloudOsToolCall): string[] {
+  const entries = Object.entries(call.input);
+  return entries.length > 0
+    ? entries.map(
+        ([name, value]) => `${humanizeToolName(name)}: ${safeStringify(value)}`,
+      )
+    : ["Run this tool without arguments"];
+}
+
 export function ApprovalBlock({
   call,
   approvalId,
@@ -447,70 +617,15 @@ export function ApprovalBlock({
   disabled?: boolean;
   onApprove: (approvalId: string, decision: ApprovalDecision) => void;
 }) {
-  const title = `${call.toolName} needs approval`;
-  const description =
-    Object.keys(call.input).length > 0
-      ? "```json\n" + JSON.stringify(call.input, null, 2) + "\n```"
-      : "This action pauses the turn until you decide.";
-
   return (
     <div className="group/work max-w-[860px] text-[14px] leading-5 tracking-[-0.25px] text-kumo-subtle">
-      {/* 原文件的 blocking callout 是「图标 + 正文 + 右侧动作」一行到底。聊天栏默认
-          只有 420px 宽,一行放不下三段,正文会被挤成 0 宽 —— 所以外层允许换行,
-          动作组在挤不下时整体落到下一行右对齐。 */}
-      <div className="rounded-2xl border border-kumo-brand/40 bg-kumo-brand/10 px-4 py-3">
-        <div className="flex flex-wrap items-start gap-3">
-          <span
-            className="flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-lg bg-kumo-tint text-kumo-brand"
-            aria-hidden="true"
-          >
-            <ShieldCheck size={20} weight="fill" />
-          </span>
-          <div className="min-w-[12rem] flex-1">
-            <div className="flex flex-wrap items-center gap-x-2 gap-y-0.5">
-              <span className="min-w-0 truncate font-medium text-kumo-default">
-                {title}
-              </span>
-            </div>
-            <div className="cos-chat-panel cos-markdown mt-1 max-h-[200px] overflow-y-auto pr-1 text-[13px] leading-[18px] text-kumo-subtle">
-              <MarkdownMessage message={description} />
-            </div>
-          </div>
-          <div className="ml-auto flex flex-wrap items-center justify-end gap-1 self-center">
-            <Tooltip content="Reject this action and let the agent continue without it." asChild>
-              <WorkshopButton
-                tone="secondary"
-                disabled={disabled}
-                onClick={() => onApprove(approvalId, "deny")}
-                className="!h-8 !rounded-lg text-[12px]"
-              >
-                Deny
-              </WorkshopButton>
-            </Tooltip>
-            <Tooltip content="Allow just this call." asChild>
-              <WorkshopButton
-                tone="secondary"
-                disabled={disabled}
-                onClick={() => onApprove(approvalId, "allow_once")}
-                className="!h-8 !rounded-lg text-[12px]"
-              >
-                Allow once
-              </WorkshopButton>
-            </Tooltip>
-            <Tooltip content="Allow every action at this execution level, without future prompts." asChild>
-              <WorkshopButton
-                tone="primary"
-                disabled={disabled}
-                onClick={() => onApprove(approvalId, "allow_level")}
-                className="!h-8 gap-1 !rounded-lg text-[12px]"
-              >
-                <Check size={11} weight="bold" />
-                Allow level
-              </WorkshopButton>
-            </Tooltip>
-          </div>
-        </div>
-      </div>
+      <PermissionGrant
+        capability={humanizeToolName(call.toolName)}
+        requester="the agent"
+        reach={approvalReach(call)}
+        disabled={disabled}
+        onGrant={(decision) => onApprove(approvalId, decision)}
+      />
     </div>
   );
 }

package/cloud-os/chat/tool-presentation.ts

@@ -145,7 +145,7 @@ function truncate(value: string, maxLength: number): string {
   return value.length <= maxLength ? value : `${value.slice(0, maxLength - 1)}…`;
 }
 
-function humanize(name: string): string {
+export function humanizeToolName(name: string): string {
   const spaced = name
     .replace(/^mcp__/, "")
     .replace(/__/g, " ")
@@ -343,7 +343,7 @@ export function getToolCallSummary(call: CloudOsToolCall): {
     case "agent": {
       const name =
         stringField(input, "subagentName", "agent", "name", "agentType") ||
-        humanize(toolName);
+        humanizeToolName(toolName);
       return { verb: running ? "Running" : "Ran", target: name };
     }
     case "skill": {
@@ -378,13 +378,15 @@ export function getToolCallSummary(call: CloudOsToolCall): {
       const [, server = "", ...rest] = toolName.split("__");
       return {
         verb: running ? "Calling" : "Called",
-        target: rest.length ? `${humanize(rest.join(" "))} · ${humanize(server)}` : undefined,
+        target: rest.length
+          ? `${humanizeToolName(rest.join(" "))} · ${humanizeToolName(server)}`
+          : undefined,
       };
     }
     case "generic":
       break;
   }
-  const displayName = humanize(toolName);
+  const displayName = humanizeToolName(toolName);
   return { verb: running ? `Using ${displayName}` : `Used ${displayName}` };
 }
 
@@ -435,7 +437,7 @@ export function describeToolCallCount(
     case "generic":
       break;
   }
-  const displayName = humanize(toolName);
+  const displayName = humanizeToolName(toolName);
   return count === 1 ? `Used ${displayName}` : `Used ${displayName} ${formatTimes(count)}`;
 }
 

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

@@ -5,6 +5,7 @@ import {
   buildToolCallGroups,
   toCloudOsToolCall,
   type CloudOsToolCall,
+  type CloudOsToolKind,
   type ToolCallGroup,
 } from "./tool-presentation";
 
@@ -65,7 +66,14 @@ export type AssistantBlock =
   | { kind: "approval"; key: string; call: CloudOsToolCall; approvalId: string }
   | { kind: "parallel"; key: string; label: string; tools: ParallelTool[] }
   | { kind: "subagents"; key: string; agents: SubAgentView[] }
-  | { kind: "image"; key: string; src: string; alt: string }
+  | {
+      kind: "image";
+      key: string;
+      src: string;
+      alt: string;
+      mediaType?: string;
+    }
+  | { kind: "file"; key: string; file: CloudOsAttachment }
   | { kind: "error"; key: string; title: string; body?: string };
 
 export interface ParallelTool {
@@ -376,15 +384,32 @@ function assistantBlocks(
       const data = dataOf(part);
       const src = String(data.src ?? data.url ?? record.url ?? "");
       const mediaType = String(record.mediaType ?? data.mediaType ?? "");
-      if (src && (dataKind === "image" || mediaType.startsWith("image/"))) {
-        flush();
+      if (!src) return;
+
+      flush();
+      const filename = String(
+        data.alt ?? data.filename ?? record.filename ?? "Attachment",
+      );
+      if (dataKind === "image" || mediaType.startsWith("image/")) {
         blocks.push({
           kind: "image",
           key,
           src,
-          alt: String(data.alt ?? data.filename ?? record.filename ?? "Image"),
+          alt: filename,
+          mediaType: mediaType || undefined,
         });
+        return;
       }
+
+      blocks.push({
+        kind: "file",
+        key,
+        file: {
+          url: src,
+          filename,
+          mediaType: mediaType || undefined,
+        },
+      });
       return;
     }
 
@@ -596,75 +621,124 @@ export interface CloudOsActivity {
   label: string;
 }
 
-/**
- * 尾巴是否**自己会说话** —— 有它在动,就不该再挂一个活动指示器。
- *
- * 正在流的正文/思考、还在跑的工具组或计划,以及一张**还等着你作答**的
- * `ask_user` 卡都算:前三者自身就有动效,最后一个等的是人不是模型,这时候
- * 显示「Thinking」是在撒谎。
- */
-function isLiveBlock(block: AssistantBlock): boolean {
+const SEARCHING_TOOL_KINDS: ReadonlySet<CloudOsToolKind> = new Set([
+  "read",
+  "glob",
+  "grep",
+  "list",
+  "web-search",
+  "web-fetch",
+]);
+const SHAPING_TOOL_KINDS: ReadonlySet<CloudOsToolKind> = new Set([
+  "write",
+  "edit",
+  "tasks",
+  "create-agent",
+  "publish-extension",
+]);
+
+function activityForTool(call: CloudOsToolCall | undefined): CloudOsActivity {
+  if (!call) return { state: "working", label: "Working…" };
+  const name = call.toolName.replaceAll("-", "_").toLowerCase();
+  if (call.kind === "agent") {
+    return {
+      state: "weaving",
+      label: call.running ? "Coordinating agents…" : "Combining results…",
+    };
+  }
+  if (SEARCHING_TOOL_KINDS.has(call.kind)) {
+    return {
+      state: "searching",
+      label: call.running ? "Searching…" : "Reading results…",
+    };
+  }
+  if (SHAPING_TOOL_KINDS.has(call.kind)) {
+    return { state: "shaping", label: "Shaping result…" };
+  }
+  if (call.kind === "skill" || name === "activate_skill") {
+    return { state: "working", label: "Loading skill…" };
+  }
+  if (name === "run_skill_script") {
+    return { state: "working", label: "Running skill…" };
+  }
+  return { state: "working", label: "Working…" };
+}
+
+function activityForTail(block: AssistantBlock | undefined): CloudOsActivity {
+  if (!block) return { state: "solving", label: "Thinking…" };
   switch (block.kind) {
-    case "text":
     case "reasoning":
-      return true;
+      return { state: "solving", label: "Reasoning…" };
+    case "text":
+    case "suggestions":
+      return { state: "composing", label: "Composing answer…" };
     case "toolGroup":
-      return block.group.hasRunning;
+      return activityForTool(block.group.calls.at(-1));
     case "plan":
-      return block.running;
+    case "image":
+    case "file":
+      return { state: "shaping", label: "Shaping result…" };
     case "askUser":
-      return block.pending;
-    // approval 块只在 awaitingApproval 时才建出来,所以它在场就是在等人。
+      return block.pending
+        ? { state: "listening", label: "Waiting for your answer…" }
+        : { state: "solving", label: "Picking up your answer…" };
     case "approval":
-      return true;
+      return { state: "breathing", label: "Waiting for approval…" };
+    case "schedule":
+      return block.call.awaitingApproval
+        ? { state: "breathing", label: "Waiting for approval…" }
+        : { state: "working", label: "Working…" };
     case "parallel":
-      return block.tools.some((tool) => tool.status === "running");
+      return {
+        state: "weaving",
+        label: block.tools.some((tool) => tool.status === "running")
+          ? "Coordinating tasks…"
+          : "Combining results…",
+      };
     case "subagents":
-      return block.agents.some((agent) => agent.status === "running");
+      return {
+        state: "weaving",
+        label: block.agents.some((agent) => agent.status === "running")
+          ? "Coordinating agents…"
+          : "Combining results…",
+      };
     default:
-      return false;
-  }
-}
-
-// 已结算的尾巴 → 此刻真正在发生的事。措辞刻意只说得出口的那部分:
-// 工具跑完了,模型在读它的输出;卡答完了,模型在接你的答案。
-function activityForTail(block: AssistantBlock | undefined): CloudOsActivity {
-  if (!block) return { state: "solving", label: "Thinking…" };
-  if (block.kind === "askUser") {
-    return { state: "solving", label: "Picking up your answer…" };
-  }
-  if (block.kind === "toolGroup") {
-    const kind = block.group.calls.at(-1)?.kind;
-    return kind !== undefined &&
-        ["web-search", "web-fetch", "grep", "glob", "list", "read"].includes(
-          kind,
-        )
-      ? { state: "searching", label: "Reading results…" }
-      : { state: "working", label: "Working…" };
+      return { state: "working", label: "Working…" };
   }
-  return { state: "working", label: "Working…" };
 }
 
 /**
- * 本回合此刻该显示什么活动;`null` = 尾巴自己会说话,别再叠一个。
- *
- * @remarks
- * 判据是「**尾巴有没有活口**」,不是「本回合有没有出过内容」。后者曾经是这里的
- * 写法,于是答完 `ask_user`(卡片变成 Submitted,读起来就是"结束了")到模型下一
- * 个 chunk 之间整屏没有任何在跑的迹象 —— 而那段恰好是最长的一次 TTFT,看起来
- * 就是卡死。凡是尾巴为**已结算卡片**的断档都是同一个洞,这里一并补上。
+ * 回合活着时始终返回一个 Orb 状态;只有回合终止时才返回 `null`。
  */
 export function deriveTurnActivity(
   entries: readonly CloudOsEntry[],
-  options: { isActive: boolean; hasPendingSteer?: boolean },
+  options: {
+    isActive: boolean;
+    isRecovering?: boolean;
+    recoveryStatusLabel?: string;
+    awaitingApproval?: boolean;
+    hasPendingSteer?: boolean;
+  },
 ): CloudOsActivity | null {
+  if (options.isRecovering) {
+    return {
+      state: "connecting",
+      label: options.recoveryStatusLabel ?? "Reconnecting…",
+    };
+  }
   if (!options.isActive) return null;
+  if (options.awaitingApproval) {
+    return { state: "breathing", label: "Waiting for approval…" };
+  }
+  if (options.hasPendingSteer) {
+    return {
+      state: "breathing",
+      label: "Waiting for the current step to finish…",
+    };
+  }
   const tail = entries.at(-1) ?? null;
   const block = tail?.type === "assistant" ? tail.blocks.at(-1) : undefined;
-  if (block && isLiveBlock(block)) return null;
-  return options.hasPendingSteer
-    ? { state: "solving", label: "Waiting for the current step to finish…" }
-    : activityForTail(block);
+  return activityForTail(block);
 }
 
 // ── 行间距节奏(照搬原 rhythmTopClass)──────────────────────────────────────

package/cloud-os/composer/cloud-os-chat-input.tsx

@@ -6,7 +6,6 @@ import {
   Plug,
   Plus,
   Terminal,
-  X,
 } from "@phosphor-icons/react";
 import {
   AssistantRuntimeProvider,
@@ -20,6 +19,7 @@ import {
 } from "@assistant-ui/react";
 import { ComposerTriggerPopover } from "@springbrand/message-panel/composer";
 import {
+  Fragment,
   useCallback,
   useEffect,
   useMemo,
@@ -32,6 +32,10 @@ import { DropdownMenu } from "../primitives/dropdown-menu";
 import { Tooltip } from "../primitives/tooltip";
 import { WorkshopIconButton } from "../primitives/workshop-controls";
 import { CapabilityChip } from "../capability-chip";
+import {
+  renderFileView,
+  type FileRenderer,
+} from "../file-view";
 
 const isComposingKeyEvent = (event: {
   isComposing?: boolean;
@@ -74,6 +78,7 @@ export interface CloudOsAttachmentView {
   mediaType?: string;
   size?: number;
   previewUrl?: string;
+  progress?: number;
   status: "uploading" | "ready" | "error";
 }
 
@@ -90,6 +95,8 @@ export interface CloudOsChatInputProps {
   onFilesSelected?: (files: readonly File[]) => void;
   onAttachmentRemove?: (id: string) => void;
   onAttachmentRetry?: (id: string) => void;
+  /** 接管输入框附件视图；未提供时使用包内 FileView。 */
+  renderFile?: FileRenderer;
   /** 底部左侧的额外控件(宿主的 Agent 档位设置等)。 */
   tools?: ReactNode;
   /** 发送键左边的额外控件(宿主的「引导 / 排队」投递方式)。 */
@@ -123,7 +130,7 @@ export interface CloudOsChatInputProps {
   footnote?: ReactNode;
 }
 
-const MAX_PENDING_ATTACHMENTS = 5;
+const MAX_PENDING_ATTACHMENTS = 8;
 
 function commandLabel(command: CloudOsComposerCommand): string {
   return `${command.prefix ?? "/"}${command.name.replaceAll("-", " ")}`;
@@ -159,6 +166,7 @@ function CloudOsChatInputContent({
   onFilesSelected,
   onAttachmentRemove,
   onAttachmentRetry,
+  renderFile,
   tools,
   submitControl,
   submissionBlocked = false,
@@ -460,48 +468,25 @@ function CloudOsChatInputContent({
         {attachments.length > 0 && (
           <div className="flex flex-wrap items-center gap-2 px-3 pb-2 pt-1">
             {attachments.map((attachment) => (
-              <div
-                key={attachment.id}
-                className="relative flex h-14 w-14 items-center justify-center overflow-hidden rounded-lg border border-kumo-line/70 bg-kumo-elevated"
-              >
-                {attachment.previewUrl ? (
-                  <img
-                    src={attachment.previewUrl}
-                    alt={attachment.filename ?? "Attached file"}
-                    className="h-full w-full object-cover"
-                  />
-                ) : (
-                  <FileIcon size={22} className="text-kumo-inactive" />
-                )}
-                {attachment.status === "uploading" && (
-                  <div className="absolute inset-0 grid place-items-center rounded-lg bg-black/35 text-[10px] text-white">
-                    Uploading
-                  </div>
-                )}
-                {attachment.status === "error" && (
-                  <div className="absolute inset-0 grid place-items-center rounded-lg bg-kumo-danger/80 px-1 text-center text-[9px] leading-3 text-white">
-                    Failed
-                  </div>
-                )}
-                {attachment.status === "error" && onAttachmentRetry && (
-                  <button
-                    type="button"
-                    aria-label="Retry upload"
-                    onClick={() => onAttachmentRetry(attachment.id)}
-                    className="absolute inset-0 cursor-pointer"
-                  />
-                )}
-                {onAttachmentRemove && (
-                  <button
-                    type="button"
-                    aria-label="Remove attachment"
-                    onClick={() => onAttachmentRemove(attachment.id)}
-                    className="absolute right-0.5 top-0.5 flex h-4 w-4 cursor-pointer items-center justify-center rounded-full bg-black/55 text-white hover:bg-black/75 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/80"
-                  >
-                    <X size={10} weight="bold" />
-                  </button>
-                )}
-              </div>
+              <Fragment key={attachment.id}>
+                {renderFileView(renderFile, {
+                  file: {
+                    url: attachment.previewUrl,
+                    filename: attachment.filename,
+                    mediaType: attachment.mediaType,
+                    size: attachment.size,
+                  },
+                  placement: "composer",
+                  status: attachment.status,
+                  progress: attachment.progress,
+                  onRemove: onAttachmentRemove
+                    ? () => onAttachmentRemove(attachment.id)
+                    : undefined,
+                  onRetry: onAttachmentRetry
+                    ? () => onAttachmentRetry(attachment.id)
+                    : undefined,
+                })}
+              </Fragment>
             ))}
           </div>
         )}

package/cloud-os/file-view.tsx

@@ -0,0 +1,258 @@
+import { File as FileIcon } from "@phosphor-icons/react";
+import {
+  CheckIcon,
+  FileArchiveIcon,
+  FileImageIcon,
+  FileTextIcon,
+  Loader2Icon,
+  RotateCcwIcon,
+  XIcon,
+} from "lucide-react";
+import {
+  useEffect,
+  useRef,
+  useState,
+  type ComponentType,
+} from "react";
+
+export type FileViewPlacement =
+  | "assistant-message"
+  | "composer"
+  | "user-message";
+
+export type FileViewStatus = "error" | "ready" | "uploading";
+
+export interface FileViewFile {
+  url?: string;
+  filename?: string;
+  mediaType?: string;
+  size?: number;
+}
+
+export interface FileViewProps {
+  file: FileViewFile;
+  placement: FileViewPlacement;
+  status?: FileViewStatus;
+  progress?: number;
+  onRemove?: () => void;
+  onRetry?: () => void;
+}
+
+export type FileRenderer = ComponentType<FileViewProps>;
+
+function fileMeta(file: FileViewFile): string {
+  if (file.size === undefined) return "Ready";
+  if (file.size < 1024) return `${file.size} B`;
+  if (file.size < 1024 * 1024) return `${Math.round(file.size / 1024)} KB`;
+  return `${(file.size / 1024 / 1024).toFixed(1)} MB`;
+}
+
+function attachmentIcon(file: FileViewFile) {
+  if (file.mediaType?.startsWith("image/")) return FileImageIcon;
+  if (/zip|archive|compressed/i.test(file.mediaType ?? "")) {
+    return FileArchiveIcon;
+  }
+  return FileTextIcon;
+}
+
+function ImageFileView({
+  src,
+  label,
+  placement,
+}: {
+  src: string;
+  label: string;
+  placement: Exclude<FileViewPlacement, "composer">;
+}) {
+  const imageRef = useRef<HTMLImageElement>(null);
+  const [loadedSrc, setLoadedSrc] = useState<string>();
+  const [errorSrc, setErrorSrc] = useState<string>();
+  const loaded = loadedSrc === src;
+  const error = errorSrc === src;
+
+  useEffect(() => {
+    const image = imageRef.current;
+    if (!image?.complete) return;
+    if (image.naturalWidth > 0) setLoadedSrc(src);
+    else setErrorSrc(src);
+  }, [src]);
+
+  const assistant = placement === "assistant-message";
+  const previewClassName = assistant
+    ? "relative inline-block max-w-full overflow-hidden rounded-xl border border-kumo-line align-bottom"
+    : "themed-thumbnail-shadow relative inline-block max-w-64 overflow-hidden rounded-xl border border-kumo-line align-bottom";
+
+  return (
+    <span
+      className={`${previewClassName} ${loaded && !error ? "" : "min-h-24 min-w-36"}`}
+      data-file-view=""
+      data-placement={placement}
+    >
+      <img
+        ref={imageRef}
+        src={src}
+        alt={label}
+        className={`${
+          assistant
+            ? "block max-h-[28rem] max-w-full object-contain"
+            : "block max-h-52 max-w-64 object-cover"
+        } ${loaded && !error ? "" : "invisible"}`}
+        decoding="async"
+        loading="lazy"
+        onLoad={() => {
+          setLoadedSrc(src);
+          setErrorSrc(undefined);
+        }}
+        onError={() => setErrorSrc(src)}
+      />
+      {!loaded && !error && (
+        <span
+          className="absolute inset-0 flex min-h-24 min-w-36 items-center justify-center bg-kumo-elevated text-kumo-inactive"
+          data-image-state="loading"
+          role="status"
+        >
+          <FileImageIcon
+            className="size-6 animate-pulse motion-reduce:animate-none"
+            aria-hidden="true"
+          />
+          <span className="sr-only">Loading {label}</span>
+        </span>
+      )}
+      {error && (
+        <span
+          className="absolute inset-0 flex min-h-24 min-w-36 items-center justify-center bg-kumo-elevated text-kumo-danger"
+          data-image-state="error"
+          role="img"
+          aria-label={`Unable to load ${label}`}
+        >
+          <FileImageIcon className="size-6" aria-hidden="true" />
+        </span>
+      )}
+    </span>
+  );
+}
+
+/**
+ * Cloud OS 的默认文件视图。宿主可通过 `renderFile` 在同一 seam 替换它。
+ */
+export function FileView({
+  file,
+  placement,
+  status = "ready",
+  progress = 0,
+  onRemove,
+  onRetry,
+}: FileViewProps) {
+  const isImage = Boolean(file.url && file.mediaType?.startsWith("image/"));
+  const label = file.filename ?? "Attachment";
+
+  if (placement === "composer") {
+    const AttachmentIcon = attachmentIcon(file);
+    const meta =
+      status === "uploading"
+        ? "Uploading"
+        : status === "error"
+          ? "Upload failed"
+          : fileMeta(file);
+
+    return (
+      <div
+        className="relative flex items-center gap-2.5 overflow-hidden rounded-[14px] bg-kumo-elevated py-1.5 ps-1.5 pe-2.5"
+        data-file-view=""
+        data-placement={placement}
+        data-status={status}
+        data-slot="composer-attachment"
+        data-state={status === "ready" ? "done" : status}
+      >
+        <span className="flex size-8 shrink-0 items-center justify-center rounded-[10px] bg-kumo-control text-kumo-inactive themed-thumbnail-shadow">
+          <AttachmentIcon className="size-4" aria-hidden="true" />
+        </span>
+        <span className="flex min-w-0 flex-col">
+          <span className="max-w-36 truncate text-xs font-medium text-kumo-default">
+            {label}
+          </span>
+          <span
+            className={
+              status === "error"
+                ? "text-[11px] text-kumo-danger"
+                : "text-[11px] text-kumo-inactive"
+            }
+          >
+            {meta}
+          </span>
+        </span>
+        <span className="ms-1 flex w-5 items-center justify-end">
+          {status === "uploading" ? (
+            <Loader2Icon
+              className="size-3.5 animate-spin text-kumo-inactive motion-reduce:animate-none"
+              aria-label="Uploading"
+            />
+          ) : status === "error" && onRetry ? (
+            <button
+              type="button"
+              aria-label={`Retry ${label}`}
+              onClick={onRetry}
+              className="grid size-5 place-items-center rounded-full text-kumo-danger hover:bg-kumo-tint focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-kumo-brand/40"
+            >
+              <RotateCcwIcon className="size-3" aria-hidden="true" />
+            </button>
+          ) : status === "ready" && onRemove ? (
+            <button
+              type="button"
+              aria-label={`Remove ${label}`}
+              onClick={onRemove}
+              className="grid size-5 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"
+            >
+              <XIcon className="size-3" aria-hidden="true" />
+            </button>
+          ) : status === "ready" ? (
+            <CheckIcon className="size-3.5 text-kumo-success" aria-label="Ready" />
+          ) : null}
+        </span>
+        {status !== "ready" && onRemove && (
+          <button
+            type="button"
+            aria-label={`Remove ${label}`}
+            onClick={onRemove}
+            className="grid size-5 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"
+          >
+            <XIcon className="size-3" aria-hidden="true" />
+          </button>
+        )}
+        {status === "uploading" && (
+          <span
+            aria-hidden="true"
+            className="absolute inset-x-0 bottom-0 h-0.5 bg-kumo-brand/70 transition-[width] duration-300"
+            style={{ width: `${Math.min(100, Math.max(0, progress * 100))}%` }}
+          />
+        )}
+      </div>
+    );
+  }
+
+  if (isImage) {
+    return (
+      <ImageFileView src={file.url!} label={label} placement={placement} />
+    );
+  }
+
+  return (
+    <span
+      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"
+      data-file-view=""
+      data-placement={placement}
+    >
+      <FileIcon size={13} className="text-kumo-inactive" />
+      {label}
+    </span>
+  );
+}
+
+/** 宿主没有接管时回退到包内默认视图。 */
+export function renderFileView(
+  renderFile: FileRenderer | undefined,
+  props: FileViewProps,
+) {
+  const Renderer = renderFile ?? FileView;
+  return <Renderer {...props} />;
+}

package/cloud-os/index.ts

@@ -13,6 +13,14 @@
 export { CloudOsRoot } from "./layout/cloud-os-root";
 export { CapabilityChip } from "./capability-chip";
 export type { CapabilityChipProps } from "./capability-chip";
+export { FileView } from "./file-view";
+export type {
+  FileRenderer,
+  FileViewFile,
+  FileViewPlacement,
+  FileViewProps,
+  FileViewStatus,
+} from "./file-view";
 export { CloudOsWorkspaceSplit } from "./layout/cloud-os-workspace-split";
 export type { CloudOsWorkspaceSplitProps } from "./layout/cloud-os-workspace-split";
 
@@ -58,7 +66,9 @@ export {
   ErrorBlock,
   ParallelBlock,
   PlanBlock,
+  PermissionGrant,
   ScheduleBlock,
+  ScheduleConfirmation,
   SubAgentsBlock,
   SuggestionsBlock,
 } from "./chat/rich-blocks";
@@ -92,6 +102,7 @@ export {
   canonicalToolKind,
   getToolCallSummary,
   getToolIcon,
+  humanizeToolName,
   toCloudOsToolCall,
   toolNameOfPart,
 } from "./chat/tool-presentation";

package/demo/cloud-os-chat-showcase.tsx

@@ -347,9 +347,20 @@ export function CloudOsChatShowcase() {
             <CloudOsChatMessages
               messages={messages}
               status={status}
+              turnActive={
+                status === "submitted" ||
+                status === "streaming" ||
+                scenario === "ask" ||
+                ((scenario === "approval" || scenario === "schedule_cancel") &&
+                  approval === undefined)
+              }
               isHydrating={scenario === "hydrating"}
               isRecovering={scenario === "recovering"}
               recoveryStatusLabel="模型响应暂时中断,正在重试…"
+              awaitingApproval={
+                (scenario === "approval" || scenario === "schedule_cancel") &&
+                approval === undefined
+              }
               showThinkingTraces={showThinkingTraces}
               approvalIdOf={approvalIdOf}
               error={statusError}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@springbrand/message-panel",
-  "version": "0.1.3-alpha.4",
+  "version": "0.1.3-alpha.6",
   "type": "module",
   "files": [
     "src",
@@ -35,7 +35,7 @@
     "react-markdown": "^10.1.0",
     "remark-gfm": "^4.0.1",
     "streamdown": "^2.5.0",
-    "thinking-orbs": "0.1.1",
+    "thinking-orbs": "0.2.0",
     "use-stick-to-bottom": "^1.1.6"
   },
   "devDependencies": {