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/static/js/admin-page.js

@@ -0,0 +1,180 @@
+document.addEventListener('DOMContentLoaded', function() {
+    const usersList = document.getElementById('users-list');
+    const modal = document.getElementById('user-modal');
+    const deleteModal = document.getElementById('delete-user-modal');
+    const form = document.getElementById('user-form');
+    let deleteTargetId = null;
+
+    async function loadUsers() {
+        try {
+            const users = await LinkSync.getUsers();
+            renderUsers(Array.isArray(users) ? users : []);
+        } catch (err) {
+            usersList.innerHTML = `<div class="empty-state"><p>Failed to load users: ${err.message}</p></div>`;
+        }
+    }
+
+    function renderUsers(users) {
+        if (!users || users.length === 0) {
+            usersList.innerHTML = '<div class="empty-state"><p>No users found.</p></div>';
+            return;
+        }
+
+        usersList.innerHTML = `
+            <div class="data-table">
+                <table>
+                    <thead>
+                        <tr>
+                            <th>Username</th>
+                            <th>Email</th>
+                            <th>Role</th>
+                            <th>Status</th>
+                            <th>Created</th>
+                            <th>Actions</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        ${users.map(user => `
+                            <tr>
+                                <td>${escapeHtml(user.username)}</td>
+                                <td>${escapeHtml(user.email)}</td>
+                                <td><span class="role-badge role-${user.role}">${user.role}</span></td>
+                                <td>${user.is_active ? 'Active' : 'Inactive'}</td>
+                                <td>${formatDate(user.created_at)}</td>
+                                <td class="actions">
+                                    <button class="btn-icon" data-action="edit" data-id="${user.id}" title="Edit">&#9998;</button>
+                                    <button class="btn-icon" data-action="delete" data-id="${user.id}" title="Delete">&#128465;</button>
+                                </td>
+                            </tr>
+                        `).join('')}
+                    </tbody>
+                </table>
+            </div>
+        `;
+
+        usersList.querySelectorAll('[data-action="edit"]').forEach(btn => {
+            btn.addEventListener('click', () => editUser(btn.dataset.id));
+        });
+        usersList.querySelectorAll('[data-action="delete"]').forEach(btn => {
+            btn.addEventListener('click', () => confirmDelete(btn.dataset.id));
+        });
+    }
+
+    function openUserModal(user = null) {
+        document.getElementById('user-modal-title').textContent = user ? 'Edit User' : 'Create User';
+        document.getElementById('user-id').value = user ? user.id : '';
+        document.getElementById('user-username').value = user ? user.username : '';
+        document.getElementById('user-username').disabled = !!user;
+        document.getElementById('user-email').value = user ? user.email : '';
+        document.getElementById('user-password').value = '';
+        document.getElementById('user-password').required = !user;
+        document.getElementById('user-password').placeholder = user ? 'Leave blank to keep current' : '';
+        document.getElementById('user-role').value = user ? user.role : 'user';
+        document.getElementById('user-active').checked = user ? user.is_active : true;
+        modal.style.display = 'flex';
+    }
+
+    async function editUser(id) {
+        try {
+            const users = await LinkSync.getUsers();
+            const user = (Array.isArray(users) ? users : []).find(u => u.id === id);
+            if (user) openUserModal(user);
+        } catch (err) {
+            alert('Failed to load user details');
+        }
+    }
+
+    function confirmDelete(id) {
+        deleteTargetId = id;
+        deleteModal.style.display = 'flex';
+    }
+
+    function closeModal() {
+        modal.style.display = 'none';
+        form.reset();
+        document.getElementById('user-username').disabled = false;
+    }
+
+    function closeDeleteModal() {
+        deleteModal.style.display = 'none';
+        deleteTargetId = null;
+    }
+
+    document.getElementById('new-user-btn').addEventListener('click', () => openUserModal());
+    document.getElementById('user-modal-close').addEventListener('click', closeModal);
+    document.getElementById('user-cancel-btn').addEventListener('click', closeModal);
+    document.getElementById('delete-user-cancel-btn').addEventListener('click', closeDeleteModal);
+
+    modal.querySelector('.modal-overlay').addEventListener('click', closeModal);
+    deleteModal.querySelector('.modal-overlay').addEventListener('click', closeDeleteModal);
+
+    form.addEventListener('submit', async function(e) {
+        e.preventDefault();
+        const saveBtn = document.getElementById('user-save-btn');
+        saveBtn.disabled = true;
+        saveBtn.textContent = 'Saving...';
+
+        const id = document.getElementById('user-id').value;
+        const data = {
+            username: document.getElementById('user-username').value,
+            email: document.getElementById('user-email').value,
+            role: document.getElementById('user-role').value,
+            is_active: document.getElementById('user-active').checked,
+        };
+
+        const password = document.getElementById('user-password').value;
+        if (password) data.password = password;
+
+        try {
+            if (id) {
+                await LinkSync.updateUser(id, data);
+            } else {
+                if (!password) {
+                    alert('Password is required for new users');
+                    saveBtn.disabled = false;
+                    saveBtn.textContent = 'Save';
+                    return;
+                }
+                await LinkSync.createUser(data);
+            }
+            closeModal();
+            loadUsers();
+        } catch (err) {
+            alert('Failed to save user: ' + err.message);
+        } finally {
+            saveBtn.disabled = false;
+            saveBtn.textContent = 'Save';
+        }
+    });
+
+    document.getElementById('confirm-delete-user-btn').addEventListener('click', async function() {
+        if (!deleteTargetId) return;
+        try {
+            await LinkSync.deleteUser(deleteTargetId);
+            closeDeleteModal();
+            loadUsers();
+        } catch (err) {
+            alert('Failed to delete user: ' + err.message);
+        }
+    });
+
+    const urlParams = new URLSearchParams(window.location.search);
+    if (urlParams.get('action') === 'new-user') {
+        openUserModal();
+    }
+
+    loadUsers();
+
+    function escapeHtml(str) {
+        if (!str) return '';
+        const div = document.createElement('div');
+        div.textContent = str;
+        return div.innerHTML;
+    }
+
+    function formatDate(dateStr) {
+        if (!dateStr) return '-';
+        const d = new Date(dateStr);
+        return d.toLocaleDateString();
+    }
+});

