Fix timeline guardrail and error event rendering

1: # Omni
2: 
3: The Omni project is to leverage automation and asymmetries to create wealth.
4: 
5: ## Critical Rules for AI Agents
6: 
7: **CRITICAL**: This project uses `jr task` for ALL issue tracking. You MUST follow these rules:
8: 
9: - ✅ Use `jr task` for ALL task/TODO tracking (`jr task create ... --json`)
10: - ✅ Link discovered work with `--discovered-from=<parent-id>`
11: - ✅ File bugs IMMEDIATELY when you discover unexpected behavior
12: - ✅ Add facts to the knowledge base when you learn something useful (`jr facts add ...`)
13: - ✅ Run `jr task ready --json` before asking "what should I work on?"
14: - ✅ Store AI planning docs in `_/llm` directory (NEVER in repo root)
15: - ❌ Do NOT use `todo_write` tool
16: - ❌ Do NOT create markdown TODO lists or task checklists
17: - ❌ Do NOT put TODO/FIXME comments in code
18: 
19: ## Cheat Sheet
20: 
21: **Standard workflow:**
22: ```bash
23: # 1. Find ready work
24: jr task ready --json
25: 
26: # 2. Claim a task
27: jr task update <id> in-progress --json
28: 
29: # 3. During work: create discovered issues
30: jr task create "Fix type error found" --discovered-from=<current-id> --json
31: 
32: # 4. Complete the task
33: jr task update <id> done --json
34: ```
35: 
36: **Bug Discovery:**
37: ```bash
38: # Create a task immediately
39: jr task create "Command X fails when Y" --discovered-from=<current-task-id> --json
40: ```
41: 
42: ## Directory Structure
43: 
44: - **`_/`** (cabdir) - All ephemeral/generated files. This directory is gitignored.
45:   - `_/llm/` - AI planning docs and agent logs
46:   - `_/tmp/` - Temporary files, test databases, scratch data
47: - Never create dotfile directories (like `.tasks/`) in the repo root
48: 
49: ## Common Commands
50: 
51: **Build:**
52: ```bash
53: bild Omni/Jr.hs              # Build a Haskell namespace
54: bild Biz/Cloud/Api.py        # Build a Python namespace
55: ```
56: 
57: **Lint and Format:**
58: ```bash
59: lint Omni/Cli.hs             # Lint a file (DO NOT use hlint directly)
60: lint --fix **/*.py           # Lint and auto-fix Python files
61: ```
62: 
63: **Type Check:**
64: ```bash
65: typecheck.sh Omni/Bild/Example.py   # Run mypy on Python files
66: ```
67: 
68: **Test:**
69: ```bash
70: bild --test Omni/Jr.hs       # Build and run tests for a namespace
71: ```
72: 
73: **Run:**
74: ```bash
75: Omni/Ide/run.sh Omni/Jr.hs   # Build (if needed) and run
76: ```
77: 
78: ## Documentation
79: 
80: - **Project Context**: [README.md](README.md) - Goals, source layout, and coding conventions.
81: - **Task Manager**: [`Omni/Task/README.md`](Omni/Task/README.md) - Detailed usage, dependency management, and agent best practices.
82: - **Build Tool (Bild)**: [`Omni/Bild/README.md`](Omni/Bild/README.md) - How to use `bild` and manage dependencies.
83: - **Development Tools**: [`Omni/Ide/README.md`](Omni/Ide/README.md) - `run.sh`, `lint`, `repl.sh`, git workflow.

