offsite 0.0.11 → 0.0.12

package/README.md

@@ -1,10 +1,10 @@
-# offsite
+<img src="apps/web/public/icon-512.png" width="96" alt="OffSite logo">
 
-Claude Code in your browser. It uses the same sessions as the CLI, so you can start in one and resume in the other.
+# OffSite
 
-## Usage
+Claude Code, Codex and OpenCode in your browser. It uses the same sessions as their CLIs, so you can start in one and resume in the other.
 
-Requires Node.js 24+ and [Claude Code](https://code.claude.com), installed and logged in.
+## Usage
 
 ```sh
 npx offsite
@@ -20,21 +20,21 @@ Then open the pairing link it prints. It pairs this browser with the server, so
 | `offsite pair`   | Makes a pairing token for another browser and prints its link. `--name` labels it |
 | `offsite unpair` | Lists paired browsers so you can pick which to unpair                             |
 
-| Flag         | Default      | What it sets                                                                             |
-| ------------ | ------------ | ---------------------------------------------------------------------------------------- |
-| `--host`     | `127.0.0.1`  | Address to listen on                                                                     |
-| `--port`     | `47841`      | Port to listen on                                                                        |
-| `--dir`      | `~/.offsite` | Folder for settings and accounts                                                         |
-| `--no-auth`  | auth on      | Accept connections without the pairing token                                             |
-| `--no-pair`  | pair on      | Don't create a pairing token or print pairing links on start                             |
-| `--fallback` | none         | Address the pairing links add for when this one is unreachable, e.g. a Cloudflare tunnel |
+| Flag        | Default      | What it sets                                                 |
+| ----------- | ------------ | ------------------------------------------------------------ |
+| `--host`    | `127.0.0.1`  | Address to listen on                                         |
+| `--port`    | `47841`      | Port to listen on                                            |
+| `--dir`     | `~/.offsite` | Folder for settings and accounts                             |
+| `--no-auth` | auth on      | Accept connections without the pairing token                 |
+| `--no-pair` | pair on      | Don't create a pairing token or print pairing links on start |
+| `--pwa`     | off          | Serve the web app as an installable app that works offline   |
 
-Pairing tokens stay in `tokens.json` inside `--dir`. A running offsite disconnects an unpaired browser within seconds.
+Pairing tokens stay in `tokens.json` inside `--dir`. A running OffSite disconnects an unpaired browser within seconds.
 
 > [!WARNING]
-> With `--no-auth`, anyone who can reach its port, including any website open in your browser, can run Claude Code and open a terminal on your machine.
+> With `--no-auth`, anyone who can reach its port, including any website open in your browser, can run your coding agents and open a terminal on your machine.
 
-Don't use the same session in offsite and the CLI at the same time. Switching between them is fine.
+Don't use the same session in OffSite and the CLI at the same time. Switching between them is fine.
 
 ## Separate instances
 

package/apps/server/dist/main.mjs

@@ -1,3 +1,4 @@
+import { createHash, randomBytes, randomUUID } from "node:crypto";
 import { chmodSync, closeSync, createReadStream, existsSync, lstatSync, mkdirSync, openSync, readFileSync, readdirSync, realpathSync, renameSync, rmSync, statSync, unlinkSync, watch, writeFileSync } from "node:fs";
 import { createServer } from "node:http";
 import path from "node:path";
@@ -5,7 +6,6 @@ import { consola } from "consola";
 import { WebSocketServer } from "ws";
 import os from "node:os";
 import { deleteSession, forkSession, getSessionMessages, getSubagentMessages, listSessions, query, renameSession } from "@anthropic-ai/claude-agent-sdk";
-import { createHash, randomBytes, randomUUID } from "node:crypto";
 import { execFile, spawn } from "node:child_process";
 import readline from "node:readline";
 import { z } from "zod";
@@ -13,7 +13,7 @@ import { Command } from "@commander-js/extra-typings";
 import { setTimeout as setTimeout$1 } from "node:timers/promises";
 import { OpenCode } from "@opencode/client";
 import { ensure, headers } from "@opencode/client/service";
-import { and, eq, inArray, sql } from "drizzle-orm";
+import { and, eq, gt, inArray, lte, sql } from "drizzle-orm";
 import { sumBy } from "es-toolkit";
 import { DatabaseSync } from "node:sqlite";
 import { drizzle } from "drizzle-orm/node-sqlite";
@@ -127,7 +127,7 @@ var AppServer = class {
 		this.ready = this.call("initialize", {
 			clientInfo: {
 				name: "offsite",
-				title: "Offsite",
+				title: "OffSite",
 				version: "0.0.0"
 			},
 			capabilities: {
@@ -698,12 +698,12 @@ function record$1(value) {
 //#region src/args.ts
 let command = "web";
 let name = null;
-const program = new Command("offsite").description("Starts the server and the web app").option("--host <host>", "Address to listen on", "127.0.0.1").option("--port <port>", "Port to listen on", "47841").option("--dir <dir>", "Folder for settings and accounts", path.join(os.homedir(), ".offsite")).option("--no-auth", "Accept connections without the pairing token").option("--no-pair", "Don't create a pairing token or print pairing links").option("--fallback <url>", "Address to try when this one is unreachable, e.g. a Cloudflare tunnel");
+const program = new Command("offsite").description("Starts the server and the web app").option("--host <host>", "Address to listen on", "127.0.0.1").option("--port <port>", "Port to listen on", "47841").option("--dir <dir>", "Folder for settings and accounts", path.join(os.homedir(), ".offsite")).option("--no-auth", "Accept connections without pairing").option("--no-pair", "Don't create a pairing code or print pairing links").option("--pwa", "Serve the web app as an installable app that works offline");
 program.command("web", { isDefault: true }).description("Starts the server and the web app, same as offsite");
 program.command("serve").description("Starts only the server, without the web app").action(() => {
 	command = "serve";
 });
-program.command("pair").description("Creates a pairing token for another browser and prints its links").option("--name <name>", "Name to recognize this browser by").action((options) => {
+program.command("pair").description("Creates a pairing code for another browser and prints its link").option("--name <name>", "Name to recognize this browser by").action((options) => {
 	command = "pair";
 	name = options.name ?? null;
 });
@@ -2423,10 +2423,16 @@ const sessions$1 = snakeCase.table("sessions", {
 		"minimized"
 	] }).notNull()
 });
-const tokens = snakeCase.table("tokens", {
+const pairingCodes = snakeCase.table("pairing_codes", {
+	hash: text().primaryKey(),
+	name: text(),
+	expiresAt: integer().notNull()
+});
+const devices = snakeCase.table("devices", {
 	hash: text().primaryKey(),
 	name: text(),
 	createdAt: integer().notNull(),
+	expiresAt: integer().notNull(),
 	lastUsedAt: integer()
 });
 const pushSubscriptions = snakeCase.table("push_subscriptions", {
@@ -5821,38 +5827,58 @@ async function answer(client, text) {
 	}
 }
 //#endregion
-//#region src/storage/token.ts
-function readTokens() {
-	return db.select().from(tokens).orderBy(tokens.createdAt).all();
+//#region src/storage/auth.ts
+const CODE_LIFETIME = 3e5;
+const DEVICE_LIFETIME = 2592e6;
+function addCode(name) {
+	const code = randomBytes(16).toString("base64url");
+	db.delete(pairingCodes).where(lte(pairingCodes.expiresAt, Date.now())).run();
+	db.insert(pairingCodes).values({
+		hash: hash(code),
+		name,
+		expiresAt: Date.now() + CODE_LIFETIME
+	}).run();
+	return code;
 }
-function addToken(name) {
+function redeemCode(code) {
+	const found = db.delete(pairingCodes).where(eq(pairingCodes.hash, hash(code))).returning().get();
+	if (found === void 0 || found.expiresAt <= Date.now()) return null;
 	const token = randomBytes(32).toString("base64url");
-	db.insert(tokens).values({
-		hash: hashToken(token),
-		name,
-		createdAt: Date.now()
+	const now = Date.now();
+	db.insert(devices).values({
+		hash: hash(token),
+		name: found.name,
+		createdAt: now,
+		expiresAt: now + DEVICE_LIFETIME
 	}).run();
 	return token;
 }
-function removeTokens(hashes) {
-	db.delete(tokens).where(inArray(tokens.hash, hashes)).run();
+function findDevice(token) {
+	const found = db.select().from(devices).where(and(eq(devices.hash, hash(token)), gt(devices.expiresAt, Date.now()))).get();
+	return found === void 0 ? null : found.hash;
+}
+function isPaired(device) {
+	return db.select().from(devices).where(and(eq(devices.hash, device), gt(devices.expiresAt, Date.now()))).get() !== void 0;
 }
-function hasTokens() {
-	return db.select().from(tokens).limit(1).get() !== void 0;
+function hasDevices() {
+	return db.select().from(devices).where(gt(devices.expiresAt, Date.now())).limit(1).get() !== void 0;
 }
-function matchesToken(given) {
-	if (given === null) return false;
-	return db.select().from(tokens).where(eq(tokens.hash, hashToken(given))).get() !== void 0;
+function readDevices() {
+	return db.select().from(devices).orderBy(devices.createdAt).all();
 }
-function recordUse(token) {
-	db.update(tokens).set({ lastUsedAt: Date.now() }).where(eq(tokens.hash, hashToken(token))).run();
+function removeDevices(hashes) {
+	db.delete(devices).where(inArray(devices.hash, hashes)).run();
 }
-function hashToken(token) {
-	return createHash("sha256").update(token).digest("hex");
+function recordUse(device) {
+	db.update(devices).set({ lastUsedAt: Date.now() }).where(eq(devices.hash, device)).run();
+}
+function hash(secret) {
+	return createHash("sha256").update(secret).digest("hex");
 }
 //#endregion
 //#region src/main.ts
 const UNPAIR_CHECK = 5e3;
+const TICKET_LIFETIME = 6e4;
 const contentTypes = {
 	".html": "text/html; charset=utf-8",
 	".js": "text/javascript; charset=utf-8",
@@ -5870,12 +5896,10 @@ if (!Number.isInteger(port) || port < 1 || port > 65535) {
 	process.exit(1);
 }
 const address = `http://${args.host}:${port}`;
-const fallback = args.fallback === void 0 ? null : readFallback(args.fallback);
 if (args.command === "pair") {
-	const links = pairingLinks(addToken(args.name));
-	console.log("Open this link in the browser to pair:");
+	const links = pairingLinks(addCode(args.name));
+	console.log("Open this link in a browser within 5 minutes to pair it:");
 	console.log(`  ${links.local}`);
-	if (fallback !== null) console.log(`Fallback: ${fallback}`);
 	process.exit(0);
 }
 if (args.command === "unpair") {
@@ -5891,9 +5915,14 @@ if (findClaude() === null) {
 	process.exit(1);
 }
 const publicDir = path.join(import.meta.dirname, "..", "..", "web", "dist");
-const token = args.auth && args.pair && !hasTokens() ? addToken(null) : null;
+const code = args.auth && args.pair && !hasDevices() ? addCode(null) : null;
+const tickets = /* @__PURE__ */ new Map();
 const server = createServer((request, response) => {
 	const url = new URL(request.url ?? "/", "http://localhost");
+	if (url.pathname.startsWith("/api/")) {
+		answerApi(url.pathname, request, response);
+		return;
+	}
 	if (args.command === "serve") {
 		response.statusCode = 404;
 		response.end("offsite serve has no web app");
@@ -5905,26 +5934,27 @@ const sockets = new WebSocketServer({ noServer: true });
 const paired = /* @__PURE__ */ new Map();
 server.on("upgrade", (request, socket, head) => {
 	const url = new URL(request.url ?? "/", "http://localhost");
-	const given = url.searchParams.get("token");
-	if (url.pathname !== "/ws" || !authorized(url)) {
+	const device = args.auth ? redeemTicket(url.searchParams.get("ticket")) : null;
+	if (url.pathname !== "/ws" || args.auth && device === null) {
 		socket.destroy();
 		return;
 	}
 	sockets.handleUpgrade(request, socket, head, (client) => {
 		connectClient(client);
-		if (!args.auth || given === null) return;
-		paired.set(client, given);
+		if (device === null) return;
+		paired.set(client, device);
 		client.on("close", () => paired.delete(client));
-		recordUse(given);
+		recordUse(device);
 	});
 });
 if (args.auth) setInterval(() => {
-	for (const [client, given] of paired) if (!matchesToken(given)) client.close();
+	for (const [client, device] of paired) if (!isPaired(device)) client.close();
+	for (const [ticket, item] of tickets) if (item.expiresAt <= Date.now()) tickets.delete(ticket);
 }, UNPAIR_CHECK);
 server.listen(port, args.host, () => {
 	startPush(`${args.host}:${port}`);
-	if (args.pair && (token !== null || !args.auth)) {
-		const links = pairingLinks(token);
+	if (args.pair && (code !== null || !args.auth)) {
+		const links = pairingLinks(code);
 		if (args.command === "web") console.log(`offsite is running at ${links.local}`);
 	} else {
 		console.log(`offsite is running at ${address}`);
@@ -5938,12 +5968,67 @@ function stop() {
 	stopAll();
 	process.exit(0);
 }
-function authorized(url) {
-	return !args.auth || matchesToken(url.searchParams.get("token"));
+function answerApi(pathname, request, response) {
+	response.setHeader("access-control-allow-origin", "*");
+	if (request.method === "OPTIONS") {
+		response.setHeader("access-control-allow-methods", "POST");
+		response.setHeader("access-control-allow-headers", "authorization");
+		response.statusCode = 204;
+		response.end();
+		return;
+	}
+	if (request.method !== "POST") {
+		response.statusCode = 405;
+		response.end("use POST");
+		return;
+	}
+	const given = request.headers.authorization?.match(/^Bearer (.+)$/)?.[1] ?? null;
+	if (pathname === "/api/pair") {
+		const token = given === null ? null : redeemCode(given);
+		if (token === null) {
+			response.statusCode = 401;
+			response.end("That pairing code expired or was already used");
+			return;
+		}
+		answerJson(response, { token });
+		return;
+	}
+	if (pathname === "/api/ticket") {
+		if (!args.auth) {
+			answerJson(response, { ticket: null });
+			return;
+		}
+		const device = given === null ? null : findDevice(given);
+		if (device === null) {
+			response.statusCode = 401;
+			response.end("This browser needs pairing");
+			return;
+		}
+		const ticket = randomBytes(32).toString("base64url");
+		tickets.set(ticket, {
+			device,
+			expiresAt: Date.now() + TICKET_LIFETIME
+		});
+		answerJson(response, { ticket });
+		return;
+	}
+	response.statusCode = 404;
+	response.end("not found");
+}
+function answerJson(response, body) {
+	response.setHeader("content-type", "application/json");
+	response.end(JSON.stringify(body));
+}
+function redeemTicket(ticket) {
+	if (ticket === null) return null;
+	const found = tickets.get(ticket);
+	tickets.delete(ticket);
+	if (found === void 0 || found.expiresAt <= Date.now()) return null;
+	return found.device;
 }
 async function unpair() {
-	const tokens = readTokens();
-	if (tokens.length === 0) {
+	const devices = readDevices();
+	if (devices.length === 0) {
 		console.log("No browsers are paired");
 		return;
 	}
@@ -5955,11 +6040,12 @@ async function unpair() {
 		type: "multiselect",
 		required: false,
 		cancel: "null",
-		options: tokens.map((item) => ({
+		options: devices.map((item) => ({
 			value: item.hash,
 			label: [
 				item.name ?? "Unnamed",
 				`paired ${new Date(item.createdAt).toLocaleString()}`,
+				`${item.expiresAt <= Date.now() ? "expired" : "expires"} ${new Date(item.expiresAt).toLocaleString()}`,
 				item.lastUsedAt === null ? "never used" : `last used ${new Date(item.lastUsedAt).toLocaleString()}`
 			].join(" · ")
 		}))
@@ -5968,30 +6054,21 @@ async function unpair() {
 		console.log("Nothing unpaired");
 		return;
 	}
-	removeTokens(picked);
+	removeDevices(picked);
 	console.log(`Unpaired ${picked.length} ${picked.length === 1 ? "browser" : "browsers"}; a running offsite disconnects them within seconds`);
 }
-function readFallback(link) {
-	let url;
-	try {
-		url = new URL(link);
-	} catch {
-		console.error(`invalid fallback URL ${link}`);
-		process.exit(1);
-	}
-	if (url.protocol !== "http:" && url.protocol !== "https:") {
-		console.error(`the fallback URL ${link} needs http:// or https://`);
-		process.exit(1);
-	}
-	return url.origin;
-}
-function pairingLinks(token) {
+function pairingLinks(code) {
 	return { local: `${address}/pair#${new URLSearchParams({
 		machine: address,
-		...token !== null && { token }
+		...code !== null && { code }
 	})}` };
 }
 function serveFile(pathname, response) {
+	if (!args.pwa && pathname === "/manifest.webmanifest") {
+		response.statusCode = 404;
+		response.end("offsite runs without --pwa");
+		return;
+	}
 	const requested = path.join(publicDir, path.normalize(pathname));
 	const file = requested.startsWith(publicDir + path.sep) && statSync(requested, { throwIfNoEntry: false })?.isFile() ? requested : path.join(publicDir, "index.html");
 	if (!existsSync(file)) {
@@ -6000,6 +6077,10 @@ function serveFile(pathname, response) {
 		return;
 	}
 	response.setHeader("content-type", contentTypes[path.extname(file)] ?? "application/octet-stream");
+	if (!args.pwa && path.basename(file) === "index.html") {
+		response.end(readFileSync(file, "utf8").replace(/<link rel="manifest"[^>]*>/, ""));
+		return;
+	}
 	createReadStream(file).pipe(response);
 }
 //#endregion