Merge pull request #76 from PathOnAI/messagelog-v1

Author: TataKKKL

visual-tree-search-app/components/LATSVisual.tsx

@@ -491,16 +491,6 @@ const LATSVisual: React.FC<SimpleSearchVisualProps> = ({ messages }) => {
           Tree Visualization
         </h2>
 
-        {/* Simulation indicator */}
-        {simulationStartNodeId && (
-          <div className="mt-2 flex items-center">
-            <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
-              <span className="w-2 h-2 mr-1 rounded-full bg-green-500"></span>
-              Simulation Mode
-            </span>
-          </div>
-        )}
-        
         {/* Legend */}
         <div className="mt-2 flex flex-wrap gap-2 text-xs">
           <div className="flex items-center">

visual-tree-search-app/components/MessageLogPanel.tsx

@@ -233,6 +233,8 @@ const MessageLogPanel: React.FC<MessageLogPanelProps> = ({ messages, messagesEnd
         return <Flag className="h-4 w-4 text-blue-500" />;
       case 'best_path_update':
         return <Target className="h-4 w-4 text-blue-500" />;
+      case 'node_selected_for_simulation':
+        return <Target className="h-4 w-4 text-purple-500" />;
       default:
         return <Info className="h-4 w-4 text-slate-500" />;
     }
@@ -415,9 +417,6 @@ const MessageLogPanel: React.FC<MessageLogPanelProps> = ({ messages, messagesEnd
             {getIcon(message)}
             <div className="animate-slideIn">
               <div className="text-purple-600 dark:text-purple-400">{message.description}</div>
-              <div className="text-xs text-slate-500 dark:text-slate-400">
-                Reason: {message.reason}
-              </div>
             </div>
           </div>
         );
@@ -477,6 +476,16 @@ const MessageLogPanel: React.FC<MessageLogPanelProps> = ({ messages, messagesEnd
           </div>
         );
 
+      case 'node_selected_for_simulation':
+        return (
+          <div className="flex items-center gap-2 animate-fadeIn">
+            {getIcon(message)}
+            <div className="animate-slideIn">
+              <div className="text-purple-600 dark:text-purple-400">{message.description}</div>
+            </div>
+          </div>
+        );
+
       default:
         return (
           <div className="flex items-center gap-2 animate-fadeIn">

visual-tree-search-app/components/MessageLogPanelLATS.tsx

@@ -70,6 +70,11 @@ interface ParsedMessage {
   node_id?: string;
   value?: number;
   visits?: number;
+  reward?: number;
+  terminal_node_description?: string;
+  step?: number;
+  step_name?: string;
+  iteration?: number;
 }
 
 interface PathStep {
@@ -174,6 +179,9 @@ const MessageLogPanelLATS: React.FC<MessageLogPanelProps> = ({ messages, message
       case 'node_terminal':
         return "bg-gradient-to-r from-green-50 to-green-100 dark:from-green-900/20 dark:to-green-800/20 border-green-200 dark:border-green-800";
 
+      case 'simulation_result':
+        return "bg-gradient-to-r from-amber-50 to-amber-100 dark:from-amber-900/20 dark:to-amber-800/20 border-amber-200 dark:border-amber-800";
+
       default:
         return "bg-gradient-to-r from-slate-50 to-slate-100 dark:from-slate-900/20 dark:to-slate-800/20 border-slate-200 dark:border-slate-800";
     }
@@ -284,6 +292,8 @@ const MessageLogPanelLATS: React.FC<MessageLogPanelProps> = ({ messages, message
         return <Play className="h-4 w-4 text-green-500" />;
       case 'node_terminal':
         return <Flag className="h-4 w-4 text-green-500" />;
+      case 'simulation_result':
+        return <Info className="h-4 w-4 text-amber-500" />;
       default:
         return <Info className="h-4 w-4 text-slate-500" />;
     }
@@ -379,6 +389,9 @@ const MessageLogPanelLATS: React.FC<MessageLogPanelProps> = ({ messages, message
       case 'node_terminal':
         return "bg-green-100 dark:bg-green-800/30 text-green-600 dark:text-green-400";
 
+      case 'simulation_result':
+        return "bg-amber-100 dark:bg-amber-800/30 text-amber-600 dark:text-amber-400";
+
       default:
         return "bg-slate-100 dark:bg-slate-800/30 text-slate-600 dark:text-slate-400";
     }
@@ -559,11 +572,6 @@ const MessageLogPanelLATS: React.FC<MessageLogPanelProps> = ({ messages, message
               <div className="text-cyan-600 dark:text-cyan-400">
                 {message.description || message.type.split('_').join(' ')}
               </div>
-              {message.node_id && (
-                <div className="text-xs text-slate-500 dark:text-slate-400">
-                  Node ID: {message.node_id}
-                </div>
-              )}
             </div>
           </div>
         );
@@ -580,17 +588,56 @@ const MessageLogPanelLATS: React.FC<MessageLogPanelProps> = ({ messages, message
               <div className="text-green-600 dark:text-green-400">
                 {message.description || message.type.split('_').join(' ')}
               </div>
-              {message.node_id && (
+              {message.action && (
+                <div className="text-xs text-slate-500 dark:text-slate-400">
+                  Action: {message.action}
+                </div>
+              )}
+            </div>
+          </div>
+        );
+
+      case 'simulation_result':
+        return (
+          <div className="flex items-center gap-2 animate-fadeIn">
+            {getIcon(message)}
+            <div className="animate-slideIn">
+              <div className="text-amber-600 dark:text-amber-400">
+                Simulation Result | Reward: {message.reward}
+              </div>
+              {message.terminal_node_description && (
                 <div className="text-xs text-slate-500 dark:text-slate-400">
-                  Node ID: {message.node_id}
-                  {message.value !== undefined && ` | Value: ${message.value.toFixed(2)}`}
-                  {message.visits !== undefined && ` | Visits: ${message.visits}`}
+                  {message.terminal_node_description}
                 </div>
               )}
             </div>
           </div>
         );
 
+      case 'step_start':
+        return (
+          <div className="flex items-center gap-2 animate-fadeIn">
+            {getIcon(message)}
+            <div className="animate-slideIn">
+              <div className="text-blue-600 dark:text-blue-400">
+                Step {message.step}: {message.step_name}
+              </div>
+            </div>
+          </div>
+        );
+
+      case 'iteration_start':
+        return (
+          <div className="flex items-center gap-2 animate-fadeIn">
+            {getIcon(message)}
+            <div className="animate-slideIn">
+              <div className="text-blue-600 dark:text-blue-400">
+                Iteration {message.iteration}
+              </div>
+            </div>
+          </div>
+        );
+
       default:
         return (
           <div className="flex items-center gap-2 animate-fadeIn">