Type-to-filter in file panels

Typing while the list is focused builds a filter query: a bar appears under
the column headers (search icon, query, live match count, Esc hint, clear
button) and the listing narrows to substring matches — '..' always stays.
Backspace edits the query, Escape clears it, cursor parks on the first match,
arrows/Enter keep working (the list never loses focus), and Space keeps its
select meaning until a query exists. Filter resets on directory change and
survives refresh; operations act only on visible (filtered) selection.

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

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

@@ -186,6 +186,24 @@
   </button>
 </div>
 
+<!-- type-to-filter bar (appears while a query is active) -->
+@if (panel().filter(); as query) {
+  <div class="flex items-center gap-1.5 border-b border-border bg-accent/50 px-2 py-1">
+    <ng-icon name="mynaSearch" size="0.85rem" class="shrink-0 text-muted-foreground" />
+    <span class="min-w-0 flex-1 truncate font-mono text-xs">{{ query }}</span>
+    <span class="shrink-0 text-[11px] text-muted-foreground">
+      {{ filterMatches() }} match{{ filterMatches() === 1 ? '' : 'es' }} · Esc
+    </span>
+    <button
+      (click)="clearFilter()"
+      title="Clear filter (Esc)"
+      class="grid size-5 shrink-0 place-items-center rounded text-muted-foreground hover:bg-accent hover:text-foreground"
+    >
+      <ng-icon name="mynaX" size="0.8rem" />
+    </button>
+  </div>
+}
+
 <!-- file list -->
 <div
   #list
@@ -224,4 +242,7 @@
   } @empty {
     <div class="p-6 text-center text-xs text-muted-foreground">Empty directory</div>
   }
+  @if (panel().filter() && filterMatches() === 0) {
+    <div class="p-6 text-center text-xs text-muted-foreground">No matches</div>
+  }
 </div>

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

@@ -100,6 +100,17 @@ export class FilePanel {
     return this.panel().selected().has(entry.name);
   }
 
+  clearFilter(): void {
+    this.panel().setFilter('');
+    this.listEl().nativeElement.focus();
+  }
+
+  filterMatches(): number {
+    return this.panel()
+      .sorted()
+      .filter((e) => e.name !== '..').length;
+  }
+
   sortIndicator(key: SortKey): string {
     if (this.panel().sortKey() !== key) return '';
     return this.panel().sortAsc() ? '↑' : '↓';
@@ -151,6 +162,31 @@ export class FilePanel {
       return;
     }
 
+    // type-to-filter: printable characters build the query (Space only once a
+    // query exists — an empty-filter Space keeps its toggle-select meaning)
+    if (
+      key.length === 1 &&
+      !event.metaKey &&
+      !event.ctrlKey &&
+      !event.altKey &&
+      (key !== ' ' || panel.filter() !== '')
+    ) {
+      event.preventDefault();
+      panel.setFilter(panel.filter() + key);
+      this.scrollCursorIntoView();
+      return;
+    }
+    if (key === 'Backspace' && panel.filter() !== '') {
+      event.preventDefault();
+      panel.setFilter(panel.filter().slice(0, -1));
+      return;
+    }
+    if (key === 'Escape' && panel.filter() !== '') {
+      event.preventDefault();
+      panel.setFilter('');
+      return;
+    }
+
     switch (key) {
       case 'ArrowDown':
         panel.moveCursor(1);