codebay 0.0.1 → 0.2.0

package/src/components/HealthBox.svelte

@@ -0,0 +1,161 @@
+<script lang="ts">
+	import Check from '@lucide/svelte/icons/check';
+	import X from '@lucide/svelte/icons/x';
+	import type { InstanceHealth } from '../types.ts';
+	import Skeleton from './Skeleton.svelte';
+
+	// Intrinsic to every instance, independent of any injection.
+	const FIXED_CHECKS = ['Container running', 'Code-server reachable'] as const;
+
+	let {
+		health = null,
+		lastFetchedAt = null,
+		active = true,
+		injectionChecks = 0
+	}: {
+		/** Latest health snapshot, or null while the first check is pending. */
+		health?: InstanceHealth | null;
+		/** Epoch ms of the last successful health fetch, for the "updated Ns ago" readout. */
+		lastFetchedAt?: number | null;
+		/** When false, no checks are coming — the panel grays out rather than showing a loader. */
+		active?: boolean;
+		/** Registry-derived, so the skeleton renders one row per real check. */
+		injectionChecks?: number;
+	} = $props();
+
+	// 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 }[] => {
+		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) }))
+		];
+	});
+
+	// Before the first snapshot lands, the registry-derived count keeps the skeleton honest.
+	function getNumberOfChecks(): number {
+		return health ? checks.length : FIXED_CHECKS.length + injectionChecks;
+	}
+
+	// A local clock, so the "updated Ns ago" readout counts up between polls.
+	let now = $state(Date.now());
+	$effect(() => {
+		const timer = setInterval(() => (now = Date.now()), 1000);
+		return () => clearInterval(timer);
+	});
+	const agoLabel = $derived.by(() => {
+		if (!active && !health) return 'Container not running';
+		if (!lastFetchedAt) return 'Waiting for first check…';
+		const secs = Math.max(0, Math.round((now - lastFetchedAt) / 1000));
+		return `Updated ${secs}s ago`;
+	});
+</script>
+
+<div class="healthwrap panel" class:dim={!active && !health}>
+	<div class="panel-bar">Health</div>
+	<div class="health">
+		{#if health}
+			{#each checks as check (check.label)}
+				<div class="hrow">
+					<span class="box {check.ok ? 'ok' : 'bad'}">
+						{#if check.ok}<Check size={12} strokeWidth={3} />{:else}<X
+								size={12}
+								strokeWidth={3}
+							/>{/if}
+					</span>
+					<span class="hlabel">{check.label}</span>
+					<span class="hvalue">{check.value}</span>
+				</div>
+			{/each}
+		{:else if active}
+			{#each Array(getNumberOfChecks()) as _, i (i)}
+				<div class="hrow">
+					<span class="box idle"></span>
+					<Skeleton width="120px" />
+					<Skeleton variant="pill" />
+				</div>
+			{/each}
+		{:else}
+			{#each FIXED_CHECKS as label (label)}
+				<div class="hrow">
+					<span class="box idle"></span>
+					<span class="hlabel">{label}</span>
+					<span class="hvalue">—</span>
+				</div>
+			{/each}
+		{/if}
+	</div>
+	<div class="hfoot">{agoLabel}</div>
+</div>
+
+<style>
+	.healthwrap {
+		overflow: hidden;
+	}
+	/* Container isn't running yet: gray the panel out instead of loading it. */
+	.healthwrap.dim {
+		opacity: 0.5;
+	}
+	.health {
+		background: var(--bg-card);
+		display: grid;
+		grid-template-columns: max-content 1fr max-content;
+		align-items: center;
+	}
+	.hrow {
+		display: grid;
+		grid-template-columns: subgrid;
+		grid-column: 1 / -1;
+		align-items: center;
+		gap: 12px;
+		padding: 10px 14px;
+		border-top: 1px solid var(--rule-soft);
+	}
+	.hrow:first-child {
+		border-top: none;
+	}
+	/* Pass = filled checkbox with a tick; fail = hollow box with a cross. */
+	.box {
+		width: 16px;
+		height: 16px;
+		border: 1px solid var(--ink);
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		color: var(--ink);
+	}
+	.box.ok {
+		background: var(--ink);
+		color: var(--bg);
+	}
+	.box.bad {
+		background: transparent;
+	}
+	.box.idle {
+		border-color: var(--ink-faint);
+	}
+	.hlabel {
+		font-family: var(--font-mono);
+		font-size: 13px;
+		color: var(--ink-soft);
+	}
+	.hvalue {
+		font-family: var(--font-display);
+		font-weight: 700;
+		font-size: 11px;
+		letter-spacing: 0.1em;
+		text-transform: uppercase;
+		color: var(--ink);
+		justify-self: end;
+	}
+	.hfoot {
+		padding: 7px 14px;
+		border-top: 1px solid var(--rule-soft);
+		background: var(--bg);
+		font-family: var(--font-mono);
+		font-size: 11px;
+		color: var(--ink-faint);
+	}
+</style>

package/src/components/IdeBar.svelte

@@ -0,0 +1,186 @@
+<script lang="ts">
+	import { type Instance } from '../types.ts';
+	import Settings from '@lucide/svelte/icons/settings';
+	import Avatar from './Avatar.svelte';
+	import AppBar from './AppBar.svelte';
+
+	let {
+		running,
+		active,
+		attention,
+		editingId,
+		editingName = $bindable(),
+		onselect,
+		onstartrename,
+		oncommitrename,
+		oncancelrename
+	}: {
+		running: Instance[];
+		active: string;
+		attention: Record<string, 'done' | 'waiting' | null>;
+		editingId: string | null;
+		editingName: string;
+		onselect: (id: string) => void;
+		onstartrename: (instance: Instance) => void;
+		oncommitrename: (id: string) => void;
+		oncancelrename: () => void;
+	} = $props();
+</script>
+
+<AppBar>
+	{#if running.length > 0}
+		<nav class="tabs">
+			{#each running as inst (inst.id)}
+				<div
+					class="tab"
+					class:active={inst.id === active}
+					class:attn-done={inst.id !== active && attention[inst.id] === 'done'}
+					class:attn-waiting={inst.id !== active && attention[inst.id] === 'waiting'}
+				>
+					{#if editingId === inst.id}
+						<div class="tab-label editing">
+							<Avatar id={inst.id} name={inst.name} scale={4} />
+							<!-- 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
+							type="button"
+							class="tab-label"
+							onclick={() => onselect(inst.id)}
+							ondblclick={() => onstartrename(inst)}
+							title={inst.name}
+						>
+							<Avatar id={inst.id} name={inst.name} scale={4} />
+							<span class="tab-name">{inst.name}</span>
+						</button>
+					{/if}
+				</div>
+			{/each}
+		</nav>
+	{/if}
+	<a class="cog" href="/settings" title="Settings" aria-label="Settings"><Settings size={18} /></a>
+</AppBar>
+
+<style>
+	.cog {
+		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 {
+		background: var(--ink);
+		color: var(--bg);
+	}
+	.tabs {
+		display: flex;
+		align-items: stretch;
+		overflow-x: auto;
+		min-width: 0;
+	}
+	.tab {
+		display: inline-flex;
+		align-items: stretch;
+		border-right: 1px solid var(--rule-soft);
+	}
+	.tab.active {
+		background: var(--ink);
+	}
+	/* The focused tab never gets these, so a pulsing tab always means "needs your eyes". */
+	.tab.attn-done {
+		animation: attn-pulse-green 1.8s ease-in-out infinite;
+	}
+	.tab.attn-waiting {
+		animation: attn-pulse-amber 1.8s ease-in-out infinite;
+	}
+	@keyframes attn-pulse-green {
+		0%,
+		100% {
+			background: transparent;
+			box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--attn-done) 40%, transparent);
+		}
+		50% {
+			background: color-mix(in srgb, var(--attn-done) 32%, transparent);
+			box-shadow: inset 0 -2px 0 var(--attn-done);
+		}
+	}
+	@keyframes attn-pulse-amber {
+		0%,
+		100% {
+			background: transparent;
+			box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--attn-waiting) 40%, transparent);
+		}
+		50% {
+			background: color-mix(in srgb, var(--attn-waiting) 32%, transparent);
+			box-shadow: inset 0 -2px 0 var(--attn-waiting);
+		}
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.tab.attn-done,
+		.tab.attn-waiting {
+			animation-duration: 0s;
+			background: color-mix(in srgb, var(--attn-done) 28%, transparent);
+		}
+		.tab.attn-waiting {
+			background: color-mix(in srgb, var(--attn-waiting) 28%, transparent);
+		}
+	}
+	.tab-label {
+		appearance: none;
+		background: transparent;
+		border: 0;
+		cursor: pointer;
+		color: var(--ink-soft);
+		font-family: var(--font-mono);
+		display: inline-flex;
+		align-items: center;
+		gap: 10px;
+		padding: 0 12px;
+		max-width: 240px;
+		font-size: 12px;
+		text-transform: uppercase;
+		letter-spacing: 0.06em;
+	}
+	.tab-name {
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+	.tab:not(.active) .tab-label:hover {
+		color: var(--ink);
+	}
+	.tab.active .tab-label {
+		color: var(--bg);
+	}
+	.tab-label.editing {
+		cursor: default;
+	}
+	.tab-name-edit {
+		width: 130px;
+		font-family: var(--font-mono);
+		font-size: 12px;
+		text-transform: uppercase;
+		letter-spacing: 0.06em;
+		margin: 0;
+		padding: 2px 4px;
+		border: 1px solid var(--ink-soft);
+		background: var(--bg);
+		color: var(--ink);
+		outline: none;
+	}
+</style>

package/src/components/IdeLoader.svelte

@@ -0,0 +1,135 @@
+<script lang="ts">
+	import Button from './Button.svelte';
+
+	// 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,
+		// Omit both unless the wait could in principle never end.
+		stalledAfterMs,
+		onoverride
+	}: { speed?: number; stalledAfterMs?: number; onoverride?: () => void } = $props();
+
+	let stalled = $state(false);
+	$effect(() => {
+		if (stalledAfterMs === undefined) return;
+		const timer = setTimeout(() => (stalled = true), stalledAfterMs);
+		return () => clearTimeout(timer);
+	});
+
+	const ROWS = 3;
+	const COLS = 22;
+	const BASE_TICK_MS = 140; // pace at speed = 1: slower than a flicker, calm and readable
+	const FLIPS_PER_TICK = 7; // constant churn per tick → stable cadence
+	const tickMs = $derived(Math.max(20, BASE_TICK_MS / speed));
+	const seed = () =>
+		Array.from({ length: ROWS }, () =>
+			Array.from({ length: COLS }, () => (Math.random() < 0.5 ? 0 : 1))
+		);
+
+	let grid = $state(seed());
+
+	$effect(() => {
+		// Reduced-motion gets a static readout rather than no loader at all.
+		if (window.matchMedia?.('(prefers-reduced-motion: reduce)').matches) return;
+		const timer = setInterval(() => {
+			const next = grid.map((row) => row.slice());
+			for (let i = 0; i < FLIPS_PER_TICK; i++) {
+				const row = next[Math.floor(Math.random() * ROWS)]!;
+				const c = Math.floor(Math.random() * COLS);
+				row[c] = row[c] ? 0 : 1;
+			}
+			grid = next;
+		}, tickMs);
+		return () => clearInterval(timer);
+	});
+</script>
+
+<div class="loader">
+	<div class="grid" aria-hidden="true">
+		{#each grid as row, i (i)}
+			<div class="row">{row.join('')}</div>
+		{/each}
+	</div>
+	<div class="label">
+		Loading 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>
+			{#if onoverride}
+				<Button size="sm" onclick={onoverride}>Open anyway</Button>
+			{/if}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.loader {
+		position: absolute;
+		inset: 0;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		gap: 20px;
+		background: var(--bg);
+		color: var(--ink);
+	}
+	.grid {
+		font-family: var(--font-display);
+		font-size: 30px;
+		line-height: 1.1;
+		letter-spacing: 0.22em;
+		color: var(--ink-faint);
+	}
+	.row {
+		white-space: pre;
+	}
+	.label {
+		font-family: var(--font-mono);
+		font-size: 18px;
+		text-transform: uppercase;
+		letter-spacing: 0.18em;
+		color: var(--ink-soft);
+	}
+	/* Held back until the wait looks wedged, so it reads as an explanation, not boot chrome. */
+	.stalled {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 12px;
+		max-width: 34ch;
+		text-align: center;
+	}
+	.stalled p {
+		margin: 0;
+		font-family: var(--font-mono);
+		font-size: 13px;
+		line-height: 1.5;
+		color: var(--ink-faint);
+	}
+	.dot {
+		animation: blink 1.2s ease-in-out infinite;
+	}
+	.dot:nth-child(2) {
+		animation-delay: 0.2s;
+	}
+	.dot:nth-child(3) {
+		animation-delay: 0.4s;
+	}
+	@keyframes blink {
+		0%,
+		100% {
+			opacity: 0.2;
+		}
+		50% {
+			opacity: 1;
+		}
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.dot {
+			animation: none;
+		}
+	}
+</style>

package/src/components/InstanceCard.svelte

@@ -0,0 +1,220 @@
+<script lang="ts">
+	import { type Instance } from '../types.ts';
+	import Avatar from './Avatar.svelte';
+	import BranchBox from './BranchBox.svelte';
+	import PortsBox from './PortsBox.svelte';
+	import StatusBadge from './StatusBadge.svelte';
+	import Button from './Button.svelte';
+
+	let {
+		instance,
+		editing,
+		editingName = $bindable(),
+		onact,
+		onstartrename,
+		oncommitrename,
+		oncancelrename
+	}: {
+		instance: Instance;
+		editing: boolean;
+		editingName: string;
+		onact: (action: 'start' | 'stop' | 'delete' | 'rebuild') => void;
+		onstartrename: () => void;
+		oncommitrename: () => void;
+		oncancelrename: () => void;
+	} = $props();
+
+	// Start/Stop only cycle the container; rebuild is what re-runs the injections.
+	const canRebuild = $derived(
+		instance.status === 'running' ||
+			instance.status === 'stopped' ||
+			(instance.status === 'error' && !!instance.container_id)
+	);
+</script>
+
+<li class="card panel">
+	<div class="card-head">
+		<Avatar id={instance.id} name={instance.name} interactive />
+		{#if editing}
+			<!-- svelte-ignore a11y_autofocus -->
+			<input
+				class="name-edit"
+				bind:value={editingName}
+				autofocus
+				onfocus={(e) => (e.currentTarget as HTMLInputElement).select()}
+				onblur={oncommitrename}
+				onkeydown={(e) => {
+					if (e.key === 'Enter') (e.currentTarget as HTMLInputElement).blur();
+					else if (e.key === 'Escape') oncancelrename();
+				}}
+			/>
+		{:else}
+			<button class="name" title="Click to rename" onclick={onstartrename}>{instance.name}</button>
+		{/if}
+		{#if instance.attention}
+			<span
+				class="attn"
+				class:attn-done={instance.attention === 'done'}
+				class:attn-waiting={instance.attention === 'waiting'}
+				title={instance.attention === 'waiting' ? 'Claude is waiting for input' : 'Claude finished'}
+				aria-label={instance.attention === 'waiting'
+					? 'Claude is waiting for input'
+					: 'Claude finished'}
+			></span>
+		{/if}
+		<StatusBadge status={instance.status} />
+	</div>
+	<div class="path" title={instance.source_path}>{instance.source_path}</div>
+	{#if instance.status === 'running'}
+		<PortsBox ports={instance.forwarded_ports} />
+	{/if}
+	{#if instance.git_branch}
+		<BranchBox branch={instance.git_branch} />
+	{/if}
+	{#if instance.status === 'error' && instance.error}
+		<div class="card-error">{instance.error}</div>
+	{/if}
+	<div class="actions">
+		{#if instance.status === 'running'}
+			<Button variant="primary" size="sm" href={`/ide/${instance.id}`}>Open IDE</Button>
+			<Button size="sm" onclick={() => onact('stop')}>Stop</Button>
+		{:else if instance.status === 'stopped' || (instance.status === 'error' && instance.container_id)}
+			<Button size="sm" onclick={() => onact('start')}>Start</Button>
+		{:else if instance.status === 'creating'}
+			<Button size="sm" href={`/instances/${instance.id}`} target="_blank" rel="noopener noreferrer"
+				>View logs</Button
+			>
+		{/if}
+		{#if canRebuild}
+			<Button
+				size="sm"
+				title="Recreate the container and re-run setup (credentials, hooks, port forwards)"
+				onclick={() => onact('rebuild')}>Rebuild</Button
+			>
+		{/if}
+		<Button
+			size="sm"
+			ghost
+			href={`/instances/${instance.id}`}
+			target="_blank"
+			rel="noopener noreferrer">Details</Button
+		>
+		<Button variant="danger" size="sm" onclick={() => onact('delete')}>Delete</Button>
+	</div>
+</li>
+
+<style>
+	.card {
+		background: var(--bg-card);
+		padding: 16px 16px 14px;
+		transition:
+			transform 0.08s steps(2),
+			box-shadow 0.08s steps(2);
+	}
+	.card:hover {
+		transform: translate(-1px, -1px);
+		box-shadow: 6px 6px 0 var(--ink);
+	}
+	.card-head {
+		display: flex;
+		align-items: center;
+		gap: 11px;
+	}
+	.attn {
+		flex: none;
+		width: 14px;
+		height: 14px;
+		border: 1px solid var(--ink);
+	}
+	.attn.attn-done {
+		background: var(--attn-done);
+		animation: card-attn-pulse 1.4s ease-in-out infinite;
+	}
+	.attn.attn-waiting {
+		background: var(--attn-waiting);
+		animation: card-attn-pulse 1.4s ease-in-out infinite;
+	}
+	@keyframes card-attn-pulse {
+		0%,
+		100% {
+			box-shadow: 0 0 0 0 transparent;
+			filter: brightness(0.85);
+		}
+		50% {
+			box-shadow: 0 0 7px 2px color-mix(in srgb, currentColor 60%, transparent);
+			filter: brightness(1.15);
+		}
+	}
+	.attn.attn-done {
+		color: var(--attn-done);
+	}
+	.attn.attn-waiting {
+		color: var(--attn-waiting);
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.attn {
+			animation: none;
+			filter: none;
+		}
+	}
+	.name {
+		flex: 1;
+		min-width: 0;
+		font-family: var(--font-mono);
+		font-weight: 600;
+		font-size: 15px;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		/* Reset button chrome so it reads as plain text until hovered. */
+		margin: 0;
+		padding: 2px 4px;
+		border: 1px solid transparent;
+		background: transparent;
+		color: var(--ink);
+		text-align: left;
+		cursor: pointer;
+	}
+	.name:hover {
+		border-color: var(--ink-faint);
+	}
+	.name-edit {
+		flex: 1;
+		min-width: 0;
+		font-family: var(--font-mono);
+		font-weight: 600;
+		font-size: 15px;
+		margin: 0;
+		padding: 2px 4px;
+		border: 1px solid var(--ink);
+		background: var(--bg);
+		color: var(--ink);
+		outline: none;
+	}
+	.path {
+		margin-top: 10px;
+		font-family: var(--font-mono);
+		font-size: 12px;
+		color: var(--ink-soft);
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	.card-error {
+		margin-top: 10px;
+		font-family: var(--font-mono);
+		font-size: 12px;
+		color: var(--ink);
+		background: var(--bg);
+		border: 1px solid var(--ink);
+		padding: 8px 10px;
+		max-height: 80px;
+		overflow: auto;
+	}
+	.actions {
+		margin-top: 16px;
+		display: flex;
+		flex-wrap: wrap;
+		gap: 8px;
+	}
+</style>