servicemap 0.1.34 → 0.1.40

package/package.json

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

package/servicemap/SKILL.md

@@ -24,6 +24,9 @@ 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.
+   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';
@@ -69,23 +70,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: #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; }
     .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 +101,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 +111,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 +136,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; }
@@ -142,12 +155,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; }
     }
   `;
@@ -259,20 +275,21 @@ ${htmlBody(graph)}
 `;
 }
 
-function interactiveTsxPage(graph) {
+export function interactiveTsxPage(graph, { desktop = false } = {}) {
   return `'use client';
 
-import dynamic from 'next/dynamic';
-import { useCallback, useEffect, useMemo, useRef, useState, type CSSProperties } from 'react';
+${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';
 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 };
@@ -282,7 +299,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, ' ');
@@ -292,12 +309,36 @@ function initials(name: string) {
   return name.split(/\\s+/).filter(Boolean).slice(0, 2).map((part) => part[0]).join('').toUpperCase();
 }
 
-function edgePath(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}\`;
+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) {
@@ -317,6 +358,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 +427,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 +571,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 +648,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 +668,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 +698,28 @@ 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);
+    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) => {
     const serviceNode = graphNode(node);
@@ -653,16 +789,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 +813,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,
     {
@@ -696,7 +838,61 @@ 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 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 +907,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 +915,29 @@ 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}>
-              <svg className="edges" viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true">
-                {nodes.map((service) => (
-                  <path
-                    key={service.id}
-                    className={\`edge-line \${selectedId === service.id ? 'is-active' : selectedId ? 'is-muted' : ''}\`}
-                    d={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}
-                    vectorEffect="non-scaling-stroke"
-                  />
-                ))}
-              </svg>
+            <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>
-              {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 +948,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 +977,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>
   );
@@ -844,7 +1045,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;
 
@@ -922,7 +1123,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);
 });