diff --git a/ui/src/pages/Records.jsx b/ui/src/pages/Records.jsx
index d8a96fa..0125018 100644
--- a/ui/src/pages/Records.jsx
+++ b/ui/src/pages/Records.jsx
@@ -32,7 +32,9 @@ export default function Records({ source }) {
   const LIMIT = 100
 
   // Override panel
-  const [selectedRecord, setSelectedRecord] = useState(null)   // full record from API
+  const [panelOpen, setPanelOpen] = useState(false)
+  const [selectedRow, setSelectedRow] = useState(null)          // raw view row (has id)
+  const [selectedRecord, setSelectedRecord] = useState(null)    // full record from API
   const [overrideDraft, setOverrideDraft] = useState({})        // { field: newValue }
   const [panelLoading, setPanelLoading] = useState(false)
   const [panelSaving, setPanelSaving] = useState(false)
@@ -45,6 +47,8 @@ export default function Records({ source }) {
     setFilters([])
     setViewError(null)
     setSelectedRecord(null)
+    setSelectedRow(null)
+    setPanelOpen(false)
     load(0, null, 'asc', [])
   }, [source])
 
@@ -100,12 +104,20 @@ export default function Records({ source }) {
   function next() { const o = offset + LIMIT; setOffset(o); load(o, sort.col, sort.dir, filters) }
 
   async function openPanel(row) {
-    const id = row.id
-    if (!id) return
-    setPanelLoading(true)
-    setPanelMsg(null)
+    // Open panel immediately, then load full record async
+    setPanelOpen(true)
+    setSelectedRow(row)
     setSelectedRecord(null)
     setOverrideDraft({})
+    setPanelMsg(null)
+
+    const id = row.id
+    if (!id) {
+      setPanelMsg({ text: 'No record ID — regenerate the view in Sources.', ok: false })
+      return
+    }
+
+    setPanelLoading(true)
     try {
       const rec = await api.getRecord(id)
       setSelectedRecord(rec)
@@ -118,6 +130,8 @@ export default function Records({ source }) {
   }
 
   function closePanel() {
+    setPanelOpen(false)
+    setSelectedRow(null)
     setSelectedRecord(null)
     setOverrideDraft({})
     setPanelMsg(null)
@@ -267,7 +281,7 @@ export default function Records({ source }) {
                 <tbody>
                   {rows.map((row, i) => {
                     const isOverridden = row._overridden
-                    const isSelected = selectedRecord?.id === row.id
+                    const isSelected = selectedRow?.id != null && selectedRow.id === row.id
                     return (
                       <tr
                         key={i}
@@ -306,7 +320,7 @@ export default function Records({ source }) {
       </div>
 
       {/* Override panel */}
-      {(selectedRecord || panelLoading) && (
+      {panelOpen && (
         <div className="w-80 border-l border-gray-200 bg-white flex flex-col overflow-hidden flex-shrink-0">
           <div className="flex items-center justify-between px-3 py-2 border-b border-gray-100">
             <span className="text-xs font-semibold text-gray-600 uppercase tracking-wide">Override</span>