From bf82b312f08004522a35b613b00239158c308685 Mon Sep 17 00:00:00 2001
From: Anthony Ettinger <anthony@chovy.com>
Date: Sun, 30 Aug 2026 04:58:52 +0000
Subject: [PATCH] desktop: finish the UI, and fix what was quietly broken in it

The renderer looked unfinished rather than broken, so this is mostly
polish -- but four things in it were genuinely wrong, and they are the
reason it read that way.

Actual defects:

- DialogFooter hardcoded `-mx-4 -mb-4` to cancel DialogContent's `p-4`.
  Both dialogs here pass `p-0`, so the footer hung 16px past the rounded
  corner as a detached bar. The bleed now follows a `--dialog-pad` var.
- DialogContent ended its class list with `sm:max-w-sm`, which beat every
  `max-w-*` a caller passed: the mirror preview asked for max-w-2xl and
  rendered at 384px, squashing its four-column summary and delete list.
- The progress bar styled the Progress ROOT (a flex wrapper) instead of
  the track, and recoloured `[&>div]` on finish -- the track, not the
  fill -- so a completed transfer turned the whole bar green whatever
  the percentage said. Both are addressed by slot now.
- formatDate used toISOString(), so every mtime in both panes was shown
  in UTC while the user's clock said something else.

Finishing touches:

- The Settings gear had no onClick at all. It now opens the two actions
  that already exist behind the bridge, plus the project link.
- "Hidden" was a raw <input type=checkbox> next to shadcn fields, while
  ui/checkbox.tsx sat unused.
- Each pane spent four full-width toolbars on chrome before showing a
  file; the path, filter and hidden toggle are one row now.
- The idle transfer band was 74px of "Nothing transferring" -- the
  tallest thing in the window, and there to say nothing was happening.
  It is a slim strip that names the route and whether deletes are armed.
- The rail stacked a 64px button on a 50px button with two corner radii
  and truncated its labels mid-word. One width, one radius, and "Sync to"
  in front of the name so the pair stop reading as a destination picker.
- Light theme painted white panes on a white window, so a pane was a
  hairline around nothing. The ground steps back and panels have depth.
- Panes answer to the keyboard: arrows, PageUp/Down, Home/End, Enter to
  open, Backspace for the parent, shift for a range, ctrl/cmd-A.
- Loading is skeleton rows; empty, no-match and error each have a state
  instead of one line of grey text.
- The mirror confirm opens focused on Cancel rather than on the trust
  checkbox, and its delete list no longer reserves 210px for two files.

Also drops the third-party analytics tag from the renderer. The shell's
own CSP (`script-src 'self'`) blocks it outright, so it never reported
anything -- all it did was make a desktop file transfer tool look like
it phones home.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TA4kaFusnS896fmoeWHiAa
---
 apps/desktop/src/app/globals.css              |  81 +++-
 apps/desktop/src/app/layout.tsx               |  19 +-
 apps/desktop/src/app/page.tsx                 | 150 +++++-
 .../src/components/connection-dialog.tsx      |  18 +-
 apps/desktop/src/components/pane.tsx          | 435 ++++++++++++++----
 .../desktop/src/components/transfer-panel.tsx | 279 +++++++----
 apps/desktop/src/components/transfer-rail.tsx | 177 +++++--
 apps/desktop/src/components/ui/dialog.tsx     |  16 +-
 apps/desktop/src/lib/format.ts                |  15 +-
 9 files changed, 903 insertions(+), 287 deletions(-)

diff --git a/apps/desktop/src/app/globals.css b/apps/desktop/src/app/globals.css
index 9994569..66f4288 100644
--- a/apps/desktop/src/app/globals.css
+++ b/apps/desktop/src/app/globals.css
@@ -50,6 +50,7 @@
   --color-info-surface: #12244a;
   --color-info-line: #2f5fd0;
   --color-info-ink: #9dc0ff;
+
 }
 
 /*
@@ -60,6 +61,25 @@
   color-scheme: dark;
   --radius: 0.625rem;
 
+  /*
+   * The control scale. Every toolbar button, field and rail action picks a
+   * height from these rather than inventing one -- which is what left the rail
+   * stacking a 64px button on a 50px button with two different corner radii.
+   */
+  --control-sm: 26px;
+  --control: 30px;
+  --control-lg: 34px;
+  --row: 32px;
+
+  /*
+   * Elevation. A panel used to be a 1px border and nothing else, which on the
+   * light theme meant a white card on a white window: the panes had no
+   * presence at all. Depth is a token so both themes get a considered version
+   * rather than a shadow someone guessed at inline.
+   */
+  --shadow-panel: 0 1px 2px rgb(0 0 0 / 0.3), 0 8px 24px -14px rgb(0 0 0 / 0.6);
+  --shadow-armed: 0 1px 0 rgb(255 255 255 / 0.1) inset, 0 6px 18px -6px rgb(11 98 253 / 0.55);
+
   --background: #070c16;
   --foreground: #e8edf6;
   --card: #0e1522;
