src/app/App.tsx

@@ -13,7 +13,6 @@ import MediaManager             from './components/MediaManager';
 import logoSvg from '../imports/logo.svg';
 import { useSettings } from './settings';
 import { WsProvider } from './ws';
-import { LazyLoader } from './components/ui/lazy-loader';
 
 // Three.js lives only in RealityOverridePage — keep lazy so it doesn't load on startup.
 // CodeMirror/syntax-highlighter/ReactMarkdown live in MediaViewerEditor — lazy-loaded
@@ -48,6 +47,13 @@ type AppId =
   | 'reality-override'
   | 'reality-override-admin';
 
+function PageLoader() {
+  return (
+    <div className="flex items-center justify-center h-full text-neutral-400">
+      <Loader2 className="w-6 h-6 animate-spin" />
+    </div>
+  );
+}
 
 export default function App() {
   const [currentPage, setCurrentPage] = useState<Page>('status');
@@ -308,7 +314,7 @@ function AppPage({ title, onBack }: { title: string; onBack: () => void }) {
       </header>
 
       <main className="flex-1 overflow-y-auto">
-        <Suspense fallback={<LazyLoader />}>
+        <Suspense fallback={<PageLoader />}>
           {pages[currentPage]}
         </Suspense>
       </main>

src/app/components/CodeEditor.tsx

@@ -26,8 +26,7 @@ interface CodeEditorProps {
 }
 
 const cmTheme = EditorView.theme({
-  '&': { height: '100%', background: 'transparent' },
+  '&': { height: '100%', background: '#0a0a0a' },
-  '.cm-gutters': { background: 'transparent', borderRight: '1px solid rgba(255,255,255,0.08)' },
   '.cm-scroller': { overflow: 'auto', fontFamily: 'ui-monospace,monospace', fontSize: '12px', lineHeight: '1.5' },
   '.cm-content': { padding: '12px 0' },
   '.cm-focused': { outline: 'none' },
@@ -101,7 +100,7 @@ export default function CodeEditor({ text, mode, syntaxHighlightLang, readOnly =
           <SyntaxHighlighter
             language={syntaxHighlightLang ?? syntaxLang[mode]}
             style={vscDarkPlus}
-            customStyle={{ margin: 0, minHeight: '100%', background: 'transparent', fontSize: '12px', lineHeight: '1.5' }}
+            customStyle={{ margin: 0, minHeight: '100%', background: '#0a0a0a', fontSize: '12px', lineHeight: '1.5' }}
             showLineNumbers
             wrapLongLines
           >

src/app/components/ConfigEditor.tsx

@@ -44,7 +44,7 @@ export default function ConfigEditor({ text, onSave }: ConfigEditorProps) {
   };
 
   return (
-    <div className="flex flex-col h-full">
+    <div className="flex flex-col h-full bg-neutral-950">
       <div className="flex items-center gap-2 px-3 py-1.5 bg-neutral-900 border-b border-neutral-700 flex-shrink-0 text-xs">
         <button
           onClick={addRow}

src/app/components/HexEditor.tsx

@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useReducer, useRef, useState } from 'react';
 import { Eye, Pencil, Redo2, Save, Search, Undo2, X } from 'lucide-react';
 
+const BYTES_PER_ROW = 16;
 const ROW_HEIGHT    = 20; // px — matches leading-5 at Tailwind's 16px base
 const CHUNK_ROWS    = 256; // virtual-scroll overscan: render prev+curr+next windows
 
@@ -74,25 +75,12 @@ export default function HexEditor({ data, readOnly = false, onSave }: HexEditorP
   const [searchType, setSearchType] = useState<'text' | 'hex'>('text');
   const [matchIdx, setMatchIdx]     = useState(-1);
 
-  // Responsive columns
-  const [bytesPerRow, setBytesPerRow] = useState(8);
-
   // Virtual scroll
   const scrollRef  = useRef<HTMLDivElement>(null);
   const searchRef  = useRef<HTMLInputElement>(null);
   const [scrollTop, setScrollTop] = useState(0);
 
-  useEffect(() => {
+  const totalRows       = Math.ceil(current.length / BYTES_PER_ROW);
-    const el = scrollRef.current;
-    if (!el) return;
-    const update = (w: number) => setBytesPerRow(w >= 600 ? 16 : 8);
-    const obs = new ResizeObserver(entries => update(entries[0].contentRect.width));
-    obs.observe(el);
-    update(el.clientWidth);
-    return () => obs.disconnect();
-  }, []);
-
-  const totalRows       = Math.ceil(current.length / bytesPerRow);
   const firstRenderRow  = Math.max(0, Math.floor(scrollTop / ROW_HEIGHT) - CHUNK_ROWS);
   const lastRenderRow   = Math.min(totalRows, firstRenderRow + CHUNK_ROWS * 3);
   const paddingTop      = firstRenderRow * ROW_HEIGHT;
@@ -120,7 +108,7 @@ export default function HexEditor({ data, readOnly = false, onSave }: HexEditorP
   // Scroll cursor row into view (programmatic, works with virtual scroll)
   useEffect(() => {
     if (cursor < 0) return;
-    const row    = Math.floor(cursor / bytesPerRow);
+    const row    = Math.floor(cursor / BYTES_PER_ROW);
     const rowTop = row * ROW_HEIGHT + 12; // 12 = top padding equivalent
     const el = scrollRef.current;
     if (!el) return;
@@ -129,7 +117,7 @@ export default function HexEditor({ data, readOnly = false, onSave }: HexEditorP
     } else if (rowTop + ROW_HEIGHT > el.scrollTop + el.clientHeight) {
       el.scrollTop = rowTop + ROW_HEIGHT - el.clientHeight;
     }
-  }, [cursor, bytesPerRow]);
+  }, [cursor]);
 
   const pushByte = useCallback((offset: number, value: number) => {
     const next = current.slice();
@@ -178,10 +166,10 @@ export default function HexEditor({ data, readOnly = false, onSave }: HexEditorP
     const len = current.length;
     if (e.key === 'ArrowRight') { e.preventDefault(); setNibble(0); setCursor(c => Math.min(c < 0 ? 0 : c + 1, len - 1)); return; }
     if (e.key === 'ArrowLeft')  { e.preventDefault(); setNibble(0); setCursor(c => c <= 0 ? 0 : c - 1); return; }
-    if (e.key === 'ArrowDown')  { e.preventDefault(); setCursor(c => Math.min(c < 0 ? 0 : c + bytesPerRow, len - 1)); return; }
+    if (e.key === 'ArrowDown')  { e.preventDefault(); setCursor(c => Math.min(c < 0 ? 0 : c + BYTES_PER_ROW, len - 1)); return; }
-    if (e.key === 'ArrowUp')    { e.preventDefault(); setCursor(c => c < 0 ? 0 : Math.max(c - bytesPerRow, 0)); return; }
+    if (e.key === 'ArrowUp')    { e.preventDefault(); setCursor(c => c < 0 ? 0 : Math.max(c - BYTES_PER_ROW, 0)); return; }
-    if (e.key === 'Home')       { e.preventDefault(); setCursor(c => Math.floor(Math.max(c, 0) / bytesPerRow) * bytesPerRow); return; }
+    if (e.key === 'Home')       { e.preventDefault(); setCursor(c => Math.floor(Math.max(c, 0) / BYTES_PER_ROW) * BYTES_PER_ROW); return; }
-    if (e.key === 'End')        { e.preventDefault(); setCursor(c => Math.min(Math.ceil((Math.max(c, 0) + 1) / bytesPerRow) * bytesPerRow - 1, len - 1)); return; }
+    if (e.key === 'End')        { e.preventDefault(); setCursor(c => Math.min(Math.ceil((Math.max(c, 0) + 1) / BYTES_PER_ROW) * BYTES_PER_ROW - 1, len - 1)); return; }
 
     if (!editMode || cursor < 0) return;
 
@@ -217,7 +205,7 @@ export default function HexEditor({ data, readOnly = false, onSave }: HexEditorP
   if (curStart >= 0) { for (let i = 0; i < needleLen; i++) curMatchSet.add(curStart + i); }
 
   return (
-    <div className="flex flex-col h-full">
+    <div className="flex flex-col h-full bg-neutral-950">
 
       {/* ── Toolbar ── */}
       <div className="flex items-center gap-2 px-3 py-1.5 bg-neutral-900 border-b border-neutral-700 flex-shrink-0 text-xs">
@@ -318,18 +306,18 @@ export default function HexEditor({ data, readOnly = false, onSave }: HexEditorP
         <div className="px-3 font-mono text-xs leading-5 whitespace-nowrap">
           {Array.from({ length: lastRenderRow - firstRenderRow }, (_, i) => {
             const row  = firstRenderRow + i;
-            const base = row * bytesPerRow;
+            const base = row * BYTES_PER_ROW;
             return (
               <div key={row} className="flex items-center">
 
                 {/* Address */}
-                <span className="text-neutral-400 w-15 flex-shrink-0 select-none">
+                <span className="text-neutral-600 w-20 flex-shrink-0 select-none">
                   {base.toString(16).padStart(8, '0').toUpperCase()}
                 </span>
 
                 {/* Hex pane */}
-                <div className="flex sm:gap-0.5 mr-2">
+                <div className="flex mr-2">
-                  {Array.from({ length: bytesPerRow }, (_, col) => {
+                  {Array.from({ length: BYTES_PER_ROW }, (_, col) => {
                     const idx = base + col;
                     if (idx >= current.length) {
                       return <span key={col} className={`inline-block w-6 text-center${col === 8 ? ' ml-2' : ''}`} />;
@@ -361,7 +349,7 @@ export default function HexEditor({ data, readOnly = false, onSave }: HexEditorP
 
                 {/* ASCII pane */}
                 <div className="flex">
-                  {Array.from({ length: bytesPerRow }, (_, col) => {
+                  {Array.from({ length: BYTES_PER_ROW }, (_, col) => {
                     const idx = base + col;
                     if (idx >= current.length) return <span key={col} className="inline-block w-[9px]" />;
                     const byte       = current[idx];

src/app/components/MediaViewerEditor.tsx

@@ -108,8 +108,7 @@ function MarkdownViewer({ text }: { text: string }) {
 }
 
 const CM_THEME = EditorView.theme({
-  '&': { height: '100%', background: 'transparent' },
+  '&': { height: '100%', background: '#0a0a0a' },
-  '.cm-gutters': { background: 'transparent', borderRight: '1px solid rgba(255,255,255,0.08)' },
   '.cm-scroller': { overflow: 'auto', fontFamily: 'ui-monospace,monospace', fontSize: '12px', lineHeight: '1.5' },
   '.cm-content': { padding: '12px 0' },
   '.cm-focused': { outline: 'none' },
@@ -214,12 +213,7 @@ export default function MediaViewerEditor({
         </button>
       </div>
 
-      <div className="flex-1 overflow-hidden bg-[#0a0a0a] relative z-0">
+      <div className="flex-1 overflow-hidden bg-neutral-950">
-        <div
-          className="absolute inset-0 pointer-events-none opacity-15"
-          style={{ zIndex: -1, backgroundImage: 'url(assets/icon.svg)', backgroundRepeat: 'repeat', backgroundSize: '64px 64px' }}
-          aria-hidden="true"
-        />
         {loading && (
           <div className="h-full flex items-center justify-center gap-2 text-neutral-400">
             <Loader2 className="w-5 h-5 animate-spin" /> Loading…
@@ -231,7 +225,7 @@ export default function MediaViewerEditor({
           </div>
         )}
         {!loading && mode === 'hex' && hexData && (
-          <HexEditor key={entry.path} data={hexData} onSave={d => onSave(d)} />
+          <HexEditor key={entry.path} data={hexData} onSave={d => void onSave(d)} />
         )}
         {!loading && mode === 'markdown' && text !== null && (
           <MarkdownEditor key={entry.path} text={text} onSave={s => onSave(s)} />
@@ -251,7 +245,7 @@ export default function MediaViewerEditor({
             onSave={s => onSave(s)}
           />
         )}
+      </div>
     </div>
-  </div>
   );
 }

src/app/components/SerialConsolePage.tsx

@@ -13,9 +13,13 @@ export default function SerialConsolePage({ onBack }: Props) {
   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
+  const sendRef = useRef(send);
+  useEffect(() => { sendRef.current = send; }, [send]);
+
+  // Initialize xterm once on mount
   useEffect(() => {
     const el = containerRef.current;
     if (!el) return;
@@ -24,7 +28,12 @@ export default function SerialConsolePage({ onBack }: Props) {
       cursorBlink: true,
       fontSize: 14,
       fontFamily: '"Cascadia Code","Fira Code",Menlo,Monaco,"Courier New",monospace',
-      theme: { background: '#0a0a0a', foreground: '#d4d4d4', cursor: '#d4d4d4', selectionBackground: '#264f78' },
+      theme: {
+        background:          '#0a0a0a',
+        foreground:          '#d4d4d4',
+        cursor:              '#d4d4d4',
+        selectionBackground: '#264f78',
+      },
       scrollback: 5000,
       convertEol: true,
     });
@@ -36,29 +45,28 @@ export default function SerialConsolePage({ onBack }: Props) {
     termRef.current = term;
     fitRef.current  = fit;
 
-    term.write('\x1b[2m── Meatloaf Serial Console ──\x1b[0m\r\n\r\n');
+    term.writeln('\x1b[2m── Meatloaf Serial Console ──\x1b[0m');
+    term.writeln('');
 
-    term.onData(data => {
+    term.onData((data) => {
-      for (const ch of data) {
+      for (const char of data) {
-        if (ch === '\r' || ch === '\n') {
+        if (char === '\r' || char === '\n') {
-          const line = lineBuffer.current;
+          const line = lineBuffer.current + '\r';
           lineBuffer.current = '';
           term.write('\r\n');
-          if (line) {
+          echoQueue.current.push(line);
-            echoQueue.current.push(line);
+          sendRef.current(line);
-            send(line);
+        } else if (char === '\x7f' || char === '\b') {
-          }
-        } else if (ch === '\x7f' || ch === '\b') {
           if (lineBuffer.current.length > 0) {
             lineBuffer.current = lineBuffer.current.slice(0, -1);
             term.write('\b \b');
           }
-        } else if (ch === '\x03') {
+        } else if (char === '\x03') {
           lineBuffer.current = '';
           term.write('^C\r\n');
-        } else if (ch >= ' ') {
+        } else if (char >= ' ') {
-          lineBuffer.current += ch;
+          lineBuffer.current += char;
-          term.write(ch);
+          term.write(char);
         }
       }
     });
@@ -74,19 +82,21 @@ export default function SerialConsolePage({ onBack }: Props) {
     };
   }, []);
 
+  // Forward all incoming WS messages to the terminal, suppressing our own echoes
   useEffect(() => {
-    return subscribe((msg: string) => {
+    return subscribe((msg) => {
-      const term = termRef.current;
-      if (!term) return;
       const idx = echoQueue.current.indexOf(msg);
-      if (idx !== -1) { echoQueue.current.splice(idx, 1); return; }
+      if (idx !== -1) {
-      term.write(msg.endsWith('\n') ? msg : msg + '\r\n');
+        echoQueue.current.splice(idx, 1);
+        return;
+      }
+      termRef.current?.write(msg);
     });
   }, [subscribe]);
 
   const statusColor =
-    status === 'connected'    ? 'text-green-400' :
+    status === 'connected'  ? 'text-green-400' :
-    status === 'connecting'   ? 'text-amber-400' : 'text-neutral-500';
+    status === 'connecting' ? 'text-amber-400' : 'text-neutral-500';
 
   const statusLabel =
     status === 'connected'  ? 'Connected'   :
@@ -95,6 +105,7 @@ export default function SerialConsolePage({ onBack }: Props) {
   return (
     <div className="fixed inset-0 bg-[#0a0a0a] z-40 flex flex-col">
 
+      {/* Header */}
       <div
         className="flex-none flex items-center gap-2 px-3 py-2 bg-neutral-900 border-b border-neutral-800"
         style={{ paddingTop: 'max(0.5rem, env(safe-area-inset-top))' }}
@@ -102,6 +113,7 @@ export default function SerialConsolePage({ onBack }: Props) {
         <button
           onClick={onBack}
           className="p-1.5 rounded hover:bg-neutral-800 text-neutral-400 hover:text-white transition"
+          title="Back"
         >
           <ChevronLeft className="w-5 h-5" />
         </button>
@@ -117,12 +129,13 @@ export default function SerialConsolePage({ onBack }: Props) {
         <button
           onClick={() => termRef.current?.clear()}
           className="p-1.5 rounded hover:bg-neutral-800 text-neutral-400 hover:text-neutral-200 transition"
-          title="Clear"
+          title="Clear terminal"
         >
           <RotateCcw className="w-4 h-4" />
         </button>
       </div>
 
+      {/* Terminal */}
       <div
         className="flex-1 min-h-0 relative overflow-hidden"
         style={{ paddingBottom: 'env(safe-area-inset-bottom)' }}

src/app/components/ui/lazy-loader.tsx

@@ -1,38 +0,0 @@
-import { useEffect, useState } from 'react';
-import { Loader2 } from 'lucide-react';
-
-export function LazyLoader() {
-  const [pct, setPct] = useState(0);
-
-  useEffect(() => {
-    const steps: [number, number][] = [
-      [80,   30],
-      [400,  60],
-      [1200, 80],
-      [2500, 92],
-    ];
-    const timers = steps.map(([delay, val]) => setTimeout(() => setPct(val), delay));
-    return () => timers.forEach(clearTimeout);
-  }, []);
-
-  const duration =
-    pct <=  30 ? '150ms' :
-    pct <=  60 ? '500ms' :
-    pct <=  80 ? '1000ms' : '1500ms';
-
-  return (
-    <div className="fixed inset-0 bg-neutral-950 z-40 flex flex-col items-center justify-center">
-      <div className="absolute top-0 left-0 right-0 h-[2px] bg-neutral-800 overflow-hidden">
-        <div
-          className="h-full bg-blue-500 transition-[width] ease-out"
-          style={{ width: `${pct}%`, transitionDuration: duration }}
-        />
-      </div>
-
-      <div className="flex flex-col items-center gap-3 text-neutral-600">
-        <Loader2 className="w-5 h-5 animate-spin" />
-        <span className="text-xs tracking-wide">Loading…</span>
-      </div>
-    </div>
-  );
-}