@stacksjs/defaults 0.70.229 → 0.70.231

package/views/dashboard/environment/index.stx

@@ -1,283 +1,7 @@
 @extends('layouts/default')
 
 @section('content')
-<div class="py-4 lg:py-8 min-h-screen dark:bg-neutral-800">
-  <div class="px-4 sm:px-6 lg:px-8">
-    <div class="sm:flex sm:items-center">
-      <div class="sm:flex-auto">
-        <h1 class="font-semibold leading-6 text-base text-gray-900 dark:text-neutral-100">Environment Variables</h1>
-        <p class="mt-2 text-gray-700 text-sm dark:text-neutral-300">
-          This is your project's <code class="text-red-400">.env</code> file. Be careful when editing production values.
-        </p>
-      </div>
-      <div class="sm:flex-none mt-4 space-x-3 sm:ml-16 sm:mt-0">
-        <button @click="openAddModal()" type="button" 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">Add Variable</button>
-        <button :show="hasBackup" @click="openBackupModal()" type="button" class="px-3 py-2 font-semibold text-sm text-white bg-gray-600 hover:bg-gray-500 rounded-md focus-visible:outline focus-visible:outline-2 focus-visible:outline-gray-600 focus-visible:outline-offset-2 shadow-sm">Show Backup</button>
-      </div>
-    </div>
-
-    <div class="flow-root mt-8">
-      <div class="overflow-x-auto -mx-4 -my-2 sm:-mx-6 lg:-mx-8">
-        <div class="inline-block py-2 sm:px-6 lg:px-8 min-w-full align-middle">
-          <div class="overflow-hidden sm:rounded-lg">
-            <form @submit.prevent="handleSave()" class="relative">
-              <CodeEditor :value="envValues" :loading="isLoading" language="env" :lineNumbers="true" :keyboardShortcuts="true" @save="handleSave" @format="formatContent" />
-
-              <div class="flex items-center mb-4 mt-2 space-x-4 text-gray-500 text-sm dark:text-neutral-400">
-                <div class="flex items-center space-x-1">
-                  <kbd class="px-1.5 py-0.5 font-semibold text-gray-800 text-xs dark:text-neutral-100 bg-gray-100 dark:bg-neutral-700 border border-gray-200 rounded dark:border-neutral-600">{{ modKey() }}</kbd>
-                  <span>+</span>
-                  <kbd class="px-1.5 py-0.5 font-semibold text-gray-800 text-xs dark:text-neutral-100 bg-gray-100 dark:bg-neutral-700 border border-gray-200 rounded dark:border-neutral-600">S</kbd>
-                  <span class="text-xs">save</span>
-                </div>
-                <div class="flex items-center space-x-1">
-                  <kbd class="px-1.5 py-0.5 font-semibold text-gray-800 text-xs dark:text-neutral-100 bg-gray-100 dark:bg-neutral-700 border border-gray-200 rounded dark:border-neutral-600">{{ modKey() }}</kbd>
-                  <span>+</span>
-                  <kbd class="px-1.5 py-0.5 font-semibold text-gray-800 text-xs dark:text-neutral-100 bg-gray-100 dark:bg-neutral-700 border border-gray-200 rounded dark:border-neutral-600">N</kbd>
-                  <span class="text-xs">new</span>
-                </div>
-                <div class="flex items-center space-x-1">
-                  <kbd class="px-1.5 py-0.5 font-semibold text-gray-800 text-xs dark:text-neutral-100 bg-gray-100 dark:bg-neutral-700 border border-gray-200 rounded dark:border-neutral-600">{{ modKey() }}</kbd>
-                  <span>+</span>
-                  <kbd class="px-1.5 py-0.5 font-semibold text-gray-800 text-xs dark:text-neutral-100 bg-gray-100 dark:bg-neutral-700 border border-gray-200 rounded dark:border-neutral-600">⇧</kbd>
-                  <span>+</span>
-                  <kbd class="px-1.5 py-0.5 font-semibold text-gray-800 text-xs dark:text-neutral-100 bg-gray-100 dark:bg-neutral-700 border border-gray-200 rounded dark:border-neutral-600">F</kbd>
-                  <span class="text-xs">format</span>
-                </div>
-              </div>
-
-              <div class="flex justify-end mt-4 space-x-3">
-                <button type="button" @click="formatContent()" class="px-3 py-2 font-semibold text-gray-900 text-sm dark:text-neutral-100 hover:bg-gray-50 dark:hover:bg-neutral-600 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-600 focus:outline-none focus:ring-2 focus:ring-blue-600 shadow-sm">Format</button>
-                <button type="button" @click="clearContent()" class="px-3 py-2 font-semibold text-gray-900 text-sm dark:text-neutral-100 hover:bg-gray-50 dark:hover:bg-neutral-600 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-600 focus:outline-none focus:ring-2 focus:ring-blue-600 shadow-sm">Clear</button>
-                <button type="submit" :disabled="isLoading" 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">
-                  <span :show="isLoading" class="flex items-center space-x-2">
-                    <div class="h-4 w-4 animate-spin i-hugeicons-arrow-path"></div>
-                    <span>Saving...</span>
-                  </span>
-                  <span :show="isIdle">Save Changes</span>
-                </button>
-              </div>
-            </form>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <div :show="showAddModal" class="relative z-10" aria-labelledby="modal-title" role="dialog" aria-modal="true">
-    <div class="fixed inset-0 bg-gray-500 bg-opacity-75 dark:bg-neutral-900 dark:bg-opacity-75 transition-opacity"></div>
-
-    <div class="fixed inset-0 overflow-y-auto z-10">
-      <div class="flex items-end justify-center sm:items-center p-4 sm:p-0 min-h-full text-center">
-        <div class="overflow-hidden relative pb-4 pt-5 px-4 sm:my-8 sm:p-6 sm:max-w-lg sm:w-full text-left bg-white dark:bg-neutral-700 rounded-lg shadow-xl transition-all transform">
-          <div>
-            <h3 class="font-semibold leading-6 text-base text-gray-900 dark:text-neutral-100">Add Environment Variable</h3>
-            <div class="mt-4 space-y-4">
-              <div>
-                <label class="block font-medium text-gray-700 text-sm dark:text-neutral-300">Key</label>
-                <input x-model="newVarKey" type="text" placeholder="APP_NAME" class="block mt-1 py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm dark:text-neutral-100 placeholder:text-gray-400 dark:bg-neutral-600 border-0 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-600 focus:ring-2 focus:ring-blue-600 focus:ring-inset shadow-sm" />
-              </div>
-              <div>
-                <label class="block font-medium text-gray-700 text-sm dark:text-neutral-300">Value</label>
-                <input x-model="newVarValue" type="text" placeholder="My App" class="block mt-1 py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm dark:text-neutral-100 placeholder:text-gray-400 dark:bg-neutral-600 border-0 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-600 focus:ring-2 focus:ring-blue-600 focus:ring-inset shadow-sm" />
-              </div>
-              <div>
-                <label class="block font-medium text-gray-700 text-sm dark:text-neutral-300">Description (optional)</label>
-                <input x-model="newVarDescription" type="text" placeholder="Application name used in emails and UI" class="block mt-1 py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm dark:text-neutral-100 placeholder:text-gray-400 dark:bg-neutral-600 border-0 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-600 focus:ring-2 focus:ring-blue-600 focus:ring-inset shadow-sm" />
-              </div>
-            </div>
-          </div>
-          <div class="sm:grid sm:gap-3 sm:grid-cols-2 sm:grid-flow-row-dense mt-5 sm:mt-6">
-            <button type="button" @click="addVariable()" class="inline-flex justify-center sm:col-start-2 px-3 py-2 w-full 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">Add</button>
-            <button type="button" @click="closeAddModal()" class="inline-flex justify-center sm:col-start-1 mt-3 px-3 py-2 sm:mt-0 w-full font-semibold text-gray-900 text-sm dark:text-neutral-100 bg-white dark:bg-neutral-600 hover:bg-gray-50 dark:hover:bg-neutral-500 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-600 shadow-sm">Cancel</button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <div :show="showBackupModal" class="relative z-10" aria-labelledby="modal-title" role="dialog" aria-modal="true">
-    <div class="fixed inset-0 bg-gray-500 bg-opacity-75 dark:bg-neutral-900 dark:bg-opacity-75 transition-opacity"></div>
-
-    <div class="fixed inset-0 overflow-y-auto z-10">
-      <div class="flex items-end justify-center sm:items-center p-4 sm:p-0 min-h-full text-center">
-        <div class="overflow-hidden relative pb-4 pt-5 px-4 sm:my-8 sm:p-6 sm:max-w-lg sm:w-full text-left bg-white dark:bg-neutral-700 rounded-lg shadow-xl transition-all transform">
-          <div>
-            <h3 class="font-semibold leading-6 text-base text-gray-900 dark:text-neutral-100">Backup Content</h3>
-            <div class="mt-4">
-              <textarea rows="10" readonly class="block py-1.5 w-full font-mono text-gray-900 text-sm dark:text-neutral-100 placeholder:text-gray-400 dark:bg-neutral-600 border-0 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-600 focus:ring-2 focus:ring-blue-600 focus:ring-inset shadow-sm">{{ backupContent }}</textarea>
-            </div>
-          </div>
-          <div class="sm:grid sm:gap-3 sm:grid-cols-2 sm:grid-flow-row-dense mt-5 sm:mt-6">
-            <button type="button" @click="restoreBackup()" class="inline-flex justify-center sm:col-start-2 px-3 py-2 w-full 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">Restore Backup</button>
-            <button type="button" @click="closeBackupModal()" class="inline-flex justify-center sm:col-start-1 mt-3 px-3 py-2 sm:mt-0 w-full font-semibold text-gray-900 text-sm dark:text-neutral-100 bg-white dark:bg-neutral-600 hover:bg-gray-50 dark:hover:bg-neutral-500 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-600 shadow-sm">Close</button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-
-<script client>
-const envValues = state('')
-const searchQuery = state('')
-const showAddModal = state(false)
-const showBackupModal = state(false)
-const isLoading = state(false)
-const backupContent = state('')
-
-const newVarKey = state('')
-const newVarValue = state('')
-const newVarDescription = state('')
-
-const hasBackup = derived(() => backupContent() !== '')
-const isIdle = derived(() => !isLoading())
-
-function isMac(): boolean {
-  return (typeof window !== 'undefined' && window.navigator?.platform?.toLowerCase().includes('mac')) ?? false
-}
-
-function modKey(): string {
-  return isMac() ? '⌘' : 'Ctrl'
-}
-
-function openAddModal(): void {
-  newVarKey.set('')
-  newVarValue.set('')
-  newVarDescription.set('')
-  showAddModal.set(true)
-}
-
-function closeAddModal(): void {
-  showAddModal.set(false)
-}
-
-function openBackupModal(): void {
-  showBackupModal.set(true)
-}
-
-function closeBackupModal(): void {
-  showBackupModal.set(false)
-}
-
-function clearContent(): void {
-  envValues.set('')
-}
-
-function formatContent(): void {
-  const current = envValues()
-  if (!current)
-    return
-  const formatted = current.split('\n').map((line) => {
-    if (!line.trim() || line.trim().startsWith('#'))
-      return line
-    const parts = line.split('=')
-    if (parts.length < 2)
-      return line
-    const key = parts[0]?.trim() ?? ''
-    const value = parts.slice(1).join('=').trim()
-    return `${key}=${value}`
-  }).join('\n')
-  envValues.set(formatted)
-}
-
-function validateEnv(content: string): string[] {
-  const lines = content.split('\n')
-  const errors: string[] = []
-  const keys = new Set<string>()
-
-  lines.forEach((line, index) => {
-    if (line.trim() && !line.startsWith('#')) {
-      if (!line.includes('=')) {
-        errors.push(`Line ${index + 1}: Missing '=' separator`)
-      }
-      else if (line.trim().endsWith('=')) {
-        errors.push(`Line ${index + 1}: Empty value`)
-      }
-      else {
-        const parts = line.split('=')
-        const key = parts[0]?.trim() ?? ''
-        if (keys.has(key))
-          errors.push(`Line ${index + 1}: Duplicate key '${key}'`)
-        if (!/^[A-Z_][A-Z0-9_]*$/.test(key))
-          errors.push(`Line ${index + 1}: Invalid key format '${key}'. Use uppercase letters, numbers, and underscores only`)
-        keys.add(key)
-      }
-    }
-  })
-
-  return errors
-}
-
-async function handleSave(): Promise<void> {
-  isLoading.set(true)
-  try {
-    const errors = validateEnv(envValues())
-    if (errors.length)
-      return
-
-    formatContent()
-    await new Promise(resolve => setTimeout(resolve, 1000))
-    backupContent.set(envValues())
-  }
-  catch {
-    // swallow — UI handles loading state
-  }
-  finally {
-    isLoading.set(false)
-  }
-}
-
-function addVariable(): void {
-  const key = newVarKey()
-  const value = newVarValue()
-  if (!key || !value)
-    return
-  if (!/^[A-Z_][A-Z0-9_]*$/.test(key))
-    return
-
-  const description = newVarDescription() ? `# ${newVarDescription()}\n` : ''
-  const newLine = `${key}=${value}`
-  envValues.set(`${envValues().trim()}\n\n${description}${newLine}`)
-  closeAddModal()
-}
-
-function restoreBackup(): void {
-  const backup = backupContent()
-  if (backup) {
-    envValues.set(backup)
-    closeBackupModal()
-  }
-}
-
-function handleKeyboardShortcuts(e: KeyboardEvent): void {
-  const isCmdOrCtrl = isMac() ? e.metaKey : e.ctrlKey
-  if (!isCmdOrCtrl)
-    return
-
-  if (e.key === 's') {
-    e.preventDefault()
-    void handleSave()
-  }
-  else if (e.key === 'n') {
-    e.preventDefault()
-    openAddModal()
-  }
-  else if (e.key === 'F' && e.shiftKey) {
-    e.preventDefault()
-    formatContent()
-  }
-}
-
-onMount(() => {
-  if (typeof window !== 'undefined')
-    window.addEventListener('keydown', handleKeyboardShortcuts)
-})
-
-onDestroy(() => {
-  if (typeof window !== 'undefined')
-    window.removeEventListener('keydown', handleKeyboardShortcuts)
-})
-</script>
+@title('Dashboard - Environment')
 
