@shuffleio/shuffle-mcps 0.0.5 → 0.0.6

package/dist/index.cjs

@@ -30,6 +30,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   API_CONFIG: () => API_CONFIG,
+  AgentUI: () => AgentUI_default,
   AppAuthSection: () => AppAuthSection,
   AppDetailDrawer: () => AppDetailDrawer,
   AppDetailProvider: () => AppDetailProvider,
@@ -55,11 +56,35 @@ module.exports = __toCommonJS(index_exports);
 // ShuffleMCP.tsx
 var import_react9 = __toESM(require("react"), 1);
 var import_algoliasearch = require("algoliasearch");
+var import_material9 = require("@mui/material");
 
 // AppDetailDrawer.tsx
 var import_react8 = require("react");
-var import_sonner2 = require("sonner");
-var import_lucide_react = require("lucide-react");
+
+// 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
+var import_lucide_react2 = require("lucide-react");
 
 // api.ts
 var import_meta = {};
@@ -381,6 +406,7 @@ var import_react3 = require("react");
 var import_react2 = require("react");
 var import_material = require("@mui/material");
 var import_Add = __toESM(require("@mui/icons-material/Add"), 1);
+var import_react_router_dom = require("react-router-dom");
 
 // authenticatedApps.ts
 var TTL_MS = 3e4;
