codebay 0.14.0 → 0.15.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

@@ -275,6 +275,17 @@
 					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.

package/src/components/FolderBrowser.svelte

@@ -2,6 +2,7 @@
 	import { tick } from 'svelte';
 	import type { BrowseResult, FolderHistoryEntry, InstanceMode } from '../types.ts';
 	import { isRepoUrl } from '../lib/repo-url.ts';
+	import { DRIVES_ROOT, DRIVES_ROOT_LABEL } from '../lib/drives.ts';
 	import Terminal from '@lucide/svelte/icons/terminal';
 	import LayoutTemplate from '@lucide/svelte/icons/layout-template';
 	import X from '@lucide/svelte/icons/x';
@@ -54,6 +55,9 @@
 			: []
 	);
 
+	// The virtual drive list is a chooser, not a folder — nothing in it can be handed to an instance.
+	const atDrivesRoot = $derived(result?.path === DRIVES_ROOT);
+
 	const shownHistory = $derived(showAll ? history : history.slice(0, 5));
 
 	async function loadHistory() {
@@ -180,7 +184,7 @@
 		</div>
 
 		<div class="crumbs">
-			<code>{result?.path ?? '…'}</code>
+			<code>{atDrivesRoot ? DRIVES_ROOT_LABEL : (result?.path ?? '…')}</code>
 		</div>
 
 		{#if history.length > 0}
@@ -268,7 +272,7 @@
 			{/if}
 		</div>
 
-		{#if result && !result.hasDevcontainer}
+		{#if result && !result.hasDevcontainer && !atDrivesRoot}
 			<div class="warn">
 				<TriangleAlert size={15} />
 				<span
@@ -279,11 +283,15 @@
 		{/if}
 
 		<div class="foot">
-			<span class="hint">Browse to a folder, then select this folder or any subfolder.</span>
+			<span class="hint"
+				>{atDrivesRoot
+					? 'Pick a drive to browse.'
+					: 'Browse to a folder, then select this folder or any subfolder.'}</span
+			>
 			<button
 				class="primary"
-				disabled={!result}
-				onclick={() => result && onpick(result.path, { mode })}
+				disabled={!result || atDrivesRoot}
+				onclick={() => result && !atDrivesRoot && onpick(result.path, { mode })}
 			>
 				Select this folder
 			</button>

package/src/components/InstanceCard.svelte

@@ -94,6 +94,16 @@
 	{#if instance.git_branch}
 		<BranchBox branch={instance.git_branch} />
 	{/if}
+	{#if instance.active_run}
+		<div class="agent-run" title="An MCP client is driving Claude in this sandbox">
+			<span class="agent-dot"></span>
+			<span class="agent-text">
+				{instance.active_run.status === 'queued'
+					? 'Agent run queued'
+					: (instance.active_run.last_activity ?? 'Agent running')}
+			</span>
+		</div>
+	{/if}
 	{#if instance.status === 'error' && instance.error}
 		<div class="card-error">{instance.error}</div>
 	{/if}
@@ -251,6 +261,34 @@
 		color: var(--ink);
 		outline: none;
 	}
+	.agent-run {
+		display: flex;
+		align-items: center;
+		gap: 6px;
+		min-width: 0;
+		margin-top: 8px;
+		font-family: var(--font-mono);
+		font-size: 11px;
+		color: var(--ink-soft);
+	}
+	.agent-dot {
+		flex: none;
+		width: 6px;
+		height: 6px;
+		border-radius: 50%;
+		background: var(--fill);
+		animation: agent-pulse 1.6s ease-in-out infinite;
+	}
+	.agent-text {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	@keyframes agent-pulse {
+		50% {
+			opacity: 0.25;
+		}
+	}
 	.path {
 		margin-top: 10px;
 		font-family: var(--font-mono);

package/src/components/InstanceView.svelte

@@ -3,6 +3,7 @@
 	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 { forwardedPortUrl } from '../lib/links.ts';
@@ -20,6 +21,9 @@
 	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,6 +66,8 @@
 			} 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);
 			}
@@ -252,6 +258,8 @@
 		</div>
 	</section>
 
+	<AgentLogBox {id} bump={runBump} />
+
 	<div class="logwrap panel">
 		<div class="log-bar panel-bar">
 			<span>Boot log</span>