From 83ff4b622be49762491dac216ab8df374b24cd74 Mon Sep 17 00:00:00 2001
From: Ben Sima <ben@bensima.com>
Date: Thu, 27 Nov 2025 10:59:38 -0500
Subject: Display worker metrics on task detail page

All tests pass. Let me summarize what was implemented:

- Extended `TaskActivity` type with new fields:
  - `activityAmpThreadUrl` - Link to amp thread - `activityStartedAt` -
  Work start timestamp - `activityCompletedAt` - Work completion
  timestamp - `activityCostCents` - API cost in cents -
  `activityTokensUsed` - Token usage count

- Updated `SQL.FromRow` and `SQL.ToRow` instances for the new fields -
Updated schema to include new columns in `task_activity` table - Added
`logActivityWithMetrics` function to log activities with all met -
Added `updateActivityMetrics` function to update metrics on existing
a - Added `getLatestRunningActivity` helper function

- Captures execution timing (start/end timestamps) - Retrieves amp
thread URL from `AgentLog.getStatus` - Converts credits to cents
and logs to activity record - Uses `logActivityWithMetrics` and
`updateActivityMetrics` for tracking

- Added `getStatus` function to retrieve current status (thread
URL, cre

- Added `TaskMetricsPartial` type for HTMX auto-refresh - Extended
`TaskDetailPage` to include `RetryContext` - Added Execution Details
section on task detail page showing:
  - Amp Thread URL (clickable link) - Duration (formatted as "Xm Ys")
  - Cost (formatted as "$X.XX") - Retry Attempt count (if applicable)
  - Last Activity timestamp
- Added `/partials/task/:id/metrics` endpoint for HTMX auto-refresh
- Auto-refresh enabled while task is InProgress (every 5s) - Added
`renderExecutionDetails` helper function

- Added `executionDetailsStyles` for metric rows and execution section
- Added dark mode support for execution details section

Task-Id: t-148.4
---
 Omni/Jr/Web/Style.hs | 41 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 41 insertions(+)

(limited to 'Omni/Jr/Web')

diff --git a/Omni/Jr/Web/Style.hs b/Omni/Jr/Web/Style.hs
index dbe1daa..b4f4c76 100644
--- a/Omni/Jr/Web/Style.hs
+++ b/Omni/Jr/Web/Style.hs
@@ -28,6 +28,7 @@ stylesheet = do
   statusBadges
   buttonStyles
   formStyles
+  executionDetailsStyles
   activityTimelineStyles
   markdownStyles
   responsiveStyles
@@ -497,6 +498,39 @@ formStyles = do
   ".form-actions" ? do
     marginTop (px 8)
 
+executionDetailsStyles :: Css
+executionDetailsStyles = do
+  ".execution-section" ? do
+    marginTop (em 1)
+    backgroundColor white
+    borderRadius (px 2) (px 2) (px 2) (px 2)
+    padding (px 8) (px 10) (px 8) (px 10)
+    border (px 1) solid "#d0d0d0"
+  ".execution-details" ? do
+    marginTop (px 8)
+  ".metric-row" ? do
+    display flex
+    flexWrap Flexbox.wrap
+    padding (px 4) (px 0) (px 4) (px 0)
+    borderBottom (px 1) solid "#e5e7eb"
+  ".metric-row" # lastChild ? borderBottom (px 0) none transparent
+  ".metric-label" ? do
+    fontWeight (weight 600)
+    width (px 120)
+    color "#6b7280"
+    fontSize (px 13)
+  ".metric-value" ? do
+    Stylesheet.key "flex" ("1" :: Text)
+    fontSize (px 13)
+  ".amp-link" ? do
+    color "#0066cc"
+    textDecoration none
+    wordBreak breakAll
+  ".amp-link" # hover ? textDecoration underline
+  ".retry-count" ? do
+    color "#f97316"
+    fontWeight (weight 600)
+
 activityTimelineStyles :: Css
 activityTimelineStyles = do
   ".activity-section" ? do
@@ -751,6 +785,13 @@ darkModeStyles =
     ".activity-message" ? color "#d1d5db"
     (".activity-metadata" |> "summary") ? color "#9ca3af"
     ".metadata-json" ? backgroundColor "#374151"
+    ".execution-section" ? do
+      backgroundColor "#1f2937"
+      borderColor "#374151"
+    ".metric-row" ? borderBottomColor "#374151"
+    ".metric-label" ? color "#9ca3af"
+    ".metric-value" ? color "#d1d5db"
+    ".amp-link" ? color "#60a5fa"
     ".markdown-content" ? color "#d1d5db"
     ".md-h1" ? borderBottomColor "#374151"
     ".md-inline-code" ? do
-- 
cgit v1.2.3