relmio 0.2.12 → 0.2.14

package/CHANGELOG.md

@@ -7,6 +7,49 @@ checks the registry separately after publication.
 
 ## Unreleased
 
+## [0.2.14] - 2026-08-04
+
+### Added
+
+- Add staged Homebrew formula and WinGet portable-package generation with
+  x64/ARM64 manifests, installed-command smoke tests, and review-only CI
+  artifacts for package-manager publication.
+- Add `relmio --version` and `relmio -v` for noninteractive installer and
+  package-manager verification.
+
+### Changed
+
+- Report Homebrew and WinGet publication status in the hosted install page and
+  documentation, while keeping unapproved commands out of the primary picker.
+
+### Fixed
+
+- Replace the hosted Command Prompt installer route's PowerShell launch with a
+  PowerShell-free, non-admin native batch bootstrap that reuses Node.js 22+
+  when available or verifies a pinned official Windows runtime before use.
+- Keep downloaded checksum-manifest text out of CMD evaluation and use reviewed
+  Node.js 22.23.2 x64/ARM64 digests embedded in the release.
+- Download the CMD bootstrap to a collision-resistant temporary name without
+  overwriting an existing `install.cmd`, then clean it after execution.
+- Show deterministic download, checksum-verification, and extraction stages in
+  every bootstrap so temporary Node.js runtime setup does not appear stalled.
+
+## [0.2.13] - 2026-08-04
+
+### Changed
+
+- Compact the local setup wizard so its active step stays near the top, move
+  safety and status notices into dismissible toasts, and collapse the optional
+  AI Agent and HTTP Request recipes until users choose to open them.
+- Complete the HTTP Request recipe with authorization, content type, and a
+  copyable sample Responses API JSON payload.
+
+### Fixed
+
+- Copy credential values reliably in Opera GX on Windows by preserving the
+  synchronous user gesture for the selection-based clipboard path before
+  falling back to the modern Clipboard API.
+
 ## [0.2.12] - 2026-08-04
 
 ### Fixed

package/README.md

