daydreamlive
diff --git a/‎frontend/src/components/PluginsDialog.tsx‎
Lines changed: 44 additions & 25 deletions b/‎frontend/src/components/PluginsDialog.tsx‎
Lines changed: 44 additions & 25 deletions
diff --git a/‎frontend/src/components/graph/GraphEditor.tsx‎
Lines changed: 3 additions & 0 deletions b/‎frontend/src/components/graph/GraphEditor.tsx‎
Lines changed: 3 additions & 0 deletions
diff --git a/‎frontend/src/components/graph/hooks/graph/useGraphState.ts‎
Lines changed: 3 additions & 0 deletions b/‎frontend/src/components/graph/hooks/graph/useGraphState.ts‎
Lines changed: 3 additions & 0 deletions
diff --git a/‎frontend/src/components/graph/nodes/SourceNode.tsx‎
Lines changed: 71 additions & 23 deletions b/‎frontend/src/components/graph/nodes/SourceNode.tsx‎
Lines changed: 71 additions & 23 deletions
diff --git a/‎frontend/src/components/graph/utils/nodeEnrichment.ts‎
Lines changed: 2 additions & 0 deletions b/‎frontend/src/components/graph/utils/nodeEnrichment.ts‎
Lines changed: 2 additions & 0 deletions
diff --git a/‎frontend/src/components/settings/PluginsTab.tsx‎
Lines changed: 32 additions & 0 deletions b/‎frontend/src/components/settings/PluginsTab.tsx‎
Lines changed: 32 additions & 0 deletions
@@ -74,6 +74,8 @@ export function PluginsDialog({
         update_available: p.update_available,
         package_spec: p.package_spec,
         bundled: p.bundled,
+        kind: p.kind,
+        origin: p.origin,
       })),
     [pluginInfos]
   );
@@ -105,6 +107,28 @@ export function PluginsDialog({
     }
   };
 
+  // Restart the server and refresh plugins+pipelines. Refresh runs even
+  // if the restart wait times out (e.g. the cloud's restart took longer
+  // than the local poll budget) — the install/uninstall/reload itself
+  // already succeeded server-side, so the UI should pick up the new
+  // state regardless. Returns a label for the toast.
+  const restartAndRefresh = async (
+    successLabel: string,
+    fallbackLabel: string
+  ): Promise<string> => {
+    let label = successLabel;
+    try {
+      const oldStartTime = await restartServer();
+      await waitForServer(oldStartTime);
+    } catch (e) {
+      console.warn("Server restart wait did not complete:", e);
+      label = fallbackLabel;
+    }
+    await refreshPlugins();
+    await refetchPipelines();
+    return label;
+  };
+
   const handleInstallPlugin = async (packageSpec: string) => {
     setIsInstalling(true);
     isModifyingPluginsRef.current = true;
@@ -121,12 +145,11 @@ export function PluginsDialog({
         });
         setPluginInstallPath("");
 
-        const oldStartTime = await restartServer();
-        await waitForServer(oldStartTime);
-        toast.success("Server restarted", { id: toastId });
-
-        await refreshPlugins();
-        await refetchPipelines();
+        const label = await restartAndRefresh(
+          "Server restarted",
+          `Installed ${pluginName}`
+        );
+        toast.success(label, { id: toastId });
       } else {
         toast.error(response.message, { id: toastId });
       }
