fix(explorer): resolve notion sync, add debug logging, and fix UI display for industries v0.6.1

MIGRATION_PLAN.md

@@ -88,6 +88,12 @@ Wir kapseln das neue Projekt vollständig ab ("Fork & Clean").
 *   `description` (Text - Abgrenzung/Definition)
 *   `is_focus` (Boolean)
 *   `primary_category_id` (FK -> robotics_categories.id)
+*   `metric_type` (String: `Unit_Count`, `Area_in`, `Area_out` - Art der Metrik zur Größenbestimmung)
+*   `min_requirement` (Float, nullable - Minimaler Schwellenwert für Signal-Relevanz)
+*   `whale_threshold` (Float, nullable - Schwellenwert, ab dem ein Account als "Whale" gilt)
+*   `proxy_factor` (Float, nullable - Multiplikator für die Standardisierungslogik)
+*   `scraper_keywords` (JSON-Array von Strings - Keywords für den Scraper zur Metrik-Erkennung)
+*   `standardization_logic` (String - Formel zur Standardisierung der Metrik, z.B. "wert * 25m²")
 
 ### Tabelle `job_role_mappings` (Rollen-Logik)
 *   `id` (PK)
@@ -152,7 +158,7 @@ Contacts stehen in 1:n Beziehung zu Accounts. Accounts können einen "Primary Co
 
 ## 7. Historie & Fixes (Jan 2026)
 
-*   **[UPGRADE] v0.6.0: Notion Single Source of Truth (Jan 19, 2026)**
+*   **[UPGRADE] v0.6.1: Notion Single Source of Truth (Jan 20, 2026)**
     *   **Notion SSoT:** Umstellung der Branchenverwaltung (`Industries`) und Robotik-Kategorien auf Notion. Lokale Änderungen im Web-Interface sind für synchronisierte Felder deaktiviert, um die Datenintegrität zu wahren.
     *   **Dynamische Klassifizierung:** Der `ClassificationService` lädt die `allowed_industries` nun direkt aus der Datenbank, die wiederum via Sync-Skript aus Notion befüllt wird.
     *   **Erweiterte Datenmodelle:** Die Datenbank wurde um Felder wie `whale_threshold`, `min_requirement`, `scraper_keywords` und `industry_group` erweitert.

company-explorer/backend/config.py

@@ -10,7 +10,7 @@ try:
     class Settings(BaseSettings):
         # App Info
         APP_NAME: str = "Company Explorer"
-        VERSION: str = "0.4.0"
+        VERSION: str = "0.6.1"
         DEBUG: bool = True
         
         # Database (Store in App dir for simplicity)

company-explorer/backend/database.py

@@ -87,18 +87,20 @@ class Industry(Base):
     notion_id = Column(String, unique=True, index=True, nullable=True) # Notion Page ID
     
     name = Column(String, unique=True, index=True)
-    description = Column(Text, nullable=True) # Abgrenzung
+    description = Column(Text, nullable=True) # Definition aus Notion
     
-    # Notion Sync Fields
+    # Notion Sync Fields (V3.0+)
-    industry_group = Column(String, nullable=True)
     status_notion = Column(String, nullable=True) # e.g. "P1 Focus Industry"
     is_focus = Column(Boolean, default=False) # Derived from status_notion
     
-    whale_threshold = Column(Float, nullable=True)
+    # NEW SCHEMA FIELDS (from MIGRATION_PLAN)
+    metric_type = Column(String, nullable=True) # Unit_Count, Area_in, Area_out
     min_requirement = Column(Float, nullable=True)
-    scraper_keywords = Column(Text, nullable=True)
+    whale_threshold = Column(Float, nullable=True)
-    core_unit = Column(String, nullable=True)
+    proxy_factor = Column(Float, nullable=True)
-    proxy_factor = Column(String, nullable=True)
+    scraper_search_term = Column(Text, nullable=True)
+    scraper_keywords = Column(Text, nullable=True) # JSON-Array von Strings
+    standardization_logic = Column(Text, nullable=True) # Formel, z.B. "wert * 25m²"
     
     # Optional link to a Robotics Category (the "product" relevant for this industry)
     primary_category_id = Column(Integer, ForeignKey("robotics_categories.id"), nullable=True)

