@springbrand/message-panel 0.1.3-alpha.3 → 0.1.3-alpha.30

package/cloud-os/file-view.tsx

@@ -0,0 +1,441 @@
+import {
+  Database,
+  File as FileIcon,
+  FileArchive,
+  FileAudio,
+  FileImage,
+  FileText,
+  FileVideo,
+  type Icon,
+} from "@phosphor-icons/react";
+import {
+  CheckIcon,
+  FileArchiveIcon,
+  FileImageIcon,
+  FileTextIcon,
+  Loader2Icon,
+  RotateCcwIcon,
+  XIcon,
+} from "lucide-react";
+import {
+  useEffect,
+  useRef,
+  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"
+  | "composer"
+  | "user-message";
+
+export type FileViewStatus = "error" | "ready" | "uploading";
+export type FileViewVariant = "compact" | "product";
+
+export interface FileViewFile {
+  url?: string;
+  filename?: string;
+  mediaType?: string;
+  size?: number;
+}
+
+export interface FileViewProps {
+  file: FileViewFile;
+  placement: FileViewPlacement;
+  variant?: FileViewVariant;
+  status?: FileViewStatus;
+  progress?: number;
+  onOpen?: () => void;
+  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,
+  frameClassName,
+}: {
+  src: string;
+  label: string;
+  placement: Exclude<FileViewPlacement, "composer">;
+  frameClassName?: string;
+}) {
+  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 = 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
+      className={`${previewClassName} ${loaded && !error ? "" : "min-h-24 min-w-36"}`}
+      data-file-view=""
+      data-placement={placement}
+    >
+      <img
+        ref={imageRef}
+        src={src}
+        alt={label}
+        className={`${
+          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"
+        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 preview...</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 preview"
+        >
+          <FileImageIcon className="size-6" aria-hidden="true" />
+        </span>
+      )}
+    </span>
+  );
+}
+
+function ProductFileView({
+  file,
+  label,
+  placement,
+  onOpen,
+}: {
+  file: FileViewFile;
+  label: string;
+  placement: Exclude<FileViewPlacement, "composer">;
+  onOpen?: () => void;
+}) {
+  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 onOpen ? (
+    <button
+      type="button"
+      onClick={onOpen}
+      aria-label={`Open ${label} in Creation View`}
+      className="inline-block max-w-full cursor-pointer rounded-2xl text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-kumo-brand/40"
+    >
+      {content}
+    </button>
+  ) : 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,
+  onOpen,
+  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">
+          {isImage ? (
+            <img
+              src={file.url}
+              alt=""
+              className="size-8 object-cover"
+            />
+          ) : (
+            <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 (variant === "product") {
+    return (
+      <ProductFileView
+        file={file}
+        label={label}
+        placement={placement}
+        onOpen={onOpen}
+      />
+    );
+  }
+
+  if (isImage) {
+    const image = (
+      <ImageFileView src={file.url!} label={label} placement={placement} />
+    );
+    return onOpen ? (
+      <button
+        type="button"
+        onClick={onOpen}
+        aria-label={`Open ${label} in Creation View`}
+        className="inline-block max-w-full cursor-pointer rounded-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-kumo-brand/40"
+      >
+        {image}
+      </button>
+    ) : image;
+  }
+
+  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" />
+      <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>
+  );
+}
+
+/** 宿主没有接管时回退到包内默认视图。 */
+export function renderFileView(
+  renderFile: FileRenderer | undefined,
+  props: FileViewProps,
+) {
+  const Renderer = renderFile ?? FileView;
+  return <Renderer {...props} />;
+}

package/cloud-os/index.ts

@@ -11,7 +11,21 @@
  */
 
 export { CloudOsRoot } from "./layout/cloud-os-root";
-export { CloudOsWorkspaceSplit } from "./layout/cloud-os-workspace-split";
+export { CapabilityChip } from "./capability-chip";
+export type { CapabilityChipProps } from "./capability-chip";
+export { FileView } from "./file-view";
+export type {
+  FileRenderer,
+  FileViewFile,
+  FileViewPlacement,
+  FileViewProps,
+  FileViewStatus,
+  FileViewVariant,
+} from "./file-view";
+export {
+  CloudOsConversationLoading,
+  CloudOsWorkspaceSplit,
+} from "./layout/cloud-os-workspace-split";
 export type { CloudOsWorkspaceSplitProps } from "./layout/cloud-os-workspace-split";
 
 export { CloudOsChatMessages } from "./chat/cloud-os-chat-messages";
@@ -23,10 +37,15 @@ export type {
 export { CloudOsChatInput } from "./composer/cloud-os-chat-input";
 export type {
   CloudOsAttachmentView,
+  CloudOsCapabilityView,
   CloudOsChatInputProps,
   CloudOsComposerCommand,
-  CloudOsModelOption,
 } from "./composer/cloud-os-chat-input";
+export { CloudOsModelSelect } from "./composer/cloud-os-model-select";
+export type {
+  CloudOsModelOption,
+  CloudOsModelSelectProps,
+} from "./composer/cloud-os-model-select";
 
 export {
   CloudOsWorkspacePanel,
@@ -42,12 +61,19 @@ export type {
 } from "./workspace/cloud-os-workspace-panel";
 
 export { MarkdownMessage } from "./chat/markdown-message";
-export type { CloudOsUrlResolver } from "./chat/markdown-message";
+export type {
+  CloudOsArtifactResolver,
+  CloudOsUrlResolver,
+} from "./chat/markdown-message";
 export {
   ThinkingTraceRow,
   ToolCallDetails,
+  ToolGroupDetails,
   ToolGroupRow,
+  WorkDescriptionRow,
   WorkIcon,
+  WorkTraceDisclosure,
+  formatWorkDuration,
 } from "./chat/tool-rows";
 export {
   ApprovalBlock,
@@ -55,7 +81,9 @@ export {
   ErrorBlock,
   ParallelBlock,
   PlanBlock,
+  PermissionGrant,
   ScheduleBlock,
+  ScheduleConfirmation,
   SubAgentsBlock,
   SuggestionsBlock,
 } from "./chat/rich-blocks";
@@ -70,6 +98,8 @@ export {
   formatClockTime,
   formatFullTimestamp,
   messageText,
+  partitionAssistantBlocks,
+  requestedCapabilitiesOf,
   rhythmTopClass,
 } from "./chat/transcript-model";
 export type {
@@ -77,6 +107,7 @@ export type {
   CloudOsActivity,
   CloudOsAttachment,
   CloudOsEntry,
+  CloudOsRequestedCapability,
   ParallelTool,
   PlanStep,
   SubAgentView,
@@ -87,6 +118,7 @@ export {
   canonicalToolKind,
   getToolCallSummary,
   getToolIcon,
+  humanizeToolName,
   toCloudOsToolCall,
   toolNameOfPart,
 } from "./chat/tool-presentation";

package/cloud-os/layout/cloud-os-workspace-split.tsx

@@ -6,11 +6,12 @@ import {
   type PointerEvent as ReactPointerEvent,
   type ReactNode,
 } from "react";
+import { motion, useReducedMotion } from "motion/react";
 
 /**
  * 左聊天 / 右工作区的双栏骨架。从 cloudflare-os-main `GadgetEditor.tsx` 的 BODY
  * 段拷来:同一条 1px 的 kumo-line 分隔即拖拽把手、同一套 pointer capture 拖拽
- * (拖过 iframe 也不丢)、同一个 200ms 的收起/展开过渡、同一条顶部推进条。
+ * (拖过 iframe 也不丢)、同一个 200ms 的收起/展开过渡。
  *
  * 适配点:原文件把左右两侧的内容写死成 ChatInterface / GadgetUI,这里换成
  * children 插槽;chatWidth 的 localStorage key 换成 cloud-os 自己的。
@@ -24,6 +25,56 @@ const WORKSPACE_TRANSITION_MS = 200;
 
 const isBrowser = typeof window !== "undefined";
 
+const loadingAssets = {
+  spark: new URL("../assets/loading-spark.svg", import.meta.url).href,
+  corner: new URL("../assets/loading-corner.svg", import.meta.url).href,
+  mark: new URL("../assets/loading-mark.svg", import.meta.url).href,
+};
+
+const loadingSpring = (t: number) =>
+  1 - Math.exp(-t * 7.6657) * (Math.cos(t * 6.7605) + 1.1339 * Math.sin(t * 6.7605));
+
+export function CloudOsConversationLoading() {
+  const reducedMotion = useReducedMotion();
+  const repeat = reducedMotion ? 0 : Infinity;
+
+  return (
+    <div className="absolute inset-0 z-30 grid place-items-center bg-kumo-base/90">
+      <div role="status" aria-label="Loading conversation..." className="flex flex-col items-center gap-4">
+        <div className="relative h-[49px] w-[49px] overflow-hidden" aria-hidden="true">
+          <motion.img
+            src={loadingAssets.spark}
+            alt=""
+            className="absolute bottom-[18.5%] right-[61.46%] h-[20.04%] w-[20.04%] will-change-transform"
+            initial={reducedMotion ? false : { opacity: 0, rotate: 200, scaleX: 0.5, scaleY: 0.5, x: -140, y: 120 }}
+            animate={reducedMotion ? { opacity: 1, rotate: 0, scaleX: 1, scaleY: 1, x: 0, y: 0 } : { opacity: [0, 0, 1, 1, 0, 0], rotate: [200, 200, 10, 0, 0, 200, 200], scaleX: [0.5, 0.5, 1.3, 0.8, 1, 1], scaleY: [0.5, 0.5, 0.75, 1.2, 1, 1], x: [-140, -140, 2, 0, 0, -140, -140], y: [120, 120, -2, 0, 0, 120, 120] }}
+            transition={{ opacity: { duration: 1.68, times: [0, 0.2083, 0.25, 0.9998, 0.9999, 1], ease: ["linear", "linear", "linear", "easeIn", "linear"], repeat }, rotate: { duration: 1.68, times: [0, 0.2083, 0.3869, 0.506, 0.9998, 0.9999, 1], ease: ["linear", [0, 0, 0.15, 1], loadingSpring, "linear", "easeIn", "linear"], repeat }, scaleX: { duration: 1.68, times: [0, 0.2083, 0.3274, 0.3869, 0.506, 1], ease: ["linear", [0, 0, 0.15, 1], "easeOut", loadingSpring, "linear"], repeat }, scaleY: { duration: 1.68, times: [0, 0.2083, 0.3274, 0.3869, 0.506, 1], ease: ["linear", [0, 0, 0.15, 1], "easeOut", loadingSpring, "linear"], repeat }, x: { duration: 1.68, times: [0, 0.2083, 0.3869, 0.506, 0.9998, 0.9999, 1], ease: ["linear", [0, 0, 0.15, 1], loadingSpring, "linear", "easeIn", "linear"], repeat }, y: { duration: 1.68, times: [0, 0.2083, 0.3869, 0.506, 0.9998, 0.9999, 1], ease: ["linear", [0, 0, 0.15, 1], loadingSpring, "linear", "easeIn", "linear"], repeat } }}
+          />
+          <motion.img
+            src={loadingAssets.corner}
+            alt=""
+            className="absolute bottom-[11.65%] right-[43.79%] h-[44.74%] w-[44.67%] will-change-transform"
+            initial={reducedMotion ? false : { opacity: 0, scaleX: 1, scaleY: 1, x: 0, y: 0 }}
+            animate={reducedMotion ? { opacity: 1, scaleX: 1, scaleY: 1, x: 0, y: 0 } : { opacity: [0, 1, 1, 0, 0], scaleX: [1, 1, 1.06, 1, 1], scaleY: [1, 1, 0.95, 1, 1], x: [0, 0, 4, 0, 0], y: [0, 0, -2, 0, 0] }}
+            transition={{ opacity: { duration: 1.68, times: [0, 0.1786, 0.9998, 0.9999, 1], ease: [[0, 0, 0.3, 1], "linear", "easeIn", "linear"], repeat }, scaleX: { duration: 1.68, times: [0, 0.3988, 0.4345, 0.6548, 1], ease: ["linear", [0.2, 0.9, 0.3, 1], loadingSpring, "linear"], repeat }, scaleY: { duration: 1.68, times: [0, 0.3988, 0.4345, 0.6548, 1], ease: ["linear", [0.2, 0.9, 0.3, 1], loadingSpring, "linear"], repeat }, x: { duration: 1.68, times: [0, 0.3988, 0.4345, 0.6845, 1], ease: ["linear", [0.2, 0.9, 0.3, 1], loadingSpring, "linear"], repeat }, y: { duration: 1.68, times: [0, 0.3988, 0.4345, 0.6845, 1], ease: ["linear", [0.2, 0.9, 0.3, 1], loadingSpring, "linear"], repeat } }}
+          />
+          <motion.img
+            src={loadingAssets.mark}
+            alt=""
+            className="absolute bottom-[19.14%] right-[11.53%] h-[69.22%] w-[69.33%] will-change-transform"
+            initial={reducedMotion ? false : { opacity: 0, rotate: 0, scaleX: 0.85, scaleY: 0.85, x: 0, y: 0 }}
+            animate={reducedMotion ? { opacity: 1, rotate: 0, scaleX: 1, scaleY: 1, x: 0, y: 0 } : { opacity: [0, 1, 1, 0, 0], rotate: [0, 0, -3, 0, 0], scaleX: [0.85, 1, 1, 1.1, 0.95, 1, 1], scaleY: [0.85, 1, 1, 0.92, 1.05, 1, 1], x: [0, 0, 6, 0, 0], y: [0, 0, -4, 0, 0] }}
+            transition={{ opacity: { duration: 1.68, times: [0, 0.2083, 0.9998, 0.9999, 1], ease: [[0, 0, 0.3, 1], "linear", "easeIn", "linear"], repeat }, rotate: { duration: 1.68, times: [0, 0.3869, 0.4286, 0.6548, 1], ease: ["linear", [0.2, 0.9, 0.3, 1], loadingSpring, "linear"], repeat }, scaleX: { duration: 1.68, times: [0, 0.2083, 0.3869, 0.4167, 0.4643, 0.6548, 1], ease: [[0, 0, 0.3, 1], "linear", [0.2, 0.9, 0.3, 1], "easeOut", loadingSpring, "linear"], repeat }, scaleY: { duration: 1.68, times: [0, 0.2083, 0.3869, 0.4167, 0.4643, 0.6548, 1], ease: [[0, 0, 0.3, 1], "linear", [0.2, 0.9, 0.3, 1], "easeOut", loadingSpring, "linear"], repeat }, x: { duration: 1.68, times: [0, 0.3869, 0.4167, 0.6548, 1], ease: ["linear", [0.2, 0.9, 0.3, 1], loadingSpring, "linear"], repeat }, y: { duration: 1.68, times: [0, 0.3869, 0.4167, 0.6548, 1], ease: ["linear", [0.2, 0.9, 0.3, 1], loadingSpring, "linear"], repeat } }}
+          />
+        </div>
+        <p className="m-0 text-center text-[14px] font-normal leading-[1.4] text-kumo-default">
+          Loading conversation...
+        </p>
+      </div>
+    </div>
+  );
+}
+
 function clampChatWidth(width: number, containerWidth?: number) {
   if (!isBrowser) {
     return Math.max(MIN_CHAT_WIDTH, Math.min(DEFAULT_CHAT_WIDTH, width));
@@ -59,20 +110,20 @@ export interface CloudOsWorkspaceSplitProps {
   workspace: ReactNode;
   /** 关掉右栏时聊天占满整宽。 */
   workspaceOpen: boolean;
-  /** 顶部那条推进条:回合进行中显示。 */
-  isAgentActive?: boolean;
   /** 右栏收起时依然保留的窄边栏宽度(原文件的 Outputs rail)。 */
   railWidth?: number;
   rail?: ReactNode;
+  /** 覆盖整个聊天 + 工作区主体；页面级导航应放在分栏外。 */
+  isLoading?: boolean;
 }
 
 export function CloudOsWorkspaceSplit({
   chat,
   workspace,
   workspaceOpen,
-  isAgentActive = false,
   railWidth = 0,
   rail,
+  isLoading = false,
 }: CloudOsWorkspaceSplitProps) {
   const containerRef = useRef<HTMLDivElement>(null);
   const resizeSessionRef = useRef<ResizeSession | null>(null);
@@ -187,18 +238,8 @@ export function CloudOsWorkspaceSplit({
     <div
       ref={containerRef}
       className="relative flex h-full min-h-0 flex-1 overflow-hidden bg-kumo-base"
+      aria-busy={isLoading}
     >
-      {isAgentActive && (
-        <div
-          className="absolute left-0 z-10 h-0"
-          style={{ top: 0, right: railWidth }}
-        >
-          <div className="absolute left-0 right-0 h-0.5 overflow-hidden bg-kumo-fill">
-            <div className="cos-progress-sweep absolute inset-y-0 w-1/3 bg-kumo-brand" />
-          </div>
-        </div>
-      )}
-
       {/* ── 左:聊天 ──────────────────────────────────────────────────────── */}
       <div
         className={`flex h-full min-h-0 flex-shrink-0 flex-col ${transitionClass} ${
@@ -237,6 +278,8 @@ export function CloudOsWorkspaceSplit({
       </div>
 
       {rail}
+
+      {isLoading && <CloudOsConversationLoading />}
     </div>
   );
 }

package/cloud-os/primitives/workshop-controls.tsx

@@ -11,7 +11,7 @@ const buttonBaseClassName =
 
 const buttonToneClassNames = {
   primary:
-    "!h-9 bg-kumo-contrast px-3 text-kumo-inverse enabled:hover:bg-kumo-strong disabled:opacity-50",
+    "!h-9 bg-gradient-to-br from-[#FFD077] to-[#FF9938] px-3 text-white enabled:hover:opacity-90 disabled:opacity-50",
   secondary:
     "!h-8 border border-kumo-line bg-kumo-base px-3 text-kumo-default enabled:hover:bg-kumo-elevated disabled:opacity-40",
   danger:
@@ -59,7 +59,7 @@ export function WorkshopIconButton({
 }: WorkshopIconButtonProps) {
   const toneClassName =
     tone === "primary"
-      ? "bg-kumo-contrast text-kumo-inverse enabled:hover:bg-kumo-strong enabled:hover:text-kumo-inverse"
+      ? "bg-[var(--primary,var(--color-kumo-brand))] text-[var(--primary-foreground,var(--text-color-kumo-inverse))] enabled:hover:bg-[var(--primary-hover,var(--color-kumo-brand-hover))]"
       : danger
         ? "text-kumo-subtle enabled:hover:bg-kumo-danger-tint enabled:hover:text-kumo-danger"
         : "text-kumo-subtle enabled:hover:bg-kumo-tint enabled:hover:text-kumo-default";