ruby_llm-agents 1.3.3 → 2.0.0

data/app/views/ruby_llm/agents/tenants/_form.html.erb

@@ -1,150 +1,140 @@
 <%# Form partial for tenant budget editing %>
-<%= form_with model: tenant, url: tenant_path(tenant), method: :patch, class: "space-y-6" do |f| %>
+<%= form_with model: tenant, url: tenant_path(tenant), method: :patch, class: "space-y-8" do |f| %>
   <% if tenant.errors.any? %>
-    <div class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4">
-      <div class="flex items-center">
-        <svg class="w-5 h-5 text-red-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-        </svg>
-        <h3 class="text-sm font-medium text-red-800 dark:text-red-200">
-          Please fix the following errors:
-        </h3>
-      </div>
-      <ul class="mt-2 ml-7 list-disc list-inside text-sm text-red-700 dark:text-red-300">
-        <% tenant.errors.full_messages.each do |message| %>
-          <li><%= message %></li>
-        <% end %>
-      </ul>
+    <div class="font-mono text-xs text-red-500 dark:text-red-400 space-y-1 py-2">
+      <% tenant.errors.full_messages.each do |message| %>
+        <div>· <%= message %></div>
+      <% end %>
     </div>
   <% end %>
 
-  <!-- Basic Information -->
-  <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
-    <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">Basic Information</h3>
+  <!-- ── basic info ──────────────────── -->
+  <div>
+    <div class="flex items-center gap-3 mb-4">
+      <span class="text-[10px] font-medium text-gray-400 dark:text-gray-600 uppercase tracking-widest font-mono">basic info</span>
+      <div class="flex-1 border-t border-gray-200 dark:border-gray-800"></div>
+    </div>
 
     <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
       <div>
-        <%= f.label :name, "Display Name", class: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1" %>
+        <%= f.label :name, "display name", class: "block text-xs font-mono text-gray-500 dark:text-gray-400 mb-1" %>
         <%= f.text_field :name,
-            class: "w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-gray-100",
+            class: "w-full px-3 py-2 bg-transparent border border-gray-200 dark:border-gray-800 rounded text-sm font-mono text-gray-900 dark:text-gray-100 focus:ring-1 focus:ring-gray-400 dark:focus:ring-gray-600 focus:border-gray-400 dark:focus:border-gray-600 placeholder-gray-400 dark:placeholder-gray-600",
             placeholder: "e.g., Acme Corporation" %>
-        <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
-          Human-readable name for this tenant. Falls back to tenant ID if not set.
+        <p class="mt-1 text-[10px] font-mono text-gray-400 dark:text-gray-600">
+          Falls back to tenant ID if not set.
         </p>
       </div>
 
       <div>
-        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Tenant ID</label>
-        <p class="w-full px-3 py-2 bg-gray-50 dark:bg-gray-700/50 border border-gray-200 dark:border-gray-600 rounded-md text-gray-900 dark:text-gray-100 font-mono text-sm">
+        <label class="block text-xs font-mono text-gray-500 dark:text-gray-400 mb-1">tenant id</label>
+        <p class="w-full px-3 py-2 bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded text-sm font-mono text-gray-500 dark:text-gray-400">
           <%= tenant.tenant_id %>
         </p>
-        <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
+        <p class="mt-1 text-[10px] font-mono text-gray-400 dark:text-gray-600">
           System identifier. Cannot be changed.
         </p>
       </div>
     </div>
   </div>
 
-  <!-- Budget Limits (USD) -->
-  <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
-    <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">Budget Limits (USD)</h3>
+  <!-- ── budget limits ──────────────────── -->
+  <div>
+    <div class="flex items-center gap-3 mb-4">
+      <span class="text-[10px] font-medium text-gray-400 dark:text-gray-600 uppercase tracking-widest font-mono">budget limits (usd)</span>
+      <div class="flex-1 border-t border-gray-200 dark:border-gray-800"></div>
+    </div>
 
     <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
       <div>
-        <%= f.label :daily_limit, "Daily Limit", class: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1" %>
+        <%= f.label :daily_limit, "daily limit", class: "block text-xs font-mono text-gray-500 dark:text-gray-400 mb-1" %>
         <div class="relative">
