Skip to content

Commit bc01844

Browse files
glennmichael123claude
glennmichael123
and
claude
committed
fix(devtools): use :show and :if instead of @show and @if
The @ prefix directives (@show, @if) are consumed by processDirectives as server-side Blade directives. Client-side reactive directives must use the : prefix (:show, :if) to be preserved in the HTML output for the signals runtime to process in the browser. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1 parent bde86ef commit bc01844

11 files changed

Lines changed: 44 additions & 44 deletions

File tree

‎packages/devtools/pages/batches.stx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -92,22 +92,22 @@
9292

9393
<div>
9494
<!-- Loading state -->
95-
<div @show='loading()' class='text-center py-12 text-zinc-500 text-[0.8125rem] bg-[#141419] border border-zinc-800 rounded-lg'>
95+
<div :show='loading()' class='text-center py-12 text-zinc-500 text-[0.8125rem] bg-[#141419] border border-zinc-800 rounded-lg'>
9696
Loading batches...
9797
</div>
9898

9999
<!-- Error state -->
100-
<div @show='!loading() && errorMessage()' class='text-center py-12 text-zinc-500 text-[0.8125rem] bg-[#141419] border border-zinc-800 rounded-lg'>
100+
<div :show='!loading() && errorMessage()' class='text-center py-12 text-zinc-500 text-[0.8125rem] bg-[#141419] border border-zinc-800 rounded-lg'>
101101
{{ errorMessage() }}
102102
</div>
103103

104104
<!-- Empty state -->
105-
<div @show='!loading() && !errorMessage() && batches().length === 0'>
105+
<div :show='!loading() && !errorMessage() && batches().length === 0'>
106106
<EmptyState icon="layers" title="No batches found" message="Create a batch to see it here." />
107107
</div>
108108

109109
<!-- Batch cards grid -->
110-
<div @show='!loading() && !errorMessage() && batches().length > 0' class='grid grid-cols-1 md:grid-cols-2 gap-4'>
110+
<div :show='!loading() && !errorMessage() && batches().length > 0' class='grid grid-cols-1 md:grid-cols-2 gap-4'>
111111
<template @for='batch in batches()'>
112112
<div class='bg-[#141419] border border-zinc-800 rounded-lg p-5 transition-colors duration-150 hover:border-indigo-500'>
113113
<!-- Header: name + status badge -->
@@ -154,7 +154,7 @@
154154
<!-- Timestamps -->
155155
<div class='flex gap-4 text-xs text-zinc-500 mb-3 flex-wrap'>
156156
<span class='whitespace-nowrap'>Created: {{ formatTime(batch.createdAt) }}</span>
157-
<span @show='batch.finishedAt' class='whitespace-nowrap'>Finished: {{ formatTime(batch.finishedAt) }}</span>
157+
<span :show='batch.finishedAt' class='whitespace-nowrap'>Finished: {{ formatTime(batch.finishedAt) }}</span>
158158
</div>
159159

160160
<!-- View Details link -->

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -183,13 +183,13 @@
183183
</div>
184184

185185
<!-- Loading state -->
186-
<div @show='loading()' class='text-center py-8 text-zinc-500 text-[0.8125rem]'>Loading jobs...</div>
186+
<div :show='loading()' class='text-center py-8 text-zinc-500 text-[0.8125rem]'>Loading jobs...</div>
187187

188188
<!-- Empty state -->
189-
<div @show='!loading() && jobs().length === 0' class='text-center py-8 text-zinc-500 text-[0.8125rem]'>No jobs found in this batch.</div>
189+
<div :show='!loading() && jobs().length === 0' class='text-center py-8 text-zinc-500 text-[0.8125rem]'>No jobs found in this batch.</div>
190190

