ultra_settings 2.9.1 → 2.10.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 802faa3f09b5b24f1d0cad36e7014bf84f092b48e7b81fa0b6f73798fbd071ff
-  data.tar.gz: 3dd890b1e59e1ae946edd1eda0a3b509386d6d50a30d269a437ae982b73bb7ba
+  metadata.gz: 92ad90432ce22bfa615bda0956cbd80d8f06115c925b99b0a250dc9c76be7dcf
+  data.tar.gz: 3163c675d4ef57edab7cc438f0d1553bf160dd8003b03f14c59f30b7f39d79fb
 SHA512:
-  metadata.gz: 0a1dd9d6c83b3999f8559a7b52c9c7195d106dfb5073e1f6366376a27c04a1e9bd27ef846e207b8041b7ad6b1863283959bf8c07d8cc8a90f1ef0178641e0948
-  data.tar.gz: ddef9a41588c9aa97c4d8ad0da56e4e55089ea3a9e45d8edd3dcc8e9710fda83a156fcee36d9592a096497e0e24a2c32e255c0dafb52cf6d9771258abaef4b10
+  metadata.gz: b938c8d2275dfc72319485edde8bc36d5ae866d31225201967d98c9c78873256b838f682cd8709a52ca645b713eea578820baaf96cf8ebb8242debcdb355a9a0
+  data.tar.gz: e689fd1da5cc1a647475a61efb7586544ae6ae383c9bd1d057c738e7067f055341ab8e83c7f3b5103d0b49dd0700972d45ad4cbea9be2873b28611c68676d90b

data/CHANGELOG.md

@@ -4,6 +4,42 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## 2.10.1
+
+### Added
+
+- Added a button to the web UI for copying the current value of a setting to the clipboard. The button is disabled for secret settings and is not shown for settings that have no value.
+- Added `UltraSettings.with_runtime_settings_reloaded` for rendering several embedded views with a single runtime settings reload.
+- Added a toggle switch to the web UI for showing and hiding the YAML keys of a configuration. The switch is only shown when the YAML file does not exist, and the keys are hidden by default in that case since they are not used by the application.
+
+### Changed
+
+- The web UI now fully reloads the runtime settings cache before rendering instead of requesting an incremental refresh. Previously a value changed from the UI could still render as its old value after the page reloaded, since the incremental refresh would silently do nothing if another thread was already refreshing, if the cache had never been loaded, or if the change had been saved by a different process. The reload is performed on any runtime settings object that responds to `load_settings` — including wrappers around `SuperSettings` — rather than only on `SuperSettings` itself, and an error raised while reloading is now reported to stderr instead of failing the page.
+- The reload is now performed by `UltraSettings::ApplicationView#render` and `UltraSettings::ConfigurationView#render` rather than only by the standalone Rack app, so views embedded in a host application also display current values. Rendering a page with many configurations through `ApplicationView` still only reloads once; a page that embeds several `ConfigurationView` instances directly can wrap them in `UltraSettings.with_runtime_settings_reloaded` to reload once for the page rather than once per view.
+
+### Fixed
+
+- YAML configuration files with anchors and aliases (e.g. `<<: *defaults`) and unquoted date or time values now load correctly on Ruby 3.1+ where `YAML.load` is safe by default.
+- Fixed a race condition where concurrent requests to the web UI could render with each other's locale because per-request state was stored on a shared view instance.
+- Fixed a race condition where the web UI translation cache could return a partially loaded set of locales to concurrent requests while the cache was being populated.
+- The web UI now recognizes `RAILS_ENV` and `APP_ENV` in addition to `RACK_ENV` when determining if the app is running in development mode. Previously a Rails app running in production without `RACK_ENV` set would re-read templates and translations from disk on every request. The check is shared by the template cache, the translation cache, and the Rack app's view cache so that they cannot disagree.
+- Fixed a memory leak where `Configuration#override!` retained an entry for every thread that had ever used it.
+- Fixed `AuditDataSources` treating a `false` YAML value as missing and falling back to the field default.
+- Static field memoization and configuration subclass tracking are now fully synchronized for Ruby runtimes without a global VM lock (JRuby, TruffleRuby).
+- Web UI asset, template, translation, and YAML configuration files are now always read as UTF-8 so the gem works when the default external encoding is not UTF-8 (e.g. when `LANG` is not set).
+- The web UI no longer raises an error when determining relative configuration file paths if the YAML configuration directory does not exist or is not set.
+- The web UI no longer displays configuration file paths with a leading relative path prefix (e.g. `../app/config/settings.yml`). Paths are now shown relative to the working directory or to the YAML configuration directory, and the absolute path is shown if the file is not inside either one.
+
+## 2.10.0
+
+### Added
+
+- Added `dark_mode_selector` option to `UltraSettings::Application` to allow the web UI to automatically switch to dark mode based on a CSS selector in the host application.
+
+### Fixed
+
+- Fixed configurations showing up multiple times in the web UI when the configuration class is reloaded in Rails development mode.
+
 ## 2.9.1
 
 ### Fixed

