updating the intel

steps/annex/Changelog.html

@@ -153,9 +153,24 @@
             </ul>
         </div>
 
-        <!-- 9 & 10. Stability & Infrastructure -->
+        <!-- 9. Project Intelligence & Reorganization -->
+        <div class="card p-8 rounded-2xl shadow-2xl">
+            <div class="flex items-center gap-4 mb-6">
+                <div class="icon-box highlight-green text-2xl">📁</div>
+                <h2 class="text-2xl font-bold">9. Documentation Ecosystem</h2>
+            </div>
+            <p class="text-slate-400 mb-4 text-sm italic">Consolidated and reorganized internal documentation for clarity.</p>
+            <ul class="space-y-3 text-slate-300 text-sm">
+                <li class="flex gap-2"><span>•</span> <strong>Intel Folder:</strong> Centralized all <code>.md</code> files (README, GEMINI, Context) for better project intelligence.</li>
+                <li class="flex gap-2"><span>•</span> <strong>Annex Folder:</strong> Moved supplementary UI content (User Manual, Shortcuts, Codebase Map) into a dedicated assets directory.</li>
+                <li class="flex gap-2"><span>•</span> <strong>"What's New?" (Changelog):</strong> Integrated a persistent changelog viewer directly into the header.</li>
+                <li class="flex gap-2"><span>•</span> <strong>Source Integrity:</strong> Updated all internal source paths and iframe references to reflect the new directory structure.</li>
+            </ul>
+        </div>
+
+        <!-- 10. Stability & Infrastructure -->
         <div class="card md:col-span-2 p-8 rounded-2xl shadow-2xl border-l-4 border-indigo-500">
-            <h2 class="text-2xl font-bold mb-6">9 & 10. Stability & Infrastructure</h2>
+            <h2 class="text-2xl font-bold mb-6">10. Stability & Infrastructure</h2>
             <div class="grid md:grid-cols-2 gap-8">
                 <ul class="space-y-2 text-slate-400 text-sm">
                     <li class="flex gap-2"><span>•</span> <strong>Monotonic Time Guards:</strong> Prevents clock-jitter crashes in interpolation.</li>

steps/annex/Improvements.txt

@@ -88,6 +88,31 @@ Idea: A simple "Camera" button that saves the current view of the radar canvas a
 
 Benefit: Perfect for quickly capturing interesting moments for reports, presentations, or bug tracking.
 
+--------------------------------------------------------------------------------------------------------------------------------------------
+5.) COMPLETED IMPROVEMENTS (Refactor Phase)
+
+	a) Modular ES6 Architecture:
+	Completely refactored from a monolithic HTML file into specialized modules (sync, ui, dom, state, etc.) for better maintainability.
+
+	b) High-Precision Sync Engine:
+	Implemented a master clock system with drift correction and videoFrameCallback integration for rock-solid synchronization.
+
+	c) Streaming JSON Parser:
+	Integrated a Web Worker with Clarinet.js to handle massive radar logs without freezing the browser UI.
+
+	d) Persistent Caching (IndexedDB):
+	Files are now cached locally, allowing for instant session restoration and reducing redundant uploads.
+
+	e) Draggable/Resizable Data Explorer:
+	A professional-grade inspection panel with AG-Grid and Chart.js integration for deep-dive data analysis.
+
+	f) Documentation Intelligence:
+	Reorganized all project documentation into the 'intel/' folder and supplementary UI assets into 'annex/' for a cleaner project root.
+
+	g) Integrated Changelog & Shortcuts:
+	Added dedicated, theme-aware modals for keyboard shortcuts and a project changelog ("What's New?").
+
+
 
 
 

steps/intel/GEMINI.md

@@ -56,5 +56,6 @@ Since this is a static project using ES6 modules directly in the browser:
 - Use PascalCase for class-like structures (though the project primarily uses objects and functions).
 
 ### Documentation
-- Maintain `readme.md` and `context.md` with significant architectural changes.
-- Use `Improvements.txt` to track progress on the refactor and new feature requests.
+- Maintain `readme.md`, `GEMINI.md`, and `context.md` in the `intel/` folder with significant architectural changes.
+- Use `Improvements.txt` (in `annex/`) to track progress on the refactor and new feature requests.
+- Reference supplementary guides in `annex/` (User Manual, Shortcuts, Changelog).

steps/intel/context.md

@@ -18,9 +18,15 @@ Context Document: Radar and Video Synchronizer Application
 
 The application uses a modular ES6 structure. All source code resides in the `/src` directory.
 
