relmio 0.2.6 → 0.2.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/src/ui/index.html CHANGED
@@ -5,501 +5,453 @@
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1" />
6
6
  <meta
7
7
  name="description"
8
- content="Relmio verifies a self-hosted n8n VPS and installs a separate private OpenAI-compatible sidecar only after review."
8
+ content="Relmio connects compatible AI clients to a private ChatGPT/Codex OAuth sidecar, starting with self-hosted n8n."
9
9
  />
10
- <title>Relmio | Private n8n setup</title>
10
+ <title>Relmio | n8n Setup</title>
11
11
  <link
12
12
  rel="icon"
13
13
  href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='%23137c74' d='M7 8h19l31 24H41L26 20v10L7 17Z'/%3E%3Cpath fill='%2312211f' d='M7 47l19-13v10l15-12h16L26 56H7Z'/%3E%3C/svg%3E"
14
14
  />
15
15
  <link rel="stylesheet" href="/styles.css" />
16
+ <script src="/theme.js" type="module"></script>
16
17
  <script src="/app.js" type="module"></script>
17
18
  </head>
18
19
  <body>
19
- <!--
20
- THESIS: Relmio makes an invisible relay legible as a verified route, refusing the generic setup card and progress bar.
21
- OWN-WORLD: Warm paper surfaces, midnight ink, relay teal, graphite seams, and precise signal spines form a compact Patchbay Ledger.
22
- STORY: Verify the local sign-in, confirm the host, inspect n8n, review every write, then complete the private route.
23
- FIRST VIEWPORT: A persistent route rail occupies the left while one dominant gate and its current safety boundary occupy the right.
24
- FORM: Signal Spine adapted for operation, first of three approved compositions, from candidate 5 and seed c4426c7c.
25
- FINISH: unreviewed and undocumented is unfinished; this build ends with the finish review, the verdict, and DESIGN.md
26
- -->
27
- <a class="skip-link" href="#main-content">Skip to the current gate</a>
20
+ <a class="skip-link" href="#main-content">Skip to setup</a>
28
21
 
29
22
  <header class="site-header">
30
- <a class="brand" href="#main-content" aria-label="Relmio setup home">
23
+ <div class="brand">
31
24
  <svg
32
25
  class="brand-mark"
33
26
  viewBox="0 0 64 64"
34
27
  aria-hidden="true"
35
28
  focusable="false"
36
29
  >
37
- <path class="brand-signal" d="M7 8h19l31 24H41L26 20v10L7 17Z" />
38
- <path class="brand-ink" d="M7 47l19-13v10l15-12h16L26 56H7Z" />
30
+ <path fill="#137c74" d="M7 8h19l31 24H41L26 20v10L7 17Z" />
31
+ <path fill="#12211f" d="M7 47l19-13v10l15-12h16L26 56H7Z" />
39
32
  </svg>
40
33
  <span>Relmio</span>
41
- </a>
42
- <span class="local-badge">
43
- <i aria-hidden="true"></i>
44
- Runs only on this computer
45
- </span>
34
+ </div>
35
+ <div class="header-actions">
36
+ <fieldset class="theme-picker">
37
+ <legend class="visually-hidden">Color theme</legend>
38
+ <label>
39
+ <input type="radio" name="color-theme" value="system" checked />
40
+ <span>System</span>
41
+ </label>
42
+ <label>
43
+ <input type="radio" name="color-theme" value="light" />
44
+ <span>Light</span>
45
+ </label>
46
+ <label>
47
+ <input type="radio" name="color-theme" value="dark" />
48
+ <span>Dark</span>
49
+ </label>
50
+ </fieldset>
51
+ <span class="local-badge">Runs only on this computer</span>
52
+ </div>
46
53
  </header>
47
54
 
48
- <main id="main-content" class="wizard-shell">
49
- <section class="wizard-intro" aria-labelledby="page-title">
50
- <h1 id="page-title">Five gates. One private sidecar.</h1>
51
- <p>
52
- Verify each boundary in order. Relmio leaves your existing n8n
53
- deployment untouched.
55
+ <main id="main-content" class="shell">
56
+ <section class="intro" aria-labelledby="page-title">
57
+ <p class="eyebrow">Guided VPS setup</p>
58
+ <h1 id="page-title">Connect n8n without changing n8n</h1>
59
+ <p class="lede">
60
+ This wizard installs one separate Docker sidecar. Your existing n8n
61
+ image, Compose file, container, and workflows stay untouched.
54
62
  </p>
