codebay 0.8.0 → 0.9.0

package/src/components/TerminalPane.svelte

@@ -0,0 +1,274 @@
+<script lang="ts">
+	import { onMount, type Snippet } from 'svelte';
+	import '@xterm/xterm/css/xterm.css';
+	import type { Terminal } from '@xterm/xterm';
+	import type { FitAddon } from '@xterm/addon-fit';
+	import RotateCw from '@lucide/svelte/icons/rotate-cw';
+
+	let {
+		id,
+		active,
+		/** ttyd `--url-arg` value selecting which session to attach to; omitted means Claude's. */
+		arg,
+		/** Split view: only one of the two panes may claim the keyboard when the tab activates. */
+		focus = true,
+		/** Extra overlay buttons, rendered left of this pane's own reload button. */
+		actions
+	}: {
+		id: string;
+		active: boolean;
+		arg?: string;
+		focus?: boolean;
+		actions?: Snippet;
+	} = $props();
+
+	let el: HTMLDivElement;
+	let term: Terminal | undefined;
+	let fit: FitAddon | undefined;
+	let ws: WebSocket | undefined;
+	let retry: ReturnType<typeof setTimeout> | undefined;
+	let disposed = false;
+	let connected = $state(false);
+	// Bumped whenever a socket is abandoned, so its late handlers can't resurrect a retry loop.
+	let gen = 0;
+
+	// ttyd's wire protocol: a single command byte prefixes every frame, sent as binary
+	// (matching ttyd's own client — libwebsockets delivers the raw bytes to the server).
+	const CMD_INPUT = '0';
+	const CMD_RESIZE = '1';
+	const OUTPUT = 0x30; // '0'
+	const encoder = new TextEncoder();
+
+	function send(data: string) {
+		if (ws?.readyState === WebSocket.OPEN) ws.send(encoder.encode(data));
+	}
+
+	function onFrame(data: ArrayBuffer) {
+		const bytes = new Uint8Array(data);
+		if (bytes.length === 0) return;
+		// Only OUTPUT carries terminal bytes; SET_WINDOW_TITLE/SET_PREFERENCES are ignored.
+		if (bytes[0] === OUTPUT) term?.write(bytes.subarray(1));
+	}
+
+	function connect() {
+		const myGen = ++gen;
+		const proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
+		// Same-origin through the proxy, which forwards the required `tty` subprotocol to ttyd
+		// and passes the query string through untouched.
+		const query = arg ? `?arg=${encodeURIComponent(arg)}` : '';
+		const sock = new WebSocket(`${proto}//${location.host}/p/${id}/ws${query}`, ['tty']);
+		ws = sock;
+		sock.binaryType = 'arraybuffer';
+		sock.onopen = () => {
+			if (gen !== myGen) return;
+			connected = true;
+			// ttyd's init frame is raw JSON (its leading `{` is the JSON_DATA command byte).
+			send(JSON.stringify({ AuthToken: '', columns: term?.cols ?? 80, rows: term?.rows ?? 24 }));
+		};
+		sock.onmessage = (e) => {
+			if (gen === myGen) onFrame(e.data as ArrayBuffer);
+		};
+		sock.onclose = () => {
+			if (gen !== myGen || disposed) return;
+			connected = false;
+			retry = setTimeout(connect, 1000);
+		};
+		sock.onerror = () => {
+			try {
+				sock.close();
+			} catch {
+				/* already closing */
+			}
+		};
+	}
+
+	/**
+	 * Rebuild only the client half — the socket and xterm's buffer — and reattach to the same tmux
+	 * session, so a wedged socket (dead wifi, resumed laptop) recovers without touching the container.
+	 */
+	function reload() {
+		if (retry) clearTimeout(retry);
+		gen++;
+		connected = false;
+		// tmux repaints the current screen on attach; without a reset that repaint lands under stale output.
+		term?.reset();
+		const old = ws;
+		ws = undefined;
+
+		let started = false;
+		const start = () => {
+			if (started || disposed) return;
+			started = true;
+			fitSafe();
+			connect();
+			if (active && focus) term?.focus();
+		};
+
+		if (old && old.readyState !== WebSocket.CLOSED) {
+			// Let the old tmux client detach first, or tmux sizes the window to the smaller of the two.
+			old.addEventListener('close', start, { once: true });
+			setTimeout(start, 1500);
+			try {
+				old.close();
+			} catch {
+				/* already closing */
+			}
+		} else {
+			start();
+		}
+	}
+
+	function fitSafe() {
+		// A hidden pane (display:none) has no size, so fitting there would throw or size to 0.
+		if (el?.clientWidth > 0 && el?.clientHeight > 0) {
+			try {
+				fit?.fit();
+			} catch {
+				/* transient zero-size during layout */
+			}
+		}
+	}
+
+	function applyTheme() {
+		if (!term) return;
+		const cs = getComputedStyle(document.documentElement);
+		const bg = cs.getPropertyValue('--bg').trim() || '#1a1a1a';
+		const fg = cs.getPropertyValue('--ink').trim() || '#e6e6e6';
+		term.options.theme = { background: bg, foreground: fg, cursor: fg, cursorAccent: bg };
+	}
+
+	onMount(() => {
+		let themeObs: MutationObserver | undefined;
+		(async () => {
+			const [{ Terminal }, { FitAddon }] = await Promise.all([
+				import('@xterm/xterm'),
+				import('@xterm/addon-fit')
+			]);
+			if (disposed) return;
+			term = new Terminal({
+				fontFamily: "'JetBrains Mono Variable', ui-monospace, monospace",
+				fontSize: 13,
+				cursorBlink: true,
+				scrollback: 10000,
+				allowProposedApi: true
+			});
+			fit = new FitAddon();
+			term.loadAddon(fit);
+			term.open(el);
+			applyTheme();
+			fitSafe();
+			term.onData((d) => send(CMD_INPUT + d));
+			term.onResize(({ cols, rows }) => send(CMD_RESIZE + JSON.stringify({ columns: cols, rows })));
+			// The theme cookie flips data-theme on <html>; re-derive xterm's colors when it does.
+			themeObs = new MutationObserver(applyTheme);
+			themeObs.observe(document.documentElement, {
+				attributes: true,
+				attributeFilter: ['data-theme']
+			});
+			connect();
+			if (active && focus) term.focus();
+		})();
+
+		// Observing the element rather than the window also covers split-divider drags and the
+		// split opening or closing, which don't resize the window at all.
+		const sizeObs = new ResizeObserver(() => fitSafe());
+		sizeObs.observe(el);
+
+		return () => {
+			disposed = true;
+			sizeObs.disconnect();
+			themeObs?.disconnect();
+			if (retry) clearTimeout(retry);
+			try {
+				ws?.close();
+			} catch {
+				/* already closing */
+			}
+			term?.dispose();
+		};
+	});
+
+	// A hidden xterm can't measure itself, so refit/focus the moment this pane becomes active.
+	$effect(() => {
+		if (active && term) {
+			fitSafe();
+			if (focus) term.focus();
+		}
+	});
+</script>
+
+<div class="term" bind:this={el}></div>
+<div class="overlay">
+	{#if !connected}
+		<span class="status">connecting…</span>
+	{/if}
+	{@render actions?.()}
+	<button
+		type="button"
+		onclick={reload}
+		title="Reload terminal (reconnects, keeps the session)"
+		aria-label="Reload terminal"><RotateCw size={14} /></button
+	>
+</div>
+
+<style>
+	.term {
+		width: 100%;
+		height: 100%;
+		background: var(--bg);
+		padding: 6px 8px;
+		box-sizing: border-box;
+	}
+	/* xterm's viewport should own the scroll, not the pane. */
+	.term :global(.xterm),
+	.term :global(.xterm-viewport) {
+		height: 100%;
+	}
+	/* Floats over live terminal output, so only the button itself takes clicks. */
+	.overlay {
+		position: absolute;
+		top: 6px;
+		right: 8px;
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		pointer-events: none;
+	}
+	.status {
+		font-family: var(--font-mono);
+		font-size: 11px;
+		letter-spacing: 0.05em;
+		text-transform: uppercase;
+		color: var(--ink-faint);
+	}
+	/* `:global` so buttons handed in through the `actions` snippet — which carry the parent
+	   component's scope, not ours — pick up the same styling. */
+	.overlay :global(button) {
+		pointer-events: auto;
+		appearance: none;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: 24px;
+		height: 24px;
+		padding: 0;
+		cursor: pointer;
+		background: var(--bg);
+		border: 1px solid var(--rule);
+		color: var(--ink);
+		opacity: 0.3;
+		transition: opacity 0.15s ease;
+	}
+	.overlay :global(button:hover),
+	.overlay :global(button:focus-visible),
+	.overlay :global(button[aria-pressed='true']) {
+		opacity: 1;
+		background: var(--ink);
+		color: var(--bg);
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.overlay :global(button) {
+			transition: none;
+		}
+	}
+</style>

package/src/components/TerminalSplit.svelte

@@ -0,0 +1,154 @@
+<script lang="ts">
+	import PanelRightOpen from '@lucide/svelte/icons/panel-right-open';
+	import PanelRightClose from '@lucide/svelte/icons/panel-right-close';
+	import TerminalPane from './TerminalPane.svelte';
+	import { apiPost } from '../api.ts';
+
+	let {
+		id,
+		active,
+		initialOpen = false
+	}: { id: string; active: boolean; initialOpen?: boolean } = $props();
+
+	// Seeding from the persisted flag is intentional — from here on the toggle owns the state.
+	// svelte-ignore state_referenced_locally
+	let open = $state(initialOpen);
+	// Once mounted the shell pane is only ever hidden, never torn down, so its xterm buffer and
+	// socket survive a close/reopen.
+	// svelte-ignore state_referenced_locally
+	let mounted = $state(initialOpen);
+	let ratio = $state(50);
+	let focusSide = $state<'left' | 'right'>('left');
+	let container: HTMLDivElement;
+
+	function toggle() {
+		open = !open;
+		if (open) mounted = true;
+		focusSide = open ? 'right' : 'left';
+		// Best-effort: a failed write only costs the restore-on-reload, never the split itself.
+		void apiPost(`/api/instances/${id}/split`, { open }).catch(() => {});
+	}
+
+	function clamp(pct: number): number {
+		return Math.min(80, Math.max(20, pct));
+	}
+
+	function dragTo(clientX: number) {
+		const rect = container.getBoundingClientRect();
+		if (rect.width > 0) ratio = clamp(((clientX - rect.left) / rect.width) * 100);
+	}
+
+	function onDividerDown(e: PointerEvent) {
+		e.preventDefault(); // or the drag selects terminal text instead
+		(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
+	}
+
+	function onDividerMove(e: PointerEvent) {
+		if ((e.currentTarget as HTMLElement).hasPointerCapture(e.pointerId)) dragTo(e.clientX);
+	}
+
+	function onDividerKey(e: KeyboardEvent) {
+		if (e.key === 'ArrowLeft') ratio = clamp(ratio - 5);
+		else if (e.key === 'ArrowRight') ratio = clamp(ratio + 5);
+		else return;
+		e.preventDefault();
+	}
+</script>
+
+{#snippet splitToggle()}
+	<button
+		type="button"
+		onclick={toggle}
+		aria-pressed={open}
+		title={open ? 'Hide the shell pane' : 'Open a shell alongside Claude'}
+		aria-label={open ? 'Hide the shell pane' : 'Open a shell alongside Claude'}
+	>
+		{#if open}<PanelRightClose size={14} />{:else}<PanelRightOpen size={14} />{/if}
+	</button>
+{/snippet}
+
+<div class="split" bind:this={container}>
+	<!-- Clicking a terminal focuses it anyway; capture that so tab switches restore the same side. -->
+	<div
+		class="side"
+		style:flex-basis={open ? `${ratio}%` : '100%'}
+		onpointerdowncapture={() => (focusSide = 'left')}
+	>
+		<TerminalPane
+			{id}
+			{active}
+			focus={active && focusSide === 'left'}
+			actions={open ? undefined : splitToggle}
+		/>
+	</div>
+	{#if mounted}
+		<!-- A focusable separator is the ARIA window-splitter pattern; the rule doesn't model it. -->
+		<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+		<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+		<div
+			class="divider"
+			class:hidden={!open}
+			role="separator"
+			aria-orientation="vertical"
+			aria-label="Resize terminal panes"
+			aria-valuenow={Math.round(ratio)}
+			aria-valuemin={20}
+			aria-valuemax={80}
+			tabindex="0"
+			onpointerdown={onDividerDown}
+			onpointermove={onDividerMove}
+			ondblclick={() => (ratio = 50)}
+			onkeydown={onDividerKey}
+		></div>
+		<div
+			class="side"
+			class:hidden={!open}
+			style:flex-basis="{100 - ratio}%"
+			onpointerdowncapture={() => (focusSide = 'right')}
+		>
+			<TerminalPane
+				{id}
+				arg="shell"
+				active={active && open}
+				focus={active && open && focusSide === 'right'}
+				actions={open ? splitToggle : undefined}
+			/>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.split {
+		display: flex;
+		width: 100%;
+		height: 100%;
+	}
+	/* Positioned so each pane's absolute overlay anchors to its own half, not the whole split. */
+	.side {
+		position: relative;
+		/* No grow: the two flex-basis percentages are the split, the divider eats the rounding. */
+		flex: 0 1 auto;
+		min-width: 0;
+	}
+	.side.hidden {
+		display: none;
+	}
+	.divider {
+		flex: none;
+		width: 7px;
+		margin: 0 -3px; /* a wider grab target than the 1px rule it draws */
+		cursor: col-resize;
+		background: var(--rule);
+		background-clip: content-box;
+		border-left: 3px solid transparent;
+		border-right: 3px solid transparent;
+		z-index: 1;
+	}
+	.divider.hidden {
+		display: none;
+	}
+	.divider:focus-visible {
+		outline: 2px solid var(--ink);
+		outline-offset: -2px;
+	}
+</style>

package/src/container-injections/claude-code-ide-extension.ts

@@ -21,6 +21,8 @@ export const CHECK_SCRIPT = `ls -d ${EXT_GLOB} >/dev/null 2>&1 && echo 1 || echo
 export const claudeCodeIdeExtension: Injection = {
 	id: 'claude-code-ide-extension',
 	label: 'Claude Code IDE extension',
+	// code-server-only; terminal-mode instances never run the extension host.
+	modes: ['ide'],
 
 	async apply(target, log) {
 		log('Installing Claude Code IDE extension…\n');

package/src/container-injections/ttyd.ts

@@ -0,0 +1,49 @@
+import { checkPresence, execInContainer } from '../lib/exec.server.ts';
+import type { Injection } from '../lib/injections.server.ts';
+
+/**
+ * Package managers first (ttyd is in recent Debian/Ubuntu/Alpine repos), then the upstream
+ * static binary for arches/distros without a package. The default image is Debian, so apt-get
+ * is the real path.
+ */
+export const INSTALL_SCRIPT =
+	'if command -v ttyd >/dev/null 2>&1; then exit 0; fi; ' +
+	'export DEBIAN_FRONTEND=noninteractive; ' +
+	'if command -v apt-get >/dev/null 2>&1; then apt-get update -y >/dev/null 2>&1 && apt-get install -y --no-install-recommends ttyd >/dev/null 2>&1 && command -v ttyd >/dev/null 2>&1 && exit 0; fi; ' +
+	'if command -v apk >/dev/null 2>&1; then apk add --no-cache ttyd >/dev/null 2>&1 && command -v ttyd >/dev/null 2>&1 && exit 0; fi; ' +
+	'case "$(uname -m)" in x86_64|amd64) t=x86_64;; aarch64|arm64) t=aarch64;; armv7l|armv6l) t=arm;; i686|i386) t=i686;; *) echo "unsupported arch: $(uname -m)" >&2; exit 1;; esac; ' +
+	'url="https://github.com/tsl0922/ttyd/releases/latest/download/ttyd.$t"; ' +
+	'if command -v curl >/dev/null 2>&1; then curl -fsSL "$url" -o /usr/local/bin/ttyd; ' +
+	'elif command -v wget >/dev/null 2>&1; then wget -qO /usr/local/bin/ttyd "$url"; ' +
+	'else echo "no curl/wget to fetch ttyd" >&2; exit 1; fi; ' +
+	'chmod +x /usr/local/bin/ttyd; command -v ttyd >/dev/null 2>&1';
+
+const CHECK_SCRIPT = 'command -v ttyd >/dev/null 2>&1 && echo 1 || echo 0';
+
+/**
+ * The runtime fallback to the build-time `codebay-ttyd` feature (the primary install), mirroring
+ * tmux. Terminal-mode only — `resolveInjections(mode)` keeps it out of IDE instances entirely.
+ */
+export const ttyd: Injection = {
+	id: 'ttyd',
+	label: 'ttyd',
+	modes: ['terminal'],
+
+	async apply(target, log) {
+		log('Installing ttyd…\n');
+		// Omitting remoteUser runs as root, which the package install / /usr/local/bin write needs.
+		const install = await execInContainer(
+			{ containerId: target.containerId },
+			{ script: INSTALL_SCRIPT }
+		);
+		log(
+			install.ok
+				? '✓ ttyd installed\n'
+				: `⚠ ttyd install failed: ${install.error} — the terminal won't be reachable\n`
+		);
+	},
+
+	async check(target) {
+		return checkPresence(target, CHECK_SCRIPT);
+	}
+};

package/src/lib/config.server.ts

@@ -59,6 +59,9 @@ export const PORT_MAX = 8999;
 /** Inside the container, not on the host. */
 export const CODE_SERVER_PORT = 8080;
 
+/** ttyd's default listen port, used in terminal mode instead of code-server's. */
+export const TTYD_PORT = 7681;
+
 /** `base:ubuntu` is multi-arch, unlike the `universal` images, which are amd64-only. */
 export const DEFAULT_IMAGE = 'mcr.microsoft.com/devcontainers/base:ubuntu';
 

package/src/lib/db.server.ts

@@ -10,6 +10,9 @@ const MIGRATIONS_DIR = join(import.meta.dir, '../../migrations');
 
 export type InstanceStatus = 'creating' | 'running' | 'stopped' | 'error';
 
+/** `'ide'` serves full code-server; `'terminal'` serves only ttyd + Claude Code. */
+export type InstanceMode = 'ide' | 'terminal';
+
 export interface InstanceRow {
 	id: string;
 	name: string;
@@ -27,6 +30,10 @@ export interface InstanceRow {
 	remote_user: string | null;
 	/** `'local'` when the folder shipped its own config, else the injected image; null pre-dates this. */
 	image_source: string | null;
+	/** Fixed at creation: which editor surface this instance provisions and serves. */
+	mode: InstanceMode;
+	/** Terminal mode only: 1 when the scratch-shell pane was left open, so a reload restores it. */
+	terminal_split: number;
 }
 
 export interface PortForwardRow {
@@ -57,8 +64,8 @@ export function closeDb(): void {
 export function insertInstance(row: InstanceRow): void {
 	db.query(
 		`INSERT INTO instances
-       (id, name, source_path, workspace_path, host_port, container_id, remote_workspace_folder, status, error, created_at, bridge_token, remote_user, image_source)
-     VALUES ($id, $name, $source_path, $workspace_path, $host_port, $container_id, $remote_workspace_folder, $status, $error, $created_at, $bridge_token, $remote_user, $image_source)`
+       (id, name, source_path, workspace_path, host_port, container_id, remote_workspace_folder, status, error, created_at, bridge_token, remote_user, image_source, mode, terminal_split)
+     VALUES ($id, $name, $source_path, $workspace_path, $host_port, $container_id, $remote_workspace_folder, $status, $error, $created_at, $bridge_token, $remote_user, $image_source, $mode, $terminal_split)`
 	).run({
 		$id: row.id,
 		$name: row.name,
@@ -72,7 +79,9 @@ export function insertInstance(row: InstanceRow): void {
 		$created_at: row.created_at,
 		$bridge_token: row.bridge_token,
 		$remote_user: row.remote_user,
-		$image_source: row.image_source
+		$image_source: row.image_source,
+		$mode: row.mode,
+		$terminal_split: row.terminal_split
 	});
 }
 
@@ -133,7 +142,8 @@ const UPDATABLE_COLUMNS = [
 	'status',
 	'error',
 	'remote_user',
-	'image_source'
+	'image_source',
+	'terminal_split'
 ] as const;
 
 type UpdatableColumn = (typeof UPDATABLE_COLUMNS)[number];