fix(web-ui): make remote workspace rows legible in the nav panel

[bobleer]

Problem

The remote connection line in the nav panel rendered as a bare status dot plus raw text:

• Invisible metadata — 10px text at --color-text-muted and opacity: 0.75. Double-dimmed, well below readable contrast; it read as a stray artifact rather than information.
• Ragged left edge — the dot sat inline in the text flow, so the host name started ~11px right of the workspace title with nothing to justify the offset.
• Broken vertical rhythm — the title kept its single-line min-height: 30px block and the host line hung beneath it: a top-heavy title with an orphaned subtitle in a 43px row.
• No remote affordance — remote workspaces used the identical FolderOpen icon as local ones.
• Colour-only status, untranslated — aria-label={remoteConnStatus ?? 'unknown'} fed screen readers a raw enum ("error"), and sighted users got a 6px colour with no tooltip and no words.
• Dead CSS — .is-unknown was listed in the error-colour group, then immediately overridden by its own later rule.
• Hover jitter — revealing the row actions snaps the reserved gutter 28px→52px, reflowing the host text.

Change

The connection is now a chip reusing the existing branch-pill language, so it reads as a deliberate part of the row:

• Chip's left edge aligns exactly with the title text (0px delta), fixing the raggedness while keeping the dot inside.
• --color-text-secondary, single-dimmed; is-error / is-disconnected / is-connecting carry semantic background and text colour.
• Status in words, not just colour — spelled out only when it needs attention (connecting / disconnected / connection error / status unknown). A green dot alone suffices for connected, so the healthy case stays quiet.
• Localized tooltip (connection · host · status) and a real translated aria-label, across zh-CN / en-US / zh-TW.
• Server icon for remote workspaces.
• Remote rows compact to 38px from 43px, with both lines grouped as one centred unit (2.5px between them, 3.5/2px outer).
• transition: padding-right so the hover gutter glides instead of snapping.
• Removed the dead .is-unknown rule; --color-text-muted is now the dot's base colour.

Verification

Compiled the real SCSS and rendered the actual markup in a browser rather than eyeballing the code — measured row heights, chip/title alignment, text truncation, and panel fit across all five connection states (connected / connecting / disconnected / error / unknown).

• pnpm --dir src/web-ui run test:run — 2403 tests pass (360 files), including the WorkspaceListSectionLayout style contract
• pnpm run i18n:contract:test — 37/37 pass
• pnpm run i18n:audit — 0 warnings
• pnpm run lint:web — clean
• tsc --noEmit — clean

Note

&__workspace-item-title is dead in the TSX but pinned by assertions in WorkspaceListSectionLayout.test.ts, so removing it was out of scope for this pass — worth a separate cleanup.