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

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/activity-indicator.tsx

@@ -0,0 +1,29 @@
+import { ThinkingOrb } from "thinking-orbs";
+import { useCloudOsMode } from "../internal/theme-context";
+import type { CloudOsActivity } from "./transcript-model";
+
+/**
+ * 回合还在跑、但屏幕上没有任何东西在动时的活动指示。
+ *
+ * 用 thinking-orbs 的 canvas 球而不是一行 shimmer 文字:动画本身就是「还活着」
+ * 的信号,文案只负责说清在干什么(`deriveTurnActivity` 给出的四种之一)。
+ *
+ * 和 `src/status.tsx` 的 `ThinkingIndicator` 是同一个上游球、同一套 role/aria
+ * 形状,但**不共用实现** —— cloud-os 不 import `../src`(见 cloud-os/README.md,
+ * 由 check-chat-presentation-boundary.mjs 守着),文案也走 cloud-os 自己的
+ * 工具种类表,不是 src 那套工具名正则。
+ */
+export function CloudOsActivityIndicator({ state, label }: CloudOsActivity) {
+  // 必须显式传 theme,不能用它的 `auto`:auto 先扫祖先的 data-theme / .dark / .light,
+  // 而本仓的浅色**是「没有 .dark」**,扫不到任何标记 → 它回落到
+  // prefers-color-scheme,也就是**操作系统**的深浅。系统深色 + 应用浅色时,
+  // 球会在浅底上画浅墨,几乎看不见。cloud-os 子树的深浅事实源是这个 context
+  // (CloudOsRoot 从宿主的 useThemeMode() 拿到),直接用它。
+  const mode = useCloudOsMode();
+  return (
+    <div className="cos-activity" role="status" aria-label={label}>
+      <ThinkingOrb state={state} size={20} theme={mode} aria-hidden="true" />
+      <span>{label}</span>
+    </div>
+  );
+}