Switch frontend to /gradio_api/call/v2 protocol; join before SSE

The /queue/data SSE handler 404s on its first tick if the session_hash
isn't registered in pending_messages_per_session yet. Opening the
EventSource BEFORE POSTing to /queue/join let the SSE handler win that
race, raising HTTPException(404) after SSE headers were already flushed
('Caught handled exception, but response already started').

Move to Gradio v6's per-event /call/v2/<api_name>/<event_id> protocol:
1. POST /gradio_api/call/v2/chat with a named-key body -> {event_id}
2. GET /gradio_api/call/v2/chat/<event_id> for SSE
The join completes and registers the session before the stream opens, so
no race. The stream emits event:generating / event:complete with data as
the raw output array ([0] = the yielded str), matching chat()'s generator.

Verified end-to-end against the live Space: events stream correctly.
Default model stays thinkingmachines/Inkling:auto.

Co-Authored-By: Claude <noreply@anthropic.com>

index.html

@@ -138,7 +138,7 @@
       <button id="stop" title="Stop generating">Stop</button>
       <button id="send">Send</button>
     </div>
-    <div class="hint">Backend: gradio.Server · SSE from <code>/gradio_api/queue/join</code></div>
+    <div class="hint">Backend: gradio.Server · SSE from <code>/gradio_api/call/v2/chat</code></div>
   </div>
 
 <script>
@@ -224,13 +224,9 @@ function setBusy(busy, msg = "") {
   statusEl.textContent = msg;
 }
 
