feat(*): Add websockets via partykit for live notifications of tool usage

partykit/src/client.ts

@@ -0,0 +1,40 @@
+import "./styles.css";
+
+import PartySocket from "partysocket";
+
+declare const PARTYKIT_HOST: string;
+
+let pingInterval: ReturnType<typeof setInterval>;
+
+// Let's append all the messages we get into this DOM element
+const output = document.getElementById("app") as HTMLDivElement;
+
+// Helper function to add a new line to the DOM
+function add(text: string) {
+  output.appendChild(document.createTextNode(text));
+  output.appendChild(document.createElement("br"));
+}
+
+// A PartySocket is like a WebSocket, except it's a bit more magical.
+// It handles reconnection logic, buffering messages while it's offline, and more.
+const conn = new PartySocket({
+  host: PARTYKIT_HOST,
+  room: "my-new-room",
+});
+
+// You can even start sending messages before the connection is open!
+conn.addEventListener("message", (event) => {
+  add(`Received -> ${event.data}`);
+});
+
+// Let's listen for when the connection opens
+// And send a ping every 2 seconds right after
+conn.addEventListener("open", () => {
+  add("Connected!");
+  add("Sending a ping every 2 seconds...");
+  // TODO: make this more interesting / nice
+  clearInterval(pingInterval);
+  pingInterval = setInterval(() => {
+    conn.send("ping");
+  }, 1000);
+});

partykit/src/server.ts

@@ -0,0 +1,18 @@
+import type * as Party from "partykit/server";
+
+export default class Server implements Party.Server {
+  constructor(readonly room: Party.Room) {}
+
+  onConnect(conn: Party.Connection, ctx: Party.ConnectionContext) {
+    // Log connection details
+    console.log(
+      `Connected:\n  id: ${conn.id}\n  room: ${this.room.id}\n  url: ${new URL(ctx.request.url).pathname}`
+    );
+  }
+
+  onMessage(message: string, sender: Party.Connection) {
+    // Broadcast the message to all connected clients in the room
+    this.room.broadcast(message);
+  }
+}
+

partykit/src/styles.css

@@ -0,0 +1,31 @@
+/* 
+  We've already included normalize.css. 
+
+  But we'd like a modern looking boilerplate. 
+  Clean type, sans-serif, and a nice color palette. 
+  
+*/
+
+body {
+  font-family: sans-serif;
+  font-size: 16px;
+  line-height: 1.5;
+  color: #333;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: sans-serif;
+  font-weight: 600;
+  line-height: 1.25;
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+}
+
+#app {
+  padding: 1rem;
+}