Add prominent disconnected overlay to web terminal

[scion-gteam]

Summary

• Adds a full-terminal overlay when the WebSocket connection drops: 50% black opacity covering the terminal area with large red "DISCONNECTED" text centered on it
• Overlay appears immediately when connection drops and disappears automatically on reconnection
• Small status indicator in the upper-right toolbar remains as a secondary signal
• Uses pointer-events: none so the overlay doesn't interfere with terminal interaction during brief disconnects

Visual comparison

Connected state (left) vs Disconnected state (right):

The disconnected overlay dims the terminal content with a semi-transparent black layer and shows "DISCONNECTED" in large red text, making the connection loss immediately obvious.

(Screenshot rendered from a mockup showing the overlay CSS applied to terminal content)

Implementation

Single file change in web/src/components/pages/terminal.ts:

• Added .disconnected-overlay and .overlay-text CSS styles
• Added conditional overlay element inside .terminal-container that renders when !this.connected && this.terminal (only shown after terminal has initialized, not during initial loading)

Test plan

• Open a terminal session to a running agent
• Verify no overlay is shown while connected
• Kill the agent's broker or network connection
• Verify the overlay appears immediately with dimmed background and red text
• Reconnect and verify the overlay disappears
• Verify the small status dot in the toolbar still shows red/green appropriately

Fixes #77

[scion-gteam]

Visual verification

Connected (left) vs Disconnected (right) overlay rendering:

Message: Body cannot be blank, Locations: [{Line:1 Column:49}]

[scion-gteam]

Review feedback addressed

All 3 high-priority items from the upstream PR review are resolved:

1. .terminal-wrapper positioning context (commit 95cd91b)

• Added .terminal-wrapper class with position: relative, flex: 1, overflow: hidden
• .terminal-container is absolutely positioned inside the wrapper

2. Overlay as sibling, not child (commit 95cd91b)

• .disconnected-overlay is now a sibling of .terminal-container inside .terminal-wrapper
• Lit template expressions no longer touch xterm.js-managed DOM

3. Reactivity for overlay condition (commit a045251)

• Replaced non-reactive this.terminal with @state() wasConnected flag
• wasConnected is set true only after the first successful WebSocket open
• This avoids flashing "DISCONNECTED" during the initial connection handshake (which @state() on this.terminal would have caused)
• Reset in cleanup() so full reconnect cycles start fresh