codebay 0.14.0 → 0.16.0

package/src/components/InstanceView.svelte

@@ -3,8 +3,10 @@
 	import ArrowLeft from '@lucide/svelte/icons/arrow-left';
 	import ArrowUpRight from '@lucide/svelte/icons/arrow-up-right';
 	import HealthBox from './HealthBox.svelte';
+	import AgentLogBox from './AgentLogBox.svelte';
 	import StatusBadge from './StatusBadge.svelte';
 	import Skeleton from './Skeleton.svelte';
+	import DropZone from './DropZone.svelte';
 	import { forwardedPortUrl } from '../lib/links.ts';
 	import { liveSocket, liveStream } from '../live.ts';
 	import { apiPost, apiDelete } from '../api.ts';
@@ -13,13 +15,27 @@
 	import { onBackLinkClick, installPopupBackTrap } from '../lib/popup-nav.ts';
 	import { syncTheme } from '../theme.ts';
 	import { tick } from 'svelte';
+	import toast, { Toaster } from 'svelte-french-toast';
+	import { TOAST_OPTIONS } from '../toast.ts';
+	import { filesFrom, uploadFile } from '../lib/upload.ts';
 
-	let { id, injectionChecks = 0 }: { id: string; injectionChecks?: number } = $props();
+	let {
+		id,
+		injectionChecks = 0,
+		uploadEnabled = false
+	}: { id: string; injectionChecks?: number; uploadEnabled?: boolean } = $props();
+
+	// DB-backed, so it initializes from the prop; the stream keeps it current across a Settings change.
+	// svelte-ignore state_referenced_locally
+	let uploadArmed = $state(uploadEnabled);
 
 	let instance = $state<Instance | null>(null);
 	let health = $state<InstanceHealth | null>(null);
 	let lastFetchedAt = $state<number | null>(null);
 	let logs = $state('');
+	// Every `run` frame bumps this; AgentLogBox refetches on the change, so a live run's steps
+	// stream in without a second WebSocket.
+	let runBump = $state(0);
 	let logEl = $state<HTMLDivElement | null>(null);
 	let following = $state(true);
 
@@ -62,8 +78,12 @@
 			} else if (msg.type === 'health' && msg.data.id === id) {
 				health = msg.data.health;
 				lastFetchedAt = Date.now();
+			} else if (msg.type === 'run' && msg.data.instance_id === id) {
+				runBump += 1;
 			} else if (msg.type === 'theme') {
 				syncTheme(msg.data.value);
+			} else if (msg.type === 'upload-enabled') {
+				uploadArmed = msg.data.enabled;
 			}
 		})
 	);
@@ -140,8 +160,57 @@
 		clearTimeout(copyTimer);
 		copyTimer = setTimeout(() => (copied = false), 2000);
 	}
+
+	// Sequential, so the toast order matches the drop order.
+	async function handleUpload(files: File[]) {
+		for (const file of files) {
+			try {
+				const saved = await uploadFile(id, file);
+				toast.success(`Saved ${saved.containerPath}`);
+				void navigator.clipboard.writeText(saved.containerPath).catch(() => {});
+			} catch (err) {
+				toast.error((err as Error).message);
+			}
+		}
+	}
+
+	let dropping = $state(false);
+
+	function onDragEnter(e: DragEvent) {
+		if (!uploadArmed || !e.dataTransfer?.types.includes('Files')) return;
+		e.preventDefault();
+		dropping = true;
+	}
+
+	function onDragOver(e: DragEvent) {
+		if (dropping) e.preventDefault();
+	}
+
+	function onDragLeave(e: DragEvent) {
+		if (e.relatedTarget === null) dropping = false;
+	}
+
+	function onDrop(e: DragEvent) {
+		if (!dropping) return;
+		e.preventDefault();
+		dropping = false;
+		if (uploadArmed) void handleUpload(filesFrom(e.dataTransfer));
+	}
+
+	// Only claims pastes that carry files, so text pasted into the page's inputs is untouched.
+	function onPaste(e: ClipboardEvent) {
+		if (!uploadArmed) return;
+		const files = filesFrom(e.clipboardData);
+		if (!files.length) return;
+		e.preventDefault();
+		void handleUpload(files);
+	}
 </script>
 
