@shuffleio/shuffle-mcps 0.0.7 → 0.0.8

package/dist/index.cjs

@@ -30,6 +30,9 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   API_CONFIG: () => API_CONFIG,
+  AgentActivityList: () => AgentActivityList_default,
+  AgentExecutionDrawer: () => AgentExecutionDrawer_default,
+  AgentRunDrawer: () => AgentRunDrawer_default,
   AgentUI: () => AgentUI_default,
   AppAuthSection: () => AppAuthSection,
   AppDetailDrawer: () => AppDetailDrawer,
@@ -45,6 +48,7 @@ __export(index_exports, {
   getApiUrl: () => getApiUrl,
   getAuthHeader: () => getAuthHeader,
   refreshAllIntegrationStatus: () => refreshAllIntegrationStatus,
+  searchAgentActivity: () => searchAgentActivity,
   setToastImpl: () => setToastImpl,
   toast: () => toast,
   useAppAuth: () => useAppAuth,
@@ -52,6 +56,7 @@ __export(index_exports, {
   useAppLookup: () => useAppLookup
 });
 module.exports = __toCommonJS(index_exports);
+var import_shuffle_mcp2 = require("./shuffle-mcp-24XBNRGE.css");
 
 // ShuffleMCP.tsx
 var import_react9 = __toESM(require("react"), 1);
@@ -443,6 +448,50 @@ var fetchAuthenticatedApps = (crossOrgId) => {
   return promise;
 };
 
+// appsCache.ts
+var TTL_MS2 = 3e4;
+var cache2 = /* @__PURE__ */ new Map();
+var cacheKey2 = (o) => `${o.baseUrl}|${o.path || "/api/v1/apps"}|${o.apiKey || ""}|${o.orgId || ""}`;
+var doFetch2 = async (o) => {
+  const headers = {};
+  if (o.apiKey) headers["Authorization"] = `Bearer ${o.apiKey}`;
+  if (o.orgId) headers["Org-Id"] = o.orgId;
+  const response = await fetch(`${o.baseUrl}${o.path || "/api/v1/apps"}`, {
+    credentials: "include",
+    headers
+  });
+  if (!response.ok) return [];
+  const data = await response.json();
+  if (Array.isArray(data)) return data;
+  return Array.isArray(data?.data) ? data.data : [];
+};
+var fetchApps = (opts) => {
+  const key = cacheKey2(opts);
+  const entry = cache2.get(key) || {};
+  if (entry.data && entry.fetchedAt && Date.now() - entry.fetchedAt < TTL_MS2) {
+    return Promise.resolve(entry.data);
+  }
+  if (entry.promise) return entry.promise;
+  const promise = doFetch2(opts).then((data) => {
+    cache2.set(key, { data, fetchedAt: Date.now() });
+    return data;
+  }).catch((err) => {
+    cache2.delete(key);
+    throw err;
+  });
+  cache2.set(key, { ...entry, promise });
+  return promise;
+};
+var fetchAppsViaApiConfig = () => {
+  const headers = getAuthHeader();
+  const orgId = headers["Org-Id"] || null;
+  return fetchApps({
+    baseUrl: API_CONFIG.baseUrl,
+    apiKey: API_CONFIG.apiKey,
+    orgId
+  });
+};
+
 // auth-utils.ts
 function deduplicateAuthApps(apps) {
   const appMap = /* @__PURE__ */ new Map();
@@ -611,35 +660,25 @@ var IntegrationStatus = ({ collapsed, filterApps, onAddClick, iconSize = 26, onD
       }
       if (dedupedIntegrations.length < 10) {
         try {
-          const controller = new AbortController();
-          const timeout = setTimeout(() => controller.abort(), 5e3);
-          const appsResponse = await fetch(getApiUrl("/api/v1/apps"), {
-            credentials: "include",
-            headers: { ...getAuthHeader() },
-            signal: controller.signal
-          });
-          clearTimeout(timeout);
-          if (appsResponse.ok) {
-            const appsData = await appsResponse.json();
-            if (Array.isArray(appsData)) {
-              const activatedApps = appsData.filter((app) => app.activated);
-              const slotsRemaining = 10 - dedupedIntegrations.length;
-              let added = 0;
-              for (const app of activatedApps) {
-                if (added >= slotsRemaining) break;
-                if (!authNameSet.has((app.name || "").toLowerCase())) {
-                  authNameSet.add((app.name || "").toLowerCase());
-                  dedupedIntegrations.push({
-                    id: app.id || app.name,
-                    name: app.name,
-                    icon: app.large_image || "",
-                    category: app.categories?.[0] || "Integration",
-                    hasValidAuth: false,
-                    authInstances: [],
-                    isActiveOnly: true
-                  });
-                  added++;
-                }
+          const appsData = await fetchAppsViaApiConfig();
+          if (Array.isArray(appsData)) {
+            const activatedApps = appsData.filter((app) => app.activated);
+            const slotsRemaining = 10 - dedupedIntegrations.length;
+            let added = 0;
+            for (const app of activatedApps) {
+              if (added >= slotsRemaining) break;
+              if (!authNameSet.has((app.name || "").toLowerCase())) {
+                authNameSet.add((app.name || "").toLowerCase());
+                dedupedIntegrations.push({
+                  id: app.id || app.name,
+                  name: app.name,
+                  icon: app.large_image || "",
+                  category: app.categories?.[0] || "Integration",
+                  hasValidAuth: false,
+                  authInstances: [],
+                  isActiveOnly: true
+                });
+                added++;
               }
             }
           }
@@ -1264,8 +1303,8 @@ function AppTitleHeader({
               py: 0.5,
               minHeight: 0,
               flexShrink: 0,
-              bgcolor: "#FF6600",
-              "&:hover": { bgcolor: "#e55c00" }
+              bgcolor: "hsl(var(--primary))",
+              "&:hover": { bgcolor: "hsl(var(--primary) / 0.85)" }
             },
             children: "+ Add"
           }
@@ -1286,7 +1325,7 @@ function AppTitleHeader({
               py: 0.5,
               minHeight: 0,
               flexShrink: 0,
-              ...isActivated ? { color: "hsl(var(--muted-foreground))", borderColor: "hsl(var(--border))", "&:hover": { borderColor: "hsl(var(--destructive))", color: "hsl(var(--destructive))", bgcolor: "hsla(var(--destructive) / 0.08)" } } : { bgcolor: "#FF6600", "&:hover": { bgcolor: "#e55c00" } }
+              ...isActivated ? { color: "hsl(var(--muted-foreground))", borderColor: "hsl(var(--border))", "&:hover": { borderColor: "hsl(var(--destructive))", color: "hsl(var(--destructive))", bgcolor: "hsla(var(--destructive) / 0.08)" } } : { bgcolor: "hsl(var(--primary))", "&:hover": { bgcolor: "hsl(var(--primary) / 0.85)" } }
             },
             children: activateLoading ? "\u2026" : isActivated ? "Deactivate" : "Activate"
           }
@@ -1354,7 +1393,10 @@ var AppAuthCard = ({
   apiAuthEntries,
   onSelectAuth,
   onRefreshAuth,
-  disableUrlPrefill
+  disableUrlPrefill,
+  hideHeader,
+  hideStatusChips,
+  hideDocsLink
 }) => {
   const getBestDefaultAuth = (entries) => {
     if (entries.length === 0) return ADD_NEW_AUTH;
@@ -1574,6 +1616,22 @@ var AppAuthCard = ({
       setLocalCredentials((prev) => ({ ...urlDefaults, ...prev }));
     }
   }, [auth?.parameters, disableUrlPrefill]);
+  (0, import_react4.useEffect)(() => {
+    const incoming = authState.credentials || {};
+    setLocalCredentials((prev) => {
+      let changed = false;
+      const next = { ...prev };
+      for (const [k, v] of Object.entries(incoming)) {
+        const lk = k.toLowerCase();
+        const isUrlish = lk.includes("url") || lk.includes("endpoint") || lk.includes("host");
+        if (isUrlish && typeof v === "string" && v !== prev[k]) {
+          next[k] = v;
+          changed = true;
+        }
+      }
+      return changed ? next : prev;
+    });
+  }, [authState.credentials]);
   const [docsOpen, setDocsOpen] = (0, import_react4.useState)(false);
   const [docsContent, setDocsContent] = (0, import_react4.useState)("");
   const [docsLoading, setDocsLoading] = (0, import_react4.useState)(false);
@@ -1647,10 +1705,9 @@ var AppAuthCard = ({
   const renderOAuth2Fields = () => {
     if (!auth || !isOAuth2) return null;
     const availableScopes = auth.scope || [];
-    const isCloudOrDev = isDevEnvironment() || isCloudDomain();
     const hasManualCredentials = !!localCredentials["client_id"]?.trim() && !!localCredentials["client_secret"]?.trim();
     return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_material3.Box, { sx: { display: "flex", flexDirection: "column", gap: 3 }, children: [
-      isCloudOrDev && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_material3.Collapse, { in: !hasManualCredentials, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_material3.Box, { sx: { display: "flex", flexDirection: "column", gap: 3 }, children: [
           /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
             import_material3.Button,
@@ -1837,7 +1894,7 @@ var AppAuthCard = ({
         {
           label: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_material3.Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
             param.name,
-            param.required && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_material3.Typography, { component: "span", sx: { color: "#ef4444", fontSize: "0.8rem" }, children: "*" })
+            param.required && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_material3.Typography, { component: "span", sx: { color: "hsl(var(--destructive))", fontSize: "0.8rem" }, children: "*" })
           ] }),
           type: param.name.toLowerCase().includes("password") || param.name.toLowerCase().includes("secret") || param.name.toLowerCase().includes("key") ? "password" : "text",
           placeholder: param.example || `Enter ${param.name}`,
@@ -1851,13 +1908,13 @@ var AppAuthCard = ({
             "& .MuiOutlinedInput-root": {
               backgroundColor: "hsl(var(--muted))",
               borderRadius: 2,
-              "& fieldset": { borderColor: fieldErrors[fieldKey] ? "#ef4444" : "hsl(var(--border))" },
-              "&:hover fieldset": { borderColor: fieldErrors[fieldKey] ? "#ef4444" : "hsl(var(--border))" },
-              "&.Mui-focused fieldset": { borderColor: fieldErrors[fieldKey] ? "#ef4444" : "hsl(var(--primary))" }
+              "& fieldset": { borderColor: fieldErrors[fieldKey] ? "hsl(var(--destructive))" : "hsl(var(--border))" },
+              "&:hover fieldset": { borderColor: fieldErrors[fieldKey] ? "hsl(var(--destructive))" : "hsl(var(--border))" },
+              "&.Mui-focused fieldset": { borderColor: fieldErrors[fieldKey] ? "hsl(var(--destructive))" : "hsl(var(--primary))" }
             },
             "& .MuiInputBase-input": { color: "hsl(var(--foreground))" },
             "& .MuiInputLabel-root": { color: "hsl(var(--muted-foreground))" },
-            "& .MuiFormHelperText-root": { color: fieldErrors[fieldKey] ? "#ef4444" : "hsl(var(--muted-foreground))" }
+            "& .MuiFormHelperText-root": { color: fieldErrors[fieldKey] ? "hsl(var(--destructive))" : "hsl(var(--muted-foreground))" }
           }
         },
         fieldKey
@@ -1931,7 +1988,7 @@ var AppAuthCard = ({
           maxWidth: "100%"
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+          !hideHeader && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
             import_material3.CardContent,
             {
               onClick: onToggle,
@@ -2020,7 +2077,7 @@ var AppAuthCard = ({
                   width: { xs: "100%", sm: "auto" },
                   justifyContent: { xs: "flex-start", sm: "flex-end" }
                 }, children: [
-                  isNoAuthRequired(auth) ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  !hideStatusChips && (isNoAuthRequired(auth) ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                     import_material3.Chip,
                     {
                       label: "Auth not required",
@@ -2071,8 +2128,8 @@ var AppAuthCard = ({
                         )
                       }
                     )
-                  ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_material3.Tooltip, { title: "View documentation", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  ] })),
+                  !hideDocsLink && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_material3.Tooltip, { title: "View documentation", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                     import_material3.IconButton,
                     {
                       size: "small",
@@ -2352,8 +2409,8 @@ var AppAuthCard = ({
                         width: 8,
                         height: 8,
                         borderRadius: "50%",
-                        backgroundColor: localTestStatus === "success" ? "#22c55e" : localTestStatus === "pending_validation" ? "#f59e0b" : localTestStatus === "error" ? "#ef4444" : "#9ca3af",
-                        boxShadow: localTestStatus === "success" ? "0 0 8px rgba(34, 197, 94, 0.6)" : localTestStatus === "pending_validation" ? "0 0 8px rgba(245, 158, 11, 0.6)" : localTestStatus === "error" ? "0 0 8px rgba(239, 68, 68, 0.6)" : "0 0 8px rgba(156, 163, 175, 0.4)"
+                        backgroundColor: localTestStatus === "success" ? "hsl(var(--severity-low))" : localTestStatus === "pending_validation" ? "hsl(var(--severity-medium))" : localTestStatus === "error" ? "hsl(var(--destructive))" : "hsl(var(--muted-foreground))",
+                        boxShadow: localTestStatus === "success" ? "0 0 8px hsl(var(--severity-low) / 0.6)" : localTestStatus === "pending_validation" ? "0 0 8px hsl(var(--severity-medium) / 0.6)" : localTestStatus === "error" ? "0 0 8px hsl(var(--destructive) / 0.6)" : "0 0 8px hsl(var(--muted-foreground) / 0.4)"
                       } }),
                       /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_material3.Typography, { sx: {
                         color: "hsl(var(--muted-foreground))",
@@ -2384,11 +2441,11 @@ var AppAuthCard = ({
                           display: "flex",
                           alignItems: "center",
                           justifyContent: "center",
-                          backgroundColor: localTestStatus === "success" ? "rgba(34, 197, 94, 0.1)" : localTestStatus === "error" ? "rgba(239, 68, 68, 0.1)" : localTestStatus === "pending_validation" ? "rgba(245, 158, 11, 0.1)" : isTested ? "rgba(34, 197, 94, 0.1)" : isConfigured ? "rgba(245, 158, 11, 0.1)" : "rgba(156, 163, 175, 0.1)",
-                          border: `1px solid ${localTestStatus === "success" ? "rgba(34, 197, 94, 0.2)" : localTestStatus === "pending_validation" ? "rgba(245, 158, 11, 0.2)" : localTestStatus === "error" ? "rgba(239, 68, 68, 0.2)" : isTested ? "rgba(34, 197, 94, 0.2)" : isConfigured ? "rgba(245, 158, 11, 0.2)" : "rgba(156, 163, 175, 0.2)"}`,
+                          backgroundColor: localTestStatus === "success" ? "hsl(var(--severity-low) / 0.1)" : localTestStatus === "error" ? "hsl(var(--destructive) / 0.1)" : localTestStatus === "pending_validation" ? "hsl(var(--severity-medium) / 0.1)" : isTested ? "hsl(var(--severity-low) / 0.1)" : isConfigured ? "hsl(var(--severity-medium) / 0.1)" : "hsl(var(--muted-foreground) / 0.1)",
+                          border: `1px solid ${localTestStatus === "success" ? "hsl(var(--severity-low) / 0.2)" : localTestStatus === "pending_validation" ? "hsl(var(--severity-medium) / 0.2)" : localTestStatus === "error" ? "hsl(var(--destructive) / 0.2)" : isTested ? "hsl(var(--severity-low) / 0.2)" : isConfigured ? "hsl(var(--severity-medium) / 0.2)" : "hsl(var(--muted-foreground) / 0.2)"}`,
                           flexShrink: 0
                         }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_CheckCircle2.default, { sx: {
-                          color: localTestStatus === "success" ? "#22c55e" : localTestStatus === "pending_validation" ? "#f59e0b" : localTestStatus === "error" ? "#ef4444" : isTested ? "#22c55e" : isConfigured ? "#f59e0b" : "#9ca3af",
+                          color: localTestStatus === "success" ? "hsl(var(--severity-low))" : localTestStatus === "pending_validation" ? "hsl(var(--severity-medium))" : localTestStatus === "error" ? "hsl(var(--destructive))" : isTested ? "hsl(var(--severity-low))" : isConfigured ? "hsl(var(--severity-medium))" : "hsl(var(--muted-foreground))",
                           fontSize: 20
                         } }) }),
                         /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_material3.Box, { sx: { minWidth: 0, flex: 1 }, children: [
@@ -2482,7 +2539,7 @@ var AppAuthCard = ({
                             ) })
                           ] }) }),
                           /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_material3.Typography, { sx: {
-                            color: localTestStatus === "success" ? "#22c55e" : localTestStatus === "pending_validation" ? "#f59e0b" : localTestStatus === "error" ? "#ef4444" : isTested ? "#22c55e" : isConfigured ? "#f59e0b" : "hsl(var(--muted-foreground))",
+                            color: localTestStatus === "success" ? "hsl(var(--severity-low))" : localTestStatus === "pending_validation" ? "hsl(var(--severity-medium))" : localTestStatus === "error" ? "hsl(var(--destructive))" : isTested ? "hsl(var(--severity-low))" : isConfigured ? "hsl(var(--severity-medium))" : "hsl(var(--muted-foreground))",
                             fontSize: "0.75rem",
                             mt: 0.25,
                             fontWeight: localTestStatus !== "untested" || isTested || isConfigured ? 500 : 400
@@ -2502,9 +2559,9 @@ var AppAuthCard = ({
                           disabled: authState.status === "testing",
                           startIcon: authState.status === "testing" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_material3.CircularProgress, { size: 16, sx: { color: "inherit" } }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_CheckCircle2.default, { sx: { fontSize: 18 } }),
                           sx: {
-                            borderColor: authState.status === "testing" ? "transparent" : "rgba(255, 102, 0, 0.5)",
+                            borderColor: authState.status === "testing" ? "transparent" : "hsl(var(--primary) / 0.5)",
                             color: authState.status === "testing" ? "hsl(var(--foreground))" : "hsl(var(--primary))",
-                            background: authState.status === "testing" ? "linear-gradient(90deg, rgba(255, 102, 0, 0.3) 0%, rgba(255, 102, 0, 0.5) 50%, rgba(255, 102, 0, 0.3) 100%)" : "transparent",
+                            background: authState.status === "testing" ? "linear-gradient(90deg, hsl(var(--primary) / 0.3) 0%, hsl(var(--primary) / 0.5) 50%, hsl(var(--primary) / 0.3) 100%)" : "transparent",
                             backgroundSize: authState.status === "testing" ? "200% 100%" : "auto",
                             animation: authState.status === "testing" ? "shimmer 1.5s infinite linear" : "none",
                             fontWeight: 600,
@@ -2522,7 +2579,7 @@ var AppAuthCard = ({
                             },
                             "&:hover": {
                               borderColor: "hsl(var(--primary))",
-                              backgroundColor: authState.status === "testing" ? void 0 : "rgba(255, 102, 0, 0.08)"
+                              backgroundColor: authState.status === "testing" ? void 0 : "hsl(var(--primary) / 0.08)"
                             },
                             "&.Mui-disabled": {
                               color: authState.status === "testing" ? "hsl(var(--foreground))" : "hsl(var(--muted-foreground))",
@@ -2541,11 +2598,11 @@ var AppAuthCard = ({
                       {
                         severity: "error",
                         sx: {
-                          backgroundColor: "rgba(239, 68, 68, 0.1)",
-                          color: "#ef4444",
-                          border: "1px solid rgba(239, 68, 68, 0.2)",
+                          backgroundColor: "hsl(var(--destructive) / 0.1)",
+                          color: "hsl(var(--destructive))",
+                          border: "1px solid hsl(var(--destructive) / 0.2)",
                           borderRadius: 2,
-                          "& .MuiAlert-icon": { color: "#ef4444" }
+                          "& .MuiAlert-icon": { color: "hsl(var(--destructive))" }
                         },
                         children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_material3.Box, { sx: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 2, width: "100%" }, children: [
                           /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_material3.Typography, { sx: { fontSize: "0.875rem", flex: 1 }, children: localTestMessages.errorMessage }),
@@ -2558,16 +2615,16 @@ var AppAuthCard = ({
                               target: "_blank",
                               rel: "noopener noreferrer",
                               sx: {
-                                borderColor: "rgba(239, 68, 68, 0.5)",
-                                color: "#ef4444",
+                                borderColor: "hsl(var(--destructive) / 0.5)",
+                                color: "hsl(var(--destructive))",
                                 textTransform: "none",
                                 fontSize: "0.75rem",
                                 py: 0.5,
                                 px: 1.5,
                                 flexShrink: 0,
                                 "&:hover": {
-                                  borderColor: "#ef4444",
-                                  backgroundColor: "rgba(239, 68, 68, 0.1)"
+                                  borderColor: "hsl(var(--destructive))",
+                                  backgroundColor: "hsl(var(--destructive) / 0.1)"
                                 }
                               },
                               children: "View Execution"
@@ -2584,12 +2641,12 @@ var AppAuthCard = ({
                       {
                         severity: localTestMessages.warningMessage ? "warning" : "success",
                         sx: {
-                          backgroundColor: localTestMessages.warningMessage ? "rgba(245, 158, 11, 0.1)" : "rgba(34, 197, 94, 0.1)",
-                          color: localTestMessages.warningMessage ? "#f59e0b" : "#22c55e",
-                          border: localTestMessages.warningMessage ? "1px solid rgba(245, 158, 11, 0.2)" : "1px solid rgba(34, 197, 94, 0.2)",
+                          backgroundColor: localTestMessages.warningMessage ? "hsl(var(--severity-medium) / 0.1)" : "hsl(var(--severity-low) / 0.1)",
+                          color: localTestMessages.warningMessage ? "hsl(var(--severity-medium))" : "hsl(var(--severity-low))",
+                          border: localTestMessages.warningMessage ? "1px solid hsl(var(--severity-medium) / 0.2)" : "1px solid hsl(var(--severity-low) / 0.2)",
                           borderRadius: 2,
                           "& .MuiAlert-icon": {
-                            color: localTestMessages.warningMessage ? "#f59e0b" : "#22c55e"
+                            color: localTestMessages.warningMessage ? "hsl(var(--severity-medium))" : "hsl(var(--severity-low))"
                           }
                         },
                         children: localTestMessages.warningMessage ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_material3.Box, { children: [
@@ -2606,11 +2663,11 @@ var AppAuthCard = ({
                       {
                         severity: "warning",
                         sx: {
-                          backgroundColor: "rgba(245, 158, 11, 0.1)",
-                          color: "#f59e0b",
-                          border: "1px solid rgba(245, 158, 11, 0.2)",
+                          backgroundColor: "hsl(var(--severity-medium) / 0.1)",
+                          color: "hsl(var(--severity-medium))",
+                          border: "1px solid hsl(var(--severity-medium) / 0.2)",
                           borderRadius: 2,
-                          "& .MuiAlert-icon": { color: "#f59e0b" }
+                          "& .MuiAlert-icon": { color: "hsl(var(--severity-medium))" }
                         },
                         children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_material3.Box, { children: [
                           /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_material3.Typography, { sx: { fontWeight: 600, mb: 0.5 }, children: "Test passed (Status 200), but not marked as validated" }),
@@ -2621,7 +2678,7 @@ var AppAuthCard = ({
                               href: `${API_CONFIG.baseUrl}/admin?tab=app_auth`,
                               target: "_blank",
                               sx: {
-                                color: "#f59e0b",
+                                color: "hsl(var(--severity-medium))",
                                 fontWeight: 500,
                                 fontSize: "0.85rem",
                                 textDecoration: "underline",
@@ -2646,12 +2703,12 @@ var AppAuthCard = ({
                     {
                       severity: "warning",
                       sx: {
-                        backgroundColor: "rgba(245, 158, 11, 0.1)",
-                        color: "#f59e0b",
-                        border: "1px solid rgba(245, 158, 11, 0.2)",
+                        backgroundColor: "hsl(var(--severity-medium) / 0.1)",
+                        color: "hsl(var(--severity-medium))",
+                        border: "1px solid hsl(var(--severity-medium) / 0.2)",
                         borderRadius: 2,
                         mb: 2,
-                        "& .MuiAlert-icon": { color: "#f59e0b" }
+                        "& .MuiAlert-icon": { color: "hsl(var(--severity-medium))" }
                       },
                       children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_material3.Typography, { sx: { fontSize: "0.875rem" }, children: localTestMessages.errorCode === 401 ? "Previous credentials were invalid or expired. Please enter new credentials." : "Access was denied with the previous credentials. Please re-authenticate with valid permissions." })
                     }
@@ -2665,9 +2722,9 @@ var AppAuthCard = ({
                     {
                       severity: "error",
                       sx: {
-                        backgroundColor: "rgba(239, 68, 68, 0.1)",
-                        color: "#ef4444",
-                        border: "1px solid rgba(239, 68, 68, 0.3)",
+                        backgroundColor: "hsl(var(--destructive) / 0.1)",
+                        color: "hsl(var(--destructive))",
+                        border: "1px solid hsl(var(--destructive) / 0.3)",
                         borderRadius: 2
                       },
                       children: error
@@ -2677,11 +2734,11 @@ var AppAuthCard = ({
                     {
                       severity: "info",
                       sx: {
-                        backgroundColor: "rgba(59, 130, 246, 0.1)",
-                        color: "#3b82f6",
-                        border: "1px solid rgba(59, 130, 246, 0.2)",
+                        backgroundColor: "hsl(var(--severity-info) / 0.1)",
+                        color: "hsl(var(--severity-info))",
+                        border: "1px solid hsl(var(--severity-info) / 0.2)",
                         borderRadius: 2,
-                        "& .MuiAlert-icon": { color: "#3b82f6" }
+                        "& .MuiAlert-icon": { color: "hsl(var(--severity-info))" }
                       },
                       children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_material3.Box, { children: [
                         /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_material3.Typography, { sx: { fontWeight: 600, mb: 0.5 }, children: "No authentication required" }),
@@ -2696,9 +2753,9 @@ var AppAuthCard = ({
                       {
                         severity: "error",
                         sx: {
-                          backgroundColor: "rgba(239, 68, 68, 0.1)",
-                          color: "#ef4444",
-                          border: "1px solid rgba(239, 68, 68, 0.3)",
+                          backgroundColor: "hsl(var(--destructive) / 0.1)",
+                          color: "hsl(var(--destructive))",
+                          border: "1px solid hsl(var(--destructive) / 0.3)",
                           borderRadius: 2
                         },
                         children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_material3.Box, { sx: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 2, width: "100%" }, children: [
@@ -2712,16 +2769,16 @@ var AppAuthCard = ({
                               target: "_blank",
                               rel: "noopener noreferrer",
                               sx: {
-                                borderColor: "rgba(239, 68, 68, 0.5)",
-                                color: "#ef4444",
+                                borderColor: "hsl(var(--destructive) / 0.5)",
+                                color: "hsl(var(--destructive))",
                                 textTransform: "none",
                                 fontSize: "0.75rem",
                                 py: 0.5,
                                 px: 1.5,
                                 flexShrink: 0,
                                 "&:hover": {
-                                  borderColor: "#ef4444",
-                                  backgroundColor: "rgba(239, 68, 68, 0.1)"
+                                  borderColor: "hsl(var(--destructive))",
+                                  backgroundColor: "hsl(var(--destructive) / 0.1)"
                                 }
                               },
                               children: "View Execution"
@@ -2735,9 +2792,9 @@ var AppAuthCard = ({
                       {
                         severity: "error",
                         sx: {
-                          backgroundColor: "rgba(239, 68, 68, 0.1)",
-                          color: "#ef4444",
-                          border: "1px solid rgba(239, 68, 68, 0.3)",
+                          backgroundColor: "hsl(var(--destructive) / 0.1)",
+                          color: "hsl(var(--destructive))",
+                          border: "1px solid hsl(var(--destructive) / 0.3)",
                           borderRadius: 2
                         },
                         children: "Failed to save authentication. Please try again."
@@ -3172,9 +3229,10 @@ var AppMcpChat = ({ appName, appIcon, appId, categories }) => {
   const inputRef = (0, import_react5.useRef)(null);
   const suggestions = (0, import_react5.useMemo)(() => getSuggestions(appName, categories), [appName, categories]);
   const primaryCategory = (0, import_react5.useMemo)(() => getPrimaryCategory(appName, categories), [appName, categories]);
+  const MIN_INPUT_LENGTH = 6;
   const runAction = async () => {
     const trimmed = input.trim();
-    if (!trimmed || runState === "running") return;
+    if (trimmed.length < MIN_INPUT_LENGTH || runState === "running") return;
     setQuery(trimmed);
     setInput("");
     setRunState("running");
@@ -3395,7 +3453,8 @@ ${JSON.stringify(data, null, 2)}
                       {
                         component: "button",
                         onClick: runAction,
-                        disabled: !input.trim(),
+                        disabled: input.trim().length < MIN_INPUT_LENGTH,
+                        title: input.trim().length < MIN_INPUT_LENGTH ? `Enter at least ${MIN_INPUT_LENGTH} characters` : void 0,
                         sx: {
                           all: "unset",
                           display: "flex",
@@ -3405,11 +3464,11 @@ ${JSON.stringify(data, null, 2)}
                           height: 30,
                           borderRadius: "8px",
                           flexShrink: 0,
-                          cursor: input.trim() ? "pointer" : "default",
-                          backgroundColor: input.trim() ? "hsl(var(--primary))" : "hsl(var(--muted))",
-                          color: input.trim() ? "hsl(var(--primary-foreground))" : "hsl(var(--muted-foreground))",
+                          cursor: input.trim().length >= MIN_INPUT_LENGTH ? "pointer" : "not-allowed",
+                          backgroundColor: input.trim().length >= MIN_INPUT_LENGTH ? "hsl(var(--primary))" : "hsl(var(--muted))",
+                          color: input.trim().length >= MIN_INPUT_LENGTH ? "hsl(var(--primary-foreground))" : "hsl(var(--muted-foreground))",
                           transition: "all 0.15s ease",
-                          "&:hover": input.trim() ? {
+                          "&:hover": input.trim().length >= MIN_INPUT_LENGTH ? {
                             filter: "brightness(1.1)"
                           } : {}
                         },
@@ -3731,23 +3790,32 @@ function buildSingulCurl(appName, action, opts) {
   const act = action?.name || "{action}";
   const body = {
     app: appName || "<appname>",
+    action: act,
     fields: action?.fields.length ? action.fields : [{ name: "field1", value: "value1" }]
   };
   const token = opts?.apiKey || "YOUR_TOKEN";
   const orgLine = opts?.orgId ? `
   -H "Org-Id: ${opts.orgId}" \\` : "";
-  return `curl -X POST https://singul.io/api/${act} \\
+  const base2 = (opts?.baseUrl || "").replace(/\/+$/, "");
+  return `curl -X POST ${base2}/api/v1/singul \\
   -H "Authorization: Bearer ${token}" \\${orgLine}
   -d '${JSON.stringify(body, null, 2)}'`;
 }
-function buildSingulPython(appName, action) {
+function buildSingulPython(appName, action, opts) {
   const act = action?.name || "send_message";
   const app = appName || "<appname>";
   const fields = action?.fields.length ? action.fields : [];
   const fieldsStr = JSON.stringify(fields);
-  return `import shufflepy
+  const token = opts?.apiKey || "APIKEY";
+  const base2 = (opts?.baseUrl || "").replace(/\/+$/, "");
+  return `from shufflepy import Singul
 
-response = shufflepy.run("${app}", action="${act}", fields=${fieldsStr})
+singul = Singul(
+    "${token}",
+    url="${base2}",
+)
+
+response = singul.run("${app}", action="${act}", fields=${fieldsStr})
 
 print(response)`;
 }
@@ -3864,10 +3932,11 @@ var SingulActionsPreview = ({
     const apiKey = API_CONFIG.apiKey;
     const trackedOrg = getTrackedOrgId();
     const orgId = trackedOrg && activeOrgId && trackedOrg !== activeOrgId ? trackedOrg : null;
-    return { apiKey, orgId };
+    const baseUrl = API_CONFIG.baseUrl;
+    return { apiKey, orgId, baseUrl };
   }, [activeOrgId]);
   const buildSnippet = (0, import_react6.useCallback)(
-    (action, l) => l === "python" ? buildSingulPython(appName, action) : buildSingulCurl(appName, action, curlOpts),
+    (action, l) => l === "python" ? buildSingulPython(appName, action, curlOpts) : buildSingulCurl(appName, action, curlOpts),
     [appName, curlOpts]
   );
   (0, import_react6.useEffect)(() => {
@@ -3918,7 +3987,7 @@ var SingulActionsPreview = ({
         app_name: "http",
         app_version: "1.4.0"
       };
-      const path = lang === "python" ? "/api/v1/apps/3e2bdf9d5069fe3f4746c29d68785a6a/run" : "/api/v1/apps/http/run";
+      const path = lang === "python" ? "/api/v1/apps/3e2bdf9d5069fe3f4746c29d68785a6a/run?delete=true" : "/api/v1/apps/http/run?delete=true";
       const res = await fetch(getApiUrl(path), {
         method: "POST",
         credentials: "include",
@@ -4341,14 +4410,8 @@ function AppDetailDrawer({
       let appsList = null;
       if (API_CONFIG.apiKey) {
         try {
-          const res = await fetch(getApiUrl("/api/v1/apps"), {
-            credentials: "include",
-            headers: { ...getAuthHeader() }
-          });
-          if (res.ok) {
-            const apps = await res.json();
-            if (Array.isArray(apps)) appsList = apps;
-          }
+          const apps = await fetchAppsViaApiConfig();
+          if (Array.isArray(apps)) appsList = apps;
         } catch {
         }
       }
@@ -4659,7 +4722,7 @@ function AppDetailDrawer({
 }
 
 // ShuffleMCP.tsx
-var import_shuffle_mcp = require("./shuffle-mcp-JQWKQNUP.css");
+var import_shuffle_mcp = require("./shuffle-mcp-24XBNRGE.css");
 var import_jsx_runtime11 = require("react/jsx-runtime");
 var DEFAULT_ALGOLIA_APP_ID = "JNSS5CFDZZ";
 var DEFAULT_ALGOLIA_API_KEY = "33e4e3564f4f060e96e0531957bed552";
@@ -4749,18 +4812,12 @@ var ShuffleMCP = import_react9.default.forwardRef(({
     }
     const fetchPrivateApps = async () => {
       try {
-        const response = await fetch(`${apiBaseUrl}${privateAppsPath}`, {
-          headers: {
-            // apiKey is optional — if omitted we rely on the browser session
-            // cookie (credentials: 'include'), which is how prod usually auths.
-            ...apiKey ? { Authorization: `Bearer ${apiKey}` } : {},
-            ...orgId ? { "Org-Id": orgId } : {}
-          },
-          credentials: "include"
+        const apps = await fetchApps({
+          baseUrl: apiBaseUrl,
+          path: privateAppsPath,
+          apiKey: apiKey || null,
+          orgId: orgId || null
         });
-        if (!response.ok) return;
-        const data = await response.json();
-        const apps = Array.isArray(data) ? data : data?.data || [];
         const normalized = apps.map((a) => ({
           name: a.name || "",
           description: a.description || "",
@@ -5005,6 +5062,8 @@ var ShuffleMCP = import_react9.default.forwardRef(({
       "div",
       {
         className: `singul-dropdown-item ${selected ? "singul-selected" : ""} ${authState.validated ? "singul-validated" : ""} ${authState.configured ? "singul-configured" : ""}`,
+        "data-app-name": app.name,
+        "data-object-id": app.objectID,
         style: {
           ...customStyles.dropdownItem,
           ...selected ? customStyles.selectedItem : {}
@@ -5138,7 +5197,7 @@ var ShuffleMCP = import_react9.default.forwardRef(({
                 displayResults.map((app, index) => renderAppItem(app, index)),
                 /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "singul-end-of-results", style: {
                   padding: "10px 16px",
-                  color: "rgba(255, 255, 255, 0.3)",
+                  color: "hsl(var(--foreground) / 0.3)",
                   textAlign: "center",
                   fontSize: "11px",
                   gridColumn: "1 / -1"
@@ -5352,10 +5411,19 @@ function AppSearchDrawer({
   onAddToCanvas,
   priorityCategory,
   connectionPathApps,
-  pinnedApps
+  pinnedApps,
+  highlightAppName,
+  highlightDelayMs = 5e3
 }) {
   const [detailAppName, setDetailAppName] = (0, import_react10.useState)(null);
   const [detailAppId, setDetailAppId] = (0, import_react10.useState)(null);
+  const [highlightActive, setHighlightActive] = (0, import_react10.useState)(false);
+  (0, import_react10.useEffect)(() => {
+    setHighlightActive(false);
+    if (!open || !highlightAppName) return;
+    const t = setTimeout(() => setHighlightActive(true), highlightDelayMs);
+    return () => clearTimeout(t);
+  }, [open, highlightAppName, highlightDelayMs]);
   const handleClose = () => {
     setDetailAppName(null);
     setDetailAppId(null);
@@ -5497,13 +5565,16 @@ function AppSearchDrawer({
                     overflowY: "auto"
                   },
                   "& .singul-results-grid": {
-                    gridAutoRows: "1fr",
+                    gridAutoRows: "75px",
                     gap: "12px"
                   },
                   "& .singul-results-grid .singul-dropdown-item": {
                     minHeight: 75,
+                    maxHeight: 75,
+                    height: 75,
                     padding: "14px 16px",
-                    alignItems: "center"
+                    alignItems: "center",
+                    overflow: "hidden"
                   },
                   "& .singul-results-grid .singul-app-info": {
                     alignItems: "center",
@@ -5514,7 +5585,18 @@ function AppSearchDrawer({
                     height: 40,
                     borderRadius: 8,
                     padding: 4
-                  }
+                  },
+                  ...highlightActive && highlightAppName ? {
+                    [`& .singul-dropdown-item[data-app-name="${highlightAppName}"]`]: {
+                      borderColor: "hsl(var(--primary)) !important",
+                      boxShadow: "0 0 0 2px hsl(var(--primary)), 0 0 18px 2px hsl(var(--primary) / 0.55)",
+                      animation: "shuffleHighlightPulse 1.6s ease-in-out infinite"
+                    },
+                    "@keyframes shuffleHighlightPulse": {
+                      "0%, 100%": { boxShadow: "0 0 0 2px hsl(var(--primary)), 0 0 12px 1px hsl(var(--primary) / 0.4)" },
+                      "50%": { boxShadow: "0 0 0 2px hsl(var(--primary)), 0 0 24px 4px hsl(var(--primary) / 0.75)" }
+                    }
+                  } : {}
                 },
                 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,
@@ -5965,10 +6047,12 @@ var TimelineRow = ({
     }
   }
   let toolApp;
-  if (details?.tool && typeof details.tool === "string" && details.tool !== "singul") {
-    let tn = details.tool.toLowerCase().replace(/[\s-]+/g, "_");
+  const skipToolIcon = item.category === "finalise" || item.category === "finish" || item.category === "ask" || details?.action === "finalise" || details?.action === "finish" || details?.action === "ask";
+  if (!skipToolIcon && details?.tool && typeof details.tool === "string" && details.tool !== "singul" && details.tool !== "core") {
+    const raw = details.tool;
+    let tn = raw.toLowerCase().replace(/[\s-]+/g, "_");
     if (tn.startsWith("app:")) tn = tn.split(":")[2] || tn;
-    toolApp = appsById[tn];
+    toolApp = appsById[raw] || appsById[tn];
   }
   const questions = [];
   if (item.category === "ask" || details?.action === "ask") {
@@ -6030,7 +6114,9 @@ var TimelineRow = ({
             maxHeight: 60,
             overflow: "hidden",
             "& p": { margin: 0 },
-            "& pre, & code": { fontSize: "0.78rem" }
+            "& pre, & code": { fontSize: "0.78rem" },
+            "& a": { color: "hsl(var(--primary))", textDecoration: "underline", textUnderlineOffset: "2px" },
+            "& a:hover": { opacity: 0.85 }
           }, 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",
@@ -6047,7 +6133,9 @@ var TimelineRow = ({
             import_material12.Box,
             {
               sx: { display: "flex", alignItems: "center", gap: 0.25, ml: 1, minWidth: 96, justifyContent: "flex-end" },
-              onClick: (e) => e.stopPropagation(),
+              onClick: (e) => {
+                if (e.target.closest("button, a")) 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)(
@@ -6251,6 +6339,7 @@ var AgentUI = ({
   compact = false,
   hideAppPicker = false,
   hideAttach = false,
+  disableStartTab = false,
   appPickerLabel = "Select Apps / MCPs",
   appPickerTitle = "Select Apps / MCPs",
   appPickerSubtitle = "Pick the tools the agent is allowed to use for this run",
@@ -6260,16 +6349,21 @@ var AgentUI = ({
   readUrlParams = true,
   executionId,
   authorization,
+  initialExecution,
   onRun,
+  onViewChange,
   apiKey,
   apiBaseUrl,
-  orgId
+  orgId,
+  className,
+  sx,
+  contentSx
 }) => {
-  const resolveUrl = (0, import_react11.useCallback)(
+  const resolveUrl2 = (0, import_react11.useCallback)(
     (path) => apiBaseUrl ? `${apiBaseUrl.replace(/\/+$/, "")}${path}` : getApiUrl(path),
     [apiBaseUrl]
   );
-  const resolveHeaders = (0, import_react11.useCallback)(() => {
+  const resolveHeaders2 = (0, import_react11.useCallback)(() => {
     const h = apiKey ? { Authorization: `Bearer ${apiKey}` } : { ...getAuthHeader() };
     if (orgId) h["Org-Id"] = orgId;
     return h;
@@ -6283,6 +6377,8 @@ var AgentUI = ({
   ];
   const [chosenApps, setChosenApps] = (0, import_react11.useState)(apps ?? defaultApps ?? BUILTIN_DEFAULT_APPS);
   const [availableApps, setAvailableApps] = (0, import_react11.useState)([]);
+  const [executionApps, setExecutionApps] = (0, import_react11.useState)([]);
+  const [resolvedToolApps, setResolvedToolApps] = (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);
@@ -6361,15 +6457,118 @@ var AgentUI = ({
   };
   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;
+    const add = (a) => {
+      if (!a?.name) return;
+      const slug = a.name.toLowerCase().replace(/[\s-]+/g, "_");
+      if (!m[slug] || !m[slug].icon && a.icon) m[slug] = a;
+      if (a.id) {
+        if (!m[a.id] || !m[a.id].icon && a.icon) m[a.id] = a;
+      }
+    };
+    for (const a of chosenApps) add(a);
+    for (const a of executionApps) add(a);
+    for (const [k, v] of Object.entries(resolvedToolApps)) {
+      if (!m[k] || !m[k].icon && v.icon) m[k] = v;
+      add(v);
     }
     return m;
-  }, [chosenApps]);
+  }, [chosenApps, executionApps, resolvedToolApps]);
   (0, import_react11.useEffect)(() => {
     if (apps) setChosenApps(apps);
   }, [apps]);
+  (0, import_react11.useEffect)(() => {
+    const decisions = agentData?.decisions || [];
+    if (!Array.isArray(decisions) || decisions.length === 0) return;
+    const norm2 = (s) => s.toLowerCase().replace(/[\s-]+/g, "_");
+    const wanted = [];
+    const seen = /* @__PURE__ */ new Set();
+    for (const dec of decisions) {
+      const action = dec?.action || dec?.details?.action;
+      const category = dec?.category || dec?.details?.category;
+      if (action === "finish" || action === "finalise" || action === "ask") continue;
+      if (category === "finish" || category === "finalise" || category === "ask") continue;
+      const tool = dec?.details?.tool ?? dec?.tool;
+      if (!tool || typeof tool !== "string") continue;
+      if (tool === "singul" || tool === "core") continue;
+      let raw = tool;
+      let slug = norm2(tool);
+      if (slug.startsWith("app:")) slug = slug.split(":")[2] || slug;
+      if (appsById[raw]?.icon || appsById[slug]?.icon) continue;
+      if (resolvedToolApps[raw]?.icon || resolvedToolApps[slug]?.icon) continue;
+      const key = `${raw}|${slug}`;
+      if (seen.has(key)) continue;
+      seen.add(key);
+      wanted.push({ raw, slug });
+    }
+    if (wanted.length === 0) return;
+    let cancelled = false;
+    (async () => {
+      const found = {};
+      try {
+        const all = await fetchApps({
+          baseUrl: apiBaseUrl ? apiBaseUrl.replace(/\/+$/, "") : API_CONFIG.baseUrl,
+          apiKey: apiKey || API_CONFIG.apiKey,
+          orgId: orgId || null
+        });
+        if (Array.isArray(all) && all.length > 0) {
+          const byId = /* @__PURE__ */ new Map();
+          const byName = /* @__PURE__ */ new Map();
+          for (const a of all) {
+            if (a?.id) byId.set(String(a.id), a);
+            if (a?.name) byName.set(norm2(String(a.name)), a);
+          }
+          for (const { raw, slug } of wanted) {
+            const hit = byId.get(raw) || byName.get(slug);
+            if (!hit) continue;
+            const icon = hit.large_image || hit.image_url || hit.image || "";
+            const app = { id: hit.id, name: hit.name || slug, icon };
+            found[raw] = app;
+            found[slug] = app;
+          }
+        }
+      } catch {
+      }
+      const stillMissing = wanted.filter(({ raw, slug }) => !found[raw] && !found[slug]);
+      if (stillMissing.length > 0) {
+        try {
+          const { algoliasearch: algoliasearch2 } = await import("algoliasearch");
+          const client = algoliasearch2("JNSS5CFDZZ", "33e4e3564f4f060e96e0531957bed552");
+          await Promise.all(stillMissing.map(async ({ raw, slug }) => {
+            try {
+              try {
+                const obj = await client.getObject({ indexName: "appsearch", objectID: raw });
+                if (obj?.image_url || obj?.name) {
+                  const app = { id: obj.objectID || raw, name: obj.name || slug, icon: obj.image_url || "" };
+                  found[raw] = app;
+                  found[slug] = app;
+                  return;
+                }
+              } catch {
+              }
+              const res = await client.searchSingleIndex({
+                indexName: "appsearch",
+                searchParams: { query: slug.replace(/_/g, " "), hitsPerPage: 3 }
+              });
+              const hits = res.hits || [];
+              const match = hits.find((h) => norm2(h.name || "") === slug) || hits[0];
+              if (match?.image_url || match?.name) {
+                const app = { id: match.objectID || raw, name: match.name || slug, icon: match.image_url || "" };
+                found[raw] = app;
+                found[slug] = app;
+              }
+            } catch {
+            }
+          }));
+        } catch {
+        }
+      }
+      if (cancelled || Object.keys(found).length === 0) return;
+      setResolvedToolApps((prev) => ({ ...prev, ...found }));
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [JSON.stringify(agentData?.decisions?.map((d) => d?.details?.tool || d?.tool) || []), appsById]);
   (0, import_react11.useEffect)(() => {
     const missing = chosenApps.filter((a) => !a.icon && a.name);
     if (missing.length === 0) return;
@@ -6401,18 +6600,17 @@ var AgentUI = ({
       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() }
+          const baseUrl = apiBaseUrl ? apiBaseUrl.replace(/\/+$/, "") : API_CONFIG.baseUrl;
+          const apps2 = await fetchApps({
+            baseUrl,
+            apiKey: apiKey || API_CONFIG.apiKey,
+            orgId: orgId || null
           });
-          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;
-              }
+          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 {
@@ -6428,7 +6626,7 @@ var AgentUI = ({
     return () => {
       cancelled = true;
     };
-  }, [chosenApps, availableApps, resolveUrl, resolveHeaders]);
+  }, [chosenApps, availableApps, resolveUrl2, resolveHeaders2]);
   (0, import_react11.useEffect)(() => {
     if (!autoLoadApps) return;
     if (apps || defaultApps) return;
@@ -6436,9 +6634,9 @@ var AgentUI = ({
     let cancelled = false;
     (async () => {
       try {
-        const resp = await fetch(resolveUrl("/api/v1/apps/authentication"), {
+        const resp = await fetch(resolveUrl2("/api/v1/apps/authentication"), {
           credentials: "include",
-          headers: { ...resolveHeaders() }
+          headers: { ...resolveHeaders2() }
         });
         if (!resp.ok) return;
         const result = await resp.json();
@@ -6467,14 +6665,123 @@ var AgentUI = ({
     return () => {
       cancelled = true;
     };
-  }, [autoLoadApps, apps, defaultApps, hasApiKey, resolveUrl, resolveHeaders]);
+  }, [autoLoadApps, apps, defaultApps, hasApiKey, resolveUrl2, resolveHeaders2]);
+  (0, import_react11.useEffect)(() => {
+    const raw = agentData?.allowed_actions;
+    if (!Array.isArray(raw) || raw.length === 0) {
+      setExecutionApps([]);
+      return;
+    }
+    const parsed = [];
+    const seen = /* @__PURE__ */ new Set();
+    for (const entry of raw) {
+      if (typeof entry !== "string") continue;
+      const parts = entry.split(":");
+      if (parts.length < 3 || parts[0] !== "app") continue;
+      const id = parts[1] || "";
+      const name = parts.slice(2).join(":") || "";
+      if (!name && !id) continue;
+      const key = `${id}|${name}`;
+      if (seen.has(key)) continue;
+      seen.add(key);
+      parsed.push({ id, name });
+    }
+    if (parsed.length === 0) {
+      setExecutionApps([]);
+      return;
+    }
+    const resolveFromAvailable = (id, name) => {
+      const byId = id ? availableApps.find((a) => a.id === id) : void 0;
+      const byName = !byId && name ? availableApps.find((a) => (a.name || "").toLowerCase() === name.toLowerCase()) : void 0;
+      const hit = byId || byName;
+      return { id: id || hit?.id, name: hit?.name || name, icon: hit?.icon };
+    };
+    const initial = parsed.map(({ id, name }) => resolveFromAvailable(id, name));
+    setExecutionApps(initial);
+    if (initial.every((a) => !!a.icon)) return;
+    let cancelled = false;
+    const norm2 = (s) => (s || "").toLowerCase().replace(/[\s-]+/g, "_");
+    (async () => {
+      let next = initial;
+      try {
+        const all = await fetchApps({
+          baseUrl: API_CONFIG.baseUrl,
+          apiKey: apiKey || API_CONFIG.apiKey,
+          orgId: orgId || null
+        });
+        if (!cancelled && Array.isArray(all) && all.length > 0) {
+          const byIdMap = /* @__PURE__ */ new Map();
+          const byNameMap = /* @__PURE__ */ new Map();
+          for (const a of all) {
+            if (a?.id) byIdMap.set(String(a.id), a);
+            if (a?.name) byNameMap.set(norm2(String(a.name)), a);
+          }
+          next = next.map((a) => {
+            if (a.icon) return a;
+            const hit = a.id && byIdMap.get(a.id) || byNameMap.get(norm2(a.name || ""));
+            if (!hit) return a;
+            return {
+              id: a.id || hit.id,
+              name: hit.name || a.name,
+              icon: hit.large_image || hit.image_url || hit.image || a.icon
+            };
+          });
+        }
+      } catch {
+      }
+      const stillMissing = next.filter((a) => !a.icon);
+      if (stillMissing.length > 0) {
+        try {
+          const { algoliasearch: algoliasearch2 } = await import("algoliasearch");
+          const client = algoliasearch2("JNSS5CFDZZ", "33e4e3564f4f060e96e0531957bed552");
+          const resolved = {};
+          await Promise.all(stillMissing.map(async (a) => {
+            try {
+              if (a.id) {
+                try {
+                  const obj = await client.getObject({ indexName: "appsearch", objectID: a.id });
+                  if (obj?.image_url) {
+                    resolved[a.id || a.name] = { name: obj.name || a.name, icon: obj.image_url, id: obj.objectID || a.id };
+                    return;
+                  }
+                } catch {
+                }
+              }
+              const res = await client.searchSingleIndex({
+                indexName: "appsearch",
+                searchParams: { query: (a.name || "").replace(/_/g, " "), hitsPerPage: 3 }
+              });
+              const hits = res.hits || [];
+              const match = hits.find((h) => norm2(h.name || "") === norm2(a.name || "")) || hits[0];
+              if (match?.image_url) {
+                resolved[a.id || a.name] = { name: match.name || a.name, icon: match.image_url, id: match.objectID || a.id || "" };
+              }
+            } catch {
+            }
+          }));
+          if (Object.keys(resolved).length > 0) {
+            next = next.map((a) => {
+              if (a.icon) return a;
+              const r = resolved[a.id || a.name];
+              return r ? { id: r.id || a.id, name: r.name || a.name, icon: r.icon } : a;
+            });
+          }
+        } catch {
+        }
+      }
+      if (!cancelled) setExecutionApps(next);
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [JSON.stringify(agentData?.allowed_actions || []), availableApps]);
   const getExecution = (0, import_react11.useCallback)(async (executionId2, authorization2) => {
     if (!executionId2 || !authorization2) return;
     try {
-      const resp = await fetch(resolveUrl("/api/v1/streams/results"), {
+      const resp = await fetch(resolveUrl2("/api/v1/streams/results"), {
         method: "POST",
         credentials: "include",
-        headers: { "Content-Type": "application/json", ...resolveHeaders() },
+        headers: { "Content-Type": "application/json", ...resolveHeaders2() },
         body: JSON.stringify({ execution_id: executionId2, authorization: authorization2 })
       });
       if (activeExecutionIdRef.current && activeExecutionIdRef.current !== executionId2) return;
@@ -6521,6 +6828,29 @@ var AgentUI = ({
       getExecution(eid, auth);
     }
   }, [readUrlParams, executionId, authorization, getExecution]);
+  (0, import_react11.useEffect)(() => {
+    if (!initialExecution || !initialExecution.execution_id) return;
+    setShowStarter(false);
+    activeExecutionIdRef.current = initialExecution.execution_id;
+    setExecution(initialExecution);
+    let actionResult = null;
+    if (Array.isArray(initialExecution.results)) {
+      actionResult = initialExecution.results.find((r) => r?.action?.app_name === "AI Agent") || initialExecution.results[0];
+    } else {
+      actionResult = initialExecution;
+    }
+    setAgentActionResult(actionResult);
+    const v = validateJson(actionResult?.result);
+    if (v.valid) {
+      setAgentData({
+        ...v.result,
+        started_at: initialExecution.started_at,
+        completed_at: initialExecution.completed_at,
+        status: initialExecution.status
+      });
+    }
+    setError(null);
+  }, [initialExecution?.execution_id]);
   (0, import_react11.useEffect)(() => {
     if (!execution?.execution_id || !execution?.authorization) return;
     const status = (execution.status || "").toUpperCase();
@@ -6660,10 +6990,10 @@ var AgentUI = ({
       decision_id: decisionId
     });
     try {
-      const resp = await fetch(resolveUrl(`/api/v1/workflows/${wfId}/run?${params.toString()}`), {
+      const resp = await fetch(resolveUrl2(`/api/v1/workflows/${wfId}/run?${params.toString()}`), {
         method: "GET",
         credentials: "include",
-        headers: { ...resolveHeaders() }
+        headers: { ...resolveHeaders2() }
       });
       const json = await resp.json();
       if (json.success === false) {
@@ -6730,10 +7060,10 @@ var AgentUI = ({
     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)}`), {
+      const resp = await fetch(resolveUrl2(`/api/v1/apps/agent/run?rerun=true&decision_id=${encodeURIComponent(decisionId)}`), {
         method: "POST",
         credentials: "include",
-        headers: { "Content-Type": "application/json", ...resolveHeaders() },
+        headers: { "Content-Type": "application/json", ...resolveHeaders2() },
         body: JSON.stringify(body)
       });
       const json = await resp.json().catch(() => ({}));
@@ -6843,6 +7173,9 @@ var AgentUI = ({
   const activeTab = showStarter ? "start" : viewMode;
   const hasExecution = !!execution?.execution_id;
   const showRunSwitcher = hasExecution || agentRequestLoading;
+  (0, import_react11.useEffect)(() => {
+    onViewChange?.(activeTab);
+  }, [activeTab, onViewChange]);
   const goToTab = (t) => {
     if (t === "start") {
       setShowStarter(true);
@@ -6865,15 +7198,19 @@ var AgentUI = ({
     /* @__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";
+      const disabled = t === "start" && disableStartTab;
       return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
         import_material12.Box,
         {
           component: "button",
           type: "button",
-          onClick: () => goToTab(t),
+          onClick: () => {
+            if (!disabled) goToTab(t);
+          },
+          disabled,
           sx: {
             all: "unset",
-            cursor: "pointer",
+            cursor: disabled ? "not-allowed" : "pointer",
             px: 1.75,
             py: 0.5,
             borderRadius: 999,
@@ -6881,8 +7218,9 @@ var AgentUI = ({
             fontWeight: 600,
             color: active ? "hsl(var(--primary-foreground))" : "hsl(var(--muted-foreground))",
             bgcolor: active ? "hsl(var(--primary))" : "transparent",
+            opacity: disabled ? 0.4 : 1,
             transition: "background 0.12s ease, color 0.12s ease",
-            "&:hover": active ? {} : { color: "hsl(var(--foreground))", bgcolor: "hsl(var(--muted))" }
+            "&:hover": active || disabled ? {} : { color: "hsl(var(--foreground))", bgcolor: "hsl(var(--muted))" }
           },
           children: label
         },
@@ -6905,645 +7243,1451 @@ var AgentUI = ({
       }
     ) }) })
   ] });
-  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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    import_material12.Box,
+    {
+      className,
+      sx: [
+        { width: "100%", display: "flex", justifyContent: "center", pb: 4 },
+        ...Array.isArray(sx) ? sx : sx ? [sx] : []
+      ],
+      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+        import_material12.Box,
+        {
+          sx: [
+            { width: "100%", maxWidth, display: "flex", flexDirection: "column", gap: 3 },
+            ...Array.isArray(contentSx) ? contentSx : contentSx ? [contentSx] : []
+          ],
+          children: [
+            showRunSwitcher && tabBar,
+            showStarter ? /* @__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)" }
+                component: "form",
+                onSubmit: (e) => {
+                  e.preventDefault();
+                  submitInput(actionInput);
                 },
+                sx: { display: "flex", flexDirection: "column", alignItems: "center", gap: compact ? 2 : 3, py: compact ? 2 : 4 },
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_Add2.default, { sx: { fontSize: 14 } }),
-                  appPickerLabel
+                  !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 })
                 ]
               }
-            ),
-            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,
+            ) : /* @__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: (executionApps.length > 0 ? executionApps : 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",
-                      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 } })
+                      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: 210,
+                      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;
+
+// AgentRunDrawer.tsx
+var import_react12 = require("react");
+var import_material13 = require("@mui/material");
+var import_Close5 = __toESM(require("@mui/icons-material/Close"), 1);
+var import_lucide_react3 = require("lucide-react");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var TAB_ORDER = ["run", "permissions", "localLLM"];
+var AgentRunDrawer = ({
+  open,
+  onClose,
+  initialTab = "run",
+  permissionsSlot,
+  localLLMSlot,
+  localLLMTabBadge,
+  permissionsDisabled = false,
+  permissionsDisabledTooltip = "Coming soon",
+  agentUIProps,
+  width = 520,
+  title = "Agent",
+  subtitle = "Run actions and manage permissions",
+  className,
+  paperSx,
+  headerSx,
+  tabsSx,
+  bodySx
+}) => {
+  const [activeTab, setActiveTab] = (0, import_react12.useState)(initialTab);
+  const prevOpenRef = (0, import_react12.useRef)(open);
+  (0, import_react12.useEffect)(() => {
+    if (open && !prevOpenRef.current) setActiveTab(initialTab);
+    prevOpenRef.current = open;
+  }, [open, initialTab]);
+  const visibleTabs = TAB_ORDER.filter((t) => {
+    if (t === "run") return true;
+    if (t === "permissions") return !!permissionsSlot;
+    if (t === "localLLM") return !!localLLMSlot;
+    return false;
+  });
+  const showTabs = visibleTabs.length > 1;
+  const safeActiveTab = visibleTabs.includes(activeTab) ? activeTab : "run";
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+    import_material13.Drawer,
+    {
+      anchor: "right",
+      open,
+      onClose,
+      slotProps: {
+        paper: {
+          className,
+          sx: [
+            {
+              width: { xs: "100%", sm: width },
+              background: "linear-gradient(180deg, hsl(var(--card)) 0%, hsl(var(--background)) 100%)",
+              borderLeft: "1px solid hsl(var(--border))",
+              boxShadow: "-8px 0 32px hsla(0, 0%, 0%, 0.4)",
+              display: "flex",
+              flexDirection: "column"
+            },
+            ...Array.isArray(paperSx) ? paperSx : paperSx ? [paperSx] : []
+          ]
+        }
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+          import_material13.Box,
+          {
+            sx: [
+              {
+                px: 3,
+                py: 2.5,
+                display: "flex",
+                alignItems: "center",
+                gap: 2,
+                borderBottom: "1px solid hsl(var(--border))",
+                flexShrink: 0
               },
-              `${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 })
-        ]
+              ...Array.isArray(headerSx) ? headerSx : headerSx ? [headerSx] : []
+            ],
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                import_material13.Box,
+                {
+                  sx: {
+                    width: 40,
+                    height: 40,
+                    borderRadius: "50%",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    background: "hsla(var(--primary) / 0.12)",
+                    color: "hsl(var(--primary))",
+                    flexShrink: 0
+                  },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(AgentIcon_default, { size: 22 })
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_material13.Box, { sx: { flex: 1, minWidth: 0 }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_material13.Typography, { sx: { fontWeight: 600, fontSize: "1.1rem", color: "hsl(var(--foreground))" }, children: title }),
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_material13.Typography, { sx: { fontSize: "0.8rem", color: "hsl(var(--muted-foreground))" }, children: subtitle })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_material13.IconButton, { onClick: onClose, size: "small", sx: { color: "hsl(var(--muted-foreground))" }, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_Close5.default, { fontSize: "small" }) })
+            ]
+          }
+        ),
+        showTabs && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_material13.Box, { sx: { borderBottom: "1px solid hsl(var(--border))", flexShrink: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+          import_material13.Tabs,
+          {
+            value: safeActiveTab,
+            onChange: (_, v) => setActiveTab(v),
+            sx: [
+              {
+                minHeight: 42,
+                px: 3,
+                "& .MuiTab-root": {
+                  minHeight: 42,
+                  textTransform: "none",
+                  fontSize: "0.85rem",
+                  fontWeight: 500,
+                  color: "hsl(var(--muted-foreground))",
+                  "&.Mui-selected": { color: "hsl(var(--primary))" }
+                },
+                "& .MuiTabs-indicator": { bgcolor: "hsl(var(--primary))" }
+              },
+              ...Array.isArray(tabsSx) ? tabsSx : tabsSx ? [tabsSx] : []
+            ],
+            children: [
+              visibleTabs.includes("run") && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                import_material13.Tab,
+                {
+                  value: "run",
+                  label: "Run",
+                  icon: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react3.Play, { size: 14 }),
+                  iconPosition: "start",
+                  sx: { gap: 0.75 }
+                }
+              ),
+              visibleTabs.includes("permissions") && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                import_material13.Tab,
+                {
+                  value: "permissions",
+                  label: permissionsDisabled ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_material13.Tooltip, { title: permissionsDisabledTooltip, arrow: true, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_material13.Box, { component: "span", sx: { display: "inline-flex", alignItems: "center" }, children: "Permissions" }) }) : "Permissions",
+                  icon: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react3.ShieldCheck, { size: 14 }),
+                  iconPosition: "start",
+                  disabled: permissionsDisabled,
+                  sx: { gap: 0.75 }
+                }
+              ),
+              visibleTabs.includes("localLLM") && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                import_material13.Tab,
+                {
+                  value: "localLLM",
+                  label: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_material13.Box, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: [
+                    "Local LLM",
+                    localLLMTabBadge
+                  ] }),
+                  icon: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react3.Server, { size: 14 }),
+                  iconPosition: "start",
+                  sx: { gap: 0.75 }
+                }
+              )
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_material13.Box, { sx: [{ flex: 1, overflowY: "auto" }, ...Array.isArray(bodySx) ? bodySx : bodySx ? [bodySx] : []], children: [
+          safeActiveTab === "run" && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_material13.Box, { sx: { px: 2, py: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+            AgentUI_default,
+            {
+              compact: true,
+              hideHeroIcon: true,
+              title: "",
+              subtitle: null,
+              ...agentUIProps
+            }
+          ) }),
+          safeActiveTab === "permissions" && permissionsSlot && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_material13.Box, { sx: { px: 3, py: 2.5 }, children: permissionsSlot }),
+          safeActiveTab === "localLLM" && localLLMSlot && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_material13.Box, { sx: { px: 3, py: 2.5 }, children: localLLMSlot })
+        ] })
+      ]
+    }
+  );
+};
+var AgentRunDrawer_default = AgentRunDrawer;
+
+// AgentActivityList.tsx
+var import_react13 = require("react");
+var import_material14 = require("@mui/material");
+var import_Search = __toESM(require("@mui/icons-material/Search"), 1);
+var import_lucide_react4 = require("lucide-react");
+
+// agentActivity.ts
+var resolveUrl = (path, baseUrl) => baseUrl ? `${baseUrl.replace(/\/+$/, "")}${path}` : getApiUrl(path);
+var resolveHeaders = (apiKey, orgId) => {
+  const h = apiKey ? { Authorization: `Bearer ${apiKey}` } : { ...getAuthHeader() };
+  if (orgId) h["Org-Id"] = orgId;
+  return h;
+};
+var searchAgentActivity = async (params = {}) => {
+  const {
+    cursor = "",
+    limit = 50,
+    status = "",
+    startTime = "",
+    endTime = "",
+    suborgRuns = false,
+    apiKey,
+    apiBaseUrl,
+    orgId
+  } = params;
+  const payload = {
+    workflow_id: "AGENT",
+    cursor,
+    limit,
+    status,
+    start_time: startTime,
+    end_time: endTime,
+    suborg_runs: suborgRuns
+  };
+  const response = await fetch(resolveUrl("/api/v1/workflows/search", apiBaseUrl), {
+    method: "POST",
+    credentials: "include",
+    headers: {
+      "Content-Type": "application/json",
+      ...resolveHeaders(apiKey, orgId)
+    },
+    body: JSON.stringify(payload)
+  });
+  if (!response.ok) {
+    throw new Error(`Failed to fetch agent activity: ${response.statusText}`);
+  }
+  const data = await response.json();
+  return {
+    success: data.success ?? false,
+    runs: data.runs || [],
+    cursor: data.cursor || ""
+  };
+};
+
+// AgentActivityList.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var STATUS_CONFIG = {
+  FINISHED: { icon: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react4.CheckCircle, { size: 16 }), color: "hsl(var(--severity-low, 142 71% 45%))", label: "Completed" },
+  SUCCESS: { icon: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react4.CheckCircle, { size: 16 }), color: "hsl(var(--severity-low, 142 71% 45%))", label: "Completed" },
+  FAILED: { icon: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react4.XCircle, { size: 16 }), color: "hsl(var(--severity-critical, 0 72% 55%))", label: "Failed" },
+  ABORTED: { icon: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react4.XCircle, { size: 16 }), color: "hsl(var(--severity-critical, 0 72% 55%))", label: "Aborted" },
+  EXECUTING: { icon: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react4.Loader2, { size: 16 }), color: "hsl(var(--severity-medium, 38 92% 50%))", label: "Running" },
+  RUNNING: { icon: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react4.Loader2, { size: 16 }), color: "hsl(var(--severity-medium, 38 92% 50%))", label: "Running" },
+  WAITING: { icon: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react4.Clock, { size: 16 }), color: "hsl(var(--severity-info, 217 91% 60%))", label: "Waiting" }
+};
+var getRunIcon = (run) => {
+  const src = (run.execution_source || "").toLowerCase();
+  const arg = (run.execution_argument || "").toLowerCase();
+  if (src.includes("schedule") || src.includes("cron")) return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react4.Clock, { size: 18 });
+  if (src.includes("webhook") || src.includes("http")) return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react4.Globe, { size: 18 });
+  if (arg.includes("alert") || arg.includes("detect")) return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react4.Activity, { size: 18 });
+  if (arg.includes("report") || arg.includes("email")) return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react4.FileText, { size: 18 });
+  if (arg.includes("endpoint") || arg.includes("server")) return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react4.Server, { size: 18 });
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react4.Zap, { size: 18 });
+};
+var getRunIconColor = (run) => {
+  const status = (run.status || "").toUpperCase();
+  if (status === "FINISHED" || status === "SUCCESS") return "hsl(var(--severity-low, 142 71% 45%))";
+  if (status === "FAILED" || status === "ABORTED") return "hsl(var(--severity-critical, 0 72% 55%))";
+  if (status === "EXECUTING" || status === "RUNNING") return "hsl(var(--severity-medium, 38 92% 50%))";
+  return "hsl(var(--primary, 24 100% 50%))";
+};
+var formatDuration = (run) => {
+  if (run.started_at && run.completed_at) {
+    const startSec = Number(run.started_at);
+    const endSec = Number(run.completed_at);
+    if (!isNaN(startSec) && !isNaN(endSec)) {
+      const ms = (endSec - startSec) * 1e3;
+      if (ms < 1e3) return `${Math.round(ms)}ms`;
+      if (ms < 6e4) return `${(ms / 1e3).toFixed(1)}s`;
+      return `${Math.floor(ms / 6e4)}m ${Math.floor(ms % 6e4 / 1e3)}s`;
+    }
+  }
+  if (run.duration) return `${run.duration.toFixed(1)}s`;
+  return "";
+};
+var getTimeAgo = (dateStr) => {
+  try {
+    const ts = isNaN(Number(dateStr)) ? new Date(dateStr).getTime() : Number(dateStr) * 1e3;
+    if (isNaN(ts)) return dateStr;
+    const diffSec = Math.max(0, Math.floor((Date.now() - ts) / 1e3));
+    if (diffSec < 60) return `${diffSec}s ago`;
+    if (diffSec < 3600) return `${Math.floor(diffSec / 60)}m ago`;
+    if (diffSec < 86400) return `${Math.floor(diffSec / 3600)}h ago`;
+    return `${Math.floor(diffSec / 86400)}d ago`;
+  } catch {
+    return dateStr;
+  }
+};
+var getRunTitle = (run) => {
+  if (run.workflow?.name) return run.workflow.name;
+  if (run.execution_argument) {
+    try {
+      const parsed = JSON.parse(run.execution_argument);
+      if (parsed.title) return parsed.title;
+      if (parsed.action) return parsed.action;
+      if (parsed.name) return parsed.name;
+    } catch {
+      const clean = run.execution_argument.replace(/[{}"]/g, "").trim();
+      if (clean.length > 0 && clean.length < 80) return clean;
+    }
+  }
+  return `Execution ${run.execution_id?.slice(0, 8) || "\u2014"}`;
+};
+var getRunSubtitle = (run) => {
+  if (run.result) {
+    try {
+      const p = JSON.parse(run.result);
+      if (p.output && typeof p.output === "string") {
+        return p.output.length > 120 ? p.output.slice(0, 120) + "\u2026" : p.output;
       }
-    ) : /* @__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,
+      if (p.original_input && typeof p.original_input === "string") {
+        return p.original_input.length > 120 ? p.original_input.slice(0, 120) + "\u2026" : p.original_input;
+      }
+      if (p.message && typeof p.message === "string") return p.message;
+    } catch {
+      if (run.result.length < 120) return run.result;
+    }
+  }
+  return run.execution_source || "Agent execution";
+};
+var AgentRunRow = ({ run, onClick, sx }) => {
+  const statusKey = (run.status || "").toUpperCase();
+  const cfg = STATUS_CONFIG[statusKey] || STATUS_CONFIG.WAITING;
+  const iconColor = getRunIconColor(run);
+  const duration = formatDuration(run);
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+    import_material14.Box,
+    {
+      onClick,
+      sx: [
+        {
+          borderRadius: 2,
+          border: "1px solid hsl(var(--border))",
+          bgcolor: "hsl(var(--card))",
+          display: "flex",
+          alignItems: "center",
+          gap: 2,
+          px: 2.5,
+          py: 2,
+          cursor: "pointer",
+          transition: "background 0.15s ease, border-color 0.15s ease",
+          "&:hover": {
+            bgcolor: "hsla(var(--muted) / 0.5)",
+            borderColor: "hsl(var(--muted-foreground) / 0.3)"
+          }
+        },
+        ...Array.isArray(sx) ? sx : sx ? [sx] : []
+      ],
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          import_material14.Box,
           {
-            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" }
-            }
+              width: 40,
+              height: 40,
+              borderRadius: "50%",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              bgcolor: `${iconColor}15`,
+              color: iconColor,
+              flexShrink: 0
+            },
+            children: getRunIcon(run)
           }
-        ) }, 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 });
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_material14.Box, { sx: { flex: 1, minWidth: 0 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_material14.Box, { sx: { display: "flex", alignItems: "center", gap: 1, mb: 0.25 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+              import_material14.Typography,
+              {
+                sx: {
+                  fontSize: "0.9rem",
+                  fontWeight: 500,
+                  color: "hsl(var(--foreground))",
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  whiteSpace: "nowrap"
+                },
+                children: getRunTitle(run)
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_material14.Box, { sx: { display: "flex", alignItems: "center", color: cfg.color, flexShrink: 0 }, children: cfg.icon })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            import_material14.Typography,
+            {
+              sx: {
+                fontSize: "0.78rem",
+                color: "hsl(var(--muted-foreground))",
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap"
+              },
+              children: getRunSubtitle(run)
             }
-          }
-        }
-        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` : ""
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_material14.Box, { sx: { display: "flex", alignItems: "center", gap: 1, mt: 0.5 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_material14.Typography, { sx: { fontSize: "0.72rem", color: "hsl(var(--muted-foreground))", opacity: 0.7 }, children: run.started_at ? getTimeAgo(run.started_at) : "\u2014" }),
+            duration && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_material14.Typography, { sx: { fontSize: "0.72rem", color: "hsl(var(--muted-foreground))", opacity: 0.4 }, children: "\xB7" }),
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_material14.Typography, { sx: { fontSize: "0.72rem", color: "hsl(var(--muted-foreground))", opacity: 0.7 }, children: duration })
             ] })
-          ] }),
-          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;
+          ] })
+        ] })
+      ]
+    }
+  );
+};
+var STATUS_FILTERS = [
+  { label: "All", value: "" },
+  { label: "Completed", value: "FINISHED" },
+  { label: "Running", value: "EXECUTING" },
+  { label: "Failed", value: "ABORTED" }
+];
+var AgentActivityList = ({
+  apiKey,
+  apiBaseUrl,
+  orgId,
+  onRunClick,
+  showSearchBar = true,
+  showStatusChips = true,
+  limit = 50,
+  emptyTitle = "No agent activity found",
+  emptySubtitle = "The agent has not performed any actions yet",
+  className,
+  sx,
+  toolbarSx,
+  rowSx
+}) => {
+  const [runs, setRuns] = (0, import_react13.useState)([]);
+  const [cursor, setCursor] = (0, import_react13.useState)("");
+  const [hasMore, setHasMore] = (0, import_react13.useState)(false);
+  const [isLoading, setIsLoading] = (0, import_react13.useState)(false);
+  const [error, setError] = (0, import_react13.useState)(null);
+  const [statusFilter, setStatusFilter] = (0, import_react13.useState)("");
+  const [searchQuery, setSearchQuery] = (0, import_react13.useState)("");
+  const [debouncedQuery, setDebouncedQuery] = (0, import_react13.useState)("");
+  const debounceRef = (0, import_react13.useRef)();
+  const updateSearchQuery = (0, import_react13.useCallback)((q) => {
+    setSearchQuery(q);
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+    debounceRef.current = setTimeout(() => setDebouncedQuery(q), 350);
+  }, []);
+  (0, import_react13.useEffect)(() => () => {
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+  }, []);
+  const fetchRuns = (0, import_react13.useCallback)(
+    async (append = false, cursorParam = "") => {
+      setIsLoading(true);
+      setError(null);
+      try {
+        const result = await searchAgentActivity({
+          limit,
+          status: statusFilter,
+          cursor: cursorParam,
+          apiKey,
+          apiBaseUrl,
+          orgId
+        });
+        if (result.success) {
+          setRuns((prev) => append ? [...prev, ...result.runs] : result.runs);
+          setCursor(result.cursor);
+          setHasMore(!!result.cursor && result.runs.length > 0);
+        } else {
+          setError("Failed to fetch agent activity");
+        }
+      } catch (err) {
+        setError(err instanceof Error ? err.message : "Failed to fetch agent activity");
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [statusFilter, limit, apiKey, apiBaseUrl, orgId]
+  );
+  (0, import_react13.useEffect)(() => {
+    fetchRuns(false, "");
+  }, [statusFilter, apiKey, apiBaseUrl, orgId]);
+  const loadMore = (0, import_react13.useCallback)(() => {
+    if (cursor && !isLoading) fetchRuns(true, cursor);
+  }, [cursor, isLoading, fetchRuns]);
+  const filteredRuns = debouncedQuery ? runs.filter((r) => {
+    const hay = [
+      getRunTitle(r),
+      getRunSubtitle(r),
+      r.execution_id,
+      r.execution_source,
+      r.status
+    ].filter(Boolean).join(" ").toLowerCase();
+    return hay.includes(debouncedQuery.toLowerCase());
+  }) : runs;
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+    import_material14.Box,
+    {
+      className,
+      sx: [{ display: "flex", flexDirection: "column", gap: 2 }, ...Array.isArray(sx) ? sx : sx ? [sx] : []],
+      children: [
+        (showSearchBar || showStatusChips) && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_material14.Box, { sx: [{ display: "flex", alignItems: "center", gap: 1.5, flexWrap: "wrap" }, ...Array.isArray(toolbarSx) ? toolbarSx : toolbarSx ? [toolbarSx] : []], children: [
+          showSearchBar && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            import_material14.TextField,
+            {
+              placeholder: "Search results...",
+              size: "small",
+              value: searchQuery,
+              onChange: (e) => updateSearchQuery(e.target.value),
+              slotProps: {
+                input: {
+                  startAdornment: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_material14.InputAdornment, { position: "start", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_Search.default, { sx: { fontSize: 18, color: "hsl(var(--muted-foreground))" } }) })
+                }
+              },
+              sx: {
+                flex: 1,
+                maxWidth: 280,
+                minWidth: 160,
+                "& .MuiOutlinedInput-root": {
+                  bgcolor: "hsl(var(--card))",
+                  borderRadius: 1.5,
+                  fontSize: "0.85rem",
+                  height: 36,
+                  "& fieldset": { borderColor: "hsl(var(--border))" },
+                  "&:hover fieldset": { borderColor: "hsl(var(--muted-foreground) / 0.3)" },
+                  "&.Mui-focused fieldset": { borderColor: "hsl(var(--primary))" }
+                },
+                "& .MuiInputBase-input": { color: "hsl(var(--foreground))" }
               }
-              if (pendingAsk.run_details?.id) {
-                submitQuestions(pendingAsk.run_details.id, questionAnswers);
+            }
+          ),
+          showStatusChips && STATUS_FILTERS.map((f) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            import_material14.Chip,
+            {
+              label: f.label,
+              size: "small",
+              variant: statusFilter === f.value ? "filled" : "outlined",
+              onClick: () => setStatusFilter(f.value),
+              sx: {
+                fontSize: "0.75rem",
+                height: 28,
+                borderColor: statusFilter === f.value ? "hsl(var(--primary))" : "hsl(var(--border))",
+                bgcolor: statusFilter === f.value ? "hsla(var(--primary) / 0.15)" : "transparent",
+                color: statusFilter === f.value ? "hsl(var(--primary))" : "hsl(var(--muted-foreground))",
+                "&:hover": { bgcolor: "hsl(var(--muted))" }
               }
-            };
-            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,
+            },
+            f.value
+          )),
+          isLoading && runs.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_material14.CircularProgress, { size: 16, sx: { color: "hsl(var(--primary))", ml: 0.5 } })
+        ] }),
+        isLoading && runs.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_material14.Box, { sx: { display: "flex", justifyContent: "center", py: 8 }, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_material14.CircularProgress, { size: 28, sx: { color: "hsl(var(--primary))" } }) }) : error ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_material14.Box, { sx: { textAlign: "center", py: 6 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react4.AlertCircle, { size: 28, style: { color: "hsl(var(--severity-critical, 0 72% 55%))", marginBottom: 8 } }),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            import_material14.Typography,
+            {
+              sx: { color: "hsl(var(--severity-critical, 0 72% 55%))", fontSize: "0.9rem", mb: 1 },
+              children: error
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            import_material14.Button,
             {
               size: "small",
-              variant: "text",
-              onClick: () => setViewMode("detailed"),
-              sx: { color: "hsl(var(--primary))", textTransform: "none", px: 0 },
-              children: "View detailed timeline \u2192"
+              onClick: () => fetchRuns(false, ""),
+              sx: { color: "hsl(var(--primary))", textTransform: "none" },
+              children: "Try again"
             }
-          ) })
-        ] });
-      })() }),
-      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,
+          )
+        ] }) : filteredRuns.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_material14.Box, { sx: { display: "flex", flexDirection: "column", alignItems: "center", textAlign: "center", py: 8 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            import_lucide_react4.Activity,
+            {
+              size: 40,
+              style: { color: "hsl(var(--muted-foreground))", marginBottom: 12 }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_material14.Typography, { sx: { color: "hsl(var(--muted-foreground))", fontSize: "0.9rem" }, children: emptyTitle }),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            import_material14.Typography,
+            {
+              sx: { color: "hsl(var(--muted-foreground))", fontSize: "0.8rem", mt: 0.5, opacity: 0.7 },
+              children: emptySubtitle
+            }
+          )
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_material14.Box, { sx: { display: "flex", flexDirection: "column", gap: 1.5 }, children: [
+          filteredRuns.map((run, idx) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            AgentRunRow,
             {
-              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
+              run,
+              onClick: () => onRunClick?.(run),
+              sx: rowSx
             },
-            i
+            run.execution_id || idx
           )),
-          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))",
+          hasMore && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_material14.Box, { sx: { display: "flex", justifyContent: "center", mt: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+            import_material14.Button,
+            {
+              size: "small",
+              onClick: loadMore,
+              disabled: isLoading,
+              sx: { color: "hsl(var(--primary))", textTransform: "none", fontSize: "0.8rem" },
+              children: [
+                isLoading ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_material14.CircularProgress, { size: 14, sx: { mr: 1 } }) : null,
+                "Load more"
+              ]
+            }
+          ) })
+        ] })
+      ]
+    }
+  );
+};
+var AgentActivityList_default = AgentActivityList;
+
+// AgentExecutionDrawer.tsx
+var import_material15 = require("@mui/material");
+var import_Close6 = __toESM(require("@mui/icons-material/Close"), 1);
+var import_OpenInNew3 = __toESM(require("@mui/icons-material/OpenInNew"), 1);
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var AgentExecutionDrawer = ({
+  open,
+  onClose,
+  run,
+  width = 720,
+  apiKey,
+  apiBaseUrl,
+  orgId,
+  className,
+  paperSx,
+  headerSx,
+  bodySx
+}) => {
+  const statusKey = (run?.status || "").toUpperCase();
+  const cfg = STATUS_CONFIG[statusKey] || STATUS_CONFIG.WAITING;
+  const duration = run ? formatDuration(run) : "";
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+    import_material15.Drawer,
+    {
+      anchor: "right",
+      open,
+      onClose,
+      slotProps: {
+        paper: {
+          className,
+          sx: [
+            {
+              width: { xs: "100%", sm: width },
+              maxWidth: "100vw",
               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)"
-              }
+              backgroundImage: "none",
+              borderLeft: "1px solid hsl(var(--border))"
             },
+            ...Array.isArray(paperSx) ? paperSx : paperSx ? [paperSx] : []
+          ]
+        }
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+          import_material15.Box,
+          {
+            sx: [
+              {
+                display: "flex",
+                alignItems: "center",
+                gap: 1.5,
+                px: 2.5,
+                py: 1.75,
+                borderBottom: "1px solid hsl(var(--border))",
+                position: "sticky",
+                top: 0,
+                zIndex: 2,
+                bgcolor: "hsl(var(--background))"
+              },
+              ...Array.isArray(headerSx) ? headerSx : headerSx ? [headerSx] : []
+            ],
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-                import_material12.InputBase,
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                import_material15.Box,
                 {
-                  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);
-                      }
-                    }
+                  sx: {
+                    width: 36,
+                    height: 36,
+                    borderRadius: "50%",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    background: "hsla(var(--primary) / 0.12)",
+                    color: "hsl(var(--primary))",
+                    flexShrink: 0
                   },
-                  disabled: agentRequestLoading,
-                  sx: { fontSize: "0.9rem", color: "hsl(var(--foreground))", px: 2 }
+                  children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(AgentIcon_default, { size: 20 })
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-                import_material12.IconButton,
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_material15.Box, { sx: { flex: 1, minWidth: 0 }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_material15.Box, { sx: { display: "flex", alignItems: "center", gap: 1, minWidth: 0 }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                    import_material15.Typography,
+                    {
+                      sx: {
+                        fontSize: "0.95rem",
+                        fontWeight: 600,
+                        color: "hsl(var(--foreground))",
+                        overflow: "hidden",
+                        textOverflow: "ellipsis",
+                        whiteSpace: "nowrap"
+                      },
+                      children: run ? getRunTitle(run) : "Agent execution"
+                    }
+                  ),
+                  run && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_material15.Box, { sx: { display: "flex", alignItems: "center", color: cfg.color, flexShrink: 0 }, children: cfg.icon })
+                ] }),
+                run && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_material15.Box, { sx: { display: "flex", alignItems: "center", gap: 1, mt: 0.25 }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_material15.Typography, { sx: { fontSize: "0.72rem", color: "hsl(var(--muted-foreground))" }, children: cfg.label }),
+                  run.started_at && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_material15.Typography, { sx: { fontSize: "0.72rem", color: "hsl(var(--muted-foreground))", opacity: 0.4 }, children: "\xB7" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_material15.Typography, { sx: { fontSize: "0.72rem", color: "hsl(var(--muted-foreground))" }, children: getTimeAgo(run.started_at) })
+                  ] }),
+                  duration && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_material15.Typography, { sx: { fontSize: "0.72rem", color: "hsl(var(--muted-foreground))", opacity: 0.4 }, children: "\xB7" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_material15.Typography, { sx: { fontSize: "0.72rem", color: "hsl(var(--muted-foreground))" }, children: duration })
+                  ] })
+                ] })
+              ] }),
+              run?.execution_id && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_material15.Tooltip, { title: "Open in new tab", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                import_material15.IconButton,
                 {
-                  type: "submit",
-                  disabled: !continuationText.trim() || agentRequestLoading,
+                  component: "a",
+                  href: `/agents?execution_id=${encodeURIComponent(run.execution_id)}${run.authorization ? `&authorization=${encodeURIComponent(run.authorization)}` : ""}`,
+                  target: "_blank",
+                  rel: "noopener noreferrer",
+                  size: "small",
                   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))" } : {}
+                    color: "hsl(var(--muted-foreground))",
+                    "&:hover": { color: "hsl(var(--foreground))", bgcolor: "hsl(var(--muted))" }
                   },
-                  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 } })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_OpenInNew3.default, { fontSize: "small" })
                 }
-              )
+              ) }),
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_material15.Tooltip, { title: "Close", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                import_material15.IconButton,
+                {
+                  onClick: onClose,
+                  size: "small",
+                  sx: {
+                    color: "hsl(var(--muted-foreground))",
+                    "&:hover": { color: "hsl(var(--foreground))", bgcolor: "hsl(var(--muted))" }
+                  },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_Close6.default, { fontSize: "small" })
+                }
+              ) })
             ]
           }
-        )
-      ] }) })
-    ] }),
-    /* @__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 }]
-          );
-        }
-      }
-    )
-  ] }) });
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_material15.Box, { sx: [{ flex: 1, overflowY: "auto", pt: 3 }, ...Array.isArray(bodySx) ? bodySx : bodySx ? [bodySx] : []], children: run ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          AgentUI_default,
+          {
+            initialExecution: {
+              execution_id: run.execution_id,
+              status: run.status,
+              started_at: run.started_at ? Number(run.started_at) : void 0,
+              completed_at: run.completed_at ? Number(run.completed_at) : void 0,
+              results: run.results,
+              workflow: run.workflow,
+              authorization: run.authorization
+            },
+            readUrlParams: false,
+            autoLoadApps: false,
+            hideHeroIcon: true,
+            hideAppPicker: true,
+            hideAttach: true,
+            disableStartTab: true,
+            compact: true,
+            maxWidth: width - 32,
+            apiKey,
+            apiBaseUrl,
+            orgId
+          },
+          run.execution_id
+        ) : null })
+      ]
+    }
+  );
 };
-var AgentUI_default = AgentUI;
+var AgentExecutionDrawer_default = AgentExecutionDrawer;
 
 // useAppLookup.ts
-var import_react12 = require("react");
+var import_react14 = 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 [loading, setLoading] = (0, import_react14.useState)(false);
+  const [info, setInfo] = (0, import_react14.useState)(null);
+  const [algoliaId, setAlgoliaId] = (0, import_react14.useState)(null);
   const {
     authStates,
     authenticatedApps,
@@ -7552,7 +8696,7 @@ function useAppLookup(appName) {
     handleSaveAuth,
     refreshAuth
   } = useAppAuth();
-  (0, import_react12.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     if (!appName) {
       setInfo(null);
       setAlgoliaId(null);
@@ -7589,14 +8733,8 @@ function useAppLookup(appName) {
       let appsList = null;
       if (API_CONFIG.apiKey) {
         try {
-          const res = await fetch(getApiUrl("/api/v1/apps"), {
-            credentials: "include",
-            headers: { ...getAuthHeader() }
-          });
-          if (res.ok) {
-            const apps = await res.json();
-            if (Array.isArray(apps)) appsList = apps;
-          }
+          const apps = await fetchAppsViaApiConfig();
+          if (Array.isArray(apps)) appsList = apps;
         } catch {
         }
       }
@@ -7637,13 +8775,13 @@ function useAppLookup(appName) {
       setLoading(false);
     })();
   }, [appName]);
-  const matchingEntries = (0, import_react12.useMemo)(() => {
+  const matchingEntries = (0, import_react14.useMemo)(() => {
     if (!appName) return [];
     return authenticatedApps.filter(
       (auth) => auth.app?.name && norm(auth.app.name) === norm(appName)
     );
   }, [appName, authenticatedApps]);
-  const image = (0, import_react12.useMemo)(() => {
+  const image = (0, import_react14.useMemo)(() => {
     if (info?.image) return info.image;
     for (const entry of matchingEntries) {
       const img = entry.app?.large_image || entry.large_image;
@@ -7651,7 +8789,7 @@ function useAppLookup(appName) {
     }
     return "";
   }, [info, matchingEntries]);
-  const algoliaApp = (0, import_react12.useMemo)(() => {
+  const algoliaApp = (0, import_react14.useMemo)(() => {
     if (!appName) return null;
     return {
       objectID: algoliaId || appName,
@@ -7684,6 +8822,9 @@ function useAppLookup(appName) {
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   API_CONFIG,
+  AgentActivityList,
+  AgentExecutionDrawer,
+  AgentRunDrawer,
   AgentUI,
   AppAuthSection,
   AppDetailDrawer,
@@ -7698,6 +8839,7 @@ function useAppLookup(appName) {
   getApiUrl,
   getAuthHeader,
   refreshAllIntegrationStatus,
+  searchAgentActivity,
   setToastImpl,
   toast,
   useAppAuth,