codebay 0.14.0 → 0.16.0

package/src/components/DropZone.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+	// With a drop handler the overlay takes the drop itself (an iframe beneath would swallow it);
+	// without one it stays inert and the drop lands on whatever is underneath.
+	let { ondrop }: { ondrop?: (e: DragEvent) => void } = $props();
+</script>
+
+<div
+	class="dropzone"
+	class:catches={ondrop}
+	role="presentation"
+	ondragover={ondrop ? (e) => e.preventDefault() : undefined}
+	{ondrop}
+>
+	<!-- Two interleaved dot patterns taking turns, like alternating LCD segments. -->
+	<svg class="frame" aria-hidden="true">
+		<rect class="dots" width="100%" height="100%" />
+		<rect class="dots odd" width="100%" height="100%" />
+	</svg>
+	<span class="label">Drop to save into codebay-inbox/</span>
+</div>
+
+<style>
+	.dropzone {
+		--gutter: 16px;
+		position: absolute;
+		inset: 0;
+		z-index: 5;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		background: color-mix(in srgb, var(--bg) 80%, transparent);
+		color: var(--ink);
+		font-family: var(--font-mono);
+		font-weight: 600;
+		text-transform: uppercase;
+		letter-spacing: 0.06em;
+		font-size: 13px;
+		pointer-events: none;
+	}
+	.dropzone.catches {
+		pointer-events: auto;
+	}
+	/* An inline svg sizes like a replaced element, so insets alone won't stretch it. */
+	.frame {
+		position: absolute;
+		top: var(--gutter);
+		left: var(--gutter);
+		width: calc(100% - 2 * var(--gutter));
+		height: calc(100% - 2 * var(--gutter));
+		overflow: visible;
+	}
+	.dots {
+		fill: none;
+		stroke: currentColor;
+		stroke-width: 4;
+		stroke-dasharray: 4 12;
+		animation: segment 2s step-end infinite;
+	}
+	.dots.odd {
+		stroke-dashoffset: 8;
+		animation-delay: -1s;
+	}
+	@keyframes segment {
+		50% {
+			opacity: 0;
+		}
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.dots {
+			animation: none;
+		}
+	}
+	/* Positioned so it paints above the frame, which comes first in source order. */
+	.label {
+		position: relative;
+	}
+</style>

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/HealthBox.svelte

@@ -31,13 +31,14 @@
 	] as const);
 
 	// The value word stays uniform because the tick/cross icon already conveys pass vs fail.
