relmio 0.6.0 → 0.8.0

package/src/ui/local.html

@@ -10,7 +10,7 @@
     <title>Relmio | Local Endpoint Setup</title>
     <link
       rel="icon"
-      href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='%23137c74' d='M7 8h19l31 24H41L26 20v10L7 17Z'/%3E%3Cpath fill='%2312211f' d='M7 47l19-13v10l15-12h16L26 56H7Z'/%3E%3C/svg%3E"
+      href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='%23137c74' d='M8 13 28 5v38c0 4-2 7-6 9L8 59Z'/%3E%3Cpath fill='%2312211f' d='M36 5l11 5c6 3 9 8 9 15v9c0 3 1 5 3 7l3 3c3 3 3 8 0 11s-8 3-11 0L40 44c-3-3-4-6-4-10Z'/%3E%3C/svg%3E"
     />
     <link rel="stylesheet" href="/styles.css" />
     <link rel="stylesheet" href="/local.css" />
@@ -28,8 +28,8 @@
           aria-hidden="true"
           focusable="false"
         >
-          <path fill="#137c74" d="M7 8h19l31 24H41L26 20v10L7 17Z" />
-          <path fill="#12211f" d="M7 47l19-13v10l15-12h16L26 56H7Z" />
+          <path fill="#137c74" d="M8 13 28 5v38c0 4-2 7-6 9L8 59Z" />
+          <path fill="#12211f" d="M36 5l11 5c6 3 9 8 9 15v9c0 3 1 5 3 7l3 3c3 3 3 8 0 11s-8 3-11 0L40 44c-3-3-4-6-4-10Z" />
         </svg>
         <span>Relmio</span>
       </div>
@@ -90,9 +90,10 @@
     <main id="main-content" class="shell" tabindex="-1">
       <aside class="rail" aria-label="Local setup progress and safety">
         <section class="intro" aria-labelledby="page-title">
-          <h1 id="page-title">Run Relmio on localhost</h1>
+          <p class="local-eyebrow">Local pre-flight</p>
+          <h1 id="page-title">One boundary at a time</h1>
           <p class="lede">
-            Choose the official credential path that matches your client. All
+            Run Relmio on localhost. Choose the official credential path that matches your client. All
             three options run in hardened Docker containers and bind only to
             <code>127.0.0.1</code>.
           </p>
@@ -142,6 +143,13 @@
             hidden
           >
             <span id="global-error-text"></span>
+            <a
+              id="local-image-build-troubleshooting"
+              href="https://relmio.vercel.app/docs/troubleshooting#local-image-build-failed"
+              target="_blank"
+              rel="noopener noreferrer"
+              hidden
+            >View troubleshooting</a>
           </div>
         </div>
       </aside>
@@ -504,6 +512,106 @@
           </div>
         </section>
 
