@shuffleio/shuffle-mcps 0.0.5 → 0.0.7

package/dist/index.js

@@ -1,10 +1,34 @@
 // ShuffleMCP.tsx
 import React, { useState as useState8, useEffect as useEffect6, useRef as useRef5, useCallback as useCallback7, useMemo as useMemo4, useImperativeHandle } from "react";
 import { algoliasearch } from "algoliasearch";
+import { Tooltip as Tooltip4 } from "@mui/material";
 
 // AppDetailDrawer.tsx
 import { useState as useState7, useEffect as useEffect5, useMemo as useMemo3, useRef as useRef4 } from "react";
-import { toast as toast3 } from "sonner";
+
+// toast.ts
+var defaultImpl = (arg, opts) => {
+  const isObj = typeof arg === "object" && arg !== null;
+  const title = isObj ? arg.title : arg;
+  const description = isObj ? arg.description : opts?.description;
+  const variant = (isObj ? arg.variant : void 0) || "default";
+  const msg = [title, description].filter(Boolean).join(" \u2014 ");
+  if (variant === "destructive" || variant === "error") console.error("[toast]", msg);
+  else if (variant === "warning") console.warn("[toast]", msg);
+  else console.log("[toast]", msg);
+};
+var _impl = defaultImpl;
+function setToastImpl(fn) {
+  _impl = fn;
+}
+var base = ((arg, opts) => _impl(arg, opts));
+base.success = (msg, opts) => _impl({ title: msg, description: opts?.description, variant: "success" }, opts);
+base.error = (msg, opts) => _impl({ title: msg, description: opts?.description, variant: "destructive" }, opts);
+base.info = (msg, opts) => _impl({ title: msg, description: opts?.description, variant: "info" }, opts);
+base.warning = (msg, opts) => _impl({ title: msg, description: opts?.description, variant: "warning" }, opts);
+var toast = base;
+
+// AppDetailDrawer.tsx
 import { Download, Forward } from "lucide-react";
 
 // api.ts
