feat(ui): make suite detail compare buttons open in new tab (#217)

## Summary
On the suite detail page's **Recent Runs by Client** section, the
compare buttons were `<button onClick={navigate(...)}>`, so cmd+click /
middle-click did nothing. Converts them to `<a href>` so you can open
comparisons in a new tab.

Covers:
- Per-group compare (heatmap section header)
- Group-vs-group averaged compare (heatmap section header)
- Per-client cross-group compare (client row)
- Per-client averaged-groups compare (client row)
- "Compare latest successful run per client" heatmap header button (both
render branches)

`RunsHeatmap`'s four compare props are now href-builders (`get*Href`)
that return `string | undefined`; URL construction moved up to
`SuiteDetailPage`. Matches the existing `groupCompareUrl` → `<a>`
pattern already on the adjacent group-compare button.

## Test plan
- [ ] Click a compare button normally — navigates to `/compare` as
before.
- [ ] Cmd+click (macOS) / ctrl+click (Linux/Windows) / middle-click —
opens the comparison in a new tab.
- [ ] With fewer than 2 recent successful runs, the "Compare latest
successful run per client" control is disabled (no href) in both the
heatmap header and the alternate render path.
- [ ] With `group by` set, verify all four in-heatmap compare icons
produce the same URLs they did before (`/compare?runs=...` and
`/compare/groups?suite=...&groups=...`).

Author: skylenet

ui/src/components/suite-detail/RunsHeatmap.tsx

@@ -96,14 +96,14 @@ interface RunsHeatmapProps {
   runs: IndexEntry[]
   /** When set, runs are grouped by this label key (or 'instance_id') before client grouping. */
   groupBy?: string
-  /** Called with the runs of a group when the per-group compare button is clicked. */
-  onCompareGroup?: (runs: IndexEntry[]) => void
-  /** Called with a client name to compare its latest successful run across all groups. */
-  onCompareClientAcrossGroups?: (client: string) => void
-  /** Called with the group label + clients to open the averaged group comparison page. */
-  onGroupCompareGroup?: (groupLabel: string, clients: string[]) => void
-  /** Called with a client name to open the averaged group comparison across label groups. */
-  onGroupCompareClientAcrossGroups?: (client: string) => void
+  /** Returns the URL for the per-group compare button, or undefined to render it inert. */
+  getCompareGroupHref?: (runs: IndexEntry[]) => string | undefined
+  /** Returns the URL for comparing a client's latest successful run across groups. */
+  getCompareClientAcrossGroupsHref?: (client: string) => string | undefined
+  /** Returns the URL for the averaged group-vs-group comparison page. */
+  getGroupCompareGroupHref?: (groupLabel: string, clients: string[]) => string | undefined
+  /** Returns the URL for a client's averaged comparison across label groups. */
+  getGroupCompareClientAcrossGroupsHref?: (client: string) => string | undefined
   isDark: boolean
   colorNormalization?: ColorNormalization
   onColorNormalizationChange?: (mode: ColorNormalization) => void
@@ -134,10 +134,10 @@ interface TooltipData {
 export function RunsHeatmap({
   runs,
   groupBy,
-  onCompareGroup,
-  onCompareClientAcrossGroups,
-  onGroupCompareGroup,
-  onGroupCompareClientAcrossGroups,
+  getCompareGroupHref,
+  getCompareClientAcrossGroupsHref,
+  getGroupCompareGroupHref,
+  getGroupCompareClientAcrossGroupsHref,
   isDark,
   colorNormalization = 'suite',
   onColorNormalizationChange,
@@ -468,26 +468,23 @@ export function RunsHeatmap({
                 <span>=</span>
                 <span>{section.label}</span>
               </span>
-              {onCompareGroup && (
-                <button
-                  onClick={() => {
-                    const allGroupRuns = section.clients.flatMap((c) => section.clientRuns[c])
-                    onCompareGroup(allGroupRuns)
-                  }}
+              {getCompareGroupHref && (
+                <a
+                  href={getCompareGroupHref(section.clients.flatMap((c) => section.clientRuns[c]))}
                   className="flex shrink-0 cursor-pointer items-center justify-center rounded-xs p-1 shadow-xs ring-1 ring-inset transition-colors bg-white text-gray-500 ring-gray-300 hover:bg-gray-50 hover:text-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:ring-gray-600 dark:hover:bg-gray-700 dark:hover:text-gray-200"
                   title="Compare latest successful run per client in this group"
                 >
                   <GitCompareArrows className="size-3.5" />
-                </button>
+                </a>
               )}
-              {onGroupCompareGroup && (
-                <button
-                  onClick={() => onGroupCompareGroup(section.label, section.clients)}
+              {getGroupCompareGroupHref && (
+                <a
+                  href={getGroupCompareGroupHref(section.label, section.clients)}
                   className="flex shrink-0 cursor-pointer items-center justify-center rounded-xs p-1 shadow-xs ring-1 ring-inset transition-colors bg-white text-gray-500 ring-gray-300 hover:bg-gray-50 hover:text-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:ring-gray-600 dark:hover:bg-gray-700 dark:hover:text-gray-200"
                   title="Compare averaged groups for clients in this group"
                 >
                   <Layers className="size-3.5" />
-                </button>
+                </a>
               )}
               <div className="h-px grow bg-gray-200 dark:bg-gray-700" />
             </div>
@@ -496,7 +493,7 @@ export function RunsHeatmap({
             {/* Stats header */}
             {sectionIdx === 0 && (
               <div className="flex items-center gap-2 sm:gap-3">
-                <div className={clsx('hidden shrink-0 sm:block', onGroupCompareClientAcrossGroups && groupSections ? 'w-38' : onCompareClientAcrossGroups && groupSections ? 'w-32' : 'w-28')} />
+                <div className={clsx('hidden shrink-0 sm:block', getGroupCompareClientAcrossGroupsHref && groupSections ? 'w-38' : getCompareClientAcrossGroupsHref && groupSections ? 'w-32' : 'w-28')} />
                 <div className="flex-1" />
                 <div className="hidden shrink-0 gap-3 border-l border-transparent pl-3 font-mono text-xs/5 font-medium text-gray-400 md:flex dark:text-gray-500">
                   <span className="w-10 text-center">Min</span>
@@ -518,30 +515,30 @@ export function RunsHeatmap({
               }
               return (
                 <div key={`${section.label}-${client}`} className="flex items-center gap-2 sm:gap-3">
-                  <div className={clsx('flex shrink-0 items-center gap-1', onGroupCompareClientAcrossGroups && groupSections ? 'sm:w-38' : onCompareClientAcrossGroups && groupSections ? 'sm:w-32' : 'sm:w-28')}>
+                  <div className={clsx('flex shrink-0 items-center gap-1', getGroupCompareClientAcrossGroupsHref && groupSections ? 'sm:w-38' : getCompareClientAcrossGroupsHref && groupSections ? 'sm:w-32' : 'sm:w-28')}>
                     <span className="sm:hidden">
                       <ClientBadge client={client} hideLabel />
                     </span>
                     <span className="hidden sm:inline-flex">
                       <ClientBadge client={client} />
                     </span>
-                    {onCompareClientAcrossGroups && groupSections && (
-                      <button
-                        onClick={() => onCompareClientAcrossGroups(client)}
+                    {getCompareClientAcrossGroupsHref && groupSections && (
+                      <a
+                        href={getCompareClientAcrossGroupsHref(client)}
                         className="flex shrink-0 items-center justify-center rounded-xs p-0.5 text-gray-400 transition-colors hover:text-gray-700 dark:text-gray-500 dark:hover:text-gray-200"
                         title={`Compare latest successful ${client} run across groups`}
                       >
                         <GitCompareArrows className="size-3" />
-                      </button>
+                      </a>
                     )}
-                    {onGroupCompareClientAcrossGroups && groupSections && (
-                      <button
-                        onClick={() => onGroupCompareClientAcrossGroups(client)}
+                    {getGroupCompareClientAcrossGroupsHref && groupSections && (
+                      <a
+                        href={getGroupCompareClientAcrossGroupsHref(client)}
                         className="flex shrink-0 items-center justify-center rounded-xs p-0.5 text-gray-400 transition-colors hover:text-gray-700 dark:text-gray-500 dark:hover:text-gray-200"
                         title={`Compare ${client} averaged across groups (group comparison)`}
                       >
                         <Layers className="size-3" />
-                      </button>
+                      </a>
                     )}
                   </div>
                   <div className="flex min-w-0 flex-1 flex-wrap gap-1">

ui/src/pages/SuiteDetailPage.tsx

@@ -1029,17 +1029,23 @@ export function SuiteDetailPage() {
                       >
                         <SquareStack className="size-3.5" />
                       </button>
-                      <button
-                        disabled={recentSuccessfulPerClient.length < MIN_COMPARE_RUNS}
-                        onClick={() => {
-                          const ids = recentSuccessfulPerClient.map((r) => r.run_id)
-                          navigate({ to: '/compare', search: { runs: ids.join(',') } })
-                        }}
-                        className="flex cursor-pointer items-center justify-center rounded-xs p-1 shadow-xs ring-1 ring-inset transition-colors bg-white text-gray-500 ring-gray-300 hover:bg-gray-50 hover:text-gray-700 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-gray-800 dark:text-gray-400 dark:ring-gray-600 dark:hover:bg-gray-700 dark:hover:text-gray-200"
-                        title="Compare latest successful run per client"
-                      >
-                        <GitCompareArrows className="size-3.5" />
-                      </button>
+                      {recentSuccessfulPerClient.length >= MIN_COMPARE_RUNS ? (
+                        <a
+                          href={`/compare?runs=${encodeURIComponent(recentSuccessfulPerClient.map((r) => r.run_id).join(','))}`}
+                          className="flex items-center justify-center rounded-xs p-1 shadow-xs ring-1 ring-inset transition-colors bg-white text-gray-500 ring-gray-300 hover:bg-gray-50 hover:text-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:ring-gray-600 dark:hover:bg-gray-700 dark:hover:text-gray-200"
+                          title="Compare latest successful run per client"
+                        >
+                          <GitCompareArrows className="size-3.5" />
+                        </a>
+                      ) : (
+                        <button
+                          disabled
+                          className="flex cursor-not-allowed items-center justify-center rounded-xs p-1 opacity-50 shadow-xs ring-1 ring-inset bg-white text-gray-500 ring-gray-300 dark:bg-gray-800 dark:text-gray-400 dark:ring-gray-600"
+                          title="Compare latest successful run per client"
+                        >
+                          <GitCompareArrows className="size-3.5" />
+                        </button>
+                      )}
                       {groupCompareUrl && (
                         <a
                           href={groupCompareUrl}
@@ -1056,7 +1062,7 @@ export function SuiteDetailPage() {
                       <RunsHeatmap
                         runs={suiteRunsAll}
                         groupBy={effectiveGroupBy}
-                        onCompareGroup={effectiveGroupBy ? (groupRuns) => {
+                        getCompareGroupHref={effectiveGroupBy ? (groupRuns) => {
                           const sorted = [...groupRuns].sort((a, b) => b.timestamp - a.timestamp)
                           const seen = new Set<string>()
                           const ids: string[] = []
@@ -1071,11 +1077,10 @@ export function SuiteDetailPage() {
                             }
                             if (ids.length >= MAX_COMPARE_RUNS) break
                           }
-                          if (ids.length >= MIN_COMPARE_RUNS) {
-                            navigate({ to: '/compare', search: { runs: ids.join(',') } })
-                          }
+                          if (ids.length < MIN_COMPARE_RUNS) return undefined
+                          return `/compare?runs=${encodeURIComponent(ids.join(','))}`
                         } : undefined}
-                        onCompareClientAcrossGroups={effectiveGroupBy ? (client) => {
+                        getCompareClientAcrossGroupsHref={effectiveGroupBy ? (client) => {
                           // Find the latest successful run for this client in each group
                           const sorted = [...suiteRunsAll]
                             .filter((r) => r.instance.client === client)
@@ -1095,17 +1100,16 @@ export function SuiteDetailPage() {
                             }
                             if (ids.length >= MAX_COMPARE_RUNS) break
                           }
-                          if (ids.length >= MIN_COMPARE_RUNS) {
-                            const labels = effectiveGroupBy === 'instance_id' ? 'instance-id' : `label:${effectiveGroupBy}`
-                            navigate({ to: '/compare', search: { runs: ids.join(','), labels } })
-                          }
+                          if (ids.length < MIN_COMPARE_RUNS) return undefined
+                          const labels = effectiveGroupBy === 'instance_id' ? 'instance-id' : `label:${effectiveGroupBy}`
+                          return `/compare?runs=${encodeURIComponent(ids.join(','))}&labels=${encodeURIComponent(labels)}`
                         } : undefined}
-                        onGroupCompareGroup={effectiveGroupBy ? (groupLabel, groupClients) => {
+                        getGroupCompareGroupHref={effectiveGroupBy ? (groupLabel, groupClients) => {
                           const labelFilter = effectiveGroupBy !== 'instance_id' ? `${effectiveGroupBy}=${groupLabel}` : ''
                           const groups = groupClients.map((c) => `${c}:${labelFilter}`).join(';')
-                          navigate({ to: '/compare/groups', search: { suite: suiteHash, groups } as Record<string, string> })
+                          return `/compare/groups?suite=${encodeURIComponent(suiteHash)}&groups=${encodeURIComponent(groups)}`
                         } : undefined}
-                        onGroupCompareClientAcrossGroups={effectiveGroupBy ? (client) => {
+                        getGroupCompareClientAcrossGroupsHref={effectiveGroupBy ? (client) => {
                           // Build one group per label-value for this client.
                           const labelValues = new Set<string>()
                           for (const run of suiteRunsAll) {
@@ -1119,7 +1123,7 @@ export function SuiteDetailPage() {
                             if (effectiveGroupBy === 'instance_id') return `${client}:`
                             return `${client}:${effectiveGroupBy}=${val}`
                           }).join(';')
-                          navigate({ to: '/compare/groups', search: { suite: suiteHash, groups } as Record<string, string> })
+                          return `/compare/groups?suite=${encodeURIComponent(suiteHash)}&groups=${encodeURIComponent(groups)}`
                         } : undefined}
                         isDark={isDark}
                         colorNormalization={heatmapColor}
@@ -1292,17 +1296,23 @@ export function SuiteDetailPage() {
                         >
                           <SquareStack className="size-4" />
                         </button>
-                        <button
-                          disabled={recentSuccessfulPerClient.length < MIN_COMPARE_RUNS}
-                          onClick={() => {
-                            const ids = recentSuccessfulPerClient.map((r) => r.run_id)
-                            navigate({ to: '/compare', search: { runs: ids.join(',') } })
-                          }}
-                          className="flex cursor-pointer items-center justify-center rounded-xs p-1.5 shadow-xs ring-1 ring-inset transition-colors bg-white text-gray-500 ring-gray-300 hover:bg-gray-50 hover:text-gray-700 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-gray-800 dark:text-gray-400 dark:ring-gray-600 dark:hover:bg-gray-700 dark:hover:text-gray-200"
-                          title="Compare latest successful run per client"
-                        >
-                          <GitCompareArrows className="size-4" />
-                        </button>
+                        {recentSuccessfulPerClient.length >= MIN_COMPARE_RUNS ? (
+                          <a
+                            href={`/compare?runs=${encodeURIComponent(recentSuccessfulPerClient.map((r) => r.run_id).join(','))}`}
+                            className="flex items-center justify-center rounded-xs p-1.5 shadow-xs ring-1 ring-inset transition-colors bg-white text-gray-500 ring-gray-300 hover:bg-gray-50 hover:text-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:ring-gray-600 dark:hover:bg-gray-700 dark:hover:text-gray-200"
+                            title="Compare latest successful run per client"
+                          >
+                            <GitCompareArrows className="size-4" />
+                          </a>
+                        ) : (
+                          <button
+                            disabled
+                            className="flex cursor-not-allowed items-center justify-center rounded-xs p-1.5 opacity-50 shadow-xs ring-1 ring-inset bg-white text-gray-500 ring-gray-300 dark:bg-gray-800 dark:text-gray-400 dark:ring-gray-600"
+                            title="Compare latest successful run per client"
+                          >
+                            <GitCompareArrows className="size-4" />
+                          </button>
+                        )}
                         {groupCompareUrl && (
                           <a
                             href={groupCompareUrl}