@stacksjs/defaults 0.70.229 → 0.70.231

package/functions/notifications/deliveries.ts

@@ -0,0 +1,134 @@
+import { dashboardApi } from '../dashboard-api'
+import { pushToast } from '../toasts'
+
+export type DashboardDeliveryChannel = 'email' | 'sms'
+export type NotificationDeliveryChannel = DashboardDeliveryChannel | 'chat' | 'database' | 'push' | 'broadcast'
+export type NotificationDeliveryStatus = 'pending' | 'sent' | 'delivered' | 'failed'
+
+export interface NotificationDelivery {
+  id: number
+  user_id?: number | null
+  channel: NotificationDeliveryChannel
+  recipient: string
+  subject: string
+  body: string
+  status: NotificationDeliveryStatus
+  error: string
+  metadata: Record<string, unknown>
+  sent_at: string
+  created_at: string
+}
+
+export interface NotificationDeliveryChannelStats {
+  channel: NotificationDeliveryChannel
+  total: number
+  sent: number
+  delivered: number
+  failed: number
+  pending: number
+  success_rate: number
+}
+
+export interface NotificationDeliveryOverview {
+  stats: {
+    total: number
+    successful: number
+    failed: number
+    pending: number
+    success_rate: number
+    active_channels: number
+  }
+  statuses: Record<NotificationDeliveryStatus, number>
+  channels: NotificationDeliveryChannelStats[]
+  recent: NotificationDelivery[]
+}
+
+export interface NotificationDeliveryHistory {
+  deliveries: NotificationDelivery[]
+  pagination: {
+    page: number
+    per_page: number
+    total: number
+    total_pages: number
+  }
+}
+
+export interface NotificationDeliveryHistoryQuery {
+  page?: number
+  perPage?: number
+  channel?: NotificationDeliveryChannel | 'all'
+  status?: NotificationDeliveryStatus | 'all'
+  search?: string
+  sort?: 'sent_at' | 'recipient' | 'channel' | 'status' | 'id'
+  direction?: 'asc' | 'desc'
+  signal?: AbortSignal
+}
+
+export async function fetchNotificationDeliveries(channel: DashboardDeliveryChannel): Promise<NotificationDelivery[]> {
+  try {
+    const deliveries = await dashboardApi<NotificationDelivery[]>(`/api/dashboard/notification-deliveries?channel=${channel}`)
+    if (!Array.isArray(deliveries))
+      throw new TypeError('Server returned a non-array response')
+    return deliveries
+  }
+  catch (error) {
+    pushToast('error', `Could not load ${channel} deliveries`, { detail: String(error) })
+    return []
+  }
+}
+
+export async function fetchNotificationDeliveryOverview(): Promise<NotificationDeliveryOverview | null> {
+  try {
+    return await dashboardApi<NotificationDeliveryOverview>('/api/dashboard/notification-deliveries/overview')
+  }
+  catch (error) {
+    pushToast('error', 'Could not load notification delivery overview', { detail: String(error) })
+    return null
+  }
+}
+
+export async function fetchNotificationDeliveryHistory(
+  query: NotificationDeliveryHistoryQuery = {},
+): Promise<NotificationDeliveryHistory | null> {
+  const params = new URLSearchParams()
+  params.set('page', String(query.page || 1))
+  params.set('per_page', String(query.perPage || 20))
+  params.set('sort', query.sort || 'sent_at')
+  params.set('direction', query.direction || 'desc')
+  if (query.channel && query.channel !== 'all')
+    params.set('channel', query.channel)
+  if (query.status && query.status !== 'all')
+    params.set('status', query.status)
+  if (query.search)
+    params.set('search', query.search)
+
+  try {
+    return await dashboardApi<NotificationDeliveryHistory>(
+      `/api/dashboard/notification-deliveries/history?${params.toString()}`,
+      { signal: query.signal },
+    )
+  }
+  catch (error) {
+    if (error instanceof DOMException && error.name === 'AbortError')
+      return null
+    pushToast('error', 'Could not load notification delivery history', { detail: String(error) })
+    return null
+  }
+}
+
+export async function retryNotificationDelivery(delivery: NotificationDelivery): Promise<boolean> {
+  if (delivery.channel !== 'email' && delivery.channel !== 'sms') {
+    pushToast('warning', 'Only email and SMS attempts can be retried from the dashboard')
+    return false
+  }
+
+  try {
+    await dashboardApi(`/api/dashboard/notification-deliveries/${delivery.id}/retry`, { method: 'POST' })
+    pushToast('success', `${delivery.channel === 'email' ? 'Email' : 'SMS'} retry sent`)
+    return true
+  }
+  catch (error) {
+    pushToast('error', 'Notification retry failed', { detail: String(error) })
+    return false
+  }
+}

