feat: Implement theming and modal UI improvements

- Introduce CSS custom properties for theming
- Add light theme support via `prefers-color-scheme`
- Enhance modal overlay, centering, and styling
- Improve modal responsiveness across breakpoints
- Remove prompt template and output copy buttons

lib/web/ui/static/css/heroprompt.css

@@ -1,5 +1,97 @@
 /* Enhanced HeroPrompt UI - Clean VSCode-like Design */
 
+/* CSS Custom Properties (Variables) */
+:root {
+    /* Bootstrap-compatible variables */
+    --bs-body-bg: #1e1e1e;
+    --bs-body-color: #d4d4d4;
+    --bs-border-color: #3c3c3c;
+    --bs-primary: #007acc;
+    --bs-primary-rgb: 0, 122, 204;
+    --bs-secondary: #6c757d;
+    --bs-secondary-bg: #2d2d30;
+    --bs-danger: #dc3545;
+    --bs-success: #198754;
+    --bs-warning: #ffc107;
+
+    /* Theme-specific variables */
+    --bg-primary: #1e1e1e;
+    --bg-secondary: #252526;
+    --bg-tertiary: #2d2d30;
+    --text-primary: #d4d4d4;
+    --text-secondary: #969696;
+    --text-muted: #6a6a6a;
+    --border-primary: #3c3c3c;
+    --border-secondary: #464647;
+    --link-color: #007acc;
+    --link-hover-color: #1177bb;
+    --menu-item-hover-bg: #2a2d2e;
+    --danger-color: #f14c4c;
+    --success-color: #89d185;
+    --warning-color: #ffcc02;
+}
+
+/* Light theme support */
+@media (prefers-color-scheme: light) {
+    :root {
+        --bs-body-bg: #ffffff;
+        --bs-body-color: #212529;
+        --bs-border-color: #dee2e6;
+        --bs-secondary-bg: #f8f9fa;
+
+        --bg-primary: #ffffff;
+        --bg-secondary: #f8f9fa;
+        --bg-tertiary: #e9ecef;
+        --text-primary: #212529;
+        --text-secondary: #6c757d;
+        --text-muted: #adb5bd;
+        --border-primary: #dee2e6;
+        --border-secondary: #ced4da;
+        --menu-item-hover-bg: #f8f9fa;
+    }
+}
+
+/* Modal Overlay and Centering - Only when shown */
+.modal.show {
+    display: flex !important;
+    align-items: center;
+    justify-content: center;
+    background-color: rgba(0, 0, 0, 0.6) !important;
+    backdrop-filter: blur(4px);
+}
+
+.modal-dialog {
+    margin: 1.75rem auto !important;
+    width: 80vw;
+    max-width: 500px;
+    min-width: 500px;
+    max-height: 90vh;
+    position: relative;
+    transition: transform 0.3s ease-out;
+}
+
+.modal.show .modal-dialog {
+    transform: none !important;
+}
+
+.modal.fade .modal-dialog {
+    transform: translate(0, -50px);
+}
+
+.modal-content {
+    background-color: var(--bs-body-bg) !important;
+    color: var(--bs-body-color) !important;
+    border: 1px solid var(--bs-border-color) !important;
+    border-radius: 12px;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+    width: 100%;
+    max-height: 90vh;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+}
+
 /* Icon definitions using CSS pseudo-elements */
 .icon-collapse::before {
     content: "⌄";
@@ -2167,8 +2259,30 @@
     text-align: center;
 }
 
-/* Responsive modal */
+/* Responsive modal sizing */
+@media (max-width: 1400px) {
+    .modal-dialog {
+        width: 85vw;
+        max-width: 1000px;
+    }
+}
+
+@media (max-width: 1200px) {
+    .modal-dialog {
+        width: 90vw;
+        max-width: 900px;
+        min-width: 500px;
+    }
+}
+
 @media (max-width: 768px) {
+    .modal-dialog {
+        width: 95vw;
+        max-width: none;
+        min-width: 320px;
+        margin: 1rem auto !important;
+    }
+
     .file-preview-modal .modal-dialog {
         max-width: 95vw;
         width: 95vw;
@@ -2210,6 +2324,14 @@
     }
 }
 
+@media (max-width: 480px) {
+    .modal-dialog {
+        width: 98vw;
+        min-width: 300px;
+        margin: 0.5rem auto !important;
+    }
+}
+
 @media (max-width: 480px) {
     .line-numbers {
         min-width: 40px;
@@ -2265,6 +2387,8 @@
 .modal {
     --bs-modal-bg: var(--bs-body-bg);
     --bs-modal-color: var(--bs-body-color);
+    /* Ensure modal is hidden by default */
+    display: none;
 }
 
 .modal-dialog {

lib/web/ui/static/js/heroprompt.js

@@ -1,5 +1,3 @@
-console.log('Enhanced HeroPrompt UI loaded');
-
 // Global state
 let currentWs = localStorage.getItem('heroprompt-current-ws') || 'default';
 let selected = new Set();
@@ -958,7 +956,8 @@ async function copyPrompt() {
     }
 
     const text = outputEl.textContent;
-    if (!text || text.trim().length === 0 || text.includes('No files selected') || text.includes('Failed')) {
+    console.log('text', text);
+    if (!text || text.trim().length === 0 || text.includes('No files selected') || text.includes('Generated prompt will appear here')) {
         console.warn('No valid content to copy');
         return;
     }
@@ -1329,8 +1328,6 @@ document.addEventListener('DOMContentLoaded', function () {
 
     // Chat functionality
     initChatInterface();
-
-    console.log('Enhanced HeroPrompt UI initialized');
 });
 
 // Chat Interface Implementation

lib/web/ui/templates/heroprompt.html

@@ -161,16 +161,6 @@
                                     <div class="prompt-editor">
                                         <div class="editor-header">
                                             <h6 class="section-title">Prompt Instructions</h6>
-                                            <div class="editor-actions">
-                                                <button id="loadTemplate" class="btn btn-sm btn-ghost"
-                                                    title="Load Template">
-                                                    <i class="icon-template"></i>
-                                                </button>
-                                                <button id="saveTemplate" class="btn btn-sm btn-ghost"
-                                                    title="Save Template">
-                                                    <i class="icon-save"></i>
-                                                </button>
-                                            </div>
                                         </div>
                                         <div class="editor-content">
                                             <textarea id="promptText" class="modern-textarea" rows="8" placeholder="Enter your instructions for what needs to be done with the selected code...
@@ -197,12 +187,6 @@ Example:
                                     <div class="prompt-output">
                                         <div class="output-header">
                                             <span class="panel-title">Generated Prompt</span>
-                                            <div class="output-actions">
-                                                <button id="copyOutput" class="btn btn-xs btn-ghost"
-                                                    title="Copy Output">
-                                                    <i class="icon-copy"></i>
-                                                </button>
-                                            </div>
                                         </div>
                                         <div class="output-content">
                                             <div id="promptOutput" class="prompt-result">