fix(extension): bound every network and storage read the UI opens with

The side panel opened to a header and nothing else, and the New Tab page sat
on its placeholders with the tab spinner running. Both surfaces render by
awaiting a chain of calls, and most of those calls could not fail.

`fetch()` has no default timeout. A host that accepts the connection and then
never answers leaves the promise pending for the life of the tab, so the
section waiting on it never renders and never errors — it just stays blank.
Nine of these were on a render path: the MOTD, Yahoo quotes, ESPN scores,
bittorrented `/me` and `/favorites`, CoinPay `/auth/me`, `/login`, `/signup`,
`/logout`, the settings pull/push, and the provider model list.
background.js, moshpit.js and the per-feed fetch already each carried their
own AbortController for exactly this reason; this is that pattern, in one
place, for the rest of them.

chrome.storage.local is bounded for the same reason. It is backed by a LevelDB
in the profile, and a large or damaged one can leave a get() pending. In the
side panel that read is `aiConfig`, and until it resolves the setup prompt
stays hidden and the panel shows nothing — a stalled read decided whether the
UI appeared at all. It now falls back to {} after 3s, which every caller
already handles as "nothing stored", so the panel draws its unconfigured
state instead of staying blank.

Streaming chat calls in providers.js are deliberately left unbounded — a long
completion is not a hang.

Tests: 9 covering the timeout, pass-through, real-error and fallback paths.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: ralyodio

apps/desktop/extensions/ai-sidebar/bittorrented.js

@@ -4,12 +4,14 @@
 // The token is stored locally (per device) and sent as `Authorization: Bearer`
 // to bittorrented.com's /api/v1/* endpoints (favorites, live TV, radio, podcasts).
 
+import { fetchWithTimeout, storageGet } from './net.js';
+
 export const BTR_BASE = 'https://bittorrented.com';
 const TB_WEB = 'https://tronbrowser.dev';
 const KEY = 'btrToken';
 
 export async function getToken() {
-  return (await chrome.storage.local.get(KEY))[KEY] || '';
+  return (await storageGet(KEY))[KEY] || '';
 }
 
 // Open the connect flow in a normal tab and wait for the token. We do NOT use
