Update script.js

script.js

@@ -51,6 +51,7 @@ let confirmModalOverlayEl, confirmModalMessageEl, confirmModalConfirmBtnEl, conf
 let currentConfirmCallback = null;
 let historyNavLeftBtnEl, historyNavRightBtnEl;
 let modalThinkingBudgetSliderEl, modalThinkingBudgetValueDisplayEl;
+let promptDisplayModalOverlayEl, promptDisplayModalContentEl, fullPromptTextEl, promptDisplayModalCloseBtnEl;
 
 
 // --- Constants ---
@@ -494,7 +495,7 @@ function showFourGridPreviewUI() {
     updateSelectedGridItemUI();
 }
 
-function showSingleLargePreviewUI(htmlContent, titleText, subtitleText = "Evolution Step") {
+function showSingleLargePreviewUI(htmlContent, titleText, fullPromptText) {
     previewGridWrapperEl.innerHTML = '';
     previewGridWrapperEl.className = 'single-mode';
      if(perspectiveViewportEl) perspectiveViewportEl.style.perspective = 'none';
@@ -515,17 +516,34 @@ function showSingleLargePreviewUI(htmlContent, titleText, subtitleText = "Evolut
     item.appendChild(bodyEl);
     previewGridWrapperEl.appendChild(item);
 
-    updateMainContentTitles(titleText, subtitleText);
+    // Handle subtitle truncation and clickability
+    const maxPromptLength = 50;
+    let displaySubtitle = fullPromptText;
+    mainContentSubtitleH2El.classList.remove('prompt-truncated');
+    delete mainContentSubtitleH2El.dataset.fullPrompt;
+
+    if (fullPromptText && fullPromptText.length > maxPromptLength) {
+        displaySubtitle = fullPromptText.substring(0, maxPromptLength) + "... (click to view full)";
+        mainContentSubtitleH2El.classList.add('prompt-truncated');
+        mainContentSubtitleH2El.dataset.fullPrompt = fullPromptText; // Store full prompt
+    }
+
+    updateMainContentTitles(titleText, displaySubtitle); // Use potentially truncated text
 }
 
 function showInitialPreviewStateUI() {
-    previewGridWrapperEl.innerHTML = '<div class="col-span-2 row-span-2 flex items-center justify-center text-slate-500 text-lg"><p>Press Alt+P to enter prompt and click "Generate" to begin.</p></div>';
+    previewGridWrapperEl.innerHTML = '<div class="col-span-2 row-span-2 flex items-center justify-center text-slate-500 text-lg"><p>Press Alt+P to enter prompt and click \"Generate\" to begin.</p></div>';
     previewGridWrapperEl.className = 'grid-mode';
     if(perspectiveViewportEl) perspectiveViewportEl.style.perspective = '1500px';
     updateMainContentTitles("Live Previews", "Powered by Gemini Models");
     if (codeOutputEl) codeOutputEl.innerHTML = '<code class="language-html">// Select a variation or history item to view its code.</code>';
     if (selectedCodeTitleH3El) selectedCodeTitleH3El.textContent = "Selected Code:";
     selectedVariationGridIndex = -1;
+    // Reset subtitle state when going back to initial view
+    if (mainContentSubtitleH2El) {
+        mainContentSubtitleH2El.classList.remove('prompt-truncated');
+        delete mainContentSubtitleH2El.dataset.fullPrompt;
+    }
 }
 
 function updateMainContentTitles(title, subtitle) {
@@ -1093,6 +1111,31 @@ Return ONLY the JSON object. Do not include any other explanatory text or markdo
     }
 }
 
+// --- Full Prompt Display Modal Logic ---
+function showFullPromptModal(fullPrompt) {
+    if (!promptDisplayModalOverlayEl || !fullPromptTextEl) return;
+
+    fullPromptTextEl.textContent = fullPrompt;
+
+    // Animation handling
+    promptDisplayModalOverlayEl.classList.remove('modal-anim-fade-out');
+    promptDisplayModalOverlayEl.style.display = 'flex';
+    promptDisplayModalOverlayEl.classList.add('modal-anim-fade-in');
+}
+
+function hideFullPromptModal() {
+    if (!promptDisplayModalOverlayEl) return;
+
+    promptDisplayModalOverlayEl.classList.remove('modal-anim-fade-in');
+    promptDisplayModalOverlayEl.classList.add('modal-anim-fade-out');
+
+    const handleAnimationEnd = () => {
+        promptDisplayModalOverlayEl.style.display = 'none';
+        promptDisplayModalOverlayEl.removeEventListener('animationend', handleAnimationEnd);
+    };
+    promptDisplayModalOverlayEl.addEventListener('animationend', handleAnimationEnd);
+}
+
 // --- Initialization ---
 document.addEventListener('DOMContentLoaded', () => {
     console.log("DOMContentLoaded event fired.");
@@ -1146,11 +1189,15 @@ document.addEventListener('DOMContentLoaded', () => {
     historyNavRightBtnEl = document.getElementById('history-nav-right-button');
     modalThinkingBudgetSliderEl = document.getElementById('modal-thinking-budget-slider');
     modalThinkingBudgetValueDisplayEl = document.getElementById('modal-thinking-budget-value');
+    promptDisplayModalOverlayEl = document.getElementById('prompt-display-modal-overlay');
+    promptDisplayModalContentEl = document.getElementById('prompt-display-modal-content');
+    fullPromptTextEl = document.getElementById('full-prompt-text');
+    promptDisplayModalCloseBtnEl = document.getElementById('prompt-display-modal-close-button');
 
 
     // --- Check if all required elements exist ---
     let missingElements = [];
-    const requiredElements = { apiKeyEl, modelSelEl, codeOutputEl, errorMessageEl, refinementLoadingIndicator, mainContentEl, configButtonEl, intervalSliderEl, intervalValueDisplayEl, fullscreenOverlayEl, fullscreenIframeEl, exitFullscreenBtnEl, perspectiveViewportEl, previewGridWrapperEl, historyPanelEl, historyPanelPlaceholderEl, selectedCodeTitleH3El, mainContentTitleH1El, mainContentSubtitleH2El, fullscreenHistoryNavEl, historyNavPrevBtnEl, historyNavNextBtnEl, promptModalOverlayEl, promptModalContentEl, modalUserPromptEl, modalGenerateBtnEl, modalCancelBtnEl, modalLoadingIndicatorEl, modalRefinementCheckboxEl, numVariationsSliderEl, numVariationsValueDisplayEl, configModalOverlayEl, configModalContentEl, configModalCloseBtnEl, copyCodeButtonEl, exportCodeButtonEl, historyToggleButtonEl, historyArrowDownEl, historyArrowUpEl, newButtonEl, confirmModalOverlayEl, confirmModalMessageEl, confirmModalConfirmBtnEl, confirmModalCancelBtnEl, historyNavLeftBtnEl, historyNavRightBtnEl, modalThinkingBudgetSliderEl, modalThinkingBudgetValueDisplayEl };
+    const requiredElements = { apiKeyEl, modelSelEl, codeOutputEl, errorMessageEl, refinementLoadingIndicator, mainContentEl, configButtonEl, intervalSliderEl, intervalValueDisplayEl, fullscreenOverlayEl, fullscreenIframeEl, exitFullscreenBtnEl, perspectiveViewportEl, previewGridWrapperEl, historyPanelEl, historyPanelPlaceholderEl, selectedCodeTitleH3El, mainContentTitleH1El, mainContentSubtitleH2El, fullscreenHistoryNavEl, historyNavPrevBtnEl, historyNavNextBtnEl, promptModalOverlayEl, promptModalContentEl, modalUserPromptEl, modalGenerateBtnEl, modalCancelBtnEl, modalLoadingIndicatorEl, modalRefinementCheckboxEl, numVariationsSliderEl, numVariationsValueDisplayEl, configModalOverlayEl, configModalContentEl, configModalCloseBtnEl, copyCodeButtonEl, exportCodeButtonEl, historyToggleButtonEl, historyArrowDownEl, historyArrowUpEl, newButtonEl, confirmModalOverlayEl, confirmModalMessageEl, confirmModalConfirmBtnEl, confirmModalCancelBtnEl, historyNavLeftBtnEl, historyNavRightBtnEl, modalThinkingBudgetSliderEl, modalThinkingBudgetValueDisplayEl, promptDisplayModalOverlayEl, promptDisplayModalContentEl, fullPromptTextEl, promptDisplayModalCloseBtnEl };
     for (const key in requiredElements) { if (!requiredElements[key]) { missingElements.push(key); } }
 
     if (missingElements.length > 0) {
@@ -1194,6 +1241,22 @@ document.addEventListener('DOMContentLoaded', () => {
         confirmModalOverlayEl.addEventListener('click', (e) => {
             if (e.target === confirmModalOverlayEl) { hideConfirmModal(); }
         });
+    }
+    if (promptDisplayModalOverlayEl) { // Listener for full prompt display modal overlay click
+        promptDisplayModalOverlayEl.addEventListener('click', (e) => {
+            if (e.target === promptDisplayModalOverlayEl) { hideFullPromptModal(); }
+        });
+    }
+    if (promptDisplayModalCloseBtnEl) { // Listener for full prompt display modal close button
+        promptDisplayModalCloseBtnEl.addEventListener('click', hideFullPromptModal);
+    }
+    if (mainContentSubtitleH2El) { // Listener for clicking the subtitle
+        mainContentSubtitleH2El.addEventListener('click', (e) => {
+            const fullPrompt = e.target.dataset.fullPrompt;
+            if (fullPrompt) { // Check if the data attribute exists (meaning it was truncated)
+                showFullPromptModal(fullPrompt);
+            }
+        });
     }
      if (modalUserPromptEl) modalUserPromptEl.addEventListener('keydown', (event) => {
          if (event.key === 'Enter' && (event.ctrlKey || event.metaKey)) {
@@ -1351,6 +1414,8 @@ document.addEventListener('DOMContentLoaded', () => {
                  hidePromptModal();
             } else if (confirmModalOverlayEl.style.display !== 'none' && !confirmModalOverlayEl.classList.contains('modal-anim-fade-out')) { // Add Escape handler for confirm modal
                  hideConfirmModal();
+            } else if (promptDisplayModalOverlayEl.style.display !== 'none' && !promptDisplayModalOverlayEl.classList.contains('modal-anim-fade-out')) { // Add Escape handler for prompt display modal
+                 hideFullPromptModal();
             } else if (document.body.classList.contains('fullscreen-active')) {
                 exitFullscreen();
             }