@frebreco/canvas 0.3.0-next.3 → 0.3.0-next.5

package/package.json

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

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";
@@ -26,11 +27,9 @@ 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 +45,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,7 +146,11 @@ 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(
@@ -163,6 +165,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 +174,7 @@ export async function serve(options: ServeOptions) {
         }
       },
       close(ws) {
-        clients.delete(ws);
+        if (ws === host) host = null;
         files.drop(ws);
       },
     },

package/src/server/terminals.ts

@@ -6,6 +6,17 @@
 
 const SCROLLBACK = 200_000;
 
+/**
+ * The shell must lead a session of its own, with the PTY as its controlling
+ * terminal, as in any terminal emulator. `Bun.spawn` leaves it in the session
+ * of `canvas serve` (Bun 1.4): Ctrl-C reaches nothing, and whatever opens
+ * `/dev/tty` — fzf's Ctrl-R, sudo, ssh prompts — gets the terminal `canvas
+ * serve` runs in, where it is stopped as a background job. util-linux
+ * `setsid -c` does both; where it is missing (macOS) the shell runs as before.
+ */
+const SETSID = Bun.which("setsid");
+const SESSION = SETSID ? [SETSID, "-c"] : [];
+
 interface Term {
   terminal: Bun.Terminal;
   scrollback: string;
@@ -19,6 +30,7 @@ export class Terminals {
     private readonly dir: string,
     private readonly onData: (id: string, data: string) => void,
     private readonly onExit: (id: string, code: number | null) => void,
+    private readonly shell = process.env.SHELL ?? "bash",
   ) {}
 
   /** Open (or re-attach to) a terminal; returns the scrollback to replay. */
@@ -42,8 +54,7 @@ export class Terminals {
       }),
     };
     this.terms.set(id, term);
-    const shell = process.env.SHELL ?? "bash";
-    const proc = Bun.spawn([shell, "-l"], {
+    const proc = Bun.spawn([...SESSION, this.shell, "-l"], {
       cwd: this.dir,
       terminal: term.terminal,
       env: { ...process.env, TERM: "xterm-256color" },

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 }