diff --git a/packages/ui/src/components/layout/ConnectionStatusIndicator.tsx b/packages/ui/src/components/layout/ConnectionStatusIndicator.tsx
new file mode 100644
index 0000000000..3235d95860
--- /dev/null
+++ b/packages/ui/src/components/layout/ConnectionStatusIndicator.tsx
@@ -0,0 +1,182 @@
+import React from 'react';
+
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
+import { useI18n, type I18nKey, type I18nParams } from '@/lib/i18n';
+import { cn } from '@/lib/utils';
+import { useConfigStore } from '@/stores/useConfigStore';
+import {
+  buildConnectionStatusViewModel,
+  type ConnectionTone,
+  type ConnectionStatusViewModel,
+} from '@/lib/connection-status/connectionStatus';
+
+/**
+ * Compact header-grade button styles. Mirrors the icon-button visual rhythm of
+ * `HeaderIconActionButton` in `Header.tsx` (no drag, hover highlight, focus
+ * ring) but uses a slightly smaller `h-7 w-7` footprint so the dot can sit
+ * alongside the existing icon cluster without pushing other controls.
+ */
+const CONNECTION_INDICATOR_BUTTON_CLASS =
+  'app-region-no-drag inline-flex h-7 w-7 items-center justify-center rounded-md hover:bg-interactive-hover transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary';
+
+/** The dot itself — a small status pill. Color is supplied via the tone token. */
+const CONNECTION_DOT_CLASS = 'h-2 w-2 rounded-full';
+
+/**
+ * Map a view-model tone to a Tailwind theme-token class. This matches the
+ * pattern in `DesktopHostSwitcher.tsx` (lines 84-93): `bg-status-*` for the
+ * meaningful states, `bg-muted-foreground/40` for the muted / unknown state.
+ * No hardcoded colors and no Tailwind palette classes — the values are
+ * project theme tokens.
+ */
+const toneToDotClass = (tone: ConnectionTone): string => {
+  switch (tone) {
+    case 'ok':
+      return 'bg-status-success';
+    case 'warn':
+      return 'bg-status-warning';
+    case 'error':
+      return 'bg-status-error';
+    case 'muted':
+      return 'bg-muted-foreground/40';
+    default: {
+      // Defensive: `ConnectionTone` is a closed union, but TypeScript cannot
+      // prove exhaustiveness without `never`. Fall through to muted.
+      const _exhaustive: never = tone;
+      void _exhaustive;
+      return 'bg-muted-foreground/40';
+    }
+  }
+};
+
+type ConnectionStatusIndicatorBodyProps = {
+  viewModel: ConnectionStatusViewModel;
+  /**
+   * The i18n `t` function, passed down from the parent so the body can be
+   * memoized purely on `viewModel`. When the locale changes, the parent
+   * re-renders with a new `t` reference and the body picks it up.
+   */
+  t: (key: I18nKey, params?: I18nParams) => string;
+};
+
+/**
+ * Inner renderer for the connection status indicator. Split out from the
+ * public component so that the narrow `useConfigStore` selectors live in
+ * exactly one place and the dot itself can be `React.memo`'d on
+ * `viewModel` only. This keeps the dot from re-rendering when unrelated
+ * state (sessions, streaming deltas, etc.) changes upstream.
+ */
+const ConnectionStatusIndicatorBody = React.memo(function ConnectionStatusIndicatorBody({
+  viewModel,
+  t,
+}: ConnectionStatusIndicatorBodyProps) {
+  const dotClass = toneToDotClass(viewModel.tone);
+  const stateLabel = t(viewModel.overallLabelKey as I18nKey);
+  const ariaLabel = t('connectionStatus.aria.indicator', { state: stateLabel });
+
+  // Translate each tooltip line. The view model always emits exactly three
+  // lines: title + hop1 + hop2. When a line carries a `reasonKey` param,
+  // resolve the reason separately and compose it as
+  // "<line> — <reason>". The separator is a non-translated presenter
+  // concern (per the i18n mapping note in the plan: the reason is itself a
+  // complete message, not a grammar fragment).
+  const translatedLines = viewModel.tooltipLines.map((line) => {
+    const text = t(line.key as I18nKey);
+    const reasonKey = line.params && typeof line.params.reasonKey === 'string'
+      ? line.params.reasonKey
+      : null;
+    if (reasonKey !== null) {
+      const reason = t(reasonKey as I18nKey);
+      return `${text} — ${reason}`;
+    }
+    return text;
+  });
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <button
+          type="button"
+          aria-label={ariaLabel}
+          className={CONNECTION_INDICATOR_BUTTON_CLASS}
+        >
+          <span aria-hidden="true" className={cn(CONNECTION_DOT_CLASS, dotClass)} />
+        </button>
+      </TooltipTrigger>
+      <TooltipContent>
+        <div className="flex flex-col gap-0.5">
+          {translatedLines.map((line, index) => (
+            <p
+              // Index-keyed list of a fixed-size array (always 3 entries);
+              // the view model is the actual key.
+              key={index}
+              className={cn(
+                'typography-micro',
+                index === 0 && 'font-medium text-foreground'
+              )}
+            >
+              {line}
+            </p>
+          ))}
+        </div>
+      </TooltipContent>
+    </Tooltip>
+  );
+});
+
+/**
+ * Compact header-grade dot that summarizes connection health across two hops:
+ *   1. Frontend ↔ OpenChamber runtime
+ *   2. OpenChamber runtime ↔ OpenCode
+ *
+ * Default UI is the dot only. The hover / focus tooltip shows 2-3 short
+ * lines (title + one per hop). The dot is keyboard-reachable (renders as
+ * a `<button type="button">`) and exposes a non-color cue via `aria-label`
+ * for screen readers; the same content is reachable by keyboard focus
+ * through the tooltip.
+ *
+ * Performance:
+ *   - subscribes to two narrow fields on `useConfigStore`
+ *     (`runtimeTransportState`, `openCodeRuntimeState`) via leaf selectors
+ *   - does NOT subscribe to session list, streaming deltas, or message
+ *     state — the source of truth is updated by the existing event
+ *     pipeline and health-check paths
+ *   - reads `navigator.onLine` once at mount; the existing sync-context
+ *     browser online/offline listener already updates
+ *     `runtimeTransportState` when the browser reports a change, so the
+ *     ref snapshot is a redundancy check, not a primary signal
+ *
+ * No new polling loop is introduced.
+ */
+export const ConnectionStatusIndicator: React.FC = React.memo(function ConnectionStatusIndicator() {
+  const { t } = useI18n();
+
+  // Narrow leaf selectors. Each call returns the same reference when the
+  // corresponding field is unchanged (Zustand uses Object.is on the
+  // selector return value), so this component does not re-render on
+  // session list / streaming events.
+  const runtimeTransport = useConfigStore((s) => s.runtimeTransportState);
+  const openCodeRuntime = useConfigStore((s) => s.openCodeRuntimeState);
+
+  // navigator.onLine is captured once at mount via a lazy ref initializer.
+  // We intentionally do not install a listener here — the existing
+  // sync-context browser online/offline listener already mirrors
+  // navigator.onLine transitions into `runtimeTransportState`, and the
+  // view model consults `navigatorOffline` only as a redundancy check for
+  // the case where the transport still believes it is connected.
+  const navigatorOfflineRef = React.useRef<boolean>(
+    typeof navigator === 'object' && navigator !== null && navigator.onLine === false,
+  );
+  const navigatorOffline = navigatorOfflineRef.current;
+
+  const viewModel = React.useMemo(
+    () => buildConnectionStatusViewModel({ runtimeTransport, openCodeRuntime, navigatorOffline }),
+    [runtimeTransport, openCodeRuntime, navigatorOffline],
+  );
+
+  return <ConnectionStatusIndicatorBody viewModel={viewModel} t={t} />;
+});
diff --git a/packages/ui/src/components/layout/Header.tsx b/packages/ui/src/components/layout/Header.tsx
index b227e0234a..55f97066f6 100644
--- a/packages/ui/src/components/layout/Header.tsx
+++ b/packages/ui/src/components/layout/Header.tsx
@@ -63,6 +63,7 @@ import type { GitHubAuthStatus } from '@/lib/api/types';
 import type { SessionContextUsage } from '@/stores/types/sessionTypes';
 import { DesktopHostSwitcherDialog } from '@/components/desktop/DesktopHostSwitcher';
 import { OpenInAppButton } from '@/components/desktop/OpenInAppButton';
+import { ConnectionStatusIndicator } from '@/components/layout/ConnectionStatusIndicator';
 import { forceKillTerminal } from '@/lib/terminalApi';
 import { useTerminalStore } from '@/stores/useTerminalStore';
 import { ProjectActionsButton } from '@/components/layout/ProjectActionsButton';
@@ -2048,6 +2049,13 @@ export const Header: React.FC<HeaderProps> = ({
           </Tooltip>
       )}
       <OpenInAppButton directory={actionDirectory} className="mr-1" />
+      {/* ConnectionStatusIndicator subscribes to its own narrow fields
+          (runtimeTransportState, openCodeRuntimeState) on useConfigStore via
+          leaf selectors inside the component. Do NOT hoist a
+          `useConfigStore` selector here — that would defeat the purpose of
+          the narrow leaf selector pattern and force the entire Header to
+          re-render on every connection-state transition. */}
+      <ConnectionStatusIndicator />
       <DesktopServicesMenu
         isDesktopApp={isDesktopApp}
         currentInstanceLabel={currentInstanceLabel}
