From 1f7af4a957e5965006467ec83720f357706f03f1 Mon Sep 17 00:00:00 2001
From: Thom Shutt <thomshutt@users.noreply.github.com>
Date: Fri, 20 Feb 2026 12:28:42 +0000
Subject: [PATCH 1/9] Break out Plugins to top-level navbar element

Signed-off-by: Thom Shutt <thomshutt@users.noreply.github.com>
---
 frontend/src/components/Header.tsx         |  45 +++-
 frontend/src/components/PluginsDialog.tsx  | 294 +++++++++++++++++++++
 frontend/src/components/SettingsDialog.tsx | 289 +-------------------
 frontend/src/types/index.ts                |  14 +
 4 files changed, 345 insertions(+), 297 deletions(-)
 create mode 100644 frontend/src/components/PluginsDialog.tsx

diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx
index 27941f9eb..580e77b99 100644
--- a/frontend/src/components/Header.tsx
+++ b/frontend/src/components/Header.tsx
@@ -1,7 +1,8 @@
 import { useState, useEffect, useRef } from "react";
-import { Settings, Cloud, CloudOff } from "lucide-react";
+import { Settings, Cloud, CloudOff, Plug } from "lucide-react";
 import { Button } from "./ui/button";
 import { SettingsDialog } from "./SettingsDialog";
+import { PluginsDialog } from "./PluginsDialog";
 import { toast } from "sonner";
 import { useCloudStatus } from "../hooks/useCloudStatus";
 