55
- <section class="intro-ledger" aria-label="Setup boundaries">
56
- <span>
57
- <strong>Back up first</strong>
58
- <small>Export your n8n workflows before connecting.</small>
59
- </span>
60
- <span>
61
- <strong>No public port</strong>
62
- <small>The sidecar stays on the private Docker network.</small>
63
- </span>
64
- <span>
65
- <strong>You approve writes</strong>
66
- <small>The exact remote plan appears before installation.</small>
67
- </span>
68
- </section>
69
63
  </section>
70
64
 
71
- <section class="wizard-layout">
72
- <aside class="route-rail" aria-labelledby="route-title">
73
- <header>
74
- <h2 id="route-title">Your private route</h2>
75
- <p>Each verified gate extends the signal to the sidecar.</p>
76
- </header>
77
-
78
- <nav class="steps" aria-label="Setup progress">
79
- <ol>
80
- <li data-step-marker="1" aria-current="step">
81
- <span class="step-index">1</span>
82
- <span class="step-copy">
83
- <strong>Sign in</strong>
84
- <small>Local credential</small>
85
- </span>
86
- </li>
87
- <li data-step-marker="2">
88
- <span class="step-index">2</span>
89
- <span class="step-copy">
90
- <strong>Verify VPS</strong>
91
- <small>SSH fingerprint</small>
92
- </span>
93
- </li>
94
- <li data-step-marker="3">
95
- <span class="step-index">3</span>
96
- <span class="step-copy">
97
- <strong>Select n8n</strong>
98
- <small>Read-only discovery</small>
99
- </span>
100
- </li>
101
- <li data-step-marker="4">
102
- <span class="step-index">4</span>
103
- <span class="step-copy">
104
- <strong>Review plan</strong>
105
- <small>Every remote write</small>
106
- </span>
107
- </li>
108
- <li data-step-marker="5">
109
- <span class="step-index">5</span>
110
- <span class="step-copy">
111
- <strong>Complete</strong>
112
- <small>Private endpoint</small>
113
- </span>
114
- </li>
115
- </ol>
116
- </nav>
117
-
118
- <section class="rail-boundary" aria-label="Current safety model">
119
- <strong>Sidecar-only guarantee</strong>
120
- <p>
121
- No n8n restart. No n8n rebuild. No host port 10531. The wizard
122
- writes only under <code>/docker/n8n-openai-oauth</code>.
123
- </p>
124
- </section>
125
- </aside>
126
-
127
- <section class="work-column" aria-label="Current setup gate">
128
- <section class="status-dock" aria-label="Wizard status">
129
- <p id="preview-badge" class="preview-badge" hidden>
130
- <strong>Sanitized preview</strong>
131
- <span>Sample data only. No live sign-in or VPS writes.</span>
132
- </p>
133
- <p id="global-message" class="message" role="status" aria-live="polite">
134
- Checking your local sign-in…
65
+ <aside class="safety-note" aria-label="Safety guarantee">
66
+ <strong>Sidecar-only guarantee</strong>
67
+ <span>
68
+ No n8n restart. No n8n rebuild. No public port. You approve the exact
69
+ plan before anything is written.
70
+ </span>
71
+ </aside>
72
+
73
+ <aside class="safety-note backup-note" aria-label="Backup reminder">
74
+ <strong>Back up first</strong>
75
+ <span>
76
+ Export your n8n workflows before connecting. This wizard uses
77
+ sidecar-only commands, but it still writes to your VPS.
78
+ </span>
79
+ </aside>
80
+
81
+ <nav class="steps" aria-label="Setup progress">
82
+ <ol>
83
+ <li data-step-marker="1" aria-current="step">
84
+ <span>1</span><em>Sign in</em>
85
+ </li>
86
+ <li data-step-marker="2"><span>2</span><em>VPS</em></li>
87
+ <li data-step-marker="3"><span>3</span><em>n8n</em></li>
88
+ <li data-step-marker="4"><span>4</span><em>Review</em></li>
89
+ <li data-step-marker="5"><span>5</span><em>Done</em></li>
90
+ </ol>
91
+ </nav>
92
+
93
+ <div id="global-message" class="message" role="status" aria-live="polite">
94
+ Checking your local sign-in…
95
+ </div>
96
+ <div id="global-error" class="error" role="alert" tabindex="-1" hidden></div>
97
+
98
+ <section class="panel" data-step="1" aria-labelledby="signin-title">
99
+ <div class="panel-heading">
100
+ <span class="step-kicker">Step 1 of 5</span>
101
+ <h2 id="signin-title" tabindex="-1">Use your local ChatGPT sign-in</h2>
102
+ <p>
103
+ The OAuth credential stays on this computer until you approve its
104
+ encrypted SSH upload to your VPS.
105
+ </p>
106
+ </div>
107
+
108
+ <div class="status-row">
109
+ <span id="auth-indicator" class="status-dot" aria-hidden="true"></span>
110
+ <div>
111
+ <strong id="auth-title">Checking…</strong>
112
+ <p id="auth-detail">Looking for your local Codex credential.</p>
113
+ <p id="auth-updated" class="credential-time" hidden>
114
+ Credential updated
115
+ <time id="auth-updated-time"></time>
116
+ (local time).
135
117
  </p>
