@littlebearapps/platform-admin-sdk 2.1.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/FeatureUsageReport.tsx

@@ -0,0 +1,339 @@
+/**
+ * Feature Usage Report Component
+ * Shows daily feature usage metrics with project column, filtering, and pagination
+ */
+import { useState, useEffect } from 'react';
+
+interface FeatureUsage {
+  feature_id: string;
+  project: string;
+  usage_date: string;
+  requests: number;
+  d1_reads: number;
+  d1_writes: number;
+  kv_reads: number;
+  kv_writes: number;
+  ai_neurons: number;
+  queue_messages: number;
+}
+
+interface FeatureSummary {
+  feature_id: string;
+  project: string;
+  total_requests: number;
+  total_d1_ops: number;
+  total_ai_neurons: number;
+  days_active: number;
+}
+
+function StatCard({ label, value, colour, subValue }: { label: string; value: number | string; colour: string; subValue?: string }) {
+  return (
+    <div className={`bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4 ${colour}`}>
+      <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 mt-0.5">{subValue}</p>}
+    </div>
+  );
+}
+
+function formatNumber(n: number): string {
+  if (n >= 1000000) return `${(n / 1000000).toFixed(1)}M`;
+  if (n >= 1000) return `${(n / 1000).toFixed(1)}K`;
+  return n.toLocaleString();
+}
+
+function extractProject(featureKey: string): string {
+  const parts = featureKey.split(':');
+  return parts.length > 1 ? parts[0] : 'unknown';
+}
+
+export function FeatureUsageReport() {
+  const [usage, setUsage] = useState<FeatureUsage[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [days, setDays] = useState(7);
+  const [sortBy, setSortBy] = useState<'requests' | 'd1' | 'ai' | 'project'>('requests');
+  const [projectFilter, setProjectFilter] = useState<string>('all');
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(25);
+
+  useEffect(() => {
+    async function fetchData() {
+      try {
+        setLoading(true);
+        const response = await fetch(`/api/usage/features/history?days=${days}`);
+        if (!response.ok) throw new Error('Failed to fetch feature usage');
+        const data = await response.json();
+
+        // API returns { success, features: { [featureKey]: [{ date, d1Writes, d1Reads, ... }] } }
+        const featuresObj = data.features || {};
+        const usageData: FeatureUsage[] = [];
+        for (const [featureKey, entries] of Object.entries(featuresObj)) {
+          for (const entry of entries as Array<Record<string, unknown>>) {
+            usageData.push({
+              feature_id: featureKey,
+              project: extractProject(featureKey),
+              usage_date: (entry.date as string) || '',
+              requests: (entry.requests as number) || 0,
+              d1_reads: (entry.d1Reads as number) || 0,
+              d1_writes: (entry.d1Writes as number) || 0,
+              kv_reads: (entry.kvReads as number) || 0,
+              kv_writes: (entry.kvWrites as number) || 0,
+              ai_neurons: (entry.aiNeurons as number) || 0,
+              queue_messages: (entry.queueMessages as number) || 0,
+            });
+          }
+        }
+
+        setUsage(usageData);
+      } catch (e) {
+        setError(e instanceof Error ? e.message : 'Unknown error');
+      } finally {
+        setLoading(false);
+      }
+    }
+    fetchData();
+  }, [days]);
+
+  // Reset page when filters change
+  useEffect(() => { setPage(1); }, [sortBy, projectFilter, pageSize, days]);
+
+  if (loading) {
+    return (
+      <div className="space-y-4">
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+          {[...Array(4)].map((_, i) => (
+            <div key={i} className="bg-white dark:bg-gray-800 rounded-lg border 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>
+      </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 feature usage: {error}
+      </div>
+    );
+  }
+
+  // Aggregate by feature
+  const byFeature = new Map<string, FeatureSummary>();
+  usage.forEach(u => {
+    const existing = byFeature.get(u.feature_id);
+    const d1Ops = u.d1_reads + u.d1_writes;
+    if (existing) {
+      existing.total_requests += u.requests;
+      existing.total_d1_ops += d1Ops;
+      existing.total_ai_neurons += u.ai_neurons;
+      existing.days_active += 1;
+    } else {
+      byFeature.set(u.feature_id, {
+        feature_id: u.feature_id,
+        project: u.project,
+        total_requests: u.requests,
+        total_d1_ops: d1Ops,
+        total_ai_neurons: u.ai_neurons,
+        days_active: 1,
+      });
+    }
+  });
+
+  // Get unique projects for filter
+  const allFeatures = Array.from(byFeature.values());
+  const projects = [...new Set(allFeatures.map(f => f.project))].sort();
+
+  // Apply project filter
+  const filtered = projectFilter === 'all'
+    ? allFeatures
+    : allFeatures.filter(f => f.project === projectFilter);
+
+  // Sort
+  const features = [...filtered].sort((a, b) => {
+    if (sortBy === 'project') return a.project.localeCompare(b.project);
+    if (sortBy === 'requests') return b.total_requests - a.total_requests;
+    if (sortBy === 'd1') return b.total_d1_ops - a.total_d1_ops;
+    return b.total_ai_neurons - a.total_ai_neurons;
+  });
+
+  // Pagination
+  const totalPages = Math.ceil(features.length / pageSize);
+  const paginatedFeatures = features.slice((page - 1) * pageSize, page * pageSize);
+
+  const totalRequests = allFeatures.reduce((sum, f) => sum + f.total_requests, 0);
+  const totalD1Ops = allFeatures.reduce((sum, f) => sum + f.total_d1_ops, 0);
+  const totalAiNeurons = allFeatures.reduce((sum, f) => sum + f.total_ai_neurons, 0);
+
+  return (
+    <div className="space-y-6">
+      {/* Filters */}
+      <div className="flex flex-wrap items-center gap-4">
+        <div className="flex items-center gap-2">
+          <label className="text-sm text-gray-600 dark:text-gray-400">Time range:</label>
+          <select
+            value={days}
+            onChange={(e) => setDays(Number(e.target.value))}
+            className="px-3 py-1.5 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-sm"
+          >
+            <option value={7}>Last 7 days</option>
+            <option value={14}>Last 14 days</option>
+            <option value={30}>Last 30 days</option>
+          </select>
+        </div>
+        <div className="flex items-center gap-2">
+          <label className="text-sm text-gray-600 dark:text-gray-400">Project:</label>
+          <select
+            value={projectFilter}
+            onChange={(e) => setProjectFilter(e.target.value)}
+            className="px-3 py-1.5 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-sm"
+          >
+            <option value="all">All Projects ({projects.length})</option>
+            {projects.map(p => (
+              <option key={p} value={p}>{p}</option>
+            ))}
+          </select>
+        </div>
+        <div className="flex items-center gap-2">
+          <label className="text-sm text-gray-600 dark:text-gray-400">Sort by:</label>
+          <select
+            value={sortBy}
+            onChange={(e) => setSortBy(e.target.value as 'requests' | 'd1' | 'ai' | 'project')}
+            className="px-3 py-1.5 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-sm"
+          >
+            <option value="requests">Requests</option>
+            <option value="d1">D1 Operations</option>
+            <option value="ai">AI Neurons</option>
+            <option value="project">Project</option>
+          </select>
+        </div>
+        <div className="flex items-center gap-2">
+          <label className="text-sm text-gray-600 dark:text-gray-400">Show:</label>
+          <select
+            value={pageSize}
+            onChange={(e) => setPageSize(Number(e.target.value))}
+            className="px-3 py-1.5 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-sm"
+          >
+            <option value={10}>10</option>
+            <option value={25}>25</option>
+            <option value={50}>50</option>
+            <option value={100}>100</option>
+          </select>
+        </div>
+      </div>
+
+      {/* Stats */}
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+        <StatCard label="Total Requests" value={formatNumber(totalRequests)} colour="border-l-4 border-l-blue-500" />
+        <StatCard label="D1 Operations" value={formatNumber(totalD1Ops)} colour="border-l-4 border-l-green-500" />
+        <StatCard label="AI Neurons" value={formatNumber(totalAiNeurons)} colour="border-l-4 border-l-orange-500" />
+        <StatCard
+          label="Active Features"
+          value={features.length}
+          colour="border-l-4 border-l-purple-500"
+          subValue={projectFilter !== 'all' ? `of ${allFeatures.length} total` : `across ${projects.length} projects`}
+        />
+      </div>
+
+      {/* Feature Table */}
+      <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
+        <div className="px-4 py-3 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
+          <div>
+            <h3 className="font-semibold text-gray-900 dark:text-white">Feature Usage ({days} Days)</h3>
+            <p className="text-xs text-gray-500 mt-0.5">
+              {features.length} feature{features.length !== 1 ? 's' : ''}
+              {projectFilter !== 'all' && ` in ${projectFilter}`}
+            </p>
+          </div>
+          {totalPages > 1 && (
+            <div className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400">
+              <button
+                onClick={() => setPage(p => Math.max(1, p - 1))}
+                disabled={page === 1}
+                className="px-2 py-1 rounded border border-gray-300 dark:border-gray-600 disabled:opacity-40 hover:bg-gray-50 dark:hover:bg-gray-700"
+              >
+                Prev
+              </button>
+              <span>{page} / {totalPages}</span>
+              <button
+                onClick={() => setPage(p => Math.min(totalPages, p + 1))}
+                disabled={page === totalPages}
+                className="px-2 py-1 rounded border border-gray-300 dark:border-gray-600 disabled:opacity-40 hover:bg-gray-50 dark:hover:bg-gray-700"
+              >
+                Next
+              </button>
+            </div>
+          )}
+        </div>
+        {features.length === 0 ? (
+          <div className="p-8 text-center text-gray-500">No feature usage data available</div>
+        ) : (
+          <div className="overflow-x-auto">
+            <table className="w-full">
+              <thead className="bg-gray-50 dark:bg-gray-900/50">
+                <tr>
+                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Project</th>
+                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Feature</th>
+                  <th className="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase">Requests</th>
+                  <th className="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase">D1 Ops</th>
+                  <th className="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase">AI Neurons</th>
+                  <th className="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase">Days Active</th>
+                </tr>
+              </thead>
+              <tbody>
+                {paginatedFeatures.map((f) => {
+                  // Strip project prefix from feature_id for display
+                  const featureDisplay = f.feature_id.startsWith(f.project + ':')
+                    ? f.feature_id.slice(f.project.length + 1)
+                    : f.feature_id;
+                  return (
+                    <tr key={f.feature_id} className="border-b border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800/50">
+                      <td className="px-4 py-3">
+                        <span className="inline-block px-2 py-0.5 text-xs font-medium rounded bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300">
+                          {f.project}
+                        </span>
+                      </td>
+                      <td className="px-4 py-3 font-medium text-gray-900 dark:text-white text-sm">{featureDisplay}</td>
+                      <td className="px-4 py-3 text-right text-gray-600 dark:text-gray-400">{formatNumber(f.total_requests)}</td>
+                      <td className="px-4 py-3 text-right text-gray-600 dark:text-gray-400">{formatNumber(f.total_d1_ops)}</td>
+                      <td className="px-4 py-3 text-right text-gray-600 dark:text-gray-400">{formatNumber(f.total_ai_neurons)}</td>
+                      <td className="px-4 py-3 text-right text-gray-600 dark:text-gray-400">{f.days_active}</td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          </div>
+        )}
+        {/* Bottom pagination */}
+        {totalPages > 1 && (
+          <div className="px-4 py-3 border-t border-gray-200 dark:border-gray-700 flex items-center justify-between text-sm text-gray-600 dark:text-gray-400">
+            <span>
+              Showing {(page - 1) * pageSize + 1}–{Math.min(page * pageSize, features.length)} of {features.length}
+            </span>
+            <div className="flex items-center gap-2">
+              <button
+                onClick={() => setPage(p => Math.max(1, p - 1))}
+                disabled={page === 1}
+                className="px-2 py-1 rounded border border-gray-300 dark:border-gray-600 disabled:opacity-40 hover:bg-gray-50 dark:hover:bg-gray-700"
+              >
+                Prev
+              </button>
+              <span>{page} / {totalPages}</span>
+              <button
+                onClick={() => setPage(p => Math.min(totalPages, p + 1))}
+                disabled={page === totalPages}
+                className="px-2 py-1 rounded border border-gray-300 dark:border-gray-600 disabled:opacity-40 hover:bg-gray-50 dark:hover:bg-gray-700"
+              >
+                Next
+              </button>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}