From d32c5aeff940d38529fff1af85bf1966c905e188 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sat, 13 Jun 2026 09:04:56 +0000
Subject: [PATCH 1/2] Demo: make the homepage work on a multi-tenant server
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The homepage demo used Zero() with no key, so on a multi-tenant server every
data/file call 401s. Data failures were silent (lists just render empty) while
the upload form surfaced the error — hence "upload is failing", though the whole
demo was unauthenticated.

- The demo now reads an optional project key from the URL (?key=pk_…) and passes
  it to the SDK, so an operator can point the showcase at a project.
- On a multi-tenant server with no key it shows a clear notice (create a project
  in /admin, open as ?key=…) instead of failing silently.
- loadEntries/loadFiles and the post/upload handlers now catch errors and show a
  friendly inline message rather than throwing uncaught.

Server behavior is unchanged (authed upload already works — verified 201 with a
project key). Added a test that / serves the demo and carries the key handling.
65/65 SQLite.
---
 public/index.html | 81 +++++++++++++++++++++++++++++++++--------------
 test/api.test.ts  | 10 ++++++
 2 files changed, 67 insertions(+), 24 deletions(-)

diff --git a/public/index.html b/public/index.html
index 80a76f3..0a9cfc7 100644
--- a/public/index.html
+++ b/public/index.html
@@ -59,6 +59,7 @@ <h2 style="margin: 0 0 0.4rem">This page is talking to its own backend</h2>
           Everything below is served by the same instance, through <code>/sdk.js</code>. Open a second tab —
           new entries appear in both without a refresh (that's the realtime layer).
         </p>
+        <p id="mt-notice" class="muted small" style="display: none; margin: 0 0 1.3rem; max-width: 64ch; padding: 0.6rem 0.85rem; border: 1px solid var(--border); border-radius: 10px"></p>
         <div class="grid" style="grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))">
           <section class="card">
             <h3 style="margin: 0 0 0.8rem">💬 Guestbook <span class="muted small">data + live sync</span></h3>
@@ -108,7 +109,16 @@ <h2 style="margin: 0 0 1.3rem">Everything a generated app needs</h2>
 
     <script src="/sdk.js"></script>
     <script>
-      const api = Zero(); // same-origin
+      // In multi-tenant mode every data/file call needs a project key. The public
+      // demo has none, so accept one from the URL (?key=pk_…) for showcases.
+      const demoKey = new URLSearchParams(location.search).get('key');
+      const api = demoKey ? Zero('', { apiKey: demoKey }) : Zero(); // same-origin
+      const notice = (html) => {
+        const el = document.getElementById('mt-notice');
+        el.innerHTML = html;
+        el.style.display = '';
+      };
+      const needsKey = (e) => e && e.status === 401;
       const escapeHtml = (s) =>
         String(s).replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]));
 
@@ -119,6 +129,13 @@ <h2 style="margin: 0 0 1.3rem">Everything a generated app needs</h2>
           const provider = info.endpoints && info.endpoints.ai && info.endpoints.ai.provider;
           document.getElementById('status').innerHTML =
             `<span class="dot live"></span> live${info.version ? ' · v' + escapeHtml(info.version) : ''}${provider ? ' · ai:' + escapeHtml(provider) : ''}`;
+          // Multi-tenant without a key: the demo can't read/write — explain how to use it.
+          if (info.mode === 'multi-tenant' && !demoKey) {
+            notice(
+              'This server runs in <b>multi-tenant</b> mode, so the live demo needs a project key. ' +
+                'Create one in the <a href="/admin">dashboard</a>, then open this page as <code>?key=pk_…</code>.',
+            );
+          }
         } catch {
           document.getElementById('status').textContent = 'offline';
         }
