Update sw.js

public/sw.js

@@ -1,84 +1,50 @@
-// sw.js
+// sw.js — debug-friendly service worker
-// Drop-in service worker to tee streaming chat responses and write progress to localForage (threads_v1).
+// Replace your existing worker with this (or merge the relevant parts).
-// - Adjust TARGET_SUBSTRING if your stream URL differs.
-// - The SW writes messages tagged with `sw_streamId` to avoid clobbering unrelated messages.
-
 importScripts('https://cdn.jsdelivr.net/npm/localforage@1.10.0/dist/localforage.min.js');
 
-const TARGET_SUBSTRING = 'openrouter.ai/api/v1/chat/completions'; // change if needed
+const THREADS_KEY = 'threads_v1';
-const THREADS_KEY = 'threads_v1'; // matches your index
+const TARGET_SUBSTRING = 'openrouter.ai/api/v1/chat/completions'; // keep your real target here
-const BUFFER_SAVE_BYTES = 32 * 1024; // save every ~32KB of new data (tune)
+const LOG = (...a) => { console.log('[sw-debug]', ...a) };
-const SAVE_INTERVAL_MS = 2000; // or at least every 2s even if buffer < size
 
-// utils
+const gid = () => Math.random().toString(36).slice(2,9) + '-' + Date.now().toString(36);
-const gid = () => Math.random().toString(36).slice(2, 9) + '-' + Date.now().toString(36);
-
-function now() { return Date.now(); }
 
+// ---------- small idb helpers using localforage ----------
 async function readThreads() {
-  try {
+  try { const v = await localforage.getItem(THREADS_KEY); return Array.isArray(v) ? v : []; }
-    const v = await localforage.getItem(THREADS_KEY);
+  catch (e) { LOG('readThreads err', e); return []; }
-    return Array.isArray(v) ? v : [];
-  } catch (e) {
-    console.error('sw: idb read error', e);
-    return [];
-  }
 }
 async function writeThreads(arr) {
-  try {
+  try { await localforage.setItem(THREADS_KEY, arr); }
-    await localforage.setItem(THREADS_KEY, arr);
+  catch (e) { LOG('writeThreads err', e); throw e; }
-  } catch (e) {
-    console.error('sw: idb write error', e);
-    throw e;
-  }
 }
-
-// choose a thread to attach progress to
 function pickThread(threads) {
-  if (!threads || threads.length === 0) return null;
+  if (!threads || !threads.length) return null;
   // prefer newest updatedAt
   threads.sort((a,b) => (b.updatedAt||0) - (a.updatedAt||0));
   return threads[0];
 }
