feat: add web UI with login, CRUD, admin, and API key management

- Add login page with JWT authentication
- Add dashboard with stats and quick actions
- Add links management page (full CRUD with search)
- Add collections management page
- Add API key management page with copy-to-clipboard
- Add admin user management page (admin only)
- Fix UUID type mismatches across all endpoints
- Add updated_at column to api_keys and audit_log in schema.sql
- Fix DB_PASSWORD default in docker-compose.yml
- Add PyJWT to requirements.txt
- Fix API docs URL (/docs instead of /api/docs)
- Improve JS error handling (show actual messages)
- Rewrite conftest.py with proper DB lifecycle management
- Add 42 new integration tests (84 total, all passing)
  - test_admin.py: 15 tests for admin endpoints
  - test_auth_extended.py: 9 tests for API key CRUD
  - test_tags.py: 12 tests for tag endpoints
  - test_sync.py: 6 tests for sync endpoints

LinkSyncServer/templates/admin.html

@@ -0,0 +1,72 @@
+{% extends "base.html" %}
+
+{% block title %}Admin - LinkSync{% endblock %}
+
+{% block content %}
+<div class="page-header">
+    <h1>User Management</h1>
+    <button class="btn btn-primary" id="new-user-btn">+ New User</button>
+</div>
+
+<div id="users-list" class="users-table">
+    <div class="loading">Loading users...</div>
+</div>
+
+<div id="user-modal" class="modal" style="display: none;">
+    <div class="modal-overlay"></div>
+    <div class="modal-content">
+        <div class="modal-header">
+            <h2 id="user-modal-title">Create User</h2>
+            <button class="modal-close" id="user-modal-close">&times;</button>
+        </div>
+        <form id="user-form">
+            <input type="hidden" id="user-id">
+            <div class="form-group">
+                <label for="user-username">Username *</label>
+                <input type="text" id="user-username" required>
+            </div>
+            <div class="form-group">
+                <label for="user-email">Email *</label>
+                <input type="email" id="user-email" required>
+            </div>
+            <div class="form-group">
+                <label for="user-password">Password *</label>
+                <input type="password" id="user-password" required>
+            </div>
+            <div class="form-group">
+                <label for="user-role">Role</label>
+                <select id="user-role">
+                    <option value="user">User</option>
+                    <option value="admin">Admin</option>
+                </select>
+            </div>
+            <div class="form-group checkbox-group">
+                <label>
+                    <input type="checkbox" id="user-active" checked>
+                    Active
+                </label>
+            </div>
+            <div class="form-actions">
+                <button type="button" class="btn btn-secondary" id="user-cancel-btn">Cancel</button>
+                <button type="submit" class="btn btn-primary" id="user-save-btn">Save</button>
+            </div>
+        </form>
+    </div>
+</div>
+
+<div id="delete-user-modal" class="modal" style="display: none;">
+    <div class="modal-overlay"></div>
+    <div class="modal-content modal-sm">
+        <h2>Delete User</h2>
+        <p>Are you sure you want to delete this user? This action cannot be undone.</p>
+        <div class="form-actions">
+            <button class="btn btn-secondary" id="delete-user-cancel-btn">Cancel</button>
+            <button class="btn btn-danger" id="confirm-delete-user-btn">Delete</button>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block extra_js %}
+<script src="/static/js/admin-page.js"></script>
+{% endblock %}

LinkSyncServer/templates/apikeys.html

