fix(playground): pass token via URL fragment, capture currentIndex at schedule time

Author: msranjana

packages/moss-cli/src/moss_cli/commands/playground.py

@@ -114,10 +114,6 @@ def _serve_index(self) -> None:
             self._send_json(500, {"error": "Playground HTML not found"})
             return
         html = PLAYGROUND_HTML.read_text(encoding="utf-8")
-        html = html.replace(
-            "</title>",
-            f'</title>\n<meta name="moss-token" content="{self._token}" />',
-        )
         self._send_html(html)
 
     def _handle_list_indexes(self) -> None:
@@ -270,6 +266,7 @@ def playground_command(
 
     server = HTTPServer(server_addr, PlaygroundHandler)
     url = f"http://127.0.0.1:{final_port}"
+    frag_url = f"{url}/#{PlaygroundHandler._token}"
 
     console.print()
     console.print("  [bold]Moss Playground[/bold]")
@@ -279,7 +276,7 @@ def playground_command(
     console.print()
 
     if not no_open:
-        webbrowser.open(url)
+        webbrowser.open(frag_url)
 
     try:
         server.serve_forever()

packages/moss-cli/src/moss_cli/playground/index.html

@@ -135,7 +135,7 @@ <h1>Moss <span>Playground</span></h1>
 </div>
 
 <script type="module">
-const mossToken = document.querySelector('meta[name="moss-token"]')?.getAttribute('content') || '';
+const mossToken = location.hash.replace(/^#/, '') || '';
 
 function apiFetch(path, options = {}) {
   const headers = { ...options.headers, 'X-Moss-Token': mossToken };
@@ -227,6 +227,9 @@ <h1>Moss <span>Playground</span></h1>
   const name = select.value;
   if (!name) return;
 
+  ++requestId;
+  if (searchTimeout) clearTimeout(searchTimeout);
+
   loadBtn.disabled = true;
   loadBtn.innerHTML = '<span class="spinner">&#9696;</span> Loading...';
   loadStatus.classList.remove('hidden');
@@ -344,6 +347,7 @@ <h1>Moss <span>Playground</span></h1>
 
   if (searchTimeout) clearTimeout(searchTimeout);
   const thisRequestId = ++requestId;
+  const idx = currentIndex;
   searchTimeout = setTimeout(async () => {
     const placeholder = results.querySelector('.empty-state');
     if (placeholder) placeholder.innerHTML = '<p>Searching...</p>';
@@ -352,7 +356,7 @@ <h1>Moss <span>Playground</span></h1>
       const res = await apiFetch('/api/query', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ name: currentIndex, query, topK, alpha }),
+        body: JSON.stringify({ name: idx, query, topK, alpha }),
       });
       if (!res.ok) {
         const err = await res.json();
@@ -370,6 +374,8 @@ <h1>Moss <span>Playground</span></h1>
 }
 
 select.addEventListener('change', () => {
+  ++requestId;
+  if (searchTimeout) clearTimeout(searchTimeout);
   updateLoadBtn();
   const name = select.value;
   const idx = indexes.find(i => i.name === name);