@stacksjs/defaults 0.70.229 → 0.70.231

package/views/dashboard/settings/index.stx

@@ -1,256 +1,7 @@
 @extends('layouts/default')
 
 @section('content')
-<script client>
-interface ConfigFile {
-  name: string
-  title: string
-  size: number
-}
+@title('Dashboard - Settings')
 
-interface ConfigField {
-  key: string
-  value: string | number | boolean | null | unknown[] | Record<string, unknown>
-  type: string
-  editable: boolean
-  reason?: string
-}
-
-const files = state<ConfigFile[]>([])
-const fields = state<ConfigField[]>([])
-const drafts = state<Record<string, string | number | boolean>>({})
-const selected = state('')
-const query = state('')
-const loading = state(true)
-const saving = state(false)
-const message = state('')
-const error = state('')
-
-const filteredFiles = derived(() => {
-  const needle = query().trim().toLowerCase()
-  if (!needle)
-    return files()
-
-  return files().filter(file => file.name.includes(needle) || file.title.toLowerCase().includes(needle))
-})
-
-const selectedFile = derived(() => files().find(file => file.name === selected()))
-const editableCount = derived(() => fields().filter(field => field.editable).length)
-
-function displayValue(field: ConfigField): string | number {
-  if (field.editable)
-    return drafts()[field.key] as string | number
-  if (field.type === 'object' || field.type === 'array')
-    return JSON.stringify(field.value)
-  return String(field.value ?? '')
-}
-
-function setDraft(key: string, value: string | number | boolean): void {
-  drafts.set({ ...drafts(), [key]: value })
-}
-
-async function loadFiles(): Promise<void> {
-  loading.set(true)
-  error.set('')
-  try {
-    const response = await fetch('/api/config/list')
-    const body = await response.json()
-    if (!response.ok || !body.ok)
-      throw new Error(body.error || 'Unable to list configuration files')
-
-    files.set(body.files)
-    const first = body.files[0]?.name
-    if (first)
-      await selectFile(first)
-  }
-  catch (cause) {
-    error.set(cause instanceof Error ? cause.message : 'Unable to load configuration')
-  }
-  finally {
-    loading.set(false)
-  }
-}
-
-async function selectFile(name: string): Promise<void> {
-  selected.set(name)
-  fields.set([])
-  message.set('')
-  error.set('')
-  loading.set(true)
-  try {
-    const response = await fetch(`/api/config/read?name=${encodeURIComponent(name)}`)
-    const body = await response.json()
-    if (!response.ok || !body.ok)
-      throw new Error(body.error || `Unable to read config/${name}.ts`)
-
-    fields.set(body.fields)
-    drafts.set(Object.fromEntries(
-      body.fields
-        .filter((field: ConfigField) => field.editable)
-        .map((field: ConfigField) => [field.key, field.value]),
-    ))
-  }
-  catch (cause) {
-    error.set(cause instanceof Error ? cause.message : `Unable to read config/${name}.ts`)
-  }
-  finally {
-    loading.set(false)
-  }
-}
-
-async function save(): Promise<void> {
-  const file = selected()
-  if (!file || saving())
-    return
-
-  saving.set(true)
-  message.set('')
-  error.set('')
-  try {
-    const updates = fields()
-      .filter(field => field.editable)
-      .map(field => ({ key: field.key, value: drafts()[field.key] }))
-    const response = await fetch('/api/config/update', {
-      method: 'POST',
-      headers: { 'content-type': 'application/json' },
-      body: JSON.stringify({ file, updates }),
-    })
-    const body = await response.json()
-    if (!response.ok || !body.ok) {
-      const failed = body.results?.filter((result: { ok: boolean }) => !result.ok)
-      throw new Error(failed?.map((result: { error?: string }) => result.error).filter(Boolean).join(', ') || body.error || 'Unable to save configuration')
-    }
-
-    message.set(`Saved config/${file}.ts`)
-    await selectFile(file)
-    message.set(`Saved config/${file}.ts`)
-  }
-  catch (cause) {
-    error.set(cause instanceof Error ? cause.message : 'Unable to save configuration')
-  }
-  finally {
-    saving.set(false)
-  }
-}
-
-void loadFiles()
-</script>
-
-<div class="mx-auto pb-12 pt-6 px-6 space-y-6 max-w-7xl">
-  <PageHeader
-    title="Settings"
-    description="Review and edit project configuration without losing comments or environment bindings"
-  />
-
-  <div class="grid gap-6 lg:grid-cols-[17rem_minmax(0,1fr)]">
-    <Card variant="default" padding="none">
-      <div class="p-4 border-b border-neutral-200/60 dark:border-white/5">
-        <label for="config-search" class="sr-only">Search configuration</label>
-        <div class="relative">
-          <span class="absolute left-3 top-1/2 h-4 w-4 text-neutral-400 pointer-events-none -translate-y-1/2 i-hugeicons-search-01"></span>
-          <input
-            id="config-search"
-            type="search"
-            placeholder="Search config"
-            :value="query()"
-            @input="query.set($event.target.value)"
-            class="block pl-9 pr-3 py-2 w-full text-neutral-900 text-sm dark:text-white placeholder:text-neutral-400 bg-white dark:bg-white/5 border border-black/10 rounded-lg dark:border-white/15 focus:border-blue-500/50 focus:outline-none focus:ring-2 focus:ring-blue-500/40"
-          >
-        </div>
-      </div>
-
-      <nav class="overflow-y-auto p-2 max-h-[68vh]" aria-label="Configuration files">
-        <template :for="file in filteredFiles">
-          <button
-            type="button"
-            :class="selected() === file.name ? 'flex items-center gap-3 px-3 py-2.5 w-full text-left text-blue-700 dark:text-blue-300 bg-blue-50 dark:bg-blue-500/10 rounded-lg' : 'flex items-center gap-3 px-3 py-2.5 w-full text-left text-neutral-700 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-white/5 rounded-lg'"
-            @click="selectFile(file.name)"
-          >
-            <span class="flex-none h-4 w-4 i-hugeicons-settings-02"></span>
-            <span class="flex-1 font-medium text-sm truncate">{{ file.title }}</span>
-            <span class="text-[10px] text-neutral-400">{{ file.size < 1024 ? file.size + ' B' : Math.round(file.size / 1024) + ' KB' }}</span>
-          </button>
-        </template>
-      </nav>
-    </Card>
-
-    <Card variant="default" padding="none">
-      @if(loading())
-        <div class="flex items-center justify-center min-h-80 text-neutral-500 dark:text-neutral-400">
-          <span class="mr-2 h-5 w-5 animate-spin i-hugeicons-loading-03"></span>
-          Loading configuration
-        </div>
-      @elseif(error() && !selectedFile())
-        <div class="p-8 text-center">
-          <span class="inline-block h-8 w-8 text-red-500 i-hugeicons-alert-02"></span>
-          <p class="mt-3 font-medium text-neutral-900 dark:text-white">Configuration unavailable</p>
-          <p class="mt-1 text-red-600 text-sm dark:text-red-400">{{ error() }}</p>
-        </div>
-      @elseif(selectedFile())
-        <div class="flex flex-wrap gap-4 items-center justify-between px-6 py-5 border-b border-neutral-200/60 dark:border-white/5">
-          <div>
-            <h2 class="font-semibold text-lg text-neutral-900 dark:text-white">{{ selectedFile().title }}</h2>
-            <p class="mt-1 font-mono text-neutral-500 text-xs dark:text-neutral-400">config/{{ selectedFile().name }}.ts</p>
-          </div>
-          <div class="flex gap-2 items-center">
-            <Badge variant="default" size="sm">{{ editableCount() }} editable</Badge>
-            <Button variant="primary" size="sm" :disabled="saving() || editableCount() === 0" @click="save()">
-              {{ saving() ? 'Saving...' : 'Save changes' }}
-            </Button>
-          </div>
-        </div>
-
-        @if(message())
-          <div class="mt-5 mx-6 px-4 py-3 text-green-700 text-sm dark:text-green-300 bg-green-50 dark:bg-green-500/10 border border-green-200 rounded-lg dark:border-green-500/20">
-            {{ message() }}
-          </div>
-        @endif
-        @if(error())
-          <div class="mt-5 mx-6 px-4 py-3 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-500/10 border border-red-200 rounded-lg dark:border-red-500/20">
-            {{ error() }}
-          </div>
-        @endif
-
-        <form class="divide-neutral-200/60 divide-y dark:divide-white/5" @submit.prevent="save()">
-          <template :for="field in fields">
-            <div class="grid gap-3 sm:grid-cols-[minmax(10rem,0.8fr)_minmax(0,1.2fr)] sm:items-start px-6 py-5">
-              <div>
-                <label :for="'config-' + field.key" class="font-medium text-neutral-900 text-sm dark:text-white">{{ field.key }}</label>
-                <p class="mt-1 text-neutral-500 text-xs dark:text-neutral-400">{{ field.type }}</p>
-              </div>
-
-              <div>
-                @if(field.type === 'boolean' && field.editable)
-                  <label class="inline-flex gap-3 items-center cursor-pointer">
-                    <input
-                      :id="'config-' + field.key"
-                      type="checkbox"
-                      :checked="drafts()[field.key] === true"
-                      @change="setDraft(field.key, $event.target.checked)"
-                      class="h-4 w-4 text-blue-600 border-neutral-300 rounded focus:ring-blue-500"
-                    >
-                    <span class="text-neutral-700 text-sm dark:text-neutral-300">{{ drafts()[field.key] ? 'Enabled' : 'Disabled' }}</span>
-                  </label>
-                @elseif(field.editable)
-                  <input
-                    :id="'config-' + field.key"
-                    :type="field.type === 'number' ? 'number' : 'text'"
-                    :value="displayValue(field)"
-                    @input="setDraft(field.key, field.type === 'number' ? Number($event.target.value) : $event.target.value)"
-                    class="block px-3 py-2 w-full text-neutral-900 text-sm dark:text-white bg-white dark:bg-white/5 border border-black/10 rounded-lg dark:border-white/15 focus:border-blue-500/50 focus:outline-none focus:ring-2 focus:ring-blue-500/40"
-                  >
-                @else
-                  <div class="px-3 py-2 break-all font-mono text-neutral-500 text-xs dark:text-neutral-400 bg-neutral-50 dark:bg-white/[0.03] border border-neutral-200 rounded-lg dark:border-white/10">
-                    {{ displayValue(field) }}
-                  </div>
-                  <p class="mt-1.5 text-amber-700 text-xs dark:text-amber-300">{{ field.reason }}</p>
-                @endif
-              </div>
-            </div>
-          </template>
-        </form>
-      @endif
-    </Card>
-  </div>
-</div>
+<SettingsDashboard />
 @endsection

