relmio 0.2.6 → 0.2.8

package/CHANGELOG.md

@@ -5,6 +5,37 @@ version across `package.json`, `package-lock.json`, this file, the Git tag,
 and npm. Local checks validate the repository metadata; the publishing guide
 checks the registry separately after publication.
 
+## Unreleased
+
+## [0.2.8] - 2026-08-02
+
+### Changed
+
+- Replace the local browser wizard's text appearance selector with compact,
+  accessible System/Light/Dark icons, while keeping the original horizontal
+  Signal Spine flow and touch-friendly behavior.
+- Serve the bundled Lucide SVG assets from the wizard and include them in the
+  npm package so offline and Node-free browser launches render consistently.
+
+## [0.2.7] - 2026-08-02
+
+### Changed
+
+- Restore the original Relmio hosted layout and local browser wizard flow, with
+  the horizontal five-step Signal Spine and GitHub star/version control kept
+  visible.
+- Add Astryx's built theme and accessible segmented appearance control to the
+  hosted app, plus lightweight System/Light/Dark preference support to the
+  local wizard.
+- Add responsive dark-mode logo treatment, phone-sized controls, and matching
+  browser-wizard guidance to the GitHub and npm README variants.
+
+### Fixed
+
+- Keep the checksum-verified temporary Node.js 22 runtime on the child process
+  path so Git Bash and other Node-free systems can launch the Relmio package
+  shim without falling back to a missing or outdated system `node` command.
+
 ## [0.2.6] - 2026-08-02
 
 ### Added

package/README.md

@@ -72,9 +72,18 @@ installing the private n8n sidecar.
 </figure>
 
 Use the site's [Install wizard](https://relmio.vercel.app/install) page for a
-clickable macOS/Linux, PowerShell, Command Prompt, and NPX command switcher plus
-a preview of the same five gates used by the local self-hosted n8n and
-Hostinger VPS setup.
+clickable macOS/Linux, PowerShell, Command Prompt, and NPX command switcher
+tailored to the current self-hosted n8n and Hostinger VPS setup path.
+
+### Browser interface and theme modes
+
+The hosted site and local wizard keep the original Relmio relay layout while
+adding a compact **System / Light / Dark** appearance control. System follows
+the computer's preference; Light and Dark are remembered on that browser only.
+The local wizard keeps its horizontal five-step Signal Spine at the top of the
+flow, and the hosted site keeps the live GitHub star/version control visible.
+Both surfaces collapse their controls for narrow phone screens without
+turning the setup flow into a side rail or requiring a separate mobile app.
 
 ## Quick start
 
