actionagent 1.9.2 → 1.9.4

data/app/services/action_agent/slack_tools.rb

@@ -0,0 +1,101 @@
+# frozen_string_literal: true
+
+require "net/http"
+
+module ActionAgent
+  # The slack capability: reading channels and posting as the workspace's bot,
+  # through the Slack Web API with the bot token the owner connected in
+  # Settings -> Integrations (a ProviderKey of provider "slack"). Results and
+  # errors are hashes for the model to read; the token never appears in them.
+  class SlackTools
+    FUNCTIONS = %w[slack_list_channels slack_read_channel slack_post_message].freeze
+    API = "https://slack.com/api/"
+    TIMEOUT_SECONDS = 10
+    MAX_CHANNELS = 200
+    MAX_MESSAGES = 50
+
+    NOT_CONNECTED = "Slack is not connected: add a bot token (xoxb-…) in Settings -> Integrations -> Slack"
+
+    def self.function?(name)
+      FUNCTIONS.include?(name.to_s)
+    end
+
+    # The bot token +owner+ connected, or nil.
+    def self.token_for(owner)
+      ProviderKey.for_owner(owner).find_by(provider: "slack")&.credential.presence
+    end
+
+    # @param token [String, nil]
+    def initialize(token)
+      @token = token
+    end
+
+    # @return [Hash]
+    def call(name, kwargs)
+      return { error: "Unknown tool: #{name}" } unless self.class.function?(name)
+      return { error: NOT_CONNECTED } if @token.blank?
+
+      args = kwargs.to_h.symbolize_keys
+      case name.to_s
+      when "slack_list_channels" then list_channels
+      when "slack_read_channel" then read_channel(**args.slice(:channel, :limit))
+      when "slack_post_message" then post_message(**args.slice(:channel, :text, :thread_ts))
+      end
+    end
+
+    def list_channels
+      body = request("conversations.list", { types: "public_channel,private_channel", exclude_archived: true, limit: MAX_CHANNELS })
+      return body if body[:error]
+
+      channels = Array(body["channels"]).map do |channel|
+        { id: channel["id"], name: channel["name"], is_member: channel["is_member"], topic: channel.dig("topic", "value").presence }.compact
+      end
+      { channels: channels }
+    end
+
+    def read_channel(channel:, limit: nil)
+      count = (limit || 20).to_i.clamp(1, MAX_MESSAGES)
+      body = request("conversations.history", { channel: channel.to_s, limit: count })
+      return body if body[:error]
+
+      messages = Array(body["messages"]).map do |message|
+        { ts: message["ts"], user: message["user"] || message["bot_id"], text: message["text"], thread_ts: message["thread_ts"] }.compact
+      end
+      { channel: channel, messages: messages }
+    end
+
+    def post_message(channel:, text:, thread_ts: nil)
+      return { error: "No text to post" } if text.to_s.strip.empty?
+
+      body = request("chat.postMessage", { channel: channel.to_s, text: text.to_s, thread_ts: thread_ts.presence }.compact, post: true)
+      return body if body[:error]
+
+      { posted: true, channel: body["channel"], ts: body["ts"] }
+    end
+
+    private
+
+    # Slack answers 200 with { ok: false, error: } for most failures.
+    def request(method, params, post: false)
+      uri = URI.join(API, method)
+      response = Net::HTTP.start(uri.host, uri.port, use_ssl: true, open_timeout: TIMEOUT_SECONDS, read_timeout: TIMEOUT_SECONDS) do |http|
+        headers = { "Authorization" => "Bearer #{@token}", "User-Agent" => "ActiveAgents-Toolbox/1.0" }
+        if post
+          http.post(uri.path, params.to_json, headers.merge("Content-Type" => "application/json; charset=utf-8"))
+        else
+          uri.query = URI.encode_www_form(params)
+          http.get(uri.request_uri, headers)
+        end
+      end
+
+      body = JSON.parse(response.body.to_s)
+      return { error: "Slack refused #{method}: #{body['error'] || "HTTP #{response.code}"}" } unless body["ok"]
+
+      body
+    rescue JSON::ParserError
+      { error: "Slack answered #{method} with something other than JSON (HTTP #{response&.code})" }
+    rescue Net::OpenTimeout, Net::ReadTimeout, SocketError, SystemCallError, OpenSSL::SSL::SSLError => e
+      { error: "Could not reach Slack: #{e.message}" }
+    end
+  end
+end

data/app/views/action_agent/traces/_styles.html.erb

@@ -0,0 +1,45 @@
+<style>
+  .trace-console { color-scheme: light dark; --background: #f8fafc; --surface: #fff; --text: #172033; --muted: #475569; --border: #cbd5e1; --link: #3730a3; --danger: #b91c1c; --success: #166534; margin: 0; background: var(--background); color: var(--text); font: 16px/1.5 system-ui, sans-serif; }
+  .trace-console * { box-sizing: border-box; }
+  .trace-console header { background: var(--surface); border-bottom: 1px solid var(--border); }
+  .trace-console nav, .trace-console main { max-width: 1200px; margin: auto; padding: 1rem; }
+  .trace-console nav, .trace-console .refresh-controls, .trace-console .tokens { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
+  .trace-console a { color: var(--link); text-underline-offset: .2em; }
+  .trace-console a:focus-visible, .trace-console summary:focus-visible { outline: 3px solid var(--link); outline-offset: 3px; }
+  .trace-console .muted, .trace-console dt { color: var(--muted); }
+  .trace-console .refresh-controls { justify-content: flex-end; margin-bottom: 1rem; }
+  .trace-console h1 { font-size: 1.5rem; }
+  .trace-console h2 { font-size: 1.2rem; }
+  .trace-console .panel { background: var(--surface); border: 1px solid var(--border); border-radius: .5rem; padding: 1rem; margin: 1rem 0; }
+  .trace-console .summary, .trace-console .metadata { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; margin: 1rem 0; }
+  .trace-console .summary > div { padding: 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: .5rem; }
+  .trace-console dt { font-size: .875rem; }
+  .trace-console dd { margin: 0; overflow-wrap: anywhere; }
+  .trace-console .summary dd { font-size: 1.4rem; font-weight: 600; }
+  .trace-console details { margin: .5rem 0; }
+  .trace-console summary { cursor: pointer; padding: .5rem 0; }
+  .trace-console .trace-summary { display: inline-flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: baseline; }
+  .trace-console .badge { border: 1px solid currentColor; border-radius: .25rem; padding: .1rem .4rem; font-size: .8rem; }
+  .trace-console .error { color: var(--danger); }
+  .trace-console .success { color: var(--success); }
+  .trace-console .error-message { border-left: 4px solid var(--danger); padding: .5rem 1rem; overflow-wrap: anywhere; }
+  .trace-console pre { font: .8rem/1.5 ui-monospace, monospace; overflow: auto; padding: 1rem; background: var(--background); border: 1px solid var(--border); }
+  .trace-console .table-scroll { overflow-x: auto; }
+  .trace-console table { width: 100%; border-collapse: collapse; text-align: left; }
+  .trace-console th, .trace-console td { padding: .75rem; border-bottom: 1px solid var(--border); }
+  .trace-console .span-row { display: grid; grid-template-columns: minmax(5rem, 9rem) 1fr 5rem; gap: .5rem; align-items: center; margin: .5rem 0; font-size: .8rem; }
+  .trace-console .span-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+  .trace-console .span-track { position: relative; height: 1.25rem; background: var(--background); border: 1px solid var(--border); overflow: hidden; border-radius: .2rem; }
+  .trace-console .span-bar { position: absolute; height: 100%; background: #6366f1; }
+  .trace-console .span-bar[data-type="tool"] { background: #b45309; }
+  .trace-console .span-bar[data-type="thinking"] { background: #9333ea; }
+  .trace-console .span-bar[data-type="response"] { background: #15803d; }
+  .trace-console .span-bar[data-status="ERROR"] { background: var(--danger); }
+  @media (prefers-color-scheme: dark) {
+    .trace-console { --background: #111827; --surface: #1f2937; --text: #f1f5f9; --muted: #cbd5e1; --border: #64748b; --link: #c7d2fe; --danger: #fca5a5; --success: #86efac; }
+  }
+  @media (max-width: 480px) {
+    .trace-console main { padding: .5rem; }
+    .trace-console .span-row { grid-template-columns: 5rem 1fr 4rem; }
+  }
+</style>

data/app/views/action_agent/traces/_summary.html.erb

@@ -0,0 +1,8 @@
+<dl class="summary" aria-label="Last 24 hours">
+  <div><dt>Total Traces</dt><dd><%= number_with_delimiter(@metrics[:total_traces]) %></dd></div>
+  <div><dt>Total Tokens</dt><dd><%= number_to_human(@metrics[:total_tokens], precision: 2) %></dd></div>
+  <div><dt>Avg Duration</dt><dd><%= @metrics[:avg_duration_ms] >= 1000 ? "#{(@metrics[:avg_duration_ms] / 1000.0).round(2)}s" : "#{@metrics[:avg_duration_ms].round(0)}ms" %></dd></div>
+  <div><dt>Error Rate</dt><dd class="<%= 'error' if @metrics[:error_rate] > 5 %>"><%= @metrics[:error_rate] %>%</dd></div>
+  <div><dt>Active Agents</dt><dd><%= @metrics[:unique_agents] %></dd></div>
+</dl>
+<p class="muted">Last 24h</p>

data/app/views/action_agent/traces/_trace_detail.html.erb

@@ -1,64 +1,22 @@
-<div class="space-y-4">
-  <!-- Trace Info -->
-  <div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
-    <div>
-      <span class="text-gray-500 dark:text-gray-400">Trace ID</span>
-      <div class="font-mono text-gray-900 dark:text-white"><%= trace.trace_id %></div>
-    </div>
-    <div>
-      <span class="text-gray-500 dark:text-gray-400">Service</span>
-      <div class="text-gray-900 dark:text-white"><%= trace.service_name || "—" %></div>
-    </div>
-    <div>
-      <span class="text-gray-500 dark:text-gray-400">Provider</span>
-      <div class="text-gray-900 dark:text-white"><%= trace.provider || "—" %></div>
-    </div>
-    <div>
-      <span class="text-gray-500 dark:text-gray-400">Model</span>
-      <div class="text-gray-900 dark:text-white"><%= trace.model || "—" %></div>
-    </div>
-  </div>
-
-  <% if trace.error? && trace.error_message.present? %>
-    <div class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded p-3">
-      <div class="flex">
-        <svg class="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor">
-          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
-        </svg>
-        <div class="ml-3">
-          <h3 class="text-sm font-medium text-red-800 dark:text-red-200">Error</h3>
-          <p class="mt-1 text-sm text-red-700 dark:text-red-300"><%= trace.error_message %></p>
-        </div>
-      </div>
-    </div>
+<dl class="metadata">
+  <div><dt>Trace ID</dt><dd><%= trace.trace_id %></dd></div>
+  <div><dt>Service</dt><dd><%= trace.service_name || "Unknown" %></dd></div>
+  <div><dt>Provider</dt><dd><%= trace.provider || "Unknown" %></dd></div>
+  <div><dt>Model</dt><dd><%= trace.model || "Unknown" %></dd></div>
+</dl>
+<% if trace.error? && trace.error_message.present? %>
+  <p class="error-message error"><strong>Error:</strong> <%= trace.error_message %></p>
+<% end %>
+<div class="tokens">
+  <span>Input: <%= number_with_delimiter(trace.total_input_tokens || 0) %></span>
+  <span>Output: <%= number_with_delimiter(trace.total_output_tokens || 0) %></span>
+  <% if trace.total_thinking_tokens.to_i > 0 %>
+    <span>Thinking: <%= number_with_delimiter(trace.total_thinking_tokens) %></span>
   <% end %>
-
-  <!-- Token Breakdown -->
-  <div class="flex gap-6 text-sm">
-    <div class="flex items-center gap-2">
-      <div class="w-3 h-3 rounded-full bg-blue-500"></div>
-      <span class="text-gray-500">Input:</span>
-      <span class="font-medium text-gray-900 dark:text-white"><%= number_with_delimiter(trace.total_input_tokens || 0) %></span>
-    </div>
-    <div class="flex items-center gap-2">
-      <div class="w-3 h-3 rounded-full bg-green-500"></div>
-      <span class="text-gray-500">Output:</span>
-      <span class="font-medium text-gray-900 dark:text-white"><%= number_with_delimiter(trace.total_output_tokens || 0) %></span>
-    </div>
-    <% if trace.total_thinking_tokens.to_i > 0 %>
-      <div class="flex items-center gap-2">
-        <div class="w-3 h-3 rounded-full bg-purple-500"></div>
-        <span class="text-gray-500">Thinking:</span>
-        <span class="font-medium text-purple-600 dark:text-purple-400"><%= number_with_delimiter(trace.total_thinking_tokens) %></span>
-      </div>
-    <% end %>
-  </div>
-
-  <!-- Spans Timeline -->
-  <% if trace.spans.present? %>
-    <div class="mt-4">
-      <h4 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Span Timeline</h4>
-      <div class="relative bg-gray-100 dark:bg-gray-800 rounded-lg p-4">
+</div>
+<% if trace.spans.present? %>
+  <section aria-label="Span timeline">
+    <h2>Span Timeline</h2>
         <% total_duration = (trace.total_duration_ms || 1).to_f %>
         <% total_duration = 1.0 if total_duration.zero? %>
         <%
@@ -77,41 +35,20 @@
             start_pct = ((relative_ms || 0).to_f / total_duration * 100).clamp(0, 100)
             width_pct = ((span["duration_ms"] || 0).to_f / total_duration * 100).clamp(0.5, [ 100 - start_pct, 0.5 ].max)
             span_type = span["type"] || "unknown"
-            colors = {
-              "root" => "bg-gray-400",
-              "prompt" => "bg-blue-400",
-              "llm" => "bg-indigo-500",
-              "generate" => "bg-indigo-400",
-              "tool" => "bg-amber-500",
-              "thinking" => "bg-purple-500",
-              "response" => "bg-green-400"
-            }
-            bg_color = colors[span_type] || "bg-gray-400"
           %>
-          <div class="flex items-center gap-2 mb-2">
-            <div class="w-24 text-xs text-gray-500 dark:text-gray-400 truncate" title="<%= span["name"] %>">
-              <%= span["name"]&.split(".")&.last || span_type %>
-            </div>
-            <div class="flex-1 h-6 bg-gray-200 dark:bg-gray-700 rounded relative overflow-hidden">
-              <div class="span-bar absolute h-full <%= bg_color %> rounded <%= span["status"] == "ERROR" ? 'opacity-50 bg-red-500' : '' %>"
-                   style="left: <%= start_pct %>%; width: <%= width_pct %>%;"
-                   title="<%= span["name"] %>: <%= span["duration_ms"]&.round(1) %>ms">
-              </div>
-            </div>
-            <div class="w-16 text-xs text-gray-500 dark:text-gray-400 text-right">
-              <%= span["duration_ms"] ? "#{span["duration_ms"].round(1)}ms" : "—" %>
-            </div>
-          </div>
-        <% end %>
+      <div class="span-row">
+        <span class="span-name" title="<%= span["name"] %>"><%= span["name"]&.split(".")&.last || span_type %></span>
+        <div class="span-track">
+          <div class="span-bar" data-type="<%= span_type %>" data-status="<%= span["status"] %>"
+               style="left: <%= start_pct %>%; width: <%= width_pct %>%;"
+               title="<%= span["name"] %>: <%= span["duration_ms"]&.round(1) %>ms"></div>
+        </div>
+        <span><%= span["duration_ms"] ? "#{span["duration_ms"].round(1)}ms" : "Unknown" %></span>
       </div>
-    </div>
-  <% end %>
-
-  <!-- Raw Data (collapsed) -->
-  <details class="mt-4">
-    <summary class="text-sm text-gray-500 dark:text-gray-400 cursor-pointer hover:text-gray-700">
-      View raw trace data
-    </summary>
-    <pre class="mt-2 p-3 bg-gray-100 dark:bg-gray-800 rounded text-xs overflow-x-auto"><%= JSON.pretty_generate(trace.as_json(except: [:id, :created_at, :updated_at])) %></pre>
-  </details>
-</div>
+    <% end %>
+  </section>
+<% end %>
+<details>
+  <summary>View raw trace data</summary>
+  <pre><%= JSON.pretty_generate(trace.as_json(except: [ :id, :created_at, :updated_at ])) %></pre>
+</details>

data/app/views/action_agent/traces/index.html.erb

@@ -1,135 +1,26 @@
-<div data-controller="refresh" data-refresh-interval-value="30000">
-  <!-- Metrics Summary -->
-  <div class="grid grid-cols-1 md:grid-cols-5 gap-4 mb-6">
-    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4">
-      <div class="text-sm font-medium text-gray-500 dark:text-gray-400">Total Traces</div>
-      <div class="mt-1 text-2xl font-semibold text-gray-900 dark:text-white">
-        <%= number_with_delimiter(@metrics[:total_traces]) %>
-      </div>
-      <div class="text-xs text-gray-400">Last 24h</div>
-    </div>
-
-    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4">
-      <div class="text-sm font-medium text-gray-500 dark:text-gray-400">Total Tokens</div>
-      <div class="mt-1 text-2xl font-semibold text-gray-900 dark:text-white">
-        <%= number_to_human(@metrics[:total_tokens], precision: 2) %>
-      </div>
-      <div class="text-xs text-gray-400">Last 24h</div>
-    </div>
-
-    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4">
-      <div class="text-sm font-medium text-gray-500 dark:text-gray-400">Avg Duration</div>
-      <div class="mt-1 text-2xl font-semibold text-gray-900 dark:text-white">
-        <%= @metrics[:avg_duration_ms] >= 1000 ? "#{(@metrics[:avg_duration_ms] / 1000.0).round(2)}s" : "#{@metrics[:avg_duration_ms].round(0)}ms" %>
-      </div>
-      <div class="text-xs text-gray-400">Last 24h</div>
-    </div>
-
-    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4">
-      <div class="text-sm font-medium text-gray-500 dark:text-gray-400">Error Rate</div>
-      <div class="mt-1 text-2xl font-semibold <%= @metrics[:error_rate] > 5 ? 'text-red-600' : 'text-gray-900 dark:text-white' %>">
-        <%= @metrics[:error_rate] %>%
-      </div>
-      <div class="text-xs text-gray-400">Last 24h</div>
-    </div>
-
-    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4">
-      <div class="text-sm font-medium text-gray-500 dark:text-gray-400">Active Agents</div>
-      <div class="mt-1 text-2xl font-semibold text-gray-900 dark:text-white">
-        <%= @metrics[:unique_agents] %>
-      </div>
-      <div class="text-xs text-gray-400">Last 24h</div>
-    </div>
-  </div>
-
-  <!-- Traces Table -->
-  <div class="bg-white dark:bg-gray-800 shadow rounded-lg overflow-hidden" data-controller="traces">
-    <div class="px-4 py-3 border-b border-gray-200 dark:border-gray-700 flex justify-between items-center">
-      <h2 class="text-lg font-medium text-gray-900 dark:text-white">Recent Traces</h2>
-      <div class="flex gap-2">
-        <%= link_to "All", traces_path, class: "px-3 py-1 text-sm rounded #{params[:status].blank? ? 'bg-indigo-100 text-indigo-700' : 'text-gray-600 hover:bg-gray-100'}" %>
-        <%= link_to "Errors", traces_path(status: "error"), class: "px-3 py-1 text-sm rounded #{params[:status] == 'error' ? 'bg-red-100 text-red-700' : 'text-gray-600 hover:bg-gray-100'}" %>
-      </div>
-    </div>
-
-    <% if @traces.any? %>
-      <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
-        <thead class="bg-gray-50 dark:bg-gray-900">
-          <tr>
-            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Agent</th>
-            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
-            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Duration</th>
-            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tokens</th>
-            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Time</th>
-          </tr>
-        </thead>
-        <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
-          <% @traces.each do |trace| %>
-            <!-- Main Row -->
-            <tr class="hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer"
-                data-trace-id="<%= trace.id %>"
-                data-action="click->traces#toggle">
-              <td class="px-4 py-3">
-                <div class="flex items-center">
-                  <span class="text-sm font-medium text-gray-900 dark:text-white">
-                    <%= trace.agent_class || "Unknown" %>
-                  </span>
-                  <% if trace.agent_action %>
-                    <span class="ml-2 text-sm text-gray-500 dark:text-gray-400">
-                      .<%= trace.agent_action %>
-                    </span>
-                  <% end %>
-                </div>
-                <div class="text-xs text-gray-400 font-mono"><%= trace.trace_id&.first(8) %></div>
-              </td>
-              <td class="px-4 py-3">
-                <% if trace.error? %>
-                  <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200">
-                    Error
-                  </span>
-                <% else %>
-                  <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
-                    OK
-                  </span>
-                <% end %>
-              </td>
-              <td class="px-4 py-3 text-sm text-gray-900 dark:text-white">
-                <%= trace.formatted_duration %>
-              </td>
-              <td class="px-4 py-3">
-                <div class="flex items-center gap-2 text-sm">
-                  <span class="text-gray-900 dark:text-white"><%= trace.formatted_tokens %></span>
-                  <% if trace.total_thinking_tokens.to_i > 0 %>
-                    <span class="text-xs text-purple-600 dark:text-purple-400" title="Thinking tokens">
-                      +<%= number_to_human(trace.total_thinking_tokens, precision: 1) %> thinking
-                    </span>
-                  <% end %>
-                </div>
-              </td>
-              <td class="px-4 py-3 text-sm text-gray-500 dark:text-gray-400">
-                <%= time_ago_in_words(trace.timestamp || trace.created_at) %> ago
-              </td>
-            </tr>
-
-            <!-- Expanded Detail Row -->
-            <tr id="detail-<%= trace.id %>" class="hidden bg-gray-50 dark:bg-gray-900">
-              <td colspan="5" class="px-4 py-4">
-                <%= render partial: "trace_detail", locals: { trace: trace } %>
-              </td>
-            </tr>
-          <% end %>
-        </tbody>
-      </table>
-    <% else %>
-      <div class="px-4 py-12 text-center">
-        <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-        </svg>
-        <h3 class="mt-2 text-sm font-medium text-gray-900 dark:text-white">No traces yet</h3>
-        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
-          Traces will appear here when your agents generate responses.
-        </p>
-      </div>
+<h1>Traces</h1>
+<%= render "summary" %>
+<section class="panel" aria-label="Recent traces">
+  <h2>Recent Traces</h2>
+  <p><%= link_to "All", traces_path %> · <%= link_to "Errors", traces_path(status: "error") %></p>
+  <% if @traces.any? %>
+    <% @traces.each do |trace| %>
+      <details class="panel">
+        <summary>
+          <span class="trace-summary">
+            <strong><%= trace.display_name %></strong>
+            <span class="badge <%= trace.error? ? 'error' : 'success' %>"><%= trace.error? ? "Error" : "OK" %></span>
+            <span><%= trace.formatted_duration %></span>
+            <span><%= trace.formatted_tokens %> tokens</span>
+            <span class="muted"><%= time_ago_in_words(trace.timestamp || trace.created_at) %> ago</span>
+          </span>
+        </summary>
+        <%= link_to "Open trace", trace_path(trace) %>
+        <%= render "trace_detail", trace: trace %>
+      </details>
     <% end %>
-  </div>
-</div>
+  <% else %>
+    <h2>No traces yet</h2>
+    <p>Traces will appear here when your agents generate responses.</p>
+  <% end %>
+</section>

data/app/views/action_agent/traces/metrics.html.erb

@@ -1,145 +1,27 @@
-<div data-controller="refresh" data-refresh-interval-value="60000">
-  <h1 class="text-2xl font-bold text-gray-900 dark:text-white mb-6">Metrics Overview</h1>
-
-  <!-- Summary Cards -->
-  <div class="grid grid-cols-1 md:grid-cols-5 gap-4 mb-8">
-    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
-      <div class="flex items-center">
-        <div class="p-3 rounded-full bg-indigo-100 dark:bg-indigo-900">
-          <svg class="h-6 w-6 text-indigo-600 dark:text-indigo-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
-          </svg>
-        </div>
-        <div class="ml-4">
-          <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Total Traces</p>
-          <p class="text-2xl font-semibold text-gray-900 dark:text-white">
-            <%= number_with_delimiter(@metrics[:total_traces]) %>
-          </p>
-        </div>
-      </div>
-    </div>
-
-    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
-      <div class="flex items-center">
-        <div class="p-3 rounded-full bg-blue-100 dark:bg-blue-900">
-          <svg class="h-6 w-6 text-blue-600 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
-          </svg>
-        </div>
-        <div class="ml-4">
-          <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Total Tokens</p>
-          <p class="text-2xl font-semibold text-gray-900 dark:text-white">
-            <%= number_to_human(@metrics[:total_tokens], precision: 2) %>
-          </p>
-        </div>
-      </div>
-    </div>
-
-    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
-      <div class="flex items-center">
-        <div class="p-3 rounded-full bg-green-100 dark:bg-green-900">
-          <svg class="h-6 w-6 text-green-600 dark:text-green-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
-          </svg>
-        </div>
-        <div class="ml-4">
-          <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Avg Duration</p>
-          <p class="text-2xl font-semibold text-gray-900 dark:text-white">
-            <%= @metrics[:avg_duration_ms] >= 1000 ? "#{(@metrics[:avg_duration_ms] / 1000.0).round(2)}s" : "#{@metrics[:avg_duration_ms].round(0)}ms" %>
-          </p>
-        </div>
-      </div>
-    </div>
-
-    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
-      <div class="flex items-center">
-        <div class="p-3 rounded-full <%= @metrics[:error_rate] > 5 ? 'bg-red-100 dark:bg-red-900' : 'bg-gray-100 dark:bg-gray-700' %>">
-          <svg class="h-6 w-6 <%= @metrics[:error_rate] > 5 ? 'text-red-600 dark:text-red-400' : 'text-gray-600 dark:text-gray-400' %>" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
-          </svg>
-        </div>
-        <div class="ml-4">
-          <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Error Rate</p>
-          <p class="text-2xl font-semibold <%= @metrics[:error_rate] > 5 ? 'text-red-600' : 'text-gray-900 dark:text-white' %>">
-            <%= @metrics[:error_rate] %>%
-          </p>
-        </div>
-      </div>
-    </div>
-
-    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
-      <div class="flex items-center">
-        <div class="p-3 rounded-full bg-purple-100 dark:bg-purple-900">
-          <svg class="h-6 w-6 text-purple-600 dark:text-purple-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
-          </svg>
-        </div>
-        <div class="ml-4">
-          <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Active Agents</p>
-          <p class="text-2xl font-semibold text-gray-900 dark:text-white">
-            <%= @metrics[:unique_agents] %>
-          </p>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <!-- Agent Statistics -->
-  <div class="bg-white dark:bg-gray-800 shadow rounded-lg overflow-hidden mb-8">
-    <div class="px-4 py-4 border-b border-gray-200 dark:border-gray-700">
-      <h2 class="text-lg font-medium text-gray-900 dark:text-white">Agent Statistics</h2>
-      <p class="text-sm text-gray-500 dark:text-gray-400">Performance breakdown by agent class (last 24h)</p>
-    </div>
-
-    <% if @agent_stats.any? %>
-      <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
-        <thead class="bg-gray-50 dark:bg-gray-900">
-          <tr>
-            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Agent</th>
-            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Traces</th>
-            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tokens</th>
-            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Avg Duration</th>
-            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Errors</th>
-          </tr>
-        </thead>
-        <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
+<h1>Metrics Overview</h1>
+<%= render "summary" %>
+<section class="panel">
+  <h2>Agent Statistics</h2>
+  <p class="muted">Performance breakdown by agent class (last 24h)</p>
+  <% if @agent_stats.any? %>
+    <div class="table-scroll">
+      <table>
+        <thead><tr><th scope="col">Agent</th><th scope="col">Traces</th><th scope="col">Tokens</th><th scope="col">Avg Duration</th><th scope="col">Errors</th></tr></thead>
+        <tbody>
           <% @agent_stats.each do |stat| %>
-            <tr class="hover:bg-gray-50 dark:hover:bg-gray-700">
-              <td class="px-4 py-3">
-                <span class="text-sm font-medium text-gray-900 dark:text-white">
-                  <%= stat.agent_class || "Unknown" %>
-                </span>
-              </td>
-              <td class="px-4 py-3 text-sm text-gray-900 dark:text-white">
-                <%= number_with_delimiter(stat.trace_count) %>
-              </td>
-              <td class="px-4 py-3 text-sm text-gray-900 dark:text-white">
-                <%# stat is a grouped row: read the SQL alias, not the model
-                    method (which sums per-trace token columns absent here) %>
-                <%= number_to_human(stat[:total_tokens] || 0, precision: 1) %>
-              </td>
-              <td class="px-4 py-3 text-sm text-gray-900 dark:text-white">
-                <% avg = stat.avg_duration.to_f %>
-                <%= avg >= 1000 ? "#{(avg / 1000.0).round(2)}s" : "#{avg.round(0)}ms" %>
-              </td>
-              <td class="px-4 py-3">
-                <% error_count = stat.error_count.to_i %>
-                <% if error_count > 0 %>
-                  <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200">
-                    <%= error_count %>
-                  </span>
-                <% else %>
-                  <span class="text-sm text-gray-400">0</span>
-                <% end %>
-              </td>
+            <tr>
+              <th scope="row"><%= stat.agent_class || "Unknown" %></th>
+              <td><%= number_with_delimiter(stat.trace_count) %></td>
+              <td><%= number_to_human(stat[:total_tokens] || 0, precision: 1) %></td>
+              <% avg = stat.avg_duration.to_f %>
+              <td><%= avg >= 1000 ? "#{(avg / 1000.0).round(2)}s" : "#{avg.round(0)}ms" %></td>
+              <td class="<%= 'error' if stat.error_count.to_i > 0 %>"><%= stat.error_count.to_i %></td>
             </tr>
           <% end %>
         </tbody>
       </table>
-    <% else %>
-      <div class="px-4 py-8 text-center text-gray-500 dark:text-gray-400">
-        No agent data available yet.
-      </div>
-    <% end %>
-  </div>
-</div>
+    </div>
+  <% else %>
+    <p>No agent data available yet.</p>
+  <% end %>
+</section>