Ctrl K
ComunidadGuías…

src/ui/local.html

Rama main · réplica de lectura del repositorio original.

Archivo original ↗Preguntar a KiBot
<!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 local apps or n8n to supported OpenAI models without mixing credentials." />
    <title>Relmio | Local Endpoint Setup</title>
    <link rel="icon" href="/relmio-icon-rounded.svg" type="image/svg+xml" />
    <link rel="stylesheet" href="/relmio-ui.css" />
    <link rel="stylesheet" href="/local.css" />
    <link rel="stylesheet" href="/siwc.css" />
    <link rel="stylesheet" href="/guide.css" />
    <script src="/session-bootstrap.js"></script>
    <script src="/theme.js" type="module"></script>
    <script src="/local.js" type="module"></script>
    <script src="/guide.js" type="module"></script>
  </head>
  <body
    class="rm-app rm-app--fit local-wizard"
    data-local-view="dashboard"
    data-current-step="1"
    data-operation-busy="false"
    data-guide-page="local"
  >
    <a class="rm-skip-link" href="#main-content">Skip to main content</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="/">Setup</a></li>
            <li><a class="rm-nav__link" href="/local" data-wizard-route="/local" aria-current="page">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="/">Setup</a></li>
                  <li><a class="rm-menu__link" href="/local" data-wizard-route="/local" aria-current="page">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" aria-busy="false">
      <section id="local-dashboard" class="rm-split local-dashboard" aria-labelledby="dashboard-title">
        <aside class="rm-split__rail dashboard-rail" aria-label="Local dashboard sections and actions">
          <nav id="local-dashboard-nav" class="rm-sidebar" aria-label="Local dashboard">
            <ul class="rm-sidebar__list dashboard-nav-list">
              <li><a class="rm-sidebar__link" href="#dashboard-overview" aria-current="location"><span class="rm-icon rm-icon--home" aria-hidden="true"></span>Overview</a></li>
              <li><a class="rm-sidebar__link" href="#dashboard-connections"><span class="rm-icon rm-icon--plug" aria-hidden="true"></span>Connections</a></li>
              <li><a id="dashboard-usage-link" class="rm-sidebar__link" href="#dashboard-usage"><span class="rm-icon rm-icon--bot" aria-hidden="true"></span>Plan and usage</a></li>
              <li><a class="rm-sidebar__link" href="#dashboard-n8n"><span class="rm-icon rm-icon--network" aria-hidden="true"></span>n8n</a></li>
              <li><a class="rm-sidebar__link" href="#dashboard-credentials"><span class="rm-icon rm-icon--key" aria-hidden="true"></span>Credentials</a></li>
              <li><a class="rm-sidebar__link" href="#dashboard-activity"><span class="rm-icon rm-icon--activity" aria-hidden="true"></span>Activity</a></li>
            </ul>
          </nav>

          <div class="dashboard-rail-actions">
            <button id="dashboard-new-setup" class="rm-button rm-button--primary" type="button">
              <span class="rm-icon rm-icon--plug rm-icon--sm" aria-hidden="true"></span>Add connection
            </button>
            <button id="dashboard-refresh" class="rm-button" type="button">
              <span class="rm-icon rm-icon--refresh rm-icon--sm" aria-hidden="true"></span>Refresh status
            </button>
            <a id="dashboard-hosting-link" class="rm-link rm-link--quiet dashboard-hosting-link">Compare hosting options</a>
          </div>

          <div
            id="dashboard-error"
            class="rm-callout rm-callout--danger dashboard-error"
            role="alert"
            tabindex="-1"
            hidden
          ></div>
          <p id="dashboard-copy-status" class="rm-visually-hidden" role="status" aria-live="polite"></p>
        </aside>

        <div class="rm-split__content dashboard-workspace">
          <div class="rm-panel dashboard-panel">
            <header class="rm-panel__header">
              <div class="rm-panel__heading">
                <h1 id="dashboard-title" tabindex="-1" class="rm-h1">Local connections</h1>
                <p class="rm-muted">Check what is installed, or add a connection.</p>
              </div>
            </header>

            <div class="rm-panel__body dashboard-body">
              <noscript><p class="rm-callout rm-callout--warning">This page needs JavaScript to check Docker and show your local connections. Enable JavaScript, then reload.</p></noscript>

              <section id="dashboard-overview" class="dashboard-section rm-fade-in" aria-labelledby="dashboard-overview-title">
                <div class="dashboard-section-heading">
                  <h2 id="dashboard-overview-title" class="rm-h2">Local system</h2>
                  <p id="dashboard-last-checked" class="rm-muted rm-small">Checking now</p>
                </div>

                <div
                  id="dashboard-environment"
                  class="dashboard-environment state-checking"
                  role="status"
                  aria-live="polite"
                  aria-atomic="true"
                >
                  <span class="rm-status__dot dashboard-status-dot state-checking" aria-hidden="true"></span>
                  <div>
                    <strong id="dashboard-environment-title">Checking Docker</strong>
                    <p id="dashboard-environment-detail">Reading a non-secret inventory from this computer.</p>
                  </div>
                  <span id="dashboard-environment-state" class="rm-badge dashboard-state-token state-checking">Checking</span>
                </div>

                <dl class="dashboard-summary" aria-label="Local dashboard truth summary">
                  <div>
                    <dt><a id="dashboard-installed" class="rm-link rm-link--standalone" href="#dashboard-connections">Checking</a></dt>
                    <dd id="dashboard-installed-names">Connections</dd>
                  </div>
                  <div>
                    <dt id="dashboard-runtime-health">Checking</dt>
                    <dd>Runtime health</dd>
                  </div>
                  <div>
                    <dt id="dashboard-inventory-freshness">Checking</dt>
                    <dd>Inventory freshness</dd>
                  </div>
                </dl>

                <div id="dashboard-empty" class="rm-callout rm-callout--neutral dashboard-empty" data-guide-keep hidden>
                  <span class="rm-icon rm-icon--box rm-callout__icon" aria-hidden="true"></span>
                  <div class="rm-callout__content">
                    <strong class="rm-callout__title">Nothing is set up yet</strong>
                    <p class="rm-callout__body">Choose a connection to install.</p>
                  </div>
                  <button id="dashboard-empty-setup" class="rm-button rm-button--sm" type="button">Choose a connection</button>
                </div>
              </section>

              <section id="dashboard-connections" class="dashboard-section rm-fade-in" aria-labelledby="dashboard-connections-title" hidden>
                <div class="dashboard-section-heading">
                  <h2 id="dashboard-connections-title" class="rm-h2">Local services</h2>
                  <p class="rm-muted rm-small">Verified actions only.</p>
                </div>

                <div class="dashboard-resource-grid">
                  <ul
                    id="dashboard-services"
                    class="dashboard-service-list"
                    aria-live="polite"
                    aria-busy="true"
                    aria-label="Local services"
                  >
                    <li class="dashboard-service-row dashboard-service-placeholder" aria-hidden="true">
                      <span></span><span></span>
                    </li>
                    <li class="dashboard-service-row dashboard-service-placeholder" aria-hidden="true">
                      <span></span><span></span>
                    </li>
                    <li class="dashboard-service-row dashboard-service-placeholder" aria-hidden="true">
                      <span></span><span></span>
                    </li>
                  </ul>

                  <section
                    id="dashboard-service-detail"
                    class="rm-card rm-card--flat dashboard-service-detail"
                    aria-labelledby="dashboard-service-detail-title"
                    tabindex="-1"
                    data-guide-keep
                  >
                    <p class="rm-eyebrow">Selected connection</p>
                    <h3 id="dashboard-service-detail-title" class="rm-h3">Choose a service</h3>
                    <p id="dashboard-service-detail-copy" class="rm-muted rm-small">Choose a row to check it.</p>
                    <dl id="dashboard-service-facts" class="rm-dl dashboard-service-facts"></dl>
                    <ol id="dashboard-relay" class="dashboard-relay" aria-label="Selected service relay path">
                      <li><span class="rm-status__dot dashboard-status-dot state-checking" aria-hidden="true"></span><span>Local app</span><small>Checking</small></li>
                      <li><span class="rm-status__dot dashboard-status-dot state-checking" aria-hidden="true"></span><span>Relmio runtime</span><small>Checking</small></li>
                      <li><span class="rm-status__dot dashboard-status-dot state-checking" aria-hidden="true"></span><span>Provider / integration</span><small>Checking</small></li>
                    </ol>
                    <div id="dashboard-service-actions" class="rm-cluster dashboard-service-actions"></div>
                  </section>
                </div>
              </section>

              <section id="dashboard-n8n" class="dashboard-section rm-fade-in" aria-labelledby="dashboard-n8n-title" hidden>
                <div class="dashboard-section-heading">
                  <h2 id="dashboard-n8n-title" class="rm-h2">n8n services</h2>
                  <p class="rm-muted rm-small">Existing n8n stays unchanged.</p>
                </div>
                <ul id="dashboard-n8n-services" class="dashboard-compact-list" aria-label="n8n services"></ul>
              </section>

              <section id="dashboard-credentials" class="dashboard-section rm-fade-in" aria-labelledby="dashboard-credentials-title" hidden>
                <div class="dashboard-section-heading">
                  <h2 id="dashboard-credentials-title" class="rm-h2">Credential handling</h2>
                </div>
                <div class="rm-callout rm-callout--neutral">
                  <span class="rm-icon rm-icon--lock rm-callout__icon" aria-hidden="true"></span>
                  <div class="rm-callout__content">
                    <strong class="rm-callout__title">Saved keys stay hidden</strong>
                    <p class="rm-callout__body">Relmio never shows stored sign-in tokens or saved keys again. A new local key is shown once, when you create or rotate it. A local key is separate from provider sign-in and is not a Platform API key.</p>
                  </div>
                </div>
                <ul id="dashboard-credential-list" class="dashboard-compact-list" aria-label="Credential status"></ul>
              </section>

              <section id="dashboard-activity" class="dashboard-section rm-fade-in" aria-labelledby="dashboard-activity-title" hidden>
                <div class="dashboard-section-heading">
                  <h2 id="dashboard-activity-title" class="rm-h2">Latest inventory check</h2>
                </div>
                <ol id="dashboard-activity-list" class="dashboard-activity-list" aria-live="polite">
                  <li><span class="rm-status__dot dashboard-status-dot state-checking" aria-hidden="true"></span><span>Checking local services</span></li>
                </ol>
              </section>

              <section id="dashboard-usage" class="dashboard-section rm-fade-in" aria-labelledby="dashboard-usage-title" hidden>
                <div class="dashboard-section-heading">
                  <h2 id="dashboard-usage-title" class="rm-h2">Plan and usage</h2>
                  <button id="dashboard-usage-refresh" class="rm-button rm-button--sm" type="button" hidden><span class="rm-icon rm-icon--refresh rm-icon--sm" aria-hidden="true"></span>Refresh usage</button>
                </div>
                <div class="rm-card rm-card--flat usage-panel">
                  <p id="dashboard-usage-status" class="rm-small" role="status" aria-live="polite">Checking the ChatGPT plan sidecar.</p>
                  <div id="dashboard-usage-view" class="usage-panel__view"></div>
                </div>
              </section>
            </div>
          </div>
        </div>
      </section>

      <section id="local-setup" class="rm-split setup-shell" aria-label="New local connection setup" hidden>
        <aside class="rm-split__rail setup-rail" aria-label="Local setup">
          <div class="setup-intro">
            <button id="setup-back-to-dashboard" class="rm-button rm-button--ghost rm-button--sm setup-dashboard-return" type="button">
              <span class="rm-icon rm-icon--arrow-left rm-icon--sm" aria-hidden="true"></span>Back to dashboard
            </button>
            <h1 id="page-title" class="rm-h2">Add a local connection</h1>
          </div>

          <nav id="setup-progress" class="setup-progress" aria-label="Local setup progress">
            <ol class="rm-stepper rm-stepper--track">
              <li class="rm-stepper__item" data-step-marker="1" aria-current="step">
                <span class="rm-stepper__link"><span class="rm-stepper__marker">1</span><span class="rm-stepper__label">Choose</span></span>
              </li>
              <li class="rm-stepper__item" data-step-marker="2">
                <span class="rm-stepper__link"><span class="rm-stepper__marker">2</span><span class="rm-stepper__label">Review</span></span>
              </li>
              <li class="rm-stepper__item" data-step-marker="3">
                <span class="rm-stepper__link"><span class="rm-stepper__marker">3</span><span class="rm-stepper__label">Install</span></span>
              </li>
              <li class="rm-stepper__item" data-step-marker="4">
                <span class="rm-stepper__link"><span class="rm-stepper__marker">4</span><span class="rm-stepper__label">Ready</span></span>
              </li>
            </ol>
          </nav>
        </aside>

        <div
          id="operation-progress"
          class="operation-progress"
          role="status"
          aria-live="polite"
          aria-atomic="false"
          hidden
        >
          <section
            id="install-progress"
            class="rm-card rm-card--compact install-progress rm-fade-in"
            aria-labelledby="install-progress-title"
            tabindex="-1"
            hidden
          >
            <div class="install-progress-heading">
              <div>
                <h2 id="install-progress-title" class="rm-h3">Operation in progress</h2>
                <p
                  id="install-progress-phase"
                  class="rm-muted rm-small install-progress-phase operation-progress__label"
                >No operation is running.</p>
              </div>
              <p class="install-progress-elapsed" aria-hidden="true">
                <span>Elapsed</span>
                <time id="install-elapsed" class="operation-progress__elapsed" datetime="PT0S">00:00</time>
              </p>
            </div>
            <div
              id="install-progress-bar"
              class="rm-progress rm-progress--indeterminate install-progress-track operation-progress__track"
              role="progressbar"
              aria-labelledby="install-progress-title"
              aria-describedby="install-progress-phase install-progress-duration-note"
              aria-valuetext="No operation is running."
            >
              <span
                class="rm-progress__bar install-progress-indicator operation-progress__bar"
                aria-hidden="true"
              ></span>
            </div>
            <p id="install-progress-duration-note" class="rm-field__hint install-progress-note">
              Duration varies by operation. First Docker downloads can take several minutes. Keep this page open until it finishes.
            </p>
          </section>
        </div>

        <div class="rm-split__content setup-workspace">
          <section class="rm-panel setup-panel" data-step="1" aria-labelledby="choose-title">
            <header class="rm-panel__header">
              <div class="rm-panel__heading">
                <p id="choose-step-caption" class="rm-eyebrow">Step 1 of 4 · Choose</p>
                <h2 id="choose-title" class="rm-h1" tabindex="-1">Choose what to set up</h2>
              </div>
            </header>

            <form id="target-form" class="setup-form">
              <div class="rm-panel__body">
                <div id="choose-stage" class="choose-stage rm-fade-in">
                  <fieldset class="rm-fieldset target-picker">
                    <legend class="rm-visually-hidden">Choose a connection</legend>

                    <div class="rm-grid main-connection-choices">
                      <label class="rm-choice target-card">
                        <input class="rm-choice__input" type="radio" name="target" value="n8n-openai-oauth" />
                        <span class="rm-choice__icon" aria-hidden="true"><span class="rm-icon rm-icon--message rm-icon--lg"></span></span>
                        <span class="rm-choice__title">n8n with ChatGPT sign-in <span class="rm-badge rm-badge--accent">Experimental</span></span>
                        <span class="rm-choice__text">For n8n on this computer, using your ChatGPT plan.</span>
                        <span class="rm-choice__meta">You need n8n in Docker here and a ChatGPT plan.</span>
                      </label>

                      <label class="rm-choice target-card">
                        <input class="rm-choice__input" type="radio" name="target" value="n8n-supergrok-oauth" />
                        <span class="rm-choice__icon" aria-hidden="true"><span class="rm-icon rm-icon--network rm-icon--lg"></span></span>
                        <span class="rm-choice__title">Grok for n8n <span class="rm-badge rm-badge--accent">Experimental</span></span>
                        <span class="rm-choice__text">For n8n on this computer, using your SuperGrok sign-in.</span>
                        <span class="rm-choice__meta">You need n8n in Docker here and a SuperGrok subscription.</span>
                      </label>

                      <label class="rm-choice target-card">
                        <input class="rm-choice__input" type="radio" name="target" value="n8n-claude-oauth" />
                        <span class="rm-choice__icon" aria-hidden="true"><span class="rm-icon rm-icon--message rm-icon--lg"></span></span>
                        <span class="rm-choice__title">Claude for n8n <span class="rm-badge">Official sign-in</span> <span class="rm-badge rm-badge--accent">Experimental</span></span>
                        <span class="rm-choice__text">For your own text-only workflows, using your Claude plan.</span>
                        <span class="rm-choice__meta">You need n8n in Docker. Sign in yourself in your terminal.</span>
                        <span id="claude-platform-note" class="rm-choice__text" hidden><strong>Not available on Windows.</strong> Claude on this computer needs macOS or Linux.</span>
                      </label>

                      <label class="rm-choice target-card">
                        <input class="rm-choice__input" type="radio" name="target" value="n8n-local-model" />
                        <span class="rm-choice__icon" aria-hidden="true"><span class="rm-icon rm-icon--bot rm-icon--lg"></span></span>
                        <span class="rm-choice__title">Local model for n8n <span class="rm-badge">No host port</span></span>
                        <span class="rm-choice__text">For a private model with no account. Other containers on its network can use it without a password.</span>
                        <span class="rm-choice__meta">You need n8n in Docker here and enough memory and disk.</span>
                      </label>

                      <label class="rm-choice target-card">
                        <input class="rm-choice__input" type="radio" name="target" value="local-n8n-stack" />
                        <span class="rm-choice__icon" aria-hidden="true"><span class="rm-icon rm-icon--box rm-icon--lg"></span></span>
                        <span class="rm-choice__title">Set up new n8n</span>
                        <span class="rm-choice__text">For people with no n8n yet. Private to this computer by default. Existing n8n is not changed.</span>
                        <span class="rm-choice__meta">You need Docker. A public ngrok link is optional.</span>
                      </label>

                      <label class="rm-choice target-card">
                        <input class="rm-choice__input" type="radio" name="target" value="xai-grok-build" checked />
                        <span class="rm-choice__icon" aria-hidden="true"><span class="rm-icon rm-icon--laptop rm-icon--lg"></span></span>
                        <span class="rm-choice__title">Grok on this computer <span class="rm-badge rm-badge--accent">Experimental</span></span>
                        <span class="rm-choice__text">For a trusted app on this computer, using your SuperGrok sign-in.</span>
                        <span class="rm-choice__meta">You need Docker and a SuperGrok subscription.</span>
                      </label>
                    </div>

                    <details id="more-connections-and-tools" class="rm-disclosure more-connections">
                      <summary>More connections and tools</summary>
                      <div class="rm-disclosure__body">
                        <div class="rm-grid advanced-connection-choices">
                          <label class="rm-choice target-card">
                            <input class="rm-choice__input" type="radio" name="target" value="codex-chatgpt" />
                            <span class="rm-choice__title">Codex App Server <span class="rm-badge rm-badge--accent">Experimental</span></span>
                            <span class="rm-choice__text">For a trusted native app. Browsers cannot connect.</span>
                            <span class="rm-choice__meta">You need Docker and a ChatGPT plan.</span>
                          </label>

                          <label class="rm-choice target-card">
                            <input class="rm-choice__input" type="radio" name="target" value="codex-chat" />
                            <span class="rm-choice__title">Codex Chat Adapter <span class="rm-badge rm-badge--accent">Experimental</span></span>
                            <span class="rm-choice__text">For a trusted local backend. Not OpenAI /v1.</span>
                            <span class="rm-choice__meta">You need Docker and a ChatGPT plan.</span>
                          </label>

                          <label class="rm-choice target-card">
                            <input class="rm-choice__input" type="radio" name="target" value="n8n-ai-assistant" />
                            <span class="rm-choice__title">n8n AI Assistant tools <span class="rm-badge rm-badge--warning">Privileged sandbox · testing only</span></span>
                            <span class="rm-choice__text">Add private tools beside n8n. The runner is host-root equivalent.</span>
                            <span class="rm-choice__meta">You need n8n in Docker here and a model credential in n8n.</span>
                          </label>
                        </div>
                      </div>
                    </details>
                  </fieldset>

                  <div class="choose-help">
                    <details class="rm-disclosure rm-disclosure--plain setup-help">
                      <summary>Set up on a server instead</summary>
                      <div class="rm-disclosure__body">
                        <nav class="local-route-context" aria-label="Server setup choices">
                          <a id="local-route-vps-openai" class="rm-link rm-link--standalone local-route-context__link">OpenAI OAuth on a server (VPS)</a>
                          <a id="local-route-vps-supergrok" class="rm-link rm-link--standalone local-route-context__link">SuperGrok on a server (VPS)</a>
                          <a id="local-route-vps-model" class="rm-link rm-link--standalone local-route-context__link">Local model on a server (VPS)</a>
                        </nav>
                      </div>
                    </details>

                    <details class="rm-disclosure rm-disclosure--plain setup-help system-requirements">
                      <summary>Computer requirements</summary>
                      <div class="rm-disclosure__body">
                        <p><strong>Windows, macOS, Linux, or WSL2.</strong> Windows uses Docker Desktop's <code>desktop-linux</code> engine and an owner-only NTFS ACL for Relmio credentials. macOS, Linux, and WSL2 use owner-only file permissions.</p>
                      </div>
                    </details>

                    <details class="rm-disclosure rm-disclosure--plain setup-help connection-details">
                      <summary>Connection details and limits</summary>
                      <div class="rm-disclosure__body">
                        <p><strong>n8n with ChatGPT sign-in</strong> uses a local SIWC preview registration, separate from personal Codex credentials and Platform API billing. Verified identity alone cannot use the plan. You approve plan permission in ChatGPT and background n8n use separately. Relmio transfers one selected registration to an owned sidecar on the reviewed Docker network. For Relmio-created n8n, installation tries to save the local Relmio key and private base URL in n8n's credential store. OpenAI tokens stay in the sidecar. Other n8n installations require manual entry. Use this credential only for your own approved workflows in this n8n. Models come from that account's catalog, but a list does not prove a request will finish. Image generation needs a separate, optional Codex sign-in that OpenAI doesn't document for other apps. This integration does not support audio, video, Files upload, or stored conversations. Old bridges need an explicit reviewed migration with a fresh sign-in.</p>
                        <p><strong>Grok for n8n</strong> uses official SuperGrok sign-in only. It adds a private Chat Completions companion. No provider token or API key is entered here.</p>
                        <p><strong>Codex App Server</strong> is an experimental JSON-RPC WebSocket for a trusted native app. It is not OpenAI <code>/v1</code>. Browsers cannot connect directly.</p>
                        <p><strong>Codex Chat Adapter</strong> is an experimental <code>POST /chat</code> endpoint for a trusted local backend. It is not <code>/v1</code>. Do not put it in browser code.</p>
                        <p><strong>n8n AI Assistant tools</strong> add a private Code Sandbox and optional SearXNG search. The sandbox runner is privileged and host-root equivalent. For production, use Daytona. Relmio does not edit or restart n8n.</p>
                        <p><strong>Local model for n8n</strong> publishes no host port. Other containers on its network can use the model API without a password. Relmio checks free memory and disk before download. CPU answers can be slow. There is no cloud fallback.</p>
                        <p><strong>Set up new n8n</strong> creates a separate private stack. An optional public ngrok link requires Basic Auth. Existing n8n is not changed.</p>
                        <p><strong>Grok on this computer</strong> is experimental. Official SuperGrok sign-in stays in its runtime. Clients use a separate Relmio key, not a Platform API key.</p>
                      </div>
                    </details>
                  </div>
                </div>

                <div id="configure-stage" class="configure-stage rm-fade-in" hidden>
                  <section id="local-siwc" class="rm-card rm-card--muted rm-card--compact siwc-controls" aria-labelledby="local-siwc-title" hidden>
                    <div class="siwc-account">
                      <label class="rm-field" for="local-siwc-account"><span id="local-siwc-title" class="rm-field__label">ChatGPT account</span>
                        <select id="local-siwc-account" class="rm-select" data-siwc="account"></select>
                      </label>
                      <div data-siwc="pending-row" class="siwc-pending" hidden>
                        <label class="rm-field" for="local-siwc-pending"><span class="rm-field__label">Unfinished sign-in</span>
                          <select id="local-siwc-pending" class="rm-select" data-siwc="pending"></select>
                        </label>
                        <button type="button" class="rm-button rm-button--sm" data-siwc="finish">Finish sign-in</button>
                      </div>
                      <ul data-siwc="transferred" class="rm-small rm-muted" aria-label="Accounts managed at other installations" hidden></ul>
                    </div>
                    <div class="rm-cluster siwc-actions">
                      <button type="button" class="rm-button" data-siwc="welcome-open" hidden>Review plan notice</button>
                      <button type="button" class="rm-button rm-button--primary" data-siwc="new">Continue with ChatGPT</button>
                      <button type="button" class="rm-button rm-button--sm" data-siwc="return" hidden>Sign in again</button>
                      <button type="button" class="rm-button rm-button--sm" data-siwc="grant" hidden>Allow ChatGPT plan use</button>
                      <button type="button" class="rm-button rm-button--sm" data-siwc="resume" hidden>Use ChatGPT plan</button>
                      <button type="button" class="rm-button rm-button--sm" data-siwc="pause" hidden>Pause plan use</button>
                      <button type="button" class="rm-button rm-button--sm" data-siwc="logout" hidden>Sign out of ChatGPT</button>
                      <a data-siwc="usage" class="rm-link rm-link--standalone" target="_blank" rel="noopener noreferrer" hidden>Manage usage<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>
                    <div data-siwc="state" class="siwc-state" role="status" aria-live="polite" tabindex="-1">
                      <p data-siwc="plan-badge" class="rm-status" data-tone="success" hidden><span class="rm-status__dot" aria-hidden="true"></span>Using ChatGPT plan</p>
                      <p data-siwc="status" class="rm-small"></p>
                      <p data-siwc="owner" class="rm-small rm-muted"></p>
                    </div>
                    <div id="n8n-sidecar-oauth" class="sidecar-status-row" role="group" aria-label="Local ChatGPT sign-in" hidden>
                      <p id="n8n-oauth-status" class="rm-small rm-muted" role="status" aria-live="polite">Checking local ChatGPT sign-in…</p>
                      <button id="n8n-oauth-sign-in" class="rm-button rm-button--sm" type="button" hidden>Sign in to ChatGPT</button>
                      <button id="n8n-oauth-refresh" class="rm-button rm-button--ghost rm-button--sm" type="button">Refresh status</button>
                    </div>
                    <button id="n8n-oauth-link" class="rm-button rm-button--sm" data-operation-allow="auth" type="button" hidden>Stop ChatGPT sign-in</button>
                    <dialog data-siwc="welcome" class="siwc-dialog" aria-labelledby="local-siwc-welcome-title">
                      <h3 id="local-siwc-welcome-title" class="rm-h3">You're using your ChatGPT plan</h3>
                      <p>Eligible text requests in Relmio use this account's ChatGPT plan. You can pause plan use in Relmio at any time. OpenAI applies your account limits. If you allowed apps to use credits in ChatGPT, credits can be used after the plan limit. n8n background workflows need a separate approval before installation.</p>
                      <p><a href="https://chatgpt.com/settings/usage" target="_blank" rel="noopener noreferrer">Manage usage (opens in a new tab)</a></p>
                      <button type="button" class="rm-button rm-button--primary" data-siwc="welcome-accept">Got it</button>
                    </dialog>
                  </section>
                  <div id="local-siwc-recovery"></div>
                  <div class="configure-columns">
                    <div class="route-summary">
                      <span class="rm-icon rm-icon--plug" aria-hidden="true"></span>
                      <span class="route-summary__text"><span class="rm-small rm-muted">Connection</span><strong id="local-route-current-label">Choose a local connection</strong></span>
                      <button id="local-route-current" class="rm-button rm-button--sm" type="button">Change<span class="rm-visually-hidden"> connection</span></button>
                    </div>

                    <aside id="target-guidance" class="rm-callout rm-callout--neutral target-guidance" aria-live="polite">
                      <span class="rm-icon rm-icon--info rm-callout__icon" aria-hidden="true"></span>
                      <div class="rm-callout__content">
                        <strong id="target-guidance-title" class="rm-callout__title">Uses official sign-in</strong>
                        <p id="target-guidance-detail" class="rm-callout__body">Provider sign-in stays in its own runtime. A local key is separate and is not a Platform API key.</p>
                      </div>
                    </aside>

                    <div id="endpoint-fields" class="rm-form-grid local-fields">
                      <label class="rm-field" for="local-port">
                        <span class="rm-field__label">Port for this local connection</span>
                        <input
                          id="local-port"
                          class="rm-input"
                          name="port"
                          type="number"
                          min="1024"
                          max="65535"
                          value="12435"
                          aria-describedby="local-port-help"
                          required
                        />
                        <small id="local-port-help" class="rm-field__hint">Technical name: local port. Published only on <code>127.0.0.1</code>.</small>
                      </label>
                    </div>

                    <section
                      id="n8n-sidecar-fields"
                      class="n8n-sidecar-fields"
                      aria-labelledby="n8n-sidecar-fields-title"
                      hidden
                    >
                      <div class="config-block section-heading">
                        <h3 id="n8n-sidecar-fields-title" class="rm-h3">Choose your n8n</h3>
                        <p class="rm-muted rm-small">Check only. Relmio will not change this n8n container or its network.</p>
                      </div>

                      <label id="n8n-container-field" class="config-block rm-field" for="n8n-container">
                        <span class="rm-field__label">n8n container</span>
                        <select
                          id="n8n-container"
                          class="rm-select"
                          name="n8nContainerId"
                          aria-describedby="n8n-container-help"
                          disabled
                        ></select>
                        <small id="n8n-container-help" class="rm-field__hint">Technical name: Docker container. Only running n8n containers are listed.</small>
                      </label>

                      <label id="n8n-network-field" class="config-block rm-field" for="n8n-network">
                        <span class="rm-field__label">Private Docker network</span>
                        <select
                          id="n8n-network"
                          class="rm-select"
                          name="dockerNetworkId"
                          aria-describedby="n8n-network-help"
                          disabled
                        ></select>
                        <small id="n8n-network-help" class="rm-field__hint">Technical name: Docker network. The companion joins it. n8n is not changed.</small>
                      </label>
                      <button id="n8n-change-choice" class="rm-button rm-button--sm config-block" type="button" hidden>Change n8n or network</button>

                      <div class="config-block sidecar-status-row">
                        <p id="n8n-discovery-status" class="rm-small rm-muted" role="status" aria-live="polite">Choose this option to check running n8n.</p>
                        <button id="n8n-discovery-refresh" class="rm-button rm-button--sm" type="button">
                          <span class="rm-icon rm-icon--refresh rm-icon--sm" aria-hidden="true"></span>Refresh n8n discovery
                        </button>
                      </div>

                      <label id="local-model-selector" class="config-block rm-field" for="local-model-id" hidden>
                        <span class="rm-field__label">Local model to download</span>
                        <select id="local-model-id" class="rm-select" aria-describedby="local-model-id-help">
                          <option value="qwen3:0.6b">Qwen3 0.6B · 0.523 GB model layers</option>
                          <option value="qwen3:1.7b">Qwen3 1.7B · 1.359 GB model layers</option>
                          <option value="qwen3.5:2b">Qwen3.5 2B · 2.741 GB model layers</option>
                          <option value="qwen3.5:4b">Qwen3.5 4B · 3.390 GB model layers</option>
                          <option value="qwen3.5:9b">Qwen3.5 9B · 6.594 GB model layers</option>
                        </select>
                        <small id="local-model-id-help" class="rm-field__hint">Only these models. Review shows memory, CPU, and download size before install.</small>
                      </label>

                      <details
                        id="detected-local-integration-management"
                        class="config-block rm-disclosure detected-integration-management"
                        aria-labelledby="detected-local-integration-management-title"
                        hidden
                      >
                        <summary><span id="detected-local-integration-management-title">A running n8n was found</span></summary>
                        <div class="rm-disclosure__body">
                          <p>Finding n8n does not mean Relmio installed a companion. Set one up, or check a companion Relmio already owns. n8n is not edited or restarted here.</p>
                          <div class="rm-cluster detected-integration-actions">
                            <button id="manage-local-sidecar" class="rm-button rm-button--sm" type="button">
                              Set up or check owned bridge
                            </button>
                            <button id="manage-local-assistant" class="rm-button rm-button--sm" type="button">
                              Set up or check owned Assistant tools
                            </button>
                            <button id="refresh-local-n8n-chatgpt" class="rm-button rm-button--ghost rm-button--sm" type="button">
                              Set up another ChatGPT account
                            </button>
                          </div>
                        </div>
                      </details>

                      <p id="n8n-sidecar-scope" class="config-block scope-note sidecar-scope-note">
                        <span class="rm-icon rm-icon--info rm-icon--sm" aria-hidden="true"></span>
                        <span><strong>ChatGPT plan sidecar.</strong> Use a fresh Relmio sign-in for another installation. A legacy bridge needs a separate reviewed migration; n8n remains yours to configure.</span>
                      </p>

                      <div
                        id="n8n-assistant-options"
                        class="assistant-companion-options"
                        hidden
                      >
                        <aside class="config-block rm-callout rm-callout--warning high-trust-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">Privileged sandbox runner</strong>
                            <p class="rm-callout__body">Code Sandbox uses a privileged Docker-in-Docker runner. It is host-root equivalent on this computer. Use it for local testing. For production, use Daytona.</p>
                          </div>
                        </aside>

                        <label class="config-block rm-check rm-check--boxed check-row assistant-search-choice">
                          <input id="include-local-searxng" type="checkbox" />
                          <span>
                            <strong>Optional SearXNG search</strong>
                            <small class="rm-check__hint">Off by default. Turn on only if Assistant needs private web search.</small>
                          </span>
                        </label>

                        <aside class="config-block rm-callout rm-callout--neutral">
                          <span class="rm-icon rm-icon--info rm-callout__icon" aria-hidden="true"></span>
                          <div class="rm-callout__content">
                            <strong class="rm-callout__title">You update n8n</strong>
                            <p class="rm-callout__body">Relmio installs the companion only. Copy the returned settings into n8n yourself. Any restart is yours.</p>
                          </div>
                        </aside>

                        <details
                          id="n8n-assistant-searxng-edit"
                          class="config-block rm-disclosure managed-companion-edit"
                          aria-labelledby="n8n-assistant-searxng-edit-title"
                        >
                          <summary><span id="n8n-assistant-searxng-edit-title">Enable search on existing Assistant tools</span></summary>
                          <div class="rm-disclosure__body">
                            <p>For a Relmio Assistant install that has no SearXNG yet. Review first. It starts only that search service, does not show or rotate the sandbox key, and does not change n8n.</p>
                            <div class="managed-companion-edit-actions">
                              <button id="review-assistant-searxng-edit" class="rm-button rm-button--sm" type="button">
                                Review SearXNG enablement
                              </button>
                              <p id="assistant-searxng-edit-status" class="rm-small" role="status" aria-live="polite">
                                This is available only for a Relmio-owned Assistant installation without SearXNG.
                              </p>
                            </div>
                            <div id="assistant-searxng-edit-review" class="managed-companion-edit-review" hidden>
                              <dl class="rm-dl">
                                <div><dt>Sandbox URL</dt><dd id="assistant-searxng-edit-sandbox"></dd></div>
                                <div><dt>SearXNG URL</dt><dd id="assistant-searxng-edit-search"></dd></div>
                                <div><dt>Host publication</dt><dd>None</dd></div>
                              </dl>
                              <label class="rm-check check-row">
                                <input id="enable-assistant-searxng-confirm" type="checkbox" />
                                <span>I reviewed this SearXNG-only update. Relmio may change only its owned Assistant companion. It will not change n8n or rotate the sandbox key.</span>
                              </label>
                              <div class="managed-companion-edit-actions">
                                <button id="enable-assistant-searxng-button" class="rm-button" type="button" disabled>
                                  Enable SearXNG on owned Assistant tools
                                </button>
                                <p id="assistant-searxng-edit-result" class="rm-small" role="status" aria-live="polite"></p>
                              </div>
                              <p id="assistant-searxng-edit-settings" class="rm-small managed-companion-setting" hidden></p>
                            </div>
                          </div>
                        </details>
                      </div>
                    </section>

                    <section id="n8n-stack-fields" class="n8n-stack-fields" hidden aria-labelledby="n8n-stack-fields-title">
                      <div class="config-block section-heading">
                        <h3 id="n8n-stack-fields-title" class="rm-h3">New n8n on this computer</h3>
                        <p class="rm-muted rm-small">Review checks Docker only. It creates nothing and does not open ngrok.</p>
                      </div>
                      <label class="config-block rm-check" for="n8n-stack-public-access">
                        <input id="n8n-stack-public-access" type="checkbox" aria-controls="ngrok-checklist ngrok-hostname-field" />
                        <span>Public URL with ngrok (optional)<small class="rm-check__hint">New n8n is private to this computer by default. Turn on ngrok only when you need a public URL. Basic Auth protects that URL but does not make it private.</small></span>
                      </label>
                      <details id="ngrok-checklist" class="config-block rm-disclosure ngrok-checklist" hidden>
                        <summary>Check ngrok before install</summary>
                        <div class="rm-disclosure__body">
                          <ol>
                            <li>Create or choose a static domain in the <a href="https://dashboard.ngrok.com/domains" target="_blank" rel="noopener noreferrer">ngrok dashboard<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>
                            <li>Copy one active agent token from <a href="https://dashboard.ngrok.com/get-started/your-authtoken" target="_blank" rel="noopener noreferrer">Your Authtoken<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>. "Your Authtoken" is the quick-copy page. "Authtokens" lists the same token type. The token must be allowed to use your reserved domain.</li>
                            <li>Choose a Basic Auth username and password for people opening the public n8n link.</li>
                          </ol>
                          <p>After install, open the public link in a private window. It must stay blocked until you enter that Basic Auth pair.</p>
                        </div>
                      </details>
                      <div class="config-block rm-form-grid stack-fields">
                        <label id="ngrok-hostname-field" class="rm-field stack-field-wide" for="ngrok-hostname" hidden>
                          <span class="rm-field__label">Reserved ngrok hostname</span>
                          <input id="ngrok-hostname" class="rm-input" type="text" inputmode="url" autocomplete="off" autocapitalize="none" spellcheck="false" placeholder="workflow.example.ngrok.app" aria-describedby="ngrok-hostname-help" required />
                          <small id="ngrok-hostname-help" class="rm-field__hint">Hostname only. Do not include a scheme, path, or port.</small>
                        </label>
                        <label class="rm-field" for="n8n-stack-port">
                          <span class="rm-field__label">Loopback n8n port</span>
                          <input id="n8n-stack-port" class="rm-input" type="number" min="1024" max="65535" value="5679" aria-describedby="n8n-stack-port-help" required />
                          <small id="n8n-stack-port-help" class="rm-field__hint">Bound only to <code>127.0.0.1</code>; avoids n8n’s usual 5678.</small>
                        </label>
                        <label class="rm-field" for="n8n-stack-timezone">
                          <span class="rm-field__label">Canonical timezone</span>
                          <input id="n8n-stack-timezone" class="rm-input" type="text" autocomplete="off" value="Asia/Manila" required />
                        </label>
                        <label class="rm-field" for="n8n-stack-assistant-mode">
                          <span class="rm-field__label">Assistant mode</span>
                          <select id="n8n-stack-assistant-mode" class="rm-select" aria-describedby="n8n-stack-assistant-mode-help">
                            <option value="disabled">Disabled</option>
                            <option value="sandbox">Code Sandbox</option>
                            <option value="sandbox-with-searxng">Code Sandbox + SearXNG</option>
                          </select>
                          <small id="n8n-stack-assistant-mode-help" class="rm-field__hint">Code Sandbox uses a privileged, host-root-equivalent runner.</small>
                        </label>
                      </div>
                    </section>

                    <section id="claude-n8n-options" class="rm-card rm-card--compact" hidden aria-labelledby="claude-models-label">
                      <label class="rm-field" for="claude-models">
                        <span id="claude-models-label" class="rm-field__label">Claude model IDs</span>
                        <input id="claude-models" class="rm-input rm-input--mono" value="claude-haiku-5-5, claude-sonnet-5-5, claude-opus-5-5" maxlength="1032" aria-describedby="claude-models-help" />
                        <small id="claude-models-help" class="rm-field__hint">1 to 8 exact IDs, separated by commas. No Fable. Docker only; for native n8n, use the <a class="rm-link" href="https://relmio.jpfusin.tech/docs/claude-subscription" target="_blank" rel="noopener noreferrer">Claude CLI guide<span class="rm-visually-hidden"> (opens in a new tab)</span></a>.</small>
                      </label>
                    </section>

                    <aside id="supergrok-n8n-reminder" class="rm-callout supergrok-n8n-reminder" hidden aria-live="polite">
                      <span class="rm-icon rm-icon--terminal rm-callout__icon" aria-hidden="true"></span>
                      <div class="rm-callout__content">
                        <strong class="rm-callout__title">Two steps</strong>
                        <p class="rm-callout__body">Install, then run <code>relmio grok login --n8n</code> in a terminal. In n8n, turn <strong>Use Responses API off</strong>. The ChatGPT bridge uses it on, so check the switch if you change providers.</p>
                      </div>
                    </aside>
                  </div>
                </div>
              </div>

              <footer class="rm-panel__footer">
                <a id="back-to-vps" class="rm-button rm-button--ghost">
                  <span class="rm-icon rm-icon--arrow-left rm-icon--sm" aria-hidden="true"></span>Back to server setup
                </a>
                <button id="configure-back" class="rm-button rm-button--ghost" type="button" hidden>
                  <span class="rm-icon rm-icon--arrow-left rm-icon--sm" aria-hidden="true"></span>Back
                </button>
                <button id="choose-continue" class="rm-button rm-button--primary rm-push" type="button">
                  Continue<span class="rm-icon rm-icon--arrow-right rm-icon--sm" aria-hidden="true"></span>
                </button>
                <button id="review-button" class="rm-button rm-button--primary rm-push" type="submit" disabled hidden>
                  Review the plan
                </button>
              </footer>
            </form>
          </section>

          <section class="rm-panel setup-panel" data-step="2" aria-labelledby="review-title" hidden>
            <header class="rm-panel__header">
              <div class="rm-panel__heading">
                <p id="review-step-caption" class="rm-eyebrow">Step 2 of 4 · Review</p>
                <h2 id="review-title" class="rm-h1" tabindex="-1">Review the plan</h2>
                <p id="review-detail" class="rm-muted">Nothing has changed yet. Check this plan, then confirm.</p>
              </div>
            </header>

            <div class="rm-panel__body">
              <div id="claude-review" class="claude-review rm-fade-in" hidden>
                <dl class="rm-dl result-list">
                  <div><dt>Claude Code</dt><dd id="claude-review-version"></dd></div>
                  <div><dt>SHA-256</dt><dd><code id="claude-review-sha"></code></dd></div>
                </dl>
                <div class="claude-review__checks">
                  <label class="rm-check check-row"><input type="checkbox" data-claude-review="officialBinaryReviewed" /><span>I checked the official Claude Code version and SHA256 for this architecture.</span></label>
                  <label class="rm-check check-row"><input type="checkbox" data-claude-review="effectivePolicyReviewed" /><span>I reviewed the companion's effective policy, managed settings, hooks and MCP servers. None adds tools, commands or changes to sign-in or models.</span></label>
                  <label class="rm-check check-row"><input type="checkbox" data-claude-review="nativeAuthAndBillingReviewed" /><span>I will sign in to my own Claude plan, keep extra usage off and check for loggedIn true and authMethod claude.ai before use.</span></label>
                  <label class="rm-check check-row"><input type="checkbox" data-claude-review="policyChangesControlled" /><span>I will keep policy, login and billing unchanged and renew approval after changes or within 7 days.</span></label>
                </div>
                <a class="rm-link rm-link--standalone" href="https://relmio.jpfusin.tech/docs/claude-subscription" target="_blank" rel="noopener noreferrer">Claude setup and review guide<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>
              </div>

              <div id="review-plan" class="panel-columns review-columns rm-fade-in">
                <p id="review-provider-context" class="rm-eyebrow local-provider-context"></p>

                <dl class="rm-dl result-list review-details">
                  <div id="review-model-row" hidden>
                    <dt>Model</dt>
                    <dd id="local-model-review-id"></dd>
                  </div>
                  <div id="review-model-budget-row" hidden>
                    <dt>Model limits</dt>
                    <dd id="local-model-review-budget"></dd>
                  </div>
                  <div id="review-model-disk-row" hidden>
                    <dt>Download and disk</dt>
                    <dd id="local-model-review-disk"></dd>
                  </div>
                  <div id="review-model-host-row" hidden>
                    <dt>Measured Docker</dt>
                    <dd id="local-model-review-host"></dd>
                  </div>
                  <div>
                    <dt id="review-endpoint-label">Endpoint</dt>
                    <dd><code id="review-endpoint"></code></dd>
                  </div>
                  <div>
                    <dt>Protocol</dt>
                    <dd id="review-protocol"></dd>
                  </div>
                  <div>
                    <dt>Upstream sign-in</dt>
                    <dd id="review-auth"></dd>
                  </div>
                  <div id="review-siwc-account-row" hidden>
                    <dt>ChatGPT account</dt>
                    <dd id="review-siwc-account"></dd>
                  </div>
                  <div id="review-browser-row">
                    <dt>Browser clients</dt>
                    <dd id="review-browser"></dd>
                  </div>
                  <div id="review-origins-row">
                    <dt>Allowed origins</dt>
                    <dd id="review-origins"></dd>
                  </div>
                  <div id="review-n8n-row" hidden>
                    <dt>n8n container</dt>
                    <dd id="review-n8n"></dd>
                  </div>
                  <div id="review-network-row" hidden>
                    <dt>Docker network</dt>
                    <dd id="review-network"></dd>
                  </div>
                  <div id="review-publication-row" hidden>
                    <dt>Host publication</dt>
                    <dd id="review-publication"></dd>
                  </div>
                  <div id="review-public-url-row" hidden>
                    <dt>Public ngrok URL</dt>
                    <dd><code id="review-public-url"></code></dd>
                  </div>
                  <div id="review-assistant-mode-row" hidden>
                    <dt>Assistant selection</dt>
                    <dd id="review-assistant-mode"></dd>
                  </div>
                  <div>
                    <dt>Managed files</dt>
                    <dd><code id="review-path"></code></dd>
                  </div>
                  <div id="review-claude-models-row" hidden>
                    <dt>Models</dt>
                    <dd id="review-claude-models"></dd>
                  </div>
                  <div id="review-claude-version-row" hidden>
                    <dt>Claude Code</dt>
                    <dd id="review-claude-version"></dd>
                  </div>
                  <div id="review-claude-sha-row" hidden>
                    <dt>SHA-256</dt>
                    <dd><code id="review-claude-sha"></code></dd>
                  </div>
                </dl>
                <p id="review-siwc-usage" class="rm-status" data-tone="success" hidden>Using ChatGPT plan · <a href="https://chatgpt.com/settings/usage" target="_blank" rel="noopener noreferrer">Manage usage (opens in a new tab)</a></p>

                <details id="local-model-review-details" class="rm-disclosure model-review-provenance" hidden>
                  <summary>Model digest and runtime image</summary>
                  <div class="rm-disclosure__body">
                    <dl class="rm-dl result-list">
                      <div><dt>Approved manifest</dt><dd><code id="local-model-review-digest"></code></dd></div>
                      <div><dt>Context</dt><dd id="local-model-review-context"></dd></div>
                      <div><dt>Reserved memory</dt><dd id="local-model-review-reserve"></dd></div>
                      <div><dt>Pinned runtime</dt><dd><code id="local-model-review-runtime"></code></dd></div>
                    </dl>
                  </div>
                </details>

                <details class="rm-disclosure review-actions">
                  <summary>What Relmio will and will not do</summary>
                  <div class="rm-disclosure__body review-actions-body">
                    <section class="review-list" aria-labelledby="review-will-title">
                      <h3 id="review-will-title" class="rm-h3">Relmio will</h3>
                      <ul id="review-will" class="check-list">
                        <li>Build one Docker image for this connection.</li>
                        <li>Publish the selected port on <code>127.0.0.1</code> only.</li>
                        <li>Make a separate one-time local key.</li>
                        <li>Keep provider sign-in in a private Docker volume.</li>
                      </ul>
                    </section>
                    <section class="review-list" aria-labelledby="review-will-not-title">
                      <h3 id="review-will-not-title" class="rm-h3">Relmio will not</h3>
                      <ul id="review-will-not" class="no-list">
                        <li>Publish the endpoint on your network or the internet.</li>
                        <li>Turn provider sign-in into an API key.</li>
                        <li>Change or restart n8n.</li>
                        <li>Reuse an existing server deployment.</li>
                      </ul>
                    </section>
                  </div>
                </details>
                <div id="local-install-images-row" hidden>
                  <details id="local-install-images-disclosure" class="rm-disclosure">
                    <summary>Image generation (optional)</summary>
                    <div class="rm-disclosure__body">
                      <p class="rm-small rm-muted">Uses a separate Codex sign-in, not the sidecar's Sign in with ChatGPT permission. OpenAI does not document this image route for other apps, so it may stop working. OpenAI recommends an API key for automation.</p>
                      <p class="rm-small rm-muted">Leave this unchecked to install without image sign-in. If selected, Relmio starts Codex sign-in after installation. You still approve it on OpenAI's page.</p>
                      <ul class="rm-small rm-muted">
                        <li>Images use your Codex limits about 3 to 5 times faster on average than similar turns without images, then credits. Free plans cannot use them. <a href="https://chatgpt.com/codex/settings/usage" target="_blank" rel="noopener noreferrer">Codex usage<span class="rm-visually-hidden"> (opens in a new tab)</span></a></li>
                        <li>This computer stores a full Codex sign-in, including a refresh token, in the sidecar's Docker volume. Administrators, Docker users and backups can access it.</li>
                        <li>Anyone who can run workflows in this n8n can use your account for images. Turn this on only if nobody else uses it.</li>
                        <li>Device code sign-in must be enabled in ChatGPT security settings or allowed by your workspace admin.</li>
                        <li>Use the same ChatGPT account as this sidecar. Relmio does not verify that the accounts match.</li>
                        <li>Image requests send your prompt and any reference images to OpenAI.</li>
                      </ul>
                      <label class="rm-check check-row">
                        <input id="local-install-images-confirm" type="checkbox" />
                        <span>I understand. After installation, start Codex sign-in for images on this computer.</span>
                      </label>
                    </div>
                  </details>
                </div>

                <details id="claude-review-settings" class="rm-notice" hidden>
                  <summary>
                    <span class="rm-icon rm-icon--alert rm-notice__icon" aria-hidden="true"></span>
                    <span class="rm-notice__title">Text only, one request at a time</span>
                    <span class="rm-notice__text">Not AI Agent tools or the n8n AI Assistant.</span>
                    <span class="rm-notice__toggle">n8n settings</span>
                  </summary>
                  <div class="rm-notice__body">
                    <p>Basic LLM Chain + OpenAI Chat Model; Use Responses API off; Max Retries 0; Timeout at least 135000 ms; Batch Size 1. Renew approval within 7 days.</p>
                  </div>
                </details>

                <aside id="review-policy" class="policy-note"></aside>
              </div>
            </div>

            <footer class="rm-panel__footer">
              <button class="rm-button rm-button--ghost back-button" type="button" data-back="1">
                <span class="rm-icon rm-icon--arrow-left rm-icon--sm" aria-hidden="true"></span>Back
              </button>
              <div id="review-approval" class="approval">
                <label class="rm-check check-row">
                  <input id="install-confirm" type="checkbox" />
                  <span id="install-confirm-copy">I reviewed this exact plan and authorize Relmio to write its managed local files and start this container.</span>
                </label>
                <label id="local-migration-consent-row" class="rm-check check-row" hidden>
                  <input id="local-migration-consent" type="checkbox" />
                  <span>I approve stopping only the attested old Relmio service. Keep its old credential and history volumes offline. Create a new SIWC runtime and show a new local client key; I will update my client manually.</span>
                </label>
                <label id="local-replacement-consent-row" class="rm-check check-row" hidden>
                  <input id="local-replacement-consent" type="checkbox" />
                  <span>I approve replacing only this signed-out owned Relmio service with a separately authorized account. Keep the old signed-out mapping and history offline; I will update my client with the new one-time key.</span>
                </label>
              </div>
              <button id="claude-review-continue" class="rm-button rm-button--primary rm-push" type="button" disabled hidden>
                Review the plan
              </button>
              <button id="install-settings-button" class="rm-button rm-button--primary" type="button" disabled>
                Continue to install
              </button>
            </footer>
          </section>

          <section
            id="install-panel"
            class="rm-panel setup-panel"
            data-step="3"
            aria-labelledby="install-title"
            aria-busy="false"
            hidden
          >
            <header class="rm-panel__header">
              <div class="rm-panel__heading">
                <p class="rm-eyebrow">Step 3 of 4 · Install</p>
                <h2 id="install-title" class="rm-h1" tabindex="-1">Install</h2>
                <p id="install-intro" class="rm-muted">Install the reviewed connection only after checking its selected account and destination.</p>
              </div>
            </header>

            <div class="rm-panel__body">
              <aside id="codex-install-warning" class="rm-callout rm-callout--warning high-trust-warning" hidden>
                <span class="rm-icon rm-icon--alert rm-callout__icon" aria-hidden="true"></span>
                <div class="rm-callout__content">
                  <strong id="codex-install-warning-title" class="rm-callout__title">High-trust local key</strong>
                  <p id="codex-install-warning-detail" class="rm-callout__body">Anyone with this key can control Codex in its container, act through your ChatGPT sign-in, and may recover that container's ChatGPT session. Treat it like your ChatGPT password. Give it only to a trusted local app.</p>
                </div>
              </aside>

              <aside id="sidecar-install-note" class="rm-callout rm-callout--warning high-trust-warning" hidden>
                <span class="rm-icon rm-icon--alert rm-callout__icon" aria-hidden="true"></span>
                <div class="rm-callout__content">
                  <strong class="rm-callout__title">Private ChatGPT plan sidecar</strong>
                  <p class="rm-callout__body">The selected registration transfers to an owned local sidecar. Approve n8n background use separately. Relmio adds its credential to a Relmio-created n8n; for other n8n containers, enter the one-time key yourself. No host port <code>10531</code> is published. An uncertain installation requires owner inspection before use.</p>
                </div>
              </aside>

              <aside id="assistant-install-note" class="rm-callout rm-callout--warning high-trust-warning" hidden>
                <span class="rm-icon rm-icon--alert rm-callout__icon" aria-hidden="true"></span>
                <div class="rm-callout__content">
                  <strong class="rm-callout__title">Privileged testing companion</strong>
                  <p class="rm-callout__body">Relmio starts only its Code Sandbox services and the SearXNG option you chose. The runner is privileged Docker-in-Docker and host-root equivalent. It will not change n8n. Copy the returned settings into n8n yourself. For production, use Daytona.</p>
                </div>
              </aside>

              <aside id="n8n-stack-install-note" class="rm-callout rm-callout--warning high-trust-warning" hidden>
                <span class="rm-icon rm-icon--alert rm-callout__icon" aria-hidden="true"></span>
                <div class="rm-callout__content">
                  <strong class="rm-callout__title">Public link needs Basic Auth</strong>
                  <p class="rm-callout__body">Create the Basic Auth username and password yourself. They do not come from ngrok, n8n, Relmio, Windows, or ChatGPT. Save them: Relmio does not show them again.</p>
                </div>
              </aside>

              <div id="n8n-stack-secrets" class="rm-form-grid local-fields stack-secrets" hidden>
                <label class="rm-field stack-field-wide" for="ngrok-authtoken"><span class="rm-field__label">ngrok agent authtoken</span><input id="ngrok-authtoken" class="rm-input rm-input--mono" type="password" autocomplete="off" autocapitalize="none" spellcheck="false" required minlength="8" maxlength="512" aria-describedby="ngrok-authtoken-help" /><small id="ngrok-authtoken-help" class="rm-field__hint">Paste one active agent token, 8–512 characters, no whitespace. Not the <code>ngrok config add-authtoken ...</code> command and not an ngrok API key.</small></label>
                <label class="rm-field" for="ngrok-basic-auth-username"><span class="rm-field__label">Basic Auth username</span><input id="ngrok-basic-auth-username" class="rm-input" type="text" autocomplete="off" autocapitalize="none" spellcheck="false" required minlength="1" maxlength="64" pattern="[A-Za-z0-9_\-]+" aria-describedby="ngrok-basic-auth-username-help" /><small id="ngrok-basic-auth-username-help" class="rm-field__hint">1–64 letters, numbers, hyphens, or underscores.</small></label>
                <div class="rm-field">
                  <label class="rm-field__label" for="ngrok-basic-auth-password">Basic Auth password</label>
                  <input id="ngrok-basic-auth-password" class="rm-input" type="password" autocomplete="off" autocapitalize="none" spellcheck="false" required minlength="12" maxlength="512" aria-describedby="ngrok-basic-auth-password-help" />
                  <small id="ngrok-basic-auth-password-help" class="rm-field__hint">12–512 characters, no colon or line breaks.</small>
                  <div class="rm-cluster credential-field-actions">
                    <button id="generate-ngrok-basic-auth-password" class="rm-button rm-button--sm" type="button">Generate strong password</button>
                    <button id="toggle-ngrok-basic-auth-password" class="rm-button rm-button--sm" type="button" aria-pressed="false">Show password</button>
                  </div>
                </div>
              </div>
            </div>

            <footer class="rm-panel__footer">
              <button class="rm-button rm-button--ghost back-button" type="button" data-back="2">
                <span class="rm-icon rm-icon--arrow-left rm-icon--sm" aria-hidden="true"></span>Back
              </button>
              <label id="local-background-consent-row" class="rm-check check-row" hidden>
                <input id="local-background-consent" type="checkbox" />
                <span>I authorize this selected ChatGPT account's plan for my own background workflows on this reviewed n8n. Other people's activity must not use my plan. For n8n created by Relmio, the reviewed install may save its local key and base URL in n8n's credential store. OpenAI tokens stay in the sidecar.</span>
              </label>
              <button id="install-review-again" class="rm-button rm-button--primary rm-push" type="button" hidden>
                Review the plan again
              </button>
              <button id="install-button" class="rm-button rm-button--primary rm-push" type="button">
                Install on this computer
              </button>
            </footer>
          </section>

          <section class="rm-panel setup-panel success-panel" data-step="4" aria-labelledby="done-title" hidden>
            <header class="rm-panel__header success-heading">
              <div id="success-mark" class="success-mark" aria-hidden="true"><span class="rm-icon rm-icon--check rm-icon--lg"></span></div>
              <div class="rm-panel__heading">
                <div class="success-eyebrows">
                  <p id="done-step-caption" class="rm-eyebrow">Step 4 of 4 · Ready</p>
                  <p id="done-provider-context" class="rm-eyebrow local-provider-context"></p>
                </div>
                <h2 id="done-title" class="rm-h1" tabindex="-1">Local endpoint is ready</h2>
                <p id="done-detail" class="rm-muted">Copy the client settings into your local app.</p>
              </div>
            </header>

            <div class="rm-panel__body">
              <div class="panel-columns ready-columns">
                <div id="n8n-stack-open" class="rm-cluster stack-open" hidden>
                  <a id="n8n-stack-open-link" class="rm-link rm-link--standalone" target="_blank" rel="noopener noreferrer">Open n8n<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>
                  <p class="rm-small rm-muted">Create your n8n owner account on first open.</p>
                </div>

                <dl id="install-result-list" class="rm-dl result-list">
                  <div id="result-endpoint-row">
                    <dt id="result-endpoint-label">Endpoint</dt>
                    <dd class="result-value">
                      <code id="result-endpoint"></code>
                      <button
                        class="rm-icon-button rm-icon-button--outline rm-icon-button--sm copy-value"
                        type="button"
                        data-copy-target="result-endpoint"
                        data-copy-label="endpoint"
                        aria-label="Copy local endpoint"
                        title="Copy local endpoint"
                      >
                        <span class="rm-icon rm-icon--copy rm-icon--sm" aria-hidden="true"></span>
                      </button>
                    </dd>
                  </div>
                  <div id="result-n8n-row" hidden>
                    <dt>n8n container</dt>
                    <dd id="result-n8n"></dd>
                  </div>
                  <div id="result-network-row" hidden>
                    <dt>Docker network</dt>
                    <dd id="result-network"></dd>
                  </div>
                  <div id="result-publication-row" hidden>
                    <dt>Host publication</dt>
                    <dd id="result-publication"></dd>
                  </div>
                  <div id="result-deployment-row" hidden>
                    <dt>Deployment mode</dt>
                    <dd id="result-deployment"></dd>
                  </div>
                  <div id="result-public-url-row" hidden>
                    <dt>Public ngrok URL</dt>
                    <dd class="result-value"><code id="result-public-url"></code><button class="rm-icon-button rm-icon-button--outline rm-icon-button--sm copy-value" type="button" data-copy-target="result-public-url" data-copy-label="public ngrok URL" aria-label="Copy public ngrok URL" title="Copy public ngrok URL"><span class="rm-icon rm-icon--copy rm-icon--sm" aria-hidden="true"></span></button></dd>
                  </div>
                  <div id="result-assistant-mode-row" hidden>
                    <dt>Assistant selection</dt>
                    <dd id="result-assistant-mode"></dd>
                  </div>
                  <div id="result-sandbox-key-row" hidden>
                    <dt>Sandbox API key</dt>
                    <dd class="result-value">
                      <code id="result-sandbox-key"></code>
                      <button
                        class="rm-icon-button rm-icon-button--outline rm-icon-button--sm copy-value"
                        type="button"
                        data-copy-target="result-sandbox-key"
                        data-copy-label="sandbox API key"
                        aria-label="Copy sandbox API key"
                        title="Copy sandbox API key"
                      >
                        <span class="rm-icon rm-icon--copy rm-icon--sm" aria-hidden="true"></span>
                      </button>
                    </dd>
                  </div>
                  <div id="result-searxng-row" hidden>
                    <dt>SearXNG URL</dt>
                    <dd class="result-value">
                      <code id="result-searxng"></code>
                      <button
                        id="copy-searxng-button"
                        class="rm-icon-button rm-icon-button--outline rm-icon-button--sm copy-value"
                        type="button"
                        data-copy-target="result-searxng"
                        data-copy-label="SearXNG URL"
                        aria-label="Copy SearXNG URL"
                        title="Copy SearXNG URL"
                      >
                        <span class="rm-icon rm-icon--copy rm-icon--sm" aria-hidden="true"></span>
                      </button>
                    </dd>
                  </div>
                  <div id="result-credential-row">
                    <dt id="result-credential-label">Client credential</dt>
                    <dd class="result-value">
                      <code id="result-credential"></code>
                      <button
                        class="rm-icon-button rm-icon-button--outline rm-icon-button--sm copy-value"
                        type="button"
                        data-copy-target="result-credential"
                        data-copy-label="client credential"
                        aria-label="Copy client credential"
                        title="Copy client credential"
                      >
                        <span class="rm-icon rm-icon--copy rm-icon--sm" aria-hidden="true"></span>
                      </button>
                    </dd>
                  </div>
                </dl>
                <p id="n8n-credential-status" class="rm-small" role="status" hidden></p>
                <details id="n8n-key-elsewhere" class="rm-disclosure" hidden>
                  <summary>Manual credential setup</summary>
                  <div class="rm-disclosure__body">
                    <p id="n8n-elsewhere-note" class="rm-small">Use this key only for this n8n. Do not share it or connect unrelated tools. Relmio shows it only now.</p>
                    <div class="result-value"><code id="n8n-elsewhere-key"></code><button class="rm-icon-button rm-icon-button--outline rm-icon-button--sm copy-value" type="button" data-copy-target="n8n-elsewhere-key" data-copy-label="client credential" aria-label="Copy client credential" title="Copy client credential"><span class="rm-icon rm-icon--copy rm-icon--sm" aria-hidden="true"></span></button></div>
                  </div>
                </details>
                <section id="n8n-stack-addons" class="rm-card rm-card--muted rm-card--compact" aria-labelledby="n8n-stack-addons-title" hidden>
                  <h3 id="n8n-stack-addons-title" class="rm-h3">Add to this n8n</h3>
                  <div class="rm-cluster stack-addon-actions">
                    <button class="rm-button rm-button--sm" type="button" data-stack-addon="n8n-openai-oauth">Add ChatGPT plan</button>
                    <button class="rm-button rm-button--sm" type="button" data-stack-addon="n8n-local-model">Add local model</button>
                    <button class="rm-button rm-button--sm" type="button" data-stack-addon="n8n-supergrok-oauth">Add SuperGrok</button>
                    <button class="rm-button rm-button--sm" type="button" data-stack-addon="n8n-claude-oauth">Add Claude <span class="rm-badge rm-badge--accent">Experimental</span></button>
                    <button class="rm-button rm-button--sm" type="button" data-stack-addon="n8n-ai-assistant">Add Assistant tools</button>
                  </div>
                </section>
                <section id="installed-siwc-models" class="rm-card rm-card--muted rm-card--compact" aria-label="ChatGPT model settings" hidden>
                  <p id="installed-siwc-plan-badge" class="rm-status" data-tone="success">Using ChatGPT plan · <a href="https://chatgpt.com/settings/usage" target="_blank" rel="noopener noreferrer">Manage usage<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></p>
                  <p id="installed-siwc-account" class="rm-small"></p>
                  <label class="rm-field" for="installed-siwc-model"><span class="rm-field__label">Account model</span>
                    <select id="installed-siwc-model" class="rm-select"></select>
                  </label>
                  <p id="installed-siwc-model-status" class="rm-small rm-muted" role="status" aria-live="polite">Only models listed for the selected account are shown. Each request can still fail or reach a usage limit.</p>
                  <a id="installed-siwc-usage-recovery" class="rm-button rm-button--primary" href="https://chatgpt.com/settings/usage" target="_blank" rel="noopener noreferrer" hidden>Manage usage (opens in a new tab)</a>
                </section>

                <aside id="ready-safety" class="rm-callout rm-callout--warning ready-safety">
                  <span class="rm-icon rm-icon--alert rm-callout__icon" aria-hidden="true"></span>
                  <div class="rm-callout__content">
                    <ul class="ready-safety__list">
                      <li id="one-time-note">
                        <strong id="one-time-note-title">Copy this key now</strong>
                        <p id="one-time-note-detail">Relmio shows this key only now. It cannot recover it after you leave this page.</p>
                      </li>
                      <li id="client-warning" class="policy-note final-note" hidden></li>
                      <li id="codex-production-warning" hidden>
                        <strong id="codex-production-warning-title">Experimental Codex integration</strong>
                        <p id="codex-production-warning-detail"></p>
                      </li>
                    </ul>
                  </div>
                </aside>

                <details class="rm-disclosure ready-settings">
                  <summary>n8n environment values to copy</summary>
                  <div class="rm-disclosure__body">
                    <div id="result-n8n-settings-row" hidden>
                      <div class="result-value result-settings-value">
                        <pre id="result-n8n-settings"></pre>
                        <button class="rm-icon-button rm-icon-button--outline rm-icon-button--sm copy-value" type="button" data-copy-target="result-n8n-settings" data-copy-label="n8n environment values" aria-label="Copy n8n environment values" title="Copy n8n environment values">
                          <span class="rm-icon rm-icon--copy rm-icon--sm" aria-hidden="true"></span>
                        </button>
                      </div>
                    </div>
                  </div>
                </details>

                <details id="local-siwc-owner" class="rm-disclosure" hidden>
                  <summary><span id="local-siwc-owner-title">Installed ChatGPT account</span></summary>
                  <div class="rm-disclosure__body">
                    <p id="local-siwc-owner-status" class="rm-small" role="status" aria-live="polite">Check the owned installation to manage its account.</p>
                    <label id="local-siwc-inspect-row" class="rm-check check-row" hidden>
                      <input id="local-siwc-inspect-confirm" type="checkbox" />
                      <span>I approve a temporary one-off read of this stopped Relmio service to inspect its ChatGPT account. This does not start or edit n8n.</span>
                    </label>
                    <button id="local-siwc-inspect" class="rm-button rm-button--sm" type="button" hidden>Inspect stopped account</button>
                    <div id="local-siwc-owner-actions" hidden>
                      <label class="rm-check check-row">
                        <input id="local-siwc-owner-confirm" type="checkbox" />
                        <span>I approve stopping only this owned Relmio service to change its ChatGPT session. The old sign-in stays separate.</span>
                      </label>
                      <label id="local-siwc-background-row" class="rm-check check-row" hidden>
                        <input id="local-siwc-background-confirm" type="checkbox" />
                        <span>I again authorize this account's plan for my n8n background workflows at this owned installation.</span>
                      </label>
                      <div class="rm-cluster">
                        <button id="local-siwc-enable" class="rm-button rm-button--sm" type="button" disabled hidden>Use ChatGPT plan</button>
                        <button id="local-siwc-disable" class="rm-button rm-button--sm" type="button" disabled>Pause plan use</button>
                        <button id="local-siwc-logout" class="rm-button rm-button--sm" type="button" disabled>Sign out and revoke</button>
                      </div>
                      <p id="local-siwc-images-signout-note" class="rm-small rm-muted" hidden>Sign out and revoke: this signs out of images first and asks OpenAI to revoke that sign-in.</p>
                      <p id="local-siwc-images-pause-note" class="rm-small rm-muted" hidden>Pausing keeps the image sign-in. Sign out of images if you want it gone.</p>
                    </div>
                    <button id="local-siwc-replace" class="rm-button rm-button--sm" type="button" hidden>Review replacement with a fresh account</button>
                  </div>
                </details>
                <details id="installed-usage" class="rm-disclosure" hidden>
                  <summary><span id="installed-usage-title">Plan and usage</span></summary>
                  <div class="rm-disclosure__body">
                    <div class="usage-panel__head">
                      <p id="installed-usage-status" class="rm-small" role="status" aria-live="polite">Reading request counts…</p>
                      <button id="installed-usage-refresh" class="rm-button rm-button--sm" type="button">Refresh usage</button>
                    </div>
                    <div id="installed-usage-view" class="usage-panel__view"></div>
                  </div>
                </details>
                <details id="installed-images" class="rm-disclosure" hidden>
                  <summary><span id="installed-images-title">Image generation</span></summary>
                  <div class="rm-disclosure__body">
                    <p id="installed-images-status" class="rm-small" role="status" aria-live="polite">Open this section to check image generation.</p>
                    <button id="installed-images-check" class="rm-button rm-button--sm" type="button">Check image generation</button>
                    <p class="rm-small rm-muted">Image generation uses a separate Codex sign-in, the way Hermes Agent does it. It isn't the official Sign in with ChatGPT, and OpenAI doesn't document this route for other apps, so it can stop working at any time. OpenAI recommends an API key for automation.</p>
                    <ul class="rm-small rm-muted">
                      <li>Images use your plan's Codex limits 3 to 5 times faster than text, then credits. Free plans can't use it. Your Codex limits are at <a href="https://chatgpt.com/codex/settings/usage" target="_blank" rel="noopener noreferrer">chatgpt.com/codex/settings/usage<span class="rm-visually-hidden"> (opens in a new tab)</span></a>.</li>
                      <li>This computer stores a full Codex sign-in for the account in the sidecar's Docker volume. Anyone with administrator or Docker access on this computer, and any backup of Docker's data, can read it.</li>
                      <li>Anyone who can run workflows in this n8n can make images with this account. Turn this on only if nobody else uses it.</li>
                      <li>Device code sign-in must be on in ChatGPT security settings, or allowed by your workspace admin.</li>
                      <li>Sign in with the same ChatGPT account as this sidecar. In n8n, choose the model gpt-image-2.</li>
                    </ul>
                    <div id="installed-images-off" hidden>
                      <label class="rm-check check-row">
                        <input id="installed-images-confirm" type="checkbox" />
                        <span>I understand. Sign in to Codex for images on this computer.</span>
                      </label>
                      <button id="installed-images-start" class="rm-button rm-button--sm" type="button" disabled>Sign in for images</button>
                    </div>
                    <div id="installed-images-pending" hidden>
                      <p id="installed-images-install-instruction" class="rm-small" hidden>Open the Codex sign-in page and enter this code. Only enter it at auth.openai.com. Never share it.</p>
                      <p id="installed-images-code-prompt" class="rm-small">Enter this code on the Codex sign-in page:</p>
                      <div class="rm-device-code">
                        <code id="installed-images-code" class="rm-device-code__value" tabindex="0" aria-label="Device sign-in code" aria-describedby="installed-images-safety" translate="no"></code>
                        <button id="installed-images-copy" class="rm-button rm-button--sm rm-device-code__copy" type="button" aria-label="Copy sign-in code" disabled>Copy code</button>
                      </div>
                      <p id="installed-images-copy-status" class="rm-small rm-muted rm-device-code__feedback" role="status" aria-live="polite" aria-atomic="true"></p>
                      <p id="installed-images-safety" class="rm-small">Only enter this code at auth.openai.com. Never share it.</p>
                      <div class="rm-cluster">
                        <a id="installed-images-link" class="rm-link rm-link--standalone" target="_blank" rel="noopener noreferrer">Open the Codex sign-in page<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>
                        <button id="installed-images-cancel" class="rm-button rm-button--sm rm-button--ghost" type="button">Cancel image sign-in</button>
                      </div>
                      <p id="installed-images-expiry" class="rm-small rm-muted"></p>
                    </div>
                    <div id="installed-images-on" hidden>
                      <label class="rm-check check-row">
                        <input id="installed-images-signout-confirm" type="checkbox" />
                        <span>I approve signing out of images on this computer. Relmio deletes the Codex sign-in here and asks OpenAI to revoke it.</span>
                      </label>
                      <button id="installed-images-signout" class="rm-button rm-button--sm" type="button" disabled>Sign out of images</button>
                    </div>
                  </div>
                </details>
                <details id="n8n-stack-removal-disclosure" class="rm-disclosure ready-optional">
                  <summary>Remove this n8n</summary>
                  <div class="rm-disclosure__body">
                    <section id="n8n-stack-removal" class="rm-card rm-card--flat rm-card--compact n8n-sidecar-removal" aria-labelledby="n8n-stack-removal-title" hidden>
                      <h3 id="n8n-stack-removal-title" class="rm-h3">Remove owned n8n stack</h3>
                      <p class="rm-small rm-muted">Removes only this Relmio-owned stack, its containers, networks, volumes, and managed files. Existing n8n is not changed.</p>
                      <p class="rm-small removal-danger"><strong>This permanently deletes the owned n8n data, including workflows and credentials. Export what you need first.</strong></p>
                      <label class="rm-check check-row"><input id="remove-n8n-stack-confirm" type="checkbox" /><span>I understand this permanent data loss and authorize Relmio to remove only this owned n8n stack. Existing n8n stays untouched.</span></label>
                      <div class="sidecar-removal-actions"><button id="remove-n8n-stack-button" class="rm-button rm-button--danger" type="button" disabled>Remove owned stack</button><p id="remove-n8n-stack-status" class="rm-small" role="status" aria-live="polite">The owned stack remains installed until this separate confirmation is checked.</p></div>
                    </section>
                  </div>
                </details>

                <section id="n8n-stack-resume" class="rm-card rm-card--flat rm-card--compact n8n-sidecar-removal" aria-labelledby="n8n-stack-resume-title" hidden>
                  <h3 id="n8n-stack-resume-title" class="rm-h3">Resume stopped local n8n</h3>
                  <p class="rm-small rm-muted">Resume starts only the existing stopped stack containers. It does not create, rebuild, or remove anything. Your n8n data stays in place.</p>
                  <div class="sidecar-removal-actions"><button id="resume-n8n-stack-button" class="rm-button" type="button">Resume owned stack</button><p id="resume-n8n-stack-status" class="rm-small" role="status" aria-live="polite">The owned stack is stopped and can be resumed safely.</p></div>
                </section>

                <details
                  id="chat-tester"
                  class="rm-disclosure chat-tester"
                  aria-labelledby="chat-tester-title"
                  hidden
                >
                  <summary><span id="chat-tester-title">Test this local Chat Adapter</span></summary>
                  <div class="rm-disclosure__body chat-tester-body">
                    <div class="chat-tester-heading">
                      <p class="rm-small">This browser talks only to this wizard. The wizard then calls <code>127.0.0.1</code>.</p>
                      <button
                        id="chat-tester-reset"
                        class="rm-button rm-button--ghost rm-button--sm"
                        type="button"
                      >
                        Forget tester
                      </button>
                    </div>

                    <p class="chat-tester-route rm-small">
                      <span class="rm-visually-hidden">Request route: </span>
                      <span><strong>Browser</strong> same origin</span>
                      <span class="rm-icon rm-icon--arrow-right rm-icon--xs" aria-hidden="true"></span>
                      <span><strong>Wizard relay</strong> encrypted session</span>
                      <span class="rm-icon rm-icon--arrow-right rm-icon--xs" aria-hidden="true"></span>
                      <span><strong>Chat Adapter</strong> 127.0.0.1 only</span>
                    </p>

                    <form id="chat-tester-secure-form" class="chat-tester-form">
                      <fieldset class="rm-fieldset">
                        <legend>Secure a temporary test session</legend>
                        <div class="rm-form-grid">
                          <label class="rm-field" for="chat-tester-endpoint">
                            <span class="rm-field__label">Adapter base URL</span>
                            <input
                              id="chat-tester-endpoint"
                              class="rm-input"
                              type="url"
                              inputmode="url"
                              autocomplete="off"
                              spellcheck="false"
                              maxlength="64"
                              placeholder="http://127.0.0.1:14501"
                              pattern="http:\/\/127\.0\.0\.1:[1-9][0-9]{0,4}\/?"
                              aria-describedby="chat-tester-endpoint-help"
                              required
                            />
                            <small id="chat-tester-endpoint-help" class="rm-field__hint">Literal <code>http://127.0.0.1:PORT</code> only.</small>
                          </label>
                          <label class="rm-field" for="chat-tester-credential">
                            <span class="rm-field__label">Client credential</span>
                            <input
                              id="chat-tester-credential"
                              class="rm-input"
                              type="password"
                              autocomplete="off"
                              autocapitalize="none"
                              spellcheck="false"
                              maxlength="512"
                              aria-describedby="chat-tester-security-note"
                              required
                            />
                            <small id="chat-tester-security-note" class="rm-field__hint">The field is cleared when you secure it. That does not protect a compromised browser, extension, or this computer.</small>
                          </label>
                        </div>
                      </fieldset>
                      <button id="chat-tester-secure" class="rm-button" type="submit">
                        Secure credential for this test
                      </button>
                    </form>

                    <form id="chat-tester-message-form" class="chat-tester-message-form" hidden>
                      <p class="rm-status" data-tone="success">Using ChatGPT plan · <a href="https://chatgpt.com/settings/usage" target="_blank" rel="noopener noreferrer">Manage usage<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></p>
                      <label class="rm-field" for="chat-tester-model"><span class="rm-field__label">Model for this account</span>
                        <select id="chat-tester-model" class="rm-select" required></select>
                      </label>
                      <label class="rm-field" for="chat-tester-input">
                        <span class="rm-field__label">Message</span>
                        <textarea
                          id="chat-tester-input"
                          class="rm-textarea"
                          rows="3"
                          maxlength="8192"
                          spellcheck="true"
                          required
                        ></textarea>
                      </label>
                      <div class="rm-cluster chat-tester-message-actions">
                        <button id="chat-tester-send" class="rm-button" type="submit">
                          Send test message
                        </button>
                        <button
                          id="chat-tester-stop"
                          class="rm-button"
                          type="button"
                          data-operation-allow="stop"
                          aria-label="Stop response"
                          hidden
                        >
                          Stop response
                        </button>
                      </div>
                    </form>

                    <p id="chat-tester-status" class="chat-tester-status" role="status" aria-live="polite" aria-atomic="true">
                      Secure the local client credential to begin.
                    </p>
                    <p id="chat-tester-error" class="rm-callout rm-callout--danger chat-tester-error" role="alert" tabindex="-1" hidden></p>
                    <a id="chat-tester-usage" class="rm-button rm-button--primary" href="https://chatgpt.com/settings/usage" target="_blank" rel="noopener noreferrer" hidden>Manage usage (opens in a new tab)</a>
                    <ol
                      id="chat-tester-transcript"
                      class="chat-tester-transcript"
                      role="log"
                      aria-live="polite"
                      aria-busy="false"
                      aria-relevant="additions"
                      aria-label="Local adapter test transcript"
                    ></ol>
                  </div>
                </details>

                <details id="credential-rotation-note" class="rm-disclosure credential-rotation-note">
                  <summary>Rotate the local key</summary>
                  <div class="rm-disclosure__body">
                    <p class="rm-small rm-muted">Relmio shows the replacement first, then activates and checks it. The old key stops working only after that succeeds. Copy the replacement before you leave.</p>
                    <button id="rotate-credential-button" class="rm-button" type="button">
                      <span class="rm-icon rm-icon--refresh rm-icon--sm" aria-hidden="true"></span>Rotate local capability
                    </button>
                  </div>
                </details>

                <section id="n8n-local-model-management" class="model-box local-model-management" aria-labelledby="n8n-local-model-title" hidden>
                  <h3 id="n8n-local-model-title" class="rm-h3">Private local model</h3>
                  <p id="local-model-state" class="rm-small" role="status" aria-live="polite"></p>
                  <p id="local-model-progress" class="rm-small rm-muted" role="status" aria-live="polite" hidden></p>
                  <div id="local-model-settings" hidden>
                    <dl class="rm-dl result-list">
                      <div><dt>Private base URL</dt><dd class="result-value"><code id="local-model-url">http://n8n-local-model:11434/v1</code><button class="rm-icon-button rm-icon-button--outline rm-icon-button--sm copy-value" type="button" data-copy-target="local-model-url" data-copy-label="private base URL" aria-label="Copy private base URL" title="Copy private base URL"><span class="rm-icon rm-icon--copy rm-icon--sm" aria-hidden="true"></span></button></dd></div>
                      <div><dt>Installed model</dt><dd class="result-value"><code id="local-model-installed-id"></code><button class="rm-icon-button rm-icon-button--outline rm-icon-button--sm copy-value" type="button" data-copy-target="local-model-installed-id" data-copy-label="installed model ID" aria-label="Copy installed model ID" title="Copy installed model ID"><span class="rm-icon rm-icon--copy rm-icon--sm" aria-hidden="true"></span></button></dd></div>
                      <div id="local-model-placeholder-row"><dt>Ignored API-key placeholder</dt><dd class="result-value"><code id="local-model-placeholder">local-only</code><button class="rm-icon-button rm-icon-button--outline rm-icon-button--sm copy-value" type="button" data-copy-target="local-model-placeholder" data-copy-label="API-key placeholder" aria-label="Copy API-key placeholder" title="Copy API-key placeholder"><span class="rm-icon rm-icon--copy rm-icon--sm" aria-hidden="true"></span></button></dd></div>
                    </dl>
                    <p class="rm-small">Turn Use Responses API <strong>Off</strong>. The placeholder is not a login: every container on this network can reach Ollama's management API. A passed check does not prove Assistant or tool-calling works.</p>
                  </div>
                  <div class="rm-cluster actions"><button id="local-model-refresh" class="rm-button rm-button--sm" type="button">Refresh model status</button><button id="local-model-review-retry" class="rm-button rm-button--sm" type="button" hidden>Review retry</button><button id="local-model-review-remove" class="rm-button rm-button--ghost rm-button--sm" type="button" hidden>Review removal</button></div>
                  <section id="local-model-action-review" class="rm-card rm-card--muted rm-card--compact model-box" aria-labelledby="local-model-action-title" hidden>
                    <h4 id="local-model-action-title" class="rm-h3" tabindex="-1"></h4>
                    <p id="local-model-action-detail" class="rm-small"></p>
                    <label class="rm-check check-row"><input id="local-model-action-confirm" type="checkbox" /><span>I approve the exact reviewed action for this owned model only.</span></label>
                    <label id="local-model-cache-confirm-row" class="rm-check check-row" hidden><input id="local-model-cache-confirm" type="checkbox" /><span>I separately approve permanent deletion of this owned model cache and downloaded weights.</span></label>
                    <div class="rm-cluster actions"><button id="local-model-apply" class="rm-button" type="button" disabled>Apply reviewed action</button><button id="local-model-cancel" class="rm-button rm-button--ghost rm-button--sm" type="button">Cancel review</button></div>
                  </section>
                </section>

                <details class="rm-disclosure ready-optional">
                  <summary>Remove this bridge</summary>
                <section
                  id="n8n-sidecar-removal"
                  class="rm-card rm-card--flat rm-card--compact n8n-sidecar-removal"
                  aria-labelledby="n8n-sidecar-removal-title"
                  hidden
                >
                  <h3 id="n8n-sidecar-removal-title" class="rm-h3">Remove bridge</h3>
                  <p class="rm-small rm-muted">Removes only Relmio's <code>openai-oauth</code> sidecar, private auth volume, and managed files. n8n and its Docker network stay.</p>
                  <label class="rm-check check-row">
                    <input id="remove-bridge-confirm" type="checkbox" />
                    <span>I authorize Relmio to remove only this bridge and its private files. Leave n8n and its Docker network unchanged.</span>
                  </label>
                  <p class="rm-small rm-muted">This signs out of images first and asks OpenAI to revoke that sign-in.</p>
                  <div class="sidecar-removal-actions">
                    <button
                      id="remove-bridge-button"
                      class="rm-button rm-button--danger"
                      type="button"
                      disabled
                    >
                      Remove bridge
                    </button>
                    <p id="remove-bridge-status" class="rm-small" role="status" aria-live="polite">
                      The bridge remains installed until this separate confirmation is checked.
                    </p>
                  </div>
                </section>
                </details>

                <div id="n8n-claude-management" class="claude-view" hidden>
                  <section id="claude-card" class="rm-card rm-card--compact claude-card" aria-labelledby="claude-management-title">
                    <h3 id="claude-management-title" class="rm-h3">Claude for n8n <span class="rm-badge rm-badge--accent">Experimental</span></h3>
                    <div id="claude-one-time-key" class="rm-callout rm-callout--warning" hidden>
                      <span class="rm-icon rm-icon--alert rm-callout__icon" aria-hidden="true"></span>
                      <div class="rm-callout__content">
                        <strong class="rm-callout__title">Save this Relmio key now</strong>
                        <p class="rm-callout__body">It is shown once and cannot be recovered.</p>
                        <div class="result-value"><code id="claude-client-key"></code><button id="claude-copy-key" class="rm-button rm-button--sm copy-value" type="button" data-copy-target="claude-client-key" data-copy-label="Claude client key" data-guide-state="none">Copy key</button></div>
                      </div>
                    </div>
                    <p id="claude-runtime-status" class="rm-status" role="status" data-tone="success" data-guide-state="running"><span class="rm-status__dot" aria-hidden="true"></span><span id="claude-runtime-text"></span></p>
                    <p id="claude-runtime-help" class="rm-small" hidden>Check its logs with <code>docker logs relmio-claude</code>. If they show <code>account_locked</code>, follow the <a class="rm-link" href="https://github.com/Demonbane18/relmio/blob/main/docs/claude-native-prompt.md#shutdown-and-account-lock-recovery" target="_blank" rel="noopener noreferrer">account-lock recovery guide<span class="rm-visually-hidden"> (opens in a new tab)</span></a> only after everything that uses this Claude account has stopped.</p>
                    <p class="rm-small">Sign in in your own terminal. This browser never asks for the paste code.</p>
                    <div class="rm-terminal">
                      <div class="rm-terminal__bar"><span>Your terminal</span><div class="rm-terminal__actions"><button class="rm-button rm-button--sm copy-value" type="button" data-copy-target="claude-login-command" data-copy-label="Claude sign-in command">Copy command</button></div></div>
                      <pre class="rm-terminal__body" tabindex="0" role="region" aria-label="Claude terminal sign-in command"><code id="claude-login-command">relmio claude companion login</code></pre>
                    </div>
                    <div class="claude-card__check">
                      <button id="claude-check-sign-in" class="rm-button rm-button--sm" type="button">Check sign-in</button>
                      <p id="claude-auth-status" class="rm-small" role="status" data-guide-state="unchecked">Sign-in has not been checked.</p>
                    </div>
                    <p id="claude-approval-status" class="rm-small" role="status"></p>
                  </section>
                  <details id="claude-manage" class="rm-disclosure"><summary>n8n settings and approval</summary><div class="rm-disclosure__body">
                    <p class="rm-small">If you use NPX instead of an installed Relmio command, sign in with:</p>
                    <div class="result-value"><code id="claude-npx-login-command">npx --yes --ignore-scripts relmio@latest claude companion login</code><button class="rm-button rm-button--sm copy-value" type="button" data-copy-target="claude-npx-login-command" data-copy-label="NPX Claude sign-in command">Copy NPX command</button></div>
                    <p class="rm-small">OpenAI credential: Base URL <code>http://relmio-claude:14502/v1</code>; API Key: the one-time Relmio key. Use Basic LLM Chain + OpenAI Chat Model. Turn Use Responses API off. Max Retries 0, Timeout at least 135000 ms, Batch Size 1. Text only, one request at a time. Not AI Agent tools or the n8n AI Assistant.</p>
                    <p id="claude-installed-models" class="rm-small"></p>
                    <label class="rm-field" for="claude-probe-key"><span class="rm-field__label">Relmio key for model check</span><input id="claude-probe-key" class="rm-input rm-input--mono" type="password" autocomplete="off" maxlength="43" aria-describedby="claude-model-check-note" /></label>
                    <button id="claude-check-models" class="rm-button rm-button--sm" type="button">Check models</button>
                    <p id="claude-model-check-note" class="rm-small" role="status">Lists the companion's approved models. It does not send a Claude prompt or prove account access.</p>
                    <p class="rm-small">Claude stores its login only in the companion's Docker volume. Host administrators, Docker users and backups can access it. Relmio never reads or transfers that login.</p>
                    <p class="rm-small">Renewal asks all four review questions again before replacing approval and restarting only the Claude companion.</p>
                    <div id="claude-renew-review">
                      <label class="rm-check check-row"><input type="checkbox" data-claude-renew="officialBinaryReviewed" /><span>I checked the official binary and SHA256.</span></label>
                      <label class="rm-check check-row"><input type="checkbox" data-claude-renew="effectivePolicyReviewed" /><span>I reviewed effective policy, settings, hooks and MCP servers; no tools or command changes.</span></label>
                      <label class="rm-check check-row"><input type="checkbox" data-claude-renew="nativeAuthAndBillingReviewed" /><span>My own plan and allowed models remain selected, auth status is claude.ai, and extra usage is off.</span></label>
                      <label class="rm-check check-row"><input type="checkbox" data-claude-renew="policyChangesControlled" /><span>I will keep policy, login and billing unchanged and renew within 7 days.</span></label>
                    </div>
                    <label class="rm-check check-row"><input id="claude-change-confirm" type="checkbox" /><span>I confirm the action I choose below. It changes only Relmio's Claude companion and does not restart n8n.</span></label>
                    <div class="rm-cluster"><button id="claude-renew" class="rm-button rm-button--sm" type="button" disabled>Renew approval</button><button id="claude-sign-out" class="rm-button rm-button--sm" type="button" disabled>Sign out</button></div>
                  </div></details>
                  <details id="claude-removal" class="rm-disclosure"><summary>Remove Claude for n8n</summary><div class="rm-disclosure__body">
                    <p class="rm-small">Removes only Relmio's Claude companion, its image and managed files, and the Claude login volume unless you keep it below. n8n and its Docker network stay.</p>
                    <label class="rm-check check-row"><input id="claude-keep-login" type="checkbox" /><span>Keep my Claude sign-in for a reinstall<small class="rm-check__hint">Removal leaves the login volume in Docker for the next install. Everything in it stays, including an account lock left by a crash.</small></span></label>
                    <label class="rm-check check-row"><input id="claude-remove-confirm" type="checkbox" /><span id="claude-remove-confirm-copy">I authorize Relmio to remove only its Claude companion, login volume and managed files. Leave n8n and its Docker network unchanged.</span></label>
                    <div class="rm-cluster"><button id="claude-remove" class="rm-button rm-button--danger" type="button" disabled>Remove Claude</button></div>
                  </div></details>
                </div>

                <details class="rm-disclosure ready-optional">
                  <summary>Remove SuperGrok for n8n</summary>
                <section
                  id="n8n-supergrok-removal"
                  class="rm-card rm-card--flat rm-card--compact n8n-sidecar-removal"
                  aria-labelledby="n8n-supergrok-removal-title"
                  hidden
                >
                  <h3 id="n8n-supergrok-removal-title" class="rm-h3">Remove SuperGrok for n8n</h3>
                  <p class="rm-small rm-muted">Removes only Relmio's SuperGrok sidecar, private session volume, and managed files. n8n and its Docker network stay.</p>
                  <label class="rm-check check-row">
                    <input id="remove-supergrok-confirm" type="checkbox" />
                    <span>I authorize Relmio to remove only this SuperGrok sidecar and its private files. Leave n8n and its Docker network unchanged.</span>
                  </label>
                  <div class="sidecar-removal-actions">
                    <button id="remove-supergrok-button" class="rm-button rm-button--danger" type="button" disabled>
                      Remove SuperGrok for n8n
                    </button>
                    <p id="remove-supergrok-status" class="rm-small" role="status" aria-live="polite">
                      The sidecar remains installed until this separate confirmation is checked.
                    </p>
                  </div>
                </section>
                </details>

                <details class="rm-disclosure ready-optional">
                  <summary>Remove these Assistant tools</summary>
                <section
                  id="n8n-assistant-removal"
                  class="rm-card rm-card--flat rm-card--compact n8n-sidecar-removal"
                  aria-labelledby="n8n-assistant-removal-title"
                  hidden
                >
                  <h3 id="n8n-assistant-removal-title" class="rm-h3">Remove Assistant tools</h3>
                  <p class="rm-small rm-muted">Removes only Relmio's Code Sandbox, optional SearXNG, private TLS volume, and managed files. n8n and its Docker network stay.</p>
                  <label class="rm-check check-row">
                    <input id="remove-assistant-confirm" type="checkbox" />
                    <span>I authorize Relmio to remove only these Assistant companions and their private files. Leave n8n and its Docker network unchanged.</span>
                  </label>
                  <div class="sidecar-removal-actions">
                    <button
                      id="remove-assistant-button"
                      class="rm-button rm-button--danger"
                      type="button"
                      disabled
                    >
                      Remove Assistant tools
                    </button>
                    <p id="remove-assistant-status" class="rm-small" role="status" aria-live="polite">
                      The companion stack remains installed until this separate confirmation is checked.
                    </p>
                  </div>
                </section>
                </details>
              </div>
            </div>

            <footer class="rm-panel__footer actions">
              <a id="setup-another-local" class="rm-button rm-button--primary">Choose another connection</a>
              <a id="return-to-vps" class="rm-button">Set up on a server</a>
            </footer>
          </section>
        </div>

        <aside class="setup-notes" aria-label="Local setup status and safety">
          <div
            id="global-error"
            class="rm-callout rm-callout--danger global-error"
            role="alert"
            tabindex="-1"
            hidden
          >
            <span class="rm-icon rm-icon--alert rm-callout__icon" aria-hidden="true"></span>
            <div class="rm-callout__content">
              <span id="global-error-text"></span>
              <a id="global-error-recovery" class="rm-button rm-button--primary" href="https://chatgpt.com/settings/usage" target="_blank" rel="noopener noreferrer" hidden>Manage usage (opens in a new tab)</a>
              <a
                id="local-image-build-troubleshooting"
                class="rm-link rm-link--standalone"
                href="https://relmio.jpfusin.tech/docs/troubleshooting#local-image-build-failed"
                target="_blank"
                rel="noopener noreferrer"
                hidden
              >View troubleshooting<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>
            </div>
          </div>
          <div class="rm-card rm-card--muted rm-card--compact setup-status">
            <div class="docker-status" aria-live="polite">
              <span id="docker-indicator" class="rm-status__dot status-dot" aria-hidden="true"></span>
              <div>
                <strong id="docker-status-title">Checking Docker…</strong>
                <p id="docker-status-detail">Looking for Docker Engine and Compose.</p>
              </div>
            </div>
            <div id="global-message" class="global-message" role="status" aria-live="polite">
              <span id="global-message-text"></span>
            </div>
          </div>

          <div id="ready-quest" class="rm-card rm-card--muted rm-card--compact rm-guide-finish" data-guide-finish hidden>
            <div>
              <h3 class="rm-guide-finish__title">Badges earned</h3>
              <ul class="rm-guide-finish__badges" data-guide-badges></ul>
            </div>
            <details class="rm-disclosure rm-disclosure--plain">
              <summary>Next steps</summary>
              <ol class="rm-disclosure__body rm-guide-finish__next" data-guide-next></ol>
            </details>
          </div>

          <div class="setup-safety">
            <p id="local-footer-claude" class="setup-safety__fact setup-safety__fact--warning" hidden><span class="rm-icon rm-icon--alert rm-icon--sm" aria-hidden="true"></span><span>Experimental. Not affiliated with or endorsed by Anthropic. Uses the official Claude Code that you sign in to yourself; Relmio never sees your Claude login. Personal use only; Anthropic's terms apply and this may stop working.</span></p>
            <p id="local-footer-provider" class="setup-safety__fact"><span class="rm-icon rm-icon--shield rm-icon--sm" aria-hidden="true"></span><span>Provider sign-in stays in its runtime. A local key is separate and is not a Platform API key.</span></p>
            <p id="local-footer-chatgpt" class="setup-safety__fact" hidden><span class="rm-icon rm-icon--shield rm-icon--sm" aria-hidden="true"></span><span>A selected SIWC registration transfers only after final approval. The sidecar owns refresh; a separate one-time Relmio key protects local clients.</span></p>
            <p id="local-footer-model" class="setup-safety__fact" hidden><span class="rm-icon rm-icon--shield rm-icon--sm" aria-hidden="true"></span><span>This model uses no provider sign-in or API key. Other containers on its Docker network can still reach the model API.</span></p>
            <details class="rm-disclosure rm-disclosure--plain setup-help" aria-label="Connection privacy">
              <summary><strong id="boundary-title">This computer only</strong></summary>
              <div class="rm-disclosure__body"><p id="boundary-detail">The port is published on <code>127.0.0.1</code> only, not your network or the internet.</p></div>
            </details>
          </div>
        </aside>
      </section>
    </main>
  </body>
</html>