@volter-ai-dev/supercode-ui 0.1.33 → 0.1.35

package/README.md

@@ -123,6 +123,8 @@ errors, and owned/attached identities without reimplementing transcript or capab
 - Every component accepts data and callbacks. No component reaches into a global controller.
 - The complete messenger accepts `slots` for high-level replacement and `components` for row-level
   replacement. Replacements receive the same typed, capability-filtered props as defaults.
+- `slots.headerActions` adds compact product controls to the default list, chat, and new-chat
+  headers without replacing their navigation, status, or accessibility behavior.
 - Stable `scui-*` classes and `data-*` attributes support additive styling; CSS custom properties
   are the supported theme API.
 - `styles.css` contains both neutral tokens and default component rules. Teams may load it whole,

package/components.mjs

@@ -833,7 +833,7 @@ function activitySummary(entries) {
 function canContinueHere(state) {
   if (state.mode !== "mirror" || state.canSend) return false;
   const row = state.attached?.key ? state.sessions.find((item) => item.key === state.attached.key) : null;
-  return state.canResume && row?.runtimeStatus !== "running" && row?.runtimeStatus !== "busy" && row?.runtimeStatus !== "idle";
+  return Boolean(row) && state.canResume && row.runtimeStatus !== "running" && row.runtimeStatus !== "busy" && row.runtimeStatus !== "idle";
 }
 function operationLabel(operation) {
   if (!operation) return "";
@@ -2130,7 +2130,7 @@ function SessionRow({ row, state, onOpen, now = Date.now() }) {
     ] })
   ] });
 }
-function SessionList({ state, adapter, onOpen, onNew, onClose, components = {}, labels = DEFAULT_LABELS, focusKey = null, memoryKey = state.workspace || "@default" }) {
+function SessionList({ state, adapter, onOpen, onNew, onClose, components = {}, labels = DEFAULT_LABELS, focusKey = null, memoryKey = state.workspace || "@default", headerActions: HeaderActions }) {
   const remembered = sessionListMemory.get(memoryKey) ?? { query: "", top: 0 };
   const [query, setQuery] = useState4(remembered.query);
   const [loadingMore, setLoadingMore] = useState4(false);
@@ -2171,6 +2171,7 @@ function SessionList({ state, adapter, onOpen, onNew, onClose, components = {},
           " recent conversations"
         ] })
       ] }),
+      HeaderActions ? /* @__PURE__ */ jsx7(HeaderActions, { state, adapter, value: "list" }) : null,
       /* @__PURE__ */ jsx7("button", { type: "button", "data-list-focus": "new", "aria-label": labels.newChat, disabled: !state.harnesses.some((item) => item.startable), onClick: onNew, children: /* @__PURE__ */ jsx7(UiIcon, { name: "plus", size: 18 }) }),
       onClose ? /* @__PURE__ */ jsx7("button", { type: "button", "aria-label": "Close", onClick: onClose, children: /* @__PURE__ */ jsx7(UiIcon, { name: "close", size: 18 }) }) : null
     ] }),
@@ -2409,11 +2410,11 @@ function ConversationActions({ state, adapter, actionPending, onSettings }) {
     ] }, group.label)) }) : null
   ] });
 }
-function ChatHeader({ state, adapter, pendingStatus, actionPending, onBack, onNew, onClose, onSettings }) {
+function ChatHeader({ state, adapter, pendingStatus, actionPending, onBack, onNew, onClose, onSettings, headerActions: HeaderActions }) {
   const back = useRef7(null);
   const harness = state.attached?.harness ?? state.harness;
   const title = state.attached ? sessionDisplayName(state.attached) : harnessDisplayName(harness) || "Agent chat";
-  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 status = state.needsInput ? "Needs input" : pendingStatus === "failed" ? "Send failed" : state.busy ? "Working" : pendingStatus === "sending" ? "Sending" : pendingStatus === "editing" ? "Editing message" : state.messaging === "live_peer" ? "Live" : state.mode === "mirror" ? "Read-only" : "Ready";
   const menu = state.canDetach || state.canOpenTerminal || state.canBranch || state.canAttach || state.canExport || state.canReduce || state.interopSettings || state.interopSettingsError;
   useEffect8(() => {
     if (state.mode === "mirror" && !state.canSend) back.current?.focus({ preventScroll: true });
@@ -2429,6 +2430,7 @@ function ChatHeader({ state, adapter, pendingStatus, actionPending, onBack, onNe
         status
       ] })
     ] }),
