appmanager-server 0.2.0__py3-none-any.whl

appmanager/templates/admin/flairs.html

@@ -0,0 +1,90 @@
+{% extends "base.html" %}
+
+{% block title %}Manage User Flairs - AppManager{% endblock %}
+
+{% block extra_css %}
+<style>
+    .flair-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 1rem; }
+    .table-container { overflow-x: auto; margin-top: 1rem; }
+    table { width: 100%; border-collapse: collapse; text-align: left; font-size: 0.9rem; }
+    th, td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-color); }
+    th { background: rgba(15, 23, 42, 0.8); color: var(--text-muted); font-weight: 600; text-transform: uppercase; font-size: 0.75rem; }
+    .flair-badge-preview { display: inline-block; padding: 3px 10px; border-radius: 9999px; font-size: 0.8rem; font-weight: 600; }
+    .preset-btn { cursor: pointer; border: 1px solid transparent; padding: 0.4rem 0.8rem; border-radius: 6px; font-size: 0.8rem; font-weight: 500; transition: transform 0.1s; }
+    .preset-btn:hover { transform: translateY(-1px); }
+</style>
+{% endblock %}
+
+{% block content %}
+<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem;">
+    <div>
+        <h1 style="font-size: 1.8rem; font-weight: 700;">🏷️ Manage User Flairs & Titles</h1>
+        <p style="color: var(--text-muted);">Assign custom title badges and colors to platform members</p>
+    </div>
+    <div style="display: flex; gap: 0.5rem;">
+        <a href="/admin/users" class="btn btn-secondary">👥 Members List</a>
+        <a href="/admin" class="btn btn-secondary">↩ Admin Dashboard</a>
+    </div>
+</div>
+
+<div class="flair-grid">
+    <!-- Presets Card -->
+    <div class="card">
+        <h3 style="font-size: 1.1rem; font-weight: 600; margin-bottom: 1rem; color: #a855f7;">Preset Flair Badges</h3>
+        <p style="font-size: 0.85rem; color: var(--text-muted); margin-bottom: 1rem;">Click any preset flair to quickly apply it in the user assignment table on the right.</p>
+        <div style="display: flex; flex-direction: column; gap: 0.6rem;">
+            {% for preset in presets %}
+                <div style="display: flex; justify-content: space-between; align-items: center; background: rgba(15, 23, 42, 0.6); padding: 0.6rem 0.8rem; border-radius: 8px; border: 1px solid var(--border-color);">
+                    <span class="flair-badge-preview" style="background: {{ preset.color }}22; color: {{ preset.color }}; border: 1px solid {{ preset.color }}44;">{{ preset.title }}</span>
+                    <span style="font-size: 0.75rem; color: var(--text-muted);">Color: <code>{{ preset.color }}</code></span>
+                </div>
+            {% endfor %}
+        </div>
+    </div>
+
+    <!-- Assigned Flairs Card -->
+    <div class="card">
+        <h3 style="font-size: 1.1rem; font-weight: 600; margin-bottom: 1rem;">Member Flair Assignments</h3>
+        <div class="table-container">
+            <table>
+                <thead>
+                    <tr>
+                        <th>Member</th>
+                        <th>Current Flair</th>
+                        <th>Assign / Update</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {% for u in users %}
+                    {% set f = user_flairs.get(u.id) %}
+                    <tr>
+                        <td>
+                            <strong>{{ u.name or u.email }}</strong>
+                            <div style="font-size: 0.75rem; color: var(--text-muted);">{{ u.email }}</div>
+                        </td>
+                        <td>
+                            {% if f and f.title %}
+                                <span class="flair-badge-preview" style="background: {{ f.color }}22; color: {{ f.color }}; border: 1px solid {{ f.color }}44;">{{ f.title }}</span>
+                            {% else %}
+                                <span style="font-size: 0.75rem; color: var(--text-muted);">No Flair</span>
+                            {% endif %}
+                        </td>
+                        <td>
+                            <form action="/admin/flairs" method="POST" style="display: flex; gap: 0.4rem; align-items: center;">
+                                <input type="hidden" name="user_id" value="{{ u.id }}">
+                                <input type="text" name="flair_title" placeholder="Flair title..." value="{{ f.title if f else '' }}" class="form-input" style="width: 130px; padding: 0.3rem; font-size: 0.8rem; background: #0f172a; border: 1px solid #334155; color: white; border-radius: 4px;">
+                                <input type="color" name="flair_color" value="{{ f.color if f else '#a855f7' }}" style="height: 28px; width: 32px; padding: 0; border: none; background: none; cursor: pointer;">
+                                <button type="submit" name="action" value="save" class="btn btn-primary" style="padding: 0.3rem 0.6rem; font-size: 0.75rem;">Save</button>
+                                {% if f and f.title %}
+                                    <button type="submit" name="action" value="clear" class="btn btn-secondary" style="padding: 0.3rem 0.5rem; font-size: 0.75rem; color: #f87171;" title="Clear Flair">✕</button>
+                                {% endif %}
+                            </form>
+                        </td>
+                    </tr>
+                    {% endfor %}
+                </tbody>
+            </table>
+        </div>
+    </div>
+</div>
+{% endblock %}