data/README.md

@@ -171,6 +171,8 @@ UltraSettings.runtime_settings = RedisRuntimeSettings.new
 
 The runtime settings implementation may also define an `array` method that takes a single parameter to return an array value. If this method is not implemented, then array values must be returned as single line CSV strings.
 
+The runtime settings implementation may also define a `load_settings` method. If it does, the web UI will call it before rendering so that values changed elsewhere are displayed immediately instead of whenever the implementation's own cache next refreshes. It should reload synchronously and return once the values are current. Errors raised from it are logged to stderr and do not prevent the page from rendering.
+
 > [!TIP]
 > If your runtime settings implementation does not securely store values, you should set `UltraSettings.runtime_settings_secure` to `false`. This will disable runtime settings on fields marked as secret to prevent leaking sensitive information.
 
@@ -391,6 +393,8 @@ end
 
 UltraSettings provides a web UI via a mountable Rack application. You can use this to view the settings values and documentation. The UI will not display the value of any setting marked as secret.
 
+Each setting has a button for copying its current value to the clipboard. The copied text is the raw value rather than the quoted form shown on the page (arrays are copied as one entry per line). The button is disabled for secret settings since their values are never sent to the browser.
+
 ![Web UI](assets/web_ui.png)
 
 It is strongly recommended to secure the web UI with your application's authorization framework so that it is only visible to internal admin users.
@@ -445,6 +449,15 @@ You'll also need to include the CSS for the configuration view on your page.
 </head>
 ```
 
+Each view reloads the runtime settings before rendering so that it displays current values. If you embed more than one view on a page, wrap them in `UltraSettings.with_runtime_settings_reloaded` so that the settings are only reloaded once for the whole page instead of once per view.
+
+```erb
+<% UltraSettings.with_runtime_settings_reloaded do %>
+  <%= UltraSettings::ConfigurationView.new(MyServiceConfiguration.instance).render %>
+  <%= UltraSettings::ConfigurationView.new(OtherServiceConfiguration.instance).render %>
+<% end %>
+```
+
 #### Customizing The Web UI
 
 You can specify the color scheme by setting by providing the `color_scheme` option to the `UltraSettings::ApplicationView` constructor. The default color scheme is `:light`. You can also set the scheme to `:dark` or `:system`.
@@ -453,6 +466,12 @@ You can specify the color scheme by setting by providing the `color_scheme` opti
 UltraSettings::ApplicationView.new(color_scheme: :dark)
 ```
 
