feat: auto-clear logs on connect

2026-01-16 14:57:07 +09:00
parent 71f119414f
commit e5695bed22
1 changed files with 79 additions and 80 deletions
--- a/App.tsx
+++ b/App.tsx
@@ -15,7 +15,7 @@ const App: React.FC = () => {
  // State for Configuration
  const [isDualMode, setIsDualMode] = useState(false);
  const [isAttached, setIsAttached] = useState(false);
-  
+
  // Refs for State Access inside Callbacks (Fixes stale closures)
  const isAttachedRef = useRef(isAttached);
  const isDualModeRef = useRef(isDualMode);
@@ -44,8 +44,8 @@ const App: React.FC = () => {
    // Check if Web Serial is supported
    const nav = navigator as unknown as { serial: NavigatorSerial };
    if (!nav.serial) {
-        setIsSupported(false);
-        console.warn("Web Serial API is not supported in this browser.");
+      setIsSupported(false);
+      console.warn("Web Serial API is not supported in this browser.");
    }

    return () => {
@@ -104,10 +104,10 @@ const App: React.FC = () => {
  // --- Log Saving Logic ---
  const handleSaveLogs = (portName: string, logs: SerialLogEntry[]) => {
    if (logs.length === 0) {
-        alert(`No logs to save for ${portName}.`);
-        return;
+      alert(`No logs to save for ${portName}.`);
+      return;
    }
-    
+
    // Header
    let content = `SerialNexus Log - Port ${portName}\n`;
    content += `Exported at: ${new Date().toLocaleString()}\n`;
@@ -117,18 +117,18 @@ const App: React.FC = () => {

    // Data
    content += logs.map(log => {
-        const time = formatTime(log.timestamp).padEnd(23, ' ');
-        const dir = log.direction.padEnd(3, ' ');
-        const hex = uInt8ArrayToHex(log.data).padEnd(40, ' '); // simple padding
-        const ascii = uInt8ArrayToAscii(log.data);
-        return `${time} | ${dir} | ${hex} | ${ascii}`;
+      const time = formatTime(log.timestamp).padEnd(23, ' ');
+      const dir = log.direction.padEnd(3, ' ');
+      const hex = uInt8ArrayToHex(log.data).padEnd(40, ' '); // simple padding
+      const ascii = uInt8ArrayToAscii(log.data);
+      return `${time} | ${dir} | ${hex} | ${ascii}`;
    }).join('\n');

    const blob = new Blob([content], { type: 'text/plain' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
-    a.download = `serial-log-${portName.toLowerCase()}-${new Date().toISOString().slice(0,19).replace(/[:T]/g,'-')}.txt`;
+    a.download = `serial-log-${portName.toLowerCase()}-${new Date().toISOString().slice(0, 19).replace(/[:T]/g, '-')}.txt`;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
@@ -140,16 +140,17 @@ const App: React.FC = () => {
  const handleConnectA = async () => {
    try {
      console.log("Connect A Clicked");
+      setLogsA([]);
      await serialA.current.connect(baudRateA);
      setIsConnectedA(true);
      serialA.current.startReading((data) => {
        // Log RX on A
        addLog('A', 'RX', data);
-        
+
        // Visual Feedback for Bridge: If Attached, we assume it was sent to B
        // Note: The actual sending happens in SerialManager, here we just update the UI
        if (isAttachedRef.current && isDualModeRef.current && serialB.current.port) {
-            addLog('B', 'TX', data);
+          addLog('B', 'TX', data);
        }
      });
    } catch (err) {
@@ -166,15 +167,16 @@ const App: React.FC = () => {
  const handleConnectB = async () => {
    try {
      console.log("Connect B Clicked");
+      setLogsB([]);
      await serialB.current.connect(baudRateB);
      setIsConnectedB(true);
      serialB.current.startReading((data) => {
        // Log RX on B
        addLog('B', 'RX', data);
-        
+
        // Visual Feedback for Bridge: If Attached, we assume it was sent to A
        if (isAttachedRef.current && isDualModeRef.current && serialA.current.port) {
-            addLog('A', 'TX', data);
+          addLog('A', 'TX', data);
        }
      });
    } catch (err) {
@@ -204,7 +206,7 @@ const App: React.FC = () => {

  // --- Helper Component for Controls ---
  const renderControls = (
-    baud: number, 
+    baud: number,
    setBaud: (r: number) => void,
    connected: boolean,
    onConnect: () => void,
@@ -213,54 +215,52 @@ const App: React.FC = () => {
    setViewMode: (v: ViewMode) => void
  ) => (
    <>
-        <div className="flex items-center gap-2">
-            <span className="text-[10px] text-gray-500 font-bold uppercase hidden xl:inline">Baud</span>
-            <select 
-            className="bg-gray-800 text-xs text-white border border-gray-700 rounded px-1 py-0.5 focus:ring-1 focus:ring-indigo-500 outline-none w-20"
-            value={baud}
-            onChange={(e) => setBaud(Number(e.target.value))}
-            disabled={connected}
-            >
-            {BAUD_RATES.map(rate => (
-                <option key={rate} value={rate}>{rate}</option>
-            ))}
-            </select>
-        </div>
+      <div className="flex items-center gap-2">
+        <span className="text-[10px] text-gray-500 font-bold uppercase hidden xl:inline">Baud</span>
+        <select
+          className="bg-gray-800 text-xs text-white border border-gray-700 rounded px-1 py-0.5 focus:ring-1 focus:ring-indigo-500 outline-none w-20"
+          value={baud}
+          onChange={(e) => setBaud(Number(e.target.value))}
+          disabled={connected}
+        >
+          {BAUD_RATES.map(rate => (
+            <option key={rate} value={rate}>{rate}</option>
+          ))}
+        </select>
+      </div>

-        {connected ? (
-            <button onClick={onDisconnect} className="bg-red-900/30 text-red-400 border border-red-800/50 hover:bg-red-900/50 px-2 py-0.5 rounded text-xs font-bold transition-all flex items-center gap-1">
-                DISCONNECT
-            </button>
-        ) : (
-            <button 
-                onClick={onConnect} 
-                disabled={!isSupported}
-                title={!isSupported ? "Web Serial API not supported" : "Connect to Serial Port"}
-                className="bg-indigo-600 hover:bg-indigo-500 text-white px-3 py-0.5 rounded text-xs font-bold transition-all shadow-lg shadow-indigo-900/20 disabled:opacity-50 disabled:cursor-not-allowed"
-            >
-                {isSupported ? "CONNECT" : "NO SERIAL API"}
-            </button>
-        )}
+      {connected ? (
+        <button onClick={onDisconnect} className="bg-red-900/30 text-red-400 border border-red-800/50 hover:bg-red-900/50 px-2 py-0.5 rounded text-xs font-bold transition-all flex items-center gap-1">
+          DISCONNECT
+        </button>
+      ) : (
+        <button
+          onClick={onConnect}
+          disabled={!isSupported}
+          title={!isSupported ? "Web Serial API not supported" : "Connect to Serial Port"}
+          className="bg-indigo-600 hover:bg-indigo-500 text-white px-3 py-0.5 rounded text-xs font-bold transition-all shadow-lg shadow-indigo-900/20 disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          {isSupported ? "CONNECT" : "NO SERIAL API"}
+        </button>
+      )}

-        {/* View Mode Toggles */}
-        <div className="flex bg-gray-800 rounded border border-gray-700 ml-2">
-            <button
-            onClick={() => setViewMode(ViewMode.ASCII)}
-            className={`px-2 py-0.5 text-[10px] font-bold rounded-l transition-all ${
-                viewMode === ViewMode.ASCII ? 'bg-gray-600 text-white' : 'text-gray-400 hover:text-white'
+      {/* View Mode Toggles */}
+      <div className="flex bg-gray-800 rounded border border-gray-700 ml-2">
+        <button
+          onClick={() => setViewMode(ViewMode.ASCII)}
+          className={`px-2 py-0.5 text-[10px] font-bold rounded-l transition-all ${viewMode === ViewMode.ASCII ? 'bg-gray-600 text-white' : 'text-gray-400 hover:text-white'
            }`}
-            >
-            ASCII
-            </button>
-            <button
-            onClick={() => setViewMode(ViewMode.HEX)}
-            className={`px-2 py-0.5 text-[10px] font-bold rounded-r transition-all ${
-                viewMode === ViewMode.HEX ? 'bg-gray-600 text-white' : 'text-gray-400 hover:text-white'
+        >
+          ASCII
+        </button>
+        <button
+          onClick={() => setViewMode(ViewMode.HEX)}
+          className={`px-2 py-0.5 text-[10px] font-bold rounded-r transition-all ${viewMode === ViewMode.HEX ? 'bg-gray-600 text-white' : 'text-gray-400 hover:text-white'
            }`}
-            >
-            HEX
-            </button>
-        </div>
+        >
+          HEX
+        </button>
+      </div>
    </>
  );

@@ -277,7 +277,7 @@ const App: React.FC = () => {
          <div className="absolute inset-0 bg-gradient-to-r from-transparent via-gray-700/10 to-transparent translate-x-[-100%] group-hover:animate-[shimmer_2s_infinite]"></div>
        </div>
      </ControlPanel>
-      
+
      {!isSupported && (
        <div className="bg-red-900/50 border-b border-red-800 text-red-200 text-xs text-center py-1">
          ⚠️ Your browser does not support the Web Serial API. Please use Chrome, Edge, or Opera.
@@ -286,14 +286,13 @@ const App: React.FC = () => {

      {/* Main Content Area */}
      <div className={`flex-1 flex overflow-hidden p-2 md:p-4 gap-2 md:gap-4 ${isDualMode ? 'flex-col md:flex-row' : 'flex-col'}`}>
-        
+
        {/* Port A Terminal */}
-        <div className={`flex flex-col transition-all duration-300 ease-in-out ${
-            isDualMode 
-              ? 'w-full h-1/2 md:w-1/2 md:h-full'
-              : 'w-full h-full'
-        }`}>
-          <Terminal 
+        <div className={`flex flex-col transition-all duration-300 ease-in-out ${isDualMode
+            ? 'w-full h-1/2 md:w-1/2 md:h-full'
+            : 'w-full h-full'
+          }`}>
+          <Terminal
            title="Primary Port (A)"
            logs={logsA}
            viewMode={viewModeA}
@@ -302,13 +301,13 @@ const App: React.FC = () => {
            onSave={() => handleSaveLogs("A", logsA)}
            className="flex-1"
            headerControls={renderControls(
-                baudRateA, setBaudRateA, isConnectedA, handleConnectA, handleDisconnectA, viewModeA, setViewModeA
+              baudRateA, setBaudRateA, isConnectedA, handleConnectA, handleDisconnectA, viewModeA, setViewModeA
            )}
          />
          <div className="mt-2 shrink-0">
-            <InputBar 
-              onSend={handleSendA} 
-              disabled={!isConnectedA} 
+            <InputBar
+              onSend={handleSendA}
+              disabled={!isConnectedA}
            />
          </div>
        </div>
@@ -316,7 +315,7 @@ const App: React.FC = () => {
        {/* Port B Terminal (Only if Dual Mode) */}
        {isDualMode && (
          <div className="flex flex-col w-full h-1/2 md:w-1/2 md:h-full animate-fade-in-right">
-            <Terminal 
+            <Terminal
              title="Secondary Port (B)"
              logs={logsB}
              viewMode={viewModeB}
@@ -329,9 +328,9 @@ const App: React.FC = () => {
              )}
            />
            <div className="mt-2 shrink-0">
-              <InputBar 
-                onSend={handleSendB} 
-                disabled={!isConnectedB} 
+              <InputBar
+                onSend={handleSendB}
+                disabled={!isConnectedB}
              />
            </div>
          </div>
@@ -342,9 +341,9 @@ const App: React.FC = () => {
      <div className="h-6 bg-gray-900 border-t border-gray-800 flex items-center justify-between px-4 text-[10px] text-gray-500 font-mono select-none shrink-0">
        <span>&copy; 2026 SIMP</span>
        <span className="hidden sm:inline">
-            {isDualMode 
-             ? (isAttached ? "MODE: DUAL MONITOR (ATTACHED: A <-> B)" : "MODE: DUAL MONITOR (INDEPENDENT)") 
-             : "MODE: SINGLE MONITOR (A)"}
+          {isDualMode
+            ? (isAttached ? "MODE: DUAL MONITOR (ATTACHED: A <-> B)" : "MODE: DUAL MONITOR (INDEPENDENT)")
+            : "MODE: SINGLE MONITOR (A)"}
        </span>
      </div>
    </div>