feat: Better detection of proper conn.

* Make an initial RPC call in our connect efforts, to be sure we've
  set up a working transport, and handle failures.

src/App.tsx

@@ -27,6 +27,7 @@ import { usePub, useSub } from "./usePubSub";
 import { LockState } from "@zmkfirmware/zmk-studio-ts-client/core";
 import { LockStateContext } from "./rpc/LockStateContext";
 import { UnlockModal } from "./UnlockModal";
+import { valueAfter } from "./misc/async";
 
 declare global {
   interface Window {
@@ -111,23 +112,46 @@ async function listen_for_notifications(
 
 async function connect(
   transport: RpcTransport,
-  setConn: Dispatch<RpcConnection | null>
+  setConn: Dispatch<RpcConnection | null>,
+  setConnectedDeviceName: Dispatch<string | undefined>
 ) {
   let rpc_conn = await create_rpc_connection(transport);
 
+  let details = await Promise.race([
+    call_rpc(rpc_conn, { core: { getDeviceInfo: true } })
+      .then((r) => r?.core?.getDeviceInfo)
+      .catch((e) => {
+        console.error("Failed first RPC call", e);
+        return undefined;
+      }),
+    valueAfter(undefined, 1000),
+  ]);
+
+  if (!details) {
+    // TODO: Show a proper toast/alert not using `window.alert`
+    window.alert("Failed to connect to the chosen device");
+    return;
+  }
+
   listen_for_notifications(rpc_conn.notification_readable)
     .then(() => {
+      setConnectedDeviceName(undefined);
       setConn(null);
     })
     .catch((_e) => {
+      setConnectedDeviceName(undefined);
       setConn(null);
     });
 
+  setConnectedDeviceName(details.name);
   setConn(rpc_conn);
 }
 
 function App() {
   const [conn, setConn] = useState<RpcConnection | null>(null);
+  const [connectedDeviceName, setConnectedDeviceName] = useState<
+    string | undefined
+  >(undefined);
   const [doIt, undo, redo, canUndo, canRedo, reset] = useUndoRedo();
 
   const [lockState, setLockState] = useState<LockState>(
@@ -168,11 +192,13 @@ function App() {
           <ConnectModal
             open={!conn}
             transports={TRANSPORTS}
-            onTransportCreated={(t) => connect(t, setConn)}
+            onTransportCreated={(t) =>
+              connect(t, setConn, setConnectedDeviceName)
+            }
           />
           <div className="bg-bg-base text-text-base h-full w-full min-w-min inline-grid grid-cols-[auto] grid-rows-[auto_1fr]">
             <AppHeader
-              connectedDeviceLabel={conn?.label}
+              connectedDeviceLabel={connectedDeviceName}
               canUndo={canUndo}
               canRedo={canRedo}
               onUndo={undo}

src/AppHeader.tsx

@@ -4,7 +4,6 @@ import { call_rpc } from "@zmkfirmware/zmk-studio-ts-client";
 import { useConnectedDeviceData } from "./rpc/useConnectedDeviceData";
 import { useSub } from "./usePubSub";
 import { ConnectionContext } from "./rpc/ConnectionContext";
-import { GetDeviceInfoResponse } from "@zmkfirmware/zmk-studio-ts-client/core";
 import {
   ArrowUturnLeftIcon,
   ArrowUturnRightIcon,
@@ -19,6 +18,7 @@ export interface AppHeaderProps {
 }
 
 export const AppHeader = ({
+  connectedDeviceLabel,
   canRedo,
   canUndo,
   onRedo,
@@ -29,11 +29,6 @@ export const AppHeader = ({
     (r) => r.keymap?.checkUnsavedChanges
   );
 
-  const [deviceInfo, _setDeviceInfo] =
-    useConnectedDeviceData<GetDeviceInfoResponse>(
-      { core: { getDeviceInfo: true } },
-      (r) => r.core?.getDeviceInfo
-    );
   const conn = useContext(ConnectionContext);
 
   useSub("rpc_notification.keymap.unsavedChangesStatusChanged", (unsaved) =>
@@ -73,7 +68,7 @@ export const AppHeader = ({
   return (
     <header className="top-0 left-0 right-0 grid grid-cols-[1fr_auto_1fr] items-center justify-between border-b border-text-base">
       <p className="px-3">ZMK Studio</p>
-      <p className="text-center">{deviceInfo?.name}</p>
+      <p className="text-center">{connectedDeviceLabel}</p>
       <div className="flex justify-end">
         {onUndo && (
           <button

src/misc/async.ts

@@ -0,0 +1,5 @@
+export function valueAfter<T>(val: T, ms?: number): Promise<T> {
+  return new Promise((resolve) => {
+    setTimeout(() => resolve(val), ms);
+  });
+}