@@ -158,13 +181,11 @@ export function PluginsDialog({
         toast.loading(`Updated ${pluginName}. Restarting server...`, {
           id: toastId,
         });
-
-        const oldStartTime = await restartServer();
-        await waitForServer(oldStartTime);
-        toast.success("Server restarted", { id: toastId });
-
-        await refreshPlugins();
-        await refetchPipelines();
+        const label = await restartAndRefresh(
+          "Server restarted",
+          `Updated ${pluginName}`
+        );
+        toast.success(label, { id: toastId });
       } else {
         toast.error(response.message, { id: toastId });
       }
@@ -189,13 +210,11 @@ export function PluginsDialog({
         toast.loading(`Uninstalled ${pluginName}. Restarting server...`, {
           id: toastId,
         });
-
-        const oldStartTime = await restartServer();
-        await waitForServer(oldStartTime);
-        toast.success("Server restarted", { id: toastId });
-
-        await refreshPlugins();
-        await refetchPipelines();
+        const label = await restartAndRefresh(
+          "Server restarted",
+          `Uninstalled ${pluginName}`
+        );
+        toast.success(label, { id: toastId });
       } else {
         toast.error(response.message, { id: toastId });
       }
@@ -214,11 +233,11 @@ export function PluginsDialog({
     isModifyingPluginsRef.current = true;
     try {
       toast.info(`Reloading ${pluginName}. Restarting server...`);
-      const oldStartTime = await restartServer();
-      await waitForServer(oldStartTime);
-      toast.success("Server restarted");
-      await refreshPlugins();
-      await refetchPipelines();
+      const label = await restartAndRefresh(
+        "Server restarted",
+        `Reloaded ${pluginName}`
+      );
+      toast.success(label);
     } catch (error) {
       toast.error(
         error instanceof Error ? error.message : "Failed to reload node"
 
@@ -191,6 +191,7 @@ interface GraphEditorProps {
   spoutAvailable?: boolean;
   ndiAvailable?: boolean;
   syphonAvailable?: boolean;
+  availableInputSources?: import("../../lib/api").InputSourceType[];
   onSpoutSourceChange?: (name: string) => void;
   onNdiSourceChange?: (identifier: string) => void;
   onSyphonSourceChange?: (identifier: string) => void;
@@ -241,6 +242,7 @@ export const GraphEditor = forwardRef<GraphEditorHandle, GraphEditorProps>(
       spoutAvailable = false,
       ndiAvailable = false,
       syphonAvailable = false,
+      availableInputSources = [],
       onSpoutSourceChange,
       onNdiSourceChange,
       onSyphonSourceChange,
@@ -343,6 +345,7 @@ export const GraphEditor = forwardRef<GraphEditorHandle, GraphEditorProps>(
         spoutOutputAvailable,
         ndiOutputAvailable,
         syphonOutputAvailable,
+        availableInputSources,
       },
       {
         tempoState,
 
@@ -122,6 +122,7 @@ export interface GraphEditorAvailability {
   spoutOutputAvailable: boolean;
   ndiOutputAvailable: boolean;
   syphonOutputAvailable: boolean;
+  availableInputSources: import("../../../../lib/api").InputSourceType[];
 }
 
 export function useGraphState(
@@ -290,6 +291,7 @@ export function useGraphState(
     spoutOutputAvailable: availability.spoutOutputAvailable,
     ndiOutputAvailable: availability.ndiOutputAvailable,
     syphonOutputAvailable: availability.syphonOutputAvailable,
+    availableInputSources: availability.availableInputSources,
     handleEdgeDelete,
     isStreaming: streams.isStreaming,
     isLoading: streams.isLoading ?? false,
@@ -339,6 +341,7 @@ export function useGraphState(
     availability.spoutOutputAvailable,
     availability.ndiOutputAvailable,
     availability.syphonOutputAvailable,
+    availability.availableInputSources,
     tempo.tempoState,
     tempo.tempoSources,
   ]);
 
@@ -1,6 +1,7 @@
 import { useEffect, useRef, useCallback, useState } from "react";
 import { Handle, Position } from "@xyflow/react";
 import type { NodeProps, Node } from "@xyflow/react";
+import { isBrowserSourceMode } from "../../../lib/graphUtils";
 import type { FlowNodeData } from "../../../lib/graphUtils";
 import { getInputSourceSources, type DiscoveredSource } from "../../../lib/api";
 import { useNodeData } from "../hooks/node/useNodeData";
@@ -21,14 +22,20 @@ const HEADER_H = 28;
 const BODY_PAD = 6;
 const SELECT_ROW_H = 20;
 
-const SOURCE_MODE_OPTIONS = [
+// Browser-driven source modes (WebRTC) prepended to the backend's list.
+// Every other entry in the dropdown comes from /api/v1/input-sources.
+const BROWSER_SOURCE_OPTIONS = [
   { value: "video", label: "File" },
   { value: "camera", label: "Camera" },
-  { value: "spout", label: "Spout" },
-  { value: "ndi", label: "NDI" },
-  { value: "syphon", label: "Syphon" },
 ];
 
+// Built-ins that have bespoke UI branches below; everything else falls
+// through to the generic text-input branch.
+const SOURCES_WITH_CUSTOM_UI = new Set(["spout", "ndi", "syphon"]);
+
+// "video_file" is a headless-only alias for browser "video"; hide it.
+const HIDDEN_BACKEND_SOURCES = new Set(["video_file"]);
+
 export function SourceNode({ id, data, selected }: NodeProps<SourceNodeType>) {
   const { updateData } = useNodeData(id);
   const { collapsed, toggleCollapse } = useNodeCollapse();
@@ -45,6 +52,10 @@ export function SourceNode({ id, data, selected }: NodeProps<SourceNodeType>) {
   const spoutAvailable = data.spoutAvailable ?? false;
   const ndiAvailable = data.ndiAvailable ?? false;
   const syphonAvailable = data.syphonAvailable ?? false;
+  const availableInputSources = data.availableInputSources ?? [];
+  const currentSourceInfo = availableInputSources.find(
+    s => s.source_id === sourceMode
+  );
   const onSpoutSourceChange = data.onSpoutSourceChange as
     | ((name: string) => void)
     | undefined;
@@ -129,11 +140,12 @@ export function SourceNode({ id, data, selected }: NodeProps<SourceNodeType>) {
   }, [syphonAvailable]);
 
   const handleSourceModeChange = (newMode: string) => {
+    // Preserve sourceName for every server-side mode (anything that
+    // isn't the browser-driven "video"/"camera"). Clearing it on every
+    // switch would lose the URL/path/sender the user just typed.
     updateData({
-      sourceMode: newMode as "video" | "camera" | "spout" | "ndi" | "syphon",
-      ...(newMode !== "spout" && newMode !== "ndi" && newMode !== "syphon"
-        ? { sourceName: undefined }
-        : {}),
+      sourceMode: newMode,
+      ...(isBrowserSourceMode(newMode) ? { sourceName: undefined } : {}),
     });
     onSourceModeChange?.(newMode);
   };
@@ -174,17 +186,36 @@ export function SourceNode({ id, data, selected }: NodeProps<SourceNodeType>) {
     [onVideoFileUpload]
   );
 
-  const showPreview = sourceMode === "video" || sourceMode === "camera";
+  const showPreview = isBrowserSourceMode(sourceMode);
   const showFilePicker = sourceMode === "video";
   const handleY = HEADER_H + BODY_PAD + SELECT_ROW_H / 2;
 
-  // Filter source mode options based on availability
-  const filteredSourceModeOptions = SOURCE_MODE_OPTIONS.filter(opt => {
-    if (opt.value === "spout") return spoutAvailable;
-    if (opt.value === "ndi") return ndiAvailable;
-    if (opt.value === "syphon") return syphonAvailable;
-    return true;
-  });
+  // Browser-driven options + every available backend source. Plugin-
+  // registered sources appear automatically. If the graph was saved with
+  // a mode that isn't currently available on this machine (e.g. NDI graph
+  // opened on a host without NDI), keep it in the list as "(unavailable)"
+  // so the user can see what's set instead of the dropdown silently
+  // collapsing to a different selection.
+  const filteredSourceModeOptions = [
+    ...BROWSER_SOURCE_OPTIONS,
+    ...availableInputSources
+      .filter(s => s.available && !HIDDEN_BACKEND_SOURCES.has(s.source_id))
+      .map(s => ({ value: s.source_id, label: s.source_name })),
+  ];
+  if (
+    sourceMode &&
+    !filteredSourceModeOptions.some(o => o.value === sourceMode)
+  ) {
+    const label = currentSourceInfo?.source_name ?? sourceMode;
+    filteredSourceModeOptions.push({
+      value: sourceMode,
+      label: `${label} (unavailable)`,
+    });
+  }
+
+  const handleGenericSourceNameChange = (value: string | number) => {
+    updateData({ sourceName: String(value) });
+  };
 
   const ndiOptions = ndiSources.map(s => ({
     value: s.identifier,
@@ -399,13 +430,30 @@ export function SourceNode({ id, data, selected }: NodeProps<SourceNodeType>) {
             </div>
           )}
 
-          {!showPreview &&
-            sourceMode !== "spout" &&
-            sourceMode !== "ndi" &&
-            sourceMode !== "syphon" && (
-              <div className="flex items-center justify-center rounded-md bg-black/30 text-[10px] text-[#8c8c8d] flex-1 min-h-[40px]">
-                Waiting for input...
-              </div>
+          {/* Generic text-input for plugin-registered sources (or any
+              backend source we don't have bespoke UI for). source_name
+              is a free-form identifier (URL, path, ...); source_description
+              from the backend is rendered below as help text. */}
+          {!SOURCES_WITH_CUSTOM_UI.has(sourceMode) &&
+            !isBrowserSourceMode(sourceMode) && (
+              <>
+                <div className="px-2">
+                  <NodeParamRow
+                    label={currentSourceInfo?.source_name ?? "Source"}
+                  >
+                    <NodePillInput
+                      type="text"
+                      value={sourceName}
+                      onChange={handleGenericSourceNameChange}
+                    />
+                  </NodeParamRow>
+                </div>
+                {currentSourceInfo?.source_description && (
+                  <div className="px-2 text-[10px] text-[#8c8c8d]">
+                    {currentSourceInfo.source_description}
+                  </div>
+                )}
+              </>
             )}
         </div>
       )}
 
@@ -50,6 +50,7 @@ export interface EnrichNodesDeps {
   spoutOutputAvailable: boolean;
   ndiOutputAvailable: boolean;
   syphonOutputAvailable: boolean;
+  availableInputSources: import("../../../lib/api").InputSourceType[];
   handleEdgeDelete: (edgeId: string) => void;
   isStreaming: boolean;
   isLoading: boolean;
@@ -171,6 +172,7 @@ export function enrichNodes(
           spoutAvailable: deps.spoutAvailable,
           ndiAvailable: deps.ndiAvailable,
           syphonAvailable: deps.syphonAvailable,
+          availableInputSources: deps.availableInputSources,
           onSpoutSourceChange: (name: string) =>
             deps.onSpoutSourceChangeRef.current?.(name),
           onNdiSourceChange: (identifier: string) =>
 
@@ -32,6 +32,37 @@ const isElectron =
   typeof window !== "undefined" &&
   navigator.userAgent.toLowerCase().includes("electron");
 
+const ORIGIN_BADGE_CLASSES =
+  "text-[10px] uppercase tracking-wide px-1.5 py-0.5 rounded";
+
+function OriginBadge({ plugin }: { plugin: InstalledPlugin }) {
+  if (plugin.origin === "local") {
+    return (
+      <span
+        className={`${ORIGIN_BADGE_CLASSES} bg-primary/15 text-primary`}
+        title={
+          plugin.kind === "source"
+            ? "Source-kind plugin: runs on this machine even in cloud mode"
+            : "Installed on this machine"
+        }
+      >
+        Local
+      </span>
+    );
+  }
+  if (plugin.origin === "cloud") {
+    return (
+      <span
+        className={`${ORIGIN_BADGE_CLASSES} bg-muted text-muted-foreground`}
+        title="Installed in the cloud-hosted backend"
+      >
+        Cloud
+      </span>
+    );
+  }
+  return null;
+}
+
 // Transform plain Git host URLs to git+ format on paste
 const transformGitUrl = (value: string): string => {
   const trimmed = value.trim();
@@ -158,6 +189,7 @@ export function PluginsTab({
                           v{plugin.version}
                         </span>
                       )}
+                      <OriginBadge plugin={plugin} />
                     </div>
                     {plugin.author && (
                       <p className="text-xs text-muted-foreground">