perf(devframe): parse user-agent server-side

The only client-side use of ua-parser-modern was formatting
navigator.userAgent into a short device label before sending it in the
anonymous:devframe:auth(:exchange) handshake - the parsed shape never
crossed the wire, only the resulting string did. Send the raw
navigator.userAgent instead and parse+format it at the server ingress
(node/auth/state.ts, where it's stored), keeping the persisted label
format and the ua: string wire shape identical while moving
ua-parser-modern out of the ~90 KB client bundle every embedded page
loads.

Author: antfubot

packages/devframe/src/client/rpc-live.ts

@@ -3,7 +3,6 @@ import type { ConnectionMeta, DevframeRpcClientFunctions, DevframeRpcServerFunct
 import type { DevframeConnectionStatus } from './connection'
 import type { DevframeClientRpcHost, DevframeRpcClientMode, DevframeRpcClientOptions, RpcClientEvents } from './rpc'
 import { createRpcClient } from 'devframe/rpc/client'
-import { parseUA } from 'ua-parser-modern'
 import { promiseWithResolver } from '../utils/promise'
 import { DevframeConnectionError } from './connection'
 
@@ -184,24 +183,15 @@ export function createLiveRpcClientMode(
 
   let currentAuthToken: string | undefined = authToken
 
-  function describeUA(): string {
-    const info = parseUA(navigator.userAgent)
-    return [
-      info.browser.name,
-      info.browser.version,
-      '|',
-      info.os.name,
-      info.os.version,
-      info.device.type,
-    ].filter(i => i).join(' ')
-  }
-
   async function requestTrustWithToken(token: string) {
     currentAuthToken = token
 
     const result = await serverRpc.$call('anonymous:devframe:auth', {
       authToken: token,
-      ua: describeUA(),
+      // Sent raw; the server parses it into a display label (see
+      // `describeUA` in `node/auth/state.ts`) so `ua-parser-modern` stays
+      // out of the browser bundle.
+      ua: navigator.userAgent,
       origin: location.origin,
     })
 
@@ -228,7 +218,7 @@ export function createLiveRpcClientMode(
   async function requestTrustWithCode(code: string): Promise<string | null> {
     const result = await serverRpc.$call('anonymous:devframe:auth:exchange', {
       code,
-      ua: describeUA(),
+      ua: navigator.userAgent,
       origin: location.origin,
     })
 

packages/devframe/src/node/auth/state.ts

@@ -3,6 +3,29 @@ import type { SharedState } from 'devframe/utils/shared-state'
 import type { InternalAnonymousAuthStorage } from '../hub-internals/context'
 import { DEVFRAME_OTP_URL_PARAM } from 'devframe/constants'
 import { randomDigits, randomToken, timingSafeEqual } from 'devframe/utils/crypto-token'
+import { parseUA } from 'ua-parser-modern'
+
+/**
+ * Format a raw `navigator.userAgent` string into the short display label
+ * shown for a trusted device (e.g. "Chrome 120 | macOS 14 desktop").
+ *
+ * The client used to parse+format this itself, but that pulled
+ * `ua-parser-modern` into the browser bundle for a label nothing else on
+ * the client needs — the client now sends the raw string and parsing
+ * happens here, at the server ingress, keeping the persisted label format
+ * identical.
+ */
+function describeUA(userAgent: string): string {
+  const info = parseUA(userAgent)
+  return [
+    info.browser.name,
+    info.browser.version,
+    '|',
+    info.os.name,
+    info.os.version,
+    info.device.type,
+  ].filter(i => i).join(' ')
+}
 
 /** Number of decimal digits in a human-typed one-time authentication code. */
 const TEMP_AUTH_CODE_LENGTH = 6
@@ -121,7 +144,7 @@ export function exchangeTempAuthCode(
   storage.mutate((state) => {
     state.trusted[authToken] = {
       authToken,
-      ua: info.ua,
+      ua: describeUA(info.ua),
       origin: info.origin,
       timestamp: Date.now(),
     }