relmio 0.3.0 → 0.3.1

package/CHANGELOG.md

@@ -7,6 +7,25 @@ checks the registry separately after publication.
 
 ## Unreleased
 
+## [0.3.1] - 2026-08-10
+
+### Changed
+
+- Make the browser wizard beginner-friendly with a modern fixed-viewport
+  layout: all five active steps fit without document scrolling on common
+  1280x720 laptops, while progress and safety context stay persistent beside
+  the active task.
+- Keep narrow-phone documents fixed to the viewport and contain unavoidable
+  long-form overflow within the active task panel instead of the page.
+- Expand the GitHub and npm walkthroughs with a hosted-install selector and
+  packaged, sanitized screenshots that document the current n8n workflow.
+
+### Security
+
+- Restore a clean hosted-web dependency audit by pinning patched `js-yaml`
+  and `nanoid` releases and using the compatible `vinext` release that does
+  not include the currently vulnerable `image-size` parser.
+
 ## [0.3.0] - 2026-08-05
 
 ### Added

package/README.md

@@ -15,21 +15,29 @@
 
 ## See it working first
 
-Before setup, this sample n8n configuration shows GPT-5.6 model aliases in the
-OpenAI Chat Model selector. The exact model list depends on the signed-in
-ChatGPT account and can change over time.
+This documented example follows a tested n8n OpenAI credential through a
+published Telegram-triggered workflow. It is a product-operation record, not
+an endorsement, sponsorship, or affiliation by OpenAI, n8n, Hostinger,
+Telegram, or AppBuildersPH.
 
 <figure>
-  <img src="https://cdn.jsdelivr.net/npm/relmio@latest/docs/images/examples/gpt-56-model-selector.png" alt="Model selector listing GPT-5.6 Sol, Luna, and Terra model aliases" width="480">
-  <figcaption>Compatibility preview: the model selector includes <code>gpt-5.6-sol</code>, <code>gpt-5.6-luna</code>, and <code>gpt-5.6-terra</code>.</figcaption>
+  <img src="https://cdn.jsdelivr.net/npm/relmio@latest/docs/images/examples/n8n-openai-credential-connected.png" alt="n8n OpenAI credential dialog showing that the connection test succeeded" width="960">
+  <figcaption>The n8n OpenAI credential connection test succeeded; the credential value itself is obscured.</figcaption>
 </figure>
 
-After Relmio completes the installation, Docker shows the existing n8n stack
-and the new private OAuth sidecar running together.
+<figure>
+  <img src="https://cdn.jsdelivr.net/npm/relmio@latest/docs/images/examples/gpt-56-model-selector.png" alt="n8n model selector with gpt-5.6-terra selected and an account-specific model list" width="500">
+  <figcaption>This signed-in account's n8n model list includes <code>gpt-5.6-terra</code>; model availability is account-dependent and can change.</figcaption>
+</figure>
+
+<figure>
+  <img src="https://cdn.jsdelivr.net/npm/relmio@latest/docs/images/examples/telegram-n8n-workflow-execution.png" alt="Successful n8n execution of a Telegram-triggered workflow with HTTP Request, Basic LLM Chain, and AI Agent branches" width="960">
+  <figcaption>The published Telegram-triggered n8n workflow completed successfully across its HTTP Request, Basic LLM Chain, and AI Agent branches.</figcaption>
+</figure>
 
 <figure>
-  <img src="https://cdn.jsdelivr.net/npm/relmio@latest/docs/images/examples/sidecar-docker-containers-running.png" alt="Docker Desktop showing the n8n and n8n-openai-oauth containers running" width="960">
-  <figcaption>Completed setup: the existing <code>n8n</code> stack and the <code>n8n-openai-oauth</code> sidecar are both running.</figcaption>
+  <img src="https://cdn.jsdelivr.net/npm/relmio@latest/docs/images/examples/telegram-model-results.png" alt="Telegram conversation receiving HTTP Request, Basic LLM Chain, and AI Agent outputs" width="682">
+  <figcaption>Telegram received the HTTP Request, Basic LLM Chain, and AI Agent outputs sent by that workflow.</figcaption>
 </figure>
 
 Relmio is a local browser wizard that installs a private
