@stacksjs/defaults 0.70.206 → 0.70.208

package/views/dashboard/queries/[id].stx

@@ -0,0 +1,381 @@
+@extends('layouts/default')
+
+@section('content')
+<div class="min-h-screen">
+  <header class="flex sticky top-0 z-10 flex-wrap gap-6 items-center justify-between px-4 py-4 sm:px-6 lg:px-8 bg-white dark:bg-neutral-900 shadow-sm">
+    <div>
+      <div class="flex gap-2 items-center">
+        <button @click="goBack()" class="p-1 hover:bg-gray-100 dark:hover:bg-neutral-800 rounded-md transition-colors">
+          <div class="h-5 w-5 text-gray-500 dark:text-neutral-400 i-hugeicons-arrow-left"></div>
+        </button>
+        <h1 class="font-semibold leading-7 text-gray-900 text-lg dark:text-white">Query Details</h1>
+      </div>
+      <p class="mt-1 pl-7 leading-6 text-gray-500 text-sm dark:text-neutral-400">Detailed information about the database query</p>
+    </div>
+    <div class="flex-shrink-0">
+      <StxLink to="/queries" class="inline-flex gap-x-1.5 items-center 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">
+        <div class="-ml-0.5 h-5 w-5 i-hugeicons-apps-04" aria-hidden="true"></div>
+        Dashboard
+      </StxLink>
+    </div>
+  </header>
+
+  <main class="px-4 py-8 sm:px-6 lg:px-8">
+    <div :show="isLoading" class="flex items-center justify-center py-12">
+      <div class="h-8 w-8 text-blue-600 dark:text-blue-400 animate-spin i-hugeicons-loading-01"></div>
+    </div>
+
+    <div :show="hasQuery" class="space-y-6">
+      <div class="overflow-hidden bg-white dark:bg-neutral-900 sm:rounded-lg shadow">
+        <div class="px-4 py-5 sm:px-6">
+          <div class="flex flex-wrap gap-4 items-start justify-between">
+            <div>
+              <div class="flex flex-wrap gap-3 items-center mb-2">
+                <span class="{{ getStatusColor(queryStatus()) }} inline-flex items-center px-2.5 py-1 font-medium text-sm ring-1 ring-inset rounded-md">{{ queryStatus() }}</span>
+                <span class="{{ queryTypeBadgeClass() }} inline-flex items-center px-2.5 py-1 font-medium text-sm ring-1 ring-inset rounded-md">{{ queryType() }}</span>
+                <span class="font-medium text-blue-600 text-lg dark:text-blue-400">{{ formattedDuration() }}</span>
+              </div>
+              <h3 class="font-medium text-gray-900 text-sm dark:text-white">{{ querySource() }}</h3>
+              <p class="mt-1 max-w-2xl text-gray-500 text-sm dark:text-neutral-400">{{ queryFileLine() }}</p>
+            </div>
+            <div class="text-right">
+              <p class="text-gray-500 text-sm dark:text-neutral-400">Executed</p>
+              <p class="font-medium text-gray-900 text-sm dark:text-white">{{ queryExecutedAt() }}</p>
+            </div>
+          </div>
+        </div>
+
+        <div class="border-gray-200 border-t dark:border-neutral-700">
+          <dl>
+            <div class="sm:grid sm:gap-4 sm:grid-cols-3 px-4 py-5 sm:px-6 bg-gray-50 dark:bg-neutral-800">
+              <dt class="font-medium text-gray-500 text-sm dark:text-neutral-400">Query</dt>
+              <dd class="sm:col-span-2 mt-1 sm:mt-0 text-gray-900 text-sm dark:text-white">
+                <pre class="overflow-x-auto p-3 font-mono text-gray-100 text-xs bg-gray-800 rounded-md">{{ queryText() }}</pre>
+              </dd>
+            </div>
+            <div class="sm:grid sm:gap-4 sm:grid-cols-3 px-4 py-5 sm:px-6 bg-white dark:bg-neutral-900">
+              <dt class="font-medium text-gray-500 text-sm dark:text-neutral-400">Normalized Query</dt>
+              <dd class="sm:col-span-2 mt-1 sm:mt-0 text-gray-900 text-sm dark:text-white">
+                <pre class="overflow-x-auto p-3 font-mono text-gray-800 text-xs dark:text-neutral-200 bg-gray-100 dark:bg-neutral-800 rounded-md">{{ queryNormalized() }}</pre>
+              </dd>
+            </div>
+            <div class="sm:grid sm:gap-4 sm:grid-cols-3 px-4 py-5 sm:px-6 bg-gray-50 dark:bg-neutral-800">
+              <dt class="font-medium text-gray-500 text-sm dark:text-neutral-400">Bindings</dt>
+              <dd class="sm:col-span-2 mt-1 sm:mt-0 text-gray-900 text-sm dark:text-white">
+                <pre :show="hasBindings" class="overflow-x-auto p-3 font-mono text-gray-800 text-xs dark:text-neutral-200 bg-gray-100 dark:bg-neutral-700 rounded-md">{{ queryBindings() }}</pre>
+                <p :show="noBindings" class="text-gray-500 text-sm dark:text-neutral-400">No bindings</p>
+              </dd>
+            </div>
+            <div class="sm:grid sm:gap-4 sm:grid-cols-3 px-4 py-5 sm:px-6 bg-white dark:bg-neutral-900">
+              <dt class="font-medium text-gray-500 text-sm dark:text-neutral-400">Connection</dt>
+              <dd class="sm:col-span-2 mt-1 sm:mt-0 text-gray-900 text-sm dark:text-white">{{ queryConnection() }}</dd>
+            </div>
+            <div class="sm:grid sm:gap-4 sm:grid-cols-3 px-4 py-5 sm:px-6 bg-gray-50 dark:bg-neutral-800">
+              <dt class="font-medium text-gray-500 text-sm dark:text-neutral-400">Affected Tables</dt>
+              <dd class="sm:col-span-2 mt-1 sm:mt-0 text-gray-900 text-sm dark:text-white">
+                <div class="flex flex-wrap gap-2">
+                  <template :for="table in affectedTables">
+                    <span class="inline-flex items-center px-2 py-1 font-medium text-blue-700 text-xs dark:text-blue-300 bg-blue-50 dark:bg-blue-900/20 ring-1 ring-blue-700/10 ring-inset rounded-md dark:ring-blue-400/30">{{ table }}</span>
+                  </template>
+                </div>
+              </dd>
+            </div>
+            <div class="sm:grid sm:gap-4 sm:grid-cols-3 px-4 py-5 sm:px-6 bg-white dark:bg-neutral-900">
+              <dt class="font-medium text-gray-500 text-sm dark:text-neutral-400">Indexes</dt>
+              <dd class="sm:col-span-2 mt-1 sm:mt-0 text-gray-900 text-sm dark:text-white">
+                <div class="space-y-4">
+                  <div>
+                    <h4 class="mb-1 font-medium text-gray-600 text-xs dark:text-neutral-400">Used Indexes</h4>
+                    <div :show="hasIndexesUsed" class="flex flex-wrap gap-2">
+                      <template :for="index in indexesUsed">
+                        <span class="inline-flex items-center px-2 py-1 font-medium text-green-700 text-xs dark:text-green-300 bg-green-50 dark:bg-green-900/20 ring-1 ring-green-700/10 ring-inset rounded-md dark:ring-green-400/30">{{ index }}</span>
+                      </template>
+                    </div>
+                    <p :show="noIndexesUsed" class="text-gray-500 text-xs dark:text-neutral-400">No indexes used</p>
+                  </div>
+                  <div>
+                    <h4 class="mb-1 font-medium text-gray-600 text-xs dark:text-neutral-400">Missing Indexes</h4>
+                    <div :show="hasMissingIndexes" class="flex flex-wrap gap-2">
+                      <template :for="index in missingIndexes">
+                        <span class="inline-flex items-center px-2 py-1 font-medium text-red-700 text-xs dark:text-red-300 bg-red-50 dark:bg-red-900/20 ring-1 ring-inset ring-red-700/10 rounded-md dark:ring-red-400/30">{{ index }}</span>
+                      </template>
+                    </div>
+                    <p :show="noMissingIndexes" class="text-gray-500 text-xs dark:text-neutral-400">No missing indexes identified</p>
+                  </div>
+                </div>
+              </dd>
+            </div>
+          </dl>
+        </div>
+      </div>
+
+      <div class="overflow-hidden bg-white dark:bg-neutral-900 sm:rounded-lg shadow">
+        <div class="px-4 py-5 sm:px-6">
+          <h3 class="font-semibold leading-6 text-base text-gray-900 dark:text-white">Performance Details</h3>
+          <p class="mt-1 max-w-2xl text-gray-500 text-sm dark:text-neutral-400">Execution metrics and optimization information.</p>
+        </div>
+        <div class="border-gray-200 border-t dark:border-neutral-700">
+          <dl>
+            <div class="sm:grid sm:gap-4 sm:grid-cols-3 px-4 py-5 sm:px-6 bg-gray-50 dark:bg-neutral-800">
+              <dt class="font-medium text-gray-500 text-sm dark:text-neutral-400">Memory Usage</dt>
+              <dd class="sm:col-span-2 mt-1 sm:mt-0 text-gray-900 text-sm dark:text-white">{{ queryMemoryUsage() }} MB</dd>
+            </div>
+            <div class="sm:grid sm:gap-4 sm:grid-cols-3 px-4 py-5 sm:px-6 bg-white dark:bg-neutral-900">
+              <dt class="font-medium text-gray-500 text-sm dark:text-neutral-400">Rows Affected</dt>
+              <dd class="sm:col-span-2 mt-1 sm:mt-0 text-gray-900 text-sm dark:text-white">{{ queryRowsAffected() }}</dd>
+            </div>
+            <div class="sm:grid sm:gap-4 sm:grid-cols-3 px-4 py-5 sm:px-6 bg-gray-50 dark:bg-neutral-800">
+              <dt class="font-medium text-gray-500 text-sm dark:text-neutral-400">Explain Plan</dt>
+              <dd class="sm:col-span-2 mt-1 sm:mt-0 text-gray-900 text-sm dark:text-white">
+                <pre class="overflow-x-auto p-3 font-mono text-gray-800 text-xs whitespace-pre-wrap dark:text-neutral-200 bg-gray-100 dark:bg-neutral-700 rounded-md">{{ queryExplainPlan() }}</pre>
+              </dd>
+            </div>
+            <div :show="hasOptimizationSuggestions" class="sm:grid sm:gap-4 sm:grid-cols-3 px-4 py-5 sm:px-6 bg-white dark:bg-neutral-900">
+              <dt class="font-medium text-gray-500 text-sm dark:text-neutral-400">Optimization Suggestions</dt>
+              <dd class="sm:col-span-2 mt-1 sm:mt-0 text-gray-900 text-sm dark:text-white">
+                <ul class="space-y-2">
+                  <template :for="suggestion in optimizationSuggestions">
+                    <li class="flex items-start">
+                      <div class="flex-shrink-0 mr-2 mt-0.5 h-5 w-5 text-yellow-500 i-hugeicons-lightbulb-02"></div>
+                      <span class="text-gray-800 text-sm dark:text-neutral-200">{{ suggestion }}</span>
+                    </li>
+                  </template>
+                </ul>
+              </dd>
+            </div>
+          </dl>
+        </div>
+      </div>
+
+      <div class="overflow-hidden bg-white dark:bg-neutral-900 sm:rounded-lg shadow">
+        <div class="px-4 py-5 sm:px-6">
+          <h3 class="font-semibold leading-6 text-base text-gray-900 dark:text-white">Tags</h3>
+        </div>
+        <div class="px-4 py-5 sm:px-6 border-gray-200 border-t dark:border-neutral-700">
+          <div class="flex flex-wrap gap-2">
+            <template :for="tag in queryTags">
+              <span class="inline-flex items-center px-2 py-1 font-medium text-gray-700 text-xs dark:text-neutral-300 bg-gray-50 dark:bg-neutral-800 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-700">{{ tag }}</span>
+            </template>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div :show="notFound" class="overflow-hidden bg-white dark:bg-neutral-900 sm:rounded-lg shadow">
+      <div class="px-4 py-5 sm:p-6 text-center">
+        <div class="mb-4 mx-auto h-12 w-12 text-gray-400 i-hugeicons-file-broken"></div>
+        <h3 class="font-semibold text-base text-gray-900 dark:text-white">Query not found</h3>
+        <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">The requested query could not be found or has been deleted.</p>
+        <div class="mt-6">
+          <StxLink to="/queries" class="inline-flex items-center px-3 py-2 font-semibold text-sm text-white bg-blue-600 hover:bg-blue-500 rounded-md shadow-sm">Return to Dashboard</StxLink>
+        </div>
+      </div>
+    </div>
+  </main>
+</div>
+
+<script client>
+interface QueryRecord {
+  id: string
+  query: string
+  duration: number
+  normalized_query: string
+  connection: string
+  status: 'completed' | 'failed' | 'slow'
+  error?: string
+  executed_at: string
+  bindings?: unknown[]
+  trace?: string
+  model?: string
+  method?: string
+  file?: string
+  line?: number
+  memory_usage?: number
+  rows_affected?: number
+  transaction_id?: string
+  tags?: string[]
+  optimization_suggestions?: string[]
+  affected_tables?: string[]
+  indexes_used?: string[]
+  missing_indexes?: string[]
+  explain_plan?: string
+}
+
+const route = useRoute()
+const isLoading = state(true)
+const query = state<QueryRecord | null>(null)
+
+const hasQuery = derived(() => !isLoading() && query() !== null)
+const notFound = derived(() => !isLoading() && query() === null)
+
+function queryStatus(): string { return query()?.status ?? '' }
+function queryText(): string { return query()?.query ?? '' }
+function queryNormalized(): string { return query()?.normalized_query ?? '' }
+function queryConnection(): string { return query()?.connection ?? '' }
+function queryExecutedAt(): string { return query()?.executed_at ?? '' }
+function queryMemoryUsage(): number { return query()?.memory_usage ?? 0 }
+function queryRowsAffected(): number { return query()?.rows_affected ?? 0 }
+function queryExplainPlan(): string { return query()?.explain_plan ?? '' }
+function queryTags(): string[] { return query()?.tags ?? [] }
+function affectedTables(): string[] { return query()?.affected_tables ?? [] }
+function indexesUsed(): string[] { return query()?.indexes_used ?? [] }
+function missingIndexes(): string[] { return query()?.missing_indexes ?? [] }
+function optimizationSuggestions(): string[] { return query()?.optimization_suggestions ?? [] }
+function querySource(): string {
+  const q = query()
+  if (q?.model && q?.method)
+    return `${q.model}.${q.method}`
+  return 'Unknown Source'
+}
+function queryFileLine(): string {
+  const q = query()
+  if (!q?.file)
+    return ''
+  return `${q.file}:${q.line ?? ''}`
+}
+function formattedDuration(): string {
+  return `${(query()?.duration ?? 0).toFixed(2)} ms`
+}
+function queryBindings(): string {
+  return JSON.stringify(query()?.bindings ?? [], null, 2)
+}
+
+const hasBindings = derived(() => (query()?.bindings?.length ?? 0) > 0)
+const noBindings = derived(() => (query()?.bindings?.length ?? 0) === 0)
+const hasIndexesUsed = derived(() => (query()?.indexes_used?.length ?? 0) > 0)
+const noIndexesUsed = derived(() => (query()?.indexes_used?.length ?? 0) === 0)
+const hasMissingIndexes = derived(() => (query()?.missing_indexes?.length ?? 0) > 0)
+const noMissingIndexes = derived(() => (query()?.missing_indexes?.length ?? 0) === 0)
+const hasOptimizationSuggestions = derived(() => (query()?.optimization_suggestions?.length ?? 0) > 0)
+
+const statusColors: Record<string, string> = {
+  completed: 'text-green-700 dark:text-green-300 bg-green-50 dark:bg-green-900/50 ring-green-600/20',
+  slow: 'text-yellow-700 dark:text-yellow-300 bg-yellow-50 dark:bg-yellow-900/50 ring-yellow-600/20',
+  failed: 'text-red-700 dark:text-red-300 bg-red-50 dark:bg-red-900/50 ring-red-600/20',
+}
+
+const queryTypeBadges: Record<string, string> = {
+  SELECT: 'bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300 ring-blue-700/10 dark:ring-blue-400/30',
+  INSERT: 'bg-green-50 dark:bg-green-900/20 text-green-700 dark:text-green-300 ring-green-700/10 dark:ring-green-400/30',
+  UPDATE: 'bg-amber-50 dark:bg-amber-900/20 text-amber-700 dark:text-amber-300 ring-amber-700/10 dark:ring-amber-400/30',
+  DELETE: 'bg-red-50 dark:bg-red-900/20 text-red-700 dark:text-red-300 ring-red-700/10 dark:ring-red-400/30',
+  OTHER: 'bg-gray-50 dark:bg-neutral-900/20 text-gray-700 dark:text-neutral-300 ring-gray-700/10 dark:ring-neutral-400/30',
+}
+
+function getStatusColor(status: string): string {
+  return statusColors[status] || 'text-gray-700 dark:text-neutral-300 bg-gray-50 dark:bg-neutral-900/50 ring-gray-600/20'
+}
+
+function queryType(): string {
+  const upper = queryText().trim().toUpperCase()
+  if (upper.startsWith('SELECT'))
+    return 'SELECT'
+  if (upper.startsWith('INSERT'))
+    return 'INSERT'
+  if (upper.startsWith('UPDATE'))
+    return 'UPDATE'
+  if (upper.startsWith('DELETE'))
+    return 'DELETE'
+  return 'OTHER'
+}
+
+function queryTypeBadgeClass(): string {
+  return queryTypeBadges[queryType()] || queryTypeBadges.OTHER as string
+}
+
+function goBack(): void {
+  if (typeof window !== 'undefined' && window.history.length > 1)
+    window.history.back()
+  else
+    navigate('/queries')
+}
+
+async function fetchQuery(id: string): Promise<void> {
+  isLoading.set(true)
+  await new Promise(resolve => setTimeout(resolve, 500))
+
+  if (id === '1') {
+    query.set({
+      id: '1',
+      query: 'SELECT * FROM users WHERE email = ? LIMIT 1',
+      normalized_query: 'SELECT * FROM users WHERE email = ? LIMIT ?',
+      duration: 3.2,
+      connection: 'mysql',
+      status: 'completed',
+      executed_at: '2024-03-14 10:16:32',
+      bindings: ['user@example.com', 1],
+      model: 'User',
+      method: 'findByEmail',
+      file: 'app/Models/User.php',
+      line: 45,
+      memory_usage: 2.4,
+      rows_affected: 1,
+      tags: ['auth'],
+      affected_tables: ['users'],
+      indexes_used: ['users.email_index'],
+      missing_indexes: [],
+      explain_plan: 'EXPLAIN: id-1, select_type-SIMPLE, table-users, partitions-NULL, type-ref, possible_keys-email_index, key-email_index, key_len-767, ref-const, rows-1, filtered-100.00, Extra-Using where',
+    })
+  }
+  else if (id === '2') {
+    query.set({
+      id: '2',
+      query: 'SELECT p.*, c.name as category_name FROM posts p JOIN categories c ON p.category_id = c.id WHERE p.published_at IS NOT NULL ORDER BY p.published_at DESC LIMIT 10',
+      normalized_query: 'SELECT p.*, c.name as category_name FROM posts p JOIN categories c ON p.category_id = c.id WHERE p.published_at IS NOT NULL ORDER BY p.published_at DESC LIMIT ?',
+      duration: 45.7,
+      connection: 'mysql',
+      status: 'slow',
+      executed_at: '2024-03-14 10:15:30',
+      bindings: [10],
+      model: 'Post',
+      method: 'getRecentPublishedWithCategory',
+      file: 'app/Models/Post.php',
+      line: 78,
+      memory_usage: 5.8,
+      rows_affected: 10,
+      tags: ['content', 'frontend'],
+      affected_tables: ['posts', 'categories'],
+      indexes_used: ['categories.primary'],
+      missing_indexes: ['posts.published_at'],
+      optimization_suggestions: [
+        'Add index on posts.published_at column',
+        'Consider paginating results',
+        'Limit selected columns instead of using SELECT *',
+      ],
+      explain_plan: 'EXPLAIN: id-1, select_type-SIMPLE, table-p, partitions-NULL, type-ALL, possible_keys-NULL, key-NULL, key_len-NULL, ref-NULL, rows-200, filtered-50.00, Extra-Using where; Using filesort...',
+    })
+  }
+  else {
+    query.set({
+      id,
+      query: 'SELECT * FROM example_table WHERE id = ?',
+      normalized_query: 'SELECT * FROM example_table WHERE id = ?',
+      duration: 5.2,
+      connection: 'mysql',
+      status: 'completed',
+      executed_at: '2024-03-14 10:00:00',
+      bindings: [id],
+      model: 'Example',
+      method: 'findById',
+      file: 'app/Models/Example.php',
+      line: 42,
+      memory_usage: 1.5,
+      rows_affected: 1,
+      tags: ['example'],
+      affected_tables: ['example_table'],
+      indexes_used: ['example_table.primary'],
+      missing_indexes: [],
+      explain_plan: 'EXPLAIN: id-1, select_type-SIMPLE, table-example_table, partitions-NULL, type-const, possible_keys-PRIMARY, key-PRIMARY, key_len-4, ref-const, rows-1, filtered-100.00',
+    })
+  }
+
+  isLoading.set(false)
+}
+
+onMount(async () => {
+  const id = route.params.id as string
+  await fetchQuery(id)
+})
+</script>
+
+@endsection

