Revert ConsoleOutput component, restore original NotebookCell output

Author: milanofthe

src/lib/components/common/ConsoleOutput.svelte

@@ -7,7 +7,6 @@
 	import CodeBlock from './CodeBlock.svelte';
 	import Icon from './Icon.svelte';
 	import { tooltip } from './Tooltip.svelte';
-	import ConsoleOutput, { type LogEntry } from './ConsoleOutput.svelte';
 	import { notebookStore, type CellStatus } from '$lib/stores/notebookStore';
 	import { pyodideState } from '$lib/stores/pyodideStore';
 	import CellOutput from '$lib/components/notebook/CellOutput.svelte';
@@ -41,8 +40,8 @@
 	let codeBlockRef = $state<{ getCurrentCode: () => string } | undefined>(undefined);
 
 	// Execution output state
-	let consoleLogs = $state<LogEntry[]>([]);
-	let nextLogId = 0;
+	let stdout = $state('');
+	let stderr = $state('');
 	let plots = $state<string[]>([]);
 	let error = $state<{ message: string; traceback?: string } | null>(null);
 	let duration = $state<number | null>(null);
@@ -56,27 +55,19 @@
 	// Computed states
 	let isRunning = $derived(cellState.status === 'running');
 	let isPending = $derived(cellState.status === 'pending');
-	let hasLiveOutput = $derived(consoleLogs.length > 0 || plots.length > 0 || error);
+	let hasLiveOutput = $derived(stdout || stderr || plots.length > 0 || error);
 	let showStaticOutputs = $derived(!hasLiveOutput && staticOutputs.length > 0);
 	let hasOutput = $derived(hasLiveOutput || showStaticOutputs);
 
-	function addLog(message: string, level: LogEntry['level']) {
-		consoleLogs = [...consoleLogs, { id: nextLogId++, level, message }];
-	}
-
-	function clearLogs() {
-		consoleLogs = [];
-		nextLogId = 0;
-	}
-
 	/**
 	 * Execute this cell's code (called by store during prerequisite chain)
 	 */
 	async function executeCell(): Promise<void> {
 		const codeToRun = codeBlockRef?.getCurrentCode() ?? code;
 
 		// Clear previous output
-		clearLogs();
+		stdout = '';
+		stderr = '';
 		plots = [];
 		error = null;
 		duration = null;
@@ -93,23 +84,19 @@
 			// Execute with streaming callbacks for real-time output
 			const result = await execute(codeToRun, {
 				onStdout: (text) => {
-					addLog(text, 'output');
+					stdout = stdout ? stdout + '\n' + text : text;
 				},
 				onStderr: (text) => {
-					addLog(text, 'warning');
+					stderr = stderr ? stderr + '\n' + text : text;
 				},
 				onPlot: (data) => {
 					plots = [...plots, data];
 				}
 			});
 
-			// Final result - add any output that wasn't streamed
-			if (result.stdout && consoleLogs.every((log) => log.message !== result.stdout)) {
-				addLog(result.stdout, 'output');
-			}
-			if (result.stderr && consoleLogs.every((log) => log.message !== result.stderr)) {
-				addLog(result.stderr, 'warning');
-			}
+			// Final result (in case any output was missed)
+			stdout = result.stdout;
+			stderr = result.stderr;
 			plots = result.plots;
 			duration = result.duration;
 
@@ -146,7 +133,8 @@
 	}
 
 	function clearOutput() {
-		clearLogs();
+		stdout = '';
+		stderr = '';
 		plots = [];
 		error = null;
 		duration = null;
@@ -222,20 +210,38 @@
 				</div>
 			{/if}
 
-			{#if consoleLogs.length > 0}
+			{#if stdout}
 				<div class="output-panel">
 					<div class="panel-header">
 						<span>Output</span>
 						<div class="header-actions">
 							{#if duration !== null}
 								<span class="duration">{duration}ms</span>
 							{/if}
-							<button class="icon-btn" onclick={clearLogs} use:tooltip={'Clear'}>
+							<button class="icon-btn" onclick={clearOutput} use:tooltip={'Clear'}>
+								<Icon name="x" size={14} />
+							</button>
+						</div>
+					</div>
+					<div class="panel-body">
+						<div class="output-text">{stdout}</div>
+					</div>
+				</div>
+			{/if}
+
+			{#if stderr && !error}
+				<div class="output-panel warning">
+					<div class="panel-header">
+						<span>Stderr</span>
+						<div class="header-actions">
+							<button class="icon-btn" onclick={clearOutput} use:tooltip={'Clear'}>
 								<Icon name="x" size={14} />
 							</button>
 						</div>
 					</div>
-					<ConsoleOutput logs={consoleLogs} maxHeight={200} />
+					<div class="panel-body">
+						<div class="output-text stderr">{stderr}</div>
+					</div>
 				</div>
 			{/if}
 
@@ -325,6 +331,8 @@
 		padding: 0;
 	}
 
+	/* output-text styles are in app.css global rules */
+
 	/* Duration in header */
 	.output-panel .duration {
 		font-family: var(--font-ui);
@@ -355,6 +363,20 @@
 		border-top: 1px solid var(--border);
 	}
 
+	/* Warning panel (stderr) */
+	.output-panel.warning {
+		background: var(--warning-bg);
+	}
+
+	.output-panel.warning .panel-header {
+		background: transparent;
+		color: var(--warning);
+	}
+
+	.output-panel.warning .output-text {
+		color: var(--warning);
+	}
+
 	/* Plots */
 	.plots-body {
 		display: flex;
@@ -369,4 +391,21 @@
 		border-radius: var(--radius-sm);
 		background: transparent;
 	}
+
+	/* Output text styling */
+	.output-text {
+		font-family: var(--font-mono);
+		font-size: var(--font-base);
+		font-weight: 400;
+		line-height: 1.5;
+		margin: 0;
+		padding: var(--space-md);
+		color: var(--text-muted);
+		white-space: pre-wrap;
+		word-break: break-word;
+	}
+
+	.output-text.stderr {
+		color: var(--warning);
+	}
 </style>