@invergent/agent-chat-react 2.8.6 → 2.8.7

package/dist/index.cjs

@@ -553,6 +553,13 @@ function BrowserControlBar({
     )
   ] });
 }
+var MIN_ZOOM = 1;
+var MAX_ZOOM = 3;
+var ZOOM_STEP = 0.5;
+function clampZoom(zoom) {
+  const bounded = Math.min(MAX_ZOOM, Math.max(MIN_ZOOM, zoom));
+  return Math.round(bounded * 100) / 100;
+}
 function toWsUrl(src) {
   const url = new URL(src, window.location.href);
   if (url.protocol === "http:") {
@@ -571,10 +578,12 @@ function BrowserLiveView({
   const onDisconnectRef = react.useRef(onDisconnect);
   onDisconnectRef.current = onDisconnect;
   const [state, setState] = react.useState("connecting");
+  const [zoom, setZoom] = react.useState(MIN_ZOOM);
   react.useEffect(() => {
     const container = containerRef.current;
     if (!container) return;
     setState("connecting");
+    setZoom(MIN_ZOOM);
     let rfb;
     let disposed = false;
     const handleConnect = () => setState("connected");
@@ -605,8 +614,68 @@ function BrowserLiveView({
       }
     };
   }, [src]);
+  const keepCanvasFocus = (event) => event.preventDefault();
+  const zoomTo = (next) => setZoom((current) => clampZoom(next || current));
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative h-full w-full bg-black", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { ref: containerRef, "data-testid": testId, className: "h-full w-full" }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 overflow-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref: containerRef,
+        "data-testid": testId,
+        style: { width: `${zoom * 100}%`, height: `${zoom * 100}%` }
+      }
+    ) }),
+    state === "connected" && /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        "data-testid": "browser-rfb-zoom",
+        className: "absolute bottom-3 right-3 flex items-center gap-0.5 rounded-md border border-line bg-card/90 p-0.5 text-muted-foreground shadow-sm backdrop-blur",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              tabIndex: -1,
+              "aria-label": "Zoom out",
+              disabled: zoom <= MIN_ZOOM,
+              onMouseDown: keepCanvasFocus,
+              onClick: () => zoomTo(zoom - ZOOM_STEP),
+              className: "flex size-6 items-center justify-center rounded text-sm leading-none hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-40",
+              children: "\u2212"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              tabIndex: -1,
+              "aria-label": "Reset zoom",
+              disabled: zoom === MIN_ZOOM,
+              onMouseDown: keepCanvasFocus,
+              onClick: () => setZoom(MIN_ZOOM),
+              className: "min-w-10 rounded px-1 text-center text-xs tabular-nums hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none",
+              children: [
+                Math.round(zoom * 100),
+                "%"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              tabIndex: -1,
+              "aria-label": "Zoom in",
+              disabled: zoom >= MAX_ZOOM,
+              onMouseDown: keepCanvasFocus,
+              onClick: () => zoomTo(zoom + ZOOM_STEP),
+              className: "flex size-6 items-center justify-center rounded text-sm leading-none hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-40",
+              children: "+"
+            }
+          )
+        ]
+      }
+    ),
     state !== "connected" && /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
