Lay a gateway on the boundary it serves, not the one it faces

Found by rendering the pictures and looking at them, which is the only way
a layout fault shows up.

A gateway was placed below its OUTWARD lane, so one serving `home` and
`devices` was drawn straddling `hosting` and an unrelated `cafe`, with its
connection crossing a network it has nothing to do with. Its first attachment
is the segment it faces; the rest are the ones it serves, and it belongs above
the topmost of those. Transit faces every lane and serves none, so it keeps the
old rule.

Also: the live picture kept its attachments sorted alphabetically, which threw
away the outside-first order the placement now depends on. A segment holding
only gateways-in-the-gaps was counted as occupied and drawn full height with
nothing in it. Badges read left to right, in the order the facts are stated.
The gap between lanes is wide enough that a straddling node no longer covers
the lane's own name and ranges.

src/diagram/from-live.ts

@@ -87,7 +87,13 @@ export async function diagramFromLive(instanceId: string): Promise<Diagram> {
       const addresses = (mac ? heldByMac.get(mac) : undefined) ?? heldByName.get(device) ?? [];
       attachments.push({ segment, addresses });
     }
-    attachments.sort((a, b) => a.segment.localeCompare(b.segment));
+    // Outside first, then the segments behind it — the same order the declared picture uses,
+    // and what lets the layout place a gateway above the lanes it SERVES rather than below
+    // the one it faces. Sorting alphabetically threw that away.
+    const outside = config["user.mesh-lab.outside"];
+    attachments.sort((a, b) =>
+      a.segment === outside ? -1 : b.segment === outside ? 1 : a.segment.localeCompare(b.segment),
+    );
 
     const notes: string[] = [];
     notes.push(item.type === "container" ? "container" : "virtual machine");