@aparte/plugin-subagents 1.6.0 → 1.7.0

package/dist/{setup-CaTzFtu8.js → connect-65jiVmf_.js}

@@ -1,4 +1,4 @@
-import { createSegmentList, createStreamAdapter, runWithConfig, getSegmentRenderer, installDefaultRenderersOnce, deferHydrationOf, subscribeConfigChange, resolveConfig, contextConfig, pluralize, formatDuration, segmentTiming, aparteGlobalConfig, registerSegmentRenderer, unregisterSegmentRenderer } from "@aparte/core";
+import { createSegmentList, createStreamAdapter, runWithConfig, getSegmentRenderer, installDefaultRenderersOnce, pluralize, deferHydrationOf, onRenderersChange, subscribeConfigChange, resolveConfig, contextConfig, formatDuration, segmentTiming, aparteGlobalConfig, registerSegmentRenderer, unregisterSegmentRenderer } from "@aparte/core";
 const SUBAGENT_SEGMENT_TYPE = "subagent";
 const STATUSES = /* @__PURE__ */ new Set(["running", "waiting", "done", "failed", "stopped"]);
 function subagentOf(segment) {
@@ -55,11 +55,41 @@ function callStatusOf(status) {
       return "aborted";
   }
 }
+const open = /* @__PURE__ */ new Map();
+const keyOf$1 = (messageId, agentId) => `${messageId}\0${agentId}`;
+function stepStarted(messageId, agentId, name) {
+  const key = keyOf$1(messageId, agentId);
+  open.set(key, [...open.get(key) ?? [], name]);
+}
+function stepEnded(messageId, agentId, name) {
+  const key = keyOf$1(messageId, agentId);
+  const steps = open.get(key);
+  if (!steps) return;
+  const at = steps.lastIndexOf(name);
+  if (at < 0) return;
+  const rest = steps.filter((_, i) => i !== at);
+  if (rest.length > 0) open.set(key, rest);
+  else open.delete(key);
+}
+function stepsEnded(messageId, agentId) {
+  open.delete(keyOf$1(messageId, agentId));
+}
+function currentStep(messageId, agentId) {
+  if (messageId !== void 0) return open.get(keyOf$1(messageId, agentId))?.at(-1);
+  const suffix = `\0${agentId}`;
+  for (const [key, steps] of open) if (key.endsWith(suffix)) return steps.at(-1);
+  return void 0;
+}
 const MAX_RUNS = 64;
 const MAX_LANES = 512;
 const MAX_EARLY = 2e3;
 const COALESCED = /* @__PURE__ */ new Set(["text-delta", "thinking-delta", "sources", "text-flush", "turn-start"]);
 const isOpen = (status) => (status ?? "pending") === "pending" || status === "awaiting-approval";
+const lastWrites = /* @__PURE__ */ new Map();
+const writeKey = (messageId, agentId) => `${messageId}\0${agentId}`;
+function lastLaneWrite(messageId, agentId) {
+  return lastWrites.get(writeKey(messageId, agentId));
+}
 const laneWatchers = /* @__PURE__ */ new Set();
 function watchLaneWrites(fn) {
   laneWatchers.add(fn);
@@ -160,7 +190,7 @@ function createLanes() {
       }
     }
     write(run, lane.host, lane.anchorId, updates);
