Merge pull request #116 from keyxmakerx/claude/fix-navbar-features-page-8RZuE

Claude/fix navbar features page 8 r zu e

Author: keyxmakerx

.ai/status.md

@@ -8,6 +8,11 @@
 <!-- ====================================================================== -->
 
 ## Last Updated
+2026-03-11 -- **Sprint W-0.5: Visual Customization + Admin DB Explorer (IN PROGRESS).**
+
+26. Admin Database Explorer: New `/admin/database` page with interactive D3.js schema diagram showing all tables, FK relationships, plugin grouping, and migration status. Table detail panel on click. "Apply Pending Migrations" button (fixes sessions table missing issue). Removed "Manual DB Record (Advanced)" form from Features page. New files: `database_service.go` (info_schema introspection), `database.templ`, `db_explorer.js` widget. Added `LatestMigrationVersion()` to database package. Dashboard card + sidebar link.
+
+### Previous Update
 2026-03-11 -- **Sprint W-0.5: Visual Customization (IN PROGRESS).**
 
 25. Starting W-0.5: Per-campaign brand name/logo, topbar color/gradient/image customization, visual editor Appearance tab in Customization Hub. Also fixing 3 bugs from W-0 (event listener leak in sidebar_tree.js, touch listener cleanup in sidebar_reorg.js, ES2020 optional chaining compat) and updating stale entity/campaign documentation.

internal/app/routes.go

