servicemap 0.1.21 → 0.1.24

package/bin/servicemap.mjs

@@ -2,6 +2,7 @@
 import { spawn } from 'node:child_process';
 import { existsSync } from 'node:fs';
 import { cp, mkdir, readFile, rm, symlink } from 'node:fs/promises';
+import net from 'node:net';
 import { dirname, join, resolve } from 'node:path';
 import { homedir } from 'node:os';
 import readline from 'node:readline';
@@ -166,6 +167,7 @@ function parseArgs() {
     skillsDir: null,
     installMethod: null,
     allowedEmails: [],
+    open: true,
     invokedWithoutArgs: args.length === 0,
     explicitCommand: false,
     generationRequested: false,
@@ -207,6 +209,7 @@ function parseArgs() {
     if (arg === '--survey') options.survey = true;
     if (arg === '--yes' || arg === '-y') options.yes = true;
     if (arg === '--dry-run') options.dryRun = true;
+    if (arg === '--no-open') options.open = false;
     if (arg === '--help' || arg === '-h') options.help = true;
   }
 
@@ -219,8 +222,8 @@ function help() {
 
 Usage:
   servicemap
-  servicemap generate [--root <project>] [--mode auto|page|desktop] [--allow-emails <list>] [--dry-run]
-  servicemap --root <project> [--mode auto|page|desktop] [--allow-emails <list>] [--dry-run]
+  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 install-skill [--survey] [--agent codex|claude|grok|all] [--targets <ids>] [--install-method copy|symlink]
   servicemap skills install [--survey] [--agent codex|claude|grok|all]
 
@@ -252,6 +255,96 @@ function run(command, args, options = {}) {
   });
 }
 
