@stacksjs/defaults 0.70.206 → 0.70.208

package/views/dashboard/environment/index.stx

@@ -0,0 +1,283 @@
+@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>
+
+@endsection

package/views/dashboard/errors/index.stx

@@ -0,0 +1,274 @@
+@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>
+
+@endsection

package/views/dashboard/forgot-password.stx

@@ -0,0 +1,57 @@
+@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()"
+/>
+
+@endsection