4bnode 4.2.0 → 4.2.1

package/skeleton/.4bnode/assets/js/components/Sidebar.js

@@ -1,74 +1,74 @@
 import React from "react";
-import { html, Icons } from "../lib.js";
+import { html, Icons, NAV, MOD_KEY } from "../lib.js";
 import { useApp } from "../context.js";
 
 export function Sidebar() {
-  const { page, setPage, data } = useApp();
+  const {
+    page, setPage, data, status, health,
+    collapsed, toggleCollapsed, mobileNav, setMobileNav, openPalette,
+  } = useApp();
   const dbOk = data.mongoConfigured;
+  const online = !!health;
 
-  const navItems = [
-    {
-      id: "dashboard",
-      label: "Dashboard",
-      icon: Icons.dashboard,
-      section: "Overview",
-    },
-    // AI Builder — temporarily hidden from the menu (re-enable by uncommenting)
-    // { id: "ai-builder", label: "AI Builder", icon: Icons.ai },
-    {
-      id: "database",
-      label: "Database",
-      icon: Icons.database,
-      section: "Setup",
-    },
-    {
-      id: "schemas",
-      label: "Schemas",
-      icon: Icons.schema,
-      locked: !dbOk,
-      lockMsg: "Requires database",
-    },
-    { id: "routes", label: "API Routes", icon: Icons.route },
-    { id: "docs", label: "API Docs", icon: Icons.docs },
-    { id: "api-tester", label: "API Tester", icon: Icons.apiTester },
-    {
-      id: "security",
-      label: "Security",
-      icon: Icons.shield,
-      section: "Features",
-    },
-    { id: "realtime", label: "Real-time", icon: Icons.realtime },
-    { id: "serialport", label: "SerialPort", icon: Icons.serial },
-    { id: "mail", label: "Email", icon: Icons.mail },
-    { id: "discovery", label: "Discovery", icon: Icons.network },
-    { id: "logs", label: "Logs", icon: Icons.logs, section: "Settings" },
-    { id: "env", label: "Environment", icon: Icons.env },
-  ];
+  function go(id) {
+    setPage(id);
+    setMobileNav(false);
+  }
 
   let currentSection = null;
-  return html`<div className="sidebar">
-    <div className="sidebar-brand">
-      <pre>${`██╗  ██╗██████╗ ███╗   ██╗ ██████╗ ██████╗ ███████╗\n██║  ██║██╔══██╗████╗  ██║██╔═══██╗██╔══██╗██╔════╝\n███████║██████╔╝██╔██╗ ██║██║   ██║██║  ██║█████╗\n╚════██║██╔══██╗██║╚██╗██║██║   ██║██║  ██║██╔══╝\n     ██║██████╔╝██║ ╚████║╚██████╔╝██████╔╝███████╗\n     ╚═╝╚═════╝ ╚═╝  ╚═══╝ ╚═════╝ ╚═════╝ ╚══════╝`}</pre>
-    </div>
-    ${navItems.map((item) => {
-      const sectionHeader =
-        item.section && item.section !== currentSection
-          ? ((currentSection = item.section),
-            html`<div className="sidebar-section">${item.section}</div>`)
-          : null;
-      return html`<${React.Fragment} key=${item.id}>
-        ${sectionHeader}
-        <div
-          className=${`sidebar-item ${page === item.id ? "active" : ""} ${item.locked ? "locked" : ""}`}
-          onClick=${() => !item.locked && setPage(item.id)}
-          title=${item.locked ? item.lockMsg : item.label}
-        >
-          <span className="sidebar-icon">${item.icon}</span>
-          ${item.label}
-          ${item.locked &&
-          html`<span className="lock-icon">${Icons.lock}</span>`}
+  return html`<${React.Fragment}>
+    ${mobileNav && html`<div className="sidebar-scrim" onClick=${() => setMobileNav(false)} />`}
+    <aside className=${`sidebar${collapsed ? " collapsed" : ""}${mobileNav ? " open" : ""}`}>
+      <div className="sidebar-brand">
+        <div className="brand-mark">4b</div>
+        <div className="brand-text">
+          <span className="brand-name">4bnode</span>
+          <span className="brand-app" title=${status.appName || ""}>${status.appName || "project"}</span>
         </div>
-      <//>`;
-    })}
-  </div>`;
+      </div>
+
+      <button className="sidebar-search" onClick=${openPalette} title="Search (${MOD_KEY}K)">
+        <span className="sidebar-icon">${Icons.search}</span>
+        <span className="sidebar-label">Search…</span>
+        <kbd className="sidebar-kbd">${MOD_KEY}K</kbd>
+      </button>
+
+      <nav className="sidebar-nav">
+        ${NAV.map((item) => {
+          const locked = item.needsDb && !dbOk;
+          const sectionHeader =
+            item.section !== currentSection
+              ? ((currentSection = item.section),
+                html`<div className="sidebar-section"><span>${item.section}</span></div>`)
+              : null;
+          return html`<${React.Fragment} key=${item.id}>
+            ${sectionHeader}
+            <button
+              className=${`sidebar-item${page === item.id ? " active" : ""}${locked ? " locked" : ""}`}
+              onClick=${() => !locked && go(item.id)}
+              title=${locked ? "Requires database" : item.label}
+              aria-current=${page === item.id ? "page" : undefined}
+            >
+              <span className="sidebar-icon">${item.icon}</span>
+              <span className="sidebar-label">${item.label}</span>
+              ${locked && html`<span className="lock-icon">${Icons.lock}</span>`}
+            </button>
+          <//>`;
+        })}
+      </nav>
+
+      <div className="sidebar-footer">
+        <div className="sidebar-status" title=${online ? "Server online" : "Server unreachable"}>
+          <span className=${`status-dot ${online ? "on" : "off"}`} />
+          <span className="sidebar-label">
+            ${online ? `Online · ${health.node}` : "Connecting…"}
+          </span>
+        </div>
+        <button className="sidebar-collapse" onClick=${toggleCollapsed}
+          title=${collapsed ? "Expand sidebar ([)" : "Collapse sidebar ([)"}>
+          ${collapsed ? Icons.expand : Icons.collapse}
+        </button>
+      </div>
+    </aside>
+  <//>`;
 }