diff --git a/packages/ui/src/lib/connection-status/connectionStatus.test.ts b/packages/ui/src/lib/connection-status/connectionStatus.test.ts
new file mode 100644
index 0000000000..c2f46633bf
--- /dev/null
+++ b/packages/ui/src/lib/connection-status/connectionStatus.test.ts
@@ -0,0 +1,425 @@
+import { describe, expect, test } from 'bun:test';
+
+import type {
+    OpenCodeRuntimeState,
+    RuntimeTransportState,
+} from '@/stores/useConfigStore';
+
+import {
+    buildConnectionStatusViewModel,
+    classifyReason,
+    type ConnectionStatusViewModel,
+} from './connectionStatus';
+
+const transportConnected: RuntimeTransportState = {
+    phase: 'connected',
+    reason: null,
+    updatedAt: 0,
+};
+
+const transportConnecting: RuntimeTransportState = {
+    phase: 'connecting',
+    reason: null,
+    updatedAt: 0,
+};
+
+const transportReconnecting: RuntimeTransportState = {
+    phase: 'reconnecting',
+    reason: 'ws_closed:code=1006',
+    updatedAt: 0,
+};
+
+const transportDisconnected: RuntimeTransportState = {
+    phase: 'disconnected',
+    reason: 'ws_error_frame:HTTP 502',
+    updatedAt: 0,
+};
+
+const transportOffline: RuntimeTransportState = {
+    phase: 'offline',
+    reason: 'offline',
+    updatedAt: 0,
+};
+
+const openCodeHealthy: OpenCodeRuntimeState = {
+    phase: 'healthy',
+    reason: null,
+    updatedAt: 0,
+};
+
+const openCodeUnhealthy: OpenCodeRuntimeState = {
+    phase: 'unhealthy',
+    reason: 'health_check_unhealthy',
+    updatedAt: 0,
+};
+
+const openCodeUnknown: OpenCodeRuntimeState = {
+    phase: 'unknown',
+    reason: null,
+    updatedAt: 0,
+};
+
+const HOP1_CONNECTED = 'connectionStatus.hop1.connected';
+const HOP1_CONNECTING = 'connectionStatus.hop1.connecting';
+const HOP1_RECONNECTING = 'connectionStatus.hop1.reconnecting';
+const HOP1_DISCONNECTED = 'connectionStatus.hop1.disconnected';
+
+const HOP2_HEALTHY = 'connectionStatus.hop2.healthy';
+const HOP2_UNHEALTHY = 'connectionStatus.hop2.unhealthy';
+const HOP2_UNKNOWN = 'connectionStatus.hop2.unknown';
+
+const REASON_OFFLINE = 'connectionStatus.reason.offline';
+const REASON_AUTH = 'connectionStatus.reason.authRequired';
+const REASON_UNAVAILABLE = 'connectionStatus.reason.unavailable';
+const REASON_TIMEOUT = 'connectionStatus.reason.timeout';
+
+const OVERALL_CONNECTED = 'connectionStatus.overall.connected';
+const OVERALL_RECONNECTING = 'connectionStatus.overall.reconnecting';
+const OVERALL_DEGRADED = 'connectionStatus.overall.degraded';
+const OVERALL_DISCONNECTED = 'connectionStatus.overall.disconnected';
+const OVERALL_UNKNOWN = 'connectionStatus.overall.unknown';
+
+const TOOLTIP_TITLE = 'connectionStatus.tooltip.title';
+
+describe('buildConnectionStatusViewModel', () => {
+    test('fresh connected startup: both hops healthy', () => {
+        const vm = buildConnectionStatusViewModel({
+            runtimeTransport: transportConnected,
+            openCodeRuntime: openCodeHealthy,
+            navigatorOffline: false,
+        });
+
+        expect(vm.overall).toBe('connected');
+        expect(vm.tone).toBe('ok');
+        expect(vm.overallLabelKey).toBe(OVERALL_CONNECTED);
+        expect(vm.hop1.labelKey).toBe(HOP1_CONNECTED);
+        expect(vm.hop1.reasonKey).toBeNull();
+        expect(vm.hop1.rawReason).toBeNull();
+        expect(vm.hop2.labelKey).toBe(HOP2_HEALTHY);
+        expect(vm.hop2.reasonKey).toBeNull();
+        expect(vm.hop2.rawReason).toBeNull();
+    });
+
+    test('runtime restart / reconnect: transport reconnecting with ws_closed reason', () => {
+        const vm = buildConnectionStatusViewModel({
+            runtimeTransport: transportReconnecting,
+            openCodeRuntime: openCodeHealthy,
+            navigatorOffline: false,
+        });
+
+        expect(vm.overall).toBe('reconnecting');
+        // Per the binding user decision: reconnecting → muted (theme-muted
+        // neutral), NOT amber.
+        expect(vm.tone).toBe('muted');
+        expect(vm.overallLabelKey).toBe(OVERALL_RECONNECTING);
+        expect(vm.hop1.labelKey).toBe(HOP1_RECONNECTING);
+        // `ws_closed:code=1006` does not match any classifyReason rule, so the
+        // classified reason is null. The raw reason is preserved on hop1 for
+        // diagnostics only.
+        expect(vm.hop1.reasonKey).toBe(classifyReason('ws_closed:code=1006'));
+        expect(vm.hop1.reasonKey).toBeNull();
+        expect(vm.hop1.rawReason).toBe('ws_closed:code=1006');
+        // hop2 reports whatever the opencode state currently says — and the
+        // opencode state is still healthy, so hop2 is healthy.
+        expect(vm.hop2.labelKey).toBe(HOP2_HEALTHY);
+        expect(vm.hop2.reasonKey).toBeNull();
+    });
+
+    test('browser offline: navigatorOffline wins regardless of transport phase', () => {
+        // The offline path must win even when the transport still believes it
+        // is connected (the network stack may not have observed the drop yet).
+        const vmConnectedButOffline = buildConnectionStatusViewModel({
+            runtimeTransport: transportConnected,
+            openCodeRuntime: openCodeHealthy,
+            navigatorOffline: true,
+        });
+        expect(vmConnectedButOffline.overall).toBe('disconnected');
+        expect(vmConnectedButOffline.tone).toBe('error');
+        expect(vmConnectedButOffline.hop1.reasonKey).toBe(REASON_OFFLINE);
+        expect(vmConnectedButOffline.hop1.rawReason).toBe('offline');
+
+        // The offline path also wins when the transport is in a different
+        // non-offline phase.
+        const vmReconnectingButOffline = buildConnectionStatusViewModel({
+            runtimeTransport: transportReconnecting,
+            openCodeRuntime: openCodeHealthy,
+            navigatorOffline: true,
+        });
+        expect(vmReconnectingButOffline.overall).toBe('disconnected');
+        expect(vmReconnectingButOffline.tone).toBe('error');
+        expect(vmReconnectingButOffline.hop1.reasonKey).toBe(REASON_OFFLINE);
+
+        // Transport phase `offline` (without `navigatorOffline`) also lands in
+        // the disconnected path with the offline reason.
+        const vmTransportOffline = buildConnectionStatusViewModel({
+            runtimeTransport: transportOffline,
+            openCodeRuntime: openCodeHealthy,
+            navigatorOffline: false,
+        });
+        expect(vmTransportOffline.overall).toBe('disconnected');
+        expect(vmTransportOffline.tone).toBe('error');
+        expect(vmTransportOffline.hop1.reasonKey).toBe(REASON_OFFLINE);
+    });
+
+    test('runtime unreachable: transport disconnected with HTTP 502 error frame', () => {
+        // `ws_error_frame:HTTP 502` contains the substring `error` and
+        // therefore classifies to `connectionStatus.reason.unavailable` per
+        // the explicit substring rules. Documenting this assertion in code
+        // so future maintainers understand why this specific reason maps to
+        // `unavailable` rather than `null`.
+        const vm = buildConnectionStatusViewModel({
+            runtimeTransport: transportDisconnected,
+            openCodeRuntime: openCodeHealthy,
+            navigatorOffline: false,
+        });
+
+        expect(vm.overall).toBe('disconnected');
+        expect(vm.tone).toBe('error');
+        expect(vm.hop1.labelKey).toBe(HOP1_DISCONNECTED);
+        expect(vm.hop1.reasonKey).toBe(REASON_UNAVAILABLE);
+        expect(vm.hop1.rawReason).toBe('ws_error_frame:HTTP 502');
+        // hop2 still reports whatever the opencode state currently says.
+        expect(vm.hop2.labelKey).toBe(HOP2_HEALTHY);
+    });
+
+    test('init error: transport disconnected with init_error reason and opencode state unknown', () => {
+        // Exercises the disconnected overall path with an `init_error` raw
+        // reason and an opencode runtime that has not yet reported. Documents
+        // that `init_error` classifies to the unavailable reason (per
+        // classifyReason's substring rule) and that the opencode hop remains
+        // unknown — the dot is disconnected/error, not degraded/warn.
+        const vm = buildConnectionStatusViewModel({
+            runtimeTransport: { phase: 'disconnected', reason: 'init_error', updatedAt: 0 },
+            openCodeRuntime: openCodeUnknown,
+            navigatorOffline: false,
+        });
+
+        expect(vm.overall).toBe('disconnected');
+        expect(vm.overallLabelKey).toBe(OVERALL_DISCONNECTED);
+        expect(vm.tone).toBe('error');
+        expect(vm.hop1.labelKey).toBe(HOP1_DISCONNECTED);
+        expect(vm.hop1.reasonKey).toBe(REASON_UNAVAILABLE);
+        expect(vm.hop1.rawReason).toBe('init_error');
+        // opencode has not yet reported, so hop2 stays unknown.
+        expect(vm.hop2.labelKey).toBe(HOP2_UNKNOWN);
+        expect(vm.hop2.reasonKey).toBeNull();
+        expect(vm.hop2.rawReason).toBeNull();
+    });
+
+    test('opencode unhealthy: transport connected but opencode reports unhealthy', () => {
+        const vm = buildConnectionStatusViewModel({
+            runtimeTransport: transportConnected,
+            openCodeRuntime: openCodeUnhealthy,
+            navigatorOffline: false,
+        });
+
+        expect(vm.overall).toBe('degraded');
+        expect(vm.tone).toBe('warn');
+        expect(vm.overallLabelKey).toBe(OVERALL_DEGRADED);
+        expect(vm.hop1.labelKey).toBe(HOP1_CONNECTED);
+        expect(vm.hop1.reasonKey).toBeNull();
+        expect(vm.hop2.labelKey).toBe(HOP2_UNHEALTHY);
+        // `health_check_unhealthy` contains the substring `unhealthy` and
+        // therefore classifies to `unavailable`.
+        expect(vm.hop2.reasonKey).toBe(REASON_UNAVAILABLE);
+        expect(vm.hop2.rawReason).toBe('health_check_unhealthy');
+    });
+
+    test('transport switch / recovery: post-reconnect transport is connected', () => {
+        const vm = buildConnectionStatusViewModel({
+            runtimeTransport: { phase: 'connected', reason: null, updatedAt: 0 },
+            openCodeRuntime: openCodeHealthy,
+            navigatorOffline: false,
+        });
+
+        expect(vm.overall).toBe('connected');
+        expect(vm.tone).toBe('ok');
+        expect(vm.overallLabelKey).toBe(OVERALL_CONNECTED);
+    });
+
+    test('unknown: transport connected but opencode phase is unknown', () => {
+        const vm = buildConnectionStatusViewModel({
+            runtimeTransport: transportConnected,
+            openCodeRuntime: openCodeUnknown,
+            navigatorOffline: false,
+        });
+
+        expect(vm.overall).toBe('unknown');
+        // Per the binding user decision: unknown → muted (theme-muted
+        // neutral), NOT amber.
+        expect(vm.tone).toBe('muted');
+        expect(vm.overallLabelKey).toBe(OVERALL_UNKNOWN);
+        expect(vm.hop1.labelKey).toBe(HOP1_CONNECTED);
+        expect(vm.hop1.reasonKey).toBeNull();
+        expect(vm.hop2.labelKey).toBe(HOP2_UNKNOWN);
+        expect(vm.hop2.reasonKey).toBeNull();
+    });
+
+    test('tooltipLines is always exactly 3 lines (header + 2 hops), per the user decision', () => {
+        // Reference-stable contract: the hover always shows the header line
+        // plus both hop lines, even when the second hop is not currently
+        // knowable. Never collapses to a single reason line.
+        const cases: Array<{
+            label: string;
+            input: Parameters<typeof buildConnectionStatusViewModel>[0];
+        }> = [
+            {
+                label: 'fresh connected',
+                input: {
+                    runtimeTransport: transportConnected,
+                    openCodeRuntime: openCodeHealthy,
+                    navigatorOffline: false,
+                },
+            },
+            {
+                label: 'reconnecting',
+                input: {
+                    runtimeTransport: transportReconnecting,
+                    openCodeRuntime: openCodeHealthy,
+                    navigatorOffline: false,
+                },
+            },
+            {
+                label: 'browser offline',
+                input: {
+                    runtimeTransport: transportConnected,
+                    openCodeRuntime: openCodeHealthy,
+                    navigatorOffline: true,
+                },
+            },
+            {
+                label: 'runtime unreachable',
+                input: {
+                    runtimeTransport: transportDisconnected,
+                    openCodeRuntime: openCodeHealthy,
+                    navigatorOffline: false,
+                },
+            },
+            {
+                label: 'opencode unhealthy',
+                input: {
+                    runtimeTransport: transportConnected,
+                    openCodeRuntime: openCodeUnhealthy,
+                    navigatorOffline: false,
+                },
+            },
+            {
+                label: 'unknown',
+                input: {
+                    runtimeTransport: transportConnected,
+                    openCodeRuntime: openCodeUnknown,
+                    navigatorOffline: false,
+                },
+            },
+            {
+                label: 'connecting',
+                input: {
+                    runtimeTransport: transportConnecting,
+                    openCodeRuntime: openCodeUnknown,
+                    navigatorOffline: false,
+                },
+            },
+        ];
+
+        for (const c of cases) {
+            const vm: ConnectionStatusViewModel = buildConnectionStatusViewModel(c.input);
+            expect(vm.tooltipLines).toHaveLength(3);
+            // Line 0 is always the title (no params).
+            expect(vm.tooltipLines[0]).toEqual({ key: TOOLTIP_TITLE });
+            expect(vm.tooltipLines[0].params).toBe(undefined);
+            // Lines 1 and 2 are the hop lines.
+            expect(vm.tooltipLines[1].key).toBe(vm.hop1.labelKey);
+            expect(vm.tooltipLines[2].key).toBe(vm.hop2.labelKey);
+        }
+    });
+
+    test('tooltipLines hop1 line carries reasonKey param only when reasonKey is non-null', () => {
+        // hop1 with no reason → no params block.
+        const healthyVm = buildConnectionStatusViewModel({
+            runtimeTransport: transportConnected,
+            openCodeRuntime: openCodeHealthy,
+            navigatorOffline: false,
+        });
+        expect(healthyVm.tooltipLines[1].params).toBe(undefined);
+
+        // hop1 with a classified reason → params.reasonKey carries the i18n
+        // key, which the consumer translates separately.
+        const reconnectingVm = buildConnectionStatusViewModel({
+            runtimeTransport: { phase: 'reconnecting', reason: 'auth_required', updatedAt: 0 },
+            openCodeRuntime: openCodeHealthy,
+            navigatorOffline: false,
+        });
+        expect(reconnectingVm.tooltipLines[1].key).toBe(HOP1_RECONNECTING);
+        expect(reconnectingVm.tooltipLines[1].params).toEqual({ reasonKey: REASON_AUTH });
+    });
+
+    test('hop1 reasonKey for transport `connecting` is always null (no raw reason)', () => {
+        // The connecting branch ignores the raw reason — there is no classified
+        // reason for a brand-new connection attempt.
+        const vm = buildConnectionStatusViewModel({
+            runtimeTransport: transportConnecting,
+            openCodeRuntime: openCodeUnknown,
+            navigatorOffline: false,
+        });
+        expect(vm.overall).toBe('unknown');
+        expect(vm.hop1.labelKey).toBe(HOP1_CONNECTING);
+        expect(vm.hop1.reasonKey).toBeNull();
+        expect(vm.hop1.rawReason).toBeNull();
+    });
+});
+
+describe('classifyReason', () => {
+    test('maps `offline` to the offline reason', () => {
+        expect(classifyReason('offline')).toBe(REASON_OFFLINE);
+    });
+
+    test('maps `navigator_offline` to the offline reason', () => {
+        expect(classifyReason('navigator_offline')).toBe(REASON_OFFLINE);
+    });
+
+    test('maps `auth_required` to the authRequired reason', () => {
+        expect(classifyReason('auth_required')).toBe(REASON_AUTH);
+    });
+
+    test('returns null for `ws_closed:code=1006` (does not match any rule)', () => {
+        // Documenting the negative case: this raw code is preserved on
+        // `HopState.rawReason` for diagnostics, but does not produce a
+        // classified reason key — the consumer will render a generic reason.
+        expect(classifyReason('ws_closed:code=1006')).toBeNull();
+    });
+
+    test('maps `init_error` to the unavailable reason', () => {
+        expect(classifyReason('init_error')).toBe(REASON_UNAVAILABLE);
+    });
+
+    test('maps `health_check_unhealthy` to the unavailable reason', () => {
+        expect(classifyReason('health_check_unhealthy')).toBe(REASON_UNAVAILABLE);
+    });
+
+    test('maps `sse_heartbeat_timeout` to the timeout reason', () => {
+        expect(classifyReason('sse_heartbeat_timeout')).toBe(REASON_TIMEOUT);
+    });
+
+    test('returns null for an unrecognized reason string', () => {
+        expect(classifyReason('something_totally_unrecognized')).toBeNull();
+    });
+
+    test('returns null for null input', () => {
+        expect(classifyReason(null)).toBeNull();
+    });
+
+    test('maps 401 / 403 / unauthorized / forbidden to the authRequired reason', () => {
+        expect(classifyReason('401')).toBe(REASON_AUTH);
+        expect(classifyReason('403')).toBe(REASON_AUTH);
+        expect(classifyReason('unauthorized')).toBe(REASON_AUTH);
+        expect(classifyReason('forbidden')).toBe(REASON_AUTH);
+    });
+
+    test('precedence: a string containing both `auth` and `error` resolves to authRequired', () => {
+        // `auth_error` contains both substrings, but the auth branch is
+        // checked first, so it resolves to `authRequired`. Pinning the
+        // precedence here so a future refactor does not silently flip the
+        // resolution.
+        expect(classifyReason('auth_error')).toBe(REASON_AUTH);
+    });
+});
diff --git a/packages/ui/src/lib/connection-status/connectionStatus.ts b/packages/ui/src/lib/connection-status/connectionStatus.ts
new file mode 100644
index 0000000000..a1c2a6e045
--- /dev/null
+++ b/packages/ui/src/lib/connection-status/connectionStatus.ts
@@ -0,0 +1,305 @@
+import type {
+    OpenCodeRuntimeState,
+    RuntimeTransportState,
+} from '@/stores/useConfigStore';
+
+/**
+ * User-facing tone of the connection dot. Per the binding user decisions:
+ * - `reconnecting` / `unknown` use `'muted'` (theme-muted neutral), NOT amber.
+ * - `connected` uses `'ok'`.
+ * - `disconnected` / `offline` use `'error'`.
+ * - `degraded` uses `'warn'` (runtime-only degraded case where OpenCode is
+ *   unhealthy but the frontend transport is still up).
+ */
+export type ConnectionTone = 'ok' | 'warn' | 'error' | 'muted';
+
+/** Overall connection verdict shown as the dot's color and the overall hover line. */
+export type ConnectionOverall =
+    | 'connected'
+    | 'reconnecting'
+    | 'degraded'
+    | 'disconnected'
+    | 'unknown';
+
+/** One hop's presentation state. */
+export type HopState = {
+    /** Short stable i18n key that resolves to a user-facing label. */
+    labelKey: string;
+    /**
+     * Optional short stable i18n key for a reason ("offline", "auth required").
+     * `null` when the hop is healthy or the raw reason is unrecognized.
+     */
+    reasonKey: string | null;
+    /**
+     * Raw internal code preserved for diagnostics only — never rendered in the
+     * normal UI. Callers must not include this in hover content.
+     */
+    rawReason: string | null;
+};
+
+/**
+ * Aggregated view model. The hover always shows BOTH hop lines per the
+ * binding user decision (no collapsing to a single reason line).
+ */
+export type ConnectionStatusViewModel = {
+    overall: ConnectionOverall;
+    tone: ConnectionTone;
+    /** Short stable i18n key for the overall verdict label. */
+    overallLabelKey: string;
+    /** Frontend ↔ OpenChamber runtime hop. */
+    hop1: HopState;
+    /** OpenChamber runtime ↔ OpenCode hop. */
+    hop2: HopState;
+    /**
+     * Pre-rendered hover lines. The consumer translates each `key` with the
+     * i18n store. When a `params` block is present, the consumer MUST resolve
+     * the `reasonKey` param by calling `t(reasonKey)` separately to compose
+     * the localized reason text. This intentionally uses complete-message keys
+     * for the optional reason clause (per the i18n mapping note in the plan:
+     * optional clauses must not use the reason as a grammar fragment).
+     */
+    tooltipLines: Array<{ key: string; params?: Record<string, string | number> }>;
+};
+
+/** Stable i18n keys used by the view model. Kept as constants for testability. */
+const KEY_HOP1_CONNECTED = 'connectionStatus.hop1.connected';
+const KEY_HOP1_CONNECTING = 'connectionStatus.hop1.connecting';
+const KEY_HOP1_RECONNECTING = 'connectionStatus.hop1.reconnecting';
+const KEY_HOP1_DISCONNECTED = 'connectionStatus.hop1.disconnected';
+
+const KEY_HOP2_HEALTHY = 'connectionStatus.hop2.healthy';
+const KEY_HOP2_UNHEALTHY = 'connectionStatus.hop2.unhealthy';
+const KEY_HOP2_UNKNOWN = 'connectionStatus.hop2.unknown';
+
+const KEY_REASON_OFFLINE = 'connectionStatus.reason.offline';
+const KEY_REASON_AUTH_REQUIRED = 'connectionStatus.reason.authRequired';
+const KEY_REASON_UNAVAILABLE = 'connectionStatus.reason.unavailable';
+const KEY_REASON_TIMEOUT = 'connectionStatus.reason.timeout';
+
+const KEY_OVERALL_CONNECTED = 'connectionStatus.overall.connected';
+const KEY_OVERALL_RECONNECTING = 'connectionStatus.overall.reconnecting';
+const KEY_OVERALL_DEGRADED = 'connectionStatus.overall.degraded';
+const KEY_OVERALL_DISCONNECTED = 'connectionStatus.overall.disconnected';
+const KEY_OVERALL_UNKNOWN = 'connectionStatus.overall.unknown';
+
+const KEY_TOOLTIP_TITLE = 'connectionStatus.tooltip.title';
+
+/**
+ * Map a raw internal disconnect/health reason code to one of a small set of
+ * user-facing i18n keys. Returns `null` for unrecognized codes — the consumer
+ * will then show a generic reason.
+ *
+ * This is a small, deliberately under-categorized helper. The order of the
+ * checks is the precedence: offline beats auth, auth beats unavailable,
+ * unavailable beats timeout/heartbeat. The check order matters when a raw
+ * reason could match more than one category (e.g. `auth_timeout` resolves to
+ * `authRequired` because the auth branch is checked first).
+ *
+ * Implementation note: explicit substring tests (`.includes`) and exact
+ * equality — no regex, no over-categorization. Per the binding user decision,
+ * raw internal codes must NEVER appear in i18n keys.
+ */
+export const classifyReason = (raw: string | null): string | null => {
+    if (raw === null) {
+        return null;
+    }
+
+    if (raw.includes('offline')) {
+        return KEY_REASON_OFFLINE;
+    } else if (
+        raw.includes('auth')
+        || raw === '401'
+        || raw === '403'
+        || raw === 'unauthorized'
+        || raw === 'forbidden'
+    ) {
+        return KEY_REASON_AUTH_REQUIRED;
+    } else if (
+        raw.includes('init_error')
+        || raw.includes('unhealthy')
+        || raw.includes('unavailable')
+        || raw.includes('failed')
+        || raw.includes('error')
+    ) {
+        return KEY_REASON_UNAVAILABLE;
+    } else if (raw.includes('timeout') || raw.includes('heartbeat')) {
+        return KEY_REASON_TIMEOUT;
+    } else {
+        return null;
+    }
+};
+
+/** Project the runtime ↔ OpenCode hop state into a presentation `HopState`. */
+const projectOpenCodeHop = (openCode: OpenCodeRuntimeState): HopState => {
+    switch (openCode.phase) {
+        case 'healthy':
+            return {
+                labelKey: KEY_HOP2_HEALTHY,
+                reasonKey: null,
+                rawReason: null,
+            };
+        case 'unhealthy':
+            return {
+                labelKey: KEY_HOP2_UNHEALTHY,
+                reasonKey: classifyReason(openCode.reason),
+                rawReason: openCode.reason,
+            };
+        case 'unknown':
+            return {
+                labelKey: KEY_HOP2_UNKNOWN,
+                reasonKey: null,
+                rawReason: null,
+            };
+        default: {
+            // Defensive: unknown runtime phase → fall back to the unknown key.
+            // Runtime transport phase union is closed, but TypeScript can't
+            // prove exhaustiveness through the switch without `never`.
+            const _exhaustive: never = openCode.phase;
+            void _exhaustive;
+            return {
+                labelKey: KEY_HOP2_UNKNOWN,
+                reasonKey: null,
+                rawReason: null,
+            };
+        }
+    }
+};
+
+/** Build a `tooltipLines` entry for one hop. The `reasonKey` param is the
+ *  i18n key for the reason; the consumer resolves it by calling
+ *  `t(reasonKey)` separately (per the i18n mapping note in the plan). */
+const buildHopTooltipLine = (hop: HopState): { key: string; params?: Record<string, string | number> } => {
+    if (hop.reasonKey === null) {
+        return { key: hop.labelKey };
+    }
+    return {
+        key: hop.labelKey,
+        params: { reasonKey: hop.reasonKey },
+    };
+};
+
+/**
+ * Build the aggregated connection-status view model.
+ *
+ * This is a pure, deterministic helper: it does not read globals, does not
+ * touch `Date.now()`, and has no side effects. The caller (component/hook)
+ * is responsible for observing the browser's `navigator.onLine` state and
+ * passing it as `navigatorOffline`.
+ *
+ * Aggregation precedence (apply top-down; the first matching branch wins):
+ *  1. browser offline (`navigatorOffline`) OR transport `offline` → disconnected / error
+ *  2. transport `disconnected` → disconnected / error
+ *  3. transport `reconnecting` → reconnecting / muted
+ *  4. transport `connecting` → unknown / muted
+ *  5. transport `connected` + opencode `unhealthy` → degraded / warn
+ *  6. transport `connected` + opencode `healthy` → connected / ok
+ *  7. transport `connected` + opencode `unknown` (or any unhandled combo) → unknown / muted
+ */
+export function buildConnectionStatusViewModel(input: {
+    runtimeTransport: RuntimeTransportState;
+    openCodeRuntime: OpenCodeRuntimeState;
+    /** True iff `navigator.onLine === false`. */
+    navigatorOffline: boolean;
+}): ConnectionStatusViewModel {
+    const { runtimeTransport, openCodeRuntime, navigatorOffline } = input;
+
+    // --- Step 1: pick overall + tone + hop1 labelKey based on transport phase
+    let overall: ConnectionOverall;
+    let tone: ConnectionTone;
+    let overallLabelKey: string;
+    let hop1: HopState;
+
+    if (navigatorOffline || runtimeTransport.phase === 'offline') {
+        overall = 'disconnected';
+        tone = 'error';
+        overallLabelKey = KEY_OVERALL_DISCONNECTED;
+        hop1 = {
+            labelKey: KEY_HOP1_DISCONNECTED,
+            reasonKey: KEY_REASON_OFFLINE,
+            rawReason: 'offline',
+        };
+    } else if (runtimeTransport.phase === 'disconnected') {
+        overall = 'disconnected';
+        tone = 'error';
+        overallLabelKey = KEY_OVERALL_DISCONNECTED;
+        hop1 = {
+            labelKey: KEY_HOP1_DISCONNECTED,
+            reasonKey: classifyReason(runtimeTransport.reason),
+            rawReason: runtimeTransport.reason,
+        };
+    } else if (runtimeTransport.phase === 'reconnecting') {
+        overall = 'reconnecting';
+        tone = 'muted';
+        overallLabelKey = KEY_OVERALL_RECONNECTING;
+        hop1 = {
+            labelKey: KEY_HOP1_RECONNECTING,
+            reasonKey: classifyReason(runtimeTransport.reason),
+            rawReason: runtimeTransport.reason,
+        };
+    } else if (runtimeTransport.phase === 'connecting') {
+        overall = 'unknown';
+        tone = 'muted';
+        overallLabelKey = KEY_OVERALL_UNKNOWN;
+        hop1 = {
+            labelKey: KEY_HOP1_CONNECTING,
+            reasonKey: null,
+            rawReason: null,
+        };
+    } else if (
+        runtimeTransport.phase === 'connected'
+        && openCodeRuntime.phase === 'unhealthy'
+    ) {
+        overall = 'degraded';
+        tone = 'warn';
+        overallLabelKey = KEY_OVERALL_DEGRADED;
+        hop1 = {
+            labelKey: KEY_HOP1_CONNECTED,
+            reasonKey: null,
+            rawReason: null,
+        };
+    } else if (
+        runtimeTransport.phase === 'connected'
+        && openCodeRuntime.phase === 'healthy'
+    ) {
+        overall = 'connected';
+        tone = 'ok';
+        overallLabelKey = KEY_OVERALL_CONNECTED;
+        hop1 = {
+            labelKey: KEY_HOP1_CONNECTED,
+            reasonKey: null,
+            rawReason: null,
+        };
+    } else {
+        // `connected` + `unknown` (or any unhandled combo — kept narrow on
+        // purpose; new phases should be added explicitly above).
+        overall = 'unknown';
+        tone = 'muted';
+        overallLabelKey = KEY_OVERALL_UNKNOWN;
+        hop1 = {
+            labelKey: KEY_HOP1_CONNECTED,
+            reasonKey: null,
+            rawReason: null,
+        };
+    }
+
+    // --- Step 2: pick hop2 based on opencode phase
+    const hop2 = projectOpenCodeHop(openCodeRuntime);
+
+    // --- Step 3: assemble the tooltip lines. Per the binding user decision,
+    // we always emit a header line + two hop lines; the `reason` is sometimes
+    // short (passed via `params.reasonKey` for the i18n resolver to compose).
+    const tooltipLines: ConnectionStatusViewModel['tooltipLines'] = [
+        { key: KEY_TOOLTIP_TITLE },
+        buildHopTooltipLine(hop1),
+        buildHopTooltipLine(hop2),
+    ];
+
+    return {
+        overall,
+        tone,
+        overallLabelKey,
+        hop1,
+        hop2,
+        tooltipLines,
+    };
+}
diff --git a/packages/ui/src/lib/i18n/messages/en.ts b/packages/ui/src/lib/i18n/messages/en.ts
index dba49cb5a5..b34a6660d4 100644
--- a/packages/ui/src/lib/i18n/messages/en.ts
+++ b/packages/ui/src/lib/i18n/messages/en.ts
@@ -2626,6 +2626,25 @@ export const dict = {
   'quota.window.chat': 'Chat Requests',
   'quota.window.completions': 'Completions',
   'quota.window.premiumInteractions': 'Premium interactions',
+  'connectionStatus.hop1.connected': 'Frontend ↔ OpenChamber: connected',
+  'connectionStatus.hop1.connecting': 'Frontend ↔ OpenChamber: connecting…',
+  'connectionStatus.hop1.reconnecting': 'Frontend ↔ OpenChamber: reconnecting',
+  'connectionStatus.hop1.disconnected': 'Frontend ↔ OpenChamber: disconnected',
+  'connectionStatus.hop2.healthy': 'OpenChamber ↔ OpenCode: ready',
+  'connectionStatus.hop2.unhealthy': 'OpenChamber ↔ OpenCode: unavailable',
+  'connectionStatus.hop2.unknown': 'OpenChamber ↔ OpenCode: checking…',
+  'connectionStatus.reason.offline': 'Offline',
+  'connectionStatus.reason.authRequired': 'Auth/config issue',
+  'connectionStatus.reason.unavailable': 'OpenCode unavailable',
+  'connectionStatus.reason.timeout': 'Connection timed out',
+  'connectionStatus.overall.connected': 'Connected',
+  'connectionStatus.overall.reconnecting': 'Reconnecting',
+  'connectionStatus.overall.degraded': 'Degraded',
+  'connectionStatus.overall.disconnected': 'Disconnected',
+  'connectionStatus.overall.unknown': 'Unknown',
+  'connectionStatus.tooltip.title': 'Connection status',
+  'connectionStatus.tooltip.hopLabel': '{label}',
+  'connectionStatus.aria.indicator': 'Connection status: {state}',
 } as const;
 
 export type I18nKey = keyof typeof dict;
