diff --git a/frontend/index.html b/frontend/index.html
index bf4c161..6c27723 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -161,6 +161,7 @@ textarea { resize: vertical; min-height: 120px; }
 
 <script src="static/markdown.js"></script>
 <script src="static/commands.js"></script>
+<script src="static/widgets.js"></script>
 <script>
 (function(){
   const qs = (s, el=document) => el.querySelector(s);
@@ -361,20 +362,7 @@ textarea { resize: vertical; min-height: 120px; }
   tickWidgets();
 
   /* Widgets */
-  async function updateRepoMix() {
-    const el = qs('#repo-mix');
-    try {
-      const res = await fetch('api/v1/context', { headers: { Accept: 'application/json' } });
-      const data = await res.json();
-      const repos = data.repos || [];
-      const issues = (data.issues||[]).filter(i=>i.state==='open');
-      const prs = data.pull_requests || [];
-      el.innerHTML = '<div class="kv"><div class="label">Repos</div><div class="value">' + repos.length + '</div><div class="label">Open issues</div><div class="value">' + issues.length + '</div><div class="label">Open PRs</div><div class="value">' + prs.length + '</div></div>';
-    } catch (e) {
-      el.innerHTML = '<div class="muted">Widget unavailable.</div>';
-    }
-  }
-  updateRepoMix();
+  updateRepoMix(qs('#repo-mix'), fetch);
 
   function widgetTick() { const el=qs('#widget-clock'); if(el) el.textContent = fmt(new Date()); }
   setInterval(widgetTick, 1000);
diff --git a/frontend/widgets.js b/frontend/widgets.js
new file mode 100644
index 0000000..92e47ef
--- /dev/null
+++ b/frontend/widgets.js
@@ -0,0 +1,19 @@
+async function updateRepoMix(element, fetchContext = fetch) {
+  try {
+    const response = await fetchContext('api/v1/context', {
+      headers: { Accept: 'application/json' },
+    });
+    if (!response.ok) throw new Error('HTTP ' + response.status);
+    const data = await response.json();
+    const repos = data.repos || [];
+    const issues = (data.issues || []).filter((issue) => issue.state === 'open');
+    const pullRequests = data.pull_requests || [];
+    element.innerHTML = '<div class="kv"><div class="label">Repos</div><div class="value">' + repos.length + '</div><div class="label">Open issues</div><div class="value">' + issues.length + '</div><div class="label">Open PRs</div><div class="value">' + pullRequests.length + '</div></div>';
+  } catch (error) {
+    element.innerHTML = '<div class="muted">Widget unavailable.</div>';
+  }
+}
+
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = updateRepoMix;
+}
diff --git a/tests/test_widgets.py b/tests/test_widgets.py
index 69e6794..6fd68f6 100644
--- a/tests/test_widgets.py
+++ b/tests/test_widgets.py
@@ -1,8 +1,15 @@
+import json
+import subprocess
+from pathlib import Path
+
 import pytest
 
 from src.views import dashboard
 
 
+WIDGETS = Path(__file__).parents[1] / "frontend" / "widgets.js"
+
+
 @pytest.mark.anyio
 async def test_dashboard_renders_repo_mix_placeholder_before_javascript_runs():
     html = await dashboard()
@@ -16,3 +23,25 @@ async def test_dashboard_marks_fallback_context_as_degraded_instead_of_live():
     html = await dashboard()
 
     assert "data.error ? 'Degraded · ' + data.error : 'Live · updated just now'" in html
+
+
+def test_repo_mix_reports_unavailable_for_failed_context_response():
+    script = f"""
+const updateRepoMix = require({json.dumps(str(WIDGETS))});
+const element = {{ innerHTML: 'stale counts' }};
+const failedFetch = async () => ({{
+  ok: false,
+  status: 503,
+  json: async () => ({{ error: 'upstream unavailable' }}),
+}});
+
+updateRepoMix(element, failedFetch).then(() => {{
+  if (!element.innerHTML.includes('Widget unavailable.')) {{
+    throw new Error(`expected unavailable state, got: ${{element.innerHTML}}`);
+  }}
+}});
+"""
+
+    subprocess.run(
+        ["node", "-e", script], check=True, capture_output=True, text=True
+    )