@@ -115,12 +124,6 @@ Users who already have Node.js 22 or newer can run the npm package directly:
 npx --yes --ignore-scripts relmio@latest
 ```
 
-Either command opens the redesigned local wizard. Its Signal Spine keeps five
-trust gates visible: local sign-in, host verification, read-only n8n discovery,
-the exact sidecar plan, and the verified private endpoint. On a wide screen the
-route stays beside the current gate; on a small screen it becomes a compact
-progress strip.
-
 ### Requirements
 
 - On macOS/Linux/WSL/Git Bash: `curl`, `awk`, `tar`, and either `sha256sum` or
@@ -155,30 +158,28 @@ product name to n8n. SuperGrok/xAI OAuth is a gated feasibility item on the
 [provider roadmap](https://github.com/Demonbane18/relmio/blob/main/docs/roadmap.md);
 it is not currently advertised as supported.
 
-## Updated browser wizard walkthrough
+## Visual walkthrough
 
 All images below are sanitized previews with reserved addresses, fake server
-data, and no real credential or session information. Only the current gate is
-actionable, and remote writes remain locked until the review checkbox is
-selected.
+data, and no real credential or session information.
 
-### Gate 1: Confirm the local ChatGPT/Codex sign-in
+### 1. Confirm the local ChatGPT/Codex sign-in
 
 <img src="https://cdn.jsdelivr.net/npm/relmio@latest/docs/images/setup/01-local-sign-in-ready.png" alt="Sanitized local sign-in ready screen" width="720">
 
-### Gate 2: Verify the VPS identity
+### 2. Verify the VPS identity
 
 <img src="https://cdn.jsdelivr.net/npm/relmio@latest/docs/images/setup/02-vps-identity-confirmed.png" alt="Sanitized VPS fingerprint confirmation screen" width="720">
 
-### Gate 3: Choose the detected n8n container and network
+### 3. Choose the detected n8n container and network
 
 <img src="https://cdn.jsdelivr.net/npm/relmio@latest/docs/images/setup/03-n8n-detected.png" alt="Sanitized n8n discovery screen" width="720">
 
-### Gate 4: Review the exact sidecar-only plan
+### 4. Review the exact sidecar-only plan
 
 <img src="https://cdn.jsdelivr.net/npm/relmio@latest/docs/images/setup/04-install-plan.png" alt="Sanitized installation plan screen" width="720">
 
-### Gate 5: Copy the verified n8n settings
+### 5. Copy the verified n8n settings
 
 <img src="https://cdn.jsdelivr.net/npm/relmio@latest/docs/images/setup/05-bridge-ready.png" alt="Sanitized verified bridge screen" width="720">
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "relmio",
-  "version": "0.2.6",
+  "version": "0.2.8",
   "description": "Turn a supported ChatGPT/Codex OAuth sign-in into a private OpenAI-compatible endpoint, starting with self-hosted n8n.",
   "keywords": [
     "relmio",

package/src/ui/app.js

@@ -9,7 +9,6 @@ const state = {
   discovery: null,
   networks: null,
   installAttempted: false,
-  previewMode: false,
 };
 
 const element = (id) => document.getElementById(id);
@@ -126,12 +125,10 @@ async function waitForOAuthCompletion() {
 
 function showStep(step) {
   state.step = step;
-  let activePanel = null;
   for (const panel of document.querySelectorAll("[data-step]")) {
     const active = Number(panel.dataset.step) === step;
     panel.hidden = !active;
     if (active) {
-      activePanel = panel;
       panel.querySelector("h2")?.focus({ preventScroll: true });
     }
   }
@@ -144,12 +141,7 @@ function showStep(step) {
       marker.removeAttribute("aria-current");
     }
   }
-  activePanel?.closest(".work-column")?.scrollIntoView({
-    block: "start",
-    behavior: window.matchMedia("(prefers-reduced-motion: reduce)").matches
-      ? "auto"
-      : "smooth",
-  });
+  window.scrollTo({ top: 0, behavior: "smooth" });
 }
 
 async function api(path, { method = "GET", body } = {}) {
@@ -217,10 +209,8 @@ async function refreshAuthStatus({ fresh = false } = {}) {
   const loginButton = element("login-button");
   const next = element("signin-next");
   const formattedUpdatedAt = renderAuthUpdatedAt(status.authUpdatedAt);
-  state.previewMode = status.previewMode === true;
-  element("preview-badge").hidden = !state.previewMode;
 
-  if (state.previewMode) {
+  if (status.previewMode) {
     indicator.classList.add("ready");
     element("auth-title").textContent = "Sanitized preview credential";
     element("auth-detail").textContent =
@@ -304,7 +294,7 @@ async function discover() {
     element("container-select"),
     result.containers.map((container) => ({
       value: container.name,
-      label: `${container.name} · ${container.image}`,
+      label: `${container.name} - ${container.image}`,
     })),
     result.containers[0].name,
   );
@@ -493,16 +483,11 @@ element("install-button").addEventListener("click", async (event) => {
     element("result-models").textContent = result.models.join(", ");
     element("result-http-url").textContent =
       `${result.baseUrl.replace(/\/$/u, "")}/responses`;
-    if (state.previewMode) {
-      element("done-title").textContent = "The sanitized preview route is complete";
-    }
     showStep(5);
     setMessage(
-      state.previewMode
-        ? "Sanitized preview complete. The endpoint and models below are sample data."
-        : result.deploymentMode === "updated"
-          ? "OAuth refreshed on the existing wizard-managed sidecar. n8n was not restarted."
-          : "Installation verified. Your existing n8n was not restarted.",
+      result.deploymentMode === "updated"
+        ? "OAuth refreshed on the existing wizard-managed sidecar. n8n was not restarted."
+        : "Installation verified. Your existing n8n was not restarted.",
     );
   } catch (error) {
     showError(error);

package/src/ui/icons/monitor.svg

@@ -0,0 +1,6 @@
+<!-- Lucide monitor icon, ISC licensed: https://lucide.dev/license -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+  <rect width="20" height="14" x="2" y="3" rx="2" />
+  <line x1="8" x2="16" y1="21" y2="21" />
+  <line x1="12" x2="12" y1="17" y2="21" />
+</svg>

package/src/ui/icons/moon.svg

@@ -0,0 +1,4 @@
+<!-- Lucide moon icon, ISC licensed: https://lucide.dev/license -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401" />
+</svg>

package/src/ui/icons/sun.svg

@@ -0,0 +1,12 @@
+<!-- Lucide sun icon, ISC licensed: https://lucide.dev/license -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+  <circle cx="12" cy="12" r="4" />
+  <path d="M12 2v2" />
+  <path d="M12 20v2" />
+  <path d="m4.93 4.93 1.41 1.41" />
+  <path d="m17.66 17.66 1.41 1.41" />
+  <path d="M2 12h2" />
+  <path d="M20 12h2" />
+  <path d="m6.34 17.66-1.41 1.41" />
+  <path d="m19.07 4.93-1.41 1.41" />
+</svg>