+        <section
+          id="chat-tester"
+          class="chat-tester"
+          aria-labelledby="chat-tester-title"
+          hidden
+        >
+          <div class="chat-tester-heading">
+            <div>
+              <p class="section-label">Streaming verification console</p>
+              <h3 id="chat-tester-title">Test this local Chat Adapter</h3>
+              <p>
+                Relmio sends this browser only to its same-origin local wizard.
+                The wizard then calls the literal loopback adapter address.
+              </p>
+            </div>
+            <button
+              id="chat-tester-reset"
+              class="button secondary"
+              type="button"
+            >
+              Forget tester
+            </button>
+          </div>
+
+          <div class="chat-tester-route" aria-label="Request route">
+            <span><strong>Browser</strong><small>Same origin</small></span>
+            <i aria-hidden="true">→</i>
+            <span><strong>Wizard relay</strong><small>Encrypted session</small></span>
+            <i aria-hidden="true">→</i>
+            <span><strong>Chat Adapter</strong><small>127.0.0.1 only</small></span>
+          </div>
+
+          <form id="chat-tester-secure-form" class="chat-tester-form">
+            <fieldset>
+              <legend>Secure a temporary test session</legend>
+              <label class="field">
+                <span>Adapter base URL</span>
+                <input
+                  id="chat-tester-endpoint"
+                  type="url"
+                  inputmode="url"
+                  autocomplete="off"
+                  spellcheck="false"
+                  maxlength="64"
+                  placeholder="http://127.0.0.1:14501"
+                  pattern="http:\/\/127\.0\.0\.1:[1-9][0-9]{0,4}\/?"
+                  required
+                />
+                <small>Literal <code>http://127.0.0.1:PORT</code> only.</small>
+              </label>
+              <label class="field">
+                <span>Client credential</span>
+                <input
+                  id="chat-tester-credential"
+                  type="password"
+                  autocomplete="off"
+                  autocapitalize="none"
+                  spellcheck="false"
+                  maxlength="512"
+                  required
+                />
+                <small id="chat-tester-security-note">
+                  The field is cleared as soon as you secure it. Encryption prevents accidental transit/storage exposure but not a compromised browser, extension, or local machine.
+                </small>
+              </label>
+            </fieldset>
+            <button id="chat-tester-secure" class="button primary" type="submit">
+              Secure credential for this test
+            </button>
+          </form>
+
+          <form id="chat-tester-message-form" class="chat-tester-message-form" hidden>
+            <label class="field" for="chat-tester-input">
+              <span>Message</span>
+              <textarea
+                id="chat-tester-input"
+                rows="3"
+                maxlength="8192"
+                spellcheck="true"
+                required
+              ></textarea>
+            </label>
+            <button id="chat-tester-send" class="button primary" type="submit">
+              Send test message
+            </button>
+          </form>
+
+          <p id="chat-tester-status" class="chat-tester-status" role="status" aria-live="polite">
+            Secure the local client credential to begin.
+          </p>
+          <p id="chat-tester-error" class="chat-tester-error" role="alert" hidden></p>
+          <ol
+            id="chat-tester-transcript"
+            class="chat-tester-transcript"
+            role="log"
+            aria-live="polite"
+            aria-label="Local adapter test transcript"
+          ></ol>
+        </section>
+
         <aside id="client-warning" class="final-note"></aside>
 
         <div class="actions">

package/src/ui/local.js

@@ -10,6 +10,14 @@ const state = {
   planId: null,
   plan: null,
   installedTarget: null,
+  chatTester: {
+    conversationId: null,
+    encryptedCredential: null,
+    endpointBaseUrl: null,
+    expiresAt: null,
+    generation: 0,
+    keyId: null,
+  },
 };
 
 const messageBox = element("global-message");
