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

package/cloud-os/composer/cloud-os-chat-input.tsx

@@ -0,0 +1,541 @@
+import {
+  Brain,
+  CaretDown,
+  Check,
+  File as FileIcon,
+  Plug,
+  Plus,
+  Terminal,
+  X,
+} from "@phosphor-icons/react";
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  type DragEvent as ReactDragEvent,
+  type ReactNode,
+} from "react";
+import { DropdownMenu } from "../primitives/dropdown-menu";
+import { Tooltip } from "../primitives/tooltip";
+import { WorkshopIconButton } from "../primitives/workshop-controls";
+
+const isComposingKeyEvent = (event: {
+  isComposing?: boolean;
+  keyCode?: number;
+}) => event.isComposing === true || event.keyCode === 229;
+
+/**
+ * 从 cloudflare-os-main `ChatInterface.tsx` 的 `ChatInput` 拷来。
+ *
+ * 保留:prompt card 的形与投影、自动增高的 textarea、拖拽落文件的整卡覆盖层、
+ * 附件缩略图行、底部左「+ / 添加资源」右「模型 / 发送-停止」的布局、
+ * draftUpdateBanner 插槽、blockedReason 占位文案、Enter 发送 / Shift+Enter 换行。
+ *
+ * 删掉:capsule(URL → 资源胶囊)、slash command picker、ComposerMirror、
+ * GatekeeperModal —— 这四样都直挂 gadgets 的 capnweb RPC,在 UIMessage 协议下
+ * 没有对应物。「添加资源」按钮保留成一个可选回调,宿主不给就不渲染。
+ */
+
+export interface CloudOsModelOption {
+  id: string;
+  name: string;
+}
+
+export interface CloudOsComposerCommand {
+  name: string;
+  description: string;
+  /** 选中后填进输入框的起手文本。 */
+  prompt: string;
+}
+
+export interface CloudOsAttachmentView {
+  id: string;
+  filename?: string;
+  mediaType?: string;
+  size?: number;
+  previewUrl?: string;
+  status: "uploading" | "ready" | "error";
+}
+
+export interface CloudOsChatInputProps {
+  value: string;
+  onChange: (value: string) => void;
+  onSubmit: () => void;
+  onStop?: () => void;
+  status: "ready" | "submitted" | "streaming" | "error";
+  models?: readonly CloudOsModelOption[];
+  selectedModel?: string | null;
+  onModelChange?: (modelId: string | null) => void;
+  attachments?: readonly CloudOsAttachmentView[];
+  onFilesSelected?: (files: readonly File[]) => void;
+  onAttachmentRemove?: (id: string) => void;
+  onAttachmentRetry?: (id: string) => void;
+  /** 底部左侧的额外控件(宿主的 Agent 档位设置等)。 */
+  tools?: ReactNode;
+  /** 发送键左边的额外控件(宿主的「引导 / 排队」投递方式)。 */
+  submitControl?: ReactNode;
+  /** 宿主侧判定「此刻不能提交」(缺必填设置、引导不可用…)。 */
+  submissionBlocked?: boolean;
+  /**
+   * 回合是否进行中。宿主的 turn 状态比 status 更准(status 会在 steer 间隙回落),
+   * 传了就以它为准来决定显示发送键还是停止键。
+   */
+  turnActive?: boolean;
+  /**
+   * 可用的斜杠命令。cloudflare-os 原版是一个直连 RPC 的行内 picker;这里退成
+   * 「+」菜单里的一组条目 —— 能力保住,但**没有**边打字边过滤的行内补全。
+   */
+  commands?: readonly CloudOsComposerCommand[];
+  /** 有值时渲染「添加资源」按钮。 */
+  onAttachResource?: () => void;
+  attachLabel?: string;
+  showThinkingTraces?: boolean;
+  onToggleThinkingTraces?: () => void;
+  /** 非空时锁住输入框,并把它当占位文案显示。 */
+  blockedReason?: string;
+  /** 贴在 prompt card 顶部的横幅(原文件用来放「待接受的改动」)。 */
+  banner?: ReactNode;
+  placeholder?: string;
+  minRows?: number;
+  maxRows?: number;
+  autoFocus?: boolean;
+  /** 输入框下方一行(原文件放 token / cost)。 */
+  footnote?: ReactNode;
+}
+
+const MAX_PENDING_ATTACHMENTS = 5;
+
+function autoResizeTextarea(
+  textarea: HTMLTextAreaElement,
+  minRows: number,
+  maxRows: number,
+) {
+  textarea.style.height = "auto";
+  const cs = getComputedStyle(textarea);
+  const lineHeight = parseFloat(cs.lineHeight) || parseFloat(cs.fontSize) * 1.5;
+  const paddingY = parseFloat(cs.paddingTop) + parseFloat(cs.paddingBottom);
+  const borderY =
+    parseFloat(cs.borderTopWidth) + parseFloat(cs.borderBottomWidth);
+  const minH = lineHeight * minRows + paddingY + borderY;
+  const maxH = lineHeight * maxRows + paddingY + borderY;
+  textarea.style.height = `${Math.min(Math.max(textarea.scrollHeight, minH), maxH)}px`;
+  textarea.style.overflow = textarea.scrollHeight > maxH ? "auto" : "hidden";
+}
+
+export function CloudOsChatInput({
+  value,
+  onChange,
+  onSubmit,
+  onStop,
+  status,
+  models = [],
+  selectedModel = null,
+  onModelChange,
+  attachments = [],
+  onFilesSelected,
+  onAttachmentRemove,
+  onAttachmentRetry,
+  tools,
+  submitControl,
+  submissionBlocked = false,
+  turnActive,
+  commands = [],
+  onAttachResource,
+  attachLabel,
+  showThinkingTraces,
+  onToggleThinkingTraces,
+  blockedReason,
+  banner,
+  placeholder,
+  minRows = 1,
+  maxRows = 6,
+  autoFocus = false,
+  footnote,
+}: CloudOsChatInputProps) {
+  const textareaRef = useRef<HTMLTextAreaElement | null>(null);
+  const attachmentInputRef = useRef<HTMLInputElement>(null);
+  const dragDepthRef = useRef(0);
+  const [dragActive, setDragActive] = useState(false);
+
+  const isAgentActive =
+    turnActive ?? (status === "submitted" || status === "streaming");
+  const isBlocked = Boolean(blockedReason);
+  const canAttachMore = attachments.length < MAX_PENDING_ATTACHMENTS;
+  const hasReadyAttachment = attachments.some(
+    (attachment) => attachment.status === "ready",
+  );
+  const hasUnreadyAttachment = attachments.some(
+    (attachment) => attachment.status !== "ready",
+  );
+  // 回合进行中时依然可以提交(引导 / 排队),由宿主的 submissionBlocked 说了算。
+  // 只有「回合在跑 + 输入框是空的」才把发送键换成停止键 —— 否则用户打了一半字
+  // 按回车会变成停止,那是最难受的一种误触。
+  const showStopButton =
+    isAgentActive && Boolean(onStop) && !value.trim() && !hasReadyAttachment;
+  const canSend =
+    !isBlocked &&
+    !submissionBlocked &&
+    (value.trim().length > 0 || hasReadyAttachment) &&
+    !hasUnreadyAttachment;
+
+  const selectedModelLabel =
+    selectedModel === null
+      ? "No agent"
+      : (models.find((model) => model.id === selectedModel)?.name ?? selectedModel);
+
+  useEffect(() => {
+    const element = textareaRef.current;
+    if (element) autoResizeTextarea(element, minRows, maxRows);
+  }, [maxRows, minRows, value]);
+
+  const addFiles = useCallback(
+    (files: readonly File[]) => {
+      if (files.length === 0) return;
+      onFilesSelected?.(files.slice(0, MAX_PENDING_ATTACHMENTS - attachments.length));
+    },
+    [attachments.length, onFilesSelected],
+  );
+
+  const handleDragEnter = (event: ReactDragEvent<HTMLDivElement>) => {
+    if (!onFilesSelected) return;
+    if (!Array.from(event.dataTransfer.types).includes("Files")) return;
+    dragDepthRef.current += 1;
+    setDragActive(true);
+  };
+  const handleDragOver = (event: ReactDragEvent<HTMLDivElement>) => {
+    if (!onFilesSelected) return;
+    if (!Array.from(event.dataTransfer.types).includes("Files")) return;
+    event.preventDefault();
+    event.dataTransfer.dropEffect = canAttachMore ? "copy" : "none";
+  };
+  const handleDragLeave = () => {
+    dragDepthRef.current = Math.max(0, dragDepthRef.current - 1);
+    if (dragDepthRef.current === 0) setDragActive(false);
+  };
+  const handleDrop = (event: ReactDragEvent<HTMLDivElement>) => {
+    if (!onFilesSelected) return;
+    event.preventDefault();
+    dragDepthRef.current = 0;
+    setDragActive(false);
+    addFiles(Array.from(event.dataTransfer.files));
+  };
+
+  return (
+    // isolation: isolate 把输入框内部的 z-index 关起来,免得盖到 portal 出去的模型下拉。
+    <div className="cos-chat-input-root relative isolate px-4 py-4">
+      <input
+        ref={attachmentInputRef}
+        type="file"
+        multiple
+        className="hidden"
+        onChange={(event) => {
+          const files = Array.from(event.currentTarget.files ?? []);
+          event.currentTarget.value = "";
+          addFiles(files);
+        }}
+      />
+
+      {/* Prompt card:比页面底色更亮(kumo-control vs kumo-base),配柔和中性投影,
+          让输入框读起来是一块独立表面;聚焦时投影再抬一档。 */}
+      <div
+        className="themed-prompt-card-shadow relative overflow-visible rounded-2xl border border-kumo-line bg-kumo-control transition-shadow duration-150 ease-out"
+        onDragEnter={handleDragEnter}
+        onDragOver={handleDragOver}
+        onDragLeave={handleDragLeave}
+        onDrop={handleDrop}
+      >
+        {dragActive && (
+          <div
+            className={`themed-inset-outline pointer-events-none absolute inset-0 z-20 grid place-items-center rounded-2xl border-2 border-dashed p-4 backdrop-blur-[1px] transition-[opacity,transform] duration-150 ease-out ${
+              canAttachMore
+                ? "border-kumo-brand/55 bg-kumo-brand/10"
+                : "border-kumo-warning/60 bg-kumo-warning/10"
+            }`}
+          >
+            <div
+              className={`themed-floating-shadow flex items-center gap-2 rounded-full border bg-kumo-base/90 px-3 py-2 text-[13px] font-medium leading-4 tracking-[-0.2px] text-kumo-default ${
+                canAttachMore ? "border-kumo-brand/25" : "border-kumo-warning/30"
+              }`}
+            >
+              <span
+                className={`grid h-7 w-7 place-items-center rounded-full ${
+                  canAttachMore
+                    ? "bg-kumo-brand/12 text-kumo-brand"
+                    : "bg-kumo-warning/15 text-kumo-warning"
+                }`}
+              >
+                <FileIcon size={16} weight="duotone" />
+              </span>
+              {canAttachMore
+                ? "Drop files to attach"
+                : `Messages are limited to ${MAX_PENDING_ATTACHMENTS} attachments`}
+            </div>
+          </div>
+        )}
+
+        {banner}
+
+        <div className="relative px-4 pb-1 pt-3">
+          <textarea
+            ref={(element) => {
+              textareaRef.current = element;
+              if (element) autoResizeTextarea(element, minRows, maxRows);
+            }}
+            value={value}
+            disabled={isBlocked}
+            autoFocus={autoFocus}
+            rows={minRows}
+            placeholder={
+              isBlocked
+                ? blockedReason
+                : isAgentActive
+                  ? "Waiting for agent…"
+                  : (placeholder ?? "Ask a follow-up…")
+            }
+            onChange={(event) => {
+              onChange(event.target.value);
+              autoResizeTextarea(event.target, minRows, maxRows);
+            }}
+            onPaste={(event) => {
+              const files = Array.from(event.clipboardData.items)
+                .filter((item) => item.kind === "file")
+                .map((item) => item.getAsFile())
+                .filter((file): file is File => file !== null);
+              if (files.length > 0) {
+                event.preventDefault();
+                addFiles(files);
+              }
+            }}
+            onKeyDown={(event) => {
+              // Enter 发送(按住 Shift 换行); IME 组合中不发送
+              if (
+                event.key === "Enter" &&
+                !event.shiftKey &&
+                !isComposingKeyEvent(event.nativeEvent)
+              ) {
+                event.preventDefault();
+                if (canSend) onSubmit();
+              }
+            }}
+            className="relative z-[1] w-full resize-none border-none bg-transparent p-0 text-[14px] leading-[22px] tracking-[-0.25px] text-kumo-default outline-none placeholder:text-kumo-inactive disabled:cursor-not-allowed"
+          />
+        </div>
+
+        {attachments.length > 0 && (
+          <div className="flex flex-wrap items-center gap-2 px-3 pb-2 pt-1">
+            {attachments.map((attachment) => (
+              <div
+                key={attachment.id}
+                className="relative flex h-14 w-14 items-center justify-center overflow-hidden rounded-lg border border-kumo-line/70 bg-kumo-elevated"
+              >
+                {attachment.previewUrl ? (
+                  <img
+                    src={attachment.previewUrl}
+                    alt={attachment.filename ?? "Attached file"}
+                    className="h-full w-full object-cover"
+                  />
+                ) : (
+                  <FileIcon size={22} className="text-kumo-inactive" />
+                )}
+                {attachment.status === "uploading" && (
+                  <div className="absolute inset-0 grid place-items-center rounded-lg bg-black/35 text-[10px] text-white">
+                    Uploading
+                  </div>
+                )}
+                {attachment.status === "error" && (
+                  <div className="absolute inset-0 grid place-items-center rounded-lg bg-kumo-danger/80 px-1 text-center text-[9px] leading-3 text-white">
+                    Failed
+                  </div>
+                )}
+                {attachment.status === "error" && onAttachmentRetry && (
+                  <button
+                    type="button"
+                    aria-label="Retry upload"
+                    onClick={() => onAttachmentRetry(attachment.id)}
+                    className="absolute inset-0 cursor-pointer"
+                  />
+                )}
+                {onAttachmentRemove && (
+                  <button
+                    type="button"
+                    aria-label="Remove attachment"
+                    onClick={() => onAttachmentRemove(attachment.id)}
+                    className="absolute right-0.5 top-0.5 flex h-4 w-4 cursor-pointer items-center justify-center rounded-full bg-black/55 text-white hover:bg-black/75 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/80"
+                  >
+                    <X size={10} weight="bold" />
+                  </button>
+                )}
+              </div>
+            ))}
+          </div>
+        )}
+
+        {/* 底部一行:左侧选项,右侧模型 + 发送 */}
+        <div className="flex items-center justify-between gap-1.5 px-3 pb-1.5">
+          <div className="flex min-w-0 flex-1 items-center gap-1.5 overflow-hidden">
+            <DropdownMenu>
+              <DropdownMenu.Trigger
+                render={
+                  <button
+                    type="button"
+                    className="group flex h-8 w-8 flex-shrink-0 cursor-pointer items-center justify-center rounded-lg text-kumo-inactive transition-[background-color,color,transform] duration-150 ease-out hover:bg-kumo-tint hover:text-kumo-subtle focus-visible:bg-kumo-tint focus-visible:text-kumo-subtle focus-visible:outline-none active:scale-[0.96] data-[state=open]:bg-kumo-tint data-[state=open]:text-kumo-subtle"
+                    aria-label="Open chat options"
+                  >
+                    <Plus size={18} />
+                  </button>
+                }
+              />
+              <DropdownMenu.Content className="themed-floating-shadow-lg !min-w-[170px] rounded-2xl border border-kumo-line/70 bg-kumo-base p-1">
+                {onToggleThinkingTraces && (
+                  <DropdownMenu.Item
+                    onClick={onToggleThinkingTraces}
+                    className="!h-auto rounded-xl !px-2 !py-1.5 text-[12px] leading-4 font-normal tracking-[-0.15px] text-kumo-subtle transition-colors data-highlighted:bg-kumo-tint/70 data-highlighted:text-kumo-default"
+                  >
+                    <span className="mr-2 inline-flex h-4 w-4 items-center justify-center text-kumo-inactive">
+                      <Brain size={14} />
+                    </span>
+                    <span className="flex-1">
+                      {showThinkingTraces ? "Hide thinking" : "Show thinking"}
+                    </span>
+                  </DropdownMenu.Item>
+                )}
+                {commands.length > 0 && (
+                  <>
+                    {commands.map((command) => (
+                      <DropdownMenu.Item
+                        key={command.name}
+                        onClick={() => {
+                          onChange(command.prompt);
+                          requestAnimationFrame(() =>
+                            textareaRef.current?.focus(),
+                          );
+                        }}
+                        className="!h-auto rounded-xl !px-2 !py-1.5 text-[12px] leading-4 font-normal tracking-[-0.15px] text-kumo-subtle transition-colors data-highlighted:bg-kumo-tint/70 data-highlighted:text-kumo-default"
+                      >
+                        <span className="mr-2 inline-flex h-4 w-4 items-center justify-center text-kumo-inactive">
+                          <Terminal size={14} />
+                        </span>
+                        <span className="min-w-0 flex-1 truncate">
+                          /{command.name}
+                        </span>
+                      </DropdownMenu.Item>
+                    ))}
+                    <div className="my-1 border-t border-kumo-line/70" />
+                  </>
+                )}
+                {onFilesSelected && (
+                  <DropdownMenu.Item
+                    onClick={() => attachmentInputRef.current?.click()}
+                    className="!h-auto rounded-xl !px-2 !py-1.5 text-[12px] leading-4 font-normal tracking-[-0.15px] text-kumo-subtle transition-colors data-highlighted:bg-kumo-tint/70 data-highlighted:text-kumo-default"
+                  >
+                    <span className="mr-2 inline-flex h-4 w-4 items-center justify-center text-kumo-inactive">
+                      <FileIcon size={14} />
+                    </span>
+                    <span className="flex-1">Upload file</span>
+                  </DropdownMenu.Item>
+                )}
+              </DropdownMenu.Content>
+            </DropdownMenu>
+            {onAttachResource && (
+              <button
+                type="button"
+                onClick={onAttachResource}
+                className="inline-flex h-8 flex-shrink-0 cursor-pointer items-center gap-1.5 rounded-lg px-2 text-[13px] leading-none tracking-[-0.25px] text-kumo-inactive transition-[background-color,color,transform] duration-150 ease-out hover:bg-kumo-tint hover:text-kumo-subtle focus-visible:bg-kumo-tint focus-visible:text-kumo-subtle focus-visible:outline-none active:scale-[0.97]"
+              >
+                <Plug size={15} className="flex-shrink-0" />
+                <span className="cos-attach-label leading-none">
+                  {attachLabel ?? "Add resource"}
+                </span>
+              </button>
+            )}
+            {tools}
+          </div>
+
+          <div className="ml-auto flex min-w-0 flex-shrink items-center gap-1.5">
+            {onModelChange && (
+              <DropdownMenu>
+                <DropdownMenu.Trigger
+                  render={
+                    <button
+                      type="button"
+                      className="group inline-flex h-8 min-w-0 max-w-[180px] cursor-pointer items-center gap-1.5 rounded-lg px-2 text-[13px] leading-5 tracking-[-0.25px] text-kumo-subtle transition-[background-color,color,transform] duration-150 ease-out hover:bg-kumo-tint hover:text-kumo-default focus-visible:bg-kumo-tint focus-visible:text-kumo-default focus-visible:outline-none active:scale-[0.97] data-[state=open]:bg-kumo-tint data-[state=open]:text-kumo-default"
+                      aria-label="Select model"
+                    >
+                      <span className="min-w-0 truncate">{selectedModelLabel}</span>
+                      <CaretDown
+                        size={12}
+                        weight="bold"
+                        className="flex-shrink-0 text-kumo-inactive transition-transform duration-150 ease-out group-data-[state=open]:rotate-180"
+                      />
+                    </button>
+                  }
+                />
+                <DropdownMenu.Content
+                  align="end"
+                  className="themed-floating-shadow-lg !min-w-[190px] rounded-2xl border border-kumo-line/70 bg-kumo-base p-1"
+                >
+                  {models.map((model) => (
+                    <DropdownMenu.Item
+                      key={model.id}
+                      onClick={() => onModelChange(model.id)}
+                      className="!h-auto rounded-xl !px-2 !py-1.5 text-[12px] leading-4 font-normal tracking-[-0.15px] text-kumo-subtle transition-colors data-highlighted:bg-kumo-tint/70 data-highlighted:text-kumo-default"
+                    >
+                      <span className="min-w-0 flex-1 truncate">{model.name}</span>
+                      {selectedModel === model.id && (
+                        <Check
+                          size={12}
+                          weight="bold"
+                          className="ml-3 flex-shrink-0 text-kumo-inactive"
+                        />
+                      )}
+                    </DropdownMenu.Item>
+                  ))}
+                </DropdownMenu.Content>
+              </DropdownMenu>
+            )}
+            {!showStopButton && submitControl}
+            {showStopButton ? (
+              <WorkshopIconButton
+                onClick={onStop}
+                tone="primary"
+                className="!h-8 !w-8"
+                aria-label="Stop agent"
+              >
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
+                  <rect x="5" y="5" width="14" height="14" rx="2" />
+                </svg>
+              </WorkshopIconButton>
+            ) : (
+              <WorkshopIconButton
+                onClick={onSubmit}
+                disabled={!canSend}
+                tone="primary"
+                className="!h-8 !w-8 disabled:cursor-not-allowed disabled:opacity-30"
+                aria-label="Send message"
+              >
+                <svg
+                  width="16"
+                  height="16"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2.5"
+                >
+                  <line x1="12" y1="19" x2="12" y2="5" />
+                  <polyline points="5 12 12 5 19 12" />
+                </svg>
+              </WorkshopIconButton>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {footnote && (
+        <div className="-mt-1 flex min-h-[1.25rem] items-start justify-end gap-4 px-4 pb-1 font-mono text-[11px] leading-4 text-kumo-inactive">
+          {footnote}
+        </div>
+      )}
+    </div>
+  );
+}

package/cloud-os/index.ts

@@ -0,0 +1,107 @@
+/**
+ * `@springbrand/message-panel/cloud-os`
+ *
+ * 从 cloudflare-os-main(packages/workshop-frontend)搬来的聊天体 + 右侧工作区面板,
+ * 适配到当前的 UIMessage 协议。这个文件夹**完全独立**:不 import `../src` 的任何东西,
+ * 自带 cn / 主题 / 图标 / markdown / primitives。
+ *
+ * 边界:
+ *  - `styles/cloud-os.css` 必须由宿主的 Tailwind 入口 import,并把本目录加进 @source。
+ *  - 所有组件都要包在 `<CloudOsRoot>` 里,否则拿不到作用域化的 token。
+ */
+
+export { CloudOsRoot } from "./layout/cloud-os-root";
+export { CloudOsWorkspaceSplit } from "./layout/cloud-os-workspace-split";
+export type { CloudOsWorkspaceSplitProps } from "./layout/cloud-os-workspace-split";
+
+export { CloudOsChatMessages } from "./chat/cloud-os-chat-messages";
+export type {
+  CloudOsChatMessagesProps,
+  CloudOsChatStatus,
+} from "./chat/cloud-os-chat-messages";
+
+export { CloudOsChatInput } from "./composer/cloud-os-chat-input";
+export type {
+  CloudOsAttachmentView,
+  CloudOsChatInputProps,
+  CloudOsComposerCommand,
+  CloudOsModelOption,
+} from "./composer/cloud-os-chat-input";
+
+export {
+  CloudOsWorkspacePanel,
+  NoContentPlaceholder,
+  PaneLabel,
+  PaneTab,
+  PaneWorkpieceTabs,
+} from "./workspace/cloud-os-workspace-panel";
+export type {
+  CloudOsPaneTab,
+  CloudOsWorkpieceTab,
+  CloudOsWorkspacePanelProps,
+} from "./workspace/cloud-os-workspace-panel";
+
+export { MarkdownMessage } from "./chat/markdown-message";
+export type { CloudOsUrlResolver } from "./chat/markdown-message";
+export {
+  ThinkingTraceRow,
+  ToolCallDetails,
+  ToolGroupRow,
+  WorkIcon,
+} from "./chat/tool-rows";
+export {
+  ApprovalBlock,
+  AskUserBlock,
+  ErrorBlock,
+  ParallelBlock,
+  PlanBlock,
+  ScheduleBlock,
+  SubAgentsBlock,
+  SuggestionsBlock,
+} from "./chat/rich-blocks";
+export type { ApprovalDecision } from "./chat/rich-blocks";
+
+export { CloudOsActivityIndicator } from "./chat/activity-indicator";
+
+export {
+  buildCloudOsEntries,
+  cloudOsMetadata,
+  deriveTurnActivity,
+  formatClockTime,
+  formatFullTimestamp,
+  messageText,
+  rhythmTopClass,
+} from "./chat/transcript-model";
+export type {
+  AssistantBlock,
+  CloudOsActivity,
+  CloudOsAttachment,
+  CloudOsEntry,
+  ParallelTool,
+  PlanStep,
+  SubAgentView,
+} from "./chat/transcript-model";
+
+export {
+  buildToolCallGroups,
+  canonicalToolKind,
+  getToolCallSummary,
+  getToolIcon,
+  toCloudOsToolCall,
+  toolNameOfPart,
+} from "./chat/tool-presentation";
+export type {
+  CloudOsToolCall,
+  CloudOsToolKind,
+  ToolCallGroup,
+} from "./chat/tool-presentation";
+
+export { DropdownMenu } from "./primitives/dropdown-menu";
+export { Tooltip, TooltipProvider } from "./primitives/tooltip";
+export {
+  CountBadge,
+  WorkshopButton,
+  WorkshopIconButton,
+  WorkshopInput,
+} from "./primitives/workshop-controls";
+export type { CloudOsMode } from "./internal/theme-context";

package/cloud-os/internal/cn.ts

@@ -0,0 +1,6 @@
+/** cloud-os 自己的 cn —— 刻意不复用 ../../src/internal/cn,保持本文件夹完全独立。 */
+export function cn(
+  ...values: Array<string | false | null | undefined>
+): string {
+  return values.filter(Boolean).join(" ");
+}

package/cloud-os/internal/theme-context.tsx

@@ -0,0 +1,16 @@
+import { createContext, useContext } from "react";
+
+export type CloudOsMode = "light" | "dark";
+
+const CloudOsModeContext = createContext<CloudOsMode>("light");
+
+export const CloudOsModeProvider = CloudOsModeContext.Provider;
+
+/**
+ * portal 出去的浮层(Tooltip / DropdownMenu / Popover)脱离 `.cloud-os-root` 子树,
+ * 拿不到作用域里的 CSS 变量。浮层根节点自己带上 data-mode,配合
+ * `[data-cloud-os-portal][data-mode="dark"]` 那组规则补齐变量。
+ */
+export function useCloudOsMode(): CloudOsMode {
+  return useContext(CloudOsModeContext);
+}