@@ -0,0 +1,70 @@
+{% extends "base.html" %}
+
+{% block title %}API Keys - LinkSync{% endblock %}
+
+{% block content %}
+<div class="page-header">
+    <h1>API Keys</h1>
+    <button class="btn btn-primary" id="new-key-btn">+ New API Key</button>
+</div>
+
+<div id="api-keys-list" class="api-keys-table">
+    <div class="loading">Loading API keys...</div>
+</div>
+
+<div id="key-modal" class="modal" style="display: none;">
+    <div class="modal-overlay"></div>
+    <div class="modal-content">
+        <div class="modal-header">
+            <h2>Create API Key</h2>
+            <button class="modal-close" id="key-modal-close">&times;</button>
+        </div>
+        <form id="key-form">
+            <div class="form-group">
+                <label for="key-name">Key Name *</label>
+                <input type="text" id="key-name" placeholder="e.g., Firefox Extension" required>
+            </div>
+            <div class="form-actions">
+                <button type="button" class="btn btn-secondary" id="key-cancel-btn">Cancel</button>
+                <button type="submit" class="btn btn-primary" id="key-save-btn">Create</button>
+            </div>
+        </form>
+    </div>
+</div>
+
+<div id="key-result-modal" class="modal" style="display: none;">
+    <div class="modal-overlay"></div>
+    <div class="modal-content">
+        <div class="modal-header">
+            <h2>API Key Created</h2>
+            <button class="modal-close" id="key-result-close">&times;</button>
+        </div>
+        <div class="key-result">
+            <p><strong>Copy this key now. You will not be able to see it again.</strong></p>
+            <div class="key-display">
+                <code id="new-key-value"></code>
+                <button class="btn btn-sm" id="copy-key-btn">Copy</button>
+            </div>
+        </div>
+        <div class="form-actions">
+            <button class="btn btn-primary" id="key-done-btn">Done</button>
+        </div>
+    </div>
+</div>
+
+<div id="delete-key-modal" class="modal" style="display: none;">
+    <div class="modal-overlay"></div>
+    <div class="modal-content modal-sm">
+        <h2>Delete API Key</h2>
+        <p>Are you sure you want to delete this API key? Any connections using this key will stop working.</p>
+        <div class="form-actions">
+            <button class="btn btn-secondary" id="delete-key-cancel-btn">Cancel</button>
+            <button class="btn btn-danger" id="confirm-delete-key-btn">Delete</button>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block extra_js %}
+<script src="/static/js/apikeys-page.js"></script>
+{% endblock %}

LinkSyncServer/templates/base.html

@@ -10,13 +10,19 @@
 <body>
     <nav class="navbar">
         <div class="nav-brand">
-            <a href="/">LinkSync</a>
+            <a href="/dashboard">LinkSync</a>
         </div>
-        <div class="nav-links">
-            <a href="/#links">Links</a>
-            <a href="/#collections">Collections</a>
-            <a href="/#queries">Queries</a>
-            <a href="/api/docs" target="_blank">API Docs</a>
+        <div class="nav-links" id="nav-links">
+            <a href="/dashboard">Dashboard</a>
+            <a href="/links">Links</a>
+            <a href="/collections">Collections</a>
+            <a href="/api-keys">API Keys</a>
+            <a href="/admin" id="admin-nav" style="display: none;">Admin</a>
+            <a href="/docs" target="_blank">API</a>
+        </div>
+        <div class="nav-user">
+            <span id="nav-username"></span>
+            <button class="btn btn-sm btn-outline" id="logout-btn">Logout</button>
         </div>
     </nav>
     <main class="container">
@@ -26,6 +32,27 @@
         <p>LinkSyncServer &copy; 2026</p>
     </footer>
     <script src="/static/js/main.js"></script>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const token = localStorage.getItem('token');
+            const user = JSON.parse(localStorage.getItem('user') || 'null');
+            if (!token) {
+                window.location.href = '/login';
+                return;
+            }
+            if (user) {
+                document.getElementById('nav-username').textContent = user.username;
+                if (user.role === 'admin') {
+                    document.getElementById('admin-nav').style.display = '';
+                }
+            }
+            document.getElementById('logout-btn').addEventListener('click', function() {
+                localStorage.removeItem('token');
+                localStorage.removeItem('user');
+                window.location.href = '/login';
+            });
+        });
+    </script>
     {% block extra_js %}{% endblock %}
 </body>
 </html>

LinkSyncServer/templates/collections.html

