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:
parent
f3456bd09d
commit
4676fc2c94
6 changed files with 343 additions and 86 deletions
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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 = WebView→Bun calls
|
||||||
|
* handlers.messages = Bun→WebView 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!");
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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); }
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
|
||||||
62
ui-electrobun/src/shared/pty-rpc-schema.ts
Normal file
62
ui-electrobun/src/shared/pty-rpc-schema.ts
Normal 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;
|
||||||
|
};
|
||||||
Loading…
Add table
Add a link
Reference in a new issue