@nocturnium/svelte-ide 1.1.0 → 1.2.0

package/dist/components/editor/CustomEditor.svelte

@@ -20,11 +20,16 @@
 	import { createEditorInput } from './editor-input';
 	import { createEditorScroll } from './editor-scroll';
 	import ComplexityLayer from './ComplexityLayer.svelte';
+	import ComplexityHeatLayer from './ComplexityHeatLayer.svelte';
 	import AIFocusLayer from './AIFocusLayer.svelte';
 	import EditorSelections from './EditorSelections.svelte';
 	import EditorLines from './EditorLines.svelte';
 	import CommandPalette from './CommandPalette.svelte';
-	import { getComplexityAnalyzer, type ComplexityMetrics } from './core/complexity-analyzer';
+	import {
+		getComplexityAnalyzer,
+		type ComplexityMetrics,
+		type ComplexityRegion
+	} from './core/complexity-analyzer';
 	import { registerSemanticFoldCommands } from './core/commands';
 	import { getSemanticAnalyzer, type FoldPreset } from './core/semantic-analyzer';
 	import type { AIAwareness } from './core/ai-awareness';
@@ -127,6 +132,8 @@
 	const complexityAnalyzer = getComplexityAnalyzer();
 	let complexityMetrics = $state<ComplexityMetrics | null>(null);
 	let complexityUpdateTimeout: ReturnType<typeof setTimeout> | null = null;
+	let complexityFlashTimeout: ReturnType<typeof setTimeout> | null = null;
+	let complexityFlashRegionKey = $state('');
 
 	// DOM refs
 	let container: HTMLDivElement;
@@ -148,6 +155,7 @@
 	// Reactive viewport height of the scrollable content area. Drives line
 	// virtualization (only rows within scrollTop +/- viewport + overscan render).
 	let viewportHeight = $state(FALLBACK_VIEWPORT_HEIGHT);
+	let viewportWidth = $state(0);
 
 	// Selection rendering
 	let cursorVisible = $state(true);
@@ -545,6 +553,43 @@
 		foldManager.expandAll();
 	}
 
+	function getComplexityRegionKey(region: ComplexityRegion): string {
+		return `${region.startLine}:${region.endLine}:${region.name ?? region.type}:${region.score}`;
+	}
+
+	export function flashComplexityRegion(region: ComplexityRegion) {
+		if (complexityFlashTimeout) {
+			clearTimeout(complexityFlashTimeout);
+		}
+
+		complexityFlashRegionKey = '';
+		requestAnimationFrame(() => {
+			complexityFlashRegionKey = getComplexityRegionKey(region);
+			complexityFlashTimeout = setTimeout(() => {
+				complexityFlashRegionKey = '';
+				complexityFlashTimeout = null;
+			}, 1000);
+		});
+	}
+
+	/**
+	 * Imperative API (accessible via `bind:this`): scroll a raw document line into
+	 * view and optionally flash the matching complexity region.
+	 */
+	export async function scrollToLine(line: number, region?: ComplexityRegion) {
+		await tick();
+		if (!editorContent) return;
+
+		const row = lineToVisualRow(line);
+		const targetTop = row * lineHeight;
+		editorContent.scrollTop = Math.max(0, targetTop - editorContent.clientHeight * 0.3);
+
+		if (region) {
+			flashComplexityRegion(region);
+		}
+		hiddenInput?.focus();
+	}
+
 	function handleFoldIndicatorClick(lineNumber: number, e: MouseEvent) {
 		e.preventDefault();
 		e.stopPropagation();
@@ -579,6 +624,16 @@
 	// Total scrollable content height (in px) for the full document, accounting
 	// for folded/hidden lines. Drives the spacer so the scrollbar stays correct.
 	let totalContentHeight = $derived(Math.max(visibleLines.length, 1) * lineHeight);
+	let estimatedContentWidth = $derived.by(() => {
+		let maxLineLength = 0;
+		for (const line of lines) {
+			maxLineLength = Math.max(maxLineLength, line?.text.length ?? 0);
+		}
+		return Math.max(
+			viewportWidth,
+			gutterWidth + CONTENT_PADDING + maxLineLength * charWidth + CONTENT_PADDING
+		);
+	});
 
 	// Windowed slice of visibleLines: only the rows intersecting the viewport
 	// (plus overscan) are rendered to the DOM. Each entry keeps its absolute
@@ -768,6 +823,9 @@
 	$effect(() => {
 		if (editorState && language !== editorState.language) {
 			editorState.setLanguage(language);
+			if (complexityHighlighting) {
+				updateComplexityMetrics();
+			}
 		}
 	});
 
@@ -813,6 +871,7 @@
 		// Measure the initial viewport height for line virtualization.
 		if (editorContent) {
 			viewportHeight = editorContent.clientHeight || FALLBACK_VIEWPORT_HEIGHT;
+			viewportWidth = editorContent.clientWidth || 0;
 		}
 
 		// Register semantic fold commands for the command palette
@@ -845,6 +904,7 @@
 			inputHandlers.measureCharacter();
 			if (editorContent) {
 				viewportHeight = editorContent.clientHeight || FALLBACK_VIEWPORT_HEIGHT;
+				viewportWidth = editorContent.clientWidth || 0;
 			}
 		});
 		if (container) {
@@ -892,6 +952,11 @@
 				complexityUpdateTimeout = null;
 			}
 