@@ -91,7 +111,13 @@
 @media (prefers-color-scheme: light) {
   :root {
     color-scheme: light;
-    --background: #ffffff;
+    /*
+     * The window ground is deliberately NOT white. It used to be, and so did
+     * the panes sitting on it, so a pane was a hairline rectangle around
+     * nothing and the whole app read as an unstyled document. The panes keep
+     * white; the ground steps back so they read as panels.
+     */
+    --background: #eef1f6;
     --foreground: #001830;
     --card: #ffffff;
     --card-foreground: #001830;
@@ -110,16 +136,26 @@
     --input: #dfe4ed;
     --ring: #0b62fd;
 
-    --color-ink: #ffffff;
-    --color-chrome: #f7f9fc;
+    /*
+     * Chrome sits a step off card in BOTH themes, so a pane header and a pane
+     * footer read as chrome rather than as more list. Light had them both at
+     * pure white, which left only the hairline border to say where the toolbar
+     * ended -- the same mistake as the ground being white.
+     */
+    --color-ink: #eef1f6;
+    --color-chrome: #f8fafc;
     --color-surface: #ffffff;
-    --color-raised: #f2f5fa;
-    --color-sunken: #f7f9fc;
-    --color-line: #dfe4ed;
+    --color-raised: #f4f7fb;
+    --color-sunken: #f4f7fa;
+    --color-line: #e2e7ef;
     --color-line-strong: #cbd4e2;
     --color-dim: #35435c;
     --color-faint: #7a869c;
 
+    /* Depth is subtler on white than it can afford to be on near-black. */
+    --shadow-panel: 0 1px 2px rgb(16 32 64 / 0.06), 0 6px 20px -12px rgb(16 32 64 / 0.28);
+    --shadow-armed: 0 1px 0 rgb(255 255 255 / 0.25) inset, 0 6px 16px -6px rgb(11 98 253 / 0.45);
+
     /* tints, not near-blacks, so they read as a highlight on a white window */
     --color-danger-surface: #fef2f2;
     --color-danger-line: #fbcfd3;
@@ -178,6 +214,39 @@ body {
   user-select: text;
 }
 
+/* Elevation as a class rather than a Tailwind shadow utility, so the light
+   theme's override of --shadow-panel actually reaches it. */
+.elevation-panel {
+  box-shadow: var(--shadow-panel);
+}
+.elevation-armed {
+  box-shadow: var(--shadow-armed);
+}
+
+/*
+ * Sizes, dates and counts are compared down a column, so their glyphs have to
+ * occupy the same width. Without this the mono column still jitters, because
+ * IBM Plex Mono's proportional fallback wins for any digit it does not cover.
+ */
+.numeric {
+  font-family: var(--font-mono), ui-monospace, monospace;
+  font-variant-numeric: tabular-nums;
+  font-feature-settings: 'tnum' 1;
+}
+
+/*
+ * One focus ring for the whole app. shadcn's own controls already draw this;
+ * the hand-rolled toolbar buttons did not, so tabbing through a pane went
+ * invisible halfway across.
+ */
+.focus-ring {
+  outline: none;
+}
+.focus-ring:focus-visible {
+  outline: 2px solid var(--ring);
+  outline-offset: 1px;
+}
+
 /* A scrollbar that does not shout inside a dark pane. */
 *::-webkit-scrollbar {
   width: 10px;
diff --git a/apps/desktop/src/app/layout.tsx b/apps/desktop/src/app/layout.tsx
index 2e85ec8..a6b37ad 100644
--- a/apps/desktop/src/app/layout.tsx
+++ b/apps/desktop/src/app/layout.tsx
@@ -1,15 +1,15 @@
 import type { Metadata } from 'next'
-import { IBM_Plex_Mono, IBM_Plex_Sans, Geist } from 'next/font/google'
+import { IBM_Plex_Mono, Geist } from 'next/font/google'
 import './globals.css'
-import { cn } from "@/lib/utils";
-import Script from "next/script";
+import { cn } from '@/lib/utils'
+import { TooltipProvider } from '@/components/ui/tooltip'
 
 /**
  * Self-hosted at build time by next/font, which matters here: the renderer
  * runs under `font-src 'self' data:`, so a stylesheet from Google would be
  * blocked and the app would silently fall back to a system face.
  */
-const geist = Geist({subsets:['latin'],variable:'--font-sans'})
+const geist = Geist({ subsets: ['latin'], variable: '--font-sans', display: 'swap' })
 
 const mono = IBM_Plex_Mono({
   subsets: ['latin'],
@@ -25,8 +25,15 @@ export const metadata: Metadata = {
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
-    <html lang="en" className={cn(mono.variable, "font-sans", geist.variable)}>
-      <body className="h-full font-[family-name:var(--font-sans)]">{children}        <Script data-site="4f356371-83a0-4cb2-b570-75b961e6ddcb" src="https://crawlproof.com/stats.js" strategy="afterInteractive" />
+    <html lang="en" className={cn(mono.variable, geist.variable, 'font-sans')}>
+      {/*
+        No third-party analytics tag here. One used to load stats.js from a
+        remote origin, which the shell's own CSP (`script-src 'self'`) blocks
+        outright -- so it never reported anything, and all it actually did was
+        make a desktop file transfer tool look like it phones home.
+      */}
+      <body className="h-full font-[family-name:var(--font-sans)] antialiased">
+        <TooltipProvider delay={350}>{children}</TooltipProvider>
       </body>
     </html>
   )
diff --git a/apps/desktop/src/app/page.tsx b/apps/desktop/src/app/page.tsx
index e87a23a..cef1ef4 100644
--- a/apps/desktop/src/app/page.tsx
+++ b/apps/desktop/src/app/page.tsx
@@ -2,15 +2,40 @@
 
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import Image from 'next/image'
-import { CircleCheck, Settings, Users } from 'lucide-react'
+import {
+  CircleAlert,
+  CircleCheck,
+  ExternalLink,
+  FileDown,
+  MonitorOff,
+  Plus,
+  Settings,
+  Users,
+  X,
+} from 'lucide-react'
 import { ConnectionDialog } from '@/components/connection-dialog'
 import { endpointLabel, loadPane, Pane, type PaneEndpoint, type PaneState } from '@/components/pane'
 import { TransferRail } from '@/components/transfer-rail'
 import { MirrorPreviewDialog, TransferBand, type ActiveJob } from '@/components/transfer-panel'
 import { Button } from '@/components/ui/button'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
 import { api, unwrap, type Connection, type PreviewResult, type TransferEvent } from '@/lib/api'
 import { withTrailingSlash } from '@/lib/format'
 
+/** A row in the header menu. Plain button, styled once. */
+function MenuItem({ icon, label, onClick }: { icon: React.ReactNode; label: string; onClick: () => void }) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className="focus-ring flex w-full items-center gap-2.5 rounded-md px-2 py-1.5 text-left text-[12.5px] text-dim transition-colors hover:bg-secondary hover:text-foreground"
+    >
+      <span className="text-faint">{icon}</span>
+      {label}
+    </button>
+  )
+}
+
 const blankPane = (endpoint: PaneEndpoint, path: string): PaneState => ({
   endpoint,
   path,
@@ -46,6 +71,17 @@ export default function Workspace() {
     }
   }, [])
 
+  const importSshConfig = useCallback(async () => {
+    setError(null)
+    try {
+      const imported = await unwrap(api()?.connections.importSshConfig())
+      if (imported.length === 0) setError('No importable hosts found in ~/.ssh/config.')
+      else await refreshConnections()
+    } catch (caught) {
+      setError(caught instanceof Error ? caught.message : String(caught))
+    }
+  }, [refreshConnections])
+
   useEffect(() => {
     if (!api()) {
       setOutsideShell(true)
@@ -176,10 +212,16 @@ export default function Workspace() {
   if (outsideShell) {
     return (
       <div className="flex h-full items-center justify-center p-8">
-        <p className="max-w-md rounded-lg border border-line bg-card p-4 text-[13px] text-muted-foreground">
-          This is the DiskPush renderer. It runs inside the desktop shell, which provides the filesystem and transfer
-          bridge.
-        </p>
+        <div className="elevation-panel max-w-md rounded-xl border border-line bg-card p-5 text-center">
+          <span className="mx-auto mb-3 flex size-9 items-center justify-center rounded-full bg-secondary text-faint">
+            <MonitorOff className="size-[18px]" />
+          </span>
+          <p className="text-[13px] font-medium text-dim">Not running in the desktop shell</p>
+          <p className="mt-1 text-[12px] leading-relaxed text-muted-foreground">
+            This is the DiskPush renderer. It needs the desktop shell, which provides the filesystem and transfer
+            bridge.
+          </p>
+        </div>
       </div>
     )
   }
@@ -194,7 +236,7 @@ export default function Workspace() {
 
   return (
     <div className="flex h-full flex-col">
-      <header className="flex h-[52px] shrink-0 items-center gap-4 border-b border-line bg-chrome px-4">
+      <header className="flex h-[52px] shrink-0 items-center gap-3.5 border-b border-line bg-chrome px-4">
         {/*
           Two files, not one. logo.dark.png is the lockup FOR a dark background:
           its "Disk" is white, so on the light theme it vanished and the header
@@ -218,24 +260,84 @@ export default function Workspace() {
           priority
         />
         <div className="h-5 w-px bg-line" />
-        <div className="flex items-center gap-2 text-[12px] text-muted-foreground">
-          <CircleCheck className="size-3.5 text-ok" />
-          <span className="text-foreground">{connected}</span>
-          <span>server{connected === 1 ? '' : 's'} available</span>
+        <div className="flex items-center gap-1.5 text-[12px] text-muted-foreground">
+          {connected > 0 ? (
+            <CircleCheck className="size-3.5 text-ok" />
+          ) : (
+            <CircleAlert className="size-3.5 text-warn" />
+          )}
+          {connected > 0 ? (
+            <>
+              <span className="numeric font-medium text-foreground">{connected}</span>
+              <span>server{connected === 1 ? '' : 's'} available</span>
+            </>
+          ) : (
+            <span>No servers yet</span>
+          )}
         </div>
         <div className="ml-auto flex items-center gap-2">
-          <Button variant="outline" onClick={() => setShowConnection(true)} className="h-[30px] gap-2 border-line-strong text-[12px]">
+          <Button
+            variant="outline"
+            onClick={() => setShowConnection(true)}
+            className="h-[var(--control)] gap-2 border-line-strong text-[12px]"
+          >
             <Users className="size-3.5" />
             New server
           </Button>
-          <Button variant="outline" className="h-[30px] w-[30px] border-line-strong p-0 text-muted-foreground">
-            <Settings className="size-[15px]" />
-          </Button>
+
+          {/*
+            This gear had no onClick at all -- a control in the top-right corner
+            of the window that did nothing when pressed, which on its own is
+            enough to make an app feel half-built. It now opens the two actions
+            that already exist behind the bridge, plus the project link.
+          */}
+          <Popover>
+            <PopoverTrigger
+              render={
+                <Button
+                  variant="outline"
+                  aria-label="Menu"
+                  className="size-[var(--control)] border-line-strong p-0 text-muted-foreground"
+                />
+              }
+            >
+              <Settings className="size-[15px]" />
+            </PopoverTrigger>
+            <PopoverContent align="end" className="w-[236px] gap-0.5 p-1.5">
+              <MenuItem
+                icon={<Plus className="size-3.5" />}
+                onClick={() => setShowConnection(true)}
+                label="Add a server…"
+              />
+              <MenuItem
+                icon={<FileDown className="size-3.5" />}
+                onClick={() => void importSshConfig()}
+                label="Import from ~/.ssh/config"
+              />
+              <div className="my-1 h-px bg-line" />
+              <MenuItem
+                icon={<ExternalLink className="size-3.5" />}
+                onClick={() => void api()?.shell.openExternal('https://diskpush.com')}
+                label="diskpush.com"
+              />
+            </PopoverContent>
+          </Popover>
         </div>
       </header>
 
       {error ? (
-        <div className="selectable border-b border-danger-line bg-danger-surface px-4 py-2 text-[12px] text-danger-ink">{error}</div>
+        <div className="flex shrink-0 items-start gap-2.5 border-b border-danger-line bg-danger-surface px-4 py-2.5 text-[12px] text-danger-ink">
+          <CircleAlert className="mt-px size-3.5 shrink-0 text-destructive" />
+          <span className="selectable min-w-0 flex-1">{error}</span>
+          <button
+            type="button"
+            aria-label="Dismiss"
+            onClick={() => setError(null)}
+            className="focus-ring -mr-1 shrink-0 rounded p-0.5 text-danger-ink/70 transition-colors hover:text-danger-ink"
+          >
+            <X className="size-3.5" />
+          </button>
+        </div>
       ) : null}
 
       <div className="flex min-h-0 flex-1 gap-0 p-3.5">
@@ -281,6 +383,7 @@ export default function Workspace() {
       <TransferBand
         job={job}
         route={route}
+        mirror={mirror}
         onCancel={() => {
           if (job) void api()?.transfers.cancel(job.jobId)
         }}
@@ -292,20 +395,21 @@ export default function Workspace() {
         deletes. A command line nobody can trust is worse than none, so it is
         built from the same state the transfer is.
       */}
-      <footer className="flex h-[30px] shrink-0 items-center gap-3 border-t border-line bg-background px-4 text-[11px] text-faint">
+      <footer className="flex h-[28px] shrink-0 items-center gap-2.5 border-t border-line bg-background px-4 text-[11px] text-faint">
         <span>Incremental</span>
         <span className="text-line-strong">·</span>
         <span>Archive metadata</span>
         <span className="text-line-strong">·</span>
         <span>Resume</span>
         <span className="text-line-strong">·</span>
-        <span className={mirror ? 'font-medium text-destructive' : 'text-ok'}>
-          Deletes {mirror ? 'ON' : 'off'}
-        </span>
-        <span
-          className="selectable ml-auto max-w-[52%] truncate font-[family-name:var(--font-mono)] text-[10.5px]"
-          title={rsyncFlags}
-        >
+        <span className={mirror ? 'font-medium text-destructive' : 'text-ok'}>Deletes {mirror ? 'ON' : 'off'}</span>
+        {/*
+          The command used to run flush to the window edge and get sliced
+          mid-token by the truncation, so the last thing in the footer was
+          always half a word. It keeps a gutter now, and the full string is in
+          the tooltip.
+        */}
+        <span className="selectable numeric ml-auto min-w-0 max-w-[54%] truncate pl-4 text-[10.5px]" title={rsyncFlags}>
           {rsyncFlags}
         </span>
       </footer>
diff --git a/apps/desktop/src/components/connection-dialog.tsx b/apps/desktop/src/components/connection-dialog.tsx
index 6fd6ce1..40b9b7c 100644
--- a/apps/desktop/src/components/connection-dialog.tsx
+++ b/apps/desktop/src/components/connection-dialog.tsx
@@ -76,7 +76,7 @@ export function ConnectionDialog({
 
   return (
     <Dialog open={open} onOpenChange={(next) => (next ? undefined : onClose())}>
-      <DialogContent className="max-w-lg gap-0 border-line-strong bg-popover p-0">
+      <DialogContent className="max-w-lg gap-0 border-line-strong bg-popover p-0 [--dialog-pad:0px]">
         <DialogHeader className="flex-row items-center gap-3 space-y-0 border-b border-line px-[18px] py-4">
           <span className="flex size-[30px] items-center justify-center rounded-lg bg-info-surface text-primary">
             <Server className="size-[17px]" />
@@ -114,17 +114,25 @@ export function ConnectionDialog({
 
           <div className="flex flex-col gap-2">
             <Label className="text-[10.5px] uppercase tracking-[0.08em] text-faint">Authentication</Label>
-            <div className="flex gap-2">
+            {/* A segmented control rather than two loose buttons: these are two
+                values of one setting, and spacing them apart made them read as
+                two independent actions. */}
+            <div
+              role="radiogroup"
+              className="inline-flex self-start rounded-lg border border-line-strong bg-sunken p-0.5"
+            >
               {AUTH.map((option) => (
                 <button
                   key={option.id}
                   type="button"
+                  role="radio"
+                  aria-checked={auth === option.id}
                   onClick={() => setAuth(option.id)}
                   className={cn(
-                    'h-8 rounded-lg border px-3 text-[12px] font-medium transition-colors',
+                    'focus-ring h-[28px] rounded-[7px] px-3 text-[12px] font-medium transition-colors',
                     auth === option.id
-                      ? 'border-info-line bg-info-surface text-info-ink'
-                      : 'border-line-strong text-muted-foreground hover:text-foreground',
+                      ? 'bg-primary text-primary-foreground'
+                      : 'text-muted-foreground hover:text-foreground',
                   )}
                 >
                   {option.label}
diff --git a/apps/desktop/src/components/pane.tsx b/apps/desktop/src/components/pane.tsx
index e9d60c4..d1ccc6d 100644
--- a/apps/desktop/src/components/pane.tsx
+++ b/apps/desktop/src/components/pane.tsx
@@ -1,12 +1,25 @@
 'use client'
 
-import { useEffect, useMemo, useState } from 'react'
-import { ChevronRight, CornerLeftUp, FileText, Folder, Link2, RefreshCw, Search } from 'lucide-react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import {
+  ChevronRight,
+  CornerLeftUp,
+  FileText,
+  Folder,
+  FolderOpen,
+  Link2,
+  RefreshCw,
+  Search,
+  ServerCrash,
+  SearchX,
+} from 'lucide-react'
 import { api, unwrap, type Connection, type FileEntry } from '@/lib/api'
 import { formatBytes, formatDate, formatMode, joinPath, parentPath } from '@/lib/format'
 import { EndpointSelect, type PaneEndpoint } from '@/components/endpoint-select'
+import { Checkbox } from '@/components/ui/checkbox'
 import { Input } from '@/components/ui/input'
 import { ScrollArea } from '@/components/ui/scroll-area'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
 import { cn } from '@/lib/utils'
 
 export type { PaneEndpoint }
@@ -27,6 +40,43 @@ export function endpointLabel(endpoint: PaneEndpoint, connections: readonly Conn
   return connections.find((connection) => connection.id === endpoint.connectionId)?.name ?? 'server'
 }
 
+/** The three data columns, in one place so header and rows cannot drift apart. */
+const COLUMNS = 'grid-cols-[minmax(0,1fr)_84px_124px]'
+
+/** An icon-only control: same box, same hover, same focus ring, every time. */
+function IconAction({
+  label,
+  onClick,
+  children,
+  className,
+}: {
+  label: string
+  onClick: () => void
+  children: React.ReactNode
+  className?: string
+}) {
+  return (
+    <Tooltip>
+      <TooltipTrigger
+        render={
+          <button
+            type="button"
+            aria-label={label}
+            onClick={onClick}
+            className={cn(
+              'focus-ring flex size-[var(--control)] shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground active:translate-y-px',
+              className,
+            )}
+          />
+        }
+      >
+        {children}
+      </TooltipTrigger>
+      <TooltipContent>{label}</TooltipContent>
+    </Tooltip>
+  )
+}
+
 /** Breadcrumbs without a library: the path is the only source of truth. */
 function Breadcrumbs({ path, onNavigate }: { path: string; onNavigate: (path: string) => void }) {
   const parts = useMemo(() => {
@@ -38,23 +88,46 @@ function Breadcrumbs({ path, onNavigate }: { path: string; onNavigate: (path: st
     }))
   }, [path])
 
+  const scroller = useRef<HTMLDivElement>(null)
+  const [clipped, setClipped] = useState(false)
+
+  // A long path scrolls rather than truncates, and it is scrolled to the end,
+  // because the folder you are actually in is the tail of the string. Doing
+  // this with `dir="rtl"` also right-aligns a SHORT path, which leaves the
+  // field looking empty with the crumbs shoved against the refresh button.
+  useEffect(() => {
+    const element = scroller.current
+    if (!element) return
+    element.scrollLeft = element.scrollWidth
+    setClipped(element.scrollLeft > 0)
+  }, [path])
+
   return (
-    <div className="selectable flex min-w-0 flex-1 items-center gap-1 overflow-hidden font-[family-name:var(--font-mono)] text-[12px]">
+    <div
+      ref={scroller}
+      onScroll={(event) => setClipped(event.currentTarget.scrollLeft > 0)}
+      className={cn(
+        'selectable numeric flex min-w-0 flex-1 items-center gap-1 overflow-x-auto whitespace-nowrap text-[12px] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
+        // Without this a scrolled path begins mid-word against a hard edge,
+        // which reads as a rendering fault rather than as "there is more here".
+        clipped && '[mask-image:linear-gradient(to_right,transparent_0,black_18px)]',
+      )}
+    >
       <button
         type="button"
         onClick={() => onNavigate(path.startsWith('/') ? '/' : '.')}
-        className="shrink-0 text-faint transition-colors hover:text-foreground"
+        className="focus-ring shrink-0 rounded px-0.5 text-faint transition-colors hover:text-foreground"
       >
         {path.startsWith('/') ? '/' : '.'}
       </button>
       {parts.map((part, index) => (
-        <span key={part.target} className="flex min-w-0 items-center gap-1">
+        <span key={part.target} className="flex shrink-0 items-center gap-1">
           {index > 0 ? <ChevronRight className="size-3 shrink-0 text-faint/60" /> : null}
           <button
             type="button"
             onClick={() => onNavigate(part.target)}
             className={cn(
-              'truncate transition-colors hover:text-foreground',
+              'focus-ring rounded px-0.5 transition-colors hover:text-foreground',
               index === parts.length - 1 ? 'font-medium text-foreground' : 'text-dim',
             )}
           >
@@ -66,6 +139,51 @@ function Breadcrumbs({ path, onNavigate }: { path: string; onNavigate: (path: st
   )
 }
 
+/** Rows that are the right shape before the listing lands, instead of the word "Loading". */
+function LoadingRows() {
+  return (
+    <div className="animate-pulse">
+      {Array.from({ length: 9 }, (_, index) => (
+        <div key={index} className={cn('grid h-[var(--row)] items-center gap-3 px-3', COLUMNS)}>
+          <span className="flex items-center gap-2.5">
+            <span className="size-[15px] shrink-0 rounded-sm bg-secondary" />
+            <span className="h-[9px] rounded-full bg-secondary" style={{ width: `${38 + ((index * 13) % 42)}%` }} />
+          </span>
+          <span className="ml-auto h-[9px] w-10 rounded-full bg-secondary" />
+          <span className="ml-auto h-[9px] w-20 rounded-full bg-secondary" />
+        </div>
+      ))}
+    </div>
+  )
+}
+
+function EmptyState({
+  icon,
+  title,
+  detail,
+  tone = 'muted',
+}: {
+  icon: React.ReactNode
+  title: string
+  detail?: string
+  tone?: 'muted' | 'danger'
+}) {
+  return (
+    <div className="flex h-full min-h-[180px] flex-col items-center justify-center gap-2 px-6 py-10 text-center">
+      <span
+        className={cn(
+          'flex size-9 items-center justify-center rounded-full',
+          tone === 'danger' ? 'bg-danger-surface text-destructive' : 'bg-secondary text-faint',
+        )}
+      >
+        {icon}
+      </span>
+      <p className={cn('text-[12.5px] font-medium', tone === 'danger' ? 'text-danger-ink' : 'text-dim')}>{title}</p>
+      {detail ? <p className="selectable max-w-[46ch] text-[11.5px] leading-relaxed text-faint">{detail}</p> : null}
+    </div>
+  )
+}
+
 export function Pane({
   role,
   state,
@@ -91,8 +209,17 @@ export function Pane({
 }) {
   const [filter, setFilter] = useState('')
   const [showHidden, setShowHidden] = useState(false)
+  // The row the keyboard is on. Distinct from selection: you can walk the list
+  // without changing what is selected, the way every file manager behaves.
+  const [cursor, setCursor] = useState(0)
+  const listRef = useRef<HTMLDivElement>(null)
+  const anchor = useRef<number | null>(null)
 
-  useEffect(() => setFilter(''), [state.path])
+  useEffect(() => {
+    setFilter('')
+    setCursor(0)
+    anchor.current = null
+  }, [state.path])
 
   const visible = useMemo(
     () =>
@@ -117,23 +244,92 @@ export function Pane({
     .filter((entry) => entry.type !== 'directory')
     .reduce((total, entry) => total + entry.size, 0)
 
-  function toggle(name: string, additive: boolean) {
-    const next = new Set(additive ? state.selected : [])
-    if (state.selected.has(name) && additive) next.delete(name)
-    else next.add(name)
-    onChange({ selected: next })
+  const select = useCallback(
+    (index: number, mode: 'replace' | 'toggle' | 'range') => {
+      const entry = visible[index]
+      if (!entry) return
+      if (mode === 'range' && anchor.current !== null) {
+        const [from, to] = anchor.current <= index ? [anchor.current, index] : [index, anchor.current]
+        onChange({ selected: new Set(visible.slice(from, to + 1).map((item) => item.name)) })
+        return
+      }
+      anchor.current = index
+      if (mode === 'toggle') {
+        const next = new Set(state.selected)
+        if (next.has(entry.name)) next.delete(entry.name)
+        else next.add(entry.name)
+        onChange({ selected: next })
+        return
+      }
+      onChange({ selected: new Set([entry.name]) })
+    },
+    [onChange, state.selected, visible],
+  )
+
+  const open = useCallback(
+    (entry: FileEntry) => {
+      if (entry.type === 'directory') onNavigate(joinPath(state.path, entry.name))
+    },
+    [onNavigate, state.path],
+  )
+
+  /**
+   * Arrow keys walk the list, Enter opens, Backspace goes up.
+   *
+   * The list previously answered only to the mouse, which is what made a
+   * file pane full of rows feel like a picture of a file pane.
+   */
+  function onKeyDown(event: React.KeyboardEvent) {
+    if (visible.length === 0) return
+    const step = (delta: number) => {
+      event.preventDefault()
+      const next = Math.min(visible.length - 1, Math.max(0, cursor + delta))
+      setCursor(next)
+      select(next, event.shiftKey ? 'range' : 'replace')
+      listRef.current?.querySelector(`[data-row="${next}"]`)?.scrollIntoView({ block: 'nearest' })
+    }
+    switch (event.key) {
+      case 'ArrowDown':
+        return step(1)
+      case 'ArrowUp':
+        return step(-1)
+      case 'PageDown':
+        return step(10)
+      case 'PageUp':
+        return step(-10)
+      case 'Home':
+        return step(-visible.length)
+      case 'End':
+        return step(visible.length)
+      case 'Enter':
+        event.preventDefault()
+        return open(visible[cursor])
+      case 'Backspace':
+        event.preventDefault()
+        return onNavigate(parentPath(state.path))
+      case 'a':
+        if (event.ctrlKey || event.metaKey) {
+          event.preventDefault()
+          onChange({ selected: new Set(visible.map((entry) => entry.name)) })
+        }
+        return
+      default:
+        return
+    }
   }
 
   return (
     <section
       onMouseDown={onFocus}
       className={cn(
-        'flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden rounded-xl border bg-card transition-colors',
-        active ? 'border-line-strong' : 'border-line',
+        'elevation-panel flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden rounded-xl border bg-card transition-colors',
+        // The active pane is the one a transfer will read from or write to, so
+        // it is worth more than a one-shade border change.
+        active ? 'border-line-strong ring-1 ring-primary/25' : 'border-line',
       )}
       aria-label={role}
     >
-      <header className="flex items-center gap-2.5 border-b border-line bg-chrome px-3 py-2.5">
+      <header className="flex h-[46px] shrink-0 items-center gap-2.5 border-b border-line bg-chrome px-2.5">
         <EndpointSelect
           value={state.endpoint}
           saved={saved}
@@ -141,120 +337,173 @@ export function Pane({
           onChange={onEndpointChange}
           onAddServer={onAddServer}
         />
-        <span className="text-[10px] uppercase tracking-[0.09em] text-faint">{role}</span>
+        <span
+          className={cn(
+            'rounded-md px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-[0.09em] transition-colors',
+            active ? 'bg-primary/12 text-primary' : 'text-faint',
+          )}
+        >
+          {role}
+        </span>
         {state.transfersDisabled ? (
-          <span className="ml-auto rounded bg-warn/15 px-1.5 py-0.5 text-[10px] text-warn">rsync missing</span>
+          <Tooltip>
+            <TooltipTrigger
+              render={
+                <span className="ml-auto shrink-0 cursor-default rounded-md bg-warn/15 px-1.5 py-0.5 text-[10px] font-medium text-warn" />
+              }
+            >
+              rsync missing
+            </TooltipTrigger>
+            <TooltipContent>This server can be browsed over SFTP, but cannot transfer.</TooltipContent>
+          </Tooltip>
         ) : null}
       </header>
 
-      <div className="flex items-center gap-1.5 border-b border-line px-3 py-2">
-        <button
-          type="button"
-          title="Up one directory"
-          onClick={() => onNavigate(parentPath(state.path))}
-          className="flex size-[26px] shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground"
-        >
+      {/*
+        One toolbar, not two. The path, the filter and the hidden-files toggle
+        used to occupy a band each, so every pane spent four full-width rules
+        on chrome before showing a single file.
+      */}
+      <div className="flex shrink-0 items-center gap-1.5 border-b border-line px-2.5 py-2">
+        <IconAction label="Up one directory" onClick={() => onNavigate(parentPath(state.path))}>
           <CornerLeftUp className="size-[15px]" />
-        </button>
-        <div className="flex min-w-0 flex-1 items-center rounded-md border border-line bg-background px-2.5 py-1">
+        </IconAction>
+        <div className="flex h-[var(--control)] min-w-0 flex-1 items-center rounded-md border border-line bg-background px-2.5">
           <Breadcrumbs path={state.path} onNavigate={onNavigate} />
         </div>
-        <button
-          type="button"
-          title="Refresh"
-          onClick={() => onNavigate(state.path)}
-          className="flex size-[26px] shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground"
-        >
+        <IconAction label="Refresh" onClick={() => onNavigate(state.path)}>
           <RefreshCw className={cn('size-[14px]', state.loading && 'animate-spin')} />
-        </button>
-      </div>
-
-      <div className="flex items-center gap-2 border-b border-line px-3 py-2">
-        <div className="relative flex-1">
+        </IconAction>
+        <div className="relative w-[124px] shrink-0 lg:w-[150px]">
           <Search className="pointer-events-none absolute left-2.5 top-1/2 size-3.5 -translate-y-1/2 text-faint" />
           <Input
             value={filter}
             placeholder="Filter"
+            aria-label={`Filter ${role.toLowerCase()} listing`}
             onChange={(event) => setFilter(event.target.value)}
-            className="h-7 border-line bg-background pl-8 text-[12px]"
+            className="h-[var(--control)] border-line bg-background pl-8 text-[12px]"
           />
         </div>
-        <label className="flex shrink-0 cursor-pointer items-center gap-1.5 text-[11px] text-muted-foreground">
-          <input
-            type="checkbox"
-            checked={showHidden}
-            onChange={(event) => setShowHidden(event.target.checked)}
-            className="accent-primary"
-          />
+        <label className="flex h-[var(--control)] shrink-0 cursor-pointer items-center gap-1.5 rounded-md px-1.5 text-[11px] text-muted-foreground transition-colors hover:text-foreground">
+          <Checkbox checked={showHidden} onCheckedChange={(next) => setShowHidden(next === true)} />
           Hidden
         </label>
       </div>
 
-      <div className="grid grid-cols-[1fr_78px_118px] border-b border-line px-3 py-1.5 text-[10px] uppercase tracking-[0.08em] text-faint">
+      <div
+        className={cn(
+          'grid shrink-0 gap-3 border-b border-line bg-sunken/60 px-3 py-1.5 text-[10px] font-medium uppercase tracking-[0.08em] text-faint',
+          COLUMNS,
+        )}
+      >
         <span>Name</span>
         <span className="text-right">Size</span>
         <span className="text-right">Modified</span>
       </div>
 
       <ScrollArea className="min-h-0 flex-1">
-        {state.error ? (
-          <p className="selectable p-3 text-[12px] text-destructive">{state.error}</p>
-        ) : state.loading ? (
-          <p className="p-3 text-[12px] text-muted-foreground">Loading…</p>
-        ) : visible.length === 0 ? (
-          <p className="p-3 text-[12px] text-muted-foreground">{filter ? 'Nothing matches' : 'Empty'}</p>
-        ) : (
-          visible.map((entry) => {
-            const isSelected = state.selected.has(entry.name)
-            return (
-              <div
-                key={entry.path}
-                onClick={(event) => toggle(entry.name, event.ctrlKey || event.metaKey)}
-                onDoubleClick={() => {
-                  if (entry.type === 'directory') onNavigate(joinPath(state.path, entry.name))
-                }}
-                className={cn(
-                  'grid h-[34px] cursor-default grid-cols-[1fr_78px_118px] items-center border-l-2 px-3 text-[12.5px]',
-                  isSelected ? 'border-l-primary bg-accent' : 'border-l-transparent hover:bg-secondary',
-                )}
-              >
-                <span className="flex min-w-0 items-center gap-2.5">
-                  {entry.type === 'directory' ? (
-                    <Folder className="size-[15px] shrink-0 text-primary" />
-                  ) : entry.type === 'symlink' ? (
-                    <Link2 className="size-[15px] shrink-0 text-cyan" />
-                  ) : (
-                    <FileText className="size-[15px] shrink-0 text-muted-foreground" />
+        <div
+          ref={listRef}
+          role="listbox"
+          aria-label={`${role} files`}
+          tabIndex={0}
+          onKeyDown={onKeyDown}
+          className="focus-ring h-full outline-none"
+        >
+          {state.error ? (
+            <EmptyState
+              tone="danger"
+              icon={<ServerCrash className="size-[18px]" />}
+              title="Could not read this directory"
+              detail={state.error}
+            />
+          ) : state.loading ? (
+            <LoadingRows />
+          ) : visible.length === 0 ? (
+            filter ? (
+              <EmptyState
+                icon={<SearchX className="size-[18px]" />}
+                title={`Nothing matches “${filter}”`}
+                detail={
+                  state.entries.length > 0
+                    ? `${state.entries.length} item${state.entries.length === 1 ? '' : 's'} here, none with that in the name.`
+                    : undefined
+                }
+              />
+            ) : (
+              <EmptyState
+                icon={<FolderOpen className="size-[18px]" />}
+                title="This folder is empty"
+                detail={showHidden ? undefined : 'Hidden files are not being shown.'}
+              />
+            )
+          ) : (
+            visible.map((entry, index) => {
+              const isSelected = state.selected.has(entry.name)
+              return (
+                <div
+                  key={entry.path}
+                  data-row={index}
+                  role="option"
+                  aria-selected={isSelected}
+                  onClick={(event) => {
+                    setCursor(index)
+                    select(index, event.shiftKey ? 'range' : event.ctrlKey || event.metaKey ? 'toggle' : 'replace')
+                  }}
+                  onDoubleClick={() => open(entry)}
+                  className={cn(
+                    'grid h-[var(--row)] cursor-default items-center gap-3 border-l-2 px-3 text-[12.5px] transition-colors',
+                    COLUMNS,
+                    isSelected
+                      ? 'border-l-primary bg-primary/14'
+                      : 'border-l-transparent hover:bg-secondary/70',
+                    cursor === index && !isSelected && 'bg-secondary/40',
                   )}
-                  <span className={cn('truncate', isSelected ? 'text-white' : 'text-dim')}>{entry.name}</span>
-                </span>
-                <span className="text-right font-[family-name:var(--font-mono)] text-[11.5px] text-muted-foreground">
-                  {entry.type === 'directory' ? '—' : formatBytes(entry.size)}
-                </span>
-                <span
-                  className="text-right font-[family-name:var(--font-mono)] text-[11.5px] text-muted-foreground"
-                  title={formatMode(entry.mode)}
                 >
-                  {formatDate(entry.modifiedAt)}
-                </span>
-              </div>
-            )
-          })
-        )}
+                  <span className="flex min-w-0 items-center gap-2.5">
+                    {entry.type === 'directory' ? (
+                      <Folder className="size-[15px] shrink-0 fill-primary/20 text-primary" />
+                    ) : entry.type === 'symlink' ? (
+                      <Link2 className="size-[15px] shrink-0 text-cyan" />
+                    ) : (
+                      <FileText className="size-[15px] shrink-0 text-faint" />
+                    )}
+                    <span className={cn('truncate', isSelected ? 'font-medium text-foreground' : 'text-dim')}>
+                      {entry.name}
+                    </span>
+                  </span>
+                  <span
+                    className={cn(
+                      'numeric text-right text-[11.5px]',
+                      entry.type === 'directory' ? 'text-faint' : 'text-muted-foreground',
+                    )}
+                  >
+                    {entry.type === 'directory' ? '—' : formatBytes(entry.size)}
+                  </span>
+                  <span className="numeric text-right text-[11.5px] text-muted-foreground" title={formatMode(entry.mode)}>
+                    {formatDate(entry.modifiedAt)}
+                  </span>
+                </div>
+              )
+            })
+          )}
+        </div>
       </ScrollArea>
 
-      <footer className="flex items-center gap-2.5 border-t border-line bg-sunken px-3 py-2 text-[11.5px] text-muted-foreground">
+      <footer className="flex h-[30px] shrink-0 items-center gap-2 border-t border-line bg-sunken px-3 text-[11.5px] text-muted-foreground">
         <span>
-          <span className="text-dim">{visible.length}</span> items
+          <span className="numeric text-dim">{visible.length}</span> item{visible.length === 1 ? '' : 's'}
         </span>
+        <span className="text-line-strong">·</span>
         {state.selected.size > 0 ? (
-          <span>
-            · <span className="text-primary">{state.selected.size}</span> selected · {formatBytes(selectedSize)}
+          <span className="text-primary">
+            <span className="numeric font-medium">{state.selected.size}</span> selected
+            <span className="numeric ml-1.5 text-muted-foreground">{formatBytes(selectedSize)}</span>
           </span>
         ) : (
           // What the pane adds up to is the question you actually have before
           // pressing Sync, and the strip was showing a bare count instead.
-          <span>· {formatBytes(totalSize)}</span>
+          <span className="numeric">{formatBytes(totalSize)}</span>
         )}
       </footer>
     </section>
diff --git a/apps/desktop/src/components/transfer-panel.tsx b/apps/desktop/src/components/transfer-panel.tsx
index d09ab23..6b42459 100644
--- a/apps/desktop/src/components/transfer-panel.tsx
+++ b/apps/desktop/src/components/transfer-panel.tsx
@@ -1,6 +1,7 @@
 'use client'
 
-import { ArrowRight, Trash2, TriangleAlert } from 'lucide-react'
+import { useRef } from 'react'
+import { ArrowRight, ChevronRight, CircleCheck, Trash2, TriangleAlert } from 'lucide-react'
 import type { PreviewResult } from '@/lib/api'
 import { formatBytes, formatDuration, formatRate } from '@/lib/format'
 import { Button } from '@/components/ui/button'
@@ -48,10 +49,14 @@ export function MirrorPreviewDialog({
 }) {
   const deletes = preview?.deletes ?? []
   const summary = preview?.summary
+  const cancelRef = useRef<HTMLButtonElement>(null)
 
   return (
     <Dialog open={open} onOpenChange={(next) => (next ? undefined : onCancel())}>
-      <DialogContent className="max-w-2xl gap-0 border-line-strong bg-popover p-0">
+      <DialogContent
+        initialFocus={cancelRef}
+        className="max-w-2xl grid-rows-[auto_minmax(0,1fr)_auto] gap-0 border-line-strong bg-popover p-0 [--dialog-pad:0px]"
+      >
         <DialogHeader className="flex-row items-center gap-3 space-y-0 border-b border-line px-[18px] py-4">
           <span className="flex size-[30px] shrink-0 items-center justify-center rounded-lg bg-danger-surface text-destructive">
             <TriangleAlert className="size-[17px]" />
@@ -64,94 +69,109 @@ export function MirrorPreviewDialog({
           </div>
         </DialogHeader>
 
-        {!preview ? (
-          <p className="px-[18px] py-6 text-muted-foreground">Scanning…</p>
-        ) : !preview.ok ? (
-          <p className="selectable px-[18px] py-6 text-[12.5px] text-destructive">{preview.message}</p>
-        ) : (
-          <>
-            <div className="grid grid-cols-4 gap-px border-b border-line bg-line">
-              {(
-                [
-                  ['Add', summary?.add ?? 0, 'text-ok'],
-                  ['Update', summary?.update ?? 0, 'text-primary'],
-                  ['Unchanged', summary?.unchanged ?? 0, 'text-muted-foreground'],
-                  ['Delete', deletes.length, 'text-destructive'],
-                ] as const
-              ).map(([label, value, tone]) => (
-                <div key={label} className="bg-popover px-4 py-3">
-                  <div className={cn('font-[family-name:var(--font-mono)] text-[19px] font-medium', tone)}>
-                    {value.toLocaleString()}
-                  </div>
-                  <div className="mt-0.5 text-[10.5px] uppercase tracking-[0.07em] text-faint">{label}</div>
-                </div>
-              ))}
+        {/* One scrolling body, so a preview with a long delete list keeps its
+            header and its confirm buttons on screen instead of pushing them
+            past the bottom of the window. */}
+        <div className="min-h-0 overflow-y-auto">
+          {!preview ? (
+            <div className="flex items-center gap-2.5 px-[18px] py-8 text-[12.5px] text-muted-foreground">
+              <span className="size-3.5 animate-spin rounded-full border-2 border-line-strong border-t-primary" />
+              Scanning both sides…
             </div>
+          ) : !preview.ok ? (
+            <p className="selectable px-[18px] py-8 text-[12.5px] text-destructive">{preview.message}</p>
+          ) : (
+            <>
+              <div className="grid grid-cols-4 gap-px border-b border-line bg-line">
+                {(
+                  [
+                    ['Add', summary?.add ?? 0, 'text-ok'],
+                    ['Update', summary?.update ?? 0, 'text-primary'],
+                    ['Unchanged', summary?.unchanged ?? 0, 'text-muted-foreground'],
+                    ['Delete', deletes.length, 'text-destructive'],
+                  ] as const
+                ).map(([label, value, tone]) => (
+                  <div key={label} className="bg-popover px-4 py-3">
+                    <div className={cn('numeric text-[19px] font-medium', tone)}>{value.toLocaleString()}</div>
+                    <div className="mt-0.5 text-[10.5px] uppercase tracking-[0.07em] text-faint">{label}</div>
+                  </div>
+                ))}
+              </div>
+
+              <div className="px-[18px] pt-3.5">
+                {deletes.length > 0 ? (
+                  <div className="flex items-center gap-2.5 rounded-lg border border-danger-line bg-danger-surface px-3 py-2.5 text-[12.5px] text-danger-ink">
+                    <Trash2 className="size-4 shrink-0" />
+                    <span>
+                      <strong className="font-semibold text-destructive">
+                        {deletes.length.toLocaleString()} file{deletes.length === 1 ? '' : 's'}
+                      </strong>{' '}
+                      at the destination will be deleted. This cannot be undone.
+                    </span>
+                  </div>
+                ) : (
+                  <div className="rounded-lg border border-line bg-sunken px-3 py-2.5 text-[12.5px] text-muted-foreground">
+                    Nothing at the destination would be deleted.
+                  </div>
+                )}
+              </div>
 
-            <div className="px-[18px] pt-3.5">
               {deletes.length > 0 ? (
-                <div className="flex items-center gap-2.5 rounded-lg border border-danger-line bg-danger-surface px-3 py-2.5 text-[12.5px] text-danger-ink">
-                  <Trash2 className="size-4 shrink-0" />
-                  <span>
-                    <strong className="font-semibold text-destructive">
-                      {deletes.length.toLocaleString()} file{deletes.length === 1 ? '' : 's'}
-                    </strong>{' '}
-                    at the destination will be deleted. This cannot be undone.
-                  </span>
+                <div className="px-[18px] pt-3">
+                  <div className="text-[10.5px] uppercase tracking-[0.08em] text-faint">Files to be deleted</div>
+                  {/* max-, not a fixed height: two doomed files used to sit at
+                      the top of a 210px well of empty space. */}
+                  <ScrollArea className="mt-2 max-h-[210px] rounded-lg border border-line bg-background py-1">
+                    {deletes.map((path) => (
+                      <div
+                        key={path}
+                        className="selectable numeric flex h-[27px] items-center gap-2.5 px-3 text-[11.5px] text-danger-ink"
+                      >
+                        <span className="shrink-0 text-destructive/70">−</span>
+                        <span className="truncate">{path}</span>
+                      </div>
+                    ))}
+                  </ScrollArea>
                 </div>
-              ) : (
-                <div className="rounded-lg border border-line bg-sunken px-3 py-2.5 text-[12.5px] text-muted-foreground">
-                  Nothing at the destination would be deleted.
-                </div>
-              )}
-            </div>
+              ) : null}
 
-            {deletes.length > 0 ? (
-              <div className="px-[18px] pt-3">
-                <div className="text-[10.5px] uppercase tracking-[0.08em] text-faint">Files to be deleted</div>
-                <ScrollArea className="mt-2 h-[210px] rounded-lg border border-line bg-background">
-                  {deletes.map((path) => (
-                    <div
-                      key={path}
-                      className="selectable flex h-[27px] items-center gap-2.5 px-3 font-[family-name:var(--font-mono)] text-[11.5px] text-danger-ink"
-                    >
-                      <span className="text-danger-line">−</span>
-                      <span className="truncate">{path}</span>
-                    </div>
-                  ))}
-                </ScrollArea>
-              </div>
-            ) : null}
-
-            {preview.warnings.map((warning) => (
-              <p key={warning} className="selectable px-[18px] pt-3 text-[11.5px] text-warn">
-                {warning}
-              </p>
-            ))}
-
-            <details className="px-[18px] pt-3">
-              <summary className="cursor-pointer text-[10.5px] uppercase tracking-[0.08em] text-faint">
-                Effective rsync command
-              </summary>
-              <pre className="selectable mt-2 overflow-x-auto rounded-lg border border-line bg-background p-2.5 font-[family-name:var(--font-mono)] text-[11px] text-muted-foreground">
-                {preview.command}
-              </pre>
-              {preview.control ? (
-                <pre className="selectable mt-1 overflow-x-auto rounded-lg border border-line bg-background p-2.5 font-[family-name:var(--font-mono)] text-[11px] text-faint">
-                  {`# control session: ${preview.control}`}
+              {preview.warnings.map((warning) => (
+                <p key={warning} className="selectable px-[18px] pt-3 text-[11.5px] text-warn">
+                  {warning}
+                </p>
+              ))}
+
+              <details className="group px-[18px] pb-4 pt-3">
+                <summary className="focus-ring inline-flex cursor-pointer list-none items-center gap-1.5 rounded text-[10.5px] uppercase tracking-[0.08em] text-faint transition-colors hover:text-muted-foreground">
+                  <ChevronRight className="size-3 transition-transform group-open:rotate-90" />
+                  Effective rsync command
+                </summary>
+                <pre className="selectable numeric mt-2 overflow-x-auto rounded-lg border border-line bg-background p-2.5 text-[11px] text-muted-foreground">
+                  {preview.command}
                 </pre>
-              ) : null}
-            </details>
-          </>
-        )}
+                {preview.control ? (
+                  <pre className="selectable numeric mt-1 overflow-x-auto rounded-lg border border-line bg-background p-2.5 text-[11px] text-faint">
+                    {`# control session: ${preview.control}`}
+                  </pre>
+                ) : null}
+              </details>
+            </>
+          )}
+        </div>
 
-        <DialogFooter className="mt-3.5 items-center border-t border-line px-[18px] py-3.5 sm:justify-between">
+        <DialogFooter className="items-center border-t border-line px-[18px] py-3.5 sm:justify-between">
           <label className="flex cursor-pointer items-center gap-2 text-[12px] text-muted-foreground">
             <Checkbox checked={trust} onCheckedChange={(next) => onTrustChange(next === true)} />
             Trust this pair from now on
           </label>
           <div className="flex gap-2">
-            <Button variant="outline" onClick={onCancel} className="h-[33px] border-line-strong">
+            {/*
+              Focus opens on Cancel, not on the confirm and not on the trust
+              checkbox it used to land on. This dialog's whole job is to make
+              an irreversible delete deliberate, so a stray Enter or Space has
+              to hit the harmless control.
+            */}
+            <Button ref={cancelRef} variant="outline" onClick={onCancel} className="h-[33px] border-line-strong">
               Cancel
             </Button>
             <Button
@@ -175,12 +195,39 @@ export function MirrorPreviewDialog({
  * aggregate percentage says the job is alive but not what it is doing, so the
  * file currently moving is on screen too.
  */
-export function TransferBand({ job, route, onCancel }: { job: ActiveJob | null; route: string; onCancel: () => void }) {
+export function TransferBand({
+  job,
+  route,
+  mirror,
+  onCancel,
+}: {
+  job: ActiveJob | null
+  route: string
+  mirror: boolean
+  onCancel: () => void
+}) {
+  /*
+   * Idle used to be 74px of "Nothing transferring. Choose a direction and
+   * press Sync." -- the tallest band in the window, spent telling you that
+   * nothing was happening, which you could already see. It is now a slim
+   * status strip that says what the next run would actually do, so the space
+   * carries information rather than an apology.
+   */
   if (!job) {
     return (
-      <div className="flex h-[74px] items-center gap-3 border-t border-line bg-chrome px-4 text-[12px] text-muted-foreground">
-        <ArrowRight className="size-4 text-faint" />
-        Nothing transferring. Choose a direction and press Sync.
+      <div className="flex h-[38px] shrink-0 items-center gap-2.5 border-t border-line bg-chrome px-4 text-[11.5px]">
+        <span className="flex size-[18px] shrink-0 items-center justify-center rounded-full bg-secondary">
+          <ArrowRight className="size-3 text-faint" />
+        </span>
+        <span className="text-muted-foreground">Ready</span>
+        <span className="text-line-strong">·</span>
+        <span className="selectable numeric min-w-0 truncate text-dim">{route}</span>
+        {mirror ? (
+          <span className="flex shrink-0 items-center gap-1 rounded-md bg-danger-surface px-1.5 py-0.5 text-[10px] font-medium text-danger-ink">
+            <Trash2 className="size-3" />
+            Deletes armed
+          </span>
+        ) : null}
       </div>
     )
   }
@@ -189,45 +236,75 @@ export function TransferBand({ job, route, onCancel }: { job: ActiveJob | null;
     job.percent > 0 && job.percent < 100 && job.elapsedSeconds > 0
       ? (job.elapsedSeconds / job.percent) * (100 - job.percent)
       : null
+  const failed = job.finished && job.resumable
+  const done = job.finished && !job.resumable
 
   return (
-    <div className="border-t border-line bg-chrome px-4 pb-2.5 pt-3">
+    <div className="shrink-0 border-t border-line bg-chrome px-4 pb-3 pt-2.5">
       <div className="mb-2 flex items-center gap-3">
-        <span className="flex items-center gap-2 text-[12px] font-semibold">
-          <ArrowRight className={cn('size-3.5', job.finished ? 'text-muted-foreground' : 'text-primary')} />
-          {job.finished ? (job.resumable ? 'Interrupted' : 'Finished') : 'Transferring'}
+        <span className="flex shrink-0 items-center gap-2 text-[12px] font-semibold">
+          <span
+            className={cn(
+              'flex size-[18px] items-center justify-center rounded-full',
+              done ? 'bg-ok/15 text-ok' : failed ? 'bg-danger-surface text-destructive' : 'bg-primary/15 text-primary',
+            )}
+          >
+            {done ? (
+              <CircleCheck className="size-3.5" />
+            ) : failed ? (
+              <TriangleAlert className="size-3" />
+            ) : (
+              <ArrowRight className="size-3" />
+            )}
+          </span>
+          {done ? 'Finished' : failed ? 'Interrupted' : 'Transferring'}
         </span>
-        <span className="selectable font-[family-name:var(--font-mono)] text-[11.5px] text-muted-foreground">{route}</span>
+        <span className="selectable numeric min-w-0 truncate text-[11.5px] text-muted-foreground">{route}</span>
 
-        <div className="ml-auto flex items-center gap-3.5 font-[family-name:var(--font-mono)] text-[11.5px] text-muted-foreground">
-          <span>
-            <span className="text-foreground">{formatBytes(job.bytesTransferred)}</span>
-          </span>
-          <span>
-            <span className="text-foreground">{formatRate(job.bytesPerSecond)}</span>
-          </span>
+        <div className="ml-auto flex shrink-0 items-center gap-4 text-[11.5px] text-muted-foreground">
+          <span className="numeric text-foreground">{formatBytes(job.bytesTransferred)}</span>
+          <span className="numeric text-foreground">{formatRate(job.bytesPerSecond)}</span>
           {remaining !== null ? (
             <span>
-              ETA <span className="text-foreground">{formatDuration(remaining)}</span>
+              ETA <span className="numeric text-foreground">{formatDuration(remaining)}</span>
             </span>
           ) : null}
           {job.finished ? null : (
-            <Button variant="outline" onClick={onCancel} className="h-[26px] border-danger-line px-2.5 text-[11px] text-destructive">
+            <Button
+              variant="outline"
+              onClick={onCancel}
+              className="h-[26px] border-danger-line px-2.5 text-[11px] text-destructive hover:bg-danger-surface hover:text-destructive"
+            >
               Cancel
             </Button>
           )}
         </div>
       </div>
 
+      {/*
+        The track and the indicator are addressed by slot. This used to set
+        `h-[5px] bg-accent` on the Progress ROOT -- a flex wrapper, not the bar
+        -- and recolour `[&>div]` on finish, which is the track rather than the
+        fill, so a completed transfer turned the whole bar green whatever the
+        percentage was.
+      */}
       <Progress
         value={job.percent}
-        className={cn('h-[5px] bg-accent', job.finished && !job.resumable && '[&>div]:bg-ok')}
+        className={cn(
+          'w-full [&_[data-slot=progress-track]]:h-[6px] [&_[data-slot=progress-track]]:bg-accent',
+          done && '[&_[data-slot=progress-indicator]]:bg-ok',
+          failed && '[&_[data-slot=progress-indicator]]:bg-destructive',
+        )}
       />
 
-      <div className="mt-2 flex items-center gap-2.5 font-[family-name:var(--font-mono)] text-[11px] text-muted-foreground">
-        <span className={cn(job.finished ? 'text-muted-foreground' : 'text-primary')}>{job.percent}%</span>
-        <span className="selectable truncate">{job.finished ? job.message : job.currentFile || 'scanning…'}</span>
-        <span className="ml-auto shrink-0">{job.files.toLocaleString()} files</span>
+      <div className="mt-2 flex items-center gap-2.5 text-[11px] text-muted-foreground">
+        <span className={cn('numeric font-medium', done ? 'text-ok' : failed ? 'text-destructive' : 'text-primary')}>
+          {job.percent}%
+        </span>
+        <span className="selectable numeric min-w-0 truncate">
+          {job.finished ? job.message : job.currentFile || 'scanning…'}
+        </span>
+        <span className="numeric ml-auto shrink-0">{job.files.toLocaleString()} files</span>
       </div>
     </div>
   )
diff --git a/apps/desktop/src/components/transfer-rail.tsx b/apps/desktop/src/components/transfer-rail.tsx
index fe2d557..4ba5f28 100644
--- a/apps/desktop/src/components/transfer-rail.tsx
+++ b/apps/desktop/src/components/transfer-rail.tsx
@@ -1,6 +1,7 @@
 'use client'
 
 import { ArrowLeft, ArrowRight, Eye, Trash2 } from 'lucide-react'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
 import { cn } from '@/lib/utils'
 
 /**
@@ -15,7 +16,104 @@ import { cn } from '@/lib/utils'
  * identical words, and only a small arrow between you and overwriting the
  * wrong side. They now name the destination, so the label says where the files
  * land -- the one fact worth being sure of before pressing it.
+ *
+ * They also say "Sync to" rather than only naming the destination. Without the
+ * verb the pair read as a two-option destination picker, and the filled one
+ * read as "currently selected" rather than "this is the button that starts the
+ * transfer" -- which is what it has always actually done.
  */
+function Direction({
+  side,
+  label,
+  armed,
+  busy,
+  onClick,
+}: {
+  side: 'left' | 'right'
+  label: string
+  armed: boolean
+  busy: boolean
+  onClick: () => void
+}) {
+  const Arrow = side === 'right' ? ArrowRight : ArrowLeft
+  return (
+    <Tooltip>
+      <TooltipTrigger
+        render={
+          <button
+            type="button"
+            onClick={onClick}
+            disabled={busy}
+            className={cn(
+              'focus-ring flex h-[68px] w-full flex-col items-center justify-center gap-1 rounded-xl px-1.5 transition-all active:translate-y-px disabled:pointer-events-none disabled:opacity-40',
+              armed
+                ? 'elevation-armed bg-primary text-primary-foreground hover:bg-brand-lift'
+                : 'border border-line-strong bg-secondary text-muted-foreground hover:border-primary/50 hover:text-foreground',
+            )}
+          />
+        }
+      >
+        <Arrow className="size-[20px]" strokeWidth={2.25} />
+        <span
+          className={cn(
+            'text-[8.5px] font-semibold uppercase leading-none tracking-[0.11em]',
+            armed ? 'text-primary-foreground/70' : 'text-faint',
+          )}
+        >
+          Sync to
+        </span>
+        <span className="w-full truncate text-center text-[11px] font-semibold leading-none">{label}</span>
+      </TooltipTrigger>
+      <TooltipContent>Copy into {label}, overwriting what differs</TooltipContent>
+    </Tooltip>
+  )
+}
+
+function RailAction({
+  label,
+  tooltip,
+  icon,
+  onClick,
+  disabled,
+  pressed,
+  tone = 'neutral',
+}: {
+  label: string
+  tooltip: string
+  icon: React.ReactNode
+  onClick: () => void
+  disabled?: boolean
+  pressed?: boolean
+  tone?: 'neutral' | 'danger'
+}) {
+  return (
+    <Tooltip>
+      <TooltipTrigger
+        render={
+          <button
+            type="button"
+            onClick={onClick}
+            disabled={disabled}
+            aria-pressed={pressed}
+            className={cn(
+              'focus-ring flex h-[52px] w-full flex-col items-center justify-center gap-1.5 rounded-xl border text-[10.5px] font-medium transition-colors active:translate-y-px disabled:pointer-events-none disabled:opacity-40',
+              pressed
+                ? 'border-destructive bg-destructive/15 text-destructive'
+                : tone === 'danger'
+                  ? 'border-line-strong text-muted-foreground hover:border-destructive/50 hover:text-destructive'
+                  : 'border-line-strong text-muted-foreground hover:border-primary/50 hover:text-foreground',
+            )}
+          />
+        }
+      >
+        {icon}
+        {label}
+      </TooltipTrigger>
+      <TooltipContent>{tooltip}</TooltipContent>
+    </Tooltip>
+  )
+}
+
 export function TransferRail({
   direction,
   mirror,
@@ -37,54 +135,42 @@ export function TransferRail({
   onPreview: () => void
   onRun: () => void
 }) {
-  const action =
-    'flex w-[84px] flex-col items-center justify-center gap-1 rounded-xl text-[11px] font-semibold transition-all disabled:opacity-40'
-  const armed =
-    'bg-gradient-to-b from-[#1a6dfd] to-[#0b52e0] text-white shadow-[0_4px_14px_-4px_#0b62fd99]'
-  const idle = 'border border-border bg-secondary text-muted-foreground hover:border-ring/60 hover:text-foreground'
-
   return (
-    <div className="flex w-[104px] shrink-0 flex-col items-center justify-center gap-2 px-2">
-      <button
-        type="button"
-        title={`Copy from ${leftLabel} into ${rightLabel}`}
+    // Every control in the rail is now one width and one corner radius. It
+    // used to hold a 64px button with an xl radius above a 50px button with a
+    // 10px radius, which is the sort of thing that reads as unfinished long
+    // before anyone can say why.
+    <div className="flex w-[116px] shrink-0 flex-col items-center justify-center gap-2 px-3">
+      <Direction
+        side="right"
+        label={rightLabel}
+        armed={direction === 'ltr'}
+        busy={busy}
         onClick={() => {
           onDirection('ltr')
           onRun()
         }}
-        disabled={busy}
-        className={cn(action, 'h-[64px]', direction === 'ltr' ? armed : idle)}
-      >
-        <ArrowRight className="size-[22px]" strokeWidth={2} />
-        <span className="max-w-[74px] truncate font-medium opacity-90">to {rightLabel}</span>
-      </button>
-
-      <button
-        type="button"
-        title={`Copy from ${rightLabel} into ${leftLabel}`}
+      />
+      <Direction
+        side="left"
+        label={leftLabel}
+        armed={direction === 'rtl'}
+        busy={busy}
         onClick={() => {
           onDirection('rtl')
           onRun()
         }}
-        disabled={busy}
-        className={cn(action, 'h-[64px]', direction === 'rtl' ? armed : idle)}
-      >
-        <ArrowLeft className="size-[22px]" strokeWidth={2} />
-        <span className="max-w-[74px] truncate font-medium opacity-90">to {leftLabel}</span>
-      </button>
+      />
 
-      <div className="my-1 h-px w-11 bg-border" />
+      <div className="my-1 h-px w-8 bg-line-strong" />
 
-      <button
-        type="button"
-        title="Show what would change, without transferring anything"
+      <RailAction
+        label="Preview"
+        tooltip="Show what would change, without transferring anything"
+        icon={<Eye className="size-[17px]" />}
         onClick={onPreview}
         disabled={busy}
-        className="flex h-[50px] w-[84px] flex-col items-center justify-center gap-1 rounded-[10px] border border-border text-[10.5px] font-medium text-muted-foreground transition-colors hover:border-ring/60 hover:text-foreground disabled:opacity-40"
-      >
-        <Eye className="size-[18px]" />
-        Preview
-      </button>
+      />
 
       {/*
         Mirror is a MODE, not an action -- it arms deletion on the next
@@ -94,21 +180,14 @@ export function TransferRail({
         now as quiet as any other toggle; on, it is unmistakable, because that
         is the state actually worth shouting about.
       */}
-      <button
-        type="button"
-        aria-pressed={mirror}
-        title="Make the destination match the source, deleting what the source does not have"
+      <RailAction
+        label={mirror ? 'Mirror on' : 'Mirror'}
+        tooltip="Make the destination match the source, deleting what the source does not have"
+        icon={<Trash2 className="size-[17px]" />}
         onClick={onToggleMirror}
-        className={cn(
-          'flex h-[50px] w-[84px] flex-col items-center justify-center gap-1 rounded-[10px] border text-[10.5px] font-medium transition-colors',
-          mirror
-            ? 'border-destructive bg-destructive/15 text-destructive'
-            : 'border-border text-muted-foreground hover:border-destructive/50 hover:text-destructive',
-        )}
-      >
-        <Trash2 className="size-[18px]" />
-        Mirror{mirror ? ' on' : ''}
-      </button>
+        pressed={mirror}
+        tone="danger"
+      />
     </div>
   )
 }
diff --git a/apps/desktop/src/components/ui/dialog.tsx b/apps/desktop/src/components/ui/dialog.tsx
index 014f5aa..f613aad 100644
--- a/apps/desktop/src/components/ui/dialog.tsx
+++ b/apps/desktop/src/components/ui/dialog.tsx
@@ -31,7 +31,7 @@ function DialogOverlay({
     <DialogPrimitive.Backdrop
       data-slot="dialog-overlay"
       className={cn(
-        "fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        "fixed inset-0 isolate z-50 bg-black/45 duration-100 supports-backdrop-filter:backdrop-blur-[2px] data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
         className
       )}
       {...props}
@@ -53,7 +53,12 @@ function DialogContent({
       <DialogPrimitive.Popup
         data-slot="dialog-content"
         className={cn(
-          "fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          // `sm:max-w-sm` used to live at the end of this list, where it beat
+          // every `max-w-*` a caller passed: the mirror preview asked for
+          // max-w-2xl and rendered at 384px, squashing its four-column summary
+          // and its delete list. The default is now unprefixed, so a caller's
+          // width wins at every breakpoint.
+          "fixed top-1/2 left-1/2 z-50 grid max-h-[calc(100vh-3rem)] w-full max-w-[min(calc(100%-2rem),24rem)] -translate-x-1/2 -translate-y-1/2 gap-4 overflow-hidden rounded-xl bg-popover p-4 [--dialog-pad:1rem] text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
           className
         )}
         {...props}
@@ -102,7 +107,12 @@ function DialogFooter({
     <div
       data-slot="dialog-footer"
       className={cn(
-        "-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end",
+        // The bleed that pulls this footer out to the panel edge has to match
+        // whatever padding the content actually has. It was hardcoded to -4,
+        // so a dialog using `p-0` (both of ours do) had its footer hanging
+        // 16px past the rounded corner on the left and bottom -- visible as a
+        // detached bar under the panel. `--dialog-pad` carries the real value.
+        "mx-[calc(var(--dialog-pad)*-1)] mb-[calc(var(--dialog-pad)*-1)] flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end",
         className
       )}
       {...props}
diff --git a/apps/desktop/src/lib/format.ts b/apps/desktop/src/lib/format.ts
index b0fcfa5..8df9618 100644
--- a/apps/desktop/src/lib/format.ts
+++ b/apps/desktop/src/lib/format.ts
@@ -27,10 +27,23 @@ export function formatDuration(seconds: number): string {
   return `${minutes}:${String(secs).padStart(2, '0')}`
 }
 
+const pad = (value: number) => String(value).padStart(2, '0')
+
+/**
+ * Local time, not UTC.
+ *
+ * This was `toISOString()`, so every mtime in both panes was rendered in UTC
+ * while the clock in the corner of the screen said something else -- a file
+ * saved a minute ago could read as four hours old. A file manager's date
+ * column is compared against the user's own sense of when they touched
+ * something, so it has to be in their zone.
+ */
 export function formatDate(iso: string): string {
   if (!iso) return '-'
   const date = new Date(iso)
-  return Number.isNaN(date.getTime()) ? '-' : date.toISOString().slice(0, 16).replace('T', ' ')
+  if (Number.isNaN(date.getTime())) return '-'
+  const day = `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`
+  return `${day} ${pad(date.getHours())}:${pad(date.getMinutes())}`
 }
 
 export function formatMode(mode: number): string {