@@ -829,7 +855,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: [
@@ -850,7 +876,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"
@@ -878,8 +904,8 @@ var IntegrationStatus = ({ collapsed, filterApps, onAddClick, iconSize = 26, onD
         import_material.IconButton,
         {
           size: "small",
-          component: "a",
-          href: "/onboarding",
+          component: import_react_router_dom.Link,
+          to: "/onboarding",
           sx: {
             width: 26,
             height: 26,
@@ -1276,19 +1302,6 @@ var import_framer_motion3 = require("framer-motion");
 
 // AppAuthConfig.tsx
 var import_react4 = require("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
 var import_material3 = require("@mui/material");
 var import_framer_motion2 = require("framer-motion");
 var import_ExpandMore = __toESM(require("@mui/icons-material/ExpandMore"), 1);
@@ -3609,9 +3622,11 @@ function TryMcpSection({ appName, appIcon, appId, categories }) {
 
 // SingulActionsPreview.tsx
 var import_react6 = require("react");
-var import_sonner = require("sonner");
 var import_material7 = require("@mui/material");
 var import_PlayArrow = __toESM(require("@mui/icons-material/PlayArrow"), 1);
+var import_ContentCopy = __toESM(require("@mui/icons-material/ContentCopy"), 1);
+var import_Check = __toESM(require("@mui/icons-material/Check"), 1);
+var import_lucide_react = require("lucide-react");
 var import_jsx_runtime9 = require("react/jsx-runtime");
 var import_react7 = require("react");
 var ACTION_DEFAULT_FIELDS = {
@@ -3867,14 +3882,16 @@ var SingulActionsPreview = ({
   const handleCopy = async () => {
     try {
       await navigator.clipboard.writeText(snippet);
-      import_sonner.toast.success("Copied snippet");
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
     } catch {
-      import_sonner.toast.error("Copy failed");
+      toast.error("Copy failed");
     }
   };
   const [playLoading, setPlayLoading] = (0, import_react6.useState)(false);
   const [playResult, setPlayResult] = (0, import_react6.useState)(null);
   const responseRef = (0, import_react6.useRef)(null);
+  const [copied, setCopied] = (0, import_react6.useState)(false);
   const scrollToResponse = () => {
     requestAnimationFrame(() => {
       responseRef.current?.scrollIntoView({ behavior: "smooth", block: "nearest" });
@@ -3929,14 +3946,14 @@ var SingulActionsPreview = ({
         }
       })();
       if (parsed?.success === false) {
-        import_sonner.toast.error(parsed.reason || "Run failed");
+        toast.error(parsed.reason || "Run failed");
       } else {
-        import_sonner.toast.success(`Ran ${selected?.name || lang}`);
+        toast.success(`Ran ${selected?.name || lang}`);
       }
     } catch (err) {
       const msg = err?.message || "Run failed";
       setPlayResult(msg);
-      import_sonner.toast.error(msg);
+      toast.error(msg);
     } finally {
       setPlayLoading(false);
       scrollToResponse();
@@ -3981,86 +3998,54 @@ var SingulActionsPreview = ({
         },
         children: [
           isDisabled ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_material7.Typography, { sx: { fontSize: "0.75rem", color: "hsl(var(--muted-foreground))", fontStyle: "italic", textAlign: "center", py: 1 }, children: "No category detected for this app" }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_material7.Box, { sx: { display: "flex", gap: 1, mb: 1.5, alignItems: "center" }, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                import_material7.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__ */ (0, import_react7.createElement)("li", { ...props, key: `${option.category}-${option.name}` }, /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_material7.Box, { sx: { display: "flex", flexDirection: "column" }, children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_material7.Typography, { sx: { fontSize: "0.78rem", color: "hsl(var(--foreground))" }, children: option.label }),
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_material7.Typography, { sx: { fontFamily: "'JetBrains Mono', monospace", fontSize: "0.65rem", color: "hsl(var(--muted-foreground))" }, children: option.name })
-                  ] })),
-                  sx: {
-                    flex: 1,
-                    "& .MuiOutlinedInput-root": {
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_material7.Box, { sx: { display: "flex", gap: 1, mb: 1.5, alignItems: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              import_material7.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__ */ (0, import_react7.createElement)("li", { ...props, key: `${option.category}-${option.name}` }, /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_material7.Box, { sx: { display: "flex", flexDirection: "column" }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_material7.Typography, { sx: { fontSize: "0.78rem", color: "hsl(var(--foreground))" }, children: option.label }),
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_material7.Typography, { 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__ */ (0, import_jsx_runtime9.jsx)(import_material7.TextField, { ...params, placeholder: "Select action" })
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
-                import_material7.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__ */ (0, import_jsx_runtime9.jsx)(import_material7.ToggleButton, { value: "curl", children: "curl" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_material7.ToggleButton, { value: "python", children: "python" })
-                  ]
-                }
-              )
-            ] }),
+                  }
+                },
+                renderInput: (params) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_material7.TextField, { ...params, placeholder: "Select action" })
+              }
+            ) }),
             /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
               import_material7.Box,
               {
@@ -4079,82 +4064,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__ */ (0, import_jsx_runtime9.jsxs)(import_material7.Box, { sx: { display: "flex", alignItems: "center", gap: 0.75 }, children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_material7.Box, { sx: { display: "flex", gap: 0.4 }, children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_material7.Box, { sx: { width: 8, height: 8, borderRadius: "50%", backgroundColor: "hsl(0 70% 60% / 0.6)" } }),
-                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_material7.Box, { sx: { width: 8, height: 8, borderRadius: "50%", backgroundColor: "hsl(40 80% 60% / 0.6)" } }),
-                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_material7.Box, { sx: { width: 8, height: 8, borderRadius: "50%", backgroundColor: "hsl(140 60% 55% / 0.6)" } })
-                          ] }),
-                          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
-                            import_material7.Typography,
-                            {
-                              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__ */ (0, import_jsx_runtime9.jsxs)(import_material7.Box, { sx: { display: "flex", gap: 0.75 }, children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                            import_material7.Button,
-                            {
-                              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__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react.Code2, { size: 14, style: { color: "hsl(var(--muted-foreground))" } }),
+                        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                          import_material7.Typography,
+                          {
+                            sx: {
+                              fontSize: "0.7rem",
+                              fontWeight: 600,
+                              color: "hsl(var(--muted-foreground))",
+                              textTransform: "uppercase",
+                              letterSpacing: "0.05em"
+                            },
+                            children: "Action"
+                          }
+                        ),
+                        selected && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                          import_material7.Chip,
+                          {
+                            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__ */ (0, import_jsx_runtime9.jsx)(
-                            import_material7.Button,
-                            {
-                              size: "small",
-                              onClick: handlePlay,
-                              disabled: playLoading,
-                              startIcon: !playLoading && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_PlayArrow.default, { 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__ */ (0, import_jsx_runtime9.jsx)(import_material7.Box, { sx: { flex: 1 } }),
+                        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_material7.Box, { sx: { display: "flex", gap: 0.5 }, children: ["curl", "python"].map((m) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                          import_material7.Chip,
+                          {
+                            label: m === "curl" ? "cURL" : "Python",
+                            icon: m === "curl" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react.Terminal, { size: 12 }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react.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__ */ (0, import_jsx_runtime9.jsx)(import_material7.Tooltip, { title: copied ? "Copied!" : "Copy", arrow: true, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_material7.IconButton, { size: "small", onClick: handleCopy, sx: { color: "hsl(var(--muted-foreground))" }, children: copied ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_Check.default, { sx: { fontSize: 14 } }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_ContentCopy.default, { sx: { fontSize: 14 } }) }) }),
+                        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                          import_material7.Button,
+                          {
+                            size: "small",
+                            onClick: handlePlay,
+                            disabled: playLoading,
+                            startIcon: !playLoading && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_PlayArrow.default, { 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"
+                          }
+                        )
                       ]
                     }
                   ),
@@ -4279,6 +4277,7 @@ function AppDetailDrawer({
   open,
   onClose,
   appName,
+  appId,
   anchor = "right",
   width = 520,
   onRefresh,
@@ -4309,33 +4308,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) {
@@ -4399,7 +4400,7 @@ function AppDetailDrawer({
       });
       setAppLoading(false);
     })();
-  }, [open, appName]);
+  }, [open, appName, appId]);
   (0, import_react8.useEffect)(() => {
     if (!open || !appName || !isAuthenticated) {
       setIncidentStats(null);
@@ -4491,22 +4492,22 @@ function AppDetailDrawer({
         });
         if (!res.ok) throw new Error("Deactivate failed");
         setActivatedAppId(null);
-        import_sonner2.toast.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);
-        import_sonner2.toast.success(`${displayName} activated`);
+        setActivatedAppId(appId2);
+        toast.success(`${displayName} activated`);
       }
     } catch (err) {
       console.error("[Activate] Error:", err);
-      import_sonner2.toast.error(err?.message || "Activation failed");
+      toast.error(err?.message || "Activation failed");
       setIsActivated(wasActivated);
       setActivatedAppId(prevAppId);
     } finally {
@@ -4607,14 +4608,14 @@ function AppDetailDrawer({
             bgcolor: "hsl(var(--muted) / 0.3)"
           }, children: [
             /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_material8.Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react.Download, { size: 14, style: { color: "hsl(var(--primary))" } }),
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react2.Download, { size: 14, style: { color: "hsl(var(--primary))" } }),
               /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_material8.Box, { children: [
                 /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_material8.Typography, { sx: { fontSize: "1.1rem", fontWeight: 700, color: "hsl(var(--foreground))", lineHeight: 1 }, children: incidentStats.ingested }),
                 /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_material8.Typography, { sx: { fontSize: "0.65rem", color: "hsl(var(--muted-foreground))", fontWeight: 500 }, children: "Incidents ingested" })
               ] })
             ] }),
             incidentStats.forwarded > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_material8.Box, { sx: { display: "flex", alignItems: "center", gap: 1, ml: 2, pl: 2, borderLeft: "1px solid hsl(var(--border))" }, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react.Forward, { size: 14, style: { color: "hsl(var(--severity-low))" } }),
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react2.Forward, { size: 14, style: { color: "hsl(var(--severity-low))" } }),
               /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_material8.Box, { children: [
                 /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_material8.Typography, { sx: { fontSize: "1.1rem", fontWeight: 700, color: "hsl(var(--foreground))", lineHeight: 1 }, children: incidentStats.forwarded }),
                 /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_material8.Typography, { sx: { fontSize: "0.65rem", color: "hsl(var(--muted-foreground))", fontWeight: 500 }, children: "Forwarded" })
@@ -4634,8 +4635,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
             }
           ),
