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

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

@@ -1,5 +1,7 @@
 import type { UIMessage } from "ai";
+import type { OrbState } from "thinking-orbs";
 import {
+  askUserOutcome,
   buildToolCallGroups,
   toCloudOsToolCall,
   type CloudOsToolCall,
@@ -27,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 {
@@ -45,9 +54,12 @@ export type AssistantBlock =
   | { kind: "text"; key: string; text: string }
   | { kind: "toolGroup"; key: string; group: ToolCallGroup }
   | { kind: "plan"; key: string; steps: PlanStep[]; running: boolean }
-  // answeredText 取的是**这条消息之后的第一条用户直答**,不是工具 output ——
-  // ask_user 的 output 往往只是 `{ asked: true }` 之类的回执。
-  | { kind: "askUser"; key: string; call: CloudOsToolCall; answeredText?: string }
+  // 答案就在 call.output 里(`ask_user` 是 client-settled tool,用户点选后
+  // 经 respondToolInteraction 回写成这次调用的结果)。曾经靠扫下一条用户消息
+  // 推断,那是有损且会误认无关消息的,已彻底删除。
+  // `pending` 是这张卡还在等人 —— 卡片据此决定能不能点,活动指示器据此决定
+  // 该不该出现,同一条判据(askUserOutcome)算一次。
+  | { kind: "askUser"; key: string; call: CloudOsToolCall; pending: boolean }
   | { kind: "suggestions"; key: string; items: string[] }
   | { kind: "schedule"; key: string; call: CloudOsToolCall }
   | { kind: "approval"; key: string; call: CloudOsToolCall; approvalId: string }
@@ -75,6 +87,7 @@ export type CloudOsEntry =
       messageId: string;
       text: string;
       attachments: CloudOsAttachment[];
+      capabilities: CloudOsRequestedCapability[];
       authorName?: string;
       timestamp?: number;
     }
@@ -121,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(
@@ -248,7 +286,6 @@ function assistantBlocks(
   message: UIMessage,
   isActive: boolean,
   showThinkingTraces: boolean,
-  replyText: string | undefined,
   approvalIdOf: (part: unknown) => string | undefined,
 ): AssistantBlock[] {
   const blocks: AssistantBlock[] = [];
@@ -380,10 +417,7 @@ function assistantBlocks(
         kind: "askUser",
         key,
         call,
-        answeredText:
-          replyText?.trim() ||
-          (typeof call.output === "string" ? call.output.trim() : "") ||
-          undefined,
+        pending: askUserOutcome(call).kind === "pending",
       });
       return;
     }
@@ -432,13 +466,6 @@ function terminalOf(
   return undefined;
 }
 
-function isDirectUserMessage(message: UIMessage): boolean {
-  return (
-    message.role === "user" &&
-    !message.parts.some((part) => dataKindOf(part) !== null)
-  );
-}
-
 export interface BuildEntriesOptions {
   messages: readonly UIMessage[];
   /** streaming/submitted 时最后一条 assistant 消息才算「活着」。 */
@@ -494,6 +521,7 @@ export function buildCloudOsEntries({
         messageId: message.id,
         text,
         attachments,
+        capabilities: requestedCapabilitiesOf(metadata),
         authorName: metadata.authorDisplayName,
         timestamp:
           nonNegativeNumber(metadata.createdAt) ??
@@ -502,12 +530,10 @@ export function buildCloudOsEntries({
       return;
     }
 
-    const reply = messages.slice(index + 1).find(isDirectUserMessage);
     const blocks = assistantBlocks(
       message,
       isActive && index === lastAssistantIndex,
       showThinkingTraces,
-      reply ? messageText(reply).trim() || undefined : undefined,
       approvalIdOf,
     );
     const terminal = terminalOf(message);
@@ -560,6 +586,87 @@ function dropSupersededPlans(entries: CloudOsEntry[]): CloudOsEntry[] {
   );
 }
 
+// ── 活动指示(本回合此刻在干什么)────────────────────────────────────────────
+
+/**
+ * 底部活动指示器要显示的动画与文案。
+ */
+export interface CloudOsActivity {
+  state: OrbState;
+  label: string;
+}
+
+/**
+ * 尾巴是否**自己会说话** —— 有它在动,就不该再挂一个活动指示器。
+ *
+ * 正在流的正文/思考、还在跑的工具组或计划,以及一张**还等着你作答**的
+ * `ask_user` 卡都算:前三者自身就有动效,最后一个等的是人不是模型,这时候
+ * 显示「Thinking」是在撒谎。
+ */
+function isLiveBlock(block: AssistantBlock): boolean {
+  switch (block.kind) {
+    case "text":
+    case "reasoning":
+      return true;
+    case "toolGroup":
+      return block.group.hasRunning;
+    case "plan":
+      return block.running;
+    case "askUser":
+      return block.pending;
+    // approval 块只在 awaitingApproval 时才建出来,所以它在场就是在等人。
+    case "approval":
+      return true;
+    case "parallel":
+      return block.tools.some((tool) => tool.status === "running");
+    case "subagents":
+      return block.agents.some((agent) => agent.status === "running");
+    default:
+      return false;
+  }
+}
+
+// 已结算的尾巴 → 此刻真正在发生的事。措辞刻意只说得出口的那部分:
+// 工具跑完了,模型在读它的输出;卡答完了,模型在接你的答案。
+function activityForTail(block: AssistantBlock | undefined): CloudOsActivity {
+  if (!block) return { state: "solving", label: "Thinking…" };
+  if (block.kind === "askUser") {
+    return { state: "solving", label: "Picking up your answer…" };
+  }
+  if (block.kind === "toolGroup") {
+    const kind = block.group.calls.at(-1)?.kind;
+    return kind !== undefined &&
+        ["web-search", "web-fetch", "grep", "glob", "list", "read"].includes(
+          kind,
+        )
+      ? { state: "searching", label: "Reading results…" }
+      : { state: "working", label: "Working…" };
+  }
+  return { state: "working", label: "Working…" };
+}
+
+/**
+ * 本回合此刻该显示什么活动;`null` = 尾巴自己会说话,别再叠一个。
+ *
+ * @remarks
+ * 判据是「**尾巴有没有活口**」,不是「本回合有没有出过内容」。后者曾经是这里的
+ * 写法,于是答完 `ask_user`(卡片变成 Submitted,读起来就是"结束了")到模型下一
+ * 个 chunk 之间整屏没有任何在跑的迹象 —— 而那段恰好是最长的一次 TTFT,看起来
+ * 就是卡死。凡是尾巴为**已结算卡片**的断档都是同一个洞,这里一并补上。
+ */
+export function deriveTurnActivity(
+  entries: readonly CloudOsEntry[],
+  options: { isActive: boolean; hasPendingSteer?: boolean },
+): CloudOsActivity | null {
+  if (!options.isActive) return null;
+  const tail = entries.at(-1) ?? null;
+  const block = tail?.type === "assistant" ? tail.blocks.at(-1) : undefined;
+  if (block && isLiveBlock(block)) return null;
+  return options.hasPendingSteer
+    ? { state: "solving", label: "Waiting for the current step to finish…" }
+    : activityForTail(block);
+}
+
 // ── 行间距节奏(照搬原 rhythmTopClass)──────────────────────────────────────
 
 function isUserEntry(entry: CloudOsEntry): boolean {

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,12 @@ 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;
+  keyCode?: number;
+}) => event.isComposing === true || event.keyCode === 229;
 
 /**
  * 从 cloudflare-os-main `ChatInterface.tsx` 的 `ChatInput` 拷来。
@@ -27,9 +45,10 @@ import { WorkshopIconButton } from "../primitives/workshop-controls";
  * 附件缩略图行、底部左「+ / 添加资源」右「模型 / 发送-停止」的布局、
  * 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 {
@@ -38,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 {
@@ -77,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;
@@ -101,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,
@@ -118,7 +146,7 @@ function autoResizeTextarea(
   textarea.style.overflow = textarea.scrollHeight > maxH ? "auto" : "hidden";
 }
 
-export function CloudOsChatInput({
+function CloudOsChatInputContent({
   value,
   onChange,
   onSubmit,
@@ -136,6 +164,9 @@ export function CloudOsChatInput({
   submissionBlocked = false,
   turnActive,
   commands = [],
+  capabilities = [],
+  onCommandSelect,
+  onCapabilityRemove,
   onAttachResource,
   attachLabel,
   showThinkingTraces,
@@ -147,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);
@@ -184,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;
@@ -219,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"
@@ -271,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;
@@ -289,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")
@@ -303,13 +439,21 @@ export function CloudOsChatInput({
               }
             }}
             onKeyDown={(event) => {
-              // Enter 发送(按住 Shift 换行)
-              if (event.key === "Enter" && !event.shiftKey) {
+              for (const trigger of triggers.values()) {
+                if (trigger.resource.handleKeyDown(event)) return;
+              }
+              // 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"
+            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>
 
@@ -395,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>
                     ))}
@@ -530,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,
@@ -61,18 +64,24 @@ export {
 } from "./chat/rich-blocks";
 export type { ApprovalDecision } from "./chat/rich-blocks";
 
+export { CloudOsActivityIndicator } from "./chat/activity-indicator";
+
 export {
   buildCloudOsEntries,
   cloudOsMetadata,
+  deriveTurnActivity,
   formatClockTime,
   formatFullTimestamp,
   messageText,
+  requestedCapabilitiesOf,
   rhythmTopClass,
 } from "./chat/transcript-model";
 export type {
   AssistantBlock,
+  CloudOsActivity,
   CloudOsAttachment,
   CloudOsEntry,
+  CloudOsRequestedCapability,
   ParallelTool,
   PlanStep,
   SubAgentView,