@nocturnium/svelte-ide 1.4.0 → 1.5.0

package/dist/components/ai/AIEditPreview.svelte

@@ -34,6 +34,18 @@
 				return 'default';
 		}
 	});
+
+	type DiffLineKind = 'added' | 'removed' | 'context';
+
+	const diffLines = $derived.by((): Array<{ kind: DiffLineKind; text: string }> => {
+		if (!session.diff) return [];
+		return session.diff.split('\n').map((text) => {
+			let kind: DiffLineKind = 'context';
+			if (text.startsWith('+') && !text.startsWith('+++')) kind = 'added';
+			else if (text.startsWith('-') && !text.startsWith('---')) kind = 'removed';
+			return { kind, text };
+		});
+	});
 </script>
 
 <div class="ai-edit-preview {className}">
@@ -52,7 +64,11 @@
 
 	{#if session.diff}
 		<div class="ai-edit-preview__diff">
-			<pre>{session.diff}</pre>
+			{#each diffLines as line, i (i)}
+				<div class="ai-edit-preview__diff-line ai-edit-preview__diff-line--{line.kind}">
+					{line.text || ' '}
+				</div>
+			{/each}
 		</div>
 	{/if}
 
@@ -110,16 +126,30 @@
 	.ai-edit-preview__diff {
 		max-height: 300px;
 		overflow: auto;
+		padding: var(--ide-spacing-sm) 0;
 		background: var(--ide-bg-primary);
-	}
-
-	.ai-edit-preview__diff pre {
-		margin: 0;
-		padding: var(--ide-spacing-md);
 		font-family: var(--ide-font-mono);
 		font-size: var(--ide-font-size-xs);
 		line-height: 1.6;
+	}
+
+	.ai-edit-preview__diff-line {
+		padding: 0 var(--ide-spacing-md);
+		/* keep the +/- gutter and code intact, wrapping long lines */
 		white-space: pre-wrap;
+		/* reserve the indent the colored rows claim with their left border,
+		   so added/removed text doesn't shift relative to context lines */
+		border-left: 2px solid transparent;
+	}
+
+	.ai-edit-preview__diff-line--added {
+		background: color-mix(in srgb, var(--ide-success) 12%, transparent);
+		border-left-color: var(--ide-success);
+	}
+
+	.ai-edit-preview__diff-line--removed {
+		background: color-mix(in srgb, var(--ide-error) 12%, transparent);
+		border-left-color: var(--ide-error);
 	}
 
 	.ai-edit-preview__actions {

package/dist/components/ai/AIPanel.svelte

@@ -60,8 +60,25 @@
 	onMount(async () => {
 		await initPersistence();
 		persistedConversations = await loadConversations();
+		// Anchor the conversation to the START of the last message on mount so a
+		// seeded/long assistant message reads from its header, not a stale browser
+		// mid-content scroll offset (which looks like an abandoned position).
+		scrollToLastMessageStart();
 	});
 
+	// Bring the start of the most recent message into view (its header at the top
+	// of the viewport) rather than slamming to the very bottom of its body.
+	function scrollToLastMessageStart() {
+		if (!messagesContainer) return;
+		const messages = messagesContainer.querySelectorAll('.ai-message, [data-ai-message]');
+		const last = messages[messages.length - 1] as HTMLElement | undefined;
+		if (last) {
+			messagesContainer.scrollTop = Math.max(0, last.offsetTop - messagesContainer.offsetTop);
+		} else {
+			messagesContainer.scrollTop = 0;
+		}
+	}
+
 	// Auto-scroll to bottom when new messages arrive
 	$effect(() => {
 		if (messagesContainer && getMessages().length > 0) {
@@ -201,6 +218,7 @@
 					size="xs"
 					onclick={() => (sidebarOpen = !sidebarOpen)}
 					title={sidebarOpen ? 'Hide sidebar' : 'Show sidebar'}
+					aria-label={sidebarOpen ? 'Hide conversation sidebar' : 'Show conversation sidebar'}
 				>
 					<Icon name={sidebarOpen ? 'panel-left-close' : 'panel-left'} size={14} />
 				</Button>
@@ -208,12 +226,16 @@
 					<Icon name="sparkles" size={16} />
 					<span>AI Assistant</span>
 				</div>
-				<span class="ai-panel__mock-badge" title="Demo mock - no real model"
-					>Demo mock - no real model</span
-				>
+				<span class="ai-panel__mock-badge" title="Demo mock - no real model">Demo mock</span>
 			</div>
 			<div class="ai-panel__actions">
-				<Button variant="ghost" size="xs" onclick={handleNewConversation} title="New conversation">
+				<Button
+					variant="ghost"
+					size="xs"
+					onclick={handleNewConversation}
+					title="New conversation"
+					aria-label="New conversation"
+				>
 					<Icon name="plus" size={14} />
 				</Button>
 			</div>
@@ -271,7 +293,13 @@
 			<div class="ai-panel__error">
 				<Icon name="alert-circle" size={14} />
 				<span>{getError()}</span>
-				<Button variant="ghost" size="xs" onclick={clearError}>
+				<Button
+					variant="ghost"
+					size="xs"
+					onclick={clearError}
+					title="Dismiss error"
+					aria-label="Dismiss error"
+				>
 					<Icon name="x" size={12} />
 				</Button>
 			</div>
@@ -283,7 +311,7 @@
 				bind:this={textareaEl}
 				bind:value={inputValue}
 				class="ai-panel__textarea"
-				placeholder="Ask AI anything... (Enter to send, Shift+Enter for new line)"
+				placeholder="Ask AI anything..."
 				rows={1}
 				disabled={getIsStreaming() || isSubmitting}
 				onkeydown={handleKeydown}
@@ -356,9 +384,9 @@
 	.ai-panel__mock-badge {
 		display: inline-flex;
 		align-items: center;
-		min-width: 0;
-		max-width: 100%;
-		overflow: hidden;
+		/* Size to the label so it never clips its own text; the header-left flex
+		   keeps it from squeezing the title. Full copy lives in the title tooltip. */
+		flex-shrink: 0;
 		padding: 0.125rem var(--ide-spacing-sm);
 		border: 1px solid color-mix(in srgb, var(--ide-accent) 40%, var(--ide-border));
 		border-radius: var(--ide-radius-full);
@@ -367,7 +395,6 @@
 		font-size: var(--ide-font-size-xs);
 		font-weight: 500;
 		line-height: var(--ide-line-height-normal);
-		text-overflow: ellipsis;
 		white-space: nowrap;
 	}
 
@@ -504,6 +531,11 @@
 		align-items: flex-end;
 		gap: var(--ide-spacing-sm);
 		padding: var(--ide-spacing-md);
+		/* Anchor the composer to the bottom of the panel's flex column with a real
+		   bottom inset (incl. iOS safe-area) so it always sits above the host
+		   status bar and its border never reads as bleeding off-screen. */
+		padding-bottom: calc(var(--ide-spacing-md) + env(safe-area-inset-bottom, 0px));
+		flex-shrink: 0;
 		border-top: 1px solid var(--ide-border);
 		background: var(--ide-bg-secondary);
 	}
@@ -564,10 +596,6 @@
 		.ai-panel__input {
 			padding: var(--ide-spacing-sm);
 		}
-
-		.ai-panel__mock-badge {
-			white-space: normal;
-		}
 	}
 
 	@media (max-width: 480px) {

package/dist/components/core/Button.svelte

@@ -74,8 +74,15 @@
 		outline-offset: 2px;
 	}
 
-	.ide-button:disabled {
-		opacity: 0.5;
+	/* Disabled/loading: dim the fill, not the label. Routing every variant
+	   to a neutral tertiary surface with muted (still legible) text keeps the
+	   label >=3:1 instead of multiplying the variant fill by opacity 0.5,
+	   which crushed cream-on-orange/white-on-salmon below readable contrast. */
+	.ide-button.ide-button:disabled {
+		background: var(--ide-bg-tertiary);
+		color: var(--ide-text-secondary);
+		border-color: var(--ide-border);
+		opacity: 0.85;
 		cursor: not-allowed;
 	}
 
@@ -86,7 +93,7 @@
 	/* Variants */
 	.ide-button--primary {
 		background: var(--ide-primary);
-		color: var(--ide-text-primary);
+		color: var(--ide-text-inverse);
 	}
 
 	.ide-button--primary:hover:not(:disabled) {
@@ -116,7 +123,7 @@
 
 	.ide-button--danger {
 		background: var(--ide-error);
-		color: white;
+		color: var(--ide-text-inverse);
 	}
 
 	.ide-button--danger:hover:not(:disabled) {

package/dist/components/core/Icon.svelte

@@ -14,6 +14,8 @@
 		folder: 'M10 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-8l-2-2z',
 		'folder-open':
 			'M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2v2M2 11h20l-2 8H4l-2-8z',
+		'file-code':
+			'M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zM14 2v6h6M10 13l-2 2 2 2M14 13l2 2-2 2',
 
 		// Actions
 		close: 'M18 6L6 18M6 6l12 12',
@@ -55,6 +57,11 @@
 		bot: 'M12 8V4H8M12 8a4 4 0 0 0-4 4v6a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2v-6a4 4 0 0 0-4-4zM9 13h.01M15 13h.01',
 		wand: 'M15 4V2M15 16v-2M8 9h2M20 9h2M17.8 11.8L19 13M17.8 6.2L19 5M12.2 11.8L11 13M12.2 6.2L11 5M12 12l-9 9',
 		message: 'M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10z',
+		'message-circle':
+			'M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z',
+		send: 'M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z',
+		// loader: a continuous spinner ring (3/4 arc with a leading cap) — distinct from `loading`'s 8 discrete spokes
+		loader: 'M21 12a9 9 0 1 1-6.219-8.56',
 
 		// Status
 		info: 'M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10zM12 16v-4M12 8h.01',
@@ -77,6 +84,8 @@
 		'git-commit': 'M12 16a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM1.05 12H8M16 12h6.95',
 		'git-merge':
 			'M18 21a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM6 9a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM6 21V9a9 9 0 0 0 9 9M6 21h12',
+		'git-compare':
+			'M18 21a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM6 9a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM13 6h3a2 2 0 0 1 2 2v7M11 18H8a2 2 0 0 1-2-2V9',
 
 		// Misc
 		play: 'M5 3l14 9-14 9V3z',
@@ -87,11 +96,20 @@
 		clock: 'M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10zM12 6v6l4 2',
 		zap: 'M13 2L3 14h9l-1 8 10-12h-9l1-8z',
 		plugin:
-			'M12 2v6M12 18v4M4.93 4.93l4.24 4.24M14.83 14.83l4.24 4.24M2 12h6M18 12h4M4.93 19.07l4.24-4.24M14.83 9.17l4.24-4.24'
+			'M12 2v6M12 18v4M4.93 4.93l4.24 4.24M14.83 14.83l4.24 4.24M2 12h6M18 12h4M4.93 19.07l4.24-4.24M14.83 9.17l4.24-4.24',
+		database:
+			'M12 8c4.418 0 8-1.343 8-3s-3.582-3-8-3-8 1.343-8 3 3.582 3 8 3zM20 5v6c0 1.657-3.582 3-8 3s-8-1.343-8-3V5M20 11v6c0 1.657-3.582 3-8 3s-8-1.343-8-3v-6'
 	};
 
 	const path = $derived(icons[name] ?? icons.file);
 	const sizeValue = $derived(typeof size === 'number' ? `${size}px` : size);
+
+	// Dev-time guard: warn when a name misses the map so silent `file`-fallback drift is caught.
+	$effect(() => {
+		if (import.meta.env.DEV && !(name in icons)) {
+			console.warn(`[Icon] no glyph for name "${name}" — falling back to the generic "file" icon`);
+		}
+	});
 </script>
 
 <svg

package/dist/components/core/ResizeHandle.svelte

@@ -18,6 +18,12 @@
 		max?: number;
 		/** Current size in pixels */
 		size: number;
+		/** Step (px) for keyboard arrow adjustment (default 10; Shift = 5x) */
+		step?: number;
+		/** Size to snap to on double-click (defaults to the midpoint of min/max) */
+		defaultSize?: number;
+		/** Accessible name for the slider (e.g. "Resize left panel") */
+		ariaLabel?: string;
 		/** Callback when size changes */
 		onResize?: (size: number) => void;
 		/** Callback when drag starts */
@@ -34,6 +40,9 @@
 		min = 100,
 		max = 800,
 		size,
+		step = 10,
+		defaultSize,
+		ariaLabel,
 		onResize,
 		onResizeStart,
 		onResizeEnd,
@@ -102,9 +111,43 @@
 	}
 
 	function handleDoubleClick() {
-		// Reset to default size on double-click
-		const defaultSize = Math.round((min + max) / 2);
-		onResize?.(defaultSize);
+		// Reset to the configured default (or the midpoint of min/max).
+		onResize?.(defaultSize ?? Math.round((min + max) / 2));
+	}
+
+	// Keyboard operation for the slider role: arrows adjust the size, Home/End jump
+	// to min/max. Without this the role="slider" + aria-value* attributes promise
+	// an adjustable control that a keyboard/SR user cannot actually move.
+	function handleKeyDown(e: KeyboardEvent) {
+		const amount = e.shiftKey ? step * 5 : step;
+		let next: number;
+		switch (e.key) {
+			case 'ArrowRight':
+			case 'ArrowUp':
+				next = size + amount;
+				break;
+			case 'ArrowLeft':
+			case 'ArrowDown':
+				next = size - amount;
+				break;
+			case 'Home':
+				next = min;
+				break;
+			case 'End':
+				next = max;
+				break;
+			case 'Enter':
+			case ' ':
+				// Keyboard equivalent of double-click-to-reset: snap to the
+				// configured default (or the midpoint of min/max).
+				next = defaultSize ?? Math.round((min + max) / 2);
+				break;
+			default:
+				return;
+		}
+		e.preventDefault();
+		const clamped = Math.max(min, Math.min(max, next));
+		if (clamped !== size) onResize?.(clamped);
 	}
 
 	// Cleanup on destroy
@@ -123,7 +166,9 @@
 	class:resize-handle--dragging={isDragging}
 	onmousedown={handleMouseDown}
 	ondblclick={handleDoubleClick}
+	onkeydown={handleKeyDown}
 	role="slider"
+	aria-label={ariaLabel}
 	aria-orientation={direction}
 	aria-valuenow={size}
 	aria-valuemin={min}
@@ -131,6 +176,11 @@
 	tabindex={0}
 >
 	<div class="resize-handle__indicator"></div>
+	<div class="resize-handle__grip" aria-hidden="true">
+		<span></span>
+		<span></span>
+		<span></span>
+	</div>
 </div>
 
 <style>
@@ -163,7 +213,9 @@
 
 	.resize-handle__indicator {
 		position: absolute;
-		background: var(--ide-border, rgba(45, 90, 123, 0.4));
+		/* Brighter resting hairline so the handle reads as a grab affordance
+		   without leaning on the page's "Drag the edge" labels. */
+		background: color-mix(in srgb, var(--ide-border) 55%, var(--ide-text-secondary));
 		transition: background-color 0.15s ease;
 	}
 
@@ -184,17 +236,49 @@
 	}
 
 	.resize-handle:hover .resize-handle__indicator,
+	.resize-handle:focus-visible .resize-handle__indicator,
 	.resize-handle--dragging .resize-handle__indicator {
 		background: var(--ide-interactive, #4a8db7);
 	}
 
+	/* Centered grip motif (2-3 dots) so the resting handle reads as grabbable. */
+	.resize-handle__grip {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		display: flex;
+		gap: 3px;
+		transform: translate(-50%, -50%);
+		pointer-events: none;
+	}
+
+	.resize-handle__grip span {
+		display: block;
+		width: 2px;
+		height: 2px;
+		border-radius: 50%;
+		background: color-mix(in srgb, var(--ide-border) 40%, var(--ide-text-secondary));
+		transition: background-color 0.15s ease;
+	}
+
+	/* Stack the dots along the drag axis (vertical handle = dots in a column). */
+	.resize-handle--vertical .resize-handle__grip {
+		flex-direction: column;
+	}
+
+	.resize-handle:hover .resize-handle__grip span,
+	.resize-handle:focus-visible .resize-handle__grip span,
+	.resize-handle--dragging .resize-handle__grip span {
+		background: var(--ide-interactive, #4a8db7);
+	}
+
 	/* Focus styles for keyboard accessibility */
 	.resize-handle:focus {
 		outline: none;
 	}
 
 	.resize-handle:focus-visible {
-		outline: 2px solid var(--ide-interactive, #4a8db7);
-		outline-offset: -2px;
+		outline: 2px solid var(--ide-interactive-focus, #4a8db7);
+		outline-offset: 2px;
 	}
 </style>

package/dist/components/core/ResizeHandle.svelte.d.ts

@@ -9,6 +9,12 @@ interface Props {
     max?: number;
     /** Current size in pixels */
     size: number;
+    /** Step (px) for keyboard arrow adjustment (default 10; Shift = 5x) */
+    step?: number;
+    /** Size to snap to on double-click (defaults to the midpoint of min/max) */
+    defaultSize?: number;
+    /** Accessible name for the slider (e.g. "Resize left panel") */
+    ariaLabel?: string;
     /** Callback when size changes */
     onResize?: (size: number) => void;
     /** Callback when drag starts */

package/dist/components/core/Tooltip.svelte

@@ -1,3 +1,9 @@
+<script module lang="ts">
+	// Stable per-instance counter (SSR-safe — no Math.random/Date) so the bubble's
+	// id matches across server render and hydration for aria-describedby.
+	let tooltipCounter = 0;
+</script>
+
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 
@@ -11,6 +17,7 @@
 
 	let { content, position = 'top', delay = 300, class: className = '', children }: Props = $props();
 
+	const tooltipId = `ide-tooltip-${++tooltipCounter}`;
 	let visible = $state(false);
 	let timeout: ReturnType<typeof setTimeout> | null = null;
 
@@ -29,17 +36,21 @@
 	}
 </script>
 
+<!-- Presentational hover/focus container: the real trigger is the wrapped child,
+     and the tooltip text is exposed via aria-describedby. It is deliberately NOT
+     given a role (a role="tooltip" here was the original bug). -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
 	class="ide-tooltip-wrapper {className}"
 	onmouseenter={show}
 	onmouseleave={hide}
 	onfocus={show}
 	onblur={hide}
-	role="tooltip"
+	aria-describedby={visible && content ? tooltipId : undefined}
 >
 	{@render children()}
 	{#if visible && content}
-		<div class="ide-tooltip ide-tooltip--{position}" role="tooltip">
+		<div id={tooltipId} class="ide-tooltip ide-tooltip--{position}" role="tooltip">
 			{content}
 		</div>
 	{/if}

package/dist/components/editor/EchoCursorLayer.svelte

@@ -400,7 +400,10 @@
 
 	/* Mode indicator */
 	.echo-mode-indicator {
-		position: fixed;
+		/* Anchor to this layer's own editor (the .echo-cursor-layer fills it via
+		   absolute inset:0), not the viewport — a fixed pill would float free of
+		   the editor it reports on wherever the layer is embedded. */
+		position: absolute;
 		bottom: 16px;
 		right: 16px;
 		display: flex;

package/dist/components/editor/GhostBracketLayer.svelte

@@ -228,23 +228,31 @@
 		display: inline-block;
 		font-family: inherit;
 		font-size: inherit;
+		font-weight: 700;
 		color: var(--ghost-color);
-		opacity: 0.5;
+		/* Resting opacity ships legible (was 0.5) so the inferred brace reads
+		   against body text without a page-level :global override. */
+		opacity: 0.85;
+		/* Faint highlight: a soft glow in the confidence color keeps the AA-ish
+		   delta from surrounding code without recoloring the brace. */
+		text-shadow: 0 0 6px color-mix(in srgb, var(--ghost-color) 60%, transparent);
+		border-radius: 2px;
+		background: color-mix(in srgb, var(--ghost-color) 14%, transparent);
 		animation: ghost-pulse 2s ease-in-out infinite;
 	}
 
 	@keyframes ghost-pulse {
 		0%,
 		100% {
-			opacity: 0.5;
+			opacity: 0.85;
 		}
 		50% {
-			opacity: 0.3;
+			opacity: 0.65;
 		}
 	}
 
 	.ghost-bracket:hover .ghost-bracket__char {
-		opacity: 0.8;
+		opacity: 1;
 		animation: none;
 	}
 
@@ -350,9 +358,11 @@
 		position: absolute;
 		bottom: 2px;
 		left: 0;
-		width: 8px;
-		height: 2px;
-		background: var(--mismatch-color);
+		/* Span the brace and a short run of the offending line so the marker
+		   reads as anchored to its cause, not a detached tick above the code. */
+		width: 6ch;
+		height: 0;
+		border-bottom: 2px dotted var(--mismatch-color);
 		border-radius: 1px;
 	}
 

package/dist/components/editor/GitBlameLayer.svelte

@@ -174,7 +174,8 @@
 					onclick={() => handleClick(info)}
 					onkeydown={(e) => e.key === 'Enter' && handleClick(info)}
 					role="button"
-					tabindex={-1}
+					tabindex={onCommitClick ? 0 : -1}
+					aria-label={onCommitClick ? `View commit ${info.commitSha} by ${info.author}` : undefined}
 				>
 					<!-- Color indicator bar -->
 					<div class="git-blame-bar"></div>
@@ -240,7 +241,9 @@
 				<div class="tooltip-uncommitted-badge">Uncommitted changes</div>
 			{/if}
 
-			<div class="tooltip-hint">Click to view full commit</div>
+			{#if onCommitClick}
+				<div class="tooltip-hint">Click to view full commit</div>
+			{/if}
 		</div>
 	{/if}
 {/if}
@@ -295,11 +298,15 @@
 		cursor: pointer;
 		transition: background 0.1s ease;
 		overflow: hidden;
+		/* Recency tint ramp: in 'age' colorMode --blame-color runs green (recent)
+		   -> gray (old), so a faint wash of it across the whole row makes the
+		   green->gray gradient actually visible instead of a flat dark fill. */
+		background: color-mix(in srgb, var(--blame-color, #6b7280) 22%, transparent);
 	}
 
 	.git-blame-row:hover,
 	.git-blame-row--hovered {
-		background: rgba(255, 255, 255, 0.05);
+		background: color-mix(in srgb, var(--blame-color, #6b7280) 34%, transparent);
 	}
 
 	.git-blame-row--uncommitted {