@stacksjs/defaults 0.70.354 → 0.70.356

package/functions/dashboard-api.ts

@@ -37,16 +37,9 @@ export class DashboardApiError extends Error {
   }
 }
 
-/**
- * Call a dashboard API endpoint and return its parsed JSON.
- *
- * Throws on a non-2xx response, using the server's `message` / `error`
- * field when there is one so callers can surface something better than a
- * bare status code.
- */
-export async function dashboardApi<T = unknown>(path: string, options: ApiRequestOptions = {}): Promise<T> {
+async function dashboardResponse(path: string, options: ApiRequestOptions, accept: string): Promise<Response> {
   const method = options.method ?? 'GET'
-  const headers: Record<string, string> = { accept: 'application/json' }
+  const headers: Record<string, string> = { accept }
   const authToken = useAuth().getToken()
 
   if (options.body !== undefined && options.formData)
@@ -62,7 +55,7 @@ export async function dashboardApi<T = unknown>(path: string, options: ApiReques
     ? headers
     : withCsrfHeader(headers)
 
-  const res = await fetch(path, {
+  return fetch(path, {
     method,
     headers: requestHeaders,
     credentials: 'same-origin',
@@ -70,6 +63,33 @@ export async function dashboardApi<T = unknown>(path: string, options: ApiReques
     ...(options.body !== undefined && { body: JSON.stringify(options.body) }),
     ...(options.formData && { body: options.formData }),
   })
+}
+
+async function dashboardResponseError(res: Response): Promise<DashboardApiError> {
+  const text = await res.text()
+  let payload: ApiErrorBody | null = null
+  try {
+    payload = text ? JSON.parse(text) as ApiErrorBody : null
+  }
+  catch {
+    payload = null
+  }
+
+  const failure = describeResponseError(res.status, payload)
+  if (failure.unexpected)
+    console.error('[dashboard-api] Unexpected request failure:', failure.cause)
+  return new DashboardApiError(failure.message, res.status, failure.fields)
+}
+
+/**
+ * Call a dashboard API endpoint and return its parsed JSON.
+ *
+ * Throws on a non-2xx response, using the server's `message` / `error`
+ * field when there is one so callers can surface something better than a
+ * bare status code.
+ */
+export async function dashboardApi<T = unknown>(path: string, options: ApiRequestOptions = {}): Promise<T> {
+  const res = await dashboardResponse(path, options, 'application/json')
 
   const text = await res.text()
   let payload: any = null
@@ -89,3 +109,24 @@ export async function dashboardApi<T = unknown>(path: string, options: ApiReques
 
   return payload as T
 }
+
+/**
+ * Download a guarded dashboard resource while preserving bearer and session
+ * authentication. The object URL only exists for the duration of the browser
+ * download and is then released.
+ */
+export async function dashboardDownload(path: string, filename: string): Promise<void> {
+  const res = await dashboardResponse(path, {}, 'application/octet-stream')
+  if (!res.ok)
+    throw await dashboardResponseError(res)
+
+  const objectUrl = URL.createObjectURL(await res.blob())
+  const anchor = document.createElement('a')
+  anchor.href = objectUrl
+  anchor.download = filename
+  anchor.hidden = true
+  document.body.append(anchor)
+  anchor.click()
+  anchor.remove()
+  setTimeout(() => URL.revokeObjectURL(objectUrl), 0)
+}

package/functions/data.ts

@@ -45,7 +45,6 @@ export interface DashboardSubscriber {
 
 export interface DashboardDataResponse<T> {
   stats: DataStats
-  error?: string
   activities?: T[]
   users?: T[]
   teams?: T[]

package/functions/inbox.test.ts

@@ -35,6 +35,8 @@ describe('dashboard inbox mapping', () => {
       date: '2026-07-29T12:00:00.000Z',
       read: false,
       hasAttachments: true,
+      attachments: [],
+      detailsLoaded: false,
     })
   })
 

package/functions/inbox.ts

@@ -6,7 +6,7 @@
 
 import { ref } from '@stacksjs/stx'
 import { get } from './api'
-import { dashboardApi } from './dashboard-api'
+import { dashboardApi, dashboardDownload } from './dashboard-api'
 import { pushToast } from './toasts'
 
 export type InboxActivityRange = 'day' | 'week' | 'month' | 'year'
@@ -71,6 +71,15 @@ export interface DashboardInboxEmail {
   date: string
   read: boolean
   hasAttachments: boolean
+  attachments: DashboardInboxAttachment[]
+  detailsLoaded: boolean
+}
+
+export interface DashboardInboxAttachment {
+  id: string
+  name: string
+  size: number
+  lastModified?: string
 }
 
 interface DashboardInboxEntry {
@@ -94,6 +103,7 @@ interface DashboardInboxResponse {
 interface DashboardInboxBodyResponse {
   html?: string
   text?: string
+  attachments?: DashboardInboxAttachment[]
   error?: string
 }
 
@@ -166,6 +176,8 @@ export function mapDashboardInboxEntry(item: DashboardInboxEntry): DashboardInbo
     date: item.date,
     read: item.read === true,
     hasAttachments: item.hasAttachments === true,
+    attachments: [],
+    detailsLoaded: false,
   }
 }
 
@@ -179,7 +191,7 @@ export async function fetchDashboardInbox(mailbox?: string): Promise<LoadedDashb
   }
 }
 
-export async function fetchDashboardInboxBody(messageId: string, mailbox?: string): Promise<Pick<DashboardInboxEmail, 'bodyHtml' | 'bodyText'>> {
+export async function fetchDashboardInboxBody(messageId: string, mailbox?: string): Promise<Pick<DashboardInboxEmail, 'attachments' | 'bodyHtml' | 'bodyText' | 'detailsLoaded' | 'hasAttachments'>> {
   const query = mailbox ? `?mailbox=${encodeURIComponent(mailbox)}` : ''
   const data = await dashboardApi<DashboardInboxBodyResponse>(`/api/dashboard/email/inbox/${encodeURIComponent(messageId)}${query}`)
   if (data.error)
@@ -187,9 +199,22 @@ export async function fetchDashboardInboxBody(messageId: string, mailbox?: strin
   return {
     bodyHtml: data.html || '',
     bodyText: data.text || '',
+    attachments: data.attachments || [],
+    detailsLoaded: true,
+    hasAttachments: (data.attachments || []).length > 0,
   }
 }
 
+export async function downloadDashboardInboxAttachment(
+  messageId: string,
+  attachment: DashboardInboxAttachment,
+  mailbox?: string,
+): Promise<void> {
+  const query = mailbox ? `?mailbox=${encodeURIComponent(mailbox)}` : ''
+  const path = `/api/dashboard/email/inbox/${encodeURIComponent(messageId)}/attachments/${encodeURIComponent(attachment.id)}${query}`
+  await dashboardDownload(path, attachment.name)
+}
+
 export async function fetchInboxActivity(range: InboxActivityRange): Promise<InboxActivity | null> {
   try {
     return await dashboardApi<InboxActivity>(`/api/dashboard/email/activity?range=${range}`)

package/functions/jobs.ts

@@ -52,7 +52,6 @@ export interface JobListFilters {
 
 export interface JobShowResponse {
   job: DashboardJob | null
-  error?: string
 }
 
 export async function fetchJobs(filters: JobListFilters = {}): Promise<JobListResponse> {

package/functions/public-application-url.test.ts

@@ -0,0 +1,13 @@
+import { describe, expect, it } from 'bun:test'
+import { publicApplicationUrl } from './public-application-url'
+
+describe('publicApplicationUrl', () => {
+  it('uses HTTPS for application domains and removes duplicate separators', () => {
+    expect(publicApplicationUrl('/blog', 'stacks.localhost/')).toBe('https://stacks.localhost/blog')
+    expect(publicApplicationUrl('/blog/post', 'https://stacksjs.com/')).toBe('https://stacksjs.com/blog/post')
+  })
+
+  it('keeps explicit local development protocols', () => {
+    expect(publicApplicationUrl('/blog', 'http://localhost:3000')).toBe('http://localhost:3000/blog')
+  })
+})

package/functions/public-application-url.ts

@@ -0,0 +1,27 @@
+import process from 'node:process'
+
+function configuredApplicationUrl(): string {
+  const frontendUrl = process.env.FRONTEND_APP_URL?.trim()
+  if (frontendUrl && !frontendUrl.includes('${'))
+    return frontendUrl
+
+  return process.env.APP_URL?.trim() || 'http://localhost:3000'
+}
+
+function withProtocol(baseUrl: string): string {
+  if (/^https?:\/\//i.test(baseUrl))
+    return baseUrl
+
+  const host = baseUrl.split('/')[0].split(':')[0].toLowerCase()
+  const protocol = ['localhost', '127.0.0.1', '0.0.0.0', '[::1]'].includes(host)
+    ? 'http'
+    : 'https'
+  return `${protocol}://${baseUrl}`
+}
+
+/** Build an absolute URL for a page served by the public Stacks application. */
+export function publicApplicationUrl(pathname = '/', baseUrl = configuredApplicationUrl()): string {
+  const normalizedBase = withProtocol(baseUrl.trim()).replace(/\/+$/, '')
+  const normalizedPath = pathname.replace(/^\/+/, '')
+  return new URL(normalizedPath, `${normalizedBase}/`).toString()
+}

package/ide/vscode/package.json

@@ -2,7 +2,7 @@
   "publisher": "Stacks",
   "name": "vscode-stacks",
   "displayName": "Stacks",
-  "version": "0.70.354",
+  "version": "0.70.356",
   "description": "A modern Stacks development environment.",
   "license": "MIT",
   "funding": "https://github.com/sponsors/chrisbbreuer",

package/package.json

@@ -2,7 +2,7 @@
   "name": "@stacksjs/defaults",
   "type": "module",
   "sideEffects": false,
-  "version": "0.70.354",
+  "version": "0.70.356",
   "description": "The complete managed Stacks application scaffold, including runtime defaults, AI guidance, editor metadata, and npm-backed project support files.",
   "author": "Chris Breuer",
   "license": "MIT",

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

@@ -1,5 +1,6 @@
 <script client>
 import { DashboardApiError, dashboardApi } from '../../../../functions/dashboard-api'
+import { authStore } from '../../../../views/dashboard/stores/auth'
 
 interface AccessTokenRow {
   id: number
@@ -106,6 +107,20 @@ async function loadTokens(): Promise<void> {
   loading.set(true)
   loadError.set('')
   try {
+    await authStore.load()
+
+    if (authStore.error()) {
+      tokens.set([])
+      loadError.set(authStore.error() || 'The signed-in account could not be verified.')
+      return
+    }
+
+    if (authStore.unauthenticated()) {
+      tokens.set([])
+      authenticationRequired.set(true)
+      return
+    }
+
     const response = await dashboardApi<TokenListResponse>('/auth/tokens')
     tokens.set(response.tokens || [])
     authenticationRequired.set(false)

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

@@ -5,7 +5,7 @@
   // (Action: Dashboard/Ci/StatusAction → @stacksjs/github). Active tab +
   // status filter live in the `ciStore` so they survive SPA navigation.
   //
-  // No <script server>, no window./document. reads — per #1838 the page
+  // No <script server>, no window./document. reads - per #1838 the page
   // is pure presentation against the store.
   import { useRole } from '~/storage/framework/defaults/views/dashboard/composables/useRole'
   import { ciStore } from '~/storage/framework/defaults/views/dashboard/stores/ci'
@@ -17,7 +17,7 @@
   // Role check is now backed by the real RBAC store + `/api/dashboard/auth/me`
   // (stacksjs/stacks#1843). `isDev()` returns true if the authenticated user
   // holds the `admin` or `dev` role, OR if the request is unauthenticated
-  // (i.e. local dev dashboard with no bearer token) — see `useRole.ts` for
+  // (i.e. local dev dashboard with no bearer token) - see `useRole.ts` for
   // the full resolution chain.
   const { isDev } = useRole()
   const canView = derived(() => isDev())
@@ -129,7 +129,7 @@
 
   // ─── Runner pressure sparkline (stacksjs/stacks#1850) ────────────
   //
-  // Inline SVG sparkline — no chart lib. The path is built off the
+  // Inline SVG sparkline - no chart lib. The path is built off the
   // active tab's sample history with a simple linear scale: x maps
   // to sample index (oldest left, newest right), y maps to queue
   // depth normalised against the larger of the org's cap or the
@@ -139,6 +139,8 @@
     const tab = activeTab()
     return (ci.runnerHistoryByOrg()[tab] || [])
   })
+  const runnerHistoryError = derived(() => ci.runnerHistoryErrors()[activeTab()] || '')
+  const loadingHistory = derived(() => ci.loadingRunnerHistory()[activeTab()] === true)
 
   effect(() => {
     const tab = activeTab()
@@ -173,7 +175,12 @@
     return samples && samples.length >= 2
   }
 
-  // Top-level fetch — runs on both hard reload (SSR hydration) and SPA
+  function retryRunnerHistory() {
+    const tab = activeTab()
+    if (tab) ci.loadRunnerHistory(tab, true)
+  }
+
+  // Top-level fetch - runs on both hard reload (SSR hydration) and SPA
   // mount, since `<script client>` re-executes on every entry. The store
   // tracks its own loading flag so back-to-back calls don't double-fire.
   ci.load()
@@ -195,7 +202,7 @@
     <p class="mt-1 text-sm text-zinc-500">GitHub Actions health across the configured orgs. Configure in <code class="text-xs">config/dashboard.ts</code>.</p>
   </header>
 
-  <!-- Disabled state — the surface is off in config/dashboard.ts -->
+  <!-- Disabled state - the surface is off in config/dashboard.ts -->
   <div :if="disabled" class="px-5 py-8 text-center bg-zinc-50 dark:bg-zinc-900 border border-zinc-200 rounded-lg dark:border-zinc-800">
     <p class="text-sm text-zinc-600 dark:text-zinc-400">CI tracking is disabled.</p>
     <p class="mt-1 text-xs text-zinc-500">Enable it in <code>config/dashboard.ts</code> by setting <code>ci.enabled = true</code> and listing one or more orgs.</p>
@@ -247,7 +254,7 @@
       <span class="text-zinc-300 dark:text-zinc-700">·</span>
       <span class="text-zinc-500 dark:text-zinc-400" :text="runnersText"></span>
     </div>
-    <!-- Sparkline showing recent queue depth for the active org —
+    <!-- Sparkline showing recent queue depth for the active org -
         appears only when alerts are on (history collection is gated
         on `ci.alerts.enabled`). Drawn inline as a single SVG path
         so we don't pull a chart library for 20 datapoints. -->
@@ -257,6 +264,17 @@
         <path :d="sparklinePath()" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" stroke-linecap="round" />
       </svg>
     </div>
+    <div :if="loadingHistory() && !hasHistory()" role="status" class="flex gap-2 items-center mb-5 text-zinc-500 text-xs dark:text-zinc-400">
+      <span aria-hidden="true" class="h-3.5 w-3.5 animate-spin i-hugeicons-loading-03"></span>
+      <span>Loading runner history</span>
+    </div>
+    <div :if="runnerHistoryError()" role="alert" class="flex flex-wrap gap-3 items-center justify-between mb-5 px-3 py-2 bg-amber-50 dark:bg-amber-950/30 border border-amber-200 rounded-lg dark:border-amber-900/50">
+      <div>
+        <p class="font-medium text-amber-800 text-xs dark:text-amber-200">Runner history unavailable</p>
+        <p class="mt-0.5 text-amber-700 text-xs dark:text-amber-300" :text="runnerHistoryError"></p>
+      </div>
+      <Button variant="secondary" size="xs" :loading="loadingHistory" @click="retryRunnerHistory()">Retry</Button>
+    </div>
 
     <!-- Repo cards -->
     <div class="grid gap-2" style="grid-template-columns: repeat(auto-fill, minmax(340px, 1fr))">

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

@@ -132,7 +132,7 @@ function errorMessages(): string[] {
             <input x-model="exemptible" type="checkbox" class="mt-0.5 h-4 w-4 text-blue-600 border-gray-300 rounded" />
             <span>
               <span class="block font-medium text-gray-700 text-sm dark:text-neutral-200">Can be exempted</span>
-              <span class="block mt-0.5 text-gray-500 text-xs dark:text-neutral-400">Customers who qualify for an exemption are not charged this component. Leave off for anything owed regardless — an excise or a city levy is usually still due.</span>
+              <span class="block mt-0.5 text-gray-500 text-xs dark:text-neutral-400">Customers who qualify for an exemption are not charged this component. Leave off for anything owed regardless - an excise or a city levy is usually still due.</span>
             </span>
           </label>
         </div>

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

@@ -23,6 +23,13 @@ const deleteRecord = state<ProductWaitlistRecord | null>(null)
 const isSaving = state(false)
 const isDeleting = state(false)
 const validationErrors = state<Record<string, string>>({})
+const metrics = derived(() => [
+  { label: 'Recorded', value: summary().total },
+  { label: 'Waiting', value: summary().waiting },
+  { label: 'Notified', value: summary().notified },
+  { label: 'Purchased', value: summary().purchased },
+  { label: 'Conversion', value: `${summary().conversionRate}%` },
+])
 
 function rows(): ProductWaitlistRecord[] {
   const query = search().trim().toLowerCase()
@@ -166,13 +173,7 @@ onMount(() => {
   </div>
 
   <section class="grid gap-3 grid-cols-2 lg:grid-cols-5">
-    <template :for="item in [
-      { label: 'Recorded', value: summary().total },
-      { label: 'Waiting', value: summary().waiting },
-      { label: 'Notified', value: summary().notified },
-      { label: 'Purchased', value: summary().purchased },
-      { label: 'Conversion', value: summary().conversionRate + '%' }
-    ]">
+    <template :for="item in metrics()">
       <div class="p-4 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700">
         <p class="text-gray-500 text-xs uppercase dark:text-neutral-400">{{ item.label }}</p>
         <p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ item.value }}</p>

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

@@ -26,6 +26,13 @@ const isSaving = state(false)
 const isDeleting = state(false)
 const busyId = state('')
 const validationErrors = state<Record<string, string>>({})
+const metrics = derived(() => [
+  { label: 'Waiting', value: summary().waiting },
+  { label: 'Quoted wait', value: `${summary().averageQuotedWait} min` },
+  { label: 'Seated', value: summary().seated },
+  { label: 'No show', value: summary().noShow },
+  { label: 'Seating rate', value: `${summary().seatingRate}%` },
+])
 
 function rows(): RestaurantWaitlistRecord[] {
   const query = search().trim().toLowerCase()
@@ -220,13 +227,7 @@ onMount(() => {
   <div :if="loadError()" class="p-4 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-950/30 border border-red-200 rounded-lg dark:border-red-900">{{ loadError() }}</div>
 
   <section class="grid gap-3 grid-cols-2 lg:grid-cols-5">
-    <template :for="item in [
-      { label: 'Waiting', value: summary().waiting },
-      { label: 'Quoted wait', value: summary().averageQuotedWait + ' min' },
-      { label: 'Seated', value: summary().seated },
-      { label: 'No show', value: summary().noShow },
-      { label: 'Seating rate', value: summary().seatingRate + '%' }
-    ]">
+    <template :for="item in metrics()">
       <div class="p-4 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700">
         <p class="text-gray-500 text-xs uppercase dark:text-neutral-400">{{ item.label }}</p>
         <p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ item.value }}</p>

package/resources/components/Dashboard/Content/BlogDashboard.stx

@@ -1,3 +1,9 @@
+<script server>
+import { publicApplicationUrl } from '../../../../functions/public-application-url'
+
+export const blogUrl = publicApplicationUrl('/blog')
+</script>
+
 <template>
 <div class="p-6 min-h-screen max-w-full text-neutral-950 dark:text-neutral-100 bg-neutral-50 dark:bg-neutral-950">
   <div class="flex flex-col gap-6 mx-auto min-w-0 max-w-7xl w-full">
@@ -10,7 +16,7 @@
         </p>
       </div>
       <div class="flex flex-wrap gap-2">
-        <Button tag="a" href="/blog" target="_blank" rel="noopener" variant="secondary">
+        <Button tag="a" href="{{ blogUrl }}" target="_blank" rel="noopener" variant="secondary">
           <span class="h-4 w-4 i-hugeicons-view"></span>
           View blog
         </Button>
@@ -123,7 +129,7 @@
                   <div class="flex gap-1 justify-end">
                     <a
                       x-show="!post.draft"
-                      :href="'/blog/' + post.slug"
+                      :href="publicPostUrl(post.slug)"
                       target="_blank"
                       rel="noopener"
                       :title="'View ' + post.title"
@@ -264,6 +270,8 @@
 // markdown files in content/blog. It owns no state; the signals below do.
 import { deleteBlogPost, fetchBlogPost, fetchBlogPosts, saveBlogPost } from '~/storage/framework/defaults/functions/blog'
 
+const publicBlogBaseUrl = {{ blogUrl }}
+
 // Fixed-length list purely to render the loading skeleton rows.
 const skeletonRows = [1, 2, 3, 4]
 
@@ -291,6 +299,10 @@ const formFeatured = state(false)
 
 const postToDelete = state(null)
 
+function publicPostUrl(slug) {
+  return `${publicBlogBaseUrl}/${encodeURIComponent(String(slug))}`
+}
+
 // Read by the delete dialog's copy; kept as a derived signal so the template
 // never has to reach through a possibly-null post.
 const deleteTargetSlug = derived(() => {

package/resources/components/Dashboard/Content/PostsDashboard.stx

@@ -1,3 +1,9 @@
+<script server>
+import { publicApplicationUrl } from '../../../../functions/public-application-url'
+
+export const blogUrl = publicApplicationUrl('/blog')
+</script>
+
 <script client>
 import { dashboardApi } from '../../../../functions/dashboard-api'
 import { pushToast } from '../../../../functions/toasts'
@@ -229,7 +235,7 @@ onMount(() => { void loadPosts() })
 <div class="space-y-6">
   <header class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
     <div><p class="font-semibold text-blue-600 text-xs tracking-wide uppercase dark:text-blue-400">CMS</p><h1 class="mt-1 font-bold text-2xl text-gray-900 dark:text-white">Posts</h1><p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Manage persisted articles, publishing, authors, and native taxonomies.</p></div>
-    <div class="flex flex-wrap gap-2"><Button href="/blog" target="_blank" rel="noreferrer" variant="secondary"><span aria-hidden="true" class="h-4 w-4 i-hugeicons-view"></span>View blog</Button><Button :loading="loading()" variant="secondary" @click="loadPosts()"><span :if="!loading()" aria-hidden="true" class="h-4 w-4 i-hugeicons-refresh"></span>Refresh</Button><Button @click="openCreate()"><span aria-hidden="true" class="h-4 w-4 i-hugeicons-add-01"></span>New post</Button></div>
+    <div class="flex flex-wrap gap-2"><Button href="{{ blogUrl }}" target="_blank" rel="noreferrer" variant="secondary"><span aria-hidden="true" class="h-4 w-4 i-hugeicons-view"></span>View blog</Button><Button :loading="loading()" variant="secondary" @click="loadPosts()"><span :if="!loading()" aria-hidden="true" class="h-4 w-4 i-hugeicons-refresh"></span>Refresh</Button><Button @click="openCreate()"><span aria-hidden="true" class="h-4 w-4 i-hugeicons-add-01"></span>New post</Button></div>
   </header>
 
   <div :if="loadError()" role="alert" class="flex gap-4 items-center justify-between p-4 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-950/30 border border-red-200 rounded-lg dark:border-red-900"><span>{{ loadError() }}</span><Button variant="secondary" size="sm" @click="loadPosts()">Retry</Button></div>

package/resources/components/Dashboard/Data/DataRecords.stx

@@ -98,25 +98,21 @@ async function loadRecords(): Promise<void> {
       const response = await fetchDashboardData<DashboardActivity>('activity')
       records.set(response.activities || [])
       stats.set(response.stats)
-      loadError.set(response.error || '')
     }
     else if (mode() === 'users') {
       const response = await fetchDashboardData<DashboardUser>('users')
       records.set(response.users || [])
       stats.set(response.stats)
-      loadError.set(response.error || '')
     }
     else if (mode() === 'teams') {
       const response = await fetchDashboardData<DashboardTeam>('teams')
       records.set(response.teams || [])
       stats.set(response.stats)
-      loadError.set(response.error || '')
     }
     else {
       const response = await fetchDashboardData<DashboardSubscriber>('subscribers')
       records.set(response.subscribers || [])
       stats.set(response.stats)
-      loadError.set(response.error || '')
     }
   }
   catch (error) {

package/resources/components/Dashboard/Deployments/DeploymentDetail.stx

@@ -44,6 +44,20 @@ function statusLabel(status: string): string {
   return status.charAt(0).toUpperCase() + status.slice(1)
 }
 
+function deploymentUrl(): string {
+  const value = record()?.url?.trim()
+  if (!value)
+    return ''
+
+  try {
+    const url = new URL(value)
+    return url.protocol === 'http:' || url.protocol === 'https:' ? url.toString() : ''
+  }
+  catch {
+    return ''
+  }
+}
+
 async function loadDeployment(): Promise<void> {
   const route = useRoute()
   const id = String(route.params.id || '')
@@ -131,9 +145,9 @@ onMount(() => {
             <dt class="text-gray-500 dark:text-neutral-400">Created</dt>
             <dd class="mt-1 text-gray-900 dark:text-white">{{ formatDate(record()?.createdAt || '') }}</dd>
           </div>
-          <div :if="record()?.url">
+          <div :if="deploymentUrl()">
             <dt class="text-gray-500 dark:text-neutral-400">Deployment URL</dt>
-            <dd class="mt-1"><a :href="record()?.url || '#'" target="_blank" rel="noopener noreferrer" class="font-medium text-blue-600 dark:text-blue-400 hover:text-blue-500">{{ record()?.url }}</a></dd>
+            <dd class="mt-1"><a :href="deploymentUrl()" target="_blank" rel="noopener noreferrer" class="font-medium text-blue-600 dark:text-blue-400 hover:text-blue-500">{{ deploymentUrl() }}</a></dd>
           </div>
         </dl>
       </div>

package/resources/components/Dashboard/Email/EmailNavigation.stx

@@ -8,17 +8,17 @@ function linkClass(name: string): string {
 }
 </script>
 
-<nav aria-label="Mail sections" class="inline-flex gap-1 p-1 bg-gray-100 dark:bg-neutral-900 rounded-lg">
-  <StxLink to="/inbox" :class="'px-3 py-1.5 font-medium text-sm rounded-md transition-colors ' + linkClass('inbox')">
+<nav aria-label="Mail sections" class="flex overflow-x-auto gap-0.5 sm:gap-1 p-1 max-w-full bg-gray-100 dark:bg-neutral-900 rounded-lg">
+  <StxLink to="/inbox" :class="'px-2 sm:px-3 py-1.5 font-medium text-sm rounded-md transition-colors ' + linkClass('inbox')">
     Inbox
   </StxLink>
-  <StxLink to="/inbox/activity" :class="'px-3 py-1.5 font-medium text-sm rounded-md transition-colors ' + linkClass('activity')">
+  <StxLink to="/inbox/activity" :class="'px-2 sm:px-3 py-1.5 font-medium text-sm rounded-md transition-colors ' + linkClass('activity')">
     Activity
   </StxLink>
-  <StxLink to="/inbox/captured" :class="'px-3 py-1.5 font-medium text-sm rounded-md transition-colors ' + linkClass('captured')">
+  <StxLink to="/inbox/captured" :class="'px-2 sm:px-3 py-1.5 font-medium text-sm rounded-md transition-colors ' + linkClass('captured')">
     Captured
   </StxLink>
-  <StxLink to="/inbox/settings" :class="'px-3 py-1.5 font-medium text-sm rounded-md transition-colors ' + linkClass('settings')">
+  <StxLink to="/inbox/settings" :class="'px-2 sm:px-3 py-1.5 font-medium text-sm rounded-md transition-colors ' + linkClass('settings')">
     Settings
   </StxLink>
 </nav>

package/resources/components/Dashboard/Email/EmailSidebar.stx

@@ -47,7 +47,7 @@ function mailboxLabel(): string {
 }
 </script>
 
-<aside class="flex flex-col flex-shrink-0 w-64 bg-white dark:bg-neutral-800 border-gray-200 border-r dark:border-neutral-600">
+<aside class="flex flex-col flex-shrink-0 w-full md:w-64 bg-white dark:bg-neutral-800 border-b border-gray-200 md:border-b-0 md:border-r dark:border-neutral-600">
   <div class="p-3 border-b border-gray-200 dark:border-neutral-600">
     <div class="flex items-center space-x-2">
       <div class="flex flex-shrink-0 items-center justify-center h-8 w-8 text-gray-700 dark:text-white bg-gray-200 dark:bg-neutral-700 rounded">

package/resources/components/Dashboard/Email/InboxAttachmentList.stx

@@ -0,0 +1,53 @@
+<script client>
+import type { DashboardInboxAttachment } from '../../../../functions/inbox'
+import { downloadDashboardInboxAttachment } from '../../../../functions/inbox'
+import { pushToast } from '../../../../functions/toasts'
+
+const attachments = useReactiveProp<DashboardInboxAttachment[]>('attachments', [])
+const mailbox = useReactiveProp('mailbox', '')
+const messageId = useReactiveProp('messageId', '')
+const downloadingId = state('')
+
+function formatBytes(bytes: number): string {
+  if (!Number.isFinite(bytes) || bytes <= 0)
+    return 'Unknown size'
+
+  const units = ['B', 'KB', 'MB', 'GB']
+  const unitIndex = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1)
+  const value = bytes / 1024 ** unitIndex
+  return `${value >= 10 || unitIndex === 0 ? Math.round(value) : value.toFixed(1)} ${units[unitIndex]}`
+}
+
+async function download(attachment: DashboardInboxAttachment): Promise<void> {
+  downloadingId.set(attachment.id)
+  try {
+    await downloadDashboardInboxAttachment(messageId(), attachment, mailbox())
+  }
+  catch (error) {
+    pushToast('error', 'Could not download attachment', { detail: String(error) })
+  }
+  finally {
+    downloadingId.set('')
+  }
+}
+</script>
+
+<section :if="attachments().length" aria-label="Message attachments" class="mb-4 mx-4 p-3 bg-gray-50 dark:bg-neutral-800 border border-gray-200 rounded-md dark:border-neutral-600">
+  <div class="flex gap-2 items-center text-gray-800 dark:text-neutral-200">
+    <span aria-hidden="true" class="h-5 w-5 i-hugeicons-attachment-01"></span>
+    <h3 class="font-medium text-sm">Attachments</h3>
+    <span class="text-gray-500 text-xs dark:text-neutral-400">{{ attachments().length }}</span>
+  </div>
+  <ul class="mt-3 space-y-2">
+    <li :for="attachment in attachments()" class="flex gap-3 items-center justify-between p-2 bg-white dark:bg-neutral-700 border border-gray-200 rounded-md dark:border-neutral-600">
+      <div class="min-w-0">
+        <p class="font-medium text-gray-900 text-sm truncate dark:text-white">{{ attachment.name }}</p>
+        <p class="mt-0.5 text-gray-500 text-xs dark:text-neutral-400">{{ formatBytes(attachment.size) }}</p>
+      </div>
+      <Button size="sm" :loading="downloadingId() === attachment.id" :disabled="Boolean(downloadingId())" @click="download(attachment)">
+        <span :if="downloadingId() !== attachment.id" aria-hidden="true" class="h-4 w-4 i-hugeicons-download-04"></span>
+        Download
+      </Button>
+    </li>
+  </ul>
+</section>