@littlebearapps/platform-admin-sdk 1.4.2 → 2.0.0

package/templates/full/dashboard/src/components/patterns/PatternStats.tsx

@@ -0,0 +1,60 @@
+import { useState, useEffect } from 'react';
+
+interface Stats {
+  pending: number;
+  shadow: number;
+  approved: number;
+  rejected: number;
+}
+
+export function PatternStats() {
+  const [stats, setStats] = useState<Stats | null>(null);
+
+  useEffect(() => {
+    Promise.all([
+      fetch('/api/patterns?status=pending').then(r => r.json()),
+      fetch('/api/patterns?status=shadow').then(r => r.json()),
+      fetch('/api/patterns?status=approved').then(r => r.json()),
+    ])
+      .then(([pending, shadow, approved]) => {
+        setStats({
+          pending: (pending as { suggestions: unknown[] }).suggestions?.length ?? 0,
+          shadow: (shadow as { suggestions: unknown[] }).suggestions?.length ?? 0,
+          approved: (approved as { suggestions: unknown[] }).suggestions?.length ?? 0,
+          rejected: 0,
+        });
+      })
+      .catch(() => {});
+  }, []);
+
+  if (!stats) {
+    return (
+      <div className="grid grid-cols-4 gap-4">
+        {Array.from({ length: 4 }).map((_, i) => (
+          <div key={i} className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4 animate-pulse">
+            <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-12 mb-2" />
+            <div className="h-8 bg-gray-200 dark:bg-gray-700 rounded w-8" />
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  const items = [
+    { label: 'Pending', value: stats.pending, colour: 'text-yellow-600 dark:text-yellow-400' },
+    { label: 'Shadow', value: stats.shadow, colour: 'text-purple-600 dark:text-purple-400' },
+    { label: 'Approved', value: stats.approved, colour: 'text-green-600 dark:text-green-400' },
+    { label: 'Rejected', value: stats.rejected, colour: 'text-red-600 dark:text-red-400' },
+  ];
+
+  return (
+    <div className="grid grid-cols-4 gap-4">
+      {items.map(item => (
+        <div key={item.label} className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4">
+          <div className="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">{item.label}</div>
+          <div className={`text-2xl font-bold mt-1 ${item.colour}`}>{item.value}</div>
+        </div>
+      ))}
+    </div>
+  );
+}

package/templates/full/dashboard/src/components/patterns/PatternTabs.tsx

@@ -0,0 +1,116 @@
+import { useState, useEffect } from 'react';
+import { EmptyState } from '../../components/ui/EmptyState';
+import { LoadingSkeleton } from '../../components/ui/LoadingSkeleton';
+
+type Tab = 'pending' | 'shadow' | 'approved' | 'rejected';
+
+interface Pattern {
+  id: number;
+  name: string;
+  description: string;
+  match_rule: string;
+  status: string;
+  source: string;
+  created_at: string;
+  match_count?: number;
+}
+
+export function PatternTabs() {
+  const [activeTab, setActiveTab] = useState<Tab>('pending');
+  const [patterns, setPatterns] = useState<Pattern[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    setLoading(true);
+    fetch(`/api/patterns?status=${activeTab}`)
+      .then(res => res.json())
+      .then((data: { patterns: Pattern[] }) => { setPatterns(data.patterns ?? []); setLoading(false); })
+      .catch(() => setLoading(false));
+  }, [activeTab]);
+
+  const tabs: { id: Tab; label: string }[] = [
+    { id: 'pending', label: 'Pending' },
+    { id: 'shadow', label: 'Shadow' },
+    { id: 'approved', label: 'Approved' },
+    { id: 'rejected', label: 'Rejected' },
+  ];
+
+  const handleAction = async (id: number, action: 'approve' | 'reject') => {
+    const endpoint = action === 'approve' ? '/api/patterns/approve' : '/api/patterns/reject';
+    try {
+      const res = await fetch(endpoint, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ id }),
+      });
+      if (res.ok) {
+        setPatterns(prev => prev.filter(p => p.id !== id));
+      }
+    } catch {
+      // Silent failure — user can retry
+    }
+  };
+
+  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>
+
+      {loading ? (
+        <LoadingSkeleton lines={4} />
+      ) : patterns.length === 0 ? (
+        <EmptyState title={`No ${activeTab} patterns`} description="Patterns will appear here as they are discovered." />
+      ) : (
+        <div className="space-y-3">
+          {patterns.map(p => (
+            <div key={p.id} className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4">
+              <div className="flex items-start justify-between gap-3">
+                <div className="min-w-0">
+                  <p className="text-sm font-medium text-gray-900 dark:text-white">{p.name}</p>
+                  <p className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">{p.description}</p>
+                  <p className="text-xs text-gray-400 dark:text-gray-500 mt-1 font-mono truncate">{p.match_rule}</p>
+                  <div className="flex items-center gap-3 mt-2 text-xs text-gray-500 dark:text-gray-400">
+                    <span>Source: {p.source}</span>
+                    {p.match_count !== undefined && <span>Matches: {p.match_count}</span>}
+                    <span>{new Date(p.created_at).toLocaleDateString()}</span>
+                  </div>
+                </div>
+                {(activeTab === 'pending' || activeTab === 'shadow') && (
+                  <div className="flex gap-2 shrink-0">
+                    <button
+                      onClick={() => handleAction(p.id, 'approve')}
+                      className="text-xs px-3 py-1 rounded bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400 hover:bg-green-200 dark:hover:bg-green-900/50"
+                    >
+                      Approve
+                    </button>
+                    <button
+                      onClick={() => handleAction(p.id, 'reject')}
+                      className="text-xs px-3 py-1 rounded bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400 hover:bg-red-200 dark:hover:bg-red-900/50"
+                    >
+                      Reject
+                    </button>
+                  </div>
+                )}
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/templates/full/dashboard/src/components/patterns/SuggestionsQueue.tsx

@@ -0,0 +1,115 @@
+import { useState, useEffect, useCallback } from 'react';
+
+interface PatternSuggestion {
+  id: number;
+  pattern_type: string;
+  pattern_value: string;
+  error_type: string;
+  priority: string;
+  status: string;
+  match_count: number;
+  source: string;
+  created_at: string;
+  reviewed_at: string | null;
+  reviewer_notes: string | null;
+}
+
+export function SuggestionsQueue() {
+  const [suggestions, setSuggestions] = useState<PatternSuggestion[]>([]);
+  const [filter, setFilter] = useState<string>('pending');
+  const [actioningId, setActioningId] = useState<number | null>(null);
+
+  const loadSuggestions = useCallback(() => {
+    fetch(`/api/patterns?status=${filter}`)
+      .then(res => res.json())
+      .then((data: { suggestions: PatternSuggestion[] }) => setSuggestions(data.suggestions ?? []))
+      .catch(() => {});
+  }, [filter]);
+
+  useEffect(() => { loadSuggestions(); }, [loadSuggestions]);
+
+  async function handleAction(id: number, action: 'approve' | 'reject') {
+    setActioningId(id);
+    try {
+      const res = await fetch(`/api/patterns/${action}`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ id }),
+      });
+      if (res.ok) {
+        setSuggestions(prev => prev.filter(s => s.id !== id));
+      }
+    } catch {
+      // Silently fail
+    }
+    setActioningId(null);
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="flex gap-2">
+        {['pending', 'shadow', 'approved', 'rejected'].map(s => (
+          <button
+            key={s}
+            onClick={() => setFilter(s)}
+            className={`text-sm px-3 py-1 rounded-full transition-colors ${
+              filter === s
+                ? 'bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300'
+                : 'bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-600'
+            }`}
+          >
+            {s.charAt(0).toUpperCase() + s.slice(1)}
+          </button>
+        ))}
+      </div>
+
+      {suggestions.length === 0 ? (
+        <div className="text-center py-8 text-gray-500 dark:text-gray-400">
+          No {filter} patterns.
+        </div>
+      ) : (
+        <div className="space-y-3">
+          {suggestions.map(s => (
+            <div key={s.id} className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4">
+              <div className="flex items-start justify-between gap-4">
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center gap-2 mb-1">
+                    <span className="text-xs px-1.5 py-0.5 rounded bg-purple-100 text-purple-700 dark:bg-purple-900/40 dark:text-purple-300 font-mono">
+                      {s.pattern_type}
+                    </span>
+                    <span className="text-xs text-gray-500 dark:text-gray-400">
+                      {s.source} · {s.match_count} matches
+                    </span>
+                  </div>
+                  <p className="text-sm text-gray-900 dark:text-white font-mono truncate">{s.pattern_value}</p>
+                  <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
+                    {s.error_type} · {s.priority} · {new Date(s.created_at).toLocaleDateString('en-AU')}
+                  </p>
+                </div>
+
+                {filter === 'pending' && (
+                  <div className="flex gap-2 flex-shrink-0">
+                    <button
+                      onClick={() => handleAction(s.id, 'approve')}
+                      disabled={actioningId === s.id}
+                      className="text-xs px-3 py-1.5 rounded bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300 hover:bg-green-200 dark:hover:bg-green-900/60 disabled:opacity-50"
+                    >
+                      Approve
+                    </button>
+                    <button
+                      onClick={() => handleAction(s.id, 'reject')}
+                      disabled={actioningId === s.id}
+                      className="text-xs px-3 py-1.5 rounded bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300 hover:bg-red-200 dark:hover:bg-red-900/60 disabled:opacity-50"
+                    >
+                      Reject
+                    </button>
+                  </div>
+                )}
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/templates/full/dashboard/src/components/patterns/SystemPatterns.tsx

@@ -0,0 +1,52 @@
+import { useState, useEffect } from 'react';
+import { LoadingSkeleton } from '../../components/ui/LoadingSkeleton';
+
+interface PatternStats {
+  byStatus: Record<string, number>;
+  total: number;
+}
+
+export function SystemPatterns() {
+  const [stats, setStats] = useState<PatternStats | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetch('/api/patterns/stats')
+      .then((r) => r.json())
+      .then((data: PatternStats) => {
+        setStats(data);
+        setLoading(false);
+      })
+      .catch(() => setLoading(false));
+  }, []);
+
+  if (loading) return <LoadingSkeleton lines={2} />;
+  if (!stats) return null;
+
+  const statusLabels: Record<string, { label: string; colour: string }> = {
+    approved: { label: 'Approved', colour: 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400' },
+    pending: { label: 'Pending', colour: 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400' },
+    shadow: { label: 'Shadow', colour: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400' },
+    rejected: { label: 'Rejected', colour: 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400' },
+    stale: { label: 'Stale', colour: 'bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-400' },
+  };
+
+  return (
+    <div>
+      <div className="flex items-center gap-2 mb-3">
+        <span className="text-sm font-medium text-gray-900 dark:text-white">Pattern Overview</span>
+        <span className="text-xs text-gray-500 dark:text-gray-400">({stats.total} total)</span>
+      </div>
+      <div className="flex flex-wrap gap-2">
+        {Object.entries(stats.byStatus).map(([status, count]) => {
+          const meta = statusLabels[status] ?? { label: status, colour: 'bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-400' };
+          return (
+            <span key={status} className={`text-xs px-2.5 py-1 rounded-full font-medium ${meta.colour}`}>
+              {meta.label}: {count}
+            </span>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

package/templates/full/dashboard/src/components/patterns/index.ts

@@ -0,0 +1,5 @@
+export { SuggestionsQueue } from './SuggestionsQueue';
+export { PatternStats } from './PatternStats';
+export { PatternTabs } from './PatternTabs';
+export { ActivePatterns } from './ActivePatterns';
+export { SystemPatterns } from './SystemPatterns';

package/templates/full/dashboard/src/components/reports/GapDetectionReport.tsx

@@ -0,0 +1,69 @@
+import { useState, useEffect } from 'react';
+import { LoadingSkeleton } from '../../components/ui/LoadingSkeleton';
+import { EmptyState } from '../../components/ui/EmptyState';
+
+interface UsageReport {
+  snapshot_date: string;
+  d1_reads: number;
+  d1_writes: number;
+  kv_reads: number;
+  kv_writes: number;
+  worker_requests: number;
+  total_cost_usd: number;
+}
+
+export function GapDetectionReport() {
+  const [daily, setDaily] = useState<UsageReport[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetch('/api/reports/usage?days=14')
+      .then((r) => r.json())
+      .then((data: { daily: UsageReport[] }) => {
+        setDaily(data.daily ?? []);
+        setLoading(false);
+      })
+      .catch(() => setLoading(false));
+  }, []);
+
+  if (loading) return <LoadingSkeleton lines={5} />;
+  if (daily.length === 0) return <EmptyState title="No usage data" description="Daily rollup data will appear after collection." />;
+
+  const gapDays = daily.filter((d) => d.d1_reads === 0 && d.d1_writes === 0 && d.worker_requests === 0);
+
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center gap-3">
+        <span className="text-sm font-medium text-gray-900 dark:text-white">14-Day Coverage</span>
+        <span className={`text-xs px-2 py-0.5 rounded-full ${
+          gapDays.length === 0
+            ? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400'
+            : 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400'
+        }`}>
+          {daily.length - gapDays.length}/{daily.length} days
+        </span>
+      </div>
+
+      <div className="flex gap-0.5">
+        {daily.map((d) => {
+          const hasData = d.d1_reads > 0 || d.d1_writes > 0 || d.worker_requests > 0;
+          return (
+            <div
+              key={d.snapshot_date}
+              title={`${d.snapshot_date}: $${d.total_cost_usd.toFixed(2)}`}
+              className={`h-6 flex-1 rounded-sm ${
+                hasData ? 'bg-green-500 dark:bg-green-600' : 'bg-red-300 dark:bg-red-700'
+              }`}
+            />
+          );
+        })}
+      </div>
+
+      {gapDays.length > 0 && (
+        <p className="text-xs text-yellow-600 dark:text-yellow-400">
+          {gapDays.length} day(s) with zero data: {gapDays.map((d) => d.snapshot_date).join(', ')}
+        </p>
+      )}
+    </div>
+  );
+}

package/templates/full/dashboard/src/components/reports/SdkAuditReport.tsx

@@ -0,0 +1,72 @@
+import { useState, useEffect } from 'react';
+import { LoadingSkeleton } from '../../components/ui/LoadingSkeleton';
+import { EmptyState } from '../../components/ui/EmptyState';
+
+interface AuditReport {
+  id: number;
+  project: string;
+  scan_type: string;
+  ai_judge_score: number;
+  sdk_score: number;
+  observability_score: number;
+  cost_protection_score: number;
+  security_score: number;
+  scan_date: string;
+}
+
+export function SdkAuditReport() {
+  const [reports, setReports] = useState<AuditReport[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetch('/api/reports/audit?limit=20')
+      .then((r) => r.json())
+      .then((data: { reports: AuditReport[] }) => {
+        setReports(data.reports ?? []);
+        setLoading(false);
+      })
+      .catch(() => setLoading(false));
+  }, []);
+
+  if (loading) return <LoadingSkeleton lines={5} />;
+  if (reports.length === 0) return <EmptyState title="No audit reports" description="Run the platform auditor to generate reports." />;
+
+  const scoreColour = (score: number): string => {
+    if (score >= 90) return 'text-green-600 dark:text-green-400';
+    if (score >= 70) return 'text-yellow-600 dark:text-yellow-400';
+    return 'text-red-600 dark:text-red-400';
+  };
+
+  return (
+    <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-2 font-medium text-gray-500 dark:text-gray-400">Project</th>
+            <th className="text-left py-2 px-2 font-medium text-gray-500 dark:text-gray-400">Type</th>
+            <th className="text-right py-2 px-2 font-medium text-gray-500 dark:text-gray-400">Overall</th>
+            <th className="text-right py-2 px-2 font-medium text-gray-500 dark:text-gray-400">SDK</th>
+            <th className="text-right py-2 px-2 font-medium text-gray-500 dark:text-gray-400">Obs</th>
+            <th className="text-right py-2 px-2 font-medium text-gray-500 dark:text-gray-400">Cost</th>
+            <th className="text-right py-2 px-2 font-medium text-gray-500 dark:text-gray-400">Sec</th>
+            <th className="text-right py-2 px-2 font-medium text-gray-500 dark:text-gray-400">Date</th>
+          </tr>
+        </thead>
+        <tbody>
+          {reports.map((r) => (
+            <tr key={r.id} className="border-b border-gray-100 dark:border-gray-800">
+              <td className="py-1.5 px-2 text-gray-900 dark:text-white">{r.project}</td>
+              <td className="py-1.5 px-2 text-gray-500 dark:text-gray-400">{r.scan_type}</td>
+              <td className={`py-1.5 px-2 text-right font-mono ${scoreColour(r.ai_judge_score)}`}>{r.ai_judge_score}</td>
+              <td className={`py-1.5 px-2 text-right font-mono ${scoreColour(r.sdk_score)}`}>{r.sdk_score}</td>
+              <td className={`py-1.5 px-2 text-right font-mono ${scoreColour(r.observability_score)}`}>{r.observability_score}</td>
+              <td className={`py-1.5 px-2 text-right font-mono ${scoreColour(r.cost_protection_score)}`}>{r.cost_protection_score}</td>
+              <td className={`py-1.5 px-2 text-right font-mono ${scoreColour(r.security_score)}`}>{r.security_score}</td>
+              <td className="py-1.5 px-2 text-right text-gray-400 dark:text-gray-500">{new Date(r.scan_date).toLocaleDateString()}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}

package/templates/full/dashboard/src/components/reports/index.ts

@@ -0,0 +1,2 @@
+export { SdkAuditReport } from './SdkAuditReport';
+export { GapDetectionReport } from './GapDetectionReport';

package/templates/full/dashboard/src/components/search/SearchModal.tsx

@@ -0,0 +1,108 @@
+import { useState, useEffect, useRef, useCallback } from 'react';
+
+interface SearchResult {
+  type: string;
+  id: string;
+  title: string;
+  subtitle: string;
+}
+
+export function SearchModal() {
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState('');
+  const [results, setResults] = useState<SearchResult[]>([]);
+  const [loading, setLoading] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const debounceRef = useRef<ReturnType<typeof setTimeout>>();
+
+  // Cmd+K / Ctrl+K listener
+  useEffect(() => {
+    function handleKeyDown(e: KeyboardEvent) {
+      if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+        e.preventDefault();
+        setOpen(prev => !prev);
+      }
+      if (e.key === 'Escape') {
+        setOpen(false);
+      }
+    }
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, []);
+
+  useEffect(() => {
+    if (open && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [open]);
+
+  const search = useCallback((q: string) => {
+    if (q.length < 2) {
+      setResults([]);
+      return;
+    }
+    setLoading(true);
+    fetch(`/api/search?q=${encodeURIComponent(q)}`)
+      .then(res => res.json())
+      .then((data: { results: SearchResult[] }) => {
+        setResults(data.results ?? []);
+        setLoading(false);
+      })
+      .catch(() => setLoading(false));
+  }, []);
+
+  function handleInput(value: string) {
+    setQuery(value);
+    clearTimeout(debounceRef.current);
+    debounceRef.current = setTimeout(() => search(value), 300);
+  }
+
+  if (!open) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-start justify-center pt-[20vh]" onClick={() => setOpen(false)}>
+      <div className="fixed inset-0 bg-black/50" />
+      <div
+        className="relative w-full max-w-lg bg-white dark:bg-gray-800 rounded-xl shadow-2xl border border-gray-200 dark:border-gray-700"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="flex items-center gap-3 px-4 py-3 border-b border-gray-200 dark:border-gray-700">
+          <span className="text-gray-400 text-sm">Search</span>
+          <input
+            ref={inputRef}
+            type="text"
+            value={query}
+            onChange={(e) => handleInput(e.target.value)}
+            placeholder="Search errors, notifications..."
+            className="flex-1 bg-transparent text-gray-900 dark:text-white placeholder-gray-400 outline-none text-sm"
+          />
+          <kbd className="hidden md:inline text-xs text-gray-400 border border-gray-300 dark:border-gray-600 rounded px-1.5 py-0.5">
+            ESC
+          </kbd>
+        </div>
+
+        <div className="max-h-80 overflow-y-auto p-2">
+          {loading && (
+            <div className="text-center py-4 text-sm text-gray-500 dark:text-gray-400">Searching...</div>
+          )}
+          {!loading && results.length === 0 && query.length >= 2 && (
+            <div className="text-center py-4 text-sm text-gray-500 dark:text-gray-400">No results found.</div>
+          )}
+          {!loading && results.map((r) => (
+            <a
+              key={`${r.type}-${r.id}`}
+              href={r.type === 'error' ? `/errors` : `/notifications`}
+              className="flex items-center gap-3 px-3 py-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
+            >
+              <span className="text-xs font-mono text-gray-400 dark:text-gray-500 uppercase">{r.type}</span>
+              <div className="flex-1 min-w-0">
+                <div className="text-sm text-gray-900 dark:text-white truncate">{r.title}</div>
+                <div className="text-xs text-gray-500 dark:text-gray-400 truncate">{r.subtitle}</div>
+              </div>
+            </a>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/full/dashboard/src/pages/api/notifications/[id]/read.ts

@@ -0,0 +1,37 @@
+import type { APIRoute } from 'astro';
+
+export const POST: APIRoute = async ({ params, locals }) => {
+  const db = (locals.runtime?.env as { PLATFORM_DB?: D1Database } | undefined)?.PLATFORM_DB;
+
+  if (!db) {
+    return new Response(JSON.stringify({ error: 'Database not available' }), {
+      status: 503,
+      headers: { 'Content-Type': 'application/json' },
+    });
+  }
+
+  const id = params.id;
+  if (!id) {
+    return new Response(JSON.stringify({ error: 'Missing notification id' }), {
+      status: 400,
+      headers: { 'Content-Type': 'application/json' },
+    });
+  }
+
+  try {
+    await db
+      .prepare(`UPDATE notifications SET read_at = unixepoch() WHERE id = ? AND read_at IS NULL`)
+      .bind(id)
+      .run();
+
+    return new Response(
+      JSON.stringify({ ok: true }),
+      { headers: { 'Content-Type': 'application/json' } }
+    );
+  } catch {
+    return new Response(JSON.stringify({ error: 'Failed to mark as read' }), {
+      status: 500,
+      headers: { 'Content-Type': 'application/json' },
+    });
+  }
+};