@frebreco/canvas 0.3.0-next.4 → 0.3.0-next.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@frebreco/canvas",
-  "version": "0.3.0-next.4",
+  "version": "0.3.0-next.6",
   "description": "A multiplayer canvas for coding agents that run on your machine.",
   "license": "MIT",
   "type": "module",

package/src/cli.ts

@@ -54,6 +54,7 @@ const { server, room } = await serve({
   port: Number(values.port),
   hostname: tlsHost ? "0.0.0.0" : "127.0.0.1",
   ...(tlsHost && { tls: { cert: values.cert, key: values.key } }),
+  ...(manifest.version && { version: manifest.version }),
 });
 
 const serverUrl = tlsHost ? `wss://${tlsHost}:${server.port}` : `ws://127.0.0.1:${server.port}`;

package/src/server/server.ts

@@ -1,13 +1,14 @@
 /**
  * `canvas serve`: the local half of canvas. One WebSocket endpoint that only
- * the host's browser may use (it presents the token from the printed link).
+ * the host's browser may use (it presents the token from the printed link),
+ * in one tab at a time: a newer tab takes over from an older one.
  * Nothing here knows about guests — the host's browser is the relay.
  */
 
 import type { ServerWebSocket } from "bun";
 import { appendFileSync, existsSync, readFileSync } from "node:fs";
 import { join } from "node:path";
-import type { ClientToServer, ServerToClient } from "../shared/protocol";
+import { HOST_REPLACED, type ClientToServer, type ServerToClient } from "../shared/protocol";
 import { AgentManager, detectAgents } from "./agents";
 import { BoardMcp } from "./board-mcp";
 import { Files } from "./files";
@@ -20,17 +21,17 @@ export interface ServeOptions {
   readonly port: number;
   readonly hostname: string;
   readonly tls?: { readonly cert: string; readonly key: string };
+  /** The published version this runs as; none for a checkout. */
+  readonly version?: string;
 }
 
 export async function serve(options: ServeOptions) {
   const store = new Store(options.dir);
   excludeFromGit(options.dir);
   const room = await store.room();
-  const clients = new Set<ServerWebSocket<unknown>>();
-  const broadcast = (message: ServerToClient) => {
-    const text = JSON.stringify(message);
-    for (const ws of clients) ws.send(text);
-  };
+  // The host tab: the board, and so every board tool call, lives there.
+  let host: ServerWebSocket<unknown> | null = null;
+  const broadcast = (message: ServerToClient) => host?.send(JSON.stringify(message));
 
   // Scratch files are written by agents' board tools; `files` mirrors them.
   const scratch = new Scratch(options.dir, (path) => files.scratchChanged(path));
@@ -46,9 +47,8 @@ export async function serve(options: ServeOptions) {
     read: (path) => files.read(path),
     scratch,
     relay: (call) => {
-      const [ws] = clients;
-      if (!ws) return false;
-      ws.send(JSON.stringify({ t: "board-call", ...call } satisfies ServerToClient));
+      if (!host) return false;
+      host.send(JSON.stringify({ t: "board-call", ...call } satisfies ServerToClient));
       return true;
     },
   });
@@ -148,12 +148,17 @@ export async function serve(options: ServeOptions) {
     websocket: {
       maxPayloadLength: 64 * 1024 * 1024,
       open(ws) {
-        clients.add(ws);
+        if (host) {
+          files.drop(host);
+          host.close(HOST_REPLACED, "opened in another tab");
+        }
+        host = ws;
         const board = store.board();
         const { token: _, ...secrets } = room;
         ws.send(
           JSON.stringify({
             t: "welcome",
+            version: options.version ?? null,
             room: secrets,
             cwd: options.dir,
             agents: agentDefinitions.map(({ kind, label }) => ({ kind, label })),
@@ -163,6 +168,8 @@ export async function serve(options: ServeOptions) {
         );
       },
       message(ws, data) {
+        // Still in flight from a tab that was just replaced.
+        if (ws !== host) return;
         try {
           handle(ws, JSON.parse(String(data)) as ClientToServer);
         } catch (error) {
@@ -170,7 +177,7 @@ export async function serve(options: ServeOptions) {
         }
       },
       close(ws) {
-        clients.delete(ws);
+        if (ws === host) host = null;
         files.drop(ws);
       },
     },

package/src/shared/protocol.ts

@@ -157,6 +157,13 @@ export interface RoomSecrets {
   readonly hostPrivateKey: JsonWebKey;
 }
 
+/**
+ * Close code of a host browser's WebSocket when another one connected: one
+ * host tab at a time, and the replaced one must not reconnect by itself, or
+ * two tabs would take the connection from each other forever.
+ */
+export const HOST_REPLACED = 4001;
+
 export type ClientToServer =
   | { readonly t: "board-save"; readonly state: string }
   | { readonly t: "agent-create"; readonly id: string; readonly agent: AgentKind }
@@ -204,6 +211,8 @@ export type ClientToServer =
 export type ServerToClient =
   | {
       readonly t: "welcome";
+      /** The version `canvas serve` runs as; null for a checkout. */
+      readonly version: string | null;
       readonly room: RoomSecrets;
       readonly cwd: string;
       readonly agents: ReadonlyArray<AgentInfo>;
@@ -251,6 +260,8 @@ export interface RoomState {
   readonly access: GuestAccess;
   readonly cwd: string;
   readonly agents: ReadonlyArray<AgentInfo>;
+  /** `canvas serve`'s version, null for a checkout; absent from hosts older than it. */
+  readonly version?: string | null;
 }
 
 /** Requests a guest sends the host; the host answers `{ok}` or `{ok:false, error}`. */