Dead code cleanups

frontend/src/components/EventLog.svelte

@@ -1,8 +1,11 @@
 <script>
-    import { tick } from 'svelte';
+    import { tick, onMount } from 'svelte';
     import { apiRequest } from '../lib/api';
 
     export let state;
+    // Inline mode pins the log open as a column (scene phase) instead of the
+    // floating, collapsible corner panel used in every other phase.
+    export let inline = false;
 
     const PAGE_SIZE = 50;
     const BOTTOM_TOLERANCE = 40; // px of slack before we consider the player "scrolled away"
@@ -27,6 +30,8 @@
     };
 
     let open = false;
+    // The content is visible whenever the floating log is open OR it's pinned inline.
+    $: shown = open || inline;
     let logEl;
     let events = []; // ascending by timestamp; accumulated across polls + history loads
     let seenIds = new Set();
@@ -84,21 +89,25 @@
         }
         if (added) {
             events = events;
-            if (open && atBottom) {
+            if (shown && atBottom) {
                 await tick();
                 scrollToBottom();
             }
             // Toast only for genuinely new events (not the initial seed or a
-            // rollback reseed) and only while the log is closed.
-            if (initialized && !reset && !open && newest) {
+            // rollback reseed) and only while the floating log is closed.
+            if (initialized && !reset && !shown && newest) {
                 toast = { id: newest.id, message: newest.message, kind: newest.kind || 'info' };
             }
         }
         initialized = true;
     }
 
-    // Opening the log makes the preview redundant.
-    $: if (open) toast = null;
+    // An open/inline log makes the preview toast redundant.
+    $: if (shown) toast = null;
+
+    onMount(() => {
+        if (inline) scrollToBottom();
+    });
 
     function clearToast(id) {
         if (toast && toast.id === id) toast = null;
@@ -170,8 +179,8 @@
     }
 </script>
 
-<div class="floating-event-log {open ? 'open' : ''}">
-    {#if toast && !open}
+<div class="floating-event-log {shown ? 'open' : ''} {inline ? 'inline' : ''}">
+    {#if toast && !shown}
         {#key toast.id}
             <button
                 class="event-toast log-kind-{toast.kind}"
@@ -184,11 +193,15 @@
             </button>
         {/key}
     {/if}
-    <button class="toggle-log-btn" on:click={toggleOpen}>
-        {open ? '⬇️ Hide Log' : '📜 Event Log'}
-    </button>
+    {#if inline}
+        <div class="log-header">📜 Event Log</div>
+    {:else}
+        <button class="toggle-log-btn" on:click={toggleOpen}>
+            {open ? '⬇️ Hide Log' : '📜 Event Log'}
+        </button>
+    {/if}
 
-    {#if open}
+    {#if shown}
         {#if error}
             <div class="log-error">{error}</div>
         {/if}
@@ -253,6 +266,29 @@
     .floating-event-log:not(.open) {
         width: auto;
     }
+    /* Inline mode: pinned as the scene's third column instead of floating. */
+    .floating-event-log.inline {
+        position: sticky;
+        top: 1rem;
+        right: auto;
+        bottom: auto;
+        width: 100%;
+        max-height: calc(100vh - 2rem);
+    }
+    @media (max-width: 1100px) {
+        .floating-event-log.inline {
+            position: static;
+            max-height: 60vh;
+        }
+    }
+    .log-header {
+        padding: 10px;
+        text-align: center;
+        font-weight: bold;
+        font-family: var(--font-heading);
+        border-bottom: 1px solid var(--edge-soft);
+        color: var(--text);
+    }
     .toggle-log-btn {
         background: transparent;
         color: var(--text);