LinkSyncServer/static/js/apikeys-page.js

@@ -0,0 +1,156 @@
+document.addEventListener('DOMContentLoaded', function() {
+    const keysList = document.getElementById('api-keys-list');
+    const keyModal = document.getElementById('key-modal');
+    const keyResultModal = document.getElementById('key-result-modal');
+    const deleteModal = document.getElementById('delete-key-modal');
+    const keyForm = document.getElementById('key-form');
+    let deleteTargetId = null;
+
+    async function loadKeys() {
+        try {
+            const keys = await LinkSync.getApiKeys();
+            renderKeys(Array.isArray(keys) ? keys : []);
+        } catch (err) {
+            keysList.innerHTML = `<div class="empty-state"><p>Failed to load API keys: ${err.message}</p></div>`;
+        }
+    }
+
+    function renderKeys(keys) {
+        if (!keys || keys.length === 0) {
+            keysList.innerHTML = '<div class="empty-state"><p>No API keys found.</p><button class="btn btn-primary" id="empty-add-key-btn">+ Create your first API key</button></div>';
+            document.getElementById('empty-add-key-btn').addEventListener('click', openKeyModal);
+            return;
+        }
+
+        keysList.innerHTML = `
+            <div class="data-table">
+                <table>
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Key ID</th>
+                            <th>Status</th>
+                            <th>Created</th>
+                            <th>Expires</th>
+                            <th>Actions</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        ${keys.map(key => `
+                            <tr>
+                                <td>${escapeHtml(key.name)}</td>
+                                <td class="key-value">${escapeHtml(key.key_id || key.id)}</td>
+                                <td class="${key.is_active ? 'status-active' : 'status-inactive'}">${key.is_active ? 'Active' : 'Inactive'}</td>
+                                <td>${formatDate(key.created_at)}</td>
+                                <td>${key.expires_at ? formatDate(key.expires_at) : 'Never'}</td>
+                                <td class="actions">
+                                    <button class="btn-icon" data-action="delete" data-id="${key.key_id || key.id}" title="Delete">&#128465;</button>
+                                </td>
+                            </tr>
+                        `).join('')}
+                    </tbody>
+                </table>
+            </div>
+        `;
+
+        keysList.querySelectorAll('[data-action="delete"]').forEach(btn => {
+            btn.addEventListener('click', () => confirmDeleteKey(btn.dataset.id));
+        });
+    }
+
+    function openKeyModal() {
+        document.getElementById('key-name').value = '';
+        keyModal.style.display = 'flex';
+    }
+
+    function closeKeyModal() {
+        keyModal.style.display = 'none';
+        keyForm.reset();
+    }
+
+    function closeKeyResultModal() {
+        keyResultModal.style.display = 'none';
+    }
+
+    function closeDeleteModal() {
+        deleteModal.style.display = 'none';
+        deleteTargetId = null;
+    }
+
+    document.getElementById('new-key-btn').addEventListener('click', openKeyModal);
+    document.getElementById('key-modal-close').addEventListener('click', closeKeyModal);
+    document.getElementById('key-cancel-btn').addEventListener('click', closeKeyModal);
+    document.getElementById('key-result-close').addEventListener('click', closeKeyResultModal);
+    document.getElementById('key-done-btn').addEventListener('click', closeKeyResultModal);
+    document.getElementById('delete-key-cancel-btn').addEventListener('click', closeDeleteModal);
+
+    keyModal.querySelector('.modal-overlay').addEventListener('click', closeKeyModal);
+    keyResultModal.querySelector('.modal-overlay').addEventListener('click', closeKeyResultModal);
+    deleteModal.querySelector('.modal-overlay').addEventListener('click', closeDeleteModal);
+
+    keyForm.addEventListener('submit', async function(e) {
+        e.preventDefault();
+        const saveBtn = document.getElementById('key-save-btn');
+        saveBtn.disabled = true;
+        saveBtn.textContent = 'Creating...';
+
+        const name = document.getElementById('key-name').value;
+
+        try {
+            const result = await LinkSync.createApiKey(name);
+            closeKeyModal();
+            document.getElementById('new-key-value').textContent = result.api_key;
+            keyResultModal.style.display = 'flex';
+            loadKeys();
+        } catch (err) {
+            alert('Failed to create API key: ' + err.message);
+        } finally {
+            saveBtn.disabled = false;
+            saveBtn.textContent = 'Create';
+        }
+    });
+
+    document.getElementById('copy-key-btn').addEventListener('click', function() {
+        const key = document.getElementById('new-key-value').textContent;
+        navigator.clipboard.writeText(key).then(() => {
+            this.textContent = 'Copied!';
+            setTimeout(() => { this.textContent = 'Copy'; }, 2000);
+        });
+    });
+
+    function confirmDeleteKey(id) {
+        deleteTargetId = id;
+        deleteModal.style.display = 'flex';
+    }
+
+    document.getElementById('confirm-delete-key-btn').addEventListener('click', async function() {
+        if (!deleteTargetId) return;
+        try {
+            await LinkSync.deleteApiKey(deleteTargetId);
+            closeDeleteModal();
+            loadKeys();
+        } catch (err) {
+            alert('Failed to delete API key: ' + err.message);
+        }
+    });
+
+    const urlParams = new URLSearchParams(window.location.search);
+    if (urlParams.get('action') === 'new') {
+        openKeyModal();
+    }
+
+    loadKeys();
+
+    function escapeHtml(str) {
+        if (!str) return '';
+        const div = document.createElement('div');
+        div.textContent = str;
+        return div.innerHTML;
+    }
+
+    function formatDate(dateStr) {
+        if (!dateStr) return '-';
+        const d = new Date(dateStr);
+        return d.toLocaleDateString();
+    }
+});