136
- <p id="global-error" class="error" role="alert" tabindex="-1" hidden></p>
137
- </section>
118
+ </div>
119
+ </div>
120
+
121
+ <div class="actions">
122
+ <button id="login-button" class="button secondary" type="button">
123
+ Sign in with ChatGPT
124
+ </button>
125
+ <a
126
+ id="login-link"
127
+ class="button secondary"
128
+ target="_blank"
129
+ rel="noopener noreferrer"
130
+ hidden
131
+ >
132
+ Open fresh ChatGPT sign-in
133
+ </a>
134
+ <button id="signin-next" class="button primary" type="button" disabled>
135
+ Continue to VPS
136
+ </button>
137
+ </div>
138
+ </section>
138
139
 
139
- <section class="panel" data-step="1" aria-labelledby="signin-title">
140
- <header class="panel-heading">
141
- <h2 id="signin-title" tabindex="-1">Use your local ChatGPT sign-in</h2>
142
- <span>Gate 1 of 5</span>
143
- <p>
144
- The OAuth credential stays on this computer until you approve
145
- its encrypted SSH upload to your VPS.
146
- </p>
147
- </header>
148
-
149
- <section class="status-row" aria-label="Local sign-in status">
150
- <span id="auth-indicator" class="status-dot" aria-hidden="true"></span>
151
- <span>
152
- <strong id="auth-title">Checking…</strong>
153
- <p id="auth-detail">Looking for your local Codex credential.</p>
154
- <p id="auth-updated" class="credential-time" hidden>
155
- Credential updated
156
- <time id="auth-updated-time"></time>
157
- (local time).
158
- </p>
159
- </span>
160
- </section>
140
+ <section class="panel" data-step="2" aria-labelledby="vps-title" hidden>
141
+ <div class="panel-heading">
142
+ <span class="step-kicker">Step 2 of 5</span>
143
+ <h2 id="vps-title" tabindex="-1">Connect to your VPS</h2>
144
+ <p>
145
+ Copy the address exactly from Hostinger. Your password is used only
146
+ for this live SSH connection and is never saved.
147
+ </p>
148
+ </div>
149
+
150
+ <form id="vps-form">
151
+ <div class="field-grid">
152
+ <label class="field">
153
+ <span>VPS address</span>
154
+ <input
155
+ id="host"
156
+ name="host"
157
+ inputmode="url"
158
+ autocomplete="off"
159
+ placeholder="your-vps-ip-or-hostname"
160
+ required
161
+ />
162
+ <small>Use the full IP address. Do not add <code>ssh root@</code>.</small>
163
+ </label>
161
164
 