@@ -44,7 +46,7 @@ export async function verify() {
   const token = await getToken();
   if (!token) return { connected: false };
   try {
-    const r = await fetch(`${BTR_BASE}/api/v1/me`, { headers: { authorization: `Bearer ${token}` } });
+    const r = await fetchWithTimeout(`${BTR_BASE}/api/v1/me`, { headers: { authorization: `Bearer ${token}` } });
     if (!r.ok) return { connected: false };
     const d = await r.json();
     return { connected: true, email: d.email || null };

apps/desktop/extensions/ai-sidebar/coinpay-auth.js

@@ -4,6 +4,8 @@
 // (or does the CoinPay OAuth dance) and redirects back to /ext-callback.html,
 // where our content script hands the session token to the extension. This is
 // the login — never Google. Override the API base in Settings (self-hosted).
+import { fetchWithTimeout, storageGet } from './net.js';
+
 const DEFAULT_API = 'https://tronbrowser.dev';
 
 // Landing page for the redirect, and the storage key its content script writes.
@@ -15,7 +17,7 @@ const HANDOFF_KEY = 'tbAuthToken';
 const SIGNIN_TIMEOUT_MS = 180000;
 
 async function apiBase() {
-  const { syncConfig } = await chrome.storage.local.get('syncConfig');
+  const { syncConfig } = await storageGet('syncConfig');
   return (syncConfig?.url || DEFAULT_API).replace(/\/$/, '');
 }
 
@@ -26,7 +28,7 @@ async function storeSession(sessionToken, method) {
   const base = await apiBase();
   let label = '';
   try {
-    const me = await fetch(`${base}/api/auth/me`, { headers: { authorization: `Bearer ${sessionToken}` } });
+    const me = await fetchWithTimeout(`${base}/api/auth/me`, { headers: { authorization: `Bearer ${sessionToken}` } });
     if (me.ok) { const d = await me.json(); label = d.email || d.id || ''; }
   } catch { /* ignore */ }
   await chrome.storage.local.set({
@@ -78,7 +80,7 @@ export async function coinpaySignIn() {
 // returns a session token we store exactly like the CoinPay one.
 export async function emailSignIn(email, password) {
   const base = await apiBase();
-  const r = await fetch(`${base}/api/auth/login`, {
+  const r = await fetchWithTimeout(`${base}/api/auth/login`, {
     method: 'POST', headers: { 'content-type': 'application/json' },
     body: JSON.stringify({ email, password }),
   });
@@ -92,7 +94,7 @@ export async function emailSignIn(email, password) {
 // a verification email and does NOT sign you in; verify, then sign in.
 export async function emailSignUp(email, password) {
   const base = await apiBase();
-  const r = await fetch(`${base}/api/auth/signup`, {
+  const r = await fetchWithTimeout(`${base}/api/auth/signup`, {
     method: 'POST', headers: { 'content-type': 'application/json' },
     body: JSON.stringify({ email, password }),
   });
@@ -102,7 +104,7 @@ export async function emailSignUp(email, password) {
 }
 
 export async function coinpayState() {
-  const { coinpay } = await chrome.storage.local.get('coinpay');
+  const { coinpay } = await storageGet('coinpay');
   if (coinpay?.sessionToken && (!coinpay.expiresAt || coinpay.expiresAt > Date.now())) {
     return { signedIn: true, label: coinpay.label, method: coinpay.method || 'coinpay', token: coinpay.sessionToken };
   }
@@ -114,7 +116,7 @@ export async function coinpaySignOut() {
   if (coinpay?.sessionToken) {
     try {
       const base = await apiBase();
-      await fetch(`${base}/api/auth/logout`, { method: 'POST', headers: { authorization: `Bearer ${coinpay.sessionToken}` } });
+      await fetchWithTimeout(`${base}/api/auth/logout`, { method: 'POST', headers: { authorization: `Bearer ${coinpay.sessionToken}` } });
     } catch { /* ignore */ }
   }
   await chrome.storage.local.remove('coinpay');

apps/desktop/extensions/ai-sidebar/markets.js

@@ -6,11 +6,13 @@
 // grant cross-origin reads, so no backend and no API keys are needed (we never
 // ship our paid Finnhub/Alpaca keys in a public extension).
 
+import { fetchWithTimeout } from './net.js';
+
 const Y_CHART = 'https://query1.finance.yahoo.com/v8/finance/chart/';
 
 export async function fetchQuote(symbol) {
   const url = `${Y_CHART}${encodeURIComponent(symbol)}?range=1d&interval=1d`;
-  const res = await fetch(url);
+  const res = await fetchWithTimeout(url);
   if (!res.ok) throw new Error('quote ' + res.status);
   const m = (await res.json())?.chart?.result?.[0]?.meta;
   if (!m || m.regularMarketPrice == null) throw new Error('no data');
@@ -61,7 +63,7 @@ export async function fetchScores(leagueKey) {
   const path = LEAGUES[leagueKey];
   if (!path) return { league: leagueKey, games: [], error: 'unknown league' };
   try {
-    const res = await fetch(`https://site.api.espn.com/apis/site/v2/sports/${path}/scoreboard`);
+    const res = await fetchWithTimeout(`https://site.api.espn.com/apis/site/v2/sports/${path}/scoreboard`);
     if (!res.ok) throw new Error('espn ' + res.status);
     const data = await res.json();
     const games = (data.events || []).slice(0, 6).map((e) => {

apps/desktop/extensions/ai-sidebar/media.js

@@ -1,4 +1,5 @@
 import { BTR_BASE, getToken, connect, verify, disconnect } from './bittorrented.js';
+import { fetchWithTimeout } from './net.js';
 
 const el = (id) => document.getElementById(id);
 function escapeHtml(s) { const d = document.createElement('div'); d.textContent = s || ''; return d.innerHTML; }
@@ -28,7 +29,7 @@ async function loadFavorites() {
   el('btr').innerHTML = '<p class="muted">Loading favorites…</p>';
   let data;
   try {
-    const r = await fetch(`${BTR_BASE}/api/v1/favorites`, { headers: { authorization: `Bearer ${token}` } });
+    const r = await fetchWithTimeout(`${BTR_BASE}/api/v1/favorites`, { headers: { authorization: `Bearer ${token}` } });
     if (r.status === 401) { showDisconnected(); setStatus('Session expired — connect again.', 'err'); return; }
     if (!r.ok) { el('btr').innerHTML = `<p class="muted">Couldn’t load favorites (${r.status}).</p>`; return; }
     data = await r.json();

apps/desktop/extensions/ai-sidebar/motd.js

@@ -2,16 +2,18 @@
 // chrome.storage.local. The /motd endpoint is plain text (message + signature)
 // and CORS-open. Falls back to the last cached value if the network fails.
 
+import { fetchWithTimeout, storageGet } from './net.js';
+
 const MOTD_URL = 'https://profullstack.com/motd';
 const MOTD_TTL = 30 * 60 * 1000; // 30 min
 
 export async function fetchMotd() {
-  const { motdCache } = await chrome.storage.local.get('motdCache');
+  const { motdCache } = await storageGet('motdCache');
   if (motdCache && motdCache.text && Date.now() - motdCache.at < MOTD_TTL) {
     return motdCache.text;
   }
   try {
-    const res = await fetch(MOTD_URL, { redirect: 'follow' });
+    const res = await fetchWithTimeout(MOTD_URL, { redirect: 'follow' });
     if (!res.ok) throw new Error('HTTP ' + res.status);
     const text = (await res.text()).trim();
     await chrome.storage.local.set({ motdCache: { at: Date.now(), text } });

apps/desktop/extensions/ai-sidebar/net.js

@@ -0,0 +1,56 @@
+// Bounded I/O for anything the UI does on open.
+//
+// The new tab and the side panel both render by awaiting a chain of network and
+// storage calls. `fetch()` has no default timeout: a host that accepts the
+// connection and then never answers leaves the promise pending forever, and the
+// section waiting on it stays on its placeholder for the life of the tab — the
+// page looks frozen rather than degraded. background.js, moshpit.js and the
+// per-feed fetch already each carried their own AbortController for this
+// reason; this is that same pattern, in one place, for the rest of them.
+//
+// chrome.storage.local is bounded for the same reason: it is backed by a
+// LevelDB in the profile, and a large or damaged one can leave a get() pending.
+// A settings read that never resolves must not decide whether the UI appears.
+
+/** Network calls on a render path. Long enough for a slow host, short enough to notice. */
+export const DEFAULT_TIMEOUT_MS = 8000;
+
+/** Local storage reads. Should be instant; anything near this is already broken. */
+export const STORAGE_TIMEOUT_MS = 3000;
+
+/**
+ * fetch() that always settles. Rejects with 'timed out' rather than hanging.
+ * Pass `ms` to override the default budget.
+ */
+export async function fetchWithTimeout(url, opts = {}, ms = DEFAULT_TIMEOUT_MS) {
+  const ctrl = new AbortController();
+  const timer = setTimeout(() => ctrl.abort(), ms);
+  try {
+    return await fetch(url, { ...opts, signal: ctrl.signal });
+  } catch (e) {
+    // A caller-supplied signal aborting is the caller's business; ours is a timeout.
+    throw e?.name === 'AbortError' ? new Error('timed out') : e;
+  } finally {
+    clearTimeout(timer);
+  }
+}
+
+/**
+ * Resolve to `fallback` if `promise` hasn't settled within `ms`. Used where a
+ * missing answer is survivable and a missing render is not — the caller gets
+ * defaults and the page draws.
+ */
+export function withTimeout(promise, ms, fallback) {
+  return Promise.race([
+    Promise.resolve(promise).catch(() => fallback),
+    new Promise((resolve) => setTimeout(() => resolve(fallback), ms)),
+  ]);
+}
+
+/**
+ * chrome.storage.local.get that always settles. Returns `{}` if storage stalls,
+ * which every caller here already handles as "no value stored".
+ */
+export function storageGet(keys) {
+  return withTimeout(chrome.storage.local.get(keys), STORAGE_TIMEOUT_MS, {});
+}

apps/desktop/extensions/ai-sidebar/net.test.js

@@ -0,0 +1,74 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { fetchWithTimeout, storageGet, withTimeout } from './net.js';
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+  delete globalThis.chrome;
+});
+
+// A promise that never settles — the failure this module exists to bound.
+const forever = () => new Promise(() => {});
+
+describe('fetchWithTimeout', () => {
+  it('returns the response when the host answers', async () => {
+    vi.stubGlobal('fetch', vi.fn().mockResolvedValue({ ok: true, status: 200 }));
+    await expect(fetchWithTimeout('https://example.test')).resolves.toMatchObject({ ok: true });
+  });
+
+  it('rejects instead of hanging when the host never answers', async () => {
+    // The host accepted the connection and went quiet: without the abort this
+    // promise is pending for the life of the tab and its section never renders.
+    vi.stubGlobal('fetch', vi.fn().mockImplementation((_url, opts) =>
+      new Promise((_resolve, reject) => {
+        opts.signal.addEventListener('abort', () => {
+          const err = new Error('aborted');
+          err.name = 'AbortError';
+          reject(err);
+        });
+      })));
+    await expect(fetchWithTimeout('https://example.test', {}, 20)).rejects.toThrow('timed out');
+  });
+
+  it('passes the caller options through and adds a signal', async () => {
+    const spy = vi.fn().mockResolvedValue({ ok: true });
+    vi.stubGlobal('fetch', spy);
+    await fetchWithTimeout('https://example.test', { method: 'POST', headers: { a: 'b' } });
+    const [, opts] = spy.mock.calls[0];
+    expect(opts.method).toBe('POST');
+    expect(opts.headers).toEqual({ a: 'b' });
+    expect(opts.signal).toBeInstanceOf(AbortSignal);
+  });
+
+  it('surfaces a real network error unchanged', async () => {
+    vi.stubGlobal('fetch', vi.fn().mockRejectedValue(new Error('ERR_NAME_NOT_RESOLVED')));
+    await expect(fetchWithTimeout('https://example.test')).rejects.toThrow('ERR_NAME_NOT_RESOLVED');
+  });
+});
+
+describe('withTimeout', () => {
+  it('passes the value through when it arrives in time', async () => {
+    await expect(withTimeout(Promise.resolve('v'), 50, 'fallback')).resolves.toBe('v');
+  });
+
+  it('falls back when the promise stalls', async () => {
+    await expect(withTimeout(forever(), 10, 'fallback')).resolves.toBe('fallback');
+  });
+
+  it('falls back when the promise rejects', async () => {
+    await expect(withTimeout(Promise.reject(new Error('nope')), 50, 'fallback')).resolves.toBe('fallback');
+  });
+});
+
+describe('storageGet', () => {
+  it('returns what storage holds', async () => {
+    globalThis.chrome = { storage: { local: { get: vi.fn().mockResolvedValue({ aiConfig: { model: 'm' } }) } } };
+    await expect(storageGet('aiConfig')).resolves.toEqual({ aiConfig: { model: 'm' } });
+  });
+
+  it('returns {} rather than hanging when the profile database stalls', async () => {
+    // Callers all read this as "nothing stored" and render their default state,
+    // which is the point: a stalled read must not decide whether the UI appears.
+    globalThis.chrome = { storage: { local: { get: vi.fn().mockImplementation(forever) } } };
+    await expect(storageGet('aiConfig')).resolves.toEqual({});
+  }, 10000);
+});

apps/desktop/extensions/ai-sidebar/newtab.js

@@ -3,6 +3,7 @@ import { coinpaySignIn, coinpayState, coinpaySignOut } from './coinpay-auth.js';
 import { fetchQuotes, fetchAllScores } from './markets.js';
 import { fetchMotd } from './motd.js';
 import { getToken as btrToken, BTR_BASE } from './bittorrented.js';
+import { fetchWithTimeout, storageGet } from './net.js';
 
 const el = (id) => document.getElementById(id);
 
@@ -66,7 +67,7 @@ el('mode-web').addEventListener('click', () => setMode('web'));
 el('mode-ai').addEventListener('click', () => setMode('ai'));
 
 // Load the chosen clearnet + Tor search engines and current onion-toggle state.
-chrome.storage.local.get(['searchEngine', 'torSearchEngine', 'torEnabled']).then((v) => {
+storageGet(['searchEngine', 'torSearchEngine', 'torEnabled']).then((v) => {
   if (v.searchEngine && SEARCH_ENGINES[v.searchEngine]) searchEngine = v.searchEngine;
   if (v.torSearchEngine && TOR_SEARCH_ENGINES[v.torSearchEngine]) torSearchEngine = v.torSearchEngine;
   torEnabled = !!v.torEnabled;
@@ -151,7 +152,7 @@ async function fetchFeed(feed) {
 
 const CACHE_V = 3; // bump to invalidate caches when item shape changes / clear stale
 async function getFeedData(feeds) {
-  const { feedCache } = await chrome.storage.local.get('feedCache');
+  const { feedCache } = await storageGet('feedCache');
   if (feedCache && feedCache.v === CACHE_V && Date.now() - feedCache.at < TTL && feedCache.count === feeds.length) {
     return feedCache.data;
   }
@@ -217,14 +218,14 @@ function escAttr(s) {
 const MKT_TTL = 5 * 60 * 1000;
 
 async function renderMarkets() {
-  const { tickers } = await chrome.storage.local.get('tickers');
+  const { tickers } = await storageGet('tickers');
   const symbols = splitList(tickers ?? DEFAULT_TICKERS);
   const sec = el('markets-sec');
   if (!symbols.length) { sec.hidden = true; return; }
   sec.hidden = false;
 
   const sig = symbols.join(',');
-  const { marketCache } = await chrome.storage.local.get('marketCache');
+  const { marketCache } = await storageGet('marketCache');
   let data;
   if (marketCache && marketCache.sig === sig && Date.now() - marketCache.at < MKT_TTL) {
     data = marketCache.data;
@@ -246,14 +247,14 @@ async function renderMarkets() {
 }
 
 async function renderSports() {
-  const { leagues } = await chrome.storage.local.get('leagues');
+  const { leagues } = await storageGet('leagues');
   const keys = splitList(leagues ?? DEFAULT_LEAGUES).map((k) => k.toLowerCase());
   const sec = el('sports-sec');
   if (!keys.length) { sec.hidden = true; return; }
   sec.hidden = false;
 
   const sig = keys.join(',');
-  const { sportsCache } = await chrome.storage.local.get('sportsCache');
+  const { sportsCache } = await storageGet('sportsCache');
   let data;
   if (sportsCache && sportsCache.sig === sig && Date.now() - sportsCache.at < MKT_TTL) {
     data = sportsCache.data;
@@ -305,7 +306,7 @@ async function renderBtr() {
   if (!token) { sec.hidden = true; return; }
   let data;
   try {
-    const r = await fetch(`${BTR_BASE}/api/v1/favorites`, { headers: { authorization: `Bearer ${token}` } });
+    const r = await fetchWithTimeout(`${BTR_BASE}/api/v1/favorites`, { headers: { authorization: `Bearer ${token}` } });
     if (!r.ok) { sec.hidden = true; return; }
     data = await r.json();
   } catch { sec.hidden = true; return; }

apps/desktop/extensions/ai-sidebar/providers.js

@@ -1,6 +1,8 @@
 // Self-contained provider calling for the sidebar (mirrors
 // @tronbrowser/model-providers). Plain ESM so it loads unbundled in MV3.
 
+import { fetchWithTimeout } from './net.js';
+
 export const PROVIDERS = {
   anthropic:   { label: 'Anthropic (Claude)', baseUrl: 'https://api.anthropic.com/v1',                          anthropic: true,  keyless: false },
   openai:      { label: 'OpenAI',             baseUrl: 'https://api.openai.com/v1',                            anthropic: false, keyless: false },
@@ -49,7 +51,7 @@ export async function listModels(cfg) {
   } else if (cfg.apiKey) {
     headers['authorization'] = 'Bearer ' + cfg.apiKey;
   }
-  const res = await fetch(baseUrl + '/models', { headers });
+  const res = await fetchWithTimeout(baseUrl + '/models', { headers });
   if (!res.ok) throw new Error(cfg.provider + ' ' + res.status);
   const data = await res.json();
   return (data.data || data.models || [])