From 59f0b26e63cfc201bbdf4772b3a5a3d7082532aa Mon Sep 17 00:00:00 2001
From: FragginWagon <greg.r.jacobs@gmail.com>
Date: Wed, 28 Jan 2026 19:52:15 +0000
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20GamemasterExplorer=20view=20t?=
 =?UTF-8?q?o=20enhance=20functionality?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/GamemasterExplorer.vue          | 1012 +++++++++++++++++
 1 file changed, 1012 insertions(+)
 create mode 100644 code/websites/pokedex.online/src/views/GamemasterExplorer.vue

diff --git a/code/websites/pokedex.online/src/views/GamemasterExplorer.vue b/code/websites/pokedex.online/src/views/GamemasterExplorer.vue
new file mode 100644
index 0000000..0eb5765
--- /dev/null
+++ b/code/websites/pokedex.online/src/views/GamemasterExplorer.vue
@@ -0,0 +1,1012 @@
+<template>
+  <div class="gamemaster-explorer">
+    <!-- Loading State -->
+    <div v-if="loading" class="loading-state">
+      <div class="spinner"></div>
+      <p>Loading Gamemaster Explorer...</p>
+    </div>
+
+    <!-- Error State -->
+    <div v-else-if="error" class="error-state">
+      <p class="error-message">{{ error }}</p>
+      <button @click="loadStatus" class="btn-retry">Retry</button>
+    </div>
+
+    <!-- No Files State -->
+    <div v-else-if="!hasFiles" class="no-files-state">
+      <h2>No Gamemaster Files Available</h2>
+      <p>Please process gamemaster data first in the Gamemaster Manager.</p>
+      <router-link to="/gamemaster" class="btn-primary">Go to Gamemaster Manager</router-link>
+    </div>
+
+    <!-- Main Explorer Interface -->
+    <div v-else class="explorer-container">
+      <!-- Header -->
+      <header class="explorer-header">
+        <h1>🔍 Gamemaster Explorer</h1>
+        <div class="header-controls">
+          <button @click="showHelp = !showHelp" class="btn-icon" title="Keyboard Shortcuts (?)">
+            <span v-if="!showHelp">?</span>
+            <span v-else>✕</span>
+          </button>
+          <button @click="showSettings = !showSettings" class="btn-icon" title="Settings">⚙️</button>
+        </div>
+      </header>
+
+      <!-- Keyboard Shortcuts Help -->
+      <div v-if="showHelp" class="help-panel">
+        <h3>Keyboard Shortcuts</h3>
+        <ul>
+          <li><kbd>Ctrl</kbd>+<kbd>F</kbd> - Focus search</li>
+          <li><kbd>Ctrl</kbd>+<kbd>C</kbd> - Copy selected lines</li>
+          <li><kbd>Ctrl</kbd>+<kbd>G</kbd> - Go to next search result</li>
+          <li><kbd>Shift</kbd>+<kbd>Ctrl</kbd>+<kbd>G</kbd> - Go to previous result</li>
+          <li><kbd>Escape</kbd> - Clear selection / Close dialogs</li>
+        </ul>
+      </div>
+
+      <!-- Settings Panel -->
+      <div v-if="showSettings" class="settings-panel">
+        <h3>Settings</h3>
+        <label>
+          <input type="checkbox" v-model="preferences.lineWrap" />
+          Line Wrap
+        </label>
+        <label>
+          <input type="checkbox" v-model="preferences.darkMode" />
+          Dark Mode
+        </label>
+        <label>
+          <input type="checkbox" v-model="preferences.showLineNumbers" />
+          Show Line Numbers
+        </label>
+        <label>
+          Performance:
+          <select v-model="preferences.performanceMode">
+            <option value="auto">Auto</option>
+            <option value="high">High</option>
+            <option value="medium">Medium</option>
+            <option value="low">Low</option>
+          </select>
+        </label>
+      </div>
+
+      <!-- File Selector -->
+      <div class="file-selector">
+        <label for="file-select">Select File:</label>
+        <select id="file-select" v-model="selectedFile" @change="onFileChange">
+          <option value="">-- Choose a file --</option>
+          <option v-if="status.files?.pokemonFile" value="pokemon">Pokemon ({{ formatSize(status.files.pokemonFile.size) }})</option>
+          <option v-if="status.files?.movesFile" value="moves">Moves ({{ formatSize(status.files.movesFile.size) }})</option>
+          <option v-if="status.files?.rawFile" value="raw">Raw Gamemaster ({{ formatSize(status.files.rawFile.size) }})</option>
+        </select>
+        <span v-if="fileContent" class="file-info">{{ fileLines.length.toLocaleString() }} lines</span>
+      </div>
+
+      <!-- Search Bar -->
+      <div v-if="fileContent" class="search-bar">
+        <div class="search-input-wrapper">
+          <input
+            ref="searchInput"
+            type="text"
+            v-model="searchQuery"
+            @input="onSearchInput"
+            placeholder="Search in file... (Ctrl+F)"
+            class="search-input"
+          />
+          <button v-if="searchQuery" @click="clearSearch" class="btn-clear" title="Clear search">✕</button>
+        </div>
+        
+        <div v-if="searchResults.length > 0" class="search-results">
+          <span>{{ currentResultIndex + 1 }} / {{ searchResults.length }}</span>
+          <button @click="goToPrevResult" class="btn-nav" :disabled="searchResults.length === 0">↑</button>
+          <button @click="goToNextResult" class="btn-nav" :disabled="searchResults.length === 0">↓</button>
+        </div>
+
+        <div v-if="searchHistory.history.value.length > 0" class="search-history">
+          <button
+            v-for="(item, index) in searchHistory.history.value"
+            :key="index"
+            @click="applyHistoryItem(item)"
+            class="history-item"
+          >
+            {{ item }}
+          </button>
+        </div>
+      </div>
+
+      <!-- Property Filter -->
+      <div v-if="fileContent && jsonPaths.length > 0" class="property-filter">
+        <label>Filter by Property:</label>
+        <select v-model="filterProperty" @change="onFilterChange">
+          <option value="">All Properties</option>
+          <option v-for="path in jsonPaths" :key="path" :value="path">{{ path }}</option>
+        </select>
+        <input
+          v-if="filterProperty"
+          type="text"
+          v-model="filterValue"
+          @input="onFilterChange"
+          placeholder="Enter value..."
+          class="filter-value-input"
+        />
+        <label v-if="filterProperty" class="filter-mode">
+          <input type="radio" value="OR" v-model="filterMode" @change="onFilterChange" /> OR
+          <input type="radio" value="AND" v-model="filterMode" @change="onFilterChange" /> AND
+        </label>
+      </div>
+
+      <!-- Progress Bar (for long operations) -->
+      <div v-if="operationProgress.active" class="progress-bar-container">
+        <div class="progress-bar" :class="{ 'complete': operationProgress.complete }">
+          <div class="progress-fill" :style="{ width: operationProgress.percent + '%' }"></div>
+        </div>
+        <span class="progress-text">{{ operationProgress.message }}</span>
+      </div>
+
+      <!-- JSON Content Viewer -->
+      <div v-if="fileContent" class="content-viewer" :class="{ 'dark-mode': preferences.darkMode, 'line-wrap': preferences.lineWrap }">
+        <!-- Virtual Scroller for large files -->
+        <RecycleScroller
+          v-if="displayLines.length > 1000"
+          class="scroller"
+          :items="displayLines"
+          :item-size="lineHeight"
+          key-field="lineNumber"
+        >
+          <template #default="{ item }">
+            <div
+              :class="[
+                'line',
+                { 'selected': selectedLines.has(item.lineNumber) },
+                { 'highlight-match': item.hasMatch }
+              ]"
+              @click="toggleLineSelection(item.lineNumber, $event)"
+            >
+              <span v-if="preferences.showLineNumbers" class="line-number">{{ item.lineNumber }}</span>
+              <pre v-highlight="highlightConfig"><code>{{ item.content }}</code></pre>
+            </div>
+          </template>
+        </RecycleScroller>
+
+        <!-- Regular render for smaller files -->
+        <div v-else class="lines-container">
+          <div
+            v-for="line in displayLines"
+            :key="line.lineNumber"
+            :class="[
+              'line',
+              { 'selected': selectedLines.has(line.lineNumber) },
+              { 'highlight-match': line.hasMatch }
+            ]"
+            @click="toggleLineSelection(line.lineNumber, $event)"
+          >
+            <span v-if="preferences.showLineNumbers" class="line-number">{{ line.lineNumber }}</span>
+            <pre v-highlight="highlightConfig"><code>{{ line.content }}</code></pre>
+          </div>
+        </div>
+
+        <!-- Too Large Warning -->
+        <div v-if="fileTooLarge" class="warning-banner">
+          ⚠️ File exceeds 10,000 lines. Showing first 10,000 lines only. Use search or filters to find specific content.
+        </div>
+      </div>
+
+      <!-- Action Bar -->
+      <div v-if="fileContent" class="action-bar">
+        <button @click="copySelected" :disabled="selectedLines.size === 0" class="btn-action">
+          📋 Copy Selected ({{ selectedLines.size }} lines)
+        </button>
+        <button @click="copyAll" class="btn-action">📋 Copy All</button>
+        <button @click="exportSelected" :disabled="selectedLines.size === 0" class="btn-action">
+          💾 Export Selected
+        </button>
+        <button @click="exportAll" class="btn-action">💾 Export All</button>
+        <button @click="shareUrl" class="btn-action">🔗 Share Link</button>
+      </div>
+
+      <!-- Toast Notifications -->
+      <div v-if="clipboard.copied.value" class="toast success">✓ Copied to clipboard!</div>
+      <div v-if="clipboard.error.value" class="toast error">✗ {{ clipboard.error.value }}</div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted, nextTick } from 'vue';
+import { RecycleScroller } from 'vue-virtual-scroller';
+import { GamemasterClient } from '@/utilities/gamemaster-client.js';
+import { useKeyboardShortcuts } from '@/composables/useKeyboardShortcuts.js';
+import { useUrlState } from '@/composables/useUrlState.js';
+import { useClipboard } from '@/composables/useClipboard.js';
+import { useLocalStorage, useSearchHistory } from '@/composables/useLocalStorage.js';
+import { perfMonitor, debounce, getDevicePerformance } from '@/utilities/performance-utils.js';
+import { extractJsonPaths, extractJsonPathsLazy, truncateMiddle, getValueByPath } from '@/utilities/json-utils.js';
+
+// Core state
+const loading = ref(true);
+const error = ref(null);
+const status = ref({});
+const selectedFile = ref('');
+const fileContent = ref('');
+const fileLines = ref([]);
+const displayLines = ref([]);
+
+// UI state
+const showHelp = ref(false);
+const showSettings = ref(false);
+const searchInput = ref(null);
+
+// Search state
+const searchQuery = ref('');
+const searchResults = ref([]);
+const currentResultIndex = ref(0);
+const searchHistory = useSearchHistory();
+
+// Filter state
+const filterProperty = ref('');
+const filterValue = ref('');
+const filterMode = ref('OR');
+const jsonPaths = ref([]);
+
+// Selection state
+const selectedLines = ref(new Set());
+
+// Progress state
+const operationProgress = ref({
+  active: false,
+  percent: 0,
+  message: '',
+  complete: false
+});
+
+// Preferences (persisted)
+const preferences = useLocalStorage('gamemaster-explorer-prefs', {
+  darkMode: false,
+  lineWrap: false,
+  showLineNumbers: true,
+  performanceMode: 'auto',
+  lastFile: ''
+});
+
+// Composables
+const clipboard = useClipboard();
+const client = new GamemasterClient();
+
+// Computed
+const hasFiles = computed(() => status.value.totalFiles > 0);
+const fileTooLarge = computed(() => fileLines.value.length > 10000);
+const lineHeight = computed(() => {
+  // Mobile-first: 24px on mobile, 20px on desktop
+  return window.innerWidth < 768 ? 24 : 20;
+});
+const highlightConfig = computed(() => ({
+  theme: preferences.value.darkMode ? 'github-dark' : 'github',
+  language: 'json'
+}));
+
+// URL state sync
+const urlStateRefs = {
+  file: selectedFile,
+  search: searchQuery,
+  filter: filterProperty,
+  value: filterValue
+};
+useUrlState(urlStateRefs);
+
+// Keyboard shortcuts
+useKeyboardShortcuts({
+  'ctrl+f': () => {
+    showHelp.value = false;
+    showSettings.value = false;
+    nextTick(() => searchInput.value?.focus());
+  },
+  'ctrl+c': copySelected,
+  'ctrl+g': goToNextResult,
+  'shift+ctrl+g': goToPrevResult,
+  'escape': () => {
+    if (showHelp.value || showSettings.value) {
+      showHelp.value = false;
+      showSettings.value = false;
+    } else if (selectedLines.value.size > 0) {
+      selectedLines.value.clear();
+    } else if (searchQuery.value) {
+      clearSearch();
+    }
+  }
+});
+
+// Methods
+async function loadStatus() {
+  try {
+    loading.value = true;
+    error.value = null;
+    status.value = await perfMonitor('Load Status', async () => {
+      return await client.getStatus();
+    });
+
+    // Auto-load last file if set
+    if (preferences.value.lastFile && !selectedFile.value) {
+      selectedFile.value = preferences.value.lastFile;
+      await loadFile();
+    }
+  } catch (err) {
+    error.value = err.message;
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function loadFile() {
+  if (!selectedFile.value) return;
+
+  try {
+    loading.value = true;
+    error.value = null;
+
+    let data;
+    switch (selectedFile.value) {
+      case 'pokemon':
+        data = await perfMonitor('Load Pokemon', () => client.getPokemon());
+        break;
+      case 'moves':
+        data = await perfMonitor('Load Moves', () => client.getMoves());
+        break;
+      case 'raw':
+        data = await perfMonitor('Load Raw', () => client.getRaw());
+        break;
+      default:
+        throw new Error('Unknown file type');
+    }
+
+    fileContent.value = JSON.stringify(data, null, 2);
+    fileLines.value = fileContent.value.split('\n');
+    
+    // Limit to 10K lines
+    const linesToDisplay = fileLines.value.slice(0, 10000);
+    displayLines.value = linesToDisplay.map((content, index) => ({
+      lineNumber: index + 1,
+      content,
+      hasMatch: false
+    }));
+
+    // Extract JSON paths for filtering (in background)
+    jsonPaths.value = extractJsonPaths(data);
+    extractJsonPathsLazy(data, (paths) => {
+      jsonPaths.value = paths;
+    });
+
+    // Save last file preference
+    preferences.value.lastFile = selectedFile.value;
+
+    loading.value = false;
+  } catch (err) {
+    error.value = err.message;
+    loading.value = false;
+  }
+}
+
+function onFileChange() {
+  // Clear state
+  searchQuery.value = '';
+  searchResults.value = [];
+  currentResultIndex.value = 0;
+  filterProperty.value = '';
+  filterValue.value = '';
+  selectedLines.value.clear();
+  jsonPaths.value = [];
+
+  loadFile();
+}
+
+const onSearchInput = debounce(async () => {
+  if (!searchQuery.value.trim()) {
+    searchResults.value = [];
+    displayLines.value.forEach(line => line.hasMatch = false);
+    return;
+  }
+
+  // Show progress for long searches
+  const searchTerm = searchQuery.value.toLowerCase();
+  operationProgress.value = { active: true, percent: 0, message: 'Searching...', complete: false };
+
+  await perfMonitor('Search', async () => {
+    const results = [];
+    const device = getDevicePerformance();
+    const chunkSize = device.recommendedChunkSize;
+
+    // Process in chunks
+    for (let i = 0; i < displayLines.value.length; i += chunkSize) {
+      const chunk = displayLines.value.slice(i, i + chunkSize);
+      
+      chunk.forEach((line, idx) => {
+        const actualIndex = i + idx;
+        const matches = line.content.toLowerCase().includes(searchTerm);
+        displayLines.value[actualIndex].hasMatch = matches;
+        
+        if (matches) {
+          results.push(actualIndex);
+        }
+      });
+
+      // Update progress
+      operationProgress.value.percent = Math.min(((i + chunkSize) / displayLines.value.length) * 100, 100);
+      
+      // Yield to browser
+      if (i % (chunkSize * 3) === 0) {
+        await new Promise(resolve => setTimeout(resolve, 0));
+      }
+    }
+
+    searchResults.value = results;
+    currentResultIndex.value = 0;
+
+    // Complete animation
+    operationProgress.value.complete = true;
+    setTimeout(() => {
+      operationProgress.value.active = false;
+    }, 500);
+  });
+
+  // Add to search history
+  searchHistory.addToHistory(searchQuery.value);
+}, 300);
+
+function clearSearch() {
+  searchQuery.value = '';
+  searchResults.value = [];
+  displayLines.value.forEach(line => line.hasMatch = false);
+}
+
+function goToNextResult() {
+  if (searchResults.value.length === 0) return;
+  currentResultIndex.value = (currentResultIndex.value + 1) % searchResults.value.length;
+  scrollToResult();
+}
+
+function goToPrevResult() {
+  if (searchResults.value.length === 0) return;
+  currentResultIndex.value = (currentResultIndex.value - 1 + searchResults.value.length) % searchResults.value.length;
+  scrollToResult();
+}
+
+function scrollToResult() {
+  const lineIndex = searchResults.value[currentResultIndex.value];
+  const lineElement = document.querySelector(`[data-line="${lineIndex + 1}"]`);
+  lineElement?.scrollIntoView({ behavior: 'smooth', block: 'center' });
+}
+
+function applyHistoryItem(item) {
+  searchQuery.value = item;
+  onSearchInput();
+}
+
+function onFilterChange() {
+  // Implement property filtering
+  // This is complex - needs to parse JSON and filter based on property paths
+  console.log('Filter change:', filterProperty.value, filterValue.value, filterMode.value);
+}
+
+function toggleLineSelection(lineNumber, event) {
+  if (event.shiftKey && selectedLines.value.size > 0) {
+    // Range selection
+    const lastSelected = Math.max(...selectedLines.value);
+    const start = Math.min(lastSelected, lineNumber);
+    const end = Math.max(lastSelected, lineNumber);
+    
+    for (let i = start; i <= end; i++) {
+      selectedLines.value.add(i);
+    }
+  } else if (event.ctrlKey || event.metaKey) {
+    // Toggle individual line
+    if (selectedLines.value.has(lineNumber)) {
+      selectedLines.value.delete(lineNumber);
+    } else {
+      selectedLines.value.add(lineNumber);
+    }
+  } else {
+    // Single selection
+    selectedLines.value.clear();
+    selectedLines.value.add(lineNumber);
+  }
+}
+
+async function copySelected() {
+  if (selectedLines.value.size === 0) return;
+
+  const lines = [...selectedLines.value].sort((a, b) => a - b);
+  const content = lines.map(lineNum => {
+    return displayLines.value.find(l => l.lineNumber === lineNum)?.content || '';
+  }).join('\n');
+
+  await clipboard.copyToClipboard(content);
+}
+
+async function copyAll() {
+  await clipboard.copyToClipboard(fileContent.value);
+}
+
+function exportSelected() {
+  if (selectedLines.value.size === 0) return;
+  
+  const lines = [...selectedLines.value].sort((a, b) => a - b);
+  const content = lines.map(lineNum => {
+    return displayLines.value.find(l => l.lineNumber === lineNum)?.content || '';
+  }).join('\n');
+
+  downloadFile(content, `${selectedFile.value}-selected-${Date.now()}.json`);
+}
+
+function exportAll() {
+  downloadFile(fileContent.value, `${selectedFile.value}-${Date.now()}.json`);
+}
+
+function downloadFile(content, filename) {
+  const blob = new Blob([content], { type: 'application/json' });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = filename;
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+  URL.revokeObjectURL(url);
+}
+
+async function shareUrl() {
+  const url = window.location.href;
+  await clipboard.copyToClipboard(url);
+}
+
+function formatSize(bytes) {
+  if (!bytes) return '0 B';
+  const k = 1024;
+  const sizes = ['B', 'KB', 'MB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i];
+}
+
+// Lifecycle
+onMounted(() => {
+  loadStatus();
+});
+</script>
+
+<style scoped>
+.gamemaster-explorer {
+  min-height: 100vh;
+  background: var(--bg-primary, #ffffff);
+  color: var(--text-primary, #1a1a1a);
+  padding: 1rem;
+}
+
+/* Loading & Error States */
+.loading-state, .error-state, .no-files-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 60vh;
+  text-align: center;
+  gap: 1rem;
+}
+
+.spinner {
+  width: 40px;
+  height: 40px;
+  border: 4px solid #f3f3f3;
+  border-top: 4px solid #3498db;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+/* Header */
+.explorer-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1.5rem;
+  padding-bottom: 1rem;
+  border-bottom: 2px solid #e0e0e0;
+}
+
+.explorer-header h1 {
+  margin: 0;
+  font-size: 1.75rem;
+}
+
+.header-controls {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.btn-icon {
+  width: 44px;
+  height: 44px;
+  border-radius: 8px;
+  border: 1px solid #ccc;
+  background: white;
+  cursor: pointer;
+  font-size: 1.25rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.btn-icon:hover {
+  background: #f5f5f5;
+}
+
+/* Help & Settings Panels */
+.help-panel, .settings-panel {
+  background: #f9f9f9;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  padding: 1rem;
+  margin-bottom: 1rem;
+}
+
+.help-panel h3, .settings-panel h3 {
+  margin-top: 0;
+}
+
+.help-panel ul {
+  list-style: none;
+  padding: 0;
+}
+
+.help-panel li {
+  padding: 0.5rem 0;
+}
+
+.help-panel kbd {
+  background: #fff;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  padding: 2px 6px;
+  font-family: monospace;
+  font-size: 0.9em;
+}
+
+.settings-panel label {
+  display: block;
+  margin: 0.75rem 0;
+}
+
+/* File Selector */
+.file-selector {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin-bottom: 1rem;
+  flex-wrap: wrap;
+}
+
+.file-selector select {
+  flex: 1;
+  min-width: 200px;
+  padding: 0.5rem;
+  font-size: 1rem;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+.file-info {
+  color: #666;
+  font-size: 0.9rem;
+}
+
+/* Search Bar */
+.search-bar {
+  margin-bottom: 1rem;
+}
+
+.search-input-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+  margin-bottom: 0.5rem;
+}
+
+.search-input {
+  flex: 1;
+  padding: 0.75rem;
+  padding-right: 2.5rem;
+  font-size: 1rem;
+  border: 2px solid #ccc;
+  border-radius: 8px;
+}
+
+.search-input:focus {
+  outline: none;
+  border-color: #3498db;
+}
+
+.btn-clear {
+  position: absolute;
+  right: 0.5rem;
+  background: none;
+  border: none;
+  font-size: 1.25rem;
+  cursor: pointer;
+  color: #999;
+}
+
+.search-results {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.btn-nav {
+  padding: 0.25rem 0.75rem;
+  border: 1px solid #ccc;
+  background: white;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.btn-nav:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.search-history {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.history-item {
+  padding: 0.25rem 0.75rem;
+  background: #f0f0f0;
+  border: 1px solid #ccc;
+  border-radius: 16px;
+  cursor: pointer;
+  font-size: 0.9rem;
+}
+
+.history-item:hover {
+  background: #e0e0e0;
+}
+
+/* Property Filter */
+.property-filter {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+  flex-wrap: wrap;
+}
+
+.property-filter select, .filter-value-input {
+  padding: 0.5rem;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+.filter-mode {
+  display: flex;
+  gap: 0.5rem;
+}
+
+/* Progress Bar */
+.progress-bar-container {
+  margin-bottom: 1rem;
+}
+
+.progress-bar {
+  height: 8px;
+  background: #f0f0f0;
+  border-radius: 4px;
+  overflow: hidden;
+  position: relative;
+}
+
+.progress-fill {
+  height: 100%;
+  background: #3498db;
+  transition: width 0.3s ease;
+}
+
+.progress-bar.complete .progress-fill {
+  background: #2ecc71;
+  animation: blink 0.5s ease-in-out;
+}
+
+@keyframes blink {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+.progress-text {
+  font-size: 0.9rem;
+  color: #666;
+  margin-top: 0.25rem;
+}
+
+/* Content Viewer */
+.content-viewer {
+  background: #f8f8f8;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  margin-bottom: 1rem;
+  max-height: 70vh;
+  overflow: auto;
+}
+
+.content-viewer.dark-mode {
+  background: #1e1e1e;
+  color: #d4d4d4;
+  border-color: #404040;
+}
+
+.scroller {
+  height: 70vh;
+}
+
+.lines-container {
+  padding: 1rem;
+}
+
+.line {
+  display: flex;
+  align-items: flex-start;
+  padding: 0.25rem 0.5rem;
+  cursor: pointer;
+  min-height: 20px;
+}
+
+@media (max-width: 768px) {
+  .line {
+    min-height: 24px;
+  }
+}
+
+.line:hover {
+  background: rgba(0, 123, 255, 0.1);
+}
+
+.line.selected {
+  background: rgba(0, 123, 255, 0.2);
+}
+
+.line.highlight-match {
+  background: rgba(255, 235, 59, 0.3);
+}
+
+.line-number {
+  width: 4rem;
+  text-align: right;
+  color: #999;
+  font-family: monospace;
+  margin-right: 1rem;
+  user-select: none;
+}
+
+.line pre {
+  margin: 0;
+  flex: 1;
+  white-space: pre;
+  overflow-x: auto;
+}
+
+.line-wrap .line pre {
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+.warning-banner {
+  background: #fff3cd;
+  border: 1px solid #ffc107;
+  color: #856404;
+  padding: 1rem;
+  text-align: center;
+  font-weight: bold;
+}
+
+/* Action Bar */
+.action-bar {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+  margin-bottom: 1rem;
+}
+
+.btn-action {
+  padding: 0.75rem 1rem;
+  background: #3498db;
+  color: white;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: 1rem;
+  min-height: 44px;
+}
+
+.btn-action:hover {
+  background: #2980b9;
+}
+
+.btn-action:disabled {
+  background: #ccc;
+  cursor: not-allowed;
+}
+
+/* Toast */
+.toast {
+  position: fixed;
+  bottom: 2rem;
+  right: 2rem;
+  padding: 1rem 1.5rem;
+  border-radius: 8px;
+  font-weight: bold;
+  z-index: 1000;
+  animation: slideIn 0.3s ease-out;
+}
+
+.toast.success {
+  background: #2ecc71;
+  color: white;
+}
+
+.toast.error {
+  background: #e74c3c;
+  color: white;
+}
+
+@keyframes slideIn {
+  from {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .explorer-header h1 {
+    font-size: 1.25rem;
+  }
+
+  .file-selector, .property-filter {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .action-bar {
+    flex-direction: column;
+  }
+
+  .btn-action {
+    width: 100%;
+  }
+}
+
+/* Primary button styles */
+.btn-primary, .btn-retry {
+  display: inline-block;
+  padding: 0.75rem 1.5rem;
+  background: #3498db;
+  color: white;
+  text-decoration: none;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: 1rem;
+  min-height: 44px;
+}
+
+.btn-primary:hover, .btn-retry:hover {
+  background: #2980b9;
+}
+</style>