162
- <footer class="actions">
163
- <button id="login-button" class="button secondary" type="button">
164
- Sign in with ChatGPT
165
- </button>
166
- <a
167
- id="login-link"
168
- class="button secondary"
169
- target="_blank"
170
- rel="noopener noreferrer"
171
- hidden
172
- >
173
- Open fresh ChatGPT sign-in
174
- </a>
175
- <button id="signin-next" class="button primary" type="button" disabled>
176
- Continue to VPS
177
- </button>
178
- </footer>
179
- </section>
165
+ <label class="field compact">
166
+ <span>SSH port</span>
167
+ <input
168
+ id="port"
169
+ name="port"
170
+ type="number"
171
+ min="1"
172
+ max="65535"
173
+ value="22"
174
+ required
175
+ />
176
+ </label>
180
177
 
181
- <section class="panel" data-step="2" aria-labelledby="vps-title" hidden>
182
- <header class="panel-heading">
183
- <h2 id="vps-title" tabindex="-1">Verify the VPS before sending a password</h2>
184
- <span>Gate 2 of 5</span>
185
- <p>
186
- Copy the address exactly from Hostinger or your VPS provider.
187
- Your password is used only for this live SSH connection and is
188
- never saved.
189
- </p>
190
- </header>
191
-
192
- <form id="vps-form">
193
- <section class="field-grid">
194
- <label class="field">
195
- <span>VPS address</span>
196
- <input
197
- id="host"
198
- name="host"
199
- inputmode="url"
200
- autocomplete="off"
201
- placeholder="your-vps-ip-or-hostname"
202
- required
203
- />
204
- <small>Use the full IP address. Do not add <code>ssh root@</code>.</small>
205
- </label>
206
-
207
- <label class="field compact">
208
- <span>SSH port</span>
209
- <input
210
- id="port"
211
- name="port"
212
- type="number"
213
- min="1"
214
- max="65535"
215
- value="22"
216
- required
217
- />
218
- </label>
219
-
220
- <label class="field compact">
221
- <span>Username</span>
222
- <input
223
- id="username"
224
- name="username"
225
- autocomplete="username"
226
- value="root"
227
- required
228
- />
229
- <small>The guided setup currently expects the VPS root account.</small>
230
- </label>
231
-
232
- <label class="field">
233
- <span>VPS password</span>
234
- <input
235
- id="password"
236
- name="password"
237
- type="password"
238
- autocomplete="current-password"
239
- disabled
240
- required
241
- />
242
- <small>
243
- This unlocks after host confirmation, then clears as soon
244
- as the connection attempt finishes.
245
- </small>
246
- </label>
247
- </section>
248
-
249
- <button id="fingerprint-button" class="button secondary" type="button">
250
- Check server identity
251
- </button>
178
+ <label class="field compact">
179
+ <span>Username</span>
180
+ <input
181
+ id="username"
182
+ name="username"
183
+ autocomplete="username"
184
+ value="root"
185
+ required
186
+ />
187
+ <small>
188
+ The current guided setup expects the VPS root account.
189
+ </small>
190
+ </label>
252
191
 
253
- <section id="fingerprint-box" class="fingerprint" hidden>
254
- <span>SSH fingerprint</span>
255
- <code id="fingerprint-value"></code>
256
- <label class="check-row">
257
- <input id="fingerprint-confirm" type="checkbox" />
258
- <span>
259
- This is the VPS I intended to connect to. I checked the
260
- address carefully.
261
- </span>
262
- </label>
263
- </section>
264
-
265
- <footer class="actions">
266
- <button class="button ghost back-button" data-back="1" type="button">
267
- Back
268
- </button>
269
- <button id="connect-button" class="button primary" type="submit" disabled>
270
- Connect and inspect Docker
271
- </button>
272
- </footer>
273
- </form>
274
- </section>
192
+ <label class="field">
193
+ <span>VPS password</span>
194
+ <input
195
+ id="password"
196
+ name="password"
197
+ type="password"
198
+ autocomplete="current-password"
199
+ disabled
200
+ required
201
+ />
202
+ <small>
203
+ This unlocks after you confirm the server identity, then clears
204
+ immediately after connecting.
205
+ </small>
206
+ </label>
207
+ </div>
275
208
 
