feat(electrobun): wire PTY daemon into terminal tabs via Electrobun RPC

- Bun process connects to agor-ptyd via PtyClient (5 retries, exponential backoff)
- RPC bridge: 5 request handlers (create/write/resize/unsubscribe/close)
- Daemon output forwarded to WebView as pty.output messages (base64 passthrough)
- Terminal.svelte: real PTY sessions via RPC instead of echo mode
- Shared RPC schema at src/shared/pty-rpc-schema.ts
- Fixed pty-client.ts protocol: base64 string for data (was number array)
- TerminalTabs passes sessionId to Terminal component
This commit is contained in:
Hibryda 2026-03-20 03:20:13 +01:00
parent f3456bd09d
commit 4676fc2c94
6 changed files with 343 additions and 86 deletions

View file

@ -25,7 +25,8 @@ export interface SessionInfo {
export type DaemonEvent = export type DaemonEvent =
| { type: "auth_result"; ok: boolean } | { type: "auth_result"; ok: boolean }
| { type: "session_created"; session_id: string; pid: number } | { type: "session_created"; session_id: string; pid: number }
| { type: "session_output"; session_id: string; data: number[] } /** data is base64-encoded bytes from the PTY. */
| { type: "session_output"; session_id: string; data: string }
| { type: "session_closed"; session_id: string; exit_code: number | null } | { type: "session_closed"; session_id: string; exit_code: number | null }
| { type: "session_list"; sessions: SessionInfo[] } | { type: "session_list"; sessions: SessionInfo[] }
| { type: "pong" } | { type: "pong" }
@ -131,13 +132,15 @@ export class PtyClient extends EventEmitter {
}); });
} }
/** Write input to a session's PTY. */ /** Write input to a session's PTY. data is encoded as base64 for transport. */
writeInput(sessionId: string, data: string | Uint8Array): void { writeInput(sessionId: string, data: string | Uint8Array): void {
const bytes = const bytes =
typeof data === "string" typeof data === "string"
? Array.from(new TextEncoder().encode(data)) ? new TextEncoder().encode(data)
: Array.from(data); : data;
this.send({ type: "write_input", session_id: sessionId, data: bytes }); // Daemon expects base64 string per protocol.rs WriteInput { data: String }
const b64 = btoa(String.fromCharCode(...bytes));
this.send({ type: "write_input", session_id: sessionId, data: b64 });
} }
/** Resize a session's terminal. */ /** Resize a session's terminal. */
@ -199,10 +202,18 @@ export class PtyClient extends EventEmitter {
* terminal.write(new Uint8Array(chunk)); * terminal.write(new Uint8Array(chunk));
* } * }
*/ */
/**
* Connect to daemon, create a session, and return output as an async iterator.
* Each yielded chunk is a Uint8Array of raw PTY bytes (decoded from base64).
* Usage:
* for await (const chunk of ptySession("my-shell", { cols: 120, rows: 40 })) {
* terminal.write(chunk);
* }
*/
export async function* ptySession( export async function* ptySession(
sessionId: string, sessionId: string,
opts?: { shell?: string; cwd?: string; cols?: number; rows?: number; socketDir?: string } opts?: { shell?: string; cwd?: string; cols?: number; rows?: number; socketDir?: string }
): AsyncGenerator<number[], void, void> { ): AsyncGenerator<Uint8Array, void, void> {
const client = new PtyClient(opts?.socketDir); const client = new PtyClient(opts?.socketDir);
await client.connect(); await client.connect();
@ -222,7 +233,11 @@ export async function* ptySession(
}); });
if (msg.type === "session_output" && msg.session_id === sessionId) { if (msg.type === "session_output" && msg.session_id === sessionId) {
yield msg.data; // Decode base64 → raw bytes
const binary = atob(msg.data);
const bytes = new Uint8Array(binary.length);
for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i);
yield bytes;
} else if (msg.type === "session_closed" && msg.session_id === sessionId) { } else if (msg.type === "session_closed" && msg.session_id === sessionId) {
break; break;
} }

View file