@@ -135,37 +152,49 @@ <h2 style="margin: 0 0 1.3rem">Everything a generated app needs</h2>
       });
 
       async function loadEntries() {
-        const docs = await api.data('guestbook').list({ sort: '-createdAt', limit: 25 });
         const el = document.getElementById('entries');
-        el.innerHTML = docs.length
-          ? docs
-              .map(
-                (d) =>
-                  `<li><span>${escapeHtml(d.message)}</span> <span class="muted small">${new Date(d.createdAt).toLocaleTimeString()}</span></li>`,
-              )
-              .join('')
-          : '<li class="muted">No messages yet — be the first.</li>';
+        try {
+          const docs = await api.data('guestbook').list({ sort: '-createdAt', limit: 25 });
+          el.innerHTML = docs.length
+            ? docs
+                .map(
+                  (d) =>
+                    `<li><span>${escapeHtml(d.message)}</span> <span class="muted small">${new Date(d.createdAt).toLocaleTimeString()}</span></li>`,
+                )
+                .join('')
+            : '<li class="muted">No messages yet — be the first.</li>';
+        } catch (e) {
+          el.innerHTML = `<li class="muted">${needsKey(e) ? 'Add a project key (?key=) to use the demo.' : 'Could not load entries.'}</li>`;
+        }
       }
 
       async function loadFiles() {
-        const files = await api.files.list();
         const el = document.getElementById('files');
-        el.innerHTML = files.length
-          ? files
-              .map(
-                (f) =>
-                  `<li><a href="${api.files.url(f.id)}" target="_blank" rel="noopener">${escapeHtml(f.name)}</a> <span class="muted small">${f.size} bytes</span></li>`,
-              )
-              .join('')
-          : '<li class="muted">No files yet.</li>';
+        try {
+          const files = await api.files.list();
+          el.innerHTML = files.length
+            ? files
+                .map(
+                  (f) =>
+                    `<li><a href="${api.files.url(f.id)}" target="_blank" rel="noopener">${escapeHtml(f.name)}</a> <span class="muted small">${f.size} bytes</span></li>`,
+                )
+                .join('')
+            : '<li class="muted">No files yet.</li>';
+        } catch (e) {
+          el.innerHTML = `<li class="muted">${needsKey(e) ? 'Add a project key (?key=) to use the demo.' : 'Could not load files.'}</li>`;
+        }
       }
 
       document.getElementById('post-form').addEventListener('submit', async (e) => {
         e.preventDefault();
         const input = document.getElementById('msg');
         if (!input.value.trim()) return;
-        await api.data('guestbook').create({ message: input.value });
-        input.value = '';
+        try {
+          await api.data('guestbook').create({ message: input.value });
+          input.value = '';
+        } catch (e) {
+          notice(needsKey(e) ? 'Saving needs a project key — open this page as <code>?key=pk_…</code>.' : 'Could not save: ' + e.message);
+        }
       });
 
       // Live: new entries from any browser tab show up here without a refresh.
@@ -177,9 +206,13 @@ <h2 style="margin: 0 0 1.3rem">Everything a generated app needs</h2>
         e.preventDefault();
         const input = document.getElementById('file');
         if (!input.files[0]) return;
-        await api.files.upload(input.files[0]);
-        input.value = '';
-        loadFiles();
+        try {
+          await api.files.upload(input.files[0]);
+          input.value = '';
+          loadFiles();
+        } catch (e) {
+          notice(needsKey(e) ? 'Uploading needs a project key — open this page as <code>?key=pk_…</code>.' : 'Upload failed: ' + e.message);
+        }
       });
 
       loadEntries();
diff --git a/test/api.test.ts b/test/api.test.ts
index cd31f8e..0bb1ede 100644
--- a/test/api.test.ts
+++ b/test/api.test.ts
@@ -85,6 +85,16 @@ test('serves the SDK and llms.txt', async () => {
   assert.equal(llms.status, 200);
 });
 
