feat(ui): add log level selector and dynamic version display

Users can now change log levels without navigating to the full settings
page. The version number is injected at build time from package.json,
ensuring the displayed version always matches the actual package version
without manual updates. The __APP_VERSION__ constant is defined globally
via Vite's define configuration and declared in TypeScript types.

Author: jamesainslie

src/options/options.html

@@ -203,7 +203,7 @@ <h2>Advanced</h2>
           <button id="btn-save" class="primary-button">Save Changes</button>
           <span id="save-status" class="save-status"></span>
         </div>
-        <p class="version">MDView v1.0.0</p>
+        <p class="version" id="app-version">MDView v1.0.0</p>
       </footer>
     </div>
 

src/options/options.ts

@@ -31,9 +31,24 @@ class OptionsManager {
     // Setup storage listener
     this.setupStorageListener();
 
+    // Set version
+    this.setAppVersion();
+
     debug.log('Options', 'Initialized');
   }
 
+  private setAppVersion(): void {
+    const versionElement = document.getElementById('app-version');
+    if (versionElement) {
+      // __APP_VERSION__ is injected by Vite at build time
+      try {
+        versionElement.textContent = `MDView v${__APP_VERSION__}`;
+      } catch (e) {
+        debug.warn('Options', 'Failed to set app version:', e);
+      }
+    }
+  }
+
   private setupStorageListener(): void {
     chrome.storage.onChanged.addListener((changes, areaName) => {
       if (areaName === 'sync' && changes.preferences) {

src/popup/popup.html

@@ -29,6 +29,18 @@ <h1>MDView</h1>
           </select>
         </section>
 
+        <!-- Log Level Selection -->
+        <section class="setting-section">
+          <label for="log-level-select" class="setting-label">Log Level</label>
+          <select id="log-level-select" class="theme-select">
+            <option value="none">None</option>
+            <option value="error">Error</option>
+            <option value="warn">Warning</option>
+            <option value="info">Info</option>
+            <option value="debug">Debug</option>
+          </select>
+        </section>
+
         <!-- Quick Toggles -->
         <section class="setting-section">
           <div class="toggle-group">
@@ -78,7 +90,7 @@ <h1>MDView</h1>
       </main>
 
       <footer class="popup-footer">
-        <p class="version">Version 1.0.0</p>
+        <p class="version" id="app-version">Version 1.0.0</p>
       </footer>
     </div>
 

src/popup/popup.ts

@@ -3,7 +3,7 @@
  * Manages popup UI and interactions
  */
 
-import type { AppState, ThemeName } from '../types';
+import type { AppState, ThemeName, LogLevel } from '../types';
 import { debug } from '../utils/debug-logger';
 
 class PopupManager {
@@ -24,9 +24,25 @@ class PopupManager {
     // Setup storage listener
     this.setupStorageListener();
 
+    // Set version
+    this.setAppVersion();
+
     debug.log('Popup', 'Initialized');
   }
 
+  private setAppVersion(): void {
+    const versionElement = document.getElementById('app-version');
+    if (versionElement) {
+      // __APP_VERSION__ is injected by Vite at build time
+      try {
+        versionElement.textContent = `Version ${__APP_VERSION__}`;
+      } catch (e) {
+        // Fallback if define replacement fails (e.g. in some dev environments)
+        debug.warn('Popup', 'Failed to set app version:', e);
+      }
+    }
+  }
+
   private setupStorageListener(): void {
     chrome.storage.onChanged.addListener((changes, areaName) => {
       if (areaName === 'sync' && changes.preferences) {
@@ -87,6 +103,12 @@ class PopupManager {
     if (syncTabs) {
       syncTabs.checked = preferences.syncTabs;
     }
+
+    // Update log level select
+    const logLevelSelect = document.getElementById('log-level-select') as HTMLSelectElement;
+    if (logLevelSelect) {
+      logLevelSelect.value = preferences.logLevel || 'error';
+    }
   }
 
   private setupEventListeners(): void {
@@ -156,6 +178,15 @@ class PopupManager {
       });
     }
 
+    // Log level select
+    const logLevelSelect = document.getElementById('log-level-select');
+    if (logLevelSelect) {
+      logLevelSelect.addEventListener('change', (e) => {
+        const target = e.target as HTMLSelectElement;
+        void this.handlePreferenceChange({ logLevel: target.value as LogLevel });
+      });
+    }
+
     // Settings button
     const btnSettings = document.getElementById('btn-settings');
     if (btnSettings) {

src/types/index.d.ts

@@ -4,6 +4,8 @@
  * Global window extensions
  */
 declare global {
+  const __APP_VERSION__: string;
+
   interface Window {
     __MDVIEW_MERMAID_CODE__?: Map<string, string>;
   }
@@ -281,4 +283,3 @@ export interface MermaidTaskResult {
   svg: string;
   id: string;
 }
-

vite.config.ts

@@ -2,8 +2,12 @@ import { defineConfig } from 'vite';
 import { crx } from '@crxjs/vite-plugin';
 import { resolve } from 'path';
 import manifest from './public/manifest.json';
+import packageJson from './package.json';
 
 export default defineConfig({
+  define: {
+    __APP_VERSION__: JSON.stringify(packageJson.version),
+  },
   plugins: [crx({ manifest })],
   base: './',
   resolve: {