Make repository UI commit-first

Author: dutifulbob

apps/api/src/app.integration.test.ts

@@ -82,6 +82,23 @@ describe.runIf(runIntegration)("api integration", () => {
       page: 1,
       pageSize: 5,
     });
+
+    const commitsResponse = await app.inject({
+      method: "GET",
+      url: "/repositories/verge/commits?page=1&pageSize=5",
+    });
+    expect(commitsResponse.statusCode).toBe(200);
+    expect(commitsResponse.json()).toMatchObject({
+      page: 1,
+      pageSize: 5,
+      items: [
+        expect.objectContaining({
+          commitSha: "integration-sha",
+          attemptCount: 1,
+          coveragePercent: expect.any(Number),
+        }),
+      ],
+    });
   }, 30_000);
 
   it("returns 404 for missing runs and steps after a reset", async () => {

apps/api/src/planning.ts

@@ -16,7 +16,7 @@ import {
   type DatabaseExecutor,
 } from "@verge/db";
 
-import { parseStringArray } from "./utils.js";
+import { parseStringArray, resolveCommitTitle } from "./utils.js";
 
 const interruptPendingProcessesForStepRun = async (
   db: DatabaseExecutor,
@@ -63,6 +63,7 @@ export const createPlannedRun = async (
   input: {
     trigger: "manual" | "push" | "pull_request";
     commitSha: string;
+    commitTitle?: string | null;
     branch?: string;
     changedFiles?: string[];
     requestedStepKeys?: string[];
@@ -76,11 +77,17 @@ export const createPlannedRun = async (
   stepRunIds: string[];
 }> => {
   const stepSpecs = await getStepSpecsForRepository(db, repository.id);
+  const commitTitle = await resolveCommitTitle(
+    repository.root_path,
+    input.commitSha,
+    input.commitTitle,
+  );
 
   const run = await createRun(db, {
     repositoryId: repository.id,
     trigger: input.trigger,
     commitSha: input.commitSha,
+    commitTitle,
     changedFiles: input.changedFiles ?? [],
     ...(input.eventIngestionId ? { eventIngestionId: input.eventIngestionId } : {}),
     ...(input.branch ? { branch: input.branch } : {}),

apps/api/src/routes/public.ts

@@ -1,6 +1,10 @@
 import type { FastifyInstance } from "fastify";
 
-import { createManualRunInputSchema, runListQuerySchema } from "@verge/contracts";
+import {
+  commitListQuerySchema,
+  createManualRunInputSchema,
+  runListQuerySchema,
+} from "@verge/contracts";
 import {
   getCommitDetail,
   getCommitTreemap,
@@ -11,6 +15,7 @@ import {
   getRunDetail,
   getRunTreemap,
   getStepRunDetail,
+  listRepositoryCommits,
   listRepositories,
   listRepositoryRuns,
   listStepSpecSummaries,
@@ -102,6 +107,14 @@ export const registerPublicRoutes = (app: FastifyInstance, context: ApiContext):
     ),
   );
 
+  app.get("/repositories/:repo/commits", async (request) =>
+    listRepositoryCommits(
+      context.connection.db,
+      (request.params as { repo: string }).repo,
+      commitListQuerySchema.parse(request.query),
+    ),
+  );
+
   app.get("/repositories/:repo/commits/:sha", async (request, reply) => {
     const { repo, sha } = request.params as { repo: string; sha: string };
     const detail = await getCommitDetail(context.connection.db, repo, sha);

apps/api/src/routes/webhooks.ts

@@ -72,6 +72,7 @@ export const registerWebhookRoutes = (app: FastifyInstance, context: ApiContext)
         await createPlannedRun(trx, repository, repositoryDefinition, {
           trigger: "push",
           commitSha: payload.after,
+          commitTitle: payload.head_commit?.message ?? null,
           branch: payload.ref.replace("refs/heads/", ""),
           changedFiles: collectChangedFilesFromPushPayload(payload),
           eventIngestionId: eventIngestion.id,

apps/api/src/utils.ts

@@ -1,4 +1,5 @@
 import { createHmac, timingSafeEqual } from "node:crypto";
+import { spawn } from "node:child_process";
 
 type PushPayload = {
   commits: Array<{
@@ -55,6 +56,52 @@ export const parseStringArray = (value: unknown): string[] => {
   return [];
 };
 
+const runCommand = async (command: string, args: string[], cwd: string): Promise<string> =>
+  new Promise((resolve, reject) => {
+    const stdout: string[] = [];
+    const stderr: string[] = [];
+    const child = spawn(command, args, {
+      cwd,
+      stdio: ["ignore", "pipe", "pipe"],
+    });
+
+    child.stdout?.on("data", (chunk: Buffer | string) => stdout.push(String(chunk)));
+    child.stderr?.on("data", (chunk: Buffer | string) => stderr.push(String(chunk)));
+    child.on("error", reject);
+    child.on("close", (code) => {
+      if ((code ?? 1) !== 0) {
+        reject(new Error(stderr.join("").trim() || `${command} exited with ${code ?? 1}`));
+        return;
+      }
+
+      resolve(stdout.join(""));
+    });
+  });
+
+export const resolveCommitTitle = async (
+  repositoryRootPath: string,
+  commitSha: string,
+  fallbackTitle?: string | null,
+): Promise<string> => {
+  if (fallbackTitle && fallbackTitle.trim().length > 0) {
+    return fallbackTitle.trim().split("\n")[0] ?? fallbackTitle.trim();
+  }
+
+  try {
+    const subject = await runCommand(
+      "git",
+      ["show", "-s", "--format=%s", commitSha],
+      repositoryRootPath,
+    );
+    const normalized = subject.trim();
+    if (normalized.length > 0) {
+      return normalized.split("\n")[0] ?? normalized;
+    }
+  } catch {}
+
+  return `Commit ${commitSha.slice(0, 7)}`;
+};
+
 export const sendSse = (reply: {
   raw: NodeJS.WritableStream & {
     writeHead?: (statusCode: number, headers: Record<string, string>) => void;

apps/web/src/App.tsx

@@ -2,23 +2,24 @@ import { useEffect, useMemo, useState } from "react";
 
 import type { RepositorySummary } from "@verge/contracts";
 
-import { NavLink, StatusPill } from "./components/common.js";
+import { NavLink } from "./components/common.js";
 import { useAppRoute } from "./hooks/use-app-route.js";
+import { useCommitListData } from "./hooks/use-commit-list-data.js";
 import { useCommitDetailData } from "./hooks/use-commit-detail-data.js";
-import { useOverviewData } from "./hooks/use-overview-data.js";
 import { useRunDetailData } from "./hooks/use-run-detail-data.js";
 import { useRunsPageData } from "./hooks/use-runs-page-data.js";
+import { useStepSpecs } from "./hooks/use-step-specs.js";
 import {
   buildCommitPath,
-  buildRepositoryOverviewPath,
+  buildRepositoryCommitsPath,
   buildRepositoryRunsPath,
   buildRunPath,
   buildStepPath,
   navigate,
 } from "./lib/routing.js";
 import { statusTone } from "./lib/format.js";
+import { CommitsPage } from "./pages/CommitsPage.js";
 import { CommitDetailPage } from "./pages/CommitDetailPage.js";
-import { OverviewPage } from "./pages/OverviewPage.js";
 import { RunDetailPage } from "./pages/RunDetailPage.js";
 import { RunsPage } from "./pages/RunsPage.js";
 import { StepDetailPage } from "./pages/StepDetailPage.js";
@@ -32,7 +33,8 @@ export const App = () => {
   const [preferredRepositorySlug, setPreferredRepositorySlug] = useState<string | null>(null);
   const [repositoriesError, setRepositoriesError] = useState<string | null>(null);
   const currentRepositorySlug = route.repositorySlug ?? preferredRepositorySlug;
-  const { health, processSpecs, error: overviewError } = useOverviewData(currentRepositorySlug);
+  const { commitsPage, error: commitsError } = useCommitListData(route, currentRepositorySlug);
+  const { stepSpecs, error: stepSpecsError } = useStepSpecs(currentRepositorySlug);
   const { runsPage, error: runsError } = useRunsPageData(route, currentRepositorySlug);
   const { run, treemap, step, error: runError, treemapError } = useRunDetailData(route);
   const {
@@ -105,8 +107,8 @@ export const App = () => {
       return;
     }
 
-    if (route.name === "overview") {
-      navigate(buildRepositoryOverviewPath(fallbackRepositorySlug));
+    if (route.name === "commits") {
+      navigate(buildRepositoryCommitsPath(fallbackRepositorySlug, { page: route.page }));
       return;
     }
 
@@ -147,7 +149,6 @@ export const App = () => {
     });
   }, [route]);
 
-  const activeRunCount = useMemo(() => health?.activeRuns.length ?? 0, [health]);
   const selectedRepository = useMemo(
     () => repositories.find((repository) => repository.slug === currentRepositorySlug) ?? null,
     [currentRepositorySlug, repositories],
@@ -217,11 +218,19 @@ export const App = () => {
     );
   };
 
+  const changeCommitsPage = (page: number): void => {
+    if (route.name !== "commits" || !selectedRepositorySlug) {
+      return;
+    }
+
+    navigate(buildRepositoryCommitsPath(selectedRepositorySlug, { page }));
+  };
+
   const navigateToRepository = (nextRepositorySlug: string): void => {
     setPreferredRepositorySlug(nextRepositorySlug);
 
-    if (route.name === "overview") {
-      navigate(buildRepositoryOverviewPath(nextRepositorySlug));
+    if (route.name === "commits") {
+      navigate(buildRepositoryCommitsPath(nextRepositorySlug, { page: route.page }));
       return;
     }
 
@@ -249,12 +258,12 @@ export const App = () => {
     repositoriesError ??
     submitError ??
     (route.name === "runs"
-      ? runsError
+      ? (stepSpecsError ?? runsError)
       : route.name === "run" || route.name === "step"
         ? runError
         : route.name === "commit"
           ? commitError
-          : overviewError);
+          : commitsError);
 
   return (
     <main className="appShell">
@@ -286,57 +295,46 @@ export const App = () => {
         </div>
         <nav className="topnav">
           <NavLink
-            active={route.name === "overview"}
-            href={
-              selectedRepositorySlug ? buildRepositoryOverviewPath(selectedRepositorySlug) : "/"
-            }
-            label="Overview"
+            active={route.name === "commits" || route.name === "commit"}
+            href={selectedRepositorySlug ? buildRepositoryCommitsPath(selectedRepositorySlug) : "/"}
+            label="Commits"
           />
           <NavLink
-            active={
-              route.name === "runs" ||
-              route.name === "run" ||
-              route.name === "step" ||
-              route.name === "commit"
-            }
+            active={route.name === "runs" || route.name === "run" || route.name === "step"}
             href={
               selectedRepositorySlug ? buildRepositoryRunsPath(selectedRepositorySlug) : "/runs"
             }
             label="Runs"
           />
         </nav>
-        <div className="topbarMeta">
-          <StatusPill status={activeRunCount > 0 ? "running" : "passed"} />
-          <span className="secondaryText">{activeRunCount} active</span>
-        </div>
       </header>
 
       {error ? <div className="errorBanner">{error}</div> : null}
 
-      {route.name === "overview" ? (
-        <OverviewPage
+      {route.name === "commits" ? (
+        <CommitsPage
           repositorySlug={selectedRepositorySlug}
-          health={health}
-          processSpecs={processSpecs}
+          commitsPage={commitsPage}
+          onPageChange={changeCommitsPage}
+        />
+      ) : null}
+
+      {route.name === "runs" ? (
+        <RunsPage
+          repositorySlug={selectedRepositorySlug}
+          runsPage={runsPage}
+          processSpecs={stepSpecs}
           commitSha={commitSha}
           branch={branch}
           changedFiles={changedFiles}
           resumeFromCheckpoint={resumeFromCheckpoint}
           submitting={submitting}
+          draftFilters={draftFilters}
           onCommitShaChange={setCommitSha}
           onBranchChange={setBranch}
           onChangedFilesChange={setChangedFiles}
           onResumeFromCheckpointChange={setResumeFromCheckpoint}
           onSubmit={() => void submitManualRun()}
-        />
-      ) : null}
-
-      {route.name === "runs" ? (
-        <RunsPage
-          repositorySlug={selectedRepositorySlug}
-          runsPage={runsPage}
-          processSpecs={processSpecs}
-          draftFilters={draftFilters}
           onDraftFilterChange={(key, value) => {
             setDraftFilters((current) => ({ ...current, [key]: value }));
           }}

apps/web/src/hooks/use-commit-list-data.ts

@@ -0,0 +1,45 @@
+import { useEffect, useState } from "react";
+
+import type { PaginatedCommitList } from "@verge/contracts";
+
+import { describeLoadError, fetchJson } from "../lib/api.js";
+import type { AppRoute } from "../lib/routing.js";
+
+export const useCommitListData = (route: AppRoute, repositorySlug: string | null) => {
+  const [commitsPage, setCommitsPage] = useState<PaginatedCommitList | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (route.name !== "commits" || !repositorySlug) {
+      setCommitsPage(null);
+      setError(null);
+      return;
+    }
+
+    setCommitsPage(null);
+
+    const refresh = async (): Promise<void> => {
+      try {
+        const search = new URLSearchParams({
+          page: String(route.page),
+          pageSize: "20",
+        });
+        const nextCommitsPage = await fetchJson<PaginatedCommitList>(
+          `/repositories/${repositorySlug}/commits?${search.toString()}`,
+        );
+        setError(null);
+        setCommitsPage(nextCommitsPage);
+      } catch (nextError) {
+        setError(describeLoadError(route, nextError, "Failed to load commits"));
+      }
+    };
+
+    void refresh();
+    const interval = window.setInterval(() => {
+      void refresh();
+    }, 4000);
+    return () => window.clearInterval(interval);
+  }, [route, repositorySlug]);
+
+  return { commitsPage, error };
+};