fix: running page now opens the appropriate slug

Author: Torwent

src-tauri/src/commands.rs

@@ -277,38 +277,34 @@ pub async fn run_script(
 
     let app_clone = app.clone();
 
-    std::thread::spawn(move || {
-        loop {
-            // 1. Scope to limit how long we hold the lock
-            let status = {
-                let mut inner_guard = shared_process.lock().unwrap();
-                if let Some(child) = inner_guard.as_mut() {
-                    child.try_wait()
-                } else {
-                    return;
-                }
-            };
-
-            match status {
-                Ok(Some(exit_status)) => {
-                    println!("Process {} exited with status: {}", id, exit_status);
+    std::thread::spawn(move || loop {
+        let status = {
+            let mut inner_guard = shared_process.lock().unwrap();
+            if let Some(child) = inner_guard.as_mut() {
+                child.try_wait()
+            } else {
+                return;
+            }
+        };
 
-                    if let Some(launcher_state) = app_clone.try_state::<Mutex<LauncherVariables>>()
-                    {
-                        let guard = launcher_state.lock().unwrap();
-                        guard.scripts.lock().unwrap().remove(&id);
-                    }
+        match status {
+            Ok(Some(exit_status)) => {
+                println!("Process {} exited with status: {}", id, exit_status);
 
-                    let _ = app_clone.emit("process-finished", id);
-                    break;
-                }
-                Ok(None) => {
-                    std::thread::sleep(std::time::Duration::from_millis(500));
-                }
-                Err(e) => {
-                    println!("Error checking process status: {}", e);
-                    break;
+                if let Some(launcher_state) = app_clone.try_state::<Mutex<LauncherVariables>>() {
+                    let guard = launcher_state.lock().unwrap();
+                    guard.scripts.lock().unwrap().remove(&id);
                 }
+
+                let _ = app_clone.emit("process-finished", id);
+                break;
+            }
+            Ok(None) => {
+                std::thread::sleep(std::time::Duration::from_millis(500));
+            }
+            Err(e) => {
+                println!("Error checking process status: {}", e);
+                break;
             }
         }
     });

src/lib/communication.svelte.ts

@@ -2,49 +2,59 @@ import { Channel } from "@tauri-apps/api/core"
 
 interface ChannelEntry {
 	name: string
-	channel: Channel<string>
-	logs: string[]
+	version: number
 	stopped: boolean
 }
 
+const MAX_LOGS = 1000
+
 class ChannelManager {
+	private _logsBuffer: Record<number, string[]> = {}
+
 	processes = $state<number[]>([])
 	channels = $state<Record<number, ChannelEntry>>({})
 
 	async createChannel(name: string): Promise<Channel<string>> {
 		const channel = new Channel<string>()
 		const id = channel.id
 
+		this._logsBuffer[id] = []
+		this.channels[id] = { name, version: 0, stopped: false }
 		this.processes.push(id)
-		this.channels[id] = {
-			name,
-			channel,
-			logs: [],
-			stopped: false
-		}
 
-		this.channels[id].channel.onmessage = (msg: string) => {
+		channel.onmessage = (msg: string) => {
 			const entry = this.channels[id]
-			if (entry && !entry.stopped) {
-				entry.logs.push(msg)
+			if (!entry || entry.stopped) return
+
+			const buffer = this._logsBuffer[id]
+			buffer.push(msg)
+
+			if (buffer.length > MAX_LOGS) {
+				buffer.shift()
 			}
+
+			entry.version++
 		}
 
-		return this.channels[id].channel
+		return channel
+	}
+
+	getLogs(id: number): string[] {
+		const entry = this.channels[id]
+		if (!entry) return []
+		entry.version
+		return this._logsBuffer[id]
 	}
 
 	stopChannel(id: number) {
-		if (this.channels[id]) {
-			this.channels[id].stopped = true
-		}
+		if (this.channels[id]) this.channels[id].stopped = true
 	}
 
 	removeChannel(id: number) {
 		if (!this.channels[id]) return
-
+		delete this._logsBuffer[id]
 		delete this.channels[id]
 		this.processes = this.processes.filter((item) => item !== id)
-		console.log(`Channel "${id}" removed.`)
 	}
 }
 

src/routes/(app)/running/+layout.svelte

@@ -19,17 +19,12 @@
 		)
 	)
 
-	let selected = $state(0)
-	const runningIdx = $derived(running.indexOf(process))
-	$effect(() => {
-		if (runningIdx == -1) {
-			const stoppedIdx = stopped.indexOf(process)
-			if (stoppedIdx != -1) {
-				selected = stoppedIdx + running.length
-			} else {
-				selected = 0
-			}
-		}
+	const selected = $derived.by(() => {
+		const i = running.indexOf(process)
+		if (i > -1) return i
+		const idx = stopped.indexOf(process)
+		if (idx == -1) return 0
+		return idx + running.length
 	})
 
 	const hasProcesses = $derived(running.length > 0 || stopped.length > 0)
@@ -53,15 +48,11 @@
 	<ul class="h-full w-full overflow-y-scroll">
 		{#each running as entry, idx}
 			<li
-				class="flex preset-outlined-success-200-800 hover:preset-tonal focus:preset-tonal"
+				class="flex preset-outlined-success-200-800 text-sm hover:preset-tonal focus:preset-tonal"
 				class:bg-surface-300-700={selected === idx}
 				class:border-primary-300-700={selected === idx}
 			>
-				<a
-					href={"/running/" + entry}
-					class="my-2 flex h-full w-full justify-between px-2"
-					onclick={() => (selected = idx)}
-				>
+				<a href={"/running/" + entry} class="my-2 flex h-full w-full justify-between px-2">
 					{channelManager.channels[entry].name}
 				</a>
 			</li>
@@ -73,11 +64,7 @@
 				class:bg-surface-300-700={selected === idx + running.length}
 				class:border-primary-300-700={selected === idx + running.length}
 			>
-				<a
-					href={"/running/" + entry}
-					class="my-2 flex h-full w-full justify-between px-2"
-					onclick={() => (selected = idx + running.length)}
-				>
+				<a href={"/running/" + entry} class="my-2 flex h-full w-full justify-between px-2">
 					{channelManager.channels[entry].name}
 				</a>
 			</li>
@@ -107,7 +94,6 @@
 						class="btn rounded-lg border border-surface-500 bg-surface-500/70 p-2"
 						onclick={async () => {
 							channelManager.removeChannel(stopped[selected - running.length])
-							selected = -1
 							await Promise.all([invalidate("layout:channel"), invalidate("layout:running")])
 							await goto("/running")
 						}}
@@ -119,7 +105,7 @@
 		{/if}
 
 		<div
-			class="block min-h-full w-full min-w-fit gap-2 px-4 text-left font-mono text-sm wrap-break-word whitespace-break-spaces"
+			class="block min-h-full w-full min-w-fit gap-2 px-4 text-left wrap-break-word whitespace-break-spaces"
 			class:bg-stone-950={hasProcesses}
 			class:overflow-y-scroll={hasProcesses}
 		>

src/routes/(app)/running/+layout.ts

@@ -1,13 +1,8 @@
-import { channelManager } from "$lib/communication.svelte"
-
 export const prerender = false
 export const ssr = false
 
 export const load = async ({ depends, params: { slug } }) => {
 	depends("layout:running")
 	const process = Number(slug)
-
-	return {
-		process
-	}
+	return { process }
 }

src/routes/(app)/running/[slug]/+page.svelte

@@ -1,27 +1,38 @@
 <script lang="ts">
 	import { channelManager } from "$lib/communication.svelte"
+
 	let { data } = $props()
 
-	function transformMessage(msg: string) {
-		let style: string | null = null
-		if (!msg.startsWith("\0\0")) return { message: msg, style }
-		const flag = msg.slice(0, 8)
+	const STYLES: Record<number, string> = {
+		50: "text-yellow-500", //2 Warning
+		52: "text-red-500", //4 Error
+		56: "text-green-500" //8 Success
+	}
 
-		if (flag.endsWith("2")) {
-			style = "warning"
-		} else if (flag.endsWith("4")) {
-			style = "error"
-		} else if (flag.endsWith("8")) {
-			style = "success"
+	function transformLog(msg: string) {
+		if (msg.length < 8 || msg.charCodeAt(0) !== 0 || msg.charCodeAt(1) !== 0) {
+			return { text: msg, cls: "" }
 		}
 
-		return { message: msg.slice(8), style }
+		const code = msg.charCodeAt(7)
+		return {
+			text: msg.slice(8),
+			cls: STYLES[code] || ""
+		}
 	}
+
+	let logs = $derived.by(() => {
+		const raw = channelManager.getLogs(data.process)
+		const out = new Array(raw.length)
+		for (let i = 0; i < raw.length; i++) {
+			out[i] = transformLog(raw[i])
+		}
+		return out
+	})
 </script>
 
-{#if channelManager.channels[data.process]}
-	{#each channelManager.channels[data.process].logs as msg}
-		{@const { message, style } = transformMessage(msg)}
-		<p class={style ? `text-${style}-500` : ""}>{message}</p>
+<div class="font-mono text-sm leading-tight">
+	{#each logs as log}
+		<p class={log.cls}>{log.text}</p>
 	{/each}
-{/if}
+</div>