web: server-screen, footer, monitoring-sidebar, and responsive-header polish

[cliffhall]

Closes #1682

Server-screen, footer, monitoring-sidebar, and responsive-header polish, all under #1682. Grew over several visual-iteration passes; each area is its own commit.

Connected-card status treatment

• On a successful connect, the card draws the green highlight border and scrolls itself into view once the monitoring sidebar has opened — the success mirror of the errored-card path (Open the monitoring sidebar on connection failure, with a Console (stderr) tab for stdio servers #1621), threaded via a new connectedServerId and reusing the shared CARD_SCROLL_DELAY_MS.
• ServerStatusIndicator gains a failed flag → a red dot + "Failed" instead of the grey "Disconnected" it settles back to, so a failed connect reads distinctly from a deliberate disconnect.
• The connected highlight persists for the session (mirrors how errored persists), doubling as an at-a-glance "this is the connected server" cue.

Footer row + header tooltip

• The version + copyright move from fixed bottom-corner badges (Web: show clients/web version in lower-right corner (grey) #1639) into a real full-width AppShell.Footer (header-matching background + top border). Because it reserves height, the primary screen and the monitoring sidebar now stop above it. Every screen height calc subtracts --app-shell-footer-height.
• An "MCP Documentation" tooltip on the MCP logo link.

Servers box

• The Servers screen is wrapped in a bordered, container-filling panel-variant Paper (like the Messages panel): a "Servers" title on the left and the Export / Add Servers / collapse controls on the right, over the card grid which scrolls inside the box. White surface (--mantine-color-body, matching the header/footer). Title is a semantic h3 (visual h4) to avoid a heading-order skip under the disconnected h2.

Card-surface refresh (light mode)

• Server cards + the Protocol / Network / Task entry cards (the inset variant) take a faint gray-0 fill (a hair lighter than the gray-1 app background), with their code blocks raised to white — so the content cards read as soft, layered surfaces on their white panels. Structural white cards (sidebars, previews) are intentionally left white.

Monitoring-sidebar layout

• Drop the divider between the tab/search controls and the content.
• Align the controls to the content panel's width (px: xl, matching the embedded screen's inset), give them a small top margin, and halve the controls→content gap (32px → 16px) via pt: md on the embedded screens.

Responsive layout (1280px floor)

• Add a 1280px app min-width. The whole app — header included — honors it: #root is made a containing block (a transform) so the AppShell's fixed header + footer span the full 1280 and scroll horizontally with the content below the floor, rather than staying pinned to a narrower viewport. Body-portalled overlays (modals, tooltips) are unaffected.
• Simplify the header's responsive rules now that it never renders below 1280:
  • The Disconnect control is always a grey icon (VscDebugDisconnect) with a "Disconnect from server" tooltip, matching the other header icons (dropped the red label-button variant).
  • Tabs are always a SegmentedControl (dropped the narrow-viewport Select fallback).
  • The connection status text still drops to a dot-only indicator below 1500px — the header's widest optional element.
• Remove the 1040px media-query gate on the monitoring sidebar: with the floor there's always room, so the sidebar/toggle are available whenever a server is connected (or a connect attempt failed) and a monitor tab exists.

Testing

• Full gate green throughout (validate → test:storybook → test:coverage), including the 409-test axe a11y suite → still fully AA.
• New/updated unit + story coverage for justConnected + deferred scroll, the failed status, the footer row, the logo + Disconnect tooltips, the Servers box heading, and the always-icon / always-SegmentedControl / always-available header behavior. No raw hex/rgba introduced — all surfaces go through --inspector-* tokens.

🤖 Generated with Claude Code

[cliffhall]

@claude review

[claude]

Claude finished @cliffhall's task in 3m 51s —— View job

---

Review — connected-card treatment, footer row, MCP-docs tooltip

• Read the changed files
• Analyze for bugs, correctness, and standards
• Post review

Overall this is a clean, well-structured PR. The justConnected path is a faithful mirror of the errored path (#1621), the constant rename (FAILED_CARD_SCROLL_DELAY_MS → CARD_SCROLL_DELAY_MS) is complete with no stale references, the footer-height subtraction is applied uniformly across every screen calc + EmbeddableScrollArea, and every new branch (failed, justConnected, the footer, the tooltip) has test/story coverage. Nice work.

I traced the one thing I was worried about — whether the deferred scrollIntoView can actually fire — and it holds up:

Scroll-into-view trace (why it works)

My concern was that on connect the ScreenStage (Mantine Transition, keepMounted={false}) might unmount ServerListScreen before the 320 ms timer elapses, and the effect's clearTimeout cleanup would kill the scroll. But activeTab is clamped to headerTabs, and after connect activeTabProp is still "Servers" (the only tab available while disconnected). Since SERVERS_TAB is not a MONITOR_TAB, it stays in headerTabs, so activeTab remains "Servers" — the Servers stage stays mounted and visible, the card persists across the connecting→connected transition, wasConnectedRef flips false→true, and the timer fires on a live, visible card. The "does not scroll when mounted already connected" test correctly documents the complementary edge. 👍

Minor nits (non-blocking)

1. Inline styles object in ServerListScreen.tsx (grid, ~line 224). The card-surface override is written inline in JSX:

   styles={{ root: { "--inspector-surface-card": "var(--inspector-surface-card-server)" } }}

   In ServerCard.tsx you extracted the analogous override to a named CARD_STYLES const. For consistency (and to match the pattern the file already follows), consider hoisting this to a module-level const, e.g. GRID_SURFACE_STYLES. Fix this →

2. Comment vs. code in ServerListScreen.tsx (the Title block): the comment says "The connected panels can use h4 since their header shows no heading", but the code always renders <Title order={3} size="h4">. order={3} is the safe choice in both states, so this is fine — the comment just reads as if h4 is used elsewhere. A one-word tweak would remove the ambiguity.

One design confirmation (not a bug)

connectedServerId is set for the whole time the session is connected (a stable status), so the green highlight border on the connected card persists for the entire session rather than flashing briefly like the freshly-added highlight. Given the issue title ("highlight connected card") this reads as intentional and consistent with how errored persists — just flagging it in case a transient flash was the intended UX.

Standards / a11y

• Semantic h3 (size="h4") to avoid a heading-order skip under the disconnected h2 — good catch.
• All new colors/surfaces go through --inspector-* tokens; bg="var(--mantine-color-body)" matches the header/footer convention. No raw hex/rgba introduced. ✅
• failed overrides both label and dot color and suppresses the connecting pulse — correct.
  · branch v2/1682-highlight-connected-card

[cliffhall]

Thanks for the thorough review! Addressed both nits in 0fa4cb5:

1. Inline grid styles → hoisted to a module-level GRID_SURFACE_STYLES const, matching the CARD_STYLES pattern in ServerCard.tsx.
2. Ambiguous Title comment → reworded so it no longer reads as if h4 is used in this file; it now clarifies the other panels use h4 only because they render while connected (no h2 header to skip under).

On the design confirmation: the persistent green border on the connected card is intentional — it mirrors how the errored red border persists until another server is connected/attempted, and doubles as an at-a-glance "this is the connected server" indicator. Not a transient flash (that's the freshly-added-import highlight's behavior).

Full gate green after the changes, including the 409-test axe a11y suite (still AA-clean).

@claude review

[claude]

Claude finished @cliffhall's task in 38s —— View job

---

Re-review — nit fixes (0fa4cb5)

• Read the fix commit + current state of the changed files
• Verify both nits are addressed correctly
• Post review

Both nits are addressed correctly, and the design confirmation makes sense. LGTM. 👍

1. Hoisted GRID_SURFACE_STYLES — the inline styles object is now a module-level const in ServerListScreen.tsx, matching the CARD_STYLES pattern in ServerCard.tsx line-for-line, right down to the as const (which keeps the --inspector-surface-card custom-property key from widening to string and preserves a stable object identity across renders). The explanatory comment moved up with it intact. Clean.

2. Reworded Title comment — no longer reads as if h4 is used in this file. The new wording ("the other panels render h4 directly because they only show while connected, when the header carries no heading to skip under") correctly explains why order={3} is needed here specifically and why the connected panels don't need it. Matches the code (<Title order={3} size="h4">).

Design confirmation — noted, and it holds together: the persistent green border mirroring the persistent errored red border (rather than the transient freshly-added-import flash) is a consistent, defensible choice. Nothing to change.

No new issues introduced by the fix commit — it's a one-file, comment-and-refactor change with no behavioral delta, so the earlier trace (deferred scrollIntoView, footer-height subtraction, failed status) still stands. Nice work.
· branch v2/1682-highlight-connected-card

[cliffhall]

@claude review

[claude]

Claude finished @cliffhall's task in 1m 37s —— View job

---

Review — connected-card status, footer row, MCP-docs tooltip (fresh pass)

• Read the changed files
• Analyze for bugs, correctness, and standards
• Post review

Re-reviewed the full diff against origin/v2/main, including the two most recent commits (0fa4cb5a nit fixes and a1ad39b7 sidebar-layout tidy). Both earlier nits are resolved and nothing regressed. LGTM. 👍

Correctness — the two new stateful paths hold up

• justConnected scroll (ServerCard.tsx) is a faithful mirror of the errored scroll: wasConnectedRef is seeded from the initial prop so a card that mounts already-connected doesn't scroll, justBecameConnected gates on the false→true edge only, and the clearTimeout cleanup correctly cancels a pending scroll if justConnected flips back to false before the timer fires (quick disconnect) — the re-run then computes justBecameConnected === false and schedules nothing, so there's no stale scroll. Good.
• connectedServerId lifecycle (App.tsx) is sound: unlike failedServerId (which must survive the disconnect event a failed connect emits), connected is a stable status, so a single status-driven effect can both set (=== "connected" → activeServerId) and clear (anything else → undefined) it. errored vs. justConnected are mutually exclusive for a given card, and variant resolves errored before highlighted || justConnected, so there's no ambiguous state.
• failed on ServerStatusIndicator overrides both the label ("Failed") and dot color, and correctly suppresses the connecting pulse (!failed && status === "connecting"), so a settled-back-to-disconnected failure reads red rather than grey. Correct.

Layout — footer-height subtraction is uniform

The new AppShell.Footer reserves --app-shell-footer-height, and every standalone screen's 100dvh calc (Console/Logging/Protocol/Network/Prompts/Resources/Tools/Tasks/ServerList) plus EmbeddableScrollArea's FULLSIZE_MAH now subtract it — no double-counting, because embedded screens override to h: "100%" (bounded by the sidebar, not the viewport). The pt: "md" embedded override cleanly halves the controls→content gap without clobbering the standalone p: "xl" default (withProps plain-spreads top only).

Standards / a11y

• Semantic <Title order={3} size="h4"> avoids the heading-order skip under the disconnected h2 — and the reworded comment now correctly explains why the other panels can render h4 directly. ✅
• Text.ts shed the position: fixed / zIndex / pointerEvents badge styling now that the footer is a real AppShell row — the variants are down to flat color/size/whiteSpace/userSelect, all theme-resident. No raw hex/rgba; new surfaces (--inspector-surface-card-server, --inspector-surface-inset) go through --inspector-* tokens with dark-mode fallbacks. ✅
• Tooltip on LogoLink is a clean, non-behavioral addition.

Nothing blocking and no new issues from me — the design choice (persistent green border mirroring the persistent errored red) was already confirmed intentional in the prior thread and is consistent. Nice, well-tested PR.
· branch v2/1682-highlight-connected-card

[cliffhall]

@claude review

[claude]

Claude finished @cliffhall's task in 3m 42s —— View job

---

Review — responsive-header / 1280px-floor pass (fresh)

• Read the changed files
• Analyze for bugs, correctness, and standards
• Post review

Re-reviewed the full diff against origin/v2/main, focusing on the three newest commits (609ddb47, 03c05eb2, 81b1cfa8) — the responsive-header / 1280px-floor work that the earlier review passes predate. The connected-card / footer / sidebar-layout parts were already vetted in the prior threads and still hold. The new responsive work is solid; two non-blocking observations below.

The 1280px-floor mechanism is correct

#root { min-width: 1280px; transform: translateZ(0) } is a clever, well-commented way to make the AppShell's position: fixed header + footer honor the floor: the transform makes #root their containing block, so they span the full 1280 and scroll horizontally with the content instead of pinning to a narrower viewport. I checked that this doesn't strand any other fixed descendant — the only ones inside #root were the old position: fixed version/copyright badges, and those are gone (Text.ts shed the fixed styling, they now live in the real AppShell.Footer). Body-portalled overlays stay viewport-fixed. 100dvh/100vh calcs are viewport-relative regardless of the transform, so the screen height math is unaffected. Good.

Observations (both non-blocking)

1. Raising ServerStatusIndicator to 1500px silently changes the card status label, not just the header. The breakpoint bump (1200 → 1500) is justified in the comment for the header ("Connected (Nms) is the header's widest optional element"), but ServerCard reuses the same component without a showLabel override (unchanged from base — it has always relied on the viewport query):

<ServerStatusIndicator status={connection.status} retryCount={connection.retryCount} failed={errored} />

So on common laptop widths in the 1280–1500px band (1366, 1440), the server cards now render a dot only (label moved to the title tooltip) where they previously showed the "Connected" / "Disconnected" text. Cards have their own width and aren't subject to the header's tab-row crowding, so this side-effect reads as unintended. If the card should keep its label regardless of viewport, pass showLabel explicitly to decouple it from the header-motivated breakpoint. Worth a confirm. Fix this →

2. Dead test scaffolding + stale comment in InspectorView.test.tsx. This PR removed the isWide / MONITOR_WIDE_QUERY (1040px) gate from InspectorView — that was the point of the floor commit. But the test's @mantine/hooks mock still keys on it, and the source no longer queries 1040px anywhere (a grep confirms only ServerStatusIndicator's 1500px query survives). As a result:

• The lines 23–28 comment ("The monitoring sidebar (Pin Logging/History/Network as a column in InspectorView #1616) is gated on a 1040px viewport media query") now describes a gate this PR deleted.
• The monitorWide hoisted object, its beforeEach reset ("Default narrow…", line 1457), and the ~25 monitorWide.value = true/false assignments are inert — nothing in source reads the 1040 branch anymore.

The mock is still doing real work via its : true fallback (forcing the 1500px status-text query wide), so tests pass, but the scaffolding could collapse to useMediaQuery: () => true with the dead assignments and stale comment removed. Pure cleanup. Fix this →

Standards / a11y

• always-icon Disconnect + always-SegmentedControl tabs cleanly drop the Button/Select/useMediaQuery branches from ViewHeader; the Disconnect from server aria-label + tooltip replaces the old label-button, and the tests were updated to match. ✅
• Text.ts variants are down to flat theme-resident properties now that the footer is a real AppShell row; no leftover position: fixed in the theme (confirmed by grep). ✅
• New surface tokens (--inspector-surface-card-server, --inspector-surface-inset → gray-0) go through --inspector-* with dark-mode fallbacks. No raw hex/rgba. ✅
• No stale references to any removed symbol (FAILED_CARD_SCROLL_DELAY_MS, MONITOR_WIDE_QUERY, SELECT_WIDTH, DisconnectButton, MdLinkOff, isWide) — all gone cleanly.

Nothing blocking. Item 1 is the one I'd want a quick confirm on (it changes card rendering on common screen widths); item 2 is optional cleanup. Nice, well-tested PR.
· branch v2/1682-highlight-connected-card

[cliffhall]

Thanks — both addressed in 63ec370:

1. Card status label (item 1). Good catch — the 1500px bump was header-motivated but ServerCard inherited it. ServerCard now passes showLabel to its ServerStatusIndicator, so the card always shows the status text regardless of viewport. No more dot-only cards at 1280–1500px. ViewHeader keeps the 1500px query (that indicator is subject to the tab-row crowding).

2. Dead test scaffolding (item 2). Removed. The @mantine/hooks mock collapses to useMediaQuery: () => true; the monitorWide hoisted object, its beforeEach reset, all ~23 monitorWide.value = … assignments, and the stale 1040px-gate comment are gone (plus the now-unused beforeEach import).

Full gate green (a flaky remote-transport integration test failed once on a transient SSE 404, passed clean on re-run). Still fully AA.

@claude review

[claude]

Claude finished @cliffhall's task in 43s —— View job

---

Re-review — item fixes (63ec370)

• Read the fix commit + current state of the changed files
• Verify both items are addressed correctly
• Post review

Both items from the previous pass are addressed correctly. LGTM. 👍

1. Card status label (ServerCard.tsx). The card now passes showLabel to its ServerStatusIndicator. Tracing the resolution in ServerStatusIndicator.tsx:65 — const showLabel = showLabelProp ?? wideViewport — the explicit showLabel (i.e. true) makes showLabelProp defined, so it short-circuits the ?? wideViewport and the label always renders on the card, fully decoupled from the header-motivated 1500px query. Cards no longer go dot-only at 1280–1500px (1366/1440). The comment explains why (the card has its own width, isn't subject to the header's tab-row crowding) and ViewHeader correctly keeps the viewport query, since that indicator is subject to the crowding. Exactly the right split.

2. Dead test scaffolding (InspectorView.test.tsx). Fully removed: the @mantine/hooks mock collapses to useMediaQuery: (): boolean => true, and the monitorWide hoisted object, its beforeEach reset, all ~23 monitorWide.value = … assignments, the now-unused beforeEach import, and the stale 1040px-gate comment are gone. The mock still does its real remaining job — forcing ServerStatusIndicator's surviving 1500px status-text query "wide" so the connected header renders its full form under happy-dom's 1024px viewport. I grepped for leftovers: no monitorWide / MONITOR_WIDE anywhere, and the only surviving 1040px hits are the test's historical-context comment (line 27) and ServerListScreen's legitimate grid column threshold (cols={{ base: 1, "1040px": 2, "1560px": 3 }}) — unrelated to the deleted sidebar gate. Clean.

No new issues from the fix commit — it's a one-prop addition plus pure test cleanup, no behavioral delta, so the earlier traces (deferred scrollIntoView, footer-height subtraction, failed status, the 1280px-floor mechanism) all still stand. Nice, thoroughly-tested PR.
· branch v2/1682-highlight-connected-card