feat: add proactive admin warnings, diagram search, migration timeline

Dashboard:
- Alert banner when plugins have pending migrations or schema errors
- Database card shows "X plugin(s) degraded" vs "All Healthy" dynamically

Sidebar:
- Red badge on "Database" nav link showing count of degraded plugins
- Count injected via layout context (admin users only)

Schema diagram:
- Search bar filters tables/columns with match highlighting
- Non-matching nodes dimmed to 15% opacity, match count shown

Migration timeline:
- Collapsible "Migration History" section with applied_at timestamps
- Fetched from plugin_schema_versions table

https://claude.ai/code/session_01QJLkgjQDu5qohzJKGV4hj9

Author: claude

internal/app/routes.go

@@ -1295,6 +1295,11 @@ func (a *App) RegisterRoutes() {
 			ctx = layouts.SetUserName(ctx, session.Name)
 			ctx = layouts.SetUserEmail(ctx, session.Email)
 			ctx = layouts.SetIsAdmin(ctx, session.IsAdmin)
+
+			// Inject degraded plugin count for admin sidebar badge.
+			if session.IsAdmin {
+				ctx = layouts.SetDegradedPluginCount(ctx, len(a.PluginHealth.DegradedPlugins()))
+			}
 		}
 
 		// Campaign info from campaign middleware.

internal/plugins/admin/dashboard.templ

@@ -2,15 +2,33 @@ package admin
 
 import (
 	"fmt"
+	"strings"
 	"github.com/keyxmakerx/chronicle/internal/templates/layouts"
 )
 
 // AdminDashboardPage renders the admin overview with high-level stats.
