@littlebearapps/platform-admin-sdk 2.0.0 → 2.2.0

package/templates/full/dashboard/src/components/notifications/NotificationItem.tsx

@@ -0,0 +1,264 @@
+/**
+ * NotificationItem.tsx
+ *
+ * Individual notification rendering with category-based styling,
+ * priority colours, and project badges.
+ *
+ * @module dashboard/components/notifications/NotificationItem
+ * @created 2026-02-03
+ * @updated 2026-02-04 - Added priority colours and project badges
+ * @task task-303.2, task-314
+ */
+
+import type { Notification, NotificationCategory, NotificationPriority } from '../../lib/notifications/types';
+
+export interface NotificationItemProps {
+  notification: Notification;
+  isRead: boolean;
+  onMarkRead?: (id: string) => void;
+  onDismiss?: (id: string) => void;
+  compact?: boolean;
+}
+
+/** Category-based icon and colour configuration */
+const categoryConfig: Record<
+  NotificationCategory,
+  { icon: string; bgClass: string; iconClass: string }
+> = {
+  error: {
+    icon: 'M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z',
+    bgClass: 'bg-red-100 dark:bg-red-900/30',
+    iconClass: 'text-red-600 dark:text-red-400',
+  },
+  warning: {
+    icon: 'M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z',
+    bgClass: 'bg-yellow-100 dark:bg-yellow-900/30',
+    iconClass: 'text-yellow-600 dark:text-yellow-400',
+  },
+  info: {
+    icon: 'M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z',
+    bgClass: 'bg-blue-100 dark:bg-blue-900/30',
+    iconClass: 'text-blue-600 dark:text-blue-400',
+  },
+  success: {
+    icon: 'M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z',
+    bgClass: 'bg-green-100 dark:bg-green-900/30',
+    iconClass: 'text-green-600 dark:text-green-400',
+  },
+};
+
+/** Priority-based colour configuration */
+const priorityConfig: Record<
+  NotificationPriority,
+  { borderClass: string; badgeClass: string; label: string }
+> = {
+  critical: {
+    borderClass: 'border-l-4 border-l-red-500',
+    badgeClass: 'bg-red-100 text-red-700 dark:bg-red-900/50 dark:text-red-300',
+    label: 'Critical',
+  },
+  high: {
+    borderClass: 'border-l-4 border-l-orange-500',
+    badgeClass: 'bg-orange-100 text-orange-700 dark:bg-orange-900/50 dark:text-orange-300',
+    label: 'High',
+  },
+  medium: {
+    borderClass: 'border-l-4 border-l-yellow-500',
+    badgeClass: 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/50 dark:text-yellow-300',
+    label: 'Medium',
+  },
+  low: {
+    borderClass: 'border-l-4 border-l-blue-400',
+    badgeClass: 'bg-blue-100 text-blue-700 dark:bg-blue-900/50 dark:text-blue-300',
+    label: 'Low',
+  },
+  info: {
+    borderClass: 'border-l-4 border-l-gray-300 dark:border-l-gray-600',
+    badgeClass: 'bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-400',
+    label: 'Info',
+  },
+};
+
+/** Project display configuration */
+const projectConfig: Record<string, { label: string; bgClass: string }> = {
+  platform: {
+    label: 'Platform',
+    bgClass: 'bg-purple-100 text-purple-700 dark:bg-purple-900/50 dark:text-purple-300',
+  },
+  'brand-copilot': {
+    label: 'Brand Copilot',
+    bgClass: 'bg-indigo-100 text-indigo-700 dark:bg-indigo-900/50 dark:text-indigo-300',
+  },
+  scout: {
+    label: 'Scout',
+    bgClass: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/50 dark:text-emerald-300',
+  },
+};
+
+/** Source display configuration */
+const sourceConfig: Record<string, { label: string; icon: string }> = {
+  'error-collector': { label: 'Error', icon: 'M12 9v2m0 4h.01' },
+  'pattern-discovery': { label: 'Pattern', icon: 'M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2z' },
+  'circuit-breaker': { label: 'Circuit', icon: 'M13 10V3L4 14h7v7l9-11h-7z' },
+  usage: { label: 'Usage', icon: 'M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z' },
+  gatus: { label: 'Monitoring', icon: 'M5.636 18.364a9 9 0 010-12.728m12.728 0a9 9 0 010 12.728m-9.9-2.829a5 5 0 010-7.07m7.072 0a5 5 0 010 7.07M13 12a1 1 0 11-2 0 1 1 0 012 0z' },
+  system: { label: 'System', icon: 'M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z' },
+};
+
+/** Format relative time string */
+function formatRelativeTime(timestamp: number): string {
+  const now = Date.now();
+  const seconds = Math.floor((now - timestamp * 1000) / 1000);
+
+  if (seconds < 60) return 'Just now';
+  if (seconds < 3600) {
+    const mins = Math.floor(seconds / 60);
+    return `${mins}m ago`;
+  }
+  if (seconds < 86400) {
+    const hours = Math.floor(seconds / 3600);
+    return `${hours}h ago`;
+  }
+  const days = Math.floor(seconds / 86400);
+  if (days === 1) return 'Yesterday';
+  if (days < 7) return `${days}d ago`;
+  return new Date(timestamp * 1000).toLocaleDateString('en-AU', {
+    day: 'numeric',
+    month: 'short',
+  });
+}
+
+export function NotificationItem({
+  notification,
+  isRead,
+  onMarkRead,
+  onDismiss,
+  compact = false,
+}: NotificationItemProps): JSX.Element {
+  const catConfig = categoryConfig[notification.category] || categoryConfig.info;
+  const prioConfig = priorityConfig[notification.priority] || priorityConfig.info;
+  const projConfig = notification.project ? projectConfig[notification.project] : null;
+  const srcConfig = sourceConfig[notification.source] || sourceConfig.system;
+
+  const handleClick = (): void => {
+    if (!isRead && onMarkRead) {
+      onMarkRead(notification.id);
+    }
+    if (notification.action_url) {
+      window.location.href = notification.action_url;
+    }
+  };
+
+  const handleDismiss = (e: React.MouseEvent): void => {
+    e.stopPropagation();
+    onDismiss?.(notification.id);
+  };
+
+  const baseClasses = isRead
+    ? 'hover:bg-gray-50 dark:hover:bg-gray-700/50'
+    : 'bg-blue-50 dark:bg-blue-900/20 hover:bg-blue-100 dark:hover:bg-blue-900/30';
+
+  // Show priority border for critical/high only
+  const priorityBorder = ['critical', 'high'].includes(notification.priority)
+    ? prioConfig.borderClass
+    : '';
+
+  return (
+    <div
+      className={`notification-item group flex items-start gap-3 px-4 py-3 cursor-pointer border-b border-gray-100 dark:border-gray-700 transition-colors ${baseClasses} ${priorityBorder}`}
+      onClick={handleClick}
+      role="button"
+      tabIndex={0}
+      onKeyDown={(e) => e.key === 'Enter' && handleClick()}
+    >
+      {/* Category icon */}
+      <div
+        className={`flex-shrink-0 w-8 h-8 rounded-full ${catConfig.bgClass} flex items-center justify-center`}
+      >
+        <svg
+          className={`w-4 h-4 ${catConfig.iconClass}`}
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d={catConfig.icon} />
+        </svg>
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 min-w-0">
+        {/* Title row with priority badge */}
+        <div className="flex items-center gap-2 flex-wrap">
+          <p
+            className={`text-sm ${isRead ? 'text-gray-700 dark:text-gray-300' : 'font-medium text-gray-900 dark:text-white'}`}
+          >
+            {notification.title}
+          </p>
+          {/* Priority badge for critical/high */}
+          {['critical', 'high'].includes(notification.priority) && (
+            <span className={`px-1.5 py-0.5 text-xs font-medium rounded ${prioConfig.badgeClass}`}>
+              {prioConfig.label}
+            </span>
+          )}
+        </div>
+
+        {/* Description */}
+        {notification.description && !compact && (
+          <p className="text-xs text-gray-500 dark:text-gray-400 truncate mt-0.5">
+            {notification.description}
+          </p>
+        )}
+
+        {/* Metadata row: time, project, source */}
+        <div className="flex items-center gap-2 mt-1 flex-wrap">
+          <span className="text-xs text-gray-400 dark:text-gray-500">
+            {formatRelativeTime(notification.created_at)}
+          </span>
+
+          {/* Project badge */}
+          {projConfig && (
+            <span className={`px-1.5 py-0.5 text-xs rounded ${projConfig.bgClass}`}>
+              {projConfig.label}
+            </span>
+          )}
+
+          {/* Source indicator */}
+          <span className="text-xs text-gray-400 dark:text-gray-500 flex items-center gap-1">
+            <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d={srcConfig.icon} />
+            </svg>
+            {srcConfig.label}
+          </span>
+        </div>
+      </div>
+
+      {/* Unread indicator */}
+      {!isRead && <div className="flex-shrink-0 w-2 h-2 mt-2 bg-blue-500 rounded-full" />}
+
+      {/* Dismiss button (optional) */}
+      {onDismiss && (
+        <button
+          onClick={handleDismiss}
+          className="flex-shrink-0 p-1 rounded hover:bg-gray-200 dark:hover:bg-gray-600 opacity-0 group-hover:opacity-100 transition-opacity"
+          aria-label="Dismiss notification"
+        >
+          <svg
+            className="w-4 h-4 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M6 18L18 6M6 6l12 12"
+            />
+          </svg>
+        </button>
+      )}
+    </div>
+  );
+}
+
+export default NotificationItem;

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

