let5see/clawdbot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Gateway: enable canvas host + inject action bridge

Browse Source
This commit is contained in:
Peter Steinberger
2025-12-18 23:32:22 +01:00
parent 06f71d883c
commit ac50a14b6a
5 changed files with 198 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/canvas-host/server.test.ts
View File

@@ -11,6 +11,32 @@ describe("canvas host", () => {
const out = injectCanvasLiveReload("<html><body>Hello</body></html>"); const out = injectCanvasLiveReload("<html><body>Hello</body></html>");
expect(out).toContain("/__clawdis/ws"); expect(out).toContain("/__clawdis/ws");
expect(out).toContain("location.reload"); expect(out).toContain("location.reload");
expect(out).toContain("clawdisCanvasA2UIAction");
expect(out).toContain("clawdisSendUserAction");
});
it("creates a default index.html when missing", async () => {
const dir = await fs.mkdtemp(path.join(os.tmpdir(), "clawdis-canvas-"));
const server = await startCanvasHost({
runtime: defaultRuntime,
rootDir: dir,
port: 0,
listenHost: "127.0.0.1",
allowInTests: true,
});
try {
const res = await fetch(`http://127.0.0.1:${server.port}/`);
const html = await res.text();
expect(res.status).toBe(200);
expect(html).toContain("Interactive test page");
expect(html).toContain("clawdisSendUserAction");
expect(html).toContain("/__clawdis/ws");
} finally {
await server.close();
await fs.rm(dir, { recursive: true, force: true });
}
}); });
it("serves HTML with injection and broadcasts reload on file changes", async () => { it("serves HTML with injection and broadcasts reload on file changes", async () => {
@@ -22,7 +48,7 @@ describe("canvas host", () => {
runtime: defaultRuntime, runtime: defaultRuntime,
rootDir: dir, rootDir: dir,
port: 0, port: 0,
bind: "loopback", listenHost: "127.0.0.1",
allowInTests: true, allowInTests: true,
}); });

148
src/canvas-host/server.ts
View File

@@ -6,8 +6,6 @@ import path from "node:path";
import chokidar from "chokidar"; import chokidar from "chokidar";
import express from "express"; import express from "express";
import { type WebSocket, WebSocketServer } from "ws"; import { type WebSocket, WebSocketServer } from "ws";
import type { BridgeBindMode } from "../config/config.js";
import { pickPrimaryTailnetIPv4 } from "../infra/tailnet.js";
import { detectMime } from "../media/mime.js"; import { detectMime } from "../media/mime.js";
import type { RuntimeEnv } from "../runtime.js"; import type { RuntimeEnv } from "../runtime.js";
import { ensureDir, resolveUserPath } from "../utils.js"; import { ensureDir, resolveUserPath } from "../utils.js";
@@ -16,7 +14,7 @@ export type CanvasHostOpts = {
runtime: RuntimeEnv; runtime: RuntimeEnv;
rootDir?: string; rootDir?: string;
port?: number; port?: number;
bind?: BridgeBindMode; listenHost?: string;
allowInTests?: boolean; allowInTests?: boolean;
}; };
@@ -32,6 +30,40 @@ export function injectCanvasLiveReload(html: string): string {
const snippet = ` const snippet = `
<script> <script>
(() => { (() => {
// Cross-platform action bridge helper.
// Works on:
// - iOS: window.webkit.messageHandlers.clawdisCanvasA2UIAction.postMessage(...)
// - Android: window.clawdisCanvasA2UIAction.postMessage(...)
const actionHandlerName = "clawdisCanvasA2UIAction";
function postToNode(payload) {
try {
const raw = typeof payload === "string" ? payload : JSON.stringify(payload);
const ios = globalThis.webkit?.messageHandlers?.[actionHandlerName]?.postMessage;
if (typeof ios === "function") {
ios(raw);
return true;
}
const android = globalThis[actionHandlerName]?.postMessage;
if (typeof android === "function") {
android(raw);
return true;
}
} catch {}
return false;
}
function sendUserAction(userAction) {
const id =
(userAction && typeof userAction.id === "string" && userAction.id.trim()) ||
(globalThis.crypto?.randomUUID?.() ?? String(Date.now()));
const action = { ...userAction, id };
return postToNode({ userAction: action });
}
globalThis.Clawdis = globalThis.Clawdis ?? {};
globalThis.Clawdis.postMessage = postToNode;
globalThis.Clawdis.sendUserAction = sendUserAction;
globalThis.clawdisPostMessage = postToNode;
globalThis.clawdisSendUserAction = sendUserAction;
try { try {
const proto = location.protocol === "https:" ? "wss" : "ws"; const proto = location.protocol === "https:" ? "wss" : "ws";
const ws = new WebSocket(proto + "://" + location.host + ${JSON.stringify(WS_PATH)}); const ws = new WebSocket(proto + "://" + location.host + ${JSON.stringify(WS_PATH)});
@@ -50,6 +82,86 @@ export function injectCanvasLiveReload(html: string): string {
return `${html}\n${snippet}\n`; return `${html}\n${snippet}\n`;
} }
function defaultIndexHTML() {
return `<!doctype html>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Clawdis Canvas</title>
<style>
html, body { height: 100%; margin: 0; background: #000; color: #fff; font: 16px/1.4 -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }
.wrap { min-height: 100%; display: grid; place-items: center; padding: 24px; }
.card { width: min(720px, 100%); background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.10); border-radius: 16px; padding: 18px 18px 14px; }
.title { display: flex; align-items: baseline; gap: 10px; }
h1 { margin: 0; font-size: 22px; letter-spacing: 0.2px; }
.sub { opacity: 0.75; font-size: 13px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
button { appearance: none; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.10); color: #fff; padding: 10px 12px; border-radius: 12px; font-weight: 600; cursor: pointer; }
button:active { transform: translateY(1px); }
.ok { color: #24e08a; }
.bad { color: #ff5c5c; }
.log { margin-top: 14px; opacity: 0.85; font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; white-space: pre-wrap; background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.08); padding: 10px; border-radius: 12px; }
</style>
<div class="wrap">
<div class="card">
<div class="title">
<h1>Clawdis Canvas</h1>
<div class="sub">Interactive test page (auto-reload enabled)</div>
</div>
<div class="row">
<button id="btn-hello">Hello</button>
<button id="btn-time">Time</button>
<button id="btn-photo">Photo</button>
<button id="btn-dalek">Dalek</button>
</div>
<div id="status" class="sub" style="margin-top: 10px;"></div>
<div id="log" class="log">Ready.</div>
</div>
</div>
<script>
(() => {
const logEl = document.getElementById("log");
const statusEl = document.getElementById("status");
const log = (msg) => { logEl.textContent = String(msg); };
const hasIOS = () => !!(window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.clawdisCanvasA2UIAction);
const hasAndroid = () => !!(window.clawdisCanvasA2UIAction && typeof window.clawdisCanvasA2UIAction.postMessage === "function");
const hasHelper = () => typeof window.clawdisSendUserAction === "function";
statusEl.innerHTML =
"Bridge: " +
(hasHelper() ? "<span class='ok'>ready</span>" : "<span class='bad'>missing</span>") +
" · iOS=" + (hasIOS() ? "yes" : "no") +
" · Android=" + (hasAndroid() ? "yes" : "no");
window.addEventListener("clawdis:a2ui-action-status", (ev) => {
const d = ev && ev.detail || {};
log("Action status: id=" + (d.id || "?") + " ok=" + String(!!d.ok) + (d.error ? (" error=" + d.error) : ""));
});
function send(name, sourceComponentId) {
if (!hasHelper()) {
log("No action bridge found. Ensure you're viewing this on an iOS/Android Clawdis node canvas.");
return;
}
const ok = window.clawdisSendUserAction({
name,
surfaceId: "main",
sourceComponentId,
context: { t: Date.now() },
});
log(ok ? ("Sent action: " + name) : ("Failed to send action: " + name));
}
document.getElementById("btn-hello").onclick = () => send("hello", "demo.hello");
document.getElementById("btn-time").onclick = () => send("time", "demo.time");
document.getElementById("btn-photo").onclick = () => send("photo", "demo.photo");
document.getElementById("btn-dalek").onclick = () => send("dalek", "demo.dalek");
})();
</script>
`;
}
function normalizeUrlPath(rawPath: string): string { function normalizeUrlPath(rawPath: string): string {
const decoded = decodeURIComponent(rawPath || "/"); const decoded = decodeURIComponent(rawPath || "/");
const normalized = path.posix.normalize(decoded); const normalized = path.posix.normalize(decoded);
@@ -89,15 +201,6 @@ async function resolveFilePath(rootReal: string, urlPath: string) {
} }
} }
function resolveBindHost(bind: BridgeBindMode | undefined): string | null {
const mode = bind ?? "lan";
if (mode === "loopback") return "127.0.0.1";
if (mode === "lan") return "0.0.0.0";
if (mode === "auto") return "0.0.0.0";
if (mode === "tailnet") return pickPrimaryTailnetIPv4() ?? null;
return "0.0.0.0";
}
function isDisabledByEnv() { function isDisabledByEnv() {
if (process.env.CLAWDIS_SKIP_CANVAS_HOST === "1") return true; if (process.env.CLAWDIS_SKIP_CANVAS_HOST === "1") return true;
if (process.env.NODE_ENV === "test") return true; if (process.env.NODE_ENV === "test") return true;
@@ -117,14 +220,23 @@ export async function startCanvasHost(
); );
await ensureDir(rootDir); await ensureDir(rootDir);
const rootReal = await fs.realpath(rootDir); const rootReal = await fs.realpath(rootDir);
try {
const bindHost = resolveBindHost(opts.bind); const indexPath = path.join(rootReal, "index.html");
if (!bindHost) { await fs.stat(indexPath);
throw new Error( } catch {
"canvasHost.bind is tailnet, but no tailnet interface was found; refusing to start canvas host", try {
); await fs.writeFile(
path.join(rootReal, "index.html"),
defaultIndexHTML(),
"utf8",
);
} catch {
// ignore; we'll still serve the "missing file" message if needed.
}
} }
const bindHost = opts.listenHost?.trim() || "0.0.0.0";
const app = express(); const app = express();
app.disable("x-powered-by"); app.disable("x-powered-by");

18
src/config/config.ts
View File

@@ -99,16 +99,6 @@ export type CanvasHostConfig = {
root?: string; root?: string;
/** HTTP port to listen on (default: 18793). */ /** HTTP port to listen on (default: 18793). */
port?: number; port?: number;
/**
* Bind address policy for the canvas host HTTP server.
* - auto: listen on all interfaces (LAN + tailnet)
* - lan: 0.0.0.0 (reachable on local network + any forwarded interfaces)
* - tailnet: bind only to the Tailscale interface IP (100.64.0.0/10)
* - loopback: 127.0.0.1
*
* Recommended: lan (works on LAN + tailnet when present).
*/
bind?: BridgeBindMode;
}; };
export type ClawdisConfig = { export type ClawdisConfig = {
@@ -319,14 +309,6 @@ const ClawdisSchema = z.object({
enabled: z.boolean().optional(), enabled: z.boolean().optional(),
root: z.string().optional(), root: z.string().optional(),
port: z.number().int().positive().optional(), port: z.number().int().positive().optional(),
bind: z
.union([
z.literal("auto"),
z.literal("lan"),
z.literal("tailnet"),
z.literal("loopback"),
])
.optional(),
}) })
.optional(), .optional(),
}); });

32
src/gateway/client.maxpayload.test.ts Normal file
View File

@@ -0,0 +1,32 @@
import { describe, expect, test, vi } from "vitest";
describe("GatewayClient", () => {
test("uses a large maxPayload for node snapshots", async () => {
vi.resetModules();
class MockWebSocket {
static last: { url: unknown; opts: unknown } | null = null;
on = vi.fn();
close = vi.fn();
send = vi.fn();
constructor(url: unknown, opts: unknown) {
MockWebSocket.last = { url, opts };
}
}
vi.doMock("ws", () => ({
WebSocket: MockWebSocket,
}));
const { GatewayClient } = await import("./client.js");
const client = new GatewayClient({ url: "ws://127.0.0.1:1" });
client.start();
expect(MockWebSocket.last?.url).toBe("ws://127.0.0.1:1");
expect(MockWebSocket.last?.opts).toEqual(
expect.objectContaining({ maxPayload: 25 * 1024 * 1024 }),
);
});
});

14
src/gateway/server.ts
View File

@@ -834,14 +834,18 @@ export async function startGatewayServer(port = 18789): Promise<GatewayServer> {
const cfgAtStart = loadConfig(); const cfgAtStart = loadConfig();
setCommandLaneConcurrency("cron", cfgAtStart.cron?.maxConcurrentRuns ?? 1); setCommandLaneConcurrency("cron", cfgAtStart.cron?.maxConcurrentRuns ?? 1);
if (cfgAtStart.canvasHost?.enabled === true) { const canvasHostEnabled =
process.env.CLAWDIS_SKIP_CANVAS_HOST !== "1" &&
cfgAtStart.canvasHost?.enabled !== false;
if (canvasHostEnabled) {
try { try {
canvasHost = await startCanvasHost({ const server = await startCanvasHost({
runtime: defaultRuntime, runtime: defaultRuntime,
rootDir: cfgAtStart.canvasHost.root, rootDir: cfgAtStart.canvasHost?.root,
port: cfgAtStart.canvasHost.port ?? 18793, port: cfgAtStart.canvasHost?.port ?? 18793,
bind: cfgAtStart.canvasHost.bind ?? "lan",
}); });
if (server.port > 0) canvasHost = server;
} catch (err) { } catch (err) {
logWarn(`gateway: canvas host failed to start: ${String(err)}`); logWarn(`gateway: canvas host failed to start: ${String(err)}`);
} }