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

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

@@ -35,6 +35,8 @@ import {
 } from "./rich-blocks";
 import { ThinkingTraceRow, ToolGroupRow } from "./tool-rows";
 import { CloudOsActivityIndicator } from "./activity-indicator";
+import { ProductGeneration } from "./image-generation";
+import { GenerationLoader } from "./loading-state";
 import { CapabilityChip } from "../capability-chip";
 import {
   renderFileView,
@@ -47,6 +49,7 @@ import {
   formatFullTimestamp,
   rhythmTopClass,
   type CloudOsEntry,
+  type CloudOsActionPresentation,
 } from "./transcript-model";
 
 export type CloudOsChatStatus = "ready" | "submitted" | "streaming" | "error";
@@ -200,6 +203,83 @@ function UserBubble({
   );
 }
 
+function ActionPresentationBlock({
+  presentation,
+  renderFile,
+  resolveUrl,
+}: {
+  presentation: CloudOsActionPresentation;
+  renderFile?: FileRenderer;
+  resolveUrl?: CloudOsUrlResolver;
+}) {
+  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) => (
+            <Fragment key={`${file.url}:${index}`}>
+              {renderFileView(renderFile, {
+                file: {
+                  ...file,
+                  filename: "Generated file",
+                  url: resolveUrl?.(file.url) ?? file.url,
+                },
+                placement: "assistant-message",
+                variant: "product",
+              })}
+            </Fragment>
+          ))}
+      </div>
+    );
+  }
+
+  const product = presentation.produces;
+  const productName = product?.type ?? "other";
+  const isFileProduct = productName !== "data" && productName !== "other";
+  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."
+      : 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">
+          {state === "failed" ? "Generation failed" : "Status unavailable"}
+        </strong>
+        {body && <span className="block text-kumo-subtle">{body}</span>}
+      </span>
+    </div>
+  );
+}
+
 export function CloudOsChatMessages({
   messages,
   status,
@@ -564,6 +644,15 @@ export function CloudOsChatMessages({
                             })}
                           </Fragment>
                         );
