From 93bd8ba962c58a8db918d8f356cd28d0d8ddfcee Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Tue, 17 Mar 2026 19:51:16 -0400
Subject: [PATCH] feat: add hide_ae_menu toggle to Jitsi URL builder advanced
 panel

Adds ae_hide_menu=true query param option to suppress the AE navigation
chrome when embedding the Jitsi video conference page in Novi or other
host pages that provide their own navigation.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../ae_idaa_comp__jitsi_url_builder.svelte    | 631 ++++++++++--------
 1 file changed, 363 insertions(+), 268 deletions(-)

diff --git a/src/routes/idaa/(idaa)/jitsi_reports/ae_idaa_comp__jitsi_url_builder.svelte b/src/routes/idaa/(idaa)/jitsi_reports/ae_idaa_comp__jitsi_url_builder.svelte
index 97796c8b..d7fddb42 100644
--- a/src/routes/idaa/(idaa)/jitsi_reports/ae_idaa_comp__jitsi_url_builder.svelte
+++ b/src/routes/idaa/(idaa)/jitsi_reports/ae_idaa_comp__jitsi_url_builder.svelte
@@ -1,67 +1,78 @@
 <script lang="ts">
-	// ae_idaa_comp__jitsi_url_builder.svelte
-	// Builds and previews Jitsi iframe URLs for testing and Novi page configuration.
-	// Only shown to trusted_access users — not for general IDAA members.
+    // ae_idaa_comp__jitsi_url_builder.svelte
+    // Builds and previews Jitsi iframe URLs for testing and Novi page configuration.
+    // Only shown to trusted_access users — not for general IDAA members.
 
-	// --- Environment presets ---
-	const BASE_URL_OPTIONS = [
-		{ label: 'Production', value: 'https://sk-idaa.oneskyit.com/idaa/video_conferences' },
-		{ label: 'Dev / Staging', value: 'https://dev-idaa.oneskyit.com/idaa/video_conferences' },
-		{ label: 'Local', value: 'http://idaa.localhost:5173/idaa/video_conferences' },
-		{ label: 'Custom…', value: 'custom' }
-	];
+    // --- Environment presets ---
+    const BASE_URL_OPTIONS = [
+        {
+            label: 'Production',
+            value: 'https://sk-idaa.oneskyit.com/idaa/video_conferences'
+        },
+        {
+            label: 'Dev / Staging',
+            value: 'https://dev-idaa.oneskyit.com/idaa/video_conferences'
+        },
+        {
+            label: 'Local',
+            value: 'http://idaa.localhost:5173/idaa/video_conferences'
+        },
+        { label: 'Custom…', value: 'custom' }
+    ];
 
-	// --- State ---
-	let base_url_preset = $state(BASE_URL_OPTIONS[1].value); // dev by default
-	let base_url_custom = $state('');
-	let room_name = $state('IDAA-Test-Meeting');
-	let site_key = $state('restricted-access');
-	let uuid = $state('');
-	let is_moderator = $state(false);
-	let domain = $state('jitsi.dgrzone.com');
-	let start_muted = $state(true);
-	let start_hidden = $state(false);
-	let disable_incoming_msg = $state(true);
-	let disable_participant_joined = $state(false);
-	let disable_participant_left = $state(false);
-	let disable_reaction = $state(true);
-	let disable_raise_hand = $state(true);
+    // --- State ---
+    let base_url_preset = $state(BASE_URL_OPTIONS[1].value); // dev by default
+    let base_url_custom = $state('');
+    let room_name = $state('IDAA-Test-Meeting');
+    let site_key = $state('restricted-access');
+    let uuid = $state('');
+    let is_moderator = $state(false);
+    let domain = $state('jitsi.dgrzone.com');
+    let start_muted = $state(true);
+    let start_hidden = $state(false);
+    let disable_incoming_msg = $state(true);
+    let disable_participant_joined = $state(false);
+    let disable_participant_left = $state(false);
+    let disable_reaction = $state(true);
+    let disable_raise_hand = $state(true);
 
-	// Toggle to hide AE system menu when embedding in other pages
-	let hide_ae_menu = $state(false);
+    // Toggle to hide AE system menu when embedding in other pages
+    let hide_ae_menu = $state(false);
 
-	let show_advanced = $state(false);
-	let show_sound = $state(false);
-	let output_mode = $state<'url' | 'iframe'>('url');
-	let copied = $state(false);
+    let show_advanced = $state(false);
+    let show_sound = $state(false);
+    let output_mode = $state<'url' | 'iframe'>('url');
+    let copied = $state(false);
 
