✨ feat(project-activity): Implement time tracking and visualization

Author: almoce

src/__tests__/components/FocusOverlay.test.tsx

@@ -22,6 +22,11 @@ vi.mock("framer-motion", () => ({
         {children}
       </div>
     ),
+    span: ({ children, className, ...props }: any) => (
+      <span className={className} {...props}>
+        {children}
+      </span>
+    ),
   },
 }));
 
@@ -63,8 +68,7 @@ describe("FocusOverlay", () => {
   it("renders timer view when active", () => {
     render(<FocusOverlay />);
     expect(screen.getByText("Test Task")).toBeInTheDocument();
-    expect(screen.getByText("Focus Session")).toBeInTheDocument();
-    expect(screen.getByText("00:00:00")).toBeInTheDocument();
+    expect(screen.getAllByText("0")).toHaveLength(6);
   });
 
   it("toggles timer on button click", () => {
@@ -90,6 +94,6 @@ describe("FocusOverlay", () => {
     const completeButton = screen.getByRole("button", { name: "Complete task" });
     fireEvent.click(completeButton);
 
-    expect(screen.getByText("Focus session ended")).toBeInTheDocument();
+    expect(screen.getByText("Session Complete")).toBeInTheDocument();
   });
 });

src/__tests__/components/ProjectMiniChart.test.tsx

@@ -1,21 +1,32 @@
-import { render, screen } from "@testing-library/react";
+import { render, screen, waitFor } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
 import { ProjectMiniChart } from "@/components/project-view/ProjectMiniChart";
 import * as useProjectChartDataHook from "@/hooks/useProjectChartData";
 
 vi.mock("@/hooks/useProjectChartData");
 
 describe("ProjectMiniChart", () => {
-  it("renders correctly with data", () => {
+  it("renders correctly with data", async () => {
     vi.mocked(useProjectChartDataHook.useProjectChartData).mockReturnValue([
-      { date: "Mon", fullDate: "Jan 5", completed: 1, created: 2 },
-      { date: "Tue", fullDate: "Jan 6", completed: 2, created: 1 },
+      { date: "Mon", fullDate: "Jan 5", completed: 1, created: 2, timeSpent: 1.5 },
+      { date: "Tue", fullDate: "Jan 6", completed: 2, created: 1, timeSpent: 3.0 },
     ]);
 
+    // Mock clientWidth
+    Object.defineProperty(window.SVGElement.prototype, "clientWidth", {
+      value: 500,
+      configurable: true,
+    });
+
     render(<ProjectMiniChart projectId="p1" />);
 
     expect(screen.getByText("Week Activity")).toBeInTheDocument();
-    // SVG is rendered
-    expect(document.querySelector("svg")).toBeInTheDocument();
+    
+    // Wait for D3 to render
+    await waitFor(() => {
+        const svg = screen.getByTestId("mini-chart-svg");
+        expect(svg).toBeInTheDocument();
+        expect(svg.querySelectorAll("path").length).toBe(4);
+    });
   });
 });

src/__tests__/components/ProjectSummary.test.tsx

@@ -1,6 +1,7 @@
 import { render, screen } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
 import { ProjectSummary } from "@/components/project-view/ProjectSummary";
+import * as useProjectChartDataHook from "@/hooks/useProjectChartData";
 
 // Mock child components to isolate the test
 vi.mock("@/components/project-view/ProjectStatsCard", () => ({
@@ -11,8 +12,15 @@ vi.mock("@/components/project-view/ProjectMiniChart", () => ({
   ProjectMiniChart: () => <div data-testid="mini-chart">Mini Chart</div>,
 }));
 
+vi.mock("@/hooks/useProjectChartData");
+
 describe("ProjectSummary", () => {
-  it("renders both child components", () => {
+  it("renders child components and time metrics", () => {
+    vi.mocked(useProjectChartDataHook.useProjectChartData).mockReturnValue([
+      { date: "Mon", fullDate: "Jan 5", completed: 1, created: 2, timeSpent: 1.5 },
+      { date: "Tue", fullDate: "Jan 6", completed: 2, created: 1, timeSpent: 2.5 },
+    ]);
+
     render(<ProjectSummary projectId="p1" projectColor="#000" />);
     expect(screen.getByTestId("stats-card")).toBeInTheDocument();
     expect(screen.getByTestId("mini-chart")).toBeInTheDocument();

src/__tests__/hooks/useProjectChartData_time.test.ts

@@ -0,0 +1,52 @@
+import { renderHook } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { useProjectChartData } from "@/hooks/useProjectChartData";
+import { useStore } from "@/store/useStore";
+
+describe("useProjectChartData Time Aggregation", () => {
+  beforeEach(() => {
+    useStore.getState().reset();
+    vi.useFakeTimers();
+    vi.setSystemTime(new Date("2026-01-11T12:00:00Z")); // Jan 11 is Sun
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it("should aggregate timeSpentPerDay into chart data", () => {
+    const project = useStore.getState().addProject("Test Project");
+    const task1 = useStore.getState().addTask(project.id, "Task 1");
+    const task2 = useStore.getState().addTask(project.id, "Task 2");
+
+    // Jan 11 (Sun): 1h on task1
+    vi.setSystemTime(new Date("2026-01-11T12:00:00Z"));
+    useStore.getState().updateTaskTime(task1.id, 3600000);
+
+    // Verify task state directly
+    const t1 = useStore.getState().tasks.find(t => t.id === task1.id);
+    expect(t1?.timeSpentPerDay?.["2026-01-11"]).toBe(3600000);
+
+    // Jan 10 (Sat): 30m on task1, 30m on task2
+    vi.setSystemTime(new Date("2026-01-10T12:00:00Z"));
+    useStore.getState().updateTaskTime(task1.id, 1800000);
+    useStore.getState().updateTaskTime(task2.id, 1800000);
+
+    // Set time back to "today" (Sun Jan 11) before hook runs
+    vi.setSystemTime(new Date("2026-01-11T12:00:00Z"));
+
+    const { result } = renderHook(() => useProjectChartData(project.id, "week"));
+
+    // Verify Sun (Jan 11)
+    const sunData = result.current.find(d => d.date === "Sun");
+    expect(sunData?.timeSpent).toBe(1); // 1 hour
+
+    // Verify Sat (Jan 10)
+    const satData = result.current.find(d => d.date === "Sat");
+    expect(satData?.timeSpent).toBe(1); // 30m + 30m = 1 hour
+
+    // Verify Fri (Jan 09)
+    const friData = result.current.find(d => d.date === "Fri");
+    expect(friData?.timeSpent).toBe(0);
+  });
+});

src/__tests__/hooks/useProjectStats.test.ts

@@ -16,6 +16,7 @@ describe("useProjectStats", () => {
       inProgress: 0,
       done: 0,
       progress: 0,
+      totalTimeSpent: 0,
     });
   });
 
@@ -41,6 +42,7 @@ describe("useProjectStats", () => {
       inProgress: 1,
       done: 1,
       progress: 33, // (1/3) * 100 = 33.33 -> 33
+      totalTimeSpent: 0,
     });
   });
 
@@ -63,6 +65,7 @@ describe("useProjectStats", () => {
       inProgress: 0,
       done: 0,
       progress: 0,
+      totalTimeSpent: 0,
     });
   });
 
@@ -75,6 +78,7 @@ describe("useProjectStats", () => {
       inProgress: 0,
       done: 0,
       progress: 0,
+      totalTimeSpent: 0,
     });
   });
 });

src/__tests__/store/focusSlice.test.ts

@@ -0,0 +1,67 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { useStore } from "@/store/useStore";
+
+describe("FocusSlice", () => {
+  beforeEach(() => {
+    useStore.getState().reset();
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it("should track time spent per day correctly", () => {
+    // Setup: Create task
+    const project = useStore.getState().addProject("Test Project");
+    const task = useStore.getState().addTask(project.id, "Test Task");
+    
+    // Set a specific date
+    const dateStr = "2024-01-20";
+    vi.setSystemTime(new Date(dateStr + "T12:00:00Z"));
+
+    // Action: Update time
+    useStore.getState().updateTaskTime(task.id, 3600000); // 1 hour
+
+    // Verify
+    const updatedTask = useStore.getState().tasks.find(t => t.id === task.id);
+    expect(updatedTask?.totalTimeSpent).toBe(3600000);
+    expect(updatedTask?.timeSpentPerDay).toBeDefined();
+    // Keys in Record<string, number> are ISO date strings YYYY-MM-DD usually, 
+    // but I need to decide on the key format. ISO date string YYYY-MM-DD is standard.
+    expect(updatedTask?.timeSpentPerDay?.[dateStr]).toBe(3600000);
+  });
+
+  it("should accumulate time for the same day", () => {
+    const project = useStore.getState().addProject("Test Project");
+    const task = useStore.getState().addTask(project.id, "Test Task");
+    const dateStr = "2024-01-20";
+    vi.setSystemTime(new Date(dateStr + "T12:00:00Z"));
+
+    useStore.getState().updateTaskTime(task.id, 1000);
+    useStore.getState().updateTaskTime(task.id, 2000);
+
+    const updatedTask = useStore.getState().tasks.find(t => t.id === task.id);
+    expect(updatedTask?.timeSpentPerDay?.[dateStr]).toBe(3000);
+  });
+
+  it("should track time for different days separately", () => {
+    const project = useStore.getState().addProject("Test Project");
+    const task = useStore.getState().addTask(project.id, "Test Task");
+    
+    // Day 1
+    const date1 = "2024-01-20";
+    vi.setSystemTime(new Date(date1 + "T12:00:00Z"));
+    useStore.getState().updateTaskTime(task.id, 1000);
+
+    // Day 2
+    const date2 = "2024-01-21";
+    vi.setSystemTime(new Date(date2 + "T12:00:00Z"));
+    useStore.getState().updateTaskTime(task.id, 2000);
+
+    const updatedTask = useStore.getState().tasks.find(t => t.id === task.id);
+    expect(updatedTask?.timeSpentPerDay?.[date1]).toBe(1000);
+    expect(updatedTask?.timeSpentPerDay?.[date2]).toBe(2000);
+    expect(updatedTask?.totalTimeSpent).toBe(3000);
+  });
+});

src/__tests__/store/useStore.test.ts

@@ -30,8 +30,19 @@ describe("useStore (New Store)", () => {
     expect(state.tasks[0]).toEqual(task);
   });
 
-  it("should change active view", () => {
-    useStore.getState().setActiveView("analytics");
-    expect(useStore.getState().activeView).toBe("analytics");
+  it("should pause focus session and record time", () => {
+    const project = useStore.getState().addProject("Test Project");
+    const task = useStore.getState().addTask(project.id, "Test Task");
+    
+    useStore.getState().startFocusSession(task.id);
+    expect(useStore.getState().isFocusModeActive).toBe(true);
+    
+    // Pause session with 5 minutes elapsed
+    useStore.getState().pauseFocusSession(300000);
+    
+    const state = useStore.getState();
+    expect(state.isFocusModeActive).toBe(false);
+    expect(state.tasks[0].totalTimeSpent).toBe(300000);
+    expect(state.activeFocusTaskId).toBeNull();
   });
 });

src/components/focus/FocusOverlay.tsx

@@ -19,6 +19,7 @@ export function FocusOverlay() {
   const {
     isFocusModeActive,
     activeFocusTaskId,
+    pauseFocusSession,
     endFocusSession,
     cancelFocusSession,
     updateTaskTime,
@@ -31,6 +32,7 @@ export function FocusOverlay() {
     elapsedTime,
     isRunning,
     setIsRunning,
+    toggleTimer,
     showSummary,
     setShowSummary,
     summaryNote,
@@ -39,25 +41,48 @@ export function FocusOverlay() {
     setShowCancelDialog,
     handleCloseAttempt,
     handleConfirmCancel,
+    
+    // Editing props
+    isEditing,
+    editedTime,
+    handleTimeEdit,
+    isDirty,
+    showConfirmResume,
+    confirmTimeUpdate,
+    cancelTimeUpdate,
   } = useFocusTimer({
     isFocusModeActive,
     task,
     cancelFocusSession,
+    initialTime: task?.totalTimeSpent || 0,
   });
 
-  const formatTime = (ms: number) => {
-    const seconds = Math.floor((ms / 1000) % 60);
-    const minutes = Math.floor((ms / (1000 * 60)) % 60);
-    const hours = Math.floor(ms / (1000 * 60 * 60));
+  const formatDuration = (ms: number) => {
+    const totalSeconds = Math.floor(ms / 1000);
+    const minutes = Math.floor(totalSeconds / 60);
+    const seconds = totalSeconds % 60;
+    
+    if (minutes === 0) return `${seconds}s`;
+    return `${minutes}m ${seconds}s`;
+  };
 
-    const pad = (num: number) => num.toString().padStart(2, "0");
-    return `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;
+  const handleBreak = () => {
+    if (activeFocusTaskId) {
+      const finalTime = isDirty ? editedTime : elapsedTime;
+      const sessionDuration = finalTime - (task?.totalTimeSpent || 0);
+      pauseFocusSession(sessionDuration);
+      toast.info("Session paused", {
+        description: `Recorded ${formatDuration(sessionDuration)} of focus time.`,
+      });
+    }
   };
 
   const handleFinish = () => {
     if (activeFocusTaskId) {
+      const finalTime = isDirty ? editedTime : elapsedTime;
+      const sessionDuration = finalTime - (task?.totalTimeSpent || 0);
       // Record time
-      updateTaskTime(activeFocusTaskId, elapsedTime);
+      updateTaskTime(activeFocusTaskId, sessionDuration);
 
       // Update status and description
       const updates: any = { status: "done" };
@@ -67,7 +92,7 @@ export function FocusOverlay() {
       updateTask(activeFocusTaskId, updates);
 
       toast.success("Task completed!", {
-        description: `Focused for ${formatTime(elapsedTime)}`,
+        description: `Total time focused: ${formatDuration(finalTime)}`,
       });
     }
     endFocusSession();
@@ -90,12 +115,21 @@ export function FocusOverlay() {
               taskDescription={task.description}
               elapsedTime={elapsedTime}
               isRunning={isRunning}
-              onToggleTimer={() => setIsRunning(!isRunning)}
+              onToggleTimer={toggleTimer}
+              onBreak={handleBreak}
               onEndSession={() => {
                 setIsRunning(false);
                 setShowSummary(true);
               }}
               onClose={handleCloseAttempt}
+              
+              // Editing props
+              isEditing={!isRunning} // Always allow editing when paused
+              editedTime={editedTime}
+              onTimeEdit={handleTimeEdit}
+              showConfirmResume={showConfirmResume}
+              onConfirmResume={confirmTimeUpdate}
+              onCancelResume={cancelTimeUpdate}
             />
           ) : (
             <div className="flex flex-col items-center justify-center h-full text-center max-w-2xl mx-auto">