-templ AdminDashboardPage(userCount, campaignCount, mediaFileCount int, totalStorageBytes int64, smtpConfigured bool, addonCount int, securityStats *SecurityStats) {
+templ AdminDashboardPage(userCount, campaignCount, mediaFileCount int, totalStorageBytes int64, smtpConfigured bool, addonCount int, securityStats *SecurityStats, degradedPlugins []string) {
 	@layouts.App("Admin Dashboard") {
 		<div class="max-w-5xl mx-auto space-y-6">
 			<h1 class="text-2xl font-bold text-fg">Admin Dashboard</h1>
 
+			<!-- Degraded Plugin Alert Banner -->
+			if len(degradedPlugins) > 0 {
+				<a href="/admin/database" class="flex items-start gap-3 p-4 rounded-lg bg-red-50 dark:bg-red-950/30 border border-red-200 dark:border-red-800 hover:bg-red-100 dark:hover:bg-red-950/50 transition-colors">
+					<i class="fa-solid fa-triangle-exclamation text-red-500 mt-0.5 shrink-0"></i>
+					<div>
+						<p class="text-sm font-semibold text-red-700 dark:text-red-400">
+							{ fmt.Sprintf("%d", len(degradedPlugins)) } plugin(s) need attention
+						</p>
+						<p class="text-xs text-red-600/80 dark:text-red-400/70 mt-0.5">
+							{ strings.Join(degradedPlugins, ", ") } &mdash; pending migrations or schema errors.
+							Click to view the Database Explorer.
+						</p>
+					</div>
+					<i class="fa-solid fa-arrow-right text-red-400 mt-0.5 ml-auto shrink-0"></i>
+				</a>
+			}
+
 			<!-- Stats Cards -->
 			<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
 				<!-- Users -->
@@ -116,8 +134,16 @@ templ AdminDashboardPage(userCount, campaignCount, mediaFileCount int, totalStor
 							<i class="fa-solid fa-database text-slate-500"></i>
 						</span>
 					</div>
-					<p class="text-lg font-semibold text-fg mt-2">Schema Explorer</p>
-					<p class="text-xs text-fg-muted mt-1 group-hover:text-accent transition-colors">Tables &amp; migrations &rarr;</p>
+					if len(degradedPlugins) > 0 {
+						<p class="text-lg font-semibold text-amber-600 dark:text-amber-400 mt-2">
+							{ fmt.Sprintf("%d", len(degradedPlugins)) } plugin(s) degraded
+						</p>
+						<p class="text-xs text-fg-muted mt-1">Pending migrations or errors</p>
+					} else {
+						<p class="text-lg font-semibold text-emerald-600 dark:text-emerald-400 mt-2">All Healthy</p>
+						<p class="text-xs text-fg-muted mt-1">All migrations applied</p>
+					}
+					<p class="text-xs text-fg-muted group-hover:text-accent transition-colors">Schema explorer &rarr;</p>
 				</a>
 				<!-- SMTP -->
 				<a href="/admin/smtp" class="card hover:shadow-md transition-shadow group">

internal/plugins/admin/database.templ

@@ -48,6 +48,39 @@ templ AdminDatabasePage(statuses []PluginMigrationStatus, tableCount int, csrfTo
 				</div>
 			}
 
+			<!-- Migration History Timeline -->
+			if hasMigrationHistory(statuses) {
+				<details class="group">
+					<summary class="text-xs text-fg-muted cursor-pointer hover:text-fg-secondary">
+						<i class="fa-solid fa-clock-rotate-left mr-1"></i>
+						Migration History
+						<i class="fa-solid fa-chevron-down text-[10px] ml-1 transition-transform group-open:rotate-180"></i>
+					</summary>
+					<div class="mt-3 card p-0 overflow-hidden">
+						<table class="w-full text-xs">
+							<thead>
+								<tr class="border-b border-edge text-left text-fg-muted bg-surface-alt/50">
+									<th class="px-4 py-2">Plugin</th>
+									<th class="px-4 py-2">Version</th>
+									<th class="px-4 py-2">Applied At</th>
+								</tr>
+							</thead>
+							<tbody>
+								for _, s := range statuses {
+									for _, h := range s.History {
+										<tr class="border-b border-edge last:border-b-0">
+											<td class="px-4 py-1.5 font-medium text-fg capitalize">{ s.Slug }</td>
+											<td class="px-4 py-1.5 text-fg-secondary">v{ fmt.Sprintf("%d", h.Version) }</td>
+											<td class="px-4 py-1.5 text-fg-muted font-mono">{ h.AppliedAt }</td>
+										</tr>
+									}
+								}
+							</tbody>
+						</table>
+					</div>
+				</details>
+			}
+
 			<!-- Schema Diagram -->
 			<div class="card p-0 overflow-hidden">
 				<div class="px-5 py-3 border-b border-edge flex items-center justify-between">
@@ -106,3 +139,13 @@ func hasPendingMigrations(statuses []PluginMigrationStatus) bool {
 	}
 	return false
 }
+
+// hasMigrationHistory returns true if any plugin has migration history entries.
+func hasMigrationHistory(statuses []PluginMigrationStatus) bool {
+	for _, s := range statuses {
+		if len(s.History) > 0 {
+			return true
+		}
+	}
+	return false
+}

internal/plugins/admin/database_service.go

@@ -10,6 +10,7 @@ import (
 	"fmt"
 	"log/slog"
 	"strings"
+	"time"
 
 	"github.com/keyxmakerx/chronicle/internal/database"
 )
@@ -62,12 +63,19 @@ type ForeignKeyInfo struct {
 
 // PluginMigrationStatus describes the migration state of a single plugin.
 type PluginMigrationStatus struct {
-	Slug           string `json:"slug"`
-	CurrentVersion int    `json:"currentVersion"`
-	LatestVersion  int    `json:"latestVersion"`
-	Pending        int    `json:"pending"`
-	Healthy        bool   `json:"healthy"`
-	Error          string `json:"error,omitempty"`
+	Slug           string             `json:"slug"`
+	CurrentVersion int                `json:"currentVersion"`
+	LatestVersion  int                `json:"latestVersion"`
+	Pending        int                `json:"pending"`
+	Healthy        bool               `json:"healthy"`
+	Error          string             `json:"error,omitempty"`
+	History        []MigrationHistory `json:"history,omitempty"`
+}
+
+// MigrationHistory records when a specific migration version was applied.
+type MigrationHistory struct {
+	Version   int    `json:"version"`
+	AppliedAt string `json:"appliedAt"` // RFC3339
 }
 
 // databaseExplorer implements DatabaseExplorer with direct DB access.
@@ -242,12 +250,46 @@ func (e *databaseExplorer) GetMigrationStatus(ctx context.Context) ([]PluginMigr
 			status.Pending = 0
 		}
 
+		// Fetch applied migration timestamps.
+		history, err := e.getMigrationHistory(ctx, p.Slug)
+		if err != nil {
+			slog.Warn("failed to read migration history",
+				slog.String("plugin", p.Slug),
+				slog.Any("error", err),
+			)
+		}
+		status.History = history
+
 		statuses = append(statuses, status)
 	}
 
 	return statuses, nil
 }
 
+// getMigrationHistory returns the applied migration versions and timestamps for a plugin.
+func (e *databaseExplorer) getMigrationHistory(ctx context.Context, slug string) ([]MigrationHistory, error) {
+	rows, err := e.db.QueryContext(ctx,
+		`SELECT version, applied_at FROM plugin_schema_versions WHERE plugin_slug = ? ORDER BY version`,
+		slug,
+	)
+	if err != nil {
+		return nil, err
+	}
+	defer rows.Close()
+
+	var history []MigrationHistory
+	for rows.Next() {
+		var h MigrationHistory
+		var appliedAt time.Time
+		if err := rows.Scan(&h.Version, &appliedAt); err != nil {
+			return nil, err
+		}
+		h.AppliedAt = appliedAt.Format(time.RFC3339)
+		history = append(history, h)
+	}
+	return history, rows.Err()
+}
+
 // ApplyPendingMigrations runs all pending plugin migrations and updates the
 // health registry. Returns the results for each plugin.
 func (e *databaseExplorer) ApplyPendingMigrations(ctx context.Context) ([]database.PluginMigrationResult, error) {

internal/plugins/admin/handler.go

@@ -214,7 +214,18 @@ func (h *Handler) Dashboard(c echo.Context) error {
 		securityStats, _ = h.securityService.GetStats(ctx)
 	}
 
-	return middleware.Render(c, http.StatusOK, AdminDashboardPage(userCount, campaignCount, mediaFileCount, totalStorageBytes, smtpConfigured, addonCount, securityStats))
+	// Check for degraded plugins to show alert banner.
+	var degradedPlugins []string
+	if h.databaseExplorer != nil {
+		statuses, _ := h.databaseExplorer.GetMigrationStatus(ctx)
+		for _, s := range statuses {
+			if !s.Healthy || s.Pending > 0 {
+				degradedPlugins = append(degradedPlugins, s.Slug)
+			}
+		}
+	}
+
+	return middleware.Render(c, http.StatusOK, AdminDashboardPage(userCount, campaignCount, mediaFileCount, totalStorageBytes, smtpConfigured, addonCount, securityStats, degradedPlugins))
 }
 
 // --- Users ---

internal/templates/layouts/app.templ

@@ -524,6 +524,11 @@ templ AdminSidebarNav() {
 					<i class="fa-solid fa-database text-xs"></i>
 				</span>
 				Database
+				if GetDegradedPluginCount(ctx) > 0 {
+					<span class="ml-auto inline-flex items-center justify-center w-5 h-5 text-[10px] font-bold text-white bg-red-500 rounded-full">
+						{ fmt.Sprintf("%d", GetDegradedPluginCount(ctx)) }
+					</span>
+				}
 			</a>
 			<a
 				href="/admin/smtp"

internal/templates/layouts/data.go

@@ -39,7 +39,8 @@ const (
 	keyAccentColor       ctxKey = "layout_accent_color"
 	keyBrandName         ctxKey = "layout_brand_name"
 	keyBrandLogo         ctxKey = "layout_brand_logo"
-	keyTopbarStyle       ctxKey = "layout_topbar_style"
+	keyTopbarStyle           ctxKey = "layout_topbar_style"
+	keyDegradedPluginCount   ctxKey = "layout_degraded_plugin_count"
 )
 
 // SidebarEntityType holds the minimum entity type info needed for sidebar
@@ -471,6 +472,18 @@ func GetTopbarStyle(ctx context.Context) *TopbarStyleData {
 	return style
 }
 
+// SetDegradedPluginCount stores the number of unhealthy plugins in the context.
+// Used by the admin sidebar to show a warning badge on the Database link.
+func SetDegradedPluginCount(ctx context.Context, count int) context.Context {
+	return context.WithValue(ctx, keyDegradedPluginCount, count)
+}
+
+// GetDegradedPluginCount returns the number of unhealthy plugins, or 0.
+func GetDegradedPluginCount(ctx context.Context) int {
+	count, _ := ctx.Value(keyDegradedPluginCount).(int)
+	return count
+}
+
 // EscapeJSONString escapes a string for safe embedding inside a JSON
 // double-quoted value. Only handles the characters that could break
 // the JSON structure (backslash and double-quote).

static/js/widgets/db_explorer.js

@@ -88,6 +88,15 @@
           return;
         }
 
+        // Search bar.
+        var searchBar = document.createElement('div');
+        searchBar.className = 'flex items-center gap-2 px-4 py-2 border-b border-edge';
+        searchBar.innerHTML = '<i class="fa-solid fa-search text-xs text-fg-muted"></i>' +
+          '<input type="text" class="bg-transparent border-none outline-none text-sm text-fg flex-1" ' +
+          'placeholder="Search tables or columns..." data-db-search />' +
+          '<span class="text-xs text-fg-muted" data-db-search-count></span>';
+        el.appendChild(searchBar);
+
         var width = el.clientWidth || 900;
         var height = 600;
 
@@ -305,6 +314,61 @@
           }
         });
 