+    HeaderActions ? /* @__PURE__ */ jsx9(HeaderActions, { state, adapter, value: "chat" }) : null,
     menu ? /* @__PURE__ */ jsx9(ConversationActions, { state, adapter, actionPending, onSettings }) : null,
     /* @__PURE__ */ jsx9("button", { type: "button", "aria-label": "New chat", onClick: onNew, children: /* @__PURE__ */ jsx9(UiIcon, { name: "plus", size: 18 }) }),
     onClose ? /* @__PURE__ */ jsx9("button", { type: "button", "aria-label": "Close", onClick: onClose, children: /* @__PURE__ */ jsx9(UiIcon, { name: "close", size: 18 }) }) : null
@@ -2436,6 +2438,7 @@ function ChatHeader({ state, adapter, pendingStatus, actionPending, onBack, onNe
 }
 function Chat({ state, adapter, onBack, onNew, onClose, components, slots, labels }) {
   const Header = slots.header;
+  const HeaderActions = slots.headerActions;
   const memoryKey = state.attached?.key || `${state.harness}:${state.workspace}`;
   const [pending, setPendingState] = useState6(() => pendingMessageMemory.get(memoryKey) ?? null);
   const [pendingAction, setPendingAction] = useState6(null);
@@ -2535,7 +2538,7 @@ function Chat({ state, adapter, onBack, onNew, onClose, components, slots, label
   const Advisory = components.HarnessAdvisory ?? HarnessAdvisory;
   const SettingsPanel = components.HarnessSettingsPanel ?? HarnessSettingsPanel;
   return /* @__PURE__ */ jsxs8("section", { class: "scui-chat", children: [
-    Header ? /* @__PURE__ */ jsx9(Header, { state: actionState, adapter: trackedAdapter, value: null }) : /* @__PURE__ */ jsx9(ChatHeader, { state: actionState, adapter: trackedAdapter, pendingStatus: pending?.status ?? null, actionPending: Boolean(action), onBack, onNew, onClose, onSettings: () => setSettings({ recommendedChange: null }) }),
+    Header ? /* @__PURE__ */ jsx9(Header, { state: actionState, adapter: trackedAdapter, value: null }) : /* @__PURE__ */ jsx9(ChatHeader, { state: actionState, adapter: trackedAdapter, pendingStatus: pending?.status ?? null, actionPending: Boolean(action), onBack, onNew, onClose, onSettings: () => setSettings({ recommendedChange: null }), headerActions: HeaderActions }),
     actionLabel ? /* @__PURE__ */ jsxs8("div", { class: "scui-operation", role: "status", children: [
       /* @__PURE__ */ jsx9("i", {}),
       actionLabel
@@ -2552,7 +2555,7 @@ function Chat({ state, adapter, onBack, onNew, onClose, components, slots, label
     settings ? /* @__PURE__ */ jsx9(SettingsPanel, { state: actionState, adapter: trackedAdapter, value: state.interopSettings, recommendedChange: settings.recommendedChange, onClose: () => setSettings(null) }) : null
   ] });
 }
-function NewChat({ state, adapter, onBack, onClose, onStarted, labels, memoryKey }) {
+function NewChat({ state, adapter, onBack, onClose, onStarted, labels, memoryKey, headerActions: HeaderActions }) {
   const startable = state.harnesses.filter((item) => item.startable);
   const startableKey = startable.map((item) => `${item.id}:${item.launchModes?.join(",")}:${item.preferredLaunchMode ?? ""}`).join("\0");
   const remembered = newChatMemory.get(memoryKey) ?? { harness: startable[0]?.id ?? "", draft: "", context: [], images: [], modes: {} };
@@ -2669,6 +2672,7 @@ function NewChat({ state, adapter, onBack, onClose, onStarted, labels, memoryKey
         /* @__PURE__ */ jsx9("strong", { children: labels.newChat }),
         /* @__PURE__ */ jsx9("small", { children: "No session is created until you send" })
       ] }),
+      HeaderActions ? /* @__PURE__ */ jsx9(HeaderActions, { state, adapter, value: "new" }) : null,
       onClose ? /* @__PURE__ */ jsx9("button", { type: "button", "aria-label": "Close", onClick: onClose, children: /* @__PURE__ */ jsx9(UiIcon, { name: "close", size: 18 }) }) : null
     ] }),
     starting ? /* @__PURE__ */ jsxs8("div", { class: "scui-operation", role: "status", children: [
@@ -2772,12 +2776,13 @@ function SupercodeMessenger({ state: stateInput, adapter, class: className = "",
   };
   const close = () => adapter.onClose?.();
   const Footer = slots.footer;
+  const HeaderActions = slots.headerActions;
   return /* @__PURE__ */ jsxs8("main", { class: `scui-root ${className}`, "data-view": view, "data-mode": state.mode, "aria-label": "Supercode messenger", children: [
     view === "list" ? /* @__PURE__ */ jsx9(SessionList, { state, adapter, focusKey: listFocus, onOpen: open, onNew: () => {
       setListFocus("@new");
       setView("new");
-    }, onClose: adapter.onClose ? close : void 0, components, labels: copy, memoryKey }) : null,
-    view === "new" ? /* @__PURE__ */ jsx9(NewChat, { state, adapter, onBack: () => setView("list"), onClose: adapter.onClose ? close : void 0, onStarted: (mode) => setView(mode === "terminal" ? "list" : "chat"), labels: copy, memoryKey }) : null,
+    }, onClose: adapter.onClose ? close : void 0, components, labels: copy, memoryKey, headerActions: HeaderActions }) : null,
+    view === "new" ? /* @__PURE__ */ jsx9(NewChat, { state, adapter, onBack: () => setView("list"), onClose: adapter.onClose ? close : void 0, onStarted: (mode) => setView(mode === "terminal" ? "list" : "chat"), labels: copy, memoryKey, headerActions: HeaderActions }) : null,
     view === "chat" ? /* @__PURE__ */ jsx9(Chat, { state, adapter, onBack: () => {
       setListFocus(state.attached?.key ?? listFocus);
       setView("list");

package/composer.mjs

@@ -70,7 +70,7 @@ function harnessDisplayName(id) {
 function canContinueHere(state) {
   if (state.mode !== "mirror" || state.canSend) return false;
   const row = state.attached?.key ? state.sessions.find((item) => item.key === state.attached.key) : null;
-  return state.canResume && row?.runtimeStatus !== "running" && row?.runtimeStatus !== "busy" && row?.runtimeStatus !== "idle";
+  return Boolean(row) && state.canResume && row.runtimeStatus !== "running" && row.runtimeStatus !== "busy" && row.runtimeStatus !== "idle";
 }
 function isSendKey(event) {
   return event.key === "Enter" && !event.shiftKey && !event.isComposing;

package/core.mjs

@@ -903,7 +903,7 @@ export function activitySummary(entries) {
 export function canContinueHere(state) {
   if (state.mode !== 'mirror' || state.canSend) return false;
   const row = state.attached?.key ? state.sessions.find((item) => item.key === state.attached.key) : null;
-  return state.canResume && row?.runtimeStatus !== 'running' && row?.runtimeStatus !== 'busy' && row?.runtimeStatus !== 'idle';
+  return Boolean(row) && state.canResume && row.runtimeStatus !== 'running' && row.runtimeStatus !== 'busy' && row.runtimeStatus !== 'idle';
 }
 
 export function operationLabel(operation) {

package/embed.mjs

@@ -836,7 +836,7 @@ function activitySummary(entries) {
 function canContinueHere(state) {
   if (state.mode !== "mirror" || state.canSend) return false;
   const row = state.attached?.key ? state.sessions.find((item) => item.key === state.attached.key) : null;
-  return state.canResume && row?.runtimeStatus !== "running" && row?.runtimeStatus !== "busy" && row?.runtimeStatus !== "idle";
+  return Boolean(row) && state.canResume && row.runtimeStatus !== "running" && row.runtimeStatus !== "busy" && row.runtimeStatus !== "idle";
 }
 function operationLabel(operation) {
   if (!operation) return "";
@@ -2109,7 +2109,7 @@ function SessionRow({ row, state, onOpen, now = Date.now() }) {
     ] })
   ] });
 }
-function SessionList({ state, adapter, onOpen, onNew, onClose, components = {}, labels = DEFAULT_LABELS, focusKey = null, memoryKey = state.workspace || "@default" }) {
+function SessionList({ state, adapter, onOpen, onNew, onClose, components = {}, labels = DEFAULT_LABELS, focusKey = null, memoryKey = state.workspace || "@default", headerActions: HeaderActions }) {
   const remembered = sessionListMemory.get(memoryKey) ?? { query: "", top: 0 };
   const [query, setQuery] = useState4(remembered.query);
   const [loadingMore, setLoadingMore] = useState4(false);
@@ -2150,6 +2150,7 @@ function SessionList({ state, adapter, onOpen, onNew, onClose, components = {},
           " recent conversations"
         ] })
       ] }),
+      HeaderActions ? /* @__PURE__ */ jsx7(HeaderActions, { state, adapter, value: "list" }) : null,
       /* @__PURE__ */ jsx7("button", { type: "button", "data-list-focus": "new", "aria-label": labels.newChat, disabled: !state.harnesses.some((item) => item.startable), onClick: onNew, children: /* @__PURE__ */ jsx7(UiIcon, { name: "plus", size: 18 }) }),
       onClose ? /* @__PURE__ */ jsx7("button", { type: "button", "aria-label": "Close", onClick: onClose, children: /* @__PURE__ */ jsx7(UiIcon, { name: "close", size: 18 }) }) : null
     ] }),
@@ -2388,11 +2389,11 @@ function ConversationActions({ state, adapter, actionPending, onSettings }) {
     ] }, group.label)) }) : null
   ] });
 }
