relmio 0.2.12 → 0.2.13

package/CHANGELOG.md

@@ -7,6 +7,22 @@ checks the registry separately after publication.
 
 ## Unreleased
 
+## [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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "relmio",
-  "version": "0.2.12",
+  "version": "0.2.13",
   "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

@@ -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) {