@@ -31,11 +39,16 @@ function setMessage(text) {
 
 function clearError() {
   errorText.textContent = "";
+  element("local-image-build-troubleshooting").hidden = true;
   errorBox.hidden = true;
 }
 
 function showError(error) {
-  errorText.textContent = error?.message ?? "Something went wrong.";
+  const localImageBuildFailed = error?.message === "Local image build failed.";
+  errorText.textContent = localImageBuildFailed
+    ? "Relmio could not build the local image. Check that Docker is running, has enough disk space, and can pull its base image."
+    : error?.message ?? "Something went wrong.";
+  element("local-image-build-troubleshooting").hidden = !localImageBuildFailed;
   errorBox.hidden = false;
   errorBox.focus();
 }
@@ -118,6 +131,123 @@ async function api(path, { method = "GET", body } = {}) {
   return result;
 }
 
+function parseRelmioStreamEvent(block) {
+  const dataLines = [];
+  let event;
+  for (const line of block.split(/\r?\n/u)) {
+    if (line.startsWith("event:")) {
+      event = line.slice(6).trim();
+    } else if (line.startsWith("data:")) {
+      dataLines.push(line.slice(5).trimStart());
+    }
+  }
+  if (!event || dataLines.length === 0) {
+    throw new Error("The local wizard returned an unreadable stream.");
+  }
+  let data;
+  try {
+    data = JSON.parse(dataLines.join("\n"));
+  } catch {
+    throw new Error("The local wizard returned an unreadable stream.");
+  }
+  if (!data || typeof data !== "object" || Array.isArray(data)) {
+    throw new Error("The local wizard returned an unexpected stream event.");
+  }
+  return { event, data };
+}
+
+async function streamChatTesterMessage(body, onEvent) {
+  if (!token) {
+    throw new Error(
+      "This wizard link is incomplete. Close this tab and open the full URL printed by the active Relmio terminal.",
+    );
+  }
+  let response;
+  try {
+    response = await fetch("/api/local/chat-test/message", {
+      method: "POST",
+      headers: {
+        Accept: "text/event-stream",
+        "Content-Type": "application/json",
+        "X-Setup-Token": token,
+      },
+      body: JSON.stringify(body),
+    });
+  } catch {
+    throw new Error("The local Relmio wizard is not reachable. Keep its terminal open and try again.");
+  }
+  if (
+    !response.ok ||
+    !response.body ||
+    !/^text\/event-stream(?:\s*;|$)/iu.test(response.headers.get("content-type") ?? "") ||
+    response.headers.get("x-relmio-stream") !== "v1"
+  ) {
+    throw new Error("The local wizard could not start a safe response stream.");
+  }
+
+  const reader = response.body.getReader();
+  const decoder = new TextDecoder();
+  let buffer = "";
+  let exhausted = false;
+  let streamError;
+  let terminal;
+  const consume = (block) => {
+    if (!block.trim() || block.trimStart().startsWith(":")) return;
+    if (terminal) {
+      throw new Error("The local wizard sent data after the terminal event.");
+    }
+    const item = parseRelmioStreamEvent(block);
+    if (item.event === "start") return;
+    if (item.event === "progress" || item.event === "delta") {
+      onEvent(item.event, item.data);
+      return;
+    }
+    if (item.event === "error") {
+      const messages = {
+        timeout: "The adapter test took too long. Try again.",
+        upstream_failed: "The local adapter could not complete this response.",
+      };
+      streamError = messages[item.data.code] ?? messages.upstream_failed;
+      return;
+    }
+    if (item.event === "terminal") {
+      terminal = item.data;
+      return;
+    }
+    throw new Error("The local wizard returned an unexpected stream event.");
+  };
+
+  try {
+    for (;;) {
+      const { done, value } = await reader.read();
+      if (done) {
+        exhausted = true;
+        break;
+      }
+      buffer += decoder.decode(value, { stream: true });
+      const blocks = buffer.split(/\r?\n\r?\n/u);
+      buffer = blocks.pop() ?? "";
+      for (const block of blocks) consume(block);
+    }
+    buffer += decoder.decode();
+    if (buffer.trim()) consume(buffer);
+  } finally {
+    if (!exhausted) {
+      try {
+        await reader.cancel();
+      } catch {
+        // The same-origin stream may already have closed after a parse failure.
+      }
+    }
+    reader.releaseLock();
+  }
+
+  if (!terminal || terminal.outcome !== "completed" || typeof terminal.conversationId !== "string") {
+    throw new Error(streamError ?? "The adapter response ended before completion.");
+  }
+  return { conversationId: terminal.conversationId };
+}
+
 function selectedTarget() {
   return document.querySelector('input[name="target"]:checked')?.value;
 }
@@ -269,6 +399,10 @@ function renderInstallResult(result) {
   element("result-credential").textContent = result.clientCredential;
   element("codex-production-warning").hidden = openAiApi;
   element("codex-login").hidden = openAiApi;
+  element("chat-tester").hidden = !codexChat;
+  if (codexChat && !state.chatTester.keyId) {
+    element("chat-tester-endpoint").value = result.endpoint;
+  }
   element("codex-production-warning-title").textContent = codexChat
     ? "Experimental Chat Adapter — trusted local backends or development servers only"
     : "Experimental WebSocket transport";
@@ -300,6 +434,115 @@ function renderInstallResult(result) {
   );
 }
 
+function setChatTesterStatus(text) {
+  element("chat-tester-status").textContent = text;
+}
+
+function clearChatTesterError() {
+  element("chat-tester-error").textContent = "";
+  element("chat-tester-error").hidden = true;
+}
+
+function showChatTesterError(error) {
+  element("chat-tester-error").textContent =
+    error?.message ?? "The local adapter test could not be completed.";
+  element("chat-tester-error").hidden = false;
+}
+
+function appendChatTesterTurn(kind, text) {
+  const item = document.createElement("li");
+  const heading = document.createElement("strong");
+  const content = document.createElement("p");
+  heading.textContent = kind === "user" ? "You" : "Local adapter";
+  content.textContent = text;
+  item.className = `chat-tester-turn chat-tester-turn-${kind}`;
+  item.append(heading, content);
+  element("chat-tester-transcript").append(item);
+  return content;
+}
+
+function clearChatTesterState() {
+  state.chatTester.conversationId = null;
+  state.chatTester.encryptedCredential = null;
+  state.chatTester.endpointBaseUrl = null;
+  state.chatTester.expiresAt = null;
+  state.chatTester.keyId = null;
+  state.chatTester.generation += 1;
+  element("chat-tester-credential").value = "";
+  element("chat-tester-endpoint").value = "";
+  element("chat-tester-input").value = "";
+  element("chat-tester-secure-form").hidden = false;
+  element("chat-tester-message-form").hidden = true;
+  element("chat-tester-transcript").replaceChildren();
+  clearChatTesterError();
+}
+
+function assertChatTesterKey(result) {
+  if (
+    !result ||
+    typeof result !== "object" ||
+    typeof result.keyId !== "string" ||
+    typeof result.expiresAt !== "string" ||
+    result.algorithm !== "RSA-OAEP-256" ||
+    !result.publicKeyJwk ||
+    result.publicKeyJwk.kty !== "RSA" ||
+    typeof result.publicKeyJwk.n !== "string" ||
+    typeof result.publicKeyJwk.e !== "string"
+  ) {
+    throw new Error("The local tester returned an unexpected encryption key.");
+  }
+  return result;
+}
+
+async function encryptChatTesterCredential(publicKeyJwk, clientCredential) {
+  if (!window.crypto?.subtle) {
+    throw new Error("This browser cannot create the required local test encryption key.");
+  }
+  const publicKey = await window.crypto.subtle.importKey(
+    "jwk",
+    publicKeyJwk,
+    { name: "RSA-OAEP", hash: "SHA-256" },
+    false,
+    ["encrypt"],
+  );
+  const encrypted = await window.crypto.subtle.encrypt(
+    { name: "RSA-OAEP" },
+    publicKey,
+    new TextEncoder().encode(clientCredential),
+  );
+  const bytes = new Uint8Array(encrypted);
+  let binary = "";
+  for (const byte of bytes) {
+    binary += String.fromCodePoint(byte);
+  }
+  return window.btoa(binary);
+}
+
+async function forgetChatTester({ announce = true } = {}) {
+  const keyId = state.chatTester.keyId;
+  clearChatTesterState();
+  if (!keyId) {
+    if (announce) {
+      setChatTesterStatus("The tester is cleared. Secure a credential to begin again.");
+    }
+    return;
+  }
+  try {
+    await api("/api/local/chat-test/reset", {
+      method: "POST",
+      body: { keyId },
+    });
+    if (announce) {
+      setChatTesterStatus("The tester key and transcript were forgotten.");
+    }
+  } catch (error) {
+    if (announce) {
+      showChatTesterError(error);
+      setChatTesterStatus("The browser tester was cleared. The local key will expire shortly.");
+    }
+  }
+}
+
 function validateVerificationUrl(value) {
   if (typeof value !== "string" || value.length > 2048) {
     throw new Error("Relmio refused an unexpected sign-in destination.");
@@ -519,6 +762,9 @@ element("rotate-credential-button").addEventListener("click", async (event) => {
     "Generating a replacement credential before activating it…",
   );
   try {
+    if (isCodexChat(state.installedTarget)) {
+      await forgetChatTester({ announce: false });
+    }
     const staged = await api("/api/local/client-credential/rotate", {
       method: "POST",
       body: { target: state.installedTarget },
@@ -544,6 +790,154 @@ element("rotate-credential-button").addEventListener("click", async (event) => {
   }
 });
 
+element("chat-tester-secure-form").addEventListener("submit", async (event) => {
+  event.preventDefault();
+  const form = event.currentTarget;
+  const button = element("chat-tester-secure");
+  const resetButton = element("chat-tester-reset");
+  const endpointInput = element("chat-tester-endpoint");
+  const clientCredentialInput = element("chat-tester-credential");
+  if (!form.reportValidity()) {
+    return;
+  }
+
+  clearChatTesterError();
+  let clientCredential = clientCredentialInput.value;
+  clientCredentialInput.value = "";
+  let issuedKey;
+  resetButton.disabled = true;
+  setBusy(button, true, "Securing credential…");
+  setChatTesterStatus("Creating a short-lived local encryption key…");
+  try {
+    issuedKey = assertChatTesterKey(
+      await api("/api/local/chat-test/key", { method: "POST", body: {} }),
+    );
+    const encryptedCredential = await encryptChatTesterCredential(
+      issuedKey.publicKeyJwk,
+      clientCredential,
+    );
+    clientCredential = undefined;
+    state.chatTester.conversationId = null;
+    state.chatTester.encryptedCredential = encryptedCredential;
+    state.chatTester.endpointBaseUrl = endpointInput.value;
+    state.chatTester.expiresAt = issuedKey.expiresAt;
+    state.chatTester.keyId = issuedKey.keyId;
+    element("chat-tester-secure-form").hidden = true;
+    element("chat-tester-message-form").hidden = false;
+    setChatTesterStatus("Temporary test session secured. Send a message before the key expires.");
+    element("chat-tester-input").focus();
+  } catch (error) {
+    clientCredential = undefined;
+    if (issuedKey?.keyId) {
+      try {
+        await api("/api/local/chat-test/reset", {
+          method: "POST",
+          body: { keyId: issuedKey.keyId },
+        });
+      } catch {
+        // The only remaining server material is an expiring private key.
+      }
+    }
+    clearChatTesterState();
+    showChatTesterError(error);
+    setChatTesterStatus("The credential was cleared. Secure it again to retry.");
+  } finally {
+    clientCredential = undefined;
+    clientCredentialInput.value = "";
+    resetButton.disabled = false;
+    setBusy(button, false);
+  }
+});
+
+element("chat-tester-message-form").addEventListener("submit", async (event) => {
+  event.preventDefault();
+  const form = event.currentTarget;
+  const button = element("chat-tester-send");
+  const resetButton = element("chat-tester-reset");
+  const input = element("chat-tester-input");
+  if (!form.reportValidity()) {
+    return;
+  }
+  if (
+    !state.chatTester.keyId ||
+    !state.chatTester.encryptedCredential ||
+    !state.chatTester.endpointBaseUrl
+  ) {
+    showChatTesterError(
+      new Error("This test credential has expired or was forgotten. Secure it again."),
+    );
+    return;
+  }
+
+  clearChatTesterError();
+  const text = input.value;
+  const generation = state.chatTester.generation;
+  input.value = "";
+  appendChatTesterTurn("user", text);
+  const assistantContent = appendChatTesterTurn("assistant", "");
+  resetButton.disabled = true;
+  setBusy(button, true, "Streaming response…");
+  setChatTesterStatus("Connecting to the loopback adapter through the secured local wizard…");
+  try {
+    const result = await streamChatTesterMessage(
+      {
+        endpointBaseUrl: state.chatTester.endpointBaseUrl,
+        keyId: state.chatTester.keyId,
+        encryptedCredential: state.chatTester.encryptedCredential,
+        input: text,
+        ...(state.chatTester.conversationId
+          ? { conversationId: state.chatTester.conversationId }
+          : {}),
+      },
+      (event, data) => {
+        if (state.chatTester.generation !== generation) return;
+        if (event === "progress") {
+          setChatTesterStatus("The adapter is working on the response…");
+        } else if (event === "delta" && typeof data.text === "string") {
+          assistantContent.textContent += data.text;
+          setChatTesterStatus("Streaming the adapter response…");
+        }
+      },
+    );
+    if (state.chatTester.generation !== generation) {
+      return;
+    }
+    state.chatTester.conversationId = result.conversationId;
+    if (!assistantContent.textContent) {
+      throw new Error("The local adapter completed without a visible response.");
+    }
+    setChatTesterStatus("Response received. Continue this conversation or forget the tester.");
+  } catch (error) {
+    if (state.chatTester.generation === generation) {
+      if (!assistantContent.textContent) {
+        assistantContent.parentElement?.remove();
+        setChatTesterStatus("No completed adapter response was added. You can retry or forget this tester.");
+      } else {
+        const assistantTurn = assistantContent.parentElement;
+        assistantTurn?.classList.add("chat-tester-turn-incomplete");
+        const heading = assistantTurn?.querySelector("strong");
+        if (heading) heading.textContent = "Local adapter · incomplete";
+        setChatTesterStatus("The response stopped before completion. Partial text is marked incomplete and was not accepted.");
+      }
+      showChatTesterError(error);
+    }
+  } finally {
+    resetButton.disabled = false;
+    setBusy(button, false);
+  }
+});
+
+element("chat-tester-reset").addEventListener("click", async (event) => {
+  const button = event.currentTarget;
+  clearChatTesterError();
+  setBusy(button, true, "Forgetting tester…");
+  try {
+    await forgetChatTester();
+  } finally {
+    setBusy(button, false);
+  }
+});
+
 element("codex-login-button").addEventListener("click", async (event) => {
   const button = event.currentTarget;
   const resultBox = element("device-code-result");