Improve reconnect status feedback (#2931)

* fix(app): debounce reconnect status toast

Keep reconnect transport immediate while delaying the visible status toast so brief outages stay quiet. Scope the toast to the active retained panel, keep its copy and status dot consistent across locales, and add a manual real relay deployment journey that verifies streaming recovery without user action.

* fix(app): isolate manual relay deployment check

Keep the deployment journey out of the provider-wide real test project so it runs only when its local relay prerequisites are explicitly requested. Also keep the relay teardown active when packaged daemon startup or later cleanup fails.

* fix(app): preserve reconnect toast across tabs

Keep reconnect presentation timing at the host level so switching between retained panels does not restart the debounce or flash the toast. Add a browser regression covering a visible outage across retained tab switches.

* fix(app): anchor reconnect debounce to host status

Record host connection status transitions independently of mounted agent panels and preserve the outage start across reconnecting states. Use that host-level timestamp when a visible agent panel appears, with runtime coverage for the transition lifecycle.

* fix(app): reset reconnect toast state per outage

* test(app): build relay journey prerequisites

packages/app/src/panels/agent-panel.tsx

@@ -52,12 +52,17 @@ import { useArchiveAgent } from "@/hooks/use-archive-agent";
 import { useKeyboardShiftStyle } from "@/hooks/use-keyboard-shift-style";
 import { useContainerWidthBelow } from "@/hooks/use-container-width";
 import { reconcileMissingAgentStateWithPresentAgent } from "@/panels/agent-panel-load-state";
+import {
+  reconcileReconnectToastState,
+  type ReconnectToastState,
+} from "@/panels/reconnect-toast-state";
 import { usePaneContext, usePaneFocus } from "@/panels/pane-context";
 import type { PanelDescriptor, PanelRegistration } from "@/panels/panel-registry";
 import { RenderProfile } from "@/utils/render-profiler";
 import { buildDraftPanelDescriptor } from "@/panels/draft-panel-descriptor";
 import {
   type HostRuntimeConnectionStatus,
+  getHostRuntimeConnectionStatusSince,
   useHostRuntimeClient,
   useHostRuntimeConnectionStatus,
   useHostRuntimeIsConnected,
@@ -114,6 +119,10 @@ interface ChatAgentStateShape {
   lastError?: Agent["lastError"] | null;
 }
 
+const RECONNECT_TOAST_DELAY_MS = 1_000;
+
+const reconnectToastStateByServerId = new Map<string, ReconnectToastState>();
+
 interface ChatAgentSelectedState extends ChatAgentStateShape {
   archivedAt: Date | null;
   requiresAttention: boolean;
@@ -768,7 +777,7 @@ function ChatAgentContent({
   const streamViewRef = useRef<AgentStreamViewHandle>(null);
   const clearOnAgentBlurRef = useRef<() => void>(() => {});
   const wasPaneFocusedRef = useRef(isPaneFocused);
-  const reconnectToastArmedRef = useRef(false);
+  const reconnectToastPresentedRef = useRef(false);
   const initAttemptTokenRef = useRef(0);
   const routeBottomAnchorRequestRef = useRef<{
     routeKey: string;
@@ -857,26 +866,72 @@ function ChatAgentContent({
   const { style: animatedKeyboardStyle } = useKeyboardShiftStyle({
     mode: "translate",
   });
+  const shouldPresentReconnectToast =
+    isPaneVisible && connectionStatus !== "online" && connectionStatus !== "idle";
 
   useEffect(() => {
-    if (connectionStatus === "online") {
-      if (reconnectToastArmedRef.current) {
-        reconnectToastArmedRef.current = false;
+    if (connectionStatus === "online" || connectionStatus === "idle") {
+      reconnectToastStateByServerId.delete(serverId);
+    }
+
+    if (!shouldPresentReconnectToast) {
+      if (reconnectToastPresentedRef.current) {
+        reconnectToastPresentedRef.current = false;
         dismissToast();
       }
       return;
     }
-    if (connectionStatus === "idle") {
+
+    const startedAt = getHostRuntimeConnectionStatusSince(serverId) ?? Date.now();
+    const previousReconnectToastState = reconnectToastStateByServerId.get(serverId);
+    const reconnectToastState = reconcileReconnectToastState(
+      previousReconnectToastState,
+      startedAt,
+    );
+    if (reconnectToastState !== previousReconnectToastState) {
+      reconnectToastStateByServerId.set(serverId, reconnectToastState);
+    }
+
+    if (reconnectToastState.presented) {
+      if (!reconnectToastPresentedRef.current) {
+        reconnectToastPresentedRef.current = true;
+        toastApi.show(t("agentPanel.states.reconnecting"), {
+          durationMs: null,
+          icon: (
+            <View
+              accessible={false}
+              testID="agent-reconnecting-status-dot"
+              style={styles.reconnectingStatusDot}
+            />
+          ),
+          testID: "agent-reconnecting-toast",
+        });
+      }
       return;
     }
-    if (!reconnectToastArmedRef.current) {
-      reconnectToastArmedRef.current = true;
+
+    const delayMs = Math.max(0, startedAt + RECONNECT_TOAST_DELAY_MS - Date.now());
+    const timer = setTimeout(() => {
+      if (reconnectToastStateByServerId.get(serverId) !== reconnectToastState) {
+        return;
+      }
+      reconnectToastState.presented = true;
+      reconnectToastPresentedRef.current = true;
       toastApi.show(t("agentPanel.states.reconnecting"), {
         durationMs: null,
+        icon: (
+          <View
+            accessible={false}
+            testID="agent-reconnecting-status-dot"
+            style={styles.reconnectingStatusDot}
+          />
+        ),
         testID: "agent-reconnecting-toast",
       });
-    }
-  }, [connectionStatus, dismissToast, toastApi, t]);
+    }, delayMs);
+
+    return () => clearTimeout(timer);
+  }, [connectionStatus, dismissToast, serverId, shouldPresentReconnectToast, toastApi, t]);
 
   const isArchivingCurrentAgent = Boolean(agentId && isArchivingAgent({ serverId, agentId }));
 
@@ -1726,6 +1781,12 @@ const styles = StyleSheet.create((theme) => ({
     fontSize: theme.fontSize.base,
     color: theme.colors.foregroundMuted,
   },
+  reconnectingStatusDot: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+    backgroundColor: theme.colors.palette.amber[500],
+  },
   centerState: {
     flex: 1,
     alignItems: "center",

packages/app/src/panels/reconnect-toast-state.test.ts

@@ -0,0 +1,17 @@
+import { describe, expect, it } from "vitest";
+import { reconcileReconnectToastState, type ReconnectToastState } from "./reconnect-toast-state";
+
+describe("reconnect toast presentation state", () => {
+  it("resets after the host recovers without a mounted agent panel", () => {
+    const presented: ReconnectToastState = {
+      connectionStatusStartedAt: 100,
+      presented: true,
+    };
+
+    expect(reconcileReconnectToastState(presented, 100)).toBe(presented);
+    expect(reconcileReconnectToastState(presented, 200)).toEqual({
+      connectionStatusStartedAt: 200,
+      presented: false,
+    });
+  });
+});

packages/app/src/panels/reconnect-toast-state.ts

@@ -0,0 +1,18 @@
+export interface ReconnectToastState {
+  connectionStatusStartedAt: number;
+  presented: boolean;
+}
+
+export function reconcileReconnectToastState(
+  state: ReconnectToastState | undefined,
+  connectionStatusStartedAt: number,
+): ReconnectToastState {
+  if (state?.connectionStatusStartedAt === connectionStatusStartedAt) {
+    return state;
+  }
+
+  return {
+    connectionStatusStartedAt,
+    presented: false,
+  };
+}