@@ -861,6 +861,10 @@ func (a *App) RegisterRoutes() {
 	hygieneScanner := admin.NewHygieneService(a.DB, mediaRepo, mediaService, a.Config.Upload.MediaPath, securityRepo)
 	adminHandler.SetHygieneScanner(hygieneScanner)
 
+	// Database explorer: schema visualization and migration management.
+	dbExplorer := admin.NewDatabaseExplorer(a.DB, a.PluginHealth)
+	adminHandler.SetDatabaseExplorer(dbExplorer)
+
 	// Wire security event logging into the auth handler so logins, logouts,
 	// failed attempts, and password resets are recorded automatically.
 	authHandler.SetSecurityLogger(securityService)
@@ -1291,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/database/plugin_schema.go

@@ -323,6 +323,42 @@ func splitPluginStatements(sql string) []string {
 	return stmts
 }
 
+// LatestMigrationVersion returns the highest migration version number found
+// in a plugin's migrations directory. Returns 0 if no migrations exist.
+func LatestMigrationVersion(migrationsDir string) (int, error) {
+	if _, err := os.Stat(migrationsDir); err != nil {
+		if os.IsNotExist(err) {
+			return 0, nil
+		}
+		return 0, err
+	}
+
+	entries, err := os.ReadDir(migrationsDir)
+	if err != nil {
+		return 0, err
+	}
+
+	highest := 0
+	for _, entry := range entries {
+		if entry.IsDir() {
+			continue
+		}
+		matches := pluginMigrationFileRe.FindStringSubmatch(entry.Name())
+		if len(matches) < 2 {
+			continue
+		}
+		v, err := strconv.Atoi(matches[1])
+		if err != nil {
+			continue
+		}
+		if v > highest {
+			highest = v
+		}
+	}
+
+	return highest, nil
+}
+
 // RegisteredPlugins returns the list of built-in plugins that have schema
 // migrations. The MigrationsDir paths are relative to the working directory.
 func RegisteredPlugins() []PluginSchema {

internal/plugins/addons/admin_addons.templ

@@ -68,80 +68,6 @@ templ AdminAddonsPageTempl(addons []Addon, csrfToken string) {
 				</div>
 			}
 
-			// Direct DB record creation — admin failover only.
-			<details class="group">
-				<summary class="card p-4 cursor-pointer border-2 border-red-300 dark:border-red-800 bg-red-50/50 dark:bg-red-950/20 list-none">
-					<div class="flex items-center gap-3">
-						<span class="w-8 h-8 rounded-lg bg-red-100 dark:bg-red-900/40 flex items-center justify-center shrink-0">
-							<i class="fa-solid fa-triangle-exclamation text-red-600 dark:text-red-400"></i>
-						</span>
-						<div>
-							<h3 class="text-sm font-semibold text-red-700 dark:text-red-400">Manual DB Record (Advanced)</h3>
-							<p class="text-xs text-red-600/70 dark:text-red-400/60">
-								Creates a raw addon database record. Use only as a failover — features should come from plugins or extensions.
-							</p>
-						</div>
-						<i class="fa-solid fa-chevron-down text-red-400 ml-auto transition-transform group-open:rotate-180"></i>
-					</div>
-				</summary>
-				<div class="card p-6 mt-1 border-2 border-red-300 dark:border-red-800">
-					<div class="flex items-start gap-3 p-3 rounded-lg bg-red-50 dark:bg-red-950/30 border border-red-200 dark:border-red-800 mb-4">
-						<i class="fa-solid fa-exclamation-circle text-red-500 mt-0.5"></i>
-						<p class="text-xs text-red-700 dark:text-red-300 leading-relaxed">
-							This creates a metadata-only record with no backing code. The record cannot be activated
-							until matching plugin code is deployed. Prefer installing extensions via the Content Packs
-							page instead.
-						</p>
-					</div>
-					<form
-						method="POST"
-						action="/admin/addons"
-						hx-post="/admin/addons"
-						class="grid grid-cols-1 md:grid-cols-2 gap-4"
-					>
-						<input type="hidden" name="csrf_token" value={ csrfToken }/>
-						<div>
-							<label for="slug" class="block text-sm font-medium text-fg-body mb-1">Slug</label>
-							<input type="text" id="slug" name="slug" required class="input w-full" placeholder="my-addon"/>
-						</div>
-						<div>
-							<label for="name" class="block text-sm font-medium text-fg-body mb-1">Name</label>
-							<input type="text" id="name" name="name" required class="input w-full" placeholder="My Addon"/>
-						</div>
-						<div class="md:col-span-2">
-							<label for="description" class="block text-sm font-medium text-fg-body mb-1">Description</label>
-							<textarea id="description" name="description" class="input w-full h-20" placeholder="What does this addon do?"></textarea>
-						</div>
-						<div>
-							<label for="version" class="block text-sm font-medium text-fg-body mb-1">Version</label>
-							<input type="text" id="version" name="version" class="input w-full" placeholder="1.0.0"/>
-						</div>
-						<div>
-							<label for="category" class="block text-sm font-medium text-fg-body mb-1">Category</label>
-							<select id="category" name="category" required class="input w-full">
-								<option value="plugin">Feature</option>
-								<option value="widget">Widget</option>
-								<option value="integration">Integration</option>
-							</select>
-						</div>
-						<div>
-							<label for="icon" class="block text-sm font-medium text-fg-body mb-1">Icon</label>
-							<input type="text" id="icon" name="icon" class="input w-full" placeholder="fa-puzzle-piece"/>
-						</div>
-						<div>
-							<label for="author" class="block text-sm font-medium text-fg-body mb-1">Author</label>
-							<input type="text" id="author" name="author" class="input w-full" placeholder="Chronicle"/>
-						</div>
-						<div class="md:col-span-2 flex justify-end">
-							<button type="submit" class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-red-600 hover:bg-red-700 rounded-lg transition-colors">
-								<i class="fa-solid fa-database text-xs"></i>
-								Create DB Record
-							</button>
-						</div>
-					</form>
-				</div>
-			</details>
-
 			// Info panel.
 			<div class="card p-6">
 				<div class="flex items-start gap-4">

internal/plugins/admin/.ai.md

@@ -21,13 +21,15 @@ Plugin (Infrastructure -- admin-only)
 
 | File | Purpose |
 |------|---------|
-| handler.go | Dashboard, Users, ToggleAdmin, Campaigns, DeleteCampaign, JoinCampaign, LeaveCampaign, Modules |
+| handler.go | Dashboard, Users, ToggleAdmin, Campaigns, DeleteCampaign, JoinCampaign, LeaveCampaign, Modules, Database, DatabaseSchemaAPI, ApplyMigrationsAPI |
 | routes.go | /admin group with auth + admin middleware, delegates SMTP/settings/storage routes |
-| dashboard.templ | Overview stats (user count, campaign count, SMTP status, modules) |
+| database_service.go | DatabaseExplorer interface + info_schema introspection + migration status |
+| dashboard.templ | Overview stats (user count, campaign count, SMTP status, modules, database) |
 | users.templ | Paginated user list with admin toggle buttons |
 | campaigns.templ | All campaigns with join/leave/delete actions |
 | modules.templ | Module management page (card grid, status badges, content categories) |
 | storage.templ | Combined storage usage + storage settings (tabbed page) |
+| database.templ | Schema explorer with migration cards + D3 widget mount |
 
 ## Dependencies
 
@@ -50,6 +52,9 @@ Plugin (Infrastructure -- admin-only)
 | POST | /admin/smtp/test | (SMTP handler) | Test SMTP connection |
 | GET | /admin/modules | Modules | Module management page |
 | GET | /admin/storage | (Storage handler) | Combined storage + settings page |
+| GET | /admin/database | Database | Schema explorer + migration status |
+| GET | /admin/database/schema | DatabaseSchemaAPI | Schema JSON for D3 widget |
+| POST | /admin/database/migrations/apply | ApplyMigrationsAPI | Run pending plugin migrations |
 
 ## Current State
 
@@ -62,4 +67,5 @@ Plugin (Infrastructure -- admin-only)
 - [x] Module registry (`internal/modules/registry.go`) with D&D 5e, Pathfinder 2e, Draw Steel
 - [x] Dashboard uses semantic color tokens for dark mode
 - [x] Collapsible sidebar with modules section
+- [x] Database explorer (D3.js schema diagram, migration status, apply migrations)
 - [ ] Tests written

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 -->
@@ -108,6 +126,25 @@ templ AdminDashboardPage(userCount, campaignCount, mediaFileCount int, totalStor
 					<p class="text-lg font-semibold text-fg mt-2">Orphan Cleanup</p>
 					<p class="text-xs text-fg-muted mt-1 group-hover:text-accent transition-colors">Scan &amp; clean &rarr;</p>
 				</a>
+				<!-- Database -->
+				<a href="/admin/database" class="card hover:shadow-md transition-shadow group">
+					<div class="flex items-center justify-between">
+						<p class="text-sm font-medium text-fg-secondary">Database</p>
+						<span class="w-10 h-10 rounded-lg bg-slate-50 dark:bg-slate-900/30 flex items-center justify-center">
+							<i class="fa-solid fa-database text-slate-500"></i>
+						</span>
+					</div>
+					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">
 					<div class="flex items-center justify-between">