company-explorer/backend/scripts/sync_notion_industries.py

@@ -11,7 +11,7 @@ from backend.database import SessionLocal, Industry, RoboticsCategory, init_db
 from backend.config import settings
 
 # Setup Logging
-logging.basicConfig(level=logging.INFO, format='%(asctime)s - %(levelname)s - %(message)s')
+logging.basicConfig(level=logging.DEBUG, format='%(asctime)s - %(levelname)s - %(message)s')
 logger = logging.getLogger(__name__)
 
 NOTION_TOKEN_FILE = "/app/notion_token.txt"
@@ -71,6 +71,9 @@ def extract_number(prop):
 
 def sync_categories(token, session):
     logger.info("Syncing Robotics Categories...")
+    # session.query(RoboticsCategory).delete() # DANGEROUS - Reverted to Upsert
+    # session.commit()
+
     pages = query_notion_db(token, CATEGORIES_DB_ID)
     
     count = 0
@@ -98,16 +101,19 @@ def sync_categories(token, session):
         
         cat.name = name
         cat.description = description
-        # cat.reasoning_guide = ... ? Maybe 'Constrains'?
         cat.reasoning_guide = extract_rich_text(props.get("Constrains"))
         
         count += 1
     
     session.commit()
-    logger.info(f"Synced {count} categories.")
+    logger.info(f"Synced (Upsert) {count} categories.")
 
 def sync_industries(token, session):
     logger.info("Syncing Industries...")
+    logger.warning("DELETING all existing industries before sync...")
+    session.query(Industry).delete()
+    session.commit()
+
     pages = query_notion_db(token, INDUSTRIES_DB_ID)
     
     count = 0
@@ -115,21 +121,17 @@ def sync_industries(token, session):
         props = page.get("properties", {})
         
         notion_id = page["id"]
-        name = extract_title(props.get("Industry"))
+        # In Notion, the column is now 'Vertical' not 'Industry'
+        name = extract_title(props.get("Vertical"))
         if not name: continue
         
-        # Upsert Logic: Check ID -> Check Name -> Create
+        # Removed full Notion props debug log - no longer needed
-        industry = session.query(Industry).filter(Industry.notion_id == notion_id).first()
+        
-        if not industry:
+        # Logic is now INSERT only
-            industry = session.query(Industry).filter(Industry.name == name).first()
-            if industry:
-                logger.info(f"Linked existing industry '{name}' to Notion ID {notion_id}")
-                industry.notion_id = notion_id
-            else:
         industry = Industry(notion_id=notion_id, name=name)
         session.add(industry)
             
-        # Map Fields
+        # Map Fields from Notion Schema
         industry.name = name
         industry.description = extract_rich_text(props.get("Definition"))
         
@@ -137,18 +139,19 @@ def sync_industries(token, session):
         industry.status_notion = status
         industry.is_focus = (status == "P1 Focus Industry")
         
-        industry.industry_group = extract_rich_text(props.get("Industry-Group"))
+        # New Schema Fields
-        industry.whale_threshold = extract_number(props.get("Whale Threshold"))
+        industry.metric_type = extract_select(props.get("Metric Type"))
         industry.min_requirement = extract_number(props.get("Min. Requirement"))
+        industry.whale_threshold = extract_number(props.get("Whale Threshold"))
+        industry.proxy_factor = extract_number(props.get("Proxy Factor"))
+        industry.scraper_search_term = extract_select(props.get("Scraper Search Term")) # <-- FIXED HERE
         industry.scraper_keywords = extract_rich_text(props.get("Scraper Keywords"))
-        industry.core_unit = extract_select(props.get("Core Unit"))
+        industry.standardization_logic = extract_rich_text(props.get("Stanardization Logic"))
-        industry.proxy_factor = extract_rich_text(props.get("Proxy Factor"))
 
         # Relation: Primary Product Category
         relation = props.get("Primary Product Category", {}).get("relation", [])
         if relation:
             related_id = relation[0]["id"]