+        // Table/column search — highlights matching nodes and dims others.
+        var searchInput = el.querySelector('[data-db-search]');
+        var searchCount = el.querySelector('[data-db-search-count]');
+        var searchTimer = null;
+        if (searchInput) {
+          searchInput.addEventListener('input', function () {
+            clearTimeout(searchTimer);
+            searchTimer = setTimeout(function () {
+              var q = searchInput.value.trim().toLowerCase();
+              if (!q) {
+                // Reset: show all nodes at full opacity.
+                nodeGroups.attr('opacity', 1);
+                links.attr('opacity', 1);
+                linkLabels.attr('opacity', 1);
+                if (searchCount) searchCount.textContent = '';
+                return;
+              }
+
+              var matchCount = 0;
+              var matchSet = {};
+              nodeGroups.each(function (d) {
+                // Match table name or any column name.
+                var match = d.name.toLowerCase().indexOf(q) >= 0;
+                if (!match && d.columns) {
+                  for (var i = 0; i < d.columns.length; i++) {
+                    if (d.columns[i].name.toLowerCase().indexOf(q) >= 0) {
+                      match = true;
+                      break;
+                    }
+                  }
+                }
+                matchSet[d.id] = match;
+                if (match) matchCount++;
+                d3.select(this).attr('opacity', match ? 1 : 0.15);
+              });
+
+              // Dim edges not connecting matched nodes.
+              links.attr('opacity', function (d) {
+                var src = typeof d.source === 'object' ? d.source.id : d.source;
+                var tgt = typeof d.target === 'object' ? d.target.id : d.target;
+                return (matchSet[src] || matchSet[tgt]) ? 0.6 : 0.05;
+              });
+              linkLabels.attr('opacity', function (d) {
+                var src = typeof d.source === 'object' ? d.source.id : d.source;
+                var tgt = typeof d.target === 'object' ? d.target.id : d.target;
+                return (matchSet[src] || matchSet[tgt]) ? 0.8 : 0.05;
+              });
+
+              if (searchCount) {
+                searchCount.textContent = matchCount + ' / ' + nodes.length;
+              }
+            }, 150);
+          });
+        }
+
         // Simulation tick.
         simulation.on('tick', function () {
           links