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

package/messenger.mjs

@@ -1,5 +1,5 @@
 // src/messenger.jsx
-import { useEffect as useEffect4, useMemo as useMemo2, 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";
 
 // core.mjs
 var HARNESS_NAMES = Object.freeze({
@@ -590,10 +590,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) => {
@@ -601,15 +602,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);
@@ -617,13 +634,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: [
@@ -637,7 +655,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);
@@ -649,7 +667,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" })
       ] })
     ] })
   ] });
@@ -1071,6 +1089,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;
@@ -1092,7 +1111,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, state.busy, state.operation]);
+  }, [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;
@@ -1112,9 +1131,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,12 +1217,12 @@ function HarnessLogo({ id, activity, size = 28, onMissingLogo }) {
 }
 
 // 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: [
@@ -1212,11 +1237,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 }),
@@ -1225,7 +1256,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,
@@ -1244,6 +1275,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: [
@@ -1281,14 +1313,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 }),
@@ -1318,15 +1350,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);
@@ -1337,8 +1402,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)
@@ -1348,9 +1414,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 }) {
@@ -1359,13 +1425,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 = () => {
@@ -1398,7 +1464,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();
@@ -1414,7 +1480,8 @@ function SupercodeMessenger({ state: stateInput, adapter, class: className = "",
   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);
@@ -1424,6 +1491,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 });
@@ -1431,9 +1499,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@volter-ai-dev/supercode-ui",
-  "version": "0.1.12",
+  "version": "0.1.13",
   "type": "module",
   "description": "Composable default UI kit for Supercode-powered coding-agent experiences",
   "exports": {

package/sessions.mjs

@@ -1,5 +1,5 @@
 // src/sessions.jsx
-import { useState as useState2 } from "preact/hooks";
+import { useEffect as useEffect3, useRef as useRef2, useState as useState2 } from "preact/hooks";
 
 // core.mjs
 var HARNESS_NAMES = Object.freeze({
@@ -179,7 +179,7 @@ import { jsx as jsx4, jsxs as jsxs3 } 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__ */ jsxs3("button", { class: "scui-session", "data-active": row.active, "data-activity": activity, type: "button", onClick: () => onOpen(row), children: [
+  return /* @__PURE__ */ jsxs3("button", { class: "scui-session", "data-active": row.active, "data-activity": activity, "data-session-key": row.key, type: "button", onClick: () => onOpen(row), children: [
     /* @__PURE__ */ jsx4(HarnessLogo, { id: row.harness, activity, size: 34 }),
     /* @__PURE__ */ jsxs3("span", { class: "scui-session-copy", children: [
       /* @__PURE__ */ jsxs3("span", { children: [
@@ -194,11 +194,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] = useState2("");
+  const root = useRef2(null);
   const rows = filterSessions(state.sessions, query);
   const Row = components.SessionRow ?? SessionRow;
-  return /* @__PURE__ */ jsxs3("section", { class: "scui-list", children: [
+  useEffect3(() => {
+    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__ */ jsxs3("section", { class: "scui-list", ref: root, children: [
     /* @__PURE__ */ jsxs3("header", { class: "scui-head", children: [
       /* @__PURE__ */ jsxs3("span", { class: "scui-head-copy", children: [
         /* @__PURE__ */ jsx4("strong", { children: labels.chats }),
@@ -207,7 +213,7 @@ function SessionList({ state, adapter, onOpen, onNew, onClose, components = {},
           " recent conversations"
         ] })
       ] }),
-      /* @__PURE__ */ jsx4("button", { type: "button", "aria-label": labels.newChat, disabled: !state.harnesses.some((item) => item.startable), onClick: onNew, children: "\uFF0B" }),
+      /* @__PURE__ */ jsx4("button", { type: "button", "data-list-focus": "new", "aria-label": labels.newChat, disabled: !state.harnesses.some((item) => item.startable), onClick: onNew, children: "\uFF0B" }),
       onClose ? /* @__PURE__ */ jsx4("button", { type: "button", "aria-label": "Close", onClick: onClose, children: "\xD7" }) : null
     ] }),
     state.startup !== "ready" ? /* @__PURE__ */ jsx4(LoadingStatus, { state, compact: rows.length > 0 }) : null,

package/styles.css

@@ -115,6 +115,9 @@
 .scui-latest { position:absolute; z-index:5; right:12px; bottom:8px; padding:5px 9px; border:1px solid var(--scui-border-strong); border-radius:999px; background:var(--scui-bg-raised); box-shadow:0 2px 8px rgba(0,0,0,.2); cursor:pointer }
 .scui-message { position:relative; overflow-wrap:anywhere }
 .scui-message[data-role="user"] { align-self:flex-end; max-width:90%; padding:8px 9px; border:1px solid var(--scui-border); border-radius:10px; background:var(--scui-fill) }
+.scui-pending[data-status="failed"] { border-color:color-mix(in srgb,var(--scui-danger) 45%,var(--scui-border)); background:color-mix(in srgb,var(--scui-danger) 7%,var(--scui-fill)); opacity:1 }
+.scui-pending > footer { display:flex; align-items:center; gap:8px; margin-top:5px }.scui-pending > footer small { color:var(--scui-muted) }.scui-pending[data-status="failed"] > footer small { color:var(--scui-danger) }
+.scui-pending > footer > span { display:flex; gap:4px; margin-left:auto }.scui-pending > footer button { padding:2px 6px; border:1px solid var(--scui-border-strong); border-radius:5px; background:transparent; color:var(--scui-fg); cursor:pointer; font:inherit; font-size:9.5px }
 .scui-pending { opacity:.7 }.scui-pending > small { display:block; margin-top:3px; color:var(--scui-muted); font-size:9.5px }
 .scui-markdown { font-size:12.5px; line-height:1.55 }.scui-markdown > :first-child { margin-top:0 }.scui-markdown > :last-child { margin-bottom:0 }
 .scui-markdown p { margin:0 0 8px }.scui-markdown h1,.scui-markdown h2,.scui-markdown h3 { margin:12px 0 5px; line-height:1.25 }.scui-markdown h1 { font-size:17px }.scui-markdown h2 { font-size:15px }.scui-markdown h3 { font-size:13px }