servicemap 0.1.41 → 0.1.43

package/package.json

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

package/servicemap/SKILL.md

@@ -25,7 +25,7 @@ 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.

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); }
@@ -83,18 +85,21 @@ function pageCss() {
     .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: #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-active { stroke: #7ee2b8; stroke-width: 2.4px; stroke-dasharray: 1 9; stroke-linecap: round; animation: servicemapDash 640ms linear infinite; filter: drop-shadow(0 0 5px rgba(126,226,184,.9)) drop-shadow(0 0 16px rgba(93,224,165,.42)); 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: 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); }
+    .service-node:hover, .service-node.is-selected, .service-node.is-highlighted-child { border-color: #66efae; box-shadow: 0 0 0 2px rgba(101,240,173,0.42), 0 18px 44px rgba(0,0,0,0.38); }
+    .service-node.is-highlighted-child { box-shadow: 0 0 0 1px rgba(126,226,184,.36), 0 18px 44px rgba(0,0,0,0.38), 0 0 34px rgba(126,226,184,.18); }
     .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; }
+    .map.has-selection .service-node.is-selected, .map.has-selection .service-node.is-highlighted-child { 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); }
@@ -111,6 +116,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; }
@@ -157,7 +166,7 @@ function pageCss() {
     .graph-3d__zoom button + button { border-top: 1px solid rgba(255,255,255,.08); }
     .graph-3d__zoom button:hover { color: #fff; background: rgba(255,255,255,.08); }
     .graph-3d__loading { position: absolute; inset: 0; display: grid; place-items: center; color: #75857c; font-size: 9px; }
-    @keyframes servicemapDash { from { stroke-dashoffset: 10; } to { stroke-dashoffset: 0; } }
+    @keyframes servicemapDash { to { stroke-dashoffset: -10; } }
     @media (prefers-reduced-motion: reduce) { .edge-line.is-active { animation: none; } }
     @keyframes servicemapLinkFlow { to { background-position: 22px 0; } }
     @media (max-width: 920px) {
@@ -311,9 +320,48 @@ 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 collectParentIds(nodes: ServiceNode[], selectedId: string | null) {
+  const ids = new Set<string>();
+  if (!selectedId) return ids;
+  nodes.forEach((node) => {
+    const parentId = node.parentId ?? 'project';
+    if (node.id === selectedId) ids.add(parentId);
+  });
+  return ids;
+}
+
+function isActiveTreeEdge(sourceId: string, targetId: string, selectedId: string | null, parentIds: Set<string>, descendantIds: Set<string>) {
+  if (!selectedId) return false;
+  if (sourceId === selectedId && descendantIds.has(targetId)) return true;
+  if (descendantIds.has(sourceId) && descendantIds.has(targetId)) return true;
+  return parentIds.has(sourceId) && targetId === selectedId;
+}
+
 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 parentIds = useMemo(() => collectParentIds(nodes, selectedId), [nodes, selectedId]);
+  const descendantIds = useMemo(() => collectDescendantIds(nodes, selectedId), [nodes, selectedId]);
   useEffect(() => {
     if (!ref.current) return;
     const observer = new ResizeObserver(([entry]) => {
@@ -337,7 +385,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, parentIds, 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>;
@@ -614,7 +662,7 @@ function AddServiceModal({
             placeholder="billing, hosting, analytics"
           />
 
-          <label className="field-label" htmlFor="new-service-parent">Parent node</label>
+          <label className="field-label" htmlFor="new-service-parent">Parent service</label>
           <select
             id="new-service-parent"
             className="details-input"
@@ -640,10 +688,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);
@@ -676,19 +726,17 @@ function ServiceGraph3D({
       label: node.confidence === 'high' ? relationshipLabel(node.parentId) : \`may \${relationshipLabel(node.parentId)}\`,
     })),
   }), [nodes]);
-
-  const activeIds = useMemo(() => {
+  const parentIds = useMemo(() => collectParentIds(nodes, selectedId), [nodes, selectedId]);
+  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, parentIds, descendantIds)) ids.add(link.id);
     });
     return ids;
-  }, [graphData.links, selectedId]);
+  }, [descendantIds, graphData.links, parentIds, selectedId]);
 
   useEffect(() => {
     const element = containerRef.current;
@@ -723,6 +771,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);
@@ -745,7 +798,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);
   }, []);
@@ -771,22 +828,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}
@@ -805,11 +862,11 @@ 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} connections highlighted</div>}
     </div>
   );
 }
@@ -843,6 +900,7 @@ export default function InternalServiceMapPage() {
   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();
@@ -886,12 +944,21 @@ 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 highlightedChildIds = useMemo(() => selectedId === 'project' ? descendantIds : new Set<string>(), [descendantIds, 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);
@@ -957,11 +1024,15 @@ 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={() => {
+            setNewService((current) => ({ ...current, parentId: selectedId && selectedId !== 'project' ? selectedId : 'product' }));
+            setIsAddingService(true);
+          }}>+ Add service</button>
         </div>
       </header>
 
@@ -974,20 +1045,21 @@ 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 isHighlightedChild = highlightedChildIds.has(service.id);
+                const isRelated = descendantIds.has(service.id) || selected?.parentId === service.id || isHighlightedChild;
                 return (
                 <button
                   type="button"
                   key={service.id}
-                  className={\`service-node \${selectedId === service.id ? 'is-selected' : ''} \${isRelated ? 'is-related' : ''}\`}
+                  className={\`service-node \${selectedId === service.id ? 'is-selected' : ''} \${isRelated ? 'is-related' : ''} \${isHighlightedChild ? 'is-highlighted-child' : ''}\`}
                   style={{ left: \`\${service.x}%\`, top: \`\${service.y}%\` }}
                   onPointerDown={(event) => startNodeDrag(event, service)}
                   onPointerMove={moveNodeDrag}
@@ -1016,7 +1088,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>