+			if (complexityFlashTimeout) {
+				clearTimeout(complexityFlashTimeout);
+				complexityFlashTimeout = null;
+			}
+
 			// Clean up semantic fold command registration
 			unregisterSemanticFoldCommands?.();
 			unregisterSemanticFoldCommands = null;
@@ -1001,12 +1066,27 @@
 	>
 		<!-- Complexity highlighting layer (bottommost) -->
 		{#if complexityHighlighting && complexityMetrics}
+			<ComplexityHeatLayer
+				metrics={complexityMetrics}
+				{lineHeight}
+				{gutterWidth}
+				totalHeight={totalContentHeight}
+				contentWidth={estimatedContentWidth}
+				minScore={complexityThreshold}
+				enabled={complexityHighlighting}
+				flashRegionKey={complexityFlashRegionKey}
+				lineToVisualRow={(line) => lineToVisualRow(line)}
+			/>
 			<ComplexityLayer
 				metrics={complexityMetrics}
 				{lineHeight}
 				{gutterWidth}
+				totalHeight={totalContentHeight}
+				contentWidth={estimatedContentWidth}
 				minScore={complexityThreshold}
 				enabled={complexityHighlighting}
+				flashRegionKey={complexityFlashRegionKey}
+				lineToVisualRow={(line) => lineToVisualRow(line)}
 			/>
 		{/if}
 

package/dist/components/editor/CustomEditor.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { EditorPreferences } from '../../types';
 import { type Cursor } from './core';
-import { type ComplexityMetrics } from './core/complexity-analyzer';
+import { type ComplexityMetrics, type ComplexityRegion } from './core/complexity-analyzer';
 import { type FoldPreset } from './core/semantic-analyzer';
 import type { AIAwareness } from './core/ai-awareness';
 interface Props {
@@ -36,6 +36,8 @@ interface Props {
 declare const CustomEditor: import("svelte").Component<Props, {
     applyFoldPreset: (preset: FoldPreset) => void;
     unfoldAll: () => void;
+    flashComplexityRegion: (region: ComplexityRegion) => void;
+    scrollToLine: (line: number, region?: ComplexityRegion) => Promise<void>;
 }, "content">;
 type CustomEditor = ReturnType<typeof CustomEditor>;
 export default CustomEditor;

package/dist/components/editor/EchoCursorLayer.svelte

@@ -37,19 +37,23 @@
 	let echoCursors = $state<EchoCursor[]>([]);
 	let replayingCursors = $state<Set<string>>(new Set());
 	let recentReplay = new SvelteMap<string, { text: string; opacity: number }>();
+	let echoContents = $state<Record<string, string>>({});
 
 	// Subscribe to echo cursor events
 	onMount(() => {
 		// Initialize with current cursors
 		echoCursors = manager.getEchoCursors();
+		echoContents = getEchoContents();
 
 		const unsubscribe = manager.subscribe((event: EchoCursorEvent) => {
 			switch (event.type) {
 				case 'echo-added':
 					echoCursors = manager.getEchoCursors();
+					echoContents = getEchoContents();
 					break;
 				case 'echo-removed':
 					echoCursors = manager.getEchoCursors();
+					echoContents = getEchoContents();
 					break;
 				case 'replay-started':
 					replayingCursors = new Set([...replayingCursors, event.cursorId]);
@@ -63,6 +67,8 @@
 					break;
 				case 'replay-completed':
 					replayingCursors = new Set([...replayingCursors].filter((id) => id !== event.cursorId));
+					echoCursors = manager.getEchoCursors();
+					echoContents = getEchoContents();
 					// Fade out replay text
 					setTimeout(() => {
 						const entry = recentReplay.get(event.cursorId);
@@ -78,6 +84,7 @@
 					if (!event.enabled) {
 						echoCursors = [];
 						replayingCursors = new Set();
+						echoContents = {};
 						recentReplay.clear();
 					}
 					break;
@@ -113,6 +120,12 @@
 		return tokens[Math.max(index, 0) % tokens.length];
 	}
 
+	function getEchoContents(): Record<string, string> {
+		return Object.fromEntries(
+			manager.getEchoCursors().map((cursor) => [cursor.id, manager.getEchoContent(cursor.id)])
+		);
+	}
+
 	/**
 	 * Handle remove echo click
 	 */
@@ -127,6 +140,7 @@
 		{#each echoCursors as cursor (cursor.id)}
 			{@const isReplaying = replayingCursors.has(cursor.id)}
 			{@const replayText = recentReplay.get(cursor.id)}
+			{@const echoContent = echoContents[cursor.id] ?? ''}
 
 			<!-- Echo cursor marker -->
 			<div
@@ -171,6 +185,21 @@
 					<div class="echo-cursor__ripple"></div>
 				{/if}
 			</div>
+
+			<!-- Echo readout: the mirror's CURRENT line at the echo position, drawn on
+			     an opaque lane so it never composites over the editor's own code
+			     glyphs (a full-document transparent overlay read as doubled text). -->
+			<div
+				class="echo-cursor-buffer"
+				style="top: {cursor.position.line *
+					lineHeight}px; left: {gutterWidth}px; height: {lineHeight}px; --echo-color: var({getEchoColorToken(
+					cursor
+				)});"
+			>
+				<span class="echo-cursor-buffer__text"
+					>{echoContent.split('\n')[cursor.position.line] || ' '}</span
+				>
+			</div>
 		{/each}
 
 		<!-- Mode indicator -->
@@ -199,6 +228,8 @@
 	.echo-cursor {
 		position: absolute;
 		pointer-events: auto;
+		/* Keep the caret/label/replay above the echo readout lane. */
+		z-index: 1;
 	}
 
 	.echo-cursor__caret {
@@ -327,6 +358,35 @@
 		animation: echo-ripple 0.4s ease-out forwards;
 	}
 
+	.echo-cursor-buffer {
+		position: absolute;
+		right: 0;
+		display: flex;
+		align-items: center;
+		padding: 0 8px 0 10px;
+		font-family: monospace;
+		font-size: 13px;
+		line-height: 1;
+		white-space: pre;
+		overflow: hidden;
+		pointer-events: none;
+		/* Opaque lane: the echoed line must never show through onto the editor's
+		   own glyphs — that reads as doubled, illegible code. */
+		background: linear-gradient(
+			90deg,
+			color-mix(in srgb, var(--echo-color) 24%, var(--ide-bg-secondary, #1a2744)) 0%,
+			var(--ide-bg-secondary, #1a2744) 72%
+		);
+		border-left: 2px solid var(--echo-color);
+		box-shadow: 0 1px 4px color-mix(in srgb, #000 35%, transparent);
+	}
+
+	.echo-cursor-buffer__text {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		color: color-mix(in srgb, var(--echo-color) 60%, var(--ide-text-primary));
+	}
+
 	@keyframes echo-ripple {
 		0% {
 			transform: scale(0.5);

package/dist/components/editor/PluginPreviewSandbox.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
 	/**
-	 * Plugin Preview Sandbox
+	 * Plugin Preview
 	 *
-	 * A sandboxed environment for previewing plugin effects
-	 * before applying them to the main editor. Supports live
-	 * code transformation preview with rollback capability.
+	 * Preview plugin effects before applying them to the main editor.
+	 * Plugin transform functions are trusted caller-provided code and run
+	 * in the host realm, not in an isolated sandbox.
 	 */
 
 	interface PluginTransform {
@@ -71,6 +71,9 @@
 	let isProcessing = $state(false);
 	let previewMode = $state<'split' | 'unified' | 'diff'>('split');
 	let sandboxContainer = $state<HTMLDivElement>(null!);
+	let transformRunId = 0;
+
+	const TRANSFORM_TIMEOUT_MS = 2_000;
 
 	// Demo plugins for showcase
 	const demoPlugins: PluginDefinition[] = [
@@ -164,18 +167,20 @@
 	const activePlugins = $derived(plugins.length > 0 ? plugins : demoPlugins);
 
 	/**
-	 * Run plugin transform
+	 * Run trusted plugin transform with an async watchdog.
 	 */
 	async function runTransform(plugin: PluginDefinition) {
+		const runId = ++transformRunId;
 		selectedPlugin = plugin;
 		isProcessing = true;
 
 		const startTime = performance.now();
 
 		try {
-			const result = await Promise.resolve(plugin.transform(code));
+			const result = await runTrustedTransform(plugin, code);
 			const executionTime = performance.now() - startTime;
 
+			if (runId !== transformRunId) return;
 			currentTransform = {
 				id: `${plugin.id}-${Date.now()}`,
 				pluginName: plugin.name,
@@ -187,6 +192,7 @@
 				executionTime
 			};
 		} catch (error) {
+			if (runId !== transformRunId) return;
 			currentTransform = {
 				id: `${plugin.id}-${Date.now()}`,
 				pluginName: plugin.name,
@@ -198,9 +204,35 @@
 				error: error instanceof Error ? error.message : 'Unknown error',
 				executionTime: performance.now() - startTime
 			};
+		} finally {
+			if (runId === transformRunId) {
+				isProcessing = false;
+			}
 		}
+	}
 
-		isProcessing = false;
+	function runTrustedTransform(plugin: PluginDefinition, input: string): Promise<string> {
+		let timeoutId: ReturnType<typeof setTimeout> | undefined;
+		const timeout = new Promise<never>((_, reject) => {
+			timeoutId = setTimeout(() => {
+				reject(new Error(`Transform timed out after ${TRANSFORM_TIMEOUT_MS}ms`));
+			}, TRANSFORM_TIMEOUT_MS);
+		});
+
+		const transform = Promise.resolve()
+			.then(() => plugin.transform(input))
+			.then((result) => {
+				if (typeof result !== 'string') {
+					throw new Error('Transform returned a non-string result');
+				}
+				return result;
+			});
+
+		return Promise.race([transform, timeout]).finally(() => {
+			if (timeoutId !== undefined) {
+				clearTimeout(timeoutId);
+			}
+		});
 	}
 
 	/**
@@ -246,8 +278,10 @@
 	 * Reset to original
 	 */
 	function resetTransform() {
+		transformRunId++;
 		currentTransform = null;
 		selectedPlugin = null;
+		isProcessing = false;
 	}
 
 	/**
@@ -273,7 +307,7 @@
 {#if visible}
 	<div class="plugin-sandbox" bind:this={sandboxContainer}>
 		<div class="plugin-sandbox__header">
-			<h3 class="plugin-sandbox__title">Plugin Preview Sandbox</h3>
+			<h3 class="plugin-sandbox__title">Plugin Preview</h3>
 			<div class="plugin-sandbox__actions">
 				<div class="preview-mode-toggle">
 					<button
@@ -387,7 +421,7 @@
 					<div class="preview-empty">
 						<p>Select a plugin to preview its transformation</p>
 						<p class="preview-hint">
-							Your code will be transformed in this sandbox before applying
+							Trusted plugin code runs in this editor before applying changes
 						</p>
 					</div>
 				{/if}

package/dist/components/editor/PluginPreviewSandbox.svelte.d.ts

@@ -11,11 +11,11 @@ interface PluginDefinition {
     transform: (code: string) => string | Promise<string>;
 }
 /**
- * Plugin Preview Sandbox
+ * Plugin Preview
  *
- * A sandboxed environment for previewing plugin effects
- * before applying them to the main editor. Supports live
- * code transformation preview with rollback capability.
+ * Preview plugin effects before applying them to the main editor.
+ * Plugin transform functions are trusted caller-provided code and run
+ * in the host realm, not in an isolated sandbox.
  */
 interface PluginTransform {
     /** Transform ID */

package/dist/components/editor/core/complexity-analyzer.d.ts

@@ -22,6 +22,13 @@ export interface ComplexityFactors {
     /** Number of function calls */
     callCount: number;
 }
+export interface ComplexityContribution {
+    line: number;
+    kind: string;
+    reason: string;
+    increment: number;
+    nesting: number;
+}
 /**
  * A region of code with its complexity analysis
  */
@@ -40,6 +47,10 @@ export interface ComplexityRegion {
     type: 'function' | 'class' | 'block' | 'file';
     /** Region name if identifiable */
     name?: string;
+    /** Exact SonarSource Cognitive Complexity score */
+    cognitiveComplexity: number;
+    /** Per-increment Cognitive Complexity contribution breakdown */
+    contributions: ComplexityContribution[];
 }
 /**
  * Overall complexity metrics for a document
@@ -53,6 +64,8 @@ export interface ComplexityMetrics {
     regions: ComplexityRegion[];
     /** Lines that exceed threshold */
     hotspots: number[];
+    /** Sum of exact Cognitive Complexity across all regions */
+    totalCognitiveComplexity: number;
 }
 /**
  * Complexity Analyzer class
@@ -76,6 +89,7 @@ export declare class ComplexityAnalyzer {
      * Compute a cache key from all line content using a fast hash
      */
     private computeCacheKey;
+    private getComplexityLanguage;
     /**
      * Identify code regions (functions, classes, blocks)
      *
@@ -83,6 +97,9 @@ export declare class ComplexityAnalyzer {
      * (object literals, destructuring) that don't represent new blocks.
      */
     private identifyRegions;
+    private identifyPythonRegions;
+    private identifyGoRegions;
+    private getGoDeclaration;
     /**
      * Check if a `{` at position `ch` is the opening brace of a function/class definition
      */
@@ -99,6 +116,20 @@ export declare class ComplexityAnalyzer {
      * Calculate complexity factors for a range of lines
      */
     private calculateFactors;
+    private calculateCognitiveContributions;
+    private calculateBraceCognitiveContributions;
+    private calculatePythonCognitiveContributions;
+    private getCodeTokens;
+    private getIndent;
+    private addContribution;
+    private describeContributionKind;
+    private getBooleanSequenceContributions;
+    private nextNonTextToken;
+    private isGoTypeSwitch;
+    private isLabelledJump;
+    private isNestedFunctionToken;
+    private isDirectRecursiveCall;
+    private isPythonTernary;
     /**
      * Calculate complexity score from factors
      */