fix: normalization sending empty content to Genie API and dark mode input styling

Rampim · Rampim · commit 68ea33432725 · 2026-04-08T17:36:58.000-03:00
Send original user query to Genie API instead of normalized form (which can
be empty for non-analytical questions). Normalized text is now only used for
cache key generation. Also add empty-canonical fallback in the normalizer.

Replace browser confirm() on gateway delete with custom Modal matching the
cache-clear dialog style. Add bg-dbx-bg to all input fields missing it so
they render correctly in dark mode.

Co-authored-by: Isaac
diff --git a/backend/app/api/genie_clone_routes.py b/backend/app/api/genie_clone_routes.py
@@ -222,17 +222,20 @@ async def _process_genie_background(
             if msg_id in _synthetic_messages:
                 _synthetic_messages[msg_id].setdefault("_proxy", {})["stage"] = "processing_genie"
 
+        # Genie API always receives the original user question;
+        # normalized form is only used for cache key / embedding.
+        genie_query = original_query_text or query_text
         try:
             if conversation_id and not conversation_id.startswith(CONV_PREFIX):
                 try:
-                    result = await genie_service.send_message(space_id, conversation_id, query_text, rs)
+                    result = await genie_service.send_message(space_id, conversation_id, genie_query, rs)
                 except GenieConfigError:
                     raise
                 except Exception:
                     logger.warning("send_message failed, falling back to start_conversation")
-                    result = await genie_service.start_conversation(space_id, query_text, rs)
+                    result = await genie_service.start_conversation(space_id, genie_query, rs)
             else:
-                result = await genie_service.start_conversation(space_id, query_text, rs)
+                result = await genie_service.start_conversation(space_id, genie_query, rs)
 
 
             if result.get("status") == "COMPLETED":
diff --git a/backend/app/services/question_normalizer.py b/backend/app/services/question_normalizer.py
@@ -122,6 +122,10 @@ async def normalize_question(query_text: str, runtime_settings=None, space_conte
 
         canonical = " | ".join(parts)
 
+        if not canonical:
+            logger.warning("Question normalizer: canonical is empty — falling back to lowercased input")
+            return string_normalized
+
         logger.info(
             "Question normalizer: original=%r... canonical=%r...",
             query_text[:60],
diff --git a/frontend/src/components/gateways/GatewayCreateModal.jsx b/frontend/src/components/gateways/GatewayCreateModal.jsx
@@ -199,7 +199,7 @@ export default function GatewayCreateModal({ open, onClose, onCreated }) {
           placeholder="Enter gateway name"
           value={name}
           onChange={(e) => setName(e.target.value)}
-          className="w-full h-8 px-3 border border-dbx-border-input rounded text-[13px] text-dbx-text placeholder:text-dbx-text-secondary focus:outline-none focus:border-dbx-blue"
+          className="w-full h-8 px-3 border border-dbx-border-input rounded text-[13px] text-dbx-text bg-dbx-bg placeholder:text-dbx-text-secondary focus:outline-none focus:border-dbx-blue"
         />
       </div>
 
@@ -216,7 +216,7 @@ export default function GatewayCreateModal({ open, onClose, onCreated }) {
               placeholder="Enter Genie Space ID"
               value={manualSpaceId}
               onChange={(e) => setManualSpaceId(e.target.value)}
-              className="w-full h-8 px-3 border border-dbx-border-input rounded text-[13px] text-dbx-text placeholder:text-dbx-text-secondary focus:outline-none focus:border-dbx-blue font-mono"
+              className="w-full h-8 px-3 border border-dbx-border-input rounded text-[13px] text-dbx-text bg-dbx-bg placeholder:text-dbx-text-secondary focus:outline-none focus:border-dbx-blue font-mono"
             />
             <button
               onClick={() => { setShowManualSpace(false); setManualSpaceId('') }}
@@ -235,7 +235,7 @@ export default function GatewayCreateModal({ open, onClose, onCreated }) {
                   placeholder="Search by name"
                   value={spaceSearch}
                   onChange={(e) => setSpaceSearch(e.target.value)}
-                  className="w-full h-8 pl-8 pr-3 border border-dbx-border-input rounded text-[13px] text-dbx-text placeholder:text-dbx-text-secondary focus:outline-none focus:border-dbx-blue"
+                  className="w-full h-8 pl-8 pr-3 border border-dbx-border-input rounded text-[13px] text-dbx-text bg-dbx-bg placeholder:text-dbx-text-secondary focus:outline-none focus:border-dbx-blue"
                 />
               </div>
             )}
diff --git a/frontend/src/components/gateways/GatewayDetailPage.jsx b/frontend/src/components/gateways/GatewayDetailPage.jsx
@@ -1,7 +1,8 @@
 import { useState, useEffect } from 'react'
 import { useParams, useNavigate, Link } from 'react-router-dom'
-import { Trash2, Play, Copy, Loader2 } from 'lucide-react'
+import { Trash2, Play, Copy, Loader2, AlertTriangle } from 'lucide-react'
 import { api } from '../../services/api'
+import Modal from '../shared/Modal'
 import GatewayOverviewTab from './GatewayOverviewTab'
 import GatewayMetricsTab from './GatewayMetricsTab'
 import GatewayCacheTab from './GatewayCacheTab'
@@ -24,6 +25,7 @@ export default function GatewayDetailPage() {
   const [error, setError] = useState(null)
   const [activeTab, setActiveTab] = useState('overview')
   const [deleting, setDeleting] = useState(false)
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)
 
   const fetchGateway = async () => {
     try {
@@ -43,10 +45,10 @@ export default function GatewayDetailPage() {
   }, [id])
 
   const handleDelete = async () => {
-    if (!confirm(`Delete gateway "${gateway?.name || id}"? This action cannot be undone.`)) return
     try {
       setDeleting(true)
       await api.deleteGateway(id)
+      setShowDeleteConfirm(false)
       navigate('/')
     } catch (err) {
       alert('Failed to delete gateway: ' + (err.response?.data?.detail || err.message))
@@ -126,7 +128,7 @@ export default function GatewayDetailPage() {
               Test in Playground
             </button>
             <button
-              onClick={handleDelete}
+              onClick={() => setShowDeleteConfirm(true)}
               disabled={deleting}
               className="inline-flex items-center gap-1.5 h-8 px-3 text-[13px] font-medium text-dbx-text border border-dbx-border-input rounded hover:bg-dbx-neutral-hover transition-colors disabled:opacity-50"
             >
@@ -202,6 +204,35 @@ export default function GatewayDetailPage() {
           />
         </div>
       </div>
+      {/* Delete confirmation modal */}
+      <Modal isOpen={showDeleteConfirm} onClose={() => setShowDeleteConfirm(false)} title="Delete Gateway" maxWidth="max-w-md">
+        <div className="flex flex-col items-center text-center pt-2">
+          <div className="w-12 h-12 rounded-full bg-dbx-status-red-bg flex items-center justify-center mb-4">
+            <AlertTriangle size={24} className="text-dbx-text-danger" />
+          </div>
+          <p className="text-[14px] text-dbx-text mb-1">
+            Are you sure you want to delete this gateway?
+          </p>
+          <p className="text-[13px] text-dbx-text-secondary mb-6">
+            <span className="font-medium text-dbx-text">{gateway?.name}</span> will be permanently deleted. This action cannot be undone.
+          </p>
+          <div className="flex gap-3 w-full">
+            <button
+              onClick={() => setShowDeleteConfirm(false)}
+              className="flex-1 h-8 text-[13px] font-medium text-dbx-text border border-dbx-border-input rounded hover:bg-dbx-neutral-hover transition-colors"
+            >
+              Cancel
+            </button>
+            <button
+              onClick={handleDelete}
+              disabled={deleting}
+              className="flex-1 h-8 text-[13px] font-medium text-white bg-[#D32F2F] rounded hover:bg-[#B71C1C] transition-colors disabled:opacity-50"
+            >
+              {deleting ? 'Deleting...' : 'Delete'}
+            </button>
+          </div>
+        </div>
+      </Modal>
     </div>
   )
 }
diff --git a/frontend/src/components/gateways/GatewaySettingsTab.jsx b/frontend/src/components/gateways/GatewaySettingsTab.jsx
@@ -151,7 +151,7 @@ export default function GatewaySettingsTab({ gateway, onUpdate }) {
     }
   }
 
-  const inputClass = 'h-8 w-full border border-dbx-border-input rounded px-3 text-[13px] text-dbx-text outline-none focus:border-dbx-blue transition-colors'
+  const inputClass = 'h-8 w-full border border-dbx-border-input rounded px-3 text-[13px] text-dbx-text bg-dbx-bg outline-none focus:border-dbx-blue transition-colors'
 
   return (
     <div className="max-w-xl space-y-6">
@@ -172,7 +172,7 @@ export default function GatewaySettingsTab({ gateway, onUpdate }) {
             <div className="flex gap-2">
               <input type="number" min="0" value={form.cache_ttl_value}
                 onChange={(e) => handleChange('cache_ttl_value', e.target.value)}
-                className="h-8 flex-1 border border-dbx-border-input rounded px-3 text-[13px] text-dbx-text outline-none focus:border-dbx-blue transition-colors" />
+                className="h-8 flex-1 border border-dbx-border-input rounded px-3 text-[13px] text-dbx-text bg-dbx-bg outline-none focus:border-dbx-blue transition-colors" />
               <select value={form.cache_ttl_unit} onChange={(e) => handleChange('cache_ttl_unit', e.target.value)}
                 className="h-8 border border-dbx-border-input rounded px-3 text-[13px] text-dbx-text outline-none focus:border-dbx-blue transition-colors bg-dbx-bg">
                 <option value="minutes">Minutes</option>
diff --git a/frontend/src/components/settings/SettingsPage.jsx b/frontend/src/components/settings/SettingsPage.jsx
@@ -56,7 +56,7 @@ function EditableText({ value, onChange, placeholder, masked }) {
         <input ref={inputRef} type={masked ? 'password' : 'text'} value={draft}
           onChange={(e) => setDraft(e.target.value)} onKeyDown={handleKey}
           placeholder={placeholder}
-          className="h-8 border border-dbx-blue rounded px-3 text-[13px] text-dbx-text outline-none"
+          className="h-8 border border-dbx-blue rounded px-3 text-[13px] text-dbx-text bg-dbx-bg outline-none"
           style={{ width: '220px' }} />
         <button onClick={save}
           className="h-8 px-3 text-[13px] text-white bg-dbx-blue rounded hover:bg-dbx-blue-dark transition-colors">Save</button>
@@ -264,7 +264,7 @@ export default function SettingsPage() {
     sectionRefs.current[id]?.scrollIntoView({ behavior: 'smooth', block: 'start' })
   }
 
-  const inputClass = 'h-8 border border-dbx-border-input rounded px-3 text-[13px] text-dbx-text outline-none focus:border-dbx-blue transition-colors'
+  const inputClass = 'h-8 border border-dbx-border-input rounded px-3 text-[13px] text-dbx-text bg-dbx-bg outline-none focus:border-dbx-blue transition-colors'
 
   if (loading) {
     return (