191191
<!-- Table -->
192-
<table @show='!loading() && jobs().length > 0' class='w-full border-collapse'>
192+
<table :show='!loading() && jobs().length > 0' class='w-full border-collapse'>
193193
<thead>
194194
<tr>
195195
<th class='px-3 py-2 text-left text-[0.6875rem] font-medium text-zinc-500 uppercase tracking-wider border-b border-zinc-800'>ID</th>

‎packages/devtools/pages/dependencies.stx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -231,7 +231,7 @@
231231

232232
<!-- Graph -->
233233
<div class='graph-container flex-1 relative overflow-hidden' ref='graph-container'>
234-
<div @show='statusMessage()' class='flex items-center justify-center h-full text-zinc-500 text-sm'>{{ statusMessage() }}</div>
234+
<div :show='statusMessage()' class='flex items-center justify-center h-full text-zinc-500 text-sm'>{{ statusMessage() }}</div>
235235
</div>
236236

237237
<!-- Tooltip -->

‎packages/devtools/pages/groups.stx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -81,22 +81,22 @@
8181

8282
<div>
8383
<!-- Loading state -->
84-
<div @show='loading()' class='text-center py-12 text-zinc-500 text-[0.8125rem]'>
84+
<div :show='loading()' class='text-center py-12 text-zinc-500 text-[0.8125rem]'>
8585
Loading groups...
8686
</div>
8787

8888
<!-- Error state -->
89-
<div @show='!loading() && errorMessage()' class='text-center py-12 text-zinc-500 text-[0.8125rem]'>
89+
<div :show='!loading() && errorMessage()' class='text-center py-12 text-zinc-500 text-[0.8125rem]'>
9090
{{ errorMessage() }}
9191
</div>
9292

9393
<!-- Empty state -->
94-
<div @show='!loading() && !errorMessage() && filteredGroups().length === 0'>
94+
<div :show='!loading() && !errorMessage() && filteredGroups().length === 0'>
9595
<EmptyState icon="users" title="No groups found" message="Jobs assigned to groups will appear here." />
9696
</div>
9797

9898
<!-- Group cards grid -->
99-
<div @show='!loading() && !errorMessage() && filteredGroups().length > 0' class='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4'>
99+
<div :show='!loading() && !errorMessage() && filteredGroups().length > 0' class='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4'>
100100
<template @for='group in filteredGroups()'>
101101
<div class='bg-[#141419] border border-zinc-800 rounded-lg p-5 transition-colors duration-150 hover:border-indigo-500 flex flex-col'>
102102
<div class='flex items-center justify-between mb-4'>

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -135,13 +135,13 @@
135135
</div>
136136

137137
<!-- Loading state -->
138-
<div @show='loading()' class='text-center py-8 text-zinc-500 text-[0.8125rem]'>Loading jobs...</div>
138+
<div :show='loading()' class='text-center py-8 text-zinc-500 text-[0.8125rem]'>Loading jobs...</div>
139139

140140
<!-- Empty state -->
141-
<div @show='!loading() && jobs().length === 0' class='text-center py-8 text-zinc-500 text-[0.8125rem]'>No jobs found in this group.</div>
141+
<div :show='!loading() && jobs().length === 0' class='text-center py-8 text-zinc-500 text-[0.8125rem]'>No jobs found in this group.</div>
142142

143143
<!-- Table -->
144-
<table @show='!loading() && jobs().length > 0' class='w-full border-collapse'>
144+
<table :show='!loading() && jobs().length > 0' class='w-full border-collapse'>
145145
<thead>
146146
<tr>
147147
<th class='px-3 py-2 text-left text-[0.6875rem] font-medium text-zinc-500 uppercase tracking-wider border-b border-zinc-800'>Name</th>

