servicemap 0.1.25 → 0.1.28

package/README.md

@@ -71,6 +71,8 @@ servicemap generate --root <project-path>
 servicemap --root <project-path>
 servicemap generate --root <project-path> --allow-emails founder@example.com,ops@example.com
 servicemap generate --root <project-path> --allow-email founder@example.com --allow-email ops@example.com
+servicemap generate --root <project-path> --deploy
+servicemap generate --root <project-path> --deploy-command "npm run deploy"
 servicemap --mode page
 servicemap --mode desktop
 servicemap --dry-run
@@ -85,6 +87,10 @@ servicemap skills install --agent codex
 servicemap update
 ```
 
+When a website page is generated, Servicemap prompts before deployment when it detects a deployment command.
+It prefers an existing `npm run deploy` script, then provider config such as Vercel or Netlify.
+Use `--no-deploy` to skip the prompt.
+
 ## Contents
 
 - `servicemap/`: installable skill folder

package/bin/servicemap.mjs

@@ -168,6 +168,8 @@ function parseArgs() {
     installMethod: null,
     allowedEmails: [],
     open: true,
+    deploy: null,
+    deployCommand: null,
     invokedWithoutArgs: args.length === 0,
     explicitCommand: false,
     generationRequested: false,
@@ -210,6 +212,9 @@ function parseArgs() {
     if (arg === '--yes' || arg === '-y') options.yes = true;
     if (arg === '--dry-run') options.dryRun = true;
     if (arg === '--no-open') options.open = false;
+    if (arg === '--deploy') options.deploy = true;
+    if (arg === '--no-deploy') options.deploy = false;
+    if (arg === '--deploy-command') options.deployCommand = args[++index] ?? null;
     if (arg === '--help' || arg === '-h') options.help = true;
   }
 
@@ -222,8 +227,8 @@ function help() {
 
 Usage:
   servicemap
-  servicemap generate [--root <project>] [--mode auto|page|desktop] [--allow-emails <list>] [--dry-run] [--no-open]
-  servicemap --root <project> [--mode auto|page|desktop] [--allow-emails <list>] [--dry-run] [--no-open]
+  servicemap generate [--root <project>] [--mode auto|page|desktop] [--allow-emails <list>] [--dry-run] [--no-open] [--deploy|--no-deploy]
+  servicemap --root <project> [--mode auto|page|desktop] [--allow-emails <list>] [--dry-run] [--no-open] [--deploy|--no-deploy]
   servicemap install-skill [--survey] [--agent codex|claude|grok|all] [--targets <ids>] [--install-method copy|symlink]
   servicemap skills install [--survey] [--agent codex|claude|grok|all]
   servicemap update
@@ -231,6 +236,8 @@ Usage:
 Examples:
   npx servicemap
   npx servicemap generate --root ../my-app --allow-emails founder@example.com,ops@example.com
+  npx servicemap generate --root ../my-app --deploy
+  npx servicemap generate --root ../my-app --deploy-command "npm run deploy"
   npx servicemap -- --root ../my-app
   npx servicemap install-skill
   npx servicemap install-skill --survey
@@ -257,6 +264,23 @@ function run(command, args, options = {}) {
   });
 }
 
+function runShell(command, options = {}) {
+  const shell = process.platform === 'win32' ? 'cmd' : 'sh';
+  const args = process.platform === 'win32' ? ['/c', command] : ['-lc', command];
+  return run(shell, args, options);
+}
+
+function askYesNo(question) {
+  if (!process.stdin.isTTY || !process.stdout.isTTY) return Promise.resolve(false);
+  const rl = readline.createInterface({ input: process.stdin, output: process.stdout });
+  return new Promise((resolvePromise) => {
+    rl.question(`${question} [y/N] `, (answer) => {
+      rl.close();
+      resolvePromise(/^y(es)?$/i.test(answer.trim()));
+    });
+  });
+}
+
 function openUrl(url) {
   const command = process.platform === 'darwin'
     ? 'open'
@@ -352,6 +376,47 @@ async function readScan(root) {
   return JSON.parse(await readFile(scanPath, 'utf8'));
 }
 
+async function packageJsonFor(root) {
+  return JSON.parse(await readFile(resolve(root, 'package.json'), 'utf8').catch(() => '{}'));
+}
+
+async function detectDeployCommand(root, options) {
+  if (options.deployCommand) return options.deployCommand;
+  const packageJson = await packageJsonFor(root);
+  if (packageJson.scripts?.deploy) return 'npm run deploy';
+  if (existsSync(resolve(root, 'vercel.json')) || existsSync(resolve(root, '.vercel/project.json'))) {
+    return 'npx vercel --prod';
+  }
+  if (existsSync(resolve(root, 'netlify.toml'))) {
+    return 'npx netlify deploy --prod';
+  }
+  return null;
+}
+
+async function maybeDeploy(root, options) {
+  if (options.deploy === false) return;
+  const command = await detectDeployCommand(root, options);
+  if (!command) {
+    if (options.deploy === true) {
+      console.log('No deploy command was detected. Add a deploy script or pass --deploy-command "<command>".');
+    } else {
+      console.log('Generated /internalservicemap. Deploy manually, or pass --deploy-command next time.');
+    }
+    return;
+  }
+
+  const shouldDeploy = options.deploy === true
+    ? true
+    : await askYesNo(`Deploy /internalservicemap now with "${command}"?`);
+  if (!shouldDeploy) {
+    console.log(`Skipped deployment. To deploy later, run: ${command}`);
+    return;
+  }
+
+  console.log(`Deploying with: ${command}`);
+  await runShell(command, { cwd: root });
+}
+
 function targetsByIds(ids) {
   const byId = new Map(targetCatalog.map((target) => [target.id, target]));
   const targets = [];
@@ -709,6 +774,7 @@ async function main() {
   } else {
     await run(process.execPath, [pageScript, '--root', options.root]);
     if (options.open) await openGeneratedPage(options.root, scan.project?.framework);
+    await maybeDeploy(options.root, options);
   }
 }
 

package/package.json

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

package/servicemap/SKILL.md

@@ -24,7 +24,10 @@ 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.
-10. Report the page or desktop app path, service count, validation run, any services marked low or medium confidence, and whether requested email access was enforced.
+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.
+11. Report the page or desktop app path, service count, validation run, any services marked low or medium confidence, whether requested email access was enforced, and whether deployment was skipped or completed.
 
 ## Safety Rules
 
@@ -32,7 +35,8 @@ Read environment variable names only.
 Never copy, expose, summarize, or commit secret values.
 The scan output may include env var names such as `STRIPE_SECRET_KEY`, but not their values.
 
-Do not add authentication, deployment, analytics, or external writes unless the user explicitly asks.
+Do not add authentication, analytics, or external writes unless the user explicitly asks.
+Deploy only after the generated website page exists and the user has confirmed deployment.
 If the repository already has route protection conventions for internal pages, follow them.
 When email access is requested, enforce it only through the app's existing server-side authentication.
 The built-in generator can enforce email allowlists for Next.js App Router projects using Clerk by checking `currentUser()` against the configured emails.

package/servicemap/scripts/generate-page.mjs

@@ -59,7 +59,9 @@ 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; }
-    .mode-pill { border-radius: 8px; background: #0b130f; color: #7cf1b5; padding: 8px 12px; }
+    .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; }
     .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; }
@@ -68,6 +70,8 @@ function pageCss() {
     .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); }
     .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); }
     .service-copy { min-width: 0; }
@@ -80,10 +84,46 @@ function pageCss() {
     .legend i { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 999px; }
     .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; }
+    .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; }
+    .details-title span { display: block; color: #83978d; font-size: 13px; }
+    .details-title strong { display: block; margin-top: 6px; color: #f4fbf6; font-size: 28px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+    .close-button, .link-button, .delete-button, .save-button { border: 0; cursor: pointer; font: inherit; }
+    .close-button { width: 36px; height: 36px; border-radius: 999px; background: transparent; color: #91a59b; font-size: 26px; }
+    .details-body { height: calc(100% - 100px); overflow: auto; padding: 26px; }
+    .details-section { padding: 0 0 28px; margin: 0 0 28px; border-bottom: 1px solid rgba(255,255,255,0.08); }
+    .details-section:last-child { border-bottom: 0; margin-bottom: 0; }
+    .section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; color: #91a59b; font-size: 13px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
+    .field-label { display: block; margin: 16px 0 8px; color: #83978d; font-size: 13px; }
+    .details-input, .details-textarea { width: 100%; border: 1px solid #2a3c33; border-radius: 10px; background: rgba(255,255,255,0.04); color: #e9f5ee; font: inherit; padding: 13px 14px; outline: none; }
+    .details-textarea { min-height: 96px; resize: vertical; line-height: 1.45; }
+    .details-input:focus, .details-textarea:focus { border-color: #65f0ad; box-shadow: 0 0 0 2px rgba(101,240,173,0.16); }
+    .links-list { display: grid; gap: 12px; }
+    .link-card { display: grid; grid-template-columns: 1fr auto; gap: 8px 10px; align-items: center; border: 1px solid #26382f; border-radius: 10px; background: rgba(255,255,255,0.035); padding: 14px; }
+    .link-card strong { color: #eef7f2; font-size: 14px; }
+    .link-card span { grid-column: 1 / -1; color: #74867d; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+    .link-button { color: #8dc9ae; background: transparent; padding: 4px; }
+    .details-actions { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 26px; border-top: 1px solid rgba(255,255,255,0.08); background: rgba(8,17,12,0.98); }
+    .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; }
+    .three-scene { position: absolute; inset: 0; perspective: 920px; overflow: hidden; cursor: grab; touch-action: none; }
+    .three-scene:active { cursor: grabbing; }
+    .three-space { position: absolute; left: 50%; top: 50%; width: 620px; height: 620px; transform-style: preserve-3d; transform: translate(-50%, -50%) rotateX(var(--rx, 58deg)) rotateZ(var(--rz, -28deg)); transition: transform 140ms ease; pointer-events: none; }
+    .three-link { position: absolute; left: 50%; top: 50%; width: var(--length); height: 1px; transform-origin: 0 0; transform: translate3d(0, 0, 0) rotateZ(var(--angle)) translateY(var(--z)); background: linear-gradient(90deg, rgba(101,240,173,0.42), rgba(101,240,173,0.05)); }
+    .three-node { position: absolute; left: 50%; top: 50%; width: 82px; height: 82px; transform: translate3d(var(--x), var(--y), var(--z)) translate(-50%, -50%) rotateZ(28deg) rotateX(-58deg); border: 0; border-radius: 999px; background: transparent; color: #eaf8f1; cursor: pointer; font: inherit; text-align: center; pointer-events: auto; }
+    .three-orb { display: grid; place-items: center; width: 38px; height: 38px; margin: 0 auto 7px; border-radius: 999px; background: var(--color); color: #fff; box-shadow: 0 0 28px color-mix(in srgb, var(--color), transparent 44%); font-size: 12px; font-weight: 900; }
+    .three-node span { display: block; font-size: 10px; line-height: 1.15; text-shadow: 0 2px 8px #000; }
+    .three-node.is-selected .three-orb { outline: 2px solid #65f0ad; outline-offset: 4px; }
+    .three-core { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 72px; height: 72px; transform: translate(-50%, -50%); border-radius: 999px; background: #f7faf7; color: #101611; font-size: 30px; box-shadow: 0 0 0 10px rgba(101,240,173,0.14), 0 0 46px rgba(101,240,173,0.22); }
+    .three-hint { position: absolute; left: 50%; bottom: 30px; z-index: 21; transform: translateX(-50%); border: 1px solid rgba(255,255,255,0.1); border-radius: 999px; background: rgba(11,20,15,0.9); color: #789086; padding: 10px 18px; font-size: 12px; }
     @media (max-width: 920px) {
       .map { min-height: 1120px; }
       .service-node { width: 220px; }
       .top-actions { display: none; }
+      .details-panel { position: fixed; inset: auto 12px 12px; top: 110px; width: auto; }
     }
   `;
 }
