Skip to content

Commit c37b22d

Browse files
glennmichael123claude
glennmichael123
and
claude
committed
fix(devtools): use @show directive instead of :show for visibility
Replace all :show= with @show= across 9 pages (36 instances). Both forms should work per stx runtime, but @show is the canonical directive syntax for visibility toggling. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1 parent 897c227 commit c37b22d

File tree

9 files changed

+36
-36
lines changed

9 files changed

+36
-36
lines changed

‎packages/devtools/src/pages/batch-details.stx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -84,13 +84,13 @@
8484
</div>
8585

8686
<!-- Loading state -->
87-
<div :show="loading()" class="text-center py-8 text-zinc-500 text-[0.8125rem]">Loading jobs...</div>
87+
<div @show="loading()" class="text-center py-8 text-zinc-500 text-[0.8125rem]">Loading jobs...</div>
8888

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

9292
<!-- Table -->
93-
<table :show="!loading() && jobs().length > 0" class="w-full border-collapse">
93+
<table @show="!loading() && jobs().length > 0" class="w-full border-collapse">
9494
<thead>
9595
<tr>
9696
<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/src/pages/batches.stx‎

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

2020
<div>
2121
<!-- Loading state -->
22-
<div :show="loading()" class="text-center py-12 text-zinc-500 text-[0.8125rem] bg-[#141419] border border-zinc-800 rounded-lg">
22+
<div @show="loading()" class="text-center py-12 text-zinc-500 text-[0.8125rem] bg-[#141419] border border-zinc-800 rounded-lg">
2323
Loading batches...
2424
</div>
2525

2626
<!-- Error state -->
27-
<div :show="!loading() && errorMessage()" class="text-center py-12 text-zinc-500 text-[0.8125rem] bg-[#141419] border border-zinc-800 rounded-lg">
27+
<div @show="!loading() && errorMessage()" class="text-center py-12 text-zinc-500 text-[0.8125rem] bg-[#141419] border border-zinc-800 rounded-lg">
2828
{{ errorMessage() }}
2929
</div>
3030

3131
<!-- Empty state -->
32-
<div :show="!loading() && !errorMessage() && batches().length === 0" class="text-center py-12 text-zinc-500 text-[0.8125rem] bg-[#141419] border border-zinc-800 rounded-lg">
32+
<div @show="!loading() && !errorMessage() && batches().length === 0" class="text-center py-12 text-zinc-500 text-[0.8125rem] bg-[#141419] border border-zinc-800 rounded-lg">
3333
No batches found. Create a batch to see it here.
3434
</div>
3535

3636
<!-- Batch cards grid -->
37-
<div :show="!loading() && !errorMessage() && batches().length > 0" class="grid grid-cols-1 md:grid-cols-2 gap-4">
37+
<div @show="!loading() && !errorMessage() && batches().length > 0" class="grid grid-cols-1 md:grid-cols-2 gap-4">
3838
<template @for="batch in batches()">
3939
<div class="bg-[#141419] border border-zinc-800 rounded-lg p-5 transition-colors duration-150 hover:border-indigo-500">
4040
<!-- Header: name + status badge -->
@@ -81,7 +81,7 @@
8181
<!-- Timestamps -->
8282
<div class="flex gap-4 text-xs text-zinc-500 mb-3 flex-wrap">
8383
<span class="whitespace-nowrap">Created: {{ formatTime(batch.createdAt) }}</span>
84-
<span :show="batch.finishedAt" class="whitespace-nowrap">Finished: {{ formatTime(batch.finishedAt) }}</span>
84+
<span @show="batch.finishedAt" class="whitespace-nowrap">Finished: {{ formatTime(batch.finishedAt) }}</span>
8585
</div>
8686

8787
<!-- View Details link -->

‎packages/devtools/src/pages/dependencies.stx‎

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

3838
<!-- Graph -->
3939
<div class="graph-container flex-1 relative overflow-hidden" ref="graph-container">
40-
<div :show="statusMessage()" class="flex items-center justify-center h-full text-zinc-500 text-sm">{{ statusMessage() }}</div>
40+
<div @show="statusMessage()" class="flex items-center justify-center h-full text-zinc-500 text-sm">{{ statusMessage() }}</div>
4141
</div>
4242

4343
<!-- Tooltip -->

‎packages/devtools/src/pages/group-details.stx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -56,13 +56,13 @@
5656
</div>
5757