-	// --- Derived URL ---
-	let effective_base = $derived(
-		base_url_preset === 'custom' ? base_url_custom.trim() : base_url_preset
-	);
+    // --- Derived URL ---
+    let effective_base = $derived(
+        base_url_preset === 'custom' ? base_url_custom.trim() : base_url_preset
+    );
 
-	let built_url = $derived.by(() => {
-		if (!effective_base || !room_name.trim()) return '';
-		const p = new URLSearchParams();
-		if (uuid.trim()) p.set('uuid', uuid.trim());
-		p.set('iframe', 'true');
-		p.set('key', site_key.trim() || 'restricted-access');
-		p.set('room', room_name.trim());
-		if (is_moderator) p.set('moderator', 'true');
-		if (domain.trim() && domain.trim() !== 'jitsi.dgrzone.com') p.set('domain', domain.trim());
-		if (start_muted)  p.set('start_muted', 'true');
-		if (start_hidden) p.set('start_hidden', 'true');
-		if (disable_incoming_msg)      p.set('incoming_msg_sound', 'true');
-		if (disable_participant_joined) p.set('participant_joined_sound', 'true');
-		if (disable_participant_left)  p.set('participant_left_sound', 'true');
-		if (disable_reaction)          p.set('reaction_sound', 'true');
-		if (disable_raise_hand)        p.set('raise_hand_sound', 'true');
-		// AE embed option: hide AE system menu when embedding in other pages
-		if (hide_ae_menu)              p.set('ae_hide_menu', 'true');
-		return `${effective_base}?${p.toString()}`;
-	});
+    let built_url = $derived.by(() => {
+        if (!effective_base || !room_name.trim()) return '';
+        const p = new URLSearchParams();
+        if (uuid.trim()) p.set('uuid', uuid.trim());
+        p.set('iframe', 'true');
+        p.set('key', site_key.trim() || 'restricted-access');
+        p.set('room', room_name.trim());
+        if (is_moderator) p.set('moderator', 'true');
+        if (domain.trim() && domain.trim() !== 'jitsi.dgrzone.com')
+            p.set('domain', domain.trim());
+        if (start_muted) p.set('start_muted', 'true');
+        if (start_hidden) p.set('start_hidden', 'true');
+        if (disable_incoming_msg) p.set('incoming_msg_sound', 'true');
+        if (disable_participant_joined)
+            p.set('participant_joined_sound', 'true');
+        if (disable_participant_left) p.set('participant_left_sound', 'true');
+        if (disable_reaction) p.set('reaction_sound', 'true');
+        if (disable_raise_hand) p.set('raise_hand_sound', 'true');
+        // AE embed option: hide AE system menu when embedding in other pages
+        if (hide_ae_menu) p.set('ae_hide_menu', 'true');
+        return `${effective_base}?${p.toString()}`;
+    });
 