-function ChatHeader({ state, adapter, pendingStatus, actionPending, onBack, onNew, onClose, onSettings }) {
+function ChatHeader({ state, adapter, pendingStatus, actionPending, onBack, onNew, onClose, onSettings, headerActions: HeaderActions }) {
   const back = useRef7(null);
   const harness = state.attached?.harness ?? state.harness;
   const title = state.attached ? sessionDisplayName(state.attached) : harnessDisplayName(harness) || "Agent chat";
-  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 status = state.needsInput ? "Needs input" : pendingStatus === "failed" ? "Send failed" : state.busy ? "Working" : pendingStatus === "sending" ? "Sending" : pendingStatus === "editing" ? "Editing message" : state.messaging === "live_peer" ? "Live" : state.mode === "mirror" ? "Read-only" : "Ready";
   const menu = state.canDetach || state.canOpenTerminal || state.canBranch || state.canAttach || state.canExport || state.canReduce || state.interopSettings || state.interopSettingsError;
   useEffect8(() => {
     if (state.mode === "mirror" && !state.canSend) back.current?.focus({ preventScroll: true });
@@ -2408,6 +2409,7 @@ function ChatHeader({ state, adapter, pendingStatus, actionPending, onBack, onNe
         status
       ] })
     ] }),
+    HeaderActions ? /* @__PURE__ */ jsx9(HeaderActions, { state, adapter, value: "chat" }) : null,
     menu ? /* @__PURE__ */ jsx9(ConversationActions, { state, adapter, actionPending, onSettings }) : null,
     /* @__PURE__ */ jsx9("button", { type: "button", "aria-label": "New chat", onClick: onNew, children: /* @__PURE__ */ jsx9(UiIcon, { name: "plus", size: 18 }) }),
     onClose ? /* @__PURE__ */ jsx9("button", { type: "button", "aria-label": "Close", onClick: onClose, children: /* @__PURE__ */ jsx9(UiIcon, { name: "close", size: 18 }) }) : null