LinkSyncServer/static/js/collections-page.js

@@ -0,0 +1,144 @@
+document.addEventListener('DOMContentLoaded', function() {
+    const collectionsList = document.getElementById('collections-list');
+    const modal = document.getElementById('collection-modal');
+    const deleteModal = document.getElementById('delete-collection-modal');
+    const form = document.getElementById('collection-form');
+    let deleteTargetId = null;
+
+    async function loadCollections() {
+        try {
+            const collections = await LinkSync.getCollections();
+            renderCollections(Array.isArray(collections) ? collections : []);
+        } catch (err) {
+            collectionsList.innerHTML = `<div class="empty-state"><p>Failed to load collections: ${err.message}</p></div>`;
+        }
+    }
+
+    function renderCollections(collections) {
+        if (!collections || collections.length === 0) {
+            collectionsList.innerHTML = '<div class="empty-state"><p>No collections found.</p><button class="btn btn-primary" id="empty-add-col-btn">+ Create your first collection</button></div>';
+            document.getElementById('empty-add-col-btn').addEventListener('click', openCollectionModal);
+            return;
+        }
+
+        collectionsList.innerHTML = collections.map(col => `
+            <div class="collection-card">
+                <h3>${escapeHtml(col.name)}</h3>
+                <p>${escapeHtml(col.description || 'No description')}</p>
+                <div class="meta">
+                    <span class="badge badge-${col.query_type}">${col.query_type}</span>
+                    <span class="badge ${col.is_public ? 'badge-public' : 'badge-private'}">${col.is_public ? 'Public' : 'Private'}</span>
+                </div>
+                <div class="actions">
+                    <button class="btn btn-sm btn-outline" data-action="edit" data-id="${col.id}">Edit</button>
+                    <button class="btn btn-sm btn-danger" data-action="delete" data-id="${col.id}">Delete</button>
+                </div>
+            </div>
+        `).join('');
+
+        collectionsList.querySelectorAll('[data-action="edit"]').forEach(btn => {
+            btn.addEventListener('click', () => editCollection(btn.dataset.id));
+        });
+        collectionsList.querySelectorAll('[data-action="delete"]').forEach(btn => {
+            btn.addEventListener('click', () => confirmDeleteCollection(btn.dataset.id));
+        });
+    }
+
+    function openCollectionModal(col = null) {
+        document.getElementById('collection-modal-title').textContent = col ? 'Edit Collection' : 'Create Collection';
+        document.getElementById('collection-id').value = col ? col.id : '';
+        document.getElementById('collection-name').value = col ? col.name : '';
+        document.getElementById('collection-description').value = col ? (col.description || '') : '';
+        document.getElementById('collection-type').value = col ? col.query_type : 'static';
+        document.getElementById('collection-public').checked = col ? col.is_public : false;
+        modal.style.display = 'flex';
+    }
+
+    async function editCollection(id) {
+        try {
+            const collections = await LinkSync.getCollections();
+            const col = (Array.isArray(collections) ? collections : []).find(c => c.id === id);
+            if (col) openCollectionModal(col);
+        } catch (err) {
+            alert('Failed to load collection details');
+        }
+    }
+
+    function confirmDeleteCollection(id) {
+        deleteTargetId = id;
+        deleteModal.style.display = 'flex';
+    }
+
+    function closeModal() {
+        modal.style.display = 'none';
+        form.reset();
+    }
+
+    function closeDeleteModal() {
+        deleteModal.style.display = 'none';
+        deleteTargetId = null;
+    }
+
+    document.getElementById('new-collection-btn').addEventListener('click', () => openCollectionModal());
+    document.getElementById('collection-modal-close').addEventListener('click', closeModal);
+    document.getElementById('collection-cancel-btn').addEventListener('click', closeModal);
+    document.getElementById('delete-collection-cancel-btn').addEventListener('click', closeDeleteModal);
+
+    modal.querySelector('.modal-overlay').addEventListener('click', closeModal);
+    deleteModal.querySelector('.modal-overlay').addEventListener('click', closeDeleteModal);
+
+    form.addEventListener('submit', async function(e) {
+        e.preventDefault();
+        const saveBtn = document.getElementById('collection-save-btn');
+        saveBtn.disabled = true;
+        saveBtn.textContent = 'Saving...';
+
+        const id = document.getElementById('collection-id').value;
+        const data = {
+            name: document.getElementById('collection-name').value,
+            description: document.getElementById('collection-description').value || null,
+            query_type: document.getElementById('collection-type').value,
+            is_public: document.getElementById('collection-public').checked,
+        };
+
+        try {
+            if (id) {
+                await LinkSync.updateCollection(id, data);
+            } else {
+                await LinkSync.createCollection(data);
+            }
+            closeModal();
+            loadCollections();
+        } catch (err) {
+            alert('Failed to save collection: ' + err.message);
+        } finally {
+            saveBtn.disabled = false;
+            saveBtn.textContent = 'Save';
+        }
+    });
+
+    document.getElementById('confirm-delete-collection-btn').addEventListener('click', async function() {
+        if (!deleteTargetId) return;
+        try {
+            await LinkSync.deleteCollection(deleteTargetId);
+            closeDeleteModal();
+            loadCollections();
+        } catch (err) {
+            alert('Failed to delete collection: ' + err.message);
+        }
+    });
+
+    const urlParams = new URLSearchParams(window.location.search);
+    if (urlParams.get('action') === 'new') {
+        openCollectionModal();
+    }
+
+    loadCollections();
+
+    function escapeHtml(str) {
+        if (!str) return '';
+        const div = document.createElement('div');
+        div.textContent = str;
+        return div.innerHTML;
+    }
+});

