@streamoid/agent 0.6.52 → 0.6.54

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