@markmo/europacore-session-ui 0.2.0 → 0.4.0

package/dist/SessionPage-C4hSlxWQ.js

@@ -0,0 +1,906 @@
+import { jsxs as g, jsx as t } from "react/jsx-runtime";
+import { useMemo as H, useEffect as C, useRef as z, useState as S, useCallback as U, useLayoutEffect as te, memo as Ve, useId as Ie, useSyncExternalStore as Ae } from "react";
+import { useParams as We, useSearchParams as qe, useNavigate as ae } from "react-router";
+import { Sparkles as Ge, ArrowDown as Je, CircleSlash as Qe, X as Me, ImagePlus as Ye, ListPlus as Xe, Square as Ze, ArrowUp as et, RefreshCw as tt, Loader2 as nt, Pause as st, MessageSquareDashed as he, PanelRightClose as at, PanelRight as rt } from "lucide-react";
+import { c as G, s as Te, i as ge, u as B, C as D, a as P, L as R, t as it, U as ot, D as ct, b as lt, A as ut, W as dt, T as ft, R as mt, d as pt, S as ht, P as gt, M as xt, N as wt, e as bt, f as yt, B as kt, r as vt, g as Nt, h as St, j as Dt, l as Et, k as Ct, m as It, o as At, n as $e, p as Mt, q as Tt, v as $t, w as Rt, x as Pt, I as ne, y as zt, z as xe, E as Ft, F as we, G as Re, H as X, J as Lt, K as M, O as J, Q as _t, V as be, X as Pe, Y as Kt, Z as Bt, _ as Ot, $ as Ut, a0 as Ht, a1 as jt, a2 as Vt, a3 as Wt, a4 as ye, a5 as qt, a6 as ke, a7 as Gt } from "./index-CMPf-3JZ.js";
+import { p as re, w as Jt, P as Qt } from "./promptHistory-BR0NpLCI.js";
+function Yt({ onPick: e }) {
+  const n = (Te().userName() || "").split(" ")[0];
+  return /* @__PURE__ */ g("div", { className: "mx-auto flex w-full max-w-3xl flex-1 flex-col justify-center px-4 py-10 sm:px-6", children: [
+    /* @__PURE__ */ g("div", { className: "mb-7 flex flex-col items-start gap-3", children: [
+      /* @__PURE__ */ t("span", { className: "flex h-10 w-10 items-center justify-center rounded-xl bg-accent text-on-accent", children: /* @__PURE__ */ t(Ge, { size: 19 }) }),
+      /* @__PURE__ */ t("h1", { className: "text-[26px] leading-tight font-semibold text-ink", children: n ? `How can I help, ${n}?` : "How can I help?" }),
+      /* @__PURE__ */ t("p", { className: "text-[13.5px] text-muted", children: "Ask anything. The assistant can use tools, and it will ask before doing anything with side effects." })
+    ] }),
+    /* @__PURE__ */ t("div", { className: "grid grid-cols-1 gap-2 sm:grid-cols-2", children: G.suggestions.map((i) => /* @__PURE__ */ g(
+      "button",
+      {
+        type: "button",
+        onClick: () => e(i.prompt),
+        className: "rounded-xl border border-line bg-surface px-3.5 py-3 text-left transition-colors hover:border-accent hover:bg-accent-soft focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40",
+        children: [
+          /* @__PURE__ */ t("div", { className: "text-[13.5px] font-semibold text-ink", children: i.title }),
+          i.description && /* @__PURE__ */ t("div", { className: "mt-0.5 text-[12.5px] text-muted", children: i.description })
+        ]
+      },
+      i.title
+    )) })
+  ] });
+}
+function ze(e) {
+  const n = H(() => [...new Set(ge().flatMap((i) => i.keys ?? []))], []);
+  return B(e, D.session, D.reset, D.workspace, D.fleet, ...n), ge().filter((i) => i.available(e));
+}
+function ve({
+  controller: e,
+  tab: n,
+  onTab: i,
+  className: o
+}) {
+  const d = ze(e), c = d.find((l) => l.id === n) ?? d[0];
+  if (C(() => {
+    c && c.id !== n && i(c.id);
+  }, [c, n, i]), !c) return null;
+  const a = c.Component;
+  return /* @__PURE__ */ g("div", { className: P("flex min-h-0 flex-col", o), children: [
+    /* @__PURE__ */ t("div", { role: "tablist", "aria-label": "Session panels", className: "flex shrink-0 gap-0.5 overflow-x-auto border-b border-line px-2 pt-1.5", children: d.map((l) => {
+      const f = l.icon, r = l.badge?.(e) ?? null, m = l.id === c.id;
+      return /* @__PURE__ */ g(
+        "button",
+        {
+          type: "button",
+          role: "tab",
+          "aria-selected": m,
+          onClick: () => i(l.id),
+          className: P(
+            "-mb-px inline-flex h-9 shrink-0 items-center gap-1.5 border-b-2 px-2.5 text-[12.5px] font-semibold transition-colors",
+            m ? "border-accent text-ink" : "border-transparent text-muted hover:text-ink"
+          ),
+          children: [
+            /* @__PURE__ */ t(f, { size: 14 }),
+            l.label,
+            r !== null && /* @__PURE__ */ t("span", { className: "rounded-full bg-accent-soft px-1.5 text-[10.5px] text-accent tabular-nums", children: r })
+          ]
+        },
+        l.id
+      );
+    }) }),
+    /* @__PURE__ */ t("div", { role: "tabpanel", className: "min-h-0 flex-1 overflow-y-auto p-3", children: /* @__PURE__ */ t(a, { controller: e }) })
+  ] });
+}
+const Xt = 80, Zt = Ve(function({
+  controller: n,
+  block: i,
+  live: o
+}) {
+  const d = lt(i.items), c = i.items.find((f) => f.kind === "entry" && f.entry.kind === "run-end"), a = c?.kind === "entry" && c.entry.kind === "run-end" && c.entry.outcome === "cancelled", l = d ? n.store.get(d) : void 0;
+  return /* @__PURE__ */ t("div", { className: "group", children: /* @__PURE__ */ g(
+    ut,
+    {
+      header: a ? /* @__PURE__ */ g(kt, { children: [
+        /* @__PURE__ */ t(Qe, { size: 11 }),
+        " Stopped"
+      ] }) : void 0,
+      children: [
+        i.wake && /* @__PURE__ */ t(dt, { entry: i.wake }),
+        i.items.map((f) => {
+          if (f.kind === "tools") return /* @__PURE__ */ t(ft, { controller: n, entries: f.entries }, f.key);
+          const r = f.entry;
+          switch (r.kind) {
+            case "assistant":
+              return /* @__PURE__ */ t(bt, { controller: n, entry: r, answer: r.key === d }, r.key);
+            case "notice":
+              return /* @__PURE__ */ t(wt, { entry: r }, r.key);
+            case "monitor":
+              return /* @__PURE__ */ t(xt, { entry: r }, r.key);
+            case "peer":
+              return /* @__PURE__ */ t(gt, { entry: r }, r.key);
+            case "steer":
+              return /* @__PURE__ */ t(ht, { controller: n, entry: r }, r.key);
+            case "decision":
+              return /* @__PURE__ */ t(pt, { controller: n, entry: r }, r.key);
+            case "run-end":
+              return /* @__PURE__ */ t(mt, { entry: r }, r.key);
+            default:
+              return null;
+          }
+        }),
+        !o && l?.kind === "assistant" && l.text && /* @__PURE__ */ t("div", { className: "-mt-1 -ml-1.5 flex items-center gap-0.5 opacity-0 transition-opacity group-focus-within:opacity-100 group-hover:opacity-100 max-sm:opacity-100", children: /* @__PURE__ */ t(yt, { text: l.text, label: "Copy answer" }) })
+      ]
+    }
+  ) });
+});
+function en({
+  controller: e,
+  onEdit: n,
+  footer: i,
+  renderDiff: o
+}) {
+  const d = B(e, R.list, D.run), c = e.store.state.entries, a = H(() => it(c), [d, c]), l = e.running(), f = e.store.state.run?.id ?? null, r = z(null), m = z(null), p = z(!0), k = z(0), [h, b] = S(!1), y = U((w = "auto") => {
+    const x = r.current;
+    x && x.scrollTo({ top: x.scrollHeight, behavior: w });
+  }, []), E = () => {
+    const w = r.current;
+    if (!w) return;
+    const x = w.scrollHeight - w.scrollTop - w.clientHeight < Xt, T = w.scrollTop < k.current - 2;
+    k.current = w.scrollTop, x ? p.current = !0 : T && (p.current = !1), b(!p.current);
+  };
+  C(() => {
+    const w = m.current;
+    if (!w || typeof ResizeObserver > "u") return;
+    const x = new ResizeObserver(() => {
+      p.current && y();
+    });
+    return x.observe(w), () => x.disconnect();
+  }, [y]);
+  const F = a[a.length - 1];
+  return te(() => {
+    F?.kind === "user" && (p.current = !0, b(!1)), p.current && y();
+  }, [F?.key, F?.kind, y]), te(() => {
+    p.current = !0, b(!1), y();
+  }, [e, y]), /* @__PURE__ */ g("div", { className: "relative min-h-0 flex-1", children: [
+    /* @__PURE__ */ t("div", { ref: r, onScroll: E, className: "h-full overflow-y-auto overscroll-contain", children: /* @__PURE__ */ g(
+      "div",
+      {
+        ref: m,
+        role: "log",
+        "aria-live": "polite",
+        "aria-relevant": "additions",
+        "aria-label": "Conversation",
+        className: "mx-auto flex w-full max-w-3xl flex-col gap-5 px-4 pt-6 pb-8 sm:px-6",
+        children: [
+          a.map((w) => w.kind === "user" ? /* @__PURE__ */ t(ot, { controller: e, entry: w.entry, onEdit: l ? void 0 : n }, w.key) : w.kind === "diff" ? /* @__PURE__ */ t(ct, { entry: w.entry, renderDiff: o }, w.key) : /* @__PURE__ */ t(Zt, { controller: e, block: w, live: l && w.runId === f }, w.key)),
+          i
+        ]
+      }
+    ) }),
+    h && /* @__PURE__ */ g(
+      "button",
+      {
+        type: "button",
+        onClick: () => {
+          p.current = !0, b(!1), y("smooth");
+        },
+        className: "absolute bottom-3 left-1/2 inline-flex -translate-x-1/2 items-center gap-1.5 rounded-full border border-line bg-surface px-3 py-1.5 text-[12px] font-semibold text-ink shadow-pop hover:bg-surface-hover",
+        children: [
+          /* @__PURE__ */ t(Je, { size: 13 }),
+          " Jump to latest"
+        ]
+      }
+    )
+  ] });
+}
+const tn = 1536, nn = /^image\/(png|jpe?g|gif|webp)$/;
+function Ne(e) {
+  return nn.test(e.type);
+}
+async function sn(e, n = tn) {
+  const i = await new Promise((l, f) => {
+    const r = new FileReader();
+    r.onload = () => l(String(r.result)), r.onerror = () => f(r.error), r.readAsDataURL(e);
+  });
+  if (e.type === "image/gif") return { kind: "image", name: e.name, url: i };
+  const o = await new Promise((l, f) => {
+    const r = new Image();
+    r.onload = () => l(r), r.onerror = f, r.src = i;
+  }), d = Math.min(1, n / Math.max(o.width, o.height));
+  if (d === 1 && e.size < 15e5) return { kind: "image", name: e.name, url: i };
+  const c = document.createElement("canvas");
+  c.width = Math.round(o.width * d), c.height = Math.round(o.height * d), c.getContext("2d").drawImage(o, 0, 0, c.width, c.height);
+  const a = e.type === "image/png" ? "image/png" : "image/jpeg";
+  return { kind: "image", name: e.name, url: c.toDataURL(a, 0.88) };
+}
+function Se(e, n, i) {
+  return i === 0 ? 0 : (e + n + i) % i;
+}
+const an = 200;
+function rn(e, n, i) {
+  const o = z(null);
+  C(() => {
+    const a = o.current;
+    a && a.list[a.index] !== e && (o.current = null);
+  }, [e]);
+  const d = (a, l) => {
+    n(a), requestAnimationFrame(() => {
+      const f = i.current;
+      if (!f) return;
+      const r = l ? 0 : a.length;
+      f.setSelectionRange(r, r);
+    });
+  };
+  return { onKeyDown: (a) => {
+    if (a.altKey || a.ctrlKey || a.metaKey || a.shiftKey || a.key !== "ArrowUp" && a.key !== "ArrowDown") return !1;
+    const l = a.currentTarget;
+    if (l.selectionStart !== l.selectionEnd) return !1;
+    const f = l.value.slice(0, l.selectionStart), r = l.value.slice(l.selectionEnd);
+    if (a.key === "ArrowUp") {
+      if (f.includes(`
+`)) return !1;
+      const p = o.current ?? { list: re.recent(), index: -1, draft: e }, k = p.index === -1 ? p.list.length - 1 : p.index - 1;
+      return k < 0 ? !1 : (o.current = { ...p, index: k }, a.preventDefault(), d(p.list[k], !0), !0);
+    }
+    const m = o.current;
+    return !m || r.includes(`
+`) ? !1 : (a.preventDefault(), m.index + 1 >= m.list.length ? (o.current = null, d(m.draft, !1)) : (o.current = { ...m, index: m.index + 1 }, d(m.list[m.index + 1], !1)), !0);
+  }, reset: () => {
+    o.current = null;
+  } };
+}
+function on({ workspace: e, onPick: n, onClose: i }) {
+  const [o, d] = S(""), [c, a] = S(0), l = H(() => re.search("", e).slice(0, an), [e]), f = o.toLowerCase().split(/\s+/).filter(Boolean), r = l.filter((h) => f.every((b) => h.text.toLowerCase().includes(b))), m = Math.min(c, Math.max(0, r.length - 1)), p = (h) => {
+    const b = r[h];
+    b && n(b.text);
+  }, k = Ie();
+  return /* @__PURE__ */ g("div", { className: "absolute bottom-full left-0 z-20 mb-2 w-full rounded-xl border border-line bg-surface p-1.5 shadow-pop", children: [
+    /* @__PURE__ */ t(
+      "input",
+      {
+        autoFocus: !0,
+        value: o,
+        onChange: (h) => {
+          d(h.target.value), a(0);
+        },
+        onKeyDown: (h) => {
+          h.key === "ArrowDown" || h.key === "r" && h.ctrlKey ? (h.preventDefault(), a(Math.min(r.length - 1, m + 1))) : h.key === "ArrowUp" ? (h.preventDefault(), a(Math.max(0, m - 1))) : h.key === "Enter" ? (h.preventDefault(), p(m)) : h.key === "Escape" && (h.preventDefault(), i());
+        },
+        onBlur: i,
+        placeholder: "Search the prompts you have sent",
+        "aria-label": "Search prompt history",
+        "aria-controls": r.length ? k : void 0,
+        "aria-activedescendant": r.length ? `${k}-${m}` : void 0,
+        "aria-autocomplete": "list",
+        className: "mb-1 h-8 w-full rounded-md border border-line bg-surface px-2 text-[13px] text-ink placeholder:text-faint focus:border-accent focus:outline-none"
+      }
+    ),
+    r.length === 0 ? /* @__PURE__ */ t("p", { className: "px-2.5 py-2 text-[12.5px] text-muted", children: l.length ? "No prompt has those words." : "No prompts sent yet." }) : /* @__PURE__ */ t("div", { id: k, role: "listbox", "aria-label": "Prompt history", className: "max-h-64 overflow-y-auto", children: r.map((h, b) => (
+      // biome-ignore lint/a11y/useFocusableInteractive: a combobox option; focus stays in the search box (aria-activedescendant)
+      /* @__PURE__ */ g(
+        "div",
+        {
+          id: `${k}-${b}`,
+          role: "option",
+          "aria-selected": b === m,
+          onMouseDown: (y) => {
+            y.preventDefault(), p(b);
+          },
+          onMouseEnter: () => a(b),
+          className: P("flex cursor-pointer items-baseline gap-2 rounded-md px-2.5 py-1.5 text-[13px]", b === m && "bg-accent-soft"),
+          children: [
+            /* @__PURE__ */ t("span", { className: "min-w-0 flex-1 truncate text-ink", children: h.text.replace(/\s+/g, " ") }),
+            /* @__PURE__ */ g("span", { className: "shrink-0 text-[11px] text-faint", children: [
+              vt(new Date(h.at).toISOString()),
+              h.workspace && h.workspace !== e ? ` · ${h.workspace.split("/").pop()}` : ""
+            ] })
+          ]
+        },
+        `${h.at}-${b}`
+      )
+    )) })
+  ] });
+}
+const se = "artifact:", cn = 5;
+function ln(e) {
+  const n = /(?:^|\s)@([^\s@]*)$/.exec(e);
+  return n ? n[1] : null;
+}
+function un(e, n) {
+  return e.replace(/@([^\s@]*)$/, `@${n} `);
+}
+function De(e, n, i) {
+  const o = n.toLowerCase().split(/\s+/).filter(Boolean);
+  return e.filter((d) => {
+    const c = Ct(d, null).toLowerCase();
+    return o.every((a) => c.includes(a));
+  }).slice(0, i).map((d) => ({ value: `${se}${d.id}`, label: `${It(d.format)} ${At(d.title)}`, detail: d.id, kind: "artifact" }));
+}
+function dn(e, n) {
+  const [i, o] = S([]), d = Te().workspaces, c = n?.startsWith(se) ?? !1, a = n !== null && !c && e.hasWorkspace() && d !== null, l = n !== null && Nt().info?.capabilities.artifacts === !0, f = Ae(St, Dt);
+  if (C(() => {
+    l && !f.loaded && !f.loading && Et(e.id, !0);
+  }, [l, f.loaded, f.loading, e]), C(() => {
+    if (!a) {
+      o([]);
+      return;
+    }
+    let p = !1;
+    const k = setTimeout(() => {
+      d.files(e.id, n ?? "").then((h) => !p && o(h.slice(0, 30))).catch(() => !p && o([]));
+    }, 120);
+    return () => {
+      p = !0, clearTimeout(k);
+    };
+  }, [e, a, n, d]), n === null) return [];
+  const r = a ? i.map((p) => ({ value: p, label: p, kind: "file" })) : [];
+  if (!l) return r;
+  const m = [...f.list, ...f.shared];
+  return c ? De(m, n.slice(se.length), 20) : n ? [...r, ...De(m, n, cn)] : r;
+}
+function fn(e) {
+  const n = /^\/([\w.:-]*)$/.exec(e);
+  return n ? n[1].toLowerCase() : null;
+}
+function mn({ controller: e, commandContext: n, disabled: i, autoFocus: o, registerHandle: d }) {
+  const { toast: c } = $e(), a = B(e, R.commands);
+  B(e, D.run, D.pause, R.images, R.draft, R.followUps), Ae(Mt, Tt);
+  const l = e.running(), f = e.agent?.accepts_images ?? !0, r = f ? Math.min(e.agent?.image_limits?.max_count ?? G.maxImages, G.maxImages) : 0, m = e.images, [p, k] = S(e.draft), [h, b] = S(!1), [y, E] = S(0), [F, w] = S(!1), [x, T] = S(!1), v = z(null), V = z(null), L = Ie(), I = U(
+    (s) => {
+      k(s), e.setDraft(s);
+    },
+    [e]
+  ), Fe = e.version(R.draft);
+  C(() => {
+    k(e.draft);
+  }, [e, Fe]), te(() => {
+    const s = v.current;
+    s && (s.style.height = "auto", s.style.height = `${Math.min(s.scrollHeight, 240)}px`);
+  }, [p]);
+  const _ = H(
+    () => ({
+      ...n,
+      controller: e,
+      setComposer: (s) => {
+        I(s), requestAnimationFrame(() => {
+          const u = v.current;
+          u && (u.focus(), u.setSelectionRange(u.value.length, u.value.length));
+        });
+      },
+      pickImages: () => V.current?.click()
+    }),
+    [n, e, I]
+  );
+  C(() => (d?.({ setText: _.setComposer, pickImages: _.pickImages, focus: () => v.current?.focus() }), () => d?.(null)), [_, d]);
+  const ie = rn(p, I, v), oe = e.session?.workspace ?? e.newSession.workspace?.path ?? null, Q = F ? null : fn(p), $ = H(
+    () => Q === null ? [] : $t([...Rt(_), ...Pt(e)], Q).slice(0, 40),
+    [Q, _, e, a]
+  ), O = $.length > 0, Le = O || F ? null : ln(p), K = dn(e, Le), W = !O && K.length > 0, ce = (s) => {
+    const u = K[Math.min(s, K.length - 1)];
+    u && (I(un(p, u.value)), E(0), requestAnimationFrame(() => v.current?.focus()));
+  }, Y = U(
+    async (s) => {
+      const u = s.filter(Ne);
+      if (s.length && !u.length) {
+        c("Only PNG, JPEG, GIF and WebP images can be attached.", "danger");
+        return;
+      }
+      if (!f) {
+        c(`${e.agent?.name ?? "This agent"} doesn't take images.`, "danger");
+        return;
+      }
+      const N = r - e.images.length;
+      u.length > N && c(`Up to ${r} images per message.`, "danger");
+      const He = (await Promise.all(u.slice(0, Math.max(0, N)).map((j) => sn(j)))).map((j, je) => {
+        const pe = /^data:([^;,]+);base64,(.*)$/s.exec(j.url);
+        return { name: j.name ?? `image ${je + 1}`, url: j.url, image: { media_type: pe?.[1] ?? "image/png", data: pe?.[2] ?? "" } };
+      });
+      e.setImages([...e.images, ...He].slice(0, r));
+    },
+    [f, e, r, c]
+  ), A = p.trim(), le = !i && !!(A || m.length && !l), q = async (s = !1) => {
+    if (!le) return;
+    ie.reset(), A && re.record(A, oe);
+    const u = zt(A);
+    if (u && e.serverCommand(u.raw) && !xe(u.name)) {
+      I(""), await e.runServerCommand(A);
+      return;
+    }
+    if (u && xe(u.name)) {
+      I("");
+      try {
+        await Ft(_, A);
+      } catch (N) {
+        c(N instanceof Error ? N.message : String(N), "danger");
+      }
+      return;
+    }
+    if (I(""), s && l) {
+      e.queueFollowUp(A);
+      return;
+    }
+    await e.submit(A);
+  }, ue = (s) => {
+    const u = $[Math.min(s, $.length - 1)];
+    if (u) {
+      if (E(0), u.needsArgs) {
+        I(`/${u.name} `), requestAnimationFrame(() => v.current?.focus());
+        return;
+      }
+      I(""), Promise.resolve(u.run(_, "")).catch((N) => c(N instanceof Error ? N.message : String(N), "danger"));
+    }
+  }, _e = (s) => {
+    if (!s.nativeEvent.isComposing) {
+      if (W) {
+        if (s.key === "ArrowDown" || s.key === "ArrowUp") {
+          s.preventDefault(), E((u) => Se(u, s.key === "ArrowDown" ? 1 : -1, K.length));
+          return;
+        }
+        if (s.key === "Tab" || s.key === "Enter" && !s.shiftKey) {
+          s.preventDefault(), ce(y);
+          return;
+        }
+        if (s.key === "Escape") {
+          s.preventDefault(), w(!0);
+          return;
+        }
+      }
+      if (O) {
+        if (s.key === "ArrowDown" || s.key === "ArrowUp") {
+          s.preventDefault(), E((u) => Se(u, s.key === "ArrowDown" ? 1 : -1, $.length));
+          return;
+        }
+        if (s.key === "Tab") {
+          s.preventDefault();
+          const u = $[Math.min(y, $.length - 1)];
+          u && I(`/${u.name} `);
+          return;
+        }
+        if (s.key === "Enter" && !s.shiftKey) {
+          s.preventDefault(), ue(y);
+          return;
+        }
+        if (s.key === "Escape") {
+          s.preventDefault(), w(!0);
+          return;
+        }
+      }
+      if (s.key === "r" && s.ctrlKey && !s.altKey && !s.metaKey) {
+        s.preventDefault(), T(!0);
+        return;
+      }
+      if (!ie.onKeyDown(s)) {
+        if (s.key === "Escape" && l && !A) {
+          s.preventDefault(), e.cancelRun();
+          return;
+        }
+        if (s.key === "Enter" && s.altKey) {
+          s.preventDefault(), q(!0);
+          return;
+        }
+        s.key === "Enter" && !s.shiftKey && (s.preventDefault(), q());
+      }
+    }
+  }, Ke = (s) => {
+    const u = Array.from(s.clipboardData.files);
+    u.some(Ne) && (s.preventDefault(), Y(u));
+  }, Be = (s) => {
+    s.preventDefault(), b(!1), Y(Array.from(s.dataTransfer.files));
+  }, de = e.store.state.pause, fe = G.ComposerFooter, Oe = e.isWorker(), Ue = l ? "Steer the turn in progress…  (Alt+Enter queues it for after)" : de?.kind === "question" ? "Answer in your own words…" : de?.kind === "flow_input" ? "Reply to the flow…" : Oe ? "Steer this task through its fleet…" : `Message ${e.agent?.name ?? "the agent"}…  (/ for commands)`;
+  return /* @__PURE__ */ g("div", { className: "relative", children: [
+    x && /* @__PURE__ */ t(
+      on,
+      {
+        workspace: oe,
+        onPick: (s) => {
+          T(!1), _.setComposer(s);
+        },
+        onClose: () => {
+          T(!1), requestAnimationFrame(() => v.current?.focus());
+        }
+      }
+    ),
+    O && !x && /* @__PURE__ */ t(
+      "div",
+      {
+        id: L,
+        role: "listbox",
+        "aria-label": "Commands",
+        className: "absolute bottom-full left-0 z-20 mb-2 max-h-72 w-full overflow-y-auto rounded-xl border border-line bg-surface p-1.5 shadow-pop",
+        children: $.map((s, u) => (
+          // biome-ignore lint/a11y/useFocusableInteractive: a combobox option; focus stays in the textarea (aria-activedescendant)
+          /* @__PURE__ */ g(
+            "div",
+            {
+              id: `${L}-${u}`,
+              role: "option",
+              "aria-selected": u === Math.min(y, $.length - 1),
+              onMouseDown: (N) => {
+                N.preventDefault(), ue(u);
+              },
+              onMouseEnter: () => E(u),
+              className: P(
+                "flex cursor-pointer items-baseline gap-2 rounded-md px-2.5 py-1.5 text-[13px]",
+                u === Math.min(y, $.length - 1) ? "bg-accent-soft" : ""
+              ),
+              children: [
+                /* @__PURE__ */ g("span", { className: P("shrink-0 font-mono font-semibold", u === y ? "text-accent" : "text-ink"), children: [
+                  "/",
+                  s.name
+                ] }),
+                s.args && /* @__PURE__ */ t("span", { className: "shrink-0 font-mono text-[11.5px] text-faint", children: s.args }),
+                /* @__PURE__ */ t("span", { className: "min-w-0 truncate text-muted", children: s.description })
+              ]
+            },
+            s.name
+          )
+        ))
+      }
+    ),
+    W && /* @__PURE__ */ t(
+      "div",
+      {
+        id: `${L}-files`,
+        role: "listbox",
+        "aria-label": "Files and artifacts",
+        className: "absolute bottom-full left-0 z-20 mb-2 max-h-72 w-full overflow-y-auto rounded-xl border border-line bg-surface p-1.5 shadow-pop",
+        children: K.map((s, u) => (
+          // biome-ignore lint/a11y/useFocusableInteractive: a combobox option; focus stays in the textarea (aria-activedescendant)
+          /* @__PURE__ */ g(
+            "div",
+            {
+              id: `${L}-files-${u}`,
+              role: "option",
+              "aria-selected": u === Math.min(y, K.length - 1),
+              onMouseDown: (N) => {
+                N.preventDefault(), ce(u);
+              },
+              onMouseEnter: () => E(u),
+              className: P(
+                "flex cursor-pointer items-baseline gap-2 truncate rounded-md px-2.5 py-1.5 text-[12.5px] text-ink",
+                s.kind === "file" && "font-mono",
+                u === Math.min(y, K.length - 1) && "bg-accent-soft text-accent"
+              ),
+              children: [
+                /* @__PURE__ */ t("span", { className: "min-w-0 truncate", children: s.label }),
+                s.detail && /* @__PURE__ */ g("span", { className: "shrink-0 font-mono text-[11px] text-faint", children: [
+                  "@artifact:",
+                  s.detail
+                ] })
+              ]
+            },
+            s.value
+          )
+        ))
+      }
+    ),
+    /* @__PURE__ */ g(
+      "div",
+      {
+        onDragOver: (s) => {
+          s.dataTransfer.types.includes("Files") && (s.preventDefault(), b(!0));
+        },
+        onDragLeave: () => b(!1),
+        onDrop: Be,
+        className: P(
+          "rounded-2xl border bg-surface p-1.5 shadow-sm transition-colors",
+          "focus-within:border-accent focus-within:ring-2 focus-within:ring-accent/20",
+          h ? "border-accent bg-accent-soft" : "border-line",
+          i && "opacity-60"
+        ),
+        children: [
+          m.length > 0 && /* @__PURE__ */ t("div", { className: "flex flex-wrap gap-2 px-1.5 pt-1 pb-2", children: m.map((s, u) => (
+            // biome-ignore lint/suspicious/noArrayIndexKey: stateless thumbnails, removed by position
+            /* @__PURE__ */ g("div", { className: "relative", children: [
+              /* @__PURE__ */ t("img", { src: s.url, alt: s.name, className: "h-16 w-16 rounded-lg border border-line-soft object-cover" }),
+              /* @__PURE__ */ t(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": `Remove ${s.name}`,
+                  onClick: () => e.setImages(m.filter((N, me) => me !== u)),
+                  className: "absolute -top-1.5 -right-1.5 flex h-5 w-5 items-center justify-center rounded-full bg-ink text-surface shadow",
+                  children: /* @__PURE__ */ t(Me, { size: 11 })
+                }
+              )
+            ] }, u)
+          )) }),
+          /* @__PURE__ */ g("div", { className: "flex items-end gap-1", children: [
+            /* @__PURE__ */ t(
+              ne,
+              {
+                label: "Attach images",
+                disabled: i || !f || m.length >= r,
+                onClick: () => V.current?.click(),
+                className: "mb-0.5 h-9 w-9 rounded-full",
+                children: /* @__PURE__ */ t(Ye, { size: 17 })
+              }
+            ),
+            /* @__PURE__ */ t(
+              "input",
+              {
+                ref: V,
+                type: "file",
+                accept: "image/png,image/jpeg,image/gif,image/webp",
+                multiple: !0,
+                hidden: !0,
+                onChange: (s) => {
+                  Y(Array.from(s.target.files ?? [])), s.target.value = "";
+                }
+              }
+            ),
+            /* @__PURE__ */ t(
+              "textarea",
+              {
+                ref: v,
+                value: p,
+                onChange: (s) => {
+                  I(s.target.value), w(!1), E(0);
+                },
+                onKeyDown: _e,
+                onPaste: Ke,
+                rows: 1,
+                autoFocus: o,
+                disabled: i,
+                placeholder: Ue,
+                "aria-label": "Message",
+                "aria-controls": O ? L : W ? `${L}-files` : void 0,
+                "aria-activedescendant": O ? `${L}-${Math.min(y, $.length - 1)}` : W ? `${L}-files-${Math.min(y, K.length - 1)}` : void 0,
+                "aria-autocomplete": "list",
+                enterKeyHint: "send",
+                className: "max-h-[240px] min-h-10 flex-1 resize-none bg-transparent px-1.5 py-2.5 text-[16px] leading-snug text-ink outline-none placeholder:truncate placeholder:text-faint disabled:cursor-not-allowed sm:text-[14.5px]"
+              }
+            ),
+            l && A && /* @__PURE__ */ t(ne, { label: "Queue for after this turn (Alt+Enter)", className: "mb-0.5 h-9 w-9 rounded-full", onClick: () => {
+              q(!0);
+            }, children: /* @__PURE__ */ t(Xe, { size: 17 }) }),
+            l && !A ? /* @__PURE__ */ t(
+              "button",
+              {
+                type: "button",
+                onClick: () => {
+                  e.cancelRun();
+                },
+                "aria-label": "Stop the turn (Esc)",
+                title: "Stop the turn (Esc)",
+                className: "mb-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-ink text-surface transition-opacity hover:opacity-85",
+                children: /* @__PURE__ */ t(Ze, { size: 13, fill: "currentColor" })
+              }
+            ) : /* @__PURE__ */ t(
+              "button",
+              {
+                type: "button",
+                onClick: () => {
+                  q();
+                },
+                disabled: !le,
+                "aria-label": l ? "Steer the turn in progress" : "Send",
+                title: l ? "Steer the turn in progress (Enter)" : "Send (Enter)",
+                className: "mb-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-accent text-on-accent transition-opacity hover:bg-accent-hover disabled:opacity-35",
+                children: /* @__PURE__ */ t(et, { size: 18 })
+              }
+            )
+          ] }),
+          fe && /* @__PURE__ */ t("div", { className: "px-1.5 pt-1", children: /* @__PURE__ */ t(fe, { conversationId: e.id }) })
+        ]
+      }
+    )
+  ] });
+}
+const pn = 1e4, hn = 6e4, gn = {
+  queued: "queued",
+  thinking: "thinking",
+  writing: "writing",
+  tool: "running",
+  compacting: "compacting context",
+  retrying: "retrying"
+};
+function xn({ controller: e }) {
+  B(e, D.run, D.pause, D.connection, R.followUps);
+  const n = e.store.state, [, i] = S(0), o = n.connection === "reconnecting";
+  if (C(() => {
+    if (!n.run && !o) return;
+    const c = setInterval(() => i((a) => a + 1), 1e3);
+    return () => clearInterval(c);
+  }, [n.run, o]), o) {
+    const c = n.reconnectingSince ? Date.now() - n.reconnectingSince : 0, a = c >= pn ? ` for ${we(c)}` : "";
+    return /* @__PURE__ */ g("output", { className: P("flex items-center gap-1.5 text-[12px]", c >= hn ? "text-danger" : "text-warn"), children: [
+      /* @__PURE__ */ t(tt, { size: 12, className: "animate-spin" }),
+      " Reconnecting",
+      a,
+      n.connectionDetail ? ` (${n.connectionDetail})` : "…"
+    ] });
+  }
+  if (n.run) {
+    const a = [n.run.activity === "tool" && n.run.toolName ? `running ${n.run.toolName}` : gn[n.run.activity]];
+    return n.run.step !== null && a.push(`step ${n.run.step + 1}`), a.push(we(Date.now() - n.run.startedAt) ?? "0s"), e.followUps.length && a.push(`${e.followUps.length} queued`), /* @__PURE__ */ g("output", { className: "flex items-center gap-1.5 text-[12px] text-accent", children: [
+      /* @__PURE__ */ t(nt, { size: 12, className: "animate-spin" }),
+      " ",
+      a.join(" · ")
+    ] });
+  }
+  if (n.pause && n.pause.kind !== "fork_seed" && e.deferredPauseId === n.pause.pending_tool_call_id) return null;
+  if (n.pause && n.pause.kind !== "fork_seed") {
+    const c = n.pause.task_id ? `${n.pause.task_id}: ` : "";
+    return /* @__PURE__ */ g("output", { className: "flex items-center gap-1.5 text-[12px] text-warn", children: [
+      /* @__PURE__ */ t(st, { size: 12 }),
+      " ",
+      c,
+      Jt(n.pause)
+    ] });
+  }
+  const d = e.fleetParent();
+  return d ? /* @__PURE__ */ g("div", { className: "text-[12px] text-faint", children: [
+    "Fleet worker · read-only · typing steers ",
+    d.taskId,
+    " through its fleet"
+  ] }) : null;
+}
+const Z = "ecui.session.inspector", Ee = "ecui.session.tab";
+function Ce(e, n) {
+  try {
+    return localStorage.getItem(e) ?? n;
+  } catch {
+    return n;
+  }
+}
+function ee(e, n) {
+  try {
+    localStorage.setItem(e, n);
+  } catch {
+  }
+}
+function wn({ activeId: e }) {
+  Re();
+  const n = ae(), i = M.attached().filter((o) => o.started || o.id === e);
+  return i.length < 2 ? null : /* @__PURE__ */ t("nav", { className: "flex h-9 shrink-0 items-end gap-0.5 overflow-x-auto border-b border-line bg-surface-alt px-2", "aria-label": "Open sessions", children: i.map((o) => {
+    const d = Ot(o.store.state, { key: o.id, agent: o.agent?.name ?? null, attention: null, draft: "", createdAt: o.createdAt }), c = o.id === e;
+    return /* @__PURE__ */ g(
+      "div",
+      {
+        className: P(
+          "group flex h-8 max-w-[14rem] shrink-0 items-center gap-1.5 rounded-t-md border border-b-0 pr-1 pl-2.5 text-[12.5px]",
+          c ? "border-line bg-bg font-semibold text-ink" : "border-transparent text-muted hover:bg-surface-hover hover:text-ink"
+        ),
+        children: [
+          /* @__PURE__ */ g("button", { type: "button", className: "flex min-w-0 items-center gap-1.5", "aria-current": c ? "page" : void 0, onClick: () => n(J(o.id)), children: [
+            /* @__PURE__ */ t(Ut, { row: d }),
+            /* @__PURE__ */ t("span", { className: "truncate", children: o.title() })
+          ] }),
+          /* @__PURE__ */ t(
+            "button",
+            {
+              type: "button",
+              "aria-label": `Stop following ${o.title()}`,
+              onClick: () => {
+                if (M.detach(o.id), c) {
+                  const a = M.attached().find((l) => l.started);
+                  n(a ? J(a.id) : Ht());
+                }
+              },
+              className: "flex h-5 w-5 shrink-0 items-center justify-center rounded text-faint opacity-0 group-hover:opacity-100 hover:bg-surface-hover hover:text-ink focus:opacity-100 max-md:opacity-100",
+              children: /* @__PURE__ */ t(Me, { size: 12 })
+            }
+          )
+        ]
+      },
+      o.id
+    );
+  }) });
+}
+function bn({ controller: e }) {
+  B(e, D.session, R.list);
+  const [n, i] = S(!1), [o, d] = S(""), c = z(null), a = e.title();
+  return n ? /* @__PURE__ */ t(
+    "input",
+    {
+      ref: c,
+      autoFocus: !0,
+      value: o,
+      onChange: (l) => d(l.target.value),
+      onBlur: () => {
+        i(!1), o.trim() && o.trim() !== a && e.setTitle(o.trim());
+      },
+      onKeyDown: (l) => {
+        l.key === "Enter" && l.target.blur(), l.key === "Escape" && i(!1);
+      },
+      "aria-label": "Session title",
+      className: "h-7 min-w-0 flex-1 rounded-md border border-accent bg-surface px-2 text-[13.5px] font-semibold text-ink outline-none"
+    }
+  ) : /* @__PURE__ */ t("h1", { className: "min-w-[6rem] flex-1 truncate text-[13.5px] font-semibold text-ink", children: /* @__PURE__ */ t(
+    "button",
+    {
+      type: "button",
+      disabled: !e.started,
+      onClick: () => {
+        d(a), i(!0);
+      },
+      className: "max-w-full truncate rounded px-1 text-left hover:bg-surface-hover disabled:hover:bg-transparent",
+      title: e.started ? "Rename" : void 0,
+      children: a
+    }
+  ) });
+}
+function yn({ controller: e }) {
+  B(e, D.reset, D.session, R.list, R.draft);
+  const n = ae(), { toast: i } = $e(), [o, d] = S(() => Ce(Z, "1") === "1"), [c, a] = S(!1), [l, f] = S(() => Ce(Ee, "brief")), r = ze(e), m = U((x) => {
+    f(x), ee(Ee, x);
+  }, []), p = z(null), k = U((x) => {
+    p.current = x;
+  }, []), h = H(
+    () => ({ navigate: (x) => n(x), toast: i, openDialog: jt }),
+    [n, i]
+  ), b = U(
+    async (x) => {
+      const T = x.key.slice(2);
+      try {
+        const v = await Vt.forkSession(e.id, { before_message: T, title: e.session?.title ?? null });
+        M.attach(v.id).seedDraft(x.text), i("Editing in a copy of the session from before that message. The original is kept.", "info"), n(J(v.id));
+      } catch (v) {
+        i(`Couldn't edit: ${Wt(v)}`, "danger");
+      }
+    },
+    [e, n, i]
+  );
+  C(() => {
+    const x = (v) => {
+      m(String(v.detail)), window.matchMedia("(min-width: 1280px)").matches ? (d(!0), ee(Z, "1")) : a(!0);
+    }, T = () => y();
+    return window.addEventListener("ecui:inspector", x), window.addEventListener("ecui:toggle-inspector", T), () => {
+      window.removeEventListener("ecui:inspector", x), window.removeEventListener("ecui:toggle-inspector", T);
+    };
+  });
+  const y = () => {
+    window.matchMedia("(min-width: 1280px)").matches ? d((x) => (ee(Z, x ? "0" : "1"), !x)) : a(!0);
+  }, E = e.store.state.entries, F = !e.loading && E.length === 0 && !e.running(), w = r.length > 0;
+  return /* @__PURE__ */ g("div", { className: "flex min-h-0 flex-1", children: [
+    /* @__PURE__ */ g("section", { className: "flex min-w-0 flex-1 flex-col bg-bg", children: [
+      /* @__PURE__ */ g("div", { className: "flex h-11 shrink-0 items-center gap-1.5 border-b border-line bg-surface px-2 sm:px-3", children: [
+        /* @__PURE__ */ t(bn, { controller: e }),
+        /* @__PURE__ */ t("div", { className: "hidden min-w-0 md:block", children: /* @__PURE__ */ t(ye, { controller: e }) }),
+        /* @__PURE__ */ t(qt, { controller: e }),
+        w && /* @__PURE__ */ g(ne, { label: o ? "Hide panels" : "Show panels", onClick: y, children: [
+          o ? /* @__PURE__ */ t(at, { size: 17, className: "max-xl:hidden" }) : null,
+          /* @__PURE__ */ t(rt, { size: 17, className: P(o && "xl:hidden") })
+        ] })
+      ] }),
+      /* @__PURE__ */ t("div", { className: "flex shrink-0 items-center border-b border-line bg-surface px-2 py-1 md:hidden", children: /* @__PURE__ */ t(ye, { controller: e }) }),
+      e.loading && !E.length ? /* @__PURE__ */ t(Pe, {}) : F ? /* @__PURE__ */ t(Yt, { onPick: (x) => {
+        e.submit(x);
+      } }) : /* @__PURE__ */ t(en, { controller: e, onEdit: e.isWorker() ? void 0 : (x) => {
+        b(x);
+      }, renderDiff: ke.renderDiff }),
+      /* @__PURE__ */ t("div", { className: "shrink-0 px-3 pb-[max(0.75rem,env(safe-area-inset-bottom))] sm:px-6 sm:pb-4", children: /* @__PURE__ */ g("div", { className: "mx-auto flex w-full max-w-3xl flex-col gap-2", children: [
+        /* @__PURE__ */ t(Qt, { controller: e, collisions: ke.collisions }),
+        /* @__PURE__ */ t(xn, { controller: e }),
+        /* @__PURE__ */ t(mn, { controller: e, commandContext: h, autoFocus: !0, registerHandle: k })
+      ] }) })
+    ] }),
+    w && o && /* @__PURE__ */ t("aside", { className: "hidden w-[22rem] shrink-0 border-l border-line bg-surface xl:flex", "aria-label": "Session panels", children: /* @__PURE__ */ t(ve, { controller: e, tab: l, onTab: m, className: "w-full" }) }),
+    /* @__PURE__ */ t(Gt, { open: c, onClose: () => a(!1), title: "Session", side: "right", widthClass: "w-[min(24rem,100vw)]", children: /* @__PURE__ */ t(ve, { controller: e, tab: l, onTab: m, className: "h-full" }) })
+  ] });
+}
+function Cn() {
+  const { sessionId: e } = We(), [n] = qe(), i = ae();
+  Re();
+  const o = X((m) => m.agents), d = X((m) => m.features), c = X((m) => m.status === "ready" || m.status === "error"), a = Lt(o, d), l = e === "new" && c && a.length === 0;
+  C(() => {
+    if (e !== "new" || !c || a.length === 0) return;
+    const m = n.get("agent"), p = a.find((b) => b.name === m) ?? a.find((b) => b.name === "chat") ?? a[0] ?? null, k = n.get("workspace"), h = M.create({
+      agent: p,
+      model: n.get("model"),
+      permissionMode: n.get("mode"),
+      workspace: k ? { path: k, worktree: n.get("worktree") !== "0" } : null
+    });
+    i(J(h.id), { replace: !0 });
+  }, [e, c]);
+  const f = _t(e && e !== "new" ? e : null), r = !!f?.started;
+  return C(() => {
+    r && f?.loadExtras();
+  }, [f, r]), C(() => {
+    if (!(!e || e === "new"))
+      return M.get(e) || M.attach(e), M.show(e), () => {
+        M.activeId === e && M.show(null);
+      };
+  }, [e]), l ? /* @__PURE__ */ t(be, { icon: /* @__PURE__ */ t(he, { size: 20 }), title: "No agent to start a session with here", children: "Sessions here start from elsewhere in the app." }) : !f || e === "new" ? /* @__PURE__ */ t(Pe, {}) : f.missing ? /* @__PURE__ */ t(
+    be,
+    {
+      icon: /* @__PURE__ */ t(he, { size: 20 }),
+      title: "Session not found",
+      action: a.length > 0 ? /* @__PURE__ */ t(
+        Kt,
+        {
+          variant: "primary",
+          onClick: () => {
+            M.detach(f.id), i(Bt());
+          },
+          children: "Start a new session"
+        }
+      ) : void 0,
+      children: "It may have been deleted, or it belongs to another account."
+    }
+  ) : /* @__PURE__ */ g("div", { className: "flex h-full min-h-0 flex-col", children: [
+    /* @__PURE__ */ t(wn, { activeId: f.id }),
+    /* @__PURE__ */ t(yn, { controller: f }, f.id)
+  ] });
+}
+export {
+  Cn as default
+};