fix: restructure devtools to root-level dirs and fix SPA navigation

- Moved src/pages/ to pages/, src/components/ to components/,
  src/partials/ to partials/ (stx standard structure)
- Updated stx.config.ts, serve.ts, build.ts paths
- Added data-stx-link to dynamic links for SPA navigation
- Removed invalid shell config (app uses @extends layout pattern)

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

Author: glennmichael123

packages/devtools/build.ts

@@ -20,17 +20,17 @@ console.log('JS build complete!')
 // 2. Build stx pages → dist/pages/ (HTML via bun-plugin-stx)
 const stxPages: string[] = []
 const glob = new Glob('*.stx')
-for await (const file of glob.scan('./src/pages')) {
-  stxPages.push(`./src/pages/${file}`)
+for await (const file of glob.scan('./pages')) {
+  stxPages.push(`./pages/${file}`)
 }
 
 const stxResult = await Bun.build({
   entrypoints: stxPages,
   outdir: './dist/pages',
   plugins: [stxPlugin({
-    componentsDir: './src/components',
-    layoutsDir: './src/layouts',
-    partialsDir: './src/partials',
+    componentsDir: './components',
+    layoutsDir: './layouts',
+    partialsDir: './partials',
   })],
 })
 

…es/devtools/src/components/job-table.stx …ckages/devtools/components/job-table.stxpackages/devtools/src/components/job-table.stx renamed to packages/devtools/components/job-table.stx packages/devtools/src/components/job-table.stx renamed to packages/devtools/components/job-table.stx

@@ -43,7 +43,7 @@
   ],
   "scripts": {
     "build": "bun --bun build.ts",
-    "dev": "bun --watch server.ts",
+    "dev": "bun --watch serve.ts",
     "prepublishOnly": "bun run build",
     "test": "bun test",
     "test:watch": "bun test --watch",

…devtools/src/components/queue-status.stx …ges/devtools/components/queue-status.stxpackages/devtools/src/components/queue-status.stx renamed to packages/devtools/components/queue-status.stx packages/devtools/src/components/queue-status.stx renamed to packages/devtools/components/queue-status.stx

@@ -1,9 +1,16 @@
+@extends('layouts/app')
+
+@section('title')Batch Details — bun-queue@endsection
+
+@push('styles')
 <style>
   .progress-ring-container svg { transform: rotate(-90deg); }
   .progress-ring-bg { fill: none; stroke: #1e1e26; stroke-width: 10; }
   .progress-ring-fill { fill: none; stroke: #10b981; stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset 0.6s ease; }
 </style>
+@endpush
 
+@section('content')
 <script client>
   interface BatchData {
     id: string
@@ -118,7 +125,7 @@
       <svg width='160' height='160' viewBox='0 0 160 160'>
         <circle class='progress-ring-bg' cx='80' cy='80' r='65'/>
         <circle class='progress-ring-fill' cx='80' cy='80' r='65'
-          stroke-dasharray='408.4' :style='\'stroke-dashoffset: \' + ringOffset()'/>
+          stroke-dasharray='408.4' :style="'stroke-dashoffset: ' + ringOffset()"/>
       </svg>
       <div class='absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center'>
         <div class='text-[2rem] font-bold text-zinc-50 tabular-nums leading-none'>{{ progressPct() }}%</div>
@@ -206,11 +213,12 @@
             <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' class='text-indigo-500 no-underline hover:underline'>View</a>
+              <a :href="'/jobs/' + job.id" data-stx-link class='text-indigo-500 no-underline hover:underline'>View</a>
             </td>
           </tr>
         </template>
       </tbody>
     </table>
   </div>
 </div>
+@endsection

…es/devtools/src/components/stat-card.stx …ckages/devtools/components/stat-card.stxpackages/devtools/src/components/stat-card.stx renamed to packages/devtools/components/stat-card.stx packages/devtools/src/components/stat-card.stx renamed to packages/devtools/components/stat-card.stx

@@ -1,7 +1,14 @@
+@extends('layouts/app')
+
+@section('title')Batches — bun-queue@endsection
+
+@push('styles')
 <style>
   .progress-bar-fill { transition: width 0.5s ease; }
 </style>
+@endpush
 
+@section('content')
 <script client>
   interface Batch {
     id: string
@@ -119,7 +126,7 @@
             <div
               class='progress-bar-fill h-full rounded-full'
               :class='progressBarColorClass(batchStatus(batch))'
-              :style='\'width: \' + batchPct(batch) + \'%\''
+              :style="'width: ' + batchPct(batch) + '%'"
             ></div>
           </div>
           <div class='text-xs text-zinc-500 text-right tabular-nums mb-3'>{{ batchPct(batch) }}% complete</div>
@@ -153,7 +160,7 @@
           <!-- View Details link -->
           <div class='flex justify-end'>
             <a
-              :href='\'/batches/\' + batch.id'
+              :href="'/batches/' + batch.id"
               class='text-indigo-500 no-underline text-[0.8125rem] font-medium transition-colors duration-150 hover:text-indigo-400 hover:underline'
             >
               View Details &rarr;
@@ -164,3 +171,4 @@
     </div>
   </div>
 </div>
+@endsection

packages/devtools/package.json

@@ -0,0 +1,40 @@
+<script>
+import type { JobTableRow } from '../types/components'
+
+const jobs: JobTableRow[] = []
+</script>
+
+<div>
+  @if(jobs.length === 0)
+    <div class='empty-state'>No jobs to display.</div>
+  @else
+    <table>
+      <thead>
+        <tr>
+          <th>ID</th>
+          <th>Queue</th>
+          <th>Name</th>
+          <th>Status</th>
+          <th class='text-right'>Attempts</th>
+          <th>Created</th>
+          <th class='text-right'>Duration</th>
+        </tr>
+      </thead>
+      <tbody>
+        @foreach(jobs as job)
+          <tr>
+            <td class='mono' style='font-size: 0.75rem;'>{{ job.id }}</td>
+            <td>{{ job.queue }}</td>
+            <td style='color: var(--text); font-weight: 500;'>{{ job.name }}</td>
+            <td>
+              <span class='badge {{ job.status === \'completed\' ? \'badge-success\' : job.status === \'failed\' ? \'badge-error\' : job.status === \'active\' ? \'badge-info\' : job.status === \'waiting\' ? \'badge-warning\' : \'badge-muted\' }}'>{{ job.status }}</span>
+            </td>
+            <td class='text-right tabular-nums'>{{ job.attempts }}/{{ job.maxAttempts }}</td>
+            <td style='font-size: 0.75rem;'>{{ job.createdAt }}</td>
+            <td class='text-right mono tabular-nums' style='font-size: 0.75rem;'>{{ job.duration ? job.duration + 'ms' : '—' }}</td>
+          </tr>
+        @endforeach
+      </tbody>
+    </table>
+  @endif
+</div>

…ges/devtools/src/pages/batch-details.stx packages/devtools/pages/batch-details.stxpackages/devtools/src/pages/batch-details.stx renamed to packages/devtools/pages/batch-details.stx packages/devtools/src/pages/batch-details.stx renamed to packages/devtools/pages/batch-details.stx

@@ -0,0 +1,29 @@
+<script>
+import type { QueueStatusData } from '../types/components'
+
+const queue: QueueStatusData = {
+  name: '',
+  paused: false,
+  waiting: 0,
+  active: 0,
+  completed: 0,
+  failed: 0,
+}
+</script>
+
+<div class='stat-card' style='padding: 1.25rem;'>
+  <div style='display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem;'>
+    <span style='font-size: 0.875rem; font-weight: 600; color: var(--text);'>{{ queue.name }}</span>
+    @if(queue.paused)
+      <span class='badge badge-muted'>Paused</span>
+    @else
+      <span class='badge badge-success'>Active</span>
+    @endif
+  </div>
+  <div style='display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem;'>
+    <div style='font-size: 0.75rem; color: var(--muted);'>Waiting <span style='color: var(--text2); font-weight: 500;' class='tabular-nums'>{{ queue.waiting }}</span></div>
+    <div style='font-size: 0.75rem; color: var(--muted);'>Active <span style='color: var(--accent); font-weight: 500;' class='tabular-nums'>{{ queue.active }}</span></div>
+    <div style='font-size: 0.75rem; color: var(--muted);'>Completed <span style='color: var(--success); font-weight: 500;' class='tabular-nums'>{{ queue.completed }}</span></div>
+    <div style='font-size: 0.75rem; color: var(--muted);'>Failed <span style='color: var(--error); font-weight: 500;' class='tabular-nums'>{{ queue.failed }}</span></div>
+  </div>
+</div>

packages/devtools/src/pages/batches.stx packages/devtools/pages/batches.stxpackages/devtools/src/pages/batches.stx renamed to packages/devtools/pages/batches.stx

@@ -0,0 +1,12 @@
+<script>
+import type { StatVariant } from '../types/components'
+
+const label: string = ''
+const value: number = 0
+const variant: StatVariant = ''
+</script>
+
+<div class='stat-card'>
+  <div class='stat-label'>{{ label }}</div>
+  <div class='stat-value {{ variant === \'active\' ? \'accent\' : variant === \'completed\' ? \'success\' : variant === \'failed\' ? \'error\' : \'\' }}'>{{ value }}</div>
+</div>