codebay 0.8.0 → 0.9.0

package/src/components/AvatarEditor.svelte

@@ -2,9 +2,11 @@
 	import Copy from '@lucide/svelte/icons/copy';
 	import Eraser from '@lucide/svelte/icons/eraser';
 	import Contrast from '@lucide/svelte/icons/contrast';
+	import RotateCcw from '@lucide/svelte/icons/rotate-ccw';
 	import ExternalLink from '@lucide/svelte/icons/external-link';
+	import X from '@lucide/svelte/icons/x';
 	import toast from 'svelte-french-toast';
-	import { ROWS, COLS, ON, OFF, GRAY, type AvatarArt } from '../avatars/types.ts';
+	import { ROWS, COLS, ON, OFF, GRAY, decode, type AvatarArt } from '../avatars/types.ts';
 	import { MODES, nextValue, type Mode } from '../avatars/editor.ts';
 	import {
 		cellsToPixels,
@@ -16,13 +18,26 @@
 	import Button from './Button.svelte';
 
 	// Rolled by the route, not here, so hydration doesn't pick a different word.
-	let { namePlaceholder }: { namePlaceholder: string } = $props();
+	// `editing` seeds the canvas with an existing sprite (a redraw); null is a fresh draw.
+	let {
+		namePlaceholder,
+		editing = null,
+		oncancelEdit
+	}: {
+		namePlaceholder: string;
+		editing?: AvatarArt | null;
+		oncancelEdit?: () => void;
+	} = $props();
 
-	// Same shape `decode()` produces, so the two round-trip.
-	let cells = $state<number[]>(Array(ROWS * COLS).fill(OFF));
-	let avatarName = $state('');
+	// A redraw keeps the sprite's name (it's the catalog key), so the name is fixed then.
+	const isEdit = $derived(editing != null);
 
-	const slug = $derived(normalizeName(avatarName));
+	// Same shape `decode()` produces, so the two round-trip. Seeded once — the parent
+	// remounts this component (keyed) when it switches which sprite is being edited.
+	let cells = $state<number[]>(editing ? decode(editing) : Array(ROWS * COLS).fill(OFF));
+	let avatarName = $state(editing?.name ?? '');
+
+	const slug = $derived(editing ? editing.name : 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 !== OFF));
@@ -89,6 +104,11 @@
 		cells = Array(ROWS * COLS).fill(OFF);
 	}
 