‎packages/devtools/pages/index.stx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -200,7 +200,7 @@
200200
<p class='text-sm text-zinc-500 mt-1'>Real-time job queue monitoring</p>
201201
</div>
202202
<div class='flex items-center gap-3'>
203-
<div @if="wsStatus() === 'OPEN'" class='flex items-center gap-1.5'>
203+
<div :if="wsStatus() === 'OPEN'" class='flex items-center gap-1.5'>
204204
<span class='w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse'></span>
205205
<span class='text-xs text-zinc-500'>Live</span>
206206
</div>
@@ -266,15 +266,15 @@
266266
</div>
267267

268268
<!-- Loading state -->
269-
<div @show='loading()' class='text-center py-8 text-zinc-500 text-sm'>Loading recent jobs...</div>
269+
<div :show='loading()' class='text-center py-8 text-zinc-500 text-sm'>Loading recent jobs...</div>
270270

271271
<!-- Empty state -->
272-
<div @show='!loading() && recentJobs().length === 0'>
272+
<div :show='!loading() && recentJobs().length === 0'>
273273
<EmptyState icon="inbox" title="No recent jobs" message="Jobs will appear here once dispatched." />
274274
</div>
275275

276276
<!-- Jobs table -->
277-
<table @show='!loading() && recentJobs().length > 0' class='w-full border-collapse'>
277+
<table :show='!loading() && recentJobs().length > 0' class='w-full border-collapse'>
278278
<thead>
279279
<tr>
280280
<th class='px-3 py-2 text-left text-[0.6875rem] font-medium text-zinc-500 uppercase tracking-wide border-b border-zinc-800'>Name</th>
@@ -306,15 +306,15 @@
306306
</div>
307307

308308
<!-- Loading state -->
309-
<div @show='loading()' class='text-center py-8 text-zinc-500 text-sm'>Loading queues...</div>
309+
<div :show='loading()' class='text-center py-8 text-zinc-500 text-sm'>Loading queues...</div>
310310

311311
<!-- Empty state -->
312-
<div @show='!loading() && queues().length === 0'>
312+
<div :show='!loading() && queues().length === 0'>
313313
<EmptyState icon="layers" title="No queues found" message="Start a queue worker to see queues here." />
314314
</div>
315315

316316
<!-- Queue cards -->
317-
<div @show='!loading() && queues().length > 0' class='flex flex-col gap-3'>
317+
<div :show='!loading() && queues().length > 0' class='flex flex-col gap-3'>
318318
<template @for='q in queues()'>
319319
<div class='bg-[#1e1e26] rounded-md px-4 py-3 flex items-center justify-between hover:bg-indigo-500/[0.08] transition-colors duration-150'>
320320
<div>

‎packages/devtools/pages/jobs.stx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -153,14 +153,14 @@
153153
<h1 class='text-lg font-semibold text-zinc-50'>Jobs</h1>
154154
<p class='text-sm text-zinc-500 mt-1'>Browse and filter job history</p>
155155
</div>
156-
<div @if="wsStatus() === 'OPEN'" class='flex items-center gap-1.5'>
156+
<div :if="wsStatus() === 'OPEN'" class='flex items-center gap-1.5'>
157157
<span class='w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse'></span>
158158
<span class='text-xs text-zinc-500'>Live</span>
159159
</div>
160160
</div>
161161

162162
<!-- New items badge (scroll-to-pause) -->
163-
<div @if='bufferedCount() > 0' class='mb-4'>
163+
<div :if='bufferedCount() > 0' class='mb-4'>
164164
<button @click='flushBuffer()' class='w-full py-2 bg-indigo-500/10 border border-indigo-500/30 rounded-lg text-sm font-medium text-indigo-400 cursor-pointer hover:bg-indigo-500/20 transition-colors duration-150'>
165165
{{ bufferedCount() }} new job{{ bufferedCount() > 1 ? 's' : '' }} — click to show
166166
</button>
@@ -184,15 +184,15 @@
184184
<!-- Jobs Table -->
185185
<div class='bg-[#141419] border border-zinc-800 rounded-lg overflow-hidden' ref='table-container'>
186186
<!-- Loading state -->
187-
<div @if='loading()' class='text-center py-12 text-zinc-500 text-sm'>Loading jobs...</div>
187+
<div :if='loading()' class='text-center py-12 text-zinc-500 text-sm'>Loading jobs...</div>
188188

