From 2d3d9744664b8dffa1e95d5ac69eba2ee3316fca Mon Sep 17 00:00:00 2001
From: Guillem Arias Fauste <accounts@gariasf.com>
Date: Mon, 15 Jun 2026 20:11:36 +0200
Subject: [PATCH] fix(ds): canonical separators and destructive tokens in
 usage/rules tables (#2332)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The LLM usage table (Settings → AI usage) and the rules recent-runs table
used hardcoded color classes instead of design-system tokens:

- `divide-gray-100` separators — a fixed light gray with no dark-theme
  variant, so the row dividers render wrong in dark mode.
- Raw reds for failed rows (`bg-red-50`/`bg-red-950`, `text-red-500/600`).

Swap to the canonical tokens used by every other table (settings/debugs,
admin/users, …):

- divide-gray-100 -> divide-alpha-black-200 theme-dark:divide-alpha-white-200
- bg-red-50 / bg-red-950/30 -> bg-red-tint-5 / bg-red-tint-10
- text-red-* -> text-destructive (via the icon helper's color: param)

Token-only; no structural or behavior change.

Co-authored-by: Guillem Arias <guillem.arias@col.vueling.com>
---
 app/views/rules/index.html.erb              | 6 +++---
 app/views/settings/llm_usages/show.html.erb | 8 ++++----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/app/views/rules/index.html.erb b/app/views/rules/index.html.erb
index 57fc04e12..847c04204 100644
--- a/app/views/rules/index.html.erb
+++ b/app/views/rules/index.html.erb
@@ -133,9 +133,9 @@
             </th>
           </tr>
         </thead>
-        <tbody class="divide-y divide-gray-100">
+        <tbody class="divide-y divide-alpha-black-200 theme-dark:divide-alpha-white-200">
           <% @recent_runs.each do |run| %>
-            <tr class="<%= "bg-red-50 theme-dark:bg-red-950/30" if run.failed? %>">
+            <tr class="<%= "bg-red-tint-5 theme-dark:bg-red-tint-10" if run.failed? %>">
               <td class="px-4 py-3 text-sm text-primary whitespace-nowrap">
                 <%= run.executed_at.strftime("%b %d, %Y %I:%M %p") %>
               </td>
@@ -155,7 +155,7 @@
                   <% end %>
                   <% if run.failed? && run.error_message.present? %>
                     <div data-controller="tooltip" data-tooltip-content-value="<%= run.error_message %>">
-                      <%= icon("info", size: "sm", class: "text-red-500") %>
+                      <%= icon("info", size: "sm", color: "destructive") %>
                     </div>
                   <% end %>
                 </div>
diff --git a/app/views/settings/llm_usages/show.html.erb b/app/views/settings/llm_usages/show.html.erb
index 50d05f649..681aa2341 100644
--- a/app/views/settings/llm_usages/show.html.erb
+++ b/app/views/settings/llm_usages/show.html.erb
@@ -115,9 +115,9 @@
               <th class="px-4 py-3 text-right text-xs font-medium text-secondary uppercase"><%= t(".col_cost") %></th>
             </tr>
           </thead>
-          <tbody class="divide-y divide-gray-100">
+          <tbody class="divide-y divide-alpha-black-200 theme-dark:divide-alpha-white-200">
             <% @llm_usages.each do |usage| %>
-              <tr class="<%= "bg-red-50 theme-dark:bg-red-950/30" if usage.failed? %>">
+              <tr class="<%= "bg-red-tint-5 theme-dark:bg-red-tint-10" if usage.failed? %>">
                 <td class="px-4 py-3 text-sm text-primary whitespace-nowrap">
                   <%= usage.created_at.strftime("%b %d, %Y %I:%M %p") %>
                 </td>
@@ -131,8 +131,8 @@
                   <% if usage.failed? %>
                     <div data-controller="tooltip" class="inline-flex justify-end">
                       <div class="inline-flex items-center gap-1 cursor-help">
-                        <%= icon "alert-circle", class: "w-4 h-4 text-red-600 theme-dark:text-red-400" %>
-                        <span class="text-red-600 theme-dark:text-red-400 font-medium"><%= t(".failed") %></span>
+                        <%= icon "alert-circle", size: "sm", color: "destructive" %>
+                        <span class="text-destructive font-medium"><%= t(".failed") %></span>
                       </div>
                       <div role="tooltip" data-tooltip-target="tooltip" class="tooltip bg-inverse text-sm p-2 rounded-md w-64 text-left break-words whitespace-normal hidden">
                         <div class="text-inverse">