+test('serves the homepage demo, which is multi-tenant aware (accepts a ?key=)', async () => {
+  const res = await fetch(`${base}/`);
+  assert.equal(res.status, 200);
+  assert.match(res.headers.get('content-type') ?? '', /text\/html/);
+  const html = await res.text();
+  // The demo reads a project key from the URL so it works on a multi-tenant server.
+  assert.match(html, /\?key=|searchParams\.get\('key'\)/);
+  assert.match(html, /mt-notice/);
+});
+
 test('serves the examples gallery and apps', async () => {
   for (const p of ['/examples.html', '/examples/todo.html', '/examples/chat.html', '/examples/notes.html']) {
     const res = await fetch(`${base}${p}`);

From 7768dec063ce65c8183e7a6dfd8adeefa50909d4 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sat, 13 Jun 2026 09:10:14 +0000
Subject: [PATCH 2/2] Demo: paste the project key (sessionStorage) instead of
 ?key= in the URL

Per review: a key in the URL can leak into history/logs and is easy to forget.
The demo now shows a "project key" box only on a multi-tenant server; the key is
held in sessionStorage (this tab only, cleared when it closes) and never touches
the URL. A "Clear" button forgets it. Entering or clearing the key reconnects the
SDK and refreshes the lists + live subscription. Test asserts the key-form +
sessionStorage handling.
---
 public/index.html | 95 +++++++++++++++++++++++++++++++++++++----------
 test/api.test.ts  |  6 ++-
 2 files changed, 80 insertions(+), 21 deletions(-)

diff --git a/public/index.html b/public/index.html
index 0a9cfc7..0c791ff 100644
--- a/public/index.html
+++ b/public/index.html
@@ -59,7 +59,13 @@ <h2 style="margin: 0 0 0.4rem">This page is talking to its own backend</h2>
           Everything below is served by the same instance, through <code>/sdk.js</code>. Open a second tab —
           new entries appear in both without a refresh (that's the realtime layer).
         </p>
-        <p id="mt-notice" class="muted small" style="display: none; margin: 0 0 1.3rem; max-width: 64ch; padding: 0.6rem 0.85rem; border: 1px solid var(--border); border-radius: 10px"></p>
+        <p id="mt-notice" class="muted small" style="display: none; margin: 0 0 0.8rem; max-width: 64ch; padding: 0.6rem 0.85rem; border: 1px solid var(--border); border-radius: 10px"></p>
+        <!-- Shown only on a multi-tenant server: paste a project key (kept in this tab only). -->
+        <form id="key-form" style="display: none; gap: 0.5rem; margin: 0 0 1.3rem; max-width: 64ch; align-items: center">
+          <input id="key-input" type="password" autocomplete="off" placeholder="Project key (pk_…)" style="flex: 1" />
+          <button type="submit">Use key</button>
+          <button type="button" id="key-clear" class="muted" style="display: none">Clear</button>
+        </form>
         <div class="grid" style="grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))">
           <section class="card">
             <h3 style="margin: 0 0 0.8rem">💬 Guestbook <span class="muted small">data + live sync</span></h3>
@@ -110,15 +116,20 @@ <h2 style="margin: 0 0 1.3rem">Everything a generated app needs</h2>
     <script src="/sdk.js"></script>
     <script>
       // In multi-tenant mode every data/file call needs a project key. The public
-      // demo has none, so accept one from the URL (?key=pk_…) for showcases.
-      const demoKey = new URLSearchParams(location.search).get('key');
-      const api = demoKey ? Zero('', { apiKey: demoKey }) : Zero(); // same-origin
+      // demo has none, so let the operator paste one. It's kept in sessionStorage
+      // (this tab only, gone when it closes) — never in the URL.
+      const KEY_STORE = 'zero_demo_key';
+      let demoKey = sessionStorage.getItem(KEY_STORE) || null;
+      let api = demoKey ? Zero('', { apiKey: demoKey }) : Zero(); // same-origin
+      let room = null;
       const notice = (html) => {
         const el = document.getElementById('mt-notice');
+        if (!html) return void (el.style.display = 'none');
         el.innerHTML = html;
         el.style.display = '';
       };
       const needsKey = (e) => e && e.status === 401;
+      const keyHint = 'Paste a project key above to use the demo.';
       const escapeHtml = (s) =>
         String(s).replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]));
 
@@ -129,12 +140,16 @@ <h2 style="margin: 0 0 1.3rem">Everything a generated app needs</h2>
           const provider = info.endpoints && info.endpoints.ai && info.endpoints.ai.provider;
           document.getElementById('status').innerHTML =
             `<span class="dot live"></span> live${info.version ? ' · v' + escapeHtml(info.version) : ''}${provider ? ' · ai:' + escapeHtml(provider) : ''}`;
-          // Multi-tenant without a key: the demo can't read/write — explain how to use it.
-          if (info.mode === 'multi-tenant' && !demoKey) {
-            notice(
-              'This server runs in <b>multi-tenant</b> mode, so the live demo needs a project key. ' +
-                'Create one in the <a href="/admin">dashboard</a>, then open this page as <code>?key=pk_…</code>.',
-            );
+          // Multi-tenant: reveal the key box; explain it if no key is set yet.
+          if (info.mode === 'multi-tenant') {
+            document.getElementById('key-form').style.display = 'flex';
+            updateKeyStatus();
+            if (!demoKey) {
+              notice(
+                'This server runs in <b>multi-tenant</b> mode, so the live demo needs a project key. ' +
+                  'Create one in the <a href="/admin">dashboard</a> and paste it above.',
+              );
+            }
           }
         } catch {
           document.getElementById('status').textContent = 'offline';
@@ -164,7 +179,7 @@ <h2 style="margin: 0 0 1.3rem">Everything a generated app needs</h2>
                 .join('')
             : '<li class="muted">No messages yet — be the first.</li>';
         } catch (e) {
-          el.innerHTML = `<li class="muted">${needsKey(e) ? 'Add a project key (?key=) to use the demo.' : 'Could not load entries.'}</li>`;
+          el.innerHTML = `<li class="muted">${needsKey(e) ? keyHint : 'Could not load entries.'}</li>`;
         }
       }
 
