Update components/PropertiesPanel.tsx

components/PropertiesPanel.tsx

@@ -1,31 +1,92 @@
 
+
 import React from 'react';
 import { Node } from 'reactflow';
-import { NodeData, LayerDefinition } from '../types';
+import { NodeData, LayerDefinition, LogEntry } from '../types';
 import { LAYER_DEFINITIONS } from '../constants';
-import { X, Trash2 } from 'lucide-react';
+import { X, Trash2, Activity, Info, CheckCircle, AlertTriangle, AlertOctagon } from 'lucide-react';
 
 interface PropertiesPanelProps {
   selectedNode: Node<NodeData> | null;
   onChange: (id: string, newData: Partial<NodeData>) => void;
   onDelete: (id: string) => void;
   onClose: () => void;
+  logs?: LogEntry[];
 }
 
-const PropertiesPanel: React.FC<PropertiesPanelProps> = ({ selectedNode, onChange, onDelete, onClose }) => {
+const PropertiesPanel: React.FC<PropertiesPanelProps> = ({ selectedNode, onChange, onDelete, onClose, logs = [] }) => {
   if (!selectedNode) {
     return (
-      <div className="w-80 bg-slate-900 border-l border-slate-800 p-6 flex flex-col items-center justify-center text-slate-500 h-full">
-        <div className="w-16 h-16 rounded-full bg-slate-800 mb-4 flex items-center justify-center">
-          <span className="text-2xl opacity-50">⚡</span>
+      <div className="w-80 bg-slate-900 border-l border-slate-800 flex flex-col h-full">
+        <div className="p-4 border-b border-slate-800 flex items-center gap-2">
+            <Activity size={18} className="text-blue-400"/>
+            <h2 className="text-sm font-bold text-slate-200 uppercase tracking-wider">System Activity</h2>
+        </div>
+        
+        <div className="flex-1 overflow-y-auto p-4 space-y-3 scrollbar-thin scrollbar-thumb-slate-700">
+            {logs.length === 0 ? (
+                 <div className="flex flex-col items-center justify-center text-slate-500 h-64">
+                    <div className="w-12 h-12 rounded-full bg-slate-800 mb-3 flex items-center justify-center">
+                        <Activity size={24} className="opacity-20"/>
+                    </div>
+                    <p className="text-xs text-center">No activity recorded yet.</p>
+                </div>
+            ) : (
+                logs.map(log => (
+                    <div key={log.id} className="bg-slate-800/50 rounded border border-slate-800 p-3 animate-in fade-in slide-in-from-top-1 duration-300">
+                        <div className="flex justify-between items-start mb-1">
+                            <div className="flex items-center gap-2">
+                                {log.type === 'info' && <Info size={12} className="text-blue-400" />}
+                                {log.type === 'success' && <CheckCircle size={12} className="text-emerald-400" />}
+                                {log.type === 'warning' && <AlertTriangle size={12} className="text-amber-400" />}
+                                {log.type === 'error' && <AlertOctagon size={12} className="text-red-400" />}
+                                <span className="text-[10px] font-bold text-slate-500 uppercase">{log.type}</span>
+                            </div>
+                            <span className="text-[10px] text-slate-600 font-mono">
+                                {log.timestamp.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' })}
+                            </span>
+                        </div>
+                        <p className="text-xs text-slate-300 leading-relaxed">{log.message}</p>
+                    </div>
+                ))
+            )}
+            
+            <div className="pt-4 text-center">
+               <p className="text-[10px] text-slate-600">
+                 Select a node on the canvas to configure parameters.
+               </p>
+            </div>
         </div>
-        <p className="text-sm text-center">Select a node on the canvas to configure parameters.</p>
       </div>
     );
   }
 
-  const definition: LayerDefinition = LAYER_DEFINITIONS[selectedNode.data.type];
+  const definition: LayerDefinition | undefined = LAYER_DEFINITIONS[selectedNode.data.type];
   
+  if (!definition) {
+    return (
+      <div className="w-80 bg-slate-900 border-l border-slate-800 flex flex-col h-full">
+          <div className="p-4 border-b border-slate-800 flex justify-between items-center">
+               <h2 className="text-lg font-bold text-slate-100">Unknown Layer</h2>
+               <button onClick={onClose}><X size={18} className="text-slate-500 hover:text-white"/></button>
+          </div>
+          <div className="p-4 flex-1">
+               <div className="bg-red-500/10 border border-red-500/20 text-red-400 p-3 rounded text-sm mb-4">
+                  Error: Layer definition not found for type "{selectedNode.data.type}". 
+                  This may happen if an imported template uses deprecated types.
+               </div>
+               <button
+                  onClick={() => onDelete(selectedNode.id)}
+                  className="w-full flex items-center justify-center gap-2 bg-red-500/10 hover:bg-red-500/20 text-red-500 py-2 rounded transition-colors text-sm font-medium border border-red-500/20"
+                  >
+                  <Trash2 size={16} />
+                  Delete Node
+               </button>
+          </div>
+      </div>
+   );
+  }
+
   const handleParamChange = (name: string, value: any, type: string) => {
     let parsedValue = value;
     if (type === 'number') parsedValue = Number(value);
@@ -141,4 +202,4 @@ const PropertiesPanel: React.FC<PropertiesPanelProps> = ({ selectedNode, onChang
   );
 };
 
-export default PropertiesPanel;
+export default PropertiesPanel;