@ -1,37 +1,165 @@
import { BrowserWindow, Updater } from "electrobun/bun"; import path from "path";
import { BrowserWindow, BrowserView, Updater } from "electrobun/bun";
import { PtyClient } from "../../agor-pty/clients/ts/pty-client.ts";
import type { PtyRPCSchema } from "../shared/pty-rpc-schema.ts";
const DEV_SERVER_PORT = 9760; // Project convention: 9700+ range const DEV_SERVER_PORT = 9760; // Project convention: 9700+ range
const DEV_SERVER_URL = `http://localhost:${DEV_SERVER_PORT}`; const DEV_SERVER_URL = `http://localhost:${DEV_SERVER_PORT}`;
// Check if Vite dev server is running for HMR // ── PTY daemon client ────────────────────────────────────────────────────────
async function getMainViewUrl(): Promise<string> {
const channel = await Updater.localInfo.channel(); // Resolve daemon socket directory. agor-ptyd writes ptyd.sock and ptyd.token
if (channel === "dev") { // into $XDG_RUNTIME_DIR/agor or ~/.local/share/agor/run.
try { const ptyClient = new PtyClient();
await fetch(DEV_SERVER_URL, { method: "HEAD" });
console.log(`HMR enabled: Using Vite dev server at ${DEV_SERVER_URL}`); async function connectToDaemon(retries = 5, delayMs = 500): Promise<boolean> {
return DEV_SERVER_URL; for (let attempt = 1; attempt <= retries; attempt++) {
} catch { try {
console.log( await ptyClient.connect();
"Vite dev server not running. Run 'bun run dev:hmr' for HMR support.", console.log("[agor-ptyd] Connected to PTY daemon");
); return true;
} } catch (err) {
} const msg = err instanceof Error ? err.message : String(err);
return "views://mainview/index.html"; if (attempt < retries) {
console.warn(`[agor-ptyd] Connect attempt ${attempt}/${retries} failed: ${msg}. Retrying in ${delayMs}ms…`);
await new Promise((r) => setTimeout(r, delayMs));
delayMs = Math.min(delayMs * 2, 4000);
} else {
console.error(`[agor-ptyd] Could not connect after ${retries} attempts: ${msg}`);
console.error("[agor-ptyd] Terminals will not work. Start agor-ptyd and restart the app.");
}
}
}
return false;
} }
// Create the main application window // ── RPC definition ────────────────────────────────────────────────────────────
/**
* BrowserView.defineRPC defines handlers that the WebView can call.
* The schema type parameter describes what the Bun side handles (requests from
* WebView) and what messages Bun sends to the WebView.
*
* Pattern: handlers.requests = WebViewBun calls
* handlers.messages = BunWebView fire-and-forget
* To push a message to the WebView: rpc.send["pty.output"](payload)
*/
const rpc = BrowserView.defineRPC<PtyRPCSchema>({
maxRequestTime: 10_000,
handlers: {
requests: {
"pty.create": async ({ sessionId, cols, rows, cwd }) => {
if (!ptyClient.isConnected) {
return { ok: false, error: "PTY daemon not connected" };
}
try {
ptyClient.createSession({ id: sessionId, cols, rows, cwd });
ptyClient.subscribe(sessionId);
return { ok: true };
} catch (err) {
const error = err instanceof Error ? err.message : String(err);
console.error(`[pty.create] ${sessionId}: ${error}`);
return { ok: false, error };
}
},
"pty.write": ({ sessionId, data }) => {
if (!ptyClient.isConnected) return { ok: false };
try {
ptyClient.writeInput(sessionId, data);
return { ok: true };
} catch (err) {
console.error(`[pty.write] ${sessionId}:`, err);
return { ok: false };
}
},
"pty.resize": ({ sessionId, cols, rows }) => {
if (!ptyClient.isConnected) return { ok: true }; // Best-effort
try {
ptyClient.resize(sessionId, cols, rows);
} catch { /* ignore */ }
return { ok: true };
},
"pty.unsubscribe": ({ sessionId }) => {
try {
ptyClient.unsubscribe(sessionId);
} catch { /* ignore */ }
return { ok: true };
},
"pty.close": ({ sessionId }) => {
try {
ptyClient.closeSession(sessionId);
} catch { /* ignore */ }
return { ok: true };
},
},
messages: {
// Messages section defines what the WebView can *send* to Bun (fire-and-forget).
// We don't expect any inbound messages from the WebView in this direction.
},
},
});
// ── Forward daemon events to WebView ────────────────────────────────────────
// session_output: forward each chunk to the WebView as a "pty.output" message.
ptyClient.on("session_output", (msg) => {
if (msg.type !== "session_output") return;
try {
// data is already base64 from the daemon — pass it straight through.
rpc.send["pty.output"]({ sessionId: msg.session_id, data: msg.data });
} catch (err) {
console.error("[pty.output] forward error:", err);
}
});
// session_closed: notify the WebView so it can display "[Process exited]".
ptyClient.on("session_closed", (msg) => {
if (msg.type !== "session_closed") return;
try {
rpc.send["pty.closed"]({ sessionId: msg.session_id, exitCode: msg.exit_code });
} catch (err) {
console.error("[pty.closed] forward error:", err);
}
});
// ── App window ───────────────────────────────────────────────────────────────
async function getMainViewUrl(): Promise<string> {
const channel = await Updater.localInfo.channel();
if (channel === "dev") {
try {
await fetch(DEV_SERVER_URL, { method: "HEAD" });
console.log(`HMR enabled: Using Vite dev server at ${DEV_SERVER_URL}`);
return DEV_SERVER_URL;
} catch {
console.log(
"Vite dev server not running. Run 'bun run dev:hmr' for HMR support.",
);
}
}
return "views://mainview/index.html";
}
// Connect to daemon (non-blocking — window opens regardless).
connectToDaemon();
const url = await getMainViewUrl(); const url = await getMainViewUrl();
const mainWindow = new BrowserWindow({ const mainWindow = new BrowserWindow({
title: "Agent Orchestrator — Electrobun", title: "Agent Orchestrator — Electrobun",
url, url,
frame: { rpc,
width: 1400, frame: {
height: 900, width: 1400,
x: 100, height: 900,
y: 100, x: 100,
}, y: 100,
},
}); });
console.log("Agent Orchestrator (Electrobun) started!"); console.log("Agent Orchestrator (Electrobun) started!");