package/skeleton/.4bnode/assets/js/lib.js

@@ -24,6 +24,15 @@ import {
   LuBookOpen,
   LuMail,
   LuWifi,
+  LuSearch,
+  LuPanelLeftClose,
+  LuPanelLeftOpen,
+  LuMenu,
+  LuExternalLink,
+  LuRefreshCw,
+  LuKeyboard,
+  LuCommand,
+  LuX,
 } from "react-icons/lu";
 
 export const html = htm.bind(React.createElement);
@@ -96,8 +105,75 @@ export const Icons = {
   docs: html`<${LuBookOpen} size=${16} />`,
   mail: html`<${LuMail} size=${16} />`,
   network: html`<${LuWifi} size=${16} />`,
+  search: html`<${LuSearch} size=${15} />`,
+  collapse: html`<${LuPanelLeftClose} size=${16} />`,
+  expand: html`<${LuPanelLeftOpen} size=${16} />`,
+  menu: html`<${LuMenu} size=${18} />`,
+  external: html`<${LuExternalLink} size=${14} />`,
+  refresh: html`<${LuRefreshCw} size=${14} />`,
+  keyboard: html`<${LuKeyboard} size=${16} />`,
+  command: html`<${LuCommand} size=${16} />`,
+  close: html`<${LuX} size=${16} />`,
 };
 