@@ -0,0 +1,68 @@
+{% extends "base.html" %}
+
+{% block title %}Collections - LinkSync{% endblock %}
+
+{% block content %}
+<div class="page-header">
+    <h1>Collections</h1>
+    <button class="btn btn-primary" id="new-collection-btn">+ New Collection</button>
+</div>
+
+<div id="collections-list" class="collections-grid">
+    <div class="loading">Loading collections...</div>
+</div>
+
+<div id="collection-modal" class="modal" style="display: none;">
+    <div class="modal-overlay"></div>
+    <div class="modal-content">
+        <div class="modal-header">
+            <h2 id="collection-modal-title">Create Collection</h2>
+            <button class="modal-close" id="collection-modal-close">&times;</button>
+        </div>
+        <form id="collection-form">
+            <input type="hidden" id="collection-id">
+            <div class="form-group">
+                <label for="collection-name">Name *</label>
+                <input type="text" id="collection-name" required>
+            </div>
+            <div class="form-group">
+                <label for="collection-description">Description</label>
+                <textarea id="collection-description" rows="2"></textarea>
+            </div>
+            <div class="form-group">
+                <label for="collection-type">Type</label>
+                <select id="collection-type">
+                    <option value="static">Static (manual links)</option>
+                    <option value="dynamic">Dynamic (query-based)</option>
+                </select>
+            </div>
+            <div class="form-group checkbox-group">
+                <label>
+                    <input type="checkbox" id="collection-public">
+                    Public
+                </label>
+            </div>
+            <div class="form-actions">
+                <button type="button" class="btn btn-secondary" id="collection-cancel-btn">Cancel</button>
+                <button type="submit" class="btn btn-primary" id="collection-save-btn">Save</button>
+            </div>
+        </form>
+    </div>
+</div>
+
+<div id="delete-collection-modal" class="modal" style="display: none;">
+    <div class="modal-overlay"></div>
+    <div class="modal-content modal-sm">
+        <h2>Delete Collection</h2>
+        <p>Are you sure you want to delete this collection? This action cannot be undone.</p>
+        <div class="form-actions">
+            <button class="btn btn-secondary" id="delete-collection-cancel-btn">Cancel</button>
+            <button class="btn btn-danger" id="confirm-delete-collection-btn">Delete</button>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block extra_js %}
+<script src="/static/js/collections-page.js"></script>
+{% endblock %}

LinkSyncServer/templates/dashboard.html

@@ -0,0 +1,68 @@
+{% extends "base.html" %}
+
+{% block title %}Dashboard - LinkSync{% endblock %}
+
+{% block content %}
+<div class="dashboard-header">
+    <h1>Dashboard</h1>
+    <p class="welcome-text">Welcome, <span id="current-user"></span></p>
+</div>
+
+<div class="stats-grid">
+    <div class="stat-card">
+        <div class="stat-value" id="link-count">-</div>
+        <div class="stat-label">Total Links</div>
+        <a href="/links" class="stat-link">View all &rarr;</a>
+    </div>
+    <div class="stat-card">
+        <div class="stat-value" id="collection-count">-</div>
+        <div class="stat-label">Collections</div>
+        <a href="/collections" class="stat-link">View all &rarr;</a>
+    </div>
+    <div class="stat-card">
+        <div class="stat-value" id="api-key-count">-</div>
+        <div class="stat-label">API Keys</div>
+        <a href="/api-keys" class="stat-link">Manage &rarr;</a>
+    </div>
+</div>
+
+<div class="quick-actions">
+    <h2>Quick Actions</h2>
+    <div class="action-grid">
+        <a href="/links?action=new" class="action-card">
+            <span class="action-icon">+</span>
+            <span class="action-label">Add Link</span>
+        </a>
+        <a href="/collections?action=new" class="action-card">
+            <span class="action-icon">+</span>
+            <span class="action-label">New Collection</span>
+        </a>
+        <a href="/api-keys?action=new" class="action-card">
+            <span class="action-icon">+</span>
+            <span class="action-label">Create API Key</span>
+        </a>
+        <a href="/docs" target="_blank" class="action-card">
+            <span class="action-icon">&#128736;</span>
+            <span class="action-label">API Documentation</span>
+        </a>
+    </div>
+</div>
+
+<div id="admin-section" class="admin-quick" style="display: none;">
+    <h2>Admin</h2>
+    <div class="action-grid">
+        <a href="/admin" class="action-card">
+            <span class="action-icon">&#128100;</span>
+            <span class="action-label">Manage Users</span>
+        </a>
+        <a href="/admin?action=new-user" class="action-card">
+            <span class="action-icon">+</span>
+            <span class="action-label">Create User</span>
+        </a>
+    </div>
+</div>
+{% endblock %}
+
+{% block extra_js %}
+<script src="/static/js/dashboard.js"></script>
+{% endblock %}