-- **`index.html`**: The main HTML shell. Defines the DOM structure, including the main layout, collapsible sidebar, data explorer panel, and modal dialogs. It loads all necessary CDN libraries and the main JS module.
+- **`index.html`**: The main HTML shell. Defines the DOM structure, including the main layout, collapsible sidebar, data explorer panel, and documentation modals (User Manual, Shortcuts, Codebase Overview, Changelog). It loads all necessary CDN libraries and the main JS module.
 
-- **`/src/main.js`**: **The Orchestrator**. This is the application's entry point. It initializes the database, theme, and data explorer. It sets up the initial event listeners for the UI and delegates specialized tasks to other modules (`fileLoader.js`, `keyboard.js`, `sync.js`).
+...
+
+- **`/annex/`**: **Supplementary Documentation**. Contains HTML files for the User Manual, Keyboard Shortcuts, Codebase Overview, and Changelog, as well as the progress log (`Improvements.txt`).
+
+- **`/intel/`**: **Project Intelligence**. Contains documentation and AI-specific context files (`readme.md`, `GEMINI.md`, `context.md`).
+
+- **`/src/main.js`**: **The Orchestrator**. This is the application's entry point. It initializes the database, theme, and data explorer. It sets up the initial event listeners for the UI and delegates specialized tasks to other modules (`fileLoader.js`, `keyboard.js`, `sync.js`, `ui.js`).
 
 - **`/src/state.js`**: **The Single Source of Truth**. Exports a single global `appState` object that holds all dynamic data (e.g., `vizData`, `isPlaying`, `currentFrame`). All modules import from this file.
 

steps/intel/readme.md

@@ -142,9 +142,10 @@ Persistent overlays (#radar-info-overlay, #video-info-overlay) updated by dom.js
 
 Dark/Light theme managed by theme.js::setTheme, saving preference to localStorage, and triggering redraws in p5 sketches.
 
-**Startup Guide & Shortcuts**:
+**Startup Guide, Shortcuts, & Changelog**:
 *   Includes a "First Run" experience with a loading screen and Quick Start Guide modal (ui.js).
 *   A "Shortcuts" modal (toggle with <kbd>K</kbd> or via the UI) provides a reference for all keyboard interactions (ui.js).
+*   A **Changelog** modal ("What's New?") provides a history of updates and refactors (ui.js).
 
 Session Management (session.js, main.js, db.js):
 
@@ -181,17 +182,19 @@ Open in Browser: Navigate to http://localhost:8000.
 Project Structure
 
 ├── index.html                       # Main HTML shell
-├── README.md                        # This documentation
-├── annex/                       # Supplementary documentation and reference files
-│   ├── User_Manual.html         # Content for the Quick Start Guide (loaded via iframe)
-│   ├── code-base-overview.html  # Technical overview of the codebase (infographic style)
-│   └── shortcuts.html           # Reference for keyboard shortcuts (legacy/static)
 ├── Visualization_Start.bat      # Script to start the local server
 ├── python_check.bat             # Script to check Python installation
 ├── favicon.png                      # Browser tab icon
-├── context.md                       # Detailed technical overview for AI assistance
-├── Improvements.txt                 # Log of planned and completed improvements
 ├── package-lock.json                # NPM lockfile
+├── annex/                       # Supplementary documentation and reference files
+│   ├── User_Manual.html         # Content for the Quick Start Guide (loaded via iframe)
+│   ├── code-base-overview.html  # Technical overview of the codebase (infographic style)
+│   ├── Changelog.html           # Project update history (loaded via iframe)
+│   └── shortcuts.html           # Reference for keyboard shortcuts (legacy/static)
+├── intel/                       # Project documentation and AI context
+│   ├── readme.md                # This documentation
+│   ├── context.md               # Detailed technical overview for AI assistance
+│   └── GEMINI.md                # High-level project overview for AI
 ├── src/
     ├── constants.js                 # Shared constants (radar bounds, FPS)
     ├── dataExplorer.js              # Logic for the Data Explorer panel (AG Grid, Chart.js)
@@ -243,6 +246,8 @@ Adjust Offset: Manually enter offset (ms, +ve if radar lags) and press Enter.
 
 Adjust Speed: Use the "Speed" slider.
 
+Use Header Buttons: Access "Quick-Start Guide", "Codebase Overview", "Keyboard Shortcuts", and "What's New?".
+
 Use Sidebar (<kbd>M</kbd>): Access toggles (Color modes <kbd>1-4</kbd>/<kbd>S</kbd>, Tracks <kbd>T</kbd>, Details <kbd>D</kbd>, Zoom <kbd>G</kbd>, Predicted Pos <kbd>P</kbd>, Debug <kbd>A</kbd>, Raw Only <kbd>C</kbd>, Confirmed Only), SNR range, TTC customization.
 
 Data Explorer (<kbd>I</kbd> / Canvas Click):