@logboard/cli 1.0.0

package/views/roles.ejs

@@ -0,0 +1,279 @@
+<%- include('partials/head', { title: 'Role Config' }) %>
+<style>
+  .role-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:18px; margin-bottom:14px; }
+  .role-card-header { display:flex; align-items:center; gap:10px; margin-bottom:16px; }
+  .role-dot { width:13px; height:13px; border-radius:50%; flex-shrink:0; }
+  .role-label { font-size:14px; font-weight:700; color:var(--text); }
+  .role-id    { font-size:11px; color:var(--text3); font-family:'JetBrains Mono',monospace; margin-top:1px; }
+  .builtin-badge { font-size:9px; padding:1px 7px; background:rgba(99,102,241,.15); color:var(--accent-l); border-radius:3px; font-weight:600; letter-spacing:.3px; text-transform:uppercase; }
+  .perm-section { margin-bottom:14px; }
+  .perm-section-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.7px; color:var(--text3); margin-bottom:8px; display:flex; align-items:center; gap:6px; }
+  .perm-section-label::after { content:''; flex:1; height:1px; background:var(--border); }
+  .perm-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(175px,1fr)); gap:6px; }
+  .perm-item {
+    display:flex; align-items:center; gap:8px; padding:7px 11px;
+    border-radius:7px; background:var(--surface2); border:1px solid var(--border);
+    font-size:12px; color:var(--text2); cursor:pointer; transition:all .15s; user-select:none;
+  }
+  .perm-item:hover { border-color:var(--border2); color:var(--text); background:var(--surface3); }
+  .perm-item.on { border-color:var(--accent); background:var(--accent-dim); color:var(--accent-l); }
+  .perm-item.on .perm-check { background:var(--accent); border-color:var(--accent); }
+  .perm-item.on .perm-check::after { content:''; display:block; width:7px; height:7px; background:#fff; border-radius:1px; clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0,43% 62%); }
+  .perm-check { width:15px; height:15px; border-radius:3px; border:1.5px solid var(--border2); flex-shrink:0; transition:all .15s; display:flex; align-items:center; justify-content:center; }
+  .new-role-form { background:var(--surface2); border:1px dashed var(--border2); border-radius:var(--radius-lg); padding:18px; margin-bottom:14px; }
+  .save-indicator { font-size:11px; color:var(--text3); display:none; margin-left:auto; }
+  .save-indicator.saving { display:block; color:var(--accent-l); }
+  .save-indicator.saved  { display:block; color:var(--green); }
+</style>
+<div class="app-shell">
+  <%- include('partials/sidebar') %>
+  <div class="main-area">
+    <header class="top-header">
+      <div class="page-title">Role Configuration</div>
+      <div class="header-actions">
+        <span style="font-size:12px;color:var(--text3);">Page &amp; card permissions take effect immediately</span>
+        <button class="btn btn-secondary btn-sm" onclick="toggleNewForm()">
+          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
+          New Role
+        </button>
+      </div>
+    </header>
+    <div class="page-content">
+
+      <!-- New Role Form -->
+      <div class="new-role-form" id="new-role-form" style="display:none;">
+        <div style="font-size:13px;font-weight:600;color:var(--text);margin-bottom:14px;">Create Custom Role</div>
+        <div style="display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:10px;align-items:end;margin-bottom:14px;">
+          <div class="form-group" style="margin:0"><label class="form-label">Role ID</label><input type="text" id="nr-id" class="form-input" placeholder="e.g. operator"/></div>
+          <div class="form-group" style="margin:0"><label class="form-label">Display Label</label><input type="text" id="nr-label" class="form-input" placeholder="e.g. Operator"/></div>
+          <div class="form-group" style="margin:0"><label class="form-label">Badge Color</label>
+            <div style="display:flex;gap:6px;align-items:center;">
+              <input type="color" id="nr-color" value="#6366f1" style="width:38px;height:36px;border:none;background:none;cursor:pointer;border-radius:4px;padding:0;"/>
+              <span id="nr-color-preview" style="font-size:12px;color:var(--text2);">#6366f1</span>
+            </div>
+          </div>
+          <div style="display:flex;gap:8px;">
+            <button class="btn btn-primary btn-sm" onclick="createRole()">Create</button>
+            <button class="btn btn-secondary btn-sm" onclick="toggleNewForm()">Cancel</button>
+          </div>
+        </div>
+      </div>
+
+      <!-- Role Cards -->
+      <% const roleNames = Object.keys(rolesData); %>
+      <% roleNames.forEach(function(roleName) { %>
+      <% const role = rolesData[roleName]; %>
+      <div class="role-card" id="role-card-<%=roleName%>">
+        <div class="role-card-header">
+          <div class="role-dot" id="dot-<%=roleName%>" style="background:<%=role.color||'#6b7280'%>"></div>
+          <div style="flex:1;">
+            <div class="role-label" id="label-display-<%=roleName%>"><%=role.label||roleName%></div>
+            <div class="role-id"><%=roleName%></div>
+          </div>
+          <span id="save-ind-<%=roleName%>" class="save-indicator"></span>
+          <% if (role.isBuiltIn) { %><span class="builtin-badge">built-in</span><% } %>
+          <% if (!role.isBuiltIn) { %>
+          <button class="btn btn-danger btn-xs" onclick="deleteRole('<%=roleName%>')">Delete</button>
+          <% } %>
+
+        <!-- Log Access (per-service) -->
+        <div class="perm-section">
+          <div class="perm-section-label">Log Access <span style="font-size:9px;font-weight:400;text-transform:none;color:var(--text3);">(empty = all services)</span></div>
+          <div style="margin-bottom:8px;font-size:11px;color:var(--text2);">
+            Restrict this role to specific services. Leave blank to allow all.
+          </div>
+          <div id="apps-<%=roleName%>" style="display:flex;gap:6px;flex-wrap:wrap;min-height:28px;margin-bottom:8px;">
+            <% (role.allowedApps||[]).forEach(function(app){ %>
+            <span class="chip active" style="font-size:11px;" data-app="<%=app%>" onclick="removeApp('<%=roleName%>','<%=app%>')">
+              <%=app%> <span style="margin-left:3px;opacity:.6;cursor:pointer;">✕</span>
+            </span>
+            <% }) %>
+          </div>
+          <div style="display:flex;gap:6px;align-items:center;">
+            <input type="text" id="app-input-<%=roleName%>" class="form-input" style="width:200px;padding:5px 10px;font-size:12px;" placeholder="appName, e.g. payment-service" onkeydown="if(event.key==='Enter'){event.preventDefault();addApp('<%=roleName%>');}"/>
+            <button type="button" class="btn btn-secondary btn-xs" onclick="addApp('<%=roleName%>')">+ Add</button>
+          </div>
+        </div>
+          <button class="btn btn-primary btn-sm" onclick="saveRole('<%=roleName%>')">
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/><polyline points="17,21 17,13 7,13 7,21"/><polyline points="7,3 7,8 15,8"/></svg>
+            Save
+          </button>
+        </div>
+
+        <!-- Color + label editors (for built-in and custom) -->
+        <div style="display:flex;gap:10px;align-items:center;margin-bottom:14px;padding:10px 12px;background:var(--surface2);border-radius:8px;border:1px solid var(--border);">
+          <div style="display:flex;align-items:center;gap:8px;flex:1;">
+            <label style="font-size:11px;color:var(--text3);font-weight:500;">Label:</label>
+            <input type="text" class="form-input" id="label-<%=roleName%>" value="<%=role.label||roleName%>" style="max-width:200px;padding:5px 10px;"/>
+          </div>
+          <div style="display:flex;align-items:center;gap:8px;">
+            <label style="font-size:11px;color:var(--text3);font-weight:500;">Color:</label>
+            <input type="color" id="color-<%=roleName%>" value="<%=role.color||'#6b7280'%>" style="width:32px;height:30px;border:none;background:none;cursor:pointer;border-radius:4px;padding:0;" oninput="document.getElementById('dot-<%=roleName%>').style.background=this.value"/>
+          </div>
+        </div>
+
+        <!-- Pages -->
+        <div class="perm-section">
+          <div class="perm-section-label">Pages</div>
+          <div class="perm-grid">
+            <% allPages.forEach(function(page) { %>
+            <% const isOn = (role.pages||[]).includes(page.id); %>
+            <div class="perm-item <%=isOn?'on':''%>" data-role="<%=roleName%>" data-type="page" data-id="<%=page.id%>" onclick="togglePerm(this)">
+              <div class="perm-check"></div>
+              <span><%=page.label%></span>
+              <% if (page.adminOnly) { %><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-left:auto;opacity:.4"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg><% } %>
+            </div>
+            <% }) %>
+          </div>
+        </div>
+
+        <!-- Cards (grouped by section) -->
+        <%
+          const sections = [...new Set(allCards.map(c=>c.section))];
+        %>
+        <% sections.forEach(function(section) { %>
+        <div class="perm-section">
+          <div class="perm-section-label"><%=section%></div>
+          <div class="perm-grid">
+            <% allCards.filter(c=>c.section===section).forEach(function(card) { %>
+            <% const isOn = (role.cards||[]).includes(card.id); %>
+            <div class="perm-item <%=isOn?'on':''%>" data-role="<%=roleName%>" data-type="card" data-id="<%=card.id%>" onclick="togglePerm(this)">
+              <div class="perm-check"></div>
+              <span><%=card.label%></span>
+            </div>
+            <% }) %>
+          </div>
+        </div>
+        <% }) %>
+      </div>
+      <% }) %>
+
+    </div>
+  </div>
+</div>
+
+<script>
+// ── Toggle perm item ────────────────────────────────────────────────────────
+function togglePerm(el) {
+  el.classList.toggle('on');
+}
+
+function getPerms(roleName, type) {
+  return [...document.querySelectorAll(
+    '[data-role="'+roleName+'"][data-type="'+type+'"].on'
+  )].map(el => el.dataset.id);
+}
+
+function toggleNewForm() {
+  const f = document.getElementById('new-role-form');
+  f.style.display = f.style.display === 'none' ? '' : 'none';
+}
+
+// Color preview in "new role" form
+const nrColorInput = document.getElementById('nr-color');
+if (nrColorInput) {
+  nrColorInput.addEventListener('input', function() {
+    const preview = document.getElementById('nr-color-preview');
+    if (preview) preview.textContent = this.value;
+  });
+}
+
+// ── Save role ────────────────────────────────────────────────────────────────
+async function saveRole(name) {
+  const pages       = getPerms(name, 'page');
+  if (pages.length === 0) {
+    toast('Select at least 1 page permission before saving', 'error');
+    return;
+  }
+  const cards       = getPerms(name, 'card');
+  const label       = document.getElementById('label-' + name)?.value || name;
+  const color       = document.getElementById('color-' + name)?.value || '#6b7280';
+  const allowedApps = getApps(name);
+
+  const ind = document.getElementById('save-ind-' + name);
+  if (ind) { ind.textContent = 'Saving…'; ind.className = 'save-indicator saving'; }
+
+  try {
+    const r = await fetch('/api/role-config/' + encodeURIComponent(name), {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ label, color, pages, cards, allowedApps }),
+    });
+    const d = await r.json();
+    if (!r.ok) { toast(d.error || 'Save failed', 'error'); if(ind){ind.textContent='Failed';ind.className='save-indicator';} return; }
+
+    // Update dot color immediately
+    const dot = document.getElementById('dot-' + name);
+    if (dot) dot.style.background = color;
+    const labelDisplay = document.getElementById('label-display-' + name);
+    if (labelDisplay) labelDisplay.textContent = label;
+
+    if (ind) { ind.textContent = 'Saved ✓'; ind.className = 'save-indicator saved'; setTimeout(()=>{ind.style.display='none';ind.className='save-indicator';},2500); }
+    toast('"' + name + '" permissions saved — takes effect on next page load', 'success');
+  } catch(e) {
+    toast('Network error', 'error');
+    if (ind) { ind.textContent='Error'; ind.className='save-indicator'; }
+  }
+}
+
+// ── Create role ──────────────────────────────────────────────────────────────
+async function createRole() {
+  const id    = document.getElementById('nr-id').value.trim();
+  const label = document.getElementById('nr-label').value.trim();
+  const color = document.getElementById('nr-color').value;
+  if (!id) { toast('Role ID is required', 'error'); return; }
+
+  const r = await fetch('/api/role-config/' + encodeURIComponent(id), {
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ label: label || id, color, pages:[], cards:[] }),
+  });
+  const d = await r.json();
+  if (!r.ok) { toast(d.error || 'Create failed', 'error'); return; }
+  toast('Role "' + id + '" created', 'success');
+  location.reload();
+}
+
+// ── Delete role ──────────────────────────────────────────────────────────────
+async function deleteRole(name) {
+  if (!confirm('Delete role "' + name + '"?\nUsers assigned this role will keep the role name but lose all page access until reassigned.')) return;
+  const r = await fetch('/api/role-config/' + encodeURIComponent(name), { method: 'DELETE' });
+  const d = await r.json();
+  if (!r.ok) { toast(d.error || 'Delete failed', 'error'); return; }
+  toast('Role "' + name + '" deleted', 'success');
+  const card = document.getElementById('role-card-' + name);
+  if (card) { card.style.opacity='0'; card.style.transition='opacity .2s'; setTimeout(()=>card.remove(),200); }
+}
+
+// ── Per-service log access control ────────────────────────────────────────
+function addApp(roleName) {
+  const input = document.getElementById('app-input-'+roleName);
+  const val   = input.value.trim();
+  if (!val) return;
+  const container = document.getElementById('apps-'+roleName);
+  // Prevent duplicates
+  if ([...container.querySelectorAll('.chip')].some(c => c.dataset.app === val)) {
+    toast('Already added', 'error'); return;
+  }
+  const chip = document.createElement('span');
+  chip.className = 'chip active';
+  chip.dataset.app = val;
+  chip.style.fontSize = '11px';
+  chip.innerHTML = val + ' <span style="margin-left:3px;opacity:.6;cursor:pointer;" onclick="removeApp(\''+roleName+'\',\''+val+'\')">✕</span>';
+  container.appendChild(chip);
+  input.value = '';
+}
+
+function removeApp(roleName, appName) {
+  const container = document.getElementById('apps-'+roleName);
+  const chips = container.querySelectorAll('.chip');
+  chips.forEach(c => { if (c.dataset.app === appName || c.textContent.replace('✕','').trim() === appName) c.remove(); });
+}
+
+function getApps(roleName) {
+  const container = document.getElementById('apps-'+roleName);
+  if (!container) return [];
+  return [...container.querySelectorAll('.chip')].map(c => (c.dataset.app || c.textContent.replace('✕','').trim()).trim()).filter(Boolean);
+}
+</script>
+</body></html>

