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

package/cloud-os/README.md

@@ -0,0 +1,71 @@
+# cloud-os
+
+从 `cloudflare-os-main`(`packages/workshop-frontend`)搬来的聊天体 + 右侧工作区面板,
+适配到本仓的 UIMessage 协议。**完全独立**:不 import `../src` 的任何东西,自带
+`cn` / 主题 / 图标 / markdown / Tooltip / DropdownMenu。这条边界由
+`scripts/check-chat-presentation-boundary.mjs` 守着 —— 一旦开始互相 import,
+下次要整段同步上游就没法做了。
+
+## 怎么预览
+
+```bash
+pnpm dev:cloud-os        # http://localhost:9992
+```
+
+场景表和 `demo/camel-chat-showcase.tsx` 共用 `demo/chat-scenarios.ts`,
+所以两边 22 个场景逐条对齐;`?scenario=<id>` 可直接深链。
+
+## 目录
+
+| 路径 | 对应上游文件 |
+| --- | --- |
+| `styles/cloud-os.css` | `src/styles.css` + `src/ChatInterface.module.css` |
+| `chat/tool-rows.tsx` | `ChatInterface.tsx` 的 WorkIcon / ToolCallDetails / NestedToolCallRow / ToolGroupRow / ThinkingTraceRow |
+| `chat/cloud-os-chat-messages.tsx` | `ChatInterface.tsx` 的消息区主渲染 |
+| `chat/transcript-model.ts` | `buildChatDisplayEntries` + `rhythmTopClass` |
+| `chat/tool-presentation.ts` | `getToolCallSummary` / `describeToolCallCount` / `getToolIcon` / `buildToolCallGroups` |
+| `chat/rich-blocks.tsx` | `renderActionCard` 的 blocking callout(其余是 UIMessage 才有的 part) |
+| `composer/cloud-os-chat-input.tsx` | `ChatInterface.tsx` 的 `ChatInput` |
+| `workspace/cloud-os-workspace-panel.tsx` | `GadgetEditor.tsx` 的 PaneLabel / PaneWorkpieceTabs / PaneTab + tab bar |
+| `layout/cloud-os-workspace-split.tsx` | `GadgetEditor.tsx` 的 BODY 双栏 + 拖拽把手 |
+| `primitives/*` | `components/WorkshopControls.tsx`、`components/CountBadge.tsx`,以及 Kumo 的 Tooltip / DropdownMenu |
+
+## 相对上游做了什么改动
+
+搬运原则是「先照抄,再最小适配」。改动只有这几类,别的地方 className 一个字没动:
+
+1. **数据源**。上游吃的是 gadgets 自己的 `AiChatMessage`(离散消息类型 + 独立
+   toolCalls 数组);这里吃 UIMessage —— 一条 assistant 消息里一个有序 `parts`
+   数组。所以「按消息类型分派」换成「按 parts 顺序切块」:连续的工具 part 攒成一个
+   `ToolCallGroup`,遇到非工具 part 就 flush。
+2. **工具文案**。上游是穷举十几个 gadgets 工具名的 `switch`;UIMessage 下工具名是
+   开放集合,穷举不成立,改成「规范化工具种类 → 动词/复数/图标」查表。
+3. **底座替换**。`@cloudflare/kumo` 的 Tooltip / DropdownMenu / Button / Input 换成
+   radix + 原生元素。视觉全部由拷来的 className 决定,所以看起来一样;不引 Kumo 是
+   因为它会往同一层 `@theme` 里塞一整套 token,和宿主 `universal-agent-ui` 的
+   shadcn 主题正面冲突。
+4. **作用域化主题**。只有 kumo 命名空间的 token 进 `@theme`;通用 token(字体 /
+   圆角 / 字号 / 缓动)挂在 `.cloud-os-root` 上靠继承生效,宿主主题分毫不动。
+5. **删掉的东西**:capsule(URL → 资源胶囊)、行内 slash picker、ComposerMirror、
+   GatekeeperModal、Yjs 草稿 / 「接受改动」那一整套。它们都直挂 gadgets 的 capnweb
+   RPC,UIMessage 协议下没有对应物。slash 命令退成「+」菜单里的一组条目 —— 能力
+   保住,但没有边打字边过滤的行内补全。
+6. **窄栏适配**。授权卡 / 提问卡 / 定时卡在上游是「图标 + 正文 + 右侧动作」一行到底;
+   聊天栏默认只有 420px,一行放不下会把正文挤成 0 宽,所以改成允许换行。
+
+## 协议语义
+
+- `update_plan` 是**整份快照覆盖**,不是增量事件。整条会话只保留最后一份计划快照
+  (`dropSupersededPlans`),否则同一份计划会被画上四遍。
+- `ask_user` 的「已回答」取的是**这条消息之后的第一条用户直答**,不是工具 output ——
+  后者往往只是 `{ asked: true }` 之类的回执。
+- `approval-requested` 的工具是否渲染成原位授权卡,由宿主的 `approvalIdOf` 决定;
+  返回 `undefined` 就退回普通工具行(本仓的持久化审批走输入框上方那条队列)。
+
+## 宿主接线要求
+
+1. Tailwind 入口里 **`@import` 本包的 css 必须和其它 `@import` 挤在最前面**。排到
+   `@source` / `@layer` 之后,Tailwind 就不会内联它,`@theme` 块会被整块忽略,
+   kumo 的 utility 一个都生成不出来(踩过一次)。
+2. 把本目录加进 `@source`,且必须写显式 glob:`"…/cloud-os/**/*.{ts,tsx}"`。
+3. 所有组件包在 `<CloudOsRoot mode={...}>` 里,否则拿不到作用域 token。

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