276
- <section class="panel" data-step="3" aria-labelledby="n8n-title" hidden>
277
- <header class="panel-heading">
278
- <h2 id="n8n-title" tabindex="-1">Choose the detected n8n route</h2>
279
- <span>Gate 3 of 5</span>
280
- <p>
281
- Discovery uses read-only Docker commands and does not execute
282
- anything inside n8n.
283
- </p>
284
- </header>
285
-
286
- <section class="version-strip" aria-label="Detected Docker versions">
287
- <span>Docker <strong id="docker-version">Pending</strong></span>
288
- <span>Compose <strong id="compose-version">Pending</strong></span>
289
- </section>
290
-
291
- <section class="field-grid single">
292
- <label class="field">
293
- <span>Running n8n container</span>
294
- <select id="container-select"></select>
295
- </label>
296
-
297
- <label class="field">
298
- <span>Shared Docker network</span>
299
- <select id="network-select"></select>
300
- <small>The sidecar joins this network. n8n itself is not changed.</small>
301
- </label>
302
- </section>
303
-
304
- <footer class="actions">
305
- <button class="button ghost back-button" data-back="2" type="button">
306
- Back
307
- </button>
308
- <button id="review-button" class="button primary" type="button">
309
- Review the exact plan
310
- </button>
311
- </footer>
312
- </section>
209
+ <button id="fingerprint-button" class="button secondary" type="button">
210
+ Check server identity
211
+ </button>
313
212
 
314
- <section class="panel" data-step="4" aria-labelledby="review-title" hidden>
315
- <header class="panel-heading">
316
- <h2 id="review-title" tabindex="-1">Review every remote write</h2>
317
- <span>Gate 4 of 5</span>
318
- <p>The VPS has not changed. Confirm the sidecar-only plan below.</p>
319
- </header>
320
-
321
- <section class="review-grid">
322
- <section aria-labelledby="will-title">
323
- <h3 id="will-title">The wizard will</h3>
324
- <ul class="check-list">
325
- <li>Create or update <code>/docker/n8n-openai-oauth</code></li>
326
- <li>Build and start only the <code>openai-oauth</code> sidecar</li>
327
- <li>Attach the sidecar to <strong id="review-network">Pending</strong></li>
328
- <li>
329
- Use the private hostname
330
- <code id="review-endpoint">n8n-openai-oauth</code>
331
- </li>
332
- <li>Upload the OAuth file with owner-only permissions</li>
333
- </ul>
334
- </section>
335
- <section aria-labelledby="wont-title">
336
- <h3 id="wont-title">The wizard will not</h3>
337
- <ul class="no-list">
338
- <li>Edit or rebuild the n8n image</li>
339
- <li>Stop, restart, or recreate n8n</li>
340
- <li>Publish port <code>10531</code></li>
341
- <li>Create a Traefik route</li>
342
- </ul>
343
- </section>
344
- </section>
345
-
346
- <label class="check-row approval">
347
- <input id="install-confirm" type="checkbox" />
213
+ <div id="fingerprint-box" class="fingerprint" hidden>
214
+ <span>SSH fingerprint</span>
215
+ <code id="fingerprint-value"></code>
216
+ <label class="check-row">
217
+ <input id="fingerprint-confirm" type="checkbox" />
348
218
  <span>
349
- I approve this sidecar-only installation and understand
350
- <code>openai-oauth</code> is an unofficial project.
219
+ This is the VPS I intended to connect to. I checked the address
220
+ carefully.
351
221
  </span>
352
222
  </label>
223
+ </div>
353
224
 