package/functions/queries.ts

@@ -0,0 +1,42 @@
+import { dashboardApi } from './dashboard-api'
+
+export interface DashboardQueryLog {
+  id: number | string
+  query: string
+  normalizedQuery: string
+  type: 'SELECT' | 'INSERT' | 'UPDATE' | 'DELETE' | 'OTHER'
+  duration: number
+  connection: string
+  status: 'completed' | 'failed' | 'slow'
+  error: string
+  executedAt: string
+  model: string
+  method: string
+  rowsAffected: number | null
+  memoryUsage: number | null
+  tags: string[]
+  affectedTables: string[]
+  indexesUsed: string[]
+  missingIndexes: string[]
+  suggestions: string[]
+}
+
+export interface DashboardQueryResponse {
+  enabled: boolean
+  slowThreshold: number
+  queries: DashboardQueryLog[]
+  error?: string
+}
+
+export interface DashboardQueryShowResponse {
+  query: DashboardQueryLog | null
+}
+
+export async function fetchDashboardQueries(): Promise<DashboardQueryResponse> {
+  return dashboardApi<DashboardQueryResponse>('/api/dashboard/queries')
+}
+
+export async function fetchDashboardQuery(id: string): Promise<DashboardQueryLog | null> {
+  const response = await dashboardApi<DashboardQueryShowResponse>(`/api/dashboard/queries/${encodeURIComponent(id)}`)
+  return response.query
+}

package/functions/queue.ts

@@ -7,7 +7,7 @@
  */
 
 import { ref } from '@stacksjs/stx'
