Connection manager in its own native window, modal to main

Single window centered over the main app. Electrobun has no native
modality, so it's approximated: bun bounces the main window's focus back
to the manager, the main webview shows a click-swallowing overlay, and
main-targeted menu/keyboard actions are dropped while open. Editor
windows stay fully usable. Connect/open-stack execute in the main
window via the existing connect: action channel; store edits push a
connectionsChanged refresh. Trigger moved from the panel dropdown to a
tab-bar button.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

ui/src/app/connection-manager/connection-manager.html

@@ -1,17 +1,20 @@
-<div class="fixed inset-0 z-30 grid place-items-center bg-black/40" (mousedown)="close()">
-  <div
-    class="flex h-[440px] w-[680px] flex-col rounded-lg border border-border bg-card text-card-foreground shadow-xl"
-    (mousedown)="$event.stopPropagation()"
+<div class="flex h-screen flex-col bg-background text-foreground">
+  <!-- header: on macOS this row IS the titlebar (hiddenInset + drag region),
+       elsewhere the native titlebar sits above and this is a compact strip -->
+  <header
+    class="flex shrink-0 items-center gap-2 border-b border-border pr-2"
+    [class.h-10]="isMacChrome"
+    [class.pl-24]="isMacChrome"
+    [class.electrobun-webkit-app-region-drag]="isMacChrome"
+    [class.h-9]="!isMacChrome"
+    [class.pl-3]="!isMacChrome"
   >
-    <!-- title bar -->
-    <div class="flex items-center justify-between border-b border-border px-4 py-2.5">
-      <h2 class="text-sm font-semibold">Connections</h2>
-      <button (click)="close()" class="rounded p-1 text-muted-foreground hover:bg-accent hover:text-foreground">
-        <ng-icon name="mynaX" size="1rem" />
-      </button>
-    </div>
+    <ng-icon name="mynaServers" size="0.95rem" class="shrink-0 text-muted-foreground" />
+    <h1 class="text-sm font-semibold">Connections</h1>
+    <div class="flex-1"></div>
+  </header>
 
-    <div class="flex min-h-0 flex-1">
+  <div class="flex min-h-0 flex-1">
       <!-- stacks + connections list -->
       <div class="flex w-60 shrink-0 flex-col border-r border-border">
         <div class="flex items-center gap-1 border-b border-border px-2 py-1.5">
@@ -92,7 +95,7 @@
                 </button>
                 @if (group.connections.length) {
                   <button
-                    (click)="openStack(group.connections)"
+                    (click)="openStack(group.stack.id)"
                     title="Open stack in tabs"
                     class="grid size-4 shrink-0 place-items-center rounded text-muted-foreground hover:text-primary"
                   >
@@ -358,7 +361,16 @@
             </div>
           </div>
         }
-      </div>
     </div>
   </div>
+
+  <!-- in-window dialogs (safe here: they depend only on FocusService) -->
+  @if (dialogs.prompt(); as req) {
+    <app-prompt-dialog [request]="req" />
+  }
+  @if (dialogs.confirm(); as req) {
+    <app-confirm-dialog [request]="req" />
+  }
+
+  <app-toasts />
 </div>