package/views/dashboard/settings/mail.stx

@@ -1,252 +1,9 @@
 @extends('layouts/default')
 
 @section('content')
-<script client>
-// State-signal + directive style (matches the rest of the dashboard). The
-// previous version used a Vue-style ref() composable, which stx's template
-// runtime does not unwrap, so every binding on the page rendered empty; it
-// also imported functions/api, whose auth chain runs useStorage() at module
-// load and throws in the client bundle, killing the whole scope. So this
-// talks to /api/settings/mail with a plain fetch, like the blog page.
-const endpoint = '/api/settings/mail'
+@title('Dashboard - Mail Settings')
 
-// CSRF header for writes, read from the cookie the GET on load seeds.
-function writeHeaders() {
-  const headers = { 'Content-Type': 'application/json' }
-  const match = document.cookie.match(/(?:^|;\s*)X-CSRF-Token=([^;]*)/)
-  if (match)
-    headers['X-CSRF-Token'] = decodeURIComponent(match[1])
-  return headers
-}
-
-const from = state('')
-const to = state('')
-const driver = state('SMTP')
-const host = state('')
-const port = state(587)
-const username = state('')
-const password = state('')
-const isSaving = state(false)
-const error = state('')
-const success = state('')
-
-async function load() {
-  try {
-    const res = await fetch(endpoint, { headers: { Accept: 'application/json' } })
-    if (!res.ok)
-      return
-    const json = await res.json()
-    const d = json && json.data ? json.data : json
-    if (d) {
-      from.set(d.from ?? '')
-      to.set(d.to ?? '')
-      driver.set(d.driver ?? 'SMTP')
-      host.set(d.host ?? '')
-      port.set(d.port ?? 587)
-      username.set(d.username ?? '')
-      password.set(d.password ?? '')
-    }
-  }
-  catch (e) {
-    // Keep the defaults when the settings endpoint isn't available yet.
-  }
-}
-
-async function save() {
-  isSaving.set(true)
-  error.set('')
-  success.set('')
-  try {
-    const res = await fetch(endpoint, {
-      method: 'PUT',
-      headers: writeHeaders(),
-      body: JSON.stringify({
-        from: from(),
-        to: to(),
-        driver: driver(),
-        host: host(),
-        port: port(),
-        username: username(),
-        password: password(),
-      }),
-    })
-    if (!res.ok)
-      throw new Error(`Save failed (${res.status})`)
-    success.set('Mail settings saved successfully.')
-  }
-  catch (e) {
-    error.set(e instanceof Error ? e.message : 'Failed to save mail settings.')
-  }
-  finally {
-    isSaving.set(false)
-  }
-}
-
-onMount(() => {
-  load()
-})
-</script>
-
-<!-- Plain container instead of a component wrapper: a component slot severs the
-     page reactive scope from the markup, leaving every field binding empty. The
-     sibling settings pages avoid the wrapper for the same reason. -->
-<div class="mx-auto pb-12 pt-6 px-6 space-y-6 max-w-7xl">
-  <PageHeader title="Email Settings" description="Configure how your application sends mail." />
-
-  <!-- Settings forms -->
-  <div class="divide-white/5 divide-y">
-    <div class="grid gap-x-8 gap-y-10 grid-cols-1 md:grid-cols-3 px-4 py-16 sm:px-6 lg:px-8 max-w-7xl">
-      <div>
-        <h2 class="font-semibold leading-7 text-base text-gray-900 dark:text-neutral-100">
-          Main Config
-        </h2>
-        <p class="mt-1 leading-6 text-gray-600 text-sm">
-          Update mail settings.
-        </p>
-      </div>
-
-      <form class="md:col-span-2" @submit.prevent="save()">
-        <!-- Success message -->
-        <div x-show="success()" class="mb-6 p-4 bg-green-50 dark:bg-green-900/20 rounded-md">
-          <p class="text-green-700 text-sm dark:text-green-400">{{ success() }}</p>
-        </div>
-
-        <!-- Error message -->
-        <div x-show="error()" class="mb-6 p-4 bg-red-50 dark:bg-red-900/20 rounded-md">
-          <p class="text-red-700 text-sm dark:text-red-400">{{ error() }}</p>
-        </div>
-
-        <div class="grid gap-x-6 gap-y-8 grid-cols-1 sm:grid-cols-6 sm:max-w-xl">
-          <div class="sm:col-span-full">
-            <label
-              for="mail-from"
-              class="block font-medium leading-6 text-gray-900 text-sm dark:text-neutral-100"
-            >Mail From</label>
-            <div class="mt-2">
-              <input
-                id="mail-from"
-                type="email"
-                x-model="from"
-                placeholder="no-reply@example.com"
-                class="block px-4 py-2 w-full text-gray-900 dark:text-neutral-100 dark:bg-neutral-800 border border-gray-300 rounded-md dark:border-neutral-600 focus:border-none focus:ring-2 focus:ring-blue-500 shadow-sm"
-              >
-            </div>
-          </div>
-
-          <div class="sm:col-span-full">
-            <label
-              for="mail-to"
-              class="block font-medium leading-6 text-gray-900 text-sm dark:text-neutral-100"
-            >Mail To</label>
-            <div class="mt-2">
-              <input
-                id="mail-to"
-                type="email"
-                x-model="to"
-                placeholder="admin@example.com"
-                class="block px-4 py-2 w-full text-gray-900 dark:text-neutral-100 dark:bg-neutral-800 border border-gray-300 rounded-md dark:border-neutral-600 focus:border-none focus:ring-2 focus:ring-blue-500 shadow-sm"
-              >
-            </div>
-          </div>
-
-          <div class="sm:col-span-full">
-            <label
-              for="mail-driver"
-              class="block font-medium leading-6 text-gray-900 text-sm dark:text-neutral-100"
-            >Driver</label>
-            <div class="mt-2">
-              <select
-                id="mail-driver"
-                x-model="driver"
-                class="block px-4 py-2 w-full text-gray-900 dark:text-neutral-100 dark:bg-neutral-800 border border-gray-300 rounded-md dark:border-neutral-600 focus:border-none focus:ring-2 focus:ring-blue-500 shadow-sm"
-              >
-                <option value="SMTP">SMTP</option>
-                <option value="ses">Amazon SES</option>
-                <option value="sendgrid">SendGrid</option>
-                <option value="mailgun">Mailgun</option>
-                <option value="mailtrap">Mailtrap</option>
-              </select>
-            </div>
-          </div>
-
-          <div class="sm:col-span-3">
-            <label
-              for="mail-host"
-              class="block font-medium leading-6 text-gray-900 text-sm dark:text-neutral-100"
-            >Host</label>
-            <div class="mt-2">
-              <input
-                id="mail-host"
-                type="text"
-                x-model="host"
-                placeholder="smtp.example.com"
-                class="block px-4 py-2 w-full text-gray-900 dark:text-neutral-100 dark:bg-neutral-800 border border-gray-300 rounded-md dark:border-neutral-600 focus:border-none focus:ring-2 focus:ring-blue-500 shadow-sm"
-              >
-            </div>
-          </div>
-
-          <div class="sm:col-span-3">
-            <label
-              for="mail-port"
-              class="block font-medium leading-6 text-gray-900 text-sm dark:text-neutral-100"
-            >Port</label>
-            <div class="mt-2">
-              <input
-                id="mail-port"
-                type="number"
-                x-model.number="port"
-                placeholder="587"
-                class="block px-4 py-2 w-full text-gray-900 dark:text-neutral-100 dark:bg-neutral-800 border border-gray-300 rounded-md dark:border-neutral-600 focus:border-none focus:ring-2 focus:ring-blue-500 shadow-sm"
-              >
-            </div>
-          </div>
-
-          <div class="sm:col-span-3">
-            <label
-              for="mail-username"
-              class="block font-medium leading-6 text-gray-900 text-sm dark:text-neutral-100"
-            >Username</label>
-            <div class="mt-2">
-              <input
-                id="mail-username"
-                type="text"
-                x-model="username"
-                placeholder="your-username"
-                class="block px-4 py-2 w-full text-gray-900 dark:text-neutral-100 dark:bg-neutral-800 border border-gray-300 rounded-md dark:border-neutral-600 focus:border-none focus:ring-2 focus:ring-blue-500 shadow-sm"
-              >
-            </div>
-          </div>
-
-          <div class="sm:col-span-3">
-            <label
-              for="mail-password"
-              class="block font-medium leading-6 text-gray-900 text-sm dark:text-neutral-100"
-            >Password</label>
-            <div class="mt-2">
-              <input
-                id="mail-password"
-                type="password"
-                x-model="password"
-                autocomplete="off"
-                placeholder="••••••••"
-                class="block px-4 py-2 w-full text-gray-900 dark:text-neutral-100 dark:bg-neutral-800 border border-gray-300 rounded-md dark:border-neutral-600 focus:border-none focus:ring-2 focus:ring-blue-500 shadow-sm"
-              >
-            </div>
-          </div>
-        </div>
-
-        <div class="flex mt-8">
-          <button
-            type="submit"
-            :disabled="isSaving()"
-            class="px-3 py-2 font-semibold text-sm text-white bg-blue-600 hover:bg-blue-500 rounded-md focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-600 focus-visible:outline-offset-2 shadow-sm disabled:opacity-50 disabled:cursor-not-allowed"
-          >
-            {{ isSaving() ? 'Saving...' : 'Save Settings' }}
-          </button>
-        </div>
-      </form>
-    </div>
-  </div>
+<div class="mx-auto pb-12 pt-6 px-4 sm:px-6 lg:px-8 max-w-7xl">
+  <MailSettingsDashboard />
 </div>
