codebay 0.14.0 → 0.16.0

package/src/components/AgentLogBox.svelte

@@ -0,0 +1,458 @@
+<script lang="ts">
+	import Bot from '@lucide/svelte/icons/bot';
+	import Terminal from '@lucide/svelte/icons/terminal';
+	import MessageSquare from '@lucide/svelte/icons/message-square';
+	import RefreshCw from '@lucide/svelte/icons/refresh-cw';
+	import CircleCheck from '@lucide/svelte/icons/circle-check';
+	import CircleX from '@lucide/svelte/icons/circle-x';
+	import ChevronRight from '@lucide/svelte/icons/chevron-right';
+	import { untrack } from 'svelte';
+	import { apiFetch } from '../api.ts';
+	import type { RunTimelineEntry } from '../lib/agent-run-stream.ts';
+	import type { AgentRunStatus } from '../types.ts';
+
+	interface AgentRun {
+		id: string;
+		status: AgentRunStatus;
+		prompt: string;
+		/** The id Claude reported once it started; null until then. */
+		model: string | null;
+		/** What the caller asked for, an alias like `sonnet`; null when the sandbox default was used. */
+		requested_model: string | null;
+		/** Claude's own session id, reported once the run starts; null until then. */
+		session_id: string | null;
+		/** Set when the run was launched to continue an earlier session, which is what makes it a continuation. */
+		resume_session_id: string | null;
+		result: string | null;
+		error: string | null;
+		is_error: boolean;
+		last_activity: string | null;
+		num_turns: number | null;
+		cost_usd: number | null;
+		duration_ms: number | null;
+		created_at: number;
+		started_at: number | null;
+		finished_at: number | null;
+	}
+
+	let {
+		id,
+		/** Bumped by the parent on every `run` stream frame, which is what drives live refresh. */
+		bump = 0
+	}: { id: string; bump?: number } = $props();
+
+	let runs = $state<AgentRun[]>([]);
+	let timelines = $state<Record<string, RunTimelineEntry[]>>({});
+	/** Expanded run ids. An array rather than a Set so Svelte tracks the changes. */
+	let open = $state<string[]>([]);
+	/** The newest run already reacted to, so one starting later can take the spotlight exactly once. */
+	let newest: string | null = null;
+	let loaded = $state(false);
+	let error = $state<string | null>(null);
+
+	const isOpen = (runId: string) => open.includes(runId);
+
+	async function load() {
+		try {
+			const q = open.length ? `?run_ids=${encodeURIComponent(open.join(','))}` : '';
+			const data = await apiFetch<{
+				runs: AgentRun[];
+				timelines: Record<string, RunTimelineEntry[]>;
+			}>(`/api/instances/${id}/agent-log${q}`, undefined, 'Could not load the agent log');
+
+			// This island can be older than the route (production serves the prebuilt bundle; routes
+			// load from source), so a key it does not know must degrade, not throw and unmount the box.
+			runs = Array.isArray(data.runs) ? data.runs : [];
+			timelines = { ...timelines, ...(data.timelines ?? {}) };
+
+			// A run that starts while the panel is open takes over: collapse the rest and expand it,
+			// so the box you are looking at is always the one currently doing something.
+			const top = data.runs[0]?.id ?? null;
+			if (top && top !== newest) {
+				newest = top;
+				open = [top];
+			}
+			error = null;
+		} catch (err) {
+			error = (err as Error).message;
+		} finally {
+			loaded = true;
+		}
+	}
+
+	$effect(() => {
+		// `bump` must be read as a real value. A bare `void bump;` is dead code the compiler drops,
+		// which leaves this effect with no dependency at all — the panel then renders the state it
+		// mounted with and never updates again, which is exactly what shipped first time round.
+		if (bump < 0) return;
+		// load() reads and writes `open`; tracked, that re-runs this effect off its own fetch.
+		untrack(() => void load());
+	});
+
+	function toggle(runId: string) {
+		const opening = !isOpen(runId);
+		open = opening ? [...open, runId] : open.filter((r) => r !== runId);
+		// Expanding a box whose timeline the server hasn't sent yet needs a fetch to fill it.
+		if (opening && !timelines[runId]) void load();
+	}
+
+	const ICONS = { tool: Terminal, text: MessageSquare, retry: RefreshCw, result: CircleCheck };
+
+	const isLive = (run: AgentRun) => run.status === 'running' || run.status === 'queued';
+
+	/** Newest step on top, keyed by the original position so a new step never re-keys the rest. */
+	const newestFirst = (entries: RunTimelineEntry[]) =>
+		entries.map((entry, index) => ({ entry, index })).reverse();
+
+	/** The id Claude reported, or the caller's alias until the run has started. */
+	const modelOf = (run: AgentRun) => run.model ?? run.requested_model;
+
+	function modelTitle(run: AgentRun): string | undefined {
+		if (run.model && run.requested_model && run.model !== run.requested_model) {
+			return `Requested as ${run.requested_model}`;
+		}
+		return run.model ? undefined : 'Requested; Claude has not reported the model it is using yet';
+	}
+
+	/** A resumed run reports the session it continued, so the two ids match and one short form labels both. */
+	const sessionOf = (run: AgentRun) => run.session_id ?? run.resume_session_id;
+
+	const shortSession = (sid: string) => sid.slice(0, 8);
+
+	function sessionTitle(run: AgentRun): string {
+		const sid = sessionOf(run);
+		if (!sid) return '';
+		const lead = run.resume_session_id
+			? 'Continues an earlier run in this session'
+			: 'New session, started by this run';
+		return `${lead}\nSession ${sid}${run.session_id ? '' : ' (requested; not started yet)'}`;
+	}
+
+	function when(run: AgentRun): string {
+		return new Date(run.created_at).toLocaleTimeString([], {
+			hour: '2-digit',
+			minute: '2-digit',
+			second: '2-digit'
+		});
+	}
+
+	function meta(run: AgentRun): string {
+		const bits: string[] = [];
+		if (run.num_turns != null) bits.push(`${run.num_turns} turns`);
+		if (run.cost_usd != null) bits.push(`$${run.cost_usd.toFixed(4)}`);
+		if (run.duration_ms != null) bits.push(`${(run.duration_ms / 1000).toFixed(1)}s`);
+		return bits.join(' · ');
+	}
+
+	/** The one-line gist on a collapsed box, so the strip is worth scanning shut. */
+	function peek(run: AgentRun): string {
+		if (run.status === 'queued') return 'Queued';
+		if (isLive(run)) return (run.last_activity ?? 'Working…').replace(/\s+/g, ' ').trim();
+		return (run.error ?? run.result ?? run.prompt).replace(/\s+/g, ' ').trim();
+	}
+</script>
+
+{#if loaded && runs.length > 0}
+	<section class="agentwrap panel">
+		<div class="agent-bar panel-bar">
+			<span><Bot size={14} /> Agent log</span>
+			<span class="count">{runs.length} run{runs.length === 1 ? '' : 's'}</span>
+		</div>
+
+		{#each runs as run (run.id)}
+			{@const expanded = isOpen(run.id)}
+			<div class="run">
+				<button
+					type="button"
+					class="run-head"
+					aria-expanded={expanded}
+					onclick={() => toggle(run.id)}
+				>
+					<span class="chev" class:down={expanded}><ChevronRight size={14} /></span>
+					<span class="when">{when(run)}</span>
+					<span class="status" class:bad={run.is_error} class:live={isLive(run)}>
+						{#if isLive(run)}<span class="pulse"></span>{/if}
+						{run.status}
+					</span>
+					{#if modelOf(run)}
+						<span class="model" title={modelTitle(run)}>{modelOf(run)}</span>
+					{/if}
+					{#if sessionOf(run)}
+						{@const sid = sessionOf(run)!}
+						<span class="session" class:resumed={run.resume_session_id} title={sessionTitle(run)}>
+							{run.resume_session_id ? '⤷' : '◆'}
+							{shortSession(sid)}
+						</span>
+					{/if}
+					{#if !expanded}
+						<span class="peek">{peek(run)}</span>
+					{/if}
+					<span class="run-meta">{meta(run)}</span>
+				</button>
+
+				{#if expanded}
+					<div class="prompt">
+						<div class="ptitle">Initial prompt</div>
+						<div class="ptext">{run.prompt}</div>
+					</div>
+
+					<ol class="steps">
+						{#if isLive(run)}
+							<li class="step">
+								<span class="ico"><span class="pulse"></span></span>
+								<span class="body">
+									<!-- Deliberately not `last_activity`: while a run is live that is the same step
+									     the newest timeline row already shows, so echoing it prints the line twice. -->
+									<span class="text">
+										{run.status === 'queued' ? 'Queued — waiting for the sandbox' : 'Working…'}
+									</span>
+								</span>
+							</li>
+						{:else if (timelines[run.id] ?? []).length === 0}
+							<li class="step">
+								<span class="body"><span class="text">No steps recorded.</span></span>
+							</li>
+						{/if}
+
+						{#each newestFirst(timelines[run.id] ?? []) as { entry, index } (index)}
+							<li class="step" class:sub={entry.subagent}>
+								<span class="ico" class:bad={entry.kind === 'result' && entry.isError}>
+									{#if entry.kind === 'result' && entry.isError}
+										<CircleX size={14} />
+									{:else}
+										{@const Icon = ICONS[entry.kind]}
+										<Icon size={14} />
+									{/if}
+								</span>
+								<span class="body">
+									{#if entry.name}<span class="tool">{entry.name}</span>{/if}
+									<span class="text">{entry.text}</span>
+								</span>
+							</li>
+						{/each}
+					</ol>
+
+					{#if run.error && !isLive(run)}
+						<div class="err">{run.error}</div>
+					{/if}
+				{/if}
+			</div>
+		{/each}
+
+		{#if error}
+			<div class="err">{error}</div>
+		{/if}
+	</section>
+{/if}
+
+<style>
+	.agentwrap {
+		overflow: hidden;
+		/* Matches the 18px the page puts under every other panel; this one sits above the boot log. */
+		margin-bottom: 18px;
+	}
+	.agent-bar {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 12px;
+	}
+	.agent-bar span {
+		display: inline-flex;
+		align-items: center;
+		gap: 6px;
+	}
+	.count {
+		font-size: 11px;
+		opacity: 0.8;
+	}
+	.run {
+		background: var(--bg-card);
+		border-top: 1px solid var(--rule-soft);
+	}
+	.run:first-of-type {
+		border-top: none;
+	}
+	.run-head {
+		display: flex;
+		align-items: center;
+		gap: 10px;
+		width: 100%;
+		padding: 9px 14px;
+		background: none;
+		border: none;
+		color: inherit;
+		font: inherit;
+		text-align: left;
+		cursor: pointer;
+		min-width: 0;
+	}
+	.run-head:hover {
+		background: color-mix(in srgb, var(--ink) 6%, transparent);
+	}
+	.chev {
+		flex: none;
+		display: inline-flex;
+		color: var(--ink-soft);
+		transition: transform 120ms ease;
+	}
+	.chev.down {
+		transform: rotate(90deg);
+	}
+	.when,
+	.status,
+	.model,
+	.session,
+	.run-meta,
+	.peek {
+		font-family: var(--font-mono);
+		font-size: 11px;
+	}
+	.session {
+		flex: none;
+		display: inline-flex;
+		align-items: center;
+		gap: 4px;
+		color: var(--ink-faint);
+	}
+	/* A continuation is the exception worth spotting in the strip, so only it gets full-strength ink. */
+	.session.resumed {
+		color: var(--ink-soft);
+	}
+	.model {
+		flex: none;
+		color: var(--ink-soft);
+		max-width: 14em;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	.when {
+		flex: none;
+		color: var(--ink-soft);
+	}
+	.status {
+		flex: none;
+		display: inline-flex;
+		align-items: center;
+		gap: 5px;
+		border: 1px solid var(--ink-faint);
+		padding: 0 5px;
+	}
+	.status.live {
+		border-color: var(--fill);
+	}
+	.status.bad {
+		color: var(--attn-waiting);
+		border-color: var(--attn-waiting);
+	}
+	/* Collapsed rows carry the gist, so the strip is scannable without opening anything. */
+	.peek {
+		flex: 1;
+		min-width: 0;
+		color: var(--ink-soft);
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	.run-meta {
+		margin-left: auto;
+		flex: none;
+		color: var(--ink-faint);
+	}
+	.prompt {
+		padding: 10px 14px;
+		border-top: 1px solid var(--rule-soft);
+	}
+	.ptitle {
+		font-family: var(--font-mono);
+		font-size: 10px;
+		text-transform: uppercase;
+		letter-spacing: 0.08em;
+		color: var(--ink-soft);
+		margin-bottom: 4px;
+	}
+	.ptext {
+		font-size: 12px;
+		line-height: 1.5;
+		/* The prompt is arbitrary user text, often multi-line — keep its shape but cap the height. */
+		white-space: pre-wrap;
+		max-height: 7.5em;
+		overflow-y: auto;
+	}
+	/* Newest step first, so the cap never hides what the run is doing right now. */
+	.steps {
+		list-style: none;
+		margin: 0;
+		padding: 0;
+		max-height: 420px;
+		overflow-y: auto;
+	}
+	.step {
+		display: flex;
+		gap: 10px;
+		align-items: flex-start;
+		padding: 8px 14px;
+		border-top: 1px solid var(--rule-soft);
+	}
+	/* A subagent's steps are the nested ones; indent rather than hide them. */
+	.step.sub {
+		padding-left: 34px;
+		opacity: 0.75;
+	}
+	.ico {
+		flex: none;
+		display: inline-flex;
+		width: 16px;
+		height: 16px;
+		align-items: center;
+		justify-content: center;
+		color: var(--ink-soft);
+		margin-top: 1px;
+	}
+	.ico.bad {
+		color: var(--attn-waiting);
+	}
+	.body {
+		display: flex;
+		gap: 6px;
+		min-width: 0;
+		flex-wrap: wrap;
+		align-items: baseline;
+	}
+	.tool {
+		font-family: var(--font-mono);
+		font-size: 11px;
+		border: 1px solid var(--ink-faint);
+		padding: 0 4px;
+		flex: none;
+	}
+	.text {
+		font-family: var(--font-mono);
+		font-size: 12px;
+		line-height: 1.5;
+		word-break: break-word;
+		min-width: 0;
+	}
+	.pulse {
+		flex: none;
+		width: 7px;
+		height: 7px;
+		border-radius: 50%;
+		background: var(--fill);
+		animation: agent-pulse 1.6s ease-in-out infinite;
+	}
+	@keyframes agent-pulse {
+		50% {
+			opacity: 0.25;
+		}
+	}
+	.err {
+		padding: 8px 14px;
+		font-family: var(--font-mono);
+		font-size: 11px;
+		border-top: 1px solid var(--rule-soft);
+		color: var(--attn-waiting);
+		white-space: pre-wrap;
+	}
+</style>

package/src/components/AppShell.svelte

@@ -5,6 +5,7 @@
 	import { SvelteSet } from 'svelte/reactivity';
 	import { nextTabIndex } from '../lib/tab-nav.ts';
 	import DashboardView from './DashboardView.svelte';
+	import DropZone from './DropZone.svelte';
 	import IdeBar from './IdeBar.svelte';
 	import IdeLoader from './IdeLoader.svelte';
 	import TerminalSplit from './TerminalSplit.svelte';
@@ -15,6 +16,7 @@
 	import { syncTheme } from '../theme.ts';
 	import toast, { Toaster } from 'svelte-french-toast';
 	import { TOAST_OPTIONS } from '../toast.ts';
+	import { filesFrom, uploadFile } from '../lib/upload.ts';
 
 	// `snapshot` seeds the live state so neither view renders a loading flash first.
 	let {
@@ -56,6 +58,22 @@
 	let editingId = $state<string | null>(null);
 	let editingName = $state('');
 
+	// The tab only vanishes once the stream drops the instance from `running`, so the
+	// button stays disabled across the round-trip rather than flickering back to armed.
+	const stopping = new SvelteSet<string>();
+
+	async function stopTab(id: string) {
+		if (stopping.has(id)) return;
+		stopping.add(id);
+		try {
+			await apiPost(`/api/instances/${id}/stop`, undefined, 'Failed to stop instance');
+			// The live stream removes the tab once the container is down.
+		} catch (err) {
+			toast.error((err as Error).message);
+			stopping.delete(id);
+		}
+	}
+
 	function startRename(instance: Instance) {
 		editingId = instance.id;
 		editingName = instance.name;
@@ -250,6 +268,72 @@
 		};
 	});
 
+	// Sequential, so the response order (and the toast order) matches the drop order.
+	async function handleUpload(id: string, 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 onDrop(e: DragEvent) {
+		e.preventDefault();
+		dropping = false;
+		void handleUpload(active, filesFrom(e.dataTransfer));
+	}
+
+	// Covering the code-server iframe hijacks VS Code's own drops, so there only the tab takes a
+	// file; a terminal pane lives in this document and gets the full overlay.
+	$effect(() => {
+		if (!livePreflight.uploadEnabled || !onIde) return;
+		const hasFiles = (e: DragEvent) => e.dataTransfer?.types.includes('Files') ?? false;
+		const enter = (e: DragEvent) => {
+			if (hasFiles(e)) dropping = true;
+		};
+		// A drop target already claimed the drag; anywhere else refuses it, since the browser's
+		// default is to open the file in a new tab.
+		const over = (e: DragEvent) => {
+			if (!hasFiles(e) || e.defaultPrevented) return;
+			e.preventDefault();
+			e.dataTransfer!.dropEffect = 'none';
+		};
+		const drop = (e: DragEvent) => {
+			if (hasFiles(e)) e.preventDefault();
+			dropping = false;
+		};
+		const leave = (e: DragEvent) => {
+			if (e.relatedTarget === null) dropping = false;
+		};
+		// Capture phase: only fires for events that originate in the parent document (xterm's
+		// textarea, the tab bar) — paste inside the iframe never reaches here.
+		const paste = (e: ClipboardEvent) => {
+			const files = filesFrom(e.clipboardData);
+			if (files.length && active) {
+				e.preventDefault();
+				void handleUpload(active, files);
+			}
+		};
+		window.addEventListener('dragenter', enter);
+		window.addEventListener('dragover', over);
+		window.addEventListener('dragleave', leave);
+		window.addEventListener('drop', drop);
+		window.addEventListener('paste', paste, true);
+		return () => {
+			window.removeEventListener('dragenter', enter);
+			window.removeEventListener('dragover', over);
+			window.removeEventListener('dragleave', leave);
+			window.removeEventListener('drop', drop);
+			window.removeEventListener('paste', paste, true);
+		};
+	});
+
 	$effect(() => {
 		// The re-seed after a reconnect is a baseline, not a change — otherwise it replays chimes.
 		let primed = false;
@@ -271,10 +355,25 @@
 					livePreflight = { ...livePreflight, defaultMode: msg.data.mode };
 					return;
 				}
+				if (msg.type === 'upload-enabled') {
+					livePreflight = { ...livePreflight, uploadEnabled: msg.data.enabled };
+					return;
+				}
 				if (msg.type === 'theme') {
 					syncTheme(msg.data.value);
 					return;
 				}
+				if (msg.type === 'run') {
+					// Its own frame because run progress ticks far faster than the instance list
+					// reconciles, so patch the one instance rather than waiting for a whole list.
+					const summary = msg.data;
+					instances = instances.map((i) =>
+						i.id === summary.instance_id
+							? { ...i, active_run: summary.finished_at ? null : summary }
+							: i
+					);
+					return;
+				}
 				if (msg.type === 'health') {
 					// A tick in flight when a rebuild starts probes the *old* container and
 					// reports it accessible, which would mount the iframe against the replacement too early.
@@ -290,6 +389,7 @@
 				for (const id of [...everReady]) if (!live.has(id)) everReady.delete(id);
 				for (const id of [...forced]) if (!live.has(id)) forced.delete(id);
 				for (const id of [...loadedFrames]) if (!live.has(id)) loadedFrames.delete(id);
+				for (const id of [...stopping]) if (!live.has(id)) stopping.delete(id);
 				const nextAttention: Record<string, 'done' | 'waiting' | null> = {};
 				for (const inst of next) nextAttention[inst.id] = inst.attention;
 				if (primed) {
@@ -345,10 +445,15 @@
 			{attention}
 			{editingId}
 			bind:editingName
+			stopping={[...stopping]}
 			onreload={activeInstance && activeInstance.mode !== 'terminal' && mountable(active)
 				? reloadActive
 				: undefined}
 			onselect={(id) => navigate(`/ide/${id}`)}
+			onstop={stopTab}
+			ondropfiles={livePreflight.uploadEnabled
+				? (id, files) => void handleUpload(id, files)
+				: undefined}
 			onstartrename={startRename}
 			oncommitrename={commitRename}
 			oncancelrename={cancelRename}
@@ -371,7 +476,7 @@
 				<div
 					class="pane"
 					class:active={inst.id === active}
-					role="tabpanel"
+					role="region"
 					aria-labelledby="tab-{inst.id}"
 				>
 					{#if mountable(inst.id)}
@@ -382,10 +487,13 @@
 								initialOpen={inst.terminal_split === 1}
 							/>
 						{:else}
+							<!-- code-server answers a terminal's OSC 52 through the Clipboard API, which
+							     Permissions Policy gates per-frame. -->
 							<iframe
 								bind:this={frames[inst.id]}
 								src={ideUrl(inst)}
 								title={inst.name}
+								allow="clipboard-read; clipboard-write"
 								onload={() => loadedFrames.add(inst.id)}
 							></iframe>
 						{/if}
@@ -402,6 +510,9 @@
 					{:else if inst.mode !== 'terminal' && !loadedFrames.has(inst.id)}
 						<IdeLoader />
 					{/if}
+					{#if dropping && inst.id === active && inst.mode === 'terminal'}
+						<DropZone ondrop={onDrop} />
+					{/if}
 				</div>
 			{/if}
 		{/each}