5858
<!-- Loading state -->
59-
<div :show="loading()" class="text-center py-8 text-zinc-500 text-[0.8125rem]">Loading jobs...</div>
59+
<div @show="loading()" class="text-center py-8 text-zinc-500 text-[0.8125rem]">Loading jobs...</div>
6060

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

6464
<!-- Table -->
65-
<table :show="!loading() && jobs().length > 0" class="w-full border-collapse">
65+
<table @show="!loading() && jobs().length > 0" class="w-full border-collapse">
6666
<thead>
6767
<tr>
6868
<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/src/pages/groups.stx‎

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

2727
<div>
2828
<!-- Loading state -->
29-
<div :show="loading()" class="text-center py-12 text-zinc-500 text-[0.8125rem]">
29+
<div @show="loading()" class="text-center py-12 text-zinc-500 text-[0.8125rem]">
3030
Loading groups...
3131
</div>
3232

3333
<!-- Error state -->
34-
<div :show="!loading() && errorMessage()" class="text-center py-12 text-zinc-500 text-[0.8125rem]">
34+
<div @show="!loading() && errorMessage()" class="text-center py-12 text-zinc-500 text-[0.8125rem]">
3535
{{ errorMessage() }}
3636
</div>
3737

3838
<!-- Empty state -->
39-
<div :show="!loading() && !errorMessage() && filteredGroups().length === 0" class="text-center py-12 text-zinc-500 text-[0.8125rem]">
39+
<div @show="!loading() && !errorMessage() && filteredGroups().length === 0" class="text-center py-12 text-zinc-500 text-[0.8125rem]">
4040
No groups found. Jobs assigned to groups will appear here.
4141
</div>
4242

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

‎packages/devtools/src/pages/index.stx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -78,13 +78,13 @@
7878
</div>
7979

8080
<!-- Loading state -->
81-
<div :show="loading()" class="text-center py-8 text-zinc-500 text-sm">Loading recent jobs...</div>
81+
<div @show="loading()" class="text-center py-8 text-zinc-500 text-sm">Loading recent jobs...</div>
8282

8383
<!-- Empty state -->
84-
<div :show="!loading() && recentJobs().length === 0" class="text-center py-8 text-zinc-500 text-sm">No recent jobs to display.</div>
84+
<div @show="!loading() && recentJobs().length === 0" class="text-center py-8 text-zinc-500 text-sm">No recent jobs to display.</div>
8585

8686
<!-- Jobs table -->
87-
<table :show="!loading() && recentJobs().length > 0" class="w-full border-collapse">
87+
<table @show="!loading() && recentJobs().length > 0" class="w-full border-collapse">
8888
<thead>
8989
<tr>
9090
<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>
@@ -116,13 +116,13 @@
116116
</div>
117117

118118
<!-- Loading state -->
119-
<div :show="loading()" class="text-center py-8 text-zinc-500 text-sm">Loading queues...</div>
119+
<div @show="loading()" class="text-center py-8 text-zinc-500 text-sm">Loading queues...</div>
120120

121121
<!-- Empty state -->
122-
<div :show="!loading() && queues().length === 0" class="text-center py-8 text-zinc-500 text-sm">No queues found.</div>
122+
<div @show="!loading() && queues().length === 0" class="text-center py-8 text-zinc-500 text-sm">No queues found.</div>
123123

124124
<!-- Queue cards -->
125-
<div :show="!loading() && queues().length > 0" class="flex flex-col gap-3">
125+
<div @show="!loading() && queues().length > 0" class="flex flex-col gap-3">
126126
<template @for="q in queues()">
127127
<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">
128128
<div>

‎packages/devtools/src/pages/job-details.stx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
</h1>
1313
<p class="text-[0.8125rem] text-zinc-500 mt-1">Job details and execution information</p>
1414
</div>
15-
<div :show="hasDuration()" class="inline-flex items-baseline gap-1 tabular-nums">
15+
<div @show="hasDuration()" class="inline-flex items-baseline gap-1 tabular-nums">
1616
<span class="text-2xl font-bold text-indigo-500">{{ duration() }}</span>
1717
<span class="text-sm text-zinc-500">ms</span>
1818
</div>
@@ -31,7 +31,7 @@
3131
</div>
3232

