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

package/cloud-os/file-view.tsx

@@ -0,0 +1,266 @@
+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">
+          {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 (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

@@ -11,7 +11,20 @@
  */
 
 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,
+} 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 +36,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,
@@ -55,24 +73,32 @@ export {
   ErrorBlock,
   ParallelBlock,
   PlanBlock,
+  PermissionGrant,
   ScheduleBlock,
+  ScheduleConfirmation,
   SubAgentsBlock,
   SuggestionsBlock,
 } from "./chat/rich-blocks";
 export type { ApprovalDecision } from "./chat/rich-blocks";
 
+export { CloudOsActivityIndicator } from "./chat/activity-indicator";
+
 export {
   buildCloudOsEntries,
   cloudOsMetadata,
+  deriveTurnActivity,
   formatClockTime,
   formatFullTimestamp,
   messageText,
+  requestedCapabilitiesOf,
   rhythmTopClass,
 } from "./chat/transcript-model";
 export type {
   AssistantBlock,
+  CloudOsActivity,
   CloudOsAttachment,
   CloudOsEntry,
+  CloudOsRequestedCapability,
   ParallelTool,
   PlanStep,
   SubAgentView,
@@ -83,6 +109,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,11 +25,62 @@ const WORKSPACE_TRANSITION_MS = 200;
 
 const isBrowser = typeof window !== "undefined";
 
-function clampChatWidth(width: number) {
+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));
   }
-  const max = Math.max(MIN_CHAT_WIDTH, window.innerWidth - MIN_WORKSPACE_WIDTH);
+  const available = containerWidth ?? window.innerWidth;
+  const max = Math.max(MIN_CHAT_WIDTH, available - MIN_WORKSPACE_WIDTH);
   return Math.max(MIN_CHAT_WIDTH, Math.min(max, width));
 }
 
@@ -48,43 +100,65 @@ function getInitialChatWidth() {
   return clampChatWidth(Number.isFinite(parsed) ? parsed : fallback);
 }
 
+type ResizeSession = {
+  startX: number;
+  startWidth: number;
+};
+
 export interface CloudOsWorkspaceSplitProps {
   chat: ReactNode;
   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);
   const [chatWidth, setChatWidth] = useState(getInitialChatWidth);
   const [isResizing, setIsResizing] = useState(false);
   const [transitionEnabled, setTransitionEnabled] = useState(false);
   const chatWidthRef = useRef(chatWidth);
   chatWidthRef.current = chatWidth;
 
+  const getContainerWidth = useCallback(
+    () => containerRef.current?.getBoundingClientRect().width,
+    [],
+  );
+
+  const clampToContainer = useCallback(
+    (width: number) => clampChatWidth(width, getContainerWidth()),
+    [getContainerWidth],
+  );
+
   // 首帧不要动画:否则每次挂载都会看到面板「滑进来」。
   useEffect(() => {
     const timer = window.setTimeout(() => setTransitionEnabled(true), 0);
     return () => window.clearTimeout(timer);
   }, []);
 
+  // 挂载后按真实容器宽度重新 clamp 一次(宿主可能有左侧 sidebar 等偏移)。
   useEffect(() => {
-    const onResize = () => setChatWidth((width) => clampChatWidth(width));
+    setChatWidth((width) => clampToContainer(width));
+  }, [clampToContainer]);
+
+  useEffect(() => {
+    const onResize = () => setChatWidth((width) => clampToContainer(width));
     window.addEventListener("resize", onResize);
     return () => window.removeEventListener("resize", onResize);
-  }, []);
+  }, [clampToContainer]);
 
   const persistChatWidth = useCallback((width: number) => {
     try {
@@ -94,11 +168,24 @@ export function CloudOsWorkspaceSplit({
     }
   }, []);
 
+  const widthFromPointer = useCallback(
+    (clientX: number) => {
+      const session = resizeSessionRef.current;
+      if (!session) return chatWidthRef.current;
+      return clampToContainer(session.startWidth + clientX - session.startX);
+    },
+    [clampToContainer],
+  );
+
   // 用 pointer capture:拖过右侧 iframe 时事件也不会丢。
   const handleResizePointerDown = useCallback(
     (event: ReactPointerEvent<HTMLDivElement>) => {
       if (!workspaceOpen) return;
       event.preventDefault();
+      resizeSessionRef.current = {
+        startX: event.clientX,
+        startWidth: chatWidthRef.current,
+      };
       event.currentTarget.setPointerCapture(event.pointerId);
       setIsResizing(true);
     },
@@ -107,9 +194,9 @@ export function CloudOsWorkspaceSplit({
   const handleResizePointerMove = useCallback(
     (event: ReactPointerEvent<HTMLDivElement>) => {
       if (!event.currentTarget.hasPointerCapture(event.pointerId)) return;
-      setChatWidth(clampChatWidth(event.clientX));
+      setChatWidth(widthFromPointer(event.clientX));
     },
-    [],
+    [widthFromPointer],
   );
   const handleResizePointerUp = useCallback(
     (event: ReactPointerEvent<HTMLDivElement>) => {
@@ -119,12 +206,13 @@ export function CloudOsWorkspaceSplit({
       const width =
         event.type === "pointercancel"
           ? chatWidthRef.current
-          : clampChatWidth(event.clientX);
+          : widthFromPointer(event.clientX);
+      resizeSessionRef.current = null;
       setChatWidth(width);
       persistChatWidth(width);
       setIsResizing(false);
     },
-    [persistChatWidth],
+    [persistChatWidth, widthFromPointer],
   );
 
   useEffect(() => {
@@ -147,18 +235,11 @@ export function CloudOsWorkspaceSplit({
   return (
     // h-full 而不是只靠 flex-1:宿主给的容器不一定是 flex,那样 flex-1 不生效,
     // 整个分栏会塌成内容高度(聊天区不铺满、输入框吊在半空)。
-    <div className="relative flex h-full min-h-0 flex-1 overflow-hidden bg-kumo-base">
-      {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
+      ref={containerRef}
+      className="relative flex h-full min-h-0 flex-1 overflow-hidden bg-kumo-base"
+      aria-busy={isLoading}
+    >
       {/* ── 左:聊天 ──────────────────────────────────────────────────────── */}
       <div
         className={`flex h-full min-h-0 flex-shrink-0 flex-col ${transitionClass} ${
@@ -197,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";