Console Templates & UI Structure

Documentation of the template system and UI components.

Template Engine

Engine: Jinja2 Location: /opt/mcp-servers/nexus-console/templates/

Base Template

`base.html`

Purpose: Main layout template with sidebar navigation

Structure:

<!DOCTYPE html>
<html>
  <head>
    <title>{% block title %}Nexus Console{% endblock %}</title>
    <link rel="stylesheet" href="/static/style.css">
  </head>
  <body>
    <div class="console-layout">
      <!-- Sidebar -->
      <aside class="sidebar">
        <div class="sidebar-header">
          <div class="logo">⚡ Nexus Console</div>
        </div>
        <nav class="sidebar-nav">
          <!-- Navigation items -->
        </nav>
        <div class="sidebar-footer">
          <!-- User info & logout -->
        </div>
      </aside>

      <!-- Main Content -->
      <main class="main-content">
        <div class="content-header">
          {% block header %}{% endblock %}
        </div>
        <div class="content-body">
          {% block content %}{% endblock %}
        </div>
      </main>
    </div>
  </body>
</html>

Navigation Sections: 1. Environments - Track, KB, Sessions, Notes, Contacts, Chrono 2. Tools - Search

Environment Templates

Track Templates

track/projects.html - Project cards grouped by status (active, paused, completed, cancelled) - Status filter buttons - Progress bars per project - Task counts

track/project_detail.html - Single project header with status badge - Task list with status icons - Progress indicator - Task completion counts

KB Templates

kb/list.html - KB root cards with category icons - Category filter pills - Child count per root - Category distribution

kb/tree.html - Collapsible tree structure - JavaScript for expand/collapse - Nested sections and pages - Visual indicators for content

kb/node.html - Breadcrumb navigation - Node type badge (root/section/page) - Markdown content rendering - Children list - Tags display - Metadata footer

kb/search.html - Search form - Results with snippets - Path breadcrumbs - Result count

Session Templates

sessions/list.html - Current session highlighted - Historical sessions list - Session badges (active/archived) - Date formatting - Limit 50 recent sessions

sessions/detail.html - Session metadata - Objectives list - Work items timeline - Session ID display

Notes Templates

notes/list.html - Note cards - Note type indicators (idea/voice/session) - Timestamp display - Tag pills - Content preview

Contact Templates

contacts/list.html - Contact grid layout - Avatar initials - Category badges - Category filters - Search input

contacts/detail.html - Large avatar - Contact information grid - Email/phone links - Company info - Notes section - Tags - Delete button

Chrono Templates

chrono/list.html - Calendar container (FullCalendar) - Reminders list - Status icons - Priority indicators

Common Templates

`login.html`

Login form (username + PIN)
Error message display
Minimal layout (no sidebar)

`search.html`

Global search form
Results grouped by environment
Environment filter tabs
Result snippets

`error.html`

Error icon
Error message
Back link

UI Components

Structure:

<nav class="sidebar-nav">
  <div class="nav-section">
    <div class="nav-section-title">ENVIRONMENTS</div>
    <a href="/track" class="nav-item {% if section == 'track' %}active{% endif %}">
      <span class="nav-icon">📊</span>
      <span class="nav-label">Track</span>
    </a>
    <!-- More nav items -->
  </div>
</nav>

Active State: Uses {% if section == 'track' %}active{% endif %}

Project Cards

<div class="project-card {{ project.status }}">
  <div class="project-card-header">
    <h3>{{ project.title }}</h3>
    <span class="project-badge {{ project.status }}">{{ project.status }}</span>
  </div>
  <p class="project-desc">{{ project.description }}</p>
  <div class="project-meta">
    <span>{{ project.task_count }} tasks</span>
  </div>
  <div class="progress-bar">
    <div class="progress-fill" style="width: {{ project.progress }}%"></div>
  </div>
</div>

KB Cards

<div class="kb-card">
  <div class="kb-card-icon">{{ category_icon }}</div>
  <div class="kb-card-content">
    <h3>{{ kb.title }}</h3>
    <p>{{ kb.description }}</p>
    <div class="kb-card-meta">{{ kb.child_count }} items</div>
  </div>
</div>

Task Items

<div class="task-item {{ 'completed' if task.status == 'completed' }}">
  <div class="task-status">
    <span class="status-icon {{ task.status }}">
      {% if task.status == 'completed' %}✓{% else %}○{% endif %}
    </span>
  </div>
  <div class="task-content">
    <div class="task-title">{{ task.title }}</div>
    <div class="task-desc">{{ task.description }}</div>
  </div>
</div>

<div class="header-breadcrumb">
  {% for crumb in breadcrumb %}
    {% if not loop.last %}
      <a href="{{ url_for('kb_node', node_id=crumb.id) }}" class="breadcrumb-link">
        {{ crumb.title }}
      </a>
      <span class="breadcrumb-sep">/</span>
    {% else %}
      <span class="breadcrumb-current">{{ crumb.title }}</span>
    {% endif %}
  {% endfor %}
</div>

Jinja2 Filters

Markdown Filter

@app.template_filter('markdown')
def markdown_filter(text):
    if not text:
        return ''
    return Markup(markdown.markdown(text, extensions=['fenced_code', 'tables', 'toc']))

Usage:

<div class="markdown-body">
  {{ node.content | markdown }}
</div>

Extensions: - fenced_code - Code blocks with backticks - tables - Markdown tables - toc - Table of contents

JavaScript Components

KB Tree Expand/Collapse

// Tree view toggle
var toggler = document.getElementsByClassName("caret");
for (var i = 0; i < toggler.length; i++) {
  toggler[i].addEventListener("click", function() {
    this.parentElement.querySelector(".nested").classList.toggle("active");
    this.classList.toggle("caret-down");
  });
}

// Sidebar toggle
const sidebarToggle = document.querySelector('.sidebar-toggle');
const sidebar = document.querySelector('.sidebar');

sidebarToggle.addEventListener('click', () => {
  sidebar.classList.toggle('collapsed');
});

FullCalendar Integration

// Calendar initialization
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
  initialView: 'dayGridMonth',
  events: '/api/calendar/events',
  // Additional config
});
calendar.render();

Styling Notes

See /static/style.css for complete styling. Key features:

CSS Custom Properties - All colors defined as variables
Dark Theme - GitHub-inspired dark mode
Responsive - Sidebar collapses on mobile
Component-Based - Modular CSS classes
Transitions - Smooth hover effects

Theme Variables:

:root {
    --bg-primary: #0d1117;
    --bg-secondary: #161b22;
    --bg-tertiary: #21262d;
    --text-primary: #e6edf3;
    --text-secondary: #8b949e;
    --accent-blue: #58a6ff;
    --accent-green: #3fb950;
    --accent-purple: #a371f7;
}

Templates & UI