+	// Only meaningful for a redraw: restore the sprite the edit started from.
+	function reset() {
+		if (editing) cells = decode(editing);
+	}
+
 	// Only swaps off↔on; gray sits in the middle and is left untouched.
 	function invert() {
 		cells = cells.map((c) => (c === ON ? OFF : c === OFF ? ON : c));
@@ -106,7 +126,13 @@
 
 <section class="editor">
 	<div class="head">
-		<h2>Draw your own avatar</h2>
+		<h2>{isEdit ? `Redraw “${editing!.name}”` : 'Draw your own avatar'}</h2>
+		{#if isEdit}
+			<button type="button" class="head-cancel" onclick={() => oncancelEdit?.()}>
+				<X size={14} />
+				<span>New drawing</span>
+			</button>
+		{/if}
 	</div>
 
 	<div class="body">
@@ -141,18 +167,33 @@
 				</div>
 			</div>
 
+			{#if isEdit}
+				<!-- The AI-generated original, so the redraw can be compared against it at a glance. -->
+				<div class="preview before">
+					<div class="preview-label">Before</div>
+					<div class="preview-row">
+						<Avatar art={editing!} name={editing!.name} scale={3} />
+					</div>
+				</div>
+			{/if}
+
 			<label class="name-field">
 				<span class="preview-label">Name</span>
-				<input
-					type="text"
-					bind:value={avatarName}
-					placeholder={namePlaceholder}
-					spellcheck="false"
-					autocapitalize="off"
-					autocorrect="off"
-					autocomplete="off"
-					maxlength="24"
-				/>
+				{#if isEdit}
+					<!-- The name is the catalog key; a redraw keeps it, so it's shown read-only. -->
+					<input type="text" value={editing!.name} readonly aria-readonly="true" />
+				{:else}
+					<input
+						type="text"
+						bind:value={avatarName}
+						placeholder={namePlaceholder}
+						spellcheck="false"
+						autocapitalize="off"
+						autocorrect="off"
+						autocomplete="off"
+						maxlength="24"
+					/>
+				{/if}
 			</label>
 
 			<div class="mode-field">
@@ -177,6 +218,9 @@
 			</div>
 
 			<div class="tools">
+				{#if isEdit}
+					<Button size="sm" icon={RotateCcw} onclick={reset}>Reset</Button>
+				{/if}
 				<Button size="sm" icon={Eraser} onclick={clear}>Clear</Button>
 				<Button size="sm" icon={Contrast} onclick={invert}>Invert</Button>
 			</div>
@@ -184,7 +228,11 @@
 	</div>
 
 	<div class="foot">
-		<span class="hint">Draw something, then open an issue to get it into the official set.</span>
+		<span class="hint">
+			{isEdit
+				? 'Redraw it, then open an issue to replace the AI-generated original.'
+				: 'Draw something, then open an issue to get it into the official set.'}
+		</span>
 		<div class="actions">
 			<Button size="sm" icon={Copy} disabled={!canContribute} onclick={copyModule}>Copy</Button>
 			<Button
@@ -192,7 +240,7 @@
 				variant="primary"
 				icon={ExternalLink}
 				disabled={!canContribute}
-				href={toIssueUrl(art)}
+				href={toIssueUrl(art, isEdit ? 'edit' : 'create')}
 				target="_blank"
 				rel="noopener"
 			>
@@ -214,6 +262,8 @@
 	.head {
 		display: flex;
 		align-items: center;
+		justify-content: space-between;
+		gap: 12px;
 		padding: 14px 18px;
 		border-bottom: 1px solid var(--ink);
 		background: var(--ink);
@@ -227,6 +277,29 @@
 		letter-spacing: 0.06em;
 		color: var(--bg);
 	}
+	.head-cancel {
+		display: inline-flex;
+		align-items: center;
+		gap: 6px;
+		flex: none;
+		padding: 5px 10px;
+		border: 1px solid var(--bg);
+		background: transparent;
+		color: var(--bg);
+		font-family: var(--font-mono);
+		font-size: 11px;
+		text-transform: uppercase;
+		letter-spacing: 0.06em;
+		cursor: pointer;
+	}
+	.head-cancel:hover {
+		background: var(--bg);
+		color: var(--ink);
+	}
+	.head-cancel:focus-visible {
+		outline: none;
+		box-shadow: 0 0 0 2px var(--rule-soft);
+	}
 	.body {
 		display: flex;
 		flex-wrap: wrap;
@@ -308,6 +381,10 @@
 	.name-field input::placeholder {
 		color: var(--ink-faint);
 	}
+	.name-field input[readonly] {
+		color: var(--ink-soft);
+		cursor: default;
+	}
 	.name-field input:focus {
 		outline: none;
 		box-shadow: inset 3px 3px 0 var(--rule-soft);

package/src/components/DashboardView.svelte

@@ -13,13 +13,21 @@
 		preflight,
 		instances,
 		loaded,
-		pet
-	}: { preflight: Preflight; instances: Instance[]; loaded: boolean; pet?: AvatarArt } = $props();
+		pet,
+		filter,
+		onFilter
+	}: {
+		preflight: Preflight;
+		instances: Instance[];
+		loaded: boolean;
+		pet?: AvatarArt;
+		filter: InstanceFilter;
+		onFilter: (v: InstanceFilter) => void;
+	} = $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);
@@ -51,14 +59,17 @@
 		pending = rest;
 	}
 
-	async function createFrom(sourcePath: string, opts?: { branch?: string }) {
+	async function createFrom(
+		sourcePath: string,
+		opts?: { branch?: string; mode?: Instance['mode'] }
+	) {
 		browserOpen = false;
 		creating = true;
 		actionError = null;
 		try {
 			await apiPost(
 				'/api/instances',
-				{ sourcePath, branch: opts?.branch },
+				{ sourcePath, branch: opts?.branch, mode: opts?.mode },
 				'Failed to create instance'
 			);
 			// The live stream delivers the new instance.
@@ -136,7 +147,7 @@
 	{ready}
 	{creating}
 	{filter}
-	onFilter={(v) => (filter = v)}
+	{onFilter}
 	onNew={() => (browserOpen = true)}
 	onDeleteAll={deleteAll}
 />
@@ -185,7 +196,11 @@
 </main>
 
 {#if browserOpen}
-	<FolderBrowser onpick={createFrom} onclose={() => (browserOpen = false)} />
+	<FolderBrowser
+		onpick={createFrom}
+		defaultMode={preflight.defaultMode}
+		onclose={() => (browserOpen = false)}
+	/>
 {/if}
 
 <style>

package/src/components/FolderBrowser.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
 	import { tick } from 'svelte';
-	import type { BrowseResult, FolderHistoryEntry } from '../types.ts';
+	import type { BrowseResult, FolderHistoryEntry, InstanceMode } from '../types.ts';
 	import { isRepoUrl } from '../lib/repo-url.ts';
+	import Terminal from '@lucide/svelte/icons/terminal';
+	import LayoutTemplate from '@lucide/svelte/icons/layout-template';
 	import X from '@lucide/svelte/icons/x';
 	import FolderClock from '@lucide/svelte/icons/folder-clock';
 	import GitBranch from '@lucide/svelte/icons/git-branch';
@@ -12,9 +14,18 @@
 
 	let {
 		onpick,
-		onclose
-	}: { onpick: (source: string, opts?: { branch?: string }) => void; onclose: () => void } =
-		$props();
+		onclose,
+		defaultMode = 'ide'
+	}: {
+		onpick: (source: string, opts?: { branch?: string; mode?: InstanceMode }) => void;
+		onclose: () => void;
+		defaultMode?: InstanceMode;
+	} = $props();
+
+	// Follows the global default live — settings opens in its own popup, so the toggle there can
+	// move while this picker is open. An explicit choice here wins and is never yanked back.
+	let modeOverride = $state<InstanceMode | null>(null);
+	const mode = $derived(modeOverride ?? defaultMode);
 
 	let result = $state<BrowseResult | null>(null);
 	let loading = $state(true);
@@ -30,7 +41,7 @@
 
 	function cloneRepoUrl() {
 		if (!repoValid) return;
-		onpick(repoUrl.trim(), { branch: repoBranch.trim() || undefined });
+		onpick(repoUrl.trim(), { branch: repoBranch.trim() || undefined, mode });
 	}
 
 	const filtered = $derived(
@@ -103,6 +114,32 @@
 			<button class="x" onclick={onclose} aria-label="Close"><X size={16} /></button>
 		</div>
 
+		<div class="mode">
+			<div class="mode-label">Editor</div>
+			<div class="mode-toggle" role="group" aria-label="Editor mode">
+				<button
+					type="button"
+					class="mode-btn"
+					class:active={mode === 'ide'}
+					aria-pressed={mode === 'ide'}
+					onclick={() => (modeOverride = 'ide')}
+				>
+					<LayoutTemplate size={15} />
+					Full IDE
+				</button>
+				<button
+					type="button"
+					class="mode-btn"
+					class:active={mode === 'terminal'}
+					aria-pressed={mode === 'terminal'}
+					onclick={() => (modeOverride = 'terminal')}
+				>
+					<Terminal size={15} />
+					Terminal
+				</button>
+			</div>
+		</div>
+
 		<div class="clone">
 			<div class="clone-label">Clone a Git repository</div>
 			<div class="clone-row">
@@ -147,7 +184,7 @@
 				<div class="recent-label">Recent</div>
 				{#each shownHistory as entry (entry.source_path)}
 					<div class="recent-row">
-						<button class="recent-pick" onclick={() => onpick(entry.source_path)}>
+						<button class="recent-pick" onclick={() => onpick(entry.source_path, { mode })}>
 							<span class="icon">
 								{#if isRepoUrl(entry.source_path)}<GitBranch size={16} />{:else}<FolderClock
 										size={16}
@@ -221,7 +258,7 @@
 							<span class="ename">{entry.name}</span>
 							{#if entry.hasDevcontainer}<span class="badge">devcontainer</span>{/if}
 						</button>
-						<button class="pick-inline" onclick={() => onpick(entry.path)}>Select</button>
+						<button class="pick-inline" onclick={() => onpick(entry.path, { mode })}>Select</button>
 					</div>
 				{/each}
 			{/if}
@@ -239,7 +276,11 @@
 
 		<div class="foot">
 			<span class="hint">Browse to a folder, then select this folder or any subfolder.</span>
-			<button class="primary" disabled={!result} onclick={() => result && onpick(result.path)}>
+			<button
+				class="primary"
+				disabled={!result}
+				onclick={() => result && onpick(result.path, { mode })}
+			>
 				Select this folder
 			</button>
 		</div>
@@ -293,6 +334,45 @@
 	.x:hover {
 		opacity: 0.7;
 	}
+	.mode {
+		display: flex;
+		align-items: center;
+		gap: 12px;
+		padding: 12px 18px;
+		border-bottom: 1px solid var(--rule-soft);
+	}
+	.mode-label {
+		font-size: 11px;
+		text-transform: uppercase;
+		letter-spacing: 0.06em;
+		color: var(--ink-faint);
+	}
+	.mode-toggle {
+		display: flex;
+		border: 1px solid var(--ink);
+	}
+	.mode-btn {
+		display: inline-flex;
+		align-items: center;
+		gap: 6px;
+		font-family: var(--font-mono);
+		font-weight: 700;
+		font-size: 12px;
+		text-transform: uppercase;
+		letter-spacing: 0.05em;
+		padding: 7px 14px;
+		border: none;
+		background: var(--bg);
+		color: var(--ink);
+		cursor: pointer;
+	}
+	.mode-btn + .mode-btn {
+		border-left: 1px solid var(--ink);
+	}
+	.mode-btn.active {
+		background: var(--ink);
+		color: var(--bg);
+	}
 	.clone {
 		padding: 12px 18px;
 		border-bottom: 1px solid var(--rule-soft);

package/src/components/HealthBox.svelte

@@ -1,17 +1,15 @@
 <script lang="ts">
 	import Check from '@lucide/svelte/icons/check';
 	import X from '@lucide/svelte/icons/x';
-	import type { InstanceHealth } from '../types.ts';
+	import type { InstanceHealth, InstanceMode } 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
+		injectionChecks = 0,
+		mode = 'ide'
 	}: {
 		/** Latest health snapshot, or null while the first check is pending. */
 		health?: InstanceHealth | null;
@@ -21,8 +19,17 @@
 		active?: boolean;
 		/** Registry-derived, so the skeleton renders one row per real check. */
 		injectionChecks?: number;
+		/** Terminal instances serve ttyd, not code-server, so the reachability label differs. */
+		mode?: InstanceMode;
 	} = $props();
 
+	// Intrinsic to every instance, independent of any injection. The second label tracks the
+	// served surface — the probe underneath is the same host-port reachability check either way.
+	const FIXED_CHECKS = $derived([
+		'Container running',
+		mode === 'terminal' ? 'Terminal reachable' : 'Code-server reachable'
+	] 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 }[] => {
 		if (!health) return [];

package/src/components/IdeBar.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { type Instance } from '../types.ts';
 	import Settings from '@lucide/svelte/icons/settings';
+	import Terminal from '@lucide/svelte/icons/terminal';
 	import Avatar from './Avatar.svelte';
 	import AppBar from './AppBar.svelte';
 	import { withPopupMarker } from '../lib/popup-nav.ts';
@@ -64,6 +65,9 @@
 						>
 							<Avatar id={inst.id} name={inst.name} 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>
+							{/if}
 						</button>
 					{/if}
 				</div>
@@ -169,6 +173,12 @@
 		overflow: hidden;
 		text-overflow: ellipsis;
 	}
+	.tab-mode {
+		display: inline-flex;
+		align-items: center;
+		flex: none;
+		opacity: 0.75;
+	}
 	.tab:not(.active) .tab-label:hover {
 		color: var(--ink);
 	}

package/src/components/InstanceCard.svelte

@@ -94,7 +94,9 @@
 	{/if}
 	<div class="actions">
 		{#if instance.status === 'running'}
-			<Button variant="primary" size="sm" href={`/ide/${instance.id}`}>Open IDE</Button>
+			<Button variant="primary" size="sm" href={`/ide/${instance.id}`}>
+				{instance.mode === 'terminal' ? 'Open terminal' : '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>

package/src/components/InstanceView.svelte

@@ -193,6 +193,7 @@
 			{lastFetchedAt}
 			{injectionChecks}
 			active={!instance || instance.status === 'running'}
+			mode={instance?.mode ?? 'ide'}
 		/>
 	</div>
 

package/src/components/SettingsView.svelte

@@ -27,6 +27,9 @@
 	import CoinButton from './CoinButton.svelte';
 	import Avatar from './Avatar.svelte';
 	import { avatars, findAvatar, type AvatarArt } from '../avatars/index.ts';
+	import type { InstanceMode } from '../types.ts';
+	import Terminal from '@lucide/svelte/icons/terminal';
+	import LayoutTemplate from '@lucide/svelte/icons/layout-template';
 	import { installPopupBackTrap } from '../lib/popup-nav.ts';
 
 	/** Every settings form action fails with the same `{ error }` shape. */
@@ -34,6 +37,7 @@
 
 	let {
 		pet,
+		defaultMode,
 		defaultImage,
 		builtinImage,
 		disableBuildCache,
@@ -66,6 +70,7 @@
 		version
 	}: {
 		pet?: AvatarArt;
+		defaultMode: InstanceMode;
 		defaultImage: string;
 		builtinImage: string;
 		disableBuildCache: boolean;
@@ -172,6 +177,29 @@
 		};
 	}
 
+	// DB-backed, so it initializes from the prop; a per-instance choice in the picker overrides it.
+	// svelte-ignore state_referenced_locally
+	let modeChoice = $state<InstanceMode>(defaultMode);
+	let savingMode = $state(false);
+	let modeError = $state<string | null>(null);
+	let modeFormEl: HTMLFormElement | undefined;
+
+	const defaultModeOpts = saveOpts<{ mode: InstanceMode }>({
+		setSaving: (v) => (savingMode = v),
+		setError: (v) => (modeError = v),
+		setMsg: () => {},
+		onSuccess: (data) => {
+			if (data?.mode) modeChoice = data.mode;
+		}
+	});
+
+	// Set the bound hidden value then resubmit, mirroring the image reset (flushSync before requestSubmit).
+	function chooseMode(next: InstanceMode) {
+		if (next === modeChoice) return;
+		flushSync(() => (modeChoice = next));
+		modeFormEl?.requestSubmit();
+	}
+
 	// svelte-ignore state_referenced_locally
 	let image = $state(defaultImage);
 	let savingImage = $state(false);
@@ -605,6 +633,56 @@
 	</AppBar>
 
 	<main class="content">
+		<section class="card">
+			<form
+				class="row"
+				method="POST"
+				action="?/defaultMode"
+				bind:this={modeFormEl}
+				{@attach enhance(defaultModeOpts)}
+			>
+				<div class="label">
+					<Terminal size={20} />
+					<div class="text">
+						<div class="name">Default editor</div>
+						<div class="desc">
+							What new instances start in. <strong>Full IDE</strong> serves browser VS Code;
+							<strong>Terminal</strong> is lighter — just Claude Code in a terminal, no code-server. You
+							can override this per instance when creating one.
+						</div>
+					</div>
+				</div>
+				<input type="hidden" name="mode" value={modeChoice} />
+				<div class="mode-toggle" role="group" aria-label="Default editor mode">
+					<button
+						type="button"
+						class="mode-btn"
+						class:active={modeChoice === 'ide'}
+						aria-pressed={modeChoice === 'ide'}
+						disabled={savingMode}
+						onclick={() => chooseMode('ide')}
+					>
+						<LayoutTemplate size={15} />
+						Full IDE
+					</button>
+					<button
+						type="button"
+						class="mode-btn"
+						class:active={modeChoice === 'terminal'}
+						aria-pressed={modeChoice === 'terminal'}
+						disabled={savingMode}
+						onclick={() => chooseMode('terminal')}
+					>
+						<Terminal size={15} />
+						Terminal
+					</button>
+				</div>
+			</form>
+			{#if modeError}
+				<div class="sub"><div class="msg error">{modeError}</div></div>
+			{/if}
+		</section>
+
 		<section class="card">
 			<form
 				class="row image-row"
@@ -1809,6 +1887,36 @@
 		outline: 2px solid var(--ink);
 		outline-offset: 1px;
 	}
+	.mode-toggle {
+		display: flex;
+		flex: none;
+		border: 1px solid var(--ink);
+	}
+	.mode-btn {
+		display: inline-flex;
+		align-items: center;
+		gap: 6px;
+		font-family: var(--font-mono);
+		font-weight: 700;
+		font-size: 12px;
+		text-transform: uppercase;
+		letter-spacing: 0.05em;
+		padding: 7px 14px;
+		border: none;
+		background: var(--bg);
+		color: var(--ink);
+		cursor: pointer;
+	}
+	.mode-btn + .mode-btn {
+		border-left: 1px solid var(--ink);
+	}
+	.mode-btn.active {
+		background: var(--ink);
+		color: var(--bg);
+	}
+	.mode-btn:disabled {
+		cursor: not-allowed;
+	}
 	.switch {
 		position: relative;
 		flex: none;