refactor: replace data-stx-link with StxLink component

Converted 6 dynamic links to <StxLink :to="expr"> in detail pages
(jobs, queues, groups, batches). Plain <a href> stays as native links.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: glennmichael123

packages/devtools/pages/batches/[id].stx

@@ -213,7 +213,7 @@
             <td class='px-3 py-2.5 text-xs text-zinc-400 border-b border-zinc-800'>{{ formatTime(job.createdAt) }}</td>
             <td class='px-3 py-2.5 text-xs text-zinc-400 border-b border-zinc-800 text-right font-mono tabular-nums'>{{ job.duration ? job.duration + 'ms' : '—' }}</td>
             <td class='px-3 py-2.5 text-[0.8125rem] border-b border-zinc-800'>
-              <a :href="'/jobs/' + job.id" data-stx-link class='text-indigo-500 no-underline hover:underline'>View</a>
+              <StxLink :to="'/jobs/' + job.id" class='text-indigo-500 no-underline hover:underline'>View</StxLink>
             </td>
           </tr>
         </template>

packages/devtools/pages/groups.stx

@@ -1,6 +1,8 @@
 @extends('layouts/default')
 
-@section('title')Job Groups — bun-queue@endsection
+@section('title')
+  Job Groups — bun-queue
+@endsection
 
 @section('content')
 <script client>
@@ -121,7 +123,7 @@
           </div>
 
           <div class='mt-auto flex justify-end pt-3 border-t border-zinc-800'>
-            <a :href="'/groups/' + encodeURIComponent(group.id || group.name)" data-stx-link class='text-indigo-500 no-underline text-[0.8125rem] font-medium transition-colors duration-150 hover:text-indigo-400 hover:underline'>View Details &rarr;</a>
+            <StxLink :to="'/groups/' + encodeURIComponent(group.id || group.name)" class='text-indigo-500 no-underline text-[0.8125rem] font-medium transition-colors duration-150 hover:text-indigo-400 hover:underline'>View Details &rarr;</StxLink>
           </div>
         </div>
       </template>

packages/devtools/pages/groups/[id].stx

@@ -159,7 +159,7 @@
             </td>
             <td class='px-3 py-2.5 text-xs text-zinc-400 border-b border-zinc-800'>{{ formatTime(job.updatedAt || job.createdAt) }}</td>
             <td class='px-3 py-2.5 text-[0.8125rem] border-b border-zinc-800'>
-              <a :href="'/jobs/' + job.id" data-stx-link class='text-indigo-500 no-underline hover:underline'>View</a>
+              <StxLink :to="'/jobs/' + job.id" class='text-indigo-500 no-underline hover:underline'>View</StxLink>
             </td>
           </tr>
         </template>

packages/devtools/pages/jobs.stx

@@ -217,7 +217,7 @@
             <td class='px-4 py-2.5 text-xs text-zinc-400 border-b border-zinc-800'>{{ job.completedAt || job.failedAt || job.processedAt || job.createdAt }}</td>
             <td class='px-4 py-2.5 text-right border-b border-zinc-800 whitespace-nowrap'>
               <button @if="job.status === 'failed'" @click='retryJob(job.id)' class='text-xs font-medium text-amber-400 bg-transparent border-none cursor-pointer hover:text-amber-300 transition-colors duration-150 mr-3'>Retry</button>
-              <a :href="'/jobs/' + job.id" data-stx-link class='text-xs font-medium text-indigo-400 no-underline hover:text-indigo-500 hover:underline transition-colors duration-150'>View Details</a>
+              <StxLink :to="'/jobs/' + job.id" class='text-xs font-medium text-indigo-400 no-underline hover:text-indigo-500 hover:underline transition-colors duration-150'>View Details</StxLink>
             </td>
           </tr>
         </template>

packages/devtools/pages/queues.stx

@@ -126,7 +126,7 @@
             </div>
           </div>
           <div class='pt-3 border-t border-zinc-800'>
-            <a :href="'/queues/' + q.id" data-stx-link class='text-sm font-medium text-indigo-400 no-underline hover:text-indigo-500 hover:underline transition-colors duration-150'>View Details &rarr;</a>
+            <StxLink :to="'/queues/' + q.id" class='text-sm font-medium text-indigo-400 no-underline hover:text-indigo-500 hover:underline transition-colors duration-150'>View Details &rarr;</StxLink>
           </div>
         </div>
       </template>

packages/devtools/pages/queues/[id].stx

@@ -270,7 +270,7 @@
             <td class='px-3 py-2.5 text-xs text-zinc-400 border-b border-zinc-800'>{{ formatTime(job.createdAt) }}</td>
             <td class='px-3 py-2.5 text-xs text-zinc-400 border-b border-zinc-800 text-right font-mono tabular-nums'>{{ job.duration ? job.duration + 'ms' : '—' }}</td>
             <td class='px-3 py-2.5 text-[0.8125rem] border-b border-zinc-800'>
-              <a :href="'/jobs/' + job.id" data-stx-link class='text-indigo-500 no-underline hover:underline'>View</a>
+              <StxLink :to="'/jobs/' + job.id" class='text-indigo-500 no-underline hover:underline'>View</StxLink>
             </td>
           </tr>
         </template>