@springbrand/message-panel 0.1.3-alpha.34 → 0.1.3-alpha.36

package/cloud-os/README.md

@@ -64,7 +64,8 @@ pnpm dev:cloud-os        # http://localhost:9992
 
 ## 宿主接线要求
 
-1. Tailwind 入口里 **`@import` 本包的 css 必须和其它 `@import` 挤在最前面**。排到
+1. Tailwind 入口先 `@import "tw-animate-css"`,再 **`@import` 本包的 css,
+   且必须和其它 `@import` 挤在最前面**。排到
    `@source` / `@layer` 之后,Tailwind 就不会内联它,`@theme` 块会被整块忽略,
    kumo 的 utility 一个都生成不出来(踩过一次)。
 2. 把本目录加进 `@source`,且必须写显式 glob:`"…/cloud-os/**/*.{ts,tsx}"`。

package/cloud-os/assets/thinking-star.svg

@@ -0,0 +1,9 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="12.2369" height="12.2369" viewBox="0 0 12.2369 12.2369" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Star 14" d="M5.18061 0.652963C5.50276 -0.217655 6.73415 -0.217654 7.05631 0.652964L7.64089 2.23277C8.04603 3.32764 8.90927 4.19089 10.0042 4.59603L11.584 5.18061C12.4546 5.50276 12.4546 6.73415 11.584 7.05631L10.0041 7.64089C8.90927 8.04603 8.04603 8.90927 7.64089 10.0042L7.05631 11.584C6.73415 12.4546 5.50276 12.4546 5.18061 11.584L4.59603 10.0041C4.19089 8.90927 3.32764 8.04603 2.23277 7.64089L0.652963 7.05631C-0.217655 6.73415 -0.217654 5.50276 0.652964 5.18061L2.23277 4.59603C3.32764 4.19089 4.19089 3.32764 4.59603 2.23277L5.18061 0.652963Z" fill="url(#paint0_radial_0_26)"/>
+<defs>
+<radialGradient id="paint0_radial_0_26" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(6.11846 2.11846) rotate(90) scale(12)">
+<stop stop-color="#FF9938"/>
+<stop offset="1" stop-color="#FFE46C"/>
+</radialGradient>
+</defs>
+</svg>

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

@@ -1,4 +1,5 @@
 import type { UIMessage } from "ai";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
 import {
   ArrowDown,
   Brain,
@@ -17,6 +18,11 @@ import {
   type ReactNode,
 } from "react";
 import { Tooltip } from "../primitives/tooltip";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "../primitives/collapsible";
 import { WorkshopIconButton } from "../primitives/workshop-controls";
 import {
   MarkdownMessage,
@@ -35,6 +41,7 @@ import {
   type ApprovalDecision,
 } from "./rich-blocks";
 import { ThinkingTraceRow, ToolGroupRow } from "./tool-rows";
+import { collapsePanel } from "./surfaces";
 import { CloudOsActivityIndicator } from "./activity-indicator";
 import { ProductGeneration } from "./image-generation";
 import { GenerationLoader } from "./loading-state";
@@ -49,6 +56,7 @@ import {
   formatClockTime,
   formatFullTimestamp,
   rhythmTopClass,
+  type AssistantBlock,
   type CloudOsEntry,
   type CloudOsActionPresentation,
 } from "./transcript-model";
@@ -61,6 +69,8 @@ export interface CloudOsChatMessagesProps {
   /** 权威 Turn 生命周期;提供时替代本地 status 推断。 */
   turnActive?: boolean;
   isRecovering?: boolean;
+  recoveryAttempt?: number;
+  recoveryMax?: number;
   recoveryStatusLabel?: string;
   awaitingApproval?: boolean;
   /** 有 pending steer 时,活动占位说明「正在等当前步骤收尾」。 */
@@ -184,7 +194,10 @@ function UserBubble({
         </div>
       )}
       {entry.text && (
-        <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">
+        <div
+          data-user-message-bubble=""
+          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 animate-in fade-in slide-in-from-bottom-1 duration-300 motion-reduce:animate-none"
+        >
           <MarkdownMessage
             message={entry.text}
             resolveUrl={resolveUrl}
@@ -315,11 +328,49 @@ function ActionPresentationBlock({
   );
 }
 
+function TurnWorkDisclosure({
+  running,
+  open,
+  onOpenChange,
+  children,
+}: {
+  running: boolean;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  children: ReactNode;
+}) {
+  return (
+    <Collapsible
+      data-slot="turn-work-disclosure"
+      open={open}
+      onOpenChange={onOpenChange}
+    >
+      <CollapsibleTrigger
+        aria-disabled={running}
+        className="group/trigger flex items-center gap-1.5 rounded-md py-1 text-[13.5px] text-kumo-inactive transition-colors outline-none hover:text-kumo-subtle"
+      >
+        <CaretRight
+          size={14}
+          className="shrink-0 transition-transform duration-200 group-data-open/trigger:rotate-90 group-data-panel-open/trigger:rotate-90 motion-reduce:transition-none"
+        />
+        <span>{running ? "Working…" : "Work"}</span>
+      </CollapsibleTrigger>
+      <CollapsibleContent className={collapsePanel}>
+        <div className="cos-trace-chain relative space-y-4 pt-2">
+          {children}
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}
+
 export function CloudOsChatMessages({
   messages,
   status,
   turnActive,
   isRecovering = false,
+  recoveryAttempt,
+  recoveryMax,
   recoveryStatusLabel,
   awaitingApproval = false,
   hasPendingSteer = false,
@@ -345,9 +396,13 @@ export function CloudOsChatMessages({
   const scrollRef = useRef<HTMLDivElement>(null);
   const endRef = useRef<HTMLDivElement>(null);
   const [showScrollButton, setShowScrollButton] = useState(false);
+  const reducedMotion = useReducedMotion();
   const [expandedToolCalls, setExpandedToolCalls] = useState<ReadonlySet<string>>(
     () => new Set(),
   );
+  const [expandedTurnWork, setExpandedTurnWork] = useState<ReadonlySet<string>>(
+    () => new Set(),
+  );
   const [expandedCompactions, setExpandedCompactions] = useState<
     ReadonlySet<string>
   >(() => new Set());
@@ -365,6 +420,20 @@ export function CloudOsChatMessages({
       }),
     [approvalIdOf, isActive, messages, showThinkingTraces],
   );
+  const latestUserIndex = entries.findLastIndex((entry) => entry.type === "user");
+  const activeTurnEntry = isActive
+    ? entries.findLast(
+      (entry, index): entry is Extract<CloudOsEntry, { type: "assistant" }> =>
+        index > latestUserIndex && entry.type === "assistant",
+    )
+    : undefined;
+  const currentPlan = activeTurnEntry?.blocks.findLast(
+    (block): block is Extract<AssistantBlock, { kind: "plan" }> =>
+      block.kind === "plan",
+  );
+  const completedPlanSteps = currentPlan?.steps.filter(
+    (step) => step.status === "done",
+  ).length ?? 0;
 
   const entryTopClasses = useMemo(
     () =>
@@ -383,6 +452,15 @@ export function CloudOsChatMessages({
     });
   }, []);
 
+  const setTurnWorkOpen = useCallback((key: string, open: boolean) => {
+    setExpandedTurnWork((current) => {
+      const next = new Set(current);
+      if (open) next.add(key);
+      else next.delete(key);
+      return next;
+    });
+  }, []);
+
   const toggleCompaction = useCallback((key: string) => {
     setExpandedCompactions((current) => {
       const next = new Set(current);
@@ -409,6 +487,8 @@ export function CloudOsChatMessages({
   const activity = deriveTurnActivity(entries, {
     isActive,
     isRecovering,
+    recoveryAttempt,
+    recoveryMax,
     recoveryStatusLabel,
     awaitingApproval,
     hasPendingSteer,
@@ -425,14 +505,15 @@ export function CloudOsChatMessages({
       data-status={status}
       aria-busy={isActive || isRecovering}
     >
-      <div
-        ref={scrollRef}
-        onScroll={syncScrollButton}
-        tabIndex={0}
-        role="region"
-        aria-label="Chat messages"
-        className="cos-chat-panel flex-1 overflow-y-auto"
-      >
+      <div className="relative flex min-h-0 flex-1">
+        <div
+          ref={scrollRef}
+          onScroll={syncScrollButton}
+          tabIndex={0}
+          role="region"
+          aria-label="Chat messages"
+          className="cos-chat-panel flex-1 overflow-y-auto"
+        >
         <div
           className={`flex flex-col px-6 pb-8 pt-8 ${
             constrainWidth ? "mx-auto w-full max-w-[920px]" : ""
@@ -449,7 +530,11 @@ export function CloudOsChatMessages({
 
             if (entry.type === "user") {
               return (
-                <div key={entry.key} className={topClass}>
+                <div
+                  key={entry.key}
+                  data-user-message-entry=""
+                  className={topClass}
+                >
                   <UserBubble
                     entry={entry}
                     onCopy={copyText}
@@ -545,9 +630,34 @@ export function CloudOsChatMessages({
               );
             }
 
-            const hasNarrative = entry.blocks.some(
-              (block) => block.kind === "text",
+            const entryIsActive =
+              isActive && entryIndex === entries.length - 1;
+            const finalTextBlocks = entryIsActive
+              ? []
+              : entry.blocks.filter(
+                (block): block is Extract<AssistantBlock, { kind: "text" }> =>
+                  block.kind === "text" && block.final,
+              );
+            const finalActionBlocks = entryIsActive
+              ? []
+              : entry.blocks.filter(
+                (block): block is Extract<AssistantBlock, { kind: "actionPresentation" }> =>
+                  block.kind === "actionPresentation" &&
+                  block.presentation.state === "ready",
+              );
+            const finalMediaBlocks = entry.blocks.filter(
+              (block): block is Extract<AssistantBlock, { kind: "image" | "file" }> =>
+                block.kind === "image" || block.kind === "file",
+            );
+            const workBlocks = entry.blocks.filter(
+              (block) =>
+                block.kind !== "suggestions" &&
+                block.kind !== "image" &&
+                block.kind !== "file" &&
+                !(block.kind === "text" && block.final && !entryIsActive) &&
+                !(block.kind === "actionPresentation" && block.presentation.state === "ready"),
             );
+            const hasNarrative = finalTextBlocks.length > 0;
             const insufficientFailures = entry.blocks.filter(
               (block) => block.kind === "actionPresentation" &&
                 block.presentation.state === "failed" &&
@@ -558,14 +668,33 @@ export function CloudOsChatMessages({
               (block) => block.kind === "actionPresentation" &&
                 block.presentation.state === "ready",
             );
+            const followUpBlocks = entry.blocks.filter(
+              (block) => block.kind === "suggestions",
+            );
+            const footerTimestamp =
+              hasNarrative &&
+              entry.timestamp !== undefined &&
+              !entryIsActive &&
+              !entry.blocks.some(
+                (block) => block.kind === "reasoning" && block.running,
+              )
+                ? entry.timestamp
+                : undefined;
 
             return (
               <div
                 key={entry.key}
-                className={`${topClass} min-w-0 w-full max-w-[860px] space-y-2`}
+                className={`${topClass} group/agentMessage min-w-0 w-full max-w-[860px] space-y-2`}
               >
-                <div className="group/agentMessage relative space-y-1.5">
-                  {entry.blocks.map((block) => {
+                {workBlocks.length > 0 && (
+                  <TurnWorkDisclosure
+                    running={entryIsActive}
+                    open={entryIsActive || expandedTurnWork.has(entry.key)}
+                    onOpenChange={(open) => {
+                      if (!entryIsActive) setTurnWorkOpen(entry.key, open);
+                    }}
+                  >
+                  {workBlocks.map((block) => {
                     switch (block.kind) {
                       case "reasoning":
                         return (
@@ -577,13 +706,11 @@ export function CloudOsChatMessages({
                         );
                       case "text": {
                         const streaming =
-                          isActive &&
-                          entryIndex === entries.length - 1 &&
-                          block === entry.blocks.at(-1);
+                          entryIsActive && block === entry.blocks.at(-1);
                         return (
                           <div
                             key={block.key}
-                            className="cos-markdown text-[14px] leading-[22px] tracking-[-0.25px] text-kumo-default"
+                            className="cos-markdown px-1.5 text-[14px] leading-[22px] tracking-[-0.25px] text-kumo-default"
                           >
                             <MarkdownMessage
                               message={block.text}
@@ -606,6 +733,7 @@ export function CloudOsChatMessages({
                           />
                         );
                       case "plan":
+                        if (currentPlan?.key === block.key) return null;
                         return (
                           <PlanBlock
                             key={block.key}
@@ -622,13 +750,7 @@ export function CloudOsChatMessages({
                           />
                         );
                       case "suggestions":
-                        return (
-                          <SuggestionsBlock
-                            key={block.key}
-                            items={block.items}
-                            onSuggestion={(text) => onSuggestion?.(text)}
-                          />
-                        );
+                        return null;
                       case "schedule":
                         return (
                           <ScheduleBlock
@@ -671,39 +793,6 @@ export function CloudOsChatMessages({
                         return (
                           <SubAgentsBlock key={block.key} agents={block.agents} />
                         );
-                      case "image":
-                        {
-                          const url = resolveUrl?.(block.src) ?? block.src;
-                          const artifactId = resolveArtifactId?.(url);
-                          return (
-                            <Fragment key={block.key}>
-                              {renderFileView(renderFile, {
-                                file: {
-                                  url,
-                                  filename: block.alt,
-                                  mediaType: block.mediaType ?? "image/*",
-                                },
-                                placement: "assistant-message",
-                                onOpen: artifactId && onOpenArtifact
-                                  ? () => onOpenArtifact(artifactId)
-                                  : undefined,
-                              })}
-                            </Fragment>
-                          );
-                        }
-                      case "file":
-                        return (
-                          <Fragment key={block.key}>
-                            {renderFileView(renderFile, {
-                              file: {
-                                ...block.file,
-                                url:
-                                  resolveUrl?.(block.file.url) ?? block.file.url,
-                              },
-                              placement: "assistant-message",
-                            })}
-                          </Fragment>
-                        );
                       case "actionPresentation":
                         if (
                           block.presentation.failureCode === "insufficient_credits" &&
@@ -731,8 +820,67 @@ export function CloudOsChatMessages({
                         );
                     }
                   })}
+                  </TurnWorkDisclosure>
+                )}
+
+                {(finalMediaBlocks.length > 0 || finalActionBlocks.length > 0 || finalTextBlocks.length > 0) && (
+                  <div data-final-message="" className="space-y-4">
+                    {finalMediaBlocks.map((block) => {
+                      if (block.kind === "image") {
+                        const url = resolveUrl?.(block.src) ?? block.src;
+                        const artifactId = resolveArtifactId?.(url);
+                        return (
+                          <Fragment key={block.key}>
+                            {renderFileView(renderFile, {
+                              file: {
+                                url,
+                                filename: block.alt,
+                                mediaType: block.mediaType ?? "image/*",
+                              },
+                              placement: "assistant-message",
+                              onOpen: artifactId && onOpenArtifact
+                                ? () => onOpenArtifact(artifactId)
+                                : undefined,
+                            })}
+                          </Fragment>
+                        );
+                      }
+                      return (
+                        <Fragment key={block.key}>
+                          {renderFileView(renderFile, {
+                            file: {
+                              ...block.file,
+                              url: resolveUrl?.(block.file.url) ?? block.file.url,
+                            },
+                            placement: "assistant-message",
+                          })}
+                        </Fragment>
+                      );
+                    })}
+                    {finalActionBlocks.map((block) => (
+                      <ActionPresentationBlock
+                        key={block.key}
+                        presentation={block.presentation}
+                        renderFile={renderFile}
+                        resolveUrl={resolveUrl}
+                        resolveArtifactId={resolveArtifactId}
+                        onOpenArtifact={onOpenArtifact}
+                      />
+                    ))}
+                    {finalTextBlocks.map((block) => (
+                      <div key={block.key} className="cos-markdown px-1.5 text-[14px] leading-[22px] tracking-[-0.25px] text-kumo-default">
+                        <MarkdownMessage
+                          message={block.text}
+                          resolveUrl={resolveUrl}
+                          resolveArtifactId={resolveArtifactId}
+                          onOpenArtifact={onOpenArtifact}
+                        />
+                      </div>
+                    ))}
+                  </div>
+                )}
 
-                  {entry.terminal?.kind === "error" && (
+                {entry.terminal?.kind === "error" && (
                     <ErrorBlock
                       title={entry.terminal.title}
                       body={entry.terminal.body}
@@ -740,7 +888,7 @@ export function CloudOsChatMessages({
                     />
                   )}
 
-                  {entry.terminal?.kind === "interrupted" && (
+                {entry.terminal?.kind === "interrupted" && (
                     <div
                       className="px-1.5 py-1 text-[13px] leading-[19px] text-kumo-inactive"
                       role="status"
@@ -749,8 +897,11 @@ export function CloudOsChatMessages({
                     </div>
                   )}
 
-                  {hasNarrative && entry.timestamp !== undefined && (
-                    <div className="mt-0.5 -ml-1 flex items-center gap-1 opacity-0 transition-opacity duration-150 ease-out group-hover/agentMessage:opacity-100 group-focus-within/agentMessage:opacity-100">
+                {footerTimestamp !== undefined && (
+                    <div
+                      data-agent-message-footer=""
+                      className="mt-0.5 -ml-1 flex items-center gap-1 opacity-0 transition-opacity duration-150 ease-out group-hover/agentMessage:opacity-100 group-focus-within/agentMessage:opacity-100"
+                    >
                       <Tooltip
                         content={copied === entry.copyText ? "Copied!" : "Copy message"}
                         asChild
@@ -768,14 +919,21 @@ export function CloudOsChatMessages({
                           )}
                         </button>
                       </Tooltip>
-                      <Tooltip content={formatFullTimestamp(entry.timestamp)} asChild>
+                      <Tooltip content={formatFullTimestamp(footerTimestamp)} asChild>
                         <span className="px-1 font-mono text-[11px] leading-4 text-kumo-inactive">
-                          {formatClockTime(entry.timestamp)}
+                          {formatClockTime(footerTimestamp)}
                         </span>
                       </Tooltip>
                     </div>
                   )}
-                </div>
+
+                {followUpBlocks.map((block) => (
+                    <SuggestionsBlock
+                      key={block.key}
+                      items={block.items}
+                      onSuggestion={(text) => onSuggestion?.(text)}
+                    />
+                ))}
               </div>
             );
           })}
@@ -804,19 +962,46 @@ export function CloudOsChatMessages({
 
           <div ref={endRef} />
         </div>
+        </div>
+
+        <WorkshopIconButton
+          aria-label="Scroll to bottom"
+          onClick={() => endRef.current?.scrollIntoView({ behavior: "smooth" })}
+          className={`themed-floating-shadow absolute bottom-3 left-1/2 z-20 -translate-x-1/2 !rounded-full border border-kumo-line bg-kumo-base transition-all duration-200 ${
+            showScrollButton
+              ? "translate-y-0 opacity-100"
+              : "pointer-events-none translate-y-2 opacity-0"
+          }`}
+        >
+          <ArrowDown size={15} />
+        </WorkshopIconButton>
       </div>
 
-      <WorkshopIconButton
-        aria-label="Scroll to bottom"
-        onClick={() => endRef.current?.scrollIntoView({ behavior: "smooth" })}
-        className={`themed-floating-shadow absolute bottom-3 left-1/2 z-20 -translate-x-1/2 !rounded-full border border-kumo-line bg-kumo-base transition-all duration-200 ${
-          showScrollButton
-            ? "translate-y-0 opacity-100"
-            : "pointer-events-none translate-y-2 opacity-0"
-        }`}
-      >
-        <ArrowDown size={15} />
-      </WorkshopIconButton>
+      <AnimatePresence initial={false}>
+        {currentPlan && completedPlanSteps < currentPlan.steps.length && (
+          <motion.div
+            key="task-progress"
+            initial={reducedMotion ? { opacity: 1 } : { opacity: 0, y: 8, scale: 0.98 }}
+            animate={{ opacity: 1, y: 0, scale: 1 }}
+            exit={reducedMotion ? { opacity: 0 } : { opacity: 0, y: 8, scale: 0.98 }}
+            transition={{ duration: reducedMotion ? 0 : 0.2, ease: [0.32, 0.72, 0, 1] }}
+            className="relative z-10 mx-auto w-full max-w-3xl shrink-0 px-4"
+          >
+            <section
+              data-cloud-os-plan-progress=""
+              aria-label="Task progress"
+              className="mx-auto border border-b-0 border-kumo-line bg-kumo-base px-4 py-2.5"
+              style={{ width: "90%", borderRadius: "1rem 1rem 0 0" }}
+            >
+              <PlanBlock
+                steps={currentPlan.steps}
+                running={isActive}
+                defaultOpen={false}
+              />
+            </section>
+          </motion.div>
+        )}
+      </AnimatePresence>
 
     </div>
   );

package/cloud-os/chat/code-runner.tsx

@@ -0,0 +1,106 @@
+"use client";
+
+import type { ComponentProps } from "react";
+import { Loader2Icon, PlayIcon } from "lucide-react";
+import { cn } from "../internal/cn";
+import { codeScroll, codeSurface, ghostButton, mono, paper } from "./surfaces";
+
+export type RunState = "idle" | "running" | "ok" | "error";
+
+export function CodeRunner({
+  language,
+  code,
+  state,
+  output,
+  durationMs,
+  onRun,
+  className,
+  ...props
+}: Omit<
+  ComponentProps<"div">,
+  "children" | "language" | "code" | "state" | "output" | "durationMs" | "onRun"
+> & {
+  language: string;
+  code: string;
+  state: RunState;
+  output: readonly string[];
+  durationMs?: number;
+  onRun?: () => void;
+}) {
+  return (
+    <div
+      data-slot="code-runner"
+      className={cn(
+        paper,
+        "flex w-full max-w-md flex-col overflow-hidden rounded-2xl",
+        className,
+      )}
+      {...props}
+    >
+      <div className="flex items-center gap-2 px-3.5 py-2">
+        <span className={cn(mono, "text-foreground/35 min-w-0 flex-1")}>
+          {language}
+        </span>
+        {durationMs !== undefined && state !== "running" && (
+          <span
+            className={cn(mono, "text-foreground/30 shrink-0 tabular-nums")}
+          >
+            {durationMs}ms
+          </span>
+        )}
+        {onRun && (
+          <button
+            type="button"
+            aria-label="Run this snippet"
+            onClick={onRun}
+            disabled={state === "running"}
+            className={cn(
+              ghostButton,
+              "size-7 shrink-0 disabled:pointer-events-none",
+            )}
+          >
+            {state === "running" ? (
+              <Loader2Icon className="size-3.5 animate-spin motion-reduce:animate-none" />
+            ) : (
+              <PlayIcon className="size-3.5 translate-x-px" />
+            )}
+          </button>
+        )}
+      </div>
+
+      <pre className={cn(codeScroll, "border-foreground/[0.07] border-t px-3.5 py-2.5 font-mono text-xs leading-relaxed")}>
+        <code className="text-foreground/75">{code}</code>
+      </pre>
+
+      {state !== "idle" && (
+        <div className="border-foreground/[0.07] fade-in animate-in flex flex-col border-t px-3.5 py-2.5 duration-300">
+          <span className={cn(mono, "text-foreground/30 pb-1")}>output</span>
+          <div className={codeScroll}>
+            <div className={cn(codeSurface, "flex flex-col")}>
+              {output.map((line, index) => (
+                <span
+                  key={`${index}-${line}`}
+                  className={cn(
+                    "fade-in animate-in fill-mode-both font-mono text-xs leading-relaxed whitespace-pre",
+                    state === "error"
+                      ? "text-red-600 dark:text-red-400"
+                      : "text-foreground/70",
+                  )}
+                  style={{ animationDelay: `${index * 80}ms` }}
+                >
+                  {line}
+                </span>
+              ))}
+            </div>
+          </div>
+          {state === "running" && (
+            <span
+              aria-hidden
+              className="bg-foreground/40 h-[1em] w-[2px] animate-pulse rounded-full motion-reduce:animate-none"
+            />
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/cloud-os/chat/range.ts

@@ -0,0 +1,8 @@
+export function clamp(value: number, min: number, max: number) {
+  if (Number.isNaN(value)) return min;
+  return Math.min(max, Math.max(min, value));
+}
+
+export function take<T>(items: readonly T[], count: number) {
+  return items.slice(0, Math.floor(clamp(count, 0, items.length)));
+}