diff --git a/LICENSE b/LICENSE
new file mode 100644
index 00000000..482354ca
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Robopipe
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
index 868d8182..0e5b2be4 100644
--- a/README.md
+++ b/README.md
@@ -115,3 +115,9 @@ Robopipe values all your feedback. If you encounter any problems with the app, p
 ## 👫 Community
 
 Join our [Robopipe subreddit](https://www.reddit.com/r/robopipe/) to share your apps, ask any questions regarding Robopipe, get help debugging your apps, or simply to read more about Robopipe from our users.
+
+## 📄 License
+
+Robopipe Studio is released under the [MIT License](LICENSE).
+
+This software was created with the support of the Faculty of Information Technology, CTU in Prague. More information at [fit.cvut.cz](https://fit.cvut.cz).
\ No newline at end of file
diff --git a/apps/web/e2e/clipboard.spec.ts b/apps/web/e2e/clipboard.spec.ts
new file mode 100644
index 00000000..91a5d053
--- /dev/null
+++ b/apps/web/e2e/clipboard.spec.ts
@@ -0,0 +1,102 @@
+import { expect, test } from "@playwright/test";
+import {
+  addNodeAt,
+  canvasCentre,
+  createLimitWithChildren,
+  getConnections,
+  getNodes,
+  gotoEditor,
+  nodeById,
+} from "./helpers";
+
+test.describe("Copy, paste & cut", () => {
+  test.beforeEach(async ({ page }) => {
+    await gotoEditor(page);
+  });
+
+  test("copy + paste duplicates the selected node", async ({ page }) => {
+    const id = await addNodeAt(page, "a", 0, 0);
+    await nodeById(page, id).click();
+
+    await page.keyboard.press("ControlOrMeta+c");
+    const centre = await canvasCentre(page);
+    await page.mouse.move(centre.x + 200, centre.y + 100);
+    await page.keyboard.press("ControlOrMeta+v");
+
+    const nodes = await getNodes(page);
+    expect(nodes).toHaveLength(2);
+    expect(nodes.map((n) => n.label)).toEqual(["AND", "AND"]);
+  });
+
+  test("cut removes the original and clipboard still pastes", async ({
+    page,
+  }) => {
+    const id = await addNodeAt(page, "a", 0, 0);
+    await nodeById(page, id).click();
+
+    await page.keyboard.press("ControlOrMeta+x");
+    expect(await getNodes(page)).toHaveLength(0);
+
+    const centre = await canvasCentre(page);
+    await page.mouse.move(centre.x + 100, centre.y);
+    await page.keyboard.press("ControlOrMeta+v");
+
+    expect(await getNodes(page)).toHaveLength(1);
+  });
+
+  test("paste with empty clipboard is a no-op", async ({ page }) => {
+    await page.keyboard.press("ControlOrMeta+v");
+    expect(await getNodes(page)).toHaveLength(0);
+  });
+
+  test("paste preserves internal connections between copied nodes", async ({
+    page,
+  }) => {
+    const a = await addNodeAt(page, "a", -250, 0);
+    const b = await addNodeAt(page, "a", 250, 0);
+
+    await page.evaluate(
+      ({ aId, bId }) => window.__editor!.addBooleanConnection(aId, bId),
+      {
+        aId: a,
+        bId: b,
+      },
+    );
+    expect(await getConnections(page)).toHaveLength(1);
+
+    await nodeById(page, a).click();
+    await nodeById(page, b).click({ modifiers: ["ControlOrMeta"] });
+    await page.keyboard.press("ControlOrMeta+c");
+
+    const centre = await canvasCentre(page);
+    await page.mouse.move(centre.x, centre.y + 200);
+    await page.keyboard.press("ControlOrMeta+v");
+
+    expect(await getNodes(page)).toHaveLength(4);
+    expect(await getConnections(page)).toHaveLength(2);
+  });
+
+  test("paste preserves parent-child relationships", async ({ page }) => {
+    const { limitId } = await createLimitWithChildren(page, 2);
+
+
+    await nodeById(page, limitId).click({ position: { x: 5, y: 5 } });
+
+    await page.keyboard.press("ControlOrMeta+c");
+    const centre = await canvasCentre(page);
+    await page.mouse.move(centre.x, centre.y + 300);
+    await page.keyboard.press("ControlOrMeta+v");
+
+    const after = await getNodes(page);
+    expect(after).toHaveLength(6);
+
+    const limits = after.filter((n) => n.label === "Limit");
+    expect(limits).toHaveLength(2);
+
+    for (const lim of limits) {
+      const children = after.filter((n) => n.parent === lim.id);
+      expect(children).toHaveLength(2);
+      expect(children.every((c) => c.label === "Count")).toBe(true);
+    }
+  });
+});
diff --git a/apps/web/e2e/connections.spec.ts b/apps/web/e2e/connections.spec.ts
new file mode 100644
index 00000000..c7f6d3df
--- /dev/null
+++ b/apps/web/e2e/connections.spec.ts
@@ -0,0 +1,263 @@
+import { expect, test, type Locator, type Page } from "@playwright/test";
+import {
+  addNodeAt,
+  getConnections,
+  gotoEditor,
+  inSocket,
+  outSocket,
+  settle,
+} from "./helpers";
+
+async function dragSocketToSocket(
+  page: Page,
+  source: Locator,
+  target: Locator,
+) {
+  const s = await source.boundingBox();
+  const t = await target.boundingBox();
+  if (!s || !t) throw new Error("socket not visible");
+  const from = { x: s.x + s.width / 2, y: s.y + s.height / 2 };
+  const to = { x: t.x + t.width / 2, y: t.y + t.height / 2 };
+
+  await page.mouse.move(from.x, from.y);
+  await page.mouse.down();
+
+  await page.mouse.move(to.x, to.y, { steps: 12 });
+  await page.mouse.up();
+}
+
+test.describe("Connections", () => {
+  test.beforeEach(async ({ page }) => {
+    await gotoEditor(page);
+  });
+
+  test("dragging output to input creates a boolean connection", async ({
+    page,
+  }) => {
+    const a = await addNodeAt(page, "a", -250, 0);
+    const b = await addNodeAt(page, "a", 250, 0);
+
+    await dragSocketToSocket(page, outSocket(page, a), inSocket(page, b));
+
+    const connections = await getConnections(page);
+    expect(connections).toHaveLength(1);
+    expect(connections[0]!.source).toBe(a);
+    expect(connections[0]!.target).toBe(b);
+  });
+
+  test("dragging output to input creates a rule (limit-item) connection", async ({
+    page,
+  }) => {
+    const a = await addNodeAt(page, "1", -250, 0);
+    const b = await addNodeAt(page, "1", 250, 0);
+
+    await dragSocketToSocket(page, outSocket(page, a), inSocket(page, b));
+
+    const connections = await getConnections(page);
+    expect(connections).toHaveLength(1);
+    expect(connections[0]!.source).toBe(a);
+    expect(connections[0]!.target).toBe(b);
+  });
+
+  test("mixed socket types are rejected", async ({ page }) => {
+    const andNode = await addNodeAt(page, "a", -250, 0);
+    const count = await addNodeAt(page, "1", 250, 0);
+
+    await dragSocketToSocket(
+      page,
+      outSocket(page, andNode),
+      inSocket(page, count),
+    );
+
+    await settle(page);
+    expect(await getConnections(page)).toHaveLength(0);
+  });
+
+  test("dropping a connection on empty canvas creates nothing", async ({
+    page,
+  }) => {
+    const a = await addNodeAt(page, "a", -250, 0);
+
+    const sourceBox = await outSocket(page, a).boundingBox();
+    if (!sourceBox) throw new Error("socket missing");
+    await page.mouse.move(
+      sourceBox.x + sourceBox.width / 2,
+      sourceBox.y + sourceBox.height / 2,
+    );
+    await page.mouse.down();
+    await page.mouse.move(sourceBox.x + 400, sourceBox.y + 300, { steps: 10 });
+    await page.mouse.up();
+
+    await settle(page);
+    expect(await getConnections(page)).toHaveLength(0);
+  });
+
+  test("magnetic snap connects when released near (not on) a socket", async ({
+    page,
+  }) => {
+    const a = await addNodeAt(page, "a", -250, 0);
+    const b = await addNodeAt(page, "a", 250, 0);
+
+    const s = await outSocket(page, a).boundingBox();
+    const t = await inSocket(page, b).boundingBox();
+    if (!s || !t) throw new Error("socket not visible");
+
+    // Release off the 20px socket but within the magnetic distance — snaps.
+    await page.mouse.move(s.x + s.width / 2, s.y + s.height / 2);
+    await page.mouse.down();
+    await page.mouse.move(t.x + t.width / 2 - 25, t.y + t.height / 2 + 18, {
+      steps: 12,
+    });
+    await page.mouse.up();
+
+    await settle(page);
+    const connections = await getConnections(page);
+    expect(connections).toHaveLength(1);
+    expect(connections[0]!.source).toBe(a);
+    expect(connections[0]!.target).toBe(b);
+  });
+
+  test("pressing Escape cancels a magnetic snap instead of committing it", async ({
+    page,
+  }) => {
+    const a = await addNodeAt(page, "a", -250, 0);
+    const b = await addNodeAt(page, "a", 250, 0);
+
+    const s = await outSocket(page, a).boundingBox();
+    const t = await inSocket(page, b).boundingBox();
+    if (!s || !t) throw new Error("socket not visible");
+
+    // Drag into magnetic range so the preview is active, then Escape.
+    await page.mouse.move(s.x + s.width / 2, s.y + s.height / 2);
+    await page.mouse.down();
+    await page.mouse.move(t.x + t.width / 2 - 25, t.y + t.height / 2 + 18, {
+      steps: 12,
+    });
+    await page.keyboard.press("Escape");
+    await page.mouse.up();
+
+    await settle(page);
+    expect(await getConnections(page)).toHaveLength(0);
+  });
+
+  test("magnetic preview does not resurrect after a connection is removed", async ({
+    page,
+  }) => {
+    const a = await addNodeAt(page, "a", -250, 0);
+    const b = await addNodeAt(page, "a", 250, 0);
+
+    // Create, then remove by dragging the input end out to empty space.
+    await dragSocketToSocket(page, outSocket(page, a), inSocket(page, b));
+    expect(await getConnections(page)).toHaveLength(1);
+
+    const t = await inSocket(page, b).boundingBox();
+    if (!t) throw new Error("socket not visible");
+    await page.mouse.move(t.x + t.width / 2, t.y + t.height / 2);
+    await page.mouse.down();
+    await page.mouse.move(t.x + 400, t.y + 300, { steps: 10 });
+    await page.mouse.up();
+
+    await settle(page);
+    expect(await getConnections(page)).toHaveLength(0);
+
+    // Hover (no button held) back near the input socket — must NOT show a
+    // preview or recreate the connection.
+    await page.mouse.move(t.x + t.width / 2 - 25, t.y + t.height / 2 + 18);
+    await settle(page);
+
+    await expect(page.getByTestId("magnetic-connection")).toHaveCount(0);
+    expect(await getConnections(page)).toHaveLength(0);
+  });
+
+  test("re-picking a connection end can reconnect it to another node", async ({
+    page,
+  }) => {
+    const a = await addNodeAt(page, "a", -300, 0);
+    const b = await addNodeAt(page, "a", 0, 0);
+    const c = await addNodeAt(page, "a", 300, 0);
+
+    await dragSocketToSocket(page, outSocket(page, a), inSocket(page, b));
+    expect(await getConnections(page)).toHaveLength(1);
+
+    // Grab the connection at B's input and drop it on C's input.
+    await dragSocketToSocket(page, inSocket(page, b), inSocket(page, c));
+    await settle(page);
+
+    const connections = await getConnections(page);
+    expect(connections).toHaveLength(1);
+    expect(connections[0]!.source).toBe(a);
+    expect(connections[0]!.target).toBe(c);
+  });
+
+  test("magnetic snap works while reconnecting an existing connection", async ({
+    page,
+  }) => {
+    const a = await addNodeAt(page, "a", -300, 0);
+    const b = await addNodeAt(page, "a", 0, 0);
+    const c = await addNodeAt(page, "a", 300, 0);
+
+    await dragSocketToSocket(page, outSocket(page, a), inSocket(page, b));
+    expect(await getConnections(page)).toHaveLength(1);
+
+    // Re-pick at B's end, release NEAR (not on) C's input — the magnet should snap.
+    const from = await inSocket(page, b).boundingBox();
+    const to = await inSocket(page, c).boundingBox();
+    if (!from || !to) throw new Error("socket not visible");
+    await page.mouse.move(from.x + from.width / 2, from.y + from.height / 2);
+    await page.mouse.down();
+    await page.mouse.move(to.x + to.width / 2 - 25, to.y + to.height / 2 + 18, {
+      steps: 12,
+    });
+    await page.mouse.up();
+
+    await settle(page);
+    const connections = await getConnections(page);
+    expect(connections).toHaveLength(1);
+    expect(connections[0]!.source).toBe(a);
+    expect(connections[0]!.target).toBe(c);
+  });
+
+  test("magnetic snap does not reach beyond its distance", async ({ page }) => {
+    const a = await addNodeAt(page, "a", -250, 0);
+    const b = await addNodeAt(page, "a", 250, 0);
+
+    const s = await outSocket(page, a).boundingBox();
+    const t = await inSocket(page, b).boundingBox();
+    if (!s || !t) throw new Error("socket not visible");
+
+    // Release far from the input socket — outside the magnetic distance.
+    await page.mouse.move(s.x + s.width / 2, s.y + s.height / 2);
+    await page.mouse.down();
+    await page.mouse.move(t.x + t.width / 2 - 320, t.y + t.height / 2 - 220, {
+      steps: 12,
+    });
+    await page.mouse.up();
+
+    await settle(page);
+    expect(await getConnections(page)).toHaveLength(0);
+  });
+
+  test("toggling a boolean connection flips TRUE to NOT", async ({ page }) => {
+    const a = await addNodeAt(page, "a", -250, 0);
+    const b = await addNodeAt(page, "a", 250, 0);
+    await dragSocketToSocket(page, outSocket(page, a), inSocket(page, b));
+
+    const beforeOp = await page.evaluate(() => {
+      const { editor } = window.__editor!;
+      return (
+        editor.getConnections()[0] as unknown as { booleanOperator: string }
+      ).booleanOperator;
+    });
+    expect(beforeOp).toBe("TRUE");
+
+    await page.getByRole("button", { name: /^PASS$/ }).click();
+
+    const afterOp = await page.evaluate(() => {
+      const { editor } = window.__editor!;
+      return (
+        editor.getConnections()[0] as unknown as { booleanOperator: string }
+      ).booleanOperator;
+    });
+    expect(afterOp).toBe("NOT");
+  });
+});
diff --git a/apps/web/e2e/context-menu.spec.ts b/apps/web/e2e/context-menu.spec.ts
new file mode 100644
index 00000000..2d7123a0
--- /dev/null
+++ b/apps/web/e2e/context-menu.spec.ts
@@ -0,0 +1,70 @@
+import { expect, test } from "@playwright/test";
+import { addNodeAt, canvas, gotoEditor, nodeById } from "./helpers";
+
+test.describe("Context menu", () => {
+  test.beforeEach(async ({ page }) => {
+    await gotoEditor(page);
+  });
+
+  test("right clicking the background opens the root menu", async ({
+    page,
+  }) => {
+    await canvas(page).click({ button: "right", position: { x: 100, y: 100 } });
+
+    await expect(page.getByTestId("context-menu")).toBeVisible();
+    await expect(page.getByTestId("context-menu-item")).toHaveText([
+      "Check",
+      "Result",
+      "Check Item",
+      "Logical",
+      "Action",
+    ]);
+  });
+
+  test("right clicking a node shows the Delete & Clone items", async ({
+    page,
+  }) => {
+    const id = await addNodeAt(page, "a", 0, 0);
+
+    await nodeById(page, id).click({
+      button: "right",
+      position: { x: 5, y: 5 },
+    });
+    await expect(page.getByTestId("context-menu-item")).toHaveText([
+      "Delete",
+      "Clone",
+    ]);
+  });
+
+  const groups = [
+    { label: "Check Item", children: ["Position", "Area", "Count"] },
+    { label: "Logical", children: ["And", "Or"] },
+    { label: "Action", children: ["Warning", "Alert"] },
+  ];
+
+  for (const group of groups) {
+    test(`hovering "${group.label}" opens its submenu`, async ({ page }) => {
+      await canvas(page).click({
+        button: "right",
+        position: { x: 100, y: 100 },
+      });
+
+      const items = page.getByTestId("context-menu-item");
+      await items.filter({ hasText: new RegExp(`^${group.label}$`) }).hover();
+
+      for (const child of group.children) {
+        await expect(
+          items.filter({ hasText: new RegExp(`^${child}$`) }),
+        ).toBeVisible();
+      }
+    });
+  }
+
+  test("clicking outside closes the menu", async ({ page }) => {
+    await canvas(page).click({ button: "right", position: { x: 100, y: 100 } });
+    await expect(page.getByTestId("context-menu")).toBeVisible();
+
+    await canvas(page).click({ position: { x: 600, y: 600 } });
+    await expect(page.getByTestId("context-menu")).toBeHidden();
+  });
+});
diff --git a/apps/web/e2e/creation.spec.ts b/apps/web/e2e/creation.spec.ts
new file mode 100644
index 00000000..8f4bceef
--- /dev/null
+++ b/apps/web/e2e/creation.spec.ts
@@ -0,0 +1,65 @@
+import { expect, test } from "@playwright/test";
+import {
+  canvas,
+  canvasCentre,
+  getNodes,
+  gotoEditor,
+  pressShortcutAt,
+} from "./helpers";
+
+test.describe("Node creation", () => {
+  test.beforeEach(async ({ page }) => {
+    await gotoEditor(page);
+    expect(await getNodes(page)).toHaveLength(0);
+  });
+
+  test.describe("keyboard shortcuts", () => {
+    const cases: { key: string; label: string }[] = [
+      { key: "a", label: "AND" },
+      { key: "o", label: "OR" },
+      { key: "l", label: "Limit" },
+      { key: "r", label: "Result" },
+      { key: "1", label: "Count" },
+      { key: "2", label: "Area" },
+      { key: "3", label: "Position" },
+    ];
+
+    for (const { key, label } of cases) {
+      test(`"${key}" adds a ${label} node at the cursor`, async ({ page }) => {
+        await pressShortcutAt(page, key);
+        const nodes = await getNodes(page);
+        expect(nodes).toHaveLength(1);
+        expect(nodes[0]!.label).toBe(label);
+      });
+    }
+  });
+
+  test("new node is auto selected", async ({ page }) => {
+    await pressShortcutAt(page, "a");
+    const [node] = await getNodes(page);
+    expect(node!.selected).toBe(true);
+  });
+
+  test("two shortcut presses create two nodes", async ({ page }) => {
+    await pressShortcutAt(page, "a");
+    const centre = await canvasCentre(page);
+    await pressShortcutAt(page, "o", { x: centre.x + 200, y: centre.y });
+
+    const nodes = await getNodes(page);
+    expect(nodes.map((n) => n.label).sort()).toEqual(["AND", "OR"]);
+  });
+
+  test("context menu creates a Check node", async ({ page }) => {
+    await canvas(page).click({ button: "right", position: { x: 100, y: 100 } });
+
+    const checkItem = page
+      .getByTestId("context-menu-item")
+      .filter({ hasText: /^Check$/ });
+    await expect(checkItem).toBeVisible();
+    await checkItem.click();
+
+    const nodes = await getNodes(page);
+    expect(nodes).toHaveLength(1);
+    expect(nodes[0]!.label).toBe("Limit");
+  });
+});
diff --git a/apps/web/e2e/deletion.spec.ts b/apps/web/e2e/deletion.spec.ts
new file mode 100644
index 00000000..f2eaa3ad
--- /dev/null
+++ b/apps/web/e2e/deletion.spec.ts
@@ -0,0 +1,76 @@
+import { expect, test } from "@playwright/test";
+import {
+  addNodeAt,
+  createLimitWithChildren,
+  getConnections,
+  getNodes,
+  gotoEditor,
+  nodeById,
+} from "./helpers";
+
+test.describe("Deletion", () => {
+  test.beforeEach(async ({ page }) => {
+    await gotoEditor(page);
+  });
+
+  test("Backspace deletes the selected leaf node", async ({ page }) => {
+    const id = await addNodeAt(page, "a", 0, 0);
+    expect((await getNodes(page)).find((n) => n.id === id)).toBeDefined();
+
+    // when creating a node, it is automatically selected
+    await page.keyboard.press("Backspace");
+
+    expect(await getNodes(page)).toHaveLength(0);
+  });
+
+  test("Backspace on a LimitNode cascades to its children", async ({
+    page,
+  }) => {
+    const { limitId } = await createLimitWithChildren(page, 2);
+
+    await nodeById(page, limitId).click({ position: { x: 5, y: 5 } });
+    await page.keyboard.press("Backspace");
+
+    expect(await getNodes(page)).toHaveLength(0);
+  });
+
+  test("context menu Delete cascades on a LimitNode", async ({ page }) => {
+    const { limitId } = await createLimitWithChildren(page, 1);
+
+    await nodeById(page, limitId).click({
+      button: "right",
+      position: { x: 5, y: 5 },
+    });
+    await page
+      .getByTestId("context-menu-item")
+      .filter({ hasText: /^Delete$/ })
+      .click();
+
+    expect(await getNodes(page)).toHaveLength(0);
+  });
+
+  test("deleting a middle node also removes both connections", async ({
+    page,
+  }) => {
+    const a = await addNodeAt(page, "a", -300, 0);
+    const b = await addNodeAt(page, "a", 0, 0);
+    const c = await addNodeAt(page, "a", 300, 0);
+
+    await page.evaluate(
+      async ({ aId, bId, cId }) => {
+        await window.__editor!.addBooleanConnection(aId, bId);
+        await window.__editor!.addBooleanConnection(bId, cId);
+      },
+      { aId: a, bId: b, cId: c },
+    );
+
+    expect(await getConnections(page)).toHaveLength(2);
+
+    await nodeById(page, b).click();
+    await page.keyboard.press("Backspace");
+
+    const nodes = await getNodes(page);
+    expect(nodes.map((n) => n.id).sort()).toEqual([a, c].sort());
+    expect(await getConnections(page)).toHaveLength(0);
+  });
+});
diff --git a/apps/web/e2e/helpers.ts b/apps/web/e2e/helpers.ts
new file mode 100644
index 00000000..43a1145a
--- /dev/null
+++ b/apps/web/e2e/helpers.ts
@@ -0,0 +1,239 @@
+import { GRID } from "@/modules/evaluation/graph/editor/constants";
+import type { Locator, Page } from "@playwright/test";
+import { expect } from "@playwright/test";
+
+/**
+ * Loads the editor and waits for the test hook to be installed.
+ * Always call this at the start of a test.
+ */
+export async function gotoEditor(page: Page) {
+  await page.goto("/");
+  await page.waitForFunction(() => Boolean(window.__editor));
+  await expect(page.getByTestId("editor-canvas")).toBeVisible();
+}
+
+/**
+ * Returns the canvas locator. Tests should target gestures (right click,
+ * keyboard, wheel) against this element - it is the actual rete container.
+ */
+export function canvas(page: Page): Locator {
+  return page.getByTestId("editor-canvas");
+}
+
+export type NodeSnapshot = {
+  id: string;
+  label: string;
+  selected: boolean;
+  parent: string | null;
+  position: { x: number; y: number };
+};
+
+/**
+ * Snapshot of every nodes {id, label, selected, parent, position}.
+ */
+export async function getNodes(page: Page): Promise<NodeSnapshot[]> {
+  return page.evaluate(() => {
+    const handle = window.__editor;
+    if (!handle) throw new Error("test hook not installed");
+    return handle.editor.getNodes().map((node) => {
+      const view = handle.area.nodeViews.get(node.id);
+      return {
+        id: node.id,
+        label: node.label,
+        selected: Boolean(node.selected),
+        parent: node.parent ?? null,
+        position: view
+          ? { x: view.position.x, y: view.position.y }
+          : { x: 0, y: 0 },
+      };
+    });
+  });
+}
+
+export async function getZoom(page: Page) {
+  return page.evaluate(() => {
+    const handle = window.__editor;
+    if (!handle) throw new Error("test hook not installed");
+    return handle.area.area.transform.k;
+  });
+}
+
+/** Centre of the canvas, in viewport coords. Useful for cursor-anchored shortcuts. */
+export async function canvasCentre(page: Page) {
+  const box = await canvas(page).boundingBox();
+  if (!box) throw new Error("canvas not visible");
+  return { x: box.x + box.width / 2, y: box.y + box.height / 2 };
+}
+
+/**
+ * Moves the mouse over the canvas before triggering a keyboard shortcut so
+ * setupKeyListeners pointermove tracker has a known position.
+ */
+export async function pressShortcutAt(
+  page: Page,
+  key: string,
+  position?: { x: number; y: number },
+) {
+  const target = position ?? (await canvasCentre(page));
+  await page.mouse.move(target.x, target.y);
+  await page.keyboard.press(key);
+}
+
+/** Locator for a specific node by its rete id. */
+export function nodeById(page: Page, id: string): Locator {
+  return page.locator(`[data-node-id="${id}"]`);
+}
+
+/** Output / input socket locators for a node, by the project-wide testid convention. */
+export function outSocket(page: Page, id: string): Locator {
+  return page.getByTestId(`socket-output-${id}`);
+}
+
+export function inSocket(page: Page, id: string): Locator {
+  return page.getByTestId(`socket-input-${id}`);
+}
+
+export type ConnectionSnapshot = {
+  id: string;
+  source: string;
+  target: string;
+  sourceOutput: string;
+  targetInput: string;
+};
+
+export async function getConnections(
+  page: Page,
+): Promise<ConnectionSnapshot[]> {
+  return page.evaluate(() => {
+    const handle = window.__editor;
+    if (!handle) throw new Error("test hook not installed");
+    return handle.editor.getConnections().map((c) => ({
+      id: c.id,
+      source: c.source,
+      target: c.target,
+      sourceOutput: String(c.sourceOutput),
+      targetInput: String(c.targetInput),
+    }));
+  });
+}
+
+/**
+ * Lets pending editor work settle (node/connection creation is async). Flushes
+ * two animation frames, so a negative assertion taken afterwards cannot
+ * false-pass before a wrongly-created node or connection has had time to land.
+ */
+export async function settle(page: Page) {
+  await page.evaluate(
+    () =>
+      new Promise<void>((resolve) =>
+        requestAnimationFrame(() => requestAnimationFrame(() => resolve())),
+      ),
+  );
+}
+
+/**
+ * Adds a node via its keyboard shortcut at the given canvas-relative offset
+ * from the centre. Waits for the node to actually appear (creation is async)
+ * and returns the newly created node id (diffed against the prior set, since
+ * the editor does not guarantee node ordering).
+ */
+export async function addNodeAt(
+  page: Page,
+  key: string,
+  dx: number,
+  dy: number,
+): Promise<string> {
+  const before = new Set((await getNodes(page)).map((n) => n.id));
+  const centre = await canvasCentre(page);
+  await pressShortcutAt(page, key, { x: centre.x + dx, y: centre.y + dy });
+  await page.waitForFunction(
+    (count) => (window.__editor?.editor.getNodes().length ?? 0) > count,
+    before.size,
+  );
+  const created = (await getNodes(page)).find((n) => !before.has(n.id));
+  if (!created) throw new Error("node was not created");
+  return created.id;
+}
+
+/**
+ * Drags a node by (dx, dy). Grabs near the top-left to avoid the socket hit
+ * zones along the bottom edge.
+ */
+export async function dragNode(page: Page, id: string, dx: number, dy: number) {
+  const box = await nodeById(page, id).boundingBox();
+  if (!box) throw new Error(`node ${id} not visible`);
+  const start = { x: box.x + 30, y: box.y + 20 };
+  await page.mouse.move(start.x, start.y);
+  await page.mouse.down();
+  await page.mouse.move(start.x + dx, start.y + dy, { steps: 10 });
+  await page.mouse.up();
+}
+
+/** Hold past the editor's 250ms scope-enter threshold before dragging. */
+export const SCOPE_HOLD_MS = 300;
+
+/**
+ * Press-hold-drag gesture used to nest a node into (or out of) a scope: press,
+ * hold past SCOPE_HOLD_MS to enter scope mode, then drag to the target and drop.
+ */
+export async function dragWithScopeHold(
+  page: Page,
+  from: { x: number; y: number },
+  to: { x: number; y: number },
+) {
+  await page.mouse.move(from.x, from.y);
+  await page.mouse.down();
+  await page.waitForTimeout(SCOPE_HOLD_MS);
+  await page.mouse.move(to.x, to.y, { steps: 15 });
+  await page.mouse.up();
+}
+
+/**
+ * Asserts a node moved by approximately (dx, dy). Nodes snap to the grid, so the
+ * observed delta is allowed to differ from the requested drag by up to one GRID.
+ */
+export function expectMovedBy(
+  before: NodeSnapshot,
+  after: NodeSnapshot,
+  dx: number,
+  dy: number,
+  tolerance: number = GRID,
+) {
+  expect(after.position.x - before.position.x).toBeGreaterThanOrEqual(
+    dx - tolerance,
+  );
+  expect(after.position.x - before.position.x).toBeLessThanOrEqual(
+    dx + tolerance,
+  );
+  expect(after.position.y - before.position.y).toBeGreaterThanOrEqual(
+    dy - tolerance,
+  );
+  expect(after.position.y - before.position.y).toBeLessThanOrEqual(
+    dy + tolerance,
+  );
+}
+
+/**
+ * Builds a Limit node with `childCount` Count children nested inside it. Returns
+ * the limit id and the child ids. Parenting is assigned directly on the model
+ * (the same field the scopes plugin sets) so a test can start from a populated
+ * limit without performing the drag gesture each time.
+ */
+export async function createLimitWithChildren(page: Page, childCount: number) {
+  const limitId = await addNodeAt(page, "l", -200, 0);
+  const childIds: string[] = [];
+  for (let i = 0; i < childCount; i++) {
+    childIds.push(await addNodeAt(page, "1", 100 + i * 100, (i % 2) * 100));
+  }
+  await page.evaluate(
+    ({ parentId, ids }) => {
+      const { editor } = window.__editor!;
+      for (const id of ids) {
+        const node = editor.getNode(id);
+        if (node) node.parent = parentId;
+      }
+    },
+    { parentId: limitId, ids: childIds },
+  );
+  return { limitId, childIds };
+}
diff --git a/apps/web/e2e/history.spec.ts b/apps/web/e2e/history.spec.ts
new file mode 100644
index 00000000..9915a9ff
--- /dev/null
+++ b/apps/web/e2e/history.spec.ts
@@ -0,0 +1,61 @@
+import { expect, test } from "@playwright/test";
+import {
+  addNodeAt,
+  createLimitWithChildren,
+  getConnections,
+  getNodes,
+  gotoEditor,
+  nodeById,
+} from "./helpers";
+import type { EvalLimitItemOperatorEnum } from "@repo/schema";
+
+test.describe("Undo & redo", () => {
+  test.beforeEach(async ({ page }) => {
+    await gotoEditor(page);
+  });
+
+  test("Cmd/Ctrl+Z undoes a node creation", async ({ page }) => {
+    await addNodeAt(page, "a", 0, 0);
+    expect(await getNodes(page)).toHaveLength(1);
+
+    await page.keyboard.press("ControlOrMeta+z");
+    expect(await getNodes(page)).toHaveLength(0);
+  });
+
+  test("Cmd/Ctrl+Shift+Z redoes", async ({ page }) => {
+    await addNodeAt(page, "a", 0, 0);
+    await page.keyboard.press("ControlOrMeta+z");
+    expect(await getNodes(page)).toHaveLength(0);
+
+    await page.keyboard.press("ControlOrMeta+Shift+z");
+    expect(await getNodes(page)).toHaveLength(1);
+  });
+
+  test("undo restores a cascade-delete (Limit + children + connections)", async ({
+    page,
+  }) => {
+    const { limitId, childIds } = await createLimitWithChildren(page, 2);
+
+    await page.evaluate(
+      ({ aId, bId }) =>
+        window.__editor!.addLimitItemConnection(
+          aId,
+          bId,
+          "AND" as EvalLimitItemOperatorEnum,
+        ),
+      { aId: childIds[0], bId: childIds[1] },
+    );
+    expect(await getConnections(page)).toHaveLength(1);
+
+    await nodeById(page, limitId).click({ position: { x: 5, y: 5 } });
+    await page.keyboard.press("Backspace");
+    expect(await getNodes(page)).toHaveLength(0);
+    expect(await getConnections(page)).toHaveLength(0);
+
+    await page.keyboard.press("ControlOrMeta+z");
+    const restored = await getNodes(page);
+    expect(restored).toHaveLength(3);
+    expect(restored.filter((n) => n.parent === limitId)).toHaveLength(2);
+    expect(await getConnections(page)).toHaveLength(1);
+  });
+});
diff --git a/apps/web/e2e/movement.spec.ts b/apps/web/e2e/movement.spec.ts
new file mode 100644
index 00000000..5c0ff486
--- /dev/null
+++ b/apps/web/e2e/movement.spec.ts
@@ -0,0 +1,76 @@
+import { GRID } from "@/modules/evaluation/graph/editor/constants";
+import { expect, test } from "@playwright/test";
+import {
+  addNodeAt,
+  createLimitWithChildren,
+  dragNode,
+  expectMovedBy,
+  getNodes,
+  gotoEditor,
+  nodeById,
+} from "./helpers";
+
+test.describe("Node movement", () => {
+  test.beforeEach(async ({ page }) => {
+    await gotoEditor(page);
+  });
+
+  test("dragging a node moves it by approximately the drag delta", async ({
+    page,
+  }) => {
+    const id = await addNodeAt(page, "a", 0, 0);
+    const before = (await getNodes(page)).find((n) => n.id === id)!;
+
+    await dragNode(page, id, 60, 40);
+
+    const after = (await getNodes(page)).find((n) => n.id === id)!;
+    expectMovedBy(before, after, 60, 40);
+  });
+
+  test("node positions remain grid aligned after drag", async ({ page }) => {
+    const id = await addNodeAt(page, "a", 0, 0);
+    await dragNode(page, id, 73, 47);
+
+    const after = (await getNodes(page)).find((n) => n.id === id)!;
+    expect(after.position.x % GRID).toBe(0);
+    expect(after.position.y % GRID).toBe(0);
+  });
+
+  test("dragging a LimitNode moves its children with it", async ({ page }) => {
+    const { limitId, childIds } = await createLimitWithChildren(page, 2);
+
+    await nodeById(page, limitId).click({ position: { x: 5, y: 5 } });
+    const before = await getNodes(page);
+    expect(childIds).toHaveLength(2);
+
+    await dragNode(page, limitId, 60, 40);
+
+    const after = await getNodes(page);
+    for (const childId of childIds) {
+      const b = before.find((n) => n.id === childId)!;
+      const a = after.find((n) => n.id === childId)!;
+      expectMovedBy(b, a, 60, 40);
+    }
+  });
+
+  test("multi select drag moves every selected node", async ({ page }) => {
+    const aId = await addNodeAt(page, "a", -250, 0);
+    const bId = await addNodeAt(page, "o", 250, 0);
+
+    await nodeById(page, aId).click();
+    await nodeById(page, bId).click({ modifiers: ["ControlOrMeta"] });
+
+    const before = await getNodes(page);
+
+    await page.keyboard.down("ControlOrMeta");
+    await dragNode(page, aId, 60, 40);
+    await page.keyboard.up("ControlOrMeta");
+
+    const after = await getNodes(page);
+    for (const id of [aId, bId]) {
+      const b = before.find((n) => n.id === id)!;
+      const a = after.find((n) => n.id === id)!;
+      expectMovedBy(b, a, 60, 40);
+    }
+  });
+});
diff --git a/apps/web/e2e/scopes.spec.ts b/apps/web/e2e/scopes.spec.ts
new file mode 100644
index 00000000..c27a4fb8
--- /dev/null
+++ b/apps/web/e2e/scopes.spec.ts
@@ -0,0 +1,87 @@
+import { expect, test } from "@playwright/test";
+import {
+  addNodeAt,
+  dragWithScopeHold,
+  getNodes,
+  gotoEditor,
+  nodeById,
+} from "./helpers";
+
+test.describe("Scopes", () => {
+  test.beforeEach(async ({ page }) => {
+    await gotoEditor(page);
+  });
+
+  test("LimitNode honours its minimum size when empty", async ({ page }) => {
+    const id = await addNodeAt(page, "l", 0, 0);
+
+    const { width, height, minWidth, minHeight } = await page.evaluate(
+      (nodeId) => {
+        const handle = window.__editor!;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const node = handle.editor.getNode(nodeId) as any;
+        const min = node.getMinSize();
+        return {
+          width: node.width as number,
+          height: node.height as number,
+          minWidth: min.width as number,
+          minHeight: min.height as number,
+        };
+      },
+      id,
+    );
+
+    expect(width).toBeGreaterThanOrEqual(minWidth);
+    expect(height).toBeGreaterThanOrEqual(minHeight);
+  });
+
+  test("dragging a rule node onto a Limit makes it a child", async ({
+    page,
+  }) => {
+    const limitId = await addNodeAt(page, "l", -100, 0);
+    const countId = await addNodeAt(page, "1", 250, 0);
+
+    const countBox = await nodeById(page, countId).boundingBox();
+    const limitBox = await nodeById(page, limitId).boundingBox();
+    if (!countBox || !limitBox) throw new Error("node not visible");
+
+    const from = { x: countBox.x + 30, y: countBox.y + 20 };
+    const to = {
+      x: limitBox.x + limitBox.width / 2,
+      y: limitBox.y + limitBox.height / 2,
+    };
+
+    await dragWithScopeHold(page, from, to);
+
+    const after = (await getNodes(page)).find((n) => n.id === countId)!;
+    expect(after.parent).toBe(limitId);
+  });
+
+  test("dragging a child out of its Limit clears the parent", async ({
+    page,
+  }) => {
+    const limitId = await addNodeAt(page, "l", -100, 0);
+    const countId = await addNodeAt(page, "1", 0, 0);
+
+    await page.evaluate(
+      ({ parentId, childId }) => {
+        const { editor } = window.__editor!;
+        const child = editor.getNode(childId)!;
+        child.parent = parentId;
+      },
+      { parentId: limitId, childId: countId },
+    );
+
+    const childBox = await nodeById(page, countId).boundingBox();
+    if (!childBox) throw new Error("child not visible");
+    const from = { x: childBox.x + 30, y: childBox.y + 20 };
+
+    await dragWithScopeHold(page, from, {
+      x: from.x + 500,
+      y: from.y + 300,
+    });
+
+    const after = (await getNodes(page)).find((n) => n.id === countId)!;
+    expect(after.parent).toBeNull();
+  });
+});
diff --git a/apps/web/e2e/selection.spec.ts b/apps/web/e2e/selection.spec.ts
new file mode 100644
index 00000000..5f72909b
--- /dev/null
+++ b/apps/web/e2e/selection.spec.ts
@@ -0,0 +1,100 @@
+import { expect, test } from "@playwright/test";
+import {
+  addNodeAt,
+  canvas,
+  createLimitWithChildren,
+  getNodes,
+  gotoEditor,
+  nodeById,
+} from "./helpers";
+
+test.describe("Selection", () => {
+  test.beforeEach(async ({ page }) => {
+    await gotoEditor(page);
+  });
+
+  test("clicking a node selects it & clicking another node replaces selection", async ({
+    page,
+  }) => {
+    await addNodeAt(page, "a", -200, 0);
+    await addNodeAt(page, "o", 200, 0);
+
+    const initial = await getNodes(page);
+    expect(initial).toHaveLength(2);
+
+    const [first, second] = initial as [
+      (typeof initial)[number],
+      (typeof initial)[number],
+    ];
+
+    await nodeById(page, first.id).click();
+    let nodes = await getNodes(page);
+    expect(nodes.find((n) => n.id === first.id)?.selected).toBe(true);
+    expect(nodes.find((n) => n.id === second.id)?.selected).toBe(false);
+
+    await nodeById(page, second.id).click();
+    nodes = await getNodes(page);
+    expect(nodes.find((n) => n.id === first.id)?.selected).toBe(false);
+    expect(nodes.find((n) => n.id === second.id)?.selected).toBe(true);
+  });
+
+  test("clicking background deselects everything", async ({ page }) => {
+    await addNodeAt(page, "a", 0, 0);
+    expect((await getNodes(page))[0]!.selected).toBe(true);
+
+    await canvas(page).click({ position: { x: 10, y: 10 } });
+    expect((await getNodes(page))[0]!.selected).toBe(false);
+  });
+
+  test("Pressing escape key deselects everything", async ({ page }) => {
+    await addNodeAt(page, "a", 0, 0);
+    expect((await getNodes(page))[0]!.selected).toBe(true);
+
+    await page.keyboard.press("Escape");
+    expect((await getNodes(page))[0]!.selected).toBe(false);
+  });
+
+  test("Cmd/Ctrl+A selects every node", async ({ page }) => {
+    await addNodeAt(page, "a", -200, 0);
+    await addNodeAt(page, "o", 200, 0);
+    await addNodeAt(page, "r", 0, 200);
+
+    await page.keyboard.press("Escape");
+    expect((await getNodes(page)).every((n) => !n.selected)).toBe(true);
+
+    await page.keyboard.press("ControlOrMeta+a");
+
+    const nodes = await getNodes(page);
+    expect(nodes.every((n) => n.selected)).toBe(true);
+  });
+
+  test("Ctrl+click accumulates selection", async ({ page }) => {
+    await addNodeAt(page, "a", -200, 0);
+    await addNodeAt(page, "o", 200, 0);
+    const [firstId, secondId] = (await getNodes(page)).map((n) => n.id) as [
+      string,
+      string,
+    ];
+
+    await nodeById(page, firstId).click();
+    await nodeById(page, secondId).click({ modifiers: ["ControlOrMeta"] });
+
+    const nodes = await getNodes(page);
+    expect(nodes.every((n) => n.selected)).toBe(true);
+  });
+
+  test("clicking a LimitNode selects all of its children", async ({ page }) => {
+    const { limitId } = await createLimitWithChildren(page, 2);
+
+    await page.keyboard.press("Escape");
+    expect((await getNodes(page)).every((n) => !n.selected)).toBe(true);
+
+    await nodeById(page, limitId).click({ position: { x: 5, y: 5 } });
+
+    const nodes = await getNodes(page);
+    expect(nodes.find((n) => n.id === limitId)?.selected).toBe(true);
+    const children = nodes.filter((n) => n.parent === limitId);
+    expect(children).toHaveLength(2);
+    expect(children.every((n) => n.selected)).toBe(true);
+  });
+});
diff --git a/apps/web/e2e/viewport.spec.ts b/apps/web/e2e/viewport.spec.ts
new file mode 100644
index 00000000..69e6f4ae
--- /dev/null
+++ b/apps/web/e2e/viewport.spec.ts
@@ -0,0 +1,67 @@
+import {
+  ZOOM_MAX,
+  ZOOM_MIN,
+} from "@/modules/evaluation/graph/editor/constants";
+import { expect, test } from "@playwright/test";
+import { canvasCentre, getZoom, gotoEditor } from "./helpers";
+
+const PRECISION = 5;
+
+test.describe("Canvas viewport", () => {
+  test.beforeEach(async ({ page }) => {
+    await gotoEditor(page);
+  });
+
+  test("wheel down zooms out", async ({ page }) => {
+    expect(await getZoom(page)).toBe(ZOOM_MAX);
+
+    const centre = await canvasCentre(page);
+    await page.mouse.move(centre.x, centre.y);
+    await page.mouse.wheel(0, 200);
+
+    await expect.poll(() => getZoom(page)).toBeLessThan(ZOOM_MAX);
+  });
+
+  test("wheel up is clamped at the max", async ({ page }) => {
+    const centre = await canvasCentre(page);
+    await page.mouse.move(centre.x, centre.y);
+
+    for (let i = 0; i < 10; i++) {
+      await page.mouse.wheel(0, -300);
+    }
+
+    await expect.poll(() => getZoom(page)).toBe(ZOOM_MAX);
+  });
+
+  test("wheel down is clamped at the min", async ({ page }) => {
+    const centre = await canvasCentre(page);
+    await page.mouse.move(centre.x, centre.y);
+
+    for (let i = 0; i < 30; i++) {
+      await page.mouse.wheel(0, 300);
+    }
+
+    await expect.poll(() => getZoom(page)).toBeCloseTo(ZOOM_MIN, PRECISION);
+  });
+
+  test("dragging the background pans the canvas", async ({ page }) => {
+    const before = await page.evaluate(() => ({
+      x: window.__editor!.area.area.transform.x,
+      y: window.__editor!.area.area.transform.y,
+    }));
+
+    const centre = await canvasCentre(page);
+    await page.mouse.move(centre.x, centre.y);
+    await page.mouse.down({ button: "left" });
+    await page.mouse.move(centre.x + 200, centre.y + 150, { steps: 10 });
+    await page.mouse.up({ button: "left" });
+
+    const after = await page.evaluate(() => ({
+      x: window.__editor!.area.area.transform.x,
+      y: window.__editor!.area.area.transform.y,
+    }));
+
+    expect(after.x - before.x).toBeCloseTo(200, 0);
+    expect(after.y - before.y).toBeCloseTo(150, 0);
+  });
+});
diff --git a/apps/web/package.json b/apps/web/package.json
index 0738b5c5..37342698 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -7,7 +7,12 @@
     "dev": "vite",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test": "vitest run",
+    "test:unit": "vitest run",
+    "test:watch": "vitest --watch",
+    "test:e2e": "playwright test",
+    "test:all": "vitest run && playwright test"
   },
   "dependencies": {
     "@base-ui/react": "^1.1.0",
@@ -47,9 +52,20 @@
     "react-i18next": "^16.5.4",
     "react-konva": "^19.2.1",
     "react-redux": "^9.2.0",
+    "react-resizable-panels": "^4.8.0",
     "react-router": "^7.13.0",
     "recharts": "^3.7.0",
+    "rete": "^2.0.6",
+    "rete-area-plugin": "^2.1.5",
+    "rete-auto-arrange-plugin": "^2.0.2",
+    "rete-connection-plugin": "^2.0.5",
+    "rete-context-menu-plugin": "^2.0.6",
+    "rete-history-plugin": "^2.1.1",
+    "rete-react-plugin": "^2.1.0",
+    "rete-render-utils": "^2.0.3",
+    "rete-scopes-plugin": "^2.1.1",
     "sonner": "^2.0.7",
+    "styled-components": "^6.3.12",
     "tailwind-merge": "^3.5.0",
     "tailwindcss": "^4.2.1",
     "ts-ebml": "^3.0.2",
@@ -60,6 +76,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.39.1",
+    "@playwright/test": "^1.60.0",
     "@repo/eslint-config": "workspace:*",
     "@repo/typescript-config": "workspace:*",
     "@types/lodash": "^4.17.23",
@@ -76,6 +93,7 @@
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.46.4",
     "vite": "^7.2.4",
-    "vite-tsconfig-paths": "^6.0.5"
+    "vite-tsconfig-paths": "^6.0.5",
+    "vitest": "^4.0.18"
   }
 }
diff --git a/apps/web/playwright.config.ts b/apps/web/playwright.config.ts
new file mode 100644
index 00000000..4b7fb3ae
--- /dev/null
+++ b/apps/web/playwright.config.ts
@@ -0,0 +1,35 @@
+import { defineConfig, devices } from "@playwright/test";
+
+const PORT = Number(process.env.PORT ?? 5174);
+const BASE_URL = `http://localhost:${PORT}`;
+
+export default defineConfig({
+  testDir: "./e2e",
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  reporter: process.env.CI ? "line" : "list",
+  use: {
+    baseURL: BASE_URL,
+    trace: "on-first-retry",
+  },
+  projects: [
+    {
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] },
+    },
+  ],
+  webServer: {
+    // Run dev (not preview) so hot-reloaded source matches what unit tests cover.
+    // VITE_E2E=true is read by the app to expose `window.__editor`.
+    //
+    // NOTE: these specs navigate to `/` and wait for `window.__editor` (see e2e/helpers.ts).
+    // They will not pass until the graph editor Workspace
+    // (src/modules/evaluation/graph/workspace/Workspace.tsx) is mounted at a route the suite
+    // visits and the E2E test hook is installed there. That route wiring is a follow-up.
+    command: `VITE_E2E=true pnpm dev --port ${PORT} --strictPort`,
+    url: BASE_URL,
+    reuseExistingServer: !process.env.CI,
+    timeout: 60_000,
+  },
+});
diff --git a/apps/web/src/app/router/index.tsx b/apps/web/src/app/router/index.tsx
index 85b5e965..cb2482d0 100644
--- a/apps/web/src/app/router/index.tsx
+++ b/apps/web/src/app/router/index.tsx
@@ -18,6 +18,7 @@ import { ModelDetailPage, ModelNewPage } from "@/modules/model/components";
 import { ProjectsPage } from "@/modules/project";
 import { ProjectPage } from "@/modules/project/components/ProjectPage";
 import { RunPage } from "@/modules/run";
+import { E2EEditorPage } from "@/modules/evaluation/graph/workspace/E2EEditorPage";
 import { createBrowserRouter, Navigate, RouteObject } from "react-router";
 
 const { auth } = appConfig.web.routes;
@@ -62,4 +63,8 @@ const authenticatedRoutes: RouteObject = {
   ],
 };
 
-export const router = createBrowserRouter([unguardedPublicRoutes, guestRoutes, authenticatedRoutes]);
+// In E2E mode the whole app is replaced by the standalone editor host, so the
+// Playwright specs can reach the editor at any path without auth or backend data.
+export const router = import.meta.env.VITE_E2E
+  ? createBrowserRouter([{ path: "*", element: <E2EEditorPage /> }])
+  : createBrowserRouter([unguardedPublicRoutes, guestRoutes, authenticatedRoutes]);
diff --git a/apps/web/src/components/icons/AndGateIcon.tsx b/apps/web/src/components/icons/AndGateIcon.tsx
new file mode 100644
index 00000000..bb0ffc33
--- /dev/null
+++ b/apps/web/src/components/icons/AndGateIcon.tsx
@@ -0,0 +1,21 @@
+import type { SVGProps } from "react";
+
+type Props = SVGProps<SVGSVGElement> & {
+  color?: string;
+};
+
+export function AndGateIcon({ color = "currentColor", ...props }: Props) {
+  return (
+    <svg
+      viewBox="0 0 512 512"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+      {...props}
+    >
+      <path
+        fill={color}
+        d="M105 105v302h151c148 0 148-302 0-302H105zm-89 46v18h71v-18H16zm368.8 96c.2 6 .2 12 0 18H496v-18H384.8zM16 343v18h71v-18H16z"
+      />
+    </svg>
+  );
+}
diff --git a/apps/web/src/components/icons/OrGateIcon.tsx b/apps/web/src/components/icons/OrGateIcon.tsx
new file mode 100644
index 00000000..5d9dc5ca
--- /dev/null
+++ b/apps/web/src/components/icons/OrGateIcon.tsx
@@ -0,0 +1,21 @@
+import type { SVGProps } from "react";
+
+type Props = SVGProps<SVGSVGElement> & {
+  color?: string;
+};
+
+export function OrGateIcon({ color = "currentColor", ...props }: Props) {
+  return (
+    <svg
+      viewBox="0 0 512 512"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+      {...props}
+    >
+      <path
+        fill={color}
+        d="M116.6 407c40-45.9 60.4-98.4 60.4-151 0-52.6-20.4-105.1-60.4-151H192c34.1 0 81.9 34 119.3 71.4 18.7 18.6 35.1 37.9 46.6 53.3 5.8 7.6 10.4 14.4 13.4 19.4 1.4 2.5 2.5 4.7 3.2 6.1.1.4.2.5.2.8 0 .3-.1.5-.2.9-.6 1.4-1.7 3.5-3.2 6-3 5.1-7.5 11.8-13.2 19.5-11.3 15.4-27.5 34.6-46.1 53.2C274.8 373 227.1 407 192 407zM16 361v-18h122.2c-3 6.1-6.3 12.1-9.9 18zm374.5-96c.2-.3.4-.7.5-1 1.1-2.4 2-4.4 2-8 0-3.6-1-5.6-2-8-.1-.3-.3-.7-.5-1H496v18zM16 169v-18h112.3c3.6 5.9 6.9 11.9 9.9 18z"
+      />
+    </svg>
+  );
+}
diff --git a/apps/web/src/components/icons/index.ts b/apps/web/src/components/icons/index.ts
index 87d16594..c84aeb92 100644
--- a/apps/web/src/components/icons/index.ts
+++ b/apps/web/src/components/icons/index.ts
@@ -23,3 +23,5 @@ export * from "./TableViewIcon";
 export * from "./VerticalIcon";
 export * from "./XaxisIcon";
 export * from "./YaxisIcon";
+export * from "./AndGateIcon";
+export * from "./OrGateIcon";
diff --git a/apps/web/src/global.css b/apps/web/src/global.css
index 2eb2a307..bcc8d6ce 100644
--- a/apps/web/src/global.css
+++ b/apps/web/src/global.css
@@ -209,3 +209,11 @@
     @apply font-sans;
     }
 }
+
+/* Marching-ants animation for graph connection paths (evaluation editor).
+   Defined globally so it does not depend on any one component mounting first. */
+@keyframes dash {
+  to {
+    stroke-dashoffset: 0;
+  }
+}
diff --git a/apps/web/src/modules/dashboard/components/DeleteLimitDialog/DeleteLimitDialog.tsx b/apps/web/src/modules/dashboard/components/DeleteLimitDialog/DeleteLimitDialog.tsx
index a4c8a488..7e23f9a9 100644
--- a/apps/web/src/modules/dashboard/components/DeleteLimitDialog/DeleteLimitDialog.tsx
+++ b/apps/web/src/modules/dashboard/components/DeleteLimitDialog/DeleteLimitDialog.tsx
@@ -21,9 +21,9 @@ export const DeleteLimitDialog = ({
   onCancel,
   onConfirm,
   isLoading = false,
-  title = "Do you really want to delete this limit.",
-  description = "This action can not be undone. However you can setup a new limit with same parameters.",
-  confirmLabel = "Delete this limit anyway",
+  title = "Do you really want to delete this check.",
+  description = "This action can not be undone. However you can setup a new check with same parameters.",
+  confirmLabel = "Delete this check anyway",
 }: DeleteLimitDialogProps) => {
   return (
     <Dialog open onOpenChange={(open) => !open && !isLoading && onCancel()}>
diff --git a/apps/web/src/modules/evaluation/api/evalSelectors.ts b/apps/web/src/modules/evaluation/api/evalSelectors.ts
new file mode 100644
index 00000000..45606a73
--- /dev/null
+++ b/apps/web/src/modules/evaluation/api/evalSelectors.ts
@@ -0,0 +1,40 @@
+import { EvalLimit, EvalLimitDetail } from "@repo/schema";
+import { evaluationApi } from "./evaluationApi";
+
+type TestCaseArgs = {
+  projectId: number;
+  configId: number;
+  testCaseId: string;
+};
+
+// Peek the full-test-case SSOT entry WITHOUT subscribing — `useQueryState` reads the
+// cache reactively but never triggers a fetch or keeps the entry alive. This lets the
+// table reuse data the graph loaded without itself fanning out N requests on overview
+// render (see the SSOT plan). When the entry isn't cached, callers fall back.
+
+/**
+ * Limit rows for the table. Returns the SSOT limits (with items, a superset of the
+ * row shape) when the graph has loaded them, else the caller's already-loaded fallback
+ * (the overview list's embedded limits).
+ */
+export function useLimitRows(
+  args: TestCaseArgs,
+  fallback: EvalLimit[],
+): EvalLimit[] {
+  const { data } = evaluationApi.endpoints.getEvalTestCaseFull.useQueryState(args);
+  return data?.limits ?? fallback;
+}
+
+/**
+ * A single limit WITH its items, read from the SSOT if present (no request). Returns
+ * undefined when the full entry isn't cached or the limit isn't found — the caller then
+ * lazily fetches the limit detail.
+ */
+export function useLimitDetail(
+  args: TestCaseArgs,
+  limitId: string | null,
+): EvalLimitDetail | undefined {
+  const { data } = evaluationApi.endpoints.getEvalTestCaseFull.useQueryState(args);
+  if (!limitId) return undefined;
+  return data?.limits.find((limit) => limit.id === limitId);
+}
diff --git a/apps/web/src/modules/evaluation/api/evaluationApi.ts b/apps/web/src/modules/evaluation/api/evaluationApi.ts
index 68e5a5c1..037d2775 100644
--- a/apps/web/src/modules/evaluation/api/evaluationApi.ts
+++ b/apps/web/src/modules/evaluation/api/evaluationApi.ts
@@ -7,12 +7,15 @@ import {
   EvalTestCase,
   EvalTestCaseCreateOrUpdate,
   EvalTestCaseDetail,
+  EvalTestCaseFull,
+  EvalTestCaseFullCreateOrUpdate,
   EvalThreshold,
   EvalThresholdCreateOrUpdate,
   EvalThresholdsResponse,
   evalLimitDetailSchema,
   evalLimitSchema,
   evalTestCaseDetailSchema,
+  evalTestCaseFullSchema,
   evalTestCaseSchema,
   evalThresholdsResponseSchema,
 } from "@repo/schema";
@@ -72,6 +75,22 @@ export const evaluationApi = api.injectEndpoints({
       ],
     }),
 
+    // Single source of truth for a test case: the whole thing (meta + logic tree +
+    // limits WITH their items) in one GET /full call. Both the graph (subscribes) and
+    // the table (peeks, non-subscribing) read this one cache entry.
+    getEvalTestCaseFull: builder.query<
+      EvalTestCaseFull,
+      { projectId: number; configId: number; testCaseId: string }
+    >({
+      query: ({ projectId, configId, testCaseId }) =>
+        `/eval/${projectId}/config/${configId}/test-case/${testCaseId}/full`,
+      transformResponse: (response) => evalTestCaseFullSchema.parse(response),
+      providesTags: (_result, _error, { testCaseId }) => [
+        { type: apiCacheTags.eval.testCases, id: testCaseId },
+        { type: apiCacheTags.eval.limits, id: testCaseId },
+      ],
+    }),
+
     // Eval Test Case Mutations
     createEvalTestCase: builder.mutation<
       EvalTestCaseDetail,
@@ -110,6 +129,73 @@ export const evaluationApi = api.injectEndpoints({
       ],
     }),
 
+    // Saves an entire test case in one request — name/type/severity/enabled plus the
+    // full limits (with their items) and logic tree. This is what the graph editor uses
+    // to persist the serialized flow; the BE diffs limits/items by id.
+    updateEvalTestCaseFull: builder.mutation<
+      EvalTestCaseFull,
+      {
+        projectId: number;
+        configId: number;
+        testCaseId: string;
+        body: EvalTestCaseFullCreateOrUpdate;
+      }
+    >({
+      query: ({ projectId, configId, testCaseId, body }) => ({
+        url: `/eval/${projectId}/config/${configId}/test-case/${testCaseId}/full`,
+        method: "PUT",
+        body,
+      }),
+      transformResponse: (response) => evalTestCaseFullSchema.parse(response),
+      // The PUT /full response is the authoritative full test case (limits WITH items +
+      // real ids for newly created ones). Patch the caches straight from it so both views
+      // reflect instantly without waiting on the invalidation refetch.
+      async onQueryStarted(
+        { projectId, configId, testCaseId },
+        { dispatch, queryFulfilled },
+      ) {
+        try {
+          const { data } = await queryFulfilled; // EvalTestCaseFull (limits WITH items)
+
+          // SSOT — replace the whole entry with the authoritative response.
+          dispatch(
+            evaluationApi.util.updateQueryData(
+              "getEvalTestCaseFull",
+              { projectId, configId, testCaseId },
+              () => data,
+            ),
+          );
+
+          // Overview list — item-free limits, so strip logicNodes + limitItems.
+          dispatch(
+            evaluationApi.util.updateQueryData(
+              "getEvalTestCases",
+              { projectId, configId },
+              (draft) => {
+                const index = draft.findIndex((tc) => tc.id === testCaseId);
+                if (index === -1) return;
+                const { logicNodes: _logicNodes, limits, ...rest } = data;
+                draft[index] = {
+                  ...rest,
+                  limits: limits.map(
+                    ({ limitItems: _limitItems, ...limit }) => limit,
+                  ),
+                };
+              },
+            ),
+          );
+        } catch {
+          // Mutation failed — leave caches untouched; nothing was persisted.
+        }
+      },
+      invalidatesTags: (_result, _error, { configId, testCaseId }) => [
+        { type: apiCacheTags.eval.testCases, id: configId },
+        { type: apiCacheTags.eval.testCases, id: testCaseId },
+        { type: apiCacheTags.eval.limits, id: testCaseId },
+        { type: apiCacheTags.eval.thresholds, id: configId },
+      ],
+    }),
+
     // Eval Limit Mutations
     createEvalLimit: builder.mutation<
       EvalLimitDetail,
@@ -121,6 +207,39 @@ export const evaluationApi = api.injectEndpoints({
         body,
       }),
       transformResponse: (response) => evalLimitDetailSchema.parse(response),
+      // Add the new limit to both the SSOT (with items) and the overview list (item-free).
+      // No-op on the full entry when it isn't cached (table-only session).
+      async onQueryStarted(
+        { projectId, configId, testCaseId },
+        { dispatch, queryFulfilled },
+      ) {
+        try {
+          const { data } = await queryFulfilled;
+          const { limitItems: _items, ...listLimit } = data;
+          dispatch(
+            evaluationApi.util.updateQueryData(
+              "getEvalTestCaseFull",
+              { projectId, configId, testCaseId },
+              (draft) => {
+                draft.limits.push(data);
+              },
+            ),
+          );
+          dispatch(
+            evaluationApi.util.updateQueryData(
+              "getEvalTestCases",
+              { projectId, configId },
+              (draft) => {
+                draft
+                  .find((tc) => tc.id === testCaseId)
+                  ?.limits.push(listLimit);
+              },
+            ),
+          );
+        } catch {
+          // Persist failed — invalidation will reconcile.
+        }
+      },
       invalidatesTags: (_result, _error, { configId, testCaseId }) => [
         { type: apiCacheTags.eval.limits, id: testCaseId },
         { type: apiCacheTags.eval.testCases, id: configId },
@@ -144,6 +263,39 @@ export const evaluationApi = api.injectEndpoints({
         body,
       }),
       transformResponse: (response) => evalLimitDetailSchema.parse(response),
+      // Replace the limit in both the SSOT (with items) and the overview list (item-free).
+      async onQueryStarted(
+        { projectId, configId, testCaseId, limitId },
+        { dispatch, queryFulfilled },
+      ) {
+        try {
+          const { data } = await queryFulfilled;
+          const { limitItems: _items, ...listLimit } = data;
+          dispatch(
+            evaluationApi.util.updateQueryData(
+              "getEvalTestCaseFull",
+              { projectId, configId, testCaseId },
+              (draft) => {
+                const index = draft.limits.findIndex((l) => l.id === limitId);
+                if (index !== -1) draft.limits[index] = data;
+              },
+            ),
+          );
+          dispatch(
+            evaluationApi.util.updateQueryData(
+              "getEvalTestCases",
+              { projectId, configId },
+              (draft) => {
+                const limits = draft.find((tc) => tc.id === testCaseId)?.limits;
+                const index = limits?.findIndex((l) => l.id === limitId) ?? -1;
+                if (limits && index !== -1) limits[index] = listLimit;
+              },
+            ),
+          );
+        } catch {
+          // Persist failed — invalidation will reconcile.
+        }
+      },
       invalidatesTags: (_result, _error, { configId, testCaseId, limitId }) => [
         { type: apiCacheTags.eval.limits, id: testCaseId },
         { type: apiCacheTags.eval.limits, id: limitId },
@@ -160,6 +312,37 @@ export const evaluationApi = api.injectEndpoints({
         url: `/eval/${projectId}/config/${configId}/limit/${testCaseId}/${limitId}`,
         method: "DELETE",
       }),
+      // Remove the limit from both the SSOT and the overview list once the BE confirms.
+      async onQueryStarted(
+        { projectId, configId, testCaseId, limitId },
+        { dispatch, queryFulfilled },
+      ) {
+        try {
+          const { data } = await queryFulfilled;
+          if (!data.deleted) return;
+          dispatch(
+            evaluationApi.util.updateQueryData(
+              "getEvalTestCaseFull",
+              { projectId, configId, testCaseId },
+              (draft) => {
+                draft.limits = draft.limits.filter((l) => l.id !== limitId);
+              },
+            ),
+          );
+          dispatch(
+            evaluationApi.util.updateQueryData(
+              "getEvalTestCases",
+              { projectId, configId },
+              (draft) => {
+                const tc = draft.find((t) => t.id === testCaseId);
+                if (tc) tc.limits = tc.limits.filter((l) => l.id !== limitId);
+              },
+            ),
+          );
+        } catch {
+          // Persist failed — invalidation will reconcile.
+        }
+      },
       invalidatesTags: (_result, _error, { configId, testCaseId, limitId }) => [
         { type: apiCacheTags.eval.limits, id: testCaseId },
         { type: apiCacheTags.eval.limits, id: limitId },
@@ -250,6 +433,7 @@ export const {
   useGetEvalLimitQuery,
   useGetEvalLimitsQuery,
   useGetEvalTestCaseQuery,
+  useGetEvalTestCaseFullQuery,
   useGetEvalTestCasesQuery,
   useLazyGetEvalLimitQuery,
   useLazyGetEvalLimitsQuery,
@@ -257,6 +441,7 @@ export const {
   useLazyGetEvalTestCasesQuery,
   useCreateEvalTestCaseMutation,
   useUpdateEvalTestCaseMutation,
+  useUpdateEvalTestCaseFullMutation,
   useCreateEvalLimitMutation,
   useUpdateEvalLimitMutation,
   useDeleteEvalLimitMutation,
diff --git a/apps/web/src/modules/evaluation/components/CreateUpdateLimit/CreateLimitModal.tsx b/apps/web/src/modules/evaluation/components/CreateUpdateLimit/CreateLimitModal.tsx
index 94fdc328..b699528f 100644
--- a/apps/web/src/modules/evaluation/components/CreateUpdateLimit/CreateLimitModal.tsx
+++ b/apps/web/src/modules/evaluation/components/CreateUpdateLimit/CreateLimitModal.tsx
@@ -43,7 +43,7 @@ export const CreateLimitModal = ({
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="max-h-[calc(100vh-4rem)] overflow-y-auto sm:max-w-6xl">
         <DialogHeader>
-          <DialogTitle className="text-xl font-semibold">Add Limit</DialogTitle>
+          <DialogTitle className="text-xl font-semibold">Add Check</DialogTitle>
         </DialogHeader>
 
         <form.AppForm>
diff --git a/apps/web/src/modules/evaluation/components/CreateUpdateLimit/LimitItemRow.tsx b/apps/web/src/modules/evaluation/components/CreateUpdateLimit/LimitItemRow.tsx
index 91e9ad5a..c82b667a 100644
--- a/apps/web/src/modules/evaluation/components/CreateUpdateLimit/LimitItemRow.tsx
+++ b/apps/web/src/modules/evaluation/components/CreateUpdateLimit/LimitItemRow.tsx
@@ -264,7 +264,7 @@ export function LimitItemRow({
                   variant="ghost"
                   size="icon-sm"
                   className="shrink-0 self-end text-muted-foreground hover:text-destructive"
-                  aria-label="Delete limit"
+                  aria-label="Delete check item"
                   onClick={onDelete}
                 >
                   <Trash2Icon className="text-destructive" />
diff --git a/apps/web/src/modules/evaluation/components/GraphEditor/GraphEditor.tsx b/apps/web/src/modules/evaluation/components/GraphEditor/GraphEditor.tsx
new file mode 100644
index 00000000..95a3feb2
--- /dev/null
+++ b/apps/web/src/modules/evaluation/components/GraphEditor/GraphEditor.tsx
@@ -0,0 +1,380 @@
+import { cn } from "@/lib/utils";
+import type { LabelOption } from "@/modules/evaluation/graph/editor/controls/label";
+import { EditorDebugOverlay } from "@/modules/evaluation/graph/editor/debug/EditorDebugOverlay";
+import {
+  useGetEvalTestCaseFullQuery,
+  useUpdateEvalTestCaseFullMutation,
+} from "@/modules/evaluation/api/evaluationApi";
+import { deserializeTestCase } from "@/modules/evaluation/graph/editor/deserialization/deserializeTestCase";
+import { serializeTestCase } from "@/modules/evaluation/graph/editor/serialization/serializeTestCase";
+import { toFullCreateOrUpdate } from "@/modules/evaluation/graph/editor/serialization/toFullCreateOrUpdate";
+import {
+  ZOOM_MAX,
+  ZOOM_MIN,
+  ZOOM_STEP,
+} from "@/modules/evaluation/graph/editor/constants";
+import { createEditor } from "@/modules/evaluation/graph/editor/setup/createEditor";
+import type { Schemes } from "@/modules/evaluation/graph/editor/types";
+import { installTestHook } from "@/modules/evaluation/graph/workspace/testHook";
+import { useGetProjectLabelsQuery } from "@/modules/project/services/projectApi";
+import { Button } from "@/modules/shadcn/ui/button";
+import {
+  Keyboard,
+  LayoutGrid,
+  Maximize2,
+  Minimize2,
+  RefreshCw,
+  RefreshCwOff,
+  Save,
+  ScanEye,
+  ZoomIn,
+  ZoomOut,
+} from "lucide-react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import type { NodeEditor } from "rete";
+import { AreaExtensions } from "rete-area-plugin";
+import { useRete } from "rete-react-plugin";
+import { toast } from "sonner";
+import { GraphKeybindsDialog } from "./GraphKeybindsDialog";
+
+const MIN_HEIGHT = 240;
+const DEFAULT_HEIGHT = 480;
+const VIEWPORT_MARGIN = 120;
+
+const clamp = (value: number, min: number, max: number) =>
+  Math.min(Math.max(value, min), max);
+
+type Props = {
+  projectId: number;
+  configId: number;
+  testCaseId: string;
+};
+
+export const GraphEditor = ({ projectId, configId, testCaseId }: Props) => {
+  const editorRef = useRef<Awaited<ReturnType<typeof createEditor>> | null>(
+    null,
+  );
+  const [autoValidationEnabled, setAutoValidationEnabled] = useState(false);
+  const [editor, setEditor] = useState<NodeEditor<Schemes> | null>(null);
+  const [keybindsOpen, setKeybindsOpen] = useState(false);
+  const [height, setHeight] = useState(DEFAULT_HEIGHT);
+  const [maximized, setMaximized] = useState(false);
+  const dragStart = useRef<{ y: number; height: number } | null>(null);
+  const saveRef = useRef<() => void>(() => {});
+  const { data: projectLabels, isSuccess: labelsLoaded } = useGetProjectLabelsQuery({ projectId });
+  const labelsRef = useRef<LabelOption[]>([]);
+  labelsRef.current = useMemo<LabelOption[]>(
+    () =>
+      (projectLabels ?? []).map((label) => ({
+        id: label.id,
+        name: label.name,
+      })),
+    [projectLabels],
+  );
+
+  const handleResizePointerDown = (
+    event: React.PointerEvent<HTMLDivElement>,
+  ) => {
+    dragStart.current = { y: event.clientY, height };
+    event.currentTarget.setPointerCapture(event.pointerId);
+  };
+
+  const handleResizePointerMove = (
+    event: React.PointerEvent<HTMLDivElement>,
+  ) => {
+    if (!dragStart.current) return;
+
+    const maxHeight = Math.max(
+      MIN_HEIGHT,
+      window.innerHeight - VIEWPORT_MARGIN,
+    );
+    const delta = event.clientY - dragStart.current.y;
+    setHeight(clamp(dragStart.current.height + delta, MIN_HEIGHT, maxHeight));
+  };
+
+  const handleResizePointerUp = (event: React.PointerEvent<HTMLDivElement>) => {
+    dragStart.current = null;
+    event.currentTarget.releasePointerCapture(event.pointerId);
+  };
+
+  const create = useCallback((el: HTMLElement) => {
+    const instance = createEditor(
+      el,
+      (text, type) => {
+        if (type === "error") {
+          toast.error(text);
+          return;
+        }
+
+        toast.success(text);
+      },
+      {
+        toggleFullscreen: () => setMaximized((value) => !value),
+        getLabels: () => labelsRef.current,
+        save: () => saveRef.current(),
+      },
+    );
+
+    Promise.resolve(instance).then((result) => {
+      editorRef.current = result;
+      setAutoValidationEnabled(result.validation.isLiveValidationEnabled());
+      setEditor(result.editor);
+      installTestHook({ editor: result.editor, area: result.area });
+    });
+
+    return instance;
+  }, []);
+
+  const [ref] = useRete(create);
+
+  const { data: testCaseData } = useGetEvalTestCaseFullQuery(
+    {
+      projectId,
+      configId,
+      testCaseId,
+    },
+    { refetchOnMountOrArgChange: true },
+  );
+  const [updateTestCaseFull, { isLoading: isSaving }] = useUpdateEvalTestCaseFullMutation();
+  const [ready, setReady] = useState(false);
+  const hasLoadedRef = useRef(false);
+
+  useEffect(() => {
+    const instance = editorRef.current;
+    if (hasLoadedRef.current) return;
+    if (!instance || !editor || !testCaseData) return;
+    if (!labelsLoaded) return;
+
+    hasLoadedRef.current = true;
+    let cancelled = false;
+    setReady(false);
+
+    void (async () => {
+      try {
+        const payload = toFullCreateOrUpdate(testCaseData);
+
+        await deserializeTestCase(
+          instance.editor,
+          instance.area,
+          payload,
+          labelsRef.current,
+          instance.selectableNodes,
+        );
+        if (cancelled) return;
+
+        await instance.arrange.layout();
+      } catch (error) {
+        if (cancelled) return;
+        toast.error(
+          error instanceof Error
+            ? `Failed to load test case: ${error.message}`
+            : "Failed to load test case.",
+        );
+      } finally {
+        if (!cancelled) setReady(true);
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor, testCaseData, labelsLoaded]);
+
+  const toggleValidation = async () => {
+    const instance = editorRef.current;
+    if (!instance) return;
+
+    const isEnabled = instance.validation.isLiveValidationEnabled();
+
+    if (!isEnabled) {
+      await instance.validation.runValidation();
+      instance.validation.enableLiveValidation();
+      setAutoValidationEnabled(true);
+      return;
+    }
+
+    instance.validation.disableLiveValidation();
+    await instance.validation.clearValidation();
+    setAutoValidationEnabled(false);
+  };
+
+  const handleSave = async () => {
+    const instance = editorRef.current;
+    if (!instance) return;
+
+    if (!testCaseData) {
+      toast.error("Test case is still loading. Try again in a moment.");
+      return;
+    }
+
+    const validationResult = await instance.validation.validateNow();
+
+    if (!instance.validation.isLiveValidationEnabled()) {
+      instance.validation.enableLiveValidation();
+      setAutoValidationEnabled(true);
+    }
+
+    if (!validationResult.valid) {
+      toast.error("Graph contains errors. Fix them before saving.");
+      return;
+    }
+
+    const body = serializeTestCase(instance.editor, {
+      name: testCaseData.name,
+    });
+    body.enabled = testCaseData.enabled;
+
+    try {
+      await updateTestCaseFull({
+        projectId,
+        configId,
+        testCaseId,
+        body,
+      }).unwrap();
+
+      toast.success("Test case saved.");
+    } catch {
+      toast.error("Failed to save test case.");
+    }
+  };
+
+  saveRef.current = handleSave;
+
+  const handleArrange = async () => {
+    const instance = editorRef.current;
+    if (!instance) return;
+
+    await instance.arrange.layout();
+    toast.success("Arranged layout.");
+  };
+
+  const zoomBy = useCallback((step: number) => {
+    const instance = editorRef.current;
+    if (!instance) return;
+
+    const { area } = instance;
+    const { x, y, k } = area.area.transform;
+    const next = clamp(k + step, ZOOM_MIN, ZOOM_MAX);
+    if (next === k) return;
+
+    // Keep the point at the viewport centre fixed. rete applies
+    // `transform.{x,y} += o{x,y}` (factor 1 here, since `next` is pre-clamped to
+    // the restrictor bounds), so the offset is measured from the content's current
+    // translation — subtract transform.{x,y} or the origin drifts with the pan.
+    const { width, height } = area.container.getBoundingClientRect();
+    const ratio = next / k;
+    void area.area.zoom(
+      next,
+      (width / 2 - x) * (1 - ratio),
+      (height / 2 - y) * (1 - ratio),
+    );
+  }, []);
+
+  const handleFocus = useCallback(() => {
+    const instance = editorRef.current;
+    if (!instance) return;
+
+    const nodes = instance.editor.getNodes();
+    if (nodes.length === 0) return;
+    void AreaExtensions.zoomAt(instance.area, nodes);
+  }, []);
+
+  return (
+    <div
+      className={cn(
+        "relative isolate w-full overflow-hidden rounded-md border bg-background",
+        maximized && "fixed inset-0 z-50 rounded-none border-0",
+      )}
+      style={maximized ? undefined : { height }}
+    >
+      <div ref={ref} className="h-full w-full" data-testid="editor-canvas" />
+      {editor && <EditorDebugOverlay editor={editor} />}
+      <div
+        aria-hidden
+        className={cn(
+          "pointer-events-none absolute inset-0 z-40 bg-background transition-opacity duration-700 ease-out",
+          ready ? "opacity-0" : "opacity-100",
+        )}
+      />
+      <div className="pointer-events-none absolute inset-x-4 top-4 z-50 flex justify-between gap-2">
+        <div className="flex flex-col gap-2 pointer-events-auto">
+          <Button
+            variant="outline"
+            size="icon"
+            aria-label={maximized ? "Exit full screen" : "Full screen"}
+            onClick={() => setMaximized((value) => !value)}
+          >
+            {maximized ? <Minimize2 /> : <Maximize2 />}
+          </Button>
+          <Button
+            variant="outline"
+            size="icon"
+            aria-label="Zoom in"
+            onClick={() => zoomBy(ZOOM_STEP)}
+          >
+            <ZoomIn />
+          </Button>
+          <Button
+            variant="outline"
+            size="icon"
+            aria-label="Zoom out"
+            onClick={() => zoomBy(-ZOOM_STEP)}
+          >
+            <ZoomOut />
+          </Button>
+          <Button
+            variant="outline"
+            size="icon"
+            aria-label="Fit to view"
+            onClick={handleFocus}
+          >
+            <ScanEye />
+          </Button>
+        </div>
+
+        <div className="pointer-events-auto flex gap-2">
+          <Button
+            variant="outline"
+            size="icon"
+            onClick={() => setKeybindsOpen(true)}
+          >
+            <Keyboard />
+          </Button>
+          <Button variant="outline" size="icon" onClick={handleArrange}>
+            <LayoutGrid />
+          </Button>
+          <Button
+            variant={autoValidationEnabled ? "default" : "outline"}
+            size="icon"
+            onClick={toggleValidation}
+          >
+            {autoValidationEnabled ? <RefreshCw /> : <RefreshCwOff />}
+          </Button>
+          <Button
+            variant="outline"
+            size="icon"
+            onClick={handleSave}
+            disabled={isSaving}
+          >
+            <Save />
+          </Button>
+        </div>
+      </div>
+      {!maximized && (
+        <div
+          role="separator"
+          aria-orientation="horizontal"
+          aria-label="Resize editor"
+          className="absolute inset-x-0 bottom-0 z-10 flex h-2.5 cursor-ns-resize items-center justify-center"
+          onPointerDown={handleResizePointerDown}
+          onPointerMove={handleResizePointerMove}
+          onPointerUp={handleResizePointerUp}
+        >
+          <div className="h-1 w-10 rounded-full bg-border transition-colors hover:bg-muted-foreground/40" />
+        </div>
+      )}
+      <GraphKeybindsDialog open={keybindsOpen} onOpenChange={setKeybindsOpen} />
+    </div>
+  );
+};
diff --git a/apps/web/src/modules/evaluation/components/GraphEditor/GraphKeybindsDialog.tsx b/apps/web/src/modules/evaluation/components/GraphEditor/GraphKeybindsDialog.tsx
new file mode 100644
index 00000000..3c266302
--- /dev/null
+++ b/apps/web/src/modules/evaluation/components/GraphEditor/GraphKeybindsDialog.tsx
@@ -0,0 +1,118 @@
+import {
+  formatShortcutKeys,
+  GROUP_ORDER,
+  SHORTCUTS,
+  type ShortcutGroup,
+} from "@/modules/evaluation/graph/editor/setup/shortcuts";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/modules/shadcn/ui/dialog";
+import { Keyboard } from "lucide-react";
+import type { ReactNode } from "react";
+
+type DialogRootProps = Parameters<typeof Dialog>[0];
+
+type Props = Pick<DialogRootProps, "open" | "onOpenChange">;
+
+const isMac =
+  typeof navigator !== "undefined" && /mac/i.test(navigator.platform);
+const mod = isMac ? "⌘" : "Ctrl";
+
+// Derived from the shared shortcut list so this dialog can never drift from the
+// bindings in setupKeyListeners.ts.
+const SECTIONS = GROUP_ORDER.map((group: ShortcutGroup) => ({
+  title: group,
+  shortcuts: SHORTCUTS.filter((shortcut) => shortcut.group === group).map(
+    (shortcut) => ({
+      keys: formatShortcutKeys(shortcut, mod),
+      label: shortcut.description,
+    }),
+  ),
+})).filter((section) => section.shortcuts.length > 0);
+
+// Split the sections into two balanced columns (even indices left, odd right).
+const COLUMNS = [
+  SECTIONS.filter((_, i) => i % 2 === 0),
+  SECTIONS.filter((_, i) => i % 2 === 1),
+];
+
+function Key({ children }: { children: ReactNode }) {
+  return (
+    <kbd className="inline-flex h-6 min-w-6 items-center justify-center rounded-md border border-border bg-muted px-1.5 text-[11px] font-semibold text-foreground shadow-[inset_0_-1px_0_rgba(0,0,0,0.08)]">
+      {children}
+    </kbd>
+  );
+}
+
+function ShortcutRow({
+  shortcut,
+}: {
+  shortcut: { keys: string[]; label: string };
+}) {
+  return (
+    <div className="flex items-center gap-3 border-b border-border px-3 py-2 last:border-b-0">
+      <span className="flex-1 text-xs text-foreground">{shortcut.label}</span>
+      <div className="flex items-center gap-1">
+        {shortcut.keys.map((key, i) => (
+          <span key={i} className="flex items-center gap-1">
+            {i > 0 && (
+              <span className="text-[11px] text-muted-foreground">+</span>
+            )}
+            <Key>{key}</Key>
+          </span>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export function GraphKeybindsDialog({ open, onOpenChange }: Props) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-h-[85vh] overflow-y-auto sm:max-w-2xl">
+        <DialogHeader>
+          <div className="flex items-center gap-3">
+            <span className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary [&_svg]:size-5">
+              <Keyboard />
+            </span>
+            <div>
+              <DialogTitle className="text-base">
+                Keyboard shortcuts
+              </DialogTitle>
+              <DialogDescription className="text-xs">
+                Speed up building your test-case logic.
+              </DialogDescription>
+            </div>
+          </div>
+        </DialogHeader>
+
+        <div className="flex flex-col gap-6 pt-2 sm:flex-row">
+          {COLUMNS.map((col, ci) => (
+            <div key={ci} className="flex flex-1 flex-col gap-5">
+              {col.map((section) => (
+                <section key={section.title} className="flex flex-col gap-2">
+                  <p className="text-[10px] font-bold uppercase tracking-[1px] text-muted-foreground">
+                    {section.title}
+                  </p>
+                  <div className="flex flex-col overflow-hidden rounded-lg border border-border bg-card">
+                    {section.shortcuts.map((shortcut) => (
+                      <ShortcutRow key={shortcut.label} shortcut={shortcut} />
+                    ))}
+                  </div>
+                </section>
+              ))}
+            </div>
+          ))}
+        </div>
+
+        <p className="border-t border-border pt-3 text-[11px] text-muted-foreground">
+          Shortcuts are disabled while typing in inputs.
+        </p>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/apps/web/src/modules/evaluation/components/TestCasesOverview/LimitEnabledSwitch.tsx b/apps/web/src/modules/evaluation/components/TestCasesOverview/LimitEnabledSwitch.tsx
index 1797324d..fcc59843 100644
--- a/apps/web/src/modules/evaluation/components/TestCasesOverview/LimitEnabledSwitch.tsx
+++ b/apps/web/src/modules/evaluation/components/TestCasesOverview/LimitEnabledSwitch.tsx
@@ -3,6 +3,7 @@ import { Badge } from "@/modules/shadcn/ui/badge";
 import { Switch } from "@/modules/shadcn/ui/switch";
 import { EvalLimit, EvalLimitDetail } from "@repo/schema";
 import { useState } from "react";
+import { useLimitDetail } from "../../api/evalSelectors";
 import {
   evaluationApi,
   useLazyGetEvalLimitQuery,
@@ -49,24 +50,47 @@ export function LimitEnabledSwitch({
   const [updateLimit] = useUpdateEvalLimitMutation();
   const [pending, setPending] = useState(false);
 
+  // Reuse the SSOT detail when the graph already loaded it — skips the detail fetch.
+  const cachedDetail = useLimitDetail(
+    { projectId, configId, testCaseId },
+    limit.id,
+  );
+
   const handleToggle = async (next: boolean) => {
     setPending(true);
-    const patchResult = dispatch(
+
+    // Optimistically flip the row in both sources the table reads from (SSOT + list).
+    // Either patch is a no-op if that entry isn't cached.
+    const patchFull = dispatch(
       evaluationApi.util.updateQueryData(
-        "getEvalLimits",
+        "getEvalTestCaseFull",
         { projectId, configId, testCaseId },
         (draft) => {
-          const cached = draft.find((entry) => entry.id === limit.id);
+          const cached = draft.limits.find((entry) => entry.id === limit.id);
+          if (cached) cached.enabled = next;
+        },
+      ),
+    );
+    const patchList = dispatch(
+      evaluationApi.util.updateQueryData(
+        "getEvalTestCases",
+        { projectId, configId },
+        (draft) => {
+          const cached = draft
+            .find((tc) => tc.id === testCaseId)
+            ?.limits.find((entry) => entry.id === limit.id);
           if (cached) cached.enabled = next;
         },
       ),
     );
 
     try {
-      const detail = await fetchDetail(
-        { projectId, configId, testCaseId, limitId: limit.id },
-        false,
-      ).unwrap();
+      const detail =
+        cachedDetail ??
+        (await fetchDetail(
+          { projectId, configId, testCaseId, limitId: limit.id },
+          false,
+        ).unwrap());
 
       await updateLimit({
         projectId,
@@ -76,7 +100,8 @@ export function LimitEnabledSwitch({
         body: detailToUpdateBody(detail, next),
       }).unwrap();
     } catch {
-      patchResult.undo();
+      patchFull.undo();
+      patchList.undo();
     } finally {
       setPending(false);
     }
@@ -88,7 +113,7 @@ export function LimitEnabledSwitch({
         checked={limit.enabled}
         onCheckedChange={handleToggle}
         disabled={pending}
-        aria-label={limit.enabled ? "Disable limit" : "Enable limit"}
+        aria-label={limit.enabled ? "Disable check" : "Enable check"}
       />
       {limit.enabled ? (
         <Badge>Enabled</Badge>
diff --git a/apps/web/src/modules/evaluation/components/TestCasesOverview/TestCaseSection.tsx b/apps/web/src/modules/evaluation/components/TestCasesOverview/TestCaseSection.tsx
index 9759dd16..64e40c55 100644
--- a/apps/web/src/modules/evaluation/components/TestCasesOverview/TestCaseSection.tsx
+++ b/apps/web/src/modules/evaluation/components/TestCasesOverview/TestCaseSection.tsx
@@ -1,4 +1,6 @@
+import { cn } from "@/lib/utils";
 import { DeleteLimitDialog } from "@/modules/dashboard/components/DeleteLimitDialog";
+import { GraphEditor } from "@/modules/evaluation/components/GraphEditor/GraphEditor";
 import { Button } from "@/modules/shadcn/ui/button";
 import { Card, CardContent, CardHeader } from "@/modules/shadcn/ui/card";
 import { Separator } from "@/modules/shadcn/ui/separator";
@@ -6,11 +8,11 @@ import { DataTable } from "@/modules/ui/components/Table";
 import { EvalLimit, EvalTestCase } from "@repo/schema";
 import { PencilIcon, PlusIcon, Trash2Icon } from "lucide-react";
 import { useState } from "react";
+import { useLimitDetail, useLimitRows } from "../../api/evalSelectors";
 import {
   useDeleteEvalLimitMutation,
   useDeleteEvalTestCaseMutation,
   useGetEvalLimitQuery,
-  useGetEvalLimitsQuery,
   useGetEvalTestCaseQuery,
 } from "../../api/evaluationApi";
 import { CreateLimitModal, UpdateLimitModal } from "../CreateUpdateLimit";
@@ -29,22 +31,34 @@ type DeleteState =
   | { type: "blocked"; limitId: string }
   | null;
 
-export function TestCaseSection({ testCase, projectId, configId }: TestCaseSectionProps) {
-  const { data: limits = [] } = useGetEvalLimitsQuery({
-    projectId,
-    configId,
-    testCaseId: testCase.id,
-  });
+type ViewMode = "table" | "graph";
+
+export function TestCaseSection({
+  testCase,
+  projectId,
+  configId,
+}: TestCaseSectionProps) {
   const [isCreateLimitOpen, setIsCreateLimitOpen] = useState(false);
   const [limitToEditId, setLimitToEditId] = useState<string | null>(null);
   const [deleteState, setDeleteState] = useState<DeleteState>(null);
   const [isEditTestCaseOpen, setIsEditTestCaseOpen] = useState(false);
   const [isDeleteTestCaseOpen, setIsDeleteTestCaseOpen] = useState(false);
+  const [viewMode, setViewMode] = useState<ViewMode>("table");
+
+  const args = { projectId, configId, testCaseId: testCase.id };
 
-  const { data: limitToEdit } = useGetEvalLimitQuery(
-    { projectId, configId, testCaseId: testCase.id, limitId: limitToEditId! },
-    { skip: !limitToEditId },
+  // Rows come from the SSOT (full cache) when the graph has loaded it, otherwise from
+  // the limits already embedded in the overview list — no per-section request either way.
+  const limits = useLimitRows(args, testCase.limits);
+
+  // Limit detail (with items) for the edit modal: prefer the SSOT if the graph loaded
+  // it; otherwise lazily fetch just that limit (table-only session).
+  const cachedLimit = useLimitDetail(args, limitToEditId);
+  const { data: fetchedLimit } = useGetEvalLimitQuery(
+    { ...args, limitId: limitToEditId! },
+    { skip: !limitToEditId || Boolean(cachedLimit) },
   );
+  const limitToEdit = cachedLimit ?? fetchedLimit;
   const { data: testCaseDetail } = useGetEvalTestCaseQuery(
     { projectId, configId, testCaseId: testCase.id },
     { skip: !isEditTestCaseOpen },
@@ -97,18 +111,44 @@ export function TestCaseSection({ testCase, projectId, configId }: TestCaseSecti
 
   return (
     <Card size="sm">
-      <CardHeader className="flex flex-row items-center gap-3">
+      <CardHeader className="relative flex flex-row items-center gap-3">
         <p className="text-sm font-semibold shrink-0">{testCase.name}</p>
-        <Separator orientation="vertical" className="h-4 my-auto" />
-        <Button
-          variant="link"
-          size="sm"
-          className="gap-1 p-0 text-sm w-fit"
-          onClick={() => setIsCreateLimitOpen(true)}
-        >
-          <PlusIcon />
-          Add check
-        </Button>
+        {viewMode === "table" && (
+          <>
+            <Separator orientation="vertical" className="h-4 my-auto" />
+            <Button
+              variant="link"
+              size="sm"
+              className="gap-1 p-0 text-sm w-fit"
+              onClick={() => setIsCreateLimitOpen(true)}
+            >
+              <PlusIcon />
+              Add check
+            </Button>
+          </>
+        )}
+
+        {/* Centered independently of the side groups so it never shifts when the
+            left/right buttons change between table and graph view. */}
+        <div className="absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 items-center gap-1 rounded-md bg-muted p-0.5">
+          {(["table", "graph"] as const).map((mode) => (
+            <Button
+              key={mode}
+              variant="ghost"
+              size="sm"
+              aria-pressed={viewMode === mode}
+              className={cn(
+                "capitalize text-muted-foreground hover:bg-transparent hover:text-foreground",
+                viewMode === mode &&
+                  "bg-background text-foreground shadow-xs hover:bg-background",
+              )}
+              onClick={() => setViewMode(mode)}
+            >
+              {mode}
+            </Button>
+          ))}
+        </div>
+
         <div className="ml-auto flex shrink-0 items-center gap-2">
           <TestCaseEnabledSwitch
             testCase={testCase}
@@ -116,15 +156,26 @@ export function TestCaseSection({ testCase, projectId, configId }: TestCaseSecti
             configId={configId}
           />
           <Separator orientation="vertical" className="h-4 my-auto" />
-          <Button
-            variant="secondary"
-            size="icon-sm"
-            className=""
-            aria-label="Edit test case"
-            onClick={() => setIsEditTestCaseOpen(true)}
+          <div
+            aria-hidden={viewMode !== "table"}
+            className={cn(
+              "flex items-center gap-2 overflow-hidden transition-all duration-200",
+              viewMode === "table"
+                ? "max-w-32 opacity-100"
+                : "pointer-events-none -mx-1 max-w-0 opacity-0",
+            )}
           >
-            <PencilIcon className="size-4" />
-          </Button>
+            
+            <Button
+              variant="secondary"
+              size="icon-sm"
+              tabIndex={viewMode === "table" ? undefined : -1}
+              aria-label="Edit test case"
+              onClick={() => setIsEditTestCaseOpen(true)}
+            >
+              <PencilIcon className="size-4" />
+            </Button>
+          </div>
           <Button
             variant="destructive"
             size="icon-sm"
@@ -138,7 +189,15 @@ export function TestCaseSection({ testCase, projectId, configId }: TestCaseSecti
       </CardHeader>
 
       <CardContent>
-        <DataTable data={limits} columns={columns} enableRowSelection />
+        {viewMode === "table" ? (
+          <DataTable data={limits} columns={columns} enableRowSelection />
+        ) : (
+          <GraphEditor
+            projectId={projectId}
+            configId={configId}
+            testCaseId={testCase.id}
+          />
+        )}
       </CardContent>
 
       {isCreateLimitOpen && (
@@ -175,7 +234,7 @@ export function TestCaseSection({ testCase, projectId, configId }: TestCaseSecti
       {isDeleteTestCaseOpen && (
         <DeleteLimitDialog
           title="Do you really want to delete this test case."
-          description="This action can not be undone. All limits associated with this test case will be removed."
+          description="This action can not be undone. All checks associated with this test case will be removed."
           confirmLabel="Delete this test case anyway"
           onCancel={() => setIsDeleteTestCaseOpen(false)}
           onConfirm={handleDeleteTestCase}
@@ -193,8 +252,8 @@ export function TestCaseSection({ testCase, projectId, configId }: TestCaseSecti
 
       {deleteState?.type === "blocked" && (
         <DeleteLimitDialog
-          title="Cannot delete this limit"
-          description="This limit is used in the evaluation logic. Remove it from the evaluation logic first, then you can delete it."
+          title="Cannot delete this check"
+          description="This check is used in the evaluation logic. Remove it from the evaluation logic first, then you can delete it."
           confirmLabel="OK"
           onCancel={() => setDeleteState(null)}
           onConfirm={() => setDeleteState(null)}
diff --git a/apps/web/src/modules/evaluation/components/UpdateTestCase/LogicBuilder/LimitsPanel.tsx b/apps/web/src/modules/evaluation/components/UpdateTestCase/LogicBuilder/LimitsPanel.tsx
index 25eb430d..6e09f15e 100644
--- a/apps/web/src/modules/evaluation/components/UpdateTestCase/LogicBuilder/LimitsPanel.tsx
+++ b/apps/web/src/modules/evaluation/components/UpdateTestCase/LogicBuilder/LimitsPanel.tsx
@@ -31,7 +31,7 @@ export function LimitsPanel() {
   if (availableLimits.length === 0) {
     return (
       <div className="flex items-center justify-center py-4 text-xs text-muted-foreground">
-        No limits defined for this test case yet
+        No checks defined for this test case yet
       </div>
     );
   }
diff --git a/apps/web/src/modules/evaluation/graph/editor/connections/booleanConnection.ts b/apps/web/src/modules/evaluation/graph/editor/connections/booleanConnection.ts
new file mode 100644
index 00000000..15269e54
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/connections/booleanConnection.ts
@@ -0,0 +1,22 @@
+import type { BooleanNodeProps } from "@/modules/evaluation/graph/editor/types";
+import { ClassicPreset } from "rete";
+
+export type BooleanOperator = "TRUE" | "NOT";
+
+export class BooleanConnection extends ClassicPreset.Connection<
+  BooleanNodeProps,
+  BooleanNodeProps
+> {
+  booleanOperator: BooleanOperator;
+
+  constructor(
+    source: BooleanNodeProps,
+    sourceOutput: string,
+    target: BooleanNodeProps,
+    targetInput: string,
+    booleanOperator: BooleanOperator = "TRUE",
+  ) {
+    super(source, sourceOutput as never, target, targetInput as never);
+    this.booleanOperator = booleanOperator;
+  }
+}
diff --git a/apps/web/src/modules/evaluation/graph/editor/connections/limitItemConnection.ts b/apps/web/src/modules/evaluation/graph/editor/connections/limitItemConnection.ts
new file mode 100644
index 00000000..7f1a9914
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/connections/limitItemConnection.ts
@@ -0,0 +1,21 @@
+import type { LimitItemProps } from "@/modules/evaluation/graph/editor/types";
+import { EvalLimitItemOperatorEnum } from "@repo/schema";
+import { ClassicPreset } from "rete";
+
+export class LimitItemConnection extends ClassicPreset.Connection<
+  LimitItemProps,
+  LimitItemProps
+> {
+  limitItemOperator: EvalLimitItemOperatorEnum;
+
+  constructor(
+    source: LimitItemProps,
+    sourceOutput: string,
+    target: LimitItemProps,
+    targetInput: string,
+    limitItemOperator: EvalLimitItemOperatorEnum = EvalLimitItemOperatorEnum.AND,
+  ) {
+    super(source, sourceOutput as never, target, targetInput as never);
+    this.limitItemOperator = limitItemOperator;
+  }
+}
diff --git a/apps/web/src/modules/evaluation/graph/editor/constants.ts b/apps/web/src/modules/evaluation/graph/editor/constants.ts
new file mode 100644
index 00000000..191b7d8d
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/constants.ts
@@ -0,0 +1,8 @@
+export const GRID = 20;
+
+export const ZOOM_MIN = 0.4;
+export const ZOOM_MAX = 1;
+export const ZOOM_STEP = 0.1;
+
+export const MAGNETIC_SNAP_DISTANCE = 50;
+export const MAGNETIC_SNAP_SOCKET_OFFSET = 10;
diff --git a/apps/web/src/modules/evaluation/graph/editor/controls/__tests__/position.test.ts b/apps/web/src/modules/evaluation/graph/editor/controls/__tests__/position.test.ts
new file mode 100644
index 00000000..e01b7aef
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/controls/__tests__/position.test.ts
@@ -0,0 +1,75 @@
+import { EvalLimitItemEdgeEnum } from "@repo/schema";
+import { describe, expect, it } from "vitest";
+import { edgesCompatible, PositionControl } from "../position";
+
+describe("edgesCompatible", () => {
+  it("treats CENTER as compatible with any edge", () => {
+    expect(
+      edgesCompatible(EvalLimitItemEdgeEnum.CENTER, EvalLimitItemEdgeEnum.TOP),
+    ).toBe(true);
+    expect(
+      edgesCompatible(EvalLimitItemEdgeEnum.LEFT, EvalLimitItemEdgeEnum.CENTER),
+    ).toBe(true);
+  });
+
+  it("allows same-axis pairs and rejects cross-axis pairs", () => {
+    expect(
+      edgesCompatible(EvalLimitItemEdgeEnum.LEFT, EvalLimitItemEdgeEnum.RIGHT),
+    ).toBe(true);
+    expect(
+      edgesCompatible(EvalLimitItemEdgeEnum.TOP, EvalLimitItemEdgeEnum.BOTTOM),
+    ).toBe(true);
+    expect(
+      edgesCompatible(EvalLimitItemEdgeEnum.LEFT, EvalLimitItemEdgeEnum.TOP),
+    ).toBe(false);
+    expect(
+      edgesCompatible(EvalLimitItemEdgeEnum.BOTTOM, EvalLimitItemEdgeEnum.RIGHT),
+    ).toBe(false);
+  });
+});
+
+describe("PositionControl", () => {
+  it("resets an incompatible initial parent edge to CENTER", () => {
+    const control = new PositionControl({
+      targetEdge: EvalLimitItemEdgeEnum.TOP,
+      parentEdge: EvalLimitItemEdgeEnum.LEFT,
+    });
+    expect(control.value).toEqual({
+      targetEdge: EvalLimitItemEdgeEnum.TOP,
+      parentEdge: EvalLimitItemEdgeEnum.CENTER,
+    });
+  });
+
+  it("resets the parent edge to CENTER when the target switches axis", () => {
+    const control = new PositionControl({
+      targetEdge: EvalLimitItemEdgeEnum.LEFT,
+      parentEdge: EvalLimitItemEdgeEnum.RIGHT,
+    });
+    control.setTargetEdge(EvalLimitItemEdgeEnum.TOP);
+    expect(control.value).toEqual({
+      targetEdge: EvalLimitItemEdgeEnum.TOP,
+      parentEdge: EvalLimitItemEdgeEnum.CENTER,
+    });
+  });
+
+  it("keeps a same-axis parent edge when the target changes within the axis", () => {
+    const control = new PositionControl({
+      targetEdge: EvalLimitItemEdgeEnum.LEFT,
+      parentEdge: EvalLimitItemEdgeEnum.RIGHT,
+    });
+    control.setTargetEdge(EvalLimitItemEdgeEnum.RIGHT);
+    expect(control.value).toEqual({
+      targetEdge: EvalLimitItemEdgeEnum.RIGHT,
+      parentEdge: EvalLimitItemEdgeEnum.RIGHT,
+    });
+  });
+
+  it("ignores an incompatible parent edge selection", () => {
+    const control = new PositionControl({
+      targetEdge: EvalLimitItemEdgeEnum.TOP,
+      parentEdge: EvalLimitItemEdgeEnum.CENTER,
+    });
+    control.setParentEdge(EvalLimitItemEdgeEnum.LEFT);
+    expect(control.value.parentEdge).toBe(EvalLimitItemEdgeEnum.CENTER);
+  });
+});
diff --git a/apps/web/src/modules/evaluation/graph/editor/controls/core/observableControl.ts b/apps/web/src/modules/evaluation/graph/editor/controls/core/observableControl.ts
new file mode 100644
index 00000000..34b8174a
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/controls/core/observableControl.ts
@@ -0,0 +1,20 @@
+import type { Listener } from "@/modules/evaluation/graph/editor/types";
+import { ClassicPreset } from "rete";
+
+export abstract class ObservableControl extends ClassicPreset.Control {
+  private listeners = new Set<Listener>();
+
+  subscribe = (listener: Listener) => {
+    this.listeners.add(listener);
+
+    return () => {
+      this.listeners.delete(listener);
+    };
+  };
+
+  protected emitChange() {
+    for (const listener of this.listeners) {
+      listener();
+    }
+  }
+}
diff --git a/apps/web/src/modules/evaluation/graph/editor/controls/core/validatableControl.ts b/apps/web/src/modules/evaluation/graph/editor/controls/core/validatableControl.ts
new file mode 100644
index 00000000..70942e52
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/controls/core/validatableControl.ts
@@ -0,0 +1,22 @@
+import type { ControlIssue } from "@/modules/evaluation/graph/editor/validation/types";
+import { ObservableControl } from "./observableControl";
+
+export abstract class ValidatableControl extends ObservableControl {
+  validationIssues: ControlIssue[] = [];
+
+  setValidationIssues(issues: ControlIssue[]) {
+    this.validationIssues = issues;
+  }
+
+  clearValidationIssues() {
+    this.validationIssues = [];
+  }
+
+  get hasValidationErrors() {
+    return this.validationIssues.some((issue) => issue.level === "error");
+  }
+
+  get hasValidationWarnings() {
+    return this.validationIssues.some((issue) => issue.level === "warning");
+  }
+}
diff --git a/apps/web/src/modules/evaluation/graph/editor/controls/enabled.ts b/apps/web/src/modules/evaluation/graph/editor/controls/enabled.ts
new file mode 100644
index 00000000..f98f3e9d
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/controls/enabled.ts
@@ -0,0 +1,27 @@
+import { ObservableControl } from "./core/observableControl";
+
+type EnabledControlOptions = {
+  initialValue?: boolean;
+};
+
+// Per-limit enable flag, edited in the graph and persisted on Save (serializeLimits
+// reads it). Observable so the header switch re-renders on toggle.
+export class EnabledControl extends ObservableControl {
+  value: boolean;
+
+  constructor(config: EnabledControlOptions = {}) {
+    super();
+    this.value = config.initialValue ?? true;
+  }
+
+  setValue(next: boolean) {
+    if (next === this.value) return;
+
+    this.value = next;
+    this.emitChange();
+  }
+
+  getSnapshot = () => {
+    return this.value;
+  };
+}
diff --git a/apps/web/src/modules/evaluation/graph/editor/controls/integerRange.ts b/apps/web/src/modules/evaluation/graph/editor/controls/integerRange.ts
new file mode 100644
index 00000000..3cf19a8d
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/controls/integerRange.ts
@@ -0,0 +1,96 @@
+import { ObservableControl } from "./core/observableControl";
+
+export type IntegerRangeValue = {
+  limitFrom: number | null;
+  limitTo: number | null;
+};
+
+export class IntegerRangeControl extends ObservableControl {
+  value: IntegerRangeValue;
+
+  readonly min = 0;
+  readonly step = 1;
+
+  constructor(initial: IntegerRangeValue = { limitFrom: null, limitTo: null }) {
+    super();
+
+    this.value = this.normalizeRange(initial);
+  }
+
+  get limitFrom() {
+    return this.value.limitFrom;
+  }
+
+  get limitTo() {
+    return this.value.limitTo;
+  }
+
+  setLimitFrom(value: number | null) {
+    const limitFrom = this.normalizeInteger(value);
+
+    this.setValue({
+      limitFrom,
+      limitTo:
+        limitFrom !== null &&
+        this.value.limitTo !== null &&
+        limitFrom > this.value.limitTo
+          ? null
+          : this.value.limitTo,
+    });
+  }
+
+  setLimitTo(value: number | null) {
+    const limitTo = this.normalizeInteger(value);
+
+    this.setValue({
+      limitFrom:
+        limitTo !== null &&
+        this.value.limitFrom !== null &&
+        limitTo < this.value.limitFrom
+          ? null
+          : this.value.limitFrom,
+      limitTo,
+    });
+  }
+
+  setValue(value: IntegerRangeValue) {
+    const next = this.normalizeRange(value);
+
+    if (
+      next.limitFrom === this.value.limitFrom &&
+      next.limitTo === this.value.limitTo
+    )
+      return;
+
+    this.value = next;
+    this.emitChange();
+  }
+
+  getSnapshot = () => {
+    return this.value;
+  };
+
+  private normalizeRange(value: IntegerRangeValue): IntegerRangeValue {
+    const limitFrom = this.normalizeInteger(value.limitFrom);
+    const limitTo = this.normalizeInteger(value.limitTo);
+
+    if (limitFrom !== null && limitTo !== null && limitFrom > limitTo) {
+      return {
+        limitFrom,
+        limitTo: null,
+      };
+    }
+
+    return {
+      limitFrom,
+      limitTo,
+    };
+  }
+
+  private normalizeInteger(value: number | null | undefined) {
+    if (value === null || value === undefined) return null;
+    if (!Number.isFinite(value)) return null;
+
+    return Math.max(0, Math.round(value));
+  }
+}
diff --git a/apps/web/src/modules/evaluation/graph/editor/controls/label.ts b/apps/web/src/modules/evaluation/graph/editor/controls/label.ts
new file mode 100644
index 00000000..2a178848
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/controls/label.ts
@@ -0,0 +1,60 @@
+import { ValidatableControl } from "./core/validatableControl";
+
+export type LabelOption = {
+  id: number;
+  name: string;
+};
+
+type LabelControlOptions = {
+  required?: boolean;
+  initialValue?: number | string | null;
+};
+
+export class LabelControl extends ValidatableControl {
+  value: string | null;
+  readonly options: LabelOption[];
+  readonly required: boolean;
+
+  constructor(options: LabelOption[], config: LabelControlOptions = {}) {
+    super();
+
+    this.options = options;
+    this.required = config.required ?? false;
+    this.value = this.normalize(config.initialValue ?? null);
+  }
+
+  setValue(value: string | null) {
+    const next = this.normalize(value);
+
+    if (next === this.value) return;
+
+    this.value = next;
+    this.emitChange();
+  }
+
+  clear() {
+    this.setValue(null);
+  }
+
+  isValid() {
+    if (!this.required) return true;
+
+    return this.value !== null;
+  }
+
+  getSnapshot = () => {
+    return this.value;
+  };
+
+  private normalize(value: number | string | null | undefined): string | null {
+    // The value is the selected label id as a string; `options` only feeds the
+    // dropdown. We intentionally keep any non-empty id (rather than dropping ids
+    // not in `options`) so a persisted selection survives even if the label set
+    // it references differs from the loaded one.
+    if (value == null || value === "") {
+      return null;
+    }
+
+    return String(value);
+  }
+}
diff --git a/apps/web/src/modules/evaluation/graph/editor/controls/name.ts b/apps/web/src/modules/evaluation/graph/editor/controls/name.ts
new file mode 100644
index 00000000..d7c52382
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/controls/name.ts
@@ -0,0 +1,34 @@
+import { ValidatableControl } from "./core/validatableControl";
+
+type NameControlOptions = {
+  initialValue?: string | null;
+};
+
+export class NameControl extends ValidatableControl {
+  value: string;
+
+  constructor(config: NameControlOptions = {}) {
+    super();
+    this.value = this.normalize(config.initialValue ?? "");
+  }
+
+  setValue(next: string) {
+    const normalized = this.normalize(next);
+    if (normalized === this.value) return;
+
+    this.value = normalized;
+    this.emitChange();
+  }
+
+  isValid() {
+    return this.value.trim().length > 0;
+  }
+
+  getSnapshot = () => {
+    return this.value;
+  };
+
+  private normalize(value: string | null | undefined) {
+    return value ?? "";
+  }
+}
diff --git a/apps/web/src/modules/evaluation/graph/editor/controls/percentageRange.ts b/apps/web/src/modules/evaluation/graph/editor/controls/percentageRange.ts
new file mode 100644
index 00000000..85f086cc
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/controls/percentageRange.ts
@@ -0,0 +1,36 @@
+import { ObservableControl } from "./core/observableControl";
+
+type PercentageRangeValue = [number, number];
+
+export class PercentageRangeControl extends ObservableControl {
+  value: PercentageRangeValue;
+  readonly min = 0;
+  readonly max = 100;
+  readonly step = 1;
+
+  constructor(initial: PercentageRangeValue = [0, 100]) {
+    super();
+    this.value = this.normalizeRange(initial);
+  }
+
+  setValue(value: number[]) {
+    const next = this.normalizeRange(value);
+    if (next[0] === this.value[0] && next[1] === this.value[1]) return;
+    this.value = next;
+    this.emitChange();
+  }
+
+  getSnapshot = () => this.value;
+
+  private normalizeRange(value: number[]): PercentageRangeValue {
+    const a = this.clampInt(value[0] ?? 0);
+    const b = this.clampInt(value[1] ?? 100);
+
+    return a <= b ? [a, b] : [b, a];
+  }
+
+  private clampInt(value: number) {
+    if (!Number.isFinite(value)) return 0;
+    return Math.max(0, Math.min(100, Math.round(value)));
+  }
+}
diff --git a/apps/web/src/modules/evaluation/graph/editor/controls/position.ts b/apps/web/src/modules/evaluation/graph/editor/controls/position.ts
new file mode 100644
index 00000000..2ade6f66
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/controls/position.ts
@@ -0,0 +1,79 @@
+import { EvalLimitItemEdgeEnum } from "@repo/schema";
+import { ObservableControl } from "./core/observableControl";
+
+/**
+ * A POSITION limit item compares a detection's edge (`targetEdge`) against the
+ * parent/input's edge (`parentEdge`). The two must share an axis unless one is CENTER
+ * (mirrors the schema's validateEdgePair and the limit form's behavior).
+ */
+export type PositionValue = {
+  targetEdge: EvalLimitItemEdgeEnum;
+  parentEdge: EvalLimitItemEdgeEnum;
+};
+
+const HORIZONTAL = new Set<EvalLimitItemEdgeEnum>([
+  EvalLimitItemEdgeEnum.LEFT,
+  EvalLimitItemEdgeEnum.RIGHT,
+]);
+const VERTICAL = new Set<EvalLimitItemEdgeEnum>([
+  EvalLimitItemEdgeEnum.TOP,
+  EvalLimitItemEdgeEnum.BOTTOM,
+]);
+
+export function edgesCompatible(
+  target: EvalLimitItemEdgeEnum,
+  parent: EvalLimitItemEdgeEnum,
+): boolean {
+  if (
+    target === EvalLimitItemEdgeEnum.CENTER ||
+    parent === EvalLimitItemEdgeEnum.CENTER
+  )
+    return true;
+  if (HORIZONTAL.has(target) && HORIZONTAL.has(parent)) return true;
+  if (VERTICAL.has(target) && VERTICAL.has(parent)) return true;
+  return false;
+}
+
+export class PositionControl extends ObservableControl {
+  value: PositionValue;
+
+  constructor(
+    initial: PositionValue = {
+      targetEdge: EvalLimitItemEdgeEnum.TOP,
+      parentEdge: EvalLimitItemEdgeEnum.CENTER,
+    },
+  ) {
+    super();
+
+    this.value = {
+      targetEdge: initial.targetEdge,
+      // Keep the persisted pair valid; fall back to CENTER if axes disagree.
+      parentEdge: edgesCompatible(initial.targetEdge, initial.parentEdge)
+        ? initial.parentEdge
+        : EvalLimitItemEdgeEnum.CENTER,
+    };
+  }
+
+  setTargetEdge(targetEdge: EvalLimitItemEdgeEnum) {
+    if (targetEdge === this.value.targetEdge) return;
+
+    const parentEdge = edgesCompatible(targetEdge, this.value.parentEdge)
+      ? this.value.parentEdge
+      : EvalLimitItemEdgeEnum.CENTER;
+
+    this.value = { targetEdge, parentEdge };
+    this.emitChange();
+  }
+
+  setParentEdge(parentEdge: EvalLimitItemEdgeEnum) {
+    if (parentEdge === this.value.parentEdge) return;
+    if (!edgesCompatible(this.value.targetEdge, parentEdge)) return;
+
+    this.value = { targetEdge: this.value.targetEdge, parentEdge };
+    this.emitChange();
+  }
+
+  getSnapshot = () => {
+    return this.value;
+  };
+}
diff --git a/apps/web/src/modules/evaluation/graph/editor/controls/quantifierType.ts b/apps/web/src/modules/evaluation/graph/editor/controls/quantifierType.ts
new file mode 100644
index 00000000..aedc9813
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/controls/quantifierType.ts
@@ -0,0 +1,41 @@
+import { EvalLimitItemQuantifierTypeEnum } from "@repo/schema";
+import { ObservableControl } from "./core/observableControl";
+
+export class QuantifierTypeControl extends ObservableControl {
+  value: EvalLimitItemQuantifierTypeEnum;
+
+  constructor(
+    initial: EvalLimitItemQuantifierTypeEnum = EvalLimitItemQuantifierTypeEnum.EXACT,
+  ) {
+    super();
+
+    this.value = this.normalizeQuantifier(initial);
+  }
+
+  setValue(value: EvalLimitItemQuantifierTypeEnum) {
+    const next = this.normalizeQuantifier(value);
+
+    if (next === this.value) return;
+
+    this.value = next;
+    this.emitChange();
+  }
+
+  getSnapshot = () => {
+    return this.value;
+  };
+
+  private normalizeQuantifier(
+    value: string,
+  ): EvalLimitItemQuantifierTypeEnum {
+    if (
+      value === EvalLimitItemQuantifierTypeEnum.MIN ||
+      value === EvalLimitItemQuantifierTypeEnum.MAX ||
+      value === EvalLimitItemQuantifierTypeEnum.EXACT
+    ) {
+      return value;
+    }
+
+    return EvalLimitItemQuantifierTypeEnum.EXACT;
+  }
+}
diff --git a/apps/web/src/modules/evaluation/graph/editor/controls/quantifierUnits.ts b/apps/web/src/modules/evaluation/graph/editor/controls/quantifierUnits.ts
new file mode 100644
index 00000000..f975eb47
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/controls/quantifierUnits.ts
@@ -0,0 +1,86 @@
+import { EvalLimitItemQuantifierUnitEnum } from "@repo/schema";
+import { ObservableControl } from "./core/observableControl";
+
+type Props = {
+  quantifierValue: number;
+  quantifierUnit: EvalLimitItemQuantifierUnitEnum;
+};
+
+export class QuantifierUnitsControl extends ObservableControl {
+  value: number;
+  quantifierUnit: EvalLimitItemQuantifierUnitEnum;
+
+  private snapshot: Props;
+
+  constructor(
+    initial: Props = {
+      quantifierValue: 0,
+      quantifierUnit: EvalLimitItemQuantifierUnitEnum.PCS,
+    },
+  ) {
+    super();
+
+    this.quantifierUnit = initial.quantifierUnit;
+    this.value = this.normalizeUnitsValue(
+      initial.quantifierValue,
+      this.quantifierUnit,
+    );
+    this.snapshot = {
+      quantifierValue: this.value,
+      quantifierUnit: this.quantifierUnit,
+    };
+  }
+
+  setValue(value: number) {
+    const next = this.normalizeUnitsValue(value, this.quantifierUnit);
+    if (next === this.value) return;
+
+    this.value = next;
+    this.updateSnapshot();
+  }
+
+  setMode(mode: EvalLimitItemQuantifierUnitEnum) {
+    const nextValue = this.normalizeUnitsValue(this.value, mode);
+
+    if (mode === this.quantifierUnit && nextValue === this.value) return;
+
+    this.quantifierUnit = mode;
+    this.value = nextValue;
+    this.updateSnapshot();
+  }
+
+  toggleMode() {
+    this.setMode(
+      this.quantifierUnit === EvalLimitItemQuantifierUnitEnum.PCS
+        ? EvalLimitItemQuantifierUnitEnum.PERCENT
+        : EvalLimitItemQuantifierUnitEnum.PCS,
+    );
+  }
+
+  getSnapshot = () => {
+    return this.snapshot;
+  };
+
+  private updateSnapshot() {
+    this.snapshot = {
+      quantifierValue: this.value,
+      quantifierUnit: this.quantifierUnit,
+    };
+
+    this.emitChange();
+  }
+
+  private normalizeUnitsValue(
+    value: number,
+    mode: EvalLimitItemQuantifierUnitEnum,
+  ) {
+    if (!Number.isFinite(value)) return 0;
+    const rounded = Math.round(value);
+
+    if (mode === EvalLimitItemQuantifierUnitEnum.PERCENT) {
+      return Math.max(0, Math.min(100, rounded));
+    }
+
+    return Math.max(0, rounded);
+  }
+}
diff --git a/apps/web/src/modules/evaluation/graph/editor/debug/DebugNodeBadge.tsx b/apps/web/src/modules/evaluation/graph/editor/debug/DebugNodeBadge.tsx
new file mode 100644
index 00000000..fba54c7f
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/debug/DebugNodeBadge.tsx
@@ -0,0 +1,21 @@
+import { isDebugEnabled } from "./isDebugEnabled";
+
+type Props = {
+  nodeId: string;
+};
+
+export const DebugNodeBadge = ({ nodeId }: Props) => {
+  if (!isDebugEnabled()) return null;
+
+  return (
+    <div
+      className={`
+        pointer-events-none absolute left-0 top-full mt-1 z-50
+        rounded bg-zinc-800/90 px-1.5 py-0.5
+        font-mono text-[10px] text-zinc-50
+      `}
+    >
+      {nodeId}
+    </div>
+  );
+};
diff --git a/apps/web/src/modules/evaluation/graph/editor/debug/EditorDebugOverlay.tsx b/apps/web/src/modules/evaluation/graph/editor/debug/EditorDebugOverlay.tsx
new file mode 100644
index 00000000..42f14986
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/debug/EditorDebugOverlay.tsx
@@ -0,0 +1,57 @@
+import type { Schemes } from "@/modules/evaluation/graph/editor/types";
+import { useEffect, useState } from "react";
+import type { NodeEditor } from "rete";
+import { isDebugEnabled } from "./isDebugEnabled";
+
+type Props = {
+  editor: NodeEditor<Schemes>;
+};
+
+const WATCHED_EVENTS = new Set([
+  "nodecreated",
+  "noderemoved",
+  "connectioncreated",
+  "connectionremoved",
+]);
+
+export const EditorDebugOverlay = ({ editor }: Props) => {
+  const [, setTick] = useState(0);
+
+  useEffect(() => {
+    // Debug-only: skip entirely when disabled so the pipe never runs in prod
+    // (Vite statically replaces import.meta.env, dropping this branch).
+    if (!isDebugEnabled()) return;
+
+    // rete has no removePipe, so the cleanup flips a flag making the pipe a no-op
+    // after unmount (or when the editor prop changes), instead of leaking a live pipe.
+    let disposed = false;
+    editor.addPipe((context) => {
+      if (!disposed && WATCHED_EVENTS.has(context.type)) {
+        setTick((prev) => prev + 1);
+      }
+      return context;
+    });
+
+    return () => {
+      disposed = true;
+    };
+  }, [editor]);
+
+  if (!isDebugEnabled()) return null;
+
+  const nodeCount = editor.getNodes().length;
+  const connectionCount = editor.getConnections().length;
+
+  return (
+    <div
+      className={`
+        pointer-events-none absolute left-4 top-4 z-50
+        rounded-md border border-zinc-300 bg-white/90 px-3 py-1.5
+        font-mono text-xs text-zinc-700 shadow-sm
+      `}
+    >
+      <div>nodes: {nodeCount}</div>
+      <div>connections: {connectionCount}</div>
+    </div>
+  );
+};
diff --git a/apps/web/src/modules/evaluation/graph/editor/debug/isDebugEnabled.ts b/apps/web/src/modules/evaluation/graph/editor/debug/isDebugEnabled.ts
new file mode 100644
index 00000000..771bb6b3
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/debug/isDebugEnabled.ts
@@ -0,0 +1,5 @@
+/// <reference types="vite/client" />
+
+export function isDebugEnabled(): boolean {
+  return import.meta.env.VITE_DEBUG === "true";
+}
diff --git a/apps/web/src/modules/evaluation/graph/editor/deserialization/__tests__/deserializeLimitItems.test.ts b/apps/web/src/modules/evaluation/graph/editor/deserialization/__tests__/deserializeLimitItems.test.ts
new file mode 100644
index 00000000..1e2e1199
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/deserialization/__tests__/deserializeLimitItems.test.ts
@@ -0,0 +1,135 @@
+import { createLimitItemNode } from "@/modules/evaluation/graph/editor/deserialization/deserializeLimitItems";
+import { AreaNode } from "@/modules/evaluation/graph/editor/nodes/limitItem/area";
+import { CountNode } from "@/modules/evaluation/graph/editor/nodes/limitItem/count";
+import { PositionNode } from "@/modules/evaluation/graph/editor/nodes/limitItem/position";
+import type { FullLimitItem } from "@/modules/evaluation/graph/editor/serialization/serializeLimitItems";
+import {
+  EvalLimitItemEdgeEnum,
+  EvalLimitItemOperatorEnum,
+  EvalLimitItemParameterEnum,
+  EvalLimitItemQuantifierTypeEnum,
+  EvalLimitItemQuantifierUnitEnum,
+} from "@repo/schema";
+import { describe, expect, it } from "vitest";
+
+const baseItem: FullLimitItem = {
+  id: "item-1",
+  limitFrom: 0,
+  limitTo: 10,
+  parameter: EvalLimitItemParameterEnum.COUNT,
+  operator: EvalLimitItemOperatorEnum.AND,
+  quantifierType: EvalLimitItemQuantifierTypeEnum.EXACT,
+  quantifierUnit: EvalLimitItemQuantifierUnitEnum.PERCENT,
+  quantifierValue: 100,
+  targetEdge: EvalLimitItemEdgeEnum.CENTER,
+  parentEdge: EvalLimitItemEdgeEnum.CENTER,
+};
+
+describe("createLimitItemNode — node type", () => {
+  it("creates a CountNode for COUNT", () => {
+    expect(
+      createLimitItemNode({
+        ...baseItem,
+        parameter: EvalLimitItemParameterEnum.COUNT,
+      }),
+    ).toBeInstanceOf(CountNode);
+  });
+
+  it("creates an AreaNode for AREA", () => {
+    expect(
+      createLimitItemNode({
+        ...baseItem,
+        parameter: EvalLimitItemParameterEnum.AREA,
+      }),
+    ).toBeInstanceOf(AreaNode);
+  });
+
+  it.each([
+    EvalLimitItemEdgeEnum.TOP,
+    EvalLimitItemEdgeEnum.LEFT,
+    EvalLimitItemEdgeEnum.BOTTOM,
+    EvalLimitItemEdgeEnum.RIGHT,
+  ])(
+    "creates a PositionNode for POSITION with targetEdge %s",
+    (targetEdge) => {
+      expect(
+        createLimitItemNode({
+          ...baseItem,
+          parameter: EvalLimitItemParameterEnum.POSITION,
+          targetEdge,
+        }),
+      ).toBeInstanceOf(PositionNode);
+    },
+  );
+
+  it("creates a PositionNode for POSITION with a CENTER target edge", () => {
+    expect(
+      createLimitItemNode({
+        ...baseItem,
+        parameter: EvalLimitItemParameterEnum.POSITION,
+        targetEdge: EvalLimitItemEdgeEnum.CENTER,
+      }),
+    ).toBeInstanceOf(PositionNode);
+  });
+});
+
+describe("createLimitItemNode — id handling", () => {
+  it("uses the id from the payload", () => {
+    const node = createLimitItemNode({ ...baseItem, id: "abc-123" });
+    expect(node.id).toBe("abc-123");
+  });
+
+  it("generates its own id when payload id is null", () => {
+    const node = createLimitItemNode({ ...baseItem, id: null });
+    expect(node.id).toBeTruthy();
+  });
+});
+
+describe("createLimitItemNode — field preservation", () => {
+  it("passes limitFrom and limitTo to CountNode", () => {
+    const node = createLimitItemNode({
+      ...baseItem,
+      parameter: EvalLimitItemParameterEnum.COUNT,
+      limitFrom: 3,
+      limitTo: 7,
+    });
+    expect(node.limitFrom).toBe(3);
+    expect(node.limitTo).toBe(7);
+  });
+
+  it("passes limitFrom and limitTo to AreaNode", () => {
+    const node = createLimitItemNode({
+      ...baseItem,
+      parameter: EvalLimitItemParameterEnum.AREA,
+      limitFrom: 10,
+      limitTo: 90,
+    });
+    expect(node.limitFrom).toBe(10);
+    expect(node.limitTo).toBe(90);
+  });
+
+  it("passes quantifier fields to AreaNode", () => {
+    const node = createLimitItemNode({
+      ...baseItem,
+      parameter: EvalLimitItemParameterEnum.AREA,
+      quantifierType: EvalLimitItemQuantifierTypeEnum.MIN,
+      quantifierUnit: EvalLimitItemQuantifierUnitEnum.PCS,
+      quantifierValue: 5,
+    });
+    expect(node.quantifierType).toBe("MIN");
+    expect(node.quantifierUnit).toBe("PCS");
+    expect(node.quantifierValue).toBe(5);
+  });
+
+  it("stores the target and parent edges on a PositionNode", () => {
+    const node = createLimitItemNode({
+      ...baseItem,
+      parameter: EvalLimitItemParameterEnum.POSITION,
+      targetEdge: EvalLimitItemEdgeEnum.LEFT,
+      parentEdge: EvalLimitItemEdgeEnum.RIGHT,
+    });
+    expect(node.parameter).toBe("POSITION");
+    expect(node.targetEdge).toBe("LEFT");
+    expect(node.parentEdge).toBe("RIGHT");
+  });
+});
diff --git a/apps/web/src/modules/evaluation/graph/editor/deserialization/__tests__/deserializeLimits.test.ts b/apps/web/src/modules/evaluation/graph/editor/deserialization/__tests__/deserializeLimits.test.ts
new file mode 100644
index 00000000..12183b76
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/deserialization/__tests__/deserializeLimits.test.ts
@@ -0,0 +1,199 @@
+import { BooleanConnection } from "@/modules/evaluation/graph/editor/connections/booleanConnection";
+import { LimitItemConnection } from "@/modules/evaluation/graph/editor/connections/limitItemConnection";
+import { addLimitToEditor } from "@/modules/evaluation/graph/editor/deserialization/deserializeLimits";
+import { AlertNode } from "@/modules/evaluation/graph/editor/nodes/action/alert";
+import { WarningNode } from "@/modules/evaluation/graph/editor/nodes/action/warning";
+import { LimitNode } from "@/modules/evaluation/graph/editor/nodes/limit/limit";
+import { CountNode } from "@/modules/evaluation/graph/editor/nodes/limitItem/count";
+import type { FullLimitItem } from "@/modules/evaluation/graph/editor/serialization/serializeLimitItems";
+import type { FullLimit } from "@/modules/evaluation/graph/editor/serialization/serializeLimits";
+import {
+  createTestArea,
+  createTestEditor,
+} from "@/modules/evaluation/graph/editor/utils/__tests__/testEditor";
+import {
+  EvalLimitItemEdgeEnum,
+  EvalLimitItemOperatorEnum,
+  EvalLimitItemParameterEnum,
+  EvalLimitItemQuantifierTypeEnum,
+  EvalLimitItemQuantifierUnitEnum,
+  EvalSeverityEnum,
+} from "@repo/schema";
+import { describe, expect, it } from "vitest";
+
+const countItem = (
+  operator: EvalLimitItemOperatorEnum = EvalLimitItemOperatorEnum.AND,
+): FullLimitItem => ({
+  id: null,
+  parameter: EvalLimitItemParameterEnum.COUNT,
+  limitFrom: 1,
+  limitTo: 5,
+  operator,
+  quantifierType: EvalLimitItemQuantifierTypeEnum.EXACT,
+  quantifierUnit: EvalLimitItemQuantifierUnitEnum.PERCENT,
+  quantifierValue: 100,
+  targetEdge: EvalLimitItemEdgeEnum.CENTER,
+  parentEdge: EvalLimitItemEdgeEnum.CENTER,
+});
+
+const baseLimit: FullLimit = {
+  id: "limit-1",
+  name: "My Limit",
+  severity: null,
+  enabled: true,
+  targetLabelId: 1,
+  targetParentLabelId: null,
+  limitItems: [],
+};
+
+describe("addLimitToEditor — node creation", () => {
+  it("creates a LimitNode with the payload id", async () => {
+    const editor = createTestEditor();
+    const { limitNode } = await addLimitToEditor(editor, createTestArea(), {
+      ...baseLimit,
+      id: "lim-abc",
+    });
+
+    expect(limitNode.id).toBe("lim-abc");
+    expect(editor.getNode("lim-abc")).toBe(limitNode);
+  });
+
+  it("returns a LimitNode instance", async () => {
+    const editor = createTestEditor();
+    const result = await addLimitToEditor(editor, createTestArea(), baseLimit);
+    expect(result.limitNode).toBeInstanceOf(LimitNode);
+  });
+
+  it("adds no limit item nodes when limitItems is empty", async () => {
+    const editor = createTestEditor();
+    await addLimitToEditor(editor, createTestArea(), {
+      ...baseLimit,
+      limitItems: [],
+    });
+
+    const nonLimitNodes = editor
+      .getNodes()
+      .filter((n) => !(n instanceof LimitNode));
+    expect(nonLimitNodes).toHaveLength(0);
+  });
+
+  it("creates one child node per limit item", async () => {
+    const editor = createTestEditor();
+    await addLimitToEditor(editor, createTestArea(), {
+      ...baseLimit,
+      limitItems: [countItem(), countItem()],
+    });
+
+    expect(
+      editor.getNodes().filter((n) => n instanceof CountNode),
+    ).toHaveLength(2);
+  });
+
+  it("sets each limit item parent to the limit node id", async () => {
+    const editor = createTestEditor();
+    const { limitNode, limitItemNodes } = await addLimitToEditor(
+      editor,
+      createTestArea(),
+      {
+        ...baseLimit,
+        limitItems: [countItem()],
+      },
+    );
+
+    expect(limitItemNodes[0]?.parent).toBe(limitNode.id);
+  });
+});
+
+describe("addLimitToEditor — limit item connections", () => {
+  it("connects consecutive limit items with a LimitItemConnection", async () => {
+    const editor = createTestEditor();
+    await addLimitToEditor(editor, createTestArea(), {
+      ...baseLimit,
+      limitItems: [countItem(EvalLimitItemOperatorEnum.OR), countItem(EvalLimitItemOperatorEnum.AND)],
+    });
+
+    const limitItemConns = editor
+      .getConnections()
+      .filter((c) => c instanceof LimitItemConnection);
+    expect(limitItemConns).toHaveLength(1);
+  });
+
+  it("uses the source item operator on the LimitItemConnection", async () => {
+    const editor = createTestEditor();
+    await addLimitToEditor(editor, createTestArea(), {
+      ...baseLimit,
+      limitItems: [countItem(EvalLimitItemOperatorEnum.OR), countItem(EvalLimitItemOperatorEnum.AND)],
+    });
+
+    const conn = editor
+      .getConnections()
+      .find((c): c is LimitItemConnection => c instanceof LimitItemConnection);
+    expect(conn?.limitItemOperator).toBe("OR");
+  });
+
+  it("adds N-1 connections for N limit items", async () => {
+    const editor = createTestEditor();
+    await addLimitToEditor(editor, createTestArea(), {
+      ...baseLimit,
+      limitItems: [countItem(), countItem(), countItem()],
+    });
+
+    const limitItemConns = editor
+      .getConnections()
+      .filter((c) => c instanceof LimitItemConnection);
+    expect(limitItemConns).toHaveLength(2);
+  });
+});
+
+describe("addLimitToEditor — severity", () => {
+  it("creates an AlertNode when severity is ALERT", async () => {
+    const editor = createTestEditor();
+    await addLimitToEditor(editor, createTestArea(), {
+      ...baseLimit,
+      severity: EvalSeverityEnum.ALERT,
+    });
+
+    expect(editor.getNodes().some((n) => n instanceof AlertNode)).toBe(true);
+  });
+
+  it("creates a WarningNode when severity is WARNING", async () => {
+    const editor = createTestEditor();
+    await addLimitToEditor(editor, createTestArea(), {
+      ...baseLimit,
+      severity: EvalSeverityEnum.WARNING,
+    });
+
+    expect(editor.getNodes().some((n) => n instanceof WarningNode)).toBe(true);
+  });
+
+  it("connects the limit node to the action node", async () => {
+    const editor = createTestEditor();
+    const { limitNode } = await addLimitToEditor(editor, createTestArea(), {
+      ...baseLimit,
+      severity: EvalSeverityEnum.ALERT,
+    });
+
+    const conn = editor
+      .getConnections()
+      .find(
+        (c): c is BooleanConnection =>
+          c instanceof BooleanConnection && c.source === limitNode.id,
+      );
+    expect(conn).toBeDefined();
+    expect(editor.getNode(conn!.target)).toBeInstanceOf(AlertNode);
+  });
+
+  it("does not create an action node when severity is null", async () => {
+    const editor = createTestEditor();
+    await addLimitToEditor(editor, createTestArea(), {
+      ...baseLimit,
+      severity: null,
+    });
+
+    expect(
+      editor
+        .getNodes()
+        .filter((n) => n instanceof AlertNode || n instanceof WarningNode),
+    ).toHaveLength(0);
+  });
+});
diff --git a/apps/web/src/modules/evaluation/graph/editor/deserialization/__tests__/deserializeLogicNodes.test.ts b/apps/web/src/modules/evaluation/graph/editor/deserialization/__tests__/deserializeLogicNodes.test.ts
new file mode 100644
index 00000000..a945681e
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/deserialization/__tests__/deserializeLogicNodes.test.ts
@@ -0,0 +1,452 @@
+import { BooleanConnection } from "@/modules/evaluation/graph/editor/connections/booleanConnection";
+import { addLogicToEditor } from "@/modules/evaluation/graph/editor/deserialization/deserializeLogicNodes";
+import { AlertNode } from "@/modules/evaluation/graph/editor/nodes/action/alert";
+import { WarningNode } from "@/modules/evaluation/graph/editor/nodes/action/warning";
+import { LimitNode } from "@/modules/evaluation/graph/editor/nodes/limit/limit";
+import { AndNode } from "@/modules/evaluation/graph/editor/nodes/logical/and";
+import { OrNode } from "@/modules/evaluation/graph/editor/nodes/logical/or";
+import { ResultNode } from "@/modules/evaluation/graph/editor/nodes/result/result";
+import { createTestEditor } from "@/modules/evaluation/graph/editor/utils/__tests__/testEditor";
+import {
+  EvalLogicNodeOperatorValueEnum,
+  EvalLogicNodeTypeEnum,
+  EvalSeverityEnum,
+  EvalTestCaseTypeEnum,
+  type EvalLogicNode,
+} from "@repo/schema";
+import { describe, expect, it } from "vitest";
+
+type TestEditor = ReturnType<typeof createTestEditor>;
+
+async function addLimits(
+  editor: TestEditor,
+  count: number,
+): Promise<LimitNode[]> {
+  const limits: LimitNode[] = [];
+  for (let i = 0; i < count; i++) {
+    const limit = new LimitNode({ label: (i % 2) + 1 });
+    await editor.addNode(limit);
+    limits.push(limit);
+  }
+  return limits;
+}
+
+function limitMap(limits: LimitNode[]): Map<string, LimitNode> {
+  return new Map(limits.map((n) => [n.id, n]));
+}
+
+describe("addLogicToEditor — ResultNode", () => {
+  it("always creates a ResultNode", async () => {
+    const editor = createTestEditor();
+    await addLogicToEditor(editor, [], new Map(), {
+      type: EvalTestCaseTypeEnum.CHECK,
+      severity: null,
+    });
+
+    expect(
+      editor.getNodes().filter((n) => n instanceof ResultNode),
+    ).toHaveLength(1);
+  });
+
+  it("returns the ResultNode", async () => {
+    const editor = createTestEditor();
+    const result = await addLogicToEditor(editor, [], new Map(), {
+      type: EvalTestCaseTypeEnum.CHECK,
+      severity: null,
+    });
+
+    expect(result).toBeInstanceOf(ResultNode);
+  });
+
+  it("adds no connections when logicNodes is empty", async () => {
+    const editor = createTestEditor();
+    await addLogicToEditor(editor, [], new Map(), {
+      type: EvalTestCaseTypeEnum.CHECK,
+      severity: null,
+    });
+
+    expect(editor.getConnections()).toHaveLength(0);
+  });
+});
+
+describe("addLogicToEditor — top-level NOT drives the result connection", () => {
+  it("uses TRUE on the result connection for a plain limit", async () => {
+    const editor = createTestEditor();
+    const [limit] = await addLimits(editor, 1);
+    const logicNodes: EvalLogicNode[] = [
+      { id: limit!.id, type: EvalLogicNodeTypeEnum.LIMIT },
+    ];
+
+    const resultNode = await addLogicToEditor(
+      editor,
+      logicNodes,
+      limitMap([limit!]),
+      {
+        type: EvalTestCaseTypeEnum.CHECK,
+        severity: null,
+      },
+    );
+
+    const conn = editor
+      .getConnections()
+      .find(
+        (c): c is BooleanConnection =>
+          c instanceof BooleanConnection && c.target === resultNode.id,
+      );
+    expect(conn?.booleanOperator).toBe("TRUE");
+  });
+
+  it("uses NOT on the result connection for a top-level [NOT, LIMIT]", async () => {
+    const editor = createTestEditor();
+    const [limit] = await addLimits(editor, 1);
+    const logicNodes: EvalLogicNode[] = [
+      { id: "", type: EvalLogicNodeTypeEnum.OPERATOR, operatorValue: EvalLogicNodeOperatorValueEnum.NOT },
+      { id: limit!.id, type: EvalLogicNodeTypeEnum.LIMIT },
+    ];
+
+    const resultNode = await addLogicToEditor(
+      editor,
+      logicNodes,
+      limitMap([limit!]),
+      {
+        type: EvalTestCaseTypeEnum.CHECK,
+        severity: null,
+      },
+    );
+
+    // The NOT rides on the result-input connection, and the limit feeds it directly.
+    const conn = editor
+      .getConnections()
+      .find(
+        (c): c is BooleanConnection =>
+          c instanceof BooleanConnection && c.target === resultNode.id,
+      );
+    expect(conn?.booleanOperator).toBe("NOT");
+    expect(conn?.source).toBe(limit!.id);
+  });
+});
+
+describe("addLogicToEditor — single limit", () => {
+  it("connects the limit directly to the ResultNode", async () => {
+    const editor = createTestEditor();
+    const [limit] = await addLimits(editor, 1);
+    const logicNodes: EvalLogicNode[] = [
+      { id: limit!.id, type: EvalLogicNodeTypeEnum.LIMIT },
+    ];
+
+    const resultNode = await addLogicToEditor(
+      editor,
+      logicNodes,
+      limitMap([limit!]),
+      {
+        type: EvalTestCaseTypeEnum.CHECK,
+        severity: null,
+      },
+    );
+
+    const conn = editor.getConnections().find((c) => c.source === limit!.id);
+    expect(conn).toBeDefined();
+    expect(conn!.target).toBe(resultNode.id);
+  });
+});
+
+describe("addLogicToEditor — logical operators", () => {
+  it("creates an AndNode for AND operator", async () => {
+    const editor = createTestEditor();
+    const [limitA, limitB] = await addLimits(editor, 2);
+    const logicNodes: EvalLogicNode[] = [
+      { id: limitA!.id, type: EvalLogicNodeTypeEnum.LIMIT },
+      { id: "", type: EvalLogicNodeTypeEnum.OPERATOR, operatorValue: EvalLogicNodeOperatorValueEnum.AND },
+      { id: limitB!.id, type: EvalLogicNodeTypeEnum.LIMIT },
+    ];
+
+    await addLogicToEditor(editor, logicNodes, limitMap([limitA!, limitB!]), {
+      type: EvalTestCaseTypeEnum.CHECK,
+      severity: null,
+    });
+
+    expect(editor.getNodes().some((n) => n instanceof AndNode)).toBe(true);
+  });
+
+  it("creates an OrNode for OR operator", async () => {
+    const editor = createTestEditor();
+    const [limitA, limitB] = await addLimits(editor, 2);
+    const logicNodes: EvalLogicNode[] = [
+      { id: limitA!.id, type: EvalLogicNodeTypeEnum.LIMIT },
+      { id: "", type: EvalLogicNodeTypeEnum.OPERATOR, operatorValue: EvalLogicNodeOperatorValueEnum.OR },
+      { id: limitB!.id, type: EvalLogicNodeTypeEnum.LIMIT },
+    ];
+
+    await addLogicToEditor(editor, logicNodes, limitMap([limitA!, limitB!]), {
+      type: EvalTestCaseTypeEnum.CHECK,
+      severity: null,
+    });
+
+    expect(editor.getNodes().some((n) => n instanceof OrNode)).toBe(true);
+  });
+
+  it("connects both limits to the logical node", async () => {
+    const editor = createTestEditor();
+    const [limitA, limitB] = await addLimits(editor, 2);
+    const logicNodes: EvalLogicNode[] = [
+      { id: limitA!.id, type: EvalLogicNodeTypeEnum.LIMIT },
+      { id: "", type: EvalLogicNodeTypeEnum.OPERATOR, operatorValue: EvalLogicNodeOperatorValueEnum.AND },
+      { id: limitB!.id, type: EvalLogicNodeTypeEnum.LIMIT },
+    ];
+
+    await addLogicToEditor(editor, logicNodes, limitMap([limitA!, limitB!]), {
+      type: EvalTestCaseTypeEnum.CHECK,
+      severity: null,
+    });
+
+    const andNode = editor.getNodes().find((n) => n instanceof AndNode)!;
+    const incomingToAnd = editor
+      .getConnections()
+      .filter((c) => c.target === andNode.id);
+    expect(incomingToAnd).toHaveLength(2);
+  });
+});
+
+describe("addLogicToEditor — NOT operator", () => {
+  it("applies NOT on the connection for the negated child", async () => {
+    const editor = createTestEditor();
+    const [limitA, limitB] = await addLimits(editor, 2);
+    const logicNodes: EvalLogicNode[] = [
+      { id: "", type: EvalLogicNodeTypeEnum.OPERATOR, operatorValue: EvalLogicNodeOperatorValueEnum.NOT },
+      { id: limitA!.id, type: EvalLogicNodeTypeEnum.LIMIT },
+      { id: "", type: EvalLogicNodeTypeEnum.OPERATOR, operatorValue: EvalLogicNodeOperatorValueEnum.AND },
+      { id: limitB!.id, type: EvalLogicNodeTypeEnum.LIMIT },
+    ];
+
+    await addLogicToEditor(editor, logicNodes, limitMap([limitA!, limitB!]), {
+      type: EvalTestCaseTypeEnum.CHECK,
+      severity: null,
+    });
+
+    const notConns = editor
+      .getConnections()
+      .filter(
+        (c): c is BooleanConnection =>
+          c instanceof BooleanConnection && c.booleanOperator === "NOT",
+      );
+    expect(notConns).toHaveLength(1);
+    expect(notConns[0]!.source).toBe(limitA!.id);
+  });
+});
+
+describe("addLogicToEditor — GROUP", () => {
+  it("creates both AND and OR nodes for a nested (A OR B) AND C expression", async () => {
+    const editor = createTestEditor();
+    const [limitA, limitB, limitC] = await addLimits(editor, 3);
+    const logicNodes: EvalLogicNode[] = [
+      {
+        id: "group-1",
+        type: EvalLogicNodeTypeEnum.GROUP,
+        children: [
+          { id: limitA!.id, type: EvalLogicNodeTypeEnum.LIMIT },
+          { id: "", type: EvalLogicNodeTypeEnum.OPERATOR, operatorValue: EvalLogicNodeOperatorValueEnum.OR },
+          { id: limitB!.id, type: EvalLogicNodeTypeEnum.LIMIT },
+        ],
+      },
+      { id: "", type: EvalLogicNodeTypeEnum.OPERATOR, operatorValue: EvalLogicNodeOperatorValueEnum.AND },
+      { id: limitC!.id, type: EvalLogicNodeTypeEnum.LIMIT },
+    ];
+
+    await addLogicToEditor(
+      editor,
+      logicNodes,
+      limitMap([limitA!, limitB!, limitC!]),
+      {
+        type: EvalTestCaseTypeEnum.CHECK,
+        severity: null,
+      },
+    );
+
+    expect(editor.getNodes().some((n) => n instanceof OrNode)).toBe(true);
+    expect(editor.getNodes().some((n) => n instanceof AndNode)).toBe(true);
+  });
+
+  it("parses a mixed-operator level left-associatively: A OR B AND (C AND D)", async () => {
+    const editor = createTestEditor();
+    const [limitA, limitB, limitC, limitD] = await addLimits(editor, 4);
+    // Flat list as the table-view LogicBuilder emits it: each operand carries its
+    // own connector, nesting only via GROUP. Read left-to-right this is
+    // ((A OR B) AND (C AND D)).
+    const logicNodes: EvalLogicNode[] = [
+      { id: limitA!.id, type: EvalLogicNodeTypeEnum.LIMIT },
+      { id: "", type: EvalLogicNodeTypeEnum.OPERATOR, operatorValue: EvalLogicNodeOperatorValueEnum.OR },
+      { id: limitB!.id, type: EvalLogicNodeTypeEnum.LIMIT },
+      { id: "", type: EvalLogicNodeTypeEnum.OPERATOR, operatorValue: EvalLogicNodeOperatorValueEnum.AND },
+      {
+        id: "group-1",
+        type: EvalLogicNodeTypeEnum.GROUP,
+        children: [
+          { id: limitC!.id, type: EvalLogicNodeTypeEnum.LIMIT },
+          { id: "", type: EvalLogicNodeTypeEnum.OPERATOR, operatorValue: EvalLogicNodeOperatorValueEnum.AND },
+          { id: limitD!.id, type: EvalLogicNodeTypeEnum.LIMIT },
+        ],
+      },
+    ];
+
+    const resultNode = await addLogicToEditor(
+      editor,
+      logicNodes,
+      limitMap([limitA!, limitB!, limitC!, limitD!]),
+      { type: EvalTestCaseTypeEnum.CHECK, severity: null },
+    );
+
+    const orNodes = editor.getNodes().filter((n) => n instanceof OrNode);
+    const andNodes = editor.getNodes().filter((n) => n instanceof AndNode);
+    expect(orNodes).toHaveLength(1);
+    expect(andNodes).toHaveLength(2); // top-level AND + the group's AND
+
+    // The ResultNode is fed by the top-level AND.
+    const resultInput = editor
+      .getConnections()
+      .find((c) => c.target === resultNode.id);
+    const topAnd = andNodes.find((n) => n.id === resultInput!.source);
+    expect(topAnd).toBeDefined();
+
+    // The top-level AND combines the OR node and the group's AND node.
+    const groupAnd = andNodes.find((n) => n.id !== topAnd!.id)!;
+    const topAndSources = editor
+      .getConnections()
+      .filter((c) => c.target === topAnd!.id)
+      .map((c) => c.source);
+    expect(topAndSources).toContain(orNodes[0]!.id);
+    expect(topAndSources).toContain(groupAnd.id);
+
+    // The OR node combines limits A and B (not C/D).
+    const orSources = editor
+      .getConnections()
+      .filter((c) => c.target === orNodes[0]!.id)
+      .map((c) => c.source);
+    expect(orSources).toEqual(
+      expect.arrayContaining([limitA!.id, limitB!.id]),
+    );
+  });
+
+  it("throws for an empty GROUP", async () => {
+    const editor = createTestEditor();
+    const logicNodes: EvalLogicNode[] = [
+      { id: "g1", type: EvalLogicNodeTypeEnum.GROUP, children: [] },
+    ];
+
+    await expect(
+      addLogicToEditor(editor, logicNodes, new Map(), {
+        type: EvalTestCaseTypeEnum.CHECK,
+        severity: null,
+      }),
+    ).rejects.toThrow("Empty logic group");
+  });
+});
+
+describe("addLogicToEditor — error cases", () => {
+  it("throws when a LIMIT id is not in the limitNodesById map", async () => {
+    const editor = createTestEditor();
+    const logicNodes: EvalLogicNode[] = [
+      { id: "missing", type: EvalLogicNodeTypeEnum.LIMIT },
+    ];
+
+    await expect(
+      addLogicToEditor(editor, logicNodes, new Map(), {
+        type: EvalTestCaseTypeEnum.CHECK,
+        severity: null,
+      }),
+    ).rejects.toThrow("Missing limit node");
+  });
+
+  it("throws when operands do not alternate with operators", async () => {
+    const editor = createTestEditor();
+    const [limitA, limitB] = await addLimits(editor, 2);
+    const logicNodes: EvalLogicNode[] = [
+      { id: limitA!.id, type: EvalLogicNodeTypeEnum.LIMIT },
+      { id: limitB!.id, type: EvalLogicNodeTypeEnum.LIMIT },
+    ];
+
+    await expect(
+      addLogicToEditor(editor, logicNodes, limitMap([limitA!, limitB!]), {
+        type: EvalTestCaseTypeEnum.CHECK,
+        severity: null,
+      }),
+    ).rejects.toThrow("alternate");
+  });
+});
+
+describe("addLogicToEditor — empty logicNodes fallback", () => {
+  it("connects a lone limit to the ResultNode when logicNodes is empty", async () => {
+    const editor = createTestEditor();
+    const [limit] = await addLimits(editor, 1);
+
+    const resultNode = await addLogicToEditor(editor, [], limitMap([limit!]), {
+      type: EvalTestCaseTypeEnum.CHECK,
+      severity: null,
+    });
+
+    const conn = editor.getConnections().find((c) => c.source === limit!.id);
+    expect(conn).toBeDefined();
+    expect(conn!.target).toBe(resultNode.id);
+  });
+
+  it("AND-joins multiple limits into the ResultNode when logicNodes is empty", async () => {
+    const editor = createTestEditor();
+    const [limitA, limitB] = await addLimits(editor, 2);
+
+    await addLogicToEditor(editor, [], limitMap([limitA!, limitB!]), {
+      type: EvalTestCaseTypeEnum.CHECK,
+      severity: null,
+    });
+
+    expect(editor.getNodes().some((n) => n instanceof AndNode)).toBe(true);
+  });
+});
+
+describe("addLogicToEditor — severity", () => {
+  it("creates an AlertNode when severity is ALERT", async () => {
+    const editor = createTestEditor();
+    await addLogicToEditor(editor, [], new Map(), {
+      type: EvalTestCaseTypeEnum.CHECK,
+      severity: EvalSeverityEnum.ALERT,
+    });
+
+    expect(editor.getNodes().some((n) => n instanceof AlertNode)).toBe(true);
+  });
+
+  it("creates a WarningNode when severity is WARNING", async () => {
+    const editor = createTestEditor();
+    await addLogicToEditor(editor, [], new Map(), {
+      type: EvalTestCaseTypeEnum.CHECK,
+      severity: EvalSeverityEnum.WARNING,
+    });
+
+    expect(editor.getNodes().some((n) => n instanceof WarningNode)).toBe(true);
+  });
+
+  it("connects the ResultNode to the action node", async () => {
+    const editor = createTestEditor();
+    const resultNode = await addLogicToEditor(editor, [], new Map(), {
+      type: EvalTestCaseTypeEnum.CHECK,
+      severity: EvalSeverityEnum.ALERT,
+    });
+
+    const conn = editor
+      .getConnections()
+      .find((c) => c.source === resultNode.id);
+    expect(conn).toBeDefined();
+    expect(editor.getNode(conn!.target)).toBeInstanceOf(AlertNode);
+  });
+
+  it("adds no action node when severity is null", async () => {
+    const editor = createTestEditor();
+    await addLogicToEditor(editor, [], new Map(), {
+      type: EvalTestCaseTypeEnum.CHECK,
+      severity: null,
+    });
+
+    expect(
+      editor
+        .getNodes()
+        .filter((n) => n instanceof AlertNode || n instanceof WarningNode),
+    ).toHaveLength(0);
+  });
+});
diff --git a/apps/web/src/modules/evaluation/graph/editor/deserialization/addActionForSeverity.ts b/apps/web/src/modules/evaluation/graph/editor/deserialization/addActionForSeverity.ts
new file mode 100644
index 00000000..e5216eba
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/deserialization/addActionForSeverity.ts
@@ -0,0 +1,30 @@
+import { BooleanConnection } from "@/modules/evaluation/graph/editor/connections/booleanConnection";
+import { AlertNode } from "@/modules/evaluation/graph/editor/nodes/action/alert";
+import { WarningNode } from "@/modules/evaluation/graph/editor/nodes/action/warning";
+import type {
+  BooleanNodeProps,
+  Schemes,
+} from "@/modules/evaluation/graph/editor/types";
+import { EvalSeverityEnum } from "@repo/schema";
+import type { NodeEditor } from "rete";
+
+/**
+ * Adds the action node for a severity (alert/warning) and wires it from `source`
+ * with a plain TRUE Boolean connection. Shared by the limit and logic
+ * deserializers so the severity-to-action mapping lives in one place.
+ */
+export async function addActionForSeverity(
+  editor: NodeEditor<Schemes>,
+  source: BooleanNodeProps,
+  severity: EvalSeverityEnum | null,
+) {
+  if (!severity) return;
+
+  const actionNode =
+    severity === EvalSeverityEnum.ALERT ? new AlertNode() : new WarningNode();
+
+  await editor.addNode(actionNode);
+  await editor.addConnection(
+    new BooleanConnection(source, "out", actionNode, "in", "TRUE"),
+  );
+}
diff --git a/apps/web/src/modules/evaluation/graph/editor/deserialization/deserializeLimitItems.ts b/apps/web/src/modules/evaluation/graph/editor/deserialization/deserializeLimitItems.ts
new file mode 100644
index 00000000..0d1e00ef
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/deserialization/deserializeLimitItems.ts
@@ -0,0 +1,39 @@
+import { AreaNode } from "@/modules/evaluation/graph/editor/nodes/limitItem/area";
+import { CountNode } from "@/modules/evaluation/graph/editor/nodes/limitItem/count";
+import { PositionNode } from "@/modules/evaluation/graph/editor/nodes/limitItem/position";
+import type { FullLimitItem } from "@/modules/evaluation/graph/editor/serialization/serializeLimitItems";
+import type { LimitItemProps } from "@/modules/evaluation/graph/editor/types";
+import { EvalLimitItemParameterEnum } from "@repo/schema";
+
+export function createLimitItemNode(item: FullLimitItem): LimitItemProps {
+  switch (item.parameter) {
+    case EvalLimitItemParameterEnum.COUNT:
+      return new CountNode({
+        id: item.id ?? undefined,
+        limitFrom: item.limitFrom,
+        limitTo: item.limitTo,
+      });
+
+    case EvalLimitItemParameterEnum.AREA:
+      return new AreaNode({
+        id: item.id ?? undefined,
+        limitFrom: item.limitFrom ?? undefined,
+        limitTo: item.limitTo ?? undefined,
+        quantifierType: item.quantifierType,
+        quantifierUnit: item.quantifierUnit,
+        quantifierValue: item.quantifierValue,
+      });
+
+    case EvalLimitItemParameterEnum.POSITION:
+      return new PositionNode({
+        id: item.id ?? undefined,
+        limitFrom: item.limitFrom ?? undefined,
+        limitTo: item.limitTo ?? undefined,
+        targetEdge: item.targetEdge,
+        parentEdge: item.parentEdge,
+        quantifierType: item.quantifierType,
+        quantifierUnit: item.quantifierUnit,
+        quantifierValue: item.quantifierValue,
+      });
+  }
+}
diff --git a/apps/web/src/modules/evaluation/graph/editor/deserialization/deserializeLimits.ts b/apps/web/src/modules/evaluation/graph/editor/deserialization/deserializeLimits.ts
new file mode 100644
index 00000000..782f164e
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/deserialization/deserializeLimits.ts
@@ -0,0 +1,95 @@
+import { LimitItemConnection } from "@/modules/evaluation/graph/editor/connections/limitItemConnection";
+import type { LabelOption } from "@/modules/evaluation/graph/editor/controls/label";
+import { addActionForSeverity } from "@/modules/evaluation/graph/editor/deserialization/addActionForSeverity";
+import { LimitNode } from "@/modules/evaluation/graph/editor/nodes/limit/limit";
+import type { FullLimit } from "@/modules/evaluation/graph/editor/serialization/serializeLimits";
+import type { AreaExtra } from "@/modules/evaluation/graph/editor/setup/createEditor";
+import type {
+  LimitItemProps,
+  Schemes,
+} from "@/modules/evaluation/graph/editor/types";
+import type { NodeEditor } from "rete";
+import type { AreaPlugin } from "rete-area-plugin";
+import { createLimitItemNode } from "./deserializeLimitItems";
+
+const LIMIT_ITEM_START_X = 40;
+const LIMIT_ITEM_START_Y = 120;
+const LIMIT_ITEM_GAP_X = 170;
+
+export type DeserializedLimit = {
+  limitNode: LimitNode;
+  limitItemNodes: LimitItemProps[];
+};
+
+export async function addLimitToEditor(
+  editor: NodeEditor<Schemes>,
+  area: AreaPlugin<Schemes, AreaExtra>,
+  limit: FullLimit,
+  labels: LabelOption[] = [],
+): Promise<DeserializedLimit> {
+  const limitNode = new LimitNode({
+    id: limit.id ?? undefined,
+    name: limit.name,
+    label: limit.targetLabelId,
+    parentLabel: limit.targetParentLabelId,
+    enabled: limit.enabled,
+    labels,
+  });
+
+  await editor.addNode(limitNode);
+
+  const limitItemNodes: LimitItemProps[] = [];
+
+  for (const [index, item] of limit.limitItems.entries()) {
+    const limitItemNode = createLimitItemNode(item);
+
+    limitItemNode.parent = limitNode.id;
+
+    await editor.addNode(limitItemNode);
+
+    await area.translate(limitItemNode.id, {
+      x: LIMIT_ITEM_START_X + index * LIMIT_ITEM_GAP_X,
+      y: LIMIT_ITEM_START_Y,
+    });
+
+    limitItemNodes.push(limitItemNode);
+  }
+
+  await addLimitItemConnections(editor, limitItemNodes, limit);
+  await addActionForSeverity(editor, limitNode, limit.severity);
+
+  await area.update("node", limitNode.id);
+
+  for (const node of limitItemNodes) {
+    await area.update("node", node.id);
+  }
+
+  return {
+    limitNode,
+    limitItemNodes,
+  };
+}
+
+async function addLimitItemConnections(
+  editor: NodeEditor<Schemes>,
+  nodes: LimitItemProps[],
+  limit: FullLimit,
+) {
+  for (let index = 0; index < nodes.length - 1; index += 1) {
+    const sourceNode = nodes[index];
+    const targetNode = nodes[index + 1];
+    const sourceItem = limit.limitItems[index];
+
+    if (!sourceNode || !targetNode || !sourceItem) continue;
+
+    const connection = new LimitItemConnection(
+      sourceNode,
+      "out",
+      targetNode,
+      "in",
+      sourceItem.operator,
+    );
+
+    await editor.addConnection(connection);
+  }
+}
diff --git a/apps/web/src/modules/evaluation/graph/editor/deserialization/deserializeLogicNodes.ts b/apps/web/src/modules/evaluation/graph/editor/deserialization/deserializeLogicNodes.ts
new file mode 100644
index 00000000..d057c918
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/deserialization/deserializeLogicNodes.ts
@@ -0,0 +1,258 @@
+import { BooleanConnection } from "@/modules/evaluation/graph/editor/connections/booleanConnection";
+import { addActionForSeverity } from "@/modules/evaluation/graph/editor/deserialization/addActionForSeverity";
+import { LimitNode } from "@/modules/evaluation/graph/editor/nodes/limit/limit";
+import { AndNode } from "@/modules/evaluation/graph/editor/nodes/logical/and";
+import { OrNode } from "@/modules/evaluation/graph/editor/nodes/logical/or";
+import { ResultNode } from "@/modules/evaluation/graph/editor/nodes/result/result";
+import type {
+  BooleanNodeProps,
+  Schemes,
+} from "@/modules/evaluation/graph/editor/types";
+import {
+  EvalLogicNodeOperatorValueEnum,
+  EvalLogicNodeTypeEnum,
+  EvalSeverityEnum,
+  type EvalLogicNode,
+  type EvalTestCaseTypeEnum,
+} from "@repo/schema";
+import type { NodeEditor } from "rete";
+
+type LogicOptions = {
+  severity: EvalSeverityEnum | null;
+  type: EvalTestCaseTypeEnum;
+};
+
+type ExpressionNode =
+  | {
+      kind: "limit";
+      limitId: string;
+    }
+  | {
+      kind: "not";
+      child: ExpressionNode;
+    }
+  | {
+      kind: "operator";
+      operator: "AND" | "OR";
+      children: ExpressionNode[];
+    };
+
+type BuildContext = {
+  editor: NodeEditor<Schemes>;
+  limitNodesById: Map<string, LimitNode>;
+};
+
+export async function addLogicToEditor(
+  editor: NodeEditor<Schemes>,
+  logicNodes: EvalLogicNode[],
+  limitNodesById: Map<string, LimitNode>,
+  options: LogicOptions,
+): Promise<ResultNode> {
+  const resultNode = new ResultNode();
+
+  await editor.addNode(resultNode);
+
+  // A test case built from the table view persists no logic tree (`logicNodes: []`),
+  // yet its limits must still feed the ResultNode. Fall back to a default expression
+  // synthesized from the limits present: a single limit connects directly, multiple
+  // limits are connected with AND (the implicit conjunction the table view represents).
+  const expression =
+    parseLogicExpression(logicNodes) ??
+    buildDefaultExpression(limitNodesById);
+
+  if (expression) {
+    // A top-level NOT negates the whole expression. The test-case type no longer drives
+    // the result edge (DEFECT is unsupported); the NOT rides on the result-input
+    // connection instead. In the table view this is only producible for a single limit
+    // (-> a Limit -> Result edge carrying NOT), but a negated group is preserved too.
+    const negateResult = expression.kind === "not";
+    const rootExpression = negateResult ? expression.child : expression;
+
+    const finalSourceNode = await createLogicGraphFromExpression(
+      {
+        editor,
+        limitNodesById,
+      },
+      rootExpression,
+    );
+
+    const resultInputConnection = new BooleanConnection(
+      finalSourceNode,
+      "out",
+      resultNode,
+      "in",
+      negateResult ? "NOT" : "TRUE",
+    );
+
+    await editor.addConnection(resultInputConnection);
+  }
+
+  await addActionForSeverity(editor, resultNode, options.severity);
+
+  return resultNode;
+}
+
+function parseLogicExpression(
+  nodes: EvalLogicNode[],
+): ExpressionNode | null {
+  if (nodes.length === 0) return null;
+
+  const parts: Array<ExpressionNode | "AND" | "OR"> = [];
+  let pendingNot = false;
+
+  for (const node of nodes) {
+    if (node.type === EvalLogicNodeTypeEnum.OPERATOR) {
+      if (node.operatorValue === EvalLogicNodeOperatorValueEnum.NOT) {
+        pendingNot = true;
+        continue;
+      }
+      if (node.operatorValue === EvalLogicNodeOperatorValueEnum.AND) {
+        parts.push("AND");
+      } else if (node.operatorValue === EvalLogicNodeOperatorValueEnum.OR) {
+        parts.push("OR");
+      }
+      continue;
+    }
+
+    const operand = parseOperand(node);
+    const maybeNegated = pendingNot
+      ? {
+          kind: "not" as const,
+          child: operand,
+        }
+      : operand;
+
+    pendingNot = false;
+    parts.push(maybeNegated);
+  }
+
+  return collapseExpressionParts(parts);
+}
+
+function buildDefaultExpression(
+  limitNodesById: Map<string, LimitNode>,
+): ExpressionNode | null {
+  const limitIds = [...limitNodesById.keys()];
+
+  if (limitIds.length === 0) return null;
+
+  const operands: ExpressionNode[] = limitIds.map((limitId) => ({
+    kind: "limit",
+    limitId,
+  }));
+
+  if (operands.length === 1) return operands[0]!;
+
+  return {
+    kind: "operator",
+    operator: "AND",
+    children: operands,
+  };
+}
+
+function parseOperand(node: EvalLogicNode): ExpressionNode {
+  if (node.type === EvalLogicNodeTypeEnum.LIMIT) {
+    return {
+      kind: "limit",
+      limitId: node.id,
+    };
+  }
+
+  if (node.type === EvalLogicNodeTypeEnum.GROUP) {
+    const expression = parseLogicExpression(
+      node.children as EvalLogicNode[],
+    );
+
+    if (!expression) throw new Error(`Empty logic group "${node.id}".`);
+    return expression;
+  }
+
+  throw new Error("Unexpected operator where operand was expected.");
+}
+
+function collapseExpressionParts(
+  parts: Array<ExpressionNode | "AND" | "OR">,
+): ExpressionNode {
+  const isOperator = (part: ExpressionNode | "AND" | "OR") =>
+    part === "AND" || part === "OR";
+
+  parts.forEach((part, index) => {
+    const operatorPosition = index % 2 === 1;
+    if (operatorPosition !== isOperator(part)) {
+      throw new Error(
+        "Malformed logic expression: operands and operators must alternate.",
+      );
+    }
+  });
+
+  const first = parts[0];
+  if (!first || typeof first === "string")
+    throw new Error("Invalid logic expression.");
+
+  let accumulator: ExpressionNode = first;
+
+  for (let index = 1; index < parts.length; index += 2) {
+    const operator = parts[index];
+    const operand = parts[index + 1];
+
+    if (operator !== "AND" && operator !== "OR")
+      throw new Error("Invalid logic expression: operator expected.");
+    if (!operand || typeof operand === "string")
+      throw new Error("Invalid logic expression: operand expected.");
+
+    accumulator =
+      accumulator.kind === "operator" && accumulator.operator === operator
+        ? {
+            kind: "operator",
+            operator,
+            children: [...accumulator.children, operand],
+          }
+        : {
+            kind: "operator",
+            operator,
+            children: [accumulator, operand],
+          };
+  }
+
+  return accumulator;
+}
+
+async function createLogicGraphFromExpression(
+  context: BuildContext,
+  expression: ExpressionNode,
+): Promise<BooleanNodeProps> {
+  if (expression.kind === "limit") {
+    const limitNode = context.limitNodesById.get(expression.limitId);
+    if (!limitNode)
+      throw new Error(`Missing limit node "${expression.limitId}".`);
+    return limitNode;
+  }
+
+  // A nested 'not' returns the inner node; the operator loop below applies
+  // the 'NOT' on the connection into the logical node. A TOP-LEVEL 'not' is handled in
+  // addLogicToEditor, which strips it and sets 'NOT' on the result-input connection - so
+  // it never reaches here unwrapped.
+  if (expression.kind === "not")
+    return createLogicGraphFromExpression(context, expression.child);
+
+  const logicalNode =
+    expression.operator === "AND" ? new AndNode() : new OrNode();
+  await context.editor.addNode(logicalNode);
+
+  for (const childExpression of expression.children) {
+    const childNode = await createLogicGraphFromExpression(
+      context,
+      childExpression,
+    );
+    const connection = new BooleanConnection(
+      childNode,
+      "out",
+      logicalNode,
+      "in",
+      childExpression.kind === "not" ? "NOT" : "TRUE",
+    );
+    await context.editor.addConnection(connection);
+  }
+
+  return logicalNode;
+}
diff --git a/apps/web/src/modules/evaluation/graph/editor/deserialization/deserializeTestCase.ts b/apps/web/src/modules/evaluation/graph/editor/deserialization/deserializeTestCase.ts
new file mode 100644
index 00000000..17e7d51d
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/deserialization/deserializeTestCase.ts
@@ -0,0 +1,52 @@
+import type { LabelOption } from "@/modules/evaluation/graph/editor/controls/label";
+import { LimitNode } from "@/modules/evaluation/graph/editor/nodes/limit/limit";
+import type { AreaExtra } from "@/modules/evaluation/graph/editor/setup/createEditor";
+import type { Schemes } from "@/modules/evaluation/graph/editor/types";
+import {
+  deselectAllNodes,
+  type SelectableNodes,
+} from "@/modules/evaluation/graph/editor/utils/nodeSelection";
+import { removeAllNodes } from "@/modules/evaluation/graph/editor/utils/removeNodes";
+import type { EvalTestCaseFullCreateOrUpdate } from "@repo/schema";
+import type { NodeEditor } from "rete";
+import type { AreaPlugin } from "rete-area-plugin";
+import { addLimitToEditor } from "./deserializeLimits";
+import { addLogicToEditor } from "./deserializeLogicNodes";
+
+export async function deserializeTestCase(
+  editor: NodeEditor<Schemes>,
+  area: AreaPlugin<Schemes, AreaExtra>,
+  testCase: EvalTestCaseFullCreateOrUpdate,
+  labels: LabelOption[] = [],
+  selectableNodes?: SelectableNodes,
+) {
+  if (selectableNodes) {
+    await deselectAllNodes(selectableNodes, editor);
+  }
+
+  await removeAllNodes(editor);
+
+  const limitNodesById = new Map<string, LimitNode>();
+
+  for (const limit of testCase.limits ?? []) {
+    const { limitNode } = await addLimitToEditor(editor, area, limit, labels);
+
+    limitNodesById.set(limitNode.id, limitNode);
+  }
+
+  await addLogicToEditor(editor, testCase.logicNodes ?? [], limitNodesById, {
+    severity: testCase.severity,
+    type: testCase.type,
+  });
+
+  await updateAllNodes(editor, area);
+}
+
+async function updateAllNodes(
+  editor: NodeEditor<Schemes>,
+  area: AreaPlugin<Schemes, AreaExtra>,
+) {
+  await Promise.all(
+    editor.getNodes().map((node) => area.update("node", node.id)),
+  );
+}
diff --git a/apps/web/src/modules/evaluation/graph/editor/nodes/action/actionBase.ts b/apps/web/src/modules/evaluation/graph/editor/nodes/action/actionBase.ts
new file mode 100644
index 00000000..d653d52d
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/nodes/action/actionBase.ts
@@ -0,0 +1,43 @@
+import { AppNode } from "@/modules/evaluation/graph/editor/nodes/appNode";
+import type { EvalSeverityEnum } from "@repo/schema";
+import { BooleanSocket } from "@/modules/evaluation/graph/editor/sockets/booleanSocket";
+import type {
+  NoControls,
+  NoSockets,
+} from "@/modules/evaluation/graph/editor/types";
+import { ClassicPreset } from "rete";
+
+type Props = {
+  label: string;
+  evalSeverity: EvalSeverityEnum;
+  id?: string;
+};
+export abstract class ActionNodeBase extends AppNode<
+  { in: ClassicPreset.Socket },
+  NoSockets,
+  NoControls
+> {
+  controlsHeight = 0;
+  initialHeight = this.labelHeight + this.controlsHeight + this.socketHeight;
+  initialWidth = 5;
+
+  width = this.getSnappedSize(this.initialWidth);
+  height = this.getSnappedSize(this.initialHeight);
+
+  nodeGroup = "action" as const;
+
+  evalSeverity: EvalSeverityEnum;
+
+  constructor(props: Props) {
+    const { label, evalSeverity, id } = props;
+    super({ label, id });
+
+    this.addInput(
+      "in",
+      new ClassicPreset.Input(new BooleanSocket(), "IN", false),
+    );
+    this.evalSeverity = evalSeverity;
+  }
+
+  abstract clone(): ActionNodeBase;
+}
diff --git a/apps/web/src/modules/evaluation/graph/editor/nodes/action/alert.ts b/apps/web/src/modules/evaluation/graph/editor/nodes/action/alert.ts
new file mode 100644
index 00000000..8748e7d9
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/nodes/action/alert.ts
@@ -0,0 +1,20 @@
+import { EvalSeverityEnum } from "@repo/schema";
+import { ActionNodeBase } from "./actionBase";
+
+type Props = {
+  id?: string;
+};
+
+export class AlertNode extends ActionNodeBase {
+  constructor(props: Props = {}) {
+    super({
+      label: "Alert",
+      evalSeverity: EvalSeverityEnum.ALERT,
+      id: props.id,
+    });
+  }
+
+  clone() {
+    return new AlertNode();
+  }
+}
diff --git a/apps/web/src/modules/evaluation/graph/editor/nodes/action/warning.ts b/apps/web/src/modules/evaluation/graph/editor/nodes/action/warning.ts
new file mode 100644
index 00000000..ccb59dd4
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/nodes/action/warning.ts
@@ -0,0 +1,20 @@
+import { EvalSeverityEnum } from "@repo/schema";
+import { ActionNodeBase } from "./actionBase";
+
+type Props = {
+  id?: string;
+};
+
+export class WarningNode extends ActionNodeBase {
+  constructor(props: Props = {}) {
+    super({
+      label: "Warning",
+      evalSeverity: EvalSeverityEnum.WARNING,
+      id: props.id,
+    });
+  }
+
+  clone() {
+    return new WarningNode();
+  }
+}
diff --git a/apps/web/src/modules/evaluation/graph/editor/nodes/appNode.ts b/apps/web/src/modules/evaluation/graph/editor/nodes/appNode.ts
new file mode 100644
index 00000000..a1baa620
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/nodes/appNode.ts
@@ -0,0 +1,69 @@
+import { GRID } from "@/modules/evaluation/graph/editor/constants";
+import type { NodeGroup } from "@/modules/evaluation/graph/editor/types";
+import type { ValidationIssue } from "@/modules/evaluation/graph/editor/validation/types";
+import { ClassicPreset, type NodeId } from "rete";
+import { v7 as uuidv7 } from "uuid";
+
+export type NodePadding = {
+  top: number;
+  bottom: number;
+  left: number;
+  right: number;
+};
+
+export type NodeMinSize = {
+  width: number;
+  height: number;
+};
+
+type Props = {
+  label: string;
+  id?: string;
+};
+
+export abstract class AppNode<
+  I extends Record<string, ClassicPreset.Socket>,
+  O extends Record<string, ClassicPreset.Socket>,
+  C extends Record<string, ClassicPreset.Control>,
+> extends ClassicPreset.Node<I, O, C> {
+  abstract nodeGroup: NodeGroup;
+  allowedChildGroups: NodeGroup[] = [];
+
+  issues: ValidationIssue[] = [];
+
+  parent?: NodeId;
+
+  abstract width: number;
+  abstract height: number;
+
+  labelHeight: number = 2;
+  abstract controlsHeight: number;
+  socketHeight: number = 2;
+  abstract initialHeight: number;
+  abstract initialWidth: number;
+
+  constructor(props: Props) {
+    super(props.label);
+    this.id = props.id ?? uuidv7();
+  }
+
+  getSnappedSize(value: number | undefined = 1): number {
+    return value * GRID;
+  }
+
+  setIssues(issues: ValidationIssue[]) {
+    this.issues = issues;
+  }
+
+  clearIssues() {
+    this.issues = [];
+  }
+
+  get hasErrors() {
+    return this.issues.some((issue) => issue.level === "error");
+  }
+
+  get hasWarnings() {
+    return this.issues.some((issue) => issue.level === "warning");
+  }
+}
diff --git a/apps/web/src/modules/evaluation/graph/editor/nodes/limit/limit.ts b/apps/web/src/modules/evaluation/graph/editor/nodes/limit/limit.ts
new file mode 100644
index 00000000..1afa7a09
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/nodes/limit/limit.ts
@@ -0,0 +1,120 @@
+import { EnabledControl } from "@/modules/evaluation/graph/editor/controls/enabled";
+import {
+  LabelControl,
+  type LabelOption,
+} from "@/modules/evaluation/graph/editor/controls/label";
+import { NameControl } from "@/modules/evaluation/graph/editor/controls/name";
+import {
+  AppNode,
+  type NodeMinSize,
+  type NodePadding,
+} from "@/modules/evaluation/graph/editor/nodes/appNode";
+import { BooleanSocket } from "@/modules/evaluation/graph/editor/sockets/booleanSocket";
+import type {
+  NodeGroup,
+  NoSockets,
+} from "@/modules/evaluation/graph/editor/types";
+import { ClassicPreset } from "rete";
+
+type Props = {
+  id?: string;
+  name?: string;
+  label?: number | string | null;
+  parentLabel?: number | string | null;
+  enabled?: boolean;
+  /** Selectable label options, sourced from the project (see GraphEditor). */
+  labels?: LabelOption[];
+};
+
+export class LimitNode extends AppNode<
+  NoSockets,
+  { out: ClassicPreset.Socket },
+  {
+    name: NameControl;
+    label: LabelControl;
+    parentLabel: LabelControl;
+    enabled: EnabledControl;
+  }
+> {
+  controlsHeight = 7;
+  initialWidth = 15;
+  // 5 here is the empty space reserved for children (node will grow anyways when a child is added, but this way it looks better when it's empty)
+  initialHeight =
+    this.controlsHeight + this.labelHeight + this.socketHeight + 5;
+
+  width = this.getSnappedSize(this.initialWidth);
+  height = this.getSnappedSize(this.initialHeight);
+
+  nodeGroup = "limit" as const;
+  allowedChildGroups = ["rule"] as NodeGroup[];
+
+  constructor(props: Props = {}) {
+    const {
+      id,
+      name,
+      label = null,
+      parentLabel = null,
+      enabled = true,
+      labels = [],
+    } = props;
+    super({ label: "Limit", id });
+
+    this.addControl("name", new NameControl({ initialValue: name }));
+    this.addControl(
+      "label",
+      new LabelControl(labels, { required: true, initialValue: label }),
+    );
+    this.addControl(
+      "parentLabel",
+      new LabelControl(labels, { required: false, initialValue: parentLabel }),
+    );
+    this.addControl("enabled", new EnabledControl({ initialValue: enabled }));
+
+    this.addOutput("out", new ClassicPreset.Output(new BooleanSocket(), "OUT"));
+  }
+
+  get name() {
+    return this.controls.name.value;
+  }
+
+  get enabledValue() {
+    return this.controls.enabled.value;
+  }
+
+  get labelValue() {
+    return this.controls.label.value;
+  }
+
+  get parentLabelValue() {
+    return this.controls.parentLabel.value;
+  }
+
+  getPadding(): NodePadding {
+    return {
+      top: this.getSnappedSize(this.controlsHeight + this.labelHeight + 1),
+      bottom: this.getSnappedSize(this.socketHeight + 1),
+      left: this.getSnappedSize(),
+      right: this.getSnappedSize(),
+    };
+  }
+
+  getMinSize(): NodeMinSize {
+    return {
+      width: this.getSnappedSize(this.initialWidth),
+      height: this.getSnappedSize(this.initialHeight),
+    };
+  }
+
+  clone() {
+    // why: it looks like a copy-paste bug and surprises users whose pasted node shows an error.
+    // name is not cloned as the name will most likely be changed by the user, ommiting the name
+    // from the clone method forces the user to change the name.
+    return new LimitNode({
+      labels: [...this.controls.label.options],
+      name: "",
+      label: this.labelValue,
+      parentLabel: this.parentLabelValue,
+      enabled: this.enabledValue,
+    });
+  }
+}
diff --git a/apps/web/src/modules/evaluation/graph/editor/nodes/limitItem/area.ts b/apps/web/src/modules/evaluation/graph/editor/nodes/limitItem/area.ts
new file mode 100644
index 00000000..9c1ec02c
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/nodes/limitItem/area.ts
@@ -0,0 +1,97 @@
+import { PercentageRangeControl } from "@/modules/evaluation/graph/editor/controls/percentageRange";
+import { QuantifierTypeControl } from "@/modules/evaluation/graph/editor/controls/quantifierType";
+import { QuantifierUnitsControl } from "@/modules/evaluation/graph/editor/controls/quantifierUnits";
+import { RuleSocket } from "@/modules/evaluation/graph/editor/sockets/ruleSocket";
+import {
+  EvalLimitItemEdgeEnum,
+  EvalLimitItemParameterEnum,
+  EvalLimitItemQuantifierTypeEnum,
+  EvalLimitItemQuantifierUnitEnum,
+} from "@repo/schema";
+import { ClassicPreset } from "rete";
+import { LimitItemBase } from "./limitItemBase";
+
+type Props = {
+  id?: string;
+  limitFrom?: number;
+  limitTo?: number;
+  quantifierUnit?: EvalLimitItemQuantifierUnitEnum;
+  quantifierType?: EvalLimitItemQuantifierTypeEnum;
+  quantifierValue?: number;
+};
+
+export class AreaNode extends LimitItemBase<{
+  range: PercentageRangeControl;
+  units: QuantifierUnitsControl;
+  quantifier: QuantifierTypeControl;
+}> {
+  controlsHeight = 8;
+  initialHeight = this.labelHeight + this.controlsHeight + this.socketHeight;
+  initialWidth = 12;
+
+  width = this.getSnappedSize(this.initialWidth);
+  height = this.getSnappedSize(this.initialHeight);
+
+  constructor(props: Props = {}) {
+    const {
+      id,
+      limitFrom = 0,
+      limitTo = 100,
+      quantifierValue = 0,
+      quantifierUnit = EvalLimitItemQuantifierUnitEnum.PCS,
+      quantifierType = EvalLimitItemQuantifierTypeEnum.EXACT,
+    } = props;
+    super({ label: "Area", id });
+
+    this.addControl("range", new PercentageRangeControl([limitFrom, limitTo]));
+    this.addControl(
+      "units",
+      new QuantifierUnitsControl({ quantifierValue, quantifierUnit }),
+    );
+    this.addControl("quantifier", new QuantifierTypeControl(quantifierType));
+
+    this.addInput("in", new ClassicPreset.Input(new RuleSocket(), "IN"));
+    this.addOutput("out", new ClassicPreset.Output(new RuleSocket(), "OUT"));
+  }
+
+  get limitFrom() {
+    return this.controls.range.value[0];
+  }
+
+  get limitTo() {
+    return this.controls.range.value[1];
+  }
+
+  get parameter() {
+    return EvalLimitItemParameterEnum.AREA;
+  }
+
+  get targetEdge() {
+    return EvalLimitItemEdgeEnum.CENTER;
+  }
+
+  get parentEdge() {
+    return EvalLimitItemEdgeEnum.CENTER;
+  }
+
+  get quantifierType() {
+    return this.controls.quantifier.value;
+  }
+
+  get quantifierUnit() {
+    return this.controls.units.quantifierUnit;
+  }
+  get quantifierValue() {
+    return this.controls.units.value;
+  }
+
+  clone() {
+    return new AreaNode({
+      limitFrom: this.limitFrom,
+      limitTo: this.limitTo,
+      quantifierUnit: this.quantifierUnit,
+      quantifierType: this.quantifierType,
+      quantifierValue: this.quantifierValue,
+    });
+  }
+}
diff --git a/apps/web/src/modules/evaluation/graph/editor/nodes/limitItem/count.ts b/apps/web/src/modules/evaluation/graph/editor/nodes/limitItem/count.ts
new file mode 100644
index 00000000..e63ce8f1
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/nodes/limitItem/count.ts
@@ -0,0 +1,71 @@
+import { IntegerRangeControl } from "@/modules/evaluation/graph/editor/controls/integerRange";
+import { RuleSocket } from "@/modules/evaluation/graph/editor/sockets/ruleSocket";
+import {
+  EvalLimitItemEdgeEnum,
+  EvalLimitItemParameterEnum,
+  EvalLimitItemQuantifierTypeEnum,
+  EvalLimitItemQuantifierUnitEnum,
+} from "@repo/schema";
+import { ClassicPreset } from "rete";
+import { LimitItemBase } from "./limitItemBase";
+
+type Props = {
+  id?: string;
+  limitFrom?: number | null;
+  limitTo?: number | null;
+};
+
+export class CountNode extends LimitItemBase<{ count: IntegerRangeControl }> {
+  controlsHeight = 4;
+  initialHeight = this.labelHeight + this.controlsHeight + this.socketHeight;
+  initialWidth = 12;
+
+  width = this.getSnappedSize(this.initialWidth);
+  height = this.getSnappedSize(this.initialHeight);
+
+  constructor(props: Props = {}) {
+    const { id, limitFrom = null, limitTo = null } = props;
+
+    super({ label: "Count", id });
+    this.addControl("count", new IntegerRangeControl({ limitFrom, limitTo }));
+
+    this.addInput("in", new ClassicPreset.Input(new RuleSocket(), "IN"));
+    this.addOutput("out", new ClassicPreset.Output(new RuleSocket(), "OUT"));
+  }
+
+  get limitFrom() {
+    return this.controls.count.value.limitFrom;
+  }
+
+  get limitTo() {
+    return this.controls.count.value.limitTo;
+  }
+
+  get parameter() {
+    return EvalLimitItemParameterEnum.COUNT;
+  }
+
+  get targetEdge() {
+    return EvalLimitItemEdgeEnum.CENTER;
+  }
+
+  get parentEdge() {
+    return EvalLimitItemEdgeEnum.CENTER;
+  }
+
+  get quantifierType() {
+    return EvalLimitItemQuantifierTypeEnum.EXACT;
+  }
+
+  get quantifierUnit() {
+    return EvalLimitItemQuantifierUnitEnum.PERCENT;
+  }
+
+  get quantifierValue() {
+    return 100;
+  }
+
+  clone() {
+    return new CountNode({ limitFrom: this.limitFrom, limitTo: this.limitTo });
+  }
+}
diff --git a/apps/web/src/modules/evaluation/graph/editor/nodes/limitItem/limitItemBase.ts b/apps/web/src/modules/evaluation/graph/editor/nodes/limitItem/limitItemBase.ts
new file mode 100644
index 00000000..27e0ab86
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/nodes/limitItem/limitItemBase.ts
@@ -0,0 +1,36 @@
+import { AppNode } from "@/modules/evaluation/graph/editor/nodes/appNode";
+import type {
+  EvalLimitItemEdgeEnum,
+  EvalLimitItemParameterEnum,
+  EvalLimitItemQuantifierTypeEnum,
+  EvalLimitItemQuantifierUnitEnum,
+} from "@repo/schema";
+import { ClassicPreset } from "rete";
+
+type Props = {
+  label: string;
+  id?: string;
+};
+
+export abstract class LimitItemBase<
+  C extends Record<string, ClassicPreset.Control>,
+> extends AppNode<
+  { in: ClassicPreset.Socket },
+  { out: ClassicPreset.Socket },
+  C
+> {
+  nodeGroup = "rule" as const;
+
+  constructor(props: Props) {
+    super(props);
+  }
+
+  abstract get limitFrom(): number | null;
+  abstract get limitTo(): number | null;
+  abstract get parameter(): EvalLimitItemParameterEnum;
+  abstract get targetEdge(): EvalLimitItemEdgeEnum;
+  abstract get parentEdge(): EvalLimitItemEdgeEnum;
+  abstract get quantifierType(): EvalLimitItemQuantifierTypeEnum;
+  abstract get quantifierUnit(): EvalLimitItemQuantifierUnitEnum;
+  abstract get quantifierValue(): number;
+}
diff --git a/apps/web/src/modules/evaluation/graph/editor/nodes/limitItem/position.ts b/apps/web/src/modules/evaluation/graph/editor/nodes/limitItem/position.ts
new file mode 100644
index 00000000..d53dc2eb
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/nodes/limitItem/position.ts
@@ -0,0 +1,111 @@
+import { PercentageRangeControl } from "@/modules/evaluation/graph/editor/controls/percentageRange";
+import { PositionControl } from "@/modules/evaluation/graph/editor/controls/position";
+import { QuantifierTypeControl } from "@/modules/evaluation/graph/editor/controls/quantifierType";
+import { QuantifierUnitsControl } from "@/modules/evaluation/graph/editor/controls/quantifierUnits";
+import { RuleSocket } from "@/modules/evaluation/graph/editor/sockets/ruleSocket";
+import {
+  EvalLimitItemEdgeEnum,
+  EvalLimitItemParameterEnum,
+  EvalLimitItemQuantifierTypeEnum,
+  EvalLimitItemQuantifierUnitEnum,
+} from "@repo/schema";
+import { ClassicPreset } from "rete";
+import { LimitItemBase } from "./limitItemBase";
+
+type Props = {
+  id?: string;
+  limitFrom?: number;
+  limitTo?: number;
+  targetEdge?: EvalLimitItemEdgeEnum;
+  parentEdge?: EvalLimitItemEdgeEnum;
+  quantifierType?: EvalLimitItemQuantifierTypeEnum;
+  quantifierUnit?: EvalLimitItemQuantifierUnitEnum;
+  quantifierValue?: number;
+};
+
+export class PositionNode extends LimitItemBase<{
+  range: PercentageRangeControl;
+  units: QuantifierUnitsControl;
+  quantifier: QuantifierTypeControl;
+  position: PositionControl;
+}> {
+  controlsHeight = 9;
+  initialHeight = this.labelHeight + this.controlsHeight + this.socketHeight;
+  initialWidth = 12;
+
+  width = this.getSnappedSize(this.initialWidth);
+  height = this.getSnappedSize(this.initialHeight);
+
+  constructor(props: Props = {}) {
+    const {
+      id,
+      limitFrom = 0,
+      limitTo = 100,
+      targetEdge = EvalLimitItemEdgeEnum.TOP,
+      parentEdge = EvalLimitItemEdgeEnum.CENTER,
+      quantifierType = EvalLimitItemQuantifierTypeEnum.EXACT,
+      quantifierUnit = EvalLimitItemQuantifierUnitEnum.PCS,
+      quantifierValue = 0,
+    } = props;
+
+    super({ label: "Position", id });
+
+    this.addControl("range", new PercentageRangeControl([limitFrom, limitTo]));
+    this.addControl(
+      "units",
+      new QuantifierUnitsControl({ quantifierValue, quantifierUnit }),
+    );
+    this.addControl("quantifier", new QuantifierTypeControl(quantifierType));
+    this.addControl(
+      "position",
+      new PositionControl({ targetEdge, parentEdge }),
+    );
+
+    this.addInput("in", new ClassicPreset.Input(new RuleSocket(), "IN"));
+    this.addOutput("out", new ClassicPreset.Output(new RuleSocket(), "OUT"));
+  }
+
+  get limitFrom() {
+    return this.controls.range.value[0];
+  }
+
+  get limitTo() {
+    return this.controls.range.value[1];
+  }
+
+  get parameter() {
+    return EvalLimitItemParameterEnum.POSITION;
+  }
+
+  get targetEdge() {
+    return this.controls.position.value.targetEdge;
+  }
+
+  get parentEdge() {
+    return this.controls.position.value.parentEdge;
+  }
+
+  get quantifierType() {
+    return this.controls.quantifier.value;
+  }
+
+  get quantifierUnit() {
+    return this.controls.units.quantifierUnit;
+  }
+
+  get quantifierValue() {
+    return this.controls.units.value;
+  }
+
+  clone() {
+    return new PositionNode({
+      limitFrom: this.limitFrom,
+      limitTo: this.limitTo,
+      targetEdge: this.targetEdge,
+      parentEdge: this.parentEdge,
+      quantifierType: this.quantifierType,
+      quantifierUnit: this.quantifierUnit,
+      quantifierValue: this.quantifierValue,
+    });
+  }
+}
diff --git a/apps/web/src/modules/evaluation/graph/editor/nodes/logical/and.ts b/apps/web/src/modules/evaluation/graph/editor/nodes/logical/and.ts
new file mode 100644
index 00000000..13ecd59a
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/nodes/logical/and.ts
@@ -0,0 +1,15 @@
+import { LogicalNodeBase } from "./logicalBase";
+
+type Props = {
+  id?: string;
+};
+
+export class AndNode extends LogicalNodeBase {
+  constructor(props: Props = {}) {
+    super({ label: "AND", id: props.id });
+  }
+
+  clone() {
+    return new AndNode();
+  }
+}
diff --git a/apps/web/src/modules/evaluation/graph/editor/nodes/logical/logicalBase.ts b/apps/web/src/modules/evaluation/graph/editor/nodes/logical/logicalBase.ts
new file mode 100644
index 00000000..92a65d2c
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/nodes/logical/logicalBase.ts
@@ -0,0 +1,37 @@
+import { AppNode } from "@/modules/evaluation/graph/editor/nodes/appNode";
+import { BooleanSocket } from "@/modules/evaluation/graph/editor/sockets/booleanSocket";
+import type { NoControls } from "@/modules/evaluation/graph/editor/types";
+import { ClassicPreset } from "rete";
+
+type Props = {
+  label: string;
+  id?: string;
+};
+
+export abstract class LogicalNodeBase extends AppNode<
+  { in: ClassicPreset.Socket },
+  { out: ClassicPreset.Socket },
+  NoControls
+> {
+  controlsHeight = 0;
+  initialHeight = this.labelHeight + this.controlsHeight + this.socketHeight;
+  initialWidth = 5;
+
+  width = this.getSnappedSize(this.initialWidth);
+  height = this.getSnappedSize(this.initialHeight);
+
+  nodeGroup = "logical" as const;
+
+  constructor(props: Props) {
+    super(props);
+
+    this.addInput(
+      "in",
+      new ClassicPreset.Input(new BooleanSocket(), "IN", true),
+    );
+    this.addOutput(
+      "out",
+      new ClassicPreset.Output(new BooleanSocket(), "OUT", true),
+    );
+  }
+}
diff --git a/apps/web/src/modules/evaluation/graph/editor/nodes/logical/or.ts b/apps/web/src/modules/evaluation/graph/editor/nodes/logical/or.ts
new file mode 100644
index 00000000..0c9d373c
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/nodes/logical/or.ts
@@ -0,0 +1,15 @@
+import { LogicalNodeBase } from "./logicalBase";
+
+type Props = {
+  id?: string;
+};
+
+export class OrNode extends LogicalNodeBase {
+  constructor(props: Props = {}) {
+    super({ label: "OR", id: props.id });
+  }
+
+  clone() {
+    return new OrNode();
+  }
+}
diff --git a/apps/web/src/modules/evaluation/graph/editor/nodes/result/result.ts b/apps/web/src/modules/evaluation/graph/editor/nodes/result/result.ts
new file mode 100644
index 00000000..073a9232
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/nodes/result/result.ts
@@ -0,0 +1,36 @@
+import { AppNode } from "@/modules/evaluation/graph/editor/nodes/appNode";
+import { BooleanSocket } from "@/modules/evaluation/graph/editor/sockets/booleanSocket";
+import type { NoControls } from "@/modules/evaluation/graph/editor/types";
+import { ClassicPreset } from "rete";
+
+export class ResultNode extends AppNode<
+  { in: ClassicPreset.Socket },
+  { out: ClassicPreset.Socket },
+  NoControls
+> {
+  controlsHeight = 0;
+  initialHeight = this.labelHeight + this.socketHeight + this.controlsHeight;
+  initialWidth = 5;
+
+  width = this.getSnappedSize(this.initialWidth);
+  height = this.getSnappedSize(this.initialHeight);
+
+  nodeGroup = "result" as const;
+
+  constructor() {
+    super({ label: "Result" });
+
+    this.addInput(
+      "in",
+      new ClassicPreset.Input(new BooleanSocket(), "IN", false),
+    );
+    this.addOutput(
+      "out",
+      new ClassicPreset.Output(new BooleanSocket(), "OUT", false),
+    );
+  }
+
+  clone() {
+    return new ResultNode();
+  }
+}
diff --git a/apps/web/src/modules/evaluation/graph/editor/presets/customScopePreset.ts b/apps/web/src/modules/evaluation/graph/editor/presets/customScopePreset.ts
new file mode 100644
index 00000000..3b049706
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/presets/customScopePreset.ts
@@ -0,0 +1,265 @@
+import type { AreaExtra } from "@/modules/evaluation/graph/editor/setup/createEditor";
+import type {
+  NodeProps,
+  Schemes,
+} from "@/modules/evaluation/graph/editor/types";
+import {
+  canBeChildOf,
+  canHaveChildren,
+} from "@/modules/evaluation/graph/editor/utils/scopes";
+import type { NodeEditor, NodeId } from "rete";
+import type { AreaPlugin } from "rete-area-plugin";
+import type { ScopesPlugin } from "rete-scopes-plugin";
+
+type ScopePreset = Parameters<ScopesPlugin<Schemes>["addPreset"]>[0];
+
+function getNodeViewBox(
+  area: AreaPlugin<Schemes, AreaExtra>,
+  editor: NodeEditor<Schemes>,
+  nodeId: NodeId,
+) {
+  const node = editor.getNode(nodeId);
+  const view = area.nodeViews.get(nodeId);
+
+  if (!node || !view) return null;
+
+  return {
+    node,
+    view,
+    x: view.position.x,
+    y: view.position.y,
+    width: node.width,
+    height: node.height,
+  };
+}
+
+function isPointInsideBox(
+  point: { x: number; y: number },
+  box: { x: number; y: number; width: number; height: number },
+): boolean {
+  return (
+    point.x >= box.x &&
+    point.x <= box.x + box.width &&
+    point.y >= box.y &&
+    point.y <= box.y + box.height
+  );
+}
+
+function getCompatibleParentIds(
+  editor: NodeEditor<Schemes>,
+  draggedIds: NodeId[],
+): Set<NodeId> {
+  const draggedNodes = draggedIds
+    .map((id) => editor.getNode(id))
+    .filter((node): node is NodeProps => !!node);
+
+  const compatibleParentIds = new Set<NodeId>();
+
+  for (const candidate of editor.getNodes()) {
+    if (draggedIds.includes(candidate.id)) continue;
+    if (!canHaveChildren(candidate)) continue;
+
+    const acceptsAllDraggedNodes = draggedNodes.every((child) =>
+      canBeChildOf(child, candidate),
+    );
+
+    if (acceptsAllDraggedNodes) {
+      compatibleParentIds.add(candidate.id);
+    }
+  }
+
+  return compatibleParentIds;
+}
+
+function clearScopeClasses(
+  area: AreaPlugin<Schemes, AreaExtra>,
+  editor: NodeEditor<Schemes>,
+) {
+  for (const node of editor.getNodes()) {
+    const view = area.nodeViews.get(node.id);
+    const element = view?.element;
+
+    if (!element) continue;
+
+    element.classList.remove(
+      "opacity-25",
+      "transition-opacity",
+      "duration-150",
+    );
+  }
+}
+
+function applyScopeClasses(
+  area: AreaPlugin<Schemes, AreaExtra>,
+  editor: NodeEditor<Schemes>,
+  draggedIds: NodeId[],
+) {
+  clearScopeClasses(area, editor);
+
+  const compatibleParentIds = getCompatibleParentIds(editor, draggedIds);
+
+  for (const node of editor.getNodes()) {
+    const view = area.nodeViews.get(node.id);
+    const element = view?.element;
+
+    if (!element) continue;
+
+    if (draggedIds.includes(node.id)) continue;
+    if (compatibleParentIds.has(node.id)) continue;
+
+    element.classList.add("opacity-25", "transition-opacity", "duration-150");
+  }
+}
+
+async function reassignParentWithRules(args: {
+  ids: NodeId[];
+  pointer: { x: number; y: number };
+  area: AreaPlugin<Schemes, AreaExtra>;
+  editor: NodeEditor<Schemes>;
+  scopes: ScopesPlugin<Schemes>;
+}) {
+  const { ids, pointer, area, editor, scopes } = args;
+
+  if (!ids.length) return;
+
+  const movedNodes = ids
+    .map((id) => editor.getNode(id))
+    .filter((node): node is NodeProps => !!node);
+
+  if (!movedNodes.length) return;
+
+  const holderChildren = Array.from(area.area.content.holder.childNodes);
+
+  const candidateParents = editor
+    .getNodes()
+    .filter((node) => !ids.includes(node.id))
+    .filter((node) => canHaveChildren(node))
+    .map((node) => {
+      const box = getNodeViewBox(area, editor, node.id);
+      if (!box) return null;
+      if (!isPointInsideBox(pointer, box)) return null;
+
+      return {
+        node,
+        zIndex: holderChildren.indexOf(box.view.element),
+      };
+    })
+    .filter((item): item is { node: NodeProps; zIndex: number } => !!item)
+    .sort((a, b) => b.zIndex - a.zIndex)
+    .map((item) => item.node);
+
+  const affectedParentIds = new Set<NodeId>();
+
+  for (const child of movedNodes) {
+    const previousParentId = child.parent;
+
+    if (previousParentId) {
+      affectedParentIds.add(previousParentId);
+    }
+
+    child.parent = undefined;
+
+    const newParent = candidateParents.find((candidate) =>
+      canBeChildOf(child, candidate),
+    );
+
+    if (newParent) {
+      child.parent = newParent.id;
+      affectedParentIds.add(newParent.id);
+    }
+  }
+
+  for (const parentId of affectedParentIds) {
+    await scopes.update(parentId);
+  }
+}
+
+export function setupCustomScopePreset(
+  scopes: ScopesPlugin<Schemes>,
+  timeout = 250,
+): ScopePreset {
+  return (_params, context) => {
+    const area = context.area as AreaPlugin<Schemes, AreaExtra>;
+    const editor = context.editor as NodeEditor<Schemes>;
+
+    let picked: { timeoutId: number } | null = null;
+    let scopeCandidateIds: NodeId[] = [];
+
+    function cancelPick() {
+      if (!picked) return;
+
+      window.clearTimeout(picked.timeoutId);
+      picked = null;
+    }
+
+    function beginPick(id: NodeId) {
+      cancelPick();
+
+      const timeoutId = window.setTimeout(() => {
+        const selectedIds = editor
+          .getNodes()
+          .filter((node) => node.selected)
+          .map((node) => node.id);
+
+        const ids = selectedIds.length ? selectedIds : [id];
+
+        scopeCandidateIds = ids;
+
+        applyScopeClasses(area, editor, ids);
+
+        void scopes.emit({
+          type: "scopepicked",
+          data: { ids },
+        });
+      }, timeout);
+
+      picked = { timeoutId };
+    }
+
+    function releasePicked(): NodeId[] {
+      const ids = [...scopeCandidateIds];
+
+      cancelPick();
+      scopeCandidateIds = [];
+
+      clearScopeClasses(area, editor);
+
+      void scopes.emit({
+        type: "scopereleased",
+        data: { ids },
+      });
+
+      return ids;
+    }
+
+    area.addPipe(async (ctx) => {
+      if (!ctx || typeof ctx !== "object" || !("type" in ctx)) return ctx;
+
+      if (ctx.type === "nodepicked") {
+        beginPick(ctx.data.id);
+        return ctx;
+      }
+
+      if (ctx.type === "nodetranslated") {
+        cancelPick();
+        return ctx;
+      }
+
+      if (ctx.type === "nodedragged") {
+        const ids = releasePicked();
+
+        await reassignParentWithRules({
+          ids,
+          pointer: area.area.pointer,
+          area,
+          editor,
+          scopes,
+        });
+
+        return ctx;
+      }
+
+      return ctx;
+    });
+  };
+}
diff --git a/apps/web/src/modules/evaluation/graph/editor/serialization/__tests__/serializeLimitItems.test.ts b/apps/web/src/modules/evaluation/graph/editor/serialization/__tests__/serializeLimitItems.test.ts
new file mode 100644
index 00000000..2fcb0245
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/serialization/__tests__/serializeLimitItems.test.ts
@@ -0,0 +1,98 @@
+import { LimitItemConnection } from "@/modules/evaluation/graph/editor/connections/limitItemConnection";
+import { CountNode } from "@/modules/evaluation/graph/editor/nodes/limitItem/count";
+import { serializeLimitItemNode } from "@/modules/evaluation/graph/editor/serialization/serializeLimitItems";
+import { createTestEditor } from "@/modules/evaluation/graph/editor/utils/__tests__/testEditor";
+import { EvalLimitItemOperatorEnum } from "@repo/schema";
+import { describe, expect, it } from "vitest";
+
+describe("serializeLimitItemNode", () => {
+  it("defaults operator to AND when no outgoing LimitItemConnection exists", () => {
+    const editor = createTestEditor();
+    const node = new CountNode({ limitFrom: 1, limitTo: 5 });
+
+    const result = serializeLimitItemNode(editor, node);
+
+    expect(result.operator).toBe("AND");
+  });
+
+  it("picks up OR from a LimitItemConnection", async () => {
+    const editor = createTestEditor();
+    const a = new CountNode({ limitFrom: 1, limitTo: 2 });
+    const b = new CountNode({ limitFrom: 3, limitTo: 4 });
+
+    await editor.addNode(a);
+    await editor.addNode(b);
+    await editor.addConnection(
+      new LimitItemConnection(a, "out", b, "in", EvalLimitItemOperatorEnum.OR),
+    );
+
+    const result = serializeLimitItemNode(editor, a);
+
+    expect(result.operator).toBe("OR");
+  });
+
+  it("picks up AND from an explicit AND LimitItemConnection", async () => {
+    const editor = createTestEditor();
+    const a = new CountNode({ limitFrom: 1, limitTo: 2 });
+    const b = new CountNode({ limitFrom: 3, limitTo: 4 });
+
+    await editor.addNode(a);
+    await editor.addNode(b);
+    await editor.addConnection(
+      new LimitItemConnection(a, "out", b, "in", EvalLimitItemOperatorEnum.AND),
+    );
+
+    const result = serializeLimitItemNode(editor, a);
+
+    expect(result.operator).toBe("AND");
+  });
+
+  it("maps all fields through from the node", () => {
+    const editor = createTestEditor();
+    const node = new CountNode({ limitFrom: 2, limitTo: 8 });
+
+    const result = serializeLimitItemNode(editor, node);
+
+    expect(result).toMatchObject({
+      id: node.id,
+      limitFrom: 2,
+      limitTo: 8,
+      parameter: "COUNT",
+      operator: "AND",
+      quantifierType: "EXACT",
+      quantifierUnit: "PERCENT",
+      quantifierValue: 100,
+    });
+  });
+
+  it("preserves null limitFrom and limitTo when node has no range set", () => {
+    const editor = createTestEditor();
+    const node = new CountNode();
+
+    const result = serializeLimitItemNode(editor, node);
+
+    expect(result.limitFrom).toBeNull();
+    expect(result.limitTo).toBeNull();
+  });
+
+  it("uses the operator of the outgoing connection, not the incoming one", async () => {
+    const editor = createTestEditor();
+    const a = new CountNode();
+    const b = new CountNode();
+    const c = new CountNode();
+
+    await editor.addNode(a);
+    await editor.addNode(b);
+    await editor.addNode(c);
+    await editor.addConnection(
+      new LimitItemConnection(a, "out", b, "in", EvalLimitItemOperatorEnum.OR),
+    );
+    await editor.addConnection(
+      new LimitItemConnection(b, "out", c, "in", EvalLimitItemOperatorEnum.AND),
+    );
+
+    expect(serializeLimitItemNode(editor, a).operator).toBe("OR");
+    expect(serializeLimitItemNode(editor, b).operator).toBe("AND");
+    expect(serializeLimitItemNode(editor, c).operator).toBe("AND");
+  });
+});
diff --git a/apps/web/src/modules/evaluation/graph/editor/serialization/__tests__/serializeLimits.test.ts b/apps/web/src/modules/evaluation/graph/editor/serialization/__tests__/serializeLimits.test.ts
new file mode 100644
index 00000000..2240ab70
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/serialization/__tests__/serializeLimits.test.ts
@@ -0,0 +1,188 @@
+import { BooleanConnection } from "@/modules/evaluation/graph/editor/connections/booleanConnection";
+import { LimitItemConnection } from "@/modules/evaluation/graph/editor/connections/limitItemConnection";
+import { AlertNode } from "@/modules/evaluation/graph/editor/nodes/action/alert";
+import { WarningNode } from "@/modules/evaluation/graph/editor/nodes/action/warning";
+import { LimitNode } from "@/modules/evaluation/graph/editor/nodes/limit/limit";
+import { CountNode } from "@/modules/evaluation/graph/editor/nodes/limitItem/count";
+import {
+  serializeLimitNode,
+  serializeLimits,
+} from "@/modules/evaluation/graph/editor/serialization/serializeLimits";
+import { createTestEditor } from "@/modules/evaluation/graph/editor/utils/__tests__/testEditor";
+import { describe, expect, it } from "vitest";
+
+describe("serializeLimits", () => {
+  it("returns an empty array when no LimitNodes are in the editor", () => {
+    const editor = createTestEditor();
+    expect(serializeLimits(editor)).toEqual([]);
+  });
+
+  it("returns one entry per LimitNode", async () => {
+    const editor = createTestEditor();
+    await editor.addNode(new LimitNode({ label: 1 }));
+    await editor.addNode(new LimitNode({ label: 2 }));
+
+    expect(serializeLimits(editor)).toHaveLength(2);
+  });
+
+  it("serializes each limit with the correct targetLabelId", async () => {
+    const editor = createTestEditor();
+    await editor.addNode(new LimitNode({ label: 1 }));
+
+    const [result] = serializeLimits(editor);
+    expect(result?.targetLabelId).toBe(1);
+  });
+});
+
+describe("serializeLimitNode", () => {
+  it("sets targetLabelId from the label value", async () => {
+    const editor = createTestEditor();
+    const limit = new LimitNode({ label: 1 });
+    await editor.addNode(limit);
+
+    expect(serializeLimitNode(editor, limit).targetLabelId).toBe(1);
+  });
+
+  it("sets targetParentLabelId to null when no parent label is set", async () => {
+    const editor = createTestEditor();
+    const limit = new LimitNode({ label: 1 });
+    await editor.addNode(limit);
+
+    expect(serializeLimitNode(editor, limit).targetParentLabelId).toBeNull();
+  });
+
+  it("sets targetParentLabelId when a parent label is provided", async () => {
+    const editor = createTestEditor();
+    const limit = new LimitNode({ label: 1, parentLabel: 2 });
+    await editor.addNode(limit);
+
+    expect(serializeLimitNode(editor, limit).targetParentLabelId).toBe(2);
+  });
+
+  it("includes LimitItem children that have the limit as their parent", async () => {
+    const editor = createTestEditor();
+    const limit = new LimitNode({ label: 1 });
+    const itemA = new CountNode({ limitFrom: 0, limitTo: 10 });
+    const itemB = new CountNode({ limitFrom: 11, limitTo: 20 });
+    itemA.parent = limit.id;
+    itemB.parent = limit.id;
+
+    await editor.addNode(limit);
+    await editor.addNode(itemA);
+    await editor.addNode(itemB);
+
+    expect(serializeLimitNode(editor, limit).limitItems).toHaveLength(2);
+  });
+
+  it("excludes LimitItem nodes that belong to a different limit", async () => {
+    const editor = createTestEditor();
+    const limitA = new LimitNode({ label: 1 });
+    const limitB = new LimitNode({ label: 2 });
+    const item = new CountNode();
+    item.parent = limitB.id;
+
+    await editor.addNode(limitA);
+    await editor.addNode(limitB);
+    await editor.addNode(item);
+
+    expect(serializeLimitNode(editor, limitA).limitItems).toHaveLength(0);
+  });
+
+  it("orders limit items by their connection chain, not insertion order", async () => {
+    const editor = createTestEditor();
+    const limit = new LimitNode({ label: 1 });
+    const itemA = new CountNode({ limitFrom: 0, limitTo: 10 });
+    const itemB = new CountNode({ limitFrom: 11, limitTo: 20 });
+    const itemC = new CountNode({ limitFrom: 21, limitTo: 30 });
+    itemA.parent = limit.id;
+    itemB.parent = limit.id;
+    itemC.parent = limit.id;
+
+    await editor.addNode(limit);
+    // Add nodes out of chain order to prove insertion order is not used.
+    await editor.addNode(itemC);
+    await editor.addNode(itemA);
+    await editor.addNode(itemB);
+
+    // Chain: A -> B -> C
+    await editor.addConnection(
+      new LimitItemConnection(itemA, "out", itemB, "in"),
+    );
+    await editor.addConnection(
+      new LimitItemConnection(itemB, "out", itemC, "in"),
+    );
+
+    const ids = serializeLimitNode(editor, limit).limitItems.map(
+      (item) => item.id,
+    );
+    expect(ids).toEqual([itemA.id, itemB.id, itemC.id]);
+  });
+
+  it("keeps disconnected limit items rather than dropping them", async () => {
+    const editor = createTestEditor();
+    const limit = new LimitNode({ label: 1 });
+    const itemA = new CountNode({ limitFrom: 0, limitTo: 10 });
+    const itemB = new CountNode({ limitFrom: 11, limitTo: 20 });
+    itemA.parent = limit.id;
+    itemB.parent = limit.id;
+
+    await editor.addNode(limit);
+    await editor.addNode(itemA);
+    await editor.addNode(itemB);
+
+    // No connection between them — both must survive serialization.
+    expect(serializeLimitNode(editor, limit).limitItems).toHaveLength(2);
+  });
+
+  it("resolves ALERT severity from a connected AlertNode", async () => {
+    const editor = createTestEditor();
+    const limit = new LimitNode({ label: 1 });
+    const alert = new AlertNode();
+
+    await editor.addNode(limit);
+    await editor.addNode(alert);
+    await editor.addConnection(
+      new BooleanConnection(limit, "out", alert, "in"),
+    );
+
+    expect(serializeLimitNode(editor, limit).severity).toBe("ALERT");
+  });
+
+  it("resolves WARNING severity from a connected WarningNode", async () => {
+    const editor = createTestEditor();
+    const limit = new LimitNode({ label: 1 });
+    const warning = new WarningNode();
+
+    await editor.addNode(limit);
+    await editor.addNode(warning);
+    await editor.addConnection(
+      new BooleanConnection(limit, "out", warning, "in"),
+    );
+
+    expect(serializeLimitNode(editor, limit).severity).toBe("WARNING");
+  });
+
+  it("returns null severity when no action node is connected", async () => {
+    const editor = createTestEditor();
+    const limit = new LimitNode({ label: 1 });
+    await editor.addNode(limit);
+
+    expect(serializeLimitNode(editor, limit).severity).toBeNull();
+  });
+
+  it("throws when label is missing", async () => {
+    const editor = createTestEditor();
+    const limit = new LimitNode();
+    await editor.addNode(limit);
+
+    expect(() => serializeLimitNode(editor, limit)).toThrow();
+  });
+
+  it("uses the id from the limit node itself", async () => {
+    const editor = createTestEditor();
+    const limit = new LimitNode({ label: 1 });
+    await editor.addNode(limit);
+
+    expect(serializeLimitNode(editor, limit).id).toBe(limit.id);
+  });
+});
diff --git a/apps/web/src/modules/evaluation/graph/editor/serialization/__tests__/serializeLogicNodes.test.ts b/apps/web/src/modules/evaluation/graph/editor/serialization/__tests__/serializeLogicNodes.test.ts
new file mode 100644
index 00000000..f7a636af
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/serialization/__tests__/serializeLogicNodes.test.ts
@@ -0,0 +1,313 @@
+import { BooleanConnection } from "@/modules/evaluation/graph/editor/connections/booleanConnection";
+import { AlertNode } from "@/modules/evaluation/graph/editor/nodes/action/alert";
+import { WarningNode } from "@/modules/evaluation/graph/editor/nodes/action/warning";
+import { LimitNode } from "@/modules/evaluation/graph/editor/nodes/limit/limit";
+import { AndNode } from "@/modules/evaluation/graph/editor/nodes/logical/and";
+import { OrNode } from "@/modules/evaluation/graph/editor/nodes/logical/or";
+import { ResultNode } from "@/modules/evaluation/graph/editor/nodes/result/result";
+import { serializeLogicNodes } from "@/modules/evaluation/graph/editor/serialization/serializeLogicNodes";
+import { createTestEditor } from "@/modules/evaluation/graph/editor/utils/__tests__/testEditor";
+import { EvalLogicNodeTypeEnum, type EvalLogicNode } from "@repo/schema";
+import { describe, expect, it } from "vitest";
+
+function operatorValues(nodes: EvalLogicNode[]) {
+  return nodes
+    .filter(
+      (
+        n,
+      ): n is Extract<
+        EvalLogicNode,
+        { type: EvalLogicNodeTypeEnum.OPERATOR }
+      > => n.type === EvalLogicNodeTypeEnum.OPERATOR,
+    )
+    .map((n) => n.operatorValue);
+}
+
+describe("serializeLogicNodes — no graph", () => {
+  it("returns CHECK with empty logicNodes when editor has no ResultNode", () => {
+    const editor = createTestEditor();
+    expect(serializeLogicNodes(editor)).toEqual({
+      type: "CHECK",
+      severity: null,
+      logicNodes: [],
+    });
+  });
+
+  it("returns CHECK with empty logicNodes when ResultNode has no incoming connection", async () => {
+    const editor = createTestEditor();
+    await editor.addNode(new ResultNode());
+
+    const result = serializeLogicNodes(editor);
+    expect(result.type).toBe("CHECK");
+    expect(result.logicNodes).toEqual([]);
+  });
+});
+
+describe("serializeLogicNodes — type resolution", () => {
+  it("always returns CHECK regardless of the result connection modifier", async () => {
+    const editor = createTestEditor();
+    const limit = new LimitNode({ label: 1 });
+    const resultNode = new ResultNode();
+
+    await editor.addNode(limit);
+    await editor.addNode(resultNode);
+    await editor.addConnection(
+      new BooleanConnection(limit, "out", resultNode, "in"),
+    );
+
+    expect(serializeLogicNodes(editor).type).toBe("CHECK");
+  });
+
+  it("still returns CHECK when the result connection uses NOT (NOT becomes a logic operator, not DEFECT)", async () => {
+    const editor = createTestEditor();
+    const limit = new LimitNode({ label: 1 });
+    const resultNode = new ResultNode();
+
+    await editor.addNode(limit);
+    await editor.addNode(resultNode);
+    await editor.addConnection(
+      new BooleanConnection(limit, "out", resultNode, "in", "NOT"),
+    );
+
+    expect(serializeLogicNodes(editor).type).toBe("CHECK");
+  });
+});
+
+describe("serializeLogicNodes — severity resolution", () => {
+  it("returns null severity when no action node follows the ResultNode", async () => {
+    const editor = createTestEditor();
+    const limit = new LimitNode({ label: 1 });
+    const resultNode = new ResultNode();
+
+    await editor.addNode(limit);
+    await editor.addNode(resultNode);
+    await editor.addConnection(
+      new BooleanConnection(limit, "out", resultNode, "in"),
+    );
+
+    expect(serializeLogicNodes(editor).severity).toBeNull();
+  });
+
+  it("returns ALERT severity when an AlertNode follows the ResultNode", async () => {
+    const editor = createTestEditor();
+    const limit = new LimitNode({ label: 1 });
+    const resultNode = new ResultNode();
+    const alert = new AlertNode();
+
+    await editor.addNode(limit);
+    await editor.addNode(resultNode);
+    await editor.addNode(alert);
+    await editor.addConnection(
+      new BooleanConnection(limit, "out", resultNode, "in"),
+    );
+    await editor.addConnection(
+      new BooleanConnection(resultNode, "out", alert, "in"),
+    );
+
+    expect(serializeLogicNodes(editor).severity).toBe("ALERT");
+  });
+
+  it("returns WARNING severity when a WarningNode follows the ResultNode", async () => {
+    const editor = createTestEditor();
+    const limit = new LimitNode({ label: 1 });
+    const resultNode = new ResultNode();
+    const warning = new WarningNode();
+
+    await editor.addNode(limit);
+    await editor.addNode(resultNode);
+    await editor.addNode(warning);
+    await editor.addConnection(
+      new BooleanConnection(limit, "out", resultNode, "in"),
+    );
+    await editor.addConnection(
+      new BooleanConnection(resultNode, "out", warning, "in"),
+    );
+
+    expect(serializeLogicNodes(editor).severity).toBe("WARNING");
+  });
+});
+
+describe("serializeLogicNodes — single limit", () => {
+  it("emits a single LIMIT payload for a direct Limit → Result connection", async () => {
+    const editor = createTestEditor();
+    const limit = new LimitNode({ label: 1 });
+    const resultNode = new ResultNode();
+
+    await editor.addNode(limit);
+    await editor.addNode(resultNode);
+    await editor.addConnection(
+      new BooleanConnection(limit, "out", resultNode, "in"),
+    );
+
+    const { logicNodes } = serializeLogicNodes(editor);
+    expect(logicNodes).toEqual([{ id: limit.id, type: "LIMIT" }]);
+  });
+});
+
+describe("serializeLogicNodes — logical operators", () => {
+  it("emits LIMIT OPERATOR(AND) LIMIT for two limits joined by AndNode", async () => {
+    const editor = createTestEditor();
+    const limitA = new LimitNode({ label: 1 });
+    const limitB = new LimitNode({ label: 2 });
+    const and = new AndNode();
+    const resultNode = new ResultNode();
+
+    await editor.addNode(limitA);
+    await editor.addNode(limitB);
+    await editor.addNode(and);
+    await editor.addNode(resultNode);
+    await editor.addConnection(new BooleanConnection(limitA, "out", and, "in"));
+    await editor.addConnection(new BooleanConnection(limitB, "out", and, "in"));
+    await editor.addConnection(
+      new BooleanConnection(and, "out", resultNode, "in"),
+    );
+
+    const { logicNodes } = serializeLogicNodes(editor);
+    expect(logicNodes.map((n) => n.type)).toEqual([
+      "LIMIT",
+      "OPERATOR",
+      "LIMIT",
+    ]);
+    expect(operatorValues(logicNodes)).toEqual(["AND"]);
+  });
+
+  it("emits LIMIT OPERATOR(OR) LIMIT for two limits joined by OrNode", async () => {
+    const editor = createTestEditor();
+    const limitA = new LimitNode({ label: 1 });
+    const limitB = new LimitNode({ label: 2 });
+    const or = new OrNode();
+    const resultNode = new ResultNode();
+
+    await editor.addNode(limitA);
+    await editor.addNode(limitB);
+    await editor.addNode(or);
+    await editor.addNode(resultNode);
+    await editor.addConnection(new BooleanConnection(limitA, "out", or, "in"));
+    await editor.addConnection(new BooleanConnection(limitB, "out", or, "in"));
+    await editor.addConnection(
+      new BooleanConnection(or, "out", resultNode, "in"),
+    );
+
+    const { logicNodes } = serializeLogicNodes(editor);
+    expect(logicNodes.map((n) => n.type)).toEqual([
+      "LIMIT",
+      "OPERATOR",
+      "LIMIT",
+    ]);
+    expect(operatorValues(logicNodes)).toEqual(["OR"]);
+  });
+});
+
+describe("serializeLogicNodes — grouping", () => {
+  it("wraps the OR sub-expression in a GROUP when nested inside AND", async () => {
+    // (A OR B) AND C — the OR side must be a GROUP because it differs from the parent AND
+    const editor = createTestEditor();
+    const limitA = new LimitNode({ label: 1 });
+    const limitB = new LimitNode({ label: 2 });
+    const limitC = new LimitNode({ label: 3 });
+    const or = new OrNode();
+    const and = new AndNode();
+    const resultNode = new ResultNode();
+
+    await editor.addNode(limitA);
+    await editor.addNode(limitB);
+    await editor.addNode(limitC);
+    await editor.addNode(or);
+    await editor.addNode(and);
+    await editor.addNode(resultNode);
+    await editor.addConnection(new BooleanConnection(limitA, "out", or, "in"));
+    await editor.addConnection(new BooleanConnection(limitB, "out", or, "in"));
+    await editor.addConnection(new BooleanConnection(or, "out", and, "in"));
+    await editor.addConnection(new BooleanConnection(limitC, "out", and, "in"));
+    await editor.addConnection(
+      new BooleanConnection(and, "out", resultNode, "in"),
+    );
+
+    const { logicNodes } = serializeLogicNodes(editor);
+    expect(logicNodes.some((n) => n.type === "GROUP")).toBe(true);
+  });
+
+  it("does not add a GROUP when all operators at the same level are the same type", async () => {
+    // A AND B AND C — flat, no grouping needed
+    const editor = createTestEditor();
+    const limitA = new LimitNode({ label: 1 });
+    const limitB = new LimitNode({ label: 2 });
+    const limitC = new LimitNode({ label: 3 });
+    const andOuter = new AndNode();
+    const andInner = new AndNode();
+    const resultNode = new ResultNode();
+
+    await editor.addNode(limitA);
+    await editor.addNode(limitB);
+    await editor.addNode(limitC);
+    await editor.addNode(andOuter);
+    await editor.addNode(andInner);
+    await editor.addNode(resultNode);
+    await editor.addConnection(
+      new BooleanConnection(limitA, "out", andInner, "in"),
+    );
+    await editor.addConnection(
+      new BooleanConnection(limitB, "out", andInner, "in"),
+    );
+    await editor.addConnection(
+      new BooleanConnection(andInner, "out", andOuter, "in"),
+    );
+    await editor.addConnection(
+      new BooleanConnection(limitC, "out", andOuter, "in"),
+    );
+    await editor.addConnection(
+      new BooleanConnection(andOuter, "out", resultNode, "in"),
+    );
+
+    const { logicNodes } = serializeLogicNodes(editor);
+    expect(logicNodes.every((n) => n.type !== "GROUP")).toBe(true);
+  });
+});
+
+describe("serializeLogicNodes — NOT modifier on child connections", () => {
+  it("prepends a NOT OPERATOR before a limit whose incoming connection has NOT", async () => {
+    const editor = createTestEditor();
+    const limit = new LimitNode({ label: 1 });
+    const resultNode = new ResultNode();
+
+    await editor.addNode(limit);
+    await editor.addNode(resultNode);
+    await editor.addConnection(
+      new BooleanConnection(limit, "out", resultNode, "in", "NOT"),
+    );
+
+    // A NOT on the result-input connection negates the single limit: type stays CHECK
+    // and the negation is emitted as a top-level NOT operator before the limit.
+    const { type, logicNodes } = serializeLogicNodes(editor);
+    expect(type).toBe("CHECK");
+    expect(logicNodes).toEqual([
+      expect.objectContaining({ type: "OPERATOR", operatorValue: "NOT" }),
+      { id: limit.id, type: "LIMIT" },
+    ]);
+    // Operator nodes must carry a valid uuid (the BE schema requires uuidv7), not "".
+    expect(logicNodes[0]!.id).not.toBe("");
+  });
+
+  it("inserts a NOT OPERATOR before a negated child inside an AND group", async () => {
+    const editor = createTestEditor();
+    const limitA = new LimitNode({ label: 1 });
+    const limitB = new LimitNode({ label: 2 });
+    const and = new AndNode();
+    const resultNode = new ResultNode();
+
+    await editor.addNode(limitA);
+    await editor.addNode(limitB);
+    await editor.addNode(and);
+    await editor.addNode(resultNode);
+    await editor.addConnection(
+      new BooleanConnection(limitA, "out", and, "in", "NOT"),
+    );
+    await editor.addConnection(new BooleanConnection(limitB, "out", and, "in"));
+    await editor.addConnection(
+      new BooleanConnection(and, "out", resultNode, "in"),
+    );
+
+    const { logicNodes } = serializeLogicNodes(editor);
+    expect(operatorValues(logicNodes)).toContain("NOT");
+  });
+});
diff --git a/apps/web/src/modules/evaluation/graph/editor/serialization/__tests__/utils.test.ts b/apps/web/src/modules/evaluation/graph/editor/serialization/__tests__/utils.test.ts
new file mode 100644
index 00000000..5a62e76b
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/serialization/__tests__/utils.test.ts
@@ -0,0 +1,81 @@
+import {
+  parseNullableNumber,
+  parseRequiredNumber,
+} from "@/modules/evaluation/graph/editor/serialization/utils";
+import { describe, expect, it } from "vitest";
+
+describe("parseRequiredNumber", () => {
+  it("parses a valid integer string", () => {
+    expect(parseRequiredNumber("42", "required")).toBe(42);
+  });
+
+  it("parses a numeric value directly", () => {
+    expect(parseRequiredNumber(7, "required")).toBe(7);
+  });
+
+  it("parses zero", () => {
+    expect(parseRequiredNumber(0, "required")).toBe(0);
+  });
+
+  it("parses a float string", () => {
+    expect(parseRequiredNumber("3.14", "required")).toBeCloseTo(3.14);
+  });
+
+  it("throws on null", () => {
+    expect(() => parseRequiredNumber(null, "msg")).toThrow("msg");
+  });
+
+  it("throws on undefined", () => {
+    expect(() => parseRequiredNumber(undefined, "msg")).toThrow("msg");
+  });
+
+  it("throws on empty string", () => {
+    expect(() => parseRequiredNumber("", "msg")).toThrow("msg");
+  });
+
+  it("throws on a non-numeric string", () => {
+    expect(() => parseRequiredNumber("abc", "msg")).toThrow("msg");
+  });
+
+  it("throws on Infinity", () => {
+    expect(() => parseRequiredNumber(Infinity, "msg")).toThrow("msg");
+  });
+
+  it("throws on NaN (via NaN coercion)", () => {
+    expect(() => parseRequiredNumber(NaN, "msg")).toThrow("msg");
+  });
+});
+
+describe("parseNullableNumber", () => {
+  it("returns null for null", () => {
+    expect(parseNullableNumber(null)).toBeNull();
+  });
+
+  it("returns null for undefined", () => {
+    expect(parseNullableNumber(undefined)).toBeNull();
+  });
+
+  it("returns null for empty string", () => {
+    expect(parseNullableNumber("")).toBeNull();
+  });
+
+  it("parses a valid integer string", () => {
+    expect(parseNullableNumber("10")).toBe(10);
+  });
+
+  it("parses a numeric value directly", () => {
+    expect(parseNullableNumber(5)).toBe(5);
+  });
+
+  it("parses zero", () => {
+    expect(parseNullableNumber(0)).toBe(0);
+  });
+
+  it("returns null for a non-numeric string", () => {
+    expect(parseNullableNumber("abc")).toBeNull();
+  });
+
+  it("returns null for Infinity", () => {
+    expect(parseNullableNumber(Infinity)).toBeNull();
+  });
+});
diff --git a/apps/web/src/modules/evaluation/graph/editor/serialization/serializeLimitItems.ts b/apps/web/src/modules/evaluation/graph/editor/serialization/serializeLimitItems.ts
new file mode 100644
index 00000000..967cd904
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/serialization/serializeLimitItems.ts
@@ -0,0 +1,43 @@
+import { LimitItemConnection } from "@/modules/evaluation/graph/editor/connections/limitItemConnection";
+import type {
+  LimitItemProps,
+  Schemes,
+} from "@/modules/evaluation/graph/editor/types";
+import { EvalLimitItemOperatorEnum } from "@repo/schema";
+import type { NodeEditor } from "rete";
+import type { FullLimit } from "./serializeLimits";
+
+export type FullLimitItem = FullLimit["limitItems"][number];
+
+export function serializeLimitItemNode(
+  editor: NodeEditor<Schemes>,
+  node: LimitItemProps,
+): FullLimitItem {
+  return {
+    id: node.id,
+    limitFrom: node.limitFrom,
+    limitTo: node.limitTo,
+    parameter: node.parameter,
+    operator: getLimitItemOperator(editor, node.id),
+    quantifierType: node.quantifierType,
+    quantifierUnit: node.quantifierUnit,
+    quantifierValue: node.quantifierValue,
+    targetEdge: node.targetEdge,
+    parentEdge: node.parentEdge,
+  };
+}
+
+function getLimitItemOperator(
+  editor: NodeEditor<Schemes>,
+  nodeId: string,
+): EvalLimitItemOperatorEnum {
+  const connection = editor
+    .getConnections()
+    .find(
+      (connection) =>
+        connection.source === nodeId &&
+        connection instanceof LimitItemConnection,
+    ) as LimitItemConnection | undefined;
+
+  return connection?.limitItemOperator ?? EvalLimitItemOperatorEnum.AND;
+}
diff --git a/apps/web/src/modules/evaluation/graph/editor/serialization/serializeLimits.ts b/apps/web/src/modules/evaluation/graph/editor/serialization/serializeLimits.ts
new file mode 100644
index 00000000..d93bfd53
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/serialization/serializeLimits.ts
@@ -0,0 +1,125 @@
+import { LimitItemConnection } from "@/modules/evaluation/graph/editor/connections/limitItemConnection";
+import { ActionNodeBase } from "@/modules/evaluation/graph/editor/nodes/action/actionBase";
+import { LimitNode } from "@/modules/evaluation/graph/editor/nodes/limit/limit";
+import type {
+  LimitItemProps,
+  Schemes,
+} from "@/modules/evaluation/graph/editor/types";
+import {
+  isLimitItemNode,
+  isLimitNode,
+} from "@/modules/evaluation/graph/editor/utils/guards";
+import type {
+  EvalSeverityEnum,
+  EvalTestCaseFullCreateOrUpdate,
+} from "@repo/schema";
+import type { NodeEditor } from "rete";
+import { serializeLimitItemNode } from "./serializeLimitItems";
+import { parseNullableNumber, parseRequiredNumber } from "./utils";
+
+export type FullLimit = NonNullable<
+  EvalTestCaseFullCreateOrUpdate["limits"]
+>[number];
+
+export function serializeLimits(
+  editor: NodeEditor<Schemes>,
+): FullLimit[] {
+  return editor
+    .getNodes()
+    .filter(isLimitNode)
+    .map((limitNode) => serializeLimitNode(editor, limitNode));
+}
+
+export function serializeLimitNode(
+  editor: NodeEditor<Schemes>,
+  limitNode: LimitNode,
+): FullLimit {
+  const limitItems = getLimitItemChildren(editor, limitNode).map((node) =>
+    serializeLimitItemNode(editor, node),
+  );
+
+  return {
+    id: limitNode.id,
+    name: limitNode.name,
+    severity: getLimitSeverity(editor, limitNode),
+    enabled: limitNode.enabledValue,
+    targetLabelId: parseRequiredNumber(
+      limitNode.labelValue,
+      "Check label is required.",
+    ),
+    targetParentLabelId: parseNullableNumber(limitNode.parentLabelValue),
+    limitItems,
+  };
+}
+
+function getLimitItemChildren(
+  editor: NodeEditor<Schemes>,
+  limitNode: LimitNode,
+): LimitItemProps[] {
+  const children = editor
+    .getNodes()
+    .filter((node) => node.parent === limitNode.id)
+    .filter(isLimitItemNode);
+
+  return orderByConnectionChain(editor, children);
+}
+
+// LimitItems form a single 1:1 chain (no loops, no branching — both
+// guaranteed by graph validation). editor.getNodes() returns insertion order,
+// which goes stale after a reorder, so we recover the real order by walking
+// the chain: start at the node with no incoming connection (the head) and
+// follow each outgoing connection to its target until the tail.
+function orderByConnectionChain(
+  editor: NodeEditor<Schemes>,
+  nodes: LimitItemProps[],
+): LimitItemProps[] {
+  if (nodes.length <= 1) return nodes;
+
+  const nodeById = new Map(nodes.map((node) => [node.id, node]));
+  const nextById = new Map<string, string>();
+  const targets = new Set<string>();
+
+  for (const connection of editor.getConnections()) {
+    if (!(connection instanceof LimitItemConnection)) continue;
+    if (!nodeById.has(connection.source) || !nodeById.has(connection.target))
+      continue;
+
+    nextById.set(connection.source, connection.target);
+    targets.add(connection.target);
+  }
+
+  const head = nodes.find((node) => !targets.has(node.id));
+  if (!head) return nodes;
+
+  const ordered: LimitItemProps[] = [];
+  const visited = new Set<string>();
+
+  let currentId: string | undefined = head.id;
+  while (currentId && !visited.has(currentId)) {
+    const node = nodeById.get(currentId);
+    if (!node) break;
+
+    ordered.push(node);
+    visited.add(currentId);
+    currentId = nextById.get(currentId);
+  }
+
+  // Fallback: if some children weren't reachable through the chain (e.g.
+  // disconnected mid-edit), keep them rather than dropping them on save.
+  return ordered.length === nodes.length
+    ? ordered
+    : [...ordered, ...nodes.filter((node) => !visited.has(node.id))];
+}
+
+function getLimitSeverity(
+  editor: NodeEditor<Schemes>,
+  limitNode: LimitNode,
+): EvalSeverityEnum | null {
+  const actionNode = editor
+    .getConnections()
+    .filter((connection) => connection.source === limitNode.id)
+    .map((connection) => editor.getNode(connection.target))
+    .find((node) => node instanceof ActionNodeBase);
+
+  return actionNode instanceof ActionNodeBase ? actionNode.evalSeverity : null;
+}
diff --git a/apps/web/src/modules/evaluation/graph/editor/serialization/serializeLogicNodes.ts b/apps/web/src/modules/evaluation/graph/editor/serialization/serializeLogicNodes.ts
new file mode 100644
index 00000000..14cb9e3b
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/serialization/serializeLogicNodes.ts
@@ -0,0 +1,253 @@
+import type {
+  NodeProps,
+  Schemes,
+} from "@/modules/evaluation/graph/editor/types";
+import type { NodeEditor } from "rete";
+
+import { ActionNodeBase } from "@/modules/evaluation/graph/editor/nodes/action/actionBase";
+import { LimitNode } from "@/modules/evaluation/graph/editor/nodes/limit/limit";
+import { AndNode } from "@/modules/evaluation/graph/editor/nodes/logical/and";
+import { OrNode } from "@/modules/evaluation/graph/editor/nodes/logical/or";
+import { ResultNode } from "@/modules/evaluation/graph/editor/nodes/result/result";
+
+import { BooleanConnection } from "@/modules/evaluation/graph/editor/connections/booleanConnection";
+import {
+  EvalLogicNodeOperatorValueEnum,
+  EvalLogicNodeTypeEnum,
+  EvalSeverityEnum,
+  EvalTestCaseTypeEnum,
+  type EvalLogicNode,
+} from "@repo/schema";
+import { v7 as uuidv7 } from "uuid";
+
+export type LogicSerializationResult = {
+  type: EvalTestCaseTypeEnum;
+  severity: EvalSeverityEnum | null;
+  logicNodes: EvalLogicNode[];
+};
+
+type LogicalNode = AndNode | OrNode;
+
+type SerializedExpression = {
+  operatorValue: EvalLogicNodeOperatorValueEnum | null;
+  nodes: EvalLogicNode[];
+};
+
+export function serializeLogicNodes(
+  editor: NodeEditor<Schemes>,
+): LogicSerializationResult {
+  const resultNode = editor
+    .getNodes()
+    .find((node) => node instanceof ResultNode);
+
+  if (!resultNode) {
+    return {
+      type: EvalTestCaseTypeEnum.CHECK,
+      severity: null,
+      logicNodes: [],
+    };
+  }
+
+  const resultInputConnection = findResultInputConnection(editor, resultNode);
+  const resultActionConnection = findResultActionConnection(editor, resultNode);
+
+  const resultActionNode = resultActionConnection
+    ? editor.getNode(resultActionConnection.target)
+    : undefined;
+
+  if (!resultInputConnection) {
+    return {
+      type: EvalTestCaseTypeEnum.CHECK,
+      severity: getActionSeverity(resultActionNode),
+      logicNodes: [],
+    };
+  }
+
+  const resultInputSourceNode = editor.getNode(resultInputConnection.source);
+
+  if (!resultInputSourceNode) {
+    return {
+      type: EvalTestCaseTypeEnum.CHECK,
+      severity: getActionSeverity(resultActionNode),
+      logicNodes: [],
+    };
+  }
+
+  const expression = serializeExpression(editor, resultInputSourceNode);
+
+  // The test-case type is always CHECK (the table view has no DEFECT). A NOT on the
+  // result-input connection negates the whole expression and is emitted as a top-level
+  // NOT operator — only producible for a single Limit -> Result edge (see setupRender).
+  const logicNodes = applyNotIfNeeded(resultInputConnection, expression.nodes);
+
+  return {
+    type: EvalTestCaseTypeEnum.CHECK,
+    severity: getActionSeverity(resultActionNode),
+    logicNodes,
+  };
+}
+
+function findResultInputConnection(
+  editor: NodeEditor<Schemes>,
+  resultNode: ResultNode,
+) {
+  return editor.getConnections().find((connection) => {
+    return connection.target === resultNode.id;
+  });
+}
+
+function findResultActionConnection(
+  editor: NodeEditor<Schemes>,
+  resultNode: ResultNode,
+) {
+  return editor.getConnections().find((connection) => {
+    if (connection.source !== resultNode.id) return false;
+
+    const targetNode = editor.getNode(connection.target);
+
+    return targetNode instanceof ActionNodeBase;
+  });
+}
+
+function serializeExpression(
+  editor: NodeEditor<Schemes>,
+  node: NodeProps,
+  parentOperatorValue: EvalLogicNodeOperatorValueEnum | null = null,
+): SerializedExpression {
+  if (node instanceof LimitNode) {
+    return {
+      operatorValue: null,
+      nodes: [
+        {
+          id: node.id,
+          type: EvalLogicNodeTypeEnum.LIMIT,
+        },
+      ],
+    };
+  }
+
+  if (node instanceof AndNode || node instanceof OrNode) {
+    return serializeLogicalExpression(editor, node, parentOperatorValue);
+  }
+
+  throw new Error(`Unsupported logic node "${node.id}".`);
+}
+
+function serializeLogicalExpression(
+  editor: NodeEditor<Schemes>,
+  node: LogicalNode,
+  parentOperatorValue: EvalLogicNodeOperatorValueEnum | null,
+): SerializedExpression {
+  const operatorValue = getLogicalNodeOperatorValue(node);
+
+  const incomingConnections = editor
+    .getConnections()
+    .filter((connection) => connection.target === node.id)
+    .sort((a, b) => a.source.localeCompare(b.source));
+
+  const children: EvalLogicNode[] = [];
+
+  for (const connection of incomingConnections) {
+    const sourceNode = editor.getNode(connection.source);
+
+    if (!sourceNode) continue;
+
+    const childExpression = serializeExpression(
+      editor,
+      sourceNode,
+      operatorValue,
+    );
+    const maybeNegatedChildNodes = applyNotIfNeeded(
+      connection,
+      childExpression.nodes,
+    );
+
+    if (children.length > 0) {
+      children.push({
+        id: uuidv7(),
+        type: EvalLogicNodeTypeEnum.OPERATOR,
+        operatorValue,
+      });
+    }
+
+    children.push(...maybeNegatedChildNodes);
+  }
+
+  const needsGroup =
+    parentOperatorValue !== null &&
+    parentOperatorValue !== operatorValue &&
+    children.length > 1;
+
+  if (needsGroup) {
+    return {
+      operatorValue,
+      nodes: [
+        {
+          id: node.id,
+          type: EvalLogicNodeTypeEnum.GROUP,
+          children,
+        },
+      ],
+    };
+  }
+
+  return {
+    operatorValue,
+    nodes: children,
+  };
+}
+
+function applyNotIfNeeded(
+  connection: Schemes["Connection"],
+  childNodes: EvalLogicNode[],
+): EvalLogicNode[] {
+  if (!(connection instanceof BooleanConnection)) return childNodes;
+  if (connection.booleanOperator !== "NOT") return childNodes;
+  if (childNodes.length === 0) return childNodes;
+
+  if (childNodes.length === 1) {
+    const [child] = childNodes;
+    if (!child) return childNodes;
+
+    return [
+      {
+        id: uuidv7(),
+        type: EvalLogicNodeTypeEnum.OPERATOR,
+        operatorValue: EvalLogicNodeOperatorValueEnum.NOT,
+      },
+      child,
+    ];
+  }
+
+  return [
+    {
+      id: uuidv7(),
+      type: EvalLogicNodeTypeEnum.OPERATOR,
+      operatorValue: EvalLogicNodeOperatorValueEnum.NOT,
+    },
+    {
+      id: uuidv7(),
+      type: EvalLogicNodeTypeEnum.GROUP,
+      children: childNodes,
+    },
+  ];
+}
+
+function getLogicalNodeOperatorValue(
+  node: LogicalNode,
+): EvalLogicNodeOperatorValueEnum {
+  return node instanceof AndNode
+    ? EvalLogicNodeOperatorValueEnum.AND
+    : EvalLogicNodeOperatorValueEnum.OR;
+}
+
+function getActionSeverity(
+  node: NodeProps | undefined,
+): EvalSeverityEnum | null {
+  if (node instanceof ActionNodeBase) {
+    return node.evalSeverity;
+  }
+
+  return null;
+}
+
diff --git a/apps/web/src/modules/evaluation/graph/editor/serialization/serializeTestCase.ts b/apps/web/src/modules/evaluation/graph/editor/serialization/serializeTestCase.ts
new file mode 100644
index 00000000..0e05bc78
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/serialization/serializeTestCase.ts
@@ -0,0 +1,26 @@
+import type { Schemes } from "@/modules/evaluation/graph/editor/types";
+import type { EvalTestCaseFullCreateOrUpdate } from "@repo/schema";
+import type { NodeEditor } from "rete";
+import { serializeLimits } from "./serializeLimits";
+import { serializeLogicNodes } from "./serializeLogicNodes";
+
+type SerializeTestCaseOptions = {
+  name?: string;
+};
+
+export function serializeTestCase(
+  editor: NodeEditor<Schemes>,
+  options: SerializeTestCaseOptions = {},
+): EvalTestCaseFullCreateOrUpdate {
+  const logic = serializeLogicNodes(editor);
+
+  return {
+    name: options.name ?? "",
+    type: logic.type,
+    severity: logic.severity,
+    // The editor does not model test-case enablement; that flag is owned by the web UI.
+    enabled: true,
+    limits: serializeLimits(editor),
+    logicNodes: logic.logicNodes,
+  };
+}
diff --git a/apps/web/src/modules/evaluation/graph/editor/serialization/toFullCreateOrUpdate.ts b/apps/web/src/modules/evaluation/graph/editor/serialization/toFullCreateOrUpdate.ts
new file mode 100644
index 00000000..0034c674
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/serialization/toFullCreateOrUpdate.ts
@@ -0,0 +1,41 @@
+// The SSOT cache holds the READ type `EvalTestCaseFull` (limits carry full
+// `targetLabel`/`targetParentLabel` objects + timestamps). The editor load path consumes
+// the WRITE type `EvalTestCaseFullCreateOrUpdate` (targetLabelId/targetParentLabelId, no
+// timestamps). This is the one schema-to-schema mapper bridging the two; enums pass
+// through unchanged (no casting).
+import type {
+  EvalTestCaseFull,
+  EvalTestCaseFullCreateOrUpdate,
+} from "@repo/schema";
+
+export function toFullCreateOrUpdate(
+  full: EvalTestCaseFull,
+): EvalTestCaseFullCreateOrUpdate {
+  return {
+    name: full.name,
+    type: full.type,
+    severity: full.severity,
+    enabled: full.enabled,
+    logicNodes: full.logicNodes,
+    limits: full.limits.map((limit) => ({
+      id: limit.id,
+      name: limit.name,
+      severity: limit.severity,
+      enabled: limit.enabled,
+      targetLabelId: limit.targetLabel.id,
+      targetParentLabelId: limit.targetParentLabel?.id ?? null,
+      limitItems: limit.limitItems.map((item) => ({
+        id: item.id,
+        limitFrom: item.limitFrom,
+        limitTo: item.limitTo,
+        parameter: item.parameter,
+        operator: item.operator,
+        quantifierType: item.quantifierType,
+        quantifierUnit: item.quantifierUnit,
+        quantifierValue: item.quantifierValue,
+        targetEdge: item.targetEdge,
+        parentEdge: item.parentEdge,
+      })),
+    })),
+  };
+}
diff --git a/apps/web/src/modules/evaluation/graph/editor/serialization/utils.ts b/apps/web/src/modules/evaluation/graph/editor/serialization/utils.ts
new file mode 100644
index 00000000..706ebd24
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/serialization/utils.ts
@@ -0,0 +1,36 @@
+function isBlank(value: string | number | null | undefined): boolean {
+  return (
+    value === null ||
+    value === undefined ||
+    (typeof value === "string" && value.trim() === "")
+  );
+}
+
+export function parseRequiredNumber(
+  value: string | number | null | undefined,
+  message: string,
+): number {
+  if (isBlank(value)) {
+    throw new Error(message);
+  }
+
+  const parsed = Number(value);
+
+  if (!Number.isFinite(parsed)) {
+    throw new Error(message);
+  }
+
+  return parsed;
+}
+
+export function parseNullableNumber(
+  value: string | number | null | undefined,
+): number | null {
+  if (isBlank(value)) {
+    return null;
+  }
+
+  const parsed = Number(value);
+
+  return Number.isFinite(parsed) ? parsed : null;
+}
diff --git a/apps/web/src/modules/evaluation/graph/editor/setup/__tests__/shortcuts.test.ts b/apps/web/src/modules/evaluation/graph/editor/setup/__tests__/shortcuts.test.ts
new file mode 100644
index 00000000..c70a0596
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/setup/__tests__/shortcuts.test.ts
@@ -0,0 +1,86 @@
+import { describe, expect, it } from "vitest";
+import { findShortcut, formatShortcutKeys, SHORTCUTS } from "../shortcuts";
+
+type KeyEventInit = {
+  key: string;
+  ctrlKey?: boolean;
+  metaKey?: boolean;
+  shiftKey?: boolean;
+};
+
+const event = (init: KeyEventInit) => ({
+  ctrlKey: false,
+  metaKey: false,
+  shiftKey: false,
+  ...init,
+});
+
+describe("findShortcut", () => {
+  it("matches mod-based shortcuts (Cmd/Ctrl)", () => {
+    expect(findShortcut(event({ key: "a", metaKey: true }))?.action).toBe(
+      "selectAll",
+    );
+    expect(findShortcut(event({ key: "c", ctrlKey: true }))?.action).toBe(
+      "copy",
+    );
+    expect(findShortcut(event({ key: "s", metaKey: true }))?.action).toBe(
+      "save",
+    );
+  });
+
+  it("disambiguates undo and redo by Shift", () => {
+    expect(findShortcut(event({ key: "z", metaKey: true }))?.action).toBe(
+      "undo",
+    );
+    expect(
+      findShortcut(event({ key: "z", metaKey: true, shiftKey: true }))?.action,
+    ).toBe("redo");
+  });
+
+  it("matches plain letter shortcuts case-insensitively and ignores Shift", () => {
+    expect(findShortcut(event({ key: "o" }))?.action).toBe("addOr");
+    expect(findShortcut(event({ key: "O", shiftKey: true }))?.action).toBe(
+      "addOr",
+    );
+    expect(findShortcut(event({ key: "f" }))?.action).toBe("toggleFullscreen");
+  });
+
+  it("does not match mod-requiring shortcuts without the modifier", () => {
+    // "c" (copy) and "s" (save) require the modifier and have no plain counterpart.
+    expect(findShortcut(event({ key: "c" }))).toBeUndefined();
+    expect(findShortcut(event({ key: "s" }))).toBeUndefined();
+  });
+
+  it("does not hijack browser combos like Ctrl/Cmd+R", () => {
+    // addResult is "r" without a modifier; Cmd+R must not trigger it.
+    expect(findShortcut(event({ key: "r", metaKey: true }))).toBeUndefined();
+  });
+
+  it("matches special keys", () => {
+    expect(findShortcut(event({ key: "Backspace" }))?.action).toBe(
+      "deleteSelection",
+    );
+    expect(findShortcut(event({ key: "Escape" }))?.action).toBe("deselect");
+  });
+});
+
+describe("shortcut definitions", () => {
+  it("has a unique action per entry", () => {
+    const actions = SHORTCUTS.map((shortcut) => shortcut.action);
+    expect(new Set(actions).size).toBe(actions.length);
+  });
+});
+
+describe("formatShortcutKeys", () => {
+  it("renders modifier, shift and the key label in order", () => {
+    const redo = SHORTCUTS.find((shortcut) => shortcut.action === "redo")!;
+    expect(formatShortcutKeys(redo, "⌘")).toEqual(["⌘", "Shift", "Z"]);
+  });
+
+  it("maps Escape to Esc", () => {
+    const deselect = SHORTCUTS.find(
+      (shortcut) => shortcut.action === "deselect",
+    )!;
+    expect(formatShortcutKeys(deselect, "Ctrl")).toEqual(["Esc"]);
+  });
+});
diff --git a/apps/web/src/modules/evaluation/graph/editor/setup/connectionRules.ts b/apps/web/src/modules/evaluation/graph/editor/setup/connectionRules.ts
new file mode 100644
index 00000000..995c41ac
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/setup/connectionRules.ts
@@ -0,0 +1,128 @@
+import { ActionNodeBase } from "@/modules/evaluation/graph/editor/nodes/action/actionBase";
+import { LimitNode } from "@/modules/evaluation/graph/editor/nodes/limit/limit";
+import { ResultNode } from "@/modules/evaluation/graph/editor/nodes/result/result";
+import { AppSocket } from "@/modules/evaluation/graph/editor/sockets/appSocket";
+import type { Schemes } from "@/modules/evaluation/graph/editor/types";
+import type { NodeEditor } from "rete";
+
+/**
+ * Shared connection legality rules.
+ *
+ * Used by both the drag flow (ClassicFlow.canMakeConnection in setupConnections)
+ * and the magnetic snap (setupMagneticConnection)
+ */
+
+export type SocketRef = { nodeId: string; key: string };
+
+export type ConnectionValidation =
+  | { ok: true }
+  | { ok: false; reason?: string };
+
+type PortRecord = Record<string, { socket?: unknown } | undefined>;
+
+function getSocket(
+  editor: NodeEditor<Schemes>,
+  nodeId: string,
+  key: string,
+  side: "input" | "output",
+): unknown {
+  const node = editor.getNode(nodeId);
+  if (!node) return null;
+
+  const ports = (side === "output" ? node.outputs : node.inputs) as PortRecord;
+  return ports[key]?.socket ?? null;
+}
+
+/**
+ * Walks the existing graph from `targetNodeId` to see if it can reach
+ * `sourceNodeId` — i.e. whether adding source -> target would close a loop.
+ */
+export function wouldCreateCycle(
+  editor: NodeEditor<Schemes>,
+  sourceNodeId: string,
+  targetNodeId: string,
+): boolean {
+  if (sourceNodeId === targetNodeId) return true;
+
+  const adjacency = new Map<string, string[]>();
+
+  for (const node of editor.getNodes()) {
+    adjacency.set(node.id, []);
+  }
+
+  for (const connection of editor.getConnections()) {
+    const list = adjacency.get(connection.source) ?? [];
+    list.push(connection.target);
+    adjacency.set(connection.source, list);
+  }
+
+  const stack = [targetNodeId];
+  const visited = new Set<string>();
+
+  while (stack.length > 0) {
+    const current = stack.pop();
+    if (!current) continue;
+
+    if (current === sourceNodeId) return true;
+    if (visited.has(current)) continue;
+    visited.add(current);
+
+    for (const next of adjacency.get(current) ?? []) {
+      if (!visited.has(next)) stack.push(next);
+    }
+  }
+
+  return false;
+}
+
+/**
+ * Decides whether a connection source(output) -> target(input) is legal.
+ */
+export function validateConnection(
+  editor: NodeEditor<Schemes>,
+  source: SocketRef,
+  target: SocketRef,
+): ConnectionValidation {
+  if (source.nodeId === target.nodeId) return { ok: false };
+
+  const sourceNode = editor.getNode(source.nodeId);
+  const targetNode = editor.getNode(target.nodeId);
+  if (!sourceNode || !targetNode) return { ok: false };
+
+  const sourceSocket = getSocket(editor, source.nodeId, source.key, "output");
+  const targetSocket = getSocket(editor, target.nodeId, target.key, "input");
+  if (!sourceSocket || !targetSocket) return { ok: false };
+
+  if (
+    !(sourceSocket instanceof AppSocket) ||
+    !(targetSocket instanceof AppSocket)
+  ) {
+    return { ok: false };
+  }
+
+  if (!sourceSocket.isCompatibleWith(targetSocket)) {
+    return { ok: false, reason: "Sockets are not compatible" };
+  }
+
+  if (wouldCreateCycle(editor, source.nodeId, target.nodeId)) {
+    return { ok: false, reason: "Loops are not allowed" };
+  }
+
+  if (sourceNode instanceof ResultNode && !(targetNode instanceof ActionNodeBase)) {
+    return { ok: false, reason: "Result node can only connect to an action node" };
+  }
+
+  if (targetNode instanceof ActionNodeBase) {
+    const sourceCanConnectToAction =
+      sourceNode instanceof LimitNode || sourceNode instanceof ResultNode;
+
+    if (!sourceCanConnectToAction) {
+      return {
+        ok: false,
+        reason: "Action nodes can only be connected from a Limit node or Result node",
+      };
+    }
+  }
+
+  return { ok: true };
+}
diff --git a/apps/web/src/modules/evaluation/graph/editor/setup/createEditor.ts b/apps/web/src/modules/evaluation/graph/editor/setup/createEditor.ts
new file mode 100644
index 00000000..6c8d13d0
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/setup/createEditor.ts
@@ -0,0 +1,123 @@
+import {
+  GRID,
+  ZOOM_MAX,
+  ZOOM_MIN,
+} from "@/modules/evaluation/graph/editor/constants";
+import type { LabelOption } from "@/modules/evaluation/graph/editor/controls/label";
+import type { Schemes } from "@/modules/evaluation/graph/editor/types";
+import { NodeEditor } from "rete";
+import { AreaExtensions, AreaPlugin } from "rete-area-plugin";
+import { type ContextMenuExtra } from "rete-context-menu-plugin";
+import { HistoryPlugin, Presets as HistoryPresets } from "rete-history-plugin";
+import { type ReactArea2D } from "rete-react-plugin";
+import { setupArrange } from "./setupArrange";
+import { setupBackground } from "./setupBackground";
+import { setupConnection } from "./setupConnections";
+import { setupContextMenu } from "./setupContextMenu";
+import { setupKeyListeners } from "./setupKeyListeners";
+import { setupMagneticConnection } from "./setupMagneticConnection";
+import { setupRender } from "./setupRender";
+import { setupScopes } from "./setupScopes";
+import { setupSelector } from "./setupSelector";
+import { setupValidation } from "./setupValidation";
+
+export type AreaExtra = ReactArea2D<Schemes> | ContextMenuExtra;
+
+/**
+ * Bootstraps the Rete editor inside the given DOM container.
+ *
+ * Rete separates data from rendering:
+ *   NodeEditor  — pure data graph (nodes, connections, no DOM)
+ *   AreaPlugin  — visual canvas (pan, zoom, drag, renders nodes into the DOM)
+ *
+ * Sub-plugins attach to the area, not the editor, because they deal with the visual layer.
+ *
+ * Plugins must be fully configured (presets, pipes) before being used via .use(),
+ * otherwise early events may be missed.
+ */
+export type CreateEditorOptions = {
+  toggleFullscreen?: () => void;
+  save?: () => void;
+  getLabels?: () => LabelOption[];
+};
+
+export async function createEditor(
+  container: HTMLElement,
+  log: (text: string, type: "info" | "error") => void,
+  options: CreateEditorOptions = {},
+) {
+  const editor = new NodeEditor<Schemes>();
+  const area = new AreaPlugin<Schemes, AreaExtra>(container);
+  const history = new HistoryPlugin<Schemes>();
+
+  const getLabels = options.getLabels ?? (() => []);
+
+  const connection = setupConnection({ editor, area, log });
+  const render = setupRender({ editor, area });
+  const scopes = setupScopes({ editor });
+  const validation = setupValidation({ editor, area });
+  const arrange = setupArrange({ editor, area, scopes });
+  const contextMenu = setupContextMenu({
+    editor,
+    area,
+    render,
+    history,
+    getLabels,
+  });
+
+  history.addPreset(HistoryPresets.classic.setup());
+
+  editor.use(area);
+  area.use(contextMenu);
+  area.use(scopes);
+  area.use(connection);
+  area.use(render);
+  area.use(history);
+  area.use(arrange.plugin);
+
+  AreaExtensions.restrictor(area, {
+    scaling: {
+      min: ZOOM_MIN,
+      max: ZOOM_MAX,
+    },
+    translation: false,
+  });
+
+  AreaExtensions.showInputControl(area);
+  AreaExtensions.snapGrid(area, { size: GRID });
+
+  const { selectableNodes } = setupSelector({ editor, area });
+
+  const keyListeners = setupKeyListeners({
+    editor,
+    area,
+    container,
+    selectableNodes,
+    history,
+    connection,
+    getLabels,
+    toggleFullscreen: options.toggleFullscreen,
+    save: options.save,
+  });
+
+  window.addEventListener("keydown", keyListeners.handler);
+
+  const magnetic = setupMagneticConnection({ editor, area });
+
+  setupBackground(area);
+
+  return {
+    editor,
+    area,
+    validation,
+    arrange,
+    selectableNodes,
+    destroy: () => {
+      window.removeEventListener("keydown", keyListeners.handler);
+      keyListeners.dispose();
+      magnetic.dispose();
+      validation.destroy();
+      area.destroy();
+    },
+  };
+}
diff --git a/apps/web/src/modules/evaluation/graph/editor/setup/focusManager.ts b/apps/web/src/modules/evaluation/graph/editor/setup/focusManager.ts
new file mode 100644
index 00000000..7bc43945
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/setup/focusManager.ts
@@ -0,0 +1,26 @@
+/**
+ * Tracks which editor instance is "focused" so keyboard shortcuts only act on the
+ * graph the user last interacted with. Multiple editors can be mounted on one page
+ * (e.g. one per test-case card); without this, a window-level keydown would fire on
+ * every instance at once and add/delete nodes on graphs the user can't even see.
+ *
+ * An instance becomes focused on a pointerdown anywhere inside its container, and
+ * stays focused until another instance is interacted with. State is module-level
+ * because focus is global: at most one editor is active at a time.
+ */
+let focusedContainer: HTMLElement | null = null;
+
+export function focusContainer(container: HTMLElement): void {
+  focusedContainer = container;
+}
+
+export function isContainerFocused(container: HTMLElement): boolean {
+  return focusedContainer === container;
+}
+
+/** Clears focus if this container currently holds it (call on teardown). */
+export function releaseContainerFocus(container: HTMLElement): void {
+  if (focusedContainer === container) {
+    focusedContainer = null;
+  }
+}
diff --git a/apps/web/src/modules/evaluation/graph/editor/setup/setupArrange.ts b/apps/web/src/modules/evaluation/graph/editor/setup/setupArrange.ts
new file mode 100644
index 00000000..849e097d
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/setup/setupArrange.ts
@@ -0,0 +1,152 @@
+import { GRID } from "@/modules/evaluation/graph/editor/constants";
+import { LimitNode } from "@/modules/evaluation/graph/editor/nodes/limit/limit";
+import type { Schemes } from "@/modules/evaluation/graph/editor/types";
+import type { NodeEditor } from "rete";
+import { AreaExtensions, type AreaPlugin } from "rete-area-plugin";
+import { AutoArrangePlugin, type Preset } from "rete-auto-arrange-plugin";
+import type { ScopesPlugin } from "rete-scopes-plugin";
+import type { AreaExtra } from "./createEditor";
+
+type Props = {
+  editor: NodeEditor<Schemes>;
+  area: AreaPlugin<Schemes, AreaExtra>;
+  scopes: ScopesPlugin<Schemes>;
+};
+
+export type ArrangeController = {
+  plugin: AutoArrangePlugin<Schemes>;
+  layout: (options?: { zoom?: boolean }) => Promise<void>;
+};
+
+const LAYER_SPACING = 5 * GRID;
+const PORT_SIZE = 15;
+
+/**
+ * Sets up automatic graph layout using rete-auto-arrange-plugin, which
+ * delegates to the ELK (Eclipse Layout Kernel) algorithm under the hood.
+ *
+ * The layout() function:
+ *  1. Resets LimitNode sizes to their minimum so ELK starts with fresh
+ *     dimensions (parent nodes grow dynamically).
+ *  2. Runs ELK via arrange.layout.
+ *  3. Re-settles each LimitNode through scopes.update. The applier translates
+ *     siblings in parallel via Promise.all, and every child translate fires
+ *     the scopes plugin's resizeParent on a partially-updated bounding box,
+ *     leaving the parent at a racy intermediate position. With all children
+ *     now at their ELK-final positions, one explicit scope update recomputes
+ *     the parent correctly. Without this, arrange somtimes takes two clicks
+ *     to settle.
+ *  4. Runs two React render cycles (updateAllNodes + nextFrame) so the DOM
+ *     reflects the final positions before zoomAt measures bounds.
+ */
+export function setupArrange(props: Props): ArrangeController {
+  const { editor, area, scopes } = props;
+
+  const arrange = new AutoArrangePlugin<Schemes>();
+
+  arrange.addPreset(createPreset(editor));
+
+  async function layout(options: { zoom?: boolean } = {}) {
+    const { zoom = true } = options;
+
+    resetScopeNodeSizes(editor);
+
+    await updateAllNodes(editor, area);
+    await nextFrame();
+
+    await arrange.layout({
+      options: {
+        "elk.layered.spacing.nodeNodeBetweenLayers": String(LAYER_SPACING),
+      },
+    });
+
+    for (const node of editor.getNodes()) {
+      if (node instanceof LimitNode) {
+        await scopes.update(node.id);
+      }
+    }
+
+    await updateAllNodes(editor, area);
+    await nextFrame();
+
+    if (zoom) {
+      await AreaExtensions.zoomAt(area, editor.getNodes());
+    }
+  }
+
+  return {
+    plugin: arrange,
+    layout,
+  };
+}
+
+// Tells ELK where each port lives on the node so edge routing aligns with the
+// visible socket circles. LimitNodes also declare minimum size and padding
+// because they act as containers that must accommodate their nested children.
+function createPreset(editor: NodeEditor<Schemes>): Preset {
+  return (nodeId: string) => {
+    const node = editor.getNode(nodeId);
+    if (!node) return null;
+
+    return {
+      port: (data) => {
+        const portCenterY = data.height - (node.socketHeight * GRID) / 2;
+
+        return {
+          x: 0,
+          y: portCenterY - PORT_SIZE / 2,
+          width: PORT_SIZE,
+          height: PORT_SIZE,
+          side: data.side === "output" ? "EAST" : "WEST",
+        };
+      },
+      options: (): Record<string, string | number | boolean> => {
+        if (!(node instanceof LimitNode)) return {};
+
+        const min = node.getMinSize();
+
+        return {
+          "elk.padding": formatElkPadding(node.getPadding()),
+          "elk.nodeSize.constraints":
+            "NODE_LABELS PORTS PORT_LABELS MINIMUM_SIZE",
+          "elk.nodeSize.minimum": `(${min.width},${min.height})`,
+          "elk.layered.spacing.nodeNodeBetweenLayers": String(LAYER_SPACING),
+        };
+      },
+    };
+  };
+}
+
+function formatElkPadding(padding: {
+  top: number;
+  right: number;
+  bottom: number;
+  left: number;
+}) {
+  return `[top=${padding.top},left=${padding.left},bottom=${padding.bottom},right=${padding.right}]`;
+}
+
+function resetScopeNodeSizes(editor: NodeEditor<Schemes>) {
+  for (const node of editor.getNodes()) {
+    if (node instanceof LimitNode) {
+      const min = node.getMinSize();
+      node.width = min.width;
+      node.height = min.height;
+    }
+  }
+}
+
+async function updateAllNodes(
+  editor: NodeEditor<Schemes>,
+  area: AreaPlugin<Schemes, AreaExtra>,
+) {
+  await Promise.all(
+    editor.getNodes().map((node) => area.update("node", node.id)),
+  );
+}
+
+function nextFrame() {
+  return new Promise<void>((resolve) => {
+    requestAnimationFrame(() => resolve());
+  });
+}
diff --git a/apps/web/src/modules/evaluation/graph/editor/setup/setupBackground.ts b/apps/web/src/modules/evaluation/graph/editor/setup/setupBackground.ts
new file mode 100644
index 00000000..b7eb3a82
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/setup/setupBackground.ts
@@ -0,0 +1,27 @@
+import { GRID } from "@/modules/evaluation/graph/editor/constants";
+import type { BaseSchemes } from "rete";
+import type { AreaPlugin } from "rete-area-plugin";
+
+// Uses a real DOM element instead of a CSS background on the container so the
+// dot pattern pans and zooms together with the Rete area transform.
+export function setupBackground<S extends BaseSchemes, K>(
+  area: AreaPlugin<S, K>,
+) {
+  const background = document.createElement("div");
+
+  Object.assign(background.style, {
+    display: "table",
+    zIndex: "-1",
+    position: "absolute",
+    top: "-200000px",
+    left: "-200000px",
+    width: "400000px",
+    height: "500000px",
+    opacity: "1",
+    backgroundImage:
+      "radial-gradient(var(--color-zinc-200) 1px, transparent 1px)",
+    backgroundSize: `${GRID}px ${GRID}px`,
+  });
+
+  area.area.content.add(background);
+}
diff --git a/apps/web/src/modules/evaluation/graph/editor/setup/setupConnections.ts b/apps/web/src/modules/evaluation/graph/editor/setup/setupConnections.ts
new file mode 100644
index 00000000..c54aa791
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/setup/setupConnections.ts
@@ -0,0 +1,305 @@
+import { BooleanConnection } from "@/modules/evaluation/graph/editor/connections/booleanConnection";
+import { LimitItemConnection } from "@/modules/evaluation/graph/editor/connections/limitItemConnection";
+import { ActionNodeBase } from "@/modules/evaluation/graph/editor/nodes/action/actionBase";
+import { LimitNode } from "@/modules/evaluation/graph/editor/nodes/limit/limit";
+import { BooleanSocket } from "@/modules/evaluation/graph/editor/sockets/booleanSocket";
+import { RuleSocket } from "@/modules/evaluation/graph/editor/sockets/ruleSocket";
+import type {
+  LimitItemProps,
+  BooleanNodeProps,
+  Schemes,
+} from "@/modules/evaluation/graph/editor/types";
+import type { NodeEditor } from "rete";
+import type { AreaPlugin } from "rete-area-plugin";
+import {
+  ClassicFlow,
+  ConnectionPlugin,
+  getSourceTarget,
+} from "rete-connection-plugin";
+import type { AreaExtra } from "./createEditor";
+import { validateConnection } from "./connectionRules";
+
+type Props = {
+  editor: NodeEditor<Schemes>;
+  area: AreaPlugin<Schemes, AreaExtra>;
+  log: (text: string, type: "info" | "error") => void;
+};
+
+type PortRecord = Record<string, { socket?: unknown } | undefined>;
+type SocketSide = "input" | "output";
+
+/**
+ * Configures drag-to-connect behaviour and connection validation.
+ *
+ * Rete's ClassicFlow handles pointer interaction (pick up a socket, drag, drop
+ * on another socket). `canMakeConnection` is called on drop to decide legality.
+ *
+ * The editor pipe intercepts `connectioncreate` to replace the generic
+ * Connection Rete would produce with a domain-typed one (LimitItemConnection or
+ * BooleanConnection) that can carry additional state like OR/NOT flags.
+ */
+export function setupConnection(
+  props: Props,
+): ConnectionPlugin<Schemes, AreaExtra> {
+  const { editor, area, log } = props;
+
+  const connection = new ConnectionPlugin<Schemes, AreaExtra>();
+
+  function getPort(nodeId: string, key: string, side: SocketSide) {
+    const node = editor.getNode(nodeId);
+    if (!node) return null;
+
+    return side === "output"
+      ? ((node.outputs as PortRecord)[key] ?? null)
+      : ((node.inputs as PortRecord)[key] ?? null);
+  }
+
+  function getOutputSocket(nodeId: string, key: string) {
+    return getPort(nodeId, key, "output")?.socket ?? null;
+  }
+
+  function getInputSocket(nodeId: string, key: string) {
+    return getPort(nodeId, key, "input")?.socket ?? null;
+  }
+
+  function isTrackedSocket(
+    socket: unknown,
+  ): socket is RuleSocket | BooleanSocket {
+    return socket instanceof RuleSocket || socket instanceof BooleanSocket;
+  }
+
+  function setSocketConnected(
+    nodeId: string,
+    key: string,
+    side: SocketSide,
+    connected: boolean,
+  ) {
+    const socket = getPort(nodeId, key, side)?.socket;
+
+    if (!isTrackedSocket(socket)) return;
+
+    socket.connected = connected;
+  }
+
+  function recomputeSocketConnected(
+    nodeId: string,
+    key: string,
+    side: SocketSide,
+  ) {
+    const socket = getPort(nodeId, key, side)?.socket;
+
+    if (!isTrackedSocket(socket)) return;
+
+    if (
+      pickedSocket &&
+      pickedSocket.nodeId === nodeId &&
+      String(pickedSocket.key) === key &&
+      pickedSocket.side === side
+    ) {
+      socket.connected = true;
+      return;
+    }
+
+    const connections = editor.getConnections();
+
+    const isConnected =
+      side === "output"
+        ? connections.some(
+            (conn) =>
+              conn.source === nodeId && String(conn.sourceOutput) === key,
+          )
+        : connections.some(
+            (conn) =>
+              conn.target === nodeId && String(conn.targetInput) === key,
+          );
+
+    socket.connected = isConnected;
+  }
+
+  function refreshNode(nodeId: string) {
+    void area.update("node", nodeId);
+  }
+
+  function refreshConnectionNodes(sourceId: string, targetId: string) {
+    refreshNode(sourceId);
+
+    if (targetId !== sourceId) {
+      refreshNode(targetId);
+    }
+  }
+
+  function updateConnectionSockets(data: {
+    source: string;
+    sourceOutput: string | number | symbol;
+    target: string;
+    targetInput: string | number | symbol;
+  }) {
+    recomputeSocketConnected(data.source, String(data.sourceOutput), "output");
+    recomputeSocketConnected(data.target, String(data.targetInput), "input");
+    refreshConnectionNodes(data.source, data.target);
+  }
+
+  function getExistingOutgoingActionConnections(nodeId: string) {
+    return editor.getConnections().filter((existingConnection) => {
+      if (existingConnection.source !== nodeId) return false;
+
+      const targetNode = editor.getNode(existingConnection.target);
+
+      return targetNode instanceof ActionNodeBase;
+    });
+  }
+
+  function removeConnections(connectionsToRemove: Schemes["Connection"][]) {
+    for (const connectionToRemove of connectionsToRemove) {
+      void editor.removeConnection(connectionToRemove.id);
+    }
+  }
+
+  function createTypedConnection(data: {
+    source: string;
+    sourceOutput: string | number | symbol;
+    target: string;
+    targetInput: string | number | symbol;
+  }) {
+    const sourceNode = editor.getNode(data.source);
+    const targetNode = editor.getNode(data.target);
+
+    if (!sourceNode || !targetNode) return null;
+
+    const sourceOutput = String(data.sourceOutput);
+    const targetInput = String(data.targetInput);
+    const sourceSocket = getOutputSocket(data.source, sourceOutput);
+    const targetSocket = getInputSocket(data.target, targetInput);
+
+    if (
+      sourceSocket instanceof RuleSocket &&
+      targetSocket instanceof RuleSocket
+    ) {
+      if (sourceOutput !== "out" || targetInput !== "in") return null;
+
+      return new LimitItemConnection(
+        sourceNode as LimitItemProps,
+        "out",
+        targetNode as LimitItemProps,
+        "in",
+      );
+    }
+
+    if (
+      sourceSocket instanceof BooleanSocket &&
+      targetSocket instanceof BooleanSocket
+    ) {
+      if (sourceOutput !== "out" || targetInput !== "in") return null;
+
+      return new BooleanConnection(
+        sourceNode as BooleanNodeProps,
+        "out",
+        targetNode as BooleanNodeProps,
+        "in",
+      );
+    }
+
+    return null;
+  }
+
+  connection.addPreset(
+    () =>
+      new ClassicFlow({
+        canMakeConnection(from, to) {
+          const [source, target] = getSourceTarget(from, to) || [null, null];
+
+          if (!source || !target || from === to) return false;
+
+          const result = validateConnection(
+            editor,
+            { nodeId: source.nodeId, key: String(source.key) },
+            { nodeId: target.nodeId, key: String(target.key) },
+          );
+
+          if (!result.ok) {
+            if (result.reason) {
+              log(result.reason, "error");
+              connection.drop();
+            }
+            return false;
+          }
+
+          return true;
+        },
+      }),
+  );
+
+  let pickedSocket: {
+    nodeId: string;
+    key: string | number | symbol;
+    side: "input" | "output";
+  } | null = null;
+
+  connection.addPipe((context) => {
+    if (context.type === "connectionpick") {
+      const { nodeId, key, side } = context.data.socket;
+
+      pickedSocket = { nodeId, key, side };
+
+      setSocketConnected(nodeId, String(key), side, true);
+      refreshNode(nodeId);
+    }
+
+    if (context.type === "connectiondrop") {
+      const { created } = context.data;
+
+      const socket = context.data.socket ?? pickedSocket;
+
+      if (socket && !created) {
+        const { nodeId, key, side } = socket;
+
+        recomputeSocketConnected(nodeId, String(key), side);
+        refreshNode(nodeId);
+      }
+
+      pickedSocket = null;
+    }
+
+    return context;
+  });
+
+  editor.addPipe((context) => {
+    if (context.type === "connectioncreate") {
+      if (
+        context.data instanceof LimitItemConnection ||
+        context.data instanceof BooleanConnection
+      ) {
+        return context;
+      }
+
+      const typedConnection = createTypedConnection(context.data);
+
+      if (!typedConnection) return context;
+
+      const sourceNode = editor.getNode(typedConnection.source);
+      const targetNode = editor.getNode(typedConnection.target);
+
+      if (
+        sourceNode instanceof LimitNode &&
+        targetNode instanceof ActionNodeBase
+      ) {
+        removeConnections(getExistingOutgoingActionConnections(sourceNode.id));
+      }
+
+      void editor.addConnection(typedConnection);
+
+      return undefined;
+    }
+
+    if (
+      context.type === "connectioncreated" ||
+      context.type === "connectionremoved"
+    ) {
+      updateConnectionSockets(context.data);
+    }
+
+    return context;
+  });
+
+  return connection;
+}
diff --git a/apps/web/src/modules/evaluation/graph/editor/setup/setupContextMenu.ts b/apps/web/src/modules/evaluation/graph/editor/setup/setupContextMenu.ts
new file mode 100644
index 00000000..e07a0537
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/setup/setupContextMenu.ts
@@ -0,0 +1,107 @@
+import type { LabelOption } from "@/modules/evaluation/graph/editor/controls/label";
+import { AlertNode } from "@/modules/evaluation/graph/editor/nodes/action/alert";
+import { WarningNode } from "@/modules/evaluation/graph/editor/nodes/action/warning";
+import { LimitNode } from "@/modules/evaluation/graph/editor/nodes/limit/limit";
+import { AreaNode } from "@/modules/evaluation/graph/editor/nodes/limitItem/area";
+import { CountNode } from "@/modules/evaluation/graph/editor/nodes/limitItem/count";
+import { PositionNode } from "@/modules/evaluation/graph/editor/nodes/limitItem/position";
+import { AndNode } from "@/modules/evaluation/graph/editor/nodes/logical/and";
+import { OrNode } from "@/modules/evaluation/graph/editor/nodes/logical/or";
+import { ResultNode } from "@/modules/evaluation/graph/editor/nodes/result/result";
+import type { Schemes } from "@/modules/evaluation/graph/editor/types";
+import * as ContextMenuComponents from "@/modules/evaluation/graph/editor/ui/context-menu/ContextMenuView";
+import { removeNodeWithDescendants } from "@/modules/evaluation/graph/editor/utils/removeNodes";
+import type { NodeEditor } from "rete";
+import type { AreaPlugin } from "rete-area-plugin";
+import {
+  ContextMenuPlugin,
+  Presets as ContextMenuPresets,
+} from "rete-context-menu-plugin";
+import type { HistoryPlugin } from "rete-history-plugin";
+import type { ReactPlugin } from "rete-react-plugin";
+import { Presets } from "rete-react-plugin";
+import type { AreaExtra } from "./createEditor";
+
+type Props = {
+  editor: NodeEditor<Schemes>;
+  area: AreaPlugin<Schemes, AreaExtra>;
+  render: ReactPlugin<Schemes, AreaExtra>;
+  history: HistoryPlugin<Schemes>;
+  getLabels: () => LabelOption[];
+};
+
+export function setupContextMenu(props: Props): ContextMenuPlugin<Schemes> {
+  const { editor, area, render, history, getLabels } = props;
+
+  const classicItems = ContextMenuPresets.classic.setup([
+    ["Check", () => new LimitNode({ labels: getLabels() })],
+    ["Result", () => new ResultNode()],
+    [
+      "Check Item",
+      [
+        ["Position", () => new PositionNode()],
+        ["Area", () => new AreaNode()],
+        ["Count", () => new CountNode()],
+      ],
+    ],
+    [
+      "Logical",
+      [
+        ["And", () => new AndNode()],
+        ["Or", () => new OrNode()],
+      ],
+    ],
+    [
+      "Action",
+      [
+        ["Warning", () => new WarningNode()],
+        ["Alert", () => new AlertNode()],
+      ],
+    ],
+  ]);
+
+  const contextMenu = new ContextMenuPlugin<Schemes>({
+    items(context, plugin) {
+      const result = classicItems(context, plugin);
+      if (context !== "root") {
+        const nodeId = context.id;
+        const node = editor.getNode(nodeId);
+        const list = node
+          ? result.list.map((item) =>
+              item.key === "delete"
+                ? {
+                    ...item,
+                    handler: () =>
+                      removeNodeWithDescendants(editor, nodeId, {
+                        area,
+                        history,
+                      }),
+                  }
+                : item,
+            )
+          : result.list;
+        return { ...result, list, searchBar: false };
+      }
+
+      return {
+        ...result,
+        searchBar: false,
+      };
+    },
+  });
+
+  render.addPreset(
+    Presets.contextMenu.setup({
+      delay: 0,
+      customize: {
+        main: () => ContextMenuComponents.Menu,
+        item: () => ContextMenuComponents.Item,
+        common: () => ContextMenuComponents.Common,
+        search: () => ContextMenuComponents.Search,
+        subitems: () => ContextMenuComponents.Subitems,
+      },
+    }),
+  );
+
+  return contextMenu;
+}
diff --git a/apps/web/src/modules/evaluation/graph/editor/setup/setupKeyListeners.ts b/apps/web/src/modules/evaluation/graph/editor/setup/setupKeyListeners.ts
new file mode 100644
index 00000000..e04a66c9
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/setup/setupKeyListeners.ts
@@ -0,0 +1,204 @@
+import type { LabelOption } from "@/modules/evaluation/graph/editor/controls/label";
+import { LimitNode } from "@/modules/evaluation/graph/editor/nodes/limit/limit";
+import { AreaNode } from "@/modules/evaluation/graph/editor/nodes/limitItem/area";
+import { CountNode } from "@/modules/evaluation/graph/editor/nodes/limitItem/count";
+import { PositionNode } from "@/modules/evaluation/graph/editor/nodes/limitItem/position";
+import { AndNode } from "@/modules/evaluation/graph/editor/nodes/logical/and";
+import { OrNode } from "@/modules/evaluation/graph/editor/nodes/logical/or";
+import { ResultNode } from "@/modules/evaluation/graph/editor/nodes/result/result";
+import type { Schemes } from "@/modules/evaluation/graph/editor/types";
+import {
+  type Clipboard,
+  copyNodes,
+  pasteNodes,
+} from "@/modules/evaluation/graph/editor/utils/copyPaste";
+import {
+  deleteSelectedNodes,
+  deselectAllNodes,
+  type SelectableNodes,
+  selectAllNodes,
+} from "@/modules/evaluation/graph/editor/utils/nodeSelection";
+import type { NodeEditor } from "rete";
+import type { AreaPlugin } from "rete-area-plugin";
+import type { ConnectionPlugin } from "rete-connection-plugin";
+import type { HistoryPlugin } from "rete-history-plugin";
+import type { AreaExtra } from "./createEditor";
+import {
+  focusContainer,
+  isContainerFocused,
+  releaseContainerFocus,
+} from "./focusManager";
+import { findShortcut, type ShortcutAction } from "./shortcuts";
+
+type Props = {
+  editor: NodeEditor<Schemes>;
+  area: AreaPlugin<Schemes, AreaExtra>;
+  container: HTMLElement;
+  selectableNodes: SelectableNodes;
+  history: HistoryPlugin<Schemes>;
+  connection: ConnectionPlugin<Schemes, AreaExtra>;
+  getLabels: () => LabelOption[];
+  toggleFullscreen?: () => void;
+  save?: () => void;
+};
+
+type MousePosition = {
+  clientX: number;
+  clientY: number;
+};
+
+function isTypingTarget(target: EventTarget | null) {
+  const element = target as HTMLElement | null;
+  const tag = element?.tagName;
+  return tag === "INPUT" || tag === "TEXTAREA" || !!element?.isContentEditable;
+}
+
+function getAreaPosition(
+  area: AreaPlugin<Schemes, AreaExtra>,
+  container: HTMLElement,
+  mousePosition: MousePosition,
+) {
+  const rect = container.getBoundingClientRect();
+  const transform = area.area.transform;
+  return {
+    x: (mousePosition.clientX - rect.left - transform.x) / transform.k,
+    y: (mousePosition.clientY - rect.top - transform.y) / transform.k,
+  };
+}
+
+async function createNodeAtMousePosition(
+  props: {
+    editor: NodeEditor<Schemes>;
+    area: AreaPlugin<Schemes, AreaExtra>;
+    container: HTMLElement;
+    selectableNodes: SelectableNodes;
+  },
+  node: Schemes["Node"],
+  mousePosition: MousePosition | null,
+) {
+  const { editor, area, container, selectableNodes } = props;
+  const position = mousePosition
+    ? getAreaPosition(area, container, mousePosition)
+    : { x: 0, y: 0 };
+
+  await editor.addNode(node);
+  await area.translate(node.id, {
+    x: position.x - node.width / 2,
+    y: position.y - node.height / 2,
+  });
+  await deselectAllNodes(selectableNodes, editor);
+  await selectableNodes.select(node.id, false);
+  await area.update("node", node.id);
+}
+
+/**
+ * Wires keyboard shortcuts for the canvas. The bindings themselves live in
+ * `shortcuts.ts` (the single source of truth shared with the help dialog); this
+ * module only maps each action to its behavior.
+ *
+ * Handlers run only for the focused editor instance (see `focusManager.ts`) and
+ * are ignored while an input/textarea is focused.
+ */
+export const setupKeyListeners = (props: Props) => {
+  const {
+    editor,
+    area,
+    container,
+    selectableNodes,
+    history,
+    connection,
+    getLabels,
+    toggleFullscreen,
+    save,
+  } = props;
+
+  let mousePosition: MousePosition | null = null;
+  let clipboard: Clipboard | null = null;
+
+  const handlePointerMove = (event: PointerEvent) => {
+    mousePosition = { clientX: event.clientX, clientY: event.clientY };
+  };
+
+  const handleFocusPointerDown = () => focusContainer(container);
+
+  container.addEventListener("pointermove", handlePointerMove);
+  container.addEventListener("pointerdown", handleFocusPointerDown, true);
+
+  const addNode = async (
+    event: KeyboardEvent,
+    createNode: () => Schemes["Node"],
+  ) => {
+    if (event.repeat || event.altKey) return;
+    await createNodeAtMousePosition(
+      { editor, area, container, selectableNodes },
+      createNode(),
+      mousePosition,
+    );
+  };
+
+  const behaviors: Record<
+    ShortcutAction,
+    (event: KeyboardEvent) => void | Promise<void>
+  > = {
+    selectAll: () => selectAllNodes(selectableNodes, editor),
+    copy: () => {
+      clipboard = copyNodes(editor, area) ?? clipboard;
+    },
+    paste: async () => {
+      if (!clipboard) return;
+      const pastePosition = mousePosition
+        ? getAreaPosition(area, container, mousePosition)
+        : clipboard.center;
+      await pasteNodes(
+        clipboard,
+        { editor, area, selectableNodes },
+        pastePosition,
+      );
+    },
+    cut: async () => {
+      clipboard = copyNodes(editor, area) ?? clipboard;
+      await deleteSelectedNodes(editor, area, history);
+    },
+    deleteSelection: () => deleteSelectedNodes(editor, area, history),
+    deselect: async () => {
+      connection.drop();
+      await deselectAllNodes(selectableNodes, editor);
+    },
+    undo: () => history.undo(),
+    redo: () => history.redo(),
+    addAnd: (event) => addNode(event, () => new AndNode()),
+    addOr: (event) => addNode(event, () => new OrNode()),
+    addLimit: (event) =>
+      addNode(event, () => new LimitNode({ labels: getLabels() })),
+    addResult: (event) => addNode(event, () => new ResultNode()),
+    addCount: (event) => addNode(event, () => new CountNode()),
+    addArea: (event) => addNode(event, () => new AreaNode()),
+    addPosition: (event) => addNode(event, () => new PositionNode()),
+    save: () => save?.(),
+    toggleFullscreen: () => toggleFullscreen?.(),
+  };
+
+  const handler = async (event: KeyboardEvent) => {
+    if (isTypingTarget(event.target)) return;
+    if (!isContainerFocused(container)) return;
+
+    const shortcut = findShortcut(event);
+    if (!shortcut) return;
+
+    event.preventDefault();
+    await behaviors[shortcut.action](event);
+  };
+
+  return {
+    handler,
+    dispose: () => {
+      container.removeEventListener("pointermove", handlePointerMove);
+      container.removeEventListener(
+        "pointerdown",
+        handleFocusPointerDown,
+        true,
+      );
+      releaseContainerFocus(container);
+    },
+  };
+};
diff --git a/apps/web/src/modules/evaluation/graph/editor/setup/setupMagneticConnection.ts b/apps/web/src/modules/evaluation/graph/editor/setup/setupMagneticConnection.ts
new file mode 100644
index 00000000..ec23523f
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/setup/setupMagneticConnection.ts
@@ -0,0 +1,255 @@
+import {
+  MAGNETIC_SNAP_DISTANCE,
+  MAGNETIC_SNAP_SOCKET_OFFSET,
+} from "@/modules/evaluation/graph/editor/constants";
+import type { Schemes } from "@/modules/evaluation/graph/editor/types";
+import { ClassicPreset, type NodeEditor } from "rete";
+import type { Area2D, AreaPlugin } from "rete-area-plugin";
+import {
+  type SocketData,
+  createPseudoconnection,
+} from "rete-connection-plugin";
+import { validateConnection } from "./connectionRules";
+import type { AreaExtra } from "./createEditor";
+
+type Point = { x: number; y: number };
+
+function nearest<T extends Point>(
+  points: T[],
+  target: Point,
+  max: number,
+): T | null {
+  let best: { point: T; dist: number } | null = null;
+  for (const point of points) {
+    const dist = Math.hypot(point.x - target.x, point.y - target.y);
+    if (dist > max) continue;
+    if (!best || dist < best.dist) best = { point, dist };
+  }
+  return best?.point ?? null;
+}
+
+type Props = {
+  editor: NodeEditor<Schemes>;
+  area: AreaPlugin<Schemes, AreaExtra>;
+};
+
+/**
+ * Magnetic connections — snap a new connection to the nearest compatible socket
+ * within DISTANCE so the user doesn't have to aim precisely.
+ *
+ * Deliberately does NOT add a pipe to the connection plugin: rete's re-pick flow
+ * (PickedExisting) finishes setting itself up in an async microtask after the
+ * connectionpick emit, and any extra connection pipe shifts that timing enough
+ * to break re-pick.
+ */
+export function setupMagneticConnection(props: Props): { dispose: () => void } {
+  const { editor, area } = props;
+
+  const sockets = new Map<HTMLElement, SocketData>();
+  const pseudo = createPseudoconnection<Schemes, Area2D<Schemes>>({
+    isMagnetic: true,
+  } as Partial<Schemes["Connection"]>);
+  const pseudoArea = area as unknown as AreaPlugin<Schemes, Area2D<Schemes>>;
+
+  let picked: SocketData | null = null;
+  let target: (SocketData & Point) | null = null;
+  let cancelled = false;
+
+  function inputConnection(socket: SocketData) {
+    if (socket.side !== "input") return null;
+    return (
+      editor
+        .getConnections()
+        .find(
+          (conn) =>
+            conn.target === socket.nodeId &&
+            String(conn.targetInput) === socket.key,
+        ) ?? null
+    );
+  }
+
+  function findSocketData(
+    nodeId: string,
+    side: SocketData["side"],
+    key: string,
+  ): SocketData | null {
+    for (const data of sockets.values()) {
+      if (data.nodeId === nodeId && data.side === side && data.key === key) {
+        return data;
+      }
+    }
+    return null;
+  }
+
+  function clientToContent(clientX: number, clientY: number): Point {
+    const box = area.container.getBoundingClientRect();
+    const { x, y, k } = area.area.transform;
+    return { x: (clientX - box.left - x) / k, y: (clientY - box.top - y) / k };
+  }
+
+  function socketContentCenter(element: HTMLElement): Point {
+    const rect = element.getBoundingClientRect();
+    return clientToContent(
+      rect.left + rect.width / 2,
+      rect.top + rect.height / 2,
+    );
+  }
+
+  function socketAt(clientX: number, clientY: number): SocketData | null {
+    for (const element of document.elementsFromPoint(clientX, clientY)) {
+      const data = sockets.get(element as HTMLElement);
+      if (data) return data;
+    }
+    return null;
+  }
+
+  function asSourceTarget(from: SocketData, to: SocketData) {
+    if (from.side === to.side) return null;
+    const [source, target] = from.side === "output" ? [from, to] : [to, from];
+    return {
+      source: { nodeId: source.nodeId, key: source.key },
+      target: { nodeId: target.nodeId, key: target.key },
+    };
+  }
+
+  function canConnect(from: SocketData, to: SocketData): boolean {
+    const ordered = asSourceTarget(from, to);
+    return ordered ? validateConnection(editor, ordered.source, ordered.target).ok : false;
+  }
+
+  function clearPreview() {
+    target = null;
+    if (pseudo.isMounted()) pseudo.unmount(pseudoArea);
+  }
+
+  function reset() {
+    picked = null;
+    cancelled = false;
+    clearPreview();
+  }
+
+  function refreshMagnet(clientX: number, clientY: number) {
+    if (!picked) return;
+    const source = picked;
+    const point = clientToContent(clientX, clientY);
+
+    const candidates: (SocketData & Point)[] = [];
+    for (const [element, socket] of sockets) {
+      if (socket.side === source.side || socket.nodeId === source.nodeId) {
+        continue;
+      }
+      const center = socketContentCenter(element);
+      candidates.push({ ...socket, x: center.x, y: center.y });
+    }
+
+    const found = nearest(candidates, point, MAGNETIC_SNAP_DISTANCE);
+    target = found && canConnect(source, found) ? found : null;
+
+    if (target) {
+      if (!pseudo.isMounted()) pseudo.mount(pseudoArea);
+      pseudo.render(
+        pseudoArea,
+        {
+          x:
+            target.x +
+            (target.side === "input"
+              ? -MAGNETIC_SNAP_SOCKET_OFFSET
+              : MAGNETIC_SNAP_SOCKET_OFFSET),
+          y: target.y,
+        },
+        source,
+      );
+    } else if (pseudo.isMounted()) {
+      pseudo.unmount(pseudoArea);
+    }
+  }
+
+  function commit() {
+    if (!picked || !target) return;
+    const ordered = asSourceTarget(picked, target);
+    if (!ordered) return;
+
+    const sourceNode = editor.getNode(ordered.source.nodeId);
+    const targetNode = editor.getNode(ordered.target.nodeId);
+    if (
+      !sourceNode ||
+      !targetNode ||
+      !validateConnection(editor, ordered.source, ordered.target).ok
+    ) {
+      return;
+    }
+
+    void editor.addConnection(
+      new ClassicPreset.Connection(
+        sourceNode as ClassicPreset.Node,
+        ordered.source.key,
+        targetNode as ClassicPreset.Node,
+        ordered.target.key,
+      ) as unknown as Schemes["Connection"],
+    );
+  }
+
+  function onPointerDown(event: PointerEvent) {
+    reset();
+    const socket = socketAt(event.clientX, event.clientY);
+    if (!socket) return;
+
+    const existing = inputConnection(socket);
+    if (existing) {
+      picked = findSocketData(
+        existing.source,
+        "output",
+        String(existing.sourceOutput),
+      );
+      return;
+    }
+
+    picked = socket;
+  }
+
+  function onPointerMove(event: PointerEvent) {
+    if (!picked) return;
+    if (event.buttons === 0) {
+      reset();
+      return;
+    }
+    refreshMagnet(event.clientX, event.clientY);
+  }
+
+  function onPointerUp(event: PointerEvent) {
+    if (picked && target && !cancelled && !socketAt(event.clientX, event.clientY)) commit();
+    reset();
+  }
+
+  function onKeyDown(event: KeyboardEvent) {
+    if (event.key === "Escape" && picked) cancelled = true;
+  }
+
+  area.addPipe((context) => {
+    if (!context || typeof context !== "object" || !("type" in context)) {
+      return context;
+    }
+    if (context.type === "render" && context.data.type === "socket") {
+      const data = context.data as unknown as SocketData;
+      sockets.set(data.element, data);
+    } else if (context.type === "unmount") {
+      sockets.delete(context.data.element);
+    }
+    return context;
+  });
+
+  window.addEventListener("pointerdown", onPointerDown, true);
+  window.addEventListener("pointermove", onPointerMove, true);
+  window.addEventListener("pointerup", onPointerUp, true);
+  window.addEventListener("keydown", onKeyDown, true);
+
+  return {
+    dispose() {
+      window.removeEventListener("pointerdown", onPointerDown, true);
+      window.removeEventListener("pointermove", onPointerMove, true);
+      window.removeEventListener("pointerup", onPointerUp, true);
+      window.removeEventListener("keydown", onKeyDown, true);
+      if (pseudo.isMounted()) pseudo.unmount(pseudoArea);
+    },
+  };
+}
diff --git a/apps/web/src/modules/evaluation/graph/editor/setup/setupRender.ts b/apps/web/src/modules/evaluation/graph/editor/setup/setupRender.ts
new file mode 100644
index 00000000..66b9a8cd
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/setup/setupRender.ts
@@ -0,0 +1,203 @@
+import { EnabledControl } from "@/modules/evaluation/graph/editor/controls/enabled";
+import { IntegerRangeControl } from "@/modules/evaluation/graph/editor/controls/integerRange";
+import { LabelControl } from "@/modules/evaluation/graph/editor/controls/label";
+import { NameControl } from "@/modules/evaluation/graph/editor/controls/name";
+import { PercentageRangeControl } from "@/modules/evaluation/graph/editor/controls/percentageRange";
+import { PositionControl } from "@/modules/evaluation/graph/editor/controls/position";
+import { QuantifierTypeControl } from "@/modules/evaluation/graph/editor/controls/quantifierType";
+import { QuantifierUnitsControl } from "@/modules/evaluation/graph/editor/controls/quantifierUnits";
+import { ActionNodeBase } from "@/modules/evaluation/graph/editor/nodes/action/actionBase";
+import { AlertNode } from "@/modules/evaluation/graph/editor/nodes/action/alert";
+import { WarningNode } from "@/modules/evaluation/graph/editor/nodes/action/warning";
+import { LimitNode } from "@/modules/evaluation/graph/editor/nodes/limit/limit";
+import { AreaNode } from "@/modules/evaluation/graph/editor/nodes/limitItem/area";
+import { CountNode } from "@/modules/evaluation/graph/editor/nodes/limitItem/count";
+import { PositionNode } from "@/modules/evaluation/graph/editor/nodes/limitItem/position";
+import { AndNode } from "@/modules/evaluation/graph/editor/nodes/logical/and";
+import { OrNode } from "@/modules/evaluation/graph/editor/nodes/logical/or";
+import { ResultNode } from "@/modules/evaluation/graph/editor/nodes/result/result";
+import { BooleanSocket } from "@/modules/evaluation/graph/editor/sockets/booleanSocket";
+import { RuleSocket } from "@/modules/evaluation/graph/editor/sockets/ruleSocket";
+import type { Schemes } from "@/modules/evaluation/graph/editor/types";
+import { createBooleanConnectionView } from "@/modules/evaluation/graph/editor/ui/connections/BooleanConnectionView";
+import { CustomConnectionView } from "@/modules/evaluation/graph/editor/ui/connections/CustomConnectionView";
+import { MagneticConnectionView } from "@/modules/evaluation/graph/editor/ui/connections/MagneticConnectionView";
+import { createLimitItemConnectionView } from "@/modules/evaluation/graph/editor/ui/connections/LimitItemConnectionView";
+import { IntegerRangeControlView } from "@/modules/evaluation/graph/editor/ui/controls/IntegerRangeControlView";
+import { LabelControlView } from "@/modules/evaluation/graph/editor/ui/controls/LabelControlView";
+import { NameControlView } from "@/modules/evaluation/graph/editor/ui/controls/NameControlView";
+import { PositionControlView } from "@/modules/evaluation/graph/editor/ui/controls/PositionControlView";
+import { QuantifierTypeControlView } from "@/modules/evaluation/graph/editor/ui/controls/QuantifierTypeControlView";
+import { QuantifierUnitsControlView } from "@/modules/evaluation/graph/editor/ui/controls/QuantifierUnitsControlView";
+import { EnabledControlView } from "@/modules/evaluation/graph/editor/ui/controls/EnabledControlView";
+import { PercentageRangeControlView } from "@/modules/evaluation/graph/editor/ui/controls/PercentageRangeControlView";
+import { ActionNodeView } from "@/modules/evaluation/graph/editor/ui/nodes/ActionNodeView";
+import { AreaNodeView } from "@/modules/evaluation/graph/editor/ui/nodes/AreaNodeView";
+import { CountNodeView } from "@/modules/evaluation/graph/editor/ui/nodes/CountNodeView";
+import { LimitNodeView } from "@/modules/evaluation/graph/editor/ui/nodes/LimitNodeView";
+import { LogicalNodeView } from "@/modules/evaluation/graph/editor/ui/nodes/LogicalNodeView";
+import { PositionNodeView } from "@/modules/evaluation/graph/editor/ui/nodes/PositionNodeView";
+import { ResultNodeView } from "@/modules/evaluation/graph/editor/ui/nodes/ResultNodeView";
+import { SocketView } from "@/modules/evaluation/graph/editor/ui/sockets/SocketView";
+import { createRoot } from "react-dom/client";
+import { NodeEditor } from "rete";
+import type { AreaPlugin } from "rete-area-plugin";
+import { Presets, ReactPlugin } from "rete-react-plugin";
+import type { AreaExtra } from "./createEditor";
+
+type Props = {
+  editor: NodeEditor<Schemes>;
+  area: AreaPlugin<Schemes, AreaExtra>;
+};
+
+/**
+ * Configures the React rendering layer for the editor.
+ *
+ * Rete dispatches rendering through a `customize` object of callbacks. Each
+ * callback receives a `context` with a `payload` holding the data model
+ * instance, so you branch on `instanceof` to map nodes/controls/connections/
+ * sockets to their specific React components.
+ *
+ * Connection views that need to re-render on state changes (e.g. OR/NOT toggle)
+ * are created via factories that receive an `area.update` callback, because
+ * Rete does not automatically re-render connections when their data model changes.
+ */
+export function setupRender(props: Props): ReactPlugin<Schemes, AreaExtra> {
+  const { editor, area } = props;
+
+  const render = new ReactPlugin<Schemes, AreaExtra>({ createRoot });
+  const refreshConnection = (id: string) => {
+    void area.update("connection", id);
+  };
+  const limitItemConnectionView = createLimitItemConnectionView(refreshConnection);
+  const booleanConnectionView = createBooleanConnectionView(refreshConnection);
+
+  render.addPreset(
+    Presets.classic.setup({
+      customize: {
+        control(context) {
+          if (context.payload instanceof PercentageRangeControl) {
+            return PercentageRangeControlView;
+          }
+          if (context.payload instanceof QuantifierUnitsControl) {
+            return QuantifierUnitsControlView;
+          }
+          if (context.payload instanceof IntegerRangeControl) {
+            return IntegerRangeControlView;
+          }
+          if (context.payload instanceof QuantifierTypeControl) {
+            return QuantifierTypeControlView;
+          }
+          if (context.payload instanceof PositionControl) {
+            return PositionControlView;
+          }
+          if (context.payload instanceof NameControl) {
+            return NameControlView;
+          }
+          if (context.payload instanceof LabelControl) {
+            return LabelControlView;
+          }
+          if (context.payload instanceof EnabledControl) {
+            return EnabledControlView;
+          }
+          return null;
+        },
+        connection(context) {
+          if ((context.payload as { isMagnetic?: boolean }).isMagnetic) {
+            return MagneticConnectionView;
+          }
+
+          const sourceNode = editor.getNode(context.payload.source);
+          const targetNode = editor.getNode(context.payload.target);
+
+          if (!sourceNode || !targetNode) {
+            return CustomConnectionView;
+          }
+
+          const sourcePort = (
+            sourceNode.outputs as Record<
+              string,
+              { socket: unknown } | undefined
+            >
+          )[String(context.payload.sourceOutput)];
+
+          const targetPort = (
+            targetNode.inputs as Record<string, { socket: unknown } | undefined>
+          )[String(context.payload.targetInput)];
+
+          const sourceSocket = sourcePort?.socket;
+          const targetSocket = targetPort?.socket;
+
+          if (
+            sourceSocket instanceof RuleSocket &&
+            targetSocket instanceof RuleSocket
+          ) {
+            return limitItemConnectionView;
+          }
+
+          if (
+            sourceSocket instanceof BooleanSocket &&
+            targetSocket instanceof BooleanSocket
+          ) {
+            if (targetNode instanceof ActionNodeBase){
+              return CustomConnectionView;
+            }
+            if (
+              targetNode instanceof ResultNode &&
+              (sourceNode instanceof AndNode || sourceNode instanceof OrNode)
+            ) {
+              return CustomConnectionView;
+            }
+
+            return booleanConnectionView;
+          }
+
+          return CustomConnectionView;
+        },
+        socket(context) {
+          if (
+            context.payload instanceof RuleSocket ||
+            context.payload instanceof BooleanSocket
+          ) {
+            return SocketView;
+          }
+
+          return Presets.classic.Socket;
+        },
+        node(context) {
+          if (context.payload instanceof PositionNode) {
+            return PositionNodeView;
+          }
+          if (context.payload instanceof AreaNode) {
+            return AreaNodeView;
+          }
+          if (context.payload instanceof CountNode) {
+            return CountNodeView;
+          }
+          if (context.payload instanceof LimitNode) {
+            return LimitNodeView;
+          }
+          if (
+            context.payload instanceof AndNode ||
+            context.payload instanceof OrNode
+          ) {
+            return LogicalNodeView;
+          }
+          if (
+            context.payload instanceof AlertNode ||
+            context.payload instanceof WarningNode
+          ) {
+            return ActionNodeView;
+          }
+          if (context.payload instanceof ResultNode) {
+            return ResultNodeView;
+          }
+
+          return Presets.classic.Node;
+        },
+      },
+    }),
+  );
+
+  return render;
+}
diff --git a/apps/web/src/modules/evaluation/graph/editor/setup/setupScopes.ts b/apps/web/src/modules/evaluation/graph/editor/setup/setupScopes.ts
new file mode 100644
index 00000000..b2715162
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/setup/setupScopes.ts
@@ -0,0 +1,54 @@
+import { setupCustomScopePreset } from "@/modules/evaluation/graph/editor/presets/customScopePreset";
+import type { Schemes } from "@/modules/evaluation/graph/editor/types";
+import { isScopeNode } from "@/modules/evaluation/graph/editor/utils/scopes";
+import type { NodeEditor } from "rete";
+import { ScopesPlugin } from "rete-scopes-plugin";
+
+type Props = {
+  editor: NodeEditor<Schemes>;
+};
+
+const DEFAULT_PADDING = { top: 100, right: 100, bottom: 100, left: 100 };
+
+/**
+ * Sets up the scopes plugin, which lets nodes act as visual containers for
+ * other nodes. Dragging a child inside a scope makes it a child in the data
+ * graph, and the scope node resizes to wrap its children.
+ *
+ * `padding` controls breathing room around children inside their parent.
+ * `size` enforces a minimum so scope nodes don't collapse when emptied.
+ */
+export function setupScopes(props: Props): ScopesPlugin<Schemes, never> {
+  const { editor } = props;
+
+  const scopes = new ScopesPlugin<Schemes>({
+    padding: (nodeId) => {
+      const node = editor.getNode(nodeId);
+
+      if (isScopeNode(node)) {
+        return node.getPadding();
+      }
+
+      return DEFAULT_PADDING;
+    },
+
+    size: (nodeId, size) => {
+      const node = editor.getNode(nodeId);
+
+      if (!isScopeNode(node)) {
+        return size;
+      }
+
+      const min = node.getMinSize();
+
+      return {
+        width: Math.max(size.width, min.width),
+        height: Math.max(size.height, min.height),
+      };
+    },
+  });
+
+  scopes.addPreset(setupCustomScopePreset(scopes));
+
+  return scopes;
+}
diff --git a/apps/web/src/modules/evaluation/graph/editor/setup/setupSelector.ts b/apps/web/src/modules/evaluation/graph/editor/setup/setupSelector.ts
new file mode 100644
index 00000000..87659e74
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/setup/setupSelector.ts
@@ -0,0 +1,77 @@
+import { LimitNode } from "@/modules/evaluation/graph/editor/nodes/limit/limit";
+import type { Schemes } from "@/modules/evaluation/graph/editor/types";
+import type { NodeEditor } from "rete";
+import type { AreaPlugin } from "rete-area-plugin";
+import { AreaExtensions } from "rete-area-plugin";
+import type { AreaExtra } from "./createEditor";
+
+type Props = {
+  editor: NodeEditor<Schemes>;
+  area: AreaPlugin<Schemes, AreaExtra>;
+};
+
+type SelectorEntity = {
+  label: string;
+  id: string;
+  unselect(): void | Promise<void>;
+  translate(dx: number, dy: number): void | Promise<void>;
+};
+
+export type SelectableNodesApi = ReturnType<
+  typeof AreaExtensions.selectableNodes
+>;
+
+export function setupSelector(props: Props) {
+  const { editor, area } = props;
+
+  const baseSelector = AreaExtensions.selector();
+  const accumulating = AreaExtensions.accumulateOnCtrl();
+
+  const baseAdd = baseSelector.add.bind(baseSelector);
+  const baseRemove = baseSelector.remove.bind(baseSelector);
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const selector = Object.create(baseSelector) as any;
+
+  const selectableNodes: SelectableNodesApi = AreaExtensions.selectableNodes(
+    area,
+    selector,
+    {
+      accumulating,
+    },
+  );
+
+  selector.add = async (entity: SelectorEntity, accumulate: boolean) => {
+    await baseAdd(entity, accumulate);
+    if (entity.label !== "node") return;
+    const node = editor.getNode(entity.id);
+    if (!(node instanceof LimitNode)) return;
+    for (const child of editor
+      .getNodes()
+      .filter((n) => n.parent === entity.id)) {
+      await selectableNodes.select(child.id, true);
+    }
+  };
+
+  selector.remove = async (entity: { label: string; id: string }) => {
+    if (entity.label === "node") {
+      const node = editor.getNode(entity.id);
+      if (
+        node?.parent &&
+        baseSelector.isSelected({ label: "node", id: node.parent })
+      ) {
+        return;
+      }
+      if (node instanceof LimitNode) {
+        for (const child of editor
+          .getNodes()
+          .filter((n) => n.parent === entity.id)) {
+          await baseRemove({ label: "node", id: child.id });
+        }
+      }
+    }
+    await baseRemove(entity);
+  };
+
+  return { selectableNodes };
+}
diff --git a/apps/web/src/modules/evaluation/graph/editor/setup/setupValidation.ts b/apps/web/src/modules/evaluation/graph/editor/setup/setupValidation.ts
new file mode 100644
index 00000000..cb60bb56
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/setup/setupValidation.ts
@@ -0,0 +1,215 @@
+import { ValidatableControl } from "@/modules/evaluation/graph/editor/controls/core/validatableControl";
+import type { Schemes } from "@/modules/evaluation/graph/editor/types";
+import type { ValidationResult } from "@/modules/evaluation/graph/editor/validation/types";
+import { validateGraph } from "@/modules/evaluation/graph/editor/validation/validateGraph";
+import type { NodeEditor } from "rete";
+import type { AreaPlugin } from "rete-area-plugin";
+import type { AreaExtra } from "./createEditor";
+
+type ValidationController = {
+  runValidation: () => Promise<ValidationResult>;
+  validateNow: () => Promise<ValidationResult>;
+  enableLiveValidation: () => void;
+  disableLiveValidation: () => void;
+  isLiveValidationEnabled: () => boolean;
+  clearValidation: () => Promise<void>;
+  destroy: () => void;
+};
+
+type Props = {
+  editor: NodeEditor<Schemes>;
+  area: AreaPlugin<Schemes, AreaExtra>;
+};
+
+type SubscribableControl = {
+  subscribe: (listener: () => void) => () => void;
+};
+
+function isSubscribableControl(
+  control: unknown,
+): control is SubscribableControl {
+  return (
+    typeof control === "object" &&
+    control !== null &&
+    "subscribe" in control &&
+    typeof control.subscribe === "function"
+  );
+}
+
+/**
+ * Sets up graph validation and returns a controller to drive it externally.
+ *
+ * Validation runs are coalesced: if a run is already in progress when a new
+ * trigger arrives, it is queued and executed immediately after the current run
+ * finishes. This prevents redundant re-renders when many nodes/connections
+ * change at once (e.g. during layout or deserialization).
+ *
+ * Live validation (opt-in via `enableLiveValidation`) runs automatically on
+ * graph structure changes and control value changes. It is off by default so
+ * bulk operations can suppress noisy intermediate error states.
+ */
+export function setupValidation(props: Props): ValidationController {
+  const { editor, area } = props;
+
+  let liveValidationEnabled = false;
+
+  let validationQueued = false;
+  let runningPromise: Promise<ValidationResult> | null = null;
+
+  let unsubscribeControlChanges: Array<() => void> = [];
+
+  async function runOnce(): Promise<ValidationResult> {
+    const result = validateGraph(editor);
+    const nodes = editor.getNodes();
+
+    for (const node of nodes) {
+      node.setIssues(result.nodeIssues.get(node.id) ?? []);
+
+      for (const [controlKey, control] of Object.entries(node.controls)) {
+        if (control instanceof ValidatableControl) {
+          control.setValidationIssues(
+            result.controlIssues.get(node.id)?.[controlKey] ?? [],
+          );
+        }
+      }
+    }
+
+    await Promise.all(nodes.map((node) => area.update("node", node.id)));
+
+    return result;
+  }
+
+  function runValidation(): Promise<ValidationResult> {
+    if (runningPromise) {
+      validationQueued = true;
+      return runningPromise;
+    }
+
+    runningPromise = (async () => {
+      let latest!: ValidationResult;
+      do {
+        validationQueued = false;
+        latest = await runOnce();
+      } while (validationQueued);
+      return latest;
+    })();
+
+    return runningPromise.finally(() => {
+      runningPromise = null;
+    });
+  }
+
+  function validateNow() {
+    return runValidation();
+  }
+
+  function requestValidation() {
+    if (!liveValidationEnabled) return;
+
+    void runValidation();
+  }
+
+  function unsubscribeFromControlChanges() {
+    for (const unsubscribe of unsubscribeControlChanges) {
+      unsubscribe();
+    }
+
+    unsubscribeControlChanges = [];
+  }
+
+  function subscribeToControlChanges() {
+    unsubscribeFromControlChanges();
+
+    for (const node of editor.getNodes()) {
+      for (const control of Object.values(node.controls)) {
+        if (!isSubscribableControl(control)) continue;
+
+        const unsubscribe = control.subscribe(() => {
+          requestValidation();
+        });
+
+        unsubscribeControlChanges.push(unsubscribe);
+      }
+    }
+  }
+
+  function refreshControlSubscriptions() {
+    subscribeToControlChanges();
+  }
+
+  function enableLiveValidation() {
+    liveValidationEnabled = true;
+    refreshControlSubscriptions();
+  }
+
+  function disableLiveValidation() {
+    liveValidationEnabled = false;
+    unsubscribeFromControlChanges();
+  }
+
+  function isLiveValidationEnabled() {
+    return liveValidationEnabled;
+  }
+
+  async function clearValidation() {
+    const nodes = editor.getNodes();
+
+    for (const node of nodes) {
+      node.clearIssues();
+
+      for (const control of Object.values(node.controls)) {
+        if (control instanceof ValidatableControl) {
+          control.clearValidationIssues();
+        }
+      }
+    }
+
+    await Promise.all(nodes.map((node) => area.update("node", node.id)));
+  }
+
+  function destroy() {
+    unsubscribeFromControlChanges();
+  }
+
+  area.addPipe((context) => {
+    if (
+      liveValidationEnabled &&
+      (context.type === "nodecreated" || context.type === "noderemoved")
+    ) {
+      refreshControlSubscriptions();
+    }
+
+    if (!liveValidationEnabled) return context;
+
+    if (
+      context.type === "nodecreated" ||
+      context.type === "noderemoved" ||
+      context.type === "connectioncreated" ||
+      context.type === "connectionremoved"
+    ) {
+      void runValidation();
+    }
+
+    if (context.type === "nodedragged") {
+      // nodedragged fires before the final position is committed; defer by one
+      // tick so position-dependent rules see the settled coordinates.
+      setTimeout(() => {
+        void runValidation();
+      }, 0);
+    }
+
+    return context;
+  });
+
+  subscribeToControlChanges();
+
+  return {
+    runValidation,
+    validateNow,
+    enableLiveValidation,
+    disableLiveValidation,
+    isLiveValidationEnabled,
+    clearValidation,
+    destroy,
+  };
+}
diff --git a/apps/web/src/modules/evaluation/graph/editor/setup/shortcuts.ts b/apps/web/src/modules/evaluation/graph/editor/setup/shortcuts.ts
new file mode 100644
index 00000000..e61ca705
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/setup/shortcuts.ts
@@ -0,0 +1,216 @@
+/**
+ * Single source of truth for the editor's keyboard shortcuts.
+ *
+ * Both the key handler (`setupKeyListeners.ts`) and the help dialog
+ * (`GraphKeybindsDialog.tsx`) are derived from this list, so a binding and its
+ * documentation can never drift apart — add or change a shortcut here only.
+ */
+
+export type ShortcutAction =
+  | "selectAll"
+  | "copy"
+  | "paste"
+  | "cut"
+  | "deleteSelection"
+  | "deselect"
+  | "undo"
+  | "redo"
+  | "addAnd"
+  | "addOr"
+  | "addLimit"
+  | "addResult"
+  | "addCount"
+  | "addArea"
+  | "addPosition"
+  | "save"
+  | "toggleFullscreen";
+
+export type ShortcutGroup =
+  | "Selection & clipboard"
+  | "History"
+  | "Add node at cursor"
+  | "Actions";
+
+export type ShortcutDefinition = {
+  action: ShortcutAction;
+  /** Canonical `event.key`. Single letters are stored lowercase and matched case-insensitively. */
+  key: string;
+  /** Requires Ctrl (Windows/Linux) or Cmd (macOS). */
+  mod?: boolean;
+  /**
+   * When defined, Shift must be held (`true`) or absent (`false`) for a match.
+   * Used to disambiguate undo (Cmd+Z) from redo (Cmd+Shift+Z). When omitted,
+   * Shift is ignored (so e.g. both "q" and "Q" trigger add-And).
+   */
+  shift?: boolean;
+  group: ShortcutGroup;
+  description: string;
+};
+
+export const GROUP_ORDER: ShortcutGroup[] = [
+  "Add node at cursor",
+  "Selection & clipboard",
+  "History",
+  "Actions",
+];
+
+export const SHORTCUTS: ShortcutDefinition[] = [
+  // Selection & clipboard
+  {
+    action: "selectAll",
+    key: "a",
+    mod: true,
+    group: "Selection & clipboard",
+    description: "Select all nodes",
+  },
+  {
+    action: "copy",
+    key: "c",
+    mod: true,
+    group: "Selection & clipboard",
+    description: "Copy selected nodes",
+  },
+  {
+    action: "paste",
+    key: "v",
+    mod: true,
+    group: "Selection & clipboard",
+    description: "Paste at cursor",
+  },
+  {
+    action: "cut",
+    key: "x",
+    mod: true,
+    group: "Selection & clipboard",
+    description: "Cut",
+  },
+  {
+    action: "deleteSelection",
+    key: "Backspace",
+    group: "Selection & clipboard",
+    description: "Delete selected nodes",
+  },
+  {
+    action: "deselect",
+    key: "Escape",
+    group: "Selection & clipboard",
+    description: "Deselect / cancel pending connection",
+  },
+
+  // History
+  {
+    action: "undo",
+    key: "z",
+    mod: true,
+    shift: false,
+    group: "History",
+    description: "Undo",
+  },
+  {
+    action: "redo",
+    key: "z",
+    mod: true,
+    shift: true,
+    group: "History",
+    description: "Redo",
+  },
+
+  // Add node at cursor
+  {
+    action: "addAnd",
+    key: "a",
+    group: "Add node at cursor",
+    description: "And",
+  },
+  { action: "addOr", key: "o", group: "Add node at cursor", description: "Or" },
+  {
+    action: "addLimit",
+    key: "l",
+    group: "Add node at cursor",
+    description: "Check",
+  },
+  {
+    action: "addResult",
+    key: "r",
+    group: "Add node at cursor",
+    description: "Result",
+  },
+  {
+    action: "addCount",
+    key: "1",
+    group: "Add node at cursor",
+    description: "Count",
+  },
+  {
+    action: "addArea",
+    key: "2",
+    group: "Add node at cursor",
+    description: "Area",
+  },
+  {
+    action: "addPosition",
+    key: "3",
+    group: "Add node at cursor",
+    description: "Position",
+  },
+
+  // Actions
+  {
+    action: "save",
+    key: "s",
+    mod: true,
+    group: "Actions",
+    description: "Save test case",
+  },
+  {
+    action: "toggleFullscreen",
+    key: "f",
+    group: "Actions",
+    description: "Toggle full screen",
+  },
+];
+
+/** True when a keyboard event satisfies a shortcut definition. */
+export function matchesShortcut(
+  event: Pick<KeyboardEvent, "key" | "ctrlKey" | "metaKey" | "shiftKey">,
+  definition: ShortcutDefinition,
+): boolean {
+  const eventKey = event.key.length === 1 ? event.key.toLowerCase() : event.key;
+  if (eventKey !== definition.key) return false;
+
+  const mod = event.ctrlKey || event.metaKey;
+  if (Boolean(definition.mod) !== mod) return false;
+
+  if (definition.shift !== undefined && definition.shift !== event.shiftKey) {
+    return false;
+  }
+
+  return true;
+}
+
+/** Finds the shortcut a keyboard event triggers, if any. */
+export function findShortcut(
+  event: Pick<KeyboardEvent, "key" | "ctrlKey" | "metaKey" | "shiftKey">,
+): ShortcutDefinition | undefined {
+  return SHORTCUTS.find((definition) => matchesShortcut(event, definition));
+}
+
+const KEY_LABELS: Record<string, string> = {
+  Escape: "Esc",
+  Backspace: "Backspace",
+};
+
+/**
+ * Renders a shortcut's keys for display, e.g. `["⌘", "Shift", "Z"]`.
+ * `mod` resolves to the platform modifier symbol passed in.
+ */
+export function formatShortcutKeys(
+  definition: ShortcutDefinition,
+  modLabel: string,
+): string[] {
+  const keys: string[] = [];
+  if (definition.mod) keys.push(modLabel);
+  if (definition.shift) keys.push("Shift");
+  keys.push(KEY_LABELS[definition.key] ?? definition.key.toUpperCase());
+  return keys;
+}
diff --git a/apps/web/src/modules/evaluation/graph/editor/sockets/appSocket.ts b/apps/web/src/modules/evaluation/graph/editor/sockets/appSocket.ts
new file mode 100644
index 00000000..a34ad5cf
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/sockets/appSocket.ts
@@ -0,0 +1,9 @@
+import { ClassicPreset } from "rete";
+
+export abstract class AppSocket extends ClassicPreset.Socket {
+  connected: boolean = false;
+  constructor(label: string) {
+    super(label);
+  }
+  abstract isCompatibleWith(socket: ClassicPreset.Socket): boolean;
+}
diff --git a/apps/web/src/modules/evaluation/graph/editor/sockets/booleanSocket.ts b/apps/web/src/modules/evaluation/graph/editor/sockets/booleanSocket.ts
new file mode 100644
index 00000000..84f32043
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/sockets/booleanSocket.ts
@@ -0,0 +1,12 @@
+import { ClassicPreset } from "rete";
+import { AppSocket } from "./appSocket";
+
+export class BooleanSocket extends AppSocket {
+  constructor() {
+    super("Boolean");
+  }
+
+  isCompatibleWith(socket: ClassicPreset.Socket) {
+    return socket instanceof BooleanSocket;
+  }
+}
diff --git a/apps/web/src/modules/evaluation/graph/editor/sockets/ruleSocket.ts b/apps/web/src/modules/evaluation/graph/editor/sockets/ruleSocket.ts
new file mode 100644
index 00000000..4f0e260b
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/sockets/ruleSocket.ts
@@ -0,0 +1,12 @@
+import { ClassicPreset } from "rete";
+import { AppSocket } from "./appSocket";
+
+export class RuleSocket extends AppSocket {
+  constructor() {
+    super("Rule");
+  }
+
+  isCompatibleWith(socket: ClassicPreset.Socket) {
+    return socket instanceof RuleSocket;
+  }
+}
diff --git a/apps/web/src/modules/evaluation/graph/editor/types.ts b/apps/web/src/modules/evaluation/graph/editor/types.ts
new file mode 100644
index 00000000..96a6a2e0
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/types.ts
@@ -0,0 +1,32 @@
+import type { ClassicPreset, GetSchemes } from "rete";
+import type { AreaNode } from "./nodes/limitItem/area";
+import type { CountNode } from "./nodes/limitItem/count";
+import type { PositionNode } from "./nodes/limitItem/position";
+import type { BooleanConnection } from "./connections/booleanConnection";
+import type { LimitItemConnection } from "./connections/limitItemConnection";
+import type { AlertNode } from "./nodes/action/alert";
+import type { WarningNode } from "./nodes/action/warning";
+import type { LimitNode } from "./nodes/limit/limit";
+import type { AndNode } from "./nodes/logical/and";
+import type { OrNode } from "./nodes/logical/or";
+import type { ResultNode } from "./nodes/result/result";
+
+export type NodeGroup = "rule" | "logical" | "limit" | "action" | "result";
+
+export type LimitItemProps = CountNode | PositionNode | AreaNode;
+export type BooleanNodeProps =
+  | AndNode
+  | OrNode
+  | LimitNode
+  | WarningNode
+  | AlertNode
+  | ResultNode;
+export type NodeProps = LimitItemProps | BooleanNodeProps;
+
+export type ConnProps = LimitItemConnection | BooleanConnection;
+
+export type Schemes = GetSchemes<NodeProps, ConnProps>;
+
+export type Listener = () => void;
+export type NoSockets = Record<never, ClassicPreset.Socket>;
+export type NoControls = Record<never, ClassicPreset.Control>;
diff --git a/apps/web/src/modules/evaluation/graph/editor/ui/components/BooleanConnectionToggle.tsx b/apps/web/src/modules/evaluation/graph/editor/ui/components/BooleanConnectionToggle.tsx
new file mode 100644
index 00000000..8dd4ed6f
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/ui/components/BooleanConnectionToggle.tsx
@@ -0,0 +1,36 @@
+import { Button } from "@/modules/shadcn/ui/button";
+
+type Props = {
+  x: number;
+  y: number;
+  label: string;
+  onToggle: () => void;
+};
+
+export function BooleanConnectionToggle(props: Props) {
+  const { x, y, label, onToggle } = props;
+
+  return (
+    <div
+      className="pointer-events-none absolute z-[9999] -translate-x-1/2 -translate-y-1/2"
+      style={{
+        left: x,
+        top: y,
+      }}
+    >
+      <Button
+        type="button"
+        variant="outline"
+        size="sm"
+        onPointerDown={(e) => e.stopPropagation()}
+        onClick={(e) => {
+          e.stopPropagation();
+          onToggle();
+        }}
+        className="pointer-events-auto h-6 w-12 rounded-full border-2 border-zinc-300 bg-white px-0 text-[11px] font-semibold text-zinc-400 shadow-sm hover:border-zinc-400"
+      >
+        {label.toUpperCase()}
+      </Button>
+    </div>
+  );
+}
diff --git a/apps/web/src/modules/evaluation/graph/editor/ui/components/HatchedBox.tsx b/apps/web/src/modules/evaluation/graph/editor/ui/components/HatchedBox.tsx
new file mode 100644
index 00000000..28961114
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/ui/components/HatchedBox.tsx
@@ -0,0 +1,24 @@
+export const HatchedBox = () => {
+  return (
+    <div
+      className="flex flex-1 border-y-2 border-zinc-200 overflow-hidden"
+      style={{
+        backgroundImage: `
+          repeating-linear-gradient(
+            -45deg,
+            transparent 0px,
+            transparent 20px,
+            var(--color-zinc-200) 20px,
+            var(--color-zinc-200) 25px
+          )
+        `,
+      }}
+    >
+      <div className="flex flex-1 items-center justify-center">
+        <span className="px-2 py-1 bg-zinc-50 border-3 border-zinc-200 text-zinc-200 font-semibold">
+          CHILDREN AREA
+        </span>
+      </div>
+    </div>
+  );
+};
diff --git a/apps/web/src/modules/evaluation/graph/editor/ui/components/IssueTooltip.tsx b/apps/web/src/modules/evaluation/graph/editor/ui/components/IssueTooltip.tsx
new file mode 100644
index 00000000..3b3dc4e2
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/ui/components/IssueTooltip.tsx
@@ -0,0 +1,51 @@
+import type {
+  ValidationIssue,
+  ValidationIssueLevel,
+} from "@/modules/evaluation/graph/editor/validation/types";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/modules/shadcn/ui/tooltip";
+import { Info, TriangleAlert } from "lucide-react";
+
+type Props = {
+  issues: ValidationIssue[];
+  level: ValidationIssueLevel;
+};
+
+export function IssueTooltip(props: Props) {
+  const { issues, level } = props;
+  const filteredIssues = issues.filter((issue) => issue.level === level);
+
+  if (filteredIssues.length === 0) return <></>;
+
+  return (
+    <Tooltip>
+      <TooltipTrigger delay={100}>
+        {level === "error" ? (
+          <TriangleAlert className="text-red-400" />
+        ) : (
+          <Info className="text-amber-400" />
+        )}
+      </TooltipTrigger>
+      <TooltipContent side="right">
+        <ul className="list-disc pl-4 text-xs">
+          {filteredIssues.map((issue, index) => (
+            <li key={`${issue.message}-${index}`}>
+              <div>{issue.message}</div>
+
+              {issue.description?.length ? (
+                <ul className="mt-0.5 list-disc pl-4 text-xs text-white">
+                  {issue.description.map((line, lineIndex) => (
+                    <li key={`${line}-${lineIndex}`}>{line}</li>
+                  ))}
+                </ul>
+              ) : null}
+            </li>
+          ))}
+        </ul>
+      </TooltipContent>
+    </Tooltip>
+  );
+}
diff --git a/apps/web/src/modules/evaluation/graph/editor/ui/components/Label.tsx b/apps/web/src/modules/evaluation/graph/editor/ui/components/Label.tsx
new file mode 100644
index 00000000..53c0b1fa
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/ui/components/Label.tsx
@@ -0,0 +1,13 @@
+import type { ReactNode } from "react";
+
+type Props = {
+  children: ReactNode;
+};
+
+export const Label = (props: Props) => {
+  const { children } = props;
+
+  return (
+    <span className="text-base text-zinc-500 font-semibold">{children}</span>
+  );
+};
diff --git a/apps/web/src/modules/evaluation/graph/editor/ui/components/containers/CompactNodeContainer.tsx b/apps/web/src/modules/evaluation/graph/editor/ui/components/containers/CompactNodeContainer.tsx
new file mode 100644
index 00000000..c08f3e00
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/ui/components/containers/CompactNodeContainer.tsx
@@ -0,0 +1,61 @@
+import { cn } from "@/lib/utils";
+import { GRID } from "@/modules/evaluation/graph/editor/constants";
+import { IssueTooltip } from "@/modules/evaluation/graph/editor/ui/components/IssueTooltip";
+import type { ValidationIssue } from "@/modules/evaluation/graph/editor/validation/types";
+import type { ReactNode } from "react";
+import { NodeContainer } from "./NodeContainer";
+
+type Props = {
+  nodeId: string;
+  width?: number;
+  height?: number;
+  selected?: boolean;
+  issues: ValidationIssue[];
+  socketHeight: number;
+  input?: ReactNode;
+  center?: ReactNode;
+  output?: ReactNode;
+  spread?: boolean;
+};
+
+export const CompactNodeContainer = (props: Props) => {
+  const {
+    nodeId,
+    width,
+    height,
+    selected = false,
+    issues,
+    socketHeight,
+    input,
+    center,
+    output,
+    spread = true,
+  } = props;
+
+  return (
+    <NodeContainer
+      width={width}
+      height={height}
+      selected={selected}
+      nodeId={nodeId}
+    >
+      <div className="flex h-full flex-col">
+        <div className="flex flex-grow flex-row items-center justify-end gap-1 px-2">
+          <IssueTooltip issues={issues} level="warning" />
+          <IssueTooltip issues={issues} level="error" />
+        </div>
+        <div
+          className={cn(
+            "flex flex-row items-center",
+            spread && "justify-between",
+          )}
+          style={{ height: `${socketHeight * GRID}px` }}
+        >
+          {input}
+          {center}
+          {output}
+        </div>
+      </div>
+    </NodeContainer>
+  );
+};
diff --git a/apps/web/src/modules/evaluation/graph/editor/ui/components/containers/NodeBody.tsx b/apps/web/src/modules/evaluation/graph/editor/ui/components/containers/NodeBody.tsx
new file mode 100644
index 00000000..c5640dd2
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/ui/components/containers/NodeBody.tsx
@@ -0,0 +1,16 @@
+import { GRID } from "@/modules/evaluation/graph/editor/constants";
+import type { ReactNode } from "react";
+
+type Props = {
+  controlsHeight: number;
+  children: ReactNode;
+};
+
+export const NodeBody = ({ controlsHeight, children }: Props) => (
+  <div
+    className="flex flex-col justify-center px-2 gap-2"
+    style={{ height: `${controlsHeight * GRID}px` }}
+  >
+    {children}
+  </div>
+);
diff --git a/apps/web/src/modules/evaluation/graph/editor/ui/components/containers/NodeContainer.tsx b/apps/web/src/modules/evaluation/graph/editor/ui/components/containers/NodeContainer.tsx
new file mode 100644
index 00000000..4755a401
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/ui/components/containers/NodeContainer.tsx
@@ -0,0 +1,35 @@
+import { DebugNodeBadge } from "@/modules/evaluation/graph/editor/debug/DebugNodeBadge";
+
+type Props = {
+  children?: React.ReactNode;
+  selected?: boolean;
+  width?: number;
+  height?: number;
+  nodeId?: string;
+};
+
+export const NodeContainer = (props: Props) => {
+  const { children, selected, width, height, nodeId } = props;
+
+  return (
+    <div
+      data-testid="node"
+      data-node-id={nodeId}
+      className={`
+        relative flex flex-col
+        border-2 ${selected ? "border-zinc-400" : "border-zinc-200"}
+        rounded-xl
+        bg-zinc-100
+        cursor-pointer select-none
+        hover:border-zinc-400
+        `}
+      style={{
+        width: `${width}px`,
+        height: `${height}px`,
+      }}
+    >
+      {nodeId && <DebugNodeBadge nodeId={nodeId} />}
+      {children}
+    </div>
+  );
+};
diff --git a/apps/web/src/modules/evaluation/graph/editor/ui/components/containers/NodeHeader.tsx b/apps/web/src/modules/evaluation/graph/editor/ui/components/containers/NodeHeader.tsx
new file mode 100644
index 00000000..2c943e44
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/ui/components/containers/NodeHeader.tsx
@@ -0,0 +1,36 @@
+import { GRID } from "@/modules/evaluation/graph/editor/constants";
+import { IssueTooltip } from "@/modules/evaluation/graph/editor/ui/components/IssueTooltip";
+import { Label } from "@/modules/evaluation/graph/editor/ui/components/Label";
+import type { ValidationIssue } from "@/modules/evaluation/graph/editor/validation/types";
+import type { ReactNode } from "react";
+
+type Props = {
+  label: ReactNode;
+  labelHeight: number;
+  issues: ValidationIssue[];
+  headerRight?: ReactNode;
+};
+
+export const NodeHeader = ({
+  label,
+  labelHeight,
+  issues,
+  headerRight,
+}: Props) => (
+  <div
+    className="flex items-center border-zinc-200 border-b-2"
+    style={{ height: `${labelHeight * GRID}px` }}
+  >
+    <span className="flex flex-1 items-center px-2">
+      <Label>{label}</Label>
+      <div className="flex flex-grow" />
+      <div className="flex flex-row items-center gap-2">
+        {headerRight}
+        <div className="flex flex-row gap-1">
+          <IssueTooltip issues={issues} level="warning" />
+          <IssueTooltip issues={issues} level="error" />
+        </div>
+      </div>
+    </span>
+  </div>
+);
diff --git a/apps/web/src/modules/evaluation/graph/editor/ui/components/containers/ParentNodeContainer.tsx b/apps/web/src/modules/evaluation/graph/editor/ui/components/containers/ParentNodeContainer.tsx
new file mode 100644
index 00000000..4d1b5958
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/ui/components/containers/ParentNodeContainer.tsx
@@ -0,0 +1,55 @@
+import { GRID } from "@/modules/evaluation/graph/editor/constants";
+import type { NodeProps } from "@/modules/evaluation/graph/editor/types";
+import { HatchedBox } from "@/modules/evaluation/graph/editor/ui/components/HatchedBox";
+import type { ReactNode } from "react";
+import { NodeBody } from "./NodeBody";
+import { NodeContainer } from "./NodeContainer";
+import { NodeHeader } from "./NodeHeader";
+
+type Props = {
+  data: NodeProps;
+  outputSocket?: ReactNode;
+  headerRight?: ReactNode;
+  children: ReactNode;
+};
+
+export const ParentNodeContainer = (props: Props) => {
+  const { data, outputSocket, headerRight, children } = props;
+
+  const {
+    id,
+    label,
+    height,
+    width,
+    selected = false,
+    controlsHeight,
+    socketHeight,
+    labelHeight,
+    issues,
+  } = data;
+
+  return (
+    <NodeContainer width={width} height={height} selected={selected} nodeId={id}>
+      <div className="flex flex-col">
+        <NodeHeader
+          label={label}
+          labelHeight={labelHeight}
+          issues={issues}
+          headerRight={headerRight}
+        />
+        <NodeBody controlsHeight={controlsHeight}>{children}</NodeBody>
+      </div>
+
+      <span className="flex flex-grow">
+        <HatchedBox />
+      </span>
+
+      <div
+        className="flex flex-row items-center justify-end"
+        style={{ height: `${socketHeight * GRID}px` }}
+      >
+        {outputSocket}
+      </div>
+    </NodeContainer>
+  );
+};
diff --git a/apps/web/src/modules/evaluation/graph/editor/ui/components/containers/RegularNodeContainer.tsx b/apps/web/src/modules/evaluation/graph/editor/ui/components/containers/RegularNodeContainer.tsx
new file mode 100644
index 00000000..dcaceee3
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/ui/components/containers/RegularNodeContainer.tsx
@@ -0,0 +1,47 @@
+import { GRID } from "@/modules/evaluation/graph/editor/constants";
+import type { NodeProps } from "@/modules/evaluation/graph/editor/types";
+import type { ReactNode } from "react";
+import { NodeBody } from "./NodeBody";
+import { NodeContainer } from "./NodeContainer";
+import { NodeHeader } from "./NodeHeader";
+
+type Props = {
+  data: NodeProps;
+  inputSocket?: ReactNode;
+  outputSocket?: ReactNode;
+  children: ReactNode;
+};
+
+export const RegularNodeContainer = (props: Props) => {
+  const { data, inputSocket, outputSocket, children } = props;
+
+  const {
+    id,
+    label,
+    height,
+    width,
+    selected = false,
+    controlsHeight,
+    socketHeight,
+    labelHeight,
+    issues,
+  } = data;
+
+  return (
+    <NodeContainer width={width} height={height} selected={selected} nodeId={id}>
+      <div className="flex flex-col">
+        <NodeHeader label={label} labelHeight={labelHeight} issues={issues} />
+        <NodeBody controlsHeight={controlsHeight}>{children}</NodeBody>
+      </div>
+
+      <div
+        className="flex flex-row items-center"
+        style={{ height: `${socketHeight * GRID}px` }}
+      >
+        {inputSocket}
+        <span className="flex flex-grow" />
+        {outputSocket}
+      </div>
+    </NodeContainer>
+  );
+};
diff --git a/apps/web/src/modules/evaluation/graph/editor/ui/components/sockets/InputSocket.tsx b/apps/web/src/modules/evaluation/graph/editor/ui/components/sockets/InputSocket.tsx
new file mode 100644
index 00000000..8e4cc491
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/ui/components/sockets/InputSocket.tsx
@@ -0,0 +1,30 @@
+import type { Schemes } from "@/modules/evaluation/graph/editor/types";
+import type { ClassicPreset, NodeId } from "rete";
+import { Presets, type RenderEmit } from "rete-react-plugin";
+
+const { RefSocket } = Presets.classic;
+
+type Props = {
+  emit: RenderEmit<Schemes>;
+  nodeId: NodeId;
+  input: ClassicPreset.Input<ClassicPreset.Socket>;
+};
+
+export const InputSocket = (props: Props) => {
+  const { emit, nodeId, input } = props;
+  return (
+    <div
+      className="flex -translate-x-1/2"
+      data-testid={`socket-input-${nodeId}`}
+    >
+      <RefSocket
+        name="input-socket"
+        side="input"
+        emit={emit}
+        socketKey="in"
+        nodeId={nodeId}
+        payload={input.socket}
+      />
+    </div>
+  );
+};
diff --git a/apps/web/src/modules/evaluation/graph/editor/ui/components/sockets/OutputSocket.tsx b/apps/web/src/modules/evaluation/graph/editor/ui/components/sockets/OutputSocket.tsx
new file mode 100644
index 00000000..ad09c72d
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/ui/components/sockets/OutputSocket.tsx
@@ -0,0 +1,30 @@
+import type { Schemes } from "@/modules/evaluation/graph/editor/types";
+import type { ClassicPreset, NodeId } from "rete";
+import { Presets, type RenderEmit } from "rete-react-plugin";
+
+const { RefSocket } = Presets.classic;
+
+type Props = {
+  emit: RenderEmit<Schemes>;
+  nodeId: NodeId;
+  output: ClassicPreset.Output<ClassicPreset.Socket>;
+};
+
+export const OutputSocket = (props: Props) => {
+  const { emit, nodeId, output } = props;
+  return (
+    <div
+      className="flex flex-col translate-x-1/2"
+      data-testid={`socket-output-${nodeId}`}
+    >
+      <RefSocket
+        name="output-socket"
+        side="output"
+        emit={emit}
+        socketKey="out"
+        nodeId={nodeId}
+        payload={output.socket}
+      />
+    </div>
+  );
+};
diff --git a/apps/web/src/modules/evaluation/graph/editor/ui/connections/BooleanConnectionView.tsx b/apps/web/src/modules/evaluation/graph/editor/ui/connections/BooleanConnectionView.tsx
new file mode 100644
index 00000000..3b7d0163
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/ui/connections/BooleanConnectionView.tsx
@@ -0,0 +1,20 @@
+import type {
+  BooleanConnection,
+  BooleanOperator,
+} from "@/modules/evaluation/graph/editor/connections/booleanConnection";
+import { createToggleConnectionView } from "./ToggleConnectionView";
+
+export function createBooleanConnectionView(
+  refreshConnection: (id: string) => void,
+) {
+  return createToggleConnectionView<BooleanOperator, BooleanConnection>({
+    refreshConnection,
+    options: ["TRUE", "NOT"],
+    fallback: "TRUE",
+    getValue: (connection) => connection.booleanOperator,
+    setValue: (connection, value) => {
+      connection.booleanOperator = value;
+    },
+    getLabel: (value) => (value === "TRUE" ? "PASS" : "FLIP"),
+  });
+}
diff --git a/apps/web/src/modules/evaluation/graph/editor/ui/connections/CustomConnectionView.tsx b/apps/web/src/modules/evaluation/graph/editor/ui/connections/CustomConnectionView.tsx
new file mode 100644
index 00000000..f1ed9e8f
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/ui/connections/CustomConnectionView.tsx
@@ -0,0 +1,16 @@
+import { type ClassicScheme, Presets } from "rete-react-plugin";
+import { CONNECTION_PATH_CLASS, CONNECTION_SVG_CLASS } from "./connectionStyles";
+
+const { useConnection } = Presets.classic;
+
+export function CustomConnectionView(_props: {
+  data: ClassicScheme["Connection"];
+}) {
+  const { path } = useConnection();
+  if (!path) return null;
+  return (
+    <svg data-testid="connection" className={CONNECTION_SVG_CLASS}>
+      <path d={path} className={CONNECTION_PATH_CLASS} />
+    </svg>
+  );
+}
diff --git a/apps/web/src/modules/evaluation/graph/editor/ui/connections/LimitItemConnectionView.tsx b/apps/web/src/modules/evaluation/graph/editor/ui/connections/LimitItemConnectionView.tsx
new file mode 100644
index 00000000..ec955fe9
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/ui/connections/LimitItemConnectionView.tsx
@@ -0,0 +1,20 @@
+import type { LimitItemConnection } from "@/modules/evaluation/graph/editor/connections/limitItemConnection";
+import { EvalLimitItemOperatorEnum } from "@repo/schema";
+import { createToggleConnectionView } from "./ToggleConnectionView";
+
+export function createLimitItemConnectionView(
+  refreshConnection: (id: string) => void,
+) {
+  return createToggleConnectionView<
+    EvalLimitItemOperatorEnum,
+    LimitItemConnection
+  >({
+    refreshConnection,
+    options: [EvalLimitItemOperatorEnum.AND, EvalLimitItemOperatorEnum.OR],
+    fallback: EvalLimitItemOperatorEnum.AND,
+    getValue: (connection) => connection.limitItemOperator,
+    setValue: (connection, value) => {
+      connection.limitItemOperator = value;
+    },
+  });
+}
diff --git a/apps/web/src/modules/evaluation/graph/editor/ui/connections/MagneticConnectionView.tsx b/apps/web/src/modules/evaluation/graph/editor/ui/connections/MagneticConnectionView.tsx
new file mode 100644
index 00000000..6d385444
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/ui/connections/MagneticConnectionView.tsx
@@ -0,0 +1,37 @@
+import { useEffect, useState } from "react";
+import { type ClassicScheme, Presets } from "rete-react-plugin";
+import {
+  CONNECTION_SVG_CLASS,
+  MAGNETIC_CONNECTION_PATH_CLASS,
+} from "./connectionStyles";
+
+const { useConnection } = Presets.classic;
+
+const VISIBLE_OPACITY = 0.4;
+
+export function MagneticConnectionView(_props: {
+  data: ClassicScheme["Connection"];
+}) {
+  const { path } = useConnection();
+  const [shown, setShown] = useState(false);
+
+  useEffect(() => {
+    const frame = requestAnimationFrame(() => setShown(true));
+    return () => cancelAnimationFrame(frame);
+  }, []);
+
+  if (!path) return null;
+
+  return (
+    <svg
+      data-testid="magnetic-connection"
+      className={CONNECTION_SVG_CLASS}
+      style={{
+        opacity: shown ? VISIBLE_OPACITY : 0,
+        transition: "opacity 150ms ease-out",
+      }}
+    >
+      <path d={path} className={MAGNETIC_CONNECTION_PATH_CLASS} />
+    </svg>
+  );
+}
diff --git a/apps/web/src/modules/evaluation/graph/editor/ui/connections/ToggleConnectionView.tsx b/apps/web/src/modules/evaluation/graph/editor/ui/connections/ToggleConnectionView.tsx
new file mode 100644
index 00000000..e81f64b3
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/ui/connections/ToggleConnectionView.tsx
@@ -0,0 +1,92 @@
+import { BooleanConnectionToggle } from "@/modules/evaluation/graph/editor/ui/components/BooleanConnectionToggle";
+import { useLayoutEffect, useRef, useState } from "react";
+import type { ClassicScheme } from "rete-react-plugin";
+import { Presets } from "rete-react-plugin";
+import { CONNECTION_PATH_CLASS, CONNECTION_SVG_CLASS } from "./connectionStyles";
+
+const { useConnection } = Presets.classic;
+
+type ToggleOptionPair<T extends string> = readonly [T, T];
+
+type ToggleConnectionData = ClassicScheme["Connection"] & {
+  id: string;
+  source?: string;
+  target?: string;
+};
+
+type Props<T extends string, C extends ToggleConnectionData> = {
+  refreshConnection: (id: string) => void;
+  options: ToggleOptionPair<T>;
+  fallback: T;
+  getValue: (connection: C) => T | undefined;
+  setValue: (connection: C, value: T) => void;
+  getLabel?: (value: T) => string;
+};
+
+export function createToggleConnectionView<
+  T extends string,
+  C extends ToggleConnectionData,
+>({
+  refreshConnection,
+  options,
+  fallback,
+  getValue,
+  setValue,
+  getLabel,
+}: Props<T, C>) {
+  return function ToggleConnectionView(props: { data: C }) {
+    const { path } = useConnection();
+    const pathRef = useRef<SVGPathElement | null>(null);
+    const [mid, setMid] = useState<{ x: number; y: number } | null>(null);
+    const [animationDelay] = useState(() => `-${performance.now() % 1000}ms`);
+
+    useLayoutEffect(() => {
+      const el = pathRef.current;
+
+      if (!el || !path) {
+        setMid(null);
+        return;
+      }
+
+      try {
+        const len = el.getTotalLength();
+        const p = el.getPointAtLength(len / 2);
+        setMid({ x: p.x, y: p.y });
+      } catch {
+        setMid(null);
+      }
+    }, [path]);
+
+    if (!path) return null;
+
+    const isComplete = Boolean(props.data.source && props.data.target);
+    const current = getValue(props.data) ?? fallback;
+    const label = getLabel ? getLabel(current) : current;
+    const nextValue = current === options[0] ? options[1] : options[0];
+
+    return (
+      <>
+        <svg className={CONNECTION_SVG_CLASS}>
+          <path
+            d={path}
+            ref={pathRef}
+            style={{ animationDelay }}
+            className={CONNECTION_PATH_CLASS}
+          />
+        </svg>
+
+        {isComplete && mid && (
+          <BooleanConnectionToggle
+            x={mid.x}
+            y={mid.y}
+            label={label}
+            onToggle={() => {
+              setValue(props.data, nextValue);
+              refreshConnection(props.data.id);
+            }}
+          />
+        )}
+      </>
+    );
+  };
+}
diff --git a/apps/web/src/modules/evaluation/graph/editor/ui/connections/connectionStyles.ts b/apps/web/src/modules/evaluation/graph/editor/ui/connections/connectionStyles.ts
new file mode 100644
index 00000000..a6ddb0fe
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/ui/connections/connectionStyles.ts
@@ -0,0 +1,13 @@
+// Shared Tailwind classes for connection rendering, used by both
+// CustomConnectionView (plain connections) and ToggleConnectionView (toggleable
+// ones), so the svg canvas and the marching-ants path stay in sync. The
+// `dash` keyframes referenced by the animation utility live in global.css.
+
+export const CONNECTION_SVG_CLASS =
+  "pointer-events-none absolute z-0 h-[9999px] w-[9999px] overflow-visible";
+
+export const CONNECTION_PATH_CLASS =
+  "pointer-events-auto fill-none stroke-[5] stroke-zinc-400 [stroke-dasharray:10_5] [stroke-dashoffset:45] [animation:dash_1s_linear_infinite]";
+  
+export const MAGNETIC_CONNECTION_PATH_CLASS =
+  "pointer-events-none fill-none stroke-[5] stroke-zinc-400 [stroke-dasharray:10_5] [stroke-dashoffset:45] [animation:dash_1s_linear_infinite]";
diff --git a/apps/web/src/modules/evaluation/graph/editor/ui/context-menu/ContextMenuView.tsx b/apps/web/src/modules/evaluation/graph/editor/ui/context-menu/ContextMenuView.tsx
new file mode 100644
index 00000000..e9da0318
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/ui/context-menu/ContextMenuView.tsx
@@ -0,0 +1,63 @@
+import { Presets } from "rete-react-plugin";
+import styled, { css } from "styled-components";
+
+export const Menu = styled(Presets.contextMenu.Menu)`
+  background: var(--color-zinc-50);
+  color: var(--color-zinc-400);
+  border: 1px solid var(--color-zinc-200);
+  border-radius: 0.5rem;
+  padding: 0.25rem;
+`;
+
+export const Item = styled(Presets.contextMenu.Item).withConfig({
+  shouldForwardProp: (prop) => prop !== "hasSubitems",
+})<{ hasSubitems?: boolean }>`
+  background: transparent;
+  color: var(--color-zinc-400);
+  border: none;
+  border-radius: 0.375rem;
+  position: relative;
+
+  &:hover {
+    background: var(--color-zinc-100);
+    border-radius: 0.375rem;
+  }
+
+  ${(props) =>
+    props.hasSubitems &&
+    css`
+      &:after {
+        content: "►";
+        position: absolute;
+        opacity: 0.6;
+        right: 5px;
+        top: 5px;
+      }
+    `}
+`;
+
+export const Common = styled(Presets.contextMenu.Common)`
+  background: transparent;
+  color: var(--color-zinc-400);
+  border: none;
+  border-radius: 0.375rem;
+
+  &:hover {
+    background: var(--color-zinc-200);
+    color: var(--color-zinc-500);
+    border-radius: 0.375rem;
+  }
+`;
+
+export const Search = styled(Presets.contextMenu.Search)`
+  display: none;
+`;
+
+export const Subitems = styled(Presets.contextMenu.Subitems)`
+  background: var(--color-zinc-50);
+  color: var(--color-zinc-400);
+  border: 1px solid var(--color-zinc-200);
+  border-radius: 0.5rem;
+  padding: 0.25rem;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
+`;
diff --git a/apps/web/src/modules/evaluation/graph/editor/ui/controls/EnabledControlView.tsx b/apps/web/src/modules/evaluation/graph/editor/ui/controls/EnabledControlView.tsx
new file mode 100644
index 00000000..60c6d6cc
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/ui/controls/EnabledControlView.tsx
@@ -0,0 +1,21 @@
+import type { EnabledControl } from "@/modules/evaluation/graph/editor/controls/enabled";
+import { Switch } from "@/modules/shadcn/ui/switch";
+import { useSyncExternalStore } from "react";
+
+type Props = {
+  data: EnabledControl;
+};
+
+export const EnabledControlView = ({ data }: Props) => {
+  const value = useSyncExternalStore(data.subscribe, data.getSnapshot);
+
+  return (
+    <div onPointerDown={(e) => e.stopPropagation()}>
+      <Switch
+        checked={value}
+        onCheckedChange={(next) => data.setValue(next)}
+        aria-label={value ? "Disable check" : "Enable check"}
+      />
+    </div>
+  );
+};
diff --git a/apps/web/src/modules/evaluation/graph/editor/ui/controls/IntegerRangeControlView.tsx b/apps/web/src/modules/evaluation/graph/editor/ui/controls/IntegerRangeControlView.tsx
new file mode 100644
index 00000000..3d6c20f6
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/ui/controls/IntegerRangeControlView.tsx
@@ -0,0 +1,108 @@
+import type { IntegerRangeControl } from "@/modules/evaluation/graph/editor/controls/integerRange";
+import { Button } from "@/modules/shadcn/ui/button";
+import { ButtonGroup } from "@/modules/shadcn/ui/button-group";
+import { Input } from "@/modules/shadcn/ui/input";
+import { useEffect, useState, useSyncExternalStore } from "react";
+
+type Props = {
+  data: IntegerRangeControl;
+};
+
+export const IntegerRangeControlView = ({ data }: Props) => {
+  const value = useSyncExternalStore(data.subscribe, data.getSnapshot);
+
+  const [limitFromDraft, setLimitFromDraft] = useState(
+    formatNullableNumber(value.limitFrom),
+  );
+  const [limitToDraft, setLimitToDraft] = useState(
+    formatNullableNumber(value.limitTo),
+  );
+
+  useEffect(() => {
+    setLimitFromDraft(formatNullableNumber(value.limitFrom));
+    setLimitToDraft(formatNullableNumber(value.limitTo));
+  }, [value.limitFrom, value.limitTo]);
+
+  const commitLimitFrom = (raw: string) => {
+    data.setLimitFrom(parseNullableNumber(raw));
+    setLimitFromDraft(formatNullableNumber(data.limitFrom));
+  };
+
+  const commitLimitTo = (raw: string) => {
+    data.setLimitTo(parseNullableNumber(raw));
+    setLimitToDraft(formatNullableNumber(data.limitTo));
+  };
+
+  return (
+    <div
+      className="flex w-full gap-1"
+      onPointerDown={(event) => event.stopPropagation()}
+    >
+      <ButtonGroup className="min-w-0 flex-1">
+        <Input
+          className="h-9 px-2.5 text-sm bg-white"
+          type="number"
+          inputMode="numeric"
+          min={data.min}
+          step={data.step}
+          value={limitFromDraft}
+          onChange={(event) => setLimitFromDraft(event.target.value)}
+          onBlur={(event) => commitLimitFrom(event.target.value)}
+          onKeyDown={(event) => {
+            if (event.key === "Enter") {
+              commitLimitFrom(event.currentTarget.value);
+            }
+          }}
+        />
+
+        <Button
+          type="button"
+          variant="outline"
+          className="w-9 px-1.5 pointer-events-none"
+          tabIndex={-1}
+        >
+          <span className="text-xs text-zinc-400">min</span>
+        </Button>
+      </ButtonGroup>
+
+      <ButtonGroup className="min-w-0 flex-1">
+        <Input
+          className="h-9 px-2.5 text-sm bg-white"
+          type="number"
+          inputMode="numeric"
+          min={data.min}
+          step={data.step}
+          value={limitToDraft}
+          onChange={(event) => setLimitToDraft(event.target.value)}
+          onBlur={(event) => commitLimitTo(event.target.value)}
+          onKeyDown={(event) => {
+            if (event.key === "Enter") {
+              commitLimitTo(event.currentTarget.value);
+            }
+          }}
+        />
+
+        <Button
+          type="button"
+          variant="outline"
+          className="w-9 px-1.5 pointer-events-none"
+          tabIndex={-1}
+        >
+          <span className="text-xs text-zinc-400">max</span>
+        </Button>
+      </ButtonGroup>
+    </div>
+  );
+};
+
+function formatNullableNumber(value: number | null) {
+  return value === null ? "" : String(value);
+}
+
+function parseNullableNumber(raw: string) {
+  if (raw.trim() === "") return null;
+
+  const parsed = Number(raw);
+
+  return Number.isFinite(parsed) ? parsed : null;
+}
diff --git a/apps/web/src/modules/evaluation/graph/editor/ui/controls/LabelControlView.tsx b/apps/web/src/modules/evaluation/graph/editor/ui/controls/LabelControlView.tsx
new file mode 100644
index 00000000..8ce1fd36
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/ui/controls/LabelControlView.tsx
@@ -0,0 +1,58 @@
+import { cn } from "@/lib/utils";
+import type { LabelControl } from "@/modules/evaluation/graph/editor/controls/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/modules/shadcn/ui/select";
+import { useSyncExternalStore } from "react";
+
+type Props = {
+  data: LabelControl;
+};
+
+export const LabelControlView = ({ data }: Props) => {
+  const value = useSyncExternalStore(data.subscribe, data.getSnapshot);
+  const selected = data.options.find((label) => String(label.id) === value);
+
+  return (
+    <div className="w-full" onPointerDown={(e) => e.stopPropagation()}>
+      <Select
+        value={value ?? "__NONE__"}
+        onValueChange={(next) =>
+          data.setValue(next === "__NONE__" ? null : next)
+        }
+      >
+        <SelectTrigger
+          size="sm"
+          title={selected?.name}
+          className={cn(
+            "w-full min-w-0 bg-white",
+            // Match the name control: a chosen label uses the default text colour,
+            // only the placeholder stays muted.
+            selected ? "text-foreground" : "text-zinc-400",
+            "[&>span]:block [&>span]:truncate",
+            data.hasValidationErrors && "border-red-500 focus:ring-red-500",
+          )}
+        >
+          <SelectValue placeholder="Select label">
+            <span className="block truncate">
+              {selected?.name ?? (value === null ? "Select label" : undefined)}
+            </span>
+          </SelectValue>
+        </SelectTrigger>
+
+        <SelectContent className="text-zinc-400">
+          {!data.required && <SelectItem value="__NONE__">No label</SelectItem>}
+          {data.options.map((label) => (
+            <SelectItem key={label.id} value={String(label.id)}>
+              {label.name}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    </div>
+  );
+};
diff --git a/apps/web/src/modules/evaluation/graph/editor/ui/controls/NameControlView.tsx b/apps/web/src/modules/evaluation/graph/editor/ui/controls/NameControlView.tsx
new file mode 100644
index 00000000..b6d5cefd
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/ui/controls/NameControlView.tsx
@@ -0,0 +1,42 @@
+import { cn } from "@/lib/utils";
+import type { NameControl } from "@/modules/evaluation/graph/editor/controls/name";
+import { Input } from "@/modules/shadcn/ui/input";
+import { useEffect, useState, useSyncExternalStore } from "react";
+
+type Props = {
+  data: NameControl;
+};
+
+export const NameControlView = ({ data }: Props) => {
+  const value = useSyncExternalStore(data.subscribe, data.getSnapshot);
+  const [draft, setDraft] = useState(value);
+
+  useEffect(() => {
+    setDraft(value);
+  }, [value]);
+
+  const commitValue = (raw: string) => {
+    data.setValue(raw);
+  };
+
+  return (
+    <div onPointerDown={(e) => e.stopPropagation()}>
+      <Input
+        type="text"
+        value={draft}
+        className={cn(
+          "h-9 bg-white",
+          data.hasValidationErrors &&
+            "border-red-500 focus-visible:ring-red-500",
+        )}
+        onChange={(e) => setDraft(e.target.value)}
+        onBlur={(e) => commitValue(e.target.value)}
+        onKeyDown={(e) => {
+          if (e.key === "Enter") {
+            commitValue(e.currentTarget.value);
+          }
+        }}
+      />
+    </div>
+  );
+};
diff --git a/apps/web/src/modules/evaluation/graph/editor/ui/controls/PercentageRangeControlView.tsx b/apps/web/src/modules/evaluation/graph/editor/ui/controls/PercentageRangeControlView.tsx
new file mode 100644
index 00000000..cddb7ebd
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/ui/controls/PercentageRangeControlView.tsx
@@ -0,0 +1,39 @@
+import type { PercentageRangeControl } from "@/modules/evaluation/graph/editor/controls/percentageRange";
+import { Slider } from "@/modules/shadcn/ui/slider";
+import { useSyncExternalStore } from "react";
+
+type Props = {
+  data: PercentageRangeControl;
+};
+
+export const PercentageRangeControlView = ({ data }: Props) => {
+  const value = useSyncExternalStore(data.subscribe, data.getSnapshot);
+
+  return (
+    <div
+      className="w-full flex flex-col gap-2"
+      onPointerDown={(e) => e.stopPropagation()}
+    >
+      <div className="flex justify-between text-sm text-zinc-400">
+        <span>From: {value[0]}%</span>
+        <span>To: {value[1]}%</span>
+      </div>
+
+      <Slider
+        value={value}
+        min={data.min}
+        max={data.max}
+        step={data.step}
+        className="w-full [&_[data-slot=slider-track]]:bg-zinc-200"
+        onValueChange={(next) => {
+          if (typeof next === "number") return;
+
+          const [first, second] = next;
+          if (first === undefined || second === undefined) return;
+
+          data.setValue(first <= second ? [first, second] : [second, first]);
+        }}
+      />
+    </div>
+  );
+};
diff --git a/apps/web/src/modules/evaluation/graph/editor/ui/controls/PositionControlView.tsx b/apps/web/src/modules/evaluation/graph/editor/ui/controls/PositionControlView.tsx
new file mode 100644
index 00000000..186b069a
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/ui/controls/PositionControlView.tsx
@@ -0,0 +1,89 @@
+import {
+  edgesCompatible,
+  type PositionControl,
+} from "@/modules/evaluation/graph/editor/controls/position";
+import { EvalLimitItemEdgeEnum } from "@repo/schema";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/modules/shadcn/ui/select";
+import { useSyncExternalStore } from "react";
+
+type Props = {
+  data: PositionControl;
+};
+
+const EDGE_LABELS: Record<EvalLimitItemEdgeEnum, string> = {
+  [EvalLimitItemEdgeEnum.LEFT]: "Left",
+  [EvalLimitItemEdgeEnum.RIGHT]: "Right",
+  [EvalLimitItemEdgeEnum.TOP]: "Top",
+  [EvalLimitItemEdgeEnum.BOTTOM]: "Bottom",
+  [EvalLimitItemEdgeEnum.CENTER]: "Center",
+};
+
+const ALL_EDGES: EvalLimitItemEdgeEnum[] = [
+  EvalLimitItemEdgeEnum.TOP,
+  EvalLimitItemEdgeEnum.BOTTOM,
+  EvalLimitItemEdgeEnum.LEFT,
+  EvalLimitItemEdgeEnum.RIGHT,
+  EvalLimitItemEdgeEnum.CENTER,
+];
+
+export const PositionControlView = ({ data }: Props) => {
+  const value = useSyncExternalStore(data.subscribe, data.getSnapshot);
+
+  // The parent edge must share the target's axis (or be CENTER), matching the schema.
+  const parentEdges = ALL_EDGES.filter((edge) =>
+    edgesCompatible(value.targetEdge, edge),
+  );
+
+  return (
+    <div
+      className="flex w-full items-center gap-1"
+      onPointerDown={(e) => e.stopPropagation()}
+    >
+      <Select
+        value={value.targetEdge}
+        onValueChange={(next) => data.setTargetEdge(next as EvalLimitItemEdgeEnum)}
+      >
+        <SelectTrigger
+          size="sm"
+          className="h-9 w-full min-w-0 text-zinc-400 bg-white [&>span]:block [&>span]:truncate"
+        >
+          <SelectValue placeholder="Detection" />
+        </SelectTrigger>
+        <SelectContent className="text-zinc-400">
+          {ALL_EDGES.map((edge) => (
+            <SelectItem key={edge} value={edge}>
+              {EDGE_LABELS[edge]}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+
+      <span className="shrink-0 text-xs text-zinc-400">vs</span>
+
+      <Select
+        value={value.parentEdge}
+        onValueChange={(next) => data.setParentEdge(next as EvalLimitItemEdgeEnum)}
+      >
+        <SelectTrigger
+          size="sm"
+          className="h-9 w-full min-w-0 text-zinc-400 bg-white [&>span]:block [&>span]:truncate"
+        >
+          <SelectValue placeholder="Input" />
+        </SelectTrigger>
+        <SelectContent className="text-zinc-400">
+          {parentEdges.map((edge) => (
+            <SelectItem key={edge} value={edge}>
+              {EDGE_LABELS[edge]}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    </div>
+  );
+};
diff --git a/apps/web/src/modules/evaluation/graph/editor/ui/controls/QuantifierTypeControlView.tsx b/apps/web/src/modules/evaluation/graph/editor/ui/controls/QuantifierTypeControlView.tsx
new file mode 100644
index 00000000..f93b7529
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/ui/controls/QuantifierTypeControlView.tsx
@@ -0,0 +1,39 @@
+import type { QuantifierTypeControl } from "@/modules/evaluation/graph/editor/controls/quantifierType";
+import { EvalLimitItemQuantifierTypeEnum } from "@repo/schema";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/modules/shadcn/ui/select";
+import { useSyncExternalStore } from "react";
+
+type Props = {
+  data: QuantifierTypeControl;
+};
+
+export const QuantifierTypeControlView = ({ data }: Props) => {
+  const value = useSyncExternalStore(data.subscribe, data.getSnapshot);
+
+  return (
+    <div className="w-full" onPointerDown={(e) => e.stopPropagation()}>
+      <Select
+        value={value}
+        onValueChange={(next) =>
+          data.setValue(next as EvalLimitItemQuantifierTypeEnum)
+        }
+      >
+        <SelectTrigger size="sm" className="w-full bg-white">
+          <SelectValue placeholder="Select quantifier" />
+        </SelectTrigger>
+
+        <SelectContent>
+          <SelectItem value="MIN">MIN</SelectItem>
+          <SelectItem value="MAX">MAX</SelectItem>
+          <SelectItem value="EXACT">EXACT</SelectItem>
+        </SelectContent>
+      </Select>
+    </div>
+  );
+};
diff --git a/apps/web/src/modules/evaluation/graph/editor/ui/controls/QuantifierUnitsControlView.tsx b/apps/web/src/modules/evaluation/graph/editor/ui/controls/QuantifierUnitsControlView.tsx
new file mode 100644
index 00000000..944f92fd
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/ui/controls/QuantifierUnitsControlView.tsx
@@ -0,0 +1,56 @@
+import type { QuantifierUnitsControl } from "@/modules/evaluation/graph/editor/controls/quantifierUnits";
+import { Button } from "@/modules/shadcn/ui/button";
+import { ButtonGroup } from "@/modules/shadcn/ui/button-group";
+import { Input } from "@/modules/shadcn/ui/input";
+import { useEffect, useState, useSyncExternalStore } from "react";
+
+type Props = {
+  data: QuantifierUnitsControl;
+};
+
+export const QuantifierUnitsControlView = ({ data }: Props) => {
+  const snapshot = useSyncExternalStore(data.subscribe, data.getSnapshot);
+  const [draft, setDraft] = useState(String(snapshot.quantifierValue));
+
+  useEffect(() => {
+    setDraft(String(snapshot.quantifierValue));
+  }, [snapshot.quantifierValue]);
+
+  const commitValue = (raw: string) => {
+    const parsed = Number(raw);
+    data.setValue(Number.isFinite(parsed) ? parsed : 0);
+    setDraft(String(data.getSnapshot().quantifierValue));
+  };
+
+  return (
+    <ButtonGroup className="w-full" onPointerDown={(e) => e.stopPropagation()}>
+      <Input
+        className="h-9 px-2.5 text-sm bg-white"
+        type="number"
+        inputMode="numeric"
+        min={0}
+        max={snapshot.quantifierUnit === "PERCENT" ? 100 : undefined}
+        step={1}
+        value={draft}
+        onChange={(e) => setDraft(e.target.value)}
+        onBlur={(e) => commitValue(e.target.value)}
+        onKeyDown={(e) => {
+          if (e.key === "Enter") {
+            commitValue(e.currentTarget.value);
+          }
+        }}
+      />
+
+      <Button
+        type="button"
+        variant="outline"
+        className="w-8"
+        onClick={() => data.toggleMode()}
+      >
+        <span className="text-xs text-zinc-400">
+          {snapshot.quantifierUnit === "PERCENT" ? "%" : "pcs"}
+        </span>
+      </Button>
+    </ButtonGroup>
+  );
+};
diff --git a/apps/web/src/modules/evaluation/graph/editor/ui/nodes/ActionNodeView.tsx b/apps/web/src/modules/evaluation/graph/editor/ui/nodes/ActionNodeView.tsx
new file mode 100644
index 00000000..9dbf36e7
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/ui/nodes/ActionNodeView.tsx
@@ -0,0 +1,36 @@
+import type { AlertNode } from "@/modules/evaluation/graph/editor/nodes/action/alert";
+import type { WarningNode } from "@/modules/evaluation/graph/editor/nodes/action/warning";
+import type { Schemes } from "@/modules/evaluation/graph/editor/types";
+import { CompactNodeContainer } from "@/modules/evaluation/graph/editor/ui/components/containers/CompactNodeContainer";
+import { InputSocket } from "@/modules/evaluation/graph/editor/ui/components/sockets/InputSocket";
+import type { RenderEmit } from "rete-react-plugin";
+import { Label } from "../components/Label";
+
+type Props = {
+  data: WarningNode | AlertNode;
+  emit: RenderEmit<Schemes>;
+};
+
+export const ActionNodeView = (props: Props) => {
+  const { data, emit } = props;
+  const { label, height, width, selected = false, issues } = data;
+  const input = data.inputs.in;
+
+  if (!input) {
+    throw new Error(`ActionNode is missing expected parts`);
+  }
+
+  return (
+    <CompactNodeContainer
+      nodeId={data.id}
+      width={width}
+      height={height}
+      selected={selected}
+      issues={issues}
+      socketHeight={data.socketHeight}
+      spread={false}
+      input={<InputSocket emit={emit} nodeId={data.id} input={input} />}
+      center={<Label>{label}</Label>}
+    />
+  );
+};
diff --git a/apps/web/src/modules/evaluation/graph/editor/ui/nodes/AreaNodeView.tsx b/apps/web/src/modules/evaluation/graph/editor/ui/nodes/AreaNodeView.tsx
new file mode 100644
index 00000000..55665a87
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/ui/nodes/AreaNodeView.tsx
@@ -0,0 +1,47 @@
+import type { AreaNode } from "@/modules/evaluation/graph/editor/nodes/limitItem/area";
+import type { Schemes } from "@/modules/evaluation/graph/editor/types";
+import { RegularNodeContainer } from "@/modules/evaluation/graph/editor/ui/components/containers/RegularNodeContainer";
+import { InputSocket } from "@/modules/evaluation/graph/editor/ui/components/sockets/InputSocket";
+import { OutputSocket } from "@/modules/evaluation/graph/editor/ui/components/sockets/OutputSocket";
+import { Presets, type RenderEmit } from "rete-react-plugin";
+
+const { RefControl } = Presets.classic;
+
+type Props = {
+  data: AreaNode;
+  emit: RenderEmit<Schemes>;
+};
+
+export const AreaNodeView = (props: Props) => {
+  const { data, emit } = props;
+  const { range, units, quantifier } = data.controls;
+  const input = data.inputs.in;
+  const output = data.outputs.out;
+
+  if (!input || !output || !range || !units || !quantifier) {
+    throw new Error(`AreaNode is missing expected parts`);
+  }
+
+  return (
+    <RegularNodeContainer
+      data={data}
+      inputSocket={<InputSocket emit={emit} nodeId={data.id} input={input} />}
+      outputSocket={
+        <OutputSocket emit={emit} nodeId={data.id} output={output} />
+      }
+    >
+      <div className="w-full">
+        <RefControl name="control" emit={emit} payload={range} />
+      </div>
+
+      <div className="flex flex-row items-end gap-1">
+        <div className="flex flex-col w-full gap-1">
+          <span className="text-sm text-zinc-400">Units</span>
+          <RefControl name="control" emit={emit} payload={units} />
+        </div>
+
+        <RefControl name="control" emit={emit} payload={quantifier} />
+      </div>
+    </RegularNodeContainer>
+  );
+};
diff --git a/apps/web/src/modules/evaluation/graph/editor/ui/nodes/CountNodeView.tsx b/apps/web/src/modules/evaluation/graph/editor/ui/nodes/CountNodeView.tsx
new file mode 100644
index 00000000..4fd9d9ba
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/ui/nodes/CountNodeView.tsx
@@ -0,0 +1,42 @@
+import type { CountNode } from "@/modules/evaluation/graph/editor/nodes/limitItem/count";
+import type { Schemes } from "@/modules/evaluation/graph/editor/types";
+import { RegularNodeContainer } from "@/modules/evaluation/graph/editor/ui/components/containers/RegularNodeContainer";
+import { InputSocket } from "@/modules/evaluation/graph/editor/ui/components/sockets/InputSocket";
+import { OutputSocket } from "@/modules/evaluation/graph/editor/ui/components/sockets/OutputSocket";
+import { Presets, type RenderEmit } from "rete-react-plugin";
+
+
+const { RefControl } = Presets.classic;
+
+type Props = {
+  data: CountNode;
+  emit: RenderEmit<Schemes>;
+};
+
+export const CountNodeView = (props: Props) => {
+  const { data, emit } = props;
+  const { count } = data.controls;
+  const input = data.inputs.in;
+  const output = data.outputs.out;
+
+  if (!input || !output || !count) {
+    throw new Error(`CountNode is missing expected parts`);
+  }
+
+  return (
+    <RegularNodeContainer
+      data={data}
+      inputSocket={<InputSocket emit={emit} nodeId={data.id} input={input} />}
+      outputSocket={
+        <OutputSocket emit={emit} nodeId={data.id} output={output} />
+      }
+    >
+      <div className="flex flex-row gap-1">
+        <div className="flex flex-col gap-1">
+          <span className="text-sm text-zinc-400">Count</span>
+          <RefControl name="control" emit={emit} payload={count} />
+        </div>
+      </div>
+    </RegularNodeContainer>
+  );
+};
diff --git a/apps/web/src/modules/evaluation/graph/editor/ui/nodes/LimitNodeView.tsx b/apps/web/src/modules/evaluation/graph/editor/ui/nodes/LimitNodeView.tsx
new file mode 100644
index 00000000..9071dfff
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/ui/nodes/LimitNodeView.tsx
@@ -0,0 +1,51 @@
+import type { LimitNode } from "@/modules/evaluation/graph/editor/nodes/limit/limit";
+import type { Schemes } from "@/modules/evaluation/graph/editor/types";
+import { ParentNodeContainer } from "@/modules/evaluation/graph/editor/ui/components/containers/ParentNodeContainer";
+import { OutputSocket } from "@/modules/evaluation/graph/editor/ui/components/sockets/OutputSocket";
+import { Presets, type RenderEmit } from "rete-react-plugin";
+
+const { RefControl } = Presets.classic;
+
+type Props = {
+  data: LimitNode;
+  emit: RenderEmit<Schemes>;
+};
+
+export const LimitNodeView = (props: Props) => {
+  const { data, emit } = props;
+  const { name, label, parentLabel, enabled } = data.controls;
+  const output = data.outputs.out;
+
+  if (!output || !name || !label || !parentLabel || !enabled) {
+    throw new Error(`CountNode is missing expected parts`);
+  }
+
+  return (
+    <ParentNodeContainer
+      outputSocket={
+        <OutputSocket emit={emit} nodeId={data.id} output={output} />
+      }
+      headerRight={
+        <RefControl name="control" emit={emit} payload={enabled} />
+      }
+      data={data}
+    >
+      <div className="flex flex-col gap-1">
+        <span className="text-sm text-zinc-400 font-medium">Name</span>
+        <RefControl name="control" emit={emit} payload={name} />
+      </div>
+      <div className="flex flex-row gap-1">
+        <div className="flex flex-col gap-1 flex-1">
+          <span className="text-sm text-zinc-400 font-medium">Label</span>
+          <RefControl name="control" emit={emit} payload={label} />
+        </div>
+        <div className="flex flex-col gap-1 flex-1">
+          <span className="text-sm text-zinc-400 font-medium">
+            Parent Label
+          </span>
+          <RefControl name="control" emit={emit} payload={parentLabel} />
+        </div>
+      </div>
+    </ParentNodeContainer>
+  );
+};
diff --git a/apps/web/src/modules/evaluation/graph/editor/ui/nodes/LogicalNodeView.tsx b/apps/web/src/modules/evaluation/graph/editor/ui/nodes/LogicalNodeView.tsx
new file mode 100644
index 00000000..56dd65d5
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/ui/nodes/LogicalNodeView.tsx
@@ -0,0 +1,43 @@
+import { AndGateIcon, OrGateIcon } from "@/components/icons";
+import type { AndNode } from "@/modules/evaluation/graph/editor/nodes/logical/and";
+import type { OrNode } from "@/modules/evaluation/graph/editor/nodes/logical/or";
+import type { Schemes } from "@/modules/evaluation/graph/editor/types";
+import { CompactNodeContainer } from "@/modules/evaluation/graph/editor/ui/components/containers/CompactNodeContainer";
+import { InputSocket } from "@/modules/evaluation/graph/editor/ui/components/sockets/InputSocket";
+import { OutputSocket } from "@/modules/evaluation/graph/editor/ui/components/sockets/OutputSocket";
+import type { RenderEmit } from "rete-react-plugin";
+
+type Props = {
+  data: OrNode | AndNode;
+  emit: RenderEmit<Schemes>;
+};
+
+export const LogicalNodeView = (props: Props) => {
+  const { data, emit } = props;
+  const { label, height, width, selected = false, issues } = data;
+  const input = data.inputs.in;
+  const output = data.outputs.out;
+
+  if (!input || !output) {
+    throw new Error(`LogicalNode is missing expected parts`);
+  }
+
+  return (
+    <CompactNodeContainer
+      nodeId={data.id}
+      width={width}
+      height={height}
+      selected={selected}
+      issues={issues}
+      socketHeight={data.socketHeight}
+      input={<InputSocket emit={emit} nodeId={data.id} input={input} />}
+      center={
+        <span className="h-9 w-9">
+          {label === "AND" && <AndGateIcon className="text-zinc-400" />}
+          {label === "OR" && <OrGateIcon className="text-zinc-400" />}
+        </span>
+      }
+      output={<OutputSocket emit={emit} nodeId={data.id} output={output} />}
+    />
+  );
+};
diff --git a/apps/web/src/modules/evaluation/graph/editor/ui/nodes/PositionNodeView.tsx b/apps/web/src/modules/evaluation/graph/editor/ui/nodes/PositionNodeView.tsx
new file mode 100644
index 00000000..57c41c19
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/ui/nodes/PositionNodeView.tsx
@@ -0,0 +1,49 @@
+import type { PositionNode } from "@/modules/evaluation/graph/editor/nodes/limitItem/position";
+import type { Schemes } from "@/modules/evaluation/graph/editor/types";
+import { RegularNodeContainer } from "@/modules/evaluation/graph/editor/ui/components/containers/RegularNodeContainer";
+import { InputSocket } from "@/modules/evaluation/graph/editor/ui/components/sockets/InputSocket";
+import { OutputSocket } from "@/modules/evaluation/graph/editor/ui/components/sockets/OutputSocket";
+import { Presets, type RenderEmit } from "rete-react-plugin";
+
+const { RefControl } = Presets.classic;
+
+type Props = {
+  data: PositionNode;
+  emit: RenderEmit<Schemes>;
+};
+
+export const PositionNodeView = (props: Props) => {
+  const { data, emit } = props;
+  const { range, units, quantifier, position } = data.controls;
+  const input = data.inputs.in;
+  const output = data.outputs.out;
+
+  if (!input || !output || !range || !units || !quantifier || !position) {
+    throw new Error(`PositionNode is missing expected parts`);
+  }
+
+  return (
+    <RegularNodeContainer
+      data={data}
+      inputSocket={<InputSocket emit={emit} nodeId={data.id} input={input} />}
+      outputSocket={
+        <OutputSocket emit={emit} nodeId={data.id} output={output} />
+      }
+    >
+      <div className="w-full">
+        <RefControl name="control" emit={emit} payload={position} />
+      </div>
+
+      <RefControl name="control" emit={emit} payload={range} />
+
+      <div className="flex flex-row items-end gap-1">
+        <div className="flex flex-col w-full gap-1">
+          <span className="text-sm text-zinc-400">Units</span>
+          <RefControl name="control" emit={emit} payload={units} />
+        </div>
+
+        <RefControl name="control" emit={emit} payload={quantifier} />
+      </div>
+    </RegularNodeContainer>
+  );
+};
diff --git a/apps/web/src/modules/evaluation/graph/editor/ui/nodes/ResultNodeView.tsx b/apps/web/src/modules/evaluation/graph/editor/ui/nodes/ResultNodeView.tsx
new file mode 100644
index 00000000..31b568fd
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/ui/nodes/ResultNodeView.tsx
@@ -0,0 +1,37 @@
+import type { ResultNode } from "@/modules/evaluation/graph/editor/nodes/result/result";
+import type { Schemes } from "@/modules/evaluation/graph/editor/types";
+import { CompactNodeContainer } from "@/modules/evaluation/graph/editor/ui/components/containers/CompactNodeContainer";
+import { Label } from "@/modules/evaluation/graph/editor/ui/components/Label";
+import { InputSocket } from "@/modules/evaluation/graph/editor/ui/components/sockets/InputSocket";
+import { OutputSocket } from "@/modules/evaluation/graph/editor/ui/components/sockets/OutputSocket";
+import type { RenderEmit } from "rete-react-plugin";
+
+type Props = {
+  data: ResultNode;
+  emit: RenderEmit<Schemes>;
+};
+
+export function ResultNodeView(props: Props) {
+  const { data, emit } = props;
+  const { label, height, width, selected = false, issues } = data;
+  const input = data.inputs.in;
+  const output = data.outputs.out;
+
+  if (!input || !output) {
+    throw new Error(`ResultNode is missing expected parts`);
+  }
+
+  return (
+    <CompactNodeContainer
+      nodeId={data.id}
+      width={width}
+      height={height}
+      selected={selected}
+      issues={issues}
+      socketHeight={data.socketHeight}
+      input={<InputSocket emit={emit} nodeId={data.id} input={input} />}
+      center={<Label>{label}</Label>}
+      output={<OutputSocket emit={emit} nodeId={data.id} output={output} />}
+    />
+  );
+}
diff --git a/apps/web/src/modules/evaluation/graph/editor/ui/sockets/SocketView.tsx b/apps/web/src/modules/evaluation/graph/editor/ui/sockets/SocketView.tsx
new file mode 100644
index 00000000..e97f529a
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/ui/sockets/SocketView.tsx
@@ -0,0 +1,21 @@
+import { AppSocket } from "@/modules/evaluation/graph/editor/sockets/appSocket";
+import { BooleanSocket } from "@/modules/evaluation/graph/editor/sockets/booleanSocket";
+import type { ClassicPreset } from "rete";
+
+export function SocketView(props: { data: ClassicPreset.Socket }) {
+  const isBoolean = props.data instanceof BooleanSocket;
+  const connected =
+    props.data instanceof AppSocket ? props.data.connected : false;
+
+  return (
+    <div
+      title={props.data.name}
+      className={
+        `h-5 w-5 box-border cursor-pointer ${isBoolean ? "rounded-xs" : "rounded-full"} border-2 duration-150 ` +
+        (connected
+          ? "border-zinc-400 bg-zinc-400"
+          : "border-zinc-200 bg-white hover:bg-zinc-400 hover:border-zinc-400")
+      }
+    />
+  );
+}
diff --git a/apps/web/src/modules/evaluation/graph/editor/utils/__tests__/copyPaste.test.ts b/apps/web/src/modules/evaluation/graph/editor/utils/__tests__/copyPaste.test.ts
new file mode 100644
index 00000000..1588c8c3
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/utils/__tests__/copyPaste.test.ts
@@ -0,0 +1,354 @@
+import { BooleanConnection } from "@/modules/evaluation/graph/editor/connections/booleanConnection";
+import { LimitItemConnection } from "@/modules/evaluation/graph/editor/connections/limitItemConnection";
+import { LimitNode } from "@/modules/evaluation/graph/editor/nodes/limit/limit";
+import { CountNode } from "@/modules/evaluation/graph/editor/nodes/limitItem/count";
+import { AndNode } from "@/modules/evaluation/graph/editor/nodes/logical/and";
+import { OrNode } from "@/modules/evaluation/graph/editor/nodes/logical/or";
+import { ResultNode } from "@/modules/evaluation/graph/editor/nodes/result/result";
+import type { Schemes } from "@/modules/evaluation/graph/editor/types";
+import {
+  copyNodes,
+  pasteNodes,
+  type Clipboard,
+} from "@/modules/evaluation/graph/editor/utils/copyPaste";
+import { EvalLimitItemOperatorEnum } from "@repo/schema";
+import type { AreaPlugin } from "rete-area-plugin";
+import { describe, expect, it, vi } from "vitest";
+import { createTestEditor } from "./testEditor";
+
+function mockArea(positions: Record<string, { x: number; y: number }> = {}) {
+  const nodeViews = new Map(
+    Object.entries(positions).map(([id, pos]) => [id, { position: pos }]),
+  );
+  return {
+    nodeViews,
+    translate: vi.fn().mockResolvedValue(undefined),
+    update: vi.fn().mockResolvedValue(undefined),
+  } as unknown as AreaPlugin<Schemes, never>;
+}
+
+function mockSelectableNodes() {
+  return {
+    select: vi
+      .fn<(nodeId: string, accumulate: boolean) => Promise<void>>()
+      .mockResolvedValue(undefined),
+    unselect: vi
+      .fn<(nodeId: string) => Promise<void>>()
+      .mockResolvedValue(undefined),
+  };
+}
+
+describe("copyNodes", () => {
+  it("returns null when no nodes are selected", async () => {
+    const editor = createTestEditor();
+    await editor.addNode(new AndNode());
+    expect(copyNodes(editor, mockArea())).toBeNull();
+  });
+
+  it("returns null when the editor is empty", () => {
+    const editor = createTestEditor();
+    expect(copyNodes(editor, mockArea())).toBeNull();
+  });
+
+  it("clones each selected node so the clipboard captures state at copy time", async () => {
+    const editor = createTestEditor();
+    const and = new AndNode();
+    await editor.addNode(and);
+    and.selected = true;
+
+    const result = copyNodes(editor, mockArea());
+
+    expect(result?.nodes).toHaveLength(1);
+    expect(result?.nodes.at(0)?.node).not.toBe(and);
+  });
+
+  it("reads node positions from area.nodeViews", async () => {
+    const editor = createTestEditor();
+    const and = new AndNode();
+    await editor.addNode(and);
+    and.selected = true;
+
+    const result = copyNodes(editor, mockArea({ [and.id]: { x: 120, y: 80 } }));
+
+    expect(result?.nodes.at(0)?.position).toEqual({ x: 120, y: 80 });
+  });
+
+  it("defaults position to {0,0} when the node has no view entry", async () => {
+    const editor = createTestEditor();
+    const and = new AndNode();
+    await editor.addNode(and);
+    and.selected = true;
+
+    const result = copyNodes(editor, mockArea()); // no position registered
+
+    expect(result?.nodes.at(0)?.position).toEqual({ x: 0, y: 0 });
+  });
+
+  it("computes the center as the average of all node positions", async () => {
+    const editor = createTestEditor();
+    const a = new AndNode();
+    const b = new OrNode();
+    await editor.addNode(a);
+    await editor.addNode(b);
+    a.selected = true;
+    b.selected = true;
+
+    const result = copyNodes(
+      editor,
+      mockArea({ [a.id]: { x: 0, y: 0 }, [b.id]: { x: 100, y: 100 } }),
+    );
+
+    expect(result?.center).toEqual({ x: 50, y: 50 });
+  });
+
+  it("only includes connections where both endpoints are selected", async () => {
+    const editor = createTestEditor();
+    const limit = new LimitNode();
+    const and = new AndNode();
+    const r = new ResultNode();
+    await editor.addNode(limit);
+    await editor.addNode(and);
+    await editor.addNode(r);
+    await editor.addConnection(new BooleanConnection(limit, "out", and, "in"));
+    await editor.addConnection(new BooleanConnection(and, "out", r, "in"));
+
+    limit.selected = true;
+    and.selected = true;
+    // r is NOT selected — the and→r connection must be excluded
+
+    const result = copyNodes(editor, mockArea());
+
+    expect(result?.connections).toHaveLength(1);
+    expect(result?.connections.at(0)?.kind).toBe("boolean");
+  });
+
+  it("preserves the BooleanOperator on a boolean connection", async () => {
+    const editor = createTestEditor();
+    const a = new LimitNode();
+    const b = new ResultNode();
+    await editor.addNode(a);
+    await editor.addNode(b);
+    await editor.addConnection(new BooleanConnection(a, "out", b, "in", "NOT"));
+    a.selected = true;
+    b.selected = true;
+
+    const result = copyNodes(editor, mockArea());
+    const conn = result?.connections.at(0);
+
+    expect(conn?.kind).toBe("boolean");
+    if (conn?.kind === "boolean") expect(conn.operator).toBe("NOT");
+  });
+
+  it("preserves the limitItemOperator on a limit-item connection", async () => {
+    const editor = createTestEditor();
+    const a = new CountNode();
+    const b = new CountNode();
+    await editor.addNode(a);
+    await editor.addNode(b);
+    await editor.addConnection(
+      new LimitItemConnection(a, "out", b, "in", EvalLimitItemOperatorEnum.OR),
+    );
+    a.selected = true;
+    b.selected = true;
+
+    const result = copyNodes(editor, mockArea());
+    const conn = result?.connections.at(0);
+
+    expect(conn?.kind).toBe("limitItem");
+    if (conn?.kind === "limitItem") expect(conn.operator).toBe("OR");
+  });
+
+  it("records parentIndex for children whose Limit parent is also selected", async () => {
+    const editor = createTestEditor();
+    const limit = new LimitNode();
+    const count = new CountNode();
+    count.parent = limit.id;
+    await editor.addNode(limit);
+    await editor.addNode(count);
+    limit.selected = true;
+    count.selected = true;
+
+    const result = copyNodes(editor, mockArea());
+
+    const limitIdx = result!.nodes.findIndex(
+      (e) => e.node instanceof LimitNode,
+    );
+    const countEntry = result!.nodes.find((e) => e.node instanceof CountNode);
+    expect(countEntry?.parentIndex).toBe(limitIdx);
+  });
+
+  it("sets parentIndex to null for a child whose Limit parent is not selected", async () => {
+    const editor = createTestEditor();
+    const limit = new LimitNode();
+    const count = new CountNode();
+    count.parent = limit.id;
+    await editor.addNode(limit);
+    await editor.addNode(count);
+    count.selected = true; // limit is NOT selected
+
+    const result = copyNodes(editor, mockArea());
+
+    expect(result?.nodes.at(0)?.parentIndex).toBeNull();
+  });
+});
+
+describe("pasteNodes", () => {
+  it("adds all clipboard nodes to the editor", async () => {
+    const editor = createTestEditor();
+    const clipboard: Clipboard = {
+      nodes: [
+        { node: new AndNode(), position: { x: 0, y: 0 }, parentIndex: null },
+      ],
+      connections: [],
+      center: { x: 0, y: 0 },
+    };
+
+    await pasteNodes(
+      clipboard,
+      { editor, area: mockArea(), selectableNodes: mockSelectableNodes() },
+      { x: 0, y: 0 },
+    );
+
+    expect(editor.getNodes()).toHaveLength(1);
+  });
+
+  it("recreates boolean connections between pasted nodes", async () => {
+    const editor = createTestEditor();
+    const clipboard: Clipboard = {
+      nodes: [
+        { node: new LimitNode(), position: { x: 0, y: 0 }, parentIndex: null },
+        {
+          node: new ResultNode(),
+          position: { x: 100, y: 0 },
+          parentIndex: null,
+        },
+      ],
+      connections: [
+        {
+          kind: "boolean",
+          sourceIndex: 0,
+          sourceOutput: "out",
+          targetIndex: 1,
+          targetInput: "in",
+          operator: "TRUE",
+        },
+      ],
+      center: { x: 50, y: 0 },
+    };
+
+    await pasteNodes(
+      clipboard,
+      { editor, area: mockArea(), selectableNodes: mockSelectableNodes() },
+      { x: 50, y: 0 },
+    );
+
+    expect(editor.getConnections()).toHaveLength(1);
+    expect(editor.getConnections().at(0)).toBeInstanceOf(BooleanConnection);
+  });
+
+  it("recreates limit-item connections between pasted nodes", async () => {
+    const editor = createTestEditor();
+    const clipboard: Clipboard = {
+      nodes: [
+        { node: new CountNode(), position: { x: 0, y: 0 }, parentIndex: null },
+        { node: new CountNode(), position: { x: 50, y: 0 }, parentIndex: null },
+      ],
+      connections: [
+        {
+          kind: "limitItem",
+          sourceIndex: 0,
+          sourceOutput: "out",
+          targetIndex: 1,
+          targetInput: "in",
+          operator: EvalLimitItemOperatorEnum.OR,
+        },
+      ],
+      center: { x: 25, y: 0 },
+    };
+
+    await pasteNodes(
+      clipboard,
+      { editor, area: mockArea(), selectableNodes: mockSelectableNodes() },
+      { x: 0, y: 0 },
+    );
+
+    const conn = editor.getConnections().at(0);
+    expect(conn).toBeInstanceOf(LimitItemConnection);
+    expect((conn as LimitItemConnection).limitItemOperator).toBe("OR");
+  });
+
+  it("selects pasted nodes and deselects previous selection", async () => {
+    const editor = createTestEditor();
+    const clipboard: Clipboard = {
+      nodes: [
+        { node: new AndNode(), position: { x: 0, y: 0 }, parentIndex: null },
+        { node: new OrNode(), position: { x: 50, y: 0 }, parentIndex: null },
+      ],
+      connections: [],
+      center: { x: 25, y: 0 },
+    };
+    const sel = mockSelectableNodes();
+
+    await pasteNodes(
+      clipboard,
+      { editor, area: mockArea(), selectableNodes: sel },
+      { x: 0, y: 0 },
+    );
+
+    expect(sel.select).toHaveBeenCalledTimes(2);
+    const calls = sel.select.mock.calls;
+    expect(calls.at(0)?.at(1)).toBe(false); // first node: accumulate=false
+    expect(calls.at(1)?.at(1)).toBe(true); // second node: accumulate=true
+  });
+
+  it("remaps parent references so children point to the new cloned parent", async () => {
+    const editor = createTestEditor();
+    const clipboard: Clipboard = {
+      nodes: [
+        { node: new LimitNode(), position: { x: 0, y: 0 }, parentIndex: null }, // index 0
+        { node: new CountNode(), position: { x: 0, y: 0 }, parentIndex: 0 }, // index 1, child of index 0
+      ],
+      connections: [],
+      center: { x: 0, y: 0 },
+    };
+
+    await pasteNodes(
+      clipboard,
+      { editor, area: mockArea(), selectableNodes: mockSelectableNodes() },
+      { x: 0, y: 0 },
+    );
+
+    const nodes = editor.getNodes();
+    const limit = nodes.find((n) => n instanceof LimitNode);
+    const count = nodes.find((n) => n instanceof CountNode);
+    expect(count?.parent).toBe(limit?.id);
+  });
+
+  it("translates each node to paste position plus its offset from the clipboard center", async () => {
+    const editor = createTestEditor();
+    const area = mockArea();
+    const clipboard: Clipboard = {
+      nodes: [
+        {
+          node: new AndNode(),
+          position: { x: 100, y: 200 },
+          parentIndex: null,
+        },
+      ],
+      connections: [],
+      center: { x: 100, y: 200 },
+    };
+
+    await pasteNodes(
+      clipboard,
+      { editor, area, selectableNodes: mockSelectableNodes() },
+      { x: 300, y: 400 },
+    );
+
+    // offset from center = (0, 0), so final position = paste position = (300, 400)
+    expect(area.translate).toHaveBeenCalledWith(expect.any(String), {
+      x: 300,
+      y: 400,
+    });
+  });
+});
diff --git a/apps/web/src/modules/evaluation/graph/editor/utils/__tests__/graph.test.ts b/apps/web/src/modules/evaluation/graph/editor/utils/__tests__/graph.test.ts
new file mode 100644
index 00000000..8130d705
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/utils/__tests__/graph.test.ts
@@ -0,0 +1,123 @@
+import { BooleanConnection } from "@/modules/evaluation/graph/editor/connections/booleanConnection";
+import { AndNode } from "@/modules/evaluation/graph/editor/nodes/logical/and";
+import { OrNode } from "@/modules/evaluation/graph/editor/nodes/logical/or";
+import { ResultNode } from "@/modules/evaluation/graph/editor/nodes/result/result";
+import {
+  countConnectedComponents,
+  findConnectedComponents,
+} from "@/modules/evaluation/graph/editor/utils/graph";
+import { describe, expect, it } from "vitest";
+
+describe("findConnectedComponents", () => {
+  it("returns no components when nodeIds is empty", () => {
+    expect(findConnectedComponents([], [])).toEqual([]);
+  });
+
+  it("treats every isolated node as its own component", () => {
+    expect(findConnectedComponents(["a", "b", "c"], [])).toEqual([
+      ["a"],
+      ["b"],
+      ["c"],
+    ]);
+  });
+
+  it("groups nodes joined by a connection into one component", () => {
+    const components = findConnectedComponents(
+      ["a", "b", "c"],
+      [{ source: "a", target: "b" }],
+    );
+    expect(components).toEqual([["a", "b"], ["c"]]);
+  });
+
+  it("treats connections as undirected", () => {
+    const components = findConnectedComponents(
+      ["a", "b"],
+      [{ source: "b", target: "a" }],
+    );
+    expect(components).toEqual([["a", "b"]]);
+  });
+
+  it("ignores connections whose endpoints are not in nodeIds", () => {
+    const components = findConnectedComponents(
+      ["a", "b"],
+      [
+        { source: "a", target: "missing" },
+        { source: "b", target: "also-missing" },
+      ],
+    );
+    expect(components).toEqual([["a"], ["b"]]);
+  });
+
+  it("discovers chains across multiple hops", () => {
+    const components = findConnectedComponents(
+      ["a", "b", "c", "d"],
+      [
+        { source: "a", target: "b" },
+        { source: "c", target: "d" },
+        { source: "b", target: "c" },
+      ],
+    );
+    expect(components).toEqual([["a", "b", "c", "d"]]);
+  });
+
+  it("orders nodes within a component by their original index", () => {
+    const components = findConnectedComponents(
+      ["c", "a", "b"],
+      [
+        { source: "a", target: "b" },
+        { source: "b", target: "c" },
+      ],
+    );
+    expect(components).toEqual([["c", "a", "b"]]);
+  });
+
+  it("orders components by the oldest node each contains", () => {
+    const components = findConnectedComponents(
+      ["a", "b", "c", "d"],
+      [
+        { source: "c", target: "d" },
+        { source: "a", target: "b" },
+      ],
+    );
+    expect(components).toEqual([
+      ["a", "b"],
+      ["c", "d"],
+    ]);
+  });
+});
+
+describe("countConnectedComponents", () => {
+  it("returns 0 for an empty node list", () => {
+    expect(countConnectedComponents([], [])).toBe(0);
+  });
+
+  it("counts each isolated node as its own component", () => {
+    const a = new AndNode();
+    const b = new OrNode();
+    const r = new ResultNode();
+    expect(countConnectedComponents([a, b, r], [])).toBe(3);
+  });
+
+  it("merges nodes joined by a connection into one component", () => {
+    const a = new AndNode();
+    const r = new ResultNode();
+    const conn = new BooleanConnection(a, "out", r, "in", "TRUE");
+    expect(countConnectedComponents([a, r], [conn])).toBe(1);
+  });
+
+  it("ignores connections whose endpoints are missing from the node list", () => {
+    const a = new AndNode();
+    const b = new OrNode();
+    const r = new ResultNode();
+    const dangling = new BooleanConnection(a, "out", r, "in", "TRUE");
+    expect(countConnectedComponents([a, b], [dangling])).toBe(2);
+  });
+
+  it("handles a mix of connected and disconnected subgraphs", () => {
+    const a = new AndNode();
+    const b = new OrNode();
+    const r = new ResultNode();
+    const conn = new BooleanConnection(a, "out", b, "in", "TRUE");
+    expect(countConnectedComponents([a, b, r], [conn])).toBe(2);
+  });
+});
diff --git a/apps/web/src/modules/evaluation/graph/editor/utils/__tests__/guards.test.ts b/apps/web/src/modules/evaluation/graph/editor/utils/__tests__/guards.test.ts
new file mode 100644
index 00000000..868e412e
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/utils/__tests__/guards.test.ts
@@ -0,0 +1,89 @@
+import { AlertNode } from "@/modules/evaluation/graph/editor/nodes/action/alert";
+import { WarningNode } from "@/modules/evaluation/graph/editor/nodes/action/warning";
+import { LimitNode } from "@/modules/evaluation/graph/editor/nodes/limit/limit";
+import { AreaNode } from "@/modules/evaluation/graph/editor/nodes/limitItem/area";
+import { CountNode } from "@/modules/evaluation/graph/editor/nodes/limitItem/count";
+import { PositionNode } from "@/modules/evaluation/graph/editor/nodes/limitItem/position";
+import { AndNode } from "@/modules/evaluation/graph/editor/nodes/logical/and";
+import { OrNode } from "@/modules/evaluation/graph/editor/nodes/logical/or";
+import { ResultNode } from "@/modules/evaluation/graph/editor/nodes/result/result";
+import {
+  isActionNode,
+  isLimitItemNode,
+  isLimitNode,
+  isLogicalOperator,
+  isResultNode,
+} from "@/modules/evaluation/graph/editor/utils/guards";
+import { describe, expect, it } from "vitest";
+
+describe("isLimitItemNode", () => {
+  it("accepts Count, Position, and Area nodes", () => {
+    expect(isLimitItemNode(new CountNode())).toBe(true);
+    expect(isLimitItemNode(new PositionNode())).toBe(true);
+    expect(isLimitItemNode(new AreaNode())).toBe(true);
+  });
+
+  it("rejects non-limit-item nodes", () => {
+    expect(isLimitItemNode(new AndNode())).toBe(false);
+    expect(isLimitItemNode(new OrNode())).toBe(false);
+    expect(isLimitItemNode(new LimitNode())).toBe(false);
+    expect(isLimitItemNode(new WarningNode())).toBe(false);
+    expect(isLimitItemNode(new AlertNode())).toBe(false);
+    expect(isLimitItemNode(new ResultNode())).toBe(false);
+  });
+});
+
+describe("isLogicalOperator", () => {
+  it("accepts And and Or nodes", () => {
+    expect(isLogicalOperator(new AndNode())).toBe(true);
+    expect(isLogicalOperator(new OrNode())).toBe(true);
+  });
+
+  it("rejects non-logical-operator nodes", () => {
+    expect(isLogicalOperator(new CountNode())).toBe(false);
+    expect(isLogicalOperator(new LimitNode())).toBe(false);
+    expect(isLogicalOperator(new WarningNode())).toBe(false);
+    expect(isLogicalOperator(new AlertNode())).toBe(false);
+    expect(isLogicalOperator(new ResultNode())).toBe(false);
+  });
+});
+
+describe("isLimitNode", () => {
+  it("accepts LimitNode", () => {
+    expect(isLimitNode(new LimitNode())).toBe(true);
+  });
+
+  it("rejects non-Limit nodes", () => {
+    expect(isLimitNode(new CountNode())).toBe(false);
+    expect(isLimitNode(new AndNode())).toBe(false);
+    expect(isLimitNode(new ResultNode())).toBe(false);
+  });
+});
+
+describe("isActionNode", () => {
+  it("accepts Warning and Alert nodes", () => {
+    expect(isActionNode(new WarningNode())).toBe(true);
+    expect(isActionNode(new AlertNode())).toBe(true);
+  });
+
+  it("rejects non-action nodes", () => {
+    expect(isActionNode(new CountNode())).toBe(false);
+    expect(isActionNode(new AndNode())).toBe(false);
+    expect(isActionNode(new LimitNode())).toBe(false);
+    expect(isActionNode(new ResultNode())).toBe(false);
+  });
+});
+
+describe("isResultNode", () => {
+  it("accepts ResultNode", () => {
+    expect(isResultNode(new ResultNode())).toBe(true);
+  });
+
+  it("rejects non-Result nodes", () => {
+    expect(isResultNode(new CountNode())).toBe(false);
+    expect(isResultNode(new AndNode())).toBe(false);
+    expect(isResultNode(new LimitNode())).toBe(false);
+    expect(isResultNode(new WarningNode())).toBe(false);
+    expect(isResultNode(new AlertNode())).toBe(false);
+  });
+});
diff --git a/apps/web/src/modules/evaluation/graph/editor/utils/__tests__/nodeSelection.test.ts b/apps/web/src/modules/evaluation/graph/editor/utils/__tests__/nodeSelection.test.ts
new file mode 100644
index 00000000..161085c7
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/utils/__tests__/nodeSelection.test.ts
@@ -0,0 +1,132 @@
+import { BooleanConnection } from "@/modules/evaluation/graph/editor/connections/booleanConnection";
+import { LimitNode } from "@/modules/evaluation/graph/editor/nodes/limit/limit";
+import { CountNode } from "@/modules/evaluation/graph/editor/nodes/limitItem/count";
+import { AndNode } from "@/modules/evaluation/graph/editor/nodes/logical/and";
+import { OrNode } from "@/modules/evaluation/graph/editor/nodes/logical/or";
+import { ResultNode } from "@/modules/evaluation/graph/editor/nodes/result/result";
+import {
+  deleteSelectedNodes,
+  deselectAllNodes,
+  selectAllNodes,
+} from "@/modules/evaluation/graph/editor/utils/nodeSelection";
+import { describe, expect, it, vi } from "vitest";
+import { createTestEditor } from "./testEditor";
+
+function mockSelectableNodes() {
+  return {
+    select: vi
+      .fn<(nodeId: string, accumulate: boolean) => Promise<void>>()
+      .mockResolvedValue(undefined),
+    unselect: vi
+      .fn<(nodeId: string) => Promise<void>>()
+      .mockResolvedValue(undefined),
+  };
+}
+
+describe("selectAllNodes", () => {
+  it("does nothing when the editor is empty", async () => {
+    const editor = createTestEditor();
+    const sel = mockSelectableNodes();
+    await selectAllNodes(sel, editor);
+    expect(sel.select).not.toHaveBeenCalled();
+  });
+
+  it("calls select for every node with accumulate=false for the first and true for the rest", async () => {
+    const editor = createTestEditor();
+    const a = new AndNode();
+    const b = new OrNode();
+    const r = new ResultNode();
+    await editor.addNode(a);
+    await editor.addNode(b);
+    await editor.addNode(r);
+
+    const sel = mockSelectableNodes();
+    await selectAllNodes(sel, editor);
+
+    expect(sel.select).toHaveBeenCalledTimes(3);
+    expect(sel.select).toHaveBeenNthCalledWith(1, a.id, false);
+    expect(sel.select).toHaveBeenNthCalledWith(2, b.id, true);
+    expect(sel.select).toHaveBeenNthCalledWith(3, r.id, true);
+  });
+});
+
+describe("deselectAllNodes", () => {
+  it("does nothing when no nodes are selected", async () => {
+    const editor = createTestEditor();
+    await editor.addNode(new AndNode());
+    const sel = mockSelectableNodes();
+    await deselectAllNodes(sel, editor);
+    expect(sel.unselect).not.toHaveBeenCalled();
+  });
+
+  it("calls unselect only for selected nodes", async () => {
+    const editor = createTestEditor();
+    const a = new AndNode();
+    const b = new OrNode();
+    await editor.addNode(a);
+    await editor.addNode(b);
+    a.selected = true;
+
+    const sel = mockSelectableNodes();
+    await deselectAllNodes(sel, editor);
+
+    expect(sel.unselect).toHaveBeenCalledTimes(1);
+    expect(sel.unselect).toHaveBeenCalledWith(a.id);
+    expect(sel.unselect).not.toHaveBeenCalledWith(b.id);
+  });
+});
+
+describe("deleteSelectedNodes", () => {
+  it("removes a selected node", async () => {
+    const editor = createTestEditor();
+    const a = new AndNode();
+    await editor.addNode(a);
+    a.selected = true;
+    await deleteSelectedNodes(editor);
+    expect(editor.getNode(a.id)).toBeUndefined();
+  });
+
+  it("leaves unselected nodes untouched", async () => {
+    const editor = createTestEditor();
+    const a = new AndNode();
+    const b = new OrNode();
+    await editor.addNode(a);
+    await editor.addNode(b);
+    a.selected = true;
+
+    await deleteSelectedNodes(editor);
+
+    expect(editor.getNode(a.id)).toBeUndefined();
+    expect(editor.getNode(b.id)).toBeDefined();
+  });
+
+  it("removes a selected Limit and its children together", async () => {
+    const editor = createTestEditor();
+    const limit = new LimitNode();
+    const count = new CountNode();
+    count.parent = limit.id;
+    await editor.addNode(limit);
+    await editor.addNode(count);
+    limit.selected = true;
+    count.selected = true;
+
+    await deleteSelectedNodes(editor);
+
+    expect(editor.getNode(limit.id)).toBeUndefined();
+    expect(editor.getNode(count.id)).toBeUndefined();
+  });
+
+  it("also removes connections attached to deleted nodes", async () => {
+    const editor = createTestEditor();
+    const a = new LimitNode();
+    const b = new ResultNode();
+    await editor.addNode(a);
+    await editor.addNode(b);
+    await editor.addConnection(new BooleanConnection(a, "out", b, "in"));
+    a.selected = true;
+
+    await deleteSelectedNodes(editor);
+
+    expect(editor.getConnections()).toHaveLength(0);
+  });
+});
diff --git a/apps/web/src/modules/evaluation/graph/editor/utils/__tests__/removeNodes.test.ts b/apps/web/src/modules/evaluation/graph/editor/utils/__tests__/removeNodes.test.ts
new file mode 100644
index 00000000..469cf1cf
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/utils/__tests__/removeNodes.test.ts
@@ -0,0 +1,115 @@
+import { BooleanConnection } from "@/modules/evaluation/graph/editor/connections/booleanConnection";
+import { LimitItemConnection } from "@/modules/evaluation/graph/editor/connections/limitItemConnection";
+import { LimitNode } from "@/modules/evaluation/graph/editor/nodes/limit/limit";
+import { CountNode } from "@/modules/evaluation/graph/editor/nodes/limitItem/count";
+import { AndNode } from "@/modules/evaluation/graph/editor/nodes/logical/and";
+import { ResultNode } from "@/modules/evaluation/graph/editor/nodes/result/result";
+import {
+  removeAllNodes,
+  removeNodeWithDescendants,
+} from "@/modules/evaluation/graph/editor/utils/removeNodes";
+import { describe, expect, it } from "vitest";
+import { createTestEditor } from "./testEditor";
+
+describe("removeNodeWithDescendants", () => {
+  it("removes a node that has no connections", async () => {
+    const editor = createTestEditor();
+    const node = new AndNode();
+
+    await editor.addNode(node);
+    await removeNodeWithDescendants(editor, node.id);
+
+    expect(editor.getNodes()).toHaveLength(0);
+  });
+
+  it("removes both incoming and outgoing connections of the deleted node", async () => {
+    const editor = createTestEditor();
+    const limitA = new LimitNode();
+    const limitB = new LimitNode();
+    const and = new AndNode();
+    const result = new ResultNode();
+
+    await editor.addNode(limitA);
+    await editor.addNode(limitB);
+    await editor.addNode(and);
+    await editor.addNode(result);
+    await editor.addConnection(new BooleanConnection(limitA, "out", and, "in"));
+    await editor.addConnection(new BooleanConnection(limitB, "out", and, "in"));
+    await editor.addConnection(new BooleanConnection(and, "out", result, "in"));
+
+    await removeNodeWithDescendants(editor, and.id);
+
+    expect(
+      editor
+        .getNodes()
+        .map((n) => n.id)
+        .sort(),
+    ).toEqual([limitA.id, limitB.id, result.id].sort());
+    expect(editor.getConnections()).toHaveLength(0);
+  });
+
+  it("leaves no dangling connection references after deletion", async () => {
+    const editor = createTestEditor();
+    const a = new LimitNode();
+    const b = new AndNode();
+    const r = new ResultNode();
+
+    await editor.addNode(a);
+    await editor.addNode(b);
+    await editor.addNode(r);
+    await editor.addConnection(new BooleanConnection(a, "out", b, "in"));
+    await editor.addConnection(new BooleanConnection(b, "out", r, "in"));
+
+    await removeNodeWithDescendants(editor, b.id);
+
+    for (const conn of editor.getConnections()) {
+      expect(editor.getNode(conn.source)).toBeDefined();
+      expect(editor.getNode(conn.target)).toBeDefined();
+    }
+  });
+
+  it("cascades into scoped children when removing a Limit node", async () => {
+    const editor = createTestEditor();
+    const limit = new LimitNode();
+    const itemA = new CountNode();
+    const itemB = new CountNode();
+
+    itemA.parent = limit.id;
+    itemB.parent = limit.id;
+
+    await editor.addNode(limit);
+    await editor.addNode(itemA);
+    await editor.addNode(itemB);
+    await editor.addConnection(
+      new LimitItemConnection(itemA, "out", itemB, "in"),
+    );
+
+    await removeNodeWithDescendants(editor, limit.id);
+
+    expect(editor.getNodes()).toHaveLength(0);
+    expect(editor.getConnections()).toHaveLength(0);
+  });
+});
+
+describe("removeAllNodes", () => {
+  it("clears all nodes and connections from the editor", async () => {
+    const editor = createTestEditor();
+    const and = new AndNode();
+    const result = new ResultNode();
+
+    await editor.addNode(and);
+    await editor.addNode(result);
+    await editor.addConnection(new BooleanConnection(and, "out", result, "in"));
+
+    await removeAllNodes(editor);
+
+    expect(editor.getNodes()).toHaveLength(0);
+    expect(editor.getConnections()).toHaveLength(0);
+  });
+
+  it("does nothing when the editor is already empty", async () => {
+    const editor = createTestEditor();
+    await removeAllNodes(editor);
+    expect(editor.getNodes()).toHaveLength(0);
+  });
+});
diff --git a/apps/web/src/modules/evaluation/graph/editor/utils/__tests__/testEditor.ts b/apps/web/src/modules/evaluation/graph/editor/utils/__tests__/testEditor.ts
new file mode 100644
index 00000000..9992ea86
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/utils/__tests__/testEditor.ts
@@ -0,0 +1,22 @@
+import type { AreaExtra } from "@/modules/evaluation/graph/editor/setup/createEditor";
+import type { Schemes } from "@/modules/evaluation/graph/editor/types";
+import { NodeEditor } from "rete";
+import type { AreaPlugin } from "rete-area-plugin";
+
+export function createTestEditor(): NodeEditor<Schemes> {
+  return new NodeEditor<Schemes>();
+}
+
+/**
+ * Minimal AreaPlugin stub for headless tests. The deserializer calls
+ * area.translate / area.update purely for visual updates; in tests we just
+ * need them to be awaitable no-ops.
+ */
+export function createTestArea(): AreaPlugin<Schemes, AreaExtra> {
+  const stub = {
+    translate: async () => {},
+    update: async () => {},
+  };
+
+  return stub as unknown as AreaPlugin<Schemes, AreaExtra>;
+}
diff --git a/apps/web/src/modules/evaluation/graph/editor/utils/copyPaste.ts b/apps/web/src/modules/evaluation/graph/editor/utils/copyPaste.ts
new file mode 100644
index 00000000..a1847361
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/utils/copyPaste.ts
@@ -0,0 +1,187 @@
+import {
+  BooleanConnection,
+  type BooleanOperator,
+} from "@/modules/evaluation/graph/editor/connections/booleanConnection";
+import { LimitItemConnection } from "@/modules/evaluation/graph/editor/connections/limitItemConnection";
+import type {
+  LimitItemProps,
+  BooleanNodeProps,
+  Schemes,
+} from "@/modules/evaluation/graph/editor/types";
+import type { EvalLimitItemOperatorEnum } from "@repo/schema";
+import type { NodeEditor } from "rete";
+import type { AreaPlugin } from "rete-area-plugin";
+import { deselectAllNodes, type SelectableNodes } from "./nodeSelection";
+
+export type ClipboardNodeEntry = {
+  node: Schemes["Node"];
+  position: { x: number; y: number };
+  parentIndex: number | null;
+};
+
+export type ClipboardConnectionEntry =
+  | {
+      kind: "boolean";
+      sourceIndex: number;
+      sourceOutput: string;
+      targetIndex: number;
+      targetInput: string;
+      operator: BooleanOperator;
+    }
+  | {
+      kind: "limitItem";
+      sourceIndex: number;
+      sourceOutput: string;
+      targetIndex: number;
+      targetInput: string;
+      operator: EvalLimitItemOperatorEnum;
+    };
+
+export type Clipboard = {
+  nodes: ClipboardNodeEntry[];
+  connections: ClipboardConnectionEntry[];
+  center: { x: number; y: number };
+};
+
+/**
+ * Snapshots all selected nodes (cloning their state at copy time) along with
+ * every connection whose both endpoints are inside the selection.
+ */
+export function copyNodes<E>(
+  editor: NodeEditor<Schemes>,
+  area: AreaPlugin<Schemes, E>,
+): Clipboard | null {
+  const selectedNodes = editor.getNodes().filter((n) => n.selected);
+  if (selectedNodes.length === 0) return null;
+
+  const selectedIds = new Set(selectedNodes.map((n) => n.id));
+  const indexById = new Map(selectedNodes.map((n, i) => [n.id, i]));
+
+  const nodes: ClipboardNodeEntry[] = selectedNodes.map((node) => ({
+    node: node.clone(),
+    position: area.nodeViews.get(node.id)?.position ?? { x: 0, y: 0 },
+    parentIndex:
+      node.parent != null && indexById.has(node.parent)
+        ? (indexById.get(node.parent) ?? null)
+        : null,
+  }));
+
+  const connections: ClipboardConnectionEntry[] = editor
+    .getConnections()
+    .filter((c) => selectedIds.has(c.source) && selectedIds.has(c.target))
+    .flatMap((c): ClipboardConnectionEntry[] => {
+      const sourceIndex = indexById.get(c.source);
+      const targetIndex = indexById.get(c.target);
+      if (sourceIndex === undefined || targetIndex === undefined) return [];
+
+      const base = {
+        sourceIndex,
+        sourceOutput: String(c.sourceOutput),
+        targetIndex,
+        targetInput: String(c.targetInput),
+      };
+
+      if (c instanceof BooleanConnection) {
+        return [
+          { ...base, kind: "boolean" as const, operator: c.booleanOperator },
+        ];
+      }
+      if (c instanceof LimitItemConnection) {
+        return [
+          {
+            ...base,
+            kind: "limitItem" as const,
+            operator: c.limitItemOperator,
+          },
+        ];
+      }
+      return [];
+    });
+
+  const center = {
+    x: nodes.reduce((sum, n) => sum + n.position.x, 0) / nodes.length,
+    y: nodes.reduce((sum, n) => sum + n.position.y, 0) / nodes.length,
+  };
+
+  return { nodes, connections, center };
+}
+
+/**
+ * Clones the clipboard entries (fresh IDs each paste), positions the chunk
+ * around the given canvas position, restores internal connections, and selects
+ * the newly created nodes.
+ */
+export async function pasteNodes<E>(
+  clipboard: Clipboard,
+  props: {
+    editor: NodeEditor<Schemes>;
+    area: AreaPlugin<Schemes, E>;
+    selectableNodes: SelectableNodes;
+  },
+  position: { x: number; y: number },
+) {
+  const { editor, area, selectableNodes } = props;
+
+  const newNodes = clipboard.nodes.map((entry) => entry.node.clone());
+
+  // Remap parent references from clipboard IDs to the newly cloned IDs.
+  for (const [i, newNode] of newNodes.entries()) {
+    const parentIndex = clipboard.nodes.at(i)?.parentIndex;
+    if (parentIndex == null) continue;
+    newNode.parent = newNodes.at(parentIndex)?.id;
+  }
+
+  // The scopes plugin requires a parent node to exist before its children are added.
+  const roots = newNodes.filter((n) => !n.parent);
+  const children = newNodes.filter((n) => !!n.parent);
+  for (const node of [...roots, ...children]) {
+    await editor.addNode(node);
+  }
+
+  // Place each node at the paste position plus its original offset from the center.
+  for (const [i, node] of newNodes.entries()) {
+    const entry = clipboard.nodes.at(i);
+    if (!entry) continue;
+    await area.translate(node.id, {
+      x: position.x + (entry.position.x - clipboard.center.x),
+      y: position.y + (entry.position.y - clipboard.center.y),
+    });
+  }
+
+  for (const connEntry of clipboard.connections) {
+    const source = newNodes.at(connEntry.sourceIndex);
+    const target = newNodes.at(connEntry.targetIndex);
+    if (!source || !target) continue;
+
+    if (connEntry.kind === "boolean") {
+      await editor.addConnection(
+        new BooleanConnection(
+          source as BooleanNodeProps,
+          connEntry.sourceOutput,
+          target as BooleanNodeProps,
+          connEntry.targetInput,
+          connEntry.operator,
+        ),
+      );
+    } else {
+      await editor.addConnection(
+        new LimitItemConnection(
+          source as LimitItemProps,
+          connEntry.sourceOutput,
+          target as LimitItemProps,
+          connEntry.targetInput,
+          connEntry.operator,
+        ),
+      );
+    }
+  }
+
+  await deselectAllNodes(selectableNodes, editor);
+  for (const [i, node] of newNodes.entries()) {
+    await selectableNodes.select(node.id, i > 0);
+  }
+
+  for (const node of newNodes) {
+    await area.update("node", node.id);
+  }
+}
diff --git a/apps/web/src/modules/evaluation/graph/editor/utils/graph.ts b/apps/web/src/modules/evaluation/graph/editor/utils/graph.ts
new file mode 100644
index 00000000..842755d2
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/utils/graph.ts
@@ -0,0 +1,88 @@
+import type {
+  ConnProps,
+  NodeProps,
+} from "@/modules/evaluation/graph/editor/types";
+
+export function findConnectedComponents(
+  nodeIds: string[],
+  connections: Array<{ source: string; target: string }>,
+) {
+  const allowedIds = new Set(nodeIds);
+  const adjacency = new Map<string, Set<string>>();
+
+  const originalIndexByNodeId = new Map<string, number>();
+
+  nodeIds.forEach((nodeId, index) => {
+    originalIndexByNodeId.set(nodeId, index);
+    adjacency.set(nodeId, new Set());
+  });
+
+  for (const connection of connections) {
+    if (!allowedIds.has(connection.source)) continue;
+    if (!allowedIds.has(connection.target)) continue;
+
+    adjacency.get(connection.source)?.add(connection.target);
+    adjacency.get(connection.target)?.add(connection.source);
+  }
+
+  const components: string[][] = [];
+  const visited = new Set<string>();
+
+  for (const nodeId of nodeIds) {
+    if (visited.has(nodeId)) continue;
+
+    const component: string[] = [];
+    const stack = [nodeId];
+
+    visited.add(nodeId);
+
+    while (stack.length > 0) {
+      const current = stack.pop();
+      if (current === undefined) continue;
+
+      component.push(current);
+
+      for (const next of adjacency.get(current) ?? []) {
+        if (visited.has(next)) continue;
+
+        visited.add(next);
+        stack.push(next);
+      }
+    }
+
+    component.sort((a, b) => {
+      const indexA = originalIndexByNodeId.get(a) ?? Number.MAX_SAFE_INTEGER;
+      const indexB = originalIndexByNodeId.get(b) ?? Number.MAX_SAFE_INTEGER;
+      return indexA - indexB;
+    });
+
+    components.push(component);
+  }
+
+  return components.sort((a, b) => {
+    const oldestIndexA = getOldestNodeIndex(a, originalIndexByNodeId);
+    const oldestIndexB = getOldestNodeIndex(b, originalIndexByNodeId);
+    return oldestIndexA - oldestIndexB;
+  });
+}
+
+function getOldestNodeIndex(
+  component: string[],
+  originalIndexByNodeId: Map<string, number>,
+) {
+  return component.reduce((oldestIndex, nodeId) => {
+    const index = originalIndexByNodeId.get(nodeId) ?? Number.MAX_SAFE_INTEGER;
+
+    return Math.min(oldestIndex, index);
+  }, Number.MAX_SAFE_INTEGER);
+}
+
+export function countConnectedComponents(
+  nodes: NodeProps[],
+  connections: ConnProps[],
+) {
+  return findConnectedComponents(
+    nodes.map((node) => node.id),
+    connections,
+  ).length;
+}
diff --git a/apps/web/src/modules/evaluation/graph/editor/utils/guards.ts b/apps/web/src/modules/evaluation/graph/editor/utils/guards.ts
new file mode 100644
index 00000000..a8da813c
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/utils/guards.ts
@@ -0,0 +1,37 @@
+import { AlertNode } from "@/modules/evaluation/graph/editor/nodes/action/alert";
+import { WarningNode } from "@/modules/evaluation/graph/editor/nodes/action/warning";
+import { LimitNode } from "@/modules/evaluation/graph/editor/nodes/limit/limit";
+import { AreaNode } from "@/modules/evaluation/graph/editor/nodes/limitItem/area";
+import { CountNode } from "@/modules/evaluation/graph/editor/nodes/limitItem/count";
+import { PositionNode } from "@/modules/evaluation/graph/editor/nodes/limitItem/position";
+import { AndNode } from "@/modules/evaluation/graph/editor/nodes/logical/and";
+import { OrNode } from "@/modules/evaluation/graph/editor/nodes/logical/or";
+import { ResultNode } from "@/modules/evaluation/graph/editor/nodes/result/result";
+import type {
+  LimitItemProps,
+  NodeProps,
+} from "@/modules/evaluation/graph/editor/types";
+
+export function isLimitItemNode(node: NodeProps): node is LimitItemProps {
+  return (
+    node instanceof CountNode ||
+    node instanceof PositionNode ||
+    node instanceof AreaNode
+  );
+}
+
+export function isLogicalOperator(node: NodeProps): node is AndNode | OrNode {
+  return node instanceof AndNode || node instanceof OrNode;
+}
+
+export function isLimitNode(node: NodeProps): node is LimitNode {
+  return node instanceof LimitNode;
+}
+
+export function isActionNode(node: NodeProps): node is WarningNode | AlertNode {
+  return node instanceof WarningNode || node instanceof AlertNode;
+}
+
+export function isResultNode(node: NodeProps): node is ResultNode {
+  return node instanceof ResultNode;
+}
diff --git a/apps/web/src/modules/evaluation/graph/editor/utils/nodeSelection.ts b/apps/web/src/modules/evaluation/graph/editor/utils/nodeSelection.ts
new file mode 100644
index 00000000..fbb11ebd
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/utils/nodeSelection.ts
@@ -0,0 +1,66 @@
+import type { AreaExtra } from "@/modules/evaluation/graph/editor/setup/createEditor";
+import type { Schemes } from "@/modules/evaluation/graph/editor/types";
+import type { NodeEditor } from "rete";
+import type { AreaPlugin } from "rete-area-plugin";
+import type { HistoryPlugin } from "rete-history-plugin";
+import { removeNodeWithDescendants } from "./removeNodes";
+
+export type SelectableNodes = {
+  select: (nodeId: string, accumulate: boolean) => Promise<void>;
+  unselect: (nodeId: string) => Promise<void>;
+};
+
+export async function selectAllNodes(
+  selectableNodes: SelectableNodes,
+  editor: NodeEditor<Schemes>,
+) {
+  const nodes = editor.getNodes();
+  for (const [index, node] of nodes.entries()) {
+    await selectableNodes.select(node.id, index > 0);
+  }
+}
+
+export async function deselectAllNodes(
+  selectableNodes: SelectableNodes,
+  editor: NodeEditor<Schemes>,
+) {
+  const selectedNodes = editor.getNodes().filter((node) => node.selected);
+  for (const node of selectedNodes) {
+    await selectableNodes.unselect(node.id);
+  }
+}
+
+/**
+ * Removes all selected nodes, treating each top-level selected node as the root
+ * of its subtree. Children of a selected parent are removed via cascade and are
+ * not processed separately.
+ */
+export async function deleteSelectedNodes(
+  editor: NodeEditor<Schemes>,
+  area?: AreaPlugin<Schemes, AreaExtra>,
+  history?: HistoryPlugin<Schemes>,
+) {
+  const selectedNodes = editor.getNodes().filter((node) => node.selected);
+  const selectedNodeIds = new Set(selectedNodes.map((node) => node.id));
+
+  const topLevelSelectedNodes = selectedNodes.filter(
+    (node) => !node.parent || !selectedNodeIds.has(node.parent),
+  );
+
+  if (topLevelSelectedNodes.length === 0) return;
+
+  const options = area && history ? { area, history } : undefined;
+
+  // The history plugin chains undo across actions within 200ms of each other.
+  // Without explicit boundaries, undoing the cascade deletes also undoes any
+  // drag/create action that happened to land in that window, restoring nodes
+  // to their pre-drag positions instead of where the user deleted them.
+  // separate() marks the latest action as a hard stop for the chain.
+  history?.separate();
+
+  for (const node of topLevelSelectedNodes) {
+    await removeNodeWithDescendants(editor, node.id, options);
+  }
+
+  history?.separate();
+}
diff --git a/apps/web/src/modules/evaluation/graph/editor/utils/removeNodes.ts b/apps/web/src/modules/evaluation/graph/editor/utils/removeNodes.ts
new file mode 100644
index 00000000..3f62d377
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/utils/removeNodes.ts
@@ -0,0 +1,201 @@
+import type { AreaExtra } from "@/modules/evaluation/graph/editor/setup/createEditor";
+import type { Schemes } from "@/modules/evaluation/graph/editor/types";
+import type { NodeEditor } from "rete";
+import type { AreaPlugin } from "rete-area-plugin";
+import type { HistoryPlugin } from "rete-history-plugin";
+
+type Position = { x: number; y: number };
+
+type NodeSnapshot = {
+  node: Schemes["Node"];
+  position: Position;
+  width: number;
+  height: number;
+  depth: number;
+};
+
+/**
+ * Atomic history action for a cascade delete. The default classic preset
+ * records each child removal plus the parent translations the scopes plugin
+ * triggers as separate entries, and replaying them in reverse leaves the
+ * parent the wrong size, shifts children via translateChildren side effects,
+ * and can drop connections. Snapshotting upfront and restoring in one shot
+ * sidesteps all of that.
+ */
+class CascadeRemoveAction {
+  constructor(
+    private editor: NodeEditor<Schemes>,
+    private area: AreaPlugin<Schemes, AreaExtra>,
+    private snapshots: NodeSnapshot[],
+    private connections: Schemes["Connection"][],
+  ) {}
+
+  async undo() {
+    const ascending = [...this.snapshots].sort((a, b) => a.depth - b.depth);
+
+    for (const snap of ascending) {
+      snap.node.width = snap.width;
+      snap.node.height = snap.height;
+      await this.editor.addNode(snap.node);
+      await this.area.translate(snap.node.id, snap.position);
+    }
+    
+    for (const snap of ascending) {
+      if (snap.node.width !== snap.width || snap.node.height !== snap.height) {
+        snap.node.width = snap.width;
+        snap.node.height = snap.height;
+        await this.area.resize(snap.node.id, snap.width, snap.height);
+      }
+    }
+
+    for (const connection of this.connections) {
+      await this.editor.addConnection(connection);
+    }
+  }
+
+  async redo() {
+    for (const connection of this.connections) {
+      await this.editor.removeConnection(connection.id);
+    }
+
+    const descending = [...this.snapshots].sort((a, b) => b.depth - a.depth);
+    for (const snap of descending) {
+      await this.editor.removeNode(snap.node.id);
+    }
+  }
+}
+
+type CascadeOptions = {
+  area: AreaPlugin<Schemes, AreaExtra>;
+  history: HistoryPlugin<Schemes>;
+};
+
+/**
+ * Disable history recording while running `fn`. The classic preset's pipes
+ * still fire, but History.add() short-circuits when `active` is true. Used to
+ * keep the cascade delete from polluting the history with the per-node remove
+ * actions and the scopes plugin's resize-driven drag actions.
+ */
+async function withSuspendedHistory<T>(
+  history: HistoryPlugin<Schemes>,
+  fn: () => Promise<T>,
+): Promise<T> {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const inner = (history as any).history as { active: boolean };
+  const previous = inner.active;
+  inner.active = true;
+  try {
+    return await fn();
+  } finally {
+    inner.active = previous;
+  }
+}
+
+export async function removeNodeWithDescendants(
+  editor: NodeEditor<Schemes>,
+  nodeId: string,
+  options?: CascadeOptions,
+) {
+  const nodeIdsToRemove = collectDescendantNodeIds(editor, nodeId);
+
+  const connectionsToRemove = editor.getConnections().filter((connection) => {
+    return (
+      nodeIdsToRemove.has(connection.source) ||
+      nodeIdsToRemove.has(connection.target)
+    );
+  });
+
+  const nodesInRemovalOrder = [...nodeIdsToRemove]
+    .map((id) => editor.getNode(id))
+    .filter((node): node is Schemes["Node"] => Boolean(node))
+    .sort((a, b) => {
+      return getNodeDepth(editor, b.id) - getNodeDepth(editor, a.id);
+    });
+
+  if (!options) {
+    for (const connection of connectionsToRemove) {
+      await editor.removeConnection(connection.id);
+    }
+    for (const node of nodesInRemovalOrder) {
+      await editor.removeNode(node.id);
+    }
+    return;
+  }
+
+  const { area, history } = options;
+
+  const snapshots: NodeSnapshot[] = [];
+  for (const node of nodesInRemovalOrder) {
+    const view = area.nodeViews.get(node.id);
+    snapshots.push({
+      node,
+      position: view ? { x: view.position.x, y: view.position.y } : { x: 0, y: 0 },
+      width: node.width,
+      height: node.height,
+      depth: getNodeDepth(editor, node.id),
+    });
+  }
+
+  await withSuspendedHistory(history, async () => {
+    for (const connection of connectionsToRemove) {
+      await editor.removeConnection(connection.id);
+    }
+    for (const node of nodesInRemovalOrder) {
+      await editor.removeNode(node.id);
+    }
+  });
+
+  history.add(
+    new CascadeRemoveAction(editor, area, snapshots, connectionsToRemove),
+  );
+}
+
+export async function removeAllNodes(editor: NodeEditor<Schemes>) {
+  for (const connection of editor.getConnections()) {
+    await editor.removeConnection(connection.id);
+  }
+
+  const nodes = editor
+    .getNodes()
+    .sort((a, b) => getNodeDepth(editor, b.id) - getNodeDepth(editor, a.id));
+
+  for (const node of nodes) {
+    await editor.removeNode(node.id);
+  }
+}
+
+function collectDescendantNodeIds(
+  editor: NodeEditor<Schemes>,
+  rootNodeId: string,
+) {
+  const result = new Set<string>();
+  const stack = [rootNodeId];
+
+  while (stack.length > 0) {
+    const currentId = stack.pop();
+
+    if (!currentId || result.has(currentId)) continue;
+
+    result.add(currentId);
+
+    for (const node of editor.getNodes()) {
+      if (node.parent === currentId) {
+        stack.push(node.id);
+      }
+    }
+  }
+
+  return result;
+}
+
+function getNodeDepth(editor: NodeEditor<Schemes>, nodeId: string) {
+  let depth = 0;
+  let current = editor.getNode(nodeId);
+
+  while (current?.parent) {
+    depth += 1;
+    current = editor.getNode(current.parent);
+  }
+
+  return depth;
+}
diff --git a/apps/web/src/modules/evaluation/graph/editor/utils/scopes.ts b/apps/web/src/modules/evaluation/graph/editor/utils/scopes.ts
new file mode 100644
index 00000000..ba90fd6c
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/utils/scopes.ts
@@ -0,0 +1,18 @@
+import { LimitNode } from "@/modules/evaluation/graph/editor/nodes/limit/limit";
+import type { NodeProps } from "@/modules/evaluation/graph/editor/types";
+
+export function canHaveChildren(node: NodeProps | undefined): boolean {
+  return !!node && node.allowedChildGroups.length > 0;
+}
+
+export function canBeChildOf(
+  child: NodeProps | undefined,
+  parent: NodeProps | undefined,
+): boolean {
+  if (!child || !parent) return false;
+  return parent.allowedChildGroups.includes(child.nodeGroup);
+}
+
+export function isScopeNode(node: NodeProps | undefined): node is LimitNode {
+  return node instanceof LimitNode;
+}
diff --git a/apps/web/src/modules/evaluation/graph/editor/validation/issues.ts b/apps/web/src/modules/evaluation/graph/editor/validation/issues.ts
new file mode 100644
index 00000000..8fa38312
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/validation/issues.ts
@@ -0,0 +1,27 @@
+import type {
+  ControlIssue,
+  ControlIssuesByNode,
+  ValidationIssue,
+} from "./types";
+
+export function pushIssue(
+  nodeIssues: Map<string, ValidationIssue[]>,
+  nodeId: string,
+  issue: ValidationIssue,
+) {
+  const issues = nodeIssues.get(nodeId) ?? [];
+  issues.push(issue);
+  nodeIssues.set(nodeId, issues);
+}
+
+export function pushControlIssue(
+  controlIssues: ControlIssuesByNode,
+  nodeId: string,
+  controlKey: string,
+  issue: ControlIssue,
+) {
+  const nodeIssues = controlIssues.get(nodeId) ?? {};
+  const issues = nodeIssues[controlKey] ?? [];
+  nodeIssues[controlKey] = [...issues, issue];
+  controlIssues.set(nodeId, nodeIssues);
+}
diff --git a/apps/web/src/modules/evaluation/graph/editor/validation/rules/__tests__/helpers.ts b/apps/web/src/modules/evaluation/graph/editor/validation/rules/__tests__/helpers.ts
new file mode 100644
index 00000000..43d73c2e
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/validation/rules/__tests__/helpers.ts
@@ -0,0 +1,31 @@
+import type {
+  ConnProps,
+  NodeProps,
+  Schemes,
+} from "@/modules/evaluation/graph/editor/types";
+import type { ValidationContext } from "@/modules/evaluation/graph/editor/validation/types";
+import { ValidationGraph } from "@/modules/evaluation/graph/editor/validation/validationGraph";
+import { NodeEditor } from "rete";
+
+export function makeContext(
+  nodes: NodeProps[],
+  connections: ConnProps[] = [],
+): ValidationContext {
+  const editor = {
+    getNodes: () => nodes,
+    getConnections: () => connections,
+  };
+
+  const graph = new ValidationGraph(editor as unknown as NodeEditor<Schemes>);
+
+  return {
+    graph,
+    nodeIssues: new Map(),
+    controlIssues: new Map(),
+    graphIssues: [],
+  };
+}
+
+export function conn(source: string, target: string): ConnProps {
+  return { id: `${source}->${target}`, source, target } as unknown as ConnProps;
+}
diff --git a/apps/web/src/modules/evaluation/graph/editor/validation/rules/__tests__/validateActions.test.ts b/apps/web/src/modules/evaluation/graph/editor/validation/rules/__tests__/validateActions.test.ts
new file mode 100644
index 00000000..8eae30f9
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/validation/rules/__tests__/validateActions.test.ts
@@ -0,0 +1,49 @@
+import { AlertNode } from "@/modules/evaluation/graph/editor/nodes/action/alert";
+import { WarningNode } from "@/modules/evaluation/graph/editor/nodes/action/warning";
+import { LimitNode } from "@/modules/evaluation/graph/editor/nodes/limit/limit";
+import { AndNode } from "@/modules/evaluation/graph/editor/nodes/logical/and";
+import { ResultNode } from "@/modules/evaluation/graph/editor/nodes/result/result";
+import { findActionsWithInvalidSource } from "@/modules/evaluation/graph/editor/validation/rules/validateActions";
+import { describe, expect, it } from "vitest";
+import { conn, makeContext } from "./helpers";
+
+describe("findActionsWithInvalidSource", () => {
+  it("reports no issues when there are no action nodes", () => {
+    const ctx = makeContext([new LimitNode(), new ResultNode()]);
+    findActionsWithInvalidSource(ctx);
+    expect(ctx.nodeIssues.size).toBe(0);
+  });
+
+  it("reports no issues for an action with no incoming connections", () => {
+    const action = new WarningNode();
+    const ctx = makeContext([action]);
+    findActionsWithInvalidSource(ctx);
+    expect(ctx.nodeIssues.size).toBe(0);
+  });
+
+  it("reports no issues when an action is sourced from a LimitNode", () => {
+    const limit = new LimitNode();
+    const action = new WarningNode();
+    const ctx = makeContext([limit, action], [conn(limit.id, action.id)]);
+    findActionsWithInvalidSource(ctx);
+    expect(ctx.nodeIssues.size).toBe(0);
+  });
+
+  it("reports no issues when an action is sourced from the ResultNode", () => {
+    const result = new ResultNode();
+    const action = new AlertNode();
+    const ctx = makeContext([result, action], [conn(result.id, action.id)]);
+    findActionsWithInvalidSource(ctx);
+    expect(ctx.nodeIssues.size).toBe(0);
+  });
+
+  it("reports an error when an action is sourced from a logical node", () => {
+    const and = new AndNode();
+    const action = new WarningNode();
+    const ctx = makeContext([and, action], [conn(and.id, action.id)]);
+    findActionsWithInvalidSource(ctx);
+    const issues = ctx.nodeIssues.get(action.id) ?? [];
+    expect(issues).toHaveLength(1);
+    expect(issues.at(0)?.level).toBe("error");
+  });
+});
diff --git a/apps/web/src/modules/evaluation/graph/editor/validation/rules/__tests__/validateGlobal.test.ts b/apps/web/src/modules/evaluation/graph/editor/validation/rules/__tests__/validateGlobal.test.ts
new file mode 100644
index 00000000..319e8ae4
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/validation/rules/__tests__/validateGlobal.test.ts
@@ -0,0 +1,92 @@
+import { LimitNode } from "@/modules/evaluation/graph/editor/nodes/limit/limit";
+import { CountNode } from "@/modules/evaluation/graph/editor/nodes/limitItem/count";
+import { AndNode } from "@/modules/evaluation/graph/editor/nodes/logical/and";
+import { ResultNode } from "@/modules/evaluation/graph/editor/nodes/result/result";
+import {
+  findNodesOutsideResultIsland,
+  findBranchesNotLeadingToResult,
+} from "@/modules/evaluation/graph/editor/validation/rules/validateGlobal";
+import { describe, expect, it } from "vitest";
+import { conn, makeContext } from "./helpers";
+
+describe("findNodesOutsideResultIsland", () => {
+  it("reports no issues for an empty graph", () => {
+    const ctx = makeContext([]);
+    findNodesOutsideResultIsland(ctx);
+    expect(ctx.nodeIssues.size).toBe(0);
+  });
+
+  it("reports no issues when the only node is the ResultNode", () => {
+    const result = new ResultNode();
+    const ctx = makeContext([result]);
+    findNodesOutsideResultIsland(ctx);
+    expect(ctx.nodeIssues.size).toBe(0);
+  });
+
+  it("reports no issues when a LimitNode is connected to the ResultNode", () => {
+    const limit = new LimitNode();
+    const result = new ResultNode();
+    const ctx = makeContext([limit, result], [conn(limit.id, result.id)]);
+    findNodesOutsideResultIsland(ctx);
+    expect(ctx.nodeIssues.size).toBe(0);
+  });
+
+  it("reports an error for a node isolated from any ResultNode island", () => {
+    const limit = new LimitNode();
+    const result = new ResultNode();
+    const ctx = makeContext([limit, result]);
+    findNodesOutsideResultIsland(ctx);
+    const issues = ctx.nodeIssues.get(limit.id) ?? [];
+    expect(issues).toHaveLength(1);
+    expect(issues.at(0)?.level).toBe("error");
+    expect(ctx.nodeIssues.get(result.id)).toBeUndefined();
+  });
+
+  it("excludes LimitItem nodes from the disconnected-node check", () => {
+    const count = new CountNode();
+    const ctx = makeContext([count]);
+    findNodesOutsideResultIsland(ctx);
+    expect(ctx.nodeIssues.size).toBe(0);
+  });
+});
+
+describe("findBranchesNotLeadingToResult", () => {
+  it("reports no issues when a branching node has only one graph output", () => {
+    const limit = new LimitNode();
+    const result = new ResultNode();
+    const ctx = makeContext([limit, result], [conn(limit.id, result.id)]);
+    findBranchesNotLeadingToResult(ctx);
+    expect(ctx.nodeIssues.size).toBe(0);
+  });
+
+  it("reports no issues when every branch from a branching node leads to a ResultNode", () => {
+    const limit = new LimitNode();
+    const and = new AndNode();
+    const result = new ResultNode();
+    const ctx = makeContext(
+      [limit, and, result],
+      [
+        conn(limit.id, result.id),
+        conn(limit.id, and.id),
+        conn(and.id, result.id),
+      ],
+    );
+    findBranchesNotLeadingToResult(ctx);
+    expect(ctx.nodeIssues.size).toBe(0);
+  });
+
+  it("reports an error on a branch target that does not lead to a ResultNode", () => {
+    const limit = new LimitNode();
+    const and = new AndNode();
+    const result = new ResultNode();
+    const ctx = makeContext(
+      [limit, and, result],
+      [conn(limit.id, result.id), conn(limit.id, and.id)],
+    );
+    findBranchesNotLeadingToResult(ctx);
+    const issues = ctx.nodeIssues.get(and.id) ?? [];
+    expect(issues).toHaveLength(1);
+    expect(issues.at(0)?.level).toBe("error");
+    expect(ctx.nodeIssues.get(result.id)).toBeUndefined();
+  });
+});
diff --git a/apps/web/src/modules/evaluation/graph/editor/validation/rules/__tests__/validateLimitItems.test.ts b/apps/web/src/modules/evaluation/graph/editor/validation/rules/__tests__/validateLimitItems.test.ts
new file mode 100644
index 00000000..15c6d80b
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/validation/rules/__tests__/validateLimitItems.test.ts
@@ -0,0 +1,71 @@
+import { LimitNode } from "@/modules/evaluation/graph/editor/nodes/limit/limit";
+import { CountNode } from "@/modules/evaluation/graph/editor/nodes/limitItem/count";
+import {
+  findCrossScopeConnections,
+  findOrphanLimitItems,
+} from "@/modules/evaluation/graph/editor/validation/rules/validateLimitItems";
+import { describe, expect, it } from "vitest";
+import { conn, makeContext } from "./helpers";
+
+describe("findOrphanLimitItems", () => {
+  it("reports an error for a root-level LimitItem with no parent", () => {
+    const count = new CountNode();
+    const ctx = makeContext([count]);
+    findOrphanLimitItems(ctx);
+    const issues = ctx.nodeIssues.get(count.id) ?? [];
+    expect(issues).toHaveLength(1);
+    expect(issues.at(0)?.level).toBe("error");
+  });
+
+  it("reports no issues for a LimitItem nested inside a LimitNode", () => {
+    const limit = new LimitNode();
+    const count = new CountNode();
+    count.parent = limit.id;
+    const ctx = makeContext([limit, count]);
+    findOrphanLimitItems(ctx);
+    expect(ctx.nodeIssues.size).toBe(0);
+  });
+
+  it("ignores non-LimitItem nodes without a parent", () => {
+    const limit = new LimitNode();
+    const ctx = makeContext([limit]);
+    findOrphanLimitItems(ctx);
+    expect(ctx.nodeIssues.size).toBe(0);
+  });
+});
+
+describe("findCrossScopeConnections", () => {
+  it("reports no issues for a connection between two root-level nodes", () => {
+    const a = new CountNode();
+    const b = new CountNode();
+    const ctx = makeContext([a, b], [conn(a.id, b.id)]);
+    findCrossScopeConnections(ctx);
+    expect(ctx.nodeIssues.size).toBe(0);
+  });
+
+  it("reports no issues for a connection between nodes with the same parent", () => {
+    const limit = new LimitNode();
+    const a = new CountNode();
+    const b = new CountNode();
+    a.parent = limit.id;
+    b.parent = limit.id;
+    const ctx = makeContext([limit, a, b], [conn(a.id, b.id)]);
+    findCrossScopeConnections(ctx);
+    expect(ctx.nodeIssues.size).toBe(0);
+  });
+
+  it("reports an error on the target when connected nodes have different parents", () => {
+    const limitA = new LimitNode();
+    const limitB = new LimitNode();
+    const a = new CountNode();
+    const b = new CountNode();
+    a.parent = limitA.id;
+    b.parent = limitB.id;
+    const ctx = makeContext([limitA, limitB, a, b], [conn(a.id, b.id)]);
+    findCrossScopeConnections(ctx);
+    const issues = ctx.nodeIssues.get(b.id) ?? [];
+    expect(issues).toHaveLength(1);
+    expect(issues.at(0)?.level).toBe("error");
+    expect(ctx.nodeIssues.get(a.id)).toBeUndefined();
+  });
+});
diff --git a/apps/web/src/modules/evaluation/graph/editor/validation/rules/__tests__/validateLimits.test.ts b/apps/web/src/modules/evaluation/graph/editor/validation/rules/__tests__/validateLimits.test.ts
new file mode 100644
index 00000000..1a9a51d3
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/validation/rules/__tests__/validateLimits.test.ts
@@ -0,0 +1,100 @@
+import { LimitNode } from "@/modules/evaluation/graph/editor/nodes/limit/limit";
+import { CountNode } from "@/modules/evaluation/graph/editor/nodes/limitItem/count";
+import {
+  findEmptyLimits,
+  findLimitsWithMissingRequiredInputs,
+  findLimitsWithMultipleIslands,
+} from "@/modules/evaluation/graph/editor/validation/rules/validateLimits";
+import { describe, expect, it } from "vitest";
+import { conn, makeContext } from "./helpers";
+
+describe("findEmptyLimits", () => {
+  it("warns when a LimitNode has no children", () => {
+    const limit = new LimitNode();
+    const ctx = makeContext([limit]);
+    findEmptyLimits(ctx);
+    const issues = ctx.nodeIssues.get(limit.id) ?? [];
+    expect(issues).toHaveLength(1);
+    expect(issues.at(0)?.level).toBe("warning");
+  });
+
+  it("reports no issues when a LimitNode has at least one child", () => {
+    const limit = new LimitNode();
+    const child = new CountNode();
+    child.parent = limit.id;
+    const ctx = makeContext([limit, child]);
+    findEmptyLimits(ctx);
+    expect(ctx.nodeIssues.size).toBe(0);
+  });
+});
+
+describe("findLimitsWithMultipleIslands", () => {
+  it("reports no issues for a LimitNode with a single child", () => {
+    const limit = new LimitNode();
+    const child = new CountNode();
+    child.parent = limit.id;
+    const ctx = makeContext([limit, child]);
+    findLimitsWithMultipleIslands(ctx);
+    expect(ctx.nodeIssues.size).toBe(0);
+  });
+
+  it("reports no issues when all children are connected into one component", () => {
+    const limit = new LimitNode();
+    const a = new CountNode();
+    const b = new CountNode();
+    a.parent = limit.id;
+    b.parent = limit.id;
+    const ctx = makeContext([limit, a, b], [conn(a.id, b.id)]);
+    findLimitsWithMultipleIslands(ctx);
+    expect(ctx.nodeIssues.size).toBe(0);
+  });
+
+  it("reports an error when children form disconnected islands", () => {
+    const limit = new LimitNode();
+    const a = new CountNode();
+    const b = new CountNode();
+    a.parent = limit.id;
+    b.parent = limit.id;
+    const ctx = makeContext([limit, a, b]);
+    findLimitsWithMultipleIslands(ctx);
+    const issues = ctx.nodeIssues.get(limit.id) ?? [];
+    expect(issues).toHaveLength(1);
+    expect(issues.at(0)?.level).toBe("error");
+  });
+});
+
+describe("findLimitsWithMissingRequiredInputs", () => {
+  it("reports errors on both controls when name and label are absent", () => {
+    const limit = new LimitNode();
+    const ctx = makeContext([limit]);
+    findLimitsWithMissingRequiredInputs(ctx);
+    const issues = ctx.controlIssues.get(limit.id);
+    expect(issues?.name).toHaveLength(1);
+    expect(issues?.label).toHaveLength(1);
+  });
+
+  it("reports an error only on the name control when the label is valid", () => {
+    const limit = new LimitNode({ label: 1 });
+    const ctx = makeContext([limit]);
+    findLimitsWithMissingRequiredInputs(ctx);
+    const issues = ctx.controlIssues.get(limit.id);
+    expect(issues?.name).toHaveLength(1);
+    expect(issues?.label).toBeUndefined();
+  });
+
+  it("reports an error only on the label control when the name is valid", () => {
+    const limit = new LimitNode({ name: "test" });
+    const ctx = makeContext([limit]);
+    findLimitsWithMissingRequiredInputs(ctx);
+    const issues = ctx.controlIssues.get(limit.id);
+    expect(issues?.name).toBeUndefined();
+    expect(issues?.label).toHaveLength(1);
+  });
+
+  it("reports no issues when both name and label are valid", () => {
+    const limit = new LimitNode({ name: "test", label: 1 });
+    const ctx = makeContext([limit]);
+    findLimitsWithMissingRequiredInputs(ctx);
+    expect(ctx.controlIssues.size).toBe(0);
+  });
+});
diff --git a/apps/web/src/modules/evaluation/graph/editor/validation/rules/__tests__/validateLogical.test.ts b/apps/web/src/modules/evaluation/graph/editor/validation/rules/__tests__/validateLogical.test.ts
new file mode 100644
index 00000000..ab274e7d
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/validation/rules/__tests__/validateLogical.test.ts
@@ -0,0 +1,46 @@
+import { LimitNode } from "@/modules/evaluation/graph/editor/nodes/limit/limit";
+import { AndNode } from "@/modules/evaluation/graph/editor/nodes/logical/and";
+import { OrNode } from "@/modules/evaluation/graph/editor/nodes/logical/or";
+import { findUselessLogicalNodes } from "@/modules/evaluation/graph/editor/validation/rules/validateLogical";
+import { describe, expect, it } from "vitest";
+import { conn, makeContext } from "./helpers";
+
+describe("findUselessLogicalNodes", () => {
+  it("reports an error for a logical node with zero inputs", () => {
+    const and = new AndNode();
+    const ctx = makeContext([and]);
+    findUselessLogicalNodes(ctx);
+    const issues = ctx.nodeIssues.get(and.id) ?? [];
+    expect(issues).toHaveLength(1);
+    expect(issues.at(0)?.level).toBe("error");
+  });
+
+  it("warns when a logical node has exactly one input", () => {
+    const limit = new LimitNode();
+    const and = new AndNode();
+    const ctx = makeContext([limit, and], [conn(limit.id, and.id)]);
+    findUselessLogicalNodes(ctx);
+    const issues = ctx.nodeIssues.get(and.id) ?? [];
+    expect(issues).toHaveLength(1);
+    expect(issues.at(0)?.level).toBe("warning");
+  });
+
+  it("reports no warning for a logical node with two or more inputs", () => {
+    const limitA = new LimitNode();
+    const limitB = new LimitNode();
+    const or = new OrNode();
+    const ctx = makeContext(
+      [limitA, limitB, or],
+      [conn(limitA.id, or.id), conn(limitB.id, or.id)],
+    );
+    findUselessLogicalNodes(ctx);
+    expect(ctx.nodeIssues.size).toBe(0);
+  });
+
+  it("ignores non-logical nodes", () => {
+    const limit = new LimitNode();
+    const ctx = makeContext([limit]);
+    findUselessLogicalNodes(ctx);
+    expect(ctx.nodeIssues.size).toBe(0);
+  });
+});
diff --git a/apps/web/src/modules/evaluation/graph/editor/validation/rules/__tests__/validateResult.test.ts b/apps/web/src/modules/evaluation/graph/editor/validation/rules/__tests__/validateResult.test.ts
new file mode 100644
index 00000000..06112255
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/validation/rules/__tests__/validateResult.test.ts
@@ -0,0 +1,35 @@
+import { LimitNode } from "@/modules/evaluation/graph/editor/nodes/limit/limit";
+import { ResultNode } from "@/modules/evaluation/graph/editor/nodes/result/result";
+import { findInvalidResultNodeCount } from "@/modules/evaluation/graph/editor/validation/rules/validateResult";
+import { describe, expect, it } from "vitest";
+import { makeContext } from "./helpers";
+
+describe("findInvalidResultNodeCount", () => {
+  it("reports a graph-level error when the graph has no result nodes", () => {
+    const ctx = makeContext([new LimitNode()]);
+    findInvalidResultNodeCount(ctx);
+    expect(ctx.nodeIssues.size).toBe(0);
+    expect(ctx.graphIssues).toHaveLength(1);
+    expect(ctx.graphIssues.at(0)?.level).toBe("error");
+  });
+
+  it("reports no issues when the graph has exactly one result node", () => {
+    const result = new ResultNode();
+    const ctx = makeContext([result]);
+    findInvalidResultNodeCount(ctx);
+    expect(ctx.nodeIssues.size).toBe(0);
+  });
+
+  it("reports an error on every result node when there are multiple", () => {
+    const a = new ResultNode();
+    const b = new ResultNode();
+    const ctx = makeContext([a, b]);
+    findInvalidResultNodeCount(ctx);
+    const issuesA = ctx.nodeIssues.get(a.id) ?? [];
+    const issuesB = ctx.nodeIssues.get(b.id) ?? [];
+    expect(issuesA).toHaveLength(1);
+    expect(issuesA.at(0)?.level).toBe("error");
+    expect(issuesB).toHaveLength(1);
+    expect(issuesB.at(0)?.level).toBe("error");
+  });
+});
diff --git a/apps/web/src/modules/evaluation/graph/editor/validation/rules/validateActions.ts b/apps/web/src/modules/evaluation/graph/editor/validation/rules/validateActions.ts
new file mode 100644
index 00000000..b646ca40
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/validation/rules/validateActions.ts
@@ -0,0 +1,39 @@
+import { pushIssue } from "@/modules/evaluation/graph/editor/validation/issues";
+import {
+  isActionNode,
+  isLimitNode,
+  isResultNode,
+} from "@/modules/evaluation/graph/editor/utils/guards";
+import {
+  type ValidationContext,
+} from "@/modules/evaluation/graph/editor/validation/types";
+
+/**
+ * Finds action nodes connected from unsupported sources.
+ *
+ * Action nodes can only be connected directly from a Limit node or from the
+ * Result node.
+ */
+export function findActionsWithInvalidSource(context: ValidationContext) {
+  const { graph, nodeIssues } = context;
+  for (const node of graph.nodes) {
+    if (!isActionNode(node)) continue;
+    const incomingConnections = graph.getIncoming(node.id);
+
+    for (const connection of incomingConnections) {
+      const sourceNode = graph.getNode(connection.source);
+      if (!sourceNode) continue;
+      if (isLimitNode(sourceNode) || isResultNode(sourceNode)) continue;
+
+      pushIssue(nodeIssues, node.id, {
+        level: "error",
+        message: "Invalid action placement",
+        description: [
+          "The previous node does not support an action.",
+          "Actions can only be connected directly to a Check node or to the Result node.",
+        ],
+      });
+      break;
+    }
+  }
+}
diff --git a/apps/web/src/modules/evaluation/graph/editor/validation/rules/validateGlobal.ts b/apps/web/src/modules/evaluation/graph/editor/validation/rules/validateGlobal.ts
new file mode 100644
index 00000000..f0da0391
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/validation/rules/validateGlobal.ts
@@ -0,0 +1,165 @@
+import { pushIssue } from "@/modules/evaluation/graph/editor/validation/issues";
+import type { NodeProps } from "@/modules/evaluation/graph/editor/types";
+import { findConnectedComponents } from "@/modules/evaluation/graph/editor/utils/graph";
+import {
+  isActionNode,
+  isLimitItemNode,
+  isLimitNode,
+  isLogicalOperator,
+  isResultNode,
+} from "@/modules/evaluation/graph/editor/utils/guards";
+import {
+  type ValidationContext,
+} from "@/modules/evaluation/graph/editor/validation/types";
+
+/**
+ * Finds graph nodes that are not connected to any Result node island.
+ *
+ * Every graph node except LimitItem nodes must belong to a connected component
+ * that contains at least one Result node.
+ *
+ * LimitItem nodes are ignored because they are scoped inside Limit nodes and
+ * validated separately as children of their parent Limit.
+ */
+export function findNodesOutsideResultIsland(context: ValidationContext) {
+  const { graph, nodeIssues } = context;
+
+  const graphNodes = graph.nodes.filter((node) => !isLimitItemNode(node));
+
+  if (graphNodes.length === 0) return;
+
+  const nodeIdsWithResult = getResultIslandNodeIds(context);
+
+  for (const node of graphNodes) {
+    if (nodeIdsWithResult.has(node.id)) continue;
+
+    pushIssue(nodeIssues, node.id, {
+      level: "error",
+      message: "Disconnected node",
+      description: [
+        "This node is not connected to a Result node.",
+        "All graph nodes except Check items must be connected to an island that contains a Result node.",
+      ],
+    });
+  }
+}
+
+/**
+ * Finds graph branches that do not lead to a Result node.
+ *
+ * This only applies inside islands that contain a Result node. Islands without
+ * a Result node are ignored here because they are already reported by the
+ * disconnected-node validation.
+ *
+ * When a Limit or logical node has multiple non-action outputs, every branch
+ * must eventually lead to a Result node. Branch targets that do not lead to a
+ * Result node are marked as invalid.
+ */
+export function findBranchesNotLeadingToResult(context: ValidationContext) {
+  const { graph, nodeIssues } = context;
+
+  const resultIslandNodeIds = getResultIslandNodeIds(context);
+  const reportedNodeIds = new Set<string>();
+
+  for (const node of graph.nodes) {
+    if (!resultIslandNodeIds.has(node.id)) continue;
+    if (!canProduceGraphOutput(node)) continue;
+
+    const graphOutputConnections = getGraphOutputConnections(context, node.id);
+
+    if (graphOutputConnections.length <= 1) continue;
+
+    for (const connection of graphOutputConnections) {
+      if (reportedNodeIds.has(connection.target)) continue;
+      if (doesPathLeadToResult(context, connection.target)) continue;
+
+      reportedNodeIds.add(connection.target);
+
+      pushIssue(nodeIssues, connection.target, {
+        level: "error",
+        message: "Branch does not lead to Result",
+        description: [
+          "This branch is created from a node with multiple graph outputs.",
+          "Every branch in a Result island must eventually flow into a Result node.",
+        ],
+      });
+    }
+  }
+}
+
+function canProduceGraphOutput(node: NodeProps) {
+  return isLimitNode(node) || isLogicalOperator(node);
+}
+
+function getGraphOutputConnections(context: ValidationContext, nodeId: string) {
+  const { graph } = context;
+
+  return graph.getOutgoing(nodeId).filter((connection) => {
+    const targetNode = graph.getNode(connection.target);
+
+    if (!targetNode) return false;
+    if (isActionNode(targetNode)) return false;
+    if (isLimitItemNode(targetNode)) return false;
+
+    return true;
+  });
+}
+
+function getResultIslandNodeIds(context: ValidationContext) {
+  const { graph } = context;
+
+  const graphNodes = graph.nodes.filter((node) => !isLimitItemNode(node));
+  const nodeIds = graphNodes.map((node) => node.id);
+  const islands = findConnectedComponents(nodeIds, graph.connections);
+
+  const resultIslandNodeIds = new Set<string>();
+
+  for (const island of islands) {
+    const islandHasResult = island.some((nodeId) => {
+      const node = graph.getNode(nodeId);
+      return node && isResultNode(node);
+    });
+
+    if (!islandHasResult) continue;
+
+    for (const nodeId of island) {
+      resultIslandNodeIds.add(nodeId);
+    }
+  }
+
+  return resultIslandNodeIds;
+}
+
+function doesPathLeadToResult(context: ValidationContext, startNodeId: string) {
+  const { graph } = context;
+
+  const visited = new Set<string>();
+  const stack = [startNodeId];
+
+  while (stack.length > 0) {
+    const currentNodeId = stack.pop();
+
+    if (!currentNodeId) continue;
+    if (visited.has(currentNodeId)) continue;
+
+    visited.add(currentNodeId);
+
+    const currentNode = graph.getNode(currentNodeId);
+
+    if (!currentNode) continue;
+    if (isResultNode(currentNode)) return true;
+
+    const outgoingConnections = getGraphOutputConnections(
+      context,
+      currentNodeId,
+    );
+
+    for (const connection of outgoingConnections) {
+      if (visited.has(connection.target)) continue;
+
+      stack.push(connection.target);
+    }
+  }
+
+  return false;
+}
diff --git a/apps/web/src/modules/evaluation/graph/editor/validation/rules/validateLimitItems.ts b/apps/web/src/modules/evaluation/graph/editor/validation/rules/validateLimitItems.ts
new file mode 100644
index 00000000..9803645c
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/validation/rules/validateLimitItems.ts
@@ -0,0 +1,53 @@
+import { pushIssue } from "@/modules/evaluation/graph/editor/validation/issues";
+import { isLimitItemNode } from "@/modules/evaluation/graph/editor/utils/guards";
+import {
+  type ValidationContext,
+} from "@/modules/evaluation/graph/editor/validation/types";
+
+/**
+ * Finds LimitItem nodes that are placed on the root level.
+ *
+ * LimitItems must always be children of a Limit node.
+ */
+export function findOrphanLimitItems(context: ValidationContext) {
+  const { graph, nodeIssues } = context;
+
+  for (const node of graph.nodes) {
+    if (!isLimitItemNode(node)) continue;
+    if (node.parent) continue;
+
+    pushIssue(nodeIssues, node.id, {
+      level: "error",
+      message: "Orphan Check item",
+      description: [
+        "Check item nodes must be placed inside a check node",
+        "Long press to enter the scope mode and move this node inside a check node.",
+      ],
+    });
+  }
+}
+
+/**
+ * Finds connections that cross parent scope boundaries.
+ *
+ * Connected nodes must either share the same parent or both be root-level nodes.
+ */
+export function findCrossScopeConnections(context: ValidationContext) {
+  const { graph, nodeIssues } = context;
+
+  for (const connection of graph.connections) {
+    const sourceNode = graph.getNode(connection.source);
+    const targetNode = graph.getNode(connection.target);
+
+    if (!sourceNode || !targetNode) continue;
+    if (graph.haveSameScope(sourceNode, targetNode)) continue;
+
+    pushIssue(nodeIssues, targetNode.id, {
+      level: "error",
+      message: "Out of bounds connection",
+      description: [
+        "All connected Check items must be placed inside the same parent check node.",
+      ],
+    });
+  }
+}
diff --git a/apps/web/src/modules/evaluation/graph/editor/validation/rules/validateLimits.ts b/apps/web/src/modules/evaluation/graph/editor/validation/rules/validateLimits.ts
new file mode 100644
index 00000000..c5d8f173
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/validation/rules/validateLimits.ts
@@ -0,0 +1,84 @@
+import { pushIssue, pushControlIssue } from "@/modules/evaluation/graph/editor/validation/issues";
+import { countConnectedComponents } from "@/modules/evaluation/graph/editor/utils/graph";
+import { isLimitNode } from "@/modules/evaluation/graph/editor/utils/guards";
+import {
+  type ValidationContext,
+} from "@/modules/evaluation/graph/editor/validation/types";
+
+/**
+ * Finds Limit nodes that do not contain any child nodes.
+ *
+ * Empty Limit nodes have no rules to evaluate and therefore have no effect.
+ */
+export function findEmptyLimits(context: ValidationContext) {
+  const { graph, nodeIssues } = context;
+
+  for (const node of graph.nodes) {
+    if (!isLimitNode(node)) continue;
+    if (graph.getChildren(node.id).length > 0) continue;
+
+    pushIssue(nodeIssues, node.id, {
+      level: "warning",
+      message: "Useless Check",
+      description: [
+        "A check node with no children has no effect and can be removed.",
+      ],
+    });
+  }
+}
+
+/**
+ * Finds Limit nodes whose children form more than one disconnected island.
+ *
+ * All nodes inside a Limit node must be connected into a single child graph.
+ */
+export function findLimitsWithMultipleIslands(context: ValidationContext) {
+  const { graph, nodeIssues } = context;
+
+  for (const limitNode of graph.nodes) {
+    if (!isLimitNode(limitNode)) continue;
+
+    const children = graph.getChildren(limitNode.id);
+    if (children.length <= 1) continue;
+
+    const islandCount = countConnectedComponents(children, graph.connections);
+    if (islandCount <= 1) continue;
+
+    pushIssue(nodeIssues, limitNode.id, {
+      level: "error",
+      message: "Disconnected children",
+      description: [
+        "All Check items inside a Check must form a single connected component.",
+        "Connect all child nodes together or split them into separate Check nodes.",
+      ],
+    });
+  }
+}
+
+/**
+ * Finds missing required inputs inside Limit nodes.
+ *
+ * These issues are attached to specific controls so the UI can highlight the
+ * invalid input without adding extra content to the node.
+ */
+export function findLimitsWithMissingRequiredInputs(
+  context: ValidationContext,
+) {
+  const { graph, controlIssues } = context;
+
+  for (const node of graph.nodes) {
+    if (!isLimitNode(node)) continue;
+
+    if (!node.controls.name.isValid()) {
+      pushControlIssue(controlIssues, node.id, "name", {
+        level: "error",
+      });
+    }
+
+    if (!node.controls.label.isValid()) {
+      pushControlIssue(controlIssues, node.id, "label", {
+        level: "error",
+      });
+    }
+  }
+}
diff --git a/apps/web/src/modules/evaluation/graph/editor/validation/rules/validateLogical.ts b/apps/web/src/modules/evaluation/graph/editor/validation/rules/validateLogical.ts
new file mode 100644
index 00000000..91ccb351
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/validation/rules/validateLogical.ts
@@ -0,0 +1,43 @@
+import { pushIssue } from "@/modules/evaluation/graph/editor/validation/issues";
+import { isLogicalOperator } from "@/modules/evaluation/graph/editor/utils/guards";
+import {
+  type ValidationContext,
+} from "@/modules/evaluation/graph/editor/validation/types";
+
+/**
+ * Finds logical nodes that cannot form a meaningful expression: zero inputs
+ * (unevaluable, reported as an error) or exactly one input (a no-op that does
+ * not change the result, reported as a warning).
+ */
+export function findUselessLogicalNodes(context: ValidationContext) {
+  const { graph, nodeIssues } = context;
+
+  for (const node of graph.nodes) {
+    if (!isLogicalOperator(node)) continue;
+
+    const inputCount = graph.getIncoming(node.id).length;
+
+    if (inputCount === 0) {
+      pushIssue(nodeIssues, node.id, {
+        level: "error",
+        message: "Operator has no inputs",
+        description: [
+          "A logical operator needs at least two inputs to combine.",
+          "Connect inputs to this operator or remove it.",
+        ],
+      });
+      continue;
+    }
+
+    if (inputCount !== 1) continue;
+
+    pushIssue(nodeIssues, node.id, {
+      level: "warning",
+      message: "Useless operator",
+      description: [
+        "Logical operators with only one input do not change the result and can be removed.",
+        "Either connect the input directly to the output and remove this node, or add more inputs to create a meaningful logical expression.",
+      ],
+    });
+  }
+}
diff --git a/apps/web/src/modules/evaluation/graph/editor/validation/rules/validateResult.ts b/apps/web/src/modules/evaluation/graph/editor/validation/rules/validateResult.ts
new file mode 100644
index 00000000..f30dc48f
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/validation/rules/validateResult.ts
@@ -0,0 +1,35 @@
+import { pushIssue } from "@/modules/evaluation/graph/editor/validation/issues";
+import { isResultNode } from "@/modules/evaluation/graph/editor/utils/guards";
+import {
+  type ValidationContext,
+} from "@/modules/evaluation/graph/editor/validation/types";
+
+/**
+ * Finds graphs that do not contain exactly one Result node.
+ *
+ * The Result node is the required terminal node of the graph and acts as the
+ * anchor for the main graph island.
+ */
+export function findInvalidResultNodeCount(context: ValidationContext) {
+  const { graph, nodeIssues, graphIssues } = context;
+  const resultNodes = graph.nodes.filter(isResultNode);
+
+  if (resultNodes.length === 1) return;
+
+  if (resultNodes.length === 0) {
+    graphIssues.push({
+      level: "error",
+      message: "Missing Result node",
+      description: ["The graph must contain exactly one Result node."],
+    });
+    return;
+  }
+
+  for (const node of resultNodes) {
+    pushIssue(nodeIssues, node.id, {
+      level: "error",
+      message: "Multiple Result nodes",
+      description: ["The graph can contain only one Result node."],
+    });
+  }
+}
diff --git a/apps/web/src/modules/evaluation/graph/editor/validation/types.ts b/apps/web/src/modules/evaluation/graph/editor/validation/types.ts
new file mode 100644
index 00000000..bd50ea18
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/validation/types.ts
@@ -0,0 +1,30 @@
+import type { ValidationGraph } from "./validationGraph";
+
+export type ValidationIssueLevel = "error" | "warning";
+
+export type ValidationIssue = {
+  message: string;
+  description?: string[];
+  level: ValidationIssueLevel;
+};
+
+export type ControlIssue = {
+  level: ValidationIssueLevel;
+};
+
+export type ControlIssues = Record<string, ControlIssue[]>;
+export type ControlIssuesByNode = Map<string, ControlIssues>;
+
+export type ValidationResult = {
+  valid: boolean;
+  nodeIssues: Map<string, ValidationIssue[]>;
+  controlIssues: ControlIssuesByNode;
+  graphIssues: ValidationIssue[];
+};
+
+export type ValidationContext = {
+  readonly graph: ValidationGraph;
+  readonly nodeIssues: Map<string, ValidationIssue[]>;
+  readonly controlIssues: ControlIssuesByNode;
+  readonly graphIssues: ValidationIssue[];
+};
diff --git a/apps/web/src/modules/evaluation/graph/editor/validation/validateGraph.ts b/apps/web/src/modules/evaluation/graph/editor/validation/validateGraph.ts
new file mode 100644
index 00000000..297a4506
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/validation/validateGraph.ts
@@ -0,0 +1,65 @@
+import type { Schemes } from "@/modules/evaluation/graph/editor/types";
+import type { NodeEditor } from "rete";
+import { findActionsWithInvalidSource } from "./rules/validateActions";
+import {
+  findNodesOutsideResultIsland,
+  findBranchesNotLeadingToResult,
+} from "./rules/validateGlobal";
+import {
+  findCrossScopeConnections,
+  findOrphanLimitItems,
+} from "./rules/validateLimitItems";
+import {
+  findEmptyLimits,
+  findLimitsWithMissingRequiredInputs,
+  findLimitsWithMultipleIslands,
+} from "./rules/validateLimits";
+import { findUselessLogicalNodes } from "./rules/validateLogical";
+import { findInvalidResultNodeCount } from "./rules/validateResult";
+import type { ControlIssues, ValidationIssue, ValidationResult } from "./types";
+import { ValidationGraph } from "./validationGraph";
+
+export function validateGraph(editor: NodeEditor<Schemes>): ValidationResult {
+  const graph = new ValidationGraph(editor);
+  const nodeIssues = new Map<string, ValidationIssue[]>();
+  const controlIssues = new Map<string, ControlIssues>();
+  const graphIssues: ValidationIssue[] = [];
+
+  const context = { graph, nodeIssues, controlIssues, graphIssues };
+
+  findEmptyLimits(context);
+  findLimitsWithMultipleIslands(context);
+
+  findOrphanLimitItems(context);
+  findCrossScopeConnections(context);
+  findLimitsWithMissingRequiredInputs(context);
+
+  findUselessLogicalNodes(context);
+
+  findActionsWithInvalidSource(context);
+
+  findInvalidResultNodeCount(context);
+
+  findNodesOutsideResultIsland(context);
+  findBranchesNotLeadingToResult(context);
+
+  const hasNodeErrors = Array.from(nodeIssues.values()).some((issues) =>
+    issues.some((issue) => issue.level === "error"),
+  );
+
+  const hasControlErrors = Array.from(controlIssues.values()).some(
+    (controlIssueMap) =>
+      Object.values(controlIssueMap).some((issues) =>
+        issues.some((issue) => issue.level === "error"),
+      ),
+  );
+
+  const hasGraphErrors = graphIssues.some((issue) => issue.level === "error");
+
+  return {
+    valid: !hasNodeErrors && !hasControlErrors && !hasGraphErrors,
+    nodeIssues,
+    controlIssues,
+    graphIssues,
+  };
+}
diff --git a/apps/web/src/modules/evaluation/graph/editor/validation/validationGraph.ts b/apps/web/src/modules/evaluation/graph/editor/validation/validationGraph.ts
new file mode 100644
index 00000000..3dc791c8
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/editor/validation/validationGraph.ts
@@ -0,0 +1,61 @@
+import type {
+  ConnProps,
+  NodeProps,
+  Schemes,
+} from "@/modules/evaluation/graph/editor/types";
+import type { NodeEditor } from "rete";
+
+export class ValidationGraph {
+  readonly nodes: NodeProps[];
+  readonly connections: ConnProps[];
+
+  private nodeById = new Map<string, NodeProps>();
+  private childrenByParent = new Map<string, NodeProps[]>();
+  private incomingByNode = new Map<string, ConnProps[]>();
+  private outgoingByNode = new Map<string, ConnProps[]>();
+
+  constructor(editor: NodeEditor<Schemes>) {
+    this.nodes = editor.getNodes();
+    this.connections = editor.getConnections();
+
+    for (const node of this.nodes) {
+      this.nodeById.set(node.id, node);
+
+      if (node.parent) {
+        const children = this.childrenByParent.get(node.parent) ?? [];
+        children.push(node);
+        this.childrenByParent.set(node.parent, children);
+      }
+    }
+
+    for (const connection of this.connections) {
+      const incoming = this.incomingByNode.get(connection.target) ?? [];
+      incoming.push(connection);
+      this.incomingByNode.set(connection.target, incoming);
+
+      const outgoing = this.outgoingByNode.get(connection.source) ?? [];
+      outgoing.push(connection);
+      this.outgoingByNode.set(connection.source, outgoing);
+    }
+  }
+
+  getNode(id: string) {
+    return this.nodeById.get(id);
+  }
+
+  getChildren(parentId: string) {
+    return this.childrenByParent.get(parentId) ?? [];
+  }
+
+  getIncoming(nodeId: string) {
+    return this.incomingByNode.get(nodeId) ?? [];
+  }
+
+  getOutgoing(nodeId: string) {
+    return this.outgoingByNode.get(nodeId) ?? [];
+  }
+
+  haveSameScope(a: NodeProps, b: NodeProps) {
+    return a.parent === b.parent;
+  }
+}
diff --git a/apps/web/src/modules/evaluation/graph/workspace/E2EEditorPage.tsx b/apps/web/src/modules/evaluation/graph/workspace/E2EEditorPage.tsx
new file mode 100644
index 00000000..8b756f3b
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/workspace/E2EEditorPage.tsx
@@ -0,0 +1,39 @@
+import { createEditor } from "@/modules/evaluation/graph/editor/setup/createEditor";
+import { focusContainer } from "@/modules/evaluation/graph/editor/setup/focusManager";
+import { installTestHook } from "@/modules/evaluation/graph/workspace/testHook";
+import { useCallback, useEffect, useRef } from "react";
+import { useRete } from "rete-react-plugin";
+
+/**
+ * Standalone editor host used only in E2E mode (VITE_E2E). It mounts the graph
+ * editor with no project data, backend calls, or auth, exposes the live editor
+ * on window.__editor through the test hook, and renders the canvas the Playwright
+ * specs drive. It is wired into the router only when VITE_E2E is set and is never
+ * reachable in dev or production builds.
+ */
+export const E2EEditorPage = () => {
+  const disposeHookRef = useRef<(() => void) | undefined>(undefined);
+
+  const create = useCallback((el: HTMLElement) => {
+    const instance = createEditor(el, () => {});
+    Promise.resolve(instance).then((result) => {
+      disposeHookRef.current = installTestHook({
+        editor: result.editor,
+        area: result.area,
+      });
+      // Single editor in E2E: focus it on mount so keyboard shortcuts work
+      // without first clicking the canvas (the specs press shortcuts directly).
+      focusContainer(el);
+    });
+    return instance;
+  }, []);
+
+  const [ref] = useRete(create);
+  useEffect(() => () => disposeHookRef.current?.(), []);
+
+  return (
+    <div className="h-screen w-screen">
+      <div ref={ref} className="h-full w-full" data-testid="editor-canvas" />
+    </div>
+  );
+};
diff --git a/apps/web/src/modules/evaluation/graph/workspace/testHook.ts b/apps/web/src/modules/evaluation/graph/workspace/testHook.ts
new file mode 100644
index 00000000..ffc8dd3c
--- /dev/null
+++ b/apps/web/src/modules/evaluation/graph/workspace/testHook.ts
@@ -0,0 +1,80 @@
+import {
+  BooleanConnection,
+  type BooleanOperator,
+} from "@/modules/evaluation/graph/editor/connections/booleanConnection";
+import { LimitItemConnection } from "@/modules/evaluation/graph/editor/connections/limitItemConnection";
+import type { AreaExtra } from "@/modules/evaluation/graph/editor/setup/createEditor";
+import type {
+  LimitItemProps,
+  BooleanNodeProps,
+  Schemes,
+} from "@/modules/evaluation/graph/editor/types";
+import type { EvalLimitItemOperatorEnum } from "@repo/schema";
+import type { NodeEditor } from "rete";
+import type { AreaPlugin } from "rete-area-plugin";
+
+export type TestHookHandle = {
+  editor: NodeEditor<Schemes>;
+  area: AreaPlugin<Schemes, AreaExtra>;
+  addBooleanConnection: (
+    sourceId: string,
+    targetId: string,
+    operator?: BooleanOperator,
+  ) => Promise<void>;
+  addLimitItemConnection: (
+    sourceId: string,
+    targetId: string,
+    operator: EvalLimitItemOperatorEnum,
+  ) => Promise<void>;
+};
+
+declare global {
+  interface Window {
+    __editor?: TestHookHandle;
+  }
+}
+
+/**
+ * Exposes the live editor + area on `window.__editor` so Playwright tests can
+ * make state-level assertions while still driving the UI through real gestures.
+ *
+ * Gated on the VITE_E2E env flag - set only by playwright.config.ts.
+ * Normal dev and production builds receive an undefined `__editor`.
+ */
+export function installTestHook(handle: {
+  editor: NodeEditor<Schemes>;
+  area: AreaPlugin<Schemes, AreaExtra>;
+}): (() => void) | undefined {
+  if (!import.meta.env.VITE_E2E) return;
+  const { editor } = handle;
+
+  const requireNode = (id: string) => {
+    const node = editor.getNode(id);
+    if (!node) throw new Error(`Test hook: node "${id}" not found.`);
+    return node;
+  };
+
+  const hook: TestHookHandle = {
+    ...handle,
+    addBooleanConnection: async (sourceId, targetId, operator = "TRUE") => {
+      const source = requireNode(sourceId) as BooleanNodeProps;
+      const target = requireNode(targetId) as BooleanNodeProps;
+      await editor.addConnection(
+        new BooleanConnection(source, "out", target, "in", operator),
+      );
+    },
+    addLimitItemConnection: async (sourceId, targetId, operator) => {
+      const source = requireNode(sourceId) as LimitItemProps;
+      const target = requireNode(targetId) as LimitItemProps;
+      await editor.addConnection(
+        new LimitItemConnection(source, "out", target, "in", operator),
+      );
+    },
+  };
+
+  window.__editor = hook;
+
+  return () => {
+    if (window.__editor === hook) delete window.__editor;
+  };
+}
diff --git a/apps/web/src/modules/evaluation/types/createLimitForm.schema.ts b/apps/web/src/modules/evaluation/types/createLimitForm.schema.ts
index c6e919b7..5475682a 100644
--- a/apps/web/src/modules/evaluation/types/createLimitForm.schema.ts
+++ b/apps/web/src/modules/evaluation/types/createLimitForm.schema.ts
@@ -34,7 +34,7 @@ export const createLimitFormSchema = z.object({
   targetParentLabelId: z.number().nullable(),
   limitItems: z
     .array(limitItemFormSchema)
-    .min(1, "At least one limit item is required"),
+    .min(1, "At least one check item is required"),
 });
 
 export type CreateLimitFormSchema = z.infer<typeof createLimitFormSchema>;
diff --git a/apps/web/src/modules/shadcn/ui/button-group.tsx b/apps/web/src/modules/shadcn/ui/button-group.tsx
new file mode 100644
index 00000000..4de3eeb3
--- /dev/null
+++ b/apps/web/src/modules/shadcn/ui/button-group.tsx
@@ -0,0 +1,87 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+import { Separator } from "@/modules/shadcn/ui/separator";
+
+const buttonGroupVariants = cva(
+  "flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
+  {
+    variants: {
+      orientation: {
+        horizontal:
+          "*:data-slot:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-md! [&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0",
+        vertical:
+          "flex-col *:data-slot:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-md! [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0",
+      },
+    },
+    defaultVariants: {
+      orientation: "horizontal",
+    },
+  },
+);
+
+function ButtonGroup({
+  className,
+  orientation,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="button-group"
+      data-orientation={orientation}
+      className={cn(buttonGroupVariants({ orientation }), className)}
+      {...props}
+    />
+  );
+}
+
+function ButtonGroupText({
+  className,
+  render,
+  ...props
+}: useRender.ComponentProps<"div">) {
+  return useRender({
+    defaultTagName: "div",
+    props: mergeProps<"div">(
+      {
+        className: cn(
+          "flex items-center gap-2 rounded-md border bg-muted px-2.5 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+          className,
+        ),
+      },
+      props,
+    ),
+    render,
+    state: {
+      slot: "button-group-text",
+    },
+  });
+}
+
+function ButtonGroupSeparator({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="button-group-separator"
+      orientation={orientation}
+      className={cn(
+        "relative self-stretch bg-input data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  ButtonGroup,
+  ButtonGroupSeparator,
+  ButtonGroupText,
+  buttonGroupVariants,
+};
diff --git a/apps/web/src/modules/shadcn/ui/toggle-group.tsx b/apps/web/src/modules/shadcn/ui/toggle-group.tsx
new file mode 100644
index 00000000..25dfd290
--- /dev/null
+++ b/apps/web/src/modules/shadcn/ui/toggle-group.tsx
@@ -0,0 +1,89 @@
+"use client";
+
+import { Toggle as TogglePrimitive } from "@base-ui/react/toggle";
+import { ToggleGroup as ToggleGroupPrimitive } from "@base-ui/react/toggle-group";
+import { type VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+import { toggleVariants } from "@/modules/shadcn/ui/toggle";
+
+const ToggleGroupContext = React.createContext<
+  VariantProps<typeof toggleVariants> & {
+    spacing?: number;
+    orientation?: "horizontal" | "vertical";
+  }
+>({
+  size: "default",
+  variant: "default",
+  spacing: 0,
+  orientation: "horizontal",
+});
+
+function ToggleGroup({
+  className,
+  variant,
+  size,
+  spacing = 0,
+  orientation = "horizontal",
+  children,
+  ...props
+}: ToggleGroupPrimitive.Props &
+  VariantProps<typeof toggleVariants> & {
+    spacing?: number;
+    orientation?: "horizontal" | "vertical";
+  }) {
+  return (
+    <ToggleGroupPrimitive
+      data-slot="toggle-group"
+      data-variant={variant}
+      data-size={size}
+      data-spacing={spacing}
+      data-orientation={orientation}
+      style={{ "--gap": spacing } as React.CSSProperties}
+      className={cn(
+        "group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-md data-[spacing=0]:data-[variant=outline]:shadow-xs data-vertical:flex-col data-vertical:items-stretch",
+        className,
+      )}
+      {...props}
+    >
+      <ToggleGroupContext.Provider
+        value={{ variant, size, spacing, orientation }}
+      >
+        {children}
+      </ToggleGroupContext.Provider>
+    </ToggleGroupPrimitive>
+  );
+}
+
+function ToggleGroupItem({
+  className,
+  children,
+  variant = "default",
+  size = "default",
+  ...props
+}: TogglePrimitive.Props & VariantProps<typeof toggleVariants>) {
+  const context = React.useContext(ToggleGroupContext);
+
+  return (
+    <TogglePrimitive
+      data-slot="toggle-group-item"
+      data-variant={context.variant || variant}
+      data-size={context.size || size}
+      data-spacing={context.spacing}
+      className={cn(
+        "shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 group-data-[spacing=0]/toggle-group:shadow-none focus:z-10 focus-visible:z-10 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-end]:pr-1.5 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-start]:pl-1.5 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-md group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-md group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-md group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-md data-[state=on]:bg-muted group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t",
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size,
+        }),
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </TogglePrimitive>
+  );
+}
+
+export { ToggleGroup, ToggleGroupItem };
diff --git a/apps/web/src/modules/shadcn/ui/toggle.tsx b/apps/web/src/modules/shadcn/ui/toggle.tsx
new file mode 100644
index 00000000..4a963ba0
--- /dev/null
+++ b/apps/web/src/modules/shadcn/ui/toggle.tsx
@@ -0,0 +1,43 @@
+import { Toggle as TogglePrimitive } from "@base-ui/react/toggle";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const toggleVariants = cva(
+  "group/toggle inline-flex items-center justify-center gap-1 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-white hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-white dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline: "border border-input bg-zinc-50 shadow-xs hover:bg-white",
+      },
+      size: {
+        default:
+          "h-9 min-w-9 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        sm: "h-8 min-w-8 px-2.5 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5",
+        lg: "h-10 min-w-10 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+function Toggle({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}: TogglePrimitive.Props & VariantProps<typeof toggleVariants>) {
+  return (
+    <TogglePrimitive
+      data-slot="toggle"
+      className={cn(toggleVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+}
+
+export { Toggle, toggleVariants };
diff --git a/apps/web/tsconfig.json b/apps/web/tsconfig.json
index cf2763c6..27532cbf 100644
--- a/apps/web/tsconfig.json
+++ b/apps/web/tsconfig.json
@@ -1,6 +1,6 @@
 {
   "extends": "@repo/typescript-config/vite.json",
-  "include": ["src", "src/vite-env.d.ts"],
+  "include": ["src", "src/vite-env.d.ts", "e2e"],
   "compilerOptions": {
     "jsx": "react-jsx",
     "paths": {
diff --git a/apps/web/vitest.config.ts b/apps/web/vitest.config.ts
new file mode 100644
index 00000000..403c26ca
--- /dev/null
+++ b/apps/web/vitest.config.ts
@@ -0,0 +1,10 @@
+import tsconfigPaths from "vite-tsconfig-paths";
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+  plugins: [tsconfigPaths()],
+  test: {
+    environment: "node",
+    include: ["src/**/*.test.ts"],
+  },
+});
diff --git a/package.json b/package.json
index 72849f76..6a0eab82 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
   "private": true,
   "description": "",
   "author": "",
-  "license": "UNLICENSED",
+  "license": "MIT",
   "scripts": {
     "dev": "turbo run dev",
     "build": "turbo run build",
diff --git a/packages/schema/src/eval/eval.schema.ts b/packages/schema/src/eval/eval.schema.ts
index 494b6254..341a9a91 100644
--- a/packages/schema/src/eval/eval.schema.ts
+++ b/packages/schema/src/eval/eval.schema.ts
@@ -155,7 +155,9 @@ export const evalTestCaseDetailSchema = evalTestCaseSchema.extend({
   logicNodes: evalLogicNodeSchema.array(), // [] by default
 });
 
-/* Eval test case full -> detail with limit items inlined on each limit. (node-view) */
+/* Eval test case full -> detail with limit items inlined on each limit.
+   This is the shape the graph editor needs (limits WITH their items + logicNodes)
+   and the single source of truth shared with the table view. Returned by GET .../full. */
 export const evalTestCaseFullSchema = evalTestCaseDetailSchema.extend({
   limits: z.array(evalLimitDetailSchema),
 });
diff --git a/packages/schema/src/eval/eval.types.ts b/packages/schema/src/eval/eval.types.ts
index f873572d..bbc3df07 100644
--- a/packages/schema/src/eval/eval.types.ts
+++ b/packages/schema/src/eval/eval.types.ts
@@ -7,13 +7,19 @@ import {
   evalLogicNodeSchema,
   evalTestCaseCreateOrUpdateSchema,
   evalTestCaseDetailSchema,
+  evalTestCaseFullCreateOrUpdateSchema,
   evalTestCaseFullSchema,
-  evalTestCaseSchema,evalTestCaseThresholdSchema,evalThresholdCreateOrUpdateSchema, evalThresholdSchema, evalThresholdsResponseSchema
+  evalTestCaseSchema,
+  evalTestCaseThresholdSchema,
+  evalThresholdCreateOrUpdateSchema,
+  evalThresholdSchema,
+  evalThresholdsResponseSchema,
 } from "./eval.schema";
 
-
 export type EvalTestCaseThreshold = z.infer<typeof evalTestCaseThresholdSchema>;
-export type EvalThresholdCreateOrUpdate = z.infer<typeof evalThresholdCreateOrUpdateSchema>;
+export type EvalThresholdCreateOrUpdate = z.infer<
+  typeof evalThresholdCreateOrUpdateSchema
+>;
 export type EvalThreshold = z.infer<typeof evalThresholdSchema>;
 export type EvalLogicNode = z.infer<typeof evalLogicNodeSchema>;
 export type EvalLimitItem = z.infer<typeof evalLimitItemSchema>;
@@ -28,4 +34,9 @@ export type EvalTestCaseCreateOrUpdate = z.infer<
 export type EvalLimitCreateOrUpdate = z.infer<
   typeof evalLimitCreateOrUpdateSchema
 >;
-export type EvalThresholdsResponse = z.infer<typeof evalThresholdsResponseSchema>;
+export type EvalTestCaseFullCreateOrUpdate = z.infer<
+  typeof evalTestCaseFullCreateOrUpdateSchema
+>;
+export type EvalThresholdsResponse = z.infer<
+  typeof evalThresholdsResponseSchema
+>;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index fc134e7b..1dffb6c6 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -327,15 +327,48 @@ importers:
       react-redux:
         specifier: ^9.2.0
         version: 9.2.0(@types/react@19.2.8)(react@19.2.3)(redux@5.0.1)
+      react-resizable-panels:
+        specifier: ^4.8.0
+        version: 4.11.2(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       react-router:
         specifier: ^7.13.0
         version: 7.13.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       recharts:
         specifier: ^3.7.0
         version: 3.7.0(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react-is@18.3.1)(react@19.2.3)(redux@5.0.1)
+      rete:
+        specifier: ^2.0.6
+        version: 2.0.6
+      rete-area-plugin:
+        specifier: ^2.1.5
+        version: 2.1.5(rete@2.0.6)
+      rete-auto-arrange-plugin:
+        specifier: ^2.0.2
+        version: 2.0.2(elkjs@0.8.2)(rete-area-plugin@2.1.5(rete@2.0.6))(rete@2.0.6)(web-worker@1.5.0)
+      rete-connection-plugin:
+        specifier: ^2.0.5
+        version: 2.0.5(rete-area-plugin@2.1.5(rete@2.0.6))(rete@2.0.6)
+      rete-context-menu-plugin:
+        specifier: ^2.0.6
+        version: 2.0.6(rete-area-plugin@2.1.5(rete@2.0.6))(rete@2.0.6)
+      rete-history-plugin:
+        specifier: ^2.1.1
+        version: 2.1.1(rete-area-plugin@2.1.5(rete@2.0.6))(rete@2.0.6)
+      rete-react-plugin:
+        specifier: ^2.1.0
+        version: 2.1.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(rete-area-plugin@2.1.5(rete@2.0.6))(rete-render-utils@2.0.3(rete-area-plugin@2.1.5(rete@2.0.6))(rete@2.0.6))(rete@2.0.6)(styled-components@6.4.2(react-dom@19.2.3(react@19.2.3))(react@19.2.3))
+      rete-render-utils:
+        specifier: ^2.0.3
+        version: 2.0.3(rete-area-plugin@2.1.5(rete@2.0.6))(rete@2.0.6)
+      rete-scopes-plugin:
+        specifier: ^2.1.1
+        version: 2.1.1(rete-area-plugin@2.1.5(rete@2.0.6))(rete@2.0.6)
       sonner:
         specifier: ^2.0.7
         version: 2.0.7(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      styled-components:
+        specifier: ^6.3.12
+        version: 6.4.2(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       tailwind-merge:
         specifier: ^3.5.0
         version: 3.5.0
@@ -361,6 +394,9 @@ importers:
       '@eslint/js':
         specifier: ^9.39.1
         version: 9.39.2
+      '@playwright/test':
+        specifier: ^1.60.0
+        version: 1.61.0
       '@repo/eslint-config':
         specifier: workspace:*
         version: link:../../packages/eslint-config
@@ -412,6 +448,9 @@ importers:
       vite-tsconfig-paths:
         specifier: ^6.0.5
         version: 6.0.5(typescript@5.9.3)(vite@7.3.1(@types/node@24.10.7)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.3)(terser@5.44.1)(tsx@4.21.0))
+      vitest:
+        specifier: ^4.0.18
+        version: 4.1.9(@opentelemetry/api@1.9.1)(@types/node@24.10.7)(msw@2.12.10(@types/node@24.10.7)(typescript@5.9.3))(vite@7.3.1(@types/node@24.10.7)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.3)(terser@5.44.1)(tsx@4.21.0))
 
   packages/database:
     dependencies:
@@ -496,7 +535,7 @@ importers:
         version: 29.7.0(@types/node@22.19.5)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@22.19.5)(typescript@5.9.3))
       next:
         specifier: 16.0.10
-        version: 16.0.10(@babel/core@7.28.5)(@opentelemetry/api@1.9.1)(babel-plugin-macros@3.1.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.97.3)
+        version: 16.0.10(@opentelemetry/api@1.9.1)(@playwright/test@1.61.0)(babel-plugin-macros@3.1.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.97.3)
       typescript:
         specifier: ~5.9.3
         version: 5.9.3
@@ -967,6 +1006,12 @@ packages:
   '@emnapi/runtime@1.8.1':
     resolution: {integrity: sha512-mehfKSMWjjNol8659Z8KxEMrdSJDDot5SXMq00dM8BN4o+CLNXQ0xH2V7EchNHV4RmbZLmmPdEaXZc5H2FXmDg==}
 
+  '@emotion/is-prop-valid@1.4.0':
+    resolution: {integrity: sha512-QgD4fyscGcbbKwJmqNvUMSE02OsHUa+lAWKdEUIJKgqe5IwRSKd7+KhibEWdaKwgjLj0DRSHA9biAIqGBk05lw==}
+
+  '@emotion/memoize@0.9.0':
+    resolution: {integrity: sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==}
+
   '@esbuild/aix-ppc64@0.25.12':
     resolution: {integrity: sha512-Hhmwd6CInZ3dwpuGTF8fJG6yoWmsToE+vYgD4nytZVxcu1ulHpUQRAB1UJ8+N1Am3Mz4+xOByoQoSZf4D+CpkA==}
     engines: {node: '>=18'}
@@ -2341,6 +2386,11 @@ packages:
     resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
     engines: {node: '>=14'}
 
+  '@playwright/test@1.61.0':
+    resolution: {integrity: sha512-cKA5B6lpFEMyMGjxF54QihfYpB4FkEGH+qZhtArDEG+wezQAJY8Pq6C7T1SjWz+FFzt3TbyoXBQYk/0292TdJA==}
+    engines: {node: '>=18'}
+    hasBin: true
+
   '@prisma/instrumentation@7.6.0':
     resolution: {integrity: sha512-ZPW2gRiwpPzEfgeZgaekhqXrbW+Y2RJKHVqUmlhZhKzRNCcvR6DykzylDrynpArKKRQtLxoZy36fK7U0p3pdgQ==}
     peerDependencies:
@@ -2890,6 +2940,9 @@ packages:
   '@types/caseless@0.12.5':
     resolution: {integrity: sha512-hWtVTC2q7hc7xZ/RLbxapMvDMgUnDvKvMOpKal4DrMyfGBUfB1oKaZlIRr6mJL+If3bAP6sV/QneGzF6tJjZDg==}
 
+  '@types/chai@5.2.3':
+    resolution: {integrity: sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA==}
+
   '@types/connect@3.4.38':
     resolution: {integrity: sha512-K6uROf1LD88uDQqJCktA4yzL1YYAK6NgfsI0v/mTgyPKWsX1CnJ0XPSDhViejru1GcRkLWb8RlzFYJRqGUbaug==}
 
@@ -2928,6 +2981,9 @@ packages:
   '@types/d3-timer@3.0.2':
     resolution: {integrity: sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==}
 
+  '@types/deep-eql@4.0.2':
+    resolution: {integrity: sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==}
+
   '@types/eslint-scope@3.7.7':
     resolution: {integrity: sha512-MzMFlSLBqNF2gcHWO0G1vP/YQyfvrxZ0bF+u7mzUdZ1/xK4A4sru+nraZz5i3iEIk1l1uyicaDVTB4QbbEkAYg==}
 
@@ -3159,6 +3215,35 @@ packages:
     peerDependencies:
       vite: ^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0
 
+  '@vitest/expect@4.1.9':
+    resolution: {integrity: sha512-vl/rYsUKcBr3SnQn166+XR5ZQcgMx3DQhFWdfli/cWpLnLUmbxZvyrJZotLFUryib+LtArYMSTJ5RbQ57ZqrlA==}
+
+  '@vitest/mocker@4.1.9':
+    resolution: {integrity: sha512-EVkXzBjrPGM+cK8/ANWgBrkUCfJfb38/EfTSO8h7pWvKkyPkpWxvR7BkD2MyItMF62C97zAEoqdpUixwR/e+Rw==}
+    peerDependencies:
+      msw: ^2.4.9
+      vite: ^6.0.0 || ^7.0.0 || ^8.0.0
+    peerDependenciesMeta:
+      msw:
+        optional: true
+      vite:
+        optional: true
+
+  '@vitest/pretty-format@4.1.9':
+    resolution: {integrity: sha512-s0iufns3iIFitdgm+YR7g1whCAaGtXz459VS9/PqyKDEEFgYIhsHOQmXgIgDuYCt7DeQmiZT0Qe2OA2p4ZPu5A==}
+
+  '@vitest/runner@4.1.9':
+    resolution: {integrity: sha512-KXLMDtc7oe70+3mJfGrPUWPesswH+3sTxAMAMl8DG7I8IUQT4XW718dY5ID3vPUcmlu27CcKfY4P3h3I29SLJg==}
+
+  '@vitest/snapshot@4.1.9':
+    resolution: {integrity: sha512-Jc7RKGNBo8Z28WYIm0Niej4xdSPByRf6mU58VpHQkd6Zh05rlnA+twjbK5HyeIGHxrzsc3mJgS43uM0CZKzaIA==}
+
+  '@vitest/spy@4.1.9':
+    resolution: {integrity: sha512-fHpsS6mIi+PiEW+vcRVOMkX1oSaPKne3VOclSFICPcGOmfKgXPU5iAah+wcNcj2xPrCCmfq99IDGf+EojhhvhA==}
+
+  '@vitest/utils@4.1.9':
+    resolution: {integrity: sha512-A51o8ymO5PpqlWNnBP9ZHPXDIpuMtTLlGSjN7la4US+LJzoUMyhwjA5QXlm39JexgwHKW4Xjs8Z2d3dLCXOeuA==}
+
   '@webassemblyjs/ast@1.14.1':
     resolution: {integrity: sha512-nuBEDgQfm1ccRp/8bCQrx1frohyufl4JlbMMZ4P1wpeOfDhF6FQkxZJ1b/e+PLwr6X1Nhw6OLme5usuBWYBvuQ==}
 
@@ -3369,6 +3454,10 @@ packages:
   asap@2.0.6:
     resolution: {integrity: sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA==}
 
+  assertion-error@2.0.1:
+    resolution: {integrity: sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==}
+    engines: {node: '>=12'}
+
   ast-types@0.16.1:
     resolution: {integrity: sha512-6t10qk83GOG8p0vKmaCr8eiilZwO171AvbROMtvvNiwrTly62t+7XkA8RdIIVbpMhCASAsxgAzdRSwh6nw/5Dg==}
     engines: {node: '>=4'}
@@ -3531,6 +3620,10 @@ packages:
   caniuse-lite@1.0.30001763:
     resolution: {integrity: sha512-mh/dGtq56uN98LlNX9qdbKnzINhX0QzhiWBFEkFfsFO4QyCvL8YegrJAazCwXIeqkIob8BlZPGM3xdnY+sgmvQ==}
 
+  chai@6.2.2:
+    resolution: {integrity: sha512-NUPRluOfOiTKBKvWPtSD4PhFvWCqOi0BGStNWs57X9js7XGTprSmFoz5F0tWhR4WPjNeR9jXqdC7/UpSJTnlRg==}
+    engines: {node: '>=18'}
+
   chalk@4.1.2:
     resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
     engines: {node: '>=10'}
@@ -4078,6 +4171,9 @@ packages:
   electron-to-chromium@1.5.267:
     resolution: {integrity: sha512-0Drusm6MVRXSOJpGbaSVgcQsuB4hEkMpHXaVstcPmhu5LIedxs1xNK/nIxmQIU/RPC0+1/o0AVZfBTkTNJOdUw==}
 
+  elkjs@0.8.2:
+    resolution: {integrity: sha512-L6uRgvZTH+4OF5NE/MBbzQx/WYpru1xCBE9respNj6qznEewGUIfhzmm7horWWxbNO2M0WckQypGctR8lH79xQ==}
+
   emittery@0.13.1:
     resolution: {integrity: sha512-DeWwawk6r5yR9jFgnDKYt4sLS0LmHJJi3ZOnb5/JdbYwj3nW+FxQnHIjhBKz8YLC7oRNPVM9NQ47I3CVx34eqQ==}
     engines: {node: '>=12'}
@@ -4132,6 +4228,9 @@ packages:
   es-module-lexer@1.7.0:
     resolution: {integrity: sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA==}
 
+  es-module-lexer@2.1.0:
+    resolution: {integrity: sha512-n27zTYMjYu1aj4MjCWzSP7G9r75utsaoc8m61weK+W8JMBGGQybd43GstCXZ3WNmSFtGT9wi59qQTW6mhTR5LQ==}
+
   es-object-atoms@1.1.1:
     resolution: {integrity: sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==}
     engines: {node: '>= 0.4'}
@@ -4266,6 +4365,9 @@ packages:
     resolution: {integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==}
     engines: {node: '>=4.0'}
 
+  estree-walker@3.0.3:
+    resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==}
+
   esutils@2.0.3:
     resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
     engines: {node: '>=0.10.0'}
@@ -4305,6 +4407,10 @@ packages:
     resolution: {integrity: sha512-Zk/eNKV2zbjpKzrsQ+n1G6poVbErQxJ0LBOJXaKZ1EViLzH+hrLu9cdXI4zw9dBQJslwBEpbQ2P1oS7nDxs6jQ==}
     engines: {node: '>= 0.8.0'}
 
+  expect-type@1.3.0:
+    resolution: {integrity: sha512-knvyeauYhqjOYvQ66MznSMs83wmHrCycNEN6Ao+2AeYEfxUIkuiVxdEa1qlGEPK+We3n0THiDciYSsCcgW/DoA==}
+    engines: {node: '>=12.0.0'}
+
   expect@29.7.0:
     resolution: {integrity: sha512-2Zks0hf1VLFYI1kbh0I5jP3KHHyCHpkfyHBzsSXRFgl/Bg9mWYfMW8oD+PdMPlEwy5HNsR9JutYy6pMeOh61nw==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
@@ -4468,6 +4574,11 @@ packages:
   fs.realpath@1.0.0:
     resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
 
+  fsevents@2.3.2:
+    resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
+
   fsevents@2.3.3:
     resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
@@ -5714,6 +5825,10 @@ packages:
     resolution: {integrity: sha512-gXah6aZrcUxjWg2zR2MwouP2eHlCBzdV4pygudehaKXSGW4v2AsRQUK+lwwXhii6KFZcunEnmSUoYp5CXibxtA==}
     engines: {node: '>= 0.4'}
 
+  obug@2.1.3:
+    resolution: {integrity: sha512-9miFgM2OFba7hB+pRgvtV84pYTBaoTHohvmIgiRt6dRIzbwEOIaNaP+dIlGs2fNFoB0SeISs0Jz5WFVRid6Xyg==}
+    engines: {node: '>=12.20.0'}
+
   on-finished@2.4.1:
     resolution: {integrity: sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==}
     engines: {node: '>= 0.8'}
@@ -5854,6 +5969,9 @@ packages:
     resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
     engines: {node: '>=8'}
 
+  pathe@2.0.3:
+    resolution: {integrity: sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==}
+
   pause@0.0.1:
     resolution: {integrity: sha512-KG8UEiEVkR3wGEb4m5yZkVCzigAD+cVEJck2CzYZO37ZGJfctvVptVO192MwrtPhzONn6go8ylnOdMhKqi4nfg==}
 
@@ -5918,6 +6036,16 @@ packages:
     resolution: {integrity: sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==}
     engines: {node: '>=8'}
 
+  playwright-core@1.61.0:
+    resolution: {integrity: sha512-caX7TrY3Ml6egyDX0WUcTHDxodl/b51y5wJOdCEA36QviK/s2g081hvmGs8eaE3DWb6NYZQ6BjO/QkNRPenoPA==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+  playwright@1.61.0:
+    resolution: {integrity: sha512-Z+7BeeqQPRRzklHsVFP4KTGIyMxKUmfeRA4WisM6G3/XW6nwGeX6fX9qYaDa+CiUqpOkb2f6X3nar05R3kSuJQ==}
+    engines: {node: '>=18'}
+    hasBin: true
+
   pluralize@8.0.0:
     resolution: {integrity: sha512-Nc3IT5yHzflTfbjgqWcCPpo7DaKy4FnpB0l/zCAW0Tc7jxAiuqSxHasntB3D7887LSrA93kDJ9IXovxJYxyLCA==}
     engines: {node: '>=4'}
@@ -6102,6 +6230,12 @@ packages:
     resolution: {integrity: sha512-QgT5//D3jfjJb6Gsjxv0Slpj23ip+HtOpnNgnb2S5zU3CB26G/IDPGoy4RJB42wzFE46DRsstbW6tKHoKbhAxw==}
     engines: {node: '>=0.10.0'}
 
+  react-resizable-panels@4.11.2:
+    resolution: {integrity: sha512-+kfFbDZ8mygc7g0vxOcDzCVGuwiIUOnILqPoUHo6/uP+Mmyx6HzZU+kj1aOPDlktXuobYbr6BtQekvJwHRX4Eg==}
+    peerDependencies:
+      react: ^18.0.0 || ^19.0.0
+      react-dom: ^18.0.0 || ^19.0.0
+
   react-router@7.13.0:
     resolution: {integrity: sha512-PZgus8ETambRT17BUm/LL8lX3Of+oiLaPuVTRH3l1eLvSPpKO3AvhAEb5N7ihAFZQrYDqkvvWfFh9p0z9VsjLw==}
     engines: {node: '>=20.0.0'}
@@ -6210,6 +6344,62 @@ packages:
     resolution: {integrity: sha512-oMA2dcrw6u0YfxJQXm342bFKX/E4sG9rbTzO9ptUcR/e8A33cHuvStiYOwH7fszkZlZ1z/ta9AAoPk2F4qIOHA==}
     engines: {node: '>=18'}
 
+  rete-area-plugin@2.1.5:
+    resolution: {integrity: sha512-iquEvwkQlcsO4cmgM3Z37TG0AWaE536dfA+lCJAze5YJzVx4RBaViUCqdB4dUA/utSytpBCkiDC4D3ztM9akGQ==}
+    peerDependencies:
+      rete: ^2.0.0
+
+  rete-auto-arrange-plugin@2.0.2:
+    resolution: {integrity: sha512-VLTnVb9tqHfQKkFMZzpYgYxDWcIa+nXHRC+Po0k+gUh2zJqegkx8bFSA1n6VkMv+wPYa9EnWsTMfUDD3k1QEzg==}
+    peerDependencies:
+      elkjs: ^0.8.2
+      rete: ^2.0.1
+      rete-area-plugin: ^2.0.0
+      web-worker: ^1.2.0
+
+  rete-connection-plugin@2.0.5:
+    resolution: {integrity: sha512-KFtlOyEJRc0y9STVgo2T+t+j9u5fxiTxbyzPbMCm0uqncb3b8d2ABDIzvWoNo5zQAh2Oz/OvlUovupbzrGzpSg==}
+    peerDependencies:
+      rete: ^2.0.1
+      rete-area-plugin: ^2.0.0
+
+  rete-context-menu-plugin@2.0.6:
+    resolution: {integrity: sha512-OmzdYEDvaJux4W7pTZPJ9oxO+YMNA4cw3/262ia564+0HXazrcHjyg3m6jXswfleeOS8SAaV+e+X3caTLUyEgw==}
+    peerDependencies:
+      rete: ^2.0.1
+      rete-area-plugin: ^2.0.0
+
+  rete-history-plugin@2.1.1:
+    resolution: {integrity: sha512-Kb2FF51qwl9axSVzusZDJ7ojksg0qPBY3CIhAusHxTLYzO5Di1Nu3cAzHUOHik6kcb3eZI+GYdfqaj/E8xggxQ==}
+    peerDependencies:
+      rete: ^2.0.1
+      rete-area-plugin: ^2.0.0
+
+  rete-react-plugin@2.1.0:
+    resolution: {integrity: sha512-FXYhdb4FFL7S7Iie398nfyLTRRan+OT6Gdo5nZnF/3nq8R1xan6zKuWmpovUXjxEgm6pkVhY9BjCEV8XlAXWAg==}
+    peerDependencies:
+      react: '^16.8.6 || ^17 || ^18 || ^19 '
+      react-dom: ^16.8.6 || ^17 || ^18 || ^19
+      rete: ^2.0.1
+      rete-area-plugin: ^2.0.0
+      rete-render-utils: ^2.0.0
+      styled-components: ^5.3.6 || ^6
+
+  rete-render-utils@2.0.3:
+    resolution: {integrity: sha512-Oz4W2PNayHocRvlzadb5BCNf+tDzJ8RhTwB3ucBPCdCLKZ974wWDiTSCRfA287L2hmHVzRfBdyAwC03K9eP+4g==}
+    peerDependencies:
+      rete: ^2.0.0
+      rete-area-plugin: ^2.0.0
+
+  rete-scopes-plugin@2.1.1:
+    resolution: {integrity: sha512-7wZng5apPHxu9e9cWz3TR/U4hvr6+B4XPTVzCchPLhzCHaPLUg+TAM8l4CClqP22wIhdYJUMDFpmZBe9y6y0yQ==}
+    peerDependencies:
+      rete: ^2.0.1
+      rete-area-plugin: ^2.0.0
+
+  rete@2.0.6:
+    resolution: {integrity: sha512-kPmlKCGFES2VWtY7Y7SCB8ZeXRMsgX5deza9cu4OwmfM/ZUimd461kC3hRyccoyVxE4POlHUx0gg2jcGfusHFg==}
+
   retry-request@7.0.2:
     resolution: {integrity: sha512-dUOvLMJ0/JJYEn8NrpOaGNE7X3vpI5XlZS/u0ANjqtcZVKnIxP7IgCFwrKTxENw29emmwug53awKtaMm4i9g5w==}
     engines: {node: '>=14'}
@@ -6362,6 +6552,9 @@ packages:
     resolution: {integrity: sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==}
     engines: {node: '>= 0.4'}
 
+  siginfo@2.0.0:
+    resolution: {integrity: sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==}
+
   signal-exit@3.0.7:
     resolution: {integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==}
 
@@ -6418,10 +6611,16 @@ packages:
     resolution: {integrity: sha512-XlkWvfIm6RmsWtNJx+uqtKLS8eqFbxUg0ZzLXqY0caEy9l7hruX8IpiDnjsLavoBgqCCR71TqWO8MaXYheJ3RQ==}
     engines: {node: '>=10'}
 
+  stackback@0.0.2:
+    resolution: {integrity: sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==}
+
   statuses@2.0.2:
     resolution: {integrity: sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==}
     engines: {node: '>= 0.8'}
 
+  std-env@4.1.0:
+    resolution: {integrity: sha512-Rq7ybcX2RuC55r9oaPVEW7/xu3tj8u4GeBYHBWCychFtzMIr86A7e3PPEBPT37sHStKX3+TiX/Fr/ACmJLVlLQ==}
+
   stdin-discarder@0.2.2:
     resolution: {integrity: sha512-UhDfHmA92YAlNnCfhmq0VeNL5bDbiZGg7sZ2IvPsXubGkiNa9EC+tUTsjBRsYUAz87btI6/1wf4XoVvQ3uRnmQ==}
     engines: {node: '>=18'}
@@ -6526,6 +6725,22 @@ packages:
   style-mod@4.1.3:
     resolution: {integrity: sha512-i/n8VsZydrugj3Iuzll8+x/00GH2vnYsk1eomD8QiRrSAeW6ItbCQDtfXCeJHd0iwiNagqjQkvpvREEPtW3IoQ==}
 
+  styled-components@6.4.2:
+    resolution: {integrity: sha512-xZBhBJsMtGqb+aKcwKgaT+BtuFums9VynX2JRvXJGTx5UfZzN12rk5r4nVdhXYvRw+hE7yiYxVrOqJZaK2+Txg==}
+    engines: {node: '>= 16'}
+    peerDependencies:
+      css-to-react-native: '>= 3.2.0'
+      react: '>= 16.8.0'
+      react-dom: '>= 16.8.0'
+      react-native: '>= 0.68.0'
+    peerDependenciesMeta:
+      css-to-react-native:
+        optional: true
+      react-dom:
+        optional: true
+      react-native:
+        optional: true
+
   styled-jsx@5.1.6:
     resolution: {integrity: sha512-qSVyDTeMotdvQYoHWLNGwRFJHC+i+ZvdBRYosOFgC+Wg1vx4frN2/RG/NA7SYqqvKNLf39P2LSRA2pu6n0XYZA==}
     engines: {node: '>= 12.0.0'}
@@ -6539,6 +6754,9 @@ packages:
       babel-plugin-macros:
         optional: true
 
+  stylis@4.3.6:
+    resolution: {integrity: sha512-yQ3rwFWRfwNUY7H5vpU0wfdkNSnvnJinhF9830Swlaxl03zsOjCfmX0ugac+3LtK0lYSgwL/KXc8oYL3mG4YFQ==}
+
   superagent@10.3.0:
     resolution: {integrity: sha512-B+4Ik7ROgVKrQsXTV0Jwp2u+PXYLSlqtDAhYnkkD+zn3yg8s/zjA2MeGayPoY/KICrbitwneDHrjSotxKL+0XQ==}
     engines: {node: '>=14.18.0'}
@@ -6631,10 +6849,21 @@ packages:
   tiny-invariant@1.3.3:
     resolution: {integrity: sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==}
 
+  tinybench@2.9.0:
+    resolution: {integrity: sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==}
+
+  tinyexec@1.2.4:
+    resolution: {integrity: sha512-SHf/r48b7vOrjve9PxJo3MN5v5yuyjHvdUcrQffT3WXMUfnGmHDVbC4k3sHJaJTgZCwpUplIaAo5ANtMyp3YHg==}
+    engines: {node: '>=18'}
+
   tinyglobby@0.2.15:
     resolution: {integrity: sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==}
     engines: {node: '>=12.0.0'}
 
+  tinyrainbow@3.1.0:
+    resolution: {integrity: sha512-Bf+ILmBgretUrdJxzXM0SgXLZ3XfiaUuOj/IKQHuTXip+05Xn+uyEYdVg0kYDipTBcLrCVyUzAPz7QmArb0mmw==}
+    engines: {node: '>=14.0.0'}
+
   tldts-core@7.0.25:
     resolution: {integrity: sha512-ZjCZK0rppSBu7rjHYDYsEaMOIbbT+nWF57hKkv4IUmZWBNrBWBOjIElc0mKRgLM8bm7x/BBlof6t2gi/Oq/Asw==}
 
@@ -6991,6 +7220,47 @@ packages:
       yaml:
         optional: true
 
+  vitest@4.1.9:
+    resolution: {integrity: sha512-nE3/LEyc0z87uHYLZebqCUOaJr2hdtuPp7BQ4BosVFnfltxgAvMG08NyrSGlPpOUWvR27c5flSmYFTNr78L9GQ==}
+    engines: {node: ^20.0.0 || ^22.0.0 || >=24.0.0}
+    hasBin: true
+    peerDependencies:
+      '@edge-runtime/vm': '*'
+      '@opentelemetry/api': ^1.9.0
+      '@types/node': ^20.0.0 || ^22.0.0 || >=24.0.0
+      '@vitest/browser-playwright': 4.1.9
+      '@vitest/browser-preview': 4.1.9
+      '@vitest/browser-webdriverio': 4.1.9
+      '@vitest/coverage-istanbul': 4.1.9
+      '@vitest/coverage-v8': 4.1.9
+      '@vitest/ui': 4.1.9
+      happy-dom: '*'
+      jsdom: '*'
+      vite: ^6.0.0 || ^7.0.0 || ^8.0.0
+    peerDependenciesMeta:
+      '@edge-runtime/vm':
+        optional: true
+      '@opentelemetry/api':
+        optional: true
+      '@types/node':
+        optional: true
+      '@vitest/browser-playwright':
+        optional: true
+      '@vitest/browser-preview':
+        optional: true
+      '@vitest/browser-webdriverio':
+        optional: true
+      '@vitest/coverage-istanbul':
+        optional: true
+      '@vitest/coverage-v8':
+        optional: true
+      '@vitest/ui':
+        optional: true
+      happy-dom:
+        optional: true
+      jsdom:
+        optional: true
+
   void-elements@3.1.0:
     resolution: {integrity: sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==}
     engines: {node: '>=0.10.0'}
@@ -7012,6 +7282,9 @@ packages:
     resolution: {integrity: sha512-d2JWLCivmZYTSIoge9MsgFCZrt571BikcWGYkjC1khllbTeDlGqZ2D8vD8E/lJa8WGWbb7Plm8/XJYV7IJHZZw==}
     engines: {node: '>= 8'}
 
+  web-worker@1.5.0:
+    resolution: {integrity: sha512-RiMReJrTAiA+mBjGONMnjVDP2u3p9R1vkcGz6gDIrOMT3oGuYwX2WRMYI9ipkphSuE5XKEhydbhNEJh4NY9mlw==}
+
   webidl-conversions@3.0.1:
     resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==}
 
@@ -7062,6 +7335,11 @@ packages:
     engines: {node: ^16.13.0 || >=18.0.0}
     hasBin: true
 
+  why-is-node-running@2.3.0:
+    resolution: {integrity: sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==}
+    engines: {node: '>=8'}
+    hasBin: true
+
   word-wrap@1.2.5:
     resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==}
     engines: {node: '>=0.10.0'}
@@ -7807,6 +8085,12 @@ snapshots:
       tslib: 2.8.1
     optional: true
 
+  '@emotion/is-prop-valid@1.4.0':
+    dependencies:
+      '@emotion/memoize': 0.9.0
+
+  '@emotion/memoize@0.9.0': {}
+
   '@esbuild/aix-ppc64@0.25.12':
     optional: true
 
@@ -9176,6 +9460,10 @@ snapshots:
   '@pkgjs/parseargs@0.11.0':
     optional: true
 
+  '@playwright/test@1.61.0':
+    dependencies:
+      playwright: 1.61.0
+
   '@prisma/instrumentation@7.6.0(@opentelemetry/api@1.9.1)':
     dependencies:
       '@opentelemetry/api': 1.9.1
@@ -9689,6 +9977,11 @@ snapshots:
 
   '@types/caseless@0.12.5': {}
 
+  '@types/chai@5.2.3':
+    dependencies:
+      '@types/deep-eql': 4.0.2
+      assertion-error: 2.0.1
+
   '@types/connect@3.4.38':
     dependencies:
       '@types/node': 22.19.5
@@ -9723,6 +10016,8 @@ snapshots:
 
   '@types/d3-timer@3.0.2': {}
 
+  '@types/deep-eql@4.0.2': {}
+
   '@types/eslint-scope@3.7.7':
     dependencies:
       '@types/eslint': 9.6.1
@@ -10036,6 +10331,48 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@vitest/expect@4.1.9':
+    dependencies:
+      '@standard-schema/spec': 1.1.0
+      '@types/chai': 5.2.3
+      '@vitest/spy': 4.1.9
+      '@vitest/utils': 4.1.9
+      chai: 6.2.2
+      tinyrainbow: 3.1.0
+
+  '@vitest/mocker@4.1.9(msw@2.12.10(@types/node@24.10.7)(typescript@5.9.3))(vite@7.3.1(@types/node@24.10.7)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.3)(terser@5.44.1)(tsx@4.21.0))':
+    dependencies:
+      '@vitest/spy': 4.1.9
+      estree-walker: 3.0.3
+      magic-string: 0.30.21
+    optionalDependencies:
+      msw: 2.12.10(@types/node@24.10.7)(typescript@5.9.3)
+      vite: 7.3.1(@types/node@24.10.7)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.3)(terser@5.44.1)(tsx@4.21.0)
+
+  '@vitest/pretty-format@4.1.9':
+    dependencies:
+      tinyrainbow: 3.1.0
+
+  '@vitest/runner@4.1.9':
+    dependencies:
+      '@vitest/utils': 4.1.9
+      pathe: 2.0.3
+
+  '@vitest/snapshot@4.1.9':
+    dependencies:
+      '@vitest/pretty-format': 4.1.9
+      '@vitest/utils': 4.1.9
+      magic-string: 0.30.21
+      pathe: 2.0.3
+
+  '@vitest/spy@4.1.9': {}
+
+  '@vitest/utils@4.1.9':
+    dependencies:
+      '@vitest/pretty-format': 4.1.9
+      convert-source-map: 2.0.0
+      tinyrainbow: 3.1.0
+
   '@webassemblyjs/ast@1.14.1':
     dependencies:
       '@webassemblyjs/helper-numbers': 1.13.2
@@ -10280,6 +10617,8 @@ snapshots:
 
   asap@2.0.6: {}
 
+  assertion-error@2.0.1: {}
+
   ast-types@0.16.1:
     dependencies:
       tslib: 2.8.1
@@ -10492,6 +10831,8 @@ snapshots:
 
   caniuse-lite@1.0.30001763: {}
 
+  chai@6.2.2: {}
+
   chalk@4.1.2:
     dependencies:
       ansi-styles: 4.3.0
@@ -10895,6 +11236,8 @@ snapshots:
 
   electron-to-chromium@1.5.267: {}
 
+  elkjs@0.8.2: {}
+
   emittery@0.13.1: {}
 
   emoji-regex@10.6.0: {}
@@ -11007,6 +11350,8 @@ snapshots:
 
   es-module-lexer@1.7.0: {}
 
+  es-module-lexer@2.1.0: {}
+
   es-object-atoms@1.1.1:
     dependencies:
       es-errors: 1.3.0
@@ -11224,6 +11569,10 @@ snapshots:
 
   estraverse@5.3.0: {}
 
+  estree-walker@3.0.3:
+    dependencies:
+      '@types/estree': 1.0.8
+
   esutils@2.0.3: {}
 
   etag@1.8.1: {}
@@ -11269,6 +11618,8 @@ snapshots:
 
   exit@0.1.2: {}
 
+  expect-type@1.3.0: {}
+
   expect@29.7.0:
     dependencies:
       '@jest/expect-utils': 29.7.0
@@ -11490,6 +11841,9 @@ snapshots:
 
   fs.realpath@1.0.0: {}
 
+  fsevents@2.3.2:
+    optional: true
+
   fsevents@2.3.3:
     optional: true
 
@@ -12802,7 +13156,7 @@ snapshots:
       react: 19.2.3
       react-dom: 19.2.3(react@19.2.3)
 
-  next@16.0.10(@babel/core@7.28.5)(@opentelemetry/api@1.9.1)(babel-plugin-macros@3.1.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.97.3):
+  next@16.0.10(@opentelemetry/api@1.9.1)(@playwright/test@1.61.0)(babel-plugin-macros@3.1.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.97.3):
     dependencies:
       '@next/env': 16.0.10
       '@swc/helpers': 0.5.15
@@ -12810,7 +13164,7 @@ snapshots:
       postcss: 8.4.31
       react: 19.2.3
       react-dom: 19.2.3(react@19.2.3)
-      styled-jsx: 5.1.6(@babel/core@7.28.5)(babel-plugin-macros@3.1.0)(react@19.2.3)
+      styled-jsx: 5.1.6(babel-plugin-macros@3.1.0)(react@19.2.3)
     optionalDependencies:
       '@next/swc-darwin-arm64': 16.0.10
       '@next/swc-darwin-x64': 16.0.10
@@ -12821,6 +13175,7 @@ snapshots:
       '@next/swc-win32-arm64-msvc': 16.0.10
       '@next/swc-win32-x64-msvc': 16.0.10
       '@opentelemetry/api': 1.9.1
+      '@playwright/test': 1.61.0
       sass: 1.97.3
       sharp: 0.34.5
     transitivePeerDependencies:
@@ -12907,6 +13262,8 @@ snapshots:
       define-properties: 1.2.1
       es-object-atoms: 1.1.1
 
+  obug@2.1.3: {}
+
   on-finished@2.4.1:
     dependencies:
       ee-first: 1.1.1
@@ -13065,6 +13422,8 @@ snapshots:
 
   path-type@4.0.0: {}
 
+  pathe@2.0.3: {}
+
   pause@0.0.1: {}
 
   pg-cloudflare@1.2.7:
@@ -13118,6 +13477,14 @@ snapshots:
     dependencies:
       find-up: 4.1.0
 
+  playwright-core@1.61.0: {}
+
+  playwright@1.61.0:
+    dependencies:
+      playwright-core: 1.61.0
+    optionalDependencies:
+      fsevents: 2.3.2
+
   pluralize@8.0.0: {}
 
   possible-typed-array-names@1.1.0: {}
@@ -13286,6 +13653,11 @@ snapshots:
 
   react-refresh@0.18.0: {}
 
+  react-resizable-panels@4.11.2(react-dom@19.2.3(react@19.2.3))(react@19.2.3):
+    dependencies:
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+
   react-router@7.13.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3):
     dependencies:
       cookie: 1.1.1
@@ -13415,6 +13787,64 @@ snapshots:
       onetime: 7.0.0
       signal-exit: 4.1.0
 
+  rete-area-plugin@2.1.5(rete@2.0.6):
+    dependencies:
+      '@babel/runtime': 7.28.4
+      rete: 2.0.6
+
+  rete-auto-arrange-plugin@2.0.2(elkjs@0.8.2)(rete-area-plugin@2.1.5(rete@2.0.6))(rete@2.0.6)(web-worker@1.5.0):
+    dependencies:
+      '@babel/runtime': 7.28.4
+      elkjs: 0.8.2
+      rete: 2.0.6
+      rete-area-plugin: 2.1.5(rete@2.0.6)
+      web-worker: 1.5.0
+
+  rete-connection-plugin@2.0.5(rete-area-plugin@2.1.5(rete@2.0.6))(rete@2.0.6):
+    dependencies:
+      '@babel/runtime': 7.28.4
+      rete: 2.0.6
+      rete-area-plugin: 2.1.5(rete@2.0.6)
+
+  rete-context-menu-plugin@2.0.6(rete-area-plugin@2.1.5(rete@2.0.6))(rete@2.0.6):
+    dependencies:
+      '@babel/runtime': 7.28.4
+      rete: 2.0.6
+      rete-area-plugin: 2.1.5(rete@2.0.6)
+
+  rete-history-plugin@2.1.1(rete-area-plugin@2.1.5(rete@2.0.6))(rete@2.0.6):
+    dependencies:
+      '@babel/runtime': 7.28.4
+      rete: 2.0.6
+      rete-area-plugin: 2.1.5(rete@2.0.6)
+
+  rete-react-plugin@2.1.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(rete-area-plugin@2.1.5(rete@2.0.6))(rete-render-utils@2.0.3(rete-area-plugin@2.1.5(rete@2.0.6))(rete@2.0.6))(rete@2.0.6)(styled-components@6.4.2(react-dom@19.2.3(react@19.2.3))(react@19.2.3)):
+    dependencies:
+      '@babel/runtime': 7.28.4
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+      rete: 2.0.6
+      rete-area-plugin: 2.1.5(rete@2.0.6)
+      rete-render-utils: 2.0.3(rete-area-plugin@2.1.5(rete@2.0.6))(rete@2.0.6)
+      styled-components: 6.4.2(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      usehooks-ts: 3.1.1(react@19.2.3)
+
+  rete-render-utils@2.0.3(rete-area-plugin@2.1.5(rete@2.0.6))(rete@2.0.6):
+    dependencies:
+      '@babel/runtime': 7.28.4
+      rete: 2.0.6
+      rete-area-plugin: 2.1.5(rete@2.0.6)
+
+  rete-scopes-plugin@2.1.1(rete-area-plugin@2.1.5(rete@2.0.6))(rete@2.0.6):
+    dependencies:
+      '@babel/runtime': 7.28.4
+      rete: 2.0.6
+      rete-area-plugin: 2.1.5(rete@2.0.6)
+
+  rete@2.0.6:
+    dependencies:
+      '@babel/runtime': 7.28.4
+
   retry-request@7.0.2:
     dependencies:
       '@types/request': 2.48.13
@@ -13711,6 +14141,8 @@ snapshots:
       side-channel-map: 1.0.1
       side-channel-weakmap: 1.0.2
 
+  siginfo@2.0.0: {}
+
   signal-exit@3.0.7: {}
 
   signal-exit@4.1.0: {}
@@ -13752,8 +14184,12 @@ snapshots:
     dependencies:
       escape-string-regexp: 2.0.0
 
+  stackback@0.0.2: {}
+
   statuses@2.0.2: {}
 
+  std-env@4.1.0: {}
+
   stdin-discarder@0.2.2: {}
 
   stop-iteration-iterator@1.1.0:
@@ -13876,14 +14312,24 @@ snapshots:
 
   style-mod@4.1.3: {}
 
-  styled-jsx@5.1.6(@babel/core@7.28.5)(babel-plugin-macros@3.1.0)(react@19.2.3):
+  styled-components@6.4.2(react-dom@19.2.3(react@19.2.3))(react@19.2.3):
+    dependencies:
+      '@emotion/is-prop-valid': 1.4.0
+      csstype: 3.2.3
+      react: 19.2.3
+      stylis: 4.3.6
+    optionalDependencies:
+      react-dom: 19.2.3(react@19.2.3)
+
+  styled-jsx@5.1.6(babel-plugin-macros@3.1.0)(react@19.2.3):
     dependencies:
       client-only: 0.0.1
       react: 19.2.3
     optionalDependencies:
-      '@babel/core': 7.28.5
       babel-plugin-macros: 3.1.0
 
+  stylis@4.3.6: {}
+
   superagent@10.3.0:
     dependencies:
       component-emitter: 1.3.1
@@ -14008,11 +14454,17 @@ snapshots:
 
   tiny-invariant@1.3.3: {}
 
+  tinybench@2.9.0: {}
+
+  tinyexec@1.2.4: {}
+
   tinyglobby@0.2.15:
     dependencies:
       fdir: 6.5.0(picomatch@4.0.3)
       picomatch: 4.0.3
 
+  tinyrainbow@3.1.0: {}
+
   tldts-core@7.0.25: {}
 
   tldts@7.0.25:
@@ -14350,6 +14802,34 @@ snapshots:
       terser: 5.44.1
       tsx: 4.21.0
 
+  vitest@4.1.9(@opentelemetry/api@1.9.1)(@types/node@24.10.7)(msw@2.12.10(@types/node@24.10.7)(typescript@5.9.3))(vite@7.3.1(@types/node@24.10.7)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.3)(terser@5.44.1)(tsx@4.21.0)):
+    dependencies:
+      '@vitest/expect': 4.1.9
+      '@vitest/mocker': 4.1.9(msw@2.12.10(@types/node@24.10.7)(typescript@5.9.3))(vite@7.3.1(@types/node@24.10.7)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.3)(terser@5.44.1)(tsx@4.21.0))
+      '@vitest/pretty-format': 4.1.9
+      '@vitest/runner': 4.1.9
+      '@vitest/snapshot': 4.1.9
+      '@vitest/spy': 4.1.9
+      '@vitest/utils': 4.1.9
+      es-module-lexer: 2.1.0
+      expect-type: 1.3.0
+      magic-string: 0.30.21
+      obug: 2.1.3
+      pathe: 2.0.3
+      picomatch: 4.0.3
+      std-env: 4.1.0
+      tinybench: 2.9.0
+      tinyexec: 1.2.4
+      tinyglobby: 0.2.15
+      tinyrainbow: 3.1.0
+      vite: 7.3.1(@types/node@24.10.7)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.3)(terser@5.44.1)(tsx@4.21.0)
+      why-is-node-running: 2.3.0
+    optionalDependencies:
+      '@opentelemetry/api': 1.9.1
+      '@types/node': 24.10.7
+    transitivePeerDependencies:
+      - msw
+
   void-elements@3.1.0: {}
 
   w3c-keyname@2.2.8: {}
@@ -14369,6 +14849,8 @@ snapshots:
 
   web-streams-polyfill@3.3.3: {}
 
+  web-worker@1.5.0: {}
+
   webidl-conversions@3.0.1: {}
 
   webpack-node-externals@3.0.0: {}
@@ -14461,6 +14943,11 @@ snapshots:
     dependencies:
       isexe: 3.1.5
 
+  why-is-node-running@2.3.0:
+    dependencies:
+      siginfo: 2.0.0
+      stackback: 0.0.2
+
   word-wrap@1.2.5: {}
 
   wordwrap@1.0.0: {}