appmanager/templates/admin/permissions.html

@@ -0,0 +1,88 @@
+{% extends "base.html" %}
+
+{% block title %}App Access Permissions - AppManager{% endblock %}
+
+{% block extra_css %}
+<style>
+    .matrix-table {
+        width: 100%;
+        border-collapse: collapse;
+        text-align: center;
+        font-size: 0.9rem;
+    }
+    .matrix-table th, .matrix-table td {
+        padding: 0.75rem 1rem;
+        border: 1px solid var(--border-color);
+    }
+    .matrix-table th {
+        background: rgba(15, 23, 42, 0.8);
+    }
+    .matrix-table th.user-col {
+        text-align: left;
+    }
+    .checkbox-cell {
+        transform: scale(1.2);
+        cursor: pointer;
+    }
+</style>
+{% endblock %}
+
+{% block content %}
+<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem;">
+    <div>
+        <h1 style="font-size: 1.8rem; font-weight: 700;">App Access Permissions Matrix</h1>
+        <p style="color: var(--text-muted);">Manage which users have access to specific installed Flask sub-apps</p>
+    </div>
+    <a href="/admin" class="btn btn-secondary">&larr; Back to Admin Dashboard</a>
+</div>
+
+<div class="card">
+    {% if users and apps %}
+        <form action="/admin/permissions" method="POST">
+            <div style="overflow-x: auto; margin-bottom: 1.5rem;">
+                <table class="matrix-table">
+                    <thead>
+                        <tr>
+                            <th class="user-col">User / Email</th>
+                            <th class="user-col">Role</th>
+                            {% for app in apps %}
+                                <th>
+                                    <div>{{ app.name }}</div>
+                                    <div style="font-size: 0.75rem; color: var(--text-muted); font-weight: normal;">/apps/{{ app.slug }}</div>
+                                </th>
+                            {% endfor %}
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {% for u in users %}
+                            <tr>
+                                <td class="user-col">
+                                    <strong>{{ u.name or u.email }}</strong><br>
+                                    <span style="font-size: 0.8rem; color: var(--text-muted);">{{ u.email }}</span>
+                                </td>
+                                <td class="user-col">
+                                    <span style="font-size: 0.75rem; padding: 0.2rem 0.5rem; border-radius: 4px; background: rgba(99, 102, 241, 0.2); color: #818cf8;">{{ u.role }}</span>
+                                </td>
+                                {% for app in apps %}
+                                    {% set is_checked = perms_map.get((u.id, app.id), True) %}
+                                    <td>
+                                        {% if u.is_admin() %}
+                                            <span style="color: #4ade80; font-size: 0.8rem;">Full Access (Admin)</span>
+                                        {% else %}
+                                            <input type="checkbox" name="perm_{{ u.id }}_{{ app.id }}" value="1" class="checkbox-cell" {% if is_checked %}checked{% endif %}>
+                                        {% endif %}
+                                    </td>
+                                {% endfor %}
+                            </tr>
+                        {% endfor %}
+                    </tbody>
+                </table>
+            </div>
+
+            <button type="submit" class="btn btn-primary">Save Permission Changes</button>
+        </form>
+    {% else %}
+        <p style="color: var(--text-muted);">You need both registered users and installed sub-apps to manage permissions.</p>
+    {% endif %}
+</div>
+{% endblock %}