-import { get, post } from './api'
+import { dashboardApi } from './dashboard-api'
 
 export interface QueueBucket {
   name: string
@@ -41,6 +41,32 @@ export interface QueueWorker {
   memory: string
 }
 
+export interface QueueStatsResponse {
+  queues: QueueBucket[]
+  stats: QueueAggregateStats
+  queueConnected: boolean
+}
+
+export interface QueueWorkersResponse {
+  data: QueueWorker[]
+  worker_running: boolean
+  active_jobs: number
+}
+
+export async function fetchQueueStats(): Promise<QueueStatsResponse> {
+  return await dashboardApi<QueueStatsResponse>('/api/dashboard/queue/stats')
+}
+
+export async function fetchQueueWorkers(): Promise<QueueWorkersResponse> {
+  return await dashboardApi<QueueWorkersResponse>('/api/dashboard/queue/workers')
+}
+
+export async function retryQueueFailures(): Promise<{ success: boolean, count: number, message: string }> {
+  return await dashboardApi<{ success: boolean, count: number, message: string }>('/api/dashboard/queue/retry-failed', {
+    method: 'POST',
+  })
+}
+
 export function useQueue() {
   const queues = ref<QueueBucket[]>([])
   const stats = ref<QueueAggregateStats>({
@@ -58,14 +84,14 @@ export function useQueue() {
   const error = ref<string | null>(null)
 
   async function fetchStats() {
-    const data = await get<{ queues: QueueBucket[], stats: QueueAggregateStats, queueConnected: boolean }>('/queue/stats')
+    const data = await fetchQueueStats()
     queues.value = data.queues || []
     stats.value = data.stats || stats.value
     queueConnected.value = Boolean(data.queueConnected)
   }
 
   async function fetchWorkers() {
-    const data = await get<{ data: QueueWorker[] }>('/queue/workers')
+    const data = await fetchQueueWorkers()
     workers.value = data.data || []
   }
 
@@ -87,7 +113,7 @@ export function useQueue() {
 
   async function retryFailedJobs() {
     try {
-      await post<{ success: boolean, count: number, message: string }>('/queue/retry-failed')
+      await retryQueueFailures()
       await fetchAll()
     }
     catch (e) {

package/functions/realtime/websockets.ts

@@ -1,7 +1,9 @@
+import { resolveApiBaseUrl } from '../api-url'
 import type { StoreWebsocket, Websockets } from '../../types/defaults'
-import { useFetch, useStorage } from '@stacksjs/browser'
+import { useFetch } from '@stacksjs/browser/composables/useFetch'
+import { useStorage } from '@stacksjs/browser/composables/useStorage'
 
-const baseURL = process.env.VITE_API_URL || `http://localhost:${process.env.PORT_API || '3008'}`
+const baseURL = resolveApiBaseUrl()
 
 // Create a persistent websockets array using STX useStorage
 const websockets = useStorage<Websockets[]>('websockets', [])

package/functions/realtime.ts

@@ -1,10 +1,38 @@
-/**
- * Realtime Composable
- */
 import { ref } from '@stacksjs/stx'
+import { dashboardApi } from './dashboard-api'
 
-const baseUrl = process.env.VITE_API_URL || `http://localhost:${process.env.PORT_API || '3008'}`
+export interface RealtimeEvent {
+  id: string
+  type: string
+  socket: string
+  details: string
+  time: number
+  createdAt: string
+  occurredAt: string
+}
+
+export interface RealtimeDashboardResponse {
+  config: {
+    enabled: boolean
+    mode: string
+    url: string
+  }
+  overview: {
+    recordedEvents: number
+    uniqueSockets: number
+    successes: number
+    errors: number
+    disconnections: number
+    successRate: number
+  }
+  events: RealtimeEvent[]
+}
+
+export async function fetchRealtimeDashboard(): Promise<RealtimeDashboardResponse> {
+  return await dashboardApi<RealtimeDashboardResponse>('/api/dashboard/realtime')
+}
 
+/** Compatibility shape retained for consumers of the previous composable. */
 export interface RealtimeStats {
   connectionsTriggered: number
   connectionsChange: number
@@ -23,7 +51,14 @@ export interface ActiveConnection {
 }
 
 export function useRealtimeStats() {
-  const stats = ref<RealtimeStats>({ connectionsTriggered: 0, connectionsChange: 0, avgLatency: '0ms', latencyChange: 0, successRate: '0%', successChange: 0 })
+  const stats = ref<RealtimeStats>({
+    connectionsTriggered: 0,
+    connectionsChange: 0,
+    avgLatency: '-',
+    latencyChange: 0,
+    successRate: '0%',
+    successChange: 0,
+  })
   const activeConnections = ref<ActiveConnection[]>([])
   const isLoading = ref(false)
   const error = ref<string | null>(null)
@@ -32,18 +67,21 @@ export function useRealtimeStats() {
     isLoading.value = true
     error.value = null
     try {
-      const response = await fetch(`${baseUrl}/realtime/stats`, {
-        headers: { 'Accept': 'application/json' },
-      })
-      if (response.ok) {
-        const data = await response.json()
-        stats.value = data.stats || stats.value
-        activeConnections.value = data.activeConnections || []
+      const data = await fetchRealtimeDashboard()
+      stats.value = {
+        connectionsTriggered: data.overview.recordedEvents,
+        connectionsChange: 0,
+        avgLatency: '-',
+        latencyChange: 0,
+        successRate: `${data.overview.successRate}%`,
+        successChange: 0,
       }
-    } catch (e) {
+      activeConnections.value = []
+    }
+    catch {
       error.value = 'Failed to load realtime stats.'
-      console.error('Failed to fetch realtime stats:', e)
-    } finally {
+    }
+    finally {
       isLoading.value = false
     }
   }

package/functions/releases.ts

@@ -1,9 +1,10 @@
+import { resolveApiBaseUrl } from './api-url'
 /**
  * Releases Composable
  */
 import { ref } from '@stacksjs/stx'
 
-const baseUrl = process.env.VITE_API_URL || `http://localhost:${process.env.PORT_API || '3008'}`
+const baseUrl = resolveApiBaseUrl()
 
 export interface Release {
   version: string

package/functions/search.ts

@@ -1,12 +1,4 @@
-/**
- * Global Search Composable
- *
- * Provides search functionality across all models for the dashboard.
- */
-
-import { ref } from '@stacksjs/stx'
-
-const baseUrl = process.env.VITE_API_URL || `http://localhost:${process.env.PORT_API || '3008'}`
+import { resolveApiBaseUrl } from './api-url'
 
 export interface SearchResultItem {
   id: string | number
@@ -20,107 +12,35 @@ export interface SearchResults {
   [modelType: string]: SearchResultItem[]
 }
 
-const modelIcons: Record<string, string> = {
-  users: 'i-hugeicons-user-group',
-  products: 'i-hugeicons-shopping-bag-02',
-  customers: 'i-hugeicons-user-02',
-  orders: 'i-hugeicons-shopping-cart-01',
-  posts: 'i-hugeicons-note-edit',
-  pages: 'i-hugeicons-file-02',
+export interface SearchUnavailable {
+  model: string
+  reason: string
 }
 
-let searchTimeout: ReturnType<typeof setTimeout> | null = null
-
-export function useGlobalSearch() {
-  const query = ref('')
-  const results = ref<SearchResults>({})
-  const isSearching = ref(false)
-  const isOpen = ref(false)
-  const selectedIndex = ref(0)
-
-  async function search(q: string) {
-    if (!q.trim()) {
-      results.value = {}
-      return
-    }
-
-    isSearching.value = true
-
-    try {
-      const response = await fetch(`${baseUrl}/search?q=${encodeURIComponent(q)}`, {
-        headers: { 'Accept': 'application/json' },
-      })
-
-      if (response.ok) {
-        const data = await response.json()
-        results.value = data.results || {}
-      }
-    }
-    catch (e) {
-      console.error('Search failed:', e)
-      results.value = {}
-    }
-    finally {
-      isSearching.value = false
-    }
-  }
-
-  function debouncedSearch(q: string) {
-    query.value = q
-    if (searchTimeout) clearTimeout(searchTimeout)
-    searchTimeout = setTimeout(() => search(q), 300)
-  }
-
-  function open() {
-    isOpen.value = true
-    selectedIndex.value = 0
-  }
-
-  function close() {
-    isOpen.value = false
-    query.value = ''
-    results.value = {}
-  }
+export interface GlobalSearchResponse {
+  results?: SearchResults
+  unavailable?: SearchUnavailable[]
+}
 
-  function flatResults(): SearchResultItem[] {
-    return Object.values(results.value).flat()
-  }
+export interface LoadedGlobalSearch {
+  results: SearchResults
+  unavailable: SearchUnavailable[]
+}
 
-  function moveUp() {
-    const items = flatResults()
-    if (items.length === 0) return
-    selectedIndex.value = selectedIndex.value <= 0 ? items.length - 1 : selectedIndex.value - 1
-  }
+const baseUrl = resolveApiBaseUrl()
 
-  function moveDown() {
-    const items = flatResults()
-    if (items.length === 0) return
-    selectedIndex.value = selectedIndex.value >= items.length - 1 ? 0 : selectedIndex.value + 1
-  }
+export async function fetchGlobalSearch(query: string, signal?: AbortSignal): Promise<LoadedGlobalSearch> {
+  const response = await fetch(`${baseUrl}/dashboard/search?q=${encodeURIComponent(query)}`, {
+    headers: { 'Accept': 'application/json' },
+    signal,
+  })
 
-  function selectCurrent(): string | null {
-    const items = flatResults()
-    const selected = items[selectedIndex.value]
-    if (selected) {
-      close()
-      return selected.href
-    }
-    return null
-  }
+  if (!response.ok)
+    throw new Error(`Dashboard search failed with status ${response.status}`)
 
+  const data = await response.json() as GlobalSearchResponse
   return {
-    query,
-    results,
-    isSearching,
-    isOpen,
-    selectedIndex,
-    modelIcons,
-    search: debouncedSearch,
-    open,
-    close,
-    moveUp,
-    moveDown,
-    selectCurrent,
-    flatResults,
+    results: data.results && typeof data.results === 'object' ? data.results : {},
+    unavailable: Array.isArray(data.unavailable) ? data.unavailable : [],
   }
 }

package/functions/toasts.ts

@@ -45,8 +45,25 @@ export interface PushToastOptions {
   durationMs?: number
 }
 
-const toasts = state<Toast[]>([])
-let nextId = 1
+function createDashboardToastStore() {
+  return {
+    toasts: state<Toast[]>([]),
+    nextId: 1,
+  }
+}
+
+type DashboardToastStore = ReturnType<typeof createDashboardToastStore>
+
+const dashboardGlobal = globalThis as typeof globalThis & {
+  __stacksDashboardToastStore?: DashboardToastStore
+}
+
+// Client components are compiled into independent bundles. Keeping the store
+// on globalThis makes every bundle observe the same signal while preserving it
+// across hot-module reloads.
+const toastStore = dashboardGlobal.__stacksDashboardToastStore
+  ??= createDashboardToastStore()
+const toasts = toastStore.toasts
 
 // Errors get longer dwell because a user might need to read & screenshot.
 // Success is short — it's just a "yep, that worked" pat on the back.
@@ -58,7 +75,7 @@ const DEFAULT_DURATION_MS: Record<ToastType, number> = {
 }
 
 export function pushToast(type: ToastType, title: string, opts: PushToastOptions = {}): number {
-  const id = nextId++
+  const id = toastStore.nextId++
   const durationMs = opts.durationMs ?? DEFAULT_DURATION_MS[type]
   const toast: Toast = {
     id,

package/ide/vscode/package.json

@@ -2,7 +2,7 @@
   "publisher": "Stacks",
   "name": "vscode-stacks",
   "displayName": "Stacks",
-  "version": "0.70.229",
+  "version": "0.70.231",
   "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.229",
+  "version": "0.70.231",
   "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",
@@ -34,7 +34,8 @@
   },
   "dependencies": {
     "@iconify-json/f7": "^1.2.2",
-    "@iconify-json/hugeicons": "^1.2.27"
+    "@iconify-json/hugeicons": "^1.2.27",
+    "@stacksjs/sanitizer": "^0.2.113"
   },
   "scripts": {
     "build": "bun build.ts"

package/resources/components/Dashboard/Analytics/AnalyticsHub.stx

@@ -0,0 +1,89 @@
+<script client>
+import type { AnalyticsOverview } from '../../../../functions/analytics'
+import { fetchWebAnalytics } from '../../../../functions/analytics'
+
+const overview = state<AnalyticsOverview | null>(null)
+const loading = state(true)
+const loadError = state('')
+
+const analyticsCards = [
+  { name: 'Web Analytics', description: 'Page views, visitors, and request performance', icon: 'i-hugeicons-chart-line-data-02', to: '/analytics/web' },
+  { name: 'Blog Analytics', description: 'Recorded traffic to blog routes', icon: 'i-hugeicons-edit-02', to: '/analytics/blog' },
+  { name: 'Commerce Analytics', description: 'Persisted sales and revenue', icon: 'i-hugeicons-shopping-cart-01', to: '/analytics/commerce/sales' },
+  { name: 'Marketing Analytics', description: 'Persisted campaign performance', icon: 'i-hugeicons-megaphone-02', to: '/analytics/marketing' },
+  { name: 'Events', description: 'Custom event records', icon: 'i-hugeicons-calendar-03', to: '/analytics/events' },
+  { name: 'Referrers', description: 'Traffic sources when provided', icon: 'i-hugeicons-link-01', to: '/analytics/referrers' },
+  { name: 'Pages', description: 'Recorded page request totals', icon: 'i-hugeicons-file-02', to: '/analytics/pages' },
+  { name: 'Countries', description: 'Geographic data when provided', icon: 'i-hugeicons-globe-02', to: '/analytics/countries' },
+  { name: 'Devices', description: 'Device classes from user agents', icon: 'i-hugeicons-smart-phone-01', to: '/analytics/devices' },
+  { name: 'Browsers', description: 'Browser families from user agents', icon: 'i-hugeicons-browser', to: '/analytics/browsers' },
+]
+
+function formatNumber(value: number | undefined): string {
+  return new Intl.NumberFormat().format(value || 0)
+}
+
+async function loadOverview(): Promise<void> {
+  loading.set(true)
+  loadError.set('')
+  try {
+    overview.set((await fetchWebAnalytics('month')).overview)
+  }
+  catch (error) {
+    loadError.set(error instanceof Error ? error.message : 'Analytics overview could not be loaded.')
+  }
+  finally {
+    loading.set(false)
+  }
+}
+
+onMount(() => {
+  void loadOverview()
+})
+</script>
+
+<div class="space-y-6">
+  <header class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+    <div>
+      <h1 class="font-semibold text-2xl text-neutral-900 tracking-tight dark:text-white">Analytics</h1>
+      <p class="mt-1 text-neutral-500 text-sm dark:text-neutral-400">Persisted business metrics and privacy-safe request telemetry.</p>
+    </div>
+    <Button variant="secondary" :loading="loading()" @click="loadOverview">
+      <span :if="!loading()" class="h-4 w-4 i-hugeicons-refresh"></span>
+      Refresh
+    </Button>
+  </header>
+
+  <div :if="loadError()" role="alert" class="px-4 py-3 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-4 grid-cols-2 lg:grid-cols-4" aria-label="Web analytics overview">
+    <StatsCard title="Page Views" :value="formatNumber(overview()?.pageViews)" icon="i-hugeicons-chart-line-data-02" iconBg="primary" trendLabel="Last 30 days" />
+    <StatsCard title="Unique Visitors" :value="formatNumber(overview()?.uniqueVisitors)" icon="i-hugeicons-user-multiple-02" iconBg="success" trendLabel="Last 30 days" />
+    <StatsCard title="Average Response" :value="overview()?.averageResponseTime || '-'" icon="i-hugeicons-clock-01" iconBg="info" trendLabel="Captured requests" />
+    <StatsCard title="Error Rate" :value="overview()?.errorRate || 'N/A'" icon="i-hugeicons-alert-02" iconBg="neutral" trendLabel="Captured requests" />
+  </section>
+
+  <section>
+    <h2 class="font-semibold text-neutral-900 dark:text-white">Explore analytics</h2>
+    <div class="grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 mt-4">
+      <template :for="card in analyticsCards">
+        <StxLink :to="card.to" class="block">
+          <Card variant="default" padding="md" hoverable clickable>
+            <div class="flex gap-4 items-start">
+              <div class="flex-shrink-0 p-2.5 text-blue-600 dark:text-blue-400 bg-blue-500/15 dark:bg-blue-400/20 rounded-lg">
+                <span :class="card.icon" class="block h-5 w-5"></span>
+              </div>
+              <div class="flex-1 min-w-0">
+                <h3 class="font-medium text-neutral-900 text-sm dark:text-white">{{ card.name }}</h3>
+                <p class="mt-1 text-neutral-500 text-xs dark:text-neutral-400">{{ card.description }}</p>
+              </div>
+              <span class="flex-shrink-0 h-4 w-4 text-neutral-400 i-hugeicons-arrow-right-01"></span>
+            </div>
+          </Card>
+        </StxLink>
+      </template>
+    </div>
+  </section>
+</div>