3333
<!-- Error panel -->
34-
<div :show="showError()" class="bg-red-500/[0.08] border border-red-500/25 rounded-lg p-5 mb-6">
34+
<div @show="showError()" class="bg-red-500/[0.08] border border-red-500/25 rounded-lg p-5 mb-6">
3535
<div class="flex items-center gap-2 text-sm font-semibold text-red-500 mb-3">
3636
<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>
3737
Error
@@ -84,12 +84,12 @@
8484
<div class="flex items-center justify-between mb-4">
8585
<span class="text-sm font-semibold text-zinc-50">Job Data</span>
8686
</div>
87-
<div :show="loading()" class="text-center py-8 text-zinc-500 text-[0.8125rem]">Loading job data...</div>
88-
<div :show="!loading() && loadError()" class="text-center py-8 text-zinc-500 text-[0.8125rem]">Failed to load job details.</div>
89-
<div :show="!loading() && !loadError() && hasJobData()">
87+
<div @show="loading()" class="text-center py-8 text-zinc-500 text-[0.8125rem]">Loading job data...</div>
88+
<div @show="!loading() && loadError()" class="text-center py-8 text-zinc-500 text-[0.8125rem]">Failed to load job details.</div>
89+
<div @show="!loading() && !loadError() && hasJobData()">
9090
<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>
9191
</div>
92-
<div :show="!loading() && !loadError() && !hasJobData()" class="text-center py-8 text-zinc-500 text-[0.8125rem]">No job data available.</div>
92+
<div @show="!loading() && !loadError() && !hasJobData()" class="text-center py-8 text-zinc-500 text-[0.8125rem]">No job data available.</div>
9393
</div>
9494
</div>
9595

‎packages/devtools/src/pages/queue-details.stx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -77,22 +77,22 @@
7777
</div>
7878

7979
<!-- Loading state -->
80-
<div :show="loading()" class="text-center py-8 text-zinc-500 text-[0.8125rem]">
80+
<div @show="loading()" class="text-center py-8 text-zinc-500 text-[0.8125rem]">
8181
Loading jobs...
8282
</div>
8383

8484
<!-- Empty state -->
85-
<div :show="!loading() && jobs().length === 0" class="text-center py-8 text-zinc-500 text-[0.8125rem]">
85+
<div @show="!loading() && jobs().length === 0" class="text-center py-8 text-zinc-500 text-[0.8125rem]">
8686
No jobs found in this queue.
8787
</div>
8888

8989
<!-- Error state -->
90-
<div :show="!loading() && errorMessage()" class="text-center py-8 text-zinc-500 text-[0.8125rem]">
90+
<div @show="!loading() && errorMessage()" class="text-center py-8 text-zinc-500 text-[0.8125rem]">
9191
{{ errorMessage() }}
9292
</div>
9393

9494
<!-- Jobs table -->
95-
<table :show="!loading() && !errorMessage() && jobs().length > 0" class="w-full border-collapse">
95+
<table @show="!loading() && !errorMessage() && jobs().length > 0" class="w-full border-collapse">
9696
<thead>
9797
<tr>
9898
<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/src/pages/queues.stx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -33,22 +33,22 @@
3333
<!-- Queue Cards Container -->
3434
<div>
3535
<!-- Loading state -->
36-
<div :show="loading()" class="text-center py-12 text-zinc-500 text-sm bg-[#141419] border border-zinc-800 rounded-lg">
36+
<div @show="loading()" class="text-center py-12 text-zinc-500 text-sm bg-[#141419] border border-zinc-800 rounded-lg">
3737
Loading queues...
3838
</div>
3939

4040
<!-- Error state -->
41-
<div :show="!loading() && errorMessage()" class="text-center py-12 text-zinc-500 text-sm bg-[#141419] border border-zinc-800 rounded-lg">
41+
<div @show="!loading() && errorMessage()" class="text-center py-12 text-zinc-500 text-sm bg-[#141419] border border-zinc-800 rounded-lg">
4242
{{ errorMessage() }}
4343
</div>
4444

4545
<!-- Empty state -->
46-
<div :show="!loading() && !errorMessage() && filteredQueues().length === 0" class="text-center py-12 text-zinc-500 text-sm bg-[#141419] border border-zinc-800 rounded-lg">
46+
<div @show="!loading() && !errorMessage() && filteredQueues().length === 0" class="text-center py-12 text-zinc-500 text-sm bg-[#141419] border border-zinc-800 rounded-lg">
4747
No queues found matching your search.
4848
</div>
4949

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

0 commit comments

Comments
 (0)