@volter-ai-dev/supercode-ui 0.1.11 → 0.1.13

package/components.mjs

@@ -587,10 +587,11 @@ function ContinuationBar({ state, adapter, labels = DEFAULT_LABELS }) {
     /* @__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 })
   ] });
 }
-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);
   const remember = (nextDraft, nextQueue) => boundedSet(composerMemory, memoryKey, { draft: nextDraft, queue: nextQueue });
   const updateQueue = (update) => setQueue((items) => {
@@ -598,15 +599,31 @@ function Composer({ state, adapter, labels = DEFAULT_LABELS, memoryKey = state.a
     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);
@@ -614,13 +631,14 @@ 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: [
@@ -634,7 +652,7 @@ function Composer({ state, adapter, labels = DEFAULT_LABELS, memoryKey = state.a
       ] }, `${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__ */ 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" : 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);
@@ -646,7 +664,7 @@ function Composer({ state, adapter, labels = DEFAULT_LABELS, memoryKey = state.a
       } }),
       /* @__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__ */ jsx("button", { class: "scui-send", type: "button", "aria-label": queuesNewMessage ? "Queue message" : "Send message", disabled: !draft.trim() || !queuesNewMessage && !state.canSend, onClick: send, children: queuesNewMessage ? "+" : "\u2191" })
       ] })
     ] })
   ] });
