@littlebearapps/platform-admin-sdk 1.4.2 → 2.0.0

package/templates/standard/dashboard/src/components/errors/ErrorsTable.tsx

@@ -0,0 +1,133 @@
+import { useState, useEffect } from 'react';
+
+interface ErrorRow {
+  fingerprint: string;
+  message: string;
+  script_name: string;
+  priority: string;
+  occurrence_count: number;
+  status: string;
+  first_seen_at: string;
+  last_seen_at: string;
+  github_issue_url: string | null;
+}
+
+const priorityColours: Record<string, string> = {
+  P0: 'bg-red-100 text-red-800 dark:bg-red-900/50 dark:text-red-300',
+  P1: 'bg-orange-100 text-orange-800 dark:bg-orange-900/50 dark:text-orange-300',
+  P2: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/50 dark:text-yellow-300',
+  P3: 'bg-blue-100 text-blue-800 dark:bg-blue-900/50 dark:text-blue-300',
+  P4: 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300',
+};
+
+export function ErrorsTable() {
+  const [errors, setErrors] = useState<ErrorRow[]>([]);
+  const [total, setTotal] = useState(0);
+  const [page, setPage] = useState(1);
+  const [filterPriority, setFilterPriority] = useState<string>('');
+  const [sortField, setSortField] = useState<'priority' | 'occurrence_count' | 'last_seen_at'>('priority');
+
+  useEffect(() => {
+    const params = new URLSearchParams({ page: String(page), limit: '20' });
+    if (filterPriority) params.set('priority', filterPriority);
+
+    fetch(`/api/errors?${params}`)
+      .then(res => res.json())
+      .then((data: { errors: ErrorRow[]; total: number }) => {
+        setErrors(data.errors ?? []);
+        setTotal(data.total ?? 0);
+      })
+      .catch(() => {});
+  }, [page, filterPriority]);
+
+  const sorted = [...errors].sort((a, b) => {
+    if (sortField === 'occurrence_count') return b.occurrence_count - a.occurrence_count;
+    if (sortField === 'last_seen_at') return new Date(b.last_seen_at).getTime() - new Date(a.last_seen_at).getTime();
+    return 0; // Default server sort by priority
+  });
+
+  return (
+    <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
+      <div className="p-4 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
+        <h3 className="text-sm font-medium text-gray-900 dark:text-white">
+          Errors ({total})
+        </h3>
+        <select
+          value={filterPriority}
+          onChange={(e) => { setFilterPriority(e.target.value); setPage(1); }}
+          className="text-sm border border-gray-300 dark:border-gray-600 rounded px-2 py-1 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
+        >
+          <option value="">All Priorities</option>
+          <option value="P0">P0</option>
+          <option value="P1">P1</option>
+          <option value="P2">P2</option>
+          <option value="P3">P3</option>
+          <option value="P4">P4</option>
+        </select>
+      </div>
+
+      <div className="overflow-x-auto">
+        <table className="w-full text-sm">
+          <thead>
+            <tr className="border-b border-gray-200 dark:border-gray-700">
+              <th className="text-left py-2 px-4 text-gray-500 dark:text-gray-400 font-medium">Priority</th>
+              <th className="text-left py-2 px-4 text-gray-500 dark:text-gray-400 font-medium">Message</th>
+              <th className="text-left py-2 px-4 text-gray-500 dark:text-gray-400 font-medium">Worker</th>
+              <th
+                className="text-right py-2 px-4 text-gray-500 dark:text-gray-400 font-medium cursor-pointer hover:text-gray-700 dark:hover:text-gray-200"
+                onClick={() => setSortField('occurrence_count')}
+              >
+                Count {sortField === 'occurrence_count' ? '↓' : ''}
+              </th>
+              <th
+                className="text-right py-2 px-4 text-gray-500 dark:text-gray-400 font-medium cursor-pointer hover:text-gray-700 dark:hover:text-gray-200"
+                onClick={() => setSortField('last_seen_at')}
+              >
+                Last Seen {sortField === 'last_seen_at' ? '↓' : ''}
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            {sorted.map((err) => (
+              <tr key={err.fingerprint} className="border-b border-gray-100 dark:border-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700/50">
+                <td className="py-2 px-4">
+                  <span className={`text-xs px-1.5 py-0.5 rounded font-medium ${priorityColours[err.priority] ?? priorityColours.P4}`}>
+                    {err.priority}
+                  </span>
+                </td>
+                <td className="py-2 px-4 text-gray-900 dark:text-white max-w-md truncate">{err.message}</td>
+                <td className="py-2 px-4 text-gray-500 dark:text-gray-400 font-mono text-xs">{err.script_name}</td>
+                <td className="py-2 px-4 text-right text-gray-900 dark:text-white">{err.occurrence_count}</td>
+                <td className="py-2 px-4 text-right text-gray-500 dark:text-gray-400 text-xs">
+                  {new Date(err.last_seen_at).toLocaleDateString('en-AU', { day: 'numeric', month: 'short', hour: '2-digit', minute: '2-digit' })}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+
+      {total > 20 && (
+        <div className="p-4 border-t border-gray-200 dark:border-gray-700 flex items-center justify-between">
+          <button
+            onClick={() => setPage(p => Math.max(1, p - 1))}
+            disabled={page === 1}
+            className="text-sm text-blue-600 dark:text-blue-400 disabled:opacity-50"
+          >
+            Previous
+          </button>
+          <span className="text-sm text-gray-500 dark:text-gray-400">
+            Page {page} of {Math.ceil(total / 20)}
+          </span>
+          <button
+            onClick={() => setPage(p => p + 1)}
+            disabled={page >= Math.ceil(total / 20)}
+            className="text-sm text-blue-600 dark:text-blue-400 disabled:opacity-50"
+          >
+            Next
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}

package/templates/standard/dashboard/src/components/errors/index.ts

@@ -0,0 +1,2 @@
+export { ErrorsTable } from './ErrorsTable';
+export { ErrorStats } from './ErrorStats';

package/templates/standard/dashboard/src/components/health/CircuitBreakerEvents.tsx

@@ -0,0 +1,69 @@
+import { useState, useEffect } from 'react';
+import { EmptyState } from '../../components/ui/EmptyState';
+import { LoadingSkeleton } from '../../components/ui/LoadingSkeleton';
+
+interface CBEvent {
+  id: number;
+  feature_key: string;
+  event_type: string;
+  old_status: string;
+  new_status: string;
+  reason: string | null;
+  timestamp: string;
+}
+
+export function CircuitBreakerEvents() {
+  const [events, setEvents] = useState<CBEvent[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetch('/api/usage/circuit-breakers')
+      .then(res => res.json())
+      .then((data: { events?: CBEvent[] }) => { setEvents(data.events ?? []); setLoading(false); })
+      .catch(() => setLoading(false));
+  }, []);
+
+  if (loading) return <LoadingSkeleton lines={3} />;
+
+  if (events.length === 0) {
+    return (
+      <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4">
+        <h3 className="text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-3">
+          CB Event History
+        </h3>
+        <EmptyState title="No events" description="No circuit breaker state changes recorded." />
+      </div>
+    );
+  }
+
+  return (
+    <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4">
+      <h3 className="text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-3">
+        CB Event History
+      </h3>
+      <div className="space-y-2">
+        {events.map(ev => (
+          <div key={ev.id} className="flex items-start gap-3 py-1.5 border-b border-gray-100 dark:border-gray-700 last:border-0">
+            <div className={`mt-1 w-2 h-2 rounded-full shrink-0 ${
+              ev.new_status === 'active' ? 'bg-green-500'
+                : ev.new_status === 'warning' ? 'bg-yellow-500'
+                : 'bg-red-500'
+            }`} />
+            <div className="min-w-0">
+              <p className="text-sm text-gray-900 dark:text-white">
+                <span className="font-medium">{ev.feature_key}</span>
+                {' '}{ev.old_status} &rarr; {ev.new_status}
+              </p>
+              {ev.reason && (
+                <p className="text-xs text-gray-500 dark:text-gray-400 truncate">{ev.reason}</p>
+              )}
+              <p className="text-xs text-gray-400 dark:text-gray-500">
+                {new Date(ev.timestamp).toLocaleString()}
+              </p>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/templates/standard/dashboard/src/components/health/CircuitBreakerPanel.tsx

@@ -0,0 +1,97 @@
+import { useState, useEffect, useCallback } from 'react';
+import { LoadingSkeleton } from '../../components/ui/LoadingSkeleton';
+
+interface CircuitBreaker {
+  key: string;
+  feature: string;
+  status: string;
+  reason: string | null;
+  level: 'global' | 'project' | 'feature';
+}
+
+export function CircuitBreakerPanel() {
+  const [breakers, setBreakers] = useState<CircuitBreaker[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  const loadBreakers = useCallback(() => {
+    fetch('/api/usage/circuit-breakers')
+      .then(res => res.json())
+      .then((data: { breakers: CircuitBreaker[] }) => {
+        const enriched = (data.breakers ?? []).map(cb => ({
+          ...cb,
+          level: (cb.key.includes(':global:') ? 'global'
+            : cb.key.includes(':project:') ? 'project'
+            : 'feature') as CircuitBreaker['level'],
+        }));
+        setBreakers(enriched);
+        setLoading(false);
+      })
+      .catch(() => setLoading(false));
+  }, []);
+
+  useEffect(() => { loadBreakers(); }, [loadBreakers]);
+
+  if (loading) return <LoadingSkeleton lines={4} />;
+
+  const grouped = {
+    global: breakers.filter(b => b.level === 'global'),
+    project: breakers.filter(b => b.level === 'project'),
+    feature: breakers.filter(b => b.level === 'feature'),
+  };
+
+  const statusBadge = (status: string) => {
+    const styles = status === 'active'
+      ? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400'
+      : status === 'warning'
+        ? 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400'
+        : 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400';
+    return <span className={`text-xs px-2 py-0.5 rounded-full font-medium ${styles}`}>{status}</span>;
+  };
+
+  const renderGroup = (title: string, items: CircuitBreaker[]) => {
+    if (items.length === 0) return null;
+    return (
+      <div>
+        <h4 className="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-2">{title}</h4>
+        <div className="space-y-1.5">
+          {items.map(cb => (
+            <div key={cb.key} className="flex items-center justify-between py-1.5">
+              <div>
+                <span className="text-sm text-gray-900 dark:text-white">{cb.feature}</span>
+                {cb.reason && (
+                  <p className="text-xs text-gray-500 dark:text-gray-400">{cb.reason}</p>
+                )}
+              </div>
+              {statusBadge(cb.status)}
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4">
+      <div className="flex items-center justify-between mb-4">
+        <h3 className="text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide">
+          Circuit Breakers
+        </h3>
+        <button
+          onClick={loadBreakers}
+          className="text-xs text-blue-600 dark:text-blue-400 hover:underline"
+        >
+          Refresh
+        </button>
+      </div>
+      {breakers.length === 0 ? (
+        <p className="text-sm text-gray-500 dark:text-gray-400">No circuit breakers configured.</p>
+      ) : (
+        <div className="space-y-4">
+          {renderGroup('Global', grouped.global)}
+          {renderGroup('Project', grouped.project)}
+          {renderGroup('Feature', grouped.feature)}
+        </div>
+      )}
+    </div>
+  );
+}

package/templates/standard/dashboard/src/components/health/DlqStatusCard.tsx

@@ -0,0 +1,52 @@
+import { useState, useEffect } from 'react';
+
+interface DlqStatus {
+  depth: number;
+  oldestAgeMinutes: number | null;
+  status: 'healthy' | 'warning' | 'critical' | 'unknown';
+}
+
+export function DlqStatusCard() {
+  const [data, setData] = useState<DlqStatus | null>(null);
+
+  useEffect(() => {
+    fetch('/api/health/dlq')
+      .then(res => res.json())
+      .then((dlq: DlqStatus) => setData(dlq))
+      .catch(() => {});
+  }, []);
+
+  const statusColour = data?.status === 'healthy'
+    ? 'text-green-600 dark:text-green-400'
+    : data?.status === 'warning'
+      ? 'text-yellow-600 dark:text-yellow-400'
+      : data?.status === 'critical'
+        ? 'text-red-600 dark:text-red-400'
+        : 'text-gray-500 dark:text-gray-400';
+
+  return (
+    <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4">
+      <h3 className="text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-3">
+        Dead Letter Queue
+      </h3>
+      <div className="grid grid-cols-3 gap-4">
+        <div>
+          <div className="text-2xl font-bold text-gray-900 dark:text-white">{data?.depth ?? 0}</div>
+          <div className="text-xs text-gray-500 dark:text-gray-400">Pending</div>
+        </div>
+        <div>
+          <div className="text-2xl font-bold text-gray-900 dark:text-white">
+            {data?.oldestAgeMinutes != null ? `${data.oldestAgeMinutes}m` : '\u2014'}
+          </div>
+          <div className="text-xs text-gray-500 dark:text-gray-400">Oldest</div>
+        </div>
+        <div>
+          <div className={`text-2xl font-bold ${statusColour}`}>
+            {data?.status ?? 'Unknown'}
+          </div>
+          <div className="text-xs text-gray-500 dark:text-gray-400">Status</div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/standard/dashboard/src/components/health/HealthTabs.tsx

@@ -0,0 +1,86 @@
+import { useState, useEffect } from 'react';
+import { DlqStatusCard } from './DlqStatusCard';
+
+type Tab = 'overview' | 'workers' | 'queues' | 'storage';
+
+export function HealthTabs() {
+  const [activeTab, setActiveTab] = useState<Tab>('overview');
+  const [cbData, setCbData] = useState<Array<{
+    key: string;
+    feature: string;
+    status: string;
+    reason: string | null;
+  }>>([]);
+
+  useEffect(() => {
+    fetch('/api/usage/circuit-breakers')
+      .then(res => res.json())
+      .then((data: { breakers: typeof cbData }) => setCbData(data.breakers ?? []))
+      .catch(() => {});
+  }, []);
+
+  const tabs: { id: Tab; label: string }[] = [
+    { id: 'overview', label: 'Overview' },
+    { id: 'workers', label: 'Workers' },
+    { id: 'queues', label: 'Queues' },
+    { id: 'storage', label: 'Storage' },
+  ];
+
+  return (
+    <div>
+      <div className="border-b border-gray-200 dark:border-gray-700 mb-4">
+        <nav className="flex gap-4">
+          {tabs.map(tab => (
+            <button
+              key={tab.id}
+              onClick={() => setActiveTab(tab.id)}
+              className={`py-2 px-1 text-sm font-medium border-b-2 transition-colors ${
+                activeTab === tab.id
+                  ? 'border-blue-500 text-blue-600 dark:text-blue-400'
+                  : 'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300'
+              }`}
+            >
+              {tab.label}
+            </button>
+          ))}
+        </nav>
+      </div>
+
+      {activeTab === 'overview' && (
+        <div className="space-y-4">
+          <DlqStatusCard />
+          {/* Circuit Breakers */}
+          <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4">
+            <h3 className="text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-3">
+              Circuit Breakers
+            </h3>
+            {cbData.length === 0 ? (
+              <p className="text-sm text-gray-500 dark:text-gray-400">No circuit breakers configured.</p>
+            ) : (
+              <div className="space-y-2">
+                {cbData.map(cb => (
+                  <div key={cb.key} className="flex items-center justify-between py-1">
+                    <span className="text-sm text-gray-900 dark:text-white">{cb.feature}</span>
+                    <span className={`text-xs px-2 py-0.5 rounded-full font-medium ${
+                      cb.status === 'active' ? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400'
+                        : cb.status === 'warning' ? 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400'
+                          : 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400'
+                    }`}>
+                      {cb.status}
+                    </span>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+
+      {activeTab !== 'overview' && (
+        <div className="text-center py-8 text-gray-500 dark:text-gray-400">
+          <p>{activeTab} health details will appear here once monitoring data is collected.</p>
+        </div>
+      )}
+    </div>
+  );
+}

package/templates/standard/dashboard/src/components/health/index.ts

@@ -0,0 +1,4 @@
+export { HealthTabs } from './HealthTabs';
+export { DlqStatusCard } from './DlqStatusCard';
+export { CircuitBreakerPanel } from './CircuitBreakerPanel';
+export { CircuitBreakerEvents } from './CircuitBreakerEvents';

package/templates/standard/dashboard/src/lib/errors.ts

@@ -0,0 +1,28 @@
+export interface ErrorOccurrence {
+  fingerprint: string;
+  message: string;
+  script_name: string;
+  priority: string;
+  occurrence_count: number;
+  status: string;
+  first_seen_at: string;
+  last_seen_at: string;
+  github_issue_url: string | null;
+}
+
+export interface ErrorStats {
+  byPriority: Record<string, number>;
+  byWorker: Array<{ script_name: string; count: number }>;
+  total: number;
+}
+
+export function getPriorityColour(priority: string): string {
+  const colours: Record<string, string> = {
+    P0: 'bg-red-100 text-red-800 dark:bg-red-900/50 dark:text-red-300',
+    P1: 'bg-orange-100 text-orange-800 dark:bg-orange-900/50 dark:text-orange-300',
+    P2: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/50 dark:text-yellow-300',
+    P3: 'bg-blue-100 text-blue-800 dark:bg-blue-900/50 dark:text-blue-300',
+    P4: 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300',
+  };
+  return colours[priority] ?? colours.P4;
+}

package/templates/standard/dashboard/src/pages/api/errors/[fingerprint]/mute.ts

@@ -0,0 +1,49 @@
+import type { APIRoute } from 'astro';
+
+interface Env {
+  PLATFORM_DB?: D1Database;
+  PLATFORM_CACHE?: KVNamespace;
+}
+
+export const POST: APIRoute = async ({ locals, params }) => {
+  const env = locals.runtime?.env as Env | undefined;
+  const db = env?.PLATFORM_DB;
+  const kv = env?.PLATFORM_CACHE;
+  const fingerprint = params.fingerprint;
+
+  if (!fingerprint || !db) {
+    return new Response(JSON.stringify({ error: 'Missing fingerprint or database' }), {
+      status: 400,
+      headers: { 'Content-Type': 'application/json' },
+    });
+  }
+
+  try {
+    await db
+      .prepare(
+        `UPDATE error_occurrences
+         SET labels = CASE
+           WHEN labels IS NULL THEN 'cf:muted'
+           WHEN labels NOT LIKE '%cf:muted%' THEN labels || ',cf:muted'
+           ELSE labels
+         END
+         WHERE fingerprint = ?`
+      )
+      .bind(fingerprint)
+      .run();
+
+    // Also set KV flag for error-collector to skip
+    if (kv) {
+      await kv.put(`ERROR_FINGERPRINT:${fingerprint}:MUTED`, '1', { expirationTtl: 86400 * 30 });
+    }
+
+    return new Response(JSON.stringify({ ok: true }), {
+      headers: { 'Content-Type': 'application/json' },
+    });
+  } catch {
+    return new Response(JSON.stringify({ error: 'Failed to mute error' }), {
+      status: 500,
+      headers: { 'Content-Type': 'application/json' },
+    });
+  }
+};

package/templates/standard/dashboard/src/pages/api/errors/[fingerprint]/resolve.ts

@@ -0,0 +1,36 @@
+import type { APIRoute } from 'astro';
+
+interface Env {
+  PLATFORM_DB?: D1Database;
+}
+
+export const POST: APIRoute = async ({ locals, params }) => {
+  const env = locals.runtime?.env as Env | undefined;
+  const db = env?.PLATFORM_DB;
+  const fingerprint = params.fingerprint;
+
+  if (!fingerprint || !db) {
+    return new Response(JSON.stringify({ error: 'Missing fingerprint or database' }), {
+      status: 400,
+      headers: { 'Content-Type': 'application/json' },
+    });
+  }
+
+  try {
+    await db
+      .prepare(
+        `UPDATE error_occurrences SET status = 'resolved' WHERE fingerprint = ?`
+      )
+      .bind(fingerprint)
+      .run();
+
+    return new Response(JSON.stringify({ ok: true }), {
+      headers: { 'Content-Type': 'application/json' },
+    });
+  } catch {
+    return new Response(JSON.stringify({ error: 'Failed to resolve error' }), {
+      status: 500,
+      headers: { 'Content-Type': 'application/json' },
+    });
+  }
+};

package/templates/standard/dashboard/src/pages/api/errors/[fingerprint].ts

@@ -0,0 +1,55 @@
+import type { APIRoute } from 'astro';
+
+interface Env {
+  PLATFORM_DB?: D1Database;
+}
+
+export const GET: APIRoute = async ({ locals, params }) => {
+  const env = locals.runtime?.env as Env | undefined;
+  const db = env?.PLATFORM_DB;
+  const fingerprint = params.fingerprint;
+
+  if (!fingerprint) {
+    return new Response(JSON.stringify({ error: 'Missing fingerprint' }), {
+      status: 400,
+      headers: { 'Content-Type': 'application/json' },
+    });
+  }
+
+  if (!db) {
+    return new Response(JSON.stringify({ error: 'Database not available' }), {
+      status: 503,
+      headers: { 'Content-Type': 'application/json' },
+    });
+  }
+
+  try {
+    const row = await db
+      .prepare(
+        `SELECT fingerprint, normalized_message, script_name, priority, status,
+                occurrence_count, first_seen_at, last_seen_at, github_issue_url,
+                labels, error_category
+         FROM error_occurrences
+         WHERE fingerprint = ?
+         LIMIT 1`
+      )
+      .bind(fingerprint)
+      .first();
+
+    if (!row) {
+      return new Response(JSON.stringify({ error: 'Not found' }), {
+        status: 404,
+        headers: { 'Content-Type': 'application/json' },
+      });
+    }
+
+    return new Response(JSON.stringify(row), {
+      headers: { 'Content-Type': 'application/json', 'Cache-Control': 'max-age=30' },
+    });
+  } catch (error) {
+    return new Response(JSON.stringify({ error: 'Failed to fetch error detail' }), {
+      status: 500,
+      headers: { 'Content-Type': 'application/json' },
+    });
+  }
+};

package/templates/standard/dashboard/src/pages/api/errors/index.ts

@@ -0,0 +1,58 @@
+import type { APIRoute } from 'astro';
+
+export const GET: APIRoute = async ({ locals, url }) => {
+  const db = (locals.runtime?.env as { PLATFORM_DB?: D1Database } | undefined)?.PLATFORM_DB;
+
+  if (!db) {
+    return new Response(JSON.stringify({ errors: [], total: 0 }), {
+      headers: { 'Content-Type': 'application/json' },
+    });
+  }
+
+  const page = parseInt(url.searchParams.get('page') ?? '1');
+  const limit = Math.min(parseInt(url.searchParams.get('limit') ?? '20'), 100);
+  const offset = (page - 1) * limit;
+  const priority = url.searchParams.get('priority');
+  const status = url.searchParams.get('status') ?? 'open';
+
+  try {
+    let query = `SELECT fingerprint, normalized_message as message, script_name, priority,
+                        occurrence_count, status, first_seen_at, last_seen_at, github_issue_url
+                 FROM error_occurrences WHERE status = ?`;
+    const params: unknown[] = [status];
+
+    if (priority) {
+      query += ` AND priority = ?`;
+      params.push(priority);
+    }
+
+    query += ` ORDER BY
+      CASE priority WHEN 'P0' THEN 1 WHEN 'P1' THEN 2 WHEN 'P2' THEN 3 WHEN 'P3' THEN 4 ELSE 5 END,
+      last_seen_at DESC
+      LIMIT ? OFFSET ?`;
+    params.push(limit, offset);
+
+    const errors = await db.prepare(query).bind(...params).all();
+
+    const countQuery = priority
+      ? `SELECT COUNT(*) as total FROM error_occurrences WHERE status = ? AND priority = ? LIMIT 1`
+      : `SELECT COUNT(*) as total FROM error_occurrences WHERE status = ? LIMIT 1`;
+    const countParams = priority ? [status, priority] : [status];
+    const countResult = await db.prepare(countQuery).bind(...countParams).first<{ total: number }>();
+
+    return new Response(
+      JSON.stringify({
+        errors: errors.results ?? [],
+        total: countResult?.total ?? 0,
+        page,
+        limit,
+      }),
+      { headers: { 'Content-Type': 'application/json', 'Cache-Control': 'max-age=30' } }
+    );
+  } catch {
+    return new Response(JSON.stringify({ errors: [], total: 0, error: 'Query failed' }), {
+      status: 500,
+      headers: { 'Content-Type': 'application/json' },
+    });
+  }
+};