@@ -143,7 +183,10 @@ function htmlBody(graph) {
         </div>
         <div class="top-actions">
           <span>${services.length} services</span>
-          <span class="mode-pill">2D</span>
+          <span class="mode-toggle" aria-label="View mode">
+            <span class="mode-button is-active">2D</span>
+            <span class="mode-button">3D</span>
+          </span>
         </div>
       </header>
       <section class="map">
@@ -185,6 +228,320 @@ ${htmlBody(graph)}
 `;
 }
 
+function interactiveTsxPage(graph) {
+  return `'use client';
+
+import { useMemo, useState, type CSSProperties } from 'react';
+
+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 ServiceNode = RawService & { color: string; x: number; y: number };
+type DraftDetails = { subtitle: string; use: string; account: string; passwordLocation: string };
+type ServiceLink = { label: string; url: string };
+
+const graph = ${JSON.stringify(graph)} as { generatedAt: string; project?: { name?: string }; services?: RawService[] };
+const palette = ${JSON.stringify(palette)} as string[];
+const layout = ${JSON.stringify(layout)} as Array<{ x: number; y: number }>;
+
+function categoryLabel(value?: string | null) {
+  return String(value ?? 'service').replace(/-/g, ' ');
+}
+
+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 threePosition(index: number, count: number) {
+  const angle = (index / Math.max(count, 1)) * Math.PI * 2 - Math.PI / 2;
+  const radius = index % 3 === 0 ? 270 : index % 3 === 1 ? 215 : 320;
+  const z = ((index % 5) - 2) * 32;
+  return {
+    x: Math.cos(angle) * radius,
+    y: Math.sin(angle) * radius,
+    z,
+    angle: (angle * 180) / Math.PI,
+    length: radius,
+  };
+}
+
+function threeNodeStyle(index: number, count: number, color: string): CSSProperties {
+  const position = threePosition(index, count);
+  return {
+    '--x': \`\${position.x}px\`,
+    '--y': \`\${position.y}px\`,
+    '--z': \`\${position.z}px\`,
+    '--color': color,
+  } as CSSProperties;
+}
+
+function threeLinkStyle(index: number, count: number): CSSProperties {
+  const position = threePosition(index, count);
+  return {
+    '--angle': \`\${position.angle}deg\`,
+    '--length': \`\${position.length}px\`,
+    '--z': \`\${position.z}px\`,
+  } as CSSProperties;
+}
+
+function primaryEvidence(service: RawService) {
+  const evidence = service.evidence?.[0];
+  return evidence ? \`\${evidence.type}: \${evidence.value}\` : 'No evidence captured yet.';
+}
+
+function serviceLinks(service: RawService): ServiceLink[] {
+  const lower = service.name.toLowerCase();
+  const links: ServiceLink[] = [];
+  if (service.iconUrl) links.push({ label: \`\${service.name} docs\`, url: service.iconUrl.replace('/icons/', '/') });
+  if (lower.includes('firebase')) links.push({ label: 'Firebase console', url: 'https://console.firebase.google.com/' });
+  if (lower.includes('google')) links.push({ label: 'Google Cloud console', url: 'https://console.cloud.google.com/' });
+  if (lower.includes('cloudflare')) links.push({ label: 'Cloudflare dashboard', url: 'https://dash.cloudflare.com/' });
+  if (lower.includes('github')) links.push({ label: 'GitHub', url: 'https://github.com/' });
+  if (lower.includes('stripe')) links.push({ label: 'Stripe dashboard', url: 'https://dashboard.stripe.com/' });
+  if (lower.includes('vercel')) links.push({ label: 'Vercel dashboard', url: 'https://vercel.com/dashboard' });
+  if (lower.includes('microsoft')) links.push({ label: 'Microsoft Azure portal', url: 'https://portal.azure.com/' });
+  if (links.length === 0) links.push({ label: \`\${service.name} website\`, url: \`https://www.google.com/search?q=\${encodeURIComponent(service.name)}\` });
+  return links.slice(0, 4);
+}
+
+function ServiceLogo({ service }: { service: RawService & { color: string } }) {
+  return (
+    <div className="logo" style={{ background: service.color }}>
+      {service.iconUrl ? (
+        // eslint-disable-next-line @next/next/no-img-element
+        <img src={service.iconUrl} alt="" />
+      ) : (
+        <span>{initials(service.name)}</span>
+      )}
+    </div>
+  );
+}
+
+function DetailsPanel({
+  service,
+  details,
+  onChange,
+  onClose,
+}: {
+  service: ServiceNode;
+  details: DraftDetails;
+  onChange: (details: DraftDetails) => void;
+  onClose: () => void;
+}) {
+  const links = serviceLinks(service);
+  return (
+    <>
+      <div className="drawer-scrim" />
+      <aside className="details-panel" aria-label={\`\${service.name} details\`}>
+        <div className="details-head">
+          <ServiceLogo service={service} />
+          <div className="details-title">
+            <span>{categoryLabel(service.category)}</span>
+            <strong>{service.name}</strong>
+          </div>
+          <button type="button" className="close-button" onClick={onClose} aria-label="Close details">×</button>
+        </div>
+
+        <div className="details-body">
+          <section className="details-section">
+            <div className="section-heading">Service details</div>
+            <label className="field-label" htmlFor="service-subtitle">Service subtitle</label>
+            <input
+              id="service-subtitle"
+              className="details-input"
+              value={details.subtitle}
+              onChange={(event) => onChange({ ...details, subtitle: event.target.value })}
+            />
+
+            <label className="field-label" htmlFor="service-use">How it is used</label>
+            <textarea
+              id="service-use"
+              className="details-textarea"
+              value={details.use}
+              onChange={(event) => onChange({ ...details, use: event.target.value })}
+            />
+          </section>
+
+          <section className="details-section">
+            <div className="section-heading">
+              <span>Relevant links</span>
+              <span>+ Add</span>
+            </div>
+            <div className="links-list">
+              {links.map((link) => (
+                <div className="link-card" key={link.label}>
+                  <strong>{link.label}</strong>
+                  <a className="link-button" href={link.url} target="_blank" rel="noreferrer">Open</a>
+                  <span>{link.url}</span>
+                </div>
+              ))}
+            </div>
+          </section>
+
+          <section className="details-section">
+            <div className="section-heading">Account</div>
+            <label className="field-label" htmlFor="account-owner">Account owner or email</label>
+            <input
+              id="account-owner"
+              className="details-input"
+              value={details.account}
+              onChange={(event) => onChange({ ...details, account: event.target.value })}
+              placeholder="owner@example.com"
+            />
+
+            <label className="field-label" htmlFor="password-location">Password / vault item</label>
+            <input
+              id="password-location"
+              className="details-input"
+              value={details.passwordLocation}
+              onChange={(event) => onChange({ ...details, passwordLocation: event.target.value })}
+              placeholder="1Password item, vault record, or SSO note"
+            />
+            <p className="helper-text">Keep actual passwords in your password manager. Store only the vault item or access note here.</p>
+          </section>
+        </div>
+
+        <div className="details-actions">
+          <button type="button" className="delete-button">Delete</button>
+          <button type="button" className="save-button">Save changes</button>
+        </div>
+      </aside>
+    </>
+  );
+}
+
+export default function InternalServiceMapPage() {
+  const nodes = useMemo<ServiceNode[]>(() => (graph.services ?? []).slice(0, layout.length).map((service, index) => ({
+    ...service,
+    ...layout[index],
+    color: palette[index % palette.length],
+  })), []);
+  const [mode, setMode] = useState<'2d' | '3d'>('2d');
+  const [rotation, setRotation] = useState({ x: 58, z: -28 });
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const [drafts, setDrafts] = useState<Record<string, DraftDetails>>(() => Object.fromEntries(nodes.map((service) => [
+    service.id,
+    {
+      subtitle: categoryLabel(service.category),
+      use: primaryEvidence(service),
+      account: '',
+      passwordLocation: '',
+    },
+  ])));
+  const selected = nodes.find((service) => service.id === selectedId) ?? null;
+
+  return (
+    <main className="servicemap-shell">
+      <style dangerouslySetInnerHTML={{ __html: css }} />
+      <header className="servicemap-topbar">
+        <div className="brand">
+          <div className="brand-mark">⌘</div>
+          <div>
+            <h1>servicemap</h1>
+            <p>{graph.project?.name ?? 'Project'} command center</p>
+          </div>
+        </div>
+        <div className="top-actions">
+          <span>{nodes.length} services</span>
+          <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>
+        </div>
+      </header>
+
+      <section className="map">
+        <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' ? (
+          <>
+            <svg className="edges" viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true">
+              {nodes.map((service) => (
+                <path key={service.id} d={edgePath(service)} fill="none" stroke="rgba(103, 130, 118, 0.48)" strokeWidth="0.16" vectorEffect="non-scaling-stroke" />
+              ))}
+            </svg>
+            <div className="hub"><div className="hub-inner">⌘</div></div>
+            {nodes.map((service) => (
+              <button
+                type="button"
+                key={service.id}
+                className={\`service-node \${selectedId === service.id ? 'is-selected' : ''}\`}
+                style={{ left: \`\${service.x}%\`, top: \`\${service.y}%\` }}
+                onClick={() => setSelectedId(service.id)}
+              >
+                <ServiceLogo service={service} />
+                <div className="service-copy">
+                  <strong>{service.name}</strong>
+                  <span>{categoryLabel(service.category)}</span>
+                </div>
+                <i className={\`status-dot status-\${service.confidence}\`} />
+              </button>
+            ))}
+            <div className="legend">
+              <span><i style={{ background: '#4a7cff' }} />Cloud</span>
+              <span><i style={{ background: '#8be4b2' }} />Product</span>
+              <span><i style={{ background: '#65f0ad' }} />Active path</span>
+            </div>
+          </>
+        ) : (
+          <div className="three-scene" aria-label="3D service graph">
+            <div className="three-space" style={{ '--rx': \`\${rotation.x}deg\`, '--rz': \`\${rotation.z}deg\` } as CSSProperties}>
+              {nodes.map((service, index) => (
+                <span key={\`\${service.id}-link\`} className="three-link" style={threeLinkStyle(index, nodes.length)} />
+              ))}
+              <div className="three-core">⌘</div>
+              {nodes.map((service, index) => (
+                <button
+                  type="button"
+                  key={service.id}
+                  className={\`three-node \${selectedId === service.id ? 'is-selected' : ''}\`}
+                  style={threeNodeStyle(index, nodes.length, service.color)}
+                  onPointerMove={(event) => {
+                    if (event.buttons !== 1) return;
+                    setRotation((current) => ({
+                      x: Math.max(24, Math.min(72, current.x - event.movementY * 0.25)),
+                      z: current.z + event.movementX * 0.25,
+                    }));
+                  }}
+                  onClick={() => setSelectedId(service.id)}
+                >
+                  <span className="three-orb">{initials(service.name)}</span>
+                  <span>{service.name}</span>
+                </button>
+              ))}
+            </div>
+            <div className="three-hint">Drag to rotate / Scroll to zoom / Click a service</div>
+          </div>
+        )}
+        <footer className="scan-foot">
+          <div>Generated {new Date(graph.generatedAt).toLocaleString()}</div>
+          <div>{nodes.length} services detected</div>
+        </footer>
+        {selected && drafts[selected.id] ? (
+          <DetailsPanel
+            service={selected}
+            details={drafts[selected.id]}
+            onClose={() => setSelectedId(null)}
+            onChange={(nextDetails) => setDrafts((current) => ({ ...current, [selected.id]: nextDetails }))}
+          />
+        ) : null}
+      </section>
+    </main>
+  );
+}
+`;
+}
+
 function tsxPage(graph) {
   const html = htmlBody(graph);
   const allowedEmails = graph.access?.allowedEmails ?? [];
@@ -217,18 +574,7 @@ export default async function InternalServiceMapPage() {
 `;
   }
 
-  return `const css = ${JSON.stringify(pageCss())};
-const html = ${JSON.stringify(html)};
-
-export default function InternalServiceMapPage() {
-  return (
-    <>
-      <style dangerouslySetInnerHTML={{ __html: css }} />
-      <div dangerouslySetInnerHTML={{ __html: html }} />
-    </>
-  );
-}
-`;
+  return interactiveTsxPage(graph);
 }
 
 function astroPage(graph) {