relmio 0.3.0 → 0.4.0

package/src/ui/app.js

@@ -13,6 +13,10 @@ const state = {
 };
 
 const element = (id) => document.getElementById(id);
+const localEndpointLink = element("local-endpoint-link");
+if (token) {
+  localEndpointLink.href = `/local?session=${encodeURIComponent(token)}`;
+}
 const messageToast = element("global-message");
 const message = element("global-message-text");
 const errorBox = element("global-error");

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
@@ -177,6 +177,19 @@
           </div>
         </div>
 
+        <aside class="final-note" aria-labelledby="local-endpoint-title">
+          <h3 id="local-endpoint-title">Need an endpoint on this computer?</h3>
+          <p>
+            Install a loopback-only OpenAI API endpoint with a Platform key, or
+            the experimental official Codex App Server with ChatGPT sign-in.
+          </p>
+          <div class="actions">
+            <a id="local-endpoint-link" class="button secondary">
+              Set up a local endpoint
+            </a>
+          </div>
+        </aside>
+
         <div class="actions">
           <button id="login-button" class="button secondary" type="button">
             Sign in with ChatGPT
@@ -198,7 +211,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 +306,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 +343,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 +391,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 +446,7 @@
 
         <button
           id="copy-settings"
-          class="button secondary"
+          class="button primary"
           type="button"
           data-copy-group="credential"
           data-copy-label="OpenAI credential settings"

package/src/ui/local.css

@@ -0,0 +1,262 @@
+.local-wizard .shell {
+  width: min(100% - 2.5rem, 78rem);
+}
+
+.local-wizard .panel {
+  scroll-behavior: smooth;
+}
+
+.local-wizard .status-row {
+  margin-bottom: 1rem;
+}
+
+.local-wizard .safety-note {
+  grid-template-columns: 1.75rem minmax(0, 1fr);
+}
+
+.local-wizard .safety-note > span {
+  grid-column: 2;
+}
+
+.target-picker {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.75rem;
+  min-width: 0;
+  margin: 0 0 1rem;
+  padding: 0;
+  border: 0;
+}
+
+.target-picker legend {
+  width: 100%;
+  margin-bottom: 0.5rem;
+  font-weight: 800;
+}
+
+.target-card {
+  position: relative;
+  display: grid;
+  grid-template-columns: 1.25rem minmax(0, 1fr);
+  gap: 0.75rem;
+  min-width: 0;
+  padding: 1rem;
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius);
+  background: var(--surface-muted);
+  cursor: pointer;
+  transition:
+    border-color 180ms var(--ease),
+    background 180ms var(--ease),
+    box-shadow 180ms var(--ease),
+    transform 180ms var(--ease);
+}
+
+.target-card:hover {
+  border-color: var(--accent);
+  transform: translateY(-1px);
+}
+
+.target-card:has(input:checked) {
+  border-color: var(--accent);
+  background: var(--accent-soft);
+  box-shadow: 0 0 0 3px rgb(19 124 116 / 12%);
+}
+
+.target-card:has(input:focus-visible) {
+  outline: 3px solid #f2a94a;
+  outline-offset: 2px;
+}
+
+.target-card input {
+  width: 1.125rem;
+  height: 1.125rem;
+  margin: 0.2rem 0 0;
+  accent-color: var(--accent);
+}
+
+.target-card-copy {
+  display: grid;
+  gap: 0.35rem;
+  color: var(--text-muted);
+  font-size: 0.875rem;
+}
+
+.target-card-copy strong {
+  color: var(--text);
+  font-size: 1rem;
+}
+
+.target-card-copy .target-meta {
+  color: var(--accent-deep);
+  font-size: 0.75rem;
+  font-weight: 800;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+}
+
+.warning-card:has(input:checked) {
+  border-color: var(--warning-border);
+  background: var(--warning-soft);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--warning) 13%, transparent);
+}
+
+.warning-card .target-meta {
+  color: var(--warning);
+}
+
+.local-fields {
+  grid-template-columns: minmax(8rem, 0.55fr) minmax(0, 1.45fr);
+}
+
+.field textarea {
+  width: 100%;
+  min-height: 5.75rem;
+  padding: 0.625rem 0.875rem;
+  resize: vertical;
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius-sm);
+  color: var(--text);
+  background: var(--surface);
+  font: 0.875rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  transition:
+    border-color 200ms var(--ease),
+    box-shadow 200ms var(--ease);
+}
+
+.field textarea:hover {
+  border-color: var(--accent);
+}
+
+.field textarea:focus {
+  border-color: var(--accent);
+  outline: 0;
+  box-shadow: 0 0 0 4px rgb(19 124 116 / 13%);
+}
+
+.policy-note,
+.high-trust-warning,
+.one-time-note,
+.codex-login {
+  margin-top: 1rem;
+  padding: 0.875rem 1rem;
+  border: 1px solid var(--accent-border);
+  border-radius: var(--radius);
+  background: var(--accent-soft);
+}
+
+.policy-note p,
+.high-trust-warning p,
+.one-time-note p,
+.codex-login p {
+  margin: 0.35rem 0 0;
+  color: var(--text-muted);
+  font-size: 0.875rem;
+}
+
+.high-trust-warning {
+  border-color: var(--warning-border);
+  background: var(--warning-soft);
+}
+
+.high-trust-warning strong,
+.high-trust-warning p {
+  color: var(--warning);
+}
+
+.one-time-note {
+  margin: 0 0 1rem;
+  border-color: var(--warning-border);
+  background: var(--warning-soft);
+}
+
+.one-time-note strong,
+.one-time-note p {
+  color: var(--warning);
+}
+
+.local-review-grid {
+  margin-top: 1rem;
+}
+
+.review-details dd {
+  overflow-wrap: anywhere;
+}
+
+.review-details div {
+  grid-template-columns: 9.5rem minmax(0, 1fr);
+}
+
+.codex-login {
+  border-color: var(--warning-border);
+  background: var(--warning-soft);
+}
+
+.codex-login h3 {
+  margin-bottom: 0;
+}
+
+.codex-login > .button {
+  margin-top: 0.875rem;
+}
+
+.device-code-result {
+  margin-top: 1rem;
+  padding-top: 1rem;
+  border-top: 1px solid var(--warning-border);
+}
+
+.device-code-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.625rem;
+  margin: 0.75rem 0;
+}
+
+.device-code-row code {
+  padding: 0.65rem 0.875rem;
+  border: 1px solid var(--warning-border);
+  background: var(--surface);
+  font-size: 1.125rem;
+  font-weight: 800;
+  letter-spacing: 0.08em;
+}
+
+.device-code-status {
+  font-weight: 700;
+}
+
+.local-wizard a.button {
+  text-decoration: none;
+}
+
+@media (max-width: 60rem),
+  (min-width: 961px) and (max-height: 768px) {
+  .local-wizard .steps ol {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 48rem) {
+  .target-picker,
+  .local-fields,
+  .local-review-grid {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .review-details div {
+    grid-template-columns: minmax(0, 1fr);
+    gap: 0.2rem;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .local-wizard *,
+  .local-wizard *::before,
+  .local-wizard *::after {
+    scroll-behavior: auto !important;
+    transition-duration: 0.01ms !important;
+    animation-duration: 0.01ms !important;
+  }
+}