Initial commit: Refactor AgvAutoRunControls

2025-12-18 23:52:02 +09:00
commit c4089aeb20
25 changed files with 7517 additions and 0 deletions
--- a/components/SystemLogPanel.tsx
+++ b/components/SystemLogPanel.tsx
@@ -0,0 +1,69 @@
+import React, { useRef, useEffect, useMemo } from 'react';
+import { LogEntry } from '../types';
+import { Terminal, Trash2, Info } from 'lucide-react';
+
+interface SystemLogPanelProps {
+  logs: LogEntry[];
+  onClear: () => void;
+}
+
+const SystemLogPanel: React.FC<SystemLogPanelProps> = ({ logs, onClear }) => {
+  const logContainerRef = useRef<HTMLDivElement>(null);
+
+  const reversedLogs = useMemo(() => [...logs].reverse(), [logs]);
+
+  // Force scroll to top
+  useEffect(() => {
+    if (logContainerRef.current) {
+        logContainerRef.current.scrollTop = 0;
+    }
+  }, [reversedLogs]);
+
+  return (
+    <div className="flex flex-col h-full bg-gray-900 border-t border-gray-700 overflow-hidden relative">
+      {/* Header */}
+      <div className="flex items-center justify-between px-3 py-1.5 bg-gray-800 border-b border-gray-700 shrink-0">
+          <div className="flex items-center gap-2">
+              <div className="font-bold text-xs text-gray-300 flex items-center gap-1.5">
+                  <Info size={12} className="text-gray-400" /> SYSTEM LOG
+              </div>
+          </div>
+          
+          <button 
+              onClick={onClear}
+              title="Clear Logs"
+              className="p-1 text-gray-500 hover:text-gray-200 hover:bg-gray-700 rounded transition-colors"
+          >
+              <Trash2 size={12} />
+          </button>
+      </div>
+      
+      {/* Log Body */}
+      <div 
+        ref={logContainerRef} 
+        className="flex-1 overflow-y-auto p-2 font-mono text-[10px] space-y-0.5 leading-tight bg-gray-900"
+      >
+          {reversedLogs.length === 0 && (
+            <div className="h-full flex flex-col items-center justify-center text-gray-700 space-y-1">
+               <span className="text-[9px]">No System Activity</span>
+            </div>
+          )}
+          
+          {reversedLogs.map((log, index) => (
+            <div key={log.id} className="flex gap-2 break-all opacity-90 hover:opacity-100 hover:bg-gray-800/50 py-[1px] border-b border-gray-800/30 last:border-0 items-start">
+              <span className="text-gray-600 select-none min-w-[20px] text-right text-[9px] pt-0.5">{index + 1}</span>
+              <span className="text-gray-500 select-none whitespace-nowrap min-w-[45px] text-[9px] pt-0.5">{log.timestamp}</span>
+              <span className={`flex-1 font-mono break-all
+                ${log.type === 'ERROR' ? 'text-red-400 font-bold' : 'text-gray-300'}
+                ${log.type === 'INFO' ? 'text-gray-400' : ''}
+              `}>
+                {log.message}
+              </span>
+            </div>
+          ))}
+      </div>
+    </div>
+  );
+};
+
+export default SystemLogPanel;