1: {-# LANGUAGE OverloadedStrings #-}
2: {-# LANGUAGE NoImplicitPrelude #-}
3: 
4: -- | Jr Web UI - Main module that re-exports the API and provides the run function.
5: --
6: -- The web interface is split into submodules:
7: -- - Types: Data types for pages, partials, and forms
8: -- - Components: Reusable UI components and helpers
9: -- - Pages: Full page ToHtml instances
10: -- - Partials: HTMX partial ToHtml instances
11: -- - Handlers: Servant handler implementations
12: -- - Style: CSS styling
13: --
14: -- : dep warp
15: -- : dep servant-server
16: -- : dep lucid
17: -- : dep servant-lucid
18: module Omni.Jr.Web
19:   ( run,
20:     defaultPort,
21:     -- Re-exports for external use
22:     API,
23:     server,
24:   )
25: where
26: 
27: import Alpha
28: import qualified Network.Wai.Handler.Warp as Warp
29: import Omni.Jr.Web.Handlers (API, api, server)
30: import Omni.Jr.Web.Pages ()
31: import Omni.Jr.Web.Partials ()
32: import Servant (serve)
33: 
34: defaultPort :: Warp.Port
35: defaultPort = 8080
36: 
37: run :: Warp.Port -> IO ()
38: run port = do
39:   putText <| "Starting Jr web server on port " <> tshow port
40:   Warp.run port (serve api server)

./Omni/Jr/Web/Style.hs:42:  timelineEventStyles
./Omni/Jr/Web/Style.hs:1447:timelineEventStyles :: Css
./Omni/Jr/Web/Style.hs:1448:timelineEventStyles = do
./Omni/Jr/Web/Style.hs:1627:  ".timeline-events" ? do
./Omni/Jr/Web/Style.hs:1634:  ".timeline-event" ? do
./Omni/Jr/Web/Partials.hs:30:    renderTimelineEvent,
./Omni/Jr/Web/Partials.hs:251:      Lucid.toHtml ("Timeline (" <> tshow eventCount <> ")")
./Omni/Jr/Web/Partials.hs:264:        Lucid.div_ [Lucid.class_ "timeline-events"] <| do
./Omni/Jr/Web/Partials.hs:265:          traverse_ (renderTimelineEvent now) nonCostEvents
./Omni/Jr/Web/Components.hs:98:    renderTimelineEvent,
./Omni/Jr/Web/Components.hs:101:    renderCommentTimelineEvent,
./Omni/Jr/Web/Components.hs:105:    renderErrorTimelineEvent,
./Omni/Jr/Web/Components.hs:106:    renderAssistantTimelineEvent,
./Omni/Jr/Web/Components.hs:107:    renderToolCallTimelineEvent,
./Omni/Jr/Web/Components.hs:108:    renderToolResultTimelineEvent,
./Omni/Jr/Web/Components.hs:395:      "    var log = document.querySelector('.timeline-events');",
./Omni/Jr/Web/Components.hs:1166:renderUnifiedTimeline :: (Monad m) => Text -> [TaskCore.Comment] -> [TaskCore.StoredEvent] -> TaskCore.Status -> UTCTime -> Lucid.HtmlT m ()
./Omni/Jr/Web/Components.hs:1167:renderUnifiedTimeline tid legacyComments events status now = do
./Omni/Jr/Web/Components.hs:1175:              Lucid.makeAttribute "hx-on::before-request" "var log = this.querySelector('.timeline-events'); if(log) this.dataset.scroll = log.scrollTop",
./Omni/Jr/Web/Components.hs:1176:              Lucid.makeAttribute "hx-on::after-swap" "var log = this.querySelector('.timeline-events'); if(log && this.dataset.scroll) log.scrollTop = this.dataset.scroll"
./Omni/Jr/Web/Components.hs:1184:      Lucid.toHtml ("Timeline (" <> tshow eventCount <> ")")
./Omni/Jr/Web/Components.hs:1198:        Lucid.div_ [Lucid.class_ "timeline-events"] <| do
./Omni/Jr/Web/Components.hs:1199:          traverse_ (renderTimelineEvent now) nonCostEvents
./Omni/Jr/Web/Components.hs:1204:renderTimelineEvent :: (Monad m) => UTCTime -> TaskCore.StoredEvent -> Lucid.HtmlT m ()
./Omni/Jr/Web/Components.hs:1205:renderTimelineEvent now event =
./Omni/Jr/Web/Components.hs:1213:        [ Lucid.class_ ("timeline-event timeline-event-" <> eventType),
./Omni/Jr/Web/Components.hs:1218:            "comment" -> renderCommentTimelineEvent content actor timestamp now
./Omni/Jr/Web/Components.hs:1225:            "error" -> renderErrorTimelineEvent content actor timestamp now
./Omni/Jr/Web/Components.hs:1226:            "Assistant" -> renderAssistantTimelineEvent content actor timestamp now
./Omni/Jr/Web/Components.hs:1227:            "ToolCall" -> renderToolCallTimelineEvent content actor timestamp now
./Omni/Jr/Web/Components.hs:1228:            "ToolResult" -> renderToolResultTimelineEvent content actor timestamp now
./Omni/Jr/Web/Components.hs:1259:renderCommentTimelineEvent :: (Monad m) => Text -> TaskCore.CommentAuthor -> UTCTime -> UTCTime -> Lucid.HtmlT m ()
./Omni/Jr/Web/Components.hs:1260:renderCommentTimelineEvent content actor timestamp now =
./Omni/Jr/Web/Components.hs:1299:renderErrorTimelineEvent :: (Monad m) => Text -> TaskCore.CommentAuthor -> UTCTime -> UTCTime -> Lucid.HtmlT m ()
./Omni/Jr/Web/Components.hs:1300:renderErrorTimelineEvent content actor timestamp now =
./Omni/Jr/Web/Components.hs:1309:renderAssistantTimelineEvent :: (Monad m) => Text -> TaskCore.CommentAuthor -> UTCTime -> UTCTime -> Lucid.HtmlT m ()
./Omni/Jr/Web/Components.hs:1310:renderAssistantTimelineEvent content _actor timestamp now =
./Omni/Jr/Web/Components.hs:1323:renderToolCallTimelineEvent :: (Monad m) => Text -> TaskCore.CommentAuthor -> UTCTime -> UTCTime -> Lucid.HtmlT m ()
./Omni/Jr/Web/Components.hs:1324:renderToolCallTimelineEvent content _actor timestamp now =
./Omni/Jr/Web/Components.hs:1336:renderToolResultTimelineEvent :: (Monad m) => Text -> TaskCore.CommentAuthor -> UTCTime -> UTCTime -> Lucid.HtmlT m ()
./Omni/Jr/Web/Components.hs:1337:renderToolResultTimelineEvent content _actor timestamp now =
./Omni/Jr/Web/Components.hs:1429:          "  var log = document.querySelector('.timeline-events');",
./Omni/Jr/Web/Pages.hs:628:              renderUnifiedTimeline (TaskCore.taskId task) (TaskCore.taskComments task) agentEvents (TaskCore.taskStatus task) now
./Omni/Task/Core.hs:144:-- Comment/event author (also used as Actor for timeline events)
./Omni/Task/Core.hs:1817:-- | Get all timeline events for a task (across all sessions)

1299: renderErrorTimelineEvent :: (Monad m) => Text -> TaskCore.CommentAuthor -> UTCTime -> UTCTime -> Lucid.HtmlT m ()
1300: renderErrorTimelineEvent content actor timestamp now =
1301:   Lucid.div_ [Lucid.class_ "timeline-error"] <| do
1302:     Lucid.div_ [Lucid.class_ "event-header"] <| do
1303:       Lucid.span_ [Lucid.class_ "event-icon"] "❌"
1304:       Lucid.span_ [Lucid.class_ "event-label"] "Error"
1305:       renderActorLabel actor
1306:       renderRelativeTimestamp now timestamp
1307:     Lucid.div_ [Lucid.class_ "event-content error-message"] (Lucid.toHtml content)
1308: 
1309: renderAssistantTimelineEvent :: (Monad m) => Text -> TaskCore.CommentAuthor -> UTCTime -> UTCTime -> Lucid.HtmlT m ()
1310: renderAssistantTimelineEvent content _actor timestamp now =
1311:   Lucid.div_ [Lucid.class_ "timeline-thought"] <| do
1312:     Lucid.div_ [Lucid.class_ "event-header"] <| do
1313:       Lucid.span_ [Lucid.class_ "event-icon"] "💭"
1314:       Lucid.span_ [Lucid.class_ "event-label"] "Thought"
1315:       renderActorLabel TaskCore.Junior
1316:       renderRelativeTimestamp now timestamp
1317:     Lucid.div_ [Lucid.class_ "event-content thought-bubble markdown-content"] <| do
1318:       let truncated = Text.take 2000 content
1319:           isTruncated = Text.length content > 2000
1320:       renderMarkdown truncated
1321:       when isTruncated <| Lucid.span_ [Lucid.class_ "event-truncated"] "..."
1322: 
1323: renderToolCallTimelineEvent :: (Monad m) => Text -> TaskCore.CommentAuthor -> UTCTime -> UTCTime -> Lucid.HtmlT m ()
1324: renderToolCallTimelineEvent content _actor timestamp now =
1325:   let (toolName, args) = parseToolCallContent content
1326:       summary = formatToolCallSummary toolName args
1327:    in Lucid.details_ [Lucid.class_ "timeline-tool-call"] <| do
1328:         Lucid.summary_ <| do
1329:           Lucid.span_ [Lucid.class_ "event-icon"] "🔧"
1330:           Lucid.span_ [Lucid.class_ "tool-name"] (Lucid.toHtml toolName)
1331:           Lucid.span_ [Lucid.class_ "tool-summary"] (Lucid.toHtml summary)
1332:           renderRelativeTimestamp now timestamp
1333:         Lucid.div_ [Lucid.class_ "event-content tool-args"] <| do
1334:           renderCollapsibleOutput args
1335: 
1336: renderToolResultTimelineEvent :: (Monad m) => Text -> TaskCore.CommentAuthor -> UTCTime -> UTCTime -> Lucid.HtmlT m ()
1337: renderToolResultTimelineEvent content _actor timestamp now =
1338:   let lineCount = length (Text.lines content)
1339:    in Lucid.details_ [Lucid.class_ "timeline-tool-result"] <| do
1340:         Lucid.summary_ <| do
1341:           Lucid.span_ [Lucid.class_ "event-icon"] "📄"
1342:           Lucid.span_ [Lucid.class_ "event-label"] "Result"
1343:           when (lineCount > 1)
1344:             <| Lucid.span_ [Lucid.class_ "line-count"] (Lucid.toHtml (tshow lineCount <> " lines"))
1345:           renderRelativeTimestamp now timestamp
1346:         Lucid.pre_ [Lucid.class_ "event-content tool-output"] (renderDecodedToolResult content)
1347: 
1348: renderCheckpointEvent :: (Monad m) => Text -> TaskCore.CommentAuthor -> UTCTime -> UTCTime -> Lucid.HtmlT m ()
1349: renderCheckpointEvent content actor timestamp now =
1350:   Lucid.div_ [Lucid.class_ "timeline-checkpoint"] <| do
1351:     Lucid.div_ [Lucid.class_ "event-header"] <| do
1352:       Lucid.span_ [Lucid.class_ "event-icon"] "📍"
1353:       Lucid.span_ [Lucid.class_ "event-label"] "Checkpoint"
1354:       renderActorLabel actor
1355:       renderRelativeTimestamp now timestamp
1356:     Lucid.div_ [Lucid.class_ "event-content checkpoint-content"] (Lucid.toHtml content)
1357: 
1358: renderGuardrailEvent :: (Monad m) => Text -> TaskCore.CommentAuthor -> UTCTime -> UTCTime -> Lucid.HtmlT m ()
1359: renderGuardrailEvent content actor timestamp now =
1360:   Lucid.div_ [Lucid.class_ "timeline-guardrail"] <| do
1361:     Lucid.div_ [Lucid.class_ "event-header"] <| do
1362:       Lucid.span_ [Lucid.class_ "event-icon"] "⚠️"
1363:       Lucid.span_ [Lucid.class_ "event-label"] "Guardrail"
1364:       renderActorLabel actor
1365:       renderRelativeTimestamp now timestamp
1366:     Lucid.div_ [Lucid.class_ "event-content guardrail-content"] (Lucid.toHtml content)
1367: 
1368: renderGenericEvent :: (Monad m) => Text -> Text -> TaskCore.CommentAuthor -> UTCTime -> UTCTime -> Lucid.HtmlT m ()
1369: renderGenericEvent eventType content actor timestamp now =
1370:   Lucid.div_ [Lucid.class_ "timeline-generic"] <| do
1371:     Lucid.div_ [Lucid.class_ "event-header"] <| do
1372:       Lucid.span_ [Lucid.class_ "event-icon"] "📝"
1373:       Lucid.span_ [Lucid.class_ "event-label"] (Lucid.toHtml eventType)
1374:       renderActorLabel actor
1375:       renderRelativeTimestamp now timestamp
1376:     unless (Text.null content) <| Lucid.div_ [Lucid.class_ "event-content"] (Lucid.toHtml content)
1377: 
1378: parseToolCallContent :: Text -> (Text, Text)
1379: parseToolCallContent content =
1380:   case Text.breakOn ":" content of

1685:   ".timeline-error" ? do
1686:     borderLeft (px 3) solid "#ef4444"
1687:     backgroundColor "#fef2f2"
1688:     padding (px 8) (px 12) (px 8) (px 12)
1689:     borderRadius (px 4) (px 4) (px 4) (px 4)
1690:   ".timeline-error" |> ".error-message" ? do
1691:     marginTop (px 6)
1692:     color "#dc2626"
1693:     fontFamily ["SF Mono", "Monaco", "Consolas", "monospace"] [monospace]
1694:     fontSize (px 12)
1695:     whiteSpace preWrap
1696:   ".timeline-thought" ? do
1697:     paddingLeft (px 4)
1698:   ".timeline-thought" |> ".thought-bubble" ? do
1699:     backgroundColor "#fef3c7"
1700:     color "#78350f"
1701:     padding (px 8) (px 12) (px 8) (px 12)
1702:     borderRadius (px 8) (px 8) (px 8) (px 8)
1703:     whiteSpace preWrap
1704:     marginTop (px 6)
1705:     fontSize (px 12)
1706:     lineHeight (em 1.5)
1707:   ".timeline-tool-call" ? do
1708:     borderLeft (px 3) solid "#3b82f6"
1709:     paddingLeft (px 8)
1710:   ".timeline-tool-call" |> "summary" ? do
1711:     cursor pointer
1712:     listStyleType none
1713:     display flex
1714:     alignItems center
1715:     Stylesheet.key "gap" ("6px" :: Text)
1716:   ".timeline-tool-call" |> "summary" # before ? do
1717:     content (stringContent "▶")
1718:     fontSize (px 10)
1719:     color "#6b7280"
1720:     transition "transform" (ms 150) ease (sec 0)
1721:   ".timeline-tool-call[open]" |> "summary" # before ? do
1722:     Stylesheet.key "transform" ("rotate(90deg)" :: Text)
1723:   ".timeline-tool-result" ? do
1724:     borderLeft (px 3) solid "#10b981"
1725:     paddingLeft (px 8)
1726:   ".timeline-tool-result" |> "summary" ? do
1727:     cursor pointer
1728:     listStyleType none
1729:     display flex
1730:     alignItems center
1731:     Stylesheet.key "gap" ("6px" :: Text)
1732:   ".timeline-cost" ? do
1733:     display flex
1734:     alignItems center
1735:     Stylesheet.key "gap" ("6px" :: Text)
1736:     fontSize (px 11)
1737:     color "#6b7280"
1738:     padding (px 2) (px 0) (px 2) (px 0)
1739:   ".timeline-checkpoint" ? do
1740:     borderLeft (px 3) solid "#8b5cf6"
1741:     backgroundColor "#faf5ff"
1742:     padding (px 8) (px 12) (px 8) (px 12)
1743:     borderRadius (px 4) (px 4) (px 4) (px 4)
1744:   ".timeline-checkpoint" |> ".checkpoint-content" ? do
1745:     marginTop (px 6)
1746:     fontSize (px 12)
1747:     whiteSpace preWrap
1748:   ".timeline-guardrail" ? do
1749:     borderLeft (px 3) solid "#f59e0b"
1750:     backgroundColor "#fffbeb"
1751:     padding (px 8) (px 12) (px 8) (px 12)
1752:     borderRadius (px 4) (px 4) (px 4) (px 4)
1753:   ".timeline-guardrail" |> ".guardrail-content" ? do
1754:     marginTop (px 6)
1755:     fontSize (px 12)
1756:     color "#92400e"
1757:   ".timeline-generic" ? do
1758:     padding (px 4) (px 0) (px 4) (px 0)
1759:     color "#6b7280"
1760: 

2095:       ".navbar-dropdown-item" # hover ? do
2096:         backgroundColor "#374151"
2097: 
2098: prefersDark :: Stylesheet.Feature
2099: prefersDark =
2100:   Stylesheet.Feature "prefers-color-scheme" (Just (Clay.value ("dark" :: Text)))
2101: 
2102: statusBadgeClass :: Text -> Text
2103: statusBadgeClass status = case status of
2104:   "Open" -> "badge badge-open"
2105:   "InProgress" -> "badge badge-inprogress"
2106:   "Review" -> "badge badge-review"
2107:   "Approved" -> "badge badge-approved"
2108:   "Done" -> "badge badge-done"
2109:   _ -> "badge"
2110: 
2111: priorityBadgeClass :: Text -> Text
2112: priorityBadgeClass priority = case priority of
2113:   "P0" -> "badge badge-p0"
2114:   "P1" -> "badge badge-p1"
2115:   "P2" -> "badge badge-p2"
2116:   "P3" -> "badge badge-p3"
2117:   "P4" -> "badge badge-p4"
2118:   _ -> "badge"

1825: darkModeStyles :: Css
1826: darkModeStyles =
1827:   query Media.screen [prefersDark] <| do
1828:     body ? do
1829:       backgroundColor "#111827"
1830:       color "#f3f4f6"
1831:     ".card"
1832:       <> ".task-card"
1833:       <> ".stat-card"
1834:       <> ".task-detail"
1835:       <> ".task-summary"
1836:       <> ".filter-form"
1837:       <> ".status-form"
1838:       <> ".diff-section"
1839:       <> ".review-actions"
1840:       <> ".list-group"
1841:       ? do
1842:         backgroundColor "#1f2937"
1843:         borderColor "#374151"
1844:     ".list-group-item" ? borderBottomColor "#374151"
1845:     ".list-group-item" # hover ? backgroundColor "#374151"
1846:     ".list-group-item-id" ? color "#60a5fa"
1847:     ".list-group-item-title" ? color "#d1d5db"
1848:     header ? do
1849:       backgroundColor "#1f2937"
1850:       borderColor "#374151"
1851:     ".navbar" ? do
1852:       backgroundColor "#1f2937"
1853:       borderColor "#374151"
1854:     ".navbar-brand" ? color "#60a5fa"
1855:     ".navbar-link" ? color "#d1d5db"
1856:     ".navbar-link" # hover ? backgroundColor "#374151"
1857:     ".navbar-dropdown-btn" ? color "#d1d5db"
1858:     ".navbar-dropdown-btn" # hover ? backgroundColor "#374151"
1859:     ".navbar-dropdown-content" ? do
1860:       backgroundColor "#1f2937"
1861:       Stylesheet.key "box-shadow" ("0 2px 8px rgba(0,0,0,0.3)" :: Text)
1862:     ".navbar-dropdown-item" ? color "#d1d5db"
1863:     ".navbar-dropdown-item" # hover ? backgroundColor "#374151"
1864:     ".status-dropdown-menu" ? do
1865:       backgroundColor "#1f2937"
1866:       Stylesheet.key "box-shadow" ("0 2px 8px rgba(0,0,0,0.3)" :: Text)
1867:     ".hamburger-line" ? backgroundColor "#d1d5db"
1868:     ".nav-brand" ? color "#f3f4f6"
1869:     "h2" <> "h3" ? color "#d1d5db"
1870:     a ? color "#60a5fa"
1871:     ".breadcrumb-container" ? backgroundColor transparent
1872:     ".breadcrumb-sep" ? color "#6b7280"
1873:     ".breadcrumb-current" ? color "#9ca3af"
1874: 
1875:     ".detail-label"
1876:       <> ".priority"
1877:       <> ".dep-type"
1878:       <> ".child-status"
1879:       <> ".empty-msg"
1880:       <> ".stat-label"
1881:       <> ".priority-desc"
1882:       ? color "#9ca3af"
1883:     ".child-title" ? color "#d1d5db"
1884:     code ? do
1885:       backgroundColor "#374151"
1886:       color "#f3f4f6"
1887:     ".task-meta-id" ? do
1888:       backgroundColor "#374151"
1889:       color "#e5e7eb"
1890:     ".task-meta-secondary" ? color "#9ca3af"
1891:     ".meta-sep" ? color "#4b5563"
1892:     ".task-meta-label" ? color "#9ca3af"
1893:     ".detail-section" ? borderTopColor "#374151"
1894:     ".description" ? do
1895:       backgroundColor "#374151"
1896:       color "#e5e7eb"
1897:     ".badge-open" ? do
1898:       backgroundColor "#78350f"
1899:       color "#fcd34d"
1900:     ".badge-inprogress" ? do
1901:       backgroundColor "#1e3a8a"
1902:       color "#93c5fd"
1903:     ".badge-review" ? do
1904:       backgroundColor "#4c1d95"
1905:       color "#c4b5fd"
1906:     ".badge-approved" ? do
1907:       backgroundColor "#164e63"
1908:       color "#67e8f9"
1909:     ".badge-done" ? do
1910:       backgroundColor "#064e3b"
1911:       color "#6ee7b7"
1912:     ".badge-needshelp" ? do
1913:       backgroundColor "#78350f"
1914:       color "#fcd34d"
1915:     ".badge-p0" ? do
1916:       backgroundColor "#7f1d1d"
1917:       color "#fca5a5"
1918:     ".badge-p1" ? do
1919:       backgroundColor "#78350f"
1920:       color "#fcd34d"
1921:     ".badge-p2" ? do
1922:       backgroundColor "#1e3a8a"
1923:       color "#93c5fd"
1924:     ".badge-p3" ? do
1925:       backgroundColor "#374151"
1926:       color "#d1d5db"
1927:     ".badge-p4" ? do
1928:       backgroundColor "#1f2937"
1929:       color "#9ca3af"
1930:     ".blocking-impact" ? do
1931:       backgroundColor "#374151"
1932:       color "#9ca3af"
1933:     ".priority-dropdown-menu" ? do
1934:       backgroundColor "#1f2937"
1935:       Stylesheet.key "box-shadow" ("0 2px 8px rgba(0,0,0,0.3)" :: Text)
1936:     ".action-btn" ? do
1937:       backgroundColor "#374151"
1938:       borderColor "#4b5563"
1939:       color "#f3f4f6"
1940:     ".action-btn" # hover ? backgroundColor "#4b5563"
1941:     ".filter-select" <> ".filter-input" <> ".status-select" <> ".reject-notes" ? do
1942:       backgroundColor "#374151"
1943:       borderColor "#4b5563"
1944:       color "#f3f4f6"
1945:     ".stats-section" <> ".summary-section" ? do
1946:       backgroundColor "#1f2937"
1947:       borderColor "#374151"
1948: 
1949:     (".stat-card.badge-open" |> ".stat-count") ? color "#fbbf24"
1950:     (".stat-card.badge-inprogress" |> ".stat-count") ? color "#60a5fa"
1951:     (".stat-card.badge-review" |> ".stat-count") ? color "#a78bfa"
1952:     (".stat-card.badge-approved" |> ".stat-count") ? color "#22d3ee"
1953:     (".stat-card.badge-done" |> ".stat-count") ? color "#34d399"
1954:     (".stat-card.badge-neutral" |> ".stat-count") ? color "#9ca3af"
1955: 
1956:     ".progress-bar" ? backgroundColor "#374151"
1957:     ".progress-fill" ? backgroundColor "#60a5fa"
1958:     ".multi-progress-bar" ? backgroundColor "#374151"
1959:     ".progress-legend" ? color "#9ca3af"
1960:     ".activity-section" ? do
1961:       backgroundColor "#1f2937"
1962:       borderColor "#374151"
1963:     ".activity-timeline" # before ? backgroundColor "#374151"
1964:     ".activity-icon" ? do
1965:       backgroundColor "#1f2937"
1966:       borderColor "#374151"
1967:     ".activity-time" ? color "#9ca3af"
1968:     ".activity-message" ? color "#d1d5db"
1969:     (".activity-metadata" |> "summary") ? color "#9ca3af"
1970:     ".metadata-json" ? backgroundColor "#374151"
1971:     ".execution-section" ? do
1972:       backgroundColor "#1f2937"
1973:       borderColor "#374151"
1974: 
1975:     ".metric-label" ? color "#9ca3af"
1976:     ".metric-value" ? color "#d1d5db"
1977:     ".metric-card" ? do
1978:       backgroundColor "#374151"
1979:       borderColor "#4b5563"
1980:     (".metric-card" |> ".metric-value") ? color "#f3f4f6"
1981:     (".metric-card" |> ".metric-label") ? color "#9ca3af"
1982:     ".amp-link" ? color "#60a5fa"
1983:     ".amp-thread-btn" ? do
1984:       backgroundColor "#8b5cf6"
1985:     ".amp-thread-btn" # hover ? backgroundColor "#7c3aed"
1986:     ".markdown-content" ? color "#d1d5db"
1987:     ".commit-item" ? do
1988:       backgroundColor "#374151"
1989:       borderColor "#4b5563"
1990:     ".commit-hash" ? do
1991:       backgroundColor "#4b5563"
1992:       color "#60a5fa"
1993:     ".commit-summary" ? color "#d1d5db"
1994:     ".commit-meta" ? color "#9ca3af"
1995:     ".md-h1" ? borderBottomColor "#374151"
1996:     ".md-code" ? do
1997:       backgroundColor "#1e1e1e"
1998:       color "#d4d4d4"
1999:       borderColor "#374151"
2000:     ".md-inline-code" ? do
2001:       backgroundColor "#374151"
2002:       color "#f3f4f6"
2003:     ".edit-description" ? borderTopColor "#374151"
2004:     (".edit-description" |> "summary") ? color "#60a5fa"
2005:     ".edit-link" ? color "#60a5fa"
2006:     "button.cancel-link" ? do
2007:       color "#f87171"
2008:       backgroundColor transparent
2009:       border (px 0) solid transparent
2010:     ".description-textarea" ? do
2011:       backgroundColor "#374151"
2012:       borderColor "#4b5563"
2013:       color "#f3f4f6"
2014:     ".fact-create-form" ? do
2015:       backgroundColor "#1f2937"
2016:       borderColor "#374151"
2017:     ".time-filter-btn" ? do
2018:       backgroundColor "#374151"
2019:       borderColor "#4b5563"
2020:       color "#d1d5db"
2021:     ".time-filter-btn" # hover ? do
2022:       backgroundColor "#4b5563"
2023:       borderColor "#6b7280"
2024:     ".time-filter-btn.active" ? do
2025:       backgroundColor "#3b82f6"
2026:       borderColor "#3b82f6"
2027:       color white
2028:     ".time-filter-btn.active" # hover ? do
2029:       backgroundColor "#2563eb"
2030:       borderColor "#2563eb"
2031:     ".sort-label" ? color "#9ca3af"
2032:     ".sort-dropdown-btn" ? do
2033:       backgroundColor "#374151"
2034:       borderColor "#4b5563"
2035:       color "#d1d5db"
2036:     ".sort-dropdown-btn" # hover ? do
2037:       backgroundColor "#4b5563"
2038:       borderColor "#6b7280"
2039:     ".sort-dropdown-item.active" ? do
2040:       backgroundColor "#1e3a5f"
2041:     ".comment-card" ? do
2042:       backgroundColor "#374151"
2043:       borderColor "#4b5563"
2044:     ".comment-text" ? color "#d1d5db"
2045:     ".author-human" ? do
2046:       backgroundColor "#1e3a8a"
2047:       color "#93c5fd"
2048:     ".author-junior" ? do
2049:       backgroundColor "#064e3b"
2050:       color "#6ee7b7"
2051:     ".comment-time" ? color "#9ca3af"
2052:     ".comment-textarea" ? do
2053:       backgroundColor "#374151"
2054:       borderColor "#4b5563"
2055:       color "#f3f4f6"
2056:     ".form-input" <> ".form-textarea" ? do
2057:       backgroundColor "#374151"
2058:       borderColor "#4b5563"
2059:       color "#f3f4f6"
2060:     (".form-group" |> label) ? color "#d1d5db"
2061:     ".danger-zone" ? do
2062:       backgroundColor "#450a0a"
2063:       borderColor "#991b1b"
2064:     (".danger-zone" |> h2) ? color "#f87171"
2065:     ".retry-banner-warning" ? do
2066:       backgroundColor "#451a03"
2067:       borderColor "#b45309"
2068:     ".retry-banner-critical" ? do
2069:       backgroundColor "#450a0a"
2070:       borderColor "#dc2626"
2071:     ".retry-attempt" ? color "#d1d5db"
2072:     ".retry-banner-details" ? color "#d1d5db"
2073:     ".retry-value" ? color "#9ca3af"
2074:     ".retry-commit" ? backgroundColor "#374151"
2075:     ".event-bubble" ? backgroundColor "#374151"
2076:     ".comment-bubble" ? do
2077:       backgroundColor "#374151"
2078:       color "#d1d5db"
2079:     ".thought-bubble" ? do
2080:       backgroundColor "#44403c"
2081:       color "#d6d3d1"
2082:     ".event-label" ? color "#d1d5db"
2083:     ".line-count" ? do
2084:       backgroundColor "#374151"
2085:       color "#9ca3af"
2086:     ".event-error" ? do
2087:       backgroundColor "#450a0a"
2088:       borderColor "#dc2626"
2089:     ".event-error" |> ".event-label" ? color "#f87171"
2090:     ".error-message" ? color "#f87171"
2091:     -- Responsive dark mode: dropdown content needs background on mobile
2092:     query Media.screen [Media.maxWidth (px 600)] <| do
2093:       ".navbar-dropdown-content" ? do
2094:         backgroundColor "#1f2937"
2095:       ".navbar-dropdown-item" # hover ? do

113:    formatToolCallSummary,
114:    renderCollapsibleOutput,
115:    renderDecodedToolResult,
1326:      summary = formatToolCallSummary toolName args
1334:          renderCollapsibleOutput args
1346:        Lucid.pre_ [Lucid.class_ "event-content tool-output"] (renderDecodedToolResult content)
1385:formatToolCallSummary :: Text -> Text -> Text
1386:formatToolCallSummary toolName argsJson =
1403:renderCollapsibleOutput :: (Monad m) => Text -> Lucid.HtmlT m ()
1404:renderCollapsibleOutput content =
1413:renderDecodedToolResult :: (Monad m) => Text -> Lucid.HtmlT m ()
1414:renderDecodedToolResult content =

1403: renderCollapsibleOutput :: (Monad m) => Text -> Lucid.HtmlT m ()
1404: renderCollapsibleOutput content =
1405:   let lineCount = length (Text.lines content)
1406:    in if lineCount > 20
1407:         then
1408:           Lucid.details_ [Lucid.class_ "output-collapsible"] <| do
1409:             Lucid.summary_ (Lucid.toHtml (tshow lineCount <> " lines"))
1410:             Lucid.pre_ [Lucid.class_ "tool-output-pre"] (Lucid.toHtml content)
1411:         else Lucid.pre_ [Lucid.class_ "tool-output-pre"] (Lucid.toHtml content)
1412: 
1413: renderDecodedToolResult :: (Monad m) => Text -> Lucid.HtmlT m ()
1414: renderDecodedToolResult content =
1415:   case Aeson.decode (LBS.fromStrict (str content)) of
1416:     Just (Aeson.Object obj) ->
1417:       case KeyMap.lookup "output" obj of
1418:         Just (Aeson.String output) -> Lucid.toHtml output
1419:         _ -> Lucid.toHtml content
1420:     _ -> Lucid.toHtml content
1421: 
1422: timelineScrollScript :: (Monad m) => Lucid.HtmlT m ()
1423: timelineScrollScript =
1424:   Lucid.script_
1425:     [ Lucid.type_ "text/javascript"

1: {-# LANGUAGE DataKinds #-}
2: {-# LANGUAGE OverloadedStrings #-}
3: {-# LANGUAGE NoImplicitPrelude #-}
4: 
5: -- : dep lucid
6: -- : dep servant-lucid
7: module Omni.Jr.Web.Components
8:   ( -- * Time formatting
9:     formatRelativeTime,
10:     relativeText,
11:     formatExactTimestamp,
12:     renderRelativeTimestamp,
13: 
14:     -- * Small components
15:     metaSep,
16: 
17:     -- * Page layout
18:     pageHead,
19:     pageBody,
20:     pageBodyWithCrumbs,
21:     navbar,
22: 
23:     -- * JavaScript
24:     navbarDropdownJs,
25:     statusDropdownJs,
26:     priorityDropdownJs,
27:     liveToggleJs,
28: 
29:     -- * Breadcrumbs
30:     Breadcrumb (..),
31:     Breadcrumbs,
32:     renderBreadcrumbs,
33:     getAncestors,
34:     taskBreadcrumbs,
35: 
36:     -- * Badges
37:     statusBadge,
38:     complexityBadge,
39:     statusBadgeWithForm,
40:     clickableBadge,
41:     statusDropdownOptions,
42:     statusOption,
43:     priorityBadgeWithForm,
44:     clickablePriorityBadge,
45:     priorityDropdownOptions,
46:     priorityOption,
47: 
48:     -- * Sorting
49:     sortDropdown,
50:     sortOption,

120: import Alpha
121: import qualified Data.Aeson as Aeson
122: import qualified Data.Aeson.KeyMap as KeyMap
123: import qualified Data.ByteString.Lazy as LBS
124: import qualified Data.List as List
125: import qualified Data.Text as Text
126: import Data.Time (NominalDiffTime, UTCTime, defaultTimeLocale, diffUTCTime, formatTime)
127: import qualified Lucid
128: import qualified Lucid.Base as Lucid
129: import Numeric (showFFloat)
130: import Omni.Jr.Web.Types (SortOrder (..), sortOrderLabel, sortOrderToParam)
131: import qualified Omni.Task.Core as TaskCore
132: 
133: -- * Time formatting
134: 
135: formatRelativeTime :: UTCTime -> UTCTime -> Text
136: formatRelativeTime now timestamp =
137:   let delta = diffUTCTime now timestamp
138:    in relativeText delta
139: 
140: relativeText :: NominalDiffTime -> Text
141: relativeText delta
142:   | delta < 60 = "just now"
143:   | delta < 3600 = tshow (round (delta / 60) :: Int) <> " minutes ago"
144:   | delta < 7200 = "1 hour ago"
145:   | delta < 86400 = tshow (round (delta / 3600) :: Int) <> " hours ago"
146:   | delta < 172800 = "yesterday"
147:   | delta < 604800 = tshow (round (delta / 86400) :: Int) <> " days ago"
148:   | delta < 1209600 = "1 week ago"
149:   | delta < 2592000 = tshow (round (delta / 604800) :: Int) <> " weeks ago"
150:   | delta < 5184000 = "1 month ago"
151:   | delta < 31536000 = tshow (round (delta / 2592000) :: Int) <> " months ago"
152:   | otherwise = tshow (round (delta / 31536000) :: Int) <> " years ago"
153: 
154: formatExactTimestamp :: UTCTime -> Text
155: formatExactTimestamp = Text.pack <. formatTime defaultTimeLocale "%Y-%m-%d %H:%M:%S UTC"
156: 
157: renderRelativeTimestamp :: (Monad m) => UTCTime -> UTCTime -> Lucid.HtmlT m ()
158: renderRelativeTimestamp now timestamp =
159:   Lucid.span_
160:     [ Lucid.class_ "relative-time",
161:       Lucid.title_ (formatExactTimestamp timestamp)
162:     ]
163:     (Lucid.toHtml (formatRelativeTime now timestamp))
164: 
165: -- * Small components

110:     renderGuardrailEvent,
111:     renderGenericEvent,
112:     parseToolCallContent,
113:     formatToolCallSummary,
114:     renderCollapsibleOutput,
115:     renderDecodedToolResult,
116:     timelineScrollScript,
117:   )
118: where
119: 
120: import Alpha