4bnode 4.1.0 → 4.1.1

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

@@ -483,6 +483,7 @@ export function ApiTesterPage() {
     { 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');
@@ -504,11 +505,151 @@ export function ApiTesterPage() {
   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);
-      if (data.responses) setSavedResponses(data.responses);
+      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(() => {});
   }, []);
@@ -551,9 +692,12 @@ export function ApiTesterPage() {
   // 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;
@@ -614,13 +758,15 @@ export function ApiTesterPage() {
   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: savedResponses } }).catch(() => {});
+    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: savedTests, responses: resp } }).catch(() => {});
+    api('/api-tester/data', { method: 'PUT', body: { tests: savedTestsRef.current, responses: resp } }).catch(() => {});
   }
 
   function saveResponse() {
@@ -709,8 +855,16 @@ export function ApiTesterPage() {
     setSelectedResponse(null);
     try {
       const hdrs = {};
-      headers.forEach(h => { if (h.key?.trim() && h.value?.trim()) hdrs[h.key] = h.value; });
-      const finalUrl = buildDisplayUrl();
+      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;
@@ -728,12 +882,12 @@ export function ApiTesterPage() {
             if (f.type === 'file' && !f.fileData && !f.value) {
               return null; // Skip empty file fields
             }
-            return { key: f.key, value: f.value || '' };
+            return { key: f.key, value: subst(f.value || '') };
           }).filter(Boolean);
         } else if (bodyType === 'binary') {
           sendBody = body; // base64 encoded
         } else {
-          sendBody = body;
+          sendBody = subst(body);
         }
       }
 
@@ -759,12 +913,19 @@ export function ApiTesterPage() {
         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);
   }
@@ -923,7 +1084,15 @@ export function ApiTesterPage() {
       setUrlParams([]);
     }
 
-    // Set body fields for POST/PUT/PATCH
+    // 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 => {
@@ -935,6 +1104,10 @@ export function ApiTesterPage() {
     } 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)) {
@@ -1213,6 +1386,23 @@ export function ApiTesterPage() {
           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"
@@ -1233,6 +1423,16 @@ export function ApiTesterPage() {
               ${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
@@ -1254,6 +1454,47 @@ export function ApiTesterPage() {
             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' }}>
@@ -1285,8 +1526,32 @@ export function ApiTesterPage() {
                 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}
@@ -1351,6 +1616,7 @@ export function ApiTesterPage() {
 
               ${(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}