@volter-ai-dev/supercode-ui 0.1.70 → 0.1.72

package/react/chunks/chunk-7ES5FSLG.mjs

@@ -0,0 +1,316 @@
+import {
+  ContextCandidates,
+  ContextTray,
+  ImageTray,
+  MAX_CONTEXT_ITEMS,
+  MAX_IMAGE_ITEMS,
+  boundedSet,
+  imageAttachmentsFromFiles,
+  mergeContext,
+  mergeImages,
+  normalizeContext,
+  normalizeImages,
+  partitionAttachments,
+  uiMemory
+} from "./chunk-UKHDCPME.mjs";
+import {
+  DEFAULT_LABELS,
+  canContinueHere,
+  harnessDisplayName,
+  isSendKey
+} from "./chunk-LS6JBXNT.mjs";
+import {
+  UiIcon
+} from "./chunk-OINC7LV7.mjs";
+
+// src/composer.jsx
+import { useEffect, useRef, useState } from "react";
+
+// src/intent.js
+var CONFIRMABLE_ACTIONS = /* @__PURE__ */ new Set(["resume", "join", "branch", "reduce", "export", "take_over"]);
+async function dispatchConfirmedIntent(adapter, intent) {
+  if (CONFIRMABLE_ACTIONS.has(intent.action) && adapter.confirmIntent) {
+    const confirmed = await adapter.confirmIntent(intent);
+    if (!confirmed) return;
+  }
+  return adapter.onIntent(intent);
+}
+
+// src/textarea.js
+import { useLayoutEffect } from "react";
+function useAutosizeTextarea(ref, value) {
+  useLayoutEffect(() => {
+    const element = ref.current;
+    if (!element) return;
+    element.style.height = "auto";
+    const maxHeight = Number.parseFloat(getComputedStyle(element).maxHeight) || 150;
+    const height = Math.min(element.scrollHeight, maxHeight);
+    element.style.height = `${height}px`;
+    element.style.overflowY = element.scrollHeight > maxHeight ? "auto" : "hidden";
+  }, [ref, value]);
+}
+
+// src/composer.jsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var composerMemory = uiMemory();
+function ExecutionModeSelect({ modes = [], value, onChange, disabled = false, label = "Run in" }) {
+  if (modes.length < 2) return null;
+  return /* @__PURE__ */ jsxs("label", { className: "scui-execution-mode", title: disabled ? void 0 : `${label}: ${value}`, children: [
+    /* @__PURE__ */ jsx("span", { children: label }),
+    /* @__PURE__ */ jsx("select", { "aria-label": label, value, disabled, onChange: (event) => onChange?.(event.currentTarget.value), children: modes.map((mode) => /* @__PURE__ */ jsx("option", { value: mode, children: mode === "terminal" ? "Terminal" : "Headless" }, mode)) })
+  ] });
+}
+function ContinuationBar({ state, adapter, labels = DEFAULT_LABELS }) {
+  const continuationModes = state.continuationModes?.length ? state.continuationModes : ["headless"];
+  const [selection, setSelection] = useState({ key: null, mode: null });
+  const requestedMode = selection.key === state.attached?.key ? selection.mode : null;
+  const executionMode = continuationModes.includes(requestedMode) ? requestedMode : continuationModes.includes("terminal") ? "terminal" : continuationModes[0];
+  if (state.mode !== "mirror" || state.canSend) return null;
+  const attached = state.attached;
+  const row = attached?.key ? state.sessions.find((item) => item.key === attached.key) : null;
+  const activeElsewhere = row?.runtimeStatus === "running" || row?.runtimeStatus === "busy" || row?.runtimeStatus === "idle";
+  const available = {
+    resume: canContinueHere(state),
+    join: state.canAttach,
+    branch: state.canBranch
+  };
+  const continuation = state.supportsAttach ? "join" : state.supportsResume ? "resume" : state.supportsBranch ? "branch" : available.join ? "join" : available.resume ? "resume" : available.branch ? "branch" : null;
+  if (!continuation) return /* @__PURE__ */ jsx("div", { className: "scui-continuation", children: /* @__PURE__ */ jsxs("span", { children: [
+    /* @__PURE__ */ jsx("strong", { children: activeElsewhere ? "Active elsewhere" : "Read-only" }),
+    /* @__PURE__ */ jsx("small", { children: "This session cannot be continued by an available harness." })
+  ] }) });
+  const enabled = available[continuation];
+  return /* @__PURE__ */ jsxs("div", { className: "scui-continuation", children: [
+    /* @__PURE__ */ jsxs("span", { children: [
+      /* @__PURE__ */ jsx("strong", { children: activeElsewhere ? "Active elsewhere" : "Read-only" }),
+      /* @__PURE__ */ jsx("small", { children: continuation === "join" ? "Join the proven live runtime without taking it over." : continuation === "resume" ? `Resume this ${harnessDisplayName(state.harness)} session here.` : "Start an independent continuation." })
+    ] }),
+    /* @__PURE__ */ jsxs("span", { className: "scui-continuation-actions", children: [
+      continuation === "resume" ? /* @__PURE__ */ jsx(ExecutionModeSelect, { modes: continuationModes, value: executionMode, disabled: Boolean(state.operation) || !enabled, onChange: (mode) => setSelection({ key: state.attached?.key ?? null, mode }) }) : null,
+      /* @__PURE__ */ jsx("button", { type: "button", disabled: Boolean(state.operation) || !enabled, onClick: () => dispatchConfirmedIntent(adapter, continuation === "join" ? { action: "join" } : continuation === "resume" ? { action: "resume", mode: executionMode } : { action: "branch" }), children: continuation === "join" ? labels.joinLive : continuation === "resume" ? labels.continueHere : labels.forkHere })
+    ] })
+  ] });
+}
+function Composer({ state, adapter, labels = DEFAULT_LABELS, memoryKey = state.attached?.key || `${state.harness}:${state.workspace}`, pendingStatus = null, restoreDraft = null, command = null, contextCandidates = [], components = {}, onPending, onDraftRestored }) {
+  const remembered = composerMemory.get(memoryKey) ?? { draft: state.savedDraft, context: [], images: [], queue: [] };
+  const [draft, setDraft] = useState(remembered.draft);
+  const [context, setContext] = useState(remembered.context ?? []);
+  const [images, setImages] = useState(remembered.images ?? []);
+  const [queue, setQueue] = useState((remembered.queue ?? []).map((item) => ({ ...item, context: item.context ?? [], images: item.images ?? [] })));
+  const [dispatching, setDispatching] = useState(false);
+  const [steering, setSteering] = useState(false);
+  const [picking, setPicking] = useState(false);
+  const [dragging, setDragging] = useState(false);
+  const [pickerError, setPickerError] = useState(null);
+  const textarea = useRef(null);
+  const lastCommand = useRef(null);
+  useAutosizeTextarea(textarea, draft);
+  const remember = (nextDraft, nextContext, nextImages, nextQueue) => boundedSet(composerMemory, memoryKey, { draft: nextDraft, context: nextContext, images: nextImages, queue: nextQueue });
+  useEffect(() => {
+    remember(draft, context, images, queue);
+  }, [draft, context, images, memoryKey, queue]);
+  const updateQueue = (update) => setQueue((items) => {
+    const next = update(items);
+    remember(draft, context, images, next);
+    return next;
+  });
+  const queueBlocked = state.busy || pendingStatus !== null || dispatching || steering;
+  const queuesNewMessage = state.busy || pendingStatus === "sending" || pendingStatus === "failed" || dispatching || steering;
+  const steerAvailable = state.busy && state.canSteer && !steering && pendingStatus === null;
+  const canSteerDraft = steerAvailable && Boolean(draft.trim()) && context.length === 0 && images.length === 0;
+  useEffect(() => {
+    if (!queueBlocked && state.canSend && queue.length) {
+      const [next, ...rest] = queue;
+      setDispatching(true);
+      setQueue(rest);
+      remember(draft, context, images, rest);
+      onPending?.(next.text, next.context, next.images);
+      adapter.onIntent({ action: "send", text: next.text, ...next.context.length ? { context: next.context } : {}, ...next.images.length ? { images: next.images } : {} });
+    }
+  }, [adapter, draft, memoryKey, onPending, queue, queueBlocked, state.canSend]);
+  useEffect(() => {
+    if (pendingStatus !== null || state.busy) setDispatching(false);
+  }, [pendingStatus, state.busy]);
+  useEffect(() => {
+    textarea.current?.focus({ preventScroll: true });
+  }, [memoryKey]);
+  useEffect(() => {
+    if (!restoreDraft) return;
+    setDraft(restoreDraft.text);
+    const restoredContext = normalizeContext(restoreDraft.context);
+    const restoredImages = normalizeImages(restoreDraft.images);
+    setContext(restoredContext);
+    setImages(restoredImages);
+    remember(restoreDraft.text, restoredContext, restoredImages, queue);
+    textarea.current?.focus({ preventScroll: true });
+    onDraftRestored?.(restoreDraft.id);
+  }, [onDraftRestored, restoreDraft?.id]);
+  useEffect(() => {
+    if (!command || command.id === lastCommand.current) return;
+    lastCommand.current = command.id;
+    if (command.action === "attach") {
+      try {
+        const attachments = partitionAttachments(command.attachments);
+        if (context.length + attachments.context.length > MAX_CONTEXT_ITEMS) throw new Error(`Attach at most ${MAX_CONTEXT_ITEMS} text items.`);
+        if (images.length + attachments.images.length > MAX_IMAGE_ITEMS) throw new Error(`Attach at most ${MAX_IMAGE_ITEMS} images.`);
+        const nextContext = mergeContext(context, attachments.context);
+        const nextImages = mergeImages(images, attachments.images);
+        setContext(nextContext);
+        setImages(nextImages);
+        setPickerError(null);
+        remember(draft, nextContext, nextImages, queue);
+      } catch (error) {
+        setPickerError(error instanceof Error ? error.message : "Could not attach context.");
+      }
+    }
+    textarea.current?.focus({ preventScroll: true });
+  }, [command?.id]);
+  useEffect(() => {
+    const timer = setTimeout(() => adapter.onIntent({ action: "draft", text: draft }), 250);
+    return () => clearTimeout(timer);
+  }, [adapter, draft]);
+  const pickContext = () => {
+    if (!adapter.pickContext || state.mode !== "control" || picking || context.length >= MAX_CONTEXT_ITEMS && images.length >= MAX_IMAGE_ITEMS) return;
+    setPicking(true);
+    setPickerError(null);
+    Promise.resolve().then(() => adapter.pickContext()).then((picked) => {
+      const attachments = partitionAttachments(picked);
+      if (context.length + attachments.context.length > MAX_CONTEXT_ITEMS) throw new Error(`Attach at most ${MAX_CONTEXT_ITEMS} text items.`);
+      if (images.length + attachments.images.length > MAX_IMAGE_ITEMS) throw new Error(`Attach at most ${MAX_IMAGE_ITEMS} images.`);
+      setContext((current) => {
+        const next = mergeContext(current, attachments.context);
+        remember(draft, next, images, queue);
+        return next;
+      });
+      setImages((current) => {
+        const next = mergeImages(current, attachments.images);
+        remember(draft, context, next, queue);
+        return next;
+      });
+    }).catch((error) => setPickerError(error instanceof Error ? error.message : "Could not attach context.")).finally(() => setPicking(false));
+  };
+  const attachCandidate = (picked) => {
+    const attachments = partitionAttachments(picked);
+    const nextContext = mergeContext(context, attachments.context);
+    const nextImages = mergeImages(images, attachments.images);
+    setContext(nextContext);
+    setImages(nextImages);
+    remember(draft, nextContext, nextImages, queue);
+  };
+  const addImageFiles = (value, source) => {
+    const allFiles = Array.from(value ?? []);
+    if (!allFiles.length) return false;
+    const files = allFiles.filter((file) => file.type.startsWith("image/"));
+    if (files.length !== allFiles.length) {
+      setPickerError("Drop or paste PNG, JPEG, GIF, or WebP images.");
+      return true;
+    }
+    if (images.length + files.length > MAX_IMAGE_ITEMS) {
+      setPickerError(`Attach at most ${MAX_IMAGE_ITEMS} images.`);
+      return true;
+    }
+    setPicking(true);
+    setPickerError(null);
+    imageAttachmentsFromFiles(files).then((picked) => setImages((current) => {
+      const next = mergeImages(current, picked);
+      remember(draft, context, next, queue);
+      return next;
+    }), (error) => setPickerError(error instanceof Error ? error.message : `Could not ${source} image.`)).finally(() => setPicking(false));
+    return true;
+  };
+  const pasteImages = (event) => {
+    if (addImageFiles(event.clipboardData?.files, "paste")) event.preventDefault();
+  };
+  const dropImages = (event) => {
+    setDragging(false);
+    if (addImageFiles(event.dataTransfer?.files, "drop")) event.preventDefault();
+  };
+  const send = (forceQueue = false) => {
+    const text = draft.trim();
+    if (!text && !images.length) return;
+    if (canSteerDraft && !forceQueue) {
+      setSteering(true);
+      Promise.resolve(adapter.onIntent({ action: "steer", text })).then(() => {
+        setDraft("");
+        remember("", context, images, queue);
+      }, (error) => setPickerError(error instanceof Error ? error.message : "Could not steer the active turn.")).finally(() => setSteering(false));
+      return;
+    }
+    const message = { text, context, images };
+    if (queuesNewMessage) updateQueue((items) => [...items, message]);
+    else if (state.canSend) {
+      if (onPending) setDispatching(true);
+      onPending?.(text, context, images);
+      adapter.onIntent({ action: "send", text, ...context.length ? { context } : {}, ...images.length ? { images } : {} });
+    } else return;
+    setDraft("");
+    setContext([]);
+    setImages([]);
+    remember("", [], [], queuesNewMessage ? [...queue, message] : queue);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "scui-compose", children: [
+    queue.length ? /* @__PURE__ */ jsxs("div", { className: "scui-queue", children: [
+      /* @__PURE__ */ jsxs("strong", { children: [
+        queue.length,
+        " queued"
+      ] }),
+      queue.map((item, index) => /* @__PURE__ */ jsxs("span", { children: [
+        /* @__PURE__ */ jsxs("span", { children: [
+          item.text || "Image attachment",
+          item.context.length + item.images.length ? /* @__PURE__ */ jsxs("small", { children: [
+            item.context.length + item.images.length,
+            " attached"
+          ] }) : null
+        ] }),
+        /* @__PURE__ */ jsx("button", { type: "button", "aria-label": `Remove queued message ${index + 1}`, onClick: () => updateQueue((items) => items.filter((_, itemIndex) => itemIndex !== index)), children: /* @__PURE__ */ jsx(UiIcon, { name: "close", size: 13 }) })
+      ] }, `${index}:${item.text}`))
+    ] }) : null,
+    /* @__PURE__ */ jsx(ContextCandidates, { items: contextCandidates, context, images, state, adapter, onAttach: attachCandidate, component: components.ContextCandidate }),
+    /* @__PURE__ */ jsx(ImageTray, { items: images, onRemove: (index) => setImages((items) => {
+      const next = items.filter((_, itemIndex) => itemIndex !== index);
+      remember(draft, context, next, queue);
+      return next;
+    }) }),
+    /* @__PURE__ */ jsx(ContextTray, { items: context, onRemove: (index) => setContext((items) => {
+      const next = items.filter((_, itemIndex) => itemIndex !== index);
+      remember(draft, next, images, queue);
+      return next;
+    }) }),
+    pickerError ? /* @__PURE__ */ jsx("small", { className: "scui-context-error", role: "alert", children: pickerError }) : null,
+    /* @__PURE__ */ jsxs("div", { className: `scui-envelope${dragging ? " scui-drop-target" : ""}`, onDragEnter: (event) => {
+      if (Array.from(event.dataTransfer?.types ?? []).includes("Files")) {
+        event.preventDefault();
+        setDragging(true);
+      }
+    }, onDragOver: (event) => {
+      if (Array.from(event.dataTransfer?.types ?? []).includes("Files")) event.preventDefault();
+    }, onDragLeave: (event) => {
+      if (!event.currentTarget.contains(event.relatedTarget)) setDragging(false);
+    }, onDrop: dropImages, children: [
+      adapter.pickContext && state.mode === "control" ? /* @__PURE__ */ jsx("button", { className: "scui-attach", type: "button", "aria-label": labels.attachContext ?? DEFAULT_LABELS.attachContext, disabled: picking || context.length >= MAX_CONTEXT_ITEMS && images.length >= MAX_IMAGE_ITEMS, onClick: pickContext, children: picking ? /* @__PURE__ */ jsx("i", { className: "scui-control-spinner" }) : /* @__PURE__ */ jsx(UiIcon, { name: "attach", size: 17 }) }) : null,
+      /* @__PURE__ */ jsx("textarea", { ref: textarea, rows: 1, "aria-label": `Message ${harnessDisplayName(state.harness) || "agent"}`, placeholder: state.startup !== "ready" ? "Connecting\u2026" : pendingStatus === "failed" ? "Retry or edit the unsent message\u2026" : pendingStatus === "editing" ? "Edit and resend\u2026" : steerAvailable && context.length === 0 && images.length === 0 ? "Redirect the current turn\u2026" : queueBlocked ? "Queue a follow-up\u2026" : labels.askAgent, value: draft, disabled: state.mode !== "control" && !state.canSend, onPaste: pasteImages, onInput: (event) => {
+        const value = event.currentTarget.value;
+        setDraft(value);
+        remember(value, context, images, queue);
+      }, onKeyDown: (event) => {
+        if (isSendKey(event)) {
+          event.preventDefault();
+          send();
+        }
+      } }),
+      /* @__PURE__ */ jsxs("span", { children: [
+        state.busy ? /* @__PURE__ */ jsx("button", { className: "scui-stop", type: "button", "aria-label": "Stop agent", disabled: !state.canInterrupt, onClick: () => adapter.onIntent({ action: "interrupt" }), children: /* @__PURE__ */ jsx(UiIcon, { name: "stop", size: 15 }) }) : null,
+        canSteerDraft ? /* @__PURE__ */ jsx("button", { className: "scui-queue-send", type: "button", "aria-label": "Queue follow-up instead", onClick: () => send(true), children: /* @__PURE__ */ jsx(UiIcon, { name: "plus", size: 15 }) }) : null,
+        /* @__PURE__ */ jsx("button", { className: "scui-send", type: "button", "aria-label": canSteerDraft ? "Steer current turn" : queuesNewMessage ? "Queue message" : "Send message", disabled: steering || !draft.trim() && !images.length || !queuesNewMessage && !state.canSend, onClick: () => send(), children: steering ? /* @__PURE__ */ jsx("i", { className: "scui-control-spinner" }) : /* @__PURE__ */ jsx(UiIcon, { name: canSteerDraft ? "send" : queuesNewMessage ? "plus" : "send", size: 17 }) })
+      ] })
+    ] })
+  ] });
+}
+
+export {
+  dispatchConfirmedIntent,
+  useAutosizeTextarea,
+  ExecutionModeSelect,
+  ContinuationBar,
+  Composer
+};