@@ -105,16 +105,24 @@ irm https://relmio.vercel.app/install.ps1 | iex
 ### Windows Command Prompt
 
 ```bat
-"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe" -NoProfile -ExecutionPolicy Bypass -Command "irm https://relmio.vercel.app/install.ps1 | iex"
+for /f "delims=" %F in ("%TEMP%\relmio-install-%RANDOM%-%RANDOM%-%RANDOM%.cmd") do @if exist "%~F" (exit /b 80) else curl -fsSL --remove-on-error https://relmio.vercel.app/install.cmd -o "%~F" && set "RELMIO_SELF_DELETE=%~F" && call "%~F"
 ```
 
 No Node.js or Git Bash installation is required first. The
 [POSIX](https://github.com/Demonbane18/relmio/blob/main/web/public/install.sh)
 and [Windows PowerShell](https://github.com/Demonbane18/relmio/blob/main/web/public/install.ps1)
-bootstraps reuse Node.js 22 or newer when available. Otherwise they download
-the matching current official Node.js 22 runtime to a private temporary
-directory, verify its SHA-256 checksum, run Relmio with npm lifecycle scripts
-disabled, and remove the temporary runtime when the wizard closes.
+bootstraps, plus the PowerShell-free [Command Prompt](https://github.com/Demonbane18/relmio/blob/main/web/public/install.cmd)
+bootstrap, reuse Node.js 22 or newer when available. Otherwise they show
+staged **Please wait** messages while they download the matching current
+official Node.js 22 runtime to a private temporary directory, verify its
+SHA-256 checksum, run Relmio with npm lifecycle scripts disabled, and remove
+the temporary runtime when the wizard closes. The Command Prompt path runs as
+the current user and does not request administrator access or change Windows
+security policy.
+
+Homebrew tap publication and WinGet catalog approval are pending. Their install
+commands will be added only after each public package passes a real
+package-manager installation test. Use a direct installer above today.
 
 Users who already have Node.js 22 or newer can run the npm package directly:
 
@@ -137,8 +145,9 @@ a browser.
 
 - On macOS/Linux/WSL/Git Bash: `curl`, `awk`, `tar`, and either `sha256sum` or
   `shasum`; Git Bash also needs `unzip`
-- On native Windows: Windows PowerShell 5.1 or PowerShell 7; Command Prompt can
-  launch the included PowerShell bootstrap
+- On native Windows: Command Prompt uses its built-in `curl`, `certutil`, and
+  `tar` tools; Windows PowerShell 5.1 or PowerShell 7 remains an alternative
+  bootstrap
 - A browser and an eligible ChatGPT/Codex account
 - A self-hosted n8n Docker deployment on a VPS
 - Docker Compose v2, SSH access, and a Docker network shared with n8n

package/docs/troubleshooting.md

@@ -49,13 +49,19 @@ irm https://relmio.vercel.app/install.ps1 | iex
 Windows Command Prompt:
 
 ```bat
-"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe" -NoProfile -ExecutionPolicy Bypass -Command "irm https://relmio.vercel.app/install.ps1 | iex"
+for /f "delims=" %F in ("%TEMP%\relmio-install-%RANDOM%-%RANDOM%-%RANDOM%.cmd") do @if exist "%~F" (exit /b 80) else curl -fsSL --remove-on-error https://relmio.vercel.app/install.cmd -o "%~F" && set "RELMIO_SELF_DELETE=%~F" && call "%~F"
 ```
 
 These commands do not require Node.js to be installed. The Windows options do
 not require Git Bash. Each bootstrap reuses Node.js 22 or newer when available,
-or downloads an official temporary runtime and verifies its SHA-256 checksum
-before execution.
+or shows staged **Please wait** messages while it downloads an official
+temporary runtime and verifies its SHA-256 checksum before execution. The
+Command Prompt route is PowerShell-free, non-admin, and does not change Windows
+security policy.
+
+Homebrew tap publication and WinGet catalog approval are pending. Until each
+public package passes its real install test, use one of the direct bootstrap
+commands on this page.
 
 If you choose the existing-Node fallback, confirm Node is version 22 or newer
 and check the published package version first:
@@ -117,8 +123,10 @@ bypassed.
 | Symptom | Meaning | Fix |
 |---|---|---|
 | `node: command not found`, `node is not recognized`, or Node is older than 22 | The NPX fallback cannot use the local runtime. | Use the macOS/Linux curl command or the native Windows PowerShell/Command Prompt command above. Either can run with a verified temporary runtime. Do not install Node.js on the VPS for the wizard. |
-| `curl` or `sh` is not recognized on Windows | The macOS/Linux command was pasted into a native Windows terminal. | Use the PowerShell command in PowerShell, or the `"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe" -NoProfile ...` command in Command Prompt. Git Bash is not required. |
-| A bootstrap reports a checksum mismatch | The Node.js download did not match the official SHA-256 manifest, so it was not executed. | Retry on a trusted connection. Do not bypass the check. If it repeats, use an existing Node.js 22+ installation and report the sanitized error. |
+| `curl` or `sh` is not recognized on Windows | The macOS/Linux command was pasted into a native Windows terminal. | Use the PowerShell command in PowerShell or the collision-safe temporary-file command shown above in Command Prompt. Git Bash is not required. If Command Prompt does not have `curl`, update Windows or use the PowerShell route. |
+| Command Prompt says it cannot create `powershell.exe` | A Windows policy denied PowerShell before the old CMD route could start its installer. | Use the current PowerShell-free Command Prompt command above. It downloads `install.cmd`, runs as your current user, and does not request elevation or change execution policy. |
+| The bootstrap stays on a `Please wait` stage | Node.js is missing or older than 22, so the bootstrap is downloading, checking, or extracting a temporary Node.js 22 runtime. | Keep the terminal open while the deterministic stage messages advance. The runtime is verified before it runs, is removed after the wizard exits, and is not installed system-wide. |
+| A bootstrap reports a checksum mismatch | The Node.js download did not match its reviewed official SHA-256 checksum, so it was not executed. | Retry on a trusted connection. Do not bypass the check. If it repeats, use an existing Node.js 22+ installation and report the sanitized error. |
 | Windows PowerShell shows `[eval]:1` before the wizard starts | An older bootstrap passed a JavaScript expression through `node -p`; PowerShell native-argument handling can alter that expression. | Update to the latest `relmio@latest` and rerun the same PowerShell or Command Prompt command. The current bootstrap parses the literal `node --version` output and reuses Node.js 22 or newer. |
 | Windows reports `spawn EINVAL` when starting ChatGPT sign-in | An older wizard tried to execute `npx.cmd` directly; Windows requires the current Node runtime to launch npm's JavaScript CLI. | Update to the latest `relmio@latest` release and restart the setup command. The current wizard keeps the macOS/Linux/WSL/Git Bash `npx` path unchanged. |
 | The browser did not open | The automatic browser launch failed, but the local server may still be running. | Keep the newest terminal open and press Enter to ask an interactive wizard terminal to open it again. If the terminal is noninteractive or the launcher still fails, copy its newest `127.0.0.1` setup URL into the browser. Do not reuse a URL from a closed terminal. |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "relmio",
-  "version": "0.2.12",
+  "version": "0.2.14",
   "description": "Turn a supported ChatGPT/Codex OAuth sign-in into a private OpenAI-compatible endpoint, starting with self-hosted n8n.",
   "keywords": [
     "relmio",
@@ -37,7 +37,10 @@
   },
   "files": [
     "src",
-    "scripts",
+    "scripts/build-npm-package.js",
+    "scripts/check-release-metadata.js",
+    "scripts/check-syntax.js",
+    "scripts/preview.js",
     "docs",
     "README.md",
     "SPEC.md",

package/src/cli.js

@@ -1,40 +1,86 @@
 #!/usr/bin/env node
 
 import { randomBytes } from "node:crypto";
+import { realpathSync } from "node:fs";
+import { readFile } from "node:fs/promises";
+import { fileURLToPath } from "node:url";
 
 import { attachBrowserReopenOnEnter, openBrowser } from "./browser.js";
 import { startWizardServer } from "./web/server.js";
 
-const sessionToken = randomBytes(32).toString("base64url");
-const wizard = await startWizardServer({ sessionToken });
-const url = `${wizard.origin}/?session=${sessionToken}`;
-
-console.log("");
-console.log("Relmio");
-console.log("---------");
-console.log(`Local wizard: ${url}`);
-console.log("");
-console.log("This creates a separate sidecar and never restarts n8n.");
-console.log("Keep this Terminal window open while using the wizard.");
-console.log("Press Control+C to stop.");
-console.log("");
-
-openBrowser(url);
-const detachBrowserReopen = attachBrowserReopenOnEnter({ url });
-
-let closing = false;
-async function close() {
-  if (closing) {
+const cliPath = fileURLToPath(import.meta.url);
+const packageJsonUrl = new URL("../package.json", import.meta.url);
+
+export function isCliEntryPath(entryPath, realpath = realpathSync) {
+  if (typeof entryPath !== "string" || entryPath === "") {
+    return false;
+  }
+  try {
+    return realpath(entryPath) === realpath(cliPath);
+  } catch {
+    return false;
+  }
+}
+
+export function cliMode(argumentsList) {
+  return argumentsList.length === 1 &&
+    (argumentsList[0] === "--version" || argumentsList[0] === "-v")
+    ? "version"
+    : "wizard";
+}
+
+export async function runCli({
+  argumentsList = process.argv.slice(2),
+  log = console.log,
+  readPackage = () => readFile(packageJsonUrl, "utf8"),
+} = {}) {
+  if (cliMode(argumentsList) === "version") {
+    const packageJson = JSON.parse(await readPackage());
+    if (typeof packageJson.version !== "string" || packageJson.version === "") {
+      throw new Error("Relmio package metadata does not contain a version.");
+    }
+    log(packageJson.version);
     return;
   }
-  closing = true;
-  detachBrowserReopen();
-  await wizard.close();
+
+  const sessionToken = randomBytes(32).toString("base64url");
+  const wizard = await startWizardServer({ sessionToken });
+  const url = `${wizard.origin}/?session=${sessionToken}`;
+
+  log("");
+  log("Relmio");
+  log("---------");
+  log(`Local wizard: ${url}`);
+  log("");
+  log("This creates a separate sidecar and never restarts n8n.");
+  log("Keep this Terminal window open while using the wizard.");
+  log("Press Control+C to stop.");
+  log("");
+
+  openBrowser(url);
+  const detachBrowserReopen = attachBrowserReopenOnEnter({ url });
+
+  let closing = false;
+  async function close() {
+    if (closing) {
+      return;
+    }
+    closing = true;
+    detachBrowserReopen();
+    await wizard.close();
+  }
+
+  process.once("SIGINT", async () => {
+    await close();
+  });
+  process.once("SIGTERM", async () => {
+    await close();
+  });
 }
 
-process.once("SIGINT", async () => {
-  await close();
-});
-process.once("SIGTERM", async () => {
-  await close();
-});
+if (isCliEntryPath(process.argv[1])) {
+  runCli().catch((error) => {
+    console.error(error.message);
+    process.exitCode = 1;
+  });
+}

package/src/ui/app.js

@@ -13,8 +13,16 @@ const state = {
 };
 
 const element = (id) => document.getElementById(id);
-const message = element("global-message");
+const messageToast = element("global-message");
+const message = element("global-message-text");
 const errorBox = element("global-error");
+const errorMessage = element("global-error-text");
+const toastTimers = new WeakMap();
+
+function dismissToast(toast) {
+  window.clearTimeout(toastTimers.get(toast));
+  toast.hidden = true;
+}
 
 function resetFingerprint() {
   state.fingerprint = null;
@@ -26,18 +34,24 @@ function resetFingerprint() {
 }
 
 function setMessage(text) {
+  messageToast.hidden = false;
   message.textContent = text;
+  window.clearTimeout(toastTimers.get(messageToast));
+  toastTimers.set(
+    messageToast,
+    window.setTimeout(() => dismissToast(messageToast), 6_000),
+  );
 }
 
 function showError(error) {
-  errorBox.textContent = error.message ?? "Something went wrong.";
+  errorMessage.textContent = error.message ?? "Something went wrong.";
   errorBox.hidden = false;
   errorBox.focus();
 }
 
 function clearError() {
   errorBox.hidden = true;
-  errorBox.textContent = "";
+  errorMessage.textContent = "";
 }
 
 function setBusy(button, busy, busyText) {
@@ -68,32 +82,124 @@ function flashCopied(button) {
 }
 
 async function copyText(value) {
+  const previouslyFocused = document.activeElement;
+  const textarea = document.createElement("textarea");
+  textarea.value = value;
+  textarea.readOnly = true;
+  textarea.setAttribute("aria-hidden", "true");
+  textarea.style.position = "fixed";
+  textarea.style.opacity = "0";
+
+  let copied = false;
   try {
-    await navigator.clipboard.writeText(value);
-    return;
-  } catch {
-    const previouslyFocused = document.activeElement;
-    const textarea = document.createElement("textarea");
-    textarea.value = value;
-    textarea.readOnly = true;
-    textarea.setAttribute("aria-hidden", "true");
-    textarea.style.position = "fixed";
-    textarea.style.opacity = "0";
     document.body.append(textarea);
+    textarea.focus();
     textarea.select();
-    let copied = false;
+    textarea.setSelectionRange?.(0, textarea.value.length);
+    copied = document.execCommand("copy");
+  } catch {
+    copied = false;
+  } finally {
+    textarea.remove();
+    previouslyFocused?.focus?.();
+  }
+
+  if (copied) {
+    return;
+  }
+
+  if (navigator.clipboard?.writeText) {
     try {
-      copied = document.execCommand("copy");
-    } finally {
-      textarea.remove();
-      previouslyFocused?.focus?.();
-    }
-    if (!copied) {
-      throw new Error("The browser refused clipboard access.");
+      await navigator.clipboard.writeText(value);
+      return;
+    } catch {
+      // The generic error below avoids exposing copied configuration values.
     }
   }
+
+  throw new Error("The browser refused clipboard access.");
+}
+
+function renderHttpRequestBody(model) {
+  element("result-http-body").textContent = JSON.stringify(
+    {
+      model,
+      input: "Reply with exactly: bridge works",
+    },
+    null,
+    2,
+  );
+}
+
+function copyCredentialSettings() {
+  return [
+    `Base URL: ${element("result-url").textContent}`,
+    `API Key: ${element("result-key").textContent}`,
+    "Organization ID: leave empty",
+    "Add Custom Header: off",
+  ].join("\n");
+}
+
+function copyHttpRecipe() {
+  return [
+    "Method: POST",
+    `URL: ${element("result-http-url").textContent}`,
+    "Authorization: Bearer local-only",
+    "Content-Type: application/json",
+    "Authentication: None",
+    "JSON body:",
+    element("result-http-body").textContent,
+  ].join("\n");
+}
+
+function copyValueFor(button) {
+  if (button.dataset.copyTarget) {
+    return element(button.dataset.copyTarget).textContent;
+  }
+  if (button.dataset.copyGroup === "credential") {
+    return copyCredentialSettings();
+  }
+  if (button.dataset.copyGroup === "http") {
+    return copyHttpRecipe();
+  }
+  return "";
+}
+
+function createCopyClickHandler({
+  copyValueFor,
+  clearError,
+  copyText,
+  flashCopied,
+  setMessage,
+  showError,
+}) {
+  return async function handleCopyClick(event) {
+    const button = event.currentTarget;
+    const label = button.dataset.copyLabel;
+    const value = copyValueFor(button);
+    clearError();
+    try {
+      if (!value) {
+        throw new Error("No displayed value is available to copy.");
+      }
+      await copyText(value);
+      flashCopied(button);
+      setMessage(`${label} copied.`);
+    } catch {
+      showError(new Error(`Copy failed. Select the ${label} manually.`));
+    }
+  };
 }
 
+const handleCopyClick = createCopyClickHandler({
+  copyValueFor,
+  clearError,
+  copyText,
+  flashCopied,
+  setMessage,
+  showError,
+});
+
 const delay = (milliseconds) =>
   new Promise((resolve) => window.setTimeout(resolve, milliseconds));
 
@@ -126,6 +232,11 @@ async function waitForOAuthCompletion() {
 
 function showStep(step) {
   state.step = step;
+  document.body.dataset.currentStep = String(step);
+  if (step === 5) {
+    dismissToast(element("global-safety"));
+    dismissToast(element("global-backup"));
+  }
   for (const panel of document.querySelectorAll("[data-step]")) {
     const active = Number(panel.dataset.step) === step;
     panel.hidden = !active;
@@ -483,10 +594,12 @@ element("install-button").addEventListener("click", async (event) => {
     });
     element("result-url").textContent = result.baseUrl;
     element("result-key").textContent = result.apiKeyPlaceholder;
-    element("result-model").textContent = result.models[0] ?? "";
+    const firstModel = result.models[0] ?? "Not detected";
+    element("result-model").textContent = firstModel;
     element("result-models").textContent = result.models.join(", ");
     element("result-http-url").textContent =
       `${result.baseUrl.replace(/\/$/u, "")}/responses`;
+    renderHttpRequestBody(firstModel);
     showStep(5);
     setMessage(
       result.deploymentMode === "updated"
@@ -500,36 +613,15 @@ element("install-button").addEventListener("click", async (event) => {
   }
 });
 
-element("copy-settings").addEventListener("click", async (event) => {
-  const settings = [
-    `Base URL: ${element("result-url").textContent}`,
-    `API Key: ${element("result-key").textContent}`,
-    "Organization ID: leave empty",
-    "Add Custom Header: off",
-  ].join("\n");
-  clearError();
-  try {
-    await copyText(settings);
-    flashCopied(event.currentTarget);
-    setMessage("OpenAI credential settings copied.");
-  } catch {
-    showError(new Error("Copy failed. Select the values manually."));
-  }
-});
+for (const button of document.querySelectorAll(
+  "[data-copy-target], [data-copy-group]",
+)) {
+  button.addEventListener("click", handleCopyClick);
+}
 
-for (const button of document.querySelectorAll("[data-copy-target]")) {
-  button.addEventListener("click", async (event) => {
-    const target = element(event.currentTarget.dataset.copyTarget);
-    const label = event.currentTarget.dataset.copyLabel;
-    const value = target.textContent;
-    clearError();
-    try {
-      await copyText(value);
-      flashCopied(event.currentTarget);
-      setMessage(`${label} copied.`);
-    } catch {
-      showError(new Error(`Copy failed. Select the ${label} manually.`));
-    }
+for (const button of document.querySelectorAll("[data-dismiss-toast]")) {
+  button.addEventListener("click", (event) => {
+    dismissToast(element(event.currentTarget.dataset.dismissToast));
   });
 }
 
@@ -545,4 +637,5 @@ for (const button of document.querySelectorAll(".back-button")) {
   });
 }
 
+renderHttpRequestBody(element("result-model").textContent);
 refreshAuthStatus().catch(showError);

package/src/ui/index.html

@@ -16,7 +16,7 @@
     <script src="/theme.js" type="module"></script>
     <script src="/app.js" type="module"></script>
   </head>
-  <body>
+  <body data-current-step="1">
     <a class="skip-link" href="#main-content">Skip to setup</a>
 
     <header class="site-header">
@@ -55,32 +55,93 @@
       </div>
     </header>
 
-    <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>
-
-      <aside class="safety-note" aria-label="Safety guarantee">
+    <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 class="safety-note backup-note" aria-label="Backup reminder">
+      <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-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>
+
+      <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>
+
       <nav class="steps" aria-label="Setup progress">
         <ol>
           <li data-step-marker="1" aria-current="step">
@@ -93,11 +154,6 @@
         </ol>
       </nav>
 
-      <div id="global-message" class="message" role="status" aria-live="polite">
-        Checking your local sign-in…
-      </div>
-      <div id="global-error" class="error" role="alert" tabindex="-1" hidden></div>
-
       <section class="panel" data-step="1" aria-labelledby="signin-title">
         <div class="panel-heading">
           <span class="step-kicker">Step 1 of 5</span>
@@ -377,70 +433,112 @@
           </div>
         </dl>
 
-        <button id="copy-settings" class="button secondary" type="button">
+        <button
+          id="copy-settings"
+          class="button secondary"
+          type="button"
+          data-copy-group="credential"
+          data-copy-label="OpenAI credential settings"
+        >
           Copy credential settings
         </button>
 
-        <div class="model-box">
-          <h3>2. OpenAI Chat Model for AI Agent or Basic LLM Chain</h3>
-          <dl class="result-list">
-            <div>
-              <dt>Model ID</dt>
-              <dd class="result-value">
-                <code id="result-model">Not detected</code>
-                <button
-                  class="button secondary copy-value"
-                  type="button"
-                  data-copy-target="result-model"
-                  data-copy-label="model ID"
-                  aria-label="Copy model ID"
-                >
-                  Copy
-                </button>
-              </dd>
-            </div>
-            <div>
-              <dt>Responses API</dt>
-              <dd><strong>On</strong> for Chat Model node version 1.3</dd>
-            </div>
-          </dl>
-          <p>All models detected: <span id="result-models">Not detected</span></p>
-          <p>
-            If the Responses API switch is absent, keep the node's default
-            Chat Completions behavior; the bridge supports that route too.
-          </p>
-        </div>
-
-        <div class="model-box">
-          <h3>3. HTTP Request node</h3>
-          <dl class="result-list">
-            <div>
-              <dt>Method</dt>
-              <dd><code>POST</code></dd>
-            </div>
-            <div>
-              <dt>URL</dt>
-              <dd class="result-value">
-                <code id="result-http-url">
-                  http://n8n-openai-oauth:10531/v1/responses
-                </code>
-                <button
-                  class="button secondary copy-value"
-                  type="button"
-                  data-copy-target="result-http-url"
-                  data-copy-label="HTTP endpoint"
-                  aria-label="Copy HTTP endpoint"
-                >
-                  Copy
-                </button>
-              </dd>
-            </div>
-            <div>
-              <dt>Authentication</dt>
-              <dd>None</dd>
-            </div>
-          </dl>
-        </div>
+        <details class="recipe-disclosure">
+          <summary>
+            <span>2. OpenAI Chat Model for AI Agent or Basic LLM Chain</span>
+          </summary>
+          <div class="model-box recipe-content">
+            <dl class="result-list">
+              <div>
+                <dt>Model ID</dt>
+                <dd class="result-value">
+                  <code id="result-model">Not detected</code>
+                  <button
+                    class="button secondary copy-value"
+                    type="button"
+                    data-copy-target="result-model"
+                    data-copy-label="model ID"
+                    aria-label="Copy model ID"
+                  >
+                    Copy
+                  </button>
+                </dd>
+              </div>
+              <div>
+                <dt>Responses API</dt>
+                <dd><strong>On</strong> for Chat Model node version 1.3</dd>
+              </div>
+            </dl>
+            <p>All models detected: <span id="result-models">Not detected</span></p>
+            <p>
+              If the Responses API switch is absent, keep the node's default
+              Chat Completions behavior; the bridge supports that route too.
+            </p>
+          </div>
+        </details>
+
+        <details class="recipe-disclosure">
+          <summary><span>3. HTTP Request node</span></summary>
+          <div class="model-box recipe-content">
+            <dl class="result-list">
+              <div>
+                <dt>Method</dt>
+                <dd><code>POST</code></dd>
+              </div>
+              <div>
+                <dt>URL</dt>
+                <dd class="result-value">
+                  <code id="result-http-url">http://n8n-openai-oauth:10531/v1/responses</code>
+                  <button
+                    class="button secondary copy-value"
+                    type="button"
+                    data-copy-target="result-http-url"
+                    data-copy-label="HTTP endpoint"
+                    aria-label="Copy HTTP endpoint"
+                  >
+                    Copy
+                  </button>
+                </dd>
+              </div>
+              <div>
+                <dt>Authorization</dt>
+                <dd><code>Bearer local-only</code></dd>
+              </div>
+              <div>
+                <dt>Content-Type</dt>
+                <dd><code>application/json</code></dd>
+              </div>
+              <div>
+                <dt>Authentication</dt>
+                <dd>None</dd>
+              </div>
+              <div class="sample-body-row">
+                <dt>JSON body</dt>
+                <dd class="result-value">
+                  <pre class="sample-json"><code id="result-http-body"></code></pre>
+                  <button
+                    class="button secondary copy-value"
+                    type="button"
+                    data-copy-target="result-http-body"
+                    data-copy-label="HTTP JSON body"
+                    aria-label="Copy HTTP JSON body"
+                  >
+                    Copy
+                  </button>
+                </dd>
+              </div>
+            </dl>
+            <button
+              id="copy-http-recipe"
+              class="button secondary"
+              type="button"
+              data-copy-group="http"
+              data-copy-label="HTTP request recipe"
+            >
+              Copy HTTP request recipe
+            </button>
+          </div>
+        </details>
 
         <p class="final-note">
           The README includes complete AI Agent, Basic LLM Chain, JSON, and

package/src/ui/styles.css

@@ -29,6 +29,7 @@
   --radius-sm: 0.5rem;
   --radius: 0.875rem;
   --radius-lg: 1.25rem;
+  --header-height: 3.75rem;
 }
 
 :root[data-theme="dark"] {
@@ -160,8 +161,8 @@ a:focus-visible {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  min-height: 4.25rem;
-  padding: 0.75rem clamp(1rem, 4vw, 3rem);
+  min-height: var(--header-height);
+  padding: 0.5rem clamp(1rem, 4vw, 3rem);
   border-bottom: 1px solid rgb(221 227 223 / 75%);
   background: color-mix(in srgb, var(--background) 82%, transparent);
   backdrop-filter: blur(14px) saturate(1.4);
@@ -179,8 +180,8 @@ a:focus-visible {
 
 .brand-mark {
   display: block;
-  width: 2rem;
-  height: 2rem;
+  width: 1.75rem;
+  height: 1.75rem;
   flex: none;
   border-radius: 0.4375rem;
   transition:
@@ -302,15 +303,23 @@ a:focus-visible {
 /* ---------- Shell & intro ---------- */
 
 .shell {
-  width: min(100% - 2rem, 54rem);
+  width: min(100% - 2rem, 62rem);
   margin: 0 auto;
-  padding: 3.5rem 0 5rem;
+  padding: 1.75rem 0 3.5rem;
 }
 
 .intro {
   max-width: 44rem;
 }
 
+body:not([data-current-step="1"]) .intro {
+  display: none;
+}
+
+body:not([data-current-step="1"]) .shell {
+  padding-top: 1rem;
+}
+
 .eyebrow,
 .step-kicker {
   margin: 0 0 0.5rem;
@@ -330,8 +339,8 @@ p {
 
 h1 {
   max-width: 42rem;
-  margin-bottom: 1rem;
-  font-size: clamp(2.1rem, 6.5vw, 3.4rem);
+  margin-bottom: 0.75rem;
+  font-size: clamp(1.9rem, 5vw, 3rem);
   line-height: 1.04;
   letter-spacing: -0.045em;
 }
@@ -355,19 +364,37 @@ h3 {
 
 .lede {
   max-width: 42rem;
-  font-size: 1.0625rem;
+  margin-bottom: 0;
+  font-size: 1rem;
+}
+
+/* ---------- Toasts ---------- */
+
+.toast-stack {
+  position: fixed;
+  top: calc(var(--header-height) + 0.5rem);
+  right: clamp(0.75rem, 3vw, 2rem);
+  z-index: 15;
+  display: grid;
+  gap: 0.5rem;
+  width: min(25rem, calc(100vw - 1.5rem));
+  max-height: calc(100svh - var(--header-height) - 1rem);
+  overflow-y: auto;
+  pointer-events: none;
 }
 
-/* ---------- Safety notes ---------- */
+.toast {
+  pointer-events: auto;
+}
 
 .safety-note {
   position: relative;
   display: grid;
-  grid-template-columns: 2.25rem 1fr;
+  grid-template-columns: 2rem minmax(0, 1fr) auto;
   gap: 0.25rem 0.875rem;
   align-items: start;
-  margin: 1.25rem 0 0;
-  padding: 1rem 1.125rem;
+  margin: 0;
+  padding: 0.875rem 0.875rem 0.875rem 1rem;
   border: 1px solid var(--accent-border);
   border-radius: var(--radius);
   background: var(--accent-soft);
@@ -376,8 +403,8 @@ h3 {
 
 .safety-note::before {
   display: grid;
-  width: 2.25rem;
-  height: 2.25rem;
+  width: 2rem;
+  height: 2rem;
   grid-row: span 2;
   place-items: center;
   border-radius: 0.625rem;
@@ -394,6 +421,7 @@ h3 {
 
 .safety-note span {
   color: var(--accent-copy);
+  font-size: 0.875rem;
 }
 
 .backup-note {
@@ -411,10 +439,41 @@ h3 {
   color: var(--warning);
 }
 
+.toast-close {
+  display: inline-grid;
+  width: 1.75rem;
+  min-height: 1.75rem;
+  padding: 0;
+  place-items: center;
+  border: 0;
+  border-radius: 50%;
+  color: var(--text-muted);
+  background: transparent;
+  box-shadow: none;
+  cursor: pointer;
+  font-size: 1.25rem;
+  line-height: 1;
+}
+
+.toast-close:hover {
+  color: var(--text);
+  background: color-mix(in srgb, var(--text) 9%, transparent);
+}
+
+.toast-close:focus-visible {
+  outline: 3px solid #f2a94a;
+  outline-offset: 1px;
+}
+
+.safety-note .toast-close {
+  grid-column: 3;
+  grid-row: 1;
+}
+
 /* ---------- Stepper ---------- */
 
 .steps {
-  margin: 2.5rem 0 1.25rem;
+  margin: 1.5rem 0 0.75rem;
 }
 
 .steps ol {
@@ -509,12 +568,13 @@ h3 {
 
 .message,
 .error {
-  display: flex;
-  align-items: center;
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: start;
   gap: 0.625rem;
-  min-height: 2.875rem;
-  margin: 1rem 0;
-  padding: 0.75rem 1rem;
+  min-height: 3rem;
+  margin: 0;
+  padding: 0.75rem;
   border-radius: var(--radius-sm);
   font-size: 0.9375rem;
 }
@@ -527,6 +587,7 @@ h3 {
 }
 
 .message::before {
+  align-self: center;
   flex: 0 0 auto;
   width: 0.4375rem;
   height: 0.4375rem;
@@ -536,6 +597,7 @@ h3 {
 }
 
 .error {
+  grid-template-columns: minmax(0, 1fr) auto;
   border: 1px solid var(--danger-border);
   color: var(--danger);
   background: var(--danger-soft);
@@ -546,7 +608,7 @@ h3 {
 /* ---------- Panels ---------- */
 
 .panel {
-  padding: clamp(1.5rem, 4vw, 2.25rem);
+  padding: clamp(1.25rem, 3vw, 1.75rem);
   border: 1px solid var(--border);
   border-radius: var(--radius-lg);
   background: var(--surface);
@@ -555,7 +617,7 @@ h3 {
 }
 
 .panel-heading {
-  margin-bottom: 1.5rem;
+  margin-bottom: 1.125rem;
 }
 
 .panel-heading p {
@@ -955,7 +1017,7 @@ code {
 
 .model-box,
 .final-note {
-  margin-top: 1.5rem;
+  margin-top: 1rem;
   padding: 1.125rem;
   border: 1px solid var(--border);
   border-radius: var(--radius);
@@ -971,6 +1033,71 @@ code {
   color: var(--text-muted);
 }
 
+.recipe-disclosure {
+  margin-top: 1rem;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--surface-muted);
+}
+
+.recipe-disclosure summary {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 0.875rem 1rem;
+  cursor: pointer;
+  font-weight: 750;
+  list-style: none;
+}
+
+.recipe-disclosure summary::-webkit-details-marker {
+  display: none;
+}
+
+.recipe-disclosure summary::after {
+  flex: none;
+  color: var(--accent);
+  content: "+";
+  font-size: 1.25rem;
+  line-height: 1;
+}
+
+.recipe-disclosure[open] summary::after {
+  content: "−";
+}
+
+.recipe-disclosure summary:focus-visible {
+  outline: 3px solid #f2a94a;
+  outline-offset: -3px;
+}
+
+.recipe-content {
+  margin: 0;
+  border: 0;
+  border-top: 1px solid var(--border);
+  border-radius: 0;
+}
+
+.sample-body-row {
+  align-items: start !important;
+}
+
+.sample-json {
+  max-width: 100%;
+  margin: 0;
+  overflow-x: auto;
+  white-space: pre-wrap;
+}
+
+.sample-json code {
+  display: block;
+  padding: 0.75rem;
+  border: 1px solid var(--border);
+  background: var(--surface);
+  line-height: 1.45;
+}
+
 footer {
   padding: 1.5rem 1rem;
   border-top: 1px solid var(--border);
@@ -1072,8 +1199,15 @@ footer p {
   }
 
   .shell {
-    width: min(100% - 1rem, 54rem);
-    padding-top: 2rem;
+    width: min(100% - 1rem, 62rem);
+    padding: 1.25rem 0 2.5rem;
+  }
+
+  .toast-stack {
+    top: calc(var(--header-height) + 0.375rem);
+    right: 0.5rem;
+    width: calc(100vw - 1rem);
+    gap: 0.375rem;
   }
 
   .safety-note,
@@ -1086,6 +1220,19 @@ footer p {
     grid-row: auto;
   }
 
+  .toast-stack .safety-note {
+    grid-template-columns: 2rem minmax(0, 1fr) auto;
+    align-items: center;
+  }
+
+  .toast-stack .safety-note::before {
+    grid-row: auto;
+  }
+
+  .toast-stack .safety-note > span {
+    display: none;
+  }
+
   .steps li em {
     font-size: 0.6875rem;
   }
@@ -1108,6 +1255,10 @@ footer p {
     grid-template-columns: 1fr;
     gap: 0.25rem;
   }
+
+  .sample-body-row dd.result-value {
+    align-items: stretch;
+  }
 }
 
 @media (prefers-reduced-motion: reduce) {