@volter-ai-dev/supercode-ui 0.1.12 → 0.1.14

package/composer.d.ts

@@ -1,2 +1,2 @@
-export type { MessengerLabels, SupercodeUiState, UiAdapter } from './index.js';
+export type { MessengerLabels, PendingMessageModel, SupercodeUiState, UiAdapter } from './index.js';
 export { Composer, ContinuationBar } from './index.js';

package/composer.mjs

@@ -79,8 +79,65 @@ function boundedSet(map, key, value) {
   while (map.size > MEMORY_LIMIT) map.delete(map.keys().next().value);
 }
 
+// src/icon.jsx
+import { Fragment, jsx, jsxs } from "preact/jsx-runtime";
+var ICONS = {
+  back: () => /* @__PURE__ */ jsx("path", { d: "m11.5 4.5-4.5 4.5 4.5 4.5" }),
+  check: () => /* @__PURE__ */ jsx("path", { d: "m4 9 3.25 3.25L14 5.5" }),
+  chevron: () => /* @__PURE__ */ jsx("path", { d: "m7 4.5 4.5 4.5L7 13.5" }),
+  close: () => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "m4.75 4.75 8.5 8.5" }),
+    /* @__PURE__ */ jsx("path", { d: "m13.25 4.75-8.5 8.5" })
+  ] }),
+  copy: () => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("rect", { x: "5", y: "5", width: "8", height: "8", rx: "1.5" }),
+    /* @__PURE__ */ jsx("path", { d: "M3 10.5V4.25C3 3.56 3.56 3 4.25 3h6.25" })
+  ] }),
+  down: () => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M9 3.5v10" }),
+    /* @__PURE__ */ jsx("path", { d: "m4.75 9.5 4.25 4 4.25-4" })
+  ] }),
+  menu: () => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("circle", { cx: "4", cy: "9", r: "1.25", fill: "currentColor", stroke: "none" }),
+    /* @__PURE__ */ jsx("circle", { cx: "9", cy: "9", r: "1.25", fill: "currentColor", stroke: "none" }),
+    /* @__PURE__ */ jsx("circle", { cx: "14", cy: "9", r: "1.25", fill: "currentColor", stroke: "none" })
+  ] }),
+  plus: () => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M9 3.5v11" }),
+    /* @__PURE__ */ jsx("path", { d: "M3.5 9h11" })
+  ] }),
+  search: () => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("circle", { cx: "7.75", cy: "7.75", r: "4.25" }),
+    /* @__PURE__ */ jsx("path", { d: "m11 11 3.5 3.5" })
+  ] }),
+  send: () => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M9 14.5v-11" }),
+    /* @__PURE__ */ jsx("path", { d: "m4.75 7.75 4.25-4.25 4.25 4.25" })
+  ] }),
+  stop: () => /* @__PURE__ */ jsx("rect", { x: "4.5", y: "4.5", width: "9", height: "9", rx: "1.5", fill: "currentColor", stroke: "none" })
+};
+function UiIcon({ name, size = 16, class: className = "" }) {
+  const Glyph = ICONS[name];
+  if (!Glyph) return null;
+  return /* @__PURE__ */ jsx("svg", { class: `scui-icon ${className}`, style: { "--scui-icon-size": `${size}px` }, viewBox: "0 0 18 18", fill: "none", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx(Glyph, {}) });
+}
+
+// src/textarea.js
+import { useLayoutEffect } from "preact/hooks";
+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 "preact/jsx-runtime";
+import { jsx as jsx2, jsxs as jsxs2 } from "preact/jsx-runtime";
 var composerMemory = /* @__PURE__ */ new Map();
 function ContinuationBar({ state, adapter, labels = DEFAULT_LABELS }) {
   if (state.mode !== "mirror" || state.canSend) return null;
@@ -90,38 +147,56 @@ function ContinuationBar({ state, adapter, labels = DEFAULT_LABELS }) {
   const resume = canContinueHere(state);
   const join = state.canAttach;
   const branch = state.canBranch;
-  if (!resume && !join && !branch) return /* @__PURE__ */ jsx("div", { class: "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." })
+  if (!resume && !join && !branch) return /* @__PURE__ */ jsx2("div", { class: "scui-continuation", children: /* @__PURE__ */ jsxs2("span", { children: [
+    /* @__PURE__ */ jsx2("strong", { children: activeElsewhere ? "Active elsewhere" : "Read-only" }),
+    /* @__PURE__ */ jsx2("small", { children: "This session cannot be continued by an available harness." })
   ] }) });
-  return /* @__PURE__ */ jsxs("div", { class: "scui-continuation", children: [
-    /* @__PURE__ */ jsxs("span", { children: [
-      /* @__PURE__ */ jsx("strong", { children: activeElsewhere ? "Active elsewhere" : "Read-only" }),
-      /* @__PURE__ */ jsx("small", { children: join ? "Join the proven live runtime without taking it over." : resume ? `Resume this ${harnessDisplayName(state.harness)} session here.` : "Start an independent continuation." })
+  return /* @__PURE__ */ jsxs2("div", { class: "scui-continuation", children: [
+    /* @__PURE__ */ jsxs2("span", { children: [
+      /* @__PURE__ */ jsx2("strong", { children: activeElsewhere ? "Active elsewhere" : "Read-only" }),
+      /* @__PURE__ */ jsx2("small", { children: join ? "Join the proven live runtime without taking it over." : resume ? `Resume this ${harnessDisplayName(state.harness)} session here.` : "Start an independent continuation." })
     ] }),
-    /* @__PURE__ */ jsx("button", { type: "button", disabled: Boolean(state.operation), onClick: () => adapter.onIntent(join ? { action: "join" } : resume ? { action: "resume" } : { action: "branch" }), children: join ? labels.joinLive : resume ? labels.continueHere : labels.forkHere })
+    /* @__PURE__ */ jsx2("button", { type: "button", disabled: Boolean(state.operation), onClick: () => adapter.onIntent(join ? { action: "join" } : resume ? { action: "resume" } : { action: "branch" }), children: join ? labels.joinLive : resume ? labels.continueHere : labels.forkHere })
   ] });
 }
-function Composer({ state, adapter, labels = DEFAULT_LABELS, memoryKey = state.attached?.key || `${state.harness}:${state.workspace}`, onPending }) {
+function Composer({ state, adapter, labels = DEFAULT_LABELS, memoryKey = state.attached?.key || `${state.harness}:${state.workspace}`, pendingStatus = null, restoreDraft = null, onPending, onDraftRestored }) {
   const remembered = composerMemory.get(memoryKey) ?? { draft: state.savedDraft, queue: [] };
   const [draft, setDraft] = useState(remembered.draft);
   const [queue, setQueue] = useState(remembered.queue);
+  const [dispatching, setDispatching] = useState(false);
   const textarea = useRef(null);
+  useAutosizeTextarea(textarea, draft);
   const remember = (nextDraft, nextQueue) => boundedSet(composerMemory, memoryKey, { draft: nextDraft, queue: nextQueue });
   const updateQueue = (update) => setQueue((items) => {
     const next = update(items);
     remember(draft, next);
     return next;
   });
+  const queueBlocked = state.busy || pendingStatus !== null || dispatching;
+  const queuesNewMessage = state.busy || pendingStatus === "sending" || pendingStatus === "failed" || dispatching;
   useEffect(() => {
-    if (!state.busy && state.canSend && queue.length) {
+    if (!queueBlocked && state.canSend && queue.length) {
       const [next, ...rest] = queue;
+      setDispatching(true);
       setQueue(rest);
       remember(draft, rest);
       onPending?.(next);
       adapter.onIntent({ action: "send", text: next });
     }
-  }, [adapter, draft, memoryKey, onPending, queue, state.busy, state.canSend]);
+  }, [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);
+    remember(restoreDraft.text, queue);
+    textarea.current?.focus({ preventScroll: true });
+    onDraftRestored?.(restoreDraft.id);
+  }, [onDraftRestored, restoreDraft?.id]);
   useEffect(() => {
     const timer = setTimeout(() => adapter.onIntent({ action: "draft", text: draft }), 250);
     return () => clearTimeout(timer);
@@ -129,27 +204,28 @@ function Composer({ state, adapter, labels = DEFAULT_LABELS, memoryKey = state.a
   const send = () => {
     const text = draft.trim();
     if (!text) return;
-    if (state.busy) updateQueue((items) => [...items, text]);
+    if (queuesNewMessage) updateQueue((items) => [...items, text]);
     else if (state.canSend) {
+      if (onPending) setDispatching(true);
       onPending?.(text);
       adapter.onIntent({ action: "send", text });
     } else return;
     setDraft("");
-    remember("", state.busy ? [...queue, text] : queue);
+    remember("", queuesNewMessage ? [...queue, text] : queue);
   };
-  return /* @__PURE__ */ jsxs("div", { class: "scui-compose", children: [
-    queue.length ? /* @__PURE__ */ jsxs("div", { class: "scui-queue", children: [
-      /* @__PURE__ */ jsxs("strong", { children: [
+  return /* @__PURE__ */ jsxs2("div", { class: "scui-compose", children: [
+    queue.length ? /* @__PURE__ */ jsxs2("div", { class: "scui-queue", children: [
+      /* @__PURE__ */ jsxs2("strong", { children: [
         queue.length,
         " queued"
       ] }),
-      queue.map((item, index) => /* @__PURE__ */ jsxs("span", { children: [
+      queue.map((item, index) => /* @__PURE__ */ jsxs2("span", { children: [
         item,
-        /* @__PURE__ */ jsx("button", { type: "button", "aria-label": `Remove queued message ${index + 1}`, onClick: () => updateQueue((items) => items.filter((_, itemIndex) => itemIndex !== index)), children: "\xD7" })
+        /* @__PURE__ */ jsx2("button", { type: "button", "aria-label": `Remove queued message ${index + 1}`, onClick: () => updateQueue((items) => items.filter((_, itemIndex) => itemIndex !== index)), children: /* @__PURE__ */ jsx2(UiIcon, { name: "close", size: 13 }) })
       ] }, `${index}:${item}`))
     ] }) : null,
-    /* @__PURE__ */ jsxs("div", { class: "scui-envelope", children: [
-      /* @__PURE__ */ jsx("textarea", { ref: textarea, rows: 1, "aria-label": `Message ${harnessDisplayName(state.harness) || "agent"}`, placeholder: state.startup !== "ready" ? "Connecting\u2026" : state.busy ? "Queue a follow-up\u2026" : labels.askAgent, value: draft, disabled: state.mode !== "control" && !state.canSend, onInput: (event) => {
+    /* @__PURE__ */ jsxs2("div", { class: "scui-envelope", children: [
+      /* @__PURE__ */ jsx2("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" : queueBlocked ? "Queue a follow-up\u2026" : labels.askAgent, value: draft, disabled: state.mode !== "control" && !state.canSend, onInput: (event) => {
         const value = event.currentTarget.value;
         setDraft(value);
         remember(value, queue);
@@ -159,9 +235,9 @@ function Composer({ state, adapter, labels = DEFAULT_LABELS, memoryKey = state.a
           send();
         }
       } }),
-      /* @__PURE__ */ jsxs("span", { children: [
-        state.busy ? /* @__PURE__ */ jsx("button", { class: "scui-stop", type: "button", "aria-label": "Stop agent", disabled: !state.canInterrupt, onClick: () => adapter.onIntent({ action: "interrupt" }), children: "\u25A0" }) : null,
-        /* @__PURE__ */ jsx("button", { class: "scui-send", type: "button", "aria-label": state.busy ? "Queue message" : "Send message", disabled: !draft.trim() || !state.busy && !state.canSend, onClick: send, children: state.busy ? "+" : "\u2191" })
+      /* @__PURE__ */ jsxs2("span", { children: [
+        state.busy ? /* @__PURE__ */ jsx2("button", { class: "scui-stop", type: "button", "aria-label": "Stop agent", disabled: !state.canInterrupt, onClick: () => adapter.onIntent({ action: "interrupt" }), children: /* @__PURE__ */ jsx2(UiIcon, { name: "stop", size: 15 }) }) : null,
+        /* @__PURE__ */ jsx2("button", { class: "scui-send", type: "button", "aria-label": queuesNewMessage ? "Queue message" : "Send message", disabled: !draft.trim() || !queuesNewMessage && !state.canSend, onClick: send, children: /* @__PURE__ */ jsx2(UiIcon, { name: queuesNewMessage ? "plus" : "send", size: 17 }) })
       ] })
     ] })
   ] });

package/controller.mjs

@@ -116,6 +116,7 @@ function projectConversationEntry(entry, maxEntryChars) {
     return {
       id: entry.id,
       role: entry.role,
+      ...(Number.isSafeInteger(entry.messageIndex) && entry.messageIndex > 0 ? { messageIndex: entry.messageIndex } : {}),
       text: body.text,
       ts: timestampFromMetadata(entry.metadata),
       truncated: body.truncated,
@@ -129,6 +130,7 @@ function projectConversationEntry(entry, maxEntryChars) {
     const projected = {
       id: entry.id,
       role: 'tool',
+      ...(Number.isSafeInteger(entry.messageIndex) && entry.messageIndex > 0 ? { messageIndex: entry.messageIndex } : {}),
       text: primary.text,
       ts: timestampFromMetadata(entry.metadata),
       truncated: argumentsText.truncated || result.truncated,
@@ -401,9 +403,10 @@ export function createControllerBinding(controller, options = {}) {
   const getState = () => projectClientSnapshot(controller.getSnapshot(), options.projection?.() ?? {});
   const adapter = {
     onIntent(intent) {
-      void Promise.resolve(options.onIntent?.(intent))
+      return Promise.resolve(options.onIntent?.(intent))
         .then(() => dispatchStandard(controller, intent, options))
-        .catch((error) => options.onError?.(error, intent));
+        .catch((error) => options.onError?.(error, intent))
+        .then(() => undefined);
     },
     ...(options.copyText ? { copyText: options.copyText } : {}),
   };

package/conversation.d.ts

@@ -2,6 +2,7 @@ export type {
   ActivityGroupProps,
   MessengerComponents,
   MessengerSlots,
+  PendingMessageModel,
   SessionSemanticsModel,
   SupercodeUiState,
   TaskPlanProps,