shell-redesign V1 attempt-3 Phase 3 BOUNCE-FIX follow-on: topology tabs breathe

Founder direction 2026-05-06: remove the horizontal line border that
spanned across the entire tablist; keep the underline ONLY under the
active tab; give the tabs more breathing room.

Changes (TopologyViewModeTabs):
- Removed `border-b border-outline-variant` from tablist wrapper.
- Removed `-mb-px` from buttons (no longer needs to overlap the
  parent's border).
- Removed `px-3` from buttons (gap-6 between tabs handles spacing
  cleanly without per-button horizontal padding).
- Increased button padding to `py-3` (was `py-2`) for vertical breath.
- Increased flex `gap-6` (was `gap-1`) for horizontal breath between tabs.
- Active state still carries `border-b-2 border-stone-900` — only the
  selected tab has an underline; the rest float over the canvas.

Result: tabs read as "GRAPH  TABLE  TERMINAL" floating on the
paper-grid with the active item underlined; no horizontal line bar
across the canvas.

Tests + visual verified at /topology 1440x900.

Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]>

packages/ui/src/components/topology/TopologyViewModeTabs.tsx

@@ -32,12 +32,15 @@ export function TopologyViewModeTabs<T extends string>({
 }: TopologyViewModeTabsProps<T>) {
   return (
     // Internal tablist — div, not <nav>, so SC-1 left-chrome count
-    // (querySelectorAll("nav, aside")) stays at exactly 2.
+    // (querySelectorAll("nav, aside")) stays at exactly 2. No wrapper
+    // line border — founder direction 2026-05-06: only the active tab
+    // carries an underline; the rest of the tablist breathes over the
+    // canvas.
     <div
       role="tablist"
       aria-label="Topology view modes"
       data-testid={`${testIdPrefix}-tabs`}
-      className="flex gap-1 border-b border-outline-variant"
+      className="flex gap-6"
     >
       {tabs.map((t) => (
         <button
@@ -49,7 +52,7 @@ export function TopologyViewModeTabs<T extends string>({
           data-active={active === t.id}
           onClick={() => onSelect(t.id)}
           className={cn(
-            "px-3 py-2 font-mono text-[10px] uppercase tracking-[0.18em] border-b-2 -mb-px",
+            "py-3 font-mono text-[10px] uppercase tracking-[0.18em] border-b-2",
             active === t.id
               ? "border-stone-900 text-stone-900"
               : "border-transparent text-on-surface-variant hover:text-stone-900",