From 35721763c385f433a770fef39ba04bef12d61aa7 Mon Sep 17 00:00:00 2001
From: shine1i <wasimysdev@gmail.com>
Date: Wed, 4 Feb 2026 16:37:42 +0100
Subject: [PATCH] straight lines

---
 .../features/canvas-lab/canvas-lab-page.tsx   |  8 ++++++
 .../canvas-lab/components/canvas-edge.tsx     | 26 +++++++++++++++++++
 .../src/features/canvas-lab/utils/graph.ts    |  2 +-
 .../features/canvas-lab/utils/import/edges.ts |  7 ++++-
 4 files changed, 41 insertions(+), 2 deletions(-)
 create mode 100644 studio/frontend/src/features/canvas-lab/components/canvas-edge.tsx

diff --git a/studio/frontend/src/features/canvas-lab/canvas-lab-page.tsx b/studio/frontend/src/features/canvas-lab/canvas-lab-page.tsx
index ca84b8eca1..2b31e6b953 100644
--- a/studio/frontend/src/features/canvas-lab/canvas-lab-page.tsx
+++ b/studio/frontend/src/features/canvas-lab/canvas-lab-page.tsx
@@ -1,6 +1,7 @@
 import {
   Background,
   BackgroundVariant,
+  type EdgeTypes,
   type Node,
   type NodeTypes,
   Panel,
@@ -15,6 +16,7 @@ import { EyeIcon } from "@hugeicons/core-free-icons";
 import { HugeiconsIcon } from "@hugeicons/react";
 import { previewCanvas } from "./api";
 import { BlockSheet } from "./components/block-sheet";
+import { CanvasEdge } from "./components/canvas-edge";
 import { CanvasNode } from "./components/canvas-node";
 import { ConfigDialog } from "./dialogs/config-dialog";
 import { ImportDialog } from "./dialogs/import-dialog";
@@ -25,6 +27,7 @@ import { importCanvasPayload } from "./utils/import";
 import { buildCanvasPayload } from "./utils/payload";
 
 const NODE_TYPES: NodeTypes = { builder: CanvasNode };
+const EDGE_TYPES: EdgeTypes = { canvas: CanvasEdge };
 
 export function CanvasLabPage(): ReactElement {
   const {
@@ -228,6 +231,11 @@ export function CanvasLabPage(): ReactElement {
             nodes={nodes}
             edges={edges}
             nodeTypes={NODE_TYPES}
+            edgeTypes={EDGE_TYPES}
+            defaultEdgeOptions={{
+              type: "canvas",
+              style: { strokeWidth: 1.5, stroke: "#cbd5f5" },
+            }}
             onNodesChange={onNodesChange}
             onEdgesChange={onEdgesChange}
             onConnect={onConnect}
diff --git a/studio/frontend/src/features/canvas-lab/components/canvas-edge.tsx b/studio/frontend/src/features/canvas-lab/components/canvas-edge.tsx
new file mode 100644
index 0000000000..6ae2408054
--- /dev/null
+++ b/studio/frontend/src/features/canvas-lab/components/canvas-edge.tsx
@@ -0,0 +1,26 @@
+import { BaseEdge, type EdgeProps, getSmoothStepPath } from "@xyflow/react";
+import { memo } from "react";
+
+export const CanvasEdge = memo(function CanvasEdge({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition,
+  style,
+}: EdgeProps): JSX.Element {
+  const [path] = getSmoothStepPath({
+    sourceX,
+    sourceY,
+    sourcePosition,
+    targetX,
+    targetY,
+    targetPosition,
+    borderRadius: 0,
+    offset: 16,
+  });
+
+  return <BaseEdge id={id} path={path} style={style} />;
+});
diff --git a/studio/frontend/src/features/canvas-lab/utils/graph.ts b/studio/frontend/src/features/canvas-lab/utils/graph.ts
index afdee312ac..6580381838 100644
--- a/studio/frontend/src/features/canvas-lab/utils/graph.ts
+++ b/studio/frontend/src/features/canvas-lab/utils/graph.ts
@@ -73,7 +73,7 @@ export function applyCanvasConnection(
   if (!(source && target)) {
     return { edges };
   }
-  const nextEdges = addEdge(connection, edges);
+  const nextEdges = addEdge({ ...connection, type: "canvas" }, edges);
   if (isLlmConfig(target)) {
     const ref = `{{ ${source.name} }}`;
     const next = {
diff --git a/studio/frontend/src/features/canvas-lab/utils/import/edges.ts b/studio/frontend/src/features/canvas-lab/utils/import/edges.ts
index 21994f5e6c..76fd94f558 100644
--- a/studio/frontend/src/features/canvas-lab/utils/import/edges.ts
+++ b/studio/frontend/src/features/canvas-lab/utils/import/edges.ts
@@ -20,7 +20,12 @@ export function buildEdges(
       return;
     }
     seen.add(key);
-    edges.push({ id: `e-${key}`, source: sourceId, target: targetId });
+    edges.push({
+      id: `e-${key}`,
+      source: sourceId,
+      target: targetId,
+      type: "canvas",
+    });
   };
 
   if (uiEdges && uiEdges.length > 0) {