@springbrand/message-panel 0.1.3-alpha.13 → 0.1.3-alpha.14

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

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

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

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

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

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

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

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

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

@@ -56,7 +56,6 @@ export interface CloudOsChatMessagesProps {
   status: CloudOsChatStatus;
   /** 权威 Turn 生命周期;提供时替代本地 status 推断。 */
   turnActive?: boolean;
-  isHydrating?: boolean;
   isRecovering?: boolean;
   recoveryStatusLabel?: string;
   awaitingApproval?: boolean;
@@ -173,7 +172,7 @@ function UserBubble({
         </div>
       )}
       {entry.text && (
-        <div className="themed-user-bubble-shadow cos-markdown cos-user-markdown w-fit max-w-[min(680px,78%)] rounded-[24px] rounded-br-lg border border-transparent bg-kumo-bubble-user px-4 py-2.5 text-[14px] leading-[22px] tracking-[-0.25px] text-kumo-default">
+        <div className="themed-user-bubble-shadow cos-markdown cos-user-markdown w-fit max-w-[min(680px,78%)] rounded-[12px] border border-transparent bg-kumo-bubble-user px-4 py-2.5 text-[14px] leading-[22px] tracking-[-0.25px] text-kumo-default">
           <MarkdownMessage message={entry.text} resolveUrl={resolveUrl} />
         </div>
       )}
@@ -205,7 +204,6 @@ export function CloudOsChatMessages({
   messages,
   status,
   turnActive,
-  isHydrating = false,
   isRecovering = false,
   recoveryStatusLabel,
   awaitingApproval = false,
@@ -308,7 +306,7 @@ export function CloudOsChatMessages({
       className="relative flex min-h-0 flex-1 flex-col overflow-hidden bg-kumo-base"
       data-cloud-os-transcript=""
       data-status={status}
-      aria-busy={isActive || isHydrating || isRecovering}
+      aria-busy={isActive || isRecovering}
     >
       <div
         ref={scrollRef}
@@ -323,7 +321,7 @@ export function CloudOsChatMessages({
             constrainWidth ? "mx-auto w-full max-w-[920px]" : ""
           }`}
         >
-          {entries.length === 0 && !startedWithPending && !isHydrating && (
+          {entries.length === 0 && !startedWithPending && (
             <div className="flex min-h-56 items-center justify-center text-center text-[24px] leading-8 font-semibold tracking-[-0.4px] text-kumo-default">
               {emptyTitle}
             </div>
@@ -349,7 +347,7 @@ export function CloudOsChatMessages({
             if (entry.type === "slashCommand") {
               return (
                 <div key={entry.key} className={`${topClass} flex flex-col items-end`}>
-                  <div className="themed-user-bubble-shadow w-fit max-w-[min(680px,78%)] rounded-[24px] rounded-br-lg border border-transparent bg-kumo-bubble-user px-4 py-2.5 text-[14px] leading-[22px] tracking-[-0.25px] text-kumo-brand">
+                  <div className="themed-user-bubble-shadow w-fit max-w-[min(680px,78%)] rounded-[12px] border border-transparent bg-kumo-bubble-user px-4 py-2.5 text-[14px] leading-[22px] tracking-[-0.25px] text-kumo-brand">
                     <span className="whitespace-pre-wrap font-mono">{entry.text}</span>
                   </div>
                 </div>
@@ -440,7 +438,11 @@ export function CloudOsChatMessages({
                     switch (block.kind) {
                       case "reasoning":
                         return (
-                          <ThinkingTraceRow key={block.key} reasoning={block.text} />
+                          <ThinkingTraceRow
+                            key={block.key}
+                            reasoning={block.text}
+                            running={block.running}
+                          />
                         );
                       case "text":
                         return (
@@ -653,16 +655,6 @@ export function CloudOsChatMessages({
         <ArrowDown size={15} />
       </WorkshopIconButton>
 
-      {isHydrating && (
-        <div className="absolute inset-0 z-30 grid place-items-center bg-kumo-base/90">
-          <div className="flex flex-col items-center gap-3">
-            <div className="h-6 w-6 animate-spin rounded-full border-2 border-kumo-brand border-t-transparent" />
-            <p className="m-0 text-[13px] leading-[18px] text-kumo-subtle">
-              Loading conversation…
-            </p>
-          </div>
-        </div>
-      )}
     </div>
   );
 }

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

@@ -452,23 +452,26 @@ export function SuggestionsBlock({
   onSuggestion: (text: string) => void;
 }) {
   return (
-    <div className="max-w-[860px] space-y-2 pt-1">
-      <div className="flex items-center gap-2 px-1.5 text-[13px] leading-[18px] text-kumo-success">
-        <Check size={14} weight="bold" />
-        <span>Task complete</span>
-      </div>
-      <div className="flex flex-wrap gap-1.5 px-1.5">
-        {items.map((item) => (
-          <button
-            key={item}
-            type="button"
-            onClick={() => onSuggestion(item)}
-            className="inline-flex h-7 cursor-pointer items-center rounded-full border border-kumo-line bg-kumo-base px-3 text-[13px] leading-none tracking-[-0.25px] text-kumo-subtle transition-colors duration-150 ease-out hover:bg-kumo-tint hover:text-kumo-default focus-visible:outline-none active:scale-[0.98]"
-          >
-            {item}
-          </button>
-        ))}
-      </div>
+    <div className="flex max-w-[860px] flex-col items-start gap-3">
+      {items.map((item) => (
+        <button
+          key={item}
+          type="button"
+          onClick={() => onSuggestion(item)}
+          className="inline-flex cursor-pointer items-center gap-2 text-[14px] leading-[1.4] text-kumo-inactive transition-colors duration-150 ease-out hover:text-kumo-brand focus-visible:text-kumo-brand focus-visible:outline-none active:scale-[0.98]"
+        >
+          <span className="grid size-5 flex-shrink-0 place-items-center" aria-hidden="true">
+            <span className="rotate-180 -scale-y-100">
+              <img
+                src={new URL("../assets/followup-arrow.svg", import.meta.url).href}
+                alt=""
+                className="h-[8.33333px] w-[11.6667px]"
+              />
+            </span>
+          </span>
+          <span className="whitespace-nowrap">{item}</span>
+        </button>
+      ))}
     </div>
   );
 }
@@ -513,7 +516,7 @@ function scheduleCadence(input: Record<string, unknown>): string {
   return timezone ? `${cadence} · ${timezone}` : cadence;
 }
 
-/** `schedule` 工具的 details 是 `{ scheduled: true, id }`,id 即任务在 SchedulerAgent 里的主键。 */
+/** `schedule` 工具的 details 是 `{ scheduled: true, id }`,id 即 Inbox Schedule Definition 主键。 */
 function scheduleIdOf(output: unknown): string {
   if (typeof output !== "object" || output === null) return "";
   const id = (output as Record<string, unknown>).id;
@@ -539,7 +542,7 @@ export function ScheduleConfirmation({
   return (
     <section
       data-slot="schedule-card"
-      aria-label={`确认定时任务：${name}`}
+      aria-label={`Confirm scheduled task: ${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">
@@ -570,10 +573,10 @@ export function ScheduleConfirmation({
 
       <div className="flex items-center justify-end gap-2">
         <WorkshopButton disabled={disabled} onClick={onCancel}>
-          取消
+          Cancel
         </WorkshopButton>
         <WorkshopButton tone="primary" disabled={disabled} onClick={onConfirm}>
-          {disabled ? "正在确认…" : "确认安排"}
+          {disabled ? "Confirming…" : "Confirm schedule"}
         </WorkshopButton>
       </div>
     </section>
@@ -677,22 +680,22 @@ export function PermissionGrant({
   "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";
+    "inline-flex h-10 w-[120px] items-center justify-center rounded-lg border border-kumo-line px-4 text-[14px] leading-[1.4] font-medium 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"
+      className="themed-surface-inset w-full rounded-xl border border-kumo-line bg-kumo-elevated p-4 text-kumo-default"
     >
-      <div className="flex items-center gap-2.5">
+      <div className="flex items-center gap-2">
         <span
-          className="flex size-7 shrink-0 items-center justify-center rounded-lg bg-kumo-fill/70 text-kumo-subtle"
+          className="flex size-8 shrink-0 items-center justify-center rounded-lg bg-kumo-fill 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">
+          <span className="truncate text-[14px] leading-[1.4] font-medium">
             {capability}
           </span>
           <span className="truncate text-[12px] leading-4 text-kumo-inactive">
@@ -701,41 +704,22 @@ export function PermissionGrant({
         </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">
+      <div className="mt-4 flex max-h-[200px] flex-col gap-2 overflow-y-auto">
+        <span className="text-[12px] 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"
+            className="flex items-baseline gap-2 text-[14px] leading-[1.4] text-kumo-subtle"
           >
-            <span
-              className="size-1 shrink-0 rounded-full bg-kumo-interact"
-              aria-hidden="true"
-            />
+            <span aria-hidden="true">•</span>
             <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>
+      <div className="mt-4 flex flex-wrap items-center gap-2">
         <Tooltip
           content="Allow every action at this execution level, without future prompts."
           asChild
@@ -744,11 +728,27 @@ export function PermissionGrant({
             type="button"
             disabled={disabled}
             onClick={() => onGrant("allow_level")}
-            className={`${actionClassName} bg-kumo-contrast text-kumo-inverse enabled:hover:bg-kumo-strong`}
+            className={`${actionClassName} border-0 bg-[linear-gradient(90deg,#ffd077_0%,#ff9938_100%)] text-kumo-inverse enabled:hover:brightness-95`}
           >
             Allow level
           </button>
         </Tooltip>
+        <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>
+        <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>
       </div>
     </section>
   );

package/cloud-os/chat/tool-rows.tsx

@@ -1,11 +1,10 @@
-import { CaretRight } from "@phosphor-icons/react";
-import { memo } from "react";
+import { Atom, CaretDown, CaretRight, Copy } from "@phosphor-icons/react";
+import { memo, useEffect, useId, useState } from "react";
 import { MarkdownMessage } from "./markdown-message";
 import {
   getToolCallSummary,
   getToolIcon,
   normalizeOutputText,
-  safeStringify,
   type CloudOsToolCall,
   type PhosphorIcon,
   type ToolCallGroup,
@@ -22,19 +21,42 @@ export function WorkIcon({ Icon }: { Icon: PhosphorIcon }) {
   return <Icon size={15} className="text-kumo-inactive" />;
 }
 
-function OutputPre({ label, value }: { label?: string; value: string }) {
-  if (!value) return null;
+function displayOutput(value: unknown, fallback: string): string {
+  if (value == null || typeof value !== "object" || Array.isArray(value)) {
+    return fallback;
+  }
+  const record = value as Record<string, unknown>;
+  if (typeof record.summary === "string" && record.summary.trim()) {
+    return record.summary.trim();
+  }
+  const displayValue = (item: unknown): string =>
+    item != null && typeof item === "object"
+      ? Object.entries(item).map(([key, child]) => `${key}: ${displayValue(child)}`).join("\n")
+      : String(item ?? "");
+  return displayValue(record);
+}
+
+function OutputPre({ value }: { value: string }) {
   return (
-    <>
-      {label && (
-        <span className="font-mono text-[11px] leading-4 text-kumo-inactive uppercase tracking-[0.08em]">
-          {label}
-        </span>
-      )}
-      <pre className="max-h-56 overflow-auto rounded-xl border border-kumo-line/70 bg-kumo-base p-3 font-mono text-[12px] leading-[18px] text-kumo-subtle whitespace-pre-wrap">
+    <div
+      className="rounded-xl border border-kumo-line/70 bg-kumo-elevated/45 px-4 py-3 text-kumo-subtle"
+      data-output-card=""
+    >
+      <div className="flex items-center justify-between gap-3 text-[14px] font-medium leading-5">
+        <span>Output</span>
+        <button
+          type="button"
+          onClick={() => navigator.clipboard.writeText(value)}
+          className="flex h-4 w-4 items-center justify-center text-kumo-subtle transition-colors hover:text-kumo-default focus-visible:outline-none focus-visible:text-kumo-default"
+          aria-label="Copy output"
+        >
+          <Copy size={16} />
+        </button>
+      </div>
+      <pre className="mt-2 max-h-56 overflow-auto border-t border-kumo-line/70 pt-3 font-sans text-[14px] font-normal leading-5 whitespace-pre-wrap">
         {value}
       </pre>
-    </>
+    </div>
   );
 }
 
@@ -43,14 +65,7 @@ export const ToolCallDetails = memo(function ToolCallDetails({
 }: {
   toolCall: CloudOsToolCall;
 }) {
-  const code =
-    typeof tc.input.code === "string"
-      ? tc.input.code
-      : typeof tc.input.command === "string"
-        ? tc.input.command
-        : "";
-  const inputText =
-    Object.keys(tc.input).length > 0 ? safeStringify(tc.input) : "";
+  const output = displayOutput(tc.output, tc.outputText);
   return (
     <div className="space-y-2">
       {tc.errorText && (
@@ -58,18 +73,8 @@ export const ToolCallDetails = memo(function ToolCallDetails({
           {tc.errorText}
         </pre>
       )}
-      {code ? (
-        <>
-          <OutputPre label="Code" value={code} />
-          <OutputPre label="Output" value={tc.outputText} />
-        </>
-      ) : (
-        <>
-          <OutputPre value={inputText} />
-          {tc.outputText && <OutputPre label="Output" value={tc.outputText} />}
-        </>
-      )}
-      {!code && !inputText && !tc.outputText && !tc.errorText && (
+      {output && <OutputPre value={output} />}
+      {!output && !tc.errorText && (
         <p className="m-0 text-[12px] leading-4 text-kumo-inactive">
           No additional data
         </p>
@@ -118,7 +123,7 @@ export const NestedToolCallRow = memo(function NestedToolCallRow({
         </span>
       </button>
       {open && (
-        <div className="themed-surface-inset ml-8 mt-1 space-y-3 rounded-2xl border border-kumo-line/70 bg-kumo-elevated/45 p-3">
+        <div className="ml-8 mt-1 space-y-3">
           <ToolCallDetails toolCall={tc} />
         </div>
       )}
@@ -128,14 +133,52 @@ export const NestedToolCallRow = memo(function NestedToolCallRow({
 
 export const ThinkingTraceRow = memo(function ThinkingTraceRow({
   reasoning,
+  running,
 }: {
   reasoning: string;
+  running: boolean;
 }) {
+  const [open, setOpen] = useState(running);
+  const contentId = useId();
+  const summary = reasoning.replace(/\s+/g, " ").trim();
+
+  useEffect(() => setOpen(running), [running]);
+
   return (
-    <div className="min-w-0 py-1 text-kumo-subtle">
-      <div className="cos-markdown min-w-0 text-[13px] leading-[19px]">
-        <MarkdownMessage message={reasoning} />
-      </div>
+    <div
+      className="flex min-w-0 flex-col items-start gap-2"
+      data-thinking-trace=""
+      data-state={open ? "open" : "closed"}
+    >
+      <button
+        type="button"
+        onClick={() => setOpen((current) => !current)}
+        className="group -ml-0.5 flex w-full min-w-0 items-center gap-1.5 rounded-xl px-1.5 py-1 text-left text-[14px] leading-5 text-kumo-inactive transition-colors hover:text-kumo-default focus-visible:text-kumo-default focus-visible:outline-none"
+        aria-expanded={open}
+        aria-controls={contentId}
+      >
+        <span className="relative grid size-4 flex-shrink-0 place-items-center" aria-hidden="true">
+          <Atom
+            size={14}
+            className="transition-opacity group-hover:opacity-0 group-focus-visible:opacity-0"
+          />
+          <CaretDown
+            size={14}
+            className={`absolute opacity-0 transition-[opacity,transform] group-hover:opacity-100 group-focus-visible:opacity-100 ${open ? "" : "-rotate-90"}`}
+          />
+        </span>
+        <span className="flex-shrink-0 text-kumo-subtle">Think</span>
+        <span aria-hidden="true">·</span>
+        <span className="min-w-0 flex-1 truncate">{summary}</span>
+      </button>
+      {open && (
+        <div
+          id={contentId}
+          className="cos-markdown w-full rounded-xl border border-kumo-line bg-kumo-elevated/45 px-4 py-3 text-[14px] leading-[1.4] text-kumo-default/70"
+        >
+          <MarkdownMessage message={reasoning} />
+        </div>
+      )}
     </div>
   );
 });
@@ -189,7 +232,7 @@ export const ToolGroupRow = memo(function ToolGroupRow({
       </button>
       {open &&
         (group.calls.length === 1 ? (
-          <div className="themed-surface-inset ml-8 mt-1 space-y-3 rounded-2xl border border-kumo-line/70 bg-kumo-elevated/45 p-3">
+          <div className="ml-8 mt-1 space-y-3">
             <ToolCallDetails toolCall={group.calls[0]} />
           </div>
         ) : (

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

@@ -51,7 +51,12 @@ export interface PlanStep {
 }
 
 export type AssistantBlock =
-  | { kind: "reasoning"; key: string; text: string }
+  | {
+      kind: "reasoning";
+      key: string;
+      text: string;
+      running: boolean;
+    }
   | { kind: "text"; key: string; text: string }
   | { kind: "toolGroup"; key: string; group: ToolCallGroup }
   | { kind: "plan"; key: string; steps: PlanStep[]; running: boolean }
@@ -326,7 +331,12 @@ function assistantBlocks(
       const text = String(record.text ?? "").trim();
       if (!text || !showThinkingTraces) return;
       flush();
-      blocks.push({ kind: "reasoning", key, text });
+      blocks.push({
+        kind: "reasoning",
+        key,
+        text,
+        running: record.state === "streaming",
+      });
       return;
     }
 

package/cloud-os/index.ts

@@ -21,7 +21,10 @@ export type {
   FileViewProps,
   FileViewStatus,
 } from "./file-view";
-export { CloudOsWorkspaceSplit } from "./layout/cloud-os-workspace-split";
+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";

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

@@ -6,6 +6,7 @@ import {
   type PointerEvent as ReactPointerEvent,
   type ReactNode,
 } from "react";
+import { motion, useReducedMotion } from "motion/react";
 
 /**
  * 左聊天 / 右工作区的双栏骨架。从 cloudflare-os-main `GadgetEditor.tsx` 的 BODY
@@ -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));
@@ -62,6 +113,8 @@ export interface CloudOsWorkspaceSplitProps {
   /** 右栏收起时依然保留的窄边栏宽度(原文件的 Outputs rail)。 */
   railWidth?: number;
   rail?: ReactNode;
+  /** 覆盖整个聊天 + 工作区主体；页面级导航应放在分栏外。 */
+  isLoading?: boolean;
 }
 
 export function CloudOsWorkspaceSplit({
@@ -70,6 +123,7 @@ export function CloudOsWorkspaceSplit({
   workspaceOpen,
   railWidth = 0,
   rail,
+  isLoading = false,
 }: CloudOsWorkspaceSplitProps) {
   const containerRef = useRef<HTMLDivElement>(null);
   const resizeSessionRef = useRef<ResizeSession | null>(null);
@@ -184,6 +238,7 @@ export function CloudOsWorkspaceSplit({
     <div
       ref={containerRef}
       className="relative flex h-full min-h-0 flex-1 overflow-hidden bg-kumo-base"
+      aria-busy={isLoading}
     >
       {/* ── 左:聊天 ──────────────────────────────────────────────────────── */}
       <div
@@ -223,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:

package/demo/camel-chat-showcase.tsx

@@ -72,7 +72,8 @@ export function CamelChatShowcase() {
           : {};
       return (
         record.type === "tool-write_file" ||
-        record.type === "tool-cancel_schedule"
+        record.type === "tool-cancel_schedule" ||
+        record.type === "tool-schedule"
       ) &&
         record.state === "approval-requested"
         ? { id: "camel-demo-approval", approved: approval }
@@ -256,6 +257,14 @@ export function CamelChatShowcase() {
             }}
             onApprove={(_approvalId, decision) => {
               const approved = decision !== "deny";
+              if (scenario === "schedule_create") {
+                setApproval(approved);
+                selectScenario(approved ? "schedule" : "submitted");
+                setLastEvent(approved
+                  ? "Scheduled task created"
+                  : "Schedule creation cancelled");
+                return;
+              }
               if (scenario === "schedule_cancel") {
                 setApproval(approved);
                 setLastEvent(

package/demo/chat-scenarios.ts

@@ -37,6 +37,7 @@ export type DemoScenario =
   | "temporary_agent"
   | "agent_tools"
   | "background_agent"
+  | "schedule_create"
   | "schedule"
   | "schedule_cancel"
   | "approval"
@@ -118,9 +119,15 @@ export const scenarios: Record<DemoScenario, DemoScenarioMeta> = {
     status: "ready",
     flowStep: 3,
   },
+  schedule_create: {
+    label: "Create scheduled task",
+    description: "Review the task, cadence, and timezone before creating the schedule.",
+    status: "ready",
+    flowStep: 2,
+  },
   schedule: {
-    label: "定时任务已创建",
-    description: "schedule 执行成功后展示任务名称、触发规则、时区和已安排状态。",
+    label: "Scheduled task created",
+    description: "A completed schedule shows its task, cadence, timezone, and final status.",
     status: "ready",
     flowStep: 3,
   },
@@ -292,8 +299,26 @@ function askUserRequest(response?: DemoAskUserResponse): UIMessage {
 const planningWork = {
   id: "camel-demo-planning-work",
   role: "assistant",
-  metadata: { turnStartedAt: demoTurnStartedAt + 3_000 },
+  metadata: {
+    turnStartedAt: demoTurnStartedAt + 3_000,
+    turnDurationMs: 18_000,
+  },
   parts: [
+    {
+      type: "reasoning",
+      text: `先确认受众和交付范围，再验证产品案例。
+
+用户选择的读者是管理层，交付物是报告。因此内容不能只罗列界面趋势，还需要把每项趋势连接到业务价值、落地成本和潜在风险，帮助管理层判断优先级。
+
+接下来会分三步推进：
+
+1. 检索 2025–2026 年主流 AI Agent 产品，优先采集官方发布说明、产品文档和可验证的真实界面。
+2. 对比任务规划、工具调用、人工确认、后台执行和结果交付等关键交互，区分普遍模式与单个产品的特色设计。
+3. 把证据整理成可执行建议，并为每条建议标注适用场景、实现复杂度和预期收益。
+
+第一轮检索先覆盖通用 Agent、开发者 Agent 与企业自动化产品。如果不同来源对同一趋势的描述冲突，会保留分歧并继续寻找一手证据，而不是直接下结论。`,
+      state: "done",
+    },
     {
       type: "tool-update_plan",
       state: "output-available",
@@ -478,6 +503,26 @@ const backgroundResult = {
   ],
 } as unknown as UIMessage;
 
+export const demoScheduleInput = {
+  label: "Weekly competitor report",
+  prompt: "Generate and send this week's competitor report.",
+  trigger: { kind: "cron", cron: "0 9 * * 1" },
+  timezone: "Asia/Shanghai",
+};
+
+const scheduleRequest = {
+  id: "camel-demo-schedule-request",
+  role: "assistant",
+  parts: [
+    {
+      type: "tool-schedule",
+      toolCallId: "camel-demo-schedule-request-1",
+      state: "approval-requested",
+      input: demoScheduleInput,
+    },
+  ],
+} as unknown as UIMessage;
+
 const scheduledTask = {
   id: "camel-demo-schedule",
   role: "assistant",
@@ -486,12 +531,7 @@ const scheduledTask = {
       type: "tool-schedule",
       toolCallId: "camel-demo-schedule-1",
       state: "output-available",
-      input: {
-        label: "每周发送竞品报告",
-        prompt: "生成并发送本周竞品报告。",
-        trigger: { kind: "cron", cron: "0 9 * * 1" },
-        timezone: "Asia/Shanghai",
-      },
+      input: demoScheduleInput,
       output: { scheduled: true, id: "schedule-1" },
     },
   ],
@@ -877,6 +917,9 @@ export function messagesForScenario(
   if (scenario === "background_agent") {
     return [...conversation, backgroundDispatch, backgroundResult];
   }
+  if (scenario === "schedule_create") {
+    return [...conversation, scheduleRequest];
+  }
   if (scenario === "schedule") {
     return [...conversation, scheduledTask];
   }

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

@@ -13,6 +13,7 @@ import {
   CloudOsRoot,
   CloudOsWorkspacePanel,
   CloudOsWorkspaceSplit,
+  ScheduleConfirmation,
   WorkshopIconButton,
   buildCloudOsEntries,
   type CloudOsAttachmentView,
@@ -32,7 +33,7 @@ import {
 
 /**
  * cloud-os 版快速预览。场景表和 camel-chat-showcase 共用 `chat-scenarios.ts`,
- * 所以两边的状态逐条对齐(同样 22 个场景、同样的 7 步流程条、同样的初始 URL 参数)。
+ * 所以两边的状态逐条对齐(同样 23 个场景、同样的 7 步流程条、同样的初始 URL 参数)。
  * 差别只在外壳:这里是 cloudflare-os 的左聊天 / 右工作区双栏。
  */
 
@@ -155,7 +156,8 @@ export function CloudOsChatShowcase() {
         ? (part as { type?: unknown; state?: unknown })
         : {};
     return (record.type === "tool-write_file" ||
-      record.type === "tool-cancel_schedule") &&
+      record.type === "tool-cancel_schedule" ||
+      record.type === "tool-schedule") &&
       record.state === "approval-requested"
       ? "cloud-os-demo-approval"
       : undefined;
@@ -285,6 +287,7 @@ export function CloudOsChatShowcase() {
 
       <CloudOsWorkspaceSplit
         workspaceOpen={workspaceOpen}
+        isLoading={scenario === "hydrating"}
         chat={
           <div className="flex h-full min-h-0 flex-col bg-kumo-base">
             <aside
@@ -353,18 +356,36 @@ export function CloudOsChatShowcase() {
                 status === "submitted" ||
                 status === "streaming" ||
                 scenario === "ask" ||
+                scenario === "schedule_create" ||
                 ((scenario === "approval" || scenario === "schedule_cancel") &&
                   approval === undefined)
               }
-              isHydrating={scenario === "hydrating"}
               isRecovering={scenario === "recovering"}
-              recoveryStatusLabel="模型响应暂时中断,正在重试…"
+              recoveryStatusLabel="Model response interrupted. Retrying…"
               awaitingApproval={
-                (scenario === "approval" || scenario === "schedule_cancel") &&
+                (scenario === "approval" ||
+                  scenario === "schedule_cancel" ||
+                  scenario === "schedule_create") &&
                 approval === undefined
               }
               showThinkingTraces={showThinkingTraces}
               approvalIdOf={approvalIdOf}
+              renderApproval={({ toolName, input }) =>
+                toolName === "schedule"
+                  ? (
+                      <ScheduleConfirmation
+                        input={input}
+                        onCancel={() => {
+                          selectScenario("submitted");
+                          setLastEvent("Schedule creation cancelled");
+                        }}
+                        onConfirm={() => {
+                          selectScenario("schedule");
+                          setLastEvent("Scheduled task created");
+                        }}
+                      />
+                    )
+                  : undefined}
               error={statusError}
               constrainWidth={!workspaceOpen}
               onRetry={() => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@springbrand/message-panel",
-  "version": "0.1.3-alpha.13",
+  "version": "0.1.3-alpha.14",
   "type": "module",
   "files": [
     "src",
@@ -31,6 +31,7 @@
     "@streamdown/math": "^1.0.2",
     "@streamdown/mermaid": "^1.0.2",
     "lucide-react": "^1.24.0",
+    "motion": "^13.1.0",
     "radix-ui": "^1.6.2",
     "react-markdown": "^10.1.0",
     "remark-gfm": "^4.0.1",