@@ -4967,6 +4968,10 @@ var ShuffleMCP = import_react9.default.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)));
@@ -4975,7 +4980,7 @@ var ShuffleMCP = import_react9.default.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 = (0, import_react9.useMemo)(() => {
     if (layout !== "grid") return {};
     const cols = typeof gridColumns === "number" ? gridColumns : gridColumns.md || 3;
@@ -5026,7 +5031,18 @@ var ShuffleMCP = import_react9.default.forwardRef(({
           /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "singul-app-details", style: customStyles.appDetails, children: [
             /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { className: "singul-app-name", style: customStyles.appName, children: [
               app.name.replace(/_/g, " "),
-              app.source === "private" && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "singul-private-badge", title: "From your private apps", children: "Private" })
+              app.source === "private" && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                import_material9.Tooltip,
+                {
+                  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__ */ (0, import_jsx_runtime11.jsx)("span", { className: "singul-private-badge", children: "Private" })
+                }
+              )
             ] }),
             showDescription && app.description && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "singul-app-description", style: customStyles.appDescription, children: app.description }),
             showCategories && app.categories?.[0] && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "singul-app-category", style: customStyles.appCategory, children: app.categories[0] })
@@ -5079,21 +5095,33 @@ var ShuffleMCP = import_react9.default.forwardRef(({
             isLoading && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "singul-loading-spinner", style: customStyles.loadingSpinner, children: renderLoadingState ? renderLoadingState() : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "singul-spinner", style: customStyles.spinner }) })
           ] }),
           showSourceFilter && privateApps.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("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__ */ (0, import_jsx_runtime11.jsxs)(
-            "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__ */ (0, import_jsx_runtime11.jsx)(
+            import_material9.Tooltip,
             {
-              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__ */ (0, import_jsx_runtime11.jsx)("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__ */ (0, import_jsx_runtime11.jsx)("span", { style: { display: "inline-flex" }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+                "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__ */ (0, import_jsx_runtime11.jsx)("span", { className: "singul-source-count", children: opt.count })
+                  ]
+                }
+              ) })
             },
             opt.key
           )) }),
@@ -5159,12 +5187,12 @@ var ShuffleMCP_default = ShuffleMCP;
 
 // AppSearchDrawer.tsx
 var import_react10 = require("react");
-var import_material10 = require("@mui/material");
+var import_material11 = require("@mui/material");
 var import_Close3 = __toESM(require("@mui/icons-material/Close"), 1);
 var import_framer_motion7 = require("framer-motion");
 
 // ShufflePipelinesBanner.tsx
-var import_material9 = require("@mui/material");
+var import_material10 = require("@mui/material");
 
 // ../assets/shuffle-icon.png
 var shuffle_icon_default = "data:image/png;base64,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";
