feat(web): show repository index job runtime #1623
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| import { act, cleanup, render, screen } from "@testing-library/react"; | ||
| import { afterEach, describe, expect, test, vi } from "vitest"; | ||
| import { SyncingBadge } from "./syncingBadge"; | ||
|
|
||
| afterEach(() => { | ||
| cleanup(); | ||
| vi.useRealTimers(); | ||
| }); | ||
|
|
||
| describe("SyncingBadge", () => { | ||
| test("shows a live job duration", () => { | ||
| vi.useFakeTimers(); | ||
| vi.setSystemTime(new Date("2026-08-31T12:00:00.000Z")); | ||
| render( | ||
| <SyncingBadge startedAt={Date.now() - 90_000} />, | ||
| ); | ||
|
|
||
| expect(screen.getByText("Syncing")).toBeTruthy(); | ||
| expect(screen.getByText("1m 30s")).toBeTruthy(); | ||
|
|
||
| act(() => vi.advanceTimersByTime(1_000)); | ||
|
|
||
| expect(screen.getByText("1m 31s")).toBeTruthy(); | ||
| }); | ||
|
|
||
| test("shows pending while the indexing job is waiting to start", () => { | ||
| render(<SyncingBadge startedAt={null} />); | ||
|
|
||
| expect(screen.getByText("Pending")).toBeTruthy(); | ||
| expect(screen.queryByText("Syncing")).toBeNull(); | ||
| expect(screen.queryByText(/\d+s/)).toBeNull(); | ||
| }); | ||
| }); |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,59 @@ | ||
| "use client"; | ||
|
|
||
| import { Badge } from "@/components/ui/badge"; | ||
| import { Loader2 } from "lucide-react"; | ||
| import { useEffect, useState } from "react"; | ||
|
|
||
| const DURATION_UPDATE_INTERVAL_MS = 1_000; | ||
|
|
||
| const formatJobDuration = (durationMs: number) => { | ||
| const totalSeconds = Math.max(0, Math.floor(durationMs / 1_000)); | ||
| const days = Math.floor(totalSeconds / 86_400); | ||
| const hours = Math.floor(totalSeconds / 3_600) % 24; | ||
| const minutes = Math.floor(totalSeconds / 60) % 60; | ||
| const seconds = totalSeconds % 60; | ||
|
|
||
| return [ | ||
| days > 0 ? `${days}d` : null, | ||
| days > 0 || hours > 0 ? `${hours}h` : null, | ||
| days > 0 || hours > 0 || minutes > 0 ? `${minutes}m` : null, | ||
| `${seconds}s`, | ||
| ].filter(Boolean).join(" "); | ||
| }; | ||
|
|
||
| type SyncingBadgeProps = { | ||
| startedAt: number | null; | ||
| }; | ||
|
|
||
| export const SyncingBadge = ({ startedAt }: SyncingBadgeProps) => { | ||
| const [currentTime, setCurrentTime] = useState(() => Date.now()); | ||
|
Contributor
There was a problem hiding this comment. 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win 🔎 Supported by static analysis🏁 Script executed: #!/bin/bash
set -eu
printf '%s\n' '--- applicable repository guidance ---'
find /tmp/coderabbit-repo-knowledge/sourcebot-dev-sourcebot-e3ed5267 -maxdepth 2 -type f -name '*.md' -print
printf '%s\n' '--- target file outline ---'
ast-grep outline 'packages/web/src/app/(app)/repos/components/syncingBadge.tsx' --view expanded
printf '%s\n' '--- target file ---'
cat -n 'packages/web/src/app/(app)/repos/components/syncingBadge.tsx'Repository: sourcebot-dev/sourcebot Length of output: 4636 🏁 Script executed: #!/bin/bash
set -eu
printf '%s\n' '--- target-scope conventions ---'
cat /tmp/coderabbit-repo-knowledge/sourcebot-dev-sourcebot-e3ed5267/conventions/packages-web-src-app-app-app-app.md
cat /tmp/coderabbit-repo-knowledge/sourcebot-dev-sourcebot-e3ed5267/conventions/packages-web-src.md
printf '%s\n' '--- component usages and props ---'
rg -n -C 5 'SyncingBadge|startedAt' 'packages/web/src/app/(app)/repos'
printf '%s\n' '--- React and Next versions ---'
rg -n -C 2 '"(react|react-dom|next)"' package.json packages/web/package.json 2>/dev/null || trueRepository: sourcebot-dev/sourcebot Length of output: 23528 🌐 Web query:
💡 Result: A hydration mismatch occurs in Next.js when the HTML generated on the server does not match the HTML generated during the first render in the client [1][2][3]. Because React must reconcile these two outputs, using non-deterministic values like Date.now or Math.random directly in your component render logic will cause this error, as the server and client will produce different results [4][2][5]. To resolve this while using useState and useEffect, you should follow the "stable placeholder" pattern [6][2][5]. This ensures the initial render is deterministic and identical on both the server and the client [6][7]. Recommended Solution: 1. Initialize your state with a stable default (such as null, an empty string, or a static placeholder) [6][7][2]. 2. Use a useEffect hook to update the state after the component mounts, which only occurs on the client [1][2][5]. Example: import { useState, useEffect } from 'react'; export default function CurrentTime { const [time, setTime] = useState(null); // Initial state is the same on server and client useEffect( => { // This runs only on the client after hydration setTime(new Date.toLocaleTimeString); }, []); return {time?? 'Loading...'} ; // Renders matching HTML on both sides } Additional Notes: - suppressHydrationWarning: You can add the suppressHydrationWarning={true} attribute to an HTML element to silence the mismatch warning [1][6][3]. However, this is intended only as a last resort for content that is genuinely unavoidable or inconsequential (e.g., a single timestamp) [6][2][8]. It does not fix the underlying mismatch; it only prevents the error from being reported [8][3]. - Date Formatting: If you must render dates on the server, avoid using time-dependent methods like Date.now or locale-dependent methods like toLocaleString without arguments, as these vary by environment [3][9]. Instead, use explicit timezone and locale formatting (e.g., toLocaleString('en-US', { timeZone: 'UTC' })) to ensure consistent output across both environments [9]. For further details, refer to the official Next.js documentation on hydration errors [1].
Citations:
Use a deterministic initial time for the duration.
🤖 Prompt for AI Agents |
||
|
|
||
| useEffect(() => { | ||
| if (startedAt === null) { | ||
| return; | ||
| } | ||
|
|
||
| setCurrentTime(Date.now()); | ||
| const interval = window.setInterval(() => { | ||
| setCurrentTime(Date.now()); | ||
| }, DURATION_UPDATE_INTERVAL_MS); | ||
| return () => window.clearInterval(interval); | ||
| }, [startedAt]); | ||
|
|
||
| return ( | ||
| <Badge variant="secondary" className="shrink-0 gap-1 rounded-sm"> | ||
| <Loader2 className="h-3 w-3 animate-spin" /> | ||
| {startedAt === null | ||
| ? <span>Pending</span> | ||
|
Contributor
There was a problem hiding this comment. 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win Use the required queued-job label. The PR objective specifies 🤖 Prompt for AI Agents |
||
| : ( | ||
| <> | ||
| <span>Syncing</span> | ||
| <span aria-hidden="true">·</span> | ||
| <span className="tabular-nums"> | ||
| {formatJobDuration(currentTime - startedAt)} | ||
|
There was a problem hiding this comment. Duration text mismatches on hydrationLow Severity
  Reviewed by Cursor Bugbot for commit 251e840. Configure here. |
||
| </span> | ||
| </> | ||
| )} | ||
| </Badge> | ||
| ); | ||
| }; | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
🔎 Supported by static analysis
🏁 Script executed:
Repository: sourcebot-dev/sourcebot
Length of output: 25409
🏁 Script executed:
Repository: sourcebot-dev/sourcebot
Length of output: 26694
🏁 Script executed:
Repository: sourcebot-dev/sourcebot
Length of output: 12499
Tie
startedAtto the repository identity check.When
getSyncAnnotationreturnsSYNCINGfor an unindexed repository, requirelatestJob.data.repoIdto matchrepo.idbefore passingstartedAt; otherwise,SyncingBadgemay display another repository’s duration. Add a regression test for this mismatched-repository case.🤖 Prompt for AI Agents