@@ -2415,6 +2417,7 @@ function ChatHeader({ state, adapter, pendingStatus, actionPending, onBack, onNe
 }
 function Chat({ state, adapter, onBack, onNew, onClose, components, slots, labels }) {
   const Header = slots.header;
+  const HeaderActions = slots.headerActions;
   const memoryKey = state.attached?.key || `${state.harness}:${state.workspace}`;
   const [pending, setPendingState] = useState6(() => pendingMessageMemory.get(memoryKey) ?? null);
   const [pendingAction, setPendingAction] = useState6(null);
@@ -2514,7 +2517,7 @@ function Chat({ state, adapter, onBack, onNew, onClose, components, slots, label
   const Advisory = components.HarnessAdvisory ?? HarnessAdvisory;
   const SettingsPanel = components.HarnessSettingsPanel ?? HarnessSettingsPanel;
   return /* @__PURE__ */ jsxs8("section", { class: "scui-chat", children: [
-    Header ? /* @__PURE__ */ jsx9(Header, { state: actionState, adapter: trackedAdapter, value: null }) : /* @__PURE__ */ jsx9(ChatHeader, { state: actionState, adapter: trackedAdapter, pendingStatus: pending?.status ?? null, actionPending: Boolean(action), onBack, onNew, onClose, onSettings: () => setSettings({ recommendedChange: null }) }),
+    Header ? /* @__PURE__ */ jsx9(Header, { state: actionState, adapter: trackedAdapter, value: null }) : /* @__PURE__ */ jsx9(ChatHeader, { state: actionState, adapter: trackedAdapter, pendingStatus: pending?.status ?? null, actionPending: Boolean(action), onBack, onNew, onClose, onSettings: () => setSettings({ recommendedChange: null }), headerActions: HeaderActions }),
     actionLabel ? /* @__PURE__ */ jsxs8("div", { class: "scui-operation", role: "status", children: [
       /* @__PURE__ */ jsx9("i", {}),
       actionLabel
@@ -2531,7 +2534,7 @@ function Chat({ state, adapter, onBack, onNew, onClose, components, slots, label
     settings ? /* @__PURE__ */ jsx9(SettingsPanel, { state: actionState, adapter: trackedAdapter, value: state.interopSettings, recommendedChange: settings.recommendedChange, onClose: () => setSettings(null) }) : null
   ] });
 }
-function NewChat({ state, adapter, onBack, onClose, onStarted, labels, memoryKey }) {
+function NewChat({ state, adapter, onBack, onClose, onStarted, labels, memoryKey, headerActions: HeaderActions }) {
   const startable = state.harnesses.filter((item) => item.startable);
   const startableKey = startable.map((item) => `${item.id}:${item.launchModes?.join(",")}:${item.preferredLaunchMode ?? ""}`).join("\0");
   const remembered = newChatMemory.get(memoryKey) ?? { harness: startable[0]?.id ?? "", draft: "", context: [], images: [], modes: {} };
@@ -2648,6 +2651,7 @@ function NewChat({ state, adapter, onBack, onClose, onStarted, labels, memoryKey
         /* @__PURE__ */ jsx9("strong", { children: labels.newChat }),
         /* @__PURE__ */ jsx9("small", { children: "No session is created until you send" })
       ] }),
+      HeaderActions ? /* @__PURE__ */ jsx9(HeaderActions, { state, adapter, value: "new" }) : null,
       onClose ? /* @__PURE__ */ jsx9("button", { type: "button", "aria-label": "Close", onClick: onClose, children: /* @__PURE__ */ jsx9(UiIcon, { name: "close", size: 18 }) }) : null
     ] }),
     starting ? /* @__PURE__ */ jsxs8("div", { class: "scui-operation", role: "status", children: [
@@ -2751,12 +2755,13 @@ function SupercodeMessenger({ state: stateInput, adapter, class: className = "",
   };
   const close = () => adapter.onClose?.();
   const Footer = slots.footer;
+  const HeaderActions = slots.headerActions;
   return /* @__PURE__ */ jsxs8("main", { class: `scui-root ${className}`, "data-view": view, "data-mode": state.mode, "aria-label": "Supercode messenger", children: [
     view === "list" ? /* @__PURE__ */ jsx9(SessionList, { state, adapter, focusKey: listFocus, onOpen: open, onNew: () => {
       setListFocus("@new");
       setView("new");
-    }, onClose: adapter.onClose ? close : void 0, components, labels: copy, memoryKey }) : null,
-    view === "new" ? /* @__PURE__ */ jsx9(NewChat, { state, adapter, onBack: () => setView("list"), onClose: adapter.onClose ? close : void 0, onStarted: (mode) => setView(mode === "terminal" ? "list" : "chat"), labels: copy, memoryKey }) : null,
+    }, onClose: adapter.onClose ? close : void 0, components, labels: copy, memoryKey, headerActions: HeaderActions }) : null,
+    view === "new" ? /* @__PURE__ */ jsx9(NewChat, { state, adapter, onBack: () => setView("list"), onClose: adapter.onClose ? close : void 0, onStarted: (mode) => setView(mode === "terminal" ? "list" : "chat"), labels: copy, memoryKey, headerActions: HeaderActions }) : null,
     view === "chat" ? /* @__PURE__ */ jsx9(Chat, { state, adapter, onBack: () => {
       setListFocus(state.attached?.key ?? listFocus);
       setView("list");

package/index.d.ts

@@ -409,6 +409,8 @@ export interface MessengerComponents {
 
 export interface MessengerSlots {
   header?: ComponentType<ComponentOverrideProps>;
+  /** Add a compact consumer control to every default messenger header. `value` is the current view. */
+  headerActions?: ComponentType<ComponentOverrideProps<'list' | 'chat' | 'new'>>;
   emptyConversation?: ComponentType<ComponentOverrideProps>;
   beforeConversation?: ComponentType<ComponentOverrideProps>;
   afterConversation?: ComponentType<ComponentOverrideProps>;
@@ -466,7 +468,7 @@ export function HarnessSettingsPanel(props: HarnessSettingsPanelProps): VNode;
 export function SessionDetails(props: { semantics: SessionSemanticsModel }): VNode | null;
 export function Conversation(props: { state: SupercodeUiState; adapter: UiAdapter; components?: MessengerComponents; slots?: MessengerSlots; memoryKey?: string; pending?: string | PendingMessageModel | null; unreadAfterMessages?: number | null }): VNode;
 export function SessionRow(props: { row: SessionRowModel; state: SupercodeUiState; adapter: UiAdapter; now?: number; onOpen(row: SessionRowModel): void }): VNode;
-export function SessionList(props: { state: SupercodeUiState; adapter: UiAdapter; onOpen(row: SessionRowModel): void; onNew?(): void; onClose?(): void; components?: MessengerComponents; labels?: MessengerLabels; focusKey?: string | null; memoryKey?: string }): VNode;
+export function SessionList(props: { state: SupercodeUiState; adapter: UiAdapter; onOpen(row: SessionRowModel): void; onNew?(): void; onClose?(): void; components?: MessengerComponents; labels?: MessengerLabels; focusKey?: string | null; memoryKey?: string; headerActions?: MessengerSlots['headerActions'] }): VNode;
 export function ContinuationBar(props: { state: SupercodeUiState; adapter: UiAdapter; labels?: MessengerLabels }): VNode | null;
 export function Composer(props: { state: SupercodeUiState; adapter: UiAdapter; labels?: MessengerLabels; memoryKey?: string; pendingStatus?: PendingMessageModel['status'] | 'editing' | null; restoreDraft?: { id: string | number; text: string; context?: TranscriptContext[]; images?: TranscriptImage[] } | null; onPending?(text: string, context?: TranscriptContext[], images?: TranscriptImage[]): void; onDraftRestored?(id: string | number): void }): VNode;
 export function SupercodeMessenger(props: MessengerProps): VNode;

package/messenger.mjs

@@ -833,7 +833,7 @@ function activitySummary(entries) {
 function canContinueHere(state) {
   if (state.mode !== "mirror" || state.canSend) return false;
   const row = state.attached?.key ? state.sessions.find((item) => item.key === state.attached.key) : null;
-  return state.canResume && row?.runtimeStatus !== "running" && row?.runtimeStatus !== "busy" && row?.runtimeStatus !== "idle";
+  return Boolean(row) && state.canResume && row.runtimeStatus !== "running" && row.runtimeStatus !== "busy" && row.runtimeStatus !== "idle";
 }
 function operationLabel(operation) {
   if (!operation) return "";
@@ -2106,7 +2106,7 @@ function SessionRow({ row, state, onOpen, now = Date.now() }) {
     ] })
   ] });
 }
-function SessionList({ state, adapter, onOpen, onNew, onClose, components = {}, labels = DEFAULT_LABELS, focusKey = null, memoryKey = state.workspace || "@default" }) {
+function SessionList({ state, adapter, onOpen, onNew, onClose, components = {}, labels = DEFAULT_LABELS, focusKey = null, memoryKey = state.workspace || "@default", headerActions: HeaderActions }) {
   const remembered = sessionListMemory.get(memoryKey) ?? { query: "", top: 0 };
   const [query, setQuery] = useState4(remembered.query);
   const [loadingMore, setLoadingMore] = useState4(false);
@@ -2147,6 +2147,7 @@ function SessionList({ state, adapter, onOpen, onNew, onClose, components = {},
           " recent conversations"
         ] })
       ] }),
+      HeaderActions ? /* @__PURE__ */ jsx7(HeaderActions, { state, adapter, value: "list" }) : null,
       /* @__PURE__ */ jsx7("button", { type: "button", "data-list-focus": "new", "aria-label": labels.newChat, disabled: !state.harnesses.some((item) => item.startable), onClick: onNew, children: /* @__PURE__ */ jsx7(UiIcon, { name: "plus", size: 18 }) }),
       onClose ? /* @__PURE__ */ jsx7("button", { type: "button", "aria-label": "Close", onClick: onClose, children: /* @__PURE__ */ jsx7(UiIcon, { name: "close", size: 18 }) }) : null
     ] }),
@@ -2385,11 +2386,11 @@ function ConversationActions({ state, adapter, actionPending, onSettings }) {
     ] }, group.label)) }) : null
   ] });
 }
