display work time in issue detail pane

packages/frontend/src/components/issue-detail-pane.tsx

@@ -5,6 +5,7 @@ import { useSession } from "@/components/session-provider";
 import SmallUserDisplay from "@/components/small-user-display";
 import { StatusSelect } from "@/components/status-select";
 import StatusTag from "@/components/status-tag";
+import { TimerDisplay } from "@/components/timer-display";
 import { TimerModal } from "@/components/timer-modal";
 import { Button } from "@/components/ui/button";
 import { ConfirmDialog } from "@/components/ui/confirm-dialog";
@@ -192,11 +193,10 @@ export function IssueDetailPane({
                     <SmallUserDisplay user={issueData.Creator} className={"text-sm"} />
                 </div>
 
-                {user?.id === Number(assigneeId) && (
-                    <div>
-                        <TimerModal issueId={issueData.Issue.id} />
-                    </div>
-                )}
+                <div className="flex items-center gap-2">
+                    {user?.id === Number(assigneeId) && <TimerModal issueId={issueData.Issue.id} />}
+                    <TimerDisplay issueId={issueData.Issue.id} />
+                </div>
                 <ConfirmDialog
                     open={deleteOpen}
                     onOpenChange={setDeleteOpen}

packages/frontend/src/components/issue-timer.tsx

@@ -1,31 +1,10 @@
+import type { TimerState } from "@issue/shared";
 import { useEffect, useState } from "react";
 import { Button } from "@/components/ui/button";
 import { timer } from "@/lib/server";
-import { cn } from "@/lib/utils";
+import { cn, formatTime } from "@/lib/utils";
 
-type TimerState = {
-    id: number;
-    workTimeMs: number;
-    breakTimeMs: number;
-    isRunning: boolean;
-    timestamps: string[];
-    endedAt: string | null;
-} | null;
-
-function formatTime(ms: number): string {
-    const totalSeconds = Math.floor(ms / 1000);
-    const hours = Math.floor(totalSeconds / 3600);
-    const minutes = Math.floor((totalSeconds % 3600) / 60);
-    const seconds = totalSeconds % 60;
-    return `${hours.toString().padStart(2, "0")}:${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
-}
-
-interface IssueTimerProps {
-    issueId: number;
-    onEnd?: (data: TimerState) => void;
-}
-
-export function IssueTimer({ issueId, onEnd }: IssueTimerProps) {
+export function IssueTimer({ issueId, onEnd }: { issueId: number; onEnd?: (data: TimerState) => void }) {
     const [timerState, setTimerState] = useState<TimerState>(null);
     const [displayTime, setDisplayTime] = useState(0);
     const [error, setError] = useState<string | null>(null);

packages/frontend/src/components/timer-display.tsx

@@ -0,0 +1,81 @@
+import type { TimerState } from "@issue/shared";
+import { useEffect, useState } from "react";
+import { timer } from "@/lib/server";
+import { formatTime } from "@/lib/utils";
+
+const FALLBACK_TIME = "--:--:--";
+const REFRESH_INTERVAL_MS = 10000;
+
+export function TimerDisplay({ issueId }: { issueId: number }) {
+    const [timerState, setTimerState] = useState<TimerState>(null);
+    const [workTimeMs, setWorkTimeMs] = useState(0);
+    const [inactiveWorkTimeMs, setInactiveWorkTimeMs] = useState(0);
+    const [error, setError] = useState<string | null>(null);
+
+    useEffect(() => {
+        let isMounted = true;
+
+        const fetchTimer = () => {
+            timer.get({
+                issueId,
+                onSuccess: (data) => {
+                    if (!isMounted) return;
+                    setTimerState(data);
+                    setWorkTimeMs(data?.workTimeMs ?? 0);
+                    setError(null);
+                },
+                onError: (message) => {
+                    if (!isMounted) return;
+                    setError(message);
+                },
+            });
+
+            timer.getInactive({
+                issueId,
+                onSuccess: (data) => {
+                    if (!isMounted) return;
+                    const sessions = (data ?? []) as TimerState[];
+                    const totalWorkTime = sessions.reduce(
+                        (total, session) => total + (session?.workTimeMs ?? 0),
+                        0,
+                    );
+                    setInactiveWorkTimeMs(totalWorkTime);
+                    setError(null);
+                },
+                onError: (message) => {
+                    if (!isMounted) return;
+                    setError(message);
+                },
+            });
+        };
+
+        fetchTimer();
+        const refreshInterval = window.setInterval(fetchTimer, REFRESH_INTERVAL_MS);
+
+        return () => {
+            isMounted = false;
+            window.clearInterval(refreshInterval);
+        };
+    }, [issueId]);
+
+    useEffect(() => {
+        if (!timerState?.isRunning) return;
+
+        const startTime = Date.now();
+        const baseWorkTime = timerState.workTimeMs;
+        const interval = window.setInterval(() => {
+            setWorkTimeMs(baseWorkTime + (Date.now() - startTime));
+        }, 1000);
+
+        return () => window.clearInterval(interval);
+    }, [timerState?.isRunning, timerState?.workTimeMs]);
+
+    const totalWorkTimeMs = inactiveWorkTimeMs + workTimeMs;
+    const displayWorkTime = error ? FALLBACK_TIME : formatTime(totalWorkTimeMs);
+
+    return (
+        <div className="flex items-center gap-2 text-sm text-muted-foreground">
+            <span className="font-mono tabular-nums">{displayWorkTime}</span>
+        </div>
+    );
+}