-	let iframe_snippet = $derived(`<p>
+    let iframe_snippet = $derived(`<p>
   <iframe
     width="100%"
     height="950"
@@ -74,229 +85,313 @@
   ></iframe>
 </p>`);
 
-	let output = $derived(output_mode === 'iframe' ? iframe_snippet : built_url);
+    let output = $derived(
+        output_mode === 'iframe' ? iframe_snippet : built_url
+    );
 
-	function copy_output() {
-		if (!output) return;
-		navigator.clipboard.writeText(output).then(() => {
-			copied = true;
-			setTimeout(() => (copied = false), 2000);
-		});
-	}
+    function copy_output() {
+        if (!output) return;
+        navigator.clipboard.writeText(output).then(() => {
+            copied = true;
+            setTimeout(() => (copied = false), 2000);
+        });
+    }
 </script>
 
 <div class="space-y-3 text-sm">
+    <!-- Environment + Room (always visible) -->
+    <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
+        <div>
+            <label
+                for="jub_base_url"
+                class="block text-xs uppercase tracking-wide opacity-40 mb-1"
+            >
+                Environment
+            </label>
+            <select
+                id="jub_base_url"
+                bind:value={base_url_preset}
+                class="border border-surface-200-800 rounded px-2 py-1 w-full bg-surface-50-950 text-sm"
+            >
+                {#each BASE_URL_OPTIONS as opt}
+                    <option value={opt.value}>{opt.label}</option>
+                {/each}
+            </select>
+            {#if base_url_preset === 'custom'}
+                <input
+                    type="url"
+                    bind:value={base_url_custom}
+                    placeholder="https://…/idaa/video_conferences"
+                    class="border border-surface-200-800 rounded px-2 py-1 w-full bg-surface-50-950 text-sm font-mono mt-1"
+                />
+            {/if}
+        </div>
+        <div>
+            <label
+                for="jub_room"
+                class="block text-xs uppercase tracking-wide opacity-40 mb-1"
+            >
+                Room Name <span class="text-error-500">*</span>
+            </label>
+            <input
+                type="text"
+                id="jub_room"
+                bind:value={room_name}
+                placeholder="IDAA-Meeting-Room"
+                class="border border-surface-200-800 rounded px-2 py-1 w-full bg-surface-50-950 text-sm font-mono"
+            />
+        </div>
+    </div>
 
-	<!-- Environment + Room (always visible) -->
-	<div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
-		<div>
-			<label for="jub_base_url" class="block text-xs uppercase tracking-wide opacity-40 mb-1">
-				Environment
-			</label>
-			<select
-				id="jub_base_url"
-				bind:value={base_url_preset}
-				class="border border-surface-200-800 rounded px-2 py-1 w-full bg-surface-50-950 text-sm"
-			>
-				{#each BASE_URL_OPTIONS as opt}
-					<option value={opt.value}>{opt.label}</option>
-				{/each}
-			</select>
-			{#if base_url_preset === 'custom'}
-				<input
-					type="url"
-					bind:value={base_url_custom}
-					placeholder="https://…/idaa/video_conferences"
-					class="border border-surface-200-800 rounded px-2 py-1 w-full bg-surface-50-950 text-sm font-mono mt-1"
-				/>
-			{/if}
-		</div>
-		<div>
-			<label for="jub_room" class="block text-xs uppercase tracking-wide opacity-40 mb-1">
-				Room Name <span class="text-error-500">*</span>
-			</label>
-			<input
-				type="text"
-				id="jub_room"
-				bind:value={room_name}
-				placeholder="IDAA-Meeting-Room"
-				class="border border-surface-200-800 rounded px-2 py-1 w-full bg-surface-50-950 text-sm font-mono"
-			/>
-		</div>
-	</div>
+    <!-- UUID + Key -->
+    <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
+        <div>
+            <label
+                for="jub_uuid"
+                class="block text-xs uppercase tracking-wide opacity-40 mb-1"
+            >
+                Novi UUID <span class="opacity-60">(blank = guest)</span>
+            </label>
+            <input
+                type="text"
+                id="jub_uuid"
+                bind:value={uuid}
+                placeholder="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
+                class="border border-surface-200-800 rounded px-2 py-1 w-full bg-surface-50-950 text-sm font-mono"
+            />
+        </div>
+        <div>
+            <label
+                for="jub_key"
+                class="block text-xs uppercase tracking-wide opacity-40 mb-1"
+            >
+                Site Key
+            </label>
+            <input
+                type="text"
+                id="jub_key"
+                bind:value={site_key}
+                class="border border-surface-200-800 rounded px-2 py-1 w-full bg-surface-50-950 text-sm font-mono"
+            />
+        </div>
+    </div>
 
-	<!-- UUID + Key -->
-	<div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
-		<div>
-			<label for="jub_uuid" class="block text-xs uppercase tracking-wide opacity-40 mb-1">
-				Novi UUID <span class="opacity-60">(blank = guest)</span>
-			</label>
-			<input
-				type="text"
-				id="jub_uuid"
-				bind:value={uuid}
-				placeholder="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
-				class="border border-surface-200-800 rounded px-2 py-1 w-full bg-surface-50-950 text-sm font-mono"
-			/>
-		</div>
-		<div>
-			<label for="jub_key" class="block text-xs uppercase tracking-wide opacity-40 mb-1">
-				Site Key
-			</label>
-			<input
-				type="text"
-				id="jub_key"
-				bind:value={site_key}
-				class="border border-surface-200-800 rounded px-2 py-1 w-full bg-surface-50-950 text-sm font-mono"
-			/>
-		</div>
-	</div>
+    <!-- Moderator toggle -->
+    <label class="flex items-center gap-2 cursor-pointer w-fit">
+        <input
+            type="checkbox"
+            bind:checked={is_moderator}
+            class="checkbox checkbox-sm"
+        />
+        <span class="text-sm">Moderator</span>
+        <span class="text-xs opacity-40"
+            >(requests JWT, enables lobby + activity logging)</span
+        >
+    </label>
 
-	<!-- Moderator toggle -->
-	<label class="flex items-center gap-2 cursor-pointer w-fit">
-		<input type="checkbox" bind:checked={is_moderator} class="checkbox checkbox-sm" />
-		<span class="text-sm">Moderator</span>
-		<span class="text-xs opacity-40">(requests JWT, enables lobby + activity logging)</span>
-	</label>
+    <!-- Advanced toggle -->
+    <button
+        type="button"
+        onclick={() => (show_advanced = !show_advanced)}
+        class="flex items-center gap-1 text-xs opacity-60 hover:opacity-100 transition-opacity"
+    >
+        <span
+            class="fas {show_advanced ? 'fa-chevron-up' : 'fa-chevron-down'}"
+            aria-hidden="true"
+        ></span>
+        {show_advanced ? 'Hide' : 'Show'} advanced options
+    </button>
 
-	<!-- Advanced toggle -->
-	<button
-		type="button"
-		onclick={() => (show_advanced = !show_advanced)}
-		class="flex items-center gap-1 text-xs opacity-60 hover:opacity-100 transition-opacity"
-	>
-		<span class="fas {show_advanced ? 'fa-chevron-up' : 'fa-chevron-down'}" aria-hidden="true"></span>
-		{show_advanced ? 'Hide' : 'Show'} advanced options
-	</button>
+    {#if show_advanced}
+        <div
+            class="border border-surface-200-800 rounded-xl p-3 space-y-3 bg-surface-100-900"
+        >
+            <!-- Domain -->
+            <div>
+                <label
+                    for="jub_domain"
+                    class="block text-xs uppercase tracking-wide opacity-40 mb-1"
+                >
+                    Jitsi Domain
+                </label>
+                <input
+                    type="text"
+                    id="jub_domain"
+                    bind:value={domain}
+                    class="border border-surface-200-800 rounded px-2 py-1 w-full bg-surface-50-950 text-sm font-mono"
+                />
+            </div>
 
-	{#if show_advanced}
-		<div class="border border-surface-200-800 rounded-xl p-3 space-y-3 bg-surface-100-900">
-			<!-- Domain -->
-			<div>
-				<label for="jub_domain" class="block text-xs uppercase tracking-wide opacity-40 mb-1">
-					Jitsi Domain
-				</label>
-				<input
-					type="text"
-					id="jub_domain"
-					bind:value={domain}
-					class="border border-surface-200-800 rounded px-2 py-1 w-full bg-surface-50-950 text-sm font-mono"
-				/>
-			</div>
+            <!-- AE menu — hides the AE nav chrome; useful when embedding in Novi or pages with their own navigation -->
+            <label class="flex items-center gap-2 cursor-pointer w-fit">
+                <input
+                    type="checkbox"
+                    bind:checked={hide_ae_menu}
+                    class="checkbox checkbox-sm"
+                />
+                <span class="text-xs"
+                    >Hide AE system menu <span class="opacity-40"
+                        >(ae_hide_menu=true)</span
+                    ></span
+                >
+            </label>
 
-				<!-- AE menu toggle -->
-				<div>
-					<label class="flex items-center gap-2 cursor-pointer">
-						<input type="checkbox" bind:checked={hide_ae_menu} class="checkbox checkbox-sm" />
-						<span class="text-xs">Hide AE system menu (for embed)</span>
-					</label>
-				</div>
+            <!-- Start options -->
+            <div class="flex flex-wrap gap-4">
+                <label class="flex items-center gap-2 cursor-pointer">
+                    <input
+                        type="checkbox"
+                        bind:checked={start_muted}
+                        class="checkbox checkbox-sm"
+                    />
+                    <span class="text-xs">Start muted</span>
+                </label>
+                <label class="flex items-center gap-2 cursor-pointer">
+                    <input
+                        type="checkbox"
+                        bind:checked={start_hidden}
+                        class="checkbox checkbox-sm"
+                    />
+                    <span class="text-xs">Start hidden (video off)</span>
+                </label>
+            </div>
 
-			<!-- Start options -->
-			<div class="flex flex-wrap gap-4">
-				<label class="flex items-center gap-2 cursor-pointer">
-					<input type="checkbox" bind:checked={start_muted} class="checkbox checkbox-sm" />
-					<span class="text-xs">Start muted</span>
-				</label>
-				<label class="flex items-center gap-2 cursor-pointer">
-					<input type="checkbox" bind:checked={start_hidden} class="checkbox checkbox-sm" />
-					<span class="text-xs">Start hidden (video off)</span>
-				</label>
-			</div>
+            <!-- Sound settings -->
+            <div>
+                <button
+                    type="button"
+                    onclick={() => (show_sound = !show_sound)}
+                    class="flex items-center gap-1 text-xs opacity-60 hover:opacity-100 transition-opacity"
+                >
+                    <span
+                        class="fas {show_sound
+                            ? 'fa-chevron-up'
+                            : 'fa-chevron-down'}"
+                        aria-hidden="true"
+                    ></span>
+                    {show_sound ? 'Hide' : 'Show'} sound settings
+                </button>
+                {#if show_sound}
+                    <div class="flex flex-wrap gap-4 mt-2">
+                        <label class="flex items-center gap-2 cursor-pointer">
+                            <input
+                                type="checkbox"
+                                bind:checked={disable_incoming_msg}
+                                class="checkbox checkbox-sm"
+                            />
+                            <span class="text-xs"
+                                >Disable incoming msg sound</span
+                            >
+                        </label>
+                        <label class="flex items-center gap-2 cursor-pointer">
+                            <input
+                                type="checkbox"
+                                bind:checked={disable_participant_joined}
+                                class="checkbox checkbox-sm"
+                            />
+                            <span class="text-xs"
+                                >Disable participant joined sound</span
+                            >
+                        </label>
+                        <label class="flex items-center gap-2 cursor-pointer">
+                            <input
+                                type="checkbox"
+                                bind:checked={disable_participant_left}
+                                class="checkbox checkbox-sm"
+                            />
+                            <span class="text-xs"
+                                >Disable participant left sound</span
+                            >
+                        </label>
+                        <label class="flex items-center gap-2 cursor-pointer">
+                            <input
+                                type="checkbox"
+                                bind:checked={disable_reaction}
+                                class="checkbox checkbox-sm"
+                            />
+                            <span class="text-xs">Disable reaction sound</span>
+                        </label>
+                        <label class="flex items-center gap-2 cursor-pointer">
+                            <input
+                                type="checkbox"
+                                bind:checked={disable_raise_hand}
+                                class="checkbox checkbox-sm"
+                            />
+                            <span class="text-xs">Disable raise hand sound</span
+                            >
+                        </label>
+                    </div>
+                {/if}
+            </div>
+        </div>
+    {/if}
 
-			<!-- Sound settings -->
-			<div>
-				<button
-					type="button"
-					onclick={() => (show_sound = !show_sound)}
-					class="flex items-center gap-1 text-xs opacity-60 hover:opacity-100 transition-opacity"
-				>
-					<span class="fas {show_sound ? 'fa-chevron-up' : 'fa-chevron-down'}" aria-hidden="true"></span>
-					{show_sound ? 'Hide' : 'Show'} sound settings
-				</button>
-				{#if show_sound}
-					<div class="flex flex-wrap gap-4 mt-2">
-						<label class="flex items-center gap-2 cursor-pointer">
-							<input type="checkbox" bind:checked={disable_incoming_msg} class="checkbox checkbox-sm" />
-							<span class="text-xs">Disable incoming msg sound</span>
-						</label>
-						<label class="flex items-center gap-2 cursor-pointer">
-							<input type="checkbox" bind:checked={disable_participant_joined} class="checkbox checkbox-sm" />
-							<span class="text-xs">Disable participant joined sound</span>
-						</label>
-						<label class="flex items-center gap-2 cursor-pointer">
-							<input type="checkbox" bind:checked={disable_participant_left} class="checkbox checkbox-sm" />
-							<span class="text-xs">Disable participant left sound</span>
-						</label>
-						<label class="flex items-center gap-2 cursor-pointer">
-							<input type="checkbox" bind:checked={disable_reaction} class="checkbox checkbox-sm" />
-							<span class="text-xs">Disable reaction sound</span>
-						</label>
-						<label class="flex items-center gap-2 cursor-pointer">
-							<input type="checkbox" bind:checked={disable_raise_hand} class="checkbox checkbox-sm" />
-							<span class="text-xs">Disable raise hand sound</span>
-						</label>
-					</div>
-				{/if}
-			</div>
-		</div>
-	{/if}
-
-	<!-- Output -->
-	<div class="border-t border-surface-200-800 pt-3 space-y-2">
-		<!-- Mode toggle -->
-		<div class="flex gap-2">
-			<button
-				type="button"
-				onclick={() => (output_mode = 'url')}
-				class="btn btn-sm {output_mode === 'url' ? 'preset-tonal-primary' : 'preset-tonal-surface border border-surface-200-800'}"
-			>
-				<span class="fas fa-link mr-1" aria-hidden="true"></span>
-				URL
-			</button>
-			<button
-				type="button"
-				onclick={() => (output_mode = 'iframe')}
-				class="btn btn-sm {output_mode === 'iframe' ? 'preset-tonal-primary' : 'preset-tonal-surface border border-surface-200-800'}"
-			>
-				<span class="fas fa-code mr-1" aria-hidden="true"></span>
-				iframe HTML
-			</button>
-		</div>
-
-		{#if built_url}
-			<div class="flex gap-1 items-stretch">
-				<textarea
-					readonly
-					rows={output_mode === 'iframe' ? 8 : 2}
-					value={output}
-					class="border border-surface-200-800 rounded px-2 py-1.5 w-full bg-surface-50-950 text-xs font-mono resize-none cursor-text"
-					onclick={(e) => (e.target as HTMLTextAreaElement).select()}
-					title="Click to select all"
-				></textarea>
-				<button
-					type="button"
-					onclick={copy_output}
-					title="Copy to clipboard"
-					class="btn btn-sm shrink-0 self-start {copied ? 'preset-tonal-success' : 'preset-tonal-primary'} transition-colors"
-				>
-					<span class="fas {copied ? 'fa-check' : 'fa-copy'}" aria-hidden="true"></span>
-				</button>
-			</div>
-			{#if output_mode === 'url'}
-				<a
-					href={built_url}
-					target="_blank"
-					rel="noopener noreferrer"
-					class="text-xs text-primary-600 dark:text-primary-400 hover:underline inline-flex items-center gap-1"
-				>
-					<span class="fas fa-external-link-alt" aria-hidden="true"></span>
-					Open in new tab
-				</a>
-			{/if}
-		{:else}
-			<p class="text-xs opacity-40 italic">Fill in Room Name to generate a URL.</p>
-		{/if}
-	</div>
+    <!-- Output -->
+    <div class="border-t border-surface-200-800 pt-3 space-y-2">
+        <!-- Mode toggle -->
+        <div class="flex gap-2">
+            <button
+                type="button"
+                onclick={() => (output_mode = 'url')}
+                class="btn btn-sm {output_mode === 'url'
+                    ? 'preset-tonal-primary'
+                    : 'preset-tonal-surface border border-surface-200-800'}"
+            >
+                <span class="fas fa-link mr-1" aria-hidden="true"></span>
+                URL
+            </button>
+            <button
+                type="button"
+                onclick={() => (output_mode = 'iframe')}
+                class="btn btn-sm {output_mode === 'iframe'
+                    ? 'preset-tonal-primary'
+                    : 'preset-tonal-surface border border-surface-200-800'}"
+            >
+                <span class="fas fa-code mr-1" aria-hidden="true"></span>
+                iframe HTML
+            </button>
+        </div>
 
+        {#if built_url}
+            <div class="flex gap-1 items-stretch">
+                <textarea
+                    readonly
+                    rows={output_mode === 'iframe' ? 8 : 2}
+                    value={output}
+                    class="border border-surface-200-800 rounded px-2 py-1.5 w-full bg-surface-50-950 text-xs font-mono resize-none cursor-text"
+                    onclick={(e) => (e.target as HTMLTextAreaElement).select()}
+                    title="Click to select all"
+                ></textarea>
+                <button
+                    type="button"
+                    onclick={copy_output}
+                    title="Copy to clipboard"
+                    class="btn btn-sm shrink-0 self-start {copied
+                        ? 'preset-tonal-success'
+                        : 'preset-tonal-primary'} transition-colors"
+                >
+                    <span
+                        class="fas {copied ? 'fa-check' : 'fa-copy'}"
+                        aria-hidden="true"
+                    ></span>
+                </button>
+            </div>
+            {#if output_mode === 'url'}
+                <a
+                    href={built_url}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    class="text-xs text-primary-600 dark:text-primary-400 hover:underline inline-flex items-center gap-1"
+                >
+                    <span class="fas fa-external-link-alt" aria-hidden="true"
+                    ></span>
+                    Open in new tab
+                </a>
+            {/if}
+        {:else}
+            <p class="text-xs opacity-40 italic">
+                Fill in Room Name to generate a URL.
+            </p>
+        {/if}
+    </div>
 </div>