feat(tree-compare): implement frontend for tree comparison

Signed-off-by: Felipe Bergamin <felipebergamin6@gmail.com>

Author: felipebergamin

dashboard/e2e/tree-compare.spec.ts

@@ -0,0 +1,63 @@
+import { expect, test } from '@playwright/test';
+
+const FULL_HASH_LENGTH = 40;
+const HASH_A = 'a'.repeat(FULL_HASH_LENGTH);
+const HASH_B = 'b'.repeat(FULL_HASH_LENGTH);
+
+test('loads revisions and comparison data from the API', async ({ page }) => {
+  await page.route('**/api/tree/linux/master/commits?**', route =>
+    route.fulfill({
+      json: [
+        {
+          git_commit_hash: HASH_A,
+          last_checkout: '2026-07-14T10:00:00Z',
+        },
+        {
+          git_commit_hash: HASH_B,
+          last_checkout: '2026-07-13T10:00:00Z',
+        },
+      ],
+    }),
+  );
+
+  await page.route('**/api/tree/linux/master/compare?**', route =>
+    route.fulfill({
+      json: {
+        treeName: 'linux',
+        branch: 'master',
+        gitUrl: 'https://git.kernel.org/linux.git',
+        summary: {
+          builds: {
+            sideA: { pass: 42, fail: 1, inconclusive: 0 },
+            sideB: { pass: 40, fail: 3, inconclusive: 0 },
+            delta: { pass: -2, fail: 2 },
+          },
+          boots: {
+            sideA: { pass: 20, fail: 0, inconclusive: 1 },
+            sideB: { pass: 18, fail: 2, inconclusive: 1 },
+            delta: { pass: -2, fail: 2 },
+          },
+          tests: {
+            sideA: { pass: 100, fail: 5, inconclusive: 2 },
+            sideB: { pass: 95, fail: 10, inconclusive: 2 },
+            delta: { pass: -5, fail: 5 },
+          },
+        },
+        groups: {
+          builds: [],
+          boots: [],
+          tests: [],
+        },
+      },
+    }),
+  );
+
+  await page.goto(
+    `/tree/linux/master/compare?hashA=${HASH_A}&hashB=${HASH_B}&origin=maestro`,
+  );
+
+  await expect(page.getByText('Tree summary')).toBeVisible();
+  await expect(page.getByText('42', { exact: true }).first()).toBeVisible();
+  await expect(page.getByText('100', { exact: true }).first()).toBeVisible();
+  await expect(page.getByText(/data is mocked/i)).toHaveCount(0);
+});

dashboard/src/api/treeCompare.ts

@@ -0,0 +1,46 @@
+import type { UseQueryResult } from '@tanstack/react-query';
+import { useQuery } from '@tanstack/react-query';
+
+import type { TreeCompareData } from '@/types/tree/TreeCompare';
+
+import { RequestData } from './commonRequest';
+
+const fetchTreeCompare = async ({
+  treeName,
+  branch,
+  hashA,
+  hashB,
+  origin,
+}: {
+  treeName: string;
+  branch: string;
+  hashA: string;
+  hashB: string;
+  origin: string;
+}): Promise<TreeCompareData> =>
+  RequestData.get<TreeCompareData>(`/api/tree/${treeName}/${branch}/compare`, {
+    params: {
+      hash_a: hashA,
+      hash_b: hashB,
+      origin,
+    },
+  });
+
+export const useTreeCompare = ({
+  treeName,
+  branch,
+  hashA,
+  hashB,
+  origin,
+}: {
+  treeName: string;
+  branch: string;
+  hashA: string;
+  hashB: string;
+  origin: string;
+}): UseQueryResult<TreeCompareData> =>
+  useQuery({
+    queryKey: ['treeCompare', treeName, branch, hashA, hashB, origin],
+    queryFn: () => fetchTreeCompare({ treeName, branch, hashA, hashB, origin }),
+    enabled: !!hashA && !!hashB,
+  });

dashboard/src/locales/messages/index.ts

@@ -373,10 +373,32 @@ export const messages = {
     'title.hardwareDetails': 'Hardware: {hardwareName}',
     'title.issueDetails': 'Issue: {issueName}',
     'title.testDetails': 'Test: {testName}',
+    'title.treeCompare': 'Compare: {treeName}',
     'title.treeDetails': 'Tree: {treeName}',
     'tree.details': 'Trees Details',
     'tree.path': 'Trees',
     'tree.searchPlaceholder': 'Search by tree, branch or tag with a regex',
+    'treeCompare.backToDetails': 'Back to tree details',
+    'treeCompare.breadcrumb': 'Compare',
+    'treeCompare.breakdownTitle': 'Grouped breakdown',
+    'treeCompare.changed': 'Changed',
+    'treeCompare.delta': 'Delta',
+    'treeCompare.deltaFail': 'Δ fail',
+    'treeCompare.deltaPass': 'Δ pass',
+    'treeCompare.description':
+      'Compare pass/fail counts between two revisions on the same tree and branch.',
+    'treeCompare.group.boots': 'Platform',
+    'treeCompare.group.builds': 'Config',
+    'treeCompare.group.tests': 'Path',
+    'treeCompare.openCompare': 'Compare revisions',
+    'treeCompare.selectRevision': 'Select a revision',
+    'treeCompare.sideA': 'Side A',
+    'treeCompare.sideB': 'Side B',
+    'treeCompare.suggestion.branchHead': 'Branch head',
+    'treeCompare.suggestion.previous': 'Previous commit',
+    'treeCompare.suggestion.swap': 'Swap sides',
+    'treeCompare.suggestions': 'Suggestions',
+    'treeCompare.summaryTitle': 'Tree summary',
     'treeDetails.bootsHistory': 'Boots History',
     'treeDetails.branch': 'Branch',
     'treeDetails.buildsHistory': 'Builds History',

dashboard/src/pages/TreeCompare/TreeCompareLink.tsx

@@ -0,0 +1,35 @@
+import { Link } from '@tanstack/react-router';
+import type { JSX } from 'react';
+
+import { GitCompareArrows } from 'lucide-react';
+import { FormattedMessage } from 'react-intl';
+
+import { Button } from '@/components/ui/button';
+
+interface TreeCompareLinkProps {
+  treeName: string;
+  branch: string;
+  hash: string;
+  origin: string;
+}
+
+export function TreeCompareLink({
+  treeName,
+  branch,
+  hash,
+  origin,
+}: TreeCompareLinkProps): JSX.Element {
+  return (
+    <Button variant="outline" size="sm" asChild>
+      <Link
+        to="/tree/$treeName/$branch/compare"
+        params={{ treeName, branch }}
+        search={{ hashA: hash, hashB: '', origin }}
+        state={s => s}
+      >
+        <GitCompareArrows className="mr-2 h-4 w-4" />
+        <FormattedMessage id="treeCompare.openCompare" />
+      </Link>
+    </Button>
+  );
+}