354
- <footer class="actions">
355
- <button class="button ghost back-button" data-back="3" type="button">
356
- Back
357
- </button>
358
- <button id="install-button" class="button primary" type="button" disabled>
359
- Install the sidecar
360
- </button>
361
- </footer>
362
- </section>
363
-
364
- <section class="panel success-panel" data-step="5" aria-labelledby="done-title" hidden>
365
- <svg
366
- class="success-mark"
367
- viewBox="0 0 32 32"
368
- aria-hidden="true"
369
- focusable="false"
370
- >
371
- <circle cx="16" cy="16" r="14"></circle>
372
- <path d="m9.5 16.5 4 4 9-10"></path>
373
- </svg>
374
- <header class="panel-heading">
375
- <h2 id="done-title" tabindex="-1">The private route is ready</h2>
376
- <span>Gate 5 of 5</span>
377
- <p>
378
- Copy the OpenAI credential values first, then use the node
379
- recipe that matches your n8n workflow.
380
- </p>
381
- </header>
382
-
383
- <h3>1. OpenAI credential</h3>
384
- <dl class="result-list">
385
- <div>
386
- <dt>Base URL</dt>
387
- <dd class="result-value">
388
- <code id="result-url">http://n8n-openai-oauth:10531/v1</code>
389
- <button
390
- class="button secondary copy-value"
391
- type="button"
392
- data-copy-target="result-url"
393
- data-copy-label="Base URL"
394
- aria-label="Copy Base URL"
395
- >
396
- Copy
397
- </button>
398
- </dd>
399
- </div>
400
- <div>
401
- <dt>API key</dt>
402
- <dd class="result-value">
403
- <code id="result-key">local-only</code>
404
- <button
405
- class="button secondary copy-value"
406
- type="button"
407
- data-copy-target="result-key"
408
- data-copy-label="API key"
409
- aria-label="Copy API key"
410
- >
411
- Copy
412
- </button>
413
- </dd>
414
- </div>
415
- <div>
416
- <dt>Organization ID</dt>
417
- <dd>Leave empty</dd>
418
- </div>
419
- <div>
420
- <dt>Custom header</dt>
421
- <dd><strong>Off</strong></dd>
422
- </div>
423
- </dl>
424
-
425
- <button id="copy-settings" class="button secondary" type="button">
426
- Copy credential settings
225
+ <div class="actions">
226
+ <button class="button ghost back-button" data-back="1" type="button">
227
+ Back
427
228
  </button>
229
+ <button id="connect-button" class="button primary" type="submit" disabled>
230
+ Connect and inspect Docker
231
+ </button>
232
+ </div>
233
+ </form>
234
+ </section>
428
235
 
