Panel busy states: Connecting placeholder with Cancel, slow-load overlay

Connecting blanks the list to a fading spinner with the target name and
a Cancel button (token discards late results and orphan sessions).
Listings >300ms dim the list under a spinner. All panel input is
blocked while busy; the source picker stays usable.

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

ui/src/app/file-panel/file-panel.html

@@ -156,8 +156,9 @@
 <div class="flex items-center gap-1 border-b border-border px-2 py-1.5">
   <button
     (click)="panel().up()"
+    [disabled]="blocked()"
     title="Parent directory (Backspace)"
-    class="grid size-(--path-ctl-h) shrink-0 place-items-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground"
+    class="grid size-(--path-ctl-h) shrink-0 place-items-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-50 disabled:hover:bg-transparent"
   >
     <ng-icon name="mynaArrowUp" size="1rem" />
   </button>
@@ -167,13 +168,15 @@
     (keydown.enter)="commitPath()"
     (keydown.escape)="resetPath()"
     (keydown)="$event.stopPropagation()"
+    [disabled]="blocked()"
     spellcheck="false"
-    class="h-(--path-ctl-h) min-w-0 flex-1 rounded-md border border-input bg-transparent px-2 font-mono text-(length:--path-font) outline-none focus:ring-2 focus:ring-ring"
+    class="h-(--path-ctl-h) min-w-0 flex-1 rounded-md border border-input bg-transparent px-2 font-mono text-(length:--path-font) outline-none focus:ring-2 focus:ring-ring disabled:opacity-50"
   />
   <button
     (click)="panel().refresh()"
+    [disabled]="blocked()"
     title="Refresh"
-    class="grid size-(--path-ctl-h) shrink-0 place-items-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground"
+    class="grid size-(--path-ctl-h) shrink-0 place-items-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-50 disabled:hover:bg-transparent"
   >
     @if (panel().loading()) {
       <ng-icon name="mynaSpinner" size="1rem" class="animate-spin" />
@@ -217,14 +220,31 @@
 }
 
 <!-- file list -->
+<div class="relative min-h-0 flex-1">
 <div
   #list
   tabindex="0"
   (keydown)="onKeydown($event)"
   (mousedown)="activate()"
   (contextmenu)="listContextMenu($event)"
-  class="flex-1 overflow-y-auto outline-none"
+  class="h-full overflow-y-auto outline-none"
 >
+  @if (panel().connecting()) {
+    <div class="panel-fade-in grid h-full place-items-center">
+      <div class="flex flex-col items-center gap-3">
+        <ng-icon name="mynaSpinner" size="1.4rem" class="animate-spin text-primary" />
+        <span class="text-xs text-muted-foreground">
+          Connecting to {{ panel().connectingTo() }}…
+        </span>
+        <button
+          (click)="cancelConnect()"
+          class="rounded-md border border-border px-3 py-1 text-xs text-muted-foreground hover:bg-accent hover:text-foreground"
+        >
+          Cancel
+        </button>
+      </div>
+    </div>
+  } @else {
   @for (entry of panel().sorted(); track entry.name; let i = $index) {
     <div
       [attr.data-index]="i"
@@ -255,4 +275,11 @@
   @if (panel().filter() && filterMatches() === 0) {
     <div class="p-6 text-center text-xs text-muted-foreground">No matches</div>
   }
+  }
+</div>
+@if (panel().slowLoad() && !panel().connecting()) {
+  <div class="panel-fade-in absolute inset-0 z-10 grid place-items-center bg-background/60">
+    <ng-icon name="mynaSpinner" size="1.4rem" class="animate-spin text-primary" />
+  </div>
+}
 </div>

ui/src/app/file-panel/file-panel.ts

@@ -37,6 +37,8 @@ export class FilePanel {
   readonly panel = computed(() => this.panels.get(this.side()));
   readonly isActive = computed(() => this.panels.activeSide() === this.side());
   readonly isRemote = computed(() => this.panel().sessionId() !== 'local');
+  /** Input is ignored while the panel is connecting or a listing is in flight. */
+  readonly blocked = computed(() => this.panel().busy());
   /** The copy button points toward the other panel. */
   readonly copyIcon = computed(() => (this.side() === 'left' ? 'mynaArrowRight' : 'mynaArrowLeft'));
 
@@ -63,12 +65,18 @@ export class FilePanel {
     this.panels.setActiveSide(this.side());
   }
 
+  cancelConnect(): void {
+    this.panels.cancelConnect(this.side());
+  }
+
   copyToOther(): void {
+    if (this.blocked()) return;
     this.activate();
     void this.transfers.copyToOtherPanel(this.side());
   }
 
   run(action: 'edit' | 'rename' | 'mkdir' | 'createFile' | 'chmod' | 'delete'): void {
+    if (this.blocked()) return;
     this.activate();
     void this.actions[action](this.panel());
   }
@@ -148,6 +156,7 @@ export class FilePanel {
   }
 
   commitPath(): void {
+    if (this.blocked()) return;
     const value = this.pathDraft().trim();
     if (value) void this.panel().load(value);
     this.listEl().nativeElement.focus();
@@ -159,6 +168,7 @@ export class FilePanel {
   }
 
   rowClick(event: MouseEvent, index: number): void {
+    if (this.blocked()) return;
     this.activate();
     const panel = this.panel();
     if (event.shiftKey) {
@@ -176,6 +186,7 @@ export class FilePanel {
   rowContextMenu(event: MouseEvent, index: number): void {
     event.preventDefault();
     event.stopPropagation();
+    if (this.blocked()) return;
     this.activate();
     const panel = this.panel();
     const entry = panel.sorted()[index] ?? null;
@@ -187,16 +198,19 @@ export class FilePanel {
 
   listContextMenu(event: MouseEvent): void {
     event.preventDefault();
+    if (this.blocked()) return;
     this.activate();
     void this.actions.openContextMenu({ side: this.side(), panel: this.panel(), entry: null });
   }
 
   openAt(index: number): void {
+    if (this.blocked()) return;
     const entry = this.panel().sorted()[index];
     if (entry) this.panel().open(entry);
   }
 
   onKeydown(event: KeyboardEvent): void {
+    if (this.blocked()) return;
     const panel = this.panel();
     const key = event.key;