189189
<!-- Empty state -->
190-
<div @if='!loading() && filteredJobs().length === 0'>
190+
<div :if='!loading() && filteredJobs().length === 0'>
191191
<EmptyState icon="search" title="No jobs found" message="Try adjusting your search or filters." />
192192
</div>
193193

194194
<!-- Table -->
195-
<table @if='!loading() && filteredJobs().length > 0' class='w-full border-collapse'>
195+
<table :if='!loading() && filteredJobs().length > 0' class='w-full border-collapse'>
196196
<thead>
197197
<tr>
198198
<th class='px-4 py-2.5 text-left text-[0.6875rem] font-medium text-zinc-500 uppercase tracking-wide border-b border-zinc-800 bg-[#141419]'>Name</th>
@@ -216,7 +216,7 @@
216216
<td class='px-4 py-2.5 text-xs text-zinc-400 border-b border-zinc-800'>{{ job.createdAt }}</td>
217217
<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>
218218
<td class='px-4 py-2.5 text-right border-b border-zinc-800 whitespace-nowrap'>
219-
<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>
219+
<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>
220220
<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>
221221
</td>
222222
</tr>

‎packages/devtools/pages/jobs/[id].stx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -126,7 +126,7 @@
126126
</h1>
127127
<p class='text-[0.8125rem] text-zinc-500 mt-1'>Job details and execution information</p>
128128
</div>
129-
<div @show='hasDuration()' class='inline-flex items-baseline gap-1 tabular-nums'>
129+
<div :show='hasDuration()' class='inline-flex items-baseline gap-1 tabular-nums'>
130130
<span class='text-2xl font-bold text-indigo-500'>{{ duration() }}</span>
131131
<span class='text-sm text-zinc-500'>ms</span>
132132
</div>
@@ -145,7 +145,7 @@
145145
</div>
146146

147147
<!-- Error panel -->
148-
<div @show='showError()' class='bg-red-500/[0.08] border border-red-500/25 rounded-lg p-5 mb-6'>
148+
<div :show='showError()' class='bg-red-500/[0.08] border border-red-500/25 rounded-lg p-5 mb-6'>
149149
<div class='flex items-center gap-2 text-sm font-semibold text-red-500 mb-3'>
150150
<svg width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='15' y1='9' x2='9' y2='15'/><line x1='9' y1='9' x2='15' y2='15'/></svg>
151151
Error
@@ -198,12 +198,12 @@
198198
<div class='flex items-center justify-between mb-4'>
199199
<span class='text-sm font-semibold text-zinc-50'>Job Data</span>
200200
</div>
201-
<div @show='loading()' class='text-center py-8 text-zinc-500 text-[0.8125rem]'>Loading job data...</div>
202-
<div @show='!loading() && loadError()' class='text-center py-8 text-zinc-500 text-[0.8125rem]'>Failed to load job details.</div>
203-
<div @show='!loading() && !loadError() && hasJobData()'>
201+
<div :show='loading()' class='text-center py-8 text-zinc-500 text-[0.8125rem]'>Loading job data...</div>
202+
<div :show='!loading() && loadError()' class='text-center py-8 text-zinc-500 text-[0.8125rem]'>Failed to load job details.</div>
203+
<div :show='!loading() && !loadError() && hasJobData()'>
204204
<pre class='bg-[#0a0a0f] border border-zinc-800 rounded-md p-4 overflow-x-auto font-mono text-[0.8125rem] leading-relaxed text-zinc-400 whitespace-pre-wrap break-words max-h-[400px] overflow-y-auto'>{{ jobDataJson() }}</pre>
205205
</div>
206-
<div @show='!loading() && !loadError() && !hasJobData()' class='text-center py-8 text-zinc-500 text-[0.8125rem]'>No job data available.</div>
206+
<div :show='!loading() && !loadError() && !hasJobData()' class='text-center py-8 text-zinc-500 text-[0.8125rem]'>No job data available.</div>
207207
</div>
208208
</div>
209209
@endsection

