PoC: Graph Mode

frontend/package.json

@@ -24,6 +24,7 @@
     "@radix-ui/react-toggle": "^1.1.10",
     "@radix-ui/react-toggle-group": "^1.1.11",
     "@radix-ui/react-tooltip": "^1.2.8",
+    "@xyflow/react": "^12.10.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.544.0",

frontend/src/components/ComplexFields.tsx

@@ -72,6 +72,8 @@ export interface SchemaComplexFieldContext {
   isStreaming?: boolean;
   isLoading?: boolean;
   isCloudMode?: boolean;
+  /** When true, VACE controls are disabled (pipeline chain from DAG editor). */
+  graphMode?: boolean;
   /** Per-field overrides for schema-driven fields (e.g. image path). */
   schemaFieldOverrides?: Record<string, unknown>;
   onSchemaFieldOverrideChange?: (
@@ -132,7 +134,7 @@ export function SchemaComplexField({
   if (component === "vace" && !rendered.has("vace")) {
     rendered.add("vace");
     return (
-      <div key="vace" className="space-y-2">
+      <div key="vace" className={`space-y-2 ${ctx.graphMode ? "opacity-50 pointer-events-none" : ""}`}>
         <div className="flex items-center justify-between gap-2">
           <LabelWithTooltip
             label="VACE"

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, GitBranch } from "lucide-react";
 import { Button } from "./ui/button";
 import { SettingsDialog } from "./SettingsDialog";
+import { DagEditorDialog } from "./dag/DagEditorDialog";
 import { toast } from "sonner";
 import { useCloudStatus } from "../hooks/useCloudStatus";
 
@@ -22,6 +23,7 @@ export function Header({
   onSettingsTabOpened,
 }: HeaderProps) {
   const [settingsOpen, setSettingsOpen] = useState(false);
+  const [dagEditorOpen, setDagEditorOpen] = useState(false);
   const [initialTab, setInitialTab] = useState<
     "general" | "account" | "api-keys" | "plugins"
   >("general");
@@ -114,6 +116,15 @@ export function Header({
       <div className="flex items-center justify-between">
         <h1 className="text-xl font-medium text-foreground">Daydream Scope</h1>
         <div className="flex items-center gap-1">
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={() => setDagEditorOpen(true)}
+            className="hover:opacity-80 transition-opacity text-muted-foreground opacity-60 h-8 w-8"
+            title="DAG Editor"
+          >
+            <GitBranch className="h-5 w-5" />
+          </Button>
           <Button
             variant="ghost"
             size="icon"
@@ -161,6 +172,11 @@ export function Header({
         onPipelinesRefresh={onPipelinesRefresh}
         cloudDisabled={cloudDisabled}
       />
+
+      <DagEditorDialog
+        open={dagEditorOpen}
+        onClose={() => setDagEditorOpen(false)}
+      />
     </header>
   );
 }