@@ -0,0 +1,60 @@
+/**
+ * PatternInfoButton Component
+ * Info icon button that toggles a panel explaining how pattern discovery works
+ */
+import { useState, useRef, useEffect } from 'react';
+
+export function PatternInfoButton() {
+  const [open, setOpen] = useState(false);
+  const panelRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+
+    function handleClickOutside(event: MouseEvent) {
+      if (panelRef.current && !panelRef.current.contains(event.target as Node)) {
+        setOpen(false);
+      }
+    }
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, [open]);
+
+  return (
+    <div className="relative" ref={panelRef}>
+      <button
+        onClick={() => setOpen(!open)}
+        className="inline-flex items-center justify-center w-9 h-9 rounded-full bg-blue-100 hover:bg-blue-200 dark:bg-blue-900/40 dark:hover:bg-blue-900/60 text-blue-600 dark:text-blue-400 transition-colors"
+        title="How Pattern Discovery Works"
+        aria-label="How Pattern Discovery Works"
+      >
+        <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+          <path strokeLinecap="round" strokeLinejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+        </svg>
+      </button>
+
+      {open && (
+        <div className="absolute right-0 top-12 z-50 w-96 bg-blue-50 dark:bg-blue-900/30 border border-blue-200 dark:border-blue-800 rounded-lg p-4 shadow-lg">
+          <h3 className="font-semibold text-blue-800 dark:text-blue-300 mb-2">
+            How Pattern Discovery Works
+          </h3>
+          <ol className="text-sm text-blue-700 dark:text-blue-400 space-y-1.5 list-decimal list-inside">
+            <li>Daily cron job (2am UTC) analyses unclassified errors in D1</li>
+            <li>Similar errors are clustered and sent to AI (DeepSeek) for pattern suggestions</li>
+            <li>AI suggests patterns using a constrained DSL (contains, startsWith, statusCode, regex)</li>
+            <li>Human reviews and approves/rejects suggestions with backtest validation</li>
+            <li>Approved patterns are cached in KV and loaded by error-collector at runtime</li>
+            <li>System patterns are always active (built into error-collector code)</li>
+          </ol>
+          <button
+            onClick={() => setOpen(false)}
+            className="mt-3 text-xs text-blue-600 dark:text-blue-400 hover:underline"
+          >
+            Close
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,151 @@
+/**
+ * Digest Statistics Cards Component
+ * Shows warning digest summary stats and trends
+ */
+import { useState, useEffect } from 'react';
+import type { DigestStats as DigestStatsType } from '../../lib/reports/types';
+
+interface StatCardProps {
+  label: string;
+  value: number | string;
+  subValue?: string;
+  colour: string;
+  icon: string;
+}
+
+function StatCard({ label, value, subValue, colour, icon }: StatCardProps) {
+  return (
+    <div className={`bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4 ${colour}`}>
+      <div className="flex items-center justify-between">
+        <div>
+          <p className="text-sm font-medium text-gray-600 dark:text-gray-400">{label}</p>
+          <p className="text-2xl font-bold mt-1">{value}</p>
+          {subValue && (
+            <p className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">{subValue}</p>
+          )}
+        </div>
+        <span className="text-2xl">{icon}</span>
+      </div>
+    </div>
+  );
+}
+
+export function DigestStats() {
+  const [stats, setStats] = useState<DigestStatsType | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    async function fetchStats() {
+      try {
+        const response = await fetch('/api/reports/digests/stats');
+        if (!response.ok) throw new Error('Failed to fetch stats');
+        const data = await response.json();
+        setStats(data);
+      } catch (e) {
+        setError(e instanceof Error ? e.message : 'Unknown error');
+      } finally {
+        setLoading(false);
+      }
+    }
+    fetchStats();
+  }, []);
+
+  if (loading) {
+    return (
+      <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
+        {[...Array(6)].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-16 mb-2"></div>
+            <div className="h-8 bg-gray-200 dark:bg-gray-700 rounded w-12"></div>
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4 text-red-700 dark:text-red-300">
+        Error loading stats: {error}
+      </div>
+    );
+  }
+
+  if (!stats) return null;
+
+  // Calculate trend (comparing today vs yesterday)
+  const todayOcc = stats.todayDigests.occurrences;
+  const yesterdayOcc = stats.yesterdayDigests.occurrences;
+  const trend = yesterdayOcc > 0
+    ? Math.round(((todayOcc - yesterdayOcc) / yesterdayOcc) * 100)
+    : todayOcc > 0 ? 100 : 0;
+  const trendText = trend > 0 ? `+${trend}%` : trend < 0 ? `${trend}%` : 'Same';
+
+  return (
+    <div className="space-y-4">
+      {/* Main Stats */}
+      <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
+        <StatCard
+          label="Today's Warnings"
+          value={stats.todayDigests.occurrences}
+          subValue={`${stats.todayDigests.count} digest(s)`}
+          colour="border-l-4 border-l-yellow-500"
+          icon="⚠️"
+        />
+        <StatCard
+          label="Yesterday"
+          value={stats.yesterdayDigests.occurrences}
+          subValue={`${stats.yesterdayDigests.count} digest(s)`}
+          colour="border-l-4 border-l-gray-400"
+          icon="📅"
+        />
+        <StatCard
+          label="Daily Trend"
+          value={trendText}
+          subValue={trend > 0 ? 'Increase' : trend < 0 ? 'Decrease' : 'No change'}
+          colour={`border-l-4 ${trend > 20 ? 'border-l-red-500' : trend < -20 ? 'border-l-green-500' : 'border-l-blue-500'}`}
+          icon={trend > 0 ? '📈' : trend < 0 ? '📉' : '➡️'}
+        />
+        <StatCard
+          label="Total Digests"
+          value={stats.totalDigests}
+          colour="border-l-4 border-l-purple-500"
+          icon="📊"
+        />
+        <StatCard
+          label="Total Occurrences"
+          value={stats.totalOccurrences.toLocaleString()}
+          colour="border-l-4 border-l-indigo-500"
+          icon="🔢"
+        />
+        <StatCard
+          label="Active Scripts"
+          value={stats.byScript.length}
+          colour="border-l-4 border-l-teal-500"
+          icon="📜"
+        />
+      </div>
+
+      {/* Top Warnings Summary */}
+      {stats.topWarnings.length > 0 && (
+        <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-semibold text-gray-700 dark:text-gray-300 mb-3">Top Warning Types</h3>
+          <div className="space-y-2">
+            {stats.topWarnings.slice(0, 3).map((warning, i) => (
+              <div key={i} className="flex items-center justify-between text-sm">
+                <span className="text-gray-600 dark:text-gray-400 truncate max-w-md">
+                  {warning.normalized_message.slice(0, 60)}
+                  {warning.normalized_message.length > 60 && '...'}
+                </span>
+                <span className="text-gray-900 dark:text-white font-medium ml-2">
+                  {warning.occurrences.toLocaleString()} ({warning.days_occurred}d)
+                </span>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}