v1.2: overwrite confirm, transfer speed/ETA, settings + themes, fused macOS titlebar

- Overwrite confirmation: name-collision detection before enqueue; dialog shows
  source vs destination (size, mtime, 'newer' badge) with per-item Skip/Replace
  and batch Skip all / Replace all; type mismatches auto-skip with a toast;
  cancel aborts the whole operation
- Transfer speed + ETA: UI computes smoothed bytes/sec from progress deltas
  (callback bus makes deltas meaningful); shown in the expanded queue rows and
  the status-bar summary; unit follows the speed-unit setting
- Settings: bun-side SettingsStore (settings.json, 0600, atomic) + get/save RPC;
  SettingsService; gear popover on the tab row (theme segmented control, speed
  unit); persisted across restarts
- Light theme: data-theme on <html> drives token overrides; absent = follow OS
- macOS fused titlebar: hiddenInset + trafficLightOffset, tab row becomes the
  draggable titlebar (app-region drag/no-drag classes); other platforms keep a
  separate titlebar (gated by a platform value injected via window preload)
- README: known-issues note for the upstream Bun/Electrobun FFI crash

Verified: tsc + ui build clean; SettingsStore roundtrip + 0600 headless;
app boots and the UI fetches settings over RPC at startup.

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

ui/src/app/dialogs/overwrite-dialog.ts

@@ -0,0 +1,151 @@
+import {
+  Component,
+  ElementRef,
+  afterNextRender,
+  computed,
+  inject,
+  input,
+  viewChild,
+} from '@angular/core';
+import { NgIcon } from '@ng-icons/core';
+import { DialogsService, type OverwriteChoice, type OverwriteRequest } from '../dialogs.service';
+import { formatDate, formatSize } from '../format';
+import { PanelsService } from '../panels.service';
+
+@Component({
+  selector: 'app-overwrite-dialog',
+  imports: [NgIcon],
+  template: `
+    <div
+      class="fixed inset-0 z-40 grid place-items-center bg-black/40"
+      (keydown.escape)="pick('cancel')"
+    >
+      <div
+        class="w-[26rem] rounded-lg border border-border bg-card p-4 text-card-foreground shadow-xl"
+      >
+        <div class="flex items-start justify-between gap-2">
+          <h2 class="min-w-0 text-sm font-semibold">
+            {{ isDir() ? 'Merge folder' : 'Replace' }}
+            <span class="font-mono">"{{ request().srcEntry.name }}"</span>?
+          </h2>
+          @if (request().total > 1) {
+            <span
+              class="shrink-0 rounded-full bg-muted px-2 py-0.5 text-[10px] font-medium text-muted-foreground"
+            >
+              {{ request().index }} of {{ request().total }}
+            </span>
+          }
+        </div>
+        <p class="mt-1 text-xs text-muted-foreground">
+          @if (isDir()) {
+            The destination already has a folder with this name. Merging may replace files inside
+            it.
+          } @else {
+            The destination already has a file with this name.
+          }
+        </p>
+
+        <!-- comparison -->
+        <div class="mt-3 grid grid-cols-2 gap-2">
+          @for (side of comparison(); track side.label) {
+            <div class="rounded-md border border-border p-2.5">
+              <div class="flex items-center justify-between">
+                <span class="text-[10px] font-medium tracking-wide text-muted-foreground uppercase">
+                  {{ side.label }}
+                </span>
+                @if (side.newer) {
+                  <span class="rounded-full bg-success/15 px-1.5 text-[10px] font-medium text-success">
+                    newer
+                  </span>
+                }
+              </div>
+              <div class="mt-1.5 flex items-center gap-1.5 text-xs">
+                <ng-icon
+                  [name]="isDir() ? 'mynaFolder' : 'mynaFile'"
+                  size="0.9rem"
+                  class="shrink-0 text-muted-foreground"
+                />
+                <span class="font-mono tabular-nums">
+                  {{ isDir() ? '—' : formatSize(side.entry.size) }}
+                </span>
+              </div>
+              <div class="mt-1 font-mono text-[11px] tabular-nums text-muted-foreground">
+                {{ formatDate(side.entry.mtime) }}
+              </div>
+            </div>
+          }
+        </div>
+
+        <!-- actions -->
+        <div class="mt-4 flex items-center gap-2">
+          <button
+            (click)="pick('cancel')"
+            class="rounded-md px-3 py-1.5 text-xs font-medium text-muted-foreground hover:bg-accent hover:text-foreground"
+          >
+            Cancel
+          </button>
+          <div class="flex-1"></div>
+          @if (request().total > 1) {
+            <button
+              (click)="pick('skipAll')"
+              class="rounded-md px-2.5 py-1.5 text-xs text-muted-foreground hover:bg-accent hover:text-foreground"
+            >
+              Skip all
+            </button>
+            <button
+              (click)="pick('overwriteAll')"
+              class="rounded-md px-2.5 py-1.5 text-xs text-muted-foreground hover:bg-accent hover:text-foreground"
+            >
+              {{ isDir() ? 'Merge all' : 'Replace all' }}
+            </button>
+            <div class="h-4 w-px bg-border"></div>
+          }
+          <button
+            (click)="pick('skip')"
+            class="rounded-md px-3 py-1.5 text-xs font-medium hover:bg-accent"
+          >
+            Skip
+          </button>
+          <button
+            #primaryBtn
+            (click)="pick('overwrite')"
+            class="rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground hover:bg-primary/90"
+          >
+            {{ isDir() ? 'Merge' : 'Replace' }}
+          </button>
+        </div>
+      </div>
+    </div>
+  `,
+})
+export class OverwriteDialog {
+  readonly request = input.required<OverwriteRequest>();
+
+  readonly formatSize = formatSize;
+  readonly formatDate = formatDate;
+
+  private readonly dialogs = inject(DialogsService);
+  private readonly panels = inject(PanelsService);
+  private readonly primaryBtn = viewChild.required<ElementRef<HTMLButtonElement>>('primaryBtn');
+
+  constructor() {
+    afterNextRender(() => this.primaryBtn().nativeElement.focus());
+  }
+
+  readonly isDir = computed(() => this.request().srcEntry.type === 'dir');
+
+  readonly comparison = computed(() => {
+    const { srcEntry, dstEntry } = this.request();
+    return [
+      { label: 'Source', entry: srcEntry, newer: srcEntry.mtime > dstEntry.mtime },
+      { label: 'Destination', entry: dstEntry, newer: dstEntry.mtime > srcEntry.mtime },
+    ];
+  });
+
+  pick(choice: OverwriteChoice): void {
+    const req = this.request();
+    this.dialogs.overwrite.set(null);
+    this.panels.refocus();
+    req.resolve(choice);
+  }
+}