fix(app): terminal issues (#14435)

2 files changed, 13 insertions, 17 deletions

diff --git a/packages/app/src/components/terminal.tsx b/packages/app/src/components/terminal.tsx
index bd7ab2447..ce811463f 100644
--- a/packages/app/src/components/terminal.tsx
+++ b/packages/app/src/components/terminal.tsx
@@ -540,7 +540,7 @@ export const Terminal = (props: TerminalProps) => {
     disposed = true
     if (fitFrame !== undefined) cancelAnimationFrame(fitFrame)
     if (sizeTimer !== undefined) clearTimeout(sizeTimer)
-    if (ws && ws.readyState !== WebSocket.CLOSED && ws.readyState !== WebSocket.CLOSING) ws.close()
+    if (ws && ws.readyState !== WebSocket.CLOSED && ws.readyState !== WebSocket.CLOSING) ws.close(1000)
 
     const finalize = () => {
       persistTerminal({ term, addon: serializeAddon, cursor, pty: local.pty, onCleanup: props.onCleanup })
diff --git a/packages/app/src/pages/session/terminal-panel.tsx b/packages/app/src/pages/session/terminal-panel.tsx
index 33421c386..27ea4e6f3 100644
--- a/packages/app/src/pages/session/terminal-panel.tsx
+++ b/packages/app/src/pages/session/terminal-panel.tsx
@@ -67,11 +67,11 @@ export function TerminalPanel() {
     on(
       () => terminal.active(),
       (activeId) => {
-        if (!activeId || !opened()) return
+        if (!activeId || !open()) return
         if (document.activeElement instanceof HTMLElement) {
           document.activeElement.blur()
         }
-        focusTerminalById(activeId)
+        setTimeout(() => focusTerminalById(activeId), 0)
       },
     ),
   )
@@ -209,21 +209,17 @@ export function TerminalPanel() {
                 </Tabs.List>
               </Tabs>
               <div class="flex-1 min-h-0 relative">
-                <For each={all()}>
-                  {(pty) => (
-                    <div
-                      id={`terminal-wrapper-${pty.id}`}
-                      class="absolute inset-0"
-                      style={{
-                        display: terminal.active() === pty.id ? "block" : "none",
-                      }}
-                    >
-                      <Show when={pty.id} keyed>
-                        <Terminal pty={pty} onCleanup={terminal.update} onConnectError={() => terminal.clone(pty.id)} />
-                      </Show>
-                    </div>
+                <Show when={terminal.active()} keyed>
+                  {(id) => (
+                    <Show when={byId().get(id)}>
+                      {(pty) => (
+                        <div id={`terminal-wrapper-${id}`} class="absolute inset-0">
+                          <Terminal pty={pty()} onCleanup={terminal.update} onConnectError={() => terminal.clone(id)} />
+                        </div>
+                      )}
+                    </Show>
                   )}
-                </For>
+                </Show>
               </div>
             </div>
             <DragOverlay>