429
- <section class="model-box">
430
- <h3>2. OpenAI Chat Model: AI Agent or Basic LLM Chain</h3>
431
- <dl class="result-list">
432
- <div>
433
- <dt>Model ID</dt>
434
- <dd class="result-value">
435
- <code id="result-model">Pending</code>
436
- <button
437
- class="button secondary copy-value"
438
- type="button"
439
- data-copy-target="result-model"
440
- data-copy-label="model ID"
441
- aria-label="Copy model ID"
442
- >
443
- Copy
444
- </button>
445
- </dd>
446
- </div>
447
- <div>
448
- <dt>Responses API</dt>
449
- <dd><strong>On</strong> for Chat Model node version 1.3</dd>
450
- </div>
451
- </dl>
452
- <p>All models detected: <span id="result-models">Pending</span></p>
453
- <p>
454
- If the Responses API switch is absent, keep the node's default
455
- Chat Completions behavior. The bridge supports that route too.
456
- </p>
457
- </section>
458
-
459
- <section class="model-box">
460
- <h3>3. HTTP Request node</h3>
461
- <dl class="result-list">
462
- <div>
463
- <dt>Method</dt>
464
- <dd><code>POST</code></dd>
465
- </div>
466
- <div>
467
- <dt>URL</dt>
468
- <dd class="result-value">
469
- <code id="result-http-url">http://n8n-openai-oauth:10531/v1/responses</code>
470
- <button
471
- class="button secondary copy-value"
472
- type="button"
473
- data-copy-target="result-http-url"
474
- data-copy-label="HTTP endpoint"
475
- aria-label="Copy HTTP endpoint"
476
- >
477
- Copy
478
- </button>
479
- </dd>
480
- </div>
481
- <div>
482
- <dt>Authentication</dt>
483
- <dd>None</dd>
484
- </div>
485
- </dl>
486
- </section>
487
-
488
- <p class="final-note">
489
- The README includes complete AI Agent, Basic LLM Chain, JSON, and
490
- importable cURL examples. Start with no built-in tools. You can
491
- now return to Terminal and press Control+C to close this local
492
- wizard; the VPS sidecar will keep running.
493
- </p>
236
+ <section class="panel" data-step="3" aria-labelledby="n8n-title" hidden>
237
+ <div class="panel-heading">
238
+ <span class="step-kicker">Step 3 of 5</span>
239
+ <h2 id="n8n-title" tabindex="-1">Choose the detected n8n</h2>
240
+ <p>
241
+ Discovery uses read-only Docker commands. It does not execute
242
+ anything inside n8n.
243
+ </p>
244
+ </div>
245
+
246
+ <div class="version-strip" aria-label="Detected Docker versions">
247
+ <span>Docker <strong id="docker-version">Not detected</strong></span>
248
+ <span>Compose <strong id="compose-version">Not detected</strong></span>
249
+ </div>
250
+
251
+ <div class="field-grid single">
252
+ <label class="field">
253
+ <span>Running n8n container</span>
254
+ <select id="container-select"></select>
255
+ </label>
256
+
257
+ <label class="field">
258
+ <span>Shared Docker network</span>
259
+ <select id="network-select"></select>
260
+ <small>The sidecar joins this network; n8n itself is not changed.</small>
261
+ </label>
262
+ </div>
263
+
264
+ <div class="actions">
265
+ <button class="button ghost back-button" data-back="2" type="button">
266
+ Back
267
+ </button>
268
+ <button id="review-button" class="button primary" type="button">
269
+ Review the exact plan
270
+ </button>
271
+ </div>
272
+ </section>
273
+
274
+ <section class="panel" data-step="4" aria-labelledby="review-title" hidden>
275
+ <div class="panel-heading">
276
+ <span class="step-kicker">Step 4 of 5</span>
277
+ <h2 id="review-title" tabindex="-1">Review before installing</h2>
278
+ <p>No existing n8n files or containers will be changed.</p>
279
+ </div>
280
+
281
+ <div class="review-grid">
282
+ <section aria-labelledby="will-title">
283
+ <h3 id="will-title">The wizard will</h3>
284
+ <ul class="check-list">
285
+ <li>Create or update <code>/docker/n8n-openai-oauth</code></li>
286
+ <li>Build and start only the <code>openai-oauth</code> sidecar</li>
287
+ <li>Attach the sidecar to <strong id="review-network">Not selected</strong></li>
288
+ <li>
289
+ Use the private hostname
290
+ <code id="review-endpoint">n8n-openai-oauth</code>
291
+ </li>
292
+ <li>Upload the OAuth file with owner-only permissions</li>
293
+ </ul>
294
+ </section>
295
+ <section aria-labelledby="wont-title">
296
+ <h3 id="wont-title">The wizard will not</h3>
297
+ <ul class="no-list">
298
+ <li>Edit or rebuild the n8n image</li>
299
+ <li>Stop, restart, or recreate n8n</li>
300
+ <li>Publish port <code>10531</code></li>
301
+ <li>Create a Traefik route</li>
302
+ </ul>
494
303
  </section>
