A flat tunnel table forces users to scan the Machine column to mentally
re-group rows; with multiple machines it gets unreadable fast. Group
tunnels by machine into table sections, with a section header per machine
showing name, status, tunnel count, and a per-section "+ Add tunnel"
shortcut that pre-selects the machine in the create modal. The synthetic
SSH-base row pins to the top of its machine's group; remaining tunnels
sort alphabetically. Add a top-of-page search box that filters across
tunnel name, subdomain, machine name, and either port — sections with no
matches drop out automatically.

Implementation notes:
- Multiple <tbody> elements per <table> keeps column alignment intact
  (single visual table, multiple row groups). Section header is a
  colSpan=5 row inside each tbody.
- Wrap tunnels/machines in useMemo so the grouping memo doesn't churn
  on every render — react-query gives us stable payloads but `?? []`
  was minting fresh arrays on each call.
- openAddModal now takes an optional machineId; the page-header button
  passes nothing (the modal's existing machine picker takes over),
  the per-section button pre-fills it.