-
-// update or append assistant message for streamId
 async function upsertStreamMessage(streamId, text, meta = {}) {
-  // read-modify-write
   const threads = await readThreads();
   let th = pickThread(threads);
-  const createdNow = now();
+  const now = Date.now();
-
   if (!th) {
-    // create a new thread if none found
+    th = { id: 'sw-' + gid(), title: 'Missed while backgrounded', pinned: false, updatedAt: now, messages: [] };
-    th = {
-      id: 'sw-' + gid(),
-      title: 'Missed while backgrounded',
-      pinned: false,
-      updatedAt: createdNow,
-      messages: []
-    };
     threads.unshift(th);
   }
-
-  // look for existing message with sw_streamId
   let msgIndex = -1;
   for (let i = th.messages.length - 1; i >= 0; i--) {
-    const m = th.messages[i];
+    if (th.messages[i] && th.messages[i].sw_streamId === streamId) { msgIndex = i; break; }
-    if (m && m.sw_streamId === streamId) { msgIndex = i; break; }
   }
-
   const contentParts = [{ type: 'text', text }];
   if (msgIndex >= 0) {
-    // update message content
+    const ex = th.messages[msgIndex];
-    const existing = th.messages[msgIndex];
+    ex.content = text;
-    existing.content = text;
+    ex.contentParts = contentParts;
-    existing.contentParts = contentParts;
+    ex.updatedAt = now;
-    existing.updatedAt = createdNow;
+    ex._sw_lastSave = now;
-    existing._sw_lastSave = createdNow;
+    ex._sw_meta = Object.assign({}, ex._sw_meta || {}, meta);
-    existing._sw_meta = Object.assign({}, existing._sw_meta || {}, meta);
   } else {
-    // append new assistant message (tag with sw_streamId)
+    th.messages.push({
-    const msg = {
       id: 'swmsg-' + gid(),
       role: 'assistant',
       content: text,
@@ -86,190 +52,194 @@ async function upsertStreamMessage(streamId, text, meta = {}) {
       kind: 'assistant',
       sw_saved: true,
       sw_streamId: streamId,
-      createdAt: createdNow,
+      createdAt: now,
-      updatedAt: createdNow,
+      updatedAt: now,
-      _sw_meta: Object.assign({}, meta)
+      _sw_meta: meta
-    };
+    });
-    th.messages.push(msg);
   }
-  th.updatedAt = createdNow;
+  th.updatedAt = now;
-
-  // write back
   await writeThreads(threads);
   return { threadId: th.id };
 }
-
 async function finalizeStream(streamId, meta = {}) {
-  // mark the message as complete; put complete flag in _sw_meta
   const threads = await readThreads();
   const th = pickThread(threads);
   if (!th) return;
   for (let i = th.messages.length - 1; i >= 0; i--) {
     const m = th.messages[i];
     if (m && m.sw_streamId === streamId) {
-      m._sw_meta = Object.assign({}, m._sw_meta || {}, meta, { completeAt: now() });
+      m._sw_meta = Object.assign({}, m._sw_meta || {}, meta, { completeAt: Date.now() });
-      m.updatedAt = now();
+      m.updatedAt = Date.now();
-      th.updatedAt = now();
+      th.updatedAt = Date.now();
       break;
     }
   }
   await writeThreads(threads);
-  // inform clients
+  // notify clients
   const clientsList = await self.clients.matchAll({ includeUncontrolled: true, type: 'window' });
-  clientsList.forEach(c => {
+  for (const c of clientsList) {
-    try { c.postMessage({ type: 'stream-saved', streamId, meta }); } catch(e){ }
+    try { c.postMessage({ type: 'stream-saved', streamId, meta }); } catch(e) {}
-  });
+  }
 }
 
-// notify utility
+// ---------- helpers ----------
+async function listSwStreams() {
+  const threads = await readThreads();
+  const found = [];
+  for (const t of (threads || [])) {
+    for (const m of (t.messages || [])) {
+      if (m && m.sw_streamId) found.push({
+        threadId: t.id,
+        threadTitle: t.title,
+        messageId: m.id,
+        sw_streamId: m.sw_streamId,
+        snippet: (m.content||'').slice(0,200),
+        updatedAt: m.updatedAt
+      });
+    }
+  }
+  return found;
+}
 async function notifyClients(msg) {
   try {
     const list = await self.clients.matchAll({ includeUncontrolled: true, type: 'window' });
     for (const c of list) {
-      try { c.postMessage(msg); } catch (e) {}
+      try { c.postMessage(msg); } catch(e) {}
-    }
-  } catch (e) {
-    /* ignore */
     }
+  } catch(e) { LOG('notifyClients err', e); }
 }
 
