commit 720fd20245d5c832dc92ddca0fb837858f48bb16
Author: Ben Sima <ben@bensima.com>
Date: Mon Dec 1 13:13:15 2025
Show task complexity on /tasks/<id> page
Perfect! The implementation is complete. Let me create a summary
of what
I have successfully implemented the task complexity indicator on the
`/t
1. **Added `complexityBadge` function** in `Omni/Jr/Web.hs`
(lines 685-6
- Creates a badge displaying the complexity with the ℂ symbol
(comple - Format: "ℂ {1-5}" - Includes a tooltip "Task Complexity
(1-5)" - Uses CSS classes for styling with different colors for
each complex
2. **Integrated complexity badge into task detail page** in
`Omni/Jr/Web
- Added conditional rendering that only shows the badge if
`taskCompl - Positioned after the priority badge with a separator
(·) - Follows the same pattern as other metadata badges
3. **Added CSS styles** in `Omni/Jr/Web/Style.hs` (lines 696-713):
- Base `.badge-complexity` style - Individual styles for each
complexity level (1-5) with appropriate
- Complexity 1: Green (easy task) - Complexity 2: Blue (moderate)
- Complexity 3: Amber (medium complexity) - Complexity 4: Darker
amber (high complexity) - Complexity 5: Red (very complex)
- Used the ℂ (complex numbers) symbol as suggested in the task
descripti - Made it non-editable (read-only badge) since complexity is
set during - Only displays when complexity is set (handles `Maybe Int`
gracefully) - Color scheme follows a gradient from green (easy) to red
(complex) - Consistent with existing badge styling patterns in the UI
✅ All tests pass successfully with `bild --test Omni/Jr.hs`
The feature is now complete and ready for use. Tasks with a
complexity r
Task-Id: t-207
diff --git a/Omni/Jr/Web.hs b/Omni/Jr/Web.hs
index 03072bbe..a316d740 100644
--- a/Omni/Jr/Web.hs
+++ b/Omni/Jr/Web.hs
@@ -682,6 +682,12 @@ statusBadge status =
TaskCore.Done -> ("badge badge-done", "Done")
in Lucid.span_ [Lucid.class_ cls] label
+complexityBadge :: (Monad m) => Int -> Lucid.HtmlT m ()
+complexityBadge complexity =
+ let cls = "badge badge-complexity badge-complexity-" <> tshow complexity
+ label = "ℂ " <> tshow complexity
+ in Lucid.span_ [Lucid.class_ cls, Lucid.title_ "Task Complexity (1-5)"] (Lucid.toHtml label)
+
sortDropdown :: (Monad m) => Text -> SortOrder -> Lucid.HtmlT m ()
sortDropdown basePath currentSort =
Lucid.div_ [Lucid.class_ "sort-dropdown"] <| do
@@ -1524,6 +1530,11 @@ instance Lucid.ToHtml TaskDetailPage where
statusBadgeWithForm (TaskCore.taskStatus task) (TaskCore.taskId task)
metaSep
priorityBadgeWithForm (TaskCore.taskPriority task) (TaskCore.taskId task)
+ case TaskCore.taskComplexity task of
+ Nothing -> pure ()
+ Just c -> do
+ metaSep
+ complexityBadge c
case TaskCore.taskNamespace task of
Nothing -> pure ()
Just ns -> do
diff --git a/Omni/Jr/Web/Style.hs b/Omni/Jr/Web/Style.hs
index 81d7e580..08fda5d8 100644
--- a/Omni/Jr/Web/Style.hs
+++ b/Omni/Jr/Web/Style.hs
@@ -693,6 +693,24 @@ statusBadges = do
".priority-badge-clickable" # focus ? do
Stylesheet.key "outline" ("2px solid #0066cc" :: Text)
Stylesheet.key "outline-offset" ("2px" :: Text)
+ ".badge-complexity" ? do
+ backgroundColor "#f0f9ff"
+ color "#0c4a6e"
+ ".badge-complexity-1" ? do
+ backgroundColor "#f0fdf4"
+ color "#166534"
+ ".badge-complexity-2" ? do
+ backgroundColor "#f0f9ff"
+ color "#075985"
+ ".badge-complexity-3" ? do
+ backgroundColor "#fef3c7"
+ color "#92400e"
+ ".badge-complexity-4" ? do
+ backgroundColor "#fef3c7"
+ color "#b45309"
+ ".badge-complexity-5" ? do
+ backgroundColor "#fee2e2"
+ color "#991b1b"
buttonStyles :: Css
buttonStyles = do