feat(HexEditor): implement responsive bytes per row for improved layout adaptability

style(HexEditor): remove background color for a cleaner look
style(ConfigEditor): remove background color for consistency

src/app/App.tsx

@@ -13,6 +13,7 @@ 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
@@ -47,13 +48,6 @@ 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');
@@ -314,7 +308,7 @@ function AppPage({ title, onBack }: { title: string; onBack: () => void }) {
       </header>
 
       <main className="flex-1 overflow-y-auto">
-        <Suspense fallback={<PageLoader />}>
+        <Suspense fallback={<LazyLoader />}>
           {pages[currentPage]}
         </Suspense>
       </main>

src/app/components/CodeEditor.tsx

@@ -26,7 +26,8 @@ interface CodeEditorProps {
 }
 
 const cmTheme = EditorView.theme({
-  '&': { height: '100%', background: '#0a0a0a' },
+  '&': { height: '100%', background: 'transparent' },
+  '.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' },
@@ -100,7 +101,7 @@ export default function CodeEditor({ text, mode, syntaxHighlightLang, readOnly =
           <SyntaxHighlighter
             language={syntaxHighlightLang ?? syntaxLang[mode]}
             style={vscDarkPlus}
-            customStyle={{ margin: 0, minHeight: '100%', background: '#0a0a0a', fontSize: '12px', lineHeight: '1.5' }}
+            customStyle={{ margin: 0, minHeight: '100%', background: 'transparent', 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 bg-neutral-950">
+    <div className="flex flex-col h-full">
       <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,7 +1,6 @@
 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
 
@@ -75,12 +74,25 @@ 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);
 
-  const totalRows       = Math.ceil(current.length / BYTES_PER_ROW);
+  useEffect(() => {
+    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;
@@ -108,7 +120,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 / BYTES_PER_ROW);
+    const row    = Math.floor(cursor / bytesPerRow);
     const rowTop = row * ROW_HEIGHT + 12; // 12 = top padding equivalent
     const el = scrollRef.current;
     if (!el) return;
@@ -117,7 +129,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]);
+  }, [cursor, bytesPerRow]);
 
   const pushByte = useCallback((offset: number, value: number) => {
     const next = current.slice();
@@ -166,10 +178,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 + BYTES_PER_ROW, len - 1)); return; }
+    if (e.key === 'ArrowDown')  { e.preventDefault(); setCursor(c => Math.min(c < 0 ? 0 : c + bytesPerRow, len - 1)); return; }
-    if (e.key === 'ArrowUp')    { e.preventDefault(); setCursor(c => c < 0 ? 0 : Math.max(c - BYTES_PER_ROW, 0)); return; }
+    if (e.key === 'ArrowUp')    { e.preventDefault(); setCursor(c => c < 0 ? 0 : Math.max(c - bytesPerRow, 0)); 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 === 'Home')       { e.preventDefault(); setCursor(c => Math.floor(Math.max(c, 0) / bytesPerRow) * bytesPerRow); 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 (e.key === 'End')        { e.preventDefault(); setCursor(c => Math.min(Math.ceil((Math.max(c, 0) + 1) / bytesPerRow) * bytesPerRow - 1, len - 1)); return; }
 
     if (!editMode || cursor < 0) return;
 
@@ -205,7 +217,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 bg-neutral-950">
+    <div className="flex flex-col h-full">
 
       {/* ── 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">
@@ -306,18 +318,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 * BYTES_PER_ROW;
+            const base = row * bytesPerRow;
             return (
               <div key={row} className="flex items-center">
 
                 {/* Address */}
-                <span className="text-neutral-600 w-20 flex-shrink-0 select-none">
+                <span className="text-neutral-400 w-15 flex-shrink-0 select-none">
                   {base.toString(16).padStart(8, '0').toUpperCase()}
                 </span>
 
                 {/* Hex pane */}
-                <div className="flex mr-2">
+                <div className="flex sm:gap-0.5 mr-2">
-                  {Array.from({ length: BYTES_PER_ROW }, (_, col) => {
+                  {Array.from({ length: bytesPerRow }, (_, col) => {
                     const idx = base + col;
                     if (idx >= current.length) {
                       return <span key={col} className={`inline-block w-6 text-center${col === 8 ? ' ml-2' : ''}`} />;
@@ -349,7 +361,7 @@ export default function HexEditor({ data, readOnly = false, onSave }: HexEditorP
 
                 {/* ASCII pane */}
                 <div className="flex">
-                  {Array.from({ length: BYTES_PER_ROW }, (_, col) => {
+                  {Array.from({ length: bytesPerRow }, (_, 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,7 +108,8 @@ function MarkdownViewer({ text }: { text: string }) {
 }
 
 const CM_THEME = EditorView.theme({
-  '&': { height: '100%', background: '#0a0a0a' },
+  '&': { height: '100%', background: 'transparent' },
+  '.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' },
@@ -213,7 +214,12 @@ export default function MediaViewerEditor({
         </button>
       </div>
 
-      <div className="flex-1 overflow-hidden bg-neutral-950">
+      <div className="flex-1 overflow-hidden bg-[#0a0a0a] relative z-0">
+        <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…
@@ -225,7 +231,7 @@ export default function MediaViewerEditor({
           </div>
         )}
         {!loading && mode === 'hex' && hexData && (
-          <HexEditor key={entry.path} data={hexData} onSave={d => void onSave(d)} />
+          <HexEditor key={entry.path} data={hexData} onSave={d => onSave(d)} />
         )}
         {!loading && mode === 'markdown' && text !== null && (
           <MarkdownEditor key={entry.path} text={text} onSave={s => onSave(s)} />
@@ -245,7 +251,7 @@ export default function MediaViewerEditor({
             onSave={s => onSave(s)}
           />
         )}
-      </div>
     </div>
+  </div>
   );
 }

src/app/components/SerialConsolePage.tsx

@@ -13,13 +13,9 @@ 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;
@@ -28,12 +24,7 @@ export default function SerialConsolePage({ onBack }: Props) {
       cursorBlink: true,
       fontSize: 14,
       fontFamily: '"Cascadia Code","Fira Code",Menlo,Monaco,"Courier New",monospace',
-      theme: {
+      theme: { background: '#0a0a0a', foreground: '#d4d4d4', cursor: '#d4d4d4', selectionBackground: '#264f78' },
-        background:          '#0a0a0a',
-        foreground:          '#d4d4d4',
-        cursor:              '#d4d4d4',
-        selectionBackground: '#264f78',
-      },
       scrollback: 5000,
       convertEol: true,
     });
@@ -45,28 +36,29 @@ export default function SerialConsolePage({ onBack }: Props) {
     termRef.current = term;
     fitRef.current  = fit;
 
-    term.writeln('\x1b[2m── Meatloaf Serial Console ──\x1b[0m');
+    term.write('\x1b[2m── Meatloaf Serial Console ──\x1b[0m\r\n\r\n');
-    term.writeln('');
 
-    term.onData((data) => {
+    term.onData(data => {
-      for (const char of data) {
+      for (const ch of data) {
-        if (char === '\r' || char === '\n') {
+        if (ch === '\r' || ch === '\n') {
-          const line = lineBuffer.current + '\r';
+          const line = lineBuffer.current;
           lineBuffer.current = '';
           term.write('\r\n');
-          echoQueue.current.push(line);
+          if (line) {
-          sendRef.current(line);
+            echoQueue.current.push(line);
-        } else if (char === '\x7f' || char === '\b') {
+            send(line);
+          }
+        } else if (ch === '\x7f' || ch === '\b') {
           if (lineBuffer.current.length > 0) {
             lineBuffer.current = lineBuffer.current.slice(0, -1);
             term.write('\b \b');
           }
-        } else if (char === '\x03') {
+        } else if (ch === '\x03') {
           lineBuffer.current = '';
           term.write('^C\r\n');
-        } else if (char >= ' ') {
+        } else if (ch >= ' ') {
-          lineBuffer.current += char;
+          lineBuffer.current += ch;
-          term.write(char);
+          term.write(ch);
         }
       }
     });
@@ -82,21 +74,19 @@ export default function SerialConsolePage({ onBack }: Props) {
     };
   }, []);
 
-  // Forward all incoming WS messages to the terminal, suppressing our own echoes
   useEffect(() => {
-    return subscribe((msg) => {
+    return subscribe((msg: string) => {
+      const term = termRef.current;
+      if (!term) return;
       const idx = echoQueue.current.indexOf(msg);
-      if (idx !== -1) {
+      if (idx !== -1) { echoQueue.current.splice(idx, 1); return; }
-        echoQueue.current.splice(idx, 1);
+      term.write(msg.endsWith('\n') ? msg : msg + '\r\n');
-        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'   :
@@ -105,7 +95,6 @@ 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))' }}
@@ -113,7 +102,6 @@ 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>
@@ -129,13 +117,12 @@ 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 terminal"
+          title="Clear"
         >
           <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

@@ -0,0 +1,38 @@
+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>
+  );
+}