codebay 0.10.1 → 0.11.0

package/src/components/UiShowcase.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
 	import Plus from '@lucide/svelte/icons/plus';
+	import { onMount } from 'svelte';
 	import toast, { Toaster } from 'svelte-french-toast';
+	import { TOAST_OPTIONS } from '../toast.ts';
 	import { avatars } from '../avatars/index.ts';
 	import type { AuthProvider, InstanceHealth, PortForward, Preflight } from '../types.ts';
 
@@ -16,58 +18,72 @@
 	import BranchBox from './BranchBox.svelte';
 	import PortsBox from './PortsBox.svelte';
 	import StatusBadge from './StatusBadge.svelte';
+	import InstanceCard from './InstanceCard.svelte';
+	import IdeBar from './IdeBar.svelte';
 	import ComponentDemo from './ui-showcase/ComponentDemo.svelte';
 	import type { Instance } from '../types.ts';
 
-	// The swatch fill reads var(--token) so it auto-syncs with shell.html; `hex` is
-	// only a label and always shows the light-theme value.
-	const palette: { group: string; swatches: { token: string; hex: string; border?: boolean }[] }[] =
-		[
-			{
-				group: 'Surfaces',
-				swatches: [
-					{ token: '--bg', hex: '#d7d8d2', border: true },
-					{ token: '--bg-card', hex: '#e7e8e2', border: true },
-					{ token: '--screen-bg', hex: '#0d0e0a' }
-				]
-			},
-			{
-				group: 'Ink / text',
-				swatches: [
-					{ token: '--ink', hex: '#14150f' },
-					{ token: '--ink-soft', hex: '#45463e' },
-					{ token: '--ink-faint', hex: '#7d7e74' }
-				]
-			},
-			{
-				group: 'Rules',
-				swatches: [
-					{ token: '--rule', hex: '#20211a' },
-					{ token: '--rule-soft', hex: '#b9bab2', border: true }
-				]
-			},
-			{
-				group: 'Semantic',
-				swatches: [
-					{ token: '--warn-bg', hex: '#e4d98f', border: true },
-					{ token: '--warn-line', hex: '#9c8729' },
-					{ token: '--warn-ink', hex: '#463b08' },
-					{ token: '--ok-bg', hex: '#8fbf6e' },
-					{ token: '--ok-line', hex: '#4c7a2e' },
-					{ token: '--ok-ink', hex: '#1c3110' },
-					{ token: '--danger', hex: '#b23a2e' },
-					{ token: '--danger-soft', hex: '#e3c6c1', border: true },
-					{ token: '--info', hex: '#388bfd' }
-				]
-			},
-			{
-				group: 'Attention',
-				swatches: [
-					{ token: '--attn-done', hex: '#22c55e' },
-					{ token: '--attn-waiting', hex: '#f59e0b' }
-				]
-			}
-		];
+	// Both the fill and the printed value are read back off the rendered chip, so this
+	// list is the only thing to touch when shell.html gains a token — and the labels
+	// can't drift from the theme the way a hardcoded hex did.
+	const palette: { group: string; tokens: string[] }[] = [
+		{ group: 'Surfaces', tokens: ['--bg', '--bg-card', '--screen-bg', '--screen-ink'] },
+		{ group: 'Ink / text', tokens: ['--ink', '--ink-soft', '--ink-faint', '--led-gray'] },
+		{ group: 'Structure', tokens: ['--edge', '--shadow', '--rule', '--rule-soft', '--grid-line'] },
+		{ group: 'Inverted fill', tokens: ['--fill', '--fill-ink'] },
+		{
+			group: 'Semantic',
+			tokens: [
+				'--warn-bg',
+				'--warn-line',
+				'--warn-ink',
+				'--ok-bg',
+				'--ok-line',
+				'--ok-ink',
+				'--danger',
+				'--danger-soft',
+				'--info'
+			]
+		},
+		{ group: 'Attention', tokens: ['--attn-done', '--attn-waiting', '--switch-on-bg'] }
+	];
+
+	const chips: Record<string, HTMLElement> = {};
+	let hexes = $state<Record<string, string>>({});
+
+	/** `rgb(r g b / a)` or `rgba(r, g, b, a)` -> `#rrggbb`, with any alpha spelled out. */
+	function toHex(value: string): string {
+		const parts = value.match(/[\d.]+/g);
+		if (!parts || parts.length < 3) return value;
+		const hex = parts
+			.slice(0, 3)
+			.map((n) => Math.round(Number(n)).toString(16).padStart(2, '0'))
+			.join('');
+		const alpha = parts.length > 3 ? Number(parts[3]) : 1;
+		return alpha < 1 ? `#${hex} ${Math.round(alpha * 100)}%` : `#${hex}`;
+	}
+
+	function readHexes() {
+		hexes = Object.fromEntries(
+			Object.entries(chips).map(([token, node]) => [
+				token,
+				toHex(getComputedStyle(node).backgroundColor)
+			])
+		);
+	}
+
+	onMount(() => {
+		readHexes();
+		// An explicit pick mutates data-theme; "auto" only moves when the OS does.
+		const obs = new MutationObserver(readHexes);
+		obs.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] });
+		const scheme = window.matchMedia('(prefers-color-scheme: dark)');
+		scheme.addEventListener('change', readHexes);
+		return () => {
+			obs.disconnect();
+			scheme.removeEventListener('change', readHexes);
+		};
+	});
 
 	let avatarScale = $state(8);
 	let avatarName = $state('demo-instance');
@@ -137,11 +153,103 @@
 
 	let branchName = $state('main');
 
+	// The dashboard's headline surface — it composes Avatar, StatusBadge, PortsBox,
+	// BranchBox and Button, so it's the one place their interplay is reviewable.
+	let cardStatus = $state<Instance['status']>('running');
+	let cardAttention = $state<Instance['attention']>('waiting');
+	let cardPending = $state<'' | 'start' | 'stop' | 'delete' | 'rebuild'>('');
+	let cardMode = $state<Instance['mode']>('ide');
+	let cardBranch = $state(true);
+	let cardEditing = $state(false);
+	let cardEditingName = $state('demo-instance');
+	const cardActions = ['', 'start', 'stop', 'delete', 'rebuild'] as const;
+	const demoInstance = $derived<Instance>({
+		id: 'demo',
+		name: 'demo-instance',
+		source_path: '/home/you/code/demo-instance',
+		workspace_path: '/home/you/.codebay/instances/demo',
+		host_port: 8001,
+		container_id: 'abc123',
+		remote_workspace_folder: '/workspaces/demo-instance',
+		status: cardStatus,
+		error: cardStatus === 'error' ? 'devcontainer up failed: exit code 1' : null,
+		created_at: 0,
+		image_source: 'local',
+		avatar: avatars[0]!.name,
+		mode: cardMode,
+		terminal_split: 0,
+		git_branch: cardBranch ? branchName : null,
+		attention: cardAttention,
+		forwarded_ports: demoPorts
+	});
+
 	const statuses: Instance['status'][] = ['creating', 'running', 'stopped', 'error'];
 	let badgeStatus = $state<Instance['status']>('error');
+
+	// The IDE tab strip only ever renders against running instances, and this
+	// environment may have no Docker at all — so the demo fabricates them.
+	const TAB_NAMES = [
+		'orion',
+		'meridian',
+		'atlas',
+		'vesper',
+		'cobalt',
+		'juniper',
+		'halcyon',
+		'zenith',
+		'perigee',
+		'lumen'
+	];
+	let tabCount = $state(4);
+	let tabActive = $state(0);
+	let tabAttention = $state(true);
+	let tabMixModes = $state(true);
+	let tabLongNames = $state(false);
+	let tabEditingId = $state<string | null>(null);
+	let tabEditingName = $state('');
+	// Renames are applied for real, so the inline editor is inspectable end to end.
+	let tabRenames = $state<Record<string, string>>({});
+
+	const demoTabs = $derived(
+		Array.from({ length: tabCount }, (_, i): Instance => {
+			const id = `demo-tab-${i}`;
+			const base = TAB_NAMES[i]!;
+			return {
+				id,
+				name: tabRenames[id] ?? (tabLongNames ? `${base}-refactor-spike-2026` : base),
+				source_path: `/home/demo/${base}`,
+				workspace_path: `/data/instances/${id}`,
+				host_port: 8001 + i,
+				container_id: `container-${i}`,
+				remote_workspace_folder: null,
+				status: 'running',
+				error: null,
+				created_at: 0,
+				image_source: 'local',
+				avatar: avatars[i % avatars.length]!.name,
+				mode: tabMixModes && i % 2 === 1 ? 'terminal' : 'ide',
+				terminal_split: 0,
+				git_branch: 'main',
+				attention: null,
+				forwarded_ports: []
+			};
+		})
+	);
+	// Clamped, since dragging the count down can strand the active index past the end.
+	const demoActiveIndex = $derived(Math.min(tabActive, tabCount - 1));
+	const demoActiveId = $derived(demoTabs[demoActiveIndex]?.id ?? '');
+	// Alternating states so both LED colors are comparable side by side.
+	const demoAttention = $derived(
+		Object.fromEntries(
+			demoTabs.map((inst, i) => [
+				inst.id,
+				tabAttention && i !== demoActiveIndex ? (i % 2 === 0 ? 'done' : 'waiting') : null
+			])
+		) as Record<string, 'done' | 'waiting' | null>
+	);
 </script>
 
-<Toaster />
+<Toaster toastOptions={TOAST_OPTIONS} />
 
 <TopBar
 	auth={providers}
@@ -166,16 +274,20 @@
 				<span class="palette-hint">Design tokens — tap to expand</span>
 			</summary>
 			<div class="palette">
-				{#each palette as { group, swatches } (group)}
+				{#each palette as { group, tokens } (group)}
 					<div class="swatch-group">
 						<h3>{group}</h3>
 						<div class="swatches">
-							{#each swatches as { token, hex, border } (token)}
+							{#each tokens as token (token)}
 								<figure class="swatch">
-									<div class="chip" class:bordered={border} style="background: var({token});"></div>
+									<div
+										class="chip"
+										bind:this={chips[token]}
+										style="background: var({token});"
+									></div>
 									<figcaption>
 										<code>{token}</code>
-										<span>{hex}</span>
+										<span>{hexes[token] ?? '…'}</span>
 									</figcaption>
 								</figure>
 							{/each}
@@ -185,6 +297,64 @@
 			</div>
 		</details>
 
+		<ComponentDemo title="InstanceCard">
+			<!-- The card renders an <li>, and .card-grid mirrors the dashboard's own
+			     column so its width and hover lift match what ships. -->
+			<ul class="card-grid">
+				<InstanceCard
+					instance={demoInstance}
+					editing={cardEditing}
+					bind:editingName={cardEditingName}
+					pending={cardPending || null}
+					onact={(a) => toast(`${a} (demo)`)}
+					onstartrename={() => (cardEditing = true)}
+					oncommitrename={() => (cardEditing = false)}
+					oncancelrename={() => (cardEditing = false)}
+				/>
+			</ul>
+			{#snippet controls()}
+				<label>
+					<span>status</span>
+					<select bind:value={cardStatus}>
+						{#each statuses as s (s)}
+							<option value={s}>{s}</option>
+						{/each}
+					</select>
+				</label>
+				<label>
+					<span>attention</span>
+					<select bind:value={cardAttention}>
+						<option value={null}>none</option>
+						<option value="done">done</option>
+						<option value="waiting">waiting</option>
+					</select>
+				</label>
+				<label>
+					<span>pending (busy overlay)</span>
+					<select bind:value={cardPending}>
+						{#each cardActions as a (a)}
+							<option value={a}>{a || 'none'}</option>
+						{/each}
+					</select>
+				</label>
+				<label>
+					<span>mode</span>
+					<select bind:value={cardMode}>
+						<option value="ide">ide</option>
+						<option value="terminal">terminal</option>
+					</select>
+				</label>
+				<label class="inline">
+					<input type="checkbox" bind:checked={cardBranch} />
+					<span>git branch</span>
+				</label>
+				<label class="inline">
+					<input type="checkbox" bind:checked={cardEditing} />
+					<span>renaming</span>
+				</label>
+			{/snippet}
+		</ComponentDemo>
+
 		<ComponentDemo title="Avatar">
 			<Avatar name={avatarName} scale={avatarScale} art={avatarArt} />
 			{#snippet controls()}
@@ -370,6 +540,57 @@
 			{/snippet}
 		</ComponentDemo>
 
+		<ComponentDemo title="IdeBar">
+			<div class="ide-bar-demo">
+				<IdeBar
+					running={demoTabs}
+					active={demoActiveId}
+					attention={demoAttention}
+					editingId={tabEditingId}
+					bind:editingName={tabEditingName}
+					onreload={() => toast('Reload editor (demo)')}
+					onselect={(id) => (tabActive = demoTabs.findIndex((t) => t.id === id))}
+					onstartrename={(inst) => {
+						tabEditingId = inst.id;
+						tabEditingName = inst.name;
+					}}
+					oncommitrename={(id) => {
+						const name = tabEditingName.trim();
+						if (name) tabRenames[id] = name;
+						tabEditingId = null;
+					}}
+					oncancelrename={() => (tabEditingId = null)}
+				/>
+			</div>
+			<p class="demo-hint">
+				Click to select, double-click to rename. Arrow keys / Home / End move between tabs once one
+				has focus. The Alt+1–9 jump lives in AppShell rather than here, since it also installs
+				itself into the editor iframes — so it is inert in this demo.
+			</p>
+			{#snippet controls()}
+				<label>
+					<span>tabs ({tabCount})</span>
+					<input type="range" min="1" max="10" bind:value={tabCount} />
+				</label>
+				<label>
+					<span>active ({demoActiveIndex})</span>
+					<input type="range" min="0" max={tabCount - 1} bind:value={tabActive} />
+				</label>
+				<label>
+					<span>attention</span>
+					<input type="checkbox" bind:checked={tabAttention} />
+				</label>
+				<label>
+					<span>mixed modes</span>
+					<input type="checkbox" bind:checked={tabMixModes} />
+				</label>
+				<label>
+					<span>long names</span>
+					<input type="checkbox" bind:checked={tabLongNames} />
+				</label>
+			{/snippet}
+		</ComponentDemo>
+
 		<ComponentDemo title="Brand" note="No props — static branding.">
 			<Brand />
 		</ComponentDemo>
@@ -386,7 +607,6 @@
 		max-width: 740px;
 		margin: 0 auto;
 		padding: 32px;
-		background: var(--bg);
 		color: var(--ink);
 	}
 	header {
@@ -414,8 +634,8 @@
 		border-bottom: 1px solid var(--ink);
 	}
 	.gallery-link:hover {
-		background: var(--ink);
-		color: var(--bg);
+		background: var(--fill);
+		color: var(--fill-ink);
 	}
 	.grid {
 		display: flex;
@@ -460,12 +680,30 @@
 		border: 1px solid var(--rule-soft);
 		overflow: hidden;
 	}
+	/* Matches the dashboard grid's column so the card previews at its real width. */
+	.card-grid {
+		list-style: none;
+		margin: 0;
+		padding: 0;
+		width: min(360px, 100%);
+	}
 	.badge-row {
 		display: flex;
 		flex-wrap: wrap;
 		align-items: center;
 		gap: 10px;
 	}
+	/* The bar spans the full IDE viewport in situ, so give it the whole stage here. */
+	.ide-bar-demo {
+		width: 100%;
+		border: 1px solid var(--rule-soft);
+	}
+	.demo-hint {
+		margin: 0;
+		font-family: var(--font-mono);
+		font-size: 11px;
+		color: var(--ink-faint);
+	}
 	.presets {
 		display: flex;
 		gap: 6px;
@@ -478,13 +716,14 @@
 		letter-spacing: 0.06em;
 		color: var(--ink);
 		background: var(--bg-card);
-		border: 1px solid var(--ink);
+		border: 1px solid var(--edge);
 		padding: 5px 0;
 		cursor: pointer;
 	}
 	.presets button:hover {
-		background: var(--ink);
-		color: var(--bg);
+		background: var(--fill);
+		border-color: var(--fill);
+		color: var(--fill-ink);
 	}
 
 	.palette-card {
@@ -550,10 +789,7 @@
 	}
 	.swatch .chip {
 		height: 44px;
-		border: 1px solid transparent;
-	}
-	.swatch .chip.bordered {
-		border-color: var(--rule-soft);
+		border: 1px solid var(--rule-soft);
 	}
 	.swatch figcaption {
 		display: flex;

package/src/lib/db.server.ts

@@ -36,6 +36,8 @@ export interface InstanceRow {
 	mode: InstanceMode;
 	/** Terminal mode only: 1 when the scratch-shell pane was left open, so a reload restores it. */
 	terminal_split: number;
+	/** 0 until the legacy in-place config injection has been checked/undone; new rows start at 1. */
+	config_migrated: number;
 }
 
 export interface PortForwardRow {
@@ -66,8 +68,8 @@ export function closeDb(): void {
 export function insertInstance(row: InstanceRow): void {
 	db.query(
 		`INSERT INTO instances
-       (id, name, source_path, workspace_path, host_port, container_id, remote_workspace_folder, status, error, created_at, bridge_token, remote_user, image_source, avatar, mode, terminal_split)
-     VALUES ($id, $name, $source_path, $workspace_path, $host_port, $container_id, $remote_workspace_folder, $status, $error, $created_at, $bridge_token, $remote_user, $image_source, $avatar, $mode, $terminal_split)`
+       (id, name, source_path, workspace_path, host_port, container_id, remote_workspace_folder, status, error, created_at, bridge_token, remote_user, image_source, avatar, mode, terminal_split, config_migrated)
+     VALUES ($id, $name, $source_path, $workspace_path, $host_port, $container_id, $remote_workspace_folder, $status, $error, $created_at, $bridge_token, $remote_user, $image_source, $avatar, $mode, $terminal_split, $config_migrated)`
 	).run({
 		$id: row.id,
 		$name: row.name,
@@ -84,7 +86,8 @@ export function insertInstance(row: InstanceRow): void {
 		$image_source: row.image_source,
 		$avatar: row.avatar,
 		$mode: row.mode,
-		$terminal_split: row.terminal_split
+		$terminal_split: row.terminal_split,
+		$config_migrated: row.config_migrated
 	});
 }
 
@@ -147,6 +150,7 @@ const UPDATABLE_COLUMNS = [
 	'remote_user',
 	'image_source',
 	'terminal_split',
+	'config_migrated',
 	// Reassigned when a rebuild finds the recorded port taken over on the host.
 	'host_port'
 ] as const;