servicemap 0.1.38 → 0.1.41

package/package.json

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

package/servicemap/SKILL.md

@@ -24,6 +24,12 @@ If no website can be found, create a desktop app fallback at `servicemap-desktop
 7. If the scan reports `framework: static` or no website route can be safely attached, run `scripts/generate-desktop-app.mjs --root <project-root>` to create `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.
+   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.
     If they approve, use the project's existing deployment path, preferring `npm run deploy` when present, then provider-specific project configuration such as Vercel or Netlify.

package/servicemap/scripts/generate-desktop-app.mjs

@@ -1,6 +1,7 @@
 #!/usr/bin/env node
 import { mkdir, readFile, writeFile } from 'node:fs/promises';
 import { dirname, join, resolve } from 'node:path';
+import { interactiveTsxPage, prepareProjectLogo } from './generate-page.mjs';
 
 const defaultInput = '.servicemap/internal-servicemap.json';
 const defaultOutput = 'servicemap-desktop';
@@ -48,6 +49,9 @@ function packageJson(graph) {
       typescript: '^5.0.0',
       react: '^19.0.0',
       'react-dom': '^19.0.0',
+      'react-force-graph-3d': '^1.29.1',
+      three: '^0.185.1',
+      'three-spritetext': '^1.10.0',
       '@tauri-apps/api': '^2.0.0',
     },
     devDependencies: {
@@ -86,498 +90,6 @@ function indexHtml() {
 `;
 }
 
-function mainJsx() {
-  return `import React from 'react';
-import { createRoot } from 'react-dom/client';
-import graph from './servicemap-data.json';
-import './styles.css';
-
-function strongestEvidence(service) {
-  const evidence = service.evidence?.[0];
-  return evidence ? \`\${evidence.type}: \${evidence.value}\` : 'No evidence captured';
-}
-
-function categoryLabel(value) {
-  return String(value ?? 'service').replace(/-/g, ' ');
-}
-
-function categoryClass(value) {
-  return String(value ?? 'service').replace(/[^a-z0-9]+/gi, '-').toLowerCase();
-}
-
-function layoutServices(services) {
-  const left = [];
-  const right = [];
-  services.forEach((service, index) => {
-    if (index % 2 === 0) left.push(service);
-    else right.push(service);
-  });
-
-  const place = (items, side) => items.map((service, index) => {
-    const count = Math.max(items.length, 1);
-    const y = 15 + ((index + 0.5) * 70) / count;
-    const x = side === 'left' ? 10 + (index % 2) * 13 : 71 + (index % 2) * 10;
-    return { service, x, y, side };
-  });
-
-  return [...place(left, 'left'), ...place(right, 'right')];
-}
-
-function App() {
-  const services = graph.services ?? [];
-  const highConfidence = services.filter((service) => service.confidence === 'high').length;
-  const nodes = layoutServices(services);
-
-  return (
-    <main className="appShell">
-      <header className="topbar">
-        <div className="brand">
-          <div className="brandIcon" aria-hidden="true">⌘</div>
-          <div>
-            <h1>service-map</h1>
-            <p>{graph.project?.name ?? 'Internal'} command center</p>
-          </div>
-        </div>
-        <div className="toolbar" aria-label="Service map actions">
-          <span className="identity">{graph.project?.framework ?? 'static'}</span>
-          <button type="button">2D</button>
-          <button type="button" className="ghost">3D</button>
-          <button type="button" className="ghost">Import</button>
-          <button type="button" className="primary">+ Add service</button>
-        </div>
-      </header>
-
-      <section className="mapCanvas" aria-label="Detected service map">
-        <div className="sectionLabel">
-          <span>{(graph.project?.name ?? 'project').toUpperCase()} INFRASTRUCTURE</span>
-          <small>{services.length} services · {highConfidence} high confidence</small>
-        </div>
-
-        <svg className="edges" viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true">
-          {nodes.map((node) => {
-            const startX = node.side === 'left' ? node.x + 13 : node.x;
-            const endX = 50;
-            const midX = node.side === 'left' ? 38 : 62;
-            return (
-              <path
-                key={node.service.id}
-                d={\`M \${startX} \${node.y} H \${midX} V 50 H \${endX}\`}
-                className={node.service.confidence === 'high' ? 'edge edgeHigh' : 'edge'}
-              />
-            );
-          })}
-        </svg>
-
-        <div className="centerNode" aria-label="Project">
-          <div className="coreIcon" aria-hidden="true">⌬</div>
-        </div>
-
-        {nodes.map(({ service, x, y }) => (
-          <article
-            className={\`serviceNode \${service.confidence === 'high' ? 'isHigh' : ''}\`}
-            key={service.id}
-            style={{ left: \`\${x}%\`, top: \`\${y}%\` }}
-            title={strongestEvidence(service)}
-          >
-            <div className={\`logo logo-\${categoryClass(service.category)}\`} aria-hidden="true">
-              {service.iconUrl ? <img src={service.iconUrl} alt="" /> : service.name.slice(0, 2).toUpperCase()}
-            </div>
-            <div className="nameBlock">
-              <strong>{service.name}</strong>
-              <span>{categoryLabel(service.category)}</span>
-            </div>
-            <span className={\`statusDot \${service.confidence === 'high' ? 'active' : 'pending'}\`} />
-          </article>
-        ))}
-
-        {!services.length && (
-          <div className="empty">
-            <strong>No external services detected</strong>
-            <span>Run the scanner again after adding integrations.</span>
-          </div>
-        )}
-
-        <div className="legend">
-          <span><b className="blue" /> Cloud</span>
-          <span><b className="green" /> Active path</span>
-          <span><b className="yellow" /> Lower confidence</span>
-        </div>
-      </section>
-    </main>
-  );
-}
-
-createRoot(document.getElementById('root')).render(<App />);
-`;
-}
-
-function stylesCss() {
-  return `:root {
-  color: #eef7f2;
-  background: #020806;
-  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-}
-
-* {
-  box-sizing: border-box;
-}
-
-body {
-  margin: 0;
-  min-width: 320px;
-  min-height: 100vh;
-  background: #020806;
-}
-
-button {
-  border: 0;
-  border-radius: 8px;
-  min-height: 42px;
-  padding: 0 16px;
-  color: #e8f5ee;
-  background: #101a16;
-  font: inherit;
-  font-weight: 700;
-}
-
-.appShell {
-  min-height: 100vh;
-  background: #020806;
-}
-
-.topbar {
-  height: 86px;
-  padding: 18px 28px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 20px;
-  background: #202622;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
-}
-
-.brand {
-  display: flex;
-  align-items: center;
-  gap: 14px;
-  min-width: 0;
-}
-
-.brandIcon {
-  width: 48px;
-  height: 48px;
-  border-radius: 12px;
-  display: grid;
-  place-items: center;
-  background: #1f704f;
-  border: 1px solid #38c987;
-  box-shadow: 0 0 24px rgba(56, 201, 135, 0.25);
-  color: #c9f8df;
-  font-size: 25px;
-}
-
-h1 {
-  margin: 0 0 3px;
-  font-size: 22px;
-  line-height: 1;
-  letter-spacing: 0;
-}
-
-p {
-  margin: 0;
-}
-
-.brand p,
-.nameBlock span,
-.sectionLabel,
-.legend {
-  color: rgba(238, 247, 242, 0.54);
-}
-
-.toolbar {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  min-width: 0;
-}
-
-.identity {
-  color: #93c8ac;
-  font-size: 13px;
-  font-weight: 800;
-  margin-right: 10px;
-  white-space: nowrap;
-}
-
-.toolbar .primary {
-  background: #247b58;
-  box-shadow: inset 0 0 0 1px rgba(104, 255, 179, 0.25);
-}
-
-.toolbar .ghost {
-  color: rgba(238, 247, 242, 0.72);
-}
-
-.mapCanvas {
-  position: relative;
-  min-height: calc(100vh - 86px);
-  overflow: hidden;
-  background:
-    radial-gradient(circle at center, rgba(37, 128, 88, 0.16), transparent 34%),
-    radial-gradient(circle at 1px 1px, rgba(115, 255, 183, 0.16) 1px, transparent 1px),
-    #020806;
-  background-size: auto, 28px 28px, auto;
-}
-
-.sectionLabel {
-  position: absolute;
-  top: 28px;
-  left: 32px;
-  right: 32px;
-  display: flex;
-  justify-content: space-between;
-  gap: 18px;
-  font-size: 13px;
-  font-weight: 800;
-  letter-spacing: 0.16em;
-  text-transform: uppercase;
-}
-
-.sectionLabel small {
-  letter-spacing: 0.08em;
-}
-
-.edges {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-}
-
-.edge {
-  fill: none;
-  stroke: rgba(121, 158, 140, 0.34);
-  stroke-width: 0.12;
-}
-
-.edgeHigh {
-  stroke: rgba(115, 255, 183, 0.5);
-}
-
-.centerNode {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  width: 112px;
-  height: 112px;
-  transform: translate(-50%, -50%);
-  display: grid;
-  place-items: center;
-  border-radius: 26px;
-  background: rgba(15, 31, 24, 0.88);
-  border: 1px solid rgba(114, 255, 183, 0.28);
-  box-shadow: 0 0 0 9px rgba(56, 201, 135, 0.08), 0 0 45px rgba(56, 201, 135, 0.18);
-}
-
-.coreIcon {
-  width: 78px;
-  height: 78px;
-  display: grid;
-  place-items: center;
-  border-radius: 20px;
-  background: #f7fbf7;
-  color: #101513;
-  font-size: 38px;
-}
-
-.serviceNode {
-  position: absolute;
-  width: clamp(190px, 16vw, 260px);
-  min-height: 70px;
-  transform: translateY(-50%);
-  display: grid;
-  grid-template-columns: 48px minmax(0, 1fr) 12px;
-  align-items: center;
-  gap: 12px;
-  padding: 12px;
-  border-radius: 14px;
-  background: linear-gradient(180deg, rgba(22, 33, 27, 0.98), rgba(12, 20, 16, 0.96));
-  border: 1px solid rgba(158, 202, 176, 0.24);
-  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.34), inset 0 0 0 1px rgba(255, 255, 255, 0.03);
-}
-
-.serviceNode.isHigh {
-  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.34), 0 0 24px rgba(56, 201, 135, 0.08);
-}
-
-.logo {
-  width: 48px;
-  height: 48px;
-  border-radius: 12px;
-  background: #24302b;
-  color: #fff;
-  display: grid;
-  place-items: center;
-  overflow: hidden;
-  flex: 0 0 auto;
-  font-size: 12px;
-  font-weight: 800;
-}
-
-.logo img {
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-  padding: 7px;
-  filter: brightness(0) invert(1);
-}
-
-.logo-cloud {
-  background: #2d72f6;
-}
-
-.logo-developer-tools {
-  background: #202833;
-}
-
-.logo-billing {
-  background: #635bff;
-}
-
-.logo-email,
-.logo-collaboration {
-  background: #f45d48;
-}
-
-.logo-ai {
-  background: #1f7a55;
-}
-
-.logo-monitoring {
-  background: #6b4bd8;
-}
-
-.logo-auth {
-  background: #28a37a;
-}
-
-.logo-database {
-  background: #f57c00;
-}
-
-.nameBlock {
-  min-width: 0;
-}
-
-.nameBlock strong {
-  display: block;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-size: 15px;
-}
-
-.nameBlock span {
-  display: block;
-  margin-top: 4px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-size: 12px;
-  text-transform: capitalize;
-}
-
-.statusDot {
-  width: 8px;
-  height: 8px;
-  border-radius: 999px;
-  background: #eac94f;
-  box-shadow: 0 0 12px rgba(234, 201, 79, 0.9);
-}
-
-.statusDot.active {
-  background: #69f6b1;
-  box-shadow: 0 0 12px rgba(105, 246, 177, 0.9);
-}
-
-.empty {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, 90px);
-  display: grid;
-  gap: 6px;
-  text-align: center;
-  color: rgba(238, 247, 242, 0.74);
-}
-
-.legend {
-  position: absolute;
-  left: 50%;
-  bottom: 28px;
-  transform: translateX(-50%);
-  display: flex;
-  gap: 20px;
-  padding: 8px 16px;
-  border-radius: 999px;
-  background: rgba(8, 15, 12, 0.82);
-  border: 1px solid rgba(158, 202, 176, 0.18);
-  font-size: 12px;
-  font-weight: 800;
-}
-
-.legend span {
-  display: inline-flex;
-  align-items: center;
-  gap: 7px;
-  white-space: nowrap;
-}
-
-.legend b {
-  width: 8px;
-  height: 8px;
-  border-radius: 999px;
-}
-
-.legend .blue {
-  background: #3d8cff;
-}
-
-.legend .green {
-  background: #69f6b1;
-}
-
-.legend .yellow {
-  background: #eac94f;
-}
-
-@media (max-width: 880px) {
-  .topbar {
-    height: auto;
-    align-items: flex-start;
-    flex-direction: column;
-  }
-
-  .toolbar {
-    flex-wrap: wrap;
-  }
-
-  .mapCanvas {
-    min-height: 980px;
-  }
-
-  .serviceNode {
-    width: 210px;
-  }
-
-  .sectionLabel {
-    align-items: flex-start;
-    flex-direction: column;
-  }
-}
-`;
-}
 
 function tauriConfig(graph) {
   return `${JSON.stringify({
@@ -657,11 +169,17 @@ async function main() {
   const graph = await readJson(options.input);
 
   await mkdir(options.output, { recursive: true });
+  await prepareProjectLogo(graph, options.output);
   await writeProjectFile(options.output, 'package.json', packageJson(graph));
   await writeProjectFile(options.output, 'index.html', indexHtml());
   await writeProjectFile(options.output, 'vite.config.js', viteConfig());
-  await writeProjectFile(options.output, 'src/main.jsx', mainJsx());
-  await writeProjectFile(options.output, 'src/styles.css', stylesCss());
+  await writeProjectFile(options.output, 'src/main.jsx', `import React from 'react';
+import { createRoot } from 'react-dom/client';
+import ServiceMap from './ServiceMap';
+createRoot(document.getElementById('root')).render(<ServiceMap />);
+`);
+  await writeProjectFile(options.output, 'src/ServiceMap.tsx', interactiveTsxPage(graph, { desktop: true }));
+  await writeProjectFile(options.output, '.gitignore', 'node_modules/\ndist/\nsrc-tauri/target/\n');
   await writeProjectFile(options.output, 'src/servicemap-data.json', `${JSON.stringify(graph, null, 2)}\n`);
   await writeProjectFile(options.output, 'src-tauri/tauri.conf.json', tauriConfig(graph));
   await writeProjectFile(options.output, 'src-tauri/Cargo.toml', cargoToml());

package/servicemap/scripts/generate-page.mjs

@@ -2,6 +2,7 @@
 import { existsSync } from 'node:fs';
 import { copyFile, mkdir, readFile, writeFile } from 'node:fs/promises';
 import { spawn } from 'node:child_process';
+import { pathToFileURL } from 'node:url';
 import { dirname, extname, isAbsolute, join, resolve } from 'node:path';
 
 const defaultInput = '.servicemap/internal-servicemap.json';
@@ -82,12 +83,14 @@ 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: #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-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); }
     .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; }
@@ -154,12 +157,15 @@ 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 { to { stroke-dashoffset: -1.3; } }
+    @keyframes servicemapDash { from { stroke-dashoffset: 10; } to { stroke-dashoffset: 0; } }
+    @media (prefers-reduced-motion: reduce) { .edge-line.is-active { animation: none; } }
     @keyframes servicemapLinkFlow { to { background-position: 22px 0; } }
     @media (max-width: 920px) {
       .map { min-height: 1120px; }
       .service-node { width: 220px; }
-      .top-actions { display: none; }
+      .servicemap-topbar { height: auto; min-height: 88px; flex-wrap: wrap; padding: 14px; }
+      .top-actions { display: flex; flex-wrap: wrap; gap: 8px; }
+      .top-actions > span { display: none; }
       .details-panel { position: fixed; inset: auto 12px 12px; top: 110px; width: auto; }
     }
   `;
@@ -271,10 +277,10 @@ ${htmlBody(graph)}
 `;
 }
 
-function interactiveTsxPage(graph) {
+export function interactiveTsxPage(graph, { desktop = false } = {}) {
   return `'use client';
 
-import dynamic from 'next/dynamic';
+${desktop ? "import ForceGraph3D from 'react-force-graph-3d';" : "import dynamic from 'next/dynamic';"}
 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';
@@ -295,7 +301,7 @@ type OrbitControlsLike = { target?: THREE.Vector3 };
 const graph = ${JSON.stringify(graph)} as { generatedAt: string; project?: { name?: string; logoUrl?: string }; services?: RawService[] };
 const palette = ${JSON.stringify(palette)} as string[];
 const layout = ${JSON.stringify(layout)} as Array<{ x: number; y: number }>;
-const ForceGraph3D = dynamic(() => import('react-force-graph-3d'), { ssr: false });
+${desktop ? '' : "const ForceGraph3D = dynamic(() => import('react-force-graph-3d'), { ssr: false });"}
 
 function categoryLabel(value?: string | null) {
   return String(value ?? 'service').replace(/-/g, ' ');
@@ -305,17 +311,36 @@ function initials(name: string) {
   return name.split(/\\s+/).filter(Boolean).slice(0, 2).map((part) => part[0]).join('').toUpperCase();
 }
 
-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 = 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 Connections({ nodes, selectedId }: { nodes: ServiceNode[]; selectedId: string | null }) {
+  const ref = useRef<SVGSVGElement>(null);
+  const [size, setSize] = useState({ width: 0, height: 0, nodeHalfWidth: 125 });
+  useEffect(() => {
+    if (!ref.current) return;
+    const observer = new ResizeObserver(([entry]) => {
+      const node = ref.current?.parentElement?.querySelector('.service-node');
+      const nodeHalfWidth = node ? parseFloat(getComputedStyle(node).width) / 2 : 125;
+      setSize({ width: entry.contentRect.width, height: entry.contentRect.height, nodeHalfWidth });
+    });
+    observer.observe(ref.current);
+    return () => observer.disconnect();
+  }, []);
+  return <svg ref={ref} className="edges" aria-hidden="true">
+    {size.width > 0 && nodes.map((node) => {
+      const parent = nodes.find((candidate) => candidate.id === node.parentId);
+      const direction = node.x < (parent?.x ?? 50) ? -1 : 1;
+      const x1 = (parent?.x ?? 50) * size.width / 100 + direction * (parent ? size.nodeHalfWidth : 66);
+      const y1 = (parent?.y ?? 50) * size.height / 100;
+      const x2 = node.x * size.width / 100 - direction * size.nodeHalfWidth;
+      const y2 = node.y * size.height / 100;
+      const middle = (x1 + x2) / 2;
+      const dx = Math.sign(x2 - x1);
+      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;
+      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>;
 }
 
 function primaryEvidence(service: RawService) {
@@ -691,7 +716,11 @@ function ServiceGraph3D({
     hasFramed.current = false;
     hasConfiguredForces.current = false;
     const frame = window.requestAnimationFrame(configureForces);
-    return () => window.cancelAnimationFrame(frame);
+    const initialFit = window.setTimeout(() => graphRef.current?.zoomToFit(400, 100), 350);
+    return () => {
+      window.cancelAnimationFrame(frame);
+      window.clearTimeout(initialFit);
+    };
   }, [configureForces, graphData.nodes.length, graphData.links.length]);
 
   const focusNode = useCallback((node: NodeObject) => {
@@ -787,16 +816,64 @@ function ServiceGraph3D({
 
 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 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) => [
@@ -809,7 +886,6 @@ 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 = () => {
@@ -903,25 +979,7 @@ export default function InternalServiceMapPage() {
         {mode === '2d' ? (
           <>
             <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) => {
-                  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 \${isActive ? 'is-active' : selectedId ? 'is-muted' : ''}\`}
-                    d={parent ? edgePathBetween(parent, service) : edgePath(service)}
-                    fill="none"
-                    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>
+              <Connections nodes={nodes} selectedId={selectedId} />
               <div className="hub"><div className="hub-inner"><ProjectMark /></div></div>
               {nodes.map((service) => {
                 const isRelated = selectedId === service.parentId || selected?.parentId === service.id;
@@ -931,7 +989,15 @@ export default function InternalServiceMapPage() {
                   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">
@@ -1037,7 +1103,7 @@ const html = ${JSON.stringify(htmlBody(graph))};
 `;
 }
 
-async function prepareProjectLogo(graph, outputRoot) {
+export async function prepareProjectLogo(graph, outputRoot) {
   const logoPath = graph.project?.logo?.path;
   if (!logoPath) return;
 
@@ -1115,7 +1181,7 @@ async function main() {
   console.log(`Wrote /internalservicemap page to ${route.path}`);
 }
 
-main().catch((error) => {
+if (process.argv[1] && import.meta.url === pathToFileURL(resolve(process.argv[1])).href) main().catch((error) => {
   console.error(error);
   process.exit(1);
 });