+<EnvironmentDashboard />
 @endsection

package/views/dashboard/errors/index.stx

@@ -1,274 +1,8 @@
 @extends('layouts/default')
 
 @section('content')
-@title('Dashboard - Errors')
-<div class="py-8 min-h-screen dark:bg-neutral-800">
-  <div class="px-4 sm:px-6 lg:px-8">
-    <div class="sm:flex sm:items-center">
-      <div class="sm:flex-auto">
-        <h1 class="font-semibold leading-6 text-base text-gray-900 dark:text-neutral-100">Error Tracking</h1>
-        <p class="mt-2 text-gray-700 text-sm dark:text-neutral-300">Last 30 days error tracking and monitoring.</p>
-      </div>
-    </div>
-
-    <dl class="grid gap-5 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 mt-5">
-      <div class="overflow-hidden relative pt-5 px-4 sm:pt-6 sm:px-6 bg-white dark:bg-neutral-800 rounded-lg shadow">
-        <dt>
-          <div class="absolute p-3 bg-red-500 rounded-md">
-            <div class="h-6 w-6 text-white i-hugeicons-alert-02"></div>
-          </div>
-          <p class="ml-16 font-medium text-gray-500 text-sm truncate">Total Unresolved Errors</p>
-        </dt>
-        <dd class="flex items-baseline ml-16 pb-6 sm:pb-7">
-          <p class="font-semibold text-2xl text-gray-900 dark:text-neutral-100">{{ totalLabel() }}</p>
-          <p class="flex items-baseline ml-2 font-semibold text-red-600 text-sm">
-            <svg class="flex-shrink-0 self-center h-5 w-5 text-red-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-              <path fill-rule="evenodd" d="M10 3a.75.75 0 01.75.75v10.638l3.96-4.158a.75.75 0 111.08 1.04l-5.25 5.5a.75.75 0 01-1.08 0l-5.25-5.5a.75.75 0 111.08-1.04l3.96 4.158V3.75A.75.75 0 0110 3z" clip-rule="evenodd" />
-            </svg>
-            <span class="sr-only">Increased by</span>
-            24%
-          </p>
-        </dd>
-      </div>
-
-      <div class="overflow-hidden relative pt-5 px-4 sm:pt-6 sm:px-6 bg-white dark:bg-neutral-800 rounded-lg shadow">
-        <dt>
-          <div class="absolute p-3 bg-green-500 rounded-md">
-            <div class="h-6 w-6 text-white i-hugeicons-checkmark-circle-02"></div>
-          </div>
-          <p class="ml-16 font-medium text-gray-500 text-sm truncate">Resolved Issues</p>
-        </dt>
-        <dd class="flex items-baseline ml-16 pb-6 sm:pb-7">
-          <p class="font-semibold text-2xl text-gray-900 dark:text-neutral-100">{{ resolvedLabel() }}</p>
-          <p class="flex items-baseline ml-2 font-semibold text-green-600 text-sm">
-            <svg class="flex-shrink-0 self-center h-5 w-5 text-green-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-              <path fill-rule="evenodd" d="M10 17a.75.75 0 01-.75-.75V5.612L5.29 9.77a.75.75 0 01-1.08-1.04l5.25-5.5a.75.75 0 011.08 0l5.25 5.5a.75.75 0 11-1.08 1.04l-3.96-4.158V16.25A.75.75 0 0110 17z" clip-rule="evenodd" />
-            </svg>
-            <span class="sr-only">Increased by</span>
-            12%
-          </p>
-        </dd>
-      </div>
-    </dl>
-
-    <div class="mt-8 border-b border-gray-200 dark:border-neutral-600">
-      <div class="flex items-center justify-between">
-        <nav class="flex -mb-px space-x-8" aria-label="Tabs">
-          <button @click="setActiveTab('active')" class="whitespace-nowrap border-b-2 py-4 px-1 text-sm font-medium {{ activeTab() === 'active' ? 'border-gray-300 text-gray-700 dark:border-neutral-600 dark:text-neutral-300' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 dark:text-neutral-400 dark:hover:text-gray-300' }}">
-            Active Errors
-            <span class="ml-3 rounded-full py-0.5 px-2.5 text-xs font-medium {{ activeTab() === 'active' ? 'bg-red-100 text-red-600 dark:bg-red-400/10 dark:text-red-400' : 'bg-gray-100 text-gray-900 dark:bg-neutral-600 dark:text-neutral-300' }}">{{ activeCount() }}</span>
-          </button>
-
-          <button @click="setActiveTab('resolved')" class="whitespace-nowrap border-b-2 py-4 px-1 text-sm font-medium {{ activeTab() === 'resolved' ? 'border-gray-300 text-gray-700 dark:border-neutral-600 dark:text-neutral-300' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 dark:text-neutral-400 dark:hover:text-gray-300' }}">
-            Resolved
-            <span class="ml-3 rounded-full py-0.5 px-2.5 text-xs font-medium {{ activeTab() === 'resolved' ? 'bg-blue-100 text-blue-600 dark:bg-blue-400/10 dark:text-blue-400' : 'bg-gray-100 text-gray-900 dark:bg-neutral-600 dark:text-neutral-300' }}">{{ resolvedCount() }}</span>
-          </button>
-        </nav>
-
-        <div class="flex items-center">
-          <label for="environment-filter" class="mr-2 font-medium text-gray-700 text-sm dark:text-neutral-300">Environment:</label>
-          <select id="environment-filter" x-model="selectedEnvironment" class="block pl-3 pr-10 py-1.5 w-32 text-gray-900 sm:leading-6 sm:text-sm dark:text-neutral-100 dark:bg-neutral-700 border-0 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-600 focus:ring-2 focus:ring-blue-600">
-            <option value="all">All</option>
-            <option value="production">Production</option>
-            <option value="staging">Staging</option>
-          </select>
-        </div>
-      </div>
-    </div>
-
-    <div class="flow-root mt-8">
-      <div class="overflow-x-auto -mx-4 -my-2 sm:-mx-6 lg:-mx-8">
-        <div class="inline-block py-2 sm:px-6 lg:px-8 min-w-full align-middle">
-          <div class="overflow-hidden ring-1 ring-black ring-opacity-5 rounded-lg dark:ring-neutral-700 shadow">
-            <table class="min-w-full divide-gray-300 divide-y dark:divide-neutral-600">
-              <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-100">Error</th>
-                  <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm dark:text-neutral-100">Type</th>
-                  <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm dark:text-neutral-100">Environment</th>
-                  <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm dark:text-neutral-100">Location</th>
-                  <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-right text-sm dark:text-neutral-100">Last Seen</th>
-                  <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-right text-sm dark:text-neutral-100">Count</th>
-                  <th :show="isResolvedTab" scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm dark:text-neutral-100">Resolved</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-600">
-                <template :for="error in visibleErrors">
-                  <tr class="hover:bg-gray-50 dark:hover:bg-neutral-700/50">
-                    <td class="pl-4 pr-3 py-4 sm:pl-6 font-medium text-gray-900 text-sm whitespace-nowrap dark:text-neutral-100">{{ error.message }}</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 {{ getTypeColor(error.type) }}">{{ error.type }}</span>
-                    </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 {{ getEnvironmentColor(error.environment) }}">{{ error.environment }}</span>
-                    </td>
-                    <td class="px-3 py-4 font-mono text-gray-500 text-sm whitespace-nowrap dark:text-neutral-400">
-                      <button @click="openInEditor('{{ error.location }}')" class="hover:text-blue-600 hover:underline dark:hover:text-blue-400 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">{{ error.location }}</button>
-                    </td>
-                    <td class="px-3 py-4 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-400">{{ error.lastSeen }}</td>
-                    <td class="px-3 py-4 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-400">{{ error.count }}</td>
-                    <td :show="isResolvedTab" class="px-3 py-4 text-gray-500 text-sm whitespace-nowrap dark:text-neutral-400">
-                      <div class="flex flex-col">
-                        <span>{{ error.resolvedAt }}</span>
-                        <span class="text-gray-400 text-xs">by {{ error.resolvedBy }}</span>
-                      </div>
-                    </td>
-                    <td class="relative pl-3 pr-4 py-4 sm:pr-6 font-medium text-right text-sm whitespace-nowrap">
-                      <div class="inline-flex rounded-md shadow-sm" role="group">
-                        <Tooltip :show="isActiveTab" text="Mark as resolved" position="top" :dark="isDark" :usePortal="true">
-                          <button @click="resolveError('{{ error.id }}')" type="button" class="inline-flex relative focus:z-10 items-center px-3 py-2 font-semibold text-gray-600 text-sm dark:text-neutral-400 hover:text-green-600 dark:hover:text-green-400 hover:bg-gray-50 dark:hover:bg-neutral-700 ring-1 ring-gray-300 ring-inset rounded-l-md dark:ring-neutral-600" aria-label="Mark error as resolved">
-                            <div class="h-4 w-4 i-hugeicons-checkmark-circle-02"></div>
-                          </button>
-                        </Tooltip>
-                        <Tooltip :show="isActiveTab" text="Analyze with AI" position="top" :dark="isDark" :usePortal="true">
-                          <button @click="analyzeWithAI('{{ error.id }}')" type="button" :disabled="isAiAnalyzing" class="relative -ml-px inline-flex items-center px-3 py-2 text-sm font-semibold ring-1 ring-inset ring-gray-300 hover:bg-gray-50 hover:text-purple-600 focus:z-10 dark:ring-neutral-600 dark:hover:bg-neutral-700 dark:hover:text-purple-400 {{ isAiAnalyzing() ? 'text-gray-400 cursor-not-allowed' : 'text-gray-600 dark:text-neutral-400' }}" aria-label="Analyze error with AI">
-                            <div class="h-4 w-4 {{ isAiAnalyzing() ? 'i-hugeicons-arrow-path animate-spin' : 'i-hugeicons-sparkles' }}"></div>
-                          </button>
-                        </Tooltip>
-                        <Tooltip text="Share error details" position="top" :dark="isDark" :usePortal="true">
-                          <button type="button" class="inline-flex relative focus:z-10 items-center -ml-px px-3 py-2 font-semibold text-gray-600 text-sm dark:text-neutral-400 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-gray-50 dark:hover:bg-neutral-700 ring-1 ring-gray-300 ring-inset dark:ring-neutral-600 {{ activeTab() === 'resolved' ? 'rounded-l-md' : '' }}" aria-label="Share error details">
-                            <div class="h-4 w-4 i-hugeicons-share-01"></div>
-                          </button>
-                        </Tooltip>
-                        <Tooltip text="View error details" position="top" :dark="isDark" :usePortal="true" alignment="right">
-                          <button type="button" class="inline-flex relative focus:z-10 items-center -ml-px px-3 py-2 font-semibold text-gray-600 text-sm dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 hover:bg-gray-50 dark:hover:bg-neutral-700 ring-1 ring-gray-300 ring-inset rounded-r-md dark:ring-neutral-600" aria-label="View error details">
-                            <div class="h-4 w-4 i-hugeicons-view"></div>
-                          </button>
-                        </Tooltip>
-                      </div>
-                    </td>
-                  </tr>
-                </template>
-              </tbody>
-            </table>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-
-<script client>
-interface ErrorEntry {
-  id: string
-  message: string
-  type: string
-  environment: string
-  location: string
-  lastSeen: string
-  count: number
-  status: 'active' | 'resolved'
-  resolvedAt?: string
-  resolvedBy?: string
-  aiAnalysis?: string
-}
-
-const activeTab = state<'active' | 'resolved'>('active')
-const selectedEnvironment = state('all')
-const isAiAnalyzing = state(false)
-const isDark = state(false)
-
-const allErrors = state<ErrorEntry[]>([
-  { id: '1', message: "Cannot read property 'length' of undefined", type: 'JavaScript Error', environment: 'production', location: 'main.js:156', lastSeen: '2 minutes ago', count: 36, status: 'active' },
-  { id: '2', message: "Cannot read property 'length' of undefined", type: 'JavaScript Error', environment: 'staging', location: 'main.js:156', lastSeen: '15 minutes ago', count: 22, status: 'active' },
-  { id: '3', message: 'Database connection failed', type: 'Fatal Error', environment: 'production', location: 'UserAction.ts:42', lastSeen: '1 hour ago', count: 15, status: 'active' },
-  { id: '4', message: 'Invalid API response format', type: 'API Error', environment: 'production', location: 'api/handlers.ts:89', lastSeen: '2 days ago', count: 56, status: 'resolved', resolvedAt: '1 day ago', resolvedBy: 'John Doe' },
-])
-
-const activeErrors = derived(() => {
-  const list = allErrors().filter(e => e.status === 'active')
-  const env = selectedEnvironment()
-  return env === 'all' ? list : list.filter(e => e.environment === env)
-})
-
-const resolvedErrors = derived(() => {
-  const list = allErrors().filter(e => e.status === 'resolved')
-  const env = selectedEnvironment()
-  return env === 'all' ? list : list.filter(e => e.environment === env)
-})
-
-const visibleErrors = derived(() => activeTab() === 'active' ? activeErrors() : resolvedErrors())
-const activeCount = derived(() => activeErrors().length)
-const resolvedCount = derived(() => resolvedErrors().length)
-const isActiveTab = derived(() => activeTab() === 'active')
-const isResolvedTab = derived(() => activeTab() === 'resolved')
-
-function totalLabel(): string { return '2,847' }
-function resolvedLabel(): string { return '1,624' }
-
-function setActiveTab(tab: 'active' | 'resolved'): void {
-  activeTab.set(tab)
-}
-
-function getTypeColor(type: string): string {
-  const colors: Record<string, string> = {
-    'TypeScript Error': 'text-purple-600 bg-purple-50 dark:text-purple-400 dark:bg-purple-400/10',
-    'JavaScript Error': 'text-yellow-600 bg-yellow-50 dark:text-yellow-400 dark:bg-yellow-400/10',
-    'Fatal Error': 'text-red-600 bg-red-50 dark:text-red-400 dark:bg-red-400/10',
-    'API Error': 'text-blue-600 bg-blue-50 dark:text-blue-400 dark:bg-blue-400/10',
-  }
-  return colors[type] || 'text-gray-600 bg-gray-50 dark:text-neutral-400 dark:bg-neutral-400/10'
-}
-
-function getEnvironmentColor(env: string): string {
-  const colors: Record<string, string> = {
-    production: 'text-red-600 bg-red-50 dark:text-red-400 dark:bg-red-400/10',
-    staging: 'text-yellow-600 bg-yellow-50 dark:text-yellow-400 dark:bg-yellow-400/10',
-    development: 'text-green-600 bg-green-50 dark:text-green-400 dark:bg-green-400/10',
-  }
-  return colors[env] || 'text-gray-600 bg-gray-50 dark:text-neutral-400 dark:bg-neutral-400/10'
-}
-
-function openInEditor(location: string): void {
-  fetch('/api/editor/open', {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ location }),
-  }).catch(() => {
-    // editor may not be available
-  })
-}
-
-function resolveError(errorId: string): void {
-  allErrors.set(allErrors().map(e => e.id === errorId
-    ? { ...e, status: 'resolved' as const, resolvedAt: 'Just now', resolvedBy: 'Current User' }
-    : e))
-}
-
-async function analyzeWithAI(errorId: string): Promise<void> {
-  const error = allErrors().find(e => e.id === errorId)
-  if (!error)
-    return
-
-  isAiAnalyzing.set(true)
-  try {
-    const response = await fetch('/api/ai/analyze-error', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({
-        errorId,
-        message: error.message,
-        type: error.type,
-        location: error.location,
-      }),
-    })
-    if (!response.ok)
-      throw new Error('AI analysis failed')
-    const data = await response.json()
-    if (data.analysis) {
-      allErrors.set(allErrors().map(e => e.id === errorId ? { ...e, aiAnalysis: data.analysis } : e))
-    }
-  }
-  catch (err) {
-    // eslint-disable-next-line no-console
-    console.error('AI analysis error:', err)
-    allErrors.set(allErrors().map(e => e.id === errorId ? { ...e, aiAnalysis: 'AI analysis failed. Please try again later.' } : e))
-  }
-  finally {
-    isAiAnalyzing.set(false)
-  }
-}
-</script>
-
+@title('Dashboard - Error Tracking')
+<PageLayout>
+  <ErrorDashboard />
+</PageLayout>
 @endsection

