PoC: Plugins in separate environments

frontend/src/components/DownloadDialog.tsx

@@ -9,11 +9,12 @@ import {
   DialogTitle,
 } from "./ui/dialog";
 import { Progress } from "./ui/progress";
-import { PIPELINES } from "../data/pipelines";
 import type { PipelineId, DownloadProgress } from "../types";
+import type { PipelineInfo } from "../hooks/usePipelines";
 
 interface DownloadDialogProps {
   open: boolean;
+  pipelines: Record<string, PipelineInfo> | null;
   pipelineId: PipelineId;
   onClose: () => void;
   onDownload: () => void;
@@ -23,13 +24,14 @@ interface DownloadDialogProps {
 
 export function DownloadDialog({
   open,
+  pipelines,
   pipelineId,
   onClose,
   onDownload,
   isDownloading = false,
   progress = null,
 }: DownloadDialogProps) {
-  const pipelineInfo = PIPELINES[pipelineId];
+  const pipelineInfo = pipelines?.[pipelineId];
   if (!pipelineInfo) return null;
 
   return (

frontend/src/components/InputAndControlsPanel.tsx

@@ -15,7 +15,7 @@ import { LabelWithTooltip } from "./ui/label-with-tooltip";
 import type { VideoSourceMode } from "../hooks/useVideoSource";
 import type { PromptItem, PromptTransition } from "../lib/api";
 import type { InputMode } from "../types";
-import { pipelineIsMultiMode } from "../data/pipelines";
+import type { PipelineInfo } from "../hooks/usePipelines";
 import { PromptInput } from "./PromptInput";
 import { TimelinePromptEditor } from "./TimelinePromptEditor";
 import type { TimelinePrompt } from "./PromptTimeline";
@@ -24,6 +24,7 @@ import { Button } from "./ui/button";
 
 interface InputAndControlsPanelProps {
   className?: string;
+  pipelines: Record<string, PipelineInfo> | null;
   localStream: MediaStream | null;
   isInitializing: boolean;
   error: string | null;
@@ -73,6 +74,7 @@ interface InputAndControlsPanelProps {
 
 export function InputAndControlsPanel({
   className = "",
+  pipelines,
   localStream,
   isInitializing,
   error,
@@ -128,7 +130,8 @@ export function InputAndControlsPanel({
   const videoRef = useRef<HTMLVideoElement>(null);
 
   // Check if this pipeline supports multiple input modes
-  const isMultiMode = pipelineIsMultiMode(pipelineId);
+  const pipeline = pipelines?.[pipelineId];
+  const isMultiMode = (pipeline?.supportedModes?.length ?? 0) > 1;
 
   useEffect(() => {
     if (videoRef.current && localStream) {
@@ -329,6 +332,11 @@ export function InputAndControlsPanel({
             // The Input can have two states: Append (default) and Edit (when a prompt is selected and the video is paused)
             const isEditMode = selectedTimelinePrompt && isVideoPaused;
 
+            // Hide prompts section if pipeline doesn't support prompts
+            if (pipeline?.supportsPrompts === false) {
+              return null;
+            }
+
             return (
               <div>
                 <div className="flex items-center justify-between mb-2">
@@ -358,7 +366,6 @@ export function InputAndControlsPanel({
                     onPromptsSubmit={onPromptsSubmit}
                     onTransitionSubmit={onTransitionSubmit}
                     disabled={
-                      pipelineId === "passthrough" ||
                       (_isTimelinePlaying &&
                         !isVideoPaused &&
                         !isAtEndOfTimeline()) ||

frontend/src/components/SettingsPanel.tsx

@@ -19,12 +19,7 @@ import { Input } from "./ui/input";
 import { Button } from "./ui/button";
 import { Toggle } from "./ui/toggle";
 import { SliderWithInput } from "./ui/slider-with-input";
-import { Hammer, Info, Minus, Plus, RotateCcw } from "lucide-react";
-import {
-  PIPELINES,
-  pipelineSupportsLoRA,
-  pipelineSupportsVACE,
-} from "../data/pipelines";
+import { Info, Minus, Plus, RotateCcw } from "lucide-react";
 import { PARAMETER_METADATA } from "../data/parameterMetadata";
 import { DenoisingStepsSlider } from "./DenoisingStepsSlider";
 import { useLocalSliderValue } from "../hooks/useLocalSliderValue";
@@ -35,12 +30,14 @@ import type {
   SettingsState,
   InputMode,
 } from "../types";
+import type { PipelineInfo } from "../hooks/usePipelines";
 import { LoRAManager } from "./LoRAManager";
 
 const MIN_DIMENSION = 16;
 
 interface SettingsPanelProps {
   className?: string;
+  pipelines: Record<string, PipelineInfo> | null;
   pipelineId: PipelineId;
   onPipelineIdChange?: (pipelineId: PipelineId) => void;
   isStreaming?: boolean;
@@ -89,6 +86,7 @@ interface SettingsPanelProps {
 
 export function SettingsPanel({
   className = "",
+  pipelines,
   pipelineId,
   onPipelineIdChange,
   isStreaming = false,
@@ -141,7 +139,7 @@ export function SettingsPanel({
   const [seedError, setSeedError] = useState<string | null>(null);
 
   const handlePipelineIdChange = (value: string) => {
-    if (value in PIPELINES) {
+    if (pipelines && value in pipelines) {
       onPipelineIdChange?.(value as PipelineId);
     }
   };
@@ -235,7 +233,7 @@ export function SettingsPanel({
     handleSeedChange(newValue);
   };
 
-  const currentPipeline = PIPELINES[pipelineId];
+  const currentPipeline = pipelines?.[pipelineId];
 
   return (
     <Card className={`h-full flex flex-col ${className}`}>
@@ -254,11 +252,12 @@ export function SettingsPanel({
               <SelectValue placeholder="Select a pipeline" />
             </SelectTrigger>
             <SelectContent>
-              {Object.keys(PIPELINES).map(id => (
-                <SelectItem key={id} value={id}>
-                  {id}
-                </SelectItem>
-              ))}
+              {pipelines &&
+                Object.keys(pipelines).map(id => (
+                  <SelectItem key={id} value={id}>
+                    {id}
+                  </SelectItem>
+                ))}
             </SelectContent>
           </Select>
         </div>
@@ -273,9 +272,7 @@ export function SettingsPanel({
               </div>
 
               <div>
-                {(currentPipeline.about ||
-                  currentPipeline.docsUrl ||
-                  currentPipeline.modified) && (
+                {(currentPipeline.about || currentPipeline.docsUrl) && (
                   <div className="flex items-stretch gap-1 h-6">
                     {currentPipeline.about && (
                       <TooltipProvider>
@@ -294,26 +291,6 @@ export function SettingsPanel({
                         </Tooltip>
                       </TooltipProvider>
                     )}
-                    {currentPipeline.modified && (
-                      <TooltipProvider>
-                        <Tooltip>
-                          <TooltipTrigger asChild>
-                            <Badge
-                              variant="outline"
-                              className="cursor-help hover:bg-accent h-full flex items-center justify-center"
-                            >
-                              <Hammer className="h-3.5 w-3.5" />
-                            </Badge>
-                          </TooltipTrigger>
-                          <TooltipContent>
-                            <p>
-                              This pipeline contains modifications based on the
-                              original project.
-                            </p>
-                          </TooltipContent>
-                        </Tooltip>
-                      </TooltipProvider>
-                    )}
                     {currentPipeline.docsUrl && (
                       <a
                         href={currentPipeline.docsUrl}
@@ -337,7 +314,7 @@ export function SettingsPanel({
         )}
 
         {/* VACE Toggle */}
-        {pipelineSupportsVACE(pipelineId) && (
+        {currentPipeline?.supportsVACE && (
           <div className="space-y-2">
             <div className="flex items-center justify-between gap-2">
               <LabelWithTooltip
@@ -384,7 +361,7 @@ export function SettingsPanel({
           </div>
         )}
 
-        {pipelineSupportsLoRA(pipelineId) && (
+        {currentPipeline?.supportsLoRA && (
           <div className="space-y-4">
             <LoRAManager
               loras={loras}