@volter-ai-dev/supercode-ui 0.1.70 → 0.1.72

package/react/chunks/chunk-QL6QEYPK.mjs

@@ -0,0 +1,842 @@
+import {
+  HarnessAdvisory,
+  HarnessPicker,
+  HarnessReadiness,
+  HarnessSettingsPanel
+} from "./chunk-YK7SJ6EH.mjs";
+import {
+  SessionList
+} from "./chunk-NJC6S2AW.mjs";
+import {
+  SubagentInspector
+} from "./chunk-UGL6AB2K.mjs";
+import {
+  HarnessLogo
+} from "./chunk-VFOVJ4S3.mjs";
+import {
+  Conversation
+} from "./chunk-UKMTRNJN.mjs";
+import {
+  Composer,
+  ContinuationBar,
+  ExecutionModeSelect,
+  dispatchConfirmedIntent,
+  useAutosizeTextarea
+} from "./chunk-7ES5FSLG.mjs";
+import {
+  ContextCandidates,
+  ContextTray,
+  ImageTray,
+  MAX_CONTEXT_ITEMS,
+  MAX_IMAGE_ITEMS,
+  boundedSet,
+  imageAttachmentsFromFiles,
+  mergeContext,
+  mergeImages,
+  normalizeAttachmentCandidates,
+  partitionAttachments,
+  uiMemory
+} from "./chunk-UKHDCPME.mjs";
+import {
+  DEFAULT_LABELS,
+  harnessDisplayName,
+  isSendKey,
+  normalizeUiState,
+  operationLabel,
+  sessionDisplayName,
+  terminalCommand
+} from "./chunk-LS6JBXNT.mjs";
+import {
+  UiIcon
+} from "./chunk-OINC7LV7.mjs";
+
+// src/messenger.jsx
+import { createContext } from "react";
+import { useContext, useEffect, useId, useMemo, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var pendingMessageMemory = uiMemory();
+var messengerViewMemory = uiMemory();
+var newChatMemory = uiMemory();
+var TRACKED_ACTIONS = /* @__PURE__ */ new Set(["resume", "join", "detach", "branch", "reduce", "terminal", "export", "steer", "interrupt", "respond", "configureHarness", "refresh", "loadEarlier", "loadSessions"]);
+function UniversalNouns({ state, adapter }) {
+  const banners = [];
+  if (state.participant && state.participant.kind !== "local-user") {
+    banners.push(
+      /* @__PURE__ */ jsx("div", { className: "scui-notice scui-noun-banner", "data-noun": "participant", "data-kind": state.participant.kind, children: state.participant.kind === "foreign" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        "This is ",
+        /* @__PURE__ */ jsx("strong", { children: state.participant.label ?? "someone else's" }),
+        " conversation",
+        state.participant.origin ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          " via ",
+          state.participant.origin
+        ] }) : null,
+        "."
+      ] }) : /* @__PURE__ */ jsx(Fragment, { children: "Unknown participant \u2014 this conversation was not started here." }) }, "participant")
+    );
+  }
+  if (state.mirror) {
+    banners.push(
+      /* @__PURE__ */ jsxs("div", { className: "scui-notice scui-noun-banner", "data-noun": "mirror", "data-truncated": state.mirror.truncated, children: [
+        state.mirror.bounded ? "Bounded mirror" : "Mirror",
+        " of a ",
+        /* @__PURE__ */ jsx("strong", { children: harnessDisplayName(state.mirror.canonicalHarness) }),
+        " session \u2014 the canonical record lives in its own store",
+        state.mirror.truncated ? " (truncated here)" : "",
+        ".",
+        state.mirror.canonicalKey ? /* @__PURE__ */ jsx("button", { type: "button", onClick: () => adapter.onIntent({ action: "open_session", key: state.mirror.canonicalKey }), children: "Open canonical session" }) : null
+      ] }, "mirror")
+    );
+  }
+  if (state.holder && state.holder.surface !== "supercode") {
+    banners.push(
+      /* @__PURE__ */ jsxs("div", { className: "scui-notice scui-noun-banner", "data-noun": "holder", "data-surface": state.holder.surface ?? "unheld", children: [
+        state.holder.surface ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          "Held by ",
+          /* @__PURE__ */ jsx("strong", { children: state.holder.surface }),
+          " right now."
+        ] }) : /* @__PURE__ */ jsx(Fragment, { children: "No surface holds this session right now." }),
+        state.holder.canTakeOver ? /* @__PURE__ */ jsx("button", { type: "button", onClick: () => dispatchConfirmedIntent(adapter, { action: "take_over" }), children: "Take over" }) : null
+      ] }, "holder")
+    );
+  }
+  if (!banners.length) return null;
+  return /* @__PURE__ */ jsx("div", { className: "scui-noun-banners", children: banners });
+}
+function Receipt({ state, adapter }) {
+  const receipt = state.reductionReceipt;
+  if (receipt) return /* @__PURE__ */ jsx("div", { className: "scui-receipt", children: /* @__PURE__ */ jsxs("span", { children: [
+    /* @__PURE__ */ jsx("strong", { children: "Reduced and verified" }),
+    /* @__PURE__ */ jsxs("small", { children: [
+      receipt.sourceTokens.toLocaleString(),
+      " \u2192 ",
+      receipt.reducedTokens.toLocaleString(),
+      " tokens \xB7 ",
+      receipt.ratio.toFixed(1),
+      "\xD7 \xB7 reversible"
+    ] })
+  ] }) });
+  if (state.exportReceipt) return /* @__PURE__ */ jsxs("div", { className: "scui-receipt", children: [
+    /* @__PURE__ */ jsxs("span", { children: [
+      /* @__PURE__ */ jsxs("strong", { children: [
+        "Lossless export ready \xB7 ",
+        harnessDisplayName(state.exportReceipt.targetHarness)
+      ] }),
+      /* @__PURE__ */ jsxs("small", { children: [
+        state.exportReceipt.path,
+        " \xB7 ",
+        state.exportReceipt.files,
+        " files"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("button", { type: "button", onClick: () => adapter.copyText?.(state.exportReceipt.path), children: "Copy path" })
+  ] });
+  if (state.terminalHandoff) return /* @__PURE__ */ jsxs("div", { className: "scui-receipt", children: [
+    /* @__PURE__ */ jsxs("span", { children: [
+      /* @__PURE__ */ jsx("strong", { children: "Terminal handoff ready" }),
+      /* @__PURE__ */ jsx("small", { children: state.terminalHandoff.cwd })
+    ] }),
+    /* @__PURE__ */ jsx("button", { type: "button", onClick: () => adapter.copyText?.(terminalCommand(state.terminalHandoff)), children: "Copy command" })
+  ] });
+  return null;
+}
+function ConversationActions({ state, adapter, actionPending, onNew, onSettings }) {
+  const [open, setOpen] = useState(false);
+  const root = useRef(null);
+  const panel = useRef(null);
+  const trigger = useRef(null);
+  const menuId = useId();
+  const targets = state.harnesses.filter((item) => item.startable);
+  const groups = [
+    {
+      label: "Session",
+      items: [
+        { key: "new", label: "New chat", onSelect: onNew },
+        state.canDetach ? { key: "detach", label: "Detach to read-only", intent: { action: "detach" } } : null,
+        state.canOpenTerminal ? { key: "terminal", label: "Prepare terminal handoff", intent: { action: "terminal" } } : null,
+        state.canExport && state.exportBackTarget ? { key: "export", label: `Export back to ${harnessDisplayName(state.exportBackTarget)}`, intent: { action: "export", targetHarness: state.exportBackTarget } } : null,
+        state.interopSettings || state.interopSettingsError ? { key: "settings", label: "Interoperability settings", onSelect: onSettings } : null,
+        adapter.openKeyboardShortcuts ? { key: "shortcuts", label: "Keyboard shortcuts", onSelect: adapter.openKeyboardShortcuts } : null
+      ].filter(Boolean)
+    },
+    {
+      label: "Lower-cost continuation",
+      items: state.canReduce ? targets.map((target) => ({ key: `reduce:${target.id}`, label: target.id === state.harness ? `Reduce and continue in ${target.label}` : `Reduce and switch to ${target.label}`, intent: { action: "reduce", targetHarness: target.id } })) : []
+    },
+    {
+      label: "Independent continuation",
+      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);
+  useEffect(() => {
+    if (!open) return;
+    panel.current?.querySelector("button:not(:disabled)")?.focus({ preventScroll: true });
+    const dismiss = (event) => {
+      if (event.type === "keydown" && event.key === "Escape") {
+        event.preventDefault();
+        setOpen(false);
+        trigger.current?.focus({ preventScroll: true });
+      } else if (event.type === "pointerdown" && !root.current?.contains(event.target)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("keydown", dismiss);
+    document.addEventListener("pointerdown", dismiss, true);
+    return () => {
+      document.removeEventListener("keydown", dismiss);
+      document.removeEventListener("pointerdown", dismiss, true);
+    };
+  }, [open]);
+  const dispatch = (item) => {
+    setOpen(false);
+    if (item.onSelect) item.onSelect();
+    else dispatchConfirmedIntent(adapter, item.intent);
+  };
+  const navigate = (event) => {
+    if (event.key === "Escape") {
+      event.preventDefault();
+      event.stopPropagation();
+      setOpen(false);
+      trigger.current?.focus({ preventScroll: true });
+      return;
+    }
+    if (!["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) return;
+    const items = [...panel.current.querySelectorAll("button:not(:disabled)")];
+    if (!items.length) return;
+    event.preventDefault();
+    const current = items.indexOf(document.activeElement);
+    const index = event.key === "Home" ? 0 : event.key === "End" ? items.length - 1 : event.key === "ArrowDown" ? (current + 1) % items.length : (current <= 0 ? items.length : current) - 1;
+    items[index].focus({ preventScroll: true });
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "scui-menu", ref: root, onBlur: (event) => {
+    if (event.relatedTarget && !event.currentTarget.contains(event.relatedTarget)) setOpen(false);
+  }, children: [
+    /* @__PURE__ */ jsx("button", { ref: trigger, className: "scui-menu-trigger", type: "button", "aria-label": "Conversation actions", "aria-haspopup": "menu", "aria-expanded": open, "aria-controls": open ? menuId : void 0, onClick: () => setOpen((value) => !value), children: /* @__PURE__ */ jsx(UiIcon, { name: "menu", size: 18 }) }),
+    open ? /* @__PURE__ */ jsx("div", { ref: panel, id: menuId, className: "scui-menu-panel", role: "menu", "aria-label": "Conversation actions", onKeyDown: navigate, children: groups.map((group) => /* @__PURE__ */ jsxs("section", { role: "group", "aria-label": group.label, children: [
+      /* @__PURE__ */ jsx("strong", { children: group.label }),
+      group.items.map((item) => /* @__PURE__ */ jsx("button", { role: "menuitem", type: "button", disabled: actionPending, onClick: () => dispatch(item), children: item.label }, item.key))
+    ] }, group.label)) }) : null
+  ] });
+}
+function ChatHeader({ state, adapter, pendingStatus, actionPending, onBack, onNew, onClose, onSettings, headerActions: HeaderActions }) {
+  const back = useRef(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";
+  useEffect(() => {
+    if (state.mode === "mirror" && !state.canSend) back.current?.focus({ preventScroll: true });
+  }, []);
+  return /* @__PURE__ */ jsxs("header", { className: "scui-head scui-chat-head", children: [
+    onBack ? /* @__PURE__ */ jsx("button", { ref: back, type: "button", "aria-label": "Back to chats", onClick: onBack, children: /* @__PURE__ */ jsx(UiIcon, { name: "back", size: 17 }) }) : null,
+    /* @__PURE__ */ jsx(HarnessLogo, { id: harness, size: 24 }),
+    /* @__PURE__ */ jsxs("span", { className: "scui-head-copy", children: [
+      /* @__PURE__ */ jsx("strong", { children: title }),
+      /* @__PURE__ */ jsxs("small", { children: [
+        harnessDisplayName(harness),
+        " \xB7 ",
+        status
+      ] })
+    ] }),
+    HeaderActions ? /* @__PURE__ */ jsx(HeaderActions, { state, adapter, value: "chat" }) : null,
+    /* @__PURE__ */ jsx(ConversationActions, { state, adapter, actionPending, onNew, onSettings }),
+    onClose ? /* @__PURE__ */ jsx("button", { type: "button", "aria-label": "Close", onClick: onClose, children: /* @__PURE__ */ jsx(UiIcon, { name: "close", size: 18 }) }) : null
+  ] });
+}
+function Chat({ state, adapter, onBack, onNew, onClose, components, slots, labels, contextCandidates, navigation, composerCommand }) {
+  const Header = slots.header;
+  const HeaderActions = slots.headerActions;
+  const memoryKey = state.attached?.key || `${state.harness}:${state.workspace}`;
+  const [pending, setPendingState] = useState(() => pendingMessageMemory.get(memoryKey) ?? null);
+  const [pendingAction, setPendingAction] = useState(null);
+  const [restoreDraft, setRestoreDraft] = useState(null);
+  const [settings, setSettings] = useState(null);
+  const restoreSequence = useRef(0);
+  const actionSequence = useRef(0);
+  const lastNavigation = useRef(null);
+  const acknowledged = useRef(/* @__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;
+  });
+  useEffect(() => {
+    setPendingState(pendingMessageMemory.get(memoryKey) ?? null);
+    setPendingAction(null);
+    setRestoreDraft(null);
+  }, [memoryKey]);
+  useEffect(() => {
+    if (!navigation || navigation.id === lastNavigation.current) return;
+    lastNavigation.current = navigation.id;
+    if (navigation.draft === void 0 && !navigation.context?.length && !navigation.images?.length) return;
+    setRestoreDraft({
+      id: `host:${String(navigation.id)}`,
+      text: navigation.draft ?? "",
+      context: navigation.context,
+      images: navigation.images
+    });
+  }, [navigation]);
+  useEffect(() => {
+    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, context = [], images = []) => setPending({
+    text,
+    context,
+    images,
+    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, ...pending.context?.length ? { context: pending.context } : {}, ...pending.images?.length ? { images: pending.images } : {} });
+    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, context: pending.context, images: pending.images });
+    setPending({ ...pending, status: "editing" });
+  };
+  useEffect(() => {
+    const key = state.attached?.key;
+    if (!key || !state.attention.some((item) => item.key === key)) {
+      if (key) acknowledged.current.delete(key);
+      return;
+    }
+    if (!acknowledged.current.has(key)) {
+      acknowledged.current.add(key);
+      adapter.onIntent({ action: "ack", key });
+    }
+  }, [adapter, state.attached?.key, state.attention]);
+  const trackedAdapter = useMemo(() => ({
+    ...adapter,
+    onIntent(intent) {
+      if (!TRACKED_ACTIONS.has(intent.action)) return adapter.onIntent(intent);
+      const id = actionSequence.current + 1;
+      actionSequence.current = id;
+      const action2 = intent.action;
+      setPendingAction({ id, action: action2, initialError: state.error, seenOperation: false });
+      let result;
+      try {
+        result = adapter.onIntent(intent);
+      } catch (error) {
+        setPendingAction((current) => current?.id === id ? null : current);
+        throw error;
+      }
+      if (result && typeof result.then === "function") {
+        Promise.resolve(result).then(
+          () => setPendingAction((current) => current?.id === id ? null : current),
+          () => setPendingAction((current) => current?.id === id ? null : current)
+        );
+      }
+      return result;
+    }
+  }), [adapter, state.error]);
+  useEffect(() => {
+    if (!pendingAction) return;
+    if (state.operation && !pendingAction.seenOperation) {
+      setPendingAction({ ...pendingAction, seenOperation: true });
+    } else if (!state.operation && (pendingAction.seenOperation || state.error !== pendingAction.initialError)) {
+      setPendingAction(null);
+    }
+  }, [pendingAction, state.error, state.operation]);
+  const pendingMessage = pending && pending.status !== "editing" ? { text: pending.text, context: pending.context, images: pending.images, status: pending.status, onRetry: retryPending, onEdit: editPending } : null;
+  const action = state.operation || pendingAction?.action || null;
+  const actionLabel = operationLabel(action);
+  const actionState = action ? { ...state, operation: action, canSteer: false, canInterrupt: false, canRespond: false } : state;
+  const unreadAfterMessages = state.attention.find((item) => item.key === state.attached?.key)?.afterMessages ?? null;
+  const Advisory = components.HarnessAdvisory ?? HarnessAdvisory;
+  const SettingsPanel = components.HarnessSettingsPanel ?? HarnessSettingsPanel;
+  return /* @__PURE__ */ jsxs("section", { className: "scui-chat", children: [
+    Header ? /* @__PURE__ */ jsx(Header, { state: actionState, adapter: trackedAdapter, value: null }) : /* @__PURE__ */ jsx(ChatHeader, { state: actionState, adapter: trackedAdapter, pendingStatus: pending?.status ?? null, actionPending: Boolean(action), onBack, onNew, onClose, onSettings: () => setSettings({ recommendedChange: null }), headerActions: HeaderActions }),
+    actionLabel ? /* @__PURE__ */ jsxs("div", { className: "scui-operation", role: "status", children: [
+      /* @__PURE__ */ jsx("i", {}),
+      actionLabel
+    ] }) : null,
+    state.error ? /* @__PURE__ */ jsxs("div", { className: "scui-error", role: "alert", children: [
+      /* @__PURE__ */ jsx("span", { children: state.error }),
+      state.recoverable ? /* @__PURE__ */ jsx("button", { type: "button", disabled: Boolean(action), onClick: () => trackedAdapter.onIntent({ action: "refresh" }), children: "Retry" }) : null
+    ] }) : null,
+    /* @__PURE__ */ jsx(Receipt, { state, adapter }),
+    /* @__PURE__ */ jsx(UniversalNouns, { state: actionState, adapter: trackedAdapter }),
+    /* @__PURE__ */ jsx(Conversation, { state: actionState, adapter: trackedAdapter, components, slots, memoryKey, pending: pendingMessage, unreadAfterMessages }, memoryKey),
+    /* @__PURE__ */ jsx(ContinuationBar, { state: actionState, adapter: trackedAdapter, labels }),
+    /* @__PURE__ */ jsx(Advisory, { state: actionState, adapter: trackedAdapter, value: state.interopSettings?.advisories[0] ?? null, onReview: (recommendedChange) => setSettings({ recommendedChange }) }),
+    state.mode !== "mirror" || state.canSend ? /* @__PURE__ */ jsx(Composer, { state: actionState, adapter: trackedAdapter, labels, memoryKey, pendingStatus: pending?.status ?? null, restoreDraft, command: composerCommand, contextCandidates, components, onDraftRestored: (id) => setRestoreDraft((value) => value?.id === id ? null : value), onPending: beginPending }, `composer:${memoryKey}`) : null,
+    settings ? /* @__PURE__ */ jsx(SettingsPanel, { state: actionState, adapter: trackedAdapter, value: state.interopSettings, recommendedChange: settings.recommendedChange, onClose: () => setSettings(null) }) : null
+  ] });
+}
+function NewChat({ state, adapter, onBack, onClose, onStarted, labels, memoryKey, headerActions: HeaderActions, contextCandidates, components, navigation, composerCommand, variant = "default", environmentLabel, suggestions = [], initialDraft = "", onDraftChange }) {
+  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: initialDraft, context: [], images: [], modes: {} };
+  const [harness, setHarness] = useState(remembered.harness);
+  const [draft, setDraft] = useState(remembered.draft);
+  const [context, setContext] = useState(remembered.context);
+  const [images, setImages] = useState(remembered.images ?? []);
+  const [modes, setModes] = useState(remembered.modes ?? {});
+  const [starting, setStarting] = useState(null);
+  const [picking, setPicking] = useState(false);
+  const [dragging, setDragging] = useState(false);
+  const [pickerError, setPickerError] = useState(null);
+  const startSequence = useRef(0);
+  const lastComposerCommand = useRef(null);
+  const textarea = useRef(null);
+  const selectedHarness = startable.find((item) => item.id === harness) ?? null;
+  const Picker = components.HarnessPicker ?? HarnessPicker;
+  const Readiness = components.HarnessReadiness ?? HarnessReadiness;
+  const launchModes = selectedHarness?.launchModes?.length ? selectedHarness.launchModes : ["headless"];
+  const rememberedMode = modes[harness];
+  const requestedMode = launchModes.includes(rememberedMode) ? rememberedMode : launchModes.includes(selectedHarness?.preferredLaunchMode) ? selectedHarness.preferredLaunchMode : launchModes[0];
+  const mode = (context.length > 0 || images.length > 0) && launchModes.includes("headless") ? "headless" : requestedMode;
+  const terminalAttachments = mode === "terminal" && (context.length > 0 || images.length > 0);
+  const remember = (overrides = {}) => {
+    boundedSet(newChatMemory, memoryKey, { harness, draft, context, images, modes, ...overrides });
+    if (Object.hasOwn(overrides, "draft")) onDraftChange?.(overrides.draft);
+  };
+  useAutosizeTextarea(textarea, draft);
+  useEffect(() => {
+    if (startable.some((item) => item.id === harness)) return;
+    const next = startable[0]?.id ?? "";
+    setHarness(next);
+    remember({ harness: next });
+  }, [harness, startableKey]);
+  useEffect(() => {
+    if (!starting || starting.mode === "terminal" || starting.waitForResult || state.error) return;
+    const sessionChanged = (state.attached?.key ?? null) !== starting.attachedKey;
+    if (!sessionChanged && !state.busy) return;
+    newChatMemory.delete(memoryKey);
+    onDraftChange?.("");
+    onStarted("headless");
+  }, [memoryKey, onStarted, starting, state.attached?.key, state.busy]);
+  useEffect(() => {
+    if (starting && state.error && (!starting.waitForResult || state.error !== starting.initialError) && !state.busy && !state.operation) setStarting(null);
+  }, [starting, state.busy, state.error, state.operation]);
+  useEffect(() => {
+    textarea.current?.focus({ preventScroll: true });
+  }, []);
+  useEffect(() => {
+    if (!navigation) return;
+    const nextHarness = startable.some((item) => item.id === navigation.harness) ? navigation.harness : harness;
+    const nextDraft = typeof navigation.draft === "string" ? navigation.draft : draft;
+    const nextContext = mergeContext([], navigation.context ?? []);
+    const nextImages = mergeImages([], navigation.images ?? []);
+    setHarness(nextHarness);
+    setDraft(nextDraft);
+    setContext(nextContext);
+    setImages(nextImages);
+    remember({ harness: nextHarness, draft: nextDraft, context: nextContext, images: nextImages });
+    textarea.current?.focus({ preventScroll: true });
+  }, [navigation?.id]);
+  useEffect(() => {
+    if (!composerCommand || composerCommand.id === lastComposerCommand.current) return;
+    lastComposerCommand.current = composerCommand.id;
+    if (composerCommand.action === "attach") {
+      if (mode === "terminal" && !launchModes.includes("headless")) {
+        setPickerError("Terminal starts currently accept text only. Choose Headless to attach context or images.");
+      } else {
+        try {
+          const attachments = partitionAttachments(composerCommand.attachments);
+          if (context.length + attachments.context.length > MAX_CONTEXT_ITEMS) throw new Error(`Attach at most ${MAX_CONTEXT_ITEMS} text items.`);
+          if (images.length + attachments.images.length > MAX_IMAGE_ITEMS) throw new Error(`Attach at most ${MAX_IMAGE_ITEMS} images.`);
+          const nextContext = mergeContext(context, attachments.context);
+          const nextImages = mergeImages(images, attachments.images);
+          setContext(nextContext);
+          setImages(nextImages);
+          setPickerError(null);
+          remember({ context: nextContext, images: nextImages });
+        } catch (error) {
+          setPickerError(error instanceof Error ? error.message : "Could not attach context.");
+        }
+      }
+    }
+    textarea.current?.focus({ preventScroll: true });
+  }, [composerCommand?.id]);
+  const pickContext = () => {
+    if (mode === "terminal" || !adapter.pickContext || picking || context.length >= MAX_CONTEXT_ITEMS && images.length >= MAX_IMAGE_ITEMS) return;
+    setPicking(true);
+    setPickerError(null);
+    Promise.resolve().then(() => adapter.pickContext()).then((picked) => {
+      const attachments = partitionAttachments(picked);
+      if (context.length + attachments.context.length > MAX_CONTEXT_ITEMS) throw new Error(`Attach at most ${MAX_CONTEXT_ITEMS} text items.`);
+      if (images.length + attachments.images.length > MAX_IMAGE_ITEMS) throw new Error(`Attach at most ${MAX_IMAGE_ITEMS} images.`);
+      setContext((current) => {
+        const next = mergeContext(current, attachments.context);
+        remember({ context: next });
+        return next;
+      });
+      setImages((current) => {
+        const next = mergeImages(current, attachments.images);
+        remember({ images: next });
+        return next;
+      });
+    }).catch((error) => setPickerError(error instanceof Error ? error.message : "Could not attach context.")).finally(() => setPicking(false));
+  };
+  const attachCandidate = (picked) => {
+    if (mode === "terminal") return;
+    const attachments = partitionAttachments(picked);
+    const nextContext = mergeContext(context, attachments.context);
+    const nextImages = mergeImages(images, attachments.images);
+    setContext(nextContext);
+    setImages(nextImages);
+    remember({ context: nextContext, images: nextImages });
+  };
+  const addImageFiles = (value, source) => {
+    const allFiles = Array.from(value ?? []);
+    if (!allFiles.length) return false;
+    if (mode === "terminal") {
+      setPickerError("Terminal starts currently accept text only. Choose Headless to attach context or images.");
+      return true;
+    }
+    const files = allFiles.filter((file) => file.type.startsWith("image/"));
+    if (files.length !== allFiles.length) {
+      setPickerError("Drop or paste PNG, JPEG, GIF, or WebP images.");
+      return true;
+    }
+    if (images.length + files.length > MAX_IMAGE_ITEMS) {
+      setPickerError(`Attach at most ${MAX_IMAGE_ITEMS} images.`);
+      return true;
+    }
+    setPicking(true);
+    setPickerError(null);
+    imageAttachmentsFromFiles(files).then((picked) => setImages((current) => {
+      const next = mergeImages(current, picked);
+      remember({ images: next });
+      return next;
+    }), (error) => setPickerError(error instanceof Error ? error.message : `Could not ${source} image.`)).finally(() => setPicking(false));
+    return true;
+  };
+  const pasteImages = (event) => {
+    if (addImageFiles(event.clipboardData?.files, "paste")) event.preventDefault();
+  };
+  const dropImages = (event) => {
+    setDragging(false);
+    if (addImageFiles(event.dataTransfer?.files, "drop")) event.preventDefault();
+  };
+  const send = () => {
+    const text = draft.trim();
+    if (!text && !images.length || !harness || starting || terminalAttachments || mode === "terminal" && !text) return;
+    const id = startSequence.current + 1;
+    startSequence.current = id;
+    setStarting({ id, mode, waitForResult: true, attachedKey: state.attached?.key ?? null, busy: state.busy, initialError: state.error });
+    setPickerError(null);
+    let result;
+    const failed = (error) => {
+      setStarting((current) => current?.id === id ? null : current);
+      setPickerError(error instanceof Error ? error.message : "Could not start the conversation. Your draft is kept.");
+    };
+    try {
+      result = adapter.onIntent({ action: "new", harness, mode, text, ...context.length ? { context } : {}, ...images.length ? { images } : {} });
+    } catch (error) {
+      failed(error);
+      return;
+    }
+    if (mode === "terminal") {
+      Promise.resolve(result).then(() => {
+        newChatMemory.delete(memoryKey);
+        onDraftChange?.("");
+        onStarted("terminal");
+      }, failed);
+    } else if (result && typeof result.then === "function") {
+      Promise.resolve(result).then(() => setStarting((current) => current?.id === id ? { ...current, waitForResult: false } : current), failed);
+    } else {
+      setStarting((current) => current?.id === id ? { ...current, waitForResult: false } : current);
+    }
+  };
+  return /* @__PURE__ */ jsxs("section", { className: `scui-chat${variant === "starter" ? " scui-starter" : ""}`, children: [
+    state.error ? /* @__PURE__ */ jsx("div", { className: "scui-error", role: "alert", children: state.error }) : null,
+    variant !== "starter" ? /* @__PURE__ */ jsxs("header", { className: "scui-head", children: [
+      /* @__PURE__ */ jsx("button", { type: "button", "aria-label": "Back", onClick: onBack, children: /* @__PURE__ */ jsx(UiIcon, { name: "back", size: 18 }) }),
+      /* @__PURE__ */ jsxs("span", { className: "scui-head-copy", children: [
+        /* @__PURE__ */ jsx("strong", { children: labels.newChat }),
+        /* @__PURE__ */ jsx("small", { children: "No session is created until you send" })
+      ] }),
+      HeaderActions ? /* @__PURE__ */ jsx(HeaderActions, { state, adapter, value: "new" }) : null,
+      onClose ? /* @__PURE__ */ jsx("button", { type: "button", "aria-label": "Close", onClick: onClose, children: /* @__PURE__ */ jsx(UiIcon, { name: "close", size: 18 }) }) : null
+    ] }) : null,
+    starting ? /* @__PURE__ */ jsxs("div", { className: "scui-operation", role: "status", children: [
+      /* @__PURE__ */ jsx("i", {}),
+      mode === "terminal" ? "Opening terminal\u2026" : operationLabel("start")
+    ] }) : null,
+    /* @__PURE__ */ jsxs("div", { className: `scui-new${variant === "starter" ? " scui-new-starter" : ""}`, children: [
+      /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u2726" }),
+      /* @__PURE__ */ jsx("strong", { children: "What should the agent build or fix?" }),
+      /* @__PURE__ */ jsx("small", { children: "Choose a coding harness and send the first message." })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "scui-compose", children: [
+      environmentLabel ? /* @__PURE__ */ jsx("span", { className: "scui-environment", children: environmentLabel }) : null,
+      /* @__PURE__ */ jsx(Readiness, { harnesses: state.harnesses, state, adapter }),
+      mode !== "terminal" ? /* @__PURE__ */ jsx(ContextCandidates, { items: contextCandidates, context, images, state, adapter, onAttach: attachCandidate, component: components.ContextCandidate }) : null,
+      /* @__PURE__ */ jsx(ImageTray, { items: images, onRemove: (index) => setImages((items) => {
+        const next = items.filter((_, itemIndex) => itemIndex !== index);
+        remember({ images: next });
+        return next;
+      }) }),
+      /* @__PURE__ */ jsx(ContextTray, { items: context, onRemove: (index) => setContext((items) => {
+        const next = items.filter((_, itemIndex) => itemIndex !== index);
+        remember({ context: next });
+        return next;
+      }) }),
+      terminalAttachments ? /* @__PURE__ */ jsx("small", { className: "scui-context-error", role: "alert", children: "Terminal starts currently accept text only. Remove attachments or choose Headless." }) : pickerError ? /* @__PURE__ */ jsx("small", { className: "scui-context-error", role: "alert", children: pickerError }) : null,
+      /* @__PURE__ */ jsxs("div", { className: `scui-envelope scui-new-envelope${dragging ? " scui-drop-target" : ""}`, onDragEnter: (event) => {
+        if (Array.from(event.dataTransfer?.types ?? []).includes("Files")) {
+          event.preventDefault();
+          setDragging(true);
+        }
+      }, onDragOver: (event) => {
+        if (Array.from(event.dataTransfer?.types ?? []).includes("Files")) event.preventDefault();
+      }, onDragLeave: (event) => {
+        if (!event.currentTarget.contains(event.relatedTarget)) setDragging(false);
+      }, onDrop: dropImages, children: [
+        /* @__PURE__ */ jsx("textarea", { ref: 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 || Boolean(starting), onPaste: pasteImages, onInput: (event) => {
+          const value = event.currentTarget.value;
+          setDraft(value);
+          remember({ draft: value });
+        }, onKeyDown: (event) => {
+          if (isSendKey(event)) {
+            event.preventDefault();
+            send();
+          }
+        } }),
+        /* @__PURE__ */ jsxs("footer", { className: "scui-new-envelope-controls", children: [
+          adapter.pickContext ? /* @__PURE__ */ jsx("button", { className: "scui-attach", type: "button", "aria-label": labels.attachContext ?? DEFAULT_LABELS.attachContext, disabled: mode === "terminal" || picking || context.length >= MAX_CONTEXT_ITEMS && images.length >= MAX_IMAGE_ITEMS || Boolean(starting), onClick: pickContext, children: picking ? /* @__PURE__ */ jsx("i", { className: "scui-control-spinner" }) : /* @__PURE__ */ jsx(UiIcon, { name: "attach", size: 17 }) }) : null,
+          /* @__PURE__ */ jsx(Picker, { harnesses: state.harnesses, state, value: harness, disabled: Boolean(starting), adapter, logo: components.HarnessLogo, onChange: (value) => {
+            setHarness(value);
+            remember({ harness: value });
+          } }),
+          /* @__PURE__ */ jsx(ExecutionModeSelect, { modes: launchModes, value: mode, disabled: Boolean(starting) || mode !== requestedMode, onChange: (item) => {
+            const next = { ...modes, [harness]: item };
+            setModes(next);
+            setPickerError(null);
+            remember({ modes: next });
+          } }),
+          /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx("button", { type: "button", className: "scui-send", "aria-label": mode === "terminal" ? "Start terminal session" : "Start headless session", disabled: !draft.trim() && !images.length || !harness || Boolean(starting) || terminalAttachments || mode === "terminal" && !draft.trim(), onClick: send, children: starting ? /* @__PURE__ */ jsx("i", { className: "scui-control-spinner" }) : /* @__PURE__ */ jsx(UiIcon, { name: "send", size: 17 }) }) })
+        ] })
+      ] }),
+      suggestions.length ? /* @__PURE__ */ jsx("div", { className: "scui-starter-suggestions", children: suggestions.map((text) => /* @__PURE__ */ jsx("button", { type: "button", disabled: Boolean(starting), onClick: () => {
+        setDraft(text);
+        remember({ draft: text });
+        textarea.current?.focus();
+      }, children: text }, text)) }) : null
+    ] })
+  ] });
+}
+function useMessengerModel({ state: stateInput, adapter, initialView, navigation = null, composerCommand = null, onViewChange, contextCandidates: candidatesInput = [], labels, components = {}, slots = {} }) {
+  const state = useMemo(() => normalizeUiState(stateInput), [stateInput]);
+  const contextCandidates = useMemo(() => normalizeAttachmentCandidates(candidatesInput), [candidatesInput]);
+  const copy = { ...DEFAULT_LABELS, ...labels };
+  const memoryKey = state.workspace || "@default";
+  const [view, setViewState] = useState(initialView ?? (state.attention.length ? "list" : messengerViewMemory.get(memoryKey) ?? (state.attached || state.transcript.length ? "chat" : "list")));
+  const [opening, setOpening] = useState(null);
+  const [newNavigation, setNewNavigation] = useState(null);
+  const [chatNavigation, setChatNavigation] = useState(null);
+  const [listFocus, setListFocus] = useState(null);
+  const [inspecting, setInspecting] = useState(null);
+  const lastNavigation = useRef(null);
+  const setView = (next) => {
+    boundedSet(messengerViewMemory, memoryKey, next);
+    setViewState(next);
+    onViewChange?.(next);
+  };
+  useEffect(() => {
+    if (!navigation || navigation.id === lastNavigation.current) return;
+    lastNavigation.current = navigation.id;
+    if (navigation.view === "list") {
+      setOpening(null);
+      setChatNavigation(null);
+      setView("list");
+      return;
+    }
+    if (navigation.view === "new") {
+      setListFocus("@new");
+      setChatNavigation(null);
+      setNewNavigation(navigation);
+      setView("new");
+      return;
+    }
+    if (navigation.view === "chat" && typeof navigation.sessionKey === "string" && navigation.sessionKey) {
+      setListFocus(navigation.sessionKey);
+      setNewNavigation(null);
+      setChatNavigation(navigation);
+      if (state.attached?.key === navigation.sessionKey) {
+        setOpening(null);
+        setView("chat");
+        return;
+      }
+      const row = state.sessions.find((item) => item.key === navigation.sessionKey);
+      setOpening(row ?? { key: navigation.sessionKey, harness: "supercode", name: "Chat", title: "Chat" });
+      adapter.onIntent({ action: "attach", key: navigation.sessionKey });
+    }
+  }, [adapter, navigation, state.attached?.key, state.sessions]);
+  useEffect(() => {
+    if (!opening) return;
+    if (state.attached?.key === opening.key) {
+      setOpening(null);
+      setView("chat");
+    } else if (state.attachError?.key === opening.key || state.error && !state.operation) {
+      setOpening(null);
+    }
+  }, [opening, state.attachError?.key, state.attached?.key, state.error, state.operation]);
+  const dismissInspector = () => {
+    if (inspecting || state.subagentInspector) {
+      setInspecting(null);
+      adapter.onIntent({ action: "closeSubagents" });
+    }
+  };
+  const open = (row) => {
+    dismissInspector();
+    setListFocus(row.key);
+    setChatNavigation(null);
+    setOpening(row);
+    adapter.onIntent({ action: "attach", key: row.key });
+  };
+  const openSubagents = (row) => {
+    setListFocus(row.key);
+    setInspecting(row);
+    adapter.onIntent({ action: "openSubagents", key: row.key });
+  };
+  const close = () => adapter.onClose?.();
+  const inspectorParent = inspecting ?? (state.subagentInspector ? state.sessions.find((row) => row.key === state.subagentInspector.parentKey) ?? { key: state.subagentInspector.parentKey, title: state.subagentInspector.parentTitle } : null);
+  const inspectorState = inspectorParent ? {
+    ...state,
+    subagentInspector: state.subagentInspector?.parentKey === inspectorParent.key ? state.subagentInspector : { parentKey: inspectorParent.key, parentTitle: sessionDisplayName(inspectorParent), status: state.error ? "error" : "loading", items: [], selectedKey: null, transcript: [], error: state.error }
+  } : null;
+  const newConversation = () => {
+    dismissInspector();
+    setListFocus("@new");
+    setChatNavigation(null);
+    setNewNavigation(null);
+    setView("new");
+  };
+  const back = () => {
+    setListFocus(state.attached?.key ?? listFocus);
+    setView("list");
+  };
+  return {
+    state,
+    adapter,
+    view,
+    setView,
+    open,
+    openSubagents,
+    newConversation,
+    back,
+    close,
+    opening,
+    listFocus,
+    memoryKey,
+    inspectorState,
+    closeInspector: () => {
+      setInspecting(null);
+      adapter.onIntent({ action: "closeSubagents" });
+    },
+    newNavigation,
+    chatNavigation,
+    composerCommand,
+    contextCandidates,
+    labels: copy,
+    components,
+    slots
+  };
+}
+var MessengerContext = createContext(null);
+function MessengerProvider({ children, ...props }) {
+  const model = useMessengerModel(props);
+  return /* @__PURE__ */ jsx(MessengerContext.Provider, { value: model, children });
+}
+function useMessenger() {
+  const model = useContext(MessengerContext);
+  if (!model) throw new Error("Messenger components require a MessengerProvider.");
+  return model;
+}
+function MessengerSessions() {
+  const m = useMessenger();
+  return /* @__PURE__ */ jsx(
+    SessionList,
+    {
+      state: m.state,
+      adapter: m.adapter,
+      focusKey: m.listFocus,
+      onOpen: m.open,
+      onOpenSubagents: m.openSubagents,
+      onNew: m.newConversation,
+      onClose: m.adapter.onClose ? m.close : void 0,
+      components: m.components,
+      labels: m.labels,
+      memoryKey: m.memoryKey,
+      slots: m.slots,
+      headerActions: m.slots.headerActions
+    }
+  );
+}
+function MessengerContent({ starter = {}, showBack = true } = {}) {
+  const m = useMessenger();
+  const common = {
+    state: m.state,
+    adapter: m.adapter,
+    components: m.components,
+    labels: m.labels,
+    contextCandidates: m.contextCandidates,
+    composerCommand: m.composerCommand,
+    onClose: m.adapter.onClose ? m.close : void 0,
+    onBack: showBack ? m.back : void 0
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    m.inspectorState ? /* @__PURE__ */ jsx(SubagentInspector, { state: m.inspectorState, adapter: m.adapter, onClose: m.closeInspector }) : m.view === "new" || m.view === "list" && !m.state.attached && !m.state.transcript.length ? /* @__PURE__ */ jsx(
+      NewChat,
+      {
+        ...common,
+        ...starter,
+        memoryKey: m.memoryKey,
+        headerActions: m.slots.headerActions,
+        navigation: m.newNavigation,
+        onStarted: (mode) => m.setView(mode === "terminal" ? "list" : "chat")
+      }
+    ) : /* @__PURE__ */ jsx(
+      Chat,
+      {
+        ...common,
+        slots: m.slots,
+        onNew: m.newConversation,
+        navigation: m.chatNavigation?.sessionKey === m.state.attached?.key ? m.chatNavigation : null
+      }
+    ),
+    m.opening ? /* @__PURE__ */ jsxs("div", { className: "scui-opening", role: "status", "aria-busy": "true", children: [
+      /* @__PURE__ */ jsx(HarnessLogo, { id: m.opening.harness, size: 34 }),
+      /* @__PURE__ */ jsxs("span", { children: [
+        /* @__PURE__ */ jsxs("strong", { children: [
+          "Opening ",
+          sessionDisplayName(m.opening)
+        ] }),
+        /* @__PURE__ */ jsx("small", { children: "Loading the latest transcript window\u2026" })
+      ] }),
+      /* @__PURE__ */ jsx("i", {})
+    ] }) : null
+  ] });
+}
+function MessengerSurface({ class: className = "", starter }) {
+  const m = useMessenger();
+  const Footer = m.slots.footer;
+  return /* @__PURE__ */ jsxs("main", { className: `scui-root ${className}`, "data-view": m.inspectorState ? "agents" : m.view, "data-mode": m.state.mode, "aria-label": "Supercode messenger", children: [
+    m.view === "list" && !m.inspectorState ? /* @__PURE__ */ jsx(MessengerSessions, {}) : /* @__PURE__ */ jsx(MessengerContent, { starter }),
+    Footer ? /* @__PURE__ */ jsx(Footer, { state: m.state, adapter: m.adapter, value: m.labels }) : null
+  ] });
+}
+function SupercodeMessenger(props) {
+  return /* @__PURE__ */ jsx(MessengerProvider, { ...props, children: /* @__PURE__ */ jsx(MessengerSurface, { class: props.class, starter: props.starter }) });
+}
+
+export {
+  MessengerProvider,
+  useMessenger,
+  MessengerSessions,
+  MessengerContent,
+  SupercodeMessenger
+};