codebay 0.0.1 → 0.2.1

package/src/components/AppShell.svelte

@@ -0,0 +1,302 @@
+<script lang="ts">
+	import { ideUrl, type Instance, type Preflight } from '../types.ts';
+	import { SvelteSet } from 'svelte/reactivity';
+	import DashboardView from './DashboardView.svelte';
+	import IdeBar from './IdeBar.svelte';
+	import IdeLoader from './IdeLoader.svelte';
+	import { playChime, unlockAudio } from '../sound.ts';
+	import { liveStream } from '../live.ts';
+	import { apiPost } from '../api.ts';
+	import toast, { Toaster } from 'svelte-french-toast';
+
+	// `snapshot` seeds the live state so neither view renders a loading flash first.
+	let {
+		preflight,
+		initialPath,
+		snapshot
+	}: { preflight: Preflight; initialPath: string; snapshot: Instance[] } = $props();
+
+	// Seeding from the SSR snapshot is intentional — the live stream overwrites it.
+	// svelte-ignore state_referenced_locally
+	let instances = $state<Instance[]>(snapshot);
+	// Auth is preserved across stream updates because it's only ever probed at SSR.
+	// svelte-ignore state_referenced_locally
+	let livePreflight = $state<Preflight>(preflight);
+	// svelte-ignore state_referenced_locally
+	let loaded = $state(snapshot.length > 0);
+	const running = $derived(instances.filter((i) => i.status === 'running'));
+
+	let attention = $state<Record<string, 'done' | 'waiting' | null>>(
+		Object.fromEntries(snapshot.map((i) => [i.id, i.attention]))
+	);
+
+	let editingId = $state<string | null>(null);
+	let editingName = $state('');
+
+	function startRename(instance: Instance) {
+		editingId = instance.id;
+		editingName = instance.name;
+	}
+
+	function cancelRename() {
+		editingId = null;
+		editingName = '';
+	}
+
+	async function commitRename(id: string) {
+		const name = editingName.trim();
+		const original = instances.find((i) => i.id === id)?.name;
+		// Nothing to do on an empty or unchanged name — just close the editor.
+		if (!name || name === original) {
+			cancelRename();
+			return;
+		}
+		cancelRename();
+		try {
+			await apiPost(`/api/instances/${id}/rename`, { name }, 'Failed to rename');
+			// The live stream reflects the new name.
+		} catch (err) {
+			toast.error((err as Error).message);
+		}
+	}
+
+	// Mochi has no client router, and a document reload would tear down the code-server iframes.
+	// svelte-ignore state_referenced_locally
+	let path = $state(initialPath);
+	const onIde = $derived(path.startsWith('/ide'));
+	const requestedId = $derived(path.startsWith('/ide/') ? path.slice('/ide/'.length) : '');
+	// Falls back to the first running instance, for arriving at one that has since stopped.
+	const active = $derived(
+		onIde ? (running.some((i) => i.id === requestedId) ? requestedId : (running[0]?.id ?? '')) : ''
+	);
+
+	function navigate(to: string) {
+		if (to === path) return;
+		history.pushState({}, '', to);
+		path = to;
+	}
+
+	// Modifier clicks, new-tab targets, and other routes must fall through to a full navigation.
+	$effect(() => {
+		function onClick(e: MouseEvent) {
+			if (e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey)
+				return;
+			const anchor = (e.target as Element | null)?.closest?.('a');
+			if (!anchor) return;
+			const href = anchor.getAttribute('href');
+			if (!href || anchor.target === '_blank' || anchor.hasAttribute('download')) return;
+			const url = new URL(href, location.href);
+			if (url.origin !== location.origin) return;
+			if (url.pathname === '/' || url.pathname.startsWith('/ide/')) {
+				e.preventDefault();
+				navigate(url.pathname);
+			}
+		}
+		document.addEventListener('click', onClick);
+		return () => document.removeEventListener('click', onClick);
+	});
+
+	$effect(() => {
+		function onPop() {
+			path = location.pathname;
+		}
+		window.addEventListener('popstate', onPop);
+		return () => window.removeEventListener('popstate', onPop);
+	});
+
+	// Mounted lazily, then kept mounted (hidden via CSS) so the editor survives tab switches.
+	const visited = new SvelteSet<string>();
+	$effect(() => {
+		if (active) visited.add(active);
+	});
+
+	// Until `load` fires, a loader overlays the pane so a fresh IDE isn't blank white.
+	const loadedFrames = new SvelteSet<string>();
+
+	// `running` only means the container is up; mounting before code-server binds its
+	// port renders the proxy's 503. Sticky, so a later probe blip can't tear down a live editor.
+	const everReady = new SvelteSet<string>();
+
+	// Kept separate from `everReady` so that stays an honest record of what the probe reported.
+	const forced = new SvelteSet<string>();
+	const mountable = (id: string) => everReady.has(id) || forced.has(id);
+
+	const STALLED_AFTER_MS = 10_000;
+
+	$effect(() => {
+		const inst = running.find((i) => i.id === active);
+		document.title = onIde && inst ? `${inst.name} — Codebay` : 'Codebay';
+	});
+
+	// Browsers block audio until the page has been interacted with.
+	$effect(() => {
+		window.addEventListener('pointerdown', unlockAudio);
+		window.addEventListener('keydown', unlockAudio);
+		return () => {
+			window.removeEventListener('pointerdown', unlockAudio);
+			window.removeEventListener('keydown', unlockAudio);
+		};
+	});
+
+	$effect(() => {
+		// The re-seed after a reconnect is a baseline, not a change — otherwise it replays chimes.
+		let primed = false;
+		return liveStream(
+			(msg) => {
+				if (msg.type === 'preflight') {
+					livePreflight = { ...livePreflight, docker: msg.data.docker, cli: msg.data.cli };
+					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.
+					const inst = instances.find((i) => i.id === msg.data.id);
+					if (msg.data.health.codeServerAccessible && inst?.status === 'running')
+						everReady.add(msg.data.id);
+					return;
+				}
+				if (msg.type !== 'instances') return;
+				const next = msg.data;
+				// Re-arm the gate: a replaced container must prove code-server is up again.
+				const live = new Set(next.filter((i) => i.status === 'running').map((i) => i.id));
+				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);
+				const nextAttention: Record<string, 'done' | 'waiting' | null> = {};
+				for (const inst of next) nextAttention[inst.id] = inst.attention;
+				if (primed) {
+					for (const id in nextAttention) {
+						const state = nextAttention[id];
+						if (state && state !== attention[id]) {
+							if (id === active) {
+								console.log(
+									`[chime] attention id=${id} state=${state} — skipped (tab is active/focused)`
+								);
+							} else {
+								console.log(`[chime] attention id=${id} state=${state} → playChime`);
+								playChime(state);
+							}
+						}
+					}
+				} else {
+					console.log('[chime] first frame after (re)connect — baselining, no chimes');
+				}
+				primed = true;
+				instances = next;
+				attention = nextAttention;
+				loaded = true;
+			},
+			() => {
+				primed = false;
+			}
+		);
+	});
+
+	// Gated on document visibility, or a background browser tab would wipe the
+	// signal out from under the dashboard card.
+	$effect(() => {
+		if (!active || !attention[active]) return;
+		const dismiss = () => {
+			if (document.visibilityState === 'visible') {
+				void apiPost(`/api/instances/${active}/attention/clear`).catch(() => {
+					/* best-effort — the next visibility change retries */
+				});
+			}
+		};
+		dismiss();
+		document.addEventListener('visibilitychange', dismiss);
+		return () => document.removeEventListener('visibilitychange', dismiss);
+	});
+</script>
+
+<div class="app" class:ide={onIde}>
+	{#if onIde}
+		<IdeBar
+			{running}
+			{active}
+			{attention}
+			{editingId}
+			bind:editingName
+			onselect={(id) => navigate(`/ide/${id}`)}
+			onstartrename={startRename}
+			oncommitrename={commitRename}
+			oncancelrename={cancelRename}
+		/>
+	{:else}
+		<DashboardView preflight={livePreflight} {instances} {loaded} />
+	{/if}
+
+	<!-- Always mounted, only hidden, so the iframes survive navigation. -->
+	<div class="panes" class:hidden={!onIde}>
+		{#each running as inst (inst.id)}
+			{#if visited.has(inst.id)}
+				<div class="pane" class:active={inst.id === active}>
+					{#if mountable(inst.id)}
+						<iframe src={ideUrl(inst)} title={inst.name} onload={() => loadedFrames.add(inst.id)}
+						></iframe>
+					{/if}
+					<!-- Two distinct waits: the health probe is unbounded and gets the override,
+					     the iframe's own `load` is bounded and gets a plain loader. -->
+					{#if !mountable(inst.id)}
+						<IdeLoader stalledAfterMs={STALLED_AFTER_MS} onoverride={() => forced.add(inst.id)} />
+					{:else if !loadedFrames.has(inst.id)}
+						<IdeLoader />
+					{/if}
+				</div>
+			{/if}
+		{/each}
+		{#if onIde && running.length === 0}
+			<div class="empty">No running instances.</div>
+		{/if}
+	</div>
+</div>
+
+<!-- Hoisted out of DashboardView so IDE-route toasts have somewhere to render too. -->
+<Toaster
+	toastOptions={{
+		style:
+			'border:1px solid var(--ink); background:var(--bg-card); color:var(--ink); box-shadow:4px 4px 0 var(--ink); font-family:var(--font-mono); font-size:13px;'
+	}}
+/>
+
+<style>
+	/* The IDE route fills the viewport; the dashboard stays in normal scrolling flow. */
+	.app.ide {
+		display: flex;
+		flex-direction: column;
+		height: 100vh;
+	}
+	.panes {
+		position: relative;
+		flex: 1;
+		min-height: 0;
+	}
+	.panes.hidden {
+		display: none;
+	}
+	.pane {
+		position: absolute;
+		inset: 0;
+	}
+	.pane:not(.active) {
+		display: none;
+	}
+	iframe {
+		width: 100%;
+		height: 100%;
+		border: 0;
+		display: block;
+	}
+	.empty {
+		position: absolute;
+		inset: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		color: var(--ink-faint);
+		font-family: var(--font-mono);
+		text-transform: uppercase;
+		letter-spacing: 0.06em;
+		font-size: 13px;
+	}
+</style>

package/src/components/Avatar.svelte

@@ -0,0 +1,235 @@
+<script lang="ts">
+	import { pickAvatar, decode, type AvatarArt } from '../avatars/index.ts';
+
+	// `scale` is device-pixels per LED cell; the panel is always an integer multiple
+	// of it (10 × scale px) so every pixel lands on a crisp boundary.
+	let {
+		id = '',
+		name,
+		scale = 6,
+		art,
+		interactive = false
+	}: {
+		id?: string;
+		name: string;
+		scale?: number;
+		art?: AvatarArt;
+		interactive?: boolean;
+	} = $props();
+
+	// The "LCD pressure" gag: pressing the panel squishes it like a real LCD.
+	let pressed = $state(false);
+	let ghosting = $state(false);
+	let bx = $state('50%');
+	let by = $state('50%');
+	// Driven by press position so the sheen shifts as you drag; a CSS transition eases the trail.
+	let spin = $state(0);
+	let hue = $state(0);
+	let ghostTimer: ReturnType<typeof setTimeout> | undefined;
+
+	// Deriving the palette from position is what makes every pixel read a bit different.
+	function aim(e: PointerEvent) {
+		const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+		const px = (e.clientX - rect.left) / rect.width;
+		const py = (e.clientY - rect.top) / rect.height;
+		bx = px * 100 + '%';
+		by = py * 100 + '%';
+		// Non-linear mix of x and y so dragging sweeps the palette in interesting ways.
+		hue = (px * 360 + py * 140) % 360;
+		spin = (py * 300 - px * 120 + 360) % 360;
+	}
+
+	function onpointerdown(e: PointerEvent) {
+		if (!interactive) return;
+		(e.currentTarget as HTMLElement).setPointerCapture?.(e.pointerId);
+		aim(e);
+		clearTimeout(ghostTimer);
+		ghosting = false;
+		pressed = true;
+	}
+
+	function onpointermove(e: PointerEvent) {
+		if (pressed) aim(e);
+	}
+
+	function release() {
+		if (!pressed) return;
+		pressed = false;
+		ghosting = true;
+		clearTimeout(ghostTimer);
+		ghostTimer = setTimeout(() => (ghosting = false), 250);
+	}
+
+	$effect(() => () => clearTimeout(ghostTimer));
+
+	// Clamp to a whole number ≥ 1 — fractional scales would blur the grid.
+	const s = $derived(Math.max(1, Math.round(scale)));
+	// 0.5px is a crisp single device-pixel at 2×; at 1× the cells can't spare any gutter.
+	const gap = $derived(s >= 2 ? 0.5 : 0);
+
+	const cells = $derived(decode(art ?? pickAvatar(id)));
+	// The 10×10 outer ring is unlit LED cells — a bezel of real dots, not blank padding.
+	const grid = $derived(
+		Array.from({ length: 100 }, (_, i) => {
+			const r = Math.floor(i / 10);
+			const c = i % 10;
+			const inner = r >= 1 && r <= 8 && c >= 1 && c <= 8;
+			return inner ? cells[(r - 1) * 8 + (c - 1)] : 0;
+		})
+	);
+</script>
+
+<span
+	class="avatar"
+	class:interactive
+	class:pressed
+	class:ghosting
+	role="img"
+	aria-label={name}
+	title={name}
+	style="width:{10 * s}px;height:{10 *
+		s}px;--gap:{gap}px;--bx:{bx};--by:{by};--spin:{spin}deg;--hue:{hue}deg"
+	{onpointerdown}
+	{onpointermove}
+	onpointerup={release}
+	onpointercancel={release}
+	onlostpointercapture={release}
+>
+	{#each grid as cell, i (i)}
+		<span class="px" class:on={cell === 1}></span>
+	{/each}
+	{#if interactive}
+		<span class="invert" aria-hidden="true"></span>
+		<span class="bloom" aria-hidden="true"></span>
+	{/if}
+</span>
+
+<style>
+	/* Sized to an exact 10×scale so each cell is a whole number of device-pixels.
+	   The LED gap is a per-cell gutter, which keeps that integer cell size intact. */
+	.avatar {
+		display: grid;
+		grid-template-columns: repeat(10, 1fr);
+		grid-template-rows: repeat(10, 1fr);
+		flex: none;
+		border: 1px solid var(--ink);
+		background: var(--bg);
+	}
+	.px {
+		box-sizing: border-box;
+		padding: 0 var(--gap) var(--gap) 0;
+		background-clip: content-box;
+		background-color: var(--rule-soft); /* unlit LED — faint */
+	}
+	.px.on {
+		background-color: var(--ink);
+	}
+
+	/* Registered as <angle> because plain custom properties don't interpolate. */
+	@property --hue {
+		syntax: '<angle>';
+		inherits: false;
+		initial-value: 0deg;
+	}
+	@property --spin {
+		syntax: '<angle>';
+		inherits: false;
+		initial-value: 0deg;
+	}
+	.avatar.interactive {
+		position: relative;
+		cursor: pointer;
+		touch-action: none; /* a touch-press shouldn't scroll the page */
+	}
+	/* A white `difference` layer inverts what's behind it; the radial mask is what
+	   confines the inversion to a disc around the press point. */
+	.invert {
+		position: absolute;
+		inset: 0;
+		pointer-events: none;
+		opacity: 0;
+		background: #fff;
+		mix-blend-mode: difference;
+		-webkit-mask: radial-gradient(
+			circle at var(--bx) var(--by),
+			rgba(0, 0, 0, 1) 0%,
+			rgba(0, 0, 0, 0.92) 24%,
+			rgba(0, 0, 0, 0) 58%
+		);
+		mask: radial-gradient(
+			circle at var(--bx) var(--by),
+			rgba(0, 0, 0, 1) 0%,
+			rgba(0, 0, 0, 0.92) 24%,
+			rgba(0, 0, 0, 0) 58%
+		);
+	}
+	.avatar.pressed .invert {
+		opacity: 1;
+	}
+	.avatar.ghosting .invert {
+		opacity: 0;
+		transition: opacity 250ms ease-out;
+	}
+
+	/* The squished-crystal splotch, centered on --bx/--by over the inverted pixels. */
+	.bloom {
+		position: absolute;
+		inset: 0;
+		pointer-events: none;
+		opacity: 0;
+		mix-blend-mode: screen;
+		/* Palette derived from press position; ease between states for a liquid trail. */
+		filter: hue-rotate(var(--hue, 0deg));
+		transition:
+			--hue 350ms ease-out,
+			--spin 350ms ease-out;
+		background:
+			conic-gradient(
+				from var(--spin, 0deg) at var(--bx) var(--by),
+				#ff0080,
+				#ffae00,
+				#00ff6a,
+				#00b3ff,
+				#7a00ff,
+				#ff0080
+			),
+			radial-gradient(
+				circle at var(--bx) var(--by),
+				rgba(13, 14, 10, 0.85) 0%,
+				rgba(13, 14, 10, 0.4) 18%,
+				transparent 45%
+			);
+		/* Mask the rainbow conic into a ring around the press point. */
+		-webkit-mask: radial-gradient(
+			circle at var(--bx) var(--by),
+			transparent 8%,
+			#000 26%,
+			#000 38%,
+			transparent 60%
+		);
+		mask: radial-gradient(
+			circle at var(--bx) var(--by),
+			transparent 8%,
+			#000 26%,
+			#000 38%,
+			transparent 60%
+		);
+	}
+	.avatar.pressed .bloom {
+		opacity: 0.45;
+	}
+	.avatar.ghosting .bloom {
+		opacity: 0;
+		transition: opacity 250ms ease-out;
+	}
+
+	@media (prefers-reduced-motion: no-preference) {
+		.avatar.interactive {
+			transition: transform 250ms ease-out;
+		}
+		.avatar.pressed {
+			transform: scale(0.97);
+			transition: transform 60ms ease-out;
+		}
+	}
+</style>