-    if (laneWatchers.size === 0 || run.closed) return;
+    if (run.closed) return;
     const anchor = anchorOf(run, lane) ?? {
       id: lane.anchorId,
       type: SUBAGENT_SEGMENT_TYPE,
@@ -174,6 +204,7 @@ function createLanes() {
       agentId: lane.id,
       anchor
     };
+    lastWrites.set(writeKey(run.messageId, lane.id), note);
     for (const fn of [...laneWatchers]) {
       try {
         fn(note);
@@ -224,6 +255,7 @@ function createLanes() {
     if (run.closed) return;
     for (const lane of run.lanes.values()) {
       const working = lane.status === "running" || lane.status === "waiting";
+      stepsEnded(run.messageId, lane.id);
       settleLane(lane, true);
       lane.streaming = false;
       run.dirty.add(lane);
@@ -233,6 +265,10 @@ function createLanes() {
     forget(run);
   };
   const forget = (run) => {
+    for (const lane of run.lanes.values()) {
+      stepsEnded(run.messageId, lane.id);
+      lastWrites.delete(writeKey(run.messageId, lane.id));
+    }
     run.closed = true;
     stopFrame(run);
     run.unlisten();
@@ -325,6 +361,7 @@ function createLanes() {
   };
   const retire = (run, lane) => {
     run.lanes.delete(lane.id);
+    stepsEnded(run.messageId, lane.id);
     if (lane.status === "running" || lane.status === "waiting") {
       lane.status = "stopped";
       settleLane(lane, true);
@@ -423,6 +460,7 @@ function createLanes() {
     if (e.result !== void 0) lane.result = e.result;
     if (e.error !== void 0) lane.error = e.error;
     if (e.status !== "waiting") {
+      stepsEnded(run.messageId, lane.id);
       settleLane(lane, false);
       lane.streaming = false;
     }
@@ -435,6 +473,8 @@ function createLanes() {
       if (event.type === "tool-awaiting-approval") lane.asking.add(event.toolCallId);
       else if (event.type !== "tool-start") lane.asking.delete(event.toolCallId);
     }
+    if (event.type === "step-start") stepStarted(run.messageId, lane.id, event.name);
+    else if (event.type === "step-end") stepEnded(run.messageId, lane.id, event.name);
     const before = lane.list.segments.length;
     lane.emit(event);
     if (event.type === "tool-start") callStarted(run, lane, event.toolCallId);
@@ -493,6 +533,58 @@ function createLanes() {
     }
   };
 }
+const shown = /* @__PURE__ */ new Map();
+const keyOf = (messageId, agentId) => `${messageId}\0${agentId}`;
+function isShown(messageId, agentId) {
+  if (!messageId || shown.size === 0) return false;
+  const key = keyOf(messageId, agentId);
+  for (const value of shown.values()) if (value === key) return true;
+  return false;
+}
+function setShown(owner, at) {
+  if (at) shown.set(owner, keyOf(at.messageId, at.agentId));
+  else shown.delete(owner);
+}
+const openButtonOf = (row) => row.querySelector(":scope > :is(.aparte-tool-line, .aparte-tool-open-slot) > .aparte-tool-open");
+function markRow(row, on) {
+  const button = openButtonOf(row);
+  if (!button) return;
+  row.toggleAttribute("data-current", on);
+  if (on) button.setAttribute("aria-current", "true");
+  else button.removeAttribute("aria-current");
+}
+function unmarkAll(root) {
+  for (const row of root.querySelectorAll(".aparte-segment-tool-call[data-current]")) markRow(row, false);
+}
+function targetIdOf(row) {
+  const chat = row.closest("aparte-chat");
+  if (chat) return chat.id || void 0;
+  const view = row.closest("aparte-subagent-view:not([data-inline])");
+  if (!view) return void 0;
+  const id = view.getAttribute("for") || (typeof view.chat?.id === "string" ? view.chat.id : "");
+  return id || void 0;
+}
+function dispatchOpen(row, segment, sub, standIn) {
+  const messageId = segment.messageId || row.closest("[message-id]")?.getAttribute("message-id") || "";
+  if (!messageId) return;
+  const targetId = targetIdOf(row);
+  const name = sub.name?.trim();
+  const toolCallId = standIn ? void 0 : segment.toolCall?.id;
+  const detail = {
+    ...targetId ? { targetId } : {},
+    messageId,
+    agentId: sub.id,
+    ...name ? { name } : {},
+    ...toolCallId ? { toolCallId } : {}
+  };
+  row.dispatchEvent(new CustomEvent("aparte-subagent-open", { bubbles: true, composed: true, detail }));
+}
+function innerRendererFor(segment, config) {
+  if (segment.type === "activity") return config.getActivityRenderer(segment.activityType) ?? null;
+  if (segment.type !== "tool_call") return null;
+  const name = segment.toolCall?.name;
+  return name && !config.isToolHidden(name) ? config.getToolRenderer(name) ?? null : null;
+}
 function rendererFor(type, config) {
   const renderer = getSegmentRenderer(type, config);
   if (renderer) return renderer;
@@ -546,7 +638,7 @@ class LaneDrawing {
       seen.add(segment.id);
       const renderer = rendererFor(segment.type, config);
       let row = this.rows.get(segment.id);
-      if (row && row.renderer !== renderer) {
+      if (row && (row.renderer !== renderer || row.inner !== innerRendererFor(segment, config))) {
         this.release(segment.id, config);
         row.el.remove();
         row = void 0;
@@ -582,7 +674,7 @@ class LaneDrawing {
   draw(segment, renderer, config, live) {
     const el = renderer ? toElement(runWithConfig(config, () => renderer.render(segment)), segment) : fallbackOf(segment);
     if (!el) return void 0;
-    const row = { el, renderer, segment };
+    const row = { el, renderer, inner: innerRendererFor(segment, config), segment };
     this.rows.set(segment.id, row);
     if (renderer?.setup) {
       const as = drawnAs(segment, live);
@@ -603,9 +695,10 @@ class LaneDrawing {
     }
     if (renderer.update) {
       const before = row.el;
+      const next2 = before.nextSibling;
       runWithConfig(config, () => renderer.update(before, segment));
       if (before.parentNode !== this.container) {
-        const now = this.childOf(segment.id);
+        const now = this.childOf(segment.id) ?? this.inPlaceOf(next2, segment.id);
         if (now) row.el = now;
       }
       return;
@@ -624,6 +717,18 @@ class LaneDrawing {
     }
     return null;
   }
+  /**
+   * The element standing where a row stood (before `next`) when it is no row's: what a
+   * renderer put in place of its own without the id (`outerHTML`, `replaceWith`), stamped so
+   * the loop finds it. A renderer that took its element away left another row there, or
+   * nothing: the row keeps its element, and the loop puts it back.
+   */
+  inPlaceOf(next, id) {
+    const there = next ? next.previousSibling : this.container.lastChild;
+    if (there?.nodeType !== Node.ELEMENT_NODE || there.hasAttribute("data-segment-id")) return null;
+    there.setAttribute("data-segment-id", id);
+    return there;
+  }
   release(id, config) {
     const row = this.rows.get(id);
     if (!row) return;
@@ -640,7 +745,7 @@ class LaneDrawing {
     }
   }
 }
-const styles = "/*\n * @aparte/plugin-subagents — a sub-agent's conversation.\n *\n * Only what is the plugin's own. The rows inside are core's (text, reasoning, tool rows,\n * a nested sub-agent's line) and wear core's sheets; under a line, the transcript sits in\n * core's tool detail, which already draws the rule and the indent a disclosure has. So\n * this sheet draws the task line, the spacing of the rows, and — for the standalone view\n * only — the same quiet rule down the leading edge, since nothing of core's is around it.\n *\n * Logical properties throughout, so a right-to-left locale puts the rule on its own\n * leading edge. No colour of its own: core's tokens. Nothing moves, so there is no motion\n * to reduce.\n */\naparte-subagent-view {\n    display: block;\n    min-inline-size: 0;\n}\n\n/* Standalone (a canvas, a pane, a dialog): outside any message, so the conversation's\n   type is set here, as core's segment container sets it in a reply. */\naparte-subagent-view:not([data-inline]) {\n    font-size: var(--aparte-content-font-size);\n    line-height: var(--aparte-content-line-height);\n    color: var(--aparte-content-color);\n    font-family: var(--aparte-font-family);\n}\n\n/* Nothing to show (an unknown sub-agent, or one not started yet): nothing drawn. */\naparte-subagent-view[data-empty] {\n    display: none;\n}\n\n.aparte-subagent-task {\n    margin: 0 0 var(--aparte-space-3);\n    color: var(--aparte-text-muted);\n    font-size: var(--aparte-font-size-sm);\n}\n\n.aparte-subagent-transcript {\n    display: flex;\n    flex-direction: column;\n    gap: var(--aparte-space-4);\n    min-inline-size: 0;\n}\n\n.aparte-subagent-transcript:empty {\n    display: none;\n}\n\naparte-subagent-view:not([data-inline]) > .aparte-subagent-transcript {\n    padding-inline-start: var(--aparte-subagent-indent, var(--aparte-space-6));\n    border-inline-start: var(--aparte-border-width) solid var(--aparte-border);\n}\n";
+const styles = "/*\n * @aparte/plugin-subagents — a sub-agent's conversation.\n *\n * Only what is the plugin's own. The rows inside are core's (text, reasoning, tool rows,\n * a nested sub-agent's line) and wear core's sheets; under a line, the transcript sits in\n * core's tool detail, which already draws the rule and the indent a disclosure has. So\n * this sheet draws the task line, the spacing of the rows, and — for the standalone view\n * only — the same quiet rule down the leading edge, since nothing of core's is around it.\n *\n * Logical properties throughout, so a right-to-left locale puts the rule on its own\n * leading edge. No colour of its own: core's tokens. Nothing moves, so there is no motion\n * to reduce.\n */\naparte-subagent-view {\n    display: block;\n    min-inline-size: 0;\n}\n\n/* Standalone (a canvas, a pane, a dialog): outside any message, so the conversation's\n   type is set here, as core's segment container sets it in a reply. */\naparte-subagent-view:not([data-inline]) {\n    font-size: var(--aparte-content-font-size);\n    line-height: var(--aparte-content-line-height);\n    color: var(--aparte-content-color);\n    font-family: var(--aparte-font-family);\n}\n\n/* Nothing to show (an unknown sub-agent, or one not started yet): nothing drawn. */\naparte-subagent-view[data-empty] {\n    display: none;\n}\n\n/* A closable view (a pane of its own): the sub-agent's name, and Close at the far end. The\n   name takes the focus when the pane opens, so it shows a ring only to the keyboard. */\n.aparte-subagent-head {\n    display: flex;\n    align-items: center;\n    gap: var(--aparte-space-3);\n    margin-block-end: var(--aparte-space-3);\n}\n\n.aparte-subagent-head[hidden] {\n    display: none;\n}\n\n.aparte-subagent-name {\n    flex: 1 1 auto;\n    min-inline-size: 0;\n    margin: 0;\n    overflow: hidden;\n    font-size: var(--aparte-font-size-md);\n    font-weight: var(--aparte-font-weight-semibold);\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.aparte-subagent-name:focus {\n    outline: none;\n}\n\n.aparte-subagent-name:focus-visible {\n    outline: var(--aparte-focus-outline-width) solid var(--aparte-border-focus);\n}\n\n.aparte-subagent-close {\n    flex: none;\n}\n\n.aparte-subagent-task {\n    margin: 0 0 var(--aparte-space-3);\n    color: var(--aparte-text-muted);\n    font-size: var(--aparte-font-size-sm);\n}\n\n.aparte-subagent-transcript {\n    display: flex;\n    flex-direction: column;\n    gap: var(--aparte-space-4);\n    min-inline-size: 0;\n}\n\n.aparte-subagent-transcript:empty {\n    display: none;\n}\n\naparte-subagent-view:not([data-inline]) > .aparte-subagent-transcript {\n    padding-inline-start: var(--aparte-subagent-indent, var(--aparte-space-6));\n    border-inline-start: var(--aparte-border-width) solid var(--aparte-border);\n}\n";
 const STYLE_ID = "aparte-subagent-styles";
 const MARK = ".aparte-subagent-transcript";
 let holder = null;
@@ -660,6 +765,86 @@ function ensureStyles() {
   document.head.appendChild(style);
   holder = style;
 }
+const WORDS = {
+  /** How many tool calls a sub-agent made, on its line: "3 tools". */
+  subagentsTools: {
+    en: "one:{n} tool|other:{n} tools",
+    fr: "one:{n} outil|other:{n} outils",
+    de: "one:{n} Tool|other:{n} Tools",
+    es: "one:{n} herramienta|other:{n} herramientas",
+    it: "one:{n} strumento|other:{n} strumenti",
+    ja: "other:{n} 個のツール",
+    ko: "other:도구 {n}개",
+    pt: "one:{n} ferramenta|other:{n} ferramentas",
+    ru: "one:{n} инструмент|few:{n} инструмента|many:{n} инструментов|other:{n} инструмента",
+    zh: "other:{n} 个工具"
+  },
+  /** What a sub-agent's second line says before its first call. */
+  subagentsStarting: {
+    en: "Starting…",
+    fr: "Démarrage…",
+    de: "Wird gestartet…",
+    es: "Iniciando…",
+    it: "Avvio…",
+    ja: "開始しています…",
+    ko: "시작하는 중…",
+    pt: "Iniciando…",
+    ru: "Запуск…",
+    zh: "正在启动…"
+  },
+  /** The name of a sub-agent that was given none, when no call names its line either. */
+  subagentsUnnamed: {
+    en: "Sub-agent",
+    fr: "Sous-agent",
+    de: "Subagent",
+    es: "Subagente",
+    it: "Sottoagente",
+    ja: "サブエージェント",
+    ko: "하위 에이전트",
+    pt: "Subagente",
+    ru: "Субагент",
+    zh: "子智能体"
+  },
+  /** The Open button on a sub-agent's line (`setupSubagents({ open: 'event' })`): its name and tooltip. */
+  subagentsOpen: {
+    en: "Open {name}",
+    fr: "Ouvrir {name}",
+    de: "{name} öffnen",
+    es: "Abrir {name}",
+    it: "Apri {name}",
+    ja: "{name} を開く",
+    ko: "{name} 열기",
+    pt: "Abrir {name}",
+    ru: "Открыть: {name}",
+    zh: "打开 {name}"
+  },
+  /** The Close button of a `<aparte-subagent-view closable>`. */
+  subagentsClose: {
+    en: "Close",
+    fr: "Fermer",
+    de: "Schließen",
+    es: "Cerrar",
+    it: "Chiudi",
+    ja: "閉じる",
+    ko: "닫기",
+    pt: "Fechar",
+    ru: "Закрыть",
+    zh: "关闭"
+  }
+};
+function languageOf(config) {
+  const tag = config.getLocale().tag;
+  return typeof tag === "string" && tag ? tag.split("-")[0].toLowerCase() : "en";
+}
+function word(config, key) {
+  const fromApp = config.getLocale()[key];
+  const table = WORDS[key];
+  return typeof fromApp === "string" && fromApp || table[languageOf(config)] || table.en;
+}
+function toolCount(config, n) {
+  const tag = config.getLocale().tag;
+  return pluralize(word(config, "subagentsTools"), n, typeof tag === "string" && tag ? tag : void 0);
+}
 const CONVERSATION_EVENTS = [
   "aparte-subagent-start",
   "aparte-subagent-end",
@@ -702,10 +887,14 @@ const ElementBase = typeof HTMLElement === "undefined" ? class {
 } : HTMLElement;
 class AparteSubagentView extends ElementBase {
   static get observedAttributes() {
-    return ["for", "message-id", "agent-id"];
+    return ["for", "message-id", "agent-id", "closable"];
   }
   _chat = null;
   _task = null;
+  /** A closable view's head: the sub-agent's name and Close. */
+  _head = null;
+  _name = null;
+  _close = null;
   _drawing = null;
   /** The config the rows were drawn with, and the segment they were drawn from. */
   _config = null;
@@ -713,10 +902,20 @@ class AparteSubagentView extends ElementBase {
   _listening = null;
   _stopConfig = null;
   _stopWatching = null;
+  _stopRenderers = null;
   _queued = false;
   _releaseQueued = false;
   _warned = "";
   _onConversation = () => this._schedule();
+  _onKeydown = (event) => {
+    if (event.key !== "Escape" || event.defaultPrevented || !this._closable()) return;
+    event.preventDefault();
+    this._emitClose();
+  };
+  /** A renderer registered or taken off on the config the rows were drawn with: the rows it changes are drawn again. */
+  _onRenderers = (config) => {
+    if (config === this._config) this.refresh();
+  };
   _onWrite = (write) => {
     if (fed.has(this) || !this.isConnected) return;
     if (write.messageId !== this.getAttribute("message-id") || write.agentId !== this.getAttribute("agent-id")) return;
@@ -734,6 +933,10 @@ class AparteSubagentView extends ElementBase {
     this._listen();
     this.refresh();
   }
+  /** Put the focus on the sub-agent's name, in a `closable` view: where a pane that just opened starts. */
+  focusTitle() {
+    if (this._name && !this._head?.hidden) this._name.focus();
+  }
   /** Read the sub-agent again and draw it: what the element does on every change it hears. */
   refresh() {
     const feed = fed.get(this);
@@ -745,6 +948,8 @@ class AparteSubagentView extends ElementBase {
   connectedCallback() {
     ensureStyles();
     this._build();
+    this.addEventListener("keydown", this._onKeydown);
+    this._stopRenderers ??= onRenderersChange(this._onRenderers);
     if (!fed.has(this)) {
       this._listen();
       this._stopWatching ??= watchLaneWrites(this._onWrite);
@@ -755,11 +960,14 @@ class AparteSubagentView extends ElementBase {
     this.refresh();
   }
   disconnectedCallback() {
+    this.removeEventListener("keydown", this._onKeydown);
     this._unlisten();
     this._stopWatching?.();
     this._stopWatching = null;
     this._stopConfig?.();
     this._stopConfig = null;
+    this._stopRenderers?.();
+    this._stopRenderers = null;
     if (this._releaseQueued) return;
     this._releaseQueued = true;
     queueMicrotask(() => {
@@ -772,6 +980,7 @@ class AparteSubagentView extends ElementBase {
     if (previous === value || !this.isConnected || fed.has(this)) return;
     if (_name === "for") this._listen();
     this.refresh();
+    if (_name === "closable" && this._config) this._relabelHead(this._config);
   }
   // ── Reading the conversation ───────────────────────────────────────────
   _source() {
@@ -809,7 +1018,8 @@ class AparteSubagentView extends ElementBase {
     } catch {
       return null;
     }
-    const anchor = message ? findSubagent(message.segments ?? [], agentId) : void 0;
+    const live = lastLaneWrite(messageId, agentId);
+    const anchor = (message ? findSubagent(message.segments ?? [], agentId) : void 0) ?? (live && this._matches(live) ? live.anchor : void 0);
     const key = `${messageId}\0${agentId}`;
     if (message && !anchor && !message.isStreaming && message.status !== "pending" && message.status !== "streaming" && this._warned !== key) {
       this._warned = key;
@@ -844,21 +1054,64 @@ class AparteSubagentView extends ElementBase {
   }
   _onConfigChange() {
     this.refresh();
-    if (this._config) this._drawing?.relabel(this._config);
+    if (this._config) {
+      this._drawing?.relabel(this._config);
+      this._relabelHead(this._config);
+    }
+  }
+  /** A pane of its own, never a line's detail. */
+  _closable() {
+    return this.hasAttribute("closable") && !fed.has(this);
+  }
+  _emitClose() {
+    this.dispatchEvent(new CustomEvent("aparte-subagent-view-close", { bubbles: true, composed: true }));
+  }
+  /** The head's words, in the chat's language: the name, and Close. */
+  _relabelHead(config) {
+    if (!this._head) return;
+    const closable = this._closable();
+    this._head.hidden = !closable;
+    if (!closable) {
+      this._name.textContent = "";
+      return;
+    }
+    const name = (this._anchor ? subagentOf(this._anchor)?.name?.trim() : "") || word(config, "subagentsUnnamed");
+    if (this._name.textContent !== name) this._name.textContent = name;
+    const close = word(config, "subagentsClose");
+    if (this._close.getAttribute("aria-label") !== close) {
+      this._close.setAttribute("aria-label", close);
+      this._close.title = close;
+      this._close.innerHTML = config.getIcon("close");
+    }
   }
   // ── Drawing ────────────────────────────────────────────────────────────
   _build() {
     if (this._drawing) {
       if (this._task.parentNode !== this) this.prepend(this._task);
+      if (this._head.parentNode !== this) this.prepend(this._head);
       if (this._drawing.container.parentNode !== this) this.append(this._drawing.container);
       return;
     }
+    const head = this.ownerDocument.createElement("div");
+    head.className = "aparte-subagent-head";
+    head.hidden = true;
+    const name = this.ownerDocument.createElement("h2");
+    name.className = "aparte-subagent-name";
+    name.tabIndex = -1;
+    const close = this.ownerDocument.createElement("button");
+    close.type = "button";
+    close.className = "aparte-btn aparte-btn--icon aparte-btn--sm aparte-subagent-close";
+    close.addEventListener("click", () => this._emitClose());
+    head.append(name, close);
+    this._head = head;
+    this._name = name;
+    this._close = close;
     const task = this.ownerDocument.createElement("p");
     task.className = "aparte-subagent-task";
     task.hidden = true;
     const list = this.ownerDocument.createElement("div");
     list.className = "aparte-subagent-transcript";
-    this.append(task, list);
+    this.append(head, task, list);
     this._task = task;
     this._drawing = new LaneDrawing(list);
   }
@@ -874,6 +1127,7 @@ class AparteSubagentView extends ElementBase {
     const task = (anchor ? subagentOf(anchor)?.description?.trim() : "") ?? "";
     if (this._task.textContent !== task) this._task.textContent = task;
     this._task.hidden = !task;
+    this._relabelHead(config);
     const lane = anchor ? laneOf(anchor) : { segments: [], live: false };
     runWithConfig(config, () => drawing.sync(lane.segments, config, lane.live));
   }
@@ -927,60 +1181,6 @@ const subagentTranscript = (segment) => {
   feedView(view, segment, config);
   return view;
 };
-const WORDS = {
-  /** How many tool calls a sub-agent made, on its line: "3 tools". */
-  subagentsTools: {
-    en: "one:{n} tool|other:{n} tools",
-    fr: "one:{n} outil|other:{n} outils",
-    de: "one:{n} Tool|other:{n} Tools",
-    es: "one:{n} herramienta|other:{n} herramientas",
-    it: "one:{n} strumento|other:{n} strumenti",
-    ja: "other:{n} 個のツール",
-    ko: "other:도구 {n}개",
-    pt: "one:{n} ferramenta|other:{n} ferramentas",
-    ru: "one:{n} инструмент|few:{n} инструмента|many:{n} инструментов|other:{n} инструмента",
-    zh: "other:{n} 个工具"
-  },
-  /** What a sub-agent's second line says before its first call. */
-  subagentsStarting: {
-    en: "Starting…",
-    fr: "Démarrage…",
-    de: "Wird gestartet…",
-    es: "Iniciando…",
-    it: "Avvio…",
-    ja: "開始しています…",
-    ko: "시작하는 중…",
-    pt: "Iniciando…",
-    ru: "Запуск…",
-    zh: "正在启动…"
-  },
-  /** The name of a sub-agent that was given none, when no call names its line either. */
-  subagentsUnnamed: {
-    en: "Sub-agent",
-    fr: "Sous-agent",
-    de: "Subagent",
-    es: "Subagente",
-    it: "Sottoagente",
-    ja: "サブエージェント",
-    ko: "하위 에이전트",
-    pt: "Subagente",
-    ru: "Субагент",
-    zh: "子智能体"
-  }
-};
-function languageOf(config) {
-  const tag = config.getLocale().tag;
-  return typeof tag === "string" && tag ? tag.split("-")[0].toLowerCase() : "en";
-}
-function word(config, key) {
-  const fromApp = config.getLocale()[key];
-  const table = WORDS[key];
-  return typeof fromApp === "string" && fromApp || table[languageOf(config)] || table.en;
-}
-function toolCount(config, n) {
-  const tag = config.getLocale().tag;
-  return pluralize(word(config, "subagentsTools"), n, typeof tag === "string" && tag ? tag : void 0);
-}
 const standIns = /* @__PURE__ */ new WeakSet();
 function markStandIn(segment) {
   standIns.add(segment);
@@ -999,12 +1199,12 @@ function callLine(call, config) {
   const name = call.toolCall?.name ?? "";
   const nested = subagentOf(call);
   const label = config.getToolDisplay(name)?.label;
-  const shown = (label !== void 0 ? textOf(() => typeof label === "function" ? label(call) : label) : "") || nested?.name?.trim() || name;
+  const shown2 = (label !== void 0 ? textOf(() => typeof label === "function" ? label(call) : label) : "") || nested?.name?.trim() || name;
   const summary = config.getToolSummary(name);
   const target = (summary ? textOf(() => summary(call)) : "") || nested?.description?.trim() || "";
-  return [shown, target].filter(Boolean).join(" ");
+  return [shown2, target].filter(Boolean).join(" ");
 }
-function activityOf(sub, config) {
+function activityOf(sub, config, step) {
   let latest;
   for (let i = sub.segments.length - 1; i >= 0; i -= 1) {
     const segment = sub.segments[i];
@@ -1012,6 +1212,7 @@ function activityOf(sub, config) {
     if (isOpenCall(segment)) return callLine(segment, config);
     latest ??= segment;
   }
+  if (step) return step;
   return latest ? callLine(latest, config) : "";
 }
 function durationOf(anchor, sub) {
@@ -1069,7 +1270,7 @@ function createLineProvider(options = {}) {
     const note = [];
     if (!standIn && statusOfCall(segment.status) !== status) note.push(stateWord(config, status));
     if (options.activity !== false) {
-      line.activity = live ? activityOf(sub, config) || word(config, "subagentsStarting") : summary() || stateWord(config, status);
+      line.activity = live ? activityOf(sub, config, currentStep(segment.messageId, sub.id)) || word(config, "subagentsStarting") : summary() || stateWord(config, status);
     } else if (!live) {
       const done = summary();
       if (done) note.push(done);
@@ -1077,6 +1278,14 @@ function createLineProvider(options = {}) {
     if (note.length > 0) line.note = note.join(" · ");
     const details = options.details;
     line.details = typeof details === "function" ? details : details === "transcript" ? subagentTranscript : false;
+    if (options.open === "event") {
+      const shownName = name || word(config, "subagentsUnnamed");
+      line.open = {
+        label: word(config, "subagentsOpen").replace("{name}", () => shownName),
+        current: isShown(segment.messageId, sub.id),
+        onOpen: (row) => dispatchOpen(row, segment, sub, standIn)
+      };
+    }
     return line;
   };
 }
@@ -1153,12 +1362,108 @@ function setupSubagents(options = {}, config = aparteGlobalConfig) {
   installed.set(config, dispose);
   return dispose;
 }
+function connectSubagentView(options) {
+  const { chat, view, split } = options;
+  const viewPane = options.pane ?? "end";
+  const chatPane = viewPane === "end" ? "start" : "end";
+  const owner = {};
+  if (!view.chat && !view.getAttribute("for")) view.chat = chat;
+  const wasClosable = view.hasAttribute("closable");
+  view.setAttribute("closable", "");
+  let opener = null;
+  let opened = null;
+  let isOpen2 = false;
+  const roots = () => chat.contains(view) ? [chat] : [chat, view];
+  const mark = (row) => {
+    for (const root of roots()) unmarkAll(root);
+    if (row) markRow(row, true);
+  };
+  const fold = () => {
+    if (split) {
+      split.pane = chatPane;
+      split.single = true;
+    }
+    isOpen2 = false;
+    options.onClose?.();
+  };
+  const onOpen = (event) => {
+    const detail = event.detail;
+    if (!detail?.messageId || !detail.agentId) return;
+    const row = event.target instanceof HTMLElement ? event.target : null;
+    opener = row;
+    opened = detail;
+    setShown(owner, { messageId: detail.messageId, agentId: detail.agentId });
+    mark(row);
+    view.setAttribute("message-id", detail.messageId);
+    view.setAttribute("agent-id", detail.agentId);
+    if (split) {
+      split.single = false;
+      split.pane = viewPane;
+    }
+    isOpen2 = true;
+    options.onOpen?.(detail);
+    view.focusTitle();
+  };
+  const close = (giveFocusBack) => {
+    const active = view.ownerDocument.activeElement;
+    const adrift = !active || active === view.ownerDocument.body || view.contains(active);
+    setShown(owner, null);
+    mark(null);
+    fold();
+    if (giveFocusBack) {
+      const line = opener?.isConnected ? opener : lineOf(opened);
+      const button = line ? openButtonOf(line) : null;
+      if (button) button.focus();
+      else if (adrift) focusComposer(chat);
+    }
+    opener = null;
+    opened = null;
+  };
+  const lineOf = (detail) => {
+    if (!detail) return null;
+    const id = detail.toolCallId ?? detail.agentId;
+    for (const root of roots()) {
+      for (const row of root.querySelectorAll(".aparte-segment-tool-call[data-tool-call-id]")) {
+        if (row.getAttribute("data-tool-call-id") === id && openButtonOf(row)) return row;
+      }
+    }
+    return null;
+  };
+  const onClose = () => close(true);
+  const onLoaded = () => {
+    if (isOpen2 || opened) close(false);
+    view.removeAttribute("message-id");
+    view.removeAttribute("agent-id");
+  };
+  chat.addEventListener("aparte-subagent-open", onOpen);
+  const viewListens = !chat.contains(view);
+  if (viewListens) view.addEventListener("aparte-subagent-open", onOpen);
+  view.addEventListener("aparte-subagent-view-close", onClose);
+  for (const name of ["aparte-conversation-loaded", "aparte-reset-done"]) chat.addEventListener(name, onLoaded);
+  if (split && !view.getAttribute("agent-id")) {
+    split.pane = chatPane;
+    split.single = true;
+  }
+  return () => {
+    chat.removeEventListener("aparte-subagent-open", onOpen);
+    if (viewListens) view.removeEventListener("aparte-subagent-open", onOpen);
+    view.removeEventListener("aparte-subagent-view-close", onClose);
+    for (const name of ["aparte-conversation-loaded", "aparte-reset-done"]) chat.removeEventListener(name, onLoaded);
+    setShown(owner, null);
+    mark(null);
+    if (!wasClosable) view.removeAttribute("closable");
+  };
+}
+function focusComposer(chat) {
+  chat.querySelector("aparte-composer-input")?.focusEnd?.();
+}
 export {
   AparteSubagentView as A,
   SUBAGENT_SEGMENT_TYPE as S,
   subagentOf as a,
   subagentStatus as b,
-  subagentTranscript as c,
+  connectSubagentView as c,
+  subagentTranscript as d,
   setupSubagents as s
 };
-//# sourceMappingURL=setup-CaTzFtu8.js.map
+//# sourceMappingURL=connect-65jiVmf_.js.map