@safagayret/bemirror 2.2.1 → 2.3.0

package/README.md

@@ -2,6 +2,8 @@
 
 > **Fake mirror your backend, fast.**
 
+![Screenshot](image.png)
+
 **be.mirror** is an ultra-lightweight, zero-backend, local Node.js API mock server built for frontend teams. It allows you to visualize, create, and interact with complex mock endpoints completely locally without the heavy setup of databases or third-party cloud tools.
 
 ## ✨ Features
@@ -68,8 +70,8 @@ Once started, open `http://localhost:8000` (or your configured port) to use the
 
 Your mock data is stored in JSON files in your project root directory:
 
-- `endpoints.json`: Contains your project, entity, and endpoint configurations
-- `variables.json`: Contains global variables for use in endpoints
+- `bemirror-endpoints.json`: Contains your project, entity, and endpoint configurations
+- `bemirror-variables.json`: Contains global variables for use in endpoints
 
 These files are automatically created when you add data through the UI. You can commit them to your repository to share mock configurations with your team.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@safagayret/bemirror",
-  "version": "2.2.1",
+  "version": "2.3.0",
   "description": "Fake mirror your backend, fast",
   "main": "index.js",
   "bin": {

package/public/css/style.css

@@ -121,8 +121,8 @@ svg {
 .app-layout {
   display: flex;
   height: 100vh;
-  padding: 20px;
-  gap: 20px;
+  padding: 5px;
+  gap: 5px;
 }
 
 .app-footer {
@@ -440,14 +440,25 @@ svg {
 
 .live-url-box {
   background: rgba(88, 166, 255, 0.08);
-  border: 1px dashed var(--accent);
   border-radius: 8px;
-  padding: 12px 16px;
+  padding: 5px;
   display: flex;
   align-items: center;
   gap: 12px;
 }
 
+.method-inline-wrap {
+  width: 110px;
+  flex-shrink: 0;
+}
+
+.method-inline-select {
+  font-family: var(--font-mono);
+  font-weight: 700;
+  letter-spacing: 0.6px;
+  text-transform: uppercase;
+}
+
 .url-badge {
   font-weight: 600;
   font-size: 12px;
@@ -471,11 +482,81 @@ svg {
   text-decoration: underline;
 }
 
+.mock-url-editor {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  min-width: 0;
+  border: 1px solid var(--input-border);
+  border-radius: 8px;
+  overflow: hidden;
+  background: rgba(0, 0, 0, 0.18);
+}
+
+.mock-url-base {
+  padding: 9px 12px;
+  font-family: var(--font-mono);
+  font-size: 12px;
+  color: var(--text-muted);
+  white-space: nowrap;
+  max-width: 260px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  border-right: 1px solid var(--input-border);
+}
+
+.mock-path-input {
+  border: none;
+  background: transparent;
+  color: var(--text-main);
+  font-family: var(--font-mono);
+  font-size: 13px;
+  padding: 9px 12px;
+  min-width: 140px;
+}
+
+.mock-path-input:focus {
+  outline: none;
+}
+
+.mock-url-open {
+  color: var(--accent);
+  font-size: 12px;
+  font-family: var(--font-mono);
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+.mock-url-open:hover {
+  text-decoration: underline;
+}
+
+.url-actions-group {
+  display: flex;
+  gap: 6px;
+  margin-left: auto;
+}
+
+.btn-url-action {
+  border: 1px solid var(--panel-border);
+  background: rgba(255, 255, 255, 0.05);
+  color: var(--text-main);
+  padding: 6px 10px;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  white-space: nowrap;
+  border-radius: 6px;
+  cursor: pointer;
+}
+
+.btn-url-action:hover {
+  border-color: var(--accent);
+}
+
 .prod-url-box {
   background: rgba(46, 160, 67, 0.08);
-  border: 1px solid rgba(46, 160, 67, 0.4);
   border-radius: 8px;
-  padding: 8px 12px;
+  padding: 5px;
   display: flex;
   align-items: center;
   gap: 12px;
@@ -486,6 +567,7 @@ svg {
   background: transparent;
   font-family: var(--font-mono);
   font-size: 14px;
+  min-height: 38px;
   flex: 1;
   outline: none;
   color: var(--text-main);
@@ -508,6 +590,15 @@ svg {
   background: #2ea043;
 }
 
+.btn-send-secondary {
+  background: rgba(255, 255, 255, 0.1);
+  border-color: var(--panel-border);
+}
+
+.btn-send-secondary:hover {
+  background: rgba(255, 255, 255, 0.16);
+}
+
 /* PROD RESPONSE PANEL */
 .prod-response-wrapper {
   margin-bottom: 20px;
@@ -544,6 +635,140 @@ svg {
   border-radius: 4px;
 }
 
+.response-diff-panel {
+  margin-top: 12px;
+  border: 1px solid var(--input-border);
+  border-radius: 8px;
+  background: rgba(13, 17, 23, 0.7);
+  padding: 12px;
+}
+
+.response-diff-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+  font-size: 12px;
+  color: var(--text-muted);
+  font-weight: 600;
+}
+
+.response-diff-summary {
+  font-family: var(--font-mono);
+  font-size: 11px;
+}
+
+.response-diff-legend {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 10px;
+}
+
+.legend-item {
+  border: 1px solid var(--panel-border);
+  border-radius: 999px;
+  padding: 2px 8px;
+  font-size: 10px;
+  font-family: var(--font-mono);
+  text-transform: uppercase;
+}
+
+.legend-added {
+  background: rgba(46, 160, 67, 0.18);
+  color: #59d185;
+}
+
+.legend-removed {
+  background: rgba(218, 54, 51, 0.18);
+  color: #ff8f87;
+}
+
+.legend-changed {
+  background: rgba(210, 153, 34, 0.2);
+  color: #f3c86f;
+}
+
+.response-diff-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.response-diff-column h4 {
+  font-size: 11px;
+  color: var(--text-muted);
+  margin-bottom: 6px;
+  font-weight: 600;
+}
+
+.response-diff-content {
+  border: 1px solid var(--panel-border);
+  border-radius: 6px;
+  max-height: 240px;
+  overflow: auto;
+  background: rgba(0, 0, 0, 0.25);
+  font-family: var(--font-mono);
+  font-size: 11px;
+}
+
+.diff-line {
+  display: grid;
+  grid-template-columns: 36px 1fr;
+  gap: 8px;
+  padding: 2px 8px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
+  white-space: pre;
+}
+
+.diff-line:last-child {
+  border-bottom: none;
+}
+
+.diff-line-no {
+  text-align: right;
+  color: var(--text-muted);
+  opacity: 0.8;
+}
+
+.diff-line-text {
+  overflow-x: auto;
+}
+
+.diff-line.added,
+.diff-line.changed {
+  border-left: 2px solid transparent;
+}
+
+.diff-line.removed,
+.diff-line.changed-old {
+  border-left: 2px solid transparent;
+}
+
+.diff-line.added {
+  background: rgba(46, 160, 67, 0.15);
+  border-left-color: #2ea043;
+}
+
+.diff-line.removed {
+  background: rgba(218, 54, 51, 0.15);
+  border-left-color: #da3633;
+}
+
+.diff-line.changed {
+  background: rgba(210, 153, 34, 0.2);
+  border-left-color: #d29922;
+}
+
+.diff-line.changed-old {
+  background: rgba(210, 153, 34, 0.12);
+  border-left-color: #d29922;
+}
+
+.diff-placeholder {
+  padding: 12px;
+  color: var(--text-muted);
+}
+
 /* Forms */
 .form-row {
   display: flex;
@@ -880,16 +1105,51 @@ select:focus {
     align-items: flex-start;
   }
 
-  #btnCopyCurl,
-  #btnCopyFetch {
-    margin-left: 0;
-    margin-top: 10px;
+  .method-inline-wrap {
     width: 100%;
   }
 
   .live-url-box > div {
+    width: 100%;
     flex-wrap: wrap;
   }
+
+  .mock-url-editor {
+    width: 100%;
+  }
+
+  .mock-url-base {
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .url-actions-group {
+    width: 100%;
+    margin-left: 0;
+  }
+
+  .btn-url-action {
+    flex: 1;
+    text-align: center;
+  }
+
+  .prod-url-box {
+    flex-wrap: wrap;
+  }
+
+  .prod-url-input {
+    min-width: 100%;
+  }
+
+  .btn-send,
+  .btn-send-secondary {
+    flex: 1;
+  }
+
+  .response-diff-grid {
+    grid-template-columns: 1fr;
+  }
 }
 
 /* SPLIT EDITOR LAYOUT */

package/public/index.html

@@ -56,8 +56,9 @@
         <br />
         <p>
           <strong>🔧 Variables:</strong> Use variables in your endpoints with {{variableName}} syntax.
-          Create a variables.json file in the project root to define global variables like base URLs,
-          usernames, and passwords. This file should be added to .gitignore to keep sensitive data private.
+          Create a bemirror-variables.json file in the project root to define global variables like base
+          URLs, usernames, and passwords. This file should be added to .gitignore to keep sensitive data
+          private.
         </p>
       </div>
       <div class="modal-footer form-actions" style="margin-top: 20px">
@@ -310,43 +311,36 @@
 
           <!-- MOCK URL AREA -->
           <div class="http-clients-area">
-            <div class="live-url-box" style="justify-content: space-between">
-              <div style="display: flex; align-items: center; gap: 12px; flex: 1">
-                <div class="url-badge">⚡ Mock URL</div>
-                <a href="#" id="liveUrlLink" target="_blank" class="live-url-link">Select an endpoint to see the mock
-                  URL</a>
+            <div class="live-url-box">
+              <div class="method-inline-wrap">
+                <select id="method" required class="method-inline-select">
+                  <option value="GET">GET</option>
+                  <option value="POST">POST</option>
+                  <option value="PUT">PUT</option>
+                  <option value="PATCH">PATCH</option>
+                  <option value="DELETE">DELETE</option>
+                </select>
+              </div>
+              <div style="display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0">
+                <div class="mock-url-editor">
+                  <span id="mockUrlBase" class="mock-url-base"></span>
+                  <input type="text" id="mockPathInput" class="mock-path-input" placeholder="/users/profile" />
+                </div>
+                <a href="#" id="liveUrlOpenLink" target="_blank" class="mock-url-open">Open</a>
+              </div>
+              <div class="url-actions-group">
+                <button id="btnCopyMockUrl" class="btn-url-action" title="Copy mock URL">Copy URL</button>
+                <button id="btnCopyCurl" class="btn-url-action" title="Copy terminal cURL command">Copy cURL</button>
+                <button id="btnCopyFetch" class="btn-url-action" title="Copy JS fetch()">Copy fetch</button>
               </div>
-              <button id="btnCopyCurl" class="btn-icon" title="Copy terminal cURL command" style="
-                  border: 1px solid var(--panel-border);
-                  background: rgba(255, 255, 255, 0.05);
-                  padding: 4px 10px;
-                  font-family: monospace;
-                  font-size: 11px;
-                  white-space: nowrap;
-                  border-radius: 4px;
-                  margin-left: 10px;
-                ">
-                Copy cURL
-              </button>
-              <button id="btnCopyFetch" class="btn-icon" title="Copy JS fetch()" style="
-                  border: 1px solid var(--panel-border);
-                  background: rgba(255, 255, 255, 0.05);
-                  padding: 4px 10px;
-                  font-family: monospace;
-                  font-size: 11px;
-                  white-space: nowrap;
-                  border-radius: 4px;
-                  margin-left: 5px;
-                ">
-                Copy fetch
-              </button>
             </div>
 
             <!-- PROD URL TESTER AREA -->
             <div class="prod-url-box">
-              <div class="url-badge" style="color: var(--success)">🌍 Prod URL</div>
+              <div class="url-badge" style="color: var(--success)">Prod URL</div>
               <input type="text" id="prodUrlInput" placeholder="https://api.example.com/production/route"
                 class="prod-url-input" />
+              <button id="btnCopyProdUrl" class="btn-send btn-send-secondary">Copy URL</button>
               <button id="btnSendProd" class="btn-send">Send Request 🚀</button>
             </div>
           </div>
@@ -366,34 +360,35 @@
               </div>
             </div>
             <div id="editorProdResponse" class="ace-wrapper"
-              style="height: 200px; border-radius: 0 0 8px 8px; border-top: none"></div>
+              style="height: 280px; border-radius: 0 0 8px 8px; border-top: none"></div>
+            <div id="responseDiffPanel" class="response-diff-panel" style="display: none">
+              <div class="response-diff-header">
+                <span>Expected vs Production Diff</span>
+                <div id="responseDiffSummary" class="response-diff-summary">No diff yet.</div>
+              </div>
+              <div class="response-diff-legend">
+                <span class="legend-item legend-added">Added</span>
+                <span class="legend-item legend-removed">Removed</span>
+                <span class="legend-item legend-changed">Changed</span>
+              </div>
+              <div class="response-diff-grid">
+                <div class="response-diff-column">
+                  <h4>Expected (Mock)</h4>
+                  <div id="expectedDiffContent" class="response-diff-content"></div>
+                </div>
+                <div class="response-diff-column">
+                  <h4>Received (Prod)</h4>
+                  <div id="receivedDiffContent" class="response-diff-content"></div>
+                </div>
+              </div>
+            </div>
           </div>
 
-          <form id="endpointForm" style="margin-top: 20px">
+          <form id="endpointForm">
             <input type="hidden" id="epId" />
             <input type="hidden" id="epEntityId" />
             <input type="hidden" id="epProjectId" />
 
-            <div class="form-row">
-              <div class="form-group flex-1">
-                <label for="method">Method</label>
-                <select id="method" required>
-                  <option value="GET">GET</option>
-                  <option value="POST">POST</option>
-                  <option value="PUT">PUT</option>
-                  <option value="PATCH">PATCH</option>
-                  <option value="DELETE">DELETE</option>
-                </select>
-              </div>
-              <div class="form-group flex-4">
-                <label for="path">Final Path Route</label>
-                <div class="input-prefix">
-                  <span class="prefix">Path:</span>
-                  <input type="text" id="path" placeholder="/users/profile" required />
-                </div>
-              </div>
-            </div>
-
             <!-- Tabs -->
             <!-- Tabs & Response View -->
             <div class="split-editor-layout">
@@ -420,14 +415,14 @@
                     <p class="help-text">
                       JSON format. Endpoint strict validation. Example: {"id": "5"}
                     </p>
-                    <div id="editorParams" class="ace-wrapper" style="height: 300px"></div>
+                    <div id="editorParams" class="ace-wrapper" style="height: 380px"></div>
                   </div>
                   <div class="tab-pane active" id="tab-payload">
                     <label>Expected Body Payload</label>
                     <p class="help-text">
                       Mock server returns 400 Bad Request if missing top-level keys.
                     </p>
-                    <div id="editorPayload" class="ace-wrapper" style="height: 300px"></div>
+                    <div id="editorPayload" class="ace-wrapper" style="height: 380px"></div>
                   </div>
                   <div class="tab-pane" id="tab-auth">
                     <label>Authorization</label>
@@ -455,7 +450,7 @@
                     <p class="help-text">
                       Add custom headers to the response. JSON format: [{"key": "Content-Type", "value": "application/json"}]
                     </p>
-                    <div id="editorHeaders" class="ace-wrapper" style="height: 300px"></div>
+                    <div id="editorHeaders" class="ace-wrapper" style="height: 380px"></div>
                   </div>
                 </div>
               </div>
@@ -481,12 +476,12 @@
                   </div>
                 </div>
                 <label>Provide Response Body (JSON or Text)</label>
-                <div id="editorResponse" class="ace-wrapper" style="flex: 1; min-height: 230px"></div>
+                <div id="editorResponse" class="ace-wrapper" style="flex: 1; min-height: 320px"></div>
               </div>
             </div>
             <div class="form-actions">
               <button type="submit" class="btn-primary" id="saveEndpointBtn">
-                Save Configuration <span class="shortcut-hint">Ctrl + ↵</span>
+                Save Configuration <span class="shortcut-hint">Ctrl/Cmd + S</span>
               </button>
             </div>
           </form>

package/public/js/app.js

@@ -620,6 +620,7 @@ window.addEndpoint = async (projectId, entityId) => {
     expectedParams: '',
     expectedPayload: '',
     responseBody: '{"success": true}',
+    prodUrl: '',
   }
   ent.endpoints.push(ep)
   await syncData()
@@ -657,33 +658,242 @@ const getActiveEndpointData = () =>
     ?.entities.find((e) => e.id === activeIds.entity)
     ?.endpoints.find((ep) => ep.id === activeIds.endpoint)
 
+function getEndpointContext(projId, entId, epId) {
+  const project = state.projects.find((p) => p.id === projId)
+  const entity = project?.entities.find((e) => e.id === entId)
+  const endpoint = entity?.endpoints.find((ep) => ep.id === epId)
+  if (!project || !entity || !endpoint) return null
+  return { project, entity, endpoint }
+}
+
+function getMockBaseUrl(project, entity) {
+  return `${window.location.origin}/mock/${slugify(project.name)}/${slugify(entity.name)}`
+}
+
+function getDefaultProdUrl(project, entity, endpoint) {
+  const bUrl = (project.baseUrl || '').replace(/\/$/, '')
+  const fPath = normalizePathInput(endpoint.path)
+  const eSlug = slugify(entity.name)
+  return bUrl ? `${bUrl}/${eSlug}${fPath}` : ''
+}
+
+function truncateText(value, maxLen) {
+  if (!value || value.length <= maxLen) return value
+  return `${value.slice(0, maxLen)}...`
+}
+
+function normalizePathInput(pathValue) {
+  const trimmed = (pathValue || '').trim()
+  if (!trimmed) return '/'
+  return trimmed.startsWith('/') ? trimmed : '/' + trimmed
+}
+
+function resolveTemplateVariables(value, vars = {}) {
+  if (!value || typeof value !== 'string') return value
+  return value.replace(/\{\{(\w+)\}\}/g, (match, key) => {
+    return vars[key] !== undefined ? String(vars[key]) : match
+  })
+}
+
+function getCurrentMockUrl(project, entity) {
+  const mockPathInput = document.getElementById('mockPathInput')
+  const pathValue = normalizePathInput(mockPathInput?.value || '/')
+  return `${getMockBaseUrl(project, entity)}${pathValue}`
+}
+
+function updateMockUrlEditor(project, entity, endpoint) {
+  const base = getMockBaseUrl(project, entity)
+  const normalizedPath = normalizePathInput(endpoint.path)
+  const fullUrl = `${base}${normalizedPath}`
+
+  const mockBaseEl = document.getElementById('mockUrlBase')
+  mockBaseEl.innerText = truncateText(base, 25)
+  mockBaseEl.title = base
+  document.getElementById('mockPathInput').value = normalizedPath
+  document.getElementById('liveUrlOpenLink').href = fullUrl
+  document.getElementById('liveUrlOpenLink').title = fullUrl
+}
+
+function refreshMockOpenLink() {
+  const context = getEndpointContext(activeIds.project, activeIds.entity, activeIds.endpoint)
+  if (!context) return
+  const fullUrl = getCurrentMockUrl(context.project, context.entity)
+  document.getElementById('liveUrlOpenLink').href = fullUrl
+  document.getElementById('liveUrlOpenLink').title = fullUrl
+}
+
+async function persistActiveProdUrl() {
+  const ep = getActiveEndpointData()
+  if (!ep) return
+  ep.prodUrl = document.getElementById('prodUrlInput').value.trim()
+  await syncData()
+}
+
 function computeLiveUrl(proj, ent, epObj) {
-  const base = `${window.location.origin}/mock/${slugify(proj.name)}/${slugify(ent.name)}`
-  const finalPath = epObj.path.startsWith('/') ? epObj.path : '/' + epObj.path
+  const base = getMockBaseUrl(proj, ent)
+  const finalPath = normalizePathInput(epObj.path)
   return base + finalPath
 }
 
+function escapeHtml(str) {
+  return str
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#039;')
+}
+
+function normalizeResponseText(rawText) {
+  if (!rawText || !rawText.trim()) return ''
+  try {
+    return JSON.stringify(JSON.parse(rawText), null, 2)
+  } catch (e) {
+    return rawText
+  }
+}
+
+function clearResponseDiff(message = 'No diff yet.') {
+  const panel = document.getElementById('responseDiffPanel')
+  const summary = document.getElementById('responseDiffSummary')
+  const expected = document.getElementById('expectedDiffContent')
+  const received = document.getElementById('receivedDiffContent')
+
+  panel.style.display = 'none'
+  summary.innerText = message
+  expected.innerHTML = `<div class="diff-placeholder">${escapeHtml(message)}</div>`
+  received.innerHTML = `<div class="diff-placeholder">${escapeHtml(message)}</div>`
+}
+
+function buildLineDiff(expectedLines, receivedLines) {
+  const n = expectedLines.length
+  const m = receivedLines.length
+  const dp = Array.from({ length: n + 1 }, () => Array(m + 1).fill(0))
+
+  for (let i = n - 1; i >= 0; i--) {
+    for (let j = m - 1; j >= 0; j--) {
+      if (expectedLines[i] === receivedLines[j]) {
+        dp[i][j] = dp[i + 1][j + 1] + 1
+      } else {
+        dp[i][j] = Math.max(dp[i + 1][j], dp[i][j + 1])
+      }
+    }
+  }
+
+  const events = []
+  let i = 0
+  let j = 0
+  while (i < n && j < m) {
+    if (expectedLines[i] === receivedLines[j]) {
+      events.push({ type: 'equal', left: expectedLines[i], right: receivedLines[j] })
+      i++
+      j++
+    } else if (dp[i + 1][j] >= dp[i][j + 1]) {
+      events.push({ type: 'remove', left: expectedLines[i], right: '' })
+      i++
+    } else {
+      events.push({ type: 'add', left: '', right: receivedLines[j] })
+      j++
+    }
+  }
+
+  while (i < n) {
+    events.push({ type: 'remove', left: expectedLines[i], right: '' })
+    i++
+  }
+
+  while (j < m) {
+    events.push({ type: 'add', left: '', right: receivedLines[j] })
+    j++
+  }
+
+  for (let k = 0; k < events.length - 1; k++) {
+    if (events[k].type === 'remove' && events[k + 1].type === 'add') {
+      events[k].type = 'changed-old'
+      events[k + 1].type = 'changed'
+      k++
+    }
+  }
+
+  return events
+}
+
+function renderDiffColumnHtml(events, side) {
+  let lineNo = 0
+  const rows = events.map((event) => {
+    const text = side === 'left' ? event.left : event.right
+    if (text) lineNo++
+    const safeText = text ? escapeHtml(text) : '&nbsp;'
+    const num = text ? lineNo : ''
+    return `<div class="diff-line ${event.type}"><span class="diff-line-no">${num}</span><span class="diff-line-text">${safeText}</span></div>`
+  })
+  return rows.join('')
+}
+
+function renderResponseDiff(expectedRaw, receivedRaw) {
+  const panel = document.getElementById('responseDiffPanel')
+  const summary = document.getElementById('responseDiffSummary')
+  const expected = document.getElementById('expectedDiffContent')
+  const received = document.getElementById('receivedDiffContent')
+
+  const expectedText = normalizeResponseText(expectedRaw)
+  const receivedText = normalizeResponseText(receivedRaw)
+
+  if (!expectedText && !receivedText) {
+    clearResponseDiff('Expected and production responses are both empty.')
+    return
+  }
+
+  const expectedLines = expectedText.split('\n')
+  const receivedLines = receivedText.split('\n')
+  const totalLines = expectedLines.length + receivedLines.length
+  const maxLineBudget = 1200
+
+  if (totalLines > maxLineBudget) {
+    panel.style.display = 'block'
+    summary.innerText = `Diff skipped: response too large (${totalLines} lines).`
+    expected.innerHTML = `<div class="diff-placeholder">Expected response is too large for detailed diff render.</div>`
+    received.innerHTML = `<div class="diff-placeholder">Received response is too large for detailed diff render.</div>`
+    return
+  }
+
+  const events = buildLineDiff(expectedLines, receivedLines)
+  let added = 0
+  let removed = 0
+  let changed = 0
+
+  events.forEach((event) => {
+    if (event.type === 'add') added++
+    if (event.type === 'remove') removed++
+    if (event.type === 'changed') changed++
+  })
+
+  const hasDiff = added > 0 || removed > 0 || changed > 0
+  panel.style.display = 'block'
+  summary.innerText = hasDiff
+    ? `Added: ${added} | Removed: ${removed} | Changed: ${changed}`
+    : 'No differences between expected and production response.'
+
+  expected.innerHTML = renderDiffColumnHtml(events, 'left')
+  received.innerHTML = renderDiffColumnHtml(events, 'right')
+}
+
 function openEndpointEditor() {
   const ep = getActiveEndpointData()
   const p = state.projects.find((p) => p.id === activeIds.project)
   const e = p.entities.find((e) => e.id === activeIds.entity)
   if (!ep) return
 
+  clearResponseDiff('Run a production request to see highlighted differences.')
+
   document.getElementById('editorBreadcrumbs').innerText = `${p.name}  >  ${e.name}`
 
-  const fullUrl = computeLiveUrl(p, e, ep)
-  document.getElementById('liveUrlLink').innerText = fullUrl
-  document.getElementById('liveUrlLink').href = fullUrl
+  updateMockUrlEditor(p, e, ep)
 
-  // Prod URL Auto-Assignment based on Base URL
-  const bUrl = (p.baseUrl || '').replace(/\/$/, '')
-  const fPath = ep.path.startsWith('/') ? ep.path : '/' + ep.path
-  const eSlug = slugify(e.name)
-  document.getElementById('prodUrlInput').value = bUrl ? `${bUrl}/${eSlug}${fPath}` : ''
+  document.getElementById('prodUrlInput').value = ep.prodUrl || getDefaultProdUrl(p, e, ep)
 
   document.getElementById('epId').value = ep.id
   document.getElementById('method').value = ep.method
-  document.getElementById('path').value = ep.path
   document.getElementById('statusCode').value = ep.statusCode || 200
   document.getElementById('delay').value = ep.delay || 0
 
@@ -705,9 +915,7 @@ document.getElementById('endpointForm').addEventListener('submit', async (ev) =>
   const e = p.entities.find((e) => e.id === activeIds.entity)
 
   ep.method = document.getElementById('method').value
-  let rawPath = document.getElementById('path').value
-  if (!rawPath.startsWith('/')) rawPath = '/' + rawPath
-  ep.path = rawPath
+  ep.path = normalizePathInput(document.getElementById('mockPathInput').value)
   ep.statusCode = parseInt(document.getElementById('statusCode').value, 10)
   ep.delay = parseInt(document.getElementById('delay').value, 10)
   ep.expectedPayload = editors.payload.getValue()
@@ -727,19 +935,16 @@ document.getElementById('endpointForm').addEventListener('submit', async (ev) =>
     ep.headers = []
   }
 
-  const fullUrl = computeLiveUrl(p, e, ep)
-  document.getElementById('liveUrlLink').innerText = fullUrl
-  document.getElementById('liveUrlLink').href = fullUrl
+  ep.prodUrl = document.getElementById('prodUrlInput').value.trim()
 
-  const bUrl = (p.baseUrl || '').replace(/\/$/, '')
-  const eSlug = slugify(e.name)
-  document.getElementById('prodUrlInput').value = bUrl ? `${bUrl}/${eSlug}${ep.path}` : ''
+  updateMockUrlEditor(p, e, ep)
 
   const btn = document.getElementById('saveEndpointBtn')
   const originalHtml = btn.innerHTML
   btn.innerHTML = '✓ Saved Successfully!'
   btn.style.background = 'var(--success)'
   await syncData()
+  clearResponseDiff('Expected response changed. Run production request to compare again.')
   renderTree()
   setTimeout(() => {
     btn.innerHTML = originalHtml
@@ -777,6 +982,46 @@ function bindGlobalEvents() {
         document.getElementById('saveEndpointBtn').click()
       }
     }
+
+    if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 's') {
+      const variablesModalOpen = document.getElementById('modalVariables').style.display === 'flex'
+      const editorScreenOpen = document.getElementById('editorScreen').style.display !== 'none'
+      if (!variablesModalOpen && !editorScreenOpen) return
+
+      e.preventDefault()
+
+      if (variablesModalOpen) {
+        document.getElementById('btnSaveVariables').click()
+        return
+      }
+
+      document.getElementById('saveEndpointBtn').click()
+    }
+  })
+
+  document.getElementById('mockPathInput').addEventListener('input', () => {
+    refreshMockOpenLink()
+  })
+
+  document.getElementById('mockPathInput').addEventListener('blur', () => {
+    const input = document.getElementById('mockPathInput')
+    input.value = normalizePathInput(input.value)
+    refreshMockOpenLink()
+  })
+
+  document.getElementById('mockPathInput').addEventListener('keydown', (e) => {
+    if (e.key !== 'Enter') return
+    e.preventDefault()
+    const input = document.getElementById('mockPathInput')
+    input.value = normalizePathInput(input.value)
+    refreshMockOpenLink()
+    document.getElementById('saveEndpointBtn').click()
+  })
+
+  document.getElementById('prodUrlInput').addEventListener('keydown', async (e) => {
+    if (e.key !== 'Enter') return
+    e.preventDefault()
+    await persistActiveProdUrl()
   })
 
   // Mobile menu toggle
@@ -903,13 +1148,24 @@ function bindGlobalEvents() {
   })
 
   // Export as cURL command
+  document.getElementById('btnCopyMockUrl').addEventListener('click', () => {
+    const context = getEndpointContext(activeIds.project, activeIds.entity, activeIds.endpoint)
+    if (!context) return
+    const mockUrl = getCurrentMockUrl(context.project, context.entity)
+    navigator.clipboard.writeText(mockUrl).then(() => {
+      const btn = document.getElementById('btnCopyMockUrl')
+      btn.innerText = '✓ Copied!'
+      setTimeout(() => (btn.innerText = 'Copy URL'), 2000)
+    })
+  })
+
   document.getElementById('btnCopyCurl').addEventListener('click', () => {
     const ep = getActiveEndpointData()
     if (!ep) return
     const p = state.projects.find((p) => p.id === activeIds.project)
     const e = p.entities.find((e) => e.id === activeIds.entity)
 
-    let finalUrl = computeLiveUrl(p, e, ep)
+    let finalUrl = getCurrentMockUrl(p, e)
     if (ep.expectedParams) {
       try {
         const pg = JSON.parse(ep.expectedParams)
@@ -938,7 +1194,7 @@ function bindGlobalEvents() {
     const p = state.projects.find((p) => p.id === activeIds.project)
     const e = p.entities.find((e) => e.id === activeIds.entity)
 
-    let finalUrl = computeLiveUrl(p, e, ep)
+    let finalUrl = getCurrentMockUrl(p, e)
     if (ep.expectedParams) {
       try {
         const pg = JSON.parse(ep.expectedParams)
@@ -966,14 +1222,27 @@ function bindGlobalEvents() {
     })
   })
 
+  document.getElementById('btnCopyProdUrl').addEventListener('click', () => {
+    const rawProdUrl = document.getElementById('prodUrlInput').value.trim()
+    const resolvedProdUrl = resolveTemplateVariables(rawProdUrl, variables)
+    if (!resolvedProdUrl) return
+    navigator.clipboard.writeText(resolvedProdUrl).then(() => {
+      const btn = document.getElementById('btnCopyProdUrl')
+      btn.innerText = '✓ Copied!'
+      setTimeout(() => (btn.innerText = 'Copy URL'), 2000)
+    })
+  })
+
   // Prod URL HTTP Client logic
   document.getElementById('btnSendProd').addEventListener('click', async () => {
-    const url = document.getElementById('prodUrlInput').value.trim()
-    if (!url) return alert('Please enter a Production URL first.')
+    const rawUrl = document.getElementById('prodUrlInput').value.trim()
+    const resolvedUrl = resolveTemplateVariables(rawUrl, variables)
+    if (!resolvedUrl) return alert('Please enter a Production URL first.')
     const ep = getActiveEndpointData()
 
     document.getElementById('prodResponseWrapper').style.display = 'block'
     editors.prodResp.setValue('Sending request...', -1)
+    clearResponseDiff('Comparing responses...')
     document.getElementById('prodStatus').innerText = 'Pending'
     document.getElementById('prodTime').innerText = '--'
 
@@ -982,7 +1251,7 @@ function bindGlobalEvents() {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({
-          url: url,
+          url: resolvedUrl,
           method: ep.method,
           params: editors.params.getValue(),
           payload: editors.payload.getValue(),
@@ -993,16 +1262,19 @@ function bindGlobalEvents() {
       if (data.error && !data.status) {
         document.getElementById('prodStatus').innerText = 'ERROR'
         editors.prodResp.setValue(JSON.stringify(data.error, null, 2), -1)
+        clearResponseDiff('Production request failed before diff could run.')
       } else {
         document.getElementById('prodStatus').innerText = data.status + ' Http St'
         document.getElementById('prodTime').innerText = data.time + 'ms'
         let outputStr =
           typeof data.body === 'object' ? JSON.stringify(data.body, null, 2) : data.body
         editors.prodResp.setValue(outputStr, -1)
+        renderResponseDiff(editors.response.getValue(), outputStr || '')
       }
     } catch (err) {
       document.getElementById('prodStatus').innerText = 'CRASH'
       editors.prodResp.setValue('Network or proxy engine error.', -1)
+      clearResponseDiff('Network or proxy error. Diff is unavailable.')
     }
   })
 }

package/server.js

@@ -50,8 +50,10 @@ const saveJsonFile = (filePath, data) => {
 }
 
 const createBemirrorApp = (options = {}) => {
-  const ENDPOINTS_FILE = options.endpointsFile || path.join(__dirname, '../../..', 'endpoints.json')
-  const VARIABLES_FILE = options.variablesFile || path.join(__dirname, '../../..', 'variables.json')
+  const ENDPOINTS_FILE =
+    options.endpointsFile || path.join(__dirname, '../../..', 'bemirror-endpoints.json')
+  const VARIABLES_FILE =
+    options.variablesFile || path.join(__dirname, '../../..', 'bemirror-variables.json')
   const PUBLIC_DIR = options.publicDir || path.join(__dirname, 'public')
 
   const app = express()