-          <span class="absolute inset-y-0 left-0 pl-3 flex items-center text-gray-500 dark:text-gray-400">$</span>
+          <span class="absolute inset-y-0 left-0 pl-3 flex items-center text-gray-400 dark:text-gray-600 font-mono text-sm">$</span>
           <%= f.number_field :daily_limit,
-              class: "w-full pl-7 pr-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-gray-100",
+              class: "w-full pl-7 pr-3 py-2 bg-transparent border border-gray-200 dark:border-gray-800 rounded text-sm font-mono text-gray-900 dark:text-gray-100 focus:ring-1 focus:ring-gray-400 dark:focus:ring-gray-600 focus:border-gray-400 dark:focus:border-gray-600 placeholder-gray-400 dark:placeholder-gray-600",
               step: "0.01",
               min: "0",
-              placeholder: "e.g., 50.00" %>
+              placeholder: "50.00" %>
         </div>
-        <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
-          Maximum daily spend in USD. Leave blank for no limit.
+        <p class="mt-1 text-[10px] font-mono text-gray-400 dark:text-gray-600">
+          Leave blank for no limit.
         </p>
       </div>
 
       <div>
-        <%= f.label :monthly_limit, "Monthly Limit", class: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1" %>
+        <%= f.label :monthly_limit, "monthly limit", class: "block text-xs font-mono text-gray-500 dark:text-gray-400 mb-1" %>
         <div class="relative">
-          <span class="absolute inset-y-0 left-0 pl-3 flex items-center text-gray-500 dark:text-gray-400">$</span>
+          <span class="absolute inset-y-0 left-0 pl-3 flex items-center text-gray-400 dark:text-gray-600 font-mono text-sm">$</span>
           <%= f.number_field :monthly_limit,
-              class: "w-full pl-7 pr-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-gray-100",
+              class: "w-full pl-7 pr-3 py-2 bg-transparent border border-gray-200 dark:border-gray-800 rounded text-sm font-mono text-gray-900 dark:text-gray-100 focus:ring-1 focus:ring-gray-400 dark:focus:ring-gray-600 focus:border-gray-400 dark:focus:border-gray-600 placeholder-gray-400 dark:placeholder-gray-600",
               step: "0.01",
               min: "0",
-              placeholder: "e.g., 500.00" %>
+              placeholder: "500.00" %>
         </div>
-        <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
-          Maximum monthly spend in USD. Leave blank for no limit.
+        <p class="mt-1 text-[10px] font-mono text-gray-400 dark:text-gray-600">
+          Leave blank for no limit.
         </p>
       </div>
     </div>
   </div>
 
-  <!-- Token Limits -->
-  <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
-    <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">Token Limits</h3>
+  <!-- ── token limits ──────────────────── -->
+  <div>
+    <div class="flex items-center gap-3 mb-4">
+      <span class="text-[10px] font-medium text-gray-400 dark:text-gray-600 uppercase tracking-widest font-mono">token limits</span>
+      <div class="flex-1 border-t border-gray-200 dark:border-gray-800"></div>
+    </div>
 
     <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
       <div>
-        <%= f.label :daily_token_limit, "Daily Token Limit", class: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1" %>
+        <%= f.label :daily_token_limit, "daily token limit", class: "block text-xs font-mono text-gray-500 dark:text-gray-400 mb-1" %>
         <%= f.number_field :daily_token_limit,
-            class: "w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-gray-100",
+            class: "w-full px-3 py-2 bg-transparent border border-gray-200 dark:border-gray-800 rounded text-sm font-mono text-gray-900 dark:text-gray-100 focus:ring-1 focus:ring-gray-400 dark:focus:ring-gray-600 focus:border-gray-400 dark:focus:border-gray-600 placeholder-gray-400 dark:placeholder-gray-600",
             step: "1",
             min: "0",
-            placeholder: "e.g., 1000000" %>
-        <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
-          Maximum daily token usage. Leave blank for no limit.
+            placeholder: "1000000" %>
+        <p class="mt-1 text-[10px] font-mono text-gray-400 dark:text-gray-600">
+          Leave blank for no limit.
         </p>
       </div>
 
       <div>
