Features/UI visual updates

src/lib/components/modals/AddBeaconModal.svelte

@@ -4,7 +4,7 @@
 	import { onMount } from 'svelte';
 	import type { BeaconInstance } from '@/beacon-api/types';
 	import { addInstance, updateInstance, removeInstance } from '@/services/beacon-instance';
-	import { testInstance } from '@/services/beacon-instance-connect';
+	import { checkInstance, testInstance } from '@/services/beacon-instance-connect';
 	import Button from '$lib/components/buttons/Button.svelte';
 	import { Utils } from '@/utils';
 	import SaveIcon from '@lucide/svelte/icons/save';
@@ -95,6 +95,10 @@
 			addInstance(values);
 		}
 
+		// The table shows this instance right away. Without this, its status stays
+		// "unknown" until the next sweep or page reload.
+		void checkInstance({ url, token });
+
 		onSave();
 	}
 

src/lib/components/query-builder/QueryBuilderSelectorBlock.svelte

@@ -137,11 +137,37 @@ add new query blocks, duplicate blocks, close clocks, select active blocks
 		});
 	}
 
+	let rowEl: HTMLDivElement | undefined = $state();
+
+	function scrollActiveBlockIntoView(): void {
+		const activeId = workspace.activeBlockId;
+		if (!rowEl || !activeId) return;
+
+		const activeEl = rowEl.querySelector<HTMLElement>(`[data-block-id="${CSS.escape(activeId)}"]`);
+		activeEl?.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+	}
+
+	// Keep the active block fully in view, including right after a page load/reload.
+	$effect(() => {
+		scrollActiveBlockIntoView();
+	});
+
+	// Re-correct on width changes, e.g. the page scrollbar appearing/disappearing
+	// shrinks this row without changing activeBlockId, which would otherwise leave
+	// an edge block clipped.
+	$effect(() => {
+		if (!rowEl) return;
+
+		const observer = new ResizeObserver(() => scrollActiveBlockIntoView());
+		observer.observe(rowEl);
+
+		return () => observer.disconnect();
+	});
 
 </script>
 
 <div class="query-blocks">
-	<div class="query-blocks-row" onwheel={handleQueryBlocksWheel}>
+	<div class="query-blocks-row" bind:this={rowEl} onwheel={handleQueryBlocksWheel}>
 		{#each workspace.blocks as block (block.id)}
 			<!-- Derive display data for this block from the workspace. -->
 			{@const status = QueryWorkspace.getStatus(block)}
@@ -156,7 +182,7 @@ add new query blocks, duplicate blocks, close clocks, select active blocks
 			{@const missingUrl = workspace.missingInstanceUrlFor(block)}
 			{@const blockReason = blockReasonFor(block)}
 			<div
-
+				data-block-id={block.id}
 				class="query-block-wrapper"
 				class:query-block-wrapper--active={block.id === workspace.activeBlockId}
 				role="button"
@@ -406,6 +432,7 @@ add new query blocks, duplicate blocks, close clocks, select active blocks
 			overflow-x: auto;
 			overflow-y: hidden;
 			padding-bottom: 0.25rem;
+			scrollbar-width: thin;
 		}
 	}
 

src/routes/queries/saved/+page.svelte

@@ -163,10 +163,10 @@
 										size="sm"
 										variant="outline"
 										onclick={() => openInWorkbench(entry)}
-										title="Open in Query Workbench"
+										title="Open in Query Builder"
 									>
 										<WorkbenchIcon />
-										Workbench
+										Query Builder
 									</Button>
 									<Button
 										size="sm"