@volter-ai-dev/supercode-ui 0.1.55 → 0.1.56

package/components.mjs

@@ -2314,7 +2314,7 @@ function Conversation({ state, adapter, components = {}, slots = {}, memoryKey =
 }
 
 // src/messenger.jsx
-import { useEffect as useEffect8, useId as useId3, useMemo as useMemo3, useRef as useRef7, useState as useState6 } from "preact/hooks";
+import { useEffect as useEffect9, useId as useId3, useMemo as useMemo3, useRef as useRef8, useState as useState7 } from "preact/hooks";
 
 // src/sessions.jsx
 import { useEffect as useEffect6, useLayoutEffect as useLayoutEffect3, useRef as useRef5, useState as useState4 } from "preact/hooks";
@@ -2448,11 +2448,53 @@ function SessionList({ state, adapter, onOpen, onOpenSubagents, onNew, onClose,
 }
 
 // src/subagents.jsx
+import { useEffect as useEffect7, useRef as useRef6, useState as useState5 } from "preact/hooks";
 import { jsx as jsx9, jsxs as jsxs8 } from "preact/jsx-runtime";
-function SubagentInspector({ state, adapter, onClose }) {
-  const inspector = state.subagentInspector;
-  if (!inspector) return null;
+var ATTENTION_ACTIVITY = /* @__PURE__ */ new Set(["needs-input", "failed", "unseen"]);
+var ACTIVE_ACTIVITY = /* @__PURE__ */ new Set(["working", "running", "recent"]);
+function activityLabel(activity, age) {
+  if (activity === "needs-input") return "Needs input";
+  if (activity === "failed") return "Failed";
+  if (activity === "unseen") return "New update";
+  if (activity === "working") return "Working";
+  if (activity === "running") return "Running";
+  if (activity === "recent") return "Recent";
+  if (activity === "finished") return "Finished";
+  return age;
+}
+function SubagentRow({ row, inspector, adapter }) {
+  return /* @__PURE__ */ jsxs8("button", { className: "scui-subagent-row", type: "button", "data-activity": row.activity ?? "idle", onClick: () => adapter.onIntent({ action: "openSubagent", parentKey: inspector.parentKey, key: row.key }), children: [
+    /* @__PURE__ */ jsx9(HarnessLogo, { id: row.harness, activity: row.activity, size: 30 }),
+    /* @__PURE__ */ jsxs8("span", { children: [
+      /* @__PURE__ */ jsx9("strong", { children: sessionDisplayName(row) }),
+      /* @__PURE__ */ jsx9("small", { children: row.preview || (row.activity === "working" ? "Working\u2026" : row.cwd) })
+    ] }),
+    /* @__PURE__ */ jsxs8("span", { children: [
+      /* @__PURE__ */ jsx9("small", { children: activityLabel(row.activity, row.age) }),
+      /* @__PURE__ */ jsx9(UiIcon, { name: "chevron", size: 14 })
+    ] })
+  ] });
+}
+function SubagentSection({ label, rows, inspector, adapter }) {
+  if (!rows.length) return null;
+  return /* @__PURE__ */ jsxs8("section", { className: "scui-subagent-section", "aria-labelledby": `scui-subagents-${label.toLowerCase().replaceAll(" ", "-")}`, children: [
+    /* @__PURE__ */ jsx9("h2", { id: `scui-subagents-${label.toLowerCase().replaceAll(" ", "-")}`, children: label }),
+    rows.map((row) => /* @__PURE__ */ jsx9(SubagentRow, { row, inspector, adapter }, row.key))
+  ] });
+}
+function SubagentInspectorContent({ state, adapter, onClose, inspector }) {
   const selected = inspector.items.find((row) => row.key === inspector.selectedKey) ?? null;
+  const attention = inspector.items.filter((row) => ATTENTION_ACTIVITY.has(row.activity));
+  const active = inspector.items.filter((row) => ACTIVE_ACTIVITY.has(row.activity));
+  const finished = inspector.items.filter((row) => !ATTENTION_ACTIVITY.has(row.activity) && !ACTIVE_ACTIVITY.has(row.activity));
+  const [finishedOpen, setFinishedOpen] = useState5(false);
+  const backButton = useRef6(null);
+  useEffect7(() => {
+    if (inspector.status === "ready" && !attention.length && !active.length) setFinishedOpen(true);
+  }, [inspector.parentKey, inspector.status]);
+  useEffect7(() => {
+    backButton.current?.focus({ preventScroll: true });
+  }, [selected?.key]);
   const detailState = selected ? {
     ...state,
     transcript: inspector.transcript,
@@ -2473,15 +2515,14 @@ function SubagentInspector({ state, adapter, onClose }) {
     onClose();
   };
   const back = () => selected ? adapter.onIntent({ action: "openSubagents", key: inspector.parentKey }) : leave();
-  return /* @__PURE__ */ jsxs8("section", { className: "scui-subagents", "aria-label": `Subagents for ${inspector.parentTitle}`, children: [
+  return /* @__PURE__ */ jsxs8("section", { className: "scui-subagents", "aria-label": `Agents for ${inspector.parentTitle}`, children: [
     /* @__PURE__ */ jsxs8("header", { className: "scui-head", children: [
-      /* @__PURE__ */ jsx9("button", { type: "button", "aria-label": selected ? "Back to subagents" : "Back to chats", onClick: back, children: /* @__PURE__ */ jsx9(UiIcon, { name: "back", size: 17 }) }),
-      /* @__PURE__ */ jsx9(UiIcon, { name: "agents", size: 20 }),
+      /* @__PURE__ */ jsx9("button", { ref: backButton, type: "button", "aria-label": selected ? "Back to agents" : "Back to chats", onClick: back, children: /* @__PURE__ */ jsx9(UiIcon, { name: "back", size: 17 }) }),
+      selected ? /* @__PURE__ */ jsx9(HarnessLogo, { id: selected.harness, activity: selected.activity, size: 24 }) : /* @__PURE__ */ jsx9(UiIcon, { name: "agents", size: 20 }),
       /* @__PURE__ */ jsxs8("span", { className: "scui-head-copy", children: [
         /* @__PURE__ */ jsx9("strong", { children: selected ? sessionDisplayName(selected) : `${inspector.items.length || ""} ${inspector.items.length === 1 ? "agent" : "agents"}`.trim() }),
         /* @__PURE__ */ jsx9("small", { children: selected ? `${harnessDisplayName(selected.harness)} \xB7 Read-only` : inspector.parentTitle })
-      ] }),
-      /* @__PURE__ */ jsx9("button", { type: "button", "aria-label": "Close subagent inspector", onClick: leave, children: /* @__PURE__ */ jsx9(UiIcon, { name: "close", size: 18 }) })
+      ] })
     ] }),
     inspector.status === "loading" ? /* @__PURE__ */ jsxs8("div", { className: "scui-subagents-loading", role: "status", children: [
       /* @__PURE__ */ jsx9("i", {}),
@@ -2491,24 +2532,29 @@ function SubagentInspector({ state, adapter, onClose }) {
       ] })
     ] }) : null,
     inspector.error ? /* @__PURE__ */ jsx9("div", { className: "scui-error", role: "alert", children: inspector.error }) : null,
-    !selected && inspector.status === "ready" ? /* @__PURE__ */ jsx9("div", { className: "scui-subagent-rows", children: inspector.items.map((row) => /* @__PURE__ */ jsxs8("button", { type: "button", "data-activity": row.activity ?? "idle", onClick: () => adapter.onIntent({ action: "openSubagent", parentKey: inspector.parentKey, key: row.key }), children: [
-      /* @__PURE__ */ jsx9(HarnessLogo, { id: row.harness, activity: row.activity, size: 30 }),
-      /* @__PURE__ */ jsxs8("span", { children: [
-        /* @__PURE__ */ jsx9("strong", { children: sessionDisplayName(row) }),
-        /* @__PURE__ */ jsx9("small", { children: row.preview || (row.activity === "working" ? "Working\u2026" : row.cwd) })
-      ] }),
-      /* @__PURE__ */ jsxs8("span", { children: [
-        /* @__PURE__ */ jsx9("small", { children: row.activity === "needs-input" ? "Needs input" : row.activity === "working" ? "Working" : row.age }),
-        /* @__PURE__ */ jsx9(UiIcon, { name: "chevron", size: 14 })
-      ] })
-    ] }, row.key)) }) : null,
+    !selected && inspector.status === "ready" && inspector.items.length ? /* @__PURE__ */ jsxs8("div", { className: "scui-subagent-rows", children: [
+      /* @__PURE__ */ jsx9(SubagentSection, { label: "Needs attention", rows: attention, inspector, adapter }),
+      /* @__PURE__ */ jsx9(SubagentSection, { label: "Active", rows: active, inspector, adapter }),
+      finished.length ? /* @__PURE__ */ jsxs8("details", { className: "scui-subagent-history", open: finishedOpen, onToggle: (event) => setFinishedOpen(event.currentTarget.open), children: [
+        /* @__PURE__ */ jsxs8("summary", { children: [
+          /* @__PURE__ */ jsx9("span", { children: "Finished" }),
+          /* @__PURE__ */ jsx9("small", { children: finished.length }),
+          /* @__PURE__ */ jsx9(UiIcon, { name: "chevron", size: 14 })
+        ] }),
+        /* @__PURE__ */ jsx9("div", { children: finished.map((row) => /* @__PURE__ */ jsx9(SubagentRow, { row, inspector, adapter }, row.key)) })
+      ] }) : null
+    ] }) : null,
     !selected && inspector.status === "ready" && !inspector.items.length ? /* @__PURE__ */ jsx9("div", { className: "scui-empty", children: "No native child sessions were found." }) : null,
     selected && inspector.status === "ready" && detailState ? /* @__PURE__ */ jsx9(Conversation, { state: detailState, adapter, memoryKey: `subagent:${selected.key}` }) : null
   ] });
 }
+function SubagentInspector({ state, adapter, onClose }) {
+  if (!state.subagentInspector) return null;
+  return /* @__PURE__ */ jsx9(SubagentInspectorContent, { state, adapter, onClose, inspector: state.subagentInspector });
+}
 
 // src/settings.jsx
-import { useEffect as useEffect7, useId as useId2, useMemo as useMemo2, useRef as useRef6, useState as useState5 } from "preact/hooks";
+import { useEffect as useEffect8, useId as useId2, useMemo as useMemo2, useRef as useRef7, useState as useState6 } from "preact/hooks";
 import { jsx as jsx10, jsxs as jsxs9 } from "preact/jsx-runtime";
 function HarnessAdvisory({ state, onReview }) {
   const advisory = state.interopSettings?.advisories[0];
@@ -2531,12 +2577,12 @@ function initialValues(report, recommendedChange) {
 function HarnessSettingsPanel({ state, adapter, onClose, recommendedChange = null }) {
   const report = state.interopSettings;
   const titleId = useId2();
-  const panel = useRef6(null);
+  const panel = useRef7(null);
   const valuesKey = `${report?.revision ?? ""}:${recommendedChange?.key ?? ""}:${recommendedChange?.value ?? ""}`;
   const defaults = useMemo2(() => report ? initialValues(report, recommendedChange) : {}, [valuesKey]);
-  const [values, setValues] = useState5(defaults);
-  useEffect7(() => setValues(defaults), [defaults]);
-  useEffect7(() => {
+  const [values, setValues] = useState6(defaults);
+  useEffect8(() => setValues(defaults), [defaults]);
+  useEffect8(() => {
     panel.current?.querySelector("select, button")?.focus({ preventScroll: true });
     const dismiss = (event) => {
       if (event.key === "Escape") {
@@ -2624,11 +2670,11 @@ function HarnessReadiness({ harnesses, adapter }) {
   ] });
 }
 function HarnessPicker({ harnesses, value, disabled = false, adapter, onChange, logo: Logo = HarnessLogo }) {
-  const [open, setOpen] = useState5(false);
+  const [open, setOpen] = useState6(false);
   const menuId = useId2();
-  const root = useRef6(null);
-  const trigger = useRef6(null);
-  const panel = useRef6(null);
+  const root = useRef7(null);
+  const trigger = useRef7(null);
+  const panel = useRef7(null);
   const available = harnesses.filter((item) => item.startable);
   const unavailable = harnesses.filter((item) => !item.startable);
   const selected = available.find((item) => item.id === value) ?? available[0] ?? null;
@@ -2636,7 +2682,7 @@ function HarnessPicker({ harnesses, value, disabled = false, adapter, onChange,
     setOpen(false);
     trigger.current?.focus({ preventScroll: true });
   };
-  useEffect7(() => {
+  useEffect8(() => {
     if (!open) return;
     panel.current?.querySelector('[aria-selected="true"], [role="option"]')?.focus({ preventScroll: true });
     const dismiss = (event) => {
@@ -2698,7 +2744,7 @@ function HarnessPicker({ harnesses, value, disabled = false, adapter, onChange,
 }
 
 // src/messenger.jsx
-import { jsx as jsx11, jsxs as jsxs10 } from "preact/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx11, jsxs as jsxs10 } from "preact/jsx-runtime";
 var pendingMessageMemory = /* @__PURE__ */ new Map();
 var messengerViewMemory = /* @__PURE__ */ new Map();
 var newChatMemory = /* @__PURE__ */ new Map();
@@ -2741,10 +2787,10 @@ function Receipt({ state, adapter }) {
   return null;
 }
 function ConversationActions({ state, adapter, actionPending, onNew, onSettings }) {
-  const [open, setOpen] = useState6(false);
-  const root = useRef7(null);
-  const panel = useRef7(null);
-  const trigger = useRef7(null);
+  const [open, setOpen] = useState7(false);
+  const root = useRef8(null);
+  const panel = useRef8(null);
+  const trigger = useRef8(null);
   const menuId = useId3();
   const targets = state.harnesses.filter((item) => item.startable);
   const groups = [
@@ -2768,7 +2814,7 @@ function ConversationActions({ state, adapter, actionPending, onNew, onSettings
       items: state.canBranch ? targets.map((target) => ({ key: `branch:${target.id}`, label: target.id === state.harness ? `Fork in ${target.label}` : `Continue with ${target.label}`, intent: { action: "branch", targetHarness: target.id } })) : []
     }
   ].filter((group) => group.items.length);
-  useEffect8(() => {
+  useEffect9(() => {
     if (!open) return;
     panel.current?.querySelector("button:not(:disabled)")?.focus({ preventScroll: true });
     const dismiss = (event) => {
@@ -2819,11 +2865,11 @@ function ConversationActions({ state, adapter, actionPending, onNew, onSettings
   ] });
 }
 function ChatHeader({ state, adapter, pendingStatus, actionPending, onBack, onNew, onClose, onSettings, headerActions: HeaderActions }) {
-  const back = useRef7(null);
+  const back = useRef8(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.messaging === "live_peer" ? "Live" : state.mode === "mirror" ? "Read-only" : "Ready";
-  useEffect8(() => {
+  useEffect9(() => {
     if (state.mode === "mirror" && !state.canSend) back.current?.focus({ preventScroll: true });
   }, []);
   return /* @__PURE__ */ jsxs10("header", { className: "scui-head scui-chat-head", children: [
@@ -2846,26 +2892,26 @@ function Chat({ state, adapter, onBack, onNew, onClose, components, slots, label
   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);
-  const [restoreDraft, setRestoreDraft] = useState6(null);
-  const [settings, setSettings] = useState6(null);
-  const restoreSequence = useRef7(0);
-  const actionSequence = useRef7(0);
-  const lastNavigation = useRef7(null);
-  const acknowledged = useRef7(/* @__PURE__ */ new Set());
+  const [pending, setPendingState] = useState7(() => pendingMessageMemory.get(memoryKey) ?? null);
+  const [pendingAction, setPendingAction] = useState7(null);
+  const [restoreDraft, setRestoreDraft] = useState7(null);
+  const [settings, setSettings] = useState7(null);
+  const restoreSequence = useRef8(0);
+  const actionSequence = useRef8(0);
+  const lastNavigation = useRef8(null);
+  const acknowledged = useRef8(/* @__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;
   });
-  useEffect8(() => {
+  useEffect9(() => {
     setPendingState(pendingMessageMemory.get(memoryKey) ?? null);
     setPendingAction(null);
     setRestoreDraft(null);
   }, [memoryKey]);
-  useEffect8(() => {
+  useEffect9(() => {
     if (!navigation || navigation.id === lastNavigation.current) return;
     lastNavigation.current = navigation.id;
     if (navigation.draft === void 0 && !navigation.context?.length && !navigation.images?.length) return;
@@ -2876,7 +2922,7 @@ function Chat({ state, adapter, onBack, onNew, onClose, components, slots, label
       images: navigation.images
     });
   }, [navigation]);
-  useEffect8(() => {
+  useEffect9(() => {
     if (!pending) return;
     if (state.transcript.some((entry) => entry.role === "user" && entry.text.trim() === pending.text.trim() && !pending.baselineIds.includes(entry.id))) {
       setPending(null);
@@ -2905,7 +2951,7 @@ function Chat({ state, adapter, onBack, onNew, onClose, components, slots, label
     setRestoreDraft({ id: restoreSequence.current, text: pending.text, context: pending.context, images: pending.images });
     setPending({ ...pending, status: "editing" });
   };
-  useEffect8(() => {
+  useEffect9(() => {
     const key = state.attached?.key;
     if (!key || !state.attention.some((item) => item.key === key)) {
       if (key) acknowledged.current.delete(key);
@@ -2940,7 +2986,7 @@ function Chat({ state, adapter, onBack, onNew, onClose, components, slots, label
       return result;
     }
   }), [adapter, state.error]);
-  useEffect8(() => {
+  useEffect9(() => {
     if (!pendingAction) return;
     if (state.operation && !pendingAction.seenOperation) {
       setPendingAction({ ...pendingAction, seenOperation: true });
@@ -2977,18 +3023,18 @@ function NewChat({ state, adapter, onBack, onClose, onStarted, labels, memoryKey
   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: {} };
-  const [harness, setHarness] = useState6(remembered.harness);
-  const [draft, setDraft] = useState6(remembered.draft);
-  const [context, setContext] = useState6(remembered.context);
-  const [images, setImages] = useState6(remembered.images ?? []);
-  const [modes, setModes] = useState6(remembered.modes ?? {});
-  const [starting, setStarting] = useState6(null);
-  const [picking, setPicking] = useState6(false);
-  const [dragging, setDragging] = useState6(false);
-  const [pickerError, setPickerError] = useState6(null);
-  const startSequence = useRef7(0);
-  const lastComposerCommand = useRef7(null);
-  const textarea = useRef7(null);
+  const [harness, setHarness] = useState7(remembered.harness);
+  const [draft, setDraft] = useState7(remembered.draft);
+  const [context, setContext] = useState7(remembered.context);
+  const [images, setImages] = useState7(remembered.images ?? []);
+  const [modes, setModes] = useState7(remembered.modes ?? {});
+  const [starting, setStarting] = useState7(null);
+  const [picking, setPicking] = useState7(false);
+  const [dragging, setDragging] = useState7(false);
+  const [pickerError, setPickerError] = useState7(null);
+  const startSequence = useRef8(0);
+  const lastComposerCommand = useRef8(null);
+  const textarea = useRef8(null);
   const selectedHarness = startable.find((item) => item.id === harness) ?? null;
   const Picker = components.HarnessPicker ?? HarnessPicker;
   const Readiness = components.HarnessReadiness ?? HarnessReadiness;
@@ -2999,13 +3045,13 @@ function NewChat({ state, adapter, onBack, onClose, onStarted, labels, memoryKey
   const terminalAttachments = mode === "terminal" && (context.length > 0 || images.length > 0);
   const remember = (overrides = {}) => boundedSet(newChatMemory, memoryKey, { harness, draft, context, images, modes, ...overrides });
   useAutosizeTextarea(textarea, draft);
-  useEffect8(() => {
+  useEffect9(() => {
     if (startable.some((item) => item.id === harness)) return;
     const next = startable[0]?.id ?? "";
     setHarness(next);
     remember({ harness: next });
   }, [harness, startableKey]);
-  useEffect8(() => {
+  useEffect9(() => {
     if (!starting || starting.mode === "terminal") return;
     const sessionChanged = (state.attached?.key ?? null) !== starting.attachedKey;
     const beganWorking = !starting.busy && state.busy;
@@ -3013,13 +3059,13 @@ function NewChat({ state, adapter, onBack, onClose, onStarted, labels, memoryKey
     newChatMemory.delete(memoryKey);
     onStarted("headless");
   }, [memoryKey, onStarted, starting, state.attached?.key, state.busy]);
-  useEffect8(() => {
+  useEffect9(() => {
     if (starting && state.error !== starting.initialError && !state.busy && !state.operation) setStarting(null);
   }, [starting, state.busy, state.error, state.operation]);
-  useEffect8(() => {
+  useEffect9(() => {
     textarea.current?.focus({ preventScroll: true });
   }, []);
-  useEffect8(() => {
+  useEffect9(() => {
     if (!navigation) return;
     const nextHarness = startable.some((item) => item.id === navigation.harness) ? navigation.harness : harness;
     const nextDraft = typeof navigation.draft === "string" ? navigation.draft : draft;
@@ -3032,7 +3078,7 @@ function NewChat({ state, adapter, onBack, onClose, onStarted, labels, memoryKey
     remember({ harness: nextHarness, draft: nextDraft, context: nextContext, images: nextImages });
     textarea.current?.focus({ preventScroll: true });
   }, [navigation?.id]);
-  useEffect8(() => {
+  useEffect9(() => {
     if (!composerCommand || composerCommand.id === lastComposerCommand.current) return;
     lastComposerCommand.current = composerCommand.id;
     if (composerCommand.action === "attach") {
@@ -3209,19 +3255,19 @@ function SupercodeMessenger({ state: stateInput, adapter, class: className = "",
   const contextCandidates = useMemo3(() => normalizeAttachmentCandidates(candidatesInput), [candidatesInput]);
   const copy = { ...DEFAULT_LABELS, ...labels };
   const memoryKey = state.workspace || "@default";
-  const [view, setViewState] = useState6(initialView ?? (state.attention.length ? "list" : messengerViewMemory.get(memoryKey) ?? (state.attached || state.transcript.length ? "chat" : "list")));
-  const [opening, setOpening] = useState6(null);
-  const [newNavigation, setNewNavigation] = useState6(null);
-  const [chatNavigation, setChatNavigation] = useState6(null);
-  const [listFocus, setListFocus] = useState6(null);
-  const [inspecting, setInspecting] = useState6(null);
-  const lastNavigation = useRef7(null);
+  const [view, setViewState] = useState7(initialView ?? (state.attention.length ? "list" : messengerViewMemory.get(memoryKey) ?? (state.attached || state.transcript.length ? "chat" : "list")));
+  const [opening, setOpening] = useState7(null);
+  const [newNavigation, setNewNavigation] = useState7(null);
+  const [chatNavigation, setChatNavigation] = useState7(null);
+  const [listFocus, setListFocus] = useState7(null);
+  const [inspecting, setInspecting] = useState7(null);
+  const lastNavigation = useRef8(null);
   const setView = (next) => {
     boundedSet(messengerViewMemory, memoryKey, next);
     setViewState(next);
     onViewChange?.(next);
   };
-  useEffect8(() => {
+  useEffect9(() => {
     if (!navigation || navigation.id === lastNavigation.current) return;
     lastNavigation.current = navigation.id;
     if (navigation.view === "list") {
@@ -3251,7 +3297,7 @@ function SupercodeMessenger({ state: stateInput, adapter, class: className = "",
       adapter.onIntent({ action: "attach", key: navigation.sessionKey });
     }
   }, [adapter, navigation, state.attached?.key, state.sessions]);
-  useEffect8(() => {
+  useEffect9(() => {
     if (!opening) return;
     if (state.attached?.key === opening.key) {
       setOpening(null);
@@ -3279,35 +3325,36 @@ function SupercodeMessenger({ state: stateInput, adapter, class: className = "",
     ...state,
     subagentInspector: state.subagentInspector?.parentKey === inspectorParent.key ? state.subagentInspector : { parentKey: inspectorParent.key, parentTitle: sessionDisplayName(inspectorParent), status: "loading", items: [], selectedKey: null, transcript: [], error: null }
   } : null;
-  return /* @__PURE__ */ jsxs10("main", { className: `scui-root ${className}`, "data-view": view, "data-mode": state.mode, "aria-label": "Supercode messenger", children: [
-    view === "list" ? /* @__PURE__ */ jsx11(SessionList, { state, adapter, focusKey: listFocus, onOpen: open, onOpenSubagents: openSubagents, onNew: () => {
-      setListFocus("@new");
-      setChatNavigation(null);
-      setNewNavigation(null);
-      setView("new");
-    }, onClose: adapter.onClose ? close : void 0, components, labels: copy, memoryKey, slots, headerActions: HeaderActions }) : null,
-    view === "new" ? /* @__PURE__ */ jsx11(NewChat, { state, adapter, onBack: () => setView("list"), onClose: adapter.onClose ? close : void 0, onStarted: (mode) => setView(mode === "terminal" ? "list" : "chat"), labels: copy, memoryKey, headerActions: HeaderActions, contextCandidates, components, navigation: newNavigation, composerCommand }) : null,
-    view === "chat" ? /* @__PURE__ */ jsx11(Chat, { state, adapter, onBack: () => {
-      setListFocus(state.attached?.key ?? listFocus);
-      setView("list");
-    }, onNew: () => {
-      setListFocus("@new");
-      setChatNavigation(null);
-      setNewNavigation(null);
-      setView("new");
-    }, onClose: adapter.onClose ? close : void 0, components, slots, labels: copy, contextCandidates, navigation: chatNavigation?.sessionKey === state.attached?.key ? chatNavigation : null, composerCommand }) : null,
-    opening ? /* @__PURE__ */ jsxs10("div", { className: "scui-opening", role: "status", "aria-busy": "true", children: [
-      /* @__PURE__ */ jsx11(HarnessLogo, { id: opening.harness, size: 34 }),
-      /* @__PURE__ */ jsxs10("span", { children: [
-        /* @__PURE__ */ jsxs10("strong", { children: [
-          "Opening ",
-          sessionDisplayName(opening)
+  return /* @__PURE__ */ jsxs10("main", { className: `scui-root ${className}`, "data-view": inspectorState ? "agents" : view, "data-mode": state.mode, "aria-label": "Supercode messenger", children: [
+    inspectorState ? /* @__PURE__ */ jsx11(SubagentInspector, { state: inspectorState, adapter, onClose: () => setInspecting(null) }) : /* @__PURE__ */ jsxs10(Fragment5, { children: [
+      view === "list" ? /* @__PURE__ */ jsx11(SessionList, { state, adapter, focusKey: listFocus, onOpen: open, onOpenSubagents: openSubagents, onNew: () => {
+        setListFocus("@new");
+        setChatNavigation(null);
+        setNewNavigation(null);
+        setView("new");
+      }, onClose: adapter.onClose ? close : void 0, components, labels: copy, memoryKey, slots, headerActions: HeaderActions }) : null,
+      view === "new" ? /* @__PURE__ */ jsx11(NewChat, { state, adapter, onBack: () => setView("list"), onClose: adapter.onClose ? close : void 0, onStarted: (mode) => setView(mode === "terminal" ? "list" : "chat"), labels: copy, memoryKey, headerActions: HeaderActions, contextCandidates, components, navigation: newNavigation, composerCommand }) : null,
+      view === "chat" ? /* @__PURE__ */ jsx11(Chat, { state, adapter, onBack: () => {
+        setListFocus(state.attached?.key ?? listFocus);
+        setView("list");
+      }, onNew: () => {
+        setListFocus("@new");
+        setChatNavigation(null);
+        setNewNavigation(null);
+        setView("new");
+      }, onClose: adapter.onClose ? close : void 0, components, slots, labels: copy, contextCandidates, navigation: chatNavigation?.sessionKey === state.attached?.key ? chatNavigation : null, composerCommand }) : null,
+      opening ? /* @__PURE__ */ jsxs10("div", { className: "scui-opening", role: "status", "aria-busy": "true", children: [
+        /* @__PURE__ */ jsx11(HarnessLogo, { id: opening.harness, size: 34 }),
+        /* @__PURE__ */ jsxs10("span", { children: [
+          /* @__PURE__ */ jsxs10("strong", { children: [
+            "Opening ",
+            sessionDisplayName(opening)
+          ] }),
+          /* @__PURE__ */ jsx11("small", { children: "Loading the latest transcript window\u2026" })
         ] }),
-        /* @__PURE__ */ jsx11("small", { children: "Loading the latest transcript window\u2026" })
-      ] }),
-      /* @__PURE__ */ jsx11("i", {})
-    ] }) : null,
-    inspectorState ? /* @__PURE__ */ jsx11(SubagentInspector, { state: inspectorState, adapter, onClose: () => setInspecting(null) }) : null,
+        /* @__PURE__ */ jsx11("i", {})
+      ] }) : null
+    ] }),
     Footer ? /* @__PURE__ */ jsx11(Footer, { state, adapter, value: copy }) : null
   ] });
 }