@@ -22,8 +23,9 @@ export function Header({
   onSettingsTabOpened,
 }: HeaderProps) {
   const [settingsOpen, setSettingsOpen] = useState(false);
+  const [pluginsOpen, setPluginsOpen] = useState(false);
   const [initialTab, setInitialTab] = useState<
-    "general" | "account" | "api-keys" | "plugins"
+    "general" | "account" | "api-keys"
   >("general");
   const [initialPluginPath, setInitialPluginPath] = useState("");
 
@@ -79,13 +81,15 @@ export function Header({
     setSettingsOpen(true);
   };
 
-  // React to external requests to open a specific settings tab
+  // React to external requests to open a specific settings/plugins tab
   useEffect(() => {
     if (openSettingsTab) {
-      setInitialTab(
-        openSettingsTab as "general" | "account" | "api-keys" | "plugins"
-      );
-      setSettingsOpen(true);
+      if (openSettingsTab === "plugins") {
+        setPluginsOpen(true);
+      } else {
+        setInitialTab(openSettingsTab as "general" | "account" | "api-keys");
+        setSettingsOpen(true);
+      }
       onSettingsTabOpened?.();
     }
   }, [openSettingsTab, onSettingsTabOpened]);
@@ -95,17 +99,20 @@ export function Header({
     if (window.scope?.onDeepLinkAction) {
       return window.scope.onDeepLinkAction(data => {
         if (data.action === "install-plugin" && data.package) {
-          setInitialTab("plugins");
           setInitialPluginPath(data.package);
-          setSettingsOpen(true);
+          setPluginsOpen(true);
         }
       });
     }
   }, []);
 
-  const handleClose = () => {
+  const handleSettingsClose = () => {
     setSettingsOpen(false);
     setInitialTab("general");
+  };
+
+  const handlePluginsClose = () => {
+    setPluginsOpen(false);
     setInitialPluginPath("");
   };
 
@@ -141,6 +148,15 @@ export function Header({
               <CloudOff className="h-5 w-5" />
             )}
           </Button>
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={() => setPluginsOpen(true)}
+            className="hover:opacity-80 transition-opacity text-muted-foreground opacity-60 h-8 w-8"
+            title="Plugins"
+          >
+            <Plug className="h-5 w-5" />
+          </Button>
           <Button
             variant="ghost"
             size="icon"
@@ -153,11 +169,16 @@ export function Header({
         </div>
       </div>
 
+      <PluginsDialog
+        open={pluginsOpen}
+        onClose={handlePluginsClose}
+        initialPluginPath={initialPluginPath}
+      />
+
       <SettingsDialog
         open={settingsOpen}
-        onClose={handleClose}
+        onClose={handleSettingsClose}
         initialTab={initialTab}
-        initialPluginPath={initialPluginPath}
         onPipelinesRefresh={onPipelinesRefresh}
         cloudDisabled={cloudDisabled}
       />
diff --git a/frontend/src/components/PluginsDialog.tsx b/frontend/src/components/PluginsDialog.tsx
new file mode 100644
index 000000000..f8f69baa5
--- /dev/null
+++ b/frontend/src/components/PluginsDialog.tsx
@@ -0,0 +1,294 @@
+import { useState, useEffect, useCallback, useRef } from "react";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "./ui/dialog";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "./ui/tabs";
+import { PluginsTab } from "./settings/PluginsTab";
+import { usePipelinesContext } from "@/contexts/PipelinesContext";
+import type { InstalledPlugin } from "@/types/settings";
+import {
+  listPlugins,
+  installPlugin,
+  uninstallPlugin,
+  restartServer,
+  waitForServer,
+  type FailedPluginInfo,
+} from "@/lib/api";
+import { toast } from "sonner";
+
+interface PluginsDialogProps {
+  open: boolean;
+  onClose: () => void;
+  initialPluginPath?: string;
+}
+
+const isLocalPath = (spec: string): boolean => {
+  const s = spec.trim();
+  return (
+    s.startsWith("/") ||
+    /^[A-Za-z]:[\\/]/.test(s) ||
+    s.startsWith("./") ||
+    s.startsWith(".\\") ||
+    s.startsWith("../") ||
+    s.startsWith("..\\") ||
+    s.startsWith("~/")
+  );
+};
+
+export function PluginsDialog({
+  open,
+  onClose,
+  initialPluginPath = "",
+}: PluginsDialogProps) {
+  const { refetch: refetchPipelines } = usePipelinesContext();
+  const [pluginInstallPath, setPluginInstallPath] = useState(initialPluginPath);
+  const [plugins, setPlugins] = useState<InstalledPlugin[]>([]);
+  const [failedPlugins, setFailedPlugins] = useState<FailedPluginInfo[]>([]);
+  const [isLoadingPlugins, setIsLoadingPlugins] = useState(false);
+  const [isInstalling, setIsInstalling] = useState(false);
+  const [activeTab, setActiveTab] = useState("plugins");
+  const isModifyingPluginsRef = useRef(false);
+
+  useEffect(() => {
+    if (open && initialPluginPath) {
+      setPluginInstallPath(initialPluginPath);
+    }
+  }, [open, initialPluginPath]);
+
+  const fetchPlugins = useCallback(async () => {
+    setIsLoadingPlugins(true);
+    try {
+      const response = await listPlugins();
+      setPlugins(
+        response.plugins.map(p => ({
+          name: p.name,
+          version: p.version,
+          author: p.author,
+          description: p.description,
+          source: p.source,
+          editable: p.editable,
+          latest_version: p.latest_version,
+          update_available: p.update_available,
+          package_spec: p.package_spec,
+        }))
+      );
+      setFailedPlugins(response.failed_plugins ?? []);
+    } catch (error) {
+      console.error("Failed to fetch plugins:", error);
+      if (!isModifyingPluginsRef.current) {
+        toast.error("Failed to load plugins");
+      }
+    } finally {
+      setIsLoadingPlugins(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (open && activeTab === "plugins") {
+      fetchPlugins();
+    }
+  }, [open, activeTab, fetchPlugins]);
+
+  const handleBrowseLocalPlugin = async () => {
+    if (window.scope?.browseDirectory) {
+      const path = await window.scope.browseDirectory(
+        "Select Plugin Directory"
+      );
+      if (path) setPluginInstallPath(path);
+    }
+  };
+
+  const handleInstallPlugin = async (packageSpec: string) => {
+    setIsInstalling(true);
+    isModifyingPluginsRef.current = true;
+    try {
+      const response = await installPlugin({
+        package: packageSpec,
+        editable: isLocalPath(packageSpec),
+      });
+      if (response.success) {
+        const pluginName = response.plugin?.name || packageSpec;
+        toast.success(`Installed ${pluginName}. Restarting server...`);
+        setPluginInstallPath("");
+
+        if (response.plugin) {
+          setPlugins(prev => [
+            ...prev,
+            {
+              name: response.plugin!.name,
+              version: response.plugin!.version,
+              author: response.plugin!.author,
+              description: response.plugin!.description,
+              source: response.plugin!.source,
+              editable: response.plugin!.editable,
+              latest_version: response.plugin!.latest_version,
+              update_available: response.plugin!.update_available,
+              package_spec: response.plugin!.package_spec,
+            },
+          ]);
+        }
+
+        const oldStartTime = await restartServer();
+        await waitForServer(oldStartTime);
+        toast.success("Server restarted");
+
+        await fetchPlugins();
+        await refetchPipelines();
+      } else {
+        toast.error(response.message);
+      }
+    } catch (error) {
+      console.error("Failed to install plugin:", error);
+      toast.error(
+        error instanceof Error ? error.message : "Failed to install plugin"
+      );
+    } finally {
+      setIsInstalling(false);
+      isModifyingPluginsRef.current = false;
+    }
+  };
+
+  const handleUpdatePlugin = async (
+    pluginName: string,
+    packageSpec: string
+  ) => {
+    setIsInstalling(true);
+    isModifyingPluginsRef.current = true;
+    try {
+      const response = await installPlugin({
+        package: packageSpec,
+        upgrade: true,
+      });
+      if (response.success) {
+        toast.success(`Updated ${pluginName}. Restarting server...`);
+
+        if (response.plugin) {
+          setPlugins(prev =>
+            prev.map(p =>
+              p.name === pluginName
+                ? {
+                    name: response.plugin!.name,
+                    version: response.plugin!.version,
+                    author: response.plugin!.author,
+                    description: response.plugin!.description,
+                    source: response.plugin!.source,
+                    editable: response.plugin!.editable,
+                    latest_version: response.plugin!.latest_version,
+                    update_available: response.plugin!.update_available,
+                    package_spec: response.plugin!.package_spec,
+                  }
+                : p
+            )
+          );
+        }
+
+        const oldStartTime = await restartServer();
+        await waitForServer(oldStartTime);
+        toast.success("Server restarted");
+
+        await fetchPlugins();
+        await refetchPipelines();
+      } else {
+        toast.error(response.message);
+      }
+    } catch (error) {
+      console.error("Failed to update plugin:", error);
+      toast.error(
+        error instanceof Error ? error.message : "Failed to update plugin"
+      );
+    } finally {
+      setIsInstalling(false);
+      isModifyingPluginsRef.current = false;
+    }
+  };
+
+  const handleDeletePlugin = async (pluginName: string) => {
+    isModifyingPluginsRef.current = true;
+    try {
+      const response = await uninstallPlugin(pluginName);
+      if (response.success) {
+        toast.success(`Uninstalled ${pluginName}. Restarting server...`);
+
+        setPlugins(prev => prev.filter(p => p.name !== pluginName));
+        setFailedPlugins(prev =>
+          prev.filter(fp => fp.package_name !== pluginName)
+        );
+
+        const oldStartTime = await restartServer();
+        await waitForServer(oldStartTime);
+        toast.success("Server restarted");
+
+        await fetchPlugins();
+        await refetchPipelines();
+      } else {
+        toast.error(response.message);
+      }
+    } catch (error) {
+      console.error("Failed to uninstall plugin:", error);
+      toast.error(
+        error instanceof Error ? error.message : "Failed to uninstall plugin"
+      );
+    } finally {
+      isModifyingPluginsRef.current = false;
+    }
+  };
+
+  const handleReloadPlugin = async (pluginName: string) => {
+    isModifyingPluginsRef.current = true;
+    try {
+      toast.info(`Reloading ${pluginName}. Restarting server...`);
+      const oldStartTime = await restartServer();
+      await waitForServer(oldStartTime);
+      toast.success("Server restarted");
+      await fetchPlugins();
+      await refetchPipelines();
+    } catch (error) {
+      toast.error(
+        error instanceof Error ? error.message : "Failed to reload plugin"
+      );
+    } finally {
+      isModifyingPluginsRef.current = false;
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={isOpen => !isOpen && onClose()}>
+      <DialogContent className="sm:max-w-[600px] p-0 gap-0">
+        <DialogHeader className="sr-only">
+          <DialogTitle>Plugins</DialogTitle>
+        </DialogHeader>
+        <Tabs
+          value={activeTab}
+          onValueChange={setActiveTab}
+          orientation="vertical"
+          className="flex items-stretch"
+        >
+          <TabsList className="flex flex-col items-start justify-start bg-transparent gap-1 w-32 p-4">
+            <TabsTrigger
+              value="plugins"
+              className="w-full justify-start px-3 py-2 hover:bg-muted/50 data-[state=active]:bg-muted"
+            >
+              Plugins
+            </TabsTrigger>
+          </TabsList>
+          <div className="w-px bg-border self-stretch" />
+          <div className="flex-1 min-w-0 p-4 pt-10 h-[40vh] overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:bg-gray-300 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:transition-colors [&::-webkit-scrollbar-thumb:hover]:bg-gray-400">
+            <TabsContent value="plugins" className="mt-0">
+              <PluginsTab
+                plugins={plugins}
+                failedPlugins={failedPlugins}
+                installPath={pluginInstallPath}
+                onInstallPathChange={setPluginInstallPath}
+                onBrowse={handleBrowseLocalPlugin}
+                onInstall={handleInstallPlugin}
+                onUpdate={handleUpdatePlugin}
+                onDelete={handleDeletePlugin}
+                onReload={handleReloadPlugin}
+                isLoading={isLoadingPlugins}
+                isInstalling={isInstalling}
+              />
+            </TabsContent>
+          </div>
+        </Tabs>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/frontend/src/components/SettingsDialog.tsx b/frontend/src/components/SettingsDialog.tsx
index ea81b870b..64a4f6f48 100644
--- a/frontend/src/components/SettingsDialog.tsx
+++ b/frontend/src/components/SettingsDialog.tsx
@@ -1,65 +1,25 @@
-import { useState, useEffect, useCallback, useRef } from "react";
+import { useState, useEffect } from "react";
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "./ui/dialog";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "./ui/tabs";
 import { AccountTab } from "./settings/AccountTab";
 import { ApiKeysTab } from "./settings/ApiKeysTab";
 import { GeneralTab } from "./settings/GeneralTab";
-import { PluginsTab } from "./settings/PluginsTab";
 import { ReportBugDialog } from "./ReportBugDialog";
 import { usePipelinesContext } from "@/contexts/PipelinesContext";
-import type { InstalledPlugin } from "@/types/settings";
-import {
-  listPlugins,
-  installPlugin,
-  uninstallPlugin,
-  restartServer,
-  waitForServer,
-  getServerInfo,
-  type FailedPluginInfo,
-} from "@/lib/api";
-import { toast } from "sonner";
+import { getServerInfo } from "@/lib/api";
 
 interface SettingsDialogProps {
   open: boolean;
   onClose: () => void;
-  initialTab?: "general" | "account" | "api-keys" | "plugins";
-  initialPluginPath?: string;
+  initialTab?: "general" | "account" | "api-keys";
   onPipelinesRefresh?: () => Promise<unknown>;
   cloudDisabled?: boolean;
 }
 
-const isLocalPath = (spec: string): boolean => {
-  const s = spec.trim();
-  return (
-    s.startsWith("/") ||
-    /^[A-Za-z]:[\\/]/.test(s) ||
-    s.startsWith("./") ||
-    s.startsWith(".\\") ||
-    s.startsWith("../") ||
-    s.startsWith("..\\") ||
-    s.startsWith("~/")
-  );
-};
-
-// Electron preload exposes scope API on window
-interface ScopeAPI {
-  browseDirectory?: (title: string) => Promise<string | null>;
-  onDeepLinkAction?: (
-    callback: (data: { action: string; package: string }) => void
-  ) => () => void;
-}
-
-declare global {
-  interface Window {
-    scope?: ScopeAPI;
-  }
-}
-
 export function SettingsDialog({
   open,
   onClose,
   initialTab = "general",
-  initialPluginPath = "",
   onPipelinesRefresh,
   cloudDisabled,
 }: SettingsDialogProps) {
@@ -69,28 +29,16 @@ export function SettingsDialog({
   );
   const [logsDirectory, setLogsDirectory] = useState("~/.daydream-scope/logs");
   const [reportBugOpen, setReportBugOpen] = useState(false);
-  const [pluginInstallPath, setPluginInstallPath] = useState(initialPluginPath);
-  const [plugins, setPlugins] = useState<InstalledPlugin[]>([]);
-  const [failedPlugins, setFailedPlugins] = useState<FailedPluginInfo[]>([]);
-  const [isLoadingPlugins, setIsLoadingPlugins] = useState(false);
-  const [isInstalling, setIsInstalling] = useState(false);
   const [activeTab, setActiveTab] = useState<string>(initialTab);
   const [version, setVersion] = useState<string>("");
   const [gitCommit, setGitCommit] = useState<string>("");
-  // Track install/update/uninstall operations to suppress spurious error toasts
-  const isModifyingPluginsRef = useRef(false);
 
-  // Sync state when dialog opens with initial values from props
   useEffect(() => {
     if (open) {
       setActiveTab(initialTab);
-      if (initialPluginPath) {
-        setPluginInstallPath(initialPluginPath);
-      }
     }
-  }, [open, initialTab, initialPluginPath]);
+  }, [open, initialTab]);
 
-  // Fetch version when dialog opens
   useEffect(() => {
     if (open) {
       getServerInfo()
@@ -102,43 +50,6 @@ export function SettingsDialog({
     }
   }, [open]);
 
-  const fetchPlugins = useCallback(async () => {
-    setIsLoadingPlugins(true);
-    try {
-      const response = await listPlugins();
-      setPlugins(
-        response.plugins.map(p => ({
-          name: p.name,
-          version: p.version,
-          author: p.author,
-          description: p.description,
-          source: p.source,
-          editable: p.editable,
-          latest_version: p.latest_version,
-          update_available: p.update_available,
-          package_spec: p.package_spec,
-        }))
-      );
-      setFailedPlugins(response.failed_plugins ?? []);
-    } catch (error) {
-      console.error("Failed to fetch plugins:", error);
-      // Don't show error toast during install/update/uninstall operations
-      // as the server may be busy or restarting
-      if (!isModifyingPluginsRef.current) {
-        toast.error("Failed to load plugins");
-      }
-    } finally {
-      setIsLoadingPlugins(false);
-    }
-  }, []);
-
-  // Fetch plugins when dialog opens or when switching to plugins tab
-  useEffect(() => {
-    if (open && activeTab === "plugins") {
-      fetchPlugins();
-    }
-  }, [open, activeTab, fetchPlugins]);
-
   const handleModelsDirectoryChange = (value: string) => {
     console.log("Models directory changed:", value);
     setModelsDirectory(value);
@@ -149,177 +60,6 @@ export function SettingsDialog({
     setLogsDirectory(value);
   };
 
-  const handleBrowseLocalPlugin = async () => {
-    if (window.scope?.browseDirectory) {
-      const path = await window.scope.browseDirectory(
-        "Select Plugin Directory"
-      );
-      if (path) setPluginInstallPath(path);
-    }
-  };
-
-  const handleInstallPlugin = async (packageSpec: string) => {
-    setIsInstalling(true);
-    isModifyingPluginsRef.current = true;
-    try {
-      const response = await installPlugin({
-        package: packageSpec,
-        editable: isLocalPath(packageSpec),
-      });
-      if (response.success) {
-        const pluginName = response.plugin?.name || packageSpec;
-        toast.success(`Installed ${pluginName}. Restarting server...`);
-        setPluginInstallPath("");
-
-        // Optimistically add plugin to local state
-        if (response.plugin) {
-          setPlugins(prev => [
-            ...prev,
-            {
-              name: response.plugin!.name,
-              version: response.plugin!.version,
-              author: response.plugin!.author,
-              description: response.plugin!.description,
-              source: response.plugin!.source,
-              editable: response.plugin!.editable,
-              latest_version: response.plugin!.latest_version,
-              update_available: response.plugin!.update_available,
-              package_spec: response.plugin!.package_spec,
-            },
-          ]);
-        }
-
-        // Trigger restart and wait for server to come back
-        const oldStartTime = await restartServer();
-        await waitForServer(oldStartTime);
-        toast.success("Server restarted");
-
-        // Sync with server after restart
-        await fetchPlugins();
-        await refetchPipelines();
-      } else {
-        toast.error(response.message);
-      }
-    } catch (error) {
-      console.error("Failed to install plugin:", error);
-      toast.error(
-        error instanceof Error ? error.message : "Failed to install plugin"
-      );
-    } finally {
-      setIsInstalling(false);
-      isModifyingPluginsRef.current = false;
-    }
-  };
-
-  const handleUpdatePlugin = async (
-    pluginName: string,
-    packageSpec: string
-  ) => {
-    setIsInstalling(true);
-    isModifyingPluginsRef.current = true;
-    try {
-      const response = await installPlugin({
-        package: packageSpec,
-        upgrade: true,
-      });
-      if (response.success) {
-        toast.success(`Updated ${pluginName}. Restarting server...`);
-
-        // Optimistically update plugin in local state
-        if (response.plugin) {
-          setPlugins(prev =>
-            prev.map(p =>
-              p.name === pluginName
-                ? {
-                    name: response.plugin!.name,
-                    version: response.plugin!.version,
-                    author: response.plugin!.author,
-                    description: response.plugin!.description,
-                    source: response.plugin!.source,
-                    editable: response.plugin!.editable,
-                    latest_version: response.plugin!.latest_version,
-                    update_available: response.plugin!.update_available,
-                    package_spec: response.plugin!.package_spec,
-                  }
-                : p
-            )
-          );
-        }
-
-        // Trigger restart and wait for server to come back
-        const oldStartTime = await restartServer();
-        await waitForServer(oldStartTime);
-        toast.success("Server restarted");
-
-        // Sync with server after restart
-        await fetchPlugins();
-        await refetchPipelines();
-      } else {
-        toast.error(response.message);
-      }
-    } catch (error) {
-      console.error("Failed to update plugin:", error);
-      toast.error(
-        error instanceof Error ? error.message : "Failed to update plugin"
-      );
-    } finally {
-      setIsInstalling(false);
-      isModifyingPluginsRef.current = false;
-    }
-  };
-
-  const handleDeletePlugin = async (pluginName: string) => {
-    isModifyingPluginsRef.current = true;
-    try {
-      const response = await uninstallPlugin(pluginName);
-      if (response.success) {
-        toast.success(`Uninstalled ${pluginName}. Restarting server...`);
-
-        // Optimistically remove plugin from local state
-        setPlugins(prev => prev.filter(p => p.name !== pluginName));
-        setFailedPlugins(prev =>
-          prev.filter(fp => fp.package_name !== pluginName)
-        );
-
-        // Trigger restart and wait for server to come back
-        const oldStartTime = await restartServer();
-        await waitForServer(oldStartTime);
-        toast.success("Server restarted");
-
-        // Sync with server after restart
-        await fetchPlugins();
-        await refetchPipelines();
-      } else {
-        toast.error(response.message);
-      }
-    } catch (error) {
-      console.error("Failed to uninstall plugin:", error);
-      toast.error(
-        error instanceof Error ? error.message : "Failed to uninstall plugin"
-      );
-    } finally {
-      isModifyingPluginsRef.current = false;
-    }
-  };
-
-  const handleReloadPlugin = async (pluginName: string) => {
-    isModifyingPluginsRef.current = true;
-    try {
-      toast.info(`Reloading ${pluginName}. Restarting server...`);
-      const oldStartTime = await restartServer();
-      await waitForServer(oldStartTime);
-      toast.success("Server restarted");
-      await fetchPlugins();
-      await refetchPipelines();
-    } catch (error) {
-      toast.error(
-        error instanceof Error ? error.message : "Failed to reload plugin"
-      );
-    } finally {
-      isModifyingPluginsRef.current = false;
-    }
-  };
-
   return (
     <Dialog open={open} onOpenChange={isOpen => !isOpen && onClose()}>
       <DialogContent className="sm:max-w-[600px] p-0 gap-0">
@@ -351,12 +91,6 @@ export function SettingsDialog({
             >
               API Keys
             </TabsTrigger>
-            <TabsTrigger
-              value="plugins"
-              className="w-full justify-start px-3 py-2 hover:bg-muted/50 data-[state=active]:bg-muted"
-            >
-              Plugins
-            </TabsTrigger>
           </TabsList>
           <div className="w-px bg-border self-stretch" />
           <div className="flex-1 min-w-0 p-4 pt-10 h-[40vh] overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:bg-gray-300 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:transition-colors [&::-webkit-scrollbar-thumb:hover]:bg-gray-400">
@@ -380,21 +114,6 @@ export function SettingsDialog({
             <TabsContent value="api-keys" className="mt-0">
               <ApiKeysTab isActive={open && activeTab === "api-keys"} />
             </TabsContent>
-            <TabsContent value="plugins" className="mt-0">
-              <PluginsTab
-                plugins={plugins}
-                failedPlugins={failedPlugins}
-                installPath={pluginInstallPath}
-                onInstallPathChange={setPluginInstallPath}
-                onBrowse={handleBrowseLocalPlugin}
-                onInstall={handleInstallPlugin}
-                onUpdate={handleUpdatePlugin}
-                onDelete={handleDeletePlugin}
-                onReload={handleReloadPlugin}
-                isLoading={isLoadingPlugins}
-                isInstalling={isInstalling}
-              />
-            </TabsContent>
           </div>
         </Tabs>
       </DialogContent>
diff --git a/frontend/src/types/index.ts b/frontend/src/types/index.ts
index eb0aeee9d..e4b864578 100644
--- a/frontend/src/types/index.ts
+++ b/frontend/src/types/index.ts
@@ -1,3 +1,17 @@
+// Electron preload exposes scope API on window
+interface ScopeAPI {
+  browseDirectory?: (title: string) => Promise<string | null>;
+  onDeepLinkAction?: (
+    callback: (data: { action: string; package: string }) => void
+  ) => () => void;
+}
+
+declare global {
+  interface Window {
+    scope?: ScopeAPI;
+  }
+}
+
 // Pipeline IDs are dynamic - any string returned from backend is valid
 export type PipelineId = string;
 

From 086a41dad90d6a181426189a1a0dbba23097a215 Mon Sep 17 00:00:00 2001
From: Thom Shutt <thomshutt@users.noreply.github.com>
Date: Fri, 20 Feb 2026 12:46:14 +0000
Subject: [PATCH 2/9] Add plugin discovery

Signed-off-by: Thom Shutt <thomshutt@users.noreply.github.com>
---
 frontend/src/components/PluginsDialog.tsx     |  26 +-
 .../src/components/settings/DiscoverTab.tsx   | 256 ++++++++++++++++++
 2 files changed, 276 insertions(+), 6 deletions(-)
 create mode 100644 frontend/src/components/settings/DiscoverTab.tsx

diff --git a/frontend/src/components/PluginsDialog.tsx b/frontend/src/components/PluginsDialog.tsx
index f8f69baa5..35db2f9a0 100644
--- a/frontend/src/components/PluginsDialog.tsx
+++ b/frontend/src/components/PluginsDialog.tsx
@@ -2,6 +2,7 @@ import { useState, useEffect, useCallback, useRef } from "react";
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "./ui/dialog";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "./ui/tabs";
 import { PluginsTab } from "./settings/PluginsTab";
+import { DiscoverTab } from "./settings/DiscoverTab";
 import { usePipelinesContext } from "@/contexts/PipelinesContext";
 import type { InstalledPlugin } from "@/types/settings";
 import {
@@ -44,7 +45,7 @@ export function PluginsDialog({
   const [failedPlugins, setFailedPlugins] = useState<FailedPluginInfo[]>([]);
   const [isLoadingPlugins, setIsLoadingPlugins] = useState(false);
   const [isInstalling, setIsInstalling] = useState(false);
-  const [activeTab, setActiveTab] = useState("plugins");
+  const [activeTab, setActiveTab] = useState("installed");
   const isModifyingPluginsRef = useRef(false);
 
   useEffect(() => {
@@ -82,10 +83,10 @@ export function PluginsDialog({
   }, []);
 
   useEffect(() => {
-    if (open && activeTab === "plugins") {
+    if (open) {
       fetchPlugins();
     }
-  }, [open, activeTab, fetchPlugins]);
+  }, [open, fetchPlugins]);
 
   const handleBrowseLocalPlugin = async () => {
     if (window.scope?.browseDirectory) {
@@ -263,15 +264,21 @@ export function PluginsDialog({
         >
           <TabsList className="flex flex-col items-start justify-start bg-transparent gap-1 w-32 p-4">
             <TabsTrigger
-              value="plugins"
+              value="installed"
               className="w-full justify-start px-3 py-2 hover:bg-muted/50 data-[state=active]:bg-muted"
             >
-              Plugins
+              Installed
+            </TabsTrigger>
+            <TabsTrigger
+              value="discover"
+              className="w-full justify-start px-3 py-2 hover:bg-muted/50 data-[state=active]:bg-muted"
+            >
+              Discover
             </TabsTrigger>
           </TabsList>
           <div className="w-px bg-border self-stretch" />
           <div className="flex-1 min-w-0 p-4 pt-10 h-[40vh] overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:bg-gray-300 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:transition-colors [&::-webkit-scrollbar-thumb:hover]:bg-gray-400">
-            <TabsContent value="plugins" className="mt-0">
+            <TabsContent value="installed" className="mt-0">
               <PluginsTab
                 plugins={plugins}
                 failedPlugins={failedPlugins}
@@ -286,6 +293,13 @@ export function PluginsDialog({
                 isInstalling={isInstalling}
               />
             </TabsContent>
+            <TabsContent value="discover" className="mt-0">
+              <DiscoverTab
+                onInstall={handleInstallPlugin}
+                installedPluginNames={plugins.map(p => p.name)}
+                isInstalling={isInstalling}
+              />
+            </TabsContent>
           </div>
         </Tabs>
       </DialogContent>
diff --git a/frontend/src/components/settings/DiscoverTab.tsx b/frontend/src/components/settings/DiscoverTab.tsx
new file mode 100644
index 000000000..5d063e577
--- /dev/null
+++ b/frontend/src/components/settings/DiscoverTab.tsx
@@ -0,0 +1,256 @@
+import { useState, useEffect, useCallback } from "react";
+import { Download, ExternalLink, Search, Loader2 } from "lucide-react";
+import { Button } from "../ui/button";
+import { Input } from "../ui/input";
+import { Badge } from "../ui/badge";
+
+const DAYDREAM_API = "https://api.daydream.live";
+const DAYDREAM_APP = "https://app.daydream.live";
+
+function GitHubIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      className={className}
+      aria-hidden="true"
+    >
+      <path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0 1 12 6.844a9.59 9.59 0 0 1 2.504.337c1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.02 10.02 0 0 0 22 12.017C22 6.484 17.522 2 12 2Z" />
+    </svg>
+  );
+}
+
+interface DaydreamPlugin {
+  id: string;
+  creatorId: string;
+  name: string;
+  slug: string;
+  description: string | null;
+  iconUrl: string | null;
+  pluginType: string;
+  category: string | null;
+  tags: string[];
+  learnMoreUrl: string | null;
+  repositoryUrl: string | null;
+  downloadCount: number;
+  version: string | null;
+}
+
+interface DiscoverResponse {
+  plugins: DaydreamPlugin[];
+  totalCount: number;
+  hasMore: boolean;
+}
+
+interface DiscoverTabProps {
+  onInstall: (packageSpec: string) => void;
+  installedPluginNames: string[];
+  isInstalling?: boolean;
+}
+
+export function DiscoverTab({
+  onInstall,
+  installedPluginNames,
+  isInstalling = false,
+}: DiscoverTabProps) {
+  const [plugins, setPlugins] = useState<DaydreamPlugin[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [search, setSearch] = useState("");
+  const [debouncedSearch, setDebouncedSearch] = useState("");
+
+  useEffect(() => {
+    const timer = setTimeout(() => setDebouncedSearch(search), 300);
+    return () => clearTimeout(timer);
+  }, [search]);
+
+  const fetchDiscoverPlugins = useCallback(async () => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const params = new URLSearchParams({
+        limit: "50",
+        sortBy: "popularity",
+      });
+      if (debouncedSearch) {
+        params.set("search", debouncedSearch);
+      }
+      const response = await fetch(
+        `${DAYDREAM_API}/v1/plugins?${params.toString()}`
+      );
+      if (!response.ok) {
+        throw new Error(`Failed to fetch plugins (${response.status})`);
+      }
+      const data: DiscoverResponse = await response.json();
+      setPlugins(data.plugins);
+    } catch (err) {
+      console.error("Failed to fetch discover plugins:", err);
+      setError(err instanceof Error ? err.message : "Failed to load plugins");
+    } finally {
+      setIsLoading(false);
+    }
+  }, [debouncedSearch]);
+
+  useEffect(() => {
+    fetchDiscoverPlugins();
+  }, [fetchDiscoverPlugins]);
+
+  const installedSet = new Set(installedPluginNames.map(n => n.toLowerCase()));
+
+  return (
+    <div className="space-y-4">
+      <div className="relative">
+        <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+        <Input
+          value={search}
+          onChange={e => setSearch(e.target.value)}
+          placeholder="Search plugins..."
+          className="pl-9"
+        />
+      </div>
+
+      {isLoading ? (
+        <div className="flex items-center justify-center py-8">
+          <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
+        </div>
+      ) : error ? (
+        <div className="rounded-lg bg-muted/50 p-4 text-center">
+          <p className="text-sm text-muted-foreground">{error}</p>
+          <Button
+            variant="outline"
+            size="sm"
+            className="mt-2"
+            onClick={fetchDiscoverPlugins}
+          >
+            Retry
+          </Button>
+        </div>
+      ) : plugins.length === 0 ? (
+        <p className="text-sm text-muted-foreground text-center py-8">
+          {debouncedSearch
+            ? "No plugins found matching your search."
+            : "No plugins available."}
+        </p>
+      ) : (
+        <div className="space-y-3">
+          {plugins.map(plugin => {
+            const isInstalled = installedSet.has(plugin.name.toLowerCase());
+            const daydreamUrl =
+              plugin.learnMoreUrl ||
+              `${DAYDREAM_APP}/plugins?search=${encodeURIComponent(plugin.name)}`;
+            return (
+              <div
+                key={plugin.id}
+                className="flex items-start gap-3 p-3 rounded-md border border-border bg-card"
+              >
+                {plugin.iconUrl ? (
+                  <img
+                    src={plugin.iconUrl}
+                    alt=""
+                    className="h-9 w-9 rounded-md object-cover shrink-0 mt-0.5"
+                  />
+                ) : (
+                  <div className="h-9 w-9 rounded-md bg-muted shrink-0 mt-0.5 flex items-center justify-center">
+                    <span className="text-xs text-muted-foreground font-medium">
+                      {plugin.name.charAt(0).toUpperCase()}
+                    </span>
+                  </div>
+                )}
+                <div className="space-y-1.5 min-w-0 flex-1">
+                  <div className="flex items-center gap-2 flex-wrap">
+                    <span className="text-sm font-medium text-foreground">
+                      {plugin.name}
+                    </span>
+                    {plugin.version && (
+                      <span className="text-xs text-muted-foreground">
+                        v{plugin.version}
+                      </span>
+                    )}
+                    <Badge
+                      variant="secondary"
+                      className="text-[10px] px-1.5 py-0"
+                    >
+                      {plugin.pluginType}
+                    </Badge>
+                  </div>
+                  {plugin.description && (
+                    <p className="text-sm text-muted-foreground line-clamp-2">
+                      {plugin.description}
+                    </p>
+                  )}
+                  {plugin.tags.length > 0 && (
+                    <div className="flex gap-1 flex-wrap">
+                      {plugin.tags.slice(0, 4).map(tag => (
+                        <span
+                          key={tag}
+                          className="text-[10px] text-muted-foreground bg-muted px-1.5 py-0.5 rounded"
+                        >
+                          {tag}
+                        </span>
+                      ))}
+                    </div>
+                  )}
+                </div>
+                <div className="flex items-center gap-1 shrink-0">
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="h-8 w-8"
+                    title="View on Daydream"
+                    asChild
+                  >
+                    <a
+                      href={daydreamUrl}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      <ExternalLink className="h-4 w-4" />
+                    </a>
+                  </Button>
+                  {plugin.repositoryUrl && (
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="h-8 w-8"
+                      title="View on GitHub"
+                      asChild
+                    >
+                      <a
+                        href={plugin.repositoryUrl}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                      >
+                        <GitHubIcon className="h-4 w-4" />
+                      </a>
+                    </Button>
+                  )}
+                  {isInstalled ? (
+                    <Badge variant="outline" className="text-xs">
+                      Installed
+                    </Badge>
+                  ) : (
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="h-8 w-8"
+                      title={`Install ${plugin.name}`}
+                      disabled={isInstalling}
+                      onClick={() => {
+                        const spec = plugin.repositoryUrl
+                          ? `git+${plugin.repositoryUrl}`
+                          : plugin.name;
+                        onInstall(spec);
+                      }}
+                    >
+                      <Download className="h-4 w-4" />
+                    </Button>
+                  )}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}

From febf3722e1594d532f50e80b6ab7a3a9f020d748 Mon Sep 17 00:00:00 2001
From: Thom Shutt <thomshutt@users.noreply.github.com>
Date: Fri, 20 Feb 2026 13:50:16 +0000
Subject: [PATCH 3/9] Remove unused dialog headers

Signed-off-by: Thom Shutt <thomshutt@users.noreply.github.com>
---
 frontend/src/components/PluginsDialog.tsx  | 5 +----
 frontend/src/components/SettingsDialog.tsx | 5 +----
 2 files changed, 2 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/PluginsDialog.tsx b/frontend/src/components/PluginsDialog.tsx
index 35db2f9a0..bf4e02a1f 100644
--- a/frontend/src/components/PluginsDialog.tsx
+++ b/frontend/src/components/PluginsDialog.tsx
@@ -1,5 +1,5 @@
 import { useState, useEffect, useCallback, useRef } from "react";
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from "./ui/dialog";
+import { Dialog, DialogContent } from "./ui/dialog";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "./ui/tabs";
 import { PluginsTab } from "./settings/PluginsTab";
 import { DiscoverTab } from "./settings/DiscoverTab";
@@ -253,9 +253,6 @@ export function PluginsDialog({
   return (
     <Dialog open={open} onOpenChange={isOpen => !isOpen && onClose()}>
       <DialogContent className="sm:max-w-[600px] p-0 gap-0">
-        <DialogHeader className="sr-only">
-          <DialogTitle>Plugins</DialogTitle>
-        </DialogHeader>
         <Tabs
           value={activeTab}
           onValueChange={setActiveTab}
diff --git a/frontend/src/components/SettingsDialog.tsx b/frontend/src/components/SettingsDialog.tsx
index 64a4f6f48..053e2e6e1 100644
--- a/frontend/src/components/SettingsDialog.tsx
+++ b/frontend/src/components/SettingsDialog.tsx
@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from "./ui/dialog";
+import { Dialog, DialogContent } from "./ui/dialog";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "./ui/tabs";
 import { AccountTab } from "./settings/AccountTab";
 import { ApiKeysTab } from "./settings/ApiKeysTab";
@@ -63,9 +63,6 @@ export function SettingsDialog({
   return (
     <Dialog open={open} onOpenChange={isOpen => !isOpen && onClose()}>
       <DialogContent className="sm:max-w-[600px] p-0 gap-0">
-        <DialogHeader className="sr-only">
-          <DialogTitle>Settings</DialogTitle>
-        </DialogHeader>
         <Tabs
           value={activeTab}
           onValueChange={setActiveTab}

From f9740f1393156dd66a45daa1b1c64059a1cb0c36 Mon Sep 17 00:00:00 2001
From: Thom Shutt <thomshutt@users.noreply.github.com>
Date: Fri, 20 Feb 2026 13:53:58 +0000
Subject: [PATCH 4/9] Make URL bases overrideable, consistent with other parts
 of the app

Signed-off-by: Thom Shutt <thomshutt@users.noreply.github.com>
---
 frontend/src/components/settings/DiscoverTab.tsx | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/settings/DiscoverTab.tsx b/frontend/src/components/settings/DiscoverTab.tsx
index 5d063e577..20a2680eb 100644
--- a/frontend/src/components/settings/DiscoverTab.tsx
+++ b/frontend/src/components/settings/DiscoverTab.tsx
@@ -4,8 +4,12 @@ import { Button } from "../ui/button";
 import { Input } from "../ui/input";
 import { Badge } from "../ui/badge";
 
-const DAYDREAM_API = "https://api.daydream.live";
-const DAYDREAM_APP = "https://app.daydream.live";
+const DAYDREAM_API_BASE =
+  (import.meta.env.VITE_DAYDREAM_API_BASE as string | undefined) ||
+  "https://api.daydream.live";
+const DAYDREAM_APP_BASE =
+  (import.meta.env.VITE_DAYDREAM_APP_BASE as string | undefined) ||
+  "https://app.daydream.live";
 
 function GitHubIcon({ className }: { className?: string }) {
   return (
@@ -76,7 +80,7 @@ export function DiscoverTab({
         params.set("search", debouncedSearch);
       }
       const response = await fetch(
-        `${DAYDREAM_API}/v1/plugins?${params.toString()}`
+        `${DAYDREAM_API_BASE}/v1/plugins?${params.toString()}`
       );
       if (!response.ok) {
         throw new Error(`Failed to fetch plugins (${response.status})`);
@@ -137,7 +141,7 @@ export function DiscoverTab({
             const isInstalled = installedSet.has(plugin.name.toLowerCase());
             const daydreamUrl =
               plugin.learnMoreUrl ||
-              `${DAYDREAM_APP}/plugins?search=${encodeURIComponent(plugin.name)}`;
+              `${DAYDREAM_APP_BASE}/plugins?search=${encodeURIComponent(plugin.name)}`;
             return (
               <div
                 key={plugin.id}

From 0a459661fd7fd2a7fdbd8b7fb7ad7b913c81645f Mon Sep 17 00:00:00 2001
From: Thom Shutt <thomshutt@users.noreply.github.com>
Date: Fri, 20 Feb 2026 14:37:55 +0000
Subject: [PATCH 5/9] Adapt plugins dialog based on window size

Signed-off-by: Thom Shutt <thomshutt@users.noreply.github.com>
---
 frontend/src/components/PluginsDialog.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/PluginsDialog.tsx b/frontend/src/components/PluginsDialog.tsx
index bf4e02a1f..327181154 100644
--- a/frontend/src/components/PluginsDialog.tsx
+++ b/frontend/src/components/PluginsDialog.tsx
@@ -252,7 +252,7 @@ export function PluginsDialog({
 
   return (
     <Dialog open={open} onOpenChange={isOpen => !isOpen && onClose()}>
-      <DialogContent className="sm:max-w-[600px] p-0 gap-0">
+      <DialogContent className="sm:max-w-[600px] lg:max-w-[800px] xl:max-w-[960px] p-0 gap-0">
         <Tabs
           value={activeTab}
           onValueChange={setActiveTab}
@@ -274,7 +274,7 @@ export function PluginsDialog({
             </TabsTrigger>
           </TabsList>
           <div className="w-px bg-border self-stretch" />
-          <div className="flex-1 min-w-0 p-4 pt-10 h-[40vh] overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:bg-gray-300 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:transition-colors [&::-webkit-scrollbar-thumb:hover]:bg-gray-400">
+          <div className="flex-1 min-w-0 p-4 pt-10 h-[40vh] lg:h-[50vh] xl:h-[60vh] overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:bg-gray-300 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:transition-colors [&::-webkit-scrollbar-thumb:hover]:bg-gray-400">
             <TabsContent value="installed" className="mt-0">
               <PluginsTab
                 plugins={plugins}

From 5e41803af09de9c98948c4789b76c08b7b95d116 Mon Sep 17 00:00:00 2001
From: Thom Shutt <thomshutt@users.noreply.github.com>
Date: Fri, 20 Feb 2026 14:39:32 +0000
Subject: [PATCH 6/9] Don't show a Download button if the Github URL is missing
 for some reason

Signed-off-by: Thom Shutt <thomshutt@users.noreply.github.com>
---
 frontend/src/components/settings/DiscoverTab.tsx | 11 +++--------
 1 file changed, 3 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/settings/DiscoverTab.tsx b/frontend/src/components/settings/DiscoverTab.tsx
index 20a2680eb..4d2a9ac22 100644
--- a/frontend/src/components/settings/DiscoverTab.tsx
+++ b/frontend/src/components/settings/DiscoverTab.tsx
@@ -232,23 +232,18 @@ export function DiscoverTab({
                     <Badge variant="outline" className="text-xs">
                       Installed
                     </Badge>
-                  ) : (
+                  ) : plugin.repositoryUrl ? (
                     <Button
                       variant="ghost"
                       size="icon"
                       className="h-8 w-8"
                       title={`Install ${plugin.name}`}
                       disabled={isInstalling}
-                      onClick={() => {
-                        const spec = plugin.repositoryUrl
-                          ? `git+${plugin.repositoryUrl}`
-                          : plugin.name;
-                        onInstall(spec);
-                      }}
+                      onClick={() => onInstall(`git+${plugin.repositoryUrl}`)}
                     >
                       <Download className="h-4 w-4" />
                     </Button>
-                  )}
+                  ) : null}
                 </div>
               </div>
             );

From 10bed488e10c0959d4bea02e42cddc40f5c5d2c0 Mon Sep 17 00:00:00 2001
From: Thom Shutt <thomshutt@users.noreply.github.com>
Date: Fri, 20 Feb 2026 14:46:18 +0000
Subject: [PATCH 7/9] Don't show pluginType

Signed-off-by: Thom Shutt <thomshutt@users.noreply.github.com>
---
 frontend/src/components/settings/DiscoverTab.tsx | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/frontend/src/components/settings/DiscoverTab.tsx b/frontend/src/components/settings/DiscoverTab.tsx
index 4d2a9ac22..72e6ec472 100644
--- a/frontend/src/components/settings/DiscoverTab.tsx
+++ b/frontend/src/components/settings/DiscoverTab.tsx
@@ -170,12 +170,6 @@ export function DiscoverTab({
                         v{plugin.version}
                       </span>
                     )}
-                    <Badge
-                      variant="secondary"
-                      className="text-[10px] px-1.5 py-0"
-                    >
-                      {plugin.pluginType}
-                    </Badge>
                   </div>
                   {plugin.description && (
                     <p className="text-sm text-muted-foreground line-clamp-2">

From 1e5c0e3eeb28b33c4df58fe34e6bd790a55bca64 Mon Sep 17 00:00:00 2001
From: Thom Shutt <thomshutt@users.noreply.github.com>
Date: Fri, 20 Feb 2026 14:52:31 +0000
Subject: [PATCH 8/9] Use more of the screen's height for overlay

Signed-off-by: Thom Shutt <thomshutt@users.noreply.github.com>
---
 frontend/src/components/PluginsDialog.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/PluginsDialog.tsx b/frontend/src/components/PluginsDialog.tsx
index 327181154..4c2519c52 100644
--- a/frontend/src/components/PluginsDialog.tsx
+++ b/frontend/src/components/PluginsDialog.tsx
@@ -274,7 +274,7 @@ export function PluginsDialog({
             </TabsTrigger>
           </TabsList>
           <div className="w-px bg-border self-stretch" />
-          <div className="flex-1 min-w-0 p-4 pt-10 h-[40vh] lg:h-[50vh] xl:h-[60vh] overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:bg-gray-300 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:transition-colors [&::-webkit-scrollbar-thumb:hover]:bg-gray-400">
+          <div className="flex-1 min-w-0 p-4 pt-10 h-[80vh] lg:h-[80vh] xl:h-[80vh] overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:bg-gray-300 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:transition-colors [&::-webkit-scrollbar-thumb:hover]:bg-gray-400">
             <TabsContent value="installed" className="mt-0">
               <PluginsTab
                 plugins={plugins}

From fb909d18411bde17cfe1c2ad2baf56a8f3505250 Mon Sep 17 00:00:00 2001
From: Thom Shutt <thomshutt@users.noreply.github.com>
Date: Fri, 20 Feb 2026 15:17:59 +0000
Subject: [PATCH 9/9] Persist 'installed' state across restarts

Signed-off-by: Thom Shutt <thomshutt@users.noreply.github.com>
---
 frontend/src/components/PluginsDialog.tsx     |  4 ++-
 .../src/components/settings/DiscoverTab.tsx   | 25 ++++++++++++++-----
 2 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/PluginsDialog.tsx b/frontend/src/components/PluginsDialog.tsx
index 4c2519c52..b6d4192bc 100644
--- a/frontend/src/components/PluginsDialog.tsx
+++ b/frontend/src/components/PluginsDialog.tsx
@@ -293,7 +293,9 @@ export function PluginsDialog({
             <TabsContent value="discover" className="mt-0">
               <DiscoverTab
                 onInstall={handleInstallPlugin}
-                installedPluginNames={plugins.map(p => p.name)}
+                installedRepoUrls={plugins
+                  .map(p => p.package_spec)
+                  .filter((s): s is string => !!s)}
                 isInstalling={isInstalling}
               />
             </TabsContent>
diff --git a/frontend/src/components/settings/DiscoverTab.tsx b/frontend/src/components/settings/DiscoverTab.tsx
index 72e6ec472..5e9abe856 100644
--- a/frontend/src/components/settings/DiscoverTab.tsx
+++ b/frontend/src/components/settings/DiscoverTab.tsx
@@ -27,6 +27,7 @@ function GitHubIcon({ className }: { className?: string }) {
 interface DaydreamPlugin {
   id: string;
   creatorId: string;
+  creatorUsername: string;
   name: string;
   slug: string;
   description: string | null;
@@ -46,15 +47,23 @@ interface DiscoverResponse {
   hasMore: boolean;
 }
 
+function normalizeRepoUrl(url: string): string {
+  return url
+    .replace(/^git\+/, "")
+    .replace(/\.git$/, "")
+    .replace(/\/$/, "")
+    .toLowerCase();
+}
+
 interface DiscoverTabProps {
   onInstall: (packageSpec: string) => void;
-  installedPluginNames: string[];
+  installedRepoUrls: string[];
   isInstalling?: boolean;
 }
 
 export function DiscoverTab({
   onInstall,
-  installedPluginNames,
+  installedRepoUrls,
   isInstalling = false,
 }: DiscoverTabProps) {
   const [plugins, setPlugins] = useState<DaydreamPlugin[]>([]);
@@ -99,7 +108,7 @@ export function DiscoverTab({
     fetchDiscoverPlugins();
   }, [fetchDiscoverPlugins]);
 
-  const installedSet = new Set(installedPluginNames.map(n => n.toLowerCase()));
+  const installedSet = new Set(installedRepoUrls.map(normalizeRepoUrl));
 
   return (
     <div className="space-y-4">
@@ -138,10 +147,14 @@ export function DiscoverTab({
       ) : (
         <div className="space-y-3">
           {plugins.map(plugin => {
-            const isInstalled = installedSet.has(plugin.name.toLowerCase());
+            const isInstalled = plugin.repositoryUrl
+              ? installedSet.has(normalizeRepoUrl(plugin.repositoryUrl))
+              : false;
             const daydreamUrl =
-              plugin.learnMoreUrl ||
-              `${DAYDREAM_APP_BASE}/plugins?search=${encodeURIComponent(plugin.name)}`;
+              plugin.creatorUsername && plugin.slug
+                ? `${DAYDREAM_APP_BASE}/plugins/${plugin.creatorUsername}/${plugin.slug}`
+                : plugin.learnMoreUrl ||
+                  `${DAYDREAM_APP_BASE}/plugins?search=${encodeURIComponent(plugin.name)}`;
             return (
               <div
                 key={plugin.id}