+If your application already controls dark mode with a CSS selector (for example, a `data` attribute on the `<html>` element), you can pass a `dark_mode_selector` instead of a fixed color scheme. The settings UI will automatically switch to dark mode whenever the selector matches:
+
+```ruby
+UltraSettings::ApplicationView.new(dark_mode_selector: "[data-theme=dark]")
+```
+
 You can specify the language to render the application in with the `locale` option to the `UltraSettings::ApplicationView` constructor. The default language is English but it can be changed to any language that has a corresponding JSON file in the `app/locales` directory.
 
 ```ruby
@@ -476,6 +495,11 @@ All authorization is handled by the SuperSettings API — the same permissions t
 > [!IMPORTANT]
 > You will need to have the SuperSettings API mounted and properly locked down with authentication. If the API is not accessible, then the edit buttons will not be shown. Check the browser console for any errors if you expect the buttons to be shown but they are not appearing.
 
+`SuperSettings` responds to `load_settings`, so the web UI reloads the SuperSettings cache before each render and a setting saved from the edit panel is displayed as soon as the page reloads.
+
+> [!NOTE]
+> In a Rails application, `SuperSettings::Context::RackMiddleware` pins each setting's value for the remainder of a request once it has been read. This does not affect the standalone Rack app since the reload happens before any value is read. However, if you embed `UltraSettings::ApplicationView` in a page that already read a runtime setting earlier in the same request, that particular setting will still render with its pre-reload value.
+
 ##### Embedding with Edit Support
 
 When embedding the settings view using `UltraSettings::ApplicationView`, you can pass the `super_settings_api_path` option to enable the inline editing UI:

data/VERSION

@@ -1 +1 @@
-2.9.1
+2.10.1

data/app/_config_description.html.erb

@@ -19,8 +19,17 @@
         <span class="ultra-settings-warn">
           <%= warning_icon(13) %>
           <code><%= html_escape(relative_path(configuration.class.configuration_file)) %></code>
-          <%= t('config.file_not_found') %>
+          &bull; <%= t('config.file_not_found') %>
         </span>
+
+        <button type="button"
+                class="ultra-settings-yaml-toggle"
+                onclick="<%= html_escape(toggle_yaml_keys_script) %>"
+                role="switch"
+                aria-checked="false">
+          <span class="ultra-settings-yaml-toggle-switch" aria-hidden="true"></span>
+          <%= t('config.show_yaml_keys') %>
+        </button>
       <% end %>
     </div>
   <% end %>

data/app/_data_source.html.erb

@@ -2,7 +2,7 @@
 <% source_label = source_chip_label(source) %>
 <% chip_class = source_chip_class(source) %>
 <% source_name = source_key_name(field, source) %>
-<div class="ultra-settings-source-row<%= ' active' if current_source == source %>">
+<div class="ultra-settings-source-row<%= ' active' if current_source == source %>" data-source="<%= html_escape(source) %>">
   <span class="ultra-settings-source-chip <%= chip_class %>"><%= source_label %></span>
 
   <% if source_name %>
@@ -46,7 +46,7 @@
   <% end %>
 
   <% if current_source == source %>
-    <span class="ultra-settings-source-badge ultra-settings-sb-active"><%= t('source.active') %></span>
+    <span class="ultra-settings-source-badge ultra-settings-sb-active">&#9679; <%= t('source.active') %></span>
   <% elsif source_overridden_by(source, current_source) && !source_value.nil? %>
     <span class="ultra-settings-source-badge ultra-settings-sb-overridden"><%= t('source.overridden') %></span>
   <% end %>

data/app/application.css

@@ -53,7 +53,7 @@
   width: 100%;
   padding: 10px 38px 10px 38px;
   background: var(--bg-card);
-  border: 1px solid var(--border-card);
+  border: 1px solid var(--border-input);
   border-radius: 8px;
   color: var(--text-primary);
   font-size: 0.875rem;
@@ -130,7 +130,7 @@
   border-radius: 8px;
   cursor: pointer;
   user-select: none;
-  border: 1px solid var(--border-card);
+  border: 1px solid var(--border-input);
   background: var(--bg-card);
   color: var(--text-secondary);
   font-size: 0.75rem;
@@ -181,7 +181,7 @@
   width: 12px;
   height: 12px;
   color: inherit;
-  opacity: 0.5;
+  opacity: 0.75;
   transition: transform 0.15s ease, opacity 0.15s ease;
 }
 
@@ -196,7 +196,7 @@
 }
 
 .ultra-settings-language-menu[open] .ultra-settings-language-trigger-caret {
-  opacity: 0.8;
+  opacity: 1;
   transform: rotate(180deg);
 }
 
@@ -416,6 +416,7 @@
 .ultra-settings-config-file {
   display: inline-flex;
   align-items: center;
+  flex-wrap: wrap;
   gap: 6px;
   font-size: 0.8125rem;
   color: var(--text-tertiary);
@@ -435,7 +436,52 @@
   border: 1px solid var(--border-light);
 }
 
-.ultra-settings-config-file .ultra-settings-warn { color: #dc2626; font-size: 0.8125rem; }
+.ultra-settings-config-file .ultra-settings-warn { color: var(--warn-color); font-size: 0.8125rem; }
+
+.ultra-settings-yaml-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-family: var(--font-ui);
+  font-size: 0.8125rem;
+  color: var(--text-tertiary);
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: color 0.2s ease;
+}
+
+.ultra-settings-yaml-toggle:hover { color: var(--text-primary); }
+
+/* Switch showing whether the keys are visible. */
+.ultra-settings-yaml-toggle-switch {
+  position: relative;
+  width: 26px;
+  height: 14px;
+  flex-shrink: 0;
+  border-radius: 7px;
+  background: var(--accent);
+  transition: background 0.15s ease;
+}
+
+.ultra-settings-yaml-toggle-switch::before {
+  content: "";
+  position: absolute;
+  top: 2px;
+  inset-inline-start: 14px;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: var(--btn-primary-text);
+  transition: inset-inline-start 0.15s ease;
+}
+
+.ultra-settings-yaml-hidden .ultra-settings-yaml-toggle-switch { background: var(--border-input); }
+.ultra-settings-yaml-hidden .ultra-settings-yaml-toggle-switch::before { inset-inline-start: 2px; }
+
+.ultra-settings-yaml-hidden .ultra-settings-source-row[data-source="yaml"] { display: none; }
 
 /* ══════════════════════════════════════════
    FIELD CARDS
@@ -535,6 +581,10 @@
   margin-inline-start: auto;
   flex-shrink: 0;
   max-width: 50%;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
 }
 
 .ultra-settings-field-value {
@@ -547,6 +597,7 @@
   border-radius: 6px;
   border: 1px solid var(--border-light);
   max-width: 320px;
+  min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -565,6 +616,52 @@
   font-style: italic;
 }
 
+/* Copy value button */
+.ultra-settings-copy-btn {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  padding: 0;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  color: var(--text-tertiary);
+  cursor: pointer;
+  transition: color 0.12s ease, background 0.12s ease, border-color 0.12s ease;
+}
+
+.ultra-settings-copy-btn:hover:not(:disabled) {
+  color: var(--accent);
+  background: var(--accent-light);
+  border-color: var(--accent);
+}
+
+.ultra-settings-copy-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.ultra-settings-copy-btn .ultra-settings-copy-check { display: none; }
+
+.ultra-settings-copy-btn.copied {
+  color: var(--active-color);
+  border-color: transparent;
+  background: var(--active-bg);
+}
+
+.ultra-settings-copy-btn.copied .ultra-settings-copy-icon { display: none; }
+.ultra-settings-copy-btn.copied .ultra-settings-copy-check { display: inline; }
+
+/* Stands in for the copy button on rows that have no value to copy. */
+.ultra-settings-copy-placeholder {
+  flex-shrink: 0;
+  width: 26px;
+  height: 26px;
+}
+
 /* Description */
 .ultra-settings-field-description {
   padding: 0 18px 14px 18px;
@@ -653,14 +750,13 @@
   color: var(--accent);
   text-decoration: none;
   margin-inline-start: 0.5rem;
-  opacity: 0.7;
-  transition: opacity 0.2s ease;
+  transition: color 0.2s ease;
   display: inline-flex;
   align-items: center;
 }
 
 .ultra-settings-edit-link:hover {
-  opacity: 1;
+  color: var(--text-primary);
 }
 
 .ultra-settings-edit-link svg { width: 13px; height: 13px; }
@@ -714,7 +810,7 @@
 .ultra-settings-dp-close {
   width: 32px; height: 32px;
   border-radius: 7px;
-  border: 1px solid var(--border-light);
+  border: 1px solid var(--border-input);
   background: transparent;
   cursor: pointer;
   display: flex;
@@ -800,7 +896,7 @@
 .ultra-settings-dialog-close {
   width: 32px; height: 32px;
   border-radius: 7px;
-  border: 1px solid var(--border-light);
+  border: 1px solid var(--border-input);
   background: transparent;
   cursor: pointer;
   display: flex;
@@ -855,7 +951,7 @@
 
 .ultra-settings-ss-edit-btn:hover {
   background: var(--accent);
-  color: #fff;
+  color: var(--btn-primary-text, #fff);
 }
 
 .ultra-settings-ss-panel-bg {
@@ -901,12 +997,10 @@
   font-size: 0.75rem;
   color: var(--accent);
   text-decoration: none;
-  transition: opacity 0.15s;
 }
 
 .ultra-settings-ss-external-link:hover {
   text-decoration: underline;
-  opacity: 0.85;
 }
 
 .ultra-settings-ss-loading {
@@ -943,7 +1037,7 @@
   font-family: var(--font-mono);
   color: var(--text-primary);
   background: var(--bg-code);
-  border: 1px solid var(--border-light);
+  border: 1px solid var(--border-input);
   border-radius: 6px;
   transition: border-color 0.15s;
   box-sizing: border-box;
@@ -964,7 +1058,7 @@ select.ultra-settings-ss-input {
   -webkit-appearance: none;
   appearance: none;
   padding-inline-end: 28px;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E");
+  background-image: var(--select-arrow);
   background-repeat: no-repeat;
   background-position: right 10px center;
 }
@@ -1018,10 +1112,10 @@ input[type="number"].ultra-settings-ss-input::-webkit-outer-spin-button {
 
 .ultra-settings-ss-errors {
   padding: 10px 12px;
-  background: rgba(220,53,69,0.1);
-  border: 1px solid rgba(220,53,69,0.3);
+  background: var(--danger-bg);
+  border: 1px solid var(--danger-border);
   border-radius: 6px;
-  color: #dc3545;
+  color: var(--danger-text);
   font-size: 0.8125rem;
   line-height: 1.4;
 }
@@ -1044,7 +1138,7 @@ input[type="number"].ultra-settings-ss-input::-webkit-outer-spin-button {
   font-size: 0.8125rem;
   font-weight: 600;
   border-radius: 6px;
-  border: 1px solid var(--border-light);
+  border: 1px solid var(--border-input);
   cursor: pointer;
   transition: background 0.15s, border-color 0.15s, color 0.15s;
   font-family: var(--font-ui);
@@ -1052,16 +1146,17 @@ input[type="number"].ultra-settings-ss-input::-webkit-outer-spin-button {
 
 .ultra-settings-ss-btn-cancel {
   background: transparent;
-  color: var(--text-secondary);
+  color: var(--btn-secondary-text, var(--text-secondary));
 }
 
 .ultra-settings-ss-btn-cancel:hover {
   background: var(--bg-code);
+  color: var(--btn-secondary-hover-text, var(--text-primary));
 }
 
 .ultra-settings-ss-btn-save {
   background: var(--accent);
-  color: #fff;
+  color: var(--btn-primary-text, #fff);
   border-color: var(--accent);
 }
 
@@ -1095,12 +1190,10 @@ input[type="number"].ultra-settings-ss-input::-webkit-outer-spin-button {
   color: var(--accent);
   text-decoration: none;
   cursor: pointer;
-  transition: opacity 0.15s;
 }
 
 .ultra-settings-ss-history-link:hover {
   text-decoration: underline;
-  opacity: 0.85;
 }
 
 .ultra-settings-ss-history {
@@ -1152,9 +1245,9 @@ input[type="number"].ultra-settings-ss-input::-webkit-outer-spin-button {
 }
 
 .ultra-settings-ss-history-entry-badge.deleted {
-  background: rgba(220,53,69,0.1);
-  color: #dc3545;
-  border: 1px solid rgba(220,53,69,0.3);
+  background: var(--danger-bg);
+  color: var(--danger-text);
+  border: 1px solid var(--danger-border);
 }
 
 .ultra-settings-ss-history-entry-badge.created {

data/app/application_vars.css.erb

@@ -13,40 +13,49 @@
     /* Borders */
     --border-light: #e2e5ea;
     --border-card: #dfe2e8;
+    /* Interactive control borders — 3:1 against every surface (WCAG 1.4.11) */
+    --border-input: #7e8492;
 
     /* Text */
     --text-primary: #111827;
     --text-secondary: #4b5563;
-    --text-tertiary: #9ca3af;
+    --text-tertiary: #646b7a;
 
     /* Accent — teal */
-    --accent: #0d9488;
-    --accent-light: rgba(13, 148, 136, 0.06);
-    --accent-lighter: rgba(13, 148, 136, 0.03);
-    --accent-glow: rgba(13, 148, 136, 0.12);
+    --accent: #0f766e;
+    --accent-light: rgba(15, 118, 110, 0.06);
+    --accent-lighter: rgba(15, 118, 110, 0.03);
+    --accent-glow: rgba(15, 118, 110, 0.12);
+    --btn-primary-text: #ffffff;
+    --btn-secondary-text: #4b5563;
+    --btn-secondary-hover-text: #111827;
 
     /* Source palette */
     --src-env: #2563eb;
     --src-env-bg: #eff6ff;
     --src-env-border: #bfdbfe;
-    --src-setting: #0d9488;
+    --src-setting: #0f766e;
     --src-setting-bg: #f0fdfa;
     --src-setting-border: #99f6e4;
     --src-yaml: #7c3aed;
     --src-yaml-bg: #f5f3ff;
     --src-yaml-border: #ddd6fe;
-    --src-default: #6b7280;
+    --src-default: #5f6673;
     --src-default-bg: #f3f4f6;
     --src-default-border: #d1d5db;
 
     /* Status */
-    --active-color: #059669;
-    --active-bg: rgba(5, 150, 105, 0.05);
+    --active-color: #047857;
+    --active-bg: rgba(4, 120, 87, 0.05);
     --overridden-color: #6b7280;
+    --warn-color: #8a6508;
+    --danger-text: #b3261e;
+    --danger-bg: rgba(179, 38, 30, 0.10);
+    --danger-border: rgba(179, 38, 30, 0.35);
 
     /* Badges */
     --badge-secret-bg: #fef2f2;
-    --badge-secret-text: #dc2626;
+    --badge-secret-text: #b91c1c;
     --badge-secret-border: #fecaca;
     --badge-static-bg: #f0f2f5;
     --badge-static-text: #4b5563;
@@ -68,13 +77,18 @@
 
     /* Source row divider */
     --border-source-row: rgba(0,0,0,0.025);
+
+    /* Select dropdown caret (must be 3:1 against --bg-code) */
+    --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%237e8492'/%3E%3C/svg%3E");
   }
 <% end %>
 
 <% if color_scheme == :system %>
   @media (prefers-color-scheme: dark) {
+<% elsif dark_mode_selector %>
+  <%= dark_mode_selector %> {
 <% end %>
-<% if color_scheme == :system || color_scheme == :dark %>
+<% if color_scheme == :system || color_scheme == :dark || dark_mode_selector %>
   .ultra-settings, .ultra-settings-block {
     --font-ui: system-ui, -apple-system, sans-serif;
     --font-mono: "SF Mono", Menlo, Consolas, monospace;
@@ -89,17 +103,22 @@
     /* Borders */
     --border-light: #2a2d3a;
     --border-card: #252836;
+    /* Interactive control borders — 3:1 against every surface (WCAG 1.4.11) */
+    --border-input: #666c86;
 
     /* Text */
     --text-primary: #e4e6f0;
     --text-secondary: #9ba1b5;
-    --text-tertiary: #5c6178;
+    --text-tertiary: #8f95ad;
 
     /* Accent — teal */
     --accent: #14b8a6;
     --accent-light: rgba(20, 184, 166, 0.10);
     --accent-lighter: rgba(20, 184, 166, 0.05);
     --accent-glow: rgba(20, 184, 166, 0.15);
+    --btn-primary-text: #04211d;
+    --btn-secondary-text: #c8cede;
+    --btn-secondary-hover-text: #e8ecf8;
 
     /* Source palette */
     --src-env: #60a5fa;
@@ -118,7 +137,11 @@
     /* Status */
     --active-color: #34d399;
     --active-bg: rgba(52, 211, 153, 0.08);
-    --overridden-color: #6b7280;
+    --overridden-color: #8f95ad;
+    --warn-color: #d6ba1d;
+    --danger-text: #f87171;
+    --danger-bg: rgba(248, 113, 113, 0.12);
+    --danger-border: rgba(248, 113, 113, 0.30);
 
     /* Badges */
     --badge-secret-bg: rgba(220, 38, 38, 0.12);
@@ -144,8 +167,11 @@
 
     /* Source row divider */
     --border-source-row: rgba(255,255,255,0.04);
+
+    /* Select dropdown caret (must be 3:1 against --bg-code) */
+    --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238f95ad'/%3E%3C/svg%3E");
   }
 <% end %>
-<% if color_scheme == :system %>
+<% if color_scheme == :system || dark_mode_selector %>
   }
 <% end %>

data/app/configuration.html.erb

@@ -1,4 +1,4 @@
-<div class="ultra-settings-block">
+<div class="ultra-settings-block<%= " ultra-settings-yaml-hidden" if hide_yaml_keys?(configuration) %>">
   <%= render_partial "config_description", configuration: configuration %>
 
   <div class="ultra-settings-fields">
@@ -61,6 +61,24 @@
                     tabindex="0"
                     role="button"><%= html_escape(display_value(configuration[field.name])) %></code>
             <% end %>
+
+            <% if field.secret? %>
+              <button type="button"
+                      class="ultra-settings-copy-btn"
+                      disabled
+                      title="<%= t('field.copy_disabled') %>"
+                      aria-label="<%= t('field.copy_disabled') %>"><%= copy_icon %><%= check_icon %></button>
+            <% elsif configuration[field.name].nil? %>
+              <%# There is nothing to copy, but the placeholder keeps the values aligned with the other rows. %>
+              <span class="ultra-settings-copy-placeholder" aria-hidden="true"></span>
+            <% else %>
+              <button type="button"
+                      class="ultra-settings-copy-btn"
+                      onclick="<%= html_escape(copy_value_script) %>"
+                      data-copy-value="<%= html_escape(copy_value(configuration[field.name])) %>"
+                      title="<%= t('field.copy') %>"
+                      aria-label="<%= t('field.copy') %>"><%= copy_icon %><%= check_icon %></button>
+            <% end %>
           </div>
         </div>