-        <%= f.label :monthly_token_limit, "Monthly Token Limit", class: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1" %>
+        <%= f.label :monthly_token_limit, "monthly token limit", class: "block text-xs font-mono text-gray-500 dark:text-gray-400 mb-1" %>
         <%= f.number_field :monthly_token_limit,
-            class: "w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-gray-100",
+            class: "w-full px-3 py-2 bg-transparent border border-gray-200 dark:border-gray-800 rounded text-sm font-mono text-gray-900 dark:text-gray-100 focus:ring-1 focus:ring-gray-400 dark:focus:ring-gray-600 focus:border-gray-400 dark:focus:border-gray-600 placeholder-gray-400 dark:placeholder-gray-600",
             step: "1",
             min: "0",
-            placeholder: "e.g., 10000000" %>
-        <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
-          Maximum monthly token usage. Leave blank for no limit.
+            placeholder: "10000000" %>
+        <p class="mt-1 text-[10px] font-mono text-gray-400 dark:text-gray-600">
+          Leave blank for no limit.
         </p>
       </div>
     </div>
   </div>
 
-  <!-- Enforcement -->
-  <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
-    <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">Enforcement</h3>
+  <!-- ── enforcement ──────────────────── -->
+  <div>
+    <div class="flex items-center gap-3 mb-4">
+      <span class="text-[10px] font-medium text-gray-400 dark:text-gray-600 uppercase tracking-widest font-mono">enforcement</span>
+      <div class="flex-1 border-t border-gray-200 dark:border-gray-800"></div>
+    </div>
 
-    <div>
-      <%= f.label :enforcement, "Enforcement Mode", class: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1" %>
+    <div class="max-w-md">
+      <%= f.label :enforcement, "enforcement mode", class: "block text-xs font-mono text-gray-500 dark:text-gray-400 mb-1" %>
       <%= f.select :enforcement,
           options_for_select([
-            ["None - No enforcement", "none"],
-            ["Soft - Log warnings but allow requests", "soft"],
-            ["Hard - Block requests when limits exceeded", "hard"]
+            ["none — tracking only", "none"],
+            ["soft — log warnings, allow requests", "soft"],
+            ["hard — block requests when exceeded", "hard"]
           ], tenant.enforcement || "soft"),
           {},
-          class: "w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-gray-100" %>
-      <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
-        Controls what happens when budget limits are exceeded.
-      </p>
-    </div>
-
-    <div class="mt-4 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
-      <h4 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Enforcement Mode Details</h4>
-      <ul class="text-xs text-gray-600 dark:text-gray-400 space-y-1">
-        <li><strong>None:</strong> Budget tracking only, no enforcement actions taken.</li>
-        <li><strong>Soft:</strong> Logs warnings and triggers alerts when limits are exceeded, but allows requests to proceed.</li>
-        <li><strong>Hard:</strong> Blocks agent executions when budget limits are exceeded. Use with caution.</li>
-      </ul>
+          class: "w-full px-3 py-2 bg-transparent border border-gray-200 dark:border-gray-800 rounded text-sm font-mono text-gray-900 dark:text-gray-100 focus:ring-1 focus:ring-gray-400 dark:focus:ring-gray-600 focus:border-gray-400 dark:focus:border-gray-600" %>
     </div>
   </div>
 
   <!-- Actions -->
-  <div class="flex items-center justify-end space-x-4">
-    <%= link_to "Cancel", tenant_path(tenant), class: "px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors" %>
-    <%= f.submit "Save Changes", class: "px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 cursor-pointer transition-colors" %>
+  <div class="flex items-center gap-4 pt-4 border-t border-gray-200 dark:border-gray-800">
+    <%= f.submit "save changes", class: "px-4 py-2 text-xs font-mono text-white bg-gray-900 dark:bg-gray-100 dark:text-gray-900 rounded hover:bg-gray-700 dark:hover:bg-gray-300 cursor-pointer transition-colors" %>
+    <%= link_to "cancel", tenant_path(tenant), class: "text-xs font-mono text-gray-400 dark:text-gray-500 hover:text-gray-700 dark:hover:text-gray-300" %>
   </div>
 <% end %>

data/app/views/ruby_llm/agents/tenants/edit.html.erb

