From a7a02144aab307595cdd1b2edfb9ebd86a045dfe Mon Sep 17 00:00:00 2001
From: "Beau Beauchamp, WebTigers" <beau@webtigers.com>
Date: Mon, 17 Aug 2026 07:45:56 -0400
Subject: [PATCH] Skills grid: readable status pills + a labeled Install button
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Status column: theme-aware pill badges legible in dark mode — Available
  (secondary-subtle), Installed (primary-subtle), On (solid success + check).
  The old text-bg-light + text-body-secondary washed out on the dark skin.
- Actions: the bare download icon becomes a proper "Install" button (icon + label).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 modules/agent/views/scripts/skills/index.phtml | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/modules/agent/views/scripts/skills/index.phtml b/modules/agent/views/scripts/skills/index.phtml
index 1e3fc3a..60ce311 100644
--- a/modules/agent/views/scripts/skills/index.phtml
+++ b/modules/agent/views/scripts/skills/index.phtml
@@ -100,10 +100,10 @@ document.addEventListener('DOMContentLoaded', function () {
             } },
             { data: 'installed', className: 'text-nowrap', render: function (t, type, row) {
                 if (type !== 'display') { return t ? 1 : 0; }
-                if (!row.installed) { return '<span class="badge text-bg-light border text-body-secondary">Available</span>'; }
+                if (!row.installed) { return '<span class="badge rounded-pill bg-secondary-subtle text-secondary-emphasis border border-secondary-subtle">Available</span>'; }
                 return row.active
-                    ? '<span class="badge text-bg-success">On</span>'
-                    : '<span class="badge text-bg-secondary">Installed</span>';
+                    ? '<span class="badge rounded-pill text-bg-success"><i class="fa-solid fa-circle-check me-1"></i>On</span>'
+                    : '<span class="badge rounded-pill bg-primary-subtle text-primary-emphasis border border-primary-subtle">Installed</span>';
             } },
             { data: null, orderable: false, searchable: false, className: 'text-end text-nowrap', render: function (t, type, row) {
                 var h = '';
@@ -114,9 +114,9 @@ document.addEventListener('DOMContentLoaded', function () {
                    + ' data-entry="' + esc(JSON.stringify({ source: row.source, sourceLabel: row.sourceLabel, name: row.name, repo: row.repo, ref: row.ref, path: row.path, url: row.url })) + '">'
                    + '<i class="fa-solid fa-file-lines"></i></button> ';
                 if (!row.installed) {
-                    h += '<button type="button" class="btn btn-sm btn-primary sk-install" title="Install" aria-label="Install"'
+                    h += '<button type="button" class="btn btn-sm btn-primary sk-install"'
                        + ' data-entry="' + esc(JSON.stringify({ source: row.source, sourceLabel: row.sourceLabel, name: row.name, repo: row.repo, ref: row.ref, path: row.path, url: row.url })) + '">'
-                       + '<i class="fa-solid fa-download"></i></button>';
+                       + '<i class="fa-solid fa-download me-1"></i>Install</button>';
                 } else {
                     h += row.active
                         ? '<button type="button" class="btn btn-sm btn-outline-warning sk-toggle" data-key="' + esc(row.key) + '" data-active="0" title="Turn off" aria-label="Turn off"><i class="fa-solid fa-pause"></i></button> '