feat(forgejo): enhance repository selection and sync functionality in metrics cards

frontend/src/app/dashboard/page.tsx

@@ -2,7 +2,13 @@
 
 export const dynamic = "force-dynamic";
 
-import { type KeyboardEvent, type MouseEvent, useMemo } from "react";
+import {
+  type KeyboardEvent,
+  type MouseEvent,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
 import { useRouter } from "next/navigation";
 import { useQuery } from "@tanstack/react-query";
 
@@ -75,6 +81,7 @@ import {
   getForgejoLastPush,
   getForgejoMetrics,
   getForgejoRepositories,
+  syncRepository,
   type ForgejoHeatmapDay,
   type ForgejoIssueMetrics,
   type ForgejoRepository,
@@ -119,6 +126,7 @@ type GatewaySnapshot = GatewayTarget & {
 
 const DASH = "—";
 const FORGEJO_DASHBOARD_REFETCH_INTERVAL_MS = 5 * 60 * 1000;
+const ALL_FORGEJO_REPOSITORIES = "all";
 const DASHBOARD_RANGE = "7d";
 const DASHBOARD_RANGE_DAYS = 7;
 const DASHBOARD_RANGE_LABEL = "7 days";
@@ -429,6 +437,9 @@ const toSessionSummaries = (
 export default function DashboardPage() {
   const router = useRouter();
   const { isSignedIn } = useAuth();
+  const [selectedForgejoRepositoryId, setSelectedForgejoRepositoryId] =
+    useState(ALL_FORGEJO_REPOSITORIES);
+  const [isRefreshingForgejoSync, setIsRefreshingForgejoSync] = useState(false);
 
   const boardsQuery = useListBoardsApiV1BoardsGet<
     listBoardsApiV1BoardsGetResponse,
@@ -502,6 +513,24 @@ export default function DashboardPage() {
     () => forgejoRepositoriesQuery.data ?? [],
     [forgejoRepositoriesQuery.data],
   );
+  const selectedForgejoRepository = useMemo(
+    () =>
+      selectedForgejoRepositoryId === ALL_FORGEJO_REPOSITORIES
+        ? null
+        : forgejoRepositories.find(
+            (repository) => repository.id === selectedForgejoRepositoryId,
+          ) ?? null,
+    [forgejoRepositories, selectedForgejoRepositoryId],
+  );
+  const scopedForgejoRepositories = useMemo(
+    () =>
+      selectedForgejoRepositoryId === ALL_FORGEJO_REPOSITORIES
+        ? forgejoRepositories
+        : selectedForgejoRepository
+          ? [selectedForgejoRepository]
+          : [],
+    [forgejoRepositories, selectedForgejoRepository, selectedForgejoRepositoryId],
+  );
   const forgejoOrganizationId = useMemo(
     () =>
       forgejoRepositories.find((repository) => repository.organization_id)
@@ -509,16 +538,42 @@ export default function DashboardPage() {
     [forgejoRepositories],
   );
 
+  useEffect(() => {
+    if (
+      selectedForgejoRepositoryId !== ALL_FORGEJO_REPOSITORIES &&
+      forgejoRepositories.length > 0 &&
+      !forgejoRepositories.some(
+        (repository) => repository.id === selectedForgejoRepositoryId,
+      )
+    ) {
+      setSelectedForgejoRepositoryId(ALL_FORGEJO_REPOSITORIES);
+    }
+  }, [forgejoRepositories, selectedForgejoRepositoryId]);
+
   const forgejoMetricsQuery = useQuery<ForgejoIssueMetrics | null, Error>({
-    queryKey: ["dashboard", "forgejo", "metrics", forgejoOrganizationId],
+    queryKey: [
+      "dashboard",
+      "forgejo",
+      "metrics",
+      forgejoOrganizationId,
+      selectedForgejoRepositoryId,
+    ],
     enabled: Boolean(
       isSignedIn &&
       !forgejoRepositoriesQuery.isLoading &&
-      !forgejoRepositoriesQuery.error,
+      !forgejoRepositoriesQuery.error &&
+      (
+        selectedForgejoRepositoryId === ALL_FORGEJO_REPOSITORIES
+          ? forgejoOrganizationId
+          : selectedForgejoRepository
+      ),
     ),
     refetchInterval: FORGEJO_DASHBOARD_REFETCH_INTERVAL_MS,
     refetchOnMount: "always",
     queryFn: () => {
+      if (selectedForgejoRepositoryId !== ALL_FORGEJO_REPOSITORIES) {
+        return getForgejoMetrics({ repository_id: selectedForgejoRepositoryId });
+      }
       if (!forgejoOrganizationId) return Promise.resolve(null);
       return getForgejoMetrics({ organization_id: forgejoOrganizationId });
     },
@@ -551,6 +606,34 @@ export default function DashboardPage() {
     },
   });
 
+  const handleRefreshForgejoLastSync = async () => {
+    if (isRefreshingForgejoSync) return;
+
+    const repositoriesToSync =
+      selectedForgejoRepositoryId === ALL_FORGEJO_REPOSITORIES
+        ? forgejoRepositories.filter((repository) => repository.active)
+        : selectedForgejoRepository
+          ? [selectedForgejoRepository]
+          : [];
+
+    setIsRefreshingForgejoSync(true);
+    try {
+      for (const repository of repositoriesToSync) {
+        await syncRepository(repository.id);
+      }
+      await Promise.all([
+        forgejoRepositoriesQuery.refetch(),
+        forgejoMetricsQuery.refetch(),
+        forgejoHeatmapQuery.refetch(),
+        forgejoLastPushQuery.refetch(),
+      ]);
+    } catch (error) {
+      console.error("Failed to refresh Forgejo sync status:", error);
+    } finally {
+      setIsRefreshingForgejoSync(false);
+    }
+  };
+
   const boards = useMemo(
     () =>
       boardsQuery.data?.status === 200
@@ -1238,6 +1321,11 @@ export default function DashboardPage() {
               <ForgejoIssueMetricCards
                 metrics={forgejoIssueMetrics}
                 repositories={forgejoRepositories}
+                metricRepositories={scopedForgejoRepositories}
+                selectedRepositoryId={selectedForgejoRepositoryId}
+                onSelectedRepositoryChange={setSelectedForgejoRepositoryId}
+                onRefreshLastSync={handleRefreshForgejoLastSync}
+                isRefreshingLastSync={isRefreshingForgejoSync}
                 isLoading={forgejoIssueMetricsLoading}
                 error={forgejoIssueMetricsError}
               />

frontend/src/components/git/ForgejoIssueMetricCards.tsx

@@ -15,10 +15,22 @@ import {
 
 import type { ForgejoIssueMetrics, ForgejoRepository } from "@/lib/api-forgejo";
 import { cn } from "@/lib/utils";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 
 type ForgejoIssueMetricCardsProps = {
   metrics: ForgejoIssueMetrics | null;
   repositories: ForgejoRepository[];
+  metricRepositories?: ForgejoRepository[];
+  selectedRepositoryId: string;
+  onSelectedRepositoryChange: (repositoryId: string) => void;
+  onRefreshLastSync: () => void;
+  isRefreshingLastSync?: boolean;
   isLoading?: boolean;
   error?: string | null;
 };
@@ -33,10 +45,16 @@ type MetricCard = {
   href: string;
   tone: MetricTone;
   icon: ComponentType<{ className?: string }>;
+  action?: {
+    label: string;
+    isLoading?: boolean;
+    onClick: () => void;
+  };
 };
 
 const numberFormatter = new Intl.NumberFormat("en-US");
 const STALE_SYNC_THRESHOLD_MS = 24 * 60 * 60 * 1000;
+const ALL_REPOSITORIES_VALUE = "all";
 
 const formatCount = (value: number | null | undefined): string =>
   numberFormatter.format(Math.max(0, Math.round(Number(value ?? 0))));
@@ -67,6 +85,9 @@ const newestDate = (dates: Date[]): Date | null => {
   );
 };
 
+const repositoryLabel = (repository: ForgejoRepository): string =>
+  repository.display_name || `${repository.owner}/${repository.repo}`;
+
 // ── Tone → icon badge (background + text color) ────────────────────────────
 const toneIconClasses: Record<MetricTone, string> = {
   amber:   "border-[color:rgba(245,158,11,0.35)] bg-[color:rgba(245,158,11,0.14)] text-[color:#F59E0B]",
@@ -102,6 +123,8 @@ function buildSyncHealthCard(
   metrics: ForgejoIssueMetrics | null,
   repositories: ForgejoRepository[],
   nowMs: number | null,
+  onRefreshLastSync: () => void,
+  isRefreshingLastSync: boolean,
 ): MetricCard {
   const repositoryCount = repositories.length;
   const syncErrorCount = Object.values(metrics?.sync_error_counts ?? {}).filter(
@@ -122,7 +145,7 @@ function buildSyncHealthCard(
 
   if (repositoryCount === 0) {
     return {
-      title: "Last Sync Health",
+      title: "Last Sync",
       value: "No repos",
       caption: "Add repositories to track sync status.",
       href: "/git-projects/repositories",
@@ -132,41 +155,61 @@ function buildSyncHealthCard(
   }
   if (syncErrorCount > 0) {
     return {
-      title: "Last Sync Health",
+      title: "Last Sync",
       value: `${formatCount(syncErrorCount)} repo${syncErrorCount === 1 ? "" : "s"}`,
       caption: "Repository sync needs attention.",
       href: "/git-projects/repositories",
       tone: "danger",
       icon: ShieldAlert,
+      action: {
+        label: "Refresh Last Sync",
+        isLoading: isRefreshingLastSync,
+        onClick: onRefreshLastSync,
+      },
     };
   }
   if (!latestSync) {
     return {
-      title: "Last Sync Health",
+      title: "Last Sync",
       value: "Waiting",
       caption: "Repositories have not synced yet.",
       href: "/git-projects/repositories",
       tone: "slate",
       icon: Clock3,
+      action: {
+        label: "Refresh Last Sync",
+        isLoading: isRefreshingLastSync,
+        onClick: onRefreshLastSync,
+      },
     };
   }
   if (latestSyncAge > STALE_SYNC_THRESHOLD_MS) {
     return {
-      title: "Last Sync Health",
+      title: "Last Sync",
       value: "Stale",
       caption: `Updated ${formatRelativeTimestampLive(latestSync, nowMs ?? latestSync.getTime())}.`,
       href: "/git-projects/repositories",
       tone: "amber",
       icon: Clock3,
+      action: {
+        label: "Refresh Last Sync",
+        isLoading: isRefreshingLastSync,
+        onClick: onRefreshLastSync,
+      },
     };
   }
   return {
-    title: "Last Sync Health",
+    title: "Last Sync",
     value: "Healthy",
     caption: `Updated ${formatRelativeTimestampLive(latestSync, nowMs ?? latestSync.getTime())}.`,
     href: "/git-projects/repositories",
     tone: "cyan",
     icon: ShieldCheck,
+    action: {
+      label: "Refresh Last Sync",
+      isLoading: isRefreshingLastSync,
+      onClick: onRefreshLastSync,
+    },
   };
 }
 
@@ -187,14 +230,18 @@ function MetricCardLink({ card }: { card: MetricCard }) {
   const valueParts = card.value.split(/(\d[\d,]*)/g);
 
   return (
-    <Link
+    <div
-      href={card.href}
       className={cn(
-        "group flex min-w-0 flex-col justify-between rounded-xl border p-4 transition-all duration-200 hover:-translate-y-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--accent)]",
+        "group relative flex min-w-0 flex-col justify-between rounded-xl border p-4 transition-all duration-200 hover:-translate-y-0.5 hover:shadow-sm",
         toneCardClasses[card.tone],
       )}
     >
-      <div className="flex items-start justify-between gap-3">
+      <Link
+        href={card.href}
+        className="absolute inset-0 rounded-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--accent)]"
+        aria-label={`Open ${card.title}`}
+      />
+      <div className="relative z-10 flex items-start justify-between gap-3 pointer-events-none">
         <div className="min-w-0">
           <p className="text-xs font-semibold uppercase tracking-[0.14em] text-muted">
             {card.title}
@@ -216,20 +263,43 @@ function MetricCardLink({ card }: { card: MetricCard }) {
             )}
           </p>
         </div>
-        <div
+        <div className="flex shrink-0 items-center gap-1.5 pointer-events-auto">
-          className={cn(
+          {card.action ? (
-            "shrink-0 rounded-lg border p-2 transition-transform duration-200 group-hover:scale-110",
+            <button
-            toneIconClasses[card.tone],
+              type="button"
-          )}
+              onClick={(event) => {
-        >
+                event.preventDefault();
-          <Icon className="h-4 w-4" />
+                event.stopPropagation();
+                card.action?.onClick();
+              }}
+              disabled={card.action.isLoading}
+              className={cn(
+                "rounded-lg border p-2 transition hover:scale-105 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--accent)] disabled:cursor-not-allowed disabled:opacity-70",
+                toneIconClasses[card.tone],
+              )}
+              title={card.action.label}
+              aria-label={card.action.label}
+            >
+              <RefreshCw
+                className={cn("h-4 w-4", card.action.isLoading && "animate-spin")}
+              />
+            </button>
+          ) : null}
+          <div
+            className={cn(
+              "rounded-lg border p-2 transition-transform duration-200 group-hover:scale-110",
+              toneIconClasses[card.tone],
+            )}
+          >
+            <Icon className="h-4 w-4" />
+          </div>
         </div>
       </div>
-      <div className="mt-4 flex items-center justify-between gap-3">
+      <div className="relative z-10 mt-4 flex items-center justify-between gap-3 pointer-events-none">
         <p className="min-w-0 text-sm text-muted">{card.caption}</p>
         <ArrowUpRight className="h-4 w-4 shrink-0 text-muted transition group-hover:text-[color:var(--accent)]" />
       </div>
-    </Link>
+    </div>
   );
 }
 
@@ -237,6 +307,11 @@ function MetricCardLink({ card }: { card: MetricCard }) {
 export function ForgejoIssueMetricCards({
   metrics,
   repositories,
+  metricRepositories,
+  selectedRepositoryId,
+  onSelectedRepositoryChange,
+  onRefreshLastSync,
+  isRefreshingLastSync = false,
   isLoading = false,
   error,
 }: ForgejoIssueMetricCardsProps) {
@@ -251,16 +326,24 @@ export function ForgejoIssueMetricCards({
     };
   }, []);
 
+  const activeRepositories = metricRepositories ?? repositories;
   const openIssues    = metrics?.open_issues        ?? 0;
   const recentlyClosed = metrics?.closed_last_7_days ?? 0;
   const staleOpen     = metrics?.stale_open_issues   ?? 0;
-  const repositoriesSynced = metrics?.repositories_synced ?? repositories.length;
+  const repositoriesSynced = metrics?.repositories_synced ?? activeRepositories.length;
 
   // Stale: 0 → slate, 1–5 → amber, >5 → danger
   const staleTone: MetricTone =
     staleOpen === 0 ? "slate" :
     staleOpen <= 5  ? "amber" :
     "danger";
+  const issueHref = (params: string): string => {
+    const repositoryParam =
+      selectedRepositoryId === ALL_REPOSITORIES_VALUE
+        ? ""
+        : `&repository_id=${encodeURIComponent(selectedRepositoryId)}`;
+    return `/git-projects/issues?${params}${repositoryParam}`;
+  };
 
   const cards: MetricCard[] = [
     {
@@ -270,7 +353,7 @@ export function ForgejoIssueMetricCards({
         openIssues === 0
           ? "No open Git Project issues."
           : "Review open issues across Git Projects.",
-      href: "/git-projects/issues?state=open",
+      href: issueHref("state=open"),
       tone: openIssues > 0 ? "amber" : "muted",
       icon: openIssues > 0 ? AlertCircle : CheckCircle2,
     },
@@ -278,7 +361,7 @@ export function ForgejoIssueMetricCards({
       title: "Recently Closed",
       value: formatCount(recentlyClosed),
       caption: "Closed in the last 7 days.",
-      href: "/git-projects/issues?state=closed&recent=7d",
+      href: issueHref("state=closed&recent=7d"),
       tone: recentlyClosed > 0 ? "success" : "muted",
       icon: CheckCircle2,
     },
@@ -289,11 +372,17 @@ export function ForgejoIssueMetricCards({
         staleOpen === 0
           ? "Nothing abandoned right now."
           : "Open issues without recent movement.",
-      href: "/git-projects/issues?state=open&stale=1",
+      href: issueHref("state=open&stale=1"),
       tone: staleTone,
       icon: staleOpen === 0 ? CheckCircle2 : Clock3,
     },
-    buildSyncHealthCard(metrics, repositories, nowMs),
+    buildSyncHealthCard(
+      metrics,
+      activeRepositories,
+      nowMs,
+      onRefreshLastSync,
+      isRefreshingLastSync,
+    ),
   ];
 
   return (
@@ -307,13 +396,36 @@ export function ForgejoIssueMetricCards({
             High-level Forgejo issue health across repositories synced into Pipeline.
           </p>
         </div>
-        <Link
+        <div className="flex w-full flex-col gap-2 sm:w-auto sm:flex-row sm:items-center">
-          href="/git-projects/issues"
+          <Select
-          className="inline-flex w-fit items-center gap-1 text-sm font-medium text-[color:var(--accent)] transition hover:text-[color:var(--accent-strong)]"
+            value={selectedRepositoryId}
-        >
+            onValueChange={onSelectedRepositoryChange}
-          Open issues
+            disabled={repositories.length === 0}
-          <ArrowUpRight className="h-4 w-4" />
+          >
-        </Link>
+            <SelectTrigger className="h-9 w-full min-w-[190px] rounded-lg border-[color:var(--border)] bg-[color:var(--surface-muted)] px-3 text-sm shadow-none focus:ring-offset-0 sm:w-[230px]">
+              <SelectValue placeholder="All projects" />
+            </SelectTrigger>
+            <SelectContent align="end">
+              <SelectItem value={ALL_REPOSITORIES_VALUE}>All projects</SelectItem>
+              {repositories.map((repository) => (
+                <SelectItem key={repository.id} value={repository.id}>
+                  {repositoryLabel(repository)}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+          <Link
+            href={
+              selectedRepositoryId === ALL_REPOSITORIES_VALUE
+                ? "/git-projects/issues"
+                : `/git-projects/issues?repository_id=${encodeURIComponent(selectedRepositoryId)}`
+            }
+            className="inline-flex w-fit items-center gap-1 text-sm font-medium text-[color:var(--accent)] transition hover:text-[color:var(--accent-strong)]"
+          >
+            Open issues
+            <ArrowUpRight className="h-4 w-4" />
+          </Link>
+        </div>
       </div>
 
       {/* Warning banner — left accent border, brighter amber */}