feat(app): pulse the status dot while the event stream reconnects (#47574)

packages/app/src/shell/status/indicator.test.ts

@@ -21,6 +21,19 @@ describe("serverStatusDotClass", () => {
     expect(serverStatusDotClass({ ready: true, serverHealth: false, issue: true })).toBe("bg-icon-critical-base")
   })
 
+  test("pulses the neutral dot while the event stream is reconnecting", () => {
+    expect(serverStatusDotClass({ ready: true, serverHealth: true, issue: false, connecting: true })).toBe(
+      "bg-border-weak-base animate-pulse",
+    )
+    expect(serverStatusDotClass({ ready: false, serverHealth: undefined, issue: false, connecting: true })).toBe(
+      "bg-border-weak-base animate-pulse",
+    )
+    // A server that is known to be down stays critical rather than looking like a routine reconnect.
+    expect(serverStatusDotClass({ ready: true, serverHealth: false, issue: false, connecting: true })).toBe(
+      "bg-icon-critical-base",
+    )
+  })
+
   test("stays neutral before status is ready", () => {
     expect(serverStatusDotClass({ ready: false, serverHealth: true, issue: false })).toBe("bg-border-weak-base")
     expect(serverStatusDotClass({ ready: false, serverHealth: undefined, issue: false })).toBe("bg-border-weak-base")

packages/app/src/shell/status/indicator.ts

@@ -20,8 +20,12 @@ export function serverStatusDotClass(input: {
   serverHealth: boolean | undefined
   attention?: boolean
   issue: boolean
+  connecting?: boolean
 }) {
   if (input.serverHealth === false) return "bg-icon-critical-base"
+  // The event stream is (re)connecting: keep the neutral dot but let it breathe so a stale
+  // session is visibly waiting on the server rather than silently frozen.
+  if (input.connecting) return "bg-border-weak-base animate-pulse"
   if (!input.ready || input.serverHealth === undefined) return "bg-border-weak-base"
   if (input.attention) return "bg-v2-background-bg-accent"
   if (input.issue) return "bg-icon-warning-base"

packages/app/src/shell/status/status-popover.tsx

@@ -42,6 +42,7 @@ export function StatusPopover() {
     serverHealth: serverHealth(),
     attention: attention(),
     issue: issue(),
+    connecting: server.ctx.sdk.connection.status() !== "connected",
     sidebar: sidebar(),
     placement: sidebar() ? "top-start" : "bottom-end",
     shift: sidebar() ? 0 : -168,
@@ -63,6 +64,7 @@ type StatusPopoverState = {
   serverHealth: boolean | undefined
   attention: boolean
   issue: boolean
+  connecting: boolean
   sidebar: boolean
   placement: "top-start" | "bottom-end"
   shift: number