@streamoid/agent 0.6.53 → 0.6.55

package/dist/pane.d.ts

@@ -0,0 +1,73 @@
+import type { ReactElement } from 'react';
+import type {
+  AgentPaneController,
+  AgentPaneControllerOptions,
+  AgentScopeSection,
+  AgentScopeSelection,
+  AgentScopeSuggestion,
+  AgentSidePaneProps,
+} from './index';
+
+/* `@streamoid/agent/pane` — the shared Ask CXO side pane.
+ *
+ * Hand-maintained like `index.d.ts` (and copied beside it by `build:lib`). The
+ * types are declared in `index.d.ts`; this file declares the VALUES the
+ * `./pane` subpath exports, and re-exports the types for convenience. Keep it
+ * in step with `src/embed/pane/index.ts` — the publish workflow fails on a
+ * value export missing here. */
+
+export type {
+  AgentPaneController,
+  AgentPaneControllerOptions,
+  AgentPaneSupportOptions,
+  AgentPaneSurface,
+  AgentSidePaneAdapters,
+  AgentSidePaneProps,
+} from './index';
+
+/**
+ * The Ask CXO pane's state, owned by the host shell. Persists the open state
+ * and the conversation per workspace, binds ⌘K (unless `bindShortcut: false`),
+ * and reaches the chat only through a lazy `import()`.
+ */
+export declare function useAgentPaneController(
+  options: AgentPaneControllerOptions,
+): AgentPaneController;
+
+/**
+ * The pane itself: docked beside the page (resizable) from 768px, a
+ * full-screen dialog sheet below it (focus trap, siblings inert, Escape and
+ * the Back button close it), fullscreen when an artefact asks. Stays mounted
+ * after the first open; wraps the lazy `AgentPanel` in an error boundary with
+ * a Retry.
+ */
+export declare function AgentSidePane(props: AgentSidePaneProps): ReactElement;
+
+/** `(min-width: 768px)` — docked at and above, the sheet below. */
+export declare const AGENT_PANE_DOCKED_MEDIA_QUERY: string;
+/** `streamoid.askPane.width` */
+export declare const AGENT_PANE_WIDTH_KEY: string;
+/** `streamoid.askPane.session` */
+export declare const DEFAULT_PANE_PERSIST_KEY: string;
+/** Warm the agent chunk without a controller. */
+export declare function prefetchAgent(): void;
+
+/**
+ * The pane's own suggestion rule: one card per section of the outcome table,
+ * about the selection where an outcome runs on its kind, else about the
+ * section's first runnable sample. The same function the pane renders from,
+ * so a host that plans its table around the row (Artifax splits a tool page's
+ * table to fill three cards) needs no hand copy. Pass
+ * `controller.selectionSnapshot`, not the live selection.
+ */
+export declare function deriveScopeSuggestions(
+  sections: readonly AgentScopeSection[] | null | undefined,
+  selection: AgentScopeSelection | null | undefined,
+): AgentScopeSuggestion[];
+
+/** `deriveScopeSuggestions(sections, selection).length` — how many cards the
+ *  pane draws before the first turn. */
+export declare function paneSuggestionCount(
+  sections: readonly AgentScopeSection[] | null | undefined,
+  selection: AgentScopeSelection | null | undefined,
+): number;

package/dist/pane.js

