servicemap 0.1.34 → 0.1.38

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "servicemap",
-  "version": "0.1.34",
+  "version": "0.1.38",
   "description": "Generate an internal service map page or desktop app for a software project.",
   "type": "module",
   "bin": {

package/servicemap/scripts/generate-page.mjs

@@ -69,23 +69,29 @@ function pageCss() {
     .brand h1 { margin: 0; font-size: 20px; line-height: 1; letter-spacing: 0; }
     .brand p, .top-meta { margin: 6px 0 0; color: #8aa097; font-size: 14px; }
     .top-actions { display: flex; align-items: center; gap: 12px; color: #8da59a; font-size: 14px; white-space: nowrap; }
+    .add-service-button { min-height: 40px; border: 0; border-radius: 10px; background: #287a5a; color: #effbf5; padding: 0 14px; cursor: pointer; font: inherit; font-weight: 800; box-shadow: 0 10px 28px rgba(54,180,126,0.16); }
     .mode-toggle { display: inline-flex; gap: 4px; padding: 4px; border-radius: 10px; background: #0b130f; }
     .mode-button { min-height: 36px; border: 0; border-radius: 8px; background: transparent; color: #789086; padding: 0 12px; cursor: pointer; font: inherit; font-weight: 800; }
     .mode-button.is-active { background: #276f53; color: #c9f9df; box-shadow: 0 0 18px rgba(101,240,173,0.16); }
     .map { position: relative; height: calc(100vh - 88px); min-height: 760px; background: radial-gradient(circle at 50% 52%, rgba(41, 96, 69, 0.22), transparent 24%), radial-gradient(circle at 1px 1px, rgba(88, 160, 120, 0.2) 1px, transparent 1px), #020806; background-size: auto, 28px 28px, auto; }
-    .map-plane { position: absolute; inset: 0; transform: scale(var(--zoom, 1)); transform-origin: 50% 50%; transition: transform 160ms ease; }
+    .map.is-panning { cursor: grabbing; user-select: none; }
+    .map-plane { position: absolute; inset: 0; z-index: 20; transform: translate3d(var(--pan-x, 0px), var(--pan-y, 0px), 0) scale(var(--zoom, 1)); transform-origin: 50% 50%; transition: transform 160ms ease; }
+    .map.is-panning .map-plane { transition: none; }
     .intro { position: absolute; left: 32px; top: 32px; z-index: 20; }
     .intro strong { display: block; color: #779286; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; }
     .intro span { display: block; margin-top: 8px; color: #53665d; font-size: 14px; }
     .edges { position: absolute; inset: 0; z-index: 26; width: 100%; height: 100%; pointer-events: none; }
     .edge-line { transition: opacity 180ms ease, stroke 180ms ease; }
-    .edge-line.is-active { stroke: #65f0ad !important; stroke-width: 0.28; stroke-linecap: round; stroke-dasharray: 0.72 0.58; animation: servicemapDash 1.1s linear infinite; filter: drop-shadow(0 0 6px rgba(101,240,173,0.72)); opacity: 1; }
-    .edge-line.is-muted { opacity: 0.24; }
+    .edge-line.is-active { stroke: #65f0ad !important; stroke-width: 3px; stroke-linecap: round; stroke-dasharray: 10 8; animation: servicemapDash .74s linear infinite; filter: drop-shadow(0 0 9px rgba(101,240,173,0.9)) drop-shadow(0 0 18px rgba(101,240,173,0.45)); opacity: 1; }
+    .edge-line.is-muted { opacity: 0.12; }
     .hub { position: absolute; left: 50%; top: 50%; z-index: 20; width: 132px; height: 132px; transform: translate(-50%, -50%); border-radius: 24px; border: 1px solid #315c47; background: #09120d; display: grid; place-items: center; box-shadow: 0 0 0 9px rgba(79,183,128,0.12), 0 0 42px rgba(100,255,174,0.16); }
     .hub-inner { width: 92px; height: 92px; border-radius: 18px; background: #fbfbf7; color: #111612; display: grid; place-items: center; font-size: 40px; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08); }
     .service-node { position: absolute; z-index: 10; width: 250px; height: 74px; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 16px; padding: 0 16px; border-radius: 8px; border: 1px solid #274036; background: rgba(16,24,19,0.95); box-shadow: 0 0 0 1px rgba(140,255,190,0.05), 0 18px 44px rgba(0,0,0,0.38); }
     button.service-node { cursor: pointer; color: inherit; font: inherit; text-align: left; }
     .service-node:hover, .service-node.is-selected { border-color: #66efae; box-shadow: 0 0 0 2px rgba(101,240,173,0.42), 0 18px 44px rgba(0,0,0,0.38); }
+    .map.has-selection .service-node { opacity: 0.16; }
+    .map.has-selection .service-node.is-related { opacity: 0.48; }
+    .map.has-selection .service-node.is-selected { opacity: 1; }
     .service-node.is-selected { z-index: 27; }
     .logo { width: 48px; height: 48px; flex: 0 0 auto; border-radius: 8px; display: grid; place-items: center; overflow: hidden; color: #fff; font-weight: 700; }
     .logo img { width: 28px; height: 28px; object-fit: contain; filter: invert(1); }
@@ -94,7 +100,7 @@ function pageCss() {
     .service-copy span { display: block; margin-top: 5px; color: #7f9188; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
     .status-dot { margin-left: auto; width: 8px; height: 8px; flex: 0 0 auto; border-radius: 999px; box-shadow: 0 0 14px currentColor; }
     .status-high { color: #65f0ad; background: #65f0ad; }
-    .status-medium, .status-low { color: #f1c85b; background: #f1c85b; }
+    .status-medium, .status-low, .status-manual { color: #f1c85b; background: #f1c85b; }
     .legend { position: absolute; left: 50%; bottom: 32px; z-index: 20; transform: translateX(-50%); display: flex; align-items: center; gap: 20px; border: 1px solid rgba(255,255,255,0.1); border-radius: 999px; background: rgba(11,20,15,0.9); color: #789086; padding: 8px 20px; font-size: 12px; }
     .legend i { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 999px; }
     .zoom-controls { position: absolute; left: 28px; bottom: 26px; z-index: 29; display: grid; overflow: hidden; border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; background: rgba(7,14,10,0.9); box-shadow: 0 12px 32px rgba(0,0,0,0.34); }
@@ -104,7 +110,7 @@ function pageCss() {
     .fit-icon { display: inline-block; width: 15px; height: 15px; border: 2px solid currentColor; border-radius: 3px; }
     .scan-foot { position: absolute; right: 32px; bottom: 32px; z-index: 20; color: #53665d; text-align: right; font-size: 12px; line-height: 1.6; }
     .access-warning { position: absolute; left: 32px; right: 32px; bottom: 88px; z-index: 25; max-width: 720px; border: 1px solid rgba(241,200,91,0.42); border-radius: 8px; background: rgba(31,27,12,0.92); color: #f7daa0; padding: 12px 14px; font-size: 14px; line-height: 1.45; }
-    .drawer-scrim { position: absolute; inset: 0; z-index: 24; background: rgba(0,0,0,0.58); pointer-events: none; }
+    .drawer-scrim { position: absolute; inset: 0; z-index: 18; background: rgba(0,0,0,0.58); pointer-events: none; }
     .details-panel { position: absolute; right: 22px; top: 64px; bottom: 26px; z-index: 30; width: min(492px, calc(100vw - 44px)); overflow: hidden; border: 1px solid #294034; border-radius: 24px; background: linear-gradient(180deg, rgba(21,31,25,0.98), rgba(8,17,12,0.98)); box-shadow: 0 24px 80px rgba(0,0,0,0.52); }
     .details-head { display: flex; align-items: center; gap: 16px; padding: 26px 26px 22px; border-bottom: 1px solid rgba(255,255,255,0.08); }
     .details-title { min-width: 0; flex: 1; }
@@ -129,6 +135,12 @@ function pageCss() {
     .delete-button { color: #ff6b57; background: transparent; font-weight: 800; }
     .save-button { min-height: 48px; border-radius: 10px; background: #287a5a; color: #effbf5; padding: 0 18px; font-weight: 800; box-shadow: 0 10px 30px rgba(54,180,126,0.18); }
     .helper-text { margin: 10px 0 0; color: #687c72; font-size: 12px; line-height: 1.45; }
+    .modal-card { position: absolute; left: 50%; top: 50%; z-index: 31; width: min(440px, calc(100vw - 44px)); transform: translate(-50%, -50%); border: 1px solid #294034; border-radius: 20px; background: linear-gradient(180deg, rgba(21,31,25,0.99), rgba(8,17,12,0.99)); box-shadow: 0 24px 80px rgba(0,0,0,0.56); overflow: hidden; }
+    .modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 22px 24px; border-bottom: 1px solid rgba(255,255,255,0.08); }
+    .modal-head h2 { margin: 0; color: #f4fbf6; font-size: 20px; letter-spacing: 0; }
+    .modal-body { padding: 22px 24px 24px; }
+    .modal-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 22px; }
+    .secondary-button { min-height: 44px; border: 1px solid #2a3c33; border-radius: 10px; background: rgba(255,255,255,0.04); color: #c8d8d0; padding: 0 16px; cursor: pointer; font: inherit; font-weight: 800; }
     .graph-3d { position: absolute; inset: 0; overflow: hidden; }
     .graph-3d::before { content: ''; position: absolute; z-index: 1; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 50%, transparent 38%, rgba(2,5,4,.46) 100%); }
     .graph-3d canvas { display: block; cursor: grab; }
@@ -263,16 +275,17 @@ function interactiveTsxPage(graph) {
   return `'use client';
 
 import dynamic from 'next/dynamic';
-import { useCallback, useEffect, useMemo, useRef, useState, type CSSProperties } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState, type CSSProperties, type PointerEvent } from 'react';
 import type { ForceGraphMethods, NodeObject } from 'react-force-graph-3d';
 import * as THREE from 'three';
 import SpriteText from 'three-spritetext';
 
 const css = ${JSON.stringify(pageCss())};
 type Evidence = { type?: string; value?: string; confidence?: string };
-type RawService = { id: string; name: string; key?: string; category?: string; confidence?: string; evidence?: Evidence[]; iconUrl?: string | null };
+type RawService = { id: string; name: string; key?: string; category?: string; confidence?: string; evidence?: Evidence[]; iconUrl?: string | null; parentId?: string | null };
 type ServiceNode = RawService & { color: string; x: number; y: number };
 type DraftDetails = { subtitle: string; use: string; account: string; passwordLocation: string };
+type NewServiceDraft = { name: string; category: string; parentId: string };
 type ServiceLink = { label: string; url: string };
 type GraphNode3D = { id: string; name: string; category: string; color: string; iconUrl?: string | null; monogram: string; isProduct: boolean; x?: number; y?: number; z?: number };
 type GraphLink3D = { id: string; source: string | GraphNode3D; target: string | GraphNode3D; label: string };
@@ -293,11 +306,16 @@ function initials(name: string) {
 }
 
 function edgePath(node: ServiceNode) {
+  return edgePathBetween({ x: 50, y: 50 }, node);
+}
+
+function edgePathBetween(parent: { x: number; y: number }, node: ServiceNode) {
   const isLeft = node.x < 50;
-  const fromX = isLeft ? node.x + 8 : node.x - 8;
-  const endX = isLeft ? 47 : 53;
-  const midX = isLeft ? Math.max(fromX + 7, 42) : Math.min(fromX - 7, 58);
-  return \`M \${fromX} \${node.y} H \${midX} V 50 H \${endX}\`;
+  const fromX = parent.x;
+  const fromY = parent.y;
+  const endX = isLeft ? node.x + 8 : node.x - 8;
+  const midX = (fromX + endX) / 2;
+  return \`M \${fromX} \${fromY} H \${midX} V \${node.y} H \${endX}\`;
 }
 
 function primaryEvidence(service: RawService) {
@@ -317,6 +335,25 @@ function graphLink(link: GraphLink3D) {
   return link;
 }
 
+function slugify(value: string) {
+  return value.toLowerCase().trim().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '') || 'service';
+}
+
+function servicePosition(index: number) {
+  const point = layout[index];
+  if (point) return point;
+  const angle = (index - layout.length) * 2.399963229728653;
+  const radius = 34 + ((index - layout.length) % 4) * 4;
+  return {
+    x: 50 + Math.cos(angle) * radius,
+    y: 50 + Math.sin(angle) * radius * 0.72,
+  };
+}
+
+function relationshipLabel(parentId?: string | null) {
+  return parentId ? 'depends on' : 'uses';
+}
+
 function iconObject(node: GraphNode3D, selected: boolean) {
   const group = new THREE.Group();
   const radius = node.isProduct ? 10 : 7;
@@ -367,7 +404,7 @@ function iconObject(node: GraphNode3D, selected: boolean) {
 
   const label = new SpriteText(node.name);
   label.color = selected ? '#b9f6da' : '#dfeae4';
-  label.textHeight = selected ? 5.4 : 4.7;
+  label.textHeight = selected ? 4.1 : 3.2;
   label.fontSize = 220;
   label.fontWeight = selected ? '700' : '600';
   label.backgroundColor = 'rgba(5, 8, 7, .72)';
@@ -511,6 +548,70 @@ function DetailsPanel({
   );
 }
 
+function AddServiceModal({
+  draft,
+  nodes,
+  onChange,
+  onClose,
+  onSubmit,
+}: {
+  draft: NewServiceDraft;
+  nodes: ServiceNode[];
+  onChange: (draft: NewServiceDraft) => void;
+  onClose: () => void;
+  onSubmit: () => void;
+}) {
+  return (
+    <>
+      <div className="drawer-scrim" />
+      <section className="modal-card" aria-label="Add service">
+        <div className="modal-head">
+          <h2>Add service</h2>
+          <button type="button" className="close-button" onClick={onClose} aria-label="Close add service">×</button>
+        </div>
+        <div className="modal-body">
+          <label className="field-label" htmlFor="new-service-name">Service name</label>
+          <input
+            id="new-service-name"
+            className="details-input"
+            value={draft.name}
+            onChange={(event) => onChange({ ...draft, name: event.target.value })}
+            placeholder="Stripe, Vercel, Google Cloud"
+            autoFocus
+          />
+
+          <label className="field-label" htmlFor="new-service-category">Use</label>
+          <input
+            id="new-service-category"
+            className="details-input"
+            value={draft.category}
+            onChange={(event) => onChange({ ...draft, category: event.target.value })}
+            placeholder="billing, hosting, analytics"
+          />
+
+          <label className="field-label" htmlFor="new-service-parent">Parent node</label>
+          <select
+            id="new-service-parent"
+            className="details-input"
+            value={draft.parentId}
+            onChange={(event) => onChange({ ...draft, parentId: event.target.value })}
+          >
+            <option value="product">{graph.project?.name ?? 'Product'}</option>
+            {nodes.map((node) => (
+              <option key={node.id} value={node.id}>{node.name}</option>
+            ))}
+          </select>
+
+          <div className="modal-actions">
+            <button type="button" className="secondary-button" onClick={onClose}>Cancel</button>
+            <button type="button" className="save-button" onClick={onSubmit}>Add service</button>
+          </div>
+        </div>
+      </section>
+    </>
+  );
+}
+
 function ServiceGraph3D({
   nodes,
   selectedId,
@@ -524,6 +625,7 @@ function ServiceGraph3D({
   const graphRef = useRef<ForceGraphMethods<GraphNode3D, GraphLink3D> | undefined>(undefined);
   const [size, setSize] = useState({ width: 900, height: 700 });
   const hasFramed = useRef(false);
+  const hasConfiguredForces = useRef(false);
   const graphData = useMemo(() => ({
     nodes: [{
       id: 'project',
@@ -543,10 +645,10 @@ function ServiceGraph3D({
       isProduct: node.category === 'product',
     }))],
     links: nodes.map((node): GraphLink3D => ({
-      id: \`project-\${node.id}\`,
-      source: 'project',
+      id: \`\${node.parentId ?? 'project'}-\${node.id}\`,
+      source: node.parentId ?? 'project',
       target: node.id,
-      label: node.confidence === 'high' ? 'uses' : 'may use',
+      label: node.confidence === 'high' ? relationshipLabel(node.parentId) : \`may \${relationshipLabel(node.parentId)}\`,
     })),
   }), [nodes]);
 
@@ -573,17 +675,24 @@ function ServiceGraph3D({
     return () => observer.disconnect();
   }, []);
 
-  useEffect(() => {
+  const configureForces = useCallback(() => {
     const graphInstance = graphRef.current;
-    if (!graphInstance) return;
+    if (!graphInstance || hasConfiguredForces.current) return;
     const charge = graphInstance.d3Force('charge') as AdjustableForce | undefined;
     const link = graphInstance.d3Force('link') as AdjustableForce | undefined;
     graphInstance.renderer().setPixelRatio(Math.min(window.devicePixelRatio * 1.5, 3));
-    charge?.strength?.(-230);
-    link?.distance?.(92);
+    charge?.strength?.(-720);
+    link?.distance?.(210);
     graphInstance.d3ReheatSimulation();
+    hasConfiguredForces.current = true;
+  }, []);
+
+  useEffect(() => {
     hasFramed.current = false;
-  }, [graphData.nodes.length, graphData.links.length]);
+    hasConfiguredForces.current = false;
+    const frame = window.requestAnimationFrame(configureForces);
+    return () => window.cancelAnimationFrame(frame);
+  }, [configureForces, graphData.nodes.length, graphData.links.length]);
 
   const focusNode = useCallback((node: NodeObject) => {
     const serviceNode = graphNode(node);
@@ -653,16 +762,17 @@ function ServiceGraph3D({
         linkDirectionalParticleWidth={1.8}
         linkDirectionalParticleSpeed={0.006}
         linkDirectionalParticleColor={() => '#b9f6da'}
-        d3AlphaDecay={0.035}
-        d3VelocityDecay={0.24}
-        warmupTicks={50}
-        cooldownTicks={160}
+        d3AlphaDecay={0.026}
+        d3VelocityDecay={0.18}
+        warmupTicks={90}
+        cooldownTicks={260}
         onNodeClick={focusNode}
         onBackgroundClick={() => onSelect(null)}
+        onEngineTick={configureForces}
         onEngineStop={() => {
           if (hasFramed.current) return;
           hasFramed.current = true;
-          graphRef.current?.zoomToFit(700, 72);
+          graphRef.current?.zoomToFit(700, 130);
         }}
       />
       <div className="graph-3d__zoom" aria-label="3D zoom controls">
@@ -676,14 +786,19 @@ function ServiceGraph3D({
 }
 
 export default function InternalServiceMapPage() {
-  const nodes = useMemo<ServiceNode[]>(() => (graph.services ?? []).slice(0, layout.length).map((service, index) => ({
+  const [services, setServices] = useState<RawService[]>(() => graph.services ?? []);
+  const nodes = useMemo<ServiceNode[]>(() => services.map((service, index) => ({
     ...service,
-    ...layout[index],
+    ...servicePosition(index),
     color: palette[index % palette.length],
-  })), []);
+  })), [services]);
   const [mode, setMode] = useState<'2d' | '3d'>('2d');
   const [zoom, setZoom] = useState(1);
+  const [pan, setPan] = useState({ x: 0, y: 0 });
+  const [panStart, setPanStart] = useState<{ pointerId: number; x: number; y: number; panX: number; panY: number } | null>(null);
   const [selectedId, setSelectedId] = useState<string | null>(null);
+  const [isAddingService, setIsAddingService] = useState(false);
+  const [newService, setNewService] = useState<NewServiceDraft>({ name: '', category: '', parentId: 'product' });
   const [drafts, setDrafts] = useState<Record<string, DraftDetails>>(() => Object.fromEntries(nodes.map((service) => [
     service.id,
     {
@@ -694,9 +809,64 @@ export default function InternalServiceMapPage() {
     },
   ])));
   const selected = nodes.find((service) => service.id === selectedId) ?? null;
+  const nodeById = useMemo(() => new Map(nodes.map((node) => [node.id, node])), [nodes]);
   const zoomIn = () => setZoom((current) => Math.min(1.45, Number((current + 0.12).toFixed(2))));
   const zoomOut = () => setZoom((current) => Math.max(0.7, Number((current - 0.12).toFixed(2))));
-  const resetZoom = () => setZoom(1);
+  const resetZoom = () => {
+    setZoom(1);
+    setPan({ x: 0, y: 0 });
+  };
+  const startPan = (event: PointerEvent<HTMLElement>) => {
+    if (mode !== '2d' || event.button !== 0 || (event.target as HTMLElement).closest('button, a, input, textarea, select')) return;
+    event.currentTarget.setPointerCapture(event.pointerId);
+    setPanStart({ pointerId: event.pointerId, x: event.clientX, y: event.clientY, panX: pan.x, panY: pan.y });
+  };
+  const movePan = (event: PointerEvent<HTMLElement>) => {
+    if (!panStart || panStart.pointerId !== event.pointerId) return;
+    setPan({
+      x: panStart.panX + event.clientX - panStart.x,
+      y: panStart.panY + event.clientY - panStart.y,
+    });
+  };
+  const stopPan = (event: PointerEvent<HTMLElement>) => {
+    if (panStart?.pointerId !== event.pointerId) return;
+    setPanStart(null);
+  };
+  const addService = () => {
+    const name = newService.name.trim();
+    if (!name) return;
+    const baseId = slugify(name);
+    const existingIds = new Set(services.map((service) => service.id));
+    let id = baseId;
+    let suffix = 2;
+    while (existingIds.has(id)) {
+      id = \`\${baseId}-\${suffix}\`;
+      suffix += 1;
+    }
+    const service: RawService = {
+      id,
+      key: id,
+      name,
+      category: newService.category.trim() || 'service',
+      confidence: 'manual',
+      evidence: [{ type: 'manual', value: 'Added in servicemap UI.', confidence: 'manual' }],
+      iconUrl: null,
+      parentId: newService.parentId === 'product' ? null : newService.parentId,
+    };
+    setServices((current) => [...current, service]);
+    setDrafts((current) => ({
+      ...current,
+      [id]: {
+        subtitle: categoryLabel(service.category),
+        use: primaryEvidence(service),
+        account: '',
+        passwordLocation: '',
+      },
+    }));
+    setSelectedId(id);
+    setNewService({ name: '', category: '', parentId: 'product' });
+    setIsAddingService(false);
+  };
 
   return (
     <main className="servicemap-shell">
@@ -711,6 +881,7 @@ export default function InternalServiceMapPage() {
         </div>
         <div className="top-actions">
           <span>{nodes.length} services</span>
+          <button type="button" className="add-service-button" onClick={() => setIsAddingService(true)}>+ Add service</button>
           <div className="mode-toggle" aria-label="View mode">
             <button type="button" className={\`mode-button \${mode === '2d' ? 'is-active' : ''}\`} onClick={() => setMode('2d')}>2D</button>
             <button type="button" className={\`mode-button \${mode === '3d' ? 'is-active' : ''}\`} onClick={() => setMode('3d')}>3D</button>
@@ -718,35 +889,47 @@ export default function InternalServiceMapPage() {
         </div>
       </header>
 
-      <section className="map">
+      <section
+        className={\`map \${panStart ? 'is-panning' : ''} \${selectedId ? 'has-selection' : ''}\`}
+        onPointerDown={startPan}
+        onPointerMove={movePan}
+        onPointerUp={stopPan}
+        onPointerCancel={stopPan}
+      >
         <div className="intro">
           <strong>{graph.project?.name ?? 'Project'} infrastructure</strong>
           <span>{selected ? \`Tracing \${selected.name}\` : mode === '3d' ? 'Rotate and explore your service relationships' : 'Select a service to trace its dependencies'}</span>
         </div>
         {mode === '2d' ? (
           <>
-            <div className="map-plane" style={{ '--zoom': zoom } as CSSProperties}>
+            <div className="map-plane" style={{ '--zoom': zoom, '--pan-x': \`\${pan.x}px\`, '--pan-y': \`\${pan.y}px\` } as CSSProperties}>
               <svg className="edges" viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true">
-                {nodes.map((service) => (
+                {nodes.map((service) => {
+                  const parent = service.parentId ? nodeById.get(service.parentId) : null;
+                  const isActive = selectedId === service.id || selectedId === service.parentId;
+                  return (
                   <path
                     key={service.id}
-                    className={\`edge-line \${selectedId === service.id ? 'is-active' : selectedId ? 'is-muted' : ''}\`}
-                    d={edgePath(service)}
+                    className={\`edge-line \${isActive ? 'is-active' : selectedId ? 'is-muted' : ''}\`}
+                    d={parent ? edgePathBetween(parent, service) : edgePath(service)}
                     fill="none"
-                    stroke={selectedId === service.id ? '#65f0ad' : 'rgba(103, 130, 118, 0.48)'}
-                    strokeWidth={selectedId === service.id ? '0.28' : '0.16'}
-                    strokeDasharray={selectedId === service.id ? '0.72 0.58' : undefined}
-                    strokeLinecap={selectedId === service.id ? 'round' : undefined}
+                    stroke={isActive ? '#65f0ad' : 'rgba(103, 130, 118, 0.48)'}
+                    strokeWidth={isActive ? '3' : '0.16'}
+                    strokeDasharray={isActive ? '10 8' : undefined}
+                    strokeLinecap={isActive ? 'round' : undefined}
                     vectorEffect="non-scaling-stroke"
                   />
-                ))}
+                  );
+                })}
               </svg>
               <div className="hub"><div className="hub-inner"><ProjectMark /></div></div>
-              {nodes.map((service) => (
+              {nodes.map((service) => {
+                const isRelated = selectedId === service.parentId || selected?.parentId === service.id;
+                return (
                 <button
                   type="button"
                   key={service.id}
-                  className={\`service-node \${selectedId === service.id ? 'is-selected' : ''}\`}
+                  className={\`service-node \${selectedId === service.id ? 'is-selected' : ''} \${isRelated ? 'is-related' : ''}\`}
                   style={{ left: \`\${service.x}%\`, top: \`\${service.y}%\` }}
                   onClick={() => setSelectedId(service.id)}
                 >
@@ -757,7 +940,8 @@ export default function InternalServiceMapPage() {
                   </div>
                   <i className={\`status-dot status-\${service.confidence}\`} />
                 </button>
-              ))}
+                );
+              })}
             </div>
             <div className="legend">
               <span><i style={{ background: '#4a7cff' }} />Cloud</span>
@@ -785,6 +969,15 @@ export default function InternalServiceMapPage() {
             onChange={(nextDetails) => setDrafts((current) => ({ ...current, [selected.id]: nextDetails }))}
           />
         ) : null}
+        {isAddingService ? (
+          <AddServiceModal
+            draft={newService}
+            nodes={nodes}
+            onChange={setNewService}
+            onClose={() => setIsAddingService(false)}
+            onSubmit={addService}
+          />
+        ) : null}
       </section>
     </main>
   );