revert: roll back custom n8n build canvas (phases 1-3)

The custom React Flow canvas didn't hold up in real testing — generic
monogram tiles instead of real n8n node icons broke the immersion, and
the canvas → iframe handoff felt like a context switch rather than a
seamless reveal. Better to use the real n8n UI throughout, even if the
node-by-node build animation is harder to engineer.

Reverts:
- 6a6d27a feat(n8n-canvas): phase 3 — entry, edge-draw, and handoff animations
- 387bbf9 feat(n8n-canvas): phase 2 — render the canonical workflow on a custom canvas
- 87eac96 feat(n8n-canvas): phase 1 — emit workflowDraft and nodeExploring events

Removes: N8nBuildCanvas component + CSS, n8nBuildState in chat-context,
workflowDraft/nodeExploring event types, keepBuildCanvasMounted latch,
workflow.json detector in e2b_write_file, get_node interception in
n8nMcpToolsMiddleware, @xyflow/react dependency.

Preserves all unrelated fixes from prior commits (path normalization,
validate-loop break, summary filter, UUID requirement, token tracking,
cold-start gate).

Next step is a different approach: have the agent use n8n's REST API
to mutate an existing workflow live, so users see real n8n nodes
appearing one at a time in the actual n8n UI via its WebSocket-driven
canvas updates.

Author: kaifcoder

package-lock.json

@@ -65,7 +65,6 @@
     "@trpc/tanstack-react-query": "^11.4.3",
     "@types/http-proxy": "^1.17.17",
     "@vercel/speed-insights": "^2.0.0",
-    "@xyflow/react": "^12.11.0",
     "class-variance-authority": "^0.7.1",
     "client-only": "^0.0.1",
     "clsx": "^2.1.1",

package.json

@@ -16,7 +16,6 @@ import { GithubButton } from "@/components/GithubButton";
 import { TemplateApprovalCard } from "@/components/TemplateApprovalCard";
 import { SandboxExpiredPanel } from "@/components/SandboxExpiredPanel";
 import { BackendWarmingBanner } from "@/components/BackendWarmingBanner";
-import { N8nBuildCanvas } from "@/components/N8nBuildCanvas";
 import { Users } from "lucide-react";
 import { useIsMobile } from "@/hooks/use-mobile";
 import { useAgentStream } from "@/hooks/use-agent-stream";
@@ -304,26 +303,6 @@ function ChatPage() {
   // from here instead of the e2b URL so the n8n auth cookie lands first-party
   // (browsers block third-party cookies in iframes even with SameSite=None).
   const [n8nClaimUrl, setN8nClaimUrl] = useState<string | null>(null);
-  // Build-canvas hand-off latch: stays true while the n8n build canvas is
-  // active (exploring/drafting) AND for ~400ms past the phase flip to
-  // 'finalized', so the canvas can run its CSS fade-out before the iframe
-  // takes over. Without this latch, the canvas unmounts the instant the
-  // workflowReady event arrives and the user sees a hard cut to the iframe.
-  const [keepBuildCanvasMounted, setKeepBuildCanvasMounted] = useState(false);
-  useEffect(() => {
-    const phase = ctx.n8nBuildState.phase;
-    if (phase === "exploring" || phase === "drafting") {
-      setKeepBuildCanvasMounted(true);
-      return;
-    }
-    if (phase === "finalized" && keepBuildCanvasMounted) {
-      // Already mounted — hold for the fade-out duration then unmount.
-      const timer = setTimeout(() => setKeepBuildCanvasMounted(false), 400);
-      return () => clearTimeout(timer);
-    }
-    // 'idle' or fresh-mount on 'finalized' — no canvas to keep.
-    if (phase === "idle") setKeepBuildCanvasMounted(false);
-  }, [ctx.n8nBuildState.phase, keepBuildCanvasMounted]);
 
   // --- Refs for one-shot effects ---
   const didInitRef = useRef(false);
@@ -869,22 +848,6 @@ function ChatPage() {
       );
     }
 
-    // n8n build canvas — replaces the iframe while the agent is composing the
-    // workflow. Snaps from placeholders (exploring) to a positioned canonical
-    // graph (drafting) before handing off to the real n8n UI in the iframe
-    // once `workflowReady` flips phase to `finalized`. The keepBuildCanvasMounted
-    // latch holds the canvas in the DOM ~400ms past the phase flip so its
-    // CSS fade-out can play before the iframe takes over.
-    if (ctx.templateType === "n8n" && keepBuildCanvasMounted) {
-      return (
-        <N8nBuildCanvas
-          phase={ctx.n8nBuildState.phase}
-          exploredNodeTypes={ctx.n8nBuildState.exploredNodeTypes}
-          draft={ctx.n8nBuildState.draft}
-        />
-      );
-    }
-
     if (ctx.sandboxUrl && !ctx.isSandboxExpired) {
       return (
         <div className="relative w-full h-full flex flex-col bg-background">