package/views/saved-searches.ejs

@@ -0,0 +1,51 @@
+<%- include('partials/head', { title: 'Saved Searches' }) %>
+<div class="app-shell">
+  <%- include('partials/sidebar') %>
+  <div class="main-area">
+    <header class="top-header">
+      <div class="page-title">Saved Searches</div>
+    </header>
+    <div class="page-content">
+      <div class="card">
+        <% if (!searches || !searches.length) { %>
+          <div class="empty-state" style="padding:50px 0;">
+            <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/></svg>
+            <p>No saved searches yet</p>
+            <p style="font-size:11px;margin-top:4px;color:var(--text3)">Go to Logs, search for something, then click <strong>Save Search</strong> in the header</p>
+          </div>
+        <% } else { %>
+        <div class="table-wrap">
+          <table>
+            <thead><tr><th>Name</th><th>Service</th><th>Level</th><th>Query</th><th>Date</th><th>Created</th><th></th></tr></thead>
+            <tbody>
+              <% searches.forEach(function(s){ %>
+              <tr>
+                <td style="font-weight:600;"><a href="<%= '/logs?'+[s.service?'service='+encodeURIComponent(s.service):'',s.date?'date='+s.date:'',s.level?'level='+s.level:'',s.q?'q='+encodeURIComponent(s.q):'',s.fromDate?'fromDate='+s.fromDate:'',s.toDate?'toDate='+s.toDate:''].filter(Boolean).join('&') %>" style="color:var(--accent-l);text-decoration:none;"><%=s.name%></a></td>
+                <td style="font-family:'JetBrains Mono',monospace;font-size:11px;"><%=s.service||'—'%></td>
+                <td><%if(s.level){%><span class="badge badge-<%=s.level==='error'?'error':s.level==='warn'?'warn':s.level==='info'?'info':'debug'%>" style="font-size:9px;"><%=s.level%></span><%}else{%><span style="color:var(--text3)">—</span><%}%></td>
+                <td style="font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--text2);"><%=s.q||'—'%></td>
+                <td style="font-size:11px;color:var(--text2);"><%=s.fromDate?s.fromDate+'→'+s.toDate:s.date||'—'%></td>
+                <td style="font-size:11px;color:var(--text3);"><%=new Date(s.createdAt).toLocaleDateString()%></td>
+                <td>
+                  <div style="display:flex;gap:6px;">
+                    <a href="<%= '/logs?'+[s.service?'service='+encodeURIComponent(s.service):'',s.date?'date='+s.date:'',s.level?'level='+s.level:'',s.q?'q='+encodeURIComponent(s.q):''].filter(Boolean).join('&') %>" class="btn btn-primary btn-xs">Run</a>
+                    <button class="btn btn-danger btn-xs" onclick="del('<%=s.id%>',this)">Delete</button>
+                  </div>
+                </td>
+              </tr>
+              <% }) %>
+            </tbody>
+          </table>
+        </div>
+        <% } %>
+      </div>
+    </div>
+  </div>
+</div>
+<script>
+async function del(id, btn) {
+  const r=await fetch('/api/saved-searches/'+id,{method:'DELETE'});
+  if(r.ok){btn.closest('tr').remove();toast('Deleted','success');}
+}
+</script>
+</body></html>