LinkSyncServer/static/js/dashboard.js

@@ -0,0 +1,27 @@
+document.addEventListener('DOMContentLoaded', async function() {
+    const user = JSON.parse(localStorage.getItem('user') || 'null');
+    if (!user) {
+        window.location.href = '/login';
+        return;
+    }
+
+    document.getElementById('current-user').textContent = user.username;
+
+    if (user.role === 'admin') {
+        document.getElementById('admin-section').style.display = '';
+    }
+
+    try {
+        const [links, collections, keys] = await Promise.all([
+            LinkSync.getLinks({ limit: 1 }),
+            LinkSync.getCollections(),
+            LinkSync.getApiKeys(),
+        ]);
+
+        document.getElementById('link-count').textContent = Array.isArray(links) ? links.length : 0;
+        document.getElementById('collection-count').textContent = Array.isArray(collections) ? collections.length : 0;
+        document.getElementById('api-key-count').textContent = Array.isArray(keys) ? keys.length : 0;
+    } catch (err) {
+        console.error('Failed to load stats:', err);
+    }
+});

LinkSyncServer/static/js/links-page.js

@@ -0,0 +1,178 @@
+document.addEventListener('DOMContentLoaded', function() {
+    const linksList = document.getElementById('links-list');
+    const modal = document.getElementById('link-modal');
+    const deleteModal = document.getElementById('delete-modal');
+    const form = document.getElementById('link-form');
+    const searchInput = document.getElementById('search-input');
+    let deleteTargetId = null;
+
+    async function loadLinks(search = '') {
+        try {
+            const links = await LinkSync.getLinks(search ? { search } : {});
+            renderLinks(Array.isArray(links) ? links : []);
+        } catch (err) {
+            linksList.innerHTML = `<div class="empty-state"><p>Failed to load links: ${err.message}</p></div>`;
+        }
+    }
+
+    function renderLinks(links) {
+        if (!links || links.length === 0) {
+            linksList.innerHTML = '<div class="empty-state"><p>No links found.</p><button class="btn btn-primary" id="empty-add-btn">+ Add your first link</button></div>';
+            document.getElementById('empty-add-btn').addEventListener('click', openModal);
+            return;
+        }
+
+        linksList.innerHTML = `
+            <div class="data-table">
+                <table>
+                    <thead>
+                        <tr>
+                            <th>Title</th>
+                            <th>URL</th>
+                            <th>Tags</th>
+                            <th>Created</th>
+                            <th>Actions</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        ${links.map(link => `
+                            <tr>
+                                <td>${escapeHtml(link.title)}</td>
+                                <td class="truncate"><a href="${escapeHtml(link.url)}" target="_blank" class="link-url">${escapeHtml(link.url)}</a></td>
+                                <td><div class="tags">${(link.tags || []).map(t => `<span class="tag">${escapeHtml(t)}</span>`).join('')}</div></td>
+                                <td>${formatDate(link.created_at)}</td>
+                                <td class="actions">
+                                    <button class="btn-icon" data-action="edit" data-id="${link.id}" title="Edit">&#9998;</button>
+                                    <button class="btn-icon" data-action="delete" data-id="${link.id}" title="Delete">&#128465;</button>
+                                </td>
+                            </tr>
+                        `).join('')}
+                    </tbody>
+                </table>
+            </div>
+        `;
+
+        linksList.querySelectorAll('[data-action="edit"]').forEach(btn => {
+            btn.addEventListener('click', () => editLink(btn.dataset.id));
+        });
+        linksList.querySelectorAll('[data-action="delete"]').forEach(btn => {
+            btn.addEventListener('click', () => confirmDelete(btn.dataset.id));
+        });
+    }
+
+    function openModal(link = null) {
+        document.getElementById('modal-title').textContent = link ? 'Edit Link' : 'Add Link';
+        document.getElementById('link-id').value = link ? link.id : '';
+        document.getElementById('link-url').value = link ? link.url : '';
+        document.getElementById('link-title').value = link ? link.title : '';
+        document.getElementById('link-description').value = link ? (link.description || '') : '';
+        document.getElementById('link-notes').value = link ? (link.notes || '') : '';
+        document.getElementById('link-tags').value = link ? (link.tags || []).join(', ') : '';
+        document.getElementById('link-favicon').value = link ? (link.favicon_url || '') : '';
+        document.getElementById('link-path').value = link ? (link.path || '') : '';
+        modal.style.display = 'flex';
+    }
+
+    async function editLink(id) {
+        try {
+            const links = await LinkSync.getLinks();
+            const link = (Array.isArray(links) ? links : []).find(l => l.id === id);
+            if (link) openModal(link);
+        } catch (err) {
+            alert('Failed to load link details');
+        }
+    }
+
+    function confirmDelete(id) {
+        deleteTargetId = id;
+        deleteModal.style.display = 'flex';
+    }
+
+    function closeModal() {
+        modal.style.display = 'none';
+        form.reset();
+    }
+
+    function closeDeleteModal() {
+        deleteModal.style.display = 'none';
+        deleteTargetId = null;
+    }
+
+    document.getElementById('new-link-btn').addEventListener('click', () => openModal());
+    document.getElementById('modal-close').addEventListener('click', closeModal);
+    document.getElementById('cancel-btn').addEventListener('click', closeModal);
+    document.getElementById('delete-cancel-btn').addEventListener('click', closeDeleteModal);
+
+    modal.querySelector('.modal-overlay').addEventListener('click', closeModal);
+    deleteModal.querySelector('.modal-overlay').addEventListener('click', closeDeleteModal);
+
+    form.addEventListener('submit', async function(e) {
+        e.preventDefault();
+        const saveBtn = document.getElementById('save-btn');
+        saveBtn.disabled = true;
+        saveBtn.textContent = 'Saving...';
+
+        const id = document.getElementById('link-id').value;
+        const tagsRaw = document.getElementById('link-tags').value;
+        const data = {
+            url: document.getElementById('link-url').value,
+            title: document.getElementById('link-title').value,
+            description: document.getElementById('link-description').value || null,
+            notes: document.getElementById('link-notes').value || null,
+            tags: tagsRaw ? tagsRaw.split(',').map(t => t.trim()).filter(t => t) : [],
+            favicon_url: document.getElementById('link-favicon').value || null,
+            path: document.getElementById('link-path').value || null,
+        };
+
+        try {
+            if (id) {
+                await LinkSync.updateLink(id, data);
+            } else {
+                await LinkSync.createLink(data);
+            }
+            closeModal();
+            loadLinks(searchInput.value);
+        } catch (err) {
+            alert('Failed to save link: ' + err.message);
+        } finally {
+            saveBtn.disabled = false;
+            saveBtn.textContent = 'Save';
+        }
+    });
+
+    document.getElementById('confirm-delete-btn').addEventListener('click', async function() {
+        if (!deleteTargetId) return;
+        try {
+            await LinkSync.deleteLink(deleteTargetId);
+            closeDeleteModal();
+            loadLinks(searchInput.value);
+        } catch (err) {
+            alert('Failed to delete link: ' + err.message);
+        }
+    });
+
+    document.getElementById('search-btn').addEventListener('click', () => loadLinks(searchInput.value));
+    searchInput.addEventListener('keypress', function(e) {
+        if (e.key === 'Enter') loadLinks(searchInput.value);
+    });
+
+    const urlParams = new URLSearchParams(window.location.search);
+    if (urlParams.get('action') === 'new') {
+        openModal();
+    }
+
+    loadLinks();
+
+    function escapeHtml(str) {
+        if (!str) return '';
+        const div = document.createElement('div');
+        div.textContent = str;
+        return div.innerHTML;
+    }
+
+    function formatDate(dateStr) {
+        if (!dateStr) return '-';
+        const d = new Date(dateStr);
+        return d.toLocaleDateString();
+    }
+});