diff --git a/packages/ui/src/lib/i18n/messages/es.ts b/packages/ui/src/lib/i18n/messages/es.ts
index a92e4127fc..2eac0206d3 100644
--- a/packages/ui/src/lib/i18n/messages/es.ts
+++ b/packages/ui/src/lib/i18n/messages/es.ts
@@ -2627,4 +2627,23 @@ export const dict: Record<I18nKey, string> = {
   "quota.window.chat": "Chat Requests",
   "quota.window.completions": "Completions",
   "quota.window.premiumInteractions": "Premium interactions",
+  "connectionStatus.hop1.connected": "Frontend ↔ OpenChamber: connected",
+  "connectionStatus.hop1.connecting": "Frontend ↔ OpenChamber: connecting…",
+  "connectionStatus.hop1.reconnecting": "Frontend ↔ OpenChamber: reconnecting",
+  "connectionStatus.hop1.disconnected": "Frontend ↔ OpenChamber: disconnected",
+  "connectionStatus.hop2.healthy": "OpenChamber ↔ OpenCode: ready",
+  "connectionStatus.hop2.unhealthy": "OpenChamber ↔ OpenCode: unavailable",
+  "connectionStatus.hop2.unknown": "OpenChamber ↔ OpenCode: checking…",
+  "connectionStatus.reason.offline": "Offline",
+  "connectionStatus.reason.authRequired": "Auth/config issue",
+  "connectionStatus.reason.unavailable": "OpenCode unavailable",
+  "connectionStatus.reason.timeout": "Connection timed out",
+  "connectionStatus.overall.connected": "Connected",
+  "connectionStatus.overall.reconnecting": "Reconnecting",
+  "connectionStatus.overall.degraded": "Degraded",
+  "connectionStatus.overall.disconnected": "Disconnected",
+  "connectionStatus.overall.unknown": "Unknown",
+  "connectionStatus.tooltip.title": "Connection status",
+  "connectionStatus.tooltip.hopLabel": "{label}",
+  "connectionStatus.aria.indicator": "Connection status: {state}",
 };