@@ -80,10 +88,11 @@ tailored to the current self-hosted n8n and Hostinger VPS setup path.
 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.
+On desktop, the local wizard keeps progress and sidecar-only safety notes in a
+persistent rail beside the active task; its compact fixed-screen shell avoids
+document scrolling on common laptop screens. On narrow phones, it switches to
+a horizontal progress strip and keeps task scrolling inside the active panel.
+The hosted site keeps the live GitHub star/version control visible.
 
 ## Quick start
 
@@ -184,28 +193,51 @@ it is not currently advertised as supported.
 
 ## Visual walkthrough
 
-All images below are sanitized previews with reserved addresses, fake server
-data, and no real credential or session information.
+These current product screenshots use sanitized sample values wherever a setup
+field might otherwise identify an environment. The VPS identity screen shows a
+reserved sample address and sample SSH fingerprint; none of the images includes
+an OAuth token, password, private key, or live wizard session URL.
+
+### 1. Choose a hosted installation method
+
+<img src="https://cdn.jsdelivr.net/npm/relmio@latest/docs/images/setup/00-install-methods.png" alt="Hosted Relmio installation page with macOS/Linux, Homebrew, PowerShell, Command Prompt, and NPX choices" width="720">
+
+The hosted page starts with the installation-method selector. Run the selected
+command locally, not on the VPS.
+
+### 2. Complete 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 preview-mode sample credential state, not a real saved-login confirmation" width="626">
+
+This image shows a sanitized preview-mode sample credential state; it does not
+confirm that a real local ChatGPT login was saved. During a real fresh login,
+the browser confirmation states that the credentials were saved locally.
+
+### 3. Verify the VPS identity
 
-### 1. Confirm the local ChatGPT/Codex sign-in
+<img src="https://cdn.jsdelivr.net/npm/relmio@latest/docs/images/setup/02-vps-identity-confirmed.png" alt="VPS identity confirmation with a sanitized sample address and SSH fingerprint" width="720">
 
-<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">
+Confirm the SSH host fingerprint before authentication. The screenshot uses the
+reserved sample host `vps.example.test`, a sample fingerprint, and a blank
+password field.
 
-### 2. Verify the VPS identity
+### 4. Choose the detected n8n container and network
 
-<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">
+<img src="https://cdn.jsdelivr.net/npm/relmio@latest/docs/images/setup/03-n8n-detected.png" alt="Detected n8n container and shared Docker network" width="720">
 
-### 3. Choose the detected n8n container and network
+Discovery is read-only; choose the existing n8n container and shared Docker
+network.
 
-<img src="https://cdn.jsdelivr.net/npm/relmio@latest/docs/images/setup/03-n8n-detected.png" alt="Sanitized n8n discovery screen" width="720">
+### 5. 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="Exact sidecar-only installation plan, including forbidden actions" width="720">
 
-<img src="https://cdn.jsdelivr.net/npm/relmio@latest/docs/images/setup/04-install-plan.png" alt="Sanitized installation plan screen" width="720">
+The plan names the allowed sidecar work and explicitly excludes edits or
+restarts of n8n, a published host port, and a Traefik route.
 
-### 5. Copy the verified n8n settings
+### 6. 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">
+<img src="https://cdn.jsdelivr.net/npm/relmio@latest/docs/images/setup/05-bridge-ready.png" alt="Private bridge ready screen with n8n OpenAI credential settings" width="720">
 
 Use these values in an n8n OpenAI credential:
 
@@ -265,7 +297,8 @@ has the importable cURL version.
 - Relmio never edits, rebuilds, recreates, stops, or restarts the existing n8n
   container.
 - This is an unofficial community project, not affiliated with or endorsed by
-  OpenAI, xAI, or n8n. Provider access, models, limits, and policies can change.
+  OpenAI, xAI, n8n, Hostinger, Telegram, or AppBuildersPH. Provider access,
+  models, limits, and policies can change.
 - Use it only where your account, subscription, provider terms, and applicable
   policies allow.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "relmio",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "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/index.html

@@ -55,108 +55,108 @@
       </div>
     </header>
 
