@opentabs-dev/browser-extension 0.0.37 → 0.0.39

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

@@ -51481,6 +51481,7 @@ var require_client = __commonJS({
 
 // src/side-panel/bridge.ts
 var matchesTool = (tool, filterLower) => tool.displayName.toLowerCase().includes(filterLower) || tool.name.toLowerCase().includes(filterLower) || tool.description.toLowerCase().includes(filterLower);
+var matchesPlugin = (plugin, filterLower) => plugin.displayName.toLowerCase().includes(filterLower) || plugin.name.toLowerCase().includes(filterLower) || plugin.tools.some((tool) => matchesTool(tool, filterLower));
 var REQUEST_TIMEOUT_MS = 3e4;
 var pendingRequests = /* @__PURE__ */ new Map();
 var rejectAllPending = () => {
@@ -51542,6 +51543,10 @@ var getConnectionState = () => new Promise((resolve) => {
 var fetchConfigState = () => sendRequest("config.getState");
 var setToolEnabled = (plugin, tool, enabled) => sendRequest("config.setToolEnabled", { plugin, tool, enabled });
 var setAllToolsEnabled = (plugin, enabled) => sendRequest("config.setAllToolsEnabled", { plugin, enabled });
+var searchPlugins = (query) => sendRequest("plugin.search", { query });
+var installPlugin = (name) => sendRequest("plugin.install", { name });
+var removePlugin = (name) => sendRequest("plugin.remove", { name });
+var updatePlugin = (name) => sendRequest("plugin.updateFromRegistry", { name });
 var sendConfirmationResponse = (id, decision, scope) => {
   chrome.runtime.sendMessage({
     type: "sp:confirmationResponse",
@@ -59730,6 +59735,7 @@ var Trigger = DropdownMenuTrigger;
 var Portal22 = DropdownMenuPortal;
 var Content22 = DropdownMenuContent;
 var Item22 = DropdownMenuItem;
+var Separator2 = DropdownMenuSeparator;
 
 // src/side-panel/components/retro/Menu.tsx
 var React37 = __toESM(require_react(), 1);
@@ -59758,10 +59764,13 @@ var MenuItem2 = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   }
 ));
 MenuItem2.displayName = Item22.displayName;
+var MenuSeparator2 = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Separator2, { ref, className: cn("bg-border -mx-1 my-1 h-px", className), ...props }));
+MenuSeparator2.displayName = Separator2.displayName;
 var MenuObject = Object.assign(Menu2, {
   Trigger: MenuTrigger,
   Content: MenuContent2,
-  Item: MenuItem2
+  Item: MenuItem2,
+  Separator: MenuSeparator2
 });
 
 // ../../node_modules/@radix-ui/react-progress/dist/index.mjs
@@ -60005,6 +60014,7 @@ var COUNTDOWN_POLL_INTERVAL_MS = 200;
 var TOOL_INVOCATION_TIMEOUT_MS = 5 * 60 * 1e3;
 
 // ../../node_modules/lucide-react/dist/esm/lucide-react.js
+init_ellipsis();
 init_triangle_alert();
 init_arrow_up();
 init_chevron_down();
@@ -60268,7 +60278,7 @@ var DisconnectedState = ({ reason }) => {
 var NoPluginsState = () => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(EmptyComponent, { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(EmptyComponent.Content, { children: [
   /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(EmptyComponent.Title, { children: "No Plugins Installed" }),
   /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(EmptyComponent.Separator, {}),
-  /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(EmptyComponent.Description, { children: "Manage plugins with:" }),
+  /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(EmptyComponent.Description, { children: "Search for plugins above or install via CLI:" }),
   /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("code", { className: "rounded border-2 px-3 py-2 font-mono text-sm", children: "opentabs plugin" })
 ] }) });
 var LoadingState = () => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Loader2, { size: "md" });
@@ -60829,12 +60839,74 @@ var PluginIcon = ({
   ] });
 };
 
-// ../../node_modules/@radix-ui/react-accordion/dist/index.mjs
+// src/side-panel/components/PluginMenu.tsx
 var import_react14 = __toESM(require_react(), 1);
+var import_jsx_runtime33 = __toESM(require_jsx_runtime(), 1);
+var CONFIRM_DURATION_MS = 3e3;
+var PluginMenu = ({ plugin, onUpdate, onRemove, updating, removing, className }) => {
+  const [confirmPending, setConfirmPending] = (0, import_react14.useState)(false);
+  const confirmTimerRef = (0, import_react14.useRef)(void 0);
+  (0, import_react14.useEffect)(() => () => clearTimeout(confirmTimerRef.current), []);
+  if (plugin.source === "local") return null;
+  const handleUninstallClick = () => {
+    if (confirmPending) {
+      clearTimeout(confirmTimerRef.current);
+      setConfirmPending(false);
+      onRemove();
+    } else {
+      setConfirmPending(true);
+      confirmTimerRef.current = setTimeout(() => setConfirmPending(false), CONFIRM_DURATION_MS);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    "div",
+    {
+      className,
+      onClick: (e) => e.stopPropagation(),
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") e.stopPropagation();
+      },
+      role: "presentation",
+      children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(MenuObject, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(MenuObject.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          "button",
+          {
+            className: "hover:bg-muted/50 flex h-6 w-6 items-center justify-center rounded",
+            "aria-label": "Plugin options",
+            children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Ellipsis, { className: "h-4 w-4" })
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(MenuObject.Content, { align: "end", children: [
+          plugin.update && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(MenuObject.Item, { onClick: onUpdate, className: "flex items-center gap-2", children: [
+            updating && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Loader2, { size: "sm" }),
+            "Update to v",
+            plugin.update.latestVersion
+          ] }),
+          plugin.update && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(MenuObject.Separator, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+            MenuObject.Item,
+            {
+              onClick: handleUninstallClick,
+              className: "text-destructive hover:text-destructive data-[highlighted]:text-destructive flex items-center gap-2",
+              children: [
+                removing && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Loader2, { size: "sm" }),
+                confirmPending ? "Confirm?" : "Uninstall"
+              ]
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+};
+PluginMenu.displayName = "PluginMenu";
+
+// ../../node_modules/@radix-ui/react-accordion/dist/index.mjs
+var import_react15 = __toESM(require_react(), 1);
 
 // ../../node_modules/@radix-ui/react-collapsible/dist/index.mjs
 var React42 = __toESM(require_react(), 1);
-var import_jsx_runtime33 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime34 = __toESM(require_jsx_runtime(), 1);
 var COLLAPSIBLE_NAME = "Collapsible";
 var [createCollapsibleContext, createCollapsibleScope] = createContextScope(COLLAPSIBLE_NAME);
 var [CollapsibleProvider, useCollapsibleContext] = createCollapsibleContext(COLLAPSIBLE_NAME);
@@ -60854,7 +60926,7 @@ var Collapsible = React42.forwardRef(
       onChange: onOpenChange,
       caller: COLLAPSIBLE_NAME
     });
-    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       CollapsibleProvider,
       {
         scope: __scopeCollapsible,
@@ -60862,7 +60934,7 @@ var Collapsible = React42.forwardRef(
         contentId: useId(),
         open,
         onOpenToggle: React42.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen]),
-        children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
           Primitive.div,
           {
             "data-state": getState(open),
@@ -60881,7 +60953,7 @@ var CollapsibleTrigger = React42.forwardRef(
   (props, forwardedRef) => {
     const { __scopeCollapsible, ...triggerProps } = props;
     const context = useCollapsibleContext(TRIGGER_NAME2, __scopeCollapsible);
-    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       Primitive.button,
       {
         type: "button",
@@ -60903,7 +60975,7 @@ var CollapsibleContent = React42.forwardRef(
   (props, forwardedRef) => {
     const { forceMount, ...contentProps } = props;
     const context = useCollapsibleContext(CONTENT_NAME4, props.__scopeCollapsible);
-    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Presence, { present: forceMount || context.open, children: ({ present }) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(CollapsibleContentImpl, { ...contentProps, ref: forwardedRef, present }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Presence, { present: forceMount || context.open, children: ({ present }) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(CollapsibleContentImpl, { ...contentProps, ref: forwardedRef, present }) });
   }
 );
 CollapsibleContent.displayName = CONTENT_NAME4;
@@ -60943,7 +61015,7 @@ var CollapsibleContentImpl = React42.forwardRef((props, forwardedRef) => {
       setIsPresent(present);
     }
   }, [context.open, present]);
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
     Primitive.div,
     {
       "data-state": getState(context.open),
@@ -60969,7 +61041,7 @@ var Trigger2 = CollapsibleTrigger;
 var Content3 = CollapsibleContent;
 
 // ../../node_modules/@radix-ui/react-accordion/dist/index.mjs
-var import_jsx_runtime34 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime35 = __toESM(require_jsx_runtime(), 1);
 var ACCORDION_NAME = "Accordion";
 var ACCORDION_KEYS = ["Home", "End", "ArrowDown", "ArrowUp", "ArrowLeft", "ArrowRight"];
 var [Collection3, useCollection3, createCollectionScope3] = createCollection(ACCORDION_NAME);
@@ -60978,12 +61050,12 @@ var [createAccordionContext, createAccordionScope] = createContextScope(ACCORDIO
   createCollapsibleScope
 ]);
 var useCollapsibleScope = createCollapsibleScope();
-var Accordion = import_react14.default.forwardRef(
+var Accordion = import_react15.default.forwardRef(
   (props, forwardedRef) => {
     const { type, ...accordionProps } = props;
     const singleProps = accordionProps;
     const multipleProps = accordionProps;
-    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Collection3.Provider, { scope: props.__scopeAccordion, children: type === "multiple" ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(AccordionImplMultiple, { ...multipleProps, ref: forwardedRef }) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(AccordionImplSingle, { ...singleProps, ref: forwardedRef }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Collection3.Provider, { scope: props.__scopeAccordion, children: type === "multiple" ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(AccordionImplMultiple, { ...multipleProps, ref: forwardedRef }) : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(AccordionImplSingle, { ...singleProps, ref: forwardedRef }) });
   }
 );
 Accordion.displayName = ACCORDION_NAME;
@@ -60992,7 +61064,7 @@ var [AccordionCollapsibleProvider, useAccordionCollapsibleContext] = createAccor
   ACCORDION_NAME,
   { collapsible: false }
 );
-var AccordionImplSingle = import_react14.default.forwardRef(
+var AccordionImplSingle = import_react15.default.forwardRef(
   (props, forwardedRef) => {
     const {
       value: valueProp,
@@ -61008,19 +61080,19 @@ var AccordionImplSingle = import_react14.default.forwardRef(
       onChange: onValueChange,
       caller: ACCORDION_NAME
     });
-    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
       AccordionValueProvider,
       {
         scope: props.__scopeAccordion,
-        value: import_react14.default.useMemo(() => value ? [value] : [], [value]),
+        value: import_react15.default.useMemo(() => value ? [value] : [], [value]),
         onItemOpen: setValue,
-        onItemClose: import_react14.default.useCallback(() => collapsible && setValue(""), [collapsible, setValue]),
-        children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(AccordionCollapsibleProvider, { scope: props.__scopeAccordion, collapsible, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(AccordionImpl, { ...accordionSingleProps, ref: forwardedRef }) })
+        onItemClose: import_react15.default.useCallback(() => collapsible && setValue(""), [collapsible, setValue]),
+        children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(AccordionCollapsibleProvider, { scope: props.__scopeAccordion, collapsible, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(AccordionImpl, { ...accordionSingleProps, ref: forwardedRef }) })
       }
     );
   }
 );
-var AccordionImplMultiple = import_react14.default.forwardRef((props, forwardedRef) => {
+var AccordionImplMultiple = import_react15.default.forwardRef((props, forwardedRef) => {
   const {
     value: valueProp,
     defaultValue,
@@ -61034,30 +61106,30 @@ var AccordionImplMultiple = import_react14.default.forwardRef((props, forwardedR
     onChange: onValueChange,
     caller: ACCORDION_NAME
   });
-  const handleItemOpen = import_react14.default.useCallback(
+  const handleItemOpen = import_react15.default.useCallback(
     (itemValue) => setValue((prevValue = []) => [...prevValue, itemValue]),
     [setValue]
   );
-  const handleItemClose = import_react14.default.useCallback(
+  const handleItemClose = import_react15.default.useCallback(
     (itemValue) => setValue((prevValue = []) => prevValue.filter((value2) => value2 !== itemValue)),
     [setValue]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
     AccordionValueProvider,
     {
       scope: props.__scopeAccordion,
       value,
       onItemOpen: handleItemOpen,
       onItemClose: handleItemClose,
-      children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(AccordionCollapsibleProvider, { scope: props.__scopeAccordion, collapsible: true, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(AccordionImpl, { ...accordionMultipleProps, ref: forwardedRef }) })
+      children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(AccordionCollapsibleProvider, { scope: props.__scopeAccordion, collapsible: true, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(AccordionImpl, { ...accordionMultipleProps, ref: forwardedRef }) })
     }
   );
 });
 var [AccordionImplProvider, useAccordionContext] = createAccordionContext(ACCORDION_NAME);
-var AccordionImpl = import_react14.default.forwardRef(
+var AccordionImpl = import_react15.default.forwardRef(
   (props, forwardedRef) => {
     const { __scopeAccordion, disabled, dir, orientation = "vertical", ...accordionProps } = props;
-    const accordionRef = import_react14.default.useRef(null);
+    const accordionRef = import_react15.default.useRef(null);
     const composedRefs = useComposedRefs(accordionRef, forwardedRef);
     const getItems = useCollection3(__scopeAccordion);
     const direction = useDirection(dir);
@@ -61124,14 +61196,14 @@ var AccordionImpl = import_react14.default.forwardRef(
       const clampedIndex = nextIndex % triggerCount;
       triggerCollection[clampedIndex].ref.current?.focus();
     });
-    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
       AccordionImplProvider,
       {
         scope: __scopeAccordion,
         disabled,
         direction: dir,
         orientation,
-        children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Collection3.Slot, { scope: __scopeAccordion, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Collection3.Slot, { scope: __scopeAccordion, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
           Primitive.div,
           {
             ...accordionProps,
@@ -61146,7 +61218,7 @@ var AccordionImpl = import_react14.default.forwardRef(
 );
 var ITEM_NAME4 = "AccordionItem";
 var [AccordionItemProvider, useAccordionItemContext] = createAccordionContext(ITEM_NAME4);
-var AccordionItem = import_react14.default.forwardRef(
+var AccordionItem = import_react15.default.forwardRef(
   (props, forwardedRef) => {
     const { __scopeAccordion, value, ...accordionItemProps } = props;
     const accordionContext = useAccordionContext(ITEM_NAME4, __scopeAccordion);
@@ -61155,14 +61227,14 @@ var AccordionItem = import_react14.default.forwardRef(
     const triggerId = useId();
     const open = value && valueContext.value.includes(value) || false;
     const disabled = accordionContext.disabled || props.disabled;
-    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
       AccordionItemProvider,
       {
         scope: __scopeAccordion,
         open,
         disabled,
         triggerId,
-        children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
           Root5,
           {
             "data-orientation": accordionContext.orientation,
@@ -61187,12 +61259,12 @@ var AccordionItem = import_react14.default.forwardRef(
 );
 AccordionItem.displayName = ITEM_NAME4;
 var HEADER_NAME = "AccordionHeader";
-var AccordionHeader = import_react14.default.forwardRef(
+var AccordionHeader = import_react15.default.forwardRef(
   (props, forwardedRef) => {
     const { __scopeAccordion, ...headerProps } = props;
     const accordionContext = useAccordionContext(ACCORDION_NAME, __scopeAccordion);
     const itemContext = useAccordionItemContext(HEADER_NAME, __scopeAccordion);
-    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
       Primitive.h3,
       {
         "data-orientation": accordionContext.orientation,
@@ -61206,14 +61278,14 @@ var AccordionHeader = import_react14.default.forwardRef(
 );
 AccordionHeader.displayName = HEADER_NAME;
 var TRIGGER_NAME3 = "AccordionTrigger";
-var AccordionTrigger = import_react14.default.forwardRef(
+var AccordionTrigger = import_react15.default.forwardRef(
   (props, forwardedRef) => {
     const { __scopeAccordion, ...triggerProps } = props;
     const accordionContext = useAccordionContext(ACCORDION_NAME, __scopeAccordion);
     const itemContext = useAccordionItemContext(TRIGGER_NAME3, __scopeAccordion);
     const collapsibleContext = useAccordionCollapsibleContext(TRIGGER_NAME3, __scopeAccordion);
     const collapsibleScope = useCollapsibleScope(__scopeAccordion);
-    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Collection3.ItemSlot, { scope: __scopeAccordion, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Collection3.ItemSlot, { scope: __scopeAccordion, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
       Trigger2,
       {
         "aria-disabled": itemContext.open && !collapsibleContext.collapsible || void 0,
@@ -61228,13 +61300,13 @@ var AccordionTrigger = import_react14.default.forwardRef(
 );
 AccordionTrigger.displayName = TRIGGER_NAME3;
 var CONTENT_NAME5 = "AccordionContent";
-var AccordionContent = import_react14.default.forwardRef(
+var AccordionContent = import_react15.default.forwardRef(
   (props, forwardedRef) => {
     const { __scopeAccordion, ...contentProps } = props;
     const accordionContext = useAccordionContext(ACCORDION_NAME, __scopeAccordion);
     const itemContext = useAccordionItemContext(CONTENT_NAME5, __scopeAccordion);
     const collapsibleScope = useCollapsibleScope(__scopeAccordion);
-    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
       Content3,
       {
         role: "region",
@@ -61264,9 +61336,9 @@ var Content23 = AccordionContent;
 
 // src/side-panel/components/retro/Accordion.tsx
 var React44 = __toESM(require_react(), 1);
-var import_jsx_runtime35 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime36 = __toESM(require_jsx_runtime(), 1);
 var Accordion2 = Root23;
-var AccordionItem2 = React44.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+var AccordionItem2 = React44.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
   Item3,
   {
     ref,
@@ -61278,13 +61350,13 @@ var AccordionItem2 = React44.forwardRef(({ className, ...props }, ref) => /* @__
   }
 ));
 AccordionItem2.displayName = Item3.displayName;
-var AccordionContent2 = React44.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+var AccordionContent2 = React44.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
   Content23,
   {
     ref,
     className: "data-[state=open]:animate-accordion-down data-[state=closed]:animate-accordion-up bg-card text-card-foreground overflow-hidden font-sans",
     ...props,
-    children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: cn(className), children })
+    children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: cn(className), children })
   }
 ));
 AccordionContent2.displayName = Content23.displayName;
@@ -61294,7 +61366,7 @@ var AccordionComponent = Object.assign(Accordion2, {
 });
 
 // src/side-panel/components/retro/Alert.tsx
-var import_jsx_runtime36 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime37 = __toESM(require_jsx_runtime(), 1);
 var alertVariants = cva("relative w-full rounded border-2 p-4", {
   variants: {
     variant: {
@@ -61312,11 +61384,11 @@ var alertVariants = cva("relative w-full rounded border-2 p-4", {
     variant: "default"
   }
 });
-var Alert = ({ className, variant, status, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { role: "alert", className: cn(alertVariants({ variant, status }), className), ...props });
+var Alert = ({ className, variant, status, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { role: "alert", className: cn(alertVariants({ variant, status }), className), ...props });
 Alert.displayName = "Alert";
-var AlertTitle = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Text, { as: "h5", className: cn(className), ...props });
+var AlertTitle = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Text, { as: "h5", className: cn(className), ...props });
 AlertTitle.displayName = "AlertTitle";
-var AlertDescription = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: cn("text-muted-foreground", className), ...props });
+var AlertDescription = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: cn("text-muted-foreground", className), ...props });
 AlertDescription.displayName = "AlertDescription";
 var AlertComponent = Object.assign(Alert, {
   Title: AlertTitle,
@@ -61324,7 +61396,7 @@ var AlertComponent = Object.assign(Alert, {
 });
 
 // src/side-panel/components/retro/Badge.tsx
-var import_jsx_runtime37 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime38 = __toESM(require_jsx_runtime(), 1);
 var badgeVariants = cva("inline-block rounded font-medium leading-none", {
   variants: {
     variant: {
@@ -61341,7 +61413,7 @@ var badgeVariants = cva("inline-block rounded font-medium leading-none", {
     size: "md"
   }
 });
-var Badge2 = ({ className, variant, size: size4, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: cn(badgeVariants({ variant, size: size4 }), className), ...props });
+var Badge2 = ({ className, variant, size: size4, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: cn(badgeVariants({ variant, size: size4 }), className), ...props });
 Badge2.displayName = "Badge";
 
 // ../../node_modules/@radix-ui/react-switch/dist/index.mjs
@@ -61361,7 +61433,7 @@ function usePrevious(value) {
 }
 
 // ../../node_modules/@radix-ui/react-switch/dist/index.mjs
-var import_jsx_runtime38 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime39 = __toESM(require_jsx_runtime(), 1);
 var SWITCH_NAME = "Switch";
 var [createSwitchContext, createSwitchScope] = createContextScope(SWITCH_NAME);
 var [SwitchProvider, useSwitchContext] = createSwitchContext(SWITCH_NAME);
@@ -61389,8 +61461,8 @@ var Switch = React46.forwardRef(
       onChange: onCheckedChange,
       caller: SWITCH_NAME
     });
-    return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(SwitchProvider, { scope: __scopeSwitch, checked, disabled, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(SwitchProvider, { scope: __scopeSwitch, checked, disabled, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
         Primitive.button,
         {
           type: "button",
@@ -61412,7 +61484,7 @@ var Switch = React46.forwardRef(
           })
         }
       ),
-      isFormControl && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+      isFormControl && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
         SwitchBubbleInput,
         {
           control: button,
@@ -61435,7 +61507,7 @@ var SwitchThumb = React46.forwardRef(
   (props, forwardedRef) => {
     const { __scopeSwitch, ...thumbProps } = props;
     const context = useSwitchContext(THUMB_NAME, __scopeSwitch);
-    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
       Primitive.span,
       {
         "data-state": getState3(context.checked),
@@ -61475,7 +61547,7 @@ var SwitchBubbleInput = React46.forwardRef(
         input.dispatchEvent(event);
       }
     }, [prevChecked, checked, bubbles]);
-    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
       "input",
       {
         type: "checkbox",
@@ -61504,8 +61576,8 @@ var Root6 = Switch;
 var Thumb = SwitchThumb;
 
 // src/side-panel/components/retro/Switch.tsx
-var import_jsx_runtime39 = __toESM(require_jsx_runtime(), 1);
-var Switch2 = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+var import_jsx_runtime40 = __toESM(require_jsx_runtime(), 1);
+var Switch2 = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
   Root6,
   {
     className: cn(
@@ -61513,7 +61585,7 @@ var Switch2 = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtim
       className
     ),
     ...props,
-    children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
       Thumb,
       {
         className: cn(
@@ -61529,12 +61601,12 @@ var React49 = __toESM(require_react(), 1);
 
 // ../../node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-slot/dist/index.mjs
 var React47 = __toESM(require_react(), 1);
-var import_jsx_runtime40 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime41 = __toESM(require_jsx_runtime(), 1);
 var SLOTTABLE_IDENTIFIER5 = Symbol("radix.slottable");
 // @__NO_SIDE_EFFECTS__
 function createSlottable(ownerName) {
   const Slottable2 = ({ children }) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_jsx_runtime40.Fragment, { children });
+    return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_jsx_runtime41.Fragment, { children });
   };
   Slottable2.displayName = `${ownerName}.Slottable`;
   Slottable2.__radixId = SLOTTABLE_IDENTIFIER5;
@@ -61543,7 +61615,7 @@ function createSlottable(ownerName) {
 
 // ../../node_modules/@radix-ui/react-visually-hidden/dist/index.mjs
 var React48 = __toESM(require_react(), 1);
-var import_jsx_runtime41 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime42 = __toESM(require_jsx_runtime(), 1);
 var VISUALLY_HIDDEN_STYLES = Object.freeze({
   // See: https://github.com/twbs/bootstrap/blob/main/scss/mixins/_visually-hidden.scss
   position: "absolute",
@@ -61560,7 +61632,7 @@ var VISUALLY_HIDDEN_STYLES = Object.freeze({
 var NAME2 = "VisuallyHidden";
 var VisuallyHidden = React48.forwardRef(
   (props, forwardedRef) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
       Primitive.span,
       {
         ...props,
@@ -61574,7 +61646,7 @@ VisuallyHidden.displayName = NAME2;
 var Root7 = VisuallyHidden;
 
 // ../../node_modules/@radix-ui/react-tooltip/dist/index.mjs
-var import_jsx_runtime42 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime43 = __toESM(require_jsx_runtime(), 1);
 var [createTooltipContext, createTooltipScope] = createContextScope("Tooltip", [
   createPopperScope
 ]);
@@ -61598,7 +61670,7 @@ var TooltipProvider = (props) => {
     const skipDelayTimer = skipDelayTimerRef.current;
     return () => window.clearTimeout(skipDelayTimer);
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
     TooltipProviderContextProvider,
     {
       scope: __scopeTooltip,
@@ -61689,7 +61761,7 @@ var Tooltip = (props) => {
       }
     };
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Root2, { ...popperScope, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Root2, { ...popperScope, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
     TooltipContextProvider,
     {
       scope: __scopeTooltip,
@@ -61733,7 +61805,7 @@ var TooltipTrigger = React49.forwardRef(
     React49.useEffect(() => {
       return () => document.removeEventListener("pointerup", handlePointerUp);
     }, [handlePointerUp]);
-    return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Anchor, { asChild: true, ...popperScope, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Anchor, { asChild: true, ...popperScope, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
       Primitive.button,
       {
         "aria-describedby": context.open ? context.contentId : void 0,
@@ -61775,7 +61847,7 @@ var [PortalProvider2, usePortalContext2] = createTooltipContext(PORTAL_NAME4, {
 var TooltipPortal = (props) => {
   const { __scopeTooltip, forceMount, children, container } = props;
   const context = useTooltipContext(PORTAL_NAME4, __scopeTooltip);
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(PortalProvider2, { scope: __scopeTooltip, forceMount, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Presence, { present: forceMount || context.open, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Portal, { asChild: true, container, children }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(PortalProvider2, { scope: __scopeTooltip, forceMount, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Presence, { present: forceMount || context.open, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Portal, { asChild: true, container, children }) }) });
 };
 TooltipPortal.displayName = PORTAL_NAME4;
 var CONTENT_NAME6 = "TooltipContent";
@@ -61784,7 +61856,7 @@ var TooltipContent = React49.forwardRef(
     const portalContext = usePortalContext2(CONTENT_NAME6, props.__scopeTooltip);
     const { forceMount = portalContext.forceMount, side = "top", ...contentProps } = props;
     const context = useTooltipContext(CONTENT_NAME6, props.__scopeTooltip);
-    return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Presence, { present: forceMount || context.open, children: context.disableHoverableContent ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(TooltipContentImpl, { side, ...contentProps, ref: forwardedRef }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(TooltipContentHoverable, { side, ...contentProps, ref: forwardedRef }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Presence, { present: forceMount || context.open, children: context.disableHoverableContent ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(TooltipContentImpl, { side, ...contentProps, ref: forwardedRef }) : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(TooltipContentHoverable, { side, ...contentProps, ref: forwardedRef }) });
   }
 );
 var TooltipContentHoverable = React49.forwardRef((props, forwardedRef) => {
@@ -61846,7 +61918,7 @@ var TooltipContentHoverable = React49.forwardRef((props, forwardedRef) => {
       return () => document.removeEventListener("pointermove", handleTrackPointerGrace);
     }
   }, [trigger, content, pointerGraceArea, onClose, handleRemoveGraceArea]);
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(TooltipContentImpl, { ...props, ref: composedRefs });
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(TooltipContentImpl, { ...props, ref: composedRefs });
 });
 var [VisuallyHiddenContentContextProvider, useVisuallyHiddenContentContext] = createTooltipContext(TOOLTIP_NAME, { isInside: false });
 var Slottable = createSlottable("TooltipContent");
@@ -61877,7 +61949,7 @@ var TooltipContentImpl = React49.forwardRef(
         return () => window.removeEventListener("scroll", handleScroll2, { capture: true });
       }
     }, [context.trigger, onClose]);
-    return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
       DismissableLayer,
       {
         asChild: true,
@@ -61886,7 +61958,7 @@ var TooltipContentImpl = React49.forwardRef(
         onPointerDownOutside,
         onFocusOutside: (event) => event.preventDefault(),
         onDismiss: onClose,
-        children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
           Content,
           {
             "data-state": context.stateAttribute,
@@ -61905,8 +61977,8 @@ var TooltipContentImpl = React49.forwardRef(
               }
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Slottable, { children }),
-              /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(VisuallyHiddenContentContextProvider, { scope: __scopeTooltip, isInside: true, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Root7, { id: context.contentId, role: "tooltip", children: ariaLabel || children }) })
+              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Slottable, { children }),
+              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(VisuallyHiddenContentContextProvider, { scope: __scopeTooltip, isInside: true, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Root7, { id: context.contentId, role: "tooltip", children: ariaLabel || children }) })
             ]
           }
         )
@@ -61924,7 +61996,7 @@ var TooltipArrow = React49.forwardRef(
       ARROW_NAME4,
       __scopeTooltip
     );
-    return visuallyHiddenContentContext.isInside ? null : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Arrow2, { ...popperScope, ...arrowProps, ref: forwardedRef });
+    return visuallyHiddenContentContext.isInside ? null : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Arrow2, { ...popperScope, ...arrowProps, ref: forwardedRef });
   }
 );
 TooltipArrow.displayName = ARROW_NAME4;
@@ -62051,7 +62123,7 @@ var Content24 = TooltipContent;
 
 // src/side-panel/components/retro/Tooltip.tsx
 var React50 = __toESM(require_react(), 1);
-var import_jsx_runtime43 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime44 = __toESM(require_jsx_runtime(), 1);
 var tooltipContentVariants = cva(
   "z-50 overflow-hidden rounded border-2 border-border bg-background px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-tooltip-content-transform-origin]",
   {
@@ -62070,7 +62142,7 @@ var tooltipContentVariants = cva(
 var TooltipProvider2 = Provider;
 var Tooltip2 = Root33;
 var TooltipTrigger2 = Trigger3;
-var TooltipContent2 = React50.forwardRef(({ className, sideOffset = 4, variant, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Portal3, { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+var TooltipContent2 = React50.forwardRef(({ className, sideOffset = 4, variant, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Portal3, { children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
   Content24,
   {
     ref,
@@ -62092,7 +62164,7 @@ var TooltipObject = Object.assign(Tooltip2, {
 });
 
 // ../../node_modules/lucide-react/dist/esm/DynamicIcon.js
-var import_react15 = __toESM(require_react());
+var import_react16 = __toESM(require_react());
 
 // ../../node_modules/lucide-react/dist/esm/dynamicIconImports.js
 var dynamicIconImports = {
@@ -64037,10 +64109,10 @@ async function getIconNode(name) {
   const icon = await dynamicIconImports[name]();
   return icon.__iconNode;
 }
-var DynamicIcon = (0, import_react15.forwardRef)(
+var DynamicIcon = (0, import_react16.forwardRef)(
   ({ name, fallback: Fallback, ...props }, ref) => {
-    const [iconNode, setIconNode] = (0, import_react15.useState)();
-    (0, import_react15.useEffect)(() => {
+    const [iconNode, setIconNode] = (0, import_react16.useState)();
+    (0, import_react16.useEffect)(() => {
       getIconNode(name).then(setIconNode).catch((error) => {
         console.error(error);
       });
@@ -64049,9 +64121,9 @@ var DynamicIcon = (0, import_react15.forwardRef)(
       if (Fallback == null) {
         return null;
       }
-      return (0, import_react15.createElement)(Fallback);
+      return (0, import_react16.createElement)(Fallback);
     }
-    return (0, import_react15.createElement)(Icon, {
+    return (0, import_react16.createElement)(Icon, {
       ref,
       ...props,
       iconNode
@@ -64060,19 +64132,19 @@ var DynamicIcon = (0, import_react15.forwardRef)(
 );
 
 // src/side-panel/components/ToolIcon.tsx
-var import_react16 = __toESM(require_react(), 1);
-var import_jsx_runtime44 = __toESM(require_jsx_runtime(), 1);
-var FallbackIcon = () => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Wrench, { className: "text-muted-foreground h-3 w-3" });
-var ToolIcon = ({ icon, className = "" }) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+var import_react17 = __toESM(require_react(), 1);
+var import_jsx_runtime45 = __toESM(require_jsx_runtime(), 1);
+var FallbackIcon = () => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Wrench, { className: "text-muted-foreground h-3 w-3" });
+var ToolIcon = ({ icon, className = "" }) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
   "div",
   {
     className: `border-border bg-muted/50 flex h-6 w-6 shrink-0 items-center justify-center rounded border-2 ${className}`,
-    children: icon ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react16.Suspense, { fallback: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(FallbackIcon, {}), children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(DynamicIcon, { name: icon, className: "text-muted-foreground h-3 w-3", fallback: FallbackIcon }) }) : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(FallbackIcon, {})
+    children: icon ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_react17.Suspense, { fallback: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(FallbackIcon, {}), children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(DynamicIcon, { name: icon, className: "text-muted-foreground h-3 w-3", fallback: FallbackIcon }) }) : /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(FallbackIcon, {})
   }
 );
 
 // src/side-panel/components/ToolRow.tsx
-var import_jsx_runtime45 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime46 = __toESM(require_jsx_runtime(), 1);
 var ToolRow = ({
   name,
   displayName,
@@ -64081,19 +64153,19 @@ var ToolRow = ({
   enabled,
   active,
   onToggle
-}) => /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
   "div",
   {
     className: `border-border hover:bg-muted/50 flex items-center gap-2 border-b px-3 py-2 transition-colors last:border-b-0 ${active ? "bg-accent/20" : ""}`,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(ToolIcon, { icon }),
-      /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(TooltipObject, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(TooltipObject.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "text-foreground truncate text-[13px]", children: displayName }) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(TooltipObject.Content, { children: description })
+      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(ToolIcon, { icon }),
+      /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(TooltipObject, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(TooltipObject.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "text-foreground truncate text-[13px]", children: displayName }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(TooltipObject.Content, { children: description })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "flex shrink-0 items-center gap-2", children: [
-        active && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Loader2, { size: "sm", count: 2, duration: 0.4, delayStep: 80 }),
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "flex shrink-0 items-center gap-2", children: [
+        active && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Loader2, { size: "sm", count: 2, duration: 0.4, delayStep: 80 }),
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
           Switch2,
           {
             checked: enabled,
@@ -64108,18 +64180,22 @@ var ToolRow = ({
 );
 
 // src/side-panel/components/PluginCard.tsx
-var import_react17 = __toESM(require_react(), 1);
-var import_jsx_runtime46 = __toESM(require_jsx_runtime(), 1);
+var import_react18 = __toESM(require_react(), 1);
+var import_jsx_runtime47 = __toESM(require_jsx_runtime(), 1);
 var PluginCard = ({
   plugin,
   activeTools,
   setPlugins,
-  toolFilter
+  toolFilter,
+  onUpdate,
+  onRemove,
+  updatingPlugin,
+  removingPlugin
 }) => {
-  const [toggleError, setToggleError] = (0, import_react17.useState)(null);
-  const errorTimerRef = (0, import_react17.useRef)(void 0);
-  const toggleCounter = (0, import_react17.useRef)(0);
-  (0, import_react17.useEffect)(() => () => clearTimeout(errorTimerRef.current), []);
+  const [toggleError, setToggleError] = (0, import_react18.useState)(null);
+  const errorTimerRef = (0, import_react18.useRef)(void 0);
+  const toggleCounter = (0, import_react18.useRef)(0);
+  (0, import_react18.useEffect)(() => () => clearTimeout(errorTimerRef.current), []);
   const showToggleError = (message) => {
     clearTimeout(errorTimerRef.current);
     setToggleError(message);
@@ -64152,124 +64228,148 @@ var PluginCard = ({
   };
   const filterLower = toolFilter?.toLowerCase() ?? "";
   const visibleTools = filterLower ? plugin.tools.filter((t) => matchesTool(t, filterLower)) : plugin.tools;
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(AccordionComponent.Item, { value: plugin.name, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(Header, { className: "flex", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(Trigger22, { className: "font-head flex flex-1 cursor-pointer items-center gap-2 px-3 py-2 focus:outline-hidden [&[data-state=open]>svg]:rotate-180", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(TooltipObject, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(TooltipObject.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
-            PluginIcon,
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+    AccordionComponent.Item,
+    {
+      value: plugin.name,
+      className: removingPlugin ? "pointer-events-none opacity-60 transition-opacity" : void 0,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(Header, { className: "flex", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(Trigger22, { className: "font-head flex flex-1 cursor-pointer items-center gap-2 px-3 py-2 focus:outline-hidden [&[data-state=open]>svg]:rotate-180", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(TooltipObject, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TooltipObject.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+                PluginIcon,
+                {
+                  pluginName: plugin.name,
+                  displayName: plugin.displayName,
+                  tabState: plugin.tabState,
+                  hasUpdate: !!plugin.update,
+                  size: 32,
+                  iconSvg: plugin.iconSvg,
+                  iconInactiveSvg: plugin.iconInactiveSvg
+                }
+              ) }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(TooltipObject.Content, { children: [
+                "v",
+                plugin.version,
+                " \xB7 ",
+                plugin.trustTier,
+                plugin.update && /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_jsx_runtime47.Fragment, { children: [
+                  " \xB7 Update: ",
+                  plugin.update.latestVersion
+                ] })
+              ] })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "font-head text-foreground flex min-w-0 flex-1 items-center gap-1.5 truncate text-sm", children: [
+              plugin.displayName,
+              plugin.source === "local" && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Badge2, { variant: "default", size: "sm", className: "align-middle", children: "DEV" }),
+              !plugin.sdkVersion && /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(TooltipObject, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TooltipObject.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+                  Badge2,
+                  {
+                    variant: "outline",
+                    size: "sm",
+                    className: "border-accent bg-accent/10 text-accent-foreground align-middle",
+                    children: "SDK"
+                  }
+                ) }),
+                /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TooltipObject.Content, { children: "SDK version mismatch \u2014 rebuild plugin" })
+              ] })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ChevronDown, { className: "h-4 w-4 shrink-0 transition-transform duration-200" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+            PluginMenu,
             {
-              pluginName: plugin.name,
-              displayName: plugin.displayName,
-              tabState: plugin.tabState,
-              hasUpdate: !!plugin.update,
-              size: 32,
-              iconSvg: plugin.iconSvg,
-              iconInactiveSvg: plugin.iconInactiveSvg
+              plugin,
+              onUpdate: onUpdate ?? (() => void 0),
+              onRemove: onRemove ?? (() => void 0),
+              updating: updatingPlugin ?? false,
+              removing: removingPlugin ?? false,
+              className: "flex shrink-0 items-center px-1"
             }
-          ) }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(TooltipObject.Content, { children: [
-            "v",
-            plugin.version,
-            " \xB7 ",
-            plugin.trustTier,
-            plugin.update && /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_jsx_runtime46.Fragment, { children: [
-              " \xB7 Update: ",
-              plugin.update.latestVersion
-            ] })
-          ] })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "font-head text-foreground flex min-w-0 flex-1 items-center gap-1.5 truncate text-sm", children: [
-          plugin.displayName,
-          plugin.source === "local" && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Badge2, { variant: "default", size: "sm", className: "align-middle", children: "DEV" }),
-          !plugin.sdkVersion && /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(TooltipObject, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(TooltipObject.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
-              Badge2,
-              {
-                variant: "outline",
-                size: "sm",
-                className: "border-accent bg-accent/10 text-accent-foreground align-middle",
-                children: "SDK"
-              }
-            ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(TooltipObject.Content, { children: "SDK version mismatch \u2014 rebuild plugin" })
-          ] })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(ChevronDown, { className: "h-4 w-4 shrink-0 transition-transform duration-200" })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
-        "div",
-        {
-          className: "flex shrink-0 items-center px-3",
-          onClick: (e) => e.stopPropagation(),
-          onKeyDown: (e) => {
-            if (e.key === "Enter" || e.key === " ") e.stopPropagation();
-          },
-          role: "presentation",
-          children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
-            Switch2,
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+            "div",
             {
-              checked: allEnabled,
-              onCheckedChange: handleToggleAll,
-              "aria-label": `Toggle all tools for ${plugin.name}`
+              className: "flex shrink-0 items-center px-3",
+              onClick: (e) => e.stopPropagation(),
+              onKeyDown: (e) => {
+                if (e.key === "Enter" || e.key === " ") e.stopPropagation();
+              },
+              role: "presentation",
+              children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+                Switch2,
+                {
+                  checked: allEnabled,
+                  onCheckedChange: handleToggleAll,
+                  "aria-label": `Toggle all tools for ${plugin.name}`
+                }
+              )
             }
           )
-        }
-      )
-    ] }),
-    toggleError && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(AlertComponent, { status: "error", className: "mx-3 mb-1 px-2 py-1 text-[11px]", children: toggleError }),
-    /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(AccordionComponent.Content, { className: "border-border border-t", children: [
-      toolFilter && /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "text-muted-foreground mb-1 px-3 pt-2 text-xs", children: [
-        visibleTools.length,
-        " of ",
-        plugin.tools.length,
-        " tools"
-      ] }),
-      visibleTools.map((tool) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
-        ToolRow,
-        {
-          name: tool.name,
-          displayName: tool.displayName,
-          description: tool.description,
-          icon: tool.icon,
-          enabled: tool.enabled,
-          active: activeTools.has(`${plugin.name}:${tool.name}`),
-          onToggle: () => handleToggleTool(tool.name, tool.enabled)
-        },
-        tool.name
-      ))
-    ] })
-  ] });
+        ] }),
+        toggleError && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(AlertComponent, { status: "error", className: "mx-3 mb-1 px-2 py-1 text-[11px]", children: toggleError }),
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(AccordionComponent.Content, { className: "border-border border-t", children: [
+          toolFilter && /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "text-muted-foreground mb-1 px-3 pt-2 text-xs", children: [
+            visibleTools.length,
+            " of ",
+            plugin.tools.length,
+            " tools"
+          ] }),
+          visibleTools.map((tool) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+            ToolRow,
+            {
+              name: tool.name,
+              displayName: tool.displayName,
+              description: tool.description,
+              icon: tool.icon,
+              enabled: tool.enabled,
+              active: activeTools.has(`${plugin.name}:${tool.name}`),
+              onToggle: () => handleToggleTool(tool.name, tool.enabled)
+            },
+            tool.name
+          ))
+        ] })
+      ]
+    }
+  );
 };
 
 // src/side-panel/components/PluginList.tsx
-var import_jsx_runtime47 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime48 = __toESM(require_jsx_runtime(), 1);
 var PluginList = ({
   plugins,
   failedPlugins,
   activeTools,
   setPlugins,
-  toolFilter
+  toolFilter,
+  onUpdate,
+  onRemove,
+  removingPlugins
 }) => {
   const filterLower = toolFilter.toLowerCase();
   const visiblePlugins = filterLower ? plugins.filter((p) => p.tools.some((t) => matchesTool(t, filterLower))) : plugins;
   const visibleFailed = filterLower ? [] : failedPlugins;
   if (filterLower && visiblePlugins.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "text-muted-foreground py-8 text-center text-sm", children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "text-muted-foreground py-8 text-center text-sm", children: [
       "No tools matching \u201C",
       toolFilter,
       "\u201D"
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_jsx_runtime47.Fragment, { children: [
-    visibleFailed.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "mb-3 space-y-2", children: visibleFailed.map((fp) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(FailedPluginCard, { plugin: fp }, fp.specifier)) }),
-    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(AccordionComponent, { type: "multiple", className: "space-y-2", children: visiblePlugins.map((plugin) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_jsx_runtime48.Fragment, { children: [
+    visibleFailed.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "mb-3 space-y-2", children: visibleFailed.map((fp) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(FailedPluginCard, { plugin: fp }, fp.specifier)) }),
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(AccordionComponent, { type: "multiple", className: "space-y-2", children: visiblePlugins.map((plugin) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
       PluginCard,
       {
         plugin,
         activeTools,
         setPlugins,
-        toolFilter
+        toolFilter,
+        onUpdate: onUpdate ? () => onUpdate(plugin.name) : void 0,
+        onRemove: onRemove ? () => onRemove(plugin.name) : void 0,
+        removingPlugin: removingPlugins?.has(plugin.name)
       },
       plugin.name
     )) })
@@ -64277,10 +64377,10 @@ var PluginList = ({
 };
 
 // src/side-panel/components/retro/Input.tsx
-var import_react18 = __toESM(require_react(), 1);
-var import_jsx_runtime48 = __toESM(require_jsx_runtime(), 1);
-var Input = (0, import_react18.forwardRef)(
-  ({ type = "text", placeholder = "Enter text", className, "aria-invalid": ariaInvalid, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+var import_react19 = __toESM(require_react(), 1);
+var import_jsx_runtime49 = __toESM(require_jsx_runtime(), 1);
+var Input = (0, import_react19.forwardRef)(
+  ({ type = "text", placeholder = "Enter text", className, "aria-invalid": ariaInvalid, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
     "input",
     {
       ref,
@@ -64298,8 +64398,91 @@ var Input = (0, import_react18.forwardRef)(
 );
 Input.displayName = "Input";
 
+// src/side-panel/components/NpmPluginCard.tsx
+var import_jsx_runtime50 = __toESM(require_jsx_runtime(), 1);
+var deriveDisplayName = (packageName) => (packageName.split("/").pop() ?? packageName).replace(/^opentabs-plugin-/, "");
+var NpmPluginCard = ({ plugin, installing, error, onInstall }) => {
+  const displayName = deriveDisplayName(plugin.name);
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "border-border bg-card space-y-2 rounded border-2 p-3 shadow-md transition-all hover:shadow-sm", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(PluginIcon, { pluginName: plugin.name, displayName, tabState: "closed", size: 28 }),
+      /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex flex-wrap items-center gap-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "font-head text-foreground truncate text-sm", children: displayName }),
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Badge2, { variant: "default", size: "sm", children: plugin.version }),
+          plugin.isOfficial && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Badge2, { size: "sm", className: "bg-primary/20 text-primary-foreground", children: "OFFICIAL" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "text-muted-foreground truncate font-mono text-xs", children: plugin.author })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Button, { size: "sm", variant: "default", disabled: installing, onClick: onInstall, className: "shrink-0", children: installing ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Loader2, { size: "sm" }) : "Install" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("p", { className: "text-muted-foreground line-clamp-2 text-xs", children: plugin.description }),
+    error && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(AlertComponent, { status: "error", className: "px-3 py-2 text-xs", children: error })
+  ] });
+};
+NpmPluginCard.displayName = "NpmPluginCard";
+
+// src/side-panel/components/SearchResults.tsx
+var import_jsx_runtime51 = __toESM(require_jsx_runtime(), 1);
+var extractShortName = (name) => (name.split("/").pop() ?? name).replace(/^opentabs-plugin-/, "");
+var SectionHeader = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "font-head text-muted-foreground mb-1.5 text-[10px] tracking-widest uppercase", children });
+var SearchResults = ({
+  plugins,
+  activeTools,
+  setPlugins,
+  toolFilter,
+  npmResults,
+  npmSearching,
+  installingPlugins,
+  onInstall,
+  installErrors,
+  onUpdate,
+  onRemove,
+  removingPlugins
+}) => {
+  const filterLower = toolFilter.toLowerCase();
+  const installedMatches = filterLower ? plugins.filter((p) => matchesPlugin(p, filterLower)) : plugins;
+  const installedShortNames = new Set(plugins.map((p) => extractShortName(p.name)));
+  const availableResults = npmResults.filter((r2) => !installedShortNames.has(extractShortName(r2.name)));
+  const hasInstalledResults = installedMatches.length > 0;
+  const showNoResults = toolFilter && !hasInstalledResults && !npmSearching && availableResults.length === 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "space-y-4", children: [
+    hasInstalledResults && /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(SectionHeader, { children: "Installed" }),
+      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+        PluginList,
+        {
+          plugins: installedMatches,
+          failedPlugins: [],
+          activeTools,
+          setPlugins,
+          toolFilter: "",
+          onUpdate,
+          onRemove,
+          removingPlugins
+        }
+      )
+    ] }),
+    toolFilter && (npmSearching ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "flex justify-center py-4", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Loader2, { size: "sm" }) }) : availableResults.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(SectionHeader, { children: "Available" }),
+      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "space-y-2", children: availableResults.map((result) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+        NpmPluginCard,
+        {
+          plugin: result,
+          installing: installingPlugins.has(result.name),
+          error: installErrors.get(result.name) ?? null,
+          onInstall: () => onInstall(result.name)
+        },
+        result.name
+      )) })
+    ] })),
+    showNoResults && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "text-muted-foreground py-8 text-center text-sm", children: "No results" })
+  ] });
+};
+SearchResults.displayName = "SearchResults";
+
 // src/side-panel/hooks/useServerNotifications.ts
-var import_react19 = __toESM(require_react(), 1);
+var import_react20 = __toESM(require_react(), 1);
 var validTabStates = /* @__PURE__ */ new Set(["closed", "unavailable", "ready"]);
 var useServerNotifications = ({
   setPlugins,
@@ -64307,9 +64490,9 @@ var useServerNotifications = ({
   setPendingConfirmations,
   pendingTabStates
 }) => {
-  const timeoutIds = (0, import_react19.useRef)(/* @__PURE__ */ new Map());
-  const invocationTimeoutIds = (0, import_react19.useRef)(/* @__PURE__ */ new Map());
-  (0, import_react19.useEffect)(() => {
+  const timeoutIds = (0, import_react20.useRef)(/* @__PURE__ */ new Map());
+  const invocationTimeoutIds = (0, import_react20.useRef)(/* @__PURE__ */ new Map());
+  (0, import_react20.useEffect)(() => {
     const confirmationMap = timeoutIds.current;
     const invocationMap = invocationTimeoutIds.current;
     return () => {
@@ -64323,14 +64506,14 @@ var useServerNotifications = ({
       invocationMap.clear();
     };
   }, []);
-  const clearConfirmationTimeout = (0, import_react19.useCallback)((id) => {
+  const clearConfirmationTimeout = (0, import_react20.useCallback)((id) => {
     const tid = timeoutIds.current.get(id);
     if (tid !== void 0) {
       clearTimeout(tid);
       timeoutIds.current.delete(id);
     }
   }, []);
-  const handleNotification = (0, import_react19.useCallback)(
+  const handleNotification = (0, import_react20.useCallback)(
     (data) => {
       if (data.method === "confirmation.request" && data.params) {
         const params = data.params;
@@ -64410,28 +64593,34 @@ var useServerNotifications = ({
 };
 
 // src/side-panel/App.tsx
-var import_react20 = __toESM(require_react(), 1);
-var import_jsx_runtime49 = __toESM(require_jsx_runtime(), 1);
+var import_react21 = __toESM(require_react(), 1);
+var import_jsx_runtime52 = __toESM(require_jsx_runtime(), 1);
 var App = () => {
-  const [connected, setConnected] = (0, import_react20.useState)(false);
-  const [disconnectReason, setDisconnectReason] = (0, import_react20.useState)();
-  const [plugins, setPlugins] = (0, import_react20.useState)([]);
-  const [failedPlugins, setFailedPlugins] = (0, import_react20.useState)([]);
-  const [loading, setLoading] = (0, import_react20.useState)(true);
-  const [activeTools, setActiveTools] = (0, import_react20.useState)(/* @__PURE__ */ new Set());
-  const [toolFilter, setToolFilter] = (0, import_react20.useState)("");
-  const [pendingConfirmations, setPendingConfirmations] = (0, import_react20.useState)([]);
-  const lastFetchRef = (0, import_react20.useRef)(0);
-  const pendingTabStates = (0, import_react20.useRef)(/* @__PURE__ */ new Map());
-  const connectedRef = (0, import_react20.useRef)(connected);
-  const loadingRef = (0, import_react20.useRef)(loading);
-  const pluginsRef = (0, import_react20.useRef)(plugins);
-  (0, import_react20.useEffect)(() => {
+  const [connected, setConnected] = (0, import_react21.useState)(false);
+  const [disconnectReason, setDisconnectReason] = (0, import_react21.useState)();
+  const [plugins, setPlugins] = (0, import_react21.useState)([]);
+  const [failedPlugins, setFailedPlugins] = (0, import_react21.useState)([]);
+  const [loading, setLoading] = (0, import_react21.useState)(true);
+  const [activeTools, setActiveTools] = (0, import_react21.useState)(/* @__PURE__ */ new Set());
+  const [searchQuery, setSearchQuery] = (0, import_react21.useState)("");
+  const [pendingConfirmations, setPendingConfirmations] = (0, import_react21.useState)([]);
+  const [npmResults, setNpmResults] = (0, import_react21.useState)([]);
+  const [npmSearching, setNpmSearching] = (0, import_react21.useState)(false);
+  const [installingPlugins, setInstallingPlugins] = (0, import_react21.useState)(/* @__PURE__ */ new Set());
+  const [removingPlugins, setRemovingPlugins] = (0, import_react21.useState)(/* @__PURE__ */ new Set());
+  const [installErrors, setInstallErrors] = (0, import_react21.useState)(/* @__PURE__ */ new Map());
+  const lastFetchRef = (0, import_react21.useRef)(0);
+  const pendingTabStates = (0, import_react21.useRef)(/* @__PURE__ */ new Map());
+  const npmSearchTimer = (0, import_react21.useRef)(void 0);
+  const connectedRef = (0, import_react21.useRef)(connected);
+  const loadingRef = (0, import_react21.useRef)(loading);
+  const pluginsRef = (0, import_react21.useRef)(plugins);
+  (0, import_react21.useEffect)(() => {
     connectedRef.current = connected;
     loadingRef.current = loading;
     pluginsRef.current = plugins;
   }, [connected, loading, plugins]);
-  const loadPlugins = (0, import_react20.useCallback)(() => {
+  const loadPlugins = (0, import_react21.useCallback)(() => {
     const now = Date.now();
     if (now - lastFetchRef.current < 200) return;
     lastFetchRef.current = now;
@@ -64464,7 +64653,72 @@ var App = () => {
     setPendingConfirmations,
     pendingTabStates
   });
-  (0, import_react20.useEffect)(() => {
+  const handleSearchChange = (0, import_react21.useCallback)((query) => {
+    setSearchQuery(query);
+    clearTimeout(npmSearchTimer.current);
+    if (!query.trim()) {
+      setNpmResults([]);
+      setNpmSearching(false);
+      return;
+    }
+    setNpmSearching(true);
+    npmSearchTimer.current = setTimeout(() => {
+      searchPlugins(query).then((result) => {
+        setNpmResults(result.results);
+      }).catch(() => {
+        setNpmResults([]);
+      }).finally(() => {
+        setNpmSearching(false);
+      });
+    }, 400);
+  }, []);
+  const handleInstall = (0, import_react21.useCallback)(
+    (name) => {
+      setInstallingPlugins((prev) => new Set(prev).add(name));
+      setInstallErrors((prev) => {
+        const next = new Map(prev);
+        next.delete(name);
+        return next;
+      });
+      installPlugin(name).then(() => {
+        setInstallingPlugins((prev) => {
+          const next = new Set(prev);
+          next.delete(name);
+          return next;
+        });
+        handleSearchChange("");
+      }).catch((err) => {
+        setInstallingPlugins((prev) => {
+          const next = new Set(prev);
+          next.delete(name);
+          return next;
+        });
+        setInstallErrors((prev) => new Map(prev).set(name, err instanceof Error ? err.message : String(err)));
+      });
+    },
+    [handleSearchChange]
+  );
+  const handleRemove = (0, import_react21.useCallback)((pluginName) => {
+    setRemovingPlugins((prev) => new Set(prev).add(pluginName));
+    removePlugin(pluginName).then(() => {
+      setRemovingPlugins((prev) => {
+        const next = new Set(prev);
+        next.delete(pluginName);
+        return next;
+      });
+    }).catch(() => {
+      setRemovingPlugins((prev) => {
+        const next = new Set(prev);
+        next.delete(pluginName);
+        return next;
+      });
+    });
+  }, []);
+  const handleUpdate = (0, import_react21.useCallback)((pluginName) => {
+    updatePlugin(pluginName).catch(() => {
+    });
+  }, []);
+  (0, import_react21.useEffect)(() => {
     void getConnectionState().then((result) => {
       setConnected(result.connected);
       setDisconnectReason(result.disconnectReason);
@@ -64502,7 +64756,7 @@ var App = () => {
           setFailedPlugins([]);
           setActiveTools(/* @__PURE__ */ new Set());
           setPendingConfirmations([]);
-          setToolFilter("");
+          handleSearchChange("");
           rejectAllPending();
         }
         sendResponse({ ok: true });
@@ -64534,8 +64788,8 @@ var App = () => {
     };
     chrome.runtime.onMessage.addListener(listener);
     return () => chrome.runtime.onMessage.removeListener(listener);
-  }, [loadPlugins, handleNotification]);
-  const handleConfirmationRespond = (0, import_react20.useCallback)(
+  }, [loadPlugins, handleNotification, handleSearchChange]);
+  const handleConfirmationRespond = (0, import_react21.useCallback)(
     (id, decision, scope) => {
       clearConfirmationTimeout(id);
       sendConfirmationResponse(id, decision, scope);
@@ -64543,19 +64797,18 @@ var App = () => {
     },
     [clearConfirmationTimeout]
   );
-  const handleDenyAll = (0, import_react20.useCallback)(() => {
+  const handleDenyAll = (0, import_react21.useCallback)(() => {
     for (const c of pendingConfirmations) {
       clearConfirmationTimeout(c.id);
       sendConfirmationResponse(c.id, "deny");
     }
     setPendingConfirmations([]);
   }, [pendingConfirmations, clearConfirmationTimeout]);
-  const totalTools = plugins.reduce((sum, p) => sum + p.tools.length, 0);
   const hasContent = plugins.length > 0 || failedPlugins.length > 0;
-  const showPlugins = !loading && connected && hasContent;
-  const showSearchBar = connected && !loading && totalTools > 5;
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(TooltipObject.Provider, { children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "text-foreground flex min-h-screen flex-col", children: [
-    connected && pendingConfirmations.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+  const showPlugins = !loading && connected && (hasContent || !!searchQuery);
+  const showSearchBar = connected && !loading;
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(TooltipObject.Provider, { children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "text-foreground flex min-h-screen flex-col", children: [
+    connected && pendingConfirmations.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
       ConfirmationDialog,
       {
         confirmations: pendingConfirmations,
@@ -64563,51 +64816,71 @@ var App = () => {
         onDenyAll: handleDenyAll
       }
     ),
-    showSearchBar && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "pt-4 pr-5 pb-2 pl-4", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "relative", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Search, { className: "text-muted-foreground pointer-events-none absolute top-1/2 left-2 h-4 w-4 -translate-y-1/2" }),
-      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+    showSearchBar && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "pt-4 pr-5 pb-2 pl-4", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "relative", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Search, { className: "text-muted-foreground pointer-events-none absolute top-1/2 left-2 h-4 w-4 -translate-y-1/2" }),
+      /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
         Input,
         {
-          value: toolFilter,
-          onChange: (e) => setToolFilter(e.target.value),
-          placeholder: "Filter tools...",
+          value: searchQuery,
+          onChange: (e) => handleSearchChange(e.target.value),
+          placeholder: "Search plugins and tools...",
           className: "pr-8 pl-9"
         }
       ),
-      toolFilter && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+      searchQuery && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
         "button",
         {
           type: "button",
-          onClick: () => setToolFilter(""),
+          onClick: () => handleSearchChange(""),
           className: "text-muted-foreground hover:text-foreground absolute top-1/2 right-2 -translate-y-1/2 cursor-pointer",
-          children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(X, { className: "h-4 w-4" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(X, { className: "h-4 w-4" })
         }
       )
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
       "main",
       {
         className: `flex-1 pr-5 pb-2 pl-4 ${showSearchBar ? "pt-2" : "pt-4"} ${showPlugins ? "" : "flex items-center justify-center"}`,
-        children: loading ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(LoadingState, {}) : !connected ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(DisconnectedState, { reason: disconnectReason }) : !hasContent ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(NoPluginsState, {}) : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+        children: loading ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(LoadingState, {}) : !connected ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(DisconnectedState, { reason: disconnectReason }) : !hasContent && !searchQuery ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(NoPluginsState, {}) : searchQuery ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+          SearchResults,
+          {
+            plugins,
+            failedPlugins,
+            activeTools,
+            setPlugins,
+            toolFilter: searchQuery,
+            npmResults,
+            npmSearching,
+            installingPlugins,
+            onInstall: handleInstall,
+            installErrors,
+            onUpdate: handleUpdate,
+            onRemove: handleRemove,
+            removingPlugins
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
           PluginList,
           {
             plugins,
             failedPlugins,
             activeTools,
             setPlugins,
-            toolFilter
+            toolFilter: "",
+            onUpdate: handleUpdate,
+            onRemove: handleRemove,
+            removingPlugins
           }
         )
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Footer, {})
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Footer, {})
   ] }) });
 };
 
 // src/side-panel/components/ErrorBoundary.tsx
-var import_react21 = __toESM(require_react(), 1);
-var import_jsx_runtime50 = __toESM(require_jsx_runtime(), 1);
-var ErrorBoundary = class extends import_react21.Component {
+var import_react22 = __toESM(require_react(), 1);
+var import_jsx_runtime53 = __toESM(require_jsx_runtime(), 1);
+var ErrorBoundary = class extends import_react22.Component {
   state = { hasError: false };
   static getDerivedStateFromError() {
     return { hasError: true };
@@ -64617,10 +64890,10 @@ var ErrorBoundary = class extends import_react21.Component {
   }
   render() {
     if (this.state.hasError) {
-      return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "flex min-h-screen flex-col items-center justify-center px-4 py-16 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(AlertComponent, { status: "error", className: "max-w-xs", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(AlertComponent.Title, { children: "Something went wrong" }),
-        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(AlertComponent.Description, { children: "The side panel encountered an unexpected error." }),
-        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Button, { variant: "default", size: "sm", className: "mt-4 w-full", onClick: () => window.location.reload(), children: "Reload" })
+      return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "flex min-h-screen flex-col items-center justify-center px-4 py-16 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(AlertComponent, { status: "error", className: "max-w-xs", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(AlertComponent.Title, { children: "Something went wrong" }),
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(AlertComponent.Description, { children: "The side panel encountered an unexpected error." }),
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Button, { variant: "default", size: "sm", className: "mt-4 w-full", onClick: () => window.location.reload(), children: "Reload" })
       ] }) });
     }
     return this.props.children;
@@ -64628,16 +64901,16 @@ var ErrorBoundary = class extends import_react21.Component {
 };
 
 // src/side-panel/index.tsx
-var import_react22 = __toESM(require_react(), 1);
+var import_react23 = __toESM(require_react(), 1);
 var import_client = __toESM(require_client(), 1);
-var import_jsx_runtime51 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime54 = __toESM(require_jsx_runtime(), 1);
 var rootEl = document.getElementById("root");
 if (!rootEl) {
   throw new Error("Root element not found");
 }
 var root = (0, import_client.createRoot)(rootEl);
 root.render(
-  /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_react22.StrictMode, { children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(ErrorBoundary, { children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(App, {}) }) })
+  /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_react23.StrictMode, { children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(ErrorBoundary, { children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(App, {}) }) })
 );
 /*! Bundled license information: