codebay 0.10.0 → 0.11.0

package/src/components/IdeBar.svelte

@@ -5,9 +5,12 @@
 	import RotateCw from '@lucide/svelte/icons/rotate-cw';
 	import Terminal from '@lucide/svelte/icons/terminal';
 	import LayoutTemplate from '@lucide/svelte/icons/layout-template';
+	import ChevronLeft from '@lucide/svelte/icons/chevron-left';
+	import ChevronRight from '@lucide/svelte/icons/chevron-right';
 	import Avatar from './Avatar.svelte';
 	import AppBar from './AppBar.svelte';
 	import { withPopupMarker } from '../lib/popup-nav.ts';
+	import { nextTabIndex } from '../lib/tab-nav.ts';
 
 	let {
 		running,
@@ -33,62 +36,164 @@
 		oncommitrename: (id: string) => void;
 		oncancelrename: () => void;
 	} = $props();
+
+	const activeIndex = $derived(running.findIndex((i) => i.id === active));
+	// Falls back to the first tab so the strip always offers exactly one tab stop,
+	// even when `active` names an instance that has since stopped.
+	const focusIndex = $derived(activeIndex >= 0 ? activeIndex : 0);
+
+	let viewport = $state<HTMLDivElement | null>(null);
+	let content = $state<HTMLDivElement | null>(null);
+	let atStart = $state(true);
+	let atEnd = $state(true);
+	// `$state` rather than a plain object so `bind:this` into it is a tracked write —
+	// otherwise Svelte warns, and the scroll-into-view effect below misses the first bind.
+	const tabEls = $state<Record<string, HTMLButtonElement | null>>({});
+
+	// Both true means everything fits, so the chevrons stay out of a bar that only has 44px.
+	const overflowing = $derived(!atStart || !atEnd);
+
+	// 1px of slack: fractional layout widths leave scrollLeft a hair short of the true end.
+	function measure() {
+		if (!viewport) return;
+		atStart = viewport.scrollLeft <= 1;
+		atEnd = viewport.scrollLeft + viewport.clientWidth >= viewport.scrollWidth - 1;
+	}
+
+	function select(index: number) {
+		const inst = running[index];
+		if (!inst) return;
+		onselect(inst.id);
+		tabEls[inst.id]?.focus();
+	}
+
+	function onTabKeydown(e: KeyboardEvent) {
+		const next = nextTabIndex(activeIndex, e.key, running.length);
+		if (next === null) return;
+		e.preventDefault();
+		select(next);
+	}
+
+	function page(direction: -1 | 1) {
+		if (!viewport) return;
+		viewport.scrollBy({ left: direction * Math.max(160, viewport.clientWidth * 0.7) });
+	}
+
+	// Observing the content too, not just the viewport — adding or removing a tab moves
+	// scrollWidth without ever resizing the scroll container.
+	$effect(() => {
+		const vp = viewport;
+		const ct = content;
+		if (!vp || !ct) return;
+		measure();
+		const ro = new ResizeObserver(measure);
+		ro.observe(vp);
+		ro.observe(ct);
+		vp.addEventListener('scroll', measure, { passive: true });
+		return () => {
+			ro.disconnect();
+			vp.removeEventListener('scroll', measure);
+		};
+	});
+
+	// Keyboard selection can land on a tab that's scrolled out of sight.
+	$effect(() => {
+		tabEls[active]?.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+	});
 </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'}
+		<div class="strip">
+			{#if overflowing}
+				<button
+					type="button"
+					class="page"
+					disabled={atStart}
+					onclick={() => page(-1)}
+					aria-label="Scroll tabs left"><ChevronLeft size={16} /></button
 				>
-					{#if editingId === inst.id}
-						<div class="tab-label editing">
-							<Avatar
-								name={inst.name}
-								art={findAvatar(inst.avatar ?? undefined) ?? null}
-								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
-								name={inst.name}
-								art={findAvatar(inst.avatar ?? undefined) ?? null}
-								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>
-							{:else}
-								<span class="tab-mode" title="Full IDE instance"><LayoutTemplate size={13} /></span>
-							{/if}
-						</button>
-					{/if}
+			{/if}
+			<div class="viewport" bind:this={viewport}>
+				<div class="tabs" role="tablist" aria-label="Instances" bind:this={content}>
+					{#each running as inst, i (inst.id)}
+						{#if editingId === inst.id}
+							<div class="tab editing">
+								<Avatar
+									name={inst.name}
+									art={findAvatar(inst.avatar ?? undefined) ?? null}
+									scale={3}
+								/>
+								<!-- 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
+								bind:this={tabEls[inst.id]}
+								type="button"
+								class="tab"
+								class:active={inst.id === active}
+								id="tab-{inst.id}"
+								role="tab"
+								aria-selected={inst.id === active}
+								tabindex={i === focusIndex ? 0 : -1}
+								onclick={() => onselect(inst.id)}
+								ondblclick={() => onstartrename(inst)}
+								onkeydown={onTabKeydown}
+								title={inst.name}
+							>
+								<Avatar
+									name={inst.name}
+									art={findAvatar(inst.avatar ?? undefined) ?? null}
+									scale={3}
+								/>
+								<span class="tab-name">{inst.name}</span>
+								<span
+									class="tab-mode"
+									aria-label={inst.mode === 'terminal'
+										? 'Terminal-only instance'
+										: 'Full IDE instance'}
+								>
+									{#if inst.mode === 'terminal'}
+										<Terminal size={11} />
+									{:else}
+										<LayoutTemplate size={11} />
+									{/if}
+								</span>
+								<!-- The focused tab never lights up, so a lit LED always means "needs your eyes". -->
+								{#if inst.id !== active && attention[inst.id]}
+									<span
+										class="attn {attention[inst.id]}"
+										aria-label={attention[inst.id] === 'waiting'
+											? 'Claude is waiting for input'
+											: 'Claude finished'}
+									></span>
+								{/if}
+							</button>
+						{/if}
+					{/each}
 				</div>
-			{/each}
-		</nav>
+			</div>
+			{#if overflowing}
+				<button
+					type="button"
+					class="page trailing"
+					disabled={atEnd}
+					onclick={() => page(1)}
+					aria-label="Scroll tabs right"><ChevronRight size={16} /></button
+				>
+			{/if}
+		</div>
 	{/if}
 	<div class="right">
 		{#if onreload}
@@ -139,77 +244,110 @@
 	}
 	.cog:hover,
 	.reload:hover {
-		background: var(--ink);
-		color: var(--bg);
+		background: var(--fill);
+		color: var(--fill-ink);
 	}
-	.tabs {
+
+	.strip {
 		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);
-		}
+	/* The native scrollbar would eat into a 44px bar, so the chevrons replace it. */
+	.viewport {
+		display: flex;
+		min-width: 0;
+		overflow-x: auto;
+		scroll-behavior: smooth;
+		scrollbar-width: none;
 	}
-	@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);
-		}
+	.viewport::-webkit-scrollbar {
+		display: none;
 	}
 	@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);
+		.viewport {
+			scroll-behavior: auto;
 		}
 	}
-	.tab-label {
+	.tabs {
+		display: flex;
+		align-items: stretch;
+		flex: none;
+	}
+
+	.page {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: 28px;
+		flex: none;
 		appearance: none;
-		background: transparent;
+		margin: 0;
+		padding: 0;
 		border: 0;
+		border-right: 1px solid var(--rule);
+		background: var(--bg-card);
+		color: var(--ink);
 		cursor: pointer;
-		color: var(--ink-soft);
-		font-family: var(--font-mono);
+	}
+	.page.trailing {
+		border-right: 0;
+		border-left: 1px solid var(--rule);
+	}
+	.page:hover:not(:disabled) {
+		background: var(--fill);
+		color: var(--fill-ink);
+	}
+	.page:disabled {
+		opacity: var(--dim);
+		cursor: default;
+	}
+	.page:focus-visible {
+		outline: 2px solid var(--ink);
+		outline-offset: -2px;
+	}
+
+	.tab {
 		display: inline-flex;
 		align-items: center;
 		gap: 10px;
-		padding: 0 12px;
+		flex: none;
 		max-width: 240px;
-		font-size: 12px;
+		appearance: none;
+		margin: 0;
+		padding: 0 12px;
+		border: 0;
+		border-right: 1px solid var(--rule);
+		background: transparent;
+		color: var(--ink-soft);
+		font-family: var(--font-display);
+		font-weight: 700;
+		font-size: 13px;
 		text-transform: uppercase;
 		letter-spacing: 0.06em;
+		cursor: pointer;
+		/* Quantized like the instance cards — motion in this theme reads as digital. */
+		transition: background 0.08s steps(2);
+	}
+	/* Inversion is the house hover idiom, but it's also the active state here, so hovering
+	   gets a tint instead — that keeps idle → hover → active legible as three steps. */
+	.tab:not(.active):hover {
+		background: color-mix(in srgb, var(--ink) 12%, transparent);
+		color: var(--ink);
+	}
+	.tab.active {
+		background: var(--fill);
+		color: var(--fill-ink);
+		cursor: default;
+		/* The key has sunk into the chassis; this strip is the slot it dropped out of. */
+		box-shadow: inset 0 3px 0 var(--bg);
+	}
+	.tab:focus-visible {
+		outline: 2px solid var(--ink);
+		outline-offset: -2px;
+	}
+	.tab.active:focus-visible {
+		outline-color: var(--fill-ink);
 	}
 	.tab-name {
 		white-space: nowrap;
@@ -219,29 +357,65 @@
 	.tab-mode {
 		display: inline-flex;
 		align-items: center;
+		justify-content: center;
 		flex: none;
-		opacity: 0.75;
+		width: 18px;
+		height: 18px;
+		border: 1px solid currentColor;
+		opacity: 0.7;
 	}
-	.tab:not(.active) .tab-label:hover {
-		color: var(--ink);
+
+	.attn {
+		flex: none;
+		width: 10px;
+		height: 10px;
+		border: 1px solid var(--edge);
+		animation: tab-attn-pulse 1.4s ease-in-out infinite;
 	}
-	.tab.active .tab-label {
-		color: var(--bg);
+	.attn.done {
+		background: var(--attn-done);
+		color: var(--attn-done);
 	}
-	.tab-label.editing {
+	.attn.waiting {
+		background: var(--attn-waiting);
+		color: var(--attn-waiting);
+	}
+	/* Redeclared rather than shared with InstanceCard — Svelte scopes keyframes per component. */
+	@keyframes tab-attn-pulse {
+		0%,
+		100% {
+			box-shadow: 0 0 0 0 transparent;
+			filter: brightness(0.85);
+		}
+		50% {
+			box-shadow: 0 0 6px 2px color-mix(in srgb, currentColor 60%, transparent);
+			filter: brightness(1.15);
+		}
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.attn {
+			animation: none;
+			filter: none;
+		}
+	}
+
+	.tab.editing {
 		cursor: default;
 	}
 	.tab-name-edit {
-		width: 130px;
+		width: 148px;
 		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);
+		padding: 3px 6px;
+		border: 1px solid var(--ink);
 		background: var(--bg);
 		color: var(--ink);
-		outline: none;
+	}
+	.tab-name-edit:focus-visible {
+		outline: 2px solid var(--ink);
+		outline-offset: -2px;
 	}
 </style>

package/src/components/InstanceCard.svelte

@@ -142,7 +142,7 @@
 	}
 	.card:hover:not(.busy) {
 		transform: translate(-1px, -1px);
-		box-shadow: 6px 6px 0 var(--ink);
+		box-shadow: 6px 6px 0 var(--shadow);
 	}
 	/* Translucent scrim dims the card body and blocks clicks on the buttons beneath. */
 	.busy-overlay {
@@ -161,15 +161,15 @@
 		text-transform: uppercase;
 		letter-spacing: 0.1em;
 		padding: 4px 9px;
-		border: 1px solid var(--ink);
-		background: var(--ink);
-		color: var(--bg);
+		border: 1px solid var(--fill);
+		background: var(--fill);
+		color: var(--fill-ink);
 		animation: lcd-blink 1.1s steps(1) infinite;
 	}
 	@keyframes lcd-blink {
 		50% {
 			background: transparent;
-			color: var(--ink);
+			color: var(--fill);
 		}
 	}
 	@media (prefers-reduced-motion: reduce) {
@@ -186,7 +186,7 @@
 		flex: none;
 		width: 14px;
 		height: 14px;
-		border: 1px solid var(--ink);
+		border: 1px solid var(--edge);
 	}
 	.attn.attn-done {
 		background: var(--attn-done);
@@ -266,7 +266,7 @@
 		font-size: 12px;
 		color: var(--ink);
 		background: var(--bg);
-		border: 1px solid var(--ink);
+		border: 1px solid var(--edge);
 		padding: 8px 10px;
 		max-height: 80px;
 		overflow: auto;

package/src/components/InstanceFilter.svelte

@@ -30,7 +30,7 @@
 	.picker {
 		display: inline-flex;
 		flex: none;
-		border: 1px solid var(--ink);
+		border: 1px solid var(--edge);
 		background: var(--bg-card);
 	}
 	.segment {
@@ -49,16 +49,16 @@
 		cursor: pointer;
 	}
 	.segment + .segment {
-		border-left: 1px solid var(--ink);
+		border-left: 1px solid var(--edge);
 	}
 	.segment:hover:not(.active) {
-		background: var(--ink);
-		color: var(--bg);
+		background: var(--fill);
+		color: var(--fill-ink);
 	}
 	.segment.active {
 		font-weight: 700;
-		background: var(--ink);
-		color: var(--bg);
+		background: var(--fill);
+		color: var(--fill-ink);
 		cursor: default;
 	}
 	.segment:focus-visible {

package/src/components/InstanceView.svelte

@@ -11,6 +11,7 @@
 	import { enhance } from 'mochi-framework';
 	import type { MochiEnhanceOptions } from 'mochi-framework';
 	import { onBackLinkClick, installPopupBackTrap } from '../lib/popup-nav.ts';
+	import { syncTheme } from '../theme.ts';
 	import { tick } from 'svelte';
 
 	let { id, injectionChecks = 0 }: { id: string; injectionChecks?: number } = $props();
@@ -61,6 +62,8 @@
 			} else if (msg.type === 'health' && msg.data.id === id) {
 				health = msg.data.health;
 				lastFetchedAt = Date.now();
+			} else if (msg.type === 'theme') {
+				syncTheme(msg.data.value);
 			}
 		})
 	);
@@ -323,12 +326,13 @@
 		letter-spacing: 0.06em;
 		color: var(--ink);
 		text-decoration: none;
-		border: 1px solid var(--ink);
+		border: 1px solid var(--edge);
 		padding: 7px 12px;
 	}
 	.open:hover {
-		background: var(--ink);
-		color: var(--bg);
+		background: var(--fill);
+		border-color: var(--fill);
+		color: var(--fill-ink);
 	}
 	.restart {
 		display: inline-flex;
@@ -341,16 +345,17 @@
 		letter-spacing: 0.06em;
 		color: var(--ink);
 		background: var(--bg);
-		border: 1px solid var(--ink);
+		border: 1px solid var(--edge);
 		padding: 7px 12px;
 		cursor: pointer;
 	}
 	.restart:hover:not(:disabled) {
-		background: var(--ink);
-		color: var(--bg);
+		background: var(--fill);
+		border-color: var(--fill);
+		color: var(--fill-ink);
 	}
 	.restart:disabled {
-		opacity: 0.5;
+		opacity: var(--dim-panel);
 		cursor: not-allowed;
 	}
 	.restart-err {
@@ -406,17 +411,17 @@
 		text-transform: uppercase;
 		letter-spacing: 0.08em;
 		padding: 4px 9px;
-		background: var(--bg);
-		color: var(--ink);
-		border: 1px solid var(--bg);
+		background: var(--fill-ink);
+		color: var(--fill);
+		border: 1px solid var(--fill-ink);
 		cursor: pointer;
 	}
 	.rebuild:hover:not(:disabled) {
 		background: transparent;
-		color: var(--bg);
+		color: var(--fill-ink);
 	}
 	.rebuild:disabled {
-		opacity: 0.5;
+		opacity: var(--dim-panel);
 		cursor: not-allowed;
 	}
 	.ports-body {
@@ -499,14 +504,15 @@
 		text-transform: uppercase;
 		letter-spacing: 0.06em;
 		padding: 6px 14px;
-		border: 1px solid var(--ink);
+		border: 1px solid var(--edge);
 		background: var(--bg-card);
 		color: var(--ink);
 		cursor: pointer;
 	}
 	.add button:hover {
-		background: var(--ink);
-		color: var(--bg);
+		background: var(--fill);
+		border-color: var(--fill);
+		color: var(--fill-ink);
 	}
 	.port-err {
 		margin: 10px 0 0;
@@ -549,18 +555,18 @@
 		text-transform: uppercase;
 		letter-spacing: 0.08em;
 		padding: 4px 9px;
-		background: var(--bg);
-		color: var(--ink);
-		border: 1px solid var(--bg);
+		background: var(--fill-ink);
+		color: var(--fill);
+		border: 1px solid var(--fill-ink);
 		cursor: pointer;
 	}
 	.copy:hover:not(:disabled) {
 		background: transparent;
-		color: var(--bg);
+		color: var(--fill-ink);
 	}
 	.copy.active {
 		background: transparent;
-		color: var(--bg);
+		color: var(--fill-ink);
 	}
 	/* The dot, not the inverted fill, is what separates "following" from a mere hover. */
 	.dot {
@@ -571,7 +577,7 @@
 		background: var(--attn-done);
 	}
 	.copy:disabled {
-		opacity: 0.5;
+		opacity: var(--dim-panel);
 		cursor: not-allowed;
 	}
 	.logs {

package/src/components/SettingsCog.svelte

@@ -19,12 +19,13 @@
 		justify-content: center;
 		width: 32px;
 		height: 32px;
-		border: 1px solid var(--ink);
+		border: 1px solid var(--edge);
 		background: var(--bg-card);
 		color: var(--ink);
 	}
 	.cog:hover {
-		background: var(--ink);
-		color: var(--bg);
+		background: var(--fill);
+		border-color: var(--fill);
+		color: var(--fill-ink);
 	}
 </style>