-            # Find Category by notion_id
             cat = session.query(RoboticsCategory).filter(RoboticsCategory.notion_id == related_id).first()
             if cat:
                 industry.primary_category_id = cat.id

company-explorer/frontend/src/App.tsx

@@ -80,7 +80,7 @@ function App() {
             </div>
             <div>
               <h1 className="text-xl font-bold text-slate-900 dark:text-white tracking-tight">Company Explorer</h1>
-              <p className="text-xs text-blue-600 dark:text-blue-400 font-medium">ROBOTICS EDITION <span className="text-slate-500 dark:text-slate-600 ml-2">v0.5.0</span></p>
+              <p className="text-xs text-blue-600 dark:text-blue-400 font-medium">ROBOTICS EDITION <span className="text-slate-500 dark:text-slate-600 ml-2">v0.6.1</span></p>
             </div>
           </div>
 

company-explorer/frontend/src/components/RoboticsSettings.tsx

@@ -10,49 +10,81 @@ interface RoboticsSettingsProps {
 }
 
 export function RoboticsSettings({ isOpen, onClose, apiBase }: RoboticsSettingsProps) {
-  const [activeTab, setActiveTab] = useState<'robotics' | 'industries' | 'roles'>('robotics')
+  const [activeTab, setActiveTab] = useState<'robotics' | 'industries' | 'roles'>(
+    localStorage.getItem('roboticsSettingsActiveTab') as 'robotics' | 'industries' | 'roles' || 'robotics'
+  )
   
-  // Data States
   const [roboticsCategories, setRoboticsCategories] = useState<any[]>([])
   const [industries, setIndustries] = useState<any[]>([])
   const [jobRoles, setJobRoles] = useState<any[]>([])
+  const [isLoading, setIsLoading] = useState(false);
 
-  const fetchRobotics = async () => {
+  const fetchAllData = async () => {
-    try { const res = await axios.get(`${apiBase}/robotics/categories`); setRoboticsCategories(res.data) } catch (e) { console.error(e) }
+    setIsLoading(true);
-  }
+    try {
-  
+      const [resRobotics, resIndustries, resJobRoles] = await Promise.all([
-  const fetchIndustries = async () => {
+        axios.get(`${apiBase}/robotics/categories`),
-    try { const res = await axios.get(`${apiBase}/industries`); setIndustries(res.data) } catch (e) { console.error(e) }
+        axios.get(`${apiBase}/industries`),
-  }
+        axios.get(`${apiBase}/job_roles`),
-
+      ]);
-  const fetchJobRoles = async () => {
+      setRoboticsCategories(resRobotics.data);
-    try { const res = await axios.get(`${apiBase}/job_roles`); setJobRoles(res.data) } catch (e) { console.error(e) }
+      setIndustries(resIndustries.data);
+      setJobRoles(resJobRoles.data);
+    } catch (e) {
+      console.error("Failed to fetch settings data:", e);
+      alert("Fehler beim Laden der Settings. Siehe Konsole.");
+    } finally {
+      setIsLoading(false);
     }
+  };
 
   useEffect(() => {
     if (isOpen) {
-        fetchRobotics()
+      fetchAllData();
-        fetchIndustries()
-        fetchJobRoles()
     }
-  }, [isOpen])
+  }, [isOpen]);
+
+  useEffect(() => {
+    localStorage.setItem('roboticsSettingsActiveTab', activeTab);
+  }, [activeTab]);
+
 
-  // Robotics Handlers
   const handleUpdateRobotics = async (id: number, description: string, reasoning: string) => {
+      setIsLoading(true);
       try {
-          await axios.put(`${apiBase}/robotics/categories/${id}`, { description, reasoning_guide: reasoning })
+          await axios.put(`${apiBase}/robotics/categories/${id}`, { description, reasoning_guide: reasoning });
-          fetchRobotics()
+          fetchAllData();
-      } catch (e) { alert("Update failed") }
+      } catch (e) { 
+          alert("Update failed");
+          console.error(e);
+      } finally {
+          setIsLoading(false);
+      }
   }
 
