npm - worldwideweb - Versions diffs - 0.0.20 → 0.0.21 - Mend

worldwideweb 0.0.20 → 0.0.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (11) hide show

package/.claude/settings.local.json +16 -0
package/README.md +40 -3
package/bin/worldwideweb.js +18 -0
package/config.json +6 -0
package/jsonos/browser.html +997 -0
package/jsonos/main.cjs +291 -0
package/jsonos/preload.js +14 -0
package/jsonos/screenshot.png +0 -0
package/jsonos/screenshot2.png +0 -0
package/main.js +168 -0
package/package.json +11 -17

package/jsonos/browser.html ADDED Viewed

@@ -0,0 +1,997 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>WorldWideWeb - jsonos</title>
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      background: #1a1a2e;
+      color: #eee;
+      height: 100vh;
+      display: flex;
+      flex-direction: column;
+    }
+    /* Navigation Bar */
+    #navbar {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 8px 12px;
+      background: #16213e;
+      border-bottom: 1px solid #0f3460;
+    }
+    #navbar button {
+      background: #0f3460;
+      border: none;
+      color: #eee;
+      padding: 8px 12px;
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 14px;
+    }
+    #navbar button:hover {
+      background: #1a4a7a;
+    }
+    #navbar button:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+    #url-bar {
+      flex: 1;
+      padding: 8px 12px;
+      border: 1px solid #0f3460;
+      border-radius: 4px;
+      background: #0a0a1a;
+      color: #eee;
+      font-size: 14px;
+    }
+    #url-bar:focus {
+      outline: none;
+      border-color: #e94560;
+    }
+    /* Auth Status */
+    #auth-status {
+      padding: 4px 12px;
+      border-radius: 4px;
+      font-size: 12px;
+      cursor: pointer;
+    }
+    #auth-status.logged-out {
+      background: #e94560;
+    }
+    #auth-status.logged-in {
+      background: #4ecca3;
+      color: #1a1a2e;
+    }
+    /* Main Content */
+    #content {
+      flex: 1;
+      overflow: auto;
+      padding: 20px;
+    }
+    /* Loading State */
+    #loading {
+      display: none;
+      text-align: center;
+      padding: 40px;
+      color: #888;
+    }
+    #loading.active {
+      display: block;
+    }
+    /* JSON Viewer */
+    #viewer {
+      background: #0a0a1a;
+      border-radius: 8px;
+      padding: 20px;
+      min-height: 200px;
+    }
+    /* Linked Object Styles */
+    .lion-object {
+      border: 1px solid #0f3460;
+      border-radius: 8px;
+      padding: 16px;
+      margin-bottom: 16px;
+      background: #16213e;
+    }
+    .lion-object .lion-id {
+      color: #e94560;
+      font-size: 12px;
+      margin-bottom: 8px;
+      word-break: break-all;
+    }
+    .lion-object .lion-type {
+      color: #4ecca3;
+      font-size: 14px;
+      font-weight: bold;
+      margin-bottom: 12px;
+    }
+    .lion-property {
+      display: flex;
+      margin-bottom: 8px;
+      padding: 4px 0;
+      border-bottom: 1px solid #0f3460;
+    }
+    .lion-property:last-child {
+      border-bottom: none;
+    }
+    .lion-key {
+      color: #7b8cde;
+      min-width: 150px;
+      font-weight: 500;
+    }
+    .lion-value {
+      color: #eee;
+      flex: 1;
+    }
+    .lion-link {
+      color: #e94560;
+      text-decoration: none;
+      cursor: pointer;
+    }
+    .lion-link:hover {
+      text-decoration: underline;
+    }
+    /* Edit Mode */
+    .lion-value[contenteditable="true"] {
+      background: #0a0a1a;
+      padding: 4px 8px;
+      border-radius: 4px;
+      outline: 1px solid #e94560;
+    }
+    /* View Tabs */
+    #view-tabs {
+      display: flex;
+      gap: 8px;
+      margin-bottom: 16px;
+    }
+    #view-tabs button {
+      background: #0f3460;
+      border: none;
+      color: #eee;
+      padding: 6px 16px;
+      border-radius: 4px;
+      cursor: pointer;
+    }
+    #view-tabs button.active {
+      background: #e94560;
+    }
+    /* Raw JSON View */
+    #raw-json {
+      display: none;
+      background: #0a0a1a;
+      padding: 16px;
+      border-radius: 8px;
+      font-family: 'Monaco', 'Menlo', monospace;
+      font-size: 13px;
+      white-space: pre-wrap;
+      word-break: break-all;
+      color: #4ecca3;
+    }
+    /* Status Bar */
+    #status-bar {
+      padding: 4px 12px;
+      background: #0f3460;
+      font-size: 12px;
+      color: #888;
+      display: flex;
+      justify-content: space-between;
+    }
+    /* Custom View Container */
+    #custom-view {
+      display: none;
+    }
+    /* Login Modal */
+    #login-modal {
+      display: none;
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: rgba(0, 0, 0, 0.8);
+      z-index: 1000;
+      justify-content: center;
+      align-items: center;
+    }
+    #login-modal.active {
+      display: flex;
+    }
+    #login-modal .modal-content {
+      background: #16213e;
+      padding: 32px;
+      border-radius: 12px;
+      width: 400px;
+      max-width: 90%;
+    }
+    #login-modal h2 {
+      margin-bottom: 20px;
+      color: #4ecca3;
+    }
+    #login-modal label {
+      display: block;
+      margin-bottom: 8px;
+      color: #888;
+    }
+    #login-modal input {
+      width: 100%;
+      padding: 12px;
+      border: 1px solid #0f3460;
+      border-radius: 4px;
+      background: #0a0a1a;
+      color: #eee;
+      font-size: 14px;
+      margin-bottom: 16px;
+    }
+    #login-modal .providers {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+      margin-bottom: 20px;
+    }
+    #login-modal .provider-btn {
+      padding: 8px 16px;
+      background: #0f3460;
+      border: none;
+      color: #eee;
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 12px;
+    }
+    #login-modal .provider-btn:hover {
+      background: #1a4a7a;
+    }
+    #login-modal .modal-actions {
+      display: flex;
+      gap: 12px;
+      justify-content: flex-end;
+    }
+    #login-modal .modal-actions button {
+      padding: 10px 24px;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 14px;
+    }
+    #login-modal .btn-cancel {
+      background: #333;
+      color: #eee;
+    }
+    #login-modal .btn-login {
+      background: #4ecca3;
+      color: #1a1a2e;
+    }
+    /* Welcome Screen */
+    #welcome-screen {
+      text-align: center;
+      padding: 60px 20px;
+    }
+    #welcome-screen h1 {
+      font-size: 48px;
+      margin-bottom: 16px;
+      background: linear-gradient(135deg, #e94560, #4ecca3);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+    }
+    #welcome-screen p {
+      color: #888;
+      margin-bottom: 32px;
+      font-size: 18px;
+    }
+    #welcome-screen .quick-links {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 12px;
+      justify-content: center;
+      margin-top: 32px;
+    }
+    #welcome-screen .quick-link {
+      padding: 12px 24px;
+      background: #0f3460;
+      border: none;
+      color: #eee;
+      border-radius: 8px;
+      cursor: pointer;
+      font-size: 14px;
+    }
+    #welcome-screen .quick-link:hover {
+      background: #1a4a7a;
+    }
+  </style>
+</head>
+<body>
+  <!-- Navigation Bar -->
+  <nav id="navbar">
+    <button id="btn-back" title="Back">←</button>
+    <button id="btn-forward" title="Forward">→</button>
+    <button id="btn-reload" title="Reload">↻</button>
+    <input type="text" id="url-bar" placeholder="Enter URL or @id..." />
+    <button id="btn-go">Go</button>
+    <button id="btn-edit" title="Toggle Edit Mode">✎</button>
+    <span id="auth-status" class="logged-out">Login</span>
+  </nav>
+  <!-- Main Content -->
+  <main id="content">
+    <div id="loading">Loading...</div>
+    <div id="view-tabs">
+      <button class="active" data-view="rendered">Rendered</button>
+      <button data-view="raw">Raw JSON</button>
+      <button data-view="custom">Custom View</button>
+    </div>
+    <div id="viewer"></div>
+    <pre id="raw-json"></pre>
+    <div id="custom-view"></div>
+  </main>
+  <!-- Status Bar -->
+  <footer id="status-bar">
+    <span id="status-text">Ready</span>
+    <span id="status-size"></span>
+  </footer>
+  <!-- Login Modal -->
+  <div id="login-modal">
+    <div class="modal-content">
+      <h2>Login with Solid</h2>
+      <label>Identity Provider (IdP)</label>
+      <input type="text" id="idp-input" placeholder="https://solidcommunity.net" value="https://solidcommunity.net" />
+      <label>Quick Providers</label>
+      <div class="providers">
+        <button class="provider-btn" data-idp="https://solidcommunity.net">solidcommunity.net</button>
+        <button class="provider-btn" data-idp="https://login.inrupt.com">inrupt.com</button>
+        <button class="provider-btn" data-idp="https://solidweb.org">solidweb.org</button>
+        <button class="provider-btn" data-idp="https://teamid.live">teamid.live</button>
+      </div>
+      <div class="modal-actions">
+        <button class="btn-cancel" id="btn-cancel-login">Cancel</button>
+        <button class="btn-login" id="btn-do-login">Login</button>
+      </div>
+    </div>
+  </div>
+  <!-- LION Library (Linked Objects) -->
+  <script>
+    // Minimal LION implementation (~2KB)
+    const LION = {
+      cache: new Map(),
+      async fetch(url, options = {}) {
+        const headers = {
+          'Accept': 'application/ld+json, application/json, text/turtle',
+          ...options.headers
+        };
+        try {
+          const response = await fetch(url, { ...options, headers });
+          const contentType = response.headers.get('content-type') || '';
+          let data;
+          if (contentType.includes('json')) {
+            data = await response.json();
+          } else if (contentType.includes('turtle')) {
+            // Basic turtle to JSON-LD conversion for simple cases
+            const text = await response.text();
+            data = this.turtleToJsonLd(text, url);
+          } else {
+            data = await response.json();
+          }
+          // Normalize to always have @id
+          if (!data['@id']) {
+            data['@id'] = url;
+          }
+          this.cache.set(url, data);
+          return data;
+        } catch (error) {
+          console.error('LION fetch error:', error);
+          throw error;
+        }
+      },
+      // Very basic turtle parser for common patterns
+      turtleToJsonLd(turtle, baseUrl) {
+        const obj = { '@id': baseUrl };
+        const lines = turtle.split('\n');
+        for (const line of lines) {
+          const trimmed = line.trim();
+          if (trimmed.startsWith('@prefix') || trimmed.startsWith('#') || !trimmed) {
+            continue;
+          }
+          // Basic triple pattern: <subject> <predicate> <object> .
+          const match = trimmed.match(/<([^>]+)>\s+<([^>]+)>\s+(?:<([^>]+)>|"([^"]*)")/);
+          if (match) {
+            const predicate = match[2].split(/[#\/]/).pop();
+            const value = match[3] || match[4];
+            obj[predicate] = value;
+          }
+        }
+        return obj;
+      },
+      async create(url, data) {
+        const response = await fetch(url, {
+          method: 'PUT',
+          headers: {
+            'Content-Type': 'application/ld+json'
+          },
+          body: JSON.stringify({ '@id': url, ...data })
+        });
+        return response.ok;
+      },
+      async update(url, data) {
+        const existing = this.cache.get(url) || {};
+        const merged = { ...existing, ...data, '@id': url };
+        return this.create(url, merged);
+      },
+      async deleteObject(url) {
+        const response = await fetch(url, { method: 'DELETE' });
+        this.cache.delete(url);
+        return response.ok;
+      },
+      isUrl(value) {
+        if (typeof value !== 'string') return false;
+        return value.startsWith('http://') || value.startsWith('https://');
+      },
+      getType(data) {
+        return data['@type'] || data.type || 'Unknown';
+      },
+      getView(data) {
+        return data['@view'] || data.view;
+      }
+    };
+    window.LION = LION;
+  </script>
+  <!-- jsonos Runtime -->
+  <script>
+    const jsonos = {
+      panes: new Map(),
+      currentData: null,
+      editMode: false,
+      history: [],
+      historyIndex: -1,
+      // Register a pane/view for a type
+      registerPane(type, renderFn) {
+        this.panes.set(type, renderFn);
+      },
+      // Render data using appropriate pane
+      async render(data, container) {
+        this.currentData = data;
+        const type = LION.getType(data);
+        const viewUrl = LION.getView(data);
+        // Try custom @view first
+        if (viewUrl) {
+          try {
+            await this.loadCustomView(viewUrl, data, container);
+            return;
+          } catch (e) {
+            console.warn('Custom view failed, using default:', e);
+          }
+        }
+        // Try registered pane
+        if (this.panes.has(type)) {
+          const html = this.panes.get(type)(data);
+          container.innerHTML = html;
+          this.bindLinks(container);
+          return;
+        }
+        // Default: render as linked object tree
+        this.renderDefault(data, container);
+      },
+      renderDefault(data, container) {
+        const html = this.objectToHtml(data);
+        container.innerHTML = html;
+        this.bindLinks(container);
+      },
+      objectToHtml(obj, depth = 0) {
+        if (depth > 5) return '<span class="lion-value">...</span>';
+        let html = '<div class="lion-object">';
+        // @id
+        if (obj['@id']) {
+          html += `<div class="lion-id">@id: <a class="lion-link" href="${obj['@id']}">${obj['@id']}</a></div>`;
+        }
+        // @type
+        if (obj['@type']) {
+          const type = Array.isArray(obj['@type']) ? obj['@type'].join(', ') : obj['@type'];
+          html += `<div class="lion-type">${type}</div>`;
+        }
+        // Properties
+        for (const [key, value] of Object.entries(obj)) {
+          if (key.startsWith('@')) continue;
+          html += '<div class="lion-property">';
+          html += `<span class="lion-key">${this.formatKey(key)}</span>`;
+          html += `<span class="lion-value" data-key="${key}">${this.valueToHtml(value, depth)}</span>`;
+          html += '</div>';
+        }
+        html += '</div>';
+        return html;
+      },
+      valueToHtml(value, depth) {
+        if (value === null || value === undefined) {
+          return '<em>null</em>';
+        }
+        if (Array.isArray(value)) {
+          return value.map(v => this.valueToHtml(v, depth)).join('<br>');
+        }
+        if (typeof value === 'object') {
+          return this.objectToHtml(value, depth + 1);
+        }
+        if (LION.isUrl(value)) {
+          return `<a class="lion-link" href="${value}">${value}</a>`;
+        }
+        return String(value);
+      },
+      formatKey(key) {
+        // Remove namespace prefixes for display
+        const parts = key.split(/[:#\/]/);
+        return parts[parts.length - 1];
+      },
+      bindLinks(container) {
+        container.querySelectorAll('.lion-link').forEach(link => {
+          link.addEventListener('click', (e) => {
+            e.preventDefault();
+            const url = link.getAttribute('href');
+            this.navigate(url);
+          });
+        });
+      },
+      async loadCustomView(viewUrl, data, container) {
+        const customViewEl = document.getElementById('custom-view');
+        const module = await import(viewUrl);
+        if (module.render) {
+          const result = module.render(data);
+          if (typeof result === 'string') {
+            customViewEl.innerHTML = result;
+          } else {
+            customViewEl.innerHTML = '';
+            customViewEl.appendChild(result);
+          }
+          // Switch to custom view tab
+          document.querySelector('[data-view="custom"]').click();
+        }
+      },
+      async navigate(url) {
+        if (!url) return;
+        // Update history
+        if (this.historyIndex < this.history.length - 1) {
+          this.history = this.history.slice(0, this.historyIndex + 1);
+        }
+        this.history.push(url);
+        this.historyIndex = this.history.length - 1;
+        // Update UI
+        document.getElementById('url-bar').value = url;
+        document.getElementById('loading').classList.add('active');
+        document.getElementById('viewer').innerHTML = '';
+        document.getElementById('status-text').textContent = 'Loading...';
+        try {
+          const data = await LION.fetch(url);
+          // Update raw view
+          document.getElementById('raw-json').textContent = JSON.stringify(data, null, 2);
+          // Render
+          await this.render(data, document.getElementById('viewer'));
+          document.getElementById('status-text').textContent = `Loaded: ${url}`;
+          document.getElementById('status-size').textContent =
+            `${JSON.stringify(data).length} bytes`;
+        } catch (error) {
+          document.getElementById('viewer').innerHTML =
+            `<div class="lion-object"><div class="lion-type">Error</div>
+             <div class="lion-property"><span class="lion-key">message</span>
+             <span class="lion-value">${error.message}</span></div></div>`;
+          document.getElementById('status-text').textContent = `Error: ${error.message}`;
+        } finally {
+          document.getElementById('loading').classList.remove('active');
+        }
+        this.updateNavButtons();
+      },
+      goBack() {
+        if (this.historyIndex > 0) {
+          this.historyIndex--;
+          const url = this.history[this.historyIndex];
+          document.getElementById('url-bar').value = url;
+          this.navigateWithoutHistory(url);
+        }
+      },
+      goForward() {
+        if (this.historyIndex < this.history.length - 1) {
+          this.historyIndex++;
+          const url = this.history[this.historyIndex];
+          document.getElementById('url-bar').value = url;
+          this.navigateWithoutHistory(url);
+        }
+      },
+      async navigateWithoutHistory(url) {
+        document.getElementById('loading').classList.add('active');
+        try {
+          const data = await LION.fetch(url);
+          document.getElementById('raw-json').textContent = JSON.stringify(data, null, 2);
+          await this.render(data, document.getElementById('viewer'));
+          document.getElementById('status-text').textContent = `Loaded: ${url}`;
+        } catch (error) {
+          document.getElementById('viewer').innerHTML =
+            `<div class="lion-object"><div class="lion-type">Error</div>
+             <div class="lion-property"><span class="lion-key">message</span>
+             <span class="lion-value">${error.message}</span></div></div>`;
+        } finally {
+          document.getElementById('loading').classList.remove('active');
+        }
+        this.updateNavButtons();
+      },
+      updateNavButtons() {
+        document.getElementById('btn-back').disabled = this.historyIndex <= 0;
+        document.getElementById('btn-forward').disabled =
+          this.historyIndex >= this.history.length - 1;
+      },
+      toggleEditMode() {
+        this.editMode = !this.editMode;
+        const btn = document.getElementById('btn-edit');
+        btn.style.background = this.editMode ? '#e94560' : '';
+        document.querySelectorAll('.lion-value[data-key]').forEach(el => {
+          el.contentEditable = this.editMode;
+        });
+        if (!this.editMode && this.currentData) {
+          // Save changes
+          this.saveChanges();
+        }
+      },
+      async saveChanges() {
+        const url = this.currentData['@id'];
+        if (!url) return;
+        const updates = {};
+        document.querySelectorAll('.lion-value[data-key]').forEach(el => {
+          const key = el.dataset.key;
+          const value = el.textContent.trim();
+          updates[key] = value;
+        });
+        try {
+          await LION.update(url, updates);
+          document.getElementById('status-text').textContent = 'Saved!';
+        } catch (error) {
+          document.getElementById('status-text').textContent = `Save failed: ${error.message}`;
+        }
+      }
+    };
+    window.jsonos = jsonos;
+    // Solid Authentication Module
+    const solidAuth = {
+      session: null,
+      webId: null,
+      async login(idp) {
+        try {
+          document.getElementById('status-text').textContent = 'Logging in...';
+          // For Electron, we use a popup-based flow
+          // This is a simplified version - production would use @inrupt/solid-client-authn-browser
+          const authEndpoint = `${idp}/authorize`;
+          const clientId = window.location.origin;
+          // Store the IdP for session restoration
+          localStorage.setItem('solid-idp', idp);
+          // Open login popup
+          const popup = window.open(
+            `${idp}/.well-known/openid-configuration`,
+            'solid-login',
+            'width=500,height=600'
+          );
+          // For now, show manual WebID input as fallback
+          const webId = prompt('Enter your WebID (e.g., https://you.solidcommunity.net/profile/card#me):');
+          if (webId) {
+            this.webId = webId;
+            this.session = { webId };
+            localStorage.setItem('solid-webid', webId);
+            this.updateUI(true);
+            // Fetch and display profile
+            jsonos.navigate(webId);
+          }
+        } catch (error) {
+          console.error('Login failed:', error);
+          document.getElementById('status-text').textContent = `Login failed: ${error.message}`;
+        }
+      },
+      async logout() {
+        this.session = null;
+        this.webId = null;
+        localStorage.removeItem('solid-webid');
+        localStorage.removeItem('solid-idp');
+        this.updateUI(false);
+        document.getElementById('status-text').textContent = 'Logged out';
+      },
+      async restoreSession() {
+        const webId = localStorage.getItem('solid-webid');
+        if (webId) {
+          this.webId = webId;
+          this.session = { webId };
+          this.updateUI(true);
+          return true;
+        }
+        return false;
+      },
+      updateUI(isLoggedIn) {
+        const authStatus = document.getElementById('auth-status');
+        if (isLoggedIn) {
+          authStatus.classList.remove('logged-out');
+          authStatus.classList.add('logged-in');
+          authStatus.textContent = this.webId.split('/').pop().replace('#me', '') || 'Logged In';
+          authStatus.title = this.webId;
+        } else {
+          authStatus.classList.remove('logged-in');
+          authStatus.classList.add('logged-out');
+          authStatus.textContent = 'Login';
+          authStatus.title = '';
+        }
+      },
+      // Get fetch with auth headers
+      async authFetch(url, options = {}) {
+        // In a full implementation, this would add Bearer token
+        // For now, just pass through with credentials
+        return fetch(url, {
+          ...options,
+          credentials: 'include'
+        });
+      }
+    };
+    window.solidAuth = solidAuth;
+    // Register some default panes
+    jsonos.registerPane('schema:Person', (data) => `
+      <div class="lion-object">
+        <div class="lion-type">👤 Person</div>
+        <div class="lion-property">
+          <span class="lion-key">Name</span>
+          <span class="lion-value" data-key="schema:name">${data['schema:name'] || data.name || 'Unknown'}</span>
+        </div>
+        ${data['schema:email'] || data.email ? `
+        <div class="lion-property">
+          <span class="lion-key">Email</span>
+          <span class="lion-value" data-key="schema:email">${data['schema:email'] || data.email}</span>
+        </div>` : ''}
+        ${data['schema:knows'] || data.knows ? `
+        <div class="lion-property">
+          <span class="lion-key">Knows</span>
+          <span class="lion-value">${jsonos.valueToHtml(data['schema:knows'] || data.knows, 0)}</span>
+        </div>` : ''}
+      </div>
+    `);
+    jsonos.registerPane('schema:WebPage', (data) => `
+      <div class="lion-object">
+        <div class="lion-type">🌐 Web Page</div>
+        <div class="lion-property">
+          <span class="lion-key">Title</span>
+          <span class="lion-value">${data['schema:name'] || data.name || 'Untitled'}</span>
+        </div>
+        ${data['schema:description'] ? `
+        <div class="lion-property">
+          <span class="lion-key">Description</span>
+          <span class="lion-value">${data['schema:description']}</span>
+        </div>` : ''}
+      </div>
+    `);
+    // Initialize UI
+    document.addEventListener('DOMContentLoaded', () => {
+      const urlBar = document.getElementById('url-bar');
+      const btnGo = document.getElementById('btn-go');
+      const btnBack = document.getElementById('btn-back');
+      const btnForward = document.getElementById('btn-forward');
+      const btnReload = document.getElementById('btn-reload');
+      const btnEdit = document.getElementById('btn-edit');
+      const authStatus = document.getElementById('auth-status');
+      // Navigation
+      btnGo.addEventListener('click', () => jsonos.navigate(urlBar.value));
+      urlBar.addEventListener('keypress', (e) => {
+        if (e.key === 'Enter') jsonos.navigate(urlBar.value);
+      });
+      btnBack.addEventListener('click', () => jsonos.goBack());
+      btnForward.addEventListener('click', () => jsonos.goForward());
+      btnReload.addEventListener('click', () => {
+        if (jsonos.currentData && jsonos.currentData['@id']) {
+          LION.cache.delete(jsonos.currentData['@id']);
+          jsonos.navigateWithoutHistory(jsonos.currentData['@id']);
+        }
+      });
+      // Edit mode
+      btnEdit.addEventListener('click', () => jsonos.toggleEditMode());
+      // View tabs
+      document.querySelectorAll('#view-tabs button').forEach(btn => {
+        btn.addEventListener('click', () => {
+          document.querySelectorAll('#view-tabs button').forEach(b => b.classList.remove('active'));
+          btn.classList.add('active');
+          const view = btn.dataset.view;
+          document.getElementById('viewer').style.display = view === 'rendered' ? 'block' : 'none';
+          document.getElementById('raw-json').style.display = view === 'raw' ? 'block' : 'none';
+          document.getElementById('custom-view').style.display = view === 'custom' ? 'block' : 'none';
+        });
+      });
+      // Solid Authentication
+      const loginModal = document.getElementById('login-modal');
+      const idpInput = document.getElementById('idp-input');
+      authStatus.addEventListener('click', () => {
+        if (authStatus.classList.contains('logged-out')) {
+          loginModal.classList.add('active');
+        } else {
+          // Logout
+          solidAuth.logout();
+        }
+      });
+      // Provider buttons
+      document.querySelectorAll('.provider-btn').forEach(btn => {
+        btn.addEventListener('click', () => {
+          idpInput.value = btn.dataset.idp;
+        });
+      });
+      // Cancel login
+      document.getElementById('btn-cancel-login').addEventListener('click', () => {
+        loginModal.classList.remove('active');
+      });
+      // Do login
+      document.getElementById('btn-do-login').addEventListener('click', async () => {
+        const idp = idpInput.value.trim();
+        if (idp) {
+          await solidAuth.login(idp);
+          loginModal.classList.remove('active');
+        }
+      });
+      // Close modal on outside click
+      loginModal.addEventListener('click', (e) => {
+        if (e.target === loginModal) {
+          loginModal.classList.remove('active');
+        }
+      });
+      // Initial navigation buttons state
+      jsonos.updateNavButtons();
+      // Restore session and load initial URL
+      solidAuth.restoreSession().then(restored => {
+        const params = new URLSearchParams(window.location.search);
+        let initialUrl = params.get('uri');
+        if (!initialUrl) {
+          if (restored && solidAuth.webId) {
+            // Load user's profile
+            initialUrl = solidAuth.webId;
+          } else {
+            // Show welcome/demo content
+            initialUrl = 'https://melvincarvalho.com/.well-known/did.json';
+          }
+        }
+        urlBar.value = initialUrl;
+        jsonos.navigate(initialUrl);
+      });
+    });
+  </script>
+</body>
+</html>