+<svelte:window onpaste={onPaste} />
+<!-- Instance renders outside AppShell, which hosts the app-wide Toaster. -->
+<Toaster toastOptions={TOAST_OPTIONS} />
+
 <header class="topbar">
 	<a class="back" href="/" onclick={onBackLinkClick}><ArrowLeft size={15} /> All instances</a>
 	<div class="title">
@@ -165,7 +234,16 @@
 </header>
 {#if restartError}<p class="restart-err">{restartError}</p>{/if}
 
-<main class="stage">
+<main
+	class="stage"
+	ondragenter={onDragEnter}
+	ondragover={onDragOver}
+	ondragleave={onDragLeave}
+	ondrop={onDrop}
+>
+	{#if dropping}
+		<DropZone />
+	{/if}
 	<div class="meta">
 		<span class="k">Source</span>
 		{#if instance}<code>{instance.source_path}</code>{:else}<Skeleton variant="wide" />{/if}
@@ -252,6 +330,8 @@
 		</div>
 	</section>
 
+	<AgentLogBox {id} bump={runBump} />
+
 	<div class="logwrap panel">
 		<div class="log-bar panel-bar">
 			<span>Boot log</span>
@@ -366,6 +446,7 @@
 		color: var(--danger);
 	}
 	.stage {
+		position: relative;
 		max-width: 1200px;
 		margin: 0 auto;
 		padding: 20px 24px 40px;

package/src/components/SettingsView.svelte

@@ -9,6 +9,7 @@
 	import SunMoon from '@lucide/svelte/icons/sun-moon';
 	import ThemePicker from './ThemePicker.svelte';
 	import Layers from '@lucide/svelte/icons/layers';
+	import Upload from '@lucide/svelte/icons/upload';
 	import FolderMinus from '@lucide/svelte/icons/folder-minus';
 	import FolderCog from '@lucide/svelte/icons/folder-cog';
 	import Trash2 from '@lucide/svelte/icons/trash-2';
@@ -24,6 +25,7 @@
 	import ListOrdered from '@lucide/svelte/icons/list-ordered';
 	import Boxes from '@lucide/svelte/icons/boxes';
 	import Puzzle from '@lucide/svelte/icons/puzzle';
+	import Plug from '@lucide/svelte/icons/plug';
 	import { Toaster } from 'svelte-french-toast';
 	import { TOAST_OPTIONS } from '../toast.ts';
 	import { flushSync } from 'svelte';
@@ -54,6 +56,7 @@
 	import ShieldCheck from '@lucide/svelte/icons/shield-check';
 	import Gauge from '@lucide/svelte/icons/gauge';
 	import MessageSquare from '@lucide/svelte/icons/message-square';
+	import ClipboardX from '@lucide/svelte/icons/clipboard-x';
 	import { installPopupBackTrap } from '../lib/popup-nav.ts';
 
 	/** Every settings form action fails with the same `{ error }` shape. */
@@ -68,9 +71,14 @@
 		defaultImage,
 		builtinImage,
 		disableBuildCache,
+		workspaceUploadEnabled,
 		copyIgnorePatterns,
 		builtinCopyIgnore,
 		claudeConfigDir,
+		mcpEnabled,
+		mcpToken,
+		mcpUrl,
+		mcpPrAttribution,
 		gitIdentityEnabled,
 		gitIdentityName,
 		gitIdentityEmail,
@@ -110,9 +118,14 @@
 		defaultImage: string;
 		builtinImage: string;
 		disableBuildCache: boolean;
+		workspaceUploadEnabled: boolean;
 		copyIgnorePatterns: string;
 		builtinCopyIgnore: string;
 		claudeConfigDir: string;
+		mcpEnabled: boolean;
+		mcpToken: string;
+		mcpUrl: string;
+		mcpPrAttribution: boolean;
 		gitIdentityEnabled: boolean;
 		gitIdentityName: string;
 		gitIdentityEmail: string;
@@ -159,6 +172,17 @@
 
 	$effect(() => installPopupBackTrap());
 
+	/** Only settleable after hydration — SSR has no origin to judge. */
+	let insecure = $state<{ origin: string; tunnel: string } | null>(null);
+	$effect(() => {
+		if (window.isSecureContext) return;
+		const port = location.port || '80';
+		insecure = {
+			origin: location.origin,
+			tunnel: `ssh -L ${port}:localhost:${port} ${location.hostname}`
+		};
+	});
+
 	/** Reused by every plain save form below; only the per-control state setters differ. */
 	function saveOpts<Success extends Record<string, unknown> = Record<string, unknown>>(handlers: {
 		setSaving: (v: boolean) => void;
@@ -398,6 +422,57 @@
 		claudeDirFormEl?.requestSubmit();
 	}
 
+	// svelte-ignore state_referenced_locally
+	let mcp = $state(mcpEnabled);
+	// Unlike every other secret here this one round-trips to the client — a human has to copy it.
+	// svelte-ignore state_referenced_locally
+	let mcpTokenValue = $state(mcpToken);
+	let savingMcpToggle = $state(false);
+	let mcpToggleError = $state<string | null>(null);
+	let savingMcpToken = $state(false);
+	let mcpTokenError = $state<string | null>(null);
+	let mcpCopied = $state<string | null>(null);
+
+	const mcpToggleOpts = toggleOpts<{ enabled: boolean; token: string }>({
+		set: (v) => (mcp = v),
+		setSaving: (v) => (savingMcpToggle = v),
+		setError: (v) => (mcpToggleError = v),
+		onSuccess: (data) => (mcpTokenValue = data?.token ?? '')
+	});
+
+	const mcpTokenOpts = saveOpts<{ token: string }>({
+		setSaving: (v) => (savingMcpToken = v),
+		setError: (v) => (mcpTokenError = v),
+		onSuccess: (data) => (mcpTokenValue = data?.token ?? ''),
+		confirmMessage:
+			'Regenerate the MCP token? Any agent already configured with the current token will stop working.'
+	});
+
+	// svelte-ignore state_referenced_locally
+	let mcpAttribution = $state(mcpPrAttribution);
+	let savingMcpAttribution = $state(false);
+	let mcpAttributionError = $state<string | null>(null);
+
+	const mcpAttributionOpts = toggleOpts({
+		set: (v) => (mcpAttribution = v),
+		setSaving: (v) => (savingMcpAttribution = v),
+		setError: (v) => (mcpAttributionError = v)
+	});
+
+	const mcpCommand = $derived(
+		`claude mcp add --transport http codebay ${mcpUrl} --header "Authorization: Bearer ${mcpTokenValue}"`
+	);
+
+	async function copyMcp(label: string, text: string) {
+		try {
+			await navigator.clipboard.writeText(text);
+			mcpCopied = label;
+			setTimeout(() => (mcpCopied = null), 1500);
+		} catch {
+			mcpTokenError = 'Could not copy — select the text and copy it manually.';
+		}
+	}
+
 	// svelte-ignore state_referenced_locally
 	let gitIdentity = $state(gitIdentityEnabled);
 	let savingGitToggle = $state(false);
@@ -441,6 +516,18 @@
 		setError: (v) => (cacheError = v)
 	});
 
+	// DB-backed rather than localStorage, so it initializes from the prop.
+	// svelte-ignore state_referenced_locally
+	let workspaceUpload = $state(workspaceUploadEnabled);
+	let savingUpload = $state(false);
+	let uploadError = $state<string | null>(null);
+
+	const uploadToggleOpts = toggleOpts({
+		set: (v) => (workspaceUpload = v),
+		setSaving: (v) => (savingUpload = v),
+		setError: (v) => (uploadError = v)
+	});
+
 	let clearing = $state(false);
 	let clearMsg = $state<string | null>(null);
 	let clearError = $state<string | null>(null);
@@ -900,6 +987,28 @@
 	</AppBar>
 
 	<main class="content">
+		{#if insecure}
+			<section class="card">
+				<div class="row">
+					<div class="label">
+						<ClipboardX size={20} />
+						<div class="text">
+							<div class="name">Copying out of a terminal may not work on this address</div>
+							<div class="desc">
+								Browsers hand out clipboard access only on a secure origin, and
+								<code>{insecure.origin}</code> isn't one — so a copy out of an instance's VS Code
+								terminal reaches nothing (codebay's own terminal falls back to a legacy copy that
+								usually still works). Either open codebay through <code>localhost</code> (<code
+									>{insecure.tunnel}</code
+								>), or allow this exact origin under
+								<code>chrome://flags/#unsafely-treat-insecure-origin-as-secure</code>.
+							</div>
+						</div>
+					</div>
+				</div>
+			</section>
+		{/if}
+
 		<section class="card">
 			<form
 				class="row"
@@ -1182,6 +1291,44 @@
 			</form>
 		</section>
 
+		<section class="card">
+			<form
+				class="row"
+				method="POST"
+				action="?/workspaceUploadToggle"
+				{@attach enhance(uploadToggleOpts)}
+			>
+				<div class="label">
+					<Upload size={20} />
+					<div class="text">
+						<div class="name">Drop files into the workspace</div>
+						<div class="desc">
+							Drag-and-drop or paste files and images onto an instance to save them under
+							<code>codebay-inbox/</code> in its workspace (git-excluded). The in-container path is shown
+							so Claude can Read it. Turn off to drop straight into VS Code's explorer instead. Off by
+							default.
+						</div>
+					</div>
+				</div>
+				<label class="switch">
+					<input
+						type="checkbox"
+						name="enabled"
+						checked={workspaceUpload}
+						disabled={savingUpload}
+						onchange={(e) => {
+							workspaceUpload = e.currentTarget.checked;
+							e.currentTarget.form?.requestSubmit();
+						}}
+					/>
+					<span class="track"><span class="thumb"></span></span>
+				</label>
+			</form>
+			{#if uploadError}
+				<div class="sub"><div class="msg error">{uploadError}</div></div>
+			{/if}
+		</section>
+
 		<section class="card">
 			<form
 				class="row image-row"
@@ -1230,6 +1377,116 @@
 			</form>
 		</section>
 
+		<section class="card">
+			<form class="row" method="POST" action="?/mcpToggle" {@attach enhance(mcpToggleOpts)}>
+				<div class="label">
+					<Plug size={20} />
+					<div class="text">
+						<div class="name">MCP server</div>
+						<div class="desc">
+							Expose Codebay to other AI agents over MCP, so they can create sandboxes, run Claude
+							Code in them non-interactively and read back the result. Off by default; the endpoint
+							404s until you turn it on, then authenticates with the bearer token below.
+						</div>
+					</div>
+				</div>
+				<label class="switch">
+					<input
+						type="checkbox"
+						name="enabled"
+						checked={mcp}
+						disabled={savingMcpToggle}
+						onchange={(e) => {
+							mcp = e.currentTarget.checked;
+							e.currentTarget.form?.requestSubmit();
+						}}
+					/>
+					<span class="track"><span class="thumb"></span></span>
+				</label>
+			</form>
+			{#if mcpToggleError}
+				<div class="sub"><div class="msg error">{mcpToggleError}</div></div>
+			{/if}
+
+			{#if mcp}
+				<div class="row divided">
+					<div class="label">
+						<div class="text">
+							<div class="name">Token</div>
+							<div class="desc">
+								Anything holding this token can create containers and run agents with your GitHub
+								and Claude credentials. Treat it like a password.
+							</div>
+						</div>
+					</div>
+					<div class="model-fields">
+						<label class="model-row">
+							<span class="model-label">Bearer</span>
+							<input
+								type="text"
+								class="image-input"
+								value={mcpTokenValue}
+								readonly
+								spellcheck="false"
+								onfocus={(e) => e.currentTarget.select()}
+							/>
+						</label>
+						<div class="mcp-actions">
+							<Button type="button" onclick={() => copyMcp('token', mcpTokenValue)}>
+								{mcpCopied === 'token' ? 'Copied' : 'Copy token'}
+							</Button>
+							<Button type="button" onclick={() => copyMcp('command', mcpCommand)}>
+								{mcpCopied === 'command' ? 'Copied' : 'Copy claude mcp add'}
+							</Button>
+							<form method="POST" action="?/mcpRegenerateToken" {@attach enhance(mcpTokenOpts)}>
+								<Button type="submit" disabled={savingMcpToken}>
+									{savingMcpToken ? 'Regenerating…' : 'Regenerate'}
+								</Button>
+							</form>
+						</div>
+						<code class="mcp-command">{mcpCommand}</code>
+						{#if mcpTokenError}
+							<div class="msg error">{mcpTokenError}</div>
+						{/if}
+					</div>
+				</div>
+
+				<form
+					class="row divided"
+					method="POST"
+					action="?/mcpPrAttributionToggle"
+					{@attach enhance(mcpAttributionOpts)}
+				>
+					<div class="label">
+						<div class="text">
+							<div class="name">Credit Codebay on pull requests</div>
+							<div class="desc">
+								Append a one-line footer to the body of every pull request an agent opens through
+								<code>create_pr</code>. Off by default — an attribution line on your PRs is yours to
+								opt into.
+							</div>
+						</div>
+					</div>
+					<label class="switch">
+						<input
+							type="checkbox"
+							name="enabled"
+							checked={mcpAttribution}
+							disabled={savingMcpAttribution}
+							onchange={(e) => {
+								mcpAttribution = e.currentTarget.checked;
+								e.currentTarget.form?.requestSubmit();
+							}}
+						/>
+						<span class="track"><span class="thumb"></span></span>
+					</label>
+				</form>
+				{#if mcpAttributionError}
+					<div class="sub"><div class="msg error">{mcpAttributionError}</div></div>
+				{/if}
+			{/if}
+		</section>
+
 		<section class="card">
 			<form
 				class="row"
@@ -2693,6 +2950,22 @@
 		flex: 1;
 		min-width: 220px;
 	}
+	.mcp-actions {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 6px;
+	}
+	/* The registration line is long and unbreakable, so it scrolls rather than widening the card. */
+	.mcp-command {
+		display: block;
+		overflow-x: auto;
+		white-space: pre;
+		padding: 6px 8px;
+		border: 1px solid var(--edge);
+		background: var(--panel);
+		font-size: 11px;
+		line-height: 1.5;
+	}
 	.model-row {
 		display: flex;
 		align-items: center;

package/src/components/TerminalPane.svelte

@@ -4,6 +4,7 @@
 	import type { Terminal } from '@xterm/xterm';
 	import type { FitAddon } from '@xterm/addon-fit';
 	import RotateCw from '@lucide/svelte/icons/rotate-cw';
+	import { decodeOsc52 } from '../lib/osc52.ts';
 
 	let {
 		id,
@@ -118,6 +119,40 @@
 		}
 	}
 
+	/**
+	 * The Clipboard API is the only path to the *host* clipboard, but it needs a secure context and
+	 * (outside a user gesture) can still reject — hence the legacy textarea fallback behind it.
+	 */
+	async function toClipboard(text: string) {
+		if (!text) return;
+		try {
+			await navigator.clipboard.writeText(text);
+			return;
+		} catch {
+			/* no Clipboard API, or a write the browser refused — fall through */
+		}
+		const ta = document.createElement('textarea');
+		ta.value = text;
+		ta.setAttribute('aria-hidden', 'true');
+		ta.style.position = 'fixed';
+		ta.style.opacity = '0';
+		document.body.appendChild(ta);
+		ta.select();
+		try {
+			document.execCommand('copy');
+		} catch {
+			/* nothing left to try */
+		}
+		ta.remove();
+		if (active && focus) term?.focus();
+	}
+
+	/** A finished drag is both the moment the selection exists and the gesture the clipboard needs. */
+	function copySelection() {
+		const sel = term?.getSelection();
+		if (sel) void toClipboard(sel);
+	}
+
 	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) {
@@ -165,6 +200,21 @@
 			term.open(el);
 			applyTheme();
 			fitSafe();
+			// Without this, tmux's `set-clipboard on` writes land in a handler xterm doesn't have.
+			term.parser.registerOscHandler(52, (data) => {
+				const text = decodeOsc52(data);
+				if (text !== null) void toClipboard(text);
+				return true;
+			});
+			// Chrome keeps Ctrl+Shift+C for devtools, so a browser terminal needs its own copy key.
+			term.attachCustomKeyEventHandler((e) => {
+				if (e.type !== 'keydown' || !term?.hasSelection()) return true;
+				const isCopy =
+					e.ctrlKey && (e.key === 'Insert' || (e.altKey && e.key.toLowerCase() === 'c'));
+				if (!isCopy) return true;
+				copySelection();
+				return false;
+			});
 			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.
@@ -182,8 +232,12 @@
 		const sizeObs = new ResizeObserver(() => fitSafe());
 		sizeObs.observe(el);
 
+		// Shift+drag selects in xterm even while tmux owns the mouse; copy it before a repaint clears it.
+		el.addEventListener('mouseup', copySelection);
+
 		return () => {
 			disposed = true;
+			el.removeEventListener('mouseup', copySelection);
 			sizeObs.disconnect();
 			themeObs?.disconnect();
 			scheme.removeEventListener('change', onScheme);

package/src/components/UiShowcase.svelte

@@ -14,6 +14,7 @@
 	import SettingsCog from './SettingsCog.svelte';
 	import TopBar from './TopBar.svelte';
 	import IdeLoader from './IdeLoader.svelte';
+	import DropZone from './DropZone.svelte';
 	import HealthBox from './HealthBox.svelte';
 	import BranchBox from './BranchBox.svelte';
 	import PortsBox from './PortsBox.svelte';
@@ -183,7 +184,8 @@
 		terminal_split: 0,
 		git_branch: cardBranch ? branchName : null,
 		attention: cardAttention,
-		forwarded_ports: demoPorts
+		forwarded_ports: demoPorts,
+		active_run: null
 	});
 
 	const statuses: Instance['status'][] = ['creating', 'running', 'stopped', 'error'];
@@ -212,6 +214,8 @@
 	let tabEditingName = $state('');
 	// Renames are applied for real, so the inline editor is inspectable end to end.
 	let tabRenames = $state<Record<string, string>>({});
+	// No container behind the demo, so a stopped tab just stays disabled.
+	let tabStopping = $state<string[]>([]);
 
 	const demoTabs = $derived(
 		Array.from({ length: tabCount }, (_, i): Instance => {
@@ -234,7 +238,8 @@
 				terminal_split: 0,
 				git_branch: 'main',
 				attention: null,
-				forwarded_ports: []
+				forwarded_ports: [],
+				active_run: null
 			};
 		})
 	);
@@ -461,6 +466,15 @@
 			{/snippet}
 		</ComponentDemo>
 
+		<ComponentDemo
+			title="DropZone"
+			note="Shown while a file drag is over an instance; the page decides when."
+		>
+			<div class="loader-stage">
+				<DropZone />
+			</div>
+		</ComponentDemo>
+
 		<ComponentDemo title="HealthBox">
 			<HealthBox
 				health={demoHealth}
@@ -553,6 +567,12 @@
 					bind:editingName={tabEditingName}
 					onreload={() => toast('Reload editor (demo)')}
 					onselect={(id) => (tabActive = demoTabs.findIndex((t) => t.id === id))}
+					stopping={tabStopping}
+					onstop={(id) => {
+						tabStopping = [...tabStopping, id];
+						toast(`Stop ${id} (demo)`);
+					}}
+					ondropfiles={(id, files) => toast(`Drop ${files.length} file(s) on ${id} (demo)`)}
 					onstartrename={(inst) => {
 						tabEditingId = inst.id;
 						tabEditingName = inst.name;
@@ -675,7 +695,7 @@
 	.showcase :global(.fields input[type='checkbox']) {
 		accent-color: var(--ink);
 	}
-	/* IdeLoader is an inset:0 overlay, so give it a sized, positioned stage. */
+	/* IdeLoader and DropZone are inset:0 overlays, so give them a sized, positioned stage. */
 	.loader-stage {
 		position: relative;
 		width: 100%;

package/src/container-injections/claude-code-install.ts

@@ -49,7 +49,7 @@ const CHECK_SCRIPT = 'command -v claude >/dev/null 2>&1 && echo 1 || echo 0';
  */
 export const claudeCodeInstall: Injection = {
 	id: 'claude-code-install',
-	label: 'Claude Code',
+	label: 'Claude Code installed',
 	modes: ['terminal'],
 
 	async apply(target, log) {