-function ChatHeader({ state, adapter, pendingStatus, actionPending, onBack, onNew, onClose, onSettings }) {
+function ChatHeader({ state, adapter, pendingStatus, actionPending, onBack, onNew, onClose, onSettings, headerActions: HeaderActions }) {
   const back = useRef7(null);
   const harness = state.attached?.harness ?? state.harness;
   const title = state.attached ? sessionDisplayName(state.attached) : harnessDisplayName(harness) || "Agent chat";
-  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 status = state.needsInput ? "Needs input" : pendingStatus === "failed" ? "Send failed" : state.busy ? "Working" : pendingStatus === "sending" ? "Sending" : pendingStatus === "editing" ? "Editing message" : state.messaging === "live_peer" ? "Live" : state.mode === "mirror" ? "Read-only" : "Ready";
   const menu = state.canDetach || state.canOpenTerminal || state.canBranch || state.canAttach || state.canExport || state.canReduce || state.interopSettings || state.interopSettingsError;
   useEffect8(() => {
     if (state.mode === "mirror" && !state.canSend) back.current?.focus({ preventScroll: true });
@@ -2405,6 +2406,7 @@ function ChatHeader({ state, adapter, pendingStatus, actionPending, onBack, onNe
         status
       ] })
     ] }),
+    HeaderActions ? /* @__PURE__ */ jsx9(HeaderActions, { state, adapter, value: "chat" }) : null,
     menu ? /* @__PURE__ */ jsx9(ConversationActions, { state, adapter, actionPending, onSettings }) : null,
     /* @__PURE__ */ jsx9("button", { type: "button", "aria-label": "New chat", onClick: onNew, children: /* @__PURE__ */ jsx9(UiIcon, { name: "plus", size: 18 }) }),
     onClose ? /* @__PURE__ */ jsx9("button", { type: "button", "aria-label": "Close", onClick: onClose, children: /* @__PURE__ */ jsx9(UiIcon, { name: "close", size: 18 }) }) : null