-	const checks = $derived.by((): { label: string; ok: boolean; value: string }[] => {
+	// Keyed by id, not label: a repeated label would make the keyed each throw and freeze the panel.
+	const checks = $derived.by((): { key: string; label: string; ok: boolean; value: string }[] => {
 		if (!health) return [];
 		const v = (ok: boolean) => ({ ok, value: ok ? 'OK' : '—' });
 		return [
-			{ label: FIXED_CHECKS[0], ...v(health.containerRunning) },
-			{ label: FIXED_CHECKS[1], ...v(health.codeServerAccessible) },
-			...health.injections.map((i) => ({ label: i.label, ...v(i.ok) }))
+			{ key: 'container', label: FIXED_CHECKS[0], ...v(health.containerRunning) },
+			{ key: 'surface', label: FIXED_CHECKS[1], ...v(health.codeServerAccessible) },
+			...health.injections.map((i) => ({ key: i.id, label: i.label, ...v(i.ok) }))
 		];
 	});
 
@@ -64,7 +65,7 @@
 	<div class="panel-bar">Health</div>
 	<div class="health">
 		{#if health}
-			{#each checks as check (check.label)}
+			{#each checks as check (check.key)}
 				<div class="hrow">
 					<span class="box {check.ok ? 'ok' : 'bad'}">
 						{#if check.ok}<Check size={12} strokeWidth={3} />{:else}<X

package/src/components/IdeBar.svelte

@@ -7,10 +7,12 @@
 	import LayoutTemplate from '@lucide/svelte/icons/layout-template';
 	import ChevronLeft from '@lucide/svelte/icons/chevron-left';
 	import ChevronRight from '@lucide/svelte/icons/chevron-right';
+	import CircleStop from '@lucide/svelte/icons/circle-stop';
 	import Avatar from './Avatar.svelte';
 	import AppBar from './AppBar.svelte';
 	import { withPopupMarker } from '../lib/popup-nav.ts';
 	import { nextTabIndex } from '../lib/tab-nav.ts';
+	import { filesFrom } from '../lib/upload.ts';
 
 	let {
 		running,
@@ -18,8 +20,11 @@
 		attention,
 		editingId,
 		editingName = $bindable(),
+		stopping = [],
 		onreload,
 		onselect,
+		onstop,
+		ondropfiles,
 		onstartrename,
 		oncommitrename,
 		oncancelrename
@@ -29,21 +34,59 @@
 		attention: Record<string, 'done' | 'waiting' | null>;
 		editingId: string | null;
 		editingName: string;
+		/** Ids with a stop already in flight — the tab survives until the stream drops it from `running`. */
+		stopping?: readonly string[];
 		/** Absent for terminal tabs, which carry their own reload, and until the iframe exists. */
 		onreload?: () => void;
 		onselect: (id: string) => void;
+		/** Absent on /debug, where there is no instance to stop. */
+		onstop?: (id: string) => void;
+		/** Absent while workspace uploads are switched off, so tabs stay plain. */
+		ondropfiles?: (id: string, files: File[]) => void;
 		onstartrename: (instance: Instance) => void;
 		oncommitrename: (id: string) => void;
 		oncancelrename: () => void;
 	} = $props();
 
-	const activeIndex = $derived(running.findIndex((i) => i.id === active));
-	// Falls back to the first tab so the strip always offers exactly one tab stop,
-	// even when `active` names an instance that has since stopped.
-	const focusIndex = $derived(activeIndex >= 0 ? activeIndex : 0);
+	const isStopping = (id: string) => stopping.includes(id);
+
+	// The tooltip is fixed-positioned from the slot's rect, since the scrolling strip clips anything
+	// hanging below the bar.
+	let dropTarget = $state<{ id: string; x: number; y: number; maxX: number } | null>(null);
+	let tipWidth = $state(0);
+	// Centred under the tab but kept on screen, since the first and last tabs sit near the edges.
+	const tipLeft = $derived(
+		dropTarget ? Math.max(8, Math.min(dropTarget.x - tipWidth / 2, dropTarget.maxX - tipWidth)) : 0
+	);
+
+	function onSlotDrag(e: DragEvent, id: string) {
+		if (!ondropfiles || !e.dataTransfer?.types.includes('Files')) return;
+		e.preventDefault();
+		e.dataTransfer.dropEffect = 'copy';
+		if (dropTarget?.id === id) return;
+		const r = (e.currentTarget as HTMLElement).getBoundingClientRect();
+		dropTarget = {
+			id,
+			x: r.left + r.width / 2,
+			y: r.bottom,
+			maxX: document.documentElement.clientWidth - 8
+		};
+	}
+
+	function onSlotLeave(e: DragEvent) {
+		if ((e.currentTarget as HTMLElement).contains(e.relatedTarget as Node | null)) return;
+		dropTarget = null;
+	}
+
+	function onSlotDrop(e: DragEvent, id: string) {
+		if (!ondropfiles) return;
+		e.preventDefault();
+		dropTarget = null;
+		ondropfiles(id, filesFrom(e.dataTransfer));
+	}
 
 	let viewport = $state<HTMLDivElement | null>(null);
-	let content = $state<HTMLDivElement | null>(null);
+	let content = $state<HTMLElement | null>(null);
 	let atStart = $state(true);
 	let atEnd = $state(true);
 	// `$state` rather than a plain object so `bind:this` into it is a tracked write —
@@ -67,8 +110,9 @@
 		tabEls[inst.id]?.focus();
 	}
 
-	function onTabKeydown(e: KeyboardEvent) {
-		const next = nextTabIndex(activeIndex, e.key, running.length);
+	// Relative to the focused tab, not the active one: every tab is in the Tab order now.
+	function onTabKeydown(e: KeyboardEvent, index: number) {
+		const next = nextTabIndex(index, e.key, running.length);
 		if (next === null) return;
 		e.preventDefault();
 		select(next);
@@ -115,74 +159,99 @@
 				>
 			{/if}
 			<div class="viewport" bind:this={viewport}>
-				<div class="tabs" role="tablist" aria-label="Instances" bind:this={content}>
+				<!-- A nav of buttons rather than a tablist: a tablist may only own tabs, so the
+				     stop buttons beside them fail ARIA, and each tab switches the route anyway. -->
+				<nav class="tabs" aria-label="Instances" bind:this={content}>
 					{#each running as inst, i (inst.id)}
-						{#if editingId === inst.id}
-							<div class="tab editing">
-								<Avatar
-									name={inst.name}
-									art={findAvatar(inst.avatar ?? undefined) ?? null}
-									scale={3}
-								/>
-								<!-- svelte-ignore a11y_autofocus -->
-								<input
-									class="tab-name-edit"
-									bind:value={editingName}
-									autofocus
-									onfocus={(e) => (e.currentTarget as HTMLInputElement).select()}
-									onblur={() => oncommitrename(inst.id)}
-									onkeydown={(e) => {
-										if (e.key === 'Enter') (e.currentTarget as HTMLInputElement).blur();
-										else if (e.key === 'Escape') oncancelrename();
-									}}
-								/>
-							</div>
-						{:else}
-							<button
-								bind:this={tabEls[inst.id]}
-								type="button"
-								class="tab"
-								class:active={inst.id === active}
-								id="tab-{inst.id}"
-								role="tab"
-								aria-selected={inst.id === active}
-								tabindex={i === focusIndex ? 0 : -1}
-								onclick={() => onselect(inst.id)}
-								ondblclick={() => onstartrename(inst)}
-								onkeydown={onTabKeydown}
-								title={inst.name}
-							>
-								<Avatar
-									name={inst.name}
-									art={findAvatar(inst.avatar ?? undefined) ?? null}
-									scale={3}
-								/>
-								<span class="tab-name">{inst.name}</span>
-								<span
-									class="tab-mode"
-									aria-label={inst.mode === 'terminal'
-										? 'Terminal-only instance'
-										: 'Full IDE instance'}
+						<!-- The slot, not the tab button, carries the chrome: a stop button nested inside
+						     a <button> would be invalid markup. -->
+						<div
+							class="tab-slot"
+							class:active={inst.id === active}
+							class:drop-target={dropTarget?.id === inst.id}
+							role="presentation"
+							ondragenter={(e) => onSlotDrag(e, inst.id)}
+							ondragover={(e) => onSlotDrag(e, inst.id)}
+							ondragleave={onSlotLeave}
+							ondrop={(e) => onSlotDrop(e, inst.id)}
+						>
+							{#if editingId === inst.id}
+								<div class="tab editing">
+									<Avatar
+										name={inst.name}
+										art={findAvatar(inst.avatar ?? undefined) ?? null}
+										scale={3}
+									/>
+									<!-- svelte-ignore a11y_autofocus -->
+									<input
+										class="tab-name-edit"
+										bind:value={editingName}
+										autofocus
+										onfocus={(e) => (e.currentTarget as HTMLInputElement).select()}
+										onblur={() => oncommitrename(inst.id)}
+										onkeydown={(e) => {
+											if (e.key === 'Enter') (e.currentTarget as HTMLInputElement).blur();
+											else if (e.key === 'Escape') oncancelrename();
+										}}
+									/>
+								</div>
+							{:else}
+								<button
+									bind:this={tabEls[inst.id]}
+									type="button"
+									class="tab"
+									class:active={inst.id === active}
+									id="tab-{inst.id}"
+									aria-current={inst.id === active ? 'page' : undefined}
+									onclick={() => onselect(inst.id)}
+									ondblclick={() => onstartrename(inst)}
+									onkeydown={(e) => onTabKeydown(e, i)}
+									title={inst.name}
 								>
-									{#if inst.mode === 'terminal'}
-										<Terminal size={11} />
-									{:else}
-										<LayoutTemplate size={11} />
-									{/if}
-								</span>
-								<!-- The focused tab never lights up, so a lit LED always means "needs your eyes". -->
-								{#if inst.id !== active && attention[inst.id]}
+									<Avatar
+										name={inst.name}
+										art={findAvatar(inst.avatar ?? undefined) ?? null}
+										scale={3}
+									/>
+									<span class="tab-name">{inst.name}</span>
 									<span
-										class="attn {attention[inst.id]}"
-										aria-label={attention[inst.id] === 'waiting'
-											? 'Claude is waiting for input'
-											: 'Claude finished'}
-									></span>
+										class="tab-mode"
+										aria-label={inst.mode === 'terminal'
+											? 'Terminal-only instance'
+											: 'Full IDE instance'}
+									>
+										{#if inst.mode === 'terminal'}
+											<Terminal size={11} />
+										{:else}
+											<LayoutTemplate size={11} />
+										{/if}
+									</span>
+									<!-- The focused tab never lights up, so a lit LED always means "needs your eyes". -->
+									{#if inst.id !== active && attention[inst.id]}
+										<span
+											class="attn {attention[inst.id]}"
+											aria-label={attention[inst.id] === 'waiting'
+												? 'Claude is waiting for input'
+												: 'Claude finished'}
+										></span>
+									{/if}
+								</button>
+								{#if onstop}
+									<button
+										type="button"
+										class="tab-stop"
+										disabled={isStopping(inst.id)}
+										onclick={() => onstop(inst.id)}
+										title={isStopping(inst.id) ? 'Stopping…' : `Stop ${inst.name}`}
+										aria-label={isStopping(inst.id) ? 'Stopping…' : `Stop ${inst.name}`}
+									>
+										<CircleStop size={20} />
+									</button>
 								{/if}
-							</button>
-						{/if}
+							{/if}
+						</div>
 					{/each}
-				</div>
+				</nav>
 			</div>
 			{#if overflowing}
 				<button
@@ -215,6 +284,16 @@
 		>
 	</div>
 </AppBar>
+{#if dropTarget}
+	<div
+		class="drop-tip panel"
+		bind:offsetWidth={tipWidth}
+		style:left="{tipLeft}px"
+		style:top="{dropTarget.y}px"
+	>
+		Drop to save into codebay-inbox/
+	</div>
+{/if}
 
 <style>
 	/* Grouped so the auto-margin doesn't have to move when the reload button comes and goes. */
@@ -307,6 +386,44 @@
 		outline-offset: -2px;
 	}
 
+	/* The slot owns the separator and the active plate so the stop button sits inside them. */
+	.tab-slot {
+		display: inline-flex;
+		align-items: stretch;
+		flex: none;
+		border-right: 1px solid var(--rule);
+	}
+	.tab-slot.active {
+		background: var(--fill);
+		color: var(--fill-ink);
+		/* The key has sunk into the chassis; this strip is the slot it dropped out of. */
+		box-shadow: inset 0 3px 0 var(--bg);
+	}
+	.tab-slot:not(.active):hover,
+	.tab-slot.drop-target:not(.active) {
+		background: color-mix(in srgb, var(--ink) 12%, transparent);
+	}
+	.tab-slot.drop-target {
+		outline: 2px dashed currentColor;
+		outline-offset: -5px;
+	}
+	/* pointer-events: none, or the tip would steal the drag from the tab it's pointing at. */
+	.drop-tip {
+		position: fixed;
+		z-index: 20;
+		transform: translateY(6px);
+		padding: 6px 10px;
+		background: var(--bg-card);
+		color: var(--ink);
+		font-family: var(--font-mono);
+		font-weight: 600;
+		font-size: 12px;
+		text-transform: uppercase;
+		letter-spacing: 0.06em;
+		white-space: nowrap;
+		pointer-events: none;
+	}
+
 	.tab {
 		display: inline-flex;
 		align-items: center;
@@ -317,7 +434,6 @@
 		margin: 0;
 		padding: 0 12px;
 		border: 0;
-		border-right: 1px solid var(--rule);
 		background: transparent;
 		color: var(--ink-soft);
 		font-family: var(--font-display);
@@ -331,16 +447,12 @@
 	}
 	/* Inversion is the house hover idiom, but it's also the active state here, so hovering
 	   gets a tint instead — that keeps idle → hover → active legible as three steps. */
-	.tab:not(.active):hover {
-		background: color-mix(in srgb, var(--ink) 12%, transparent);
+	.tab-slot:not(.active):hover .tab {
 		color: var(--ink);
 	}
 	.tab.active {
-		background: var(--fill);
 		color: var(--fill-ink);
 		cursor: default;
-		/* The key has sunk into the chassis; this strip is the slot it dropped out of. */
-		box-shadow: inset 0 3px 0 var(--bg);
 	}
 	.tab:focus-visible {
 		outline: 2px solid var(--ink);
@@ -354,6 +466,40 @@
 		overflow: hidden;
 		text-overflow: ellipsis;
 	}
+	/* Reads as part of the tab, so it inherits the slot's colour rather than declaring its own. */
+	.tab-stop {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		flex: none;
+		appearance: none;
+		margin: 0;
+		padding: 0 10px 0 0;
+		border: 0;
+		background: transparent;
+		color: inherit;
+		opacity: 0.55;
+		cursor: pointer;
+	}
+	.tab-slot:not(.active) .tab-stop {
+		color: var(--ink-soft);
+	}
+	.tab-stop:hover:not(:disabled) {
+		opacity: 1;
+		color: var(--danger);
+	}
+	.tab-stop:disabled {
+		opacity: var(--dim);
+		cursor: default;
+	}
+	.tab-stop:focus-visible {
+		outline: 2px solid var(--ink);
+		outline-offset: -2px;
+	}
+	.tab-slot.active .tab-stop:focus-visible {
+		outline-color: var(--fill-ink);
+	}
+
 	.tab-mode {
 		display: inline-flex;
 		align-items: center;

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);