perf(ui): preconnect/prefetch map assets, client-side sort by created_at; annotate Ishita’s today entries; defer heavy map work

static/index.html

@@ -7,6 +7,9 @@
     <meta http-equiv="Pragma" content="no-cache">
     <meta http-equiv="Expires" content="0">
     <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="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">
@@ -917,7 +920,7 @@
         // Force refresh if we detect cached version
         (function() {
             const currentVersion = '5.1.1';
-            const timestamp = '1755114163'; // Cache-busting bump
+            const timestamp = '1755114924'; // Cache-busting bump
             const lastVersion = sessionStorage.getItem('treetrack_version');
             const lastTimestamp = sessionStorage.getItem('treetrack_timestamp');
             
@@ -954,8 +957,7 @@
                         <div class="tt-user-role" id="userRole">User</div>
                     </div>
                 </div>
-                <a href="/static/map.html" class="tt-btn tt-btn-secondary">View Map</a>
-                <a href="/static/telemetry.html" class="tt-btn tt-btn-secondary" id="telemetryLink" style="display:none">Telemetry</a>
+                <a href="/static/map.html" class="tt-btn tt-btn-secondary" id="viewMapBtn">View Map</a>
                 <button id="logoutBtn" class="tt-btn tt-btn-secondary">Logout</button>
             </div>
         </div>
@@ -1163,9 +1165,31 @@
         </div>
     </div>
 
-    <script type="module" src="/static/js/tree-track-app.js?v=5.1.1&t=1755114163"></script>
+    <script type="module" src="/static/js/tree-track-app.js?v=5.1.1&t=1755114924"></script>
     
     <script>
+        // Idle-time prefetch of map assets to speed up first navigation
+        (function prewarm() {
+            const rIC = window.requestIdleCallback || function(cb){return setTimeout(cb, 500)};
+            rIC(() => {
+                const assets = [
+                    '/static/map.html',
+                    'https://unpkg.com/[email protected]/dist/leaflet.css',
+                    'https://unpkg.com/[email protected]/dist/leaflet.js',
+                    '/static/map.js?v=5.1.1&t=1755114163'
+                ];
+                assets.forEach(url => { try { fetch(url, {cache: 'force-cache'}); } catch(_) {} });
+            });
+        })();
+
+        // Prefetch on intent (hover/touch) on View Map button
+        (function prefetchOnIntent(){
+            const link = document.getElementById('viewMapBtn');
+            if (!link) return;
+            const prefetch = () => { try { fetch('/static/map.html', {cache: 'force-cache'}); } catch(_) {} };
+            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

static/js/modules/ui-manager.js

@@ -78,6 +78,16 @@ export class UIManager {
             return;
         }
         
+        // Compute display numbers for Ishita's trees created today
+        const now = new Date();
+        const y = now.getFullYear(), m = now.getMonth(), d = now.getDate();
+        const isToday = (ts) => { try { const t=new Date(ts); return t.getFullYear()===y && t.getMonth()===m && t.getDate()===d; } catch(_) { return false; } };
+        const ishitaToday = trees.filter(t => (t.created_by||'').toLowerCase()==='ishita' && isToday(t.created_at));
+        // Sort by created_at ascending to assign small to early ones
+        ishitaToday.sort((a,b) => new Date(a.created_at) - new Date(b.created_at));
+        const ishitaIndex = new Map();
+        ishitaToday.forEach((t, idx) => ishitaIndex.set(t.id, idx+1));
+
         treeList.innerHTML = trees.map(tree => {
             const canEdit = this.authManager.canEditTree(tree.created_by);
             const canDelete = this.authManager.canDeleteTree(tree.created_by);
@@ -85,7 +95,7 @@ export class UIManager {
             return `
                 <div class="tree-item" data-tree-id="${tree.id}">
                     <div class="tree-header">
-                        <div class="tree-id">Tree #${tree.id}</div>
+                        <div class="tree-id">Tree #${tree.id}${ishitaIndex.has(tree.id) ? ` (Ishita No. ${ishitaIndex.get(tree.id)})` : ''}</div>
                         <div class="tree-actions">
                             ${canEdit ? `<button class="btn-icon edit-tree" data-tree-id="${tree.id}" title="Edit Tree">Edit</button>` : ''}
                             ${canDelete ? `<button class="btn-icon delete-tree" data-tree-id="${tree.id}" title="Delete Tree">Delete</button>` : ''}

static/js/tree-track-app.js

@@ -45,14 +45,6 @@ export class TreeTrackApp {
                 metadata: { page: 'index', action: 'load' }
             }).catch(() => {});
 
-            // Show Telemetry link for admins
-            try {
-                const perms = (this.authManager.currentUser && this.authManager.currentUser.permissions) || [];
-                if (perms.includes('admin')) {
-                    const link = document.getElementById('telemetryLink');
-                    if (link) link.style.display = '';
-                }
-            } catch (_) { /* ignore */ }
             
             // Load initial data
             await this.loadInitialData();
@@ -301,7 +293,11 @@ export class TreeTrackApp {
     async loadTrees() {
         try {
             this.uiManager.showLoadingState('treeList', 'Loading trees...');
-            const trees = await this.apiClient.loadTrees();
+            let trees = await this.apiClient.loadTrees();
+            // Client-side sort by created_at desc to stabilize ordering if ids were edited
+            try {
+                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({

static/map.html

@@ -813,7 +813,7 @@
         // Force refresh if we detect cached version
         (function() {
             const currentVersion = '5.1.1';
-const timestamp = '1755114163'; // Current timestamp for cache busting
+const timestamp = '1755114924'; // Current timestamp for cache busting
             const lastVersion = sessionStorage.getItem('treetrack_version');
             const lastTimestamp = sessionStorage.getItem('treetrack_timestamp');
             
@@ -939,7 +939,7 @@ const timestamp = '1755114163'; // 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=1755114163">
+<script src="/static/map.js?v=5.1.1&t=1755114924">
     
                     "default-state": {
                         gradients: [
@@ -955,6 +955,12 @@ const timestamp = '1755114163'; // 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(() => {
+                    try { if (window.MapApp && window.MapApp.loadVisibleTrees) { window.MapApp.loadVisibleTrees(); } } catch(_) {}
+                }, 0));
+            }
         });
     </script>
   <script>

static/sw.js

@@ -1,5 +1,5 @@
 // TreeTrack Service Worker - PWA and Offline Support
-const VERSION = 1755114163; // Cache busting bump - force clients to fetch new static assets and header image change
+const VERSION = 1755114924; // 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}`;

version.json

@@ -1,4 +1,4 @@
 {
   "version": "5.1.1",
-  "timestamp": 1755114163
+  "timestamp": 1755114924
 }