-
 @endsection

package/views/dashboard/stores/auth.ts

@@ -1,4 +1,5 @@
 import { defineStore, derived, registerStoresClient, state } from '@stacksjs/stx'
+import { dashboardApi } from '../../../functions/dashboard-api'
 
 /**
  * Dashboard auth/identity store — single source of truth for "who is
@@ -55,13 +56,11 @@ export const authStore = defineStore('auth', () => {
     loading.set(true)
     error.set(null)
     try {
-      const res = await fetch('/api/dashboard/auth/me', { headers: { accept: 'application/json' } })
-      if (!res.ok) throw new Error(`HTTP ${res.status}`)
-      const data = await res.json() as {
+      const data = await dashboardApi<{
         user: { id: number, name: string | null, email: string | null } | null
         roles: string[]
         unauthenticated?: true
-      }
+      }>('/api/dashboard/auth/me')
       if (data.user) {
         userId.set(data.user.id)
         userName.set(data.user.name)

package/views/dashboard/stores/ci.ts

@@ -1,4 +1,5 @@
 import { defineStore, derived, registerStoresClient, state } from '@stacksjs/stx'
+import { dashboardApi } from '../../../functions/dashboard-api'
 
 interface FailedJob {
   name: string
@@ -145,16 +146,13 @@ export const ciStore = defineStore('ci', () => {
     loading.set(true)
     error.set('')
     try {
-      const res = await fetch('/api/dashboard/ci/status', { headers: { accept: 'application/json' } })
-      if (!res.ok)
-        throw new Error(`HTTP ${res.status}`)
-      const data = await res.json() as {
+      const data = await dashboardApi<{
         repos: RepoStatus[]
         runners: Record<string, OrgRunnerUsage>
         fetchedAt: string
         disabled?: boolean
         error?: string
-      }
+      }>('/api/dashboard/ci/status')
 
       if (data.disabled) {
         disabled.set(true)
@@ -177,8 +175,9 @@ export const ciStore = defineStore('ci', () => {
       // if it's still valid after a refresh.
       const nextOrgs = Object.keys(data.runners ?? {})
       orgs.set(nextOrgs)
-      if (!nextOrgs.includes(activeTab()) && nextOrgs.length > 0)
-        activeTab.set(nextOrgs[0])
+      const firstOrg = nextOrgs.at(0)
+      if (!nextOrgs.includes(activeTab()) && firstOrg)
+        activeTab.set(firstOrg)
     }
     catch (e) {
       error.set(e instanceof Error ? e.message : String(e))
@@ -205,9 +204,9 @@ export const ciStore = defineStore('ci', () => {
     drilldownError.set(null)
     loadingDrilldown.set(true)
     try {
-      const res = await fetch(`/api/dashboard/ci/repos/${encodeURIComponent(repo.owner)}/${encodeURIComponent(repo.name)}/runs?limit=20`, { headers: { accept: 'application/json' } })
-      if (!res.ok) throw new Error(`HTTP ${res.status}`)
-      const data = await res.json() as { runs?: WorkflowRun[], error?: string, disabled?: boolean }
+      const data = await dashboardApi<{ runs?: WorkflowRun[], error?: string, disabled?: boolean }>(
+        `/api/dashboard/ci/repos/${encodeURIComponent(repo.owner)}/${encodeURIComponent(repo.name)}/runs?limit=20`,
+      )
       if (data.error)
         throw new Error(data.error)
       drilldownRuns.set(data.runs ?? [])
@@ -237,11 +236,11 @@ export const ciStore = defineStore('ci', () => {
 
     loadingRunnerHistory.set({ ...loadingRunnerHistory(), [org]: true })
     try {
-      const res = await fetch(`/api/dashboard/ci/runner-history?org=${encodeURIComponent(org)}`, {
-        headers: { accept: 'application/json' },
-      })
-      if (!res.ok) throw new Error(`HTTP ${res.status}`)
-      const data = await res.json() as { samples?: Array<{ queued: number, sampledAt: string }>, error?: string, disabled?: boolean }
+      const data = await dashboardApi<{
+        samples?: Array<{ queued: number, sampledAt: string }>
+        error?: string
+        disabled?: boolean
+      }>(`/api/dashboard/ci/runner-history?org=${encodeURIComponent(org)}`)
       if (data.disabled || data.error) {
         runnerHistoryByOrg.set({ ...runnerHistoryByOrg(), [org]: [] })
         return
@@ -278,9 +277,9 @@ export const ciStore = defineStore('ci', () => {
 
     loadingJobsForRunId.set(runId)
     try {
-      const res = await fetch(`/api/dashboard/ci/repos/${encodeURIComponent(target.owner)}/${encodeURIComponent(target.name)}/runs/${runId}/jobs`, { headers: { accept: 'application/json' } })
-      if (!res.ok) throw new Error(`HTTP ${res.status}`)
-      const data = await res.json() as { jobs?: WorkflowJob[], error?: string }
+      const data = await dashboardApi<{ jobs?: WorkflowJob[], error?: string }>(
+        `/api/dashboard/ci/repos/${encodeURIComponent(target.owner)}/${encodeURIComponent(target.name)}/runs/${runId}/jobs`,
+      )
       if (data.error)
         throw new Error(data.error)
       drilldownJobsByRunId.set({ ...drilldownJobsByRunId(), [runId]: data.jobs ?? [] })

package/views/dashboard/stores/index.ts

@@ -1,4 +1,5 @@
 import { defineStore, derived, registerStoresClient, state } from '@stacksjs/stx'
+import { dashboardApi } from '../../../functions/dashboard-api'
 import { isDarkTheme, useTheme } from '../composables/useTheme'
 
 /**
@@ -89,14 +90,15 @@ export const statsStore = defineStore('stats', () => {
   async function refresh(): Promise<void> {
     isLoading.set(true)
     try {
-      const res = await fetch('/api/dashboard/stats')
-      if (res.ok) {
-        const data = await res.json()
-        if (data.stats) stats.set(data.stats)
-        if (data.systemHealth) systemHealth.set(data.systemHealth)
-        if (data.recentActivity) recentActivity.set(data.recentActivity)
-        lastFetched.set(new Date().toISOString())
-      }
+      const data = await dashboardApi<{
+        stats?: Array<{ title: string, value: string, trend: number, trendLabel: string, icon: string }>
+        systemHealth?: Array<{ name: string, status: string, latency: string, uptime: string }>
+        recentActivity?: Array<{ type: string, title: string, time: string, status: string }>
+      }>('/api/dashboard/stats')
+      if (data.stats) stats.set(data.stats)
+      if (data.systemHealth) systemHealth.set(data.systemHealth)
+      if (data.recentActivity) recentActivity.set(data.recentActivity)
+      lastFetched.set(new Date().toISOString())
     }
     catch {
       // API may not be available — keep existing data