@@ -1,13 +1,11 @@
-<%= render "ruby_llm/agents/shared/breadcrumbs", items: [
-  { label: "Dashboard", path: ruby_llm_agents.root_path },
-  { label: "Tenants", path: ruby_llm_agents.tenants_path },
-  { label: @tenant.display_name, path: ruby_llm_agents.tenant_path(@tenant) },
-  { label: "Edit" }
-] %>
+<!-- Back link -->
+<nav class="font-mono text-xs mb-6">
+  <%= link_to "← #{@tenant.display_name}", ruby_llm_agents.tenant_path(@tenant), class: "text-gray-400 dark:text-gray-500 hover:text-gray-700 dark:hover:text-gray-300" %>
+</nav>
 
-<div class="mb-6">
-  <h1 class="text-2xl font-bold text-gray-900 dark:text-gray-100">Edit Tenant</h1>
-  <p class="text-gray-500 dark:text-gray-400 mt-1">Update budget configuration for <%= @tenant.display_name %></p>
+<div class="flex items-center gap-3 mb-6">
+  <span class="text-[10px] font-medium text-gray-400 dark:text-gray-600 uppercase tracking-widest font-mono">edit tenant</span>
+  <div class="flex-1 border-t border-gray-200 dark:border-gray-800"></div>
 </div>
 
 <%= render "form", tenant: @tenant %>

data/app/views/ruby_llm/agents/tenants/index.html.erb

@@ -1,132 +1,110 @@
-<div class="mb-6">
-  <div class="flex items-center gap-2">
-    <h1 class="text-2xl font-bold text-gray-900 dark:text-gray-100">Tenants</h1>
+<%
+  sc = @sort_params[:column]
+  sd = @sort_params[:direction]
+  sort_url = ->(col) {
+    dir = (col == sc && sd == "asc") ? "desc" : "asc"
+    url_for(request.query_parameters.merge(sort: col, direction: dir))
+  }
+  sort_active = ->(col) { col == sc ? "text-gray-600 dark:text-gray-300" : "" }
+  sort_arrow = ->(col) { col == sc ? (sd == "asc" ? " ↑" : " ↓") : "" }
+%>
+
+<!-- ── tenants ──────────────────────────── -->
+<div class="flex items-center gap-3 mb-4">
+  <span class="text-[10px] font-medium text-gray-400 dark:text-gray-600 uppercase tracking-widest font-mono">tenants</span>
+  <div class="font-mono text-xs text-gray-400 dark:text-gray-500 flex items-center gap-1.5">
+    <span><%= @tenants.size %></span>
     <%= render "ruby_llm/agents/shared/doc_link" %>
   </div>
-  <p class="text-gray-500 dark:text-gray-400 mt-1">Manage tenant budget configurations</p>
+  <div class="flex-1 border-t border-gray-200 dark:border-gray-800"></div>
+
+  <!-- Search -->
+  <%= form_with url: tenants_path, method: :get, class: "flex items-center", data: { turbo: false } do %>
+    <% request.query_parameters.except("q").each do |key, value| %>
+      <input type="hidden" name="<%= key %>" value="<%= value %>">
+    <% end %>
+    <input type="text"
+           name="q"
+           value="<%= @search_query %>"
+           placeholder="search tenants…"
+           class="w-40 px-2 py-0.5 bg-transparent border border-gray-200 dark:border-gray-800 rounded text-xs font-mono text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-600 focus:ring-1 focus:ring-gray-400 dark:focus:ring-gray-600 focus:border-gray-400 dark:focus:border-gray-600"
+           autocomplete="off">
+  <% end %>
 </div>
 
 <% if @tenants.empty? %>
-  <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 p-8 text-center">
-    <svg class="w-12 h-12 mx-auto text-gray-400 dark:text-gray-500 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
-    </svg>
-    <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-1">No tenants configured</h3>
-    <p class="text-gray-500 dark:text-gray-400">Tenant budgets will appear here once created via the API or configuration.</p>
+  <div class="font-mono text-xs text-gray-400 dark:text-gray-600 py-4 px-2">
+    <% if @search_query.present? %>
+      no tenants matching "<%= @search_query %>"
+    <% else %>
+      no tenants configured
+    <% end %>
   </div>
 <% else %>
