@opentabs-dev/browser-extension 0.0.45 → 0.0.46

package/dist/side-panel/side-panel.js

@@ -58540,6 +58540,9 @@ var setBrowserToolEnabled = (tool, enabled) => sendRequest("config.setBrowserToo
   tool,
   enabled
 });
+var setAllBrowserToolsEnabled = (enabled) => sendRequest("config.setAllBrowserToolsEnabled", {
+  enabled
+});
 var searchPlugins = (query) => sendRequest("plugin.search", {
   query
 });
@@ -71618,8 +71621,7 @@ var BrowserToolsCard = (t0) => {
         enabled: checked
       }));
     });
-    const promises = tools.filter((t_1) => t_1.enabled !== checked).map((t_2) => setBrowserToolEnabled(t_2.name, checked));
-    Promise.all(promises).catch(() => {
+    setAllBrowserToolsEnabled(checked).catch(() => {
       if (toggleCounter.current === myVersion) {
         onToolsChange(() => preToggleRef.current);
       }
@@ -71631,10 +71633,10 @@ var BrowserToolsCard = (t0) => {
     const newEnabled = !currentEnabled;
     onToolsChange((prev_0) => {
       preToggleRef.current = prev_0;
-      return prev_0.map((t_3) => t_3.name === toolName ? {
-        ...t_3,
+      return prev_0.map((t_1) => t_1.name === toolName ? {
+        ...t_1,
         enabled: newEnabled
-      } : t_3);
+      } : t_1);
     });
     setBrowserToolEnabled(toolName, newEnabled).catch(() => {
       if (toggleCounter.current === myVersion_0) {
@@ -71644,7 +71646,7 @@ var BrowserToolsCard = (t0) => {
     });
   };
   const filterLower = toolFilter?.toLowerCase() ?? "";
-  const visibleTools = filterLower ? tools.filter((t_4) => toDisplayName(t_4.name).toLowerCase().includes(filterLower) || t_4.name.toLowerCase().includes(filterLower) || t_4.description.toLowerCase().includes(filterLower)) : tools;
+  const visibleTools = filterLower ? tools.filter((t_2) => toDisplayName(t_2.name).toLowerCase().includes(filterLower) || t_2.name.toLowerCase().includes(filterLower) || t_2.description.toLowerCase().includes(filterLower)) : tools;
   let t4;
   if ($[4] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
     t4 = /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", {
@@ -75243,7 +75245,7 @@ function _temp26(e_0) {
 var import_react19 = __toESM(require_react(), 1);
 var import_jsx_runtime52 = __toESM(require_jsx_runtime(), 1);
 var PluginCard = (t0) => {
-  const $ = (0, import_compiler_runtime25.c)(45);
+  const $ = (0, import_compiler_runtime25.c)(47);
   const {
     plugin,
     activeTools,
@@ -75252,7 +75254,8 @@ var PluginCard = (t0) => {
     onUpdate,
     onRemove,
     updatingPlugin,
-    removingPlugin
+    removingPlugin,
+    actionError
   } = t0;
   const [toggleError, setToggleError] = (0, import_react19.useState)(null);
   const errorTimerRef = (0, import_react19.useRef)(void 0);
@@ -75488,13 +75491,25 @@ var PluginCard = (t0) => {
   } else {
     t20 = $[40];
   }
-  const t21 = AccordionComponent;
-  const t22 = "border-border border-t";
-  const t23 = toolFilter && /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", {
+  let t21;
+  if ($[41] !== actionError) {
+    t21 = actionError && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(AlertComponent, {
+      status: "error",
+      className: "mx-3 mb-1 px-2 py-1 text-[11px]",
+      children: actionError
+    });
+    $[41] = actionError;
+    $[42] = t21;
+  } else {
+    t21 = $[42];
+  }
+  const t22 = AccordionComponent;
+  const t23 = "border-border border-t";
+  const t24 = toolFilter && /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", {
     className: "text-muted-foreground mb-1 px-3 pt-2 text-xs",
     children: [visibleTools.length, " of ", pluginTools.length, " tools"]
   });
-  const t24 = visibleTools.map((tool) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(ToolRow, {
+  const t25 = visibleTools.map((tool) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(ToolRow, {
     name: tool.name,
     displayName: tool.displayName,
     description: tool.description,
@@ -75503,18 +75518,18 @@ var PluginCard = (t0) => {
     active: activeTools.has(`${plugin.name}:${tool.name}`),
     onToggle: () => handleToggleTool(tool.name, tool.enabled)
   }, tool.name));
-  let t25;
-  if ($[41] !== t21.Content || $[42] !== t23 || $[43] !== t24) {
-    t25 = /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(t21.Content, {
-      className: t22,
-      children: [t23, t24]
+  let t26;
+  if ($[43] !== t22.Content || $[44] !== t24 || $[45] !== t25) {
+    t26 = /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(t22.Content, {
+      className: t23,
+      children: [t24, t25]
     });
-    $[41] = t21.Content;
-    $[42] = t23;
-    $[43] = t24;
-    $[44] = t25;
+    $[43] = t22.Content;
+    $[44] = t24;
+    $[45] = t25;
+    $[46] = t26;
   } else {
-    t25 = $[44];
+    t26 = $[46];
   }
   return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(AccordionComponent.Item, {
     value: t4,
@@ -75532,7 +75547,7 @@ var PluginCard = (t0) => {
           "aria-label": `Toggle all tools for ${plugin.name}`
         })
       })]
-    }), t20, t25]
+    }), t20, t21, t26]
   });
 };
 function _temp10(t) {
@@ -75554,7 +75569,7 @@ function _temp52(e_0) {
 // src/side-panel/components/PluginList.tsx
 var import_jsx_runtime53 = __toESM(require_jsx_runtime(), 1);
 var PluginList = (t0) => {
-  const $ = (0, import_compiler_runtime26.c)(31);
+  const $ = (0, import_compiler_runtime26.c)(33);
   const {
     plugins,
     failedPlugins,
@@ -75563,7 +75578,8 @@ var PluginList = (t0) => {
     toolFilter,
     onUpdate,
     onRemove,
-    removingPlugins
+    removingPlugins,
+    pluginErrors
   } = t0;
   let filterLower;
   let t1;
@@ -75615,9 +75631,9 @@ var PluginList = (t0) => {
     t3 = $[10];
   }
   let t4;
-  if ($[11] !== activeTools || $[12] !== onRemove || $[13] !== onUpdate || $[14] !== removingPlugins || $[15] !== setPlugins || $[16] !== toolFilter || $[17] !== visiblePlugins) {
+  if ($[11] !== activeTools || $[12] !== onRemove || $[13] !== onUpdate || $[14] !== pluginErrors || $[15] !== removingPlugins || $[16] !== setPlugins || $[17] !== toolFilter || $[18] !== visiblePlugins) {
     let t52;
-    if ($[19] !== activeTools || $[20] !== onRemove || $[21] !== onUpdate || $[22] !== removingPlugins || $[23] !== setPlugins || $[24] !== toolFilter) {
+    if ($[20] !== activeTools || $[21] !== onRemove || $[22] !== onUpdate || $[23] !== pluginErrors || $[24] !== removingPlugins || $[25] !== setPlugins || $[26] !== toolFilter) {
       t52 = (plugin) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(PluginCard, {
         plugin,
         activeTools,
@@ -75625,52 +75641,55 @@ var PluginList = (t0) => {
         toolFilter,
         onUpdate: onUpdate ? () => onUpdate(plugin.name) : void 0,
         onRemove: onRemove ? () => onRemove(plugin.name) : void 0,
-        removingPlugin: removingPlugins?.has(plugin.name)
+        removingPlugin: removingPlugins?.has(plugin.name),
+        actionError: pluginErrors?.get(plugin.name) ?? null
       }, plugin.name);
-      $[19] = activeTools;
-      $[20] = onRemove;
-      $[21] = onUpdate;
-      $[22] = removingPlugins;
-      $[23] = setPlugins;
-      $[24] = toolFilter;
-      $[25] = t52;
+      $[20] = activeTools;
+      $[21] = onRemove;
+      $[22] = onUpdate;
+      $[23] = pluginErrors;
+      $[24] = removingPlugins;
+      $[25] = setPlugins;
+      $[26] = toolFilter;
+      $[27] = t52;
     } else {
-      t52 = $[25];
+      t52 = $[27];
     }
     t4 = visiblePlugins.map(t52);
     $[11] = activeTools;
     $[12] = onRemove;
     $[13] = onUpdate;
-    $[14] = removingPlugins;
-    $[15] = setPlugins;
-    $[16] = toolFilter;
-    $[17] = visiblePlugins;
-    $[18] = t4;
+    $[14] = pluginErrors;
+    $[15] = removingPlugins;
+    $[16] = setPlugins;
+    $[17] = toolFilter;
+    $[18] = visiblePlugins;
+    $[19] = t4;
   } else {
-    t4 = $[18];
+    t4 = $[19];
   }
   let t5;
-  if ($[26] !== t4) {
+  if ($[28] !== t4) {
     t5 = /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(AccordionComponent, {
       type: "multiple",
       className: "space-y-2",
       children: t4
     });
-    $[26] = t4;
-    $[27] = t5;
+    $[28] = t4;
+    $[29] = t5;
   } else {
-    t5 = $[27];
+    t5 = $[29];
   }
   let t6;
-  if ($[28] !== t3 || $[29] !== t5) {
+  if ($[30] !== t3 || $[31] !== t5) {
     t6 = /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_jsx_runtime53.Fragment, {
       children: [t3, t5]
     });
-    $[28] = t3;
-    $[29] = t5;
-    $[30] = t6;
+    $[30] = t3;
+    $[31] = t5;
+    $[32] = t6;
   } else {
-    t6 = $[30];
+    t6 = $[32];
   }
   return t6;
 };
@@ -75959,7 +75978,7 @@ var SectionHeader = (t0) => {
 };
 var matchesBrowserTool = (tool, filterLower) => toDisplayName(tool.name).toLowerCase().includes(filterLower) || tool.name.toLowerCase().includes(filterLower) || tool.description.toLowerCase().includes(filterLower);
 var SearchResults = (t0) => {
-  const $ = (0, import_compiler_runtime29.c)(50);
+  const $ = (0, import_compiler_runtime29.c)(52);
   const {
     plugins,
     browserTools,
@@ -75975,6 +75994,7 @@ var SearchResults = (t0) => {
     onUpdate,
     onRemove,
     removingPlugins,
+    pluginErrors,
     serverVersion
   } = t0;
   let installedMatches;
@@ -76006,20 +76026,20 @@ var SearchResults = (t0) => {
   let t3;
   let t4;
   let t5;
-  if ($[7] !== activeTools || $[8] !== browserTools || $[9] !== hasBrowserToolMatches || $[10] !== installErrors || $[11] !== installedMatches || $[12] !== installedShortNames || $[13] !== installingPlugins || $[14] !== npmResults || $[15] !== npmSearching || $[16] !== onInstall || $[17] !== onRemove || $[18] !== onUpdate || $[19] !== removingPlugins || $[20] !== serverVersion || $[21] !== setBrowserTools || $[22] !== setPlugins || $[23] !== toolFilter) {
+  if ($[7] !== activeTools || $[8] !== browserTools || $[9] !== hasBrowserToolMatches || $[10] !== installErrors || $[11] !== installedMatches || $[12] !== installedShortNames || $[13] !== installingPlugins || $[14] !== npmResults || $[15] !== npmSearching || $[16] !== onInstall || $[17] !== onRemove || $[18] !== onUpdate || $[19] !== pluginErrors || $[20] !== removingPlugins || $[21] !== serverVersion || $[22] !== setBrowserTools || $[23] !== setPlugins || $[24] !== toolFilter) {
     let t62;
-    if ($[28] !== installedShortNames) {
+    if ($[29] !== installedShortNames) {
       t62 = (r2) => !installedShortNames.has(extractShortName(r2.name));
-      $[28] = installedShortNames;
-      $[29] = t62;
+      $[29] = installedShortNames;
+      $[30] = t62;
     } else {
-      t62 = $[29];
+      t62 = $[30];
     }
     const availableResults = npmResults.filter(t62);
     const hasInstalledResults = installedMatches.length > 0 || hasBrowserToolMatches;
     showNoResults = toolFilter && !hasInstalledResults && !npmSearching && availableResults.length === 0;
     t3 = "space-y-4";
-    if ($[30] !== activeTools || $[31] !== browserTools || $[32] !== hasBrowserToolMatches || $[33] !== hasInstalledResults || $[34] !== installedMatches || $[35] !== onRemove || $[36] !== onUpdate || $[37] !== removingPlugins || $[38] !== serverVersion || $[39] !== setBrowserTools || $[40] !== setPlugins || $[41] !== toolFilter) {
+    if ($[31] !== activeTools || $[32] !== browserTools || $[33] !== hasBrowserToolMatches || $[34] !== hasInstalledResults || $[35] !== installedMatches || $[36] !== onRemove || $[37] !== onUpdate || $[38] !== pluginErrors || $[39] !== removingPlugins || $[40] !== serverVersion || $[41] !== setBrowserTools || $[42] !== setPlugins || $[43] !== toolFilter) {
       t4 = hasInstalledResults && /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", {
         children: [/* @__PURE__ */ (0, import_jsx_runtime56.jsx)(SectionHeader, {
           children: "Installed"
@@ -76041,24 +76061,26 @@ var SearchResults = (t0) => {
           toolFilter: "",
           onUpdate,
           onRemove,
-          removingPlugins
+          removingPlugins,
+          pluginErrors
         })]
       });
-      $[30] = activeTools;
-      $[31] = browserTools;
-      $[32] = hasBrowserToolMatches;
-      $[33] = hasInstalledResults;
-      $[34] = installedMatches;
-      $[35] = onRemove;
-      $[36] = onUpdate;
-      $[37] = removingPlugins;
-      $[38] = serverVersion;
-      $[39] = setBrowserTools;
-      $[40] = setPlugins;
-      $[41] = toolFilter;
-      $[42] = t4;
+      $[31] = activeTools;
+      $[32] = browserTools;
+      $[33] = hasBrowserToolMatches;
+      $[34] = hasInstalledResults;
+      $[35] = installedMatches;
+      $[36] = onRemove;
+      $[37] = onUpdate;
+      $[38] = pluginErrors;
+      $[39] = removingPlugins;
+      $[40] = serverVersion;
+      $[41] = setBrowserTools;
+      $[42] = setPlugins;
+      $[43] = toolFilter;
+      $[44] = t4;
     } else {
-      t4 = $[42];
+      t4 = $[44];
     }
     t5 = toolFilter && (npmSearching ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", {
       className: "flex justify-center py-4",
@@ -76090,45 +76112,46 @@ var SearchResults = (t0) => {
     $[16] = onInstall;
     $[17] = onRemove;
     $[18] = onUpdate;
-    $[19] = removingPlugins;
-    $[20] = serverVersion;
-    $[21] = setBrowserTools;
-    $[22] = setPlugins;
-    $[23] = toolFilter;
-    $[24] = showNoResults;
-    $[25] = t3;
-    $[26] = t4;
-    $[27] = t5;
+    $[19] = pluginErrors;
+    $[20] = removingPlugins;
+    $[21] = serverVersion;
+    $[22] = setBrowserTools;
+    $[23] = setPlugins;
+    $[24] = toolFilter;
+    $[25] = showNoResults;
+    $[26] = t3;
+    $[27] = t4;
+    $[28] = t5;
   } else {
-    showNoResults = $[24];
-    t3 = $[25];
-    t4 = $[26];
-    t5 = $[27];
+    showNoResults = $[25];
+    t3 = $[26];
+    t4 = $[27];
+    t5 = $[28];
   }
   let t6;
-  if ($[43] !== showNoResults) {
+  if ($[45] !== showNoResults) {
     t6 = showNoResults && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", {
       className: "text-muted-foreground py-8 text-center text-sm",
       children: "No results"
     });
-    $[43] = showNoResults;
-    $[44] = t6;
+    $[45] = showNoResults;
+    $[46] = t6;
   } else {
-    t6 = $[44];
+    t6 = $[46];
   }
   let t7;
-  if ($[45] !== t3 || $[46] !== t4 || $[47] !== t5 || $[48] !== t6) {
+  if ($[47] !== t3 || $[48] !== t4 || $[49] !== t5 || $[50] !== t6) {
     t7 = /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", {
       className: t3,
       children: [t4, t5, t6]
     });
-    $[45] = t3;
-    $[46] = t4;
-    $[47] = t5;
-    $[48] = t6;
-    $[49] = t7;
+    $[47] = t3;
+    $[48] = t4;
+    $[49] = t5;
+    $[50] = t6;
+    $[51] = t7;
   } else {
-    t7 = $[49];
+    t7 = $[51];
   }
   return t7;
 };
@@ -76307,7 +76330,7 @@ function _temp13() {
 var import_react22 = __toESM(require_react(), 1);
 var import_jsx_runtime57 = __toESM(require_jsx_runtime(), 1);
 var App = () => {
-  const $ = (0, import_compiler_runtime31.c)(60);
+  const $ = (0, import_compiler_runtime31.c)(68);
   const [connected, setConnected] = (0, import_react22.useState)(false);
   const [disconnectReason, setDisconnectReason] = (0, import_react22.useState)();
   let t0;
@@ -76386,7 +76409,6 @@ var App = () => {
     t8 = $[8];
   }
   const [installErrors, setInstallErrors] = (0, import_react22.useState)(t8);
-  const lastFetchRef = (0, import_react22.useRef)(0);
   let t9;
   if ($[9] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
     t9 = /* @__PURE__ */ new Map();
@@ -76394,50 +76416,125 @@ var App = () => {
   } else {
     t9 = $[9];
   }
-  const pendingTabStates = (0, import_react22.useRef)(t9);
+  const [pluginErrors, setPluginErrors] = (0, import_react22.useState)(t9);
+  const lastFetchRef = (0, import_react22.useRef)(0);
+  let t10;
+  if ($[10] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t10 = /* @__PURE__ */ new Map();
+    $[10] = t10;
+  } else {
+    t10 = $[10];
+  }
+  const pluginErrorTimers = (0, import_react22.useRef)(t10);
+  let t11;
+  if ($[11] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t11 = /* @__PURE__ */ new Map();
+    $[11] = t11;
+  } else {
+    t11 = $[11];
+  }
+  const pendingTabStates = (0, import_react22.useRef)(t11);
   const npmSearchTimer = (0, import_react22.useRef)(void 0);
+  const npmSearchCounter = (0, import_react22.useRef)(0);
   const connectedRef = (0, import_react22.useRef)(connected);
   const loadingRef = (0, import_react22.useRef)(loading);
   const pluginsRef = (0, import_react22.useRef)(plugins);
   const [pluginsLoaded, setPluginsLoaded] = (0, import_react22.useState)(false);
-  let t10;
-  let t11;
-  if ($[10] !== connected || $[11] !== loading || $[12] !== plugins) {
-    t10 = () => {
+  let t12;
+  let t13;
+  if ($[12] !== connected || $[13] !== loading || $[14] !== plugins) {
+    t12 = () => {
       connectedRef.current = connected;
       loadingRef.current = loading;
       pluginsRef.current = plugins;
     };
-    t11 = [connected, loading, plugins];
-    $[10] = connected;
-    $[11] = loading;
-    $[12] = plugins;
-    $[13] = t10;
-    $[14] = t11;
+    t13 = [connected, loading, plugins];
+    $[12] = connected;
+    $[13] = loading;
+    $[14] = plugins;
+    $[15] = t12;
+    $[16] = t13;
   } else {
-    t10 = $[13];
-    t11 = $[14];
+    t12 = $[15];
+    t13 = $[16];
   }
-  (0, import_react22.useEffect)(t10, t11);
-  let t12;
-  if ($[15] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
-    t12 = {
+  (0, import_react22.useEffect)(t12, t13);
+  let t14;
+  if ($[17] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t14 = {
       setPlugins,
       setActiveTools,
       setPendingConfirmations,
       pendingTabStates
     };
-    $[15] = t12;
+    $[17] = t14;
   } else {
-    t12 = $[15];
+    t14 = $[17];
   }
   const {
     handleNotification,
     clearConfirmationTimeout
-  } = useServerNotifications(t12);
-  let t13;
-  if ($[16] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
-    t13 = (query) => {
+  } = useServerNotifications(t14);
+  let t15;
+  let t16;
+  if ($[18] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t15 = () => () => {
+      for (const timer of pluginErrorTimers.current.values()) {
+        clearTimeout(timer);
+      }
+    };
+    t16 = [];
+    $[18] = t15;
+    $[19] = t16;
+  } else {
+    t15 = $[18];
+    t16 = $[19];
+  }
+  (0, import_react22.useEffect)(t15, t16);
+  let t17;
+  if ($[20] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t17 = (pluginName, message) => {
+      const existing = pluginErrorTimers.current.get(pluginName);
+      if (existing) {
+        clearTimeout(existing);
+      }
+      setPluginErrors((prev) => new Map(prev).set(pluginName, message));
+      pluginErrorTimers.current.set(pluginName, setTimeout(() => {
+        setPluginErrors((prev_0) => {
+          const next = new Map(prev_0);
+          next.delete(pluginName);
+          return next;
+        });
+        pluginErrorTimers.current.delete(pluginName);
+      }, ERROR_DISPLAY_DURATION_MS));
+    };
+    $[20] = t17;
+  } else {
+    t17 = $[20];
+  }
+  const showPluginError = t17;
+  let t18;
+  if ($[21] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t18 = (pluginName_0) => {
+      const existing_0 = pluginErrorTimers.current.get(pluginName_0);
+      if (existing_0) {
+        clearTimeout(existing_0);
+        pluginErrorTimers.current.delete(pluginName_0);
+      }
+      setPluginErrors((prev_1) => {
+        const next_0 = new Map(prev_1);
+        next_0.delete(pluginName_0);
+        return next_0;
+      });
+    };
+    $[21] = t18;
+  } else {
+    t18 = $[21];
+  }
+  const clearPluginError = t18;
+  let t19;
+  if ($[22] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t19 = (query) => {
       setSearchQuery(query);
       clearTimeout(npmSearchTimer.current);
       if (!query.trim()) {
@@ -76446,79 +76543,100 @@ var App = () => {
         return;
       }
       setNpmSearching(true);
+      const searchId = npmSearchCounter.current = npmSearchCounter.current + 1;
       npmSearchTimer.current = setTimeout(() => {
         searchPlugins(query).then((result) => {
-          setNpmResults(result.results);
+          if (npmSearchCounter.current === searchId) {
+            setNpmResults(result.results);
+          }
         }).catch(() => {
-          setNpmResults([]);
+          if (npmSearchCounter.current === searchId) {
+            setNpmResults([]);
+          }
         }).finally(() => {
-          setNpmSearching(false);
+          if (npmSearchCounter.current === searchId) {
+            setNpmSearching(false);
+          }
         });
       }, 400);
     };
-    $[16] = t13;
+    $[22] = t19;
   } else {
-    t13 = $[16];
+    t19 = $[22];
   }
-  const handleSearchChange = t13;
-  let t14;
-  if ($[17] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
-    t14 = (name) => {
-      setInstallingPlugins((prev) => new Set(prev).add(name));
-      setInstallErrors((prev_0) => {
-        const next = new Map(prev_0);
-        next.delete(name);
-        return next;
+  const handleSearchChange = t19;
+  let t20;
+  if ($[23] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t20 = (name) => {
+      setInstallingPlugins((prev_2) => new Set(prev_2).add(name));
+      setInstallErrors((prev_3) => {
+        const next_1 = new Map(prev_3);
+        next_1.delete(name);
+        return next_1;
       });
       installPlugin(name).then(() => {
-        setInstallingPlugins((prev_1) => {
-          const next_0 = new Set(prev_1);
-          next_0.delete(name);
-          return next_0;
+        setInstallingPlugins((prev_4) => {
+          const next_2 = new Set(prev_4);
+          next_2.delete(name);
+          return next_2;
         });
         handleSearchChange("");
       }).catch((err) => {
-        setInstallingPlugins((prev_2) => {
-          const next_1 = new Set(prev_2);
-          next_1.delete(name);
-          return next_1;
+        setInstallingPlugins((prev_5) => {
+          const next_3 = new Set(prev_5);
+          next_3.delete(name);
+          return next_3;
         });
-        setInstallErrors((prev_3) => new Map(prev_3).set(name, err instanceof Error ? err.message : String(err)));
+        setInstallErrors((prev_6) => new Map(prev_6).set(name, err instanceof Error ? err.message : String(err)));
       });
     };
-    $[17] = t14;
+    $[23] = t20;
   } else {
-    t14 = $[17];
+    t20 = $[23];
   }
-  const handleInstall = t14;
-  let t15;
-  if ($[18] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
-    t15 = (pluginName) => {
-      setRemovingPlugins((prev_4) => new Set(prev_4).add(pluginName));
-      removePlugin(pluginName).then(() => {
-        setRemovingPlugins((prev_5) => {
-          const next_2 = new Set(prev_5);
-          next_2.delete(pluginName);
-          return next_2;
+  const handleInstall = t20;
+  let t21;
+  if ($[24] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t21 = (pluginName_1) => {
+      clearPluginError(pluginName_1);
+      setRemovingPlugins((prev_7) => new Set(prev_7).add(pluginName_1));
+      removePlugin(pluginName_1).then(() => {
+        setRemovingPlugins((prev_8) => {
+          const next_4 = new Set(prev_8);
+          next_4.delete(pluginName_1);
+          return next_4;
         });
-      }).catch(() => {
-        setRemovingPlugins((prev_6) => {
-          const next_3 = new Set(prev_6);
-          next_3.delete(pluginName);
-          return next_3;
+      }).catch((err_0) => {
+        setRemovingPlugins((prev_9) => {
+          const next_5 = new Set(prev_9);
+          next_5.delete(pluginName_1);
+          return next_5;
         });
+        showPluginError(pluginName_1, err_0 instanceof Error ? err_0.message : String(err_0));
       });
     };
-    $[18] = t15;
+    $[24] = t21;
   } else {
-    t15 = $[18];
+    t21 = $[24];
+  }
+  const handleRemove = t21;
+  let t22;
+  if ($[25] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t22 = (pluginName_2) => {
+      clearPluginError(pluginName_2);
+      updatePlugin(pluginName_2).catch((err_1) => {
+        showPluginError(pluginName_2, err_1 instanceof Error ? err_1.message : String(err_1));
+      });
+    };
+    $[25] = t22;
+  } else {
+    t22 = $[25];
   }
-  const handleRemove = t15;
-  const handleUpdate = _temp28;
-  let t16;
-  let t17;
-  if ($[19] !== handleNotification) {
-    t16 = () => {
+  const handleUpdate = t22;
+  let t23;
+  let t24;
+  if ($[26] !== handleNotification) {
+    t23 = () => {
       const loadPlugins = () => {
         const now = Date.now();
         if (now - lastFetchRef.current < 200) {
@@ -76542,16 +76660,16 @@ var App = () => {
           setFailedPlugins(result_0.failedPlugins ?? []);
           setBrowserTools(result_0.browserTools ?? []);
           setServerVersion(result_0.serverVersion);
-          setActiveTools((prev_7) => {
-            const next_4 = /* @__PURE__ */ new Set();
-            for (const key of prev_7) {
+          setActiveTools((prev_10) => {
+            const next_6 = /* @__PURE__ */ new Set();
+            for (const key of prev_10) {
               if (key.startsWith("browser:") || updatedPlugins.some((p_0) => key.startsWith(p_0.name + ":"))) {
-                next_4.add(key);
+                next_6.add(key);
               }
             }
-            return next_4;
+            return next_6;
           });
-        }).catch(_temp36);
+        }).catch(_temp14);
       };
       getConnectionState().then(async (result_1) => {
         setConnected(result_1.connected);
@@ -76563,8 +76681,8 @@ var App = () => {
       }).catch(() => {
         setLoading(false);
       });
-      const listener = (message, _sender, sendResponse) => {
-        if (message.type === "sp:getState") {
+      const listener = (message_0, _sender, sendResponse) => {
+        if (message_0.type === "sp:getState") {
           const rootEl2 = document.getElementById("root");
           const html = rootEl2 ? rootEl2.innerHTML.slice(0, 5e4) : "";
           const currentPlugins = pluginsRef.current;
@@ -76573,16 +76691,16 @@ var App = () => {
               connected: connectedRef.current,
               loading: loadingRef.current,
               pluginCount: currentPlugins.length,
-              plugins: currentPlugins.map(_temp43)
+              plugins: currentPlugins.map(_temp28)
             },
             html
           });
           return true;
         }
-        if (message.type === "sp:connectionState") {
-          const isConnected = message.data.connected;
+        if (message_0.type === "sp:connectionState") {
+          const isConnected = message_0.data.connected;
           setConnected(isConnected);
-          setDisconnectReason(isConnected ? void 0 : message.data.disconnectReason);
+          setDisconnectReason(isConnected ? void 0 : message_0.data.disconnectReason);
           if (isConnected) {
             loadPlugins();
           } else {
@@ -76604,8 +76722,8 @@ var App = () => {
           });
           return true;
         }
-        if (message.type === "sp:serverMessage") {
-          const data = message.data;
+        if (message_0.type === "sp:serverMessage") {
+          const data = message_0.data;
           if (handleServerResponse(data)) {
             sendResponse({
               ok: true
@@ -76625,8 +76743,8 @@ var App = () => {
           });
           return true;
         }
-        if (message.type === "ws:message") {
-          const wsData = message.data;
+        if (message_0.type === "ws:message") {
+          const wsData = message_0.data;
           if (wsData?.method === "sync.full") {
             loadPlugins();
           }
@@ -76635,68 +76753,71 @@ var App = () => {
         return false;
       };
       chrome.runtime.onMessage.addListener(listener);
-      return () => chrome.runtime.onMessage.removeListener(listener);
+      return () => {
+        clearTimeout(npmSearchTimer.current);
+        chrome.runtime.onMessage.removeListener(listener);
+      };
     };
-    t17 = [handleNotification];
-    $[19] = handleNotification;
-    $[20] = t16;
-    $[21] = t17;
+    t24 = [handleNotification];
+    $[26] = handleNotification;
+    $[27] = t23;
+    $[28] = t24;
   } else {
-    t16 = $[20];
-    t17 = $[21];
+    t23 = $[27];
+    t24 = $[28];
   }
-  (0, import_react22.useEffect)(t16, t17);
-  let t18;
-  if ($[22] !== clearConfirmationTimeout) {
-    t18 = (id, decision, scope) => {
+  (0, import_react22.useEffect)(t23, t24);
+  let t25;
+  if ($[29] !== clearConfirmationTimeout) {
+    t25 = (id, decision, scope) => {
       clearConfirmationTimeout(id);
       sendConfirmationResponse(id, decision, scope);
-      setPendingConfirmations((prev_8) => prev_8.filter((c) => c.id !== id));
+      setPendingConfirmations((prev_11) => prev_11.filter((c) => c.id !== id));
     };
-    $[22] = clearConfirmationTimeout;
-    $[23] = t18;
+    $[29] = clearConfirmationTimeout;
+    $[30] = t25;
   } else {
-    t18 = $[23];
+    t25 = $[30];
   }
-  const handleConfirmationRespond = t18;
-  let t19;
-  if ($[24] !== clearConfirmationTimeout || $[25] !== pendingConfirmations) {
-    t19 = () => {
+  const handleConfirmationRespond = t25;
+  let t26;
+  if ($[31] !== clearConfirmationTimeout || $[32] !== pendingConfirmations) {
+    t26 = () => {
       for (const c_0 of pendingConfirmations) {
         clearConfirmationTimeout(c_0.id);
         sendConfirmationResponse(c_0.id, "deny");
       }
       setPendingConfirmations([]);
     };
-    $[24] = clearConfirmationTimeout;
-    $[25] = pendingConfirmations;
-    $[26] = t19;
+    $[31] = clearConfirmationTimeout;
+    $[32] = pendingConfirmations;
+    $[33] = t26;
   } else {
-    t19 = $[26];
+    t26 = $[33];
   }
-  const handleDenyAll = t19;
+  const handleDenyAll = t26;
   const hasContent = plugins.length > 0 || failedPlugins.length > 0 || browserTools.length > 0;
   const showPlugins = !loading && connected && (hasContent || !!searchQuery);
   const showSearchBar = connected && !loading;
   const showNoPlugins = pluginsLoaded && !hasContent && !searchQuery;
-  let t20;
-  if ($[27] !== connected || $[28] !== handleConfirmationRespond || $[29] !== handleDenyAll || $[30] !== pendingConfirmations) {
-    t20 = connected && pendingConfirmations.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(ConfirmationDialog, {
+  let t27;
+  if ($[34] !== connected || $[35] !== handleConfirmationRespond || $[36] !== handleDenyAll || $[37] !== pendingConfirmations) {
+    t27 = connected && pendingConfirmations.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(ConfirmationDialog, {
       confirmations: pendingConfirmations,
       onRespond: handleConfirmationRespond,
       onDenyAll: handleDenyAll
     });
-    $[27] = connected;
-    $[28] = handleConfirmationRespond;
-    $[29] = handleDenyAll;
-    $[30] = pendingConfirmations;
-    $[31] = t20;
+    $[34] = connected;
+    $[35] = handleConfirmationRespond;
+    $[36] = handleDenyAll;
+    $[37] = pendingConfirmations;
+    $[38] = t27;
   } else {
-    t20 = $[31];
+    t27 = $[38];
   }
-  let t21;
-  if ($[32] !== searchQuery || $[33] !== showSearchBar) {
-    t21 = showSearchBar && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", {
+  let t28;
+  if ($[39] !== searchQuery || $[40] !== showSearchBar) {
+    t28 = showSearchBar && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", {
       className: "pt-4 pr-5 pb-2 pl-4",
       children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", {
         className: "relative",
@@ -76717,16 +76838,16 @@ var App = () => {
         })]
       })
     });
-    $[32] = searchQuery;
-    $[33] = showSearchBar;
-    $[34] = t21;
+    $[39] = searchQuery;
+    $[40] = showSearchBar;
+    $[41] = t28;
   } else {
-    t21 = $[34];
+    t28 = $[41];
   }
-  const t22 = `flex-1 pr-5 pb-2 pl-4 ${showSearchBar ? "pt-2" : "pt-4"} ${showPlugins ? "" : "flex items-center justify-center"}`;
-  let t23;
-  if ($[35] !== activeTools || $[36] !== browserTools || $[37] !== connected || $[38] !== disconnectReason || $[39] !== failedPlugins || $[40] !== hasContent || $[41] !== installErrors || $[42] !== installingPlugins || $[43] !== loading || $[44] !== npmResults || $[45] !== npmSearching || $[46] !== plugins || $[47] !== removingPlugins || $[48] !== searchQuery || $[49] !== serverVersion || $[50] !== showNoPlugins) {
-    t23 = loading ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(LoadingState, {}) : !connected ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(DisconnectedState, {
+  const t29 = `flex-1 pr-5 pb-2 pl-4 ${showSearchBar ? "pt-2" : "pt-4"} ${showPlugins ? "" : "flex items-center justify-center"}`;
+  let t30;
+  if ($[42] !== activeTools || $[43] !== browserTools || $[44] !== connected || $[45] !== disconnectReason || $[46] !== failedPlugins || $[47] !== hasContent || $[48] !== installErrors || $[49] !== installingPlugins || $[50] !== loading || $[51] !== npmResults || $[52] !== npmSearching || $[53] !== pluginErrors || $[54] !== plugins || $[55] !== removingPlugins || $[56] !== searchQuery || $[57] !== serverVersion || $[58] !== showNoPlugins) {
+    t30 = loading ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(LoadingState, {}) : !connected ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(DisconnectedState, {
       reason: disconnectReason
     }) : showNoPlugins ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(NoPluginsState, {}) : searchQuery ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(SearchResults, {
       plugins,
@@ -76744,6 +76865,7 @@ var App = () => {
       onUpdate: handleUpdate,
       onRemove: handleRemove,
       removingPlugins,
+      pluginErrors,
       serverVersion
     }) : hasContent ? /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_jsx_runtime57.Fragment, {
       children: [browserTools.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(AccordionComponent, {
@@ -76763,73 +76885,70 @@ var App = () => {
         toolFilter: "",
         onUpdate: handleUpdate,
         onRemove: handleRemove,
-        removingPlugins
+        removingPlugins,
+        pluginErrors
       })]
     }) : null;
-    $[35] = activeTools;
-    $[36] = browserTools;
-    $[37] = connected;
-    $[38] = disconnectReason;
-    $[39] = failedPlugins;
-    $[40] = hasContent;
-    $[41] = installErrors;
-    $[42] = installingPlugins;
-    $[43] = loading;
-    $[44] = npmResults;
-    $[45] = npmSearching;
-    $[46] = plugins;
-    $[47] = removingPlugins;
-    $[48] = searchQuery;
-    $[49] = serverVersion;
-    $[50] = showNoPlugins;
-    $[51] = t23;
+    $[42] = activeTools;
+    $[43] = browserTools;
+    $[44] = connected;
+    $[45] = disconnectReason;
+    $[46] = failedPlugins;
+    $[47] = hasContent;
+    $[48] = installErrors;
+    $[49] = installingPlugins;
+    $[50] = loading;
+    $[51] = npmResults;
+    $[52] = npmSearching;
+    $[53] = pluginErrors;
+    $[54] = plugins;
+    $[55] = removingPlugins;
+    $[56] = searchQuery;
+    $[57] = serverVersion;
+    $[58] = showNoPlugins;
+    $[59] = t30;
   } else {
-    t23 = $[51];
+    t30 = $[59];
   }
-  let t24;
-  if ($[52] !== t22 || $[53] !== t23) {
-    t24 = /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("main", {
-      className: t22,
-      children: t23
+  let t31;
+  if ($[60] !== t29 || $[61] !== t30) {
+    t31 = /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("main", {
+      className: t29,
+      children: t30
     });
-    $[52] = t22;
-    $[53] = t23;
-    $[54] = t24;
+    $[60] = t29;
+    $[61] = t30;
+    $[62] = t31;
   } else {
-    t24 = $[54];
+    t31 = $[62];
   }
-  let t25;
-  if ($[55] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
-    t25 = /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Footer, {});
-    $[55] = t25;
+  let t32;
+  if ($[63] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t32 = /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Footer, {});
+    $[63] = t32;
   } else {
-    t25 = $[55];
+    t32 = $[63];
   }
-  let t26;
-  if ($[56] !== t20 || $[57] !== t21 || $[58] !== t24) {
-    t26 = /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(TooltipObject.Provider, {
+  let t33;
+  if ($[64] !== t27 || $[65] !== t28 || $[66] !== t31) {
+    t33 = /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(TooltipObject.Provider, {
       children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", {
         className: "text-foreground flex min-h-screen flex-col",
-        children: [t20, t21, t24, t25]
+        children: [t27, t28, t31, t32]
       })
     });
-    $[56] = t20;
-    $[57] = t21;
-    $[58] = t24;
-    $[59] = t26;
+    $[64] = t27;
+    $[65] = t28;
+    $[66] = t31;
+    $[67] = t33;
   } else {
-    t26 = $[59];
+    t33 = $[67];
   }
-  return t26;
+  return t33;
 };
 function _temp14() {
 }
-function _temp28(pluginName_0) {
-  updatePlugin(pluginName_0).catch(_temp14);
-}
-function _temp36() {
-}
-function _temp43(p_1) {
+function _temp28(p_1) {
   return {
     name: p_1.name,
     tabState: p_1.tabState