From e6e3bf094be6e39c891e6af911e6a635fa2fbcd6 Mon Sep 17 00:00:00 2001
From: arkon <arkon.85@hotmail.com>
Date: Sun, 18 Jan 2026 22:37:02 +0100
Subject: [PATCH] feat(ui): add started time display in timer banner

- Show start time in timer banner (e.g., "Started: 14:30")
- Style with monospace font for consistent width

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/web/public/app.js     | 6 ++++++
 src/web/public/index.html | 1 +
 src/web/public/styles.css | 5 +++++
 3 files changed, 12 insertions(+)

diff --git a/src/web/public/app.js b/src/web/public/app.js
index ed80a5cb..635ef393 100644
--- a/src/web/public/app.js
+++ b/src/web/public/app.js
@@ -1073,6 +1073,12 @@ class ClaudemanApp {
   // Timer
   showTimer() {
     document.getElementById('timerBanner').style.display = 'block';
+    // Set started time
+    if (this.currentRun && this.currentRun.startedAt) {
+      const startDate = new Date(this.currentRun.startedAt);
+      const timeStr = startDate.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+      document.getElementById('timerStarted').textContent = `Started: ${timeStr}`;
+    }
     this.updateTimer();
   }
 
diff --git a/src/web/public/index.html b/src/web/public/index.html
index 5095bcfe..46174e88 100644
--- a/src/web/public/index.html
+++ b/src/web/public/index.html
@@ -49,6 +49,7 @@
         <div class="timer-progress-fill" id="timerProgress"></div>
       </div>
       <div class="timer-meta">
+        <span id="timerStarted" class="timer-started">Started: --:--</span>
         <span id="timerTasks">0 tasks completed</span>
         <span id="timerCost">$0.00</span>
         <button class="btn btn-sm btn-danger" onclick="app.stopCurrentRun()">Stop</button>
diff --git a/src/web/public/styles.css b/src/web/public/styles.css
index 219e5ccd..67626d40 100644
--- a/src/web/public/styles.css
+++ b/src/web/public/styles.css
@@ -175,6 +175,11 @@ body {
   color: var(--text-dim);
 }
 
+.timer-started {
+  font-family: 'SF Mono', Monaco, monospace;
+  color: var(--text-muted);
+}
+
 /* Main */
 .main {
   display: grid;