chore: remove Granim and telemetry UI from frontend; switch Leaflet CSS to prefetch; git rm static/telemetry.html

static/index.html

@@ -9,13 +9,10 @@
     <title>TreeTrack - Professional Field Research</title>
     <link rel="preconnect" href="https://unpkg.com" crossorigin>
     <link rel="dns-prefetch" href="//unpkg.com">
-    <link rel="preload" as="style" href="https://unpkg.com/[email protected]/dist/leaflet.css">
+    <link rel="prefetch" href="https://unpkg.com/[email protected]/dist/leaflet.css">
     <link rel="icon" type="image/png" href="/static/image/icons8-tree-96.png">
     <link rel="apple-touch-icon" href="/static/image/icons8-tree-96.png">
     <link rel="stylesheet" href="/static/css/design-system.css">
-    <!-- Granim.js for gradient animations (deferred) -->
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/granim.min.js" defer></script>
-    <style>
         
         :root {
             /* Colors */
@@ -93,18 +90,7 @@
             overflow: hidden;
         }
         
-        /* Granim Canvas for Header */
-        #header-canvas {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100vw;
-            height: 100%;
-            z-index: 1;
-            background: linear-gradient(135deg, #0f172a, #1e293b, #16a085);
-        }
-        
-        /* Ensure header content is above canvas */
+        /* Ensure header content is above background */
         .tt-header-content {
             position: relative;
             z-index: 2;
@@ -920,7 +906,7 @@
         // Force refresh if we detect cached version
         (function() {
             const currentVersion = '5.1.1';
-            const timestamp = '1755114945'; // Cache-busting bump
+            const timestamp = '1755115883'; // Cache-busting bump
             const lastVersion = sessionStorage.getItem('treetrack_version');
             const lastTimestamp = sessionStorage.getItem('treetrack_timestamp');
             
@@ -1165,7 +1151,7 @@
         </div>
     </div>
 
-    <script type="module" src="/static/js/tree-track-app.js?v=5.1.1&t=1755114945"></script>
+    <script type="module" src="/static/js/tree-track-app.js?v=5.1.1&t=1755115883"></script>
     
     <script>
         // Idle-time prefetch of map assets to speed up first navigation
@@ -1190,44 +1176,6 @@
             link.addEventListener('mouseenter', prefetch, {once: true});
             link.addEventListener('touchstart', prefetch, {once: true});
         })();
-        // Initialize Granim background animation on page load
-        document.addEventListener('DOMContentLoaded', function() {
-            // Define initializer and defer to idle time for better performance
-            function startHeaderGranim() {
-                new Granim({
-                    element: '#header-canvas',
-                    direction: 'diagonal',
-                    isPausedWhenNotInView: false,
-                    image: {
-                        // Forest path image
-                        source: 'https://images.unsplash.com/photo-1441974231531-c6227db76b6e?q=80&w=2560&auto=format&fit=crop&ixlib=rb-4.0.3',
-                        position: ['center', 'center'],
-                        stretchMode: ['stretch', 'stretch'],
-                        blendingMode: 'multiply'
-                    },
-                    states: {
-                        "default-state": {
-                            gradients: [
-                                ['#0f172a', '#1e293b', '#16a085'],
-                                ['#1a202c', '#2d3748', '#27ae60'], 
-                                ['#2d3748', '#4a5568', '#2ecc71'],
-                                ['#1a365d', '#2c5282', '#138d75'],
-                                ['#0f172a', '#2d3748', '#16a085']
-                            ],
-                            transitionSpeed: 12000
-                        }
-                    }
-                });
-            }
-
-            if (window.requestIdleCallback) {
-                requestIdleCallback(() => { startHeaderGranim(); });
-            } else {
-                setTimeout(() => { startHeaderGranim(); }, 0);
-            }
-
-            console.log('Scheduled header Granim initialization');
-        });
     </script>
 </body>
 </html>

static/js/modules/api-client.js

@@ -178,70 +178,15 @@ export class ApiClient {
             });
             
             if (!response.ok) {
-                const errText = await response.text().catch(() => '');
-                await this.sendTelemetry({
-                    event_type: 'upload',
-                    status: 'error',
-                    metadata: {
-                        type,
-                        category,
-                        filename: file.name,
-                        size: file.size,
-                        content_type: file.type,
-                        response_status: response.status,
-                        response_text: errText
-                    }
-                }).catch(() => {});
+                // Avoid noisy telemetry; just throw error
                 throw new Error('Upload failed');
             }
             resJson = await response.json();