495
- </section>
304
+ </div>
305
+
306
+ <label class="check-row approval">
307
+ <input id="install-confirm" type="checkbox" />
308
+ <span>
309
+ I approve this sidecar-only installation and understand
310
+ <code>openai-oauth</code> is an unofficial project.
311
+ </span>
312
+ </label>
313
+
314
+ <div class="actions">
315
+ <button class="button ghost back-button" data-back="3" type="button">
316
+ Back
317
+ </button>
318
+ <button id="install-button" class="button primary" type="button" disabled>
319
+ Install the sidecar
320
+ </button>
321
+ </div>
322
+ </section>
323
+
324
+ <section class="panel success-panel" data-step="5" aria-labelledby="done-title" hidden>
325
+ <div class="success-mark" aria-hidden="true">✓</div>
326
+ <div class="panel-heading">
327
+ <span class="step-kicker">Step 5 of 5</span>
328
+ <h2 id="done-title" tabindex="-1">The private bridge is ready</h2>
329
+ <p>
330
+ Copy the OpenAI credential values first, then use one of the node
331
+ recipes below.
332
+ </p>
333
+ </div>
334
+
335
+ <h3>1. OpenAI credential</h3>
336
+ <dl class="result-list">
337
+ <div>
338
+ <dt>Base URL</dt>
339
+ <dd class="result-value">
340
+ <code id="result-url">http://n8n-openai-oauth:10531/v1</code>
341
+ <button
342
+ class="button secondary copy-value"
343
+ type="button"
344
+ data-copy-target="result-url"
345
+ data-copy-label="Base URL"
346
+ aria-label="Copy Base URL"
347
+ >
348
+ Copy
349
+ </button>
350
+ </dd>
351
+ </div>
352
+ <div>
353
+ <dt>API key</dt>
354
+ <dd class="result-value">
355
+ <code id="result-key">local-only</code>
356
+ <button
357
+ class="button secondary copy-value"
358
+ type="button"
359
+ data-copy-target="result-key"
360
+ data-copy-label="API key"
361
+ aria-label="Copy API key"
362
+ >
363
+ Copy
364
+ </button>
365
+ </dd>
366
+ </div>
367
+ <div>
368
+ <dt>Organization ID</dt>
369
+ <dd>Leave empty</dd>
370
+ </div>
371
+ <div>
372
+ <dt>Custom header</dt>
373
+ <dd><strong>Off</strong></dd>
374
+ </div>
375
+ </dl>
376
+
377
+ <button id="copy-settings" class="button secondary" type="button">
378
+ Copy credential settings
379
+ </button>
380
+
381
+ <div class="model-box">
382
+ <h3>2. OpenAI Chat Model for AI Agent or Basic LLM Chain</h3>
383
+ <dl class="result-list">
384
+ <div>
385
+ <dt>Model ID</dt>
386
+ <dd class="result-value">
387
+ <code id="result-model">Not detected</code>
388
+ <button
389
+ class="button secondary copy-value"
390
+ type="button"
391
+ data-copy-target="result-model"
392
+ data-copy-label="model ID"
393
+ aria-label="Copy model ID"
394
+ >
395
+ Copy
396
+ </button>
397
+ </dd>
398
+ </div>
399
+ <div>
400
+ <dt>Responses API</dt>
401
+ <dd><strong>On</strong> for Chat Model node version 1.3</dd>
402
+ </div>
403
+ </dl>
404
+ <p>All models detected: <span id="result-models">Not detected</span></p>
405
+ <p>
406
+ If the Responses API switch is absent, keep the node's default
407
+ Chat Completions behavior; the bridge supports that route too.
408
+ </p>
409
+ </div>
410
+
411
+ <div class="model-box">
412
+ <h3>3. HTTP Request node</h3>
413
+ <dl class="result-list">
414
+ <div>
415
+ <dt>Method</dt>
416
+ <dd><code>POST</code></dd>
417
+ </div>
418
+ <div>
419
+ <dt>URL</dt>
420
+ <dd class="result-value">
421
+ <code id="result-http-url">
422
+ http://n8n-openai-oauth:10531/v1/responses
423
+ </code>
424
+ <button
425
+ class="button secondary copy-value"
426
+ type="button"
427
+ data-copy-target="result-http-url"
428
+ data-copy-label="HTTP endpoint"
429
+ aria-label="Copy HTTP endpoint"
430
+ >
431
+ Copy
432
+ </button>
433
+ </dd>
434
+ </div>
435
+ <div>
436
+ <dt>Authentication</dt>
437
+ <dd>None</dd>
438
+ </div>
439
+ </dl>
440
+ </div>
441
+
442
+ <p class="final-note">
443
+ The README includes complete AI Agent, Basic LLM Chain, JSON, and
444
+ importable cURL examples. Start with no built-in tools. You can now
445
+ return to Terminal and press Control+C to close this local wizard;
446
+ the VPS sidecar will keep running.
447
+ </p>
496
448
  </section>
497
449
  </main>
498
450
 
499
- <footer class="site-footer">
451
+ <footer>
500
452
  <p>
501
453
  Personal and experimental use only. Keep your OAuth credential private
502
- and follow OpenAI's terms and usage policies.
454
+ and follow OpenAIs terms and usage policies.
503
455
  </p>
504
456
  </footer>
505
457
  </body>