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
parent
f3456bd09d
commit
4676fc2c94
6 changed files with 343 additions and 86 deletions
|
|
@ -4,6 +4,15 @@
|
|||
import { CanvasAddon } from '@xterm/addon-canvas';
|
||||
import { FitAddon } from '@xterm/addon-fit';
|
||||
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
|
||||
const THEME = {
|
||||
|
|
@ -34,14 +43,15 @@
|
|||
let term: Terminal;
|
||||
let fitAddon: FitAddon;
|
||||
|
||||
// Current line buffer for demo shell simulation
|
||||
let lineBuffer = '';
|
||||
|
||||
function writePrompt() {
|
||||
term.write('\r\n\x1b[1;34m~/code/ai/agent-orchestrator\x1b[0m \x1b[32m$\x1b[0m ');
|
||||
/** Decode a base64 string from the daemon into a Uint8Array. */
|
||||
function decodeBase64(b64: string): Uint8Array {
|
||||
const binary = atob(b64);
|
||||
const bytes = new Uint8Array(binary.length);
|
||||
for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i);
|
||||
return bytes;
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
onMount(async () => {
|
||||
term = new Terminal({
|
||||
theme: THEME,
|
||||
fontFamily: "'JetBrains Mono', 'Fira Code', monospace",
|
||||
|
|
@ -55,7 +65,7 @@
|
|||
term.loadAddon(fitAddon);
|
||||
term.loadAddon(new CanvasAddon());
|
||||
|
||||
// Image addon — enables Sixel, iTerm2, and Kitty inline image protocols
|
||||
// Sixel / iTerm2 / Kitty inline image support
|
||||
term.loadAddon(new ImageAddon({
|
||||
enableSizeReports: true,
|
||||
sixelSupport: true,
|
||||
|
|
@ -67,57 +77,56 @@
|
|||
term.open(termEl);
|
||||
fitAddon.fit();
|
||||
|
||||
// Demo content with ANSI colors
|
||||
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 ');
|
||||
// ── Connect to PTY daemon via Bun RPC ──────────────────────────────────
|
||||
|
||||
// Input handler — simulate local shell until real PTY is connected
|
||||
term.onData((data: string) => {
|
||||
for (const ch of data) {
|
||||
const code = ch.charCodeAt(0);
|
||||
const { cols, rows } = term;
|
||||
const result = await electrobun.rpc?.request["pty.create"]({ sessionId, cols, rows, cwd });
|
||||
if (!result?.ok) {
|
||||
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') {
|
||||
// Enter key — echo newline, execute (demo), write new prompt
|
||||
const cmd = lineBuffer.trim();
|
||||
lineBuffer = '';
|
||||
if (cmd === '') {
|
||||
writePrompt();
|
||||
} 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)
|
||||
}
|
||||
// ── Receive output from daemon (via Bun) ───────────────────────────────
|
||||
|
||||
// "pty.output" messages are pushed by Bun whenever the PTY produces data.
|
||||
electrobun.rpc?.addMessageListener("pty.output", ({ sessionId: sid, data }) => {
|
||||
if (sid !== sessionId) return;
|
||||
term.write(decodeBase64(data));
|
||||
});
|
||||
|
||||
// Resize on container resize
|
||||
const ro = new ResizeObserver(() => fitAddon.fit());
|
||||
// "pty.closed" fires when the shell exits.
|
||||
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);
|
||||
|
||||
return () => ro.disconnect();
|
||||
});
|
||||
|
||||
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();
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -69,7 +69,7 @@
|
|||
<!-- Wrapper: uses flex to push tab bar to bottom when terminal is collapsed -->
|
||||
<div class="term-wrapper" style="--accent: {accent}">
|
||||
<!-- 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
|
||||
class="expand-btn"
|
||||
onclick={toggleExpand}
|
||||
|
|
@ -91,18 +91,25 @@
|
|||
|
||||
<div class="term-tabs" role="tablist">
|
||||
{#each tabs as tab (tab.id)}
|
||||
<button
|
||||
<!-- div+role="tab" allows a nested <button> for the close action -->
|
||||
<div
|
||||
class="term-tab"
|
||||
class:active={activeTabId === tab.id}
|
||||
role="tab"
|
||||
tabindex={activeTabId === tab.id ? 0 : -1}
|
||||
aria-selected={activeTabId === tab.id}
|
||||
onclick={() => activateTab(tab.id)}
|
||||
onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') activateTab(tab.id); }}
|
||||
>
|
||||
<span class="tab-label">{tab.title}</span>
|
||||
{#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}
|
||||
</button>
|
||||
</div>
|
||||
{/each}
|
||||
<button class="tab-add" onclick={() => addTab()}>+</button>
|
||||
</div>
|
||||
|
|
@ -114,7 +121,7 @@
|
|||
{#each tabs as tab (tab.id)}
|
||||
{#if mounted.has(tab.id)}
|
||||
<div class="term-pane" style:display={activeTabId === tab.id ? 'flex' : 'none'}>
|
||||
<Terminal />
|
||||
<Terminal sessionId={tab.id} />
|
||||
</div>
|
||||
{/if}
|
||||
{/each}
|
||||
|
|
@ -198,6 +205,12 @@
|
|||
display: flex;
|
||||
align-items: 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); }
|
||||
|
||||
|
|
|
|||
|
|
@ -2,9 +2,39 @@ import "./app.css";
|
|||
import "@xterm/xterm/css/xterm.css";
|
||||
import App from "./App.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, {
|
||||
target: document.getElementById("app")!,
|
||||
target: document.getElementById("app")!,
|
||||
});
|
||||
|
||||
export default app;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue