diff --git a/docs/consultations/gemini-trinity-console-2-round-5-response-2026-04-05.md b/docs/consultations/gemini-trinity-console-2-round-5-response-2026-04-05.md new file mode 100644 index 0000000..d784344 --- /dev/null +++ b/docs/consultations/gemini-trinity-console-2-round-5-response-2026-04-05.md @@ -0,0 +1,362 @@ +# Gemini Response: Trinity Console 2.0 — Round 5 (Branding & User Flow) + +**Date:** April 5, 2026 +**From:** Gemini (Architectural Partner) +**To:** Michael (The Wizard) + Claude (Chronicler #61) + Meg (The Emissary) +**Re:** Branding, design system, user profile, and logout + +--- + +Tell Meg she is 100% right. You cannot build the operational heart of a magical gaming community and make it look like a sterile 2014 accounting dashboard. + +The Trinity Console should feel like stepping into the Command Center of Firefrost. Dark, sleek, accented with elemental magic, and heavily functional. + +Here is the complete branding, design system, and user flow package to make that happen. + +--- + +## 1. The Brand Configuration (Tailwind) + +First, we need to inject the Firefrost DNA into Tailwind. We'll use your exact hex codes and add a few "surface" variations of your Dark (`#0F0F1E`) to create depth for cards and sidebars without breaking the color scheme. + +### `tailwind.config.js` + +```javascript +/** @type {import('tailwindcss').Config} */ +module.exports = { + content: ["./src/**/*.{ejs,js,html}"], + theme: { + extend: { + colors: { + fire: { + DEFAULT: '#FF6B35', + hover: '#E55A2A', + dim: 'rgba(255, 107, 53, 0.1)' + }, + frost: { + DEFAULT: '#4ECDC4', + hover: '#3EBAB1', + dim: 'rgba(78, 205, 196, 0.1)' + }, + arcane: { + DEFAULT: '#A855F7', + hover: '#9333EA', + dim: 'rgba(168, 85, 247, 0.1)' + }, + gold: { + DEFAULT: '#FFD700', + hover: '#E6C200', + dim: 'rgba(255, 215, 0, 0.1)' + }, + void: { + DEFAULT: '#0F0F1E', // Base background + surface: '#16162C', // Cards and panels + hover: '#1D1D3A', // Hover states + border: '#2A2A4A' // Subtle dividers + } + }, + fontFamily: { + sans: ['Inter', 'system-ui', 'sans-serif'], // Recommend Inter for clean UI + mono: ['JetBrains Mono', 'monospace'] + } + }, + }, + plugins: [ + require('@tailwindcss/forms'), // Highly recommended for clean form inputs + ], +} +``` + +--- + +## 2. The Master Layout & Navigation + +This assumes you are using `express-ejs-layouts`. It includes a mobile-friendly sidebar, the branded header, and the user dropdown Meg requested. + +### `views/layout.ejs` + +```html + + + + + + Trinity Console | Firefrost + + + + + + + +
+ + + +
+ +
+ + +
+ +
+ + +
+ My Profile +
+ Sign Out +
+
+
+ +
+ <%- body %> +
+
+ + + + +``` + +--- + +## 3. The Firefrost Component Library + +Store these snippets mentally or in a `partials` folder. This is how you structure the internal content of your modules. + +### Cards & Panels + +```html +
+

Server Matrix

+
+``` + +### Buttons + +```html + + + + + + + +``` + +### Form Inputs + +```html +
+ + +
+``` + +### Alerts & Badges + +```html +
+

Critical: Node NC1 is experiencing high latency.

+
+ +Online +Trinity Admin +``` + +--- + +## 4. Auth Routes & Profile Flow + +### `src/core/auth/routes.js` + +```javascript +const express = require('express'); +const router = express.Router(); +const db = require('../../db'); + +// --- LOGIN PAGE --- +router.get('/auth/login', (req, res) => { + // If already logged in, send to dashboard + if (req.user) return res.redirect('/dashboard'); + res.render('../src/core/auth/views/login', { layout: false }); // No sidebar layout +}); + +// --- LOGOUT ROUTE --- +router.get('/auth/logout', (req, res) => { + req.session.destroy((err) => { + if (err) console.error('Session destruction error:', err); + res.redirect('/auth/login?loggedOut=true'); + }); +}); + +// --- PROFILE PAGE --- +// Assuming standard layout protection is handled above this route +router.get('/profile', async (req, res) => { + if (!req.user) return res.redirect('/auth/login'); + + try { + // Fetch User's Role Name + const roleRes = await db.query(` + SELECT r.name + FROM user_roles ur + JOIN roles r ON ur.role_id = r.id + WHERE ur.user_id = $1`, + [req.user.id] + ); + const roleName = roleRes.rowCount > 0 ? roleRes.rows[0].name : 'Member'; + + // Fetch explicitly granted permissions (from your resolver logic) + const { fetchUserPermissions } = require('../permissions/resolver'); + const permissions = await fetchUserPermissions(db, req.user.id); + + res.render('../src/core/auth/views/profile', { + user: req.user, + roleName, + permissions: permissions.sort() + }); + } catch (error) { + console.error(error); + res.status(500).send("Error loading profile"); + } +}); + +module.exports = router; +``` + +--- + +## 5. Authentication Views + +### `src/core/auth/views/login.ejs` + +*(Note: Passed `layout: false` in the route so it renders independently)* + +```html + + + + + + Login | Trinity Console + + + +
+
+ +
+
+ +

Trinity Console

+

Command Center for Firefrost Gaming

+ + + + Sign in with Discord + +
+ + +``` + +### `src/core/auth/views/profile.ejs` + +```html +
+
+
+ + Avatar + +
+

<%= user.username %>

+

+ + Connected via Discord +

+
+ + <%= roleName %> + +
+
+
+ +
+

Active Permissions

+

These are the specific clearance levels assigned to you by the Trinity.

+ + <% if (permissions && permissions.length > 0) { %> +
+ <% permissions.forEach(perm => { %> +
+
+ <%= perm %> +
+ <% }) %> +
+ <% } else { %> +
+

No explicit permissions assigned to this profile.

+
+ <% } %> +
+
+``` + +--- + +## You Are Cleared for Deployment + +Michael, Claude, and Meg: You now have the exact styling, routing, and HTML necessary to build the framework of Trinity Console 2.0. Meg, your instinct was perfect—a tool built to manage magic should look magical itself. + +Log this final piece in your Ops Manual, and let me know when you successfully boot the Core Engine for the first time! + +--- + +*Response received April 5, 2026*