View file

@ -4,6 +4,15 @@
import { CanvasAddon } from '@xterm/addon-canvas'; import { CanvasAddon } from '@xterm/addon-canvas';
import { FitAddon } from '@xterm/addon-fit'; import { FitAddon } from '@xterm/addon-fit';
import { ImageAddon } from '@xterm/addon-image'; import { ImageAddon } from '@xterm/addon-image';
import { electrobun } from './main.ts';
interface Props {
sessionId: string;
/** Working directory to open the shell in. */
cwd?: string;
}
let { sessionId, cwd }: Props = $props();
// Catppuccin Mocha terminal theme // Catppuccin Mocha terminal theme
const THEME = { const THEME = {
@ -34,14 +43,15 @@
let term: Terminal; let term: Terminal;
let fitAddon: FitAddon; let fitAddon: FitAddon;
// Current line buffer for demo shell simulation /** Decode a base64 string from the daemon into a Uint8Array. */
let lineBuffer = ''; function decodeBase64(b64: string): Uint8Array {
const binary = atob(b64);
function writePrompt() { const bytes = new Uint8Array(binary.length);
term.write('\r\n\x1b[1;34m~/code/ai/agent-orchestrator\x1b[0m \x1b[32m$\x1b[0m '); for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i);
return bytes;
} }
onMount(() => { onMount(async () => {
term = new Terminal({ term = new Terminal({
theme: THEME, theme: THEME,
fontFamily: "'JetBrains Mono', 'Fira Code', monospace", fontFamily: "'JetBrains Mono', 'Fira Code', monospace",
@ -55,7 +65,7 @@
term.loadAddon(fitAddon); term.loadAddon(fitAddon);
term.loadAddon(new CanvasAddon()); term.loadAddon(new CanvasAddon());
// Image addon — enables Sixel, iTerm2, and Kitty inline image protocols // Sixel / iTerm2 / Kitty inline image support
term.loadAddon(new ImageAddon({ term.loadAddon(new ImageAddon({
enableSizeReports: true, enableSizeReports: true,
sixelSupport: true, sixelSupport: true,
@ -67,57 +77,56 @@
term.open(termEl); term.open(termEl);
fitAddon.fit(); fitAddon.fit();
// Demo content with ANSI colors // ── Connect to PTY daemon via Bun RPC ──────────────────────────────────
term.writeln('\x1b[1;34m~/code/ai/agent-orchestrator\x1b[0m \x1b[32m$\x1b[0m cargo test --workspace');
term.writeln(' \x1b[1;32mCompiling\x1b[0m agor-core v0.1.0');
term.writeln(' \x1b[1;32mCompiling\x1b[0m agor-gpui v0.1.0');
term.writeln(' \x1b[1;32mRunning\x1b[0m tests/unit.rs');
term.writeln('test result: ok. \x1b[32m47 passed\x1b[0m; 0 failed');
term.writeln('');
term.write('\x1b[1;34m~/code/ai/agent-orchestrator\x1b[0m \x1b[32m$\x1b[0m ');
// Input handler — simulate local shell until real PTY is connected const { cols, rows } = term;
term.onData((data: string) => { const result = await electrobun.rpc?.request["pty.create"]({ sessionId, cols, rows, cwd });
for (const ch of data) { if (!result?.ok) {
const code = ch.charCodeAt(0); term.writeln(`\x1b[31m[agor] Failed to connect to PTY daemon: ${result?.error ?? 'unknown error'}\x1b[0m`);
term.writeln('\x1b[33m[agor] Is agor-ptyd running? Start it with: agor-ptyd\x1b[0m');
}
if (ch === '\r') { // ── Receive output from daemon (via Bun) ───────────────────────────────
// Enter key — echo newline, execute (demo), write new prompt
const cmd = lineBuffer.trim(); // "pty.output" messages are pushed by Bun whenever the PTY produces data.
lineBuffer = ''; electrobun.rpc?.addMessageListener("pty.output", ({ sessionId: sid, data }) => {
if (cmd === '') { if (sid !== sessionId) return;
writePrompt(); term.write(decodeBase64(data));
} else if (cmd === 'clear') {
term.clear();
term.write('\x1b[1;34m~/code/ai/agent-orchestrator\x1b[0m \x1b[32m$\x1b[0m ');
} else {
term.write('\r\n');
term.writeln(`\x1b[31mbash: ${cmd}: command not found\x1b[0m`);
writePrompt();
}
} else if (code === 127 || ch === '\x08') {
// Backspace
if (lineBuffer.length > 0) {
lineBuffer = lineBuffer.slice(0, -1);
term.write('\b \b');
}
} else if (code >= 32 && code !== 127) {
// Printable character — echo and buffer
lineBuffer += ch;
term.write(ch);
}
// Ignore control characters (Ctrl+C etc. — no real PTY)
}
}); });
// Resize on container resize // "pty.closed" fires when the shell exits.
const ro = new ResizeObserver(() => fitAddon.fit()); electrobun.rpc?.addMessageListener("pty.closed", ({ sessionId: sid, exitCode }) => {
if (sid !== sessionId) return;
term.writeln(`\r\n\x1b[90m[Process exited${exitCode !== null ? ` with code ${exitCode}` : ''}]\x1b[0m`);
});
// ── Send user input to daemon ──────────────────────────────────────────
term.onData((data: string) => {
electrobun.rpc?.request["pty.write"]({ sessionId, data }).catch((err) => {
console.error('[pty.write] error:', err);
});
});
// ── Sync resize events to daemon ───────────────────────────────────────
term.onResize(({ cols: c, rows: r }) => {
electrobun.rpc?.request["pty.resize"]({ sessionId, cols: c, rows: r }).catch(() => {});
});
// Refit on container resize and notify the daemon.
const ro = new ResizeObserver(() => {
fitAddon.fit();
});
ro.observe(termEl); ro.observe(termEl);
return () => ro.disconnect(); return () => ro.disconnect();
}); });
onDestroy(() => { onDestroy(() => {
// Unsubscribe from daemon output (session stays alive so it can be
// reconnected if the tab is re-opened, matching the "persists" requirement).
electrobun.rpc?.request["pty.unsubscribe"]({ sessionId }).catch(() => {});
term?.dispose(); term?.dispose();
}); });
</script> </script>

View file

@ -69,7 +69,7 @@
<!-- Wrapper: uses flex to push tab bar to bottom when terminal is collapsed --> <!-- Wrapper: uses flex to push tab bar to bottom when terminal is collapsed -->
<div class="term-wrapper" style="--accent: {accent}"> <div class="term-wrapper" style="--accent: {accent}">
<!-- Tab bar: always visible, acts as divider --> <!-- Tab bar: always visible, acts as divider -->
<div class="term-bar" onmousedown={blurTerminal}> <div class="term-bar" role="toolbar" aria-label="Terminal tabs" tabindex="-1" onmousedown={blurTerminal}>
<button <button
class="expand-btn" class="expand-btn"
onclick={toggleExpand} onclick={toggleExpand}
@ -91,18 +91,25 @@
<div class="term-tabs" role="tablist"> <div class="term-tabs" role="tablist">
{#each tabs as tab (tab.id)} {#each tabs as tab (tab.id)}
<button <!-- div+role="tab" allows a nested <button> for the close action -->
<div
class="term-tab" class="term-tab"
class:active={activeTabId === tab.id} class:active={activeTabId === tab.id}
role="tab" role="tab"
tabindex={activeTabId === tab.id ? 0 : -1}
aria-selected={activeTabId === tab.id} aria-selected={activeTabId === tab.id}
onclick={() => activateTab(tab.id)} onclick={() => activateTab(tab.id)}
onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') activateTab(tab.id); }}
> >
<span class="tab-label">{tab.title}</span> <span class="tab-label">{tab.title}</span>
{#if tabs.length > 1} {#if tabs.length > 1}
<span class="tab-close" onclick={(e) => closeTab(tab.id, e)}>×</span> <button
class="tab-close"
aria-label="Close {tab.title}"
onclick={(e) => closeTab(tab.id, e)}
>×</button>
{/if} {/if}
</button> </div>
{/each} {/each}
<button class="tab-add" onclick={() => addTab()}>+</button> <button class="tab-add" onclick={() => addTab()}>+</button>
</div> </div>
@ -114,7 +121,7 @@
{#each tabs as tab (tab.id)} {#each tabs as tab (tab.id)}
{#if mounted.has(tab.id)} {#if mounted.has(tab.id)}
<div class="term-pane" style:display={activeTabId === tab.id ? 'flex' : 'none'}> <div class="term-pane" style:display={activeTabId === tab.id ? 'flex' : 'none'}>
<Terminal /> <Terminal sessionId={tab.id} />
</div> </div>
{/if} {/if}
{/each} {/each}
@ -198,6 +205,12 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
/* Reset <button> defaults */
background: transparent;
border: none;
padding: 0;
font-family: inherit;
line-height: 1;
} }
.tab-close:hover { background: var(--ctp-surface1); color: var(--ctp-red); } .tab-close:hover { background: var(--ctp-surface1); color: var(--ctp-red); }

View file

@ -2,9 +2,39 @@ import "./app.css";
import "@xterm/xterm/css/xterm.css"; import "@xterm/xterm/css/xterm.css";
import App from "./App.svelte"; import App from "./App.svelte";
import { mount } from "svelte"; import { mount } from "svelte";
import { Electroview } from "electrobun/view";
import type { PtyRPCSchema } from "../shared/pty-rpc-schema.ts";
/**
* Set up Electroview RPC.
*
* The schema is split from the Bun side's perspective:
* - "requests" in PtyRPCSchema = what WE (WebView) call on Bun these become
* methods on electrobun.rpc.request.*
* - "messages" in PtyRPCSchema = what BUN pushes to us we listen via
* electrobun.rpc.addMessageListener(name, handler)
*
* Electroview.defineRPC takes the schema where handlers.requests = what the
* WebView handles (i.e., requests FROM Bun to us). Since Bun never calls us
* with requests (only messages), that section is empty.
*/
const rpc = Electroview.defineRPC<PtyRPCSchema>({
maxRequestTime: 10_000,
handlers: {
requests: {
// No request handlers needed — Bun only pushes messages to us, not requests.
},
messages: {
// These are messages that WE send to Bun (fire-and-forget).
// Empty: WebView doesn't initiate any fire-and-forget messages.
},
},
});
export const electrobun = new Electroview({ rpc });
const app = mount(App, { const app = mount(App, {
target: document.getElementById("app")!, target: document.getElementById("app")!,
}); });
export default app; export default app;

View file

@ -0,0 +1,62 @@
/**
* Shared RPC schema for PTY bridge between Bun process and WebView.
*
* Bun holds the Unix socket connection to agor-ptyd; the WebView calls
* into Bun via requests, and Bun pushes output/close events via messages.
*/
// ── Requests (WebView → Bun, expects a response) ─────────────────────────────
export type PtyRPCRequests = {
/** Create a PTY session and subscribe to its output. */
"pty.create": {
params: {
sessionId: string;
cols: number;
rows: number;
/** Working directory for the shell process. */
cwd?: string;
};
response: { ok: boolean; error?: string };
};
/** Write raw input bytes (base64-encoded) to a PTY session. */
"pty.write": {
params: {
sessionId: string;
/** UTF-8 text typed by the user (xterm onData delivers this). */
data: string;
};
response: { ok: boolean };
};
/** Notify the daemon that the terminal dimensions changed. */
"pty.resize": {
params: { sessionId: string; cols: number; rows: number };
response: { ok: boolean };
};
/** Unsubscribe from a session's output (session stays alive). */
"pty.unsubscribe": {
params: { sessionId: string };
response: { ok: boolean };
};
/** Kill a PTY session. */
"pty.close": {
params: { sessionId: string };
response: { ok: boolean };
};
};
// ── Messages (Bun → WebView, fire-and-forget) ────────────────────────────────
export type PtyRPCMessages = {
/** PTY output chunk. data is base64-encoded raw bytes from the daemon. */
"pty.output": { sessionId: string; data: string };
/** PTY session exited. */
"pty.closed": { sessionId: string; exitCode: number | null };
};
// ── Combined schema ───────────────────────────────────────────────────────────
export type PtyRPCSchema = {
requests: PtyRPCRequests;
messages: PtyRPCMessages;
};