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

package/cloud-os/README.md

@@ -46,10 +46,10 @@ pnpm dev:cloud-os        # http://localhost:9992
    shadcn 主题正面冲突。
 4. **作用域化主题**。只有 kumo 命名空间的 token 进 `@theme`;通用 token(字体 /
    圆角 / 字号 / 缓动)挂在 `.cloud-os-root` 上靠继承生效,宿主主题分毫不动。
-5. **删掉的东西**:capsule(URL → 资源胶囊)、行内 slash picker、ComposerMirror、
-   GatekeeperModal、Yjs 草稿 / 「接受改动」那一整套。它们都直挂 gadgets 的 capnweb
-   RPC,UIMessage 协议下没有对应物。slash 命令退成「+」菜单里的一组条目 —— 能力
-   保住,但没有边打字边过滤的行内补全。
+5. **删掉的东西**:capsule(URL → 资源胶囊)、ComposerMirror、GatekeeperModal、
+   Yjs 草稿 / 「接受改动」那一整套。它们都直挂 gadgets 的 capnweb RPC,
+   UIMessage 协议下没有对应物。命令补全使用 package 内的 assistant-ui
+   `ComposerTriggerPopover`,宿主只传命令数据。
 6. **窄栏适配**。授权卡 / 提问卡 / 定时卡在上游是「图标 + 正文 + 右侧动作」一行到底;
    聊天栏默认只有 420px,一行放不下会把正文挤成 0 宽,所以改成允许换行。
 

package/cloud-os/capability-chip.tsx

@@ -0,0 +1,35 @@
+import { Diamond, X } from "@phosphor-icons/react";
+
+export interface CapabilityChipProps {
+  kind: "skill" | "plan";
+  label: string;
+  removable?: boolean;
+  onRemove?: () => void;
+}
+
+export function CapabilityChip({
+  kind,
+  label,
+  removable = false,
+  onRemove,
+}: CapabilityChipProps) {
+  return (
+    <span
+      data-capability-kind={kind}
+      className="inline-flex max-w-full items-center gap-1 rounded-full border border-kumo-line bg-kumo-elevated px-2 py-1 text-[12px] leading-4 text-kumo-subtle"
+    >
+      <Diamond size={11} weight="duotone" className="shrink-0 text-kumo-brand" />
+      <span className="truncate">{label}</span>
+      {removable && onRemove && (
+        <button
+          type="button"
+          onClick={onRemove}
+          aria-label={`Remove ${label}`}
+          className="-mr-1 grid size-5 shrink-0 cursor-pointer place-items-center rounded-full text-kumo-inactive hover:bg-kumo-tint hover:text-kumo-default focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-kumo-brand/40"
+        >
+          <X size={10} weight="bold" />
+        </button>
+      )}
+    </span>
+  );
+}

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

@@ -36,6 +36,7 @@ import {
 } from "./rich-blocks";
 import { ThinkingTraceRow, ToolGroupRow } from "./tool-rows";
 import { CloudOsActivityIndicator } from "./activity-indicator";
