From d707fe7bcf19a9aae813c66d224875cff18ff87f Mon Sep 17 00:00:00 2001
From: Alessandro <155005371+3clyp50@users.noreply.github.com>
Date: Tue, 23 Jun 2026 17:36:27 +0200
Subject: [PATCH] Restore shared text button styling

Reintroduce the shared .text-button primitive in WebUI button CSS so model-config preset controls no longer depend on the chat composer being mounted first.

Document the shared compact text-action contract and add a focused regression covering Model Presets and Model Configuration text-button usage.
---
 tests/test_model_config_ui.py | 22 +++++++++++++++
 webui/css/AGENTS.md           |  1 +
 webui/css/buttons.css         | 50 +++++++++++++++++++++++++++++++++++
 3 files changed, 73 insertions(+)
 create mode 100644 tests/test_model_config_ui.py

diff --git a/tests/test_model_config_ui.py b/tests/test_model_config_ui.py
new file mode 100644
index 000000000..6a12713e2
--- /dev/null
+++ b/tests/test_model_config_ui.py
@@ -0,0 +1,22 @@
+from pathlib import Path
+
+
+PROJECT_ROOT = Path(__file__).resolve().parents[1]
+
+
+def read(*parts: str) -> str:
+    return PROJECT_ROOT.joinpath(*parts).read_text(encoding="utf-8")
+
+
+def test_model_config_text_buttons_have_shared_primitive() -> None:
+    buttons_css = read("webui", "css", "buttons.css")
+    preset_modal = read("plugins", "_model_config", "webui", "main.html")
+    config_modal = read("plugins", "_model_config", "webui", "config.html")
+
+    assert ".text-button {" in buttons_css
+    assert "appearance: none;" in buttons_css
+    assert ".text-button:hover:not(:disabled)" in buttons_css
+    assert ".text-button .material-symbols-outlined" in buttons_css
+    assert 'class="text-button preset-add-btn"' in preset_modal
+    assert 'class="text-button preset-delete-btn"' in preset_modal
+    assert 'class="text-button"' in config_modal
diff --git a/webui/css/AGENTS.md b/webui/css/AGENTS.md
index b6bf4b1d6..50ec698a2 100644
--- a/webui/css/AGENTS.md
+++ b/webui/css/AGENTS.md
@@ -19,6 +19,7 @@
 - Avoid broad selectors that unexpectedly restyle plugin UI or unrelated components.
 - Keep layout rules responsive and verify text does not overflow fixed controls.
 - Shared modal buttons use `btn btn-ok` for positive actions and `btn btn-cancel` for dismissive or negative actions.
+- Shared compact text actions use `.text-button`; component-local styles may adjust layout or sizing but must not be the only definition of the primitive.
 - Modal footer action order is positive action first, dismissive or negative action second.
 - Modal footers use `.modal-footer` plus `data-modal-footer`; do not redefine `.btn`, `.modal-footer`, `.modal-inner`, or `.modal-scroll` inside components.
 - Shared modal sizing keeps `.modal-inner` centered with `width: 90%`, `max-width: 960px`, and `max-height: 90vh`.
diff --git a/webui/css/buttons.css b/webui/css/buttons.css
index 89502e097..b609ccfea 100644
--- a/webui/css/buttons.css
+++ b/webui/css/buttons.css
@@ -21,6 +21,56 @@
   box-sizing: border-box;
 }
 
+.text-button {
+  appearance: none;
+  background-color: transparent;
+  border: none;
+  border-radius: 5px;
+  color: var(--color-text);
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-xs);
+  font-family: "Rubik", Arial, Helvetica, sans-serif;
+  font-size: 0.78rem;
+  line-height: 1.2;
+  opacity: 0.82;
+  padding: 6px var(--spacing-sm);
+  transition: background-color 0.16s ease, color 0.16s ease, opacity 0.16s ease;
+}
+
+.text-button:hover:not(:disabled) {
+  opacity: 1;
+  background-color: var(--color-background-hover);
+}
+
+.text-button:active:not(:disabled) {
+  opacity: 0.5;
+}
+
+.text-button:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.text-button .material-symbols-outlined,
+.text-button .material-icons-outlined {
+  font-size: 1rem;
+  line-height: 1;
+  flex-shrink: 0;
+}
+
+.text-button svg {
+  width: 14px;
+  height: 14px;
+  flex-shrink: 0;
+}
+
+.text-button p {
+  margin-block: 0;
+}
+
 .button.confirm {
   background: var(--color-highlight);
   color: #fff;