@@ -6694,6 +6763,8 @@ function ChatComposerInner({
   showWorkspace = false,
   onToggleWorkspace,
   canShowBrowser = false,
+  browserProfileId,
+  onSelectBrowserProfile,
   canShowWorkspace = false,
   deepResearchEnabled = false,
   researchEnabled = false,
@@ -6706,6 +6777,20 @@ function ChatComposerInner({
   onViewModeChange
 }) {
   const { adapter } = useAgentChatAdapterContext();
+  const [profileMenuOpen, setProfileMenuOpen] = react.useState(false);
+  const [browserProfiles, setBrowserProfiles] = react.useState([]);
+  react.useEffect(() => {
+    if (!profileMenuOpen || !adapter.listBrowserProfiles) return;
+    let cancelled = false;
+    void adapter.listBrowserProfiles().then((p) => {
+      if (!cancelled) setBrowserProfiles(p);
+    }).catch(() => {
+      if (!cancelled) setBrowserProfiles([]);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [profileMenuOpen, adapter]);
   const { textInput, attachments } = usePromptInputController();
   const status = isRunning ? "streaming" : disabled ? "error" : "ready";
   const [adapterCommands, setAdapterCommands] = react.useState([]);
@@ -7045,6 +7130,60 @@ function ChatComposerInner({
                       children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.GlobeIcon, { className: "size-4" })
                     }
                   ),
+                  canShowBrowser && onSelectBrowserProfile && adapter.listBrowserProfiles && /* @__PURE__ */ jsxRuntime.jsxs(
+                    Popover,
+                    {
+                      open: profileMenuOpen,
+                      onOpenChange: setProfileMenuOpen,
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+                          PromptInputButton,
+                          {
+                            "aria-label": "Select browser profile",
+                            "aria-pressed": !!browserProfileId,
+                            className: browserProfileId ? "bg-accent text-foreground" : void 0,
+                            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.IdCardIcon, { className: "size-4" })
+                          }
+                        ) }),
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          PopoverContent,
+                          {
+                            side: "top",
+                            align: "start",
+                            className: "w-64 overflow-hidden rounded-xl p-1",
+                            children: /* @__PURE__ */ jsxRuntime.jsx(Command, { children: /* @__PURE__ */ jsxRuntime.jsxs(CommandList, { children: [
+                              /* @__PURE__ */ jsxRuntime.jsx(
+                                CommandItem,
+                                {
+                                  onSelect: () => {
+                                    setProfileMenuOpen(false);
+                                    onSelectBrowserProfile(null);
+                                  },
+                                  className: "gap-3 rounded-md px-3 py-2",
+                                  children: "No profile"
+                                }
+                              ),
+                              browserProfiles.map((p) => /* @__PURE__ */ jsxRuntime.jsxs(
+                                CommandItem,
+                                {
+                                  onSelect: () => {
+                                    setProfileMenuOpen(false);
+                                    onSelectBrowserProfile(p.id);
+                                  },
+                                  className: "gap-3 rounded-md px-3 py-2",
+                                  children: [
+                                    p.name,
+                                    browserProfileId === p.id && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto text-xs text-muted-foreground", children: "Active" })
+                                  ]
+                                },
+                                p.id
+                              ))
+                            ] }) })
+                          }
+                        )
+                      ]
+                    }
+                  ),
                   canShowWorkspace && onToggleWorkspace && /* @__PURE__ */ jsxRuntime.jsx(
                     PromptInputButton,
                     {
@@ -7764,9 +7903,9 @@ function ArtifactTable({ spec }) {
 init_utils();
 var DEFAULT_HEIGHT_PX = 480;
 var EXPANDED_HEIGHT_PX = 800;
-var MIN_ZOOM = 0.5;
-var MAX_ZOOM = 2;
-var ZOOM_STEP = 0.1;
+var MIN_ZOOM2 = 0.5;
+var MAX_ZOOM2 = 2;
+var ZOOM_STEP2 = 0.1;
 var SAFETY_STYLE_PREAMBLE = "<style>html,body{max-height:100vh}canvas{max-height:80vh!important}</style>";
 function injectSafetyStyle(html) {
   const headCloseIdx = html.search(/<\/head\s*>/i);
@@ -7783,7 +7922,7 @@ function ArtifactHtml({
   const [zoom, setZoom] = react.useState(1);
   const safeSrcdoc = react.useMemo(() => injectSafetyStyle(spec.html), [spec.html]);
   const viewportHeight = expanded ? EXPANDED_HEIGHT_PX : DEFAULT_HEIGHT_PX;
-  const clamp = (v) => Math.round(Math.min(MAX_ZOOM, Math.max(MIN_ZOOM, v)) * 100) / 100;
+  const clamp = (v) => Math.round(Math.min(MAX_ZOOM2, Math.max(MIN_ZOOM2, v)) * 100) / 100;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -7829,8 +7968,8 @@ function ArtifactHtml({
               "button",
               {
                 type: "button",
-                onClick: () => setZoom((z) => clamp(z - ZOOM_STEP)),
-                disabled: zoom <= MIN_ZOOM,
+                onClick: () => setZoom((z) => clamp(z - ZOOM_STEP2)),
+                disabled: zoom <= MIN_ZOOM2,
                 className: "hover:text-foreground disabled:opacity-40 cursor-pointer",
                 "aria-label": "zoom out",
                 children: "\u2212"
@@ -7853,8 +7992,8 @@ function ArtifactHtml({
               "button",
               {
                 type: "button",
-                onClick: () => setZoom((z) => clamp(z + ZOOM_STEP)),
-                disabled: zoom >= MAX_ZOOM,
+                onClick: () => setZoom((z) => clamp(z + ZOOM_STEP2)),
+                disabled: zoom >= MAX_ZOOM2,
                 className: "hover:text-foreground disabled:opacity-40",
                 "aria-label": "zoom in",
                 children: "+"
@@ -10231,6 +10370,8 @@ function ChatThread({
   showWorkspace = false,
   onToggleWorkspace,
   canShowBrowser = false,
+  browserProfileId,
+  onSelectBrowserProfile,
   canShowWorkspace = false,
   viewMode = "simple",
   onViewModeChange,
@@ -10302,6 +10443,8 @@ function ChatThread({
         showWorkspace,
         onToggleWorkspace,
         canShowBrowser,
+        browserProfileId,
+        onSelectBrowserProfile,
         canShowWorkspace,
         viewMode,
         onViewModeChange,
@@ -12819,6 +12962,8 @@ function AgentChat({
   onMessagesChange,
   disabled,
   onComposerError,
+  browserProfileId,
+  onSelectBrowserProfile,
   deepResearchEnabled = false,
   researchEnabled = false,
   codeAgentsEnabled = false,
@@ -12968,6 +13113,8 @@ function AgentChat({
                     tokenUsage: runtime.tokenUsage,
                     retryIndicator: runtime.retryIndicator,
                     onComposerError,
+                    browserProfileId,
+                    onSelectBrowserProfile,
                     showBrowser,
                     onToggleBrowser: handleToggleBrowser,
                     showWorkspace,
@@ -13743,7 +13890,7 @@ function InboxDetailActions({
       {
         type: "button",
         size: "sm",
-        onClick: () => onSessionSelect?.(item.sessionId),
+        onClick: () => onSessionSelect?.(item.sessionId, item),
         "aria-label": "Open session",
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ExternalLinkIcon, { className: "size-3.5" }),
@@ -16671,11 +16818,16 @@ function SessionTreePanel({
           limit: sessionListLimit
         }) : Promise.resolve(null);
         const sessionTreePromise = sessionId && adapter.getSessionTree ? adapter.getSessionTree({ sessionId }) : Promise.resolve(null);
-        const [sessionList, sessionTree] = await Promise.all([
+        const [listResult, treeResult] = await Promise.allSettled([
           sessionListPromise,
           sessionTreePromise
         ]);
         if (!mounted.current || currentRequestId !== requestId.current) return;
+        if (loadList && listResult.status === "rejected") {
+          throw listResult.reason;
+        }
+        const sessionList = listResult.status === "fulfilled" ? listResult.value : null;
+        const sessionTree = treeResult.status === "fulfilled" ? treeResult.value : null;
         let nextNodes = mergeTreeNodes([
           sessionList?.sessions.map(sessionToTreeNode) ?? [],
           sessionTree?.nodes ?? []
@@ -16833,6 +16985,7 @@ function SessionTreePanel({
 exports.ACTIVE_MISSION_STATUSES = ACTIVE_MISSION_STATUSES;
 exports.AgentChat = AgentChat;
 exports.AgentChatAdapterProvider = AgentChatAdapterProvider;
+exports.BrowserLiveView = BrowserLiveView;
 exports.CitationText = CitationText;
 exports.CodingAgentsPanel = CodingAgentsPanel;
 exports.ComposioConnectCard = ComposioConnectCard;