codebay 0.5.0 → 0.7.0

package/src/avatars/strawberry.ts

@@ -0,0 +1,17 @@
+import type { AvatarArt } from './types.ts';
+
+const art: AvatarArt = {
+	name: 'strawberry',
+	pixels: [
+		'...#....',
+		'..#...#.',
+		'..#..#.#',
+		'.###..#.',
+		'#####...',
+		'#####...',
+		'.###....',
+		'..#.....'
+	]
+};
+
+export default art;

package/src/avatars/target.ts

@@ -2,6 +2,7 @@ import type { AvatarArt } from './types.ts';
 
 const art: AvatarArt = {
 	name: 'target',
+	robot: true,
 	pixels: [
 		'..####..',
 		'.#....#.',

package/src/avatars/tree.ts

@@ -2,6 +2,7 @@ import type { AvatarArt } from './types.ts';
 
 const art: AvatarArt = {
 	name: 'tree',
+	robot: true,
 	pixels: [
 		'...##...',
 		'..####..',

package/src/avatars/types.ts

@@ -1,14 +1,17 @@
 // The string legend keeps the art human-editable — you can eyeball a creature in the source.
 //
-//   '#'        → on  (lit pixel)
-//   ' ' or '.' → off (unlit pixel)
+//   '#'        → on   (lit pixel)
+//   '+'        → gray (half-lit pixel)
+//   ' ' or '.' → off  (unlit pixel)
 export type AvatarArt = {
 	name: string; // also the uniqueness key
 	pixels: string[];
+	robot?: boolean; // true for the original AI-generated sprites, slated to be redrawn by hand
 };
 
 export const OFF = 0;
 export const ON = 1;
+export const GRAY = 2;
 
 export const ROWS = 8;
 export const COLS = 8;
@@ -17,7 +20,7 @@ export function decode(art: AvatarArt): number[] {
 	const cells: number[] = [];
 	for (const row of art.pixels) {
 		for (const ch of row) {
-			cells.push(ch === '#' ? ON : OFF);
+			cells.push(ch === '#' ? ON : ch === '+' ? GRAY : OFF);
 		}
 	}
 	return cells;

package/src/avatars/vangogh-almond-blossoms.ts

@@ -0,0 +1,17 @@
+import type { AvatarArt } from './types.ts';
+
+const art: AvatarArt = {
+	name: 'vangogh-almond-blossoms',
+	pixels: [
+		'....#.#.',
+		'.....#..',
+		'####....',
+		'#...#..#',
+		'.#...##.',
+		'..#....#',
+		'.#.#....',
+		'..#.....'
+	]
+};
+
+export default art;

package/src/avatars/wasp.ts

@@ -0,0 +1,17 @@
+import type { AvatarArt } from './types.ts';
+
+const art: AvatarArt = {
+	name: 'wasp',
+	pixels: [
+		'.....##.',
+		'.##.###.',
+		'.###....',
+		'..#.#...',
+		'.#.#.#..',
+		'##..##..',
+		'##......',
+		'........'
+	]
+};
+
+export default art;

package/src/avatars/whale.ts

@@ -2,6 +2,7 @@ import type { AvatarArt } from './types.ts';
 
 const art: AvatarArt = {
 	name: 'whale',
+	robot: true,
 	pixels: [
 		'....#...',
 		'...###..',

package/src/avatars/windmill.ts

@@ -0,0 +1,17 @@
+import type { AvatarArt } from './types.ts';
+
+const art: AvatarArt = {
+	name: 'windmill',
+	pixels: [
+		'........',
+		'.#...#..',
+		'..#.#...',
+		'...#....',
+		'..#.#...',
+		'.#.#.#..',
+		'..###...',
+		'..###...'
+	]
+};
+
+export default art;

package/src/components/AppShell.svelte

@@ -114,6 +114,19 @@
 		return () => window.removeEventListener('popstate', onPop);
 	});
 
+	// Native unsaved-changes guard: a reload/close/external-nav tears down the code-server
+	// iframes and loses in-editor state. In-app /↔/ide transitions are pushState (no unload)
+	// and Settings/Details links open in new tabs, so this only fires on a true teardown.
+	$effect(() => {
+		if (running.length === 0) return;
+		function onBeforeUnload(e: BeforeUnloadEvent) {
+			e.preventDefault();
+			e.returnValue = '';
+		}
+		window.addEventListener('beforeunload', onBeforeUnload);
+		return () => window.removeEventListener('beforeunload', onBeforeUnload);
+	});
+
 	// Mounted lazily, then kept mounted (hidden via CSS) so the editor survives tab switches.
 	const visited = new SvelteSet<string>();
 	$effect(() => {

package/src/components/Avatar.svelte

@@ -96,7 +96,7 @@
 	onlostpointercapture={release}
 >
 	{#each grid as cell, i (i)}
-		<span class="px" class:on={cell === 1}></span>
+		<span class="px" class:on={cell === 1} class:gray={cell === 2}></span>
 	{/each}
 	{#if interactive}
 		<span class="invert" aria-hidden="true"></span>
@@ -121,6 +121,9 @@
 		background-clip: content-box;
 		background-color: var(--rule-soft); /* unlit LED — faint */
 	}
+	.px.gray {
+		background-color: var(--led-gray); /* half-lit LED */
+	}
 	.px.on {
 		background-color: var(--ink);
 	}

package/src/components/AvatarEditor.svelte

@@ -4,7 +4,8 @@
 	import Contrast from '@lucide/svelte/icons/contrast';
 	import ExternalLink from '@lucide/svelte/icons/external-link';
 	import toast from 'svelte-french-toast';
-	import { ROWS, COLS, ON, OFF, type AvatarArt } from '../avatars/types.ts';
+	import { ROWS, COLS, ON, OFF, GRAY, type AvatarArt } from '../avatars/types.ts';
+	import { MODES, nextValue, type Mode } from '../avatars/editor.ts';
 	import {
 		cellsToPixels,
 		normalizeName,
@@ -24,7 +25,26 @@
 	const slug = $derived(normalizeName(avatarName));
 	const art = $derived<AvatarArt>({ name: slug || 'my-avatar', pixels: cellsToPixels(cells) });
 	// Contributing needs a name and at least one lit pixel — a blank sprite is no sprite.
-	const canContribute = $derived(slug.length > 0 && cells.some((c) => c === ON));
+	const canContribute = $derived(slug.length > 0 && cells.some((c) => c !== OFF));
+
+	// Cycle is the default so both shades are reachable without switching mode.
+	let mode = $state<Mode>('cycle');
+	let modeButtons = $state<HTMLButtonElement[]>([]);
+
+	// Roving-tabindex arrow navigation, as a radiogroup is expected to behave.
+	function onModeKeydown(e: KeyboardEvent, i: number) {
+		const dir =
+			e.key === 'ArrowRight' || e.key === 'ArrowDown'
+				? 1
+				: e.key === 'ArrowLeft' || e.key === 'ArrowUp'
+					? -1
+					: 0;
+		if (dir === 0) return;
+		e.preventDefault();
+		const next = (i + dir + MODES.length) % MODES.length;
+		mode = MODES[next]!.id;
+		modeButtons[next]?.focus();
+	}
 
 	// Capturing the pointer on the grid is what lets one stroke paint every cell it crosses.
 	let gridEl = $state<HTMLDivElement | null>(null);
@@ -51,7 +71,7 @@
 		if (i == null) return;
 		(e.currentTarget as HTMLElement).setPointerCapture?.(e.pointerId);
 		painting = true;
-		paintValue = cells[i] === ON ? OFF : ON;
+		paintValue = nextValue(mode, cells[i]!);
 		cells[i] = paintValue;
 	}
 
@@ -69,8 +89,9 @@
 		cells = Array(ROWS * COLS).fill(OFF);
 	}
 
+	// Only swaps off↔on; gray sits in the middle and is left untouched.
 	function invert() {
-		cells = cells.map((c) => (c === ON ? OFF : ON));
+		cells = cells.map((c) => (c === ON ? OFF : c === OFF ? ON : c));
 	}
 
 	async function copyModule() {
@@ -106,7 +127,7 @@
 				onlostpointercapture={stopPainting}
 			>
 				{#each cells as cell, i (i)}
-					<span class="cell" class:on={cell === ON}></span>
+					<span class="cell" class:on={cell === ON} class:gray={cell === GRAY}></span>
 				{/each}
 			</div>
 		</div>
@@ -134,6 +155,27 @@
 				/>
 			</label>
 
+			<div class="mode-field">
+				<span class="preview-label">Mode</span>
+				<div class="modes" role="radiogroup" aria-label="Drawing mode">
+					{#each MODES as m, i (m.id)}
+						<button
+							type="button"
+							class="mode"
+							class:active={mode === m.id}
+							role="radio"
+							aria-checked={mode === m.id}
+							tabindex={mode === m.id ? 0 : -1}
+							bind:this={modeButtons[i]}
+							onclick={() => (mode = m.id)}
+							onkeydown={(e) => onModeKeydown(e, i)}
+						>
+							{m.label}
+						</button>
+					{/each}
+				</div>
+			</div>
+
 			<div class="tools">
 				<Button size="sm" icon={Eraser} onclick={clear}>Clear</Button>
 				<Button size="sm" icon={Contrast} onclick={invert}>Invert</Button>
@@ -224,6 +266,9 @@
 		background-clip: content-box;
 		background-color: var(--rule-soft); /* unlit LED — faint */
 	}
+	.cell.gray {
+		background-color: var(--led-gray); /* half-lit LED */
+	}
 	.cell.on {
 		background-color: var(--ink);
 	}
@@ -267,6 +312,39 @@
 		outline: none;
 		box-shadow: inset 3px 3px 0 var(--rule-soft);
 	}
+	.mode-field {
+		display: flex;
+		flex-direction: column;
+		gap: 6px;
+	}
+	.modes {
+		display: flex;
+		border: 1px solid var(--ink);
+	}
+	.mode {
+		flex: 1;
+		padding: 7px 6px;
+		border: none;
+		border-right: 1px solid var(--ink);
+		background: var(--bg);
+		color: var(--ink);
+		font-family: var(--font-mono);
+		font-size: 11px;
+		text-transform: uppercase;
+		letter-spacing: 0.06em;
+		cursor: pointer;
+	}
+	.mode:last-child {
+		border-right: none;
+	}
+	.mode.active {
+		background: var(--ink);
+		color: var(--bg);
+	}
+	.mode:focus-visible {
+		outline: none;
+		box-shadow: inset 0 0 0 2px var(--rule-soft);
+	}
 	.tools {
 		display: flex;
 		gap: 8px;

package/src/components/AvatarsView.svelte

@@ -3,6 +3,7 @@
 	import AppBar from './AppBar.svelte';
 	import Avatar from './Avatar.svelte';
 	import AvatarEditor from './AvatarEditor.svelte';
+	import Bot from '@lucide/svelte/icons/bot';
 	import { avatars } from '../avatars/index.ts';
 
 	let { namePlaceholder }: { namePlaceholder: string } = $props();
@@ -25,7 +26,12 @@
 				{#each avatars as art (art.name)}
 					<li>
 						<Avatar {art} name={art.name} scale={8} interactive />
-						<span class="label">{art.name}</span>
+						<span class="label">
+							{#if art.robot}
+								<span class="robot-mark" title="AI-generated"><Bot size={11} /></span>
+							{/if}
+							{art.name}
+						</span>
 					</li>
 				{/each}
 			</ul>
@@ -106,10 +112,17 @@
 		gap: 8px;
 	}
 	.label {
+		display: inline-flex;
+		align-items: center;
+		gap: 4px;
 		font-family: var(--font-mono);
 		font-size: 11px;
 		text-transform: uppercase;
 		letter-spacing: 0.08em;
 		color: var(--ink-soft);
 	}
+	.robot-mark {
+		display: inline-flex;
+		color: var(--ink-faint);
+	}
 </style>

package/src/components/DashboardView.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { type Instance, type Preflight } from '../types.ts';
+	import { type Instance, type InstanceFilter, type Preflight } from '../types.ts';
 	import type { AvatarArt } from '../avatars/index.ts';
 	import FolderBrowser from './FolderBrowser.svelte';
 	import InstanceCard from './InstanceCard.svelte';
@@ -16,14 +16,41 @@
 		pet
 	}: { preflight: Preflight; instances: Instance[]; loaded: boolean; pet?: AvatarArt } = $props();
 
+	type Action = 'start' | 'stop' | 'delete' | 'rebuild';
+
 	let browserOpen = $state(false);
+	let filter = $state<InstanceFilter>('all');
 	let creating = $state(false);
 	let actionError = $state<string | null>(null);
 	let editingId = $state<string | null>(null);
 	let editingName = $state('');
+	// Per-instance in-flight action + the status it started from, so the busy overlay clears
+	// only once the live stream reports the resulting change (avoids flicker on the round-trip).
+	let pending = $state<Record<string, { action: Action; since: Instance['status'] }>>({});
 
 	const ready = $derived(preflight.docker && preflight.cli);
 
+	const visible = $derived(
+		instances.filter((i) => {
+			if (filter === 'active') return i.status === 'running' || i.status === 'creating';
+			if (filter === 'stopped') return i.status === 'stopped' || i.status === 'error';
+			return true;
+		})
+	);
+
+	// Drop a pending entry once its instance is gone (deleted) or its status has moved on.
+	$effect(() => {
+		for (const [id, { since }] of Object.entries(pending)) {
+			const instance = instances.find((i) => i.id === id);
+			if (!instance || instance.status !== since) clearPending(id);
+		}
+	});
+
+	function clearPending(id: string) {
+		const { [id]: _, ...rest } = pending;
+		pending = rest;
+	}
+
 	async function createFrom(sourcePath: string, opts?: { branch?: string }) {
 		browserOpen = false;
 		creating = true;
@@ -42,7 +69,7 @@
 		}
 	}
 
-	async function act(id: string, action: 'start' | 'stop' | 'delete' | 'rebuild') {
+	async function act(id: string, action: Action) {
 		actionError = null;
 		if (action === 'delete' && !confirm('Delete this instance and its copied files?')) return;
 		// Rebuild discards the container; the workspace copy lives on the host and survives.
@@ -51,11 +78,14 @@
 			!confirm('Recreate this container and re-run setup? The workspace is kept.')
 		)
 			return;
+		const since = instances.find((i) => i.id === id)?.status;
+		if (since) pending = { ...pending, [id]: { action, since } };
 		try {
 			await apiPost(`/api/instances/${id}/${action}`, undefined, `Failed to ${action}`);
-			// The live stream reflects the resulting state.
+			// The live stream reflects the resulting state; the $effect clears the busy overlay.
 		} catch (err) {
 			actionError = (err as Error).message;
+			clearPending(id);
 		}
 	}
 
@@ -105,6 +135,8 @@
 	canDelete={instances.length > 0}
 	{ready}
 	{creating}
+	{filter}
+	onFilter={(v) => (filter = v)}
 	onNew={() => (browserOpen = true)}
 	onDeleteAll={deleteAll}
 />
@@ -132,12 +164,15 @@
 				New instance
 			</Button>
 		</div>
+	{:else if visible.length === 0}
+		<div class="empty"><p class="empty-sub">No {filter} instances.</p></div>
 	{:else}
 		<ul class="grid">
-			{#each instances as instance (instance.id)}
+			{#each visible as instance (instance.id)}
 				<InstanceCard
 					{instance}
 					editing={editingId === instance.id}
+					pending={pending[instance.id]?.action ?? null}
 					bind:editingName
 					onact={(action) => act(instance.id, action)}
 					onstartrename={() => startRename(instance)}

package/src/components/InstanceCard.svelte

@@ -7,10 +7,13 @@
 	import Button from './Button.svelte';
 	import { withPopupMarker } from '../lib/popup-nav.ts';
 
+	type Action = 'start' | 'stop' | 'delete' | 'rebuild';
+
 	let {
 		instance,
 		editing,
 		editingName = $bindable(),
+		pending = null,
 		onact,
 		onstartrename,
 		oncommitrename,
@@ -19,7 +22,9 @@
 		instance: Instance;
 		editing: boolean;
 		editingName: string;
-		onact: (action: 'start' | 'stop' | 'delete' | 'rebuild') => void;
+		/** The user-triggered action currently in flight, if any — drives the busy overlay. */
+		pending?: Action | null;
+		onact: (action: Action) => void;
 		onstartrename: () => void;
 		oncommitrename: () => void;
 		oncancelrename: () => void;
@@ -31,9 +36,21 @@
 			instance.status === 'stopped' ||
 			(instance.status === 'error' && !!instance.container_id)
 	);
+
+	const BUSY_LABEL: Record<Action, string> = {
+		start: 'Starting…',
+		stop: 'Stopping…',
+		delete: 'Deleting…',
+		rebuild: 'Rebuilding…'
+	};
 </script>
 
-<li class="card panel">
+<li class="card panel" class:busy={!!pending} aria-busy={!!pending || undefined}>
+	{#if pending}
+		<div class="busy-overlay" aria-live="polite">
+			<span class="busy-label">{BUSY_LABEL[pending]}</span>
+		</div>
+	{/if}
 	<div class="card-head">
 		<Avatar id={instance.id} name={instance.name} interactive />
 		{#if editing}
@@ -109,16 +126,50 @@
 
 <style>
 	.card {
+		position: relative;
 		background: var(--bg-card);
 		padding: 16px 16px 14px;
 		transition:
 			transform 0.08s steps(2),
 			box-shadow 0.08s steps(2);
 	}
-	.card:hover {
+	.card:hover:not(.busy) {
 		transform: translate(-1px, -1px);
 		box-shadow: 6px 6px 0 var(--ink);
 	}
+	/* Translucent scrim dims the card body and blocks clicks on the buttons beneath. */
+	.busy-overlay {
+		position: absolute;
+		inset: 0;
+		z-index: 1;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		background: color-mix(in srgb, var(--bg-card) 78%, transparent);
+	}
+	.busy-label {
+		font-family: var(--font-mono);
+		font-weight: 600;
+		font-size: 12px;
+		text-transform: uppercase;
+		letter-spacing: 0.1em;
+		padding: 4px 9px;
+		border: 1px solid var(--ink);
+		background: var(--ink);
+		color: var(--bg);
+		animation: lcd-blink 1.1s steps(1) infinite;
+	}
+	@keyframes lcd-blink {
+		50% {
+			background: transparent;
+			color: var(--ink);
+		}
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.busy-label {
+			animation: none;
+		}
+	}
 	.card-head {
 		display: flex;
 		align-items: center;
@@ -167,9 +218,7 @@
 		font-family: var(--font-mono);
 		font-weight: 600;
 		font-size: 15px;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
+		overflow-wrap: anywhere;
 		/* Reset button chrome so it reads as plain text until hovered. */
 		margin: 0;
 		padding: 2px 4px;

package/src/components/InstanceFilter.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+	import type { InstanceFilter } from '../types.ts';
+
+	let { value, onchange }: { value: InstanceFilter; onchange: (v: InstanceFilter) => void } =
+		$props();
+
+	const options: { value: InstanceFilter; label: string }[] = [
+		{ value: 'all', label: 'All' },
+		{ value: 'active', label: 'Active' },
+		{ value: 'stopped', label: 'Stopped' }
+	];
+</script>
+
+<div class="picker" role="radiogroup" aria-label="Filter instances">
+	{#each options as opt (opt.value)}
+		<button
+			type="button"
+			class="segment"
+			class:active={value === opt.value}
+			role="radio"
+			aria-checked={value === opt.value}
+			onclick={() => onchange(opt.value)}
+		>
+			{opt.label}
+		</button>
+	{/each}
+</div>
+
+<style>
+	.picker {
+		display: inline-flex;
+		flex: none;
+		border: 1px solid var(--ink);
+		background: var(--bg-card);
+	}
+	.segment {
+		display: inline-flex;
+		align-items: center;
+		gap: 6px;
+		padding: 7px 12px;
+		font-family: var(--font-mono);
+		font-weight: 600;
+		font-size: 12px;
+		text-transform: uppercase;
+		letter-spacing: 0.06em;
+		border: none;
+		background: transparent;
+		color: var(--ink);
+		cursor: pointer;
+	}
+	.segment + .segment {
+		border-left: 1px solid var(--ink);
+	}
+	.segment:hover:not(.active) {
+		background: var(--ink);
+		color: var(--bg);
+	}
+	.segment.active {
+		font-weight: 700;
+		background: var(--ink);
+		color: var(--bg);
+		cursor: default;
+	}
+	.segment:focus-visible {
+		outline: 2px solid var(--ink);
+		outline-offset: -2px;
+	}
+</style>