feat(SerialConsolePage): update background icon to use CSS for improved styling

src/app/components/SerialConsolePage.tsx

@@ -11,6 +11,8 @@ export default function SerialConsolePage({ onBack }: Props) {
   const containerRef = useRef<HTMLDivElement>(null);
   const termRef      = useRef<Terminal | null>(null);
   const fitRef       = useRef<FitAddon | null>(null);
+  const lineBuffer   = useRef('');
+  const echoQueue    = useRef<string[]>([]);
   const { status, send, subscribe } = useWs();
 
   // Keep a stable ref to `send` so the xterm onData closure never goes stale
@@ -46,7 +48,28 @@ export default function SerialConsolePage({ onBack }: Props) {
     term.writeln('\x1b[2m── Meatloaf Serial Console ──\x1b[0m');
     term.writeln('');
 
-    term.onData((data) => sendRef.current(data));
+    term.onData((data) => {
+      for (const char of data) {
+        if (char === '\r' || char === '\n') {
+          const line = lineBuffer.current + '\r';
+          lineBuffer.current = '';
+          term.write('\r\n');
+          echoQueue.current.push(line);
+          sendRef.current(line);
+        } else if (char === '\x7f' || char === '\b') {
+          if (lineBuffer.current.length > 0) {
+            lineBuffer.current = lineBuffer.current.slice(0, -1);
+            term.write('\b \b');
+          }
+        } else if (char === '\x03') {
+          lineBuffer.current = '';
+          term.write('^C\r\n');
+        } else if (char >= ' ') {
+          lineBuffer.current += char;
+          term.write(char);
+        }
+      }
+    });
 
     const onResize = () => fitRef.current?.fit();
     window.addEventListener('resize', onResize);
@@ -59,9 +82,14 @@ export default function SerialConsolePage({ onBack }: Props) {
     };
   }, []);
 
-  // Forward all incoming WS messages to the terminal
+  // Forward all incoming WS messages to the terminal, suppressing our own echoes
   useEffect(() => {
     return subscribe((msg) => {
+      const idx = echoQueue.current.indexOf(msg);
+      if (idx !== -1) {
+        echoQueue.current.splice(idx, 1);
+        return;
+      }
       termRef.current?.write(msg);
     });
   }, [subscribe]);
@@ -109,10 +137,16 @@ export default function SerialConsolePage({ onBack }: Props) {
 
       {/* Terminal */}
       <div
-        ref={containerRef}
+        className="flex-1 min-h-0 relative overflow-hidden"
-        className="flex-1 min-h-0"
         style={{ paddingBottom: 'env(safe-area-inset-bottom)' }}
-      />
+      >
+        <div ref={containerRef} className="absolute inset-0" />
+        <div
+          className="absolute inset-0 pointer-events-none z-10 opacity-15"
+          style={{ backgroundImage: 'url(assets/icon.svg)', backgroundRepeat: 'repeat', backgroundSize: '64px 64px' }}
+          aria-hidden="true"
+        />
+      </div>
     </div>
   );
 }