-    <div class="toast-stack" aria-label="Wizard notifications">
-      <aside
-        id="global-safety"
-        class="toast safety-note"
-        aria-label="Safety guarantee"
-      >
-        <strong>Sidecar-only guarantee</strong>
-        <span>
-          No n8n restart. No n8n rebuild. No public port. You approve the exact
-          plan before anything is written.
-        </span>
-        <button
-          class="toast-close"
-          type="button"
-          data-dismiss-toast="global-safety"
-          aria-label="Dismiss safety guarantee"
-        >
-          <span aria-hidden="true">×</span>
-        </button>
-      </aside>
-
-      <aside
-        id="global-backup"
-        class="toast safety-note backup-note"
-        aria-label="Backup reminder"
-      >
-        <strong>Back up first</strong>
-        <span>
-          Export your n8n workflows before connecting. This wizard uses
-          sidecar-only commands, but it still writes to your VPS.
-        </span>
-        <button
-          class="toast-close"
-          type="button"
-          data-dismiss-toast="global-backup"
-          aria-label="Dismiss backup reminder"
-        >
-          <span aria-hidden="true">×</span>
-        </button>
-      </aside>
+    <main id="main-content" class="shell" tabindex="-1">
+      <aside class="rail" aria-label="Setup progress and safety">
+        <section class="intro" aria-labelledby="page-title">
+          <h1 id="page-title">Connect n8n without changing n8n</h1>
+          <p class="lede">
+            This wizard installs one separate Docker sidecar. Your existing n8n
+            image, Compose file, container, and workflows stay untouched.
+          </p>
+        </section>
+
+        <nav class="steps" aria-label="Setup progress">
+          <ol>
+            <li data-step-marker="1" aria-current="step">
+              <span>1</span><em>Sign in</em>
+            </li>
+            <li data-step-marker="2"><span>2</span><em>VPS</em></li>
+            <li data-step-marker="3"><span>3</span><em>n8n</em></li>
+            <li data-step-marker="4"><span>4</span><em>Review</em></li>
+            <li data-step-marker="5"><span>5</span><em>Done</em></li>
+          </ol>
+        </nav>
+
+        <div class="toast-stack" aria-label="Wizard notifications">
+          <aside
+            id="global-safety"
+            class="toast safety-note"
+            aria-label="Safety guarantee"
+          >
+            <strong>Sidecar-only guarantee</strong>
+            <span>
+              No n8n restart. No n8n rebuild. No public port. You approve the
+              exact plan before anything is written.
+            </span>
+            <button
+              class="toast-close"
+              type="button"
+              data-dismiss-toast="global-safety"
+              aria-label="Dismiss safety guarantee"
+            >
+              <span aria-hidden="true">×</span>
+            </button>
+          </aside>
 
-      <div
-        id="global-message"
-        class="toast message"
-        role="status"
-        aria-live="polite"
-      >
-        <span id="global-message-text">Checking your local sign-in…</span>
-        <button
-          class="toast-close"
-          type="button"
-          data-dismiss-toast="global-message"
-          aria-label="Dismiss status message"
-        >
-          <span aria-hidden="true">×</span>
-        </button>
-      </div>
+          <aside
+            id="global-backup"
+            class="toast safety-note backup-note"
+            aria-label="Backup reminder"
+          >
+            <strong>Back up first</strong>
+            <span>
+              Export your n8n workflows before connecting. This wizard uses
+              sidecar-only commands, but it still writes to your VPS.
+            </span>
+            <button
+              class="toast-close"
+              type="button"
+              data-dismiss-toast="global-backup"
+              aria-label="Dismiss backup reminder"
+            >
+              <span aria-hidden="true">×</span>
+            </button>
+          </aside>
 
