From 4951b32d9f2cd33edd79c8d95c78f39af571db2f Mon Sep 17 00:00:00 2001
From: cardillan <122014763+cardillan@users.noreply.github.com>
Date: Sun, 7 Jun 2026 12:03:36 +0200
Subject: [PATCH] Add an MlogWatcher button to the schematic page

---
 .../lib/components/MlogWatcherButton.svelte   | 55 +++++++++++++++++--
 .../src/routes/schematics/+page.svelte        | 43 ++++++++-------
 2 files changed, 73 insertions(+), 25 deletions(-)

diff --git a/webapp/frontend/src/lib/components/MlogWatcherButton.svelte b/webapp/frontend/src/lib/components/MlogWatcherButton.svelte
index cc7ea5e70..bf84d1bdf 100644
--- a/webapp/frontend/src/lib/components/MlogWatcherButton.svelte
+++ b/webapp/frontend/src/lib/components/MlogWatcherButton.svelte
@@ -1,14 +1,15 @@
 <script lang="ts">
-	import type { MlogWatcherStore } from '$lib/mlog_watcher';
-	import { Check, CircleAlert, Cpu, LoaderCircle } from '@lucide/svelte';
+	import type {MlogWatcherStore} from '$lib/mlog_watcher';
+	import {Check, CircleAlert, Cpu, LoaderCircle} from '@lucide/svelte';
 	import EditorActionButton from './EditorActionButton.svelte';
-	import { toast } from 'svelte-sonner';
+	import {toast} from 'svelte-sonner';
 
 	let {
 		channel,
 		getText,
-		disabled = false
-	}: { channel: MlogWatcherStore; getText: () => string; disabled?: boolean } = $props();
+		disabled = false,
+		schematic = false
+	}: { channel: MlogWatcherStore; getText: () => string; disabled?: boolean; schematic?: boolean } = $props();
 
 	let status = $state<'idle' | 'sent' | 'loading' | 'error'>('idle');
 	// using ReturnType to avoid issues caused by @types/node
@@ -55,11 +56,53 @@
 		}
 		timeoutId = setTimeout(() => (status = 'idle'), 2000);
 	}
+
+	async function sendSchematicToMlogWatcher() {
+		if (timeoutId !== null) clearTimeout(timeoutId);
+
+		const text = getText();
+		status = 'loading';
+		try {
+			const response = await channel.putSchematicInLibrary(text, true);
+			if (response.status === 'success') {
+				status = 'sent';
+			} else {
+				status = 'error';
+				const errorCode = response.result.text;
+				let description = '';
+				switch (errorCode) {
+					case 'schematic_import_failed':
+						description = 'Schematic import failed (invalid file?).';
+						break;
+					case 'internal_error':
+						description = 'An internal error occurred while processing the mlog code.';
+						break;
+					case 'invalid_arguments':
+					case 'unknown_method':
+					case 'unsupported_method_version':
+						description = 'The MlogWatcher version is incompatible with this feature.';
+						break;
+					default:
+						description = 'An unknown error occurred.';
+						// typescript will generate an error if there is a case that is not covered
+						// by any case body
+						errorCode satisfies never;
+				}
+				toast.error(`Failed to send to MlogWatcher: ${description} (Error code: ${errorCode})`, {
+					duration: 8000
+				});
+			}
+		} catch (e) {
+			status = 'error';
+			console.error(e);
+		}
+		timeoutId = setTimeout(() => (status = 'idle'), 2000);
+	}
 </script>
 
 <EditorActionButton
 	tooltip={status === 'sent' ? 'Sent!' : 'Send to MlogWatcher'}
-	onClick={sendToMlogWatcher}
+	onClick={schematic ? sendSchematicToMlogWatcher : sendToMlogWatcher }
 	{disabled}
 >
 	{#if status === 'sent'}
diff --git a/webapp/frontend/src/routes/schematics/+page.svelte b/webapp/frontend/src/routes/schematics/+page.svelte
index d0f5ed4ff..9201af1c1 100644
--- a/webapp/frontend/src/routes/schematics/+page.svelte
+++ b/webapp/frontend/src/routes/schematics/+page.svelte
@@ -1,19 +1,13 @@
 <script lang="ts">
-	import { tick, untrack } from 'svelte';
-	import { Code, Play, Trash2 } from '@lucide/svelte';
-
-	import {
-		ApiHandler,
-		type CompileResponseMessage,
-		type RunResult,
-		type Sample,
-		type SourceRange
-	} from '$lib/api';
-	import { schemacode } from '$lib/grammars/schemacode_language';
-	import type { PageProps } from './$types';
-	import { setDiagnostics } from '@codemirror/lint';
-	import { compileMessagesToDiagnostics, jumpToRange, updateEditor } from '$lib/codemirror';
-	import { getThemeContext, LocalCompilerTarget, syncUrl } from '$lib/stores.svelte';
+	import {tick, untrack} from 'svelte';
+	import {Code, Play, Trash2} from '@lucide/svelte';
+
+	import {ApiHandler, type CompileResponseMessage, type RunResult, type Sample, type SourceRange} from '$lib/api';
+	import {schemacode} from '$lib/grammars/schemacode_language';
+	import type {PageProps} from './$types';
+	import {setDiagnostics} from '@codemirror/lint';
+	import {compileMessagesToDiagnostics, jumpToRange, updateEditor} from '$lib/codemirror';
+	import {getThemeContext, LocalCompilerTarget, syncUrl} from '$lib/stores.svelte';
 	import TargetPicker from '$lib/components/TargetPicker.svelte';
 	import ProjectLinks from '$lib/components/ProjectLinks.svelte';
 	import ControlBar from '$lib/components/ControlBar.svelte';
@@ -21,11 +15,13 @@
 	import EditorLayout from '$lib/components/EditorLayout.svelte';
 	import BottomActionBar from '$lib/components/BottomActionBar.svelte';
 	import EditorActionButton from '$lib/components/EditorActionButton.svelte';
-	import { InputEditorStore, OutputEditorStore } from '$lib/editors.svelte';
-	import { getSettingsContext } from '$lib/settings.svelte';
-	import { EditorView } from 'codemirror';
-	import type { OutputTabName } from '$lib/components/TabsOutput.svelte';
+	import {InputEditorStore, OutputEditorStore} from '$lib/editors.svelte';
+	import {getSettingsContext} from '$lib/settings.svelte';
+	import {EditorView} from 'codemirror';
+	import type {OutputTabName} from '$lib/components/TabsOutput.svelte';
 	import PageInfoCard from '$lib/components/PageInfoCard.svelte';
+	import {MlogWatcherStore} from '$lib/mlog_watcher';
+	import MlogWatcherButton from '$lib/components/MlogWatcherButton.svelte';
 
 	let { data }: PageProps = $props();
 	const api = new ApiHandler();
@@ -40,6 +36,7 @@
 		extensions: [schemacode()],
 		settings
 	});
+	const channel = new MlogWatcherStore(() => settings.mlogWatcherPort);
 	const encodedEditor = new OutputEditorStore(theme, [EditorView.lineWrapping], settings);
 
 	let runResults = $state<RunResult[]>([]);
@@ -188,6 +185,14 @@
 				<Trash2 class="size-4" />
 			</EditorActionButton>
 		{/snippet}
+		{#snippet outputActions(showingCode)}
+			<MlogWatcherButton
+					{channel}
+					getText={() => encodedEditor.view?.state.doc.toString() ?? ''}
+					disabled={!showingCode}
+					schematic={true}
+			/>
+		{/snippet}
 	</EditorLayout>
 
 	<!-- Bottom Action Bar (Mobile) -->