diff --git a/.gitea/workflows/build-sidecar.yml b/.gitea/workflows/build-sidecar.yml
index 954c327..66babee 100644
--- a/.gitea/workflows/build-sidecar.yml
+++ b/.gitea/workflows/build-sidecar.yml
@@ -365,11 +365,14 @@ jobs:
         run: brew install portaudio
 
       - name: Build sidecar (CPU)
+        env:
+          UV_NO_SOURCES: "1"
         run: |
-          # --no-sources bypasses pyproject.toml's [tool.uv.sources] which forces
-          # torch from the CUDA index (no macOS ARM wheels there)
-          # Default PyPI torch includes MPS (Apple Silicon GPU) support
-          uv sync --no-sources
+          # UV_NO_SOURCES bypasses pyproject.toml's [tool.uv.sources] which forces
+          # torch from the CUDA index (no macOS ARM wheels there).
+          # Applies to both uv sync AND uv run (which re-resolves).
+          # Default PyPI torch includes MPS (Apple Silicon GPU) support.
+          uv sync
           uv run pyinstaller local-transcription-headless.spec
 
       - name: Package sidecar (CPU)
diff --git a/src/App.svelte b/src/App.svelte
index b7d0aa1..eef989b 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -12,6 +12,8 @@
 
   let obsDisplayUrl = $derived(backendStore.obsUrl);
   let syncDisplayUrl = $derived(backendStore.syncUrl);
+  let isConnected = $derived(backendStore.connectionState === "connected");
+  let connectionState = $derived(backendStore.connectionState);
 
   function openSettings() {
     showSettings = true;
@@ -31,33 +33,120 @@
   });
 </script>
 
-<div class="app-shell">
-  <Header onSettingsClick={openSettings} />
-  <StatusBar />
+{#if !isConnected}
+  <div class="connecting-overlay">
+    <div class="connecting-content">
+      <div class="connecting-icon">
+        {#if connectionState === "error"}
+          <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#e74c3c" stroke-width="2">
+            <circle cx="12" cy="12" r="10"/>
+            <line x1="15" y1="9" x2="9" y2="15"/>
+            <line x1="9" y1="9" x2="15" y2="15"/>
+          </svg>
+        {:else}
+          <div class="spinner"></div>
+        {/if}
+      </div>
+      <h2>Local Transcription</h2>
+      {#if connectionState === "error"}
+        <p>Cannot connect to backend</p>
+        <p class="hint">Make sure the Python backend is running:<br>
+          <code>uv run python -m backend.main_headless</code></p>
+      {:else}
+        <p>Connecting to backend...</p>
+      {/if}
+    </div>
+  </div>
+{:else}
+  <div class="app-shell">
+    <Header onSettingsClick={openSettings} />
+    <StatusBar />
 
-  <div class="display-links">
-    <span class="link-label">OBS:</span>
-    <a href={obsDisplayUrl} target="_blank" rel="noopener">{obsDisplayUrl}</a>
-    {#if syncDisplayUrl}
-      <span class="link-separator">|</span>
-      <span class="link-label">Sync:</span>
-      <a href={syncDisplayUrl} target="_blank" rel="noopener"
-        >{syncDisplayUrl}</a
-      >
-    {/if}
+    <div class="display-links">
+      <span class="link-label">OBS:</span>
+      <a href={obsDisplayUrl} target="_blank" rel="noopener">{obsDisplayUrl}</a>
+      {#if syncDisplayUrl}
+        <span class="link-separator">|</span>
+        <span class="link-label">Sync:</span>
+        <a href={syncDisplayUrl} target="_blank" rel="noopener"
+          >{syncDisplayUrl}</a
+        >
+      {/if}
+    </div>
+
+    <TranscriptionDisplay />
+    <Controls />
+
+    <div class="version-label">v{backendStore.version}</div>
   </div>
 
-  <TranscriptionDisplay />
-  <Controls />
-
-  <div class="version-label">v{backendStore.version}</div>
-</div>
-
-{#if showSettings}
-  <Settings onClose={closeSettings} />
+  {#if showSettings}
+    <Settings onClose={closeSettings} />
+  {/if}
 {/if}
 
 <style>
+  .connecting-overlay {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    width: 100%;
+    background-color: var(--bg-primary);
+  }
+
+  .connecting-content {
+    text-align: center;
+    color: var(--text-primary);
+  }
+
+  .connecting-content h2 {
+    margin: 16px 0 8px;
+    font-size: 20px;
+    font-weight: 600;
+  }
+
+  .connecting-content p {
+    margin: 4px 0;
+    color: var(--text-secondary);
+    font-size: 14px;
+  }
+
+  .connecting-content .hint {
+    margin-top: 16px;
+    font-size: 12px;
+    color: var(--text-muted);
+  }
+
+  .connecting-content code {
+    display: inline-block;
+    margin-top: 4px;
+    padding: 4px 8px;
+    background: var(--bg-tertiary);
+    border-radius: 4px;
+    font-size: 12px;
+    color: var(--text-primary);
+  }
+
+  .connecting-icon {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 8px;
+  }
+
+  .spinner {
+    width: 40px;
+    height: 40px;
+    border: 3px solid var(--border-color);
+    border-top-color: var(--accent-color, #4CAF50);
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+  }
+
+  @keyframes spin {
+    to { transform: rotate(360deg); }
+  }
+
   .app-shell {
     display: flex;
     flex-direction: column;