-      <div
-        id="global-error"
-        class="toast error"
-        role="alert"
-        tabindex="-1"
-        hidden
-      >
-        <span id="global-error-text"></span>
-        <button
-          class="toast-close"
-          type="button"
-          data-dismiss-toast="global-error"
-          aria-label="Dismiss error"
-        >
-          <span aria-hidden="true">×</span>
-        </button>
-      </div>
-    </div>
-
-    <main id="main-content" class="shell">
-      <section class="intro" aria-labelledby="page-title">
-        <p class="eyebrow">Guided VPS setup</p>
-        <h1 id="page-title">Connect n8n without changing n8n</h1>
-        <p class="lede">
-          This wizard installs one separate Docker sidecar. Your existing n8n
-          image, Compose file, container, and workflows stay untouched.
-        </p>
-      </section>
+          <div
+            id="global-message"
+            class="toast message"
+            role="status"
+            aria-live="polite"
+          >
+            <span id="global-message-text">Checking your local sign-in…</span>
+            <button
+              class="toast-close"
+              type="button"
+              data-dismiss-toast="global-message"
+              aria-label="Dismiss status message"
+            >
+              <span aria-hidden="true">×</span>
+            </button>
+          </div>
 
-      <nav class="steps" aria-label="Setup progress">
-        <ol>
-          <li data-step-marker="1" aria-current="step">
-            <span>1</span><em>Sign in</em>
-          </li>
-          <li data-step-marker="2"><span>2</span><em>VPS</em></li>
-          <li data-step-marker="3"><span>3</span><em>n8n</em></li>
-          <li data-step-marker="4"><span>4</span><em>Review</em></li>
-          <li data-step-marker="5"><span>5</span><em>Done</em></li>
-        </ol>
-      </nav>
+          <div
+            id="global-error"
+            class="toast error"
+            role="alert"
+            tabindex="-1"
+            hidden
+          >
+            <span id="global-error-text"></span>
+            <button
+              class="toast-close"
+              type="button"
+              data-dismiss-toast="global-error"
+              aria-label="Dismiss error"
+            >
+              <span aria-hidden="true">×</span>
+            </button>
+          </div>
+        </div>
+      </aside>
 
       <section class="panel" data-step="1" aria-labelledby="signin-title">
         <div class="panel-heading">
-          <span class="step-kicker">Step 1 of 5</span>
           <h2 id="signin-title" tabindex="-1">Use your local ChatGPT sign-in</h2>
           <p>
             The OAuth credential stays on this computer until you approve its
@@ -198,7 +198,6 @@
 
       <section class="panel" data-step="2" aria-labelledby="vps-title" hidden>
         <div class="panel-heading">
-          <span class="step-kicker">Step 2 of 5</span>
           <h2 id="vps-title" tabindex="-1">Connect to your VPS</h2>
           <p>
             Copy the address exactly from Hostinger. Your password is used only
@@ -294,7 +293,6 @@
 
       <section class="panel" data-step="3" aria-labelledby="n8n-title" hidden>
         <div class="panel-heading">
-          <span class="step-kicker">Step 3 of 5</span>
           <h2 id="n8n-title" tabindex="-1">Choose the detected n8n</h2>
           <p>
             Discovery uses read-only Docker commands. It does not execute
@@ -332,7 +330,6 @@
 
       <section class="panel" data-step="4" aria-labelledby="review-title" hidden>
         <div class="panel-heading">
-          <span class="step-kicker">Step 4 of 5</span>
           <h2 id="review-title" tabindex="-1">Review before installing</h2>
           <p>No existing n8n files or containers will be changed.</p>
         </div>
@@ -381,14 +378,15 @@
       </section>
 
       <section class="panel success-panel" data-step="5" aria-labelledby="done-title" hidden>
-        <div class="success-mark" aria-hidden="true">✓</div>
-        <div class="panel-heading">
-          <span class="step-kicker">Step 5 of 5</span>
-          <h2 id="done-title" tabindex="-1">The private bridge is ready</h2>
-          <p>
-            Copy the OpenAI credential values first, then use one of the node
-            recipes below.
-          </p>
+        <div class="success-heading">
+          <div class="success-mark" aria-hidden="true">✓</div>
+          <div class="panel-heading">
+            <h2 id="done-title" tabindex="-1">The private bridge is ready</h2>
+            <p>
+              Copy the OpenAI credential values first, then use one of the node
+              recipes below.
+            </p>
+          </div>
         </div>
 
         <h3>1. OpenAI credential</h3>
@@ -435,7 +433,7 @@
 
         <button
           id="copy-settings"
-          class="button secondary"
+          class="button primary"
           type="button"
           data-copy-group="credential"
           data-copy-label="OpenAI credential settings"