diff --git a/packages/ui/src/lib/i18n/messages/fr.ts b/packages/ui/src/lib/i18n/messages/fr.ts
index 9d66af07cf..5d631c25f5 100644
--- a/packages/ui/src/lib/i18n/messages/fr.ts
+++ b/packages/ui/src/lib/i18n/messages/fr.ts
@@ -103,6 +103,7 @@ export const dict = {
   'sessions.scheduledTasks.editor.scheduleType.daily': 'Tous les jours',
   'sessions.scheduledTasks.editor.scheduleType.weekly': 'Hebdomadaire',
   'sessions.scheduledTasks.editor.scheduleType.once': 'Une fois',
+  'sessions.scheduledTasks.editor.scheduleType.cron': 'Cron',
   'sessions.scheduledTasks.editor.date.label': 'Date',
   'sessions.scheduledTasks.editor.date.placeholder': 'Sélectionnez une date',
   'sessions.scheduledTasks.editor.date.previousMonth': 'Mois précédent',
@@ -2623,6 +2624,25 @@ export const dict = {
   'vscodeLayout.actions.archiveAllSuccess': '{count} session(s) archivée(s)',
   'vscodeLayout.actions.archiveAllError': 'Impossible d’archiver {count} session(s)',
   'vscodeLayout.actions.cancel': 'Annuler',
+  'connectionStatus.hop1.connected': 'Frontend ↔ OpenChamber: connected',
+  'connectionStatus.hop1.connecting': 'Frontend ↔ OpenChamber: connecting…',
+  'connectionStatus.hop1.reconnecting': 'Frontend ↔ OpenChamber: reconnecting',
+  'connectionStatus.hop1.disconnected': 'Frontend ↔ OpenChamber: disconnected',
+  'connectionStatus.hop2.healthy': 'OpenChamber ↔ OpenCode: ready',
+  'connectionStatus.hop2.unhealthy': 'OpenChamber ↔ OpenCode: unavailable',
+  'connectionStatus.hop2.unknown': 'OpenChamber ↔ OpenCode: checking…',
+  'connectionStatus.reason.offline': 'Offline',
+  'connectionStatus.reason.authRequired': 'Auth/config issue',
+  'connectionStatus.reason.unavailable': 'OpenCode unavailable',
+  'connectionStatus.reason.timeout': 'Connection timed out',
+  'connectionStatus.overall.connected': 'Connected',
+  'connectionStatus.overall.reconnecting': 'Reconnecting',
+  'connectionStatus.overall.degraded': 'Degraded',
+  'connectionStatus.overall.disconnected': 'Disconnected',
+  'connectionStatus.overall.unknown': 'Unknown',
+  'connectionStatus.tooltip.title': 'Connection status',
+  'connectionStatus.tooltip.hopLabel': '{label}',
+  'connectionStatus.aria.indicator': 'Connection status: {state}',
 } as const;
 
 export type I18nKey = keyof typeof dict;
diff --git a/packages/ui/src/lib/i18n/messages/ko.ts b/packages/ui/src/lib/i18n/messages/ko.ts
index 06532993ee..f98dae5772 100644
--- a/packages/ui/src/lib/i18n/messages/ko.ts
+++ b/packages/ui/src/lib/i18n/messages/ko.ts
@@ -2626,4 +2626,23 @@ export const dict: Record<I18nKey, string> = {
   'quota.window.chat': 'Chat Requests',
   'quota.window.completions': 'Completions',
   'quota.window.premiumInteractions': 'Premium interactions',
+  'connectionStatus.hop1.connected': 'Frontend ↔ OpenChamber: connected',
+  'connectionStatus.hop1.connecting': 'Frontend ↔ OpenChamber: connecting…',
+  'connectionStatus.hop1.reconnecting': 'Frontend ↔ OpenChamber: reconnecting',
+  'connectionStatus.hop1.disconnected': 'Frontend ↔ OpenChamber: disconnected',
+  'connectionStatus.hop2.healthy': 'OpenChamber ↔ OpenCode: ready',
+  'connectionStatus.hop2.unhealthy': 'OpenChamber ↔ OpenCode: unavailable',
+  'connectionStatus.hop2.unknown': 'OpenChamber ↔ OpenCode: checking…',
+  'connectionStatus.reason.offline': 'Offline',
+  'connectionStatus.reason.authRequired': 'Auth/config issue',
+  'connectionStatus.reason.unavailable': 'OpenCode unavailable',
+  'connectionStatus.reason.timeout': 'Connection timed out',
+  'connectionStatus.overall.connected': 'Connected',
+  'connectionStatus.overall.reconnecting': 'Reconnecting',
+  'connectionStatus.overall.degraded': 'Degraded',
+  'connectionStatus.overall.disconnected': 'Disconnected',
+  'connectionStatus.overall.unknown': 'Unknown',
+  'connectionStatus.tooltip.title': 'Connection status',
+  'connectionStatus.tooltip.hopLabel': '{label}',
+  'connectionStatus.aria.indicator': 'Connection status: {state}',
 };
diff --git a/packages/ui/src/lib/i18n/messages/pl.ts b/packages/ui/src/lib/i18n/messages/pl.ts
index 664f62ed3a..1e32b9a893 100644
--- a/packages/ui/src/lib/i18n/messages/pl.ts
+++ b/packages/ui/src/lib/i18n/messages/pl.ts
@@ -2643,4 +2643,23 @@ export const dict: Record<I18nKey, string> = {
   'quota.window.chat': 'Chat Requests',
   'quota.window.completions': 'Completions',
   'quota.window.premiumInteractions': 'Premium interactions',
+  'connectionStatus.hop1.connected': 'Frontend ↔ OpenChamber: connected',
+  'connectionStatus.hop1.connecting': 'Frontend ↔ OpenChamber: connecting…',
+  'connectionStatus.hop1.reconnecting': 'Frontend ↔ OpenChamber: reconnecting',
+  'connectionStatus.hop1.disconnected': 'Frontend ↔ OpenChamber: disconnected',
+  'connectionStatus.hop2.healthy': 'OpenChamber ↔ OpenCode: ready',
+  'connectionStatus.hop2.unhealthy': 'OpenChamber ↔ OpenCode: unavailable',
+  'connectionStatus.hop2.unknown': 'OpenChamber ↔ OpenCode: checking…',
+  'connectionStatus.reason.offline': 'Offline',
+  'connectionStatus.reason.authRequired': 'Auth/config issue',
+  'connectionStatus.reason.unavailable': 'OpenCode unavailable',
+  'connectionStatus.reason.timeout': 'Connection timed out',
+  'connectionStatus.overall.connected': 'Connected',
+  'connectionStatus.overall.reconnecting': 'Reconnecting',
+  'connectionStatus.overall.degraded': 'Degraded',
+  'connectionStatus.overall.disconnected': 'Disconnected',
+  'connectionStatus.overall.unknown': 'Unknown',
+  'connectionStatus.tooltip.title': 'Connection status',
+  'connectionStatus.tooltip.hopLabel': '{label}',
+  'connectionStatus.aria.indicator': 'Connection status: {state}',
 } as const;
diff --git a/packages/ui/src/lib/i18n/messages/pt-BR.ts b/packages/ui/src/lib/i18n/messages/pt-BR.ts
index 8f345e8539..e57838a3db 100644
--- a/packages/ui/src/lib/i18n/messages/pt-BR.ts
+++ b/packages/ui/src/lib/i18n/messages/pt-BR.ts
@@ -2627,4 +2627,23 @@ export const dict: Record<I18nKey, string> = {
   "quota.window.chat": "Chat Requests",
   "quota.window.completions": "Completions",
   "quota.window.premiumInteractions": "Premium interactions",
+  "connectionStatus.hop1.connected": "Frontend ↔ OpenChamber: connected",
+  "connectionStatus.hop1.connecting": "Frontend ↔ OpenChamber: connecting…",
+  "connectionStatus.hop1.reconnecting": "Frontend ↔ OpenChamber: reconnecting",
+  "connectionStatus.hop1.disconnected": "Frontend ↔ OpenChamber: disconnected",
+  "connectionStatus.hop2.healthy": "OpenChamber ↔ OpenCode: ready",
+  "connectionStatus.hop2.unhealthy": "OpenChamber ↔ OpenCode: unavailable",
+  "connectionStatus.hop2.unknown": "OpenChamber ↔ OpenCode: checking…",
+  "connectionStatus.reason.offline": "Offline",
+  "connectionStatus.reason.authRequired": "Auth/config issue",
+  "connectionStatus.reason.unavailable": "OpenCode unavailable",
+  "connectionStatus.reason.timeout": "Connection timed out",
+  "connectionStatus.overall.connected": "Connected",
+  "connectionStatus.overall.reconnecting": "Reconnecting",
+  "connectionStatus.overall.degraded": "Degraded",
+  "connectionStatus.overall.disconnected": "Disconnected",
+  "connectionStatus.overall.unknown": "Unknown",
+  "connectionStatus.tooltip.title": "Connection status",
+  "connectionStatus.tooltip.hopLabel": "{label}",
+  "connectionStatus.aria.indicator": "Connection status: {state}",
 };
diff --git a/packages/ui/src/lib/i18n/messages/uk.ts b/packages/ui/src/lib/i18n/messages/uk.ts
index 42c093391a..34f2e2880e 100644
--- a/packages/ui/src/lib/i18n/messages/uk.ts
+++ b/packages/ui/src/lib/i18n/messages/uk.ts
@@ -2627,4 +2627,23 @@ export const dict: Record<I18nKey, string> = {
   "quota.window.chat": "Chat Requests",
   "quota.window.completions": "Completions",
   "quota.window.premiumInteractions": "Premium interactions",
+  "connectionStatus.hop1.connected": "Frontend ↔ OpenChamber: connected",
+  "connectionStatus.hop1.connecting": "Frontend ↔ OpenChamber: connecting…",
+  "connectionStatus.hop1.reconnecting": "Frontend ↔ OpenChamber: reconnecting",
+  "connectionStatus.hop1.disconnected": "Frontend ↔ OpenChamber: disconnected",
+  "connectionStatus.hop2.healthy": "OpenChamber ↔ OpenCode: ready",
+  "connectionStatus.hop2.unhealthy": "OpenChamber ↔ OpenCode: unavailable",
+  "connectionStatus.hop2.unknown": "OpenChamber ↔ OpenCode: checking…",
+  "connectionStatus.reason.offline": "Offline",
+  "connectionStatus.reason.authRequired": "Auth/config issue",
+  "connectionStatus.reason.unavailable": "OpenCode unavailable",
+  "connectionStatus.reason.timeout": "Connection timed out",
+  "connectionStatus.overall.connected": "Connected",
+  "connectionStatus.overall.reconnecting": "Reconnecting",
+  "connectionStatus.overall.degraded": "Degraded",
+  "connectionStatus.overall.disconnected": "Disconnected",
+  "connectionStatus.overall.unknown": "Unknown",
+  "connectionStatus.tooltip.title": "Connection status",
+  "connectionStatus.tooltip.hopLabel": "{label}",
+  "connectionStatus.aria.indicator": "Connection status: {state}",
 };
diff --git a/packages/ui/src/lib/i18n/messages/zh-CN.ts b/packages/ui/src/lib/i18n/messages/zh-CN.ts
index 1ffd934d2d..09424f1b93 100644
--- a/packages/ui/src/lib/i18n/messages/zh-CN.ts
+++ b/packages/ui/src/lib/i18n/messages/zh-CN.ts
@@ -2627,4 +2627,23 @@ export const dict: Record<I18nKey, string> = {
   'quota.window.chat': 'Chat Requests',
   'quota.window.completions': 'Completions',
   'quota.window.premiumInteractions': 'Premium interactions',
+  'connectionStatus.hop1.connected': 'Frontend ↔ OpenChamber: connected',
+  'connectionStatus.hop1.connecting': 'Frontend ↔ OpenChamber: connecting…',
+  'connectionStatus.hop1.reconnecting': 'Frontend ↔ OpenChamber: reconnecting',
+  'connectionStatus.hop1.disconnected': 'Frontend ↔ OpenChamber: disconnected',
+  'connectionStatus.hop2.healthy': 'OpenChamber ↔ OpenCode: ready',
+  'connectionStatus.hop2.unhealthy': 'OpenChamber ↔ OpenCode: unavailable',
+  'connectionStatus.hop2.unknown': 'OpenChamber ↔ OpenCode: checking…',
+  'connectionStatus.reason.offline': 'Offline',
+  'connectionStatus.reason.authRequired': 'Auth/config issue',
+  'connectionStatus.reason.unavailable': 'OpenCode unavailable',
+  'connectionStatus.reason.timeout': 'Connection timed out',
+  'connectionStatus.overall.connected': 'Connected',
+  'connectionStatus.overall.reconnecting': 'Reconnecting',
+  'connectionStatus.overall.degraded': 'Degraded',
+  'connectionStatus.overall.disconnected': 'Disconnected',
+  'connectionStatus.overall.unknown': 'Unknown',
+  'connectionStatus.tooltip.title': 'Connection status',
+  'connectionStatus.tooltip.hopLabel': '{label}',
+  'connectionStatus.aria.indicator': 'Connection status: {state}',
 };
diff --git a/packages/ui/src/lib/i18n/messages/zh-TW.ts b/packages/ui/src/lib/i18n/messages/zh-TW.ts
index 08d3025475..71992dd3ef 100644
--- a/packages/ui/src/lib/i18n/messages/zh-TW.ts
+++ b/packages/ui/src/lib/i18n/messages/zh-TW.ts
@@ -2626,4 +2626,23 @@ export const dict: Record<I18nKey, string> = {
   'quota.window.chat': 'Chat Requests',
   'quota.window.completions': 'Completions',
   'quota.window.premiumInteractions': 'Premium interactions',
+  'connectionStatus.hop1.connected': 'Frontend ↔ OpenChamber: connected',
+  'connectionStatus.hop1.connecting': 'Frontend ↔ OpenChamber: connecting…',
+  'connectionStatus.hop1.reconnecting': 'Frontend ↔ OpenChamber: reconnecting',
+  'connectionStatus.hop1.disconnected': 'Frontend ↔ OpenChamber: disconnected',
+  'connectionStatus.hop2.healthy': 'OpenChamber ↔ OpenCode: ready',
+  'connectionStatus.hop2.unhealthy': 'OpenChamber ↔ OpenCode: unavailable',
+  'connectionStatus.hop2.unknown': 'OpenChamber ↔ OpenCode: checking…',
+  'connectionStatus.reason.offline': 'Offline',
+  'connectionStatus.reason.authRequired': 'Auth/config issue',
+  'connectionStatus.reason.unavailable': 'OpenCode unavailable',
+  'connectionStatus.reason.timeout': 'Connection timed out',
+  'connectionStatus.overall.connected': 'Connected',
+  'connectionStatus.overall.reconnecting': 'Reconnecting',
+  'connectionStatus.overall.degraded': 'Degraded',
+  'connectionStatus.overall.disconnected': 'Disconnected',
+  'connectionStatus.overall.unknown': 'Unknown',
+  'connectionStatus.tooltip.title': 'Connection status',
+  'connectionStatus.tooltip.hopLabel': '{label}',
+  'connectionStatus.aria.indicator': 'Connection status: {state}',
 };
diff --git a/packages/ui/src/stores/useConfigStore.ts b/packages/ui/src/stores/useConfigStore.ts
index 0eae144fdd..6910e19ed2 100644
--- a/packages/ui/src/stores/useConfigStore.ts
+++ b/packages/ui/src/stores/useConfigStore.ts
@@ -941,6 +941,25 @@ const resolveSelectionWithManualGuard = ({
     };
 };
 
+// Hop-separated normalized state for the aggregated header connection
+// indicator (issue #1737 / #1556). These objects are the source of truth for
+// the per-hop view; reason strings are short stable codes that the user-facing
+// reason mapper (Phase 2) translates into hover copy. They are intentionally
+// not part of the persisted state shape — live connection status must always
+// start fresh on reload.
+export type RuntimeTransportPhase = "connecting" | "connected" | "reconnecting" | "disconnected" | "offline";
+export type RuntimeTransportState = {
+    phase: RuntimeTransportPhase;
+    reason: string | null;
+    updatedAt: number;
+};
+export type OpenCodeRuntimePhase = "unknown" | "healthy" | "unhealthy";
+export type OpenCodeRuntimeState = {
+    phase: OpenCodeRuntimePhase;
+    reason: string | null;
+    updatedAt: number;
+};
+
 interface ConfigStore {
 
     activeDirectoryKey: string;
@@ -960,6 +979,15 @@ interface ConfigStore {
     hasEverConnected: boolean;
     connectionPhase: "connecting" | "connected" | "reconnecting";
     lastDisconnectReason: string | null;
+    // Hop-separated normalized state (issue #1737 / #1556). The legacy fields
+    // above still drive readiness gating; the two new fields drive the
+    // aggregated header indicator and are the source of truth for which hop is
+    // unhealthy. They are intentionally low-frequency, narrow, and never
+    // coupled to streaming/session state to avoid render fanout.
+    runtimeTransportState: RuntimeTransportState;
+    openCodeRuntimeState: OpenCodeRuntimeState;
+    setRuntimeTransportState: (state: RuntimeTransportState) => void;
+    setOpenCodeRuntimeState: (state: OpenCodeRuntimeState) => void;
     isInitialized: boolean;
     modelsMetadata: Map<string, ModelMetadata>;
     // OpenChamber settings-based defaults (take precedence over agent preferences)
@@ -1109,6 +1137,14 @@ export const useConfigStore = create<ConfigStore>()(
                 hasEverConnected: false,
                 connectionPhase: "connecting",
                 lastDisconnectReason: null,
+                runtimeTransportState: { phase: "connecting", reason: null, updatedAt: 0 },
+                openCodeRuntimeState: { phase: "unknown", reason: null, updatedAt: 0 },
+                setRuntimeTransportState: (state) => {
+                    set({ runtimeTransportState: state });
+                },
+                setOpenCodeRuntimeState: (state) => {
+                    set({ openCodeRuntimeState: state });
+                },
                 isInitialized: false,
                 modelsMetadata: new Map<string, ModelMetadata>(),
                 settingsDefaultModel: undefined,
@@ -2983,6 +3019,7 @@ export const useConfigStore = create<ConfigStore>()(
                     const isHealthy = await probeOpenCodeHealth(options?.timeoutMs);
                     if (isHealthy) {
                         set({ isConnected: true, hasEverConnected: true, connectionPhase: "connected" });
+                        get().setOpenCodeRuntimeState({ phase: 'healthy', reason: null, updatedAt: Date.now() });
                         return true;
                     }
 
@@ -2996,6 +3033,7 @@ export const useConfigStore = create<ConfigStore>()(
                         connectionPhase: state.hasEverConnected ? "reconnecting" : "connecting",
                         lastDisconnectReason: 'health_probe_unhealthy',
                     });
+                    get().setOpenCodeRuntimeState({ phase: 'unhealthy', reason: 'health_probe_unhealthy', updatedAt: Date.now() });
                     return false;
                 },
 
@@ -3033,6 +3071,9 @@ export const useConfigStore = create<ConfigStore>()(
                                     connectionPhase: hasEverConnected ? "reconnecting" : "connecting",
                                     lastDisconnectReason: 'health_check_unhealthy',
                                 });
+                            get().setOpenCodeRuntimeState(isHealthy
+                                ? { phase: 'healthy', reason: null, updatedAt: Date.now() }
+                                : { phase: 'unhealthy', reason: 'health_check_unhealthy', updatedAt: Date.now() });
                             markStartupTrace('checkConnection:end', { healthy: isHealthy, attempts: attempt + 1 });
                             return isHealthy;
                         } catch (error) {
@@ -3051,6 +3092,7 @@ export const useConfigStore = create<ConfigStore>()(
                         connectionPhase: get().hasEverConnected ? "reconnecting" : "connecting",
                         lastDisconnectReason: 'health_check_failed',
                     });
+                    get().setOpenCodeRuntimeState({ phase: 'unhealthy', reason: 'health_check_failed', updatedAt: Date.now() });
                     markStartupTrace('checkConnection:end', { healthy: false, attempts: maxAttempts });
                     return false;
                 },
