opencode-subagents-sidebar-plugin 0.1.5 → 0.1.6

package/dist/tui.js

@@ -10,9 +10,9 @@ import { createElement as _$createElement } from "@opentui/solid";
 /** @jsxImportSource @opentui/solid */
 
 import { Portal, useTerminalDimensions } from "@opentui/solid";
-import { elapsedLabel } from "./activity.js";
+import { elapsedLabel, latestAssistantActivity } from "./activity.js";
 import { placePopover } from "./popover.js";
-import { canOpenTaskSession, isTaskPart, isVisibleTask, latestAssistantText, resolveTaskModel, taskAgent, taskDescription, taskModeLabel, taskModelLabel, taskSessionID, taskStatusLabel, taskVariantLabel } from "./tasks.js";
+import { canOpenTaskSession, isTaskPart, isVisibleTask, resolveTaskModel, taskAgent, taskDescription, taskModeLabel, taskModelLabel, taskSessionID, taskStatusLabel, taskVariantLabel } from "./tasks.js";
 import { createEffect, createMemo, createSignal, For, on, onCleanup, onMount, Show } from "solid-js";
 const POPOVER_SIZE = {
   width: 52,
@@ -33,7 +33,6 @@ function TaskPopover(props) {
   const callID = () => props.ownership().callID;
   let portalWrapper;
   let hydrationRequest = 0;
-  let requestedHydration;
   const fallback = () => {
     const known = props.fallbackFor(callID());
     if (known) return known;
@@ -66,17 +65,14 @@ function TaskPopover(props) {
     if (!sessionID) return undefined;
     const messages = props.api.state.session.messages(sessionID);
     const parts = new Map();
-    let hasParts = false;
     for (const message of messages) {
       const messageParts = props.api.state.part(message.id);
       parts.set(message.id, messageParts);
-      if (messageParts.length) hasParts = true;
     }
     return {
       sessionID,
       messages,
-      parts,
-      hasParts
+      parts
     };
   });
   const ownsHydration = (token, sessionID, request) => {
@@ -92,34 +88,24 @@ function TaskPopover(props) {
         throwOnError: true
       });
       if (!ownsHydration(token, sessionID, request)) return;
-      if (liveChildMessages()?.hasParts) return;
       setHydratedChildMessages({
         token,
         sessionID,
         messages: result.data
       });
-    } catch {
-      if (ownsHydration(token, sessionID, request)) requestedHydration = undefined;
-    }
+    } catch {}
   };
   createEffect(() => {
+    props.revision();
+    props.now();
     const ownership = props.ownership();
     const sessionID = childSessionID();
-    const live = liveChildMessages();
-    if (!sessionID || live?.hasParts) {
-      if (requestedHydration) {
-        requestedHydration = undefined;
-        hydrationRequest += 1;
-      }
+    if (!sessionID) {
+      hydrationRequest += 1;
+      setHydratedChildMessages(undefined);
       return;
     }
-    if (requestedHydration?.token === ownership.token && requestedHydration.sessionID === sessionID) return;
     const request = ++hydrationRequest;
-    requestedHydration = {
-      token: ownership.token,
-      sessionID
-    };
-    setHydratedChildMessages(undefined);
     void hydrateChildMessages(ownership.token, sessionID, request);
   });
   const latestResponse = createMemo(() => {
@@ -127,14 +113,17 @@ function TaskPopover(props) {
     const sessionID = childSessionID();
     if (!sessionID) return undefined;
     const live = liveChildMessages();
-    if (live?.hasParts) return latestAssistantText(live.messages, messageID => live.parts.get(messageID) ?? []);
+    const liveActivity = live ? latestAssistantActivity(live.messages, messageID => live.parts.get(messageID) ?? []) : undefined;
+    if (liveActivity) return liveActivity;
     const hydrated = hydratedChildMessages();
     if (!hydrated || hydrated.token !== ownership.token || hydrated.sessionID !== sessionID) return undefined;
     const parts = new Map(hydrated.messages.map(message => [message.info.id, message.parts]));
-    return latestAssistantText(hydrated.messages.map(message => message.info), messageID => parts.get(messageID) ?? []);
+    return latestAssistantActivity(hydrated.messages.map(message => message.info), messageID => parts.get(messageID) ?? []);
   });
-  const responseLabel = () => latestResponse() ?? (childSessionID() ? "Waiting for assistant response" : "Waiting for child session");
-  const openSession = () => {
+  const responseLabel = () => latestResponse() ?? (childSessionID() ? "Waiting for subagent activity" : "Waiting for child session");
+  const stopInside = event => event.stopPropagation();
+  const openSession = event => {
+    event.stopPropagation();
     const sessionID = childSessionID();
     if (!canOpen() || !sessionID) return;
     props.api.route.navigate("session", {
@@ -142,21 +131,24 @@ function TaskPopover(props) {
     });
     props.close();
   };
-  const applyPortalPlacement = (next = placement()) => {
+  const closePopover = event => {
+    event.stopPropagation();
+    props.close();
+  };
+  const applyPortalOverlay = (next = viewport()) => {
     const wrapper = portalWrapper;
     if (!wrapper || wrapper.isDestroyed) return;
     wrapper.position = "absolute";
-    wrapper.left = next.left;
-    wrapper.top = next.top;
+    wrapper.left = 0;
+    wrapper.top = 0;
     wrapper.width = next.width;
     wrapper.height = next.height;
     wrapper.zIndex = POPOVER_Z_INDEX;
     wrapper.focusable = false;
   };
-  createEffect(() => applyPortalPlacement(placement()));
+  createEffect(() => applyPortalOverlay(viewport()));
   onCleanup(() => {
     hydrationRequest += 1;
-    requestedHydration = undefined;
     portalWrapper = undefined;
   });
   return _$createComponent(Portal, {
@@ -165,124 +157,138 @@ function TaskPopover(props) {
     },
     ref: element => {
       portalWrapper = element;
-      applyPortalPlacement();
+      applyPortalOverlay();
     },
     get children() {
       var _el$ = _$createElement("box"),
-        _el$2 = _$createElement("text"),
-        _el$3 = _$createElement("b"),
-        _el$5 = _$createElement("text"),
-        _el$6 = _$createTextNode(`Agent: `),
-        _el$7 = _$createElement("text"),
-        _el$8 = _$createTextNode(`Assigned: `),
-        _el$9 = _$createElement("text"),
-        _el$0 = _$createTextNode(`Latest: `),
-        _el$1 = _$createElement("text"),
-        _el$10 = _$createTextNode(`Status: `),
-        _el$11 = _$createElement("text"),
-        _el$12 = _$createTextNode(`Model: `),
-        _el$13 = _$createTextNode(` · `),
-        _el$14 = _$createElement("text"),
-        _el$15 = _$createTextNode(` · `),
-        _el$16 = _$createElement("text"),
-        _el$17 = _$createTextNode(`Child: `),
-        _el$18 = _$createElement("box"),
+        _el$2 = _$createElement("box"),
+        _el$3 = _$createElement("text"),
+        _el$4 = _$createElement("b"),
+        _el$6 = _$createElement("text"),
+        _el$7 = _$createTextNode(`Agent: `),
+        _el$8 = _$createElement("text"),
+        _el$9 = _$createTextNode(`Assigned: `),
+        _el$0 = _$createElement("text"),
+        _el$1 = _$createTextNode(`Current: `),
+        _el$10 = _$createElement("text"),
+        _el$11 = _$createTextNode(`Status: `),
+        _el$12 = _$createElement("text"),
+        _el$13 = _$createTextNode(`Model: `),
+        _el$14 = _$createTextNode(` · `),
+        _el$15 = _$createElement("text"),
+        _el$16 = _$createTextNode(` · `),
+        _el$17 = _$createElement("text"),
+        _el$18 = _$createTextNode(`Child: `),
         _el$19 = _$createElement("box"),
-        _el$20 = _$createElement("text"),
-        _el$21 = _$createElement("b"),
-        _el$23 = _$createElement("box"),
-        _el$24 = _$createElement("text"),
-        _el$25 = _$createElement("b");
+        _el$20 = _$createElement("box"),
+        _el$21 = _$createElement("text"),
+        _el$22 = _$createElement("b"),
+        _el$24 = _$createElement("box"),
+        _el$25 = _$createElement("text"),
+        _el$26 = _$createElement("b");
       _$insertNode(_el$, _el$2);
-      _$insertNode(_el$, _el$5);
-      _$insertNode(_el$, _el$7);
-      _$insertNode(_el$, _el$9);
-      _$insertNode(_el$, _el$1);
-      _$insertNode(_el$, _el$11);
-      _$insertNode(_el$, _el$14);
-      _$insertNode(_el$, _el$16);
-      _$insertNode(_el$, _el$18);
       _$setProp(_el$, "width", "100%");
       _$setProp(_el$, "height", "100%");
       _$setProp(_el$, "focusable", false);
-      _$setProp(_el$, "live", true);
-      _$setProp(_el$, "border", true);
-      _$setProp(_el$, "padding", 1);
-      _$setProp(_el$, "flexDirection", "column");
-      _$setProp(_el$, "overflow", "hidden");
       _$insertNode(_el$2, _el$3);
-      _$setProp(_el$2, "wrapMode", "none");
-      _$setProp(_el$2, "truncate", true);
-      _$insertNode(_el$3, _$createTextNode(`Subagent details`));
-      _$insertNode(_el$5, _el$6);
-      _$setProp(_el$5, "wrapMode", "none");
-      _$setProp(_el$5, "truncate", true);
-      _$insert(_el$5, () => taskAgent(part() ?? fallback().part), null);
-      _$insertNode(_el$7, _el$8);
-      _$setProp(_el$7, "wrapMode", "none");
-      _$setProp(_el$7, "truncate", true);
-      _$insert(_el$7, () => taskDescription(part() ?? fallback().part), null);
-      _$insertNode(_el$9, _el$0);
-      _$setProp(_el$9, "wrapMode", "none");
-      _$setProp(_el$9, "truncate", true);
-      _$insert(_el$9, responseLabel, null);
-      _$insertNode(_el$1, _el$10);
-      _$setProp(_el$1, "wrapMode", "none");
-      _$setProp(_el$1, "truncate", true);
-      _$insert(_el$1, () => taskStatusLabel(part() ?? fallback().part, childSessionID() ? props.api.state.session.status(childSessionID()) : undefined), null);
-      _$insertNode(_el$11, _el$12);
-      _$insertNode(_el$11, _el$13);
-      _$setProp(_el$11, "wrapMode", "none");
-      _$setProp(_el$11, "truncate", true);
-      _$insert(_el$11, () => modelName(props.api, model()), _el$13);
-      _$insert(_el$11, () => taskVariantLabel(model()) ?? "pending", null);
-      _$insertNode(_el$14, _el$15);
-      _$setProp(_el$14, "wrapMode", "none");
-      _$setProp(_el$14, "truncate", true);
-      _$insert(_el$14, () => taskModeLabel(part() ?? fallback().part), _el$15);
-      _$insert(_el$14, () => elapsedLabel(props.now() - props.startedAt(part() ?? fallback().part)), null);
-      _$insertNode(_el$16, _el$17);
-      _$setProp(_el$16, "wrapMode", "none");
-      _$setProp(_el$16, "truncate", true);
-      _$insert(_el$16, () => childSessionID() ?? "Waiting for child session", null);
-      _$insertNode(_el$18, _el$19);
-      _$insertNode(_el$18, _el$23);
-      _$setProp(_el$18, "flexDirection", "row");
-      _$setProp(_el$18, "gap", 2);
+      _$insertNode(_el$2, _el$6);
+      _$insertNode(_el$2, _el$8);
+      _$insertNode(_el$2, _el$0);
+      _$insertNode(_el$2, _el$10);
+      _$insertNode(_el$2, _el$12);
+      _$insertNode(_el$2, _el$15);
+      _$insertNode(_el$2, _el$17);
+      _$insertNode(_el$2, _el$19);
+      _$setProp(_el$2, "position", "absolute");
+      _$setProp(_el$2, "focusable", false);
+      _$setProp(_el$2, "live", true);
+      _$setProp(_el$2, "border", true);
+      _$setProp(_el$2, "padding", 1);
+      _$setProp(_el$2, "flexDirection", "column");
+      _$setProp(_el$2, "overflow", "hidden");
+      _$setProp(_el$2, "onMouseUp", stopInside);
+      _$insertNode(_el$3, _el$4);
+      _$setProp(_el$3, "wrapMode", "none");
+      _$setProp(_el$3, "truncate", true);
+      _$insertNode(_el$4, _$createTextNode(`Subagent details`));
+      _$insertNode(_el$6, _el$7);
+      _$setProp(_el$6, "wrapMode", "none");
+      _$setProp(_el$6, "truncate", true);
+      _$insert(_el$6, () => taskAgent(part() ?? fallback().part), null);
+      _$insertNode(_el$8, _el$9);
+      _$setProp(_el$8, "wrapMode", "none");
+      _$setProp(_el$8, "truncate", true);
+      _$insert(_el$8, () => taskDescription(part() ?? fallback().part), null);
+      _$insertNode(_el$0, _el$1);
+      _$setProp(_el$0, "wrapMode", "none");
+      _$setProp(_el$0, "truncate", true);
+      _$insert(_el$0, responseLabel, null);
+      _$insertNode(_el$10, _el$11);
+      _$setProp(_el$10, "wrapMode", "none");
+      _$setProp(_el$10, "truncate", true);
+      _$insert(_el$10, () => taskStatusLabel(part() ?? fallback().part, childSessionID() ? props.api.state.session.status(childSessionID()) : undefined), null);
+      _$insertNode(_el$12, _el$13);
+      _$insertNode(_el$12, _el$14);
+      _$setProp(_el$12, "wrapMode", "none");
+      _$setProp(_el$12, "truncate", true);
+      _$insert(_el$12, () => modelName(props.api, model()), _el$14);
+      _$insert(_el$12, () => taskVariantLabel(model()) ?? "pending", null);
+      _$insertNode(_el$15, _el$16);
+      _$setProp(_el$15, "wrapMode", "none");
+      _$setProp(_el$15, "truncate", true);
+      _$insert(_el$15, () => taskModeLabel(part() ?? fallback().part), _el$16);
+      _$insert(_el$15, () => elapsedLabel(props.now() - props.startedAt(part() ?? fallback().part)), null);
+      _$insertNode(_el$17, _el$18);
+      _$setProp(_el$17, "wrapMode", "none");
+      _$setProp(_el$17, "truncate", true);
+      _$insert(_el$17, () => childSessionID() ?? "Waiting for child session", null);
       _$insertNode(_el$19, _el$20);
-      _$setProp(_el$19, "onMouseUp", openSession);
+      _$insertNode(_el$19, _el$24);
+      _$setProp(_el$19, "flexDirection", "row");
+      _$setProp(_el$19, "gap", 2);
       _$insertNode(_el$20, _el$21);
-      _$insertNode(_el$21, _$createTextNode(`Open Session`));
-      _$insertNode(_el$23, _el$24);
+      _$setProp(_el$20, "onMouseUp", openSession);
+      _$insertNode(_el$21, _el$22);
+      _$insertNode(_el$22, _$createTextNode(`Open Session`));
       _$insertNode(_el$24, _el$25);
-      _$insertNode(_el$25, _$createTextNode(`Close`));
+      _$setProp(_el$24, "onMouseUp", closePopover);
+      _$insertNode(_el$25, _el$26);
+      _$insertNode(_el$26, _$createTextNode(`Close`));
       _$effect(_p$ => {
-        var _v$ = props.api.theme.current.borderActive,
-          _v$2 = props.api.theme.current.backgroundPanel,
-          _v$3 = props.api.theme.current.text,
-          _v$4 = props.api.theme.current.text,
-          _v$5 = props.api.theme.current.textMuted,
-          _v$6 = props.api.theme.current.textMuted,
-          _v$7 = props.api.theme.current.textMuted,
-          _v$8 = props.api.theme.current.textMuted,
-          _v$9 = props.api.theme.current.textMuted,
+        var _v$ = props.close,
+          _v$2 = placement().left,
+          _v$3 = placement().top,
+          _v$4 = placement().width,
+          _v$5 = placement().height,
+          _v$6 = props.api.theme.current.borderActive,
+          _v$7 = props.api.theme.current.backgroundPanel,
+          _v$8 = props.api.theme.current.text,
+          _v$9 = props.api.theme.current.text,
           _v$0 = props.api.theme.current.textMuted,
-          _v$1 = canOpen() ? props.api.theme.current.primary : props.api.theme.current.textMuted,
-          _v$10 = props.close,
-          _v$11 = props.api.theme.current.primary;
-        _v$ !== _p$.e && (_p$.e = _$setProp(_el$, "borderColor", _v$, _p$.e));
-        _v$2 !== _p$.t && (_p$.t = _$setProp(_el$, "backgroundColor", _v$2, _p$.t));
-        _v$3 !== _p$.a && (_p$.a = _$setProp(_el$2, "fg", _v$3, _p$.a));
-        _v$4 !== _p$.o && (_p$.o = _$setProp(_el$5, "fg", _v$4, _p$.o));
-        _v$5 !== _p$.i && (_p$.i = _$setProp(_el$7, "fg", _v$5, _p$.i));
-        _v$6 !== _p$.n && (_p$.n = _$setProp(_el$9, "fg", _v$6, _p$.n));
-        _v$7 !== _p$.s && (_p$.s = _$setProp(_el$1, "fg", _v$7, _p$.s));
-        _v$8 !== _p$.h && (_p$.h = _$setProp(_el$11, "fg", _v$8, _p$.h));
-        _v$9 !== _p$.r && (_p$.r = _$setProp(_el$14, "fg", _v$9, _p$.r));
-        _v$0 !== _p$.d && (_p$.d = _$setProp(_el$16, "fg", _v$0, _p$.d));
-        _v$1 !== _p$.l && (_p$.l = _$setProp(_el$20, "fg", _v$1, _p$.l));
-        _v$10 !== _p$.u && (_p$.u = _$setProp(_el$23, "onMouseUp", _v$10, _p$.u));
-        _v$11 !== _p$.c && (_p$.c = _$setProp(_el$24, "fg", _v$11, _p$.c));
+          _v$1 = props.api.theme.current.textMuted,
+          _v$10 = props.api.theme.current.textMuted,
+          _v$11 = props.api.theme.current.textMuted,
+          _v$12 = props.api.theme.current.textMuted,
+          _v$13 = props.api.theme.current.textMuted,
+          _v$14 = canOpen() ? props.api.theme.current.primary : props.api.theme.current.textMuted,
+          _v$15 = props.api.theme.current.primary;
+        _v$ !== _p$.e && (_p$.e = _$setProp(_el$, "onMouseUp", _v$, _p$.e));
+        _v$2 !== _p$.t && (_p$.t = _$setProp(_el$2, "left", _v$2, _p$.t));
+        _v$3 !== _p$.a && (_p$.a = _$setProp(_el$2, "top", _v$3, _p$.a));
+        _v$4 !== _p$.o && (_p$.o = _$setProp(_el$2, "width", _v$4, _p$.o));
+        _v$5 !== _p$.i && (_p$.i = _$setProp(_el$2, "height", _v$5, _p$.i));
+        _v$6 !== _p$.n && (_p$.n = _$setProp(_el$2, "borderColor", _v$6, _p$.n));
+        _v$7 !== _p$.s && (_p$.s = _$setProp(_el$2, "backgroundColor", _v$7, _p$.s));
+        _v$8 !== _p$.h && (_p$.h = _$setProp(_el$3, "fg", _v$8, _p$.h));
+        _v$9 !== _p$.r && (_p$.r = _$setProp(_el$6, "fg", _v$9, _p$.r));
+        _v$0 !== _p$.d && (_p$.d = _$setProp(_el$8, "fg", _v$0, _p$.d));
+        _v$1 !== _p$.l && (_p$.l = _$setProp(_el$0, "fg", _v$1, _p$.l));
+        _v$10 !== _p$.u && (_p$.u = _$setProp(_el$10, "fg", _v$10, _p$.u));
+        _v$11 !== _p$.c && (_p$.c = _$setProp(_el$12, "fg", _v$11, _p$.c));
+        _v$12 !== _p$.w && (_p$.w = _$setProp(_el$15, "fg", _v$12, _p$.w));
+        _v$13 !== _p$.m && (_p$.m = _$setProp(_el$17, "fg", _v$13, _p$.m));
+        _v$14 !== _p$.f && (_p$.f = _$setProp(_el$21, "fg", _v$14, _p$.f));
+        _v$15 !== _p$.y && (_p$.y = _$setProp(_el$25, "fg", _v$15, _p$.y));
         return _p$;
       }, {
         e: undefined,
@@ -297,12 +303,90 @@ function TaskPopover(props) {
         d: undefined,
         l: undefined,
         u: undefined,
-        c: undefined
+        c: undefined,
+        w: undefined,
+        m: undefined,
+        f: undefined,
+        y: undefined
       });
       return _el$;
     }
   });
 }
+function ModelVariant(props) {
+  return (() => {
+    var _el$28 = _$createElement("box"),
+      _el$29 = _$createElement("text");
+    _$insertNode(_el$28, _el$29);
+    _$setProp(_el$28, "flexShrink", 1);
+    _$setProp(_el$28, "minWidth", 0);
+    _$setProp(_el$28, "maxWidth", 28);
+    _$setProp(_el$28, "marginLeft", 1);
+    _$setProp(_el$28, "flexDirection", "row");
+    _$setProp(_el$29, "flexGrow", 1);
+    _$setProp(_el$29, "flexShrink", 1);
+    _$setProp(_el$29, "minWidth", 0);
+    _$setProp(_el$29, "wrapMode", "none");
+    _$setProp(_el$29, "truncate", true);
+    _$insert(_el$29, () => modelName(props.api, props.model()));
+    _$insert(_el$28, _$createComponent(Show, {
+      get when() {
+        return taskVariantLabel(props.model());
+      },
+      get fallback() {
+        return _$createComponent(Show, {
+          get when() {
+            return props.model();
+          },
+          get children() {
+            return [(() => {
+              var _el$30 = _$createElement("text");
+              _$insertNode(_el$30, _$createTextNode(`·`));
+              _$setProp(_el$30, "flexShrink", 0);
+              _$setProp(_el$30, "marginLeft", 1);
+              _$setProp(_el$30, "wrapMode", "none");
+              _$effect(_$p => _$setProp(_el$30, "fg", props.api.theme.current.textMuted, _$p));
+              return _el$30;
+            })(), (() => {
+              var _el$32 = _$createElement("text"),
+                _el$33 = _$createElement("b");
+              _$insertNode(_el$32, _el$33);
+              _$setProp(_el$32, "flexShrink", 0);
+              _$setProp(_el$32, "marginLeft", 1);
+              _$setProp(_el$32, "wrapMode", "none");
+              _$setProp(_el$32, "truncate", true);
+              _$insertNode(_el$33, _$createTextNode(`pending`));
+              _$effect(_$p => _$setProp(_el$32, "fg", props.api.theme.current.warning, _$p));
+              return _el$32;
+            })()];
+          }
+        });
+      },
+      children: variant => [(() => {
+        var _el$35 = _$createElement("text");
+        _$insertNode(_el$35, _$createTextNode(`·`));
+        _$setProp(_el$35, "flexShrink", 0);
+        _$setProp(_el$35, "marginLeft", 1);
+        _$setProp(_el$35, "wrapMode", "none");
+        _$effect(_$p => _$setProp(_el$35, "fg", props.api.theme.current.textMuted, _$p));
+        return _el$35;
+      })(), (() => {
+        var _el$37 = _$createElement("text"),
+          _el$38 = _$createElement("b");
+        _$insertNode(_el$37, _el$38);
+        _$setProp(_el$37, "flexShrink", 0);
+        _$setProp(_el$37, "marginLeft", 1);
+        _$setProp(_el$37, "wrapMode", "none");
+        _$setProp(_el$37, "truncate", true);
+        _$insert(_el$38, variant);
+        _$effect(_$p => _$setProp(_el$37, "fg", props.api.theme.current.warning, _$p));
+        return _el$37;
+      })()]
+    }), null);
+    _$effect(_$p => _$setProp(_el$29, "fg", props.api.theme.current.text, _$p));
+    return _el$28;
+  })();
+}
 function TaskCard(props) {
   // The call ID is stable, while the actual ToolPart is re-read after each event.
   // This prevents cards from retaining a stale part object after a state update.
@@ -355,131 +439,85 @@ function TaskCard(props) {
     props.openPopup(props.callID, currentAnchor);
   };
   return (() => {
-    var _el$27 = _$createElement("box"),
-      _el$28 = _$createElement("box"),
-      _el$29 = _$createElement("text"),
-      _el$30 = _$createElement("b"),
-      _el$31 = _$createElement("box"),
-      _el$32 = _$createElement("text"),
-      _el$33 = _$createElement("box"),
-      _el$34 = _$createElement("text"),
-      _el$35 = _$createElement("box"),
-      _el$36 = _$createElement("text");
-    _$insertNode(_el$27, _el$28);
-    _$insertNode(_el$27, _el$33);
+    var _el$39 = _$createElement("box"),
+      _el$40 = _$createElement("box"),
+      _el$41 = _$createElement("text"),
+      _el$42 = _$createElement("b"),
+      _el$43 = _$createElement("box"),
+      _el$44 = _$createElement("text"),
+      _el$45 = _$createElement("box"),
+      _el$46 = _$createElement("text");
+    _$insertNode(_el$39, _el$40);
+    _$insertNode(_el$39, _el$43);
     _$use(element => {
       card = element;
       updateAnchor();
-    }, _el$27);
-    _$setProp(_el$27, "onSizeChange", updateAnchor);
-    _$setProp(_el$27, "renderBefore", updateAnchor);
-    _$setProp(_el$27, "width", "100%");
-    _$setProp(_el$27, "height", 2);
-    _$setProp(_el$27, "flexDirection", "column");
-    _$setProp(_el$27, "overflow", "hidden");
-    _$setProp(_el$27, "onMouseUp", openDetails);
-    _$insertNode(_el$28, _el$29);
-    _$insertNode(_el$28, _el$31);
-    _$setProp(_el$28, "width", "100%");
-    _$setProp(_el$28, "height", 1);
-    _$setProp(_el$28, "flexDirection", "row");
-    _$setProp(_el$28, "overflow", "hidden");
-    _$insertNode(_el$29, _el$30);
-    _$setProp(_el$29, "flexGrow", 1);
-    _$setProp(_el$29, "flexShrink", 1);
-    _$setProp(_el$29, "minWidth", 0);
-    _$setProp(_el$29, "wrapMode", "none");
-    _$setProp(_el$29, "truncate", true);
-    _$insert(_el$30, (() => {
+    }, _el$39);
+    _$setProp(_el$39, "onSizeChange", updateAnchor);
+    _$setProp(_el$39, "renderBefore", updateAnchor);
+    _$setProp(_el$39, "width", "100%");
+    _$setProp(_el$39, "height", 2);
+    _$setProp(_el$39, "flexDirection", "column");
+    _$setProp(_el$39, "overflow", "hidden");
+    _$setProp(_el$39, "onMouseUp", openDetails);
+    _$insertNode(_el$40, _el$41);
+    _$setProp(_el$40, "width", "100%");
+    _$setProp(_el$40, "height", 1);
+    _$setProp(_el$40, "flexDirection", "row");
+    _$setProp(_el$40, "overflow", "hidden");
+    _$insertNode(_el$41, _el$42);
+    _$setProp(_el$41, "flexGrow", 1);
+    _$setProp(_el$41, "flexShrink", 1);
+    _$setProp(_el$41, "minWidth", 0);
+    _$setProp(_el$41, "wrapMode", "none");
+    _$setProp(_el$41, "truncate", true);
+    _$insert(_el$42, (() => {
       var _c$ = _$memo(() => !!part());
       return () => _c$() ? taskAgent(part()) : "subagent";
     })());
-    _$insertNode(_el$31, _el$32);
-    _$setProp(_el$31, "flexShrink", 1);
-    _$setProp(_el$31, "minWidth", 0);
-    _$setProp(_el$31, "maxWidth", 28);
-    _$setProp(_el$31, "marginLeft", 1);
-    _$setProp(_el$31, "flexDirection", "row");
-    _$setProp(_el$32, "flexGrow", 1);
-    _$setProp(_el$32, "flexShrink", 1);
-    _$setProp(_el$32, "minWidth", 0);
-    _$setProp(_el$32, "wrapMode", "none");
-    _$setProp(_el$32, "truncate", true);
-    _$insert(_el$32, () => modelName(props.api, model()));
-    _$insert(_el$31, _$createComponent(Show, {
-      get when() {
-        return taskVariantLabel(model());
+    _$insert(_el$40, _$createComponent(ModelVariant, {
+      get api() {
+        return props.api;
       },
-      get fallback() {
-        return _$createComponent(Show, {
-          get when() {
-            return model();
-          },
-          get children() {
-            var _el$37 = _$createElement("text");
-            _$insertNode(_el$37, _$createTextNode(`· pending`));
-            _$setProp(_el$37, "flexShrink", 0);
-            _$setProp(_el$37, "marginLeft", 1);
-            _$setProp(_el$37, "wrapMode", "none");
-            _$setProp(_el$37, "truncate", true);
-            _$effect(_$p => _$setProp(_el$37, "fg", props.api.theme.current.textMuted, _$p));
-            return _el$37;
-          }
-        });
-      },
-      children: variant => (() => {
-        var _el$39 = _$createElement("text"),
-          _el$40 = _$createTextNode(`· `);
-        _$insertNode(_el$39, _el$40);
-        _$setProp(_el$39, "flexShrink", 0);
-        _$setProp(_el$39, "marginLeft", 1);
-        _$setProp(_el$39, "wrapMode", "none");
-        _$setProp(_el$39, "truncate", true);
-        _$insert(_el$39, variant, null);
-        _$effect(_$p => _$setProp(_el$39, "fg", props.api.theme.current.textMuted, _$p));
-        return _el$39;
-      })()
+      model: model
     }), null);
-    _$insertNode(_el$33, _el$34);
-    _$insertNode(_el$33, _el$35);
-    _$setProp(_el$33, "width", "100%");
-    _$setProp(_el$33, "height", 1);
-    _$setProp(_el$33, "flexDirection", "row");
-    _$setProp(_el$33, "overflow", "hidden");
-    _$setProp(_el$34, "flexGrow", 1);
-    _$setProp(_el$34, "flexShrink", 1);
-    _$setProp(_el$34, "minWidth", 0);
-    _$setProp(_el$34, "wrapMode", "none");
-    _$setProp(_el$34, "truncate", true);
-    _$insert(_el$34, (() => {
+    _$insertNode(_el$43, _el$44);
+    _$insertNode(_el$43, _el$45);
+    _$setProp(_el$43, "width", "100%");
+    _$setProp(_el$43, "height", 1);
+    _$setProp(_el$43, "flexDirection", "row");
+    _$setProp(_el$43, "overflow", "hidden");
+    _$setProp(_el$44, "flexGrow", 1);
+    _$setProp(_el$44, "flexShrink", 1);
+    _$setProp(_el$44, "minWidth", 0);
+    _$setProp(_el$44, "wrapMode", "none");
+    _$setProp(_el$44, "truncate", true);
+    _$insert(_el$44, (() => {
       var _c$2 = _$memo(() => !!part());
       return () => _c$2() ? taskDescription(part()) : "Working";
     })());
-    _$insertNode(_el$35, _el$36);
-    _$setProp(_el$35, "width", 8);
-    _$setProp(_el$35, "flexShrink", 0);
-    _$setProp(_el$35, "flexDirection", "row");
-    _$setProp(_el$35, "justifyContent", "flex-end");
-    _$setProp(_el$36, "wrapMode", "none");
-    _$setProp(_el$36, "truncate", true);
-    _$insert(_el$36, elapsed);
+    _$insertNode(_el$45, _el$46);
+    _$setProp(_el$45, "width", 8);
+    _$setProp(_el$45, "flexShrink", 0);
+    _$setProp(_el$45, "flexDirection", "row");
+    _$setProp(_el$45, "justifyContent", "flex-end");
+    _$setProp(_el$46, "wrapMode", "none");
+    _$setProp(_el$46, "truncate", true);
+    _$insert(_el$46, elapsed);
     _$effect(_p$ => {
-      var _v$12 = props.api.theme.current.text,
-        _v$13 = props.api.theme.current.textMuted,
-        _v$14 = props.api.theme.current.textMuted,
-        _v$15 = props.api.theme.current.textMuted;
-      _v$12 !== _p$.e && (_p$.e = _$setProp(_el$29, "fg", _v$12, _p$.e));
-      _v$13 !== _p$.t && (_p$.t = _$setProp(_el$32, "fg", _v$13, _p$.t));
-      _v$14 !== _p$.a && (_p$.a = _$setProp(_el$34, "fg", _v$14, _p$.a));
-      _v$15 !== _p$.o && (_p$.o = _$setProp(_el$36, "fg", _v$15, _p$.o));
+      var _v$16 = props.api.theme.current.text,
+        _v$17 = props.api.theme.current.textMuted,
+        _v$18 = props.api.theme.current.textMuted;
+      _v$16 !== _p$.e && (_p$.e = _$setProp(_el$41, "fg", _v$16, _p$.e));
+      _v$17 !== _p$.t && (_p$.t = _$setProp(_el$44, "fg", _v$17, _p$.t));
+      _v$18 !== _p$.a && (_p$.a = _$setProp(_el$46, "fg", _v$18, _p$.a));
       return _p$;
     }, {
       e: undefined,
       t: undefined,
-      a: undefined,
-      o: undefined
+      a: undefined
     });
-    return _el$27;
+    return _el$39;
   })();
 }
 function RunningSubagents(props) {
@@ -644,33 +682,39 @@ function RunningSubagents(props) {
     setOpenPopup(undefined);
   });
   return (() => {
-    var _el$41 = _$createElement("box"),
-      _el$42 = _$createElement("text"),
-      _el$43 = _$createElement("b"),
-      _el$45 = _$createElement("span");
-    _$insertNode(_el$41, _el$42);
-    _$setProp(_el$41, "overflow", "hidden");
-    _$insertNode(_el$42, _el$43);
-    _$insertNode(_el$42, _el$45);
-    _$insertNode(_el$43, _$createTextNode(`Subagents`));
-    _$insert(_el$45, (() => {
+    var _el$47 = _$createElement("box"),
+      _el$48 = _$createElement("text"),
+      _el$49 = _$createElement("b"),
+      _el$51 = _$createElement("span");
+    _$insertNode(_el$47, _el$48);
+    _$setProp(_el$47, "overflow", "hidden");
+    _$setProp(_el$47, "flexDirection", "column");
+    _$setProp(_el$47, "gap", 1);
+    _$insertNode(_el$48, _el$49);
+    _$insertNode(_el$48, _el$51);
+    _$insertNode(_el$49, _$createTextNode(`Subagents`));
+    _$insert(_el$51, (() => {
       var _c$3 = _$memo(() => !!visibleTaskParts().length);
       return () => _c$3() ? ` (${visibleTaskParts().length} running)` : "";
     })());
-    _$insert(_el$41, _$createComponent(Show, {
+    _$insert(_el$47, _$createComponent(Show, {
       get when() {
         return taskCallIDs().length > 0;
       },
       get fallback() {
         return (() => {
-          var _el$46 = _$createElement("text");
-          _$insertNode(_el$46, _$createTextNode(`No subagent running`));
-          _$effect(_$p => _$setProp(_el$46, "fg", props.api.theme.current.textMuted, _$p));
-          return _el$46;
+          var _el$53 = _$createElement("text");
+          _$insertNode(_el$53, _$createTextNode(`No subagent running`));
+          _$effect(_$p => _$setProp(_el$53, "fg", props.api.theme.current.textMuted, _$p));
+          return _el$53;
         })();
       },
       get children() {
-        return _$createComponent(For, {
+        var _el$52 = _$createElement("box");
+        _$setProp(_el$52, "width", "100%");
+        _$setProp(_el$52, "flexDirection", "column");
+        _$setProp(_el$52, "gap", 1);
+        _$insert(_el$52, _$createComponent(For, {
           get each() {
             return taskCallIDs();
           },
@@ -688,10 +732,11 @@ function RunningSubagents(props) {
             openPopup: showPopup,
             updatePopupAnchor: updatePopupAnchor
           })
-        });
+        }));
+        return _el$52;
       }
     }), null);
-    _$insert(_el$41, _$createComponent(Show, {
+    _$insert(_el$47, _$createComponent(Show, {
       get when() {
         return openPopup();
       },
@@ -715,18 +760,18 @@ function RunningSubagents(props) {
       })
     }), null);
     _$effect(_p$ => {
-      var _v$16 = props.api.theme.current.text,
-        _v$17 = {
+      var _v$19 = props.api.theme.current.text,
+        _v$20 = {
           fg: props.api.theme.current.textMuted
         };
-      _v$16 !== _p$.e && (_p$.e = _$setProp(_el$42, "fg", _v$16, _p$.e));
-      _v$17 !== _p$.t && (_p$.t = _$setProp(_el$45, "style", _v$17, _p$.t));
+      _v$19 !== _p$.e && (_p$.e = _$setProp(_el$48, "fg", _v$19, _p$.e));
+      _v$20 !== _p$.t && (_p$.t = _$setProp(_el$51, "style", _v$20, _p$.t));
       return _p$;
     }, {
       e: undefined,
       t: undefined
     });
-    return _el$41;
+    return _el$47;
   })();
 }
 const tui = async api => {