@littlebearapps/platform-admin-sdk 2.1.0 → 2.3.0

package/dist/upgrade.js

@@ -14,7 +14,7 @@ import { resolve, dirname, join } from 'node:path';
 import { fileURLToPath } from 'node:url';
 import Handlebars from 'handlebars';
 import pc from 'picocolors';
-import { getFilesForTier, SDK_VERSION, isMigrationFile, isTierUpgradeOrSame } from './templates.js';
+import { getFilesForTier, SDK_VERSION, isMigrationFile, isTierUpgradeOrSame, detectCollisions } from './templates.js';
 import { readManifest, writeManifest, buildManifest, hashContent, MANIFEST_FILENAME, } from './manifest.js';
 import { findHighestMigration, getMigrationNumber, planMigrations } from './migrations.js';
 const __filename = fileURLToPath(import.meta.url);
@@ -46,7 +46,11 @@ export async function upgrade(projectDir, options = {}) {
     }
     if (manifest.sdkVersion === SDK_VERSION && manifest.tier === targetTier) {
         console.log(pc.green(`  Already up to date (SDK ${SDK_VERSION}, tier ${targetTier}).`));
-        return { created: [], updated: [], skipped: [], removed: [], migrations: [] };
+        return { created: [], updated: [], skipped: [], removed: [], migrations: [], excluded: [] };
+    }
+    const collisions = detectCollisions(targetTier);
+    if (collisions.length > 0) {
+        throw new Error(`Template naming collisions detected:\n${collisions.map((c) => `  - ${c}`).join('\n')}`);
     }
     const templatesDir = getTemplatesDir();
     const files = getFilesForTier(targetTier);
@@ -59,12 +63,14 @@ export async function upgrade(projectDir, options = {}) {
         defaultAssignee: manifest.context.defaultAssignee,
         sdkVersion: SDK_VERSION,
     };
+    const excludeSet = new Set(manifest.excludeFromUpgrade ?? []);
     const result = {
         created: [],
         updated: [],
         skipped: [],
         removed: [],
         migrations: [],
+        excluded: [],
     };
     // Separate regular files from migrations
     const regularFiles = files.filter((f) => !isMigrationFile(f));
@@ -75,6 +81,16 @@ export async function upgrade(projectDir, options = {}) {
         const srcPath = join(templatesDir, file.src);
         const destRelative = renderString(file.dest, context);
         const destPath = join(projectDir, destRelative);
+        if (excludeSet.has(destRelative)) {
+            console.log(`  ${pc.dim('exclude')} ${destRelative} ${pc.dim('(in excludeFromUpgrade)')}`);
+            result.excluded.push(destRelative);
+            // Preserve existing hash in new manifest if file is on disk
+            if (existsSync(destPath)) {
+                const diskContent = readFileSync(destPath, 'utf-8');
+                newFileHashes[destRelative] = hashContent(diskContent);
+            }
+            continue;
+        }
         if (!existsSync(srcPath))
             continue;
         const raw = readFileSync(srcPath, 'utf-8');
@@ -174,6 +190,9 @@ export async function upgrade(projectDir, options = {}) {
     // --- Write updated manifest ---
     if (!options.dryRun) {
         const newManifest = buildManifest(SDK_VERSION, targetTier, manifest.context, newFileHashes, highestScaffoldMig);
+        if (manifest.excludeFromUpgrade && manifest.excludeFromUpgrade.length > 0) {
+            newManifest.excludeFromUpgrade = manifest.excludeFromUpgrade;
+        }
         writeManifest(projectDir, newManifest);
     }
     return result;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@littlebearapps/platform-admin-sdk",
-  "version": "2.1.0",
+  "version": "2.3.0",
   "description": "Platform Admin SDK — scaffold backend infrastructure with workers, circuit breakers, and cost protection for Cloudflare",
   "type": "module",
   "bin": {

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

@@ -0,0 +1,130 @@
+/**
+ * NotificationDropdown.tsx
+ *
+ * Dropdown panel showing recent notifications with mark-as-read actions.
+ *
+ * @module dashboard/components/notifications/NotificationDropdown
+ * @created 2026-02-03
+ * @task task-303.2
+ */
+
+import { NotificationItem } from './NotificationItem';
+import type { Notification } from '../../lib/notifications/types';
+
+export interface NotificationDropdownProps {
+  notifications: Notification[];
+  readIds: Set<string>;
+  isOpen: boolean;
+  onMarkRead: (id: string) => void;
+  onMarkAllRead: () => void;
+  onClose: () => void;
+  loading?: boolean;
+}
+
+export function NotificationDropdown({
+  notifications,
+  readIds,
+  isOpen,
+  onMarkRead,
+  onMarkAllRead,
+  _onClose,
+  loading = false,
+}: NotificationDropdownProps): JSX.Element | null {
+  if (!isOpen) return null;
+
+  const hasUnread = notifications.some((n) => !readIds.has(n.id));
+
+  return (
+    <div
+      className="absolute right-0 mt-2 w-80 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 z-60 overflow-hidden animate-slide-down"
+      role="menu"
+      aria-orientation="vertical"
+      aria-label="Notifications"
+    >
+      {/* Header */}
+      <div className="flex items-center justify-between px-4 py-3 border-b border-gray-200 dark:border-gray-700">
+        <h3 className="text-sm font-semibold text-gray-900 dark:text-white">Notifications</h3>
+        {hasUnread ? (
+          <button
+            onClick={onMarkAllRead}
+            className="text-xs text-blue-600 dark:text-blue-400 hover:underline focus:outline-none"
+          >
+            Mark all as read
+          </button>
+        ) : (
+          <span className="text-xs text-gray-400">All read</span>
+        )}
+      </div>
+
+      {/* Notification list */}
+      <div className="max-h-80 overflow-y-auto">
+        {loading ? (
+          <div className="px-4 py-8 text-center">
+            <svg
+              className="animate-spin h-6 w-6 mx-auto text-blue-500"
+              fill="none"
+              viewBox="0 0 24 24"
+            >
+              <circle
+                className="opacity-25"
+                cx="12"
+                cy="12"
+                r="10"
+                stroke="currentColor"
+                strokeWidth="4"
+              />
+              <path
+                className="opacity-75"
+                fill="currentColor"
+                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+              />
+            </svg>
+            <p className="mt-2 text-sm text-gray-500 dark:text-gray-400">Loading...</p>
+          </div>
+        ) : notifications.length === 0 ? (
+          <div className="px-4 py-8 text-center">
+            <svg
+              className="mx-auto h-8 w-8 text-gray-400"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"
+              />
+            </svg>
+            <p className="mt-2 text-sm text-gray-500 dark:text-gray-400">No notifications</p>
+            <p className="text-xs text-gray-400 dark:text-gray-500">You're all caught up!</p>
+          </div>
+        ) : (
+          <div className="group">
+            {notifications.map((notification) => (
+              <NotificationItem
+                key={notification.id}
+                notification={notification}
+                isRead={readIds.has(notification.id)}
+                onMarkRead={onMarkRead}
+                compact
+              />
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Footer */}
+      <div className="px-4 py-3 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700/50">
+        <a
+          href="/notifications"
+          className="text-sm text-blue-600 dark:text-blue-400 hover:underline"
+        >
+          View all notifications
+        </a>
+      </div>
+    </div>
+  );
+}
+
+export default NotificationDropdown;

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>
+  );
+}