@@ -0,0 +1,606 @@
+import type { UIMessage } from "ai";
+import {
+  ArrowDown,
+  Brain,
+  CaretRight,
+  Check,
+  Copy,
+  File as FileIcon,
+  Terminal,
+} from "@phosphor-icons/react";
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { Tooltip } from "../primitives/tooltip";
+import { WorkshopIconButton } from "../primitives/workshop-controls";
+import {
+  MarkdownMessage,
+  type CloudOsUrlResolver,
+} from "./markdown-message";
+import {
+  ApprovalBlock,
+  AskUserBlock,
+  ErrorBlock,
+  ParallelBlock,
+  PlanBlock,
+  ScheduleBlock,
+  SubAgentsBlock,
+  SuggestionsBlock,
+  type ApprovalDecision,
+} from "./rich-blocks";
+import { ThinkingTraceRow, ToolGroupRow } from "./tool-rows";
+import {
+  buildCloudOsEntries,
+  formatClockTime,
+  formatFullTimestamp,
+  rhythmTopClass,
+  type CloudOsEntry,
+} from "./transcript-model";
+
+export type CloudOsChatStatus = "ready" | "submitted" | "streaming" | "error";
+
+export interface CloudOsChatMessagesProps {
+  messages: readonly UIMessage[];
+  status: CloudOsChatStatus;
+  isHydrating?: boolean;
+  isRecovering?: boolean;
+  recoveryStatusLabel?: string;
+  /** 有 pending steer 时,活动占位说明「正在等当前步骤收尾」。 */
+  hasPendingSteer?: boolean;
+  /** 首帧就带着待发消息:此时不显示空会话欢迎语。 */
+  startedWithPending?: boolean;
+  error?: unknown;
+  showThinkingTraces?: boolean;
+  /** 把某个 part 映射成待授权 id;返回 undefined 表示不在此处渲染授权。 */
+  approvalIdOf?: (part: unknown) => string | undefined;
+  approvalsDisabled?: boolean;
+  /** 把消息里的 `sandbox:/workspace/...` 之类地址翻译成可访问 URL。 */
+  resolveUrl?: CloudOsUrlResolver;
+  /** 消息区宽度是否收敛到 920px 居中(GadgetEditor 里叫 constrainChatWidth)。 */
+  constrainWidth?: boolean;
+  emptyTitle?: string;
+  onRetry?: () => void;
+  onApprove?: (approvalId: string, decision: ApprovalDecision) => void;
+  onSuggestion?: (text: string) => void;
+  onAnswer?: (payload: unknown) => void;
+  /** 点击定时任务卡片:宿主决定跳到哪(缺省 → 卡片不可点)。 */
+  onOpenSchedule?: (scheduleId: string) => void;
+  onCopy?: (text: string) => void;
+}
+
+function useCopyAction(): {
+  copied: string | null;
+  copy: (text: string) => void;
+} {
+  const [copied, setCopied] = useState<string | null>(null);
+  const timerRef = useRef<number | null>(null);
+  useEffect(
+    () => () => {
+      if (timerRef.current !== null) window.clearTimeout(timerRef.current);
+    },
+    [],
+  );
+  const copy = useCallback((text: string) => {
+    void navigator.clipboard.writeText(text).then(() => {
+      setCopied(text);
+      if (timerRef.current !== null) window.clearTimeout(timerRef.current);
+      timerRef.current = window.setTimeout(() => setCopied(null), 1500);
+    });
+  }, []);
+  return { copied, copy };
+}
+
+function UserBubble({
+  entry,
+  onCopy,
+  copied,
+  resolveUrl,
+}: {
+  entry: Extract<CloudOsEntry, { type: "user" }>;
+  onCopy: (text: string) => void;
+  copied: boolean;
+  resolveUrl?: CloudOsUrlResolver;
+}) {
+  return (
+    <div className="group/message relative flex flex-col items-end">
+      {entry.attachments.length > 0 && (
+        <div className="mb-1.5 flex max-w-[min(680px,78%)] flex-wrap justify-end gap-2">
+          {entry.attachments.map((attachment, index) =>
+            attachment.mediaType?.startsWith("image/") ? (
+              <img
+                key={`${attachment.url}:${index}`}
+                src={attachment.url}
+                alt={attachment.filename ?? "Attachment"}
+                className="themed-thumbnail-shadow max-h-52 max-w-64 rounded-xl border border-kumo-line object-cover"
+              />
+            ) : (
+              <span
+                key={`${attachment.url}:${index}`}
+                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"
+              >
+                <FileIcon size={13} className="text-kumo-inactive" />
+                {attachment.filename ?? "Attachment"}
+              </span>
+            ),
+          )}
+        </div>
+      )}
+      {entry.text && (
+        <div className="themed-user-bubble-shadow cos-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">
+          {/* pre-wrap 让用户消息里的单个换行渲染成硬换行 */}
+          <div className="whitespace-pre-wrap">
+            <MarkdownMessage message={entry.text} resolveUrl={resolveUrl} />
+          </div>
+        </div>
+      )}
+      <div className="mt-0.5 flex items-center justify-end gap-2 pr-1 text-[11px] leading-4 text-kumo-inactive opacity-0 transition-opacity duration-150 ease-out group-hover/message:opacity-100 group-focus-within/message:opacity-100">
+        {entry.authorName && <span className="font-medium">{entry.authorName}</span>}
+        {entry.timestamp !== undefined && (
+          <Tooltip content={formatFullTimestamp(entry.timestamp)} asChild>
+            <span className="font-mono">{formatClockTime(entry.timestamp)}</span>
+          </Tooltip>
+        )}
+        {entry.text && (
+          <Tooltip content={copied ? "Copied!" : "Copy message"} asChild>
+            <button
+              type="button"
+              onClick={() => onCopy(entry.text)}
+              className="flex cursor-pointer items-center rounded-md p-1 text-kumo-inactive transition-[color,transform] duration-150 ease-out hover:text-kumo-default focus-visible:text-kumo-default focus-visible:outline-none active:scale-[0.96]"
+              aria-label={copied ? "Copied!" : "Copy message"}
+            >
+              {copied ? <Check size={13} weight="bold" /> : <Copy size={13} />}
+            </button>
+          </Tooltip>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export function CloudOsChatMessages({
+  messages,
+  status,
+  isHydrating = false,
+  isRecovering = false,
+  recoveryStatusLabel,
+  hasPendingSteer = false,
+  startedWithPending = false,
+  error,
+  showThinkingTraces = true,
+  approvalIdOf,
+  approvalsDisabled = false,
+  resolveUrl,
+  constrainWidth = true,
+  emptyTitle = "What are we working on?",
+  onRetry,
+  onApprove,
+  onSuggestion,
+  onAnswer,
+  onOpenSchedule,
+  onCopy,
+}: CloudOsChatMessagesProps) {
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const endRef = useRef<HTMLDivElement>(null);
+  const [showScrollButton, setShowScrollButton] = useState(false);
+  const [expandedToolCalls, setExpandedToolCalls] = useState<ReadonlySet<string>>(
+    () => new Set(),
+  );
+  const [expandedCompactions, setExpandedCompactions] = useState<
+    ReadonlySet<string>
+  >(() => new Set());
+  const { copied, copy } = useCopyAction();
+  const isActive = status === "submitted" || status === "streaming";
+
+  const entries = useMemo(
+    () =>
+      buildCloudOsEntries({
+        messages,
+        isActive,
+        showThinkingTraces,
+        approvalIdOf,
+      }),
+    [approvalIdOf, isActive, messages, showThinkingTraces],
+  );
+
+  const entryTopClasses = useMemo(
+    () =>
+      entries.map((entry, index) =>
+        rhythmTopClass(index > 0 ? entries[index - 1] : null, entry),
+      ),
+    [entries],
+  );
+
+  const toggleToolCall = useCallback((key: string) => {
+    setExpandedToolCalls((current) => {
+      const next = new Set(current);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      return next;
+    });
+  }, []);
+
+  const toggleCompaction = useCallback((key: string) => {
+    setExpandedCompactions((current) => {
+      const next = new Set(current);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      return next;
+    });
+  }, []);
+
+  const syncScrollButton = useCallback(() => {
+    const element = scrollRef.current;
+    if (!element) return;
+    const distance =
+      element.scrollHeight - element.scrollTop - element.clientHeight;
+    setShowScrollButton(distance > 120);
+  }, []);
+
+  useEffect(() => {
+    const element = scrollRef.current;
+    if (!element || showScrollButton) return;
+    element.scrollTo({ top: element.scrollHeight });
+  }, [isRecovering, messages, status, showScrollButton]);
+
+  // 只有在「本回合还没吐出任何可见内容」时才显示 Thinking 占位;一旦有真实输出,
+  // 输出自己会说话(照搬原文件的 showThinking 判据)。
+  const lastEntry = entries.at(-1) ?? null;
+  const awaitingFirstOutput =
+    isActive &&
+    (lastEntry === null ||
+      lastEntry.type === "user" ||
+      lastEntry.type === "slashCommand");
+  const copyText = (text: string) => {
+    copy(text);
+    onCopy?.(text);
+  };
+
+  return (
+    <div
+      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}
+    >
+      <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]" : ""
+          }`}
+        >
+          {entries.length === 0 && !startedWithPending && !isHydrating && (
+            <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>
+          )}
+
+          {entries.map((entry, entryIndex) => {
+            const topClass = entryTopClasses[entryIndex] ?? "";
+
+            if (entry.type === "user") {
+              return (
+                <div key={entry.key} className={topClass}>
+                  <UserBubble
+                    entry={entry}
+                    onCopy={copyText}
+                    copied={copied === entry.text}
+                    resolveUrl={resolveUrl}
+                  />
+                </div>
+              );
+            }
+
+            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">
+                    <span className="whitespace-pre-wrap font-mono">{entry.text}</span>
+                  </div>
+                </div>
+              );
+            }
+
+            if (entry.type === "localCommandOutput") {
+              return (
+                <div
+                  key={entry.key}
+                  className={`${topClass} max-w-[860px] text-[14px] leading-5 tracking-[-0.25px] text-kumo-subtle`}
+                >
+                  <div className="flex items-center gap-3 px-1.5 py-1">
+                    <span
+                      className="flex h-5 w-5 flex-shrink-0 items-center justify-center text-kumo-inactive"
+                      aria-hidden="true"
+                    >
+                      <Terminal size={16} />
+                    </span>
+                    <span className="min-w-0 truncate font-mono text-[13px]">
+                      {entry.text}
+                    </span>
+                  </div>
+                </div>
+              );
+            }
+
+            if (entry.type === "notice") {
+              return (
+                <div
+                  key={entry.key}
+                  className={`${topClass} max-w-[860px] text-[13px] leading-[19px] tracking-[-0.25px] text-kumo-inactive`}
+                >
+                  <div className="px-1.5 py-1">{entry.text}</div>
+                </div>
+              );
+            }
+
+            if (entry.type === "compactionBoundary") {
+              const expanded = expandedCompactions.has(entry.key);
+              return (
+                <div key={entry.key} className={`${topClass} mb-4 max-w-[860px]`}>
+                  <div
+                    className="flex items-center gap-3"
+                    role="separator"
+                    aria-label="Context compacted"
+                  >
+                    <span className="h-px flex-1 bg-kumo-line" aria-hidden="true" />
+                    <button
+                      type="button"
+                      onClick={() => toggleCompaction(entry.key)}
+                      aria-expanded={expanded}
+                      className="flex flex-shrink-0 cursor-pointer items-center gap-1.5 rounded-md px-1 py-0.5 text-[11px] leading-4 font-medium tracking-[0.6px] text-kumo-inactive uppercase transition-colors duration-150 ease-out hover:text-kumo-default focus-visible:text-kumo-default focus-visible:outline-none"
+                    >
+                      <Brain size={13} aria-hidden="true" />
+                      Context compacted
+                      <CaretRight
+                        size={11}
+                        weight="bold"
+                        className={`transition-transform duration-150 ease-out ${expanded ? "rotate-90" : ""}`}
+                      />
+                    </button>
+                    <span className="h-px flex-1 bg-kumo-line" aria-hidden="true" />
+                  </div>
+                  {expanded && (
+                    <div className="themed-surface-inset cos-markdown mt-3 rounded-2xl border border-kumo-line/70 bg-kumo-elevated/45 p-3.5 text-[13px] leading-[19px]">
+                      <MarkdownMessage
+                        message={entry.summary}
+                        resolveUrl={resolveUrl}
+                      />
+                    </div>
+                  )}
+                </div>
+              );
+            }
+
+            const hasNarrative = entry.blocks.some(
+              (block) => block.kind === "text",
+            );
+
+            return (
+              <div
+                key={entry.key}
+                className={`${topClass} min-w-0 w-full max-w-[860px] space-y-2`}
+              >
+                <div className="group/agentMessage relative space-y-1.5">
+                  {entry.blocks.map((block) => {
+                    switch (block.kind) {
+                      case "reasoning":
+                        return (
+                          <ThinkingTraceRow key={block.key} reasoning={block.text} />
+                        );
+                      case "text":
+                        return (
+                          <div
+                            key={block.key}
+                            className="cos-markdown text-[14px] leading-[22px] tracking-[-0.25px] text-kumo-default"
+                          >
+                            <MarkdownMessage
+                              message={block.text}
+                              resolveUrl={resolveUrl}
+                            />
+                          </div>
+                        );
+                      case "toolGroup":
+                        return (
+                          <ToolGroupRow
+                            key={block.key}
+                            group={block.group}
+                            open={expandedToolCalls.has(block.group.key)}
+                            expandedKeys={expandedToolCalls}
+                            onToggle={toggleToolCall}
+                          />
+                        );
+                      case "plan":
+                        return (
+                          <PlanBlock
+                            key={block.key}
+                            steps={block.steps}
+                            running={block.running}
+                          />
+                        );
+                      case "askUser":
+                        return (
+                          <AskUserBlock
+                            key={block.key}
+                            call={block.call}
+                            answeredText={block.answeredText}
+                            onAnswer={(payload) => onAnswer?.(payload)}
+                          />
+                        );
+                      case "suggestions":
+                        return (
+                          <SuggestionsBlock
+                            key={block.key}
+                            items={block.items}
+                            onSuggestion={(text) => onSuggestion?.(text)}
+                          />
+                        );
+                      case "schedule":
+                        return (
+                          <ScheduleBlock
+                            key={block.key}
+                            call={block.call}
+                            onOpen={onOpenSchedule}
+                          />
+                        );
+                      case "approval":
+                        return (
+                          <ApprovalBlock
+                            key={block.key}
+                            call={block.call}
+                            approvalId={block.approvalId}
+                            disabled={approvalsDisabled}
+                            onApprove={(id, decision) => onApprove?.(id, decision)}
+                          />
+                        );
+                      case "parallel":
+                        return (
+                          <ParallelBlock
+                            key={block.key}
+                            label={block.label}
+                            tools={block.tools}
+                          />
+                        );
+                      case "subagents":
+                        return (
+                          <SubAgentsBlock key={block.key} agents={block.agents} />
+                        );
+                      case "image":
+                        return (
+                          <figure key={block.key} className="my-1">
+                            <img
+                              src={resolveUrl?.(block.src) ?? block.src}
+                              alt={block.alt}
+                              className="max-h-[28rem] max-w-full rounded-xl border border-kumo-line object-contain"
+                            />
+                          </figure>
+                        );
+                      case "error":
+                        return (
+                          <ErrorBlock
+                            key={block.key}
+                            title={block.title}
+                            body={block.body}
+                          />
+                        );
+                    }
+                  })}
+
+                  {entry.terminal?.kind === "error" && (
+                    <ErrorBlock
+                      title={entry.terminal.title}
+                      body={entry.terminal.body}
+                      onRetry={onRetry}
+                    />
+                  )}
+
+                  {entry.terminal?.kind === "interrupted" && (
+                    <div
+                      className="px-1.5 py-1 text-[13px] leading-[19px] text-kumo-inactive"
+                      role="status"
+                    >
+                      {entry.terminal.title}
+                    </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">
+                      <Tooltip
+                        content={copied === entry.copyText ? "Copied!" : "Copy message"}
+                        asChild
+                      >
+                        <button
+                          type="button"
+                          onClick={() => copyText(entry.copyText)}
+                          className="flex cursor-pointer items-center rounded-md p-1 text-kumo-inactive transition-[color,transform] duration-150 ease-out hover:text-kumo-default focus-visible:text-kumo-default focus-visible:outline-none active:scale-[0.96]"
+                          aria-label="Copy message"
+                        >
+                          {copied === entry.copyText ? (
+                            <Check size={15} weight="bold" />
+                          ) : (
+                            <Copy size={15} />
+                          )}
+                        </button>
+                      </Tooltip>
+                      <Tooltip content={formatFullTimestamp(entry.timestamp)} asChild>
+                        <span className="px-1 font-mono text-[11px] leading-4 text-kumo-inactive">
+                          {formatClockTime(entry.timestamp)}
+                        </span>
+                      </Tooltip>
+                    </div>
+                  )}
+                </div>
+              </div>
+            );
+          })}
+
+          {isRecovering && (
+            <div className="mt-4 flex max-w-[860px] items-center gap-3 px-1.5 py-1 text-[14px] leading-5 tracking-[-0.25px]">
+              <span className="cos-thinking-shimmer">
+                {recoveryStatusLabel ?? "Reconnecting…"}
+              </span>
+            </div>
+          )}
+
+          {awaitingFirstOutput && (
+            <div className="mt-5 inline-flex px-1.5 py-1 text-[14px] leading-5 tracking-[-0.25px]">
+              <span className="cos-thinking-shimmer">
+                {hasPendingSteer ? "Waiting for the current step to finish…" : "Thinking"}
+              </span>
+            </div>
+          )}
+
+          {error != null && (
+            <div className="mt-4">
+              <ErrorBlock
+                title="Error"
+                body={
+                  error instanceof Error
+                    ? error.message
+                    : typeof error === "string"
+                      ? error
+                      : "Something went wrong"
+                }
+                onRetry={onRetry}
+              />
+            </div>
+          )}
+
+          <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>
+
+      {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>
+  );
+}