webui/components/settings/external/secrets.html

<html>
  <head>
    <title>Secrets</title>
  </head>

  <body>
    <div x-data="{ get settings() { return $store.settings.settings } }">
      <template x-if="settings">
        <div>
          <div class="section-title">Secrets Management</div>
          <div class="section-description">
            Keep credentials out of prompts and logs while still letting tools receive them when needed.
          </div>

          <div class="settings-advanced-section" x-data="{ advOpen: false }">
            <button type="button" class="settings-advanced-toggle" @click="advOpen = !advOpen">
              <x-icon class="settings-advanced-toggle-icon"
                    :style="advOpen ? 'transform:rotate(90deg)' : ''" name="chevron_right"></x-icon>
              <span>Advanced Settings</span>
            </button>

            <div class="settings-advanced-body" x-show="advOpen" x-transition.opacity>
              <div class="field field-full">
                <div class="field-label">
                  <div class="field-title">Variables</div>
                  <div class="field-description">
                    Non-sensitive <code>.env</code> values the agent may see, such as service hosts or usernames. See <a href="javascript:openModal('settings/secrets/example-vars.html')">example</a>.
                  </div>
                </div>
                <div class="field-control">
                  <textarea style="height: 16em" x-model="settings.variables"></textarea>
                </div>
              </div>

              <div class="field field-full">
                <div class="field-label">
                  <div class="field-title">Secrets</div>
                  <div class="field-description">
                    Sensitive <code>.env</code> values that are masked from the agent, chat history, and logs. Values shorter than 4 characters are not masked. See <a href="javascript:openModal('settings/secrets/example-secrets.html')">example</a>.
                  </div>
                </div>
                <div class="field-control">
                  <textarea style="height: 16em" x-model="settings.secrets"></textarea>
                </div>
              </div>
            </div>
          </div>
        </div>
      </template>
    </div>
  </body>
</html>