@stacksjs/defaults 0.70.229 → 0.70.231

package/resources/components/Dashboard/Monitoring/ErrorDetailModal.stx

@@ -1,228 +0,0 @@
-<script>
-interface ErrorDetailModalProps {
-  error?: any
-  isOpen?: boolean
-  errorInstances?: any[]
-  isLoading?: boolean
-  activeTab?: string
-}
-
-const { error = null, isOpen = false, errorInstances = [], isLoading = false, activeTab = 'details' } = defineProps<ErrorDetailModalProps>()
-
-// Helper functions
-function getStatusClass(status) {
-  switch (status) {
-    case 'resolved':
-      return 'bg-green-50 text-green-700 ring-1 ring-inset ring-green-600/20 dark:bg-green-900/30 dark:text-green-400'
-    case 'ignored':
-      return 'bg-gray-50 text-gray-700 ring-1 ring-inset ring-gray-600/20 dark:bg-neutral-900/30 dark:text-neutral-400'
-    case 'unresolved':
-    default:
-      return 'bg-red-50 text-red-700 ring-1 ring-inset ring-red-600/20 dark:bg-red-900/30 dark:text-red-400'
-  }
-}
-
-function getTypeClass(type) {
-  const typeLC = type.toLowerCase()
-  if (typeLC.includes('error') || typeLC.includes('exception')) {
-    return 'bg-red-50 text-red-700 ring-1 ring-inset ring-red-600/20 dark:bg-red-900/30 dark:text-red-400'
-  }
-  if (typeLC.includes('warning')) {
-    return 'bg-yellow-50 text-yellow-700 ring-1 ring-inset ring-yellow-600/20 dark:bg-yellow-900/30 dark:text-yellow-400'
-  }
-  if (typeLC.includes('info')) {
-    return 'bg-blue-50 text-blue-700 ring-1 ring-inset ring-blue-600/20 dark:bg-blue-900/30 dark:text-blue-400'
-  }
-  return 'bg-purple-50 text-purple-700 ring-1 ring-inset ring-purple-600/20 dark:bg-purple-900/30 dark:text-purple-400'
-}
-
-function formatDate(dateString) {
-  const date = new Date(dateString)
-  return date.toLocaleString('en-US', {
-    year: 'numeric',
-    month: 'short',
-    day: 'numeric',
-    hour: '2-digit',
-    minute: '2-digit',
-    second: '2-digit',
-  }
-}
-
-function formatTimeAgo(dateString) {
-  const date = new Date(dateString)
-  const now = new Date()
-  const diffMs = now.getTime() - date.getTime()
-  const diffSecs = Math.floor(diffMs / 1000)
-  const diffMins = Math.floor(diffSecs / 60)
-  const diffHours = Math.floor(diffMins / 60)
-  const diffDays = Math.floor(diffHours / 24)
-
-  if (diffDays > 0) return `${diffDays}d ago`
-  if (diffHours > 0) return `${diffHours}h ago`
-  if (diffMins > 0) return `${diffMins}m ago`
-  return 'Just now'
-}
-</script>
-@if(isOpen && error)
-<div class="fixed inset-0 overflow-y-auto z-50">
-  <div class="flex items-end justify-center sm:items-center p-4 sm:p-0 min-h-full text-center">
-    <!-- Backdrop -->
-    <div class="fixed inset-0 bg-gray-500 bg-opacity-75 dark:bg-neutral-900 dark:bg-opacity-75 transition-opacity" data-action="close"></div>
-
-    <!-- Modal panel -->
-    <div class="overflow-hidden relative sm:my-8 sm:max-w-4xl sm:w-full text-left bg-white dark:bg-neutral-800 rounded-lg shadow-xl transition-all transform">
-      <!-- Header -->
-      <div class="px-6 py-4 border-b border-gray-200 dark:border-neutral-700">
-        <div class="flex items-start justify-between">
-          <div class="flex-1">
-            <div class="flex gap-3 items-center">
-              <span class="inline-flex items-center rounded-md px-2 py-1 text-xs font-medium {{ getTypeClass(error.type) }}">
-                {{ error.type }}
-              </span>
-              <span class="inline-flex items-center rounded-md px-2 py-1 text-xs font-medium capitalize {{ getStatusClass(error.status) }}">
-                {{ error.status }}
-              </span>
-            </div>
-            <h3 class="mt-2 break-words font-semibold text-gray-900 text-lg dark:text-white">
-              {{ error.message }}
-            </h3>
-            <div class="flex gap-4 items-center mt-1 text-gray-500 text-sm dark:text-neutral-400">
-              <span class="flex items-center">
-                <div class="mr-1 h-4 w-4 i-hugeicons-time-02"></div>
-                First seen: {{ formatTimeAgo(error.first_seen) }}
-              </span>
-              <span class="flex items-center">
-                <div class="mr-1 h-4 w-4 i-hugeicons-clock-02"></div>
-                Last seen: {{ formatTimeAgo(error.last_seen) }}
-              </span>
-              <span class="flex items-center">
-                <div class="mr-1 h-4 w-4 i-hugeicons-chart-line-data-01"></div>
-                {{ error.count }} events
-              </span>
-            </div>
-          </div>
-          <button type="button" class="text-gray-400 hover:text-gray-500 rounded-md focus:outline-none" data-action="close">
-            <div class="h-6 w-6 i-hugeicons-cancel-01"></div>
-          </button>
-        </div>
-
-        <!-- Action buttons -->
-        <div class="flex gap-2 mt-4">
-          @if(error.status != 'resolved')
-            <button type="button" class="inline-flex items-center px-3 py-2 font-semibold text-sm text-white bg-green-600 hover:bg-green-500 rounded-md shadow-sm" data-action="resolve">
-              <div class="mr-1 h-4 w-4 i-hugeicons-checkmark-circle-02"></div>
-              Resolve
-            </button>
-          @endif
-          @if(error.status == 'resolved')
-            <button type="button" class="inline-flex items-center px-3 py-2 font-semibold text-sm text-white bg-yellow-600 hover:bg-yellow-500 rounded-md shadow-sm" data-action="unresolve">
-              <div class="mr-1 h-4 w-4 i-hugeicons-refresh"></div>
-              Reopen
-            </button>
-          @endif
-          @if(error.status != 'ignored')
-            <button type="button" class="inline-flex items-center px-3 py-2 font-semibold text-sm text-white bg-gray-600 hover:bg-gray-500 rounded-md shadow-sm" data-action="ignore">
-              <div class="mr-1 h-4 w-4 i-hugeicons-eye-off"></div>
-              Ignore
-            </button>
-          @endif
-          <button type="button" class="inline-flex items-center px-3 py-2 font-semibold text-sm text-white bg-red-600 hover:bg-red-500 rounded-md shadow-sm" data-action="delete">
-            <div class="mr-1 h-4 w-4 i-hugeicons-waste"></div>
-            Delete
-          </button>
-        </div>
-      </div>
-
-      <!-- Tabs -->
-      <div class="border-b border-gray-200 dark:border-neutral-700">
-        <nav class="flex -mb-px">
-          <button class="px-6 py-3 text-sm font-medium border-b-2 transition-colors {{ activeTab == 'details' ? 'border-blue-500 text-blue-600 dark:text-blue-400' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-neutral-400 dark:hover:text-gray-300' }}" data-action="tab" data-tab="details">
-            Details
-          </button>
-          <button class="px-6 py-3 text-sm font-medium border-b-2 transition-colors {{ activeTab == 'events' ? 'border-blue-500 text-blue-600 dark:text-blue-400' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-neutral-400 dark:hover:text-gray-300' }}" data-action="tab" data-tab="events">
-            Events ({{ error.count }})
-          </button>
-        </nav>
-      </div>
-
-      <!-- Content -->
-      <div class="overflow-y-auto px-6 py-4 max-h-[60vh]">
-        <!-- Details Tab -->
-        @if(activeTab == 'details')
-          <!-- Stack Trace -->
-          @if(error.stack)
-            <div class="mb-6">
-              <h4 class="mb-2 font-medium text-gray-900 text-sm dark:text-white">Stack Trace</h4>
-              <pre class="overflow-x-auto p-4 font-mono leading-relaxed text-gray-100 text-xs bg-gray-900 rounded-lg">{{ error.stack }}</pre>
-            </div>
-          @endif
-
-          <!-- Error Info -->
-          <div class="grid gap-4 grid-cols-2">
-            <div>
-              <h4 class="mb-2 font-medium text-gray-900 text-sm dark:text-white">Error Type</h4>
-              <p class="text-gray-600 text-sm dark:text-neutral-300">{{ error.type }}</p>
-            </div>
-            <div>
-              <h4 class="mb-2 font-medium text-gray-900 text-sm dark:text-white">Total Occurrences</h4>
-              <p class="text-gray-600 text-sm dark:text-neutral-300">{{ error.count }}</p>
-            </div>
-            <div>
-              <h4 class="mb-2 font-medium text-gray-900 text-sm dark:text-white">First Occurrence</h4>
-              <p class="text-gray-600 text-sm dark:text-neutral-300">{{ formatDate(error.first_seen) }}</p>
-            </div>
-            <div>
-              <h4 class="mb-2 font-medium text-gray-900 text-sm dark:text-white">Last Occurrence</h4>
-              <p class="text-gray-600 text-sm dark:text-neutral-300">{{ formatDate(error.last_seen) }}</p>
-            </div>
-          </div>
-        @endif
-
-        <!-- Events Tab -->
-        @if(activeTab == 'events')
-          @if(isLoading)
-            <div class="flex items-center justify-center py-8">
-              <div class="h-8 w-8 text-blue-500 animate-spin i-hugeicons-loading-01"></div>
-            </div>
-          @elseif(errorInstances.length == 0)
-            <div class="py-8 text-center text-gray-500 dark:text-neutral-400">
-              No individual events found
-            </div>
-          @else
-            <div class="space-y-3">
-              @foreach(errorInstances as instance)
-                <div class="p-4 bg-gray-50 dark:bg-neutral-700 rounded-lg">
-                  <div class="flex items-start justify-between">
-                    <div class="flex-1">
-                      <div class="flex gap-2 items-center text-sm">
-                        <span class="text-gray-500 dark:text-neutral-400">Event #{{ instance.id }}</span>
-                        <span class="text-gray-400">|</span>
-                        <span class="text-gray-600 dark:text-neutral-300">{{ formatDate(instance.created_at) }}</span>
-                      </div>
-                      <p class="mt-1 text-gray-900 text-sm dark:text-white">{{ instance.message }}</p>
-                      @if(instance.additional_info)
-                        <p class="mt-1 text-gray-500 text-xs dark:text-neutral-400">
-                          {{ instance.additional_info }}
-                        </p>
-                      @endif
-                    </div>
-                  </div>
-                </div>
-              @endforeach
-            </div>
-          @endif
-        @endif
-      </div>
-
-      <!-- Footer -->
-      <div class="px-6 py-4 border-gray-200 border-t dark:border-neutral-700">
-        <div class="flex justify-end">
-          <button type="button" class="px-3 py-2 font-semibold text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-700 hover:bg-gray-50 dark:hover:bg-neutral-600 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-600 shadow-sm" data-action="close">
-            Close
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-@endif

package/resources/components/Dashboard/Monitoring/ErrorsTable.stx

@@ -1,184 +0,0 @@
-<script>
-interface ErrorsTableProps {
-  errors?: any[]
-  searchQuery?: string
-  statusFilter?: string
-  typeFilter?: string
-  sortBy?: string
-  sortOrder?: string
-}
-
-const { errors = [], searchQuery = '', statusFilter = 'all', typeFilter = 'all', sortBy = 'last_seen', sortOrder = 'desc' } = defineProps<ErrorsTableProps>()
-
-// Helper functions
-function getStatusClass(status) {
-  switch (status) {
-    case 'resolved':
-      return 'bg-green-50 text-green-700 ring-1 ring-inset ring-green-600/20 dark:bg-green-900/30 dark:text-green-400'
-    case 'ignored':
-      return 'bg-gray-50 text-gray-700 ring-1 ring-inset ring-gray-600/20 dark:bg-neutral-900/30 dark:text-neutral-400'
-    case 'unresolved':
-    default:
-      return 'bg-red-50 text-red-700 ring-1 ring-inset ring-red-600/20 dark:bg-red-900/30 dark:text-red-400'
-  }
-}
-
-function getTypeClass(type) {
-  const typeLC = type.toLowerCase()
-  if (typeLC.includes('error') || typeLC.includes('exception')) {
-    return 'bg-red-50 text-red-700 ring-1 ring-inset ring-red-600/20 dark:bg-red-900/30 dark:text-red-400'
-  }
-  if (typeLC.includes('warning')) {
-    return 'bg-yellow-50 text-yellow-700 ring-1 ring-inset ring-yellow-600/20 dark:bg-yellow-900/30 dark:text-yellow-400'
-  }
-  if (typeLC.includes('info')) {
-    return 'bg-blue-50 text-blue-700 ring-1 ring-inset ring-blue-600/20 dark:bg-blue-900/30 dark:text-blue-400'
-  }
-  return 'bg-purple-50 text-purple-700 ring-1 ring-inset ring-purple-600/20 dark:bg-purple-900/30 dark:text-purple-400'
-}
-
-function formatTimeAgo(dateString) {
-  const date = new Date(dateString)
-  const now = new Date()
-  const diffMs = now.getTime() - date.getTime()
-  const diffSecs = Math.floor(diffMs / 1000)
-  const diffMins = Math.floor(diffSecs / 60)
-  const diffHours = Math.floor(diffMins / 60)
-  const diffDays = Math.floor(diffHours / 24)
-
-  if (diffDays > 0) return `${diffDays}d ago`
-  if (diffHours > 0) return `${diffHours}h ago`
-  if (diffMins > 0) return `${diffMins}m ago`
-  return 'Just now'
-}
-
-function truncateMessage(message, maxLength = 60) {
-  if (message.length <= maxLength) return message
-  return `${message.substring(0, maxLength)}...`
-}
-</script>
-<div class="overflow-hidden">
-  <table class="min-w-full divide-gray-300 divide-y dark:divide-neutral-700">
-    <thead class="bg-gray-50 dark:bg-neutral-700">
-      <tr>
-        <th scope="col" class="pl-4 pr-3 py-3.5 sm:pl-6 font-semibold text-gray-900 text-left text-sm dark:text-neutral-200">
-          <button class="inline-flex items-center group" data-action="sort" data-column="type">
-            Error
-            <span class="group-focus:visible group-hover:visible flex-none ml-2 text-gray-400 rounded">
-              @if(sortBy == 'type')
-                <div class="{{ sortOrder == 'asc' ? 'i-hugeicons-arrow-up-02' : 'i-hugeicons-arrow-down-02' }} h-4 w-4"></div>
-              @else
-                <div class="h-4 w-4 i-hugeicons-arrows-up-down"></div>
-              @endif
-            </span>
-          </button>
-        </th>
-        <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm dark:text-neutral-200">
-          <button class="inline-flex items-center group" data-action="sort" data-column="count">
-            Events
-            <span class="group-focus:visible group-hover:visible flex-none ml-2 text-gray-400 rounded">
-              @if(sortBy == 'count')
-                <div class="{{ sortOrder == 'asc' ? 'i-hugeicons-arrow-up-02' : 'i-hugeicons-arrow-down-02' }} h-4 w-4"></div>
-              @else
-                <div class="h-4 w-4 i-hugeicons-arrows-up-down"></div>
-              @endif
-            </span>
-          </button>
-        </th>
-        <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm dark:text-neutral-200">
-          <button class="inline-flex items-center group" data-action="sort" data-column="last_seen">
-            Last Seen
-            <span class="group-focus:visible group-hover:visible flex-none ml-2 text-gray-400 rounded">
-              @if(sortBy == 'last_seen')
-                <div class="{{ sortOrder == 'asc' ? 'i-hugeicons-arrow-up-02' : 'i-hugeicons-arrow-down-02' }} h-4 w-4"></div>
-              @else
-                <div class="h-4 w-4 i-hugeicons-arrows-up-down"></div>
-              @endif
-            </span>
-          </button>
-        </th>
-        <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm dark:text-neutral-200">
-          Status
-        </th>
-        <th scope="col" class="relative pl-3 pr-4 py-3.5 sm:pr-6">
-          <span class="sr-only">Actions</span>
-        </th>
-      </tr>
-    </thead>
-    <tbody class="bg-white dark:bg-neutral-800 divide-gray-200 divide-y dark:divide-neutral-700">
-      @foreach(errors as error)
-        <tr class="hover:bg-gray-50 dark:hover:bg-neutral-700 cursor-pointer" data-action="view" data-error-type="{{ error.type }}" data-error-message="{{ error.message }}">
-          <td class="pl-4 pr-3 py-4 sm:pl-6 text-sm">
-            <div class="flex flex-col">
-              <div class="flex gap-2 items-center">
-                <span class="inline-flex items-center rounded-md px-2 py-1 text-xs font-medium {{ getTypeClass(error.type) }}">
-                  {{ error.type }}
-                </span>
-              </div>
-              <div class="mt-1 font-medium text-gray-900 dark:text-white">
-                {{ truncateMessage(error.message) }}
-              </div>
-              <div class="mt-0.5 text-gray-500 text-xs dark:text-neutral-400">
-                First seen: {{ formatTimeAgo(error.first_seen) }}
-              </div>
-            </div>
-          </td>
-          <td class="px-3 py-4 text-sm whitespace-nowrap">
-            <div class="flex items-center">
-              <span class="inline-flex items-center justify-center px-2 h-6 min-w-[24px] font-medium text-gray-700 text-xs dark:text-neutral-300 bg-gray-100 dark:bg-neutral-700 rounded-full">
-                {{ error.count }}
-              </span>
-            </div>
-          </td>
-          <td class="px-3 py-4 text-gray-500 text-sm whitespace-nowrap dark:text-neutral-300">
-            {{ formatTimeAgo(error.last_seen) }}
-          </td>
-          <td class="px-3 py-4 text-sm whitespace-nowrap">
-            <span class="inline-flex items-center rounded-md px-2 py-1 text-xs font-medium capitalize {{ getStatusClass(error.status) }}">
-              {{ error.status }}
-            </span>
-          </td>
-          <td class="relative pl-3 pr-4 py-4 sm:pr-6 font-medium text-right text-sm whitespace-nowrap">
-            <div class="flex items-center justify-end space-x-2">
-              @if(error.status != 'resolved')
-                <button type="button" title="Mark as resolved" class="text-green-400 dark:text-green-400 hover:text-green-600 dark:hover:text-green-300 duration-150 transition-colors" data-action="resolve" data-error-type="{{ error.type }}" data-error-message="{{ error.message }}">
-                  <div class="h-5 w-5 i-hugeicons-checkmark-circle-02"></div>
-                </button>
-              @endif
-              @if(error.status == 'resolved')
-                <button type="button" title="Reopen" class="text-yellow-400 dark:text-yellow-400 hover:text-yellow-600 dark:hover:text-yellow-300 duration-150 transition-colors" data-action="unresolve" data-error-type="{{ error.type }}" data-error-message="{{ error.message }}">
-                  <div class="h-5 w-5 i-hugeicons-refresh"></div>
-                </button>
-              @endif
-              @if(error.status != 'ignored')
-                <button type="button" title="Ignore" class="text-gray-400 dark:text-neutral-400 hover:text-gray-600 dark:hover:text-gray-300 duration-150 transition-colors" data-action="ignore" data-error-type="{{ error.type }}" data-error-message="{{ error.message }}">
-                  <div class="h-5 w-5 i-hugeicons-eye-off"></div>
-                </button>
-              @endif
-              <button type="button" title="Delete" class="text-red-400 dark:text-red-400 hover:text-red-600 dark:hover:text-red-300 duration-150 transition-colors" data-action="delete" data-error-type="{{ error.type }}" data-error-message="{{ error.message }}">
-                <div class="h-5 w-5 i-hugeicons-waste"></div>
-              </button>
-            </div>
-          </td>
-        </tr>
-      @endforeach
-      @if(errors.length == 0)
-        <tr>
-          <td colspan="5" class="px-6 py-12 text-center">
-            <div class="flex flex-col items-center">
-              <div class="h-12 w-12 text-green-400 i-hugeicons-checkmark-circle-02"></div>
-              <h3 class="mt-2 font-medium text-gray-900 text-sm dark:text-white">No errors found</h3>
-              <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">
-                @if(searchQuery || statusFilter != 'all' || typeFilter != 'all')
-                  Try adjusting your filters
-                @else
-                  Your application is running smoothly!
-                @endif
-              </p>
-            </div>
-          </td>
-        </tr>
-      @endif
-    </tbody>
-  </table>
-</div>

package/resources/components/Dashboard/NavbarModern.stx

@@ -1,188 +0,0 @@
-<script server>
-// `<script server>` (not bare `<script>`) so the function declarations and
-// const bindings below — `getBreadcrumb`, `isActiveRoute`, `getUser`,
-// `getNotificationCount`, `defaultUser` — get extracted into this
-// component's render context. Without `server` STX treats the script as
-// client-only and the template's `@foreach(getBreadcrumb(currentPath || '/')
-// as crumb)` evaluates against an empty context, producing
-// `[Foreach Error]: getBreadcrumb is not iterable` on every navigation.
-interface NavbarModernProps {
-  currentPath?: string
-  user?: Record<string, any>
-  notificationCount?: number
-}
-
-const { currentPath = '/', user, notificationCount = 3 } = defineProps<NavbarModernProps>()
-
-/**
- * Modern Navbar Component
- * A clean, refined navigation header for the dashboard.
- * Note: Window controls are handled natively by Craft on macOS.
- */
-
-// Default user data
-const defaultUser = {
-  name: 'Chris Breuer',
-  email: 'chris@stacksjs.org',
-  avatar: 'https://avatars.githubusercontent.com/u/6228425',
-}
-
-function getBreadcrumb(path) {
-  const parts = (path || '/').split('/').filter(Boolean)
-  return parts.map((part, index) => ({
-    label: part.charAt(0).toUpperCase() + part.slice(1).replace(/-/g, ' '),
-    path: '/' + parts.slice(0, index + 1).join('/'),
-    isLast: index === parts.length - 1,
-  }))
-}
-
-function isActiveRoute(path) {
-  return currentPath === path || currentPath.startsWith(path + '/')
-}
-
-function getUser() {
-  return user || defaultUser
-}
-
-function getNotificationCount() {
-  return notificationCount
-}
-</script>
-<header class="flex sticky top-0 z-40 gap-4 items-center px-4 h-14 bg-white/80 dark:bg-neutral-900/80 border-b border-neutral-200/50 dark:border-neutral-700/50 backdrop-blur-xl">
-  <!-- Breadcrumb navigation -->
-  <nav class="hidden lg:flex gap-2 items-center text-sm">
-    <a href="/" class="text-neutral-400 hover:text-neutral-600 dark:hover:text-neutral-300 transition-colors">
-      <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
-      </svg>
-    </a>
-    @foreach(getBreadcrumb(currentPath || '/') as crumb)
-      <span class="text-neutral-300 dark:text-neutral-600">/</span>
-      @if(!crumb.isLast)
-        <a href="{{ crumb.path }}" class="text-neutral-500 dark:text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-200 transition-colors">
-          {{ crumb.label }}
-        </a>
-      @else
-        <span class="font-medium text-neutral-700 dark:text-neutral-200">{{ crumb.label }}</span>
-      @endif
-    @endforeach
-  </nav>
-
-  <!-- Spacer -->
-  <div class="flex-1"></div>
-
-  <!-- Search -->
-  <div class="hidden sm:flex items-center">
-    <div class="flex relative items-center w-56 lg:w-64">
-      <svg class="absolute left-3 h-4 w-4 text-neutral-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
-      </svg>
-      <input
-        type="text"
-        placeholder="Search..."
-        class="pl-10 pr-16 py-2 w-full text-neutral-900 text-sm dark:text-white placeholder:text-neutral-400 bg-neutral-100 dark:bg-neutral-800 border-none rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500/40 cursor-pointer"
-        readonly
-        @click="$emit('open-search')"
-        @focus="$emit('open-search')"
-      />
-      <div class="flex absolute right-3 items-center">
-        <kbd class="hidden lg:inline-flex px-1.5 py-0.5 font-medium text-[10px] text-neutral-400 bg-white dark:bg-neutral-700 border border-neutral-200 rounded dark:border-neutral-600 shadow-sm">
-          ⌘K
-        </kbd>
-      </div>
-    </div>
-  </div>
-
-  <!-- Right section -->
-  <div class="flex gap-2 items-center">
-    <!-- Bug/Errors -->
-    <a
-      href="/monitoring/errors"
-      class="p-2 rounded-lg transition-colors {{ isActiveRoute('/monitoring/errors') ? 'text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/30' : 'text-neutral-500 hover:text-neutral-700 hover:bg-neutral-100 dark:text-neutral-400 dark:hover:text-neutral-200 dark:hover:bg-neutral-800' }}"
-      title="Error Tracking"
-    >
-      <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
-      </svg>
-    </a>
-
-    <!-- Health -->
-    <a
-      href="/health"
-      class="p-2 rounded-lg transition-colors {{ isActiveRoute('/health') ? 'text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/30' : 'text-neutral-500 hover:text-neutral-700 hover:bg-neutral-100 dark:text-neutral-400 dark:hover:text-neutral-200 dark:hover:bg-neutral-800' }}"
-      title="System Health"
-    >
-      <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
-      </svg>
-    </a>
-
-    <!-- Notifications -->
-    <a
-      href="/notifications"
-      class="relative p-2 rounded-lg transition-colors {{ isActiveRoute('/notifications') ? 'text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/30' : 'text-neutral-500 hover:text-neutral-700 hover:bg-neutral-100 dark:text-neutral-400 dark:hover:text-neutral-200 dark:hover:bg-neutral-800' }}"
-      title="Notifications"
-    >
-      <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path>
-      </svg>
-      @if(getNotificationCount() > 0)
-        <span class="flex absolute right-1 top-1 items-center justify-center px-1 h-4 min-w-[16px] font-bold text-[10px] text-white bg-red-500 rounded-full">
-          {{ getNotificationCount() > 9 ? '9+' : getNotificationCount() }}
-        </span>
-      @endif
-    </a>
-
-    <!-- Separator -->
-    <div class="mx-1 h-6 w-px bg-neutral-200 dark:bg-neutral-700"></div>
-
-    <!-- User dropdown -->
-    <div class="relative" data-dropdown="user">
-      <button
-        type="button"
-        class="flex gap-2 items-center p-1 hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-lg transition-colors"
-        data-action="toggle-dropdown"
-      >
-        <img
-          src="{{ getUser().avatar }}"
-          alt="{{ getUser().name }}"
-          class="object-cover h-8 w-8 rounded-full"
-        />
-        <span class="hidden lg:block font-medium text-neutral-700 text-sm dark:text-neutral-200">
-          {{ getUser().name }}
-        </span>
-        <svg class="hidden lg:block h-4 w-4 text-neutral-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
-        </svg>
-      </button>
-
-      <!-- Dropdown menu -->
-      <div class="hidden absolute right-0 z-50 mt-2 py-1 w-56 bg-white dark:bg-neutral-800 border border-neutral-200 rounded-xl dark:border-neutral-700 shadow-lg" data-dropdown-content>
-        <div class="px-4 py-3 border-b border-neutral-200 dark:border-neutral-700">
-          <p class="font-medium text-neutral-900 text-sm dark:text-white">{{ getUser().name }}</p>
-          <p class="text-neutral-500 text-xs truncate dark:text-neutral-400">{{ getUser().email }}</p>
-        </div>
-        <div class="py-1">
-          <a href="/profile" class="flex gap-3 items-center px-4 py-2 text-neutral-700 text-sm dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-700">
-            Your Profile
-          </a>
-          <a href="/settings" class="flex gap-3 items-center px-4 py-2 text-neutral-700 text-sm dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-700">
-            Settings
-          </a>
-          <a href="/billing" class="flex gap-3 items-center px-4 py-2 text-neutral-700 text-sm dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-700">
-            Billing
-          </a>
-        </div>
-        <div class="py-1 border-neutral-200 border-t dark:border-neutral-700">
-          <button
-            type="button"
-            class="flex gap-3 items-center px-4 py-2 w-full text-red-600 text-sm dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20"
-            data-action="logout"
-          >
-            Sign out
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</header>