@stacksjs/defaults 0.70.358 → 0.70.363

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

@@ -0,0 +1,155 @@
+<script client>
+interface ScopeOption {
+  name: string
+  description: string
+}
+
+interface TokenDraft {
+  name: string
+  scopes: string[]
+  expiresInMinutes: number
+}
+
+const availableScopes: ScopeOption[] = [
+  { 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' },
+]
+
+const open = useReactiveProp('open', false)
+const busy = useReactiveProp('busy', false)
+const createdToken = useReactiveProp('createdToken', '')
+const message = useReactiveProp('message', '')
+const error = useReactiveProp('error', '')
+const tokenName = state('')
+const expiryMinutes = state('10080')
+const selectedScopes = state<string[]>(['read'])
+const localError = state('')
+const copied = state(false)
+const emit = defineEmits()
+let wasOpen = false
+
+effect(() => {
+  const isOpen = open()
+  if (isOpen && !wasOpen) {
+    tokenName.set('')
+    expiryMinutes.set('10080')
+    selectedScopes.set(['read'])
+    localError.set('')
+    copied.set(false)
+  }
+  wasOpen = isOpen
+})
+
+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 submit(): void {
+  localError.set('')
+  if (!tokenName().trim()) {
+    localError.set('Enter a name for this token.')
+    return
+  }
+  if (selectedScopes().length === 0) {
+    localError.set('Select at least one scope.')
+    return
+  }
+
+  const draft: TokenDraft = {
+    name: tokenName().trim(),
+    scopes: [...selectedScopes()],
+    expiresInMinutes: Number(expiryMinutes()),
+  }
+  emit('submit', draft)
+}
+
+function close(): void {
+  if (!busy())
+    emit('close')
+}
+
+async function copyToken(): Promise<void> {
+  localError.set('')
+  try {
+    await globalThis.navigator.clipboard.writeText(createdToken())
+    copied.set(true)
+  }
+  catch {
+    localError.set('Clipboard access is unavailable. Select and copy the token manually.')
+  }
+}
+</script>
+
+<Modal
+  :isOpen="open()"
+  title="Create Access Token"
+  description="Grant only the scopes this integration needs."
+  :closable="!busy()"
+  @close="close"
+>
+  <div :if="createdToken()" class="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">
+      {{ message() }}
+    </div>
+    <label class="block">
+      <span class="font-medium text-neutral-700 text-sm dark:text-neutral-300">New token</span>
+      <textarea readonly rows="4" aria-label="New access token" 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>
+
+  <form :if="!createdToken()" id="access-token-create-form" class="space-y-5" @submit.prevent="submit">
+    <label class="block">
+      <span class="font-medium text-neutral-700 text-sm dark:text-neutral-300">Token name</span>
+      <input x-model="tokenName" name="name" 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" name="expires_in_minutes" 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 name="scopes" type="checkbox" :value="scope.name" :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>
+  </form>
+
+  <div :if="localError() || error()" role="alert" class="mt-4 px-3 py-2 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-950/40 rounded-lg">
+    {{ localError() || error() }}
+  </div>
+
+  <template #footer>
+    <div :if="createdToken()" class="flex gap-2 justify-end w-full">
+      <Button variant="secondary" @click="close">Done</Button>
+      <Button @click="copyToken">
+        <span class="h-4 w-4 i-hugeicons-copy-01"></span>
+        {{ copied() ? 'Copied' : 'Copy Token' }}
+      </Button>
+    </div>
+    <div :if="!createdToken()" class="flex gap-2 justify-end w-full">
+      <Button variant="secondary" :disabled="busy()" @click="close">Cancel</Button>
+      <Button type="submit" form="access-token-create-form" :loading="busy()">
+        {{ busy() ? 'Creating...' : 'Create Token' }}
+      </Button>
+    </div>
+  </template>
+</Modal>

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>