-  // Industry Handlers Removed (Notion SSoT)
-
-  // Job Role Handlers
   const handleAddJobRole = async () => {
-      try { await axios.post(`${apiBase}/job_roles`, { pattern: "New Pattern", role: "Operativer Entscheider" }); fetchJobRoles() } catch (e) { alert("Failed") }
+      setIsLoading(true);
+      try { 
+          await axios.post(`${apiBase}/job_roles`, { pattern: "New Pattern", role: "Operativer Entscheider" }); 
+          fetchAllData();
+      } catch (e) { 
+          alert("Failed to add job role");
+          console.error(e);
+      } finally {
+          setIsLoading(false);
+      }
   }
   const handleDeleteJobRole = async (id: number) => {
-      try { await axios.delete(`${apiBase}/job_roles/${id}`); fetchJobRoles() } catch (e) { alert("Failed") }
+      setIsLoading(true);
+      try { 
+          await axios.delete(`${apiBase}/job_roles/${id}`); 
+          fetchAllData();
+      } catch (e) { 
+          alert("Failed to delete job role");
+          console.error(e);
+      } finally {
+          setIsLoading(false);
+      }
   }
 
   if (!isOpen) return null
@@ -96,42 +128,29 @@ export function RoboticsSettings({ isOpen, onClose, apiBase }: RoboticsSettingsP
         {/* Content */}
         <div className="flex-1 overflow-y-auto p-6 space-y-6 bg-white dark:bg-slate-900">
           
-          {/* ROBOTICS TAB */}
+          {isLoading && <div className="text-center py-12 text-slate-500">Loading...</div>}
-          {activeTab === 'robotics' && (
+
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+          {!isLoading && activeTab === 'robotics' && (
-                {roboticsCategories.map(cat => (
+              <div key="robotics-content" className="grid grid-cols-1 md:grid-cols-2 gap-6">
-                    <CategoryCard key={cat.id} category={cat} onSave={handleUpdateRobotics} />
+                {roboticsCategories.map(cat => ( <CategoryCard key={cat.id} category={cat} onSave={handleUpdateRobotics} /> ))}
-                ))}
               </div>
           )}
 
-          {/* INDUSTRIES TAB */}
+          {!isLoading && activeTab === 'industries' && (
-          {activeTab === 'industries' && (
+              <div key="industries-content" className="space-y-4">
-              <div className="space-y-4">
                   <div className="flex justify-between items-center">
                       <h3 className="text-sm font-bold text-slate-700 dark:text-slate-300">Industry Verticals (Synced from Notion)</h3>
-                      {/* Notion SSoT: Creation disabled here 
-                      <button onClick={handleAddIndustry} className="flex items-center gap-1 px-3 py-1.5 bg-blue-600 hover:bg-blue-500 text-white text-xs font-bold rounded">
-                          <Plus className="h-3 w-3" /> ADD NEW
-                      </button>
-                      */}
                   </div>
                   <div className="grid grid-cols-1 gap-3">
                       {industries.map(ind => (
                           <div key={ind.id} className="bg-slate-50 dark:bg-slate-950 border border-slate-200 dark:border-slate-800 rounded-lg p-4 flex flex-col gap-3 group relative overflow-hidden">
-                              {/* Sync Indicator */}
                               {ind.notion_id && (
-                                  <div className="absolute top-0 right-0 bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 text-[9px] font-bold px-2 py-0.5 rounded-bl">
+                                  <div className="absolute top-0 right-0 bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 text-[9px] font-bold px-2 py-0.5 rounded-bl">SYNCED</div>
-                                      SYNCED
-                                  </div>
                               )}
-                              
-                              {/* Top Row: Name, Status, Group */}
                               <div className="flex gap-4 items-start pr-12">
                                   <div className="flex-1">
                                       <h4 className="font-bold text-slate-900 dark:text-white text-sm">{ind.name}</h4>
                                       <div className="flex flex-wrap gap-2 mt-1">
-                                          {ind.industry_group && <span className="text-[10px] bg-slate-200 dark:bg-slate-800 px-1.5 rounded text-slate-600 dark:text-slate-400">{ind.industry_group}</span>}
                                           {ind.status_notion && <span className="text-[10px] border border-slate-300 dark:border-slate-700 px-1.5 rounded text-slate-500">{ind.status_notion}</span>}
                                       </div>
                                   </div>
@@ -142,94 +161,36 @@ export function RoboticsSettings({ isOpen, onClose, apiBase }: RoboticsSettingsP
                                       </div>
                                   </div>
                               </div>
-
-                              {/* Description */}
                               <p className="text-xs text-slate-600 dark:text-slate-300 italic whitespace-pre-wrap">{ind.description || "No definition"}</p>
-
-                              {/* Metrics Grid */}
                               <div className="grid grid-cols-2 sm:grid-cols-4 gap-2 text-[10px] bg-white dark:bg-slate-900 p-2 rounded border border-slate-200 dark:border-slate-800">
-                                  <div>
+                                  <div><span className="block text-slate-400 font-bold uppercase">Whale &gt;</span><span className="text-slate-700 dark:text-slate-200">{ind.whale_threshold || "-"}</span></div>
-                                      <span className="block text-slate-400 font-bold uppercase">Whale &gt;</span>
+                                  <div><span className="block text-slate-400 font-bold uppercase">Min Req</span><span className="text-slate-700 dark:text-slate-200">{ind.min_requirement || "-"}</span></div>
-                                      <span className="text-slate-700 dark:text-slate-200">{ind.whale_threshold || "-"}</span>
+                                  <div><span className="block text-slate-400 font-bold uppercase">Unit</span><span className="text-slate-700 dark:text-slate-200 truncate">{ind.scraper_search_term || "-"}</span></div>
+                                  <div><span className="block text-slate-400 font-bold uppercase">Product</span><span className="text-slate-700 dark:text-slate-200 truncate">{roboticsCategories.find(c => c.id === ind.primary_category_id)?.name || "-"}</span></div>
                               </div>
-                                  <div>
+                              {ind.scraper_keywords && <div className="text-[10px]"><span className="text-slate-400 font-bold uppercase mr-2">Keywords:</span><span className="text-slate-600 dark:text-slate-400 font-mono">{ind.scraper_keywords}</span></div>}
-                                      <span className="block text-slate-400 font-bold uppercase">Min Req</span>
+                              {ind.standardization_logic && <div className="text-[10px]"><span className="text-slate-400 font-bold uppercase mr-2">Standardization:</span><span className="text-slate-600 dark:text-slate-400 font-mono">{ind.standardization_logic}</span></div>}
-                                      <span className="text-slate-700 dark:text-slate-200">{ind.min_requirement || "-"}</span>
-                                  </div>
-                                  <div>
-                                      <span className="block text-slate-400 font-bold uppercase">Unit</span>
-                                      <span className="text-slate-700 dark:text-slate-200 truncate">{ind.core_unit || "-"}</span>
-                                  </div>
-                                  <div>
-                                      <span className="block text-slate-400 font-bold uppercase">Product</span>
-                                      <span className="text-slate-700 dark:text-slate-200 truncate">
-                                          {roboticsCategories.find(c => c.id === ind.primary_category_id)?.name || "-"}
-                                      </span>
-                                  </div>
-                              </div>
-                              
-                              {/* Keywords */}
-                              {ind.scraper_keywords && (
-                                  <div className="text-[10px]">
-                                      <span className="text-slate-400 font-bold uppercase mr-2">Keywords:</span>
-                                      <span className="text-slate-600 dark:text-slate-400 font-mono">{ind.scraper_keywords}</span>
-                                  </div>
-                              )}
                           </div>
                       ))}
                   </div>
               </div>
           )}
 
-          {/* JOB ROLES TAB */}
+          {!isLoading && activeTab === 'roles' && (
-          {activeTab === 'roles' && (
+              <div key="roles-content" className="space-y-4">
-              <div className="space-y-4">
+                  <div className="flex justify-between items-center"><h3 className="text-sm font-bold text-slate-700 dark:text-slate-300">Job Title Mapping Patterns</h3><button onClick={handleAddJobRole} className="flex items-center gap-1 px-3 py-1.5 bg-blue-600 hover:bg-blue-500 text-white text-xs font-bold rounded"><Plus className="h-3 w-3" /> ADD PATTERN</button></div>
-                  <div className="flex justify-between items-center">
-                      <h3 className="text-sm font-bold text-slate-700 dark:text-slate-300">Job Title Mapping Patterns</h3>
-                      <button onClick={handleAddJobRole} className="flex items-center gap-1 px-3 py-1.5 bg-blue-600 hover:bg-blue-500 text-white text-xs font-bold rounded">
-                          <Plus className="h-3 w-3" /> ADD PATTERN
-                      </button>
-                  </div>
                   <div className="bg-slate-50 dark:bg-slate-950 border border-slate-200 dark:border-slate-800 rounded-lg overflow-hidden">
                       <table className="w-full text-left text-xs">
-                          <thead className="bg-slate-100 dark:bg-slate-900 border-b border-slate-200 dark:border-slate-800 text-slate-500 font-bold uppercase">
+                          <thead className="bg-slate-100 dark:bg-slate-900 border-b border-slate-200 dark:border-slate-800 text-slate-500 font-bold uppercase"><tr><th className="p-3">Job Title Pattern (Regex/Text)</th><th className="p-3">Mapped Role</th><th className="p-3 w-10"></th></tr></thead>
-                              <tr>
-                                  <th className="p-3">Job Title Pattern (Regex/Text)</th>
-                                  <th className="p-3">Mapped Role</th>
-                                  <th className="p-3 w-10"></th>
-                              </tr>
-                          </thead>
                           <tbody className="divide-y divide-slate-200 dark:divide-slate-800">
                               {jobRoles.map(role => (
                                   <tr key={role.id} className="group">
-                                      <td className="p-2">
+                                      <td className="p-2"><input className="w-full bg-transparent border border-transparent hover:border-slate-300 dark:hover:border-slate-700 rounded px-2 py-1 text-slate-900 dark:text-slate-200 outline-none focus:border-blue-500" defaultValue={role.pattern} /></td>
-                                          <input 
+                                      <td className="p-2"><select className="w-full bg-transparent border border-transparent hover:border-slate-300 dark:hover:border-slate-700 rounded px-2 py-1 text-slate-900 dark:text-slate-200 outline-none focus:border-blue-500" defaultValue={role.role}><option>Operativer Entscheider</option><option>Infrastruktur-Verantwortlicher</option><option>Wirtschaftlicher Entscheider</option><option>Innovations-Treiber</option></select></td>
-                                            className="w-full bg-transparent border border-transparent hover:border-slate-300 dark:hover:border-slate-700 rounded px-2 py-1 text-slate-900 dark:text-slate-200 outline-none focus:border-blue-500"
+                                      <td className="p-2 text-center"><button onClick={() => handleDeleteJobRole(role.id)} className="text-slate-400 hover:text-red-500 opacity-0 group-hover:opacity-100 transition-opacity"><Trash2 className="h-4 w-4" /></button></td>
-                                            defaultValue={role.pattern}
-                                            // Real-time update would require more state management or blur
-                                          />
-                                      </td>
-                                      <td className="p-2">
-                                          <select 
-                                            className="w-full bg-transparent border border-transparent hover:border-slate-300 dark:hover:border-slate-700 rounded px-2 py-1 text-slate-900 dark:text-slate-200 outline-none focus:border-blue-500"
-                                            defaultValue={role.role}
-                                          >
-                                              <option>Operativer Entscheider</option>
-                                              <option>Infrastruktur-Verantwortlicher</option>
-                                              <option>Wirtschaftlicher Entscheider</option>
-                                              <option>Innovations-Treiber</option>
-                                          </select>
-                                      </td>
-                                      <td className="p-2 text-center">
-                                          <button onClick={() => handleDeleteJobRole(role.id)} className="text-slate-400 hover:text-red-500 opacity-0 group-hover:opacity-100 transition-opacity">
-                                              <Trash2 className="h-4 w-4" />
-                                          </button>
-                                      </td>
                                   </tr>
                               ))}
-                              {jobRoles.length === 0 && (
+                              {jobRoles.length === 0 && (<tr><td colSpan={3} className="p-8 text-center text-slate-500 italic">No patterns defined yet.</td></tr>)}
-                                  <tr><td colSpan={3} className="p-8 text-center text-slate-500 italic">No patterns defined yet.</td></tr>
-                              )}
                           </tbody>
                       </table>
                   </div>
@@ -246,45 +207,17 @@ function CategoryCard({ category, onSave }: { category: any, onSave: any }) {
     const [guide, setGuide] = useState(category.reasoning_guide)
     const [isDirty, setIsDirty] = useState(false)
 
-    useEffect(() => {
+    useEffect(() => { setIsDirty(desc !== category.description || guide !== category.reasoning_guide) }, [desc, guide])
-        setIsDirty(desc !== category.description || guide !== category.reasoning_guide)
-    }, [desc, guide])
 
     return (
         <div className="bg-slate-50 dark:bg-slate-950/50 border border-slate-200 dark:border-slate-800 rounded-xl p-4 flex flex-col gap-3">
             <div className="flex items-center gap-2">
-                <div className="p-1.5 bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 rounded">
+                <div className="p-1.5 bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 rounded"><Tag className="h-4 w-4" /></div>
-                    <Tag className="h-4 w-4" />
-                </div>
                 <span className="font-bold text-slate-900 dark:text-white uppercase tracking-tight text-sm">{category.name}</span>
             </div>
-
+            <div className="space-y-1"><label className="text-[10px] uppercase font-bold text-slate-500">Definition for LLM</label><textarea className="w-full bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded p-2 text-xs text-slate-800 dark:text-slate-200 focus:ring-1 focus:ring-blue-500 outline-none h-20" value={desc} onChange={e => setDesc(e.target.value)} /></div>
-            <div className="space-y-1">
+            <div className="space-y-1"><label className="text-[10px] uppercase font-bold text-slate-500">Reasoning Guide (Scoring)</label><textarea className="w-full bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded p-2 text-xs text-slate-800 dark:text-slate-200 focus:ring-1 focus:ring-blue-500 outline-none h-20" value={guide} onChange={e => setGuide(e.target.value)} /></div>
-                <label className="text-[10px] uppercase font-bold text-slate-500">Definition for LLM</label>
+            {isDirty && (<button onClick={() => onSave(category.id, desc, guide)} className="mt-2 bg-blue-600 hover:bg-blue-500 text-white text-[10px] font-bold py-1.5 rounded transition-all animate-in fade-in flex items-center justify-center gap-1"><Save className="h-3 w-3" /> SAVE CHANGES</button>)}
-                <textarea 
-                    className="w-full bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded p-2 text-xs text-slate-800 dark:text-slate-200 focus:ring-1 focus:ring-blue-500 outline-none h-20"
-                    value={desc}
-                    onChange={e => setDesc(e.target.value)}
-                />
-            </div>
-
-            <div className="space-y-1">
-                <label className="text-[10px] uppercase font-bold text-slate-500">Reasoning Guide (Scoring)</label>
-                <textarea 
-                    className="w-full bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded p-2 text-xs text-slate-800 dark:text-slate-200 focus:ring-1 focus:ring-blue-500 outline-none h-20"
-                    value={guide}
-                    onChange={e => setGuide(e.target.value)}
-                />
-            </div>
-
-            {isDirty && (
-                <button 
-                    onClick={() => onSave(category.id, desc, guide)}
-                    className="mt-2 bg-blue-600 hover:bg-blue-500 text-white text-[10px] font-bold py-1.5 rounded transition-all animate-in fade-in flex items-center justify-center gap-1"
-                >
-                    <Save className="h-3 w-3" /> SAVE CHANGES
-                </button>
-            )}
         </div>
     )
 }