@@ -3145,6 +3187,7 @@ export const useConfigStore = create<ConfigStore>()(
                                 connectionPhase: get().hasEverConnected ? "reconnecting" : "connecting",
                                 lastDisconnectReason: 'init_error',
                             });
+                            get().setOpenCodeRuntimeState({ phase: 'unhealthy', reason: 'init_error', updatedAt: Date.now() });
                             markStartupTrace('initializeApp:error', { error: error instanceof Error ? error.message : String(error) });
                         }
                     })().finally(() => {
diff --git a/packages/ui/src/sync/sync-context.tsx b/packages/ui/src/sync/sync-context.tsx
index 97c0d99c2a..80ebc7a6df 100644
--- a/packages/ui/src/sync/sync-context.tsx
+++ b/packages/ui/src/sync/sync-context.tsx
@@ -29,7 +29,7 @@ import { syncDebug } from "./debug"
 import { getReconnectCandidateSessionIds } from "./reconnect-recovery"
 import { opencodeClient } from "@/lib/opencode/client"
 import { usePermissionStore } from "@/stores/permissionStore"
-import { useConfigStore } from "@/stores/useConfigStore"
+import { useConfigStore, type RuntimeTransportPhase } from "@/stores/useConfigStore"
 import { useTodosPersistStore } from "@/stores/useTodosPersistStore"
 import { toast } from "@/components/ui"
 import { appendNotification } from "./notification-store"
@@ -1611,6 +1611,12 @@ export function SyncProvider(props: {
   const resyncingDirectoriesRef = useRef(new Set<string>())
   const statusPollingDirectoriesRef = useRef(new Set<string>())
   const pipelineReconnectRef = useRef<((reason?: string) => void) | null>(null)
+  // Phase observed immediately before the most recent browser `offline`
+  // transition. Captured in the `offline` listener (sibling useEffect below)
+  // and consumed by the `online` listener to restore the previous narrow
+  // state. Reset to `null` whenever the transport is observed to be online
+  // again, so each new offline transition re-records a fresh pre-offline phase.
+  const preOfflinePhaseRef = useRef<RuntimeTransportPhase | null>(null)
 
   const system = useMemo<SyncSystem>(
     () => ({
@@ -1808,6 +1814,11 @@ export function SyncProvider(props: {
           hasEverConnected: true,
           connectionPhase: "connected",
         })
+        useConfigStore.getState().setRuntimeTransportState({
+          phase: "connected",
+          reason: null,
+          updatedAt: Date.now(),
+        })
         if (isRecentBoot()) {
           return
         }
@@ -1822,6 +1833,11 @@ export function SyncProvider(props: {
           connectionPhase: hasEverConnected ? "reconnecting" : "connecting",
           lastDisconnectReason: reason,
         })
+        useConfigStore.getState().setRuntimeTransportState({
+          phase: "disconnected",
+          reason,
+          updatedAt: Date.now(),
+        })
       },
       onTransportSwitch: () => {
         // Transport changes are gap-prone in real networks. Treat them like a
@@ -1831,6 +1847,11 @@ export function SyncProvider(props: {
           hasEverConnected: true,
           connectionPhase: "connected",
         })
+        useConfigStore.getState().setRuntimeTransportState({
+          phase: "connected",
+          reason: null,
+          updatedAt: Date.now(),
+        })
         for (const dir of childStores.children.keys()) {
           triggerDirectoryResync(dir)
         }
@@ -1845,6 +1866,62 @@ export function SyncProvider(props: {
     }
   }, [props.sdk, childStores, routingIndex, messageStreamTransport, triggerDirectoryResync])
 
+  // Browser-level online/offline observability for the narrow
+  // `runtimeTransportState` field. The pipeline itself only reads
+  // `navigator.onLine` synchronously inside `computeRetryDelay`; it does NOT
+  // install `online`/`offline` listeners, so subscribing here is safe and
+  // non-conflicting. The existing `connectionPhase`/`isConnected` readiness
+  // gating is intentionally NOT touched by these handlers — they only
+  // adjust the per-hop narrow state.
+  useEffect(() => {
+    if (typeof window === "undefined") {
+      return
+    }
+
+    const handleOffline = () => {
+      const current = useConfigStore.getState().runtimeTransportState.phase
+      if (current === "offline") {
+        return
+      }
+      if (
+        current === "connected"
+        || current === "connecting"
+        || current === "reconnecting"
+        || current === "disconnected"
+      ) {
+        preOfflinePhaseRef.current = current
+        useConfigStore.getState().setRuntimeTransportState({
+          phase: "offline",
+          reason: "offline",
+          updatedAt: Date.now(),
+        })
+      }
+    }
+
+    const handleOnline = () => {
+      const restored = preOfflinePhaseRef.current
+      preOfflinePhaseRef.current = null
+      if (restored === null || restored === "offline") {
+        // No recorded pre-offline phase, or the pre-offline state was
+        // already `offline` — let the event pipeline's `onReconnect`
+        // eventually set the narrow state to `connected`.
+        return
+      }
+      useConfigStore.getState().setRuntimeTransportState({
+        phase: restored,
+        reason: null,
+        updatedAt: Date.now(),
+      })
+    }
+
+    window.addEventListener("offline", handleOffline)
+    window.addEventListener("online", handleOnline)
+    return () => {
+      window.removeEventListener("offline", handleOffline)
+      window.removeEventListener("online", handleOnline)
+    }
+  }, [])
+
   useEffect(() => {
     let stopped = false
     let running = false
diff --git a/plans/issue-1737-connection-status/plan.md b/plans/issue-1737-connection-status/plan.md
new file mode 100644
index 0000000000..fbab7a6db8
--- /dev/null
+++ b/plans/issue-1737-connection-status/plan.md
@@ -0,0 +1,277 @@
+# Issue 1737 / 1556 — Aggregated connection status indicator plan
+
+## Summary
+
+Add a single compact header status dot that summarizes connection health without adding UI weight.
+
+- Always visible: one small dot in shared header UI
+- Hover only: 2-3 short lines describing overall state and each hop
+- No click-driven diagnostics, no second dot, no new polling loop
+- Internally track two distinct hops, but present one aggregated indicator
+
+## Scope
+
+This plan covers:
+
+- issue [#1737](https://github.com/openchamber/openchamber/issues/1737): frontend ↔ OpenChamber runtime status
+- related issue [#1556](https://github.com/openchamber/openchamber/issues/1556): OpenChamber runtime ↔ OpenCode status
+- a shared UX and state model that supports both while keeping the visible UI to one compact indicator
+
+Out of scope for this PR:
+
+- implementation code
+- expanded diagnostics UI
+- separate per-hop visible indicators
+- new health polling beyond existing reconnect/health signals
+
+## Behavioral contract
+
+### Natural user action
+
+The user glances at a small status indicator in the header. If it is not healthy or they want more detail, they hover to read a short explanation.
+
+### Value source
+
+The value is system-derived, not user-authored:
+
+- frontend ↔ runtime health comes from the existing SSE/WS reconnect pipeline
+- runtime ↔ OpenCode health comes from existing OpenCode health checks / health snapshots
+
+### Valid visible states
+
+Normalized visible states:
+
+- Connected
+- Reconnecting
+- Degraded / Disconnected
+- Unknown
+
+Optional short reason text may include:
+
+- Offline
+- Runtime unreachable
+- OpenCode unavailable
+- Auth/config issue
+- Unknown
+
+### Existing project pattern
+
+The visible affordance should reuse the compact dot + hover pattern already used in subsystem status UI, especially:
+
+- `packages/ui/src/components/desktop/DesktopHostSwitcher.tsx`
+- `packages/ui/src/components/sections/mcp/McpPage.tsx`
+- header tooltip/compact status affordances in `packages/ui/src/components/layout/Header.tsx`
+
+### Raw/internal values
+
+Do not expose internal/manual reason codes such as `ws_closed:1006` or `health_check_unhealthy` directly in the normal UI. Map them to short user-facing copy. Raw details may remain available for diagnostics/debug paths.
+
+## Current facts
+
+### Frontend ↔ runtime signals already exist
+
+Relevant files:
+
+- `packages/ui/src/sync/event-pipeline.ts`
+- `packages/ui/src/sync/sync-context.tsx`
+- `packages/ui/src/stores/useConfigStore.ts`
+
+Current behavior:
+
+- reconnect loop already drives disconnect/reconnect state
+- disconnect reasons already exist
+- `sync-context.tsx` currently updates `isConnected`, `hasEverConnected`, `connectionPhase`, and `lastDisconnectReason` from pipeline lifecycle callbacks
+
+### Runtime ↔ OpenCode signals already exist
+
+Relevant files:
+
+- `packages/ui/src/lib/opencode/client.ts`
+- `packages/ui/src/stores/useConfigStore.ts`
+- `packages/web/server/index.js`
+- `packages/ui/src/lib/openCodeStatus.ts`
+
+Current behavior:
+
+- `opencodeClient.checkHealth()` calls `/api/opencode/health`
+- runtime `/health` snapshot exposes fields including `isOpenCodeReady` and `lastOpenCodeError`
+- diagnostics/reporting paths already consume these signals
+
+### Current architectural gap
+
+Today the shared config-store connection fields mix semantics from both hops. That is fine for broad readiness gating but not precise enough for one aggregated user-facing status indicator that must explain which hop is unhealthy.
+
+## Target design
+
+## UX
+
+Add one compact shared indicator in the main header area:
+
+- default UI: dot only
+- hover content: 2-3 short lines
+- color reflects worst current state
+- works across web, desktop, and VS Code shared UI as far as the shared header path is used
+
+Example hover content:
+
+```text
+Connection status
+Frontend ↔ OpenChamber: connected
+OpenChamber ↔ OpenCode: unavailable
+```
+
+or:
+
+```text
+Connection status
+Frontend ↔ OpenChamber: reconnecting
+Reason: offline
+```
+
+## State model
+
+Internally separate the two hops:
+
+1. Frontend ↔ OpenChamber runtime
+2. OpenChamber runtime ↔ OpenCode
+
+Then derive one aggregated presentational model:
+
+- dot color
+- overall label
+- hover lines
+
+### Recommended aggregation rules
+
+- Green: both hops healthy
+- Red: any hop clearly broken/unavailable
+- Neutral/amber: reconnecting, transitional, or unknown
+- Unknown: when the app cannot reliably determine current status
+
+### Recommended precedence
+
+1. frontend disconnected/offline/reconnecting
+2. runtime connected but OpenCode unhealthy
+3. both healthy
+4. fallback unknown
+
+This keeps the visible indicator focused on the most actionable current failure.
+
+## Implementation plan
+
+### Phase 1 — Separate state ownership
+
+Goal: stop overloading one set of connection fields with two different meanings.
+
+Planned changes:
+
+- introduce explicit normalized state for frontend ↔ runtime transport health
+- introduce explicit normalized state for runtime ↔ OpenCode health
+- keep existing readiness behavior working during migration
+- avoid broad store fanout; use low-frequency narrow selectors only
+
+Candidate files:
+
+- `packages/ui/src/stores/useConfigStore.ts`
+- `packages/ui/src/sync/sync-context.tsx`
+- `packages/ui/src/sync/event-pipeline.ts`
+- `packages/ui/src/hooks/useOpenCodeReadiness.ts`
+
+### Phase 2 — Normalize user-facing reasons
+
+Goal: map internal disconnect/health reasons into compact hover text.
+
+Planned changes:
+
+- add a small mapper from internal reason codes to user-facing labels
+- preserve raw values only for debug/diagnostics
+- keep tooltip copy short and stable
+
+Candidate files:
+
+- likely a new small helper under `packages/ui/src/lib/` or `packages/ui/src/components/layout/`
+- translation/messages files for user-facing strings
+
+### Phase 3 — Shared compact indicator component
+
+Goal: build one reusable header-grade component that consumes only normalized state.
+
+Planned changes:
+
+- create a compact dot indicator with tooltip/hover content
+- reuse header tooltip and subsystem status visual patterns
+- no click dependency in the primary flow
+
+Candidate files:
+
+- `packages/ui/src/components/layout/Header.tsx`
+- likely a new component under `packages/ui/src/components/layout/` or `packages/ui/src/components/ui/`
+
+### Phase 4 — Integrate aggregated status
+
+Goal: compute a single visible status from the two internal hops.
+
+Planned changes:
+
+- add aggregation selector/helper
+- feed the component a stable low-frequency view model
+- ensure cross-runtime shared rendering parity
+
+### Phase 5 — Validate narrow scenarios
+
+Minimum scenarios to verify:
+
+- fresh connected startup
+- runtime restart / temporary reconnect
+- browser offline / online recovery
+- runtime unreachable
+- OpenCode unhealthy while runtime remains reachable
+- transport switch / recovery path
+- desktop and VS Code shared UI behavior parity where applicable
+
+## Risks and mitigations
+
+### Risk: mixed semantics create misleading status
+
+Mitigation:
+
+- split internal state by hop first
+- aggregate only after normalization
+
+### Risk: UI noise or clutter
+
+Mitigation:
+
+- one dot only
+- short hover text only
+- no second visible indicator
+
+### Risk: exposing raw implementation details
+
+Mitigation:
+
+- map raw reasons to short labels
+- reserve raw details for diagnostics only
+
+### Risk: render fanout / hot-path regressions
+
+Mitigation:
+
+- subscribe only to narrow low-frequency fields
+- do not attach indicator rendering to session lists or streaming message state
+
+## Rollout recommendation
+
+Recommended order:
+
+1. separate hop-specific internal state
+2. add reason normalization
+3. add shared compact indicator
+4. wire aggregated status into header
+5. verify web/desktop/VS Code parity
+
+## Open questions
+
+- Whether the final neutral transitional state should be amber or theme-muted when reconnecting/unknown
+- Whether the hover always shows both hop lines, or collapses to a reason line when the second hop is not currently knowable
+- Whether VS Code needs any special bridge mapping beyond the shared normalized state
diff --git a/plans/issue-1737-connection-status/todo.md b/plans/issue-1737-connection-status/todo.md
new file mode 100644
index 0000000000..c5b5072f81
--- /dev/null
+++ b/plans/issue-1737-connection-status/todo.md
@@ -0,0 +1,27 @@
+# Todo — Issue 1737 / 1556 aggregated connection status
+
+## Current phase
+
+Planning only
+
+## Completed
+
+- Reviewed issue #1737
+- Reviewed related issue #1556
+- Traced existing transport and health code paths
+- Chose compact single-dot + hover UX direction
+- Wrote canonical implementation plan
+
+## Next proposed steps
+
+1. Confirm plan direction in PR review
+2. Implement hop-separated normalized state
+3. Add aggregated status selector/helper
+4. Build compact header indicator with short hover details
+5. Verify narrow runtime-failure scenarios across shared runtimes
+
+## Not in this PR
+
+- implementation code
+- UI screenshots
+- behavior changes