@@ -5173,7 +5201,7 @@ var shuffle_icon_default = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAA
 var import_jsx_runtime12 = require("react/jsx-runtime");
 function ShufflePipelinesBanner() {
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
-    import_material9.Box,
+    import_material10.Box,
     {
       component: "a",
       href: "/detection",
@@ -5196,7 +5224,7 @@ function ShufflePipelinesBanner() {
       },
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-          import_material9.Box,
+          import_material10.Box,
           {
             component: "img",
             src: shuffle_icon_default,
@@ -5204,12 +5232,12 @@ function ShufflePipelinesBanner() {
             sx: { width: 36, height: 36, borderRadius: "10px", flexShrink: 0 }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_material9.Box, { sx: { flex: 1, minWidth: 0 }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_material9.Typography, { sx: { fontWeight: 700, fontSize: "0.85rem", color: "hsl(var(--foreground))", lineHeight: 1.3 }, children: "Shuffle Pipelines" }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_material9.Typography, { sx: { fontSize: "0.72rem", color: "hsl(var(--muted-foreground))", lineHeight: 1.4 }, children: "Do not have a SIEM? Shuffle can ingest, parse, and correlate your logs and events directly \u2014 no external SIEM required." })
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_material10.Box, { sx: { flex: 1, minWidth: 0 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_material10.Typography, { sx: { fontWeight: 700, fontSize: "0.85rem", color: "hsl(var(--foreground))", lineHeight: 1.3 }, children: "Shuffle Pipelines" }),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_material10.Typography, { sx: { fontSize: "0.72rem", color: "hsl(var(--muted-foreground))", lineHeight: 1.4 }, children: "Do not have a SIEM? Shuffle can ingest, parse, and correlate your logs and events directly \u2014 no external SIEM required." })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-          import_material9.Chip,
+          import_material10.Chip,
           {
             label: "Built-in",
             size: "small",
@@ -5327,16 +5355,19 @@ function AppSearchDrawer({
   pinnedApps
 }) {
   const [detailAppName, setDetailAppName] = (0, import_react10.useState)(null);
+  const [detailAppId, setDetailAppId] = (0, import_react10.useState)(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);
@@ -5347,10 +5378,11 @@ function AppSearchDrawer({
       return;
     }
     setDetailAppName(detail.app.name);
+    setDetailAppId(algoliaId);
   };
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
-      import_material10.Drawer,
+      import_material11.Drawer,
       {
         anchor,
         open: open && detailAppName === null,
@@ -5360,6 +5392,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"
@@ -5367,7 +5403,7 @@ function AppSearchDrawer({
         },
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
-            import_material10.Box,
+            import_material11.Box,
             {
               sx: {
                 px: 3,
@@ -5379,12 +5415,12 @@ function AppSearchDrawer({
                 flexShrink: 0
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_material10.Box, { sx: { flex: 1 }, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_material10.Typography, { sx: { color: "hsl(var(--foreground))", fontWeight: 700, fontSize: "1rem", lineHeight: 1.2 }, children: title }),
-                  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_material10.Typography, { sx: { color: "hsl(var(--muted-foreground))", fontSize: "0.75rem" }, children: subtitle })
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_material11.Box, { sx: { flex: 1 }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_material11.Typography, { sx: { color: "hsl(var(--foreground))", fontWeight: 700, fontSize: "1rem", lineHeight: 1.2 }, children: title }),
+                  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_material11.Typography, { sx: { color: "hsl(var(--muted-foreground))", fontSize: "0.75rem" }, children: subtitle })
                 ] }),
                 /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-                  import_material10.IconButton,
+                  import_material11.IconButton,
                   {
                     size: "small",
                     onClick: handleClose,
@@ -5395,13 +5431,13 @@ function AppSearchDrawer({
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_material10.Box, { sx: { flex: 1, overflowY: "auto", p: 3, minHeight: "92vh" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_material11.Box, { sx: { flex: 1, boxSizing: "border-box", overflow: "hidden", p: 3, minHeight: 0, display: "flex", flexDirection: "column" }, children: [
             showPipelinesBanner && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ShufflePipelinesBanner, {}),
-            API_CONFIG.apiKey && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_material10.Box, { sx: { mb: 2.5 }, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(IntegrationStatus, { collapsed: false, showAll: true, hideAddButton: true, priorityCategory }) }),
-            connectionPathApps && connectionPathApps.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_material10.Box, { sx: { mb: 2.5 }, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_material10.Typography, { sx: { color: "hsl(var(--muted-foreground))", fontSize: "0.7rem", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.05em", mb: 1 }, children: "In this usecase" }),
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_material10.Box, { sx: { display: "flex", gap: 1.5, flexWrap: "wrap" }, children: connectionPathApps.map((app) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_material10.Tooltip, { title: app.name.replace(/_/g, " "), arrow: true, placement: "bottom", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
-                import_material10.Box,
+            API_CONFIG.apiKey && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_material11.Box, { sx: { mb: 2.5 }, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(IntegrationStatus, { collapsed: false, showAll: true, hideAddButton: true, priorityCategory }) }),
+            connectionPathApps && connectionPathApps.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_material11.Box, { sx: { mb: 2.5 }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_material11.Typography, { sx: { color: "hsl(var(--muted-foreground))", fontSize: "0.7rem", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.05em", mb: 1 }, children: "In this usecase" }),
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_material11.Box, { sx: { display: "flex", gap: 1.5, flexWrap: "wrap" }, children: connectionPathApps.map((app) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_material11.Tooltip, { title: app.name.replace(/_/g, " "), arrow: true, placement: "bottom", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+                import_material11.Box,
                 {
                   onClick: () => handleAppSelected({ app: { name: app.name, image_url: app.icon, categories: [] } }),
                   sx: {
@@ -5412,7 +5448,7 @@ function AppSearchDrawer({
                   },
                   children: [
                     /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-                      import_material10.Avatar,
+                      import_material11.Avatar,
                       {
                         src: app.icon,
                         alt: app.name,
@@ -5421,7 +5457,7 @@ function AppSearchDrawer({
                       }
                     ),
                     /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-                      import_material10.Box,
+                      import_material11.Box,
                       {
                         sx: {
                           position: "absolute",
@@ -5439,55 +5475,84 @@ function AppSearchDrawer({
                 }
               ) }, app.name)) })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_framer_motion7.AnimatePresence, { mode: "wait", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-              import_framer_motion7.motion.div,
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              import_material11.Box,
               {
-                initial: { opacity: 0, x: -20 },
-                animate: { opacity: 1, x: 0 },
-                exit: { opacity: 0, x: -20 },
-                transition: { duration: 0.2 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-                  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 .singul-dropdown-item": {
+                    minHeight: 56,
+                    alignItems: "center"
                   }
-                )
-              },
-              "search"
-            ) })
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_framer_motion7.AnimatePresence, { mode: "wait", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                  import_framer_motion7.motion.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__ */ (0, import_jsx_runtime13.jsx)(
+                      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"
+                ) })
+              }
+            )
           ] })
         ]
       }
@@ -5499,9 +5564,11 @@ function AppSearchDrawer({
         onClose: () => {
           const name = detailAppName;
           setDetailAppName(null);
+          setDetailAppId(null);
           if (name) onDetailClose?.(name);
         },
         appName: detailAppName,
+        appId: detailAppId,
         anchor,
         width,
         onRefresh: onClose,
@@ -5511,22 +5578,1966 @@ function AppSearchDrawer({
   ] });
 }
 
-// useAppLookup.ts
+// AgentUI.tsx
 var import_react11 = require("react");
-var norm = (s) => s.toLowerCase().replace(/[\s_\-]+/g, "_");
-function useAppLookup(appName) {
-  const [loading, setLoading] = (0, import_react11.useState)(false);
-  const [info, setInfo] = (0, import_react11.useState)(null);
-  const [algoliaId, setAlgoliaId] = (0, import_react11.useState)(null);
-  const {
-    authStates,
-    authenticatedApps,
-    handleAuthChange,
-    handleTestConnection,
-    handleSaveAuth,
-    refreshAuth
-  } = useAppAuth();
-  (0, import_react11.useEffect)(() => {
+var import_react_router_dom2 = require("react-router-dom");
+var import_material12 = require("@mui/material");
+var import_Add2 = __toESM(require("@mui/icons-material/Add"), 1);
+var import_AttachFile = __toESM(require("@mui/icons-material/AttachFile"), 1);
+var import_CheckCircle3 = __toESM(require("@mui/icons-material/CheckCircle"), 1);
+var import_Check2 = __toESM(require("@mui/icons-material/Check"), 1);
+var import_Error = __toESM(require("@mui/icons-material/Error"), 1);
+var import_HourglassDisabled = __toESM(require("@mui/icons-material/HourglassDisabled"), 1);
+var import_Pause = __toESM(require("@mui/icons-material/Pause"), 1);
+var import_PlayArrowRounded2 = __toESM(require("@mui/icons-material/PlayArrowRounded"), 1);
+var import_Refresh = __toESM(require("@mui/icons-material/Refresh"), 1);
+var import_RestartAlt2 = __toESM(require("@mui/icons-material/RestartAlt"), 1);
+var import_ThumbUp = __toESM(require("@mui/icons-material/ThumbUp"), 1);
+var import_ThumbDown = __toESM(require("@mui/icons-material/ThumbDown"), 1);
+var import_OpenInNew2 = __toESM(require("@mui/icons-material/OpenInNew"), 1);
+var import_Send = __toESM(require("@mui/icons-material/Send"), 1);
+var import_Warning = __toESM(require("@mui/icons-material/Warning"), 1);
+var import_Close4 = __toESM(require("@mui/icons-material/Close"), 1);
+var import_react_markdown4 = __toESM(require("react-markdown"), 1);
+var import_remark_gfm4 = __toESM(require("remark-gfm"), 1);
+var import_remark_breaks = __toESM(require("remark-breaks"), 1);
+var import_react18_json_view = __toESM(require("react18-json-view"), 1);
+var import_style = require("react18-json-view/src/style.css");
+var import_dark = require("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
+var import_jsx_runtime14 = require("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__ */ (0, import_jsx_runtime14.jsx)(import_material12.CircularProgress, { size: 18, sx: { color: STATUS_COLORS.running } });
+  }
+  if (s === "WAITING") {
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material12.Tooltip, { title: "Waiting for input", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_Pause.default, { sx: { color: STATUS_COLORS.running, fontSize: 20 } }) });
+  }
+  if (s === "FINISHED" || s === "SUCCESS") {
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_CheckCircle3.default, { sx: { color: STATUS_COLORS.finished, fontSize: 20 } });
+  }
+  if (s === "ABORTED" || s === "FAILURE") {
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_Error.default, { sx: { color: STATUS_COLORS.error, fontSize: 20 } });
+  }
+  if (s === "IGNORED" || s === "IGNORE") {
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_Warning.default, { sx: { color: STATUS_COLORS.warning, fontSize: 20 } });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_HourglassDisabled.default, { 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] = (0, import_react11.useState)(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__ */ (0, import_jsx_runtime14.jsxs)(import_material12.Box, { 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__ */ (0, import_jsx_runtime14.jsxs)(
+      import_material12.Box,
+      {
+        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__ */ (0, import_jsx_runtime14.jsx)(import_material12.Box, { sx: { width: 24, display: "flex", justifyContent: "center" }, children: isProcessing ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material12.Box, { sx: { width: 6, height: 6, borderRadius: "50%", bgcolor: "hsl(var(--muted-foreground) / 0.5)" } }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(StatusIcon, { status: effectiveStatus }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material12.Box, { sx: { width: 24, display: "flex", justifyContent: "center" }, children: isProcessing ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material12.Box, { sx: { width: 22 } }) : toolApp?.icon ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material12.Avatar, { src: toolApp.icon, sx: { width: 22, height: 22, bgcolor: "transparent" }, variant: "rounded" }) : item.category === "finalise" || details?.action === "finish" ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_Check2.default, { sx: { color: STATUS_COLORS.finished, fontSize: 18 } }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material12.Box, { sx: { width: 22 } }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            import_material12.Chip,
+            {
+              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__ */ (0, import_jsx_runtime14.jsx)(import_material12.Box, { 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__ */ (0, import_jsx_runtime14.jsx)(import_react_markdown4.default, { remarkPlugins: [import_remark_gfm4.default, import_remark_breaks.default], children: normalizeMarkdown(displayLabel) }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material12.Tooltip, { title: `Duration: ${dur.toFixed(1)}s \xB7 ${itemStart ? new Date(itemStart * 1e3).toLocaleString() : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material12.Box, { sx: { width: maxWidth, position: "relative", height: 10, flexShrink: 0 }, children: dur > 0 && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material12.Box, { sx: {
+            position: "absolute",
+            left: Math.max(0, offset),
+            width,
+            height: 8,
+            top: 1,
+            bgcolor: barColor,
+            borderRadius: 1,
+            transition: "all 0.2s ease"
+          } }) }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material12.Box, { sx: { width: 60, fontSize: "0.7rem", color: "hsl(var(--muted-foreground))", textAlign: "right" }, children: dur > 0 ? `${dur.toFixed(1)}s` : "" }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+            import_material12.Box,
+            {
+              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__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material12.Tooltip, { title: "Approve this step", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                    import_material12.IconButton,
+                    {
+                      size: "small",
+                      disabled: agentRequestLoading,
+                      onClick: () => {
+                        if (details?.run_details?.id) onSubmitQuestions(details.run_details.id, { approve: "true" });
+                      },
+                      sx: { color: STATUS_COLORS.finished },
+                      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_ThumbUp.default, { sx: { fontSize: 16 } })
+                    }
+                  ) }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material12.Tooltip, { title: "Deny this step", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                    import_material12.IconButton,
+                    {
+                      size: "small",
+                      disabled: agentRequestLoading,
+                      onClick: () => {
+                        if (details?.run_details?.id) onSubmitQuestions(details.run_details.id, { approve: "false" });
+                      },
+                      sx: { color: STATUS_COLORS.error },
+                      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_ThumbDown.default, { sx: { fontSize: 16 } })
+                    }
+                  ) }) })
+                ] }),
+                item.type === "agent" && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material12.Tooltip, { title: "Rerun the agent with the same input", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                  import_material12.IconButton,
+                  {
+                    size: "small",
+                    disabled: agentRequestLoading,
+                    onClick: onRerunAgent,
+                    sx: { color: "hsl(var(--muted-foreground))", "&:hover": { color: "hsl(var(--primary))" } },
+                    children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_RestartAlt2.default, { 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__ */ (0, import_jsx_runtime14.jsx)(import_material12.Tooltip, { title: "Rerun from this decision (clears all decisions after it)", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                    import_material12.IconButton,
+                    {
+                      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__ */ (0, import_jsx_runtime14.jsx)(import_RestartAlt2.default, { sx: { fontSize: 16 } })
+                    }
+                  ) }) });
+                })(),
+                item.type === "decision" && details?.run_details?.debug_url && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material12.Tooltip, { title: "Open debug URL", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                  import_material12.IconButton,
+                  {
+                    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__ */ (0, import_jsx_runtime14.jsx)(import_OpenInNew2.default, { sx: { fontSize: 16 } })
+                  }
+                ) }) })
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    questions.length > 0 && !runFinished && (item.status === "RUNNING" || item.status === "WAITING") && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material12.Box, { 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__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
+        questions.map((q, qi) => {
+          const value = questionAnswers[q.question]?.value || "";
+          const isMissing = submitAttempted && !value;
+          return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_material12.Box, { sx: { mt: 2 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material12.Box, { sx: { fontSize: "0.85rem", color: "hsl(var(--foreground))", mb: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_markdown4.default, { remarkPlugins: [import_remark_gfm4.default, import_remark_breaks.default], children: normalizeMarkdown(q.question) }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              import_material12.TextField,
+              {
+                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__ */ (0, import_jsx_runtime14.jsxs)(import_material12.Box, { sx: { display: "flex", alignItems: "center", gap: 1, mt: 2 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            import_material12.Button,
+            {
+              variant: "contained",
+              size: "small",
+              disabled: agentRequestLoading,
+              onClick: trySubmit,
+              children: agentRequestLoading ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material12.CircularProgress, { size: 16 }) : "Submit"
+            }
+          ),
+          details?.run_details?.id && getFormUrl && getFormUrl(details.run_details.id) && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material12.Tooltip, { title: "Answer in the Form UI", placement: "right", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            import_material12.IconButton,
+            {
+              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__ */ (0, import_jsx_runtime14.jsx)(import_OpenInNew2.default, { sx: { fontSize: 18 } })
+            }
+          ) })
+        ] })
+      ] });
+    })() }),
+    open && runFinished && questions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_material12.Box, { sx: { px: 4, pb: 2 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material12.Typography, { 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__ */ (0, import_jsx_runtime14.jsx)(import_material12.Box, { 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__ */ (0, import_jsx_runtime14.jsx)(import_material12.Box, { sx: { fontSize: "0.85rem", color: "hsl(var(--foreground))", "& p": { my: 0.5 } }, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_markdown4.default, { remarkPlugins: [import_remark_gfm4.default, import_remark_breaks.default], children: normalizeMarkdown(q.question) }) }, qi)) })
+    ] }),
+    open && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material12.Box, { sx: { px: 4, pb: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      import_material12.Box,
+      {
+        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__ */ (0, import_jsx_runtime14.jsx)(
+          import_react18_json_view.default,
+          {
+            src: deepParseJsonStrings(validate.result),
+            dark: true,
+            collapsed: 2,
+            collapseStringMode: "word",
+            collapseStringsAfterLength: 120,
+            enableClipboard: true,
+            displaySize: true
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material12.Box, { component: "pre", sx: { m: 0, fontSize: "0.72rem", color: "hsl(var(--foreground))" }, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("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 = (0, import_react11.useCallback)(
+    (path) => apiBaseUrl ? `${apiBaseUrl.replace(/\/+$/, "")}${path}` : getApiUrl(path),
+    [apiBaseUrl]
+  );
+  const resolveHeaders = (0, import_react11.useCallback)(() => {
+    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 = (0, import_react_router_dom2.useNavigate)();
+  const [actionInput, setActionInput] = (0, import_react11.useState)(defaultInput);
+  const BUILTIN_DEFAULT_APPS = [
+    { name: "http" },
+    { name: "shuffle_tools" }
+  ];
+  const [chosenApps, setChosenApps] = (0, import_react11.useState)(apps ?? defaultApps ?? BUILTIN_DEFAULT_APPS);
+  const [availableApps, setAvailableApps] = (0, import_react11.useState)([]);
+  const [appSearchOpen, setAppSearchOpen] = (0, import_react11.useState)(false);
+  const [agentRequestLoading, setAgentRequestLoading] = (0, import_react11.useState)(false);
+  const [execution, setExecution] = (0, import_react11.useState)(null);
+  const [agentData, setAgentData] = (0, import_react11.useState)({});
+  const [agentActionResult, setAgentActionResult] = (0, import_react11.useState)(null);
+  const [showStarter, setShowStarter] = (0, import_react11.useState)(true);
+  const [openIndexes, setOpenIndexes] = (0, import_react11.useState)(/* @__PURE__ */ new Set());
+  const [questionAnswers, setQuestionAnswers] = (0, import_react11.useState)({});
+  const [simpleSubmitAttempted, setSimpleSubmitAttempted] = (0, import_react11.useState)(false);
+  const [continuationText, setContinuationText] = (0, import_react11.useState)("");
+  const [error, setError] = (0, import_react11.useState)(null);
+  const [viewMode, setViewMode] = (0, import_react11.useState)("simple");
+  const [attachedImages, setAttachedImages] = (0, import_react11.useState)([]);
+  const [nowTick, setNowTick] = (0, import_react11.useState)(() => Math.floor(Date.now() / 1e3));
+  const [localRunStart, setLocalRunStart] = (0, import_react11.useState)(null);
+  const inputRef = (0, import_react11.useRef)(null);
+  const fileInputRef = (0, import_react11.useRef)(null);
+  const activeExecutionIdRef = (0, import_react11.useRef)(null);
+  const stateRef = (0, import_react11.useRef)({
+    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;
+  (0, import_react11.useEffect)(() => {
+    if (execution?.execution_id) {
+      setLocalRunStart((prev) => prev ?? Math.floor(Date.now() / 1e3));
+    } else if (!agentRequestLoading) {
+      setLocalRunStart(null);
+    }
+  }, [execution?.execution_id, agentRequestLoading]);
+  (0, import_react11.useEffect)(() => {
+    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 = (0, import_react11.useMemo)(() => {
+    const m = {};
+    for (const a of chosenApps) {
+      const slug = a.name.toLowerCase().replace(/\s+/g, "_").replace(/-/g, "_");
+      m[slug] = a;
+    }
+    return m;
+  }, [chosenApps]);
+  (0, import_react11.useEffect)(() => {
+    if (apps) setChosenApps(apps);
+  }, [apps]);
+  (0, import_react11.useEffect)(() => {
+    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]);
+  (0, import_react11.useEffect)(() => {
+    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 = (0, import_react11.useCallback)(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.");
+    }
+  }, []);
+  (0, import_react11.useEffect)(() => {
+    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]);
+  (0, import_react11.useEffect)(() => {
+    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 = (0, import_react11.useCallback)(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 = (0, import_react11.useRef)(false);
+  (0, import_react11.useEffect)(() => {
+    if (autoSubmit && defaultInput && !autoSubmittedRef.current && !executionId) {
+      autoSubmittedRef.current = true;
+      submitInput(defaultInput);
+    }
+  }, [autoSubmit, defaultInput, executionId, submitInput]);
+  const submitQuestions = (0, import_react11.useCallback)(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 = (0, import_react11.useCallback)(() => {
+    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 = (0, import_react11.useCallback)((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 = (0, import_react11.useCallback)(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 } = (0, import_react11.useMemo)(() => {
+    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__ */ (0, import_jsx_runtime14.jsxs)(import_material12.Box, { 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__ */ (0, import_jsx_runtime14.jsx)(import_material12.Box, { 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__ */ (0, import_jsx_runtime14.jsx)(
+        import_material12.Box,
+        {
+          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__ */ (0, import_jsx_runtime14.jsx)(import_material12.Tooltip, { title: "Reload execution data", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      import_material12.IconButton,
+      {
+        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__ */ (0, import_jsx_runtime14.jsx)(import_Refresh.default, { sx: { fontSize: 16 } })
+      }
+    ) }) })
+  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material12.Box, { sx: { width: "100%", display: "flex", justifyContent: "center", pb: 4 }, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_material12.Box, { sx: { width: "100%", maxWidth, display: "flex", flexDirection: "column", gap: 3 }, children: [
+    showRunSwitcher && tabBar,
+    showStarter ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+      import_material12.Box,
+      {
+        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__ */ (0, import_jsx_runtime14.jsx)(import_material12.Box, { 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__ */ (0, import_jsx_runtime14.jsx)(AgentIcon_default, { size: Math.round(heroIconSize * 0.67) }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material12.Typography, { 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__ */ (0, import_jsx_runtime14.jsx)(import_material12.Typography, { sx: {
+            fontSize: "0.95rem",
+            color: "hsl(var(--muted-foreground))",
+            textAlign: "center",
+            mt: -1,
+            maxWidth: 600
+          }, children: subtitle }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_material12.Box, { 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__ */ (0, import_jsx_runtime14.jsx)(import_material12.Box, { sx: { display: "flex", flexWrap: "wrap", gap: 0.75 }, children: attachedImages.map((img, idx) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_material12.Box, { 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__ */ (0, import_jsx_runtime14.jsx)(import_material12.Box, { component: "img", src: img.dataUrl, alt: img.name, sx: { width: 32, height: 32, borderRadius: 1, objectFit: "cover", flexShrink: 0 } }),
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material12.Typography, { sx: { fontSize: "0.72rem", color: "hsl(var(--foreground))", maxWidth: 190, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: img.name }),
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material12.IconButton, { 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__ */ (0, import_jsx_runtime14.jsx)(import_Close4.default, { sx: { fontSize: 12 } }) })
+            ] }, `${img.name}-${idx}`)) }),
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_material12.Box, { sx: { display: "flex", alignItems: "flex-end", gap: 1, width: "100%" }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                import_material12.InputBase,
+                {
+                  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__ */ (0, import_jsx_runtime14.jsx)(
+                "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__ */ (0, import_jsx_runtime14.jsx)(
+                import_material12.IconButton,
+                {
+                  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__ */ (0, import_jsx_runtime14.jsx)(import_AttachFile.default, { sx: { fontSize: 18 } })
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material12.Tooltip, { title: submitTooltip, placement: "top", arrow: true, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                import_material12.IconButton,
+                {
+                  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__ */ (0, import_jsx_runtime14.jsx)(import_material12.CircularProgress, { size: 16, sx: { color: "inherit" } }) : submitIcon ?? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_PlayArrowRounded2.default, {})
+                }
+              ) }) })
+            ] })
+          ] }),
+          !hideAppPicker && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material12.Box, { sx: { display: "flex", justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_material12.Box, { 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__ */ (0, import_jsx_runtime14.jsxs)(
+              import_material12.Box,
+              {
+                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__ */ (0, import_jsx_runtime14.jsx)(import_Add2.default, { sx: { fontSize: 14 } }),
+                  appPickerLabel
+                ]
+              }
+            ),
+            chosenApps.map((app, i) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+              import_material12.Box,
+              {
+                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__ */ (0, import_jsx_runtime14.jsx)(
+                    import_material12.Avatar,
+                    {
+                      src: app.icon || void 0,
+                      alt: app.name,
+                      variant: "rounded",
+                      sx: { width: 18, height: 18, bgcolor: "transparent" }
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material12.Typography, { sx: { fontSize: "0.8rem", mx: 0.25, textTransform: "capitalize" }, children: app.name.replace(/_/g, " ") }),
+                  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                    import_material12.IconButton,
+                    {
+                      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__ */ (0, import_jsx_runtime14.jsx)(import_Close4.default, { sx: { fontSize: 12 } })
+                    }
+                  )
+                ]
+              },
+              `${app.name}-${i}`
+            ))
+          ] }) }),
+          error && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material12.Box, { 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__ */ (0, import_jsx_runtime14.jsxs)(import_material12.Box, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_material12.Box, { 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__ */ (0, import_jsx_runtime14.jsxs)(import_material12.Box, { sx: { flex: 1, minWidth: 0 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material12.Typography, { sx: { fontSize: "0.85rem", color: "hsl(var(--foreground))", fontWeight: 600, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: agentData?.original_input || actionInput || "Agent run" }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_material12.Typography, { sx: { fontSize: "0.7rem", color: "hsl(var(--muted-foreground))" }, children: [
+            "Status: ",
+            execution?.status || agentData?.status || "\u2014",
+            " \xB7 ",
+            execution?.execution_id?.slice(0, 8) || ""
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material12.AvatarGroup, { max: 6, sx: { "& .MuiAvatar-root": { width: 28, height: 28, borderColor: "hsl(var(--border))" } }, children: chosenApps.map((app, i) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material12.Tooltip, { title: app.name.replace(/_/g, " "), children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          import_material12.Avatar,
+          {
+            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__ */ (0, import_jsx_runtime14.jsx)(import_material12.Box, { 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__ */ (0, import_jsx_runtime14.jsx)(import_material12.Box, { 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__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_material12.Box, { sx: { display: "flex", alignItems: "center", gap: 1, flexWrap: "wrap" }, children: [
+            isRunning ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material12.CircularProgress, { size: 16, sx: { color: "hsl(var(--primary))" } }) : status === "FINISHED" ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_CheckCircle3.default, { sx: { fontSize: 18, color: "hsl(142 70% 45%)" } }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_Error.default, { sx: { fontSize: 18, color: "hsl(var(--destructive))" } }),
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material12.Typography, { sx: { fontSize: "0.9rem", fontWeight: 600, color: "hsl(var(--foreground))" }, children: isRunning ? "Agent is working\u2026" : status === "FINISHED" ? "Run finished" : `Run ${status.toLowerCase()}` }),
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_material12.Typography, { sx: { fontSize: "0.75rem", color: "hsl(var(--muted-foreground))" }, children: [
+              decisionCount,
+              " step",
+              decisionCount === 1 ? "" : "s",
+              durationSec != null ? ` \xB7 ${durationSec}s` : ""
+            ] })
+          ] }),
+          finishAnswer ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material12.Box, { 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__ */ (0, import_jsx_runtime14.jsx)(import_react_markdown4.default, { remarkPlugins: [import_remark_gfm4.default, import_remark_breaks.default], 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__ */ (0, import_jsx_runtime14.jsxs)(import_material12.Box, { 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__ */ (0, import_jsx_runtime14.jsxs)(import_material12.Box, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material12.Box, { sx: { fontSize: "0.9rem", color: "hsl(var(--foreground))", mb: 1, "& p": { my: 0.5 } }, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_markdown4.default, { remarkPlugins: [import_remark_gfm4.default, import_remark_breaks.default], children: normalizeMarkdown(q.question) }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                    import_material12.TextField,
+                    {
+                      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__ */ (0, import_jsx_runtime14.jsxs)(import_material12.Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                  import_material12.Button,
+                  {
+                    variant: "contained",
+                    size: "small",
+                    disabled: agentRequestLoading,
+                    onClick: trySimpleSubmit,
+                    children: agentRequestLoading ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material12.CircularProgress, { size: 16 }) : "Submit"
+                  }
+                ),
+                pendingAsk.run_details?.id && getFormUrl(pendingAsk.run_details.id) && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material12.Tooltip, { title: "Answer in the Form UI", placement: "right", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                  import_material12.IconButton,
+                  {
+                    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__ */ (0, import_jsx_runtime14.jsx)(import_OpenInNew2.default, { sx: { fontSize: 18 } })
+                  }
+                ) })
+              ] })
+            ] });
+          })() : isRunning ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material12.Typography, { sx: { fontSize: "0.85rem", color: "hsl(var(--muted-foreground))" }, children: "Waiting for the agent to produce the first step." }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material12.Typography, { sx: { fontSize: "0.85rem", color: "hsl(var(--muted-foreground))" }, children: "No final answer was returned. Open Detailed to inspect each step." }),
+          !isRunning && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material12.Box, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            import_material12.Button,
+            {
+              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__ */ (0, import_jsx_runtime14.jsx)(import_material12.Box, { sx: {
+          borderRadius: 2,
+          border: "1px solid hsl(var(--border))",
+          bgcolor: "hsl(var(--card))",
+          overflow: "hidden"
+        }, children: timeline.length === 0 || timeline.length === 1 && agentRequestLoading ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_material12.Box, { sx: { p: 4, textAlign: "center", color: "hsl(var(--muted-foreground))", fontSize: "0.85rem" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material12.CircularProgress, { size: 20, sx: { mb: 1 } }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material12.Typography, { sx: { fontSize: "0.85rem" }, children: "Waiting for agent response\u2026" })
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
+          timeline.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            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__ */ (0, import_jsx_runtime14.jsxs)(import_material12.Box, { 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__ */ (0, import_jsx_runtime14.jsxs)(import_material12.Box, { sx: { display: "flex", alignItems: "center", gap: 1, flexWrap: "wrap" }, children: [
+              detailedStatus === "FINISHED" ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_CheckCircle3.default, { sx: { fontSize: 18, color: "hsl(142 70% 45%)" } }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_Error.default, { sx: { fontSize: 18, color: "hsl(var(--destructive))" } }),
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material12.Typography, { sx: { fontSize: "0.9rem", fontWeight: 600, color: "hsl(var(--foreground))" }, children: detailedStatus === "FINISHED" ? "Run finished" : `Run ${detailedStatus.toLowerCase()}` })
+            ] }),
+            finishAnswer && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material12.Box, { 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__ */ (0, import_jsx_runtime14.jsx)(import_react_markdown4.default, { remarkPlugins: [import_remark_gfm4.default, import_remark_breaks.default], children: normalizeMarkdown(finishAnswer) }) })
+          ] })
+        ] }) });
+      })(),
+      finishDecisionId && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material12.Box, { sx: { mt: 3, display: "flex", justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_material12.Box, { sx: { width: "100%", maxWidth: 640 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material12.Typography, { sx: { fontSize: "0.75rem", color: "hsl(var(--muted-foreground))", mb: 0.75, textAlign: "center" }, children: "Continue this agent run with more details" }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+          import_material12.Box,
+          {
+            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__ */ (0, import_jsx_runtime14.jsx)(
+                import_material12.InputBase,
+                {
+                  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__ */ (0, import_jsx_runtime14.jsx)(
+                import_material12.IconButton,
+                {
+                  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__ */ (0, import_jsx_runtime14.jsx)(import_material12.CircularProgress, { size: 16, sx: { color: "inherit" } }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_Send.default, { sx: { fontSize: 18 } })
+                }
+              )
+            ]
+          }
+        )
+      ] }) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      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
+var import_react12 = require("react");
+var norm = (s) => s.toLowerCase().replace(/[\s_\-]+/g, "_");
+function useAppLookup(appName) {
+  const [loading, setLoading] = (0, import_react12.useState)(false);
+  const [info, setInfo] = (0, import_react12.useState)(null);
+  const [algoliaId, setAlgoliaId] = (0, import_react12.useState)(null);
+  const {
+    authStates,
+    authenticatedApps,
+    handleAuthChange,
+    handleTestConnection,
+    handleSaveAuth,
+    refreshAuth
+  } = useAppAuth();
+  (0, import_react12.useEffect)(() => {
     if (!appName) {
       setInfo(null);
       setAlgoliaId(null);
@@ -5611,13 +7622,13 @@ function useAppLookup(appName) {
       setLoading(false);
     })();
   }, [appName]);
-  const matchingEntries = (0, import_react11.useMemo)(() => {
+  const matchingEntries = (0, import_react12.useMemo)(() => {
     if (!appName) return [];
     return authenticatedApps.filter(
       (auth) => auth.app?.name && norm(auth.app.name) === norm(appName)
     );
   }, [appName, authenticatedApps]);
-  const image = (0, import_react11.useMemo)(() => {
+  const image = (0, import_react12.useMemo)(() => {
     if (info?.image) return info.image;
     for (const entry of matchingEntries) {
       const img = entry.app?.large_image || entry.large_image;
@@ -5625,7 +7636,7 @@ function useAppLookup(appName) {
     }
     return "";
   }, [info, matchingEntries]);
-  const algoliaApp = (0, import_react11.useMemo)(() => {
+  const algoliaApp = (0, import_react12.useMemo)(() => {
     if (!appName) return null;
     return {
       objectID: algoliaId || appName,
@@ -5658,6 +7669,7 @@ function useAppLookup(appName) {
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   API_CONFIG,
+  AgentUI,
   AppAuthSection,
   AppDetailDrawer,
   AppDetailProvider,