(function () {
      const logEl = document.getElementById('log');
      function log(msg, type) {
        const line = document.createElement('div');
        line.className = type || 'sys';
        line.textContent = '[' + new Date().toLocaleTimeString() + '] ' + msg;
        logEl.appendChild(line);
        logEl.scrollTop = logEl.scrollHeight;
      }

      function request(type, payload) {
        return window.BridgeSwarm.request(type, payload || {}).then(function (r) {
          if (!r.ok) throw new Error(r.error || 'Request failed');
          return r;
        });
      }

      (function initWhenReady(attempts) {
        if (attempts >= 50) {
          log('BridgeSwarm.request not available. Install extension and reload.', 'err');
          return;
        }
        if (typeof window.BridgeSwarm === 'undefined') {
          setTimeout(function () { initWhenReady(attempts + 1); }, 100);
          return;
        }
        window.BridgeSwarm.ready().then(async function () {
          const swarm = new window.BridgeSwarm({
            appName: 'bridge-swarm-data',
            seedHex: BridgeSwarmExamples.sessionStore('data').getOrCreateSeedHex(),
          });
          const pubKey = await swarm.getPublicKey();
          document.getElementById('publicKey').textContent = 'Your public key: ' + pubKey;
          await swarm.destroy();
          log('Data API ready. Use the buttons above.');

        document.getElementById('coreInfo').onclick = async function () {
          try {
            const r = await request('coreInfo');
            log('Core: key=' + (r.key || '').slice(0, 16) + '… length=' + r.length + ' writable=' + r.writable, 'val');
          } catch (e) { log(e.message, 'err'); }
        };

        document.getElementById('coreAppendBtn').onclick = async function () {
          const data = document.getElementById('coreAppend').value;
          if (!data) return;
          try {
            const base64 = btoa(unescape(encodeURIComponent(data)));
            await request('coreAppend', { base64 });
            log('Appended ' + data.length + ' bytes', 'val');
          } catch (e) { log(e.message, 'err'); }
        };

        document.getElementById('beePut').onclick = async function () {
          const key = document.getElementById('beeKey').value;
          const value = document.getElementById('beeValue').value;
          if (!key) return;
          try {
            await request('beePut', { key, value });
            log('bee.put("' + key + '", "' + value + '")', 'val');
          } catch (e) { log(e.message, 'err'); }
        };

        document.getElementById('beeGet').onclick = async function () {
          const key = document.getElementById('beeKey').value;
          if (!key) return;
          try {
            const r = await request('beeGet', { key });
            log('bee.get("' + key + '") => ' + (r.value === null ? 'null' : JSON.stringify(r.value)), 'val');
            if (r.value !== null) document.getElementById('beeValue').value = r.value;
          } catch (e) { log(e.message, 'err'); }
        };

        document.getElementById('beeDel').onclick = async function () {
          const key = document.getElementById('beeKey').value;
          if (!key) return;
          try {
            await request('beeDel', { key });
            log('bee.del("' + key + '")', 'val');
          } catch (e) { log(e.message, 'err'); }
        };

        document.getElementById('drivePut').onclick = async function () {
          const path = document.getElementById('drivePath').value || '/file.txt';
          const content = document.getElementById('driveContent').value;
          try {
            const base64 = btoa(unescape(encodeURIComponent(content || '')));
            await request('drivePut', { path, base64 });
            log('drive.put("' + path + '")', 'val');
          } catch (e) { log(e.message, 'err'); }
        };

        document.getElementById('driveGet').onclick = async function () {
          const path = document.getElementById('drivePath').value || '/';
          try {
            const r = await request('driveGet', { path });
            const text = r.data ? decodeURIComponent(escape(atob(r.data))) : '(empty/null)';
            log('drive.get("' + path + '") => ' + text.slice(0, 80) + (text.length > 80 ? '…' : ''), 'val');
            document.getElementById('driveContent').value = r.data ? decodeURIComponent(escape(atob(r.data))) : '';
          } catch (e) { log(e.message, 'err'); }
        };

        document.getElementById('driveList').onclick = async function () {
          try {
            const r = await request('driveList', { path: '/' });
            const keys = (r.entries || []).map(function (e) { return e.key; });
            log('drive.list("/") => ' + keys.join(', ') || '(none)', 'val');
          } catch (e) { log(e.message, 'err'); }
        };

        document.getElementById('autobaseAppend').onclick = async function () {
          const value = document.getElementById('autobaseValue').value;
          try {
            await request('autobaseAppend', { value: value || '(empty)' });
            log('autobase.append("' + (value || '(empty)') + '")', 'val');
          } catch (e) { log(e.message, 'err'); }
        };

        document.getElementById('autobaseInfo').onclick = async function () {
          try {
            const r = await request('autobaseInfo');
            log('Autobase length=' + r.length + ' signedLength=' + r.signedLength, 'val');
          } catch (e) { log(e.message, 'err'); }
        };

        document.getElementById('autobaseView').onclick = async function () {
          try {
            const info = await request('autobaseInfo');
            const len = Math.min(info.length, 5);
            for (let i = 0; i < len; i++) {
              const r = await request('autobaseViewGet', { index: i });
              const text = r.data ? decodeURIComponent(escape(atob(r.data))) : null;
              log('view[' + i + '] = ' + (text || 'null'), 'val');
            }
            if (info.length === 0) log('view is empty', 'val');
          } catch (e) { log(e.message, 'err'); }
        };

        const collection = '@bridgeswarm/records';
        document.getElementById('hyperdbPut').onclick = async function () {
          const id = document.getElementById('hyperdbId').value;
          const value = document.getElementById('hyperdbValue').value;
          if (!id) return;
          try {
            await request('hyperdbInsert', { collection, doc: { id, value: value || '' } });
            log('hyperdb.insert(@bridgeswarm/records, { id: "' + id + '", value: "' + (value || '') + '" })', 'val');
          } catch (e) { log(e.message, 'err'); }
        };
        document.getElementById('hyperdbGet').onclick = async function () {
          const id = document.getElementById('hyperdbId').value;
          if (!id) return;
          try {
            const r = await request('hyperdbGet', { collection, query: { id } });
            log('hyperdb.get(@bridgeswarm/records, { id: "' + id + '" }) => ' + (r.doc === null ? 'null' : JSON.stringify(r.doc)), 'val');
            if (r.doc) document.getElementById('hyperdbValue').value = r.doc.value || '';
          } catch (e) { log(e.message, 'err'); }
        };
        document.getElementById('hyperdbDel').onclick = async function () {
          const id = document.getElementById('hyperdbId').value;
          if (!id) return;
          try {
            await request('hyperdbDelete', { collection, query: { id } });
            log('hyperdb.delete(@bridgeswarm/records, { id: "' + id + '" })', 'val');
          } catch (e) { log(e.message, 'err'); }
        };
        document.getElementById('hyperdbFind').onclick = async function () {
          try {
            const r = await request('hyperdbFindToArray', { collectionOrIndex: collection });
            const docs = r.docs || [];
            log('hyperdb.find(@bridgeswarm/records) => ' + docs.length + ' doc(s) ' + JSON.stringify(docs), 'val');
          } catch (e) { log(e.message, 'err'); }
        };
        document.getElementById('hyperdbFlush').onclick = async function () {
          try {
            await request('hyperdbFlush');
            log('hyperdb.flush()', 'val');
          } catch (e) { log(e.message, 'err'); }
        };

        document.getElementById('coreOpenNamed').onclick = async function () {
          try {
            const r = await request('coreOpen', { name: 'demo-named-core' });
            log('coreOpen(demo-named-core) => resourceId=' + r.resourceId + ' key=' + (r.key || '').slice(0, 16) + '…', 'val');
            window.__namedCoreId = r.resourceId;
          } catch (e) { log(e.message, 'err'); }
        };
        document.getElementById('coreHas').onclick = async function () {
          try {
            const r = await request('coreHas', { index: 0 });
            log('core.has(0) => ' + r.has, 'val');
          } catch (e) { log(e.message, 'err'); }
        };
        document.getElementById('coreUpdate').onclick = async function () {
          try {
            const r = await request('coreUpdate');
            log('core.update() updated=' + r.updated + ' length=' + r.length, 'val');
          } catch (e) { log(e.message, 'err'); }
        };
        document.getElementById('beeList').onclick = async function () {
          try {
            const r = await request('beeList', { limit: 50 });
            log('bee.list => ' + (r.entries || []).length + ' ' + JSON.stringify(r.entries), 'val');
          } catch (e) { log(e.message, 'err'); }
        };
        document.getElementById('beePeek').onclick = async function () {
          try {
            const r = await request('beePeek', {});
            log('bee.peek => ' + (r.value == null ? 'null' : JSON.stringify({ key: r.key, value: r.value })), 'val');
          } catch (e) { log(e.message, 'err'); }
        };
        document.getElementById('driveEntry').onclick = async function () {
          const pth = document.getElementById('drivePath').value || '/';
          try {
            const r = await request('driveEntry', { path: pth });
            log('drive.entry("' + pth + '") => ' + JSON.stringify(r.entry), 'val');
          } catch (e) { log(e.message, 'err'); }
        };
        document.getElementById('driveInfo').onclick = async function () {
          try {
            const r = await request('driveInfo');
            log('drive.info key=' + (r.key || '').slice(0, 16) + '… version=' + r.version + ' writable=' + r.writable, 'val');
          } catch (e) { log(e.message, 'err'); }
        };
        document.getElementById('coreAppendNamed').onclick = async function () {
          if (!window.__namedCoreId) {
            log('Open a named core first', 'err');
            return;
          }
          const data = document.getElementById('coreAppend').value || 'named';
          try {
            const base64 = btoa(unescape(encodeURIComponent(data)));
            const r = await request('coreAppend', { resourceId: window.__namedCoreId, base64 });
            log('coreAppend(resourceId) length=' + r.length, 'val');
          } catch (e) { log(e.message, 'err'); }
        };

        const notesCollection = '@bridgeswarm/notes';
        document.getElementById('notePut').onclick = async function () {
          const id = document.getElementById('noteId').value;
          const title = document.getElementById('noteTitle').value || '';
          const body = document.getElementById('noteBody').value || '';
          if (!id) return;
          try {
            await request('hyperdbInsert', { collection: notesCollection, doc: { id, title, body } });
            log('hyperdb.insert(@bridgeswarm/notes, …)', 'val');
          } catch (e) { log(e.message, 'err'); }
        };
        document.getElementById('noteGet').onclick = async function () {
          const id = document.getElementById('noteId').value;
          if (!id) return;
          try {
            const r = await request('hyperdbGet', { collection: notesCollection, query: { id } });
            log('note => ' + JSON.stringify(r.doc), 'val');
            if (r.doc) {
              document.getElementById('noteTitle').value = r.doc.title || '';
              document.getElementById('noteBody').value = r.doc.body || '';
            }
          } catch (e) { log(e.message, 'err'); }
        };
        }).catch(function () { log('BridgeSwarm not available.', 'err'); });
      })(0);

      document.querySelectorAll('.bs-tab').forEach(function (tab) {
        tab.addEventListener('click', function () {
          var id = tab.getAttribute('data-tab');
          document.querySelectorAll('.bs-tab').forEach(function (t) {
            var on = t === tab;
            t.classList.toggle('is-active', on);
            t.setAttribute('aria-selected', on ? 'true' : 'false');
          });
          document.querySelectorAll('.bs-tab-panel').forEach(function (panel) {
            panel.hidden = panel.getAttribute('data-panel') !== id;
          });
        });
      });
    })();