feat: add client reconnect scheduling

src/App.svelte

@@ -12,6 +12,7 @@
   let newPassword = '';
   let authError = '';
   let authBusy = false;
+  let connectionNotice = '';
   let oauthLink = '';
   let oauthIdentity: 'streamer' | 'bot' = 'streamer';
   let oauthBusy = false;
@@ -19,15 +20,29 @@
 
   async function checkServer() {
     connectionState = 'CONNECTING';
-    try {
-      const response = await fetch(`${serverAddress}/api/v1/server/info`);
-      if (!response.ok) throw new Error(`HTTP ${response.status}`);
-      const info: { server_version: string } = await response.json();
-      serverVersion = info.server_version;
-      connectionState = 'CONNECTED';
-    } catch {
-      connectionState = 'SERVER UNAVAILABLE';
+    const retryDelays = [0, 3000, 10000, 15000, 30000];
+    for (let attempt = 0; attempt < retryDelays.length; attempt += 1) {
+      if (retryDelays[attempt] > 0) {
+        connectionState = 'RECONNECTING';
+        connectionNotice = `Retry ${attempt + 1}/${retryDelays.length} in ${retryDelays[attempt] / 1000}s`;
+        await new Promise((resolve) => window.setTimeout(resolve, retryDelays[attempt]));
+      } else {
+        connectionNotice = 'Connecting to server';
+      }
+      try {
+        const response = await fetch(`${serverAddress}/api/v1/server/info`);
+        if (!response.ok) throw new Error(`HTTP ${response.status}`);
+        const info: { server_version: string } = await response.json();
+        serverVersion = info.server_version;
+        connectionState = 'CONNECTED';
+        connectionNotice = '';
+        return;
+      } catch {
+        connectionNotice = 'Server unavailable';
+      }
     }
+    connectionState = 'SERVER UNAVAILABLE';
+    connectionNotice = 'Reconnect attempts exhausted. Test connection to try again.';
   }
 
   async function login() {
@@ -126,7 +141,7 @@
         <button class:active={activeView === item} class="nav-item" onclick={() => (activeView = item)}>{item}</button>
       {/each}
     </nav>
-    <div class="app-actions"><span class:online={connectionState === 'CONNECTED'} class="connection-state">{connectionState}</span><button class="icon-button" aria-label="Settings">⚙</button></div>
+    <div class="app-actions"><span class:online={connectionState === 'CONNECTED'} class="connection-state">{connectionState}</span>{#if connectionNotice}<span class="connection-notice">{connectionNotice}</span>{/if}<button class="icon-button" aria-label="Settings">⚙</button></div>
   </header>
 
   <main class="workspace">

src/styles.css

@@ -163,6 +163,10 @@ button:hover:not(:disabled) {
   border-color: var(--ed-success);
   color: var(--ed-success);
 }
+.connection-notice {
+  color: var(--ed-dim);
+  font: 9px var(--font-data);
+}
 .icon-button,
 .secondary {
   border-color: transparent;