codebay 0.9.1 → 0.10.0

package/src/components/IdeBar.svelte

@@ -1,7 +1,10 @@
 <script lang="ts">
 	import { type Instance } from '../types.ts';
+	import { findAvatar } from '../avatars/index.ts';
 	import Settings from '@lucide/svelte/icons/settings';
+	import RotateCw from '@lucide/svelte/icons/rotate-cw';
 	import Terminal from '@lucide/svelte/icons/terminal';
+	import LayoutTemplate from '@lucide/svelte/icons/layout-template';
 	import Avatar from './Avatar.svelte';
 	import AppBar from './AppBar.svelte';
 	import { withPopupMarker } from '../lib/popup-nav.ts';
@@ -12,6 +15,7 @@
 		attention,
 		editingId,
 		editingName = $bindable(),
+		onreload,
 		onselect,
 		onstartrename,
 		oncommitrename,
@@ -22,6 +26,8 @@
 		attention: Record<string, 'done' | 'waiting' | null>;
 		editingId: string | null;
 		editingName: string;
+		/** Absent for terminal tabs, which carry their own reload, and until the iframe exists. */
+		onreload?: () => void;
 		onselect: (id: string) => void;
 		onstartrename: (instance: Instance) => void;
 		oncommitrename: (id: string) => void;
