relmio 0.5.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

@@ -92,8 +92,8 @@
         <section class="intro" aria-labelledby="page-title">
           <h1 id="page-title">Run Relmio on localhost</h1>
           <p class="lede">
-            Choose the official credential path that matches your client. Both
-            options run in a hardened Docker container and bind only to
+            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>
         </section>
@@ -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>
@@ -200,6 +207,20 @@
                 </span>
               </span>
             </label>
+
+            <label class="target-card warning-card">
+              <input type="radio" name="target" value="codex-chat" />
+              <span class="target-card-copy">
+                <strong>Codex Chat Adapter</strong>
+                <span class="target-meta">Experimental · trusted local backends or development servers only</span>
+                <span>
+                  Relmio-specific authenticated <code>POST /chat</code>, backed by
+                  official Codex App Server and ChatGPT sign-in. This is not an
+                  OpenAI-compatible <code>/v1</code> endpoint and browser bundles
+                  must never connect to it.
+                </span>
+              </span>
+            </label>
           </fieldset>
 
           <div class="field-grid local-fields">
@@ -358,8 +379,8 @@
         </div>
 
         <aside id="codex-install-warning" class="high-trust-warning" hidden>
-          <strong>High-trust capability</strong>
-          <p>
+          <strong id="codex-install-warning-title">High-trust capability</strong>
+          <p id="codex-install-warning-detail">
             Anyone holding the generated client credential can control Codex
             inside its isolated container, act through your signed-in ChatGPT
             session, and may be able to recover that container's ChatGPT session
@@ -445,10 +466,8 @@
         </dl>
 
         <aside id="codex-production-warning" class="high-trust-warning" hidden>
-          <strong>Experimental WebSocket transport</strong>
-          <p>
-            Codex App Server WebSocket is experimental and unsupported for production workloads.
-          </p>
+          <strong id="codex-production-warning-title">Experimental Codex integration</strong>
+          <p id="codex-production-warning-detail"></p>
         </aside>
 
         <section id="codex-login" class="codex-login" aria-labelledby="codex-login-title" hidden>
@@ -492,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">