@@ -1068,6 +1086,7 @@ function Conversation({ state, adapter, components = {}, slots = {}, memoryKey =
   const After = slots.afterConversation;
   const Empty = slots.emptyConversation;
   const remember = (value) => boundedSet(conversationMemory, memoryKey, value);
+  const pendingMessage = typeof pending === "string" ? { text: pending, status: "sending" } : pending;
   const pin = () => {
     if (!scroller.current) return;
     scroller.current.scrollTop = scroller.current.scrollHeight;
@@ -1089,7 +1108,7 @@ function Conversation({ state, adapter, components = {}, slots = {}, memoryKey =
       if (remembered.top !== null && !remembered.atBottom) element.scrollTop = remembered.top;
       else pin();
     } else if (atBottom) pin();
-  }, [memoryKey, state.transcript.length, state.busy]);
+  }, [memoryKey, state.transcript, state.busy, state.operation, pendingMessage?.text, pendingMessage?.status]);
   return /* @__PURE__ */ jsxs2("div", { class: "scui-conversation-wrap", children: [
     /* @__PURE__ */ jsx3("div", { class: "scui-conversation", ref: scroller, tabIndex: 0, "aria-label": "Conversation", onScroll: (event) => {
       const element = event.currentTarget;
@@ -1109,9 +1128,15 @@ function Conversation({ state, adapter, components = {}, slots = {}, memoryKey =
       !blocks.length && state.startup !== "ready" ? /* @__PURE__ */ jsx3(LoadingStatus, { state }) : null,
       !blocks.length && state.startup === "ready" ? Empty ? /* @__PURE__ */ jsx3(Empty, { state, adapter, value: null }) : /* @__PURE__ */ jsx3("div", { class: "scui-empty", children: state.error ?? (state.harness ? `${harnessDisplayName(state.harness)} is listening. Say something.` : "No transcript yet.") }) : null,
       blocks.map((block) => block.kind === "activity" ? /* @__PURE__ */ jsx3(Group, { value: block.entries, entries: block.entries, state, adapter }, block.id) : /* @__PURE__ */ jsx3(Entry, { value: block.entry, entry: block.entry, state, adapter }, block.id)),
-      pending ? /* @__PURE__ */ jsxs2("article", { class: "scui-message scui-pending", "data-role": "user", children: [
-        /* @__PURE__ */ jsx3(Markdown, { value: pending }),
-        /* @__PURE__ */ jsx3("small", { children: state.error && !state.busy ? "Not sent" : "Sending\u2026" })
+      pendingMessage ? /* @__PURE__ */ jsxs2("article", { class: "scui-message scui-pending", "data-role": "user", "data-status": pendingMessage.status, children: [
+        /* @__PURE__ */ jsx3(Markdown, { value: pendingMessage.text }),
+        /* @__PURE__ */ jsxs2("footer", { children: [
+          /* @__PURE__ */ jsx3("small", { children: pendingMessage.status === "failed" ? "Not sent" : "Sending\u2026" }),
+          pendingMessage.status === "failed" ? /* @__PURE__ */ jsxs2("span", { children: [
+            /* @__PURE__ */ jsx3("button", { type: "button", onClick: pendingMessage.onRetry, children: "Retry" }),
+            /* @__PURE__ */ jsx3("button", { type: "button", onClick: pendingMessage.onEdit, children: "Edit" })
+          ] }) : null
+        ] })
       ] }) : null,
       state.busy ? /* @__PURE__ */ jsxs2("div", { class: "scui-working", role: "status", children: [
         /* @__PURE__ */ jsx3("span", { "aria-hidden": "true", children: "\u2726" }),
@@ -1192,15 +1217,15 @@ function HarnessLogo({ id, activity, size = 28, onMissingLogo }) {
 }
 
 // src/messenger.jsx
-import { useEffect as useEffect4, useRef as useRef3, useState as useState4 } from "preact/hooks";
+import { useEffect as useEffect5, useMemo as useMemo2, useRef as useRef4, useState as useState4 } from "preact/hooks";
 
 // src/sessions.jsx
-import { useState as useState3 } from "preact/hooks";
+import { useEffect as useEffect4, useRef as useRef3, useState as useState3 } from "preact/hooks";
 import { jsx as jsx5, jsxs as jsxs4 } from "preact/jsx-runtime";
 function SessionRow({ row, state, onOpen }) {
   const activity = sessionActivity(state, row);
   const preview = state.attention.find((item) => item.key === row.key)?.preview;
-  return /* @__PURE__ */ jsxs4("button", { class: "scui-session", "data-active": row.active, "data-activity": activity, type: "button", onClick: () => onOpen(row), children: [
+  return /* @__PURE__ */ jsxs4("button", { class: "scui-session", "data-active": row.active, "data-activity": activity, "data-session-key": row.key, type: "button", onClick: () => onOpen(row), children: [
     /* @__PURE__ */ jsx5(HarnessLogo, { id: row.harness, activity, size: 34 }),
     /* @__PURE__ */ jsxs4("span", { class: "scui-session-copy", children: [
       /* @__PURE__ */ jsxs4("span", { children: [
@@ -1215,11 +1240,17 @@ function SessionRow({ row, state, onOpen }) {
     ] })
   ] });
 }
-function SessionList({ state, adapter, onOpen, onNew, onClose, components = {}, labels = DEFAULT_LABELS }) {
+function SessionList({ state, adapter, onOpen, onNew, onClose, components = {}, labels = DEFAULT_LABELS, focusKey = null }) {
   const [query, setQuery] = useState3("");
+  const root = useRef3(null);
   const rows = filterSessions(state.sessions, query);
   const Row = components.SessionRow ?? SessionRow;
-  return /* @__PURE__ */ jsxs4("section", { class: "scui-list", children: [
+  useEffect4(() => {
+    if (!focusKey || !root.current) return;
+    const target = focusKey === "@new" ? root.current.querySelector('[data-list-focus="new"]') : [...root.current.querySelectorAll("[data-session-key]")].find((element) => element.dataset.sessionKey === focusKey);
+    (target ?? root.current.querySelector("input,button"))?.focus({ preventScroll: true });
+  }, [focusKey, rows.length]);
+  return /* @__PURE__ */ jsxs4("section", { class: "scui-list", ref: root, children: [
     /* @__PURE__ */ jsxs4("header", { class: "scui-head", children: [
       /* @__PURE__ */ jsxs4("span", { class: "scui-head-copy", children: [
         /* @__PURE__ */ jsx5("strong", { children: labels.chats }),
@@ -1228,7 +1259,7 @@ function SessionList({ state, adapter, onOpen, onNew, onClose, components = {},
           " recent conversations"
         ] })
       ] }),
-      /* @__PURE__ */ jsx5("button", { type: "button", "aria-label": labels.newChat, disabled: !state.harnesses.some((item) => item.startable), onClick: onNew, children: "\uFF0B" }),
+      /* @__PURE__ */ jsx5("button", { type: "button", "data-list-focus": "new", "aria-label": labels.newChat, disabled: !state.harnesses.some((item) => item.startable), onClick: onNew, children: "\uFF0B" }),
       onClose ? /* @__PURE__ */ jsx5("button", { type: "button", "aria-label": "Close", onClick: onClose, children: "\xD7" }) : null
     ] }),
     state.startup !== "ready" ? /* @__PURE__ */ jsx5(LoadingStatus, { state, compact: rows.length > 0 }) : null,
@@ -1247,6 +1278,7 @@ function SessionList({ state, adapter, onOpen, onNew, onClose, components = {},
 
 // src/messenger.jsx
 import { jsx as jsx6, jsxs as jsxs5 } from "preact/jsx-runtime";
+var pendingMessageMemory = /* @__PURE__ */ new Map();
 function Receipt({ state, adapter }) {
   const receipt = state.reductionReceipt;
   if (receipt) return /* @__PURE__ */ jsx6("div", { class: "scui-receipt", children: /* @__PURE__ */ jsxs5("span", { children: [
@@ -1284,14 +1316,14 @@ function Receipt({ state, adapter }) {
   ] });
   return null;
 }
-function ChatHeader({ state, adapter, onBack, onNew, onClose }) {
+function ChatHeader({ state, adapter, pendingStatus, onBack, onNew, onClose }) {
   const harness = state.attached?.harness ?? state.harness;
   const targets = state.harnesses.filter((item) => item.startable);
   const title = state.attached ? sessionDisplayName(state.attached) : harnessDisplayName(harness) || "Agent chat";
-  const status = state.needsInput ? "Needs input" : state.busy ? "Working" : state.mode === "mirror" ? "Read-only" : "Ready";
+  const status = state.needsInput ? "Needs input" : pendingStatus === "failed" ? "Send failed" : state.busy ? "Working" : pendingStatus === "sending" ? "Sending" : pendingStatus === "editing" ? "Editing message" : state.mode === "mirror" ? "Read-only" : "Ready";
   const menu = state.canDetach || state.canOpenTerminal || state.canBranch || state.canAttach || state.canExport || state.canReduce;
   return /* @__PURE__ */ jsxs5("header", { class: "scui-head scui-chat-head", children: [
-    /* @__PURE__ */ jsx6("button", { type: "button", "aria-label": "Back to chats", onClick: onBack, children: "\u2039" }),
+    /* @__PURE__ */ jsx6("button", { type: "button", autofocus: state.mode === "mirror" && !state.canSend, "aria-label": "Back to chats", onClick: onBack, children: "\u2039" }),
     /* @__PURE__ */ jsx6(HarnessLogo, { id: harness, size: 28 }),
     /* @__PURE__ */ jsxs5("span", { class: "scui-head-copy", children: [
       /* @__PURE__ */ jsx6("strong", { children: title }),
@@ -1321,15 +1353,48 @@ function ChatHeader({ state, adapter, onBack, onNew, onClose }) {
 function Chat({ state, adapter, onBack, onNew, onClose, components, slots, labels }) {
   const Header = slots.header;
   const memoryKey = state.attached?.key || `${state.harness}:${state.workspace}`;
-  const [pending, setPending] = useState4(null);
-  const acknowledged = useRef3(/* @__PURE__ */ new Set());
-  useEffect4(() => {
-    setPending(null);
+  const [pending, setPendingState] = useState4(() => pendingMessageMemory.get(memoryKey) ?? null);
+  const [restoreDraft, setRestoreDraft] = useState4(null);
+  const restoreSequence = useRef4(0);
+  const acknowledged = useRef4(/* @__PURE__ */ new Set());
+  const setPending = (update) => setPendingState((current) => {
+    const next = typeof update === "function" ? update(current) : update;
+    if (next) boundedSet(pendingMessageMemory, memoryKey, next);
+    else pendingMessageMemory.delete(memoryKey);
+    return next;
+  });
+  useEffect5(() => {
+    setPendingState(pendingMessageMemory.get(memoryKey) ?? null);
+    setRestoreDraft(null);
   }, [memoryKey]);
-  useEffect4(() => {
-    if (pending && state.transcript.some((entry) => entry.role === "user" && entry.text.trim() === pending.trim())) setPending(null);
-  }, [pending, state.transcript]);
-  useEffect4(() => {
+  useEffect5(() => {
+    if (!pending) return;
+    if (state.transcript.some((entry) => entry.role === "user" && entry.text.trim() === pending.text.trim() && !pending.baselineIds.includes(entry.id))) {
+      setPending(null);
+      return;
+    }
+    if (pending.status === "sending" && state.busy && !pending.seenBusy) setPending({ ...pending, seenBusy: true });
+    else if (pending.status === "sending" && state.error && !state.busy && !state.operation && (pending.seenBusy || state.error !== pending.initialError)) setPending({ ...pending, status: "failed" });
+  }, [pending, state.busy, state.error, state.operation, state.transcript]);
+  const beginPending = (text) => setPending({
+    text,
+    status: "sending",
+    initialError: state.error,
+    seenBusy: state.busy,
+    baselineIds: state.transcript.filter((entry) => entry.role === "user" && entry.text.trim() === text.trim()).map((entry) => entry.id)
+  });
+  const retryPending = () => {
+    if (!pending) return;
+    adapter.onIntent({ action: "send", text: pending.text });
+    setPending({ ...pending, status: "sending", initialError: state.error, seenBusy: state.busy });
+  };
+  const editPending = () => {
+    if (!pending) return;
+    restoreSequence.current += 1;
+    setRestoreDraft({ id: restoreSequence.current, text: pending.text });
+    setPending({ ...pending, status: "editing" });
+  };
+  useEffect5(() => {
     const key = state.attached?.key;
     if (!key || !state.attention.some((item) => item.key === key)) {
       if (key) acknowledged.current.delete(key);
@@ -1340,8 +1405,9 @@ function Chat({ state, adapter, onBack, onNew, onClose, components, slots, label
       adapter.onIntent({ action: "ack", key });
     }
   }, [adapter, state.attached?.key, state.attention]);
+  const pendingMessage = pending && pending.status !== "editing" ? { text: pending.text, status: pending.status, onRetry: retryPending, onEdit: editPending } : null;
   return /* @__PURE__ */ jsxs5("section", { class: "scui-chat", children: [
-    Header ? /* @__PURE__ */ jsx6(Header, { state, adapter, value: null }) : /* @__PURE__ */ jsx6(ChatHeader, { state, adapter, onBack, onNew, onClose }),
+    Header ? /* @__PURE__ */ jsx6(Header, { state, adapter, value: null }) : /* @__PURE__ */ jsx6(ChatHeader, { state, adapter, pendingStatus: pending?.status ?? null, onBack, onNew, onClose }),
     operationLabel(state.operation) ? /* @__PURE__ */ jsxs5("div", { class: "scui-operation", role: "status", children: [
       /* @__PURE__ */ jsx6("i", {}),
       operationLabel(state.operation)
@@ -1351,9 +1417,9 @@ function Chat({ state, adapter, onBack, onNew, onClose, components, slots, label
       state.recoverable ? /* @__PURE__ */ jsx6("button", { type: "button", onClick: () => adapter.onIntent({ action: "refresh" }), children: "Retry" }) : null
     ] }) : null,
     /* @__PURE__ */ jsx6(Receipt, { state, adapter }),
-    /* @__PURE__ */ jsx6(Conversation, { state, adapter, components, slots, memoryKey, pending }, memoryKey),
+    /* @__PURE__ */ jsx6(Conversation, { state, adapter, components, slots, memoryKey, pending: pendingMessage }, memoryKey),
     /* @__PURE__ */ jsx6(ContinuationBar, { state, adapter, labels }),
-    state.mode !== "mirror" || state.canSend ? /* @__PURE__ */ jsx6(Composer, { state, adapter, labels, memoryKey, onPending: setPending }, memoryKey) : null
+    state.mode !== "mirror" || state.canSend ? /* @__PURE__ */ jsx6(Composer, { state, adapter, labels, memoryKey, pendingStatus: pending?.status ?? null, restoreDraft, onDraftRestored: (id) => setRestoreDraft((value) => value?.id === id ? null : value), onPending: beginPending }, memoryKey) : null
   ] });
 }
 function NewChat({ state, adapter, onBack, onClose, onStarted, labels }) {
@@ -1362,13 +1428,13 @@ function NewChat({ state, adapter, onBack, onClose, onStarted, labels }) {
   const [harness, setHarness] = useState4(startable[0]?.id ?? "");
   const [draft, setDraft] = useState4("");
   const [starting, setStarting] = useState4(false);
-  useEffect4(() => {
+  useEffect5(() => {
     if (!startable.some((item) => item.id === harness)) setHarness(startable[0]?.id ?? "");
   }, [harness, startableKey]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (starting && (state.busy || state.transcript.length)) onStarted();
   }, [onStarted, starting, state.busy, state.transcript.length]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (starting && state.error && !state.busy && !state.operation) setStarting(false);
   }, [starting, state.busy, state.error, state.operation]);
   const send = () => {
@@ -1401,7 +1467,7 @@ function NewChat({ state, adapter, onBack, onClose, onStarted, labels }) {
         ] }, item.id)) })
       ] }),
       /* @__PURE__ */ jsxs5("div", { class: "scui-envelope", children: [
-        /* @__PURE__ */ jsx6("textarea", { rows: 3, "aria-label": "Message coding agent", placeholder: startable.length ? "What should the agent do?" : "No coding harness is available", value: draft, disabled: !startable.length || starting, onInput: (event) => setDraft(event.currentTarget.value), onKeyDown: (event) => {
+        /* @__PURE__ */ jsx6("textarea", { autofocus: true, rows: 3, "aria-label": "Message coding agent", placeholder: startable.length ? "What should the agent do?" : "No coding harness is available", value: draft, disabled: !startable.length || starting, onInput: (event) => setDraft(event.currentTarget.value), onKeyDown: (event) => {
           if (isSendKey(event)) {
             event.preventDefault();
             send();
@@ -1413,11 +1479,12 @@ function NewChat({ state, adapter, onBack, onClose, onStarted, labels }) {
   ] });
 }
 function SupercodeMessenger({ state: stateInput, adapter, class: className = "", initialView, labels, components = {}, slots = {} }) {
-  const state = normalizeUiState(stateInput);
+  const state = useMemo2(() => normalizeUiState(stateInput), [stateInput]);
   const copy = { ...DEFAULT_LABELS, ...labels };
   const [view, setView] = useState4(initialView ?? (state.attention.length ? "list" : state.attached || state.transcript.length ? "chat" : "list"));
   const [opening, setOpening] = useState4(null);
-  useEffect4(() => {
+  const [listFocus, setListFocus] = useState4(null);
+  useEffect5(() => {
     if (!opening) return;
     if (state.attached?.key === opening.key) {
       setOpening(null);
@@ -1427,6 +1494,7 @@ function SupercodeMessenger({ state: stateInput, adapter, class: className = "",
     }
   }, [opening, state.attachError?.key, state.attached?.key, state.error, state.operation]);
   const open = (row) => {
+    setListFocus(row.key);
     setOpening(row);
     adapter.onIntent({ action: "ack", key: row.key });
     adapter.onIntent({ action: "attach", key: row.key });
@@ -1434,9 +1502,18 @@ function SupercodeMessenger({ state: stateInput, adapter, class: className = "",
   const close = () => adapter.onClose?.();
   const Footer = slots.footer;
   return /* @__PURE__ */ jsxs5("main", { class: `scui-root ${className}`, "data-view": view, "data-mode": state.mode, "aria-label": "Supercode messenger", children: [
-    view === "list" ? /* @__PURE__ */ jsx6(SessionList, { state, adapter, onOpen: open, onNew: () => setView("new"), onClose: adapter.onClose ? close : void 0, components, labels: copy }) : null,
+    view === "list" ? /* @__PURE__ */ jsx6(SessionList, { state, adapter, focusKey: listFocus, onOpen: open, onNew: () => {
+      setListFocus("@new");
+      setView("new");
+    }, onClose: adapter.onClose ? close : void 0, components, labels: copy }) : null,
     view === "new" ? /* @__PURE__ */ jsx6(NewChat, { state, adapter, onBack: () => setView("list"), onClose: adapter.onClose ? close : void 0, onStarted: () => setView("chat"), labels: copy }) : null,
-    view === "chat" ? /* @__PURE__ */ jsx6(Chat, { state, adapter, onBack: () => setView("list"), onNew: () => setView("new"), onClose: adapter.onClose ? close : void 0, components, slots, labels: copy }) : null,
+    view === "chat" ? /* @__PURE__ */ jsx6(Chat, { state, adapter, onBack: () => {
+      setListFocus(state.attached?.key ?? listFocus);
+      setView("list");
+    }, onNew: () => {
+      setListFocus("@new");
+      setView("new");
+    }, onClose: adapter.onClose ? close : void 0, components, slots, labels: copy }) : null,
     opening ? /* @__PURE__ */ jsxs5("div", { class: "scui-opening", role: "status", "aria-busy": "true", children: [
       /* @__PURE__ */ jsx6(HarnessLogo, { id: opening.harness, size: 34 }),
       /* @__PURE__ */ jsxs5("span", { children: [

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

@@ -102,10 +102,11 @@ function ContinuationBar({ state, adapter, labels = DEFAULT_LABELS }) {
     /* @__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 })
   ] });
 }
-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);
   const remember = (nextDraft, nextQueue) => boundedSet(composerMemory, memoryKey, { draft: nextDraft, queue: nextQueue });
   const updateQueue = (update) => setQueue((items) => {
@@ -113,15 +114,31 @@ function Composer({ state, adapter, labels = DEFAULT_LABELS, memoryKey = state.a
     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,13 +146,14 @@ 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: [
@@ -149,7 +167,7 @@ function Composer({ state, adapter, labels = DEFAULT_LABELS, memoryKey = state.a
       ] }, `${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__ */ 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" : 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);
@@ -161,7 +179,7 @@ function Composer({ state, adapter, labels = DEFAULT_LABELS, memoryKey = state.a
       } }),
       /* @__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__ */ jsx("button", { class: "scui-send", type: "button", "aria-label": queuesNewMessage ? "Queue message" : "Send message", disabled: !draft.trim() || !queuesNewMessage && !state.canSend, onClick: send, children: queuesNewMessage ? "+" : "\u2191" })
       ] })
     ] })
   ] });

package/conversation.d.ts

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

package/conversation.mjs

@@ -702,6 +702,7 @@ function Conversation({ state, adapter, components = {}, slots = {}, memoryKey =
   const After = slots.afterConversation;
   const Empty = slots.emptyConversation;
   const remember = (value) => boundedSet(conversationMemory, memoryKey, value);
+  const pendingMessage = typeof pending === "string" ? { text: pending, status: "sending" } : pending;
   const pin = () => {
     if (!scroller.current) return;
     scroller.current.scrollTop = scroller.current.scrollHeight;
@@ -723,7 +724,7 @@ function Conversation({ state, adapter, components = {}, slots = {}, memoryKey =
       if (remembered.top !== null && !remembered.atBottom) element.scrollTop = remembered.top;
       else pin();
     } else if (atBottom) pin();
-  }, [memoryKey, state.transcript.length, state.busy]);
+  }, [memoryKey, state.transcript, state.busy, state.operation, pendingMessage?.text, pendingMessage?.status]);
   return /* @__PURE__ */ jsxs("div", { class: "scui-conversation-wrap", children: [
     /* @__PURE__ */ jsx2("div", { class: "scui-conversation", ref: scroller, tabIndex: 0, "aria-label": "Conversation", onScroll: (event) => {
       const element = event.currentTarget;
@@ -743,9 +744,15 @@ function Conversation({ state, adapter, components = {}, slots = {}, memoryKey =
       !blocks.length && state.startup !== "ready" ? /* @__PURE__ */ jsx2(LoadingStatus, { state }) : null,
       !blocks.length && state.startup === "ready" ? Empty ? /* @__PURE__ */ jsx2(Empty, { state, adapter, value: null }) : /* @__PURE__ */ jsx2("div", { class: "scui-empty", children: state.error ?? (state.harness ? `${harnessDisplayName(state.harness)} is listening. Say something.` : "No transcript yet.") }) : null,
       blocks.map((block) => block.kind === "activity" ? /* @__PURE__ */ jsx2(Group, { value: block.entries, entries: block.entries, state, adapter }, block.id) : /* @__PURE__ */ jsx2(Entry, { value: block.entry, entry: block.entry, state, adapter }, block.id)),
-      pending ? /* @__PURE__ */ jsxs("article", { class: "scui-message scui-pending", "data-role": "user", children: [
-        /* @__PURE__ */ jsx2(Markdown, { value: pending }),
-        /* @__PURE__ */ jsx2("small", { children: state.error && !state.busy ? "Not sent" : "Sending\u2026" })
+      pendingMessage ? /* @__PURE__ */ jsxs("article", { class: "scui-message scui-pending", "data-role": "user", "data-status": pendingMessage.status, children: [
+        /* @__PURE__ */ jsx2(Markdown, { value: pendingMessage.text }),
+        /* @__PURE__ */ jsxs("footer", { children: [
+          /* @__PURE__ */ jsx2("small", { children: pendingMessage.status === "failed" ? "Not sent" : "Sending\u2026" }),
+          pendingMessage.status === "failed" ? /* @__PURE__ */ jsxs("span", { children: [
+            /* @__PURE__ */ jsx2("button", { type: "button", onClick: pendingMessage.onRetry, children: "Retry" }),
+            /* @__PURE__ */ jsx2("button", { type: "button", onClick: pendingMessage.onEdit, children: "Edit" })
+          ] }) : null
+        ] })
       ] }) : null,
       state.busy ? /* @__PURE__ */ jsxs("div", { class: "scui-working", role: "status", children: [
         /* @__PURE__ */ jsx2("span", { "aria-hidden": "true", children: "\u2726" }),