@@ -41,7 +47,11 @@
 				>
 					{#if editingId === inst.id}
 						<div class="tab-label editing">
-							<Avatar id={inst.id} name={inst.name} scale={4} />
+							<Avatar
+								name={inst.name}
+								art={findAvatar(inst.avatar ?? undefined) ?? null}
+								scale={4}
+							/>
 							<!-- svelte-ignore a11y_autofocus -->
 							<input
 								class="tab-name-edit"
@@ -63,10 +73,16 @@
 							ondblclick={() => onstartrename(inst)}
 							title={inst.name}
 						>
-							<Avatar id={inst.id} name={inst.name} scale={4} />
+							<Avatar
+								name={inst.name}
+								art={findAvatar(inst.avatar ?? undefined) ?? null}
+								scale={4}
+							/>
 							<span class="tab-name">{inst.name}</span>
 							{#if inst.mode === 'terminal'}
 								<span class="tab-mode" title="Terminal-only instance"><Terminal size={13} /></span>
+							{:else}
+								<span class="tab-mode" title="Full IDE instance"><LayoutTemplate size={13} /></span>
 							{/if}
 						</button>
 					{/if}
@@ -74,28 +90,55 @@
 			{/each}
 		</nav>
 	{/if}
-	<a
-		class="cog"
-		href={withPopupMarker('/settings')}
-		target="_blank"
-		rel="noopener noreferrer"
-		title="Settings"
-		aria-label="Settings"><Settings size={18} /></a
-	>
+	<div class="right">
+		{#if onreload}
+			<button
+				type="button"
+				class="reload"
+				onclick={onreload}
+				title="Reload editor"
+				aria-label="Reload editor"><RotateCw size={18} /></button
+			>
+		{/if}
+		<a
+			class="cog"
+			href={withPopupMarker('/settings')}
+			target="_blank"
+			rel="noopener noreferrer"
+			title="Settings"
+			aria-label="Settings"><Settings size={18} /></a
+		>
+	</div>
 </AppBar>
 
 <style>
-	.cog {
+	/* Grouped so the auto-margin doesn't have to move when the reload button comes and goes. */
+	.right {
+		display: flex;
+		align-items: stretch;
+		margin-left: auto;
+	}
+	.cog,
+	.reload {
 		display: inline-flex;
 		align-items: center;
 		justify-content: center;
 		width: 48px;
 		flex: none;
-		margin-left: auto;
 		color: var(--ink);
 		border-left: 1px solid var(--rule);
 	}
-	.cog:hover {
+	.reload {
+		appearance: none;
+		background: transparent;
+		border-top: 0;
+		border-right: 0;
+		border-bottom: 0;
+		padding: 0;
+		cursor: pointer;
+	}
+	.cog:hover,
+	.reload:hover {
 		background: var(--ink);
 		color: var(--bg);
 	}

package/src/components/IdeLoader.svelte

@@ -1,14 +1,23 @@
 <script lang="ts">
 	import Button from './Button.svelte';
+	import type { InstanceMode } from '../types.ts';
 
 	// A fixed flip count per tick, rather than a per-bit probability, is what keeps
 	// the cadence visually even; `speed` scales only the interval, never the churn.
 	let {
 		speed = 1,
+		mode = 'ide',
 		// Omit both unless the wait could in principle never end.
 		stalledAfterMs,
 		onoverride
-	}: { speed?: number; stalledAfterMs?: number; onoverride?: () => void } = $props();
+	}: {
+		speed?: number;
+		mode?: InstanceMode;
+		stalledAfterMs?: number;
+		onoverride?: () => void;
+	} = $props();
+
+	const isTerminal = $derived(mode === 'terminal');
 
 	let stalled = $state(false);
 	$effect(() => {
@@ -52,11 +61,14 @@
 		{/each}
 	</div>
 	<div class="label">
-		Loading editor<span class="dot">.</span><span class="dot">.</span><span class="dot">.</span>
+		Loading {isTerminal ? 'terminal' : 'editor'}<span class="dot">.</span><span class="dot">.</span
+		><span class="dot">.</span>
 	</div>
 	{#if stalled}
 		<div class="stalled">
-			<p>Waiting for code-server to answer inside the container.</p>
+			<p>
+				Waiting for {isTerminal ? 'the terminal' : 'code-server'} to answer inside the container.
+			</p>
 			{#if onoverride}
 				<Button size="sm" onclick={onoverride}>Open anyway</Button>
 			{/if}

package/src/components/InstanceCard.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { type Instance } from '../types.ts';
+	import { findAvatar } from '../avatars/index.ts';
 	import Avatar from './Avatar.svelte';
 	import BranchBox from './BranchBox.svelte';
 	import PortsBox from './PortsBox.svelte';
@@ -52,7 +53,11 @@
 		</div>
 	{/if}
 	<div class="card-head">
-		<Avatar id={instance.id} name={instance.name} interactive />
+		<Avatar
+			name={instance.name}
+			art={findAvatar(instance.avatar ?? undefined) ?? null}
+			interactive
+		/>
 		{#if editing}
 			<!-- svelte-ignore a11y_autofocus -->
 			<input

package/src/components/InstanceView.svelte

@@ -22,26 +22,24 @@
 	let logEl = $state<HTMLDivElement | null>(null);
 	let following = $state(true);
 
+	// tick() lets the <pre> text node grow before we measure, so we reach the true bottom.
+	async function scrollToBottom() {
+		await tick();
+		logEl?.scrollTo(0, logEl.scrollHeight);
+	}
+
 	// Pin to the newest output whenever logs grow — but only while following.
-	// tick() lets the <pre> text node grow before we scroll, so we reach the true bottom.
 	$effect(() => {
 		if (!following || logs.length === 0) return; // reading logs.length tracks appended chunks
-		tick().then(() => {
-			if (following) logEl?.scrollTo(0, logEl.scrollHeight);
-		});
+		scrollToBottom();
 	});
 
-	// A user scrolling up pauses following; programmatic scroll-to-bottom keeps the
-	// gap ~0, so it never trips this — only re-clicking "Follow log" resumes.
-	function onLogScroll() {
-		if (!logEl) return;
-		const gap = logEl.scrollHeight - logEl.clientHeight - logEl.scrollTop;
-		if (gap > 40) following = false;
-	}
-
+	// Following is deliberately sticky: only this button changes it. Inferring it from
+	// scroll events misfired constantly, since streaming chunks and reflow above the log
+	// both move scrollTop without the user touching anything.
 	function toggleFollow() {
 		following = !following;
-		if (following) logEl?.scrollTo(0, logEl.scrollHeight);
+		if (following) scrollToBottom();
 	}
 
 	$effect(() => installPopupBackTrap());
@@ -255,7 +253,14 @@
 		<div class="log-bar panel-bar">
 			<span>Boot log</span>
 			<div class="log-actions">
-				<button class="copy" class:active={following} onclick={toggleFollow}>
+				<button
+					class="copy"
+					class:active={following}
+					aria-pressed={following}
+					title={following ? 'Following — click to pause' : 'Paused — click to follow new output'}
+					onclick={toggleFollow}
+				>
+					{#if following}<span class="dot"></span>{/if}
 					{following ? 'Following' : 'Follow log'}
 				</button>
 				<button class="copy" onclick={copyLogs} disabled={!logs}>
@@ -263,7 +268,7 @@
 				</button>
 			</div>
 		</div>
-		<div class="logs" bind:this={logEl} onscroll={onLogScroll}>
+		<div class="logs" bind:this={logEl}>
 			<pre>{logs || 'Waiting for output…'}<span class="caret"></span></pre>
 		</div>
 		{#if instance?.status === 'error' && instance.error}
@@ -535,6 +540,9 @@
 		align-items: center;
 	}
 	.copy {
+		display: inline-flex;
+		align-items: center;
+		gap: 5px;
 		font-family: var(--font-mono);
 		font-weight: 600;
 		font-size: 10px;
@@ -554,6 +562,14 @@
 		background: transparent;
 		color: var(--bg);
 	}
+	/* The dot, not the inverted fill, is what separates "following" from a mere hover. */
+	.dot {
+		flex: none;
+		width: 6px;
+		height: 6px;
+		border-radius: 50%;
+		background: var(--attn-done);
+	}
 	.copy:disabled {
 		opacity: 0.5;
 		cursor: not-allowed;
@@ -568,6 +584,8 @@
 		height: calc(100vh - 320px);
 		min-height: 360px;
 		overflow: auto;
+		/* Scroll anchoring would shift scrollTop as the <pre> grows; a paused log must stay put. */
+		overflow-anchor: none;
 	}
 	.logs pre {
 		margin: 0;