LinkSyncServer/static/js/main.js

@@ -15,7 +15,20 @@ document.addEventListener("DOMContentLoaded", function () {
             headers,
         });
         if (!response.ok) {
-            throw new Error(`API error: ${response.status}`);
+            let errorMsg = `HTTP ${response.status}`;
+            try {
+                const error = await response.json();
+                if (typeof error.detail === 'string') {
+                    errorMsg = error.detail;
+                } else if (Array.isArray(error.detail)) {
+                    errorMsg = error.detail.map(d => d.msg || d).join(', ');
+                } else if (error.detail && typeof error.detail === 'object') {
+                    errorMsg = error.detail.detail || error.detail.msg || JSON.stringify(error.detail);
+                }
+            } catch {
+                // ignore parse error, use default
+            }
+            throw new Error(errorMsg);
         }
         return response.json();
     }
@@ -50,6 +63,15 @@ document.addEventListener("DOMContentLoaded", function () {
                 body: JSON.stringify(data),
             });
         },
+        async updateCollection(id, data) {
+            return apiFetch(`/collections/${id}`, {
+                method: "PUT",
+                body: JSON.stringify(data),
+            });
+        },
+        async deleteCollection(id) {
+            return apiFetch(`/collections/${id}`, { method: "DELETE" });
+        },
         async executeQuery(expression, limit = 20) {
             return apiFetch(`/queries/execute?expression=${encodeURIComponent(expression)}&limit=${limit}`);
         },
@@ -67,8 +89,41 @@ document.addEventListener("DOMContentLoaded", function () {
             localStorage.setItem("token", data.access_token);
             return data;
         },
+        async getMe() {
+            return apiFetch("/auth/me");
+        },
         logout() {
             localStorage.removeItem("token");
+            localStorage.removeItem("user");
+        },
+        async getUsers() {
+            return apiFetch("/admin/users");
+        },
+        async createUser(data) {
+            return apiFetch("/admin/users", {
+                method: "POST",
+                body: JSON.stringify(data),
+            });
+        },
+        async updateUser(id, data) {
+            return apiFetch(`/admin/users/${id}`, {
+                method: "PUT",
+                body: JSON.stringify(data),
+            });
+        },
+        async deleteUser(id) {
+            return apiFetch(`/admin/users/${id}`, { method: "DELETE" });
+        },
+        async getApiKeys() {
+            return apiFetch("/auth/api-keys");
+        },
+        async createApiKey(name) {
+            return apiFetch(`/auth/api-key?name=${encodeURIComponent(name)}`, {
+                method: "POST",
+            });
+        },
+        async deleteApiKey(id) {
+            return apiFetch(`/auth/api-key/${id}`, { method: "DELETE" });
         },
     };
 });