From 276feea41aa3b0f0982c2930413d07057d4beeb4 Mon Sep 17 00:00:00 2001
From: Mason Thomas <Kandleseatwicks@gmail.com>
Date: Mon, 24 Mar 2025 22:24:48 -0500
Subject: [PATCH 01/92] erm all the things gabe and i did

Co-authored-by: Gabriel Burbach <gabriel.burbach02@gmail.com>
---
 src/client/debug/debug.tsx      |  9 +++++++++
 src/server/api/api.ts           | 17 ++++++++++++++---
 src/server/api/managers.ts      |  3 +++
 src/server/api/tcp-interface.ts |  9 +++++++--
 src/server/robot/robot.ts       |  5 +++--
 5 files changed, 36 insertions(+), 7 deletions(-)

diff --git a/src/client/debug/debug.tsx b/src/client/debug/debug.tsx
index eeadd893..46342f4d 100644
--- a/src/client/debug/debug.tsx
+++ b/src/client/debug/debug.tsx
@@ -36,6 +36,12 @@ export function Debug() {
         fetchIds();
     }, [setRobotIds]);
 
+    const danceConfigLoad = async () => {
+        const response = await get("/do-parallel");
+        if (!response.ok) {
+            console.warn("Failed to load dance config");
+        }
+    };
     // create the select and move buttons
     let body: ReactNode;
     if (robotIds === undefined) {
@@ -49,6 +55,9 @@ export function Debug() {
                     selectedRobotId={selectedRobotId}
                     onRobotIdSelected={setSelectedRobotId}
                 />
+                <div className="debug-section">
+                    <Button icon="play" minimal onClick={danceConfigLoad} />
+                </div>
                 {selectedRobotId === undefined ? null : (
                     <>
                         <div className="debug-section">
diff --git a/src/server/api/api.ts b/src/server/api/api.ts
index 2c1eb7f5..f15f0ddd 100644
--- a/src/server/api/api.ts
+++ b/src/server/api/api.ts
@@ -13,7 +13,7 @@ import {
     SetRobotVariableMessage,
 } from "../../common/message/robot-message";
 
-import { TCPServer } from "./tcp-interface";
+import { tcpServer } from "./managers";
 import { Difficulty } from "../../common/client-types";
 import { RegisterWebsocketMessage } from "../../common/message/message";
 import { clientManager, robotManager, socketManager } from "./managers";
@@ -33,8 +33,7 @@ import { Position } from "../robot/position";
 import { DEGREE } from "../../common/units";
 import { PacketType } from "../utils/tcp-packet";
 
-export const tcpServer: TCPServer | null =
-    USE_VIRTUAL_ROBOTS ? null : new TCPServer();
+
 export const executor = new CommandExecutor();
 
 export let gameManager: GameManager | null = null;
@@ -206,6 +205,18 @@ apiRouter.get("/do-smth", async (_, res) => {
     res.send({ message: "success" });
 });
 
+apiRouter.get("/do-parallel", async (_, res) => {
+    console.log("Starting parallel command group");
+    const robotsEntries = Array.from(robotManager.idsToRobots.entries());
+    console.log(robotsEntries);
+    for (const [, robot] of robotsEntries) {
+        console.log("Moving robot " + robot.id);
+        await robot.sendDrivePacket(1);
+    }
+
+    res.send({ message: "success" });
+});
+
 /**
  * get the current state of the virtual robots for the simulator
  */
diff --git a/src/server/api/managers.ts b/src/server/api/managers.ts
index 697ecb39..40992015 100644
--- a/src/server/api/managers.ts
+++ b/src/server/api/managers.ts
@@ -7,9 +7,12 @@ import { ClientManager } from "./client-manager";
 import { SocketManager } from "./socket-manager";
 import { virtualRobots } from "../simulator";
 import { USE_VIRTUAL_ROBOTS } from "../utils/env";
+import { TCPServer } from "./tcp-interface";
 
 export const socketManager = new SocketManager({});
 export const clientManager = new ClientManager(socketManager);
 export const robotManager = new RobotManager(
     USE_VIRTUAL_ROBOTS ? Array.from(virtualRobots.values()) : [],
 );
+export const tcpServer: TCPServer | null =
+    USE_VIRTUAL_ROBOTS ? null : new TCPServer({},robotManager);
diff --git a/src/server/api/tcp-interface.ts b/src/server/api/tcp-interface.ts
index fdd6d008..8e847f6c 100644
--- a/src/server/api/tcp-interface.ts
+++ b/src/server/api/tcp-interface.ts
@@ -9,6 +9,7 @@ import {
 } from "../utils/tcp-packet";
 import { EventEmitter } from "@posva/event-emitter";
 import { randomUUID } from "node:crypto";
+import { RobotManager } from "../robot/robot-manager";
 
 type RobotEventEmitter = EventEmitter<{
     actionComplete: {
@@ -288,6 +289,7 @@ export class BotTunnel {
  */
 export class TCPServer {
     private server: net.Server;
+    priv;
 
     /**
      * creates a tcp server on port from server config and registers passed in ids with their corresponding bot tunnels
@@ -296,7 +298,10 @@ export class TCPServer {
      *
      * @param connections - bot connections in a id:BotTunnel array
      */
-    constructor(private connections: { [id: string]: BotTunnel } = {}) {
+    constructor(
+        private connections: { [id: string]: BotTunnel } = {},
+        private robotManager: RobotManager,
+    ) {
         this.server = net.createServer();
         this.server.on("connection", this.handleConnection.bind(this));
         this.server.listen(config["tcpServerPort"], () => {
@@ -317,7 +322,6 @@ export class TCPServer {
     private handleConnection(socket: net.Socket) {
         const remoteAddress = socket.remoteAddress + ":" + socket.remotePort;
         console.log("New client connection from %s", remoteAddress);
-
         socket.setNoDelay(true);
 
         // create a new bot tunnel for the connection
@@ -336,6 +340,7 @@ export class TCPServer {
                     config["bots"][mac] = id;
                 } else {
                     id = config["bots"][mac];
+                    this.robotManager.addRobot(this.robotManager.getRobot(id));
                     console.log("Found address ID: " + id);
                 }
                 tunnel.id = id;
diff --git a/src/server/robot/robot.ts b/src/server/robot/robot.ts
index 50ddce0a..adda5925 100644
--- a/src/server/robot/robot.ts
+++ b/src/server/robot/robot.ts
@@ -1,7 +1,7 @@
 import { FULL_ROTATION, RADIAN, clampHeading } from "../../common/units";
 import { Position, ZERO_POSITION } from "./position";
 import { GridIndices } from "./grid-indices";
-import { tcpServer } from "../api/api";
+import { tcpServer } from "../api/managers";
 import type { BotTunnel } from "../api/tcp-interface";
 import { PacketType } from "../utils/tcp-packet";
 
@@ -112,6 +112,7 @@ export class Robot {
      */
     public async sendDrivePacket(tileDistance: number): Promise<void> {
         const tunnel = this.getTunnel();
-        await tunnel.send({ type: PacketType.DRIVE_TILES, tileDistance });
+        console.log(tileDistance);
+        await tunnel.send({ type: PacketType.DRIVE_TANK, left: 1, right: 1 });
     }
 }

From 119c01e09f57868411be3f9101f9c65b3188e3ac Mon Sep 17 00:00:00 2001
From: democat <cwongmath@gmail.com>
Date: Tue, 25 Mar 2025 15:39:06 -0500
Subject: [PATCH 02/92] format

---
 src/server/api/api.ts      | 1 -
 src/server/api/managers.ts | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/server/api/api.ts b/src/server/api/api.ts
index f15f0ddd..ba53e6da 100644
--- a/src/server/api/api.ts
+++ b/src/server/api/api.ts
@@ -33,7 +33,6 @@ import { Position } from "../robot/position";
 import { DEGREE } from "../../common/units";
 import { PacketType } from "../utils/tcp-packet";
 
-
 export const executor = new CommandExecutor();
 
 export let gameManager: GameManager | null = null;
diff --git a/src/server/api/managers.ts b/src/server/api/managers.ts
index 40992015..f644a9f0 100644
--- a/src/server/api/managers.ts
+++ b/src/server/api/managers.ts
@@ -15,4 +15,4 @@ export const robotManager = new RobotManager(
     USE_VIRTUAL_ROBOTS ? Array.from(virtualRobots.values()) : [],
 );
 export const tcpServer: TCPServer | null =
-    USE_VIRTUAL_ROBOTS ? null : new TCPServer({},robotManager);
+    USE_VIRTUAL_ROBOTS ? null : new TCPServer({}, robotManager);

From a20818117196d322a51282250f9a07da0226e066 Mon Sep 17 00:00:00 2001
From: Jason Antwi-Appah <hey@jasonaa.me>
Date: Sat, 8 Mar 2025 00:28:13 -0600
Subject: [PATCH 03/92] Extract robot grid component on simulator page

---
 src/client/debug/simulator.tsx | 85 ++++++++++++++++++----------------
 1 file changed, 44 insertions(+), 41 deletions(-)

diff --git a/src/client/debug/simulator.tsx b/src/client/debug/simulator.tsx
index 4c6d628b..3d37fd4e 100644
--- a/src/client/debug/simulator.tsx
+++ b/src/client/debug/simulator.tsx
@@ -25,16 +25,17 @@ const tileSize = 60;
 const robotSize = tileSize / 2;
 const cellCount = 12;
 
+type RobotState = { [robotId: string]: SimulatedRobotLocation };
+
 /**
  * Creates a robot simulator for testing robot commands
  *
  * does not require physical robots to be connected
  * @returns the simulator screen as a card
- */
+*/
 export function Simulator() {
     const navigate = useNavigate();
 
-    type RobotState = { [robotId: string]: SimulatedRobotLocation };
 
     type Action =
         | { type: "SET_ALL_ROBOTS"; payload: RobotState }
@@ -150,45 +151,7 @@ export function Simulator() {
                 </Button>
             </div>
             <div style={{ display: "flex", gap: "1rem", width: "95vw" }}>
-                <div
-                    style={{
-                        display: "grid",
-                        gridTemplateColumns: `repeat(${cellCount}, ${tileSize}px)`,
-                        gridTemplateRows: `repeat(${cellCount}, ${tileSize}px)`,
-                        position: "relative",
-                    }}
-                >
-                    {new Array(cellCount * cellCount)
-                        .fill(undefined)
-                        .map((_, i) => {
-                            const row = Math.floor(i / cellCount);
-                            const col = i % cellCount;
-                            const isCenterCell =
-                                row >= 2 && row < 10 && col >= 2 && col < 10;
-                            return (
-                                <div
-                                    key={i}
-                                    style={{
-                                        borderWidth: "1px",
-                                        borderStyle: "solid",
-                                        borderColor: simBorderColor(),
-                                        backgroundColor:
-                                            !isCenterCell ? simRingCellColor()
-                                            :   "transparent",
-                                    }}
-                                />
-                            );
-                        })}
-                    {/* TODO: implement onTopOfRobots */}
-                    {Object.entries(robotState).map(([robotId, pos]) => (
-                        <Robot
-                            pos={pos}
-                            robotId={robotId}
-                            key={robotId}
-                            onTopOfRobots={[]}
-                        />
-                    ))}
-                </div>
+                <RobotGrid robotState={robotState} />
                 <div
                     style={{
                         width: "100%",
@@ -239,6 +202,46 @@ const openInEditor = async (frame: StackFrame) => {
     await fetch(`/__open-in-editor?${params.toString()}`);
 };
 
+function RobotGrid({robotState}: {robotState: RobotState}) {
+    return <div
+        style={{
+            display: "grid",
+            gridTemplateColumns: `repeat(${cellCount}, ${tileSize}px)`,
+            gridTemplateRows: `repeat(${cellCount}, ${tileSize}px)`,
+            position: "relative",
+        }}
+    >
+        {new Array(cellCount * cellCount)
+            .fill(undefined)
+            .map((_, i) => {
+                const row = Math.floor(i / cellCount);
+                const col = i % cellCount;
+                const isCenterCell = row >= 2 && row < 10 && col >= 2 && col < 10;
+                return (
+                    <div
+                        key={i}
+                        style={{
+                            borderWidth: "1px",
+                            borderStyle: "solid",
+                            borderColor: simBorderColor(),
+                            backgroundColor:
+                                !isCenterCell ? simRingCellColor()
+                                :   "transparent",
+                        }}
+                    />
+                );
+            })}
+        {/* TODO: implement onTopOfRobots */}
+        {Object.entries(robotState).map(([robotId, pos]) => (
+            <Robot
+                pos={pos}
+                robotId={robotId}
+                key={robotId}
+                onTopOfRobots={[]} />
+        ))}
+    </div>;
+}
+
 /**
  * the message log, used to show the commands sent to the robot
  * @param props - the message and time

From e6eb8d02bde12d601d7e057179625197d8d37547 Mon Sep 17 00:00:00 2001
From: Jason Antwi-Appah <hey@jasonaa.me>
Date: Tue, 11 Mar 2025 03:49:52 -0500
Subject: [PATCH 04/92] Stuff

---
 src/client/debug/simulator.tsx |  4 +--
 src/client/editor/editor.tsx   | 49 ++++++++++++++++++++++++++++++++++
 src/client/main.tsx            |  4 +++
 src/client/package.json        |  4 ++-
 src/client/router.tsx          |  5 ++++
 yarn.lock                      | 26 ++++++++++++++++++
 6 files changed, 89 insertions(+), 3 deletions(-)
 create mode 100644 src/client/editor/editor.tsx

diff --git a/src/client/debug/simulator.tsx b/src/client/debug/simulator.tsx
index 3d37fd4e..a715a629 100644
--- a/src/client/debug/simulator.tsx
+++ b/src/client/debug/simulator.tsx
@@ -25,7 +25,7 @@ const tileSize = 60;
 const robotSize = tileSize / 2;
 const cellCount = 12;
 
-type RobotState = { [robotId: string]: SimulatedRobotLocation };
+export type RobotState = { [robotId: string]: SimulatedRobotLocation };
 
 /**
  * Creates a robot simulator for testing robot commands
@@ -202,7 +202,7 @@ const openInEditor = async (frame: StackFrame) => {
     await fetch(`/__open-in-editor?${params.toString()}`);
 };
 
-function RobotGrid({robotState}: {robotState: RobotState}) {
+export function RobotGrid({robotState}: {robotState: RobotState}) {
     return <div
         style={{
             display: "grid",
diff --git a/src/client/editor/editor.tsx b/src/client/editor/editor.tsx
new file mode 100644
index 00000000..1d1a745a
--- /dev/null
+++ b/src/client/editor/editor.tsx
@@ -0,0 +1,49 @@
+import { useMemo, useState } from "react";
+import { RobotGrid, type RobotState } from "../debug/simulator";
+import { getProject, types } from "@theatre/core";
+
+const robottype = {bezierpoint: types.compound({
+  x: types.number(0, {range: [0, 60 * 12]}),
+  y: types.number(0, {range: [0, 60 * 12]}),
+  headingRadians: types.number(0, {range: [-Math.PI, Math.PI]}),
+})}
+
+const demoSheet = getProject('Chess Bots').sheet('Routine')
+export function Editor() {
+    const [robotCount, setRobotCount] = useState(0);
+    
+    const robotState = () => {
+        const output: RobotState = {};
+        for (let robotIndex = 0; robotIndex < robotCount; robotIndex++) {
+            const robotId = `robot-${robotIndex}`;
+            const obj = demoSheet.__experimental_getExistingObject<typeof robottype>(robotId);
+            if (!obj) {
+                console.warn(`Could not find robot ${robotId}`);
+                continue;
+            }
+            
+            const bp = obj.value.bezierpoint;
+            output[robotId] = {
+                position: {
+                    x: bp.x,
+                    y: bp.y,
+                },
+                headingRadians: bp.headingRadians,
+            }
+            
+        }
+        return output;
+    }
+
+    const [rs, setRs] = useState<RobotState>(robotState());
+    
+    return (
+        <div>
+        <RobotGrid robotState={rs} />
+        <button onClick={()=>{
+            demoSheet.object('robot-' + robotCount, robottype)
+            setRobotCount(rc => rc + 1);
+        }}>Add Robot</button>
+    </div>
+    );
+}
\ No newline at end of file
diff --git a/src/client/main.tsx b/src/client/main.tsx
index ae399943..ec946310 100644
--- a/src/client/main.tsx
+++ b/src/client/main.tsx
@@ -14,6 +14,10 @@ export const queryClient = new QueryClient();
 
 FocusStyleManager.onlyShowFocusOnTabs();
 
+import studio from '@theatre/studio'
+
+studio.initialize()
+
 //creates the root of the page and forwards control to the page router
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
     <>
diff --git a/src/client/package.json b/src/client/package.json
index ff946077..fe6afcfa 100644
--- a/src/client/package.json
+++ b/src/client/package.json
@@ -12,7 +12,9 @@
         "react-joystick-component": "^6.2.1",
         "react-router-dom": "^6.21.3",
         "react-use-websocket": "^4.5.0",
-        "scss": "^0.2.4"
+        "scss": "^0.2.4",
+        "@theatre/core": "^0.7.2",
+        "@theatre/studio": "^0.7.2"
     },
     "devDependencies": {
         "@types/react": "^18.2.48",
diff --git a/src/client/router.tsx b/src/client/router.tsx
index b282a82f..247a8ff7 100644
--- a/src/client/router.tsx
+++ b/src/client/router.tsx
@@ -7,6 +7,7 @@ import { Lobby } from "./setup/lobby";
 import { Home } from "./home";
 import { Debug2 } from "./debug/debug2";
 import { Simulator } from "./debug/simulator";
+import { Editor } from "./editor/editor";
 
 export const router = createBrowserRouter([
     {
@@ -41,4 +42,8 @@ export const router = createBrowserRouter([
         path: "/game",
         element: <Game />,
     },
+    {
+        path: "/editor",
+        element: <Editor />,
+    },
 ]);
diff --git a/yarn.lock b/yarn.lock
index 98ee2423..389cee19 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -796,6 +796,27 @@
   dependencies:
     "@tanstack/query-core" "5.29.0"
 
+"@theatre/core@^0.7.2":
+  version "0.7.2"
+  resolved "https://registry.yarnpkg.com/@theatre/core/-/core-0.7.2.tgz#540a6c3ab80c6ce835b5a284694baf3291222c42"
+  integrity sha512-IDQa/6WY7mIJAtsSd4EgNcM0IUZkl+FrqZ8DdYiCVTFap9ARDNmrngJOeFjJOsnnaHlc5GdEB/jj7fsjbIrAzQ==
+  dependencies:
+    "@theatre/dataverse" "0.7.2"
+
+"@theatre/dataverse@0.7.2":
+  version "0.7.2"
+  resolved "https://registry.yarnpkg.com/@theatre/dataverse/-/dataverse-0.7.2.tgz#25aafe9fe781661939aa991dd46079e0fe4cfd18"
+  integrity sha512-YyfoyX7EyhFUY2OM5fsM0LPrs1SdgLwpiTMkkvTIoZLdOwvQhstjYq4Yz/8ZncJlRoTWvakfmgvCaBN+QuBYxg==
+  dependencies:
+    lodash-es "^4.17.21"
+
+"@theatre/studio@^0.7.2":
+  version "0.7.2"
+  resolved "https://registry.yarnpkg.com/@theatre/studio/-/studio-0.7.2.tgz#287b148c17d7799955199dd6b90c59c876746eaf"
+  integrity sha512-p6LTKzJWVlcHkpGzIlNHh9AkGbB3E+0q9Pjxv+OJoTDe1IK+CMKW695Wp+1//lB4vfC9qShe4z/p+Zaj1q8KtA==
+  dependencies:
+    "@theatre/dataverse" "0.7.2"
+
 "@tsconfig/node10@^1.0.7":
   version "1.0.9"
   resolved "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.9.tgz"
@@ -2342,6 +2363,11 @@ locate-path@^6.0.0:
   dependencies:
     p-locate "^5.0.0"
 
+lodash-es@^4.17.21:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
+  integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
+
 lodash.merge@^4.6.2:
   version "4.6.2"
   resolved "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz"

From 4be96607f7aad39c6bce823b02f5fdcfcb099dbf Mon Sep 17 00:00:00 2001
From: Jason Antwi-Appah <hey@jasonaa.me>
Date: Tue, 25 Mar 2025 03:44:53 -0500
Subject: [PATCH 05/92] Rough spline editor UI

---
 src/client/debug/simulator.tsx |  32 ++--
 src/client/editor/editor.tsx   | 291 ++++++++++++++++++++++++++++-----
 src/client/main.tsx            |   3 -
 src/common/spline.ts           |  72 ++++++++
 4 files changed, 336 insertions(+), 62 deletions(-)
 create mode 100644 src/common/spline.ts

diff --git a/src/client/debug/simulator.tsx b/src/client/debug/simulator.tsx
index a715a629..8eda4e89 100644
--- a/src/client/debug/simulator.tsx
+++ b/src/client/debug/simulator.tsx
@@ -22,7 +22,7 @@ import {
 } from "../check-dark-mode";
 
 const tileSize = 60;
-const robotSize = tileSize / 2;
+export const robotSize = tileSize / 2;
 const cellCount = 12;
 
 export type RobotState = { [robotId: string]: SimulatedRobotLocation };
@@ -32,7 +32,7 @@ export type RobotState = { [robotId: string]: SimulatedRobotLocation };
  *
  * does not require physical robots to be connected
  * @returns the simulator screen as a card
-*/
+ */
 export function Simulator() {
     const navigate = useNavigate();
 
@@ -204,13 +204,13 @@ const openInEditor = async (frame: StackFrame) => {
 
 export function RobotGrid({robotState}: {robotState: RobotState}) {
     return <div
-        style={{
-            display: "grid",
-            gridTemplateColumns: `repeat(${cellCount}, ${tileSize}px)`,
-            gridTemplateRows: `repeat(${cellCount}, ${tileSize}px)`,
-            position: "relative",
-        }}
-    >
+            style={{
+                display: "grid",
+                gridTemplateColumns: `repeat(${cellCount}, ${tileSize}px)`,
+                gridTemplateRows: `repeat(${cellCount}, ${tileSize}px)`,
+                position: "relative",
+            }}
+        >
         {new Array(cellCount * cellCount)
             .fill(undefined)
             .map((_, i) => {
@@ -231,14 +231,14 @@ export function RobotGrid({robotState}: {robotState: RobotState}) {
                     />
                 );
             })}
-        {/* TODO: implement onTopOfRobots */}
-        {Object.entries(robotState).map(([robotId, pos]) => (
-            <Robot
-                pos={pos}
-                robotId={robotId}
-                key={robotId}
+            {/* TODO: implement onTopOfRobots */}
+            {Object.entries(robotState).map(([robotId, pos]) => (
+                <Robot
+                    pos={pos}
+                    robotId={robotId}
+                    key={robotId}
                 onTopOfRobots={[]} />
-        ))}
+            ))}
     </div>;
 }
 
diff --git a/src/client/editor/editor.tsx b/src/client/editor/editor.tsx
index 1d1a745a..51a58b94 100644
--- a/src/client/editor/editor.tsx
+++ b/src/client/editor/editor.tsx
@@ -1,49 +1,254 @@
-import { useMemo, useState } from "react";
-import { RobotGrid, type RobotState } from "../debug/simulator";
-import { getProject, types } from "@theatre/core";
-
-const robottype = {bezierpoint: types.compound({
-  x: types.number(0, {range: [0, 60 * 12]}),
-  y: types.number(0, {range: [0, 60 * 12]}),
-  headingRadians: types.number(0, {range: [-Math.PI, Math.PI]}),
-})}
-
-const demoSheet = getProject('Chess Bots').sheet('Routine')
+import {
+    RefObject,
+    useEffect,
+    useMemo,
+    useReducer,
+    useRef,
+} from "react";
+import { ContextMenu, Menu, MenuItem, MenuDivider } from "@blueprintjs/core";
+import {
+    Coords,
+Point,
+    Spline,
+    SplinePointType,
+    splineToSvgDrawAttribute,
+} from "../../common/spline";
+import { RobotGrid, robotSize } from "../debug/simulator";
 export function Editor() {
-    const [robotCount, setRobotCount] = useState(0);
-    
-    const robotState = () => {
-        const output: RobotState = {};
-        for (let robotIndex = 0; robotIndex < robotCount; robotIndex++) {
-            const robotId = `robot-${robotIndex}`;
-            const obj = demoSheet.__experimental_getExistingObject<typeof robottype>(robotId);
-            if (!obj) {
-                console.warn(`Could not find robot ${robotId}`);
-                continue;
-            }
-            
-            const bp = obj.value.bezierpoint;
-            output[robotId] = {
-                position: {
-                    x: bp.x,
-                    y: bp.y,
-                },
-                headingRadians: bp.headingRadians,
-            }
-            
-        }
-        return output;
-    }
-
-    const [rs, setRs] = useState<RobotState>(robotState());
     
     return (
         <div>
-        <RobotGrid robotState={rs} />
-        <button onClick={()=>{
-            demoSheet.object('robot-' + robotCount, robottype)
-            setRobotCount(rc => rc + 1);
-        }}>Add Robot</button>
+
+
+        <RobotGrid robotState={{}} />
+        <SplineEditor
+                initialSpline={{
+                    start: {
+                        type: SplinePointType.StartPoint,
+                        point: {
+                            x: 0,
+                            y: 70,
+                        },
+                    },
+                    points: [
+                        {
+                            type: SplinePointType.QuadraticBezier,
+                            endPoint: { x: 100, y: 100 },
+                        },
+                        {
+                            type: SplinePointType.QuadraticBezier,
+                            endPoint: { x: 315, y: 50 },
+                        },
+                        {
+                            type: SplinePointType.QuadraticBezier,
+                            endPoint: { x: 70, y: 70 },
+                        },
+                    ],
+                }}
+            />
+        
     </div>
     );
-}
\ No newline at end of file
+}
+
+function SplineEditor({ initialSpline }: { initialSpline: Spline }) {
+    type SplineEditorAction =
+        | { type: "DELETE_POINT"; index: number }
+        | { type: "DELETE_START_POINT" }
+        | { type: "MOVE_POINT_ENDPOINT"; coords: Coords; index: number }
+        | { type: "MOVE_START_POINT"; coords: Coords };
+
+    const [spline, dispatch] = useReducer(
+        (state: Spline, action: SplineEditorAction): Spline => {
+            switch (action.type) {
+                case "DELETE_POINT": {
+                    return {
+                        ...state,
+                        points: state.points.toSpliced(action.index, 1),
+                    };
+                }
+                case "DELETE_START_POINT": {
+                    if (state.points.length === 0) return state;
+                    return {
+                        ...state,
+                        start: {
+                            type: SplinePointType.StartPoint,
+                            point: state.points[0].endPoint,
+                        },
+                        points: state.points.slice(1),
+                    };
+                }
+                case "MOVE_POINT_ENDPOINT": {
+                    const newPoints = [...state.points];
+                    newPoints[action.index].endPoint = action.coords;
+                    return { ...state, points: newPoints };
+                }
+                case "MOVE_START_POINT": {
+                    return {
+                        ...state,
+                        start: {
+                            type: SplinePointType.StartPoint,
+                            point: action.coords,
+                        },
+                    };
+                }
+            }
+
+            return state;
+        },
+        initialSpline,
+    );
+    const path = useMemo(() => splineToSvgDrawAttribute(spline), [spline]);
+    return (
+        <>
+            <svg
+                style={{
+                    position: "absolute",
+                    left: 0,
+                    top: 0,
+                    width: "100%",
+                    height: "100%",
+                    pointerEvents: "none",
+                }}
+            >
+                <path d={path} stroke={"purple"} strokeWidth={5} fill="none" />
+            </svg>
+            <SplinePoint
+                point={spline.start}
+                deleteFn={
+                    spline.points.length > 0 ?
+                        () => dispatch({ type: "DELETE_START_POINT" })
+                    :   undefined
+                }
+                moveFn={(x, y) =>
+                    dispatch({ type: "MOVE_START_POINT", coords: { x, y } })
+                }
+            />
+            {spline.points.map((point, index) => (
+                <SplinePoint
+                    point={point}
+                    deleteFn={() => dispatch({ type: "DELETE_POINT", index })}
+                    moveFn={(x, y) =>
+                        dispatch({
+                            type: "MOVE_POINT_ENDPOINT",
+                            coords: { x, y },
+                            index,
+                        })
+                    }
+                />
+            ))}
+        </>
+    );
+}
+
+function SplinePoint({
+    point,
+    moveFn,
+    deleteFn = undefined,
+}: {
+    point: Point;
+    moveFn: (x: number, y: number) => void;
+    deleteFn?: () => void;
+}) {
+    // TODO: fix context menu positioning
+    // TODO: implement remaining context menu methods
+
+    const ref = useRef<HTMLElement>(null);
+    useDraggable(ref, (screenX, screenY)=>moveFn(screenX + robotSize / 4, screenY + robotSize / 4));
+
+    const mainPointColor =
+        point.type === SplinePointType.StartPoint ? "blue" : "black";
+    const mainCoords =
+        point.type === SplinePointType.StartPoint ?
+            point.point
+        :   point.endPoint;
+
+    return (
+        <ContextMenu
+            content={
+                <Menu>
+                    {point.type === SplinePointType.CubicBezier && (
+                        <MenuItem text="Switch to Quadratic" />
+                    )}
+                    {point.type === SplinePointType.QuadraticBezier && (
+                        <MenuItem text="Switch to Cubic" />
+                    )}
+                    <MenuItem
+                        text="Delete..."
+                        intent="danger"
+                        onClick={deleteFn ?? undefined}
+                        disabled={!deleteFn}
+                    />
+                    <MenuDivider />
+                    <MenuItem disabled={true} text={`Type: ${point.type}`} />
+                </Menu>
+            }
+        >
+            <span
+                ref={ref}
+                style={{
+                    width: robotSize / 2,
+                    height: robotSize / 2,
+                    backgroundColor: mainPointColor,
+                    borderRadius: "50%",
+                    position: "absolute",
+                    left: mainCoords.x - robotSize / 4,
+                    top: mainCoords.y - robotSize / 4,
+                    cursor: "grab",
+                }}
+            />
+        </ContextMenu>
+    );
+}
+
+
+
+function useDraggable(
+    elRef: RefObject<HTMLElement>,
+    updatePosition: (screenX: number, screenY: number) => void,
+) {
+    useEffect(() => {
+        const el = elRef.current;
+        if (!el) return;
+
+        let pos1 = 0,
+            pos2 = 0,
+            pos3 = 0,
+            pos4 = 0;
+
+        const onMouseDown = (e) => {
+            e.preventDefault();
+            // get the mouse cursor position at startup:
+            pos3 = e.clientX;
+            pos4 = e.clientY;
+            document.onmouseup = closeDragElement;
+            // call a fn whenever the cursor moves:
+            document.onmousemove = elementDrag;
+        }
+
+        const elementDrag = (e) => {
+            e.preventDefault();
+            pos1 = pos3 - e.clientX;
+            pos2 = pos4 - e.clientY;
+            pos3 = e.clientX;
+            pos4 = e.clientY;
+            const x = el.offsetLeft - pos1
+            const y = el.offsetTop - pos2
+            updatePosition(x,y)
+        }
+
+        const closeDragElement = () => {
+            document.onmouseup = null;
+            document.onmousemove = null;
+        }
+
+
+        el.addEventListener("mousedown", onMouseDown)
+
+        return () => {
+            el.removeEventListener("mousedown", onMouseDown);
+            document.removeEventListener("mousemove", elementDrag);
+            document.removeEventListener("mouseup", closeDragElement);
+        };
+    }, [elRef, updatePosition]);
+}
diff --git a/src/client/main.tsx b/src/client/main.tsx
index ec946310..3e18e8b8 100644
--- a/src/client/main.tsx
+++ b/src/client/main.tsx
@@ -14,9 +14,6 @@ export const queryClient = new QueryClient();
 
 FocusStyleManager.onlyShowFocusOnTabs();
 
-import studio from '@theatre/studio'
-
-studio.initialize()
 
 //creates the root of the page and forwards control to the page router
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
diff --git a/src/common/spline.ts b/src/common/spline.ts
new file mode 100644
index 00000000..e8cb74fd
--- /dev/null
+++ b/src/common/spline.ts
@@ -0,0 +1,72 @@
+import {
+    Number as NumberType,
+    Record,
+    Union,
+    Array,
+    Literal,
+    Static,
+} from "runtypes";
+
+export enum SplinePointType {
+    StartPoint = "start",
+    CubicBezier = "cubic",
+    QuadraticBezier = "quadratic",
+}
+
+export const CoordsSchema = Record({
+    x: NumberType,
+    y: NumberType,
+});
+export type Coords = Static<typeof CoordsSchema>
+
+export const StartPointSchema = Record({
+    type: Literal(SplinePointType.StartPoint),
+    point: CoordsSchema,
+});
+export type StartPointSchema = Static<typeof StartPointSchema>;
+
+export const CubicBezierSchema = Record({
+    type: Literal(SplinePointType.CubicBezier),
+    controlPoint: CoordsSchema,
+    endPoint: CoordsSchema,
+});
+
+export const QuadraticBezierSchema = Record({
+    type: Literal(SplinePointType.QuadraticBezier),
+    endPoint: CoordsSchema,
+});
+
+const Midpoint = Union(CubicBezierSchema, QuadraticBezierSchema);
+export type Midpoint = Static<typeof Midpoint>;
+
+export const Spline = Record({
+    start: StartPointSchema,
+    points: Array(Midpoint),
+});
+export type Spline = Static<typeof Spline>;
+
+export const PointSchema = Union(
+    StartPointSchema,
+    CubicBezierSchema,
+    QuadraticBezierSchema,
+);
+export type Point = Static<typeof PointSchema>;
+
+function pointToSvgPathCommand(point: Point): string {
+    switch (point.type) {
+        case SplinePointType.StartPoint:
+            return `M${point.point.x},${point.point.y}`;
+        case SplinePointType.CubicBezier:
+            return `S${point.controlPoint.x},${point.controlPoint.y} ${point.endPoint.x},${point.endPoint.y}`;
+        case SplinePointType.QuadraticBezier:
+            return `T${point.endPoint.x},${point.endPoint.y}`;
+    }
+}
+
+export function splineToSvgDrawAttribute(spline: Spline): string {
+    let path = pointToSvgPathCommand(spline.start);
+    for (const point of spline.points) {
+        path += ` ${pointToSvgPathCommand(point)}`;
+    }
+    return path;
+}

From 23eebe97611953f6cb0a9e0dde115216c211fd0c Mon Sep 17 00:00:00 2001
From: Jason Antwi-Appah <hey@jasonaa.me>
Date: Tue, 25 Mar 2025 03:49:45 -0500
Subject: [PATCH 06/92] Format

---
 src/client/debug/simulator.tsx | 24 +++++++++++---------
 src/client/editor/editor.tsx   | 41 +++++++++++++---------------------
 src/client/main.tsx            |  1 -
 src/common/spline.ts           |  2 +-
 4 files changed, 29 insertions(+), 39 deletions(-)

diff --git a/src/client/debug/simulator.tsx b/src/client/debug/simulator.tsx
index 8eda4e89..d6e667e6 100644
--- a/src/client/debug/simulator.tsx
+++ b/src/client/debug/simulator.tsx
@@ -36,7 +36,6 @@ export type RobotState = { [robotId: string]: SimulatedRobotLocation };
 export function Simulator() {
     const navigate = useNavigate();
 
-
     type Action =
         | { type: "SET_ALL_ROBOTS"; payload: RobotState }
         | {
@@ -202,8 +201,9 @@ const openInEditor = async (frame: StackFrame) => {
     await fetch(`/__open-in-editor?${params.toString()}`);
 };
 
-export function RobotGrid({robotState}: {robotState: RobotState}) {
-    return <div
+export function RobotGrid({ robotState }: { robotState: RobotState }) {
+    return (
+        <div
             style={{
                 display: "grid",
                 gridTemplateColumns: `repeat(${cellCount}, ${tileSize}px)`,
@@ -211,12 +211,11 @@ export function RobotGrid({robotState}: {robotState: RobotState}) {
                 position: "relative",
             }}
         >
-        {new Array(cellCount * cellCount)
-            .fill(undefined)
-            .map((_, i) => {
+            {new Array(cellCount * cellCount).fill(undefined).map((_, i) => {
                 const row = Math.floor(i / cellCount);
                 const col = i % cellCount;
-                const isCenterCell = row >= 2 && row < 10 && col >= 2 && col < 10;
+                const isCenterCell =
+                    row >= 2 && row < 10 && col >= 2 && col < 10;
                 return (
                     <div
                         key={i}
@@ -225,8 +224,9 @@ export function RobotGrid({robotState}: {robotState: RobotState}) {
                             borderStyle: "solid",
                             borderColor: simBorderColor(),
                             backgroundColor:
-                                !isCenterCell ? simRingCellColor()
-                                :   "transparent",
+                                !isCenterCell ? simRingCellColor() : (
+                                    "transparent"
+                                ),
                         }}
                     />
                 );
@@ -237,9 +237,11 @@ export function RobotGrid({robotState}: {robotState: RobotState}) {
                     pos={pos}
                     robotId={robotId}
                     key={robotId}
-                onTopOfRobots={[]} />
+                    onTopOfRobots={[]}
+                />
             ))}
-    </div>;
+        </div>
+    );
 }
 
 /**
diff --git a/src/client/editor/editor.tsx b/src/client/editor/editor.tsx
index 51a58b94..201d1d72 100644
--- a/src/client/editor/editor.tsx
+++ b/src/client/editor/editor.tsx
@@ -1,27 +1,18 @@
-import {
-    RefObject,
-    useEffect,
-    useMemo,
-    useReducer,
-    useRef,
-} from "react";
+import { RefObject, useEffect, useMemo, useReducer, useRef } from "react";
 import { ContextMenu, Menu, MenuItem, MenuDivider } from "@blueprintjs/core";
 import {
     Coords,
-Point,
+    Point,
     Spline,
     SplinePointType,
     splineToSvgDrawAttribute,
 } from "../../common/spline";
 import { RobotGrid, robotSize } from "../debug/simulator";
 export function Editor() {
-    
     return (
         <div>
-
-
-        <RobotGrid robotState={{}} />
-        <SplineEditor
+            <RobotGrid robotState={{}} />
+            <SplineEditor
                 initialSpline={{
                     start: {
                         type: SplinePointType.StartPoint,
@@ -46,8 +37,7 @@ export function Editor() {
                     ],
                 }}
             />
-        
-    </div>
+        </div>
     );
 }
 
@@ -154,7 +144,9 @@ function SplinePoint({
     // TODO: implement remaining context menu methods
 
     const ref = useRef<HTMLElement>(null);
-    useDraggable(ref, (screenX, screenY)=>moveFn(screenX + robotSize / 4, screenY + robotSize / 4));
+    useDraggable(ref, (screenX, screenY) =>
+        moveFn(screenX + robotSize / 4, screenY + robotSize / 4),
+    );
 
     const mainPointColor =
         point.type === SplinePointType.StartPoint ? "blue" : "black";
@@ -201,8 +193,6 @@ function SplinePoint({
     );
 }
 
-
-
 function useDraggable(
     elRef: RefObject<HTMLElement>,
     updatePosition: (screenX: number, screenY: number) => void,
@@ -224,7 +214,7 @@ function useDraggable(
             document.onmouseup = closeDragElement;
             // call a fn whenever the cursor moves:
             document.onmousemove = elementDrag;
-        }
+        };
 
         const elementDrag = (e) => {
             e.preventDefault();
@@ -232,18 +222,17 @@ function useDraggable(
             pos2 = pos4 - e.clientY;
             pos3 = e.clientX;
             pos4 = e.clientY;
-            const x = el.offsetLeft - pos1
-            const y = el.offsetTop - pos2
-            updatePosition(x,y)
-        }
+            const x = el.offsetLeft - pos1;
+            const y = el.offsetTop - pos2;
+            updatePosition(x, y);
+        };
 
         const closeDragElement = () => {
             document.onmouseup = null;
             document.onmousemove = null;
-        }
-
+        };
 
-        el.addEventListener("mousedown", onMouseDown)
+        el.addEventListener("mousedown", onMouseDown);
 
         return () => {
             el.removeEventListener("mousedown", onMouseDown);
diff --git a/src/client/main.tsx b/src/client/main.tsx
index 3e18e8b8..ae399943 100644
--- a/src/client/main.tsx
+++ b/src/client/main.tsx
@@ -14,7 +14,6 @@ export const queryClient = new QueryClient();
 
 FocusStyleManager.onlyShowFocusOnTabs();
 
-
 //creates the root of the page and forwards control to the page router
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
     <>
diff --git a/src/common/spline.ts b/src/common/spline.ts
index e8cb74fd..35bbaa44 100644
--- a/src/common/spline.ts
+++ b/src/common/spline.ts
@@ -17,7 +17,7 @@ export const CoordsSchema = Record({
     x: NumberType,
     y: NumberType,
 });
-export type Coords = Static<typeof CoordsSchema>
+export type Coords = Static<typeof CoordsSchema>;
 
 export const StartPointSchema = Record({
     type: Literal(SplinePointType.StartPoint),

From dc130b20147851bdb0695340625e30f13e14e084 Mon Sep 17 00:00:00 2001
From: Jason Antwi-Appah <hey@jasonaa.me>
Date: Tue, 25 Mar 2025 14:02:01 -0500
Subject: [PATCH 07/92] Downgrade yarn version, install motion

Needed to downgrade due to this issue I encountered when installing Framer Motion: https://github.com/yarnpkg/yarn/issues/7807
---
 package.json            |  2 +-
 src/client/package.json |  7 ++++---
 yarn.lock               | 34 ++++++++++++++++++++++++++++++++++
 3 files changed, 39 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index e179fb94..a34f2ea2 100644
--- a/package.json
+++ b/package.json
@@ -46,5 +46,5 @@
     "optionalDependencies": {
         "bufferutil": "^4.0.8"
     },
-    "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
+    "packageManager": "yarn@1.19.0+sha512.40b88ca23f991e8da44f5ef1d6dedeaceea0cd1fbdc526b9cfb2e67a2d6a60cd528f7ef088816febb910707fa792c86c3b47f4dc89970a57e410a5209ec32b79"
 }
diff --git a/src/client/package.json b/src/client/package.json
index fe6afcfa..d541acdf 100644
--- a/src/client/package.json
+++ b/src/client/package.json
@@ -6,15 +6,16 @@
         "@blueprintjs/icons": "^5.20.0",
         "@blueprintjs/select": "^5.3.18",
         "@tanstack/react-query": "^5.29.0",
+        "@theatre/core": "^0.7.2",
+        "@theatre/studio": "^0.7.2",
+        "motion": "^12.6.0",
         "react": "^18.2.0",
         "react-chessboard": "^4.5.0",
         "react-dom": "^18.2.0",
         "react-joystick-component": "^6.2.1",
         "react-router-dom": "^6.21.3",
         "react-use-websocket": "^4.5.0",
-        "scss": "^0.2.4",
-        "@theatre/core": "^0.7.2",
-        "@theatre/studio": "^0.7.2"
+        "scss": "^0.2.4"
     },
     "devDependencies": {
         "@types/react": "^18.2.48",
diff --git a/yarn.lock b/yarn.lock
index 389cee19..096f8a98 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2009,6 +2009,15 @@ forwarded@0.2.0:
   resolved "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz"
   integrity sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==
 
+framer-motion@^12.6.0:
+  version "12.6.0"
+  resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-12.6.0.tgz#0c41105069d64b790a0d1460b51e4221435cf982"
+  integrity sha512-91XLZ3VwDlXe9u2ABhTzYBiFQ/qdoiqyTiTCQDDJ4es5/5lzp76hdB+WG7gcNklcQlOmfDZQqVO48tqzY9Z/bQ==
+  dependencies:
+    motion-dom "^12.6.0"
+    motion-utils "^12.5.0"
+    tslib "^2.4.0"
+
 fresh@0.5.2:
   version "0.5.2"
   resolved "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz"
@@ -2506,6 +2515,26 @@ minimatch@^9.0.4:
   dependencies:
     brace-expansion "^2.0.1"
 
+motion-dom@^12.6.0:
+  version "12.6.0"
+  resolved "https://registry.yarnpkg.com/motion-dom/-/motion-dom-12.6.0.tgz#f9fb2499cd7908f7700f5f87295693e47e5a1b74"
+  integrity sha512-1s/+/V0ny/gfhocSSf0qhkspZK2da7jrwGw7xHzgiQPcimdHaPRcRCoJ3OxEZYBNzy3ma1ERUD+eUStk6a9pQw==
+  dependencies:
+    motion-utils "^12.5.0"
+
+motion-utils@^12.5.0:
+  version "12.5.0"
+  resolved "https://registry.yarnpkg.com/motion-utils/-/motion-utils-12.5.0.tgz#0e42a6b8030327166ca0d0ea0d5b86d64c21e51d"
+  integrity sha512-+hFFzvimn0sBMP9iPxBa9OtRX35ZQ3py0UHnb8U29VD+d8lQ8zH3dTygJWqK7av2v6yhg7scj9iZuvTS0f4+SA==
+
+motion@^12.6.0:
+  version "12.6.0"
+  resolved "https://registry.yarnpkg.com/motion/-/motion-12.6.0.tgz#cbf1451e70c7b105e6d4da7f1fcabf6a9631452e"
+  integrity sha512-YbwQAeVOhQwTi6I8iA+e8TfsduoV0cbE+k9MDeonlDyN04uz5jiVWKeBR0nXgGyGICnmcTaKe/wsQbHkkM3EMw==
+  dependencies:
+    framer-motion "^12.6.0"
+    tslib "^2.4.0"
+
 ms@2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz"
@@ -3363,6 +3392,11 @@ tslib@^2.0.0, tslib@^2.0.3, tslib@~2.6.2:
   resolved "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz"
   integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==
 
+tslib@^2.4.0:
+  version "2.8.1"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.8.1.tgz#612efe4ed235d567e8aba5f2a5fab70280ade83f"
+  integrity sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==
+
 type-check@^0.4.0, type-check@~0.4.0:
   version "0.4.0"
   resolved "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz"

From 44400e4f1b9bf82c8dd3600f48f471e5520d17cb Mon Sep 17 00:00:00 2001
From: Mason Thomas <Kandleseatwicks@gmail.com>
Date: Mon, 31 Mar 2025 21:16:08 -0500
Subject: [PATCH 08/92] Create bots on connection in bot manager. start
 parallel command testing

Co-authored-by: Gabriel Burbach <gabriel.burbach02@gmail.com>
---
 src/server/api/api.ts                 | 7 ++++++-
 src/server/api/bot-server-config.json | 2 +-
 src/server/api/tcp-interface.ts       | 4 +++-
 src/server/robot/robot-manager.ts     | 9 +++++++++
 4 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/server/api/api.ts b/src/server/api/api.ts
index ba53e6da..b221b213 100644
--- a/src/server/api/api.ts
+++ b/src/server/api/api.ts
@@ -32,6 +32,8 @@ import { VirtualBotTunnel, virtualRobots } from "../simulator";
 import { Position } from "../robot/position";
 import { DEGREE } from "../../common/units";
 import { PacketType } from "../utils/tcp-packet";
+import { AbsoluteMoveCommand } from "../command/move-command";
+import { ParallelCommandGroup } from "../command/command";
 
 export const executor = new CommandExecutor();
 
@@ -208,10 +210,13 @@ apiRouter.get("/do-parallel", async (_, res) => {
     console.log("Starting parallel command group");
     const robotsEntries = Array.from(robotManager.idsToRobots.entries());
     console.log(robotsEntries);
+    const commands: any[] = [];
     for (const [, robot] of robotsEntries) {
         console.log("Moving robot " + robot.id);
-        await robot.sendDrivePacket(1);
+        // await robot.sendDrivePacket(1);
+        commands.push(new AbsoluteMoveCommand(robot.id, new Position(5, 5 )));
     }
+    new ParallelCommandGroup(commands).execute();
 
     res.send({ message: "success" });
 });
diff --git a/src/server/api/bot-server-config.json b/src/server/api/bot-server-config.json
index 533e132b..a9b1d7e8 100644
--- a/src/server/api/bot-server-config.json
+++ b/src/server/api/bot-server-config.json
@@ -1,7 +1,7 @@
 {
     "tcpServerPort": 3001,
     "bots": {
-        "80:65:99:4d:f3:f0": "robot-15",
+        "80:65:99:4d:f3:e8": "robot-15",
         "c0:4e:30:4b:68:76": "robot-11",
         "80:65:99:4d:f3:9a": "robot-3",
         "80:65:99:4d:f4:2a": "robot-4"
diff --git a/src/server/api/tcp-interface.ts b/src/server/api/tcp-interface.ts
index 8e847f6c..4824b1d3 100644
--- a/src/server/api/tcp-interface.ts
+++ b/src/server/api/tcp-interface.ts
@@ -340,7 +340,9 @@ export class TCPServer {
                     config["bots"][mac] = id;
                 } else {
                     id = config["bots"][mac];
-                    this.robotManager.addRobot(this.robotManager.getRobot(id));
+                    if (!(id in this.robotManager.idsToRobots)) {
+                        this.robotManager.createRobotFromId(id);
+                    }
                     console.log("Found address ID: " + id);
                 }
                 tunnel.id = id;
diff --git a/src/server/robot/robot-manager.ts b/src/server/robot/robot-manager.ts
index daabf1f4..a616e7eb 100644
--- a/src/server/robot/robot-manager.ts
+++ b/src/server/robot/robot-manager.ts
@@ -1,5 +1,6 @@
 import { GridIndices } from "./grid-indices";
 import { Robot } from "./robot";
+import config from "../api/bot-server-config.json";
 
 /**
  * Stores robots. Provides utilities for finding them by position.
@@ -24,6 +25,14 @@ export class RobotManager {
         this.indicesToIds.set(JSON.stringify(robot.defaultIndices), robot.id);
     }
 
+    createRobotFromId(robotId: string) {
+        const robot = new Robot(
+            robotId,
+            config[robotId].homePosition,
+            config[robotId].defaultPosition,
+        );
+        this.addRobot(robot);
+    }
     /**
      * Retrieves a robot by id.
      * Throws if no robot is found.

From a93a44b7fc6f212ed1b2c4990d300a70abc013ea Mon Sep 17 00:00:00 2001
From: democat <cwongmath@gmail.com>
Date: Mon, 31 Mar 2025 21:25:09 -0500
Subject: [PATCH 09/92] Load startHeading

---
 src/server/api/bot-server-config.json | 116 +++++++++++++++-----------
 src/server/robot/robot-manager.ts     |   2 +
 2 files changed, 67 insertions(+), 51 deletions(-)

diff --git a/src/server/api/bot-server-config.json b/src/server/api/bot-server-config.json
index a9b1d7e8..2d353964 100644
--- a/src/server/api/bot-server-config.json
+++ b/src/server/api/bot-server-config.json
@@ -15,7 +15,8 @@
         "defaultPosition": {
             "x": 2,
             "y": 2
-        }
+        },
+        "startHeading": 90
     },
     "robot-2": {
         "attributes": {},
@@ -26,7 +27,8 @@
         "defaultPosition": {
             "x": 3,
             "y": 2
-        }
+        },
+        "startHeading": 90
     },
     "robot-3": {
         "attributes": {},
@@ -37,7 +39,8 @@
         "defaultPosition": {
             "x": 4,
             "y": 2
-        }
+        },
+        "startHeading": 90
     },
     "robot-4": {
         "attributes": {},
@@ -48,7 +51,8 @@
         "defaultPosition": {
             "x": 5,
             "y": 2
-        }
+        },
+        "startHeading": 90
     },
     "robot-5": {
         "attributes": {},
@@ -59,7 +63,8 @@
         "defaultPosition": {
             "x": 6,
             "y": 2
-        }
+        },
+        "startHeading": 90
     },
     "robot-6": {
         "attributes": {},
@@ -70,7 +75,8 @@
         "defaultPosition": {
             "x": 7,
             "y": 2
-        }
+        },
+        "startHeading": 90
     },
     "robot-7": {
         "attributes": {},
@@ -81,7 +87,8 @@
         "defaultPosition": {
             "x": 8,
             "y": 2
-        }
+        },
+        "startHeading": 90
     },
     "robot-8": {
         "attributes": {},
@@ -92,7 +99,8 @@
         "defaultPosition": {
             "x": 9,
             "y": 2
-        }
+        },
+        "startHeading": 90
     },
     "robot-9": {
         "attributes": {},
@@ -103,7 +111,8 @@
         "defaultPosition": {
             "x": 2,
             "y": 3
-        }
+        },
+        "startHeading": 90
     },
     "robot-10": {
         "attributes": {},
@@ -114,7 +123,8 @@
         "defaultPosition": {
             "x": 3,
             "y": 3
-        }
+        },
+        "startHeading": 90
     },
     "robot-11": {
         "attributes": {},
@@ -125,7 +135,8 @@
         "defaultPosition": {
             "x": 4,
             "y": 3
-        }
+        },
+        "startHeading": 90
     },
     "robot-12": {
         "attributes": {},
@@ -136,7 +147,8 @@
         "defaultPosition": {
             "x": 5,
             "y": 3
-        }
+        },
+        "startHeading": 90
     },
     "robot-13": {
         "attributes": {},
@@ -147,7 +159,8 @@
         "defaultPosition": {
             "x": 6,
             "y": 3
-        }
+        },
+        "startHeading": 90
     },
     "robot-14": {
         "attributes": {},
@@ -158,13 +171,11 @@
         "defaultPosition": {
             "x": 7,
             "y": 3
-        }
+        },
+        "startHeading": 90
     },
     "robot-15": {
-        "attributes": {
-            "MOTOR_A_DRIVE_MULTIPLIER": 1.3,
-            "MOTOR_B_DRIVE_MULTIPLIER": 2
-        },
+        "attributes": {},
         "homePosition": {
             "x": 11,
             "y": 3
@@ -172,7 +183,8 @@
         "defaultPosition": {
             "x": 8,
             "y": 3
-        }
+        },
+        "startHeading": 90
     },
     "robot-16": {
         "attributes": {},
@@ -183,7 +195,8 @@
         "defaultPosition": {
             "x": 9,
             "y": 3
-        }
+        },
+        "startHeading": 90
     },
     "robot-17": {
         "attributes": {},
@@ -194,7 +207,8 @@
         "defaultPosition": {
             "x": 2,
             "y": 8
-        }
+        },
+        "startHeading": 270
     },
     "robot-18": {
         "attributes": {},
@@ -205,7 +219,8 @@
         "defaultPosition": {
             "x": 3,
             "y": 8
-        }
+        },
+        "startHeading": 270
     },
     "robot-19": {
         "attributes": {},
@@ -216,7 +231,8 @@
         "defaultPosition": {
             "x": 4,
             "y": 8
-        }
+        },
+        "startHeading": 270
     },
     "robot-20": {
         "attributes": {},
@@ -227,7 +243,8 @@
         "defaultPosition": {
             "x": 5,
             "y": 8
-        }
+        },
+        "startHeading": 270
     },
     "robot-21": {
         "attributes": {},
@@ -238,7 +255,8 @@
         "defaultPosition": {
             "x": 6,
             "y": 8
-        }
+        },
+        "startHeading": 270
     },
     "robot-22": {
         "attributes": {},
@@ -249,7 +267,8 @@
         "defaultPosition": {
             "x": 7,
             "y": 8
-        }
+        },
+        "startHeading": 270
     },
     "robot-23": {
         "attributes": {},
@@ -260,7 +279,8 @@
         "defaultPosition": {
             "x": 8,
             "y": 8
-        }
+        },
+        "startHeading": 270
     },
     "robot-24": {
         "attributes": {},
@@ -271,7 +291,8 @@
         "defaultPosition": {
             "x": 9,
             "y": 8
-        }
+        },
+        "startHeading": 270
     },
     "robot-25": {
         "attributes": {},
@@ -282,7 +303,8 @@
         "defaultPosition": {
             "x": 2,
             "y": 9
-        }
+        },
+        "startHeading": 270
     },
     "robot-26": {
         "attributes": {},
@@ -293,7 +315,8 @@
         "defaultPosition": {
             "x": 3,
             "y": 9
-        }
+        },
+        "startHeading": 270
     },
     "robot-27": {
         "attributes": {},
@@ -304,7 +327,8 @@
         "defaultPosition": {
             "x": 4,
             "y": 9
-        }
+        },
+        "startHeading": 270
     },
     "robot-28": {
         "attributes": {},
@@ -315,7 +339,8 @@
         "defaultPosition": {
             "x": 5,
             "y": 9
-        }
+        },
+        "startHeading": 270
     },
     "robot-29": {
         "attributes": {},
@@ -326,7 +351,8 @@
         "defaultPosition": {
             "x": 6,
             "y": 9
-        }
+        },
+        "startHeading": 270
     },
     "robot-30": {
         "attributes": {},
@@ -337,7 +363,8 @@
         "defaultPosition": {
             "x": 7,
             "y": 9
-        }
+        },
+        "startHeading": 270
     },
     "robot-31": {
         "attributes": {},
@@ -348,7 +375,8 @@
         "defaultPosition": {
             "x": 8,
             "y": 9
-        }
+        },
+        "startHeading": 270
     },
     "robot-32": {
         "attributes": {},
@@ -359,7 +387,8 @@
         "defaultPosition": {
             "x": 9,
             "y": 9
-        }
+        },
+        "startHeading": 270
     },
     "botConfigSchema": [
         {
@@ -435,21 +464,6 @@
             "name": "WHEEL_DIAMETER_INCHES",
             "type": "float",
             "default_value": 4.375
-        },
-        {
-            "name": "MOTOR_A_DRIVE_MULTIPLIER",
-            "type": "float",
-            "default_value": -1.0
-        },
-        {
-            "name": "MOTOR_B_DRIVE_MULTIPLIER",
-            "type": "float",
-            "default_value": 1.0
-        },
-        {
-            "name": "ENCODER_MULTIPLIER",
-            "type": "float",
-            "default_value": -12000.0
         }
     ]
 }
diff --git a/src/server/robot/robot-manager.ts b/src/server/robot/robot-manager.ts
index a616e7eb..a12fa759 100644
--- a/src/server/robot/robot-manager.ts
+++ b/src/server/robot/robot-manager.ts
@@ -1,6 +1,7 @@
 import { GridIndices } from "./grid-indices";
 import { Robot } from "./robot";
 import config from "../api/bot-server-config.json";
+import { DEGREE } from "../../common/units";
 
 /**
  * Stores robots. Provides utilities for finding them by position.
@@ -30,6 +31,7 @@ export class RobotManager {
             robotId,
             config[robotId].homePosition,
             config[robotId].defaultPosition,
+            config[robotId].startHeading * DEGREE,
         );
         this.addRobot(robot);
     }

From dd96950cdfe3fb0497cc3859f9a999e8335918a2 Mon Sep 17 00:00:00 2001
From: Mason Thomas <Kandleseatwicks@gmail.com>
Date: Mon, 31 Mar 2025 23:53:10 -0500
Subject: [PATCH 10/92] =?UTF-8?q?drive=20tick=20command=20implementation!?=
 =?UTF-8?q?=20=F0=9F=9A=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Colin Wong <democat3457@users.noreply.github.com>
---
 src/server/api/api.ts              |  6 +++---
 src/server/command/move-command.ts | 21 +++++++++++++++++++++
 src/server/robot/robot.ts          | 11 +++++++++++
 src/server/utils/tcp-packet.ts     |  8 ++++++++
 4 files changed, 43 insertions(+), 3 deletions(-)

diff --git a/src/server/api/api.ts b/src/server/api/api.ts
index b221b213..aac19d93 100644
--- a/src/server/api/api.ts
+++ b/src/server/api/api.ts
@@ -32,7 +32,7 @@ import { VirtualBotTunnel, virtualRobots } from "../simulator";
 import { Position } from "../robot/position";
 import { DEGREE } from "../../common/units";
 import { PacketType } from "../utils/tcp-packet";
-import { AbsoluteMoveCommand } from "../command/move-command";
+import { DriveTicksCommand } from "../command/move-command";
 import { ParallelCommandGroup } from "../command/command";
 
 export const executor = new CommandExecutor();
@@ -214,9 +214,9 @@ apiRouter.get("/do-parallel", async (_, res) => {
     for (const [, robot] of robotsEntries) {
         console.log("Moving robot " + robot.id);
         // await robot.sendDrivePacket(1);
-        commands.push(new AbsoluteMoveCommand(robot.id, new Position(5, 5 )));
+        commands.push(new DriveTicksCommand(robot.id, 200000));
     }
-    new ParallelCommandGroup(commands).execute();
+    await new ParallelCommandGroup(commands).execute();
 
     res.send({ message: "success" });
 });
diff --git a/src/server/command/move-command.ts b/src/server/command/move-command.ts
index bb134489..c1b5f82c 100644
--- a/src/server/command/move-command.ts
+++ b/src/server/command/move-command.ts
@@ -182,6 +182,27 @@ export class AbsoluteMoveCommand extends MoveCommand {
     }
 }
 
+export class DriveTicksCommand
+    extends RobotCommand
+    implements Reversible<DriveTicksCommand>
+{
+    constructor(
+        robotId: string,
+        public ticksDistance: number,
+    ) {
+        super(robotId);
+    }
+
+    public async execute(): Promise<void> {
+        const robot = robotManager.getRobot(this.robotId);
+        return robot.sendDriveTicksPacket(this.ticksDistance);
+    }
+
+    public reverse(): DriveTicksCommand {
+        return new DriveTicksCommand(this.robotId, -this.ticksDistance);
+    }
+}
+
 /**
  * Moves a robot to a global location. Implements Reversible through a
  * position supplier to return to the previous position.
diff --git a/src/server/robot/robot.ts b/src/server/robot/robot.ts
index adda5925..5089904f 100644
--- a/src/server/robot/robot.ts
+++ b/src/server/robot/robot.ts
@@ -115,4 +115,15 @@ export class Robot {
         console.log(tileDistance);
         await tunnel.send({ type: PacketType.DRIVE_TANK, left: 1, right: 1 });
     }
+
+    /**
+     * Send a packet to the robot indicating distance to drive, in ticks. Returns a promise that finishes when the
+     * robot finishes the action.
+     *
+     * @param distanceTicks - The distance to drive forward or backwards by, in ticks.
+     */
+    public async sendDriveTicksPacket(distanceTicks: number): Promise<void> {
+        const tunnel = this.getTunnel();
+        await tunnel.send({ type: PacketType.DRIVE_TICKS, tickDistance: distanceTicks });
+    }
 }
diff --git a/src/server/utils/tcp-packet.ts b/src/server/utils/tcp-packet.ts
index 33abbd42..4ad65c7c 100644
--- a/src/server/utils/tcp-packet.ts
+++ b/src/server/utils/tcp-packet.ts
@@ -18,6 +18,7 @@ export enum PacketType {
     SET_VAR = "SET_VAR",
     TURN_BY_ANGLE = "TURN_BY_ANGLE",
     DRIVE_TILES = "DRIVE_TILES",
+    DRIVE_TICKS = "DRIVE_TICKS",
     ACTION_SUCCESS = "ACTION_SUCCESS",
     ACTION_FAIL = "ACTION_FAIL",
     DRIVE_TANK = "DRIVE_TANK",
@@ -126,6 +127,12 @@ export const DRIVE_TILES_SCHEMA = Record({
     type: Literal(PacketType.DRIVE_TILES),
     tileDistance: Float,
 });
+
+export const DRIVE_TICKS_SCHEMA = Record({
+    type: Literal(PacketType.DRIVE_TICKS),
+    tickDistance: Int32,
+});
+
 /** success message */
 export const ACTION_SUCCESS_SCHEMA = Record({
     type: Literal(PacketType.ACTION_SUCCESS),
@@ -157,6 +164,7 @@ export const Packet = Union(
     SET_VAR_SCHEMA,
     TURN_BY_ANGLE_SCHEMA,
     DRIVE_TILES_SCHEMA,
+    DRIVE_TICKS_SCHEMA,
     ACTION_SUCCESS_SCHEMA,
     ACTION_FAIL_SCHEMA,
     DRIVE_TANK_SCHEMA,

From 421649badde5e05ebaeec8095c1427bf609622f4 Mon Sep 17 00:00:00 2001
From: Jason Antwi-Appah <hey@jasonaa.me>
Date: Tue, 1 Apr 2025 13:45:29 -0500
Subject: [PATCH 11/92] Implement remaining context menu methods, render
 control points

---
 src/client/editor/editor.tsx | 100 +++++++++++++++++++++++++++++++----
 src/common/spline.ts         |   2 +
 2 files changed, 92 insertions(+), 10 deletions(-)

diff --git a/src/client/editor/editor.tsx b/src/client/editor/editor.tsx
index 201d1d72..49007b57 100644
--- a/src/client/editor/editor.tsx
+++ b/src/client/editor/editor.tsx
@@ -2,7 +2,9 @@ import { RefObject, useEffect, useMemo, useReducer, useRef } from "react";
 import { ContextMenu, Menu, MenuItem, MenuDivider } from "@blueprintjs/core";
 import {
     Coords,
+    CubicBezier,
     Point,
+    QuadraticBezier,
     Spline,
     SplinePointType,
     splineToSvgDrawAttribute,
@@ -27,8 +29,11 @@ export function Editor() {
                             endPoint: { x: 100, y: 100 },
                         },
                         {
-                            type: SplinePointType.QuadraticBezier,
+                            type: SplinePointType.CubicBezier,
                             endPoint: { x: 315, y: 50 },
+                            controlPoint: {
+                                x: 300, y: 40
+                            }
                         },
                         {
                             type: SplinePointType.QuadraticBezier,
@@ -46,7 +51,10 @@ function SplineEditor({ initialSpline }: { initialSpline: Spline }) {
         | { type: "DELETE_POINT"; index: number }
         | { type: "DELETE_START_POINT" }
         | { type: "MOVE_POINT_ENDPOINT"; coords: Coords; index: number }
-        | { type: "MOVE_START_POINT"; coords: Coords };
+        | { type: "MOVE_START_POINT"; coords: Coords }
+        | {type: "MOVE_CONTROL_POINT", coords: Coords, index: number}
+        | {type: "SWITCH_TO_QUADRATIC", index: number}
+        | {type: "SWITCH_TO_CUBIC", index: number}
 
     const [spline, dispatch] = useReducer(
         (state: Spline, action: SplineEditorAction): Spline => {
@@ -82,6 +90,48 @@ function SplineEditor({ initialSpline }: { initialSpline: Spline }) {
                         },
                     };
                 }
+                case "MOVE_CONTROL_POINT": {
+                    const point = state.points[action.index]
+                    if (point.type !== SplinePointType.CubicBezier) {
+                        return state;
+                    }
+                    
+                    point.controlPoint = action.coords
+                    
+                    const newPoints = [...state.points];
+                    newPoints[action.index] = point;
+
+                    return { ...state, points: newPoints };
+                }
+                case "SWITCH_TO_QUADRATIC": {
+                    const point = state.points[action.index]
+                    if (point.type !== SplinePointType.CubicBezier) {
+                        return state;
+                    }
+                    
+                    const newPoint: QuadraticBezier = { type: SplinePointType.QuadraticBezier, endPoint: point.endPoint }
+                    
+                    const newPoints = [...state.points];
+                    newPoints[action.index] = newPoint;
+
+                    return { ...state, points: newPoints };
+                }
+                case "SWITCH_TO_CUBIC": {
+                    const point = state.points[action.index]
+                    if (point.type !== SplinePointType.QuadraticBezier) {
+                        return state;
+                    }
+                    
+                    const newPoint: CubicBezier = { type: SplinePointType.CubicBezier, controlPoint: {
+                        x: (point.endPoint.x) / 2,
+                        y: (point.endPoint.y) / 2
+                    }, endPoint: point.endPoint }
+                    
+                    const newPoints = [...state.points];
+                    newPoints[action.index] = newPoint;
+
+                    return { ...state, points: newPoints };
+                }
             }
 
             return state;
@@ -101,7 +151,7 @@ function SplineEditor({ initialSpline }: { initialSpline: Spline }) {
                     pointerEvents: "none",
                 }}
             >
-                <path d={path} stroke={"purple"} strokeWidth={5} fill="none" />
+                <path d={path} stroke="purple" strokeWidth={3} fill="none" />
             </svg>
             <SplinePoint
                 point={spline.start}
@@ -115,6 +165,7 @@ function SplineEditor({ initialSpline }: { initialSpline: Spline }) {
                 }
             />
             {spline.points.map((point, index) => (
+                <>
                 <SplinePoint
                     point={point}
                     deleteFn={() => dispatch({ type: "DELETE_POINT", index })}
@@ -125,7 +176,12 @@ function SplineEditor({ initialSpline }: { initialSpline: Spline }) {
                             index,
                         })
                     }
+                    switchToQuadraticFn={() => dispatch({ type: "SWITCH_TO_QUADRATIC", index })}
+                    switchToCubicFn={() => dispatch({ type: "SWITCH_TO_CUBIC", index })}
                 />
+                {/* TODO: add line between control point and end point */}
+                {point.type === SplinePointType.CubicBezier && <SplineControlPoint point={point.controlPoint} moveControlFn={(x, y) => dispatch({ type: "MOVE_CONTROL_POINT", coords: { x, y }, index })} />}
+                </>
             ))}
         </>
     );
@@ -134,17 +190,20 @@ function SplineEditor({ initialSpline }: { initialSpline: Spline }) {
 function SplinePoint({
     point,
     moveFn,
+    switchToQuadraticFn = undefined,
+    switchToCubicFn = undefined,
     deleteFn = undefined,
 }: {
     point: Point;
     moveFn: (x: number, y: number) => void;
     deleteFn?: () => void;
+    switchToQuadraticFn?: () => void,
+    switchToCubicFn?: () => void,
 }) {
     // TODO: fix context menu positioning
-    // TODO: implement remaining context menu methods
 
-    const ref = useRef<HTMLElement>(null);
-    useDraggable(ref, (screenX, screenY) =>
+    const mainPointRef = useRef<HTMLElement>(null);
+    useDraggable(mainPointRef, (screenX, screenY) =>
         moveFn(screenX + robotSize / 4, screenY + robotSize / 4),
     );
 
@@ -160,15 +219,15 @@ function SplinePoint({
             content={
                 <Menu>
                     {point.type === SplinePointType.CubicBezier && (
-                        <MenuItem text="Switch to Quadratic" />
+                        <MenuItem text="Switch to Quadratic" onClick={switchToQuadraticFn} />
                     )}
                     {point.type === SplinePointType.QuadraticBezier && (
-                        <MenuItem text="Switch to Cubic" />
+                        <MenuItem text="Switch to Cubic" onClick={switchToCubicFn} />
                     )}
                     <MenuItem
                         text="Delete..."
                         intent="danger"
-                        onClick={deleteFn ?? undefined}
+                        onClick={deleteFn}
                         disabled={!deleteFn}
                     />
                     <MenuDivider />
@@ -177,7 +236,7 @@ function SplinePoint({
             }
         >
             <span
-                ref={ref}
+                ref={mainPointRef}
                 style={{
                     width: robotSize / 2,
                     height: robotSize / 2,
@@ -193,6 +252,27 @@ function SplinePoint({
     );
 }
 
+function SplineControlPoint({ point, moveControlFn }: { point: Coords, moveControlFn: (x: number, y: number) => void }) {
+    const controlPointRef = useRef<HTMLElement>(null);
+    useDraggable(controlPointRef, (screenX, screenY) => moveControlFn(screenX + robotSize / 4, screenY + robotSize / 4))
+
+    return (
+        <span
+            ref={controlPointRef}
+            style={{
+                width: robotSize / 2,
+                height: robotSize / 2,
+                backgroundColor: 'red',
+                borderRadius: "50%",
+                position: "absolute",
+                left: point.x - robotSize / 4,
+                top: point.y - robotSize / 4,
+                cursor: "grab",
+            }}
+        />
+    );
+}
+
 function useDraggable(
     elRef: RefObject<HTMLElement>,
     updatePosition: (screenX: number, screenY: number) => void,
diff --git a/src/common/spline.ts b/src/common/spline.ts
index 35bbaa44..05d16d17 100644
--- a/src/common/spline.ts
+++ b/src/common/spline.ts
@@ -30,11 +30,13 @@ export const CubicBezierSchema = Record({
     controlPoint: CoordsSchema,
     endPoint: CoordsSchema,
 });
+export type CubicBezier = Static<typeof CubicBezierSchema>;
 
 export const QuadraticBezierSchema = Record({
     type: Literal(SplinePointType.QuadraticBezier),
     endPoint: CoordsSchema,
 });
+export type QuadraticBezier = Static<typeof QuadraticBezierSchema>;
 
 const Midpoint = Union(CubicBezierSchema, QuadraticBezierSchema);
 export type Midpoint = Static<typeof Midpoint>;

From ad539911e4da967ea3c39d7322b243e319d80a26 Mon Sep 17 00:00:00 2001
From: Jason Antwi-Appah <hey@jasonaa.me>
Date: Sat, 12 Apr 2025 12:35:49 -0500
Subject: [PATCH 12/92] Allow robot grid to take children

---
 src/client/debug/simulator.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/client/debug/simulator.tsx b/src/client/debug/simulator.tsx
index d6e667e6..fd21df15 100644
--- a/src/client/debug/simulator.tsx
+++ b/src/client/debug/simulator.tsx
@@ -1,5 +1,5 @@
 import { Card, Button, H1, Tooltip, Collapse } from "@blueprintjs/core";
-import { useEffect, useReducer, useRef, useState } from "react";
+import { type PropsWithChildren, useEffect, useReducer, useRef, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { get, useSocket } from "../api";
 import {
@@ -201,7 +201,7 @@ const openInEditor = async (frame: StackFrame) => {
     await fetch(`/__open-in-editor?${params.toString()}`);
 };
 
-export function RobotGrid({ robotState }: { robotState: RobotState }) {
+export function RobotGrid({ robotState, children }: PropsWithChildren<{ robotState: RobotState }>) {
     return (
         <div
             style={{
@@ -240,6 +240,7 @@ export function RobotGrid({ robotState }: { robotState: RobotState }) {
                     onTopOfRobots={[]}
                 />
             ))}
+            {children}
         </div>
     );
 }

From 68d6c8237b295481a3e0fbafa9461d93ab839814 Mon Sep 17 00:00:00 2001
From: Jason Antwi-Appah <hey@jasonaa.me>
Date: Sat, 12 Apr 2025 13:00:02 -0500
Subject: [PATCH 13/92] Begin showfile schema

---
 src/common/show.ts   | 70 ++++++++++++++++++++++++++++++++++++++++++++
 src/common/spline.ts | 10 +++----
 2 files changed, 75 insertions(+), 5 deletions(-)
 create mode 100644 src/common/show.ts

diff --git a/src/common/show.ts b/src/common/show.ts
new file mode 100644
index 00000000..531cc59e
--- /dev/null
+++ b/src/common/show.ts
@@ -0,0 +1,70 @@
+import {
+    Number,
+    String,
+    Record,
+    Array,
+    Literal,
+    Union,
+    type Static,
+    Null,
+    Optional,
+    Tuple,
+} from "runtypes";
+import {
+    CoordsSchema,
+    MidpointSchema,
+    PointSchema,
+    StartPointSchema,
+} from "./spline";
+
+// JSON file would use the Showfile type.
+
+const AudioSchema = Record({
+    startMs: Number,
+    // maybe we use something like capnproto, msgpack, or protobuf so we could
+    // include an audio file in the showfile. if we really wanted to use JSON we'd
+    // probably have to base64 encode the file 💀. would work, just feels a little scuffed.
+    // plus I've always wanted an excuse to use msgpack or capnproto lol
+    data: String,
+    tempoBpm: Union(Number, Null),
+});
+
+enum TimelineEventTypes {
+    GoToPointEvent = "goto_point",
+    WaitEvent = "wait",
+    StartPointEvent = "start_point",
+}
+
+const GoToPointEventSchema = Record({
+    durationMs: Number,
+    target: MidpointSchema,
+    type: Literal(TimelineEventTypes.GoToPointEvent),
+});
+
+const WaitEventSchema = Record({
+    durationMs: Number,
+    type: Literal(TimelineEventTypes.WaitEvent),
+});
+
+const StartPointEventSchema = Record({
+    type: Literal(TimelineEventTypes.StartPointEvent),
+    target: StartPointSchema,
+});
+
+const TimelineEventSchema = Union(GoToPointEventSchema, WaitEventSchema);
+const TimelineLayerSchema = Tuple(
+    StartPointEventSchema,
+    Array(TimelineEventSchema),
+);
+
+const ShowfileSchema = Record({
+    $chessbots_show_schema_version: Literal(1),
+    timeline: Array(TimelineLayerSchema),
+    audio: Optional(AudioSchema),
+    name: String,
+});
+
+export type Audio = Static<typeof AudioSchema>;
+export type MovementEvent = Static<typeof GoToPointEventSchema>;
+export type TimelineLayer = Static<typeof TimelineLayerSchema>;
+export type Showfile = Static<typeof ShowfileSchema>;
diff --git a/src/common/spline.ts b/src/common/spline.ts
index 05d16d17..0b1e522e 100644
--- a/src/common/spline.ts
+++ b/src/common/spline.ts
@@ -38,14 +38,14 @@ export const QuadraticBezierSchema = Record({
 });
 export type QuadraticBezier = Static<typeof QuadraticBezierSchema>;
 
-const Midpoint = Union(CubicBezierSchema, QuadraticBezierSchema);
-export type Midpoint = Static<typeof Midpoint>;
+export const MidpointSchema = Union(CubicBezierSchema, QuadraticBezierSchema);
+export type Midpoint = Static<typeof MidpointSchema>;
 
-export const Spline = Record({
+export const SplineSchema = Record({
     start: StartPointSchema,
-    points: Array(Midpoint),
+    points: Array(MidpointSchema),
 });
-export type Spline = Static<typeof Spline>;
+export type Spline = Static<typeof SplineSchema>;
 
 export const PointSchema = Union(
     StartPointSchema,

From 98ba0a6a47576fd521a019212ab7c8920dd3fd94 Mon Sep 17 00:00:00 2001
From: Jason Antwi-Appah <hey@jasonaa.me>
Date: Sat, 12 Apr 2025 13:20:42 -0500
Subject: [PATCH 14/92] Begin shell of timeline UI

---
 src/client/debug/simulator.tsx |  13 +-
 src/client/editor/editor.tsx   | 321 +++++++++++++++++++++++++--------
 src/client/package.json        |   1 +
 yarn.lock                      |   5 +
 4 files changed, 267 insertions(+), 73 deletions(-)

diff --git a/src/client/debug/simulator.tsx b/src/client/debug/simulator.tsx
index fd21df15..bf018f97 100644
--- a/src/client/debug/simulator.tsx
+++ b/src/client/debug/simulator.tsx
@@ -1,5 +1,11 @@
 import { Card, Button, H1, Tooltip, Collapse } from "@blueprintjs/core";
-import { type PropsWithChildren, useEffect, useReducer, useRef, useState } from "react";
+import {
+    type PropsWithChildren,
+    useEffect,
+    useReducer,
+    useRef,
+    useState,
+} from "react";
 import { useNavigate } from "react-router-dom";
 import { get, useSocket } from "../api";
 import {
@@ -201,7 +207,10 @@ const openInEditor = async (frame: StackFrame) => {
     await fetch(`/__open-in-editor?${params.toString()}`);
 };
 
-export function RobotGrid({ robotState, children }: PropsWithChildren<{ robotState: RobotState }>) {
+export function RobotGrid({
+    robotState,
+    children,
+}: PropsWithChildren<{ robotState: RobotState }>) {
     return (
         <div
             style={{
diff --git a/src/client/editor/editor.tsx b/src/client/editor/editor.tsx
index 49007b57..0175128a 100644
--- a/src/client/editor/editor.tsx
+++ b/src/client/editor/editor.tsx
@@ -1,5 +1,28 @@
-import { RefObject, useEffect, useMemo, useReducer, useRef } from "react";
-import { ContextMenu, Menu, MenuItem, MenuDivider } from "@blueprintjs/core";
+import {
+    forwardRef,
+    PropsWithChildren,
+    type RefObject,
+    useEffect,
+    useMemo,
+    useReducer,
+    useRef,
+    useState,
+} from "react";
+import {
+    ContextMenu,
+    Menu,
+    MenuItem,
+    MenuDivider,
+    Section,
+    Text,
+    EditableText,
+    Button,
+    H2,
+    SectionCard,
+    Card,
+    ButtonGroup,
+    Tag,
+} from "@blueprintjs/core";
 import {
     Coords,
     CubicBezier,
@@ -10,51 +33,148 @@ import {
     splineToSvgDrawAttribute,
 } from "../../common/spline";
 import { RobotGrid, robotSize } from "../debug/simulator";
+import TimeAgo from "react-timeago";
+
 export function Editor() {
+    // TODO: fix viewport height / timeline height
+    const [lastSaved, setLastSaved] = useState<Date | null>(null);
+    const [unsavedChanges, setUnsavedChanges] =
+        usePreventExitWithUnsavedChanges();
     return (
-        <div>
-            <RobotGrid robotState={{}} />
-            <SplineEditor
-                initialSpline={{
-                    start: {
-                        type: SplinePointType.StartPoint,
-                        point: {
-                            x: 0,
-                            y: 70,
-                        },
-                    },
-                    points: [
-                        {
-                            type: SplinePointType.QuadraticBezier,
-                            endPoint: { x: 100, y: 100 },
-                        },
-                        {
-                            type: SplinePointType.CubicBezier,
-                            endPoint: { x: 315, y: 50 },
-                            controlPoint: {
-                                x: 300, y: 40
-                            }
-                        },
-                        {
-                            type: SplinePointType.QuadraticBezier,
-                            endPoint: { x: 70, y: 70 },
+        <div style={{ height: "100vh" }}>
+            <Card compact>
+                <div
+                    style={{
+                        display: "flex",
+                        justifyContent: "space-between",
+                        gridTemplateColumns: "max-content 1fr",
+                    }}
+                >
+                    <H2>
+                        <EditableText
+                            placeholder="Click to edit..."
+                            value="New Show"
+                        />
+                    </H2>
+                    <span>
+                        {lastSaved ?
+                            <>
+                                Last saved <TimeAgo date={lastSaved} />
+                            </>
+                        :   "Never saved"}
+                        {unsavedChanges && (
+                            <>
+                                {" "}
+                                &bull;{" "}
+                                <Tag
+                                    intent="warning"
+                                    minimal
+                                    style={{ gridColumn: "1/1" }}
+                                >
+                                    Unsaved changes
+                                </Tag>
+                            </>
+                        )}
+                    </span>
+                </div>
+
+                <ButtonGroup size="medium">
+                    <Button
+                        className="bp5-minimal"
+                        text="Save"
+                        onClick={() => {
+                            setLastSaved(new Date());
+                            setUnsavedChanges(false);
+                        }}
+                    />
+                    <Button className="bp5-minimal" text="Open..." />
+                    <Button className="bp5-minimal" text="Save As..." />
+                </ButtonGroup>
+            </Card>
+            <RobotGrid robotState={{}}>
+                <SplineEditor
+                    initialSpline={{
+                        start: {
+                            type: SplinePointType.StartPoint,
+                            point: {
+                                x: 0,
+                                y: 70,
+                            },
                         },
-                    ],
-                }}
-            />
+                        points: [
+                            {
+                                type: SplinePointType.QuadraticBezier,
+                                endPoint: { x: 100, y: 100 },
+                            },
+                            {
+                                type: SplinePointType.CubicBezier,
+                                endPoint: { x: 315, y: 50 },
+                                controlPoint: {
+                                    x: 300,
+                                    y: 40,
+                                },
+                            },
+                            {
+                                type: SplinePointType.QuadraticBezier,
+                                endPoint: { x: 70, y: 70 },
+                            },
+                        ],
+                    }}
+                />
+            </RobotGrid>
+            <Section title="Timeline" compact style={{ height: "100%" }} rightElement={<Button icon="add" text="Add Robot" />}>
+                <div
+                    style={{
+                        overflowY: "scroll",
+                        maxHeight: "100%",
+                        display: "grid",
+                        gridTemplateColumns: "max-content 1fr",
+                        gap: "0rem 0.5rem",
+                    }}
+                >
+                    <TimelineRow title="Audio"> Stuff here</TimelineRow>
+                    {Array.from({ length: 32 }).map((_, i) => (
+                        <TimelineRow title={`Robot ${i + 1}`}>
+                            Stuff here
+                        </TimelineRow>
+                    ))}
+                </div>
+            </Section>
         </div>
     );
 }
 
+const TimelineRow = forwardRef<
+    HTMLDivElement,
+    PropsWithChildren<{ title: string }>
+>(function TimelineCard(props, ref) {
+    const { title, children } = props;
+// https://codepen.io/Kevin-Geary/pen/BavwqYX
+// https://www.youtube.com/watch?v=EQYft7JPKto
+    return (
+        <SectionCard
+            ref={ref}
+            style={{
+                display: "grid",
+                gridTemplateColumns: "subgrid",
+                gridColumn: "1 / span 2",
+            }}
+        >
+            <Text style={{ fontWeight: "bold"}}>{title}</Text>
+            {children}
+        </SectionCard>
+    );
+});
+
 function SplineEditor({ initialSpline }: { initialSpline: Spline }) {
     type SplineEditorAction =
         | { type: "DELETE_POINT"; index: number }
         | { type: "DELETE_START_POINT" }
         | { type: "MOVE_POINT_ENDPOINT"; coords: Coords; index: number }
         | { type: "MOVE_START_POINT"; coords: Coords }
-        | {type: "MOVE_CONTROL_POINT", coords: Coords, index: number}
-        | {type: "SWITCH_TO_QUADRATIC", index: number}
-        | {type: "SWITCH_TO_CUBIC", index: number}
+        | { type: "MOVE_CONTROL_POINT"; coords: Coords; index: number }
+        | { type: "SWITCH_TO_QUADRATIC"; index: number }
+        | { type: "SWITCH_TO_CUBIC"; index: number };
 
     const [spline, dispatch] = useReducer(
         (state: Spline, action: SplineEditorAction): Spline => {
@@ -91,42 +211,49 @@ function SplineEditor({ initialSpline }: { initialSpline: Spline }) {
                     };
                 }
                 case "MOVE_CONTROL_POINT": {
-                    const point = state.points[action.index]
+                    const point = state.points[action.index];
                     if (point.type !== SplinePointType.CubicBezier) {
                         return state;
                     }
-                    
-                    point.controlPoint = action.coords
-                    
+
+                    point.controlPoint = action.coords;
+
                     const newPoints = [...state.points];
                     newPoints[action.index] = point;
 
                     return { ...state, points: newPoints };
                 }
                 case "SWITCH_TO_QUADRATIC": {
-                    const point = state.points[action.index]
+                    const point = state.points[action.index];
                     if (point.type !== SplinePointType.CubicBezier) {
                         return state;
                     }
-                    
-                    const newPoint: QuadraticBezier = { type: SplinePointType.QuadraticBezier, endPoint: point.endPoint }
-                    
+
+                    const newPoint: QuadraticBezier = {
+                        type: SplinePointType.QuadraticBezier,
+                        endPoint: point.endPoint,
+                    };
+
                     const newPoints = [...state.points];
                     newPoints[action.index] = newPoint;
 
                     return { ...state, points: newPoints };
                 }
                 case "SWITCH_TO_CUBIC": {
-                    const point = state.points[action.index]
+                    const point = state.points[action.index];
                     if (point.type !== SplinePointType.QuadraticBezier) {
                         return state;
                     }
-                    
-                    const newPoint: CubicBezier = { type: SplinePointType.CubicBezier, controlPoint: {
-                        x: (point.endPoint.x) / 2,
-                        y: (point.endPoint.y) / 2
-                    }, endPoint: point.endPoint }
-                    
+
+                    const newPoint: CubicBezier = {
+                        type: SplinePointType.CubicBezier,
+                        controlPoint: {
+                            x: point.endPoint.x / 2,
+                            y: point.endPoint.y / 2,
+                        },
+                        endPoint: point.endPoint,
+                    };
+
                     const newPoints = [...state.points];
                     newPoints[action.index] = newPoint;
 
@@ -166,21 +293,38 @@ function SplineEditor({ initialSpline }: { initialSpline: Spline }) {
             />
             {spline.points.map((point, index) => (
                 <>
-                <SplinePoint
-                    point={point}
-                    deleteFn={() => dispatch({ type: "DELETE_POINT", index })}
-                    moveFn={(x, y) =>
-                        dispatch({
-                            type: "MOVE_POINT_ENDPOINT",
-                            coords: { x, y },
-                            index,
-                        })
-                    }
-                    switchToQuadraticFn={() => dispatch({ type: "SWITCH_TO_QUADRATIC", index })}
-                    switchToCubicFn={() => dispatch({ type: "SWITCH_TO_CUBIC", index })}
-                />
-                {/* TODO: add line between control point and end point */}
-                {point.type === SplinePointType.CubicBezier && <SplineControlPoint point={point.controlPoint} moveControlFn={(x, y) => dispatch({ type: "MOVE_CONTROL_POINT", coords: { x, y }, index })} />}
+                    <SplinePoint
+                        point={point}
+                        deleteFn={() =>
+                            dispatch({ type: "DELETE_POINT", index })
+                        }
+                        moveFn={(x, y) =>
+                            dispatch({
+                                type: "MOVE_POINT_ENDPOINT",
+                                coords: { x, y },
+                                index,
+                            })
+                        }
+                        switchToQuadraticFn={() =>
+                            dispatch({ type: "SWITCH_TO_QUADRATIC", index })
+                        }
+                        switchToCubicFn={() =>
+                            dispatch({ type: "SWITCH_TO_CUBIC", index })
+                        }
+                    />
+                    {/* TODO: add line between control point and end point */}
+                    {point.type === SplinePointType.CubicBezier && (
+                        <SplineControlPoint
+                            point={point.controlPoint}
+                            moveControlFn={(x, y) =>
+                                dispatch({
+                                    type: "MOVE_CONTROL_POINT",
+                                    coords: { x, y },
+                                    index,
+                                })
+                            }
+                        />
+                    )}
                 </>
             ))}
         </>
@@ -197,8 +341,8 @@ function SplinePoint({
     point: Point;
     moveFn: (x: number, y: number) => void;
     deleteFn?: () => void;
-    switchToQuadraticFn?: () => void,
-    switchToCubicFn?: () => void,
+    switchToQuadraticFn?: () => void;
+    switchToCubicFn?: () => void;
 }) {
     // TODO: fix context menu positioning
 
@@ -219,10 +363,16 @@ function SplinePoint({
             content={
                 <Menu>
                     {point.type === SplinePointType.CubicBezier && (
-                        <MenuItem text="Switch to Quadratic" onClick={switchToQuadraticFn} />
+                        <MenuItem
+                            text="Switch to Quadratic"
+                            onClick={switchToQuadraticFn}
+                        />
                     )}
                     {point.type === SplinePointType.QuadraticBezier && (
-                        <MenuItem text="Switch to Cubic" onClick={switchToCubicFn} />
+                        <MenuItem
+                            text="Switch to Cubic"
+                            onClick={switchToCubicFn}
+                        />
                     )}
                     <MenuItem
                         text="Delete..."
@@ -252,9 +402,17 @@ function SplinePoint({
     );
 }
 
-function SplineControlPoint({ point, moveControlFn }: { point: Coords, moveControlFn: (x: number, y: number) => void }) {
+function SplineControlPoint({
+    point,
+    moveControlFn,
+}: {
+    point: Coords;
+    moveControlFn: (x: number, y: number) => void;
+}) {
     const controlPointRef = useRef<HTMLElement>(null);
-    useDraggable(controlPointRef, (screenX, screenY) => moveControlFn(screenX + robotSize / 4, screenY + robotSize / 4))
+    useDraggable(controlPointRef, (screenX, screenY) =>
+        moveControlFn(screenX + robotSize / 4, screenY + robotSize / 4),
+    );
 
     return (
         <span
@@ -262,7 +420,7 @@ function SplineControlPoint({ point, moveControlFn }: { point: Coords, moveContr
             style={{
                 width: robotSize / 2,
                 height: robotSize / 2,
-                backgroundColor: 'red',
+                backgroundColor: "red",
                 borderRadius: "50%",
                 position: "absolute",
                 left: point.x - robotSize / 4,
@@ -321,3 +479,24 @@ function useDraggable(
         };
     }, [elRef, updatePosition]);
 }
+
+function usePreventExitWithUnsavedChanges() {
+    const [unsavedChanges, setUnsavedChanges] = useState(true);
+
+    useEffect(() => {
+        const onBeforeUnload = (e: BeforeUnloadEvent) => {
+            if (unsavedChanges) {
+                e.preventDefault();
+                e.returnValue = "";
+            }
+        };
+
+        window.addEventListener("beforeunload", onBeforeUnload);
+
+        return () => {
+            window.removeEventListener("beforeunload", onBeforeUnload);
+        };
+    }, [unsavedChanges]);
+
+    return [unsavedChanges, setUnsavedChanges] as const;
+}
diff --git a/src/client/package.json b/src/client/package.json
index d541acdf..8d187cbb 100644
--- a/src/client/package.json
+++ b/src/client/package.json
@@ -14,6 +14,7 @@
         "react-dom": "^18.2.0",
         "react-joystick-component": "^6.2.1",
         "react-router-dom": "^6.21.3",
+        "react-timeago": "^8.0.0",
         "react-use-websocket": "^4.5.0",
         "scss": "^0.2.4"
     },
diff --git a/yarn.lock b/yarn.lock
index 096f8a98..8177c4c4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2966,6 +2966,11 @@ react-router@6.22.3:
   dependencies:
     "@remix-run/router" "1.15.3"
 
+react-timeago@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/react-timeago/-/react-timeago-8.0.0.tgz#9a6ce075ffac0746fd6e27520ce936014129d767"
+  integrity sha512-I/Lsewkw87xryZVXU8mv8o2lsnxTd7uHBJF9fl76vRx/GkAFNctgSg9q0hOKvgv9V6cTXmDiuXJJYyblD4kGRA==
+
 react-transition-group@^4.4.5:
   version "4.4.5"
   resolved "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz"

From 812b21b98ac085ee9febbb5fb2fadec1cd9f5c72 Mon Sep 17 00:00:00 2001
From: Jason Antwi-Appah <hey@jasonaa.me>
Date: Sat, 12 Apr 2025 14:43:46 -0500
Subject: [PATCH 15/92] Add hotkeys, file opening/saving

---
 src/client/editor/editor.tsx | 302 +++++++++++++++++++++++++++--------
 src/client/package.json      |   5 +-
 src/common/show.ts           |  65 +++++++-
 yarn.lock                    |  99 ++++++++----
 4 files changed, 373 insertions(+), 98 deletions(-)

diff --git a/src/client/editor/editor.tsx b/src/client/editor/editor.tsx
index 0175128a..4922bdc9 100644
--- a/src/client/editor/editor.tsx
+++ b/src/client/editor/editor.tsx
@@ -1,7 +1,9 @@
+import { decode as cborDecode, encode as cborEncode } from "cbor-x";
 import {
     forwardRef,
     PropsWithChildren,
     type RefObject,
+    useCallback,
     useEffect,
     useMemo,
     useReducer,
@@ -22,6 +24,8 @@ import {
     Card,
     ButtonGroup,
     Tag,
+    useHotkeys,
+    HotkeyConfig,
 } from "@blueprintjs/core";
 import {
     Coords,
@@ -33,15 +37,139 @@ import {
     splineToSvgDrawAttribute,
 } from "../../common/spline";
 import { RobotGrid, robotSize } from "../debug/simulator";
-import TimeAgo from "react-timeago";
+
+import { fileOpen, fileSave } from "browser-fs-access";
+import {
+    createNewShowfile,
+    ShowfileSchema,
+    timelineLayerToSpline,
+} from "../../common/show";
 
 export function Editor() {
+    const [initialShow, setInitialShow] = useState(createNewShowfile());
+    const {
+        value: show,
+        canUndo,
+        canRedo,
+        undo,
+        redo,
+    } = useStateWithTrackedHistory(initialShow);
+
     // TODO: fix viewport height / timeline height
-    const [lastSaved, setLastSaved] = useState<Date | null>(null);
     const [unsavedChanges, setUnsavedChanges] =
         usePreventExitWithUnsavedChanges();
+    const [fsHandle, setFsHandle] = useState<FileSystemFileHandle | null>(null);
+
+    const openShowfile = useCallback(async () => {
+        const blob = await fileOpen({
+            mimeTypes: ["application/chessbots-showfile"],
+            extensions: ["cbor"],
+        });
+
+        let data: unknown | null = null;
+        try {
+            data = cborDecode(await blob.bytes());
+        } catch (e) {
+            // TODO: toast or alert
+            console.warn("Failed to decode showfile as CBOR", e);
+            return;
+        }
+
+        const show = ShowfileSchema.check(data);
+
+        if (!show) {
+            // TODO: toast or alert
+            console.warn("File was CBOR but not a valid showfile", data);
+            return;
+        }
+
+        setInitialShow(show);
+        if (blob.handle) setFsHandle(blob.handle);
+
+        setUnsavedChanges(false);
+    }, []);
+
+    function saveShowfileAs() {
+        // TODO: implement
+        setUnsavedChanges(false);
+    }
+
+    async function saveShowfile() {
+
+        const blob = new Blob([cborEncode(initialShow)], {
+            type: "application/chessbots-showfile",
+        });
+        await fileSave(
+            blob,
+            {
+                mimeTypes: ["application/chessbots-showfile"],
+                extensions: ["cbor"],
+                fileName: show.name + ".cbor",
+            },
+            fsHandle,
+        );
+
+        setUnsavedChanges(false);
+    }
+
+    const hotkeys = useMemo<HotkeyConfig[]>(
+        () => [
+            {
+                combo: "mod+s",
+                group: "Debug",
+                global: true,
+                label: "Save",
+                onKeyDown: (e) => {
+                    e.preventDefault();
+                    saveShowfile();
+                },
+            },
+            {
+                combo: "mod+z",
+                group: "Debug",
+                global: true,
+                label: "Undo",
+                onKeyDown: undo,
+            },
+            {
+                combo: "mod+y",
+                group: "Debug",
+                global: true,
+                label: "Redo",
+                onKeyDown: redo,
+            },
+            {
+                combo: "mod+shift+s",
+                group: "Debug",
+                global: true,
+                label: "Save As...",
+                onKeyDown: (e) => {
+                    e.preventDefault();
+                    saveShowfileAs();
+                },
+            },
+            {
+                combo: "mod+o",
+                group: "Debug",
+                global: true,
+                label: "Open...",
+                onKeyDown: (e) => {
+                    e.preventDefault();
+                    openShowfile();
+                },
+            },
+        ],
+        [redo, undo, saveShowfile, saveShowfileAs, openShowfile],
+    );
+
+    const { handleKeyDown, handleKeyUp } = useHotkeys(hotkeys);
+
     return (
-        <div style={{ height: "100vh" }}>
+        <div
+            style={{ height: "100vh" }}
+            onKeyDown={handleKeyDown}
+            onKeyUp={handleKeyUp}
+        >
             <Card compact>
                 <div
                     style={{
@@ -56,73 +184,55 @@ export function Editor() {
                             value="New Show"
                         />
                     </H2>
-                    <span>
-                        {lastSaved ?
-                            <>
-                                Last saved <TimeAgo date={lastSaved} />
-                            </>
-                        :   "Never saved"}
-                        {unsavedChanges && (
-                            <>
-                                {" "}
-                                &bull;{" "}
-                                <Tag
-                                    intent="warning"
-                                    minimal
-                                    style={{ gridColumn: "1/1" }}
-                                >
-                                    Unsaved changes
-                                </Tag>
-                            </>
-                        )}
-                    </span>
+                    {unsavedChanges && <Tag intent="warning" minimal style={{ gridColumn: "1/1" }}>
+                        Unsaved changes
+                    </Tag>}
                 </div>
 
                 <ButtonGroup size="medium">
                     <Button
                         className="bp5-minimal"
                         text="Save"
-                        onClick={() => {
-                            setLastSaved(new Date());
-                            setUnsavedChanges(false);
-                        }}
+                        onClick={saveShowfile}
+                    />
+                    <Button
+                        className="bp5-minimal"
+                        text="Open..."
+                        onClick={openShowfile}
+                    />
+                    <Button
+                        className="bp5-minimal"
+                        text="Save As..."
+                        onClick={saveShowfileAs}
+                    />
+                    <Button
+                        className="bp5-minimal"
+                        text="Undo"
+                        disabled={!canUndo}
+                        onClick={undo}
+                    />
+                    <Button
+                        className="bp5-minimal"
+                        text="Redo"
+                        disabled={!canRedo}
+                        onClick={redo}
                     />
-                    <Button className="bp5-minimal" text="Open..." />
-                    <Button className="bp5-minimal" text="Save As..." />
                 </ButtonGroup>
             </Card>
             <RobotGrid robotState={{}}>
-                <SplineEditor
-                    initialSpline={{
-                        start: {
-                            type: SplinePointType.StartPoint,
-                            point: {
-                                x: 0,
-                                y: 70,
-                            },
-                        },
-                        points: [
-                            {
-                                type: SplinePointType.QuadraticBezier,
-                                endPoint: { x: 100, y: 100 },
-                            },
-                            {
-                                type: SplinePointType.CubicBezier,
-                                endPoint: { x: 315, y: 50 },
-                                controlPoint: {
-                                    x: 300,
-                                    y: 40,
-                                },
-                            },
-                            {
-                                type: SplinePointType.QuadraticBezier,
-                                endPoint: { x: 70, y: 70 },
-                            },
-                        ],
-                    }}
-                />
+                {/* TODO: think more about how state changes will make it up from the editor to this component */}
+                {show.timeline
+                    .map((layer) => timelineLayerToSpline(layer))
+                    .map((spline) => (
+                        <SplineEditor initialSpline={spline} />
+                    ))}
             </RobotGrid>
-            <Section title="Timeline" compact style={{ height: "100%" }} rightElement={<Button icon="add" text="Add Robot" />}>
+            <Section
+                title="Timeline"
+                compact
+                style={{ height: "100%" }}
+                rightElement={<Button icon="add" text="Add Robot" />}
+            >
                 <div
                     style={{
                         overflowY: "scroll",
@@ -132,8 +242,9 @@ export function Editor() {
                         gap: "0rem 0.5rem",
                     }}
                 >
+                    {/* TODO: figure out timeline UI */}
                     <TimelineRow title="Audio"> Stuff here</TimelineRow>
-                    {Array.from({ length: 32 }).map((_, i) => (
+                    {show.timeline.map((_, i) => (
                         <TimelineRow title={`Robot ${i + 1}`}>
                             Stuff here
                         </TimelineRow>
@@ -149,8 +260,8 @@ const TimelineRow = forwardRef<
     PropsWithChildren<{ title: string }>
 >(function TimelineCard(props, ref) {
     const { title, children } = props;
-// https://codepen.io/Kevin-Geary/pen/BavwqYX
-// https://www.youtube.com/watch?v=EQYft7JPKto
+    // https://codepen.io/Kevin-Geary/pen/BavwqYX
+    // https://www.youtube.com/watch?v=EQYft7JPKto
     return (
         <SectionCard
             ref={ref}
@@ -160,7 +271,7 @@ const TimelineRow = forwardRef<
                 gridColumn: "1 / span 2",
             }}
         >
-            <Text style={{ fontWeight: "bold"}}>{title}</Text>
+            <Text style={{ fontWeight: "bold" }}>{title}</Text>
             {children}
         </SectionCard>
     );
@@ -500,3 +611,68 @@ function usePreventExitWithUnsavedChanges() {
 
     return [unsavedChanges, setUnsavedChanges] as const;
 }
+
+function useStateWithTrackedHistory<T>(initialValue: T) {
+    type Action =
+        | { type: "set"; value: T }
+        | { type: "undo" }
+        | { type: "redo" }
+        | { type: "replace"; value: T };
+    type State = {
+        value: T;
+        history: T[];
+        index: number;
+    };
+    const [state, dispatch] = useReducer(
+        (state: State, action: Action) => {
+            switch (action.type) {
+                case "set":
+                    return {
+                        ...state,
+                        value: action.value,
+                        history: [...state.history, state.value],
+                        index: state.history.length,
+                    };
+                case "undo":
+                    if (state.index === 0) return state;
+                    return {
+                        ...state,
+                        value: state.history[state.index - 1],
+                        index: state.index - 1,
+                    };
+                case "redo":
+                    if (state.index === state.history.length) return state;
+                    return {
+                        ...state,
+                        value: state.history[state.index + 1],
+                        index: state.index + 1,
+                    };
+                case "replace":
+                    return {
+                        ...state,
+                        value: action.value,
+                        history: [],
+                        index: 0,
+                    };
+            }
+        },
+        {
+            value: initialValue,
+            history: [],
+            index: 0,
+        },
+    );
+
+    const undo = useCallback(() => dispatch({ type: "undo" }), []);
+    const redo = useCallback(() => dispatch({ type: "redo" }), []);
+    const canUndo = state.index > 0;
+    const canRedo = state.index < state.history.length - 1;
+
+    const setValue = useCallback((value: T) => {
+        dispatch({ type: "set", value });
+    }, []);
+
+    const { value } = state;
+
+    return { value, setValue, canUndo, canRedo, undo, redo };
+}
diff --git a/src/client/package.json b/src/client/package.json
index 8d187cbb..4b8c9fcb 100644
--- a/src/client/package.json
+++ b/src/client/package.json
@@ -6,15 +6,14 @@
         "@blueprintjs/icons": "^5.20.0",
         "@blueprintjs/select": "^5.3.18",
         "@tanstack/react-query": "^5.29.0",
-        "@theatre/core": "^0.7.2",
-        "@theatre/studio": "^0.7.2",
+        "browser-fs-access": "^0.35.0",
+        "cbor-x": "^1.6.0",
         "motion": "^12.6.0",
         "react": "^18.2.0",
         "react-chessboard": "^4.5.0",
         "react-dom": "^18.2.0",
         "react-joystick-component": "^6.2.1",
         "react-router-dom": "^6.21.3",
-        "react-timeago": "^8.0.0",
         "react-use-websocket": "^4.5.0",
         "scss": "^0.2.4"
     },
diff --git a/src/common/show.ts b/src/common/show.ts
index 531cc59e..0857ea86 100644
--- a/src/common/show.ts
+++ b/src/common/show.ts
@@ -14,6 +14,8 @@ import {
     CoordsSchema,
     MidpointSchema,
     PointSchema,
+    Spline,
+    SplinePointType,
     StartPointSchema,
 } from "./spline";
 
@@ -57,7 +59,7 @@ const TimelineLayerSchema = Tuple(
     Array(TimelineEventSchema),
 );
 
-const ShowfileSchema = Record({
+export const ShowfileSchema = Record({
     $chessbots_show_schema_version: Literal(1),
     timeline: Array(TimelineLayerSchema),
     audio: Optional(AudioSchema),
@@ -68,3 +70,64 @@ export type Audio = Static<typeof AudioSchema>;
 export type MovementEvent = Static<typeof GoToPointEventSchema>;
 export type TimelineLayer = Static<typeof TimelineLayerSchema>;
 export type Showfile = Static<typeof ShowfileSchema>;
+
+export function timelineLayerToSpline(layer: TimelineLayer): Spline {
+    const [startPoint, events] = layer;
+    return {
+        start: startPoint.target,
+        points: events
+            .filter((event) => event.type === "goto_point")
+            .map((event) => event.target),
+    };
+}
+
+export function createNewShowfile(): Showfile {
+    return {
+        $chessbots_show_schema_version: 1,
+        timeline: [
+            [
+                {
+                    type: TimelineEventTypes.StartPointEvent,
+                    target: {
+                        type: SplinePointType.StartPoint,
+                        point: {
+                            x: 0,
+                            y: 70,
+                        },
+                    },
+                },
+                [
+                    {
+                        type: TimelineEventTypes.GoToPointEvent,
+                        durationMs: 1000,
+                        target: {
+                            type: SplinePointType.QuadraticBezier,
+                            endPoint: { x: 100, y: 100 },
+                        },
+                    },
+                    {
+                        type: TimelineEventTypes.GoToPointEvent,
+                        durationMs: 1000,
+                        target: {
+                            type: SplinePointType.CubicBezier,
+                            endPoint: { x: 315, y: 50 },
+                            controlPoint: {
+                                x: 300,
+                                y: 40,
+                            },
+                        },
+                    },
+                    {
+                        type: TimelineEventTypes.GoToPointEvent,
+                        durationMs: 1000,
+                        target: {
+                            type: SplinePointType.QuadraticBezier,
+                            endPoint: { x: 70, y: 70 },
+                        },
+                    },
+                ],
+            ],
+        ],
+        name: "new show",
+    };
+}
diff --git a/yarn.lock b/yarn.lock
index 8177c4c4..548b79f7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -262,6 +262,36 @@
     classnames "^2.3.1"
     tslib "~2.6.2"
 
+"@cbor-extract/cbor-extract-darwin-arm64@2.2.0":
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/@cbor-extract/cbor-extract-darwin-arm64/-/cbor-extract-darwin-arm64-2.2.0.tgz#8d65cb861a99622e1b4a268e2d522d2ec6137338"
+  integrity sha512-P7swiOAdF7aSi0H+tHtHtr6zrpF3aAq/W9FXx5HektRvLTM2O89xCyXF3pk7pLc7QpaY7AoaE8UowVf9QBdh3w==
+
+"@cbor-extract/cbor-extract-darwin-x64@2.2.0":
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/@cbor-extract/cbor-extract-darwin-x64/-/cbor-extract-darwin-x64-2.2.0.tgz#9fbec199c888c5ec485a1839f4fad0485ab6c40a"
+  integrity sha512-1liF6fgowph0JxBbYnAS7ZlqNYLf000Qnj4KjqPNW4GViKrEql2MgZnAsExhY9LSy8dnvA4C0qHEBgPrll0z0w==
+
+"@cbor-extract/cbor-extract-linux-arm64@2.2.0":
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/@cbor-extract/cbor-extract-linux-arm64/-/cbor-extract-linux-arm64-2.2.0.tgz#bf77e0db4a1d2200a5aa072e02210d5043e953ae"
+  integrity sha512-rQvhNmDuhjTVXSPFLolmQ47/ydGOFXtbR7+wgkSY0bdOxCFept1hvg59uiLPT2fVDuJFuEy16EImo5tE2x3RsQ==
+
+"@cbor-extract/cbor-extract-linux-arm@2.2.0":
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/@cbor-extract/cbor-extract-linux-arm/-/cbor-extract-linux-arm-2.2.0.tgz#491335037eb8533ed8e21b139c59f6df04e39709"
+  integrity sha512-QeBcBXk964zOytiedMPQNZr7sg0TNavZeuUCD6ON4vEOU/25+pLhNN6EDIKJ9VLTKaZ7K7EaAriyYQ1NQ05s/Q==
+
+"@cbor-extract/cbor-extract-linux-x64@2.2.0":
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/@cbor-extract/cbor-extract-linux-x64/-/cbor-extract-linux-x64-2.2.0.tgz#672574485ccd24759bf8fb8eab9dbca517d35b97"
+  integrity sha512-cWLAWtT3kNLHSvP4RKDzSTX9o0wvQEEAj4SKvhWuOVZxiDAeQazr9A+PSiRILK1VYMLeDml89ohxCnUNQNQNCw==
+
+"@cbor-extract/cbor-extract-win32-x64@2.2.0":
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/@cbor-extract/cbor-extract-win32-x64/-/cbor-extract-win32-x64-2.2.0.tgz#4b3f07af047f984c082de34b116e765cb9af975f"
+  integrity sha512-l2M+Z8DO2vbvADOBNLbbh9y5ST1RY5sqkWOg/58GkUPBYou/cuNZ68SGQ644f1CvZ8kcOxyZtw06+dxWHIoN/w==
+
 "@cspotcode/source-map-support@^0.8.0":
   version "0.8.1"
   resolved "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz"
@@ -796,27 +826,6 @@
   dependencies:
     "@tanstack/query-core" "5.29.0"
 
-"@theatre/core@^0.7.2":
-  version "0.7.2"
-  resolved "https://registry.yarnpkg.com/@theatre/core/-/core-0.7.2.tgz#540a6c3ab80c6ce835b5a284694baf3291222c42"
-  integrity sha512-IDQa/6WY7mIJAtsSd4EgNcM0IUZkl+FrqZ8DdYiCVTFap9ARDNmrngJOeFjJOsnnaHlc5GdEB/jj7fsjbIrAzQ==
-  dependencies:
-    "@theatre/dataverse" "0.7.2"
-
-"@theatre/dataverse@0.7.2":
-  version "0.7.2"
-  resolved "https://registry.yarnpkg.com/@theatre/dataverse/-/dataverse-0.7.2.tgz#25aafe9fe781661939aa991dd46079e0fe4cfd18"
-  integrity sha512-YyfoyX7EyhFUY2OM5fsM0LPrs1SdgLwpiTMkkvTIoZLdOwvQhstjYq4Yz/8ZncJlRoTWvakfmgvCaBN+QuBYxg==
-  dependencies:
-    lodash-es "^4.17.21"
-
-"@theatre/studio@^0.7.2":
-  version "0.7.2"
-  resolved "https://registry.yarnpkg.com/@theatre/studio/-/studio-0.7.2.tgz#287b148c17d7799955199dd6b90c59c876746eaf"
-  integrity sha512-p6LTKzJWVlcHkpGzIlNHh9AkGbB3E+0q9Pjxv+OJoTDe1IK+CMKW695Wp+1//lB4vfC9qShe4z/p+Zaj1q8KtA==
-  dependencies:
-    "@theatre/dataverse" "0.7.2"
-
 "@tsconfig/node10@^1.0.7":
   version "1.0.9"
   resolved "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.9.tgz"
@@ -1288,6 +1297,11 @@ braces@^3.0.2, braces@~3.0.2:
   dependencies:
     fill-range "^7.1.1"
 
+browser-fs-access@^0.35.0:
+  version "0.35.0"
+  resolved "https://registry.yarnpkg.com/browser-fs-access/-/browser-fs-access-0.35.0.tgz#1661996659c79d388d93408ca7cb8072510ee8bc"
+  integrity sha512-sLoadumpRfsjprP8XzVjpQc0jK8yqHBx0PtUTGYj2fftT+P/t+uyDAQdMgGAPKD011in/O+YYGh7fIs0oG/viw==
+
 browserslist@^4.22.2:
   version "4.23.0"
   resolved "https://registry.npmjs.org/browserslist/-/browserslist-4.23.0.tgz"
@@ -1353,6 +1367,27 @@ capital-case@^1.0.4:
     tslib "^2.0.3"
     upper-case-first "^2.0.2"
 
+cbor-extract@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/cbor-extract/-/cbor-extract-2.2.0.tgz#cee78e630cbeae3918d1e2e58e0cebaf3a3be840"
+  integrity sha512-Ig1zM66BjLfTXpNgKpvBePq271BPOvu8MR0Jl080yG7Jsl+wAZunfrwiwA+9ruzm/WEdIV5QF/bjDZTqyAIVHA==
+  dependencies:
+    node-gyp-build-optional-packages "5.1.1"
+  optionalDependencies:
+    "@cbor-extract/cbor-extract-darwin-arm64" "2.2.0"
+    "@cbor-extract/cbor-extract-darwin-x64" "2.2.0"
+    "@cbor-extract/cbor-extract-linux-arm" "2.2.0"
+    "@cbor-extract/cbor-extract-linux-arm64" "2.2.0"
+    "@cbor-extract/cbor-extract-linux-x64" "2.2.0"
+    "@cbor-extract/cbor-extract-win32-x64" "2.2.0"
+
+cbor-x@^1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/cbor-x/-/cbor-x-1.6.0.tgz#89c35d2d805efc30e09a28349425cc05d57aacd7"
+  integrity sha512-0kareyRwHSkL6ws5VXHEf8uY1liitysCVJjlmhaLG+IXLqhSaOO+t63coaso7yjwEzWZzLy8fJo06gZDVQM9Qg==
+  optionalDependencies:
+    cbor-extract "^2.2.0"
+
 chai@^5.2.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/chai/-/chai-5.2.0.tgz#1358ee106763624114addf84ab02697e411c9c05"
@@ -1576,6 +1611,11 @@ destroy@1.2.0:
   resolved "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz"
   integrity sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==
 
+detect-libc@^2.0.1:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-2.0.3.tgz#f0cd503b40f9939b894697d19ad50895e30cf700"
+  integrity sha512-bwy0MGW55bG41VqxxypOsdSdGqLwXPI/focwgTYCFMbdUiBAxLg9CFzG08sz2aqzknwiX7Hkl0bQENjg8iLByw==
+
 diff@^4.0.1:
   version "4.0.2"
   resolved "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz"
@@ -2372,11 +2412,6 @@ locate-path@^6.0.0:
   dependencies:
     p-locate "^5.0.0"
 
-lodash-es@^4.17.21:
-  version "4.17.21"
-  resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
-  integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
-
 lodash.merge@^4.6.2:
   version "4.6.2"
   resolved "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz"
@@ -2578,6 +2613,13 @@ no-case@^3.0.4:
     lower-case "^2.0.2"
     tslib "^2.0.3"
 
+node-gyp-build-optional-packages@5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/node-gyp-build-optional-packages/-/node-gyp-build-optional-packages-5.1.1.tgz#52b143b9dd77b7669073cbfe39e3f4118bfc603c"
+  integrity sha512-+P72GAjVAbTxjjwUmwjVrqrdZROD4nf8KgpBoDxqXXTiYZZt/ud60dE5yvCSr9lRO8e8yv6kgJIC0K0PfZFVQw==
+  dependencies:
+    detect-libc "^2.0.1"
+
 node-gyp-build@^4.3.0:
   version "4.8.2"
   resolved "https://registry.npmjs.org/node-gyp-build/-/node-gyp-build-4.8.2.tgz"
@@ -2966,11 +3008,6 @@ react-router@6.22.3:
   dependencies:
     "@remix-run/router" "1.15.3"
 
-react-timeago@^8.0.0:
-  version "8.0.0"
-  resolved "https://registry.yarnpkg.com/react-timeago/-/react-timeago-8.0.0.tgz#9a6ce075ffac0746fd6e27520ce936014129d767"
-  integrity sha512-I/Lsewkw87xryZVXU8mv8o2lsnxTd7uHBJF9fl76vRx/GkAFNctgSg9q0hOKvgv9V6cTXmDiuXJJYyblD4kGRA==
-
 react-transition-group@^4.4.5:
   version "4.4.5"
   resolved "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz"

From 7f9dfc62c689c368f4e19953586190541daafc50 Mon Sep 17 00:00:00 2001
From: Jason Antwi-Appah <hey@jasonaa.me>
Date: Sat, 12 Apr 2025 15:01:24 -0500
Subject: [PATCH 16/92] Make title editable, check for unsaved changes

---
 src/client/editor/editor.tsx | 53 ++++++++++++++++--------------------
 src/client/package.json      |  1 +
 yarn.lock                    |  5 ++++
 3 files changed, 30 insertions(+), 29 deletions(-)

diff --git a/src/client/editor/editor.tsx b/src/client/editor/editor.tsx
index 4922bdc9..77b01070 100644
--- a/src/client/editor/editor.tsx
+++ b/src/client/editor/editor.tsx
@@ -44,20 +44,32 @@ import {
     ShowfileSchema,
     timelineLayerToSpline,
 } from "../../common/show";
+import { diff } from 'deep-object-diff';
 
 export function Editor() {
     const [initialShow, setInitialShow] = useState(createNewShowfile());
     const {
         value: show,
+        setValue: setShow,
         canUndo,
         canRedo,
         undo,
         redo,
     } = useStateWithTrackedHistory(initialShow);
-
+    
     // TODO: fix viewport height / timeline height
     const [unsavedChanges, setUnsavedChanges] =
-        usePreventExitWithUnsavedChanges();
+    usePreventExitWithUnsavedChanges();
+    
+    useEffect(() => {
+        const result = diff(initialShow, show);
+        if (Object.keys(result).length === 0) {
+            setUnsavedChanges(false);
+        } else {
+            setUnsavedChanges(true);
+        }
+    }, [initialShow, show, setUnsavedChanges]);
+
     const [fsHandle, setFsHandle] = useState<FileSystemFileHandle | null>(null);
 
     const openShowfile = useCallback(async () => {
@@ -84,19 +96,15 @@ export function Editor() {
         }
 
         setInitialShow(show);
+        setShow(show);
         if (blob.handle) setFsHandle(blob.handle);
 
-        setUnsavedChanges(false);
+        console.log(show);
     }, []);
 
-    function saveShowfileAs() {
-        // TODO: implement
-        setUnsavedChanges(false);
-    }
-
     async function saveShowfile() {
 
-        const blob = new Blob([cborEncode(initialShow)], {
+        const blob = new Blob([cborEncode(show)], {
             type: "application/chessbots-showfile",
         });
         await fileSave(
@@ -109,7 +117,7 @@ export function Editor() {
             fsHandle,
         );
 
-        setUnsavedChanges(false);
+        setInitialShow(show);
     }
 
     const hotkeys = useMemo<HotkeyConfig[]>(
@@ -138,16 +146,6 @@ export function Editor() {
                 label: "Redo",
                 onKeyDown: redo,
             },
-            {
-                combo: "mod+shift+s",
-                group: "Debug",
-                global: true,
-                label: "Save As...",
-                onKeyDown: (e) => {
-                    e.preventDefault();
-                    saveShowfileAs();
-                },
-            },
             {
                 combo: "mod+o",
                 group: "Debug",
@@ -159,7 +157,7 @@ export function Editor() {
                 },
             },
         ],
-        [redo, undo, saveShowfile, saveShowfileAs, openShowfile],
+        [redo, undo, saveShowfile, openShowfile],
     );
 
     const { handleKeyDown, handleKeyUp } = useHotkeys(hotkeys);
@@ -181,7 +179,8 @@ export function Editor() {
                     <H2>
                         <EditableText
                             placeholder="Click to edit..."
-                            value="New Show"
+                            value={show.name}
+                            onChange={(value) => setShow({ ...show, name: value })}
                         />
                     </H2>
                     {unsavedChanges && <Tag intent="warning" minimal style={{ gridColumn: "1/1" }}>
@@ -200,11 +199,6 @@ export function Editor() {
                         text="Open..."
                         onClick={openShowfile}
                     />
-                    <Button
-                        className="bp5-minimal"
-                        text="Save As..."
-                        onClick={saveShowfileAs}
-                    />
                     <Button
                         className="bp5-minimal"
                         text="Undo"
@@ -227,6 +221,7 @@ export function Editor() {
                         <SplineEditor initialSpline={spline} />
                     ))}
             </RobotGrid>
+            {/* TODO: implement add button  */}
             <Section
                 title="Timeline"
                 compact
@@ -242,7 +237,7 @@ export function Editor() {
                         gap: "0rem 0.5rem",
                     }}
                 >
-                    {/* TODO: figure out timeline UI */}
+                    {/* TODO: figure out timeline UI. support deleting robots */}
                     <TimelineRow title="Audio"> Stuff here</TimelineRow>
                     {show.timeline.map((_, i) => (
                         <TimelineRow title={`Robot ${i + 1}`}>
@@ -592,7 +587,7 @@ function useDraggable(
 }
 
 function usePreventExitWithUnsavedChanges() {
-    const [unsavedChanges, setUnsavedChanges] = useState(true);
+    const [unsavedChanges, setUnsavedChanges] = useState(false);
 
     useEffect(() => {
         const onBeforeUnload = (e: BeforeUnloadEvent) => {
diff --git a/src/client/package.json b/src/client/package.json
index 4b8c9fcb..fa86a1fe 100644
--- a/src/client/package.json
+++ b/src/client/package.json
@@ -8,6 +8,7 @@
         "@tanstack/react-query": "^5.29.0",
         "browser-fs-access": "^0.35.0",
         "cbor-x": "^1.6.0",
+        "deep-object-diff": "^1.1.9",
         "motion": "^12.6.0",
         "react": "^18.2.0",
         "react-chessboard": "^4.5.0",
diff --git a/yarn.lock b/yarn.lock
index 548b79f7..0f743a09 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1592,6 +1592,11 @@ deep-is@^0.1.3:
   resolved "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz"
   integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==
 
+deep-object-diff@^1.1.9:
+  version "1.1.9"
+  resolved "https://registry.yarnpkg.com/deep-object-diff/-/deep-object-diff-1.1.9.tgz#6df7ef035ad6a0caa44479c536ed7b02570f4595"
+  integrity sha512-Rn+RuwkmkDwCi2/oXOFS9Gsr5lJZu/yTGpK7wAaAIE75CC+LCGEZHpY6VQJa/RoJcrmaA/docWJZvYohlNkWPA==
+
 define-data-property@^1.1.4:
   version "1.1.4"
   resolved "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz"

From e1cddff92fd1dd0f66887675bb4e491fb27e561c Mon Sep 17 00:00:00 2001
From: Jason Antwi-Appah <hey@jasonaa.me>
Date: Sat, 12 Apr 2025 15:06:08 -0500
Subject: [PATCH 17/92] Format

---
 src/client/editor/editor.tsx | 25 ++++++++++++++++---------
 1 file changed, 16 insertions(+), 9 deletions(-)

diff --git a/src/client/editor/editor.tsx b/src/client/editor/editor.tsx
index 77b01070..9375eaaf 100644
--- a/src/client/editor/editor.tsx
+++ b/src/client/editor/editor.tsx
@@ -44,7 +44,7 @@ import {
     ShowfileSchema,
     timelineLayerToSpline,
 } from "../../common/show";
-import { diff } from 'deep-object-diff';
+import { diff } from "deep-object-diff";
 
 export function Editor() {
     const [initialShow, setInitialShow] = useState(createNewShowfile());
@@ -56,11 +56,11 @@ export function Editor() {
         undo,
         redo,
     } = useStateWithTrackedHistory(initialShow);
-    
+
     // TODO: fix viewport height / timeline height
     const [unsavedChanges, setUnsavedChanges] =
-    usePreventExitWithUnsavedChanges();
-    
+        usePreventExitWithUnsavedChanges();
+
     useEffect(() => {
         const result = diff(initialShow, show);
         if (Object.keys(result).length === 0) {
@@ -103,7 +103,6 @@ export function Editor() {
     }, []);
 
     async function saveShowfile() {
-
         const blob = new Blob([cborEncode(show)], {
             type: "application/chessbots-showfile",
         });
@@ -180,12 +179,20 @@ export function Editor() {
                         <EditableText
                             placeholder="Click to edit..."
                             value={show.name}
-                            onChange={(value) => setShow({ ...show, name: value })}
+                            onChange={(value) =>
+                                setShow({ ...show, name: value })
+                            }
                         />
                     </H2>
-                    {unsavedChanges && <Tag intent="warning" minimal style={{ gridColumn: "1/1" }}>
-                        Unsaved changes
-                    </Tag>}
+                    {unsavedChanges && (
+                        <Tag
+                            intent="warning"
+                            minimal
+                            style={{ gridColumn: "1/1" }}
+                        >
+                            Unsaved changes
+                        </Tag>
+                    )}
                 </div>
 
                 <ButtonGroup size="medium">

From 519d7a96d1fc43eda824330d8cfa831f41b15631 Mon Sep 17 00:00:00 2001
From: Jason Antwi-Appah <hey@jasonaa.me>
Date: Sat, 12 Apr 2025 15:18:26 -0500
Subject: [PATCH 18/92] Refactor editor into separate files

---
 src/client/editor/editor.tsx        | 463 ++--------------------------
 src/client/editor/hooks.ts          | 137 ++++++++
 src/client/editor/points.tsx        | 103 +++++++
 src/client/editor/spline-editor.tsx | 175 +++++++++++
 4 files changed, 441 insertions(+), 437 deletions(-)
 create mode 100644 src/client/editor/hooks.ts
 create mode 100644 src/client/editor/points.tsx
 create mode 100644 src/client/editor/spline-editor.tsx

diff --git a/src/client/editor/editor.tsx b/src/client/editor/editor.tsx
index 9375eaaf..b9a40b8f 100644
--- a/src/client/editor/editor.tsx
+++ b/src/client/editor/editor.tsx
@@ -1,20 +1,13 @@
 import { decode as cborDecode, encode as cborEncode } from "cbor-x";
 import {
     forwardRef,
-    PropsWithChildren,
-    type RefObject,
+    type PropsWithChildren,
     useCallback,
     useEffect,
     useMemo,
-    useReducer,
-    useRef,
     useState,
 } from "react";
 import {
-    ContextMenu,
-    Menu,
-    MenuItem,
-    MenuDivider,
     Section,
     Text,
     EditableText,
@@ -25,18 +18,9 @@ import {
     ButtonGroup,
     Tag,
     useHotkeys,
-    HotkeyConfig,
+    type HotkeyConfig,
 } from "@blueprintjs/core";
-import {
-    Coords,
-    CubicBezier,
-    Point,
-    QuadraticBezier,
-    Spline,
-    SplinePointType,
-    splineToSvgDrawAttribute,
-} from "../../common/spline";
-import { RobotGrid, robotSize } from "../debug/simulator";
+import { RobotGrid } from "../debug/simulator";
 
 import { fileOpen, fileSave } from "browser-fs-access";
 import {
@@ -45,9 +29,15 @@ import {
     timelineLayerToSpline,
 } from "../../common/show";
 import { diff } from "deep-object-diff";
+import {
+    usePreventExitWithUnsavedChanges,
+    useStateWithTrackedHistory,
+} from "./hooks";
+import { SplineEditor } from "./spline-editor";
 
 export function Editor() {
     const [initialShow, setInitialShow] = useState(createNewShowfile());
+    const [fsHandle, setFsHandle] = useState<FileSystemFileHandle | null>(null);
     const {
         value: show,
         setValue: setShow,
@@ -70,8 +60,6 @@ export function Editor() {
         }
     }, [initialShow, show, setUnsavedChanges]);
 
-    const [fsHandle, setFsHandle] = useState<FileSystemFileHandle | null>(null);
-
     const openShowfile = useCallback(async () => {
         const blob = await fileOpen({
             mimeTypes: ["application/chessbots-showfile"],
@@ -100,9 +88,9 @@ export function Editor() {
         if (blob.handle) setFsHandle(blob.handle);
 
         console.log(show);
-    }, []);
+    }, [setShow]);
 
-    async function saveShowfile() {
+    const saveShowfile = useCallback(async () => {
         const blob = new Blob([cborEncode(show)], {
             type: "application/chessbots-showfile",
         });
@@ -117,13 +105,13 @@ export function Editor() {
         );
 
         setInitialShow(show);
-    }
+    }, [fsHandle, show]);
 
     const hotkeys = useMemo<HotkeyConfig[]>(
         () => [
             {
                 combo: "mod+s",
-                group: "Debug",
+                group: "File",
                 global: true,
                 label: "Save",
                 onKeyDown: (e) => {
@@ -131,30 +119,30 @@ export function Editor() {
                     saveShowfile();
                 },
             },
+            {
+                combo: "mod+o",
+                group: "File",
+                global: true,
+                label: "Open...",
+                onKeyDown: (e) => {
+                    e.preventDefault();
+                    openShowfile();
+                },
+            },
             {
                 combo: "mod+z",
-                group: "Debug",
+                group: "Edit",
                 global: true,
                 label: "Undo",
                 onKeyDown: undo,
             },
             {
                 combo: "mod+y",
-                group: "Debug",
+                group: "Edit",
                 global: true,
                 label: "Redo",
                 onKeyDown: redo,
             },
-            {
-                combo: "mod+o",
-                group: "Debug",
-                global: true,
-                label: "Open...",
-                onKeyDown: (e) => {
-                    e.preventDefault();
-                    openShowfile();
-                },
-            },
         ],
         [redo, undo, saveShowfile, openShowfile],
     );
@@ -262,6 +250,7 @@ const TimelineRow = forwardRef<
     PropsWithChildren<{ title: string }>
 >(function TimelineCard(props, ref) {
     const { title, children } = props;
+    // TODO: add borders between columns. v low priority
     // https://codepen.io/Kevin-Geary/pen/BavwqYX
     // https://www.youtube.com/watch?v=EQYft7JPKto
     return (
@@ -278,403 +267,3 @@ const TimelineRow = forwardRef<
         </SectionCard>
     );
 });
-
-function SplineEditor({ initialSpline }: { initialSpline: Spline }) {
-    type SplineEditorAction =
-        | { type: "DELETE_POINT"; index: number }
-        | { type: "DELETE_START_POINT" }
-        | { type: "MOVE_POINT_ENDPOINT"; coords: Coords; index: number }
-        | { type: "MOVE_START_POINT"; coords: Coords }
-        | { type: "MOVE_CONTROL_POINT"; coords: Coords; index: number }
-        | { type: "SWITCH_TO_QUADRATIC"; index: number }
-        | { type: "SWITCH_TO_CUBIC"; index: number };
-
-    const [spline, dispatch] = useReducer(
-        (state: Spline, action: SplineEditorAction): Spline => {
-            switch (action.type) {
-                case "DELETE_POINT": {
-                    return {
-                        ...state,
-                        points: state.points.toSpliced(action.index, 1),
-                    };
-                }
-                case "DELETE_START_POINT": {
-                    if (state.points.length === 0) return state;
-                    return {
-                        ...state,
-                        start: {
-                            type: SplinePointType.StartPoint,
-                            point: state.points[0].endPoint,
-                        },
-                        points: state.points.slice(1),
-                    };
-                }
-                case "MOVE_POINT_ENDPOINT": {
-                    const newPoints = [...state.points];
-                    newPoints[action.index].endPoint = action.coords;
-                    return { ...state, points: newPoints };
-                }
-                case "MOVE_START_POINT": {
-                    return {
-                        ...state,
-                        start: {
-                            type: SplinePointType.StartPoint,
-                            point: action.coords,
-                        },
-                    };
-                }
-                case "MOVE_CONTROL_POINT": {
-                    const point = state.points[action.index];
-                    if (point.type !== SplinePointType.CubicBezier) {
-                        return state;
-                    }
-
-                    point.controlPoint = action.coords;
-
-                    const newPoints = [...state.points];
-                    newPoints[action.index] = point;
-
-                    return { ...state, points: newPoints };
-                }
-                case "SWITCH_TO_QUADRATIC": {
-                    const point = state.points[action.index];
-                    if (point.type !== SplinePointType.CubicBezier) {
-                        return state;
-                    }
-
-                    const newPoint: QuadraticBezier = {
-                        type: SplinePointType.QuadraticBezier,
-                        endPoint: point.endPoint,
-                    };
-
-                    const newPoints = [...state.points];
-                    newPoints[action.index] = newPoint;
-
-                    return { ...state, points: newPoints };
-                }
-                case "SWITCH_TO_CUBIC": {
-                    const point = state.points[action.index];
-                    if (point.type !== SplinePointType.QuadraticBezier) {
-                        return state;
-                    }
-
-                    const newPoint: CubicBezier = {
-                        type: SplinePointType.CubicBezier,
-                        controlPoint: {
-                            x: point.endPoint.x / 2,
-                            y: point.endPoint.y / 2,
-                        },
-                        endPoint: point.endPoint,
-                    };
-
-                    const newPoints = [...state.points];
-                    newPoints[action.index] = newPoint;
-
-                    return { ...state, points: newPoints };
-                }
-            }
-
-            return state;
-        },
-        initialSpline,
-    );
-    const path = useMemo(() => splineToSvgDrawAttribute(spline), [spline]);
-    return (
-        <>
-            <svg
-                style={{
-                    position: "absolute",
-                    left: 0,
-                    top: 0,
-                    width: "100%",
-                    height: "100%",
-                    pointerEvents: "none",
-                }}
-            >
-                <path d={path} stroke="purple" strokeWidth={3} fill="none" />
-            </svg>
-            <SplinePoint
-                point={spline.start}
-                deleteFn={
-                    spline.points.length > 0 ?
-                        () => dispatch({ type: "DELETE_START_POINT" })
-                    :   undefined
-                }
-                moveFn={(x, y) =>
-                    dispatch({ type: "MOVE_START_POINT", coords: { x, y } })
-                }
-            />
-            {spline.points.map((point, index) => (
-                <>
-                    <SplinePoint
-                        point={point}
-                        deleteFn={() =>
-                            dispatch({ type: "DELETE_POINT", index })
-                        }
-                        moveFn={(x, y) =>
-                            dispatch({
-                                type: "MOVE_POINT_ENDPOINT",
-                                coords: { x, y },
-                                index,
-                            })
-                        }
-                        switchToQuadraticFn={() =>
-                            dispatch({ type: "SWITCH_TO_QUADRATIC", index })
-                        }
-                        switchToCubicFn={() =>
-                            dispatch({ type: "SWITCH_TO_CUBIC", index })
-                        }
-                    />
-                    {/* TODO: add line between control point and end point */}
-                    {point.type === SplinePointType.CubicBezier && (
-                        <SplineControlPoint
-                            point={point.controlPoint}
-                            moveControlFn={(x, y) =>
-                                dispatch({
-                                    type: "MOVE_CONTROL_POINT",
-                                    coords: { x, y },
-                                    index,
-                                })
-                            }
-                        />
-                    )}
-                </>
-            ))}
-        </>
-    );
-}
-
-function SplinePoint({
-    point,
-    moveFn,
-    switchToQuadraticFn = undefined,
-    switchToCubicFn = undefined,
-    deleteFn = undefined,
-}: {
-    point: Point;
-    moveFn: (x: number, y: number) => void;
-    deleteFn?: () => void;
-    switchToQuadraticFn?: () => void;
-    switchToCubicFn?: () => void;
-}) {
-    // TODO: fix context menu positioning
-
-    const mainPointRef = useRef<HTMLElement>(null);
-    useDraggable(mainPointRef, (screenX, screenY) =>
-        moveFn(screenX + robotSize / 4, screenY + robotSize / 4),
-    );
-
-    const mainPointColor =
-        point.type === SplinePointType.StartPoint ? "blue" : "black";
-    const mainCoords =
-        point.type === SplinePointType.StartPoint ?
-            point.point
-        :   point.endPoint;
-
-    return (
-        <ContextMenu
-            content={
-                <Menu>
-                    {point.type === SplinePointType.CubicBezier && (
-                        <MenuItem
-                            text="Switch to Quadratic"
-                            onClick={switchToQuadraticFn}
-                        />
-                    )}
-                    {point.type === SplinePointType.QuadraticBezier && (
-                        <MenuItem
-                            text="Switch to Cubic"
-                            onClick={switchToCubicFn}
-                        />
-                    )}
-                    <MenuItem
-                        text="Delete..."
-                        intent="danger"
-                        onClick={deleteFn}
-                        disabled={!deleteFn}
-                    />
-                    <MenuDivider />
-                    <MenuItem disabled={true} text={`Type: ${point.type}`} />
-                </Menu>
-            }
-        >
-            <span
-                ref={mainPointRef}
-                style={{
-                    width: robotSize / 2,
-                    height: robotSize / 2,
-                    backgroundColor: mainPointColor,
-                    borderRadius: "50%",
-                    position: "absolute",
-                    left: mainCoords.x - robotSize / 4,
-                    top: mainCoords.y - robotSize / 4,
-                    cursor: "grab",
-                }}
-            />
-        </ContextMenu>
-    );
-}
-
-function SplineControlPoint({
-    point,
-    moveControlFn,
-}: {
-    point: Coords;
-    moveControlFn: (x: number, y: number) => void;
-}) {
-    const controlPointRef = useRef<HTMLElement>(null);
-    useDraggable(controlPointRef, (screenX, screenY) =>
-        moveControlFn(screenX + robotSize / 4, screenY + robotSize / 4),
-    );
-
-    return (
-        <span
-            ref={controlPointRef}
-            style={{
-                width: robotSize / 2,
-                height: robotSize / 2,
-                backgroundColor: "red",
-                borderRadius: "50%",
-                position: "absolute",
-                left: point.x - robotSize / 4,
-                top: point.y - robotSize / 4,
-                cursor: "grab",
-            }}
-        />
-    );
-}
-
-function useDraggable(
-    elRef: RefObject<HTMLElement>,
-    updatePosition: (screenX: number, screenY: number) => void,
-) {
-    useEffect(() => {
-        const el = elRef.current;
-        if (!el) return;
-
-        let pos1 = 0,
-            pos2 = 0,
-            pos3 = 0,
-            pos4 = 0;
-
-        const onMouseDown = (e) => {
-            e.preventDefault();
-            // get the mouse cursor position at startup:
-            pos3 = e.clientX;
-            pos4 = e.clientY;
-            document.onmouseup = closeDragElement;
-            // call a fn whenever the cursor moves:
-            document.onmousemove = elementDrag;
-        };
-
-        const elementDrag = (e) => {
-            e.preventDefault();
-            pos1 = pos3 - e.clientX;
-            pos2 = pos4 - e.clientY;
-            pos3 = e.clientX;
-            pos4 = e.clientY;
-            const x = el.offsetLeft - pos1;
-            const y = el.offsetTop - pos2;
-            updatePosition(x, y);
-        };
-
-        const closeDragElement = () => {
-            document.onmouseup = null;
-            document.onmousemove = null;
-        };
-
-        el.addEventListener("mousedown", onMouseDown);
-
-        return () => {
-            el.removeEventListener("mousedown", onMouseDown);
-            document.removeEventListener("mousemove", elementDrag);
-            document.removeEventListener("mouseup", closeDragElement);
-        };
-    }, [elRef, updatePosition]);
-}
-
-function usePreventExitWithUnsavedChanges() {
-    const [unsavedChanges, setUnsavedChanges] = useState(false);
-
-    useEffect(() => {
-        const onBeforeUnload = (e: BeforeUnloadEvent) => {
-            if (unsavedChanges) {
-                e.preventDefault();
-                e.returnValue = "";
-            }
-        };
-
-        window.addEventListener("beforeunload", onBeforeUnload);
-
-        return () => {
-            window.removeEventListener("beforeunload", onBeforeUnload);
-        };
-    }, [unsavedChanges]);
-
-    return [unsavedChanges, setUnsavedChanges] as const;
-}
-
-function useStateWithTrackedHistory<T>(initialValue: T) {
-    type Action =
-        | { type: "set"; value: T }
-        | { type: "undo" }
-        | { type: "redo" }
-        | { type: "replace"; value: T };
-    type State = {
-        value: T;
-        history: T[];
-        index: number;
-    };
-    const [state, dispatch] = useReducer(
-        (state: State, action: Action) => {
-            switch (action.type) {
-                case "set":
-                    return {
-                        ...state,
-                        value: action.value,
-                        history: [...state.history, state.value],
-                        index: state.history.length,
-                    };
-                case "undo":
-                    if (state.index === 0) return state;
-                    return {
-                        ...state,
-                        value: state.history[state.index - 1],
-                        index: state.index - 1,
-                    };
-                case "redo":
-                    if (state.index === state.history.length) return state;
-                    return {
-                        ...state,
-                        value: state.history[state.index + 1],
-                        index: state.index + 1,
-                    };
-                case "replace":
-                    return {
-                        ...state,
-                        value: action.value,
-                        history: [],
-                        index: 0,
-                    };
-            }
-        },
-        {
-            value: initialValue,
-            history: [],
-            index: 0,
-        },
-    );
-
-    const undo = useCallback(() => dispatch({ type: "undo" }), []);
-    const redo = useCallback(() => dispatch({ type: "redo" }), []);
-    const canUndo = state.index > 0;
-    const canRedo = state.index < state.history.length - 1;
-
-    const setValue = useCallback((value: T) => {
-        dispatch({ type: "set", value });
-    }, []);
-
-    const { value } = state;
-
-    return { value, setValue, canUndo, canRedo, undo, redo };
-}
diff --git a/src/client/editor/hooks.ts b/src/client/editor/hooks.ts
new file mode 100644
index 00000000..a3e886cf
--- /dev/null
+++ b/src/client/editor/hooks.ts
@@ -0,0 +1,137 @@
+import { type RefObject, useEffect, useState, useReducer, useCallback } from "react";
+
+export function useDraggable(
+    elRef: RefObject<HTMLElement>,
+    updatePosition: (screenX: number, screenY: number) => void,
+) {
+    useEffect(() => {
+        const el = elRef.current;
+        if (!el) return;
+
+        // TODO: better name for these?
+        let pos1 = 0,
+            pos2 = 0,
+            pos3 = 0,
+            pos4 = 0;
+
+        const onMouseDown = (e) => {
+            e.preventDefault();
+            // get the mouse cursor position at startup:
+            pos3 = e.clientX;
+            pos4 = e.clientY;
+            document.onmouseup = closeDragElement;
+            // call a fn whenever the cursor moves:
+            document.onmousemove = elementDrag;
+        };
+
+        const elementDrag = (e) => {
+            e.preventDefault();
+            pos1 = pos3 - e.clientX;
+            pos2 = pos4 - e.clientY;
+            pos3 = e.clientX;
+            pos4 = e.clientY;
+            const x = el.offsetLeft - pos1;
+            const y = el.offsetTop - pos2;
+            updatePosition(x, y);
+        };
+
+        const closeDragElement = () => {
+            document.onmouseup = null;
+            document.onmousemove = null;
+        };
+
+        el.addEventListener("mousedown", onMouseDown);
+
+        return () => {
+            el.removeEventListener("mousedown", onMouseDown);
+            document.removeEventListener("mousemove", elementDrag);
+            document.removeEventListener("mouseup", closeDragElement);
+        };
+    }, [elRef, updatePosition]);
+}
+
+export function usePreventExitWithUnsavedChanges() {
+    const [unsavedChanges, setUnsavedChanges] = useState(false);
+
+    useEffect(() => {
+        const onBeforeUnload = (e: BeforeUnloadEvent) => {
+            if (unsavedChanges) {
+                e.preventDefault();
+                e.returnValue = "";
+            }
+        };
+
+        window.addEventListener("beforeunload", onBeforeUnload);
+
+        return () => {
+            window.removeEventListener("beforeunload", onBeforeUnload);
+        };
+    }, [unsavedChanges]);
+
+    return [unsavedChanges, setUnsavedChanges] as const;
+}
+
+export function useStateWithTrackedHistory<T>(initialValue: T) {
+    type Action =
+        | { type: "set"; value: T }
+        | { type: "undo" }
+        | { type: "redo" }
+        | { type: "replace"; value: T };
+    type State = {
+        value: T;
+        history: T[];
+        index: number;
+    };
+    const [state, dispatch] = useReducer(
+        (state: State, action: Action) => {
+            switch (action.type) {
+                case "set":
+                    return {
+                        ...state,
+                        value: action.value,
+                        history: [...state.history, state.value],
+                        index: state.history.length,
+                    };
+                case "undo":
+                    if (state.index === 0) return state;
+                    return {
+                        ...state,
+                        value: state.history[state.index - 1],
+                        index: state.index - 1,
+                    };
+                case "redo":
+                    if (state.index === state.history.length) return state;
+                    return {
+                        ...state,
+                        value: state.history[state.index + 1],
+                        index: state.index + 1,
+                    };
+                case "replace":
+                    return {
+                        ...state,
+                        value: action.value,
+                        history: [],
+                        index: 0,
+                    };
+            }
+        },
+        {
+            value: initialValue,
+            history: [],
+            index: 0,
+        },
+    );
+
+    const undo = useCallback(() => dispatch({ type: "undo" }), []);
+    const redo = useCallback(() => dispatch({ type: "redo" }), []);
+    const canUndo = state.index > 0;
+    const canRedo = state.index < state.history.length - 1;
+
+    const setValue = useCallback((value: T) => {
+        dispatch({ type: "set", value });
+    }, []);
+
+    const { value } = state;
+
+    return { value, setValue, canUndo, canRedo, undo, redo };
+}
diff --git a/src/client/editor/points.tsx b/src/client/editor/points.tsx
new file mode 100644
index 00000000..1dd4271d
--- /dev/null
+++ b/src/client/editor/points.tsx
@@ -0,0 +1,103 @@
+import { ContextMenu, Menu, MenuItem, MenuDivider } from "@blueprintjs/core";
+import { useRef } from "react";
+import { type Point, SplinePointType, type Coords } from "../../common/spline";
+import { robotSize } from "../debug/simulator";
+import { useDraggable } from "./hooks";
+
+export function SplinePoint({
+    point,
+    moveFn,
+    switchToQuadraticFn = undefined,
+    switchToCubicFn = undefined,
+    deleteFn = undefined,
+}: {
+    point: Point;
+    moveFn: (x: number, y: number) => void;
+    deleteFn?: () => void;
+    switchToQuadraticFn?: () => void;
+    switchToCubicFn?: () => void;
+}) {
+    // TODO: fix context menu positioning
+    const mainPointRef = useRef<HTMLElement>(null);
+    useDraggable(mainPointRef, (screenX, screenY) =>
+        moveFn(screenX + robotSize / 4, screenY + robotSize / 4),
+    );
+
+    const mainPointColor =
+        point.type === SplinePointType.StartPoint ? "blue" : "black";
+    const mainCoords =
+        point.type === SplinePointType.StartPoint ?
+            point.point
+        :   point.endPoint;
+
+    return (
+        <ContextMenu
+            content={
+                <Menu>
+                    {point.type === SplinePointType.CubicBezier && (
+                        <MenuItem
+                            text="Switch to Quadratic"
+                            onClick={switchToQuadraticFn}
+                        />
+                    )}
+                    {point.type === SplinePointType.QuadraticBezier && (
+                        <MenuItem
+                            text="Switch to Cubic"
+                            onClick={switchToCubicFn}
+                        />
+                    )}
+                    <MenuItem
+                        text="Delete..."
+                        intent="danger"
+                        onClick={deleteFn}
+                        disabled={!deleteFn}
+                    />
+                    <MenuDivider />
+                    <MenuItem disabled={true} text={`Type: ${point.type}`} />
+                </Menu>
+            }
+        >
+            <span
+                ref={mainPointRef}
+                style={{
+                    width: robotSize / 2,
+                    height: robotSize / 2,
+                    backgroundColor: mainPointColor,
+                    borderRadius: "50%",
+                    position: "absolute",
+                    left: mainCoords.x - robotSize / 4,
+                    top: mainCoords.y - robotSize / 4,
+                    cursor: "grab",
+                }}
+            />
+        </ContextMenu>
+    );
+}
+export function SplineControlPoint({
+    point,
+    moveControlFn,
+}: {
+    point: Coords;
+    moveControlFn: (x: number, y: number) => void;
+}) {
+    const controlPointRef = useRef<HTMLElement>(null);
+    useDraggable(controlPointRef, (screenX, screenY) =>
+        moveControlFn(screenX + robotSize / 4, screenY + robotSize / 4),
+    );
+
+    return (
+        <span
+            ref={controlPointRef}
+            style={{
+                width: robotSize / 2,
+                height: robotSize / 2,
+                backgroundColor: "red",
+                borderRadius: "50%",
+                position: "absolute",
+                left: point.x - robotSize / 4,
+                top: point.y - robotSize / 4,
+                cursor: "grab",
+            }}
+        />
+    );
+}
diff --git a/src/client/editor/spline-editor.tsx b/src/client/editor/spline-editor.tsx
new file mode 100644
index 00000000..46c8f0c5
--- /dev/null
+++ b/src/client/editor/spline-editor.tsx
@@ -0,0 +1,175 @@
+import { useReducer, useMemo } from "react";
+import {
+    type Spline,
+    type Coords,
+    SplinePointType,
+    type QuadraticBezier,
+    type CubicBezier,
+    splineToSvgDrawAttribute,
+} from "../../common/spline";
+import { SplinePoint, SplineControlPoint } from "./points";
+
+export function SplineEditor({ initialSpline }: { initialSpline: Spline }) {
+    type SplineEditorAction =
+        | { type: "DELETE_POINT"; index: number }
+        | { type: "DELETE_START_POINT" }
+        | { type: "MOVE_POINT_ENDPOINT"; coords: Coords; index: number }
+        | { type: "MOVE_START_POINT"; coords: Coords }
+        | { type: "MOVE_CONTROL_POINT"; coords: Coords; index: number }
+        | { type: "SWITCH_TO_QUADRATIC"; index: number }
+        | { type: "SWITCH_TO_CUBIC"; index: number };
+
+    const [spline, dispatch] = useReducer(
+        (state: Spline, action: SplineEditorAction): Spline => {
+            switch (action.type) {
+                case "DELETE_POINT": {
+                    return {
+                        ...state,
+                        points: state.points.toSpliced(action.index, 1),
+                    };
+                }
+                case "DELETE_START_POINT": {
+                    if (state.points.length === 0) return state;
+                    return {
+                        ...state,
+                        start: {
+                            type: SplinePointType.StartPoint,
+                            point: state.points[0].endPoint,
+                        },
+                        points: state.points.slice(1),
+                    };
+                }
+                case "MOVE_POINT_ENDPOINT": {
+                    const newPoints = [...state.points];
+                    newPoints[action.index].endPoint = action.coords;
+                    return { ...state, points: newPoints };
+                }
+                case "MOVE_START_POINT": {
+                    return {
+                        ...state,
+                        start: {
+                            type: SplinePointType.StartPoint,
+                            point: action.coords,
+                        },
+                    };
+                }
+                case "MOVE_CONTROL_POINT": {
+                    const point = state.points[action.index];
+                    if (point.type !== SplinePointType.CubicBezier) {
+                        return state;
+                    }
+
+                    point.controlPoint = action.coords;
+
+                    const newPoints = [...state.points];
+                    newPoints[action.index] = point;
+
+                    return { ...state, points: newPoints };
+                }
+                case "SWITCH_TO_QUADRATIC": {
+                    const point = state.points[action.index];
+                    if (point.type !== SplinePointType.CubicBezier) {
+                        return state;
+                    }
+
+                    const newPoint: QuadraticBezier = {
+                        type: SplinePointType.QuadraticBezier,
+                        endPoint: point.endPoint,
+                    };
+
+                    const newPoints = [...state.points];
+                    newPoints[action.index] = newPoint;
+
+                    return { ...state, points: newPoints };
+                }
+                case "SWITCH_TO_CUBIC": {
+                    const point = state.points[action.index];
+                    if (point.type !== SplinePointType.QuadraticBezier) {
+                        return state;
+                    }
+
+                    const newPoint: CubicBezier = {
+                        type: SplinePointType.CubicBezier,
+                        controlPoint: {
+                            x: point.endPoint.x / 2,
+                            y: point.endPoint.y / 2,
+                        },
+                        endPoint: point.endPoint,
+                    };
+
+                    const newPoints = [...state.points];
+                    newPoints[action.index] = newPoint;
+
+                    return { ...state, points: newPoints };
+                }
+            }
+
+            return state;
+        },
+        initialSpline,
+    );
+    const path = useMemo(() => splineToSvgDrawAttribute(spline), [spline]);
+    return (
+        <>
+            <svg
+                style={{
+                    position: "absolute",
+                    left: 0,
+                    top: 0,
+                    width: "100%",
+                    height: "100%",
+                    pointerEvents: "none",
+                }}
+            >
+                <path d={path} stroke="purple" strokeWidth={3} fill="none" />
+            </svg>
+            <SplinePoint
+                point={spline.start}
+                deleteFn={
+                    spline.points.length > 0 ?
+                        () => dispatch({ type: "DELETE_START_POINT" })
+                    :   undefined
+                }
+                moveFn={(x, y) =>
+                    dispatch({ type: "MOVE_START_POINT", coords: { x, y } })
+                }
+            />
+            {spline.points.map((point, index) => (
+                <>
+                    <SplinePoint
+                        point={point}
+                        deleteFn={() =>
+                            dispatch({ type: "DELETE_POINT", index })
+                        }
+                        moveFn={(x, y) =>
+                            dispatch({
+                                type: "MOVE_POINT_ENDPOINT",
+                                coords: { x, y },
+                                index,
+                            })
+                        }
+                        switchToQuadraticFn={() =>
+                            dispatch({ type: "SWITCH_TO_QUADRATIC", index })
+                        }
+                        switchToCubicFn={() =>
+                            dispatch({ type: "SWITCH_TO_CUBIC", index })
+                        }
+                    />
+                    {/* TODO: add line between control point and end point */}
+                    {point.type === SplinePointType.CubicBezier && (
+                        <SplineControlPoint
+                            point={point.controlPoint}
+                            moveControlFn={(x, y) =>
+                                dispatch({
+                                    type: "MOVE_CONTROL_POINT",
+                                    coords: { x, y },
+                                    index,
+                                })
+                            }
+                        />
+                    )}
+                </>
+            ))}
+        </>
+    );
+}

From d7e625d34a6a73ce688f946ae0a16a1f3b22dedd Mon Sep 17 00:00:00 2001
From: Jason Antwi-Appah <hey@jasonaa.me>
Date: Sat, 12 Apr 2025 15:33:32 -0500
Subject: [PATCH 19/92] Change default show name

---
 src/common/show.ts | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/common/show.ts b/src/common/show.ts
index 0857ea86..05955211 100644
--- a/src/common/show.ts
+++ b/src/common/show.ts
@@ -81,6 +81,7 @@ export function timelineLayerToSpline(layer: TimelineLayer): Spline {
     };
 }
 
+// TODO: empty showfile
 export function createNewShowfile(): Showfile {
     return {
         $chessbots_show_schema_version: 1,
@@ -105,6 +106,10 @@ export function createNewShowfile(): Showfile {
                             endPoint: { x: 100, y: 100 },
                         },
                     },
+                    {
+                       type: TimelineEventTypes.WaitEvent,
+                       durationMs: 5000,
+                    },
                     {
                         type: TimelineEventTypes.GoToPointEvent,
                         durationMs: 1000,
@@ -128,6 +133,6 @@ export function createNewShowfile(): Showfile {
                 ],
             ],
         ],
-        name: "new show",
+        name: `Show ${new Date().toDateString()} ${new Date().toLocaleTimeString()}`,
     };
 }

From 34b444dbf5564432f1854b3ecca598e3eec354ba Mon Sep 17 00:00:00 2001
From: Jason Antwi-Appah <hey@jasonaa.me>
Date: Sat, 12 Apr 2025 18:59:48 -0500
Subject: [PATCH 20/92] Lint + format

---
 src/client/editor/hooks.ts | 8 +++++++-
 src/common/show.ts         | 6 ++----
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/client/editor/hooks.ts b/src/client/editor/hooks.ts
index a3e886cf..9f4689c1 100644
--- a/src/client/editor/hooks.ts
+++ b/src/client/editor/hooks.ts
@@ -1,4 +1,10 @@
-import { type RefObject, useEffect, useState, useReducer, useCallback } from "react";
+import {
+    type RefObject,
+    useEffect,
+    useState,
+    useReducer,
+    useCallback,
+} from "react";
 
 export function useDraggable(
     elRef: RefObject<HTMLElement>,
diff --git a/src/common/show.ts b/src/common/show.ts
index 05955211..e3003009 100644
--- a/src/common/show.ts
+++ b/src/common/show.ts
@@ -11,9 +11,7 @@ import {
     Tuple,
 } from "runtypes";
 import {
-    CoordsSchema,
     MidpointSchema,
-    PointSchema,
     Spline,
     SplinePointType,
     StartPointSchema,
@@ -107,8 +105,8 @@ export function createNewShowfile(): Showfile {
                         },
                     },
                     {
-                       type: TimelineEventTypes.WaitEvent,
-                       durationMs: 5000,
+                        type: TimelineEventTypes.WaitEvent,
+                        durationMs: 5000,
                     },
                     {
                         type: TimelineEventTypes.GoToPointEvent,

From b77c15fb126fe9059d748b8266c5937968c06682 Mon Sep 17 00:00:00 2001
From: Jason Antwi-Appah <hey@jasonaa.me>
Date: Sun, 13 Apr 2025 00:43:06 -0500
Subject: [PATCH 21/92] Rough impl of play/pause

---
 src/client/debug/simulator.tsx |   1 +
 src/client/editor/editor.tsx   | 195 +++++++++++++++++++++++++++++++--
 src/common/show.ts             |  42 ++++---
 3 files changed, 215 insertions(+), 23 deletions(-)

diff --git a/src/client/debug/simulator.tsx b/src/client/debug/simulator.tsx
index bf018f97..f74f6786 100644
--- a/src/client/debug/simulator.tsx
+++ b/src/client/debug/simulator.tsx
@@ -207,6 +207,7 @@ const openInEditor = async (frame: StackFrame) => {
     await fetch(`/__open-in-editor?${params.toString()}`);
 };
 
+// TODO: refactor out of debug since we use it in more than just simulator?
 export function RobotGrid({
     robotState,
     children,
diff --git a/src/client/editor/editor.tsx b/src/client/editor/editor.tsx
index b9a40b8f..9873f43c 100644
--- a/src/client/editor/editor.tsx
+++ b/src/client/editor/editor.tsx
@@ -19,14 +19,17 @@ import {
     Tag,
     useHotkeys,
     type HotkeyConfig,
+    Elevation,
 } from "@blueprintjs/core";
 import { RobotGrid } from "../debug/simulator";
 
 import { fileOpen, fileSave } from "browser-fs-access";
 import {
+    type TimelineEvents,
     createNewShowfile,
     ShowfileSchema,
     timelineLayerToSpline,
+    EVENT_TYPE_TO_COLOR,
 } from "../../common/show";
 import { diff } from "deep-object-diff";
 import {
@@ -34,6 +37,22 @@ import {
     useStateWithTrackedHistory,
 } from "./hooks";
 import { SplineEditor } from "./spline-editor";
+import {
+    motion,
+    useMotionValue,
+    useMotionValueEvent,
+    useTime,
+    useTransform,
+} from "motion/react";
+
+const RULER_TICK_INTERVAL_MS = 250;
+const RULER_EXTRA_TICK_COUNT = 10;
+// TODO: make ruler tick size configurable so we can zoom. relatively low priority. would be nice if gestures could be supported too
+const RULER_TICK_GAP = "1rem";
+
+function millisToXPosition(millis: number): string {
+    return `calc(${millis} / ${RULER_TICK_INTERVAL_MS} * ${RULER_TICK_GAP})`;
+}
 
 export function Editor() {
     const [initialShow, setInitialShow] = useState(createNewShowfile());
@@ -107,6 +126,15 @@ export function Editor() {
         setInitialShow(show);
     }, [fsHandle, show]);
 
+    // TODO: figure out how to get this from the showfile
+    const SEQUENCE_LENGTH_MS = 5 * 1000;
+
+    const { currentTimestamp, playing, togglePlaying } =
+        usePlayHead(SEQUENCE_LENGTH_MS);
+    const seekBarWidth = useTransform(() =>
+        millisToXPosition(currentTimestamp.get()),
+    );
+
     const hotkeys = useMemo<HotkeyConfig[]>(
         () => [
             {
@@ -143,8 +171,18 @@ export function Editor() {
                 label: "Redo",
                 onKeyDown: redo,
             },
+            {
+                combo: "space",
+                group: "Play/Pause",
+                global: true,
+                label: "Play/Pause",
+                onKeyDown: (e) => {
+                    e.preventDefault();
+                    togglePlaying();
+                },
+            },
         ],
-        [redo, undo, saveShowfile, openShowfile],
+        [redo, undo, saveShowfile, openShowfile, togglePlaying],
     );
 
     const { handleKeyDown, handleKeyUp } = useHotkeys(hotkeys);
@@ -208,6 +246,7 @@ export function Editor() {
                     />
                 </ButtonGroup>
             </Card>
+            {/* TODO: render robots */}
             <RobotGrid robotState={{}}>
                 {/* TODO: think more about how state changes will make it up from the editor to this component */}
                 {show.timeline
@@ -223,29 +262,83 @@ export function Editor() {
                 style={{ height: "100%" }}
                 rightElement={<Button icon="add" text="Add Robot" />}
             >
+                <ButtonGroup>
+                    <Button
+                        icon={playing ? "pause" : "play"}
+                        text={playing ? "Pause" : "Play"}
+                        onClick={togglePlaying}
+                        variant="outlined"
+                    />
+                </ButtonGroup>
                 <div
                     style={{
                         overflowY: "scroll",
                         maxHeight: "100%",
                         display: "grid",
                         gridTemplateColumns: "max-content 1fr",
-                        gap: "0rem 0.5rem",
+                        gap: `0rem ${RULER_TICK_GAP}`,
                     }}
                 >
-                    {/* TODO: figure out timeline UI. support deleting robots */}
-                    <TimelineRow title="Audio"> Stuff here</TimelineRow>
-                    {show.timeline.map((_, i) => (
-                        <TimelineRow title={`Robot ${i + 1}`}>
-                            Stuff here
-                        </TimelineRow>
-                    ))}
+                    <Ruler sequenceLengthMs={SEQUENCE_LENGTH_MS} />
+                    <TimelineLayer title="Seek">
+                        <motion.div
+                            style={{
+                                display: "flex",
+                                backgroundColor: "red",
+                                height: "1rem",
+                                width: seekBarWidth,
+                            }}
+                        />
+                    </TimelineLayer>
+                    {/* TODO: support deleting robots */}
+                    <TimelineLayer title="Audio"> Stuff here</TimelineLayer>
+                    {show.timeline.map(([startPoint, remainingEvents], i) => {
+                        return (
+                            <TimelineLayer title={`Robot ${i + 1}`}>
+                                <div style={{ display: "flex" }}>
+                                    <TimelineEvent event={startPoint} />
+                                    {remainingEvents.map((event) => {
+                                        return <TimelineEvent event={event} />;
+                                    })}
+                                </div>
+                                {/* TODO: add ability to add events */}
+                            </TimelineLayer>
+                        );
+                    })}
                 </div>
             </Section>
         </div>
     );
 }
 
-const TimelineRow = forwardRef<
+const TimelineEvent = forwardRef<HTMLDivElement, { event: TimelineEvents }>(
+    function TimelineEvent(props, ref) {
+        const { event } = props;
+        // TODO: add context menu for deleting events and adding a new event before and after this one
+
+        // TODO: add handles to the edges of the event to edit durations. add a switch for ripple vs rolling edits
+
+        // ripple edits mean that editing the duration of an event has a ripple effect on ALL the other events in the same layer, shifting all the subsequent event start times by the same amount (so only one event's duration is actually changing)
+        // rolling edits mean that editing the duration of an event also affects the duration of the event that immediately follows it in the same layer, such that adjusting the duration of this event doesn't shift the start timestamp of the subsequent events in the same layer
+
+        return (
+            <Card
+                ref={ref}
+                style={{
+                    width: millisToXPosition(event.durationMs),
+                    backgroundColor: EVENT_TYPE_TO_COLOR[event.type],
+                    color: "white",
+                }}
+                compact
+                elevation={Elevation.TWO}
+            >
+                {event.type}
+            </Card>
+        );
+    },
+);
+
+const TimelineLayer = forwardRef<
     HTMLDivElement,
     PropsWithChildren<{ title: string }>
 >(function TimelineCard(props, ref) {
@@ -267,3 +360,85 @@ const TimelineRow = forwardRef<
         </SectionCard>
     );
 });
+
+function Ruler({ sequenceLengthMs }: { sequenceLengthMs: number }) {
+    return (
+        <TimelineLayer title="Ruler">
+            <div
+                style={{
+                    display: "flex",
+                    width: "max-content",
+                    overflowX: "scroll",
+                    justifyContent: "space-between",
+                    alignItems: "center",
+                    gap: RULER_TICK_GAP,
+                }}
+            >
+                {new Array(
+                    Math.round(sequenceLengthMs / RULER_TICK_INTERVAL_MS) +
+                        RULER_EXTRA_TICK_COUNT,
+                )
+                    .fill(1)
+                    .map((_, i) => {
+                        // Check if this tick marks a 1000ms interval (every 4 ticks if RULER_INTERVAL_MS is 250)
+                        const isMajorTick =
+                            i % (1000 / RULER_TICK_INTERVAL_MS) === 0;
+                        return (
+                            <div
+                                key={`tick-${i}`}
+                                style={{
+                                    borderRight: "1px solid gray",
+                                    height: isMajorTick ? "1rem" : "0.5rem",
+                                }}
+                            />
+                        );
+                    })}
+            </div>
+        </TimelineLayer>
+    );
+}
+
+function usePlayHead(endDurationMs: number, startMs = 0) {
+    const [playing, setPlaying] = useState(false);
+    const currentTimestamp = useMotionValue(startMs);
+    const time = useTime();
+    const lastAccessedTime = useMotionValue(0);
+
+    const setTimestamp = (timestamp: number) => {
+        currentTimestamp.set(timestamp);
+    };
+
+    const togglePlaying = () => {
+        setPlaying((p) => {
+            if (!p) {
+                // When starting playback, initialize the lastAccessedTime
+                lastAccessedTime.set(time.get());
+            }
+            return !p;
+        });
+    };
+
+    useMotionValueEvent(time, "change", (currentTime) => {
+        if (!playing) {
+            return;
+        }
+
+        const prevTime = lastAccessedTime.get();
+        const elapsedMs = currentTime - prevTime;
+
+        // Update timestamp based on elapsed time
+        const newTimestamp = currentTimestamp.get() + elapsedMs;
+
+        if (newTimestamp >= endDurationMs) {
+            // Loop back to start when reaching the end
+            currentTimestamp.set(0);
+        } else {
+            currentTimestamp.set(newTimestamp);
+        }
+
+        // Update last accessed time for next calculation
+        lastAccessedTime.set(currentTime);
+    });
+
+    return { currentTimestamp, playing, togglePlaying, setTimestamp };
+}
diff --git a/src/common/show.ts b/src/common/show.ts
index e3003009..3f88f9ff 100644
--- a/src/common/show.ts
+++ b/src/common/show.ts
@@ -1,7 +1,7 @@
 import {
     Number,
     String,
-    Record,
+    Record as RuntypesRecord,
     Array,
     Literal,
     Union,
@@ -12,14 +12,14 @@ import {
 } from "runtypes";
 import {
     MidpointSchema,
-    Spline,
+    type Spline,
     SplinePointType,
     StartPointSchema,
 } from "./spline";
 
 // JSON file would use the Showfile type.
 
-const AudioSchema = Record({
+const AudioSchema = RuntypesRecord({
     startMs: Number,
     // maybe we use something like capnproto, msgpack, or protobuf so we could
     // include an audio file in the showfile. if we really wanted to use JSON we'd
@@ -29,26 +29,27 @@ const AudioSchema = Record({
     tempoBpm: Union(Number, Null),
 });
 
-enum TimelineEventTypes {
-    GoToPointEvent = "goto_point",
-    WaitEvent = "wait",
-    StartPointEvent = "start_point",
-}
+const TimelineEventTypes = {
+    GoToPointEvent: "goto_point",
+    WaitEvent: "wait",
+    StartPointEvent: "start_point",
+} as const;
 
-const GoToPointEventSchema = Record({
+const GoToPointEventSchema = RuntypesRecord({
     durationMs: Number,
     target: MidpointSchema,
     type: Literal(TimelineEventTypes.GoToPointEvent),
 });
 
-const WaitEventSchema = Record({
+const WaitEventSchema = RuntypesRecord({
     durationMs: Number,
     type: Literal(TimelineEventTypes.WaitEvent),
 });
 
-const StartPointEventSchema = Record({
+const StartPointEventSchema = RuntypesRecord({
     type: Literal(TimelineEventTypes.StartPointEvent),
     target: StartPointSchema,
+    durationMs: Number,
 });
 
 const TimelineEventSchema = Union(GoToPointEventSchema, WaitEventSchema);
@@ -57,7 +58,11 @@ const TimelineLayerSchema = Tuple(
     Array(TimelineEventSchema),
 );
 
-export const ShowfileSchema = Record({
+export type TimelineEvents =
+    | Static<typeof TimelineEventSchema>
+    | Static<typeof StartPointEventSchema>;
+
+export const ShowfileSchema = RuntypesRecord({
     $chessbots_show_schema_version: Literal(1),
     timeline: Array(TimelineLayerSchema),
     audio: Optional(AudioSchema),
@@ -65,7 +70,6 @@ export const ShowfileSchema = Record({
 });
 
 export type Audio = Static<typeof AudioSchema>;
-export type MovementEvent = Static<typeof GoToPointEventSchema>;
 export type TimelineLayer = Static<typeof TimelineLayerSchema>;
 export type Showfile = Static<typeof ShowfileSchema>;
 
@@ -94,6 +98,7 @@ export function createNewShowfile(): Showfile {
                             y: 70,
                         },
                     },
+                    durationMs: 7500,
                 },
                 [
                     {
@@ -134,3 +139,14 @@ export function createNewShowfile(): Showfile {
         name: `Show ${new Date().toDateString()} ${new Date().toLocaleTimeString()}`,
     };
 }
+
+import { Colors } from "@blueprintjs/core";
+
+export const EVENT_TYPE_TO_COLOR: Record<
+    (typeof TimelineEventTypes)[keyof typeof TimelineEventTypes],
+    (typeof Colors)[keyof typeof Colors]
+> = {
+    [TimelineEventTypes.GoToPointEvent]: Colors.BLUE2,
+    [TimelineEventTypes.WaitEvent]: Colors.GRAY2,
+    [TimelineEventTypes.StartPointEvent]: Colors.GREEN2,
+};

From 962c446cddc7a3451c997e1b96c2d99939c21810 Mon Sep 17 00:00:00 2001
From: Jason Antwi-Appah <hey@jasonaa.me>
Date: Sun, 13 Apr 2025 22:59:25 -0500
Subject: [PATCH 22/92] Optimize renders, audio playback, timeline layer
 addition/deletion

---
 src/client/editor/editor.tsx        | 151 +++++++++++++++++++++++-----
 src/client/editor/points.tsx        |  32 +++---
 src/client/editor/spline-editor.tsx |  37 ++++---
 src/common/show.ts                  |  20 ++--
 4 files changed, 173 insertions(+), 67 deletions(-)

diff --git a/src/client/editor/editor.tsx b/src/client/editor/editor.tsx
index 9873f43c..3474cbfb 100644
--- a/src/client/editor/editor.tsx
+++ b/src/client/editor/editor.tsx
@@ -5,6 +5,7 @@ import {
     useCallback,
     useEffect,
     useMemo,
+    useRef,
     useState,
 } from "react";
 import {
@@ -30,6 +31,8 @@ import {
     ShowfileSchema,
     timelineLayerToSpline,
     EVENT_TYPE_TO_COLOR,
+    type TimelineLayer,
+    TimelineEventTypes,
 } from "../../common/show";
 import { diff } from "deep-object-diff";
 import {
@@ -44,6 +47,7 @@ import {
     useTime,
     useTransform,
 } from "motion/react";
+import { SplinePointType } from "../../common/spline";
 
 const RULER_TICK_INTERVAL_MS = 250;
 const RULER_EXTRA_TICK_COUNT = 10;
@@ -54,6 +58,9 @@ function millisToXPosition(millis: number): string {
     return `calc(${millis} / ${RULER_TICK_INTERVAL_MS} * ${RULER_TICK_GAP})`;
 }
 
+// TODO: reading blob.bytes works in safari but not chrome. why?
+// TODO: ui for adding/removing audio - remove current hotkey as this was mainly for testing
+
 export function Editor() {
     const [initialShow, setInitialShow] = useState(createNewShowfile());
     const [fsHandle, setFsHandle] = useState<FileSystemFileHandle | null>(null);
@@ -66,6 +73,8 @@ export function Editor() {
         redo,
     } = useStateWithTrackedHistory(initialShow);
 
+    const { audio } = show;
+
     // TODO: fix viewport height / timeline height
     const [unsavedChanges, setUnsavedChanges] =
         usePreventExitWithUnsavedChanges();
@@ -82,7 +91,8 @@ export function Editor() {
     const openShowfile = useCallback(async () => {
         const blob = await fileOpen({
             mimeTypes: ["application/chessbots-showfile"],
-            extensions: ["cbor"],
+            extensions: [".cbor"],
+            description: "Chess Bots Showfile",
         });
 
         let data: unknown | null = null;
@@ -105,8 +115,6 @@ export function Editor() {
         setInitialShow(show);
         setShow(show);
         if (blob.handle) setFsHandle(blob.handle);
-
-        console.log(show);
     }, [setShow]);
 
     const saveShowfile = useCallback(async () => {
@@ -117,7 +125,7 @@ export function Editor() {
             blob,
             {
                 mimeTypes: ["application/chessbots-showfile"],
-                extensions: ["cbor"],
+                extensions: [".cbor"],
                 fileName: show.name + ".cbor",
             },
             fsHandle,
@@ -126,6 +134,18 @@ export function Editor() {
         setInitialShow(show);
     }, [fsHandle, show]);
 
+    const loadAudioFromFile = useCallback(async () => {
+        const blob = await fileOpen({
+            mimeTypes: ["audio/mpeg", "audio/wav"],
+            extensions: [".mp3", ".wav"],
+        });
+        const audio = await blob.bytes();
+        setShow({
+            ...show,
+            audio: { startMs: 0, data: audio, tempoBpm: null, mimeType: blob.type },
+        });
+    }, [setShow, show]);
+
     // TODO: figure out how to get this from the showfile
     const SEQUENCE_LENGTH_MS = 5 * 1000;
 
@@ -181,15 +201,84 @@ export function Editor() {
                     togglePlaying();
                 },
             },
+            {
+                combo: "mod+shift+f",
+                group: "Edit",
+                global: true,
+                label: "Load Audio",
+                onKeyDown: (e) => {
+                    e.preventDefault();
+                    loadAudioFromFile();
+                },
+            },
+        ],
+        [
+            redo,
+            undo,
+            saveShowfile,
+            openShowfile,
+            togglePlaying,
+            loadAudioFromFile,
         ],
-        [redo, undo, saveShowfile, openShowfile, togglePlaying],
     );
 
+    const editName = useCallback(
+        (value: string) => setShow({ ...show, name: value }),
+        [show, setShow],
+    );
     const { handleKeyDown, handleKeyUp } = useHotkeys(hotkeys);
 
+    const audioRef = useRef(new Audio());
+
+    useEffect(() => {
+        if (!audio) return;
+
+        audioRef.current.src = URL.createObjectURL(new Blob([audio.data], {
+            type: audio.mimeType,
+        }));
+        audioRef.current.load();
+    }, [audio]);
+
+    useEffect(() => {
+        if (!audioRef.current) return;
+
+        if (playing && audioRef.current.paused) {
+            audioRef.current.currentTime = Math.min(
+                currentTimestamp.get() / 1000,
+                audioRef.current.duration,
+            );
+            audioRef.current.play();
+        }
+
+        if (!playing && !audioRef.current.paused) {
+            audioRef.current.pause();
+        }
+    }, [playing, currentTimestamp]);
+
+    const addRobot = useCallback(() => {
+        const newLayer: TimelineLayer = [
+            {
+                type: TimelineEventTypes.StartPointEvent,
+                target: {
+                    type: SplinePointType.StartPoint,
+                    point: {
+                        x: 0,
+                        y: 70,
+                    },
+                },
+                durationMs: 7500,
+            },
+            [],
+        ];
+        setShow({
+            ...show,
+            timeline: [...show.timeline, newLayer],
+        });
+    }, [show, setShow]);
+
     return (
         <div
-            style={{ height: "100vh" }}
+            style={{ maxHeight: "100vh" }}
             onKeyDown={handleKeyDown}
             onKeyUp={handleKeyUp}
         >
@@ -205,9 +294,7 @@ export function Editor() {
                         <EditableText
                             placeholder="Click to edit..."
                             value={show.name}
-                            onChange={(value) =>
-                                setShow({ ...show, name: value })
-                            }
+                            onChange={editName}
                         />
                     </H2>
                     {unsavedChanges && (
@@ -255,12 +342,13 @@ export function Editor() {
                         <SplineEditor initialSpline={spline} />
                     ))}
             </RobotGrid>
-            {/* TODO: implement add button  */}
             <Section
                 title="Timeline"
                 compact
                 style={{ height: "100%" }}
-                rightElement={<Button icon="add" text="Add Robot" />}
+                rightElement={
+                    <Button icon="add" text="Add Robot" onClick={addRobot} />
+                }
             >
                 <ButtonGroup>
                     <Button
@@ -290,11 +378,18 @@ export function Editor() {
                             }}
                         />
                     </TimelineLayer>
-                    {/* TODO: support deleting robots */}
                     <TimelineLayer title="Audio"> Stuff here</TimelineLayer>
                     {show.timeline.map(([startPoint, remainingEvents], i) => {
                         return (
-                            <TimelineLayer title={`Robot ${i + 1}`}>
+                            <TimelineLayer
+                                title={`Robot ${i + 1}`}
+                                onDelete={() =>
+                                    setShow({
+                                        ...show,
+                                        timeline: show.timeline.toSpliced(i, 1),
+                                    })
+                                }
+                            >
                                 <div style={{ display: "flex" }}>
                                     <TimelineEvent event={startPoint} />
                                     {remainingEvents.map((event) => {
@@ -340,9 +435,8 @@ const TimelineEvent = forwardRef<HTMLDivElement, { event: TimelineEvents }>(
 
 const TimelineLayer = forwardRef<
     HTMLDivElement,
-    PropsWithChildren<{ title: string }>
->(function TimelineCard(props, ref) {
-    const { title, children } = props;
+    PropsWithChildren<{ title: string; onDelete?: () => void }>
+>(function TimelineCard({ title, children, onDelete }, ref) {
     // TODO: add borders between columns. v low priority
     // https://codepen.io/Kevin-Geary/pen/BavwqYX
     // https://www.youtube.com/watch?v=EQYft7JPKto
@@ -355,7 +449,17 @@ const TimelineLayer = forwardRef<
                 gridColumn: "1 / span 2",
             }}
         >
-            <Text style={{ fontWeight: "bold" }}>{title}</Text>
+            <span>
+                <Text style={{ fontWeight: "bold" }}>{title}</Text>
+                {onDelete && (
+                    <Button
+                        icon="trash"
+                        variant="minimal"
+                        onClick={onDelete}
+                        style={{ gridColumn: "1 / span 2" }}
+                    />
+                )}
+            </span>
             {children}
         </SectionCard>
     );
@@ -408,15 +512,16 @@ function usePlayHead(endDurationMs: number, startMs = 0) {
         currentTimestamp.set(timestamp);
     };
 
-    const togglePlaying = () => {
+    const togglePlaying = useCallback(() => {
         setPlaying((p) => {
-            if (!p) {
+            const newPlaying = !p;
+            if (newPlaying) {
                 // When starting playback, initialize the lastAccessedTime
                 lastAccessedTime.set(time.get());
             }
-            return !p;
+            return newPlaying;
         });
-    };
+    }, [setPlaying, time, lastAccessedTime]);
 
     useMotionValueEvent(time, "change", (currentTime) => {
         if (!playing) {
@@ -426,17 +531,15 @@ function usePlayHead(endDurationMs: number, startMs = 0) {
         const prevTime = lastAccessedTime.get();
         const elapsedMs = currentTime - prevTime;
 
-        // Update timestamp based on elapsed time
         const newTimestamp = currentTimestamp.get() + elapsedMs;
 
         if (newTimestamp >= endDurationMs) {
-            // Loop back to start when reaching the end
+            setPlaying(false);
             currentTimestamp.set(0);
         } else {
             currentTimestamp.set(newTimestamp);
         }
 
-        // Update last accessed time for next calculation
         lastAccessedTime.set(currentTime);
     });
 
diff --git a/src/client/editor/points.tsx b/src/client/editor/points.tsx
index 1dd4271d..2383bba0 100644
--- a/src/client/editor/points.tsx
+++ b/src/client/editor/points.tsx
@@ -6,21 +6,21 @@ import { useDraggable } from "./hooks";
 
 export function SplinePoint({
     point,
-    moveFn,
-    switchToQuadraticFn = undefined,
-    switchToCubicFn = undefined,
-    deleteFn = undefined,
+    onMove,
+    onSwitchToQuadratic = undefined,
+    onSwitchToCubic = undefined,
+    onDelete = undefined,
 }: {
     point: Point;
-    moveFn: (x: number, y: number) => void;
-    deleteFn?: () => void;
-    switchToQuadraticFn?: () => void;
-    switchToCubicFn?: () => void;
+    onMove: (x: number, y: number) => void;
+    onDelete?: () => void;
+    onSwitchToQuadratic?: () => void;
+    onSwitchToCubic?: () => void;
 }) {
     // TODO: fix context menu positioning
     const mainPointRef = useRef<HTMLElement>(null);
     useDraggable(mainPointRef, (screenX, screenY) =>
-        moveFn(screenX + robotSize / 4, screenY + robotSize / 4),
+        onMove(screenX + robotSize / 4, screenY + robotSize / 4),
     );
 
     const mainPointColor =
@@ -37,20 +37,20 @@ export function SplinePoint({
                     {point.type === SplinePointType.CubicBezier && (
                         <MenuItem
                             text="Switch to Quadratic"
-                            onClick={switchToQuadraticFn}
+                            onClick={onSwitchToQuadratic}
                         />
                     )}
                     {point.type === SplinePointType.QuadraticBezier && (
                         <MenuItem
                             text="Switch to Cubic"
-                            onClick={switchToCubicFn}
+                            onClick={onSwitchToCubic}
                         />
                     )}
                     <MenuItem
                         text="Delete..."
                         intent="danger"
-                        onClick={deleteFn}
-                        disabled={!deleteFn}
+                        onClick={onDelete}
+                        disabled={!onDelete}
                     />
                     <MenuDivider />
                     <MenuItem disabled={true} text={`Type: ${point.type}`} />
@@ -75,14 +75,14 @@ export function SplinePoint({
 }
 export function SplineControlPoint({
     point,
-    moveControlFn,
+    onMove,
 }: {
     point: Coords;
-    moveControlFn: (x: number, y: number) => void;
+    onMove: (x: number, y: number) => void;
 }) {
     const controlPointRef = useRef<HTMLElement>(null);
     useDraggable(controlPointRef, (screenX, screenY) =>
-        moveControlFn(screenX + robotSize / 4, screenY + robotSize / 4),
+        onMove(screenX + robotSize / 4, screenY + robotSize / 4),
     );
 
     return (
diff --git a/src/client/editor/spline-editor.tsx b/src/client/editor/spline-editor.tsx
index 46c8f0c5..b6481ba5 100644
--- a/src/client/editor/spline-editor.tsx
+++ b/src/client/editor/spline-editor.tsx
@@ -1,4 +1,4 @@
-import { useReducer, useMemo } from "react";
+import { useReducer, useMemo, useCallback } from "react";
 import {
     type Spline,
     type Coords,
@@ -103,12 +103,23 @@ export function SplineEditor({ initialSpline }: { initialSpline: Spline }) {
                     return { ...state, points: newPoints };
                 }
             }
-
-            return state;
         },
         initialSpline,
     );
     const path = useMemo(() => splineToSvgDrawAttribute(spline), [spline]);
+
+    const onDeleteStartPoint = useMemo(() => {
+        return spline.points.length > 0 ?
+                () => dispatch({ type: "DELETE_START_POINT" })
+            :   undefined;
+    }, [spline.points.length]);
+
+    const onMoveStartPoint = useCallback(
+        (x: number, y: number) => {
+            dispatch({ type: "MOVE_START_POINT", coords: { x, y } });
+        },
+        [dispatch],
+    );
     return (
         <>
             <svg
@@ -125,33 +136,27 @@ export function SplineEditor({ initialSpline }: { initialSpline: Spline }) {
             </svg>
             <SplinePoint
                 point={spline.start}
-                deleteFn={
-                    spline.points.length > 0 ?
-                        () => dispatch({ type: "DELETE_START_POINT" })
-                    :   undefined
-                }
-                moveFn={(x, y) =>
-                    dispatch({ type: "MOVE_START_POINT", coords: { x, y } })
-                }
+                onDelete={onDeleteStartPoint}
+                onMove={onMoveStartPoint}
             />
             {spline.points.map((point, index) => (
                 <>
                     <SplinePoint
                         point={point}
-                        deleteFn={() =>
+                        onDelete={() =>
                             dispatch({ type: "DELETE_POINT", index })
                         }
-                        moveFn={(x, y) =>
+                        onMove={(x, y) =>
                             dispatch({
                                 type: "MOVE_POINT_ENDPOINT",
                                 coords: { x, y },
                                 index,
                             })
                         }
-                        switchToQuadraticFn={() =>
+                        onSwitchToQuadratic={() =>
                             dispatch({ type: "SWITCH_TO_QUADRATIC", index })
                         }
-                        switchToCubicFn={() =>
+                        onSwitchToCubic={() =>
                             dispatch({ type: "SWITCH_TO_CUBIC", index })
                         }
                     />
@@ -159,7 +164,7 @@ export function SplineEditor({ initialSpline }: { initialSpline: Spline }) {
                     {point.type === SplinePointType.CubicBezier && (
                         <SplineControlPoint
                             point={point.controlPoint}
-                            moveControlFn={(x, y) =>
+                            onMove={(x, y) =>
                                 dispatch({
                                     type: "MOVE_CONTROL_POINT",
                                     coords: { x, y },
diff --git a/src/common/show.ts b/src/common/show.ts
index 3f88f9ff..33a74a43 100644
--- a/src/common/show.ts
+++ b/src/common/show.ts
@@ -6,9 +6,9 @@ import {
     Literal,
     Union,
     type Static,
-    Null,
     Optional,
     Tuple,
+    InstanceOf,
 } from "runtypes";
 import {
     MidpointSchema,
@@ -20,16 +20,11 @@ import {
 // JSON file would use the Showfile type.
 
 const AudioSchema = RuntypesRecord({
-    startMs: Number,
-    // maybe we use something like capnproto, msgpack, or protobuf so we could
-    // include an audio file in the showfile. if we really wanted to use JSON we'd
-    // probably have to base64 encode the file 💀. would work, just feels a little scuffed.
-    // plus I've always wanted an excuse to use msgpack or capnproto lol
-    data: String,
-    tempoBpm: Union(Number, Null),
+    data: InstanceOf<Uint8Array<ArrayBufferLike>>(Uint8Array),
+    mimeType: String,
 });
 
-const TimelineEventTypes = {
+export const TimelineEventTypes = {
     GoToPointEvent: "goto_point",
     WaitEvent: "wait",
     StartPointEvent: "start_point",
@@ -78,8 +73,11 @@ export function timelineLayerToSpline(layer: TimelineLayer): Spline {
     return {
         start: startPoint.target,
         points: events
-            .filter((event) => event.type === "goto_point")
-            .map((event) => event.target),
+            .filter((event) => event.type === TimelineEventTypes.GoToPointEvent)
+            .map(
+                (event) =>
+                    (event as Static<typeof GoToPointEventSchema>).target,
+            ),
     };
 }
 

From f8c7a9c62da5d4c37e73ee1013cc40369c6f8011 Mon Sep 17 00:00:00 2001
From: Jason Antwi-Appah <hey@jasonaa.me>
Date: Sun, 13 Apr 2025 23:00:59 -0500
Subject: [PATCH 23/92] Format

---
 src/client/editor/editor.tsx | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/client/editor/editor.tsx b/src/client/editor/editor.tsx
index 3474cbfb..039ae509 100644
--- a/src/client/editor/editor.tsx
+++ b/src/client/editor/editor.tsx
@@ -142,7 +142,12 @@ export function Editor() {
         const audio = await blob.bytes();
         setShow({
             ...show,
-            audio: { startMs: 0, data: audio, tempoBpm: null, mimeType: blob.type },
+            audio: {
+                startMs: 0,
+                data: audio,
+                tempoBpm: null,
+                mimeType: blob.type,
+            },
         });
     }, [setShow, show]);
 
@@ -233,9 +238,11 @@ export function Editor() {
     useEffect(() => {
         if (!audio) return;
 
-        audioRef.current.src = URL.createObjectURL(new Blob([audio.data], {
-            type: audio.mimeType,
-        }));
+        audioRef.current.src = URL.createObjectURL(
+            new Blob([audio.data], {
+                type: audio.mimeType,
+            }),
+        );
         audioRef.current.load();
     }, [audio]);
 

From 83e0359ec42ebb3acadb0a951de563143956b947 Mon Sep 17 00:00:00 2001
From: Jason Antwi-Appah <hey@jasonaa.me>
Date: Sun, 13 Apr 2025 23:02:08 -0500
Subject: [PATCH 24/92] Type fixes

---
 src/client/editor/editor.tsx | 2 --
 src/common/show.ts           | 2 +-
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/client/editor/editor.tsx b/src/client/editor/editor.tsx
index 039ae509..c0d4eff4 100644
--- a/src/client/editor/editor.tsx
+++ b/src/client/editor/editor.tsx
@@ -143,9 +143,7 @@ export function Editor() {
         setShow({
             ...show,
             audio: {
-                startMs: 0,
                 data: audio,
-                tempoBpm: null,
                 mimeType: blob.type,
             },
         });
diff --git a/src/common/show.ts b/src/common/show.ts
index 33a74a43..ee4ce39e 100644
--- a/src/common/show.ts
+++ b/src/common/show.ts
@@ -20,7 +20,7 @@ import {
 // JSON file would use the Showfile type.
 
 const AudioSchema = RuntypesRecord({
-    data: InstanceOf<Uint8Array<ArrayBufferLike>>(Uint8Array),
+    data: InstanceOf<Uint8Array>(Uint8Array),
     mimeType: String,
 });
 

From fc18af1a5bcb17c7548bd39004c300dff4a531e2 Mon Sep 17 00:00:00 2001
From: Jason Antwi-Appah <hey@jasonaa.me>
Date: Mon, 14 Apr 2025 00:06:24 -0500
Subject: [PATCH 25/92] Fix bug in undo/redo hook

---
 src/client/editor/hooks.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/client/editor/hooks.ts b/src/client/editor/hooks.ts
index 9f4689c1..250ac491 100644
--- a/src/client/editor/hooks.ts
+++ b/src/client/editor/hooks.ts
@@ -4,6 +4,7 @@ import {
     useState,
     useReducer,
     useCallback,
+    useMemo,
 } from "react";
 
 export function useDraggable(
@@ -130,8 +131,8 @@ export function useStateWithTrackedHistory<T>(initialValue: T) {
 
     const undo = useCallback(() => dispatch({ type: "undo" }), []);
     const redo = useCallback(() => dispatch({ type: "redo" }), []);
-    const canUndo = state.index > 0;
-    const canRedo = state.index < state.history.length - 1;
+    const canUndo = useMemo(() => state.index > 0, [state.index]);
+    const canRedo = useMemo(() => state.index < state.history.length - 1, [state.index, state.history.length]);
 
     const setValue = useCallback((value: T) => {
         dispatch({ type: "set", value });

From 909e86cb8eae474bcbb9876577f246d67186d494 Mon Sep 17 00:00:00 2001
From: Jason Antwi-Appah <hey@jasonaa.me>
Date: Mon, 14 Apr 2025 13:11:07 -0500
Subject: [PATCH 26/92] Make spline editor state controlled / hoist spline
 state to main editor component

---
 src/client/editor/editor.tsx        | 256 ++++++++++++++++++++++++++--
 src/client/editor/hooks.ts          |   5 +-
 src/client/editor/spline-editor.tsx | 186 +++++++-------------
 src/common/show.ts                  |  17 +-
 4 files changed, 314 insertions(+), 150 deletions(-)

diff --git a/src/client/editor/editor.tsx b/src/client/editor/editor.tsx
index c0d4eff4..b8645430 100644
--- a/src/client/editor/editor.tsx
+++ b/src/client/editor/editor.tsx
@@ -1,3 +1,4 @@
+// @ts-expect-error: chessbots client is a CommonJS module, but this library is a ES Module, so we need to tell TypeScript that it's okay
 import { decode as cborDecode, encode as cborEncode } from "cbor-x";
 import {
     forwardRef,
@@ -24,15 +25,17 @@ import {
 } from "@blueprintjs/core";
 import { RobotGrid } from "../debug/simulator";
 
+// @ts-expect-error: chessbots client is a CommonJS module, but this library is a ES Module, so we need to tell TypeScript that it's okay
 import { fileOpen, fileSave } from "browser-fs-access";
 import {
     type TimelineEvents,
     createNewShowfile,
     ShowfileSchema,
-    timelineLayerToSpline,
     EVENT_TYPE_TO_COLOR,
     type TimelineLayer,
     TimelineEventTypes,
+    type GoToPointEvent,
+    StartPointEvent,
 } from "../../common/show";
 import { diff } from "deep-object-diff";
 import {
@@ -47,12 +50,17 @@ import {
     useTime,
     useTransform,
 } from "motion/react";
-import { SplinePointType } from "../../common/spline";
-
-const RULER_TICK_INTERVAL_MS = 250;
-const RULER_EXTRA_TICK_COUNT = 10;
+import {
+    SplinePointType,
+    type Coords,
+    type CubicBezier,
+    type QuadraticBezier,
+} from "../../common/spline";
+
+const RULER_TICK_INTERVAL_MS = 100;
+const RULER_EXTRA_TICK_COUNT = 20;
 // TODO: make ruler tick size configurable so we can zoom. relatively low priority. would be nice if gestures could be supported too
-const RULER_TICK_GAP = "1rem";
+const RULER_TICK_GAP = "0.5rem";
 
 function millisToXPosition(millis: number): string {
     return `calc(${millis} / ${RULER_TICK_INTERVAL_MS} * ${RULER_TICK_GAP})`;
@@ -97,7 +105,7 @@ export function Editor() {
 
         let data: unknown | null = null;
         try {
-            data = cborDecode(await blob.bytes());
+            data = cborDecode(new Uint8Array(await blob.arrayBuffer()));
         } catch (e) {
             // TODO: toast or alert
             console.warn("Failed to decode showfile as CBOR", e);
@@ -139,7 +147,7 @@ export function Editor() {
             mimeTypes: ["audio/mpeg", "audio/wav"],
             extensions: [".mp3", ".wav"],
         });
-        const audio = await blob.bytes();
+        const audio = new Uint8Array(await blob.arrayBuffer());
         setShow({
             ...show,
             audio: {
@@ -150,7 +158,7 @@ export function Editor() {
     }, [setShow, show]);
 
     // TODO: figure out how to get this from the showfile
-    const SEQUENCE_LENGTH_MS = 5 * 1000;
+    const SEQUENCE_LENGTH_MS = 10 * 1000;
 
     const { currentTimestamp, playing, togglePlaying } =
         usePlayHead(SEQUENCE_LENGTH_MS);
@@ -158,6 +166,193 @@ export function Editor() {
         millisToXPosition(currentTimestamp.get()),
     );
 
+    const handleStartPointMove = useCallback(
+        (layerIndex: number, newCoords: Coords) => {
+            const newTimeline = [...show.timeline];
+            const layer = newTimeline[layerIndex];
+            if (layer) {
+                const [startPoint, remainingEvents] = layer;
+                const newStartPointEvent: StartPointEvent = {
+                    ...startPoint,
+                    target: { ...startPoint.target, point: newCoords },
+                };
+                newTimeline[layerIndex] = [newStartPointEvent, remainingEvents];
+                setShow({ ...show, timeline: newTimeline });
+            }
+        },
+        [show, setShow],
+    );
+
+    const handlePointMove = useCallback(
+        (layerIndex: number, pointIndex: number, newCoords: Coords) => {
+            const newTimeline = [...show.timeline];
+            const layer = newTimeline[layerIndex];
+            if (!layer) return;
+            const [startPoint, remainingEvents] = layer;
+            const events = [...remainingEvents];
+            const eventToUpdate = events[pointIndex];
+
+            if (
+                eventToUpdate &&
+                eventToUpdate.type === TimelineEventTypes.GoToPointEvent
+            ) {
+                events[pointIndex] = {
+                    ...eventToUpdate,
+                    target: {
+                        ...eventToUpdate.target,
+                        endPoint: newCoords,
+                    },
+                };
+                newTimeline[layerIndex] = [startPoint, events];
+                setShow({ ...show, timeline: newTimeline });
+            }
+        },
+        [show, setShow],
+    );
+
+    const handleControlPointMove = useCallback(
+        (layerIndex: number, pointIndex: number, newCoords: Coords) => {
+            const newTimeline = [...show.timeline];
+            const layer = newTimeline[layerIndex];
+            if (!layer) return;
+            const [startPoint, remainingEvents] = layer;
+            const events = [...remainingEvents];
+            const eventToUpdate = events[pointIndex];
+
+            if (
+                eventToUpdate?.type === TimelineEventTypes.GoToPointEvent &&
+                eventToUpdate.target.type === SplinePointType.CubicBezier
+            ) {
+                events[pointIndex] = {
+                    ...eventToUpdate,
+                    target: {
+                        ...eventToUpdate.target,
+                        controlPoint: newCoords,
+                    },
+                };
+                newTimeline[layerIndex] = [startPoint, events];
+                setShow({ ...show, timeline: newTimeline });
+            }
+        },
+        [show, setShow],
+    );
+
+    const handleDeleteStartPoint = useCallback(
+        (layerIndex: number) => {
+            const newTimeline = [...show.timeline];
+            const layer = newTimeline[layerIndex];
+            if (!layer) return;
+
+            const [, remainingEvents] = layer;
+
+            // Promote the first GoToPoint event (if any) to be the new start point
+            const firstGoToPointIndex = remainingEvents.findIndex(
+                (e) => e.type === TimelineEventTypes.GoToPointEvent,
+            );
+
+            if (firstGoToPointIndex !== -1) {
+                const firstGoToPointEvent = remainingEvents[
+                    firstGoToPointIndex
+                ] as GoToPointEvent;
+                const newStartPointEvent: StartPointEvent = {
+                    type: TimelineEventTypes.StartPointEvent,
+                    durationMs: firstGoToPointEvent.durationMs, // Or use firstGoToPointEvent.durationMs?
+                    target: {
+                        type: SplinePointType.StartPoint, // Convert midpoint to start point
+                        point: firstGoToPointEvent.target.endPoint, // Use the endpoint as the new start
+                    },
+                };
+                const newRemainingEvents = remainingEvents.toSpliced(
+                    firstGoToPointIndex,
+                    1,
+                );
+                newTimeline[layerIndex] = [
+                    newStartPointEvent,
+                    newRemainingEvents,
+                ];
+                setShow({ ...show, timeline: newTimeline });
+            } else {
+                console.warn(
+                    "Tried to delete a start point with no subsequent GoTo points. Consider deleting layer instead.",
+                );
+            }
+        },
+        [show, setShow],
+    );
+
+    const handleDeletePoint = useCallback(
+        (layerIndex: number, pointIndex: number) => {
+            const newTimeline = [...show.timeline];
+            const layer = newTimeline[layerIndex];
+            if (!layer) {
+                return;
+            }
+            const [startPoint, remainingEvents] = layer;
+            const events = remainingEvents.toSpliced(pointIndex, 1); // Remove the event
+            newTimeline[layerIndex] = [startPoint, events];
+            setShow({ ...show, timeline: newTimeline });
+        },
+        [show, setShow],
+    );
+
+    const handleSwitchPointType = useCallback(
+        (
+            layerIndex: number,
+            pointIndex: number,
+            newType:
+                | SplinePointType.QuadraticBezier
+                | SplinePointType.CubicBezier,
+        ) => {
+            const newTimeline = [...show.timeline];
+            const layer = newTimeline[layerIndex];
+            if (!layer) return;
+
+            const [startPoint, remainingEvents] = layer;
+            const events = [...remainingEvents];
+
+            const eventToUpdate = events[pointIndex];
+
+            if (eventToUpdate?.type !== TimelineEventTypes.GoToPointEvent) {
+                console.warn("Tried to switch point type on non-GoToPointEvent")
+                return
+            }
+            let newTarget: CubicBezier | QuadraticBezier;
+            if (
+                newType === SplinePointType.CubicBezier &&
+                eventToUpdate.target.type ===
+                    SplinePointType.QuadraticBezier
+            ) {
+                newTarget = {
+                    type: SplinePointType.CubicBezier,
+                    controlPoint: {
+                        x: eventToUpdate.target.endPoint.x - 20,
+                        y: eventToUpdate.target.endPoint.y - 20,
+                    },
+                    endPoint: eventToUpdate.target.endPoint,
+                };
+            } else if (
+                newType === SplinePointType.QuadraticBezier &&
+                eventToUpdate.target.type === SplinePointType.CubicBezier
+            ) {
+                newTarget = {
+                    type: SplinePointType.QuadraticBezier,
+                    endPoint: eventToUpdate.target.endPoint,
+                };
+            } else {
+                console.warn("Tried to switch point type with invalid type")
+                return;
+            }
+
+            events[pointIndex] = {
+                ...eventToUpdate,
+                target: newTarget,
+            };
+            newTimeline[layerIndex] = [startPoint, events];
+            setShow({ ...show, timeline: newTimeline });
+        },
+        [show, setShow],
+    );
+
     const hotkeys = useMemo<HotkeyConfig[]>(
         () => [
             {
@@ -247,6 +442,11 @@ export function Editor() {
     useEffect(() => {
         if (!audioRef.current) return;
 
+
+        if (audioRef.current.readyState !== 4) {
+            return;
+        }
+
         if (playing && audioRef.current.paused) {
             audioRef.current.currentTime = Math.min(
                 currentTimestamp.get() / 1000,
@@ -341,11 +541,28 @@ export function Editor() {
             {/* TODO: render robots */}
             <RobotGrid robotState={{}}>
                 {/* TODO: think more about how state changes will make it up from the editor to this component */}
-                {show.timeline
-                    .map((layer) => timelineLayerToSpline(layer))
-                    .map((spline) => (
-                        <SplineEditor initialSpline={spline} />
-                    ))}
+                {show.timeline.map((layer, index) => (
+                    <SplineEditor
+                        key={`spline-editor-${index}`}
+                        layer={layer}
+                        onStartPointMove={(coords) =>
+                            handleStartPointMove(index, coords)
+                        }
+                        onPointMove={(pointIdx, coords) =>
+                            handlePointMove(index, pointIdx, coords)
+                        }
+                        onControlPointMove={(pointIdx, coords) =>
+                            handleControlPointMove(index, pointIdx, coords)
+                        }
+                        onDeleteStartPoint={() => handleDeleteStartPoint(index)}
+                        onDeletePoint={(pointIdx) =>
+                            handleDeletePoint(index, pointIdx)
+                        }
+                        onSwitchPointType={(pointIdx, newType) =>
+                            handleSwitchPointType(index, pointIdx, newType)
+                        }
+                    />
+                ))}
             </RobotGrid>
             <Section
                 title="Timeline"
@@ -387,6 +604,7 @@ export function Editor() {
                     {show.timeline.map(([startPoint, remainingEvents], i) => {
                         return (
                             <TimelineLayer
+                                key={`timeline-layer-${i}`}
                                 title={`Robot ${i + 1}`}
                                 onDelete={() =>
                                     setShow({
@@ -428,6 +646,7 @@ const TimelineEvent = forwardRef<HTMLDivElement, { event: TimelineEvents }>(
                     width: millisToXPosition(event.durationMs),
                     backgroundColor: EVENT_TYPE_TO_COLOR[event.type],
                     color: "white",
+                    visibility: event.type === TimelineEventTypes.WaitEvent ? "hidden" : "inherit",
                 }}
                 compact
                 elevation={Elevation.TWO}
@@ -479,7 +698,7 @@ function Ruler({ sequenceLengthMs }: { sequenceLengthMs: number }) {
                     width: "max-content",
                     overflowX: "scroll",
                     justifyContent: "space-between",
-                    alignItems: "center",
+                    alignItems: "start",
                     gap: RULER_TICK_GAP,
                 }}
             >
@@ -489,15 +708,18 @@ function Ruler({ sequenceLengthMs }: { sequenceLengthMs: number }) {
                 )
                     .fill(1)
                     .map((_, i) => {
-                        // Check if this tick marks a 1000ms interval (every 4 ticks if RULER_INTERVAL_MS is 250)
+                        // Check if this tick marks a 1000ms interval (every 4 ticks if RULER_TICK_INTERVAL_MS is 250)
                         const isMajorTick =
                             i % (1000 / RULER_TICK_INTERVAL_MS) === 0;
+
+                        const isSecondaryTick =
+                            i % (1000 / RULER_TICK_INTERVAL_MS) === 5;
                         return (
                             <div
                                 key={`tick-${i}`}
                                 style={{
                                     borderRight: "1px solid gray",
-                                    height: isMajorTick ? "1rem" : "0.5rem",
+                                    height: isMajorTick ? "1rem" : isSecondaryTick ? "0.8rem" : "0.5rem",
                                 }}
                             />
                         );
diff --git a/src/client/editor/hooks.ts b/src/client/editor/hooks.ts
index 250ac491..dc8adb97 100644
--- a/src/client/editor/hooks.ts
+++ b/src/client/editor/hooks.ts
@@ -132,7 +132,10 @@ export function useStateWithTrackedHistory<T>(initialValue: T) {
     const undo = useCallback(() => dispatch({ type: "undo" }), []);
     const redo = useCallback(() => dispatch({ type: "redo" }), []);
     const canUndo = useMemo(() => state.index > 0, [state.index]);
-    const canRedo = useMemo(() => state.index < state.history.length - 1, [state.index, state.history.length]);
+    const canRedo = useMemo(
+        () => state.index < state.history.length - 1,
+        [state.index, state.history.length],
+    );
 
     const setValue = useCallback((value: T) => {
         dispatch({ type: "set", value });
diff --git a/src/client/editor/spline-editor.tsx b/src/client/editor/spline-editor.tsx
index b6481ba5..f3d47695 100644
--- a/src/client/editor/spline-editor.tsx
+++ b/src/client/editor/spline-editor.tsx
@@ -1,125 +1,62 @@
-import { useReducer, useMemo, useCallback } from "react";
+import { useMemo, useCallback, Fragment } from "react";
 import {
-    type Spline,
     type Coords,
     SplinePointType,
-    type QuadraticBezier,
-    type CubicBezier,
     splineToSvgDrawAttribute,
 } from "../../common/spline";
 import { SplinePoint, SplineControlPoint } from "./points";
+import {
+    type TimelineLayer,
+    timelineLayerToSpline,
+    TimelineEventTypes,
+} from "../../common/show";
 
-export function SplineEditor({ initialSpline }: { initialSpline: Spline }) {
-    type SplineEditorAction =
-        | { type: "DELETE_POINT"; index: number }
-        | { type: "DELETE_START_POINT" }
-        | { type: "MOVE_POINT_ENDPOINT"; coords: Coords; index: number }
-        | { type: "MOVE_START_POINT"; coords: Coords }
-        | { type: "MOVE_CONTROL_POINT"; coords: Coords; index: number }
-        | { type: "SWITCH_TO_QUADRATIC"; index: number }
-        | { type: "SWITCH_TO_CUBIC"; index: number };
-
-    const [spline, dispatch] = useReducer(
-        (state: Spline, action: SplineEditorAction): Spline => {
-            switch (action.type) {
-                case "DELETE_POINT": {
-                    return {
-                        ...state,
-                        points: state.points.toSpliced(action.index, 1),
-                    };
-                }
-                case "DELETE_START_POINT": {
-                    if (state.points.length === 0) return state;
-                    return {
-                        ...state,
-                        start: {
-                            type: SplinePointType.StartPoint,
-                            point: state.points[0].endPoint,
-                        },
-                        points: state.points.slice(1),
-                    };
-                }
-                case "MOVE_POINT_ENDPOINT": {
-                    const newPoints = [...state.points];
-                    newPoints[action.index].endPoint = action.coords;
-                    return { ...state, points: newPoints };
-                }
-                case "MOVE_START_POINT": {
-                    return {
-                        ...state,
-                        start: {
-                            type: SplinePointType.StartPoint,
-                            point: action.coords,
-                        },
-                    };
-                }
-                case "MOVE_CONTROL_POINT": {
-                    const point = state.points[action.index];
-                    if (point.type !== SplinePointType.CubicBezier) {
-                        return state;
-                    }
-
-                    point.controlPoint = action.coords;
-
-                    const newPoints = [...state.points];
-                    newPoints[action.index] = point;
-
-                    return { ...state, points: newPoints };
-                }
-                case "SWITCH_TO_QUADRATIC": {
-                    const point = state.points[action.index];
-                    if (point.type !== SplinePointType.CubicBezier) {
-                        return state;
-                    }
+interface SplineEditorProps {
+    layer: TimelineLayer;
+    onStartPointMove: (newCoords: Coords) => void;
+    onPointMove: (pointIndex: number, newCoords: Coords) => void;
+    onControlPointMove: (pointIndex: number, newCoords: Coords) => void;
+    onDeleteStartPoint: () => void;
+    onDeletePoint: (pointIndex: number) => void;
+    onSwitchPointType: (
+        pointIndex: number,
+        newType: SplinePointType.QuadraticBezier | SplinePointType.CubicBezier,
+    ) => void;
+}
 
-                    const newPoint: QuadraticBezier = {
-                        type: SplinePointType.QuadraticBezier,
-                        endPoint: point.endPoint,
-                    };
+export function SplineEditor({
+    layer,
+    onStartPointMove,
+    onPointMove,
+    onControlPointMove,
+    onDeleteStartPoint,
+    onDeletePoint,
+    onSwitchPointType,
+}: SplineEditorProps) {
+    const [, remainingEvents] = layer;
+    const spline = useMemo(() => timelineLayerToSpline(layer), [layer]);
 
-                    const newPoints = [...state.points];
-                    newPoints[action.index] = newPoint;
+    const path = useMemo(() => splineToSvgDrawAttribute(spline), [spline]);
 
-                    return { ...state, points: newPoints };
-                }
-                case "SWITCH_TO_CUBIC": {
-                    const point = state.points[action.index];
-                    if (point.type !== SplinePointType.QuadraticBezier) {
-                        return state;
+    const getOriginalEventIndex = useCallback(
+        (goToPointIndex: number): number => {
+            let count = 0;
+            for (let i = 0; i < remainingEvents.length; i++) {
+                if (
+                    remainingEvents[i].type ===
+                    TimelineEventTypes.GoToPointEvent
+                ) {
+                    if (count === goToPointIndex) {
+                        return i;
                     }
-
-                    const newPoint: CubicBezier = {
-                        type: SplinePointType.CubicBezier,
-                        controlPoint: {
-                            x: point.endPoint.x / 2,
-                            y: point.endPoint.y / 2,
-                        },
-                        endPoint: point.endPoint,
-                    };
-
-                    const newPoints = [...state.points];
-                    newPoints[action.index] = newPoint;
-
-                    return { ...state, points: newPoints };
+                    count++;
                 }
             }
+            return -1;
         },
-        initialSpline,
+        [remainingEvents],
     );
-    const path = useMemo(() => splineToSvgDrawAttribute(spline), [spline]);
-
-    const onDeleteStartPoint = useMemo(() => {
-        return spline.points.length > 0 ?
-                () => dispatch({ type: "DELETE_START_POINT" })
-            :   undefined;
-    }, [spline.points.length]);
 
-    const onMoveStartPoint = useCallback(
-        (x: number, y: number) => {
-            dispatch({ type: "MOVE_START_POINT", coords: { x, y } });
-        },
-        [dispatch],
-    );
     return (
         <>
             <svg
@@ -136,28 +73,32 @@ export function SplineEditor({ initialSpline }: { initialSpline: Spline }) {
             </svg>
             <SplinePoint
                 point={spline.start}
-                onDelete={onDeleteStartPoint}
-                onMove={onMoveStartPoint}
+                onDelete={
+                    spline.points.length > 0 ? onDeleteStartPoint : undefined
+                }
+                onMove={(x, y) => onStartPointMove({ x, y })}
             />
             {spline.points.map((point, index) => (
-                <>
+                <Fragment key={`point-group-${index}`}>
                     <SplinePoint
                         point={point}
                         onDelete={() =>
-                            dispatch({ type: "DELETE_POINT", index })
+                            onDeletePoint(getOriginalEventIndex(index))
                         }
                         onMove={(x, y) =>
-                            dispatch({
-                                type: "MOVE_POINT_ENDPOINT",
-                                coords: { x, y },
-                                index,
-                            })
+                            onPointMove(getOriginalEventIndex(index), { x, y })
                         }
                         onSwitchToQuadratic={() =>
-                            dispatch({ type: "SWITCH_TO_QUADRATIC", index })
+                            onSwitchPointType(
+                                getOriginalEventIndex(index),
+                                SplinePointType.QuadraticBezier,
+                            )
                         }
                         onSwitchToCubic={() =>
-                            dispatch({ type: "SWITCH_TO_CUBIC", index })
+                            onSwitchPointType(
+                                getOriginalEventIndex(index),
+                                SplinePointType.CubicBezier,
+                            )
                         }
                     />
                     {/* TODO: add line between control point and end point */}
@@ -165,15 +106,14 @@ export function SplineEditor({ initialSpline }: { initialSpline: Spline }) {
                         <SplineControlPoint
                             point={point.controlPoint}
                             onMove={(x, y) =>
-                                dispatch({
-                                    type: "MOVE_CONTROL_POINT",
-                                    coords: { x, y },
-                                    index,
-                                })
+                                onControlPointMove(
+                                    getOriginalEventIndex(index),
+                                    { x, y },
+                                )
                             }
                         />
                     )}
-                </>
+                </Fragment>
             ))}
         </>
     );
diff --git a/src/common/show.ts b/src/common/show.ts
index ee4ce39e..d0bd4ae8 100644
--- a/src/common/show.ts
+++ b/src/common/show.ts
@@ -16,13 +16,13 @@ import {
     SplinePointType,
     StartPointSchema,
 } from "./spline";
-
-// JSON file would use the Showfile type.
+import { Colors } from "@blueprintjs/core";
 
 const AudioSchema = RuntypesRecord({
     data: InstanceOf<Uint8Array>(Uint8Array),
     mimeType: String,
 });
+export type Audio = Static<typeof AudioSchema>;
 
 export const TimelineEventTypes = {
     GoToPointEvent: "goto_point",
@@ -30,32 +30,36 @@ export const TimelineEventTypes = {
     StartPointEvent: "start_point",
 } as const;
 
-const GoToPointEventSchema = RuntypesRecord({
+export const GoToPointEventSchema = RuntypesRecord({
     durationMs: Number,
     target: MidpointSchema,
     type: Literal(TimelineEventTypes.GoToPointEvent),
 });
+export type GoToPointEvent = Static<typeof GoToPointEventSchema>;
 
 const WaitEventSchema = RuntypesRecord({
     durationMs: Number,
     type: Literal(TimelineEventTypes.WaitEvent),
 });
+export type WaitEvent = Static<typeof WaitEventSchema>;
 
 const StartPointEventSchema = RuntypesRecord({
     type: Literal(TimelineEventTypes.StartPointEvent),
     target: StartPointSchema,
     durationMs: Number,
 });
+export type StartPointEvent = Static<typeof StartPointEventSchema>;
 
 const TimelineEventSchema = Union(GoToPointEventSchema, WaitEventSchema);
 const TimelineLayerSchema = Tuple(
     StartPointEventSchema,
     Array(TimelineEventSchema),
 );
+export type TimelineLayer = Static<typeof TimelineLayerSchema>;
 
 export type TimelineEvents =
     | Static<typeof TimelineEventSchema>
-    | Static<typeof StartPointEventSchema>;
+    | StartPointEvent;
 
 export const ShowfileSchema = RuntypesRecord({
     $chessbots_show_schema_version: Literal(1),
@@ -63,9 +67,6 @@ export const ShowfileSchema = RuntypesRecord({
     audio: Optional(AudioSchema),
     name: String,
 });
-
-export type Audio = Static<typeof AudioSchema>;
-export type TimelineLayer = Static<typeof TimelineLayerSchema>;
 export type Showfile = Static<typeof ShowfileSchema>;
 
 export function timelineLayerToSpline(layer: TimelineLayer): Spline {
@@ -138,8 +139,6 @@ export function createNewShowfile(): Showfile {
     };
 }
 
-import { Colors } from "@blueprintjs/core";
-
 export const EVENT_TYPE_TO_COLOR: Record<
     (typeof TimelineEventTypes)[keyof typeof TimelineEventTypes],
     (typeof Colors)[keyof typeof Colors]

From 9917a16c31a19e575f989dcf2676c9b122986311 Mon Sep 17 00:00:00 2001
From: Jason Antwi-Appah <hey@jasonaa.me>
Date: Mon, 14 Apr 2025 17:56:55 -0500
Subject: [PATCH 27/92] Add button to load audio file

---
 src/client/editor/editor.tsx | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/client/editor/editor.tsx b/src/client/editor/editor.tsx
index b8645430..4a03abd0 100644
--- a/src/client/editor/editor.tsx
+++ b/src/client/editor/editor.tsx
@@ -536,6 +536,11 @@ export function Editor() {
                         disabled={!canRedo}
                         onClick={redo}
                     />
+                    <Button
+                        className="bp5-minimal"
+                        text="Load New Audio" 
+                        onClick={loadAudioFromFile}
+                    />
                 </ButtonGroup>
             </Card>
             {/* TODO: render robots */}

From 02dd6c01e57a691025d64aed56e38dc4f817fe88 Mon Sep 17 00:00:00 2001
From: Jason Antwi-Appah <hey@jasonaa.me>
Date: Mon, 14 Apr 2025 18:17:42 -0500
Subject: [PATCH 28/92] Move showfile state and callbacks to new function

---
 src/client/editor/editor.tsx | 248 ++++++++++++++++++++++-------------
 1 file changed, 154 insertions(+), 94 deletions(-)

diff --git a/src/client/editor/editor.tsx b/src/client/editor/editor.tsx
index 4a03abd0..751e3320 100644
--- a/src/client/editor/editor.tsx
+++ b/src/client/editor/editor.tsx
@@ -66,12 +66,18 @@ function millisToXPosition(millis: number): string {
     return `calc(${millis} / ${RULER_TICK_INTERVAL_MS} * ${RULER_TICK_GAP})`;
 }
 
-// TODO: reading blob.bytes works in safari but not chrome. why?
-// TODO: ui for adding/removing audio - remove current hotkey as this was mainly for testing
+// TODO: figure out how to get this from the showfile
+const SEQUENCE_LENGTH_MS = 10 * 1000;
 
-export function Editor() {
+// TODO: ui for adding/removing audio - remove current hotkey as this was mainly for testing
+function useShowfile() {
     const [initialShow, setInitialShow] = useState(createNewShowfile());
+
     const [fsHandle, setFsHandle] = useState<FileSystemFileHandle | null>(null);
+
+    const [unsavedChanges, setUnsavedChanges] =
+        usePreventExitWithUnsavedChanges();
+
     const {
         value: show,
         setValue: setShow,
@@ -80,13 +86,6 @@ export function Editor() {
         undo,
         redo,
     } = useStateWithTrackedHistory(initialShow);
-
-    const { audio } = show;
-
-    // TODO: fix viewport height / timeline height
-    const [unsavedChanges, setUnsavedChanges] =
-        usePreventExitWithUnsavedChanges();
-
     useEffect(() => {
         const result = diff(initialShow, show);
         if (Object.keys(result).length === 0) {
@@ -157,15 +156,6 @@ export function Editor() {
         });
     }, [setShow, show]);
 
-    // TODO: figure out how to get this from the showfile
-    const SEQUENCE_LENGTH_MS = 10 * 1000;
-
-    const { currentTimestamp, playing, togglePlaying } =
-        usePlayHead(SEQUENCE_LENGTH_MS);
-    const seekBarWidth = useTransform(() =>
-        millisToXPosition(currentTimestamp.get()),
-    );
-
     const handleStartPointMove = useCallback(
         (layerIndex: number, newCoords: Coords) => {
             const newTimeline = [...show.timeline];
@@ -313,14 +303,15 @@ export function Editor() {
             const eventToUpdate = events[pointIndex];
 
             if (eventToUpdate?.type !== TimelineEventTypes.GoToPointEvent) {
-                console.warn("Tried to switch point type on non-GoToPointEvent")
-                return
+                console.warn(
+                    "Tried to switch point type on non-GoToPointEvent",
+                );
+                return;
             }
             let newTarget: CubicBezier | QuadraticBezier;
             if (
                 newType === SplinePointType.CubicBezier &&
-                eventToUpdate.target.type ===
-                    SplinePointType.QuadraticBezier
+                eventToUpdate.target.type === SplinePointType.QuadraticBezier
             ) {
                 newTarget = {
                     type: SplinePointType.CubicBezier,
@@ -339,7 +330,7 @@ export function Editor() {
                     endPoint: eventToUpdate.target.endPoint,
                 };
             } else {
-                console.warn("Tried to switch point type with invalid type")
+                console.warn("Tried to switch point type with invalid type");
                 return;
             }
 
@@ -353,6 +344,133 @@ export function Editor() {
         [show, setShow],
     );
 
+    const editName = useCallback(
+        (value: string) => setShow({ ...show, name: value }),
+        [show, setShow],
+    );
+
+    const addRobot = useCallback(() => {
+        const newLayer: TimelineLayer = [
+            {
+                type: TimelineEventTypes.StartPointEvent,
+                target: {
+                    type: SplinePointType.StartPoint,
+                    point: {
+                        x: 0,
+                        y: 70,
+                    },
+                },
+                durationMs: 7500,
+            },
+            [],
+        ];
+        setShow({
+            ...show,
+            timeline: [...show.timeline, newLayer],
+        });
+    }, [show, setShow]);
+
+    const { currentTimestamp, playing, togglePlaying } =
+        usePlayHead(SEQUENCE_LENGTH_MS);
+
+    const { audio } = show;
+    const audioRef = useRef(new Audio());
+    useEffect(() => {
+        if (!audio) return;
+
+        audioRef.current.src = URL.createObjectURL(
+            new Blob([audio.data], {
+                type: audio.mimeType,
+            }),
+        );
+        audioRef.current.load();
+    }, [audio]);
+
+    useEffect(() => {
+        if (!audioRef.current) return;
+
+        if (audioRef.current.readyState !== 4) {
+            return;
+        }
+
+        if (playing && audioRef.current.paused) {
+            audioRef.current.currentTime = Math.min(
+                currentTimestamp.get() / 1000,
+                audioRef.current.duration,
+            );
+            audioRef.current.play();
+        }
+
+        if (!playing && !audioRef.current.paused) {
+            audioRef.current.pause();
+        }
+    }, [playing, currentTimestamp]);
+
+    const deleteLayer = useCallback(
+        (i: number) =>
+            setShow({
+                ...show,
+                timeline: show.timeline.toSpliced(i, 1),
+            }),
+        [show, setShow],
+    );
+
+    return {
+        show,
+        unsavedChanges,
+        loadAudioFromFile,
+        handleStartPointMove,
+        handlePointMove,
+        handleControlPointMove,
+        handleDeleteStartPoint,
+        handleDeletePoint,
+        handleSwitchPointType,
+        saveShowfile,
+        openShowfile,
+        editName,
+        undo,
+        redo,
+        addRobot,
+        currentTimestamp,
+        playing,
+        togglePlaying,
+        deleteLayer,
+        canRedo,
+        canUndo,
+    };
+}
+
+export function Editor() {
+    const {
+        show,
+        unsavedChanges,
+        loadAudioFromFile,
+        handleStartPointMove,
+        handlePointMove,
+        handleControlPointMove,
+        handleDeleteStartPoint,
+        handleDeletePoint,
+        handleSwitchPointType,
+        saveShowfile,
+        openShowfile,
+        undo,
+        redo,
+        editName,
+        addRobot,
+        currentTimestamp,
+        playing,
+        togglePlaying,
+        canUndo,
+        canRedo,
+        deleteLayer,
+    } = useShowfile();
+
+    // TODO: fix viewport height / timeline height
+
+    const seekBarWidth = useTransform(() =>
+        millisToXPosition(currentTimestamp.get()),
+    );
+
     const hotkeys = useMemo<HotkeyConfig[]>(
         () => [
             {
@@ -420,67 +538,8 @@ export function Editor() {
         ],
     );
 
-    const editName = useCallback(
-        (value: string) => setShow({ ...show, name: value }),
-        [show, setShow],
-    );
     const { handleKeyDown, handleKeyUp } = useHotkeys(hotkeys);
 
-    const audioRef = useRef(new Audio());
-
-    useEffect(() => {
-        if (!audio) return;
-
-        audioRef.current.src = URL.createObjectURL(
-            new Blob([audio.data], {
-                type: audio.mimeType,
-            }),
-        );
-        audioRef.current.load();
-    }, [audio]);
-
-    useEffect(() => {
-        if (!audioRef.current) return;
-
-
-        if (audioRef.current.readyState !== 4) {
-            return;
-        }
-
-        if (playing && audioRef.current.paused) {
-            audioRef.current.currentTime = Math.min(
-                currentTimestamp.get() / 1000,
-                audioRef.current.duration,
-            );
-            audioRef.current.play();
-        }
-
-        if (!playing && !audioRef.current.paused) {
-            audioRef.current.pause();
-        }
-    }, [playing, currentTimestamp]);
-
-    const addRobot = useCallback(() => {
-        const newLayer: TimelineLayer = [
-            {
-                type: TimelineEventTypes.StartPointEvent,
-                target: {
-                    type: SplinePointType.StartPoint,
-                    point: {
-                        x: 0,
-                        y: 70,
-                    },
-                },
-                durationMs: 7500,
-            },
-            [],
-        ];
-        setShow({
-            ...show,
-            timeline: [...show.timeline, newLayer],
-        });
-    }, [show, setShow]);
-
     return (
         <div
             style={{ maxHeight: "100vh" }}
@@ -538,14 +597,13 @@ export function Editor() {
                     />
                     <Button
                         className="bp5-minimal"
-                        text="Load New Audio" 
+                        text="Load New Audio"
                         onClick={loadAudioFromFile}
                     />
                 </ButtonGroup>
             </Card>
             {/* TODO: render robots */}
             <RobotGrid robotState={{}}>
-                {/* TODO: think more about how state changes will make it up from the editor to this component */}
                 {show.timeline.map((layer, index) => (
                     <SplineEditor
                         key={`spline-editor-${index}`}
@@ -611,12 +669,7 @@ export function Editor() {
                             <TimelineLayer
                                 key={`timeline-layer-${i}`}
                                 title={`Robot ${i + 1}`}
-                                onDelete={() =>
-                                    setShow({
-                                        ...show,
-                                        timeline: show.timeline.toSpliced(i, 1),
-                                    })
-                                }
+                                onDelete={() => deleteLayer(i)}
                             >
                                 <div style={{ display: "flex" }}>
                                     <TimelineEvent event={startPoint} />
@@ -651,7 +704,10 @@ const TimelineEvent = forwardRef<HTMLDivElement, { event: TimelineEvents }>(
                     width: millisToXPosition(event.durationMs),
                     backgroundColor: EVENT_TYPE_TO_COLOR[event.type],
                     color: "white",
-                    visibility: event.type === TimelineEventTypes.WaitEvent ? "hidden" : "inherit",
+                    visibility:
+                        event.type === TimelineEventTypes.WaitEvent ?
+                            "hidden"
+                        :   "inherit",
                 }}
                 compact
                 elevation={Elevation.TWO}
@@ -713,10 +769,11 @@ function Ruler({ sequenceLengthMs }: { sequenceLengthMs: number }) {
                 )
                     .fill(1)
                     .map((_, i) => {
-                        // Check if this tick marks a 1000ms interval (every 4 ticks if RULER_TICK_INTERVAL_MS is 250)
+                        // 1000ms interval (every 4 ticks if RULER_TICK_INTERVAL_MS is 250)
                         const isMajorTick =
                             i % (1000 / RULER_TICK_INTERVAL_MS) === 0;
 
+                        // 500ms interval
                         const isSecondaryTick =
                             i % (1000 / RULER_TICK_INTERVAL_MS) === 5;
                         return (
@@ -724,7 +781,10 @@ function Ruler({ sequenceLengthMs }: { sequenceLengthMs: number }) {
                                 key={`tick-${i}`}
                                 style={{
                                     borderRight: "1px solid gray",
-                                    height: isMajorTick ? "1rem" : isSecondaryTick ? "0.8rem" : "0.5rem",
+                                    height:
+                                        isMajorTick ? "1rem"
+                                        : isSecondaryTick ? "0.8rem"
+                                        : "0.5rem",
                                 }}
                             />
                         );

From dd6ec54709e7fb9b57f3e9746e415d8927dc9cda Mon Sep 17 00:00:00 2001
From: Jason Antwi-Appah <hey@jasonaa.me>
Date: Mon, 14 Apr 2025 18:42:22 -0500
Subject: [PATCH 29/92] Bump TypeScript version

---
 package.json  |   4 +-
 tsconfig.json |   2 +-
 yarn.lock     | 167 ++++++++++++++++++++++++++++++++++----------------
 3 files changed, 117 insertions(+), 56 deletions(-)

diff --git a/package.json b/package.json
index a34f2ea2..26d1b381 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,7 @@
     "dependencies": {
         "chess.js": "^1.0.0-beta.6",
         "eslint-plugin-tsdoc": "^0.2.17",
-        "typescript": "^4.9.3",
+        "typescript": "^5.8.3",
         "vite-express": "^0.11.1"
     },
     "devDependencies": {
@@ -39,7 +39,7 @@
         "nodemon": "^3.0.3",
         "prettier": "^3.2.4",
         "ts-node": "^10.9.1",
-        "typedoc": "^0.23.0",
+        "typedoc": "^0.28.0",
         "vite": "^4.5.5",
         "vitest": "^3.0.8"
     },
diff --git a/tsconfig.json b/tsconfig.json
index c6c8c8d1..5982a28b 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -2,7 +2,7 @@
     "compilerOptions": {
         "target": "ESNext",
         "useDefineForClassFields": true,
-        "lib": ["DOM", "DOM.Iterable", "ESNext"],
+        "lib": ["DOM", "DOM.Iterable", "ESNext", "ES2023"],
         "module": "Node16",
         "skipLibCheck": true,
 
diff --git a/yarn.lock b/yarn.lock
index 0f743a09..2e65478d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -571,6 +571,17 @@
   resolved "https://registry.npmjs.org/@eslint/js/-/js-8.57.0.tgz"
   integrity sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g==
 
+"@gerrit0/mini-shiki@^3.2.2":
+  version "3.2.3"
+  resolved "https://registry.yarnpkg.com/@gerrit0/mini-shiki/-/mini-shiki-3.2.3.tgz#06aea4cf1097fb38a54b33e50fd6d8f6e7efa5af"
+  integrity sha512-yemSYr0Oiqk5NAQRfbD5DKUTlThiZw1MxTMx/YpQTg6m4QRJDtV2JTYSuNevgx1ayy/O7x+uwDjh3IgECGFY/Q==
+  dependencies:
+    "@shikijs/engine-oniguruma" "^3.2.2"
+    "@shikijs/langs" "^3.2.2"
+    "@shikijs/themes" "^3.2.2"
+    "@shikijs/types" "^3.2.2"
+    "@shikijs/vscode-textmate" "^10.0.2"
+
 "@humanwhocodes/config-array@^0.11.14":
   version "0.11.14"
   resolved "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz"
@@ -814,6 +825,41 @@
   resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.35.0.tgz#05f25dbc9981bee1ae6e713daab10397044a46ca"
   integrity sha512-PIQeY5XDkrOysbQblSW7v3l1MDZzkTEzAfTPkj5VAu3FW8fS4ynyLg2sINp0fp3SjZ8xkRYpLqoKcYqAkhU1dw==
 
+"@shikijs/engine-oniguruma@^3.2.2":
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/@shikijs/engine-oniguruma/-/engine-oniguruma-3.2.2.tgz#2a68e7be01960161615bcd6866a74f63c25578bc"
+  integrity sha512-vyXRnWVCSvokwbaUD/8uPn6Gqsf5Hv7XwcW4AgiU4Z2qwy19sdr6VGzMdheKKN58tJOOe5MIKiNb901bgcUXYQ==
+  dependencies:
+    "@shikijs/types" "3.2.2"
+    "@shikijs/vscode-textmate" "^10.0.2"
+
+"@shikijs/langs@^3.2.2":
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/@shikijs/langs/-/langs-3.2.2.tgz#b4db801a27e9e29191cac8766db610a048e66cdb"
+  integrity sha512-NY0Urg2dV9ETt3JIOWoMPuoDNwte3geLZ4M1nrPHbkDS8dWMpKcEwlqiEIGqtwZNmt5gKyWpR26ln2Bg2ecPgw==
+  dependencies:
+    "@shikijs/types" "3.2.2"
+
+"@shikijs/themes@^3.2.2":
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/@shikijs/themes/-/themes-3.2.2.tgz#56b9d6f6803296e9cb7233e25334897496d40d9d"
+  integrity sha512-Zuq4lgAxVKkb0FFdhHSdDkALuRpsj1so1JdihjKNQfgM78EHxV2JhO10qPsMrm01FkE3mDRTdF68wfmsqjt6HA==
+  dependencies:
+    "@shikijs/types" "3.2.2"
+
+"@shikijs/types@3.2.2", "@shikijs/types@^3.2.2":
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/@shikijs/types/-/types-3.2.2.tgz#3718364c46965b15b767a38ef663877f4f7e6fa9"
+  integrity sha512-a5TiHk7EH5Lso8sHcLHbVNNhWKP0Wi3yVnXnu73g86n3WoDgEra7n3KszyeCGuyoagspQ2fzvy4cpSc8pKhb0A==
+  dependencies:
+    "@shikijs/vscode-textmate" "^10.0.2"
+    "@types/hast" "^3.0.4"
+
+"@shikijs/vscode-textmate@^10.0.2":
+  version "10.0.2"
+  resolved "https://registry.yarnpkg.com/@shikijs/vscode-textmate/-/vscode-textmate-10.0.2.tgz#a90ab31d0cc1dfb54c66a69e515bf624fa7b2224"
+  integrity sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg==
+
 "@tanstack/query-core@5.29.0":
   version "5.29.0"
   resolved "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.29.0.tgz"
@@ -907,6 +953,13 @@
     "@types/qs" "*"
     "@types/serve-static" "*"
 
+"@types/hast@^3.0.4":
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/@types/hast/-/hast-3.0.4.tgz#1d6b39993b82cea6ad783945b0508c25903e15aa"
+  integrity sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==
+  dependencies:
+    "@types/unist" "*"
+
 "@types/http-errors@*":
   version "2.0.4"
   resolved "https://registry.npmjs.org/@types/http-errors/-/http-errors-2.0.4.tgz"
@@ -989,6 +1042,11 @@
     "@types/mime" "*"
     "@types/node" "*"
 
+"@types/unist@*":
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/@types/unist/-/unist-3.0.3.tgz#acaab0f919ce69cce629c2d4ed2eb4adc1b6c20c"
+  integrity sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==
+
 "@types/ws@*", "@types/ws@^8.5.10":
   version "8.5.10"
   resolved "https://registry.npmjs.org/@types/ws/-/ws-8.5.10.tgz"
@@ -1195,11 +1253,6 @@ ansi-regex@^5.0.1:
   resolved "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz"
   integrity sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==
 
-ansi-sequence-parser@^1.1.0:
-  version "1.1.1"
-  resolved "https://registry.npmjs.org/ansi-sequence-parser/-/ansi-sequence-parser-1.1.1.tgz"
-  integrity sha512-vJXt3yiaUL4UU546s3rPXlsry/RnM730G1+HkpKE012AN0sx1eOrxSu95oKDIonskeLTijMgqWZ3uDEe3NFvyg==
-
 ansi-styles@^3.2.1:
   version "3.2.1"
   resolved "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz"
@@ -1690,6 +1743,11 @@ encodeurl@~2.0.0:
   resolved "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz"
   integrity sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==
 
+entities@^4.4.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-4.5.0.tgz#5d268ea5e7113ec74c4d033b79ea5a35a488fb48"
+  integrity sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==
+
 es-define-property@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.0.tgz"
@@ -2367,11 +2425,6 @@ json5@^2.2.3:
   resolved "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz"
   integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==
 
-jsonc-parser@^3.2.0:
-  version "3.2.1"
-  resolved "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.2.1.tgz"
-  integrity sha512-AilxAyFOAcK5wA1+LeaySVBrHsGQvUFCDWXKpZjzaL0PqW+xfBOttn8GNtWKFWqneyMZj41MWF9Kl6iPWLwgOA==
-
 keyv@^4.5.3:
   version "4.5.4"
   resolved "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz"
@@ -2402,6 +2455,13 @@ levn@^0.4.1:
     prelude-ls "^1.2.1"
     type-check "~0.4.0"
 
+linkify-it@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/linkify-it/-/linkify-it-5.0.0.tgz#9ef238bfa6dc70bd8e7f9572b52d369af569b421"
+  integrity sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==
+  dependencies:
+    uc.micro "^2.0.0"
+
 locate-path@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz"
@@ -2484,10 +2544,22 @@ make-error@^1.1.1:
   resolved "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz"
   integrity sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==
 
-marked@^4.2.12:
-  version "4.3.0"
-  resolved "https://registry.npmjs.org/marked/-/marked-4.3.0.tgz"
-  integrity sha512-PRsaiG84bK+AMvxziE/lCFss8juXjNaWzVbN5tXAm4XjeaS9NAHhop+PjQxz2A9h8Q4M/xGmzP8vqNwy6JeK0A==
+markdown-it@^14.1.0:
+  version "14.1.0"
+  resolved "https://registry.yarnpkg.com/markdown-it/-/markdown-it-14.1.0.tgz#3c3c5992883c633db4714ccb4d7b5935d98b7d45"
+  integrity sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==
+  dependencies:
+    argparse "^2.0.1"
+    entities "^4.4.0"
+    linkify-it "^5.0.0"
+    mdurl "^2.0.0"
+    punycode.js "^2.3.1"
+    uc.micro "^2.1.0"
+
+mdurl@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/mdurl/-/mdurl-2.0.0.tgz#80676ec0433025dd3e17ee983d0fe8de5a2237e0"
+  integrity sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==
 
 media-typer@0.3.0:
   version "0.3.0"
@@ -2541,14 +2613,7 @@ minimatch@^3.0.5, minimatch@^3.1.1, minimatch@^3.1.2:
   dependencies:
     brace-expansion "^1.1.7"
 
-minimatch@^7.1.3:
-  version "7.4.6"
-  resolved "https://registry.npmjs.org/minimatch/-/minimatch-7.4.6.tgz"
-  integrity sha512-sBz8G/YjVniEz6lKPNpKxXwazJe4c19fEfV2GDMX6AjFz+MX9uDWIZW8XreVhkFW3fkIdTv/gxWr/Kks5FFAVw==
-  dependencies:
-    brace-expansion "^2.0.1"
-
-minimatch@^9.0.4:
+minimatch@^9.0.4, minimatch@^9.0.5:
   version "9.0.5"
   resolved "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz"
   integrity sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==
@@ -2895,6 +2960,11 @@ pstree.remy@^1.1.8:
   resolved "https://registry.npmjs.org/pstree.remy/-/pstree.remy-1.1.8.tgz"
   integrity sha512-77DZwxQmxKnu3aR542U+X8FypNzbfJ+C5XQDk3uWjWxn6151aIMGthWYRXTqT1E5oJvg+ljaa2OJi+VfvCOQ8w==
 
+punycode.js@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/punycode.js/-/punycode.js-2.3.1.tgz#6b53e56ad75588234e79f4affa90972c7dd8cdb7"
+  integrity sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==
+
 punycode@^2.1.0:
   version "2.3.1"
   resolved "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz"
@@ -3255,16 +3325,6 @@ shell-quote@^1.8.1:
   resolved "https://registry.npmjs.org/shell-quote/-/shell-quote-1.8.1.tgz"
   integrity sha512-6j1W9l1iAs/4xYBI1SYOVZyFcCis9b4KCLQ8fgAGG07QvzaRLVVRQvAy85yNmmZSjYjg4MWh4gNvlPujU/5LpA==
 
-shiki@^0.14.1:
-  version "0.14.7"
-  resolved "https://registry.npmjs.org/shiki/-/shiki-0.14.7.tgz"
-  integrity sha512-dNPAPrxSc87ua2sKJ3H5dQ/6ZaY8RNnaAqK+t0eG7p0Soi2ydiqbGOTaZCqaYvA/uZYfS1LJnemt3Q+mSfcPCg==
-  dependencies:
-    ansi-sequence-parser "^1.1.0"
-    jsonc-parser "^3.2.0"
-    vscode-oniguruma "^1.7.0"
-    vscode-textmate "^8.0.0"
-
 side-channel@^1.0.6:
   version "1.0.6"
   resolved "https://registry.npmjs.org/side-channel/-/side-channel-1.0.6.tgz"
@@ -3464,20 +3524,26 @@ type-is@~1.6.18:
     media-typer "0.3.0"
     mime-types "~2.1.24"
 
-typedoc@^0.23.0:
-  version "0.23.28"
-  resolved "https://registry.npmjs.org/typedoc/-/typedoc-0.23.28.tgz"
-  integrity sha512-9x1+hZWTHEQcGoP7qFmlo4unUoVJLB0H/8vfO/7wqTnZxg4kPuji9y3uRzEu0ZKez63OJAUmiGhUrtukC6Uj3w==
+typedoc@^0.28.0:
+  version "0.28.2"
+  resolved "https://registry.yarnpkg.com/typedoc/-/typedoc-0.28.2.tgz#342c42f2e4c0306c47a0a5e92592af9aa60e1a85"
+  integrity sha512-9Giuv+eppFKnJ0oi+vxqLM817b/IrIsEMYgy3jj6zdvppAfDqV3d6DXL2vXUg2TnlL62V48th25Zf/tcQKAJdg==
   dependencies:
+    "@gerrit0/mini-shiki" "^3.2.2"
     lunr "^2.3.9"
-    marked "^4.2.12"
-    minimatch "^7.1.3"
-    shiki "^0.14.1"
+    markdown-it "^14.1.0"
+    minimatch "^9.0.5"
+    yaml "^2.7.1"
 
-typescript@^4.9.3:
-  version "4.9.5"
-  resolved "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz"
-  integrity sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==
+typescript@^5.8.3:
+  version "5.8.3"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.8.3.tgz#92f8a3e5e3cf497356f4178c34cd65a7f5e8440e"
+  integrity sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==
+
+uc.micro@^2.0.0, uc.micro@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/uc.micro/-/uc.micro-2.1.0.tgz#f8d3f7d0ec4c3dea35a7e3c8efa4cb8b45c9e7ee"
+  integrity sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==
 
 undefsafe@^2.0.5:
   version "2.0.5"
@@ -3609,16 +3675,6 @@ vitest@^3.0.8:
     vite-node "3.0.8"
     why-is-node-running "^2.3.0"
 
-vscode-oniguruma@^1.7.0:
-  version "1.7.0"
-  resolved "https://registry.npmjs.org/vscode-oniguruma/-/vscode-oniguruma-1.7.0.tgz"
-  integrity sha512-L9WMGRfrjOhgHSdOYgCt/yRMsXzLDJSL7BPrOZt73gU0iWO4mpqzqQzOz5srxqTvMBaR0XZTSrVWo4j55Rc6cA==
-
-vscode-textmate@^8.0.0:
-  version "8.0.0"
-  resolved "https://registry.npmjs.org/vscode-textmate/-/vscode-textmate-8.0.0.tgz"
-  integrity sha512-AFbieoL7a5LMqcnOF04ji+rpXadgOXnZsxQr//r83kLPr7biP7am3g9zbaZIaBGwBRWeSvoMD4mgPdX3e4NWBg==
-
 warning@^4.0.2:
   version "4.0.3"
   resolved "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz"
@@ -3666,6 +3722,11 @@ yallist@^4.0.0:
   resolved "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz"
   integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==
 
+yaml@^2.7.1:
+  version "2.7.1"
+  resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.7.1.tgz#44a247d1b88523855679ac7fa7cda6ed7e135cf6"
+  integrity sha512-10ULxpnOCQXxJvBgxsn9ptjq6uviG/htZKk9veJGhlqn3w/DxQ631zFF+nlQXLwmImeS5amR2dl2U8sg6U9jsQ==
+
 yn@3.1.1:
   version "3.1.1"
   resolved "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz"

From bd2e4d2a840dc65aad9fc1dea5043b6abdaaa00b Mon Sep 17 00:00:00 2001
From: Jason Antwi-Appah <hey@jasonaa.me>
Date: Mon, 14 Apr 2025 18:42:44 -0500
Subject: [PATCH 30/92] Move showfile hook to new file

---
 src/client/editor/editor.tsx         | 458 +--------------------------
 src/client/editor/hooks.ts           |  45 +++
 src/client/editor/showfile-state.tsx | 401 +++++++++++++++++++++++
 3 files changed, 451 insertions(+), 453 deletions(-)
 create mode 100644 src/client/editor/showfile-state.tsx

diff --git a/src/client/editor/editor.tsx b/src/client/editor/editor.tsx
index 751e3320..a2b73554 100644
--- a/src/client/editor/editor.tsx
+++ b/src/client/editor/editor.tsx
@@ -1,14 +1,4 @@
-// @ts-expect-error: chessbots client is a CommonJS module, but this library is a ES Module, so we need to tell TypeScript that it's okay
-import { decode as cborDecode, encode as cborEncode } from "cbor-x";
-import {
-    forwardRef,
-    type PropsWithChildren,
-    useCallback,
-    useEffect,
-    useMemo,
-    useRef,
-    useState,
-} from "react";
+import { forwardRef, type PropsWithChildren, useMemo } from "react";
 import {
     Section,
     Text,
@@ -24,38 +14,15 @@ import {
     Elevation,
 } from "@blueprintjs/core";
 import { RobotGrid } from "../debug/simulator";
-
-// @ts-expect-error: chessbots client is a CommonJS module, but this library is a ES Module, so we need to tell TypeScript that it's okay
-import { fileOpen, fileSave } from "browser-fs-access";
 import {
     type TimelineEvents,
-    createNewShowfile,
-    ShowfileSchema,
     EVENT_TYPE_TO_COLOR,
     type TimelineLayer,
     TimelineEventTypes,
-    type GoToPointEvent,
-    StartPointEvent,
 } from "../../common/show";
-import { diff } from "deep-object-diff";
-import {
-    usePreventExitWithUnsavedChanges,
-    useStateWithTrackedHistory,
-} from "./hooks";
 import { SplineEditor } from "./spline-editor";
-import {
-    motion,
-    useMotionValue,
-    useMotionValueEvent,
-    useTime,
-    useTransform,
-} from "motion/react";
-import {
-    SplinePointType,
-    type Coords,
-    type CubicBezier,
-    type QuadraticBezier,
-} from "../../common/spline";
+import { motion, useTransform } from "motion/react";
+import { useShowfile } from "./showfile-state";
 
 const RULER_TICK_INTERVAL_MS = 100;
 const RULER_EXTRA_TICK_COUNT = 20;
@@ -66,379 +33,7 @@ function millisToXPosition(millis: number): string {
     return `calc(${millis} / ${RULER_TICK_INTERVAL_MS} * ${RULER_TICK_GAP})`;
 }
 
-// TODO: figure out how to get this from the showfile
-const SEQUENCE_LENGTH_MS = 10 * 1000;
-
 // TODO: ui for adding/removing audio - remove current hotkey as this was mainly for testing
-function useShowfile() {
-    const [initialShow, setInitialShow] = useState(createNewShowfile());
-
-    const [fsHandle, setFsHandle] = useState<FileSystemFileHandle | null>(null);
-
-    const [unsavedChanges, setUnsavedChanges] =
-        usePreventExitWithUnsavedChanges();
-
-    const {
-        value: show,
-        setValue: setShow,
-        canUndo,
-        canRedo,
-        undo,
-        redo,
-    } = useStateWithTrackedHistory(initialShow);
-    useEffect(() => {
-        const result = diff(initialShow, show);
-        if (Object.keys(result).length === 0) {
-            setUnsavedChanges(false);
-        } else {
-            setUnsavedChanges(true);
-        }
-    }, [initialShow, show, setUnsavedChanges]);
-
-    const openShowfile = useCallback(async () => {
-        const blob = await fileOpen({
-            mimeTypes: ["application/chessbots-showfile"],
-            extensions: [".cbor"],
-            description: "Chess Bots Showfile",
-        });
-
-        let data: unknown | null = null;
-        try {
-            data = cborDecode(new Uint8Array(await blob.arrayBuffer()));
-        } catch (e) {
-            // TODO: toast or alert
-            console.warn("Failed to decode showfile as CBOR", e);
-            return;
-        }
-
-        const show = ShowfileSchema.check(data);
-
-        if (!show) {
-            // TODO: toast or alert
-            console.warn("File was CBOR but not a valid showfile", data);
-            return;
-        }
-
-        setInitialShow(show);
-        setShow(show);
-        if (blob.handle) setFsHandle(blob.handle);
-    }, [setShow]);
-
-    const saveShowfile = useCallback(async () => {
-        const blob = new Blob([cborEncode(show)], {
-            type: "application/chessbots-showfile",
-        });
-        await fileSave(
-            blob,
-            {
-                mimeTypes: ["application/chessbots-showfile"],
-                extensions: [".cbor"],
-                fileName: show.name + ".cbor",
-            },
-            fsHandle,
-        );
-
-        setInitialShow(show);
-    }, [fsHandle, show]);
-
-    const loadAudioFromFile = useCallback(async () => {
-        const blob = await fileOpen({
-            mimeTypes: ["audio/mpeg", "audio/wav"],
-            extensions: [".mp3", ".wav"],
-        });
-        const audio = new Uint8Array(await blob.arrayBuffer());
-        setShow({
-            ...show,
-            audio: {
-                data: audio,
-                mimeType: blob.type,
-            },
-        });
-    }, [setShow, show]);
-
-    const handleStartPointMove = useCallback(
-        (layerIndex: number, newCoords: Coords) => {
-            const newTimeline = [...show.timeline];
-            const layer = newTimeline[layerIndex];
-            if (layer) {
-                const [startPoint, remainingEvents] = layer;
-                const newStartPointEvent: StartPointEvent = {
-                    ...startPoint,
-                    target: { ...startPoint.target, point: newCoords },
-                };
-                newTimeline[layerIndex] = [newStartPointEvent, remainingEvents];
-                setShow({ ...show, timeline: newTimeline });
-            }
-        },
-        [show, setShow],
-    );
-
-    const handlePointMove = useCallback(
-        (layerIndex: number, pointIndex: number, newCoords: Coords) => {
-            const newTimeline = [...show.timeline];
-            const layer = newTimeline[layerIndex];
-            if (!layer) return;
-            const [startPoint, remainingEvents] = layer;
-            const events = [...remainingEvents];
-            const eventToUpdate = events[pointIndex];
-
-            if (
-                eventToUpdate &&
-                eventToUpdate.type === TimelineEventTypes.GoToPointEvent
-            ) {
-                events[pointIndex] = {
-                    ...eventToUpdate,
-                    target: {
-                        ...eventToUpdate.target,
-                        endPoint: newCoords,
-                    },
-                };
-                newTimeline[layerIndex] = [startPoint, events];
-                setShow({ ...show, timeline: newTimeline });
-            }
-        },
-        [show, setShow],
-    );
-
-    const handleControlPointMove = useCallback(
-        (layerIndex: number, pointIndex: number, newCoords: Coords) => {
-            const newTimeline = [...show.timeline];
-            const layer = newTimeline[layerIndex];
-            if (!layer) return;
-            const [startPoint, remainingEvents] = layer;
-            const events = [...remainingEvents];
-            const eventToUpdate = events[pointIndex];
-
-            if (
-                eventToUpdate?.type === TimelineEventTypes.GoToPointEvent &&
-                eventToUpdate.target.type === SplinePointType.CubicBezier
-            ) {
-                events[pointIndex] = {
-                    ...eventToUpdate,
-                    target: {
-                        ...eventToUpdate.target,
-                        controlPoint: newCoords,
-                    },
-                };
-                newTimeline[layerIndex] = [startPoint, events];
-                setShow({ ...show, timeline: newTimeline });
-            }
-        },
-        [show, setShow],
-    );
-
-    const handleDeleteStartPoint = useCallback(
-        (layerIndex: number) => {
-            const newTimeline = [...show.timeline];
-            const layer = newTimeline[layerIndex];
-            if (!layer) return;
-
-            const [, remainingEvents] = layer;
-
-            // Promote the first GoToPoint event (if any) to be the new start point
-            const firstGoToPointIndex = remainingEvents.findIndex(
-                (e) => e.type === TimelineEventTypes.GoToPointEvent,
-            );
-
-            if (firstGoToPointIndex !== -1) {
-                const firstGoToPointEvent = remainingEvents[
-                    firstGoToPointIndex
-                ] as GoToPointEvent;
-                const newStartPointEvent: StartPointEvent = {
-                    type: TimelineEventTypes.StartPointEvent,
-                    durationMs: firstGoToPointEvent.durationMs, // Or use firstGoToPointEvent.durationMs?
-                    target: {
-                        type: SplinePointType.StartPoint, // Convert midpoint to start point
-                        point: firstGoToPointEvent.target.endPoint, // Use the endpoint as the new start
-                    },
-                };
-                const newRemainingEvents = remainingEvents.toSpliced(
-                    firstGoToPointIndex,
-                    1,
-                );
-                newTimeline[layerIndex] = [
-                    newStartPointEvent,
-                    newRemainingEvents,
-                ];
-                setShow({ ...show, timeline: newTimeline });
-            } else {
-                console.warn(
-                    "Tried to delete a start point with no subsequent GoTo points. Consider deleting layer instead.",
-                );
-            }
-        },
-        [show, setShow],
-    );
-
-    const handleDeletePoint = useCallback(
-        (layerIndex: number, pointIndex: number) => {
-            const newTimeline = [...show.timeline];
-            const layer = newTimeline[layerIndex];
-            if (!layer) {
-                return;
-            }
-            const [startPoint, remainingEvents] = layer;
-            const events = remainingEvents.toSpliced(pointIndex, 1); // Remove the event
-            newTimeline[layerIndex] = [startPoint, events];
-            setShow({ ...show, timeline: newTimeline });
-        },
-        [show, setShow],
-    );
-
-    const handleSwitchPointType = useCallback(
-        (
-            layerIndex: number,
-            pointIndex: number,
-            newType:
-                | SplinePointType.QuadraticBezier
-                | SplinePointType.CubicBezier,
-        ) => {
-            const newTimeline = [...show.timeline];
-            const layer = newTimeline[layerIndex];
-            if (!layer) return;
-
-            const [startPoint, remainingEvents] = layer;
-            const events = [...remainingEvents];
-
-            const eventToUpdate = events[pointIndex];
-
-            if (eventToUpdate?.type !== TimelineEventTypes.GoToPointEvent) {
-                console.warn(
-                    "Tried to switch point type on non-GoToPointEvent",
-                );
-                return;
-            }
-            let newTarget: CubicBezier | QuadraticBezier;
-            if (
-                newType === SplinePointType.CubicBezier &&
-                eventToUpdate.target.type === SplinePointType.QuadraticBezier
-            ) {
-                newTarget = {
-                    type: SplinePointType.CubicBezier,
-                    controlPoint: {
-                        x: eventToUpdate.target.endPoint.x - 20,
-                        y: eventToUpdate.target.endPoint.y - 20,
-                    },
-                    endPoint: eventToUpdate.target.endPoint,
-                };
-            } else if (
-                newType === SplinePointType.QuadraticBezier &&
-                eventToUpdate.target.type === SplinePointType.CubicBezier
-            ) {
-                newTarget = {
-                    type: SplinePointType.QuadraticBezier,
-                    endPoint: eventToUpdate.target.endPoint,
-                };
-            } else {
-                console.warn("Tried to switch point type with invalid type");
-                return;
-            }
-
-            events[pointIndex] = {
-                ...eventToUpdate,
-                target: newTarget,
-            };
-            newTimeline[layerIndex] = [startPoint, events];
-            setShow({ ...show, timeline: newTimeline });
-        },
-        [show, setShow],
-    );
-
-    const editName = useCallback(
-        (value: string) => setShow({ ...show, name: value }),
-        [show, setShow],
-    );
-
-    const addRobot = useCallback(() => {
-        const newLayer: TimelineLayer = [
-            {
-                type: TimelineEventTypes.StartPointEvent,
-                target: {
-                    type: SplinePointType.StartPoint,
-                    point: {
-                        x: 0,
-                        y: 70,
-                    },
-                },
-                durationMs: 7500,
-            },
-            [],
-        ];
-        setShow({
-            ...show,
-            timeline: [...show.timeline, newLayer],
-        });
-    }, [show, setShow]);
-
-    const { currentTimestamp, playing, togglePlaying } =
-        usePlayHead(SEQUENCE_LENGTH_MS);
-
-    const { audio } = show;
-    const audioRef = useRef(new Audio());
-    useEffect(() => {
-        if (!audio) return;
-
-        audioRef.current.src = URL.createObjectURL(
-            new Blob([audio.data], {
-                type: audio.mimeType,
-            }),
-        );
-        audioRef.current.load();
-    }, [audio]);
-
-    useEffect(() => {
-        if (!audioRef.current) return;
-
-        if (audioRef.current.readyState !== 4) {
-            return;
-        }
-
-        if (playing && audioRef.current.paused) {
-            audioRef.current.currentTime = Math.min(
-                currentTimestamp.get() / 1000,
-                audioRef.current.duration,
-            );
-            audioRef.current.play();
-        }
-
-        if (!playing && !audioRef.current.paused) {
-            audioRef.current.pause();
-        }
-    }, [playing, currentTimestamp]);
-
-    const deleteLayer = useCallback(
-        (i: number) =>
-            setShow({
-                ...show,
-                timeline: show.timeline.toSpliced(i, 1),
-            }),
-        [show, setShow],
-    );
-
-    return {
-        show,
-        unsavedChanges,
-        loadAudioFromFile,
-        handleStartPointMove,
-        handlePointMove,
-        handleControlPointMove,
-        handleDeleteStartPoint,
-        handleDeletePoint,
-        handleSwitchPointType,
-        saveShowfile,
-        openShowfile,
-        editName,
-        undo,
-        redo,
-        addRobot,
-        currentTimestamp,
-        playing,
-        togglePlaying,
-        deleteLayer,
-        canRedo,
-        canUndo,
-    };
-}
 
 export function Editor() {
     const {
@@ -463,6 +58,7 @@ export function Editor() {
         canUndo,
         canRedo,
         deleteLayer,
+        sequenceLengthMs,
     } = useShowfile();
 
     // TODO: fix viewport height / timeline height
@@ -652,7 +248,7 @@ export function Editor() {
                         gap: `0rem ${RULER_TICK_GAP}`,
                     }}
                 >
-                    <Ruler sequenceLengthMs={SEQUENCE_LENGTH_MS} />
+                    <Ruler sequenceLengthMs={sequenceLengthMs} />
                     <TimelineLayer title="Seek">
                         <motion.div
                             style={{
@@ -793,47 +389,3 @@ function Ruler({ sequenceLengthMs }: { sequenceLengthMs: number }) {
         </TimelineLayer>
     );
 }
-
-function usePlayHead(endDurationMs: number, startMs = 0) {
-    const [playing, setPlaying] = useState(false);
-    const currentTimestamp = useMotionValue(startMs);
-    const time = useTime();
-    const lastAccessedTime = useMotionValue(0);
-
-    const setTimestamp = (timestamp: number) => {
-        currentTimestamp.set(timestamp);
-    };
-
-    const togglePlaying = useCallback(() => {
-        setPlaying((p) => {
-            const newPlaying = !p;
-            if (newPlaying) {
-                // When starting playback, initialize the lastAccessedTime
-                lastAccessedTime.set(time.get());
-            }
-            return newPlaying;
-        });
-    }, [setPlaying, time, lastAccessedTime]);
-
-    useMotionValueEvent(time, "change", (currentTime) => {
-        if (!playing) {
-            return;
-        }
-
-        const prevTime = lastAccessedTime.get();
-        const elapsedMs = currentTime - prevTime;
-
-        const newTimestamp = currentTimestamp.get() + elapsedMs;
-
-        if (newTimestamp >= endDurationMs) {
-            setPlaying(false);
-            currentTimestamp.set(0);
-        } else {
-            currentTimestamp.set(newTimestamp);
-        }
-
-        lastAccessedTime.set(currentTime);
-    });
-
-    return { currentTimestamp, playing, togglePlaying, setTimestamp };
-}
diff --git a/src/client/editor/hooks.ts b/src/client/editor/hooks.ts
index dc8adb97..e790c6fe 100644
--- a/src/client/editor/hooks.ts
+++ b/src/client/editor/hooks.ts
@@ -1,3 +1,4 @@
+import { useMotionValue, useTime, useMotionValueEvent } from "motion/react";
 import {
     type RefObject,
     useEffect,
@@ -145,3 +146,47 @@ export function useStateWithTrackedHistory<T>(initialValue: T) {
 
     return { value, setValue, canUndo, canRedo, undo, redo };
 }
+
+export function usePlayHead(endDurationMs: number, startMs = 0) {
+    const [playing, setPlaying] = useState(false);
+    const currentTimestamp = useMotionValue(startMs);
+    const time = useTime();
+    const lastAccessedTime = useMotionValue(0);
+
+    const setTimestamp = (timestamp: number) => {
+        currentTimestamp.set(timestamp);
+    };
+
+    const togglePlaying = useCallback(() => {
+        setPlaying((p) => {
+            const newPlaying = !p;
+            if (newPlaying) {
+                // When starting playback, initialize the lastAccessedTime
+                lastAccessedTime.set(time.get());
+            }
+            return newPlaying;
+        });
+    }, [setPlaying, time, lastAccessedTime]);
+
+    useMotionValueEvent(time, "change", (currentTime) => {
+        if (!playing) {
+            return;
+        }
+
+        const prevTime = lastAccessedTime.get();
+        const elapsedMs = currentTime - prevTime;
+
+        const newTimestamp = currentTimestamp.get() + elapsedMs;
+
+        if (newTimestamp >= endDurationMs) {
+            setPlaying(false);
+            currentTimestamp.set(0);
+        } else {
+            currentTimestamp.set(newTimestamp);
+        }
+
+        lastAccessedTime.set(currentTime);
+    });
+
+    return { currentTimestamp, playing, togglePlaying, setTimestamp };
+}
diff --git a/src/client/editor/showfile-state.tsx b/src/client/editor/showfile-state.tsx
new file mode 100644
index 00000000..3342b871
--- /dev/null
+++ b/src/client/editor/showfile-state.tsx
@@ -0,0 +1,401 @@
+// @ts-expect-error: chessbots client is a CommonJS module, but this library is a ES Module, so we need to tell TypeScript that it's okay
+import { decode as cborDecode, encode as cborEncode } from "cbor-x";
+
+// @ts-expect-error: chessbots client is a CommonJS module, but this library is a ES Module, so we need to tell TypeScript that it's okay
+import { fileOpen, fileSave } from "browser-fs-access";
+
+import { diff } from "deep-object-diff";
+import { useState, useEffect, useCallback, useRef } from "react";
+import {
+    createNewShowfile,
+    ShowfileSchema,
+    StartPointEvent,
+    TimelineEventTypes,
+    GoToPointEvent,
+    TimelineLayer,
+} from "../../common/show";
+import {
+    SplinePointType,
+    CubicBezier,
+    QuadraticBezier,
+    type Coords,
+} from "../../common/spline";
+import {
+    usePreventExitWithUnsavedChanges,
+    useStateWithTrackedHistory,
+} from "./hooks";
+
+export function useShowfile() {
+    const [initialShow, setInitialShow] = useState(createNewShowfile());
+
+    const [fsHandle, setFsHandle] = useState<FileSystemFileHandle | null>(null);
+
+    const [unsavedChanges, setUnsavedChanges] =
+        usePreventExitWithUnsavedChanges();
+
+    const {
+        value: show,
+        setValue: setShow,
+        canUndo,
+        canRedo,
+        undo,
+        redo,
+    } = useStateWithTrackedHistory(initialShow);
+
+    useEffect(() => {
+        const result = diff(initialShow, show);
+        if (Object.keys(result).length === 0) {
+            setUnsavedChanges(false);
+        } else {
+            setUnsavedChanges(true);
+        }
+    }, [initialShow, show, setUnsavedChanges]);
+
+    const openShowfile = useCallback(async () => {
+        const blob = await fileOpen({
+            mimeTypes: ["application/chessbots-showfile"],
+            extensions: [".cbor"],
+            description: "Chess Bots Showfile",
+        });
+
+        let data: unknown | null = null;
+        try {
+            data = cborDecode(new Uint8Array(await blob.arrayBuffer()));
+        } catch (e) {
+            // TODO: toast or alert
+            console.warn("Failed to decode showfile as CBOR", e);
+            return;
+        }
+
+        const show = ShowfileSchema.check(data);
+
+        if (!show) {
+            // TODO: toast or alert
+            console.warn("File was CBOR but not a valid showfile", data);
+            return;
+        }
+
+        setInitialShow(show);
+        setShow(show);
+        if (blob.handle) setFsHandle(blob.handle);
+    }, [setShow]);
+
+    const saveShowfile = useCallback(async () => {
+        const blob = new Blob([cborEncode(show)], {
+            type: "application/chessbots-showfile",
+        });
+        await fileSave(
+            blob,
+            {
+                mimeTypes: ["application/chessbots-showfile"],
+                extensions: [".cbor"],
+                fileName: show.name + ".cbor",
+            },
+            fsHandle,
+        );
+
+        setInitialShow(show);
+    }, [fsHandle, show]);
+
+    const loadAudioFromFile = useCallback(async () => {
+        const blob = await fileOpen({
+            mimeTypes: ["audio/mpeg", "audio/wav"],
+            extensions: [".mp3", ".wav"],
+        });
+        const audio = new Uint8Array(await blob.arrayBuffer());
+        setShow({
+            ...show,
+            audio: {
+                data: audio,
+                mimeType: blob.type,
+            },
+        });
+    }, [setShow, show]);
+
+    const handleStartPointMove = useCallback(
+        (layerIndex: number, newCoords: Coords) => {
+            const newTimeline = [...show.timeline];
+            const layer = newTimeline[layerIndex];
+            if (layer) {
+                const [startPoint, remainingEvents] = layer;
+                const newStartPointEvent: StartPointEvent = {
+                    ...startPoint,
+                    target: { ...startPoint.target, point: newCoords },
+                };
+                newTimeline[layerIndex] = [newStartPointEvent, remainingEvents];
+                setShow({ ...show, timeline: newTimeline });
+            }
+        },
+        [show, setShow],
+    );
+
+    const handlePointMove = useCallback(
+        (layerIndex: number, pointIndex: number, newCoords: Coords) => {
+            const newTimeline = [...show.timeline];
+            const layer = newTimeline[layerIndex];
+            if (!layer) return;
+            const [startPoint, remainingEvents] = layer;
+            const events = [...remainingEvents];
+            const eventToUpdate = events[pointIndex];
+
+            if (
+                eventToUpdate &&
+                eventToUpdate.type === TimelineEventTypes.GoToPointEvent
+            ) {
+                events[pointIndex] = {
+                    ...eventToUpdate,
+                    target: {
+                        ...eventToUpdate.target,
+                        endPoint: newCoords,
+                    },
+                };
+                newTimeline[layerIndex] = [startPoint, events];
+                setShow({ ...show, timeline: newTimeline });
+            }
+        },
+        [show, setShow],
+    );
+
+    const handleControlPointMove = useCallback(
+        (layerIndex: number, pointIndex: number, newCoords: Coords) => {
+            const newTimeline = [...show.timeline];
+            const layer = newTimeline[layerIndex];
+            if (!layer) return;
+            const [startPoint, remainingEvents] = layer;
+            const events = [...remainingEvents];
+            const eventToUpdate = events[pointIndex];
+
+            if (
+                eventToUpdate?.type === TimelineEventTypes.GoToPointEvent &&
+                eventToUpdate.target.type === SplinePointType.CubicBezier
+            ) {
+                events[pointIndex] = {
+                    ...eventToUpdate,
+                    target: {
+                        ...eventToUpdate.target,
+                        controlPoint: newCoords,
+                    },
+                };
+                newTimeline[layerIndex] = [startPoint, events];
+                setShow({ ...show, timeline: newTimeline });
+            }
+        },
+        [show, setShow],
+    );
+
+    const handleDeleteStartPoint = useCallback(
+        (layerIndex: number) => {
+            const newTimeline = [...show.timeline];
+            const layer = newTimeline[layerIndex];
+            if (!layer) return;
+
+            const [, remainingEvents] = layer;
+
+            // Promote the first GoToPoint event (if any) to be the new start point
+            const firstGoToPointIndex = remainingEvents.findIndex(
+                (e) => e.type === TimelineEventTypes.GoToPointEvent,
+            );
+
+            if (firstGoToPointIndex !== -1) {
+                const firstGoToPointEvent = remainingEvents[
+                    firstGoToPointIndex
+                ] as GoToPointEvent;
+                const newStartPointEvent: StartPointEvent = {
+                    type: TimelineEventTypes.StartPointEvent,
+                    durationMs: firstGoToPointEvent.durationMs, // Or use firstGoToPointEvent.durationMs?
+                    target: {
+                        type: SplinePointType.StartPoint, // Convert midpoint to start point
+                        point: firstGoToPointEvent.target.endPoint, // Use the endpoint as the new start
+                    },
+                };
+                const newRemainingEvents = remainingEvents.toSpliced(
+                    firstGoToPointIndex,
+                    1,
+                );
+                newTimeline[layerIndex] = [
+                    newStartPointEvent,
+                    newRemainingEvents,
+                ];
+                setShow({ ...show, timeline: newTimeline });
+            } else {
+                console.warn(
+                    "Tried to delete a start point with no subsequent GoTo points. Consider deleting layer instead.",
+                );
+            }
+        },
+        [show, setShow],
+    );
+
+    const handleDeletePoint = useCallback(
+        (layerIndex: number, pointIndex: number) => {
+            const newTimeline = [...show.timeline];
+            const layer = newTimeline[layerIndex];
+            if (!layer) {
+                return;
+            }
+            const [startPoint, remainingEvents] = layer;
+            const events = remainingEvents.toSpliced(pointIndex, 1); // Remove the event
+            newTimeline[layerIndex] = [startPoint, events];
+            setShow({ ...show, timeline: newTimeline });
+        },
+        [show, setShow],
+    );
+
+    const handleSwitchPointType = useCallback(
+        (
+            layerIndex: number,
+            pointIndex: number,
+            newType:
+                | SplinePointType.QuadraticBezier
+                | SplinePointType.CubicBezier,
+        ) => {
+            const newTimeline = [...show.timeline];
+            const layer = newTimeline[layerIndex];
+            if (!layer) return;
+
+            const [startPoint, remainingEvents] = layer;
+            const events = [...remainingEvents];
+
+            const eventToUpdate = events[pointIndex];
+
+            if (eventToUpdate?.type !== TimelineEventTypes.GoToPointEvent) {
+                console.warn(
+                    "Tried to switch point type on non-GoToPointEvent",
+                );
+                return;
+            }
+            let newTarget: CubicBezier | QuadraticBezier;
+            if (
+                newType === SplinePointType.CubicBezier &&
+                eventToUpdate.target.type === SplinePointType.QuadraticBezier
+            ) {
+                newTarget = {
+                    type: SplinePointType.CubicBezier,
+                    controlPoint: {
+                        x: eventToUpdate.target.endPoint.x - 20,
+                        y: eventToUpdate.target.endPoint.y - 20,
+                    },
+                    endPoint: eventToUpdate.target.endPoint,
+                };
+            } else if (
+                newType === SplinePointType.QuadraticBezier &&
+                eventToUpdate.target.type === SplinePointType.CubicBezier
+            ) {
+                newTarget = {
+                    type: SplinePointType.QuadraticBezier,
+                    endPoint: eventToUpdate.target.endPoint,
+                };
+            } else {
+                console.warn("Tried to switch point type with invalid type");
+                return;
+            }
+
+            events[pointIndex] = {
+                ...eventToUpdate,
+                target: newTarget,
+            };
+            newTimeline[layerIndex] = [startPoint, events];
+            setShow({ ...show, timeline: newTimeline });
+        },
+        [show, setShow],
+    );
+
+    const editName = useCallback(
+        (value: string) => setShow({ ...show, name: value }),
+        [show, setShow],
+    );
+
+    const addRobot = useCallback(() => {
+        const newLayer: TimelineLayer = [
+            {
+                type: TimelineEventTypes.StartPointEvent,
+                target: {
+                    type: SplinePointType.StartPoint,
+                    point: {
+                        x: 0,
+                        y: 70,
+                    },
+                },
+                durationMs: 7500,
+            },
+            [],
+        ];
+        setShow({
+            ...show,
+            timeline: [...show.timeline, newLayer],
+        });
+    }, [show, setShow]);
+
+    // TODO: figure out how to get this from the showfile
+    const sequenceLengthMs = 10 * 1000;
+
+    const { currentTimestamp, playing, togglePlaying } =
+        usePlayHead(sequenceLengthMs);
+
+    const { audio } = show;
+    const audioRef = useRef(new Audio());
+    useEffect(() => {
+        if (!audio) return;
+
+        audioRef.current.src = URL.createObjectURL(
+            new Blob([audio.data], {
+                type: audio.mimeType,
+            }),
+        );
+        audioRef.current.load();
+    }, [audio]);
+
+    useEffect(() => {
+        if (!audioRef.current) return;
+
+        if (audioRef.current.readyState !== 4) {
+            return;
+        }
+
+        if (playing && audioRef.current.paused) {
+            audioRef.current.currentTime = Math.min(
+                currentTimestamp.get() / 1000,
+                audioRef.current.duration,
+            );
+            audioRef.current.play();
+        }
+
+        if (!playing && !audioRef.current.paused) {
+            audioRef.current.pause();
+        }
+    }, [playing, currentTimestamp]);
+
+    const deleteLayer = useCallback(
+        (i: number) =>
+            setShow({
+                ...show,
+                timeline: show.timeline.toSpliced(i, 1),
+            }),
+        [show, setShow],
+    );
+
+    return {
+        show,
+        unsavedChanges,
+        loadAudioFromFile,
+        handleStartPointMove,
+        handlePointMove,
+        handleControlPointMove,
+        handleDeleteStartPoint,
+        handleDeletePoint,
+        handleSwitchPointType,
+        saveShowfile,
+        openShowfile,
+        editName,
+        undo,
+        redo,
+        addRobot,
+        currentTimestamp,
+        playing,
+        togglePlaying,
+        deleteLayer,
+        canRedo,
+        canUndo,
+        sequenceLengthMs,
+    };
+}

From c057f64e43cb6fa06633edbc6e735f3b18328b99 Mon Sep 17 00:00:00 2001
From: Jason Antwi-Appah <hey@jasonaa.me>
Date: Mon, 14 Apr 2025 18:46:34 -0500
Subject: [PATCH 31/92] Lower TS version

---
 package.json                         | 2 +-
 src/client/editor/showfile-state.tsx | 1 +
 yarn.lock                            | 8 ++++----
 3 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 26d1b381..9d2b2d73 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,7 @@
     "dependencies": {
         "chess.js": "^1.0.0-beta.6",
         "eslint-plugin-tsdoc": "^0.2.17",
-        "typescript": "^5.8.3",
+        "typescript": "5.5.4",
         "vite-express": "^0.11.1"
     },
     "devDependencies": {
diff --git a/src/client/editor/showfile-state.tsx b/src/client/editor/showfile-state.tsx
index 3342b871..60ba5954 100644
--- a/src/client/editor/showfile-state.tsx
+++ b/src/client/editor/showfile-state.tsx
@@ -21,6 +21,7 @@ import {
     type Coords,
 } from "../../common/spline";
 import {
+    usePlayHead,
     usePreventExitWithUnsavedChanges,
     useStateWithTrackedHistory,
 } from "./hooks";
diff --git a/yarn.lock b/yarn.lock
index 2e65478d..656b27cc 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3535,10 +3535,10 @@ typedoc@^0.28.0:
     minimatch "^9.0.5"
     yaml "^2.7.1"
 
-typescript@^5.8.3:
-  version "5.8.3"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.8.3.tgz#92f8a3e5e3cf497356f4178c34cd65a7f5e8440e"
-  integrity sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==
+typescript@5.5.4:
+  version "5.5.4"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.5.4.tgz#d9852d6c82bad2d2eda4fd74a5762a8f5909e9ba"
+  integrity sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q==
 
 uc.micro@^2.0.0, uc.micro@^2.1.0:
   version "2.1.0"

From bc5ce64fd20bbd89b248fe22a55e7a42aa880508 Mon Sep 17 00:00:00 2001
From: Jason Antwi-Appah <hey@jasonaa.me>
Date: Mon, 14 Apr 2025 19:58:50 -0500
Subject: [PATCH 32/92] Add schemas and types from authoring-splines

---
 src/common/show.ts   | 149 +++++++++++++++++++++++++++++++++++++++++++
 src/common/spline.ts |  74 +++++++++++++++++++++
 2 files changed, 223 insertions(+)
 create mode 100644 src/common/show.ts
 create mode 100644 src/common/spline.ts

diff --git a/src/common/show.ts b/src/common/show.ts
new file mode 100644
index 00000000..d0bd4ae8
--- /dev/null
+++ b/src/common/show.ts
@@ -0,0 +1,149 @@
+import {
+    Number,
+    String,
+    Record as RuntypesRecord,
+    Array,
+    Literal,
+    Union,
+    type Static,
+    Optional,
+    Tuple,
+    InstanceOf,
+} from "runtypes";
+import {
+    MidpointSchema,
+    type Spline,
+    SplinePointType,
+    StartPointSchema,
+} from "./spline";
+import { Colors } from "@blueprintjs/core";
+
+const AudioSchema = RuntypesRecord({
+    data: InstanceOf<Uint8Array>(Uint8Array),
+    mimeType: String,
+});
+export type Audio = Static<typeof AudioSchema>;
+
+export const TimelineEventTypes = {
+    GoToPointEvent: "goto_point",
+    WaitEvent: "wait",
+    StartPointEvent: "start_point",
+} as const;
+
+export const GoToPointEventSchema = RuntypesRecord({
+    durationMs: Number,
+    target: MidpointSchema,
+    type: Literal(TimelineEventTypes.GoToPointEvent),
+});
+export type GoToPointEvent = Static<typeof GoToPointEventSchema>;
+
+const WaitEventSchema = RuntypesRecord({
+    durationMs: Number,
+    type: Literal(TimelineEventTypes.WaitEvent),
+});
+export type WaitEvent = Static<typeof WaitEventSchema>;
+
+const StartPointEventSchema = RuntypesRecord({
+    type: Literal(TimelineEventTypes.StartPointEvent),
+    target: StartPointSchema,
+    durationMs: Number,
+});
+export type StartPointEvent = Static<typeof StartPointEventSchema>;
+
+const TimelineEventSchema = Union(GoToPointEventSchema, WaitEventSchema);
+const TimelineLayerSchema = Tuple(
+    StartPointEventSchema,
+    Array(TimelineEventSchema),
+);
+export type TimelineLayer = Static<typeof TimelineLayerSchema>;
+
+export type TimelineEvents =
+    | Static<typeof TimelineEventSchema>
+    | StartPointEvent;
+
+export const ShowfileSchema = RuntypesRecord({
+    $chessbots_show_schema_version: Literal(1),
+    timeline: Array(TimelineLayerSchema),
+    audio: Optional(AudioSchema),
+    name: String,
+});
+export type Showfile = Static<typeof ShowfileSchema>;
+
+export function timelineLayerToSpline(layer: TimelineLayer): Spline {
+    const [startPoint, events] = layer;
+    return {
+        start: startPoint.target,
+        points: events
+            .filter((event) => event.type === TimelineEventTypes.GoToPointEvent)
+            .map(
+                (event) =>
+                    (event as Static<typeof GoToPointEventSchema>).target,
+            ),
+    };
+}
+
+// TODO: empty showfile
+export function createNewShowfile(): Showfile {
+    return {
+        $chessbots_show_schema_version: 1,
+        timeline: [
+            [
+                {
+                    type: TimelineEventTypes.StartPointEvent,
+                    target: {
+                        type: SplinePointType.StartPoint,
+                        point: {
+                            x: 0,
+                            y: 70,
+                        },
+                    },
+                    durationMs: 7500,
+                },
+                [
+                    {
+                        type: TimelineEventTypes.GoToPointEvent,
+                        durationMs: 1000,
+                        target: {
+                            type: SplinePointType.QuadraticBezier,
+                            endPoint: { x: 100, y: 100 },
+                        },
+                    },
+                    {
+                        type: TimelineEventTypes.WaitEvent,
+                        durationMs: 5000,
+                    },
+                    {
+                        type: TimelineEventTypes.GoToPointEvent,
+                        durationMs: 1000,
+                        target: {
+                            type: SplinePointType.CubicBezier,
+                            endPoint: { x: 315, y: 50 },
+                            controlPoint: {
+                                x: 300,
+                                y: 40,
+                            },
+                        },
+                    },
+                    {
+                        type: TimelineEventTypes.GoToPointEvent,
+                        durationMs: 1000,
+                        target: {
+                            type: SplinePointType.QuadraticBezier,
+                            endPoint: { x: 70, y: 70 },
+                        },
+                    },
+                ],
+            ],
+        ],
+        name: `Show ${new Date().toDateString()} ${new Date().toLocaleTimeString()}`,
+    };
+}
+
+export const EVENT_TYPE_TO_COLOR: Record<
+    (typeof TimelineEventTypes)[keyof typeof TimelineEventTypes],
+    (typeof Colors)[keyof typeof Colors]
+> = {
+    [TimelineEventTypes.GoToPointEvent]: Colors.BLUE2,
+    [TimelineEventTypes.WaitEvent]: Colors.GRAY2,
+    [TimelineEventTypes.StartPointEvent]: Colors.GREEN2,
+};
diff --git a/src/common/spline.ts b/src/common/spline.ts
new file mode 100644
index 00000000..0b1e522e
--- /dev/null
+++ b/src/common/spline.ts
@@ -0,0 +1,74 @@
+import {
+    Number as NumberType,
+    Record,
+    Union,
+    Array,
+    Literal,
+    Static,
+} from "runtypes";
+
+export enum SplinePointType {
+    StartPoint = "start",
+    CubicBezier = "cubic",
+    QuadraticBezier = "quadratic",
+}
+
+export const CoordsSchema = Record({
+    x: NumberType,
+    y: NumberType,
+});
+export type Coords = Static<typeof CoordsSchema>;
+
+export const StartPointSchema = Record({
+    type: Literal(SplinePointType.StartPoint),
+    point: CoordsSchema,
+});
+export type StartPointSchema = Static<typeof StartPointSchema>;
+
+export const CubicBezierSchema = Record({
+    type: Literal(SplinePointType.CubicBezier),
+    controlPoint: CoordsSchema,
+    endPoint: CoordsSchema,
+});
+export type CubicBezier = Static<typeof CubicBezierSchema>;
+
+export const QuadraticBezierSchema = Record({
+    type: Literal(SplinePointType.QuadraticBezier),
+    endPoint: CoordsSchema,
+});
+export type QuadraticBezier = Static<typeof QuadraticBezierSchema>;
+
+export const MidpointSchema = Union(CubicBezierSchema, QuadraticBezierSchema);
+export type Midpoint = Static<typeof MidpointSchema>;
+
+export const SplineSchema = Record({
+    start: StartPointSchema,
+    points: Array(MidpointSchema),
+});
+export type Spline = Static<typeof SplineSchema>;
+
+export const PointSchema = Union(
+    StartPointSchema,
+    CubicBezierSchema,
+    QuadraticBezierSchema,
+);
+export type Point = Static<typeof PointSchema>;
+
+function pointToSvgPathCommand(point: Point): string {
+    switch (point.type) {
+        case SplinePointType.StartPoint:
+            return `M${point.point.x},${point.point.y}`;
+        case SplinePointType.CubicBezier:
+            return `S${point.controlPoint.x},${point.controlPoint.y} ${point.endPoint.x},${point.endPoint.y}`;
+        case SplinePointType.QuadraticBezier:
+            return `T${point.endPoint.x},${point.endPoint.y}`;
+    }
+}
+
+export function splineToSvgDrawAttribute(spline: Spline): string {
+    let path = pointToSvgPathCommand(spline.start);
+    for (const point of spline.points) {
+        path += ` ${pointToSvgPathCommand(point)}`;
+    }
+    return path;
+}

From 47775a2befce1fe58041c83a89f1d879a9de91da Mon Sep 17 00:00:00 2001
From: Jason Antwi-Appah <hey@jasonaa.me>
Date: Mon, 14 Apr 2025 20:36:44 -0500
Subject: [PATCH 33/92] Add comments

---
 src/common/show.ts   | 34 ++++++++++++++++++++++++++--------
 src/common/spline.ts | 16 ++++++++++++++++
 2 files changed, 42 insertions(+), 8 deletions(-)

diff --git a/src/common/show.ts b/src/common/show.ts
index d0bd4ae8..3f963ca1 100644
--- a/src/common/show.ts
+++ b/src/common/show.ts
@@ -18,12 +18,6 @@ import {
 } from "./spline";
 import { Colors } from "@blueprintjs/core";
 
-const AudioSchema = RuntypesRecord({
-    data: InstanceOf<Uint8Array>(Uint8Array),
-    mimeType: String,
-});
-export type Audio = Static<typeof AudioSchema>;
-
 export const TimelineEventTypes = {
     GoToPointEvent: "goto_point",
     WaitEvent: "wait",
@@ -51,6 +45,8 @@ const StartPointEventSchema = RuntypesRecord({
 export type StartPointEvent = Static<typeof StartPointEventSchema>;
 
 const TimelineEventSchema = Union(GoToPointEventSchema, WaitEventSchema);
+// TODO: refactor this to be an object consisting of 2 keys: 
+// startPoint and remainingEvents so that it is more self-documenting
 const TimelineLayerSchema = Tuple(
     StartPointEventSchema,
     Array(TimelineEventSchema),
@@ -61,14 +57,33 @@ export type TimelineEvents =
     | Static<typeof TimelineEventSchema>
     | StartPointEvent;
 
+/**
+ * The showfile schema. 
+ * 
+ * @remarks
+ * At runtime this is a regular JS object. When saved as a file, it is stored as binary in the Concise Binary Object Representation (CBOR) format.
+ * The main reason for using a binary format is to allow the audio file to be included inline with the file. Alternatives include base64 encoding the audio file so 
+ * it could be stored as a string in a JSON file, or storing the audio file separately, perhaps using a ZIP file.
+ */
 export const ShowfileSchema = RuntypesRecord({
+    // Be sure to increment the schema version number when making breaking changes to the showfile schema.
     $chessbots_show_schema_version: Literal(1),
+    // The timeline is an array of timeline 'layers' - a layer consists of an array that includes all the events for one robot.
     timeline: Array(TimelineLayerSchema),
-    audio: Optional(AudioSchema),
+    audio: Optional(RuntypesRecord({
+      data: InstanceOf<Uint8Array>(Uint8Array),
+      mimeType: String,
+  })),
     name: String,
 });
 export type Showfile = Static<typeof ShowfileSchema>;
 
+
+/**
+ * Converts a timeline layer to a spline.
+ * @param layer - the timeline layer to convert.
+ * @returns - the spline representation of the timeline layer.
+ */
 export function timelineLayerToSpline(layer: TimelineLayer): Spline {
     const [startPoint, events] = layer;
     return {
@@ -82,7 +97,10 @@ export function timelineLayerToSpline(layer: TimelineLayer): Spline {
     };
 }
 
-// TODO: empty showfile
+/**
+ * Creates a new empty showfile.
+ * @returns The new empty showfile.
+ */
 export function createNewShowfile(): Showfile {
     return {
         $chessbots_show_schema_version: 1,
diff --git a/src/common/spline.ts b/src/common/spline.ts
index 0b1e522e..b4ee2cce 100644
--- a/src/common/spline.ts
+++ b/src/common/spline.ts
@@ -54,6 +54,11 @@ export const PointSchema = Union(
 );
 export type Point = Static<typeof PointSchema>;
 
+/**
+ * Converts a point to an SVG path command. This is used in combination with the {@link splineToSvgDrawAttribute} function to convert a spline to a string that can be used as the `d` attribute of an SVG path.
+ * @param point - the point to convert.
+ * @returns - the SVG path command for the point.
+ */
 function pointToSvgPathCommand(point: Point): string {
     switch (point.type) {
         case SplinePointType.StartPoint:
@@ -65,6 +70,17 @@ function pointToSvgPathCommand(point: Point): string {
     }
 }
 
+/**
+ * Converts a spline to a string that can be used as the `d` attribute of an SVG path, for a visual display of the spline.
+ * @example 
+ * ```jsx
+ * <svg>
+ *   <path d={splineToSvgDrawAttribute(spline)} stroke="purple" fill="none" />
+ * </svg>
+ * ```
+ * @param spline - the spline to convert.
+ * @returns the SVG path for the spline.
+ */
 export function splineToSvgDrawAttribute(spline: Spline): string {
     let path = pointToSvgPathCommand(spline.start);
     for (const point of spline.points) {

From 1e467f4da99a82b4cd1cec1d4fdfc028fe3cc26c Mon Sep 17 00:00:00 2001
From: Jason Antwi-Appah <hey@jasonaa.me>
Date: Mon, 14 Apr 2025 23:06:40 -0500
Subject: [PATCH 34/92] Make timeline events reorderable

---
 src/client/editor/editor.tsx         | 43 ++++++++++++++++++++++------
 src/client/editor/showfile-state.tsx | 16 +++++++++++
 src/common/show.ts                   | 33 ++++++++++++---------
 src/common/spline.ts                 |  2 +-
 4 files changed, 72 insertions(+), 22 deletions(-)

diff --git a/src/client/editor/editor.tsx b/src/client/editor/editor.tsx
index a2b73554..3857c8a8 100644
--- a/src/client/editor/editor.tsx
+++ b/src/client/editor/editor.tsx
@@ -18,11 +18,12 @@ import {
     type TimelineEvents,
     EVENT_TYPE_TO_COLOR,
     type TimelineLayer,
-    TimelineEventTypes,
+    NonStartPointEvent,
 } from "../../common/show";
 import { SplineEditor } from "./spline-editor";
 import { motion, useTransform } from "motion/react";
 import { useShowfile } from "./showfile-state";
+import { Reorder } from "motion/react";
 
 const RULER_TICK_INTERVAL_MS = 100;
 const RULER_EXTRA_TICK_COUNT = 20;
@@ -59,6 +60,7 @@ export function Editor() {
         canRedo,
         deleteLayer,
         sequenceLengthMs,
+        updateTimelineEventOrders,
     } = useShowfile();
 
     // TODO: fix viewport height / timeline height
@@ -269,9 +271,34 @@ export function Editor() {
                             >
                                 <div style={{ display: "flex" }}>
                                     <TimelineEvent event={startPoint} />
-                                    {remainingEvents.map((event) => {
-                                        return <TimelineEvent event={event} />;
-                                    })}
+                                    <Reorder.Group
+                                        as="div"
+                                        axis="x"
+                                        style={{ display: "contents" }}
+                                        values={[
+                                            startPoint,
+                                            ...remainingEvents,
+                                        ]}
+                                        onReorder={(newIndices) => {
+                                            updateTimelineEventOrders(
+                                                i,
+                                                newIndices as NonStartPointEvent[],
+                                            );
+                                        }}
+                                    >
+                                        {remainingEvents.map((event) => {
+                                            return (
+                                                <Reorder.Item
+                                                    value={event}
+                                                    key={event.id}
+                                                >
+                                                    <TimelineEvent
+                                                        event={event}
+                                                    />
+                                                </Reorder.Item>
+                                            );
+                                        })}
+                                    </Reorder.Group>
                                 </div>
                                 {/* TODO: add ability to add events */}
                             </TimelineLayer>
@@ -300,10 +327,10 @@ const TimelineEvent = forwardRef<HTMLDivElement, { event: TimelineEvents }>(
                     width: millisToXPosition(event.durationMs),
                     backgroundColor: EVENT_TYPE_TO_COLOR[event.type],
                     color: "white",
-                    visibility:
-                        event.type === TimelineEventTypes.WaitEvent ?
-                            "hidden"
-                        :   "inherit",
+                    // visibility:
+                    //     event.type === TimelineEventTypes.WaitEvent ?
+                    //         "hidden"
+                    //     :   "inherit",
                 }}
                 compact
                 elevation={Elevation.TWO}
diff --git a/src/client/editor/showfile-state.tsx b/src/client/editor/showfile-state.tsx
index 60ba5954..2b6c9773 100644
--- a/src/client/editor/showfile-state.tsx
+++ b/src/client/editor/showfile-state.tsx
@@ -13,6 +13,7 @@ import {
     TimelineEventTypes,
     GoToPointEvent,
     TimelineLayer,
+    NonStartPointEvent,
 } from "../../common/show";
 import {
     SplinePointType,
@@ -202,6 +203,7 @@ export function useShowfile() {
                     firstGoToPointIndex
                 ] as GoToPointEvent;
                 const newStartPointEvent: StartPointEvent = {
+                    id: crypto.randomUUID(),
                     type: TimelineEventTypes.StartPointEvent,
                     durationMs: firstGoToPointEvent.durationMs, // Or use firstGoToPointEvent.durationMs?
                     target: {
@@ -309,6 +311,7 @@ export function useShowfile() {
     const addRobot = useCallback(() => {
         const newLayer: TimelineLayer = [
             {
+                id: crypto.randomUUID(),
                 type: TimelineEventTypes.StartPointEvent,
                 target: {
                     type: SplinePointType.StartPoint,
@@ -375,7 +378,20 @@ export function useShowfile() {
         [show, setShow],
     );
 
+    const updateTimelineEventOrders = useCallback(
+        (layerIndex: number, newList: NonStartPointEvent[]) => {
+            const newTimeline = [...show.timeline];
+            const layer = newTimeline[layerIndex];
+            if (!layer) return;
+            const [startPoint] = layer;
+            newTimeline[layerIndex] = [startPoint, newList];
+            setShow({ ...show, timeline: newTimeline });
+        },
+        [show, setShow],
+    );
+
     return {
+        updateTimelineEventOrders,
         show,
         unsavedChanges,
         loadAudioFromFile,
diff --git a/src/common/show.ts b/src/common/show.ts
index 3f963ca1..adf4eff0 100644
--- a/src/common/show.ts
+++ b/src/common/show.ts
@@ -28,12 +28,14 @@ export const GoToPointEventSchema = RuntypesRecord({
     durationMs: Number,
     target: MidpointSchema,
     type: Literal(TimelineEventTypes.GoToPointEvent),
+    id: String,
 });
 export type GoToPointEvent = Static<typeof GoToPointEventSchema>;
 
 const WaitEventSchema = RuntypesRecord({
     durationMs: Number,
     type: Literal(TimelineEventTypes.WaitEvent),
+    id: String,
 });
 export type WaitEvent = Static<typeof WaitEventSchema>;
 
@@ -41,28 +43,27 @@ const StartPointEventSchema = RuntypesRecord({
     type: Literal(TimelineEventTypes.StartPointEvent),
     target: StartPointSchema,
     durationMs: Number,
+    id: String,
 });
 export type StartPointEvent = Static<typeof StartPointEventSchema>;
 
 const TimelineEventSchema = Union(GoToPointEventSchema, WaitEventSchema);
-// TODO: refactor this to be an object consisting of 2 keys: 
+export type NonStartPointEvent = Static<typeof TimelineEventSchema>;
+// TODO: refactor this to be an object consisting of 2 keys:
 // startPoint and remainingEvents so that it is more self-documenting
 const TimelineLayerSchema = Tuple(
     StartPointEventSchema,
     Array(TimelineEventSchema),
 );
 export type TimelineLayer = Static<typeof TimelineLayerSchema>;
-
-export type TimelineEvents =
-    | Static<typeof TimelineEventSchema>
-    | StartPointEvent;
+export type TimelineEvents = NonStartPointEvent | StartPointEvent;
 
 /**
- * The showfile schema. 
- * 
+ * The showfile schema.
+ *
  * @remarks
  * At runtime this is a regular JS object. When saved as a file, it is stored as binary in the Concise Binary Object Representation (CBOR) format.
- * The main reason for using a binary format is to allow the audio file to be included inline with the file. Alternatives include base64 encoding the audio file so 
+ * The main reason for using a binary format is to allow the audio file to be included inline with the file. Alternatives include base64 encoding the audio file so
  * it could be stored as a string in a JSON file, or storing the audio file separately, perhaps using a ZIP file.
  */
 export const ShowfileSchema = RuntypesRecord({
@@ -70,15 +71,16 @@ export const ShowfileSchema = RuntypesRecord({
     $chessbots_show_schema_version: Literal(1),
     // The timeline is an array of timeline 'layers' - a layer consists of an array that includes all the events for one robot.
     timeline: Array(TimelineLayerSchema),
-    audio: Optional(RuntypesRecord({
-      data: InstanceOf<Uint8Array>(Uint8Array),
-      mimeType: String,
-  })),
+    audio: Optional(
+        RuntypesRecord({
+            data: InstanceOf<Uint8Array>(Uint8Array),
+            mimeType: String,
+        }),
+    ),
     name: String,
 });
 export type Showfile = Static<typeof ShowfileSchema>;
 
-
 /**
  * Converts a timeline layer to a spline.
  * @param layer - the timeline layer to convert.
@@ -116,6 +118,7 @@ export function createNewShowfile(): Showfile {
                         },
                     },
                     durationMs: 7500,
+                    id: "4f21401d-07cf-434f-a73c-6482ab82f210",
                 },
                 [
                     {
@@ -125,10 +128,12 @@ export function createNewShowfile(): Showfile {
                             type: SplinePointType.QuadraticBezier,
                             endPoint: { x: 100, y: 100 },
                         },
+                        id: "4f21401d-07cf-434f-a73c-6482ab82f211",
                     },
                     {
                         type: TimelineEventTypes.WaitEvent,
                         durationMs: 5000,
+                        id: "4f21401d-07cf-434f-a73c-6482ab82f212",
                     },
                     {
                         type: TimelineEventTypes.GoToPointEvent,
@@ -141,6 +146,7 @@ export function createNewShowfile(): Showfile {
                                 y: 40,
                             },
                         },
+                        id: "4f21401d-07cf-434f-a73c-6482ab82f213",
                     },
                     {
                         type: TimelineEventTypes.GoToPointEvent,
@@ -149,6 +155,7 @@ export function createNewShowfile(): Showfile {
                             type: SplinePointType.QuadraticBezier,
                             endPoint: { x: 70, y: 70 },
                         },
+                        id: "4f21401d-07cf-434f-a73c-6482ab82f214",
                     },
                 ],
             ],
diff --git a/src/common/spline.ts b/src/common/spline.ts
index b4ee2cce..fb185a50 100644
--- a/src/common/spline.ts
+++ b/src/common/spline.ts
@@ -72,7 +72,7 @@ function pointToSvgPathCommand(point: Point): string {
 
 /**
  * Converts a spline to a string that can be used as the `d` attribute of an SVG path, for a visual display of the spline.
- * @example 
+ * @example
  * ```jsx
  * <svg>
  *   <path d={splineToSvgDrawAttribute(spline)} stroke="purple" fill="none" />

From 67f19bb125365bfd25cf57204821a034b377c4a8 Mon Sep 17 00:00:00 2001
From: Jason Antwi-Appah <hey@jasonaa.me>
Date: Tue, 15 Apr 2025 02:40:41 -0500
Subject: [PATCH 35/92] Implement timeline event reordering and duration
 editing

---
 src/client/editor/editor.tsx         | 271 +++++++++++++++++++--------
 src/client/editor/showfile-state.tsx |  58 ++++++
 src/client/package.json              |   1 +
 src/common/show.ts                   |  23 ++-
 yarn.lock                            |  12 ++
 5 files changed, 286 insertions(+), 79 deletions(-)

diff --git a/src/client/editor/editor.tsx b/src/client/editor/editor.tsx
index 3857c8a8..1ebe50b0 100644
--- a/src/client/editor/editor.tsx
+++ b/src/client/editor/editor.tsx
@@ -1,4 +1,10 @@
-import { forwardRef, type PropsWithChildren, useMemo } from "react";
+import {
+    forwardRef,
+    type PropsWithChildren,
+    useEffect,
+    useMemo,
+    useRef,
+} from "react";
 import {
     Section,
     Text,
@@ -11,7 +17,7 @@ import {
     Tag,
     useHotkeys,
     type HotkeyConfig,
-    Elevation,
+    SegmentedControl,
 } from "@blueprintjs/core";
 import { RobotGrid } from "../debug/simulator";
 import {
@@ -19,21 +25,32 @@ import {
     EVENT_TYPE_TO_COLOR,
     type TimelineLayer,
     NonStartPointEvent,
+    TimelineDurationUpdateMode,
 } from "../../common/show";
 import { SplineEditor } from "./spline-editor";
-import { motion, useTransform } from "motion/react";
+import { motion, useDragControls, useTransform } from "motion/react";
 import { useShowfile } from "./showfile-state";
 import { Reorder } from "motion/react";
+import interact from "interactjs";
 
 const RULER_TICK_INTERVAL_MS = 100;
-const RULER_EXTRA_TICK_COUNT = 20;
 // TODO: make ruler tick size configurable so we can zoom. relatively low priority. would be nice if gestures could be supported too
-const RULER_TICK_GAP = "0.5rem";
+const RULER_TICK_GAP_PX = 12;
+
+const RULER_EXTRA_TICK_COUNT = Math.round(
+    window.innerWidth / 4 / RULER_TICK_GAP_PX,
+);
+
+function millisToPixels(millis: number): number {
+    return (millis / RULER_TICK_INTERVAL_MS) * RULER_TICK_GAP_PX;
+}
 
-function millisToXPosition(millis: number): string {
-    return `calc(${millis} / ${RULER_TICK_INTERVAL_MS} * ${RULER_TICK_GAP})`;
+function pixelsToMillis(pixels: number): number {
+    return (pixels / RULER_TICK_GAP_PX) * RULER_TICK_INTERVAL_MS;
 }
 
+// function
+
 // TODO: ui for adding/removing audio - remove current hotkey as this was mainly for testing
 
 export function Editor() {
@@ -61,12 +78,15 @@ export function Editor() {
         deleteLayer,
         sequenceLengthMs,
         updateTimelineEventOrders,
+        updateTimelineEventDurations,
+        setTimelineDurationUpdateMode,
+        timelineDurationUpdateMode,
     } = useShowfile();
 
     // TODO: fix viewport height / timeline height
 
     const seekBarWidth = useTransform(() =>
-        millisToXPosition(currentTimestamp.get()),
+        millisToPixels(currentTimestamp.get()),
     );
 
     const hotkeys = useMemo<HotkeyConfig[]>(
@@ -230,7 +250,31 @@ export function Editor() {
                 compact
                 style={{ height: "100%" }}
                 rightElement={
-                    <Button icon="add" text="Add Robot" onClick={addRobot} />
+                    <>
+                        <SegmentedControl
+                            options={[
+                                {
+                                    label: "Ripple",
+                                    value: TimelineDurationUpdateMode.Ripple,
+                                },
+                                {
+                                    label: "Rolling",
+                                    value: TimelineDurationUpdateMode.Rolling,
+                                },
+                            ]}
+                            onValueChange={(value) =>
+                                setTimelineDurationUpdateMode(
+                                    value as (typeof TimelineDurationUpdateMode)[keyof typeof TimelineDurationUpdateMode],
+                                )
+                            }
+                            value={timelineDurationUpdateMode}
+                        />
+                        <Button
+                            icon="add"
+                            text="Add Robot"
+                            onClick={addRobot}
+                        />
+                    </>
                 }
             >
                 <ButtonGroup>
@@ -241,13 +285,14 @@ export function Editor() {
                         variant="outlined"
                     />
                 </ButtonGroup>
+
                 <div
                     style={{
                         overflowY: "scroll",
                         maxHeight: "100%",
                         display: "grid",
                         gridTemplateColumns: "max-content 1fr",
-                        gap: `0rem ${RULER_TICK_GAP}`,
+                        gap: `0rem ${RULER_TICK_GAP_PX}`,
                     }}
                 >
                     <Ruler sequenceLengthMs={sequenceLengthMs} />
@@ -262,84 +307,156 @@ export function Editor() {
                         />
                     </TimelineLayer>
                     <TimelineLayer title="Audio"> Stuff here</TimelineLayer>
-                    {show.timeline.map(([startPoint, remainingEvents], i) => {
-                        return (
-                            <TimelineLayer
-                                key={`timeline-layer-${i}`}
-                                title={`Robot ${i + 1}`}
-                                onDelete={() => deleteLayer(i)}
-                            >
-                                <div style={{ display: "flex" }}>
-                                    <TimelineEvent event={startPoint} />
-                                    <Reorder.Group
-                                        as="div"
-                                        axis="x"
-                                        style={{ display: "contents" }}
-                                        values={[
-                                            startPoint,
-                                            ...remainingEvents,
-                                        ]}
-                                        onReorder={(newIndices) => {
-                                            updateTimelineEventOrders(
-                                                i,
-                                                newIndices as NonStartPointEvent[],
-                                            );
-                                        }}
-                                    >
-                                        {remainingEvents.map((event) => {
-                                            return (
-                                                <Reorder.Item
-                                                    value={event}
-                                                    key={event.id}
-                                                >
-                                                    <TimelineEvent
+                    {show.timeline.map(
+                        ([startPoint, remainingEvents], layerIndex) => {
+                            return (
+                                <TimelineLayer
+                                    key={`timeline-layer-${layerIndex}`}
+                                    title={`Robot ${layerIndex + 1}`}
+                                    onDelete={() => deleteLayer(layerIndex)}
+                                >
+                                    <div style={{ display: "flex" }}>
+                                        <TimelineEvent
+                                            event={startPoint}
+                                            onDurationChange={(ms) =>
+                                                updateTimelineEventDurations(
+                                                    layerIndex,
+                                                    startPoint.id,
+                                                    ms,
+                                                )
+                                            }
+                                        />
+                                        <Reorder.Group
+                                            as="div"
+                                            axis="x"
+                                            style={{ display: "contents" }}
+                                            values={[
+                                                startPoint,
+                                                ...remainingEvents,
+                                            ]}
+                                            onReorder={(newIndices) => {
+                                                updateTimelineEventOrders(
+                                                    layerIndex,
+                                                    newIndices as NonStartPointEvent[],
+                                                );
+                                            }}
+                                        >
+                                            {remainingEvents.map((event) => {
+                                                return (
+                                                    <ReorderableTimelineEvent
                                                         event={event}
+                                                        key={event.id}
+                                                        onDurationChange={(
+                                                            ms,
+                                                        ) =>
+                                                            updateTimelineEventDurations(
+                                                                layerIndex,
+                                                                event.id,
+                                                                ms,
+                                                            )
+                                                        }
                                                     />
-                                                </Reorder.Item>
-                                            );
-                                        })}
-                                    </Reorder.Group>
-                                </div>
-                                {/* TODO: add ability to add events */}
-                            </TimelineLayer>
-                        );
-                    })}
+                                                );
+                                            })}
+                                        </Reorder.Group>
+                                    </div>
+                                    {/* TODO: add ability to add events */}
+                                </TimelineLayer>
+                            );
+                        },
+                    )}
                 </div>
             </Section>
         </div>
     );
 }
 
-const TimelineEvent = forwardRef<HTMLDivElement, { event: TimelineEvents }>(
-    function TimelineEvent(props, ref) {
-        const { event } = props;
-        // TODO: add context menu for deleting events and adding a new event before and after this one
+function ReorderableTimelineEvent({
+    event,
+    onDurationChange,
+}: PropsWithChildren<{
+    event: TimelineEvents;
+    onDurationChange: (ms: number) => void;
+}>) {
+    const controls = useDragControls();
 
-        // TODO: add handles to the edges of the event to edit durations. add a switch for ripple vs rolling edits
+    return (
+        <Reorder.Item
+            value={event}
+            dragListener={false}
+            dragControls={controls}
+        >
+            <TimelineEvent
+                event={event}
+                onPointerDownOnDragHandle={(e) => controls.start(e)}
+                onDurationChange={onDurationChange}
+            />
+        </Reorder.Item>
+    );
+}
 
-        // ripple edits mean that editing the duration of an event has a ripple effect on ALL the other events in the same layer, shifting all the subsequent event start times by the same amount (so only one event's duration is actually changing)
-        // rolling edits mean that editing the duration of an event also affects the duration of the event that immediately follows it in the same layer, such that adjusting the duration of this event doesn't shift the start timestamp of the subsequent events in the same layer
+function TimelineEvent(props: {
+    event: TimelineEvents;
+    onPointerDownOnDragHandle?: (
+        event: React.PointerEvent<HTMLDivElement>,
+    ) => void;
+    onDurationChange?: (deltaMs: number) => void;
+}) {
+    const ref = useRef<HTMLDivElement>(null);
+    const { event, onPointerDownOnDragHandle, onDurationChange } = props;
+    useEffect(() => {
+        if (!onDurationChange) return;
+        if (!ref.current) return;
+        const el = ref.current;
 
-        return (
-            <Card
-                ref={ref}
-                style={{
-                    width: millisToXPosition(event.durationMs),
-                    backgroundColor: EVENT_TYPE_TO_COLOR[event.type],
-                    color: "white",
-                    // visibility:
-                    //     event.type === TimelineEventTypes.WaitEvent ?
-                    //         "hidden"
-                    //     :   "inherit",
-                }}
-                compact
-                elevation={Elevation.TWO}
-            >
+        interact(el).resizable({
+            edges: {
+                right: true,
+            },
+            listeners: {
+                move: function (event) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    onDurationChange(pixelsToMillis(event.deltaRect.width));
+                },
+            },
+        });
+    }, [event.type, onDurationChange]);
+
+    // TODO: add context menu for deleting events and adding a new event before and after this one
+
+    return (
+        <Card
+            ref={ref}
+            style={{
+                width: millisToPixels(event.durationMs),
+                backgroundColor: EVENT_TYPE_TO_COLOR[event.type],
+                color: "white",
+                boxSizing: "border-box",
+                display: "flex",
+                justifyContent: "space-between",
+                touchAction: "none",
+                overflow: "hidden",
+            }}
+            compact
+        >
+            <span style={{ cursor: "default", userSelect: "none" }}>
                 {event.type}
-            </Card>
-        );
-    },
-);
+            </span>
+            {onPointerDownOnDragHandle && (
+                <span
+                    style={{
+                        width: "1rem",
+                        height: "1rem",
+                        backgroundColor: "red",
+                        cursor: "grab",
+                    }}
+                    onPointerDown={onPointerDownOnDragHandle}
+                ></span>
+            )}
+        </Card>
+    );
+}
 
 const TimelineLayer = forwardRef<
     HTMLDivElement,
@@ -383,7 +500,7 @@ function Ruler({ sequenceLengthMs }: { sequenceLengthMs: number }) {
                     overflowX: "scroll",
                     justifyContent: "space-between",
                     alignItems: "start",
-                    gap: RULER_TICK_GAP,
+                    gap: RULER_TICK_GAP_PX,
                 }}
             >
                 {new Array(
diff --git a/src/client/editor/showfile-state.tsx b/src/client/editor/showfile-state.tsx
index 2b6c9773..49c64436 100644
--- a/src/client/editor/showfile-state.tsx
+++ b/src/client/editor/showfile-state.tsx
@@ -14,6 +14,7 @@ import {
     GoToPointEvent,
     TimelineLayer,
     NonStartPointEvent,
+    TimelineDurationUpdateMode,
 } from "../../common/show";
 import {
     SplinePointType,
@@ -30,6 +31,12 @@ import {
 export function useShowfile() {
     const [initialShow, setInitialShow] = useState(createNewShowfile());
 
+    // See comment on TimelineDurationUpdateMode declaration in src/common/show.ts for more info.
+    const [timelineDurationUpdateMode, setTimelineDurationUpdateMode] =
+        useState<
+            (typeof TimelineDurationUpdateMode)[keyof typeof TimelineDurationUpdateMode]
+        >(TimelineDurationUpdateMode.Ripple);
+
     const [fsHandle, setFsHandle] = useState<FileSystemFileHandle | null>(null);
 
     const [unsavedChanges, setUnsavedChanges] =
@@ -390,6 +397,54 @@ export function useShowfile() {
         [show, setShow],
     );
 
+    const updateTimelineEventDurations = useCallback(
+        (layerIndex: number, eventId: string, deltaMs: number) => {
+            const newTimeline = [...show.timeline];
+            const layer = newTimeline[layerIndex];
+            if (!layer) {
+                console.log("Layer not found");
+                return;
+            }
+
+            const [startPoint, remainingEvents] = layer;
+
+            const updatedEventList = [startPoint, ...remainingEvents];
+            const eventToUpdateIndex = updatedEventList.findIndex(
+                (event) => event.id === eventId,
+            );
+            if (eventToUpdateIndex === -1) {
+                console.log("Event not found", updatedEventList, layer);
+                return;
+            }
+
+            const shouldUpdateSubsequentEventDuration =
+                timelineDurationUpdateMode ===
+                    TimelineDurationUpdateMode.Rolling &&
+                eventToUpdateIndex < updatedEventList.length - 1;
+
+            const eventToUpdate = updatedEventList[eventToUpdateIndex];
+            const newDurationMs = eventToUpdate.durationMs + deltaMs;
+            eventToUpdate.durationMs = newDurationMs;
+            updatedEventList[eventToUpdateIndex] = eventToUpdate;
+
+            if (shouldUpdateSubsequentEventDuration) {
+                const subsequentEventIndex = eventToUpdateIndex + 1;
+                const subsequentEvent = updatedEventList[subsequentEventIndex];
+                const newSubsequentEventDurationMs =
+                    subsequentEvent.durationMs - deltaMs;
+                subsequentEvent.durationMs = newSubsequentEventDurationMs;
+                updatedEventList[subsequentEventIndex] = subsequentEvent;
+            }
+
+            newTimeline[layerIndex] = [
+                updatedEventList[0] as StartPointEvent,
+                updatedEventList.slice(1) as NonStartPointEvent[],
+            ];
+            setShow({ ...show, timeline: newTimeline });
+        },
+        [show, setShow, timelineDurationUpdateMode],
+    );
+
     return {
         updateTimelineEventOrders,
         show,
@@ -414,5 +469,8 @@ export function useShowfile() {
         canRedo,
         canUndo,
         sequenceLengthMs,
+        timelineDurationUpdateMode,
+        setTimelineDurationUpdateMode,
+        updateTimelineEventDurations,
     };
 }
diff --git a/src/client/package.json b/src/client/package.json
index fa86a1fe..06963ff4 100644
--- a/src/client/package.json
+++ b/src/client/package.json
@@ -9,6 +9,7 @@
         "browser-fs-access": "^0.35.0",
         "cbor-x": "^1.6.0",
         "deep-object-diff": "^1.1.9",
+        "interactjs": "^1.10.27",
         "motion": "^12.6.0",
         "react": "^18.2.0",
         "react-chessboard": "^4.5.0",
diff --git a/src/common/show.ts b/src/common/show.ts
index adf4eff0..3a28dcda 100644
--- a/src/common/show.ts
+++ b/src/common/show.ts
@@ -68,7 +68,7 @@ export type TimelineEvents = NonStartPointEvent | StartPointEvent;
  */
 export const ShowfileSchema = RuntypesRecord({
     // Be sure to increment the schema version number when making breaking changes to the showfile schema.
-    $chessbots_show_schema_version: Literal(1),
+    $chessbots_show_schema_version: Literal(2),
     // The timeline is an array of timeline 'layers' - a layer consists of an array that includes all the events for one robot.
     timeline: Array(TimelineLayerSchema),
     audio: Optional(
@@ -105,7 +105,7 @@ export function timelineLayerToSpline(layer: TimelineLayer): Spline {
  */
 export function createNewShowfile(): Showfile {
     return {
-        $chessbots_show_schema_version: 1,
+        $chessbots_show_schema_version: 2,
         timeline: [
             [
                 {
@@ -172,3 +172,22 @@ export const EVENT_TYPE_TO_COLOR: Record<
     [TimelineEventTypes.WaitEvent]: Colors.GRAY2,
     [TimelineEventTypes.StartPointEvent]: Colors.GREEN2,
 };
+
+/*
+ * The timeline duration update mode determines how the duration of timeline events
+ * is updated when the user edits a timeline event's duration.
+ *
+ * Being in ripple edit mode means that editing the duration of an event has a 
+ * ripple effect on ALL the other events in the same layer, shifting
+ * all the subsequent event start times by the same amount (so only
+ * one event's duration is actually changing). 
+ * 
+ * Being in rolling edit mode mean that editing the duration of an event also affects the
+ * duration of the event that immediately follows it in the same layer, such
+ * that adjusting the duration of this event doesn't shift the start timestamp
+ * of the subsequent events in the same layer.
+ */
+export const TimelineDurationUpdateMode = {
+    Rolling: "rolling",
+    Ripple: "ripple",
+} as const;
diff --git a/yarn.lock b/yarn.lock
index 656b27cc..45fc1169 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -601,6 +601,11 @@
   resolved "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.2.tgz"
   integrity sha512-6EwiSjwWYP7pTckG6I5eyFANjPhmPjUX9JRLUSfNPC7FX7zK9gyZAfUEaECL6ALTpGX5AjnBq3C9XmVWPitNpw==
 
+"@interactjs/types@1.10.27":
+  version "1.10.27"
+  resolved "https://registry.yarnpkg.com/@interactjs/types/-/types-1.10.27.tgz#10afd71cef2498e2b5192cf0d46f937d8ceb767f"
+  integrity sha512-BUdv0cvs4H5ODuwft2Xp4eL8Vmi3LcihK42z0Ft/FbVJZoRioBsxH+LlsBdK4tAie7PqlKGy+1oyOncu1nQ6eA==
+
 "@jridgewell/gen-mapping@^0.3.0", "@jridgewell/gen-mapping@^0.3.2":
   version "0.3.3"
   resolved "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz"
@@ -2332,6 +2337,13 @@ inherits@2, inherits@2.0.4:
   resolved "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz"
   integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
 
+interactjs@^1.10.27:
+  version "1.10.27"
+  resolved "https://registry.yarnpkg.com/interactjs/-/interactjs-1.10.27.tgz#16499aba4987a5ccfdaddca7d1ba7bb1118e14d0"
+  integrity sha512-y/8RcCftGAF24gSp76X2JS3XpHiUvDQyhF8i7ujemBz77hwiHDuJzftHx7thY8cxGogwGiPJ+o97kWB6eAXnsA==
+  dependencies:
+    "@interactjs/types" "1.10.27"
+
 ipaddr.js@1.9.1:
   version "1.9.1"
   resolved "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz"

From dda5fc8b3faca737ef9a12896efd7ac36107012f Mon Sep 17 00:00:00 2001
From: Jason Antwi-Appah <hey@jasonaa.me>
Date: Tue, 15 Apr 2025 02:41:10 -0500
Subject: [PATCH 36/92] Rename showfile state file

---
 src/client/editor/{showfile-state.tsx => showfile-state.ts} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename src/client/editor/{showfile-state.tsx => showfile-state.ts} (100%)

diff --git a/src/client/editor/showfile-state.tsx b/src/client/editor/showfile-state.ts
similarity index 100%
rename from src/client/editor/showfile-state.tsx
rename to src/client/editor/showfile-state.ts

From 09415aae5628ce6f73c2b6edb179841ddaf7366a Mon Sep 17 00:00:00 2001
From: Jason Antwi-Appah <hey@jasonaa.me>
Date: Tue, 15 Apr 2025 02:47:23 -0500
Subject: [PATCH 37/92] Format

---
 src/common/show.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/common/show.ts b/src/common/show.ts
index 3a28dcda..6562fe30 100644
--- a/src/common/show.ts
+++ b/src/common/show.ts
@@ -177,11 +177,11 @@ export const EVENT_TYPE_TO_COLOR: Record<
  * The timeline duration update mode determines how the duration of timeline events
  * is updated when the user edits a timeline event's duration.
  *
- * Being in ripple edit mode means that editing the duration of an event has a 
+ * Being in ripple edit mode means that editing the duration of an event has a
  * ripple effect on ALL the other events in the same layer, shifting
  * all the subsequent event start times by the same amount (so only
- * one event's duration is actually changing). 
- * 
+ * one event's duration is actually changing).
+ *
  * Being in rolling edit mode mean that editing the duration of an event also affects the
  * duration of the event that immediately follows it in the same layer, such
  * that adjusting the duration of this event doesn't shift the start timestamp

From fceff555086d200a8d07f9962c9c7747b5e26174 Mon Sep 17 00:00:00 2001
From: Jason Antwi-Appah <hey@jasonaa.me>
Date: Tue, 15 Apr 2025 18:54:17 -0500
Subject: [PATCH 38/92] Address comments on schemas and types

---
 src/common/show.ts   | 13 +++++++------
 src/common/spline.ts |  9 ++++++---
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/src/common/show.ts b/src/common/show.ts
index 6562fe30..a105c309 100644
--- a/src/common/show.ts
+++ b/src/common/show.ts
@@ -47,16 +47,17 @@ const StartPointEventSchema = RuntypesRecord({
 });
 export type StartPointEvent = Static<typeof StartPointEventSchema>;
 
-const TimelineEventSchema = Union(GoToPointEventSchema, WaitEventSchema);
-export type NonStartPointEvent = Static<typeof TimelineEventSchema>;
+const NonStartPointEventSchema = Union(GoToPointEventSchema, WaitEventSchema);
+export type NonStartPointEvent = Static<typeof NonStartPointEventSchema>;
+
 // TODO: refactor this to be an object consisting of 2 keys:
 // startPoint and remainingEvents so that it is more self-documenting
 const TimelineLayerSchema = Tuple(
     StartPointEventSchema,
-    Array(TimelineEventSchema),
+    Array(NonStartPointEventSchema),
 );
 export type TimelineLayer = Static<typeof TimelineLayerSchema>;
-export type TimelineEvents = NonStartPointEvent | StartPointEvent;
+export type TimelineEvents = GoToPointEvent | WaitEvent | StartPointEvent;
 
 /**
  * The showfile schema.
@@ -100,8 +101,8 @@ export function timelineLayerToSpline(layer: TimelineLayer): Spline {
 }
 
 /**
- * Creates a new empty showfile.
- * @returns The new empty showfile.
+ * Creates a new example showfile.
+ * @returns The new example showfile.
  */
 export function createNewShowfile(): Showfile {
     return {
diff --git a/src/common/spline.ts b/src/common/spline.ts
index fb185a50..925c063f 100644
--- a/src/common/spline.ts
+++ b/src/common/spline.ts
@@ -9,8 +9,8 @@ import {
 
 export enum SplinePointType {
     StartPoint = "start",
-    CubicBezier = "cubic",
     QuadraticBezier = "quadratic",
+    CubicBezier = "cubic",
 }
 
 export const CoordsSchema = Record({
@@ -55,9 +55,12 @@ export const PointSchema = Union(
 export type Point = Static<typeof PointSchema>;
 
 /**
- * Converts a point to an SVG path command. This is used in combination with the {@link splineToSvgDrawAttribute} function to convert a spline to a string that can be used as the `d` attribute of an SVG path.
+ * Converts a point to an SVG path command. This is used in combination with the {@link splineToSvgDrawAttribute} function to convert a spline to a string that can be used as the `d` attribute of an SVG path. 
+ * 
+ * @remarks
+ * For more context on the implementation/syntax, check out this MDN article about SVG paths: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorials/SVG_from_scratch/Paths
  * @param point - the point to convert.
- * @returns - the SVG path command for the point.
+ * @returns the SVG path command for the point.
  */
 function pointToSvgPathCommand(point: Point): string {
     switch (point.type) {

From 1cef70ac69e316df881e9dc3e3196b7c44f53fb1 Mon Sep 17 00:00:00 2001
From: Jason Antwi-Appah <hey@jasonaa.me>
Date: Tue, 15 Apr 2025 19:05:22 -0500
Subject: [PATCH 39/92] Refactor TimelineLayerSchema as object instead of tuple
 for clarity

---
 src/client/editor/editor.tsx        |  2 +-
 src/client/editor/showfile-state.ts | 63 +++++++++++++++++------------
 src/client/editor/spline-editor.tsx |  2 +-
 src/common/show.ts                  | 29 ++++++-------
 src/common/spline.ts                |  4 +-
 5 files changed, 54 insertions(+), 46 deletions(-)

diff --git a/src/client/editor/editor.tsx b/src/client/editor/editor.tsx
index 1ebe50b0..84ff1b34 100644
--- a/src/client/editor/editor.tsx
+++ b/src/client/editor/editor.tsx
@@ -308,7 +308,7 @@ export function Editor() {
                     </TimelineLayer>
                     <TimelineLayer title="Audio"> Stuff here</TimelineLayer>
                     {show.timeline.map(
-                        ([startPoint, remainingEvents], layerIndex) => {
+                        ({ startPoint, remainingEvents }, layerIndex) => {
                             return (
                                 <TimelineLayer
                                     key={`timeline-layer-${layerIndex}`}
diff --git a/src/client/editor/showfile-state.ts b/src/client/editor/showfile-state.ts
index 49c64436..ba351154 100644
--- a/src/client/editor/showfile-state.ts
+++ b/src/client/editor/showfile-state.ts
@@ -126,12 +126,15 @@ export function useShowfile() {
             const newTimeline = [...show.timeline];
             const layer = newTimeline[layerIndex];
             if (layer) {
-                const [startPoint, remainingEvents] = layer;
+                const { startPoint, remainingEvents } = layer;
                 const newStartPointEvent: StartPointEvent = {
                     ...startPoint,
                     target: { ...startPoint.target, point: newCoords },
                 };
-                newTimeline[layerIndex] = [newStartPointEvent, remainingEvents];
+                newTimeline[layerIndex] = {
+                    startPoint: newStartPointEvent,
+                    remainingEvents,
+                };
                 setShow({ ...show, timeline: newTimeline });
             }
         },
@@ -143,7 +146,7 @@ export function useShowfile() {
             const newTimeline = [...show.timeline];
             const layer = newTimeline[layerIndex];
             if (!layer) return;
-            const [startPoint, remainingEvents] = layer;
+            const { startPoint, remainingEvents } = layer;
             const events = [...remainingEvents];
             const eventToUpdate = events[pointIndex];
 
@@ -158,7 +161,10 @@ export function useShowfile() {
                         endPoint: newCoords,
                     },
                 };
-                newTimeline[layerIndex] = [startPoint, events];
+                newTimeline[layerIndex] = {
+                    startPoint,
+                    remainingEvents: events,
+                };
                 setShow({ ...show, timeline: newTimeline });
             }
         },
@@ -170,7 +176,7 @@ export function useShowfile() {
             const newTimeline = [...show.timeline];
             const layer = newTimeline[layerIndex];
             if (!layer) return;
-            const [startPoint, remainingEvents] = layer;
+            const { startPoint, remainingEvents } = layer;
             const events = [...remainingEvents];
             const eventToUpdate = events[pointIndex];
 
@@ -185,7 +191,10 @@ export function useShowfile() {
                         controlPoint: newCoords,
                     },
                 };
-                newTimeline[layerIndex] = [startPoint, events];
+                newTimeline[layerIndex] = {
+                    startPoint,
+                    remainingEvents: events,
+                };
                 setShow({ ...show, timeline: newTimeline });
             }
         },
@@ -198,7 +207,7 @@ export function useShowfile() {
             const layer = newTimeline[layerIndex];
             if (!layer) return;
 
-            const [, remainingEvents] = layer;
+            const { remainingEvents } = layer;
 
             // Promote the first GoToPoint event (if any) to be the new start point
             const firstGoToPointIndex = remainingEvents.findIndex(
@@ -222,10 +231,10 @@ export function useShowfile() {
                     firstGoToPointIndex,
                     1,
                 );
-                newTimeline[layerIndex] = [
-                    newStartPointEvent,
-                    newRemainingEvents,
-                ];
+                newTimeline[layerIndex] = {
+                    startPoint: newStartPointEvent,
+                    remainingEvents: newRemainingEvents,
+                };
                 setShow({ ...show, timeline: newTimeline });
             } else {
                 console.warn(
@@ -243,9 +252,9 @@ export function useShowfile() {
             if (!layer) {
                 return;
             }
-            const [startPoint, remainingEvents] = layer;
+            const { startPoint, remainingEvents } = layer;
             const events = remainingEvents.toSpliced(pointIndex, 1); // Remove the event
-            newTimeline[layerIndex] = [startPoint, events];
+            newTimeline[layerIndex] = { startPoint, remainingEvents: events };
             setShow({ ...show, timeline: newTimeline });
         },
         [show, setShow],
@@ -263,7 +272,7 @@ export function useShowfile() {
             const layer = newTimeline[layerIndex];
             if (!layer) return;
 
-            const [startPoint, remainingEvents] = layer;
+            const { startPoint, remainingEvents } = layer;
             const events = [...remainingEvents];
 
             const eventToUpdate = events[pointIndex];
@@ -304,7 +313,7 @@ export function useShowfile() {
                 ...eventToUpdate,
                 target: newTarget,
             };
-            newTimeline[layerIndex] = [startPoint, events];
+            newTimeline[layerIndex] = { startPoint, remainingEvents: events };
             setShow({ ...show, timeline: newTimeline });
         },
         [show, setShow],
@@ -316,8 +325,8 @@ export function useShowfile() {
     );
 
     const addRobot = useCallback(() => {
-        const newLayer: TimelineLayer = [
-            {
+        const newLayer: TimelineLayer = {
+            startPoint: {
                 id: crypto.randomUUID(),
                 type: TimelineEventTypes.StartPointEvent,
                 target: {
@@ -329,8 +338,8 @@ export function useShowfile() {
                 },
                 durationMs: 7500,
             },
-            [],
-        ];
+            remainingEvents: [],
+        };
         setShow({
             ...show,
             timeline: [...show.timeline, newLayer],
@@ -390,8 +399,8 @@ export function useShowfile() {
             const newTimeline = [...show.timeline];
             const layer = newTimeline[layerIndex];
             if (!layer) return;
-            const [startPoint] = layer;
-            newTimeline[layerIndex] = [startPoint, newList];
+            const { startPoint } = layer;
+            newTimeline[layerIndex] = { startPoint, remainingEvents: newList };
             setShow({ ...show, timeline: newTimeline });
         },
         [show, setShow],
@@ -406,7 +415,7 @@ export function useShowfile() {
                 return;
             }
 
-            const [startPoint, remainingEvents] = layer;
+            const { startPoint, remainingEvents } = layer;
 
             const updatedEventList = [startPoint, ...remainingEvents];
             const eventToUpdateIndex = updatedEventList.findIndex(
@@ -436,10 +445,12 @@ export function useShowfile() {
                 updatedEventList[subsequentEventIndex] = subsequentEvent;
             }
 
-            newTimeline[layerIndex] = [
-                updatedEventList[0] as StartPointEvent,
-                updatedEventList.slice(1) as NonStartPointEvent[],
-            ];
+            newTimeline[layerIndex] = {
+                startPoint: updatedEventList[0] as StartPointEvent,
+                remainingEvents: updatedEventList.slice(
+                    1,
+                ) as NonStartPointEvent[],
+            };
             setShow({ ...show, timeline: newTimeline });
         },
         [show, setShow, timelineDurationUpdateMode],
diff --git a/src/client/editor/spline-editor.tsx b/src/client/editor/spline-editor.tsx
index f3d47695..826d39a5 100644
--- a/src/client/editor/spline-editor.tsx
+++ b/src/client/editor/spline-editor.tsx
@@ -33,7 +33,7 @@ export function SplineEditor({
     onDeletePoint,
     onSwitchPointType,
 }: SplineEditorProps) {
-    const [, remainingEvents] = layer;
+    const { remainingEvents } = layer;
     const spline = useMemo(() => timelineLayerToSpline(layer), [layer]);
 
     const path = useMemo(() => splineToSvgDrawAttribute(spline), [spline]);
diff --git a/src/common/show.ts b/src/common/show.ts
index a105c309..eb6d8c8c 100644
--- a/src/common/show.ts
+++ b/src/common/show.ts
@@ -7,7 +7,6 @@ import {
     Union,
     type Static,
     Optional,
-    Tuple,
     InstanceOf,
 } from "runtypes";
 import {
@@ -50,12 +49,10 @@ export type StartPointEvent = Static<typeof StartPointEventSchema>;
 const NonStartPointEventSchema = Union(GoToPointEventSchema, WaitEventSchema);
 export type NonStartPointEvent = Static<typeof NonStartPointEventSchema>;
 
-// TODO: refactor this to be an object consisting of 2 keys:
-// startPoint and remainingEvents so that it is more self-documenting
-const TimelineLayerSchema = Tuple(
-    StartPointEventSchema,
-    Array(NonStartPointEventSchema),
-);
+const TimelineLayerSchema = RuntypesRecord({
+    startPoint: StartPointEventSchema,
+    remainingEvents: Array(NonStartPointEventSchema),
+});
 export type TimelineLayer = Static<typeof TimelineLayerSchema>;
 export type TimelineEvents = GoToPointEvent | WaitEvent | StartPointEvent;
 
@@ -69,8 +66,8 @@ export type TimelineEvents = GoToPointEvent | WaitEvent | StartPointEvent;
  */
 export const ShowfileSchema = RuntypesRecord({
     // Be sure to increment the schema version number when making breaking changes to the showfile schema.
-    $chessbots_show_schema_version: Literal(2),
-    // The timeline is an array of timeline 'layers' - a layer consists of an array that includes all the events for one robot.
+    $chessbots_show_schema_version: Literal(3),
+    // The timeline is an array of timeline 'layers'. A layer consists of an array that includes all the events for one robot.
     timeline: Array(TimelineLayerSchema),
     audio: Optional(
         RuntypesRecord({
@@ -88,10 +85,10 @@ export type Showfile = Static<typeof ShowfileSchema>;
  * @returns - the spline representation of the timeline layer.
  */
 export function timelineLayerToSpline(layer: TimelineLayer): Spline {
-    const [startPoint, events] = layer;
+    const { startPoint, remainingEvents } = layer;
     return {
         start: startPoint.target,
-        points: events
+        points: remainingEvents
             .filter((event) => event.type === TimelineEventTypes.GoToPointEvent)
             .map(
                 (event) =>
@@ -106,10 +103,10 @@ export function timelineLayerToSpline(layer: TimelineLayer): Spline {
  */
 export function createNewShowfile(): Showfile {
     return {
-        $chessbots_show_schema_version: 2,
+        $chessbots_show_schema_version: 3,
         timeline: [
-            [
-                {
+            {
+                startPoint: {
                     type: TimelineEventTypes.StartPointEvent,
                     target: {
                         type: SplinePointType.StartPoint,
@@ -121,7 +118,7 @@ export function createNewShowfile(): Showfile {
                     durationMs: 7500,
                     id: "4f21401d-07cf-434f-a73c-6482ab82f210",
                 },
-                [
+                remainingEvents: [
                     {
                         type: TimelineEventTypes.GoToPointEvent,
                         durationMs: 1000,
@@ -159,7 +156,7 @@ export function createNewShowfile(): Showfile {
                         id: "4f21401d-07cf-434f-a73c-6482ab82f214",
                     },
                 ],
-            ],
+            },
         ],
         name: `Show ${new Date().toDateString()} ${new Date().toLocaleTimeString()}`,
     };
diff --git a/src/common/spline.ts b/src/common/spline.ts
index 925c063f..566703ad 100644
--- a/src/common/spline.ts
+++ b/src/common/spline.ts
@@ -55,8 +55,8 @@ export const PointSchema = Union(
 export type Point = Static<typeof PointSchema>;
 
 /**
- * Converts a point to an SVG path command. This is used in combination with the {@link splineToSvgDrawAttribute} function to convert a spline to a string that can be used as the `d` attribute of an SVG path. 
- * 
+ * Converts a point to an SVG path command. This is used in combination with the {@link splineToSvgDrawAttribute} function to convert a spline to a string that can be used as the `d` attribute of an SVG path.
+ *
  * @remarks
  * For more context on the implementation/syntax, check out this MDN article about SVG paths: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorials/SVG_from_scratch/Paths
  * @param point - the point to convert.

From e23180e7cef9d5b456891b9c7114520b6b167e4c Mon Sep 17 00:00:00 2001
From: Jason Antwi-Appah <hey@jasonaa.me>
Date: Tue, 15 Apr 2025 21:32:21 -0500
Subject: [PATCH 40/92] Move some timeline components into separate files

---
 src/client/editor/editor.tsx   | 205 ++-------------------------------
 src/client/editor/timeline.tsx | 176 ++++++++++++++++++++++++++++
 src/common/show.ts             |  16 +++
 3 files changed, 202 insertions(+), 195 deletions(-)
 create mode 100644 src/client/editor/timeline.tsx

diff --git a/src/client/editor/editor.tsx b/src/client/editor/editor.tsx
index 84ff1b34..2e2fe7e4 100644
--- a/src/client/editor/editor.tsx
+++ b/src/client/editor/editor.tsx
@@ -1,17 +1,9 @@
-import {
-    forwardRef,
-    type PropsWithChildren,
-    useEffect,
-    useMemo,
-    useRef,
-} from "react";
+import { useMemo } from "react";
 import {
     Section,
-    Text,
     EditableText,
     Button,
     H2,
-    SectionCard,
     Card,
     ButtonGroup,
     Tag,
@@ -21,35 +13,21 @@ import {
 } from "@blueprintjs/core";
 import { RobotGrid } from "../debug/simulator";
 import {
-    type TimelineEvents,
-    EVENT_TYPE_TO_COLOR,
-    type TimelineLayer,
+    millisToPixels,
     NonStartPointEvent,
+    RULER_TICK_GAP_PX,
     TimelineDurationUpdateMode,
 } from "../../common/show";
 import { SplineEditor } from "./spline-editor";
-import { motion, useDragControls, useTransform } from "motion/react";
+import { motion, useTransform } from "motion/react";
 import { useShowfile } from "./showfile-state";
 import { Reorder } from "motion/react";
-import interact from "interactjs";
-
-const RULER_TICK_INTERVAL_MS = 100;
-// TODO: make ruler tick size configurable so we can zoom. relatively low priority. would be nice if gestures could be supported too
-const RULER_TICK_GAP_PX = 12;
-
-const RULER_EXTRA_TICK_COUNT = Math.round(
-    window.innerWidth / 4 / RULER_TICK_GAP_PX,
-);
-
-function millisToPixels(millis: number): number {
-    return (millis / RULER_TICK_INTERVAL_MS) * RULER_TICK_GAP_PX;
-}
-
-function pixelsToMillis(pixels: number): number {
-    return (pixels / RULER_TICK_GAP_PX) * RULER_TICK_INTERVAL_MS;
-}
-
-// function
+import {
+    Ruler,
+    TimelineLayer,
+    TimelineEvent,
+    ReorderableTimelineEvent,
+} from "./timeline";
 
 // TODO: ui for adding/removing audio - remove current hotkey as this was mainly for testing
 
@@ -370,166 +348,3 @@ export function Editor() {
         </div>
     );
 }
-
-function ReorderableTimelineEvent({
-    event,
-    onDurationChange,
-}: PropsWithChildren<{
-    event: TimelineEvents;
-    onDurationChange: (ms: number) => void;
-}>) {
-    const controls = useDragControls();
-
-    return (
-        <Reorder.Item
-            value={event}
-            dragListener={false}
-            dragControls={controls}
-        >
-            <TimelineEvent
-                event={event}
-                onPointerDownOnDragHandle={(e) => controls.start(e)}
-                onDurationChange={onDurationChange}
-            />
-        </Reorder.Item>
-    );
-}
-
-function TimelineEvent(props: {
-    event: TimelineEvents;
-    onPointerDownOnDragHandle?: (
-        event: React.PointerEvent<HTMLDivElement>,
-    ) => void;
-    onDurationChange?: (deltaMs: number) => void;
-}) {
-    const ref = useRef<HTMLDivElement>(null);
-    const { event, onPointerDownOnDragHandle, onDurationChange } = props;
-    useEffect(() => {
-        if (!onDurationChange) return;
-        if (!ref.current) return;
-        const el = ref.current;
-
-        interact(el).resizable({
-            edges: {
-                right: true,
-            },
-            listeners: {
-                move: function (event) {
-                    event.preventDefault();
-                    event.stopPropagation();
-                    onDurationChange(pixelsToMillis(event.deltaRect.width));
-                },
-            },
-        });
-    }, [event.type, onDurationChange]);
-
-    // TODO: add context menu for deleting events and adding a new event before and after this one
-
-    return (
-        <Card
-            ref={ref}
-            style={{
-                width: millisToPixels(event.durationMs),
-                backgroundColor: EVENT_TYPE_TO_COLOR[event.type],
-                color: "white",
-                boxSizing: "border-box",
-                display: "flex",
-                justifyContent: "space-between",
-                touchAction: "none",
-                overflow: "hidden",
-            }}
-            compact
-        >
-            <span style={{ cursor: "default", userSelect: "none" }}>
-                {event.type}
-            </span>
-            {onPointerDownOnDragHandle && (
-                <span
-                    style={{
-                        width: "1rem",
-                        height: "1rem",
-                        backgroundColor: "red",
-                        cursor: "grab",
-                    }}
-                    onPointerDown={onPointerDownOnDragHandle}
-                ></span>
-            )}
-        </Card>
-    );
-}
-
-const TimelineLayer = forwardRef<
-    HTMLDivElement,
-    PropsWithChildren<{ title: string; onDelete?: () => void }>
->(function TimelineCard({ title, children, onDelete }, ref) {
-    // TODO: add borders between columns. v low priority
-    // https://codepen.io/Kevin-Geary/pen/BavwqYX
-    // https://www.youtube.com/watch?v=EQYft7JPKto
-    return (
-        <SectionCard
-            ref={ref}
-            style={{
-                display: "grid",
-                gridTemplateColumns: "subgrid",
-                gridColumn: "1 / span 2",
-            }}
-        >
-            <span>
-                <Text style={{ fontWeight: "bold" }}>{title}</Text>
-                {onDelete && (
-                    <Button
-                        icon="trash"
-                        variant="minimal"
-                        onClick={onDelete}
-                        style={{ gridColumn: "1 / span 2" }}
-                    />
-                )}
-            </span>
-            {children}
-        </SectionCard>
-    );
-});
-
-function Ruler({ sequenceLengthMs }: { sequenceLengthMs: number }) {
-    return (
-        <TimelineLayer title="Ruler">
-            <div
-                style={{
-                    display: "flex",
-                    width: "max-content",
-                    overflowX: "scroll",
-                    justifyContent: "space-between",
-                    alignItems: "start",
-                    gap: RULER_TICK_GAP_PX,
-                }}
-            >
-                {new Array(
-                    Math.round(sequenceLengthMs / RULER_TICK_INTERVAL_MS) +
-                        RULER_EXTRA_TICK_COUNT,
-                )
-                    .fill(1)
-                    .map((_, i) => {
-                        // 1000ms interval (every 4 ticks if RULER_TICK_INTERVAL_MS is 250)
-                        const isMajorTick =
-                            i % (1000 / RULER_TICK_INTERVAL_MS) === 0;
-
-                        // 500ms interval
-                        const isSecondaryTick =
-                            i % (1000 / RULER_TICK_INTERVAL_MS) === 5;
-                        return (
-                            <div
-                                key={`tick-${i}`}
-                                style={{
-                                    borderRight: "1px solid gray",
-                                    height:
-                                        isMajorTick ? "1rem"
-                                        : isSecondaryTick ? "0.8rem"
-                                        : "0.5rem",
-                                }}
-                            />
-                        );
-                    })}
-            </div>
-        </TimelineLayer>
-    );
-}
diff --git a/src/client/editor/timeline.tsx b/src/client/editor/timeline.tsx
new file mode 100644
index 00000000..58ebf892
--- /dev/null
+++ b/src/client/editor/timeline.tsx
@@ -0,0 +1,176 @@
+import { Card, SectionCard, Button, Text } from "@blueprintjs/core";
+import interact from "interactjs";
+import { useDragControls, Reorder } from "motion/react";
+import { forwardRef, PropsWithChildren, useEffect, useRef } from "react";
+import {
+    TimelineEvents,
+    EVENT_TYPE_TO_COLOR,
+    millisToPixels,
+    RULER_TICK_GAP_PX,
+    RULER_TICK_INTERVAL_MS,
+    RULER_EXTRA_TICK_COUNT,
+    pixelsToMillis,
+} from "../../common/show";
+
+export function ReorderableTimelineEvent({
+    event,
+    onDurationChange,
+}: PropsWithChildren<{
+    event: TimelineEvents;
+    onDurationChange: (ms: number) => void;
+}>) {
+    const controls = useDragControls();
+
+    return (
+        <Reorder.Item
+            value={event}
+            dragListener={false}
+            dragControls={controls}
+        >
+            <TimelineEvent
+                event={event}
+                onPointerDownOnDragHandle={(e) => controls.start(e)}
+                onDurationChange={onDurationChange}
+            />
+        </Reorder.Item>
+    );
+}
+
+export function TimelineEvent(props: {
+    event: TimelineEvents;
+    onPointerDownOnDragHandle?: (
+        event: React.PointerEvent<HTMLDivElement>,
+    ) => void;
+    onDurationChange?: (deltaMs: number) => void;
+}) {
+    const ref = useRef<HTMLDivElement>(null);
+    const { event, onPointerDownOnDragHandle, onDurationChange } = props;
+    useEffect(() => {
+        if (!onDurationChange) return;
+        if (!ref.current) return;
+        const el = ref.current;
+
+        interact(el).resizable({
+            edges: {
+                right: true,
+            },
+            listeners: {
+                move: function (event) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    onDurationChange(pixelsToMillis(event.deltaRect.width));
+                },
+            },
+        });
+    }, [event.type, onDurationChange]);
+
+    // TODO: add context menu for deleting events and adding a new event before and after this one
+
+    return (
+        <Card
+            ref={ref}
+            style={{
+                width: millisToPixels(event.durationMs),
+                backgroundColor: EVENT_TYPE_TO_COLOR[event.type],
+                color: "white",
+                boxSizing: "border-box",
+                display: "flex",
+                justifyContent: "space-between",
+                touchAction: "none",
+                overflow: "hidden",
+            }}
+            compact
+        >
+            <span style={{ cursor: "default", userSelect: "none" }}>
+                {event.type}
+            </span>
+            {onPointerDownOnDragHandle && (
+                <span
+                    style={{
+                        width: "1rem",
+                        height: "1rem",
+                        backgroundColor: "red",
+                        cursor: "grab",
+                    }}
+                    onPointerDown={onPointerDownOnDragHandle}
+                ></span>
+            )}
+        </Card>
+    );
+}
+
+export const TimelineLayer = forwardRef<
+    HTMLDivElement,
+    PropsWithChildren<{ title: string; onDelete?: () => void }>
+>(function TimelineCard({ title, children, onDelete }, ref) {
+    // TODO: add borders between columns. v low priority
+    // https://codepen.io/Kevin-Geary/pen/BavwqYX
+    // https://www.youtube.com/watch?v=EQYft7JPKto
+    return (
+        <SectionCard
+            ref={ref}
+            style={{
+                display: "grid",
+                gridTemplateColumns: "subgrid",
+                gridColumn: "1 / span 2",
+            }}
+        >
+            <span>
+                <Text style={{ fontWeight: "bold" }}>{title}</Text>
+                {onDelete && (
+                    <Button
+                        icon="trash"
+                        variant="minimal"
+                        onClick={onDelete}
+                        style={{ gridColumn: "1 / span 2" }}
+                    />
+                )}
+            </span>
+            {children}
+        </SectionCard>
+    );
+});
+
+export function Ruler({ sequenceLengthMs }: { sequenceLengthMs: number }) {
+    return (
+        <TimelineLayer title="Ruler">
+            <div
+                style={{
+                    display: "flex",
+                    width: "max-content",
+                    overflowX: "scroll",
+                    justifyContent: "space-between",
+                    alignItems: "start",
+                    gap: RULER_TICK_GAP_PX,
+                }}
+            >
+                {new Array(
+                    Math.round(sequenceLengthMs / RULER_TICK_INTERVAL_MS) +
+                        RULER_EXTRA_TICK_COUNT,
+                )
+                    .fill(1)
+                    .map((_, i) => {
+                        // 1000ms interval (every 4 ticks if RULER_TICK_INTERVAL_MS is 250)
+                        const isMajorTick =
+                            i % (1000 / RULER_TICK_INTERVAL_MS) === 0;
+
+                        // 500ms interval
+                        const isSecondaryTick =
+                            i % (1000 / RULER_TICK_INTERVAL_MS) === 5;
+                        return (
+                            <div
+                                key={`tick-${i}`}
+                                style={{
+                                    borderRight: "1px solid gray",
+                                    height:
+                                        isMajorTick ? "1rem"
+                                        : isSecondaryTick ? "0.8rem"
+                                        : "0.5rem",
+                                }}
+                            />
+                        );
+                    })}
+            </div>
+        </TimelineLayer>
+    );
+}
diff --git a/src/common/show.ts b/src/common/show.ts
index eb6d8c8c..2246103f 100644
--- a/src/common/show.ts
+++ b/src/common/show.ts
@@ -189,3 +189,19 @@ export const TimelineDurationUpdateMode = {
     Rolling: "rolling",
     Ripple: "ripple",
 } as const;
+
+export const RULER_TICK_INTERVAL_MS = 100;
+// TODO: make ruler tick size configurable so we can zoom. relatively low priority. would be nice if gestures could be supported too
+export const RULER_TICK_GAP_PX = 12;
+
+export const RULER_EXTRA_TICK_COUNT = Math.round(
+    window.innerWidth / 4 / RULER_TICK_GAP_PX,
+);
+
+export function millisToPixels(millis: number): number {
+    return (millis / RULER_TICK_INTERVAL_MS) * RULER_TICK_GAP_PX;
+}
+
+export function pixelsToMillis(pixels: number): number {
+    return (pixels / RULER_TICK_GAP_PX) * RULER_TICK_INTERVAL_MS;
+}

From ce98ac19f087c06b7c1bcc342357c2179f39d13e Mon Sep 17 00:00:00 2001
From: Jason Antwi-Appah <hey@jasonaa.me>
Date: Sun, 20 Apr 2025 22:58:40 -0500
Subject: [PATCH 41/92] Add comments to state + light refactoring for clarity

---
 src/client/editor/hooks.ts          | 16 ++++++++++++++
 src/client/editor/showfile-state.ts | 33 ++++++++++++++++++++---------
 src/common/show.ts                  |  4 ++++
 3 files changed, 43 insertions(+), 10 deletions(-)

diff --git a/src/client/editor/hooks.ts b/src/client/editor/hooks.ts
index e790c6fe..8cc456ea 100644
--- a/src/client/editor/hooks.ts
+++ b/src/client/editor/hooks.ts
@@ -58,6 +58,11 @@ export function useDraggable(
     }, [elRef, updatePosition]);
 }
 
+/*
+ * A hook that prevents the user from exiting the page with unsaved changes.
+ *
+ * The hook provides a boolean indicating if there are unsaved changes, and a function to set the unsaved changes state.
+ */
 export function usePreventExitWithUnsavedChanges() {
     const [unsavedChanges, setUnsavedChanges] = useState(false);
 
@@ -79,6 +84,17 @@ export function usePreventExitWithUnsavedChanges() {
     return [unsavedChanges, setUnsavedChanges] as const;
 }
 
+/*
+ * A hook that provides a state with a history of changes, and undo/redo functionality.
+ *
+ * The state is a simple object with a value and a history of values, and an index into the history.
+ * The value is the current state of the state, and the history is an array of all the previous states.
+ * The index is the index into the history of the current state.
+ *
+ * The hook also provides functions to set the value, undo, redo, and check if the state can be undone or redone.
+ *
+ * The hook also provides a callback to replace the current value with a new value, which is useful for the first time you load data since that shouldn't count as a tracked action.
+ */
 export function useStateWithTrackedHistory<T>(initialValue: T) {
     type Action =
         | { type: "set"; value: T }
diff --git a/src/client/editor/showfile-state.ts b/src/client/editor/showfile-state.ts
index ba351154..675bdca5 100644
--- a/src/client/editor/showfile-state.ts
+++ b/src/client/editor/showfile-state.ts
@@ -15,6 +15,8 @@ import {
     TimelineLayer,
     NonStartPointEvent,
     TimelineDurationUpdateMode,
+    CHESSBOTS_SHOWFILE_MIME_TYPE,
+    CHESSBOTS_SHOWFILE_EXTENSION,
 } from "../../common/show";
 import {
     SplinePointType,
@@ -29,6 +31,7 @@ import {
 } from "./hooks";
 
 export function useShowfile() {
+    // used to store the initial showfile state before any changes were made in the editor, so we have something to compare against to see if there are unsaved changes
     const [initialShow, setInitialShow] = useState(createNewShowfile());
 
     // See comment on TimelineDurationUpdateMode declaration in src/common/show.ts for more info.
@@ -37,6 +40,9 @@ export function useShowfile() {
             (typeof TimelineDurationUpdateMode)[keyof typeof TimelineDurationUpdateMode]
         >(TimelineDurationUpdateMode.Ripple);
 
+    // used to store the handle to the file system file that the showfile is currently loaded from, 
+    // so we can save to the same file we've already opened. not all the browsers' file system API 
+    // implementations support this - Chrome does, Safari doesn't, not sure about Firefox.
     const [fsHandle, setFsHandle] = useState<FileSystemFileHandle | null>(null);
 
     const [unsavedChanges, setUnsavedChanges] =
@@ -51,19 +57,22 @@ export function useShowfile() {
         redo,
     } = useStateWithTrackedHistory(initialShow);
 
+    // update the unsaved changes state whenever the showfile changes
     useEffect(() => {
         const result = diff(initialShow, show);
-        if (Object.keys(result).length === 0) {
+        const differenceBetweenSavedShowAndCurrentShow = Object.keys(result).length === 0;
+        if (differenceBetweenSavedShowAndCurrentShow) {
             setUnsavedChanges(false);
         } else {
             setUnsavedChanges(true);
         }
     }, [initialShow, show, setUnsavedChanges]);
 
+    // handles opening a showfile from the file system, parsing it, and loading it into the editor
     const openShowfile = useCallback(async () => {
         const blob = await fileOpen({
-            mimeTypes: ["application/chessbots-showfile"],
-            extensions: [".cbor"],
+            mimeTypes: [CHESSBOTS_SHOWFILE_MIME_TYPE],
+            extensions: [CHESSBOTS_SHOWFILE_EXTENSION],
             description: "Chess Bots Showfile",
         });
 
@@ -89,16 +98,17 @@ export function useShowfile() {
         if (blob.handle) setFsHandle(blob.handle);
     }, [setShow]);
 
+    // handles encoding the showfile as a CBOR and saving it to the file system
     const saveShowfile = useCallback(async () => {
         const blob = new Blob([cborEncode(show)], {
-            type: "application/chessbots-showfile",
+            type: CHESSBOTS_SHOWFILE_MIME_TYPE,
         });
         await fileSave(
             blob,
             {
-                mimeTypes: ["application/chessbots-showfile"],
-                extensions: [".cbor"],
-                fileName: show.name + ".cbor",
+                mimeTypes: [CHESSBOTS_SHOWFILE_MIME_TYPE],
+                extensions: [CHESSBOTS_SHOWFILE_EXTENSION],
+                fileName: show.name + CHESSBOTS_SHOWFILE_EXTENSION,
             },
             fsHandle,
         );
@@ -106,6 +116,8 @@ export function useShowfile() {
         setInitialShow(show);
     }, [fsHandle, show]);
 
+
+    // handles loading an audio file from the file system, and adding it to the showfile
     const loadAudioFromFile = useCallback(async () => {
         const blob = await fileOpen({
             mimeTypes: ["audio/mpeg", "audio/wav"],
@@ -221,10 +233,10 @@ export function useShowfile() {
                 const newStartPointEvent: StartPointEvent = {
                     id: crypto.randomUUID(),
                     type: TimelineEventTypes.StartPointEvent,
-                    durationMs: firstGoToPointEvent.durationMs, // Or use firstGoToPointEvent.durationMs?
+                    durationMs: firstGoToPointEvent.durationMs, 
                     target: {
-                        type: SplinePointType.StartPoint, // Convert midpoint to start point
-                        point: firstGoToPointEvent.target.endPoint, // Use the endpoint as the new start
+                        type: SplinePointType.StartPoint, 
+                        point: firstGoToPointEvent.target.endPoint, 
                     },
                 };
                 const newRemainingEvents = remainingEvents.toSpliced(
@@ -349,6 +361,7 @@ export function useShowfile() {
     // TODO: figure out how to get this from the showfile
     const sequenceLengthMs = 10 * 1000;
 
+    // TODO: continue adding comments to code below this line
     const { currentTimestamp, playing, togglePlaying } =
         usePlayHead(sequenceLengthMs);
 
diff --git a/src/common/show.ts b/src/common/show.ts
index 2246103f..b6a69944 100644
--- a/src/common/show.ts
+++ b/src/common/show.ts
@@ -205,3 +205,7 @@ export function millisToPixels(millis: number): number {
 export function pixelsToMillis(pixels: number): number {
     return (pixels / RULER_TICK_GAP_PX) * RULER_TICK_INTERVAL_MS;
 }
+
+
+export const CHESSBOTS_SHOWFILE_MIME_TYPE = 'application/chessbots-showfile';
+export const CHESSBOTS_SHOWFILE_EXTENSION = '.cbor';
\ No newline at end of file

From e626b2c4b268e08d186e3332d87dc431f2b00083 Mon Sep 17 00:00:00 2001
From: Jason Antwi-Appah <hey@jasonaa.me>
Date: Sun, 20 Apr 2025 23:00:34 -0500
Subject: [PATCH 42/92] Add icon to timeline event drag handle

---
 src/client/editor/timeline.tsx | 41 ++++++++++++++++++++++++++++++----
 1 file changed, 37 insertions(+), 4 deletions(-)

diff --git a/src/client/editor/timeline.tsx b/src/client/editor/timeline.tsx
index 58ebf892..34ea454b 100644
--- a/src/client/editor/timeline.tsx
+++ b/src/client/editor/timeline.tsx
@@ -87,13 +87,46 @@ export function TimelineEvent(props: {
             {onPointerDownOnDragHandle && (
                 <span
                     style={{
-                        width: "1rem",
-                        height: "1rem",
-                        backgroundColor: "red",
                         cursor: "grab",
                     }}
                     onPointerDown={onPointerDownOnDragHandle}
-                ></span>
+                >
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 39 39"
+                        width="16"
+                        height="16"
+                        fill="#BBB"
+                    >
+                        <path
+                            d="M 5 0 C 7.761 0 10 2.239 10 5 C 10 7.761 7.761 10 5 10 C 2.239 10 0 7.761 0 5 C 0 2.239 2.239 0 5 0 Z"
+                        ></path>
+                        <path
+                            d="M 19 0 C 21.761 0 24 2.239 24 5 C 24 7.761 21.761 10 19 10 C 16.239 10 14 7.761 14 5 C 14 2.239 16.239 0 19 0 Z"
+                        ></path>
+                        <path
+                            d="M 33 0 C 35.761 0 38 2.239 38 5 C 38 7.761 35.761 10 33 10 C 30.239 10 28 7.761 28 5 C 28 2.239 30.239 0 33 0 Z"
+                        ></path>
+                        <path
+                            d="M 33 14 C 35.761 14 38 16.239 38 19 C 38 21.761 35.761 24 33 24 C 30.239 24 28 21.761 28 19 C 28 16.239 30.239 14 33 14 Z"
+                        ></path>
+                        <path
+                            d="M 19 14 C 21.761 14 24 16.239 24 19 C 24 21.761 21.761 24 19 24 C 16.239 24 14 21.761 14 19 C 14 16.239 16.239 14 19 14 Z"
+                        ></path>
+                        <path
+                            d="M 5 14 C 7.761 14 10 16.239 10 19 C 10 21.761 7.761 24 5 24 C 2.239 24 0 21.761 0 19 C 0 16.239 2.239 14 5 14 Z"
+                        ></path>
+                        <path
+                            d="M 5 28 C 7.761 28 10 30.239 10 33 C 10 35.761 7.761 38 5 38 C 2.239 38 0 35.761 0 33 C 0 30.239 2.239 28 5 28 Z"
+                        ></path>
+                        <path
+                            d="M 19 28 C 21.761 28 24 30.239 24 33 C 24 35.761 21.761 38 19 38 C 16.239 38 14 35.761 14 33 C 14 30.239 16.239 28 19 28 Z"
+                        ></path>
+                        <path
+                            d="M 33 28 C 35.761 28 38 30.239 38 33 C 38 35.761 35.761 38 33 38 C 30.239 38 28 35.761 28 33 C 28 30.239 30.239 28 33 28 Z"
+                        ></path>
+                    </svg>
+                </span>
             )}
         </Card>
     );

From 4dfad770ab8c5d08431dd9216707a523421faf74 Mon Sep 17 00:00:00 2001
From: Jason Antwi-Appah <hey@jasonaa.me>
Date: Sun, 20 Apr 2025 23:06:13 -0500
Subject: [PATCH 43/92] Add pen tool for adding points to layer

---
 src/client/editor/editor.tsx        | 73 ++++++++++++++++++++++++++++-
 src/client/editor/showfile-state.ts | 69 ++++++++++++++++++++++++++-
 src/common/show.ts                  | 17 +++++++
 3 files changed, 157 insertions(+), 2 deletions(-)

diff --git a/src/client/editor/editor.tsx b/src/client/editor/editor.tsx
index 2e2fe7e4..4b67598e 100644
--- a/src/client/editor/editor.tsx
+++ b/src/client/editor/editor.tsx
@@ -1,3 +1,5 @@
+// TODO: support selecting active layer for point addition
+
 import { useMemo } from "react";
 import {
     Section,
@@ -10,9 +12,12 @@ import {
     useHotkeys,
     type HotkeyConfig,
     SegmentedControl,
+    Divider,
+    NumericInput,
 } from "@blueprintjs/core";
-import { RobotGrid } from "../debug/simulator";
+import { RobotGrid, robotSize } from "../debug/simulator";
 import {
+    GridCursorMode,
     millisToPixels,
     NonStartPointEvent,
     RULER_TICK_GAP_PX,
@@ -28,6 +33,8 @@ import {
     TimelineEvent,
     ReorderableTimelineEvent,
 } from "./timeline";
+import { Midpoint, SplinePointType } from "../../common/spline";
+
 
 // TODO: ui for adding/removing audio - remove current hotkey as this was mainly for testing
 
@@ -59,6 +66,13 @@ export function Editor() {
         updateTimelineEventDurations,
         setTimelineDurationUpdateMode,
         timelineDurationUpdateMode,
+        gridCursorMode,
+        setGridCursorMode,
+        defaultPointType,
+        setDefaultPointType,
+        setDefaultEventDurationMs,
+        defaultEventDurationMs,
+        addPointToSelectedLayer
     } = useShowfile();
 
     // TODO: fix viewport height / timeline height
@@ -200,6 +214,18 @@ export function Editor() {
             </Card>
             {/* TODO: render robots */}
             <RobotGrid robotState={{}}>
+                {
+                    gridCursorMode === GridCursorMode.Pen && (
+                        <div style={{ position: "absolute", left: 0, top: 0, width: "100%", height: "100%", cursor: "crosshair" }} onClick={(e) => {
+                            const { x: mouseX, y: mouseY } = e.nativeEvent;
+                            const { left: gridOriginX, top: gridOriginY } = e.currentTarget.getBoundingClientRect();
+                            const x = mouseX - gridOriginX;
+                            const y = mouseY - gridOriginY;
+                            addPointToSelectedLayer(x + robotSize / 4, y + robotSize / 4);
+                        }}>
+                        </div>
+                    )
+                }
                 {show.timeline.map((layer, index) => (
                     <SplineEditor
                         key={`spline-editor-${index}`}
@@ -247,6 +273,51 @@ export function Editor() {
                             }
                             value={timelineDurationUpdateMode}
                         />
+                        <Divider />
+                        {
+                            gridCursorMode === GridCursorMode.Pen && (
+                                <>
+                                <SegmentedControl
+                                    options={[
+                                        {
+                                            label: "Quadratic",
+                                            value: SplinePointType.QuadraticBezier,
+                                        },
+                                        {
+                                            label: "Cubic",
+                                            value: SplinePointType.CubicBezier,
+                                        },
+                                    ]}
+                                    onValueChange={(value) =>
+                                        setDefaultPointType(
+                                            value as Midpoint["type"],
+                                        )
+                                    }
+                                    value={defaultPointType}
+                                />
+                                <NumericInput value={defaultEventDurationMs} style={{ width: "5rem" }} onValueChange={(value) => setDefaultEventDurationMs(value)} />
+                                </>
+                            )
+                        }
+                        <SegmentedControl
+                            options={[
+                                {
+                                    label: "Cursor",
+                                    value: GridCursorMode.Cursor,
+                                },
+                                {
+                                    label: "Pen",
+                                    value: GridCursorMode.Pen,
+                                },
+                            ]}
+                            onValueChange={(value) =>
+                                setGridCursorMode(
+                                    value as (typeof GridCursorMode)[keyof typeof GridCursorMode],
+                                )
+                            }
+                            value={gridCursorMode}
+                        />
+                        <Divider />
                         <Button
                             icon="add"
                             text="Add Robot"
diff --git a/src/client/editor/showfile-state.ts b/src/client/editor/showfile-state.ts
index 675bdca5..ee28d8ed 100644
--- a/src/client/editor/showfile-state.ts
+++ b/src/client/editor/showfile-state.ts
@@ -17,12 +17,14 @@ import {
     TimelineDurationUpdateMode,
     CHESSBOTS_SHOWFILE_MIME_TYPE,
     CHESSBOTS_SHOWFILE_EXTENSION,
+    GridCursorMode,
 } from "../../common/show";
 import {
     SplinePointType,
     CubicBezier,
     QuadraticBezier,
     type Coords,
+    type Midpoint,
 } from "../../common/spline";
 import {
     usePlayHead,
@@ -34,11 +36,23 @@ export function useShowfile() {
     // used to store the initial showfile state before any changes were made in the editor, so we have something to compare against to see if there are unsaved changes
     const [initialShow, setInitialShow] = useState(createNewShowfile());
 
-    // See comment on TimelineDurationUpdateMode declaration in src/common/show.ts for more info.
+    // See comment on TimelineDurationUpdateMode declaration in src/common/show.ts for context
     const [timelineDurationUpdateMode, setTimelineDurationUpdateMode] =
         useState<
             (typeof TimelineDurationUpdateMode)[keyof typeof TimelineDurationUpdateMode]
         >(TimelineDurationUpdateMode.Ripple);
+    
+    const [gridCursorMode, setGridCursorMode] = useState<
+        (typeof GridCursorMode)[keyof typeof GridCursorMode]
+    >(GridCursorMode.Pen);
+
+    const [defaultPointType, setDefaultPointType] = useState<
+        Midpoint["type"]
+    >(SplinePointType.QuadraticBezier);
+
+    const [defaultEventDurationMs, setDefaultEventDurationMs] = useState(750);
+
+    const [selectedLayerIndex, setSelectedLayerIndex] = useState(0);
 
     // used to store the handle to the file system file that the showfile is currently loaded from, 
     // so we can save to the same file we've already opened. not all the browsers' file system API 
@@ -469,6 +483,52 @@ export function useShowfile() {
         [show, setShow, timelineDurationUpdateMode],
     );
 
+    const addPointToSelectedLayer = useCallback(
+        (x: number, y: number) => {
+            const newTimeline = [...show.timeline];
+            const layer = newTimeline[selectedLayerIndex];
+            if (!layer) return;
+            const { startPoint, remainingEvents } = layer;
+            const newEvents = [...remainingEvents];
+            switch (defaultPointType) {
+                case SplinePointType.QuadraticBezier:
+                    newEvents.push({
+                        type: TimelineEventTypes.GoToPointEvent,
+                        durationMs: defaultEventDurationMs,
+                        target: {
+                            type: SplinePointType.QuadraticBezier,
+                            endPoint: { x, y },
+                        },
+                        id: crypto.randomUUID()
+                    });
+                    break;
+                case SplinePointType.CubicBezier:
+                    newEvents.push({
+                        type: TimelineEventTypes.GoToPointEvent,
+                        durationMs: defaultEventDurationMs,
+                        target: {
+                            type: SplinePointType.CubicBezier,
+                            endPoint: { x, y },
+                            controlPoint: { x: x + 10, y: y + 10 },
+                        },
+                        id: crypto.randomUUID()
+                    });
+                    break;
+                default:
+                    console.warn("Tried to add point with invalid point type");
+                    return;
+            }
+
+            newTimeline[selectedLayerIndex] = {
+                startPoint,
+                remainingEvents: newEvents,
+            };
+            setShow({ ...show, timeline: newTimeline });
+            
+        },
+        [show, setShow, selectedLayerIndex, defaultPointType, defaultEventDurationMs],
+    );
+
     return {
         updateTimelineEventOrders,
         show,
@@ -496,5 +556,12 @@ export function useShowfile() {
         timelineDurationUpdateMode,
         setTimelineDurationUpdateMode,
         updateTimelineEventDurations,
+        gridCursorMode,
+        setGridCursorMode,
+        defaultPointType,
+        setDefaultPointType,
+        setDefaultEventDurationMs,
+        defaultEventDurationMs,
+        addPointToSelectedLayer
     };
 }
diff --git a/src/common/show.ts b/src/common/show.ts
index b6a69944..6ad12993 100644
--- a/src/common/show.ts
+++ b/src/common/show.ts
@@ -190,6 +190,23 @@ export const TimelineDurationUpdateMode = {
     Ripple: "ripple",
 } as const;
 
+
+/*
+ * The grid cursor mode determines the behavior of the cursor when on the grid.
+ *
+ * Being in cursor mode means that the cursor is a normal cursor, and the user 
+ * can click and drag points that already exist on the grid. The user is not able 
+ * to add new points to the grid.
+ *
+ * Being in pen mode means that the user is able to add new points to the grid
+ * by clicking on the locations where they want to add points. The user is still
+ * able to drag existing points on the grid as in cursor mode.
+ */
+export const GridCursorMode = {
+    Cursor: "cursor",
+    Pen: "pen",
+} as const;
+
 export const RULER_TICK_INTERVAL_MS = 100;
 // TODO: make ruler tick size configurable so we can zoom. relatively low priority. would be nice if gestures could be supported too
 export const RULER_TICK_GAP_PX = 12;

From 27f88fb2f39451a6e87e3d4bff4a265233885e9b Mon Sep 17 00:00:00 2001
From: Jason Antwi-Appah <hey@jasonaa.me>
Date: Sun, 20 Apr 2025 23:27:58 -0500
Subject: [PATCH 44/92] Format

---
 src/client/editor/editor.tsx        | 50 ++++++++++++++++++-----------
 src/client/editor/showfile-state.ts | 37 ++++++++++++---------
 src/client/editor/timeline.tsx      | 36 ++++++---------------
 src/common/show.ts                  | 10 +++---
 4 files changed, 66 insertions(+), 67 deletions(-)

diff --git a/src/client/editor/editor.tsx b/src/client/editor/editor.tsx
index 4b67598e..4f5f88f2 100644
--- a/src/client/editor/editor.tsx
+++ b/src/client/editor/editor.tsx
@@ -35,7 +35,6 @@ import {
 } from "./timeline";
 import { Midpoint, SplinePointType } from "../../common/spline";
 
-
 // TODO: ui for adding/removing audio - remove current hotkey as this was mainly for testing
 
 export function Editor() {
@@ -72,7 +71,7 @@ export function Editor() {
         setDefaultPointType,
         setDefaultEventDurationMs,
         defaultEventDurationMs,
-        addPointToSelectedLayer
+        addPointToSelectedLayer,
     } = useShowfile();
 
     // TODO: fix viewport height / timeline height
@@ -214,18 +213,29 @@ export function Editor() {
             </Card>
             {/* TODO: render robots */}
             <RobotGrid robotState={{}}>
-                {
-                    gridCursorMode === GridCursorMode.Pen && (
-                        <div style={{ position: "absolute", left: 0, top: 0, width: "100%", height: "100%", cursor: "crosshair" }} onClick={(e) => {
+                {gridCursorMode === GridCursorMode.Pen && (
+                    <div
+                        style={{
+                            position: "absolute",
+                            left: 0,
+                            top: 0,
+                            width: "100%",
+                            height: "100%",
+                            cursor: "crosshair",
+                        }}
+                        onClick={(e) => {
                             const { x: mouseX, y: mouseY } = e.nativeEvent;
-                            const { left: gridOriginX, top: gridOriginY } = e.currentTarget.getBoundingClientRect();
+                            const { left: gridOriginX, top: gridOriginY } =
+                                e.currentTarget.getBoundingClientRect();
                             const x = mouseX - gridOriginX;
                             const y = mouseY - gridOriginY;
-                            addPointToSelectedLayer(x + robotSize / 4, y + robotSize / 4);
-                        }}>
-                        </div>
-                    )
-                }
+                            addPointToSelectedLayer(
+                                x + robotSize / 4,
+                                y + robotSize / 4,
+                            );
+                        }}
+                    ></div>
+                )}
                 {show.timeline.map((layer, index) => (
                     <SplineEditor
                         key={`spline-editor-${index}`}
@@ -274,9 +284,8 @@ export function Editor() {
                             value={timelineDurationUpdateMode}
                         />
                         <Divider />
-                        {
-                            gridCursorMode === GridCursorMode.Pen && (
-                                <>
+                        {gridCursorMode === GridCursorMode.Pen && (
+                            <>
                                 <SegmentedControl
                                     options={[
                                         {
@@ -295,10 +304,15 @@ export function Editor() {
                                     }
                                     value={defaultPointType}
                                 />
-                                <NumericInput value={defaultEventDurationMs} style={{ width: "5rem" }} onValueChange={(value) => setDefaultEventDurationMs(value)} />
-                                </>
-                            )
-                        }
+                                <NumericInput
+                                    value={defaultEventDurationMs}
+                                    style={{ width: "5rem" }}
+                                    onValueChange={(value) =>
+                                        setDefaultEventDurationMs(value)
+                                    }
+                                />
+                            </>
+                        )}
                         <SegmentedControl
                             options={[
                                 {
diff --git a/src/client/editor/showfile-state.ts b/src/client/editor/showfile-state.ts
index ee28d8ed..c1dc2b4e 100644
--- a/src/client/editor/showfile-state.ts
+++ b/src/client/editor/showfile-state.ts
@@ -41,21 +41,21 @@ export function useShowfile() {
         useState<
             (typeof TimelineDurationUpdateMode)[keyof typeof TimelineDurationUpdateMode]
         >(TimelineDurationUpdateMode.Ripple);
-    
+
     const [gridCursorMode, setGridCursorMode] = useState<
         (typeof GridCursorMode)[keyof typeof GridCursorMode]
     >(GridCursorMode.Pen);
 
-    const [defaultPointType, setDefaultPointType] = useState<
-        Midpoint["type"]
-    >(SplinePointType.QuadraticBezier);
+    const [defaultPointType, setDefaultPointType] = useState<Midpoint["type"]>(
+        SplinePointType.QuadraticBezier,
+    );
 
     const [defaultEventDurationMs, setDefaultEventDurationMs] = useState(750);
 
     const [selectedLayerIndex, setSelectedLayerIndex] = useState(0);
 
-    // used to store the handle to the file system file that the showfile is currently loaded from, 
-    // so we can save to the same file we've already opened. not all the browsers' file system API 
+    // used to store the handle to the file system file that the showfile is currently loaded from,
+    // so we can save to the same file we've already opened. not all the browsers' file system API
     // implementations support this - Chrome does, Safari doesn't, not sure about Firefox.
     const [fsHandle, setFsHandle] = useState<FileSystemFileHandle | null>(null);
 
@@ -74,7 +74,8 @@ export function useShowfile() {
     // update the unsaved changes state whenever the showfile changes
     useEffect(() => {
         const result = diff(initialShow, show);
-        const differenceBetweenSavedShowAndCurrentShow = Object.keys(result).length === 0;
+        const differenceBetweenSavedShowAndCurrentShow =
+            Object.keys(result).length === 0;
         if (differenceBetweenSavedShowAndCurrentShow) {
             setUnsavedChanges(false);
         } else {
@@ -130,7 +131,6 @@ export function useShowfile() {
         setInitialShow(show);
     }, [fsHandle, show]);
 
-
     // handles loading an audio file from the file system, and adding it to the showfile
     const loadAudioFromFile = useCallback(async () => {
         const blob = await fileOpen({
@@ -247,10 +247,10 @@ export function useShowfile() {
                 const newStartPointEvent: StartPointEvent = {
                     id: crypto.randomUUID(),
                     type: TimelineEventTypes.StartPointEvent,
-                    durationMs: firstGoToPointEvent.durationMs, 
+                    durationMs: firstGoToPointEvent.durationMs,
                     target: {
-                        type: SplinePointType.StartPoint, 
-                        point: firstGoToPointEvent.target.endPoint, 
+                        type: SplinePointType.StartPoint,
+                        point: firstGoToPointEvent.target.endPoint,
                     },
                 };
                 const newRemainingEvents = remainingEvents.toSpliced(
@@ -499,7 +499,7 @@ export function useShowfile() {
                             type: SplinePointType.QuadraticBezier,
                             endPoint: { x, y },
                         },
-                        id: crypto.randomUUID()
+                        id: crypto.randomUUID(),
                     });
                     break;
                 case SplinePointType.CubicBezier:
@@ -511,7 +511,7 @@ export function useShowfile() {
                             endPoint: { x, y },
                             controlPoint: { x: x + 10, y: y + 10 },
                         },
-                        id: crypto.randomUUID()
+                        id: crypto.randomUUID(),
                     });
                     break;
                 default:
@@ -524,9 +524,14 @@ export function useShowfile() {
                 remainingEvents: newEvents,
             };
             setShow({ ...show, timeline: newTimeline });
-            
         },
-        [show, setShow, selectedLayerIndex, defaultPointType, defaultEventDurationMs],
+        [
+            show,
+            setShow,
+            selectedLayerIndex,
+            defaultPointType,
+            defaultEventDurationMs,
+        ],
     );
 
     return {
@@ -562,6 +567,6 @@ export function useShowfile() {
         setDefaultPointType,
         setDefaultEventDurationMs,
         defaultEventDurationMs,
-        addPointToSelectedLayer
+        addPointToSelectedLayer,
     };
 }
diff --git a/src/client/editor/timeline.tsx b/src/client/editor/timeline.tsx
index 34ea454b..9556977a 100644
--- a/src/client/editor/timeline.tsx
+++ b/src/client/editor/timeline.tsx
@@ -98,33 +98,15 @@ export function TimelineEvent(props: {
                         height="16"
                         fill="#BBB"
                     >
-                        <path
-                            d="M 5 0 C 7.761 0 10 2.239 10 5 C 10 7.761 7.761 10 5 10 C 2.239 10 0 7.761 0 5 C 0 2.239 2.239 0 5 0 Z"
-                        ></path>
-                        <path
-                            d="M 19 0 C 21.761 0 24 2.239 24 5 C 24 7.761 21.761 10 19 10 C 16.239 10 14 7.761 14 5 C 14 2.239 16.239 0 19 0 Z"
-                        ></path>
-                        <path
-                            d="M 33 0 C 35.761 0 38 2.239 38 5 C 38 7.761 35.761 10 33 10 C 30.239 10 28 7.761 28 5 C 28 2.239 30.239 0 33 0 Z"
-                        ></path>
-                        <path
-                            d="M 33 14 C 35.761 14 38 16.239 38 19 C 38 21.761 35.761 24 33 24 C 30.239 24 28 21.761 28 19 C 28 16.239 30.239 14 33 14 Z"
-                        ></path>
-                        <path
-                            d="M 19 14 C 21.761 14 24 16.239 24 19 C 24 21.761 21.761 24 19 24 C 16.239 24 14 21.761 14 19 C 14 16.239 16.239 14 19 14 Z"
-                        ></path>
-                        <path
-                            d="M 5 14 C 7.761 14 10 16.239 10 19 C 10 21.761 7.761 24 5 24 C 2.239 24 0 21.761 0 19 C 0 16.239 2.239 14 5 14 Z"
-                        ></path>
-                        <path
-                            d="M 5 28 C 7.761 28 10 30.239 10 33 C 10 35.761 7.761 38 5 38 C 2.239 38 0 35.761 0 33 C 0 30.239 2.239 28 5 28 Z"
-                        ></path>
-                        <path
-                            d="M 19 28 C 21.761 28 24 30.239 24 33 C 24 35.761 21.761 38 19 38 C 16.239 38 14 35.761 14 33 C 14 30.239 16.239 28 19 28 Z"
-                        ></path>
-                        <path
-                            d="M 33 28 C 35.761 28 38 30.239 38 33 C 38 35.761 35.761 38 33 38 C 30.239 38 28 35.761 28 33 C 28 30.239 30.239 28 33 28 Z"
-                        ></path>
+                        <path d="M 5 0 C 7.761 0 10 2.239 10 5 C 10 7.761 7.761 10 5 10 C 2.239 10 0 7.761 0 5 C 0 2.239 2.239 0 5 0 Z"></path>
+                        <path d="M 19 0 C 21.761 0 24 2.239 24 5 C 24 7.761 21.761 10 19 10 C 16.239 10 14 7.761 14 5 C 14 2.239 16.239 0 19 0 Z"></path>
+                        <path d="M 33 0 C 35.761 0 38 2.239 38 5 C 38 7.761 35.761 10 33 10 C 30.239 10 28 7.761 28 5 C 28 2.239 30.239 0 33 0 Z"></path>
+                        <path d="M 33 14 C 35.761 14 38 16.239 38 19 C 38 21.761 35.761 24 33 24 C 30.239 24 28 21.761 28 19 C 28 16.239 30.239 14 33 14 Z"></path>
+                        <path d="M 19 14 C 21.761 14 24 16.239 24 19 C 24 21.761 21.761 24 19 24 C 16.239 24 14 21.761 14 19 C 14 16.239 16.239 14 19 14 Z"></path>
+                        <path d="M 5 14 C 7.761 14 10 16.239 10 19 C 10 21.761 7.761 24 5 24 C 2.239 24 0 21.761 0 19 C 0 16.239 2.239 14 5 14 Z"></path>
+                        <path d="M 5 28 C 7.761 28 10 30.239 10 33 C 10 35.761 7.761 38 5 38 C 2.239 38 0 35.761 0 33 C 0 30.239 2.239 28 5 28 Z"></path>
+                        <path d="M 19 28 C 21.761 28 24 30.239 24 33 C 24 35.761 21.761 38 19 38 C 16.239 38 14 35.761 14 33 C 14 30.239 16.239 28 19 28 Z"></path>
+                        <path d="M 33 28 C 35.761 28 38 30.239 38 33 C 38 35.761 35.761 38 33 38 C 30.239 38 28 35.761 28 33 C 28 30.239 30.239 28 33 28 Z"></path>
                     </svg>
                 </span>
             )}
diff --git a/src/common/show.ts b/src/common/show.ts
index 6ad12993..9c5045b0 100644
--- a/src/common/show.ts
+++ b/src/common/show.ts
@@ -190,12 +190,11 @@ export const TimelineDurationUpdateMode = {
     Ripple: "ripple",
 } as const;
 
-
 /*
  * The grid cursor mode determines the behavior of the cursor when on the grid.
  *
- * Being in cursor mode means that the cursor is a normal cursor, and the user 
- * can click and drag points that already exist on the grid. The user is not able 
+ * Being in cursor mode means that the cursor is a normal cursor, and the user
+ * can click and drag points that already exist on the grid. The user is not able
  * to add new points to the grid.
  *
  * Being in pen mode means that the user is able to add new points to the grid
@@ -223,6 +222,5 @@ export function pixelsToMillis(pixels: number): number {
     return (pixels / RULER_TICK_GAP_PX) * RULER_TICK_INTERVAL_MS;
 }
 
-
-export const CHESSBOTS_SHOWFILE_MIME_TYPE = 'application/chessbots-showfile';
-export const CHESSBOTS_SHOWFILE_EXTENSION = '.cbor';
\ No newline at end of file
+export const CHESSBOTS_SHOWFILE_MIME_TYPE = "application/chessbots-showfile";
+export const CHESSBOTS_SHOWFILE_EXTENSION = ".cbor";

From dd46a71197d4f7c867329e11990602eafee8fdea Mon Sep 17 00:00:00 2001
From: Jason Antwi-Appah <hey@jasonaa.me>
Date: Mon, 21 Apr 2025 00:50:44 -0500
Subject: [PATCH 45/92] Layer selection

---
 src/client/editor/editor.tsx        | 31 ++++++++++++++++-------------
 src/client/editor/showfile-state.ts |  9 +++++++++
 src/client/editor/timeline.tsx      | 20 ++++++++++++++++---
 3 files changed, 43 insertions(+), 17 deletions(-)

diff --git a/src/client/editor/editor.tsx b/src/client/editor/editor.tsx
index 4f5f88f2..b4f97f35 100644
--- a/src/client/editor/editor.tsx
+++ b/src/client/editor/editor.tsx
@@ -1,4 +1,5 @@
 // TODO: support selecting active layer for point addition
+// TODO: how to add wait events?
 
 import { useMemo } from "react";
 import {
@@ -72,6 +73,9 @@ export function Editor() {
         setDefaultEventDurationMs,
         defaultEventDurationMs,
         addPointToSelectedLayer,
+        setSelectedLayerIndex,
+        selectedLayerIndex,
+        removeAudio
     } = useShowfile();
 
     // TODO: fix viewport height / timeline height
@@ -125,17 +129,7 @@ export function Editor() {
                     e.preventDefault();
                     togglePlaying();
                 },
-            },
-            {
-                combo: "mod+shift+f",
-                group: "Edit",
-                global: true,
-                label: "Load Audio",
-                onKeyDown: (e) => {
-                    e.preventDefault();
-                    loadAudioFromFile();
-                },
-            },
+            }
         ],
         [
             redo,
@@ -143,7 +137,6 @@ export function Editor() {
             saveShowfile,
             openShowfile,
             togglePlaying,
-            loadAudioFromFile,
         ],
     );
 
@@ -206,9 +199,16 @@ export function Editor() {
                     />
                     <Button
                         className="bp5-minimal"
-                        text="Load New Audio"
+                        text="Load New Audio..."
                         onClick={loadAudioFromFile}
                     />
+                    {show.audio && (
+                        <Button
+                            className="bp5-minimal"
+                            text="Remove Audio"
+                            onClick={removeAudio}
+                        />
+                    )}
                 </ButtonGroup>
             </Card>
             {/* TODO: render robots */}
@@ -369,7 +369,6 @@ export function Editor() {
                             }}
                         />
                     </TimelineLayer>
-                    <TimelineLayer title="Audio"> Stuff here</TimelineLayer>
                     {show.timeline.map(
                         ({ startPoint, remainingEvents }, layerIndex) => {
                             return (
@@ -377,6 +376,10 @@ export function Editor() {
                                     key={`timeline-layer-${layerIndex}`}
                                     title={`Robot ${layerIndex + 1}`}
                                     onDelete={() => deleteLayer(layerIndex)}
+                                    onActive={() =>
+                                        setSelectedLayerIndex(layerIndex)
+                                    }
+                                    active={selectedLayerIndex === layerIndex}
                                 >
                                     <div style={{ display: "flex" }}>
                                         <TimelineEvent
diff --git a/src/client/editor/showfile-state.ts b/src/client/editor/showfile-state.ts
index c1dc2b4e..66801317 100644
--- a/src/client/editor/showfile-state.ts
+++ b/src/client/editor/showfile-state.ts
@@ -534,6 +534,12 @@ export function useShowfile() {
         ],
     );
 
+    const removeAudio = useCallback(() => {
+        setShow({
+            ...show,
+            audio: undefined,
+        });
+    }, [show, setShow]);
     return {
         updateTimelineEventOrders,
         show,
@@ -568,5 +574,8 @@ export function useShowfile() {
         setDefaultEventDurationMs,
         defaultEventDurationMs,
         addPointToSelectedLayer,
+        setSelectedLayerIndex,
+        selectedLayerIndex,
+        removeAudio
     };
 }
diff --git a/src/client/editor/timeline.tsx b/src/client/editor/timeline.tsx
index 9556977a..ba1b064d 100644
--- a/src/client/editor/timeline.tsx
+++ b/src/client/editor/timeline.tsx
@@ -116,8 +116,13 @@ export function TimelineEvent(props: {
 
 export const TimelineLayer = forwardRef<
     HTMLDivElement,
-    PropsWithChildren<{ title: string; onDelete?: () => void }>
->(function TimelineCard({ title, children, onDelete }, ref) {
+    PropsWithChildren<{
+        title: string;
+        onDelete?: () => void;
+        onActive?: () => void;
+        active?: boolean;
+    }>
+>(function TimelineCard({ title, children, onDelete, onActive, active }, ref) {
     // TODO: add borders between columns. v low priority
     // https://codepen.io/Kevin-Geary/pen/BavwqYX
     // https://www.youtube.com/watch?v=EQYft7JPKto
@@ -128,10 +133,18 @@ export const TimelineLayer = forwardRef<
                 display: "grid",
                 gridTemplateColumns: "subgrid",
                 gridColumn: "1 / span 2",
+                ...(active ? { border: "1px solid red" } : {}),
             }}
         >
             <span>
-                <Text style={{ fontWeight: "bold" }}>{title}</Text>
+                <Text style={{ fontWeight: "bold" }}>{title} {onActive && (
+                <Button
+                    icon="asterisk"
+                    variant="minimal"
+                    onClick={onActive}
+                />
+            )}</Text>
+                {}
                 {onDelete && (
                     <Button
                         icon="trash"
@@ -141,6 +154,7 @@ export const TimelineLayer = forwardRef<
                     />
                 )}
             </span>
+            
             {children}
         </SectionCard>
     );

From f59bd2255a0d7c723a98e4ea3a831f1c49a52bcb Mon Sep 17 00:00:00 2001
From: Jason Antwi-Appah <hey@jasonaa.me>
Date: Thu, 24 Apr 2025 01:57:15 -0500
Subject: [PATCH 46/92] Export robot, destructure props

---
 src/client/debug/simulator.tsx | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/client/debug/simulator.tsx b/src/client/debug/simulator.tsx
index f74f6786..9c26edb1 100644
--- a/src/client/debug/simulator.tsx
+++ b/src/client/debug/simulator.tsx
@@ -1,5 +1,6 @@
 import { Card, Button, H1, Tooltip, Collapse } from "@blueprintjs/core";
 import {
+    CSSProperties,
     type PropsWithChildren,
     useEffect,
     useReducer,
@@ -352,25 +353,27 @@ function LogEntry(props: { message: SimulatorUpdateMessage; ts: Date }) {
  * @param props - the robot position and id
  * @returns the robot icon scaled to the board
  */
-function Robot(props: {
+export function Robot({pos, robotId, onTopOfRobots, style}: {
     pos: SimulatedRobotLocation;
     robotId: string;
     onTopOfRobots: string[];
+    style?: CSSProperties
 }) {
     return (
         <div
             className="robot"
             style={{
                 position: "absolute",
-                left: `${props.pos.position.x * tileSize - 0.25 * tileSize}px`,
-                bottom: `${props.pos.position.y * tileSize - 0.25 * tileSize}px`,
+                left: `${pos.position.x * tileSize - 0.25 * tileSize}px`,
+                bottom: `${pos.position.y * tileSize - 0.25 * tileSize}px`,
+                ...style
             }}
         >
-            <Tooltip content={`${props.robotId}: ${JSON.stringify(props.pos)}`}>
+            <Tooltip content={`${robotId}: ${JSON.stringify(pos)}`}>
                 <div
-                    className={robotColor(props.onTopOfRobots.length)}
+                    className={robotColor(onTopOfRobots.length)}
                     style={{
-                        transform: `rotate(-${clampHeading(props.pos.headingRadians)}rad)`,
+                        transform: `rotate(-${clampHeading(pos.headingRadians)}rad)`,
                         borderRadius: "50%",
                         display: "flex",
                         justifyContent: "flex-end",

From 709a8f6eb6a91502722031c526ba2f4c6cdab54e Mon Sep 17 00:00:00 2001
From: Jason Antwi-Appah <hey@jasonaa.me>
Date: Thu, 24 Apr 2025 01:57:26 -0500
Subject: [PATCH 47/92] Fix bugs in undo/redo hook

---
 src/client/editor/hooks.ts | 65 ++++++++++++++++++++++----------------
 1 file changed, 37 insertions(+), 28 deletions(-)

diff --git a/src/client/editor/hooks.ts b/src/client/editor/hooks.ts
index 8cc456ea..5556a7c0 100644
--- a/src/client/editor/hooks.ts
+++ b/src/client/editor/hooks.ts
@@ -97,55 +97,65 @@ export function usePreventExitWithUnsavedChanges() {
  */
 export function useStateWithTrackedHistory<T>(initialValue: T) {
     type Action =
-        | { type: "set"; value: T }
-        | { type: "undo" }
-        | { type: "redo" }
-        | { type: "replace"; value: T };
+    | { type: "set"; value: T }
+    | { type: "undo" }
+    | { type: "redo" }
+    | { type: "replace"; value: T };
     type State = {
-        value: T;
         history: T[];
         index: number;
     };
     const [state, dispatch] = useReducer(
-        (state: State, action: Action) => {
+        (state: State, action: Action): State => {
             switch (action.type) {
-                case "set":
+                case "set": {
+                    // Truncate history after the current index if we've undone previously
+                    const newHistory = state.history.slice(0, state.index + 1);
+                    newHistory.push(action.value);
                     return {
-                        ...state,
-                        value: action.value,
-                        history: [...state.history, state.value],
-                        index: state.history.length,
+                        history: newHistory,
+                        index: newHistory.length - 1,
                     };
-                case "undo":
-                    if (state.index === 0) return state;
+                }
+                case "undo": {
+                    if (state.index === 0) return state; // Cannot undo past the initial state
                     return {
                         ...state,
-                        value: state.history[state.index - 1],
                         index: state.index - 1,
                     };
-                case "redo":
-                    if (state.index === state.history.length) return state;
+                }
+                case "redo": {
+                     // Cannot redo if already at the latest state
+                    if (state.index === state.history.length - 1) return state;
                     return {
                         ...state,
-                        value: state.history[state.index + 1],
                         index: state.index + 1,
                     };
-                case "replace":
+                }
+                case "replace": {
+                    // Reset history with the new value
                     return {
-                        ...state,
-                        value: action.value,
-                        history: [],
+                        history: [action.value],
                         index: 0,
                     };
+                }
             }
         },
+        // Initial state: history contains only the initial value at index 0
         {
-            value: initialValue,
-            history: [],
+            history: [initialValue],
             index: 0,
         },
     );
 
+    const value = useMemo(() => state.history[state.index], [state.history, state.index]);
+    const setValue = useCallback((newValue: T) => {
+        // Avoid adding identical consecutive states to history
+        if (newValue !== value) {
+             dispatch({ type: "set", value: newValue });
+        }
+    }, [value]); // Add value dependency to check against current value
+
     const undo = useCallback(() => dispatch({ type: "undo" }), []);
     const redo = useCallback(() => dispatch({ type: "redo" }), []);
     const canUndo = useMemo(() => state.index > 0, [state.index]);
@@ -153,14 +163,13 @@ export function useStateWithTrackedHistory<T>(initialValue: T) {
         () => state.index < state.history.length - 1,
         [state.index, state.history.length],
     );
-
-    const setValue = useCallback((value: T) => {
-        dispatch({ type: "set", value });
+     // Add a function to replace the state without affecting history tracking logic like 'set' does
+    const replaceState = useCallback((newValue: T) => {
+        dispatch({ type: "replace", value: newValue });
     }, []);
 
-    const { value } = state;
 
-    return { value, setValue, canUndo, canRedo, undo, redo };
+    return { value, setValue, canUndo, canRedo, undo, redo, replaceState }; // Expose replaceState if needed
 }
 
 export function usePlayHead(endDurationMs: number, startMs = 0) {

From a5dcbbdd6dd3a9410471268e740a200807c4a42d Mon Sep 17 00:00:00 2001
From: Jason Antwi-Appah <hey@jasonaa.me>
Date: Thu, 24 Apr 2025 01:58:13 -0500
Subject: [PATCH 48/92] Wrap timeline event in context menu

---
 src/client/editor/timeline.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/client/editor/timeline.tsx b/src/client/editor/timeline.tsx
index ba1b064d..2d3573eb 100644
--- a/src/client/editor/timeline.tsx
+++ b/src/client/editor/timeline.tsx
@@ -1,4 +1,4 @@
-import { Card, SectionCard, Button, Text } from "@blueprintjs/core";
+import { Card, SectionCard, Button, Text, ContextMenu, Menu, MenuItem } from "@blueprintjs/core";
 import interact from "interactjs";
 import { useDragControls, Reorder } from "motion/react";
 import { forwardRef, PropsWithChildren, useEffect, useRef } from "react";
@@ -67,6 +67,13 @@ export function TimelineEvent(props: {
     // TODO: add context menu for deleting events and adding a new event before and after this one
 
     return (
+        <ContextMenu content={
+            <Menu>
+                {/* TODO: add wait, spin before/after current event */}
+                <MenuItem text="Delete..." intent="danger" />
+            </Menu>
+        }>
+            
         <Card
             ref={ref}
             style={{
@@ -111,6 +118,7 @@ export function TimelineEvent(props: {
                 </span>
             )}
         </Card>
+        </ContextMenu>
     );
 }
 

From 6d904d79b42885f11ebc5d0edbcbcd165f2d0b4f Mon Sep 17 00:00:00 2001
From: Jason Antwi-Appah <hey@jasonaa.me>
Date: Thu, 24 Apr 2025 01:59:08 -0500
Subject: [PATCH 49/92] Prevent default undo on ctrl/cmd+z/y

---
 src/client/editor/editor.tsx | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/client/editor/editor.tsx b/src/client/editor/editor.tsx
index b4f97f35..22269848 100644
--- a/src/client/editor/editor.tsx
+++ b/src/client/editor/editor.tsx
@@ -1,4 +1,3 @@
-// TODO: support selecting active layer for point addition
 // TODO: how to add wait events?
 
 import { useMemo } from "react";
@@ -36,7 +35,6 @@ import {
 } from "./timeline";
 import { Midpoint, SplinePointType } from "../../common/spline";
 
-// TODO: ui for adding/removing audio - remove current hotkey as this was mainly for testing
 
 export function Editor() {
     const {
@@ -111,14 +109,20 @@ export function Editor() {
                 group: "Edit",
                 global: true,
                 label: "Undo",
-                onKeyDown: undo,
+                onKeyDown: (e) => {
+                    e.preventDefault();
+                    undo();
+                },
             },
             {
                 combo: "mod+y",
                 group: "Edit",
                 global: true,
                 label: "Redo",
-                onKeyDown: redo,
+                onKeyDown: (e) => {
+                    e.preventDefault();
+                    redo();
+                },
             },
             {
                 combo: "space",

From e76edc242cbf94af1eba21fd10ddc4fb5dabb56a Mon Sep 17 00:00:00 2001
From: Jason Antwi-Appah <hey@jasonaa.me>
Date: Thu, 24 Apr 2025 02:00:37 -0500
Subject: [PATCH 50/92] Format

---
 src/client/debug/simulator.tsx      |  11 ++-
 src/client/editor/editor.tsx        |  57 ++++++-------
 src/client/editor/hooks.ts          |  33 ++++---
 src/client/editor/showfile-state.ts |   2 +-
 src/client/editor/timeline.tsx      | 128 +++++++++++++++-------------
 5 files changed, 125 insertions(+), 106 deletions(-)

diff --git a/src/client/debug/simulator.tsx b/src/client/debug/simulator.tsx
index 9c26edb1..77d9157b 100644
--- a/src/client/debug/simulator.tsx
+++ b/src/client/debug/simulator.tsx
@@ -353,11 +353,16 @@ function LogEntry(props: { message: SimulatorUpdateMessage; ts: Date }) {
  * @param props - the robot position and id
  * @returns the robot icon scaled to the board
  */
-export function Robot({pos, robotId, onTopOfRobots, style}: {
+export function Robot({
+    pos,
+    robotId,
+    onTopOfRobots,
+    style,
+}: {
     pos: SimulatedRobotLocation;
     robotId: string;
     onTopOfRobots: string[];
-    style?: CSSProperties
+    style?: CSSProperties;
 }) {
     return (
         <div
@@ -366,7 +371,7 @@ export function Robot({pos, robotId, onTopOfRobots, style}: {
                 position: "absolute",
                 left: `${pos.position.x * tileSize - 0.25 * tileSize}px`,
                 bottom: `${pos.position.y * tileSize - 0.25 * tileSize}px`,
-                ...style
+                ...style,
             }}
         >
             <Tooltip content={`${robotId}: ${JSON.stringify(pos)}`}>
diff --git a/src/client/editor/editor.tsx b/src/client/editor/editor.tsx
index 22269848..74a65ee5 100644
--- a/src/client/editor/editor.tsx
+++ b/src/client/editor/editor.tsx
@@ -35,7 +35,6 @@ import {
 } from "./timeline";
 import { Midpoint, SplinePointType } from "../../common/spline";
 
-
 export function Editor() {
     const {
         show,
@@ -73,7 +72,7 @@ export function Editor() {
         addPointToSelectedLayer,
         setSelectedLayerIndex,
         selectedLayerIndex,
-        removeAudio
+        removeAudio,
     } = useShowfile();
 
     // TODO: fix viewport height / timeline height
@@ -133,15 +132,9 @@ export function Editor() {
                     e.preventDefault();
                     togglePlaying();
                 },
-            }
-        ],
-        [
-            redo,
-            undo,
-            saveShowfile,
-            openShowfile,
-            togglePlaying,
+            },
         ],
+        [redo, undo, saveShowfile, openShowfile, togglePlaying],
     );
 
     const { handleKeyDown, handleKeyUp } = useHotkeys(hotkeys);
@@ -241,26 +234,30 @@ export function Editor() {
                     ></div>
                 )}
                 {show.timeline.map((layer, index) => (
-                    <SplineEditor
-                        key={`spline-editor-${index}`}
-                        layer={layer}
-                        onStartPointMove={(coords) =>
-                            handleStartPointMove(index, coords)
-                        }
-                        onPointMove={(pointIdx, coords) =>
-                            handlePointMove(index, pointIdx, coords)
-                        }
-                        onControlPointMove={(pointIdx, coords) =>
-                            handleControlPointMove(index, pointIdx, coords)
-                        }
-                        onDeleteStartPoint={() => handleDeleteStartPoint(index)}
-                        onDeletePoint={(pointIdx) =>
-                            handleDeletePoint(index, pointIdx)
-                        }
-                        onSwitchPointType={(pointIdx, newType) =>
-                            handleSwitchPointType(index, pointIdx, newType)
-                        }
-                    />
+                    <>
+                        <SplineEditor
+                            key={`spline-editor-${index}`}
+                            layer={layer}
+                            onStartPointMove={(coords) =>
+                                handleStartPointMove(index, coords)
+                            }
+                            onPointMove={(pointIdx, coords) =>
+                                handlePointMove(index, pointIdx, coords)
+                            }
+                            onControlPointMove={(pointIdx, coords) =>
+                                handleControlPointMove(index, pointIdx, coords)
+                            }
+                            onDeleteStartPoint={() =>
+                                handleDeleteStartPoint(index)
+                            }
+                            onDeletePoint={(pointIdx) =>
+                                handleDeletePoint(index, pointIdx)
+                            }
+                            onSwitchPointType={(pointIdx, newType) =>
+                                handleSwitchPointType(index, pointIdx, newType)
+                            }
+                        />
+                    </>
                 ))}
             </RobotGrid>
             <Section
diff --git a/src/client/editor/hooks.ts b/src/client/editor/hooks.ts
index 5556a7c0..ab5e1e65 100644
--- a/src/client/editor/hooks.ts
+++ b/src/client/editor/hooks.ts
@@ -97,10 +97,10 @@ export function usePreventExitWithUnsavedChanges() {
  */
 export function useStateWithTrackedHistory<T>(initialValue: T) {
     type Action =
-    | { type: "set"; value: T }
-    | { type: "undo" }
-    | { type: "redo" }
-    | { type: "replace"; value: T };
+        | { type: "set"; value: T }
+        | { type: "undo" }
+        | { type: "redo" }
+        | { type: "replace"; value: T };
     type State = {
         history: T[];
         index: number;
@@ -125,7 +125,7 @@ export function useStateWithTrackedHistory<T>(initialValue: T) {
                     };
                 }
                 case "redo": {
-                     // Cannot redo if already at the latest state
+                    // Cannot redo if already at the latest state
                     if (state.index === state.history.length - 1) return state;
                     return {
                         ...state,
@@ -148,13 +148,19 @@ export function useStateWithTrackedHistory<T>(initialValue: T) {
         },
     );
 
-    const value = useMemo(() => state.history[state.index], [state.history, state.index]);
-    const setValue = useCallback((newValue: T) => {
-        // Avoid adding identical consecutive states to history
-        if (newValue !== value) {
-             dispatch({ type: "set", value: newValue });
-        }
-    }, [value]); // Add value dependency to check against current value
+    const value = useMemo(
+        () => state.history[state.index],
+        [state.history, state.index],
+    );
+    const setValue = useCallback(
+        (newValue: T) => {
+            // Avoid adding identical consecutive states to history
+            if (newValue !== value) {
+                dispatch({ type: "set", value: newValue });
+            }
+        },
+        [value],
+    ); // Add value dependency to check against current value
 
     const undo = useCallback(() => dispatch({ type: "undo" }), []);
     const redo = useCallback(() => dispatch({ type: "redo" }), []);
@@ -163,12 +169,11 @@ export function useStateWithTrackedHistory<T>(initialValue: T) {
         () => state.index < state.history.length - 1,
         [state.index, state.history.length],
     );
-     // Add a function to replace the state without affecting history tracking logic like 'set' does
+    // Add a function to replace the state without affecting history tracking logic like 'set' does
     const replaceState = useCallback((newValue: T) => {
         dispatch({ type: "replace", value: newValue });
     }, []);
 
-
     return { value, setValue, canUndo, canRedo, undo, redo, replaceState }; // Expose replaceState if needed
 }
 
diff --git a/src/client/editor/showfile-state.ts b/src/client/editor/showfile-state.ts
index 66801317..3eb31087 100644
--- a/src/client/editor/showfile-state.ts
+++ b/src/client/editor/showfile-state.ts
@@ -576,6 +576,6 @@ export function useShowfile() {
         addPointToSelectedLayer,
         setSelectedLayerIndex,
         selectedLayerIndex,
-        removeAudio
+        removeAudio,
     };
 }
diff --git a/src/client/editor/timeline.tsx b/src/client/editor/timeline.tsx
index 2d3573eb..f0629c2e 100644
--- a/src/client/editor/timeline.tsx
+++ b/src/client/editor/timeline.tsx
@@ -1,4 +1,12 @@
-import { Card, SectionCard, Button, Text, ContextMenu, Menu, MenuItem } from "@blueprintjs/core";
+import {
+    Card,
+    SectionCard,
+    Button,
+    Text,
+    ContextMenu,
+    Menu,
+    MenuItem,
+} from "@blueprintjs/core";
 import interact from "interactjs";
 import { useDragControls, Reorder } from "motion/react";
 import { forwardRef, PropsWithChildren, useEffect, useRef } from "react";
@@ -67,57 +75,58 @@ export function TimelineEvent(props: {
     // TODO: add context menu for deleting events and adding a new event before and after this one
 
     return (
-        <ContextMenu content={
-            <Menu>
-                {/* TODO: add wait, spin before/after current event */}
-                <MenuItem text="Delete..." intent="danger" />
-            </Menu>
-        }>
-            
-        <Card
-            ref={ref}
-            style={{
-                width: millisToPixels(event.durationMs),
-                backgroundColor: EVENT_TYPE_TO_COLOR[event.type],
-                color: "white",
-                boxSizing: "border-box",
-                display: "flex",
-                justifyContent: "space-between",
-                touchAction: "none",
-                overflow: "hidden",
-            }}
-            compact
+        <ContextMenu
+            content={
+                <Menu>
+                    {/* TODO: add wait, spin before/after current event */}
+                    <MenuItem text="Delete..." intent="danger" />
+                </Menu>
+            }
         >
-            <span style={{ cursor: "default", userSelect: "none" }}>
-                {event.type}
-            </span>
-            {onPointerDownOnDragHandle && (
-                <span
-                    style={{
-                        cursor: "grab",
-                    }}
-                    onPointerDown={onPointerDownOnDragHandle}
-                >
-                    <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        viewBox="0 0 39 39"
-                        width="16"
-                        height="16"
-                        fill="#BBB"
-                    >
-                        <path d="M 5 0 C 7.761 0 10 2.239 10 5 C 10 7.761 7.761 10 5 10 C 2.239 10 0 7.761 0 5 C 0 2.239 2.239 0 5 0 Z"></path>
-                        <path d="M 19 0 C 21.761 0 24 2.239 24 5 C 24 7.761 21.761 10 19 10 C 16.239 10 14 7.761 14 5 C 14 2.239 16.239 0 19 0 Z"></path>
-                        <path d="M 33 0 C 35.761 0 38 2.239 38 5 C 38 7.761 35.761 10 33 10 C 30.239 10 28 7.761 28 5 C 28 2.239 30.239 0 33 0 Z"></path>
-                        <path d="M 33 14 C 35.761 14 38 16.239 38 19 C 38 21.761 35.761 24 33 24 C 30.239 24 28 21.761 28 19 C 28 16.239 30.239 14 33 14 Z"></path>
-                        <path d="M 19 14 C 21.761 14 24 16.239 24 19 C 24 21.761 21.761 24 19 24 C 16.239 24 14 21.761 14 19 C 14 16.239 16.239 14 19 14 Z"></path>
-                        <path d="M 5 14 C 7.761 14 10 16.239 10 19 C 10 21.761 7.761 24 5 24 C 2.239 24 0 21.761 0 19 C 0 16.239 2.239 14 5 14 Z"></path>
-                        <path d="M 5 28 C 7.761 28 10 30.239 10 33 C 10 35.761 7.761 38 5 38 C 2.239 38 0 35.761 0 33 C 0 30.239 2.239 28 5 28 Z"></path>
-                        <path d="M 19 28 C 21.761 28 24 30.239 24 33 C 24 35.761 21.761 38 19 38 C 16.239 38 14 35.761 14 33 C 14 30.239 16.239 28 19 28 Z"></path>
-                        <path d="M 33 28 C 35.761 28 38 30.239 38 33 C 38 35.761 35.761 38 33 38 C 30.239 38 28 35.761 28 33 C 28 30.239 30.239 28 33 28 Z"></path>
-                    </svg>
+            <Card
+                ref={ref}
+                style={{
+                    width: millisToPixels(event.durationMs),
+                    backgroundColor: EVENT_TYPE_TO_COLOR[event.type],
+                    color: "white",
+                    boxSizing: "border-box",
+                    display: "flex",
+                    justifyContent: "space-between",
+                    touchAction: "none",
+                    overflow: "hidden",
+                }}
+                compact
+            >
+                <span style={{ cursor: "default", userSelect: "none" }}>
+                    {event.type}
                 </span>
-            )}
-        </Card>
+                {onPointerDownOnDragHandle && (
+                    <span
+                        style={{
+                            cursor: "grab",
+                        }}
+                        onPointerDown={onPointerDownOnDragHandle}
+                    >
+                        <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            viewBox="0 0 39 39"
+                            width="16"
+                            height="16"
+                            fill="#BBB"
+                        >
+                            <path d="M 5 0 C 7.761 0 10 2.239 10 5 C 10 7.761 7.761 10 5 10 C 2.239 10 0 7.761 0 5 C 0 2.239 2.239 0 5 0 Z"></path>
+                            <path d="M 19 0 C 21.761 0 24 2.239 24 5 C 24 7.761 21.761 10 19 10 C 16.239 10 14 7.761 14 5 C 14 2.239 16.239 0 19 0 Z"></path>
+                            <path d="M 33 0 C 35.761 0 38 2.239 38 5 C 38 7.761 35.761 10 33 10 C 30.239 10 28 7.761 28 5 C 28 2.239 30.239 0 33 0 Z"></path>
+                            <path d="M 33 14 C 35.761 14 38 16.239 38 19 C 38 21.761 35.761 24 33 24 C 30.239 24 28 21.761 28 19 C 28 16.239 30.239 14 33 14 Z"></path>
+                            <path d="M 19 14 C 21.761 14 24 16.239 24 19 C 24 21.761 21.761 24 19 24 C 16.239 24 14 21.761 14 19 C 14 16.239 16.239 14 19 14 Z"></path>
+                            <path d="M 5 14 C 7.761 14 10 16.239 10 19 C 10 21.761 7.761 24 5 24 C 2.239 24 0 21.761 0 19 C 0 16.239 2.239 14 5 14 Z"></path>
+                            <path d="M 5 28 C 7.761 28 10 30.239 10 33 C 10 35.761 7.761 38 5 38 C 2.239 38 0 35.761 0 33 C 0 30.239 2.239 28 5 28 Z"></path>
+                            <path d="M 19 28 C 21.761 28 24 30.239 24 33 C 24 35.761 21.761 38 19 38 C 16.239 38 14 35.761 14 33 C 14 30.239 16.239 28 19 28 Z"></path>
+                            <path d="M 33 28 C 35.761 28 38 30.239 38 33 C 38 35.761 35.761 38 33 38 C 30.239 38 28 35.761 28 33 C 28 30.239 30.239 28 33 28 Z"></path>
+                        </svg>
+                    </span>
+                )}
+            </Card>
         </ContextMenu>
     );
 }
@@ -145,13 +154,16 @@ export const TimelineLayer = forwardRef<
             }}
         >
             <span>
-                <Text style={{ fontWeight: "bold" }}>{title} {onActive && (
-                <Button
-                    icon="asterisk"
-                    variant="minimal"
-                    onClick={onActive}
-                />
-            )}</Text>
+                <Text style={{ fontWeight: "bold" }}>
+                    {title}{" "}
+                    {onActive && (
+                        <Button
+                            icon="asterisk"
+                            variant="minimal"
+                            onClick={onActive}
+                        />
+                    )}
+                </Text>
                 {}
                 {onDelete && (
                     <Button
@@ -162,7 +174,7 @@ export const TimelineLayer = forwardRef<
                     />
                 )}
             </span>
-            
+
             {children}
         </SectionCard>
     );

From 1256f1ea04ae0f0d19424082696c5a71d8f76926 Mon Sep 17 00:00:00 2001
From: Jason Antwi-Appah <hey@jasonaa.me>
Date: Thu, 24 Apr 2025 02:33:06 -0500
Subject: [PATCH 51/92] Forward robot ref

---
 src/client/debug/simulator.tsx | 21 +++++++++++++--------
 1 file changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/client/debug/simulator.tsx b/src/client/debug/simulator.tsx
index 77d9157b..e60a51d1 100644
--- a/src/client/debug/simulator.tsx
+++ b/src/client/debug/simulator.tsx
@@ -1,6 +1,7 @@
 import { Card, Button, H1, Tooltip, Collapse } from "@blueprintjs/core";
 import {
     CSSProperties,
+    forwardRef,
     type PropsWithChildren,
     useEffect,
     useReducer,
@@ -353,19 +354,23 @@ function LogEntry(props: { message: SimulatorUpdateMessage; ts: Date }) {
  * @param props - the robot position and id
  * @returns the robot icon scaled to the board
  */
-export function Robot({
+export const Robot = forwardRef<
+    HTMLDivElement,
+    {
+        pos: SimulatedRobotLocation;
+        robotId: string;
+        onTopOfRobots: string[];
+        style?: CSSProperties;
+    }
+>(function Robot({
     pos,
     robotId,
     onTopOfRobots,
     style,
-}: {
-    pos: SimulatedRobotLocation;
-    robotId: string;
-    onTopOfRobots: string[];
-    style?: CSSProperties;
-}) {
+}, ref) {
     return (
         <div
+            ref={ref}
             className="robot"
             style={{
                 position: "absolute",
@@ -401,4 +406,4 @@ export function Robot({
             </Tooltip>
         </div>
     );
-}
+});

From 521df29816c9ceeb04611590d180e9f33912dfc2 Mon Sep 17 00:00:00 2001
From: Jason Antwi-Appah <hey@jasonaa.me>
Date: Thu, 24 Apr 2025 02:34:06 -0500
Subject: [PATCH 52/92] Begin robot rendering, add showfile dump to UI

---
 src/client/editor/editor.tsx | 94 ++++++++++++++++++++++++++++++++++--
 1 file changed, 89 insertions(+), 5 deletions(-)

diff --git a/src/client/editor/editor.tsx b/src/client/editor/editor.tsx
index 74a65ee5..a372a4e8 100644
--- a/src/client/editor/editor.tsx
+++ b/src/client/editor/editor.tsx
@@ -14,19 +14,19 @@ import {
     SegmentedControl,
     Divider,
     NumericInput,
+    Pre,
 } from "@blueprintjs/core";
-import { RobotGrid, robotSize } from "../debug/simulator";
+import { RobotGrid, robotSize, Robot } from "../debug/simulator";
 import {
     GridCursorMode,
     millisToPixels,
     NonStartPointEvent,
     RULER_TICK_GAP_PX,
     TimelineDurationUpdateMode,
+    TimelineEvents,
+    TimelineEventTypes,
 } from "../../common/show";
 import { SplineEditor } from "./spline-editor";
-import { motion, useTransform } from "motion/react";
-import { useShowfile } from "./showfile-state";
-import { Reorder } from "motion/react";
 import {
     Ruler,
     TimelineLayer,
@@ -34,6 +34,13 @@ import {
     ReorderableTimelineEvent,
 } from "./timeline";
 import { Midpoint, SplinePointType } from "../../common/spline";
+import {
+    motion,
+    MotionValue,
+    useTransform,
+} from "motion/react";
+import { useShowfile } from "./showfile-state";
+import { Reorder } from "motion/react";
 
 export function Editor() {
     const {
@@ -208,7 +215,13 @@ export function Editor() {
                     )}
                 </ButtonGroup>
             </Card>
-            {/* TODO: render robots */}
+            <div style={{display: "flex", flexDirection: "row"}}>
+            <Section
+                title="Grid"
+                compact
+                >
+
+                
             <RobotGrid robotState={{}}>
                 {gridCursorMode === GridCursorMode.Pen && (
                     <div
@@ -257,9 +270,20 @@ export function Editor() {
                                 handleSwitchPointType(index, pointIdx, newType)
                             }
                         />
+                        <AnimatableRobot
+                            robotId={`robot-${index}`}
+                            timestamp={currentTimestamp}
+                            layer={layer}
+                        />
                     </>
                 ))}
             </RobotGrid>
+            </Section>
+            <Section title="Debug" compact collapsible>
+                <Pre style={{height: "60vh", overflow: "scroll"}}>{JSON.stringify({...show, audio: show.audio ? {data: "[binary data]", mimeType: show.audio.mimeType} : undefined}, null, 2)}</Pre>
+
+            </Section>
+            </div>
             <Section
                 title="Timeline"
                 compact
@@ -437,3 +461,63 @@ export function Editor() {
         </div>
     );
 }
+
+
+const addTimestampToTimelineEvents = (events: TimelineEvents[]) => {
+    let endTimestamp = 0;
+
+    const eventsWithTs = events.map((e) => {
+        endTimestamp += e.durationMs;
+
+        return {
+            ...e,
+            endTimestamp,
+        };
+    });
+
+    return eventsWithTs;
+};
+
+const MotionRobot = motion.create(Robot);
+
+function AnimatableRobot({
+    robotId,
+    layer: {startPoint, remainingEvents},
+    timestamp,
+}: {
+    robotId: string;
+    layer: TimelineLayer;
+    timestamp: MotionValue<number>;
+}) {
+    const allEventsWithTimestamp = addTimestampToTimelineEvents([startPoint, ...remainingEvents].filter(e => e.type !== TimelineEventTypes.WaitEvent));
+    const pairedEvents = arrayToNTuples(allEventsWithTimestamp, 2);
+
+    // const offsetPath = useTransform(timestamp, pairedEvents.map(([e1]) => e1.endTimestamp));
+    return (
+        <MotionRobot
+            pos={{
+                position: {
+                    x: 0,
+                    y: 0,
+                },
+                headingRadians: 0,
+            }}
+            onTopOfRobots={[]}
+            robotId={robotId}
+        />
+    );
+}
+
+
+/*
+ * Splits an array into tuples of max length n.
+ */
+function arrayToNTuples<T>(array: T[], n: number): T[][] {
+    return array.reduce((acc, item, index) => {
+        if (index % n === 0) {
+            acc.push([]);
+        }
+        acc[acc.length - 1].push(item);
+        return acc;
+    }, [] as T[][]);
+}

From 0cb5f811a3872a9d733d3eed326585c2cb93d3f3 Mon Sep 17 00:00:00 2001
From: Jason Antwi-Appah <hey@jasonaa.me>
Date: Thu, 24 Apr 2025 07:24:41 -0500
Subject: [PATCH 53/92] Rename type, nuke robot rendering stuff

---
 src/client/editor/editor.tsx        | 38 +++--------------------------
 src/client/editor/showfile-state.ts |  4 +--
 src/client/editor/spline-editor.tsx |  4 +--
 src/common/show.ts                  |  8 +++---
 4 files changed, 11 insertions(+), 43 deletions(-)

diff --git a/src/client/editor/editor.tsx b/src/client/editor/editor.tsx
index a372a4e8..acc111bc 100644
--- a/src/client/editor/editor.tsx
+++ b/src/client/editor/editor.tsx
@@ -270,17 +270,13 @@ export function Editor() {
                                 handleSwitchPointType(index, pointIdx, newType)
                             }
                         />
-                        <AnimatableRobot
-                            robotId={`robot-${index}`}
-                            timestamp={currentTimestamp}
-                            layer={layer}
-                        />
+                        {/* TODO: render bots */}
                     </>
                 ))}
             </RobotGrid>
             </Section>
-            <Section title="Debug" compact collapsible>
-                <Pre style={{height: "60vh", overflow: "scroll"}}>{JSON.stringify({...show, audio: show.audio ? {data: "[binary data]", mimeType: show.audio.mimeType} : undefined}, null, 2)}</Pre>
+            <Section title="Debug" compact collapsible >
+                <Pre style={{height: "52.5vh", overflow: "scroll"}}>{JSON.stringify({...show, audio: show.audio ? {data: "[binary data]", mimeType: show.audio.mimeType} : undefined}, null, 2)}</Pre>
 
             </Section>
             </div>
@@ -478,35 +474,7 @@ const addTimestampToTimelineEvents = (events: TimelineEvents[]) => {
     return eventsWithTs;
 };
 
-const MotionRobot = motion.create(Robot);
 
-function AnimatableRobot({
-    robotId,
-    layer: {startPoint, remainingEvents},
-    timestamp,
-}: {
-    robotId: string;
-    layer: TimelineLayer;
-    timestamp: MotionValue<number>;
-}) {
-    const allEventsWithTimestamp = addTimestampToTimelineEvents([startPoint, ...remainingEvents].filter(e => e.type !== TimelineEventTypes.WaitEvent));
-    const pairedEvents = arrayToNTuples(allEventsWithTimestamp, 2);
-
-    // const offsetPath = useTransform(timestamp, pairedEvents.map(([e1]) => e1.endTimestamp));
-    return (
-        <MotionRobot
-            pos={{
-                position: {
-                    x: 0,
-                    y: 0,
-                },
-                headingRadians: 0,
-            }}
-            onTopOfRobots={[]}
-            robotId={robotId}
-        />
-    );
-}
 
 
 /*
diff --git a/src/client/editor/showfile-state.ts b/src/client/editor/showfile-state.ts
index 3eb31087..cad15c89 100644
--- a/src/client/editor/showfile-state.ts
+++ b/src/client/editor/showfile-state.ts
@@ -12,7 +12,7 @@ import {
     StartPointEvent,
     TimelineEventTypes,
     GoToPointEvent,
-    TimelineLayer,
+    TimelineLayerType,
     NonStartPointEvent,
     TimelineDurationUpdateMode,
     CHESSBOTS_SHOWFILE_MIME_TYPE,
@@ -351,7 +351,7 @@ export function useShowfile() {
     );
 
     const addRobot = useCallback(() => {
-        const newLayer: TimelineLayer = {
+        const newLayer: TimelineLayerType = {
             startPoint: {
                 id: crypto.randomUUID(),
                 type: TimelineEventTypes.StartPointEvent,
diff --git a/src/client/editor/spline-editor.tsx b/src/client/editor/spline-editor.tsx
index 826d39a5..0fc5ae71 100644
--- a/src/client/editor/spline-editor.tsx
+++ b/src/client/editor/spline-editor.tsx
@@ -6,13 +6,13 @@ import {
 } from "../../common/spline";
 import { SplinePoint, SplineControlPoint } from "./points";
 import {
-    type TimelineLayer,
+    type TimelineLayerType,
     timelineLayerToSpline,
     TimelineEventTypes,
 } from "../../common/show";
 
 interface SplineEditorProps {
-    layer: TimelineLayer;
+    layer: TimelineLayerType;
     onStartPointMove: (newCoords: Coords) => void;
     onPointMove: (pointIndex: number, newCoords: Coords) => void;
     onControlPointMove: (pointIndex: number, newCoords: Coords) => void;
diff --git a/src/common/show.ts b/src/common/show.ts
index 9c5045b0..f8e9fdec 100644
--- a/src/common/show.ts
+++ b/src/common/show.ts
@@ -53,7 +53,7 @@ const TimelineLayerSchema = RuntypesRecord({
     startPoint: StartPointEventSchema,
     remainingEvents: Array(NonStartPointEventSchema),
 });
-export type TimelineLayer = Static<typeof TimelineLayerSchema>;
+export type TimelineLayerType = Static<typeof TimelineLayerSchema>;
 export type TimelineEvents = GoToPointEvent | WaitEvent | StartPointEvent;
 
 /**
@@ -84,7 +84,7 @@ export type Showfile = Static<typeof ShowfileSchema>;
  * @param layer - the timeline layer to convert.
  * @returns - the spline representation of the timeline layer.
  */
-export function timelineLayerToSpline(layer: TimelineLayer): Spline {
+export function timelineLayerToSpline(layer: TimelineLayerType): Spline {
     const { startPoint, remainingEvents } = layer;
     return {
         start: startPoint.target,
@@ -111,8 +111,8 @@ export function createNewShowfile(): Showfile {
                     target: {
                         type: SplinePointType.StartPoint,
                         point: {
-                            x: 0,
-                            y: 70,
+                            x: 20,
+                            y: 140,
                         },
                     },
                     durationMs: 7500,

From 9b53a57524adc936ba89c99c2afd61657f709170 Mon Sep 17 00:00:00 2001
From: Jason Antwi-Appah <hey@jasonaa.me>
Date: Thu, 24 Apr 2025 18:23:42 -0500
Subject: [PATCH 54/92] Scuffed/broken implementation of robot motion

---
 src/client/editor/editor.tsx        | 253 +++++++++++++++++-----------
 src/client/editor/motion-robot.tsx  |  90 ++++++++++
 src/client/editor/showfile-state.ts |  25 ++-
 src/common/getRobotStateAtTime.ts   | 163 ++++++++++++++++++
 src/common/spline.ts                |  39 +++++
 5 files changed, 466 insertions(+), 104 deletions(-)
 create mode 100644 src/client/editor/motion-robot.tsx
 create mode 100644 src/common/getRobotStateAtTime.ts

diff --git a/src/client/editor/editor.tsx b/src/client/editor/editor.tsx
index acc111bc..6fa7a86e 100644
--- a/src/client/editor/editor.tsx
+++ b/src/client/editor/editor.tsx
@@ -16,17 +16,14 @@ import {
     NumericInput,
     Pre,
 } from "@blueprintjs/core";
-import { RobotGrid, robotSize, Robot } from "../debug/simulator";
+import { RobotGrid, robotSize } from "../debug/simulator";
 import {
     GridCursorMode,
     millisToPixels,
     NonStartPointEvent,
     RULER_TICK_GAP_PX,
     TimelineDurationUpdateMode,
-    TimelineEvents,
-    TimelineEventTypes,
 } from "../../common/show";
-import { SplineEditor } from "./spline-editor";
 import {
     Ruler,
     TimelineLayer,
@@ -38,9 +35,69 @@ import {
     motion,
     MotionValue,
     useTransform,
+    useAnimate,
+    useMotionValueEvent,
 } from "motion/react";
 import { useShowfile } from "./showfile-state";
 import { Reorder } from "motion/react";
+import { getRobotStateAtTime } from "../../common/getRobotStateAtTime";
+import { MotionRobot } from "./motion-robot";
+import { TimelineLayerType } from "../../common/show";
+import { SplineEditor } from "./spline-editor";
+
+// Helper component to manage animation for a single robot
+function AnimatedRobotRenderer({
+    layer,
+    timestamp,
+    robotId,
+}: {
+    layer: TimelineLayerType;
+    timestamp: MotionValue<number>;
+    robotId: string;
+}) {
+    const [scope, animate] = useAnimate();
+
+    // Get initial state to avoid undefined on first render
+    const initialState = getRobotStateAtTime(layer, timestamp.get());
+
+    useMotionValueEvent(timestamp, "change", (latestTimestamp) => {
+        const { position, headingRadians } = getRobotStateAtTime(
+            layer,
+            latestTimestamp,
+        );
+        const targetX = position.x - robotSize / 2;
+        const targetY = position.y - robotSize / 2;
+        const targetRotate = headingRadians * (180 / Math.PI);
+
+        // Animate using transform
+        if (scope.current) {
+            animate(
+                scope.current,
+                {
+                    transform: `translateX(${targetX}px) translateY(${targetY}px) rotate(${targetRotate}deg)`,
+                },
+                { duration: 0, ease: "linear" },
+            );
+        }
+    });
+
+    // Calculate initial transform string
+    const initialX = initialState.position.x - robotSize / 2;
+    const initialY = initialState.position.y - robotSize / 2;
+    const initialRotate = initialState.headingRadians * (180 / Math.PI);
+    const initialTransform = `translateX(${initialX}px) translateY(${initialY}px) rotate(${initialRotate}deg)`;
+
+    return (
+        <MotionRobot
+            ref={scope}
+            robotId={robotId}
+            // Set initial position via style prop using transform
+            style={{
+                transform: initialTransform,
+            }}
+        />
+    );
+}
 
 export function Editor() {
     const {
@@ -215,70 +272,100 @@ export function Editor() {
                     )}
                 </ButtonGroup>
             </Card>
-            <div style={{display: "flex", flexDirection: "row"}}>
-            <Section
-                title="Grid"
-                compact
-                >
-
-                
-            <RobotGrid robotState={{}}>
-                {gridCursorMode === GridCursorMode.Pen && (
-                    <div
-                        style={{
-                            position: "absolute",
-                            left: 0,
-                            top: 0,
-                            width: "100%",
-                            height: "100%",
-                            cursor: "crosshair",
-                        }}
-                        onClick={(e) => {
-                            const { x: mouseX, y: mouseY } = e.nativeEvent;
-                            const { left: gridOriginX, top: gridOriginY } =
-                                e.currentTarget.getBoundingClientRect();
-                            const x = mouseX - gridOriginX;
-                            const y = mouseY - gridOriginY;
-                            addPointToSelectedLayer(
-                                x + robotSize / 4,
-                                y + robotSize / 4,
-                            );
-                        }}
-                    ></div>
-                )}
-                {show.timeline.map((layer, index) => (
-                    <>
-                        <SplineEditor
-                            key={`spline-editor-${index}`}
-                            layer={layer}
-                            onStartPointMove={(coords) =>
-                                handleStartPointMove(index, coords)
-                            }
-                            onPointMove={(pointIdx, coords) =>
-                                handlePointMove(index, pointIdx, coords)
-                            }
-                            onControlPointMove={(pointIdx, coords) =>
-                                handleControlPointMove(index, pointIdx, coords)
-                            }
-                            onDeleteStartPoint={() =>
-                                handleDeleteStartPoint(index)
-                            }
-                            onDeletePoint={(pointIdx) =>
-                                handleDeletePoint(index, pointIdx)
-                            }
-                            onSwitchPointType={(pointIdx, newType) =>
-                                handleSwitchPointType(index, pointIdx, newType)
-                            }
-                        />
-                        {/* TODO: render bots */}
-                    </>
-                ))}
-            </RobotGrid>
-            </Section>
-            <Section title="Debug" compact collapsible >
-                <Pre style={{height: "52.5vh", overflow: "scroll"}}>{JSON.stringify({...show, audio: show.audio ? {data: "[binary data]", mimeType: show.audio.mimeType} : undefined}, null, 2)}</Pre>
+            <div style={{ display: "flex", flexDirection: "row" }}>
+                <Section title="Grid" compact>
+                    <RobotGrid robotState={{}}>
+                        {gridCursorMode === GridCursorMode.Pen && (
+                            <div
+                                style={{
+                                    position: "absolute",
+                                    left: 0,
+                                    top: 0,
+                                    width: "100%",
+                                    height: "100%",
+                                    cursor: "crosshair",
+                                }}
+                                onClick={(e) => {
+                                    const { x: mouseX, y: mouseY } =
+                                        e.nativeEvent;
+                                    const {
+                                        left: gridOriginX,
+                                        top: gridOriginY,
+                                    } = e.currentTarget.getBoundingClientRect();
+                                    const x = mouseX - gridOriginX;
+                                    const y = mouseY - gridOriginY;
+                                    addPointToSelectedLayer(
+                                        x + robotSize / 4,
+                                        y + robotSize / 4,
+                                    );
+                                }}
+                            ></div>
+                        )}
+                        {show.timeline.map((layer, index) => (
+                            <>
+                                {/* TODO: render bots */}
 
-            </Section>
+                                <SplineEditor
+                                    key={`spline-editor-${index}`}
+                                    layer={layer}
+                                    onStartPointMove={(coords) =>
+                                        handleStartPointMove(index, coords)
+                                    }
+                                    onPointMove={(pointIdx, coords) =>
+                                        handlePointMove(index, pointIdx, coords)
+                                    }
+                                    onControlPointMove={(pointIdx, coords) =>
+                                        handleControlPointMove(
+                                            index,
+                                            pointIdx,
+                                            coords,
+                                        )
+                                    }
+                                    onDeleteStartPoint={() =>
+                                        handleDeleteStartPoint(index)
+                                    }
+                                    onDeletePoint={(pointIdx) =>
+                                        handleDeletePoint(index, pointIdx)
+                                    }
+                                    onSwitchPointType={(pointIdx, newType) =>
+                                        handleSwitchPointType(
+                                            index,
+                                            pointIdx,
+                                            newType,
+                                        )
+                                    }
+                                />
+                            </>
+                        ))}
+                        {/* Render Animated Robots separately */}
+                        {show.timeline.map((layer, index) => (
+                            <AnimatedRobotRenderer
+                                key={`animated-robot-${index}`}
+                                layer={layer}
+                                timestamp={currentTimestamp}
+                                robotId={`Robot ${index + 1}`}
+                            />
+                        ))}
+                    </RobotGrid>
+                </Section>
+                <Section title="Debug" compact collapsible>
+                    <Pre style={{ height: "52.5vh", overflow: "scroll" }}>
+                        {JSON.stringify(
+                            {
+                                ...show,
+                                audio:
+                                    show.audio ?
+                                        {
+                                            data: "[binary data]",
+                                            mimeType: show.audio.mimeType,
+                                        }
+                                    :   undefined,
+                            },
+                            null,
+                            2,
+                        )}
+                    </Pre>
+                </Section>
             </div>
             <Section
                 title="Timeline"
@@ -457,35 +544,3 @@ export function Editor() {
         </div>
     );
 }
-
-
-const addTimestampToTimelineEvents = (events: TimelineEvents[]) => {
-    let endTimestamp = 0;
-
-    const eventsWithTs = events.map((e) => {
-        endTimestamp += e.durationMs;
-
-        return {
-            ...e,
-            endTimestamp,
-        };
-    });
-
-    return eventsWithTs;
-};
-
-
-
-
-/*
- * Splits an array into tuples of max length n.
- */
-function arrayToNTuples<T>(array: T[], n: number): T[][] {
-    return array.reduce((acc, item, index) => {
-        if (index % n === 0) {
-            acc.push([]);
-        }
-        acc[acc.length - 1].push(item);
-        return acc;
-    }, [] as T[][]);
-}
diff --git a/src/client/editor/motion-robot.tsx b/src/client/editor/motion-robot.tsx
new file mode 100644
index 00000000..fd00b2d9
--- /dev/null
+++ b/src/client/editor/motion-robot.tsx
@@ -0,0 +1,90 @@
+import { CSSProperties, forwardRef } from "react";
+import { motion } from "framer-motion";
+import { Tooltip } from "@blueprintjs/core";
+import { robotSize } from "../debug/simulator"; // Reuse size
+import { robotColor, innerRobotColor } from "../check-dark-mode";
+import { Coords } from "../../common/spline";
+
+// Simple representation for display, doesn't need full simulation data
+interface MotionRobotProps {
+    robotId: string;
+    position?: Coords; // Optional for initial render
+    style?: CSSProperties;
+    onTopOfRobotsCount?: number; // Simplified collision indication
+}
+
+/**
+ * A Framer Motion animated robot component for the editor grid.
+ * Uses x, y, rotate for positioning and animation.
+ */
+export const MotionRobot = forwardRef<HTMLDivElement, MotionRobotProps>(
+    function MotionRobot(
+        { robotId, position, style, onTopOfRobotsCount = 0 },
+        ref,
+    ) {
+        // Convert position (if provided) to initial styles, but expect
+        // x, y, rotate to be controlled by useAnimate in the parent.
+        const initialStyle =
+            position ?
+                {
+                    // Framer motion uses different origin - center based? Check docs.
+                    // Let's assume x/y map directly for now and adjust if needed.
+                    // The original used left/bottom. Motion x/y work from top/left.
+                    x: `${position.x}px`,
+                    y: `${position.y}px`,
+                    // We apply rotation via the rotate transform property.
+                }
+            :   {};
+
+        return (
+            <motion.div
+                ref={ref}
+                className=""
+                style={{
+                    position: "absolute",
+                    // Set width/height for proper layout before transforms
+                    width: robotSize,
+                    height: robotSize,
+                    // Apply initial position if given
+                    ...initialStyle,
+                    // Merge other styles
+                    ...style,
+                    // Ensure transform origin is center for rotation
+                    transformOrigin: "center center",
+                    // Prevent pointer events so grid clicks go through
+                    pointerEvents: "none",
+                }}
+                // Tooltip might be tricky with transforms, test this
+                // initial={{ opacity: 0 }} // Example initial animation state
+                // animate={{ opacity: 1 }} // Example animate state
+            >
+                <Tooltip content={`${robotId}`}>
+                    <div
+                        className={robotColor(onTopOfRobotsCount)} // Use simplified collision color
+                        style={{
+                            // Rotation is handled by motion.div's rotate style property
+                            // transform: `rotate(-${clampHeading(pos.headingRadians)}rad)`, <-- No longer here
+                            borderRadius: "50%",
+                            display: "flex",
+                            justifyContent: "flex-end",
+                            alignItems: "center",
+                            width: robotSize, // Fit parent motion.div
+                            height: robotSize, // Fit parent motion.div
+                            padding: "2px",
+                            boxShadow: "0 0 3px black",
+                        }}
+                    >
+                        <div
+                            className={innerRobotColor()}
+                            style={{
+                                width: robotSize / 4,
+                                height: robotSize / 4,
+                                borderRadius: "50%",
+                            }}
+                        />
+                    </div>
+                </Tooltip>
+            </motion.div>
+        );
+    },
+);
diff --git a/src/client/editor/showfile-state.ts b/src/client/editor/showfile-state.ts
index cad15c89..4dcc35ae 100644
--- a/src/client/editor/showfile-state.ts
+++ b/src/client/editor/showfile-state.ts
@@ -1,11 +1,9 @@
-// @ts-expect-error: chessbots client is a CommonJS module, but this library is a ES Module, so we need to tell TypeScript that it's okay
 import { decode as cborDecode, encode as cborEncode } from "cbor-x";
 
-// @ts-expect-error: chessbots client is a CommonJS module, but this library is a ES Module, so we need to tell TypeScript that it's okay
 import { fileOpen, fileSave } from "browser-fs-access";
 
 import { diff } from "deep-object-diff";
-import { useState, useEffect, useCallback, useRef } from "react";
+import { useState, useEffect, useCallback, useRef, useMemo } from "react";
 import {
     createNewShowfile,
     ShowfileSchema,
@@ -372,8 +370,25 @@ export function useShowfile() {
         });
     }, [show, setShow]);
 
-    // TODO: figure out how to get this from the showfile
-    const sequenceLengthMs = 10 * 1000;
+    // Calculate sequenceLengthMs dynamically
+    const sequenceLengthMs = useMemo(() => {
+        let maxDuration = 0;
+        show.timeline.forEach(layer => {
+            let currentLayerDuration = 0;
+            // Add start point duration first if it exists
+            if (layer.startPoint) {
+                 currentLayerDuration += layer.startPoint.durationMs;
+            }
+            // Add remaining events durations
+            layer.remainingEvents.forEach(event => {
+                currentLayerDuration += event.durationMs;
+            });
+            maxDuration = Math.max(maxDuration, currentLayerDuration);
+        });
+        // Use the max duration across all layers.
+        // Provide a default minimum duration if there are no events.
+        return maxDuration > 0 ? maxDuration : 10000; // Default to 10s
+    }, [show.timeline]);
 
     // TODO: continue adding comments to code below this line
     const { currentTimestamp, playing, togglePlaying } =
diff --git a/src/common/getRobotStateAtTime.ts b/src/common/getRobotStateAtTime.ts
new file mode 100644
index 00000000..6c52247f
--- /dev/null
+++ b/src/common/getRobotStateAtTime.ts
@@ -0,0 +1,163 @@
+import {
+    type TimelineLayerType,
+    TimelineEventTypes,
+    type GoToPointEvent,
+    type StartPointEvent,
+    type NonStartPointEvent,
+} from "./show";
+import {
+    type Coords,
+    type Midpoint,
+    SplinePointType,
+    evaluateQuadraticBezier,
+    evaluateCubicBezier,
+    derivativeQuadraticBezier,
+    derivativeCubicBezier,
+    reflectPoint,
+} from "./spline";
+
+export interface RobotState {
+    position: Coords;
+    headingRadians: number;
+}
+
+/**
+ * Calculates the robot's position and heading at a specific timestamp within its timeline layer.
+ *
+ * @param layer - The timeline layer for the robot.
+ * @param timestampMs - The timestamp in milliseconds.
+ * @returns The robot's state (position and heading) at the given time.
+ */
+export function getRobotStateAtTime(
+    layer: TimelineLayerType,
+    timestampMs: number,
+): RobotState {
+    let currentTimeMs = 0;
+    let previousPoint: Coords = layer.startPoint.target.point;
+    let previousHeadingRad = 0; // Default initial heading
+    let previousMidpointType: SplinePointType | null = null; // Track type of previous segment
+    let previousActualCP1: Coords | null = null;
+    let previousActualCP2: Coords | null = null; // Only relevant if previous was Cubic
+
+    const allEvents = [layer.startPoint, ...layer.remainingEvents]; // Combine for easier iteration
+
+    for (let i = 0; i < allEvents.length; i++) {
+        const currentEvent = allEvents[i];
+        const eventStartTimeMs = currentTimeMs;
+        const eventEndTimeMs = currentTimeMs + currentEvent.durationMs;
+
+        if (timestampMs >= eventStartTimeMs && timestampMs < eventEndTimeMs) {
+            // Timestamp falls within this event
+            const timeIntoEvent = timestampMs - eventStartTimeMs;
+            const progress = currentEvent.durationMs > 0 ? timeIntoEvent / currentEvent.durationMs : 1; // Avoid division by zero
+
+            if (currentEvent.type === TimelineEventTypes.StartPointEvent) {
+                // Robot waits at the start point during its initial duration
+                return { position: previousPoint, headingRadians: previousHeadingRad };
+            }
+
+            if (currentEvent.type === TimelineEventTypes.WaitEvent) {
+                // Robot waits at the end of the previous movement
+                return { position: previousPoint, headingRadians: previousHeadingRad };
+            }
+
+            if (currentEvent.type === TimelineEventTypes.GoToPointEvent) {
+                const target = currentEvent.target;
+                const startPos = previousPoint;
+                const endPos = target.endPoint;
+                let p1: Coords;
+                let p2: Coords;
+                let derivativeFunc: (t: number) => Coords;
+                let evaluateFunc: (t: number) => Coords;
+
+                let currentActualCP1: Coords | null = null;
+                let currentActualCP2: Coords | null = null;
+
+                if (target.type === SplinePointType.QuadraticBezier) {
+                    if (previousMidpointType === SplinePointType.QuadraticBezier && previousActualCP1) {
+                        p1 = reflectPoint(previousActualCP1, startPos);
+                    } else if (previousMidpointType === SplinePointType.CubicBezier && previousActualCP2) {
+                        p1 = reflectPoint(previousActualCP2, startPos);
+                    } else {
+                        p1 = startPos;
+                    }
+                    currentActualCP1 = p1;
+                    evaluateFunc = (t) => evaluateQuadraticBezier(startPos, p1, endPos, t);
+                    derivativeFunc = (t) => derivativeQuadraticBezier(startPos, p1, endPos, t);
+                }
+                else { // Cubic Bezier
+                    const controlPoint2 = target.controlPoint;
+                    if (previousMidpointType === SplinePointType.CubicBezier && previousActualCP2) {
+                        p1 = reflectPoint(previousActualCP2, startPos);
+                    } else {
+                        p1 = startPos;
+                    }
+                    currentActualCP1 = p1;
+                    currentActualCP2 = controlPoint2;
+                    evaluateFunc = (t) => evaluateCubicBezier(startPos, p1, controlPoint2, endPos, t);
+                    derivativeFunc = (t) => derivativeCubicBezier(startPos, p1, controlPoint2, endPos, t);
+                }
+
+                const currentPosition = evaluateFunc(progress);
+                const derivative = derivativeFunc(progress);
+                const currentHeading = Math.atan2(derivative.y, derivative.x);
+
+                return { position: currentPosition, headingRadians: isNaN(currentHeading) ? previousHeadingRad : currentHeading };
+            }
+        }
+
+        // Update state for the next iteration
+        currentTimeMs = eventEndTimeMs;
+        if (currentEvent.type === TimelineEventTypes.GoToPointEvent) {
+            previousPoint = currentEvent.target.endPoint;
+            previousMidpointType = currentEvent.target.type;
+
+            let final_p1: Coords | null = null;
+            let final_p2: Coords | null = null;
+            let derivativeFunc_final: (t: number) => Coords;
+            const target = currentEvent.target;
+            const startPos = (previousMidpointType !== null) ? previousPoint : layer.startPoint.target.point;
+
+            const _startPos_deriv = previousPoint;
+            const endPos = target.endPoint;
+
+            if (target.type === SplinePointType.QuadraticBezier) {
+                if (previousMidpointType === SplinePointType.QuadraticBezier && previousActualCP1) {
+                    final_p1 = reflectPoint(previousActualCP1, _startPos_deriv);
+                } else if (previousMidpointType === SplinePointType.CubicBezier && previousActualCP2) {
+                    final_p1 = reflectPoint(previousActualCP2, _startPos_deriv);
+                } else {
+                    final_p1 = _startPos_deriv;
+                }
+                previousActualCP1 = final_p1;
+                previousActualCP2 = null;
+                derivativeFunc_final = (t) => derivativeQuadraticBezier(_startPos_deriv, final_p1!, endPos, t);
+            } else {
+                const controlPoint2 = target.controlPoint;
+                if (previousMidpointType === SplinePointType.CubicBezier && previousActualCP2) {
+                    final_p1 = reflectPoint(previousActualCP2, _startPos_deriv);
+                } else {
+                    final_p1 = _startPos_deriv;
+                }
+                final_p2 = controlPoint2;
+                previousActualCP1 = final_p1;
+                previousActualCP2 = final_p2;
+                derivativeFunc_final = (t) => derivativeCubicBezier(_startPos_deriv, final_p1!, final_p2!, endPos, t);
+            }
+            const finalDerivative = derivativeFunc_final(1);
+            const finalHeading = Math.atan2(finalDerivative.y, finalDerivative.x);
+            previousHeadingRad = isNaN(finalHeading) ? previousHeadingRad : finalHeading;
+
+        } else {
+            if (currentEvent.type === TimelineEventTypes.StartPointEvent) {
+                previousPoint = currentEvent.target.point;
+            }
+            previousMidpointType = null;
+            previousActualCP1 = null;
+            previousActualCP2 = null;
+        }
+    }
+
+    // If timestamp is beyond the last event, stay at the final position and heading
+    return { position: previousPoint, headingRadians: previousHeadingRad };
+} 
\ No newline at end of file
diff --git a/src/common/spline.ts b/src/common/spline.ts
index 566703ad..4017ca36 100644
--- a/src/common/spline.ts
+++ b/src/common/spline.ts
@@ -91,3 +91,42 @@ export function splineToSvgDrawAttribute(spline: Spline): string {
     }
     return path;
 }
+
+export function evaluateQuadraticBezier(p0: Coords, p1: Coords, p2: Coords, t: number): Coords {
+    const mt = 1 - t;
+    const x = mt * mt * p0.x + 2 * mt * t * p1.x + t * t * p2.x;
+    const y = mt * mt * p0.y + 2 * mt * t * p1.y + t * t * p2.y;
+    return { x, y };
+}
+
+export function evaluateCubicBezier(p0: Coords, p1: Coords, p2: Coords, p3: Coords, t: number): Coords {
+    const mt = 1 - t;
+    const mt2 = mt * mt;
+    const t2 = t * t;
+    const x = mt2 * mt * p0.x + 3 * mt2 * t * p1.x + 3 * mt * t2 * p2.x + t2 * t * p3.x;
+    const y = mt2 * mt * p0.y + 3 * mt2 * t * p1.y + 3 * mt * t2 * p2.y + t2 * t * p3.y;
+    return { x, y };
+}
+
+export function derivativeQuadraticBezier(p0: Coords, p1: Coords, p2: Coords, t: number): Coords {
+    // Derivative: 2(1-t)(p1-p0) + 2t(p2-p1)
+    const x = 2 * (1 - t) * (p1.x - p0.x) + 2 * t * (p2.x - p1.x);
+    const y = 2 * (1 - t) * (p1.y - p0.y) + 2 * t * (p2.y - p1.y);
+    return { x, y };
+}
+
+export function derivativeCubicBezier(p0: Coords, p1: Coords, p2: Coords, p3: Coords, t: number): Coords {
+    // Derivative: 3(1-t)^2(p1-p0) + 6(1-t)t(p2-p1) + 3t^2(p3-p2)
+    const mt = 1 - t;
+    const x = 3 * mt * mt * (p1.x - p0.x) + 6 * mt * t * (p2.x - p1.x) + 3 * t * t * (p3.x - p2.x);
+    const y = 3 * mt * mt * (p1.y - p0.y) + 6 * mt * t * (p2.y - p1.y) + 3 * t * t * (p3.y - p2.y);
+    return { x, y };
+}
+
+/** Reflect point p over pivot */
+export function reflectPoint(p: Coords, pivot: Coords): Coords {
+    return {
+        x: pivot.x + (pivot.x - p.x),
+        y: pivot.y + (pivot.y - p.y),
+    };
+}

From ed6aeba07a318c18a0c12e24b6eeaec44202f7e2 Mon Sep 17 00:00:00 2001
From: Jason Antwi-Appah <hey@jasonaa.me>
Date: Thu, 24 Apr 2025 21:01:33 -0500
Subject: [PATCH 55/92] Format

---
 src/client/debug/simulator.tsx      |   7 +-
 src/client/editor/showfile-state.ts |   8 +-
 src/common/getRobotStateAtTime.ts   | 127 +++++++++++++++++++---------
 src/common/spline.ts                |  52 ++++++++++--
 4 files changed, 139 insertions(+), 55 deletions(-)

diff --git a/src/client/debug/simulator.tsx b/src/client/debug/simulator.tsx
index e60a51d1..6600abda 100644
--- a/src/client/debug/simulator.tsx
+++ b/src/client/debug/simulator.tsx
@@ -362,12 +362,7 @@ export const Robot = forwardRef<
         onTopOfRobots: string[];
         style?: CSSProperties;
     }
->(function Robot({
-    pos,
-    robotId,
-    onTopOfRobots,
-    style,
-}, ref) {
+>(function Robot({ pos, robotId, onTopOfRobots, style }, ref) {
     return (
         <div
             ref={ref}
diff --git a/src/client/editor/showfile-state.ts b/src/client/editor/showfile-state.ts
index 4dcc35ae..29364dfc 100644
--- a/src/client/editor/showfile-state.ts
+++ b/src/client/editor/showfile-state.ts
@@ -1,5 +1,7 @@
+// @ts-expect-error: chessbots client is a CommonJS module, but this library is a ES Module, so we need to tell TypeScript that it's okay
 import { decode as cborDecode, encode as cborEncode } from "cbor-x";
 
+// @ts-expect-error: chessbots client is a CommonJS module, but this library is a ES Module, so we need to tell TypeScript that it's okay
 import { fileOpen, fileSave } from "browser-fs-access";
 
 import { diff } from "deep-object-diff";
@@ -373,14 +375,14 @@ export function useShowfile() {
     // Calculate sequenceLengthMs dynamically
     const sequenceLengthMs = useMemo(() => {
         let maxDuration = 0;
-        show.timeline.forEach(layer => {
+        show.timeline.forEach((layer) => {
             let currentLayerDuration = 0;
             // Add start point duration first if it exists
             if (layer.startPoint) {
-                 currentLayerDuration += layer.startPoint.durationMs;
+                currentLayerDuration += layer.startPoint.durationMs;
             }
             // Add remaining events durations
-            layer.remainingEvents.forEach(event => {
+            layer.remainingEvents.forEach((event) => {
                 currentLayerDuration += event.durationMs;
             });
             maxDuration = Math.max(maxDuration, currentLayerDuration);
diff --git a/src/common/getRobotStateAtTime.ts b/src/common/getRobotStateAtTime.ts
index 6c52247f..f01618ad 100644
--- a/src/common/getRobotStateAtTime.ts
+++ b/src/common/getRobotStateAtTime.ts
@@ -1,13 +1,6 @@
-import {
-    type TimelineLayerType,
-    TimelineEventTypes,
-    type GoToPointEvent,
-    type StartPointEvent,
-    type NonStartPointEvent,
-} from "./show";
+import { type TimelineLayerType, TimelineEventTypes } from "./show";
 import {
     type Coords,
-    type Midpoint,
     SplinePointType,
     evaluateQuadraticBezier,
     evaluateCubicBezier,
@@ -49,16 +42,25 @@ export function getRobotStateAtTime(
         if (timestampMs >= eventStartTimeMs && timestampMs < eventEndTimeMs) {
             // Timestamp falls within this event
             const timeIntoEvent = timestampMs - eventStartTimeMs;
-            const progress = currentEvent.durationMs > 0 ? timeIntoEvent / currentEvent.durationMs : 1; // Avoid division by zero
+            const progress =
+                currentEvent.durationMs > 0 ?
+                    timeIntoEvent / currentEvent.durationMs
+                :   1; // Avoid division by zero
 
             if (currentEvent.type === TimelineEventTypes.StartPointEvent) {
                 // Robot waits at the start point during its initial duration
-                return { position: previousPoint, headingRadians: previousHeadingRad };
+                return {
+                    position: previousPoint,
+                    headingRadians: previousHeadingRad,
+                };
             }
 
             if (currentEvent.type === TimelineEventTypes.WaitEvent) {
                 // Robot waits at the end of the previous movement
-                return { position: previousPoint, headingRadians: previousHeadingRad };
+                return {
+                    position: previousPoint,
+                    headingRadians: previousHeadingRad,
+                };
             }
 
             if (currentEvent.type === TimelineEventTypes.GoToPointEvent) {
@@ -66,43 +68,68 @@ export function getRobotStateAtTime(
                 const startPos = previousPoint;
                 const endPos = target.endPoint;
                 let p1: Coords;
-                let p2: Coords;
                 let derivativeFunc: (t: number) => Coords;
                 let evaluateFunc: (t: number) => Coords;
 
-                let currentActualCP1: Coords | null = null;
-                let currentActualCP2: Coords | null = null;
-
                 if (target.type === SplinePointType.QuadraticBezier) {
-                    if (previousMidpointType === SplinePointType.QuadraticBezier && previousActualCP1) {
+                    if (
+                        previousMidpointType ===
+                            SplinePointType.QuadraticBezier &&
+                        previousActualCP1
+                    ) {
                         p1 = reflectPoint(previousActualCP1, startPos);
-                    } else if (previousMidpointType === SplinePointType.CubicBezier && previousActualCP2) {
+                    } else if (
+                        previousMidpointType === SplinePointType.CubicBezier &&
+                        previousActualCP2
+                    ) {
                         p1 = reflectPoint(previousActualCP2, startPos);
                     } else {
                         p1 = startPos;
                     }
-                    currentActualCP1 = p1;
-                    evaluateFunc = (t) => evaluateQuadraticBezier(startPos, p1, endPos, t);
-                    derivativeFunc = (t) => derivativeQuadraticBezier(startPos, p1, endPos, t);
-                }
-                else { // Cubic Bezier
+                    evaluateFunc = (t) =>
+                        evaluateQuadraticBezier(startPos, p1, endPos, t);
+                    derivativeFunc = (t) =>
+                        derivativeQuadraticBezier(startPos, p1, endPos, t);
+                } else {
+                    // Cubic Bezier
                     const controlPoint2 = target.controlPoint;
-                    if (previousMidpointType === SplinePointType.CubicBezier && previousActualCP2) {
+                    if (
+                        previousMidpointType === SplinePointType.CubicBezier &&
+                        previousActualCP2
+                    ) {
                         p1 = reflectPoint(previousActualCP2, startPos);
                     } else {
                         p1 = startPos;
                     }
-                    currentActualCP1 = p1;
-                    currentActualCP2 = controlPoint2;
-                    evaluateFunc = (t) => evaluateCubicBezier(startPos, p1, controlPoint2, endPos, t);
-                    derivativeFunc = (t) => derivativeCubicBezier(startPos, p1, controlPoint2, endPos, t);
+                    evaluateFunc = (t) =>
+                        evaluateCubicBezier(
+                            startPos,
+                            p1,
+                            controlPoint2,
+                            endPos,
+                            t,
+                        );
+                    derivativeFunc = (t) =>
+                        derivativeCubicBezier(
+                            startPos,
+                            p1,
+                            controlPoint2,
+                            endPos,
+                            t,
+                        );
                 }
 
                 const currentPosition = evaluateFunc(progress);
                 const derivative = derivativeFunc(progress);
                 const currentHeading = Math.atan2(derivative.y, derivative.x);
 
-                return { position: currentPosition, headingRadians: isNaN(currentHeading) ? previousHeadingRad : currentHeading };
+                return {
+                    position: currentPosition,
+                    headingRadians:
+                        isNaN(currentHeading) ? previousHeadingRad : (
+                            currentHeading
+                        ),
+                };
             }
         }
 
@@ -116,25 +143,39 @@ export function getRobotStateAtTime(
             let final_p2: Coords | null = null;
             let derivativeFunc_final: (t: number) => Coords;
             const target = currentEvent.target;
-            const startPos = (previousMidpointType !== null) ? previousPoint : layer.startPoint.target.point;
 
             const _startPos_deriv = previousPoint;
             const endPos = target.endPoint;
 
             if (target.type === SplinePointType.QuadraticBezier) {
-                if (previousMidpointType === SplinePointType.QuadraticBezier && previousActualCP1) {
+                if (
+                    previousMidpointType === SplinePointType.QuadraticBezier &&
+                    previousActualCP1
+                ) {
                     final_p1 = reflectPoint(previousActualCP1, _startPos_deriv);
-                } else if (previousMidpointType === SplinePointType.CubicBezier && previousActualCP2) {
+                } else if (
+                    previousMidpointType === SplinePointType.CubicBezier &&
+                    previousActualCP2
+                ) {
                     final_p1 = reflectPoint(previousActualCP2, _startPos_deriv);
                 } else {
                     final_p1 = _startPos_deriv;
                 }
                 previousActualCP1 = final_p1;
                 previousActualCP2 = null;
-                derivativeFunc_final = (t) => derivativeQuadraticBezier(_startPos_deriv, final_p1!, endPos, t);
+                derivativeFunc_final = (t) =>
+                    derivativeQuadraticBezier(
+                        _startPos_deriv,
+                        final_p1!,
+                        endPos,
+                        t,
+                    );
             } else {
                 const controlPoint2 = target.controlPoint;
-                if (previousMidpointType === SplinePointType.CubicBezier && previousActualCP2) {
+                if (
+                    previousMidpointType === SplinePointType.CubicBezier &&
+                    previousActualCP2
+                ) {
                     final_p1 = reflectPoint(previousActualCP2, _startPos_deriv);
                 } else {
                     final_p1 = _startPos_deriv;
@@ -142,12 +183,22 @@ export function getRobotStateAtTime(
                 final_p2 = controlPoint2;
                 previousActualCP1 = final_p1;
                 previousActualCP2 = final_p2;
-                derivativeFunc_final = (t) => derivativeCubicBezier(_startPos_deriv, final_p1!, final_p2!, endPos, t);
+                derivativeFunc_final = (t) =>
+                    derivativeCubicBezier(
+                        _startPos_deriv,
+                        final_p1!,
+                        final_p2!,
+                        endPos,
+                        t,
+                    );
             }
             const finalDerivative = derivativeFunc_final(1);
-            const finalHeading = Math.atan2(finalDerivative.y, finalDerivative.x);
-            previousHeadingRad = isNaN(finalHeading) ? previousHeadingRad : finalHeading;
-
+            const finalHeading = Math.atan2(
+                finalDerivative.y,
+                finalDerivative.x,
+            );
+            previousHeadingRad =
+                isNaN(finalHeading) ? previousHeadingRad : finalHeading;
         } else {
             if (currentEvent.type === TimelineEventTypes.StartPointEvent) {
                 previousPoint = currentEvent.target.point;
@@ -160,4 +211,4 @@ export function getRobotStateAtTime(
 
     // If timestamp is beyond the last event, stay at the final position and heading
     return { position: previousPoint, headingRadians: previousHeadingRad };
-} 
\ No newline at end of file
+}
diff --git a/src/common/spline.ts b/src/common/spline.ts
index 4017ca36..36eae7e0 100644
--- a/src/common/spline.ts
+++ b/src/common/spline.ts
@@ -92,34 +92,70 @@ export function splineToSvgDrawAttribute(spline: Spline): string {
     return path;
 }
 
-export function evaluateQuadraticBezier(p0: Coords, p1: Coords, p2: Coords, t: number): Coords {
+export function evaluateQuadraticBezier(
+    p0: Coords,
+    p1: Coords,
+    p2: Coords,
+    t: number,
+): Coords {
     const mt = 1 - t;
     const x = mt * mt * p0.x + 2 * mt * t * p1.x + t * t * p2.x;
     const y = mt * mt * p0.y + 2 * mt * t * p1.y + t * t * p2.y;
     return { x, y };
 }
 
-export function evaluateCubicBezier(p0: Coords, p1: Coords, p2: Coords, p3: Coords, t: number): Coords {
+export function evaluateCubicBezier(
+    p0: Coords,
+    p1: Coords,
+    p2: Coords,
+    p3: Coords,
+    t: number,
+): Coords {
     const mt = 1 - t;
     const mt2 = mt * mt;
     const t2 = t * t;
-    const x = mt2 * mt * p0.x + 3 * mt2 * t * p1.x + 3 * mt * t2 * p2.x + t2 * t * p3.x;
-    const y = mt2 * mt * p0.y + 3 * mt2 * t * p1.y + 3 * mt * t2 * p2.y + t2 * t * p3.y;
+    const x =
+        mt2 * mt * p0.x +
+        3 * mt2 * t * p1.x +
+        3 * mt * t2 * p2.x +
+        t2 * t * p3.x;
+    const y =
+        mt2 * mt * p0.y +
+        3 * mt2 * t * p1.y +
+        3 * mt * t2 * p2.y +
+        t2 * t * p3.y;
     return { x, y };
 }
 
-export function derivativeQuadraticBezier(p0: Coords, p1: Coords, p2: Coords, t: number): Coords {
+export function derivativeQuadraticBezier(
+    p0: Coords,
+    p1: Coords,
+    p2: Coords,
+    t: number,
+): Coords {
     // Derivative: 2(1-t)(p1-p0) + 2t(p2-p1)
     const x = 2 * (1 - t) * (p1.x - p0.x) + 2 * t * (p2.x - p1.x);
     const y = 2 * (1 - t) * (p1.y - p0.y) + 2 * t * (p2.y - p1.y);
     return { x, y };
 }
 
-export function derivativeCubicBezier(p0: Coords, p1: Coords, p2: Coords, p3: Coords, t: number): Coords {
+export function derivativeCubicBezier(
+    p0: Coords,
+    p1: Coords,
+    p2: Coords,
+    p3: Coords,
+    t: number,
+): Coords {
     // Derivative: 3(1-t)^2(p1-p0) + 6(1-t)t(p2-p1) + 3t^2(p3-p2)
     const mt = 1 - t;
-    const x = 3 * mt * mt * (p1.x - p0.x) + 6 * mt * t * (p2.x - p1.x) + 3 * t * t * (p3.x - p2.x);
-    const y = 3 * mt * mt * (p1.y - p0.y) + 6 * mt * t * (p2.y - p1.y) + 3 * t * t * (p3.y - p2.y);
+    const x =
+        3 * mt * mt * (p1.x - p0.x) +
+        6 * mt * t * (p2.x - p1.x) +
+        3 * t * t * (p3.x - p2.x);
+    const y =
+        3 * mt * mt * (p1.y - p0.y) +
+        6 * mt * t * (p2.y - p1.y) +
+        3 * t * t * (p3.y - p2.y);
     return { x, y };
 }
 

From a21fab5186342cf161aec2117a9096cbe8d23a4f Mon Sep 17 00:00:00 2001
From: Jason Antwi-Appah <hey@jasonaa.me>
Date: Thu, 24 Apr 2025 21:15:45 -0500
Subject: [PATCH 56/92] Add web debug configuration

---
 .vscode/launch.json | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/.vscode/launch.json b/.vscode/launch.json
index 158e0ca6..1f09e038 100644
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -4,10 +4,17 @@
     // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
     "version": "0.2.0",
     "configurations": [
+        {
+            "name": "Debug ChessBots Client",
+            "request": "launch",
+            "type": "chrome",
+            "url": "http://localhost:3000",
+            "webRoot": "${workspaceFolder}"
+        },
         {
             "type": "node",
             "request": "launch",
-            "name": "Debug ChessBot Server",
+            "name": "Debug ChessBots Server",
             "runtimeExecutable": "ts-node",
             "program": "${workspaceFolder}/src/server/main.ts",
             "restart": true,

From 697854d21263efd3c0e03559ddd32ab238a61cbf Mon Sep 17 00:00:00 2001
From: Jason Antwi-Appah <hey@jasonaa.me>
Date: Thu, 24 Apr 2025 21:16:36 -0500
Subject: [PATCH 57/92] Add delete to event context menu

---
 src/client/editor/editor.tsx        |  7 +++++++
 src/client/editor/showfile-state.ts | 19 +++++++++++++++++++
 src/client/editor/timeline.tsx      | 10 +++++++---
 3 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/src/client/editor/editor.tsx b/src/client/editor/editor.tsx
index 6fa7a86e..2808c93a 100644
--- a/src/client/editor/editor.tsx
+++ b/src/client/editor/editor.tsx
@@ -137,6 +137,7 @@ export function Editor() {
         setSelectedLayerIndex,
         selectedLayerIndex,
         removeAudio,
+        deleteTimelineEvent
     } = useShowfile();
 
     // TODO: fix viewport height / timeline height
@@ -529,6 +530,12 @@ export function Editor() {
                                                                 ms,
                                                             )
                                                         }
+                                                        onDelete={() =>
+                                                            deleteTimelineEvent(
+                                                                layerIndex,
+                                                                event.id,
+                                                            )
+                                                        }
                                                     />
                                                 );
                                             })}
diff --git a/src/client/editor/showfile-state.ts b/src/client/editor/showfile-state.ts
index 29364dfc..d026c8bc 100644
--- a/src/client/editor/showfile-state.ts
+++ b/src/client/editor/showfile-state.ts
@@ -557,6 +557,24 @@ export function useShowfile() {
             audio: undefined,
         });
     }, [show, setShow]);
+
+    const deleteTimelineEvent = useCallback(
+        (layerIndex: number, eventId: string) => {
+            const newTimeline = [...show.timeline];
+            const layer = newTimeline[layerIndex];
+            if (!layer) {
+                return;
+            }
+            const { startPoint, remainingEvents } = layer;
+            const eventIndex = remainingEvents.findIndex(
+                (event) => event.id === eventId,
+            );
+            const events = remainingEvents.toSpliced(eventIndex, 1); // Remove the event
+            newTimeline[layerIndex] = { startPoint, remainingEvents: events };
+            setShow({ ...show, timeline: newTimeline });
+        },
+        [show, setShow],
+    );
     return {
         updateTimelineEventOrders,
         show,
@@ -594,5 +612,6 @@ export function useShowfile() {
         setSelectedLayerIndex,
         selectedLayerIndex,
         removeAudio,
+        deleteTimelineEvent
     };
 }
diff --git a/src/client/editor/timeline.tsx b/src/client/editor/timeline.tsx
index f0629c2e..de96c87d 100644
--- a/src/client/editor/timeline.tsx
+++ b/src/client/editor/timeline.tsx
@@ -23,9 +23,11 @@ import {
 export function ReorderableTimelineEvent({
     event,
     onDurationChange,
+    onDelete,
 }: PropsWithChildren<{
     event: TimelineEvents;
     onDurationChange: (ms: number) => void;
+    onDelete: () => void;
 }>) {
     const controls = useDragControls();
 
@@ -39,6 +41,7 @@ export function ReorderableTimelineEvent({
                 event={event}
                 onPointerDownOnDragHandle={(e) => controls.start(e)}
                 onDurationChange={onDurationChange}
+                onDelete={onDelete}
             />
         </Reorder.Item>
     );
@@ -50,9 +53,10 @@ export function TimelineEvent(props: {
         event: React.PointerEvent<HTMLDivElement>,
     ) => void;
     onDurationChange?: (deltaMs: number) => void;
+    onDelete?: () => void;
 }) {
     const ref = useRef<HTMLDivElement>(null);
-    const { event, onPointerDownOnDragHandle, onDurationChange } = props;
+    const { event, onPointerDownOnDragHandle, onDurationChange, onDelete } = props;
     useEffect(() => {
         if (!onDurationChange) return;
         if (!ref.current) return;
@@ -72,14 +76,14 @@ export function TimelineEvent(props: {
         });
     }, [event.type, onDurationChange]);
 
-    // TODO: add context menu for deleting events and adding a new event before and after this one
+    // TODO: add context menu for adding a new event before and after this one
 
     return (
         <ContextMenu
             content={
                 <Menu>
                     {/* TODO: add wait, spin before/after current event */}
-                    <MenuItem text="Delete..." intent="danger" />
+                    <MenuItem text="Delete..." intent="danger" onClick={onDelete} />
                 </Menu>
             }
         >

From e96cb05674efe8abe112bf8919f0a1f8884e1be9 Mon Sep 17 00:00:00 2001
From: Jason Antwi-Appah <hey@jasonaa.me>
Date: Thu, 24 Apr 2025 23:40:34 -0500
Subject: [PATCH 58/92] Add drag-to-seek, add wait event

---
 src/client/editor/editor.tsx        | 93 +++++++++++++++++++++--------
 src/client/editor/showfile-state.ts | 30 +++++++++-
 src/client/editor/timeline.tsx      | 40 +++++++++++--
 3 files changed, 131 insertions(+), 32 deletions(-)

diff --git a/src/client/editor/editor.tsx b/src/client/editor/editor.tsx
index 2808c93a..3a173a44 100644
--- a/src/client/editor/editor.tsx
+++ b/src/client/editor/editor.tsx
@@ -1,6 +1,4 @@
-// TODO: how to add wait events?
-
-import { useMemo } from "react";
+import { useEffect, useMemo, useRef } from "react";
 import {
     Section,
     EditableText,
@@ -21,6 +19,7 @@ import {
     GridCursorMode,
     millisToPixels,
     NonStartPointEvent,
+    pixelsToMillis,
     RULER_TICK_GAP_PX,
     TimelineDurationUpdateMode,
 } from "../../common/show";
@@ -44,6 +43,7 @@ import { getRobotStateAtTime } from "../../common/getRobotStateAtTime";
 import { MotionRobot } from "./motion-robot";
 import { TimelineLayerType } from "../../common/show";
 import { SplineEditor } from "./spline-editor";
+import interact from "interactjs";
 
 // Helper component to manage animation for a single robot
 function AnimatedRobotRenderer({
@@ -137,7 +137,9 @@ export function Editor() {
         setSelectedLayerIndex,
         selectedLayerIndex,
         removeAudio,
-        deleteTimelineEvent
+        deleteTimelineEvent,
+        setTimestamp,
+        addWaitEventAtIndex,
     } = useShowfile();
 
     // TODO: fix viewport height / timeline height
@@ -204,6 +206,25 @@ export function Editor() {
 
     const { handleKeyDown, handleKeyUp } = useHotkeys(hotkeys);
 
+    const seekBarRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        if (!seekBarRef.current) return;
+        const el = seekBarRef.current;
+        interact(el).resizable({
+            edges: {
+                right: true,
+            },
+            listeners: {
+                move: function (event) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    const newTimestamp = pixelsToMillis(event.rect.width);
+                    setTimestamp(newTimestamp);
+                },
+            },
+        });
+    }, [setTimestamp]);
     return (
         <div
             style={{ maxHeight: "100vh" }}
@@ -470,6 +491,7 @@ export function Editor() {
                     <Ruler sequenceLengthMs={sequenceLengthMs} />
                     <TimelineLayer title="Seek">
                         <motion.div
+                            ref={seekBarRef}
                             style={{
                                 display: "flex",
                                 backgroundColor: "red",
@@ -516,29 +538,48 @@ export function Editor() {
                                                 );
                                             }}
                                         >
-                                            {remainingEvents.map((event) => {
-                                                return (
-                                                    <ReorderableTimelineEvent
-                                                        event={event}
-                                                        key={event.id}
-                                                        onDurationChange={(
-                                                            ms,
-                                                        ) =>
-                                                            updateTimelineEventDurations(
-                                                                layerIndex,
-                                                                event.id,
+                                            {remainingEvents.map(
+                                                (event, eventIndex) => {
+                                                    return (
+                                                        <ReorderableTimelineEvent
+                                                            event={event}
+                                                            key={event.id}
+                                                            onDurationChange={(
                                                                 ms,
-                                                            )
-                                                        }
-                                                        onDelete={() =>
-                                                            deleteTimelineEvent(
-                                                                layerIndex,
-                                                                event.id,
-                                                            )
-                                                        }
-                                                    />
-                                                );
-                                            })}
+                                                            ) =>
+                                                                updateTimelineEventDurations(
+                                                                    layerIndex,
+                                                                    event.id,
+                                                                    ms,
+                                                                )
+                                                            }
+                                                            onDelete={() =>
+                                                                deleteTimelineEvent(
+                                                                    layerIndex,
+                                                                    event.id,
+                                                                )
+                                                            }
+                                                            onAddWaitEvent={(
+                                                                position,
+                                                            ) =>
+                                                                (
+                                                                    position ===
+                                                                    "before"
+                                                                ) ?
+                                                                    addWaitEventAtIndex(
+                                                                        layerIndex,
+                                                                        eventIndex,
+                                                                    )
+                                                                :   addWaitEventAtIndex(
+                                                                        layerIndex,
+                                                                        eventIndex +
+                                                                            1,
+                                                                    )
+                                                            }
+                                                        />
+                                                    );
+                                                },
+                                            )}
                                         </Reorder.Group>
                                     </div>
                                     {/* TODO: add ability to add events */}
diff --git a/src/client/editor/showfile-state.ts b/src/client/editor/showfile-state.ts
index d026c8bc..fb23515b 100644
--- a/src/client/editor/showfile-state.ts
+++ b/src/client/editor/showfile-state.ts
@@ -18,6 +18,7 @@ import {
     CHESSBOTS_SHOWFILE_MIME_TYPE,
     CHESSBOTS_SHOWFILE_EXTENSION,
     GridCursorMode,
+    WaitEvent,
 } from "../../common/show";
 import {
     SplinePointType,
@@ -393,7 +394,7 @@ export function useShowfile() {
     }, [show.timeline]);
 
     // TODO: continue adding comments to code below this line
-    const { currentTimestamp, playing, togglePlaying } =
+    const { currentTimestamp, playing, togglePlaying, setTimestamp } =
         usePlayHead(sequenceLengthMs);
 
     const { audio } = show;
@@ -575,6 +576,29 @@ export function useShowfile() {
         },
         [show, setShow],
     );
+
+    const addWaitEventAtIndex = useCallback(
+        (layerIndex: number, eventIndex: number) => {
+            const newTimeline = [...show.timeline];
+            const layer = newTimeline[layerIndex];
+            if (!layer) return;
+            const { startPoint, remainingEvents } = layer;
+            const events = [...remainingEvents];
+            const eventToAdd: WaitEvent = {
+                id: crypto.randomUUID(),
+                type: TimelineEventTypes.WaitEvent,
+                durationMs: defaultEventDurationMs,
+            };
+            events.splice(eventIndex, 0, eventToAdd);
+            newTimeline[layerIndex] = {
+                startPoint,
+                remainingEvents: events,
+            };
+            setShow({ ...show, timeline: newTimeline });
+        },
+        [show, defaultEventDurationMs, setShow],
+    );
+
     return {
         updateTimelineEventOrders,
         show,
@@ -612,6 +636,8 @@ export function useShowfile() {
         setSelectedLayerIndex,
         selectedLayerIndex,
         removeAudio,
-        deleteTimelineEvent
+        deleteTimelineEvent,
+        setTimestamp,
+        addWaitEventAtIndex,
     };
 }
diff --git a/src/client/editor/timeline.tsx b/src/client/editor/timeline.tsx
index de96c87d..5cd19814 100644
--- a/src/client/editor/timeline.tsx
+++ b/src/client/editor/timeline.tsx
@@ -24,10 +24,12 @@ export function ReorderableTimelineEvent({
     event,
     onDurationChange,
     onDelete,
+    onAddWaitEvent,
 }: PropsWithChildren<{
     event: TimelineEvents;
     onDurationChange: (ms: number) => void;
-    onDelete: () => void;
+    onDelete?: () => void;
+    onAddWaitEvent?: (position: "before" | "after") => void;
 }>) {
     const controls = useDragControls();
 
@@ -42,6 +44,7 @@ export function ReorderableTimelineEvent({
                 onPointerDownOnDragHandle={(e) => controls.start(e)}
                 onDurationChange={onDurationChange}
                 onDelete={onDelete}
+                onAddWaitEvent={onAddWaitEvent}
             />
         </Reorder.Item>
     );
@@ -54,9 +57,16 @@ export function TimelineEvent(props: {
     ) => void;
     onDurationChange?: (deltaMs: number) => void;
     onDelete?: () => void;
+    onAddWaitEvent?: (position: "before" | "after") => void;
 }) {
     const ref = useRef<HTMLDivElement>(null);
-    const { event, onPointerDownOnDragHandle, onDurationChange, onDelete } = props;
+    const {
+        event,
+        onPointerDownOnDragHandle,
+        onDurationChange,
+        onDelete,
+        onAddWaitEvent,
+    } = props;
     useEffect(() => {
         if (!onDurationChange) return;
         if (!ref.current) return;
@@ -82,8 +92,30 @@ export function TimelineEvent(props: {
         <ContextMenu
             content={
                 <Menu>
-                    {/* TODO: add wait, spin before/after current event */}
-                    <MenuItem text="Delete..." intent="danger" onClick={onDelete} />
+                    {/* TODO: add spin before/after current event */}
+                    {onDelete && (
+                        <MenuItem
+                            text="Delete"
+                            intent="danger"
+                            onClick={onDelete}
+                        />
+                    )}
+                    {onAddWaitEvent && (
+                        <>
+                            <MenuItem
+                                text="Add Wait After"
+                                onClick={() => onAddWaitEvent("after")}
+                            />
+                        </>
+                    )}
+                    {onAddWaitEvent && (
+                        <>
+                            <MenuItem
+                                text="Add Wait Before"
+                                onClick={() => onAddWaitEvent("before")}
+                            />
+                        </>
+                    )}
                 </Menu>
             }
         >

From e670b80526954736ff60badb911a4d89ad9c8fe3 Mon Sep 17 00:00:00 2001
From: Jason Antwi-Appah <hey@jasonaa.me>
Date: Thu, 24 Apr 2025 23:54:52 -0500
Subject: [PATCH 59/92] Adjust opacity of non selected splines

---
 src/client/editor/editor.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/client/editor/editor.tsx b/src/client/editor/editor.tsx
index 3a173a44..05668417 100644
--- a/src/client/editor/editor.tsx
+++ b/src/client/editor/editor.tsx
@@ -327,6 +327,7 @@ export function Editor() {
                             <>
                                 {/* TODO: render bots */}
 
+                                <div style={{opacity: selectedLayerIndex === index ? 1 : 0.35}}>
                                 <SplineEditor
                                     key={`spline-editor-${index}`}
                                     layer={layer}
@@ -357,6 +358,7 @@ export function Editor() {
                                         )
                                     }
                                 />
+                                </div>
                             </>
                         ))}
                         {/* Render Animated Robots separately */}

From f6c2fe730a39cb9675f84454bba02981d6795ddb Mon Sep 17 00:00:00 2001
From: Jason Antwi-Appah <hey@jasonaa.me>
Date: Thu, 24 Apr 2025 23:55:02 -0500
Subject: [PATCH 60/92] Format

---
 src/client/editor/editor.tsx | 71 ++++++++++++++++++++++--------------
 1 file changed, 44 insertions(+), 27 deletions(-)

diff --git a/src/client/editor/editor.tsx b/src/client/editor/editor.tsx
index 05668417..6730f88b 100644
--- a/src/client/editor/editor.tsx
+++ b/src/client/editor/editor.tsx
@@ -327,37 +327,54 @@ export function Editor() {
                             <>
                                 {/* TODO: render bots */}
 
-                                <div style={{opacity: selectedLayerIndex === index ? 1 : 0.35}}>
-                                <SplineEditor
-                                    key={`spline-editor-${index}`}
-                                    layer={layer}
-                                    onStartPointMove={(coords) =>
-                                        handleStartPointMove(index, coords)
-                                    }
-                                    onPointMove={(pointIdx, coords) =>
-                                        handlePointMove(index, pointIdx, coords)
-                                    }
-                                    onControlPointMove={(pointIdx, coords) =>
-                                        handleControlPointMove(
-                                            index,
+                                <div
+                                    style={{
+                                        opacity:
+                                            selectedLayerIndex === index ? 1 : (
+                                                0.35
+                                            ),
+                                    }}
+                                >
+                                    <SplineEditor
+                                        key={`spline-editor-${index}`}
+                                        layer={layer}
+                                        onStartPointMove={(coords) =>
+                                            handleStartPointMove(index, coords)
+                                        }
+                                        onPointMove={(pointIdx, coords) =>
+                                            handlePointMove(
+                                                index,
+                                                pointIdx,
+                                                coords,
+                                            )
+                                        }
+                                        onControlPointMove={(
                                             pointIdx,
                                             coords,
-                                        )
-                                    }
-                                    onDeleteStartPoint={() =>
-                                        handleDeleteStartPoint(index)
-                                    }
-                                    onDeletePoint={(pointIdx) =>
-                                        handleDeletePoint(index, pointIdx)
-                                    }
-                                    onSwitchPointType={(pointIdx, newType) =>
-                                        handleSwitchPointType(
-                                            index,
+                                        ) =>
+                                            handleControlPointMove(
+                                                index,
+                                                pointIdx,
+                                                coords,
+                                            )
+                                        }
+                                        onDeleteStartPoint={() =>
+                                            handleDeleteStartPoint(index)
+                                        }
+                                        onDeletePoint={(pointIdx) =>
+                                            handleDeletePoint(index, pointIdx)
+                                        }
+                                        onSwitchPointType={(
                                             pointIdx,
                                             newType,
-                                        )
-                                    }
-                                />
+                                        ) =>
+                                            handleSwitchPointType(
+                                                index,
+                                                pointIdx,
+                                                newType,
+                                            )
+                                        }
+                                    />
                                 </div>
                             </>
                         ))}

From b8ec128a6fd6b4e1c442ad70fa6eb84e3159cfd0 Mon Sep 17 00:00:00 2001
From: Jason Antwi-Appah <hey@jasonaa.me>
Date: Fri, 25 Apr 2025 02:10:32 -0500
Subject: [PATCH 61/92] Try memoizing return value of `useShowfile`

---
 src/client/editor/showfile-state.ts | 46 +++++++++++++++++++++++++++--
 1 file changed, 44 insertions(+), 2 deletions(-)

diff --git a/src/client/editor/showfile-state.ts b/src/client/editor/showfile-state.ts
index fb23515b..0ed12b72 100644
--- a/src/client/editor/showfile-state.ts
+++ b/src/client/editor/showfile-state.ts
@@ -599,7 +599,7 @@ export function useShowfile() {
         [show, defaultEventDurationMs, setShow],
     );
 
-    return {
+    const showfileApi = useMemo(() => ({
         updateTimelineEventOrders,
         show,
         unsavedChanges,
@@ -639,5 +639,47 @@ export function useShowfile() {
         deleteTimelineEvent,
         setTimestamp,
         addWaitEventAtIndex,
-    };
+    }), [
+        updateTimelineEventOrders,
+        show,
+        unsavedChanges,
+        loadAudioFromFile,
+        handleStartPointMove,
+        handlePointMove,
+        handleControlPointMove,
+        handleDeleteStartPoint,
+        handleDeletePoint,
+        handleSwitchPointType,
+        saveShowfile,
+        openShowfile,
+        editName,
+        undo,
+        redo,
+        addRobot,
+        currentTimestamp,
+        playing,
+        togglePlaying,
+        deleteLayer,
+        canRedo,
+        canUndo,
+        sequenceLengthMs,
+        timelineDurationUpdateMode,
+        setTimelineDurationUpdateMode,
+        updateTimelineEventDurations,
+        gridCursorMode,
+        setGridCursorMode,
+        defaultPointType,
+        setDefaultPointType,
+        setDefaultEventDurationMs,
+        defaultEventDurationMs,
+        addPointToSelectedLayer,
+        setSelectedLayerIndex,
+        selectedLayerIndex,
+        removeAudio,
+        deleteTimelineEvent,
+        setTimestamp,
+        addWaitEventAtIndex,
+    ]);
+
+    return showfileApi;
 }

From 9823c28ea9a636bf02012fb053d043c862c9f0ce Mon Sep 17 00:00:00 2001
From: Mason Thomas <Kandleseatwicks@gmail.com>
Date: Fri, 25 Apr 2025 02:30:54 -0500
Subject: [PATCH 62/92] create cubic and quadratic drive schemas

---
 src/server/robot/robot.ts      | 35 +++++++++++++++++++++++++++++++++-
 src/server/utils/tcp-packet.ts | 25 ++++++++++++++++++++++++
 2 files changed, 59 insertions(+), 1 deletion(-)

diff --git a/src/server/robot/robot.ts b/src/server/robot/robot.ts
index 5089904f..09546100 100644
--- a/src/server/robot/robot.ts
+++ b/src/server/robot/robot.ts
@@ -124,6 +124,39 @@ export class Robot {
      */
     public async sendDriveTicksPacket(distanceTicks: number): Promise<void> {
         const tunnel = this.getTunnel();
-        await tunnel.send({ type: PacketType.DRIVE_TICKS, tickDistance: distanceTicks });
+        await tunnel.send({
+            type: PacketType.DRIVE_TICKS,
+            tickDistance: distanceTicks,
+        });
+    }
+
+    public async sendDriveCubicPacket(
+        startPosition: Position,
+        endPosition: Position,
+        controlPosition: Position,
+        timeDeltaMs: number,
+    ): Promise<void> {
+        const tunnel = this.getTunnel();
+        await tunnel.send({
+            type: PacketType.DRIVE_CUBIC_SPLINE,
+            startPosition: startPosition,
+            endPosition: endPosition,
+            controlPosition: controlPosition,
+            timeDeltaMs: timeDeltaMs,
+        });
+    }
+
+    public async sendDriveQuadraticPacket(
+        startPosition: Position,
+        endPosition: Position,
+        timeDeltaMs: number,
+    ): Promise<void> {
+        const tunnel = this.getTunnel();
+        await tunnel.send({
+            type: PacketType.DRIVE_QUADRATIC_SPLINE,
+            startPosition: startPosition,
+            endPosition: endPosition,
+            timeDeltaMs: timeDeltaMs,
+        });
     }
 }
diff --git a/src/server/utils/tcp-packet.ts b/src/server/utils/tcp-packet.ts
index 4ad65c7c..8ac564a8 100644
--- a/src/server/utils/tcp-packet.ts
+++ b/src/server/utils/tcp-packet.ts
@@ -23,6 +23,8 @@ export enum PacketType {
     ACTION_FAIL = "ACTION_FAIL",
     DRIVE_TANK = "DRIVE_TANK",
     ESTOP = "ESTOP",
+    DRIVE_CUBIC_SPLINE = "DRIVE_CUBIC_SPLINE",
+    DRIVE_QUADRATIC_SPLINE = "DRIVE_QUADRATIC_SPLINE",
 }
 
 const Float = NumberType.withConstraint((n) => Number.isFinite(n), {
@@ -37,6 +39,11 @@ const MotorPower = Float.withConstraint((n) => -1 <= n && n <= 1, {
     name: "motor_power",
 });
 
+const Position = Record({
+    x: Float,
+    y: Float,
+});
+
 // MUST be kept in sync with chessBotArduino/include/packet.h PacketType
 export const SERVER_PROTOCOL_VERSION = 1;
 
@@ -152,6 +159,22 @@ export const DRIVE_TANK_SCHEMA = Record({
     left: MotorPower,
     right: MotorPower,
 });
+
+export const DRIVE_CUBIC_SPLINE_SCHEMA = Record({
+    type: Literal(PacketType.DRIVE_CUBIC_SPLINE),
+    startPosition: Position,
+    endPosition: Position,
+    controlPosition: Position,
+    timeDeltaMs: Int32,
+});
+
+export const DRIVE_QUADRATIC_SPLINE_SCHEMA = Record({
+    type: Literal(PacketType.DRIVE_QUADRATIC_SPLINE),
+    startPosition: Position,
+    endPosition: Position,
+    timeDeltaMs: Int32,
+});
+
 export const ESTOP_SCHEMA = Record({ type: Literal(PacketType.ESTOP) });
 
 export const Packet = Union(
@@ -169,6 +192,8 @@ export const Packet = Union(
     ACTION_FAIL_SCHEMA,
     DRIVE_TANK_SCHEMA,
     ESTOP_SCHEMA,
+    DRIVE_CUBIC_SPLINE_SCHEMA,
+    DRIVE_QUADRATIC_SPLINE_SCHEMA,
 );
 export type Packet = Static<typeof Packet>;
 

From 1247a402e4af1910c811401bdd55d8a0b3248a03 Mon Sep 17 00:00:00 2001
From: Mason Thomas <Kandleseatwicks@gmail.com>
Date: Fri, 25 Apr 2025 02:59:00 -0500
Subject: [PATCH 63/92] create move commands

---
 src/server/command/move-command.ts | 41 ++++++++++++++++++++++++++++++
 1 file changed, 41 insertions(+)

diff --git a/src/server/command/move-command.ts b/src/server/command/move-command.ts
index c1b5f82c..bb3a1dea 100644
--- a/src/server/command/move-command.ts
+++ b/src/server/command/move-command.ts
@@ -83,6 +83,47 @@ export class RotateToStartCommand extends RobotCommand {
     }
 }
 
+export class DriveCubicSplineCommand extends RobotCommand {
+    constructor(
+        robotId: string,
+        public startPosition: Position,
+        public endPosition: Position,
+        public controlPosition: Position,
+        public timeDeltaMs: number,
+    ) {
+        super(robotId);
+    }
+
+    public async execute(): Promise<void> {
+        const robot = robotManager.getRobot(this.robotId);
+        return robot.sendDriveCubicPacket(
+            this.startPosition,
+            this.endPosition,
+            this.controlPosition,
+            this.timeDeltaMs,
+        );
+    }
+}
+
+export class DriveQuadraticSplineCommand extends RobotCommand {
+    constructor(
+        robotId: string,
+        public startPosition: Position,
+        public endPosition: Position,
+        public timeDeltaMs: number,
+    ) {
+        super(robotId);
+    }
+    public async execute(): Promise<void> {
+        const robot = robotManager.getRobot(this.robotId);
+        return robot.sendDriveQuadraticPacket(
+            this.startPosition,
+            this.endPosition,
+            this.timeDeltaMs,
+        );
+    }
+}
+
 /**
  * Drives a robot for a distance equal to a number of tiles. Distance
  * may be negative, indicating the robot drives backwards.

From ef913095da8c3068ca0e193d168ec4535d1e0d83 Mon Sep 17 00:00:00 2001
From: democat <cwongmath@gmail.com>
Date: Fri, 25 Apr 2025 03:34:31 -0500
Subject: [PATCH 64/92] Add Time Point and WaitCommand

---
 src/server/command/command.ts | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/src/server/command/command.ts b/src/server/command/command.ts
index 2859f1d9..8ab4a60b 100644
--- a/src/server/command/command.ts
+++ b/src/server/command/command.ts
@@ -20,6 +20,13 @@ export interface Command {
      * @param next - The command which is run next.
      */
     then(next: Command): SequentialCommandGroup;
+
+    /**
+     * Decorates the command with a "time point" - if the command finishes in less than the
+     * given duration, it will wait until this number of seconds has elapsed before continuing.
+     * @param seconds - The number of seconds that the command will execute for, at minimum.
+     */
+    withTimePoint(seconds: number): Command;
 }
 
 /**
@@ -43,6 +50,10 @@ export abstract class CommandBase implements Command {
         return new SequentialCommandGroup([this, next]);
     }
 
+    public withTimePoint(seconds: number): Command {
+        return new ParallelCommandGroup([this, new WaitCommand(seconds)]);
+    }
+
     public get requirements(): Set<object> {
         return this._requirements;
     }
@@ -68,6 +79,18 @@ export abstract class RobotCommand extends CommandBase {
     }
 }
 
+/**
+ * A command that waits for a given number of seconds.
+ */
+export class WaitCommand extends CommandBase {
+    constructor(public readonly durationSec: number) {
+        super();
+    }
+    public async execute(): Promise<void> {
+        return new Promise(resolve => setTimeout(resolve, this.durationSec * 1000));
+    }
+}
+
 /**
  * A type of command which groups other commands and runs them together.
  */

From a4aece95b77ccfba9a62041e99e51018874bc976 Mon Sep 17 00:00:00 2001
From: Mason Thomas <Kandleseatwicks@gmail.com>
Date: Fri, 25 Apr 2025 03:42:18 -0500
Subject: [PATCH 65/92] add spin schema and move.

---
 src/server/api/api.ts              |  4 ++--
 src/server/command/command.ts      |  4 +++-
 src/server/command/move-command.ts | 14 ++++++++++++++
 src/server/robot/robot.ts          | 12 ++++++++++++
 src/server/utils/tcp-packet.ts     |  8 ++++++++
 5 files changed, 39 insertions(+), 3 deletions(-)

diff --git a/src/server/api/api.ts b/src/server/api/api.ts
index aac19d93..2daf44a2 100644
--- a/src/server/api/api.ts
+++ b/src/server/api/api.ts
@@ -33,7 +33,7 @@ import { Position } from "../robot/position";
 import { DEGREE } from "../../common/units";
 import { PacketType } from "../utils/tcp-packet";
 import { DriveTicksCommand } from "../command/move-command";
-import { ParallelCommandGroup } from "../command/command";
+import { Command, ParallelCommandGroup } from "../command/command";
 
 export const executor = new CommandExecutor();
 
@@ -210,7 +210,7 @@ apiRouter.get("/do-parallel", async (_, res) => {
     console.log("Starting parallel command group");
     const robotsEntries = Array.from(robotManager.idsToRobots.entries());
     console.log(robotsEntries);
-    const commands: any[] = [];
+    const commands: Command[] = [];
     for (const [, robot] of robotsEntries) {
         console.log("Moving robot " + robot.id);
         // await robot.sendDrivePacket(1);
diff --git a/src/server/command/command.ts b/src/server/command/command.ts
index 8ab4a60b..488780bd 100644
--- a/src/server/command/command.ts
+++ b/src/server/command/command.ts
@@ -87,7 +87,9 @@ export class WaitCommand extends CommandBase {
         super();
     }
     public async execute(): Promise<void> {
-        return new Promise(resolve => setTimeout(resolve, this.durationSec * 1000));
+        return new Promise((resolve) =>
+            setTimeout(resolve, this.durationSec * 1000),
+        );
     }
 }
 
diff --git a/src/server/command/move-command.ts b/src/server/command/move-command.ts
index bb3a1dea..d27c963b 100644
--- a/src/server/command/move-command.ts
+++ b/src/server/command/move-command.ts
@@ -105,6 +105,20 @@ export class DriveCubicSplineCommand extends RobotCommand {
     }
 }
 
+export class SpinRadiansCommand extends RobotCommand {
+    constructor(
+        robotId: string,
+        public radians: number,
+        public timeDeltaMs: number,
+    ) {
+        super(robotId);
+    }
+    public async execute(): Promise<void> {
+        const robot = robotManager.getRobot(this.robotId);
+        return robot.sendSpinPacket(this.radians, this.timeDeltaMs);
+    }
+}
+
 export class DriveQuadraticSplineCommand extends RobotCommand {
     constructor(
         robotId: string,
diff --git a/src/server/robot/robot.ts b/src/server/robot/robot.ts
index 09546100..25c637df 100644
--- a/src/server/robot/robot.ts
+++ b/src/server/robot/robot.ts
@@ -159,4 +159,16 @@ export class Robot {
             timeDeltaMs: timeDeltaMs,
         });
     }
+
+    public async sendSpinPacket(
+        radians: number,
+        timeDeltaMs: number,
+    ): Promise<void> {
+        const tunnel = this.getTunnel();
+        await tunnel.send({
+            type: PacketType.SPIN_RADIANS,
+            radians: radians,
+            timeDeltaMs: timeDeltaMs,
+        });
+    }
 }
diff --git a/src/server/utils/tcp-packet.ts b/src/server/utils/tcp-packet.ts
index 8ac564a8..11e6b5dd 100644
--- a/src/server/utils/tcp-packet.ts
+++ b/src/server/utils/tcp-packet.ts
@@ -25,6 +25,7 @@ export enum PacketType {
     ESTOP = "ESTOP",
     DRIVE_CUBIC_SPLINE = "DRIVE_CUBIC_SPLINE",
     DRIVE_QUADRATIC_SPLINE = "DRIVE_QUADRATIC_SPLINE",
+    SPIN_RADIANS = "SPIN_RADIANS",
 }
 
 const Float = NumberType.withConstraint((n) => Number.isFinite(n), {
@@ -175,6 +176,12 @@ export const DRIVE_QUADRATIC_SPLINE_SCHEMA = Record({
     timeDeltaMs: Int32,
 });
 
+export const SPIN_RADIANS_SCHEMA = Record({
+    type: Literal(PacketType.SPIN_RADIANS),
+    radians: Float,
+    timeDeltaMs: Int32,
+});
+
 export const ESTOP_SCHEMA = Record({ type: Literal(PacketType.ESTOP) });
 
 export const Packet = Union(
@@ -194,6 +201,7 @@ export const Packet = Union(
     ESTOP_SCHEMA,
     DRIVE_CUBIC_SPLINE_SCHEMA,
     DRIVE_QUADRATIC_SPLINE_SCHEMA,
+    SPIN_RADIANS_SCHEMA,
 );
 export type Packet = Static<typeof Packet>;
 

From a83479b59b0ac028f71220428e1170ebd6cfb5c7 Mon Sep 17 00:00:00 2001
From: Jason Antwi-Appah <hey@jasonaa.me>
Date: Fri, 25 Apr 2025 03:42:45 -0500
Subject: [PATCH 66/92] Format

---
 src/client/editor/showfile-state.ts | 165 ++++++++++++++--------------
 1 file changed, 84 insertions(+), 81 deletions(-)

diff --git a/src/client/editor/showfile-state.ts b/src/client/editor/showfile-state.ts
index 0ed12b72..88cfbf3d 100644
--- a/src/client/editor/showfile-state.ts
+++ b/src/client/editor/showfile-state.ts
@@ -599,87 +599,90 @@ export function useShowfile() {
         [show, defaultEventDurationMs, setShow],
     );
 
-    const showfileApi = useMemo(() => ({
-        updateTimelineEventOrders,
-        show,
-        unsavedChanges,
-        loadAudioFromFile,
-        handleStartPointMove,
-        handlePointMove,
-        handleControlPointMove,
-        handleDeleteStartPoint,
-        handleDeletePoint,
-        handleSwitchPointType,
-        saveShowfile,
-        openShowfile,
-        editName,
-        undo,
-        redo,
-        addRobot,
-        currentTimestamp,
-        playing,
-        togglePlaying,
-        deleteLayer,
-        canRedo,
-        canUndo,
-        sequenceLengthMs,
-        timelineDurationUpdateMode,
-        setTimelineDurationUpdateMode,
-        updateTimelineEventDurations,
-        gridCursorMode,
-        setGridCursorMode,
-        defaultPointType,
-        setDefaultPointType,
-        setDefaultEventDurationMs,
-        defaultEventDurationMs,
-        addPointToSelectedLayer,
-        setSelectedLayerIndex,
-        selectedLayerIndex,
-        removeAudio,
-        deleteTimelineEvent,
-        setTimestamp,
-        addWaitEventAtIndex,
-    }), [
-        updateTimelineEventOrders,
-        show,
-        unsavedChanges,
-        loadAudioFromFile,
-        handleStartPointMove,
-        handlePointMove,
-        handleControlPointMove,
-        handleDeleteStartPoint,
-        handleDeletePoint,
-        handleSwitchPointType,
-        saveShowfile,
-        openShowfile,
-        editName,
-        undo,
-        redo,
-        addRobot,
-        currentTimestamp,
-        playing,
-        togglePlaying,
-        deleteLayer,
-        canRedo,
-        canUndo,
-        sequenceLengthMs,
-        timelineDurationUpdateMode,
-        setTimelineDurationUpdateMode,
-        updateTimelineEventDurations,
-        gridCursorMode,
-        setGridCursorMode,
-        defaultPointType,
-        setDefaultPointType,
-        setDefaultEventDurationMs,
-        defaultEventDurationMs,
-        addPointToSelectedLayer,
-        setSelectedLayerIndex,
-        selectedLayerIndex,
-        removeAudio,
-        deleteTimelineEvent,
-        setTimestamp,
-        addWaitEventAtIndex,
-    ]);
+    const showfileApi = useMemo(
+        () => ({
+            updateTimelineEventOrders,
+            show,
+            unsavedChanges,
+            loadAudioFromFile,
+            handleStartPointMove,
+            handlePointMove,
+            handleControlPointMove,
+            handleDeleteStartPoint,
+            handleDeletePoint,
+            handleSwitchPointType,
+            saveShowfile,
+            openShowfile,
+            editName,
+            undo,
+            redo,
+            addRobot,
+            currentTimestamp,
+            playing,
+            togglePlaying,
+            deleteLayer,
+            canRedo,
+            canUndo,
+            sequenceLengthMs,
+            timelineDurationUpdateMode,
+            setTimelineDurationUpdateMode,
+            updateTimelineEventDurations,
+            gridCursorMode,
+            setGridCursorMode,
+            defaultPointType,
+            setDefaultPointType,
+            setDefaultEventDurationMs,
+            defaultEventDurationMs,
+            addPointToSelectedLayer,
+            setSelectedLayerIndex,
+            selectedLayerIndex,
+            removeAudio,
+            deleteTimelineEvent,
+            setTimestamp,
+            addWaitEventAtIndex,
+        }),
+        [
+            updateTimelineEventOrders,
+            show,
+            unsavedChanges,
+            loadAudioFromFile,
+            handleStartPointMove,
+            handlePointMove,
+            handleControlPointMove,
+            handleDeleteStartPoint,
+            handleDeletePoint,
+            handleSwitchPointType,
+            saveShowfile,
+            openShowfile,
+            editName,
+            undo,
+            redo,
+            addRobot,
+            currentTimestamp,
+            playing,
+            togglePlaying,
+            deleteLayer,
+            canRedo,
+            canUndo,
+            sequenceLengthMs,
+            timelineDurationUpdateMode,
+            setTimelineDurationUpdateMode,
+            updateTimelineEventDurations,
+            gridCursorMode,
+            setGridCursorMode,
+            defaultPointType,
+            setDefaultPointType,
+            setDefaultEventDurationMs,
+            defaultEventDurationMs,
+            addPointToSelectedLayer,
+            setSelectedLayerIndex,
+            selectedLayerIndex,
+            removeAudio,
+            deleteTimelineEvent,
+            setTimestamp,
+            addWaitEventAtIndex,
+        ],
+    );
 
     return showfileApi;
 }

From 146c468794a03516f3fa86114ef884d36dc48c6e Mon Sep 17 00:00:00 2001
From: Jason Antwi-Appah <hey@jasonaa.me>
Date: Fri, 25 Apr 2025 03:42:56 -0500
Subject: [PATCH 67/92] Add turn point schema

---
 src/common/show.ts | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/common/show.ts b/src/common/show.ts
index f8e9fdec..d7bff1af 100644
--- a/src/common/show.ts
+++ b/src/common/show.ts
@@ -21,6 +21,7 @@ export const TimelineEventTypes = {
     GoToPointEvent: "goto_point",
     WaitEvent: "wait",
     StartPointEvent: "start_point",
+    TurnEvent: "turn",
 } as const;
 
 export const GoToPointEventSchema = RuntypesRecord({
@@ -46,6 +47,14 @@ const StartPointEventSchema = RuntypesRecord({
 });
 export type StartPointEvent = Static<typeof StartPointEventSchema>;
 
+const TurnEventSchema = RuntypesRecord({
+    type: Literal(TimelineEventTypes.TurnEvent),
+    radians: Number,
+    durationMs: Number,
+    id: String,
+});
+export type TurnEvent = Static<typeof TurnEventSchema>;
+
 const NonStartPointEventSchema = Union(GoToPointEventSchema, WaitEventSchema);
 export type NonStartPointEvent = Static<typeof NonStartPointEventSchema>;
 
@@ -54,7 +63,11 @@ const TimelineLayerSchema = RuntypesRecord({
     remainingEvents: Array(NonStartPointEventSchema),
 });
 export type TimelineLayerType = Static<typeof TimelineLayerSchema>;
-export type TimelineEvents = GoToPointEvent | WaitEvent | StartPointEvent;
+export type TimelineEvents =
+    | GoToPointEvent
+    | WaitEvent
+    | StartPointEvent
+    | TurnEvent;
 
 /**
  * The showfile schema.
@@ -169,6 +182,7 @@ export const EVENT_TYPE_TO_COLOR: Record<
     [TimelineEventTypes.GoToPointEvent]: Colors.BLUE2,
     [TimelineEventTypes.WaitEvent]: Colors.GRAY2,
     [TimelineEventTypes.StartPointEvent]: Colors.GREEN2,
+    [TimelineEventTypes.TurnEvent]: Colors.ORANGE2,
 };
 
 /*

From 1232f203c613b337de29b8ef5f63bc46a478b821 Mon Sep 17 00:00:00 2001
From: Jason Antwi-Appah <hey@jasonaa.me>
Date: Fri, 25 Apr 2025 04:02:10 -0500
Subject: [PATCH 68/92] Add jump to point utility

---
 src/client/editor/editor.tsx        |  2 +-
 src/client/editor/points.tsx        |  6 ++++++
 src/client/editor/spline-editor.tsx | 23 +++++++++++++++++++++++
 src/client/editor/timeline.tsx      |  1 +
 4 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/src/client/editor/editor.tsx b/src/client/editor/editor.tsx
index 6730f88b..fd919d6d 100644
--- a/src/client/editor/editor.tsx
+++ b/src/client/editor/editor.tsx
@@ -411,7 +411,7 @@ export function Editor() {
             <Section
                 title="Timeline"
                 compact
-                style={{ height: "100%" }}
+                style={{ height: "28vh", overflow: "scroll" }}
                 rightElement={
                     <>
                         <SegmentedControl
diff --git a/src/client/editor/points.tsx b/src/client/editor/points.tsx
index 2383bba0..27c916e5 100644
--- a/src/client/editor/points.tsx
+++ b/src/client/editor/points.tsx
@@ -7,6 +7,7 @@ import { useDraggable } from "./hooks";
 export function SplinePoint({
     point,
     onMove,
+    onJumpToPoint,
     onSwitchToQuadratic = undefined,
     onSwitchToCubic = undefined,
     onDelete = undefined,
@@ -16,6 +17,7 @@ export function SplinePoint({
     onDelete?: () => void;
     onSwitchToQuadratic?: () => void;
     onSwitchToCubic?: () => void;
+    onJumpToPoint: () => void;
 }) {
     // TODO: fix context menu positioning
     const mainPointRef = useRef<HTMLElement>(null);
@@ -46,6 +48,10 @@ export function SplinePoint({
                             onClick={onSwitchToCubic}
                         />
                     )}
+                    <MenuItem
+                    text="Jump to Point on Timeline"
+                    onClick={onJumpToPoint}
+                    />
                     <MenuItem
                         text="Delete..."
                         intent="danger"
diff --git a/src/client/editor/spline-editor.tsx b/src/client/editor/spline-editor.tsx
index 0fc5ae71..cb5a9ab6 100644
--- a/src/client/editor/spline-editor.tsx
+++ b/src/client/editor/spline-editor.tsx
@@ -77,6 +77,11 @@ export function SplineEditor({
                     spline.points.length > 0 ? onDeleteStartPoint : undefined
                 }
                 onMove={(x, y) => onStartPointMove({ x, y })}
+                onJumpToPoint={() => {
+                    // TODO: i don't like that we're touching elements by ids and mucking w dom outside of react - see if theres a way to refactor this in a more idiomatic react way
+                    const el = document.getElementById(`timeline-event-${layer.startPoint.id}`)
+                    navigateAndIdentifyTimelineElement(el as HTMLElement);
+                }}
             />
             {spline.points.map((point, index) => (
                 <Fragment key={`point-group-${index}`}>
@@ -100,6 +105,12 @@ export function SplineEditor({
                                 SplinePointType.CubicBezier,
                             )
                         }
+                        onJumpToPoint={() => {
+                            const originalIndex = getOriginalEventIndex(index);
+                            const el = document.getElementById(`timeline-event-${layer.remainingEvents[originalIndex].id}`)
+                            navigateAndIdentifyTimelineElement(el as HTMLElement);
+
+                        }}
                     />
                     {/* TODO: add line between control point and end point */}
                     {point.type === SplinePointType.CubicBezier && (
@@ -118,3 +129,15 @@ export function SplineEditor({
         </>
     );
 }
+
+function navigateAndIdentifyTimelineElement(element: HTMLElement) {
+    element?.scrollIntoView({
+        inline: "start",
+        block: "end",
+    });
+    const originalBackgroundColor = element.style.backgroundColor;
+    element.style.backgroundColor = "black";
+    setTimeout(() => {
+        element.style.backgroundColor = originalBackgroundColor;
+    }, 500);
+}
\ No newline at end of file
diff --git a/src/client/editor/timeline.tsx b/src/client/editor/timeline.tsx
index 5cd19814..aa29a7f2 100644
--- a/src/client/editor/timeline.tsx
+++ b/src/client/editor/timeline.tsx
@@ -121,6 +121,7 @@ export function TimelineEvent(props: {
         >
             <Card
                 ref={ref}
+                id={`timeline-event-${event.id}`}
                 style={{
                     width: millisToPixels(event.durationMs),
                     backgroundColor: EVENT_TYPE_TO_COLOR[event.type],

From 0850cc97c290c26386d4f306caf3d1e3e8553411 Mon Sep 17 00:00:00 2001
From: Jason Antwi-Appah <hey@jasonaa.me>
Date: Fri, 25 Apr 2025 04:43:13 -0500
Subject: [PATCH 69/92] Jump to beginning on playback if last playback finished
 at end of timeline

---
 src/client/editor/hooks.ts | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/client/editor/hooks.ts b/src/client/editor/hooks.ts
index ab5e1e65..80b39110 100644
--- a/src/client/editor/hooks.ts
+++ b/src/client/editor/hooks.ts
@@ -179,6 +179,7 @@ export function useStateWithTrackedHistory<T>(initialValue: T) {
 
 export function usePlayHead(endDurationMs: number, startMs = 0) {
     const [playing, setPlaying] = useState(false);
+    const [stoppedAtEnd, setStoppedAtEnd] = useState(false);
     const currentTimestamp = useMotionValue(startMs);
     const time = useTime();
     const lastAccessedTime = useMotionValue(0);
@@ -191,12 +192,16 @@ export function usePlayHead(endDurationMs: number, startMs = 0) {
         setPlaying((p) => {
             const newPlaying = !p;
             if (newPlaying) {
+                if (stoppedAtEnd) {
+                    currentTimestamp.set(0);
+                }
+                setStoppedAtEnd(false);
                 // When starting playback, initialize the lastAccessedTime
                 lastAccessedTime.set(time.get());
             }
             return newPlaying;
         });
-    }, [setPlaying, time, lastAccessedTime]);
+    }, [stoppedAtEnd, lastAccessedTime, time, currentTimestamp]);
 
     useMotionValueEvent(time, "change", (currentTime) => {
         if (!playing) {
@@ -210,7 +215,7 @@ export function usePlayHead(endDurationMs: number, startMs = 0) {
 
         if (newTimestamp >= endDurationMs) {
             setPlaying(false);
-            currentTimestamp.set(0);
+            setStoppedAtEnd(true);
         } else {
             currentTimestamp.set(newTimestamp);
         }

From 004637a727a2f4da104bfadcb97f03b127734944 Mon Sep 17 00:00:00 2001
From: Mason Thomas <Kandleseatwicks@gmail.com>
Date: Fri, 25 Apr 2025 05:13:33 -0500
Subject: [PATCH 70/92] update quadratic and cubic to have multiple control
 points

---
 src/server/command/move-command.ts | 8 ++++++--
 src/server/robot/robot.ts          | 8 ++++++--
 src/server/utils/tcp-packet.ts     | 4 +++-
 3 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/server/command/move-command.ts b/src/server/command/move-command.ts
index d27c963b..f7101869 100644
--- a/src/server/command/move-command.ts
+++ b/src/server/command/move-command.ts
@@ -88,7 +88,8 @@ export class DriveCubicSplineCommand extends RobotCommand {
         robotId: string,
         public startPosition: Position,
         public endPosition: Position,
-        public controlPosition: Position,
+        public controlPositionA: Position,
+        public controlPositionB: Position,
         public timeDeltaMs: number,
     ) {
         super(robotId);
@@ -99,7 +100,8 @@ export class DriveCubicSplineCommand extends RobotCommand {
         return robot.sendDriveCubicPacket(
             this.startPosition,
             this.endPosition,
-            this.controlPosition,
+            this.controlPositionA,
+            this.controlPositionB,
             this.timeDeltaMs,
         );
     }
@@ -124,6 +126,7 @@ export class DriveQuadraticSplineCommand extends RobotCommand {
         robotId: string,
         public startPosition: Position,
         public endPosition: Position,
+        public controlPosition: Position,
         public timeDeltaMs: number,
     ) {
         super(robotId);
@@ -133,6 +136,7 @@ export class DriveQuadraticSplineCommand extends RobotCommand {
         return robot.sendDriveQuadraticPacket(
             this.startPosition,
             this.endPosition,
+            this.controlPosition,
             this.timeDeltaMs,
         );
     }
diff --git a/src/server/robot/robot.ts b/src/server/robot/robot.ts
index 25c637df..20dd34f8 100644
--- a/src/server/robot/robot.ts
+++ b/src/server/robot/robot.ts
@@ -133,7 +133,8 @@ export class Robot {
     public async sendDriveCubicPacket(
         startPosition: Position,
         endPosition: Position,
-        controlPosition: Position,
+        controlPositionA: Position,
+        controlPositionB: Position,
         timeDeltaMs: number,
     ): Promise<void> {
         const tunnel = this.getTunnel();
@@ -141,7 +142,8 @@ export class Robot {
             type: PacketType.DRIVE_CUBIC_SPLINE,
             startPosition: startPosition,
             endPosition: endPosition,
-            controlPosition: controlPosition,
+            controlPositionA: controlPositionA,
+            controlPositionB: controlPositionB,
             timeDeltaMs: timeDeltaMs,
         });
     }
@@ -149,12 +151,14 @@ export class Robot {
     public async sendDriveQuadraticPacket(
         startPosition: Position,
         endPosition: Position,
+        controlPosition: Position,
         timeDeltaMs: number,
     ): Promise<void> {
         const tunnel = this.getTunnel();
         await tunnel.send({
             type: PacketType.DRIVE_QUADRATIC_SPLINE,
             startPosition: startPosition,
+            controlPosition: controlPosition,
             endPosition: endPosition,
             timeDeltaMs: timeDeltaMs,
         });
diff --git a/src/server/utils/tcp-packet.ts b/src/server/utils/tcp-packet.ts
index 11e6b5dd..a7e3f37a 100644
--- a/src/server/utils/tcp-packet.ts
+++ b/src/server/utils/tcp-packet.ts
@@ -165,7 +165,8 @@ export const DRIVE_CUBIC_SPLINE_SCHEMA = Record({
     type: Literal(PacketType.DRIVE_CUBIC_SPLINE),
     startPosition: Position,
     endPosition: Position,
-    controlPosition: Position,
+    controlPositionA: Position,
+    controlPositionB: Position,
     timeDeltaMs: Int32,
 });
 
@@ -173,6 +174,7 @@ export const DRIVE_QUADRATIC_SPLINE_SCHEMA = Record({
     type: Literal(PacketType.DRIVE_QUADRATIC_SPLINE),
     startPosition: Position,
     endPosition: Position,
+    controlPosition: Position,
     timeDeltaMs: Int32,
 });
 

From feec1fa97edf2181af3c016547c12aac79cc91a7 Mon Sep 17 00:00:00 2001
From: Jason Antwi-Appah <hey@jasonaa.me>
Date: Fri, 25 Apr 2025 05:20:28 -0500
Subject: [PATCH 71/92] Support jumping to timestamp on timeline

---
 src/client/editor/editor.tsx        | 38 +++++++++++++++++++++--------
 src/client/editor/points.tsx        |  4 +--
 src/client/editor/spline-editor.tsx | 15 ++++++++----
 src/client/editor/timeline.tsx      |  1 -
 4 files changed, 40 insertions(+), 18 deletions(-)

diff --git a/src/client/editor/editor.tsx b/src/client/editor/editor.tsx
index fd919d6d..cb8d17c9 100644
--- a/src/client/editor/editor.tsx
+++ b/src/client/editor/editor.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef } from "react";
+import { useCallback, useEffect, useMemo, useRef } from "react";
 import {
     Section,
     EditableText,
@@ -225,6 +225,18 @@ export function Editor() {
             },
         });
     }, [setTimestamp]);
+
+    const handleSeekBarClick = useCallback(
+        (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+            const { x: mouseX } = e.nativeEvent;
+            const seekBar = seekBarRef.current;
+            if (!seekBar) return;
+            const { x: seekBarStartX } = seekBar.getBoundingClientRect();
+            const newTimestamp = pixelsToMillis(mouseX - seekBarStartX);
+            setTimestamp(newTimestamp);
+        },
+        [setTimestamp],
+    );
     return (
         <div
             style={{ maxHeight: "100vh" }}
@@ -509,15 +521,21 @@ export function Editor() {
                 >
                     <Ruler sequenceLengthMs={sequenceLengthMs} />
                     <TimelineLayer title="Seek">
-                        <motion.div
-                            ref={seekBarRef}
-                            style={{
-                                display: "flex",
-                                backgroundColor: "red",
-                                height: "1rem",
-                                width: seekBarWidth,
-                            }}
-                        />
+                        <div
+                            style={{ width: "100%" }}
+                            onClick={handleSeekBarClick}
+                        >
+                            <motion.div
+                                ref={seekBarRef}
+                                style={{
+                                    display: "flex",
+                                    backgroundColor: "red",
+                                    height: "1rem",
+                                    width: seekBarWidth,
+                                }}
+                                onClick={handleSeekBarClick}
+                            />
+                        </div>
                     </TimelineLayer>
                     {show.timeline.map(
                         ({ startPoint, remainingEvents }, layerIndex) => {
diff --git a/src/client/editor/points.tsx b/src/client/editor/points.tsx
index 27c916e5..19c8245b 100644
--- a/src/client/editor/points.tsx
+++ b/src/client/editor/points.tsx
@@ -49,8 +49,8 @@ export function SplinePoint({
                         />
                     )}
                     <MenuItem
-                    text="Jump to Point on Timeline"
-                    onClick={onJumpToPoint}
+                        text="Jump to Point on Timeline"
+                        onClick={onJumpToPoint}
                     />
                     <MenuItem
                         text="Delete..."
diff --git a/src/client/editor/spline-editor.tsx b/src/client/editor/spline-editor.tsx
index cb5a9ab6..dd917158 100644
--- a/src/client/editor/spline-editor.tsx
+++ b/src/client/editor/spline-editor.tsx
@@ -79,7 +79,9 @@ export function SplineEditor({
                 onMove={(x, y) => onStartPointMove({ x, y })}
                 onJumpToPoint={() => {
                     // TODO: i don't like that we're touching elements by ids and mucking w dom outside of react - see if theres a way to refactor this in a more idiomatic react way
-                    const el = document.getElementById(`timeline-event-${layer.startPoint.id}`)
+                    const el = document.getElementById(
+                        `timeline-event-${layer.startPoint.id}`,
+                    );
                     navigateAndIdentifyTimelineElement(el as HTMLElement);
                 }}
             />
@@ -107,9 +109,12 @@ export function SplineEditor({
                         }
                         onJumpToPoint={() => {
                             const originalIndex = getOriginalEventIndex(index);
-                            const el = document.getElementById(`timeline-event-${layer.remainingEvents[originalIndex].id}`)
-                            navigateAndIdentifyTimelineElement(el as HTMLElement);
-
+                            const el = document.getElementById(
+                                `timeline-event-${layer.remainingEvents[originalIndex].id}`,
+                            );
+                            navigateAndIdentifyTimelineElement(
+                                el as HTMLElement,
+                            );
                         }}
                     />
                     {/* TODO: add line between control point and end point */}
@@ -140,4 +145,4 @@ function navigateAndIdentifyTimelineElement(element: HTMLElement) {
     setTimeout(() => {
         element.style.backgroundColor = originalBackgroundColor;
     }, 500);
-}
\ No newline at end of file
+}
diff --git a/src/client/editor/timeline.tsx b/src/client/editor/timeline.tsx
index aa29a7f2..5775552d 100644
--- a/src/client/editor/timeline.tsx
+++ b/src/client/editor/timeline.tsx
@@ -201,7 +201,6 @@ export const TimelineLayer = forwardRef<
                         />
                     )}
                 </Text>
-                {}
                 {onDelete && (
                     <Button
                         icon="trash"

From 40766fde12433d880ac8c6cbcf3efbd7a26cb1e6 Mon Sep 17 00:00:00 2001
From: Jason Antwi-Appah <hey@jasonaa.me>
Date: Fri, 25 Apr 2025 06:46:37 -0500
Subject: [PATCH 72/92] Allow turn events to be added on timeline

---
 src/client/editor/editor.tsx        | 30 +++++++++++++++++++++++++++++
 src/client/editor/showfile-state.ts | 26 +++++++++++++++++++++++++
 src/client/editor/timeline.tsx      | 21 +++++++++++++++-----
 src/common/getRobotStateAtTime.ts   | 10 ++++++++++
 src/common/show.ts                  |  6 +++++-
 5 files changed, 87 insertions(+), 6 deletions(-)

diff --git a/src/client/editor/editor.tsx b/src/client/editor/editor.tsx
index cb8d17c9..32b157c8 100644
--- a/src/client/editor/editor.tsx
+++ b/src/client/editor/editor.tsx
@@ -140,6 +140,7 @@ export function Editor() {
         deleteTimelineEvent,
         setTimestamp,
         addWaitEventAtIndex,
+        addTurnEventAtIndex,
     } = useShowfile();
 
     // TODO: fix viewport height / timeline height
@@ -559,6 +560,18 @@ export function Editor() {
                                                     ms,
                                                 )
                                             }
+                                            onAddWaitEvent={() => {
+                                                addWaitEventAtIndex(
+                                                    layerIndex,
+                                                    0,
+                                                );
+                                            }}
+                                            onAddTurnEvent={(e) => {
+                                                addTurnEventAtIndex(
+                                                    layerIndex,
+                                                    0,
+                                                );
+                                            }}
                                         />
                                         <Reorder.Group
                                             as="div"
@@ -613,6 +626,23 @@ export function Editor() {
                                                                             1,
                                                                     )
                                                             }
+                                                            onAddTurnEvent={(
+                                                                position,
+                                                            ) =>
+                                                                (
+                                                                    position ===
+                                                                    "before"
+                                                                ) ?
+                                                                    addTurnEventAtIndex(
+                                                                        layerIndex,
+                                                                        eventIndex,
+                                                                    )
+                                                                :   addTurnEventAtIndex(
+                                                                        layerIndex,
+                                                                        eventIndex +
+                                                                            1,
+                                                                    )
+                                                            }
                                                         />
                                                     );
                                                 },
diff --git a/src/client/editor/showfile-state.ts b/src/client/editor/showfile-state.ts
index 88cfbf3d..6c479647 100644
--- a/src/client/editor/showfile-state.ts
+++ b/src/client/editor/showfile-state.ts
@@ -19,6 +19,7 @@ import {
     CHESSBOTS_SHOWFILE_EXTENSION,
     GridCursorMode,
     WaitEvent,
+    TurnEvent,
 } from "../../common/show";
 import {
     SplinePointType,
@@ -599,6 +600,29 @@ export function useShowfile() {
         [show, defaultEventDurationMs, setShow],
     );
 
+    const addTurnEventAtIndex = useCallback(
+        (layerIndex: number, eventIndex: number) => {
+            const newTimeline = [...show.timeline];
+            const layer = newTimeline[layerIndex];
+            if (!layer) return;
+            const { startPoint, remainingEvents } = layer;
+            const events = [...remainingEvents];
+            const eventToAdd: TurnEvent = {
+                id: crypto.randomUUID(),
+                type: TimelineEventTypes.TurnEvent,
+                durationMs: defaultEventDurationMs,
+                radians: 2 * Math.PI,
+            };
+            events.splice(eventIndex, 0, eventToAdd);
+            newTimeline[layerIndex] = {
+                startPoint,
+                remainingEvents: events,
+            };
+            setShow({ ...show, timeline: newTimeline });
+        },
+        [show, defaultEventDurationMs, setShow],
+    );
+
     const showfileApi = useMemo(
         () => ({
             updateTimelineEventOrders,
@@ -640,6 +664,7 @@ export function useShowfile() {
             deleteTimelineEvent,
             setTimestamp,
             addWaitEventAtIndex,
+            addTurnEventAtIndex,
         }),
         [
             updateTimelineEventOrders,
@@ -681,6 +706,7 @@ export function useShowfile() {
             deleteTimelineEvent,
             setTimestamp,
             addWaitEventAtIndex,
+            addTurnEventAtIndex,
         ],
     );
 
diff --git a/src/client/editor/timeline.tsx b/src/client/editor/timeline.tsx
index 5775552d..30224960 100644
--- a/src/client/editor/timeline.tsx
+++ b/src/client/editor/timeline.tsx
@@ -25,11 +25,13 @@ export function ReorderableTimelineEvent({
     onDurationChange,
     onDelete,
     onAddWaitEvent,
+    onAddTurnEvent,
 }: PropsWithChildren<{
     event: TimelineEvents;
     onDurationChange: (ms: number) => void;
     onDelete?: () => void;
     onAddWaitEvent?: (position: "before" | "after") => void;
+    onAddTurnEvent?: (position: "before" | "after") => void;
 }>) {
     const controls = useDragControls();
 
@@ -45,6 +47,7 @@ export function ReorderableTimelineEvent({
                 onDurationChange={onDurationChange}
                 onDelete={onDelete}
                 onAddWaitEvent={onAddWaitEvent}
+                onAddTurnEvent={onAddTurnEvent}
             />
         </Reorder.Item>
     );
@@ -58,6 +61,7 @@ export function TimelineEvent(props: {
     onDurationChange?: (deltaMs: number) => void;
     onDelete?: () => void;
     onAddWaitEvent?: (position: "before" | "after") => void;
+    onAddTurnEvent?: (position: "before" | "after") => void;
 }) {
     const ref = useRef<HTMLDivElement>(null);
     const {
@@ -66,6 +70,7 @@ export function TimelineEvent(props: {
         onDurationChange,
         onDelete,
         onAddWaitEvent,
+        onAddTurnEvent,
     } = props;
     useEffect(() => {
         if (!onDurationChange) return;
@@ -86,8 +91,6 @@ export function TimelineEvent(props: {
         });
     }, [event.type, onDurationChange]);
 
-    // TODO: add context menu for adding a new event before and after this one
-
     return (
         <ContextMenu
             content={
@@ -106,13 +109,21 @@ export function TimelineEvent(props: {
                                 text="Add Wait After"
                                 onClick={() => onAddWaitEvent("after")}
                             />
+                            <MenuItem
+                                text="Add Wait Before"
+                                onClick={() => onAddWaitEvent("before")}
+                            />
                         </>
                     )}
-                    {onAddWaitEvent && (
+                    {onAddTurnEvent && (
                         <>
                             <MenuItem
-                                text="Add Wait Before"
-                                onClick={() => onAddWaitEvent("before")}
+                                text="Add 360 Turn After"
+                                onClick={() => onAddTurnEvent("after")}
+                            />
+                            <MenuItem
+                                text="Add 360 Turn Before"
+                                onClick={() => onAddTurnEvent("before")}
                             />
                         </>
                     )}
diff --git a/src/common/getRobotStateAtTime.ts b/src/common/getRobotStateAtTime.ts
index f01618ad..45460384 100644
--- a/src/common/getRobotStateAtTime.ts
+++ b/src/common/getRobotStateAtTime.ts
@@ -131,6 +131,16 @@ export function getRobotStateAtTime(
                         ),
                 };
             }
+
+            if (currentEvent.type === TimelineEventTypes.TurnEvent) {
+                const radians = currentEvent.radians;
+                const currentHeading = previousHeadingRad + radians * progress;
+
+                return {
+                    position: previousPoint,
+                    headingRadians: currentHeading,
+                };
+            }
         }
 
         // Update state for the next iteration
diff --git a/src/common/show.ts b/src/common/show.ts
index d7bff1af..20e5b475 100644
--- a/src/common/show.ts
+++ b/src/common/show.ts
@@ -55,7 +55,11 @@ const TurnEventSchema = RuntypesRecord({
 });
 export type TurnEvent = Static<typeof TurnEventSchema>;
 
-const NonStartPointEventSchema = Union(GoToPointEventSchema, WaitEventSchema);
+const NonStartPointEventSchema = Union(
+    GoToPointEventSchema,
+    WaitEventSchema,
+    TurnEventSchema,
+);
 export type NonStartPointEvent = Static<typeof NonStartPointEventSchema>;
 
 const TimelineLayerSchema = RuntypesRecord({

From b6fd5fcc75b8ef3e4541edf227b7671ae5d96049 Mon Sep 17 00:00:00 2001
From: Jason Antwi-Appah <hey@jasonaa.me>
Date: Fri, 25 Apr 2025 11:26:53 -0500
Subject: [PATCH 73/92] Add scuffed support for copy/paste

---
 src/client/editor/editor.tsx        | 131 +++++++++++++++++++++++++++-
 src/client/editor/showfile-state.ts |  38 +++++++-
 src/client/editor/spline-editor.tsx |  17 +++-
 src/common/show.ts                  |  10 ++-
 4 files changed, 187 insertions(+), 9 deletions(-)

diff --git a/src/client/editor/editor.tsx b/src/client/editor/editor.tsx
index 32b157c8..623c35f7 100644
--- a/src/client/editor/editor.tsx
+++ b/src/client/editor/editor.tsx
@@ -19,6 +19,7 @@ import {
     GridCursorMode,
     millisToPixels,
     NonStartPointEvent,
+    NonStartPointEventSchema,
     pixelsToMillis,
     RULER_TICK_GAP_PX,
     TimelineDurationUpdateMode,
@@ -44,6 +45,7 @@ import { MotionRobot } from "./motion-robot";
 import { TimelineLayerType } from "../../common/show";
 import { SplineEditor } from "./spline-editor";
 import interact from "interactjs";
+import { Array as RArray } from "runtypes";
 
 // Helper component to manage animation for a single robot
 function AnimatedRobotRenderer({
@@ -141,6 +143,8 @@ export function Editor() {
         setTimestamp,
         addWaitEventAtIndex,
         addTurnEventAtIndex,
+        getLayerIndexFromEventId,
+        addBulkEventsToSelectedLayer,
     } = useShowfile();
 
     // TODO: fix viewport height / timeline height
@@ -201,8 +205,131 @@ export function Editor() {
                     togglePlaying();
                 },
             },
+            {
+                combo: "mod+c",
+                group: "Editor",
+                global: true,
+                label: "Copy",
+                onKeyDown: async (e) => {
+                    const selection = window.getSelection();
+                    if (!selection) return;
+
+                    const startEl =
+                        selection?.anchorNode?.parentElement?.parentElement;
+                    const endEl =
+                        selection?.focusNode?.parentElement?.parentElement;
+                    if (!startEl || !endEl) return;
+                    console.log(startEl, endEl);
+
+                    if (
+                        startEl.parentNode?.parentNode?.parentNode !==
+                        endEl.parentNode?.parentNode?.parentNode
+                    ) {
+                        console.warn(
+                            "Selection is not within the same layer",
+                            startEl.parentNode?.parentNode?.parentNode,
+                            endEl.parentNode?.parentNode?.parentNode,
+                        );
+                        return;
+                    }
+
+                    const timelineEventIdRegex = /^timeline-event-(.+)$/;
+                    const startElId = startEl.id;
+                    const endElId = endEl.id;
+                    const startEventId =
+                        startElId.match(timelineEventIdRegex)?.[1];
+                    const endEventId = endElId.match(timelineEventIdRegex)?.[1];
+                    console.log(startEventId, endEventId);
+
+                    if (!startEventId || !endEventId) return;
+
+                    e.preventDefault();
+                    e.stopPropagation();
+
+                    console.log("WOO");
+
+                    const layerIndex = getLayerIndexFromEventId(startEventId);
+                    if (layerIndex === -1) {
+                        console.warn("Layer not found");
+                        return;
+                    }
+
+                    const layer = show.timeline[layerIndex];
+
+                    const startIdx = layer.remainingEvents.findIndex(
+                        (event) => event.id === startEventId,
+                    );
+                    const endIdx = layer.remainingEvents.findIndex(
+                        (event) => event.id === endEventId,
+                    );
+
+                    if (startIdx === -1 || endIdx === -1) return;
+
+                    const selectedEvents = layer.remainingEvents.slice(
+                        startIdx,
+                        endIdx + 1,
+                    );
+                    console.log(selectedEvents);
+
+                    await navigator.clipboard.writeText(
+                        JSON.stringify(selectedEvents),
+                    );
+                },
+            },
+            {
+                combo: "mod+v",
+                group: "Editor",
+                global: true,
+                label: "Paste",
+                onKeyDown: async (e) => {
+                    const pasteResult = await navigator.clipboard.readText();
+                    if (!pasteResult) return;
+
+                    let pastedEvents: unknown;
+                    try {
+                        pastedEvents = JSON.parse(pasteResult);
+                    } catch (e) {
+                        console.warn("Failed to parse pasted events", e);
+                        return;
+                    }
+
+                    if (!Array.isArray(pastedEvents)) {
+                        console.warn("Pasted events are not an array");
+                        return;
+                    }
+
+                    const checkResult = RArray(
+                        NonStartPointEventSchema,
+                    ).validate(pastedEvents);
+                    if (!checkResult.success) {
+                        console.warn(
+                            "Pasted events are not valid",
+                            checkResult,
+                        );
+                        return;
+                    }
+
+                    e.preventDefault();
+                    e.stopPropagation();
+
+                    for (const event of checkResult.value) {
+                        event.id = crypto.randomUUID();
+                    }
+
+                    addBulkEventsToSelectedLayer(checkResult.value);
+                },
+            },
+        ],
+        [
+            saveShowfile,
+            openShowfile,
+            undo,
+            redo,
+            togglePlaying,
+            getLayerIndexFromEventId,
+            show.timeline,
+            addBulkEventsToSelectedLayer,
         ],
-        [redo, undo, saveShowfile, openShowfile, togglePlaying],
     );
 
     const { handleKeyDown, handleKeyUp } = useHotkeys(hotkeys);
@@ -566,7 +693,7 @@ export function Editor() {
                                                     0,
                                                 );
                                             }}
-                                            onAddTurnEvent={(e) => {
+                                            onAddTurnEvent={() => {
                                                 addTurnEventAtIndex(
                                                     layerIndex,
                                                     0,
diff --git a/src/client/editor/showfile-state.ts b/src/client/editor/showfile-state.ts
index 6c479647..50f6a8f4 100644
--- a/src/client/editor/showfile-state.ts
+++ b/src/client/editor/showfile-state.ts
@@ -364,15 +364,18 @@ export function useShowfile() {
                         y: 70,
                     },
                 },
-                durationMs: 7500,
+                durationMs: defaultEventDurationMs,
             },
             remainingEvents: [],
         };
+        const layers = [...show.timeline, newLayer];
         setShow({
             ...show,
-            timeline: [...show.timeline, newLayer],
+            timeline: layers,
         });
-    }, [show, setShow]);
+
+        setSelectedLayerIndex(layers.length - 1);
+    }, [show, setShow, defaultEventDurationMs]);
 
     // Calculate sequenceLengthMs dynamically
     const sequenceLengthMs = useMemo(() => {
@@ -623,6 +626,31 @@ export function useShowfile() {
         [show, defaultEventDurationMs, setShow],
     );
 
+    const getLayerIndexFromEventId = useCallback(
+        (eventId: string) => {
+            const layerIndex = show.timeline.findIndex((layer) =>
+                layer.remainingEvents.find((event) => event.id === eventId),
+            );
+            return layerIndex;
+        },
+        [show],
+    );
+
+    const addBulkEventsToSelectedLayer = useCallback(
+        (events: NonStartPointEvent[]) => {
+            const newTimeline = [...show.timeline];
+            const layer = newTimeline[selectedLayerIndex];
+            if (!layer) return;
+            const { startPoint } = layer;
+            newTimeline[selectedLayerIndex] = {
+                startPoint,
+                remainingEvents: [...layer.remainingEvents, ...events],
+            };
+            setShow({ ...show, timeline: newTimeline });
+        },
+        [show, selectedLayerIndex, setShow],
+    );
+
     const showfileApi = useMemo(
         () => ({
             updateTimelineEventOrders,
@@ -665,6 +693,8 @@ export function useShowfile() {
             setTimestamp,
             addWaitEventAtIndex,
             addTurnEventAtIndex,
+            getLayerIndexFromEventId,
+            addBulkEventsToSelectedLayer,
         }),
         [
             updateTimelineEventOrders,
@@ -707,6 +737,8 @@ export function useShowfile() {
             setTimestamp,
             addWaitEventAtIndex,
             addTurnEventAtIndex,
+            getLayerIndexFromEventId,
+            addBulkEventsToSelectedLayer,
         ],
     );
 
diff --git a/src/client/editor/spline-editor.tsx b/src/client/editor/spline-editor.tsx
index dd917158..4c0bfa75 100644
--- a/src/client/editor/spline-editor.tsx
+++ b/src/client/editor/spline-editor.tsx
@@ -136,12 +136,25 @@ export function SplineEditor({
 }
 
 function navigateAndIdentifyTimelineElement(element: HTMLElement) {
-    element?.scrollIntoView({
+    element.scrollIntoView({
         inline: "start",
         block: "end",
     });
     const originalBackgroundColor = element.style.backgroundColor;
-    element.style.backgroundColor = "black";
+    const flashColor = "black";
+    element.style.backgroundColor = flashColor;
+    setTimeout(() => {
+        element.style.backgroundColor = originalBackgroundColor;
+    }, 100);
+    setTimeout(() => {
+        element.style.backgroundColor = flashColor;
+    }, 200);
+    setTimeout(() => {
+        element.style.backgroundColor = originalBackgroundColor;
+    }, 300);
+    setTimeout(() => {
+        element.style.backgroundColor = flashColor;
+    }, 400);
     setTimeout(() => {
         element.style.backgroundColor = originalBackgroundColor;
     }, 500);
diff --git a/src/common/show.ts b/src/common/show.ts
index 20e5b475..2fec859f 100644
--- a/src/common/show.ts
+++ b/src/common/show.ts
@@ -55,7 +55,7 @@ const TurnEventSchema = RuntypesRecord({
 });
 export type TurnEvent = Static<typeof TurnEventSchema>;
 
-const NonStartPointEventSchema = Union(
+export const NonStartPointEventSchema = Union(
     GoToPointEventSchema,
     WaitEventSchema,
     TurnEventSchema,
@@ -132,10 +132,16 @@ export function createNewShowfile(): Showfile {
                             y: 140,
                         },
                     },
-                    durationMs: 7500,
+                    durationMs: 3000,
                     id: "4f21401d-07cf-434f-a73c-6482ab82f210",
                 },
                 remainingEvents: [
+                    {
+                        id: "a8e97232-8f22-4cc2-bcc4-ab523eeb801d",
+                        type: TimelineEventTypes.TurnEvent,
+                        durationMs: 750,
+                        radians: 2 * Math.PI,
+                    },
                     {
                         type: TimelineEventTypes.GoToPointEvent,
                         durationMs: 1000,

From c47cbe9d568bb7ff8aff41e9256ef4c707e26abb Mon Sep 17 00:00:00 2001
From: Mason Thomas <Kandleseatwicks@gmail.com>
Date: Fri, 25 Apr 2025 17:22:47 -0500
Subject: [PATCH 74/92] change drive schema. update how send parallel works

---
 src/server/api/api.ts                 | 33 +++++++++++++++++++++++----
 src/server/api/bot-server-config.json |  3 ++-
 src/server/command/move-command.ts    | 21 +++++++++++------
 src/server/robot/robot.ts             | 14 ++++++------
 4 files changed, 52 insertions(+), 19 deletions(-)

diff --git a/src/server/api/api.ts b/src/server/api/api.ts
index 2daf44a2..7b7d926c 100644
--- a/src/server/api/api.ts
+++ b/src/server/api/api.ts
@@ -32,8 +32,12 @@ import { VirtualBotTunnel, virtualRobots } from "../simulator";
 import { Position } from "../robot/position";
 import { DEGREE } from "../../common/units";
 import { PacketType } from "../utils/tcp-packet";
-import { DriveTicksCommand } from "../command/move-command";
-import { Command, ParallelCommandGroup } from "../command/command";
+import { DriveQuadraticSplineCommand } from "../command/move-command";
+import {
+    Command,
+    ParallelCommandGroup,
+    SequentialCommandGroup,
+} from "../command/command";
 
 export const executor = new CommandExecutor();
 
@@ -214,11 +218,32 @@ apiRouter.get("/do-parallel", async (_, res) => {
     for (const [, robot] of robotsEntries) {
         console.log("Moving robot " + robot.id);
         // await robot.sendDrivePacket(1);
-        commands.push(new DriveTicksCommand(robot.id, 200000));
+        commands.push(
+            new SequentialCommandGroup([
+                new DriveQuadraticSplineCommand(
+                    robot.id,
+                    { x: 0, y: 0 },
+                    { x: 3, y: 3 },
+                    { x: 0, y: 3 },
+                    4000,
+                ),
+                new DriveQuadraticSplineCommand(
+                    robot.id,
+                    { x: 0, y: 0 },
+                    { x: 0, y: 0 },
+                    { x: 0, y: 0 },
+                    30,
+                ),
+            ]),
+        );
     }
+    const start = Date.now();
+    console.log("Starting command group");
     await new ParallelCommandGroup(commands).execute();
+    const time = Date.now() - start;
+    console.log("Finished command group in " + time + "ms");
 
-    res.send({ message: "success" });
+    res.send({ message: "success", timeMs: time });
 });
 
 /**
diff --git a/src/server/api/bot-server-config.json b/src/server/api/bot-server-config.json
index 2d353964..70222183 100644
--- a/src/server/api/bot-server-config.json
+++ b/src/server/api/bot-server-config.json
@@ -4,7 +4,8 @@
         "80:65:99:4d:f3:e8": "robot-15",
         "c0:4e:30:4b:68:76": "robot-11",
         "80:65:99:4d:f3:9a": "robot-3",
-        "80:65:99:4d:f4:2a": "robot-4"
+        "80:65:99:4e:07:9c": "robot-5",
+        "80:65:99:4e:07:70": "robot-4"
     },
     "robot-1": {
         "attributes": {},
diff --git a/src/server/command/move-command.ts b/src/server/command/move-command.ts
index f7101869..b4680daa 100644
--- a/src/server/command/move-command.ts
+++ b/src/server/command/move-command.ts
@@ -86,10 +86,10 @@ export class RotateToStartCommand extends RobotCommand {
 export class DriveCubicSplineCommand extends RobotCommand {
     constructor(
         robotId: string,
-        public startPosition: Position,
-        public endPosition: Position,
-        public controlPositionA: Position,
-        public controlPositionB: Position,
+        public startPosition: { x: number; y: number },
+        public endPosition: { x: number; y: number },
+        public controlPositionA: { x: number; y: number },
+        public controlPositionB: { x: number; y: number },
         public timeDeltaMs: number,
     ) {
         super(robotId);
@@ -124,9 +124,9 @@ export class SpinRadiansCommand extends RobotCommand {
 export class DriveQuadraticSplineCommand extends RobotCommand {
     constructor(
         robotId: string,
-        public startPosition: Position,
-        public endPosition: Position,
-        public controlPosition: Position,
+        public startPosition: { x: number; y: number },
+        public endPosition: { x: number; y: number },
+        public controlPosition: { x: number; y: number },
         public timeDeltaMs: number,
     ) {
         super(robotId);
@@ -142,6 +142,13 @@ export class DriveQuadraticSplineCommand extends RobotCommand {
     }
 }
 
+export class StopCommand extends RobotCommand {
+    public async execute(): Promise<void> {
+        const robot = robotManager.getRobot(this.robotId);
+        return robot.sendDrivePacket(0);
+    }
+}
+
 /**
  * Drives a robot for a distance equal to a number of tiles. Distance
  * may be negative, indicating the robot drives backwards.
diff --git a/src/server/robot/robot.ts b/src/server/robot/robot.ts
index 20dd34f8..02230a5d 100644
--- a/src/server/robot/robot.ts
+++ b/src/server/robot/robot.ts
@@ -131,10 +131,10 @@ export class Robot {
     }
 
     public async sendDriveCubicPacket(
-        startPosition: Position,
-        endPosition: Position,
-        controlPositionA: Position,
-        controlPositionB: Position,
+        startPosition: { x: number; y: number },
+        endPosition: { x: number; y: number },
+        controlPositionA: { x: number; y: number },
+        controlPositionB: { x: number; y: number },
         timeDeltaMs: number,
     ): Promise<void> {
         const tunnel = this.getTunnel();
@@ -149,9 +149,9 @@ export class Robot {
     }
 
     public async sendDriveQuadraticPacket(
-        startPosition: Position,
-        endPosition: Position,
-        controlPosition: Position,
+        startPosition: { x: number; y: number },
+        endPosition: { x: number; y: number },
+        controlPosition: { x: number; y: number },
         timeDeltaMs: number,
     ): Promise<void> {
         const tunnel = this.getTunnel();

From ccd6718e8075dd13f88cabeb585632503862f46a Mon Sep 17 00:00:00 2001
From: ymmot239 <pacman239sa@gmail.com>
Date: Fri, 25 Apr 2025 20:24:31 -0500
Subject: [PATCH 75/92] bs gooo

---
 .vscode/settings.json               |  1 +
 package.json                        |  2 +
 src/client/debug/simulator.tsx      | 69 ++++++++++++---------------
 src/client/editor/editor.tsx        |  4 ++
 src/client/editor/showfile-state.ts |  6 +++
 src/client/main.tsx                 |  4 ++
 src/client/package.json             |  4 +-
 src/server/api/api.ts               | 73 ++++++++++++++++++++++++++++-
 yarn.lock                           | 43 +++++++++++++++++
 9 files changed, 164 insertions(+), 42 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 9537b95b..8c9b7acb 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -4,6 +4,7 @@
     "task.autoDetect": "off",
     "cSpell.words": [
         "blueprintjs",
+        "cbor",
         "Chessbots",
         "Premoves",
         "runtypes",
diff --git a/package.json b/package.json
index 9d2b2d73..cfd85a64 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,8 @@
         "lint-check": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0"
     },
     "dependencies": {
+        "cbor": "^10.0.3",
+        "cbor2": "^1.12.0",
         "chess.js": "^1.0.0-beta.6",
         "eslint-plugin-tsdoc": "^0.2.17",
         "typescript": "5.5.4",
diff --git a/src/client/debug/simulator.tsx b/src/client/debug/simulator.tsx
index 6600abda..9bc246b6 100644
--- a/src/client/debug/simulator.tsx
+++ b/src/client/debug/simulator.tsx
@@ -40,10 +40,11 @@ export type RobotState = { [robotId: string]: SimulatedRobotLocation };
  *
  * does not require physical robots to be connected
  * @returns the simulator screen as a card
- */
+*/
 export function Simulator() {
     const navigate = useNavigate();
 
+
     type Action =
         | { type: "SET_ALL_ROBOTS"; payload: RobotState }
         | {
@@ -158,6 +159,7 @@ export function Simulator() {
                 </Button>
             </div>
             <div style={{ display: "flex", gap: "1rem", width: "95vw" }}>
+                <RobotGrid robotState={robotState} />
                 <RobotGrid robotState={robotState} />
                 <div
                     style={{
@@ -209,52 +211,41 @@ const openInEditor = async (frame: StackFrame) => {
     await fetch(`/__open-in-editor?${params.toString()}`);
 };
 
-// TODO: refactor out of debug since we use it in more than just simulator?
-export function RobotGrid({
-    robotState,
-    children,
-}: PropsWithChildren<{ robotState: RobotState }>) {
-    return (
-        <div
-            style={{
-                display: "grid",
-                gridTemplateColumns: `repeat(${cellCount}, ${tileSize}px)`,
-                gridTemplateRows: `repeat(${cellCount}, ${tileSize}px)`,
-                position: "relative",
-            }}
-        >
-            {new Array(cellCount * cellCount).fill(undefined).map((_, i) => {
+export function RobotGrid({robotState}: {robotState: RobotState}) {
+    return <div
+        style={{
+            display: "grid",
+            gridTemplateColumns: `repeat(${cellCount}, ${tileSize}px)`,
+            gridTemplateRows: `repeat(${cellCount}, ${tileSize}px)`,
+            position: "relative",
+        }}
+    >
+        {new Array(cellCount * cellCount)
+            .fill(undefined)
+            .map((_, i) => {
                 const row = Math.floor(i / cellCount);
                 const col = i % cellCount;
-                const isCenterCell =
-                    row >= 2 && row < 10 && col >= 2 && col < 10;
+                const isCenterCell = row >= 2 && row < 10 && col >= 2 && col < 10;
                 return (
                     <div
                         key={i}
                         style={{
-                            borderWidth: "1px",
-                            borderStyle: "solid",
-                            borderColor: simBorderColor(),
-                            backgroundColor:
-                                !isCenterCell ? simRingCellColor() : (
-                                    "transparent"
-                                ),
-                        }}
-                    />
+                            border: "1px solid black",
+                            backgroundColor: !isCenterCell ? "lightgray" : (
+                                "transparent"
+                            ),
+                        }} />
                 );
             })}
-            {/* TODO: implement onTopOfRobots */}
-            {Object.entries(robotState).map(([robotId, pos]) => (
-                <Robot
-                    pos={pos}
-                    robotId={robotId}
-                    key={robotId}
-                    onTopOfRobots={[]}
-                />
-            ))}
-            {children}
-        </div>
-    );
+        {/* TODO: implement onTopOfRobots */}
+        {Object.entries(robotState).map(([robotId, pos]) => (
+            <Robot
+                pos={pos}
+                robotId={robotId}
+                key={robotId}
+                onTopOfRobots={[]} />
+        ))}
+    </div>;
 }
 
 /**
diff --git a/src/client/editor/editor.tsx b/src/client/editor/editor.tsx
index 623c35f7..7d0b88cc 100644
--- a/src/client/editor/editor.tsx
+++ b/src/client/editor/editor.tsx
@@ -46,6 +46,7 @@ import { TimelineLayerType } from "../../common/show";
 import { SplineEditor } from "./spline-editor";
 import interact from "interactjs";
 import { Array as RArray } from "runtypes";
+import { post } from "../api";
 
 // Helper component to manage animation for a single robot
 function AnimatedRobotRenderer({
@@ -637,6 +638,9 @@ export function Editor() {
                         variant="outlined"
                     />
                 </ButtonGroup>
+                <Button 
+                    onClick={async()=>{post("/do-big",{show:"a"})}}
+                />
 
                 <div
                     style={{
diff --git a/src/client/editor/showfile-state.ts b/src/client/editor/showfile-state.ts
index 50f6a8f4..924e4e87 100644
--- a/src/client/editor/showfile-state.ts
+++ b/src/client/editor/showfile-state.ts
@@ -401,6 +401,10 @@ export function useShowfile() {
     const { currentTimestamp, playing, togglePlaying, setTimestamp } =
         usePlayHead(sequenceLengthMs);
 
+    const startShow = useEffect(()=>{
+
+    })
+
     const { audio } = show;
     const audioRef = useRef(new Audio());
     useEffect(() => {
@@ -672,6 +676,7 @@ export function useShowfile() {
             currentTimestamp,
             playing,
             togglePlaying,
+            startShow,
             deleteLayer,
             canRedo,
             canUndo,
@@ -716,6 +721,7 @@ export function useShowfile() {
             currentTimestamp,
             playing,
             togglePlaying,
+            startShow,
             deleteLayer,
             canRedo,
             canUndo,
diff --git a/src/client/main.tsx b/src/client/main.tsx
index ae399943..ec946310 100644
--- a/src/client/main.tsx
+++ b/src/client/main.tsx
@@ -14,6 +14,10 @@ export const queryClient = new QueryClient();
 
 FocusStyleManager.onlyShowFocusOnTabs();
 
+import studio from '@theatre/studio'
+
+studio.initialize()
+
 //creates the root of the page and forwards control to the page router
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
     <>
diff --git a/src/client/package.json b/src/client/package.json
index 06963ff4..06531fd6 100644
--- a/src/client/package.json
+++ b/src/client/package.json
@@ -17,7 +17,9 @@
         "react-joystick-component": "^6.2.1",
         "react-router-dom": "^6.21.3",
         "react-use-websocket": "^4.5.0",
-        "scss": "^0.2.4"
+        "scss": "^0.2.4",
+        "@theatre/core": "^0.7.2",
+        "@theatre/studio": "^0.7.2"
     },
     "devDependencies": {
         "@types/react": "^18.2.48",
diff --git a/src/server/api/api.ts b/src/server/api/api.ts
index 7b7d926c..4c11a7de 100644
--- a/src/server/api/api.ts
+++ b/src/server/api/api.ts
@@ -1,6 +1,7 @@
 import { WebsocketRequestHandler } from "express-ws";
 import { Router } from "express";
-
+//import { decode as cborDecode, encode as cborEncode } from "cbor";
+import('cbor2');
 import { parseMessage } from "../../common/message/parse-message";
 import {
     GameFinishedMessage,
@@ -32,12 +33,19 @@ import { VirtualBotTunnel, virtualRobots } from "../simulator";
 import { Position } from "../robot/position";
 import { DEGREE } from "../../common/units";
 import { PacketType } from "../utils/tcp-packet";
-import { DriveQuadraticSplineCommand } from "../command/move-command";
+import { DriveCubicSplineCommand, DriveQuadraticSplineCommand } from "../command/move-command";
 import {
     Command,
     ParallelCommandGroup,
     SequentialCommandGroup,
 } from "../command/command";
+import { CHESSBOTS_SHOWFILE_EXTENSION, CHESSBOTS_SHOWFILE_MIME_TYPE, GoToPointEvent, ShowfileSchema } from "../../common/show";
+import { CubicBezier, SplinePointType } from "../../common/spline";
+// @ts-expect-error: chessbots client is a CommonJS module, but this library is a ES Module, so we need to tell TypeScript that it's okay
+import { decode as cborDecode} from "cbor-x";
+
+// @ts-expect-error: chessbots client is a CommonJS module, but this library is a ES Module, so we need to tell TypeScript that it's okay
+import { fileOpen } from "browser-fs-access";
 
 export const executor = new CommandExecutor();
 
@@ -246,6 +254,67 @@ apiRouter.get("/do-parallel", async (_, res) => {
     res.send({ message: "success", timeMs: time });
 });
 
+apiRouter.post("/do-big", async (_, res) => {
+    console.log("starting test group");
+    const start = Date.now();
+    
+    const blob = await fileOpen({
+                mimeTypes: [CHESSBOTS_SHOWFILE_MIME_TYPE],
+                extensions: [CHESSBOTS_SHOWFILE_EXTENSION],
+                description: "Chess Bots Showfile",
+            });
+
+    const data = cborDecode(new Uint8Array(await blob.arrayBuffer()));
+    const show = ShowfileSchema.check(data);
+    if(show){
+        const shows = show///JSON.parse(req.query.show.toString()) as Showfile;
+        const robotsEntries = Array.from(robotManager.idsToRobots.entries());
+        const commands: Command[] = [];
+        for(let x = 0; x < shows.timeline.length; x++){
+            let start = shows.timeline[x].startPoint.target.point;
+            const cmd:Command[] = [];
+            for(let y = 0; y < shows.timeline[x].remainingEvents.length; y++){
+                if(shows.timeline[x].remainingEvents[y].type === "goto_point"){
+                    const goto = shows.timeline[x].remainingEvents[y] as GoToPointEvent;
+                    if(goto.target.type === SplinePointType.QuadraticBezier){
+                        cmd.push(new DriveQuadraticSplineCommand(
+                            robotsEntries[x][1].id,
+                            start,
+                            goto.target.endPoint,
+                            goto.target.endPoint,
+                            shows.timeline[x].remainingEvents[y].durationMs
+                        ))
+                    } else if (goto.target.type === SplinePointType.CubicBezier){
+                        const go2 = goto.target as CubicBezier;
+                        cmd.push(new DriveCubicSplineCommand(
+                            robotsEntries[x][1].id,
+                            start,
+                            goto.target.endPoint,
+                            go2.controlPoint,
+                            goto.target.endPoint,
+                            shows.timeline[x].remainingEvents[y].durationMs
+                        ))
+                    }
+                    start = goto.target.endPoint;
+                } else if (shows.timeline[x].remainingEvents[y].type === "wait"){
+                    cmd.push(new DriveQuadraticSplineCommand(
+                        robotsEntries[x][1].id,
+                        start,
+                        start,
+                        start,
+                        shows.timeline[x].remainingEvents[y].durationMs
+                    ))
+                } 
+            }
+            commands.push(new SequentialCommandGroup(commands));
+        }
+        await new ParallelCommandGroup(commands).execute();
+        console.log("finally");
+    }
+    const time = Date.now() - start;
+    res.send({ message: "success", timeMs: time });
+})
+
 /**
  * get the current state of the virtual robots for the simulator
  */
diff --git a/yarn.lock b/yarn.lock
index 45fc1169..74264c67 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -877,6 +877,27 @@
   dependencies:
     "@tanstack/query-core" "5.29.0"
 
+"@theatre/core@^0.7.2":
+  version "0.7.2"
+  resolved "https://registry.yarnpkg.com/@theatre/core/-/core-0.7.2.tgz#540a6c3ab80c6ce835b5a284694baf3291222c42"
+  integrity sha512-IDQa/6WY7mIJAtsSd4EgNcM0IUZkl+FrqZ8DdYiCVTFap9ARDNmrngJOeFjJOsnnaHlc5GdEB/jj7fsjbIrAzQ==
+  dependencies:
+    "@theatre/dataverse" "0.7.2"
+
+"@theatre/dataverse@0.7.2":
+  version "0.7.2"
+  resolved "https://registry.yarnpkg.com/@theatre/dataverse/-/dataverse-0.7.2.tgz#25aafe9fe781661939aa991dd46079e0fe4cfd18"
+  integrity sha512-YyfoyX7EyhFUY2OM5fsM0LPrs1SdgLwpiTMkkvTIoZLdOwvQhstjYq4Yz/8ZncJlRoTWvakfmgvCaBN+QuBYxg==
+  dependencies:
+    lodash-es "^4.17.21"
+
+"@theatre/studio@^0.7.2":
+  version "0.7.2"
+  resolved "https://registry.yarnpkg.com/@theatre/studio/-/studio-0.7.2.tgz#287b148c17d7799955199dd6b90c59c876746eaf"
+  integrity sha512-p6LTKzJWVlcHkpGzIlNHh9AkGbB3E+0q9Pjxv+OJoTDe1IK+CMKW695Wp+1//lB4vfC9qShe4z/p+Zaj1q8KtA==
+  dependencies:
+    "@theatre/dataverse" "0.7.2"
+
 "@tsconfig/node10@^1.0.7":
   version "1.0.9"
   resolved "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.9.tgz"
@@ -1446,6 +1467,18 @@ cbor-x@^1.6.0:
   optionalDependencies:
     cbor-extract "^2.2.0"
 
+cbor2@^1.12.0:
+  version "1.12.0"
+  resolved "https://registry.yarnpkg.com/cbor2/-/cbor2-1.12.0.tgz#b1cae821ee8d673cff70b078c3f08041bc47bdde"
+  integrity sha512-3Cco8XQhi27DogSp9Ri6LYNZLi/TBY/JVnDe+mj06NkBjW/ZYOtekaEU4wZ4xcRMNrFkDv8KNtOAqHyDfz3lYg==
+
+cbor@^10.0.3:
+  version "10.0.3"
+  resolved "https://registry.yarnpkg.com/cbor/-/cbor-10.0.3.tgz#202d79cd696f408700af51b0c9771577048a860e"
+  integrity sha512-72Jnj81xMsqepqdcSdf2+fflz/UDsThOHy5hj2MW5F5xzHL8Oa0KQ6I6V9CwVUPxg5pf+W9xp6W2KilaRXWWtw==
+  dependencies:
+    nofilter "^3.0.2"
+
 chai@^5.2.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/chai/-/chai-5.2.0.tgz#1358ee106763624114addf84ab02697e411c9c05"
@@ -2489,6 +2522,11 @@ locate-path@^6.0.0:
   dependencies:
     p-locate "^5.0.0"
 
+lodash-es@^4.17.21:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
+  integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
+
 lodash.merge@^4.6.2:
   version "4.6.2"
   resolved "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz"
@@ -2728,6 +2766,11 @@ nodemon@^3.0.3:
     touch "^3.1.0"
     undefsafe "^2.0.5"
 
+nofilter@^3.0.2:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/nofilter/-/nofilter-3.1.0.tgz#c757ba68801d41ff930ba2ec55bab52ca184aa66"
+  integrity sha512-l2NNj07e9afPnhAhvgVrCD/oy2Ai1yfLpuo3EpiO1jFTsB4sFz6oIfAfSZyQzVpkZQ9xS8ZS5g1jCBgq4Hwo0g==
+
 nopt@~1.0.10:
   version "1.0.10"
   resolved "https://registry.npmjs.org/nopt/-/nopt-1.0.10.tgz"

From 522faf32c96ea29f81099e1513a4768be87fd3cf Mon Sep 17 00:00:00 2001
From: Jason Antwi-Appah <hey@jasonaa.me>
Date: Fri, 25 Apr 2025 23:09:28 -0500
Subject: [PATCH 76/92] Fix bad merge

---
 package.json                        |   2 -
 src/client/debug/simulator.tsx      |  69 ++++++++++--------
 src/client/editor/editor.tsx        |   6 +-
 src/client/editor/showfile-state.ts |   4 +-
 src/client/main.tsx                 |   4 --
 src/client/package.json             |   4 +-
 src/server/api/api.ts               | 108 +++++++++++++++++-----------
 yarn.lock                           |  43 -----------
 8 files changed, 110 insertions(+), 130 deletions(-)

diff --git a/package.json b/package.json
index cfd85a64..9d2b2d73 100644
--- a/package.json
+++ b/package.json
@@ -21,8 +21,6 @@
         "lint-check": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0"
     },
     "dependencies": {
-        "cbor": "^10.0.3",
-        "cbor2": "^1.12.0",
         "chess.js": "^1.0.0-beta.6",
         "eslint-plugin-tsdoc": "^0.2.17",
         "typescript": "5.5.4",
diff --git a/src/client/debug/simulator.tsx b/src/client/debug/simulator.tsx
index 9bc246b6..6600abda 100644
--- a/src/client/debug/simulator.tsx
+++ b/src/client/debug/simulator.tsx
@@ -40,11 +40,10 @@ export type RobotState = { [robotId: string]: SimulatedRobotLocation };
  *
  * does not require physical robots to be connected
  * @returns the simulator screen as a card
-*/
+ */
 export function Simulator() {
     const navigate = useNavigate();
 
-
     type Action =
         | { type: "SET_ALL_ROBOTS"; payload: RobotState }
         | {
@@ -159,7 +158,6 @@ export function Simulator() {
                 </Button>
             </div>
             <div style={{ display: "flex", gap: "1rem", width: "95vw" }}>
-                <RobotGrid robotState={robotState} />
                 <RobotGrid robotState={robotState} />
                 <div
                     style={{
@@ -211,41 +209,52 @@ const openInEditor = async (frame: StackFrame) => {
     await fetch(`/__open-in-editor?${params.toString()}`);
 };
 
-export function RobotGrid({robotState}: {robotState: RobotState}) {
-    return <div
-        style={{
-            display: "grid",
-            gridTemplateColumns: `repeat(${cellCount}, ${tileSize}px)`,
-            gridTemplateRows: `repeat(${cellCount}, ${tileSize}px)`,
-            position: "relative",
-        }}
-    >
-        {new Array(cellCount * cellCount)
-            .fill(undefined)
-            .map((_, i) => {
+// TODO: refactor out of debug since we use it in more than just simulator?
+export function RobotGrid({
+    robotState,
+    children,
+}: PropsWithChildren<{ robotState: RobotState }>) {
+    return (
+        <div
+            style={{
+                display: "grid",
+                gridTemplateColumns: `repeat(${cellCount}, ${tileSize}px)`,
+                gridTemplateRows: `repeat(${cellCount}, ${tileSize}px)`,
+                position: "relative",
+            }}
+        >
+            {new Array(cellCount * cellCount).fill(undefined).map((_, i) => {
                 const row = Math.floor(i / cellCount);
                 const col = i % cellCount;
-                const isCenterCell = row >= 2 && row < 10 && col >= 2 && col < 10;
+                const isCenterCell =
+                    row >= 2 && row < 10 && col >= 2 && col < 10;
                 return (
                     <div
                         key={i}
                         style={{
-                            border: "1px solid black",
-                            backgroundColor: !isCenterCell ? "lightgray" : (
-                                "transparent"
-                            ),
-                        }} />
+                            borderWidth: "1px",
+                            borderStyle: "solid",
+                            borderColor: simBorderColor(),
+                            backgroundColor:
+                                !isCenterCell ? simRingCellColor() : (
+                                    "transparent"
+                                ),
+                        }}
+                    />
                 );
             })}
-        {/* TODO: implement onTopOfRobots */}
-        {Object.entries(robotState).map(([robotId, pos]) => (
-            <Robot
-                pos={pos}
-                robotId={robotId}
-                key={robotId}
-                onTopOfRobots={[]} />
-        ))}
-    </div>;
+            {/* TODO: implement onTopOfRobots */}
+            {Object.entries(robotState).map(([robotId, pos]) => (
+                <Robot
+                    pos={pos}
+                    robotId={robotId}
+                    key={robotId}
+                    onTopOfRobots={[]}
+                />
+            ))}
+            {children}
+        </div>
+    );
 }
 
 /**
diff --git a/src/client/editor/editor.tsx b/src/client/editor/editor.tsx
index 7d0b88cc..785d9155 100644
--- a/src/client/editor/editor.tsx
+++ b/src/client/editor/editor.tsx
@@ -638,8 +638,10 @@ export function Editor() {
                         variant="outlined"
                     />
                 </ButtonGroup>
-                <Button 
-                    onClick={async()=>{post("/do-big",{show:"a"})}}
+                <Button
+                    onClick={async () => {
+                        post("/do-big", { show: "a" });
+                    }}
                 />
 
                 <div
diff --git a/src/client/editor/showfile-state.ts b/src/client/editor/showfile-state.ts
index 924e4e87..803ddaa5 100644
--- a/src/client/editor/showfile-state.ts
+++ b/src/client/editor/showfile-state.ts
@@ -401,9 +401,7 @@ export function useShowfile() {
     const { currentTimestamp, playing, togglePlaying, setTimestamp } =
         usePlayHead(sequenceLengthMs);
 
-    const startShow = useEffect(()=>{
-
-    })
+    const startShow = useEffect(() => {});
 
     const { audio } = show;
     const audioRef = useRef(new Audio());
diff --git a/src/client/main.tsx b/src/client/main.tsx
index ec946310..ae399943 100644
--- a/src/client/main.tsx
+++ b/src/client/main.tsx
@@ -14,10 +14,6 @@ export const queryClient = new QueryClient();
 
 FocusStyleManager.onlyShowFocusOnTabs();
 
-import studio from '@theatre/studio'
-
-studio.initialize()
-
 //creates the root of the page and forwards control to the page router
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
     <>
diff --git a/src/client/package.json b/src/client/package.json
index 06531fd6..06963ff4 100644
--- a/src/client/package.json
+++ b/src/client/package.json
@@ -17,9 +17,7 @@
         "react-joystick-component": "^6.2.1",
         "react-router-dom": "^6.21.3",
         "react-use-websocket": "^4.5.0",
-        "scss": "^0.2.4",
-        "@theatre/core": "^0.7.2",
-        "@theatre/studio": "^0.7.2"
+        "scss": "^0.2.4"
     },
     "devDependencies": {
         "@types/react": "^18.2.48",
diff --git a/src/server/api/api.ts b/src/server/api/api.ts
index 4c11a7de..2de2c716 100644
--- a/src/server/api/api.ts
+++ b/src/server/api/api.ts
@@ -1,7 +1,7 @@
 import { WebsocketRequestHandler } from "express-ws";
 import { Router } from "express";
 //import { decode as cborDecode, encode as cborEncode } from "cbor";
-import('cbor2');
+
 import { parseMessage } from "../../common/message/parse-message";
 import {
     GameFinishedMessage,
@@ -33,16 +33,24 @@ import { VirtualBotTunnel, virtualRobots } from "../simulator";
 import { Position } from "../robot/position";
 import { DEGREE } from "../../common/units";
 import { PacketType } from "../utils/tcp-packet";
-import { DriveCubicSplineCommand, DriveQuadraticSplineCommand } from "../command/move-command";
+import {
+    DriveCubicSplineCommand,
+    DriveQuadraticSplineCommand,
+} from "../command/move-command";
 import {
     Command,
     ParallelCommandGroup,
     SequentialCommandGroup,
 } from "../command/command";
-import { CHESSBOTS_SHOWFILE_EXTENSION, CHESSBOTS_SHOWFILE_MIME_TYPE, GoToPointEvent, ShowfileSchema } from "../../common/show";
+import {
+    CHESSBOTS_SHOWFILE_EXTENSION,
+    CHESSBOTS_SHOWFILE_MIME_TYPE,
+    GoToPointEvent,
+    ShowfileSchema,
+} from "../../common/show";
 import { CubicBezier, SplinePointType } from "../../common/spline";
 // @ts-expect-error: chessbots client is a CommonJS module, but this library is a ES Module, so we need to tell TypeScript that it's okay
-import { decode as cborDecode} from "cbor-x";
+import { decode as cborDecode } from "cbor-x";
 
 // @ts-expect-error: chessbots client is a CommonJS module, but this library is a ES Module, so we need to tell TypeScript that it's okay
 import { fileOpen } from "browser-fs-access";
@@ -257,54 +265,68 @@ apiRouter.get("/do-parallel", async (_, res) => {
 apiRouter.post("/do-big", async (_, res) => {
     console.log("starting test group");
     const start = Date.now();
-    
+
     const blob = await fileOpen({
-                mimeTypes: [CHESSBOTS_SHOWFILE_MIME_TYPE],
-                extensions: [CHESSBOTS_SHOWFILE_EXTENSION],
-                description: "Chess Bots Showfile",
-            });
+        mimeTypes: [CHESSBOTS_SHOWFILE_MIME_TYPE],
+        extensions: [CHESSBOTS_SHOWFILE_EXTENSION],
+        description: "Chess Bots Showfile",
+    });
 
     const data = cborDecode(new Uint8Array(await blob.arrayBuffer()));
     const show = ShowfileSchema.check(data);
-    if(show){
-        const shows = show///JSON.parse(req.query.show.toString()) as Showfile;
+    if (show) {
+        const shows = show; ///JSON.parse(req.query.show.toString()) as Showfile;
         const robotsEntries = Array.from(robotManager.idsToRobots.entries());
         const commands: Command[] = [];
-        for(let x = 0; x < shows.timeline.length; x++){
+        for (let x = 0; x < shows.timeline.length; x++) {
             let start = shows.timeline[x].startPoint.target.point;
-            const cmd:Command[] = [];
-            for(let y = 0; y < shows.timeline[x].remainingEvents.length; y++){
-                if(shows.timeline[x].remainingEvents[y].type === "goto_point"){
-                    const goto = shows.timeline[x].remainingEvents[y] as GoToPointEvent;
-                    if(goto.target.type === SplinePointType.QuadraticBezier){
-                        cmd.push(new DriveQuadraticSplineCommand(
-                            robotsEntries[x][1].id,
-                            start,
-                            goto.target.endPoint,
-                            goto.target.endPoint,
-                            shows.timeline[x].remainingEvents[y].durationMs
-                        ))
-                    } else if (goto.target.type === SplinePointType.CubicBezier){
+            const cmd: Command[] = [];
+            for (let y = 0; y < shows.timeline[x].remainingEvents.length; y++) {
+                if (
+                    shows.timeline[x].remainingEvents[y].type === "goto_point"
+                ) {
+                    const goto = shows.timeline[x].remainingEvents[
+                        y
+                    ] as GoToPointEvent;
+                    if (goto.target.type === SplinePointType.QuadraticBezier) {
+                        cmd.push(
+                            new DriveQuadraticSplineCommand(
+                                robotsEntries[x][1].id,
+                                start,
+                                goto.target.endPoint,
+                                goto.target.endPoint,
+                                shows.timeline[x].remainingEvents[y].durationMs,
+                            ),
+                        );
+                    } else if (
+                        goto.target.type === SplinePointType.CubicBezier
+                    ) {
                         const go2 = goto.target as CubicBezier;
-                        cmd.push(new DriveCubicSplineCommand(
-                            robotsEntries[x][1].id,
-                            start,
-                            goto.target.endPoint,
-                            go2.controlPoint,
-                            goto.target.endPoint,
-                            shows.timeline[x].remainingEvents[y].durationMs
-                        ))
+                        cmd.push(
+                            new DriveCubicSplineCommand(
+                                robotsEntries[x][1].id,
+                                start,
+                                goto.target.endPoint,
+                                go2.controlPoint,
+                                goto.target.endPoint,
+                                shows.timeline[x].remainingEvents[y].durationMs,
+                            ),
+                        );
                     }
                     start = goto.target.endPoint;
-                } else if (shows.timeline[x].remainingEvents[y].type === "wait"){
-                    cmd.push(new DriveQuadraticSplineCommand(
-                        robotsEntries[x][1].id,
-                        start,
-                        start,
-                        start,
-                        shows.timeline[x].remainingEvents[y].durationMs
-                    ))
-                } 
+                } else if (
+                    shows.timeline[x].remainingEvents[y].type === "wait"
+                ) {
+                    cmd.push(
+                        new DriveQuadraticSplineCommand(
+                            robotsEntries[x][1].id,
+                            start,
+                            start,
+                            start,
+                            shows.timeline[x].remainingEvents[y].durationMs,
+                        ),
+                    );
+                }
             }
             commands.push(new SequentialCommandGroup(commands));
         }
@@ -313,7 +335,7 @@ apiRouter.post("/do-big", async (_, res) => {
     }
     const time = Date.now() - start;
     res.send({ message: "success", timeMs: time });
-})
+});
 
 /**
  * get the current state of the virtual robots for the simulator
diff --git a/yarn.lock b/yarn.lock
index 74264c67..45fc1169 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -877,27 +877,6 @@
   dependencies:
     "@tanstack/query-core" "5.29.0"
 
-"@theatre/core@^0.7.2":
-  version "0.7.2"
-  resolved "https://registry.yarnpkg.com/@theatre/core/-/core-0.7.2.tgz#540a6c3ab80c6ce835b5a284694baf3291222c42"
-  integrity sha512-IDQa/6WY7mIJAtsSd4EgNcM0IUZkl+FrqZ8DdYiCVTFap9ARDNmrngJOeFjJOsnnaHlc5GdEB/jj7fsjbIrAzQ==
-  dependencies:
-    "@theatre/dataverse" "0.7.2"
-
-"@theatre/dataverse@0.7.2":
-  version "0.7.2"
-  resolved "https://registry.yarnpkg.com/@theatre/dataverse/-/dataverse-0.7.2.tgz#25aafe9fe781661939aa991dd46079e0fe4cfd18"
-  integrity sha512-YyfoyX7EyhFUY2OM5fsM0LPrs1SdgLwpiTMkkvTIoZLdOwvQhstjYq4Yz/8ZncJlRoTWvakfmgvCaBN+QuBYxg==
-  dependencies:
-    lodash-es "^4.17.21"
-
-"@theatre/studio@^0.7.2":
-  version "0.7.2"
-  resolved "https://registry.yarnpkg.com/@theatre/studio/-/studio-0.7.2.tgz#287b148c17d7799955199dd6b90c59c876746eaf"
-  integrity sha512-p6LTKzJWVlcHkpGzIlNHh9AkGbB3E+0q9Pjxv+OJoTDe1IK+CMKW695Wp+1//lB4vfC9qShe4z/p+Zaj1q8KtA==
-  dependencies:
-    "@theatre/dataverse" "0.7.2"
-
 "@tsconfig/node10@^1.0.7":
   version "1.0.9"
   resolved "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.9.tgz"
@@ -1467,18 +1446,6 @@ cbor-x@^1.6.0:
   optionalDependencies:
     cbor-extract "^2.2.0"
 
-cbor2@^1.12.0:
-  version "1.12.0"
-  resolved "https://registry.yarnpkg.com/cbor2/-/cbor2-1.12.0.tgz#b1cae821ee8d673cff70b078c3f08041bc47bdde"
-  integrity sha512-3Cco8XQhi27DogSp9Ri6LYNZLi/TBY/JVnDe+mj06NkBjW/ZYOtekaEU4wZ4xcRMNrFkDv8KNtOAqHyDfz3lYg==
-
-cbor@^10.0.3:
-  version "10.0.3"
-  resolved "https://registry.yarnpkg.com/cbor/-/cbor-10.0.3.tgz#202d79cd696f408700af51b0c9771577048a860e"
-  integrity sha512-72Jnj81xMsqepqdcSdf2+fflz/UDsThOHy5hj2MW5F5xzHL8Oa0KQ6I6V9CwVUPxg5pf+W9xp6W2KilaRXWWtw==
-  dependencies:
-    nofilter "^3.0.2"
-
 chai@^5.2.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/chai/-/chai-5.2.0.tgz#1358ee106763624114addf84ab02697e411c9c05"
@@ -2522,11 +2489,6 @@ locate-path@^6.0.0:
   dependencies:
     p-locate "^5.0.0"
 
-lodash-es@^4.17.21:
-  version "4.17.21"
-  resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
-  integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
-
 lodash.merge@^4.6.2:
   version "4.6.2"
   resolved "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz"
@@ -2766,11 +2728,6 @@ nodemon@^3.0.3:
     touch "^3.1.0"
     undefsafe "^2.0.5"
 
-nofilter@^3.0.2:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/nofilter/-/nofilter-3.1.0.tgz#c757ba68801d41ff930ba2ec55bab52ca184aa66"
-  integrity sha512-l2NNj07e9afPnhAhvgVrCD/oy2Ai1yfLpuo3EpiO1jFTsB4sFz6oIfAfSZyQzVpkZQ9xS8ZS5g1jCBgq4Hwo0g==
-
 nopt@~1.0.10:
   version "1.0.10"
   resolved "https://registry.npmjs.org/nopt/-/nopt-1.0.10.tgz"

From b3d1b32c6ff36000c767524d6fee577d1fee6428 Mon Sep 17 00:00:00 2001
From: Jason Antwi-Appah <hey@jasonaa.me>
Date: Fri, 25 Apr 2025 23:12:09 -0500
Subject: [PATCH 77/92] Fix server side use of window

---
 src/client/editor/editor.tsx        |  8 ++--
 src/client/editor/showfile-state.ts |  6 ++-
 src/client/editor/timeline.tsx      |  4 +-
 src/common/show-interface-utils.ts  | 63 +++++++++++++++++++++++++++++
 src/common/show.ts                  | 62 ----------------------------
 5 files changed, 74 insertions(+), 69 deletions(-)
 create mode 100644 src/common/show-interface-utils.ts

diff --git a/src/client/editor/editor.tsx b/src/client/editor/editor.tsx
index 785d9155..f79e3c23 100644
--- a/src/client/editor/editor.tsx
+++ b/src/client/editor/editor.tsx
@@ -16,14 +16,16 @@ import {
 } from "@blueprintjs/core";
 import { RobotGrid, robotSize } from "../debug/simulator";
 import {
-    GridCursorMode,
-    millisToPixels,
     NonStartPointEvent,
     NonStartPointEventSchema,
+} from "../../common/show";
+import {
+    GridCursorMode,
+    millisToPixels,
     pixelsToMillis,
     RULER_TICK_GAP_PX,
     TimelineDurationUpdateMode,
-} from "../../common/show";
+} from "../../common/show-interface-utils";
 import {
     Ruler,
     TimelineLayer,
diff --git a/src/client/editor/showfile-state.ts b/src/client/editor/showfile-state.ts
index 803ddaa5..e1f9f13e 100644
--- a/src/client/editor/showfile-state.ts
+++ b/src/client/editor/showfile-state.ts
@@ -14,13 +14,15 @@ import {
     GoToPointEvent,
     TimelineLayerType,
     NonStartPointEvent,
-    TimelineDurationUpdateMode,
     CHESSBOTS_SHOWFILE_MIME_TYPE,
     CHESSBOTS_SHOWFILE_EXTENSION,
-    GridCursorMode,
     WaitEvent,
     TurnEvent,
 } from "../../common/show";
+import {
+    TimelineDurationUpdateMode,
+    GridCursorMode,
+} from "../../common/show-interface-utils";
 import {
     SplinePointType,
     CubicBezier,
diff --git a/src/client/editor/timeline.tsx b/src/client/editor/timeline.tsx
index 30224960..92e56f58 100644
--- a/src/client/editor/timeline.tsx
+++ b/src/client/editor/timeline.tsx
@@ -10,15 +10,15 @@ import {
 import interact from "interactjs";
 import { useDragControls, Reorder } from "motion/react";
 import { forwardRef, PropsWithChildren, useEffect, useRef } from "react";
+import { TimelineEvents } from "../../common/show";
 import {
-    TimelineEvents,
     EVENT_TYPE_TO_COLOR,
     millisToPixels,
     RULER_TICK_GAP_PX,
     RULER_TICK_INTERVAL_MS,
     RULER_EXTRA_TICK_COUNT,
     pixelsToMillis,
-} from "../../common/show";
+} from "../../common/show-interface-utils";
 
 export function ReorderableTimelineEvent({
     event,
diff --git a/src/common/show-interface-utils.ts b/src/common/show-interface-utils.ts
new file mode 100644
index 00000000..56f1b55e
--- /dev/null
+++ b/src/common/show-interface-utils.ts
@@ -0,0 +1,63 @@
+import { Colors } from "@blueprintjs/colors";
+import { TimelineEventTypes } from "./show";
+
+export const EVENT_TYPE_TO_COLOR: Record<
+    (typeof TimelineEventTypes)[keyof typeof TimelineEventTypes],
+    (typeof Colors)[keyof typeof Colors]
+> = {
+    [TimelineEventTypes.GoToPointEvent]: Colors.BLUE2,
+    [TimelineEventTypes.WaitEvent]: Colors.GRAY2,
+    [TimelineEventTypes.StartPointEvent]: Colors.GREEN2,
+    [TimelineEventTypes.TurnEvent]: Colors.ORANGE2,
+};
+/*
+ * The timeline duration update mode determines how the duration of timeline events
+ * is updated when the user edits a timeline event's duration.
+ *
+ * Being in ripple edit mode means that editing the duration of an event has a
+ * ripple effect on ALL the other events in the same layer, shifting
+ * all the subsequent event start times by the same amount (so only
+ * one event's duration is actually changing).
+ *
+ * Being in rolling edit mode mean that editing the duration of an event also affects the
+ * duration of the event that immediately follows it in the same layer, such
+ * that adjusting the duration of this event doesn't shift the start timestamp
+ * of the subsequent events in the same layer.
+ */
+
+export const TimelineDurationUpdateMode = {
+    Rolling: "rolling",
+    Ripple: "ripple",
+} as const;
+/*
+ * The grid cursor mode determines the behavior of the cursor when on the grid.
+ *
+ * Being in cursor mode means that the cursor is a normal cursor, and the user
+ * can click and drag points that already exist on the grid. The user is not able
+ * to add new points to the grid.
+ *
+ * Being in pen mode means that the user is able to add new points to the grid
+ * by clicking on the locations where they want to add points. The user is still
+ * able to drag existing points on the grid as in cursor mode.
+ */
+
+export const GridCursorMode = {
+    Cursor: "cursor",
+    Pen: "pen",
+} as const;
+
+export const RULER_TICK_INTERVAL_MS = 100;
+// TODO: make ruler tick size configurable so we can zoom. relatively low priority. would be nice if gestures could be supported too
+export const RULER_TICK_GAP_PX = 12;
+
+export const RULER_EXTRA_TICK_COUNT = Math.round(
+    window.innerWidth / 4 / RULER_TICK_GAP_PX,
+);
+
+export function millisToPixels(millis: number): number {
+    return (millis / RULER_TICK_INTERVAL_MS) * RULER_TICK_GAP_PX;
+}
+
+export function pixelsToMillis(pixels: number): number {
+    return (pixels / RULER_TICK_GAP_PX) * RULER_TICK_INTERVAL_MS;
+}
diff --git a/src/common/show.ts b/src/common/show.ts
index 2fec859f..7e9f3d2a 100644
--- a/src/common/show.ts
+++ b/src/common/show.ts
@@ -15,7 +15,6 @@ import {
     SplinePointType,
     StartPointSchema,
 } from "./spline";
-import { Colors } from "@blueprintjs/core";
 
 export const TimelineEventTypes = {
     GoToPointEvent: "goto_point",
@@ -185,66 +184,5 @@ export function createNewShowfile(): Showfile {
     };
 }
 
-export const EVENT_TYPE_TO_COLOR: Record<
-    (typeof TimelineEventTypes)[keyof typeof TimelineEventTypes],
-    (typeof Colors)[keyof typeof Colors]
-> = {
-    [TimelineEventTypes.GoToPointEvent]: Colors.BLUE2,
-    [TimelineEventTypes.WaitEvent]: Colors.GRAY2,
-    [TimelineEventTypes.StartPointEvent]: Colors.GREEN2,
-    [TimelineEventTypes.TurnEvent]: Colors.ORANGE2,
-};
-
-/*
- * The timeline duration update mode determines how the duration of timeline events
- * is updated when the user edits a timeline event's duration.
- *
- * Being in ripple edit mode means that editing the duration of an event has a
- * ripple effect on ALL the other events in the same layer, shifting
- * all the subsequent event start times by the same amount (so only
- * one event's duration is actually changing).
- *
- * Being in rolling edit mode mean that editing the duration of an event also affects the
- * duration of the event that immediately follows it in the same layer, such
- * that adjusting the duration of this event doesn't shift the start timestamp
- * of the subsequent events in the same layer.
- */
-export const TimelineDurationUpdateMode = {
-    Rolling: "rolling",
-    Ripple: "ripple",
-} as const;
-
-/*
- * The grid cursor mode determines the behavior of the cursor when on the grid.
- *
- * Being in cursor mode means that the cursor is a normal cursor, and the user
- * can click and drag points that already exist on the grid. The user is not able
- * to add new points to the grid.
- *
- * Being in pen mode means that the user is able to add new points to the grid
- * by clicking on the locations where they want to add points. The user is still
- * able to drag existing points on the grid as in cursor mode.
- */
-export const GridCursorMode = {
-    Cursor: "cursor",
-    Pen: "pen",
-} as const;
-
-export const RULER_TICK_INTERVAL_MS = 100;
-// TODO: make ruler tick size configurable so we can zoom. relatively low priority. would be nice if gestures could be supported too
-export const RULER_TICK_GAP_PX = 12;
-
-export const RULER_EXTRA_TICK_COUNT = Math.round(
-    window.innerWidth / 4 / RULER_TICK_GAP_PX,
-);
-
-export function millisToPixels(millis: number): number {
-    return (millis / RULER_TICK_INTERVAL_MS) * RULER_TICK_GAP_PX;
-}
-
-export function pixelsToMillis(pixels: number): number {
-    return (pixels / RULER_TICK_GAP_PX) * RULER_TICK_INTERVAL_MS;
-}
-
 export const CHESSBOTS_SHOWFILE_MIME_TYPE = "application/chessbots-showfile";
 export const CHESSBOTS_SHOWFILE_EXTENSION = ".cbor";

From b645c98d854423e1c5599c0bf5a99e8f2eaab0bb Mon Sep 17 00:00:00 2001
From: gabriel burbach <gabriel.burbach02@gmail.com>
Date: Sat, 26 Apr 2025 00:41:50 -0500
Subject: [PATCH 78/92] =?UTF-8?q?DANCE=20MONKEY=20DANCE=20MONKEY=20DANCE?=
 =?UTF-8?q?=20MONKEY=20=F0=9F=90=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Jason Antwi-Appah <hey@jasonaa.me>
---
 src/client/editor/editor.tsx        |  13 ++-
 src/client/editor/showfile-state.ts |  69 +++++++++----
 src/client/editor/spline-editor.tsx |  32 +++++-
 src/common/show.ts                  |  31 +++++-
 src/common/spline.ts                |   2 +
 src/server/api/api.ts               | 148 +++++++++++++++-------------
 6 files changed, 197 insertions(+), 98 deletions(-)

diff --git a/src/client/editor/editor.tsx b/src/client/editor/editor.tsx
index f79e3c23..07e01fb1 100644
--- a/src/client/editor/editor.tsx
+++ b/src/client/editor/editor.tsx
@@ -112,6 +112,7 @@ export function Editor() {
         handleStartPointMove,
         handlePointMove,
         handleControlPointMove,
+        handleControlPoint2Move,
         handleDeleteStartPoint,
         handleDeletePoint,
         handleSwitchPointType,
@@ -501,6 +502,16 @@ export function Editor() {
                                                 coords,
                                             )
                                         }
+                                        onControlPoint2Move={(
+                                            pointIdx,
+                                            coords,
+                                        ) =>
+                                            handleControlPoint2Move(
+                                                index,
+                                                pointIdx,
+                                                coords,
+                                            )
+                                        }
                                         onDeleteStartPoint={() =>
                                             handleDeleteStartPoint(index)
                                         }
@@ -642,7 +653,7 @@ export function Editor() {
                 </ButtonGroup>
                 <Button
                     onClick={async () => {
-                        post("/do-big", { show: "a" });
+                        post("/do-big", { show });
                     }}
                 />
 
diff --git a/src/client/editor/showfile-state.ts b/src/client/editor/showfile-state.ts
index e1f9f13e..4775ef1a 100644
--- a/src/client/editor/showfile-state.ts
+++ b/src/client/editor/showfile-state.ts
@@ -1,5 +1,5 @@
 // @ts-expect-error: chessbots client is a CommonJS module, but this library is a ES Module, so we need to tell TypeScript that it's okay
-import { decode as cborDecode, encode as cborEncode } from "cbor-x";
+import { encode as cborEncode } from "cbor-x";
 
 // @ts-expect-error: chessbots client is a CommonJS module, but this library is a ES Module, so we need to tell TypeScript that it's okay
 import { fileOpen, fileSave } from "browser-fs-access";
@@ -8,7 +8,7 @@ import { diff } from "deep-object-diff";
 import { useState, useEffect, useCallback, useRef, useMemo } from "react";
 import {
     createNewShowfile,
-    ShowfileSchema,
+    loadShowfileFromBinary,
     StartPointEvent,
     TimelineEventTypes,
     GoToPointEvent,
@@ -95,22 +95,10 @@ export function useShowfile() {
             description: "Chess Bots Showfile",
         });
 
-        let data: unknown | null = null;
-        try {
-            data = cborDecode(new Uint8Array(await blob.arrayBuffer()));
-        } catch (e) {
-            // TODO: toast or alert
-            console.warn("Failed to decode showfile as CBOR", e);
-            return;
-        }
-
-        const show = ShowfileSchema.check(data);
-
-        if (!show) {
-            // TODO: toast or alert
-            console.warn("File was CBOR but not a valid showfile", data);
-            return;
-        }
+        const show = loadShowfileFromBinary(
+            new Uint8Array(await blob.arrayBuffer()),
+        );
+        if (!show) return;
 
         setInitialShow(show);
         setShow(show);
@@ -211,8 +199,7 @@ export function useShowfile() {
             const eventToUpdate = events[pointIndex];
 
             if (
-                eventToUpdate?.type === TimelineEventTypes.GoToPointEvent &&
-                eventToUpdate.target.type === SplinePointType.CubicBezier
+                eventToUpdate?.type === TimelineEventTypes.GoToPointEvent
             ) {
                 events[pointIndex] = {
                     ...eventToUpdate,
@@ -230,7 +217,35 @@ export function useShowfile() {
         },
         [show, setShow],
     );
-
+    const handleControlPoint2Move = useCallback(
+        (layerIndex: number, pointIndex: number, newCoords: Coords) => {
+            const newTimeline = [...show.timeline];
+            const layer = newTimeline[layerIndex];
+            if (!layer) return;
+            const { startPoint, remainingEvents } = layer;
+            const events = [...remainingEvents];
+            const eventToUpdate = events[pointIndex];
+    
+            if (
+                eventToUpdate?.type === TimelineEventTypes.GoToPointEvent
+                && eventToUpdate.target.type === SplinePointType.CubicBezier
+            ) {
+                events[pointIndex] = {
+                    ...eventToUpdate,
+                    target: {
+                        ...eventToUpdate.target,
+                        controlPoint2: newCoords,
+                    },
+                };
+                newTimeline[layerIndex] = {
+                    startPoint,
+                    remainingEvents: events,
+                };
+                setShow({ ...show, timeline: newTimeline });
+            }
+        },
+        [show, setShow],
+    );
     const handleDeleteStartPoint = useCallback(
         (layerIndex: number) => {
             const newTimeline = [...show.timeline];
@@ -324,6 +339,10 @@ export function useShowfile() {
                         x: eventToUpdate.target.endPoint.x - 20,
                         y: eventToUpdate.target.endPoint.y - 20,
                     },
+                    controlPoint2: {
+                        x: eventToUpdate.target.endPoint.x + 20,
+                        y: eventToUpdate.target.endPoint.y + 20,
+                    },
                     endPoint: eventToUpdate.target.endPoint,
                 };
             } else if (
@@ -333,6 +352,10 @@ export function useShowfile() {
                 newTarget = {
                     type: SplinePointType.QuadraticBezier,
                     endPoint: eventToUpdate.target.endPoint,
+                    controlPoint: {
+                        x: eventToUpdate.target.endPoint.x + 20,
+                        y: eventToUpdate.target.endPoint.y + 20,
+                    },
                 };
             } else {
                 console.warn("Tried to switch point type with invalid type");
@@ -523,6 +546,7 @@ export function useShowfile() {
                         durationMs: defaultEventDurationMs,
                         target: {
                             type: SplinePointType.QuadraticBezier,
+                            controlPoint: { x: x - 10, y: y - 10 },
                             endPoint: { x, y },
                         },
                         id: crypto.randomUUID(),
@@ -536,6 +560,7 @@ export function useShowfile() {
                             type: SplinePointType.CubicBezier,
                             endPoint: { x, y },
                             controlPoint: { x: x + 10, y: y + 10 },
+                            controlPoint2: { x: x - 10, y: y - 10 },
                         },
                         id: crypto.randomUUID(),
                     });
@@ -664,6 +689,7 @@ export function useShowfile() {
             handleStartPointMove,
             handlePointMove,
             handleControlPointMove,
+            handleControlPoint2Move,
             handleDeleteStartPoint,
             handleDeletePoint,
             handleSwitchPointType,
@@ -709,6 +735,7 @@ export function useShowfile() {
             handleStartPointMove,
             handlePointMove,
             handleControlPointMove,
+            handleControlPoint2Move,
             handleDeleteStartPoint,
             handleDeletePoint,
             handleSwitchPointType,
diff --git a/src/client/editor/spline-editor.tsx b/src/client/editor/spline-editor.tsx
index 4c0bfa75..738c19e6 100644
--- a/src/client/editor/spline-editor.tsx
+++ b/src/client/editor/spline-editor.tsx
@@ -16,6 +16,7 @@ interface SplineEditorProps {
     onStartPointMove: (newCoords: Coords) => void;
     onPointMove: (pointIndex: number, newCoords: Coords) => void;
     onControlPointMove: (pointIndex: number, newCoords: Coords) => void;
+    onControlPoint2Move: (pointIndex: number, newCoords: Coords) => void;
     onDeleteStartPoint: () => void;
     onDeletePoint: (pointIndex: number) => void;
     onSwitchPointType: (
@@ -29,6 +30,7 @@ export function SplineEditor({
     onStartPointMove,
     onPointMove,
     onControlPointMove,
+    onControlPoint2Move,
     onDeleteStartPoint,
     onDeletePoint,
     onSwitchPointType,
@@ -119,13 +121,35 @@ export function SplineEditor({
                     />
                     {/* TODO: add line between control point and end point */}
                     {point.type === SplinePointType.CubicBezier && (
+                        <>
+                            <SplineControlPoint
+                                point={point.controlPoint}
+                                onMove={(x, y) =>
+                                    onControlPointMove(
+                                        getOriginalEventIndex(index),
+                                        { x, y },
+                                    )
+                                }
+                            />
+                            <SplineControlPoint
+                                point={point.controlPoint2}
+                                onMove={(x, y) =>
+                                    onControlPoint2Move(
+                                        getOriginalEventIndex(index),
+                                        { x, y },
+                                    )
+                                }
+                            />
+                        </>
+                    )}
+                    {point.type === SplinePointType.QuadraticBezier && (
                         <SplineControlPoint
                             point={point.controlPoint}
                             onMove={(x, y) =>
-                                onControlPointMove(
-                                    getOriginalEventIndex(index),
-                                    { x, y },
-                                )
+                            onControlPointMove(
+                                getOriginalEventIndex(index),
+                                { x, y }
+                            )
                             }
                         />
                     )}
diff --git a/src/common/show.ts b/src/common/show.ts
index 7e9f3d2a..4d9b7bdf 100644
--- a/src/common/show.ts
+++ b/src/common/show.ts
@@ -1,3 +1,6 @@
+// @ts-expect-error: chessbots client is a CommonJS module, but this library is a ES Module, so we need to tell TypeScript that it's okay
+import { decode as cborDecode } from "cbor-x";
+
 import {
     Number,
     String,
@@ -82,7 +85,7 @@ export type TimelineEvents =
  */
 export const ShowfileSchema = RuntypesRecord({
     // Be sure to increment the schema version number when making breaking changes to the showfile schema.
-    $chessbots_show_schema_version: Literal(3),
+    $chessbots_show_schema_version: Literal(4),
     // The timeline is an array of timeline 'layers'. A layer consists of an array that includes all the events for one robot.
     timeline: Array(TimelineLayerSchema),
     audio: Optional(
@@ -119,7 +122,7 @@ export function timelineLayerToSpline(layer: TimelineLayerType): Spline {
  */
 export function createNewShowfile(): Showfile {
     return {
-        $chessbots_show_schema_version: 3,
+        $chessbots_show_schema_version: 4,
         timeline: [
             {
                 startPoint: {
@@ -147,6 +150,7 @@ export function createNewShowfile(): Showfile {
                         target: {
                             type: SplinePointType.QuadraticBezier,
                             endPoint: { x: 100, y: 100 },
+                            controlPoint: { x: 60, y: 120 }
                         },
                         id: "4f21401d-07cf-434f-a73c-6482ab82f211",
                     },
@@ -165,6 +169,10 @@ export function createNewShowfile(): Showfile {
                                 x: 300,
                                 y: 40,
                             },
+                            controlPoint2: {
+                                x: 310,
+                                y: 60,
+                            },
                         },
                         id: "4f21401d-07cf-434f-a73c-6482ab82f213",
                     },
@@ -174,6 +182,7 @@ export function createNewShowfile(): Showfile {
                         target: {
                             type: SplinePointType.QuadraticBezier,
                             endPoint: { x: 70, y: 70 },
+                            controlPoint: { x: 85, y: 90 },
                         },
                         id: "4f21401d-07cf-434f-a73c-6482ab82f214",
                     },
@@ -186,3 +195,21 @@ export function createNewShowfile(): Showfile {
 
 export const CHESSBOTS_SHOWFILE_MIME_TYPE = "application/chessbots-showfile";
 export const CHESSBOTS_SHOWFILE_EXTENSION = ".cbor";
+
+export const loadShowfileFromBinary = (binary: Buffer | Uint8Array) => {
+    let decodedCborData: unknown | null = null;
+
+    try {
+        decodedCborData = cborDecode(binary);
+    } catch (e) {
+        return null;
+    }
+
+    const result = ShowfileSchema.validate(decodedCborData);
+
+    if (result.success) {
+        return result.value
+    }
+
+    return null
+}
\ No newline at end of file
diff --git a/src/common/spline.ts b/src/common/spline.ts
index 36eae7e0..a4e21bc2 100644
--- a/src/common/spline.ts
+++ b/src/common/spline.ts
@@ -28,6 +28,7 @@ export type StartPointSchema = Static<typeof StartPointSchema>;
 export const CubicBezierSchema = Record({
     type: Literal(SplinePointType.CubicBezier),
     controlPoint: CoordsSchema,
+    controlPoint2: CoordsSchema,
     endPoint: CoordsSchema,
 });
 export type CubicBezier = Static<typeof CubicBezierSchema>;
@@ -35,6 +36,7 @@ export type CubicBezier = Static<typeof CubicBezierSchema>;
 export const QuadraticBezierSchema = Record({
     type: Literal(SplinePointType.QuadraticBezier),
     endPoint: CoordsSchema,
+    controlPoint: CoordsSchema,
 });
 export type QuadraticBezier = Static<typeof QuadraticBezierSchema>;
 
diff --git a/src/server/api/api.ts b/src/server/api/api.ts
index 2de2c716..91518e5c 100644
--- a/src/server/api/api.ts
+++ b/src/server/api/api.ts
@@ -36,24 +36,15 @@ import { PacketType } from "../utils/tcp-packet";
 import {
     DriveCubicSplineCommand,
     DriveQuadraticSplineCommand,
+    SpinRadiansCommand,
 } from "../command/move-command";
 import {
     Command,
     ParallelCommandGroup,
     SequentialCommandGroup,
 } from "../command/command";
-import {
-    CHESSBOTS_SHOWFILE_EXTENSION,
-    CHESSBOTS_SHOWFILE_MIME_TYPE,
-    GoToPointEvent,
-    ShowfileSchema,
-} from "../../common/show";
+import { GoToPointEvent, ShowfileSchema } from "../../common/show";
 import { CubicBezier, SplinePointType } from "../../common/spline";
-// @ts-expect-error: chessbots client is a CommonJS module, but this library is a ES Module, so we need to tell TypeScript that it's okay
-import { decode as cborDecode } from "cbor-x";
-
-// @ts-expect-error: chessbots client is a CommonJS module, but this library is a ES Module, so we need to tell TypeScript that it's okay
-import { fileOpen } from "browser-fs-access";
 
 export const executor = new CommandExecutor();
 
@@ -262,78 +253,95 @@ apiRouter.get("/do-parallel", async (_, res) => {
     res.send({ message: "success", timeMs: time });
 });
 
-apiRouter.post("/do-big", async (_, res) => {
-    console.log("starting test group");
-    const start = Date.now();
+apiRouter.post("/do-big", async (req, res) => {
+    console.log("Parsing show");
 
-    const blob = await fileOpen({
-        mimeTypes: [CHESSBOTS_SHOWFILE_MIME_TYPE],
-        extensions: [CHESSBOTS_SHOWFILE_EXTENSION],
-        description: "Chess Bots Showfile",
-    });
+    const validateResult = ShowfileSchema.validate(req.body.show);
+
+    if (!validateResult.success) {
+        res.json({ error: "Showfile is invalid" });
+        console.log("Show parsing failed");
+        return;
+    }
+
+    const show = validateResult.value;
 
-    const data = cborDecode(new Uint8Array(await blob.arrayBuffer()));
-    const show = ShowfileSchema.check(data);
-    if (show) {
-        const shows = show; ///JSON.parse(req.query.show.toString()) as Showfile;
-        const robotsEntries = Array.from(robotManager.idsToRobots.entries());
-        const commands: Command[] = [];
-        for (let x = 0; x < shows.timeline.length; x++) {
-            let start = shows.timeline[x].startPoint.target.point;
-            const cmd: Command[] = [];
-            for (let y = 0; y < shows.timeline[x].remainingEvents.length; y++) {
-                if (
-                    shows.timeline[x].remainingEvents[y].type === "goto_point"
-                ) {
-                    const goto = shows.timeline[x].remainingEvents[
-                        y
-                    ] as GoToPointEvent;
-                    if (goto.target.type === SplinePointType.QuadraticBezier) {
-                        cmd.push(
-                            new DriveQuadraticSplineCommand(
-                                robotsEntries[x][1].id,
-                                start,
-                                goto.target.endPoint,
-                                goto.target.endPoint,
-                                shows.timeline[x].remainingEvents[y].durationMs,
-                            ),
-                        );
-                    } else if (
-                        goto.target.type === SplinePointType.CubicBezier
-                    ) {
-                        const go2 = goto.target as CubicBezier;
-                        cmd.push(
-                            new DriveCubicSplineCommand(
-                                robotsEntries[x][1].id,
-                                start,
-                                goto.target.endPoint,
-                                go2.controlPoint,
-                                goto.target.endPoint,
-                                shows.timeline[x].remainingEvents[y].durationMs,
-                            ),
-                        );
-                    }
-                    start = goto.target.endPoint;
-                } else if (
-                    shows.timeline[x].remainingEvents[y].type === "wait"
-                ) {
+    const robotsEntries = Array.from(robotManager.idsToRobots.entries());
+    const commandGroups: Command[] = [];
+    for (
+        let timelineLayerIndex = 0;
+        timelineLayerIndex < show.timeline.length;
+        timelineLayerIndex++
+    ) {
+        let start = show.timeline[timelineLayerIndex].startPoint.target.point;
+        const cmd: Command[] = [];
+        for (
+            let y = 0;
+            y < show.timeline[timelineLayerIndex].remainingEvents.length;
+            y++
+        ) {
+            const event = show.timeline[timelineLayerIndex].remainingEvents[y];
+            if (event.type === "goto_point") {
+                const goto = show.timeline[timelineLayerIndex].remainingEvents[
+                    y
+                ] as GoToPointEvent;
+                if (goto.target.type === SplinePointType.QuadraticBezier) {
                     cmd.push(
                         new DriveQuadraticSplineCommand(
-                            robotsEntries[x][1].id,
-                            start,
+                            robotsEntries[timelineLayerIndex][1].id,
                             start,
+                            goto.target.endPoint,
+                            goto.target.endPoint,
+                            show.timeline[timelineLayerIndex].remainingEvents[
+                                y
+                            ].durationMs,
+                        ),
+                    );
+                } else if (goto.target.type === SplinePointType.CubicBezier) {
+                    const go2 = goto.target as CubicBezier;
+                    cmd.push(
+                        new DriveCubicSplineCommand(
+                            robotsEntries[timelineLayerIndex][1].id,
                             start,
-                            shows.timeline[x].remainingEvents[y].durationMs,
+                            goto.target.endPoint,
+                            go2.controlPoint,
+                            goto.target.endPoint,
+                            show.timeline[timelineLayerIndex].remainingEvents[
+                                y
+                            ].durationMs,
                         ),
                     );
                 }
+                start = goto.target.endPoint;
+            } else if (event.type === "wait") {
+                cmd.push(
+                    new DriveQuadraticSplineCommand(
+                        robotsEntries[timelineLayerIndex][1].id,
+                        start,
+                        start,
+                        start,
+                        show.timeline[timelineLayerIndex].remainingEvents[
+                            y
+                        ].durationMs,
+                    ),
+                );
+            } else if (event.type === "turn") {
+                cmd.push(
+                    new SpinRadiansCommand(
+                        robotsEntries[timelineLayerIndex][1].id,
+                        event.radians,
+                        event.durationMs,
+                    ),
+                );
             }
-            commands.push(new SequentialCommandGroup(commands));
         }
-        await new ParallelCommandGroup(commands).execute();
-        console.log("finally");
+        commandGroups.push(new SequentialCommandGroup(cmd));
     }
+    const start = Date.now();
+    console.log("Executing commands");
+    await new ParallelCommandGroup(commandGroups).execute();
     const time = Date.now() - start;
+    console.log("Command execution completed", { time });
     res.send({ message: "success", timeMs: time });
 });
 

From 56b2e7af73db740d613dbe7f62f1606528cbd48a Mon Sep 17 00:00:00 2001
From: gabriel burbach <gabriel.burbach02@gmail.com>
Date: Sat, 26 Apr 2025 00:50:46 -0500
Subject: [PATCH 79/92] Small fix

---
 src/client/editor/editor.tsx | 2 +-
 src/server/api/api.ts        | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/client/editor/editor.tsx b/src/client/editor/editor.tsx
index 07e01fb1..25cf0ff7 100644
--- a/src/client/editor/editor.tsx
+++ b/src/client/editor/editor.tsx
@@ -653,7 +653,7 @@ export function Editor() {
                 </ButtonGroup>
                 <Button
                     onClick={async () => {
-                        post("/do-big", { show });
+                        post("/do-big", { show: JSON.stringify(show) });
                     }}
                 />
 
diff --git a/src/server/api/api.ts b/src/server/api/api.ts
index 91518e5c..2a2d4153 100644
--- a/src/server/api/api.ts
+++ b/src/server/api/api.ts
@@ -256,10 +256,10 @@ apiRouter.get("/do-parallel", async (_, res) => {
 apiRouter.post("/do-big", async (req, res) => {
     console.log("Parsing show");
 
-    const validateResult = ShowfileSchema.validate(req.body.show);
+    const validateResult = ShowfileSchema.validate(JSON.parse(req.query.show as string));
 
     if (!validateResult.success) {
-        res.json({ error: "Showfile is invalid" });
+        res.status(400).json({ error: "Showfile is invalid" });
         console.log("Show parsing failed");
         return;
     }

From 1157a8d73ad43e2f90b384d142c6d1f25d4e0f6d Mon Sep 17 00:00:00 2001
From: gabriel burbach <gabriel.burbach02@gmail.com>
Date: Sat, 26 Apr 2025 00:58:43 -0500
Subject: [PATCH 80/92] Fix

---
 src/server/api/api.ts | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/src/server/api/api.ts b/src/server/api/api.ts
index 2a2d4153..06970979 100644
--- a/src/server/api/api.ts
+++ b/src/server/api/api.ts
@@ -335,6 +335,20 @@ apiRouter.post("/do-big", async (req, res) => {
                 );
             }
         }
+        if (cmd.length === 0) {
+            console.warn("No commands found for robot " + robotsEntries[timelineLayerIndex][1].id);
+            continue;
+        }
+        // using this as a scuffed stop command
+        cmd.push(
+            new DriveQuadraticSplineCommand(
+                robotsEntries[timelineLayerIndex][1].id,
+                start, 
+                start,
+                start,
+                0,
+            ),
+        )
         commandGroups.push(new SequentialCommandGroup(cmd));
     }
     const start = Date.now();

From f66d40172d3a3f19ff2fdefa4c5eac8ab0e84419 Mon Sep 17 00:00:00 2001
From: Jason Antwi-Appah <hey@jasonaa.me>
Date: Sat, 26 Apr 2025 01:05:48 -0500
Subject: [PATCH 81/92] Format

---
 src/client/editor/showfile-state.ts | 10 ++++------
 src/client/editor/spline-editor.tsx |  8 ++++----
 src/common/show.ts                  |  8 ++++----
 src/server/api/api.ts               | 13 +++++++++----
 4 files changed, 21 insertions(+), 18 deletions(-)

diff --git a/src/client/editor/showfile-state.ts b/src/client/editor/showfile-state.ts
index 4775ef1a..09889521 100644
--- a/src/client/editor/showfile-state.ts
+++ b/src/client/editor/showfile-state.ts
@@ -198,9 +198,7 @@ export function useShowfile() {
             const events = [...remainingEvents];
             const eventToUpdate = events[pointIndex];
 
-            if (
-                eventToUpdate?.type === TimelineEventTypes.GoToPointEvent
-            ) {
+            if (eventToUpdate?.type === TimelineEventTypes.GoToPointEvent) {
                 events[pointIndex] = {
                     ...eventToUpdate,
                     target: {
@@ -225,10 +223,10 @@ export function useShowfile() {
             const { startPoint, remainingEvents } = layer;
             const events = [...remainingEvents];
             const eventToUpdate = events[pointIndex];
-    
+
             if (
-                eventToUpdate?.type === TimelineEventTypes.GoToPointEvent
-                && eventToUpdate.target.type === SplinePointType.CubicBezier
+                eventToUpdate?.type === TimelineEventTypes.GoToPointEvent &&
+                eventToUpdate.target.type === SplinePointType.CubicBezier
             ) {
                 events[pointIndex] = {
                     ...eventToUpdate,
diff --git a/src/client/editor/spline-editor.tsx b/src/client/editor/spline-editor.tsx
index 738c19e6..10976a4a 100644
--- a/src/client/editor/spline-editor.tsx
+++ b/src/client/editor/spline-editor.tsx
@@ -146,10 +146,10 @@ export function SplineEditor({
                         <SplineControlPoint
                             point={point.controlPoint}
                             onMove={(x, y) =>
-                            onControlPointMove(
-                                getOriginalEventIndex(index),
-                                { x, y }
-                            )
+                                onControlPointMove(
+                                    getOriginalEventIndex(index),
+                                    { x, y },
+                                )
                             }
                         />
                     )}
diff --git a/src/common/show.ts b/src/common/show.ts
index 4d9b7bdf..99ff397e 100644
--- a/src/common/show.ts
+++ b/src/common/show.ts
@@ -150,7 +150,7 @@ export function createNewShowfile(): Showfile {
                         target: {
                             type: SplinePointType.QuadraticBezier,
                             endPoint: { x: 100, y: 100 },
-                            controlPoint: { x: 60, y: 120 }
+                            controlPoint: { x: 60, y: 120 },
                         },
                         id: "4f21401d-07cf-434f-a73c-6482ab82f211",
                     },
@@ -208,8 +208,8 @@ export const loadShowfileFromBinary = (binary: Buffer | Uint8Array) => {
     const result = ShowfileSchema.validate(decodedCborData);
 
     if (result.success) {
-        return result.value
+        return result.value;
     }
 
-    return null
-}
\ No newline at end of file
+    return null;
+};
diff --git a/src/server/api/api.ts b/src/server/api/api.ts
index 06970979..16b20c0c 100644
--- a/src/server/api/api.ts
+++ b/src/server/api/api.ts
@@ -256,7 +256,9 @@ apiRouter.get("/do-parallel", async (_, res) => {
 apiRouter.post("/do-big", async (req, res) => {
     console.log("Parsing show");
 
-    const validateResult = ShowfileSchema.validate(JSON.parse(req.query.show as string));
+    const validateResult = ShowfileSchema.validate(
+        JSON.parse(req.query.show as string),
+    );
 
     if (!validateResult.success) {
         res.status(400).json({ error: "Showfile is invalid" });
@@ -336,19 +338,22 @@ apiRouter.post("/do-big", async (req, res) => {
             }
         }
         if (cmd.length === 0) {
-            console.warn("No commands found for robot " + robotsEntries[timelineLayerIndex][1].id);
+            console.warn(
+                "No commands found for robot " +
+                    robotsEntries[timelineLayerIndex][1].id,
+            );
             continue;
         }
         // using this as a scuffed stop command
         cmd.push(
             new DriveQuadraticSplineCommand(
                 robotsEntries[timelineLayerIndex][1].id,
-                start, 
+                start,
                 start,
                 start,
                 0,
             ),
-        )
+        );
         commandGroups.push(new SequentialCommandGroup(cmd));
     }
     const start = Date.now();

From a99477d7cb7473690cff9b8750e70cb83989fd46 Mon Sep 17 00:00:00 2001
From: Jason Antwi-Appah <hey@jasonaa.me>
Date: Sat, 26 Apr 2025 15:26:04 -0500
Subject: [PATCH 82/92] Force bot server to listen on IPv4 address

---
 src/server/api/tcp-interface.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/server/api/tcp-interface.ts b/src/server/api/tcp-interface.ts
index 4824b1d3..eb19b021 100644
--- a/src/server/api/tcp-interface.ts
+++ b/src/server/api/tcp-interface.ts
@@ -289,7 +289,6 @@ export class BotTunnel {
  */
 export class TCPServer {
     private server: net.Server;
-    priv;
 
     /**
      * creates a tcp server on port from server config and registers passed in ids with their corresponding bot tunnels
@@ -304,7 +303,7 @@ export class TCPServer {
     ) {
         this.server = net.createServer();
         this.server.on("connection", this.handleConnection.bind(this));
-        this.server.listen(config["tcpServerPort"], () => {
+        this.server.listen(config["tcpServerPort"], "0.0.0.0", () => {
             console.log(
                 "TCP bot server listening to %j",
                 this.server.address(),

From 5f19c4bb566b6794869b171da05967e7965566ef Mon Sep 17 00:00:00 2001
From: Jason Antwi-Appah <hey@jasonaa.me>
Date: Sat, 26 Apr 2025 15:26:25 -0500
Subject: [PATCH 83/92] Update default durations

---
 src/client/editor/showfile-state.ts | 2 +-
 src/common/show.ts                  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/client/editor/showfile-state.ts b/src/client/editor/showfile-state.ts
index 09889521..0646ab6a 100644
--- a/src/client/editor/showfile-state.ts
+++ b/src/client/editor/showfile-state.ts
@@ -54,7 +54,7 @@ export function useShowfile() {
         SplinePointType.QuadraticBezier,
     );
 
-    const [defaultEventDurationMs, setDefaultEventDurationMs] = useState(750);
+    const [defaultEventDurationMs, setDefaultEventDurationMs] = useState(3750);
 
     const [selectedLayerIndex, setSelectedLayerIndex] = useState(0);
 
diff --git a/src/common/show.ts b/src/common/show.ts
index 99ff397e..e3644d32 100644
--- a/src/common/show.ts
+++ b/src/common/show.ts
@@ -141,7 +141,7 @@ export function createNewShowfile(): Showfile {
                     {
                         id: "a8e97232-8f22-4cc2-bcc4-ab523eeb801d",
                         type: TimelineEventTypes.TurnEvent,
-                        durationMs: 750,
+                        durationMs: 1750,
                         radians: 2 * Math.PI,
                     },
                     {

From 1eba4db17c1f8553f3c964c6c5a1e005090e904b Mon Sep 17 00:00:00 2001
From: Jason Antwi-Appah <hey@jasonaa.me>
Date: Sat, 26 Apr 2025 15:31:03 -0500
Subject: [PATCH 84/92] Minor refactoring to improve readability in /do-big
 endpoint

---
 src/server/api/api.ts | 113 +++++++++++++++++++++---------------------
 1 file changed, 57 insertions(+), 56 deletions(-)

diff --git a/src/server/api/api.ts b/src/server/api/api.ts
index 16b20c0c..2b95c6a2 100644
--- a/src/server/api/api.ts
+++ b/src/server/api/api.ts
@@ -1,6 +1,5 @@
 import { WebsocketRequestHandler } from "express-ws";
 import { Router } from "express";
-//import { decode as cborDecode, encode as cborEncode } from "cbor";
 
 import { parseMessage } from "../../common/message/parse-message";
 import {
@@ -43,8 +42,8 @@ import {
     ParallelCommandGroup,
     SequentialCommandGroup,
 } from "../command/command";
-import { GoToPointEvent, ShowfileSchema } from "../../common/show";
-import { CubicBezier, SplinePointType } from "../../common/spline";
+import { ShowfileSchema, TimelineEventTypes } from "../../common/show";
+import { SplinePointType } from "../../common/spline";
 
 export const executor = new CommandExecutor();
 
@@ -268,100 +267,102 @@ apiRouter.post("/do-big", async (req, res) => {
 
     const show = validateResult.value;
 
-    const robotsEntries = Array.from(robotManager.idsToRobots.entries());
-    const commandGroups: Command[] = [];
+    const connectedRobotIds = Array.from(robotManager.idsToRobots.keys());
+
+    if (connectedRobotIds.length < show.timeline.length) {
+        const r = { error: `Not enough robots connected. Got ${connectedRobotIds.length}, expected ${show.timeline.length}` }
+        res.status(400).json(r);
+        console.log(r);
+        return;
+    }
+
+    const commandGroupsForAllRobots: Command[] = [];
     for (
         let timelineLayerIndex = 0;
         timelineLayerIndex < show.timeline.length;
         timelineLayerIndex++
     ) {
-        let start = show.timeline[timelineLayerIndex].startPoint.target.point;
-        const cmd: Command[] = [];
+        // TODO: make a way to map robot ids to timeline layers, so we can choose which physical robot to use for each timeline layer
+        const robotId = connectedRobotIds[timelineLayerIndex];
+        const layer = show.timeline[timelineLayerIndex];
+        let start = layer.startPoint.target.point;
+        const sequentialCommandsForCurrentRobot: Command[] = [];
         for (
-            let y = 0;
-            y < show.timeline[timelineLayerIndex].remainingEvents.length;
-            y++
+            let eventIndex = 0;
+            eventIndex < layer.remainingEvents.length;
+            eventIndex++
         ) {
-            const event = show.timeline[timelineLayerIndex].remainingEvents[y];
-            if (event.type === "goto_point") {
-                const goto = show.timeline[timelineLayerIndex].remainingEvents[
-                    y
-                ] as GoToPointEvent;
-                if (goto.target.type === SplinePointType.QuadraticBezier) {
-                    cmd.push(
+            const event = layer.remainingEvents[eventIndex];
+            if (event.type === TimelineEventTypes.GoToPointEvent) {
+                if (event.target.type === SplinePointType.QuadraticBezier) {
+                    sequentialCommandsForCurrentRobot.push(
                         new DriveQuadraticSplineCommand(
-                            robotsEntries[timelineLayerIndex][1].id,
+                            robotId,
                             start,
-                            goto.target.endPoint,
-                            goto.target.endPoint,
-                            show.timeline[timelineLayerIndex].remainingEvents[
-                                y
-                            ].durationMs,
+                            event.target.endPoint,
+                            event.target.controlPoint,
+                            event.durationMs,
                         ),
                     );
-                } else if (goto.target.type === SplinePointType.CubicBezier) {
-                    const go2 = goto.target as CubicBezier;
-                    cmd.push(
+                } else if (event.target.type === SplinePointType.CubicBezier) {
+                    sequentialCommandsForCurrentRobot.push(
                         new DriveCubicSplineCommand(
-                            robotsEntries[timelineLayerIndex][1].id,
+                            robotId,
                             start,
-                            goto.target.endPoint,
-                            go2.controlPoint,
-                            goto.target.endPoint,
-                            show.timeline[timelineLayerIndex].remainingEvents[
-                                y
-                            ].durationMs,
+                            event.target.endPoint,
+                            event.target.controlPoint,
+                            event.target.controlPoint2,
+                            event.durationMs,
                         ),
                     );
                 }
-                start = goto.target.endPoint;
-            } else if (event.type === "wait") {
-                cmd.push(
+                start = event.target.endPoint;
+            } else if (event.type === TimelineEventTypes.WaitEvent) {
+                sequentialCommandsForCurrentRobot.push(
                     new DriveQuadraticSplineCommand(
-                        robotsEntries[timelineLayerIndex][1].id,
+                        robotId,
                         start,
                         start,
                         start,
-                        show.timeline[timelineLayerIndex].remainingEvents[
-                            y
-                        ].durationMs,
+                        event.durationMs,
                     ),
                 );
-            } else if (event.type === "turn") {
-                cmd.push(
+            } else if (event.type === TimelineEventTypes.TurnEvent) {
+                sequentialCommandsForCurrentRobot.push(
                     new SpinRadiansCommand(
-                        robotsEntries[timelineLayerIndex][1].id,
+                        robotId,
                         event.radians,
                         event.durationMs,
                     ),
                 );
             }
         }
-        if (cmd.length === 0) {
-            console.warn(
-                "No commands found for robot " +
-                    robotsEntries[timelineLayerIndex][1].id,
-            );
+        if (sequentialCommandsForCurrentRobot.length === 0) {
+            console.warn("No commands found for robot " + robotId);
             continue;
         }
-        // using this as a scuffed stop command
-        cmd.push(
+
+        // adding this command which tells the robot to start and stop moving at the same place as a scuffed stop command.
+        // otherwise the robot will keep moving at the speed of the last command it was given.
+        sequentialCommandsForCurrentRobot.push(
             new DriveQuadraticSplineCommand(
-                robotsEntries[timelineLayerIndex][1].id,
+                connectedRobotIds[timelineLayerIndex][1].id,
                 start,
                 start,
                 start,
                 0,
             ),
         );
-        commandGroups.push(new SequentialCommandGroup(cmd));
+        commandGroupsForAllRobots.push(
+            new SequentialCommandGroup(sequentialCommandsForCurrentRobot),
+        );
     }
     const start = Date.now();
     console.log("Executing commands");
-    await new ParallelCommandGroup(commandGroups).execute();
-    const time = Date.now() - start;
-    console.log("Command execution completed", { time });
-    res.send({ message: "success", timeMs: time });
+    await new ParallelCommandGroup(commandGroupsForAllRobots).execute();
+    const timeMs = Date.now() - start;
+    console.log("Command execution completed", { timeMs });
+    res.send({ message: "success", timeMs });
 });
 
 /**

From d93469cc935c6192b35979d92686be73bdf01fbf Mon Sep 17 00:00:00 2001
From: Jason Antwi-Appah <hey@jasonaa.me>
Date: Mon, 28 Apr 2025 02:18:30 -0500
Subject: [PATCH 85/92] Fix type bug

---
 src/server/api/api.ts | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/server/api/api.ts b/src/server/api/api.ts
index 2b95c6a2..eec9a293 100644
--- a/src/server/api/api.ts
+++ b/src/server/api/api.ts
@@ -270,7 +270,9 @@ apiRouter.post("/do-big", async (req, res) => {
     const connectedRobotIds = Array.from(robotManager.idsToRobots.keys());
 
     if (connectedRobotIds.length < show.timeline.length) {
-        const r = { error: `Not enough robots connected. Got ${connectedRobotIds.length}, expected ${show.timeline.length}` }
+        const r = {
+            error: `Not enough robots connected. Got ${connectedRobotIds.length}, expected ${show.timeline.length}`,
+        };
         res.status(400).json(r);
         console.log(r);
         return;
@@ -346,7 +348,7 @@ apiRouter.post("/do-big", async (req, res) => {
         // otherwise the robot will keep moving at the speed of the last command it was given.
         sequentialCommandsForCurrentRobot.push(
             new DriveQuadraticSplineCommand(
-                connectedRobotIds[timelineLayerIndex][1].id,
+                connectedRobotIds[timelineLayerIndex],
                 start,
                 start,
                 start,

From d4305fa7a879c2894e4150daee1213fa578ed370 Mon Sep 17 00:00:00 2001
From: gabriel burbach <gabriel.burbach02@gmail.com>
Date: Mon, 28 Apr 2025 12:07:50 -0500
Subject: [PATCH 86/92] makes the control points explicit in the editor

---
 src/common/spline.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/common/spline.ts b/src/common/spline.ts
index a4e21bc2..04b54fc3 100644
--- a/src/common/spline.ts
+++ b/src/common/spline.ts
@@ -69,9 +69,9 @@ function pointToSvgPathCommand(point: Point): string {
         case SplinePointType.StartPoint:
             return `M${point.point.x},${point.point.y}`;
         case SplinePointType.CubicBezier:
-            return `S${point.controlPoint.x},${point.controlPoint.y} ${point.endPoint.x},${point.endPoint.y}`;
+            return `C${point.controlPoint.x},${point.controlPoint.y} ${point.controlPoint2.x},${point.controlPoint2.y} ${point.endPoint.x},${point.endPoint.y}`;
         case SplinePointType.QuadraticBezier:
-            return `T${point.endPoint.x},${point.endPoint.y}`;
+            return `Q${point.controlPoint.x},${point.controlPoint.y} ${point.endPoint.x},${point.endPoint.y}`;
     }
 }
 

From ba9f446a639e792878fad035c4c5af2cf93cf605 Mon Sep 17 00:00:00 2001
From: democat <cwongmath@gmail.com>
Date: Mon, 28 Apr 2025 19:03:37 -0500
Subject: [PATCH 87/92] bigger timedelta to ensure cmd runs

---
 src/server/api/api.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/server/api/api.ts b/src/server/api/api.ts
index eec9a293..a059ce62 100644
--- a/src/server/api/api.ts
+++ b/src/server/api/api.ts
@@ -352,7 +352,7 @@ apiRouter.post("/do-big", async (req, res) => {
                 start,
                 start,
                 start,
-                0,
+                30,
             ),
         );
         commandGroupsForAllRobots.push(

From e7a61a366ace2d56831533e50747965598d501d9 Mon Sep 17 00:00:00 2001
From: Jason Antwi-Appah <hey@jasonaa.me>
Date: Mon, 28 Apr 2025 19:28:19 -0500
Subject: [PATCH 88/92] Add support for selecting individual events

---
 src/client/editor/editor.tsx        | 79 +++++++++++++++++++++++------
 src/client/editor/showfile-state.ts |  6 +++
 src/client/editor/timeline.tsx      | 12 +++++
 3 files changed, 81 insertions(+), 16 deletions(-)

diff --git a/src/client/editor/editor.tsx b/src/client/editor/editor.tsx
index 25cf0ff7..867aa426 100644
--- a/src/client/editor/editor.tsx
+++ b/src/client/editor/editor.tsx
@@ -13,6 +13,8 @@ import {
     Divider,
     NumericInput,
     Pre,
+    NonIdealState,
+    SectionCard,
 } from "@blueprintjs/core";
 import { RobotGrid, robotSize } from "../debug/simulator";
 import {
@@ -149,6 +151,8 @@ export function Editor() {
         addTurnEventAtIndex,
         getLayerIndexFromEventId,
         addBulkEventsToSelectedLayer,
+        selectedTimelineEventIndex,
+        setSelectedTimelineEventIndex,
     } = useShowfile();
 
     // TODO: fix viewport height / timeline height
@@ -544,22 +548,38 @@ export function Editor() {
                     </RobotGrid>
                 </Section>
                 <Section title="Debug" compact collapsible>
-                    <Pre style={{ height: "52.5vh", overflow: "scroll" }}>
-                        {JSON.stringify(
-                            {
-                                ...show,
-                                audio:
-                                    show.audio ?
-                                        {
-                                            data: "[binary data]",
-                                            mimeType: show.audio.mimeType,
-                                        }
-                                    :   undefined,
-                            },
-                            null,
-                            2,
-                        )}
-                    </Pre>
+                    <SectionCard padded={false}>
+                        <Pre style={{ height: "52.5vh", overflow: "scroll" }}>
+                            {JSON.stringify(
+                                {
+                                    ...show,
+                                    audio:
+                                        show.audio ?
+                                            {
+                                                data: "[binary data]",
+                                                mimeType: show.audio.mimeType,
+                                            }
+                                        :   undefined,
+                                },
+                                null,
+                                2,
+                            )}
+                        </Pre>
+                    </SectionCard>
+                </Section>
+                <Section title="Inspect" compact collapsible>
+                    <SectionCard>
+                        {selectedTimelineEventIndex !== null ?
+                            <p>
+                                Coming soon: event editor.
+                            </p>
+                        :   <NonIdealState
+                                icon="asterisk"
+                                title="No event selected"
+                                description="Select an event on the timeline to manually edit its properties."
+                            />
+                        }
+                    </SectionCard>
                 </Section>
             </div>
             <Section
@@ -718,6 +738,18 @@ export function Editor() {
                                                     0,
                                                 );
                                             }}
+                                            selected={
+                                                selectedTimelineEventIndex?.layerIndex ===
+                                                    layerIndex &&
+                                                selectedTimelineEventIndex?.eventId ===
+                                                    startPoint.id
+                                            }
+                                            onSelect={() => {
+                                                setSelectedTimelineEventIndex({
+                                                    layerIndex,
+                                                    eventId: startPoint.id,
+                                                });
+                                            }}
                                         />
                                         <Reorder.Group
                                             as="div"
@@ -789,6 +821,21 @@ export function Editor() {
                                                                             1,
                                                                     )
                                                             }
+                                                            selected={
+                                                                selectedTimelineEventIndex?.layerIndex ===
+                                                                    layerIndex &&
+                                                                selectedTimelineEventIndex?.eventId ===
+                                                                    event.id
+                                                            }
+                                                            onSelect={() => {
+                                                                setSelectedTimelineEventIndex(
+                                                                    {
+                                                                        layerIndex,
+                                                                        eventId:
+                                                                            event.id,
+                                                                    },
+                                                                );
+                                                            }}
                                                         />
                                                     );
                                                 },
diff --git a/src/client/editor/showfile-state.ts b/src/client/editor/showfile-state.ts
index 0646ab6a..45a87e1e 100644
--- a/src/client/editor/showfile-state.ts
+++ b/src/client/editor/showfile-state.ts
@@ -57,6 +57,8 @@ export function useShowfile() {
     const [defaultEventDurationMs, setDefaultEventDurationMs] = useState(3750);
 
     const [selectedLayerIndex, setSelectedLayerIndex] = useState(0);
+    const [selectedTimelineEventIndex, setSelectedTimelineEventIndex] =
+        useState<{ layerIndex: number; eventId: string } | null>(null);
 
     // used to store the handle to the file system file that the showfile is currently loaded from,
     // so we can save to the same file we've already opened. not all the browsers' file system API
@@ -724,6 +726,8 @@ export function useShowfile() {
             addTurnEventAtIndex,
             getLayerIndexFromEventId,
             addBulkEventsToSelectedLayer,
+            selectedTimelineEventIndex,
+            setSelectedTimelineEventIndex
         }),
         [
             updateTimelineEventOrders,
@@ -770,6 +774,8 @@ export function useShowfile() {
             addTurnEventAtIndex,
             getLayerIndexFromEventId,
             addBulkEventsToSelectedLayer,
+            selectedTimelineEventIndex,
+            setSelectedTimelineEventIndex
         ],
     );
 
diff --git a/src/client/editor/timeline.tsx b/src/client/editor/timeline.tsx
index 92e56f58..b4c7cee2 100644
--- a/src/client/editor/timeline.tsx
+++ b/src/client/editor/timeline.tsx
@@ -26,12 +26,16 @@ export function ReorderableTimelineEvent({
     onDelete,
     onAddWaitEvent,
     onAddTurnEvent,
+    onSelect,
+    selected
 }: PropsWithChildren<{
     event: TimelineEvents;
     onDurationChange: (ms: number) => void;
     onDelete?: () => void;
     onAddWaitEvent?: (position: "before" | "after") => void;
     onAddTurnEvent?: (position: "before" | "after") => void;
+    onSelect: () => void;
+    selected: boolean
 }>) {
     const controls = useDragControls();
 
@@ -48,6 +52,8 @@ export function ReorderableTimelineEvent({
                 onDelete={onDelete}
                 onAddWaitEvent={onAddWaitEvent}
                 onAddTurnEvent={onAddTurnEvent}
+                onSelect={onSelect}
+                selected={selected}
             />
         </Reorder.Item>
     );
@@ -62,6 +68,8 @@ export function TimelineEvent(props: {
     onDelete?: () => void;
     onAddWaitEvent?: (position: "before" | "after") => void;
     onAddTurnEvent?: (position: "before" | "after") => void;
+    selected: boolean
+    onSelect: () => void
 }) {
     const ref = useRef<HTMLDivElement>(null);
     const {
@@ -71,6 +79,8 @@ export function TimelineEvent(props: {
         onDelete,
         onAddWaitEvent,
         onAddTurnEvent,
+        onSelect,
+        selected
     } = props;
     useEffect(() => {
         if (!onDurationChange) return;
@@ -142,8 +152,10 @@ export function TimelineEvent(props: {
                     justifyContent: "space-between",
                     touchAction: "none",
                     overflow: "hidden",
+                    ...(selected ? { border: "1px solid red" } : {})
                 }}
                 compact
+                onClick={onSelect}
             >
                 <span style={{ cursor: "default", userSelect: "none" }}>
                     {event.type}

From 7b57010a54903fafc92403ad1c9783c314a1e816 Mon Sep 17 00:00:00 2001
From: Jason Antwi-Appah <hey@jasonaa.me>
Date: Mon, 28 Apr 2025 19:30:43 -0500
Subject: [PATCH 89/92] Format

---
 src/client/editor/editor.tsx        |  4 +---
 src/client/editor/showfile-state.ts |  4 ++--
 src/client/editor/timeline.tsx      | 12 ++++++------
 3 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/src/client/editor/editor.tsx b/src/client/editor/editor.tsx
index 867aa426..766d9481 100644
--- a/src/client/editor/editor.tsx
+++ b/src/client/editor/editor.tsx
@@ -570,9 +570,7 @@ export function Editor() {
                 <Section title="Inspect" compact collapsible>
                     <SectionCard>
                         {selectedTimelineEventIndex !== null ?
-                            <p>
-                                Coming soon: event editor.
-                            </p>
+                            <p>Coming soon: event editor.</p>
                         :   <NonIdealState
                                 icon="asterisk"
                                 title="No event selected"
diff --git a/src/client/editor/showfile-state.ts b/src/client/editor/showfile-state.ts
index 45a87e1e..bd2f1921 100644
--- a/src/client/editor/showfile-state.ts
+++ b/src/client/editor/showfile-state.ts
@@ -727,7 +727,7 @@ export function useShowfile() {
             getLayerIndexFromEventId,
             addBulkEventsToSelectedLayer,
             selectedTimelineEventIndex,
-            setSelectedTimelineEventIndex
+            setSelectedTimelineEventIndex,
         }),
         [
             updateTimelineEventOrders,
@@ -775,7 +775,7 @@ export function useShowfile() {
             getLayerIndexFromEventId,
             addBulkEventsToSelectedLayer,
             selectedTimelineEventIndex,
-            setSelectedTimelineEventIndex
+            setSelectedTimelineEventIndex,
         ],
     );
 
diff --git a/src/client/editor/timeline.tsx b/src/client/editor/timeline.tsx
index b4c7cee2..caf5a555 100644
--- a/src/client/editor/timeline.tsx
+++ b/src/client/editor/timeline.tsx
@@ -27,7 +27,7 @@ export function ReorderableTimelineEvent({
     onAddWaitEvent,
     onAddTurnEvent,
     onSelect,
-    selected
+    selected,
 }: PropsWithChildren<{
     event: TimelineEvents;
     onDurationChange: (ms: number) => void;
@@ -35,7 +35,7 @@ export function ReorderableTimelineEvent({
     onAddWaitEvent?: (position: "before" | "after") => void;
     onAddTurnEvent?: (position: "before" | "after") => void;
     onSelect: () => void;
-    selected: boolean
+    selected: boolean;
 }>) {
     const controls = useDragControls();
 
@@ -68,8 +68,8 @@ export function TimelineEvent(props: {
     onDelete?: () => void;
     onAddWaitEvent?: (position: "before" | "after") => void;
     onAddTurnEvent?: (position: "before" | "after") => void;
-    selected: boolean
-    onSelect: () => void
+    selected: boolean;
+    onSelect: () => void;
 }) {
     const ref = useRef<HTMLDivElement>(null);
     const {
@@ -80,7 +80,7 @@ export function TimelineEvent(props: {
         onAddWaitEvent,
         onAddTurnEvent,
         onSelect,
-        selected
+        selected,
     } = props;
     useEffect(() => {
         if (!onDurationChange) return;
@@ -152,7 +152,7 @@ export function TimelineEvent(props: {
                     justifyContent: "space-between",
                     touchAction: "none",
                     overflow: "hidden",
-                    ...(selected ? { border: "1px solid red" } : {})
+                    ...(selected ? { border: "1px solid red" } : {}),
                 }}
                 compact
                 onClick={onSelect}

From bae8bf71471bf5726eba930b1fc9ee7bfb89b1a2 Mon Sep 17 00:00:00 2001
From: Jason Antwi-Appah <hey@jasonaa.me>
Date: Mon, 28 Apr 2025 23:08:42 -0500
Subject: [PATCH 90/92] Force durations to ints

---
 src/client/editor/points.tsx        | 2 +-
 src/client/editor/spline-editor.tsx | 5 ++---
 src/client/editor/timeline.tsx      | 7 ++++---
 src/common/show.ts                  | 9 +++++----
 src/server/utils/tcp-packet.ts      | 8 ++++----
 5 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/src/client/editor/points.tsx b/src/client/editor/points.tsx
index 19c8245b..1f97fda6 100644
--- a/src/client/editor/points.tsx
+++ b/src/client/editor/points.tsx
@@ -53,7 +53,7 @@ export function SplinePoint({
                         onClick={onJumpToPoint}
                     />
                     <MenuItem
-                        text="Delete..."
+                        text="Delete"
                         intent="danger"
                         onClick={onDelete}
                         disabled={!onDelete}
diff --git a/src/client/editor/spline-editor.tsx b/src/client/editor/spline-editor.tsx
index 10976a4a..975229df 100644
--- a/src/client/editor/spline-editor.tsx
+++ b/src/client/editor/spline-editor.tsx
@@ -114,9 +114,8 @@ export function SplineEditor({
                             const el = document.getElementById(
                                 `timeline-event-${layer.remainingEvents[originalIndex].id}`,
                             );
-                            navigateAndIdentifyTimelineElement(
-                                el as HTMLElement,
-                            );
+                            if (!el) return;
+                            navigateAndIdentifyTimelineElement(el);
                         }}
                     />
                     {/* TODO: add line between control point and end point */}
diff --git a/src/client/editor/timeline.tsx b/src/client/editor/timeline.tsx
index caf5a555..e5571698 100644
--- a/src/client/editor/timeline.tsx
+++ b/src/client/editor/timeline.tsx
@@ -95,7 +95,9 @@ export function TimelineEvent(props: {
                 move: function (event) {
                     event.preventDefault();
                     event.stopPropagation();
-                    onDurationChange(pixelsToMillis(event.deltaRect.width));
+                    onDurationChange(
+                        Math.floor(pixelsToMillis(event.deltaRect.width)),
+                    );
                 },
             },
         });
@@ -105,7 +107,6 @@ export function TimelineEvent(props: {
         <ContextMenu
             content={
                 <Menu>
-                    {/* TODO: add spin before/after current event */}
                     {onDelete && (
                         <MenuItem
                             text="Delete"
@@ -199,7 +200,7 @@ export const TimelineLayer = forwardRef<
         onActive?: () => void;
         active?: boolean;
     }>
->(function TimelineCard({ title, children, onDelete, onActive, active }, ref) {
+>(function TimelineLayer({ title, children, onDelete, onActive, active }, ref) {
     // TODO: add borders between columns. v low priority
     // https://codepen.io/Kevin-Geary/pen/BavwqYX
     // https://www.youtube.com/watch?v=EQYft7JPKto
diff --git a/src/common/show.ts b/src/common/show.ts
index d5011a61..66cc3cff 100644
--- a/src/common/show.ts
+++ b/src/common/show.ts
@@ -18,6 +18,7 @@ import {
     SplinePointType,
     StartPointSchema,
 } from "./spline";
+import { Uint32 } from "../server/utils/tcp-packet";
 
 
 export const TimelineEventTypes = {
@@ -28,7 +29,7 @@ export const TimelineEventTypes = {
 } as const;
 
 export const GoToPointEventSchema = RuntypesRecord({
-    durationMs: Number,
+    durationMs: Uint32,
     target: MidpointSchema,
     type: Literal(TimelineEventTypes.GoToPointEvent),
     id: String,
@@ -36,7 +37,7 @@ export const GoToPointEventSchema = RuntypesRecord({
 export type GoToPointEvent = Static<typeof GoToPointEventSchema>;
 
 const WaitEventSchema = RuntypesRecord({
-    durationMs: Number,
+    durationMs: Uint32,
     type: Literal(TimelineEventTypes.WaitEvent),
     id: String,
 });
@@ -45,7 +46,7 @@ export type WaitEvent = Static<typeof WaitEventSchema>;
 const StartPointEventSchema = RuntypesRecord({
     type: Literal(TimelineEventTypes.StartPointEvent),
     target: StartPointSchema,
-    durationMs: Number,
+    durationMs: Uint32,
     id: String,
 });
 export type StartPointEvent = Static<typeof StartPointEventSchema>;
@@ -53,7 +54,7 @@ export type StartPointEvent = Static<typeof StartPointEventSchema>;
 const TurnEventSchema = RuntypesRecord({
     type: Literal(TimelineEventTypes.TurnEvent),
     radians: Number,
-    durationMs: Number,
+    durationMs: Uint32,
     id: String,
 });
 export type TurnEvent = Static<typeof TurnEventSchema>;
diff --git a/src/server/utils/tcp-packet.ts b/src/server/utils/tcp-packet.ts
index a7e3f37a..017a0186 100644
--- a/src/server/utils/tcp-packet.ts
+++ b/src/server/utils/tcp-packet.ts
@@ -34,7 +34,7 @@ const Float = NumberType.withConstraint((n) => Number.isFinite(n), {
 const Int32 = Float.withConstraint((n) => Number.isSafeInteger(n), {
     name: "int32",
 });
-const Uint32 = Int32.withConstraint((n) => n >= 0, { name: "uint32" });
+export const Uint32 = Int32.withConstraint((n) => n >= 0, { name: "uint32" });
 const VarId = Uint32;
 const MotorPower = Float.withConstraint((n) => -1 <= n && n <= 1, {
     name: "motor_power",
@@ -167,7 +167,7 @@ export const DRIVE_CUBIC_SPLINE_SCHEMA = Record({
     endPosition: Position,
     controlPositionA: Position,
     controlPositionB: Position,
-    timeDeltaMs: Int32,
+    timeDeltaMs: Uint32,
 });
 
 export const DRIVE_QUADRATIC_SPLINE_SCHEMA = Record({
@@ -175,13 +175,13 @@ export const DRIVE_QUADRATIC_SPLINE_SCHEMA = Record({
     startPosition: Position,
     endPosition: Position,
     controlPosition: Position,
-    timeDeltaMs: Int32,
+    timeDeltaMs: Uint32,
 });
 
 export const SPIN_RADIANS_SCHEMA = Record({
     type: Literal(PacketType.SPIN_RADIANS),
     radians: Float,
-    timeDeltaMs: Int32,
+    timeDeltaMs: Uint32,
 });
 
 export const ESTOP_SCHEMA = Record({ type: Literal(PacketType.ESTOP) });

From d2aeec184088d077586ec4b55e06f6eab85d8052 Mon Sep 17 00:00:00 2001
From: Jason Antwi-Appah <hey@jasonaa.me>
Date: Mon, 28 Apr 2025 23:16:19 -0500
Subject: [PATCH 91/92] Begin inspector panel

---
 src/client/editor/editor.tsx | 166 ++++++++++++++++-------------------
 1 file changed, 75 insertions(+), 91 deletions(-)

diff --git a/src/client/editor/editor.tsx b/src/client/editor/editor.tsx
index 766d9481..df5e0dc0 100644
--- a/src/client/editor/editor.tsx
+++ b/src/client/editor/editor.tsx
@@ -472,71 +472,51 @@ export function Editor() {
                             ></div>
                         )}
                         {show.timeline.map((layer, index) => (
-                            <>
-                                {/* TODO: render bots */}
-
-                                <div
-                                    style={{
-                                        opacity:
-                                            selectedLayerIndex === index ? 1 : (
-                                                0.35
-                                            ),
-                                    }}
-                                >
-                                    <SplineEditor
-                                        key={`spline-editor-${index}`}
-                                        layer={layer}
-                                        onStartPointMove={(coords) =>
-                                            handleStartPointMove(index, coords)
-                                        }
-                                        onPointMove={(pointIdx, coords) =>
-                                            handlePointMove(
-                                                index,
-                                                pointIdx,
-                                                coords,
-                                            )
-                                        }
-                                        onControlPointMove={(
+                            <div
+                                style={{
+                                    opacity:
+                                        selectedLayerIndex === index ? 1 : 0.35,
+                                }}
+                            >
+                                <SplineEditor
+                                    key={`spline-editor-${index}`}
+                                    layer={layer}
+                                    onStartPointMove={(coords) =>
+                                        handleStartPointMove(index, coords)
+                                    }
+                                    onPointMove={(pointIdx, coords) =>
+                                        handlePointMove(index, pointIdx, coords)
+                                    }
+                                    onControlPointMove={(pointIdx, coords) =>
+                                        handleControlPointMove(
+                                            index,
                                             pointIdx,
                                             coords,
-                                        ) =>
-                                            handleControlPointMove(
-                                                index,
-                                                pointIdx,
-                                                coords,
-                                            )
-                                        }
-                                        onControlPoint2Move={(
+                                        )
+                                    }
+                                    onControlPoint2Move={(pointIdx, coords) =>
+                                        handleControlPoint2Move(
+                                            index,
                                             pointIdx,
                                             coords,
-                                        ) =>
-                                            handleControlPoint2Move(
-                                                index,
-                                                pointIdx,
-                                                coords,
-                                            )
-                                        }
-                                        onDeleteStartPoint={() =>
-                                            handleDeleteStartPoint(index)
-                                        }
-                                        onDeletePoint={(pointIdx) =>
-                                            handleDeletePoint(index, pointIdx)
-                                        }
-                                        onSwitchPointType={(
+                                        )
+                                    }
+                                    onDeleteStartPoint={() =>
+                                        handleDeleteStartPoint(index)
+                                    }
+                                    onDeletePoint={(pointIdx) =>
+                                        handleDeletePoint(index, pointIdx)
+                                    }
+                                    onSwitchPointType={(pointIdx, newType) =>
+                                        handleSwitchPointType(
+                                            index,
                                             pointIdx,
                                             newType,
-                                        ) =>
-                                            handleSwitchPointType(
-                                                index,
-                                                pointIdx,
-                                                newType,
-                                            )
-                                        }
-                                    />
-                                </div>
-                            </>
+                                        )
+                                    }
+                                />
+                            </div>
                         ))}
-                        {/* Render Animated Robots separately */}
                         {show.timeline.map((layer, index) => (
                             <AnimatedRobotRenderer
                                 key={`animated-robot-${index}`}
@@ -547,38 +527,43 @@ export function Editor() {
                         ))}
                     </RobotGrid>
                 </Section>
-                <Section title="Debug" compact collapsible>
-                    <SectionCard padded={false}>
-                        <Pre style={{ height: "52.5vh", overflow: "scroll" }}>
-                            {JSON.stringify(
-                                {
-                                    ...show,
-                                    audio:
-                                        show.audio ?
-                                            {
-                                                data: "[binary data]",
-                                                mimeType: show.audio.mimeType,
-                                            }
-                                        :   undefined,
-                                },
-                                null,
-                                2,
-                            )}
-                        </Pre>
-                    </SectionCard>
-                </Section>
-                <Section title="Inspect" compact collapsible>
-                    <SectionCard>
-                        {selectedTimelineEventIndex !== null ?
-                            <p>Coming soon: event editor.</p>
-                        :   <NonIdealState
-                                icon="asterisk"
-                                title="No event selected"
-                                description="Select an event on the timeline to manually edit its properties."
-                            />
-                        }
-                    </SectionCard>
-                </Section>
+                <div style={{ display: "flex", flexDirection: "column" }}>
+                    <Section title="Debug" compact collapsible>
+                        <SectionCard padded={false}>
+                            <Pre
+                                style={{ height: "52.5vh", overflow: "scroll" }}
+                            >
+                                {JSON.stringify(
+                                    {
+                                        ...show,
+                                        audio:
+                                            show.audio ?
+                                                {
+                                                    data: "[binary data]",
+                                                    mimeType:
+                                                        show.audio.mimeType,
+                                                }
+                                            :   undefined,
+                                    },
+                                    null,
+                                    2,
+                                )}
+                            </Pre>
+                        </SectionCard>
+                    </Section>
+                    <Section title="Inspect" compact collapsible>
+                        <SectionCard>
+                            {selectedTimelineEventIndex !== null ?
+                                <p>Coming soon: event editor.</p>
+                            :   <NonIdealState
+                                    icon="asterisk"
+                                    title="No event selected"
+                                    description="Select an event on the timeline to manually edit its properties."
+                                />
+                            }
+                        </SectionCard>
+                    </Section>
+                </div>
             </div>
             <Section
                 title="Timeline"
@@ -840,7 +825,6 @@ export function Editor() {
                                             )}
                                         </Reorder.Group>
                                     </div>
-                                    {/* TODO: add ability to add events */}
                                 </TimelineLayer>
                             );
                         },

From f6acdc711873caa6aa601a4dc621c96ca6dccc42 Mon Sep 17 00:00:00 2001
From: Jason Antwi-Appah <hey@jasonaa.me>
Date: Mon, 5 May 2025 04:46:30 -0500
Subject: [PATCH 92/92] Fix typo + make unique IDs for default events

---
 src/common/show.ts | 18 ++++++++----------
 1 file changed, 8 insertions(+), 10 deletions(-)

diff --git a/src/common/show.ts b/src/common/show.ts
index 66cc3cff..4e59c5af 100644
--- a/src/common/show.ts
+++ b/src/common/show.ts
@@ -20,7 +20,6 @@ import {
 } from "./spline";
 import { Uint32 } from "../server/utils/tcp-packet";
 
-
 export const TimelineEventTypes = {
     GoToPointEvent: "goto_point",
     WaitEvent: "wait",
@@ -77,7 +76,6 @@ export type TimelineEvents =
     | StartPointEvent
     | TurnEvent;
 
-
 /**
  * The showfile schema.
  *
@@ -138,29 +136,29 @@ export function createNewShowfile(): Showfile {
                         },
                     },
                     durationMs: 3000,
-                    id: "4f21401d-07cf-434f-a73c-6482ab82f210",
+                    id: crypto.randomUUID(),
                 },
                 remainingEvents: [
                     {
-                        id: "a8e97232-8f22-4cc2-bcc4-ab523eeb801d",
+                        id: crypto.randomUUID(),
                         type: TimelineEventTypes.TurnEvent,
                         durationMs: 1750,
                         radians: 2 * Math.PI,
                     },
+                    {
                         type: TimelineEventTypes.GoToPointEvent,
                         durationMs: 1000,
                         target: {
                             type: SplinePointType.QuadraticBezier,
                             endPoint: { x: 100, y: 100 },
                             controlPoint: { x: 60, y: 120 },
-
                         },
-                        id: "4f21401d-07cf-434f-a73c-6482ab82f211",
+                        id: crypto.randomUUID(),
                     },
                     {
                         type: TimelineEventTypes.WaitEvent,
                         durationMs: 5000,
-                        id: "4f21401d-07cf-434f-a73c-6482ab82f212",
+                        id: crypto.randomUUID(),
                     },
                     {
                         type: TimelineEventTypes.GoToPointEvent,
@@ -177,7 +175,7 @@ export function createNewShowfile(): Showfile {
                                 y: 60,
                             },
                         },
-                        id: "4f21401d-07cf-434f-a73c-6482ab82f213",
+                        id: crypto.randomUUID(),
                     },
                     {
                         type: TimelineEventTypes.GoToPointEvent,
@@ -187,7 +185,7 @@ export function createNewShowfile(): Showfile {
                             endPoint: { x: 70, y: 70 },
                             controlPoint: { x: 85, y: 90 },
                         },
-                        id: "4f21401d-07cf-434f-a73c-6482ab82f214",
+                        id: crypto.randomUUID(),
                     },
                 ],
             },
@@ -215,4 +213,4 @@ export const loadShowfileFromBinary = (binary: Buffer | Uint8Array) => {
     }
 
     return null;
-};
\ No newline at end of file
+};