@@ -315,7 +339,7 @@ var DATASTORE_CATEGORIES = {
 import {
   Box as Box8,
   Typography as Typography8,
-  IconButton as IconButton3,
+  IconButton as IconButton4,
   Skeleton,
   Drawer
 } from "@mui/material";
@@ -339,6 +363,7 @@ import {
   CircularProgress
 } from "@mui/material";
 import AddIcon from "@mui/icons-material/Add";
+import { Link as RouterLink } from "react-router-dom";
 
 // authenticatedApps.ts
 var TTL_MS = 3e4;
@@ -787,7 +812,7 @@ var IntegrationStatus = ({ collapsed, filterApps, onAddClick, iconSize = 26, onD
             color: "hsl(var(--muted-foreground))",
             cursor: "pointer",
             "&:hover": {
-              backgroundColor: "hsl(var(--accent))"
+              backgroundColor: "hsl(var(--muted))"
             }
           },
           children: [
@@ -808,7 +833,7 @@ var IntegrationStatus = ({ collapsed, filterApps, onAddClick, iconSize = 26, onD
             color: "hsl(var(--muted-foreground))",
             cursor: "pointer",
             "&:hover": {
-              backgroundColor: "hsl(var(--accent))"
+              backgroundColor: "hsl(var(--muted))"
             }
           },
           children: "\u2212"
@@ -836,8 +861,8 @@ var IntegrationStatus = ({ collapsed, filterApps, onAddClick, iconSize = 26, onD
         IconButton,
         {
           size: "small",
-          component: "a",
-          href: "/onboarding",
+          component: RouterLink,
+          to: "/onboarding",
           sx: {
             width: 26,
             height: 26,
@@ -1234,19 +1259,6 @@ import { motion as motion3 } from "framer-motion";
 
 // AppAuthConfig.tsx
 import { useState as useState4, useEffect as useEffect3, useRef } from "react";
-
-// toast.ts
-var _impl = ({ title, description, variant }) => {
-  const msg = [title, description].filter(Boolean).join(" \u2014 ");
-  if (variant === "destructive") console.error("[toast]", msg);
-  else console.log("[toast]", msg);
-};
-function setToastImpl(fn) {
-  _impl = fn;
-}
-var toast = (arg) => _impl(arg);
-
-// AppAuthConfig.tsx
 import {
   Box as Box3,
   Typography as Typography3,
@@ -3598,7 +3610,6 @@ function TryMcpSection({ appName, appIcon, appId, categories }) {
 
 // SingulActionsPreview.tsx
 import { useState as useState6, useEffect as useEffect4, useMemo as useMemo2, useCallback as useCallback5, useRef as useRef3 } from "react";
-import { toast as toast2 } from "sonner";
 import {
   Box as Box7,
   Typography as Typography7,
@@ -3606,10 +3617,13 @@ import {
   Button as Button3,
   Autocomplete,
   TextField as TextField2,
-  ToggleButton,
-  ToggleButtonGroup
+  IconButton as IconButton3,
+  Tooltip as Tooltip3
 } from "@mui/material";
 import PlayArrowIcon from "@mui/icons-material/PlayArrow";
+import ContentCopyIcon from "@mui/icons-material/ContentCopy";
+import CheckIcon from "@mui/icons-material/Check";
+import { Code2, Terminal } from "lucide-react";
 import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
 import { createElement } from "react";
 var ACTION_DEFAULT_FIELDS = {
@@ -3865,14 +3879,16 @@ var SingulActionsPreview = ({
   const handleCopy = async () => {
     try {
       await navigator.clipboard.writeText(snippet);
-      toast2.success("Copied snippet");
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
     } catch {
-      toast2.error("Copy failed");
+      toast.error("Copy failed");
     }
   };
   const [playLoading, setPlayLoading] = useState6(false);
   const [playResult, setPlayResult] = useState6(null);
   const responseRef = useRef3(null);
+  const [copied, setCopied] = useState6(false);
   const scrollToResponse = () => {
     requestAnimationFrame(() => {
       responseRef.current?.scrollIntoView({ behavior: "smooth", block: "nearest" });
@@ -3927,14 +3943,14 @@ var SingulActionsPreview = ({
         }
       })();
       if (parsed?.success === false) {
-        toast2.error(parsed.reason || "Run failed");
+        toast.error(parsed.reason || "Run failed");
       } else {
-        toast2.success(`Ran ${selected?.name || lang}`);
+        toast.success(`Ran ${selected?.name || lang}`);
       }
     } catch (err) {
       const msg = err?.message || "Run failed";
       setPlayResult(msg);
-      toast2.error(msg);
+      toast.error(msg);
     } finally {
       setPlayLoading(false);
       scrollToResponse();
@@ -3979,86 +3995,54 @@ var SingulActionsPreview = ({
         },
         children: [
           isDisabled ? /* @__PURE__ */ jsx9(Typography7, { sx: { fontSize: "0.75rem", color: "hsl(var(--muted-foreground))", fontStyle: "italic", textAlign: "center", py: 1 }, children: "No category detected for this app" }) : /* @__PURE__ */ jsxs7(Fragment3, { children: [
-            /* @__PURE__ */ jsxs7(Box7, { sx: { display: "flex", gap: 1, mb: 1.5, alignItems: "center" }, children: [
-              /* @__PURE__ */ jsx9(
-                Autocomplete,
-                {
-                  size: "small",
-                  disableClearable: true,
-                  options: sortedActions,
-                  value: selected ?? sortedActions[0],
-                  onChange: (_, v) => v && handleSelect(v),
-                  groupBy: (o) => o.category,
-                  getOptionLabel: (o) => o?.label ?? "",
-                  isOptionEqualToValue: (a, b) => a?.name === b?.name && a?.category === b?.category,
-                  renderOption: (props, option) => /* @__PURE__ */ createElement("li", { ...props, key: `${option.category}-${option.name}` }, /* @__PURE__ */ jsxs7(Box7, { sx: { display: "flex", flexDirection: "column" }, children: [
-                    /* @__PURE__ */ jsx9(Typography7, { sx: { fontSize: "0.78rem", color: "hsl(var(--foreground))" }, children: option.label }),
-                    /* @__PURE__ */ jsx9(Typography7, { sx: { fontFamily: "'JetBrains Mono', monospace", fontSize: "0.65rem", color: "hsl(var(--muted-foreground))" }, children: option.name })
-                  ] })),
-                  sx: {
-                    flex: 1,
-                    "& .MuiOutlinedInput-root": {
+            /* @__PURE__ */ jsx9(Box7, { sx: { display: "flex", gap: 1, mb: 1.5, alignItems: "center" }, children: /* @__PURE__ */ jsx9(
+              Autocomplete,
+              {
+                size: "small",
+                disableClearable: true,
+                options: sortedActions,
+                value: selected ?? sortedActions[0],
+                onChange: (_, v) => v && handleSelect(v),
+                groupBy: (o) => o.category,
+                getOptionLabel: (o) => o?.label ?? "",
+                isOptionEqualToValue: (a, b) => a?.name === b?.name && a?.category === b?.category,
+                renderOption: (props, option) => /* @__PURE__ */ createElement("li", { ...props, key: `${option.category}-${option.name}` }, /* @__PURE__ */ jsxs7(Box7, { sx: { display: "flex", flexDirection: "column" }, children: [
+                  /* @__PURE__ */ jsx9(Typography7, { sx: { fontSize: "0.78rem", color: "hsl(var(--foreground))" }, children: option.label }),
+                  /* @__PURE__ */ jsx9(Typography7, { sx: { fontFamily: "'JetBrains Mono', monospace", fontSize: "0.65rem", color: "hsl(var(--muted-foreground))" }, children: option.name })
+                ] })),
+                sx: {
+                  flex: 1,
+                  "& .MuiOutlinedInput-root": {
+                    backgroundColor: "hsl(var(--card))",
+                    fontFamily: "'JetBrains Mono', monospace",
+                    fontSize: "0.75rem",
+                    color: "hsl(var(--foreground))",
+                    "& fieldset": { borderColor: "hsl(var(--border))" },
+                    "&:hover fieldset": { borderColor: "hsl(var(--primary))" },
+                    "&.Mui-focused fieldset": { borderColor: "hsl(var(--primary))" }
+                  }
+                },
+                slotProps: {
+                  paper: {
+                    sx: {
                       backgroundColor: "hsl(var(--card))",
-                      fontFamily: "'JetBrains Mono', monospace",
-                      fontSize: "0.75rem",
                       color: "hsl(var(--foreground))",
-                      "& fieldset": { borderColor: "hsl(var(--border))" },
-                      "&:hover fieldset": { borderColor: "hsl(var(--primary))" },
-                      "&.Mui-focused fieldset": { borderColor: "hsl(var(--primary))" }
-                    }
-                  },
-                  slotProps: {
-                    paper: {
-                      sx: {
-                        backgroundColor: "hsl(var(--card))",
-                        color: "hsl(var(--foreground))",
-                        border: "1px solid hsl(var(--border))",
-                        "& .MuiAutocomplete-groupLabel": {
-                          backgroundColor: "hsl(var(--muted) / 0.6)",
-                          color: "hsl(var(--muted-foreground))",
-                          fontSize: "0.65rem",
-                          fontWeight: 600,
-                          textTransform: "uppercase",
-                          letterSpacing: 0.6,
-                          lineHeight: "24px"
-                        }
-                      }
-                    }
-                  },
-                  renderInput: (params) => /* @__PURE__ */ jsx9(TextField2, { ...params, placeholder: "Select action" })
-                }
-              ),
-              /* @__PURE__ */ jsxs7(
-                ToggleButtonGroup,
-                {
-                  size: "small",
-                  exclusive: true,
-                  value: lang,
-                  onChange: (_, v) => v && setLang(v),
-                  sx: {
-                    "& .MuiToggleButton-root": {
-                      height: 36,
-                      px: 1.5,
-                      fontSize: "0.7rem",
-                      textTransform: "none",
-                      fontFamily: "'JetBrains Mono', monospace",
-                      color: "hsl(var(--muted-foreground))",
                       border: "1px solid hsl(var(--border))",
-                      "&.Mui-selected": {
-                        backgroundColor: "hsl(var(--primary) / 0.15)",
-                        color: "hsl(var(--primary))",
-                        borderColor: "hsl(var(--primary))",
-                        "&:hover": { backgroundColor: "hsl(var(--primary) / 0.2)" }
+                      "& .MuiAutocomplete-groupLabel": {
+                        backgroundColor: "hsl(var(--muted) / 0.6)",
+                        color: "hsl(var(--muted-foreground))",
+                        fontSize: "0.65rem",
+                        fontWeight: 600,
+                        textTransform: "uppercase",
+                        letterSpacing: 0.6,
+                        lineHeight: "24px"
                       }
                     }
-                  },
-                  children: [
-                    /* @__PURE__ */ jsx9(ToggleButton, { value: "curl", children: "curl" }),
-                    /* @__PURE__ */ jsx9(ToggleButton, { value: "python", children: "python" })
-                  ]
-                }
-              )
-            ] }),
+                  }
+                },
+                renderInput: (params) => /* @__PURE__ */ jsx9(TextField2, { ...params, placeholder: "Select action" })
+              }
+            ) }),
             /* @__PURE__ */ jsxs7(
               Box7,
               {
@@ -4077,82 +4061,95 @@ var SingulActionsPreview = ({
                       sx: {
                         display: "flex",
                         alignItems: "center",
-                        justifyContent: "space-between",
-                        px: 1.25,
-                        py: 0.75,
+                        gap: 1,
+                        px: 2,
+                        py: 1,
                         borderBottom: "1px solid hsl(var(--border))",
-                        backgroundColor: "hsl(var(--muted) / 0.4)"
+                        backgroundColor: "hsl(var(--card))"
                       },
                       children: [
-                        /* @__PURE__ */ jsxs7(Box7, { sx: { display: "flex", alignItems: "center", gap: 0.75 }, children: [
-                          /* @__PURE__ */ jsxs7(Box7, { sx: { display: "flex", gap: 0.4 }, children: [
-                            /* @__PURE__ */ jsx9(Box7, { sx: { width: 8, height: 8, borderRadius: "50%", backgroundColor: "hsl(0 70% 60% / 0.6)" } }),
-                            /* @__PURE__ */ jsx9(Box7, { sx: { width: 8, height: 8, borderRadius: "50%", backgroundColor: "hsl(40 80% 60% / 0.6)" } }),
-                            /* @__PURE__ */ jsx9(Box7, { sx: { width: 8, height: 8, borderRadius: "50%", backgroundColor: "hsl(140 60% 55% / 0.6)" } })
-                          ] }),
-                          /* @__PURE__ */ jsxs7(
-                            Typography7,
-                            {
-                              sx: {
-                                ml: 1,
-                                fontFamily: "'JetBrains Mono', monospace",
-                                fontSize: "0.65rem",
-                                color: "hsl(var(--muted-foreground))",
-                                letterSpacing: 0.4
-                              },
-                              children: [
-                                lang === "python" ? "singul.py" : "request.sh",
-                                selected ? ` \xB7 ${selected.name}` : ""
-                              ]
-                            }
-                          )
-                        ] }),
-                        /* @__PURE__ */ jsxs7(Box7, { sx: { display: "flex", gap: 0.75 }, children: [
-                          /* @__PURE__ */ jsx9(
-                            Button3,
-                            {
-                              size: "small",
-                              onClick: handleCopy,
-                              sx: {
-                                height: 26,
-                                minWidth: 0,
-                                px: 1.25,
-                                fontSize: "0.65rem",
-                                textTransform: "none",
-                                color: "hsl(var(--muted-foreground))",
-                                backgroundColor: "hsl(var(--card))",
-                                border: "1px solid hsl(var(--border))",
-                                "&:hover": { backgroundColor: "hsl(var(--muted))", color: "hsl(var(--foreground))" }
-                              },
-                              children: "Copy"
+                        /* @__PURE__ */ jsx9(Code2, { size: 14, style: { color: "hsl(var(--muted-foreground))" } }),
+                        /* @__PURE__ */ jsx9(
+                          Typography7,
+                          {
+                            sx: {
+                              fontSize: "0.7rem",
+                              fontWeight: 600,
+                              color: "hsl(var(--muted-foreground))",
+                              textTransform: "uppercase",
+                              letterSpacing: "0.05em"
+                            },
+                            children: "Action"
+                          }
+                        ),
+                        selected && /* @__PURE__ */ jsx9(
+                          Chip4,
+                          {
+                            label: selected.name,
+                            size: "small",
+                            sx: {
+                              height: 18,
+                              fontSize: "0.6rem",
+                              fontWeight: 700,
+                              fontFamily: "'JetBrains Mono', monospace",
+                              bgcolor: "hsla(var(--severity-medium) / 0.15)",
+                              color: "hsl(var(--severity-medium))",
+                              "& .MuiChip-label": { px: 0.75 }
                             }
-                          ),
-                          /* @__PURE__ */ jsx9(
-                            Button3,
-                            {
-                              size: "small",
-                              onClick: handlePlay,
-                              disabled: playLoading,
-                              startIcon: !playLoading && /* @__PURE__ */ jsx9(PlayArrowIcon, { sx: { fontSize: 14 } }),
-                              sx: {
-                                height: 26,
-                                minWidth: 0,
-                                px: 1.5,
-                                fontSize: "0.65rem",
-                                fontWeight: 600,
-                                textTransform: "none",
-                                color: "hsl(var(--primary-foreground))",
-                                backgroundColor: "hsl(var(--primary))",
-                                border: "1px solid hsl(var(--primary))",
-                                boxShadow: "0 0 12px -2px hsl(var(--primary) / 0.6)",
-                                "& .MuiButton-startIcon": { mr: 0.5 },
-                                "&:hover": { backgroundColor: "hsl(var(--primary) / 0.9)", boxShadow: "0 0 16px -2px hsl(var(--primary) / 0.7)" },
-                                "&.Mui-disabled": { color: "hsl(var(--primary-foreground) / 0.7)", backgroundColor: "hsl(var(--primary) / 0.45)", boxShadow: "none", borderColor: "hsl(var(--primary) / 0.45)" }
+                          }
+                        ),
+                        /* @__PURE__ */ jsx9(Box7, { sx: { flex: 1 } }),
+                        /* @__PURE__ */ jsx9(Box7, { sx: { display: "flex", gap: 0.5 }, children: ["curl", "python"].map((m) => /* @__PURE__ */ jsx9(
+                          Chip4,
+                          {
+                            label: m === "curl" ? "cURL" : "Python",
+                            icon: m === "curl" ? /* @__PURE__ */ jsx9(Terminal, { size: 12 }) : /* @__PURE__ */ jsx9(Code2, { size: 12 }),
+                            size: "small",
+                            onClick: () => setLang(m),
+                            sx: {
+                              height: 22,
+                              fontSize: "0.6rem",
+                              fontWeight: 600,
+                              cursor: "pointer",
+                              bgcolor: lang === m ? "hsl(var(--primary) / 0.12)" : "transparent",
+                              color: lang === m ? "hsl(var(--primary))" : "hsl(var(--muted-foreground))",
+                              border: lang === m ? "1px solid hsl(var(--primary) / 0.3)" : "1px solid transparent",
+                              "& .MuiChip-icon": {
+                                color: lang === m ? "hsl(var(--primary))" : "hsl(var(--muted-foreground))"
                               },
-                              children: playLoading ? "Running\u2026" : "Play"
+                              "&:hover": {
+                                bgcolor: lang === m ? "hsl(var(--primary) / 0.15)" : "hsl(var(--muted))"
+                              }
                             }
-                          )
-                        ] })
+                          },
+                          m
+                        )) }),
+                        /* @__PURE__ */ jsx9(Tooltip3, { title: copied ? "Copied!" : "Copy", arrow: true, children: /* @__PURE__ */ jsx9(IconButton3, { size: "small", onClick: handleCopy, sx: { color: "hsl(var(--muted-foreground))" }, children: copied ? /* @__PURE__ */ jsx9(CheckIcon, { sx: { fontSize: 14 } }) : /* @__PURE__ */ jsx9(ContentCopyIcon, { sx: { fontSize: 14 } }) }) }),
+                        /* @__PURE__ */ jsx9(
+                          Button3,
+                          {
+                            size: "small",
+                            onClick: handlePlay,
+                            disabled: playLoading,
+                            startIcon: !playLoading && /* @__PURE__ */ jsx9(PlayArrowIcon, { sx: { fontSize: 14 } }),
+                            sx: {
+                              height: 26,
+                              minWidth: 0,
+                              px: 1.5,
+                              fontSize: "0.65rem",
+                              fontWeight: 600,
+                              textTransform: "none",
+                              color: "hsl(var(--primary-foreground))",
+                              backgroundColor: "hsl(var(--primary))",
+                              border: "1px solid hsl(var(--primary))",
+                              boxShadow: "0 0 12px -2px hsl(var(--primary) / 0.6)",
+                              "& .MuiButton-startIcon": { mr: 0.5 },
+                              "&:hover": { backgroundColor: "hsl(var(--primary) / 0.9)", boxShadow: "0 0 16px -2px hsl(var(--primary) / 0.7)" },
+                              "&.Mui-disabled": { color: "hsl(var(--primary-foreground) / 0.7)", backgroundColor: "hsl(var(--primary) / 0.45)", boxShadow: "none", borderColor: "hsl(var(--primary) / 0.45)" }
+                            },
+                            children: playLoading ? "Running\u2026" : "Play"
+                          }
+                        )
                       ]
                     }
                   ),
@@ -4277,6 +4274,7 @@ function AppDetailDrawer({
   open,
   onClose,
   appName,
+  appId,
   anchor = "right",
   width = 520,
   onRefresh,
@@ -4307,33 +4305,35 @@ function AppDetailDrawer({
     setAppLoading(true);
     setAppInfo(null);
     setIsActivated(null);
-    setResolvedAlgoliaId(null);
+    setResolvedAlgoliaId(appId || null);
     refreshAuth();
     const normalizedName = appName.toLowerCase().replace(/[\s_\-]+/g, "_");
     const searchName = appName.replace(/_/g, " ");
     (async () => {
-      let algoliaId = null;
-      try {
-        const { algoliasearch: algoliasearch2 } = await import("algoliasearch");
-        const client = algoliasearch2("JNSS5CFDZZ", "33e4e3564f4f060e96e0531957bed552");
-        const res = await client.search({
-          requests: [{ indexName: "appsearch", query: searchName, hitsPerPage: 10 }]
-        });
-        const hits = res?.results?.[0]?.hits || [];
-        const match = hits.find(
-          (h) => h.name?.toLowerCase().replace(/[\s_\-]+/g, "_") === normalizedName
-        ) || (hits.length > 0 ? hits[0] : null);
-        if (match) {
-          algoliaId = match.objectID;
-          setResolvedAlgoliaId(algoliaId);
-          setAppInfo({
-            name: match.name || searchName,
-            description: match.description || "",
-            large_image: match.image_url || "",
-            categories: match.categories || []
+      let algoliaId = appId || null;
+      if (!algoliaId) {
+        try {
+          const { algoliasearch: algoliasearch2 } = await import("algoliasearch");
+          const client = algoliasearch2("JNSS5CFDZZ", "33e4e3564f4f060e96e0531957bed552");
+          const res = await client.search({
+            requests: [{ indexName: "appsearch", query: searchName, hitsPerPage: 10 }]
           });
+          const hits = res?.results?.[0]?.hits || [];
+          const match = hits.find(
+            (h) => h.name?.toLowerCase().replace(/[\s_\-]+/g, "_") === normalizedName
+          ) || (hits.length > 0 ? hits[0] : null);
+          if (match) {
+            algoliaId = match.objectID;
+            setResolvedAlgoliaId(algoliaId);
+            setAppInfo({
+              name: match.name || searchName,
+              description: match.description || "",
+              large_image: match.image_url || "",
+              categories: match.categories || []
+            });
+          }
+        } catch {
         }
-      } catch {
       }
       let appsList = null;
       if (API_CONFIG.apiKey) {
@@ -4397,7 +4397,7 @@ function AppDetailDrawer({
       });
       setAppLoading(false);
     })();
-  }, [open, appName]);
+  }, [open, appName, appId]);
   useEffect5(() => {
     if (!open || !appName || !isAuthenticated) {
       setIncidentStats(null);
@@ -4489,22 +4489,22 @@ function AppDetailDrawer({
         });
         if (!res.ok) throw new Error("Deactivate failed");
         setActivatedAppId(null);
-        toast3.success(`${displayName} deactivated`);
+        toast.success(`${displayName} deactivated`);
       } else {
-        const appId = resolvedAlgoliaId;
-        if (!appId) throw new Error("App ID not resolved yet");
-        const activateRes = await fetch(getApiUrl(`/api/v1/apps/${appId}/activate`), {
+        const appId2 = resolvedAlgoliaId;
+        if (!appId2) throw new Error("App ID not resolved yet");
+        const activateRes = await fetch(getApiUrl(`/api/v1/apps/${appId2}/activate`), {
           method: "GET",
           credentials: "include",
           headers: { ...getAuthHeader() }
         });
         if (!activateRes.ok) throw new Error(`Activate failed (${activateRes.status})`);
-        setActivatedAppId(appId);
-        toast3.success(`${displayName} activated`);
+        setActivatedAppId(appId2);
+        toast.success(`${displayName} activated`);
       }
     } catch (err) {
       console.error("[Activate] Error:", err);
-      toast3.error(err?.message || "Activation failed");
+      toast.error(err?.message || "Activation failed");
       setIsActivated(wasActivated);
       setActivatedAppId(prevAppId);
     } finally {
@@ -4546,7 +4546,7 @@ function AppDetailDrawer({
                 /* @__PURE__ */ jsx10(Typography8, { sx: { color: "hsl(var(--muted-foreground))", fontSize: "0.75rem" }, children: "App configuration" })
               ] }),
               /* @__PURE__ */ jsx10(
-                IconButton3,
+                IconButton4,
                 {
                   component: "a",
                   href: `/apps/${encodeURIComponent(appName || "")}`,
@@ -4556,7 +4556,7 @@ function AppDetailDrawer({
                 }
               ),
               /* @__PURE__ */ jsx10(
-                IconButton3,
+                IconButton4,
                 {
                   size: "small",
                   onClick: handleClose,
@@ -4632,8 +4632,8 @@ function AppDetailDrawer({
               isAuthenticated,
               matchingEntries,
               onAuthChange: handleAuthChange,
-              onTestConnection: (appId, authId) => handleTestConnection(appName || appId, authId),
-              onSaveAuth: (appId, creds) => handleSaveAuth(appId, creds, appName || void 0),
+              onTestConnection: (appId2, authId) => handleTestConnection(appName || appId2, authId),
+              onSaveAuth: (appId2, creds) => handleSaveAuth(appId2, creds, appName || void 0),
               onRefreshAuth: refreshAuth
             }
           ),
@@ -4965,6 +4965,10 @@ var ShuffleMCP = React.forwardRef(({
       merged = results;
     } else if (sourceFilter === "private") {
       merged = filteredPrivateApps;
+    } else if (sourceFilter === "authenticated") {
+      const privateNames = new Set(filteredPrivateApps.map((a) => norm2(a.name)));
+      const publicOnly = results.filter((a) => !privateNames.has(norm2(a.name)));
+      merged = [...filteredPrivateApps, ...publicOnly].filter(isAppConfigured);
     } else {
       const privateNames = new Set(filteredPrivateApps.map((a) => norm2(a.name)));
       const publicOnly = results.filter((a) => !privateNames.has(norm2(a.name)));
@@ -4973,7 +4977,7 @@ var ShuffleMCP = React.forwardRef(({
     if (!pinnedApps || pinnedApps.length === 0) return merged;
     const pinnedNames = new Set(pinnedApps.map((a) => norm2(a.name)));
     return [...pinnedApps, ...merged.filter((a) => !pinnedNames.has(norm2(a.name)))];
-  }, [pinnedApps, results, filteredPrivateApps, sourceFilter]);
+  }, [pinnedApps, results, filteredPrivateApps, sourceFilter, isAppConfigured]);
   const getGridColumnsStyle = useMemo4(() => {
     if (layout !== "grid") return {};
     const cols = typeof gridColumns === "number" ? gridColumns : gridColumns.md || 3;
@@ -5024,7 +5028,18 @@ var ShuffleMCP = React.forwardRef(({
           /* @__PURE__ */ jsxs9("div", { className: "singul-app-details", style: customStyles.appDetails, children: [
             /* @__PURE__ */ jsxs9("span", { className: "singul-app-name", style: customStyles.appName, children: [
               app.name.replace(/_/g, " "),
-              app.source === "private" && /* @__PURE__ */ jsx11("span", { className: "singul-private-badge", title: "From your private apps", children: "Private" })
+              app.source === "private" && /* @__PURE__ */ jsx11(
+                Tooltip4,
+                {
+                  title: "Private apps are apps you have activated in your organization, or your own custom apps \u2014 not just from the public Algolia catalog.",
+                  arrow: true,
+                  enterDelay: 100,
+                  enterNextDelay: 100,
+                  placement: "top",
+                  slotProps: { popper: { style: { zIndex: 1e4 } } },
+                  children: /* @__PURE__ */ jsx11("span", { className: "singul-private-badge", children: "Private" })
+                }
+              )
             ] }),
             showDescription && app.description && /* @__PURE__ */ jsx11("span", { className: "singul-app-description", style: customStyles.appDescription, children: app.description }),
             showCategories && app.categories?.[0] && /* @__PURE__ */ jsx11("span", { className: "singul-app-category", style: customStyles.appCategory, children: app.categories[0] })
@@ -5077,21 +5092,33 @@ var ShuffleMCP = React.forwardRef(({
             isLoading && /* @__PURE__ */ jsx11("div", { className: "singul-loading-spinner", style: customStyles.loadingSpinner, children: renderLoadingState ? renderLoadingState() : /* @__PURE__ */ jsx11("div", { className: "singul-spinner", style: customStyles.spinner }) })
           ] }),
           showSourceFilter && privateApps.length > 0 && /* @__PURE__ */ jsx11("div", { className: "singul-source-filter", role: "tablist", "aria-label": "Filter by app source", children: [
-            { key: "all", label: "All", count: results.length + filteredPrivateApps.length },
-            { key: "public", label: "Public", count: results.length },
-            { key: "private", label: "Private", count: filteredPrivateApps.length }
-          ].map((opt) => /* @__PURE__ */ jsxs9(
-            "button",
+            { key: "all", label: "All", count: results.length + filteredPrivateApps.length, title: "All available apps \u2014 both the public catalog and your private apps." },
+            { key: "public", label: "Public", count: results.length, title: "Public apps from the Shuffle catalog (powered by Algolia)." },
+            { key: "private", label: "Private", count: filteredPrivateApps.length, title: "Private apps are apps you have activated in your organization, or your own custom apps \u2014 not just from the public Algolia catalog." },
+            { key: "authenticated", label: "Authenticated", count: [...filteredPrivateApps, ...results].filter((a, i, arr) => arr.findIndex((x) => x.name?.toLowerCase() === a.name?.toLowerCase()) === i).filter(isAppConfigured).length, title: "Apps you have authenticated and that are ready to use." }
+          ].map((opt) => /* @__PURE__ */ jsx11(
+            Tooltip4,
             {
-              type: "button",
-              role: "tab",
-              "aria-selected": sourceFilter === opt.key,
-              className: `singul-source-pill ${sourceFilter === opt.key ? "singul-source-pill-active" : ""}`,
-              onClick: () => setSourceFilter(opt.key),
-              children: [
-                opt.label,
-                /* @__PURE__ */ jsx11("span", { className: "singul-source-count", children: opt.count })
-              ]
+              title: opt.title,
+              arrow: true,
+              enterDelay: 100,
+              enterNextDelay: 100,
+              placement: "top",
+              slotProps: { popper: { style: { zIndex: 1e4 } } },
+              children: /* @__PURE__ */ jsx11("span", { style: { display: "inline-flex" }, children: /* @__PURE__ */ jsxs9(
+                "button",
+                {
+                  type: "button",
+                  role: "tab",
+                  "aria-selected": sourceFilter === opt.key,
+                  className: `singul-source-pill ${sourceFilter === opt.key ? "singul-source-pill-active" : ""}`,
+                  onClick: () => setSourceFilter(opt.key),
+                  children: [
+                    opt.label,
+                    /* @__PURE__ */ jsx11("span", { className: "singul-source-count", children: opt.count })
+                  ]
+                }
+              ) })
             },
             opt.key
           )) }),
@@ -5157,7 +5184,7 @@ var ShuffleMCP_default = ShuffleMCP;
 
 // AppSearchDrawer.tsx
 import { useState as useState9 } from "react";
-import { Box as Box10, Typography as Typography10, IconButton as IconButton4, Drawer as Drawer2, Avatar as Avatar5, Tooltip as Tooltip3 } from "@mui/material";
+import { Box as Box10, Typography as Typography10, IconButton as IconButton5, Drawer as Drawer2, Avatar as Avatar5, Tooltip as Tooltip5 } from "@mui/material";
 import CloseIcon3 from "@mui/icons-material/Close";
 import { motion as motion7, AnimatePresence as AnimatePresence2 } from "framer-motion";
 
@@ -5325,16 +5352,19 @@ function AppSearchDrawer({
   pinnedApps
 }) {
   const [detailAppName, setDetailAppName] = useState9(null);
+  const [detailAppId, setDetailAppId] = useState9(null);
   const handleClose = () => {
     setDetailAppName(null);
+    setDetailAppId(null);
     onClose();
   };
   const handleAppSelected = (detail) => {
+    const algoliaId = detail.app.objectID || null;
     const appInfo = {
       name: detail.app.name,
       icon: detail.app.image_url || "",
       categories: detail.app.categories || [],
-      id: detail.app.objectID || null
+      id: algoliaId
     };
     if (onQuickSelect) {
       onQuickSelect(appInfo);
@@ -5345,6 +5375,7 @@ function AppSearchDrawer({
       return;
     }
     setDetailAppName(detail.app.name);
+    setDetailAppId(algoliaId);
   };
   return /* @__PURE__ */ jsxs11(Fragment6, { children: [
     /* @__PURE__ */ jsxs11(
@@ -5358,6 +5389,10 @@ function AppSearchDrawer({
           "& .MuiDrawer-paper": {
             width,
             maxWidth: "100vw",
+            height: "100vh",
+            display: "flex",
+            flexDirection: "column",
+            overflow: "hidden",
             background: "linear-gradient(180deg, hsl(var(--card)) 0%, hsl(var(--background)) 100%)",
             borderLeft: anchor === "right" ? "1px solid hsl(var(--border))" : "none",
             borderRight: anchor === "left" ? "1px solid hsl(var(--border))" : "none"
@@ -5382,7 +5417,7 @@ function AppSearchDrawer({
                   /* @__PURE__ */ jsx13(Typography10, { sx: { color: "hsl(var(--muted-foreground))", fontSize: "0.75rem" }, children: subtitle })
                 ] }),
                 /* @__PURE__ */ jsx13(
-                  IconButton4,
+                  IconButton5,
                   {
                     size: "small",
                     onClick: handleClose,
@@ -5393,12 +5428,12 @@ function AppSearchDrawer({
               ]
             }
           ),
-          /* @__PURE__ */ jsxs11(Box10, { sx: { flex: 1, overflowY: "auto", p: 3, minHeight: "92vh" }, children: [
+          /* @__PURE__ */ jsxs11(Box10, { sx: { flex: 1, boxSizing: "border-box", overflow: "hidden", p: 3, minHeight: 0, display: "flex", flexDirection: "column" }, children: [
             showPipelinesBanner && /* @__PURE__ */ jsx13(ShufflePipelinesBanner, {}),
             API_CONFIG.apiKey && /* @__PURE__ */ jsx13(Box10, { sx: { mb: 2.5 }, children: /* @__PURE__ */ jsx13(IntegrationStatus, { collapsed: false, showAll: true, hideAddButton: true, priorityCategory }) }),
             connectionPathApps && connectionPathApps.length > 0 && /* @__PURE__ */ jsxs11(Box10, { sx: { mb: 2.5 }, children: [
               /* @__PURE__ */ jsx13(Typography10, { sx: { color: "hsl(var(--muted-foreground))", fontSize: "0.7rem", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.05em", mb: 1 }, children: "In this usecase" }),
-              /* @__PURE__ */ jsx13(Box10, { sx: { display: "flex", gap: 1.5, flexWrap: "wrap" }, children: connectionPathApps.map((app) => /* @__PURE__ */ jsx13(Tooltip3, { title: app.name.replace(/_/g, " "), arrow: true, placement: "bottom", children: /* @__PURE__ */ jsxs11(
+              /* @__PURE__ */ jsx13(Box10, { sx: { display: "flex", gap: 1.5, flexWrap: "wrap" }, children: connectionPathApps.map((app) => /* @__PURE__ */ jsx13(Tooltip5, { title: app.name.replace(/_/g, " "), arrow: true, placement: "bottom", children: /* @__PURE__ */ jsxs11(
                 Box10,
                 {
                   onClick: () => handleAppSelected({ app: { name: app.name, image_url: app.icon, categories: [] } }),
@@ -5437,55 +5472,99 @@ function AppSearchDrawer({
                 }
               ) }, app.name)) })
             ] }),
-            /* @__PURE__ */ jsx13(AnimatePresence2, { mode: "wait", children: /* @__PURE__ */ jsx13(
-              motion7.div,
+            /* @__PURE__ */ jsx13(
+              Box10,
               {
-                initial: { opacity: 0, x: -20 },
-                animate: { opacity: 1, x: 0 },
-                exit: { opacity: 0, x: -20 },
-                transition: { duration: 0.2 },
-                children: /* @__PURE__ */ jsx13(
-                  ShuffleMCP,
-                  {
-                    apiKey: API_CONFIG.apiKey || void 0,
-                    apiBaseUrl: API_CONFIG.baseUrl,
-                    placeholder: initialQuery ? `Search ${initialQuery} integrations...` : "Search integrations...",
-                    layout: "grid",
-                    gridColumns: 2,
-                    inline: true,
-                    initialFilterQuery: initialQuery,
-                    hitsPerPage: 12,
-                    showDescription: false,
-                    showCategories: true,
-                    showCheckbox: false,
-                    multiSelect: false,
-                    preventDefault: true,
-                    onAppSelected: handleAppSelected,
-                    pinnedApps: pinnedApps?.map((p) => ({
-                      name: p.name,
-                      image_url: p.image_url,
-                      categories: p.categories || [],
-                      objectID: p.objectID || `pinned-${p.name}`,
-                      description: "",
-                      creator: "",
-                      app_version: "1.0.0",
-                      time_edited: 0,
-                      generated: false,
-                      invalid: false,
-                      priority: 0,
-                      actions: 0,
-                      tags: [],
-                      accessible_by: [],
-                      action_labels: [],
-                      triggers: [],
-                      verified: true
-                    })),
-                    customStyles: singulStyles
+                sx: {
+                  flex: 1,
+                  minHeight: 0,
+                  overflow: "hidden",
+                  "& .singul-container, & .singul-search-bar-container": {
+                    height: "100%",
+                    minHeight: 0
+                  },
+                  "& .singul-search-bar-container": {
+                    display: "flex",
+                    flexDirection: "column"
+                  },
+                  "& .singul-results-container": {
+                    flex: 1,
+                    minHeight: 0,
+                    maxHeight: "none",
+                    overflowY: "auto"
+                  },
+                  "& .singul-results-grid": {
+                    gridAutoRows: "1fr",
+                    gap: "12px"
+                  },
+                  "& .singul-results-grid .singul-dropdown-item": {
+                    minHeight: 75,
+                    padding: "14px 16px",
+                    alignItems: "center"
+                  },
+                  "& .singul-results-grid .singul-app-info": {
+                    alignItems: "center",
+                    gap: "12px"
+                  },
+                  "& .singul-results-grid .singul-app-icon": {
+                    width: 40,
+                    height: 40,
+                    borderRadius: 8,
+                    padding: 4
                   }
-                )
-              },
-              "search"
-            ) })
+                },
+                children: /* @__PURE__ */ jsx13(AnimatePresence2, { mode: "wait", children: /* @__PURE__ */ jsx13(
+                  motion7.div,
+                  {
+                    initial: { opacity: 0, x: -20 },
+                    animate: { opacity: 1, x: 0 },
+                    exit: { opacity: 0, x: -20 },
+                    transition: { duration: 0.2 },
+                    style: { height: "100%", minHeight: 0 },
+                    children: /* @__PURE__ */ jsx13(
+                      ShuffleMCP,
+                      {
+                        apiKey: API_CONFIG.apiKey || void 0,
+                        apiBaseUrl: API_CONFIG.baseUrl,
+                        placeholder: initialQuery ? `Search ${initialQuery} integrations...` : "Search integrations...",
+                        layout: "grid",
+                        gridColumns: 2,
+                        inline: true,
+                        initialFilterQuery: initialQuery,
+                        hitsPerPage: 12,
+                        showDescription: false,
+                        showCategories: true,
+                        showCheckbox: false,
+                        multiSelect: false,
+                        preventDefault: true,
+                        onAppSelected: handleAppSelected,
+                        pinnedApps: pinnedApps?.map((p) => ({
+                          name: p.name,
+                          image_url: p.image_url,
+                          categories: p.categories || [],
+                          objectID: p.objectID || `pinned-${p.name}`,
+                          description: "",
+                          creator: "",
+                          app_version: "1.0.0",
+                          time_edited: 0,
+                          generated: false,
+                          invalid: false,
+                          priority: 0,
+                          actions: 0,
+                          tags: [],
+                          accessible_by: [],
+                          action_labels: [],
+                          triggers: [],
+                          verified: true
+                        })),
+                        customStyles: singulStyles
+                      }
+                    )
+                  },
+                  "search"
+                ) })
+              }
+            )
           ] })
         ]
       }
@@ -5497,9 +5576,11 @@ function AppSearchDrawer({
         onClose: () => {
           const name = detailAppName;
           setDetailAppName(null);
+          setDetailAppId(null);
           if (name) onDetailClose?.(name);
         },
         appName: detailAppName,
+        appId: detailAppId,
         anchor,
         width,
         onRefresh: onClose,
@@ -5509,22 +5590,1978 @@ function AppSearchDrawer({
   ] });
 }
 
-// useAppLookup.ts
-import { useEffect as useEffect7, useMemo as useMemo5, useState as useState10 } from "react";
-var norm = (s) => s.toLowerCase().replace(/[\s_\-]+/g, "_");
-function useAppLookup(appName) {
-  const [loading, setLoading] = useState10(false);
-  const [info, setInfo] = useState10(null);
-  const [algoliaId, setAlgoliaId] = useState10(null);
-  const {
-    authStates,
-    authenticatedApps,
-    handleAuthChange,
-    handleTestConnection,
-    handleSaveAuth,
-    refreshAuth
-  } = useAppAuth();
-  useEffect7(() => {
+// AgentUI.tsx
+import { useCallback as useCallback8, useEffect as useEffect7, useMemo as useMemo5, useRef as useRef6, useState as useState10 } from "react";
+import { useNavigate } from "react-router-dom";
+import {
+  Avatar as Avatar6,
+  AvatarGroup,
+  Box as Box11,
+  Button as Button5,
+  Chip as Chip7,
+  CircularProgress as CircularProgress4,
+  IconButton as IconButton6,
+  InputBase as InputBase2,
+  TextField as TextField4,
+  Tooltip as Tooltip6,
+  Typography as Typography11
+} from "@mui/material";
+import AddIcon2 from "@mui/icons-material/Add";
+import AttachFileIcon from "@mui/icons-material/AttachFile";
+import CheckCircleIcon3 from "@mui/icons-material/CheckCircle";
+import CheckIcon2 from "@mui/icons-material/Check";
+import ErrorIcon from "@mui/icons-material/Error";
+import HourglassDisabledIcon from "@mui/icons-material/HourglassDisabled";
+import PauseIcon from "@mui/icons-material/Pause";
+import PlayArrowRoundedIcon2 from "@mui/icons-material/PlayArrowRounded";
+import RefreshIcon from "@mui/icons-material/Refresh";
+import RestartAltIcon2 from "@mui/icons-material/RestartAlt";
+import ThumbUpIcon from "@mui/icons-material/ThumbUp";
+import ThumbDownIcon from "@mui/icons-material/ThumbDown";
+import OpenInNewIcon2 from "@mui/icons-material/OpenInNew";
+import SendIcon from "@mui/icons-material/Send";
+import WarningIcon from "@mui/icons-material/Warning";
+import CloseIcon4 from "@mui/icons-material/Close";
+import Markdown from "react-markdown";
+import remarkGfm4 from "remark-gfm";
+import remarkBreaks from "remark-breaks";
+import JsonView from "react18-json-view";
+import "react18-json-view/src/style.css";
+import "react18-json-view/src/dark.css";
+
+// agentRun.ts
+var resolveTarget = (path, opts = {}) => {
+  const url = opts.apiBaseUrl ? `${opts.apiBaseUrl.replace(/\/+$/, "")}${path}` : getApiUrl(path);
+  const headers = opts.apiKey ? { Authorization: `Bearer ${opts.apiKey}` } : { ...getAuthHeader() };
+  if (opts.orgId) headers["Org-Id"] = opts.orgId;
+  return { url, headers };
+};
+var parseDataUrl = (dataUrl) => {
+  const match = /^data:([^;]+);base64,(.*)$/.exec(dataUrl);
+  if (!match) return null;
+  return { mimeType: match[1], data: match[2] };
+};
+var parseAgentResponse = (data) => {
+  if (typeof data === "string") return data;
+  if (data == null) return "No output returned.";
+  const obj = data;
+  if (obj.result !== void 0) {
+    const result = obj.result;
+    if (typeof result === "string") return result || "No output returned.";
+    if (typeof result === "object" && result !== null) {
+      const r = result;
+      const parts = [];
+      if (r.message && typeof r.message === "string") {
+        parts.push(r.message);
+      }
+      const rest = { ...r };
+      delete rest.message;
+      if (Object.keys(rest).length > 0) {
+        parts.push(JSON.stringify(rest, null, 2));
+      }
+      return parts.join("\n\n") || "No output returned.";
+    }
+    return String(result);
+  }
+  if (obj.message && typeof obj.message === "string") return obj.message;
+  return JSON.stringify(data, null, 2);
+};
+var pollExecutionResult = async (executionId, {
+  maxAttempts = 15,
+  intervalMs = 2e3,
+  apiKey,
+  apiBaseUrl,
+  orgId
+} = {}) => {
+  const { url, headers } = resolveTarget("/api/v1/streams/results", { apiKey, apiBaseUrl, orgId });
+  for (let attempt = 0; attempt < maxAttempts; attempt++) {
+    try {
+      const resp = await fetch(url, {
+        method: "POST",
+        credentials: "include",
+        headers: {
+          "Content-Type": "application/json",
+          ...headers
+        },
+        body: JSON.stringify({
+          execution_id: executionId,
+          authorization: executionId
+        })
+      });
+      if (!resp.ok) {
+        if (resp.status >= 400 && resp.status < 500) {
+          return {
+            success: false,
+            content: "",
+            error: `Error ${resp.status}: Could not fetch execution result.`,
+            status: resp.status
+          };
+        }
+        await delay(intervalMs);
+        continue;
+      }
+      const rawText = await resp.text();
+      if (!rawText || rawText === "{}" || rawText === "null") {
+        await delay(intervalMs);
+        continue;
+      }
+      const contentType = resp.headers.get("content-type");
+      if (!contentType?.includes("application/json")) {
+        return { success: true, content: rawText, status: resp.status };
+      }
+      const data = JSON.parse(rawText);
+      if (data?.status === "EXECUTING" || data?.status === "WAITING") {
+        await delay(intervalMs);
+        continue;
+      }
+      const content = parseAgentResponse(data);
+      return {
+        success: true,
+        content,
+        rawData: data,
+        status: resp.status
+      };
+    } catch {
+      await delay(intervalMs);
+    }
+  }
+  return {
+    success: false,
+    content: "",
+    error: `Timed out waiting for execution ${executionId} to complete.`,
+    status: 0
+  };
+};
+var delay = (ms) => new Promise((r) => setTimeout(r, ms));
+var isExecutionStub = (data) => {
+  if (typeof data !== "object" || data === null) return false;
+  const obj = data;
+  return typeof obj.execution_id === "string" && obj.execution_id.length > 0 && // It's a stub if there's no result/message — just metadata
+  obj.result === void 0 && obj.message === void 0;
+};
+var runAgent = async (request) => {
+  const input = { text: request.input };
+  const images = [];
+  if (request.images && request.images.length > 0) {
+    images.push(...request.images);
+  } else if (request.image && request.image.length > 0) {
+    const parsed = parseDataUrl(request.image);
+    if (parsed) images.push(parsed);
+  }
+  if (images.length > 0) {
+    input.images = images.map((img) => ({
+      url: `data:${img.mimeType};base64,${img.data}`,
+      detail: "auto"
+    }));
+  }
+  const params = { input };
+  if (request.toolName) params.tool_name = request.toolName;
+  if (request.toolId) params.tool_id = request.toolId;
+  if (request.toolNames && request.toolNames.length > 0) {
+    params.tool_names = request.toolNames;
+  }
+  if (request.toolIds && request.toolIds.length > 0) {
+    params.tool_ids = request.toolIds;
+  }
+  const payload = {
+    jsonrpc: "2.0",
+    id: crypto.randomUUID(),
+    method: "tools/call",
+    params
+  };
+  const { url: agentUrl, headers: agentHeaders } = resolveTarget("/api/v1/agent", {
+    apiKey: request.apiKey,
+    apiBaseUrl: request.apiBaseUrl,
+    orgId: request.orgId
+  });
+  try {
+    const response = await fetch(agentUrl, {
+      method: "POST",
+      credentials: "include",
+      headers: {
+        "Content-Type": "application/json",
+        ...agentHeaders
+      },
+      body: JSON.stringify(payload)
+    });
+    const rawText = await response.text();
+    const contentType = response.headers.get("content-type");
+    if (!response.ok) {
+      return {
+        success: false,
+        content: "",
+        error: `Error ${response.status}: ${rawText || response.statusText}`,
+        status: response.status
+      };
+    }
+    if (!contentType?.includes("application/json")) {
+      if (rawText.trim().startsWith("<!") || rawText.includes("<html")) {
+        return {
+          success: false,
+          content: "",
+          error: "Received an unexpected HTML response. This may indicate an auth redirect or server issue.",
+          status: response.status
+        };
+      }
+      return {
+        success: true,
+        content: rawText,
+        status: response.status
+      };
+    }
+    const data = JSON.parse(rawText);
+    if (isExecutionStub(data)) {
+      if (request.skipPolling) {
+        return {
+          success: true,
+          content: "",
+          rawData: data,
+          status: response.status
+        };
+      }
+      console.log(`[AgentRun] Got execution stub, polling for result: ${data.execution_id}`);
+      return pollExecutionResult(data.execution_id, {
+        apiKey: request.apiKey,
+        apiBaseUrl: request.apiBaseUrl,
+        orgId: request.orgId
+      });
+    }
+    const content = parseAgentResponse(data);
+    return {
+      success: true,
+      content,
+      rawData: data,
+      status: response.status
+    };
+  } catch (err) {
+    return {
+      success: false,
+      content: "",
+      error: `Network error \u2014 could not reach the agent. ${err instanceof Error ? err.message : ""}`,
+      status: 0
+    };
+  }
+};
+
+// AgentUI.tsx
+import { Fragment as Fragment7, jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
+var normalizeMarkdown = (raw) => {
+  if (raw == null) return "";
+  let s = typeof raw === "string" ? raw : (() => {
+    try {
+      return JSON.stringify(raw, null, 2);
+    } catch {
+      return String(raw);
+    }
+  })();
+  if (s.length > 1 && s.startsWith('"') && s.endsWith('"')) {
+    try {
+      s = JSON.parse(s);
+    } catch {
+    }
+  }
+  s = s.replace(/\\r\\n/g, "\n").replace(/\\n/g, "\n").replace(/\\t/g, "	").replace(/\\"/g, '"');
+  return s.trim();
+};
+var deepParseJsonStrings = (obj, depth = 0) => {
+  if (depth > 5) return obj;
+  if (typeof obj === "string") {
+    const trimmed = obj.trim();
+    if (trimmed.startsWith("{") && trimmed.endsWith("}") || trimmed.startsWith("[") && trimmed.endsWith("]")) {
+      try {
+        const parsed = JSON.parse(trimmed);
+        if (typeof parsed === "object" && parsed !== null) {
+          return deepParseJsonStrings(parsed, depth + 1);
+        }
+      } catch {
+      }
+    }
+    return obj;
+  }
+  if (Array.isArray(obj)) return obj.map((item) => deepParseJsonStrings(item, depth + 1));
+  if (obj && typeof obj === "object") {
+    const result = {};
+    for (const [key, value] of Object.entries(obj)) {
+      result[key] = deepParseJsonStrings(value, depth + 1);
+    }
+    return result;
+  }
+  return obj;
+};
+var validateJson = (raw) => {
+  if (raw == null) return { valid: false, result: null };
+  if (typeof raw === "object") return { valid: true, result: raw };
+  if (typeof raw !== "string") return { valid: false, result: raw };
+  try {
+    return { valid: true, result: JSON.parse(raw) };
+  } catch {
+    return { valid: false, result: raw };
+  }
+};
+var STATUS_COLORS = {
+  finished: "hsl(142, 71%, 45%)",
+  warning: "hsl(38, 92%, 50%)",
+  error: "hsl(0, 72%, 55%)",
+  running: "hsl(var(--primary))"
+};
+var buildToolName = (apps) => {
+  if (!apps.length) return "API";
+  return apps.map((a) => {
+    const slug = a.name.toLowerCase().replace(/\s+/g, "_").replace(/-/g, "_");
+    return a.id ? `app:${a.id}:${slug}` : slug;
+  }).join(",");
+};
+var StatusIcon = ({ status }) => {
+  const s = (status || "").toUpperCase();
+  if (s === "RUNNING" || s === "EXECUTING" || s === "") {
+    return /* @__PURE__ */ jsx14(CircularProgress4, { size: 18, sx: { color: STATUS_COLORS.running } });
+  }
+  if (s === "WAITING") {
+    return /* @__PURE__ */ jsx14(Tooltip6, { title: "Waiting for input", children: /* @__PURE__ */ jsx14(PauseIcon, { sx: { color: STATUS_COLORS.running, fontSize: 20 } }) });
+  }
+  if (s === "FINISHED" || s === "SUCCESS") {
+    return /* @__PURE__ */ jsx14(CheckCircleIcon3, { sx: { color: STATUS_COLORS.finished, fontSize: 20 } });
+  }
+  if (s === "ABORTED" || s === "FAILURE") {
+    return /* @__PURE__ */ jsx14(ErrorIcon, { sx: { color: STATUS_COLORS.error, fontSize: 20 } });
+  }
+  if (s === "IGNORED" || s === "IGNORE") {
+    return /* @__PURE__ */ jsx14(WarningIcon, { sx: { color: STATUS_COLORS.warning, fontSize: 20 } });
+  }
+  return /* @__PURE__ */ jsx14(HourglassDisabledIcon, { sx: { color: "hsl(var(--muted-foreground))", fontSize: 20 } });
+};
+var TimelineRow = ({
+  item,
+  index,
+  open,
+  onToggle,
+  appsById,
+  totalDuration,
+  originalStartTime,
+  maxWidth,
+  questionAnswers,
+  setQuestionAnswers,
+  onSubmitQuestions,
+  onRerunAgent,
+  onRerunDecision,
+  agentRequestLoading,
+  getFormUrl,
+  runFinished
+}) => {
+  const [submitAttempted, setSubmitAttempted] = useState10(false);
+  const validate = validateJson(item.details);
+  const itemStart = item.start_time || 0;
+  const itemEnd = item.end_time || itemStart;
+  const dur = Math.max(0, itemEnd - itemStart);
+  const offset = totalDuration > 0 ? (itemStart - originalStartTime) / totalDuration * maxWidth : 0;
+  const width = totalDuration > 0 ? Math.max(4, dur / totalDuration * maxWidth) : 0;
+  let displayType = item.type;
+  let displayLabel = item.label?.replace(/_/g, " ") || "";
+  const details = item.details;
+  const isProcessing = item.category === "processing";
+  if (isProcessing) {
+    displayType = "processing";
+  } else if (details?.reason) {
+    displayLabel = details.reason;
+  }
+  if (!isProcessing) {
+    if (details?.action === "finish" || item.category === "finish" || details?.action === "finalise") {
+      displayType = "finalise";
+    } else if (item.category === "ask" || details?.action === "ask") {
+      displayType = "question";
+    } else if (details?.action === "add_tool") {
+      displayType = "add tool";
+    }
+  }
+  let toolApp;
+  if (details?.tool && typeof details.tool === "string" && details.tool !== "singul") {
+    let tn = details.tool.toLowerCase().replace(/[\s-]+/g, "_");
+    if (tn.startsWith("app:")) tn = tn.split(":")[2] || tn;
+    toolApp = appsById[tn];
+  }
+  const questions = [];
+  if (item.category === "ask" || details?.action === "ask") {
+    for (const f of details?.fields || []) {
+      if (f.key === "question" && f.value) {
+        questions.push({ question: f.value, index: questions.length + 1 });
+      }
+    }
+  }
+  const questionsAnswered = questions.every(
+    (q) => questionAnswers[q.question]?.value
+  );
+  const effectiveStatus = runFinished && (item.status === "RUNNING" || item.status === "WAITING") ? "IGNORED" : item.status;
+  const barColor = isProcessing ? "hsl(var(--muted-foreground) / 0.45)" : effectiveStatus === "IGNORED" ? STATUS_COLORS.warning : effectiveStatus === "FINISHED" ? STATUS_COLORS.finished : effectiveStatus === "FAILURE" || effectiveStatus === "ABORTED" ? STATUS_COLORS.error : STATUS_COLORS.running;
+  return /* @__PURE__ */ jsxs12(Box11, { sx: {
+    borderTop: index === 0 ? "none" : "1px solid hsl(var(--border))",
+    bgcolor: open ? "hsl(var(--muted) / 0.3)" : "transparent",
+    transition: "background 0.15s ease"
+  }, children: [
+    /* @__PURE__ */ jsxs12(
+      Box11,
+      {
+        onClick: onToggle,
+        sx: {
+          display: "flex",
+          alignItems: "center",
+          gap: 1.5,
+          px: 2,
+          py: 1.25,
+          cursor: "pointer",
+          "&:hover": { bgcolor: "hsl(var(--muted) / 0.4)" }
+        },
+        children: [
+          /* @__PURE__ */ jsx14(Box11, { sx: { width: 24, display: "flex", justifyContent: "center" }, children: isProcessing ? /* @__PURE__ */ jsx14(Box11, { sx: { width: 6, height: 6, borderRadius: "50%", bgcolor: "hsl(var(--muted-foreground) / 0.5)" } }) : /* @__PURE__ */ jsx14(StatusIcon, { status: effectiveStatus }) }),
+          /* @__PURE__ */ jsx14(Box11, { sx: { width: 24, display: "flex", justifyContent: "center" }, children: isProcessing ? /* @__PURE__ */ jsx14(Box11, { sx: { width: 22 } }) : toolApp?.icon ? /* @__PURE__ */ jsx14(Avatar6, { src: toolApp.icon, sx: { width: 22, height: 22, bgcolor: "transparent" }, variant: "rounded" }) : item.category === "finalise" || details?.action === "finish" ? /* @__PURE__ */ jsx14(CheckIcon2, { sx: { color: STATUS_COLORS.finished, fontSize: 18 } }) : /* @__PURE__ */ jsx14(Box11, { sx: { width: 22 } }) }),
+          /* @__PURE__ */ jsx14(
+            Chip7,
+            {
+              label: displayType,
+              size: "small",
+              sx: {
+                height: 22,
+                bgcolor: isProcessing ? "transparent" : "hsl(var(--muted))",
+                color: isProcessing ? "hsl(var(--muted-foreground))" : "hsl(var(--foreground))",
+                border: isProcessing ? "1px dashed hsl(var(--border))" : "none",
+                fontSize: "0.7rem",
+                fontWeight: 500,
+                textTransform: "capitalize",
+                minWidth: 80,
+                fontStyle: isProcessing ? "italic" : "normal"
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx14(Box11, { sx: {
+            flex: 1,
+            minWidth: 0,
+            fontSize: "0.85rem",
+            color: "hsl(var(--foreground))",
+            maxHeight: 60,
+            overflow: "hidden",
+            "& p": { margin: 0 },
+            "& pre, & code": { fontSize: "0.78rem" }
+          }, children: /* @__PURE__ */ jsx14(Markdown, { remarkPlugins: [remarkGfm4, remarkBreaks], children: normalizeMarkdown(displayLabel) }) }),
+          /* @__PURE__ */ jsx14(Tooltip6, { title: `Duration: ${dur.toFixed(1)}s \xB7 ${itemStart ? new Date(itemStart * 1e3).toLocaleString() : ""}`, children: /* @__PURE__ */ jsx14(Box11, { sx: { width: maxWidth, position: "relative", height: 10, flexShrink: 0 }, children: dur > 0 && /* @__PURE__ */ jsx14(Box11, { sx: {
+            position: "absolute",
+            left: Math.max(0, offset),
+            width,
+            height: 8,
+            top: 1,
+            bgcolor: barColor,
+            borderRadius: 1,
+            transition: "all 0.2s ease"
+          } }) }) }),
+          /* @__PURE__ */ jsx14(Box11, { sx: { width: 60, fontSize: "0.7rem", color: "hsl(var(--muted-foreground))", textAlign: "right" }, children: dur > 0 ? `${dur.toFixed(1)}s` : "" }),
+          /* @__PURE__ */ jsxs12(
+            Box11,
+            {
+              sx: { display: "flex", alignItems: "center", gap: 0.25, ml: 1, minWidth: 96, justifyContent: "flex-end" },
+              onClick: (e) => e.stopPropagation(),
+              children: [
+                item.type === "decision" && details?.run_details?.status === "WAITING" && (item.category === "ask" || details?.action === "ask") && questions.length === 0 && /* @__PURE__ */ jsxs12(Fragment7, { children: [
+                  /* @__PURE__ */ jsx14(Tooltip6, { title: "Approve this step", children: /* @__PURE__ */ jsx14("span", { children: /* @__PURE__ */ jsx14(
+                    IconButton6,
+                    {
+                      size: "small",
+                      disabled: agentRequestLoading,
+                      onClick: () => {
+                        if (details?.run_details?.id) onSubmitQuestions(details.run_details.id, { approve: "true" });
+                      },
+                      sx: { color: STATUS_COLORS.finished },
+                      children: /* @__PURE__ */ jsx14(ThumbUpIcon, { sx: { fontSize: 16 } })
+                    }
+                  ) }) }),
+                  /* @__PURE__ */ jsx14(Tooltip6, { title: "Deny this step", children: /* @__PURE__ */ jsx14("span", { children: /* @__PURE__ */ jsx14(
+                    IconButton6,
+                    {
+                      size: "small",
+                      disabled: agentRequestLoading,
+                      onClick: () => {
+                        if (details?.run_details?.id) onSubmitQuestions(details.run_details.id, { approve: "false" });
+                      },
+                      sx: { color: STATUS_COLORS.error },
+                      children: /* @__PURE__ */ jsx14(ThumbDownIcon, { sx: { fontSize: 16 } })
+                    }
+                  ) }) })
+                ] }),
+                item.type === "agent" && /* @__PURE__ */ jsx14(Tooltip6, { title: "Rerun the agent with the same input", children: /* @__PURE__ */ jsx14("span", { children: /* @__PURE__ */ jsx14(
+                  IconButton6,
+                  {
+                    size: "small",
+                    disabled: agentRequestLoading,
+                    onClick: onRerunAgent,
+                    sx: { color: "hsl(var(--muted-foreground))", "&:hover": { color: "hsl(var(--primary))" } },
+                    children: /* @__PURE__ */ jsx14(RestartAltIcon2, { sx: { fontSize: 16 } })
+                  }
+                ) }) }),
+                item.type === "decision" && (() => {
+                  const action = details?.action;
+                  const cat = item.category;
+                  const isApiAction = action !== "ask" && cat !== "ask" && action !== "finish" && action !== "finalise" && cat !== "finish" && cat !== "finalise" && cat !== "processing" && action !== "add_tool";
+                  if (!isApiAction) return null;
+                  return /* @__PURE__ */ jsx14(Tooltip6, { title: "Rerun from this decision (clears all decisions after it)", children: /* @__PURE__ */ jsx14("span", { children: /* @__PURE__ */ jsx14(
+                    IconButton6,
+                    {
+                      size: "small",
+                      disabled: agentRequestLoading || !details?.run_details?.id,
+                      onClick: () => details && onRerunDecision(details),
+                      sx: { color: "hsl(var(--muted-foreground))", "&:hover": { color: "hsl(var(--primary))" } },
+                      children: /* @__PURE__ */ jsx14(RestartAltIcon2, { sx: { fontSize: 16 } })
+                    }
+                  ) }) });
+                })(),
+                item.type === "decision" && details?.run_details?.debug_url && /* @__PURE__ */ jsx14(Tooltip6, { title: "Open debug URL", children: /* @__PURE__ */ jsx14("span", { children: /* @__PURE__ */ jsx14(
+                  IconButton6,
+                  {
+                    size: "small",
+                    onClick: () => window.open(details.run_details.debug_url, "_blank", "noopener,noreferrer"),
+                    sx: { color: "hsl(var(--muted-foreground))", "&:hover": { color: "hsl(var(--primary))" } },
+                    children: /* @__PURE__ */ jsx14(OpenInNewIcon2, { sx: { fontSize: 16 } })
+                  }
+                ) }) })
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    questions.length > 0 && !runFinished && (item.status === "RUNNING" || item.status === "WAITING") && /* @__PURE__ */ jsx14(Box11, { sx: { px: 4, pb: 2 }, children: (() => {
+      const trySubmit = () => {
+        if (agentRequestLoading) return;
+        if (!questionsAnswered) {
+          setSubmitAttempted(true);
+          return;
+        }
+        if (details?.run_details?.id) {
+          onSubmitQuestions(details.run_details.id, questionAnswers);
+        }
+      };
+      return /* @__PURE__ */ jsxs12(Fragment7, { children: [
+        questions.map((q, qi) => {
+          const value = questionAnswers[q.question]?.value || "";
+          const isMissing = submitAttempted && !value;
+          return /* @__PURE__ */ jsxs12(Box11, { sx: { mt: 2 }, children: [
+            /* @__PURE__ */ jsx14(Box11, { sx: { fontSize: "0.85rem", color: "hsl(var(--foreground))", mb: 1 }, children: /* @__PURE__ */ jsx14(Markdown, { remarkPlugins: [remarkGfm4, remarkBreaks], children: normalizeMarkdown(q.question) }) }),
+            /* @__PURE__ */ jsx14(
+              TextField4,
+              {
+                fullWidth: true,
+                multiline: true,
+                minRows: 2,
+                placeholder: "Your answer here\u2026",
+                value,
+                error: isMissing,
+                helperText: isMissing ? "Please answer this question" : void 0,
+                onChange: (e) => {
+                  const v = e.target.value;
+                  setQuestionAnswers((prev) => ({
+                    ...prev,
+                    [q.question]: { index: qi, value: v }
+                  }));
+                },
+                onKeyDown: (e) => {
+                  if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
+                    e.preventDefault();
+                    trySubmit();
+                  }
+                },
+                size: "small",
+                sx: {
+                  "& .MuiOutlinedInput-root": { bgcolor: "hsl(var(--card))" }
+                }
+              }
+            )
+          ] }, qi);
+        }),
+        /* @__PURE__ */ jsxs12(Box11, { sx: { display: "flex", alignItems: "center", gap: 1, mt: 2 }, children: [
+          /* @__PURE__ */ jsx14(
+            Button5,
+            {
+              variant: "contained",
+              size: "small",
+              disabled: agentRequestLoading,
+              onClick: trySubmit,
+              children: agentRequestLoading ? /* @__PURE__ */ jsx14(CircularProgress4, { size: 16 }) : "Submit"
+            }
+          ),
+          details?.run_details?.id && getFormUrl && getFormUrl(details.run_details.id) && /* @__PURE__ */ jsx14(Tooltip6, { title: "Answer in the Form UI", placement: "right", children: /* @__PURE__ */ jsx14(
+            IconButton6,
+            {
+              size: "small",
+              onClick: () => {
+                const url = getFormUrl(details.run_details.id);
+                if (url) window.open(url, "_blank", "noopener,noreferrer");
+              },
+              sx: { color: "hsl(var(--muted-foreground))", "&:hover": { color: "hsl(var(--primary))" } },
+              children: /* @__PURE__ */ jsx14(OpenInNewIcon2, { sx: { fontSize: 18 } })
+            }
+          ) })
+        ] })
+      ] });
+    })() }),
+    open && runFinished && questions.length > 0 && /* @__PURE__ */ jsxs12(Box11, { sx: { px: 4, pb: 2 }, children: [
+      /* @__PURE__ */ jsx14(Typography11, { sx: { fontSize: "0.7rem", textTransform: "uppercase", letterSpacing: 0.5, color: "hsl(var(--muted-foreground))", mb: 1 }, children: questions.length === 1 ? "Question (unanswered)" : "Questions (unanswered)" }),
+      /* @__PURE__ */ jsx14(Box11, { sx: {
+        p: 2,
+        borderRadius: 1.5,
+        border: "1px solid hsl(var(--border))",
+        bgcolor: "hsl(var(--background))",
+        display: "flex",
+        flexDirection: "column",
+        gap: 1.5
+      }, children: questions.map((q, qi) => /* @__PURE__ */ jsx14(Box11, { sx: { fontSize: "0.85rem", color: "hsl(var(--foreground))", "& p": { my: 0.5 } }, children: /* @__PURE__ */ jsx14(Markdown, { remarkPlugins: [remarkGfm4, remarkBreaks], children: normalizeMarkdown(q.question) }) }, qi)) })
+    ] }),
+    open && /* @__PURE__ */ jsx14(Box11, { sx: { px: 4, pb: 2 }, children: /* @__PURE__ */ jsx14(
+      Box11,
+      {
+        sx: {
+          p: 2,
+          borderRadius: 1.5,
+          border: "1px solid hsl(var(--border))",
+          bgcolor: "hsl(var(--background))",
+          overflow: "auto",
+          maxHeight: 400,
+          fontFamily: '"JetBrains Mono", ui-monospace, monospace',
+          "& .json-view": {
+            fontSize: "0.72rem !important",
+            fontFamily: "inherit !important",
+            bgcolor: "transparent !important"
+          }
+        },
+        children: validate.valid && validate.result && typeof validate.result === "object" ? /* @__PURE__ */ jsx14(
+          JsonView,
+          {
+            src: deepParseJsonStrings(validate.result),
+            dark: true,
+            collapsed: 2,
+            collapseStringMode: "word",
+            collapseStringsAfterLength: 120,
+            enableClipboard: true,
+            displaySize: true
+          }
+        ) : /* @__PURE__ */ jsx14(Box11, { component: "pre", sx: { m: 0, fontSize: "0.72rem", color: "hsl(var(--foreground))" }, children: /* @__PURE__ */ jsx14("code", { children: String(item.details ?? "") }) })
+      }
+    ) })
+  ] });
+};
+var AgentUI = ({
+  apps,
+  defaultApps,
+  autoLoadApps = true,
+  title = "What do you want to do?",
+  subtitle,
+  placeholder = 'Describe a task, e.g. "Get my emails for today and summarise them"',
+  defaultInput = "",
+  autoSubmit = false,
+  hideHeroIcon = false,
+  heroIcon,
+  heroIconSize = 84,
+  maxWidth = 900,
+  compact = false,
+  hideAppPicker = false,
+  hideAttach = false,
+  appPickerLabel = "Select Apps / MCPs",
+  appPickerTitle = "Select Apps / MCPs",
+  appPickerSubtitle = "Pick the tools the agent is allowed to use for this run",
+  submitTooltip = "\u2318+Enter to send",
+  submitIcon,
+  continuationPlaceholder = "Add more details to continue this task\u2026",
+  readUrlParams = true,
+  executionId,
+  authorization,
+  onRun,
+  apiKey,
+  apiBaseUrl,
+  orgId
+}) => {
+  const resolveUrl = useCallback8(
+    (path) => apiBaseUrl ? `${apiBaseUrl.replace(/\/+$/, "")}${path}` : getApiUrl(path),
+    [apiBaseUrl]
+  );
+  const resolveHeaders = useCallback8(() => {
+    const h = apiKey ? { Authorization: `Bearer ${apiKey}` } : { ...getAuthHeader() };
+    if (orgId) h["Org-Id"] = orgId;
+    return h;
+  }, [apiKey, orgId]);
+  const hasApiKey = !!apiKey || !!API_CONFIG.apiKey;
+  const navigate = useNavigate();
+  const [actionInput, setActionInput] = useState10(defaultInput);
+  const BUILTIN_DEFAULT_APPS = [
+    { name: "http" },
+    { name: "shuffle_tools" }
+  ];
+  const [chosenApps, setChosenApps] = useState10(apps ?? defaultApps ?? BUILTIN_DEFAULT_APPS);
+  const [availableApps, setAvailableApps] = useState10([]);
+  const [appSearchOpen, setAppSearchOpen] = useState10(false);
+  const [agentRequestLoading, setAgentRequestLoading] = useState10(false);
+  const [execution, setExecution] = useState10(null);
+  const [agentData, setAgentData] = useState10({});
+  const [agentActionResult, setAgentActionResult] = useState10(null);
+  const [showStarter, setShowStarter] = useState10(true);
+  const [openIndexes, setOpenIndexes] = useState10(/* @__PURE__ */ new Set());
+  const [questionAnswers, setQuestionAnswers] = useState10({});
+  const [simpleSubmitAttempted, setSimpleSubmitAttempted] = useState10(false);
+  const [continuationText, setContinuationText] = useState10("");
+  const [error, setError] = useState10(null);
+  const [viewMode, setViewMode] = useState10("simple");
+  const [attachedImages, setAttachedImages] = useState10([]);
+  const [nowTick, setNowTick] = useState10(() => Math.floor(Date.now() / 1e3));
+  const [localRunStart, setLocalRunStart] = useState10(null);
+  const inputRef = useRef6(null);
+  const fileInputRef = useRef6(null);
+  const activeExecutionIdRef = useRef6(null);
+  const stateRef = useRef6({
+    execution: null,
+    agentData: {},
+    agentActionResult: null,
+    openIndexes: /* @__PURE__ */ new Set(),
+    questionAnswers: {},
+    continuationText: "",
+    localRunStart: null,
+    showStarter: true
+  });
+  stateRef.current.execution = execution;
+  stateRef.current.agentData = agentData;
+  stateRef.current.agentActionResult = agentActionResult;
+  stateRef.current.openIndexes = openIndexes;
+  stateRef.current.questionAnswers = questionAnswers;
+  stateRef.current.continuationText = continuationText;
+  stateRef.current.localRunStart = localRunStart;
+  stateRef.current.showStarter = showStarter;
+  useEffect7(() => {
+    if (execution?.execution_id) {
+      setLocalRunStart((prev) => prev ?? Math.floor(Date.now() / 1e3));
+    } else if (!agentRequestLoading) {
+      setLocalRunStart(null);
+    }
+  }, [execution?.execution_id, agentRequestLoading]);
+  useEffect7(() => {
+    const status = (execution?.status || agentData?.status || "").toUpperCase();
+    const TERMINAL = ["FINISHED", "FAILURE", "ABORTED", "CANCELLED", "CANCELED"];
+    if (TERMINAL.includes(status)) return;
+    if (!execution?.execution_id && !agentRequestLoading && !localRunStart) return;
+    const id = setInterval(() => setNowTick(Math.floor(Date.now() / 1e3)), 1e3);
+    return () => clearInterval(id);
+  }, [execution?.execution_id, execution?.status, agentData?.status, agentRequestLoading, localRunStart]);
+  const readImageAsDataUrl = (file) => new Promise((resolve) => {
+    if (!file.type.startsWith("image/")) {
+      resolve(null);
+      return;
+    }
+    const reader = new FileReader();
+    reader.onload = () => {
+      const result = reader.result;
+      resolve(typeof result === "string" ? { dataUrl: result, name: file.name || "Pasted image" } : null);
+    };
+    reader.onerror = () => resolve(null);
+    reader.readAsDataURL(file);
+  });
+  const handleImagesSelected = async (files) => {
+    if (!files) return;
+    const arr = Array.from(files);
+    const nonImages = arr.some((f) => !f.type.startsWith("image/"));
+    if (nonImages) setError("Only image files can be attached.");
+    const results = await Promise.all(arr.map(readImageAsDataUrl));
+    const valid = results.filter((r) => r !== null);
+    if (valid.length > 0) {
+      setAttachedImages((prev) => [...prev, ...valid]);
+      setError(null);
+    }
+  };
+  const appsById = useMemo5(() => {
+    const m = {};
+    for (const a of chosenApps) {
+      const slug = a.name.toLowerCase().replace(/\s+/g, "_").replace(/-/g, "_");
+      m[slug] = a;
+    }
+    return m;
+  }, [chosenApps]);
+  useEffect7(() => {
+    if (apps) setChosenApps(apps);
+  }, [apps]);
+  useEffect7(() => {
+    const missing = chosenApps.filter((a) => !a.icon && a.name);
+    if (missing.length === 0) return;
+    let cancelled = false;
+    const norm2 = (n) => n.toLowerCase().replace(/[\s_\-]+/g, "_");
+    (async () => {
+      const resolved = {};
+      try {
+        const { algoliasearch: algoliasearch2 } = await import("algoliasearch");
+        const client = algoliasearch2("JNSS5CFDZZ", "33e4e3564f4f060e96e0531957bed552");
+        await Promise.all(missing.map(async (a) => {
+          const known = availableApps.find((x) => norm2(x.name) === norm2(a.name));
+          if (known?.icon) {
+            resolved[a.name] = known.icon;
+            return;
+          }
+          try {
+            const res = await client.searchSingleIndex({
+              indexName: "appsearch",
+              searchParams: { query: a.name.replace(/_/g, " "), hitsPerPage: 3 }
+            });
+            const match = res.hits.find((h) => norm2(h.name || "") === norm2(a.name)) || res.hits[0];
+            if (match?.image_url) resolved[a.name] = match.image_url;
+          } catch {
+          }
+        }));
+      } catch {
+      }
+      const stillMissing = missing.filter((a) => !resolved[a.name]);
+      if (stillMissing.length > 0) {
+        try {
+          const res = await fetch(resolveUrl("/api/v1/apps"), {
+            credentials: "include",
+            headers: { ...resolveHeaders() }
+          });
+          if (res.ok) {
+            const apps2 = await res.json();
+            if (Array.isArray(apps2)) {
+              for (const a of stillMissing) {
+                const m = apps2.find((x) => norm2(x.name || "") === norm2(a.name));
+                const img = m?.large_image || m?.image_url || m?.image;
+                if (img) resolved[a.name] = img;
+              }
+            }
+          }
+        } catch {
+        }
+      }
+      if (cancelled) return;
+      setChosenApps((prev) => prev.map((a) => {
+        if (a.icon) return a;
+        const icon = resolved[a.name];
+        return icon ? { ...a, icon } : a;
+      }));
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [chosenApps, availableApps, resolveUrl, resolveHeaders]);
+  useEffect7(() => {
+    if (!autoLoadApps) return;
+    if (apps || defaultApps) return;
+    if (!hasApiKey) return;
+    let cancelled = false;
+    (async () => {
+      try {
+        const resp = await fetch(resolveUrl("/api/v1/apps/authentication"), {
+          credentials: "include",
+          headers: { ...resolveHeaders() }
+        });
+        if (!resp.ok) return;
+        const result = await resp.json();
+        const list = Array.isArray(result) ? result : result?.data || [];
+        const seen = /* @__PURE__ */ new Set();
+        const loaded = [];
+        for (const entry of list) {
+          const app = entry?.app || entry;
+          const name = app?.name;
+          if (!name) continue;
+          const valid = entry?.active || entry?.validation?.valid || entry?.hasValidAuth;
+          if (valid === false) continue;
+          const key = name.toLowerCase();
+          if (seen.has(key)) continue;
+          seen.add(key);
+          loaded.push({
+            name,
+            id: app?.id || entry?.id,
+            icon: app?.large_image || app?.image_url || app?.image || entry?.bestImage || ""
+          });
+        }
+        if (!cancelled && loaded.length) setAvailableApps(loaded);
+      } catch {
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [autoLoadApps, apps, defaultApps, hasApiKey, resolveUrl, resolveHeaders]);
+  const getExecution = useCallback8(async (executionId2, authorization2) => {
+    if (!executionId2 || !authorization2) return;
+    try {
+      const resp = await fetch(resolveUrl("/api/v1/streams/results"), {
+        method: "POST",
+        credentials: "include",
+        headers: { "Content-Type": "application/json", ...resolveHeaders() },
+        body: JSON.stringify({ execution_id: executionId2, authorization: authorization2 })
+      });
+      if (activeExecutionIdRef.current && activeExecutionIdRef.current !== executionId2) return;
+      if (!resp.ok) {
+        setError(`Could not fetch execution (${resp.status}).`);
+        return;
+      }
+      const json = await resp.json();
+      if (activeExecutionIdRef.current && activeExecutionIdRef.current !== executionId2) return;
+      if (json?.success === false) {
+        setError(json.reason || "Failed to load agent data.");
+        return;
+      }
+      setExecution({ ...json, execution_id: executionId2, authorization: authorization2 });
+      let actionResult = null;
+      if (Array.isArray(json?.results)) {
+        actionResult = json.results.find((r) => r?.action?.app_name === "AI Agent") || json.results[0];
+      } else {
+        actionResult = json;
+      }
+      setAgentActionResult(actionResult);
+      const v = validateJson(actionResult?.result);
+      if (v.valid) setAgentData({ ...v.result, started_at: json.started_at, completed_at: json.completed_at, status: json.status });
+      setError(null);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Network error.");
+    }
+  }, []);
+  useEffect7(() => {
+    let eid = null;
+    let auth = null;
+    if (executionId && authorization) {
+      eid = executionId;
+      auth = authorization;
+    } else if (readUrlParams) {
+      const params = new URLSearchParams(window.location.search);
+      eid = params.get("execution_id");
+      auth = params.get("authorization");
+    }
+    if (eid && auth) {
+      setShowStarter(false);
+      activeExecutionIdRef.current = eid;
+      setExecution({ execution_id: eid, authorization: auth, status: "EXECUTING" });
+      getExecution(eid, auth);
+    }
+  }, [readUrlParams, executionId, authorization, getExecution]);
+  useEffect7(() => {
+    if (!execution?.execution_id || !execution?.authorization) return;
+    const status = (execution.status || "").toUpperCase();
+    const TERMINAL = ["FINISHED", "FAILURE", "ABORTED", "CANCELLED", "CANCELED"];
+    if (TERMINAL.includes(status)) return;
+    const id = setInterval(() => {
+      getExecution(execution.execution_id, execution.authorization);
+    }, 3e3);
+    return () => clearInterval(id);
+  }, [execution?.execution_id, execution?.authorization, execution?.status, getExecution]);
+  const submitInput = useCallback8(async (text) => {
+    if (!text.trim()) return;
+    setError(null);
+    setAgentRequestLoading(true);
+    const prevExecution = stateRef.current.execution;
+    const prevAgentData = stateRef.current.agentData;
+    const prevAgentActionResult = stateRef.current.agentActionResult;
+    const prevOpenIndexes = stateRef.current.openIndexes;
+    const prevQuestionAnswers = stateRef.current.questionAnswers;
+    const prevContinuationText = stateRef.current.continuationText;
+    const prevLocalRunStart = stateRef.current.localRunStart;
+    const prevActiveExecutionId = activeExecutionIdRef.current;
+    const prevShowStarter = stateRef.current.showStarter;
+    const result = await runAgent({
+      input: text.trim(),
+      skipPolling: true,
+      ...apiKey ? { apiKey } : {},
+      ...apiBaseUrl ? { apiBaseUrl } : {},
+      ...orgId ? { orgId } : {},
+      // Send a single comma-separated `tool_name` in the format
+      // `app:<objectID>:<slug>,app:<objectID>:<slug>` so the backend resolves
+      // the exact app versions instead of guessing by slug.
+      ...chosenApps.length > 0 ? { toolName: buildToolName(chosenApps) } : {},
+      ...attachedImages.length > 0 ? { images: attachedImages.map((img) => {
+        const m = /^data:([^;]+);base64,(.*)$/.exec(img.dataUrl);
+        return m ? { mimeType: m[1], data: m[2], name: img.name } : { mimeType: "image/png", data: img.dataUrl, name: img.name };
+      }) } : {}
+    });
+    setAgentRequestLoading(false);
+    if (!result.success) {
+      setError(result.error || "Agent run failed.");
+      activeExecutionIdRef.current = prevActiveExecutionId;
+      setExecution(prevExecution);
+      setAgentData(prevAgentData);
+      setAgentActionResult(prevAgentActionResult);
+      setOpenIndexes(prevOpenIndexes);
+      setQuestionAnswers(prevQuestionAnswers);
+      setContinuationText(prevContinuationText);
+      setLocalRunStart(prevLocalRunStart);
+      setShowStarter(prevShowStarter);
+      onRun?.({ input: text, success: false, error: result.error });
+      return;
+    }
+    const browserStart = Math.floor(Date.now() / 1e3);
+    setShowStarter(false);
+    activeExecutionIdRef.current = null;
+    setExecution(null);
+    setAgentActionResult(null);
+    setOpenIndexes(/* @__PURE__ */ new Set());
+    setQuestionAnswers({});
+    setContinuationText("");
+    setNowTick(browserStart);
+    setLocalRunStart(browserStart);
+    setAgentData({ original_input: text.trim() });
+    if (readUrlParams && typeof window !== "undefined") {
+      try {
+        const url = new URL(window.location.href);
+        url.searchParams.delete("execution_id");
+        url.searchParams.delete("authorization");
+        window.history.replaceState({}, "", url.toString());
+      } catch {
+      }
+    }
+    const raw = result.rawData;
+    const eid = raw?.execution_id;
+    const auth = raw?.authorization;
+    if (eid && auth) {
+      activeExecutionIdRef.current = eid;
+      setExecution({ execution_id: eid, authorization: auth, status: "EXECUTING" });
+      if (readUrlParams && typeof window !== "undefined") {
+        try {
+          const url = new URL(window.location.href);
+          url.searchParams.set("execution_id", eid);
+          url.searchParams.set("authorization", auth);
+          window.history.replaceState({}, "", url.toString());
+        } catch {
+        }
+      }
+      getExecution(eid, auth);
+      onRun?.({ input: text, success: true, executionId: eid });
+    } else {
+      setExecution({
+        execution_id: eid || crypto.randomUUID(),
+        authorization: auth,
+        status: "FINISHED",
+        results: [{ action: { app_name: "AI Agent" }, result: raw }]
+      });
+      const v = validateJson(raw);
+      if (v.valid) {
+        setAgentData({ ...v.result, status: "FINISHED", original_input: text });
+      } else {
+        setAgentData({ original_input: text, status: "FINISHED", message: result.content });
+      }
+      onRun?.({ input: text, success: true, executionId: eid });
+    }
+  }, [chosenApps, getExecution, onRun, attachedImages, readUrlParams]);
+  const autoSubmittedRef = useRef6(false);
+  useEffect7(() => {
+    if (autoSubmit && defaultInput && !autoSubmittedRef.current && !executionId) {
+      autoSubmittedRef.current = true;
+      submitInput(defaultInput);
+    }
+  }, [autoSubmit, defaultInput, executionId, submitInput]);
+  const submitQuestions = useCallback8(async (decisionId, answers, isContinuation) => {
+    if (!execution?.execution_id || !execution?.authorization) return;
+    let newArgument = {};
+    if (isContinuation) {
+      newArgument = { ...answers };
+    } else {
+      for (const k in answers) {
+        if (k === "approve") {
+          newArgument[k] = answers[k];
+          break;
+        }
+        const a = answers[k];
+        newArgument[`question_${a.index}`] = a.value;
+      }
+    }
+    setAgentRequestLoading(true);
+    const wfId = execution.workflow?.id || execution.execution_id;
+    const params = new URLSearchParams({
+      reference_execution: execution.execution_id,
+      authorization: execution.authorization,
+      answer: "true",
+      note: JSON.stringify(newArgument),
+      agentic: "true",
+      decision_id: decisionId
+    });
+    try {
+      const resp = await fetch(resolveUrl(`/api/v1/workflows/${wfId}/run?${params.toString()}`), {
+        method: "GET",
+        credentials: "include",
+        headers: { ...resolveHeaders() }
+      });
+      const json = await resp.json();
+      if (json.success === false) {
+        toast({ title: "Failed to submit", description: json.reason || "Try again later.", variant: "destructive" });
+      } else {
+        toast({ title: "Submitted", description: "Agent will continue shortly." });
+        setQuestionAnswers({});
+        setContinuationText("");
+        setTimeout(() => {
+          getExecution(execution.execution_id, execution.authorization);
+        }, 600);
+      }
+    } catch (err) {
+      toast({ title: "Network error", description: String(err), variant: "destructive" });
+    } finally {
+      setAgentRequestLoading(false);
+    }
+  }, [execution, getExecution]);
+  const rerunAgent = useCallback8(() => {
+    const input = agentData?.original_input || actionInput || (() => {
+      const msgs = agentData?.input?.messages || [];
+      const m = msgs.find((m2) => m2?.role === "user" && !String(m2?.role).includes("USER CONTEXT"));
+      return m?.content || "";
+    })();
+    if (!input) {
+      toast({ title: "Nothing to rerun", description: "No original input found for this execution.", variant: "destructive" });
+      return;
+    }
+    setActionInput(input);
+    submitInput(input);
+  }, [agentData, actionInput, submitInput]);
+  const getFormUrl = useCallback8((decisionId) => {
+    const wfId = execution?.workflow?.id;
+    const auth = execution?.authorization;
+    const execId = execution?.execution_id;
+    const sourceNode = agentActionResult?.action?.id;
+    if (!wfId || !auth || !execId || !sourceNode || !decisionId) return null;
+    const backend = apiBaseUrl || (typeof window !== "undefined" ? window.location.origin : "");
+    const params = new URLSearchParams({
+      authorization: auth,
+      reference_execution: execId,
+      source_node: sourceNode,
+      decision_id: decisionId,
+      ...backend ? { backend_url: backend } : {}
+    });
+    return `/forms/${wfId}?${params.toString()}`;
+  }, [execution, agentActionResult, apiBaseUrl]);
+  const rerunDecision = useCallback8(async (decision) => {
+    if (!execution?.execution_id) {
+      toast({ title: "No execution loaded", description: "Cannot rerun this decision.", variant: "destructive" });
+      return;
+    }
+    if (!agentActionResult?.action) {
+      toast({ title: "Missing action context", description: "Could not locate the agent action node.", variant: "destructive" });
+      return;
+    }
+    const decisionId = decision?.run_details?.id;
+    if (!decisionId) {
+      toast({ title: "Missing decision id", description: "This decision cannot be rerun.", variant: "destructive" });
+      return;
+    }
+    const body = { ...agentActionResult.action };
+    body.source_execution = execution.execution_id;
+    body.source_workflow = execution.workflow?.id;
+    setAgentRequestLoading(true);
+    try {
+      const resp = await fetch(resolveUrl(`/api/v1/apps/agent/run?rerun=true&decision_id=${encodeURIComponent(decisionId)}`), {
+        method: "POST",
+        credentials: "include",
+        headers: { "Content-Type": "application/json", ...resolveHeaders() },
+        body: JSON.stringify(body)
+      });
+      const json = await resp.json().catch(() => ({}));
+      if (json?.success === false) {
+        toast({ title: "Rerun failed", description: json.reason || "Try again later.", variant: "destructive" });
+      } else {
+        toast({ title: "Rerunning decision", description: "The agent will continue from this step." });
+        setTimeout(() => getExecution(execution.execution_id, execution.authorization), 800);
+        setTimeout(() => getExecution(execution.execution_id, execution.authorization), 5e3);
+      }
+    } catch (err) {
+      toast({ title: "Network error", description: String(err), variant: "destructive" });
+    } finally {
+      setAgentRequestLoading(false);
+    }
+  }, [execution, agentActionResult, getExecution]);
+  const { timeline, originalStartTime, totalDuration, finishDecisionId, finishAnswer } = useMemo5(() => {
+    const toSec = (t) => {
+      const n = Number(t) || 0;
+      return n > 1e12 ? Math.floor(n / 1e3) : n;
+    };
+    const overallStatus = (execution?.status || agentData?.status || "").toUpperCase();
+    const runIsFinished = ["FINISHED", "FAILURE", "ABORTED", "CANCELLED", "CANCELED"].includes(overallStatus);
+    const runEndSec = toSec(agentData?.completed_at || execution?.completed_at);
+    let fallbackEnd = Math.floor(Date.now() / 1e3);
+    if (runIsFinished) {
+      let maxKnown = runEndSec || 0;
+      for (const dec of agentData?.decisions || []) {
+        const rd = dec.run_details || {};
+        maxKnown = Math.max(maxKnown, toSec(rd.completed_at), toSec(rd.started_at));
+      }
+      fallbackEnd = maxKnown || fallbackEnd;
+    }
+    const items = [
+      {
+        label: "AI Agent",
+        type: "agent",
+        category: "agent",
+        details: agentData,
+        status: execution?.status || agentData?.status,
+        start_time: toSec(agentData?.started_at || execution?.started_at),
+        end_time: toSec(agentData?.completed_at || execution?.completed_at)
+      }
+    ];
+    let finishId = "";
+    let finishAns = "";
+    for (const dec of agentData?.decisions || []) {
+      const rd = dec.run_details || {};
+      items.push({
+        label: dec.action,
+        type: "decision",
+        category: dec.category,
+        status: rd.status,
+        start_time: toSec(rd.started_at) || 0,
+        end_time: toSec(rd.completed_at) || fallbackEnd,
+        details: dec
+      });
+      if (dec.action === "finish" || dec.category === "finish" || dec.details?.action === "finalise" || dec.action === "finalise") {
+        finishId = rd.id || "";
+        finishAns = dec.reason || "";
+        if (Array.isArray(dec.fields) && dec.fields.length > 0) {
+          finishAns = dec.fields[0]?.value || finishAns;
+        }
+      }
+    }
+    items.sort((a, b) => (a.start_time || 0) - (b.start_time || 0));
+    const decisionItems = items.filter((it) => it.type === "decision");
+    const runStart = items.find((it) => it.type === "agent")?.start_time || 0;
+    const processingRows = [];
+    let prevEnd = runStart;
+    for (const dec of decisionItems) {
+      const decStart = dec.start_time || 0;
+      const gap = decStart - prevEnd;
+      if (prevEnd > 0 && decStart > 0 && gap >= 0.5) {
+        processingRows.push({
+          label: "Thinking",
+          type: "decision",
+          category: "processing",
+          status: "FINISHED",
+          start_time: prevEnd,
+          end_time: decStart,
+          details: void 0
+        });
+      }
+      prevEnd = dec.end_time || decStart;
+    }
+    items.push(...processingRows);
+    items.sort((a, b) => (a.start_time || 0) - (b.start_time || 0));
+    const start = items.reduce((acc, it) => Math.min(acc, it.start_time || acc), Infinity);
+    const end = items.reduce((acc, it) => Math.max(acc, it.end_time || acc), 0);
+    const startSafe = start === Infinity ? 0 : start;
+    const total = Math.max(1, end - startSafe);
+    return { timeline: items, originalStartTime: startSafe, totalDuration: total, finishDecisionId: finishId, finishAnswer: finishAns };
+  }, [agentData, execution?.status, execution?.started_at, execution?.completed_at]);
+  const toggleOpen = (i) => setOpenIndexes((prev) => {
+    const next = new Set(prev);
+    if (next.has(i)) next.delete(i);
+    else next.add(i);
+    return next;
+  });
+  const onKeyDown = (e) => {
+    if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
+      e.preventDefault();
+      submitInput(actionInput);
+    }
+  };
+  const activeTab = showStarter ? "start" : viewMode;
+  const hasExecution = !!execution?.execution_id;
+  const showRunSwitcher = hasExecution || agentRequestLoading;
+  const goToTab = (t) => {
+    if (t === "start") {
+      setShowStarter(true);
+    } else {
+      setShowStarter(false);
+      setViewMode(t);
+    }
+  };
+  const tabBar = /* @__PURE__ */ jsxs12(Box11, { sx: {
+    display: "flex",
+    alignItems: "center",
+    gap: 1.5,
+    p: 1,
+    borderRadius: 999,
+    border: "1px solid hsl(var(--border))",
+    bgcolor: "hsl(var(--card))",
+    width: "fit-content",
+    alignSelf: "center"
+  }, children: [
+    /* @__PURE__ */ jsx14(Box11, { sx: { display: "inline-flex", gap: 0.25, p: 0.25, borderRadius: 999, bgcolor: "hsl(var(--muted) / 0.6)" }, children: ["start", "simple", "detailed"].map((t) => {
+      const active = activeTab === t;
+      const label = t === "start" ? "Start" : t === "simple" ? "Simple" : "Detailed";
+      return /* @__PURE__ */ jsx14(
+        Box11,
+        {
+          component: "button",
+          type: "button",
+          onClick: () => goToTab(t),
+          sx: {
+            all: "unset",
+            cursor: "pointer",
+            px: 1.75,
+            py: 0.5,
+            borderRadius: 999,
+            fontSize: "0.8rem",
+            fontWeight: 600,
+            color: active ? "hsl(var(--primary-foreground))" : "hsl(var(--muted-foreground))",
+            bgcolor: active ? "hsl(var(--primary))" : "transparent",
+            transition: "background 0.12s ease, color 0.12s ease",
+            "&:hover": active ? {} : { color: "hsl(var(--foreground))", bgcolor: "hsl(var(--muted))" }
+          },
+          children: label
+        },
+        t
+      );
+    }) }),
+    /* @__PURE__ */ jsx14(Tooltip6, { title: "Reload execution data", children: /* @__PURE__ */ jsx14("span", { children: /* @__PURE__ */ jsx14(
+      IconButton6,
+      {
+        size: "small",
+        onClick: () => execution?.execution_id && execution?.authorization && getExecution(execution.execution_id, execution.authorization),
+        disabled: !hasExecution,
+        sx: {
+          width: 30,
+          height: 30,
+          color: "hsl(var(--muted-foreground))",
+          "&:hover": { color: "hsl(var(--foreground))", bgcolor: "hsl(var(--muted))" }
+        },
+        children: /* @__PURE__ */ jsx14(RefreshIcon, { sx: { fontSize: 16 } })
+      }
+    ) }) })
+  ] });
+  return /* @__PURE__ */ jsx14(Box11, { sx: { width: "100%", display: "flex", justifyContent: "center", pb: 4 }, children: /* @__PURE__ */ jsxs12(Box11, { sx: { width: "100%", maxWidth, display: "flex", flexDirection: "column", gap: 3 }, children: [
+    showRunSwitcher && tabBar,
+    showStarter ? /* @__PURE__ */ jsxs12(
+      Box11,
+      {
+        component: "form",
+        onSubmit: (e) => {
+          e.preventDefault();
+          submitInput(actionInput);
+        },
+        sx: { display: "flex", flexDirection: "column", alignItems: "center", gap: compact ? 2 : 3, py: compact ? 2 : 4 },
+        children: [
+          !hideHeroIcon && !compact && /* @__PURE__ */ jsx14(Box11, { sx: {
+            width: heroIconSize,
+            height: heroIconSize,
+            borderRadius: 3,
+            bgcolor: "hsl(var(--card))",
+            border: "1px solid hsl(var(--border))",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            boxShadow: "0 8px 24px rgba(0,0,0,0.25)"
+          }, children: heroIcon ?? /* @__PURE__ */ jsx14(AgentIcon_default, { size: Math.round(heroIconSize * 0.67) }) }),
+          /* @__PURE__ */ jsx14(Typography11, { component: "h1", sx: {
+            fontSize: compact ? { xs: "1.25rem", md: "1.5rem" } : { xs: "1.75rem", md: "2.25rem" },
+            fontWeight: 600,
+            color: "hsl(var(--foreground))",
+            textAlign: "center",
+            letterSpacing: "-0.01em"
+          }, children: title }),
+          subtitle && /* @__PURE__ */ jsx14(Typography11, { sx: {
+            fontSize: "0.95rem",
+            color: "hsl(var(--muted-foreground))",
+            textAlign: "center",
+            mt: -1,
+            maxWidth: 600
+          }, children: subtitle }),
+          /* @__PURE__ */ jsxs12(Box11, { sx: {
+            width: "100%",
+            display: "flex",
+            flexDirection: "column",
+            gap: 1,
+            borderRadius: attachedImages.length > 0 ? 4 : 999,
+            border: "1.5px solid hsl(var(--border))",
+            bgcolor: "hsl(var(--card))",
+            px: 3,
+            py: 1.75,
+            transition: "border-color 0.15s ease, box-shadow 0.15s ease, border-radius 0.15s ease",
+            "&:focus-within": {
+              borderColor: "hsl(var(--primary))",
+              boxShadow: "0 0 0 3px hsla(var(--primary) / 0.12)"
+            }
+          }, children: [
+            attachedImages.length > 0 && /* @__PURE__ */ jsx14(Box11, { sx: { display: "flex", flexWrap: "wrap", gap: 0.75 }, children: attachedImages.map((img, idx) => /* @__PURE__ */ jsxs12(Box11, { sx: {
+              display: "inline-flex",
+              alignItems: "center",
+              gap: 1,
+              p: 0.5,
+              pr: 1,
+              borderRadius: 1.5,
+              border: "1px solid hsl(var(--border))",
+              bgcolor: "hsl(var(--background))",
+              maxWidth: "100%"
+            }, children: [
+              /* @__PURE__ */ jsx14(Box11, { component: "img", src: img.dataUrl, alt: img.name, sx: { width: 32, height: 32, borderRadius: 1, objectFit: "cover", flexShrink: 0 } }),
+              /* @__PURE__ */ jsx14(Typography11, { sx: { fontSize: "0.72rem", color: "hsl(var(--foreground))", maxWidth: 190, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: img.name }),
+              /* @__PURE__ */ jsx14(IconButton6, { size: "small", onClick: () => setAttachedImages((prev) => prev.filter((_, i) => i !== idx)), sx: { p: 0.25, color: "hsl(var(--muted-foreground))", "&:hover": { color: "hsl(var(--destructive))" } }, "aria-label": "Remove attached image", children: /* @__PURE__ */ jsx14(CloseIcon4, { sx: { fontSize: 12 } }) })
+            ] }, `${img.name}-${idx}`)) }),
+            /* @__PURE__ */ jsxs12(Box11, { sx: { display: "flex", alignItems: "flex-end", gap: 1, width: "100%" }, children: [
+              /* @__PURE__ */ jsx14(
+                InputBase2,
+                {
+                  inputRef,
+                  autoFocus: true,
+                  multiline: true,
+                  minRows: 1,
+                  maxRows: 6,
+                  fullWidth: true,
+                  value: actionInput,
+                  onChange: (e) => setActionInput(e.target.value),
+                  placeholder,
+                  onKeyDown,
+                  onPaste: (e) => {
+                    const items = e.clipboardData?.items;
+                    if (!items) return;
+                    const files = [];
+                    for (const item of Array.from(items)) {
+                      if (item.kind === "file" && item.type.startsWith("image/")) {
+                        const file = item.getAsFile();
+                        if (file) files.push(file);
+                      }
+                    }
+                    if (files.length > 0) {
+                      e.preventDefault();
+                      handleImagesSelected(files);
+                    }
+                  },
+                  disabled: agentRequestLoading,
+                  sx: {
+                    fontSize: "1rem",
+                    color: "hsl(var(--foreground))",
+                    "& textarea::placeholder": { color: "hsl(var(--muted-foreground))", opacity: 0.7 }
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx14(
+                "input",
+                {
+                  ref: fileInputRef,
+                  type: "file",
+                  accept: "image/*",
+                  multiple: true,
+                  style: { display: "none" },
+                  onChange: (e) => {
+                    handleImagesSelected(e.target.files);
+                    if (e.target) e.target.value = "";
+                  }
+                }
+              ),
+              !hideAttach && /* @__PURE__ */ jsx14(
+                IconButton6,
+                {
+                  type: "button",
+                  onClick: () => fileInputRef.current?.click(),
+                  disabled: agentRequestLoading,
+                  title: attachedImages.length > 0 ? `Add image (${attachedImages.length} attached)` : "Attach image",
+                  sx: {
+                    width: 36,
+                    height: 36,
+                    color: attachedImages.length > 0 ? "hsl(var(--primary))" : "hsl(var(--muted-foreground))",
+                    bgcolor: attachedImages.length > 0 ? "hsla(var(--primary) / 0.1)" : "transparent",
+                    "&:hover": { color: "hsl(var(--foreground))", bgcolor: "hsl(var(--muted))" }
+                  },
+                  children: /* @__PURE__ */ jsx14(AttachFileIcon, { sx: { fontSize: 18 } })
+                }
+              ),
+              /* @__PURE__ */ jsx14(Tooltip6, { title: submitTooltip, placement: "top", arrow: true, children: /* @__PURE__ */ jsx14("span", { children: /* @__PURE__ */ jsx14(
+                IconButton6,
+                {
+                  type: "submit",
+                  disabled: actionInput.trim().length < 3 || agentRequestLoading,
+                  sx: {
+                    width: 36,
+                    height: 36,
+                    bgcolor: actionInput.trim().length >= 3 ? "hsl(var(--primary))" : "hsl(var(--muted))",
+                    color: actionInput.trim().length >= 3 ? "hsl(var(--primary-foreground))" : "hsl(var(--muted-foreground))",
+                    "&:hover": actionInput.trim().length >= 3 ? { filter: "brightness(1.1)", bgcolor: "hsl(var(--primary))" } : {},
+                    "&.Mui-disabled": { bgcolor: "hsl(var(--muted))", color: "hsl(var(--muted-foreground))" }
+                  },
+                  children: agentRequestLoading ? /* @__PURE__ */ jsx14(CircularProgress4, { size: 16, sx: { color: "inherit" } }) : submitIcon ?? /* @__PURE__ */ jsx14(PlayArrowRoundedIcon2, {})
+                }
+              ) }) })
+            ] })
+          ] }),
+          !hideAppPicker && /* @__PURE__ */ jsx14(Box11, { sx: { display: "flex", justifyContent: "center" }, children: /* @__PURE__ */ jsxs12(Box11, { sx: {
+            display: "inline-flex",
+            flexWrap: "wrap",
+            alignItems: "center",
+            gap: 0.5,
+            p: 0.5,
+            borderRadius: 999,
+            border: "1px solid hsl(var(--border))",
+            bgcolor: "hsl(var(--card))",
+            maxWidth: "100%"
+          }, children: [
+            /* @__PURE__ */ jsxs12(
+              Box11,
+              {
+                component: "button",
+                type: "button",
+                onClick: () => setAppSearchOpen(true),
+                sx: {
+                  all: "unset",
+                  cursor: "pointer",
+                  display: "inline-flex",
+                  alignItems: "center",
+                  gap: 0.5,
+                  px: 1.5,
+                  py: 0.5,
+                  borderRadius: 999,
+                  fontSize: "0.8rem",
+                  fontWeight: 500,
+                  color: "hsl(var(--muted-foreground))",
+                  bgcolor: "transparent",
+                  transition: "color 0.12s ease, background-color 0.12s ease",
+                  "&:hover": { color: "hsl(var(--foreground))", bgcolor: "hsl(var(--muted) / 0.5)" }
+                },
+                children: [
+                  /* @__PURE__ */ jsx14(AddIcon2, { sx: { fontSize: 14 } }),
+                  appPickerLabel
+                ]
+              }
+            ),
+            chosenApps.map((app, i) => /* @__PURE__ */ jsxs12(
+              Box11,
+              {
+                sx: {
+                  display: "inline-flex",
+                  alignItems: "center",
+                  gap: 0.5,
+                  pl: 0.5,
+                  pr: 0.75,
+                  py: 0.25,
+                  borderRadius: 999,
+                  bgcolor: "hsl(var(--muted) / 0.6)",
+                  fontSize: "0.8rem",
+                  color: "hsl(var(--foreground))"
+                },
+                children: [
+                  /* @__PURE__ */ jsx14(
+                    Avatar6,
+                    {
+                      src: app.icon || void 0,
+                      alt: app.name,
+                      variant: "rounded",
+                      sx: { width: 18, height: 18, bgcolor: "transparent" }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx14(Typography11, { sx: { fontSize: "0.8rem", mx: 0.25, textTransform: "capitalize" }, children: app.name.replace(/_/g, " ") }),
+                  /* @__PURE__ */ jsx14(
+                    IconButton6,
+                    {
+                      size: "small",
+                      onClick: () => setChosenApps((prev) => prev.filter((_, idx) => idx !== i)),
+                      sx: { p: 0.125, color: "hsl(var(--muted-foreground))", "&:hover": { color: "hsl(var(--destructive))" } },
+                      children: /* @__PURE__ */ jsx14(CloseIcon4, { sx: { fontSize: 12 } })
+                    }
+                  )
+                ]
+              },
+              `${app.name}-${i}`
+            ))
+          ] }) }),
+          error && /* @__PURE__ */ jsx14(Box11, { sx: {
+            width: "100%",
+            p: 1.5,
+            borderRadius: 1.5,
+            border: "1px solid hsl(var(--destructive) / 0.4)",
+            bgcolor: "hsl(var(--destructive) / 0.08)",
+            color: "hsl(var(--destructive))",
+            fontSize: "0.85rem"
+          }, children: error })
+        ]
+      }
+    ) : /* @__PURE__ */ jsxs12(Box11, { children: [
+      /* @__PURE__ */ jsxs12(Box11, { sx: {
+        display: "flex",
+        alignItems: "center",
+        gap: 2,
+        p: 2,
+        borderRadius: 2,
+        border: "1px solid hsl(var(--border))",
+        bgcolor: "hsl(var(--card))",
+        mb: 2
+      }, children: [
+        /* @__PURE__ */ jsxs12(Box11, { sx: { flex: 1, minWidth: 0 }, children: [
+          /* @__PURE__ */ jsx14(Typography11, { sx: { fontSize: "0.85rem", color: "hsl(var(--foreground))", fontWeight: 600, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: agentData?.original_input || actionInput || "Agent run" }),
+          /* @__PURE__ */ jsxs12(Typography11, { sx: { fontSize: "0.7rem", color: "hsl(var(--muted-foreground))" }, children: [
+            "Status: ",
+            execution?.status || agentData?.status || "\u2014",
+            " \xB7 ",
+            execution?.execution_id?.slice(0, 8) || ""
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx14(AvatarGroup, { max: 6, sx: { "& .MuiAvatar-root": { width: 28, height: 28, borderColor: "hsl(var(--border))" } }, children: chosenApps.map((app, i) => /* @__PURE__ */ jsx14(Tooltip6, { title: app.name.replace(/_/g, " "), children: /* @__PURE__ */ jsx14(
+          Avatar6,
+          {
+            src: app.icon || void 0,
+            alt: app.name,
+            variant: "rounded",
+            onClick: () => navigate(`/apps/${encodeURIComponent(app.name.toLowerCase().replace(/\s+/g, "_"))}`),
+            sx: {
+              bgcolor: "hsl(var(--muted))",
+              cursor: "pointer",
+              transition: "transform 0.15s ease, border-color 0.15s ease",
+              "&:hover": { transform: "scale(1.08)", borderColor: "hsl(var(--primary)) !important" }
+            }
+          }
+        ) }, i)) })
+      ] }),
+      error && /* @__PURE__ */ jsx14(Box11, { sx: {
+        p: 1.5,
+        borderRadius: 1.5,
+        mb: 2,
+        border: "1px solid hsl(var(--destructive) / 0.4)",
+        bgcolor: "hsl(var(--destructive) / 0.08)",
+        color: "hsl(var(--destructive))",
+        fontSize: "0.85rem"
+      }, children: error }),
+      viewMode === "simple" && /* @__PURE__ */ jsx14(Box11, { sx: {
+        borderRadius: 2,
+        border: "1px solid hsl(var(--border))",
+        bgcolor: "hsl(var(--card))",
+        p: 2.5,
+        display: "flex",
+        flexDirection: "column",
+        gap: 1.5
+      }, children: (() => {
+        const status = (execution?.status || agentData?.status || "EXECUTING").toUpperCase();
+        const decisionCount = (agentData?.decisions || []).length;
+        const isRunning = !["FINISHED", "FAILURE", "ABORTED", "CANCELLED", "CANCELED"].includes(status);
+        const rawStartedAt = agentData?.started_at || execution?.started_at || 0;
+        const startedAtSec = rawStartedAt > 1e12 ? Math.floor(rawStartedAt / 1e3) : rawStartedAt;
+        const effectiveStart = startedAtSec || localRunStart || 0;
+        let durationSec = null;
+        if (isRunning && effectiveStart) {
+          durationSec = Math.max(0, nowTick - effectiveStart);
+        } else if (totalDuration && totalDuration > 0) {
+          durationSec = Math.round(totalDuration);
+        }
+        const pendingAsk = (agentData?.decisions || []).slice().reverse().find((d) => {
+          const isAsk = d.category === "ask" || d.action === "ask";
+          const st = (d.run_details?.status || "").toUpperCase();
+          return isAsk && (st === "RUNNING" || st === "WAITING");
+        });
+        const pendingQuestions = [];
+        if (pendingAsk) {
+          for (const f of pendingAsk.fields || []) {
+            if (f.key === "question" && f.value) {
+              pendingQuestions.push({ question: f.value, index: pendingQuestions.length + 1 });
+            }
+          }
+        }
+        const pendingAnswered = pendingQuestions.every((q) => questionAnswers[q.question]?.value);
+        return /* @__PURE__ */ jsxs12(Fragment7, { children: [
+          /* @__PURE__ */ jsxs12(Box11, { sx: { display: "flex", alignItems: "center", gap: 1, flexWrap: "wrap" }, children: [
+            isRunning ? /* @__PURE__ */ jsx14(CircularProgress4, { size: 16, sx: { color: "hsl(var(--primary))" } }) : status === "FINISHED" ? /* @__PURE__ */ jsx14(CheckCircleIcon3, { sx: { fontSize: 18, color: "hsl(142 70% 45%)" } }) : /* @__PURE__ */ jsx14(ErrorIcon, { sx: { fontSize: 18, color: "hsl(var(--destructive))" } }),
+            /* @__PURE__ */ jsx14(Typography11, { sx: { fontSize: "0.9rem", fontWeight: 600, color: "hsl(var(--foreground))" }, children: isRunning ? "Agent is working\u2026" : status === "FINISHED" ? "Run finished" : `Run ${status.toLowerCase()}` }),
+            /* @__PURE__ */ jsxs12(Typography11, { sx: { fontSize: "0.75rem", color: "hsl(var(--muted-foreground))" }, children: [
+              decisionCount,
+              " step",
+              decisionCount === 1 ? "" : "s",
+              durationSec != null ? ` \xB7 ${durationSec}s` : ""
+            ] })
+          ] }),
+          finishAnswer ? /* @__PURE__ */ jsx14(Box11, { sx: {
+            p: 2,
+            borderRadius: 1.5,
+            border: "1px solid hsl(var(--border))",
+            bgcolor: "hsl(var(--background))",
+            fontSize: "0.9rem",
+            color: "hsl(var(--foreground))",
+            "& > *:first-of-type": { mt: 0 },
+            "& > *:last-child": { mb: 0 },
+            "& p": { my: 1, lineHeight: 1.55 },
+            "& h1, & h2, & h3, & h4": { mt: 2, mb: 1, fontWeight: 600, lineHeight: 1.3 },
+            "& h1": { fontSize: "1.15rem" },
+            "& h2": { fontSize: "1.05rem" },
+            "& h3, & h4": { fontSize: "0.95rem" },
+            "& ul": { my: 1, pl: 3, listStyleType: "disc", listStylePosition: "outside" },
+            "& ol": { my: 1, pl: 3, listStyleType: "decimal", listStylePosition: "outside" },
+            "& ul ul": { listStyleType: "circle" },
+            "& ul ul ul": { listStyleType: "square" },
+            "& li": { my: 0.25, display: "list-item" },
+            "& li::marker": { color: "hsl(var(--muted-foreground))" },
+            "& a": { color: "hsl(var(--primary))", textDecoration: "underline" },
+            "& code": {
+              px: 0.5,
+              py: 0.125,
+              borderRadius: 0.5,
+              bgcolor: "hsl(var(--muted))",
+              fontFamily: '"JetBrains Mono", ui-monospace, monospace',
+              fontSize: "0.82em"
+            },
+            "& pre": {
+              p: 1.5,
+              my: 1,
+              borderRadius: 1,
+              bgcolor: "hsl(var(--muted))",
+              overflowX: "auto",
+              fontSize: "0.82rem"
+            },
+            "& pre code": { p: 0, bgcolor: "transparent" },
+            "& blockquote": {
+              borderLeft: "3px solid hsl(var(--border))",
+              pl: 1.5,
+              my: 1,
+              color: "hsl(var(--muted-foreground))"
+            },
+            "& table": { borderCollapse: "collapse", my: 1, fontSize: "0.85rem" },
+            "& th, & td": { border: "1px solid hsl(var(--border))", px: 1, py: 0.5 },
+            "& hr": { border: 0, borderTop: "1px solid hsl(var(--border))", my: 1.5 }
+          }, children: /* @__PURE__ */ jsx14(Markdown, { remarkPlugins: [remarkGfm4, remarkBreaks], children: normalizeMarkdown(finishAnswer) }) }) : pendingAsk && pendingQuestions.length > 0 ? (() => {
+            const trySimpleSubmit = () => {
+              if (agentRequestLoading) return;
+              if (!pendingAnswered) {
+                setSimpleSubmitAttempted(true);
+                return;
+              }
+              if (pendingAsk.run_details?.id) {
+                submitQuestions(pendingAsk.run_details.id, questionAnswers);
+              }
+            };
+            return /* @__PURE__ */ jsxs12(Box11, { sx: { display: "flex", flexDirection: "column", gap: 1.5 }, children: [
+              pendingQuestions.map((q, qi) => {
+                const value = questionAnswers[q.question]?.value || "";
+                const isMissing = simpleSubmitAttempted && !value;
+                return /* @__PURE__ */ jsxs12(Box11, { children: [
+                  /* @__PURE__ */ jsx14(Box11, { sx: { fontSize: "0.9rem", color: "hsl(var(--foreground))", mb: 1, "& p": { my: 0.5 } }, children: /* @__PURE__ */ jsx14(Markdown, { remarkPlugins: [remarkGfm4, remarkBreaks], children: normalizeMarkdown(q.question) }) }),
+                  /* @__PURE__ */ jsx14(
+                    TextField4,
+                    {
+                      fullWidth: true,
+                      multiline: true,
+                      minRows: 2,
+                      placeholder: "Your answer here\u2026",
+                      value,
+                      error: isMissing,
+                      helperText: isMissing ? "Please answer this question" : void 0,
+                      onChange: (e) => {
+                        const v = e.target.value;
+                        setQuestionAnswers((prev) => ({
+                          ...prev,
+                          [q.question]: { index: qi, value: v }
+                        }));
+                      },
+                      onKeyDown: (e) => {
+                        if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
+                          e.preventDefault();
+                          trySimpleSubmit();
+                        }
+                      },
+                      size: "small",
+                      sx: { "& .MuiOutlinedInput-root": { bgcolor: "hsl(var(--background))" } }
+                    }
+                  )
+                ] }, qi);
+              }),
+              /* @__PURE__ */ jsxs12(Box11, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+                /* @__PURE__ */ jsx14(
+                  Button5,
+                  {
+                    variant: "contained",
+                    size: "small",
+                    disabled: agentRequestLoading,
+                    onClick: trySimpleSubmit,
+                    children: agentRequestLoading ? /* @__PURE__ */ jsx14(CircularProgress4, { size: 16 }) : "Submit"
+                  }
+                ),
+                pendingAsk.run_details?.id && getFormUrl(pendingAsk.run_details.id) && /* @__PURE__ */ jsx14(Tooltip6, { title: "Answer in the Form UI", placement: "right", children: /* @__PURE__ */ jsx14(
+                  IconButton6,
+                  {
+                    size: "small",
+                    onClick: () => {
+                      const url = getFormUrl(pendingAsk.run_details.id);
+                      if (url) window.open(url, "_blank", "noopener,noreferrer");
+                    },
+                    sx: { color: "hsl(var(--muted-foreground))", "&:hover": { color: "hsl(var(--primary))" } },
+                    children: /* @__PURE__ */ jsx14(OpenInNewIcon2, { sx: { fontSize: 18 } })
+                  }
+                ) })
+              ] })
+            ] });
+          })() : isRunning ? /* @__PURE__ */ jsx14(Typography11, { sx: { fontSize: "0.85rem", color: "hsl(var(--muted-foreground))" }, children: "Waiting for the agent to produce the first step." }) : /* @__PURE__ */ jsx14(Typography11, { sx: { fontSize: "0.85rem", color: "hsl(var(--muted-foreground))" }, children: "No final answer was returned. Open Detailed to inspect each step." }),
+          !isRunning && /* @__PURE__ */ jsx14(Box11, { children: /* @__PURE__ */ jsx14(
+            Button5,
+            {
+              size: "small",
+              variant: "text",
+              onClick: () => setViewMode("detailed"),
+              sx: { color: "hsl(var(--primary))", textTransform: "none", px: 0 },
+              children: "View detailed timeline \u2192"
+            }
+          ) })
+        ] });
+      })() }),
+      viewMode === "detailed" && (() => {
+        const detailedStatus = (execution?.status || agentData?.status || "EXECUTING").toUpperCase();
+        const detailedIsRunning = !["FINISHED", "FAILURE", "ABORTED", "CANCELLED", "CANCELED"].includes(detailedStatus);
+        const detailedRunFinished = !detailedIsRunning;
+        return /* @__PURE__ */ jsx14(Box11, { sx: {
+          borderRadius: 2,
+          border: "1px solid hsl(var(--border))",
+          bgcolor: "hsl(var(--card))",
+          overflow: "hidden"
+        }, children: timeline.length === 0 || timeline.length === 1 && agentRequestLoading ? /* @__PURE__ */ jsxs12(Box11, { sx: { p: 4, textAlign: "center", color: "hsl(var(--muted-foreground))", fontSize: "0.85rem" }, children: [
+          /* @__PURE__ */ jsx14(CircularProgress4, { size: 20, sx: { mb: 1 } }),
+          /* @__PURE__ */ jsx14(Typography11, { sx: { fontSize: "0.85rem" }, children: "Waiting for agent response\u2026" })
+        ] }) : /* @__PURE__ */ jsxs12(Fragment7, { children: [
+          timeline.map((item, i) => /* @__PURE__ */ jsx14(
+            TimelineRow,
+            {
+              item,
+              index: i,
+              open: openIndexes.has(i),
+              onToggle: () => toggleOpen(i),
+              appsById,
+              totalDuration,
+              originalStartTime,
+              maxWidth: 260,
+              questionAnswers,
+              setQuestionAnswers,
+              onSubmitQuestions: submitQuestions,
+              onRerunAgent: rerunAgent,
+              onRerunDecision: rerunDecision,
+              agentRequestLoading,
+              getFormUrl,
+              runFinished: detailedRunFinished
+            },
+            i
+          )),
+          detailedRunFinished && /* @__PURE__ */ jsxs12(Box11, { sx: {
+            borderTop: "1px solid hsl(var(--border))",
+            p: 2.5,
+            display: "flex",
+            flexDirection: "column",
+            gap: 1.5,
+            bgcolor: "hsl(var(--muted) / 0.2)"
+          }, children: [
+            /* @__PURE__ */ jsxs12(Box11, { sx: { display: "flex", alignItems: "center", gap: 1, flexWrap: "wrap" }, children: [
+              detailedStatus === "FINISHED" ? /* @__PURE__ */ jsx14(CheckCircleIcon3, { sx: { fontSize: 18, color: "hsl(142 70% 45%)" } }) : /* @__PURE__ */ jsx14(ErrorIcon, { sx: { fontSize: 18, color: "hsl(var(--destructive))" } }),
+              /* @__PURE__ */ jsx14(Typography11, { sx: { fontSize: "0.9rem", fontWeight: 600, color: "hsl(var(--foreground))" }, children: detailedStatus === "FINISHED" ? "Run finished" : `Run ${detailedStatus.toLowerCase()}` })
+            ] }),
+            finishAnswer && /* @__PURE__ */ jsx14(Box11, { sx: {
+              p: 2,
+              borderRadius: 1.5,
+              border: "1px solid hsl(var(--border))",
+              bgcolor: "hsl(var(--background))",
+              fontSize: "0.9rem",
+              color: "hsl(var(--foreground))",
+              "& > *:first-of-type": { mt: 0 },
+              "& > *:last-child": { mb: 0 },
+              "& p": { my: 1, lineHeight: 1.55 },
+              "& a": { color: "hsl(var(--primary))", textDecoration: "underline" },
+              "& code": {
+                px: 0.5,
+                py: 0.125,
+                borderRadius: 0.5,
+                bgcolor: "hsl(var(--muted))",
+                fontFamily: '"JetBrains Mono", ui-monospace, monospace',
+                fontSize: "0.82em"
+              },
+              "& pre": {
+                p: 1.5,
+                my: 1,
+                borderRadius: 1,
+                bgcolor: "hsl(var(--muted))",
+                overflowX: "auto",
+                fontSize: "0.82rem"
+              },
+              "& pre code": { p: 0, bgcolor: "transparent" }
+            }, children: /* @__PURE__ */ jsx14(Markdown, { remarkPlugins: [remarkGfm4, remarkBreaks], children: normalizeMarkdown(finishAnswer) }) })
+          ] })
+        ] }) });
+      })(),
+      finishDecisionId && /* @__PURE__ */ jsx14(Box11, { sx: { mt: 3, display: "flex", justifyContent: "center" }, children: /* @__PURE__ */ jsxs12(Box11, { sx: { width: "100%", maxWidth: 640 }, children: [
+        /* @__PURE__ */ jsx14(Typography11, { sx: { fontSize: "0.75rem", color: "hsl(var(--muted-foreground))", mb: 0.75, textAlign: "center" }, children: "Continue this agent run with more details" }),
+        /* @__PURE__ */ jsxs12(
+          Box11,
+          {
+            component: "form",
+            onSubmit: (e) => {
+              e.preventDefault();
+              if (continuationText.trim()) {
+                submitQuestions(finishDecisionId, { continue: continuationText }, true);
+              }
+            },
+            sx: {
+              display: "flex",
+              alignItems: "flex-end",
+              gap: 1,
+              p: 1.25,
+              borderRadius: 999,
+              border: "1.5px solid hsl(var(--border))",
+              bgcolor: "hsl(var(--card))",
+              "&:focus-within": {
+                borderColor: "hsl(var(--primary))",
+                boxShadow: "0 0 0 3px hsla(var(--primary) / 0.12)"
+              }
+            },
+            children: [
+              /* @__PURE__ */ jsx14(
+                InputBase2,
+                {
+                  fullWidth: true,
+                  multiline: true,
+                  minRows: 1,
+                  maxRows: 4,
+                  placeholder: continuationPlaceholder,
+                  value: continuationText,
+                  onChange: (e) => setContinuationText(e.target.value),
+                  onKeyDown: (e) => {
+                    if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
+                      e.preventDefault();
+                      if (continuationText.trim() && !agentRequestLoading) {
+                        submitQuestions(finishDecisionId, { continue: continuationText }, true);
+                      }
+                    }
+                  },
+                  disabled: agentRequestLoading,
+                  sx: { fontSize: "0.9rem", color: "hsl(var(--foreground))", px: 2 }
+                }
+              ),
+              /* @__PURE__ */ jsx14(
+                IconButton6,
+                {
+                  type: "submit",
+                  disabled: !continuationText.trim() || agentRequestLoading,
+                  sx: {
+                    width: 36,
+                    height: 36,
+                    bgcolor: continuationText.trim() && !agentRequestLoading ? "hsl(var(--primary))" : "hsl(var(--muted))",
+                    color: continuationText.trim() && !agentRequestLoading ? "hsl(var(--primary-foreground))" : "hsl(var(--muted-foreground))",
+                    "&:hover": continuationText.trim() && !agentRequestLoading ? { filter: "brightness(1.1)", bgcolor: "hsl(var(--primary))" } : {}
+                  },
+                  children: agentRequestLoading ? /* @__PURE__ */ jsx14(CircularProgress4, { size: 16, sx: { color: "inherit" } }) : /* @__PURE__ */ jsx14(SendIcon, { sx: { fontSize: 18 } })
+                }
+              )
+            ]
+          }
+        )
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsx14(
+      AppSearchDrawer,
+      {
+        open: appSearchOpen,
+        onClose: () => setAppSearchOpen(false),
+        title: appPickerTitle,
+        subtitle: appPickerSubtitle,
+        onQuickSelect: (app) => {
+          const known = availableApps.find((a) => a.name?.toLowerCase() === app.name?.toLowerCase());
+          setChosenApps(
+            (prev) => prev.some((a) => a.name === app.name) ? prev : [...prev, { name: app.name, icon: app.icon || known?.icon, id: app.id || known?.id || void 0 }]
+          );
+        }
+      }
+    )
+  ] }) });
+};
+var AgentUI_default = AgentUI;
+
+// useAppLookup.ts
+import { useEffect as useEffect8, useMemo as useMemo6, useState as useState11 } from "react";
+var norm = (s) => s.toLowerCase().replace(/[\s_\-]+/g, "_");
+function useAppLookup(appName) {
+  const [loading, setLoading] = useState11(false);
+  const [info, setInfo] = useState11(null);
+  const [algoliaId, setAlgoliaId] = useState11(null);
+  const {
+    authStates,
+    authenticatedApps,
+    handleAuthChange,
+    handleTestConnection,
+    handleSaveAuth,
+    refreshAuth
+  } = useAppAuth();
+  useEffect8(() => {
     if (!appName) {
       setInfo(null);
       setAlgoliaId(null);
@@ -5609,13 +7646,13 @@ function useAppLookup(appName) {
       setLoading(false);
     })();
   }, [appName]);
-  const matchingEntries = useMemo5(() => {
+  const matchingEntries = useMemo6(() => {
     if (!appName) return [];
     return authenticatedApps.filter(
       (auth) => auth.app?.name && norm(auth.app.name) === norm(appName)
     );
   }, [appName, authenticatedApps]);
-  const image = useMemo5(() => {
+  const image = useMemo6(() => {
     if (info?.image) return info.image;
     for (const entry of matchingEntries) {
       const img = entry.app?.large_image || entry.large_image;
@@ -5623,7 +7660,7 @@ function useAppLookup(appName) {
     }
     return "";
   }, [info, matchingEntries]);
-  const algoliaApp = useMemo5(() => {
+  const algoliaApp = useMemo6(() => {
     if (!appName) return null;
     return {
       objectID: algoliaId || appName,
@@ -5655,6 +7692,7 @@ function useAppLookup(appName) {
 }
 export {
   API_CONFIG,
+  AgentUI_default as AgentUI,
   AppAuthSection,
   AppDetailDrawer,
   AppDetailProvider,