-// fetch handler: tee and save
+// ---------- install/activate ----------
+self.addEventListener('install', e => { self.skipWaiting(); });
+self.addEventListener('activate', e => { e.waitUntil(self.clients.claim()); });
+
+// ---------- fetch: keep existing behavior for your real target, plus a debug probe ----------
 self.addEventListener('fetch', event => {
-  try {
+  const reqUrl = event.request.url || '';
-    const url = event.request.url || '';
+  // debug probe route — the sune will call /__sw_tee_test to force a tee test:
-    if (!url.includes(TARGET_SUBSTRING)) {
+  if (new URL(reqUrl).pathname === '/__sw_tee_test') {
-      return; // not our target; let it pass through
-    }
-
     event.respondWith((async () => {
-      // perform the upstream fetch
+      const probeId = new URL(reqUrl).searchParams.get('probeId') || gid();
-      const upstream = await fetch(event.request);
+      LOG('Received tee-test probe', probeId);
 
-      // if no streaming body, return upstream
+      // create a simulated streaming source inside the SW
-      if (!upstream || !upstream.body) return upstream;
+      const encoder = new TextEncoder();
-
+      const stream = new ReadableStream({
-      const streamId = 'swstream-' + gid();
+        start(ctrl) {
-      const headers = new Headers(upstream.headers);
+          let count = 0;
-
+          const id = setInterval(() => {
-      // tee so one stream goes to client, one consumed by SW
+            count++;
-      const [clientStream, swStream] = upstream.body.tee();
+            const chunk = `probe(${probeId}) chunk ${count}\n`;
-
+            ctrl.enqueue(encoder.encode(chunk));
-      // background save logic:
+            // after 6 chunks stop
-      const savePromise = (async () => {
+            if (count >= 6) { clearInterval(id); ctrl.close(); }
-        try {
+          }, 300);
-          const reader = swStream.getReader();
-          const dec = new TextDecoder('utf-8');
-          let bufferText = '';
-          let bufferedBytes = 0;
-          let lastSaveAt = 0;
-
-          const saveIfNeeded = async (force = false) => {
-            const nowMs = Date.now();
-            if (!force && bufferedBytes < BUFFER_SAVE_BYTES && (nowMs - lastSaveAt) < SAVE_INTERVAL_MS) return;
-            // upsert into threads
-            try {
-              await upsertStreamMessage(streamId, bufferText, { partialBytes: bufferedBytes, savedAt: Date.now() });
-              lastSaveAt = nowMs;
-            } catch (e) {
-              console.error('sw: upsert save error', e);
         }
-          };
+      });
 
+      // tee the generated stream: one branch to client, one branch for SW consumption/save
+      const [clientBranch, swBranch] = stream.tee();
+
+      // in SW consume swBranch and write to localforage
+      (async () => {
+        try {
+          const reader = swBranch.getReader();
+          const dec = new TextDecoder('utf-8');
+          let collected = '';
+          let bytes = 0;
           while (true) {
             const { value, done } = await reader.read();
             if (done) break;
-            // value is Uint8Array; decode incrementally
             const chunkText = dec.decode(value, { stream: true });
-            bufferText += chunkText;
+            collected += chunkText;
-            bufferedBytes += (value && value.byteLength) ? value.byteLength : chunkText.length;
+            bytes += (value && value.byteLength) ? value.byteLength : chunkText.length;
-            // try saving periodically
+            // periodic save: write the collected so far into threads_v1 under probe stream id
-            await saveIfNeeded(false);
+            await upsertStreamMessage('probe-' + probeId, collected, { probeId, bytesSoFar: bytes });
+            // notify clients incrementally
+            await notifyClients({ type: 'tee-probe-chunk', probeId, bytes, snippet: chunkText.slice(0,200) });
           }
-
+          await finalizeStream('probe-' + probeId, { totalBytes: bytes, probeId });
-          // final save + finalize
+          LOG('tee-probe: save complete', probeId, 'bytes', bytes);
-          await saveIfNeeded(true);
+          await notifyClients({ type: 'tee-probe-complete', probeId, totalBytes: bytes });
-          await finalizeStream(streamId, { totalBytes: bufferedBytes });
         } catch (err) {
-          console.error('sw: error saving stream', err);
+          LOG('tee-probe save error', err);
-          // try to mark failure
+          await notifyClients({ type: 'tee-probe-error', probeId, error: String(err) });
-          try { await finalizeStream(streamId, { error: String(err) }); } catch(e){ }
         }
       })();
 
-      // keep worker alive while saving
+      // return the client branch as a streaming response
-      event.waitUntil(savePromise);
+      return new Response(clientBranch, { status: 200, headers: { 'Content-Type': 'text/plain; charset=utf-8' } });
-
-      // return response to client using the clientStream
-      return new Response(clientStream, {
-        status: upstream.status,
-        statusText: upstream.statusText,
-        headers
-      });
     })());
-  } catch (err) {
+    return;
-    // if anything goes wrong, let the request fallback
-    console.error('sw: fetch handler error', err);
   }
+
+  // your production streaming intercept — minimal example:
+  if (reqUrl.includes(TARGET_SUBSTRING)) {
+    // let your existing logic run — simple pass-through or tee logic you already had
+    // For demonstration, do a straight throughfetch (or optionally tee/save like earlier example)
+    event.respondWith(fetch(event.request));
+    return;
+  }
+
+  // not handled by SW: let it go
 });
 
-// ping/pong: support both port reply and broadcast reply
+// ---------- message handling: richer PING/DIAG ----------
 self.addEventListener('message', event => {
   const data = event.data || {};
   try {
     if (data && data.type === 'PING') {
-      // prefer replying on message port if provided
+      // reply with diagnostic info (prefer port)
-      if (event.ports && event.ports[0]) {
-        try {
-          event.ports[0].postMessage({ type: 'PONG', ts: Date.now(), ok: true });
-        } catch (e) { /* ignore */ }
-      } else {
-        // fallback: send message back to the source (if possible) or broadcast to clients
-        if (event.source && typeof event.source.postMessage === 'function') {
-          try { event.source.postMessage({ type: 'PONG', ts: Date.now(), ok: true }); } catch(e) {}
-        } else {
-          notifyClients({ type: 'PONG', ts: Date.now(), ok: true });
-        }
-      }
-      return;
-    }
-
-    // support a client request to list SW-saved streams or threads
-    if (data && data.type === 'list-sw-streams') {
       (async () => {
-        const threads = await readThreads();
+        const streams = await listSwStreams();
-        // collect messages that have sw_streamId
+        const info = {
-        const found = [];
+          type: 'PONG',
-        for (const t of (threads||[])) {
+          ts: Date.now(),
-          for (const m of (t.messages||[])) {
+          ok: true,
-            if (m && m.sw_streamId) found.push({ threadId: t.id, threadTitle: t.title, messageId: m.id, sw_streamId: m.sw_streamId, summary: (m.content||'').slice(0,200), updatedAt: m.updatedAt });
+          canTeeProbe: true,
-          }
+          savedStreamCount: streams.length,
-        }
+          lastSaved: streams[0] || null
-        // reply to the source if possible, otherwise broadcast
+        };
         if (event.ports && event.ports[0]) {
-          event.ports[0].postMessage({ type: 'sw-streams-list', streams: found });
+          event.ports[0].postMessage(info);
         } else if (event.source && typeof event.source.postMessage === 'function') {
-          event.source.postMessage({ type: 'sw-streams-list', streams: found });
+          event.source.postMessage(info);
         } else {
-          notifyClients({ type: 'sw-streams-list', streams: found });
+          await notifyClients(info);
         }
       })();
       return;
     }
 
-    // other messages — ignore or log
+    if (data && data.type === 'list-sw-streams') {
+      (async () => {
+        const streams = await listSwStreams();
+        const payload = { type: 'sw-streams-list', streams };
+        if (event.ports && event.ports[0]) event.ports[0].postMessage(payload);
+        else if (event.source && typeof event.source.postMessage === 'function') event.source.postMessage(payload);
+        else await notifyClients(payload);
+      })();
+      return;
+    }
+
+    // allow direct command to run a tee probe from client (alternative path)
+    if (data && data.type === 'run-tee-probe' && data.probeId) {
+      // reply that probe will be run — the fetch handler will simulate the stream
+      (async () => {
+        try {
+          const probeUrl = '/__sw_tee_test?probeId=' + encodeURIComponent(data.probeId);
+          // perform fetch from SW to itself to cause internal handling (not required — client can call the endpoint)
+          // but we simply reply OK and let the client hit the endpoint so the client receives the response body
+          if (event.ports && event.ports[0]) event.ports[0].postMessage({ type:'run-tee-probe-ok', probeId: data.probeId, probeUrl });
+          else if (event.source && typeof event.source.postMessage === 'function') event.source.postMessage({ type:'run-tee-probe-ok', probeId: data.probeId, probeUrl });
         } catch (e) {
-    console.error('sw: message handler error', e);
+          if (event.ports && event.ports[0]) event.ports[0].postMessage({ type:'run-tee-probe-error', error: String(e) });
+        }
+      })();
+      return;
+    }
+
+  } catch (err) {
+    LOG('message handler error', err);
   }
 });
-
-// basic install/activate to claim clients quickly
-self.addEventListener('install', event => {
-  self.skipWaiting();
-});
-self.addEventListener('activate', event => {
-  event.waitUntil((async () => {
-    try {
-      await self.clients.claim();
-    } catch(e) { /* ignore */ }
-  })());
-});