Format settings latency readouts (#1170)

packages/app/src/screens/settings/host-page.tsx

@@ -27,6 +27,7 @@ import { settingsStyles } from "@/styles/settings";
 import type { HostConnection, HostProfile } from "@/types/host-connection";
 import { confirmDialog } from "@/utils/confirm-dialog";
 import { formatConnectionStatus, getConnectionStatusTone } from "@/utils/daemons";
+import { formatLatency } from "@/utils/latency";
 
 const RESTART_CONFIRMATION_MESSAGE =
   "This will restart the daemon. Agents running on it will keep going; the app will reconnect automatically.";
@@ -335,7 +336,7 @@ function ConnectionRow({
   const latencyText = (() => {
     if (latencyLoading) return "...";
     if (latencyError) return "Timeout";
-    if (latencyMs != null) return `${latencyMs}ms`;
+    if (latencyMs != null) return formatLatency(latencyMs);
     return "\u2014";
   })();
   const latencyColor = latencyError ? theme.colors.palette.red[300] : theme.colors.foregroundMuted;

packages/app/src/utils/latency.test.ts

@@ -0,0 +1,19 @@
+import { describe, expect, it } from "vitest";
+import { formatLatency } from "./latency";
+
+describe("formatLatency", () => {
+  it("uses microseconds for sub-millisecond latency", () => {
+    expect(formatLatency(0.4)).toBe("400\u00b5s");
+  });
+
+  it("uses integer milliseconds below one second", () => {
+    expect(formatLatency(7.200000047683716)).toBe("7ms");
+    expect(formatLatency(999.4)).toBe("999ms");
+  });
+
+  it("uses seconds at one second and above", () => {
+    expect(formatLatency(1000)).toBe("1s");
+    expect(formatLatency(1234)).toBe("1.2s");
+    expect(formatLatency(10_040)).toBe("10s");
+  });
+});

packages/app/src/utils/latency.ts

@@ -0,0 +1,13 @@
+export function formatLatency(latencyMs: number): string {
+  if (latencyMs < 1) {
+    return `${Math.round(latencyMs * 1000)}\u00b5s`;
+  }
+
+  if (latencyMs < 1000) {
+    return `${Math.round(latencyMs)}ms`;
+  }
+
+  const seconds = latencyMs / 1000;
+  const roundedSeconds = Math.round(seconds * 10) / 10;
+  return Number.isInteger(roundedSeconds) ? `${roundedSeconds}s` : `${roundedSeconds.toFixed(1)}s`;
+}