@shuffleio/shuffle-mcps 0.0.32 → 0.0.33

package/dist/index.js

@@ -2464,6 +2464,8 @@ var AppAuthCard = ({
   hideDocsLink,
   hideUrlFields,
   borderless,
+  compactAuthForm,
+  extraFieldsSlot,
   globalUrl,
   userdata,
   isLoaded,
@@ -2530,10 +2532,6 @@ var AppAuthCard = ({
         if (!alreadyValid && newestId !== autoTestFiredRef.current) {
           autoTestFiredRef.current = newestId;
           setTimeout(() => {
-            toast({
-              title: "Auto-testing new authentication",
-              description: `Verifying connection for ${app.name.replace(/_/g, " ")}...`
-            });
             setTestingAuthId(newestId);
             onTestConnection(app.objectID, newestId);
           }, 500);
@@ -2595,11 +2593,17 @@ var AppAuthCard = ({
         executionId: authState.executionId,
         errorCode: authState.errorCode
       });
+      if (autoTestFiredRef.current === testingAuthId) {
+        setSelectedAuthId(ADD_NEW_AUTH);
+        setUserHasSelected(true);
+        setPendingFailedAuthId(testingAuthId);
+        autoTestFiredRef.current = null;
+      }
       setTestingAuthId(null);
     }
   }, [authState.status, authState.errorMessage, authState.successMessage, authState.warningMessage, testingAuthId, apiAuthEntries, wasPreValidatedPerAuth]);
   const isCredentialError = localTestMessages.errorCode === 401 || localTestMessages.errorCode === 403;
-  const showAddNewForm = selectedAuthId === ADD_NEW_AUTH;
+  const showAddNewForm = compactAuthForm ? true : selectedAuthId === ADD_NEW_AUTH;
   const isConfigured = selectedAuth?.active === true;
   const isTested = selectedAuth?.validation?.valid === true;
   const getLastValidTimestamp = () => {
@@ -2621,6 +2625,8 @@ var AppAuthCard = ({
     });
   };
   const [localCredentials, setLocalCredentials] = (0, import_react7.useState)(authState.credentials || {});
+  const [revealedFields, setRevealedFields] = (0, import_react7.useState)({});
+  const [pendingFailedAuthId, setPendingFailedAuthId] = (0, import_react7.useState)(null);
   const [fieldErrors, setFieldErrors] = (0, import_react7.useState)({});
   const [loading, setLoading] = (0, import_react7.useState)(false);
   const [saving, setSaving] = (0, import_react7.useState)(false);
@@ -2696,7 +2702,8 @@ var AppAuthCard = ({
       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]) {
+        const isModel = lk === "model";
+        if ((isUrlish || isModel) && typeof v === "string" && v !== prev[k]) {
           next[k] = v;
           changed = true;
         }
@@ -2892,7 +2899,7 @@ var AppAuthCard = ({
             sx: {
               "& .MuiOutlinedInput-root": {
                 backgroundColor: "hsl(var(--background))",
-                borderRadius: 2,
+                borderRadius: 1,
                 "& fieldset": { borderColor: "hsl(var(--border))" },
                 "&:hover fieldset": { borderColor: "hsl(var(--border) / 0.8)" },
                 "&.Mui-focused fieldset": { borderColor: "hsl(var(--primary))" }
@@ -2915,7 +2922,7 @@ var AppAuthCard = ({
             sx: {
               "& .MuiOutlinedInput-root": {
                 backgroundColor: "hsl(var(--background))",
-                borderRadius: 2,
+                borderRadius: 1,
                 "& fieldset": { borderColor: "hsl(var(--border))" },
                 "&:hover fieldset": { borderColor: "hsl(var(--border) / 0.8)" },
                 "&.Mui-focused fieldset": { borderColor: "hsl(var(--primary))" }
@@ -2940,7 +2947,7 @@ var AppAuthCard = ({
             displayEmpty: true,
             sx: {
               backgroundColor: "action.hover",
-              borderRadius: 2,
+              borderRadius: 1,
               color: "text.primary",
               "& .MuiOutlinedInput-notchedOutline": { borderColor: "divider" },
               "&:hover .MuiOutlinedInput-notchedOutline": { borderColor: "text.disabled" },
@@ -2985,6 +2992,7 @@ var AppAuthCard = ({
       const fieldKey = param.id || param.name || `param_${index}`;
       const lowerName = (param.name || "").toLowerCase();
       const isSecretField = lowerName.includes("password") || lowerName.includes("secret") || lowerName.includes("key") || lowerName.includes("token");
+      const isRevealed = !!revealedFields[fieldKey];
       return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         import_material4.TextField,
         {
@@ -3015,13 +3023,25 @@ var AppAuthCard = ({
               onFocus: (e) => {
                 e.target.removeAttribute("readonly");
               }
-            }
+            },
+            input: isSecretField ? {
+              endAdornment: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                import_material4.IconButton,
+                {
+                  size: "small",
+                  onClick: () => setRevealedFields((prev) => ({ ...prev, [fieldKey]: !prev[fieldKey] })),
+                  "aria-label": isRevealed ? `Hide ${param.name}` : `Show ${param.name}`,
+                  sx: { color: "hsl(var(--muted-foreground))", "&:hover": { color: "hsl(var(--foreground))" } },
+                  children: isRevealed ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react3.EyeOff, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react3.Eye, { size: 16 })
+                }
+              )
+            } : void 0
           },
           name: `auth-${fieldKey}-${app.objectID}-${Math.random().toString(36).slice(2, 8)}`,
           sx: {
             "& .MuiOutlinedInput-root": {
               backgroundColor: isSecretField ? "hsl(var(--primary) / 0.06)" : "hsl(var(--muted))",
-              borderRadius: 2,
+              borderRadius: 1,
               "& fieldset": {
                 borderColor: fieldErrors[fieldKey] ? "hsl(var(--destructive))" : isSecretField ? "hsl(var(--primary) / 0.5)" : "hsl(var(--border))",
                 borderWidth: isSecretField ? 2 : 1
@@ -3033,7 +3053,7 @@ var AppAuthCard = ({
             },
             "& .MuiInputBase-input": {
               color: "hsl(var(--foreground))",
-              ...isSecretField && {
+              ...isSecretField && !isRevealed && {
                 WebkitTextSecurity: "disc",
                 textSecurity: "disc",
                 fontFamily: "text-security-disc, monospace"
@@ -3084,7 +3104,6 @@ var AppAuthCard = ({
     setSaveSuccess(success);
     if (success) {
       setUserHasSelected(false);
-      setLocalCredentials({});
       setFieldErrors({});
     }
   };
@@ -3292,7 +3311,7 @@ var AppAuthCard = ({
                 borderTop: borderless ? "none" : "1px solid hsl(var(--border))"
               },
               children: [
-                apiAuthEntries.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_material4.Box, { sx: { mb: 3 }, children: [
+                !compactAuthForm && apiAuthEntries.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_material4.Box, { sx: { mb: 3 }, children: [
                   /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_material4.Typography, { variant: "body2", sx: { color: "hsl(var(--muted-foreground))", mb: 1 }, children: "Select authentication" }),
                   /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_material4.FormControl, { fullWidth: true, size: "small", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
                     import_material4.Select,
@@ -3831,7 +3850,7 @@ var AppAuthCard = ({
                       children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_material4.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." })
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_material4.Typography, { variant: "subtitle2", sx: { color: "hsl(var(--foreground))", fontWeight: 600, mb: 2 }, children: apiAuthEntries.length === 0 ? "Configure Authentication" : "Add New Authentication" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_material4.Typography, { variant: "subtitle2", sx: { color: "hsl(var(--foreground))", fontWeight: 600, mb: 2 }, children: apiAuthEntries.length === 0 ? `Configure ${app.name.replace(/_/g, " ")}` : "Add New Authentication" }),
                   loading ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_material4.Box, { sx: { display: "flex", alignItems: "center", justifyContent: "center", py: 4 }, children: [
                     /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_material4.CircularProgress, { size: 32, sx: { color: "hsl(var(--primary))" } }),
                     /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_material4.Typography, { sx: { ml: 2, color: "hsl(var(--muted-foreground))" }, children: "Loading configuration..." })
@@ -3867,6 +3886,7 @@ var AppAuthCard = ({
                       ] })
                     }
                   ) : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_material4.Box, { sx: { display: "flex", flexDirection: "column", gap: 3 }, children: [
+                    extraFieldsSlot?.({ credentials: localCredentials, setField: handleCredentialChange }),
                     renderOAuth2Fields(),
                     renderParameterFields(),
                     authState.status === "error" && authState.errorMessage && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
@@ -3921,38 +3941,97 @@ var AppAuthCard = ({
                         children: "Failed to save authentication. Please try again."
                       }
                     ),
-                    !isOAuth2 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_material4.Box, { sx: { display: "flex", justifyContent: "flex-end", pt: 1.5 }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-                      import_material4.Button,
-                      {
-                        variant: "outlined",
-                        size: "medium",
-                        onClick: (e) => {
-                          e.stopPropagation();
-                          handleSave();
-                        },
-                        disabled: saving || !isFormValid(),
-                        sx: {
-                          borderColor: isFormValid() ? "hsl(var(--primary) / 0.5)" : "hsl(var(--border))",
-                          color: isFormValid() ? "hsl(var(--primary))" : "hsl(var(--muted-foreground))",
-                          fontWeight: 600,
-                          textTransform: "none",
-                          fontSize: "0.9rem",
-                          px: 3,
-                          py: 1,
-                          borderRadius: 2,
-                          transition: "all 0.2s ease",
-                          "&:hover": {
-                            borderColor: "hsl(var(--primary))",
-                            backgroundColor: "hsl(var(--primary) / 0.08)"
+                    !isOAuth2 && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_material4.Box, { sx: { display: "flex", justifyContent: "flex-end", pt: 1.5, gap: 1, flexWrap: "wrap" }, children: [
+                      pendingFailedAuthId && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                        import_material4.Button,
+                        {
+                          variant: "text",
+                          size: "medium",
+                          onClick: async (e) => {
+                            e.stopPropagation();
+                            const previousFailedId = pendingFailedAuthId;
+                            setPendingFailedAuthId(null);
+                            setUserHasSelected(true);
+                            setFieldErrors({});
+                            await onSaveAuth(app.objectID, localCredentials);
+                            let entries = apiAuthEntries;
+                            if (onRefreshAuth) {
+                              await onRefreshAuth();
+                            }
+                            entries = apiAuthEntries || [];
+                            const sorted = [...entries].sort((a, b) => (b.created || 0) - (a.created || 0));
+                            const acceptId = sorted[0]?.id || previousFailedId;
+                            setSelectedAuthId(acceptId);
+                            const stale = entries.filter((e2) => e2.id && e2.id !== acceptId);
+                            await Promise.all(stale.map(async (entry) => {
+                              try {
+                                await fetch(getApiUrl(`/api/v1/apps/authentication/${entry.id}`), {
+                                  method: "DELETE",
+                                  credentials: "include",
+                                  headers: { ...getAuthHeader() }
+                                });
+                              } catch (err) {
+                                console.error("[AppAuthCard] Failed to delete stale auth on Save anyway:", err);
+                              }
+                            }));
+                            if (onRefreshAuth) await onRefreshAuth();
+                            if (onSelectAuth) onSelectAuth(app.objectID, acceptId);
+                            if (typeof window !== "undefined") {
+                              window.dispatchEvent(new CustomEvent("integrations-changed"));
+                              window.dispatchEvent(new CustomEvent("agent-drawer-close"));
+                            }
                           },
-                          "&.Mui-disabled": {
-                            borderColor: "hsl(var(--border))",
-                            color: "hsl(var(--muted-foreground))"
-                          }
-                        },
-                        children: saving ? "Saving..." : "Save Authentication"
-                      }
-                    ) }),
+                          sx: {
+                            color: "hsl(var(--muted-foreground))",
+                            fontWeight: 600,
+                            textTransform: "none",
+                            fontSize: "0.85rem",
+                            px: 2,
+                            py: 1,
+                            borderRadius: 2,
+                            "&:hover": {
+                              color: "hsl(var(--foreground))",
+                              backgroundColor: "hsl(var(--muted) / 0.5)"
+                            }
+                          },
+                          title: "Our test isn't always authoritative \u2014 keep the credentials you saved and dismiss the failure.",
+                          children: "Save anyway"
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                        import_material4.Button,
+                        {
+                          variant: "outlined",
+                          size: "medium",
+                          onClick: (e) => {
+                            e.stopPropagation();
+                            setPendingFailedAuthId(null);
+                            handleSave();
+                          },
+                          disabled: saving || !isFormValid(),
+                          sx: {
+                            borderColor: isFormValid() ? "hsl(var(--primary) / 0.5)" : "hsl(var(--border))",
+                            color: isFormValid() ? "hsl(var(--primary))" : "hsl(var(--muted-foreground))",
+                            fontWeight: 600,
+                            textTransform: "none",
+                            fontSize: "0.9rem",
+                            px: 3,
+                            py: 1,
+                            borderRadius: 2,
+                            transition: "all 0.2s ease",
+                            "&:hover": {
+                              borderColor: "hsl(var(--primary))",
+                              backgroundColor: "hsl(var(--primary) / 0.08)"
+                            },
+                            "&.Mui-disabled": {
+                              borderColor: "hsl(var(--border))",
+                              color: "hsl(var(--muted-foreground))"
+                            }
+                          },
+                          children: saving ? "Testing..." : pendingFailedAuthId ? "Retry Test" : "Test Authentication"
+                        }
+                      )
+                    ] }),
                     isOAuth2 && (() => {
                       const hasClientId = !!localCredentials["client_id"]?.trim();
                       const hasClientSecret = !!localCredentials["client_secret"]?.trim();
@@ -6029,28 +6108,38 @@ function AppDetailDrawer({
     }
   }, [open, appName]);
   const isLoadingAll = appLoading || isAuthenticated && appAuthLoading;
+  const drawerWidth = `min(${width}px, 100vw)`;
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
     import_material9.Drawer,
     {
       anchor,
       open,
       onClose: handleClose,
-      slotProps: {
-        paper: {
-          className: scopeClassName,
-          sx: {
-            width: { xs: "100%", sm: width },
-            maxWidth: "100vw",
-            display: "flex",
-            flexDirection: "column",
-            background: "linear-gradient(180deg, hsl(var(--card)) 0%, hsl(var(--background)) 100%)",
-            borderLeft: anchor === "right" ? "1px solid hsl(var(--border))" : "none",
-            borderRight: anchor === "left" ? "1px solid hsl(var(--border))" : "none"
-          }
+      PaperProps: {
+        className: scopeClassName,
+        sx: {
+          width: drawerWidth,
+          minWidth: drawerWidth,
+          maxWidth: drawerWidth,
+          flex: `0 0 ${drawerWidth}`,
+          height: "100vh",
+          display: "flex",
+          flexDirection: "column",
+          overflow: "hidden",
+          background: "linear-gradient(180deg, hsl(var(--card)) 0%, hsl(var(--background)) 100%)",
+          borderLeft: anchor === "right" ? "1px solid hsl(var(--border))" : "none",
+          borderRight: anchor === "left" ? "1px solid hsl(var(--border))" : "none"
         }
       },
       sx: {
-        "& .MuiDrawer-paper": { boxSizing: "border-box" }
+        zIndex: 9999,
+        "& .MuiDrawer-paper": {
+          boxSizing: "border-box",
+          width: `${drawerWidth} !important`,
+          minWidth: `${drawerWidth} !important`,
+          maxWidth: `${drawerWidth} !important`,
+          flex: `0 0 ${drawerWidth} !important`
+        }
       },
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
@@ -7083,6 +7172,7 @@ function AppSearchDrawer({
     const t = setTimeout(() => setHighlightActive(true), highlightDelayMs);
     return () => clearTimeout(t);
   }, [open, highlightAppName, highlightDelayMs]);
+  const drawerWidth = `min(${width}px, 100vw)`;
   const handleClose = () => {
     setDetailAppName(null);
     setDetailAppId(null);
@@ -7159,29 +7249,38 @@ function AppSearchDrawer({
         anchor,
         open: open && detailAppName === null,
         onClose: handleClose,
-        slotProps: {
-          paper: {
-            className: scopeClassName,
-            sx: {
-              // Strict, environment-independent sizing so the drawer
-              // looks identical on every host (Shuffle Security, /agents,
-              // test page, embedded library, etc.). No breakpoint variance.
-              width: `min(${width}px, 100vw)`,
-              minWidth: `min(${width}px, 100vw)`,
-              maxWidth: "100vw",
-              height: "100vh",
-              display: "flex",
-              flexDirection: "column",
-              overflow: "hidden",
-              background: "linear-gradient(180deg, hsl(var(--card)) 0%, hsl(var(--background)) 100%)",
-              borderLeft: anchor === "right" ? "1px solid hsl(var(--border))" : "none",
-              borderRight: anchor === "left" ? "1px solid hsl(var(--border))" : "none"
-            }
+        PaperProps: {
+          className: scopeClassName,
+          sx: {
+            // Strict, environment-independent sizing so the drawer
+            // looks identical on every host (Shuffle Security, /agents,
+            // test page, embedded library, etc.). No breakpoint variance.
+            // NOTE: use PaperProps (not slotProps.paper) — slotProps.paper
+            // was added in MUI v6 and is silently ignored on MUI v5 hosts,
+            // which made the drawer collapse to content width when
+            // consumed from the published library.
+            width: drawerWidth,
+            minWidth: drawerWidth,
+            maxWidth: drawerWidth,
+            flex: `0 0 ${drawerWidth}`,
+            height: "100vh",
+            display: "flex",
+            flexDirection: "column",
+            overflow: "hidden",
+            background: "linear-gradient(180deg, hsl(var(--card)) 0%, hsl(var(--background)) 100%)",
+            borderLeft: anchor === "right" ? "1px solid hsl(var(--border))" : "none",
+            borderRight: anchor === "left" ? "1px solid hsl(var(--border))" : "none"
           }
         },
         sx: {
           zIndex: 9999,
-          "& .MuiDrawer-paper": { boxSizing: "border-box" }
+          "& .MuiDrawer-paper": {
+            boxSizing: "border-box",
+            width: `${drawerWidth} !important`,
+            minWidth: `${drawerWidth} !important`,
+            maxWidth: `${drawerWidth} !important`,
+            flex: `0 0 ${drawerWidth} !important`
+          }
         },
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
@@ -7213,7 +7312,7 @@ function AppSearchDrawer({
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_material11.Box, { sx: { flex: 1, boxSizing: "border-box", overflow: "hidden", p: 3, minHeight: 0, display: "flex", flexDirection: "column" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_material11.Box, { sx: { flex: 1, width: "100%", minWidth: 0, boxSizing: "border-box", overflow: "hidden", p: 3, minHeight: 0, display: "flex", flexDirection: "column" }, children: [
             connectionPathApps && connectionPathApps.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_material11.Box, { sx: { mb: 2.5 }, children: [
               /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_material11.Typography, { sx: { color: "hsl(var(--muted-foreground))", fontSize: "0.7rem", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.05em", mb: 1 }, children: "In this usecase" }),
               /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_material11.Box, { sx: { display: "flex", gap: 1.5, flexWrap: "wrap" }, children: connectionPathApps.map((app) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_material11.Tooltip, { title: app.name.replace(/_/g, " "), arrow: true, placement: "bottom", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
@@ -7260,6 +7359,8 @@ function AppSearchDrawer({
               {
                 sx: {
                   flex: 1,
+                  width: "100%",
+                  minWidth: 0,
                   minHeight: 0,
                   overflow: "hidden",
                   "& .singul-container, & .singul-search-bar-container": {
@@ -7272,16 +7373,22 @@ function AppSearchDrawer({
                   },
                   "& .singul-results-container": {
                     flex: 1,
+                    width: "100%",
+                    minWidth: 0,
                     minHeight: 0,
                     maxHeight: "none",
                     overflowY: "auto"
                   },
                   "& .singul-results-grid": {
+                    width: "100% !important",
+                    minWidth: "0 !important",
                     gridTemplateColumns: "repeat(2, minmax(0, 1fr)) !important",
                     gridAutoRows: "78px !important",
                     gap: "12px !important"
                   },
                   "& .singul-results-grid .singul-dropdown-item": {
+                    width: "100%",
+                    maxWidth: "100%",
                     minWidth: 0,
                     minHeight: "78px !important",
                     maxHeight: "78px !important",
@@ -8045,6 +8152,73 @@ function invalidateResolvedApps() {
   _cache.clear();
 }
 
+// llmProviderDetect.ts
+var SHUFFLE_AI_PRESET = "Shuffle AI";
+var CUSTOM_PRESET = "Custom / self-hosted";
+var ENDPOINT_PRESETS = [
+  { label: SHUFFLE_AI_PRESET, url: "" },
+  { label: "OpenAI", url: "https://api.openai.com/v1", apiKeyUrl: "https://platform.openai.com/api-keys", apiKeyHint: "Create a key under API keys in the OpenAI platform dashboard." },
+  { label: "Anthropic", url: "https://api.anthropic.com/v1/", apiKeyUrl: "https://console.anthropic.com/settings/keys", apiKeyHint: "Generate a key under Settings \u2192 API Keys in the Anthropic Console." },
+  { label: "Google Gemini", url: "https://generativelanguage.googleapis.com/v1beta/openai/", apiKeyUrl: "https://aistudio.google.com/app/apikey", apiKeyHint: "Create a key in Google AI Studio under Get API key." },
+  { label: "Mistral", url: "https://api.mistral.ai/v1", apiKeyUrl: "https://console.mistral.ai/api-keys/", apiKeyHint: "Create a key under API Keys in the Mistral Console." },
+  { label: "Groq", url: "https://api.groq.com/openai/v1", apiKeyUrl: "https://console.groq.com/keys", apiKeyHint: "Create a key under API Keys in the Groq Console." },
+  { label: "DeepSeek", url: "https://api.deepseek.com/v1", apiKeyUrl: "https://platform.deepseek.com/api_keys", apiKeyHint: "Create a key under API Keys in the DeepSeek platform." },
+  { label: "Together AI", url: "https://api.together.xyz/v1", apiKeyUrl: "https://api.together.ai/settings/api-keys", apiKeyHint: "Create a key under Settings \u2192 API Keys in Together AI." },
+  { label: "OpenRouter", url: "https://openrouter.ai/api/v1", apiKeyUrl: "https://openrouter.ai/keys", apiKeyHint: "Create a key under Keys in your OpenRouter dashboard." },
+  { label: "Ollama (localhost)", url: "http://localhost:11434/v1", apiKeyHint: "Local Ollama does not require an API key \u2014 any non-empty value works." },
+  { label: "LM Studio (localhost)", url: "http://localhost:1234/v1", apiKeyHint: "Local LM Studio does not require an API key \u2014 any non-empty value works." },
+  { label: CUSTOM_PRESET, url: "" }
+];
+var PROVIDER_DOMAINS = {
+  "Shuffle AI": "shuffler.io",
+  OpenAI: "openai.com",
+  Anthropic: "anthropic.com",
+  "Google Gemini": "gemini.google.com",
+  Mistral: "mistral.ai",
+  Groq: "groq.com",
+  DeepSeek: "deepseek.com",
+  "Together AI": "together.ai",
+  OpenRouter: "openrouter.ai",
+  "Ollama (localhost)": "ollama.com",
+  "LM Studio (localhost)": "lmstudio.ai"
+};
+var hostnameOf = (url) => {
+  try {
+    return new URL(url).hostname.replace(/^www\./, "");
+  } catch {
+    return null;
+  }
+};
+var detectLLMProvider = (url) => {
+  if (!url) return null;
+  const trimmed = url.trim();
+  if (!trimmed) return null;
+  const exact = ENDPOINT_PRESETS.find((p) => p.url && p.url === trimmed);
+  if (exact) return exact;
+  const host = hostnameOf(trimmed);
+  if (host) {
+    const byHost = ENDPOINT_PRESETS.find((p) => {
+      const presetHost = hostnameOf(p.url);
+      return presetHost && presetHost === host;
+    });
+    if (byHost) return byHost;
+    if (host === "localhost" || host === "127.0.0.1") {
+      if (trimmed.includes(":11434")) return ENDPOINT_PRESETS.find((p) => p.label === "Ollama (localhost)") || null;
+      if (trimmed.includes(":1234")) return ENDPOINT_PRESETS.find((p) => p.label === "LM Studio (localhost)") || null;
+    }
+  }
+  return ENDPOINT_PRESETS.find((p) => p.label === CUSTOM_PRESET) || null;
+};
+var getProviderLogoUrl = (label, url) => {
+  if (!label && !url) return "";
+  let domain = label ? PROVIDER_DOMAINS[label] : void 0;
+  if (!domain && url) {
+    const host = hostnameOf(url);
+    if (host) domain = host;
+  }
+  return domain ? `https://www.google.com/s2/favicons?domain=${domain}&sz=64` : "";
+};
+
 // agentRun.ts
 init_api();
 var resolveTarget = (path, opts = {}) => {
@@ -8959,10 +9133,10 @@ var AgentRunDiagnosisBanner = ({ run, sx, onJumpToEvidence, executionId }) => {
   const outputWarning = !isFailed && hasOutputWarning(run);
   const diagnosis = outputWarning ? diagnoseOutputWarning(run) : null;
   if (!failureInfo && !diagnosis) return null;
-  const isCritical = !!failureInfo;
+  const isCritical = !!failureInfo || diagnosis?.kind === "token_limit";
   const tone = isCritical ? "critical" : "medium";
   const Icon = isCritical ? import_lucide_react10.AlertTriangle : import_lucide_react10.HelpCircle;
-  const message = isCritical ? failureInfo.reason : `${diagnosis.title} \u2014 ${diagnosis.remediation}`;
+  const message = failureInfo ? failureInfo.reason : `${diagnosis.title} \u2014 ${diagnosis.remediation}`;
   const firstEvidence = diagnosis?.evidence?.[0] || null;
   const jumpDecisionIndex = firstEvidence ? extractDecisionIndex(firstEvidence.path) : null;
   const canJump = !!(onJumpToEvidence && jumpDecisionIndex !== null);
@@ -9501,7 +9675,7 @@ var TimelineRow = ({
               ),
               /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_material16.Box, { sx: {
                 flex: 1,
-                minWidth: 0,
+                minWidth: 180,
                 fontSize: "0.85rem",
                 color: "hsl(var(--foreground))",
                 maxHeight: 60,
@@ -9511,7 +9685,7 @@ var TimelineRow = ({
                 "& a": { color: "hsl(var(--primary))", textDecoration: "underline", textUnderlineOffset: "2px" },
                 "& a:hover": { opacity: 0.85 }
               }, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_markdown4.default, { remarkPlugins: [import_remark_gfm4.default, import_remark_breaks.default], children: normalizeMarkdown(displayLabel) }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_material16.Tooltip, { title: hasTiming ? `Duration: ${dur.toFixed(2)}s \xB7 ${new Date(itemStart * 1e3).toLocaleString()}` : "No timing data", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_material16.Box, { sx: { width: maxWidth, position: "relative", height: 10, flexShrink: 0 }, children: dur > 0 && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_material16.Box, { sx: {
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_material16.Tooltip, { title: hasTiming ? `Duration: ${dur.toFixed(2)}s \xB7 ${new Date(itemStart * 1e3).toLocaleString()}` : "No timing data", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_material16.Box, { sx: { width: maxWidth, maxWidth, minWidth: 40, position: "relative", height: 10, flexShrink: 1, flexBasis: maxWidth }, children: dur > 0 && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_material16.Box, { sx: {
                 position: "absolute",
                 left: Math.max(0, offset),
                 width,
@@ -9919,6 +10093,7 @@ var AgentUI = ({
   const [chosenApps, setChosenApps] = (0, import_react15.useState)(apps ?? defaultApps ?? BUILTIN_DEFAULT_APPS);
   const [availableApps, setAvailableApps] = (0, import_react15.useState)([]);
   const [authAppsLoading, setAuthAppsLoading] = (0, import_react15.useState)(autoLoadApps && hasApiKey);
+  const [detectedLLM, setDetectedLLM] = (0, import_react15.useState)(null);
   const [executionApps, setExecutionApps] = (0, import_react15.useState)([]);
   const [resolvedToolApps, setResolvedToolApps] = (0, import_react15.useState)({});
   const [appSearchOpen, setAppSearchOpen] = (0, import_react15.useState)(false);
@@ -9953,9 +10128,25 @@ var AgentUI = ({
   const [error, setError] = (0, import_react15.useState)(null);
   const [searchParams, setSearchParams] = (0, import_react_router_dom2.useSearchParams)();
   const initialViewParam = searchParams.get("agentView");
-  const [viewMode, setViewMode] = (0, import_react15.useState)(
-    initialViewParam === "detailed" ? "detailed" : "simple"
-  );
+  const readStoredViewMode = () => {
+    if (initialViewParam === "detailed") return "detailed";
+    if (typeof window === "undefined") return "simple";
+    try {
+      const stored = window.localStorage.getItem("shuffle-agents-view-mode");
+      if (stored === "detailed" || stored === "simple") return stored;
+    } catch {
+    }
+    return "simple";
+  };
+  const [viewMode, setViewMode] = (0, import_react15.useState)(readStoredViewMode);
+  (0, import_react15.useEffect)(() => {
+    try {
+      if (typeof window !== "undefined") {
+        window.localStorage.setItem("shuffle-agents-view-mode", viewMode);
+      }
+    } catch {
+    }
+  }, [viewMode]);
   const [attachedImages, setAttachedImages] = (0, import_react15.useState)([]);
   const [nowTick, setNowTick] = (0, import_react15.useState)(() => Math.floor(Date.now() / 1e3));
   const [localRunStart, setLocalRunStart] = (0, import_react15.useState)(null);
@@ -10191,12 +10382,23 @@ var AgentUI = ({
       const list = Array.isArray(result) ? result : result?.data || [];
       const seen = /* @__PURE__ */ new Set();
       const loaded = [];
+      let detectedFromEntries = null;
       for (const entry of list) {
         const app = entry?.app || entry;
         const name = app?.name;
         if (!name) continue;
         const valid = entry?.active || entry?.validation?.valid || entry?.hasValidAuth || app?.is_valid || app?.tested;
         if (valid === false) continue;
+        if (!detectedFromEntries && (name.toLowerCase() === "openai" || app?.id === "5d19dd82517870c68d40cacad9b5ca91")) {
+          const urlField = (entry?.fields || []).find((f) => (f?.key || "").toLowerCase() === "url");
+          const urlVal = (urlField?.value || "").trim();
+          if (urlVal) {
+            const preset = detectLLMProvider(urlVal);
+            if (preset) {
+              detectedFromEntries = { label: preset.label, url: urlVal, logo: getProviderLogoUrl(preset.label, urlVal) };
+            }
+          }
+        }
         const key = normalizeAgentAppName(name);
         if (seen.has(key)) continue;
         seen.add(key);
@@ -10208,6 +10410,7 @@ var AgentUI = ({
       }
       if (signal?.cancelled) return;
       setAvailableApps(loaded);
+      setDetectedLLM(detectedFromEntries);
     } catch {
     } finally {
       if (!signal?.cancelled) setAuthAppsLoading(false);
@@ -10469,7 +10672,12 @@ var AgentUI = ({
     setSimpleSubmitAttempted(false);
     setError(null);
     setLocalRunStart(null);
-    setViewMode("simple");
+    try {
+      const stored = typeof window !== "undefined" ? window.localStorage.getItem("shuffle-agents-view-mode") : null;
+      setViewMode(stored === "detailed" ? "detailed" : "simple");
+    } catch {
+      setViewMode("simple");
+    }
     setShowStarter(false);
     userPickedStartRef.current = false;
     if (readUrlParams && typeof window !== "undefined") {
@@ -11909,8 +12117,19 @@ var AgentUI = ({
                           "&:hover": { color: "hsl(var(--foreground))", bgcolor: "hsl(var(--muted) / 0.5)" }
                         },
                         children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react11.Settings, { size: 14 }),
-                          "Choose LLM"
+                          detectedLLM?.logo ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                            import_material16.Box,
+                            {
+                              component: "img",
+                              src: detectedLLM.logo,
+                              alt: "",
+                              sx: { width: 14, height: 14, borderRadius: "3px", objectFit: "contain", display: "block" },
+                              onError: (e) => {
+                                e.currentTarget.style.display = "none";
+                              }
+                            }
+                          ) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react11.Settings, { size: 14 }),
+                          detectedLLM?.label || "Choose LLM"
                         ]
                       }
                     ) }),
@@ -12144,7 +12363,7 @@ var AgentUI = ({
                 AgentRunDiagnosisBanner_default,
                 {
                   run: execution?.results?.length ? execution : agentData,
-                  sx: { px: 0, pb: 0, mb: 2 },
+                  sx: { px: 1.5, pb: 0, mb: 2 },
                   executionId: execution?.execution_id,
                   onJumpToEvidence: (decisionIndex) => {
                     const dec = (agentData?.decisions || [])[decisionIndex];
@@ -12369,14 +12588,14 @@ var AgentUI = ({
                       ] })
                     ] });
                   })() : !finishAnswer && isRunning ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_material16.Typography, { sx: { fontSize: "0.85rem", color: "hsl(var(--muted-foreground))" }, children: "Waiting for the agent to produce the first step." }) : !finishAnswer ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_material16.Typography, { sx: { fontSize: "0.85rem", color: "hsl(var(--muted-foreground))" }, children: "No final answer was returned. Open Detailed to inspect each step." }) : null,
-                  !isRunning && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_material16.Box, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_material16.Box, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                     import_material16.Button,
                     {
                       size: "small",
                       variant: "text",
                       onClick: () => setViewMode("detailed"),
                       sx: { color: "hsl(var(--primary))", textTransform: "none", px: 0 },
-                      children: "View detailed timeline \u2192"
+                      children: isRunning ? "View live detailed timeline \u2192" : "View detailed timeline \u2192"
                     }
                   ) })
                 ] });
@@ -12657,8 +12876,6 @@ var import_jsx_runtime22 = require("react/jsx-runtime");
 var import_react17 = require("react");
 var OPENAI_APP_NAME = "OpenAI";
 var OPENAI_APP_ID = "5d19dd82517870c68d40cacad9b5ca91";
-var SHUFFLE_AI_PRESET = "Shuffle AI";
-var CUSTOM_PRESET = "Custom / self-hosted";
 var OPENAI_ALGOLIA_APP = {
   name: OPENAI_APP_NAME,
   description: "OpenAI-compatible LLM endpoint for agent operations",
@@ -12678,32 +12895,18 @@ var OPENAI_ALGOLIA_APP = {
   triggers: [],
   verified: true
 };
-var ENDPOINT_PRESETS = [
-  { label: SHUFFLE_AI_PRESET, url: "" },
-  { label: "OpenAI", url: "https://api.openai.com/v1", apiKeyUrl: "https://platform.openai.com/api-keys", apiKeyHint: "Create a key under API keys in the OpenAI platform dashboard." },
-  { label: "Anthropic", url: "https://api.anthropic.com/v1/", apiKeyUrl: "https://console.anthropic.com/settings/keys", apiKeyHint: "Generate a key under Settings \u2192 API Keys in the Anthropic Console." },
-  { label: "Google Gemini", url: "https://generativelanguage.googleapis.com/v1beta/openai/", apiKeyUrl: "https://aistudio.google.com/app/apikey", apiKeyHint: "Create a key in Google AI Studio under Get API key." },
-  { label: "Mistral", url: "https://api.mistral.ai/v1", apiKeyUrl: "https://console.mistral.ai/api-keys/", apiKeyHint: "Create a key under API Keys in the Mistral Console." },
-  { label: "Groq", url: "https://api.groq.com/openai/v1", apiKeyUrl: "https://console.groq.com/keys", apiKeyHint: "Create a key under API Keys in the Groq Console." },
-  { label: "DeepSeek", url: "https://api.deepseek.com/v1", apiKeyUrl: "https://platform.deepseek.com/api_keys", apiKeyHint: "Create a key under API Keys in the DeepSeek platform." },
-  { label: "Together AI", url: "https://api.together.xyz/v1", apiKeyUrl: "https://api.together.ai/settings/api-keys", apiKeyHint: "Create a key under Settings \u2192 API Keys in Together AI." },
-  { label: "OpenRouter", url: "https://openrouter.ai/api/v1", apiKeyUrl: "https://openrouter.ai/keys", apiKeyHint: "Create a key under Keys in your OpenRouter dashboard." },
-  { label: "Ollama (localhost)", url: "http://localhost:11434/v1", apiKeyHint: "Local Ollama does not require an API key \u2014 any non-empty value works." },
-  { label: "LM Studio (localhost)", url: "http://localhost:1234/v1", apiKeyHint: "Local LM Studio does not require an API key \u2014 any non-empty value works." },
-  { label: CUSTOM_PRESET, url: "" }
-];
-var PROVIDER_DOMAINS = {
-  "Shuffle AI": "shuffler.io",
-  OpenAI: "openai.com",
-  Anthropic: "anthropic.com",
-  "Google Gemini": "gemini.google.com",
-  Mistral: "mistral.ai",
-  Groq: "groq.com",
-  DeepSeek: "deepseek.com",
-  "Together AI": "together.ai",
-  OpenRouter: "openrouter.ai",
-  "Ollama (localhost)": "ollama.com",
-  "LM Studio (localhost)": "lmstudio.ai"
+var CUSTOM_MODEL = "Custom\u2026";
+var PROVIDER_MODELS = {
+  OpenAI: ["gpt-5.5", "gpt-5.5-pro", "gpt-5.4", "gpt-5.4-pro", "gpt-5.4-mini", "gpt-5.4-nano", "gpt-5.2", "gpt-5", "gpt-5-mini", "gpt-5-nano", "gpt-4.1", "o4-mini"],
+  Anthropic: ["claude-opus-4-5", "claude-sonnet-4-5", "claude-haiku-4-5", "claude-opus-4", "claude-sonnet-4", "claude-3-7-sonnet-latest"],
+  "Google Gemini": ["gemini-3-pro-preview", "gemini-3-flash-preview", "gemini-3.1-pro-preview", "gemini-3.1-flash-lite-preview", "gemini-3.5-flash", "gemini-2.5-pro", "gemini-2.5-flash", "gemini-2.5-flash-lite"],
+  Mistral: ["mistral-large-2026", "mistral-medium-3", "mistral-small-3.2", "codestral-2026", "magistral-medium-2026", "ministral-8b-latest"],
+  Groq: ["llama-4-maverick-17b-128e", "llama-4-scout-17b-16e", "llama-3.3-70b-versatile", "deepseek-r1-distill-llama-70b", "qwen-3-32b", "kimi-k2-instruct"],
+  DeepSeek: ["deepseek-v3.5", "deepseek-v3", "deepseek-r1", "deepseek-coder-v3"],
+  "Together AI": ["meta-llama/Llama-4-Maverick-17B-128E-Instruct", "meta-llama/Llama-4-Scout-17B-16E-Instruct", "deepseek-ai/DeepSeek-V3", "deepseek-ai/DeepSeek-R1", "Qwen/Qwen3-235B-A22B"],
+  OpenRouter: ["openai/gpt-5.5", "openai/gpt-5.4", "anthropic/claude-opus-4.5", "anthropic/claude-sonnet-4.5", "google/gemini-3-pro-preview", "google/gemini-3-flash-preview", "meta-llama/llama-4-maverick", "deepseek/deepseek-v3.5", "x-ai/grok-4"],
+  "Ollama (localhost)": ["llama3.3", "llama3.2", "qwen3", "qwen3:32b", "deepseek-r1", "deepseek-r1:70b", "mistral-small3", "phi4", "gemma3"],
+  "LM Studio (localhost)": ["llama-3.3-70b-instruct", "qwen3-32b", "deepseek-r1-distill-qwen-32b", "mistral-small-3", "phi-4", "gemma-3-27b"]
 };
 var ProviderLogo = ({ label, url }) => {
   const [errored, setErrored] = (0, import_react16.useState)(false);
@@ -12733,46 +12936,16 @@ var LocalLLMConfig = ({ compact, globalUrl, userdata, isLoaded, isLoggedIn, serv
     status: "pending",
     credentials: {}
   };
-  const currentUrl = authState.credentials?.url || "";
-  const attemptedDeletionRef = (0, import_react16.useRef)(/* @__PURE__ */ new Set());
-  (0, import_react16.useEffect)(() => {
-    if (authState.status === "testing") return;
-    const failedEntries = openaiEntries.filter((e) => e.validation && e.validation.valid === false && e.id);
-    if (failedEntries.length === 0) return;
-    let cancelled = false;
-    (async () => {
-      let deletedAny = false;
-      for (const entry of failedEntries) {
-        const id = entry.id;
-        if (attemptedDeletionRef.current.has(id)) continue;
-        attemptedDeletionRef.current.add(id);
-        try {
-          const resp = await fetch(getApiUrl(`/api/v1/apps/authentication/${id}`), {
-            method: "DELETE",
-            credentials: "include",
-            headers: { ...getAuthHeader() }
-          });
-          if (resp.ok) deletedAny = true;
-        } catch (err) {
-          console.error("[LocalLLMConfig] Failed to auto-delete failed OpenAI auth:", err);
-        }
-      }
-      if (!cancelled && deletedAny) {
-        await refreshAuth();
-        refreshAllIntegrationStatus();
-      }
-    })();
-    return () => {
-      cancelled = true;
-    };
-  }, [openaiEntries, authState.status, refreshAuth]);
+  const savedUrlFromEntry = (openaiEntries[0]?.fields || []).find((f) => (f?.key || "").toLowerCase() === "url")?.value || "";
+  const currentUrl = (authState.credentials?.url || savedUrlFromEntry || "").trim();
+  const [customModel, setCustomModel] = (0, import_react16.useState)("");
+  const [customMode, setCustomMode] = (0, import_react16.useState)(false);
   const hasOpenAIEntries = openaiEntries.length > 0;
   const effectivePreset = (0, import_react16.useMemo)(() => {
     if (selectedPreset) return selectedPreset;
     if (!currentUrl && !hasOpenAIEntries) return SHUFFLE_AI_PRESET;
     if (!currentUrl) return "";
-    const match = ENDPOINT_PRESETS.find((p) => p.url && p.url === currentUrl);
-    return match ? match.label : CUSTOM_PRESET;
+    return detectLLMProvider(currentUrl)?.label || CUSTOM_PRESET;
   }, [selectedPreset, currentUrl, hasOpenAIEntries]);
   const applyShuffleAI = async () => {
     let deletedAny = false;
@@ -12809,7 +12982,16 @@ var LocalLLMConfig = ({ compact, globalUrl, userdata, isLoaded, isLoggedIn, serv
     setSelectedPreset(label);
     const preset = ENDPOINT_PRESETS.find((p) => p.label === label);
     if (!preset) return;
-    handleAuthChange(OPENAI_APP_ID, { ...authState.credentials, url: preset.label === CUSTOM_PRESET ? customUrl : preset.url });
+    const topModel = PROVIDER_MODELS[label]?.[0] || "";
+    const existingModel = authState.credentials?.model || "";
+    const nextModel = topModel || existingModel;
+    setCustomMode(false);
+    setCustomModel("");
+    handleAuthChange(OPENAI_APP_ID, {
+      ...authState.credentials,
+      url: preset.label === CUSTOM_PRESET ? customUrl : preset.url,
+      ...nextModel ? { model: nextModel } : {}
+    });
   };
   const handleCustomUrlChange = (value) => {
     setCustomUrl(value);
@@ -12884,7 +13066,7 @@ var LocalLLMConfig = ({ compact, globalUrl, userdata, isLoaded, isLoggedIn, serv
             );
           },
           slotProps: {
-            paper: { sx: { bgcolor: "hsl(var(--popover))", color: "hsl(var(--popover-foreground))", border: "1px solid hsl(var(--border))" } },
+            paper: { sx: { bgcolor: "hsl(var(--popover))", color: "hsl(var(--popover-foreground))", border: "1px solid hsl(var(--border))", minWidth: 580 } },
             popper: { sx: { zIndex: 9999 } }
           }
         }
@@ -12947,6 +13129,59 @@ var LocalLLMConfig = ({ compact, globalUrl, userdata, isLoaded, isLoggedIn, serv
         hideDocsLink: true,
         hideUrlFields: true,
         borderless: true,
+        compactAuthForm: true,
+        extraFieldsSlot: (PROVIDER_MODELS[effectivePreset]?.length ?? 0) > 0 ? ({ credentials, setField }) => {
+          const liveModel = credentials.model || "";
+          const presetModels = PROVIDER_MODELS[effectivePreset] || [];
+          const liveIsCustom = liveModel !== "" && !presetModels.includes(liveModel);
+          const showCustom = customMode || liveIsCustom;
+          const liveSelectValue = showCustom ? CUSTOM_MODEL : liveModel || null;
+          return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_material18.Box, { sx: { display: "flex", flexDirection: "column", gap: 1 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_material18.Typography, { sx: { fontSize: "0.85rem", fontWeight: 600, color: "hsl(var(--foreground))" }, children: "Model" }),
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+              import_material18.Autocomplete,
+              {
+                size: "small",
+                fullWidth: true,
+                disableClearable: true,
+                options: [...presetModels, CUSTOM_MODEL],
+                value: liveSelectValue,
+                onChange: (_e, val) => {
+                  if (!val) return;
+                  if (val === CUSTOM_MODEL) {
+                    setCustomMode(true);
+                    setField("model", customModel);
+                  } else {
+                    setCustomMode(false);
+                    setCustomModel("");
+                    setField("model", val);
+                  }
+                },
+                isOptionEqualToValue: (opt, val) => opt === val,
+                slotProps: {
+                  paper: { sx: { bgcolor: "hsl(var(--popover))", color: "hsl(var(--popover-foreground))", border: "1px solid hsl(var(--border))" } },
+                  popper: { sx: { zIndex: 9999 } }
+                },
+                renderInput: (params) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_material18.TextField, { ...params, placeholder: "Select a model\u2026" })
+              }
+            ),
+            showCustom && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+              import_material18.TextField,
+              {
+                size: "small",
+                fullWidth: true,
+                placeholder: "Enter a custom model identifier",
+                value: customModel || (liveIsCustom ? liveModel : ""),
+                onChange: (e) => {
+                  setCustomModel(e.target.value);
+                  setField("model", e.target.value);
+                },
+                helperText: "Exact model name as expected by the provider's API",
+                sx: { "& .MuiFormHelperText-root": { color: "hsl(var(--muted-foreground))" } }
+              }
+            )
+          ] });
+        } : void 0,
         globalUrl,
         userdata,
         isLoaded,
@@ -13024,9 +13259,16 @@ var AgentRunDrawer = ({
         setActiveTab("localLLM");
       }
     };
+    const onClose2 = () => {
+      onClose();
+    };
     window.addEventListener("agent-drawer-open", onOpen);
-    return () => window.removeEventListener("agent-drawer-open", onOpen);
-  }, []);
+    window.addEventListener("agent-drawer-close", onClose2);
+    return () => {
+      window.removeEventListener("agent-drawer-open", onOpen);
+      window.removeEventListener("agent-drawer-close", onClose2);
+    };
+  }, [onClose]);
   const effectiveLocalLLMSlot = localLLMSlot ?? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     LocalLLMConfig_default,
     {
@@ -13498,7 +13740,7 @@ var STATUS_CONFIG = {
   EXECUTING: { icon: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react13.Loader2, { size: 16 }), color: "hsl(var(--severity-medium, 38 92% 50%))", label: "Running" },
   RUNNING: { icon: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react13.Loader2, { size: 16 }), color: "hsl(var(--severity-medium, 38 92% 50%))", label: "Running" },
   WAITING: { icon: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react13.Clock, { size: 16 }), color: "hsl(var(--severity-info, 217 91% 60%))", label: "Waiting" },
-  LIMIT_REACHED: { icon: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react14.AlertTriangle, { size: 16 }), color: "hsl(var(--severity-medium, 38 92% 50%))", label: "Limit reached" }
+  LIMIT_REACHED: { icon: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react14.AlertTriangle, { size: 16 }), color: "hsl(var(--severity-critical, 0 72% 55%))", label: "Limit reached" }
 };
 var getEffectiveStatus = (run) => {
   const raw = (run.status || "").toUpperCase();
@@ -13511,21 +13753,126 @@ var getEffectiveStatus = (run) => {
   }
   return raw;
 };
-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_runtime24.jsx)(import_lucide_react13.Clock, { size: 18 });
-  if (src.includes("webhook") || src.includes("http")) return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react13.Globe, { size: 18 });
-  if (arg.includes("alert") || arg.includes("detect")) return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react13.Activity, { size: 18 });
-  if (arg.includes("report") || arg.includes("email")) return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react13.FileText, { size: 18 });
-  if (arg.includes("endpoint") || arg.includes("server")) return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react13.Server, { size: 18 });
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react13.Zap, { size: 18 });
+var SOURCE_ICON_SIZE = 18;
+var looksLikeExecutionId = (s) => /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(s.trim());
+var DATASTORE_KEY_RE = /\bKey:\s*(\S+)/i;
+var DATASTORE_CATEGORY_RE = /\bCategory:\s*(\S+)/i;
+var parseDatastoreTask = (arg) => {
+  if (!arg) return null;
+  const k = arg.match(DATASTORE_KEY_RE);
+  const c = arg.match(DATASTORE_CATEGORY_RE);
+  if (!k || !c) return null;
+  const key = (k[1] || "").trim();
+  const category = (c[1] || "").trim();
+  if (!key || !category) return null;
+  return { key, category };
+};
+var isAIAgentResult = (result) => String(result?.action?.app_name || "").trim().toLowerCase() === "ai agent";
+var getAIAgentResultPayload = (run) => {
+  const results = Array.isArray(run.results) ? run.results : [];
+  const agentResult = results.find(isAIAgentResult);
+  if (!agentResult || typeof agentResult !== "object" || !("result" in agentResult)) return null;
+  return tryParseJson(agentResult.result);
+};
+var getDirectAgentInput = (payload) => {
+  if (!payload || typeof payload !== "object") return null;
+  const obj = payload;
+  if (typeof obj.original_input === "string" && obj.original_input.trim()) {
+    return obj.original_input.trim();
+  }
+  if (typeof obj.input === "string" && obj.input.trim()) {
+    return obj.input.trim();
+  }
+  return null;
+};
+var findDatastoreTaskInRun = (run) => {
+  const agentInput = getDirectAgentInput(getAIAgentResultPayload(run));
+  const agentHit = parseDatastoreTask(agentInput || void 0);
+  if (agentHit) return agentHit;
+  const anyRun = run;
+  const candidates = [];
+  if (typeof anyRun.original_input === "string") candidates.push(anyRun.original_input);
+  if (typeof anyRun.input === "string") candidates.push(anyRun.input);
+  if (run.execution_argument) candidates.push(run.execution_argument);
+  if (run.result) candidates.push(run.result);
+  if (Array.isArray(anyRun.results)) {
+    try {
+      candidates.push(JSON.stringify(anyRun.results));
+    } catch {
+    }
+  }
+  for (const c of candidates) {
+    const hit = parseDatastoreTask(c);
+    if (hit) return hit;
+  }
+  return null;
+};
+var classifyRunSource = (run) => {
+  const raw = (run.execution_source || "").trim();
+  const src = raw.toLowerCase();
+  const ds = findDatastoreTaskInRun(run);
+  if (ds || src.includes("datastore") || src.includes("enrichment") || src.includes("automation")) {
+    return {
+      kind: "datastore",
+      label: "Datastore automation",
+      reason: ds ? `Started by datastore automation (category "${ds.category}", key "${ds.key}"). Click to open in Datastore.` : "Started by a datastore automation (e.g. enrichment trigger).",
+      icon: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react13.Database, { size: SOURCE_ICON_SIZE }),
+      datastoreKey: ds?.key,
+      datastoreCategory: ds?.category
+    };
+  }
+  if (src.includes("schedule") || src.includes("cron")) {
+    return {
+      kind: "schedule",
+      label: "Schedule",
+      reason: "Started by a scheduled trigger (cron).",
+      icon: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react13.Clock, { size: SOURCE_ICON_SIZE })
+    };
+  }
+  if (src.includes("webhook") || src.includes("http")) {
+    return {
+      kind: "webhook",
+      label: "Webhook",
+      reason: "Started by an incoming webhook / HTTP trigger.",
+      icon: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react13.Globe, { size: SOURCE_ICON_SIZE })
+    };
+  }
+  if (src.includes("form")) {
+    return {
+      kind: "form",
+      label: "Form",
+      reason: "Started by a form submission.",
+      icon: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react13.FileText, { size: SOURCE_ICON_SIZE })
+    };
+  }
+  if (raw && looksLikeExecutionId(raw)) {
+    return {
+      kind: "workflow",
+      label: "Workflow",
+      reason: "Started by another workflow as a subflow.",
+      icon: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react13.Workflow, { size: SOURCE_ICON_SIZE })
+    };
+  }
+  if (src === "" || src === "manual" || src === "default" || src === "demo") {
+    return {
+      kind: "manual",
+      label: "Manual",
+      reason: "Started manually from the Agents UI.",
+      icon: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react13.Hand, { size: SOURCE_ICON_SIZE })
+    };
+  }
+  return {
+    kind: "unknown",
+    label: raw || "Unknown",
+    reason: raw ? `Started by "${raw}".` : "Trigger source unknown.",
+    icon: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react13.Zap, { size: SOURCE_ICON_SIZE })
+  };
 };
 var getRunIconColor = (run) => {
   const status = getEffectiveStatus(run);
   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 === "LIMIT_REACHED") return "hsl(var(--severity-medium, 38 92% 50%))";
+  if (status === "LIMIT_REACHED") 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%))";
 };
@@ -13623,9 +13970,12 @@ var tryParseJson = (s) => {
   }
 };
 var getRunPrompt = (run) => {
-  const results = Array.isArray(run.results) ? run.results : null;
+  const anyRun = run;
+  const agentInput = getDirectAgentInput(getAIAgentResultPayload(run));
+  if (agentInput) return agentInput;
+  const results = Array.isArray(anyRun.results) ? anyRun.results : null;
   if (results) {
-    const agentResult = results.find((r) => r?.action?.app_name === "AI Agent");
+    const agentResult = results.find(isAIAgentResult);
     if (agentResult?.result) {
       const hit = deepFindPrompt(tryParseJson(agentResult.result));
       if (hit) return hit;
@@ -13636,6 +13986,12 @@ var getRunPrompt = (run) => {
       if (hit) return hit;
     }
   }
+  if (typeof anyRun.original_input === "string" && anyRun.original_input.trim()) {
+    return anyRun.original_input.trim();
+  }
+  if (typeof anyRun.input === "string" && anyRun.input.trim()) {
+    return anyRun.input.trim();
+  }
   if (run.result) {
     const hit = deepFindPrompt(tryParseJson(run.result));
     if (hit) return hit;
@@ -13676,7 +14032,9 @@ var getRunSubtitle = (run) => {
       if (run.result.length < 120) return run.result;
     }
   }
-  return run.execution_source || "Agent execution";
+  const status = getEffectiveStatus(run);
+  const isRunning = status === "EXECUTING" || status === "RUNNING" || status === "WAITING";
+  return run.execution_source || (isRunning ? "Agent still running\u2026" : "Agent execution");
 };
 var normalizeResultStatus = (s) => {
   const v = (s || "").toUpperCase();
@@ -13778,41 +14136,60 @@ var AgentRunRow = ({ run, onClick, sx, appIcons, onAppClick }) => {
         ...Array.isArray(sx) ? sx : sx ? [sx] : []
       ],
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-          import_material20.Box,
-          {
-            sx: {
-              width: 40,
-              height: 40,
-              borderRadius: "50%",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              bgcolor: `${iconColor}15`,
-              color: iconColor,
-              flexShrink: 0
-            },
-            children: getRunIcon(run)
-          }
-        ),
+        (() => {
+          const sourceInfo = classifyRunSource(run);
+          const dsLink = sourceInfo.kind === "datastore" && sourceInfo.datastoreKey && sourceInfo.datastoreCategory ? `https://shuffler.io/admin?tab=datastore&category=${encodeURIComponent(sourceInfo.datastoreCategory)}&key=${encodeURIComponent(sourceInfo.datastoreKey)}` : null;
+          return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+            import_material20.Tooltip,
+            {
+              title: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_material20.Box, { sx: { lineHeight: 1.4 }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_material20.Box, { sx: { fontWeight: 600 }, children: sourceInfo.label }),
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_material20.Box, { sx: { opacity: 0.85 }, children: sourceInfo.reason })
+              ] }),
+              placement: "top",
+              arrow: true,
+              children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                import_material20.Box,
+                {
+                  onClick: dsLink ? (e) => {
+                    e.stopPropagation();
+                    window.open(dsLink, "_blank", "noopener,noreferrer");
+                  } : void 0,
+                  sx: {
+                    width: 40,
+                    height: 40,
+                    borderRadius: "50%",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    bgcolor: `${iconColor}15`,
+                    color: iconColor,
+                    flexShrink: 0,
+                    cursor: dsLink ? "pointer" : "inherit",
+                    transition: "background 0.15s ease",
+                    "&:hover": dsLink ? { bgcolor: `${iconColor}30` } : void 0
+                  },
+                  children: sourceInfo.icon
+                }
+              )
+            }
+          );
+        })(),
         /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_material20.Box, { sx: { flex: 1, minWidth: 0 }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_material20.Box, { sx: { display: "flex", alignItems: "center", gap: 1, mb: 0.25 }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-              import_material20.Typography,
-              {
-                sx: {
-                  fontSize: "0.9rem",
-                  fontWeight: 500,
-                  color: "hsl(var(--foreground))",
-                  overflow: "hidden",
-                  textOverflow: "ellipsis",
-                  whiteSpace: "nowrap"
-                },
-                children: getRunTitle(run)
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_material20.Box, { sx: { display: "flex", alignItems: "center", color: cfg.color, flexShrink: 0 }, children: cfg.icon })
-          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_material20.Box, { sx: { display: "flex", alignItems: "center", gap: 1, mb: 0.25 }, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+            import_material20.Typography,
+            {
+              sx: {
+                fontSize: "0.9rem",
+                fontWeight: 500,
+                color: "hsl(var(--foreground))",
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap"
+              },
+              children: getRunTitle(run)
+            }
+          ) }),
           /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
             import_material20.Typography,
             {
@@ -13907,18 +14284,7 @@ var AgentRunRow = ({ run, onClick, sx, appIcons, onAppClick }) => {
                   ) }, t.name);
                 })
               }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-              import_material20.Typography,
-              {
-                sx: {
-                  fontSize: "0.7rem",
-                  color: "hsl(var(--muted-foreground))",
-                  opacity: 0.5,
-                  fontStyle: "italic"
-                },
-                children: "No apps"
-              }
-            )
+            ) : null
           }
         )
       ]
@@ -14739,6 +15105,15 @@ var AgentsView = ({
     open: false,
     tab: "localLLM"
   });
+  (0, import_react20.useEffect)(() => {
+    if (typeof window === "undefined") return;
+    const handler = (e) => {
+      const detail = e.detail;
+      setBuiltInDrawer({ open: true, tab: detail?.tab ?? "localLLM" });
+    };
+    window.addEventListener("agent-drawer-open", handler);
+    return () => window.removeEventListener("agent-drawer-open", handler);
+  }, []);
   const effectiveSchedule = (0, import_react20.useCallback)(
     async (info) => {
       if (onSchedule) return onSchedule(info);