relmio 0.6.0 → 0.7.0

package/src/ui/local.css

@@ -365,6 +365,115 @@
   font-weight: 700;
 }
 
+.chat-tester {
+  display: grid;
+  gap: 1rem;
+  margin-top: 1.25rem;
+  padding: 1rem;
+  border: 1px solid var(--accent-border);
+  border-radius: var(--radius);
+  background: var(--accent-soft);
+}
+
+.chat-tester-heading {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.chat-tester-heading h3 {
+  margin: 0.2rem 0 0;
+}
+
+.chat-tester-heading p:not(.section-label) {
+  margin: 0.45rem 0 0;
+  color: var(--text-muted);
+}
+
+.chat-tester-heading .section-label {
+  margin: 0;
+}
+
+.chat-tester-form fieldset {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.875rem;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+.chat-tester-form legend {
+  grid-column: 1 / -1;
+  width: 100%;
+  margin-bottom: 0.5rem;
+  font-weight: 800;
+}
+
+.chat-tester-form .button,
+.chat-tester-message-form .button {
+  margin-top: 0.875rem;
+}
+
+.chat-tester-status,
+.chat-tester-error {
+  margin: 0;
+  padding: 0.75rem 0.875rem;
+  border-radius: var(--radius-sm);
+  font-size: 0.875rem;
+  overflow-wrap: anywhere;
+}
+
+.chat-tester-status {
+  border: 1px solid var(--accent-border);
+  background: var(--surface);
+  color: var(--text-muted);
+}
+
+.chat-tester-error {
+  border: 1px solid var(--warning-border);
+  background: var(--warning-soft);
+  color: var(--warning);
+}
+
+.chat-tester-transcript {
+  display: grid;
+  gap: 0.75rem;
+  max-height: 28rem;
+  margin: 0;
+  padding: 0;
+  overflow: auto;
+  list-style: none;
+}
+
+.chat-tester-turn {
+  max-width: min(100%, 46rem);
+  padding: 0.75rem 0.875rem;
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius-sm);
+  background: var(--surface);
+}
+
+.chat-tester-turn-assistant {
+  border-color: var(--accent-border);
+  background: var(--accent-soft);
+}
+
+.chat-tester-turn strong {
+  display: block;
+  margin-bottom: 0.25rem;
+  font-size: 0.75rem;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+}
+
+.chat-tester-turn p {
+  margin: 0;
+  overflow-wrap: anywhere;
+  white-space: pre-wrap;
+}
+
 .local-wizard a.button {
   text-decoration: none;
 }
@@ -379,10 +488,15 @@
 @media (max-width: 48rem) {
   .target-picker,
   .local-fields,
-  .local-review-grid {
+  .local-review-grid,
+  .chat-tester-form fieldset {
     grid-template-columns: minmax(0, 1fr);
   }
 
+  .chat-tester-heading {
+    flex-direction: column;
+  }
+
   .review-details div {
     grid-template-columns: minmax(0, 1fr);
     gap: 0.2rem;

package/src/ui/local.html

@@ -142,6 +142,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 +511,98 @@
           </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">Local-only tester</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>
+
+          <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();
 }
@@ -269,6 +282,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 +317,114 @@ 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);
+}
+
+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 +644,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 +672,140 @@ 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);
+  resetButton.disabled = true;
+  setBusy(button, true, "Waiting for adapter…");
+  setChatTesterStatus("The local wizard is testing the adapter without exposing its credential to the page.");
+  try {
+    const result = await api("/api/local/chat-test/message", {
+      method: "POST",
+      body: {
+        endpointBaseUrl: state.chatTester.endpointBaseUrl,
+        keyId: state.chatTester.keyId,
+        encryptedCredential: state.chatTester.encryptedCredential,
+        input: text,
+        ...(state.chatTester.conversationId
+          ? { conversationId: state.chatTester.conversationId }
+          : {}),
+      },
+    });
+    if (
+      typeof result.conversationId !== "string" ||
+      typeof result.output !== "string"
+    ) {
+      throw new Error("The local adapter returned an unexpected response.");
+    }
+    if (state.chatTester.generation !== generation) {
+      return;
+    }
+    state.chatTester.conversationId = result.conversationId;
+    appendChatTesterTurn("assistant", result.output);
+    setChatTesterStatus("Response received. Continue this conversation or forget the tester.");
+  } catch (error) {
+    if (state.chatTester.generation === generation) {
+      showChatTesterError(error);
+      setChatTesterStatus("No adapter response was added. You can retry or forget this tester.");
+    }
+  } 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");