4bnode 4.1.5 → 4.1.6

package/app-1/.4bnode/assets/js/pages/ApiTesterPage.js

@@ -1,1879 +0,0 @@
-import React, { useState, useEffect, useRef } from "react";
-import { motion, AnimatePresence } from "framer-motion";
-import { io as socketIoConnect } from "socket.io-client";
-import { LuChevronLeft, LuCircleDot, LuCopy, LuImport, LuLoader, LuPencil, LuPlugZap, LuPlus, LuRadio, LuSave, LuSend, LuShare2, LuTrash2, LuWifi, LuWifiOff } from "react-icons/lu";
-import { html, api, Icons, copyToClipboard } from "../lib.js";
-import { useApp } from "../context.js";
-import { Modal } from "../components/Modal.js";
-
-function SocketIOTester({ selectedSaved, isSaved, loadedTest, onSaveTest, onSaveLog }) {
-  const { toast } = useApp();
-  const [sioUrl, setSioUrl] = useState('http://localhost:3000');
-  const [sioConnected, setSioConnected] = useState(false);
-  const [sioSocket, setSioSocket] = useState(null);
-  const [sioEvent, setSioEvent] = useState('');
-  const [sioData, setSioData] = useState('');
-  const [sioListen, setSioListen] = useState('');
-  const [sioListeners, setSioListeners] = useState([]);
-  const [sioLog, setSioLog] = useState([]);
-  const logRef = useRef(null);
-
-  function addLog(dir, msg) {
-    const ts = new Date().toLocaleTimeString();
-    setSioLog(prev => [...prev, { dir, msg, ts, id: Date.now() + Math.random() }]);
-  }
-
-  useEffect(() => {
-    if (logRef.current) logRef.current.scrollTop = logRef.current.scrollHeight;
-  }, [sioLog]);
-
-  useEffect(() => {
-    return () => { if (sioSocket) sioSocket.disconnect(); };
-  }, []);
-
-  function connect() {
-    if (sioSocket) { sioSocket.disconnect(); setSioSocket(null); }
-    try {
-      const socket = socketIoConnect(sioUrl, { transports: ['websocket', 'polling'] });
-      socket.on('connect', () => {
-        setSioConnected(true);
-        addLog('system', 'Connected (id: ' + socket.id + ')');
-      });
-      socket.on('disconnect', (reason) => {
-        setSioConnected(false);
-        addLog('system', 'Disconnected: ' + reason);
-      });
-      socket.on('connect_error', (err) => {
-        addLog('system', 'Connection error: ' + err.message);
-      });
-      setSioSocket(socket);
-    } catch (err) {
-      addLog('system', 'Error: ' + err.message);
-    }
-  }
-
-  function disconnect() {
-    if (sioSocket) {
-      sioSocket.disconnect();
-      setSioSocket(null);
-      setSioConnected(false);
-    }
-  }
-
-  function emitEvent() {
-    if (!sioSocket || !sioEvent.trim()) return;
-    let parsed = sioData.trim();
-    try { parsed = JSON.parse(parsed); } catch {}
-    sioSocket.emit(sioEvent, parsed);
-    addLog('sent', sioEvent + ': ' + (typeof parsed === 'object' ? JSON.stringify(parsed) : parsed));
-  }
-
-  function addListener() {
-    if (!sioSocket || !sioListen.trim() || sioListeners.includes(sioListen.trim())) return;
-    const ev = sioListen.trim();
-    sioSocket.on(ev, (data) => {
-      const display = typeof data === 'object' ? JSON.stringify(data, null, 2) : String(data);
-      addLog('received', ev + ': ' + display);
-    });
-    setSioListeners(prev => [...prev, ev]);
-    addLog('system', 'Listening on "' + ev + '"');
-    setSioListen('');
-  }
-
-  function removeListener(ev) {
-    if (sioSocket) sioSocket.off(ev);
-    setSioListeners(prev => prev.filter(e => e !== ev));
-  }
-
-  useEffect(() => {
-    if (loadedTest && loadedTest.type === 'socketio') {
-      setSioUrl(loadedTest.url || 'http://localhost:3000');
-      if (loadedTest.event) setSioEvent(loadedTest.event);
-      if (loadedTest.data) setSioData(loadedTest.data);
-    }
-  }, [loadedTest?.id]);
-
-  function saveSession() {
-    const name = prompt('Name this Socket.IO test:');
-    if (!name?.trim()) return;
-    onSaveTest({
-      name: name.trim(),
-      type: 'socketio',
-      url: sioUrl,
-      event: sioEvent,
-      data: sioData,
-      listeners: [...sioListeners],
-    });
-  }
-
-  function saveLogEntry(entry) {
-    if (!selectedSaved || !onSaveLog) return;
-    onSaveLog({
-      dir: entry.dir,
-      label: (entry.dir === 'sent' ? '↑ EMIT ' : entry.dir === 'received' ? '↓ EVENT ' : '● SYS ') + entry.msg.substring(0, 80),
-      body: entry.msg,
-      time: 0,
-    });
-  }
-
-  return html`<div>
-    <!-- Connection bar -->
-    <div className="api-tester-bar">
-      <input className="api-tester-url" placeholder="http://localhost:3000" value=${sioUrl}
-        onInput=${(e) => setSioUrl(e.target.value)}
-        onKeyDown=${(e) => { if (e.key === 'Enter') connect(); }} />
-      ${!sioConnected
-        ? html`<button className="api-tester-send" onClick=${connect}>
-            <${LuPlugZap} size=${14} /> Connect
-          </button>`
-        : html`<button className="api-tester-send" onClick=${disconnect} style=${{ background: 'var(--danger)' }}>
-            <${LuWifiOff} size=${14} /> Disconnect
-          </button>`}
-      ${!isSaved && onSaveTest && html`<button className="api-tester-send" onClick=${saveSession}
-        style=${{ background: 'transparent', border: '1px solid var(--border)', color: 'var(--text-primary)' }}>
-        <${LuSave} size=${14} /> Save
-      </button>`}
-    </div>
-
-    <div style=${{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '16px', marginBottom: '16px' }}>
-      <!-- Emit -->
-      <div className="card" style=${{ padding: 0, overflow: 'hidden' }}>
-        <div style=${{ padding: '10px 14px', borderBottom: '1px solid var(--border)', fontSize: '12px', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.5px', color: 'var(--text-muted)' }}>
-          Emit Event
-        </div>
-        <div style=${{ padding: '12px' }}>
-          <div className="flex gap-2 mb-3">
-            <input className="form-input" style=${{ flex: 1, fontSize: '12px' }} placeholder="Event name"
-              value=${sioEvent} onInput=${(e) => setSioEvent(e.target.value)}
-              onKeyDown=${(e) => { if (e.key === 'Enter') emitEvent(); }} />
-            <button className="btn btn-sm btn-primary" onClick=${emitEvent}
-              disabled=${!sioConnected || !sioEvent.trim()}>
-              <${LuSend} size=${12} /> Emit
-            </button>
-          </div>
-          <textarea className="api-tester-body-editor" style=${{ minHeight: '80px', fontSize: '11px' }}
-            placeholder='{"key": "value"} or plain text'
-            value=${sioData} onInput=${(e) => setSioData(e.target.value)} spellcheck=${false} />
-        </div>
-      </div>
-
-      <!-- Listeners -->
-      <div className="card" style=${{ padding: 0, overflow: 'hidden' }}>
-        <div style=${{ padding: '10px 14px', borderBottom: '1px solid var(--border)', fontSize: '12px', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.5px', color: 'var(--text-muted)' }}>
-          Event Listeners
-        </div>
-        <div style=${{ padding: '12px' }}>
-          <div className="flex gap-2 mb-3">
-            <input className="form-input" style=${{ flex: 1, fontSize: '12px' }} placeholder="Event name to listen"
-              value=${sioListen} onInput=${(e) => setSioListen(e.target.value)}
-              onKeyDown=${(e) => { if (e.key === 'Enter') addListener(); }} />
-            <button className="btn btn-sm btn-ghost" onClick=${addListener}
-              disabled=${!sioConnected || !sioListen.trim()}>
-              <${LuPlus} size=${12} /> Listen
-            </button>
-          </div>
-          ${sioListeners.length === 0 && html`<div style=${{ fontSize: '12px', color: 'var(--text-muted)', padding: '8px 0' }}>No listeners yet</div>`}
-          <div className="flex gap-1" style=${{ flexWrap: 'wrap' }}>
-            ${sioListeners.map(ev => html`<span key=${ev} style=${{ display: 'inline-flex', alignItems: 'center', gap: '4px', padding: '3px 8px', borderRadius: '4px', background: 'rgba(52,211,153,0.1)', fontSize: '11px', color: 'var(--success)' }}>
-              <${LuCircleDot} size=${10} /> ${ev}
-              <button style=${{ border: 'none', background: 'none', cursor: 'pointer', color: 'var(--text-muted)', padding: '0 2px', fontSize: '12px' }}
-                onClick=${() => removeListener(ev)}>×</button>
-            </span>`)}
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- Log -->
-    <div className="card" style=${{ padding: 0, overflow: 'hidden' }}>
-      <div style=${{ padding: '10px 14px', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-        <div className="flex items-center gap-3">
-          <span style=${{ fontSize: '12px', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.5px', color: 'var(--text-muted)' }}>
-            Event Log
-          </span>
-          <span className="ws-connected">
-            <span className=${`dot ${sioConnected ? 'on' : 'off'}`} />
-            ${sioConnected ? 'Connected' : 'Disconnected'}
-          </span>
-        </div>
-        <button className="btn btn-ghost btn-sm" onClick=${() => setSioLog([])} style=${{ fontSize: '11px' }}>Clear</button>
-      </div>
-      <div className="ws-log" ref=${logRef}>
-        ${sioLog.length === 0 && html`<div style=${{ padding: '30px', textAlign: 'center', color: 'var(--text-muted)', fontSize: '12px' }}>Connect to start logging events</div>`}
-        ${sioLog.map(e => html`<div key=${e.id} className="ws-log-entry">
-          <span className=${`dir ${e.dir}`}>${e.dir === 'sent' ? '↑ EMIT' : e.dir === 'received' ? '↓ EVENT' : '● SYS'}</span>
-          <span className="msg">${e.msg}</span>
-          <span className="ts">${e.ts}</span>
-          ${selectedSaved && onSaveLog && html`<button className="btn btn-ghost" style=${{ padding: '2px 4px', opacity: 0.4, marginLeft: '4px', flexShrink: 0 }}
-            onClick=${() => saveLogEntry(e)} title="Save log entry">
-            <${LuSave} size=${10} />
-          </button>`}
-        </div>`)}
-      </div>
-    </div>
-  </div>`;
-}
-
-// ── WebSocket Tester Component ──
-function WebSocketTester({ selectedSaved, isSaved, loadedTest, onSaveTest, onSaveLog }) {
-  const { toast } = useApp();
-  const [wsUrl, setWsUrl] = useState('ws://localhost:3000');
-  const [wsConnected, setWsConnected] = useState(false);
-  const [wsRef, setWsRef] = useState(null);
-  const [wsMessage, setWsMessage] = useState('');
-  const [wsLog, setWsLog] = useState([]);
-  const logRef = useRef(null);
-
-  function addLog(dir, msg) {
-    const ts = new Date().toLocaleTimeString();
-    setWsLog(prev => [...prev, { dir, msg, ts, id: Date.now() + Math.random() }]);
-  }
-
-  useEffect(() => {
-    if (logRef.current) logRef.current.scrollTop = logRef.current.scrollHeight;
-  }, [wsLog]);
-
-  useEffect(() => {
-    return () => { if (wsRef) wsRef.close(); };
-  }, []);
-
-  function connect() {
-    if (wsRef) { wsRef.close(); setWsRef(null); }
-    try {
-      const ws = new WebSocket(wsUrl);
-      ws.onopen = () => {
-        setWsConnected(true);
-        addLog('system', 'Connected to ' + wsUrl);
-      };
-      ws.onclose = (e) => {
-        setWsConnected(false);
-        addLog('system', 'Disconnected (code: ' + e.code + ', reason: ' + (e.reason || 'none') + ')');
-      };
-      ws.onerror = () => {
-        addLog('system', 'Connection error');
-      };
-      ws.onmessage = (e) => {
-        let display = e.data;
-        try {
-          const parsed = JSON.parse(e.data);
-          display = JSON.stringify(parsed, null, 2);
-        } catch {}
-        addLog('received', display);
-      };
-      setWsRef(ws);
-    } catch (err) {
-      addLog('system', 'Error: ' + err.message);
-    }
-  }
-
-  function disconnect() {
-    if (wsRef) {
-      wsRef.close();
-      setWsRef(null);
-      setWsConnected(false);
-    }
-  }
-
-  function sendMessage() {
-    if (!wsRef || !wsMessage.trim()) return;
-    wsRef.send(wsMessage);
-    addLog('sent', wsMessage);
-    setWsMessage('');
-  }
-
-  useEffect(() => {
-    if (loadedTest && loadedTest.type === 'websocket') {
-      setWsUrl(loadedTest.url || 'ws://localhost:3000');
-      if (loadedTest.message) setWsMessage(loadedTest.message);
-    }
-  }, [loadedTest?.id]);
-
-  function saveSession() {
-    const name = prompt('Name this WebSocket test:');
-    if (!name?.trim()) return;
-    onSaveTest({
-      name: name.trim(),
-      type: 'websocket',
-      url: wsUrl,
-      message: wsMessage,
-    });
-  }
-
-  function saveLogEntry(entry) {
-    if (!selectedSaved || !onSaveLog) return;
-    onSaveLog({
-      dir: entry.dir,
-      label: (entry.dir === 'sent' ? '↑ SENT ' : entry.dir === 'received' ? '↓ RECV ' : '● SYS ') + entry.msg.substring(0, 80),
-      body: entry.msg,
-      time: 0,
-    });
-  }
-
-  return html`<div>
-    <!-- Connection bar -->
-    <div className="api-tester-bar">
-      <input className="api-tester-url" placeholder="ws://localhost:3000" value=${wsUrl}
-        onInput=${(e) => setWsUrl(e.target.value)}
-        onKeyDown=${(e) => { if (e.key === 'Enter') connect(); }} />
-      ${!wsConnected
-        ? html`<button className="api-tester-send" onClick=${connect}>
-            <${LuPlugZap} size=${14} /> Connect
-          </button>`
-        : html`<button className="api-tester-send" onClick=${disconnect} style=${{ background: 'var(--danger)' }}>
-            <${LuWifiOff} size=${14} /> Disconnect
-          </button>`}
-      ${!isSaved && onSaveTest && html`<button className="api-tester-send" onClick=${saveSession}
-        style=${{ background: 'transparent', border: '1px solid var(--border)', color: 'var(--text-primary)' }}>
-        <${LuSave} size=${14} /> Save
-      </button>`}
-    </div>
-
-    <!-- Send message -->
-    <div className="card" style=${{ padding: 0, overflow: 'hidden', marginBottom: '16px' }}>
-      <div style=${{ padding: '10px 14px', borderBottom: '1px solid var(--border)', fontSize: '12px', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.5px', color: 'var(--text-muted)' }}>
-        Send Message
-      </div>
-      <div style=${{ padding: '12px', display: 'flex', gap: '8px' }}>
-        <textarea className="api-tester-body-editor" style=${{ minHeight: '60px', fontSize: '12px', flex: 1 }}
-          placeholder='{"type": "ping"} or plain text'
-          value=${wsMessage} onInput=${(e) => setWsMessage(e.target.value)}
-          onKeyDown=${(e) => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sendMessage(); } }}
-          spellcheck=${false} />
-      </div>
-      <div style=${{ padding: '0 12px 12px', display: 'flex', justifyContent: 'flex-end' }}>
-        <button className="btn btn-sm btn-primary" onClick=${sendMessage}
-          disabled=${!wsConnected || !wsMessage.trim()}>
-          <${LuSend} size=${12} /> Send
-        </button>
-      </div>
-    </div>
-
-    <!-- Log -->
-    <div className="card" style=${{ padding: 0, overflow: 'hidden' }}>
-      <div style=${{ padding: '10px 14px', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-        <div className="flex items-center gap-3">
-          <span style=${{ fontSize: '12px', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.5px', color: 'var(--text-muted)' }}>
-            Message Log
-          </span>
-          <span className="ws-connected">
-            <span className=${`dot ${wsConnected ? 'on' : 'off'}`} />
-            ${wsConnected ? 'Connected' : 'Disconnected'}
-          </span>
-        </div>
-        <button className="btn btn-ghost btn-sm" onClick=${() => setWsLog([])} style=${{ fontSize: '11px' }}>Clear</button>
-      </div>
-      <div className="ws-log" ref=${logRef}>
-        ${wsLog.length === 0 && html`<div style=${{ padding: '30px', textAlign: 'center', color: 'var(--text-muted)', fontSize: '12px' }}>Connect to start logging messages</div>`}
-        ${wsLog.map(e => html`<div key=${e.id} className="ws-log-entry">
-          <span className=${`dir ${e.dir}`}>${e.dir === 'sent' ? '↑ SENT' : e.dir === 'received' ? '↓ RECV' : '● SYS'}</span>
-          <span className="msg">${e.msg}</span>
-          <span className="ts">${e.ts}</span>
-          ${selectedSaved && onSaveLog && html`<button className="btn btn-ghost" style=${{ padding: '2px 4px', opacity: 0.4, marginLeft: '4px', flexShrink: 0 }}
-            onClick=${() => saveLogEntry(e)} title="Save log entry">
-            <${LuSave} size=${10} />
-          </button>`}
-        </div>`)}
-      </div>
-    </div>
-  </div>`;
-}
-
-export function SavedResponseDetail({ resp, parentTest, onBack, onUpdate }) {
-  const isSocketResp = resp.dir;
-  const [editLabel, setEditLabel] = useState(resp.label);
-  const [editReqBody, setEditReqBody] = useState(() => {
-    if (!resp.requestBody?.trim()) return '';
-    try { return JSON.stringify(JSON.parse(resp.requestBody), null, 2); } catch { return resp.requestBody; }
-  });
-  const [editRespBody, setEditRespBody] = useState(() => {
-    if (!resp.body) return '';
-    try { return JSON.stringify(JSON.parse(resp.body), null, 2); } catch { return resp.body; }
-  });
-  const [editing, setEditing] = useState(false);
-
-  const rStatusClass = 's' + Math.floor((resp.status || 0) / 100) + 'xx';
-  const hasChanges = editLabel !== resp.label ||
-    editReqBody !== ((() => { try { return JSON.stringify(JSON.parse(resp.requestBody || ''), null, 2); } catch { return resp.requestBody || ''; } })()) ||
-    editRespBody !== ((() => { try { return JSON.stringify(JSON.parse(resp.body || ''), null, 2); } catch { return resp.body || ''; } })());
-
-  function save() {
-    onUpdate({
-      label: editLabel,
-      requestBody: editReqBody,
-      body: editRespBody,
-    });
-    setEditing(false);
-  }
-
-  return html`<div>
-    <div className="flex items-center gap-2 mb-3">
-      <button className="btn btn-ghost btn-sm" onClick=${onBack} style=${{ fontSize: '11px' }}>
-        <${LuChevronLeft} size=${14} /> Back
-      </button>
-      ${!editing
-        ? html`<span style=${{ fontSize: '13px', fontWeight: 600, flex: 1 }}>${resp.label}</span>`
-        : html`<input className="form-input" value=${editLabel} onInput=${(e) => setEditLabel(e.target.value)}
-            style=${{ fontSize: '13px', fontWeight: 600, flex: 1, padding: '4px 8px' }} />`}
-      ${!editing && html`<button className="btn btn-ghost btn-sm" onClick=${() => setEditing(true)} style=${{ fontSize: '11px' }}>
-        <${LuPencil} size=${12} /> Edit
-      </button>`}
-      ${editing && html`<div className="flex gap-2">
-        <button className="btn btn-ghost btn-sm" onClick=${() => setEditing(false)} style=${{ fontSize: '11px' }}>Cancel</button>
-        <button className="btn btn-sm btn-primary" onClick=${save} disabled=${!hasChanges} style=${{ fontSize: '11px' }}>
-          <${LuSave} size=${12} /> Update
-        </button>
-      </div>`}
-    </div>
-
-    ${!isSocketResp && html`<div>
-      <div className="card mb-4" style=${{ padding: 0, overflow: 'hidden' }}>
-        <div style=${{ padding: '10px 16px', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center', gap: '8px' }}>
-          <span style=${{ fontSize: '12px', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.5px', color: 'var(--text-muted)' }}>Request</span>
-          <span className=${`route-method ${(parentTest.method || 'GET').toLowerCase()}`} style=${{ fontSize: '10px', padding: '1px 6px' }}>${parentTest.method || 'GET'}</span>
-          <span style=${{ fontFamily: "'SF Mono', monospace", fontSize: '12px', color: 'var(--text-primary)' }}>${parentTest.url}</span>
-        </div>
-        ${(editReqBody?.trim() || editing) && html`<div style=${{ padding: editing ? '0' : '10px 16px' }}>
-          ${!editing && html`<div>
-            <div style=${{ padding: '0 0 6px', fontSize: '10px', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.3px', color: 'var(--text-muted)' }}>Body Sent</div>
-            <pre style=${{ margin: 0, fontFamily: "'SF Mono', monospace", fontSize: '12px', lineHeight: '1.5', color: 'var(--text-secondary)', whiteSpace: 'pre-wrap', wordBreak: 'break-word' }}>${editReqBody}</pre>
-          </div>`}
-          ${editing && html`<textarea className="api-tester-body-editor" value=${editReqBody}
-            onInput=${(e) => setEditReqBody(e.target.value)} spellcheck=${false}
-            style=${{ borderRadius: 0, border: 'none', borderTop: '1px solid var(--border)', minHeight: '100px' }} />`}
-        </div>`}
-      </div>
-      <div className="card" style=${{ padding: 0, overflow: 'hidden' }}>
-        <div style=${{ padding: '10px 16px', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center', gap: '12px' }}>
-          <span style=${{ fontSize: '12px', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.5px', color: 'var(--text-muted)' }}>Response</span>
-          <span className=${`api-tester-status ${rStatusClass}`}>${resp.status} ${resp.statusText}</span>
-          <span style=${{ fontSize: '11px', color: 'var(--text-muted)' }}>${resp.time}ms</span>
-        </div>
-        ${!editing && html`<div className="api-tester-response-body">${editRespBody || 'No response body'}</div>`}
-        ${editing && html`<textarea className="api-tester-body-editor" value=${editRespBody}
-          onInput=${(e) => setEditRespBody(e.target.value)} spellcheck=${false}
-          style=${{ borderRadius: 0, border: 'none', minHeight: '140px' }} />`}
-      </div>
-    </div>`}
-
-    ${isSocketResp && html`<div className="card" style=${{ padding: 0, overflow: 'hidden' }}>
-      <div style=${{ padding: '10px 16px', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center', gap: '8px' }}>
-        <span style=${{ fontSize: '12px', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.5px', color: 'var(--text-muted)' }}>
-          ${parentTest.type === 'socketio' ? 'Socket.IO' : 'WebSocket'} Log Entry
-        </span>
-        <span style=${{ fontSize: '10px', padding: '2px 6px', borderRadius: '4px', fontWeight: 700,
-          background: resp.dir === 'received' ? 'rgba(52,211,153,0.15)' : resp.dir === 'sent' ? 'rgba(245,158,11,0.15)' : 'rgba(148,163,184,0.15)',
-          color: resp.dir === 'received' ? '#34d399' : resp.dir === 'sent' ? '#f59e0b' : '#94a3b8' }}>
-          ${resp.dir === 'received' ? '↓ Received' : resp.dir === 'sent' ? '↑ Sent' : '● System'}
-        </span>
-      </div>
-      ${!editing && html`<div className="api-tester-response-body">${editRespBody}</div>`}
-      ${editing && html`<textarea className="api-tester-body-editor" value=${editRespBody}
-        onInput=${(e) => setEditRespBody(e.target.value)} spellcheck=${false}
-        style=${{ borderRadius: 0, border: 'none', minHeight: '140px' }} />`}
-    </div>`}
-  </div>`;
-}
-
-export function ApiTesterPage() {
-  const { data, toast, showConfirm } = useApp();
-  const [testerMode, setTesterMode] = useState('rest');
-  const [method, setMethod] = useState('GET');
-  const [url, setUrl] = useState('');
-  const [headers, setHeaders] = useState([
-    { key: 'Content-Type', value: 'application/json', id: 1 },
-  ]);
-  const [body, setBody] = useState('');
-  const bodyRef = useRef(null);
-  const [response, setResponse] = useState(null);
-  const [loading, setLoading] = useState(false);
-  const [activeTab, setActiveTab] = useState('body');
-  const [params, setParams] = useState([]);
-  const [savedTests, setSavedTests] = useState([]);
-  const [selectedSaved, setSelectedSaved] = useState(null);
-  const [showImport, setShowImport] = useState(false);
-  const [importRoutes, setImportRoutes] = useState([]);
-  const [importLoading, setImportLoading] = useState(false);
-  const [bodyError, setBodyError] = useState(null);
-  const [bodyType, setBodyType] = useState('json');
-  const [formFields, setFormFields] = useState([]);
-  const [responseTab, setResponseTab] = useState('body');
-  const [urlParams, setUrlParams] = useState([]);
-  const [savedResponses, setSavedResponses] = useState({}); // { testId: [{status, label, body, requestBody}] }
-  const [selectedResponse, setSelectedResponse] = useState(null); // { testId, respId }
-  const [expandedTests, setExpandedTests] = useState({});
-  const [routeEndpoints, setRouteEndpoints] = useState([]);
-  const [lastSharedAt, setLastSharedAt] = useState(null);
-  const [sharedSnapshot, setSharedSnapshot] = useState(null);
-
-  // Auto-grow the request-body textarea to fit its content (capped, then scrolls).
-  useEffect(() => {
-    const ta = bodyRef.current;
-    if (ta) { ta.style.height = 'auto'; ta.style.height = Math.min(ta.scrollHeight + 2, 600) + 'px'; }
-  }, [body, bodyType, activeTab]);
-
-  // ── Environments / variables + auth (persisted per-browser in localStorage) ──
-  const [variables, setVariables] = useState([]);
-  const [showVars, setShowVars] = useState(false);
-  const [autoToken, setAutoToken] = useState(true);
-  const [auth, setAuth] = useState({ type: 'none', token: '', username: '', password: '', apiKeyKey: 'x-api-key', apiKeyValue: '' });
-
-  useEffect(() => {
-    try {
-      const v = JSON.parse(localStorage.getItem('_4bnode_vars') || '[]');
-      if (Array.isArray(v)) setVariables(v);
-      const a = JSON.parse(localStorage.getItem('_4bnode_auth') || 'null');
-      if (a && typeof a === 'object') setAuth(prev => ({ ...prev, ...a }));
-      const at = localStorage.getItem('_4bnode_autotoken');
-      if (at !== null) setAutoToken(at === '1');
-    } catch {}
-  }, []);
-  useEffect(() => { try { localStorage.setItem('_4bnode_vars', JSON.stringify(variables)); } catch {} }, [variables]);
-  useEffect(() => { try { localStorage.setItem('_4bnode_auth', JSON.stringify(auth)); } catch {} }, [auth]);
-  useEffect(() => { try { localStorage.setItem('_4bnode_autotoken', autoToken ? '1' : '0'); } catch {} }, [autoToken]);
-
-  // Replace {{name}} tokens with variable values.
-  function subst(str) {
-    if (typeof str !== 'string' || str.indexOf('{{') === -1) return str;
-    return str.replace(/\{\{\s*([\w.-]+)\s*\}\}/g, (m, k) => {
-      const v = variables.find(x => (x.key || '').trim() === k);
-      return v ? v.value : m;
-    });
-  }
-  function setVar(key, value) {
-    setVariables(prev => {
-      const i = prev.findIndex(x => (x.key || '').trim() === key);
-      if (i === -1) return [...prev, { key, value, id: Date.now() }];
-      const next = prev.slice(); next[i] = { ...next[i], value }; return next;
-    });
-  }
-
-  // ── Request tabs (each tab holds a snapshot; live state = active tab's buffer) ──
-  const [tabs, setTabs] = useState([{ id: 1, snap: null }]);
-  const [activeTabId, setActiveTabId] = useState(1);
-
-  function captureSnap() {
-    return { method, url, headers, body, bodyType, params, urlParams, formFields, response, activeTab };
-  }
-  function loadSnap(s) {
-    // Only protect a restored request that actually has data; blank tabs should
-    // still auto-fill from a matching route when the user types a URL.
-    suppressAutofillRef.current = !!(s && s.url);
-    setMethod((s && s.method) || 'GET');
-    setUrl((s && s.url) || '');
-    setHeaders((s && s.headers) || [{ key: 'Content-Type', value: 'application/json', id: 1 }]);
-    setBody((s && s.body) || '');
-    setBodyType((s && s.bodyType) || 'json');
-    setParams((s && s.params) || []);
-    setUrlParams((s && s.urlParams) || []);
-    setFormFields((s && s.formFields) || []);
-    setResponse((s && s.response) || null);
-    setActiveTab((s && s.activeTab) || 'body');
-    setBodyError(null);
-    setSelectedSaved(null);
-    setSelectedResponse(null);
-  }
-  function switchTab(id) {
-    if (id === activeTabId) return;
-    const snap = captureSnap();
-    const target = tabs.find(t => t.id === id);
-    setTabs(prev => prev.map(t => t.id === activeTabId ? { ...t, snap } : t));
-    loadSnap(target && target.snap);
-    setActiveTabId(id);
-  }
-  function newTab() {
-    const snap = captureSnap();
-    const id = Math.max(0, ...tabs.map(t => t.id)) + 1;
-    setTabs(prev => [...prev.map(t => t.id === activeTabId ? { ...t, snap } : t), { id, snap: null }]);
-    loadSnap(null);
-    setActiveTabId(id);
-  }
-  function closeTab(id) {
-    const remaining = tabs.filter(t => t.id !== id);
-    if (remaining.length === 0) {
-      const nid = Math.max(0, ...tabs.map(t => t.id)) + 1;
-      setTabs([{ id: nid, snap: null }]);
-      loadSnap(null);
-      setActiveTabId(nid);
-      return;
-    }
-    setTabs(remaining);
-    if (id === activeTabId) {
-      const next = remaining[remaining.length - 1];
-      loadSnap(next.snap);
-      setActiveTabId(next.id);
-    }
-  }
-  function tabLabel(t) {
-    const s = t.id === activeTabId ? { method, url } : (t.snap || {});
-    if (!s.url) return 'New Request';
-    let path = s.url;
-    try { path = new URL(s.url).pathname || '/'; } catch {}
-    return (s.method || 'GET') + ' ' + path;
-  }
-
-  // ── Request history (persisted per-browser) ──
-  const [history, setHistory] = useState([]);
-  const [showHistory, setShowHistory] = useState(false);
-  useEffect(() => {
-    try { const h = JSON.parse(localStorage.getItem('_4bnode_history') || '[]'); if (Array.isArray(h)) setHistory(h); } catch {}
-  }, []);
-  function pushHistory(entry) {
-    setHistory(prev => {
-      const next = [entry, ...prev].slice(0, 50);
-      try { localStorage.setItem('_4bnode_history', JSON.stringify(next)); } catch {}
-      return next;
-    });
-  }
-  function clearHistory() {
-    setHistory([]);
-    try { localStorage.removeItem('_4bnode_history'); } catch {}
-  }
-  function loadHistory(h) {
-    setMethod(h.method);
-    setUrl(h.url);
-    setResponse(null);
-    setSelectedSaved(null);
-    setSelectedResponse(null);
-    setShowHistory(false);
-  }
-
-  // Latest-committed mirrors of tests/responses. Persistence reads these so a PUT
-  // always sends the LATEST tests AND responses — never a stale half from an older
-  // closure (which previously could wipe saved API data when saving from sockets).
-  const savedTestsRef = useRef(savedTests);
-  const savedResponsesRef = useRef(savedResponses);
-  useEffect(() => { savedTestsRef.current = savedTests; }, [savedTests]);
-  useEffect(() => { savedResponsesRef.current = savedResponses; }, [savedResponses]);
-
-  // Load saved tests and responses from server
-  useEffect(() => {
-    api('/api-tester/data').then(data => {
-      if (data.tests) { setSavedTests(data.tests); savedTestsRef.current = data.tests; }
-      if (data.responses) { setSavedResponses(data.responses); savedResponsesRef.current = data.responses; }
-      if (data.lastSharedAt) { setLastSharedAt(data.lastSharedAt); setSharedSnapshot(data.sharedSnapshot || null); }
-    }).catch(() => {});
-  }, []);
-
-  // Load all route endpoints on mount for auto-matching
-  useEffect(() => {
-    api('/api-tester/routes').then(routes => {
-      const eps = [];
-      (routes || []).forEach(r => {
-        (r.endpoints || []).forEach(ep => {
-          eps.push({ ...ep, routeName: r.name, hasAuth: r.hasAuth });
-        });
-      });
-      setRouteEndpoints(eps);
-    }).catch(() => {});
-  }, []);
-
-  // Find matching endpoint based on current URL and method
-  function findMatchingEndpoint() {
-    if (!url.trim() || routeEndpoints.length === 0) return null;
-    try {
-      const urlObj = new URL(url.trim());
-      const pathname = urlObj.pathname;
-      return routeEndpoints.find(ep => {
-        // Match exact path or path with :id param
-        const epPath = ep.fullPath;
-        if (pathname === epPath) return ep.method === method;
-        // Check :id style params - /api/users/:id matches /api/users/123
-        const epParts = epPath.split('/');
-        const urlParts = pathname.split('/');
-        if (epParts.length !== urlParts.length) return false;
-        const matches = epParts.every((p, i) => p.startsWith(':') || p === urlParts[i]);
-        return matches && ep.method === method;
-      });
-    } catch { return null; }
-  }
-
-  const matchedEndpoint = findMatchingEndpoint();
-
-  // Load fields from server when route matches
-  const lastMatchRef = useRef(null);
-  const fieldsLoadedRef = useRef(false);
-  const suppressAutofillRef = useRef(false);
-  useEffect(() => {
-    if (!matchedEndpoint) { lastMatchRef.current = null; return; }
-    const matchKey = matchedEndpoint.fullPath + ':' + matchedEndpoint.method;
-    // When a tab/history/saved request is restored, don't let route auto-fill clobber it.
-    if (suppressAutofillRef.current) { suppressAutofillRef.current = false; lastMatchRef.current = matchKey; return; }
-    if (lastMatchRef.current === matchKey) return;
-    lastMatchRef.current = matchKey;
-    fieldsLoadedRef.current = false;
-
-    // Set URL params
-    if (matchedEndpoint.params?.length > 0) {
-      setUrlParams(matchedEndpoint.params.map((p, i) => ({ key: p, value: '', id: Date.now() + 200 + i })));
-    } else {
-      setUrlParams([]);
-    }
-
-    // Set query params
-    if (matchedEndpoint.queryFields?.length > 0) {
-      setParams(matchedEndpoint.queryFields.map((f, i) => ({ key: f.name, value: '', id: Date.now() + i })));
-    }
-
-    // Build fields: start from route-detected, then merge any saved custom fields
-    const routeKey = encodeURIComponent(matchKey);
-    const hasFiles = matchedEndpoint.fileFields?.length > 0;
-    const hasBodyFields = matchedEndpoint.bodyFields?.length > 0;
-
-    // Build route-detected fields
-    const routeFields = [
-      ...(matchedEndpoint.bodyFields || []).map((f, i) => ({ key: f.name, value: '', type: 'text', id: Date.now() + i, fromRoute: true })),
-      ...(matchedEndpoint.fileFields || []).map((f, i) => ({ key: f.name, value: '', type: 'file', id: Date.now() + 100 + i, fromRoute: true })),
-    ];
-
-    if (hasFiles) setBodyType('form-data');
-
-    // Load saved custom fields from server and merge
-    api('/api-tester/fields/' + routeKey).then(res => {
-      if (fieldsLoadedRef.current) return;
-      fieldsLoadedRef.current = true;
-
-      if (res.fields && res.fields.length > 0) {
-        // Get custom fields (not from route) that user added
-        const routeFieldKeys = routeFields.map(f => f.key);
-        const customFields = res.fields.filter(f => !routeFieldKeys.includes(f.key));
-        const merged = [...routeFields, ...customFields];
-        setFormFields(merged);
-        if (merged.some(f => f.type === 'file')) setBodyType('form-data');
-      } else if (hasFiles || hasBodyFields) {
-        setFormFields(hasFiles ? routeFields : []);
-        if (!hasFiles && hasBodyFields) {
-          const obj = {};
-          matchedEndpoint.bodyFields.forEach(f => {
-            obj[f.name] = f.type === 'Number' ? 0 : f.type === 'Boolean' ? false : f.type === 'Date' ? '2024-01-01' : '';
-          });
-          setBody(JSON.stringify(obj, null, 2));
-          setBodyError(null);
-        }
-      }
-      if (matchedEndpoint.bodyFields?.length > 0 || matchedEndpoint.fileFields?.length > 0) setActiveTab('body');
-    }).catch(() => {});
-  }, [url, method]);
-
-  // Check if collection changed since last share
-  const shareNeeded = lastSharedAt && sharedSnapshot !== null && sharedSnapshot !== JSON.stringify({ t: savedTests.length, r: Object.keys(savedResponses).length, ids: savedTests.map(t => t.id).join(',') });
-
-  function persistTests(tests) {
-    savedTestsRef.current = tests;
-    setSavedTests(tests);
-    api('/api-tester/data', { method: 'PUT', body: { tests, responses: savedResponsesRef.current } }).catch(() => {});
-  }
-
-  function persistResponses(resp) {
-    savedResponsesRef.current = resp;
-    setSavedResponses(resp);
-    api('/api-tester/data', { method: 'PUT', body: { tests: savedTestsRef.current, responses: resp } }).catch(() => {});
-  }
-
-  function saveResponse() {
-    if (!response || !selectedSaved) {
-      toast('Save the request first, then save responses', 'error');
-      return;
-    }
-    const label = prompt('Label this response (e.g., "Success", "Missing email"):', response.status + ' ' + response.statusText);
-    if (!label?.trim()) return;
-    const entry = {
-      id: Date.now(),
-      label: label.trim(),
-      status: response.status,
-      statusText: response.statusText,
-      body: response.body,
-      requestBody: body || '',
-      time: response.time,
-    };
-    const updated = { ...savedResponses };
-    if (!updated[selectedSaved]) updated[selectedSaved] = [];
-    updated[selectedSaved].push(entry);
-    persistResponses(updated);
-    setExpandedTests(prev => ({ ...prev, [selectedSaved]: true }));
-    toast('Response saved', 'success');
-  }
-
-  function deleteResponse(testId, respId) {
-    const updated = { ...savedResponses };
-    updated[testId] = (updated[testId] || []).filter(r => r.id !== respId);
-    if (updated[testId].length === 0) delete updated[testId];
-    persistResponses(updated);
-  }
-
-  function updateResponse(testId, respId, changes) {
-    const updated = { ...savedResponses };
-    updated[testId] = (updated[testId] || []).map(r =>
-      r.id === respId ? { ...r, ...changes } : r
-    );
-    persistResponses(updated);
-    toast('Response updated', 'success');
-  }
-
-  async function shareCollection() {
-    if (savedTests.length === 0) { toast('No saved requests to share', 'error'); return; }
-    try {
-      const result = await api('/api-tester/share-collection', {
-        method: 'POST',
-        body: { tests: savedTests, responses: savedResponses },
-      });
-      const shareUrl = window.location.origin + '/_dev/shared/' + result.id;
-      copyToClipboard(shareUrl);
-      const now = Date.now();
-      setLastSharedAt(now);
-      const snap = JSON.stringify({ t: savedTests.length, r: Object.keys(savedResponses).length, ids: savedTests.map(t => t.id).join(',') });
-      setSharedSnapshot(snap);
-      api('/api-tester/data', { method: 'PUT', body: { tests: savedTests, responses: savedResponses, lastSharedAt: now, sharedSnapshot: snap } }).catch(() => {});
-      toast('Share URL copied: ' + shareUrl, 'success');
-    } catch (err) {
-      toast(err.message, 'error');
-    }
-  }
-
-  async function sendRequest() {
-    if (!url.trim()) { toast('Enter a URL', 'error'); return; }
-
-    // Validate file fields before sending
-    if (['POST','PUT','PATCH'].includes(method) && (bodyType === 'form-data' || bodyType === 'x-www-form-urlencoded')) {
-      const missingFiles = formFields.filter(f => f.key?.trim() && f.type === 'file' && !f.fileData && !f.value);
-      if (missingFiles.length > 0) {
-        const names = missingFiles.map(f => f.key).join(', ');
-        const ok = await showConfirm('File field' + (missingFiles.length > 1 ? 's' : '') + ' "' + names + '" ' + (missingFiles.length > 1 ? 'are' : 'is') + ' empty. Send without ' + (missingFiles.length > 1 ? 'them' : 'it') + '?', { confirmLabel: 'Send Anyway' });
-        if (!ok) return;
-      }
-    }
-
-    // Validate URL params
-    const emptyParams = urlParams.filter(p => p.key && !p.value);
-    if (emptyParams.length > 0) {
-      const names = emptyParams.map(p => p.key).join(', ');
-      toast('Missing value for path variable: ' + names, 'error');
-      return;
-    }
-
-    setLoading(true);
-    setResponse(null);
-    setSelectedResponse(null);
-    try {
-      const hdrs = {};
-      headers.forEach(h => { if (h.key?.trim() && h.value?.trim()) hdrs[h.key] = subst(h.value); });
-      // Apply the Auth tab (variables supported via {{...}})
-      if (auth.type === 'bearer' && auth.token.trim()) {
-        hdrs['Authorization'] = 'Bearer ' + subst(auth.token).trim();
-      } else if (auth.type === 'basic' && (auth.username || auth.password)) {
-        try { hdrs['Authorization'] = 'Basic ' + btoa(subst(auth.username) + ':' + subst(auth.password)); } catch {}
-      } else if (auth.type === 'apikey' && auth.apiKeyKey.trim()) {
-        hdrs[auth.apiKeyKey.trim()] = subst(auth.apiKeyValue);
-      }
-      const finalUrl = subst(buildDisplayUrl());
-      // For base64 send-as, convert form field value into body JSON
-      let sendBody = undefined;
-      let sendBodyType = bodyType;
-      let sendFormFields = undefined;
-
-      if (['POST','PUT','PATCH'].includes(method)) {
-        if (bodyType === 'form-data' || bodyType === 'x-www-form-urlencoded') {
-          sendFormFields = formFields.filter(f => f.key?.trim()).map(f => {
-            if (f.sendAs === 'base64') {
-              return { key: f.key, value: f.value }; // base64 string as text value
-            }
-            if (f.sendAs === 'file' && f.fileData) {
-              return { key: f.key, fileData: f.fileData, fileName: f.fileName, fileType: f.fileType };
-            }
-            if (f.type === 'file' && !f.fileData && !f.value) {
-              return null; // Skip empty file fields
-            }
-            return { key: f.key, value: subst(f.value || '') };
-          }).filter(Boolean);
-        } else if (bodyType === 'binary') {
-          sendBody = body; // base64 encoded
-        } else {
-          sendBody = subst(body);
-        }
-      }
-
-      const result = await api('/api-tester/send', {
-        method: 'POST',
-        body: {
-          method,
-          url: finalUrl,
-          headers: hdrs,
-          body: sendBody,
-          bodyType: sendBodyType,
-          formFields: sendFormFields,
-        },
-      });
-      let parsed = null;
-      try { parsed = JSON.parse(result.body); } catch {}
-      setResponse({
-        status: result.status,
-        statusText: result.statusText,
-        headers: result.headers || {},
-        body: parsed ? JSON.stringify(parsed, null, 2) : result.body,
-        isJson: !!parsed,
-        time: result.time,
-        size: result.size,
-      });
-      // Auto-capture an auth token from the response into {{token}}
-      if (autoToken && parsed && typeof parsed === 'object') {
-        const tok = parsed.token || parsed.accessToken || parsed.access_token || (parsed.data && parsed.data.token);
-        if (tok && typeof tok === 'string') { setVar('token', tok); toast('Captured token → {{token}}', 'success'); }
-      }
-      pushHistory({ id: Date.now(), method, url, status: result.status, time: result.time, ts: Date.now() });
-    } catch (err) {
-      setResponse({
-        status: 0, statusText: 'Error',
-        body: err.message, isJson: false,
-        time: 0, size: 0, headers: {},
-      });
-      pushHistory({ id: Date.now(), method, url, status: 0, time: 0, ts: Date.now() });
-    }
-    setLoading(false);
-  }
-
-  function saveTest() {
-    const name = prompt('Name this request:');
-    if (!name?.trim()) return;
-    const test = {
-      id: Date.now(),
-      name: name.trim(),
-      type: 'rest',
-      method, url,
-      headers: headers.filter(h => h.key?.trim()),
-      params: params.filter(p => p.key?.trim()),
-      urlParams: urlParams.filter(p => p.key?.trim()),
-      body, bodyType,
-      formFields: formFields.filter(f => f.key?.trim()),
-    };
-    const updated = [...savedTests, test];
-    persistTests(updated);
-    setSelectedSaved(test.id);
-    toast('Request saved', 'success');
-  }
-
-  function handleSaveSocketTest(config) {
-    const test = { id: Date.now(), ...config };
-    const updated = [...savedTests, test];
-    persistTests(updated);
-    setSelectedSaved(test.id);
-    toast('Test saved', 'success');
-  }
-
-  function handleSaveLog(entry) {
-    if (!selectedSaved) return;
-    const respEntry = {
-      id: Date.now(),
-      label: entry.label,
-      status: entry.dir === 'received' ? 200 : entry.dir === 'sent' ? 201 : 100,
-      statusText: entry.dir === 'received' ? 'Received' : entry.dir === 'sent' ? 'Sent' : 'System',
-      body: entry.body,
-      requestBody: '',
-      time: entry.time || 0,
-      dir: entry.dir,
-    };
-    const updated = { ...savedResponses };
-    if (!updated[selectedSaved]) updated[selectedSaved] = [];
-    updated[selectedSaved].push(respEntry);
-    persistResponses(updated);
-    setExpandedTests(prev => ({ ...prev, [selectedSaved]: true }));
-    toast('Log entry saved', 'success');
-  }
-
-  function loadTest(test) {
-    if (test.type === 'socketio') {
-      setTesterMode('socketio');
-    } else if (test.type === 'websocket') {
-      setTesterMode('websocket');
-    } else {
-      setTesterMode('rest');
-      setMethod(test.method || 'GET');
-      setUrl(test.url || '');
-      setHeaders(test.headers?.length ? test.headers : [{ key: 'Content-Type', value: 'application/json', id: 1 }]);
-      setParams(test.params?.length ? test.params : []);
-      setUrlParams(test.urlParams?.length ? test.urlParams : []);
-      setBody(test.body || '');
-      setBodyType(test.bodyType || 'json');
-      setFormFields(test.formFields?.length ? test.formFields : []);
-      if (['POST','PUT','PATCH'].includes(test.method)) setActiveTab('body');
-      else setActiveTab('params');
-    }
-    setSelectedSaved(test.id);
-    setSelectedResponse(null);
-    setResponse(null);
-  }
-
-  function toggleExpand(testId) {
-    setExpandedTests(prev => ({ ...prev, [testId]: !prev[testId] }));
-  }
-
-  function viewSavedResponse(testId, respId) {
-    setSelectedSaved(testId);
-    setSelectedResponse({ testId, respId });
-    setResponse(null);
-    const test = savedTests.find(t => t.id === testId);
-    if (test) {
-      if (test.type === 'socketio') { setTesterMode('socketio'); }
-      else if (test.type === 'websocket') { setTesterMode('websocket'); }
-      else {
-        setTesterMode('rest');
-        setMethod(test.method || 'GET');
-        setUrl(test.url || '');
-        setHeaders(test.headers?.length ? test.headers : [{ key: 'Content-Type', value: 'application/json', id: 1 }]);
-        setParams(test.params?.length ? test.params : []);
-        // Load saved response's request body into body editor
-        const r = (savedResponses[testId] || []).find(x => x.id === respId);
-        if (r?.requestBody?.trim()) {
-          try { setBody(JSON.stringify(JSON.parse(r.requestBody), null, 2)); } catch { setBody(r.requestBody); }
-        } else {
-          setBody(test.body || '');
-        }
-        if (['POST','PUT','PATCH'].includes(test.method)) setActiveTab('body');
-      }
-    }
-  }
-
-  async function deleteTest(id) {
-    const test = savedTests.find(t => t.id === id);
-    const ok = await showConfirm('Delete "' + (test?.name || 'this request') + '"? This will also remove all saved responses.', { danger: true, confirmLabel: 'Delete' });
-    if (!ok) return;
-    const updated = savedTests.filter(t => t.id !== id);
-    persistTests(updated);
-    if (savedResponses[id]) {
-      const r = { ...savedResponses };
-      delete r[id];
-      persistResponses(r);
-    }
-    // Clear saved field config for this route
-    if (test?.url && test?.method) {
-      try {
-        const ep = matchedEndpoint || routeEndpoints.find(e => test.url.includes(e.fullPath) && e.method === test.method);
-        if (ep) {
-          const mk = encodeURIComponent(ep.fullPath + ':' + ep.method);
-          api('/api-tester/fields/' + mk, { method: 'PUT', body: { fields: [] } }).catch(() => {});
-        }
-      } catch {}
-      // Reset lastMatchRef so next time route is entered, it re-detects fresh
-      lastMatchRef.current = null;
-      fieldsLoadedRef.current = false;
-    }
-    if (selectedSaved === id) setSelectedSaved(null);
-  }
-
-  async function loadImportRoutes() {
-    setShowImport(true);
-    setImportLoading(true);
-    try {
-      const routes = await api('/api-tester/routes');
-      setImportRoutes(routes);
-    } catch (err) { toast(err.message, 'error'); }
-    setImportLoading(false);
-  }
-
-  function importEndpoint(route, ep) {
-    const port = window.location.port || '3000';
-    const origin = window.location.protocol + '//' + window.location.hostname + ':' + port;
-    setMethod(ep.method);
-    setUrl(origin + ep.fullPath);
-    setResponse(null);
-    setSelectedSaved(null);
-    setSelectedResponse(null);
-
-    // Set URL params (:id, etc.)
-    if (ep.params?.length > 0) {
-      setUrlParams(ep.params.map((p, i) => ({ key: p, value: '', id: Date.now() + 200 + i })));
-    } else {
-      setUrlParams([]);
-    }
-
-    // Populate keys for testing — both the JSON body and the form-data rows, so
-    // fields are pre-filled regardless of which body mode is used.
-    const formRows = [
-      ...((ep.bodyFields || []).map((f, i) => ({ key: f.name, value: '', type: 'text', id: Date.now() + i, fromRoute: true }))),
-      ...((ep.fileFields || []).map((f, i) => ({ key: f.name, value: '', type: 'file', id: Date.now() + 500 + i, fromRoute: true }))),
-    ];
-    setFormFields(formRows);
-
-    const hasFiles = ep.fileFields?.length > 0;
-    if (ep.bodyFields?.length > 0 && ['POST','PUT','PATCH'].includes(ep.method)) {
-      const bodyObj = {};
-      ep.bodyFields.forEach(f => {
-        bodyObj[f.name] = f.type === 'Number' ? 0 : f.type === 'Boolean' ? false : f.type === 'Date' ? '2024-01-01' : '';
-      });
-      setBody(JSON.stringify(bodyObj, null, 2));
-      setHeaders([{ key: 'Content-Type', value: 'application/json', id: 1 }]);
-      setActiveTab('body');
-    } else {
-      setBody('');
-    }
-    if (hasFiles && ['POST','PUT','PATCH'].includes(ep.method)) {
-      setBodyType('form-data');
-      setActiveTab('body');
-    }
-
-    // Set query params for GET/DELETE
-    if (ep.queryFields?.length > 0 && ['GET','DELETE'].includes(ep.method)) {
-      setParams(ep.queryFields.map((f, i) => ({ key: f.name, value: '', id: Date.now() + i })));
-      setActiveTab('params');
-    } else if (['GET','DELETE'].includes(ep.method)) {
-      setParams([]);
-      setActiveTab('params');
-    } else {
-      setParams([]);
-    }
-
-    // Set auth header if route has auth
-    if (route.hasAuth) {
-      const hasAuthHeader = headers.some(h => h.key === 'Authorization');
-      if (!hasAuthHeader) {
-        setHeaders(prev => [...prev, { key: 'Authorization', value: 'Bearer ', id: Date.now() }]);
-      }
-    }
-
-    setShowImport(false);
-    toast(ep.method + ' ' + ep.fullPath + ' loaded', 'success');
-  }
-
-
-  function updateHeader(id, field, value) {
-    setHeaders(prev => prev.map(h => h.id === id ? { ...h, [field]: value } : h));
-  }
-
-  function addHeader() {
-    setHeaders(prev => [...prev, { key: '', value: '', id: Date.now() }]);
-  }
-
-  function removeHeader(id) {
-    setHeaders(prev => prev.filter(h => h.id !== id));
-  }
-
-  function updateParam(id, field, value) {
-    setParams(prev => prev.map(p => p.id === id ? { ...p, [field]: value } : p));
-  }
-
-  function addParam() {
-    setParams(prev => [...prev, { key: '', value: '', id: Date.now() }]);
-  }
-
-  function removeParam(id) {
-    setParams(prev => prev.filter(p => p.id !== id));
-  }
-
-  function addHeaderPreset(type) {
-    const presets = {
-      'bearer': { key: 'Authorization', value: 'Bearer ' },
-      'json': { key: 'Content-Type', value: 'application/json' },
-      'form': { key: 'Content-Type', value: 'multipart/form-data' },
-      'urlencoded': { key: 'Content-Type', value: 'application/x-www-form-urlencoded' },
-      'accept': { key: 'Accept', value: 'application/json' },
-    };
-    const p = presets[type];
-    if (p) {
-      const exists = headers.find(h => h.key === p.key);
-      if (exists) {
-        setHeaders(prev => prev.map(h => h.key === p.key ? { ...h, value: p.value } : h));
-      } else {
-        setHeaders(prev => [...prev, { ...p, id: Date.now() }]);
-      }
-    }
-  }
-
-  function saveFieldsToServer(fields) {
-    if (!matchedEndpoint) return;
-    const matchKey = matchedEndpoint.fullPath + ':' + matchedEndpoint.method;
-    const routeKey = encodeURIComponent(matchKey);
-    api('/api-tester/fields/' + routeKey, {
-      method: 'PUT',
-      body: { fields: fields.map(f => ({ key: f.key, value: f.value || '', type: f.type || 'text', id: f.id })) },
-    }).catch(() => {});
-  }
-
-  function addFormField() {
-    setFormFields(prev => {
-      const updated = [...prev, { key: '', value: '', type: 'text', id: Date.now() }];
-      saveFieldsToServer(updated);
-      return updated;
-    });
-  }
-
-  function updateFormField(id, field, value) {
-    setFormFields(prev => {
-      const updated = prev.map(f => f.id === id ? { ...f, [field]: value } : f);
-      saveFieldsToServer(updated);
-      return updated;
-    });
-  }
-
-  function removeFormField(id) {
-    setFormFields(prev => {
-      const updated = prev.filter(f => f.id !== id);
-      saveFieldsToServer(updated);
-      return updated;
-    });
-  }
-
-  function handleFileSelect(fieldId, file, sendAs) {
-    if (!file) return;
-    const reader = new FileReader();
-    reader.onload = () => {
-      const base64 = reader.result.split(',')[1];
-      setFormFields(prev => prev.map(f => {
-        if (f.id !== fieldId) return f;
-        if (sendAs === 'base64') {
-          return { ...f, value: base64, fileName: file.name, fileType: file.type, sendAs: 'base64', fileSize: file.size };
-        }
-        return { ...f, fileData: base64, fileName: file.name, fileType: file.type, sendAs: 'file', fileSize: file.size };
-      }));
-    };
-    reader.readAsDataURL(file);
-  }
-
-  function validateBody(val) {
-    setBody(val);
-    if (!val.trim()) { setBodyError(null); return; }
-    try { JSON.parse(val); setBodyError(null); }
-    catch (e) { setBodyError(e.message); }
-  }
-
-  function formatBody() {
-    try {
-      const parsed = JSON.parse(body);
-      setBody(JSON.stringify(parsed, null, 2));
-      setBodyError(null);
-    } catch {}
-  }
-
-  const statusClass = response ? 's' + Math.floor(response.status / 100) + 'xx' : '';
-  const hasBody = ['POST','PUT','PATCH'].includes(method);
-
-  // Build display URL with param values and query params filled in
-  function buildDisplayUrl() {
-    let u = url;
-    urlParams.forEach(p => {
-      if (p.key && p.value) u = u.replace(':' + p.key, p.value);
-    });
-    const qp = params.filter(p => p.key?.trim() && p.value?.trim());
-    if (qp.length > 0) {
-      const sep = u.includes('?') ? '&' : '?';
-      u += sep + qp.map(p => encodeURIComponent(p.key) + '=' + encodeURIComponent(p.value)).join('&');
-    }
-    return u;
-  }
-  const displayUrl = buildDisplayUrl();
-
-  const methods = ['GET', 'POST', 'PUT', 'PATCH', 'DELETE'];
-  const methodColors = { GET: 'var(--success)', POST: '#f59e0b', PUT: '#3b82f6', PATCH: '#8b5cf6', DELETE: 'var(--danger)' };
-
-  const modeTabs = [
-    { id: 'rest', label: 'REST API', icon: LuSend },
-    { id: 'socketio', label: 'Socket.IO', icon: LuRadio },
-    { id: 'websocket', label: 'WebSocket', icon: LuWifi },
-  ];
-
-  const loadedSocketTest = savedTests.find(t => t.id === selectedSaved);
-  const typeBadgeStyles = {
-    socketio: { background: 'rgba(52,211,153,0.15)', color: '#34d399' },
-    websocket: { background: 'rgba(96,165,250,0.15)', color: '#60a5fa' },
-  };
-
-  return html`<div>
-    <div className="flex items-center justify-between mb-4">
-      <div>
-        <div className="card-title">API Tester</div>
-        <div className="card-subtitle">Test REST APIs, Socket.IO, and WebSocket connections</div>
-      </div>
-      <div className="flex gap-2">
-        ${testerMode === 'rest' && html`<button className="btn btn-ghost btn-sm" onClick=${loadImportRoutes}>
-          <${LuImport} size=${14} /> Import Route
-        </button>`}
-        <button className=${`btn btn-sm ${shareNeeded ? 'btn-warning' : 'btn-primary'}`}
-          onClick=${shareCollection} disabled=${savedTests.length === 0}
-          style=${shareNeeded ? { animation: 'pulse 2s infinite', background: 'var(--warning)', color: '#000' } : {}}>
-          <${LuShare2} size=${14} /> ${shareNeeded ? 'Update & Share' : lastSharedAt ? 'Re-share' : 'Share'}
-        </button>
-      </div>
-    </div>
-
-    <div className="routes-layout">
-      <!-- Left: Saved collection tree (always visible) -->
-      <div className="card" style=${{ padding: 0, overflow: 'hidden' }}>
-        <div style=${{ padding: '12px 16px', borderBottom: '1px solid var(--border)' }}>
-          <span style=${{ fontSize: '12px', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.5px', color: 'var(--text-muted)' }}>Collection</span>
-        </div>
-        <div style=${{ maxHeight: '600px', overflowY: 'auto' }}>
-          ${savedTests.length === 0 && html`<div style=${{ padding: '30px 16px', textAlign: 'center', color: 'var(--text-muted)', fontSize: '12px' }}>
-            No saved requests yet
-          </div>`}
-          ${savedTests.map(test => {
-            const resps = savedResponses[test.id] || [];
-            const isExpanded = expandedTests[test.id];
-            const isParentActive = selectedSaved === test.id && !selectedResponse;
-            const testType = test.type || 'rest';
-            return html`<div key=${test.id}>
-              <div style=${{ padding: '8px 10px', cursor: 'pointer', borderBottom: '1px solid var(--border)',
-                background: isParentActive ? 'var(--accent-glow)' : 'transparent',
-                borderLeft: isParentActive ? '2px solid var(--accent)' : '2px solid transparent',
-                transition: 'background 0.1s' }}
-                onClick=${() => { loadTest(test); setSelectedResponse(null); if (resps.length > 0) setExpandedTests(prev => ({ ...prev, [test.id]: true })); }}>
-                <div className="flex items-center gap-2">
-                  ${resps.length > 0 && html`<span style=${{ fontSize: '10px', color: 'var(--text-muted)', width: '14px', textAlign: 'center', flexShrink: 0 }}>
-                    ${isExpanded ? '▼' : '▶'}
-                  </span>`}
-                  ${resps.length === 0 && html`<span style=${{ width: '14px', flexShrink: 0 }} />`}
-                  ${testType === 'rest' && html`<span className=${`route-method ${(test.method || 'GET').toLowerCase()}`} style=${{ fontSize: '9px', padding: '1px 5px' }}>${test.method || 'GET'}</span>`}
-                  ${testType === 'socketio' && html`<span style=${{ fontSize: '9px', padding: '1px 5px', borderRadius: '4px', fontWeight: 700, fontFamily: "'SF Mono', monospace", ...typeBadgeStyles.socketio }}>SIO</span>`}
-                  ${testType === 'websocket' && html`<span style=${{ fontSize: '9px', padding: '1px 5px', borderRadius: '4px', fontWeight: 700, fontFamily: "'SF Mono', monospace", ...typeBadgeStyles.websocket }}>WS</span>`}
-                  <span style=${{ fontSize: '12px', fontWeight: 500, flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>${test.name}</span>
-                  ${resps.length > 0 && html`<span style=${{ fontSize: '9px', padding: '1px 5px', borderRadius: '8px', background: 'var(--accent-glow)', color: 'var(--accent-light)', fontWeight: 600 }}>${resps.length}</span>`}
-                  <button className="btn btn-ghost" style=${{ padding: '2px', opacity: 0.4 }}
-                    onClick=${(e) => { e.stopPropagation(); deleteTest(test.id); }}>
-                    <${LuTrash2} size=${11} />
-                  </button>
-                </div>
-              </div>
-              ${isExpanded && resps.map(r => {
-                const isRespActive = selectedResponse?.testId === test.id && selectedResponse?.respId === r.id;
-                const isSocketChild = r.dir;
-                return html`<div key=${r.id}
-                  style=${{ padding: '6px 10px 6px 40px', cursor: 'pointer', borderBottom: '1px solid var(--border)',
-                    background: isRespActive ? 'var(--accent-glow)' : 'transparent',
-                    borderLeft: isRespActive ? '2px solid var(--accent)' : '2px solid transparent',
-                    transition: 'background 0.1s' }}
-                  onClick=${() => viewSavedResponse(test.id, r.id)}>
-                  <div className="flex items-center gap-2">
-                    ${isSocketChild
-                      ? html`<span style=${{ fontSize: '10px', padding: '1px 5px', borderRadius: '4px', fontWeight: 700, fontFamily: "'SF Mono', monospace",
-                          background: r.dir === 'received' ? 'rgba(52,211,153,0.15)' : r.dir === 'sent' ? 'rgba(245,158,11,0.15)' : 'rgba(148,163,184,0.15)',
-                          color: r.dir === 'received' ? '#34d399' : r.dir === 'sent' ? '#f59e0b' : '#94a3b8' }}>
-                          ${r.dir === 'received' ? '↓' : r.dir === 'sent' ? '↑' : '●'}
-                        </span>`
-                      : html`<span className=${`api-tester-status s${Math.floor(r.status / 100)}xx`} style=${{ fontSize: '10px', padding: '1px 5px' }}>
-                          ${r.status}
-                        </span>`}
-                    <span style=${{ fontSize: '11px', flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', color: 'var(--text-secondary)' }}>${r.label}</span>
-                    <button className="btn btn-ghost" style=${{ padding: '2px', opacity: 0.3 }}
-                      onClick=${(e) => { e.stopPropagation(); deleteResponse(test.id, r.id); }}>
-                      <${LuTrash2} size=${10} />
-                    </button>
-                  </div>
-                </div>`;
-              })}
-            </div>`;
-          })}
-        </div>
-      </div>
-
-      <!-- Right: Mode tabs + tester content -->
-      <div>
-        <div className="api-tester-mode-tabs">
-          ${modeTabs.map(t => html`<button key=${t.id}
-            className=${`api-tester-mode-tab${testerMode === t.id ? ' active' : ''}`}
-            onClick=${() => { setTesterMode(t.id); setSelectedResponse(null); }}>
-            <${t.icon} size=${14} /> ${t.label}
-          </button>`)}
-        </div>
-
-        ${testerMode === 'socketio' && html`<${SocketIOTester}
-          selectedSaved=${selectedSaved}
-          isSaved=${!!(selectedSaved && savedTests.find(t => t.id === selectedSaved)?.type === 'socketio')}
-          loadedTest=${loadedSocketTest}
-          onSaveTest=${handleSaveSocketTest}
-          onSaveLog=${handleSaveLog} />`}
-
-        ${testerMode === 'websocket' && html`<${WebSocketTester}
-          selectedSaved=${selectedSaved}
-          isSaved=${!!(selectedSaved && savedTests.find(t => t.id === selectedSaved)?.type === 'websocket')}
-          loadedTest=${loadedSocketTest}
-          onSaveTest=${handleSaveSocketTest}
-          onSaveLog=${handleSaveLog} />`}
-
-        ${testerMode === 'rest' && html`<div>
-          <!-- Request tabs -->
-          <div style=${{ display: 'flex', alignItems: 'center', gap: '4px', marginBottom: '10px', flexWrap: 'wrap' }}>
-            ${tabs.map(t => { const active = t.id === activeTabId; return html`<div key=${t.id}
-              onClick=${() => switchTab(t.id)}
-              style=${{ display: 'inline-flex', alignItems: 'center', gap: '6px', cursor: 'pointer',
-                border: '1px solid ' + (active ? 'var(--accent)' : 'var(--border)'),
-                background: active ? 'var(--accent-glow)' : 'transparent',
-                color: active ? 'var(--accent-light)' : 'var(--text-secondary)',
-                borderRadius: '6px', padding: '5px 10px', maxWidth: '220px', fontSize: '12px' }}>
-              <span style=${{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>${tabLabel(t)}</span>
-              ${tabs.length > 1 && html`<span onClick=${(e) => { e.stopPropagation(); closeTab(t.id); }}
-                style=${{ cursor: 'pointer', fontSize: '15px', lineHeight: 1, opacity: 0.6 }}>×</span>`}
-            </div>`; })}
-            <button onClick=${newTab} title="New request tab"
-              style=${{ border: '1px solid var(--border)', background: 'transparent', color: 'var(--text-secondary)', borderRadius: '6px', padding: '4px 11px', cursor: 'pointer', fontSize: '16px', lineHeight: 1 }}>+</button>
-          </div>
-
-          <!-- Request bar -->
-          <div className="api-tester-bar">
-            <select className="api-tester-method"
-              value=${method}
-              onChange=${(e) => setMethod(e.target.value)}
-              style=${{ color: methodColors[method] || 'var(--text-primary)' }}>
-              ${methods.map(m => html`<option key=${m} value=${m} style=${{ color: 'var(--text-primary)' }}>${m}</option>`)}
-            </select>
-            <input
-              className="api-tester-url"
-              type="text"
-              placeholder="http://localhost:3000/api/users"
-              value=${url}
-              onInput=${(e) => setUrl(e.target.value)}
-              onKeyDown=${(e) => { if (e.key === 'Enter') sendRequest(); }}
-            />
-            <button className="api-tester-send" onClick=${sendRequest} disabled=${loading || !url.trim()}>
-              ${loading ? html`<${LuLoader} size=${14} className="spin" />` : html`<${LuSend} size=${14} />`}
-              Send
-            </button>
-            <button className="api-tester-send" onClick=${() => { setShowVars(v => !v); setShowHistory(false); }}
-              title="Environment variables"
-              style=${{ background: showVars ? 'var(--accent-glow)' : 'transparent', border: '1px solid var(--border)', color: showVars ? 'var(--accent-light)' : 'var(--text-primary)' }}>
-              Variables${variables.filter(v => v.key?.trim()).length ? ` (${variables.filter(v => v.key?.trim()).length})` : ''}
-            </button>
-            <button className="api-tester-send" onClick=${() => { setShowHistory(h => !h); setShowVars(false); }}
-              title="Request history"
-              style=${{ background: showHistory ? 'var(--accent-glow)' : 'transparent', border: '1px solid var(--border)', color: showHistory ? 'var(--accent-light)' : 'var(--text-primary)' }}>
-              History
-            </button>
-            ${!savedTests.some(t => t.type !== 'socketio' && t.type !== 'websocket' && t.method === method && t.url === url) && html`<button className="api-tester-send" onClick=${saveTest} disabled=${!url.trim()}
-              style=${{ background: 'transparent', border: '1px solid var(--border)', color: 'var(--text-primary)' }}>
-              <${LuSave} size=${14} /> Save
-            </button>`}
-            ${selectedResponse && (() => {
-              const sr = (savedResponses[selectedResponse.testId] || []).find(x => x.id === selectedResponse.respId);
-              if (!sr) return null;
-              return html`<button className="api-tester-send" onClick=${() => {
-                updateResponse(selectedResponse.testId, selectedResponse.respId, { requestBody: body });
-              }} style=${{ background: 'transparent', border: '1px solid var(--border)', color: 'var(--text-primary)' }}>
-                <${LuSave} size=${14} /> Update
-              </button>`;
-            })()}
-          </div>
-
-          ${displayUrl !== url && html`<div style=${{
-            padding: '6px 14px', fontSize: '11px', color: 'var(--text-muted)',
-            fontFamily: "'SF Mono', monospace", background: 'rgba(124,58,237,0.04)',
-            borderRadius: '6px', marginBottom: '8px', wordBreak: 'break-all',
-          }}>${displayUrl}</div>`}
-
-          ${showVars && html`<div className="card" style=${{ padding: '12px 14px', marginBottom: '12px' }}>
-            <div style=${{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '8px' }}>
-              <span style=${{ fontSize: '11px', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.5px', color: 'var(--text-muted)' }}>Environment Variables</span>
-              <label style=${{ display: 'flex', alignItems: 'center', gap: '6px', fontSize: '12px', color: 'var(--text-secondary)', cursor: 'pointer' }}>
-                <input type="checkbox" checked=${autoToken} onChange=${e => setAutoToken(e.target.checked)} /> Auto-capture token from response
-              </label>
-            </div>
-            ${variables.map((v, i) => html`<div key=${v.id || i} className="api-tester-kv-row">
-              <input placeholder="name" value=${v.key}
-                onInput=${e => setVariables(prev => prev.map((x, j) => j === i ? { ...x, key: e.target.value } : x))} />
-              <input placeholder="value" value=${v.value}
-                onInput=${e => setVariables(prev => prev.map((x, j) => j === i ? { ...x, value: e.target.value } : x))} />
-              <button className="btn btn-ghost" style=${{ padding: '4px', opacity: 0.5 }}
-                onClick=${() => setVariables(prev => prev.filter((_, j) => j !== i))}><${LuTrash2} size=${12} /></button>
-            </div>`)}
-            <div style=${{ padding: '8px 0 0' }}>
-              <button className="btn btn-ghost btn-sm" onClick=${() => setVariables(prev => [...prev, { key: '', value: '', id: Date.now() }])}>
-                <${LuPlus} size=${12} /> Add variable
-              </button>
-            </div>
-            <div className="text-sm text-muted" style=${{ marginTop: '6px' }}>
-              Reference anywhere with <span style=${{ fontFamily: "'SF Mono', monospace", color: 'var(--accent-light)' }}>{{name}}</span> — URL, headers, body, or Auth.
-            </div>
-          </div>`}
-
-          ${showHistory && html`<div className="card" style=${{ padding: 0, marginBottom: '12px', overflow: 'hidden' }}>
-            <div style=${{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '10px 14px', borderBottom: '1px solid var(--border)' }}>
-              <span style=${{ fontSize: '11px', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.5px', color: 'var(--text-muted)' }}>History</span>
-              ${history.length > 0 && html`<button className="btn btn-ghost btn-sm" onClick=${clearHistory} style=${{ fontSize: '11px' }}>Clear</button>`}
-            </div>
-            ${history.length === 0
-              ? html`<div style=${{ padding: '16px', color: 'var(--text-muted)', fontSize: '12px' }}>No requests yet — sent requests show up here.</div>`
-              : history.map(h => html`<div key=${h.id}
-                  onClick=${() => loadHistory(h)}
-                  style=${{ display: 'flex', alignItems: 'center', gap: '10px', padding: '8px 14px', borderBottom: '1px solid var(--border)', cursor: 'pointer', fontSize: '12px' }}>
-                  <span style=${{ fontWeight: 600, color: methodColors[h.method] || 'var(--text-secondary)', minWidth: '46px' }}>${h.method}</span>
-                  <span style=${{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', fontFamily: "'SF Mono', monospace" }}>${h.url}</span>
-                  <span style=${{ fontWeight: 600, color: h.status >= 200 && h.status < 300 ? 'var(--success)' : h.status === 0 ? 'var(--text-muted)' : 'var(--warning)' }}>${h.status || '—'}</span>
-                </div>`)}
-          </div>`}
-
-          <!-- URL Params (:id, etc.) -->
-          ${urlParams.length > 0 && html`<div className="card" style=${{ padding: 0, overflow: 'hidden', marginBottom: '16px' }}>
-            <div style=${{ padding: '8px 14px', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center', gap: '8px' }}>
-              <span style=${{ fontSize: '11px', fontWeight: 600, color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '0.5px' }}>Path Variables</span>
-            </div>
-            ${urlParams.map(p => html`<div key=${p.id} className="api-tester-kv-row">
-              <input value=${p.key} disabled style=${{
-                flex: '0 0 120px', opacity: 0.6, fontWeight: 600, fontFamily: "'SF Mono', monospace",
-                color: 'var(--accent-light)', background: 'var(--bg-input)', fontSize: '12px',
-              }} />
-              <input placeholder=${'Enter ' + p.key + ' value'} value=${p.value}
-                onInput=${(e) => setUrlParams(prev => prev.map(up => up.id === p.id ? { ...up, value: e.target.value } : up))}
-                style=${{ fontFamily: "'SF Mono', monospace", fontSize: '12px' }} />
-            </div>`)}
-          </div>`}
-
-          <!-- Tabs: Params / Headers / Body -->
-          <div className="card" style=${{ padding: 0, overflow: 'hidden', marginBottom: '16px' }}>
-            <div className="api-tester-tabs">
-              <button className=${`api-tester-tab${activeTab === 'params' ? ' active' : ''}`}
-                onClick=${() => setActiveTab('params')}>
-                Params <span style=${{ fontSize: '10px', color: 'var(--text-muted)', marginLeft: '4px' }}>(${params.filter(p => p.key?.trim()).length})</span>
-              </button>
-              <button className=${`api-tester-tab${activeTab === 'headers' ? ' active' : ''}`}
-                onClick=${() => setActiveTab('headers')}>
-                Headers <span style=${{ fontSize: '10px', color: 'var(--text-muted)', marginLeft: '4px' }}>(${headers.filter(h => h.key?.trim()).length})</span>
-              </button>
-              ${hasBody && html`<button className=${`api-tester-tab${activeTab === 'body' ? ' active' : ''}`}
-                onClick=${() => setActiveTab('body')}>
-                Body
-              </button>`}
-              <button className=${`api-tester-tab${activeTab === 'auth' ? ' active' : ''}`}
-                onClick=${() => setActiveTab('auth')}>
-                Auth${auth.type !== 'none' ? html` <span style=${{ color: 'var(--success)', marginLeft: '2px' }}>●</span>` : ''}
-              </button>
-            </div>
-
-            ${activeTab === 'auth' && html`<div style=${{ padding: '12px 14px' }}>
-              <div style=${{ display: 'flex', gap: '6px', marginBottom: '12px', flexWrap: 'wrap' }}>
-                ${[['none', 'No Auth'], ['bearer', 'Bearer Token'], ['basic', 'Basic'], ['apikey', 'API Key']].map(([t, label]) => html`<button key=${t}
-                  onClick=${() => setAuth(a => ({ ...a, type: t }))}
-                  className="badge"
-                  style=${{ cursor: 'pointer', border: '1px solid var(--border)', background: auth.type === t ? 'var(--accent-glow)' : 'var(--bg-input)', color: auth.type === t ? 'var(--accent-light)' : 'var(--text-secondary)' }}>${label}</button>`)}
-              </div>
-              ${auth.type === 'bearer' && html`<input className="form-input" placeholder="Token (e.g. {{token}})"
-                value=${auth.token} onInput=${e => setAuth(a => ({ ...a, token: e.target.value }))} />`}
-              ${auth.type === 'basic' && html`<div style=${{ display: 'flex', gap: '8px' }}>
-                <input className="form-input" placeholder="Username" value=${auth.username} onInput=${e => setAuth(a => ({ ...a, username: e.target.value }))} />
-                <input className="form-input" placeholder="Password" value=${auth.password} onInput=${e => setAuth(a => ({ ...a, password: e.target.value }))} />
-              </div>`}
-              ${auth.type === 'apikey' && html`<div style=${{ display: 'flex', gap: '8px' }}>
-                <input className="form-input" placeholder="Header name" value=${auth.apiKeyKey} onInput=${e => setAuth(a => ({ ...a, apiKeyKey: e.target.value }))} style=${{ flex: '0 0 170px' }} />
-                <input className="form-input" placeholder="Value (e.g. {{apiKey}})" value=${auth.apiKeyValue} onInput=${e => setAuth(a => ({ ...a, apiKeyValue: e.target.value }))} />
-              </div>`}
-              ${auth.type === 'none' && html`<div className="text-sm text-muted">No authentication will be sent with this request.</div>`}
-            </div>`}
-
-            ${activeTab === 'params' && html`<div>
-              ${params.map(p => html`<div key=${p.id} className="api-tester-kv-row">
-                <input placeholder="Param name" value=${p.key}
-                  onInput=${(e) => updateParam(p.id, 'key', e.target.value)} />
-                <input placeholder="Value" value=${p.value}
-                  onInput=${(e) => updateParam(p.id, 'value', e.target.value)} />
-                <button className="btn btn-ghost" style=${{ padding: '4px', opacity: 0.5 }}
-                  onClick=${() => removeParam(p.id)}>
-                  <${LuTrash2} size=${12} />
-                </button>
-              </div>`)}
-              <div style=${{ padding: '8px 14px' }}>
-                <button className="btn btn-ghost btn-sm" onClick=${addParam}>
-                  <${LuPlus} size=${12} /> Add Param
-                </button>
-              </div>
-            </div>`}
-
-            ${activeTab === 'headers' && html`<div>
-              ${headers.map(h => html`<div key=${h.id} className="api-tester-kv-row">
-                <input placeholder="Header name" value=${h.key}
-                  onInput=${(e) => updateHeader(h.id, 'key', e.target.value)} />
-                <input placeholder="Value" value=${h.value}
-                  onInput=${(e) => updateHeader(h.id, 'value', e.target.value)} />
-                <button className="btn btn-ghost" style=${{ padding: '4px', opacity: 0.5 }}
-                  onClick=${() => removeHeader(h.id)}>
-                  <${LuTrash2} size=${12} />
-                </button>
-              </div>`)}
-              <div style=${{ padding: '8px 14px', display: 'flex', gap: '6px', flexWrap: 'wrap', alignItems: 'center' }}>
-                <button className="btn btn-ghost btn-sm" onClick=${addHeader}>
-                  <${LuPlus} size=${12} /> Add Header
-                </button>
-                <span style=${{ fontSize: '10px', color: 'var(--text-muted)', margin: '0 4px' }}>|</span>
-                <button className="btn btn-ghost btn-sm" style=${{ fontSize: '10px' }} onClick=${() => addHeaderPreset('bearer')}>+ Auth Bearer</button>
-                <button className="btn btn-ghost btn-sm" style=${{ fontSize: '10px' }} onClick=${() => addHeaderPreset('json')}>+ JSON</button>
-                <button className="btn btn-ghost btn-sm" style=${{ fontSize: '10px' }} onClick=${() => addHeaderPreset('form')}>+ Form Data</button>
-                <button className="btn btn-ghost btn-sm" style=${{ fontSize: '10px' }} onClick=${() => addHeaderPreset('urlencoded')}>+ URL Encoded</button>
-                <button className="btn btn-ghost btn-sm" style=${{ fontSize: '10px' }} onClick=${() => addHeaderPreset('accept')}>+ Accept JSON</button>
-              </div>
-            </div>`}
-
-            ${activeTab === 'body' && hasBody && html`<div>
-              <div style=${{ display: 'flex', gap: '0', borderBottom: '1px solid var(--border)' }}>
-                ${[
-                  { id: 'json', label: 'JSON' },
-                  { id: 'form-data', label: 'Form Data' },
-                  { id: 'x-www-form-urlencoded', label: 'URL Encoded' },
-                  { id: 'raw', label: 'Raw' },
-                  { id: 'binary', label: 'Binary' },
-                ].map(bt => html`<button key=${bt.id}
-                  style=${{
-                    padding: '6px 14px', fontSize: '11px', fontWeight: bodyType === bt.id ? 600 : 400,
-                    color: bodyType === bt.id ? 'var(--accent-light)' : 'var(--text-muted)',
-                    background: 'none', border: 'none', cursor: 'pointer',
-                    borderBottom: bodyType === bt.id ? '2px solid var(--accent)' : '2px solid transparent',
-                    transition: 'all 0.15s',
-                  }}
-                  onClick=${() => setBodyType(bt.id)}
-                >${bt.label}</button>`)}
-              </div>
-
-              ${(bodyType === 'json' || bodyType === 'raw') && html`<div>
-                <textarea
-                  ref=${bodyRef}
-                  className="api-tester-body-editor"
-                  placeholder=${bodyType === 'json' ? '{\n  "key": "value"\n}' : 'Enter raw body...'}
-                  value=${body}
-                  onInput=${(e) => bodyType === 'json' ? validateBody(e.target.value) : setBody(e.target.value)}
-                  onBlur=${bodyType === 'json' ? formatBody : undefined}
-                  spellcheck=${false}
-                  style=${{ borderTop: bodyError && bodyType === 'json' ? '2px solid var(--danger)' : 'none' }}
-                />
-                ${bodyError && bodyType === 'json' && html`<div style=${{ padding: '6px 14px', fontSize: '11px', color: 'var(--danger)', background: 'rgba(248,113,113,0.06)' }}>
-                  Invalid JSON: ${bodyError}
-                </div>`}
-              </div>`}
-
-              ${(bodyType === 'form-data' || bodyType === 'x-www-form-urlencoded') && html`<div>
-                ${formFields.map(f => html`<div key=${f.id} style=${{
-                  display: 'flex', gap: '8px', alignItems: 'center', padding: '8px 14px',
-                  borderBottom: '1px solid var(--border)',
-                }}>
-                  <input placeholder="Key" value=${f.key} style=${{
-                    flex: '0 0 140px', padding: '6px 10px', fontSize: '12px',
-                    background: 'var(--bg-input)', border: '1px solid var(--border)', borderRadius: '6px',
-                    color: 'var(--text-primary)', outline: 'none',
-                  }} onInput=${(e) => updateFormField(f.id, 'key', e.target.value)} />
-
-                  ${bodyType === 'form-data' && html`<select style=${{
-                    padding: '6px 8px', fontSize: '11px', background: 'var(--bg-input)',
-                    border: '1px solid var(--border)', borderRadius: '6px', color: 'var(--text-secondary)',
-                    cursor: 'pointer', minWidth: '70px',
-                  }} value=${f.type || 'text'} onChange=${(e) => updateFormField(f.id, 'type', e.target.value)}>
-                    <option value="text">Text</option>
-                    <option value="file">File</option>
-                  </select>`}
-
-                  ${(f.type !== 'file' || bodyType === 'x-www-form-urlencoded') && html`<input
-                    placeholder="Value" value=${f.value || ''} style=${{
-                    flex: 1, padding: '6px 10px', fontSize: '12px',
-                    background: 'var(--bg-input)', border: '1px solid var(--border)', borderRadius: '6px',
-                    color: 'var(--text-primary)', outline: 'none',
-                  }} onInput=${(e) => updateFormField(f.id, 'value', e.target.value)} />`}
-
-                  ${f.type === 'file' && bodyType === 'form-data' && html`<div style=${{ flex: 1, display: 'flex', gap: '6px', alignItems: 'center' }}>
-                    ${f.fileName ? html`<span style=${{
-                      fontSize: '11px', color: 'var(--text-secondary)', padding: '4px 8px',
-                      background: 'var(--bg-input)', borderRadius: '4px', border: '1px solid var(--border)',
-                      maxWidth: '120px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
-                    }}>${f.fileName} <span style=${{ color: 'var(--text-muted)', fontSize: '10px' }}>(${f.fileSize > 1024 ? (f.fileSize / 1024).toFixed(1) + 'KB' : f.fileSize + 'B'})</span></span>` : null}
-                    <label style=${{
-                      padding: '5px 12px', fontSize: '11px', borderRadius: '6px', cursor: 'pointer',
-                      background: 'var(--bg-input)', border: '1px solid var(--border)',
-                      color: 'var(--accent-light)', fontWeight: 500,
-                    }}>
-                      ${f.fileName ? 'Change' : 'Choose File'}
-                      <input type="file" style=${{ display: 'none' }} onChange=${(e) => {
-                        const file = e.target.files[0];
-                        if (file) {
-                          const sendAs = f.sendAs || 'file';
-                          handleFileSelect(f.id, file, sendAs);
-                        }
-                      }} />
-                    </label>
-                    ${f.fileName && html`<select style=${{
-                      padding: '5px 8px', fontSize: '10px', background: 'var(--bg-input)',
-                      border: '1px solid var(--border)', borderRadius: '6px', color: 'var(--text-secondary)',
-                      cursor: 'pointer',
-                    }} value=${f.sendAs || 'file'} onChange=${(e) => {
-                      const newSendAs = e.target.value;
-                      setFormFields(prev => prev.map(ff => {
-                        if (ff.id !== f.id) return ff;
-                        var updated = { ...ff, sendAs: newSendAs };
-                        if (ff.fileData && newSendAs === 'base64') updated.value = ff.fileData;
-                        else if (ff.value && newSendAs === 'file') updated.fileData = ff.value;
-                        return updated;
-                      }));
-                    }}>
-                      <option value="file">Send as File</option>
-                      <option value="base64">Send as Base64</option>
-                    </select>`}
-                  </div>`}
-
-                  <button className="btn btn-ghost" style=${{ padding: '4px', opacity: 0.5 }}
-                    onClick=${() => removeFormField(f.id)}>
-                    <${LuTrash2} size=${12} />
-                  </button>
-                </div>`)}
-                <div style=${{ padding: '8px 14px' }}>
-                  <button className="btn btn-ghost btn-sm" onClick=${addFormField}>
-                    <${LuPlus} size=${12} /> Add Field
-                  </button>
-                </div>
-              </div>`}
-
-              ${bodyType === 'binary' && html`<div style=${{ padding: '20px 14px', textAlign: 'center' }}>
-                <label style=${{
-                  padding: '12px 24px', fontSize: '13px', borderRadius: '8px', cursor: 'pointer',
-                  background: 'var(--bg-input)', border: '1.5px dashed var(--border)',
-                  color: 'var(--accent-light)', fontWeight: 500, display: 'inline-block',
-                }}>
-                  ${body ? 'File selected (' + (body.length * 0.75 / 1024).toFixed(1) + ' KB)' : 'Choose File'}
-                  <input type="file" style=${{ display: 'none' }} onChange=${(e) => {
-                    const file = e.target.files[0];
-                    if (file) {
-                      const reader = new FileReader();
-                      reader.onload = () => setBody(reader.result.split(',')[1]);
-                      reader.readAsDataURL(file);
-                    }
-                  }} />
-                </label>
-                ${body && html`<button className="btn btn-ghost btn-sm" style=${{ marginLeft: '8px' }}
-                  onClick=${() => setBody('')}>Clear</button>`}
-              </div>`}
-            </div>`}
-          </div>
-
-          <!-- Saved response detail (inline) -->
-          ${selectedResponse && (() => {
-            const r = (savedResponses[selectedResponse.testId] || []).find(x => x.id === selectedResponse.respId);
-            if (!r) return null;
-            const rStatusClass = 's' + Math.floor((r.status || 0) / 100) + 'xx';
-            return html`<div className="card" style=${{ padding: 0, overflow: 'hidden', marginBottom: '16px' }}>
-              <div style=${{ padding: '10px 16px', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center', gap: '12px' }}>
-                <span style=${{ fontSize: '12px', fontWeight: 600, color: 'var(--text-muted)' }}>Saved Response</span>
-                <span className=${`api-tester-status ${rStatusClass}`}>${r.status} ${r.statusText}</span>
-                <span style=${{ fontSize: '11px', color: 'var(--text-muted)' }}>${r.time}ms</span>
-                <span style=${{ fontSize: '13px', fontWeight: 500, marginLeft: 'auto', color: 'var(--text-secondary)' }}>${r.label}</span>
-              </div>
-              <div className="api-tester-response-body">${(() => {
-                try { return JSON.stringify(JSON.parse(r.body), null, 2); } catch { return r.body || 'No response body'; }
-              })()}</div>
-            </div>`;
-          })()}
-
-          <!-- Response (live) -->
-          ${response && !selectedResponse && html`<div className="card" style=${{ padding: 0, overflow: 'hidden', marginBottom: '16px' }}>
-            <div style=${{ padding: '10px 16px', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center', gap: '12px' }}>
-              <span style=${{ fontSize: '12px', fontWeight: 600, color: 'var(--text-muted)' }}>Response</span>
-              <span className=${`api-tester-status ${statusClass}`}>
-                ${response.status} ${response.statusText}
-              </span>
-              <span style=${{ fontSize: '11px', color: 'var(--text-muted)' }}>${response.time}ms</span>
-              <span style=${{ fontSize: '11px', color: 'var(--text-muted)' }}>
-                ${response.size > 1024 ? (response.size / 1024).toFixed(1) + ' KB' : response.size + ' B'}
-              </span>
-              <div style=${{ marginLeft: 'auto', display: 'flex', gap: '6px' }}>
-                <button className="btn btn-ghost btn-sm" style=${{ fontSize: '11px' }}
-                  onClick=${() => { copyToClipboard(response.body || ''); toast('Copied', 'success'); }}>
-                  <${LuCopy} size=${12} /> Copy
-                </button>
-                <button className="btn btn-ghost btn-sm" style=${{ fontSize: '11px' }}
-                  onClick=${saveResponse}>
-                  <${LuSave} size=${12} /> Save
-                </button>
-              </div>
-            </div>
-            <div style=${{ display: 'flex', gap: '0', borderBottom: '1px solid var(--border)' }}>
-              <button style=${{
-                padding: '5px 14px', fontSize: '11px', background: 'none', border: 'none', cursor: 'pointer',
-                color: responseTab === 'body' ? 'var(--accent-light)' : 'var(--text-muted)',
-                borderBottom: responseTab === 'body' ? '2px solid var(--accent)' : '2px solid transparent',
-                fontWeight: responseTab === 'body' ? 600 : 400,
-              }} onClick=${() => setResponseTab('body')}>Body</button>
-              <button style=${{
-                padding: '5px 14px', fontSize: '11px', background: 'none', border: 'none', cursor: 'pointer',
-                color: responseTab === 'headers' ? 'var(--accent-light)' : 'var(--text-muted)',
-                borderBottom: responseTab === 'headers' ? '2px solid var(--accent)' : '2px solid transparent',
-                fontWeight: responseTab === 'headers' ? 600 : 400,
-              }} onClick=${() => setResponseTab('headers')}>Headers <span style=${{ fontSize: '10px', color: 'var(--text-muted)' }}>(${Object.keys(response.headers || {}).length})</span></button>
-            </div>
-            ${responseTab === 'body' && html`<div className="api-tester-response-body">
-              ${response.body || 'No response body'}
-            </div>`}
-            ${responseTab === 'headers' && html`<div style=${{ padding: '8px 0' }}>
-              ${Object.entries(response.headers || {}).map(([k, v]) => html`<div key=${k} style=${{
-                display: 'flex', padding: '4px 14px', fontSize: '12px', gap: '12px',
-                borderBottom: '1px solid rgba(255,255,255,0.03)',
-              }}>
-                <span style=${{ fontWeight: 600, color: 'var(--accent-light)', minWidth: '180px', fontFamily: "'SF Mono', monospace", fontSize: '11px' }}>${k}</span>
-                <span style=${{ color: 'var(--text-secondary)', fontFamily: "'SF Mono', monospace", fontSize: '11px', wordBreak: 'break-all' }}>${v}</span>
-              </div>`)}
-            </div>`}
-          </div>`}
-
-          ${!response && !loading && !selectedResponse && html`<div className="card">
-            <div className="empty-state" style=${{ padding: '40px' }}>
-              <div className="empty-icon"><${LuSend} size=${32} /></div>
-              <h3>Send a Request</h3>
-              <p>Enter a URL and click Send, or import from your existing routes</p>
-            </div>
-          </div>`}
-        </div>`}
-
-        <!-- Viewing a saved socket response detail -->
-        ${selectedResponse && testerMode !== 'rest' && (() => {
-          const r = (savedResponses[selectedResponse.testId] || []).find(x => x.id === selectedResponse.respId);
-          const parentTest = savedTests.find(t => t.id === selectedResponse.testId);
-          if (!r || !parentTest) return null;
-          return html`<${SavedResponseDetail}
-            key=${selectedResponse.respId}
-            resp=${r}
-            parentTest=${parentTest}
-            onBack=${() => { setSelectedResponse(null); loadTest(parentTest); }}
-            onUpdate=${(changes) => updateResponse(selectedResponse.testId, selectedResponse.respId, changes)} />`;
-        })()}
-      </div>
-    </div>
-
-    <!-- Import Route Panel -->
-    <${AnimatePresence}>
-      ${showImport && html`<${React.Fragment}>
-        <${motion.div}
-          key="import-overlay"
-          initial=${{ opacity: 0 }}
-          animate=${{ opacity: 1 }}
-          exit=${{ opacity: 0 }}
-          transition=${{ duration: 0.2 }}
-          onClick=${() => setShowImport(false)}
-          style=${{ position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, background: 'rgba(0,0,0,0.3)', zIndex: 1000 }}
-        />
-        <${motion.div}
-          key="import-panel"
-          initial=${{ x: '100%' }}
-          animate=${{ x: 0 }}
-          exit=${{ x: '100%' }}
-          transition=${{ type: 'tween', duration: 0.25, ease: [0.4, 0, 0.2, 1] }}
-          style=${{
-            position: 'fixed', top: 0, right: 0, bottom: 0, width: '25%', minWidth: '300px',
-            background: 'var(--bg-card)', borderLeft: '1px solid var(--border)',
-            boxShadow: '-8px 0 30px rgba(0,0,0,0.3)', zIndex: 1001,
-            display: 'flex', flexDirection: 'column',
-          }}>
-          <div style=${{ padding: '16px 20px', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexShrink: 0 }}>
-            <div style=${{ fontWeight: 600, fontSize: '15px' }}>Import from Routes</div>
-            <button onClick=${() => setShowImport(false)}
-              style=${{ background: 'none', border: 'none', color: 'var(--text-muted)', fontSize: '18px', cursor: 'pointer', padding: '4px 8px', borderRadius: '6px', lineHeight: 1 }}
-              onMouseOver=${(e) => e.currentTarget.style.color = 'var(--text)'}
-              onMouseOut=${(e) => e.currentTarget.style.color = 'var(--text-muted)'}>✕</button>
-          </div>
-          <div style=${{ flex: 1, overflowY: 'auto', padding: '8px 0' }}>
-            ${importLoading && html`<div style=${{ padding: '40px', textAlign: 'center' }}><span className="spinner" /></div>`}
-            ${!importLoading && importRoutes.length === 0 && html`<div style=${{ padding: '30px', textAlign: 'center', color: 'var(--text-muted)', fontSize: '13px' }}>No routes found</div>`}
-            ${!importLoading && importRoutes.map(route => html`<div key=${route.name}>
-              <div style=${{ padding: '10px 20px 6px', fontSize: '11px', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.5px', color: 'var(--text-muted)', position: 'sticky', top: 0, background: 'var(--bg-card)', zIndex: 1 }}>
-                ${route.name} <span style=${{ fontWeight: 400, textTransform: 'none' }}>(${route.prefix})</span>
-              </div>
-              ${route.endpoints.map((ep, i) => html`<div key=${i}
-                style=${{ padding: '9px 20px', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: '10px', transition: 'background 0.1s', borderBottom: '1px solid rgba(255,255,255,0.02)' }}
-                onClick=${() => importEndpoint(route, ep)}
-                onMouseOver=${(e) => e.currentTarget.style.background = 'var(--bg-input)'}
-                onMouseOut=${(e) => e.currentTarget.style.background = 'transparent'}>
-                <span className=${`route-method ${ep.method.toLowerCase()}`} style=${{ fontSize: '10px', padding: '2px 7px' }}>${ep.method}</span>
-                <span style=${{ fontFamily: "'SF Mono', monospace", fontSize: '12px', color: 'var(--text-primary)', flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>${ep.fullPath}</span>
-                ${ep.bodyFields?.length > 0 && html`<span style=${{ fontSize: '10px', color: 'var(--text-muted)', flexShrink: 0 }}>${ep.bodyFields.length} fields</span>`}
-              </div>`)}
-            </div>`)}
-          </div>
-        <//>
-      <//>`}
-    <//>
-  </div>`;
-}
-