you need to get the handle each time

app.js

@@ -27,15 +27,25 @@ async function PickHandle()
 }
 async function LoadHandleFiles()
 {
-    try
+    console.log("fetching room.js", handle);
+    if(handle)
     {
-        const module = await import("./fsx/data/room.js"+"");
-        /** @type {Record<string, TYPES.GraphParts>} */
-        const read = module.default();
-        rooms.val = read;
+        try
+        {
+            const module = await import("./graph/room.js"+"?bust="+Math.random());
+            /** @type {Record<string, TYPES.GraphParts>} */
+            const read = module.default();
+            rooms.val = read;
+        }
+        catch(_e)
+        {
+            console.log("the handle exists, but the request failed. the service work must not be ready yet.")
+            rooms.val = {};
+        }
     }
-    catch(_e)
+    else
     {
+        console.log("no fs handle has been set, cannot get room graph")
         rooms.val = {};
     }
 }
@@ -49,7 +59,7 @@ await LoadHandleFiles();
 /** @type {(path:string[], part:string, time:number, data:string)=>void} */
 async function WRITE(path, part, time, data)
 {
-    const fileHandle = await FSHandle.drilldown(handle, path, true);
+    const fileHandle = await FSHandle.Dig(handle, path, true);
     if(fileHandle)
     {
         const file  = await fileHandle.getFile();

graph/graph.js

@@ -1,4 +1,5 @@
 /** @import * as TYPES from "./types.ts" */
+import * as FSAccess from "../store-directory-handle.js";
 
 /** @type {TYPES.GraphBuilder} */
 export function Room({user, role, part, desk, pass})
@@ -118,10 +119,12 @@ export function Room({user, role, part, desk, pass})
                 {
                     const [userID, userObject] = userData[i];
                     try
-                    {
-                        const resp = await fetch(`./fsx/room/${context.Path}/${passID}/${userID}`);
+                    {   
+                        const handle = await FSAccess.getDirectoryHandle();
+                        const text = await FSAccess.Read(handle, ["store", context.Path, passID, userID+".json"]);
+                        console.log("json loaded", text);
                         /** @type {TYPES.UserPassFile} */
-                        const json = await resp.json();
+                        const json = JSON.parse(text);
                         
                         Object.entries(json).forEach(([partID, payload])=>{
 

service-worker.js

@@ -1,9 +1,19 @@
 import * as FSAccess from "./store-directory-handle.js";
 
-self.addEventListener('install', ()=> self.skipWaiting()); // Activate worker immediately);
-self.addEventListener('activate', ()=> self.clients.claim()); // Become available to all pages);
+self.addEventListener('install', ()=>{console.log("SW INSTALL"); return self.skipWaiting()}); // Activate worker immediately);
+self.addEventListener('activate', ()=>{
+  console.log("SW ACTIVATE");
+  return self.clients.claim();
+}); // Become available to all pages);
 self.addEventListener('fetch', (event) =>event.respondWith(Interceptor(event)));
 
+const options = {
+  headers: {
+    'Content-Type': 'application/javascript',
+    'Cache-Control': 'no-cache'
+  }
+}
+
 /** @type {(event:{request:Request})=>Promise<Response>} */
 async function Interceptor(event)
 {
@@ -11,65 +21,19 @@ async function Interceptor(event)
   const pathname = url.pathname.substring(1);
   let parts = pathname.split("/");
 
-  if(parts[0] == "fsx")
+  if(parts[0] == "graph")
   {
-    parts = parts.slice(1);
     console.log("intercept:", pathname);
 
-    if(parts[0] == "room")
-    {
-      parts[parts.length-1] = parts[parts.length-1]+".json";
-    }
-
     const handle = await FSAccess.getDirectoryHandle();
-    if(handle)
+    const text = await FSAccess.Read(handle, parts);
+    if(text)
     {
-      if(event.request.method == "PUT")
-      {
-        const body = await event.request.text();
-        console.log("PUT intercept", parts, body);
-        const fileHandle = await FSAccess.drilldown(handle, parts, true);
-
-        if(fileHandle)
-        {
-          
-          const writeable = await fileHandle.createWritable();
-          await writeable.write(body);
-          await writeable.close();
-          return new Response("OK", {
-            headers: {
-              'Content-Type': 'application/javascript',
-              'Cache-Control': 'no-cache'
-            }
-          });
-        }
-        else
-        {
-          return new Response("404", {status:404});
-        }
-      }
-
-      const fileHandle = await FSAccess.drilldown(handle, parts);
-      if(fileHandle)
-      {
-        const file = await fileHandle.getFile();
-        const content = await file.text();
-
-        return new Response(content, {
-          headers: {
-            'Content-Type': 'application/javascript',
-            'Cache-Control': 'no-cache'
-          }
-        });
-      }
+        return new Response(text, options);
     }
 
-    console.log("couldnt find:", pathname);
-    return new Response("404", {status:404});
-    
-  }
-  else
-  {
-    return fetch(event.request);
   }
+
+  return fetch(event.request);
+
 }

store-directory-handle.js

@@ -17,17 +17,22 @@ export async function setDirectoryHandle(handle) {
   const db = await openDB();
   const tx = db.transaction('handles', 'readwrite');
   tx.objectStore('handles').put(handle, 'user-folder');
+  console.log("handle set", handle);
   await tx.done;
 }
 
+
 // 📂 Retrieve a directory handle
 /** @type {()=>Promise<FileSystemDirectoryHandle|false>} */
 export async function getDirectoryHandle() {
+
   const db = await openDB();
   const tx = db.transaction('handles', 'readonly');
   return new Promise((resolve, reject) => {
     const getRequest = tx.objectStore('handles').get('user-folder');
-    getRequest.onsuccess = () => resolve(getRequest.result);
+    getRequest.onsuccess = () => {
+      return resolve(getRequest.result);
+    }
     getRequest.onerror = () => {
       console.error('Error retrieving directory handle:', getRequest.error);
       return resolve(false);
@@ -36,7 +41,7 @@ export async function getDirectoryHandle() {
 }
 
 /** @type {(handle:FileSystemDirectoryHandle, parts:string[], create?:boolean)=>Promise<FileSystemFileHandle|false>} */
-export async function drilldown(handle, parts, create=false)
+export async function Dig(handle, parts, create=false)
 {
   try
   {
@@ -54,6 +59,36 @@ export async function drilldown(handle, parts, create=false)
   }
 }
 
+/** @type {(handle:FileSystemDirectoryHandle, parts:string[])=>Promise<string|false>} */
+export async function Read(handle, parts)
+{
+
+  const fileHandle = await Dig(handle, parts);
+  if(fileHandle)
+  {
+    const file = await fileHandle.getFile();
+    return await file.text();
+  }
+
+  return false;
+}
+
+/** @type {(handle:FileSystemDirectoryHandle, parts:string[], text:string)=>Promise<boolean>} */
+export async function Write(handle, parts, text)
+{
+  const fileHandle = await Dig(handle, parts);
+  if(fileHandle)
+  {
+    const writeable = await fileHandle.createWritable();
+    await writeable.write(text);
+    await writeable.close();
+    return true;
+  }
+  return false;
+}
+
+
+
 // // 🔐 Check or request permission
 // async function verifyPermission(handle, mode = 'readwrite') {
 //   const opts = { mode };