Initial commit

components/ControlPanel.tsx

@@ -0,0 +1,87 @@
+import React from 'react';
+
+interface ControlPanelProps {
+  isDualMode: boolean;
+  setDualMode: (val: boolean) => void;
+  isAttached: boolean;
+  setIsAttached: (val: boolean) => void;
+  children?: React.ReactNode;
+}
+
+const ControlPanel: React.FC<ControlPanelProps> = ({
+  isDualMode,
+  setDualMode,
+  isAttached,
+  setIsAttached,
+  children
+}) => {
+  return (
+    <div className="bg-gray-850 p-4 border-b border-gray-800 shadow-md z-20">
+      <div className="flex flex-col md:flex-row gap-4 items-center md:items-stretch">
+        
+        {/* Left Column: Brand & Controls */}
+        <div className="flex flex-col gap-3 shrink-0 md:w-auto">
+            {/* Brand */}
+            <div className="flex items-center gap-3">
+                <div className="w-10 h-10 bg-indigo-600 rounded-lg flex items-center justify-center shadow-lg shadow-indigo-900/50 shrink-0">
+                   <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                   </svg>
+                </div>
+                <div>
+                  <h1 className="text-xl font-bold text-white tracking-tight leading-tight">SerialNexus</h1>
+                  <span className="text-xs text-indigo-400 font-medium block">Bypass & Monitor</span>
+                </div>
+            </div>
+
+             {/* Controls Row */}
+            <div className="flex items-center gap-3">
+                {/* Dual Monitor Toggle */}
+                <div className={`flex items-center gap-3 p-2 pl-3 rounded-lg border transition-all duration-300 w-48 ${
+                isDualMode ? 'bg-gray-900 border-indigo-500/50 shadow-[0_0_15px_rgba(79,70,229,0.1)]' : 'bg-gray-900/50 border-gray-800'
+                }`}>
+                <label className="flex items-center cursor-pointer select-none w-full">
+                    <div className="relative shrink-0">
+                    <input 
+                        type="checkbox" 
+                        className="sr-only" 
+                        checked={isDualMode} 
+                        onChange={(e) => setDualMode(e.target.checked)} 
+                    />
+                    <div className={`block w-9 h-5 rounded-full transition-colors ${isDualMode ? 'bg-indigo-600' : 'bg-gray-700'}`}></div>
+                    <div className={`absolute left-1 top-1 bg-white w-3 h-3 rounded-full transition-transform ${isDualMode ? 'translate-x-4' : 'translate-x-0'}`}></div>
+                    </div>
+                    <div className={`ml-2 text-xs font-bold ${isDualMode ? 'text-indigo-300' : 'text-gray-500'}`}>
+                    DUAL MONITOR
+                    </div>
+                </label>
+                </div>
+
+                {/* Attach Button */}
+                <button
+                    onClick={() => setIsAttached(!isAttached)}
+                    disabled={!isDualMode}
+                    className={`flex items-center justify-center gap-2 px-4 py-2 rounded-lg border text-xs font-bold transition-all duration-300 ${
+                        !isDualMode 
+                            ? 'opacity-50 cursor-not-allowed bg-gray-900 border-gray-800 text-gray-600'
+                            : isAttached
+                                ? 'bg-green-900/30 border-green-500/50 text-green-400 shadow-[0_0_10px_rgba(34,197,94,0.2)]'
+                                : 'bg-gray-900 border-gray-700 text-gray-400 hover:border-gray-500 hover:text-gray-300'
+                    }`}
+                >
+                    <div className={`w-2 h-2 rounded-full ${isAttached && isDualMode ? 'bg-green-500 animate-pulse' : 'bg-gray-600'}`}></div>
+                    {isAttached ? 'ATTACHED' : 'ATTACH'}
+                </button>
+            </div>
+        </div>
+
+        {/* Right Column: Sponsor Space */}
+        <div className="flex-1 w-full flex justify-center md:justify-end items-center">
+           {children}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ControlPanel;

components/InputBar.tsx

@@ -0,0 +1,245 @@
+import React, { useState, KeyboardEvent, useEffect } from 'react';
+
+type InputMode = 'ASCII' | 'HEX';
+
+interface InputBarProps {
+  onSend: (data: Uint8Array) => void;
+  disabled: boolean;
+}
+
+const InputBar: React.FC<InputBarProps> = ({ onSend, disabled }) => {
+  const [text, setText] = useState('');
+  const [stx, setStx] = useState('');
+  const [etx, setEtx] = useState('');
+  const [mode, setMode] = useState<InputMode>('ASCII');
+  
+  // Error states for validation
+  const [errors, setErrors] = useState({ stx: false, text: false, etx: false });
+
+  // Command History State
+  const [history, setHistory] = useState<string[]>([]);
+  const [historyIndex, setHistoryIndex] = useState<number>(-1);
+
+  // Clear errors when mode changes
+  useEffect(() => {
+    setErrors({ stx: false, text: false, etx: false });
+  }, [mode]);
+
+  const isValidHex = (str: string): boolean => {
+    // Allow empty string, hex digits, and spaces.
+    // Checks if there is any character that is NOT 0-9, a-f, A-F, or whitespace
+    return !/[^0-9A-Fa-f\s]/.test(str);
+  };
+
+  const parseString = (str: string, mode: InputMode): Uint8Array => {
+    if (mode === 'HEX') {
+        // Remove spaces and non-hex characters (cleaning is still done for safe parsing)
+        const clean = str.replace(/[^0-9A-Fa-f]/g, '');
+        if (clean.length === 0) return new Uint8Array(0);
+        
+        const bytes = new Uint8Array(Math.ceil(clean.length / 2));
+        for (let i = 0; i < bytes.length; i++) {
+            const hexPair = clean.slice(i * 2, i * 2 + 2).padEnd(2, '0'); 
+            bytes[i] = parseInt(hexPair, 16);
+        }
+        return bytes;
+    } else {
+        // ASCII Mode with Escape Sequence Parsing
+        const unescaped = str
+            .replace(/\\r/g, '\r')
+            .replace(/\\n/g, '\n')
+            .replace(/\\t/g, '\t')
+            .replace(/\\0/g, '\0')
+            .replace(/\\x([0-9A-Fa-f]{2})/g, (_, hex) => String.fromCharCode(parseInt(hex, 16)));
+        
+        return new TextEncoder().encode(unescaped);
+    }
+  };
+
+  const handleSend = () => {
+    // Validation for HEX mode
+    if (mode === 'HEX') {
+        const stxValid = isValidHex(stx);
+        const textValid = isValidHex(text);
+        const etxValid = isValidHex(etx);
+
+        setErrors({
+            stx: !stxValid,
+            text: !textValid,
+            etx: !etxValid
+        });
+
+        if (!stxValid || !textValid || !etxValid) {
+            return; // Stop sending if validation fails
+        }
+    }
+
+    try {
+        const stxBytes = stx ? parseString(stx, mode) : new Uint8Array(0);
+        const bodyBytes = text ? parseString(text, mode) : new Uint8Array(0);
+        const etxBytes = etx ? parseString(etx, mode) : new Uint8Array(0);
+        
+        if (stxBytes.length === 0 && bodyBytes.length === 0 && etxBytes.length === 0) return;
+
+        const totalLength = stxBytes.length + bodyBytes.length + etxBytes.length;
+        const result = new Uint8Array(totalLength);
+        
+        result.set(stxBytes, 0);
+        result.set(bodyBytes, stxBytes.length);
+        result.set(etxBytes, stxBytes.length + bodyBytes.length);
+
+        onSend(result);
+        
+        // Add to history
+        if (text.trim() !== '') {
+            setHistory(prev => {
+                const newHistory = [...prev];
+                if (newHistory[newHistory.length - 1] !== text) {
+                    newHistory.push(text);
+                }
+                if (newHistory.length > 50) return newHistory.slice(-50);
+                return newHistory;
+            });
+        }
+        
+        setText('');
+        setHistoryIndex(-1);
+
+    } catch (e) {
+        console.error("Parse error", e);
+        alert("Error parsing input data.");
+    }
+  };
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      handleSend();
+    } else if (e.key === 'ArrowUp') {
+        e.preventDefault();
+        if (history.length === 0) return;
+
+        setHistoryIndex(prevIndex => {
+            const newIndex = prevIndex === -1 ? history.length - 1 : Math.max(0, prevIndex - 1);
+            setText(history[newIndex]);
+            // Clear text error when recalling history
+            setErrors(prev => ({ ...prev, text: false }));
+            return newIndex;
+        });
+    } else if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        if (history.length === 0 || historyIndex === -1) return;
+
+        setHistoryIndex(prevIndex => {
+            if (prevIndex >= history.length - 1) {
+                setText('');
+                return -1;
+            } else {
+                const newIndex = prevIndex + 1;
+                setText(history[newIndex]);
+                // Clear text error when recalling history
+                setErrors(prev => ({ ...prev, text: false }));
+                return newIndex;
+            }
+        });
+    }
+  };
+
+  const getBorderClass = (hasError: boolean) => {
+    return hasError 
+        ? "border-red-500 focus:ring-red-500 text-red-300 placeholder-red-300/50" 
+        : "border-gray-700 focus:ring-indigo-500 text-white placeholder-gray-700";
+  };
+
+  return (
+    <div className="flex flex-col md:flex-row items-center gap-2 p-3 bg-gray-850 border-t border-gray-800">
+      <div className="flex items-center gap-2 w-full md:w-auto">
+        {/* Mode Toggle */}
+        <div className="flex bg-gray-900 rounded border border-gray-700">
+            <button
+                onClick={() => setMode('ASCII')}
+                className={`px-2 py-1 text-[10px] font-bold rounded-l transition-all ${
+                mode === 'ASCII' ? 'bg-indigo-600 text-white' : 'text-gray-400 hover:text-white'
+                }`}
+            >
+                ASC
+            </button>
+            <button
+                onClick={() => setMode('HEX')}
+                className={`px-2 py-1 text-[10px] font-bold rounded-r transition-all ${
+                mode === 'HEX' ? 'bg-indigo-600 text-white' : 'text-gray-400 hover:text-white'
+                }`}
+            >
+                HEX
+            </button>
+        </div>
+      </div>
+
+      <div className="flex flex-1 items-center gap-2 w-full">
+        {/* STX Input */}
+        <input
+            type="text"
+            value={stx}
+            onChange={(e) => {
+                setStx(e.target.value);
+                if (errors.stx) setErrors(prev => ({ ...prev, stx: false }));
+            }}
+            disabled={disabled}
+            placeholder="STX"
+            className={`w-14 bg-gray-900 text-xs border rounded px-2 py-2 focus:ring-1 outline-none text-center font-mono transition-colors ${
+                errors.stx 
+                ? "border-red-500 focus:ring-red-500 text-red-400 placeholder-red-400/50" 
+                : "border-gray-700 focus:ring-indigo-500 text-amber-200 placeholder-gray-700"
+            }`}
+            title="Start Byte (e.g. \x02 or 02)"
+        />
+
+        {/* Main Input */}
+        <input
+            type="text"
+            value={text}
+            onChange={(e) => {
+                setText(e.target.value);
+                setHistoryIndex(-1);
+                if (errors.text) setErrors(prev => ({ ...prev, text: false }));
+            }}
+            onKeyDown={handleKeyDown}
+            disabled={disabled}
+            placeholder={disabled ? "Disconnected..." : (mode === 'HEX' ? (errors.text ? "Invalid HEX!" : "AA BB CC...") : "Type message (supports \\r\\n)...")}
+            className={`flex-1 bg-gray-900 text-sm border rounded px-3 py-2 focus:ring-2 outline-none disabled:opacity-50 font-mono transition-colors ${getBorderClass(errors.text)}`}
+        />
+
+        {/* ETX Input */}
+        <input
+            type="text"
+            value={etx}
+            onChange={(e) => {
+                setEtx(e.target.value);
+                if (errors.etx) setErrors(prev => ({ ...prev, etx: false }));
+            }}
+            disabled={disabled}
+            placeholder="ETX"
+            className={`w-14 bg-gray-900 text-xs border rounded px-2 py-2 focus:ring-1 outline-none text-center font-mono transition-colors ${
+                errors.etx
+                ? "border-red-500 focus:ring-red-500 text-red-400 placeholder-red-400/50" 
+                : "border-gray-700 focus:ring-indigo-500 text-amber-200 placeholder-gray-700"
+            }`}
+            title="End Byte (e.g. \r\n or 0D 0A)"
+        />
+
+        <button
+            onClick={handleSend}
+            disabled={disabled}
+            className={`text-white text-xs font-bold px-4 py-2 rounded transition-colors uppercase tracking-wider h-full ${
+                (errors.stx || errors.text || errors.etx)
+                ? "bg-red-600 hover:bg-red-500"
+                : "bg-indigo-600 hover:bg-indigo-500 disabled:bg-gray-700"
+            }`}
+        >
+            {(errors.stx || errors.text || errors.etx) ? 'Fix' : 'Send'}
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default InputBar;

components/Terminal.tsx

@@ -0,0 +1,112 @@
+import React, { useEffect, useRef } from 'react';
+import { SerialLogEntry, ViewMode } from '../types';
+import { formatTime, uInt8ArrayToAscii, uInt8ArrayToHex } from '../utils';
+
+interface TerminalProps {
+  title: string;
+  logs: SerialLogEntry[];
+  viewMode: ViewMode;
+  isConnected: boolean;
+  onClear: () => void;
+  onSave: () => void;
+  className?: string;
+  headerControls?: React.ReactNode;
+}
+
+const Terminal: React.FC<TerminalProps> = ({ 
+  title, 
+  logs, 
+  viewMode, 
+  isConnected,
+  onClear,
+  onSave,
+  className,
+  headerControls
+}) => {
+  const bottomRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    // Auto-scroll to bottom on new logs
+    if (bottomRef.current) {
+      bottomRef.current.scrollIntoView({ behavior: "smooth" });
+    }
+  }, [logs]);
+
+  return (
+    <div className={`flex flex-col h-full bg-gray-900 border border-gray-800 rounded-lg shadow-xl overflow-hidden ${className}`}>
+      {/* Terminal Header */}
+      <div className="flex flex-wrap items-center justify-between px-4 py-2 bg-gray-850 border-b border-gray-800 gap-y-2">
+        <div className="flex items-center gap-4">
+            <div className="flex items-center gap-2">
+                <div className={`w-2 h-2 rounded-full ${isConnected ? 'bg-green-500 animate-pulse' : 'bg-red-500'}`} />
+                <h2 className="text-sm font-semibold text-gray-300 uppercase tracking-wider whitespace-nowrap">{title}</h2>
+            </div>
+            
+            {/* Custom Header Controls (e.g. Baud Rate, Connect Button) */}
+            {headerControls && (
+                <div className="flex items-center gap-2 border-l border-gray-700 pl-4">
+                    {headerControls}
+                </div>
+            )}
+        </div>
+
+        <div className="flex items-center gap-2 ml-auto">
+           {/* Save Button (Icon Only) */}
+           <button 
+             onClick={onSave}
+             className="p-1.5 text-indigo-400 hover:text-white hover:bg-indigo-900/50 rounded transition-colors border border-transparent hover:border-indigo-500/30"
+             title="Save Logs to File"
+           >
+             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-5 h-5">
+                <path strokeLinecap="round" strokeLinejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3" />
+             </svg>
+           </button>
+
+           {/* Clear Button (Icon Only - Trash) */}
+           <button 
+             onClick={onClear}
+             className="p-1.5 text-gray-400 hover:text-red-400 hover:bg-red-900/30 rounded transition-colors border border-transparent hover:border-red-500/30"
+             title="Clear Logs"
+           >
+             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-5 h-5">
+               <path strokeLinecap="round" strokeLinejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
+             </svg>
+           </button>
+        </div>
+      </div>
+
+      {/* Log Area */}
+      <div className="flex-1 overflow-y-auto font-mono text-sm p-4 space-y-1 relative bg-black/50">
+        {logs.length === 0 && (
+          <div className="absolute inset-0 flex items-center justify-center text-gray-600 pointer-events-none">
+            <p>Waiting for data...</p>
+          </div>
+        )}
+        
+        {logs.map((log) => (
+          <div key={log.id} className="flex gap-3 hover:bg-white/5 p-0.5 rounded transition-colors group">
+            <span className="text-gray-600 text-xs select-none w-20 shrink-0">
+              [{formatTime(log.timestamp)}]
+            </span>
+            <span className={`font-bold text-xs w-6 shrink-0 select-none ${
+              log.direction === 'TX' ? 'text-blue-400' : 'text-orange-400'
+            }`}>
+              {log.direction}
+            </span>
+            <span className={`break-all ${
+              log.direction === 'TX' ? 'text-blue-100' : 'text-orange-100'
+            }`}>
+              {viewMode === ViewMode.ASCII 
+                ? uInt8ArrayToAscii(log.data) 
+                : uInt8ArrayToHex(log.data)
+              }
+            </span>
+          </div>
+        ))}
+        <div ref={bottomRef} />
+      </div>
+    </div>
+  );
+};
+
+export default Terminal;