@streamoid/agent 0.6.14 → 0.6.16

package/dist/index.d.ts

@@ -33,6 +33,34 @@ export interface AgentChatShellWorkspace {
   [key: string]: unknown;
 }
 
+/** What the host reports about the page the panel is sitting on. Unknown keys
+ *  are dropped server-side, so hosts may add their own freely. */
+export interface AgentHostContext {
+  /** Which application, e.g. `artifax`. */
+  app?: string;
+  /** Human name of the current page, e.g. `Boards`. */
+  page?: string;
+  /** Route pattern rather than the filled path, e.g. `/dashboard/:workspaceId/home`. */
+  route?: string;
+  /** Absolute URL of the host page. */
+  url?: string;
+  /** Identifiers a tool call might need: workspaceId, boardId, sessionId… */
+  ids?: Record<string, string | number>;
+  /** A short list of what is on screen — board names, selected items. */
+  visible?: string[];
+  [key: string]: unknown;
+}
+
+/** Whether the panel currently needs the host's whole screen, and why. */
+export interface AgentSurfaceState {
+  /** `fullscreen` while the conversation on screen has an artefact panel open. */
+  mode: 'inline' | 'fullscreen';
+  /** How many panels that conversation has open. */
+  panelCount: number;
+  /** The panel in front, when there is one. */
+  activePanel?: { id: string; kind: string; title: string } | null;
+}
+
 export interface AgentChatShellAdapters {
   auth: AgentChatShellAuth;
   workspace: { current: AgentChatShellWorkspace };
@@ -40,6 +68,13 @@ export interface AgentChatShellAdapters {
   config: {
     apiBase: string;
     hide?: { sidepane?: boolean; newBrief?: boolean; notifications?: boolean };
+    /**
+     * `inline_ask` declares this mount an inline assistant sitting on top of a
+     * host application page. It unlocks the tools that only make sense there —
+     * `capture_inline_screenshot`, `navigate_parent` — and adds the inline-mode
+     * instructions to the prompt. Defaults to `normal`.
+     */
+    widgetMode?: 'normal' | 'inline_ask';
   };
   navigation: {
     chatId: string | null;
@@ -48,6 +83,25 @@ export interface AgentChatShellAdapters {
   /** Backend recovered after an outage — host decides what to do (must NOT
    *  reload the host window). */
   onBackendRecovered?: () => void;
+  /**
+   * The page the panel is sitting on. Sent with every message, so update it as
+   * the user navigates: the agent then knows where they are without spending a
+   * turn on `capture_inline_screenshot`.
+   */
+  hostContext?: AgentHostContext | null;
+  /**
+   * Called when the panel starts or stops showing a non-text artefact — a
+   * table, an image set, a widget, a techpack, a board.
+   *
+   * The panel cannot give an artefact more room than the host gave the panel,
+   * and a rail wide enough for a conversation is not wide enough for a
+   * spreadsheet. So the decision is reported rather than taken: widen your
+   * container on `fullscreen` and restore it on `inline`. Do nothing and
+   * behaviour is unchanged.
+   *
+   * Fires only on change, and only for the conversation on screen.
+   */
+  onSurfaceChange?: (state: AgentSurfaceState) => void;
   /**
    * Supply the canvas as a component and the Dreamer panel drops its iframe:
    * no embedded page, so no cross-origin auth, no postMessage handshake, no

package/dist/index.js

@@ -15205,6 +15205,7 @@ const trimTrailingSlashes = (e) => "".replace(/\/+$/, ""), DEFAULT_API_BASE = tr
   mode: "unknown",
   widgetMode: "normal",
   inlineCollapsed: !1,
+  hostContext: null,
   setAuth: (t) => e(() => (storeWorkspaceId(t.workspaceId), {
     encToken: t.encToken || null,
     workspaceId: t.workspaceId,
@@ -15230,11 +15231,25 @@ const trimTrailingSlashes = (e) => "".replace(/\/+$/, ""), DEFAULT_API_BASE = tr
   setApiBase: (t) => e({ apiBase: t }),
   setCentralDashboardUrl: (t) => e({ centralDashboardUrl: t }),
   setMode: (t) => e({ mode: t }),
-  setWidgetMode: (t) => {
-    const n = normalizeWidgetMode(t);
-    e({ widgetMode: n, inlineCollapsed: n === "inline_ask" });
-  },
+  /* A WRITE THAT CHANGES NOTHING STILL COSTS A RENDER.
+   *
+   * `setWidgetMode` and `setHostContext` are both called from effects the
+   * native shell runs on mount, and hosts that pass neither (every host before
+   * this feature) were therefore paying two store notifications for two no-ops.
+   * Nothing in the store is cheap to notify: `ChatScreen` subscribes to the
+   * WHOLE auth store, so each notification re-renders the transcript.
+   *
+   * Returning the current state object short-circuits zustand's setState
+   * (`Object.is(nextState, state)`), so an unchanged value notifies nobody. */
+  setWidgetMode: (t) => e((n) => {
+    const o = normalizeWidgetMode(t), s = o === "inline_ask";
+    return n.widgetMode === o && n.inlineCollapsed === s ? n : { widgetMode: o, inlineCollapsed: s };
+  }),
   setInlineCollapsed: (t) => e({ inlineCollapsed: t }),
+  setHostContext: (t) => e((n) => {
+    const o = t ?? null;
+    return n.hostContext === o || n.hostContext && o && JSON.stringify(n.hostContext) === JSON.stringify(o) ? n : { hostContext: o };
+  }),
   refreshToken: (t) => e({ encToken: t }),
   clearAuth: () => {
     const t = window;
@@ -15251,6 +15266,7 @@ const trimTrailingSlashes = (e) => "".replace(/\/+$/, ""), DEFAULT_API_BASE = tr
       hideNewBrief: !1,
       hideNotifications: !1,
       widgetMode: "normal",
+      hostContext: null,
       inlineCollapsed: !1,
       ready: !1
     });
@@ -16300,8 +16316,8 @@ async function sendMessageToAgent(e, t, n, o, s, l = !1, c = {}) {
     enc_token: getEncTokenValue(),
     color_mode: useThemeStore.getState().colorMode,
     widget_mode: c.widgetMode ?? "normal"
-  };
-  return c.clientMessageId && (f.client_message_id = c.clientMessageId), c.resumeValues !== void 0 ? (f.resume_values = c.resumeValues, f.resume_message = s) : c.resume_values !== void 0 && (f.resume_values = c.resume_values, f.resume_message = s), c.autonomy !== void 0 && (f.autonomy = c.autonomy), c.llmModel && (f.llm_model = c.llmModel), c.agentId && (f.agent_id = c.agentId), await apiFetch(`/workspaces/${e}/conversations/send`, {
+  }, h = useAuthStore.getState().hostContext;
+  return h && Object.keys(h).length > 0 && (f.host_context = h), c.clientMessageId && (f.client_message_id = c.clientMessageId), c.resumeValues !== void 0 ? (f.resume_values = c.resumeValues, f.resume_message = s) : c.resume_values !== void 0 && (f.resume_values = c.resume_values, f.resume_message = s), c.autonomy !== void 0 && (f.autonomy = c.autonomy), c.llmModel && (f.llm_model = c.llmModel), c.agentId && (f.agent_id = c.agentId), await apiFetch(`/workspaces/${e}/conversations/send`, {
     method: "POST",
     body: JSON.stringify(f)
   });
@@ -128668,67 +128684,76 @@ function buildCanvasScreenshot({
   width: e,
   height: t,
   title: n,
-  lines: o
+  lines: o,
+  source: s
 }) {
-  const s = document.createElement("canvas");
-  s.width = e, s.height = t;
-  const l = s.getContext("2d");
-  if (!l)
+  const l = document.createElement("canvas");
+  l.width = e, l.height = t;
+  const c = l.getContext("2d");
+  if (!c)
     throw new Error("Canvas rendering is not available");
-  const c = document.documentElement.classList.contains("dark");
-  return l.fillStyle = c ? "#0b0b0f" : "#f6f7fb", l.fillRect(0, 0, e, t), l.fillStyle = c ? "#f5f5f5" : "#111827", l.font = "600 22px sans-serif", l.fillText(n, 24, 42), l.font = "14px sans-serif", l.fillStyle = c ? "#d1d5db" : "#4b5563", o.slice(0, 18).forEach((f, h) => {
-    l.fillText(f.slice(0, 120), 24, 76 + h * 24);
+  const f = document.documentElement.classList.contains("dark");
+  return c.fillStyle = f ? "#0b0b0f" : "#f6f7fb", c.fillRect(0, 0, e, t), c.fillStyle = f ? "#f5f5f5" : "#111827", c.font = "600 22px sans-serif", c.fillText(n, 24, 42), c.font = "14px sans-serif", c.fillStyle = f ? "#d1d5db" : "#4b5563", o.slice(0, 18).forEach((h, g) => {
+    c.fillText(h.slice(0, 120), 24, 76 + g * 24);
   }), {
-    dataUrl: s.toDataURL("image/png"),
+    dataUrl: l.toDataURL("image/png"),
     width: e,
     height: t,
-    source: "widget_iframe"
+    source: s
   };
 }
+function ownDocumentIsHostPage() {
+  return !(window.parent && window.parent !== window);
+}
 async function captureIframeScreenshot() {
-  console.info("[UIComponents] Capturing widget iframe screenshot");
-  const e = Math.max(1, Math.ceil(window.innerWidth || 1024)), t = Math.max(1, Math.ceil(window.innerHeight || 768)), n = document.documentElement.cloneNode(!0);
-  n.querySelectorAll("script").forEach((f) => f.remove()), n.setAttribute("xmlns", "http://www.w3.org/1999/xhtml");
-  const o = new XMLSerializer().serializeToString(n), s = `
-    <svg xmlns="http://www.w3.org/2000/svg" width="${e}" height="${t}">
-      <foreignObject width="100%" height="100%">${o}</foreignObject>
+  const e = ownDocumentIsHostPage() ? "host_page" : "widget_iframe";
+  console.info("[UIComponents] Capturing own document screenshot", { source: e });
+  const t = Math.max(1, Math.ceil(window.innerWidth || 1024)), n = Math.max(1, Math.ceil(window.innerHeight || 768)), o = document.documentElement.cloneNode(!0);
+  o.querySelectorAll("script").forEach((h) => h.remove()), o.setAttribute("xmlns", "http://www.w3.org/1999/xhtml");
+  const s = new XMLSerializer().serializeToString(o), l = `
+    <svg xmlns="http://www.w3.org/2000/svg" width="${t}" height="${n}">
+      <foreignObject width="100%" height="100%">${s}</foreignObject>
     </svg>
-  `, l = new Blob([s], { type: "image/svg+xml;charset=utf-8" }), c = URL.createObjectURL(l);
+  `, c = new Blob([l], { type: "image/svg+xml;charset=utf-8" }), f = URL.createObjectURL(c);
   try {
-    const f = new Image(), h = new Promise((E, R) => {
-      const T = window.setTimeout(
-        () => R(new Error("Widget iframe screenshot timed out")),
+    const h = new Image(), g = new Promise((R, T) => {
+      const M = window.setTimeout(
+        () => T(new Error("Widget iframe screenshot timed out")),
         2e3
       );
-      f.onload = () => {
-        window.clearTimeout(T), E();
-      }, f.onerror = () => {
-        window.clearTimeout(T), R(new Error("Widget iframe screenshot failed to render"));
+      h.onload = () => {
+        window.clearTimeout(M), R();
+      }, h.onerror = () => {
+        window.clearTimeout(M), T(new Error("Widget iframe screenshot failed to render"));
       };
     });
-    f.src = c, await h;
-    const g = document.createElement("canvas");
-    g.width = e, g.height = t;
-    const b = g.getContext("2d");
-    if (!b) throw new Error("Canvas rendering is not available");
-    return b.drawImage(f, 0, 0, e, t), {
-      dataUrl: g.toDataURL("image/png"),
-      width: e,
-      height: t,
-      source: "widget_iframe"
+    h.src = f, await g;
+    const b = document.createElement("canvas");
+    b.width = t, b.height = n;
+    const E = b.getContext("2d");
+    if (!E) throw new Error("Canvas rendering is not available");
+    return E.drawImage(h, 0, 0, t, n), {
+      dataUrl: b.toDataURL("image/png"),
+      width: t,
+      height: n,
+      source: e
     };
-  } catch (f) {
-    return console.info("[UIComponents] DOM screenshot fallback failed; using summary canvas", f), buildCanvasScreenshot({
-      width: e,
-      height: t,
+  } catch (h) {
+    return console.info("[UIComponents] DOM screenshot fallback failed; using summary canvas", h), buildCanvasScreenshot({
+      width: t,
+      height: n,
       title: document.title || "Copilot Widget",
       lines: [
         `URL: ${window.location.href}`,
         `Visible text: ${(document.body.innerText || "").replace(/\s+/g, " ").trim()}`
-      ]
+      ],
+      /* Rasterisation failed and this is a canvas with the page's text drawn
+       * onto it. It is not a screenshot, so it does not claim to be one: the
+       * backend declines to describe it as the host page. */
+      source: "summary_canvas"
     });
   } finally {
-    URL.revokeObjectURL(c);
+    URL.revokeObjectURL(f);
   }
 }
 async function captureScreenshotWithFallback(e) {
@@ -128741,7 +128766,7 @@ async function captureScreenshotWithFallback(e) {
           dataUrl: n.dataUrl,
           width: n.width,
           height: n.height,
-          source: n.source || "host_page"
+          source: n.source === "summary_canvas" || n.source === "widget_iframe" ? n.source : "host_page"
         };
     } catch (n) {
       console.info("[UIComponents] Host screenshot unavailable; falling back to widget iframe capture", n);
@@ -130329,7 +130354,24 @@ function SidePaneHost({
                     className: [
                       "shrink-0 rounded-[8px] px-2.5 py-1 text-[13px] leading-[18px] transition-colors",
                       "outline-none focus-visible:ring-2 focus-visible:ring-[var(--alias-border-focus)]",
-                      E ? "bg-[var(--alias-surface-subtle)] text-[var(--alias-text---icons-primary)]" : "text-[var(--alias-text---icons-secondary)] hover:text-[var(--alias-text---icons-primary)]"
+                      /* SELECTED IS A FILL, NOT A SURFACE.
+                       *
+                       * This was `surface-subtle`, which is one step lighter than
+                       * `surface-base` in the dark theme and therefore read as a
+                       * selected tab -- and is `#ffffff` in the LIGHT theme, the
+                       * same as the card it sits on, so the highlighted tab was
+                       * invisible. Every `--alias-surface-*` token collapses to
+                       * white there on purpose: light mode expresses elevation
+                       * with shadow and border, which a 24px tab has neither of.
+                       *
+                       * `fill-neutral-neutralselected` is the design system's
+                       * answer for exactly this state and has contrast in both
+                       * themes (#242424 on #101010 dark, #ededed on #ffffff
+                       * light). Hover on an unselected tab stays a text change:
+                       * the light-mode hover fill is DARKER than the selected
+                       * fill, so filling on hover would make hover look more
+                       * selected than selected. */
+                      E ? "bg-[var(--alias-fill-neutral-neutralselected)] text-[var(--alias-text---icons-primary)]" : "text-[var(--alias-text---icons-secondary)] hover:text-[var(--alias-text---icons-primary)]"
                     ].join(" "),
                     children: b.title
                   },
@@ -130346,7 +130388,7 @@ function SidePaneHost({
               "aria-label": `Close ${h.title}`,
               title: `Close ${h.title}`,
               "data-testid": "side-pane-close",
-              className: "inline-flex size-8 shrink-0 items-center justify-center rounded-[8px] text-[var(--alias-text---icons-secondary)] transition-colors hover:bg-[var(--alias-surface-subtle)] hover:text-[var(--alias-text---icons-primary)]",
+              className: "inline-flex size-8 shrink-0 items-center justify-center rounded-[8px] text-[var(--alias-text---icons-secondary)] transition-colors hover:bg-[var(--alias-fill-neutral-neutralhover)] hover:text-[var(--alias-text---icons-primary)]",
               children: /* @__PURE__ */ jsx(PanelRightClose, { className: "size-4" })
             }
           )
@@ -136582,6 +136624,17 @@ function AttentionToast() {
     n.id
   ) }) }) : null;
 }
+function deriveSurfaceState(e, t, n) {
+  const o = e.filter((l) => l.chatId === t), s = o.find((l) => l.id === n) ?? o[o.length - 1];
+  return {
+    mode: o.length > 0 ? "fullscreen" : "inline",
+    panelCount: o.length,
+    activePanel: s ? { id: s.id, kind: s.kind, title: s.title } : null
+  };
+}
+function surfaceFingerprint(e) {
+  return `${e.mode}:${e.panelCount}:${e.activePanel?.id ?? ""}`;
+}
 function getCentralUrl() {
   return useAuthStore.getState().centralDashboardUrl;
 }
@@ -136803,7 +136856,7 @@ function useFetchConversations(e) {
 function AgentChatShell({ adapters: e }) {
   const t = useRef(e);
   t.current = e;
-  const { auth: n, workspace: o, theme: s, config: l, navigation: c } = e;
+  const { auth: n, workspace: o, theme: s, config: l, navigation: c } = e, { hostContext: f, onSurfaceChange: h } = e;
   useState(() => {
     configureStreamAgentClient({
       getApiBase: () => t.current.config.apiBase,
@@ -136812,8 +136865,8 @@ function AgentChatShell({ adapters: e }) {
       onSessionExpired: () => t.current.auth.onSessionExpired?.(),
       onBackendRecovered: () => t.current.onBackendRecovered?.()
     });
-    const h = useAuthStore.getState();
-    return h.setMode("iframe"), h.setAuth({
+    const I = useAuthStore.getState();
+    return I.setMode("iframe"), I.setAuth({
       workspaceId: o.current.id,
       userId: n.user.id,
       email: n.user.email,
@@ -136825,19 +136878,33 @@ function AgentChatShell({ adapters: e }) {
       totalCredits: o.current.totalCredits ?? null,
       hideSidepane: l.hide?.sidepane ?? !0,
       hideNewBrief: l.hide?.newBrief ?? !0,
-      hideNotifications: l.hide?.notifications ?? !0
-    }), useThemeStore.getState().setTheme(s.mode), !0;
+      hideNotifications: l.hide?.notifications ?? !0,
+      widgetMode: l.widgetMode ?? "normal"
+    }), useAuthStore.getState().setHostContext(f ?? null), useThemeStore.getState().setTheme(s.mode), !0;
   }), useEffect(() => {
     useAuthStore.getState().switchWorkspace(o.current.id);
   }, [o.current.id]), useEffect(() => {
     useThemeStore.getState().setTheme(s.mode);
   }, [s.mode]), useEffect(() => {
+    useAuthStore.getState().setWidgetMode(l.widgetMode ?? "normal");
+  }, [l.widgetMode]), useEffect(() => {
+    useAuthStore.getState().setHostContext(f ?? null);
+  }, [f]), useEffect(() => {
     useAuthStore.getState().setCredits(
       o.current.availableCredits ?? null,
       o.current.totalCredits ?? null
     );
-  }, [o.current.availableCredits, o.current.totalCredits]), useSessionKeepalive(), useCompletionNotifier(), useFetchConversations(o.current.id);
-  const f = useMemo(
+  }, [o.current.availableCredits, o.current.totalCredits]);
+  const g = useChatStore((I) => I.panels), b = useChatStore((I) => I.activePanelId), E = useChatStore((I) => I.activeChatId), R = useMemo(
+    () => deriveSurfaceState(g, E, b),
+    [g, b, E]
+  ), T = useRef(null);
+  useEffect(() => {
+    if (!h) return;
+    const I = surfaceFingerprint(R);
+    T.current !== I && (T.current = I, h(R));
+  }, [R, h]), useSessionKeepalive(), useCompletionNotifier(), useFetchConversations(o.current.id);
+  const M = useMemo(
     () => ({
       chatId: c.chatId,
       navigateToChat: c.onChatIdChange
@@ -136849,7 +136916,7 @@ function AgentChatShell({ adapters: e }) {
     {
       className: "sa-surface relative flex h-full w-full flex-col overflow-hidden bg-transparent text-[var(--alias-text---icons-primary)]",
       "data-theme": "Mode 1",
-      children: /* @__PURE__ */ jsx(ChatNavigationProvider, { value: f, children: /* @__PURE__ */ jsxs(HostCanvasProvider, { value: e.canvas ?? null, children: [
+      children: /* @__PURE__ */ jsx(ChatNavigationProvider, { value: M, children: /* @__PURE__ */ jsxs(HostCanvasProvider, { value: e.canvas ?? null, children: [
         /* @__PURE__ */ jsx(AttentionToast, {}),
         /* @__PURE__ */ jsx(ChatScreen, {})
       ] }) })