@@ -181,7 +196,7 @@ <h2 style="margin: 0 0 1.3rem">Everything a generated app needs</h2>
                 .join('')
             : '<li class="muted">No files yet.</li>';
         } catch (e) {
-          el.innerHTML = `<li class="muted">${needsKey(e) ? 'Add a project key (?key=) to use the demo.' : 'Could not load files.'}</li>`;
+          el.innerHTML = `<li class="muted">${needsKey(e) ? keyHint : 'Could not load files.'}</li>`;
         }
       }
 
@@ -193,13 +208,56 @@ <h2 style="margin: 0 0 1.3rem">Everything a generated app needs</h2>
           await api.data('guestbook').create({ message: input.value });
           input.value = '';
         } catch (e) {
-          notice(needsKey(e) ? 'Saving needs a project key — open this page as <code>?key=pk_…</code>.' : 'Could not save: ' + e.message);
+          notice(needsKey(e) ? 'Saving needs a project key — paste one above.' : 'Could not save: ' + e.message);
         }
       });
 
-      // Live: new entries from any browser tab show up here without a refresh.
-      api.data('guestbook').subscribe((change) => {
-        if (change.type === 'created' || change.type === 'deleted') loadEntries();
+      // (Re)connect the SDK with the current key: refresh both lists and the live
+      // guestbook subscription. Called on load and whenever the key changes.
+      function connect() {
+        api = demoKey ? Zero('', { apiKey: demoKey }) : Zero();
+        if (room) {
+          try {
+            room.close();
+          } catch {}
+        }
+        room = api.data('guestbook').subscribe((change) => {
+          if (change.type === 'created' || change.type === 'deleted') loadEntries();
+        });
+        loadEntries();
+        loadFiles();
+      }
+
+      function updateKeyStatus() {
+        const clear = document.getElementById('key-clear');
+        const input = document.getElementById('key-input');
+        if (demoKey) {
+          input.placeholder = 'Using a project key';
+          clear.style.display = '';
+        } else {
+          input.placeholder = 'Project key (pk_…)';
+          clear.style.display = 'none';
+        }
+      }
+
+      document.getElementById('key-form').addEventListener('submit', (e) => {
+        e.preventDefault();
+        const input = document.getElementById('key-input');
+        const v = input.value.trim();
+        if (!v) return;
+        demoKey = v;
+        sessionStorage.setItem(KEY_STORE, v);
+        input.value = '';
+        notice('');
+        updateKeyStatus();
+        connect();
+      });
+
+      document.getElementById('key-clear').addEventListener('click', () => {
+        demoKey = null;
+        sessionStorage.removeItem(KEY_STORE);
+        updateKeyStatus();
+        connect();
       });
 
       document.getElementById('file-form').addEventListener('submit', async (e) => {
@@ -211,12 +269,11 @@ <h2 style="margin: 0 0 1.3rem">Everything a generated app needs</h2>
           input.value = '';
           loadFiles();
         } catch (e) {
-          notice(needsKey(e) ? 'Uploading needs a project key — open this page as <code>?key=pk_…</code>.' : 'Upload failed: ' + e.message);
+          notice(needsKey(e) ? 'Uploading needs a project key — paste one above.' : 'Upload failed: ' + e.message);
         }
       });
 
-      loadEntries();
-      loadFiles();
+      connect();
     </script>
   </body>
 </html>
diff --git a/test/api.test.ts b/test/api.test.ts
index 0bb1ede..d6812e1 100644
--- a/test/api.test.ts
+++ b/test/api.test.ts
@@ -90,8 +90,10 @@ test('serves the homepage demo, which is multi-tenant aware (accepts a ?key=)',
   assert.equal(res.status, 200);
   assert.match(res.headers.get('content-type') ?? '', /text\/html/);
   const html = await res.text();
-  // The demo reads a project key from the URL so it works on a multi-tenant server.
-  assert.match(html, /\?key=|searchParams\.get\('key'\)/);
+  // The demo lets you paste a project key (kept in sessionStorage) so it works on
+  // a multi-tenant server, and shows a notice explaining how.
+  assert.match(html, /key-form/);
+  assert.match(html, /sessionStorage/);
   assert.match(html, /mt-notice/);
 });