From 63147a1d528ade1e305d9148145d609c3a4b38bc Mon Sep 17 00:00:00 2001
From: multipleof4 <planetrenox@protonmail.com>
Date: Fri, 5 Sep 2025 11:17:20 -0700
Subject: [PATCH] Sync: Update sune 'StorageManager'

---
 storage.sune | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/storage.sune b/storage.sune
index ecc96a7..a0a5345 100644
--- a/storage.sune
+++ b/storage.sune
@@ -5,7 +5,7 @@
     "pinned": false,
     "avatar": "",
     "url": "gh://sune-org/store@main/storage.sune",
-    "updatedAt": 1756931131942,
+    "updatedAt": 1757096143199,
     "settings": {
       "model": "openai/gpt-5",
       "temperature": 1,
@@ -20,9 +20,10 @@
       "verbosity": "",
       "reasoning_effort": "default",
       "system_prompt": "",
-      "html": "<!-- Sune: Storage Inspector -->\n<div id=\"storage-inspector-sune\" class=\"w-full mx-auto max-w-none p-3 sm:p-4 bg-white rounded-lg border border-gray-200 shadow-sm text-sm\">\n    <div class=\"flex items-center justify-between mb-4\">\n        <h2 class=\"text-lg font-semibold text-gray-800 flex items-center gap-2\">\n            <i data-lucide=\"database\" class=\"h-5 w-5\"></i>\n            <span>Storage Inspector</span>\n        </h2>\n        <button id=\"si-refresh-btn\" class=\"p-2 rounded-lg hover:bg-gray-100 active:bg-gray-200 transition-colors\">\n            <i data-lucide=\"refresh-cw\" class=\"h-5 w-5 text-gray-600\"></i>\n        </button>\n    </div>\n\n    <!-- Storage Overview -->\n    <div id=\"si-overview\" class=\"mb-4 p-4 bg-gray-50 rounded-lg border border-gray-200\">\n        <h3 class=\"font-medium text-gray-700 mb-2\">Device Storage Quota</h3>\n        <div id=\"si-overview-content\" class=\"space-y-2\">\n            <p class=\"text-xs text-gray-500\">Calculating...</p>\n        </div>\n    </div>\n\n    <!-- Tabs -->\n    <div class=\"border-b border-gray-200 mb-4\">\n        <nav class=\"-mb-px flex space-x-4\" aria-label=\"Tabs\">\n            <button id=\"si-tab-ls\" data-tab=\"ls\" class=\"si-tab-btn whitespace-nowrap py-3 px-1 border-b-2 font-medium border-slate-600 text-slate-700\">\n                localStorage\n            </button>\n            <button id=\"si-tab-idb\" data-tab=\"idb\" class=\"si-tab-btn whitespace-nowrap py-3 px-1 border-b-2 font-medium border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300\">\n                IndexedDB (localforage)\n            </button>\n        </nav>\n    </div>\n\n    <!-- Loading Indicator -->\n    <div id=\"si-loading\" class=\"hidden text-center p-8\">\n        <p class=\"text-gray-500 flex items-center justify-center gap-2\">\n            <i data-lucide=\"loader\" class=\"h-5 w-5 animate-spin\"></i>\n            <span>Inspecting storage...</span>\n        </p>\n    </div>\n    \n    <!-- Content Panels -->\n    <div id=\"si-panels\">\n        <div id=\"si-panel-ls\" class=\"si-panel space-y-2\">\n            <!-- localStorage content will be injected here -->\n        </div>\n        <div id=\"si-panel-idb\" class=\"si-panel hidden space-y-2\">\n            <!-- IndexedDB content will be injected here -->\n        </div>\n    </div>\n\n    <script>\n        (() => {\n            const suneId = 'storage-inspector-sune';\n            const root = document.getElementById(suneId);\n            if (!root) return;\n\n            const overviewEl = root.querySelector('#si-overview-content');\n            const refreshBtn = root.querySelector('#si-refresh-btn');\n            const loadingEl = root.querySelector('#si-loading');\n            const panelsContainer = root.querySelector('#si-panels');\n            const tabs = {\n                ls: { btn: root.querySelector('#si-tab-ls'), panel: root.querySelector('#si-panel-ls') },\n                idb: { btn: root.querySelector('#si-tab-idb'), panel: root.querySelector('#si-panel-idb') }\n            };\n\n            let worker;\n\n            // --- Utility Functions ---\n            const formatBytes = (bytes, decimals = 2) => {\n                if (bytes === 0) return '0 Bytes';\n                const k = 1024;\n                const dm = decimals < 0 ? 0 : decimals;\n                const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];\n                const i = Math.floor(Math.log(bytes) / Math.log(k));\n                return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];\n            };\n\n            const sanitizeHTML = (str) => {\n                const temp = document.createElement('div');\n                temp.textContent = str;\n                return temp.innerHTML;\n            };\n\n            // --- Worker Setup ---\n            const createWorker = () => {\n                const workerCode = `\n                    self.onmessage = (e) => {\n                        const { task, data } = e.data;\n                        if (task === 'calculateSizes') {\n                            const results = {\n                                localStorage: { items: [], totalSize: 0 },\n                                indexedDB: { items: [], totalSize: 0 }\n                            };\n\n                            const calculateSize = (value) => {\n                                // Using Blob size is more accurate for byte representation\n                                try {\n                                    return new Blob([JSON.stringify(value)]).size;\n                                } catch (err) {\n                                    return new Blob([String(value)]).size;\n                                }\n                            };\n\n                            // Process localStorage\n                            if (data.localStorage) {\n                                for (const item of data.localStorage) {\n                                    const size = calculateSize(item.value);\n                                    results.localStorage.items.push({ ...item, size });\n                                    results.localStorage.totalSize += size;\n                                }\n                                results.localStorage.items.sort((a, b) => b.size - a.size);\n                            }\n\n                            // Process IndexedDB\n                            if (data.indexedDB) {\n                                for (const item of data.indexedDB) {\n                                    const size = calculateSize(item.value);\n                                    results.indexedDB.items.push({ ...item, size });\n                                    results.indexedDB.totalSize += size;\n                                }\n                                results.indexedDB.items.sort((a, b) => b.size - a.size);\n                            }\n                            \n                            self.postMessage(results);\n                        }\n                    };\n                `;\n                const blob = new Blob([workerCode], { type: 'application/javascript' });\n                return new Worker(URL.createObjectURL(blob));\n            };\n            \n            // --- UI Rendering ---\n            const renderItem = (item, type, dbName = '') => {\n                const valueStr = JSON.stringify(item.value, null, 2);\n                const valuePreview = valueStr.length > 100 ? valueStr.substring(0, 100) + '...' : valueStr;\n\n                return `\n                    <div class=\"border border-gray-200 rounded-lg overflow-hidden\">\n                        <details class=\"group\">\n                            <summary class=\"flex items-center justify-between p-3 cursor-pointer hover:bg-gray-50 list-none\">\n                                <div class=\"flex items-center gap-3 overflow-hidden\">\n                                    <span class=\"font-mono text-xs bg-gray-100 text-gray-700 px-2 py-1 rounded\">${sanitizeHTML(item.key)}</span>\n                                    ${dbName ? `<span class=\"text-xs text-gray-400 font-medium hidden sm:inline-block\">(${dbName})</span>` : ''}\n                                </div>\n                                <div class=\"flex items-center gap-3 flex-shrink-0\">\n                                    <span class=\"text-gray-500 font-medium\">${formatBytes(item.size)}</span>\n                                    <button data-type=\"${type}\" data-key=\"${sanitizeHTML(item.key)}\" data-db=\"${dbName}\" class=\"si-delete-btn p-1.5 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-md\">\n                                        <i data-lucide=\"trash-2\" class=\"h-4 w-4\"></i>\n                                    </button>\n                                    <i data-lucide=\"chevron-down\" class=\"h-5 w-5 text-gray-400 group-open:rotate-180 transition-transform\"></i>\n                                </div>\n                            </summary>\n                            <div class=\"p-3 border-t bg-white\">\n                                <pre class=\"text-xs p-3 bg-gray-800 text-white rounded-md overflow-auto max-h-60\"><code>${sanitizeHTML(valueStr)}</code></pre>\n                            </div>\n                        </details>\n                    </div>\n                `;\n            };\n\n            const renderPanel = (panel, items, type, totalSize) => {\n                let html = `<div class=\"mb-3 p-2 bg-slate-50 rounded-md text-slate-600 font-medium text-xs\">Total Size: ${formatBytes(totalSize)}</div>`;\n                if (items.length === 0) {\n                    html += '<p class=\"text-center text-gray-500 py-4\">No items found.</p>';\n                } else {\n                    html += items.map(item => renderItem(item, type, item.dbName)).join('');\n                }\n                panel.innerHTML = html;\n            };\n\n            const updateOverview = async () => {\n                if ('storage' in navigator && 'estimate' in navigator.storage) {\n                    try {\n                        const estimate = await navigator.storage.estimate();\n                        const usage = estimate.usage || 0;\n                        const quota = estimate.quota || 0;\n                        const percent = quota > 0 ? (usage / quota * 100).toFixed(2) : 0;\n                        \n                        overviewEl.innerHTML = `\n                            <div class=\"w-full bg-gray-200 rounded-full h-2.5 mb-2\">\n                                <div class=\"bg-blue-600 h-2.5 rounded-full\" style=\"width: ${percent}%\"></div>\n                            </div>\n                            <div class=\"flex justify-between text-xs text-gray-600\">\n                                <span>Used: <strong>${formatBytes(usage)}</strong></span>\n                                <span>Quota: <strong>${formatBytes(quota)}</strong></span>\n                                <span><strong>${percent}%</strong></span>\n                            </div>\n                        `;\n                    } catch (error) {\n                        overviewEl.innerHTML = '<p class=\"text-xs text-red-500\">Could not estimate storage. API may be unsupported or blocked.</p>';\n                        console.error('Storage estimation failed:', error);\n                    }\n                } else {\n                    overviewEl.innerHTML = '<p class=\"text-xs text-gray-500\">Storage Estimation API not supported.</p>';\n                }\n            };\n            \n            // --- Data Fetching and Processing ---\n            const refreshData = async () => {\n                loadingEl.classList.remove('hidden');\n                panelsContainer.classList.add('hidden');\n                \n                await updateOverview();\n\n                // 1. Read data from main thread\n                const dataToProcess = {\n                    localStorage: [],\n                    indexedDB: []\n                };\n\n                // Read localStorage\n                for (let i = 0; i < localStorage.length; i++) {\n                    const key = localStorage.key(i);\n                    try {\n                        dataToProcess.localStorage.push({ key, value: JSON.parse(localStorage.getItem(key)) });\n                    } catch (e) {\n                        dataToProcess.localStorage.push({ key, value: localStorage.getItem(key) });\n                    }\n                }\n\n                // Read IndexedDB (via localforage)\n                const dbNames = ['localforage', 'master_cache']; // From main app's source\n                const idbPromises = dbNames.map(name => {\n                    return new Promise(resolve => {\n                        const store = localforage.createInstance({ name });\n                        const items = [];\n                        store.iterate((value, key) => {\n                            items.push({ key, value, dbName: name });\n                        }).then(() => resolve(items)).catch(() => resolve([])); // Resolve even on error\n                    });\n                });\n\n                const idbResults = await Promise.all(idbPromises);\n                dataToProcess.indexedDB = idbResults.flat();\n\n                // 2. Post to worker for calculation\n                worker.postMessage({ task: 'calculateSizes', data: dataToProcess });\n            };\n\n            // --- Event Handlers ---\n            const handleWorkerMessage = (e) => {\n                const results = e.data;\n                renderPanel(tabs.ls.panel, results.localStorage.items, 'ls', results.localStorage.totalSize);\n                renderPanel(tabs.idb.panel, results.indexedDB.items, 'idb', results.indexedDB.totalSize);\n                \n                loadingEl.classList.add('hidden');\n                panelsContainer.classList.remove('hidden');\n\n                if (window.lucide) window.lucide.createIcons();\n            };\n\n            const handleTabClick = (e) => {\n                const targetTab = e.target.closest('.si-tab-btn').dataset.tab;\n                Object.keys(tabs).forEach(key => {\n                    const isActive = key === targetTab;\n                    tabs[key].btn.classList.toggle('border-slate-600', isActive);\n                    tabs[key].btn.classList.toggle('text-slate-700', isActive);\n                    tabs[key].btn.classList.toggle('border-transparent', !isActive);\n                    tabs[key].btn.classList.toggle('text-gray-500', !isActive);\n                    tabs[key].panel.classList.toggle('hidden', !isActive);\n                });\n            };\n\n            const handleDeleteClick = async (e) => {\n                const button = e.target.closest('.si-delete-btn');\n                if (!button) return;\n\n                const { type, key, db } = button.dataset;\n                if (confirm(`Are you sure you want to delete \"${key}\"?`)) {\n                    if (type === 'ls') {\n                        localStorage.removeItem(key);\n                    } else if (type === 'idb' && db) {\n                        const store = localforage.createInstance({ name: db });\n                        await store.removeItem(key);\n                    }\n                    await refreshData();\n                }\n            };\n            \n            // --- Initialization ---\n            const init = () => {\n                worker = createWorker();\n                worker.onmessage = handleWorkerMessage;\n                \n                refreshBtn.addEventListener('click', refreshData);\n                tabs.ls.btn.addEventListener('click', handleTabClick);\n                tabs.idb.btn.addEventListener('click', handleTabClick);\n                panelsContainer.addEventListener('click', handleDeleteClick);\n\n                // Initial load\n                refreshData();\n                if (window.lucide) window.lucide.createIcons();\n            };\n            \n            init();\n\n            // Cleanup when sune is removed from DOM (if needed)\n            const observer = new MutationObserver((mutationsList) => {\n                for (const mutation of mutationsList) {\n                    if (mutation.removedNodes) {\n                        mutation.removedNodes.forEach((removedNode) => {\n                            if (removedNode === root || removedNode.contains(root)) {\n                                if (worker) worker.terminate();\n                                observer.disconnect();\n                            }\n                        });\n                    }\n                }\n            });\n            observer.observe(document.body, { childList: true, subtree: true });\n\n        })();\n    </script>\n</div>\n",
+      "html": "<!-- Sune: Storage Inspector -->\n<div id=\"storage-inspector-sune\" class=\"w-full mx-auto max-w-none p-3 sm:p-4 bg-white rounded-lg border border-gray-200 shadow-sm text-sm\">\n    <div class=\"flex items-center justify-between mb-4\">\n        <h2 class=\"text-lg font-semibold text-gray-800 flex items-center gap-2\">\n            <i data-lucide=\"database\" class=\"h-5 w-5\"></i>\n            <span>Storage Inspector</span>\n            <span class=\"text-xs font-mono bg-gray-100 text-gray-500 px-1.5 py-0.5 rounded-md\">v1.1</span>\n        </h2>\n        <button id=\"si-refresh-btn\" class=\"p-2 rounded-lg hover:bg-gray-100 active:bg-gray-200 transition-colors\">\n            <i data-lucide=\"refresh-cw\" class=\"h-5 w-5 text-gray-600\"></i>\n        </button>\n    </div>\n\n    <!-- Storage Overview -->\n    <div id=\"si-overview\" class=\"mb-4 p-4 bg-gray-50 rounded-lg border border-gray-200\">\n        <h3 class=\"font-medium text-gray-700 mb-2\">Device Storage Quota</h3>\n        <div id=\"si-overview-content\" class=\"space-y-2\">\n            <p class=\"text-xs text-gray-500\">Calculating...</p>\n        </div>\n    </div>\n\n    <!-- Tabs -->\n    <div class=\"border-b border-gray-200 mb-4\">\n        <nav class=\"-mb-px flex space-x-4\" aria-label=\"Tabs\">\n            <button id=\"si-tab-ls\" data-tab=\"ls\" class=\"si-tab-btn whitespace-nowrap py-3 px-1 border-b-2 font-medium border-slate-600 text-slate-700\">\n                localStorage\n            </button>\n            <button id=\"si-tab-idb\" data-tab=\"idb\" class=\"si-tab-btn whitespace-nowrap py-3 px-1 border-b-2 font-medium border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300\">\n                IndexedDB (localforage)\n            </button>\n        </nav>\n    </div>\n\n    <!-- Loading Indicator -->\n    <div id=\"si-loading\" class=\"hidden text-center p-8\">\n        <p class=\"text-gray-500 flex items-center justify-center gap-2\">\n            <i data-lucide=\"loader\" class=\"h-5 w-5 animate-spin\"></i>\n            <span>Inspecting storage...</span>\n        </p>\n    </div>\n    \n    <!-- Content Panels -->\n    <div id=\"si-panels\">\n        <div id=\"si-panel-ls\" class=\"si-panel space-y-2\"></div>\n        <div id=\"si-panel-idb\" class=\"si-panel hidden space-y-2\"></div>\n    </div>\n\n    <script>\n        (() => {\n            const suneId = 'storage-inspector-sune', root = document.getElementById(suneId);\n            if (!root) return;\n\n            const overviewEl=root.querySelector('#si-overview-content'),refreshBtn=root.querySelector('#si-refresh-btn'),loadingEl=root.querySelector('#si-loading'),panelsContainer=root.querySelector('#si-panels');\n            const tabs = { ls: { btn: root.querySelector('#si-tab-ls'), panel: root.querySelector('#si-panel-ls') }, idb: { btn: root.querySelector('#si-tab-idb'), panel: root.querySelector('#si-panel-idb') } };\n            let worker;\n\n            const formatBytes = (b, d = 2) => {\n                if (b === 0) return '0 Bytes'; const k=1024, dm=d<0?0:d, s=['Bytes','KB','MB','GB','TB'], i=Math.floor(Math.log(b)/Math.log(k));\n                return `${parseFloat((b/Math.pow(k,i)).toFixed(dm))} ${s[i]}`;\n            };\n            const sanitizeHTML = s => { const e=document.createElement('div'); e.textContent=s; return e.innerHTML; };\n\n            const createWorker = () => {\n                const workerCode = `\n                    self.onmessage = (e) => {\n                        const { task, data } = e.data;\n                        if (task !== 'calculateSizes') return;\n                        const r = { ls: { items: [], total: 0 }, idb: { items: [], total: 0 } };\n                        const size = v => { try { return new Blob([JSON.stringify(v)]).size; } catch { return new Blob([String(v)]).size; } };\n                        if (data.ls) { for (const i of data.ls) { const s = size(i.value); r.ls.items.push({ ...i, size: s }); r.ls.total += s; } r.ls.items.sort((a,b)=>b.size-a.size); }\n                        if (data.idb) { for (const i of data.idb) { const s = size(i.value); r.idb.items.push({ ...i, size: s }); r.idb.total += s; } r.idb.items.sort((a,b)=>b.size-a.size); }\n                        self.postMessage(r);\n                    };\n                `;\n                return new Worker(URL.createObjectURL(new Blob([workerCode], { type: 'application/javascript' })));\n            };\n            \n            const renderItem = (item, type, dbName = '') => {\n                const valStr = JSON.stringify(item.value, null, 2);\n                return `\n                    <div class=\"border border-gray-200 rounded-lg overflow-hidden\">\n                        <details class=\"group\">\n                            <summary class=\"flex items-center justify-between p-3 cursor-pointer hover:bg-gray-50 list-none\">\n                                <div class=\"flex items-center gap-3 overflow-hidden\"><span class=\"font-mono text-xs bg-gray-100 text-gray-700 px-2 py-1 rounded\">${sanitizeHTML(item.key)}</span>${dbName ? `<span class=\"text-xs text-gray-400 font-medium hidden sm:inline-block\">(${dbName})</span>` : ''}</div>\n                                <div class=\"flex items-center gap-3 flex-shrink-0\">\n                                    <span class=\"text-gray-500 font-medium\">${formatBytes(item.size)}</span>\n                                    <button data-type=\"${type}\" data-key=\"${sanitizeHTML(item.key)}\" data-db=\"${dbName}\" class=\"si-delete-btn p-1.5 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-md\"><i data-lucide=\"trash-2\" class=\"h-4 w-4\"></i></button>\n                                    <i data-lucide=\"chevron-down\" class=\"h-5 w-5 text-gray-400 group-open:rotate-180 transition-transform\"></i>\n                                </div>\n                            </summary>\n                            <div class=\"p-3 border-t bg-white\"><pre class=\"text-xs p-3 bg-gray-800 text-white rounded-md overflow-auto max-h-60\"><code>${sanitizeHTML(valStr)}</code></pre></div>\n                        </details>\n                    </div>`;\n            };\n\n            const renderPanel = (panel, items, type, totalSize) => {\n                let header = `<div class=\"flex items-center justify-between mb-3 p-2 bg-slate-50 rounded-md text-xs\">\n                    <span class=\"text-slate-600 font-medium\">Total Size: ${formatBytes(totalSize)}</span>\n                    ${type==='idb' ? `<button id=\"si-idb-delete-all-btn\" ${items.length===0?'disabled':''} class=\"px-2 py-1 bg-red-100 text-red-700 rounded-md hover:bg-red-200 disabled:opacity-50 disabled:cursor-not-allowed\">Delete All</button>`:''}\n                </div>`;\n                let body = items.length === 0 ? '<p class=\"text-center text-gray-500 py-4\">No items found.</p>' : items.map(item => renderItem(item, type, item.dbName)).join('');\n                panel.innerHTML = header + body;\n            };\n\n            const updateOverview = async () => {\n                if (!navigator.storage?.estimate) { overviewEl.innerHTML = '<p class=\"text-xs text-gray-500\">Storage Estimation API not supported.</p>'; return; }\n                try {\n                    const {usage=0, quota=0} = await navigator.storage.estimate();\n                    const percent = quota > 0 ? (usage / quota * 100).toFixed(2) : 0;\n                    overviewEl.innerHTML = `<div class=\"w-full bg-gray-200 rounded-full h-2.5 mb-2\"><div class=\"bg-blue-600 h-2.5 rounded-full\" style=\"width:${percent}%\"></div></div>\n                        <div class=\"flex justify-between text-xs text-gray-600\"><span>Used: <strong>${formatBytes(usage)}</strong></span><span>Quota: <strong>${formatBytes(quota)}</strong></span><span><strong>${percent}%</strong></span></div>`;\n                } catch (e) { overviewEl.innerHTML = '<p class=\"text-xs text-red-500\">Could not estimate storage.</p>'; console.error('Storage estimation failed:', e); }\n            };\n            \n            const refreshData = async () => {\n                loadingEl.classList.remove('hidden'); panelsContainer.classList.add('hidden');\n                await updateOverview();\n                const data = { ls: [], idb: [] };\n                for (let i=0;i<localStorage.length;i++) { const k=localStorage.key(i); try { data.ls.push({key:k,value:JSON.parse(localStorage.getItem(k))}); } catch { data.ls.push({key:k,value:localStorage.getItem(k)}); } }\n                const dbNames = ['localforage', 'master_cache'];\n                const idbPromises = dbNames.map(name => new Promise(res => {\n                    const store=localforage.createInstance({name}), items=[];\n                    store.iterate((v,k)=>items.push({key:k,value:v,dbName:name})).then(()=>res(items)).catch(()=>res([]));\n                }));\n                data.idb = (await Promise.all(idbPromises)).flat();\n                worker.postMessage({ task: 'calculateSizes', data });\n            };\n\n            const handleWorkerMessage = ({data:r}) => {\n                renderPanel(tabs.ls.panel, r.ls.items, 'ls', r.ls.total);\n                renderPanel(tabs.idb.panel, r.idb.items, 'idb', r.idb.total);\n                loadingEl.classList.add('hidden'); panelsContainer.classList.remove('hidden');\n                window.lucide?.createIcons();\n            };\n\n            const handleTabClick = (e) => {\n                const targetTab = e.target.closest('.si-tab-btn').dataset.tab;\n                Object.entries(tabs).forEach(([k,v]) => {\n                    const isActive = k === targetTab;\n                    v.btn.classList.toggle('border-slate-600', isActive); v.btn.classList.toggle('text-slate-700', isActive);\n                    v.btn.classList.toggle('border-transparent', !isActive); v.btn.classList.toggle('text-gray-500', !isActive);\n                    v.panel.classList.toggle('hidden', !isActive);\n                });\n            };\n\n            const handlePanelClick = async (e) => {\n                const target = e.target;\n                const singleDelBtn = target.closest('.si-delete-btn');\n                if (singleDelBtn) {\n                    const { type, key, db } = singleDelBtn.dataset;\n                    if (!confirm(`Delete \"${key}\"?`)) return;\n                    if (type === 'ls') localStorage.removeItem(key);\n                    else if (type === 'idb' && db) await localforage.createInstance({ name: db }).removeItem(key);\n                    await refreshData();\n                    return;\n                }\n                const allDelBtn = target.closest('#si-idb-delete-all-btn');\n                if (allDelBtn) {\n                    if (!confirm('DELETE ALL items from IndexedDB? This cannot be undone.')) return;\n                    const dbNames = ['localforage', 'master_cache'];\n                    await Promise.all(dbNames.map(name => localforage.createInstance({ name }).clear()));\n                    await refreshData();\n                }\n            };\n            \n            const init = () => {\n                worker = createWorker();\n                worker.onmessage = handleWorkerMessage;\n                refreshBtn.addEventListener('click', refreshData);\n                Object.values(tabs).forEach(t => t.btn.addEventListener('click', handleTabClick));\n                panelsContainer.addEventListener('click', handlePanelClick);\n                refreshData();\n                window.lucide?.createIcons();\n            };\n            \n            init();\n\n            const observer = new MutationObserver((mutations) => {\n                for(const m of mutations) if(m.removedNodes) m.removedNodes.forEach(n => {\n                    if (n === root || n.contains(root)) { worker?.terminate(); observer.disconnect(); }\n                });\n            });\n            observer.observe(document.body, { childList: true, subtree: true });\n        })();\n    </script>\n</div>\n",
       "extension_html": "<sune src='https://raw.githubusercontent.com/sune-org/store/refs/heads/main/sync.sune' private />",
       "script": ""
-    }
+    },
+    "storage": {}
   }
 ]
\ No newline at end of file