‎packages/devtools/pages/queues.stx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -80,22 +80,22 @@
8080
<!-- Queue Cards Container -->
8181
<div>
8282
<!-- Loading state -->
83-
<div @show='loading()' class='text-center py-12 text-zinc-500 text-sm bg-[#141419] border border-zinc-800 rounded-lg'>
83+
<div :show='loading()' class='text-center py-12 text-zinc-500 text-sm bg-[#141419] border border-zinc-800 rounded-lg'>
8484
Loading queues...
8585
</div>
8686

8787
<!-- Error state -->
88-
<div @show='!loading() && errorMessage()' class='text-center py-12 text-zinc-500 text-sm bg-[#141419] border border-zinc-800 rounded-lg'>
88+
<div :show='!loading() && errorMessage()' class='text-center py-12 text-zinc-500 text-sm bg-[#141419] border border-zinc-800 rounded-lg'>
8989
{{ errorMessage() }}
9090
</div>
9191

9292
<!-- Empty state -->
93-
<div @show='!loading() && !errorMessage() && filteredQueues().length === 0'>
93+
<div :show='!loading() && !errorMessage() && filteredQueues().length === 0'>
9494
<EmptyState icon="search" title="No queues found" message="Try adjusting your search criteria." />
9595
</div>
9696

9797
<!-- Queue cards grid -->
98-
<div @show='!loading() && !errorMessage() && filteredQueues().length > 0' class='grid grid-cols-[repeat(auto-fill,minmax(320px,1fr))] gap-4'>
98+
<div :show='!loading() && !errorMessage() && filteredQueues().length > 0' class='grid grid-cols-[repeat(auto-fill,minmax(320px,1fr))] gap-4'>
9999
<template @for='q in filteredQueues()'>
100100
<div class='bg-[#141419] border border-zinc-800 rounded-lg p-5 hover:border-indigo-500 transition-colors duration-150'>
101101
<div class='flex items-center justify-between mb-4'>

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -231,22 +231,22 @@
231231
</div>
232232

233233
<!-- Loading state -->
234-
<div @show='loading()' class='text-center py-8 text-zinc-500 text-[0.8125rem]'>
234+
<div :show='loading()' class='text-center py-8 text-zinc-500 text-[0.8125rem]'>
235235
Loading jobs...
236236
</div>
237237

238238
<!-- Empty state -->
239-
<div @show='!loading() && jobs().length === 0' class='text-center py-8 text-zinc-500 text-[0.8125rem]'>
239+
<div :show='!loading() && jobs().length === 0' class='text-center py-8 text-zinc-500 text-[0.8125rem]'>
240240
No jobs found in this queue.
241241
</div>
242242

243243
<!-- Error state -->
244-
<div @show='!loading() && errorMessage()' class='text-center py-8 text-zinc-500 text-[0.8125rem]'>
244+
<div :show='!loading() && errorMessage()' class='text-center py-8 text-zinc-500 text-[0.8125rem]'>
245245
{{ errorMessage() }}
246246
</div>
247247

248248
<!-- Jobs table -->
249-
<table @show='!loading() && !errorMessage() && jobs().length > 0' class='w-full border-collapse'>
249+
<table :show='!loading() && !errorMessage() && jobs().length > 0' class='w-full border-collapse'>
250250
<thead>
251251
<tr>
252252
<th class='px-3 py-2 text-left text-[0.6875rem] font-medium text-zinc-500 uppercase tracking-wider border-b border-zinc-800'>ID</th>

0 commit comments

Comments
 (0)