appmanager/templates/admin/roles.html

@@ -0,0 +1,119 @@
+{% extends "base.html" %}
+
+{% block title %}Role Management - AppManager{% endblock %}
+
+{% block extra_css %}
+<style>
+    .roles-grid {
+        display: grid;
+        grid-template-columns: 1fr 2fr;
+        gap: 1.5rem;
+        margin-bottom: 2rem;
+    }
+    @media (max-width: 900px) {
+        .roles-grid { grid-template-columns: 1fr; }
+    }
+    .table-container { overflow-x: auto; margin-top: 0.5rem; }
+    table { width: 100%; border-collapse: collapse; text-align: left; font-size: 0.9rem; }
+    th, td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-color); }
+    th { background: rgba(15, 23, 42, 0.8); color: var(--text-muted); font-weight: 600; text-transform: uppercase; font-size: 0.75rem; }
+    .role-badge { display: inline-block; padding: 2px 8px; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; }
+    .badge-system { background: rgba(168, 85, 247, 0.2); color: #c084fc; border: 1px solid rgba(168, 85, 247, 0.3); }
+    .badge-custom { background: rgba(99, 102, 241, 0.2); color: #818cf8; border: 1px solid rgba(99, 102, 241, 0.3); }
+    .form-group { margin-bottom: 1.2rem; }
+    .form-label { display: block; font-size: 0.85rem; font-weight: 500; margin-bottom: 0.4rem; color: var(--text-main); }
+    .form-input { width: 100%; padding: 0.6rem 0.8rem; border-radius: 6px; border: 1px solid var(--border-color); background-color: rgba(15, 23, 42, 0.8); color: var(--text-main); font-size: 0.9rem; }
+    .form-input:focus { outline: none; border-color: var(--primary); }
+</style>
+{% endblock %}
+
+{% block content %}
+<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem;">
+    <div>
+        <h1 style="font-size: 1.8rem; font-weight: 700;">Role Management</h1>
+        <p style="color: var(--text-muted);">Create custom member roles, assign permissions, and organize portal access levels</p>
+    </div>
+    <div style="display: flex; gap: 0.5rem;">
+        <a href="/admin/users" class="btn btn-secondary">👥 Member List</a>
+        <a href="/admin/permissions" class="btn btn-secondary">📊 Permissions Matrix</a>
+        <a href="/admin" class="btn btn-secondary">↩ Admin Dashboard</a>
+    </div>
+</div>
+
+<div class="roles-grid">
+    <!-- Create Role Card -->
+    <div class="card">
+        <h2 style="font-size: 1.2rem; font-weight: 600; margin-bottom: 1rem;">➕ Create New Role</h2>
+        <form action="/admin/roles/create" method="POST">
+            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
+            <div class="form-group">
+                <label class="form-label">Role Display Name</label>
+                <input type="text" name="name" class="form-input" placeholder="e.g. Content Editor" required>
+            </div>
+            <div class="form-group">
+                <label class="form-label">Role Slug (identifier)</label>
+                <input type="text" name="slug" class="form-input" placeholder="e.g. content-editor (optional)">
+            </div>
+            <div class="form-group">
+                <label class="form-label">Description</label>
+                <textarea name="description" class="form-input" style="height: 80px; resize: vertical;" placeholder="Describe what responsibilities or access this role grants..."></textarea>
+            </div>
+            <button type="submit" class="btn btn-primary" style="width: 100%;">Create Custom Role</button>
+        </form>
+    </div>
+
+    <!-- Defined Roles Table -->
+    <div class="card">
+        <h2 style="font-size: 1.2rem; font-weight: 600; margin-bottom: 1rem;">🛡️ Configured Roles ({{ roles|length }})</h2>
+        <div class="table-container">
+            <table>
+                <thead>
+                    <tr>
+                        <th>Role Name</th>
+                        <th>Slug</th>
+                        <th>Type</th>
+                        <th>Members</th>
+                        <th>Description</th>
+                        <th>Actions</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {% for r in roles %}
+                    <tr>
+                        <td>
+                            <strong>{{ r.name }}</strong>
+                        </td>
+                        <td><code>{{ r.slug }}</code></td>
+                        <td>
+                            {% if r.is_system %}
+                                <span class="role-badge badge-system">System Core</span>
+                            {% else %}
+                                <span class="role-badge badge-custom">Custom</span>
+                            {% endif %}
+                        </td>
+                        <td>
+                            <span style="font-weight: 600; color: #38bdf8;">{{ role_counts.get(r.slug, 0) }}</span> user(s)
+                        </td>
+                        <td style="color: var(--text-muted); font-size: 0.85rem; max-width: 200px;">
+                            {{ r.description or 'No description provided.' }}
+                        </td>
+                        <td>
+                            <div style="display: flex; gap: 0.4rem; align-items: center;">
+                                {% if not r.is_system %}
+                                    <form action="/admin/roles/{{ r.id }}/delete" method="POST" onsubmit="return confirm('Delete custom role {{ r.name }}? Members assigned this role will be reassigned to standard user.');" style="margin:0;">
+                                        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
+                                        <button type="submit" class="btn btn-danger" style="padding: 0.25rem 0.5rem; font-size: 0.75rem;">Delete</button>
+                                    </form>
+                                {% else %}
+                                    <span style="font-size: 0.75rem; color: var(--text-muted); opacity: 0.6;">Protected</span>
+                                {% endif %}
+                            </div>
+                        </td>
+                    </tr>
+                    {% endfor %}
+                </tbody>
+            </table>
+        </div>
+    </div>
+</div>
+{% endblock %}

appmanager/templates/admin/users.html

@@ -0,0 +1,156 @@
+{% extends "base.html" %}
+
+{% block title %}User Management & Activity Tracking - AppManager{% endblock %}
+
+{% block extra_css %}
+<style>
+    .table-container { overflow-x: auto; margin-top: 1rem; }
+    table { width: 100%; border-collapse: collapse; text-align: left; font-size: 0.9rem; }
+    th, td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-color); }
+    th { background: rgba(15, 23, 42, 0.8); color: var(--text-muted); font-weight: 600; text-transform: uppercase; font-size: 0.75rem; }
+    .status-badge { display: inline-block; padding: 2px 8px; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; }
+    .badge-online { background: rgba(34, 197, 94, 0.2); color: #4ade80; }
+    .badge-offline { background: rgba(148, 163, 184, 0.2); color: #94a3b8; }
+    .badge-admin { background: rgba(168, 85, 247, 0.2); color: #c084fc; border: 1px solid rgba(168, 85, 247, 0.3); }
+    .badge-user { background: rgba(99, 102, 241, 0.2); color: #818cf8; border: 1px solid rgba(99, 102, 241, 0.3); }
+    .edit-box { background: rgba(15, 23, 42, 0.6); padding: 1rem; border-radius: 8px; border: 1px solid var(--border-color); margin-top: 0.5rem; }
+</style>
+{% endblock %}
+
+{% block content %}
+<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem;">
+    <div>
+        <h1 style="font-size: 1.8rem; font-weight: 700;">User Management & Member Tracking</h1>
+        <p style="color: var(--text-muted);">Monitor real-time online status, login metrics, and manage user roles and permissions</p>
+    </div>
+    <div style="display: flex; gap: 0.5rem;">
+        <a href="/admin/roles" class="btn btn-secondary">🛡️ Manage Roles</a>
+        <a href="/admin/flairs" class="btn btn-secondary">🏷️ Manage Flairs</a>
+        <a href="/admin/permissions" class="btn btn-secondary">📊 Matrix View</a>
+        <a href="/admin" class="btn btn-secondary">↩ Admin Dashboard</a>
+    </div>
+</div>
+
+<div class="card">
+    <h2 style="font-size: 1.2rem; font-weight: 600; margin-bottom: 1rem;">Registered Members</h2>
+    <div class="table-container">
+        <table>
+            <thead>
+                <tr>
+                    <th>User / Email</th>
+                    <th>Status</th>
+                    <th>Role</th>
+                    <th>Registration Date</th>
+                    <th>Last Login</th>
+                    <th>Logins</th>
+                    <th>Last IP</th>
+                    <th>Actions</th>
+                </tr>
+            </thead>
+            <tbody>
+                {% for u in users %}
+                <tr>
+                    <td>
+                        <strong>{{ u.name or u.email }}</strong> {{ render_user_flair_badge(u.id) }}
+                        <div style="font-size: 0.8rem; color: var(--text-muted);">{{ u.email }}</div>
+                    </td>
+                    <td>
+                        {% if u.is_online() %}
+                            <span class="status-badge badge-online">🟢 Online</span>
+                        {% else %}
+                            <span class="status-badge badge-offline">⚪ Offline</span>
+                        {% endif %}
+                        {% if not u.is_active %}
+                            <span class="status-badge" style="background: rgba(239, 68, 68, 0.2); color: #f87171;">Disabled</span>
+                        {% endif %}
+                    </td>
+                    <td>
+                        {% if u.role == 'admin' %}
+                            <span class="status-badge badge-admin">Admin</span>
+                        {% else %}
+                            <span class="status-badge badge-user">User</span>
+                        {% endif %}
+                    </td>
+                    <td>{{ u.created_at.strftime('%Y-%m-%d') if u.created_at else 'N/A' }}</td>
+                    <td>{{ u.last_login_at.strftime('%Y-%m-%d %H:%M') if u.last_login_at else 'Never' }}</td>
+                    <td><code>{{ u.login_count }}</code></td>
+                    <td><code>{{ u.last_ip or 'N/A' }}</code></td>
+                    <td>
+                        <button onclick="document.getElementById('edit-user-{{ u.id }}').style.display = (document.getElementById('edit-user-{{ u.id }}').style.display === 'none' ? 'block' : 'none')" class="btn btn-secondary" style="padding: 0.3rem 0.6rem; font-size: 0.8rem;">Edit User</button>
+                    </td>
+                </tr>
+                <tr id="edit-user-{{ u.id }}" style="display: none; background: rgba(30, 41, 59, 0.4);">
+                    <td colspan="8">
+                        <div class="edit-box">
+                            <h4 style="margin-bottom: 0.75rem; font-size: 0.95rem; color: #38bdf8;">Edit Member Details & App Access: {{ u.email }}</h4>
+                            {% set curr_flair = get_user_flair(u.id) %}
+                            <form action="/admin/users/{{ u.id }}/edit" method="POST">
+                                <div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; margin-bottom: 1rem;">
+                                    <div>
+                                        <label style="display:block; font-size:0.8rem; margin-bottom:0.3rem;">Display Name</label>
+                                        <input type="text" name="name" value="{{ u.name or '' }}" class="form-input" style="width:100%; padding:0.4rem; background:#0f172a; border:1px solid #334155; color:white; border-radius:4px;">
+                                    </div>
+                                    <div>
+                                        <label style="display:block; font-size:0.8rem; margin-bottom:0.3rem;">Assigned Role</label>
+                                        <select name="role" style="width:100%; padding:0.4rem; background:#0f172a; border:1px solid #334155; color:white; border-radius:4px;">
+                                            {% if roles %}
+                                                {% for r in roles %}
+                                                    <option value="{{ r.slug }}" {% if u.role == r.slug %}selected{% endif %}>{{ r.name }}</option>
+                                                {% endfor %}
+                                            {% else %}
+                                                <option value="user" {% if u.role == 'user' %}selected{% endif %}>User</option>
+                                                <option value="admin" {% if u.role == 'admin' %}selected{% endif %}>Admin</option>
+                                            {% endif %}
+                                        </select>
+                                    </div>
+                                    <div>
+                                        <label style="display:block; font-size:0.8rem; margin-bottom:0.3rem;">Account Status</label>
+                                        <select name="is_active" style="width:100%; padding:0.4rem; background:#0f172a; border:1px solid #334155; color:white; border-radius:4px;">
+                                            <option value="1" {% if u.is_active %}selected{% endif %}>Active</option>
+                                            <option value="0" {% if not u.is_active %}selected{% endif %}>Disabled</option>
+                                        </select>
+                                    </div>
+                                </div>
+
+                                <div style="background: rgba(15, 23, 42, 0.7); padding: 0.75rem; border-radius: 6px; border: 1px solid #334155; margin-bottom: 1rem;">
+                                    <label style="display:block; font-size:0.85rem; font-weight:600; margin-bottom:0.5rem; color: #a855f7;">🏷️ User Flair Title & Badge Color:</label>
+                                    <div style="display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap;">
+                                        <input type="text" id="flair_title_{{ u.id }}" name="flair_title" value="{{ curr_flair.title if curr_flair else '' }}" placeholder="e.g. 🚀 Lead Developer" style="padding: 0.4rem; background: #0f172a; border: 1px solid #334155; color: white; border-radius: 4px; font-size: 0.85rem; flex: 1; min-width: 160px;">
+                                        <input type="color" id="flair_color_{{ u.id }}" name="flair_color" value="{{ curr_flair.color if curr_flair else '#a855f7' }}" style="height: 32px; width: 40px; padding:0; border:none; background:none; cursor:pointer;" title="Pick Badge Color">
+                                        <div style="display: flex; gap: 0.3rem; align-items: center;">
+                                            {% for preset in DEFAULT_PRESET_FLAIRS %}
+                                                <button type="button" onclick="document.getElementById('flair_title_{{ u.id }}').value='{{ preset.title }}'; document.getElementById('flair_color_{{ u.id }}').value='{{ preset.color }}';" class="status-badge" style="background: {{ preset.color }}22; color: {{ preset.color }}; border: 1px solid {{ preset.color }}44; cursor: pointer; font-size: 0.7rem;">{{ preset.title }}</button>
+                                            {% endfor %}
+                                            <button type="button" onclick="document.getElementById('flair_title_{{ u.id }}').value='';" class="status-badge" style="background: rgba(148,163,184,0.2); color: #94a3b8; border: 1px solid rgba(148,163,184,0.3); cursor: pointer; font-size: 0.7rem;">Clear</button>
+                                        </div>
+                                    </div>
+                                </div>
+
+
+                                <div style="margin-bottom: 1rem;">
+                                    <label style="display:block; font-size:0.85rem; font-weight:600; margin-bottom:0.5rem; color: #94a3b8;">Accessible Sub-Applications:</label>
+                                    <div style="display: flex; flex-wrap: wrap; gap: 1rem;">
+                                        {% for app in apps %}
+                                            {% set has_perm = perms_map.get((u.id, app.id), True) %}
+                                            <label style="display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; cursor: pointer;">
+                                                <input type="checkbox" name="perm_{{ app.id }}" value="1" {% if has_perm or u.is_admin() %}checked{% endif %} {% if u.is_admin() %}disabled{% endif %}>
+                                                <span>{{ app.name }}</span>
+                                            </label>
+                                        {% endfor %}
+                                    </div>
+                                </div>
+
+                                <div style="display: flex; gap: 0.5rem;">
+                                    <button type="submit" class="btn btn-primary" style="padding: 0.4rem 1rem; font-size: 0.85rem;">Save User Changes</button>
+                                    <button type="button" onclick="document.getElementById('edit-user-{{ u.id }}').style.display='none'" class="btn btn-secondary" style="padding: 0.4rem 1rem; font-size: 0.85rem;">Cancel</button>
+                                </div>
+                            </form>
+                        </div>
+                    </td>
+                </tr>
+                {% endfor %}
+            </tbody>
+        </table>
+    </div>
+</div>
+{% endblock %}

appmanager/templates/auth/login.html

@@ -0,0 +1,58 @@
+{% extends "base.html" %}
+
+{% block title %}Log In — AppManager{% endblock %}
+
+{% block content %}
+<div style="max-width:440px; margin:3rem auto;">
+    <div class="card boot-item" style="padding:2.5rem; border-radius:var(--radius-lg);">
+        <h1 class="page-title" style="text-align:center; font-size:1.5rem;">Welcome to AppManager</h1>
+        <p class="text-muted" style="text-align:center; font-size:0.9rem; margin-bottom:2rem;">Sign in or register with Email Magic Link or Google</p>
+
+        {% if magic_sent %}
+            <div class="alert alert-success">
+                <strong>Magic Link Sent!</strong> Check <code>{{ email }}</code> for your one-time login link.
+            </div>
+
+            {% if dev_magic_url %}
+                <div class="alert alert-warning" style="margin-top:1rem;">
+                    <div>
+                        <strong>Developer Mode Preview:</strong><br>
+                        <span style="font-size:0.85rem;">SMTP is not configured. Use this magic link directly to log in:</span>
+                    </div>
+                    <a href="{{ dev_magic_url }}" class="btn btn-primary btn-block" style="margin-top:0.5rem;">Click to Log In Instantly &rarr;</a>
+                </div>
+            {% endif %}
+
+            <p style="text-align:center; margin-top:1.5rem;">
+                <a href="/auth/login" style="color: var(--accent); text-decoration:none;">&larr; Back to sign in</a>
+            </p>
+        {% else %}
+            {% if google_configured %}
+                <a href="/auth/google" class="btn btn-block" style="background:#fff; color:#1f2937; font-weight:600; margin-bottom:1rem;">
+                    <svg width="18" height="18" viewBox="0 0 24 24" style="margin-right:8px;">
+                        <path fill="#4285F4" d="M23.745 12.27c0-.7-.06-1.4-.19-2.07H12v4.51h6.6c-.29 1.52-1.14 2.82-2.4 3.68v3.05h3.88c2.27-2.09 3.665-5.17 3.665-9.17z"/>
+                        <path fill="#34A853" d="M12 24c3.24 0 5.95-1.08 7.93-2.91l-3.88-3.05c-1.08.72-2.45 1.16-4.05 1.16-3.12 0-5.77-2.1-6.72-4.93H1.28v3.15C3.31 21.39 7.37 24 12 24z"/>
+                        <path fill="#FBBC05" d="M5.28 14.27c-.25-.72-.38-1.49-.38-2.27s.13-1.55.38-2.27V6.58H1.28C.46 8.21 0 10.05 0 12s.46 3.79 1.28 5.42l4-3.15z"/>
+                        <path fill="#EA4335" d="M12 4.75c1.77 0 3.35.61 4.6 1.8l3.42-3.42C17.95 1.19 15.24 0 12 0 7.37 0 3.31 2.61 1.28 6.58l4 3.15c.95-2.83 3.6-4.98 6.72-4.98z"/>
+                    </svg>
+                    Continue with Google
+                </a>
+                <div class="divider" style="margin:1.5rem 0;">
+                    <span style="flex:1; border-bottom:1px solid var(--border);"></span>
+                    <span style="padding:0 0.75rem;">OR EMAIL MAGIC LINK</span>
+                    <span style="flex:1; border-bottom:1px solid var(--border);"></span>
+                </div>
+            {% endif %}
+
+            <form action="/auth/magic-link" method="POST">
+                <input type="hidden" name="next" value="{{ next }}">
+                <div class="form-group">
+                    <label class="form-label" for="email">Email Address</label>
+                    <input type="email" id="email" name="email" class="form-input" placeholder="you@example.com" required autofocus>
+                </div>
+                <button type="submit" class="btn btn-primary btn-block btn-lg">Send Magic Login Link &rarr;</button>
+            </form>
+        {% endif %}
+    </div>
+</div>
+{% endblock %}

appmanager/templates/auth/profile.html

@@ -0,0 +1,44 @@
+{% extends "base.html" %}
+
+{% block title %}Profile — AppManager{% endblock %}
+
+{% block content %}
+<div class="card mb-4 boot-item">
+    <div class="flex" style="align-items:center; gap:1.5rem;">
+        <div class="avatar" style="width:56px; height:56px; border-radius:var(--radius); background:var(--accent); display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:1.5rem; font-weight:700; color:var(--accent-contrast); flex-shrink:0;">
+            {{ user.name[0].upper() if user.name else user.email[0].upper() }}
+        </div>
+        <div>
+            <h1 class="page-title" style="font-size:1.4rem;">{{ user.name or user.email }} {{ render_user_flair_badge(user.id) }}</h1>
+            <p class="text-muted mono" style="font-size:0.85rem;">{{ user.email }}</p>
+            <span class="badge badge-accent mt-1">role: {{ user.role }}</span>
+        </div>
+    </div>
+</div>
+
+<h2 class="card-title mb-3">Your Accessible Applications</h2>
+{% if apps %}
+    <div class="grid grid-apps">
+        {% for app in apps %}
+            <div class="app-card boot-item" style="animation-delay: {{ loop.index0 * 60 }}ms;">
+                <div class="app-body">
+                    <h2 class="app-title">{{ app.name }}</h2>
+                    <p class="app-meta">/apps/{{ app.slug }}</p>
+                </div>
+                <div class="app-footer">
+                    {% if app.has_web_ui %}
+                        <a href="/apps/{{ app.slug }}/" class="btn btn-secondary btn-sm">Launch &rarr;</a>
+                    {% else %}
+                        <span class="text-faint" style="font-size:0.75rem;">Extension</span>
+                    {% endif %}
+                </div>
+            </div>
+        {% endfor %}
+    </div>
+{% else %}
+    <div class="empty-state">
+        <h2>No Accessible Applications</h2>
+        <p>You do not currently have access to any installed apps.</p>
+    </div>
+{% endif %}
+{% endblock %}

appmanager/templates/base.html

@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{% block title %}AppManager{% endblock %}</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='vendor/fonts/fonts.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/app.css') }}">
+    {% block extra_css %}{% endblock %}
+    {{ render_slot('head_assets') if render_slot is defined else '' }}
+</head>
+<body>
+    <header class="site-header">
+        <div class="nav-container">
+            <a href="/" class="brand">
+                <div class="brand-icon">AM</div>
+                <span>AppManager</span>
+            </a>
+            <nav>
+                <ul class="nav-links">
+                    {% if g.current_user %}
+                        <li><a href="/" class="nav-link">Applications</a></li>
+                        <li><a href="/auth/profile" class="nav-link">Profile</a></li>
+                        {% if g.current_user.is_admin() %}
+                            <li><a href="/admin" class="nav-link">Admin</a></li>
+                        {% endif %}
+                        {{ render_slot('nav_item', user=g.current_user) if render_slot is defined else '' }}
+                        <li><a href="/auth/logout" class="btn btn-secondary btn-sm">Log Out</a></li>
+                    {% else %}
+                        {{ render_slot('nav_item', user=None) if render_slot is defined else '' }}
+                        <li><a href="/auth/login" class="btn btn-primary btn-sm">Log In / Register</a></li>
+                    {% endif %}
+                </ul>
+            </nav>
+            <div class="topbar-instruments">
+                <span class="instrument" title="UTC time"><span class="blink">▮</span><span id="utc-clock">--:--:--</span></span>
+            </div>
+        </div>
+    </header>
+
+    <main class="container">
+        <div class="flash-messages">
+            {% with messages = get_flashed_messages(with_categories=true) %}
+                {% if messages %}
+                    {% for category, message in messages %}
+                        <div class="alert alert-{{ category }}">{{ message }}</div>
+                    {% endfor %}
+                {% endif %}
+            {% endwith %}
+        </div>
+
+        {% block content %}{% endblock %}
+    </main>
+
+    <footer class="site-footer">
+        <p>&copy; 2026 AppManager &bull; Flask Sub-App Container Framework</p>
+    </footer>
+
+    <script src="{{ url_for('static', filename='vendor/htmx/htmx.min.js') }}"></script>
+    <script>
+        // Live UTC clock — the page feels "powered on"
+        (function () {
+            var el = document.getElementById('utc-clock');
+            if (!el) return;
+            function tick() {
+                var d = new Date();
+                var p = function (n) { return String(n).padStart(2, '0'); };
+                el.textContent = p(d.getUTCHours()) + ':' + p(d.getUTCMinutes()) + ':' + p(d.getUTCSeconds()) + ' UTC';
+            }
+            tick();
+            setInterval(tick, 1000);
+        })();
+    </script>
+    {% block extra_js %}{% endblock %}
+</body>
+</html>