diff --git a/src-svelte/src/lib/components/field/Field.svelte b/src-svelte/src/lib/components/field/Field.svelte
index a3b2de9829..036e0d9859 100644
--- a/src-svelte/src/lib/components/field/Field.svelte
+++ b/src-svelte/src/lib/components/field/Field.svelte
@@ -1,10 +1,10 @@
 
-<script>
+<script lang="ts">
 
 import styles from "./Field.module.css";
 import FieldOverlayRoot from "./svg/FieldOverlayRoot.svelte";
-import {generate} from "$lib/path.svelte.ts"
-let {pathId} = $props();
+import {generate, Path} from "$lib/path.svelte.ts"
+let {path}: {path:Path} = $props();
 // import IconButton from "@mui/material/IconButton";
 // import ShapeLineIcon from "@mui/icons-material/ShapeLine";
 // import { CircularProgress, Tooltip } from "@mui/material";
@@ -22,8 +22,8 @@ let {pathId} = $props();
 // import { IEventMarkerStore } from "../../document/EventMarkerStore";
 </script>
       <div class={styles.Container}>
-        <FieldOverlayRoot pathId={pathId}></FieldOverlayRoot>
-        <button class="btn btn-circle z-10 absolute" onclick={()=>generate(pathId)}>Gen</button>
+        <FieldOverlayRoot path={path}></FieldOverlayRoot>
+        <button class="btn btn-circle z-10 absolute" onclick={()=>generate(path)}>Gen</button>
         <!-- {selectedSidebar !== undefined &&
           "heading" in selectedSidebar &&
           activePath.waypoints.find(
diff --git a/src-svelte/src/lib/components/field/GraphLegendCheckbox.svelte b/src-svelte/src/lib/components/field/GraphLegendCheckbox.svelte
deleted file mode 100644
index b278a92545..0000000000
--- a/src-svelte/src/lib/components/field/GraphLegendCheckbox.svelte
+++ /dev/null
@@ -1,9 +0,0 @@
-<script lang="ts">
-    let {key, color, store=$bindable()}: {key: GraphLine, color: GraphAxis, store: boolean} = $props();
-    import {graphViews, graphColors, type GraphLine, type GraphAxis } from "$lib/uistate.svelte.ts"
-    console.log(key, store);
-</script>
-
-<span>
-    <input type="checkbox" class="checkbox  checkbox-" bind:checked={store} style={`--chkbg: ${color.color}; border-radius:0`}/>
-    </span>
diff --git a/src-svelte/src/lib/components/field/svg/FieldGeneratedLines.svelte b/src-svelte/src/lib/components/field/svg/FieldGeneratedLines.svelte
index 5419eb40c2..3d6ba59c15 100644
--- a/src-svelte/src/lib/components/field/svg/FieldGeneratedLines.svelte
+++ b/src-svelte/src/lib/components/field/svg/FieldGeneratedLines.svelte
@@ -1,23 +1,22 @@
 <script lang="ts">
   import {type TrajectorySample} from "$lib/trajectory.svelte.js";
-  import {PathGradients} from "$lib/PathGradient"
+  import {PathGradients} from "./PathGradient.js"
   type Props  = {
     trajectory: TrajectorySample[];
     noneColor: string;
   }
-  let {trajectory = [], noneColor = "var(--select-yellow)"} = $props();
+  let {trajectory = [], noneColor = "var(--select-yellow)"}:Props = $props();
 
   let generatedPathString = $derived(updateString(trajectory));
 
   function updateString(trajectory: TrajectorySample[]) {
-    console.log(trajectory);
     let gen = "";
     trajectory.forEach((point) => {
       gen += `${point.x},${point.y} `;
     });
     return gen;
   }
-  const key = "none";
+  const key: keyof PathGradients = "Velocity";
   const pathGradient = PathGradients[key];
 </script>
 
@@ -41,7 +40,7 @@
             x2={point2.x}
             y2={point2.y}
             stroke-width={0.05}
-            stroke={pathGradient.function(point, i, arr)}
+            stroke={pathGradient.function(point, i, trajectory)}
           ></line>
         {/if}
       {/each}
diff --git a/src-svelte/src/lib/components/field/svg/FieldOverlayRoot.svelte b/src-svelte/src/lib/components/field/svg/FieldOverlayRoot.svelte
index 95f7ceea5a..b916ebf113 100644
--- a/src-svelte/src/lib/components/field/svg/FieldOverlayRoot.svelte
+++ b/src-svelte/src/lib/components/field/svg/FieldOverlayRoot.svelte
@@ -5,10 +5,10 @@
 
 import * as d3 from "d3";
 import { onMount } from 'svelte';
-import {Paths, add_path_waypoint} from '$lib/path.svelte.js';
+import {Path} from '$lib/path.svelte.js';
 
 
-import {Trajectory} from '$lib/trajectory.svelte.js';
+import {Trajectory, type TrajectorySample} from '$lib/trajectory.svelte.js';
 import { uistate } from "$lib/uistate.svelte.ts";
 import FieldGeneratedLines from "./FieldGeneratedLines.svelte";
 // import FieldGrid from "./FieldGrid";
@@ -28,9 +28,9 @@ import FieldImage24 from "./fields/FieldImage24.svelte";
 // import FieldSamples from "./FieldSamples";
 // import FieldGeneratedWaypoints from "./FieldGeneratedWaypoints";
 // import FieldEventMarkerAddLayer from "./FieldEventMarkerAddLayer";
-let {pathId}: {pathId:number} = $props();
-let waypoints = $derived(Paths[pathId]);
-let trajectory = $derived(Trajectory(pathId).samples);
+let {path}: {path: Path} = $props();
+let waypoints : number[] = $derived(path.order());
+let trajectory : TrajectorySample[] = $derived(Trajectory(path.id).samples);
 let xPan = $state(0);
 let yPan = $state(0);
 let zoom = $state(1);
@@ -145,7 +145,7 @@ let zoomed = (e: any) => {
         x: e.clientX,
         y: e.clientY
       });
-      add_path_waypoint(pathId, {x: coords.x, y: coords.y, translationConstrained: true, headingConstrained: true});
+      path.addWaypoint({x: coords.x, y: coords.y, translationConstrained: true, headingConstrained: true})
       
     //   this.context.history.startGroup(() => {
     //     const newPoint =
@@ -230,11 +230,9 @@ let zoomed = (e: any) => {
                 onclick={(e) => createWaypoint(e)}
               ></circle>
         {/if}
-        {#key waypoints}
-        {#each waypoints as pt, idx}
+        {#each path.waypoints as pt, idx}
         
-        <OverlayWaypoint index={idx} point={pt}></OverlayWaypoint>
+        <OverlayWaypoint index={idx} wpt={pt} history={path.history}></OverlayWaypoint>
         {/each}
-        {/key}
         </g>
       </svg>
diff --git a/src-svelte/src/lib/components/field/svg/OverlayWaypoint.svelte b/src-svelte/src/lib/components/field/svg/OverlayWaypoint.svelte
index 432d40eb25..7f397f0b62 100644
--- a/src-svelte/src/lib/components/field/svg/OverlayWaypoint.svelte
+++ b/src-svelte/src/lib/components/field/svg/OverlayWaypoint.svelte
@@ -5,11 +5,11 @@ import * as d3 from "d3";
     import { onMount } from "svelte";
     import BumperBox from "./BumperBox.svelte";
     import { readable, type Readable } from "svelte/store";
+    import {type UndoManager} from "$lib/util/state.svelte.js";
 
 
-let {point, index}: {point:number, index:number} = $props();
+let {wpt, index, history}: {wpt:Waypoint, index:number, history: UndoManager} = $props();
 
-let wpt = $derived(WaypointSubscribers[point]!);
 type Coordinates = {
   x: number;
   y: number;
@@ -31,8 +31,8 @@ let bumperWidth: Readable<number> = readable(0.9);
 
   let coordsFromWaypoint = (): Coordinates => {
     return {
-      x: wpt.x,
-      y: wpt.y
+      x: wpt.x(),
+      y: wpt.y()
     };
   }
   let dragPointRotate = (event: any) => {
@@ -47,7 +47,7 @@ let bumperWidth: Readable<number> = readable(0.9);
     // converts the values to stay inside the 360 positive
 
     // creates the new rotate position array
-    wpt.heading=angleFinal;
+    wpt.heading.set(angleFinal);
     //d3.select(`#group`).attr('transform', `rotate(${ this.r.angle })`)
   }
 
@@ -68,9 +68,8 @@ let bumperWidth: Readable<number> = readable(0.9);
   // }
 
   let dragPointTranslate = (event: any) => {
-    const pointerPos: Coordinates = { x: 0, y: 0 };
-    wpt.x = (event.x);
-    wpt.y = (event.y);
+    wpt.x.set(event.x);
+    wpt.y.set(event.y);
 
     // gets the difference of the angles to get to the final angle
     // converts the values to stay inside the 360 positive
@@ -89,12 +88,12 @@ let bumperWidth: Readable<number> = readable(0.9);
       const rotateHandleDrag = d3
         .drag<SVGCircleElement, undefined>()
         .on("drag", (event) => dragPointRotate(event))
-        // .on("start", () => {
-        //   this.selectWaypoint();
-        //   this.context.history.startGroup(() => {});
-        // })
+        .on("start", () => {
+          //this.selectWaypoint();
+          history.startGroup();
+        })
         .on("end", (event) => {
-;
+          history.stopGroup();
         })
         .container(rootRef);
       d3.select<SVGCircleElement, undefined>(
@@ -117,10 +116,13 @@ let bumperWidth: Readable<number> = readable(0.9);
       const dragHandleDrag = d3
         .drag<SVGCircleElement, undefined>()
         .on("drag", (event) => dragPointTranslate(event))
-        // .on("start", () => {
-        //   this.selectWaypoint();
-        //   this.context.history.startGroup(() => {});
-        // })
+        .on("start", () => {
+          //this.selectWaypoint();
+          history.startGroup();
+        })
+        .on("end", (event) => {
+          history.stopGroup();
+        })
         .container(rootRef);
       d3.select<SVGCircleElement, undefined>(
         `#dragTarget${index}`
@@ -159,13 +161,13 @@ let bumperWidth: Readable<number> = readable(0.9);
 
     let boxColorStr = getBoxColor();
 
-    let type = wpt.waypoint_type;
+    let type = $derived(wpt.waypoint_type);
     //const robotConfig = this.context.model.document.robotConfig;
     </script>
       <g bind:this={rootRef}>
         <g
-          transform={`translate(${wpt.x}, ${wpt.y}) rotate(${
-            (wpt.heading * 180) / Math.PI
+          transform={`translate(${wpt.x()}, ${wpt.y()}) rotate(${
+            (wpt.heading() * 180) / Math.PI
           })`}
           id={appendIndexID("waypointGroup")}
         >
diff --git a/src-svelte/src/lib/PathGradient.ts b/src-svelte/src/lib/components/field/svg/PathGradient.ts
similarity index 97%
rename from src-svelte/src/lib/PathGradient.ts
rename to src-svelte/src/lib/components/field/svg/PathGradient.ts
index 98bcef13ac..81310579f6 100644
--- a/src-svelte/src/lib/PathGradient.ts
+++ b/src-svelte/src/lib/components/field/svg/PathGradient.ts
@@ -72,7 +72,7 @@ class PathGradientFunctions {
     // calculates the maginitude of the velocity vector, then divides it by the theoretical floor speed
     // then it scales the ratio [0, 1]: red to green[0, 100]
     const floorSpeed = 5.0;
-    const t = Math.hypot(point.velocityX, point.velocityY) / floorSpeed;
+    const t = Math.hypot(point.velocity_x, point.velocity_y) / floorSpeed;
     return `hsl(${100 * t}, 100%, 50%)`;
   }
 
@@ -121,7 +121,7 @@ class PathGradientFunctions {
       // then, it is scaled/normalized for the HSL color value.
       const A = arr[i];
       const B = arr[i + 1];
-      t = Math.hypot(B.velocityX - A.velocityX, B.velocityY - A.velocityY);
+      t = Math.hypot(B.velocity_x - A.velocity_x, B.velocity_y - A.velocity_y);
       const dt = B.timestamp - A.timestamp;
       t /= dt * 10;
     }
@@ -173,7 +173,7 @@ class PathGradientFunctions {
   ) {
     // the color value is normalized from red (0) to green (100)
     // based on an artificial angular velocity max of 2 r/s
-    return `hsl(${Math.abs(point.angularVelocity * 100) / 2}, 100%, 50%)`;
+    return `hsl(${Math.abs(point.angular_velocity * 100) / 2}, 100%, 50%)`;
   }
 
   /**
diff --git a/src-svelte/src/lib/components/sidebar/Sidebar.svelte b/src-svelte/src/lib/components/sidebar/Sidebar.svelte
index 952ce08aaa..a14c34257d 100644
--- a/src-svelte/src/lib/components/sidebar/Sidebar.svelte
+++ b/src-svelte/src/lib/components/sidebar/Sidebar.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
   import WaypointList from "./WaypointList.svelte"
   import PathSelector from "./PathSelector.svelte"
-  import {Paths} from "$lib/path.svelte.js";
-  let {pathId}: {pathId:number} = $props();
-  let waypoints = $derived(Paths[pathId]);
+  import {Path} from "$lib/path.svelte.js";
+  let {path}: {path:Path} = $props();
+  let waypointSig = path.order;
   let constraints:any[] = [];
   let obstacles:any[] = [];
   let markers:any[] = [];
@@ -152,18 +152,18 @@
       </span>
       <span class="inline">
         <div class="tooltip tooltip-bottom" data-tip="Undo">
-          <button class="btn btn-ghost btn-square btn-md">
-            U
+          <button class="btn btn-ghost btn-square btn-md" class:btn-disabled={!path.history.canUndo} onclick={()=>path.history.undo()}>
+            &lt;-
         <!-- <ArrowLeftOutline></ArrowLeftOutline> -->
       </button>
     </div>
         
     <div class="tooltip tooltip-bottom" data-tip="Redo">
-      <button class="btn btn-ghost btn-square btn-md">
-        R
+      <button class="btn btn-ghost btn-square btn-md" class:btn-disabled={!path.history.canRedo} onclick={()=>path.history.redo()}>
+        -&gt;
         <!-- <ArrowRightOutline></ArrowRightOutline> -->
       </button>
-                </div>
+    </div>
       </span>
     </div>
     
@@ -225,7 +225,7 @@
     <div
       class="Sidebar max-h-300 min-h-50"
     >
-      <PathSelector pathId={pathId}></PathSelector>
+      <PathSelector pathId={path.id}></PathSelector>
     </div>
     <div class="divider SidebarHr"></div>
     <div class="SidebarHeading">FEATURES</div>
@@ -233,16 +233,7 @@
     <div class="Sidebar">
       <div class="divider divider-start SidebarHr">WAYPOINTS</div>
 
-      <WaypointList {waypoints} pathId={pathId}></WaypointList>
-      {#if waypoints.length == 0}
-
-      <div class={"SidebarItem Noninteractible"}>
-        <span></span>
-        <span style="color: gray; font-style: italic">
-          No Waypoints
-        </span>
-      </div>
-    {/if}
+      <WaypointList {path}></WaypointList>
       <div class="divider divider-start SidebarHr">CONSTRAINTS</div>
       <div class="WaypointList">
         {#each constraints as constraint}
diff --git a/src-svelte/src/lib/components/sidebar/WaypointList.svelte b/src-svelte/src/lib/components/sidebar/WaypointList.svelte
index 11c53d447e..66760de756 100644
--- a/src-svelte/src/lib/components/sidebar/WaypointList.svelte
+++ b/src-svelte/src/lib/components/sidebar/WaypointList.svelte
@@ -1,57 +1,67 @@
 <script lang="ts">
-    import { deletePathWaypoint, type Waypoint, getWaypoint} from "$lib/waypoint.svelte.js";
-import styles from "./Sidebar.module.css";
-import SidebarWaypoint from "./SidebarWaypoint.svelte"
-let {pathId, waypoints} : {pathId: number, waypoints: number[]} = $props();
-console.log("wpts", waypoints);
-const getListStyle = (isDraggingOver: boolean) => ({
-  outline: isDraggingOver ? "2px solid var(--darker-purple)" : "transparent"
-});
-const onDragEnd = (result: any) => {
+  import type { Path } from "$lib/path.svelte.js";
+  import {
+    type Waypoint,
+    getWaypoint
+  } from "$lib/waypoint.svelte.js";
+  import styles from "./Sidebar.module.css";
+  import SidebarWaypoint from "./SidebarWaypoint.svelte";
+  let { path }: { path: Path } = $props();
+  let waypoints = $derived(path.waypoints);
+  $inspect(waypoints).with(console.trace);
+  $inspect(waypoints[0]?.x()).with(console.trace);
+  const getListStyle = (isDraggingOver: boolean) => ({
+    outline: isDraggingOver ? "2px solid var(--darker-purple)" : "transparent"
+  });
+  const onDragEnd = (result: any) => {
     // dropped outside the list
     // if (!result.destination) {
     //   return;
     // }
     reorder(result.source.index, result.destination.index);
-  }
+  };
   const reorder = (startIndex: number, endIndex: number) => {
     // this.context.model.document.pathlist.activePath.reorder(
     //   startIndex,
     //   endIndex
     // );
-  }
+  };
   const getIssue = (holonomicWaypoint: Waypoint, index: number) => {
     let issue = "";
-    if (holonomicWaypoint.isInitialGuess) {
-    if (index == 0) {
+    if (holonomicWaypoint.isInitialGuess()) {
+      if (index == 0) {
         issue = "Cannot start with an initial guess point.";
-    } else if (index == waypoints.length - 1) {
+      } else if (index == waypoints.length - 1) {
         issue = "Cannot end with an initial guess point.";
-    }
+      }
     }
     if (holonomicWaypoint.waypoint_type == 2) {
-    if (index == 0) {
+      if (index == 0) {
         issue = "Cannot start with an empty waypoint.";
-    } else if (index == waypoints.length - 1) {
+      } else if (index == waypoints.length - 1) {
         issue = "Cannot end with an empty waypoint.";
-    }
+      }
     }
     return issue;
-  }
-
+  };
 </script>
+
 <div>
-    {#each waypoints as id, i}
-    {@const point = getWaypoint(id)}
+  {#each waypoints as point, i (point.id)}
     {#if point !== undefined}
-    <SidebarWaypoint
-    waypoint={point}
-    index={i}
-    issue={getIssue(point, i)}
-    pathLength={waypoints.length}
-    handleDelete={(id)=>deletePathWaypoint(pathId, id)}
-  ></SidebarWaypoint>
-  {/if}
+      <SidebarWaypoint
+        waypoint={point}
+        index={i}
+        issue={getIssue(point, i)}
+        pathLength={waypoints.length}
+        handleDelete={(id)=>path.deleteWaypoint(id)}
+      ></SidebarWaypoint>
+    {/if}
   {/each}
+  {#if waypoints.length == 0}
+    <div class={"SidebarItem Noninteractible"}>
+      <span></span>
+      <span style="color: gray; font-style: italic"> No Waypoints </span>
+    </div>
+  {/if}
 </div>
-
diff --git a/src-svelte/src/lib/components/field/GraphAxis.svelte b/src-svelte/src/lib/graph/GraphAxis.svelte
similarity index 100%
rename from src-svelte/src/lib/components/field/GraphAxis.svelte
rename to src-svelte/src/lib/graph/GraphAxis.svelte
diff --git a/src-svelte/src/lib/components/field/GraphLegend.svelte b/src-svelte/src/lib/graph/GraphLegend.svelte
similarity index 69%
rename from src-svelte/src/lib/components/field/GraphLegend.svelte
rename to src-svelte/src/lib/graph/GraphLegend.svelte
index 5f7272cec3..377729f007 100644
--- a/src-svelte/src/lib/components/field/GraphLegend.svelte
+++ b/src-svelte/src/lib/graph/GraphLegend.svelte
@@ -2,8 +2,9 @@
     type Props = {trajectory: TrajectorySample[], time: number};
     let {trajectory, time} : Props = $props();
     import {sampleD3} from "$lib/util/MathUtil.ts"
-    import {graphViews, graphColors, type GraphLine, uistate} from "$lib/uistate.svelte.ts"
-    import GraphLegendCheckbox from "./GraphLegendCheckbox.svelte"
+    import {graphViews, graphColors, type GraphLine} from "./graph.js"
+    import { uistate} from "$lib/uistate.svelte.ts"
+    import GraphLegendCheckbox from "../graph/GraphLegendCheckbox.svelte"
     import type { TrajectorySample } from "$lib/trajectory.svelte.js";
     let graphData = $derived(uistate.graphData);
     </script>
@@ -11,7 +12,7 @@
 style=" grid-template-columns: min-content max-content 5ch max-content; column-gap:8px">
 {#each Object.entries(graphColors) as [name, data]}
 {@const value = sampleD3(time, graphData[name])?.toFixed(2) ?? ""}
-<GraphLegendCheckbox key={name} bind:store={graphViews[name]} color={data}></GraphLegendCheckbox>
+<GraphLegendCheckbox key={name} store={graphViews[name]} color={data}></GraphLegendCheckbox>
 <span>{data.name}</span>
 <span style="text-align:right">{value}</span>
 <span>{data.units}</span>
diff --git a/src-svelte/src/lib/graph/GraphLegendCheckbox.svelte b/src-svelte/src/lib/graph/GraphLegendCheckbox.svelte
new file mode 100644
index 0000000000..527b1f51a6
--- /dev/null
+++ b/src-svelte/src/lib/graph/GraphLegendCheckbox.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+    let {key, color, store}: {key: GraphLine, color: GraphAxis, store: Signal<boolean>} = $props();
+    import {graphViews, graphColors, type GraphLine, type GraphAxis } from "./graph.js"
+    import type { Signal } from "$lib/util/state.svelte.js";
+    
+</script>
+
+<span>
+    <input type="checkbox" class="checkbox  checkbox-" checked={store()} onchange={(e)=>store.set(e.currentTarget.checked)} style={`--chkbg: ${color.color}; border-radius:0`}/>
+</span>
diff --git a/src-svelte/src/lib/components/field/GraphPanel.svelte b/src-svelte/src/lib/graph/GraphPanel.svelte
similarity index 93%
rename from src-svelte/src/lib/components/field/GraphPanel.svelte
rename to src-svelte/src/lib/graph/GraphPanel.svelte
index de96bdf9ff..5b28ef3baa 100644
--- a/src-svelte/src/lib/components/field/GraphPanel.svelte
+++ b/src-svelte/src/lib/graph/GraphPanel.svelte
@@ -10,13 +10,13 @@
     let trajectory = $derived(output.samples);
     import * as d3 from 'd3'
     import {onMount} from 'svelte'
-    import {graphColors, type GraphLine, graphViews, emptyGraphData, uistate } from "$lib/uistate.svelte.ts"
-    console.log("graphviews", graphViews)
+    import {graphColors, type GraphLine, graphViews, emptyGraphData} from "./graph.js"
+    import { uistate } from "$lib/uistate.svelte.ts"
     import type { TrajectorySample } from '$lib/trajectory.svelte.js';
     
 
     const margin = { top: yOrigin, right: xOrigin, bottom: 0, left: 0 };
-    let x = $derived.by(()=>{console.log("traj", trajectory);
+    let x = $derived.by(()=>{
         return d3.scaleLinear()
         .domain([0,
         (trajectory.length < 2) ? 5 : trajectory[trajectory.length - 1].timestamp
@@ -38,9 +38,9 @@
     $effect(()=>{handleUpdate(trajectory)});
     $effect(()=>redrawAxes(trajectory, width, height));
     function handleUpdate(trajectory: TrajectorySample[]) {
-        console.log("handleUpdate", trajectory)
         let newData = emptyGraphData();
         Object.keys(newData).forEach(key => {
+            key = key as GraphLine;
             newData[key] = trajectory.map((samp,i,arr) => {
                 return [samp.timestamp, graphColors[key].getter(arr,i)]
             });
@@ -57,7 +57,6 @@
 
         // append the svg object to the body of the page
         var svg = d3.select("#rootGroup");
-        console.log(svg);
         //Read the data
         //@ts-ignore
 
@@ -91,7 +90,6 @@
     }
     function xGridAction(node, scale) {
         let grid = d3.select<SVGGElement>(node);
-            console.log("xgrid", grid);
         grid.selectChildren().remove();
         grid.call(d3.axisBottom(scale).ticks(10).tickFormat(d => '').tickSize(-height));
         grid.selectAll(":is(line, path)").attr("stroke", "#111111")
@@ -99,7 +97,6 @@
         }
     function xAxisAction(node, scale) {
         let grid = d3.select<SVGGElement>(node);
-            console.log("xaxis", grid);
         grid.selectChildren().remove();
         grid.call(d3.axisBottom(scale).ticks(5));
         grid.selectAll("text").attr("fill", "white")
@@ -115,7 +112,6 @@
         }
         function yAxisAction(node, scale) {
         let yAxis = d3.select<SVGGElement>(node);
-            console.log("yaxis", yAxis);
         yAxis.selectChildren().remove();
         yAxis.call(d3.axisLeft(scale).ticks(10));
         yAxis.selectAll("text").attr("fill", "white")
@@ -139,7 +135,7 @@
     <g id="rightYAxis" transform={`translate(${width},0)`}></g>
     {#key uistate.graphData}
     {#each Object.entries(graphColors) as [k,val]}
-        {#if graphViews[k]}
+        {#if graphViews[k]()}
         {@const d = val.leftAxis ? leftLine(uistate.graphData[k]) : rightLine(uistate.graphData[k])}
         <path id={`${k}Line`} fill="none" stroke={val.color} strokeWidth={2}
                         d={d ?? undefined}></path>
diff --git a/src-svelte/src/lib/components/field/PathAnimationPanel.svelte b/src-svelte/src/lib/graph/PathAnimationPanel.svelte
similarity index 90%
rename from src-svelte/src/lib/components/field/PathAnimationPanel.svelte
rename to src-svelte/src/lib/graph/PathAnimationPanel.svelte
index 2607e49ab3..f20f11ea22 100644
--- a/src-svelte/src/lib/components/field/PathAnimationPanel.svelte
+++ b/src-svelte/src/lib/graph/PathAnimationPanel.svelte
@@ -1,16 +1,15 @@
 <script lang="ts">
     import { onDestroy } from "svelte";
-    import {get} from "svelte/store"
-    import {Trajectory, type TrajectorySample} from "$lib/trajectory.svelte.js"
     import GraphLegend from "./GraphLegend.svelte";
     import PathAnimationSlider from "./PathAnimationSlider.svelte"
-    import {GRAPH_PANEL_MIN_HEIGHT, uistate} from "$lib/uistate.svelte.ts"
+    import {GRAPH_PANEL_MIN_HEIGHT} from "./graph.js"
+    import {uistate} from "$lib/uistate.svelte.ts"
     let {output}: {output: Output} = $props();
 
     let running = $state(false);
     let timerId = $state(0);
-    let samples = $derived.by(()=>{console.log("output", output); return output.samples});
-    let totalTime = $derived.by(()=>{console.log(samples, samples[0]); return samples[samples.length-1]?.timestamp ?? 0});
+    let samples = $derived(output.samples);
+    let totalTime = $derived(samples[samples.length-1]?.timestamp ?? 0);
 
     let i = 0;
     let then = Date.now();
diff --git a/src-svelte/src/lib/components/field/PathAnimationSlider.svelte b/src-svelte/src/lib/graph/PathAnimationSlider.svelte
similarity index 96%
rename from src-svelte/src/lib/components/field/PathAnimationSlider.svelte
rename to src-svelte/src/lib/graph/PathAnimationSlider.svelte
index 3179014922..4662759968 100644
--- a/src-svelte/src/lib/components/field/PathAnimationSlider.svelte
+++ b/src-svelte/src/lib/graph/PathAnimationSlider.svelte
@@ -6,7 +6,8 @@
     }
     import * as d3 from "d3";
     import {onMount} from "svelte";
-    import {GRAPH_PANEL_MIN_HEIGHT, type UIState} from "$lib/uistate.svelte.js"
+    import {GRAPH_PANEL_MIN_HEIGHT} from "./graph.js"
+    import {type UIState} from "$lib/uistate.svelte.js"
     import GraphPanel from "./GraphPanel.svelte"
     import type { TrajectorySample } from "$lib/trajectory.svelte.js";
     let root: SVGSVGElement;
diff --git a/src-svelte/src/lib/graph/graph.ts b/src-svelte/src/lib/graph/graph.ts
new file mode 100644
index 0000000000..e360062899
--- /dev/null
+++ b/src-svelte/src/lib/graph/graph.ts
@@ -0,0 +1,127 @@
+import type { TrajectorySample } from "$lib/trajectory.svelte.js";
+import { signal, type Signal } from "$lib/util/state.svelte.js";
+
+export const GRAPH_PANEL_MIN_HEIGHT = 32;
+export const GRAPH_PANEL_MAX_HEIGHT = 350;
+
+export type GraphLine = keyof TrajectorySample
+  | "abs_vel"
+  | "accel";
+export type GraphAxis = {
+  name: string,
+  units: string,
+  color: string,
+  leftAxis: boolean,
+  defaultView: boolean,
+  getter: (arr: TrajectorySample[], i: number) => number
+};
+export let graphColors: Record<GraphLine, GraphAxis> = {
+  timestamp: {
+    name: "Timestamp",
+    color: "white",
+    units: "s",
+    leftAxis: true,
+    defaultView: false,
+    getter: (arr, i) => arr[i].timestamp
+  },
+  x: {
+    name: "X Position",
+    units: "m",
+    color: "red",
+    leftAxis: false,
+    defaultView: false,
+    getter: (arr, i) => arr[i].x
+  },
+  y: {
+    name: "Y Position",
+    units: "m",
+    color: "green",
+    leftAxis: false,
+    defaultView: false,
+    getter: (arr, i) => arr[i].y
+  },
+  heading: {
+    name: "Heading",
+    units: "rad",
+    color: "blue",
+    leftAxis: true,
+    defaultView: true,
+    getter: (arr, i) => arr[i].heading
+  },
+  velocity_x: {
+    name: "X Velocity",
+    units: "m/s",
+    color: "darkred",
+    leftAxis: true,
+    defaultView: false,
+    getter: (arr, i) => arr[i].velocity_x
+  },
+  velocity_y: {
+    name: "Y Velocity",
+    units: "m/s",
+    color: "darkgreen",
+    leftAxis: true,
+    defaultView: false,
+    getter: (arr, i) => arr[i].velocity_y
+  },
+  angular_velocity: {
+    name: "Angular Velocity",
+    units: "rad/s",
+    color: "darkblue",
+    leftAxis: true,
+    defaultView: true,
+    getter: (arr, i) => arr[i].angular_velocity
+  },
+  abs_vel: {
+    name: "Absolute Velocity",
+    units: "m/s",
+    color: "yellow",
+    leftAxis: true,
+    defaultView: true,
+    getter: (arr, i) => Math.hypot(arr[i].velocity_x, arr[i].velocity_y)
+  },
+  accel: {
+    name: "Linear Acceleration",
+    units: "m/s²",
+    color: "orange",
+    leftAxis: false,
+    defaultView: true,
+    getter: (arr, i) => {
+      var samp: TrajectorySample = arr[i - 1];
+      var samp2: TrajectorySample = arr[i + 1];
+      if (samp2 === undefined || samp === undefined) {
+        return 0;
+      }
+
+      return (
+        Math.hypot(samp2.velocity_x, samp2.velocity_y) -
+        Math.hypot(samp.velocity_x, samp.velocity_y)) / (samp2.timestamp - samp.timestamp);
+    }
+  }
+}
+export let graphDefaultViews = Object.fromEntries(
+  Object.entries(graphColors).map(entry => [entry[0], entry[1].defaultView])
+) as Record<GraphLine, boolean>
+export let graphViews = Object.fromEntries(
+    Object.entries(graphColors).map(entry => 
+        [entry[0], signal(entry[1].defaultView)]
+
+)
+) as Record<GraphLine, Signal<boolean>>;
+
+let graphViewKeys = Object.keys(graphViews)
+let graphViewEntries = Object.values(graphViews)
+export function emptyGraphData(): Record<
+GraphLine, Array<[number, number]>> {
+  return {
+    x: [],
+    y: [],
+    heading: [],
+    velocity_x: [],
+    velocity_y: [],
+    angular_velocity: [],
+    timestamp: [],
+    abs_vel: [],
+    accel: []
+  }
+}
diff --git a/src-svelte/src/lib/path.svelte.ts b/src-svelte/src/lib/path.svelte.ts
index c254569da5..c8e079eafa 100644
--- a/src-svelte/src/lib/path.svelte.ts
+++ b/src-svelte/src/lib/path.svelte.ts
@@ -2,45 +2,65 @@
 
 import { Trajectory } from "./trajectory.svelte.js";
 import Commands from "./commands.js";
-import { add_waypoint, getWaypoint, type IWaypoint} from "./waypoint.svelte.js";
-import { History, signal, type Signal } from "./util/state.svelte.js";
-
-export function generate(id:number) {
-    if (Paths[id] === undefined) return;
-    let waypoints : IWaypoint[] = Paths[id].map((id)=>getWaypoint(id)?.unreactive() as IWaypoint);
-    console.log(waypoints);
-    Commands.CMD_GENERATE_TRAJ(id, waypoints)
+import {Map} from "svelte/reactivity";
+import { getWaypoint, Waypoint, WaypointSubscribers, type WaypointData, type WaypointNoID} from "./waypoint.svelte.js";
+import { UndoManager, signal, type Signal } from "./util/state.svelte.js";
+
+export function generate(path: Path) {
+    let snapshot = path.snapshot;
+    console.log(snapshot);
+    Commands.CMD_GENERATE_TRAJ(path.id, snapshot.waypoints)
     .then((traj)=>{
         console.log("after generate", traj);
-        Trajectory(id).samples = traj.samples;
+        Trajectory(path.id).samples = traj.samples;
     }
     );
 }
 
 
 export class Path {
-    history = new History();
+    id: number;
+    history = new UndoManager();
+    _createSignal: <T>(arg:T)=>Signal<T> = (arg)=>this.history.undoable(signal(arg));
     order : Signal<number[]> = this.history.undoable(signal([] as number[]));
-    constructor() {
+    _waypoints():Waypoint[] {return this.order().map((id)=>WaypointSubscribers.get(id)).filter(pt=>pt!=undefined) as Waypoint[]}
+    snapshot = $derived.by(()=>this._snapshot());
+    waypoints = $derived.by(()=>{console.log("waypoints"); return this._waypoints()});
+    
+    
+    constructor(id: number) {
+        this.id = id;
+        
+        
+    }
+    addWaypoint(update: Partial<WaypointNoID>) {
+        let newWpt = new Waypoint(this._createSignal, update);
+        this.order().push(newWpt.id);
+        return newWpt.id;
+    }
+    // We don't delete the actual object from WaypointSubscribers because it's still referenced in the undo history
+    deleteWaypoint(wptId: number) {
+        console.log(this);
+        console.log("delete", wptId);
+        this.order.set(this.order().filter(pt=>pt!=wptId));
+    }
+    _snapshot() {
+        return {
+            waypoints: this._waypoints().map(pt=>pt.snapshot())
+        }
     }
-
 }
-export let Paths: Record<number, Path> = $state({});
+export let Paths = new Map<number, Path>();
 
 export function add_path(id:number) {
-    if (Paths[id] == undefined) {
+    if (Paths.get(id) == undefined) {
         console.log("use path", id);
         
-        let newPath = new Path();
-        Paths[id] = newPath;
+        let newPath = new Path(id);
+        Paths.set(id, newPath);
     }
-}
+    return Paths.get(id)!;
 
-export async function add_path_waypoint(path_id: number, update: Partial<IWaypoint>) {
-    if (Paths[path_id] === undefined) return;
-    let newWpt = add_waypoint(update);
-    Paths[path_id].order().push(newWpt.id);
-    return newWpt.id;
 }
 //     const idsFromPoints = (points: Waypoint[]) => {
 //         console.log(points);
diff --git a/src-svelte/src/lib/uistate.svelte.ts b/src-svelte/src/lib/uistate.svelte.ts
index ae2be4512c..eee2151481 100644
--- a/src-svelte/src/lib/uistate.svelte.ts
+++ b/src-svelte/src/lib/uistate.svelte.ts
@@ -4,7 +4,7 @@ import { derived, writable, type Writable } from "svelte/store";
 // import CircleOutline from "virtual:icons/mdi/circle-outline";
 // import InitialGuess from "virtual:icons/mdi/help-circle-outline";
 import type { TrajectorySample } from "./trajectory.svelte.js";
-import { reactive } from "./util/reactive.svelte.js";
+import { emptyGraphData, GRAPH_PANEL_MAX_HEIGHT, GRAPH_PANEL_MIN_HEIGHT, type GraphLine } from "./graph/graph.js";
 class UIState {
   fieldScalingFactor = $state(1);
   playbackTime = $state(0);
@@ -135,143 +135,4 @@ export const NavbarItemSectionEnds = NavbarItemSections.map((s, idx) =>
 console.log(NavbarItemSectionEnds);
 
 /** Graph Panel */
-export const GRAPH_PANEL_MIN_HEIGHT = 32;
-export const GRAPH_PANEL_MAX_HEIGHT = 350;
-
-export type GraphLine = keyof TrajectorySample
-  | "abs_vel"
-  | "accel";
-export type GraphAxis = {
-  name: string,
-  units: string,
-  color: string,
-  leftAxis: boolean,
-  defaultView: boolean,
-  getter: (arr: TrajectorySample[], i: number) => number
-};
-export let graphColors: Record<GraphLine, GraphAxis> = {
-  timestamp: {
-    name: "Timestamp",
-    color: "white",
-    units: "s",
-    leftAxis: true,
-    defaultView: false,
-    getter: (arr, i) => arr[i].timestamp
-  },
-  x: {
-    name: "X Position",
-    units: "m",
-    color: "red",
-    leftAxis: false,
-    defaultView: false,
-    getter: (arr, i) => arr[i].x
-  },
-  y: {
-    name: "Y Position",
-    units: "m",
-    color: "green",
-    leftAxis: false,
-    defaultView: false,
-    getter: (arr, i) => arr[i].y
-  },
-  heading: {
-    name: "Heading",
-    units: "rad",
-    color: "blue",
-    leftAxis: true,
-    defaultView: true,
-    getter: (arr, i) => arr[i].heading
-  },
-  velocity_x: {
-    name: "X Velocity",
-    units: "m/s",
-    color: "darkred",
-    leftAxis: true,
-    defaultView: false,
-    getter: (arr, i) => arr[i].velocity_x
-  },
-  velocity_y: {
-    name: "Y Velocity",
-    units: "m/s",
-    color: "darkgreen",
-    leftAxis: true,
-    defaultView: false,
-    getter: (arr, i) => arr[i].velocity_y
-  },
-  angular_velocity: {
-    name: "Angular Velocity",
-    units: "rad/s",
-    color: "darkblue",
-    leftAxis: true,
-    defaultView: true,
-    getter: (arr, i) => arr[i].angular_velocity
-  },
-  abs_vel: {
-    name: "Absolute Velocity",
-    units: "m/s",
-    color: "yellow",
-    leftAxis: true,
-    defaultView: true,
-    getter: (arr, i) => Math.hypot(arr[i].velocity_x, arr[i].velocity_y)
-  },
-  accel: {
-    name: "Linear Acceleration",
-    units: "m/s²",
-    color: "orange",
-    leftAxis: false,
-    defaultView: true,
-    getter: (arr, i) => {
-      var samp: TrajectorySample = arr[i - 1];
-      var samp2: TrajectorySample = arr[i + 1];
-      if (samp2 === undefined || samp === undefined) {
-        return 0;
-      }
-
-      return (
-        Math.hypot(samp2.velocity_x, samp2.velocity_y) -
-        Math.hypot(samp.velocity_x, samp.velocity_y)) / (samp2.timestamp - samp.timestamp);
-    }
-  }
-}
-export let graphDefaultViews = Object.fromEntries(
-  Object.entries(graphColors).map(entry => [entry[0], entry[1].defaultView])
-) as Record<GraphLine, boolean>
-type Wrap<T> =
-{
-  get: () => T;
-  set: (newValue: T) => void;
-}
-export let graphViews: Record<GraphLine, Wrap<boolean>> = {} as Record<GraphLine, Wrap<boolean>>
-  Object.entries(graphColors).forEach(entry => {
-    let state = $state(entry[1].defaultView);
-    Object.defineProperty(graphViews, entry[0],{          //Alternatively, use: `get() {}`
-          get: function() {
-            console.log("get graph view", entry[0])
-            return state;
-          },
-          //Alternatively, use: `set(newValue) {}`
-          set: function(newValue:boolean) {
-            console.log("set graph view", entry[0])
-            state = newValue;
-          }
-        })
-      }
-);
-
-let graphViewKeys = Object.keys(graphViews)
-let graphViewEntries = Object.values(graphViews)
-export function emptyGraphData(): Record<
-GraphLine, Array<[number, number]>> {
-  return {
-    x: [],
-    y: [],
-    heading: [],
-    velocity_x: [],
-    velocity_y: [],
-    angular_velocity: [],
-    timestamp: [],
-    abs_vel: [],
-    accel: []
-  }
-}
 
diff --git a/src-svelte/src/lib/util/reactive.svelte.js b/src-svelte/src/lib/util/reactive.svelte.js
deleted file mode 100644
index c2f990b02c..0000000000
--- a/src-svelte/src/lib/util/reactive.svelte.js
+++ /dev/null
@@ -1,214 +0,0 @@
-// props to Solid.js for this, this is the standalone version of Solid.js' createMutable API,
-// now made to work with Svelte 5's new runes/signals reactivity system.
-
-const _RAW = Symbol("store-raw");
-const _PROXY = Symbol("store-proxy");
-
-const _NODE = Symbol("store-node");
-const _HAS = Symbol("store-has");
-
-const _SELF = Symbol("store-self");
-
-const _TRACK = Symbol("store-track");
-
-// _SELF needs a unique value to go off with, so we'll just assign with this
-// uniquely increasing counter.
-let self_count = 0;
-
-function ref(init) {
-  let value = $state(init);
-
-  return {
-    get value() {
-      return value;
-    },
-    set value(next) {
-      value = next;
-    },
-  };
-}
-
-/**
- * @param {any} target
- * @param {typeof _NODE | typeof _HAS}
- */
-function getNodes(target, symbol) {
-  let nodes = target[symbol];
-  if (!nodes) {
-    nodes = target[symbol] = Object.create(null);
-  }
-
-  return nodes;
-}
-
-function getNode(nodes, property, value) {
-  let state = nodes[property];
-  if (!state) {
-    state = nodes[property] = ref(value);
-  }
-
-  return state;
-}
-
-function trackSelf(target) {
-  // is there a way to check if we're currently in an effect?
-  getNode(getNodes(target, _NODE), _SELF, self_count).value;
-}
-
-function isWrappable(obj) {
-  let proto;
-  return (
-    obj != null &&
-    typeof obj === "object" &&
-    (obj[_PROXY] ||
-      !(proto = Object.getPrototypeOf(obj)) ||
-      proto === Object.prototype ||
-      Array.isArray(obj))
-  );
-}
-
-function setProperty(state, property, value, deleting) {
-  const prev = state[property];
-  const len = state.length;
-
-  let has;
-
-  if (!deleting && prev === value) {
-    return;
-  }
-
-  if (deleting) {
-    delete state[property];
-
-    if (prev !== undefined && (has = state[_HAS]) && (has = has[property])) {
-      // in Solid.js, this is set to undefined, but it only works because we can bypass the equality check.
-      // so set the values appropriately.
-      has.value = false;
-    }
-  } else {
-    state[property] = value;
-
-    if (prev === undefined && (has = state[_HAS]) && (has = has[property])) {
-      has.value = true;
-    }
-  }
-
-  const nodes = getNodes(state, _NODE);
-  let node;
-
-  if ((node = nodes[property])) {
-    node.value = value;
-  }
-
-  if (Array.isArray(state) && state.length !== len) {
-    for (let idx = state.length; idx < len; idx++) {
-      if ((node = nodes[i])) {
-        node.value = undefined;
-      }
-    }
-    
-    if ((node = nodes.length)) {
-      node.value = state.length;
-    }
-  }
-
-  if ((node = nodes[_SELF])) {
-    node.value = ++self_count;
-  }
-}
-
-const Array_proto = Array.prototype;
-
-const traps = {
-  get(target, property, receiver) {
-    if (property === _RAW) {
-      return target;
-    }
-    if (property === _PROXY) {
-      return receiver;
-    }
-    if (property === _TRACK) {
-      trackSelf(target);
-      return receiver;
-    }
-
-    const nodes = getNodes(target, _NODE);
-    const tracked = nodes[property];
-
-    let value = tracked ? tracked.value : target[property];
-
-    if (property === _NODE || property === _HAS || property === "__proto__") {
-      return value;
-    }
-
-    if (!tracked) {
-      const fn = typeof value === "function";
-
-      if (fn && value === Array_proto[property]) {
-        // Svelte 5's effects are async, so we don't need to put wrap this in a batch call,
-        // so we'll just bind the Array methods to the proxy and return it as is.
-        return Array_proto[property].bind(receiver);
-      }
-
-      // is there a way to check if we're under an effect?
-      const desc = Object.getOwnPropertyDescriptor(target, property);
-
-      if ((!fn || target.hasOwnProperty(property)) && !(desc && desc.get)) {
-        value = getNode(nodes, property, value).value;
-      }
-    }
-
-    return isWrappable(value) ? wrap(value) : value;
-  },
-  has(target, property) {
-    if (
-      property === _RAW ||
-      property === _PROXY ||
-      property === _TRACK ||
-      property === _NODE ||
-      property === _HAS ||
-      property === "__proto__"
-    ) {
-      return true;
-    }
-
-    // is there a way to check if we're under an effect?
-    getNode(getNodes(target, _HAS), property).value;
-    return property in target;
-  },
-  set(target, property, value) {
-    // Svelte 5's effects are async, so we don't need to put setProperty under a batch call
-    setProperty(target, property, unwrap(value));
-    return true;
-  },
-  deleteProperty(target, property) {
-    setProperty(target, property, undefined, true);
-    return true;
-  },
-  ownKeys(target) {
-    trackSelf(target);
-    return Reflect.ownKeys(target);
-  },
-};
-
-export function unwrap(obj) {
-  let raw;
-  if ((raw = obj != null && obj[_RAW])) {
-    return raw;
-  }
-
-  return obj;
-}
-
-function wrap(obj) {
-  return (obj[_PROXY] ||= new Proxy(obj, traps));
-}
-
-export function reactive(obj) {
-  const unwrapped = unwrap(obj);
-  const wrapped = wrap(unwrapped);
-
-  return wrapped;
-}
-
-export function historyReactive
\ No newline at end of file
diff --git a/src-svelte/src/lib/util/state.svelte.ts b/src-svelte/src/lib/util/state.svelte.ts
index cc01333657..1bdc081862 100644
--- a/src-svelte/src/lib/util/state.svelte.ts
+++ b/src-svelte/src/lib/util/state.svelte.ts
@@ -22,45 +22,70 @@ type HistoryStep<T> = { oldVal: T, newVal: T, idx: number }
 
 
 type Undoable<T> = Signal<T> & { setNoTrack: (val: T) => void }
-export class History {
+type Item<T> = { sig: Undoable<T>, snapshot: T };
+export class UndoManager {
 
-    undoStack: Array<HistoryStep<any>[]> = [[]];
-    redoStack: Array<HistoryStep<any>[]> = [[]];
-    undoables: Map<number, Undoable<any>> = new Map();
+    undoStack: Array<HistoryStep<any>[]> = $state([]);
+    redoStack: Array<HistoryStep<any>[]> = $state([]);
+    undoables: Map<number, Item<any>> = new Map();
+    snapshot: Map<number, any> = new Map();
     idx = 0;
     canUndo = $derived(this.undoStack.length != 0);
     canRedo = $derived(this.redoStack.length != 0);
     _inGroup: boolean = false;
-    isInGroup = $derived(this._inGroup);
-    activeGroup = [];
     startGroup() {
+        console.log("start group");
         this._inGroup = true;
+        this.undoables.forEach((item) => {
+            item.snapshot = item.sig();
+        });
     }
     stopGroup() {
+        console.log("stop group");
         this._inGroup = false;
-        if (this.activeGroup.length != 0) {
-            this.undoStack.push(this.activeGroup);
+        let batch: HistoryStep<any>[] = [];
+        this.undoables.forEach((item, id) => {
+            if (item.snapshot != item.sig()) {
+                batch.push({ oldVal: item.snapshot, newVal: item.sig(), idx: id })
+            }
+        });
+        if (batch.length != 0) {
+            this.undoStack.push(batch);
         }
 
     }
     reportChange<T>(oldVal: T, newVal: T, idx: number) {
-        console.log(oldVal, newVal, this.isInGroup);
         let step = { oldVal, newVal, idx };
-        this.undoStack[this.undoStack.length - 1].push(step);
-        console.log("stack add", this.undoStack);
-
+        // grouping is handled by before-after comparison
+        if (!this._inGroup) { 
+            this.undoStack.push([step]);
+        }
     }
     undo() {
-        console.log("stack", this.undoStack);
         if (this.canUndo) {
             let step = this.undoStack.pop();
             if (step !== undefined) {
                 step.toReversed().forEach(st => {
-                    this.undoables.get(st.idx)?.setNoTrack(st.oldVal)
+                    this.undoables.get(st.idx)?.sig.setNoTrack(st.oldVal)
                 });
+                this.redoStack.push(step);
+            }
+        }
+        console.log("undo stack", this.undoStack, this.redoStack);
+    }
 
+    redo() {
+        
+        if (this.canRedo) {
+            let step = this.redoStack.pop();
+            if (step !== undefined) {
+                step.forEach(st => {
+                    this.undoables.get(st.idx)?.sig.setNoTrack(st.newVal)
+                });
+                this.undoStack.push(step);
             }
         }
+        console.log("redo stack", this.undoStack, this.redoStack);
     }
 
     undoable<T>(sig: Signal<T>): Signal<T> {
@@ -69,16 +94,23 @@ export class History {
             ignore: false,
             oldVal: $state.snapshot(sig())
         }
-        $effect.pre(() => {
-            let newVal = $state.snapshot(sig());
-            untrack(() => {
-                if (!watcher.ignore) {
-                    this.reportChange(watcher.oldVal, newVal, newIDX);
+        // A function that unlistens to changes 
+        const unwatch = $effect.root(() => {
+            let firstRun = true;
+            $effect(() => {
+                let newVal = $state.snapshot(sig());
+                untrack(() => {
+                    if (!watcher.ignore && !firstRun) {
+                        this.reportChange(watcher.oldVal, newVal, newIDX);
+                    }
+                    watcher.oldVal = newVal;
+                    firstRun = false;
                 }
-                watcher.oldVal = $state.snapshot(newVal);
-            }
-            )
-        })
+                )
+            })
+            return () => console.log("unwatch", sig);
+        }
+        );
 
         let ret: Undoable<T> = Object.assign(
             sig,
@@ -92,7 +124,7 @@ export class History {
                 }
             }
         );
-        this.undoables.set(newIDX, ret);
+        this.undoables.set(newIDX, { sig: ret, snapshot: ret() });
         return ret;
     }
 }
\ No newline at end of file
diff --git a/src-svelte/src/lib/util/undoable.svelte.ts b/src-svelte/src/lib/util/undoable.svelte.ts
deleted file mode 100644
index 5be045fe98..0000000000
--- a/src-svelte/src/lib/util/undoable.svelte.ts
+++ /dev/null
@@ -1,76 +0,0 @@
-<script>
-	import { StateHistory, watch } from "runed";
-
-	class Undoable {
-		#idx;
-		#getStates;
-		#states = $derived.by(() => this.#getStates());
-		#current = $derived.by(() => this.#states[this.#idx])
-		#currentLocal = $state()
-
-		constructor(getStates, setStates, initial) {
-			const states = $derived.by(getStates);
-			getStates().push(initial);
-
-			this.#getStates = getStates;
-			this.#currentLocal = initial;
-			this.#idx = getStates().length - 1;
-
-			watch(
-				() => this.#currentLocal,
-				() => {
-					if (this.current === this.#currentLocal) return;
-					// Reassign to trigger state history value tracking
-					setStates(
-						states
-							.slice(0, this.#idx)
-							.concat([this.#currentLocal])
-							.concat(states.slice(this.#idx + 1))
-					);
-				},
-				{ lazy: true }
-			);
-
-			watch(
-				() => this.current,
-				() => {
-					if (this.current === this.#currentLocal) return;
-					this.#currentLocal = this.current;
-				}
-			);
-		}
-
-		get current() {
-			return this.#current;
-		}
-
-		set current(val) {
-			this.#currentLocal = val;
-		}
-	}
-
-    type HistoryStep<T> = (before: T, after: T, setter: (arg: T)=>{});
-	class GlobalHistory extends StateHistory<HistoryStep<any>>{
-		states = $state([]);
-
-		constructor() {
-			super(
-				() => this.states,
-				(v) => (this.states = v)
-			);
-		}
-
-		undoable<T>(initial: T) {
-			return new Undoable(
-				() => this.states,
-				(v: T) => (this.states = v),
-				initial
-			);
-		}
-	}
-
-	// App logic starts here
-	const history = new GlobalHistory();
-	let count1 = history.undoable(0);
-	let count2 = history.undoable(0);
-
diff --git a/src-svelte/src/lib/waypoint.svelte.ts b/src-svelte/src/lib/waypoint.svelte.ts
index 49a83597ab..2c1b865944 100644
--- a/src-svelte/src/lib/waypoint.svelte.ts
+++ b/src-svelte/src/lib/waypoint.svelte.ts
@@ -1,81 +1,68 @@
 // place files you want to import through the `$lib` alias in this folder.
-import { Paths } from "./path.svelte.js";
 import { NavbarItemData } from "./uistate.svelte.js";
-
-export function deletePathWaypoint(pathId: number, wptId: number) {
-    console.log("delete", pathId, wptId);
-    Paths[pathId] = Paths[pathId].filter((id)=>id!=wptId);
-}
+import { Map } from 'svelte/reactivity';
+import type { UndoManager, Signal } from "./util/state.svelte.js";
 
 let WaypointIDCounter = 1;
-export let WaypointSubscribers: Record<number, Waypoint> = {}
+export let WaypointSubscribers = new Map<number, Waypoint>()
 
-export interface IWaypoint {
-    id: number;
-    x: number;
-    y: number;
-    heading: number;
-    isInitialGuess: boolean;
-    translationConstrained: boolean;
-    headingConstrained: boolean;
-    controlIntervalCount: number;
-}
-export class Waypoint implements IWaypoint {
+export class Waypoint {
     id: number;
-    x = $state(0);
-    y = $state(0);
-    heading = $state(0);
-    isInitialGuess = $state(false);
-    translationConstrained = $state(true);
-    headingConstrained = $state(true);
-    controlIntervalCount = $state(40);
+    x: Signal<number>;
+    y: Signal<number>;
+    heading: Signal<number>;
+    isInitialGuess: Signal<boolean>;
+    translationConstrained: Signal<boolean>;
+    headingConstrained: Signal<boolean>;
+    controlIntervalCount: Signal<number>;
     _waypoint_type = $derived(() =>
-        this.isInitialGuess ? 3 :
-        (!this.heading && !this.translationConstrained) ? 2 :
-        (this.translationConstrained && !this.headingConstrained) ? 1 :
+        this.isInitialGuess() ? 3 :
+        (!this.heading() && !this.translationConstrained()) ? 2 :
+        (this.translationConstrained() && !this.headingConstrained()) ? 1 :
         0
     );
     get waypoint_type():number {return this._waypoint_type()}
     _type_name = $derived(NavbarItemData[this.waypoint_type].name);
     get type_name():string {return this._type_name}
-    unreactive() : IWaypoint {
+
+    constructor (createSignal: <T>(arg: T)=>Signal<T>, partial?: Partial<WaypointNoID>) {
+        this.id = ++WaypointIDCounter;
+        this.x = createSignal(partial?.x ?? 0);
+        this.y = createSignal(partial?.y ?? 0);
+        this.heading = createSignal(partial?.heading ?? 0);
+        this.translationConstrained = createSignal(partial?.translationConstrained ?? true);
+        this.headingConstrained = createSignal(partial?.headingConstrained ?? true);
+        this.isInitialGuess = createSignal(partial?.isInitialGuess ?? false);
+        this.controlIntervalCount = createSignal(partial?.controlIntervalCount ?? 40);
+        WaypointSubscribers.set(this.id,this);
+    }
+    snapshot(): WaypointData {
         return {
-            x: this.x,
-            y: this.y,
-            heading: this.heading,
-            isInitialGuess: this.isInitialGuess,
-            translationConstrained: this.translationConstrained,
-            headingConstrained: this.headingConstrained,
-            controlIntervalCount: this.controlIntervalCount,
-            id: this.id
+            id: this.id,
+            x: this.x(),
+            y: this.y(),
+            heading: this.heading(),
+            isInitialGuess: this.isInitialGuess(),
+            translationConstrained: this.translationConstrained(),
+            headingConstrained:this.headingConstrained(),
+            controlIntervalCount:this.controlIntervalCount()
         }
     }
-    constructor (id: number) {
-        this.id = id;
-    }
 }
 
 export function getWaypoint(id: number): Waypoint | undefined {
-        return WaypointSubscribers[id];
+        return WaypointSubscribers.get(id);
 }
 
-export function add_waypoint(partial: Partial<WaypointNoID>) : Waypoint {
-    let id = ++WaypointIDCounter;
-    let newWpt = new Waypoint(id);
-    Object.assign(newWpt, partial);
-     WaypointSubscribers[id] = newWpt;
-    return newWpt;
+export type WaypointData = {
+    id: number,
+    x: number,
+    y: number,
+    heading: number,
+    isInitialGuess: boolean,
+    translationConstrained: boolean,
+    headingConstrained: boolean,
+    controlIntervalCount: number
 }
-
-// export type Waypoint = {
-//     id: number,
-//     x: number,
-//     y: number,
-//     heading: number,
-//     isInitialGuess: boolean,
-//     translationConstrained: boolean,
-//     headingConstrained: boolean,
-//     control_interval_count: number
-// }
-export type WaypointNoID = Omit<IWaypoint, "id">;
+export type WaypointNoID = Omit<WaypointData, "id">;
 
diff --git a/src-svelte/src/routes/paths/[id]/+page.svelte b/src-svelte/src/routes/paths/[id]/+page.svelte
index 66845c4d15..294bc594a9 100644
--- a/src-svelte/src/routes/paths/[id]/+page.svelte
+++ b/src-svelte/src/routes/paths/[id]/+page.svelte
@@ -1,12 +1,14 @@
 <script lang="ts">
     import Field from "$lib/components/field/Field.svelte"
     import Sidebar from "$lib/components/sidebar/Sidebar.svelte"
-    import PathAnimationPanel from "$lib/components/field/PathAnimationPanel.svelte"
+    import PathAnimationPanel from "$lib/graph/PathAnimationPanel.svelte"
     import {Trajectory} from "$lib/trajectory.svelte.js"
-    import { add_path } from "$lib/path.svelte.js";
+    import { add_path, Paths } from "$lib/path.svelte.js";
     let {data} : {data:{id:number}} = $props();
     let id = $derived(data.id);
     $effect.pre(()=>add_path(id));
+    let path = $derived(Paths.get(id));
+    $inspect(path?.snapshot).with(console.trace)
 </script>
 <style>
     .App {
@@ -54,7 +56,7 @@
           height: 0;
           width: 100%;"
       >
-        <Sidebar pathId={id}></Sidebar>
+        <Sidebar {path}></Sidebar>
         <span
             style="
             display: flex;
@@ -63,7 +65,7 @@
             width: 0"
         >
           <!-- <Navbar></Navbar> -->
-          <Field pathId={id}></Field>
+          <Field {path}></Field>
         </span>
       </span>
       <PathAnimationPanel output={Trajectory(id)}></PathAnimationPanel>