-// Random session hash per client. Actually the backend uses session_hash for
-// queue-grouping, not auth — a fresh UUID per chat session is fine.
-function uid() {
-  return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c =>
-    (c ^ (crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4)).toString(16));
-}
-const sessionHash = uid();
+// The /gradio_api/call/v2 protocol is per-event, so the server owns the
+// session scoping via the event_id returned by the join POST — the frontend
+// needs no session hash of its own.
 
 /**
  * Hit a JSON endpoint and return its parsed body. Throws with the response
@@ -252,88 +248,86 @@ async function jpost(path, body) {
 /**
  * Stream a chat completion. Resolves with the final assistant text.
  *
- * Opens an EventSource BEFORE the POST so we don't miss the "process_starts"
- * handler that the server emits. We cookie-cutter a Gradio fn_index of 0
- * because we only have one @app.api() endpoint.
+ * Wire protocol (Gradio v6 "call" API — avoids the /queue/data session race):
+ *   1. POST /gradio_api/call/v2/chat   with a NAMED-key body
+ *        { messages, provider, system_prompt, temperature, max_tokens }
+ *        → returns { event_id }
+ *   2. GET  /gradio_api/call/v2/chat/<event_id>   opens an SSE stream that
+ *        emits, per Gradio's simple_predict_get process_msg:
+ *          event: generating\ndata: [latest_yield]\n\n   (each yield of the fn)
+ *          event: complete\ndata: [final]\n\n           (generator returned)
+ *          event: error\ndata: "<msg>"\n\n             (failure)
+ *          event: heartbeat\ndata: null\n\n            (keepalive)
+ *        `data` is the raw output array; [0] is the single str our generator
+ *        yields. Because the join POST runs to completion before we open the
+ *        SSE, the session is already registered on the server when the
+ *        stream handler checks it — so no 404 "response already started".
  */
 async function streamChat(payload) {
-  // 1) Open SSE first.
-  const sseUrl = `/gradio_api/queue/data?session_hash=${encodeURIComponent(sessionHash)}`;
+  // 1) Join first — named keys, server resolves them to positional args
+  //    via the /chat endpoint's parameter schema.
+  const join = await jpost("/gradio_api/call/v2/chat", payload);
+  const eventId = join.event_id;
+  if (!eventId) throw new Error("Server did not return an event_id.");
+
+  // 2) Open the per-event SSE stream.
+  const sseUrl = `/gradio_api/call/v2/chat/${encodeURIComponent(eventId)}`;
   const es = new EventSource(sseUrl, { withCredentials: false });
   liveStream = es;
 
-  const done = new Promise((resolve, reject) => {
-    let opened = false;
+  return new Promise((resolve, reject) => {
     let latest = "";
-    let completed = false;
+    let settled = false;
 
-    // The 5-second EventSource handshake can race with the first POST; if
-    // we never get an open event in reasonable time, fail loudly.
-    es.addEventListener("open", () => { opened = true; });
+    const finish = (fn) => {
+      if (settled) return;
+      settled = true;
+      setTimeout(() => { try { es.close(); } catch (_) {} }, 0);
+      fn();
+    };
 
-    es.addEventListener("data", (ev) => {
-      // Each "data" event JSON-parses to { data: [latest_yield...] }.
+    // Each intermediate yield of chat()'s generator arrives here. `data`
+    // is the raw output array, so [0] is the accumulated-so-far string.
+    es.addEventListener("generating", (ev) => {
       try {
-        const msg = JSON.parse(ev.data);
-        const arr = msg.data ?? msg;
+        const arr = JSON.parse(ev.data);
         if (Array.isArray(arr) && typeof arr[0] === "string") {
           latest = arr[0];
           onDelta(latest);
         }
-      } catch (_) { /* ignore non-JSON heartbeats */ }
+      } catch (_) { /* ignore malformed frames */ }
     });
 
+    // Generator returned. `data` is the final output array.
     es.addEventListener("complete", (ev) => {
-      completed = true;
-      setTimeout(() => { try { es.close(); } catch (_) {} }, 0);
-      resolve(latest);
-    });
-
-    // The backend may push an explicit "error" event before complete, so
-    // surface those as a real message rather than the generic shutdown.
-    es.addEventListener("error_event", (ev) => {
-      let payload = "";
-      try { payload = JSON.parse(ev.data)?.message ?? ""; } catch (_) {}
-      completed = true;
-      try { es.close(); } catch (_) {}
-      if (payload) reject(new Error(payload));
-      else if (!opened) reject(new Error("EventSource failed to open — is the backend reachable?"));
-      else if (!latest) reject(new Error("Stream closed without producing any output."));
-      else resolve(latest);          // partial text is better than nothing
+      try {
+        const arr = JSON.parse(ev.data);
+        if (Array.isArray(arr) && typeof arr[0] === "string") {
+          latest = arr[0];
+          onDelta(latest);
+        }
+      } catch (_) { /* keep last partial */ }
+      finish(() => resolve(latest));
     });
 
+    // Server-side error: data is a plain string message.
     es.addEventListener("error", (ev) => {
-      // The generic "error" event fires in many states — most importantly
-      // AFTER close on browser-side, which we don't want to flag as failure.
-      if (completed) return;
+      let msg = "Stream error.";
+      if (ev.data) {
+        try { msg = JSON.parse(ev.data) ?? msg; } catch (_) { msg = ev.data; }
+      }
+      finish(() => reject(new Error(typeof msg === "string" ? msg : "Stream error.")));
     });
-  });
 
-  // 2) Actually enqueue the request.
-  //
-  // The queue sends your generator function's arguments as positional
-  // entries of `data`, one per parameter — NOT as a single bundled dict.
-  // Since @app.api() on `chat(messages, provider, system_prompt,
-  // temperature, max_tokens)` registers 5 input components, we unpack the
-  // payload here so the order matches the fn signature. (fn_index 0 is the
-  // only @app.api() endpoint on this Space, so it's always 0.)
-  const joinBody = {
-    data: [
-      payload.messages,
-      payload.provider,
-      payload.system_prompt,
-      payload.temperature,
-      payload.max_tokens,
-    ],
-    fn_index: 0,
-    session_hash: sessionHash,
-    trigger_id: 0,
-    event_data: null,
-  };
-  // jpost will throw if the join fails; reject the streaming promise too.
-  await jpost("/gradio_api/queue/join", joinBody);
-
-  return done;
+    // EventSource's generic onerror fires both on real failures and on a
+    // clean server-side close. Treat it as terminal only if we never
+    // completed; otherwise the complete/error handlers above already ran.
+    es.onerror = () => {
+      if (settled) return;
+      finish(() => reject(new Error(
+        latest ? null : "Connection lost before any output arrived.")));
+    };
+  });
 }
 
 async function send() {