Focus terminal on create and switch

src/lib/components/studio/terminal.svelte

@@ -8,9 +8,14 @@
         height: number;
         synapse: Synapse;
         readonly?: boolean;
+        focus?: boolean;
     };
-    let { height, synapse, readonly = false }: Props = $props();
+    let { height, synapse, readonly = false, focus = false }: Props = $props();
 
+    let terminalFocus;
+    function setTerminalFocus(terminal) {
+        terminalFocus = terminal;
+    }
     const terminal: Action = (node) => {
         const init = async () => {
             const [{ Terminal }, { FitAddon }] = await Promise.all([
@@ -60,6 +65,8 @@
                     }
                 );
             });
+            setTerminalFocus(term);
+            term.focus();
             synapse.addEventListener('terminal', ({ message }) => {
                 const { data } = message;
                 if (typeof data === 'string') term.write(data);
@@ -89,6 +96,14 @@
         };
         init();
     };
+
+    $effect(() => {
+        console.log('focus', focus);
+        if (focus && terminalFocus) {
+            console.log('setting focus');
+            terminalFocus.focus();
+        }
+    });
 </script>
 
 <div class="terminal-container" style:height={`${height}px`} use:terminal></div>

src/routes/(console)/project-[project]/studio/artifact-[artifact]/+layout.svelte

@@ -309,12 +309,18 @@
                             style:display={studio.activeTerminal === studio.mainTerminalId
                                 ? 'contents'
                                 : 'none'}>
-                            <Terminal height={terminalHeight} synapse={studio.synapse}></Terminal>
+                            <Terminal
+                                height={terminalHeight}
+                                synapse={studio.synapse}
+                                focus={studio.activeTerminal === studio.mainTerminalId}></Terminal>
                         </div>
                     {/key}
                     {#each studio.terminals as [symbol, synapse] (symbol)}
                         <div style:display={studio.activeTerminal === symbol ? 'contents' : 'none'}>
-                            <Terminal height={terminalHeight} {synapse}></Terminal>
+                            <Terminal
+                                height={terminalHeight}
+                                {synapse}
+                                focus={studio.activeTerminal === symbol}></Terminal>
                         </div>
                     {/each}
                 </details>