From 3c05a614b372c131f6832f31b04c61c97083ce4f Mon Sep 17 00:00:00 2001
From: chihlasm <michael@chihlas.com>
Date: Sun, 15 Mar 2026 15:55:37 -0400
Subject: [PATCH] fix: sidebar In Session timer ticks every second and shows
 seconds

Timer now uses 1s interval (not 60s) and displays seconds when under
a minute so it matches the session timer in the flow UI.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../components/sidebar/SidebarStatsBar.tsx    | 31 ++++++++++---------
 1 file changed, 17 insertions(+), 14 deletions(-)

diff --git a/frontend/src/components/sidebar/SidebarStatsBar.tsx b/frontend/src/components/sidebar/SidebarStatsBar.tsx
index 3fd0645b..7c919b1a 100644
--- a/frontend/src/components/sidebar/SidebarStatsBar.tsx
+++ b/frontend/src/components/sidebar/SidebarStatsBar.tsx
@@ -9,34 +9,37 @@ interface SidebarStatsBarProps {
   activeSessionStartTimes: string[]
 }
 
-function formatDuration(minutes: number): string {
-  if (minutes < 60) return `${minutes}m`
-  const h = Math.floor(minutes / 60)
-  const m = minutes % 60
+function formatDuration(totalSeconds: number): string {
+  if (totalSeconds < 60) return `${totalSeconds}s`
+  const totalMinutes = Math.floor(totalSeconds / 60)
+  if (totalMinutes < 60) return `${totalMinutes}m`
+  const h = Math.floor(totalMinutes / 60)
+  const m = totalMinutes % 60
   return m > 0 ? `${h}h ${m}m` : `${h}h`
 }
 
-function calcActiveMinutes(startTimes: string[]): number {
+function calcActiveSeconds(startTimes: string[]): number {
   const now = Date.now()
   return startTimes.reduce((sum, st) => {
-    const elapsed = Math.floor((now - new Date(st).getTime()) / 60000)
+    const elapsed = Math.floor((now - new Date(st).getTime()) / 1000)
     return sum + Math.max(0, elapsed)
   }, 0)
 }
 
 export function SidebarStatsBar({ resolved, active, completedMinutes, activeSessionStartTimes }: SidebarStatsBarProps) {
-  const [liveMinutes, setLiveMinutes] = useState(() => calcActiveMinutes(activeSessionStartTimes))
+  const [liveSeconds, setLiveSeconds] = useState(() => calcActiveSeconds(activeSessionStartTimes))
 
-  // Tick every 60s to keep the timer live
+  // Tick every second to keep the timer in sync with the session timer
   useEffect(() => {
-    setLiveMinutes(calcActiveMinutes(activeSessionStartTimes))
+    setLiveSeconds(calcActiveSeconds(activeSessionStartTimes))
+    if (activeSessionStartTimes.length === 0) return
     const interval = setInterval(() => {
-      setLiveMinutes(calcActiveMinutes(activeSessionStartTimes))
-    }, 60000)
+      setLiveSeconds(calcActiveSeconds(activeSessionStartTimes))
+    }, 1000)
     return () => clearInterval(interval)
   }, [activeSessionStartTimes])
 
-  const totalMinutes = completedMinutes + liveMinutes
+  const totalSeconds = (completedMinutes * 60) + liveSeconds
 
   return (
     <div
@@ -71,9 +74,9 @@ export function SidebarStatsBar({ resolved, active, completedMinutes, activeSess
       <div className="flex-1 rounded-md bg-[rgba(255,255,255,0.02)] px-1 py-1.5 text-center">
         <div
           className="font-label text-sm font-semibold leading-none text-muted-foreground"
-          aria-label={`${formatDuration(totalMinutes)} in session today`}
+          aria-label={`${formatDuration(totalSeconds)} in session today`}
         >
-          {formatDuration(totalMinutes)}
+          {formatDuration(totalSeconds)}
         </div>
         <div className="mt-1 font-label text-[7px] uppercase tracking-[0.1em] text-[#3d4350]">
           In Session