@stacksjs/defaults 0.70.362 → 0.70.363

package/resources/components/Dashboard/Auth/AccessTokens.stx

@@ -28,13 +28,11 @@ interface CreatedTokenResponse {
   }
 }
 
-const availableScopes = [
-  { name: 'read', description: 'Read application resources' },
-  { name: 'write', description: 'Create and update resources' },
-  { name: 'delete', description: 'Delete application resources' },
-  { name: 'deploy', description: 'Run deployment operations' },
-  { name: 'admin', description: 'Use administrative operations' },
-]
+interface TokenDraft {
+  name: string
+  scopes: string[]
+  expiresInMinutes: number
+}
 
 const tokens = state<AccessTokenRow[]>([])
 const loading = state(true)
@@ -44,16 +42,16 @@ const actionError = state('')
 const actionMessage = state('')
 const showCreate = state(false)
 const creating = state(false)
-const tokenName = state('')
-const expiryMinutes = state('10080')
-const selectedScopes = state<string[]>(['read'])
 const createdToken = state('')
-const copied = state(false)
 const confirmingRevoke = state<number | null>(null)
 const revoking = state<number | null>(null)
 
 const activeCount = derived(() => tokens().filter(token => tokenStatus(token) === 'active').length)
 const expiredCount = derived(() => tokens().filter(token => tokenStatus(token) === 'expired').length)
