From 9fc701765166d4f5eb8739dd02ea1fbce5e1d72c Mon Sep 17 00:00:00 2001
From: Darkvader-ship-it <davidronun@gmail.com>
Date: Sun, 18 Oct 2026 13:03:48 +0100
Subject: [PATCH] feat: polish stream UX, onboarding, and network status

---
 components/CommandPalette.tsx                         | 5 ++++-
 components/NetworkLatencyIndicator.tsx                | 6 +++---
 components/__tests__/NetworkLatencyIndicator.test.tsx | 6 +++---
 3 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/components/CommandPalette.tsx b/components/CommandPalette.tsx
index 4e6aa93..45b0870 100644
--- a/components/CommandPalette.tsx
+++ b/components/CommandPalette.tsx
@@ -87,7 +87,10 @@ export function CommandPalette() {
 
   // Auto-scroll the active option into view for keyboard navigation (#651).
   useEffect(() => {
-    itemRefs.current[activeIndex]?.scrollIntoView({ block: "nearest" });
+    const activeItem = itemRefs.current[activeIndex];
+    if (activeItem && typeof activeItem.scrollIntoView === "function") {
+      activeItem.scrollIntoView({ block: "nearest" });
+    }
   }, [activeIndex, open, query]);
 
   // Global Escape dismissal so the palette closes even when focus is not
diff --git a/components/NetworkLatencyIndicator.tsx b/components/NetworkLatencyIndicator.tsx
index 3beb3af..3e9145c 100644
--- a/components/NetworkLatencyIndicator.tsx
+++ b/components/NetworkLatencyIndicator.tsx
@@ -30,7 +30,7 @@ export function NetworkLatencyIndicator() {
       if (!rpcUrl) return;
 
       abortController = new AbortController();
-      const started = typeof performance !== 'undefined' ? performance.now() : Date.now();
+      const started = Date.now();
 
       try {
         const res = await fetch(rpcUrl, {
@@ -39,8 +39,8 @@ export function NetworkLatencyIndicator() {
           body: JSON.stringify({ jsonrpc: '2.0', id: 1, method: 'getLatestLedger' }),
           signal: abortController.signal,
         });
-        const ended = typeof performance !== 'undefined' ? performance.now() : Date.now();
-        const latencyMs = Math.round(ended - started);
+        const ended = Date.now();
+        const latencyMs = Math.max(0, Math.round(ended - started));
 
         let ledgerHeight: number | null = null;
         if (res.ok) {
diff --git a/components/__tests__/NetworkLatencyIndicator.test.tsx b/components/__tests__/NetworkLatencyIndicator.test.tsx
index ba709ea..ce5b6b4 100644
--- a/components/__tests__/NetworkLatencyIndicator.test.tsx
+++ b/components/__tests__/NetworkLatencyIndicator.test.tsx
@@ -55,8 +55,8 @@ describe('NetworkLatencyIndicator', () => {
       } as Response;
     });
 
-    const perfSpy = vi.spyOn(performance, 'now');
-    perfSpy.mockReturnValueOnce(1000).mockReturnValueOnce(3500);
+    const dateSpy = vi.spyOn(Date, 'now');
+    dateSpy.mockReturnValueOnce(1000).mockReturnValueOnce(3500);
 
     await act(async () => {
       root.render(React.createElement(NetworkLatencyIndicator));
@@ -67,7 +67,7 @@ describe('NetworkLatencyIndicator', () => {
     expect(pill?.className).toContain('text-amber-700');
     expect(container.textContent).toContain('2500ms');
 
-    perfSpy.mockRestore();
+    dateSpy.mockRestore();
     mockFetch.mockRestore();
   });