src/ui/supergrok-vps.html
Rama main · réplica de lectura del repositorio original.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="Connect SuperGrok to self-hosted n8n through a private companion." />
<title>Relmio | SuperGrok on your VPS</title>
<link rel="icon" href="/relmio-icon-rounded.svg" type="image/svg+xml" />
<link rel="stylesheet" href="/relmio-ui.css" />
<link rel="stylesheet" href="/supergrok-vps.css" />
<link rel="stylesheet" href="/guide.css" />
<script src="/session-bootstrap.js"></script>
<script src="/theme.js" type="module"></script>
<script src="/supergrok-vps.js" type="module"></script>
<script src="/guide.js" type="module"></script>
</head>
<body class="rm-app rm-app--fit supergrok-vps" data-stage="1" data-operation-busy="false" data-guide-page="supergrok-vps">
<a class="rm-skip-link" href="#main-content">Skip to SuperGrok setup</a>
<header class="rm-topbar">
<div class="rm-topbar__inner">
<a class="rm-brand" href="/" data-wizard-route="/" aria-label="Relmio home">
<img class="rm-brand__logo" src="/relmio-icon-96.png" width="32" height="32" alt="" />
<span>Relmio</span>
</a>
<nav class="rm-nav" aria-label="Primary">
<ul class="rm-nav__list">
<li><a class="rm-nav__link" href="/" data-wizard-route="/" aria-current="true">Setup</a></li>
<li><a class="rm-nav__link" href="/local" data-wizard-route="/local">This computer</a></li>
<li><a class="rm-nav__link" href="/hosting" data-wizard-route="/hosting">Hosting options</a></li>
<li><a class="rm-nav__link" href="https://relmio.jpfusin.tech/docs" target="_blank" rel="noopener noreferrer">Docs<span class="rm-icon rm-icon--external rm-icon--xs" aria-hidden="true"></span><span class="rm-visually-hidden"> (opens in a new tab)</span></a></li>
</ul>
</nav>
<div class="rm-topbar__actions">
<span class="rm-status rm-topbar__wide" data-tone="success"><span class="rm-status__dot"></span>Runs on this computer</span>
<button id="guide-toggle" class="rm-icon-button" type="button" aria-pressed="false" aria-label="Setup guide" title="Setup guide" hidden><span class="rm-icon rm-icon--help" aria-hidden="true"></span></button>
<fieldset class="rm-segmented">
<legend class="rm-visually-hidden">Color theme</legend>
<label class="rm-segmented__item" title="System"><input class="rm-segmented__input" type="radio" name="color-theme" value="system" checked /><span class="rm-icon rm-icon--monitor rm-icon--sm" aria-hidden="true"></span><span class="rm-visually-hidden">System</span></label>
<label class="rm-segmented__item" title="Light"><input class="rm-segmented__input" type="radio" name="color-theme" value="light" /><span class="rm-icon rm-icon--sun rm-icon--sm" aria-hidden="true"></span><span class="rm-visually-hidden">Light</span></label>
<label class="rm-segmented__item" title="Dark"><input class="rm-segmented__input" type="radio" name="color-theme" value="dark" /><span class="rm-icon rm-icon--moon rm-icon--sm" aria-hidden="true"></span><span class="rm-visually-hidden">Dark</span></label>
</fieldset>
<a class="rm-chip rm-topbar__wide" data-rm-repo-link href="https://github.com/Demonbane18/relmio" target="_blank" rel="noopener noreferrer" aria-label="Open Relmio version __RELMIO_PACKAGE_VERSION__ on GitHub. Opens in a new tab.">
<span class="rm-icon rm-icon--github rm-icon--sm" aria-hidden="true"></span>GitHub
<span class="rm-chip__meta"><span class="rm-icon rm-icon--star rm-icon--xs" aria-hidden="true"></span><span data-rm-repo-stars>?</span></span>
<span class="rm-chip__meta">v__RELMIO_PACKAGE_VERSION__</span>
</a>
<a class="rm-icon-button rm-topbar__wide" href="https://ko-fi.com/paldogies" target="_blank" rel="noopener noreferrer" aria-label="Support Relmio on Ko-fi (opens in a new tab)" title="Support Relmio on Ko-fi"><span class="rm-icon rm-icon--coffee" aria-hidden="true"></span></a>
<details class="rm-menu">
<summary class="rm-icon-button" aria-label="Menu"><span class="rm-icon rm-icon--menu" aria-hidden="true"></span></summary>
<div class="rm-menu__panel">
<nav aria-label="Primary">
<ul class="rm-menu__list">
<li><a class="rm-menu__link" href="/" data-wizard-route="/" aria-current="true">Setup</a></li>
<li><a class="rm-menu__link" href="/local" data-wizard-route="/local">This computer</a></li>
<li><a class="rm-menu__link" href="/hosting" data-wizard-route="/hosting">Hosting options</a></li>
<li><a class="rm-menu__link" href="https://relmio.jpfusin.tech/docs" target="_blank" rel="noopener noreferrer"><span class="rm-icon rm-icon--book rm-icon--sm" aria-hidden="true"></span>Docs<span class="rm-visually-hidden"> (opens in a new tab)</span></a></li>
</ul>
</nav>
<ul class="rm-menu__list rm-menu__section">
<li><button class="rm-menu__link" type="button" data-guide-toggle aria-pressed="false" hidden><span class="rm-icon rm-icon--help rm-icon--sm" aria-hidden="true"></span>Setup guide</button></li>
<li><a class="rm-menu__link" href="https://github.com/Demonbane18/relmio" target="_blank" rel="noopener noreferrer"><span class="rm-icon rm-icon--github rm-icon--sm" aria-hidden="true"></span>GitHub<span class="rm-visually-hidden"> (opens in a new tab)</span></a></li>
<li><a class="rm-menu__link" href="https://ko-fi.com/paldogies" target="_blank" rel="noopener noreferrer"><span class="rm-icon rm-icon--coffee rm-icon--sm" aria-hidden="true"></span>Support on Ko-fi<span class="rm-visually-hidden"> (opens in a new tab)</span></a></li>
</ul>
</div>
</details>
</div>
</div>
</header>
<main id="main-content" class="rm-app__main" tabindex="-1">
<noscript><p class="rm-callout rm-callout--warning">This setup needs JavaScript to check server identity and show the plan. Enable JavaScript, then reload before continuing.</p></noscript>
<div class="rm-split route-layout">
<aside class="rm-split__rail route-rail" aria-label="SuperGrok setup progress">
<div class="route-intro">
<p class="rm-eyebrow">SuperGrok · VPS</p>
<h1 class="rm-h3">A private Grok route for n8n <span class="rm-badge rm-badge--accent">Experimental</span></h1>
<p class="rm-small rm-muted">Chat on a VPS is user-reported. Assistant and the Calculator workflow are unverified there.</p>
</div>
<ol class="rm-stepper rm-stepper--track route-steps" aria-label="Steps">
<li class="rm-stepper__item" data-stage-marker="1" aria-current="step"><span class="rm-stepper__link"><span class="rm-stepper__marker">1</span><span class="rm-stepper__label">Check server</span></span></li>
<li class="rm-stepper__item" data-stage-marker="2"><span class="rm-stepper__link"><span class="rm-stepper__marker">2</span><span class="rm-stepper__label">Choose n8n</span></span></li>
<li class="rm-stepper__item" data-stage-marker="3"><span class="rm-stepper__link"><span class="rm-stepper__marker">3</span><span class="rm-stepper__label">Review</span></span></li>
<li class="rm-stepper__item" data-stage-marker="4"><span class="rm-stepper__link"><span class="rm-stepper__marker">4</span><span class="rm-stepper__label">Connect n8n</span></span></li>
</ol>
<section id="operation-progress" class="rm-card rm-card--compact route-progress" role="status" aria-live="polite" aria-atomic="false" tabindex="-1" hidden>
<div class="route-progress__head">
<p id="operation-progress-label" class="route-progress__label">No operation is running.</p>
<p class="rm-small rm-muted" aria-live="off"><span class="rm-visually-hidden">Elapsed </span><time id="operation-progress-elapsed" datetime="PT0S">00:00</time></p>
</div>
<div id="operation-progress-bar" class="rm-progress rm-progress--indeterminate" role="progressbar" aria-label="Current SuperGrok setup operation" aria-valuetext="No operation is running."><span class="rm-progress__bar" aria-hidden="true"></span></div>
<p id="operation-progress-note" class="rm-small rm-muted">Keep this page open until the step finishes.</p>
</section>
</aside>
<div id="route-steps-content" class="rm-split__content route-content" aria-busy="false">
<section id="ssh-panel" class="rm-panel route-panel" aria-labelledby="ssh-title" data-current>
<header class="rm-panel__header">
<div class="rm-panel__heading">
<span class="rm-eyebrow">Step 1 of 4</span>
<h2 id="ssh-title" class="rm-h1" tabindex="-1">Check your server</h2>
<p class="rm-muted">Check the server identity before you connect to the server.</p>
</div>
</header>
<form id="ssh-form" class="route-form">
<div class="rm-panel__body">
<div class="route-columns route-columns--form">
<div class="route-main">
<div class="route-target">
<label class="rm-field"><span class="rm-field__label">Server address</span><input id="host" class="rm-input" inputmode="url" autocomplete="off" required placeholder="your-server-ip-or-hostname" /></label>
<label class="rm-field"><span class="rm-field__label">Connection port</span><input id="port" class="rm-input" type="number" value="22" min="1" max="65535" required /></label>
<button id="scan-button" class="rm-button route-target__scan" type="button"><span class="rm-icon rm-icon--shield rm-icon--sm" aria-hidden="true"></span>Check this server</button>
</div>
<label id="fingerprint-box" class="rm-check rm-check--boxed" hidden><input id="trust-host" type="checkbox" aria-describedby="fingerprint-hint" /><span>I checked this server identity. This is the server I mean to use.<span class="rm-check__hint">SSH fingerprint <code id="fingerprint" class="route-fingerprint"></code></span><span id="fingerprint-hint" class="rm-check__hint">Compare this fingerprint with a trusted record for your server before you approve it.</span></span></label>
<div class="rm-form-grid route-signin">
<label class="rm-field"><span class="rm-field__label">Sign-in name</span><input id="username" class="rm-input" autocomplete="username" value="root" required aria-describedby="username-hint" /><span id="username-hint" class="rm-field__hint">Needs a root account (UID 0).</span></label>
<label class="rm-field"><span class="rm-field__label">SSH authentication</span><select id="ssh-authentication" class="rm-select"><option value="password">Password</option><option value="agent">Local SSH agent</option></select></label>
<label class="rm-field"><span class="rm-field__label">Server password</span><input id="password" class="rm-input" type="password" autocomplete="current-password" disabled required aria-describedby="password-hint" /><span id="password-hint" class="rm-field__hint">Unlocks after the identity check. Clears after you connect.</span></label>
</div>
</div>
<div class="route-aside">
<p class="rm-small rm-muted">Tested on Hostinger KVM VPS. Other Linux VPS hosts are experimental.</p>
<p id="ssh-agent-status" class="rm-small rm-muted" role="status">Checking local SSH agent configuration…</p>
<details class="rm-disclosure rm-disclosure--plain rm-disclosure--compact">
<summary>More details about SSH sign-in</summary>
<div class="rm-disclosure__body">
<p>Passwordless sudo works only on the local model page.</p>
<p>For agent sign-in, load keys into your local agent before you open Relmio. A persistent dashboard keeps its launch environment, so relaunch it after you change the agent. No key files, passphrases, or forwarded agent are sent to the server.</p>
</div>
</details>
<p id="ssh-session" class="rm-small route-session" role="status"></p>
<details class="rm-disclosure rm-disclosure--plain rm-disclosure--compact" data-host-report hidden><summary>Server check</summary><div class="rm-disclosure__body"></div></details>
</div>
</div>
</div>
<footer class="rm-panel__footer">
<a id="back-link" class="rm-button rm-button--ghost" href="/" data-wizard-route="/"><span class="rm-icon rm-icon--arrow-left rm-icon--sm" aria-hidden="true"></span>Back</a>
<button id="ssh-disconnect" class="rm-button" type="button" hidden>Disconnect from VPS</button>
<button id="connect-button" class="rm-button rm-button--primary rm-push" type="submit" disabled>Connect<span class="rm-icon rm-icon--arrow-right rm-icon--sm" aria-hidden="true"></span></button>
</footer>
</form>
</section>
<section id="selection-panel" class="rm-panel route-panel" aria-labelledby="selection-title" hidden>
<header class="rm-panel__header">
<div class="rm-panel__heading">
<span class="rm-eyebrow">Step 2 of 4</span>
<h2 id="selection-title" class="rm-h1" tabindex="-1">Choose existing n8n</h2>
<p class="rm-muted">This step only looks. It runs no commands inside n8n.</p>
</div>
</header>
<div class="rm-panel__body">
<div class="rm-form-grid">
<label class="rm-field"><span class="rm-field__label">Running n8n container</span><select id="container" class="rm-select"></select></label>
<label class="rm-field"><span class="rm-field__label">Shared private Docker network</span><select id="network" class="rm-select" aria-describedby="network-hint"></select><span id="network-hint" class="rm-field__hint">The companion joins this existing network. n8n does not change.</span></label>
</div>
<details class="rm-disclosure rm-disclosure--plain rm-disclosure--compact" data-host-report hidden><summary>Server check</summary><div class="rm-disclosure__body"></div></details>
<p id="installation-state" class="rm-callout rm-callout--neutral route-state" role="status" aria-live="polite"></p>
</div>
<footer class="rm-panel__footer">
<button id="disconnect-button" class="rm-button rm-button--ghost" type="button">Disconnect from VPS</button>
<button id="refresh-button" class="rm-button" type="button"><span class="rm-icon rm-icon--refresh rm-icon--sm" aria-hidden="true"></span>Refresh status</button>
<div class="rm-cluster rm-push" role="group" aria-label="SuperGrok companion actions">
<button class="rm-button" data-action="cancel-sign-in" type="button" hidden>Cancel sign-in</button>
<button class="rm-button rm-button--danger" data-action="remove" type="button" hidden>Remove companion</button>
<button class="rm-button rm-button--primary" data-action="install" type="button">Review installation</button>
<button id="selection-continue" class="rm-button rm-button--primary" type="button" hidden>Continue<span class="rm-icon rm-icon--arrow-right rm-icon--sm" aria-hidden="true"></span></button>
</div>
</footer>
</section>
<section id="review-panel" class="rm-panel route-panel" aria-labelledby="review-title" hidden>
<header class="rm-panel__header">
<div class="rm-panel__heading">
<span class="rm-eyebrow">Step 3 of 4</span>
<h2 id="review-title" class="rm-h1" tabindex="-1">Review the plan</h2>
<p class="rm-muted">Nothing changes on your server until you confirm.</p>
</div>
</header>
<div class="rm-panel__body">
<div class="route-columns">
<dl class="rm-dl route-review-list">
<div><dt>Server</dt><dd id="ssh-review-identity"></dd></div>
<div><dt>n8n container</dt><dd id="review-container"></dd></div>
<div><dt>Private network</dt><dd id="review-network"></dd></div>
<div><dt>Companion directory</dt><dd><code>/docker/n8n-openai-oauth/supergrok</code></dd></div>
<div><dt>Private endpoint</dt><dd><code>http://n8n-supergrok:14502/v1</code></dd></div>
<div><dt>Existing n8n</dt><dd>No changes. No restart. No published companion port.</dd></div>
</dl>
<div class="route-aside">
<p id="review-summary" class="route-summary"></p>
<label class="rm-check rm-check--boxed"><input id="confirm-action" type="checkbox" /><span>I approve this action on only the reviewed SuperGrok companion.</span></label>
</div>
</div>
</div>
<footer class="rm-panel__footer">
<button id="cancel-review" class="rm-button rm-button--ghost" type="button"><span class="rm-icon rm-icon--arrow-left rm-icon--sm" aria-hidden="true"></span>Back to inspection</button>
<button id="apply-button" class="rm-button rm-button--primary rm-push" type="button" disabled>Confirm action</button>
</footer>
</section>
<section id="settings-panel" class="rm-panel route-panel" aria-labelledby="settings-title" hidden>
<header class="rm-panel__header">
<div class="rm-panel__heading">
<span class="rm-eyebrow">Step 4 of 4</span>
<h2 id="settings-title" class="rm-h1" tabindex="-1">Sign in and connect n8n</h2>
<p class="rm-muted">Sign in with Grok, then save these values in your n8n credential.</p>
</div>
</header>
<div class="rm-panel__body">
<section id="login-panel" class="route-login" aria-labelledby="login-title" hidden>
<div class="route-login__text">
<h3 id="login-title" class="rm-visually-hidden">Official Grok sign-in</h3>
<p id="login-state" role="status" aria-live="polite">Preparing device sign-in…</p>
</div>
<div class="route-login__code">
<p id="device-code" class="route-device-code"></p>
<a id="device-link" class="rm-button rm-button--primary" target="_blank" rel="noopener noreferrer" hidden>Open official Grok sign-in<span class="rm-icon rm-icon--external rm-icon--sm" aria-hidden="true"></span><span class="rm-visually-hidden"> (opens in a new tab)</span></a>
</div>
<p class="rm-small rm-muted route-login__note">The code expires after 15 minutes. Tokens stay in the companion's private volume.</p>
</section>
<div class="route-columns route-connect">
<div class="route-main">
<div class="rm-field">
<label class="rm-field__label" for="client-key">Local bridge bearer</label>
<div class="route-secret">
<input id="client-key" class="rm-input rm-input--mono" type="password" autocomplete="off" spellcheck="false" aria-describedby="key-help" />
<button id="copy-key" class="rm-icon-button rm-icon-button--outline" type="button" aria-label="Copy local bearer" title="Copy local bearer"><span class="rm-icon rm-icon--copy" aria-hidden="true"></span></button>
</div>
<span id="key-help" class="rm-field__hint">Shown once in this browser session. Save it in your n8n credential, or enter a saved bearer to check models.</span>
</div>
<div class="rm-cluster">
<button id="models-button" class="rm-button" type="button"><span class="rm-icon rm-icon--list-checks rm-icon--sm" aria-hidden="true"></span>Check account models</button>
</div>
<p id="models-result" class="rm-small route-models" role="status" aria-live="polite"></p>
</div>
<div class="route-aside">
<div class="rm-callout rm-callout--warning">
<span class="rm-icon rm-icon--alert rm-callout__icon" aria-hidden="true"></span>
<div class="rm-callout__content">
<strong class="rm-callout__title">Use Responses API: Off</strong>
<p class="rm-callout__body">SuperGrok uses Chat Completions. Leaving it on returns <code>404 not_found</code>.</p>
</div>
</div>
<details class="rm-disclosure">
<summary>Where to change it and how to test</summary>
<div class="rm-disclosure__body">
<p>For workflow nodes, turn it off and choose From list. For Chat, turn it off in Settings, Chat, OpenAI, Edit provider. For Assistant, enter a discovered model name.</p>
<p>Keep the existing OpenAI OAuth Chat Model v1.3 recipe on when you switch back. A listed model is not proof that a workflow works.</p>
<p>Check with a test workflow. Ask for 317 × 29. The tool result and the answer should both be 9193.</p>
</div>
</details>
</div>
</div>
<dl class="rm-dl route-values">
<div><dt>Base URL</dt><dd><code>http://n8n-supergrok:14502/v1</code></dd></div>
<div><dt>API key</dt><dd>Local bridge bearer</dd></div>
<div><dt>Published port</dt><dd>None</dd></div>
</dl>
</div>
<footer class="rm-panel__footer">
<button id="settings-back" class="rm-button rm-button--ghost" type="button"><span class="rm-icon rm-icon--arrow-left rm-icon--sm" aria-hidden="true"></span>Back</button>
<div class="rm-cluster rm-push" role="group" aria-label="Grok account actions">
<button class="rm-button rm-button--danger" data-action="remove" type="button" hidden>Remove companion</button>
<button class="rm-button" data-action="sign-out" type="button" hidden>Sign out of Grok</button>
<button class="rm-button" data-action="cancel-sign-in" type="button" hidden>Cancel sign-in</button>
<button class="rm-button rm-button--primary" data-action="sign-in" type="button" hidden>Sign in with Grok</button>
</div>
</footer>
</section>
</div>
<div class="route-rail-foot">
<p id="error-message" class="rm-callout rm-callout--danger route-error" role="alert" tabindex="-1" hidden></p>
<ul class="route-safety" aria-label="Safety">
<li class="rm-status"><span class="rm-status__dot" aria-hidden="true"></span>Official Grok sign-in. No ChatGPT sign-in or xAI API key</li>
<li class="rm-status" data-tone="success"><span class="rm-status__dot" aria-hidden="true"></span>Existing n8n stays untouched</li>
<li class="rm-status" data-tone="success"><span class="rm-status__dot" aria-hidden="true"></span>No companion port is published</li>
</ul>
<p id="status-message" class="rm-callout rm-callout--neutral route-status" role="status" aria-live="polite">Checking the VPS connection…</p>
</div>
</div>
</main>
</body>
</html>