@@ -0,0 +1,585 @@
+import { useState as _, useEffect as O, useCallback as p, useMemo as Q, Component as pe, useRef as G, useLayoutEffect as he, Suspense as me, lazy as ge } from "react";
+import { useStreamoidSearchShortcut as Se, useStreamoidPanelWidth as ye, SC_ASSISTANT_PANEL_BOUNDS as Ee, SC_ASSISTANT_PANEL_WIDTH as we, ScPanelResizeHandle as Ie } from "@streamoid/ui";
+import { jsxs as oe, jsx as g, Fragment as ve } from "react/jsx-runtime";
+import { d as be } from "./agentScope-BlOT7qMu.js";
+function j() {
+  return import("./index.js");
+}
+function te() {
+  j().catch(() => {
+  });
+}
+const Ae = "streamoid.askPane.session", D = { open: !1, chatId: null };
+function ae(e, t) {
+  return `${e}:${t}`;
+}
+function ie() {
+  try {
+    return typeof window > "u" ? null : window.localStorage;
+  } catch {
+    return null;
+  }
+}
+function Ce(e, t) {
+  if (!t) return D;
+  const a = ie();
+  if (!a) return D;
+  try {
+    const n = a.getItem(ae(e, t));
+    if (!n) return D;
+    const o = JSON.parse(n);
+    if (!o || typeof o != "object") return D;
+    const { surface: c, chatId: l } = o;
+    return c !== "pane" && c !== "rail" ? D : { open: !0, chatId: typeof l == "string" && l ? l : null };
+  } catch {
+    return D;
+  }
+}
+function Pe(e, t, a) {
+  if (!t) return;
+  const n = ie();
+  if (!n) return;
+  const o = ae(e, t);
+  try {
+    if (a.surface === "closed") {
+      n.removeItem(o);
+      return;
+    }
+    n.setItem(o, JSON.stringify({ surface: "rail", chatId: a.chatId }));
+  } catch {
+  }
+}
+const ce = { surface: "closed", declinedPanelId: null }, Z = { surface: "pane", declinedPanelId: null };
+function se(e, t) {
+  return e.surface === "closed" ? t.mode === "inline" && e.declinedPanelId !== null ? ce : e : t.mode === "inline" ? e.surface === "pane" && e.declinedPanelId === null ? e : Z : t.activePanel && t.activePanel.id === e.declinedPanelId || e.surface === "fullscreen" ? e : { surface: "fullscreen", declinedPanelId: e.declinedPanelId };
+}
+function xe(e, t) {
+  return e.surface === "closed" ? e : {
+    surface: "pane",
+    declinedPanelId: t?.activePanel?.id ?? null
+  };
+}
+function le(e, t = null) {
+  if (e.surface !== "closed") return e;
+  const a = { surface: "pane", declinedPanelId: e.declinedPanelId };
+  return t ? se(a, t) : a;
+}
+function ue(e) {
+  return e.surface === "closed" ? e : { surface: "closed", declinedPanelId: e.declinedPanelId };
+}
+function ke(e, t = null) {
+  return e.surface === "closed" ? le(e, t) : ue(e);
+}
+const Y = "streamoid.askPane.width";
+function Re(e, t = De()) {
+  if (!t || !e) return !1;
+  const a = typeof e == "string" ? [e] : e;
+  try {
+    if (t.getItem(Y) !== null) return !1;
+    for (const n of a) {
+      if (!n || n === Y) continue;
+      const o = t.getItem(n);
+      if (o === null) continue;
+      const c = Number.parseInt(o, 10);
+      if (Number.isFinite(c))
+        return t.setItem(Y, String(c)), !0;
+    }
+  } catch {
+  }
+  return !1;
+}
+function De() {
+  try {
+    return typeof window > "u" ? null : window.localStorage;
+  } catch {
+    return null;
+  }
+}
+function J(e, t, a = 0) {
+  const n = Ce(e, t);
+  return {
+    workspaceId: t,
+    memory: n.open ? Z : ce,
+    chatId: n.chatId,
+    selectionSnapshot: null,
+    epoch: a,
+    lastReport: null
+  };
+}
+function $e({
+  workspaceId: e,
+  persistKey: t = Ae,
+  legacyWidthKey: a,
+  bindShortcut: n = !0
+}) {
+  const o = e ?? "", [c, l] = _(() => J(t, o));
+  let d = c;
+  if (c.workspaceId !== o) {
+    if (c.workspaceId === "") {
+      const r = J(t, o, c.epoch);
+      d = c.memory.surface !== "closed" ? { ...c, workspaceId: o, chatId: c.chatId ?? r.chatId } : { ...r, selectionSnapshot: c.selectionSnapshot };
+    } else
+      d = J(t, o, c.epoch + 1);
+    l(d);
+  }
+  O(() => {
+    Pe(t, d.workspaceId, {
+      surface: d.memory.surface,
+      chatId: d.chatId
+    });
+  }, [t, d.workspaceId, d.memory.surface, d.chatId]);
+  const h = p(
+    (r) => l((i) => {
+      const f = r(i.memory);
+      return f === i.memory ? i : { ...i, memory: f };
+    }),
+    []
+  ), A = p(
+    (r) => l((i) => i.chatId === r ? i : { ...i, chatId: r }),
+    []
+  ), S = p(
+    (r) => l((i) => {
+      const f = r(i);
+      return f === i.memory ? i : { ...i, memory: f };
+    }),
+    []
+  ), C = p(
+    () => S((r) => le(r.memory, r.lastReport)),
+    [S]
+  ), P = p(() => h(ue), [h]), L = p(
+    () => S((r) => ke(r.memory, r.lastReport)),
+    [S]
+  ), x = p(
+    () => l((r) => ({
+      ...r,
+      chatId: null,
+      lastReport: null,
+      memory: r.memory.surface === "closed" ? Z : r.memory
+    })),
+    []
+  ), T = p(
+    (r) => l((i) => {
+      const f = se(i.memory, r);
+      return { ...i, lastReport: r, memory: f };
+    }),
+    []
+  ), m = p(
+    () => S((r) => xe(r.memory, r.lastReport)),
+    [S]
+  ), b = p(() => {
+    C(), j().then((r) => r.focusAgentComposer()).catch(() => {
+    });
+  }, [C]), y = p(
+    (r) => {
+      const i = typeof r == "string" ? r.trim() : "";
+      return i ? (x(), j().then((f) => {
+        f.focusAgentComposer(), f.enqueueChatPrompt({ prompt: i, forceNewConversation: !0 });
+      }).catch(() => {
+      }), !0) : !1;
+    },
+    [x]
+  ), N = p(
+    (r) => {
+      x(), j().then((i) => {
+        i.showAgentSupport(r ?? null);
+      }).catch(() => {
+      });
+    },
+    [x]
+  );
+  Se({
+    onTrigger: () => {
+      te(), b();
+    },
+    enabled: n
+  }), _(() => Re(a));
+  const k = Ee, { width: z, setWidth: W, commitWidth: q } = ye({
+    storageKey: Y,
+    defaultWidth: we,
+    min: k.min,
+    max: k.max
+  }), U = p(
+    (r) => l(
+      (i) => i.selectionSnapshot === (r ?? null) ? i : { ...i, selectionSnapshot: r ?? null }
+    ),
+    []
+  ), X = d.selectionSnapshot, E = d.epoch, H = d.memory.surface;
+  return Q(
+    () => ({
+      open: H !== "closed",
+      surface: H,
+      chatId: d.chatId,
+      reveal: C,
+      close: P,
+      toggle: L,
+      askCxo: b,
+      askAbout: y,
+      requestSupport: N,
+      prefetch: te,
+      width: z,
+      setWidth: W,
+      commitWidth: q,
+      bounds: k,
+      selectionSnapshot: X,
+      workspaceEpoch: E,
+      setChatId: A,
+      reportSurface: T,
+      collapse: m,
+      reportSelectionSnapshot: U
+    }),
+    [
+      H,
+      d.chatId,
+      C,
+      P,
+      L,
+      b,
+      y,
+      N,
+      z,
+      W,
+      q,
+      k,
+      X,
+      E,
+      A,
+      T,
+      m,
+      U
+    ]
+  );
+}
+class Oe extends pe {
+  state = { error: null };
+  static getDerivedStateFromError(t) {
+    return { error: t ?? new Error("Ask CXO failed to load") };
+  }
+  componentDidCatch(t) {
+    typeof console < "u" && console.error("[streamoid-agent] Ask CXO pane failed:", t);
+  }
+  retry = () => {
+    this.setState({ error: null }), this.props.onRetry();
+  };
+  render() {
+    return this.state.error === null ? this.props.children : /* @__PURE__ */ oe(
+      "div",
+      {
+        role: "alert",
+        "data-testid": "agent-pane-error",
+        style: {
+          display: "flex",
+          flex: 1,
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: 12,
+          padding: 24,
+          textAlign: "center",
+          fontSize: 14,
+          color: "var(--alias-text---icons-secondary, currentColor)"
+        },
+        children: [
+          /* @__PURE__ */ g("span", { children: "Ask CXO couldn’t load." }),
+          /* @__PURE__ */ g(
+            "button",
+            {
+              type: "button",
+              onClick: this.retry,
+              "data-testid": "agent-pane-retry",
+              style: {
+                font: "inherit",
+                padding: "6px 14px",
+                borderRadius: 8,
+                border: "1px solid var(--alias-border-subtle, currentColor)",
+                background: "transparent",
+                color: "var(--alias-text---icons-primary, currentColor)",
+                cursor: "pointer"
+              },
+              children: "Retry"
+            }
+          )
+        ]
+      }
+    );
+  }
+}
+function _e() {
+  return /* @__PURE__ */ g(
+    "div",
+    {
+      role: "status",
+      "aria-live": "polite",
+      "data-testid": "agent-pane-loading",
+      style: {
+        display: "flex",
+        flex: 1,
+        alignItems: "center",
+        justifyContent: "center",
+        padding: 24,
+        fontSize: 13,
+        color: "var(--alias-text---icons-secondary, currentColor)"
+      },
+      children: "Loading Ask CXO…"
+    }
+  );
+}
+const Le = '[role="dialog"], [role="alertdialog"], [aria-modal="true"], dialog[open]';
+function B(e, t) {
+  const n = (V(e) ? e : null)?.closest(Le) ?? null;
+  return n !== null && n !== t;
+}
+function Te(e, t) {
+  const a = e.querySelectorAll('[aria-modal="true"], dialog[open]');
+  for (const n of Array.from(a))
+    if (!(n === t || Ne(n, e)))
+      return !0;
+  return !1;
+}
+function Ne(e, t) {
+  if (e.closest("[hidden]")) return !0;
+  const a = t.defaultView?.getComputedStyle?.(e);
+  return !!a && (a.display === "none" || a.visibility === "hidden");
+}
+function We({
+  event: e,
+  pane: t,
+  active: a,
+  doc: n,
+  surface: o,
+  isSheet: c
+}) {
+  return e.key !== "Escape" || e.defaultPrevented || !t || o === "closed" || B(e.target, t) || B(a, t) || Te(n, t) || !c && !(V(a) && t.contains(a) || V(e.target) && t.contains(e.target)) ? null : o === "fullscreen" ? "collapse" : "close";
+}
+function V(e) {
+  return typeof e == "object" && e !== null && e.nodeType === 1 && typeof e.closest == "function";
+}
+const de = "__streamoidAskPane";
+let He = 0;
+function ne(e) {
+  if (!e || typeof e != "object") return null;
+  const t = e[de];
+  return typeof t == "string" ? t : null;
+}
+function Me(e, t = (n) => setTimeout(n, 0), a = (n) => clearTimeout(n)) {
+  let n = null, o = null;
+  const c = () => n !== null && ne(e.state) === n;
+  return {
+    enter() {
+      if (o !== null && (a(o), o = null), c()) return;
+      const l = ne(e.state);
+      if (l) {
+        n = l;
+        return;
+      }
+      n = `pane-${Date.now().toString(36)}-${He += 1}`;
+      const d = e.state && typeof e.state == "object" ? e.state : {};
+      e.pushState({ ...d, [de]: n }, "");
+    },
+    leave() {
+      n === null || o !== null || (o = t(() => {
+        o = null;
+        const l = c();
+        n = null, l && e.back();
+      }));
+    },
+    handlePop() {
+      return n === null || c() ? !1 : (n = null, o !== null && (a(o), o = null), !0);
+    },
+    isCurrent: c
+  };
+}
+const re = "(min-width: 768px)", Fe = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+function je() {
+  const e = () => typeof window < "u" && typeof window.matchMedia == "function" && !window.matchMedia(re).matches, [t, a] = _(e);
+  return O(() => {
+    if (typeof window > "u" || typeof window.matchMedia != "function") return;
+    const n = window.matchMedia(re), o = () => a(!n.matches);
+    return o(), n.addEventListener?.("change", o), () => n.removeEventListener?.("change", o);
+  }, []), t;
+}
+function K() {
+  return ge(() => j().then((e) => ({ default: e.AgentPanel })));
+}
+function Ye({
+  controller: e,
+  adapters: t,
+  hostContext: a,
+  scope: n,
+  support: o,
+  canvas: c,
+  className: l,
+  ariaLabel: d = "Ask CXO assistant"
+}) {
+  const { open: h, surface: A, chatId: S, setChatId: C, close: P, collapse: L, reportSurface: x, reportSelectionSnapshot: T } = e, m = je(), b = G(null), y = h && m, [N, k] = _(h);
+  h && !N && k(!0);
+  const [z, W] = _(K), q = p(() => W(() => K()), []), [U, X] = _(e.workspaceEpoch);
+  U !== e.workspaceEpoch && (X(e.workspaceEpoch), W(() => K()));
+  const E = G({ surface: A, close: P, collapse: L, isSheet: m });
+  he(() => {
+    E.current = { surface: A, close: P, collapse: L, isSheet: m };
+  });
+  const H = Q(
+    () => ({
+      ...t,
+      navigation: { chatId: S, onChatIdChange: C },
+      onClose: P,
+      onSurfaceChange: x,
+      onSelectionSnapshot: T,
+      hostContext: a ?? null,
+      scope: n ?? null,
+      support: o ?? null,
+      ...c ? { canvas: c } : {}
+    }),
+    [
+      t,
+      S,
+      C,
+      P,
+      x,
+      T,
+      a,
+      n,
+      o,
+      c
+    ]
+  );
+  O(() => {
+    if (!h) return;
+    const u = (w) => {
+      const I = We({
+        event: w,
+        pane: b.current,
+        active: document.activeElement,
+        doc: document,
+        surface: E.current.surface,
+        isSheet: E.current.isSheet
+      });
+      I && (w.preventDefault(), I === "collapse" ? E.current.collapse() : E.current.close());
+    };
+    return document.addEventListener("keydown", u), () => document.removeEventListener("keydown", u);
+  }, [h]);
+  const r = G(null);
+  O(() => {
+    const u = b.current;
+    if (h) {
+      const R = document.activeElement;
+      R && R !== document.body && !u?.contains(R) && (r.current = R);
+      return;
+    }
+    const w = r.current;
+    r.current = null;
+    const I = document.activeElement, M = !I || I === document.body || (u?.contains(I) ?? !1);
+    w && M && w.isConnected && w.focus?.();
+  }, [h]), O(() => {
+    if (!y) return;
+    const u = b.current;
+    if (!u) return;
+    const w = () => {
+      const s = Array.from(u.querySelectorAll(Fe)), v = s.filter((F) => F.getClientRects().length > 0);
+      return v.length > 0 ? v : s;
+    };
+    u.contains(document.activeElement) || (w()[0] ?? u).focus?.();
+    const I = (s) => {
+      if (s.key !== "Tab" || B(s.target, u) || B(document.activeElement, u)) return;
+      const v = w();
+      if (v.length === 0) {
+        s.preventDefault(), u.focus?.();
+        return;
+      }
+      const F = v[0], ee = v[v.length - 1], $ = document.activeElement;
+      !s.shiftKey && $ === ee ? (s.preventDefault(), F.focus()) : s.shiftKey && $ === F ? (s.preventDefault(), ee.focus()) : $ && !u.contains($) && (s.preventDefault(), F.focus());
+    }, M = Array.from(u.parentElement?.children ?? []).filter(
+      (s) => s !== u && s instanceof HTMLElement
+    ), R = M.map((s) => s.hasAttribute("inert"));
+    return M.forEach((s) => s.setAttribute("inert", "")), document.addEventListener("keydown", I), () => {
+      document.removeEventListener("keydown", I), M.forEach((s, v) => {
+        R[v] || s.removeAttribute("inert");
+      });
+    };
+  }, [y]);
+  const i = Q(
+    () => typeof window > "u" ? null : Me(window.history),
+    []
+  );
+  O(() => {
+    if (!y || !i) return;
+    i.enter();
+    const u = () => {
+      i.handlePop() && E.current.close();
+    };
+    return window.addEventListener("popstate", u), () => {
+      window.removeEventListener("popstate", u), i.leave();
+    };
+  }, [y, i]);
+  const f = A === "fullscreen", fe = h ? m ? { display: "flex", position: "fixed", inset: 0, zIndex: 50, width: "100%", height: "100%" } : f ? { display: "flex", position: "relative", flex: "1 1 0%", minWidth: 0, height: "100%", minHeight: 0 } : {
+    display: "flex",
+    position: "relative",
+    flex: "0 0 auto",
+    width: `${e.width}px`,
+    height: "100%",
+    minHeight: 0
+  } : { display: "none" };
+  return /* @__PURE__ */ g(
+    "aside",
+    {
+      ref: b,
+      "aria-label": d,
+      "aria-hidden": !h,
+      ...y ? { role: "dialog", "aria-modal": !0 } : {},
+      tabIndex: y ? -1 : void 0,
+      "data-streamoid-agent": "pane",
+      "data-surface": A,
+      "data-layout": m ? "sheet" : "docked",
+      "data-testid": "agent-side-pane",
+      className: l,
+      style: {
+        flexDirection: "column",
+        boxSizing: "border-box",
+        background: "var(--alias-surface-base)",
+        borderRight: m || f ? void 0 : "1px solid var(--alias-border-subtle)",
+        ...fe
+      },
+      children: N ? /* @__PURE__ */ oe(ve, { children: [
+        !m && !f ? /* @__PURE__ */ g(
+          Ie,
+          {
+            width: e.width,
+            onWidthChange: e.setWidth,
+            onWidthCommit: e.commitWidth,
+            min: e.bounds.min,
+            max: e.bounds.max,
+            edge: "right",
+            ariaLabel: "Resize Ask CXO"
+          }
+        ) : null,
+        /* @__PURE__ */ g(
+          "div",
+          {
+            style: {
+              display: "flex",
+              flexDirection: "column",
+              flex: 1,
+              minHeight: 0,
+              minWidth: 0,
+              overflow: "hidden"
+            },
+            children: /* @__PURE__ */ g(Oe, { onRetry: q, children: /* @__PURE__ */ g(me, { fallback: /* @__PURE__ */ g(_e, {}), children: /* @__PURE__ */ g(z, { adapters: H }, e.workspaceEpoch) }) }, e.workspaceEpoch)
+          }
+        )
+      ] }) : null
+    }
+  );
+}
+function Be(e, t) {
+  return be(e, t).length;
+}
+export {
+  re as AGENT_PANE_DOCKED_MEDIA_QUERY,
+  Y as AGENT_PANE_WIDTH_KEY,
+  Ye as AgentSidePane,
+  Ae as DEFAULT_PANE_PERSIST_KEY,
+  be as deriveScopeSuggestions,
+  Be as paneSuggestionCount,
+  te as prefetchAgent,
+  $e as useAgentPaneController
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamoid/agent",
-  "version": "0.6.53",
+  "version": "0.6.55",
   "description": "Native (no-iframe) embeddable Streamoid agent chat panel. Host renders <AgentPanel adapters={\u2026}/>. Prebuilt bundle \u2014 source + build live in the stream-agent repo.",
   "type": "module",
   "main": "./dist/index.js",
@@ -11,6 +11,10 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
+    "./pane": {
+      "types": "./dist/pane.d.ts",
+      "import": "./dist/pane.js"
+    },
     "./style.css": "./dist/style.css"
   },
   "files": [