LinkSyncServer/templates/index.html

@@ -1,60 +1,15 @@
-{% extends "base.html" %}
-
-{% block title %}LinkSync - Home{% endblock %}
-
-{% block content %}
-<div class="hero">
-    <h1>LinkSync Server</h1>
-    <p>Self-hosted bookmark server with advanced collection and query capabilities.</p>
-    <div class="hero-actions">
-        <a href="/api/docs" class="btn btn-primary">API Documentation</a>
-        <a href="/api/links/" class="btn btn-secondary">Browse Links</a>
-    </div>
-</div>
-
-<section id="links" class="section">
-    <h2>Quick Links</h2>
-    <div class="card-grid">
-        <div class="card">
-            <h3>Links</h3>
-            <p>Manage your bookmarks with full CRUD operations.</p>
-            <a href="/api/links/">View API</a>
-        </div>
-        <div class="card">
-            <h3>Collections</h3>
-            <p>Organize links into static or dynamic collections.</p>
-            <a href="/api/collections/">View API</a>
-        </div>
-        <div class="card">
-            <h3>Queries</h3>
-            <p>Execute advanced queries with AND, OR, XOR operations.</p>
-            <a href="/api/queries/">View API</a>
-        </div>
-        <div class="card">
-            <h3>Sync</h3>
-            <p>Sync bookmarks with browser extensions.</p>
-            <a href="/api/sync/">View API</a>
-        </div>
-    </div>
-</section>
-
-<section id="collections" class="section">
-    <h2>Features</h2>
-    <ul class="feature-list">
-        <li>True Collections - Static or dynamic sets of links</li>
-        <li>Advanced Query Engine - AND, OR, XOR set operations</li>
-        <li>Firefox-Compatible Fields - All bookmark attributes supported</li>
-        <li>Multi-User Support - Authentication with roles</li>
-        <li>RESTful API - Full CRUD operations</li>
-        <li>Docker-Ready - Easy deployment</li>
-    </ul>
-</section>
-
-<section id="queries" class="section">
-    <h2>Query Syntax</h2>
-    <div class="code-block">
-        <code>('term1', 'term2') OR tagA AND tagB XOR url:example.com</code>
-    </div>
-    <p>Precedence: <code>()</code> &gt; XOR &gt; AND &gt; OR</p>
-</section>
-{% endblock %}
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>LinkSync</title>
+    <script>
+        const token = localStorage.getItem('token');
+        window.location.href = token ? '/dashboard' : '/login';
+    </script>
+</head>
+<body>
+    <p>Redirecting...</p>
+</body>
+</html>

LinkSyncServer/templates/links.html