-  <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 overflow-hidden">
-    <div class="overflow-x-auto">
-      <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
-        <thead class="bg-gray-50 dark:bg-gray-900/50">
-          <tr>
-            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
-              Tenant
-            </th>
-            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
-              Daily Budget
-            </th>
-            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
-              Monthly Budget
-            </th>
-            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
-              Daily Tokens
-            </th>
-            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
-              Monthly Tokens
-            </th>
-            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
-              Enforcement
-            </th>
-            <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
-              Actions
-            </th>
-          </tr>
-        </thead>
-        <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
-          <% @tenants.each do |tenant| %>
-            <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors cursor-pointer" data-href="<%= tenant_path(tenant) %>">
-              <td class="px-6 py-4 whitespace-nowrap">
-                <div class="flex items-center">
-                  <div class="flex-shrink-0 h-8 w-8 rounded-full bg-blue-100 dark:bg-blue-900/50 flex items-center justify-center">
-                    <svg class="w-4 h-4 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
-                    </svg>
-                  </div>
-                  <div class="ml-3">
-                    <div class="text-sm font-medium text-gray-900 dark:text-gray-100">
-                      <%= tenant.display_name %>
-                    </div>
-                    <% if tenant.name.present? && tenant.name != tenant.tenant_id %>
-                      <div class="text-xs text-gray-500 dark:text-gray-400 font-mono">
-                        <%= tenant.tenant_id %>
-                      </div>
-                    <% end %>
-                  </div>
-                </div>
-              </td>
-              <td class="px-6 py-4 whitespace-nowrap">
-                <% if tenant.effective_daily_limit %>
-                  <span class="text-sm font-medium text-gray-900 dark:text-gray-100">
-                    $<%= number_with_precision(tenant.effective_daily_limit, precision: 2) %>
-                  </span>
-                <% else %>
-                  <span class="text-sm text-gray-400 dark:text-gray-500">No limit</span>
-                <% end %>
-              </td>
-              <td class="px-6 py-4 whitespace-nowrap">
-                <% if tenant.effective_monthly_limit %>
-                  <span class="text-sm font-medium text-gray-900 dark:text-gray-100">
-                    $<%= number_with_precision(tenant.effective_monthly_limit, precision: 2) %>
-                  </span>
-                <% else %>
-                  <span class="text-sm text-gray-400 dark:text-gray-500">No limit</span>
-                <% end %>
-              </td>
-              <td class="px-6 py-4 whitespace-nowrap">
-                <% if tenant.effective_daily_token_limit %>
-                  <span class="text-sm font-medium text-gray-900 dark:text-gray-100">
-                    <%= number_with_delimiter(tenant.effective_daily_token_limit) %>
-                  </span>
-                <% else %>
-                  <span class="text-sm text-gray-400 dark:text-gray-500">No limit</span>
-                <% end %>
-              </td>
-              <td class="px-6 py-4 whitespace-nowrap">
-                <% if tenant.effective_monthly_token_limit %>
-                  <span class="text-sm font-medium text-gray-900 dark:text-gray-100">
-                    <%= number_with_delimiter(tenant.effective_monthly_token_limit) %>
-                  </span>
-                <% else %>
-                  <span class="text-sm text-gray-400 dark:text-gray-500">No limit</span>
-                <% end %>
-              </td>
-              <td class="px-6 py-4 whitespace-nowrap">
-                <%
-                  enforcement = tenant.effective_enforcement.to_s
-                  badge_class = case enforcement
-                                when "hard" then "bg-red-100 dark:bg-red-900/50 text-red-800 dark:text-red-200"
-                                when "soft" then "bg-yellow-100 dark:bg-yellow-900/50 text-yellow-800 dark:text-yellow-200"
-                                else "bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400"
-                                end
-                %>
-                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium <%= badge_class %>">
-                  <%= enforcement.capitalize %>
-                </span>
-              </td>
-              <td class="px-6 py-4 whitespace-nowrap text-right text-sm">
-                <%= link_to tenant_path(tenant), class: "text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300" do %>
-                  View
-                <% end %>
-                <span class="text-gray-300 dark:text-gray-600 mx-2">|</span>
-                <%= link_to edit_tenant_path(tenant), class: "text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300" do %>
-                  Edit
-                <% end %>
-              </td>
-            </tr>
+  <!-- Column headers -->
+  <div class="flex items-center gap-3 px-2 -mx-2 font-mono text-[10px] text-gray-400 dark:text-gray-600 uppercase tracking-wider mb-1">
+    <%= link_to "name#{sort_arrow.call('name')}".html_safe, sort_url.call("name"),
+        class: "flex-[2] min-w-0 hover:text-gray-600 dark:hover:text-gray-300 #{sort_active.call('name')}" %>
+    <%= link_to "daily#{sort_arrow.call('daily_limit')}".html_safe, sort_url.call("daily_limit"),
+        class: "w-20 flex-shrink-0 text-right hidden sm:block hover:text-gray-600 dark:hover:text-gray-300 #{sort_active.call('daily_limit')}" %>
+    <%= link_to "monthly#{sort_arrow.call('monthly_limit')}".html_safe, sort_url.call("monthly_limit"),
+        class: "w-20 flex-shrink-0 text-right hidden sm:block hover:text-gray-600 dark:hover:text-gray-300 #{sort_active.call('monthly_limit')}" %>
+    <%= link_to "enforcement#{sort_arrow.call('enforcement')}".html_safe, sort_url.call("enforcement"),
+        class: "w-16 flex-shrink-0 hidden md:block hover:text-gray-600 dark:hover:text-gray-300 #{sort_active.call('enforcement')}" %>
+    <span class="w-16 flex-shrink-0 text-right hidden md:block">cost</span>
+    <span class="w-24 flex-shrink-0 text-right">last run</span>
+  </div>
+
+  <!-- Data rows -->
+  <div class="font-mono text-xs space-y-px">
+    <% @tenants.each do |tenant| %>
+      <%
+        enforcement = tenant.effective_enforcement.to_s
+        enforcement_badge = case enforcement
+                            when "hard" then "badge-error"
+                            when "soft" then "badge-timeout"
+                            else ""
+                            end
+        last_execution = tenant.executions.order(created_at: :desc).pick(:created_at)
+      %>
+      <div class="group flex items-center gap-3 py-1.5 px-2 -mx-2 rounded hover:bg-gray-100 dark:hover:bg-gray-800/50 cursor-pointer"
+           onclick="window.location='<%= tenant_path(tenant) %>'">
+        <span class="flex-[2] min-w-0 truncate">
+          <span class="text-gray-900 dark:text-gray-200"><%= tenant.display_name %></span>
+          <% if tenant.name.present? && tenant.name != tenant.tenant_id %>
+            <span class="text-gray-400 dark:text-gray-600 ml-1 text-[10px]"><%= tenant.tenant_id %></span>
+          <% end %>
+        </span>
+        <span class="w-20 flex-shrink-0 text-right hidden sm:block">
+          <% if tenant.effective_daily_limit %>
+            <span class="text-gray-500 dark:text-gray-400">$<%= number_with_precision(tenant.effective_daily_limit, precision: 2) %></span>
+          <% else %>
+            <span class="text-gray-300 dark:text-gray-700">—</span>
+          <% end %>
+        </span>
+        <span class="w-20 flex-shrink-0 text-right hidden sm:block">
+          <% if tenant.effective_monthly_limit %>
+            <span class="text-gray-500 dark:text-gray-400">$<%= number_with_precision(tenant.effective_monthly_limit, precision: 2) %></span>
+          <% else %>
+            <span class="text-gray-300 dark:text-gray-700">—</span>
+          <% end %>
+        </span>
+        <span class="w-16 flex-shrink-0 hidden md:block">
+          <% if enforcement_badge.present? %>
+            <span class="badge badge-sm <%= enforcement_badge %>"><%= enforcement %></span>
+          <% else %>
+            <span class="text-gray-300 dark:text-gray-700">none</span>
+          <% end %>
+        </span>
+        <span class="w-16 flex-shrink-0 text-right text-gray-500 dark:text-gray-400 hidden md:inline">$<%= number_with_precision(tenant.cost, precision: 2) %></span>
+        <span class="w-24 flex-shrink-0 text-gray-400 dark:text-gray-600 text-right whitespace-nowrap">
+          <% if last_execution %>
+            <%= time_ago_in_words(last_execution) %>
+          <% else %>
+            —
           <% end %>
-        </tbody>
-      </table>
-    </div>
+        </span>
+      </div>
+    <% end %>
   </div>
 <% end %>