settings: show who exists on each side, and which pairs are the same person

Provisioning was invisible. Connecting a server can create accounts, adopt accounts and leave
accounts alone, and the only record of which happened was a JSON field in a response nobody reads and
rows in a table nobody can see. "Did it work" could only be answered by opening Jellyfin and counting.

The nav entry is Settings rather than Connection, since it is now more than the connection.

The join is computed in the sidecar and shares `normalize` with the reconcile planner, so the screen
cannot disagree with the matching rule about whether Diogo and diogo are one person — a settings page
saying two would be lying about what the next connection will do. It joins by the link ROW first and
by folded name only where none exists: a recorded pairing is a fact, a matching name is a candidate.

Four states, because they mean different things — linked (adopted or created), names match but not
recorded yet, Officer account with no Jellyfin one, and a Jellyfin account with no Officer user. The
last is never touched, and a linked pairing whose Jellyfin account has vanished is shown as such
rather than silently re-matched by name.

"Not known" is kept distinct from "none": if the platform has not sent the account list, or the
server cannot be reached, it says so instead of rendering an empty table that would read as a fact
about the server.

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

web/ConnectionSection.tsx

@@ -4,6 +4,7 @@ import { Check, CheckCircle2, Loader2, Plug, Trash2, TriangleAlert } from 'lucid
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { formatShortDate } from './shared';
+import { AccountsSection } from './AccountsSection';
 import {
   jellyfinErrorMessage,
   useJellyfinHealth,
@@ -249,6 +250,9 @@ export const ConnectionSection = () => {
 
   const servers = data?.servers ?? [];
   const hasServers = servers.length > 0;
+  // The active one, because the accounts view is per server and "which server" is already a decided
+  // question here — the switcher owns it, and asking again on this screen would be a second answer.
+  const activeServer = servers.find((s) => s.isActive) ?? servers[0] ?? null;
 
   const submit = async () => {
     setError(null);
@@ -325,6 +329,10 @@ export const ConnectionSection = () => {
             {add.isPending && <span className={HINT}>Checking the server and signing in…</span>}
           </div>
         </form>
+
+        {/* Below the form on purpose: connecting is what CHANGES this, so the thing you act on comes
+            first and the consequence is read underneath it. */}
+        <AccountsSection serverId={activeServer?.id ?? null} />
       </div>
     </div>
   );