package/views/service-map.ejs

@@ -0,0 +1,142 @@
+<%- include('partials/head', { title: 'Service Map' }) %>
+<style>
+  #map-svg { width:100%; min-height:480px; background:var(--surface2); border-radius:var(--radius); }
+  .node { cursor:pointer; }
+  .node circle { transition:r .15s, fill .15s; }
+  .node:hover circle { r:24; }
+  .node text { font-family:'Inter',sans-serif; font-size:11px; fill:var(--text); pointer-events:none; }
+  .edge { stroke:var(--border2); stroke-width:1.5; fill:none; marker-end:url(#arrow); }
+  .edge-label { font-family:'Inter',sans-serif; font-size:9px; fill:var(--text3); }
+</style>
+<div class="app-shell">
+  <%- include('partials/sidebar') %>
+  <div class="main-area">
+    <header class="top-header">
+      <div class="page-title">Service Map</div>
+      <div class="header-actions">
+        <input type="date" class="form-input" id="map-date" value="<%= date %>" max="<%= today %>" style="width:150px;" onchange="location='?date='+this.value"/>
+        <button class="btn btn-secondary btn-sm" onclick="location.reload()">
+          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23,4 23,11 16,11"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 11"/></svg>
+          Refresh
+        </button>
+      </div>
+    </header>
+    <div class="page-content">
+      <% if (!mapData || !mapData.nodes || !mapData.nodes.length) { %>
+        <div class="card"><div class="empty-state" style="padding:60px 0;">
+          <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/></svg>
+          <p>No services found for <strong><%= date %></strong></p>
+          <p style="font-size:11px;margin-top:4px;color:var(--text3)">Ingest logs with matching service names to see dependency links</p>
+        </div></div>
+      <% } else { %>
+        <div class="card" style="padding:0;overflow:hidden;">
+          <div style="padding:14px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;">
+            <div style="font-size:12px;color:var(--text2);"><strong><%= mapData.nodes.length %></strong> services · <strong><%= mapData.edges.length %></strong> connections on <%= date %></div>
+            <div style="font-size:11px;color:var(--text3);">Edge weight = co-occurrence count in logs</div>
+          </div>
+          <svg id="map-svg" viewBox="0 0 900 500" xmlns="http://www.w3.org/2000/svg">
+            <defs>
+              <marker id="arrow" markerWidth="8" markerHeight="8" refX="8" refY="3" orient="auto">
+                <path d="M0,0 L0,6 L8,3 z" fill="var(--border2)"/>
+              </marker>
+            </defs>
+            <script type="text/javascript">
+              // Simple force-directed layout using spring simulation
+              const nodes = <%- JSON.stringify(mapData.nodes) %>;
+              const edges = <%- JSON.stringify(mapData.edges) %>;
+              const W=900, H=500, cx=W/2, cy=H/2;
+              const r=18, pad=80;
+
+              // Initialize positions in a circle
+              nodes.forEach(function(n,i){
+                const angle = (2*Math.PI*i)/nodes.length;
+                const radius = Math.min(W,H)/2 - pad;
+                n.x = cx + radius*Math.cos(angle);
+                n.y = cy + radius*Math.sin(angle);
+                n.vx=0; n.vy=0;
+              });
+
+              // Simple spring iterations
+              for(let iter=0;iter<200;iter++){
+                // Repulsion
+                for(let i=0;i<nodes.length;i++) for(let j=i+1;j<nodes.length;j++){
+                  const dx=nodes[j].x-nodes[i].x, dy=nodes[j].y-nodes[i].y;
+                  const dist=Math.sqrt(dx*dx+dy*dy)||1;
+                  const force=4000/(dist*dist);
+                  nodes[i].vx-=force*dx/dist; nodes[i].vy-=force*dy/dist;
+                  nodes[j].vx+=force*dx/dist; nodes[j].vy+=force*dy/dist;
+                }
+                // Attraction along edges
+                edges.forEach(function(e){
+                  const s=nodes.find(n=>n.id===e.source), t=nodes.find(n=>n.id===e.target);
+                  if(!s||!t) return;
+                  const dx=t.x-s.x, dy=t.y-s.y, dist=Math.sqrt(dx*dx+dy*dy)||1;
+                  const force=0.02*(dist-120);
+                  s.vx+=force*dx/dist; s.vy+=force*dy/dist;
+                  t.vx-=force*dx/dist; t.vy-=force*dy/dist;
+                });
+                // Center gravity
+                nodes.forEach(function(n){
+                  n.vx+=(cx-n.x)*0.003; n.vy+=(cy-n.y)*0.003;
+                  n.x+=n.vx*0.6; n.y+=n.vy*0.6; n.vx*=0.7; n.vy*=0.7;
+                  n.x=Math.max(r+10,Math.min(W-r-10,n.x));
+                  n.y=Math.max(r+10,Math.min(H-r-10,n.y));
+                });
+              }
+
+              // Render edges
+              const svgNS='http://www.w3.org/2000/svg';
+              const svg=document.getElementById('map-svg');
+              edges.forEach(function(e){
+                const s=nodes.find(n=>n.id===e.source), t=nodes.find(n=>n.id===e.target);
+                if(!s||!t) return;
+                const dx=t.x-s.x,dy=t.y-s.y,dist=Math.sqrt(dx*dx+dy*dy);
+                const ex=t.x-(dx/dist)*(r+10), ey=t.y-(dy/dist)*(r+10);
+                const l=document.createElementNS(svgNS,'line');
+                l.setAttribute('x1',s.x); l.setAttribute('y1',s.y);
+                l.setAttribute('x2',ex);  l.setAttribute('y2',ey);
+                l.setAttribute('class','edge');
+                const opacity=Math.min(1,0.2+e.weight/50);
+                l.setAttribute('stroke-opacity',opacity);
+                svg.appendChild(l);
+                if(e.weight>1){
+                  const lbl=document.createElementNS(svgNS,'text');
+                  lbl.setAttribute('x',(s.x+t.x)/2); lbl.setAttribute('y',(s.y+t.y)/2-4);
+                  lbl.setAttribute('class','edge-label'); lbl.setAttribute('text-anchor','middle');
+                  lbl.textContent=e.weight;
+                  svg.appendChild(lbl);
+                }
+              });
+
+              // Render nodes
+              const COLORS=['#6366f1','#8b5cf6','#06b6d4','#10b981','#f59e0b','#ef4444','#ec4899','#14b8a6','#f97316','#84cc16'];
+              nodes.forEach(function(n,i){
+                const g=document.createElementNS(svgNS,'g');
+                g.setAttribute('class','node');
+                g.setAttribute('transform','translate('+n.x+','+n.y+')');
+                const c=document.createElementNS(svgNS,'circle');
+                c.setAttribute('r',r); c.setAttribute('fill',COLORS[i%COLORS.length]);
+                c.setAttribute('fill-opacity','0.85');
+                const initials=n.label.split(/[-_]/).map(s=>s[0]).join('').slice(0,2).toUpperCase();
+                const t=document.createElementNS(svgNS,'text');
+                t.setAttribute('text-anchor','middle'); t.setAttribute('dy','0.35em');
+                t.setAttribute('fill','#fff'); t.setAttribute('font-weight','600'); t.setAttribute('font-size','11');
+                t.textContent=initials;
+                const lbl=document.createElementNS(svgNS,'text');
+                lbl.setAttribute('text-anchor','middle'); lbl.setAttribute('dy',r+14);
+                lbl.setAttribute('font-size','10'); lbl.setAttribute('fill','var(--text2)');
+                lbl.textContent=n.label.slice(0,20);
+                g.appendChild(c); g.appendChild(t); g.appendChild(lbl);
+                g.setAttribute('title',n.label);
+                g.style.cursor='pointer';
+                g.onclick=function(){location='/logs?service='+encodeURIComponent(n.id);};
+                svg.appendChild(g);
+              });
+            </script>
+          </svg>
+        </div>
+      <% } %>
+    </div>
+  </div>
+</div>
+</body></html>