+import { CapabilityChip } from "../capability-chip";
 import {
   buildCloudOsEntries,
   deriveTurnActivity,
@@ -127,6 +128,17 @@ function UserBubble({
 }) {
   return (
     <div className="group/message relative flex flex-col items-end">
+      {entry.capabilities.length > 0 && (
+        <div className="mb-1.5 flex max-w-[min(680px,78%)] flex-wrap justify-end gap-1.5">
+          {entry.capabilities.map((capability) => (
+            <CapabilityChip
+              key={`${capability.kind}:${capability.name}`}
+              kind={capability.kind}
+              label={capability.label}
+            />
+          ))}
+        </div>
+      )}
       {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) =>

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

@@ -29,6 +29,13 @@ export interface CloudOsMessageMetadata extends UnknownRecord {
   turnDurationMs?: number;
   turnStartedAt?: number;
   turnStatus?: string;
+  requestedCapabilities?: unknown;
+}
+
+export interface CloudOsRequestedCapability {
+  kind: "skill" | "plan";
+  name: string;
+  label: string;
 }
 
 export interface CloudOsAttachment {
@@ -80,6 +87,7 @@ export type CloudOsEntry =
       messageId: string;
       text: string;
       attachments: CloudOsAttachment[];
+      capabilities: CloudOsRequestedCapability[];
       authorName?: string;
       timestamp?: number;
     }
@@ -126,6 +134,31 @@ export function cloudOsMetadata(message: UIMessage): CloudOsMessageMetadata {
   return recordOf(message.metadata) as CloudOsMessageMetadata;
 }
 
+export function requestedCapabilitiesOf(
+  metadata: CloudOsMessageMetadata,
+): CloudOsRequestedCapability[] {
+  if (!Array.isArray(metadata.requestedCapabilities)) return [];
+  const seen = new Set<string>();
+  return metadata.requestedCapabilities.flatMap((value) => {
+    const capability = recordOf(value);
+    if (
+      (capability.kind !== "skill" && capability.kind !== "plan") ||
+      typeof capability.name !== "string" ||
+      !capability.name.trim() ||
+      typeof capability.label !== "string" ||
+      !capability.label.trim()
+    ) return [];
+    const key = `${capability.kind}:${capability.name}`;
+    if (seen.has(key)) return [];
+    seen.add(key);
+    return [{
+      kind: capability.kind,
+      name: capability.name,
+      label: capability.label,
+    }];
+  });
+}
+
 export function messageText(message: UIMessage): string {
   return message.parts
     .filter(
@@ -488,6 +521,7 @@ export function buildCloudOsEntries({
         messageId: message.id,
         text,
         attachments,
+        capabilities: requestedCapabilitiesOf(metadata),
         authorName: metadata.authorDisplayName,
         timestamp:
           nonNegativeNumber(metadata.createdAt) ??

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

@@ -8,9 +8,21 @@ import {
   Terminal,
   X,
 } from "@phosphor-icons/react";
+import {
+  AssistantRuntimeProvider,
+  ComposerPrimitive,
+  unstable_useSlashCommandAdapter,
+  unstable_useTriggerPopoverAriaProps,
+  unstable_useTriggerPopoverTriggers,
+  useExternalStoreRuntime,
+  type AssistantRuntime,
+  type ThreadMessage,
+} from "@assistant-ui/react";
+import { ComposerTriggerPopover } from "@springbrand/message-panel/composer";
 import {
   useCallback,
   useEffect,
+  useMemo,
   useRef,
   useState,
   type DragEvent as ReactDragEvent,
@@ -19,6 +31,7 @@ import {
 import { DropdownMenu } from "../primitives/dropdown-menu";
 import { Tooltip } from "../primitives/tooltip";
 import { WorkshopIconButton } from "../primitives/workshop-controls";
+import { CapabilityChip } from "../capability-chip";
 
 const isComposingKeyEvent = (event: {
   isComposing?: boolean;
@@ -32,9 +45,10 @@ const isComposingKeyEvent = (event: {
  * 附件缩略图行、底部左「+ / 添加资源」右「模型 / 发送-停止」的布局、
  * draftUpdateBanner 插槽、blockedReason 占位文案、Enter 发送 / Shift+Enter 换行。
  *
- * 删掉:capsule(URL → 资源胶囊)、slash command picker、ComposerMirror、
- * GatekeeperModal —— 这四样都直挂 gadgets 的 capnweb RPC,在 UIMessage 协议下
- * 没有对应物。「添加资源」按钮保留成一个可选回调,宿主不给就不渲染。
+ * 删掉:capsule(URL → 资源胶囊)、ComposerMirror、GatekeeperModal —— 这三样都直挂
+ * gadgets 的 capnweb RPC,在 UIMessage 协议下没有对应物。「添加资源」按钮保留成一个
+ * 可选回调,宿主不给就不渲染。Command picker 使用 package 内的
+ * assistant-ui ComposerTriggerPopover。
  */
 
 export interface CloudOsModelOption {
@@ -43,10 +57,15 @@ export interface CloudOsModelOption {
 }
 
 export interface CloudOsComposerCommand {
+  prefix?: "/" | "$";
   name: string;
   description: string;
-  /** 选中后填进输入框的起手文本。 */
-  prompt: string;
+}
+
+export interface CloudOsCapabilityView {
+  kind: "skill" | "plan";
+  name: string;
+  label: string;
 }
 
 export interface CloudOsAttachmentView {
@@ -82,11 +101,11 @@ export interface CloudOsChatInputProps {
    * 传了就以它为准来决定显示发送键还是停止键。
    */
   turnActive?: boolean;
-  /**
-   * 可用的斜杠命令。cloudflare-os 原版是一个直连 RPC 的行内 picker;这里退成
-   * 「+」菜单里的一组条目 —— 能力保住,但**没有**边打字边过滤的行内补全。
-   */
+  /** 可用的斜杠命令，也会显示在「+」菜单中。 */
   commands?: readonly CloudOsComposerCommand[];
+  capabilities?: readonly CloudOsCapabilityView[];
+  onCommandSelect?: (command: CloudOsComposerCommand) => void;
+  onCapabilityRemove?: (kind: CloudOsCapabilityView["kind"], name: string) => void;
   /** 有值时渲染「添加资源」按钮。 */
   onAttachResource?: () => void;
   attachLabel?: string;
@@ -106,6 +125,10 @@ export interface CloudOsChatInputProps {
 
 const MAX_PENDING_ATTACHMENTS = 5;
 
+function commandLabel(command: CloudOsComposerCommand): string {
+  return `${command.prefix ?? "/"}${command.name.replaceAll("-", " ")}`;
+}
+
 function autoResizeTextarea(
   textarea: HTMLTextAreaElement,
   minRows: number,
@@ -123,7 +146,7 @@ function autoResizeTextarea(
   textarea.style.overflow = textarea.scrollHeight > maxH ? "auto" : "hidden";
 }
 
-export function CloudOsChatInput({
+function CloudOsChatInputContent({
   value,
   onChange,
   onSubmit,
@@ -141,6 +164,9 @@ export function CloudOsChatInput({
   submissionBlocked = false,
   turnActive,
   commands = [],
+  capabilities = [],
+  onCommandSelect,
+  onCapabilityRemove,
   onAttachResource,
   attachLabel,
   showThinkingTraces,
@@ -152,7 +178,8 @@ export function CloudOsChatInput({
   maxRows = 6,
   autoFocus = false,
   footnote,
-}: CloudOsChatInputProps) {
+  runtime,
+}: CloudOsChatInputProps & { runtime: AssistantRuntime }) {
   const textareaRef = useRef<HTMLTextAreaElement | null>(null);
   const attachmentInputRef = useRef<HTMLInputElement>(null);
   const dragDepthRef = useRef(0);
@@ -189,6 +216,73 @@ export function CloudOsChatInput({
     if (element) autoResizeTextarea(element, minRows, maxRows);
   }, [maxRows, minRows, value]);
 
+  const selectCommand = useCallback((
+    command: CloudOsComposerCommand,
+    clearTrigger: boolean,
+  ) => {
+    onCommandSelect?.(command);
+    if (clearTrigger) {
+      runtime.thread.composer.setText("");
+      onChange("");
+    }
+    requestAnimationFrame(() => textareaRef.current?.focus());
+  }, [onChange, onCommandSelect, runtime]);
+
+  const slashCommands = useMemo(
+    () => commands
+      .filter((command) => (command.prefix ?? "/") === "/")
+      .map((command) => ({
+        id: command.name,
+        label: commandLabel(command),
+        description: command.description,
+        execute: () => selectCommand(command, true),
+      })),
+    [commands, selectCommand],
+  );
+  const skillCommands = useMemo(
+    () => commands
+      .filter((command) => command.prefix === "$")
+      .map((command) => ({
+        id: command.name,
+        label: commandLabel(command),
+        description: command.description,
+        execute: () => selectCommand(command, true),
+      })),
+    [commands, selectCommand],
+  );
+  const slashAdapter = unstable_useSlashCommandAdapter({
+    commands: slashCommands,
+    removeOnExecute: true,
+  });
+  const skillAdapter = unstable_useSlashCommandAdapter({
+    commands: skillCommands,
+    removeOnExecute: true,
+  });
+  // assistant-ui only re-runs a TriggerPopover search when the adapter changes.
+  const slash = useMemo(() => ({
+    ...slashAdapter,
+    adapter: { ...slashAdapter.adapter },
+  }), [slashAdapter, slashCommands]);
+  const skills = useMemo(() => ({
+    ...skillAdapter,
+    adapter: { ...skillAdapter.adapter },
+  }), [skillAdapter, skillCommands]);
+  const triggers = unstable_useTriggerPopoverTriggers();
+  const triggerAria = unstable_useTriggerPopoverAriaProps();
+
+  const setTriggerCursor = useCallback(
+    (position: number) => {
+      for (const trigger of triggers.values()) {
+        trigger.resource.setCursorPosition(position);
+      }
+    },
+    [triggers],
+  );
+
+  useEffect(() => {
+    setTriggerCursor(textareaRef.current?.selectionStart ?? value.length);
+  }, [commands, setTriggerCursor, value]);
+
   const addFiles = useCallback(
     (files: readonly File[]) => {
       if (files.length === 0) return;
@@ -224,6 +318,20 @@ export function CloudOsChatInput({
   return (
     // isolation: isolate 把输入框内部的 z-index 关起来,免得盖到 portal 出去的模型下拉。
     <div className="cos-chat-input-root relative isolate px-4 py-4">
+      <ComposerTriggerPopover
+        char="/"
+        {...slash}
+        aria-label="Commands"
+        emptyItemsLabel="No matching commands"
+        className="!w-72 !border-kumo-line/70 !bg-kumo-base !text-kumo-default themed-floating-shadow-lg"
+      />
+      <ComposerTriggerPopover
+        char="$"
+        {...skills}
+        aria-label="Skills"
+        emptyItemsLabel="No matching skills"
+        className="!w-72 !border-kumo-line/70 !bg-kumo-base !text-kumo-default themed-floating-shadow-lg"
+      />
       <input
         ref={attachmentInputRef}
         type="file"
@@ -276,7 +384,22 @@ export function CloudOsChatInput({
 
         {banner}
 
-        <div className="relative px-4 pb-1 pt-3">
+        <div className="relative flex flex-nowrap items-center gap-2 px-4 pb-1 pt-3">
+          {capabilities.length > 0 && (
+            <div className="flex max-w-[65%] shrink-0 flex-nowrap gap-1.5 overflow-x-auto">
+              {capabilities.map((capability) => (
+                <CapabilityChip
+                  key={`${capability.kind}:${capability.name}`}
+                  kind={capability.kind}
+                  label={capability.label}
+                  removable
+                  onRemove={() =>
+                    onCapabilityRemove?.(capability.kind, capability.name)
+                  }
+                />
+              ))}
+            </div>
+          )}
           <textarea
             ref={(element) => {
               textareaRef.current = element;
@@ -294,9 +417,17 @@ export function CloudOsChatInput({
                   : (placeholder ?? "Ask a follow-up…")
             }
             onChange={(event) => {
-              onChange(event.target.value);
+              const next = event.target.value;
+              runtime.thread.composer.setText(next);
+              onChange(next);
+              setTriggerCursor(event.target.selectionStart ?? next.length);
               autoResizeTextarea(event.target, minRows, maxRows);
             }}
+            onSelect={(event) =>
+              setTriggerCursor(
+                event.currentTarget.selectionStart ?? value.length,
+              )
+            }
             onPaste={(event) => {
               const files = Array.from(event.clipboardData.items)
                 .filter((item) => item.kind === "file")
@@ -308,6 +439,9 @@ export function CloudOsChatInput({
               }
             }}
             onKeyDown={(event) => {
+              for (const trigger of triggers.values()) {
+                if (trigger.resource.handleKeyDown(event)) return;
+              }
               // Enter 发送(按住 Shift 换行); IME 组合中不发送
               if (
                 event.key === "Enter" &&
@@ -318,7 +452,8 @@ export function CloudOsChatInput({
                 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"
+            className="relative z-[1] min-w-0 flex-1 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"
+            {...triggerAria}
           />
         </div>
 
@@ -404,20 +539,15 @@ export function CloudOsChatInput({
                   <>
                     {commands.map((command) => (
                       <DropdownMenu.Item
-                        key={command.name}
-                        onClick={() => {
-                          onChange(command.prompt);
-                          requestAnimationFrame(() =>
-                            textareaRef.current?.focus(),
-                          );
-                        }}
+                        key={`${command.prefix ?? "/"}${command.name}`}
+                        onClick={() => selectCommand(command, false)}
                         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}
+                          {commandLabel(command)}
                         </span>
                       </DropdownMenu.Item>
                     ))}
@@ -539,3 +669,24 @@ export function CloudOsChatInput({
     </div>
   );
 }
+
+const EMPTY_MESSAGES: readonly ThreadMessage[] = [];
+
+export function CloudOsChatInput(props: CloudOsChatInputProps) {
+  const runtime = useExternalStoreRuntime<ThreadMessage>({
+    messages: EMPTY_MESSAGES,
+    onNew: async () => undefined,
+  });
+
+  useEffect(() => {
+    runtime.thread.composer.setText(props.value);
+  }, [props.value, runtime]);
+
+  return (
+    <AssistantRuntimeProvider runtime={runtime}>
+      <ComposerPrimitive.Unstable_TriggerPopoverRoot>
+        <CloudOsChatInputContent {...props} runtime={runtime} />
+      </ComposerPrimitive.Unstable_TriggerPopoverRoot>
+    </AssistantRuntimeProvider>
+  );
+}

package/cloud-os/index.ts

@@ -11,6 +11,8 @@
  */
 
 export { CloudOsRoot } from "./layout/cloud-os-root";
+export { CapabilityChip } from "./capability-chip";
+export type { CapabilityChipProps } from "./capability-chip";
 export { CloudOsWorkspaceSplit } from "./layout/cloud-os-workspace-split";
 export type { CloudOsWorkspaceSplitProps } from "./layout/cloud-os-workspace-split";
 
@@ -23,6 +25,7 @@ export type {
 export { CloudOsChatInput } from "./composer/cloud-os-chat-input";
 export type {
   CloudOsAttachmentView,
+  CloudOsCapabilityView,
   CloudOsChatInputProps,
   CloudOsComposerCommand,
   CloudOsModelOption,
@@ -70,6 +73,7 @@ export {
   formatClockTime,
   formatFullTimestamp,
   messageText,
+  requestedCapabilitiesOf,
   rhythmTopClass,
 } from "./chat/transcript-model";
 export type {
@@ -77,6 +81,7 @@ export type {
   CloudOsActivity,
   CloudOsAttachment,
   CloudOsEntry,
+  CloudOsRequestedCapability,
   ParallelTool,
   PlanStep,
   SubAgentView,

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

@@ -10,7 +10,7 @@ import {
 /**
  * 左聊天 / 右工作区的双栏骨架。从 cloudflare-os-main `GadgetEditor.tsx` 的 BODY
  * 段拷来:同一条 1px 的 kumo-line 分隔即拖拽把手、同一套 pointer capture 拖拽
- * (拖过 iframe 也不丢)、同一个 200ms 的收起/展开过渡、同一条顶部推进条。
+ * (拖过 iframe 也不丢)、同一个 200ms 的收起/展开过渡。
  *
  * 适配点:原文件把左右两侧的内容写死成 ChatInterface / GadgetUI,这里换成
  * children 插槽;chatWidth 的 localStorage key 换成 cloud-os 自己的。
@@ -59,8 +59,6 @@ export interface CloudOsWorkspaceSplitProps {
   workspace: ReactNode;
   /** 关掉右栏时聊天占满整宽。 */
   workspaceOpen: boolean;
-  /** 顶部那条推进条:回合进行中显示。 */
-  isAgentActive?: boolean;
   /** 右栏收起时依然保留的窄边栏宽度(原文件的 Outputs rail)。 */
   railWidth?: number;
   rail?: ReactNode;
@@ -70,7 +68,6 @@ export function CloudOsWorkspaceSplit({
   chat,
   workspace,
   workspaceOpen,
-  isAgentActive = false,
   railWidth = 0,
   rail,
 }: CloudOsWorkspaceSplitProps) {
@@ -188,17 +185,6 @@ export function CloudOsWorkspaceSplit({
       ref={containerRef}
       className="relative flex h-full min-h-0 flex-1 overflow-hidden bg-kumo-base"
     >
-      {isAgentActive && (
-        <div
-          className="absolute left-0 z-10 h-0"
-          style={{ top: 0, right: railWidth }}
-        >
-          <div className="absolute left-0 right-0 h-0.5 overflow-hidden bg-kumo-fill">
-            <div className="cos-progress-sweep absolute inset-y-0 w-1/3 bg-kumo-brand" />
-          </div>
-        </div>
-      )}
-
       {/* ── 左:聊天 ──────────────────────────────────────────────────────── */}
       <div
         className={`flex h-full min-h-0 flex-shrink-0 flex-col ${transitionClass} ${

package/cloud-os/styles/cloud-os.css

@@ -356,23 +356,6 @@
   background: transparent;
 }
 
-/* ── 顶部推进条(isAgentActive)──────────────────────────────────────────── */
-@keyframes cos-thinking {
-  0% {
-    left: -33%;
-  }
-  50% {
-    left: 100%;
-  }
-  100% {
-    left: -33%;
-  }
-}
-
-.cos-progress-sweep {
-  animation: cos-thinking 1.5s ease-in-out infinite;
-}
-
 /* ============================================================================
  * 以下整段来自 ChatInterface.module.css —— CSS Module 类名改成 cos- 全局前缀
  * ========================================================================== */
@@ -550,9 +533,6 @@
     background: none;
     -webkit-text-fill-color: currentColor;
   }
-  .cos-progress-sweep {
-    animation: none;
-  }
 }
 
 /* ── 观察类 markdown(行内、紧凑)────────────────────────────────────────── */

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

@@ -283,7 +283,6 @@ export function CloudOsChatShowcase() {
 
       <CloudOsWorkspaceSplit
         workspaceOpen={workspaceOpen}
-        isAgentActive={status === "submitted" || status === "streaming"}
         chat={
           <div className="flex h-full min-h-0 flex-col bg-kumo-base">
             <aside

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@springbrand/message-panel",
-  "version": "0.1.3-alpha.3",
+  "version": "0.1.3-alpha.4",
   "type": "module",
   "files": [
     "src",

package/src/composer/composer-trigger-popover.tsx

@@ -156,7 +156,7 @@ function Items({
                     {item.label}
                   </span>
                   {item.description && (
-                    <span className="ms-5.5 text-xs leading-tight text-muted-foreground">
+                    <span className="ms-5.5 w-full truncate text-xs leading-tight text-muted-foreground">
                       {item.description}
                     </span>
                   )}