+// Single source of truth for navigation — used by the Sidebar and the ⌘K
+// command palette. `key` is the second key of the `g <key>` jump shortcut.
+export const NAV = [
+  { id: "dashboard", label: "Dashboard", icon: Icons.dashboard, section: "Overview", key: "d" },
+  // AI Builder — temporarily hidden from the menu (re-enable by uncommenting)
+  // { id: "ai-builder", label: "AI Builder", icon: Icons.ai, section: "Overview" },
+  { id: "database", label: "Database", icon: Icons.database, section: "Build", key: "b" },
+  { id: "schemas", label: "Schemas", icon: Icons.schema, section: "Build", key: "s", needsDb: true },
+  { id: "routes", label: "API Routes", icon: Icons.route, section: "Build", key: "r" },
+  { id: "docs", label: "API Docs", icon: Icons.docs, section: "Build", key: "o" },
+  { id: "api-tester", label: "API Tester", icon: Icons.apiTester, section: "Build", key: "t" },
+  { id: "security", label: "Security", icon: Icons.shield, section: "Features", key: "x" },
+  { id: "realtime", label: "Real-time", icon: Icons.realtime, section: "Features", key: "w" },
+  { id: "serialport", label: "SerialPort", icon: Icons.serial, section: "Features", key: "p" },
+  { id: "mail", label: "Email", icon: Icons.mail, section: "Features", key: "m" },
+  { id: "discovery", label: "Discovery", icon: Icons.network, section: "Features", key: "n" },
+  { id: "logs", label: "Logs", icon: Icons.logs, section: "System", key: "l" },
+  { id: "env", label: "Environment", icon: Icons.env, section: "System", key: "e" },
+];
+
+export const IS_MAC = /Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent);
+export const MOD_KEY = IS_MAC ? "⌘" : "Ctrl";
+
+export function formatBytes(n) {
+  if (n == null) return "—";
+  const u = ["B", "KB", "MB", "GB"];
+  let i = 0;
+  while (n >= 1024 && i < u.length - 1) { n /= 1024; i++; }
+  return `${n.toFixed(n < 10 && i > 0 ? 1 : 0)} ${u[i]}`;
+}
+
+export function formatDuration(sec) {
+  if (sec == null) return "—";
+  if (sec < 60) return `${sec}s`;
+  const m = Math.floor(sec / 60);
+  if (m < 60) return `${m}m ${sec % 60}s`;
+  const h = Math.floor(m / 60);
+  if (h < 24) return `${h}h ${m % 60}m`;
+  return `${Math.floor(h / 24)}d ${h % 24}h`;
+}
+
+export function timeAgo(ts) {
+  const s = Math.max(0, Math.round((Date.now() - ts) / 1000));
+  if (s < 5) return "just now";
+  if (s < 60) return `${s}s ago`;
+  const m = Math.floor(s / 60);
+  if (m < 60) return `${m}m ago`;
+  const h = Math.floor(m / 60);
+  return h < 24 ? `${h}h ago` : `${Math.floor(h / 24)}d ago`;
+}
+
+// True when a key event comes from a text field — global shortcuts skip these.
+export function isTypingTarget(el) {
+  if (!el) return false;
+  const tag = el.tagName;
+  return tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT" || el.isContentEditable;
+}
+
 export const PAGE_TITLES = {
   dashboard: "Dashboard",
   "ai-builder": "AI Builder",

package/skeleton/.4bnode/assets/js/pages/ApiTesterPage.js

@@ -2,7 +2,7 @@ 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 { html, api, Icons, copyToClipboard, timeAgo } from "../lib.js";
 import { useApp } from "../context.js";
 import { Modal } from "../components/Modal.js";
 
@@ -135,7 +135,7 @@ function SocketIOTester({ selectedSaved, isSaved, loadedTest, onSaveTest, onSave
       </button>`}
     </div>
 
-    <div style=${{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '16px', marginBottom: '16px' }}>
+    <div className="grid-2" style=${{ 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)' }}>
@@ -430,12 +430,12 @@ export function SavedResponseDetail({ resp, parentTest, onBack, onUpdate }) {
         <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>
+          <span style=${{ fontFamily: "var(--mono)", 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>
+            <pre style=${{ margin: 0, fontFamily: "var(--mono)", 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}
@@ -616,28 +616,67 @@ export function ApiTesterPage() {
   // ── Request history (persisted per-browser) ──
   const [history, setHistory] = useState([]);
   const [showHistory, setShowHistory] = useState(false);
+  const [historyQuery, setHistoryQuery] = useState('');
   useEffect(() => {
-    try { const h = JSON.parse(sessionStorage.getItem('_4bnode_history') || '[]'); if (Array.isArray(h)) setHistory(h); } catch {}
+    try { const h = JSON.parse(localStorage.getItem('_4bnode_history') || '[]'); if (Array.isArray(h)) setHistory(h); } catch {}
   }, []);
+  // Each entry stores the full request (not the response) so it can be replayed.
+  // File contents are stripped to keep storage small.
   function pushHistory(entry) {
+    const req = {
+      headers: headers.map(h => ({ ...h })),
+      body,
+      bodyType,
+      params: params.map(p => ({ ...p })),
+      urlParams: urlParams.map(p => ({ ...p })),
+      formFields: formFields.map(({ fileData, ...f }) => f),
+    };
     setHistory(prev => {
-      const next = [entry, ...prev].slice(0, 50);
-      try { sessionStorage.setItem('_4bnode_history', JSON.stringify(next)); } catch {}
+      const next = [{ ...entry, req }, ...prev].slice(0, 100);
+      try { localStorage.setItem('_4bnode_history', JSON.stringify(next)); } catch {}
       return next;
     });
   }
   function clearHistory() {
     setHistory([]);
-    try { sessionStorage.removeItem('_4bnode_history'); } catch {}
+    try { localStorage.removeItem('_4bnode_history'); } catch {}
+  }
+  function historySnap(h) {
+    return { method: h.method, url: h.url, ...(h.req || {}), response: null, activeTab: 'body' };
   }
   function loadHistory(h) {
-    setMethod(h.method);
-    setUrl(h.url);
-    setResponse(null);
-    setSelectedSaved(null);
-    setSelectedResponse(null);
+    if (h.req) loadSnap(historySnap(h));
+    else { setMethod(h.method); setUrl(h.url); setResponse(null); setSelectedSaved(null); setSelectedResponse(null); }
+    setShowHistory(false);
+  }
+  function openHistoryInNewTab(h) {
+    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: historySnap(h) }]);
+    loadSnap(historySnap(h));
+    setActiveTabId(id);
     setShowHistory(false);
   }
+  const filteredHistory = historyQuery.trim()
+    ? history.filter(h => (h.method + ' ' + h.url + ' ' + h.status).toLowerCase().includes(historyQuery.trim().toLowerCase()))
+    : history;
+
+  // Keyboard shortcuts (REST mode): ⌘/Ctrl+Enter send, Alt+N new tab,
+  // Alt+W close tab, Alt+H history. A ref keeps the handler on fresh state.
+  const shortcutRef = useRef(null);
+  shortcutRef.current = (e) => {
+    if (testerMode !== 'rest' || document.querySelector('.palette-overlay, .modal-overlay')) return;
+    const k = e.key.toLowerCase();
+    if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') { e.preventDefault(); if (!loading && url.trim()) sendRequest(); }
+    else if (e.altKey && (k === 'n' || e.code === 'KeyN')) { e.preventDefault(); newTab(); }
+    else if (e.altKey && (k === 'w' || e.code === 'KeyW')) { e.preventDefault(); closeTab(activeTabId); }
+    else if (e.altKey && (k === 'h' || e.code === 'KeyH')) { e.preventDefault(); setShowHistory(v => !v); setShowVars(false); }
+  };
+  useEffect(() => {
+    const onKey = (e) => shortcutRef.current && shortcutRef.current(e);
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, []);
 
   // 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
@@ -909,6 +948,15 @@ export function ApiTesterPage() {
         hdrs[auth.apiKeyKey.trim()] = subst(auth.apiKeyValue);
       }
       const finalUrl = subst(buildDisplayUrl());
+      // App-wide API key gate: send {{apiKey}} as x-api-key, but only to this
+      // machine, so the key never leaks to an external URL.
+      const apiKeyVar = variables.find(v => v.key === 'apiKey' && v.value);
+      if (apiKeyVar && !Object.keys(hdrs).some(h => h.toLowerCase() === 'x-api-key')) {
+        try {
+          const host = new URL(finalUrl).hostname;
+          if ([window.location.hostname, 'localhost', '127.0.0.1', '[::1]'].includes(host)) hdrs['x-api-key'] = apiKeyVar.value;
+        } catch {}
+      }
       // For base64 send-as, convert form field value into body JSON
       let sendBody = undefined;
       let sendBodyType = bodyType;
@@ -1304,7 +1352,7 @@ export function ApiTesterPage() {
   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 methodColors = { GET: 'var(--success)', POST: 'var(--accent-light)', PUT: 'var(--warning)', PATCH: '#b48cff', DELETE: 'var(--error)' };
 
   const modeTabs = [
     { id: 'rest', label: 'REST API', icon: LuSend },
@@ -1364,8 +1412,8 @@ export function ApiTesterPage() {
                   </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>`}
+                  ${testType === 'socketio' && html`<span style=${{ fontSize: '9px', padding: '1px 5px', borderRadius: '4px', fontWeight: 700, fontFamily: "var(--mono)", ...typeBadgeStyles.socketio }}>SIO</span>`}
+                  ${testType === 'websocket' && html`<span style=${{ fontSize: '9px', padding: '1px 5px', borderRadius: '4px', fontWeight: 700, fontFamily: "var(--mono)", ...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 }}
@@ -1385,7 +1433,7 @@ export function ApiTesterPage() {
                   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",
+                      ? html`<span style=${{ fontSize: '10px', padding: '1px 5px', borderRadius: '4px', fontWeight: 700, fontFamily: "var(--mono)",
                           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' ? '↑' : '●'}
@@ -1432,20 +1480,24 @@ export function ApiTesterPage() {
 
         ${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 className="req-tabs" role="tablist">
+            ${tabs.map(t => {
+              const active = t.id === activeTabId;
+              const s = active ? { method, url } : (t.snap || {});
+              const label = tabLabel(t);
+              const m = s.url ? (s.method || 'GET') : null;
+              return html`<div key=${t.id} role="tab" aria-selected=${active}
+                className=${`req-tab${active ? ' active' : ''}`}
+                onClick=${() => switchTab(t.id)}
+                onAuxClick=${(e) => { if (e.button === 1) { e.preventDefault(); closeTab(t.id); } }}
+                title=${s.url || 'New Request'}>
+                ${m && html`<span className="req-tab-method" style=${{ color: methodColors[m] || 'var(--text-secondary)' }}>${m}</span>`}
+                <span className="req-tab-label">${m ? label.slice(m.length + 1) : label}</span>
+                ${tabs.length > 1 && html`<button className="req-tab-close" aria-label="Close tab"
+                  onClick=${(e) => { e.stopPropagation(); closeTab(t.id); }}>×</button>`}
+              </div>`;
+            })}
+            <button className="req-tab-new" onClick=${newTab} title="New request tab (Alt+N)"><${LuPlus} size=${14} /></button>
           </div>
 
           <!-- Request bar -->
@@ -1464,7 +1516,7 @@ export function ApiTesterPage() {
               onInput=${(e) => setUrl(e.target.value)}
               onKeyDown=${(e) => { if (e.key === 'Enter') sendRequest(); }}
             />
-            <button className="api-tester-send" onClick=${sendRequest} disabled=${loading || !url.trim()}>
+            <button className="api-tester-send" onClick=${sendRequest} disabled=${loading || !url.trim()} title="Send (Ctrl/⌘+Enter)">
               ${loading ? html`<${LuLoader} size=${14} className="spin" />` : html`<${LuSend} size=${14} />`}
               Send
             </button>
@@ -1474,7 +1526,7 @@ export function ApiTesterPage() {
               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"
+              title="Request history (Alt+H)"
               style=${{ background: showHistory ? 'var(--accent-glow)' : 'transparent', border: '1px solid var(--border)', color: showHistory ? 'var(--accent-light)' : 'var(--text-primary)' }}>
               History
             </button>
@@ -1495,7 +1547,7 @@ export function ApiTesterPage() {
 
           ${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)',
+            fontFamily: "var(--mono)", background: 'rgba(91,140,255,0.04)',
             borderRadius: '6px', marginBottom: '8px', wordBreak: 'break-all',
           }}>${displayUrl}</div>`}
 
@@ -1520,24 +1572,32 @@ export function ApiTesterPage() {
               </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.
+              Reference anywhere with <span style=${{ fontFamily: "var(--mono)", 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>`}
+          ${showHistory && html`<div className="hist-panel">
+            <div className="hist-head">
+              <span style=${{ fontSize: '12px', fontWeight: 600, marginRight: '4px' }}>History</span>
+              <input placeholder="Filter by method, URL or status…" value=${historyQuery}
+                onInput=${e => setHistoryQuery(e.target.value)} autoFocus />
+              ${history.length > 0 && html`<button className="btn btn-ghost btn-sm" onClick=${clearHistory}>Clear</button>`}
+            </div>
+            <div className="hist-list">
+              ${filteredHistory.length === 0
+                ? html`<div style=${{ padding: '16px', color: 'var(--text-muted)', fontSize: '12px' }}>
+                    ${history.length ? 'No matching requests.' : 'No requests yet — sent requests show up here.'}
+                  </div>`
+                : filteredHistory.map(h => html`<div key=${h.id} className="hist-row" onClick=${() => loadHistory(h)} title="Load into current tab">
+                    <span style=${{ fontWeight: 600, fontFamily: 'var(--mono)', fontSize: '11px', color: methodColors[h.method] || 'var(--text-secondary)', minWidth: '50px' }}>${h.method}</span>
+                    <span style=${{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', fontFamily: 'var(--mono)' }}>${h.url}</span>
+                    <span style=${{ fontWeight: 600, fontFamily: 'var(--mono)', color: h.status >= 200 && h.status < 300 ? 'var(--success)' : h.status === 0 ? 'var(--text-muted)' : h.status >= 500 ? 'var(--error)' : 'var(--warning)' }}>${h.status || 'ERR'}</span>
+                    <span style=${{ color: 'var(--text-muted)', minWidth: '52px', textAlign: 'right', fontVariantNumeric: 'tabular-nums' }}>${h.time ? h.time + ' ms' : ''}</span>
+                    <span style=${{ color: 'var(--text-muted)', minWidth: '58px', textAlign: 'right' }}>${timeAgo(h.ts)}</span>
+                    <button className="btn btn-ghost btn-sm hist-open" title="Open in new tab"
+                      onClick=${(e) => { e.stopPropagation(); openHistoryInNewTab(h); }}><${LuPlus} size=${12} /> Tab</button>
+                  </div>`)}
             </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.) -->
@@ -1547,12 +1607,12 @@ export function ApiTesterPage() {
             </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",
+                flex: '0 0 120px', opacity: 0.6, fontWeight: 600, fontFamily: "var(--mono)",
                 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' }} />
+                style=${{ fontFamily: "var(--mono)", fontSize: '12px' }} />
             </div>`)}
           </div>`}
 
@@ -1837,8 +1897,8 @@ export function ApiTesterPage() {
                 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>
+                <span style=${{ fontWeight: 600, color: 'var(--accent-light)', minWidth: '180px', fontFamily: "var(--mono)", fontSize: '11px' }}>${k}</span>
+                <span style=${{ color: 'var(--text-secondary)', fontFamily: "var(--mono)", fontSize: '11px', wordBreak: 'break-all' }}>${v}</span>
               </div>`)}
             </div>`}
           </div>`}
@@ -1911,7 +1971,7 @@ export function ApiTesterPage() {
                 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>
+                <span style=${{ fontFamily: "var(--mono)", 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>`)}