+function openUrl(url) {
+  const command = process.platform === 'darwin'
+    ? 'open'
+    : process.platform === 'win32'
+      ? 'cmd'
+      : 'xdg-open';
+  const args = process.platform === 'win32' ? ['/c', 'start', '', url] : [url];
+  const child = spawn(command, args, { stdio: 'ignore', detached: true });
+  child.unref();
+}
+
+function findOpenPort() {
+  return new Promise((resolvePromise, reject) => {
+    const server = net.createServer();
+    server.on('error', reject);
+    server.listen(0, '127.0.0.1', () => {
+      const address = server.address();
+      const port = typeof address === 'object' && address ? address.port : 5173;
+      server.close(() => resolvePromise(port));
+    });
+  });
+}
+
+function waitForPort(port, timeoutMs = 10000) {
+  const startedAt = Date.now();
+  return new Promise((resolvePromise, reject) => {
+    const tryConnect = () => {
+      const socket = net.connect({ host: '127.0.0.1', port });
+      socket.on('connect', () => {
+        socket.destroy();
+        resolvePromise();
+      });
+      socket.on('error', () => {
+        socket.destroy();
+        if (Date.now() - startedAt > timeoutMs) {
+          reject(new Error(`Timed out waiting for desktop preview on port ${port}`));
+          return;
+        }
+        setTimeout(tryConnect, 150);
+      });
+    };
+    tryConnect();
+  });
+}
+
+async function openDesktopPreview(root) {
+  const appRoot = resolve(root, 'servicemap-desktop');
+  if (!existsSync(join(appRoot, 'node_modules'))) {
+    console.log('Installing desktop preview dependencies...');
+    await run('npm', ['install'], { cwd: appRoot });
+  }
+
+  const port = await findOpenPort();
+  const child = spawn('npm', ['run', 'dev', '--', '--host', '127.0.0.1', '--port', String(port), '--strictPort'], {
+    cwd: appRoot,
+    stdio: 'ignore',
+    detached: true,
+  });
+  child.unref();
+
+  await waitForPort(port);
+  const url = `http://127.0.0.1:${port}/`;
+  openUrl(url);
+  console.log(`Opened desktop servicemap preview at ${url}`);
+}
+
+async function openGeneratedPage(root, framework) {
+  if (framework === 'static') {
+    const filePath = resolve(root, 'public/internalservicemap.html');
+    openUrl(filePath);
+    console.log(`Opened generated servicemap page at ${filePath}`);
+    return;
+  }
+
+  const packageJson = JSON.parse(await readFile(resolve(root, 'package.json'), 'utf8').catch(() => '{}'));
+  const dependencies = {
+    ...(packageJson.dependencies ?? {}),
+    ...(packageJson.devDependencies ?? {}),
+  };
+  const port = dependencies.next ? 3000 : dependencies.vite ? 5173 : null;
+  if (!port) {
+    console.log('Generated /internalservicemap. Start the project dev server to view it.');
+    return;
+  }
+
+  const url = `http://127.0.0.1:${port}/internalservicemap`;
+  openUrl(url);
+  console.log(`Opened generated servicemap page at ${url}`);
+}
+
 async function readScan(root) {
   const scanPath = resolve(root, '.servicemap/internal-servicemap.json');
   return JSON.parse(await readFile(scanPath, 'utf8'));
@@ -600,8 +693,10 @@ async function main() {
 
   if (selectedMode === 'desktop') {
     await run(process.execPath, [desktopScript, '--root', options.root]);
+    if (options.open) await openDesktopPreview(options.root);
   } else {
     await run(process.execPath, [pageScript, '--root', options.root]);
+    if (options.open) await openGeneratedPage(options.root, scan.project?.framework);
   }
 }
 

package/package.json

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

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

@@ -89,7 +89,7 @@ function indexHtml() {
 function mainJsx() {
   return `import React from 'react';
 import { createRoot } from 'react-dom/client';
-import graph from '.servicemap-data.json';
+import graph from './servicemap-data.json';
 import './styles.css';
 
 function strongestEvidence(service) {
@@ -97,42 +97,111 @@ function strongestEvidence(service) {
   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="shell">
+    <main className="appShell">
       <header className="topbar">
-        <div>
-          <h1>Internal Servicemap</h1>
-          <p>{graph.project?.name ?? 'This project'} uses these detected services.</p>
+        <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>
-        <span className="stamp">{new Date(graph.generatedAt).toLocaleString()}</span>
       </header>
 
-      <section className="metrics" aria-label="Service map summary">
-        <div><strong>{services.length}</strong><span>services</span></div>
-        <div><strong>{highConfidence}</strong><span>high confidence</span></div>
-        <div><strong>{graph.project?.framework ?? 'unknown'}</strong><span>source</span></div>
-      </section>
+      <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>
 
-      <section className="grid">
-        {services.length ? services.map((service) => (
-          <article className="card" key={service.id}>
-            <div className="cardTop">
-              <div className="logo" 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>{service.confidence} confidence</span>
-              </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="category">{service.category}</span>
-            <p>{strongestEvidence(service)}</p>
+            <span className={\`statusDot \${service.confidence === 'high' ? 'active' : 'pending'}\`} />
           </article>
-        )) : <div className="empty">No external services were detected yet.</div>}
+        ))}
+
+        {!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>
   );
@@ -144,8 +213,8 @@ createRoot(document.getElementById('root')).render(<App />);
 
 function stylesCss() {
   return `:root {
-  color: #172033;
-  background: #f7f8fb;
+  color: #eef7f2;
+  background: #020806;
   font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
 }
 
@@ -157,107 +226,244 @@ body {
   margin: 0;
   min-width: 320px;
   min-height: 100vh;
-  background: #f7f8fb;
+  background: #020806;
 }
 
-.shell {
-  max-width: 1180px;
-  margin: 0 auto;
-  padding: 40px 24px 56px;
+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;
-  align-items: flex-end;
-  gap: 24px;
-  margin-bottom: 24px;
+  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 8px;
-  font-size: 44px;
+  margin: 0 0 3px;
+  font-size: 22px;
   line-height: 1;
   letter-spacing: 0;
 }
 
 p {
   margin: 0;
-  color: #5f6b7c;
-  line-height: 1.55;
 }
 
-.stamp {
-  color: #64748b;
+.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;
 }
 
-.metrics {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 12px;
-  margin: 22px 0;
+.toolbar .primary {
+  background: #247b58;
+  box-shadow: inset 0 0 0 1px rgba(104, 255, 179, 0.25);
 }
 
-.metrics div,
-.card {
-  background: #fff;
-  border: 1px solid #e3e8ef;
-  border-radius: 8px;
-  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
+.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;
 }
 
-.metrics div {
-  padding: 16px;
+.sectionLabel small {
+  letter-spacing: 0.08em;
 }
 
-.metrics strong {
-  display: block;
-  font-size: 26px;
+.edges {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
 }
 
-.metrics span {
-  color: #64748b;
-  font-size: 13px;
+.edge {
+  fill: none;
+  stroke: rgba(121, 158, 140, 0.34);
+  stroke-width: 0.12;
 }
 
-.grid {
+.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;
-  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
-  gap: 12px;
+  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);
 }
 
-.card {
-  min-height: 150px;
-  padding: 14px;
+.coreIcon {
+  width: 78px;
+  height: 78px;
+  display: grid;
+  place-items: center;
+  border-radius: 20px;
+  background: #f7fbf7;
+  color: #101513;
+  font-size: 38px;
 }
 
-.cardTop {
-  display: flex;
+.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: 10px;
-  margin-bottom: 10px;
+  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: 36px;
-  height: 36px;
-  border-radius: 8px;
-  background: #172033;
+  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: 700;
+  font-weight: 800;
 }
 
 .logo img {
-  max-width: 22px;
-  max-height: 22px;
+  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 {
@@ -266,47 +472,108 @@ p {
 
 .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;
 }
 
-.nameBlock span,
-.card p {
-  color: #64748b;
+.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;
 }
 
-.category {
+.legend span {
   display: inline-flex;
   align-items: center;
-  height: 22px;
-  padding: 0 8px;
+  gap: 7px;
+  white-space: nowrap;
+}
+
+.legend b {
+  width: 8px;
+  height: 8px;
   border-radius: 999px;
-  background: #edf2ff;
-  color: #334155;
-  font-size: 12px;
-  margin-bottom: 10px;
 }
 
-.empty {
-  background: #fff;
-  border: 1px dashed #cbd5e1;
-  border-radius: 8px;
-  padding: 24px;
+.legend .blue {
+  background: #3d8cff;
+}
+
+.legend .green {
+  background: #69f6b1;
+}
+
+.legend .yellow {
+  background: #eac94f;
 }
 
-@media (max-width: 720px) {
+@media (max-width: 880px) {
   .topbar {
-    display: block;
+    height: auto;
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .toolbar {
+    flex-wrap: wrap;
+  }
+
+  .mapCanvas {
+    min-height: 980px;
   }
 
-  h1 {
-    font-size: 34px;
+  .serviceNode {
+    width: 210px;
   }
 
-  .metrics {
-    grid-template-columns: 1fr;
+  .sectionLabel {
+    align-items: flex-start;
+    flex-direction: column;
   }
 }
 `;
@@ -395,7 +662,7 @@ async function main() {
   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, 'srcservicemap-data.json', `${JSON.stringify(graph, null, 2)}\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());
   await writeProjectFile(options.output, 'src-tauri/build.rs', buildRs());

package/servicemap/scripts/generate-page.mjs

@@ -49,33 +49,64 @@ function escapeHtml(value) {
 
 function pageCss() {
   return `
-    :root { color-scheme: light; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
-    body { margin: 0; background: #f7f8fb; color: #172033; }
-    .servicemap-shell { max-width: 1180px; margin: 0 auto; padding: 40px 24px 56px; }
-    .servicemap-header { display: flex; justify-content: space-between; gap: 24px; align-items: flex-end; margin-bottom: 24px; }
-    h1 { margin: 0 0 8px; font-size: clamp(30px, 4vw, 48px); line-height: 1; letter-spacing: 0; }
-    p { margin: 0; color: #5f6b7c; line-height: 1.55; }
-    .summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 22px 0; }
-    .metric, .service-card { background: #fff; border: 1px solid #e3e8ef; border-radius: 8px; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); }
-    .metric { padding: 16px; }
-    .metric strong { display: block; font-size: 26px; }
-    .metric span { color: #64748b; font-size: 13px; }
-    .service-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
-    .service-card { padding: 14px; min-height: 150px; }
-    .service-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
-    .logo { width: 36px; height: 36px; border-radius: 8px; background: #172033; display: grid; place-items: center; overflow: hidden; flex: 0 0 auto; }
-    .logo img { max-width: 22px; max-height: 22px; object-fit: contain; }
-    .service-name { min-width: 0; }
-    .service-name strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-    .service-name span, .evidence { color: #64748b; font-size: 12px; }
-    .badge { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; background: #edf2ff; color: #334155; font-size: 12px; margin-bottom: 10px; }
-    .evidence { margin-top: 8px; }
-    .access-warning { margin: 0 0 18px; padding: 12px 14px; border: 1px solid #f5c542; border-radius: 8px; background: #fff7d6; color: #614700; font-size: 14px; line-height: 1.45; }
-    .empty { background: #fff; border: 1px dashed #cbd5e1; border-radius: 8px; padding: 24px; }
-    @media (max-width: 720px) { .servicemap-header { display: block; } .summary { grid-template-columns: 1fr; } }
+    :root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
+    * { box-sizing: border-box; }
+    body { margin: 0; background: #020806; color: #eff8f2; }
+    .servicemap-shell { min-height: 100vh; overflow: hidden; background: #030806; }
+    .servicemap-topbar { height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 0 28px; border-bottom: 1px solid rgba(255,255,255,0.08); background: #222823; }
+    .brand { display: flex; align-items: center; gap: 16px; min-width: 0; }
+    .brand-mark { width: 48px; height: 48px; border-radius: 10px; border: 1px solid #2a7958; background: #164d39; color: #7cf1b5; display: grid; place-items: center; box-shadow: 0 0 26px rgba(82,255,166,0.16); font-size: 22px; }
+    .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; }
+    .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; }
+    .intro span { display: block; margin-top: 8px; color: #53665d; font-size: 14px; }
+    .edges { position: absolute; inset: 0; width: 100%; height: 100%; }
+    .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); }
+    .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; }
+    .service-copy strong { display: block; color: #f2faf5; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+    .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; }
+    .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; }
+    .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; }
+    @media (max-width: 920px) {
+      .map { min-height: 1120px; }
+      .service-node { width: 220px; }
+      .top-actions { display: none; }
+    }
   `;
 }
 
+const palette = ['#ff7a00', '#f48120', '#111827', '#6d5dfc', '#4285f4', '#5e5ce6', '#e5e7eb', '#7c3aed', '#24292f', '#22c55e'];
+const layout = [
+  { x: 17, y: 30 }, { x: 17, y: 55 }, { x: 35, y: 28 }, { x: 35, y: 72 }, { x: 25, y: 82 },
+  { x: 59, y: 34 }, { x: 79, y: 23 }, { x: 79, y: 48 }, { x: 80, y: 64 }, { x: 62, y: 73 },
+  { x: 19, y: 18 }, { x: 81, y: 82 }, { x: 41, y: 17 }, { x: 61, y: 18 }, { x: 43, y: 84 }, { x: 57, y: 84 },
+];
+
+function edgePath(node) {
+  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 initials(name) {
+  return name.split(/\s+/).filter(Boolean).slice(0, 2).map((part) => part[0]).join('').toUpperCase();
+}
+
 function htmlBody(graph) {
   const services = graph.services ?? [];
   const access = graph.access ?? {};
@@ -83,43 +114,56 @@ function htmlBody(graph) {
   const accessNotice = hasAccessRequest && access.enforced !== true
     ? '<div class="access-warning">Email access was requested, but this project does not expose a supported server-side auth guard for generated pages. Put this route behind your app auth before sharing it.</div>'
     : '';
-  const serviceCards = services.length
-    ? services.map((service) => {
-      const evidence = service.evidence?.[0];
-      const evidenceText = evidence ? `${evidence.type}: ${evidence.value}` : 'No evidence captured';
-      return `
-        <article class="service-card">
-          <div class="service-top">
-            <div class="logo">${service.iconUrl ? `<img src="${escapeHtml(service.iconUrl)}" alt="">` : escapeHtml(service.name.slice(0, 2).toUpperCase())}</div>
-            <div class="service-name">
-              <strong>${escapeHtml(service.name)}</strong>
-              <span>${escapeHtml(service.confidence)} confidence</span>
-            </div>
-          </div>
-          <span class="badge">${escapeHtml(service.category)}</span>
-          <p class="evidence">${escapeHtml(evidenceText)}</p>
-        </article>
-      `;
-    }).join('')
-    : '<div class="empty">No external services were detected yet.</div>';
+  const nodes = services.slice(0, layout.length).map((service, index) => ({
+    ...service,
+    ...layout[index],
+    color: palette[index % palette.length],
+  }));
+  const edges = nodes.map((node) => `<path d="${edgePath(node)}" fill="none" stroke="rgba(103, 130, 118, 0.48)" stroke-width="0.16" vector-effect="non-scaling-stroke"></path>`).join('');
+  const serviceNodes = nodes.map((service) => `
+    <article class="service-node" style="left:${service.x}%;top:${service.y}%">
+      <div class="logo" style="background:${service.color}">${service.iconUrl ? `<img src="${escapeHtml(service.iconUrl)}" alt="">` : escapeHtml(initials(service.name))}</div>
+      <div class="service-copy">
+        <strong>${escapeHtml(service.name)}</strong>
+        <span>${escapeHtml(service.category)}</span>
+      </div>
+      <i class="status-dot status-${escapeHtml(service.confidence)}"></i>
+    </article>
+  `).join('');
 
   return `
     <main class="servicemap-shell">
-      <section class="servicemap-header">
-        <div>
-          <h1>Internal Servicemap</h1>
-          <p>${escapeHtml(graph.project?.name ?? 'This project')} uses these detected services.</p>
+      <header class="servicemap-topbar">
+        <div class="brand">
+          <div class="brand-mark">⌘</div>
+          <div>
+            <h1>servicemap</h1>
+            <p>${escapeHtml(graph.project?.name ?? 'Project')} command center</p>
+          </div>
         </div>
-        <p>Generated ${escapeHtml(new Date(graph.generatedAt).toLocaleString())}</p>
-      </section>
-      <section class="summary" aria-label="Service map summary">
-        <div class="metric"><strong>${services.length}</strong><span>services detected</span></div>
-        <div class="metric"><strong>${graph.summary?.highConfidenceCount ?? 0}</strong><span>high confidence</span></div>
-        <div class="metric"><strong>${escapeHtml(graph.project?.framework ?? 'unknown')}</strong><span>framework</span></div>
-      </section>
-      ${accessNotice}
-      <section class="service-grid">
-        ${serviceCards}
+        <div class="top-actions">
+          <span>${services.length} services</span>
+          <span class="mode-pill">2D</span>
+        </div>
+      </header>
+      <section class="map">
+        <div class="intro">
+          <strong>${escapeHtml(graph.project?.name ?? 'Project')} infrastructure</strong>
+          <span>Select a service to trace its dependencies</span>
+        </div>
+        <svg class="edges" viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true">${edges}</svg>
+        <div class="hub"><div class="hub-inner">⌘</div></div>
+        ${serviceNodes || '<div class="intro"><span>No external services were detected yet.</span></div>'}
+        ${accessNotice}
+        <div class="legend">
+          <span><i style="background:#4a7cff"></i>Cloud</span>
+          <span><i style="background:#8be4b2"></i>Product</span>
+          <span><i style="background:#65f0ad"></i>Active path</span>
+        </div>
+        <footer class="scan-foot">
+          <div>Generated ${escapeHtml(new Date(graph.generatedAt).toLocaleString())}</div>
+          <div>${services.length} services detected</div>
+        </footer>
       </section>
     </main>
   `;

package/servicemap/scripts/scan-project.mjs

@@ -10,6 +10,7 @@ const logoDatabasePath = resolve(skillRoot, 'assets/service-logo-database.json')
 const defaultOutput = '.servicemap/internal-servicemap.json';
 
 const ignoredDirs = new Set([
+  '.servicemap',
   '.git',
   '.next',
   '.nuxt',
@@ -17,12 +18,14 @@ const ignoredDirs = new Set([
   'build',
   'coverage',
   'dist',
+  'graphify-out',
   'node_modules',
+  'servicemap-desktop',
   'target',
   'vendor',
 ]);
 
-const sourceExtensions = new Set(['.js', '.jsx', '.ts', '.tsx', '.mjs', '.cjs', '.astro', '.vue', '.svelte', '.py', '.rb', '.go', '.rs', '.php', '.java']);
+const sourceExtensions = new Set(['.js', '.jsx', '.ts', '.tsx', '.mjs', '.cjs', '.astro', '.vue', '.svelte', '.py', '.rb', '.go', '.rs', '.php', '.java', '.swift']);
 const configFileNames = new Set([
   'Dockerfile',
   'docker-compose.yml',
@@ -187,7 +190,7 @@ function buildGeneratedRules(database) {
     iconUrl: entry.iconUrl,
     packages: [entry.key, entry.name.toLowerCase().replace(/\s+/g, ''), ...entry.aliases.map((alias) => alias.toLowerCase())].filter(Boolean),
     envPrefixes: [entry.key.replace(/[^a-z0-9]/gi, '_').toUpperCase()],
-    domains: [entry.sourceHost].filter(Boolean),
+    domains: [],
   }));
 }