package/views/dashboard/queries/history.stx

@@ -0,0 +1,227 @@
+@extends('layouts/default')
+
+@section('content')
+@title('Queries - History')
+<div class="min-h-screen">
+  <header class="flex sticky top-0 z-10 flex-wrap gap-6 items-center justify-between px-4 py-4 sm:px-6 lg:px-8 bg-white dark:bg-neutral-900 shadow-sm">
+    <div>
+      <h1 class="font-semibold leading-7 text-gray-900 text-lg dark:text-white">Query History</h1>
+      <p class="mt-1 leading-6 text-gray-500 text-sm dark:text-neutral-400">View and analyze past database queries</p>
+    </div>
+    <div class="flex flex-wrap gap-3 items-center">
+      <div class="inline-flex rounded-md shadow-sm">
+        <button type="button" @click="setTimeRange('day')" class="inline-flex relative items-center px-3 py-2 font-medium text-sm rounded-l-md ring-1 ring-gray-300 ring-inset dark:ring-neutral-700 {{ timeRange() === 'day' ? 'bg-blue-600 text-white' : 'bg-white text-gray-700 dark:bg-neutral-800 dark:text-neutral-200 hover:bg-gray-50 dark:hover:bg-neutral-700' }}">Day</button>
+        <button type="button" @click="setTimeRange('week')" class="inline-flex relative items-center -ml-px px-3 py-2 font-medium text-sm ring-1 ring-gray-300 ring-inset dark:ring-neutral-700 {{ timeRange() === 'week' ? 'bg-blue-600 text-white' : 'bg-white text-gray-700 dark:bg-neutral-800 dark:text-neutral-200 hover:bg-gray-50 dark:hover:bg-neutral-700' }}">Week</button>
+        <button type="button" @click="setTimeRange('month')" class="inline-flex relative items-center -ml-px px-3 py-2 font-medium text-sm rounded-r-md ring-1 ring-gray-300 ring-inset dark:ring-neutral-700 {{ timeRange() === 'month' ? 'bg-blue-600 text-white' : 'bg-white text-gray-700 dark:bg-neutral-800 dark:text-neutral-200 hover:bg-gray-50 dark:hover:bg-neutral-700' }}">Month</button>
+      </div>
+      <div>
+        <select id="connection" name="connection" x-model="selectedConnection" class="block pl-3 pr-10 py-2 w-full text-sm dark:text-neutral-200 bg-white dark:bg-neutral-800 border-gray-300 rounded-md dark:border-neutral-700 focus:border-blue-600 focus:outline-none focus:ring-blue-600">
+          <option value="all">All connections</option>
+          <option value="mysql">MySQL</option>
+          <option value="postgres">PostgreSQL</option>
+          <option value="sqlite">SQLite</option>
+          <option value="mongodb">MongoDB</option>
+        </select>
+      </div>
+      <div>
+        <select id="status" name="status" x-model="selectedStatus" class="block pl-3 pr-10 py-2 w-full text-sm dark:text-neutral-200 bg-white dark:bg-neutral-800 border-gray-300 rounded-md dark:border-neutral-700 focus:border-blue-600 focus:outline-none focus:ring-blue-600">
+          <option value="all">All statuses</option>
+          <option value="completed">Completed</option>
+          <option value="slow">Slow</option>
+          <option value="failed">Failed</option>
+        </select>
+      </div>
+      <div>
+        <select id="type" name="type" x-model="selectedType" class="block pl-3 pr-10 py-2 w-full text-sm dark:text-neutral-200 bg-white dark:bg-neutral-800 border-gray-300 rounded-md dark:border-neutral-700 focus:border-blue-600 focus:outline-none focus:ring-blue-600">
+          <option value="all">All types</option>
+          <option value="SELECT">SELECT</option>
+          <option value="INSERT">INSERT</option>
+          <option value="UPDATE">UPDATE</option>
+          <option value="DELETE">DELETE</option>
+          <option value="OTHER">OTHER</option>
+        </select>
+      </div>
+      <div class="relative w-full sm:w-auto">
+        <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
+          <div class="h-5 w-5 text-gray-400 i-hugeicons-search-01"></div>
+        </div>
+        <input type="text" x-model="searchQuery" placeholder="Search queries..." class="block pl-10 py-2 w-full text-sm dark:text-neutral-200 bg-white dark:bg-neutral-800 border-gray-300 rounded-md dark:border-neutral-700 focus:border-blue-600 focus:outline-none focus:ring-blue-600" />
+      </div>
+    </div>
+  </header>
+
+  <main class="px-4 py-8 sm:px-6 lg:px-8">
+    <div class="mt-4">
+      <div class="relative">
+        <div :show="isLoading" class="flex absolute inset-0 z-10 items-center justify-center bg-white/50 dark:bg-neutral-900/50">
+          <div class="h-8 w-8 text-blue-600 dark:text-blue-400 animate-spin i-hugeicons-loading-01"></div>
+        </div>
+        <div class="overflow-hidden ring-1 ring-black ring-opacity-5 sm:rounded-lg shadow">
+          <table class="min-w-full divide-gray-300 divide-y dark:divide-neutral-700">
+            <thead class="bg-gray-50 dark:bg-neutral-800">
+              <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-white">Query</th>
+                <th scope="col" class="hidden lg:table-cell px-3 py-3.5 font-semibold text-gray-900 text-left text-sm dark:text-white">Connection</th>
+                <th scope="col" class="hidden sm:table-cell px-3 py-3.5 font-semibold text-gray-900 text-left text-sm dark:text-white">Duration</th>
+                <th scope="col" class="hidden lg:table-cell px-3 py-3.5 font-semibold text-gray-900 text-left text-sm dark:text-white">Model / Method</th>
+                <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm dark:text-white">Status</th>
+                <th scope="col" class="hidden sm:table-cell px-3 py-3.5 font-semibold text-gray-900 text-left text-sm dark:text-white">Executed At</th>
+                <th scope="col" class="relative pl-3 pr-4 py-3.5 sm:pr-6"><span class="sr-only">View</span></th>
+              </tr>
+            </thead>
+            <tbody class="bg-white dark:bg-neutral-900 divide-gray-200 divide-y dark:divide-neutral-700">
+              <template :for="query in filteredQueries">
+                <tr>
+                  <td class="pl-4 pr-3 py-4 sm:pl-6 text-sm">
+                    <div class="flex gap-2 items-center mb-1">
+                      <span class="{{ queryTypeBadgeClass(query.query) }} inline-flex items-center px-2 py-1 font-medium text-xs ring-1 ring-inset rounded-md">{{ getQueryType(query.query) }}</span>
+                      <div class="overflow-hidden font-medium font-mono text-ellipsis text-gray-900 text-xs dark:text-white" title="{{ query.query }}">{{ formatQuery(query.query) }}</div>
+                    </div>
+                    <div class="hidden xl:block mt-1 text-gray-500 dark:text-neutral-400">
+                      <template :for="tag in query.tags">
+                        <span class="inline-flex items-center mr-1 px-2 py-1 font-medium text-xs rounded-md">{{ tag }}</span>
+                      </template>
+                    </div>
+                  </td>
+                  <td class="hidden lg:table-cell px-3 py-4 text-gray-500 text-sm dark:text-neutral-400">{{ query.connection }}</td>
+                  <td class="hidden sm:table-cell px-3 py-4 text-gray-500 text-sm dark:text-neutral-400 {{ query.duration > 10 ? 'text-yellow-600 dark:text-yellow-400' : '' }}">{{ formatDuration(query.duration) }}</td>
+                  <td class="hidden lg:table-cell px-3 py-4 text-gray-500 text-sm dark:text-neutral-400">
+                    <div>{{ query.model || '-' }}</div>
+                    <div class="text-gray-400 text-xs dark:text-neutral-500">{{ query.method || '-' }}</div>
+                  </td>
+                  <td class="px-3 py-4 text-sm">
+                    <span class="{{ getQueryStatusColor(query.status) }} inline-flex items-center px-2 py-1 font-medium text-xs ring-1 ring-inset rounded-md">{{ query.status }}</span>
+                  </td>
+                  <td class="hidden sm:table-cell px-3 py-4 text-gray-500 text-sm dark:text-neutral-400">{{ query.executed_at }}</td>
+                  <td class="relative pl-3 pr-4 py-4 sm:pr-6 font-medium text-right text-sm">
+                    <StxLink to="/queries/{{ query.id }}" class="text-blue-600 dark:text-blue-400 hover:text-blue-900 dark:hover:text-blue-300">View<span class="sr-only">, {{ query.id }}</span></StxLink>
+                  </td>
+                </tr>
+              </template>
+              <tr :show="hasNoQueries">
+                <td colspan="7" class="py-8 text-center text-gray-500 text-sm dark:text-neutral-400">No queries found matching your criteria.</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  </main>
+</div>
+
+<script client>
+interface QueryRecord {
+  id: string
+  query: string
+  duration: number
+  normalized_query: string
+  connection: string
+  status: 'completed' | 'failed' | 'slow'
+  error?: string
+  executed_at: string
+  bindings?: unknown[]
+  model?: string
+  method?: string
+  file?: string
+  line?: number
+  memory_usage?: number
+  rows_affected?: number
+  tags?: string[]
+}
+
+const queryHistory = state<QueryRecord[]>([
+  { id: '1', query: 'SELECT * FROM users WHERE email = ? LIMIT 1', normalized_query: 'SELECT * FROM users WHERE email = ? LIMIT ?', duration: 3.2, connection: 'mysql', status: 'completed', executed_at: '2024-03-14 10:16:32', bindings: ['user@example.com', 1], model: 'User', method: 'findByEmail', file: 'app/Models/User.php', line: 45, memory_usage: 2.4, rows_affected: 1, tags: ['auth'] },
+  { id: '2', query: 'SELECT p.*, c.name as category_name FROM posts p JOIN categories c ON p.category_id = c.id WHERE p.published_at IS NOT NULL ORDER BY p.published_at DESC LIMIT 10', normalized_query: 'SELECT p.*, c.name as category_name FROM posts p JOIN categories c ON p.category_id = c.id WHERE p.published_at IS NOT NULL ORDER BY p.published_at DESC LIMIT ?', duration: 45.7, connection: 'mysql', status: 'slow', executed_at: '2024-03-14 10:15:30', bindings: [10], model: 'Post', method: 'getRecentPublishedWithCategory', file: 'app/Models/Post.php', line: 78, memory_usage: 5.8, rows_affected: 10, tags: ['content', 'frontend'] },
+  { id: '3', query: 'INSERT INTO user_logs (user_id, action, ip_address, created_at) VALUES (?, ?, ?, ?)', normalized_query: 'INSERT INTO user_logs (user_id, action, ip_address, created_at) VALUES (?, ?, ?, ?)', duration: 2.1, connection: 'mysql', status: 'completed', executed_at: '2024-03-14 10:14:55', bindings: [42, 'login', '192.168.1.1', '2024-03-14 10:14:55'], model: 'UserLog', method: 'logAction', file: 'app/Services/LogService.php', line: 28, memory_usage: 1.8, rows_affected: 1, tags: ['logging'] },
+  { id: '4', query: 'UPDATE products SET stock = stock - 1 WHERE id = ? AND stock > 0', normalized_query: 'UPDATE products SET stock = stock - ? WHERE id = ? AND stock > ?', duration: 4.5, connection: 'mysql', status: 'completed', executed_at: '2024-03-14 10:12:18', bindings: [1, 156, 0], model: 'Product', method: 'decrementStock', file: 'app/Models/Product.php', line: 112, memory_usage: 2.1, rows_affected: 1, tags: ['inventory', 'order'] },
+  { id: '5', query: 'DELETE FROM carts WHERE user_id = ? AND updated_at < ?', normalized_query: 'DELETE FROM carts WHERE user_id = ? AND updated_at < ?', duration: 2.8, connection: 'mysql', status: 'completed', executed_at: '2024-03-14 10:10:05', bindings: [78, '2024-03-13 10:10:05'], model: 'Cart', method: 'clearOldCarts', file: 'app/Jobs/ClearOldCarts.php', line: 35, memory_usage: 1.9, rows_affected: 3, tags: ['cleanup', 'scheduled'] },
+  { id: '6', query: 'SELECT COUNT(*) FROM orders WHERE status = ?', normalized_query: 'SELECT COUNT(*) FROM orders WHERE status = ?', duration: 78.4, connection: 'mysql', status: 'slow', executed_at: '2024-03-14 10:08:22', bindings: ['pending'], model: 'Order', method: 'countPendingOrders', file: 'app/Models/Order.php', line: 67, memory_usage: 3.1, rows_affected: 1, tags: ['reporting'] },
+  { id: '7', query: 'SELECT AVG(total) FROM orders WHERE created_at BETWEEN ? AND ?', normalized_query: 'SELECT AVG(total) FROM orders WHERE created_at BETWEEN ? AND ?', duration: 65.2, connection: 'mysql', status: 'slow', executed_at: '2024-03-14 10:05:11', bindings: ['2023-03-01 00:00:00', '2023-03-31 23:59:59'], model: 'Order', method: 'getAverageOrderTotal', file: 'app/Reports/MonthlyReport.php', line: 134, memory_usage: 4.2, rows_affected: 1, tags: ['reporting', 'monthly'] },
+  { id: '8', query: 'UPDATE users SET last_login_at = ? WHERE id = ?', normalized_query: 'UPDATE users SET last_login_at = ? WHERE id = ?', duration: 3.5, connection: 'mysql', status: 'completed', executed_at: '2024-03-14 10:02:47', bindings: ['2024-03-14 10:02:47', 42], model: 'User', method: 'updateLastLogin', file: 'app/Http/Controllers/Auth/LoginController.php', line: 89, memory_usage: 1.7, rows_affected: 1, tags: ['auth'] },
+  { id: '9', query: 'SELECT * FROM failed_jobs', normalized_query: 'SELECT * FROM failed_jobs', duration: 12.8, connection: 'mysql', status: 'completed', executed_at: '2024-03-14 10:00:00', bindings: [], method: 'listFailedJobs', file: 'app/Console/Commands/ListFailedJobs.php', line: 42, memory_usage: 2.9, rows_affected: 5, tags: ['jobs', 'console'] },
+  { id: '10', query: 'TRUNCATE TABLE cache', normalized_query: 'TRUNCATE TABLE cache', duration: 125.3, connection: 'mysql', status: 'slow', executed_at: '2024-03-14 09:55:00', bindings: [], method: 'flush', file: 'app/Console/Commands/CacheClear.php', line: 28, memory_usage: 1.5, rows_affected: 0, tags: ['cache', 'console'] },
+  { id: '11', query: 'SELECT * FROM users WHERE role = ? AND last_login_at < ? LIMIT 100', normalized_query: 'SELECT * FROM users WHERE role = ? AND last_login_at < ? LIMIT ?', duration: 8.7, connection: 'mysql', status: 'completed', executed_at: '2024-03-14 09:50:12', bindings: ['customer', '2023-03-14 09:50:12', 100], model: 'User', method: 'getInactiveCustomers', file: 'app/Jobs/SendInactiveCustomerEmail.php', line: 37, memory_usage: 6.4, rows_affected: 23, tags: ['email', 'scheduled'] },
+  { id: '12', query: 'SELECT * FROM products WHERE stock < ? LIMIT 50', normalized_query: 'SELECT * FROM products WHERE stock < ? LIMIT ?', duration: 7.2, connection: 'mysql', status: 'completed', executed_at: '2024-03-14 09:45:00', bindings: [10, 50], model: 'Product', method: 'getLowStockProducts', file: 'app/Console/Commands/SendLowStockAlert.php', line: 45, memory_usage: 4.8, rows_affected: 12, tags: ['inventory', 'console'] },
+])
+
+const timeRange = state('day')
+const selectedConnection = state('all')
+const selectedStatus = state('all')
+const selectedType = state('all')
+const searchQuery = state('')
+const isLoading = state(false)
+
+const queryStatusColors: Record<string, string> = {
+  completed: 'text-green-700 dark:text-green-300 bg-green-50 dark:bg-green-900/50 ring-green-600/20',
+  slow: 'text-yellow-700 dark:text-yellow-300 bg-yellow-50 dark:bg-yellow-900/50 ring-yellow-600/20',
+  failed: 'text-red-700 dark:text-red-300 bg-red-50 dark:bg-red-900/50 ring-red-600/20',
+}
+
+const queryTypeBadges: Record<string, string> = {
+  SELECT: 'bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300 ring-blue-700/10 dark:ring-blue-400/30',
+  INSERT: 'bg-green-50 dark:bg-green-900/20 text-green-700 dark:text-green-300 ring-green-700/10 dark:ring-green-400/30',
+  UPDATE: 'bg-amber-50 dark:bg-amber-900/20 text-amber-700 dark:text-amber-300 ring-amber-700/10 dark:ring-amber-400/30',
+  DELETE: 'bg-red-50 dark:bg-red-900/20 text-red-700 dark:text-red-300 ring-red-700/10 dark:ring-red-400/30',
+  OTHER: 'bg-gray-50 dark:bg-neutral-900/20 text-gray-700 dark:text-neutral-300 ring-gray-700/10 dark:ring-neutral-400/30',
+}
+
+function setTimeRange(range: string): void {
+  timeRange.set(range)
+}
+
+function getQueryType(query: string): string {
+  const upper = query.trim().toUpperCase()
+  if (upper.startsWith('SELECT'))
+    return 'SELECT'
+  if (upper.startsWith('INSERT'))
+    return 'INSERT'
+  if (upper.startsWith('UPDATE'))
+    return 'UPDATE'
+  if (upper.startsWith('DELETE'))
+    return 'DELETE'
+  return 'OTHER'
+}
+
+function queryTypeBadgeClass(query: string): string {
+  return queryTypeBadges[getQueryType(query)] || queryTypeBadges.OTHER as string
+}
+
+function getQueryStatusColor(status: string): string {
+  return queryStatusColors[status] || 'text-gray-700 dark:text-neutral-300 bg-gray-50 dark:bg-neutral-900/50 ring-gray-600/20'
+}
+
+function formatQuery(q: string): string {
+  return q.length > 100 ? `${q.substring(0, 100)}...` : q
+}
+
+function formatDuration(d: number): string {
+  return `${d.toFixed(2)} ms`
+}
+
+const filteredQueries = derived(() => {
+  let list = [...queryHistory()]
+  const conn = selectedConnection()
+  const status = selectedStatus()
+  const type = selectedType()
+  const q = searchQuery().toLowerCase()
+
+  if (conn !== 'all')
+    list = list.filter(qy => qy.connection === conn)
+  if (status !== 'all')
+    list = list.filter(qy => qy.status === status)
+  if (type !== 'all')
+    list = list.filter(qy => getQueryType(qy.query) === type)
+  if (q) {
+    list = list.filter(qy =>
+      qy.query.toLowerCase().includes(q)
+      || (qy.model?.toLowerCase().includes(q) ?? false)
+      || (qy.method?.toLowerCase().includes(q) ?? false),
+    )
+  }
+  return list
+})
+
+const hasNoQueries = derived(() => filteredQueries().length === 0)
+</script>
+
+@endsection