code-coordinator 0.5.46__py3-none-any.whl

coord/dashboard/webapp/src/components/SessionDetail.tsx

@@ -0,0 +1,140 @@
+/**
+ * SessionDetail — the detail slot for one live session, at `/sessions/:id`
+ * (#1548).
+ *
+ * Mirrors `Detail`'s shape (panel content, not a screen; a back control; a
+ * not-found state for a stale id) so a session row in `SessionsList` behaves
+ * like a pipeline row in `Home` — tap the row, the shell fills the detail
+ * column (wide) or drills in (narrow), and the address bar carries exactly
+ * what's selected. The one action here is "Take over", which hands off to
+ * the full-screen `/terminal/:sessionId` PTY view (#1065) — that route stays
+ * deliberately outside the shell (see `App.tsx`), so this is a small
+ * summary card plus a door to it, not a second terminal implementation.
+ */
+import { useNavigate, useParams } from 'react-router-dom'
+import { useQuery } from '@tanstack/react-query'
+
+import { fetchSessions, type SessionInfo } from '@/api/client'
+import { paths } from '@/routes/paths'
+import { cn } from '@/lib/utils'
+
+const detailShellClass = 'mx-auto w-full max-w-3xl px-4 py-5 md:px-6'
+
+const ASSIGNMENT_TYPE_LABEL: Record<string, string> = {
+  smoke: 'test',
+  review: 'review',
+  'conflict-fix': 'merge',
+}
+
+function stageLabel(stage: string): string {
+  return ASSIGNMENT_TYPE_LABEL[stage] ?? stage
+}
+
+function statusInfo(session: SessionInfo): { label: string; className: string } {
+  if (session.pane_dead) {
+    return { label: 'ended', className: 'bg-secondary text-secondary-foreground' }
+  }
+  if (session.attached) {
+    return { label: 'attached', className: 'bg-yellow-600 text-black' }
+  }
+  return { label: 'live', className: 'bg-primary text-primary-foreground' }
+}
+
+export default function SessionDetail() {
+  const { id } = useParams<{ id: string }>()
+  const navigate = useNavigate()
+
+  const { data: sessions, isLoading, isError } = useQuery({
+    queryKey: ['sessions'],
+    queryFn: fetchSessions,
+  })
+
+  const session = sessions?.find((s) => s.session_id === id) ?? null
+
+  if (isLoading) {
+    return (
+      <div className={detailShellClass}>
+        <p className="py-12 text-center text-sm text-muted-foreground">Loading…</p>
+      </div>
+    )
+  }
+
+  if (isError) {
+    return (
+      <div className={detailShellClass}>
+        <p className="py-12 text-center text-sm text-destructive">Failed to load sessions</p>
+      </div>
+    )
+  }
+
+  if (!session) {
+    return (
+      <div className={detailShellClass}>
+        <header className="mb-6 flex items-center gap-3">
+          <button
+            type="button"
+            onClick={() => navigate(-1)}
+            className="rounded p-1 text-muted-foreground hover:text-foreground"
+            aria-label="Back"
+          >
+            ←
+          </button>
+          <h1 className="text-step-1 font-semibold text-foreground">Not found</h1>
+        </header>
+        <p className="text-sm text-muted-foreground">
+          Session <span className="font-mono">{id}</span> is no longer live.
+        </p>
+      </div>
+    )
+  }
+
+  const { label: statusLabel, className: statusClass } = statusInfo(session)
+  const title = session.issue_title ?? session.session_name
+
+  return (
+    <div className={detailShellClass}>
+      <header className="mb-5">
+        <div className="flex items-start gap-2">
+          <button
+            type="button"
+            onClick={() => navigate(-1)}
+            aria-label="Back"
+            className="-ml-1 shrink-0 rounded p-1 text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          >
+            ←
+          </button>
+          <div className="min-w-0 flex-1">
+            <p className="text-xs text-muted-foreground">
+              {session.repo && <span className="font-mono">{session.repo}</span>}
+              {session.issue !== null && <span className="font-mono"> #{session.issue}</span>}
+              {(session.repo || session.issue !== null) && session.machine && ' · '}
+              {session.machine && <span className="font-mono">{session.machine}</span>}
+            </p>
+            <h2 className="mt-0.5 text-base font-semibold text-foreground">{title}</h2>
+          </div>
+          <span className={cn('shrink-0 rounded-full px-2.5 py-0.5 text-xs font-semibold', statusClass)}>
+            {statusLabel}
+          </span>
+        </div>
+
+        {session.stage && (
+          <div className="mt-3 flex flex-wrap gap-1.5">
+            <span className="rounded border border-border px-1.5 py-0.5 text-xs font-medium text-muted-foreground">
+              {stageLabel(session.stage)}
+            </span>
+          </div>
+        )}
+      </header>
+
+      {!session.pane_dead && (
+        <button
+          type="button"
+          onClick={() => navigate(paths.terminal(session.session_id))}
+          className="w-full rounded-lg bg-primary px-4 py-2.5 text-sm font-medium text-primary-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        >
+          Take over
+        </button>
+      )}
+    </div>
+  )
+}

coord/dashboard/webapp/src/components/SessionsList.tsx

@@ -0,0 +1,81 @@
+/**
+ * Sessions — the live interactive sessions as a first-class list panel
+ * (#1547).
+ *
+ * No new content: this is the exact `SessionCard` list Home already surfaces
+ * above the pipeline (#1067), given its own rail entry so the shell has a
+ * second *real* view. That matters for more than symmetry — with one ready
+ * view the narrow bottom row degenerates into a single tab, which can't
+ * demonstrate (or regression-test) that the rail works as a phone nav at all.
+ *
+ * Home keeps its own "Live sessions" section unchanged: "attention before
+ * detail" says the pipeline view should still open with what's live.
+ *
+ * Rows navigate to `/sessions/:id` (#1548) — the same list -> detail
+ * convention as `Home` -> `Detail` — rather than jumping straight to the
+ * full-screen terminal, so the selection is addressable and the shell fills
+ * its detail column on wide instead of leaving the shell entirely. Home's
+ * own "Live sessions" quick-glance section keeps its direct-to-terminal
+ * shortcut unchanged.
+ */
+import { useNavigate } from 'react-router-dom'
+import { useQuery } from '@tanstack/react-query'
+
+import { fetchSessions } from '@/api/client'
+import { SessionCard } from '@/components/SessionCard'
+import { PanelHeader } from '@/components/PanelHeader'
+import { paths } from '@/routes/paths'
+
+export default function SessionsList() {
+  const navigate = useNavigate()
+  const { data, isLoading, isError, refetch } = useQuery({
+    queryKey: ['sessions'],
+    queryFn: fetchSessions,
+  })
+
+  const sessions = data ?? []
+
+  return (
+    <div className="mx-auto w-full max-w-lg px-4 py-4">
+      <PanelHeader title="Sessions" count={sessions.length} countLabel="live" />
+
+      {isLoading && (
+        <p className="py-12 text-center text-sm text-muted-foreground">Loading sessions…</p>
+      )}
+
+      {isError && (
+        <div className="rounded-lg border border-destructive/40 bg-destructive/10 px-4 py-6 text-center">
+          <p className="text-sm text-destructive">Failed to load sessions</p>
+          <button
+            type="button"
+            onClick={() => void refetch()}
+            className="mt-3 rounded-full border border-border px-3 py-1 text-xs text-muted-foreground"
+          >
+            Retry
+          </button>
+        </div>
+      )}
+
+      {data && sessions.length > 0 && (
+        <section className="space-y-3" aria-label="Live sessions">
+          {sessions.map((session) => (
+            <SessionCard
+              key={session.session_id}
+              session={session}
+              onClick={() => navigate(paths.session(session.session_id))}
+            />
+          ))}
+        </section>
+      )}
+
+      {data && sessions.length === 0 && (
+        <div className="py-12 text-center">
+          <p className="text-sm font-medium text-foreground">No live sessions</p>
+          <p className="mt-1 text-xs text-muted-foreground">
+            Interactive coord sessions show up here while they're running.
+          </p>
+        </div>
+      )}
+    </div>
+  )
+}

coord/dashboard/webapp/src/components/Terminal.tsx

@@ -0,0 +1,376 @@
+/**
+ * Terminal — the live take-over pane for a `coord-*` interactive session
+ * (#1068). Reached via `SessionCard` (#1067) at `/terminal/:sessionId`,
+ * replacing the `TerminalComingSoon` stub now that the pane itself exists.
+ *
+ * Opens a WebSocket to `/ws/terminal/{session_id}` (#1065's PTY<->WebSocket
+ * bridge) and renders the byte stream with xterm.js:
+ *   - browser keystrokes -> binary WS frames (the bridge's `message["bytes"]`
+ *     path writes them straight to the PTY's stdin)
+ *   - PTY output (binary WS frames) -> `term.write(Uint8Array)`
+ *   - terminal size -> a JSON text control frame
+ *     `{"type": "resize", "cols": .., "rows": ..}` on connect, on xterm
+ *     resize, and on window resize (FitAddon keeps cols/rows matched to the
+ *     pane's actual size)
+ *
+ * Closing the pane (the ✕ button, back navigation, or unmount) closes the
+ * WebSocket. That alone is enough to hit the bridge's detach path -- the
+ * server's `finally` block calls `attached.detach()` on every disconnect,
+ * local tmux session included, and detach never kills the session (#1065).
+ *
+ * Reconnect / detach resilience (#1071): mobile networks drop and resume
+ * WebSockets constantly (backgrounding the tab, wifi<->cellular handoff).
+ * An *unexpected* close (any code other than the bridge's session-gone
+ * signal) re-opens a fresh WebSocket to the same `session_id` with
+ * exponential backoff -- the xterm.js `Terminal` instance itself is never
+ * recreated, so `tmux attach`'s redraw on reattach just paints into the
+ * existing pane. The bridge closes with code 4404 when `session_id` no
+ * longer resolves to an active assignment (`resolve_session_target` in
+ * `coord/dashboard/terminal.py`) -- that's a *terminal* state (the worker
+ * session itself is gone, not just this connection), so it is surfaced
+ * distinctly and never retried.
+ *
+ * Backoff-reset guard (live-smoke fix): the WS handshake completing
+ * (`onopen`) does NOT by itself mean the session is usable -- the bridge
+ * `accept()`s before it spawns the tmux attach, so a server-side attach
+ * failure (or anything else that closes the socket a moment after accept)
+ * fires `onopen` immediately followed by `onclose`. Resetting the backoff
+ * counter on every `onopen` -- as an earlier version of this file did --
+ * meant that flapping case never actually backed off: each cycle reopened,
+ * reset the counter to zero, then closed again, so the client hammered the
+ * bridge at the *base* interval indefinitely instead of climbing the
+ * exponential ladder (reproduced live against #1071 iteration 1: 44 reconnect
+ * attempts in ~5-10 minutes). The counter now only resets when a connection
+ * stayed open at least `STABLE_CONNECTION_MS` before dropping -- long enough
+ * to have been a genuine, working attach rather than an accept-then-fail
+ * flap -- so a truly bad/looping backend still gets the full exponential
+ * backoff treatment.
+ *
+ * Layout: the pane occupies the top half of the screen (`h-[50vh]`); the
+ * bottom half hosts `MobileKeyBar` (#1070) -- the soft-key row + line-input
+ * for driving the interactive `claude` TUI from a phone. iOS/Android
+ * safe-area insets pad the header so the close control clears the
+ * notch/status bar (`index.html` sets `viewport-fit=cover` so
+ * `env(safe-area-inset-*)` resolves to something other than 0).
+ */
+import { useEffect, useRef, useState } from 'react'
+import { useNavigate, useParams } from 'react-router-dom'
+import { Terminal as XTerm } from '@xterm/xterm'
+import { FitAddon } from '@xterm/addon-fit'
+import '@xterm/xterm/css/xterm.css'
+import { terminalWebSocketUrl } from '@/api/client'
+import MobileKeyBar from '@/components/MobileKeyBar'
+
+type ConnectionState = 'connecting' | 'open' | 'reconnecting' | 'ended'
+
+const STATUS_LABEL: Record<ConnectionState, string> = {
+  connecting: 'Connecting…',
+  open: 'Live',
+  reconnecting: 'Reconnecting…',
+  ended: 'Session ended',
+}
+
+// Bridge close code for "session_id no longer resolves to an active
+// assignment" -- see `resolve_session_target` / `terminal_ws` in
+// `coord/dashboard/terminal.py`. Distinct from every other close (which is
+// treated as a transient drop worth retrying).
+const SESSION_GONE_CODE = 4404
+const RECONNECT_BASE_MS = 1000
+const RECONNECT_MAX_MS = 10000
+// A connection has to survive at least this long after opening before a
+// subsequent drop counts as "was actually working" and resets the backoff
+// counter -- see the backoff-reset guard note above.
+const STABLE_CONNECTION_MS = 2000
+
+export default function Terminal() {
+  const { sessionId } = useParams<{ sessionId: string }>()
+  const navigate = useNavigate()
+  const containerRef = useRef<HTMLDivElement | null>(null)
+  const wsRef = useRef<WebSocket | null>(null)
+  // Set right before any *deliberate* close (the ✕ button, unmount) so the
+  // reconnect logic below can tell "we closed this on purpose" apart from
+  // "the network/tab dropped it out from under us."
+  const intentionalCloseRef = useRef(false)
+  const [state, setState] = useState<ConnectionState>('connecting')
+  // Incremented on every WebSocket open (initial connect and reconnects).
+  // Passed to MobileKeyBar as `connectionKey` so it can reset its scroll-mode
+  // badge when a reconnect resets server-side copy-mode state (#1299).
+  const [connectionSeq, setConnectionSeq] = useState(0)
+
+  useEffect(() => {
+    if (!sessionId || !containerRef.current) return
+
+    const term = new XTerm({
+      // convertEol: false — tmux sends proper CR+LF sequences; setting this
+      // true causes xterm.js to convert the CR to LF as well, producing
+      // double newlines (\r\n → \n\n).
+      convertEol: false,
+      cursorBlink: true,
+      fontSize: 13,
+      theme: { background: '#0d1117', foreground: '#e6edf3' },
+    })
+    const fit = new FitAddon()
+    term.loadAddon(fit)
+    term.open(containerRef.current)
+    try {
+      fit.fit()
+    } catch {
+      // container may not have a laid-out size yet (e.g. under test) -- xterm
+      // still opens fine, it just keeps its default 80x24 until the next fit.
+    }
+
+    let reconnectAttempt = 0
+    let reconnectTimer: ReturnType<typeof setTimeout> | null = null
+    // Timestamp of the most recent `onopen`, or null while not connected.
+    // Read (and cleared) in `onclose` to tell a stable connection's drop
+    // apart from an accept-then-immediately-fail flap -- see the
+    // backoff-reset guard note above the component docstring.
+    let openedAt: number | null = null
+
+    // ── Resize deduplication ────────────────────────────────────────────────
+    // Only emit a resize frame when cols or rows actually change.  Without
+    // this guard, rapid layout events (ResizeObserver + visualViewport +
+    // window.resize all firing close together) would send many identical
+    // frames and thrash the PTY's TIOCSWINSZ.
+    let lastCols = 0
+    let lastRows = 0
+
+    // cols/rows default to term's current values so onopen / scheduleFit
+    // paths read from the terminal; the onResize path passes xterm's event
+    // args directly (avoids re-reading a stale value after an async hop).
+    const sendResize = (ws: WebSocket, cols = term.cols, rows = term.rows) => {
+      if (ws.readyState !== WebSocket.OPEN) return
+      if (cols === lastCols && rows === lastRows) return
+      lastCols = cols
+      lastRows = rows
+      ws.send(JSON.stringify({ type: 'resize', cols, rows }))
+    }
+
+    // ── Debounced fit scheduler ──────────────────────────────────────────────
+    // Coalesces rapid layout events (window resize, ResizeObserver,
+    // visualViewport) into a single fit.fit() call 50 ms after the last
+    // event.  fit.fit() calls term.resize() which fires onResize, which then
+    // calls sendResize — so the scheduler doesn't need to call sendResize
+    // directly.
+    let fitDebounce: ReturnType<typeof setTimeout> | null = null
+    const scheduleFit = () => {
+      if (fitDebounce) clearTimeout(fitDebounce)
+      fitDebounce = setTimeout(() => {
+        try {
+          fit.fit()
+        } catch {
+          // layout not ready yet (same situation as the mount-time fit)
+        }
+        fitDebounce = null
+      }, 50)
+    }
+
+    const connect = () => {
+      // Opening a connection is always deliberate, so any close that follows
+      // is "unintentional" until the ✕ button / unmount sets the flag again.
+      // Without this reset, React StrictMode's dev mount→cleanup→mount cycle
+      // (cleanup sets the flag true, then a *new* connection is opened) would
+      // leave the flag stuck true, so the live connection's onclose below
+      // would short-circuit and never surface "Reconnecting…" / "Session
+      // ended". Production single-mounts, but the Vite-dev E2E hits this.
+      intentionalCloseRef.current = false
+      const ws = new WebSocket(terminalWebSocketUrl(sessionId))
+      ws.binaryType = 'arraybuffer'
+      wsRef.current = ws
+
+      ws.onopen = () => {
+        openedAt = Date.now()
+        setState('open')
+        // Signal MobileKeyBar to reset its scroll-mode badge: a fresh
+        // `tmux attach-session` starts outside copy-mode, so a stale badge
+        // from the previous connection would misrepresent the server's state.
+        setConnectionSeq((n) => n + 1)
+        // Re-fit now that the WS is open: the layout may have settled since
+        // the mount-time fit (safe-area insets, MobileKeyBar DOM insertion).
+        // This gives us the most accurate terminal size to send as the first
+        // resize frame, which the tmux bridge needs to size the session
+        // correctly (it can't know the phone's viewport until we tell it).
+        try {
+          fit.fit()
+        } catch {
+          // layout not ready (e.g. under test) — term keeps its current size
+        }
+        // Always send a resize on every open (including reconnects): the
+        // server has just accepted a fresh connection and has no size state.
+        // Reset dedup so the frame is guaranteed to go out even when the
+        // terminal size hasn't changed since the last connection.
+        lastCols = 0
+        lastRows = 0
+        sendResize(ws)
+      }
+      ws.onclose = (event) => {
+        // Ignore closes from a superseded socket: React StrictMode's
+        // double-invoke opens ws#1, then cleanup closes it *after* ws#2 has
+        // already become the live connection. Only the current connection
+        // drives state transitions and reconnect scheduling — otherwise
+        // ws#1's late close schedules a spurious reconnect (the #1071
+        // reconnect-storm this guard family exists to prevent).
+        if (wsRef.current !== ws) return
+        if (intentionalCloseRef.current) return
+        if (event.code === SESSION_GONE_CODE) {
+          // The worker session itself is gone (not just this connection) --
+          // a terminal state. Retrying would spin forever against a
+          // session_id that will never resolve again.
+          setState('ended')
+          return
+        }
+        // Only treat this as "the connection was actually working" -- and
+        // so reset the backoff ladder -- if it stayed open long enough to
+        // matter. A connection that opened and closed again almost
+        // instantly (accept() succeeded, then the attach failed, or
+        // anything else killed it right away) keeps climbing the backoff
+        // instead of resetting to the base delay every cycle.
+        const wasStable =
+          openedAt !== null && Date.now() - openedAt >= STABLE_CONNECTION_MS
+        openedAt = null
+        if (wasStable) reconnectAttempt = 0
+        setState('reconnecting')
+        const delay = Math.min(RECONNECT_BASE_MS * 2 ** reconnectAttempt, RECONNECT_MAX_MS)
+        reconnectAttempt += 1
+        reconnectTimer = setTimeout(connect, delay)
+      }
+      // The WebSocket spec always fires "close" right after "error", so
+      // state transitions + reconnect scheduling live solely in onclose --
+      // duplicating them here would double-schedule reconnects.
+      ws.onerror = () => {}
+      ws.onmessage = (event) => {
+        if (typeof event.data === 'string') {
+          term.write(event.data)
+        } else {
+          term.write(new Uint8Array(event.data as ArrayBuffer))
+        }
+      }
+    }
+
+    connect()
+
+    const dataDisposable = term.onData((data) => {
+      const ws = wsRef.current
+      if (ws && ws.readyState === WebSocket.OPEN) {
+        ws.send(new TextEncoder().encode(data))
+      }
+    })
+    // Use xterm's event args ({cols, rows}) directly rather than re-reading
+    // term.cols/term.rows — avoids any stale-value risk between the resize
+    // and our callback.
+    const resizeDisposable = term.onResize(({ cols, rows }) => {
+      const ws = wsRef.current
+      if (ws) sendResize(ws, cols, rows)
+    })
+
+    // ── Layout change listeners ──────────────────────────────────────────────
+    // window.resize catches broad viewport changes (desktop browser resize,
+    // device orientation change).
+    window.addEventListener('resize', scheduleFit)
+
+    // ResizeObserver on the pane container catches layout shifts that
+    // window.resize misses, e.g. the MobileKeyBar growing/shrinking when
+    // the content changes height, or safe-area-inset-* adjustments.
+    const ro = new ResizeObserver(scheduleFit)
+    ro.observe(containerRef.current)
+
+    // visualViewport fires when the mobile soft keyboard appears or
+    // disappears, which shrinks/grows the visual viewport (the area the user
+    // actually sees) without necessarily changing window.innerWidth/Height.
+    // This is the most reliable hook for phone keyboard events.
+    window.visualViewport?.addEventListener('resize', scheduleFit)
+
+    return () => {
+      intentionalCloseRef.current = true
+      if (reconnectTimer) clearTimeout(reconnectTimer)
+      if (fitDebounce) clearTimeout(fitDebounce)
+      window.removeEventListener('resize', scheduleFit)
+      window.visualViewport?.removeEventListener('resize', scheduleFit)
+      ro.disconnect()
+      dataDisposable.dispose()
+      resizeDisposable.dispose()
+      wsRef.current?.close()
+      term.dispose()
+      wsRef.current = null
+    }
+  }, [sessionId])
+
+  const handleClose = () => {
+    intentionalCloseRef.current = true
+    wsRef.current?.close()
+    navigate(-1)
+  }
+
+  /**
+   * Write raw bytes (a JS string, one char per terminal byte) down the same
+   * WebSocket path `term.onData` uses for real keystrokes -- the wire format
+   * PTY bridge (#1065) expects for input. Used by `MobileKeyBar` (#1070) for
+   * its soft keys and line-input submit.
+   */
+  const sendRaw = (data: string) => {
+    const ws = wsRef.current
+    if (ws && ws.readyState === WebSocket.OPEN) {
+      ws.send(new TextEncoder().encode(data))
+    }
+  }
+
+  /**
+   * Send a copy-mode control action as a JSON text frame to the bridge
+   * (#1299). The bridge routes it to ``tmux send-keys -X`` / ``tmux
+   * copy-mode`` server-side, which is prefix- and mode-key-agnostic.
+   *
+   * Used by `MobileKeyBar`'s Scroll controls via the `onControl` prop.
+   * Only sends when the WebSocket is open -- called during user interaction,
+   * so an open socket is the normal case; a closed socket just silently
+   * drops the frame (same defensive posture as `sendRaw`).
+   */
+  const sendControl = (action: string) => {
+    const ws = wsRef.current
+    if (ws && ws.readyState === WebSocket.OPEN) {
+      ws.send(JSON.stringify({ type: 'copy-mode', action }))
+    }
+  }
+
+  return (
+    <div className="flex h-screen flex-col bg-background">
+      <header
+        className="flex items-center justify-between gap-3 border-b border-border px-4 pb-3"
+        style={{ paddingTop: 'calc(env(safe-area-inset-top) + 0.75rem)' }}
+      >
+        <div className="min-w-0">
+          <h1 className="truncate text-sm font-semibold text-foreground">Terminal</h1>
+          <p className="truncate font-mono text-xs text-muted-foreground">
+            {sessionId} · {STATUS_LABEL[state]}
+          </p>
+        </div>
+        <button
+          type="button"
+          onClick={handleClose}
+          aria-label="Close terminal"
+          className="shrink-0 rounded p-2 text-muted-foreground hover:text-foreground"
+        >
+          ✕
+        </button>
+      </header>
+
+      {/* Top half: the live pane. Bottom half: the mobile key bar (#1070). */}
+      <div className="relative h-[50vh] min-h-0 shrink-0 border-b border-border bg-[#0d1117] px-2 py-2">
+        <div ref={containerRef} className="h-full w-full" data-testid="xterm-container" />
+        {state === 'ended' && (
+          <div
+            role="status"
+            className="absolute inset-0 flex items-center justify-center bg-[#0d1117]/90 px-6 text-center text-sm text-muted-foreground"
+          >
+            Session ended — the worker session is no longer available.
+          </div>
+        )}
+      </div>
+      <div
+        className="min-h-0 flex-1"
+        style={{ paddingBottom: 'env(safe-area-inset-bottom)' }}
+      >
+        <MobileKeyBar onSend={sendRaw} onControl={sendControl} connectionKey={connectionSeq} />
+      </div>
+    </div>
+  )
+}

coord/dashboard/webapp/src/components/__tests__/ConnectionBadge.test.tsx

@@ -0,0 +1,81 @@
+/**
+ * Component tests for ConnectionBadge (#1549) — the honest
+ * live/reconnecting/stale-since-<time> indicator. Renders directly against
+ * the real ConnectionStatusContext by wrapping with RealtimeProvider's
+ * context provider indirectly via a minimal test double: since the context
+ * itself isn't exported, these tests drive it through the provider's public
+ * surface (RealtimeProvider + a fake EventSource) rather than reaching into
+ * internals.
+ */
+import { describe, it, expect } from 'vitest'
+import { act, render, screen, waitFor } from '@testing-library/react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { RealtimeProvider } from '@/realtime/RealtimeProvider'
+import type { SseHandle } from '@/realtime/connection'
+import { ConnectionBadge } from '../ConnectionBadge'
+
+class FakeEventSource implements SseHandle {
+  static instances: FakeEventSource[] = []
+  url: string
+  onopen: ((ev: unknown) => void) | null = null
+  onerror: ((ev: unknown) => void) | null = null
+  constructor(url: string) {
+    this.url = url
+    FakeEventSource.instances.push(this)
+  }
+  addEventListener(): void {}
+  close(): void {}
+  emitOpen(): void {
+    this.onopen?.({})
+  }
+  emitError(): void {
+    this.onerror?.({})
+  }
+}
+
+function lastInstance(): FakeEventSource {
+  const inst = FakeEventSource.instances[FakeEventSource.instances.length - 1]
+  if (!inst) throw new Error('no instance')
+  return inst
+}
+
+function renderBadge() {
+  FakeEventSource.instances = []
+  return render(
+    <QueryClientProvider client={new QueryClient()}>
+      <RealtimeProvider
+        createEventSource={(url) => new FakeEventSource(url) as unknown as SseHandle}
+        backoffScheduleMs={[5]}
+      >
+        <ConnectionBadge />
+      </RealtimeProvider>
+    </QueryClientProvider>,
+  )
+}
+
+describe('ConnectionBadge', () => {
+  it('shows "Connecting…" before the first connect', async () => {
+    renderBadge()
+    await waitFor(() => expect(FakeEventSource.instances.length).toBeGreaterThan(0))
+    expect(screen.getByRole('status')).toHaveTextContent('Connecting…')
+  })
+
+  it('shows "Live" once the stream opens', async () => {
+    renderBadge()
+    await waitFor(() => expect(FakeEventSource.instances.length).toBeGreaterThan(0))
+    act(() => lastInstance().emitOpen())
+    await waitFor(() => expect(screen.getByRole('status')).toHaveTextContent('Live'))
+  })
+
+  it('shows a stale-since time then Reconnecting… after a drop', async () => {
+    renderBadge()
+    await waitFor(() => expect(FakeEventSource.instances.length).toBeGreaterThan(0))
+    act(() => lastInstance().emitOpen())
+    await waitFor(() => expect(screen.getByRole('status')).toHaveTextContent('Live'))
+
+    act(() => lastInstance().emitError())
+    await waitFor(() => expect(screen.getByRole('status')).toHaveTextContent(/Stale since/))
+
+    await waitFor(() => expect(screen.getByRole('status')).toHaveTextContent('Reconnecting…'))
+  })
+})