fix(tui): suppress transient reconnect overlay flashes (#34924)

packages/tui/src/app.tsx

@@ -1116,6 +1116,34 @@ function App(props: { onSnapshot?: () => Promise<string[]>; pluginHost: TuiPlugi
     return render({ params: route.data.data })
   })
 
+  // Suppress the full-screen reconnecting overlay for transient disconnects (initial startup, host
+  // reload, sub-second event-stream blips). After the first successful connect, show it only once the
+  // connection has been lost for a full second; before the first connect give a longer grace period so
+  // startup never flashes it, but a server that dies before ever connecting still surfaces instead of
+  // leaving a silent empty app. Hide it immediately the moment status leaves "connecting".
+  const [showReconnecting, setShowReconnecting] = createSignal(false)
+  let reconnectTimer: ReturnType<typeof setTimeout> | undefined
+  createEffect(() => {
+    if (reconnectTimer) {
+      clearTimeout(reconnectTimer)
+      reconnectTimer = undefined
+    }
+    if (sdk.connection.status() !== "connecting") {
+      setShowReconnecting(false)
+      return
+    }
+    reconnectTimer = setTimeout(
+      () => {
+        reconnectTimer = undefined
+        setShowReconnecting(true)
+      },
+      sdk.connection.connectedOnce() ? 1000 : 5000,
+    ).unref()
+  })
+  onCleanup(() => {
+    if (reconnectTimer) clearTimeout(reconnectTimer)
+  })
+
   return (
     <box
       width={dimensions().width}
@@ -1161,7 +1189,7 @@ function App(props: { onSnapshot?: () => Promise<string[]>; pluginHost: TuiPlugi
       <Show when={!startup.skipInitialLoading}>
         <StartupLoading ready={ready} />
       </Show>
-      <Show when={sdk.connection.status() === "connecting"}>
+      <Show when={showReconnecting()}>
         <Reconnecting attempt={sdk.connection.attempt()} error={sdk.connection.error()} />
       </Show>
     </box>

packages/tui/src/context/data.tsx

@@ -636,6 +636,9 @@ export const { use: useData, provider: DataProvider } = createSimpleContext({
         error() {
           return sdk.connection.error()
         },
+        connectedOnce() {
+          return sdk.connection.connectedOnce()
+        },
       },
       session: {
         list() {

packages/tui/src/context/sdk.tsx

@@ -25,9 +25,11 @@ export const { use: useSDK, provider: SDKProvider } = createSimpleContext({
       status: SDKConnectionStatus
       attempt: number
       error?: string
+      connectedOnce: boolean
     }>({
       status: "connecting",
       attempt: 0,
+      connectedOnce: false,
     })
     let stream: AbortController | undefined
     let pending: Promise<void> | undefined
@@ -68,7 +70,7 @@ export const { use: useSDK, provider: SDKProvider } = createSimpleContext({
             clearTimeout(timeout)
             attempt = 0
             events.emit(first.value.type, first.value)
-            setConnection({ status: "connected", attempt: 0, error: undefined })
+            setConnection({ status: "connected", attempt: 0, error: undefined, connectedOnce: true })
             connected()
             while (!abort.signal.aborted && !controller.signal.aborted) {
               const event = await iterator.next()
@@ -140,6 +142,9 @@ export const { use: useSDK, provider: SDKProvider } = createSimpleContext({
         error() {
           return connection.error
         },
+        connectedOnce() {
+          return connection.connectedOnce
+        },
       },
       reload,
     }