@springbrand/message-panel 0.1.3-alpha.0 → 0.1.3-alpha.10

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

@@ -0,0 +1,686 @@
+import {
+  Brain,
+  CaretDown,
+  Check,
+  File as FileIcon,
+  Plug,
+  Plus,
+  Terminal,
+} 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 {
+  Fragment,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type DragEvent as ReactDragEvent,
+  type Ref,
+  type ReactNode,
+} from "react";
+import { DropdownMenu } from "../primitives/dropdown-menu";
+import { Tooltip } from "../primitives/tooltip";
+import { WorkshopIconButton } from "../primitives/workshop-controls";
+import { CapabilityChip } from "../capability-chip";
+import {
+  renderFileView,
+  type FileRenderer,
+} from "../file-view";
+
+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 → 资源胶囊)、ComposerMirror、GatekeeperModal —— 这三样都直挂
+ * gadgets 的 capnweb RPC,在 UIMessage 协议下没有对应物。「添加资源」按钮保留成一个
+ * 可选回调,宿主不给就不渲染。Command picker 使用 package 内的
+ * assistant-ui ComposerTriggerPopover。
+ */
+
+export interface CloudOsModelOption {
+  id: string;
+  name: string;
+}
+
+export interface CloudOsComposerCommand {
+  prefix?: "/" | "$";
+  name: string;
+  description: string;
+}
+
+export interface CloudOsCapabilityView {
+  kind: "skill" | "plan";
+  name: string;
+  label: string;
+}
+
+export interface CloudOsAttachmentView {
+  id: string;
+  filename?: string;
+  mediaType?: string;
+  size?: number;
+  previewUrl?: string;
+  progress?: number;
+  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;
+  /** 接管输入框附件视图；未提供时使用包内 FileView。 */
+  renderFile?: FileRenderer;
+  /** 底部左侧的额外控件(宿主的 Agent 档位设置等)。 */
+  tools?: ReactNode;
+  /** 发送键左边的额外控件(宿主的「引导 / 排队」投递方式)。 */
+  submitControl?: ReactNode;
+  /** 宿主侧判定「此刻不能提交」(缺必填设置、引导不可用…)。 */
+  submissionBlocked?: boolean;
+  /**
+   * 回合是否进行中。宿主的 turn 状态比 status 更准(status 会在 steer 间隙回落),
+   * 传了就以它为准来决定显示发送键还是停止键。
+   */
+  turnActive?: boolean;
+  /** 可用的斜杠命令，也会显示在「+」菜单中。 */
+  commands?: readonly CloudOsComposerCommand[];
+  capabilities?: readonly CloudOsCapabilityView[];
+  onCommandSelect?: (command: CloudOsComposerCommand) => void;
+  onCapabilityRemove?: (kind: CloudOsCapabilityView["kind"], name: string) => void;
+  /** 有值时渲染「添加资源」按钮。 */
+  onAttachResource?: () => void;
+  attachLabel?: string;
+  showThinkingTraces?: boolean;
+  onToggleThinkingTraces?: () => void;
+  /** 非空时锁住输入框,并把它当占位文案显示。 */
+  blockedReason?: string;
+  /** 贴在 prompt card 顶部的横幅(原文件用来放「待接受的改动」)。 */
+  banner?: ReactNode;
+  placeholder?: string;
+  minRows?: number;
+  maxRows?: number;
+  autoFocus?: boolean;
+  /** Gives the host direct access to the chat textarea. */
+  textareaRef?: Ref<HTMLTextAreaElement>;
+  /** 输入框下方一行(原文件放 token / cost)。 */
+  footnote?: ReactNode;
+}
+
+const MAX_PENDING_ATTACHMENTS = 8;
+
+function commandLabel(command: CloudOsComposerCommand): string {
+  return `${command.prefix ?? "/"}${command.name.replaceAll("-", " ")}`;
+}
+
+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";
+}
+
+function CloudOsChatInputContent({
+  value,
+  onChange,
+  onSubmit,
+  onStop,
+  status,
+  models = [],
+  selectedModel = null,
+  onModelChange,
+  attachments = [],
+  onFilesSelected,
+  onAttachmentRemove,
+  onAttachmentRetry,
+  renderFile,
+  tools,
+  submitControl,
+  submissionBlocked = false,
+  turnActive,
+  commands = [],
+  capabilities = [],
+  onCommandSelect,
+  onCapabilityRemove,
+  onAttachResource,
+  attachLabel,
+  showThinkingTraces,
+  onToggleThinkingTraces,
+  blockedReason,
+  banner,
+  placeholder,
+  minRows = 1,
+  maxRows = 6,
+  autoFocus = false,
+  textareaRef: forwardedTextareaRef,
+  footnote,
+  runtime,
+}: CloudOsChatInputProps & { runtime: AssistantRuntime }) {
+  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 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;
+      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">
+      <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"
+        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 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;
+              if (typeof forwardedTextareaRef === "function") {
+                forwardedTextareaRef(element);
+              } else if (forwardedTextareaRef) {
+                forwardedTextareaRef.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) => {
+              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")
+                .map((item) => item.getAsFile())
+                .filter((file): file is File => file !== null);
+              if (files.length > 0) {
+                event.preventDefault();
+                addFiles(files);
+              }
+            }}
+            onKeyDown={(event) => {
+              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] 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>
+
+        {attachments.length > 0 && (
+          <div className="flex flex-wrap items-center gap-2 px-3 pb-2 pt-1">
+            {attachments.map((attachment) => (
+              <Fragment key={attachment.id}>
+                {renderFileView(renderFile, {
+                  file: {
+                    url: attachment.previewUrl,
+                    filename: attachment.filename,
+                    mediaType: attachment.mediaType,
+                    size: attachment.size,
+                  },
+                  placement: "composer",
+                  status: attachment.status,
+                  progress: attachment.progress,
+                  onRemove: onAttachmentRemove
+                    ? () => onAttachmentRemove(attachment.id)
+                    : undefined,
+                  onRetry: onAttachmentRetry
+                    ? () => onAttachmentRetry(attachment.id)
+                    : undefined,
+                })}
+              </Fragment>
+            ))}
+          </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.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">
+                          {commandLabel(command)}
+                        </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>
+  );
+}
+
+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>
+  );
+}