@@ -2412,6 +2414,7 @@ function ChatHeader({ state, adapter, pendingStatus, actionPending, onBack, onNe
 }
 function Chat({ state, adapter, onBack, onNew, onClose, components, slots, labels }) {
   const Header = slots.header;
+  const HeaderActions = slots.headerActions;
   const memoryKey = state.attached?.key || `${state.harness}:${state.workspace}`;
   const [pending, setPendingState] = useState6(() => pendingMessageMemory.get(memoryKey) ?? null);
   const [pendingAction, setPendingAction] = useState6(null);
@@ -2511,7 +2514,7 @@ function Chat({ state, adapter, onBack, onNew, onClose, components, slots, label
   const Advisory = components.HarnessAdvisory ?? HarnessAdvisory;
   const SettingsPanel = components.HarnessSettingsPanel ?? HarnessSettingsPanel;
   return /* @__PURE__ */ jsxs8("section", { class: "scui-chat", children: [
-    Header ? /* @__PURE__ */ jsx9(Header, { state: actionState, adapter: trackedAdapter, value: null }) : /* @__PURE__ */ jsx9(ChatHeader, { state: actionState, adapter: trackedAdapter, pendingStatus: pending?.status ?? null, actionPending: Boolean(action), onBack, onNew, onClose, onSettings: () => setSettings({ recommendedChange: null }) }),
+    Header ? /* @__PURE__ */ jsx9(Header, { state: actionState, adapter: trackedAdapter, value: null }) : /* @__PURE__ */ jsx9(ChatHeader, { state: actionState, adapter: trackedAdapter, pendingStatus: pending?.status ?? null, actionPending: Boolean(action), onBack, onNew, onClose, onSettings: () => setSettings({ recommendedChange: null }), headerActions: HeaderActions }),
     actionLabel ? /* @__PURE__ */ jsxs8("div", { class: "scui-operation", role: "status", children: [
       /* @__PURE__ */ jsx9("i", {}),
       actionLabel
@@ -2528,7 +2531,7 @@ function Chat({ state, adapter, onBack, onNew, onClose, components, slots, label
     settings ? /* @__PURE__ */ jsx9(SettingsPanel, { state: actionState, adapter: trackedAdapter, value: state.interopSettings, recommendedChange: settings.recommendedChange, onClose: () => setSettings(null) }) : null
   ] });
 }
-function NewChat({ state, adapter, onBack, onClose, onStarted, labels, memoryKey }) {
+function NewChat({ state, adapter, onBack, onClose, onStarted, labels, memoryKey, headerActions: HeaderActions }) {
   const startable = state.harnesses.filter((item) => item.startable);
   const startableKey = startable.map((item) => `${item.id}:${item.launchModes?.join(",")}:${item.preferredLaunchMode ?? ""}`).join("\0");
   const remembered = newChatMemory.get(memoryKey) ?? { harness: startable[0]?.id ?? "", draft: "", context: [], images: [], modes: {} };
@@ -2645,6 +2648,7 @@ function NewChat({ state, adapter, onBack, onClose, onStarted, labels, memoryKey
         /* @__PURE__ */ jsx9("strong", { children: labels.newChat }),
         /* @__PURE__ */ jsx9("small", { children: "No session is created until you send" })
       ] }),
+      HeaderActions ? /* @__PURE__ */ jsx9(HeaderActions, { state, adapter, value: "new" }) : null,
       onClose ? /* @__PURE__ */ jsx9("button", { type: "button", "aria-label": "Close", onClick: onClose, children: /* @__PURE__ */ jsx9(UiIcon, { name: "close", size: 18 }) }) : null
     ] }),
     starting ? /* @__PURE__ */ jsxs8("div", { class: "scui-operation", role: "status", children: [
@@ -2748,12 +2752,13 @@ function SupercodeMessenger({ state: stateInput, adapter, class: className = "",
   };
   const close = () => adapter.onClose?.();
   const Footer = slots.footer;
+  const HeaderActions = slots.headerActions;
   return /* @__PURE__ */ jsxs8("main", { class: `scui-root ${className}`, "data-view": view, "data-mode": state.mode, "aria-label": "Supercode messenger", children: [
     view === "list" ? /* @__PURE__ */ jsx9(SessionList, { state, adapter, focusKey: listFocus, onOpen: open, onNew: () => {
       setListFocus("@new");
       setView("new");
-    }, onClose: adapter.onClose ? close : void 0, components, labels: copy, memoryKey }) : null,
-    view === "new" ? /* @__PURE__ */ jsx9(NewChat, { state, adapter, onBack: () => setView("list"), onClose: adapter.onClose ? close : void 0, onStarted: (mode) => setView(mode === "terminal" ? "list" : "chat"), labels: copy, memoryKey }) : null,
+    }, onClose: adapter.onClose ? close : void 0, components, labels: copy, memoryKey, headerActions: HeaderActions }) : null,
+    view === "new" ? /* @__PURE__ */ jsx9(NewChat, { state, adapter, onBack: () => setView("list"), onClose: adapter.onClose ? close : void 0, onStarted: (mode) => setView(mode === "terminal" ? "list" : "chat"), labels: copy, memoryKey, headerActions: HeaderActions }) : null,
     view === "chat" ? /* @__PURE__ */ jsx9(Chat, { state, adapter, onBack: () => {
       setListFocus(state.attached?.key ?? listFocus);
       setView("list");

package/package.json

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

package/sessions.mjs

@@ -340,7 +340,7 @@ function SessionRow({ row, state, onOpen, now = Date.now() }) {
     ] })
   ] });
 }
-function SessionList({ state, adapter, onOpen, onNew, onClose, components = {}, labels = DEFAULT_LABELS, focusKey = null, memoryKey = state.workspace || "@default" }) {
+function SessionList({ state, adapter, onOpen, onNew, onClose, components = {}, labels = DEFAULT_LABELS, focusKey = null, memoryKey = state.workspace || "@default", headerActions: HeaderActions }) {
   const remembered = sessionListMemory.get(memoryKey) ?? { query: "", top: 0 };
   const [query, setQuery] = useState3(remembered.query);
   const [loadingMore, setLoadingMore] = useState3(false);
@@ -381,6 +381,7 @@ function SessionList({ state, adapter, onOpen, onNew, onClose, components = {},
           " recent conversations"
         ] })
       ] }),
+      HeaderActions ? /* @__PURE__ */ jsx6(HeaderActions, { state, adapter, value: "list" }) : null,
       /* @__PURE__ */ jsx6("button", { type: "button", "data-list-focus": "new", "aria-label": labels.newChat, disabled: !state.harnesses.some((item) => item.startable), onClick: onNew, children: /* @__PURE__ */ jsx6(UiIcon, { name: "plus", size: 18 }) }),
       onClose ? /* @__PURE__ */ jsx6("button", { type: "button", "aria-label": "Close", onClick: onClose, children: /* @__PURE__ */ jsx6(UiIcon, { name: "close", size: 18 }) }) : null
     ] }),