+const tokenToRevoke = derived(() => tokens().find(token => token.id === confirmingRevoke()) ?? null)
+const revokeDescription = derived(() => tokenToRevoke()
+  ? `${tokenToRevoke()?.name} will immediately stop authorizing API requests.`
+  : 'This access token will immediately stop authorizing API requests.')
 
 function tokenStatus(token: AccessTokenRow): 'active' | 'expired' {
   if (!token.expires_at)
@@ -74,33 +72,18 @@ function formatDate(value: string | null): string {
   return Number.isNaN(date.getTime()) ? 'Unknown' : date.toLocaleString()
 }
 
-function toggleScope(event: Event, scope: string): void {
-  const enabled = (event.target as HTMLInputElement).checked
-  selectedScopes.set(enabled
-    ? [...new Set([...selectedScopes(), scope])]
-    : selectedScopes().filter(item => item !== scope))
-}
-
-function resetCreateForm(): void {
-  tokenName.set('')
-  expiryMinutes.set('10080')
-  selectedScopes.set(['read'])
-  createdToken.set('')
-  copied.set(false)
-}
-
 function openCreate(): void {
   if (authenticationRequired())
     return
 
-  resetCreateForm()
+  createdToken.set('')
   actionError.set('')
   showCreate.set(true)
 }
 
 function closeCreate(): void {
   showCreate.set(false)
-  resetCreateForm()
+  createdToken.set('')
 }
 
 async function loadTokens(): Promise<void> {
@@ -139,27 +122,18 @@ async function loadTokens(): Promise<void> {
   }
 }
 
-async function createAccessToken(): Promise<void> {
+async function createAccessToken(draft: TokenDraft): Promise<void> {
   actionError.set('')
   actionMessage.set('')
 
-  if (!tokenName().trim()) {
-    actionError.set('Enter a name for this token.')
-    return
-  }
-  if (selectedScopes().length === 0) {
-    actionError.set('Select at least one scope.')
-    return
-  }
-
   creating.set(true)
   try {
     const response = await dashboardApi<CreatedTokenResponse>('/auth/token', {
       method: 'POST',
       body: {
-        name: tokenName().trim(),
-        scopes: selectedScopes(),
-        expires_in_minutes: Number(expiryMinutes()),
+        name: draft.name,
+        scopes: draft.scopes,
+        expires_in_minutes: draft.expiresInMinutes,
         with_refresh_token: false,
       },
     })
@@ -182,22 +156,10 @@ async function createAccessToken(): Promise<void> {
   }
 }
 
-async function copyCreatedToken(): Promise<void> {
-  actionError.set('')
-  try {
-    await globalThis.navigator.clipboard.writeText(createdToken())
-    copied.set(true)
-  }
-  catch {
-    actionError.set('Clipboard access is unavailable. Select and copy the token manually.')
-  }
-}
-
-async function revokeToken(id: number): Promise<void> {
-  if (confirmingRevoke() !== id) {
-    confirmingRevoke.set(id)
+async function revokeToken(): Promise<void> {
+  const id = confirmingRevoke()
+  if (id === null)
     return
-  }
 
   actionError.set('')
   actionMessage.set('')
@@ -260,8 +222,8 @@ onMount(() => {
     <Button variant="secondary" size="sm" @click="loadTokens">Try again</Button>
   </div>
 
-  <div :if="actionError()" role="alert" class="px-4 py-3 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-950/40 border border-red-200 rounded-lg dark:border-red-900">{{ actionError() }}</div>
-  <div :if="actionMessage()" role="status" class="px-4 py-3 text-green-700 text-sm dark:text-green-300 bg-green-50 dark:bg-green-950/40 border border-green-200 rounded-lg dark:border-green-900">{{ actionMessage() }}</div>
+  <div :if="actionError() && !showCreate()" role="alert" class="px-4 py-3 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-950/40 border border-red-200 rounded-lg dark:border-red-900">{{ actionError() }}</div>
+  <div :if="actionMessage() && !showCreate()" role="status" class="px-4 py-3 text-green-700 text-sm dark:text-green-300 bg-green-50 dark:bg-green-950/40 border border-green-200 rounded-lg dark:border-green-900">{{ actionMessage() }}</div>
 
   <Card padding="none">
     <div class="flex items-center justify-between p-5 border-b border-neutral-200 dark:border-neutral-700">
@@ -333,8 +295,8 @@ onMount(() => {
             <td class="px-4 py-3.5"><span :class="'inline-flex px-2 py-0.5 font-medium text-xs capitalize rounded ' + statusClass(token)">{{ tokenStatus(token) }}</span></td>
             <td class="px-4 py-3.5 text-neutral-500 text-right text-xs whitespace-nowrap dark:text-neutral-400">{{ formatDate(token.expires_at) }}</td>
             <td class="pr-5 py-3.5 text-right whitespace-nowrap">
-              <Button variant="danger" size="sm" :loading="revoking() === token.id" @click="revokeToken(token.id)">
-                {{ revoking() === token.id ? 'Revoking...' : confirmingRevoke() === token.id ? 'Confirm Revoke' : 'Revoke' }}
+              <Button variant="danger" size="sm" :loading="revoking() === token.id" @click="confirmingRevoke.set(token.id)">
+                {{ revoking() === token.id ? 'Revoking...' : 'Revoke' }}
               </Button>
             </td>
           </tr>
@@ -343,73 +305,23 @@ onMount(() => {
     </div>
   </Card>
 
-  <div :if="showCreate()" class="flex fixed inset-0 z-50 items-center justify-center p-4 bg-black/50 dashboard-modal-layer" @click.self="closeCreate">
-    <div role="dialog" aria-modal="true" aria-labelledby="create-token-title" class="p-6 max-w-lg w-full bg-white dark:bg-neutral-900 border border-neutral-200 rounded-xl dark:border-neutral-700 shadow-xl">
-      <div class="flex gap-4 items-start justify-between">
-        <div>
-          <h2 id="create-token-title" class="font-semibold text-lg text-neutral-900 dark:text-white">Create Access Token</h2>
-          <p class="mt-1 text-neutral-500 text-sm dark:text-neutral-400">Grant only the scopes this integration needs.</p>
-        </div>
-        <Button variant="ghost" iconOnly ariaLabel="Close create token dialog" @click="closeCreate">
-          <span class="h-5 w-5 i-hugeicons-cancel-01"></span>
-        </Button>
-      </div>
-
-      <div :if="createdToken()" class="mt-6 space-y-4">
-        <div role="status" class="px-4 py-3 text-amber-800 text-sm dark:text-amber-200 bg-amber-50 dark:bg-amber-950/40 border border-amber-200 rounded-lg dark:border-amber-900">
-          {{ actionMessage() }}
-        </div>
-        <label class="block">
-          <span class="font-medium text-neutral-700 text-sm dark:text-neutral-300">New token</span>
-          <textarea readonly rows="4" class="block mt-2 p-3 w-full font-mono text-neutral-900 text-xs dark:text-white bg-neutral-50 dark:bg-neutral-950 border border-neutral-300 rounded-lg dark:border-neutral-700">{{ createdToken() }}</textarea>
-        </label>
-        <div class="flex gap-2 justify-end">
-          <Button variant="secondary" @click="closeCreate">Done</Button>
-          <Button @click="copyCreatedToken">
-            <span class="h-4 w-4 i-hugeicons-copy-01"></span>
-            {{ copied() ? 'Copied' : 'Copy Token' }}
-          </Button>
-        </div>
-      </div>
-
-      <form :if="!createdToken()" class="mt-6 space-y-5" @submit.prevent="createAccessToken">
-        <label class="block">
-          <span class="font-medium text-neutral-700 text-sm dark:text-neutral-300">Token name</span>
-          <input x-model="tokenName" type="text" maxlength="255" required placeholder="CI deployment" class="block mt-2 px-3 py-2 w-full text-neutral-900 text-sm dark:text-white bg-white dark:bg-neutral-950 border border-neutral-300 rounded-lg dark:border-neutral-700 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/20">
-        </label>
-
-        <label class="block">
-          <span class="font-medium text-neutral-700 text-sm dark:text-neutral-300">Expires after</span>
-          <select x-model="expiryMinutes" class="block mt-2 px-3 py-2 w-full text-neutral-900 text-sm dark:text-white bg-white dark:bg-neutral-950 border border-neutral-300 rounded-lg dark:border-neutral-700 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/20">
-            <option value="60">1 hour</option>
-            <option value="1440">1 day</option>
-            <option value="10080">7 days</option>
-            <option value="43200">30 days</option>
-          </select>
-        </label>
-
-        <fieldset>
-          <legend class="font-medium text-neutral-700 text-sm dark:text-neutral-300">Scopes</legend>
-          <div class="grid gap-2 grid-cols-1 sm:grid-cols-2 mt-2">
-            <label :for="scope in availableScopes" class="flex gap-3 items-start p-3 border border-neutral-200 rounded-lg dark:border-neutral-700">
-              <input type="checkbox" :checked="selectedScopes().includes(scope.name)" class="mt-0.5 h-4 w-4 text-blue-600 rounded" @change="toggleScope($event, scope.name)">
-              <span>
-                <span class="block font-medium text-neutral-900 text-sm dark:text-white">{{ scope.name }}</span>
-                <span class="block mt-0.5 text-neutral-500 text-xs dark:text-neutral-400">{{ scope.description }}</span>
-              </span>
-            </label>
-          </div>
-        </fieldset>
-
-        <div :if="actionError()" role="alert" class="px-3 py-2 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-950/40 rounded-lg">{{ actionError() }}</div>
-
-        <div class="flex gap-2 justify-end pt-2">
-          <Button variant="secondary" :disabled="creating()" @click="closeCreate">Cancel</Button>
-          <Button type="submit" :loading="creating()">
-            {{ creating() ? 'Creating...' : 'Create Token' }}
-          </Button>
-        </div>
-      </form>
-    </div>
-  </div>
+  <AccessTokenCreateDialog
+    :open="showCreate()"
+    :busy="creating()"
+    :createdToken="createdToken()"
+    :message="actionMessage()"
+    :error="actionError()"
+    @close="closeCreate"
+    @submit="createAccessToken($event)"
+  />
+
+  <ConfirmDialog
+    :isOpen="confirmingRevoke() !== null"
+    title="Revoke this access token?"
+    :description="revokeDescription()"
+    :busy="revoking() !== null"
+    confirmLabel="Revoke"
+    @close="confirmingRevoke.set(null)"
+    @confirm="revokeToken"
+  />
 </div>

package/resources/components/Dashboard/Ci/CiDashboard.stx

@@ -83,50 +83,6 @@
     return str.length > len ? str.slice(0, len) + '...' : str
   }
 
-  // ─── Drilldown drawer state (stacksjs/stacks#1848) ──────────────
-  const drilldownTarget = derived(() => ci.drilldown())
-  const drilldownRuns = derived(() => ci.drilldownRuns())
-  const loadingDrilldown = derived(() => ci.loadingDrilldown())
-  const drilldownError = derived(() => ci.drilldownError())
-  const expandedRunId = derived(() => ci.expandedRunId())
-  const jobsByRunId = derived(() => ci.drilldownJobsByRunId())
-  const loadingJobsRunId = derived(() => ci.loadingJobsForRunId())
-
-  function runRowClass(conclusion, status) {
-    const base = 'px-3 py-2 -mx-3 border-l-2 cursor-pointer hover:bg-zinc-50 dark:hover:bg-zinc-900 transition-colors '
-    if (status !== 'completed') return base + 'border-yellow-400'
-    if (conclusion === 'success') return base + 'border-emerald-400'
-    if (conclusion === 'failure' || conclusion === 'timed_out') return base + 'border-red-400'
-    if (conclusion === 'cancelled') return base + 'border-zinc-400'
-    return base + 'border-zinc-200 dark:border-zinc-800'
-  }
-
-  function runStatusBadge(conclusion, status) {
-    if (status !== 'completed') return { label: status, cls: 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/40 dark:text-yellow-300' }
-    if (conclusion === 'success') return { label: 'success', cls: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-300' }
-    if (conclusion === 'failure') return { label: 'failure', cls: 'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300' }
-    return { label: conclusion || 'unknown', cls: 'bg-zinc-100 text-zinc-700 dark:bg-zinc-800 dark:text-zinc-300' }
-  }
-
-  function formatDuration(ms) {
-    if (ms == null) return ''
-    const s = Math.floor(ms / 1000)
-    if (s < 60) return s + 's'
-    const m = Math.floor(s / 60)
-    const rem = s % 60
-    if (m < 60) return m + 'm' + (rem ? ' ' + rem + 's' : '')
-    const h = Math.floor(m / 60)
-    return h + 'h ' + (m % 60) + 'm'
-  }
-
-  function jobsForRun(runId) {
-    return jobsByRunId()[runId] || []
-  }
-
-  function failedJobs(runId) {
-    return jobsForRun(runId).filter(j => j.conclusion && j.conclusion !== 'success' && j.conclusion !== 'skipped' && j.conclusion !== 'neutral')
-  }
-
   // ─── Runner pressure sparkline (stacksjs/stacks#1850) ────────────
   //
   // Inline SVG sparkline - no chart lib. The path is built off the
@@ -342,118 +298,6 @@
   </div>
   </div>
 
-  <!-- ────────── Drilldown drawer (#1848) ────────── -->
-  <!-- Slide-in side panel triggered by a repo-card click. Lists the
-      last 20 workflow runs as a vertical timeline; failing runs
-      expand inline to their failed-jobs list. Closes on backdrop
-      click + Escape. -->
-  <div
-    :if="drilldownTarget()"
-    class="flex fixed inset-0 z-50 justify-end dashboard-modal-layer"
-    @click="ci.closeDrilldown()"
-    @keydown.escape.window="ci.closeDrilldown()"
-  >
-    <div class="absolute inset-0 bg-black/40"></div>
-    <aside
-      @click.stop
-      class="overflow-y-auto relative h-full max-w-2xl w-full bg-white dark:bg-zinc-950 border-l border-zinc-200 dark:border-zinc-800 shadow-2xl"
-    >
-      <!-- Header -->
-      <div class="flex sticky top-0 z-10 gap-3 items-start px-5 py-4 bg-white dark:bg-zinc-950 border-b border-zinc-200 dark:border-zinc-800">
-        <div class="flex-1 min-w-0">
-          <p class="text-xs text-zinc-500 tracking-wide uppercase">Run history</p>
-          <h3 class="font-semibold text-lg text-zinc-900 truncate dark:text-zinc-100" :text="drilldownTarget().fullName"></h3>
-        </div>
-        <Button variant="ghost" size="sm" iconOnly ariaLabel="Close run history" @click="ci.closeDrilldown()">
-          <span aria-hidden="true" class="h-5 w-5 i-hugeicons-cancel-01"></span>
-        </Button>
-      </div>
-
-      <!-- Error -->
-      <div :if="drilldownError()" class="mt-4 mx-5 px-4 py-3 bg-red-50 dark:bg-red-950/30 border border-red-200 rounded-lg dark:border-red-900/40">
-        <p class="text-red-700 text-xs dark:text-red-300" :text="drilldownError()"></p>
-      </div>
-
-      <!-- Loading -->
-      <div :if="loadingDrilldown() && drilldownRuns().length === 0" class="px-5 py-12 text-center">
-        <span aria-hidden="true" class="mx-auto h-6 w-6 text-violet-500 animate-spin i-hugeicons-loading-03"></span>
-        <p class="mt-2 text-xs text-zinc-500">Fetching recent runs…</p>
-      </div>
-
-      <!-- Runs list -->
-      <ul :if="drilldownRuns().length > 0" class="px-5 py-3">
-        <li
-          :for="run in drilldownRuns"
-          class="border-b border-zinc-100 dark:border-zinc-900 last:border-0"
-        >
-          <div
-            @click="ci.toggleRunJobs(run.id)"
-            :class="runRowClass(run.conclusion, run.status)"
-          >
-            <div class="flex gap-3 items-start justify-between">
-              <div class="flex-1 min-w-0">
-                <div class="flex gap-2 items-center">
-                  <span
-                    :class="`px-1.5 py-0.5 text-[10px] font-medium rounded ${runStatusBadge(run.conclusion, run.status).cls}`"
-                    :text="runStatusBadge(run.conclusion, run.status).label"
-                  ></span>
-                  <span class="font-medium text-sm text-zinc-800 truncate dark:text-zinc-200" :text="run.name"></span>
-                </div>
-                <p :if="run.commitMessage" class="mt-1 text-xs text-zinc-500 truncate" :text="truncate(run.commitMessage, 80)"></p>
-                <div class="flex gap-2 items-center mt-1 text-[10px] text-zinc-400">
-                  <span class="font-mono" :text="run.headShaShort"></span>
-                  <span :if="run.headBranch" :text="run.headBranch"></span>
-                  <span :if="run.commitAuthor">·</span>
-                  <span :if="run.commitAuthor" :text="run.commitAuthor"></span>
-                  <span>·</span>
-                  <span :text="timeAgo(run.updatedAt)"></span>
-                  <span :if="run.durationMs">·</span>
-                  <span :if="run.durationMs" :text="formatDuration(run.durationMs)"></span>
-                </div>
-              </div>
-              <a
-                :href="run.url"
-                target="_blank"
-                @click.stop
-                class="flex-shrink-0 no-underline text-violet-600 text-xs dark:text-violet-400 hover:underline"
-              >view ↗</a>
-            </div>
-          </div>
-
-          <!-- Expanded: failed job list -->
-          <div :if="expandedRunId() === run.id" class="px-3 py-2 bg-zinc-50 dark:bg-zinc-900/50 border-t border-zinc-100 dark:border-zinc-900">
-            <div :if="loadingJobsRunId() === run.id" class="py-2 text-xs text-zinc-500">
-              Loading jobs…
-            </div>
-            <div :if="loadingJobsRunId() !== run.id && jobsForRun(run.id).length === 0" class="py-1 italic text-xs text-zinc-400">
-              No job detail.
-            </div>
-            <div :if="loadingJobsRunId() !== run.id && failedJobs(run.id).length > 0" class="space-y-1.5">
-              <p class="text-[10px] text-zinc-500 tracking-wide uppercase">Failed jobs</p>
-              <a
-                :for="job in failedJobs(run.id)"
-                :href="job.url"
-                target="_blank"
-                @click.stop
-                class="flex gap-1.5 items-center no-underline text-red-700 text-xs dark:text-red-400 hover:underline"
-              >
-                <span aria-hidden="true" class="h-2.5 w-2.5 i-hugeicons-cancel-circle"></span>
-                <span :text="job.name"></span>
-                <span :if="job.durationMs" class="text-zinc-400" :text="'(' + formatDuration(job.durationMs) + ')'"></span>
-              </a>
-            </div>
-            <div :if="loadingJobsRunId() !== run.id && jobsForRun(run.id).length > 0 && failedJobs(run.id).length === 0" class="py-1 text-xs text-zinc-500">
-              All <span :text="jobsForRun(run.id).length"></span> jobs passed.
-            </div>
-          </div>
-        </li>
-      </ul>
-
-      <!-- Empty -->
-      <div :if="!loadingDrilldown() && !drilldownError() && drilldownRuns().length === 0" class="px-5 py-12 text-center">
-        <p class="text-sm text-zinc-500">No recent runs.</p>
-      </div>
-    </aside>
-  </div>
+  <CiRunHistoryDrawer />
 </div>
 </template>

package/resources/components/Dashboard/Ci/CiRunHistoryDrawer.stx

@@ -0,0 +1,127 @@
+<script client>
+import { ciStore } from '~/storage/framework/defaults/views/dashboard/stores/ci'
+
+const ci = ciStore
+const target = derived(() => ci.drilldown())
+const runs = derived(() => ci.drilldownRuns())
+const loading = derived(() => ci.loadingDrilldown())
+const error = derived(() => ci.drilldownError())
+const expandedRunId = derived(() => ci.expandedRunId())
+const jobsByRunId = derived(() => ci.drilldownJobsByRunId())
+const loadingJobsRunId = derived(() => ci.loadingJobsForRunId())
+const title = derived(() => target()?.fullName || 'Run history')
+
+function runRowClass(conclusion, status) {
+  const base = 'px-3 py-2 -mx-3 border-l-2 cursor-pointer hover:bg-zinc-50 dark:hover:bg-zinc-900 transition-colors '
+  if (status !== 'completed') return base + 'border-yellow-400'
+  if (conclusion === 'success') return base + 'border-emerald-400'
+  if (conclusion === 'failure' || conclusion === 'timed_out') return base + 'border-red-400'
+  if (conclusion === 'cancelled') return base + 'border-zinc-400'
+  return base + 'border-zinc-200 dark:border-zinc-800'
+}
+
+function runStatusBadge(conclusion, status) {
+  if (status !== 'completed') return { label: status, cls: 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/40 dark:text-yellow-300' }
+  if (conclusion === 'success') return { label: 'success', cls: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-300' }
+  if (conclusion === 'failure') return { label: 'failure', cls: 'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300' }
+  return { label: conclusion || 'unknown', cls: 'bg-zinc-100 text-zinc-700 dark:bg-zinc-800 dark:text-zinc-300' }
+}
+
+function formatDuration(ms) {
+  if (ms == null) return ''
+  const seconds = Math.floor(ms / 1000)
+  if (seconds < 60) return seconds + 's'
+  const minutes = Math.floor(seconds / 60)
+  const remainder = seconds % 60
+  if (minutes < 60) return minutes + 'm' + (remainder ? ' ' + remainder + 's' : '')
+  const hours = Math.floor(minutes / 60)
+  return hours + 'h ' + (minutes % 60) + 'm'
+}
+
+function timeAgo(dateStr) {
+  if (!dateStr) return ''
+  const diff = Date.now() - new Date(dateStr).getTime()
+  const minutes = Math.floor(diff / 60000)
+  if (minutes < 60) return minutes + 'm ago'
+  const hours = Math.floor(minutes / 60)
+  if (hours < 24) return hours + 'h ago'
+  return Math.floor(hours / 24) + 'd ago'
+}
+
+function truncate(value, length) {
+  if (!value) return ''
+  return value.length > length ? value.slice(0, length) + '...' : value
+}
+
+function jobsForRun(runId) {
+  return jobsByRunId()[runId] || []
+}
+
+function failedJobs(runId) {
+  return jobsForRun(runId).filter(job => job.conclusion && job.conclusion !== 'success' && job.conclusion !== 'skipped' && job.conclusion !== 'neutral')
+}
+</script>
+
+<Drawer
+  :isOpen="Boolean(target())"
+  :title="title()"
+  description="Run history"
+  size="lg"
+  @close="ci.closeDrilldown()"
+>
+  <div :if="error()" class="mt-4 mx-5 px-4 py-3 bg-red-50 dark:bg-red-950/30 border border-red-200 rounded-lg dark:border-red-900/40">
+    <p class="text-red-700 text-xs dark:text-red-300" :text="error()"></p>
+  </div>
+
+  <div :if="loading() && runs().length === 0" class="px-5 py-12 text-center">
+    <span aria-hidden="true" class="mx-auto h-6 w-6 text-violet-500 animate-spin i-hugeicons-loading-03"></span>
+    <p class="mt-2 text-zinc-500 text-xs">Fetching recent runs...</p>
+  </div>
+
+  <ul :if="runs().length > 0" class="px-5 py-3">
+    <li :for="run in runs" class="border-b border-zinc-100 dark:border-zinc-900 last:border-0">
+      <div @click="ci.toggleRunJobs(run.id)" :class="runRowClass(run.conclusion, run.status)">
+        <div class="flex gap-3 items-start justify-between">
+          <div class="flex-1 min-w-0">
+            <div class="flex gap-2 items-center">
+              <span :class="`px-1.5 py-0.5 text-[10px] font-medium rounded ${runStatusBadge(run.conclusion, run.status).cls}`" :text="runStatusBadge(run.conclusion, run.status).label"></span>
+              <span class="font-medium text-sm text-zinc-800 truncate dark:text-zinc-200" :text="run.name"></span>
+            </div>
+            <p :if="run.commitMessage" class="mt-1 text-zinc-500 text-xs truncate" :text="truncate(run.commitMessage, 80)"></p>
+            <div class="flex gap-2 items-center mt-1 text-[10px] text-zinc-400">
+              <span class="font-mono" :text="run.headShaShort"></span>
+              <span :if="run.headBranch" :text="run.headBranch"></span>
+              <span :if="run.commitAuthor">·</span>
+              <span :if="run.commitAuthor" :text="run.commitAuthor"></span>
+              <span>·</span>
+              <span :text="timeAgo(run.updatedAt)"></span>
+              <span :if="run.durationMs">·</span>
+              <span :if="run.durationMs" :text="formatDuration(run.durationMs)"></span>
+            </div>
+          </div>
+          <a :href="run.url" target="_blank" rel="noreferrer" @click.stop class="flex-shrink-0 no-underline text-violet-600 text-xs dark:text-violet-400 hover:underline">View ↗</a>
+        </div>
+      </div>
+
+      <div :if="expandedRunId() === run.id" class="px-3 py-2 bg-zinc-50 dark:bg-zinc-900/50 border-t border-zinc-100 dark:border-zinc-900">
+        <div :if="loadingJobsRunId() === run.id" class="py-2 text-zinc-500 text-xs">Loading jobs...</div>
+        <div :if="loadingJobsRunId() !== run.id && jobsForRun(run.id).length === 0" class="py-1 italic text-zinc-400 text-xs">No job detail.</div>
+        <div :if="loadingJobsRunId() !== run.id && failedJobs(run.id).length > 0" class="space-y-1.5">
+          <p class="text-[10px] text-zinc-500 tracking-wide uppercase">Failed jobs</p>
+          <a :for="job in failedJobs(run.id)" :href="job.url" target="_blank" rel="noreferrer" @click.stop class="flex gap-1.5 items-center no-underline text-red-700 text-xs dark:text-red-400 hover:underline">
+            <span aria-hidden="true" class="h-2.5 w-2.5 i-hugeicons-cancel-circle"></span>
+            <span :text="job.name"></span>
+            <span :if="job.durationMs" class="text-zinc-400" :text="'(' + formatDuration(job.durationMs) + ')'"></span>
+          </a>
+        </div>
+        <div :if="loadingJobsRunId() !== run.id && jobsForRun(run.id).length > 0 && failedJobs(run.id).length === 0" class="py-1 text-zinc-500 text-xs">
+          All <span :text="jobsForRun(run.id).length"></span> jobs passed.
+        </div>
+      </div>
+    </li>
+  </ul>
+
+  <div :if="!loading() && !error() && runs().length === 0" class="px-5 py-12 text-center">
+    <p class="text-zinc-500 text-sm">No recent runs.</p>
+  </div>
+</Drawer>

package/resources/components/Dashboard/Commerce/CommerceCategoryDeleteDialog.stx

@@ -5,13 +5,15 @@ const open = useReactiveProp('open', false)
 const record = useReactiveProp('record', null as CommerceCategoryRecord | null)
 const busy = useReactiveProp('busy', false)
 const emit = defineEmits()
+const description = derived(() => `Delete "${record()?.name || 'Unnamed category'}" permanently? Linked products and child categories may prevent deletion.`)
 </script>
 
-<div :if="open()" class="flex fixed inset-0 z-50 items-center justify-center p-4 dashboard-modal-layer">
-  <button type="button" aria-label="Close delete category dialog" class="absolute inset-0 bg-black/45" @click="emit('close')"></button>
-  <section role="dialog" aria-modal="true" aria-labelledby="category-delete-title" class="relative p-6 max-w-md w-full bg-white dark:bg-neutral-800 border border-gray-200 rounded-xl dark:border-neutral-700 shadow-xl">
-    <h2 id="category-delete-title" class="font-semibold text-gray-900 text-lg dark:text-white">Delete category</h2>
-    <p class="mt-2 text-gray-500 text-sm dark:text-neutral-400">Delete "{{ record()?.name || 'Unnamed category' }}" permanently? Linked products and child categories may prevent deletion.</p>
-    <footer class="flex gap-2 justify-end mt-6"><Button variant="secondary" :disabled="busy()" @click="emit('close')">Cancel</Button><Button variant="danger" :loading="busy()" @click="emit('confirm')">Delete category</Button></footer>
-  </section>
-</div>
+<ConfirmDialog
+  :isOpen="open()"
+  title="Delete category"
+  :description="description()"
+  confirmLabel="Delete category"
+  :busy="busy()"
+  @close="emit('close')"
+  @confirm="emit('confirm')"
+/>

package/resources/components/Dashboard/Commerce/CommerceCategoryDetailsDialog.stx

@@ -35,20 +35,25 @@ function deleteRecord(): void {
 }
 </script>
 
-<div :if="open()" class="flex fixed inset-0 z-50 items-center justify-center p-4 dashboard-modal-layer">
-  <button type="button" aria-label="Close category details" class="absolute inset-0 bg-black/45" @click="emit('close')"></button>
-  <section role="dialog" aria-modal="true" aria-labelledby="category-details-title" class="relative max-w-xl w-full bg-white dark:bg-neutral-800 border border-gray-200 rounded-xl dark:border-neutral-700 shadow-xl">
-    <div class="p-6">
-      <div class="flex gap-4 items-start justify-between"><div><h2 id="category-details-title" class="font-semibold text-gray-900 text-lg dark:text-white">{{ record()?.name || 'Category' }}</h2><p class="mt-1 font-mono text-gray-400 text-sm dark:text-neutral-500">{{ record()?.slug || 'No slug' }}</p></div><span class="px-2 py-1 font-semibold text-gray-700 text-xs dark:text-neutral-200 bg-gray-100 dark:bg-neutral-700 rounded-full">{{ record()?.isActive ? 'Active' : 'Inactive' }}</span></div>
-      <p class="mt-5 text-gray-600 text-sm whitespace-pre-wrap dark:text-neutral-300">{{ record()?.description || 'No description recorded.' }}</p>
-      <dl class="grid gap-4 grid-cols-2 mt-6">
-        <div><dt class="text-gray-400 text-xs dark:text-neutral-500">Parent</dt><dd class="mt-1 text-gray-900 text-sm dark:text-white">{{ parentName() }}</dd></div>
-        <div><dt class="text-gray-400 text-xs dark:text-neutral-500">Display order</dt><dd class="mt-1 font-mono text-gray-900 text-sm dark:text-white">{{ record()?.displayOrder || 0 }}</dd></div>
-        <div><dt class="text-gray-400 text-xs dark:text-neutral-500">Direct children</dt><dd class="mt-1 text-gray-900 text-sm dark:text-white">{{ children().length }}</dd></div>
-        <div><dt class="text-gray-400 text-xs dark:text-neutral-500">Record ID</dt><dd class="mt-1 font-mono text-gray-900 text-sm dark:text-white">{{ record()?.id || 'Not recorded' }}</dd></div>
-        <div class="col-span-2"><dt class="text-gray-400 text-xs dark:text-neutral-500">Image URL</dt><dd class="mt-1 break-all text-gray-900 text-sm dark:text-white">{{ record()?.imageUrl || 'Not configured' }}</dd></div>
-      </dl>
-    </div>
-    <footer class="flex gap-2 justify-between px-6 py-4 bg-gray-50 dark:bg-neutral-900/50 border-gray-200 border-t dark:border-neutral-700"><Button variant="danger" @click="deleteRecord()">Delete</Button><div class="flex gap-2"><Button variant="secondary" @click="emit('close')">Close</Button><Button @click="editRecord()">Edit category</Button></div></footer>
-  </section>
-</div>
+<Modal
+  :isOpen="open()"
+  :title="record()?.name || 'Category'"
+  :description="record()?.slug || 'No slug'"
+  size="lg"
+  @close="emit('close')"
+>
+  <template #header-trailing>
+    <span class="px-2 py-1 font-semibold text-gray-700 text-xs dark:text-neutral-200 bg-gray-100 dark:bg-neutral-700 rounded-full">{{ record()?.isActive ? 'Active' : 'Inactive' }}</span>
+  </template>
+  <p class="text-gray-600 text-sm whitespace-pre-wrap dark:text-neutral-300">{{ record()?.description || 'No description recorded.' }}</p>
+  <dl class="grid gap-4 grid-cols-2 mt-6">
+    <div><dt class="text-gray-400 text-xs dark:text-neutral-500">Parent</dt><dd class="mt-1 text-gray-900 text-sm dark:text-white">{{ parentName() }}</dd></div>
+    <div><dt class="text-gray-400 text-xs dark:text-neutral-500">Display order</dt><dd class="mt-1 font-mono text-gray-900 text-sm dark:text-white">{{ record()?.displayOrder || 0 }}</dd></div>
+    <div><dt class="text-gray-400 text-xs dark:text-neutral-500">Direct children</dt><dd class="mt-1 text-gray-900 text-sm dark:text-white">{{ children().length }}</dd></div>
+    <div><dt class="text-gray-400 text-xs dark:text-neutral-500">Record ID</dt><dd class="mt-1 font-mono text-gray-900 text-sm dark:text-white">{{ record()?.id || 'Not recorded' }}</dd></div>
+    <div class="col-span-2"><dt class="text-gray-400 text-xs dark:text-neutral-500">Image URL</dt><dd class="mt-1 break-all text-gray-900 text-sm dark:text-white">{{ record()?.imageUrl || 'Not configured' }}</dd></div>
+  </dl>
+  <template #footer>
+    <div class="flex gap-2 justify-between w-full"><Button variant="danger" @click="deleteRecord()">Delete</Button><div class="flex gap-2"><Button variant="secondary" @click="emit('close')">Close</Button><Button @click="editRecord()">Edit category</Button></div></div>
+  </template>
+</Modal>