-            await this.sendTelemetry({
-                event_type: 'upload',
-                status: 'success',
-                metadata: {
-                    type,
-                    category,
-                    filename: file.name,
-                    size: file.size,
-                    content_type: file.type,
-                    server_filename: resJson.filename,
-                    bucket: resJson.bucket
-                }
-            }).catch(() => {});
             return resJson;
         } catch (e) {
             // Network or other errors
-            if (!resJson) {
-                await this.sendTelemetry({
-                    event_type: 'upload',
-                    status: 'error',
-                    metadata: {
-                        type,
-                        category,
-                        filename: file?.name,
-                        size: file?.size,
-                        content_type: file?.type,
-                        error: e.message
-                    }
-                }).catch(() => {});
-            }
             throw e;
         }
     }
 
-    async sendTelemetry(payload) {
-        try {
-            const response = await this.authenticatedFetch('/api/telemetry', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json'
-                },
-                body: JSON.stringify(payload)
-            });
-            if (!response) return;
-            // Best-effort; ignore response body
-        } catch (_) {
-            // swallow telemetry errors
-        }
-    }
 }

static/js/modules/auth-manager.js

@@ -38,22 +38,6 @@ export class AuthManager {
 
     async logout() {
         try {
-            // Telemetry: logout initiated (best-effort)
-            try {
-                await fetch('/api/telemetry', {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
-                        'Authorization': `Bearer ${this.authToken}`
-                    },
-                    body: JSON.stringify({
-                        event_type: 'auth',
-                        status: 'logout_initiated',
-                        metadata: { source: 'client' }
-                    })
-                });
-            } catch (_) { /* ignore */ }
-
             await fetch('/api/auth/logout', {
                 method: 'POST',
                 headers: {

static/js/tree-track-app.js

@@ -38,12 +38,6 @@ export class TreeTrackApp {
             // Setup event listeners
             this.setupEventListeners();
             
-            // Log UI load telemetry
-            this.apiClient.sendTelemetry({
-                event_type: 'ui',
-                status: 'view',
-                metadata: { page: 'index', action: 'load' }
-            }).catch(() => {});
 
             
             // Load initial data
@@ -52,12 +46,6 @@ export class TreeTrackApp {
         } catch (error) {
             console.error('Error initializing TreeTrack app:', error);
             this.uiManager.showMessage('Error initializing application: ' + error.message, 'error');
-            // Telemetry for init error
-            this.apiClient?.sendTelemetry({
-                event_type: 'ui',
-                status: 'error',
-                metadata: { page: 'index', action: 'init', error: error?.message }
-            }).catch(() => {});
         }
     }
 
@@ -170,40 +158,16 @@ export class TreeTrackApp {
             let result;
             if (this.formManager.isInEditMode()) {
                 const id = this.formManager.getCurrentEditId();
-                // Telemetry: update start
-                this.apiClient.sendTelemetry({
-                    event_type: 'tree_update',
-                    status: 'start',
-                    metadata: { tree_id: id }
-                }).catch(() => {});
                 result = await this.apiClient.updateTree(id, treeData);
                 this.uiManager.showMessage(`Tree #${result.id} updated successfully!`, 'success');
-                // Telemetry: update success
-                this.apiClient.sendTelemetry({
-                    event_type: 'tree_update',
-                    status: 'success',
-                    metadata: { tree_id: result.id }
-                }).catch(() => {});
                 // Exit edit mode silently after successful update
                 this.handleCancelEdit(false);
             } else {
-                // Telemetry: create start
-                this.apiClient.sendTelemetry({
-                    event_type: 'tree_create',
-                    status: 'start',
-                    metadata: { has_location_name: !!treeData.location_name }
-                }).catch(() => {});
                 result = await this.apiClient.saveTree(treeData);
                 this.uiManager.showMessage(
                     `Tree successfully added! Tree ID: ${result.id}. The form has been cleared for your next entry.`, 
                     'success'
                 );
-                // Telemetry: create success
-                this.apiClient.sendTelemetry({
-                    event_type: 'tree_create',
-                    status: 'success',
-                    metadata: { tree_id: result.id }
-                }).catch(() => {});
                 this.formManager.resetForm(true);
             }
             
@@ -215,12 +179,6 @@ export class TreeTrackApp {
             console.error('Error submitting form:', error);
             this.uiManager.showMessage('Error saving tree: ' + error.message, 'error');
             this.uiManager.focusFirstError();
-            // Telemetry: save/update error
-            this.apiClient.sendTelemetry({
-                event_type: this.formManager.isInEditMode() ? 'tree_update' : 'tree_create',
-                status: 'error',
-                metadata: { error: error?.message }
-            }).catch(() => {});
         }
     }
 
@@ -254,30 +212,12 @@ export class TreeTrackApp {
         }
         
         try {
-            // Telemetry: delete start
-            this.apiClient.sendTelemetry({
-                event_type: 'tree_delete',
-                status: 'start',
-                metadata: { tree_id: treeId }
-            }).catch(() => {});
             await this.apiClient.deleteTree(treeId);
             this.uiManager.showMessage(`Tree #${treeId} deleted successfully.`, 'success');
-            // Telemetry: delete success
-            this.apiClient.sendTelemetry({
-                event_type: 'tree_delete',
-                status: 'success',
-                metadata: { tree_id: treeId }
-            }).catch(() => {});
             await this.loadTrees();
         } catch (error) {
             console.error('Error deleting tree:', error);
             this.uiManager.showMessage('Error deleting tree: ' + error.message, 'error');
-            // Telemetry: delete error
-            this.apiClient.sendTelemetry({
-                event_type: 'tree_delete',
-                status: 'error',
-                metadata: { tree_id: treeId, error: error?.message }
-            }).catch(() => {});
         }
     }
 
@@ -299,21 +239,9 @@ export class TreeTrackApp {
                 trees = (trees || []).sort((a,b) => new Date(b.created_at) - new Date(a.created_at));
             } catch (_) {}
             this.uiManager.renderTreeList(trees);
-            // Telemetry: list loaded
-            this.apiClient.sendTelemetry({
-                event_type: 'tree_list',
-                status: 'success',
-                metadata: { count: Array.isArray(trees) ? trees.length : null }
-            }).catch(() => {});
         } catch (error) {
             console.error('Error loading trees:', error);
             this.uiManager.showErrorState('treeList', 'Error loading trees');
-            // Telemetry: list error
-            this.apiClient.sendTelemetry({
-                event_type: 'tree_list',
-                status: 'error',
-                metadata: { error: error?.message }
-            }).catch(() => {});
         }
     }
 

static/map.html

@@ -13,9 +13,6 @@
     <!-- Leaflet CSS -->
     <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
     <link rel="stylesheet" href="/static/css/design-system.css">
-    <!-- Granim.js for gradient animations -->
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/granim.min.js"></script>
-    
     <style>
         
         :root {
@@ -102,18 +99,7 @@
             overflow: hidden;
         }
         
-        /* Granim Canvas for Map Header */
-        #map-header-canvas {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100vw;
-            height: 100%;
-            z-index: 1;
-            background: linear-gradient(135deg, #f8fafc, #e2e8f0, #cbd5e1);
-        }
-        
-        /* Ensure header content is above canvas */
+        /* Ensure header content is above background */
         .tt-header-content {
             position: relative;
             z-index: 2;
@@ -813,7 +799,7 @@
         // Force refresh if we detect cached version
         (function() {
             const currentVersion = '5.1.1';
-const timestamp = '1755114945'; // Current timestamp for cache busting
+const timestamp = '1755115883'; // Current timestamp for cache busting
             const lastVersion = sessionStorage.getItem('treetrack_version');
             const lastTimestamp = sessionStorage.getItem('treetrack_timestamp');
             
@@ -939,7 +925,7 @@ const timestamp = '1755114945'; // Current timestamp for cache busting
 
     <!-- Leaflet JS -->
     <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
-<script src="/static/map.js?v=5.1.1&t=1755114945">
+<script src="/static/map.js?v=5.1.1&t=1755115883">
     
                     "default-state": {
                         gradients: [
@@ -954,7 +940,6 @@ const timestamp = '1755114945'; // Current timestamp for cache busting
                 }
             });
             
-            console.log('Map header Granim with forest road background initialized synchronously');
             // Defer any heavy data fetch; ensure map shell is visible first
             if (window.requestAnimationFrame) {
                 requestAnimationFrame(() => setTimeout(() => {
@@ -963,28 +948,5 @@ const timestamp = '1755114945'; // Current timestamp for cache busting
             }
         });
     </script>
-  <script>
-    // Emit telemetry for map page view (best-effort)
-    (function() {
-      try {
-        document.addEventListener('DOMContentLoaded', function() {
-          var token = localStorage.getItem('auth_token');
-          if (!token) return;
-          fetch('/api/telemetry', {
-            method: 'POST',
-            headers: {
-              'Content-Type': 'application/json',
-              'Authorization': 'Bearer ' + token
-            },
-            body: JSON.stringify({
-              event_type: 'ui',
-              status: 'view',
-              metadata: { page: 'map', action: 'load' }
-            })
-          }).catch(function(){});
-        });
-      } catch(e) { /* ignore */ }
-    })();
-  </script>
 </body>
 </html>

static/sw.js

@@ -1,5 +1,5 @@
 // TreeTrack Service Worker - PWA and Offline Support
-const VERSION = 1755114945; // Cache busting bump - force clients to fetch new static assets and header image change
+const VERSION = 1755115883; // Cache busting bump - force clients to fetch new static assets and header image change
 const CACHE_NAME = `treetrack-v${VERSION}`;
 const STATIC_CACHE = `static-v${VERSION}`;
 const API_CACHE = `api-v${VERSION}`;

static/telemetry.html

@@ -1,179 +1 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Telemetry Viewer - Admin</title>
-  <link rel="stylesheet" href="/static/css/design-system.css" />
-  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-  <meta http-equiv="Pragma" content="no-cache">
-  <meta http-equiv="Expires" content="0">
-  <style>
-    body { font-family: Inter, system-ui, -apple-system, Segoe UI, sans-serif; background: var(--gray-50); color: var(--gray-800); }
-    .container { max-width: 1200px; margin: 0 auto; padding: 1rem; }
-    .header { display: flex; justify-content: space-between; align-items: center; margin: 1rem 0; }
-    .title { font-size: 1.25rem; font-weight: 700; }
-    .controls { display: flex; gap: .5rem; align-items: center; }
-    .filter-input { padding: .5rem .75rem; border: 1px solid var(--gray-300); border-radius: .5rem; font-size: .9rem; }
-    .btn { padding: .5rem .75rem; border: 1px solid var(--gray-300); background: white; border-radius: .5rem; cursor: pointer; }
-    .btn-primary { background: var(--primary-600); color: white; border-color: var(--primary-600); }
-    .btn:disabled { opacity: .5; cursor: not-allowed; }
-    .meta { color: var(--gray-500); font-size: .85rem; }
-    .table { width: 100%; border-collapse: collapse; background: white; border: 1px solid var(--gray-200); border-radius: .75rem; overflow: hidden; }
-    .table th, .table td { padding: .5rem .75rem; border-bottom: 1px solid var(--gray-100); text-align: left; vertical-align: top; font-size: .9rem; }
-    .table th { background: var(--gray-50); font-weight: 600; }
-    .pill { display: inline-block; padding: .15rem .4rem; border-radius: .5rem; font-size: .75rem; border: 1px solid var(--gray-300); }
-    .pill-success { background: var(--green-50); color: var(--green-700); border-color: var(--green-300); }
-    .pill-error { background: var(--red-50); color: var(--red-700); border-color: var(--red-300); }
-    .pill-start { background: var(--orange-50); color: var(--orange-700); border-color: var(--orange-300); }
-    .code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8rem; background: var(--gray-50); padding: .35rem .5rem; border-radius: .35rem; border: 1px solid var(--gray-200); display: inline-block; max-width: 520px; overflow: auto; }
-    .row { transition: background .2s ease; }
-    .row:hover { background: var(--gray-50); }
-    .footer { display: flex; justify-content: space-between; align-items: center; margin-top: .75rem; }
-  </style>
-</head>
-<body>
-  <div class="container">
-    <div class="header">
-      <div>
-        <div class="title">Telemetry Viewer (Admin)</div>
-        <div class="meta">Inspect recent telemetry events to monitor app health and user actions.</div>
-      </div>
-      <div class="controls">
-        <input id="limit" class="filter-input" type="number" min="1" max="1000" value="200" title="Max events" />
-        <input id="search" class="filter-input" placeholder="Search text (type, status, user, etc.)" />
-        <button id="refresh" class="btn btn-primary">Refresh</button>
-        <a class="btn" href="/">Back</a>
-      </div>
-    </div>
-
-    <div id="meta" class="meta" style="margin-bottom: .5rem;">&nbsp;</div>
-
-    <table class="table">
-      <thead>
-        <tr>
-          <th style="width: 10rem;">Timestamp</th>
-          <th style="width: 8rem;">Type</th>
-          <th style="width: 8rem;">Status</th>
-          <th style="width: 10rem;">User</th>
-          <th>Metadata</th>
-        </tr>
-      </thead>
-      <tbody id="tbody"></tbody>
-    </table>
-
-    <div class="footer">
-      <div id="source" class="meta"></div>
-      <div class="meta">Only accessible to admin users</div>
-    </div>
-  </div>
-
-  <script type="module">
-    async function fetchTelemetry(limit) {
-      const params = new URLSearchParams({ limit: String(limit) });
-      const res = await fetch(`/api/telemetry?${params.toString()}`, { headers: authHeaders() });
-      if (res.status === 401 || res.status === 403) {
-        alert('Unauthorized. You must be an admin to view telemetry.');
-        window.location.href = '/login';
-        return null;
-      }
-      if (!res.ok) {
-        throw new Error('Failed to fetch telemetry');
-      }
-      return res.json();
-    }
-
-    function authHeaders() {
-      const token = localStorage.getItem('auth_token');
-      return token ? { 'Authorization': `Bearer ${token}` } : {};
-    }
-
-    function pill(status) {
-      if (!status) return '';
-      const cls = status === 'success' ? 'pill-success' : status === 'error' ? 'pill-error' : status === 'start' ? 'pill-start' : '';
-      return `<span class="pill ${cls}">${status}</span>`;
-    }
-
-    function escapeHtml(s) { return s.replace(/[&<>]/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;'}[c])); }
-
-    function renderRows(events) {
-      const tbody = document.getElementById('tbody');
-      const q = (document.getElementById('search').value || '').toLowerCase().trim();
-      tbody.innerHTML = '';
-      for (const evt of events) {
-        const ts = evt.timestamp || '';
-        const type = evt.event_type || '';
-        const status = evt.status || '';
-        const user = (evt.user && evt.user.username) ? `${evt.user.username} (${evt.user.role || ''})` : '';
-        const meta = evt.metadata ? escapeHtml(JSON.stringify(evt.metadata)) : '';
-        const line = `${ts} ${type} ${status} ${user} ${meta}`.toLowerCase();
-        if (q && !line.includes(q)) continue;
-        const tr = document.createElement('tr');
-        tr.className = 'row';
-        tr.innerHTML = `
-          <td>${escapeHtml(ts)}</td>
-          <td><span class="pill">${escapeHtml(type)}</span></td>
-          <td>${pill(status)}</td>
-          <td>${escapeHtml(user)}</td>
-          <td><span class="code">${meta}</span></td>
-        `;
-        tbody.appendChild(tr);
-      }
-    }
-
-    async function refresh() {
-      const limit = Math.max(1, Math.min(1000, parseInt(document.getElementById('limit').value || '200', 10)));
-      document.getElementById('refresh').disabled = true;
-      try {
-        const data = await fetchTelemetry(limit);
-        if (!data) return;
-        document.getElementById('meta').textContent = `Loaded ${data.count} events`;
-        document.getElementById('source').textContent = `Source: ${data.source}`;
-        renderRows(data.events || []);
-      } catch (e) {
-        alert(e.message || 'Failed to load telemetry');
-      } finally {
-        document.getElementById('refresh').disabled = false;
-      }
-    }
-
-    document.getElementById('refresh').addEventListener('click', refresh);
-    document.getElementById('search').addEventListener('input', () => {
-      // quick re-filter without fetching again
-      const meta = document.getElementById('meta').textContent || '';
-      // no-op; filtering reads from table content
-      const rows = Array.from(document.querySelectorAll('#tbody tr'));
-      const q = (document.getElementById('search').value || '').toLowerCase().trim();
-      rows.forEach(row => {
-        const text = row.textContent.toLowerCase();
-        row.style.display = q && !text.includes(q) ? 'none' : '';
-      });
-    });
-
-    // On load: validate auth and fetch
-    (async () => {
-      try {
-        const token = localStorage.getItem('auth_token');
-        if (!token) {
-          window.location.href = '/login';
-          return;
-        }
-        // Validate user and ensure admin
-        const res = await fetch('/api/auth/validate', { headers: authHeaders() });
-        if (!res.ok) { window.location.href = '/login'; return; }
-        const info = await res.json();
-        const perms = (info.user && info.user.permissions) || [];
-        if (!perms.includes('admin')) {
-          alert('Admin access required');
-          window.location.href = '/';
-          return;
-        }
-        await refresh();
-      } catch {
-        window.location.href = '/login';
-      }
-    })();
-  </script>
-</body>
-</html>
 

version.json

@@ -1,4 +1,4 @@
 {
   "version": "5.1.1",
-  "timestamp": 1755114945
+  "timestamp": 1755115883
 }