Show when user can't connect because of a bad token (#2105)

* Reapply "Add ping pong health, remove a timeout interval, fix up netwo… (#1771)

This reverts commit 1913519f68.

* Fix build errors

* Add new error states to network status notification

* Remove unused variable

* Refactor to use Context API for network status

* Don't do any stream events if network is not ok

* Catch LSP errors on bad auth

* Show when authentication is bad (cookie header only)

* Fix formatting

* Fix up types

* Revert awaiting on lsp failure

* Fix tsc

* wip

* wip

* fmt

* Fix typing

* Incorporate ping health; yarn make:dev; faster video stream loss notice

* A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu)

* run ci pls

* run ci pls

* A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu)

* run ci pls again

* Remove unused variables

* Add new instructions on running Playwright anywhere

* Please the Playwright. Praise the Playwright.

* Correct a vitest

* A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu)

* ci again

* Fix tests unrelated to this PR

* Fix flakiness in for segments tests

* Bump to 2 workers

* fmt

* A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu)

* fmt

* fmt

* Fixups

* A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu)

* ci

* Set workers to 1

* Wait for network status listeners before connecting

* Fix initial connection requirements and trying 2 workers again

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

src/hooks/useStateMachineCommands.ts

@@ -7,12 +7,10 @@ import { authMachine } from 'machines/authMachine'
 import { settingsMachine } from 'machines/settingsMachine'
 import { homeMachine } from 'machines/homeMachine'
 import { Command, CommandSetConfig, CommandSetSchema } from 'lib/commandTypes'
-import {
-  NetworkHealthState,
-  useNetworkStatus,
-} from 'components/NetworkHealthIndicator'
 import { useKclContext } from 'lang/KclProvider'
 import { useStore } from 'useStore'
+import { useNetworkContext } from 'hooks/useNetworkContext'
+import { NetworkHealthState } from 'hooks/useNetworkStatus'
 
 // This might not be necessary, AnyStateMachine from xstate is working
 export type AllMachines =
@@ -47,7 +45,7 @@ export default function useStateMachineCommands<
   onCancel,
 }: UseStateMachineCommandsArgs<T, S>) {
   const { commandBarSend } = useCommandsContext()
-  const { overallState } = useNetworkStatus()
+  const { overallState } = useNetworkContext()
   const { isExecuting } = useKclContext()
   const { isStreamReady } = useStore((s) => ({
     isStreamReady: s.isStreamReady,
@@ -55,7 +53,10 @@ export default function useStateMachineCommands<
 
   useEffect(() => {
     const disableAllButtons =
-      overallState !== NetworkHealthState.Ok || isExecuting || !isStreamReady
+      (overallState !== NetworkHealthState.Ok &&
+        overallState !== NetworkHealthState.Weak) ||
+      isExecuting ||
+      !isStreamReady
     const newCommands = state.nextEvents
       .filter((_) => !allCommandsRequireNetwork || !disableAllButtons)
       .filter((e) => !['done.', 'error.'].some((n) => e.includes(n)))