specmem-hardwicksoftware 3.5.99

package/dist/dashboard/public/shared-nav.js

@@ -0,0 +1,325 @@
+/**
+ * SPECMEM Shared Navigation Component
+ * Provides consistent navigation across all dashboard pages
+ */
+
+class SpecMemNavigation {
+    constructor(options = {}) {
+        this.currentPage = options.currentPage || this.detectCurrentPage();
+        this.navItems = options.navItems || this.getDefaultNavItems();
+        this.containerId = options.containerId || 'specmem-nav';
+        this.init();
+    }
+
+    detectCurrentPage() {
+        const path = window.location.pathname;
+        const filename = path.split('/').pop() || 'index.html';
+        return filename.replace('.html', '');
+    }
+
+    getDefaultNavItems() {
+        return [
+            {
+                id: 'index',
+                label: 'Dashboard',
+                shortLabel: 'Stats',
+                icon: '📊',
+                href: '/index.html',
+                section: 'stats',
+                description: 'Memory statistics and overview'
+            },
+            {
+                id: 'team-members',
+                label: 'Team Members',
+                icon: '👥',
+                href: '/team-members.html',
+                description: 'Active team members and communication'
+            },
+            {
+                id: 'team-member-history',
+                label: 'History',
+                icon: '📜',
+                href: '/team-member-history.html',
+                description: 'Team member activity history'
+            },
+            {
+                id: 'memory-recall',
+                label: 'Recall',
+                icon: '🔍',
+                href: '/memory-recall.html',
+                description: 'Search and recall memories'
+            },
+            {
+                id: 'memory-controls',
+                label: 'Controls',
+                shortLabel: 'Mem Ctrl',
+                icon: '📈',
+                href: '/memory-controls.html',
+                description: 'Memory management controls'
+            },
+            {
+                id: 'prompt-console',
+                label: 'Console',
+                icon: '💻',
+                href: '/prompt-console.html',
+                description: 'Interactive prompt console'
+            },
+            {
+                id: 'terminal',
+                label: 'Terminal',
+                icon: '⌨️',
+                href: '/terminal.html',
+                description: 'Live terminal viewer'
+            },
+            {
+                id: 'hooks',
+                label: 'Hooks',
+                icon: '🪝',
+                href: '/hooks.html',
+                description: 'Manage custom  hooks'
+            }
+        ];
+    }
+
+    init() {
+        this.render();
+        this.attachEventListeners();
+        this.highlightCurrentPage();
+    }
+
+    render() {
+        const container = document.getElementById(this.containerId);
+        if (!container) {
+            console.warn(`Navigation container #${this.containerId} not found`);
+            return;
+        }
+
+        const nav = document.createElement('nav');
+        nav.className = 'specmem-nav';
+        nav.setAttribute('role', 'navigation');
+        nav.setAttribute('aria-label', 'Main navigation');
+
+        this.navItems.forEach(item => {
+            const navItem = this.createNavItem(item);
+            nav.appendChild(navItem);
+        });
+
+        container.appendChild(nav);
+    }
+
+    createNavItem(item) {
+        const element = document.createElement('a');
+        element.href = item.href;
+        element.className = 'nav-item';
+        element.dataset.page = item.id;
+        element.dataset.section = item.section || '';
+        element.setAttribute('aria-label', item.description);
+        element.setAttribute('title', item.description);
+
+        // Icon
+        const icon = document.createElement('span');
+        icon.className = 'nav-icon';
+        icon.textContent = item.icon;
+        icon.setAttribute('aria-hidden', 'true');
+
+        // Label
+        const label = document.createElement('span');
+        label.className = 'nav-label';
+        label.textContent = item.shortLabel || item.label;
+
+        element.appendChild(icon);
+        element.appendChild(label);
+
+        return element;
+    }
+
+    highlightCurrentPage() {
+        const navItems = document.querySelectorAll('.nav-item');
+        navItems.forEach(item => {
+            const page = item.dataset.page;
+            if (page === this.currentPage ||
+                (this.currentPage === '' && page === 'index')) {
+                item.classList.add('active');
+                item.setAttribute('aria-current', 'page');
+            }
+        });
+    }
+
+    attachEventListeners() {
+        // Keyboard navigation
+        const navItems = document.querySelectorAll('.nav-item');
+        navItems.forEach((item, index) => {
+            item.addEventListener('keydown', (e) => {
+                if (e.key === 'ArrowDown' || e.key === 'ArrowRight') {
+                    e.preventDefault();
+                    const next = navItems[index + 1] || navItems[0];
+                    next.focus();
+                } else if (e.key === 'ArrowUp' || e.key === 'ArrowLeft') {
+                    e.preventDefault();
+                    const prev = navItems[index - 1] || navItems[navItems.length - 1];
+                    prev.focus();
+                }
+            });
+
+            // Touch feedback
+            item.addEventListener('touchstart', function() {
+                this.classList.add('touching');
+            });
+
+            item.addEventListener('touchend', function() {
+                this.classList.remove('touching');
+            });
+        });
+
+        // Add active state on click
+        navItems.forEach(item => {
+            item.addEventListener('click', (e) => {
+                // For section-based navigation (single-page apps)
+                if (item.dataset.section && typeof showSection === 'function') {
+                    e.preventDefault();
+                    navItems.forEach(n => n.classList.remove('active'));
+                    item.classList.add('active');
+                    showSection(item.dataset.section);
+                }
+            });
+        });
+    }
+
+    static injectStyles() {
+        const styleId = 'specmem-nav-styles';
+        if (document.getElementById(styleId)) return;
+
+        const style = document.createElement('style');
+        style.id = styleId;
+        style.textContent = `
+            .specmem-nav {
+                display: flex;
+                flex-direction: column;
+                gap: 4px;
+                padding: 10px 0;
+            }
+
+            .nav-item {
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                justify-content: center;
+                padding: 12px 8px;
+                cursor: pointer;
+                transition: all var(--transition-fast, 0.15s ease);
+                border-left: 3px solid transparent;
+                text-decoration: none;
+                color: var(--csgo-text, #e0e0e0);
+                position: relative;
+            }
+
+            .nav-item:hover {
+                background: rgba(255, 215, 0, 0.1);
+                border-left-color: var(--csgo-yellow, #FFD700);
+            }
+
+            .nav-item.active {
+                background: rgba(255, 215, 0, 0.15);
+                border-left-color: var(--csgo-yellow, #FFD700);
+            }
+
+            .nav-item.active::after {
+                content: '';
+                position: absolute;
+                right: 0;
+                top: 50%;
+                transform: translateY(-50%);
+                width: 4px;
+                height: 60%;
+                background: var(--csgo-yellow, #FFD700);
+                border-radius: 2px 0 0 2px;
+                box-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
+            }
+
+            .nav-icon {
+                font-size: 24px;
+                margin-bottom: 5px;
+                transition: all var(--transition-fast, 0.15s ease);
+                filter: grayscale(0.5);
+            }
+
+            .nav-item:hover .nav-icon,
+            .nav-item.active .nav-icon {
+                color: var(--csgo-yellow, #FFD700);
+                text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
+                filter: grayscale(0);
+                transform: scale(1.1);
+            }
+
+            .nav-label {
+                font-size: 9px;
+                text-transform: uppercase;
+                letter-spacing: 0.5px;
+                color: var(--csgo-text-dim, #888);
+                transition: color var(--transition-fast, 0.15s ease);
+            }
+
+            .nav-item:hover .nav-label,
+            .nav-item.active .nav-label {
+                color: var(--csgo-text, #e0e0e0);
+            }
+
+            .nav-item.touching {
+                background: rgba(255, 215, 0, 0.25) !important;
+                border-color: var(--csgo-yellow, #FFD700) !important;
+            }
+
+            /* Mobile responsive */
+            @media (max-width: 480px) {
+                .specmem-nav {
+                    flex-direction: row;
+                    overflow-x: auto;
+                    padding: 0;
+                    gap: 0;
+                }
+
+                .nav-item {
+                    flex: 0 0 auto;
+                    min-width: 60px;
+                    border-left: none;
+                    border-top: 3px solid transparent;
+                }
+
+                .nav-item:hover,
+                .nav-item.active {
+                    border-left: none;
+                    border-top-color: var(--csgo-yellow, #FFD700);
+                }
+
+                .nav-item.active::after {
+                    display: none;
+                }
+
+                .nav-icon {
+                    font-size: 20px;
+                    margin-bottom: 2px;
+                }
+
+                .nav-label {
+                    font-size: 8px;
+                }
+            }
+        `;
+
+        document.head.appendChild(style);
+    }
+}
+
+// Auto-inject styles when script loads
+if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', () => {
+        SpecMemNavigation.injectStyles();
+    });
+} else {
+    SpecMemNavigation.injectStyles();
+}
+
+// Export for use
+if (typeof module !== 'undefined' && module.exports) {
+    module.exports = SpecMemNavigation;
+}

package/dist/dashboard/public/shared-theme-blue.css

@@ -0,0 +1,331 @@
+/* ============================================
+ * SPECMEM SHARED THEME - BLUE/PURPLE VARIANT
+ * Modern blue/purple palette (matching Alpha's agents.html redesign)
+ * Alternative to shared-theme.css
+ * ============================================ */
+
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');
+
+/* CSS Variables - Modern Blue/Purple Theme */
+:root {
+    /* Primary Colors */
+    --primary-blue: #0EA5E9;
+    --primary-purple: #8B5CF6;
+    --accent-cyan: #06B6D4;
+
+    /* Background Colors */
+    --bg-primary: #0F172A;
+    --bg-secondary: #1E293B;
+    --bg-tertiary: #334155;
+    --bg-glass: rgba(15, 23, 42, 0.7);
+
+    /* Text Colors */
+    --text-primary: #F1F5F9;
+    --text-secondary: #CBD5E1;
+    --text-dim: #64748B;
+
+    /* Status Colors */
+    --status-success: #10B981;
+    --status-error: #EF4444;
+    --status-warning: #F59E0B;
+    --status-info: #0EA5E9;
+
+    /* UI Elements */
+    --border-primary: rgba(148, 163, 184, 0.1);
+    --border-accent: rgba(14, 165, 233, 0.3);
+
+    /* Gradients */
+    --gradient-primary: linear-gradient(135deg, var(--primary-blue), var(--primary-purple));
+    --gradient-glass: linear-gradient(135deg, rgba(14, 165, 233, 0.1), rgba(139, 92, 246, 0.1));
+
+    /* Animations */
+    --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+    --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+
+    /* Spacing */
+    --spacing-xs: 4px;
+    --spacing-sm: 8px;
+    --spacing-md: 16px;
+    --spacing-lg: 24px;
+    --spacing-xl: 32px;
+
+    /* Border Radius */
+    --radius-sm: 6px;
+    --radius-md: 8px;
+    --radius-lg: 12px;
+    --radius-xl: 16px;
+    --radius-full: 9999px;
+
+    /* Shadows */
+    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
+    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
+    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
+    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.6);
+    --shadow-glow: 0 0 20px rgba(14, 165, 233, 0.3);
+}
+
+/* Reset and Base Styles */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+    background: var(--bg-primary);
+    color: var(--text-primary);
+    min-height: 100vh;
+    overflow-x: hidden;
+    line-height: 1.6;
+}
+
+/* Animated background with gradient orbs */
+body::before {
+    content: '';
+    position: fixed;
+    top: -50%;
+    left: -50%;
+    width: 200%;
+    height: 200%;
+    background:
+        radial-gradient(circle at 20% 30%, rgba(14, 165, 233, 0.15) 0%, transparent 50%),
+        radial-gradient(circle at 80% 70%, rgba(139, 92, 246, 0.15) 0%, transparent 50%);
+    pointer-events: none;
+    z-index: 0;
+    animation: backgroundFloat 20s ease-in-out infinite;
+}
+
+@keyframes backgroundFloat {
+    0%, 100% { transform: translate(0, 0); }
+    50% { transform: translate(50px, 50px); }
+}
+
+/* Typography */
+h1, h2, h3, h4, h5, h6 {
+    font-weight: 600;
+    line-height: 1.2;
+}
+
+code, pre {
+    font-family: 'JetBrains Mono', 'Courier New', monospace;
+}
+
+/* Scrollbar Styling */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: var(--bg-secondary);
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--bg-tertiary);
+    border-radius: var(--radius-sm);
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: var(--primary-blue);
+}
+
+/* Selection */
+::selection {
+    background: var(--primary-blue);
+    color: var(--bg-primary);
+}
+
+/* Focus Styles for Accessibility */
+*:focus-visible {
+    outline: 2px solid var(--primary-blue);
+    outline-offset: 2px;
+}
+
+/* Glass Morphism Effect */
+.glass {
+    background: var(--bg-glass);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    border: 1px solid var(--border-primary);
+}
+
+/* Utility Classes */
+.text-primary { color: var(--text-primary); }
+.text-secondary { color: var(--text-secondary); }
+.text-dim { color: var(--text-dim); }
+.text-blue { color: var(--primary-blue); }
+.text-purple { color: var(--primary-purple); }
+.text-success { color: var(--status-success); }
+.text-error { color: var(--status-error); }
+.text-warning { color: var(--status-warning); }
+
+.bg-primary { background: var(--bg-primary); }
+.bg-secondary { background: var(--bg-secondary); }
+.bg-tertiary { background: var(--bg-tertiary); }
+.bg-gradient { background: var(--gradient-primary); }
+
+.glow-blue {
+    text-shadow: 0 0 10px rgba(14, 165, 233, 0.5);
+}
+
+.glow-purple {
+    text-shadow: 0 0 10px rgba(139, 92, 246, 0.5);
+}
+
+.shadow-glow {
+    box-shadow: var(--shadow-glow);
+}
+
+/* Animations */
+@keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+@keyframes slideInUp {
+    from {
+        transform: translateY(20px);
+        opacity: 0;
+    }
+    to {
+        transform: translateY(0);
+        opacity: 1;
+    }
+}
+
+@keyframes slideInRight {
+    from {
+        transform: translateX(-20px);
+        opacity: 0;
+    }
+    to {
+        transform: translateX(0);
+        opacity: 1;
+    }
+}
+
+@keyframes pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.5; }
+}
+
+@keyframes spin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+}
+
+@keyframes shimmer {
+    0% { background-position: -1000px 0; }
+    100% { background-position: 1000px 0; }
+}
+
+.fade-in { animation: fadeIn var(--transition-normal); }
+.slide-in-up { animation: slideInUp var(--transition-normal); }
+.slide-in-right { animation: slideInRight var(--transition-normal); }
+
+/* Button Styles */
+.btn {
+    padding: 10px 20px;
+    border-radius: var(--radius-md);
+    border: none;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all var(--transition-normal);
+    position: relative;
+    overflow: hidden;
+}
+
+.btn-primary {
+    background: var(--gradient-primary);
+    color: white;
+}
+
+.btn-primary:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-glow);
+}
+
+.btn-secondary {
+    background: var(--bg-tertiary);
+    color: var(--text-primary);
+}
+
+.btn-secondary:hover {
+    background: var(--bg-secondary);
+}
+
+/* Card Styles */
+.card {
+    background: var(--bg-glass);
+    backdrop-filter: blur(10px);
+    border: 1px solid var(--border-primary);
+    border-radius: var(--radius-lg);
+    padding: var(--spacing-lg);
+    transition: all var(--transition-normal);
+}
+
+.card:hover {
+    border-color: var(--border-accent);
+    transform: translateY(-4px);
+    box-shadow: var(--shadow-lg);
+}
+
+/* Badge Styles */
+.badge {
+    display: inline-block;
+    padding: 4px 12px;
+    border-radius: var(--radius-full);
+    font-size: 12px;
+    font-weight: 500;
+}
+
+.badge-blue {
+    background: rgba(14, 165, 233, 0.2);
+    color: var(--primary-blue);
+}
+
+.badge-purple {
+    background: rgba(139, 92, 246, 0.2);
+    color: var(--primary-purple);
+}
+
+.badge-success {
+    background: rgba(16, 185, 129, 0.2);
+    color: var(--status-success);
+}
+
+/* Responsive Breakpoints */
+@media (max-width: 1200px) {
+    :root {
+        --spacing-xl: 24px;
+        --spacing-lg: 20px;
+    }
+}
+
+@media (max-width: 768px) {
+    :root {
+        --spacing-xl: 20px;
+        --spacing-lg: 16px;
+    }
+}
+
+@media (max-width: 480px) {
+    :root {
+        --spacing-xl: 16px;
+        --spacing-lg: 12px;
+        --spacing-md: 12px;
+    }
+}
+
+/* Accessibility */
+@media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.01ms !important;
+    }
+}