servicemap 0.1.40 → 0.1.42

package/package.json

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

package/servicemap/SKILL.md

@@ -25,7 +25,10 @@ If no website can be found, create a desktop app fallback at `servicemap-desktop
 8. Adapt the generated surface to the project's existing design system only when the route is clear and the edits are low-risk.
 9. Run the project's relevant build, lint, and focused tests.
    Open the generated map in a browser and verify both 2D and 3D modes.
-   Click a service and verify its details panel and animated illuminated dashed connection to its parent.
+   Click a product or service and verify its details panel and animated illuminated dashed child-branch connections.
+   Drag a service and verify that only that node moves and its connections follow, including after zooming.
+   After testing 3D, return the delivered preview to 2D and close any open details panel.
+   Always initialize new maps in 2D; do not persist the last selected view mode.
    Desktop output uses the same interactive component as website output; missing interactions are generator bugs to fix, not controls to remove.
 10. If a website page was created, tell the user it is only local until deployed and ask whether they want to deploy it now.
     Do not deploy unless the user explicitly says yes.

package/servicemap/scripts/generate-page.mjs

@@ -71,6 +71,8 @@ function pageCss() {
     .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); }
+    .center-button { width: 48px; height: 48px; border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; background: #0b130f; color: #b4c9bf; display: grid; place-items: center; cursor: pointer; box-shadow: 0 0 0 7px rgba(47,128,91,.16); }
+    .center-button:hover { border-color: rgba(101,240,173,.42); color: #d9f8e8; box-shadow: 0 0 0 7px rgba(47,128,91,.2), 0 0 22px rgba(101,240,173,.14); }
     .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); }
@@ -86,9 +88,13 @@ function pageCss() {
     .edge-line.is-active { stroke: #7ee2b8; stroke-width: 2.4px; stroke-dasharray: 5 5; animation: servicemapDash .5s linear infinite; filter: drop-shadow(0 0 5px rgba(126,226,184,.55)); 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); }
+    button.hub { cursor: pointer; }
+    .hub.is-selected, button.hub:hover { border-color: #66efae; box-shadow: 0 0 0 9px rgba(79,183,128,0.12), 0 0 0 2px rgba(101,240,173,0.42), 0 0 52px rgba(100,255,174,0.24); }
     .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; }
+    button.service-node { cursor: grab; touch-action: none; user-select: none; color: inherit; font: inherit; text-align: left; }
+    button.service-node:active { cursor: grabbing; }
+    .service-node img { pointer-events: none; }
     .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; }
@@ -109,6 +115,10 @@ function pageCss() {
     .zoom-button:last-child { border-bottom: 0; font-size: 18px; }
     .zoom-button:hover { background: rgba(101,240,173,0.1); color: #d8f8e8; }
     .fit-icon { display: inline-block; width: 15px; height: 15px; border: 2px solid currentColor; border-radius: 3px; }
+    .center-icon { position: relative; width: 21px; height: 21px; border: 2px solid currentColor; border-radius: 999px; }
+    .center-icon::before, .center-icon::after { content: ''; position: absolute; background: currentColor; }
+    .center-icon::before { left: 50%; top: -5px; bottom: -5px; width: 2px; transform: translateX(-50%); }
+    .center-icon::after { top: 50%; left: -5px; right: -5px; height: 2px; transform: translateY(-50%); }
     .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: 18; background: rgba(0,0,0,0.58); pointer-events: none; }
@@ -309,9 +319,36 @@ function initials(name: string) {
   return name.split(/\\s+/).filter(Boolean).slice(0, 2).map((part) => part[0]).join('').toUpperCase();
 }
 
+function collectDescendantIds(nodes: ServiceNode[], selectedId: string | null) {
+  const ids = new Set<string>();
+  if (!selectedId) return ids;
+  const childrenByParent = new Map<string, ServiceNode[]>();
+  nodes.forEach((node) => {
+    const parentId = node.parentId ?? 'project';
+    const siblings = childrenByParent.get(parentId) ?? [];
+    siblings.push(node);
+    childrenByParent.set(parentId, siblings);
+  });
+  const queue = [...(childrenByParent.get(selectedId) ?? [])];
+  while (queue.length) {
+    const node = queue.shift()!;
+    if (ids.has(node.id)) continue;
+    ids.add(node.id);
+    queue.push(...(childrenByParent.get(node.id) ?? []));
+  }
+  return ids;
+}
+
+function isActiveTreeEdge(sourceId: string, targetId: string, selectedId: string | null, descendantIds: Set<string>) {
+  if (!selectedId) return false;
+  if (sourceId === selectedId && descendantIds.has(targetId)) return true;
+  return descendantIds.has(sourceId) && descendantIds.has(targetId);
+}
+
 function Connections({ nodes, selectedId }: { nodes: ServiceNode[]; selectedId: string | null }) {
   const ref = useRef<SVGSVGElement>(null);
   const [size, setSize] = useState({ width: 0, height: 0, nodeHalfWidth: 125 });
+  const descendantIds = useMemo(() => collectDescendantIds(nodes, selectedId), [nodes, selectedId]);
   useEffect(() => {
     if (!ref.current) return;
     const observer = new ResizeObserver(([entry]) => {
@@ -335,7 +372,7 @@ function Connections({ nodes, selectedId }: { nodes: ServiceNode[]; selectedId:
       const dy = Math.sign(y2 - y1);
       const radius = Math.min(5, Math.abs(x2 - x1) / 4, Math.abs(y2 - y1) / 2);
       const path = \`M \${x1} \${y1} H \${middle - dx * radius} Q \${middle} \${y1} \${middle} \${y1 + dy * radius} V \${y2 - dy * radius} Q \${middle} \${y2} \${middle + dx * radius} \${y2} H \${x2}\`;
-      const active = selectedId === node.id || selectedId === node.parentId;
+      const active = isActiveTreeEdge(node.parentId ?? 'project', node.id, selectedId, descendantIds);
       return <path key={node.id} d={path} fill="none" stroke="rgba(103,130,118,.48)" strokeWidth="1.2" className={\`edge-line \${active ? 'is-active' : selectedId ? 'is-muted' : ''}\`} />;
     })}
   </svg>;
@@ -638,10 +675,12 @@ function AddServiceModal({
 function ServiceGraph3D({
   nodes,
   selectedId,
+  resetKey,
   onSelect,
 }: {
   nodes: ServiceNode[];
   selectedId: string | null;
+  resetKey: number;
   onSelect: (id: string | null) => void;
 }) {
   const containerRef = useRef<HTMLDivElement>(null);
@@ -674,19 +713,16 @@ function ServiceGraph3D({
       label: node.confidence === 'high' ? relationshipLabel(node.parentId) : \`may \${relationshipLabel(node.parentId)}\`,
     })),
   }), [nodes]);
-
-  const activeIds = useMemo(() => {
+  const descendantIds = useMemo(() => collectDescendantIds(nodes, selectedId), [nodes, selectedId]);
+  const activeTreeLinkIds = useMemo(() => {
     const ids = new Set<string>();
-    if (!selectedId) return ids;
-    ids.add(selectedId);
     graphData.links.forEach((link) => {
       const source = endpointId(link.source);
       const target = endpointId(link.target);
-      if (source === selectedId) ids.add(target);
-      if (target === selectedId) ids.add(source);
+      if (isActiveTreeEdge(source, target, selectedId, descendantIds)) ids.add(link.id);
     });
     return ids;
-  }, [graphData.links, selectedId]);
+  }, [descendantIds, graphData.links, selectedId]);
 
   useEffect(() => {
     const element = containerRef.current;
@@ -721,6 +757,11 @@ function ServiceGraph3D({
     };
   }, [configureForces, graphData.nodes.length, graphData.links.length]);
 
+  useEffect(() => {
+    if (!resetKey) return;
+    graphRef.current?.zoomToFit(700, 130);
+  }, [resetKey]);
+
   const focusNode = useCallback((node: NodeObject) => {
     const serviceNode = graphNode(node);
     onSelect(serviceNode.id);
@@ -743,7 +784,11 @@ function ServiceGraph3D({
     const offset = camera.position.clone().sub(target);
     const currentDistance = offset.length();
     if (currentDistance === 0) return;
-    const nextDistance = THREE.MathUtils.clamp(currentDistance * factor, 35, 1200);
+    const nextDistance = Math.max(35, currentDistance * factor);
+    if (camera instanceof THREE.PerspectiveCamera && nextDistance * 4 > camera.far) {
+      camera.far = nextDistance * 4;
+      camera.updateProjectionMatrix();
+    }
     const nextPosition = target.clone().add(offset.multiplyScalar(nextDistance / currentDistance));
     graphInstance.cameraPosition(nextPosition, target, 240);
   }, []);
@@ -769,22 +814,22 @@ function ServiceGraph3D({
         linkColor={(link) => {
           const serviceLink = graphLink(link as GraphLink3D);
           if (!selectedId) return '#415149';
-          return endpointId(serviceLink.source) === selectedId || endpointId(serviceLink.target) === selectedId ? '#7ee2b8' : '#17211c';
+          return activeTreeLinkIds.has(serviceLink.id) ? '#7ee2b8' : '#17211c';
         }}
         linkWidth={(link) => {
           const serviceLink = graphLink(link as GraphLink3D);
-          return endpointId(serviceLink.source) === selectedId || endpointId(serviceLink.target) === selectedId ? 2.2 : selectedId ? 0.35 : 0.8;
+          return activeTreeLinkIds.has(serviceLink.id) ? 2.2 : selectedId ? 0.35 : 0.8;
         }}
         linkOpacity={0.8}
         linkDirectionalArrowLength={3.5}
         linkDirectionalArrowRelPos={0.8}
         linkDirectionalArrowColor={(link) => {
           const serviceLink = graphLink(link as GraphLink3D);
-          return endpointId(serviceLink.source) === selectedId || endpointId(serviceLink.target) === selectedId ? '#9ff0cb' : '#506158';
+          return activeTreeLinkIds.has(serviceLink.id) ? '#9ff0cb' : '#506158';
         }}
         linkDirectionalParticles={(link) => {
           const serviceLink = graphLink(link as GraphLink3D);
-          return endpointId(serviceLink.source) === selectedId || endpointId(serviceLink.target) === selectedId ? 3 : 0;
+          return activeTreeLinkIds.has(serviceLink.id) ? 3 : 0;
         }}
         linkDirectionalParticleWidth={1.8}
         linkDirectionalParticleSpeed={0.006}
@@ -803,27 +848,76 @@ function ServiceGraph3D({
         }}
       />
       <div className="graph-3d__zoom" aria-label="3D zoom controls">
-        <button type="button" onClick={() => zoom(0.78)} title="Zoom in" aria-label="Zoom in">+</button>
-        <button type="button" onClick={() => zoom(1.28)} title="Zoom out" aria-label="Zoom out">−</button>
+        <button type="button" onClick={() => zoom(1 / 1.5)} title="Zoom in" aria-label="Zoom in">+</button>
+        <button type="button" onClick={() => zoom(1.5)} title="Zoom out" aria-label="Zoom out">−</button>
       </div>
       <div className="graph-3d__help" aria-hidden="true">Drag to rotate <span /> Scroll to zoom <span /> Click a service</div>
-      {selectedId && <div className="graph-3d__focus" aria-hidden="true">{Math.max(activeIds.size - 1, 0)} direct connections highlighted</div>}
+      {selectedId && <div className="graph-3d__focus" aria-hidden="true">{activeTreeLinkIds.size} child connections highlighted</div>}
     </div>
   );
 }
 
 export default function InternalServiceMapPage() {
   const [services, setServices] = useState<RawService[]>(() => graph.services ?? []);
+  const [positions, setPositions] = useState<Record<string, { x: number; y: number }>>({});
+  const positionsRef = useRef(positions);
+  const layoutKey = 'servicemap:positions:' + (graph.project?.name ?? 'project');
+  const nodeDrag = useRef<{ id: string; pointerId: number; clientX: number; clientY: number; x: number; y: number; width: number; height: number; moved: boolean } | null>(null);
+  const suppressClick = useRef(false);
+  useEffect(() => {
+    try {
+      const stored = JSON.parse(localStorage.getItem(layoutKey) ?? '{}');
+      const valid = Object.fromEntries(Object.entries(stored).filter(([, value]) => {
+        const point = value as { x?: number; y?: number } | null;
+        return point && Number.isFinite(point.x) && Number.isFinite(point.y);
+      })) as Record<string, { x: number; y: number }>;
+      positionsRef.current = valid;
+      setPositions(valid);
+    } catch { /* Layout remains usable when storage is unavailable. */ }
+  }, [layoutKey]);
   const nodes = useMemo<ServiceNode[]>(() => services.map((service, index) => ({
     ...service,
     ...servicePosition(index),
+    ...positions[service.id],
     color: palette[index % palette.length],
-  })), [services]);
+  })), [services, positions]);
   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 [reset3DKey, setReset3DKey] = useState(0);
+  const startNodeDrag = (event: PointerEvent<HTMLButtonElement>, node: ServiceNode) => {
+    if (event.button !== 0) return;
+    event.stopPropagation();
+    const plane = event.currentTarget.parentElement!.getBoundingClientRect();
+    event.currentTarget.setPointerCapture(event.pointerId);
+    suppressClick.current = false;
+    nodeDrag.current = { id: node.id, pointerId: event.pointerId, clientX: event.clientX, clientY: event.clientY, x: node.x, y: node.y, width: plane.width, height: plane.height, moved: false };
+  };
+  const moveNodeDrag = (event: PointerEvent<HTMLButtonElement>) => {
+    const drag = nodeDrag.current;
+    if (!drag || drag.pointerId !== event.pointerId) return;
+    event.stopPropagation();
+    const dx = event.clientX - drag.clientX;
+    const dy = event.clientY - drag.clientY;
+    if (!drag.moved && Math.hypot(dx, dy) < 4) return;
+    drag.moved = true;
+    suppressClick.current = true;
+    const next = { ...positionsRef.current, [drag.id]: { x: drag.x + dx / drag.width * 100, y: drag.y + dy / drag.height * 100 } };
+    positionsRef.current = next;
+    setPositions(next);
+  };
+  const stopNodeDrag = (event: PointerEvent<HTMLButtonElement>) => {
+    const drag = nodeDrag.current;
+    if (!drag || drag.pointerId !== event.pointerId) return;
+    event.stopPropagation();
+    nodeDrag.current = null;
+    if (event.currentTarget.hasPointerCapture(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId);
+    if (drag.moved) {
+      try { localStorage.setItem(layoutKey, JSON.stringify(positionsRef.current)); } catch { /* Keep the current layout in memory. */ }
+    }
+  };
   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) => [
@@ -836,12 +930,20 @@ export default function InternalServiceMapPage() {
     },
   ])));
   const selected = nodes.find((service) => service.id === selectedId) ?? null;
-  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 descendantIds = useMemo(() => collectDescendantIds(nodes, selectedId), [nodes, selectedId]);
+  const zoomIn = () => setZoom((current) => Math.min(1.45, current * 1.5));
+  const zoomOut = () => setZoom((current) => current / 1.5);
   const resetZoom = () => {
     setZoom(1);
     setPan({ x: 0, y: 0 });
   };
+  const centerMap = () => {
+    if (mode === '3d') {
+      setReset3DKey((current) => current + 1);
+      return;
+    }
+    resetZoom();
+  };
   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);
@@ -907,11 +1009,12 @@ 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>
           </div>
+          <button type="button" className="center-button" onClick={centerMap} aria-label="Center graph" title="Center graph"><span className="center-icon" aria-hidden="true" /></button>
+          <button type="button" className="add-service-button" onClick={() => setIsAddingService(true)}>+ Add service</button>
         </div>
       </header>
 
@@ -924,22 +1027,30 @@ export default function InternalServiceMapPage() {
       >
         <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>
+          <span>{selected ? \`Tracing \${selected.name}\` : selectedId === 'project' ? \`Tracing \${graph.project?.name ?? 'Project'}\` : 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, '--pan-x': \`\${pan.x}px\`, '--pan-y': \`\${pan.y}px\` } as CSSProperties}>
               <Connections nodes={nodes} selectedId={selectedId} />
-              <div className="hub"><div className="hub-inner"><ProjectMark /></div></div>
+              <button type="button" className={\`hub \${selectedId === 'project' ? 'is-selected' : ''}\`} onClick={() => setSelectedId('project')} aria-label={\`Trace \${graph.project?.name ?? 'Project'} child services\`}><div className="hub-inner"><ProjectMark /></div></button>
               {nodes.map((service) => {
-                const isRelated = selectedId === service.parentId || selected?.parentId === service.id;
+                const isRelated = descendantIds.has(service.id) || selected?.parentId === service.id;
                 return (
                 <button
                   type="button"
                   key={service.id}
                   className={\`service-node \${selectedId === service.id ? 'is-selected' : ''} \${isRelated ? 'is-related' : ''}\`}
                   style={{ left: \`\${service.x}%\`, top: \`\${service.y}%\` }}
-                  onClick={() => setSelectedId(service.id)}
+                  onPointerDown={(event) => startNodeDrag(event, service)}
+                  onPointerMove={moveNodeDrag}
+                  onPointerUp={stopNodeDrag}
+                  onPointerCancel={stopNodeDrag}
+                  onLostPointerCapture={stopNodeDrag}
+                  onClick={(event) => {
+                    if (event.detail !== 0 && suppressClick.current) { suppressClick.current = false; return; }
+                    setSelectedId(service.id);
+                  }}
                 >
                   <ServiceLogo service={service} />
                   <div className="service-copy">
@@ -958,7 +1069,7 @@ export default function InternalServiceMapPage() {
             </div>
           </>
         ) : (
-          <ServiceGraph3D nodes={nodes} selectedId={selectedId} onSelect={setSelectedId} />
+          <ServiceGraph3D nodes={nodes} selectedId={selectedId} resetKey={reset3DKey} onSelect={setSelectedId} />
         )}
         <div className="zoom-controls" aria-label="Map zoom controls">
           <button type="button" className="zoom-button" onClick={zoomIn} aria-label="Zoom in">+</button>