@@ -0,0 +1,80 @@
+{% extends "base.html" %}
+
+{% block title %}Links - LinkSync{% endblock %}
+
+{% block content %}
+<div class="page-header">
+    <h1>Links</h1>
+    <button class="btn btn-primary" id="new-link-btn">+ New Link</button>
+</div>
+
+<div class="search-bar">
+    <input type="text" id="search-input" placeholder="Search links by title or URL...">
+    <button class="btn btn-secondary" id="search-btn">Search</button>
+</div>
+
+<div id="links-list" class="links-table">
+    <div class="loading">Loading links...</div>
+</div>
+
+<div id="link-modal" class="modal" style="display: none;">
+    <div class="modal-overlay"></div>
+    <div class="modal-content">
+        <div class="modal-header">
+            <h2 id="modal-title">Add Link</h2>
+            <button class="modal-close" id="modal-close">&times;</button>
+        </div>
+        <form id="link-form">
+            <input type="hidden" id="link-id">
+            <div class="form-group">
+                <label for="link-url">URL *</label>
+                <input type="url" id="link-url" required>
+            </div>
+            <div class="form-group">
+                <label for="link-title">Title *</label>
+                <input type="text" id="link-title" required>
+            </div>
+            <div class="form-group">
+                <label for="link-description">Description</label>
+                <textarea id="link-description" rows="2"></textarea>
+            </div>
+            <div class="form-group">
+                <label for="link-notes">Notes</label>
+                <textarea id="link-notes" rows="3"></textarea>
+            </div>
+            <div class="form-group">
+                <label for="link-tags">Tags (comma-separated)</label>
+                <input type="text" id="link-tags" placeholder="tag1, tag2, tag3">
+            </div>
+            <div class="form-group">
+                <label for="link-favicon">Favicon URL</label>
+                <input type="url" id="link-favicon">
+            </div>
+            <div class="form-group">
+                <label for="link-path">Path/Folder</label>
+                <input type="text" id="link-path">
+            </div>
+            <div class="form-actions">
+                <button type="button" class="btn btn-secondary" id="cancel-btn">Cancel</button>
+                <button type="submit" class="btn btn-primary" id="save-btn">Save</button>
+            </div>
+        </form>
+    </div>
+</div>
+
+<div id="delete-modal" class="modal" style="display: none;">
+    <div class="modal-overlay"></div>
+    <div class="modal-content modal-sm">
+        <h2>Delete Link</h2>
+        <p>Are you sure you want to delete this link? This action cannot be undone.</p>
+        <div class="form-actions">
+            <button class="btn btn-secondary" id="delete-cancel-btn">Cancel</button>
+            <button class="btn btn-danger" id="confirm-delete-btn">Delete</button>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block extra_js %}
+<script src="/static/js/links-page.js"></script>
+{% endblock %}

LinkSyncServer/templates/login.html

@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Login - LinkSync</title>
+    <link rel="stylesheet" href="/static/css/main.css">
+</head>
+<body class="login-page">
+    <div class="login-container">
+        <div class="login-card">
+            <h1>LinkSync</h1>
+            <p class="login-subtitle">Sign in to your account</p>
+            <form id="login-form">
+                <div class="form-group">
+                    <label for="username">Username</label>
+                    <input type="text" id="username" name="username" required autofocus>
+                </div>
+                <div class="form-group">
+                    <label for="password">Password</label>
+                    <input type="password" id="password" name="password" required>
+                </div>
+                <div id="login-error" class="error-message" style="display: none;"></div>
+                <button type="submit" class="btn btn-primary btn-full" id="login-btn">Sign In</button>
+            </form>
+        </div>
+    </div>
+    <script>
+        document.getElementById('login-form').addEventListener('submit', async function(e) {
+            e.preventDefault();
+            const btn = document.getElementById('login-btn');
+            const error = document.getElementById('login-error');
+            const username = document.getElementById('username').value;
+            const password = document.getElementById('password').value;
+
+            btn.disabled = true;
+            btn.textContent = 'Signing in...';
+            error.style.display = 'none';
+
+            try {
+                const formData = new URLSearchParams();
+                formData.append('username', username);
+                formData.append('password', password);
+
+                const response = await fetch('/api/auth/login', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+                    body: formData.toString(),
+                });
+
+                if (!response.ok) {
+                    const data = await response.json();
+                    throw new Error(data.detail || 'Invalid credentials');
+                }
+
+                const data = await response.json();
+                localStorage.setItem('token', data.access_token);
+                localStorage.setItem('user', JSON.stringify(data.user));
+                window.location.href = '/dashboard';
+            } catch (err) {
+                error.textContent = err.message;
+                error.style.display = 'block';
+            } finally {
+                btn.disabled = false;
+                btn.textContent = 'Sign In';
+            }
+        });
+
+        if (localStorage.getItem('token')) {
+            window.location.href = '/dashboard';
+        }
+    </script>
+</body>
+</html>