package/views/dashboard/forgot-password.stx

@@ -1,57 +1,6 @@
 @extends('layouts/guest')
 
 @section('content')
-<script client>
-// Forgot-password form (stacksjs/stacks#1838) — same broken-const fix as
-// login/register. Original `<script server>` had:
-//   1. `const` reassignments (never worked in strict mode)
-//   2. A missing `)` on the fetch options object (would never parse)
-//   3. `process.env.PORT_API` for a hardcoded `localhost:3008` URL,
-//      which won't survive a deploy
-// Now uses signals + a relative `/forgot-password` path, so the form
-// hits whatever origin served the page.
-const isLoading = state(false)
-const error = state('')
-const success = state(false)
-
-async function handleForgotPassword(data) {
-  isLoading.set(true)
-  error.set('')
-
-  try {
-    const response = await fetch('/forgot-password', {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-        'Accept': 'application/json',
-      },
-      body: JSON.stringify(data),
-    })
-
-    if (!response.ok) {
-      const errorData = await response.json()
-      throw new Error(errorData.message || 'Failed to send reset link')
-    }
-
-    success.set(true)
-  }
-  catch (err) {
-    error.set(err.message || 'An error occurred')
-    // eslint-disable-next-line no-console
-    console.error(err)
-  }
-  finally {
-    isLoading.set(false)
-  }
-}
-</script>
-
 @title('Forgot Password - Stacks Dashboard')
-<ForgotPassword
-  @submit="handleForgotPassword"
-  :isLoading="isLoading()"
-  :error="error()"
-  :success="success()"
-/>
-
+<ForgotPasswordDashboard />
 @endsection