chihlasm/resolutionflow
1
0
Fork 0
Code Issues 23 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix: sidebar In Session timer ticks every second and shows seconds

Browse Source 
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>
This commit is contained in:
chihlasm
2026-03-15 15:55:37 -04:00
parent d0af8357a6
commit 3c05a614b3
1 changed files with 17 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
frontend/src/components/sidebar/SidebarStatsBar.tsx
View File

@@ -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