+                      case "actionPresentation":
+                        return (
+                          <ActionPresentationBlock
+                            key={block.key}
+                            presentation={block.presentation}
+                            renderFile={renderFile}
+                            resolveUrl={resolveUrl}
+                          />
+                        );
                       case "error":
                         return (
                           <ErrorBlock

package/cloud-os/chat/image-generation.tsx

@@ -0,0 +1,76 @@
+import type { CloudOsActionPresentation } from "./transcript-model";
+
+export type ProductType = NonNullable<CloudOsActionPresentation["produces"]>["type"];
+
+export const PRODUCT_PRESETS = {
+  image: { frame: "aspect-square w-52", columns: 6, rows: 6 },
+  video: { frame: "aspect-video w-64", columns: 8, rows: 4 },
+  audio: { frame: "h-24 w-64", columns: 9, rows: 2 },
+  document: { frame: "aspect-[4/5] w-44", columns: 5, rows: 7 },
+  archive: { frame: "h-28 w-44", columns: 5, rows: 3 },
+  data: { frame: "h-32 w-52", columns: 6, rows: 3 },
+  other: { frame: "h-28 w-44", columns: 5, rows: 3 },
+} satisfies Record<ProductType, { frame: string; columns: number; rows: number }>;
+
+export function productTypeForMediaType(mediaType?: string): ProductType {
+  const type = mediaType?.toLowerCase() ?? "";
+  if (type.startsWith("image/")) return "image";
+  if (type.startsWith("audio/")) return "audio";
+  if (type.startsWith("video/")) return "video";
+  if (/zip|archive|compressed|gzip|tar/.test(type)) return "archive";
+  if (/json|csv|spreadsheet|excel|parquet|sql/.test(type)) return "data";
+  if (type.startsWith("text/") || /pdf|document|word|rtf|presentation/.test(type)) {
+    return "document";
+  }
+  return "other";
+}
+
+/** Product-aware adaptation of https://www.assistant-ui.com/elements/image-generation. */
+export function ProductGeneration({
+  type,
+  mediaType,
+}: {
+  type: ProductType;
+  mediaType?: string;
+}) {
+  const { frame, columns, rows } = PRODUCT_PRESETS[type];
+  const dots = Array.from({ length: columns * rows }, (_, index) => index);
+  return (
+    <div className="flex w-fit max-w-full flex-col gap-2.5" data-product-generation={type}>
+      <div className={`themed-thumbnail-shadow relative max-w-full overflow-hidden rounded-2xl border border-kumo-line bg-kumo-elevated ${frame}`}>
+        <div
+          className="absolute inset-0 grid place-items-center p-5"
+          data-generation-grid={`${columns}x${rows}`}
+          style={{
+            gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
+            gridTemplateRows: `repeat(${rows}, minmax(0, 1fr))`,
+          }}
+          aria-hidden="true"
+        >
+          {dots.map((dot) => {
+            const row = Math.floor(dot / columns);
+            const column = dot % columns;
+            return (
+              <span
+                key={dot}
+                data-generation-dot=""
+                className="size-1 rounded-full bg-kumo-fill-hover animate-pulse motion-reduce:animate-none"
+                style={{ animationDelay: `${(row + column) * 90}ms` }}
+              />
+            );
+          })}
+        </div>
+        {mediaType && (
+          <span className="absolute end-2.5 top-2.5 font-mono text-[10px] text-kumo-inactive">
+            {mediaType}
+          </span>
+        )}
+      </div>
+      <p className="m-0 min-w-0 truncate text-xs text-kumo-inactive">
+        <span className="capitalize text-kumo-subtle">{type}</span>
+        <span aria-hidden="true"> · </span>
+        <span className="cos-thinking-shimmer motion-reduce:animate-none">Generating</span>
+      </p>
+    </div>
+  );
+}

package/cloud-os/chat/loading-state.tsx

@@ -0,0 +1,25 @@
+const CELLS = Array.from({ length: 9 }, (_, index) => index);
+
+/** CSS-driven adaptation of https://www.assistant-ui.com/elements/loading-state. */
+export function GenerationLoader() {
+  return (
+    <div
+      data-slot="generation-loader"
+      className="inline-flex flex-col items-center gap-3 py-2"
+    >
+      <div aria-hidden="true" className="grid grid-cols-3 gap-1">
+        {CELLS.map((cell) => (
+          <span
+            key={cell}
+            data-loading-cell=""
+            className="size-2 animate-pulse rounded-full bg-[var(--text-color-kumo-default)] motion-reduce:animate-none"
+            style={{ animationDelay: `${cell * 100}ms` }}
+          />
+        ))}
+      </div>
+      <span className="cos-thinking-shimmer text-sm text-kumo-inactive motion-reduce:animate-none">
+        Generating
+      </span>
+    </div>
+  );
+}

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

@@ -14,6 +14,7 @@ import {
 export type CloudOsUrlResolver = (url: string) => string | null | undefined;
 
 const ALLOWED_PROTOCOLS = new Set(["http:", "https:", "mailto:"]);
+const CJK_TEXT = /[\p{Script=Han}\p{Script=Hiragana}\p{Script=Katakana}\p{Script=Hangul}]/u;
 
 export function safeExternalUrl(href: string | undefined): string | undefined {
   if (!href) return undefined;
@@ -109,6 +110,13 @@ export const MarkdownMessage = memo(function MarkdownMessage({
   );
   return (
     <Streamdown
+      animated={
+        streaming
+          ? CJK_TEXT.test(message)
+            ? { sep: "char", duration: 100, stagger: 5 }
+            : true
+          : false
+      }
       className="space-y-0"
       controls={false}
       mode={streaming ? "streaming" : "static"}

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

@@ -45,6 +45,25 @@ export interface CloudOsAttachment {
   mediaType?: string;
 }
 
+interface CloudOsActionPresentationFile {
+  type: "file";
+  url: string;
+  mediaType?: string;
+}
+
+interface CloudOsActionProduces {
+  type: "image" | "audio" | "video" | "document" | "archive" | "data" | "other";
+  mediaType?: string;
+}
+
+export interface CloudOsActionPresentation {
+  type: "action-execution";
+  executionId: string;
+  state: "running" | "ready" | "failed" | "outcome_unknown";
+  produces?: CloudOsActionProduces;
+  content: CloudOsActionPresentationFile[];
+}
+
 export interface PlanStep {
   text: string;
   status: "pending" | "in_progress" | "done";
@@ -79,6 +98,11 @@ export type AssistantBlock =
       mediaType?: string;
     }
   | { kind: "file"; key: string; file: CloudOsAttachment }
+  | {
+      kind: "actionPresentation";
+      key: string;
+      presentation: CloudOsActionPresentation;
+    }
   | { kind: "error"; key: string; title: string; body?: string };
 
 export interface ParallelTool {
@@ -244,6 +268,71 @@ function normalizeStatus(value: unknown): ParallelTool["status"] {
   return "pending";
 }
 
+function actionPresentationOf(value: unknown): CloudOsActionPresentation | null {
+  const presentation = recordOf(recordOf(value).presentation);
+  const state = presentation.state;
+  if (
+    presentation.type !== "action-execution" ||
+    typeof presentation.executionId !== "string" ||
+    !/^[0-9a-f]{8}-[0-9a-f]{4}-[1-8][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i.test(
+      presentation.executionId,
+    ) ||
+    (state !== "running" &&
+      state !== "ready" &&
+      state !== "failed" &&
+      state !== "outcome_unknown") ||
+    !Array.isArray(presentation.content)
+  ) return null;
+
+  let produces: CloudOsActionProduces | undefined;
+  if (presentation.produces !== undefined) {
+    const hint = recordOf(presentation.produces);
+    if (
+      !["image", "audio", "video", "document", "archive", "data", "other"].includes(
+        String(hint.type),
+      ) ||
+      (hint.mediaType !== undefined &&
+        (typeof hint.mediaType !== "string" || !/^[^\s/]+\/[^\s/]+$/.test(hint.mediaType)))
+    ) return null;
+    produces = {
+      type: hint.type as CloudOsActionProduces["type"],
+      ...(hint.mediaType === undefined ? {} : { mediaType: hint.mediaType as string }),
+    };
+  }
+  if (state !== "running" && produces) return null;
+
+  const content: CloudOsActionPresentationFile[] = [];
+  for (const value of presentation.content) {
+    const file = recordOf(value);
+    if (file.type !== "file" || typeof file.url !== "string") return null;
+    try {
+      if (new URL(file.url).protocol !== "https:") return null;
+    } catch {
+      return null;
+    }
+    if (
+      file.mediaType !== undefined &&
+      (typeof file.mediaType !== "string" || !file.mediaType.trim())
+    ) return null;
+    content.push({
+      type: "file" as const,
+      url: file.url,
+      ...(file.mediaType !== undefined
+        ? { mediaType: file.mediaType }
+        : {}),
+    });
+  }
+  if (state !== "ready" && content.length > 0) return null;
+
+  return {
+    type: "action-execution",
+    executionId: presentation.executionId,
+    state,
+    ...(produces ? { produces } : {}),
+    content,
+  };
+}
+
 // ── 独立消息(非 assistant 回合)判定 ────────────────────────────────────────
 
 function standaloneEntry(
@@ -427,6 +516,13 @@ function assistantBlocks(
     if (toolName === null) return;
 
     const call = toCloudOsToolCall(part, key, isActive);
+    const presentation = actionPresentationOf(call.output);
+    if (presentation) {
+      pendingCalls.push(call);
+      flush();
+      blocks.push({ kind: "actionPresentation", key, presentation });
+      return;
+    }
 
     if (call.awaitingApproval) {
       const approvalId = approvalIdOf(part);
@@ -587,7 +683,53 @@ export function buildCloudOsEntries({
     });
   });
 
-  return dropSupersededPlans(entries);
+  return dropSupersededActionPresentations(dropSupersededPlans(entries));
+}
+
+function dropSupersededActionPresentations(entries: CloudOsEntry[]): CloudOsEntry[] {
+  const snapshots = new Map<string, {
+    entryIndex: number;
+    blockIndex: number;
+    presentation: CloudOsActionPresentation;
+  }>();
+  entries.forEach((entry, entryIndex) => {
+    if (entry.type !== "assistant") return;
+    entry.blocks.forEach((block, blockIndex) => {
+      if (block.kind !== "actionPresentation") return;
+      const current = snapshots.get(block.presentation.executionId);
+      if (!current) {
+        snapshots.set(block.presentation.executionId, {
+          entryIndex,
+          blockIndex,
+          presentation: block.presentation,
+        });
+        return;
+      }
+      if (block.presentation.state !== "running") {
+        current.presentation = block.presentation;
+      } else if (current.presentation.state === "running") {
+        current.presentation = {
+          ...block.presentation,
+          produces: block.presentation.produces ?? current.presentation.produces,
+        };
+      }
+    });
+  });
+
+  return entries.map((entry, entryIndex) =>
+    entry.type !== "assistant"
+      ? entry
+      : {
+          ...entry,
+          blocks: entry.blocks.flatMap<AssistantBlock>((block, blockIndex) => {
+            if (block.kind !== "actionPresentation") return [block];
+            const snapshot = snapshots.get(block.presentation.executionId)!;
+            return snapshot.entryIndex === entryIndex && snapshot.blockIndex === blockIndex
+              ? [{ ...block, presentation: snapshot.presentation }]
+              : [];
+          }),
+        }
+  );
 }
 
 /**

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

@@ -3,7 +3,6 @@ import {
   File as FileIcon,
   Plug,
   Plus,
-  Terminal,
 } from "@phosphor-icons/react";
 import {
   AssistantRuntimeProvider,
@@ -106,7 +105,7 @@ export interface CloudOsChatInputProps {
    * 传了就以它为准来决定显示发送键还是停止键。
    */
   turnActive?: boolean;
-  /** 可用的斜杠命令，也会显示在「+」菜单中。 */
+  /** 可用的斜杠命令。 */
   commands?: readonly CloudOsComposerCommand[];
   capabilities?: readonly CloudOsCapabilityView[];
   onCommandSelect?: (command: CloudOsComposerCommand) => void;
@@ -521,25 +520,6 @@ function CloudOsChatInputContent({
                     </span>
                   </DropdownMenu.Item>
                 )}
-                {commands.length > 0 && (
-                  <>
-                    {commands.map((command) => (
-                      <DropdownMenu.Item
-                        key={`${command.prefix ?? "/"}${command.name}`}
-                        onClick={() => selectCommand(command, false)}
-                        className="!h-auto rounded-xl !px-2 !py-1.5 text-[12px] leading-4 font-normal tracking-[-0.15px] text-kumo-subtle transition-colors data-highlighted:bg-kumo-tint/70 data-highlighted:text-kumo-default"
-                      >
-                        <span className="mr-2 inline-flex h-4 w-4 items-center justify-center text-kumo-inactive">
-                          <Terminal size={14} />
-                        </span>
-                        <span className="min-w-0 flex-1 truncate">
-                          {commandLabel(command)}
-                        </span>
-                      </DropdownMenu.Item>
-                    ))}
-                    <div className="my-1 border-t border-kumo-line/70" />
-                  </>
-                )}
                 {onFilesSelected && (
                   <DropdownMenu.Item
                     onClick={() => attachmentInputRef.current?.click()}

package/cloud-os/file-view.tsx

@@ -1,4 +1,13 @@
-import { File as FileIcon } from "@phosphor-icons/react";
+import {
+  Database,
+  File as FileIcon,
+  FileArchive,
+  FileAudio,
+  FileImage,
+  FileText,
+  FileVideo,
+  type Icon,
+} from "@phosphor-icons/react";
 import {
   CheckIcon,
   FileArchiveIcon,
@@ -14,6 +23,21 @@ import {
   useState,
   type ComponentType,
 } from "react";
+import {
+  PRODUCT_PRESETS,
+  productTypeForMediaType,
+  type ProductType,
+} from "./chat/image-generation";
+
+const PRODUCT_ICONS = {
+  image: FileImage,
+  audio: FileAudio,
+  video: FileVideo,
+  document: FileText,
+  archive: FileArchive,
+  data: Database,
+  other: FileIcon,
+} satisfies Record<ProductType, Icon>;
 
 export type FileViewPlacement =
   | "assistant-message"
@@ -21,6 +45,7 @@ export type FileViewPlacement =
   | "user-message";
 
 export type FileViewStatus = "error" | "ready" | "uploading";
+export type FileViewVariant = "compact" | "product";
 
 export interface FileViewFile {
   url?: string;
@@ -32,6 +57,7 @@ export interface FileViewFile {
 export interface FileViewProps {
   file: FileViewFile;
   placement: FileViewPlacement;
+  variant?: FileViewVariant;
   status?: FileViewStatus;
   progress?: number;
   onRemove?: () => void;
@@ -59,10 +85,12 @@ function ImageFileView({
   src,
   label,
   placement,
+  frameClassName,
 }: {
   src: string;
   label: string;
   placement: Exclude<FileViewPlacement, "composer">;
+  frameClassName?: string;
 }) {
   const imageRef = useRef<HTMLImageElement>(null);
   const [loadedSrc, setLoadedSrc] = useState<string>();
@@ -78,9 +106,11 @@ function ImageFileView({
   }, [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";
+  const previewClassName = frameClassName
+    ? `themed-thumbnail-shadow relative inline-block max-w-full overflow-hidden rounded-2xl border border-kumo-line align-bottom ${frameClassName}`
+    : 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
@@ -93,9 +123,11 @@ function ImageFileView({
         src={src}
         alt={label}
         className={`${
-          assistant
-            ? "block max-h-[28rem] max-w-full object-contain"
-            : "block max-h-52 max-w-64 object-cover"
+          frameClassName
+            ? "block size-full object-contain"
+            : 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"
@@ -115,7 +147,7 @@ function ImageFileView({
             className="size-6 animate-pulse motion-reduce:animate-none"
             aria-hidden="true"
           />
-          <span className="sr-only">Loading {label}</span>
+          <span className="sr-only">Loading preview...</span>
         </span>
       )}
       {error && (
@@ -123,7 +155,7 @@ function ImageFileView({
           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}`}
+          aria-label="Unable to load preview"
         >
           <FileImageIcon className="size-6" aria-hidden="true" />
         </span>
@@ -132,12 +164,100 @@ function ImageFileView({
   );
 }
 
+function ProductFileView({
+  file,
+  label,
+  placement,
+}: {
+  file: FileViewFile;
+  label: string;
+  placement: Exclude<FileViewPlacement, "composer">;
+}) {
+  const type = productTypeForMediaType(file.mediaType);
+  const { frame } = PRODUCT_PRESETS[type];
+  const image = type === "image" && file.url;
+  const video = type === "video" && file.url;
+  const ProductIcon = PRODUCT_ICONS[type];
+  const preview = image
+    ? (
+      <ImageFileView
+        src={file.url!}
+        label={label}
+        placement={placement}
+        frameClassName={frame}
+      />
+    )
+    : video
+      ? (
+        <video
+          src={file.url}
+          controls
+          preload="metadata"
+          playsInline
+          aria-label={label}
+          className={`themed-thumbnail-shadow block max-w-full rounded-2xl border border-kumo-line bg-kumo-elevated object-contain ${frame}`}
+          data-video-preview=""
+        />
+      )
+      : (
+        <span className={`themed-thumbnail-shadow relative inline-grid max-w-full place-items-center overflow-hidden rounded-2xl border border-kumo-line bg-kumo-elevated ${frame}`}>
+          <ProductIcon
+            size={24}
+            weight="light"
+            className="text-kumo-subtle"
+            aria-hidden="true"
+            data-product-icon={type}
+          />
+          {file.mediaType && (
+            <span className="absolute end-2.5 top-2.5 font-mono text-[10px] text-kumo-inactive">
+              {file.mediaType}
+            </span>
+          )}
+        </span>
+      );
+  const content = (
+    <span className="flex w-fit max-w-full flex-col gap-2.5" data-product-file-view={type}>
+      {preview}
+      <span className="flex min-w-0 max-w-full items-center gap-1 text-xs text-kumo-inactive">
+        <span className="capitalize text-kumo-subtle">{type}</span>
+        <span aria-hidden="true">·</span>
+        <span className="min-w-0 truncate">{label}</span>
+      </span>
+    </span>
+  );
+
+  return file.url && !video ? (
+    <a
+      href={file.url}
+      target="_blank"
+      rel="noopener noreferrer"
+      aria-label={`Open ${label}`}
+      className="inline-block max-w-full rounded-2xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-kumo-brand/40"
+      data-file-view={image ? undefined : ""}
+      data-placement={placement}
+      data-file-variant="product"
+    >
+      {content}
+    </a>
+  ) : (
+    <span
+      className="inline-block max-w-full"
+      data-file-view=""
+      data-placement={placement}
+      data-file-variant="product"
+    >
+      {content}
+    </span>
+  );
+}
+
 /**
  * Cloud OS 的默认文件视图。宿主可通过 `renderFile` 在同一 seam 替换它。
  */
 export function FileView({
   file,
   placement,
+  variant = "compact",
   status = "ready",
   progress = 0,
   onRemove,
@@ -238,6 +358,10 @@ export function FileView({
     );
   }
 
+  if (variant === "product") {
+    return <ProductFileView file={file} label={label} placement={placement} />;
+  }
+
   if (isImage) {
     return (
       <ImageFileView src={file.url!} label={label} placement={placement} />
@@ -251,7 +375,28 @@ export function FileView({
       data-placement={placement}
     >
       <FileIcon size={13} className="text-kumo-inactive" />
-      {label}
+      <span className="min-w-0 truncate">{label}</span>
+      {file.url && (
+        <span className="ms-1 inline-flex items-center gap-1.5 border-s border-kumo-line ps-2">
+          <a
+            href={file.url}
+            target="_blank"
+            rel="noopener noreferrer"
+            aria-label={`Open ${label}`}
+            className="rounded text-kumo-default hover:text-kumo-default-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-kumo-brand/40"
+          >
+            Open
+          </a>
+          <a
+            href={file.url}
+            download={label}
+            aria-label={`Download ${label}`}
+            className="rounded text-kumo-default hover:text-kumo-default-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-kumo-brand/40"
+          >
+            Download
+          </a>
+        </span>
+      )}
     </span>
   );
 }

package/cloud-os/index.ts

@@ -20,6 +20,7 @@ export type {
   FileViewPlacement,
   FileViewProps,
   FileViewStatus,
+  FileViewVariant,
 } from "./file-view";
 export {
   CloudOsConversationLoading,

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

@@ -579,6 +579,10 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
+  [data-sd-animate] {
+    animation: none !important;
+  }
+
   .cos-thinking-shimmer {
     animation: none;
     background: none;

package/demo/chat-scenarios.ts

@@ -37,6 +37,8 @@ export type DemoScenario =
   | "temporary_agent"
   | "agent_tools"
   | "background_agent"
+  | "action_loading"
+  | "action_files"
   | "schedule_create"
   | "schedule"
   | "schedule_cancel"
@@ -119,6 +121,18 @@ export const scenarios: Record<DemoScenario, DemoScenarioMeta> = {
     status: "ready",
     flowStep: 3,
   },
+  action_loading: {
+    label: "Action product loading",
+    description: "Preview loading UI for every Action product type.",
+    status: "streaming",
+    flowStep: 2,
+  },
+  action_files: {
+    label: "Action file results",
+    description: "Preview image, audio, video, document, spreadsheet, archive, and unknown files.",
+    status: "ready",
+    flowStep: 3,
+  },
   schedule_create: {
     label: "Create scheduled task",
     description: "Review the task, cadence, and timezone before creating the schedule.",
@@ -246,6 +260,11 @@ function userMessage(prompt: string): UIMessage {
   } as UIMessage;
 }
 
+function actionUserMessage(prompt: string): UIMessage {
+  const message = userMessage(prompt);
+  return { ...message, parts: message.parts.filter((part) => part.type === "text") };
+}
+
 export interface DemoAskUserResponse {
   answers: Array<{ selections: string[]; text?: string }>;
 }
@@ -503,6 +522,95 @@ const backgroundResult = {
   ],
 } as unknown as UIMessage;
 
+const actionProductHints = [
+  { type: "image", mediaType: "image/png" },
+  { type: "audio", mediaType: "audio/mpeg" },
+  { type: "video", mediaType: "video/mp4" },
+  { type: "document", mediaType: "application/pdf" },
+  { type: "archive", mediaType: "application/zip" },
+  { type: "data", mediaType: "application/json" },
+  { type: "other" },
+] as const;
+
+function demoExecutionId(index: number) {
+  return `00000000-0000-4000-8000-${String(index + 1).padStart(12, "0")}`;
+}
+
+const actionProductLoading = {
+  id: "camel-demo-action-product-loading",
+  role: "assistant",
+  parts: actionProductHints.map((produces, index) => ({
+    type: "dynamic-tool",
+    toolCallId: `camel-demo-action-loading-${index}`,
+    toolName: `action_generate_${produces.type}`,
+    state: "output-available",
+    input: {},
+    output: {
+      status: "running",
+      executionId: demoExecutionId(index),
+      presentation: {
+        type: "action-execution",
+        executionId: demoExecutionId(index),
+        state: "running",
+        produces,
+        content: [],
+      },
+    },
+  })),
+} as unknown as UIMessage;
+
+const actionFileFixtures = [
+  {
+    name: "image",
+    mediaType: "image/png",
+    url: "https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=1024&q=80",
+  },
+  { name: "audio", mediaType: "audio/mpeg", url: "https://files.example/action-demo/audio.mp3" },
+  { name: "video", mediaType: "video/mp4", url: "https://files.example/action-demo/video.mp4" },
+  { name: "pdf", mediaType: "application/pdf", url: "https://files.example/action-demo/report.pdf" },
+  { name: "markdown", mediaType: "text/markdown", url: "https://files.example/action-demo/report.md" },
+  {
+    name: "spreadsheet",
+    mediaType: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+    url: "https://files.example/action-demo/data.xlsx",
+  },
+  { name: "archive", mediaType: "application/zip", url: "https://files.example/action-demo/files.zip" },
+  {
+    name: "unknown",
+    mediaType: "application/octet-stream",
+    url: "https://files.example/action-demo/result.bin",
+  },
+] as const;
+
+const actionFileResults = {
+  id: "camel-demo-action-file-results",
+  role: "assistant",
+  parts: [
+    ...actionFileFixtures.map((file, index) => ({
+      type: "dynamic-tool",
+      toolCallId: `camel-demo-action-file-${index}`,
+      toolName: `action_generate_${file.name}`,
+      state: "output-available",
+      input: {},
+      output: {
+        status: "succeeded",
+        executionId: demoExecutionId(index + actionProductHints.length),
+        result: { kind: "file", content_type: file.mediaType, url: file.url },
+        presentation: {
+          type: "action-execution",
+          executionId: demoExecutionId(index + actionProductHints.length),
+          state: "ready",
+          content: [{ type: "file", url: file.url, mediaType: file.mediaType }],
+        },
+      },
+    })),
+    {
+      type: "text",
+      text: "All Action file result types are rendered above from structured output.",
+    },
+  ],
+} as unknown as UIMessage;
+
 export const demoScheduleInput = {
   label: "Weekly competitor report",
   prompt: "Generate and send this week's competitor report.",
@@ -917,6 +1025,12 @@ export function messagesForScenario(
   if (scenario === "background_agent") {
     return [...conversation, backgroundDispatch, backgroundResult];
   }
+  if (scenario === "action_loading") {
+    return [noticeMessage(scenario), actionUserMessage(prompt), actionProductLoading];
+  }
+  if (scenario === "action_files") {
+    return [noticeMessage(scenario), actionUserMessage(prompt), actionFileResults];
+  }
   if (scenario === "schedule_create") {
     return [...conversation, scheduleRequest];
   }

package/package.json

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