servicemap 0.1.28 → 0.1.31

package/package.json

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

package/servicemap/scripts/generate-page.mjs

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 import { existsSync } from 'node:fs';
-import { mkdir, readFile, writeFile } from 'node:fs/promises';
-import { dirname, join, resolve } from 'node:path';
+import { copyFile, mkdir, readFile, writeFile } from 'node:fs/promises';
+import { dirname, extname, isAbsolute, join, resolve } from 'node:path';
 
 const defaultInput = '.servicemap/internal-servicemap.json';
 
@@ -56,6 +56,7 @@ function pageCss() {
     .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-mark img, .hub-inner img, .three-core img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
     .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; }
@@ -66,12 +67,16 @@ function pageCss() {
     .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%; }
+    .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; }
     .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); }
+    .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); }
     .service-copy { min-width: 0; }
@@ -109,16 +114,19 @@ 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; }
-    .three-scene { position: absolute; inset: 0; perspective: 920px; overflow: hidden; cursor: grab; touch-action: none; }
+    .three-scene { position: absolute; inset: 0; perspective: 1200px; 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-space { position: absolute; left: 50%; top: 52%; width: min(1040px, 78vw); height: min(700px, 64vh); transform-style: preserve-3d; transform: translate(-50%, -50%) rotateX(var(--rx, 14deg)) rotateZ(var(--rz, 0deg)); 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: rotateZ(var(--angle)); background: linear-gradient(90deg, rgba(101,240,173,0.28), rgba(101,240,173,0.05)); opacity: 0.72; }
+    .three-link.is-active { height: 2px; background: repeating-linear-gradient(90deg, #65f0ad 0 8px, transparent 8px 14px); box-shadow: 0 0 14px rgba(101,240,173,0.68); animation: servicemapLinkFlow 1s linear infinite; }
+    .three-node { position: absolute; left: 50%; top: 50%; width: 124px; min-height: 72px; transform: translate3d(var(--x), var(--y), var(--z)) translate(-50%, -50%) scale(var(--scale)); 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: 30px; height: 30px; margin: 0 auto 6px; border-radius: 999px; background: var(--color); color: #fff; box-shadow: 0 0 28px color-mix(in srgb, var(--color), transparent 46%); font-size: 10px; font-weight: 900; }
+    .three-node span { display: block; max-width: 124px; margin: 0 auto; color: #e5f1ea; font-size: 10px; font-weight: 800; line-height: 1.12; text-shadow: 0 2px 8px #000; }
+    .three-node.is-selected .three-orb { outline: 2px solid #65f0ad; outline-offset: 4px; box-shadow: 0 0 34px rgba(101,240,173,0.72); }
+    .three-core { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 54px; height: 54px; transform: translate(-50%, -50%); border-radius: 999px; background: #f7faf7; color: #101611; font-size: 22px; box-shadow: 0 0 0 9px rgba(101,240,173,0.12), 0 0 46px rgba(101,240,173,0.2); }
     .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; }
+    @keyframes servicemapDash { to { stroke-dashoffset: -1.3; } }
+    @keyframes servicemapLinkFlow { to { background-position: 22px 0; } }
     @media (max-width: 920px) {
       .map { min-height: 1120px; }
       .service-node { width: 220px; }
@@ -147,6 +155,11 @@ function initials(name) {
   return name.split(/\s+/).filter(Boolean).slice(0, 2).map((part) => part[0]).join('').toUpperCase();
 }
 
+function projectMarkHtml(graph) {
+  const logoUrl = graph.project?.logoUrl;
+  return logoUrl ? `<img src="${escapeHtml(logoUrl)}" alt="${escapeHtml(graph.project?.name ?? 'Project')} logo">` : '⌘';
+}
+
 function htmlBody(graph) {
   const services = graph.services ?? [];
   const access = graph.access ?? {};
@@ -160,6 +173,7 @@ function htmlBody(graph) {
     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 projectMark = projectMarkHtml(graph);
   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>
@@ -175,7 +189,7 @@ function htmlBody(graph) {
     <main class="servicemap-shell">
       <header class="servicemap-topbar">
         <div class="brand">
-          <div class="brand-mark">⌘</div>
+          <div class="brand-mark">${projectMark}</div>
           <div>
             <h1>servicemap</h1>
             <p>${escapeHtml(graph.project?.name ?? 'Project')} command center</p>
@@ -195,7 +209,7 @@ function htmlBody(graph) {
           <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>
+        <div class="hub"><div class="hub-inner">${projectMark}</div></div>
         ${serviceNodes || '<div class="intro"><span>No external services were detected yet.</span></div>'}
         ${accessNotice}
         <div class="legend">
@@ -240,7 +254,7 @@ 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 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 }>;
 
@@ -260,31 +274,58 @@ function edgePath(node: ServiceNode) {
   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;
+function threePosition(index: number) {
+  const constellation = [
+    { x: 0, y: -240, z: 46 },
+    { x: 230, y: -135, z: 24 },
+    { x: -220, y: -120, z: 10 },
+    { x: 165, y: 88, z: 16 },
+    { x: -170, y: 118, z: -10 },
+    { x: 365, y: 42, z: 34 },
+    { x: -360, y: 52, z: -18 },
+    { x: 265, y: 250, z: -32 },
+    { x: -265, y: -270, z: 28 },
+    { x: 430, y: -190, z: -20 },
+    { x: -430, y: 232, z: 22 },
+    { x: 40, y: 312, z: -38 },
+    { x: -60, y: -350, z: 18 },
+    { x: 520, y: 126, z: 8 },
+    { x: -520, y: -36, z: -26 },
+    { x: 350, y: -330, z: 30 },
+  ];
+  const fallbackAngle = index * 2.399963229728653;
+  const fallbackRadius = 250 + (index % 5) * 52;
+  const point = constellation[index] ?? {
+    x: Math.cos(fallbackAngle) * fallbackRadius,
+    y: Math.sin(fallbackAngle) * fallbackRadius * 0.72,
+    z: ((index % 7) - 3) * 14,
+  };
+  const angle = Math.atan2(point.y, point.x);
+  const length = Math.hypot(point.x, point.y);
+  const scale = 0.74 + Math.max(-36, Math.min(48, point.z)) / 220;
   return {
-    x: Math.cos(angle) * radius,
-    y: Math.sin(angle) * radius,
-    z,
+    x: point.x,
+    y: point.y,
+    z: point.z,
     angle: (angle * 180) / Math.PI,
-    length: radius,
+    length,
+    scale,
   };
 }
 
-function threeNodeStyle(index: number, count: number, color: string): CSSProperties {
-  const position = threePosition(index, count);
+function threeNodeStyle(index: number, color: string): CSSProperties {
+  const position = threePosition(index);
   return {
     '--x': \`\${position.x}px\`,
     '--y': \`\${position.y}px\`,
     '--z': \`\${position.z}px\`,
+    '--scale': String(position.scale),
     '--color': color,
   } as CSSProperties;
 }
 
-function threeLinkStyle(index: number, count: number): CSSProperties {
-  const position = threePosition(index, count);
+function threeLinkStyle(index: number): CSSProperties {
+  const position = threePosition(index);
   return {
     '--angle': \`\${position.angle}deg\`,
     '--length': \`\${position.length}px\`,
@@ -325,6 +366,15 @@ function ServiceLogo({ service }: { service: RawService & { color: string } }) {
   );
 }
 
+function ProjectMark() {
+  return graph.project?.logoUrl ? (
+    // eslint-disable-next-line @next/next/no-img-element
+    <img src={graph.project.logoUrl} alt={\`\${graph.project?.name ?? 'Project'} logo\`} />
+  ) : (
+    <>⌘</>
+  );
+}
+
 function DetailsPanel({
   service,
   details,
@@ -425,7 +475,7 @@ export default function InternalServiceMapPage() {
     color: palette[index % palette.length],
   })), []);
   const [mode, setMode] = useState<'2d' | '3d'>('2d');
-  const [rotation, setRotation] = useState({ x: 58, z: -28 });
+  const [rotation, setRotation] = useState({ x: 14, z: 0 });
   const [selectedId, setSelectedId] = useState<string | null>(null);
   const [drafts, setDrafts] = useState<Record<string, DraftDetails>>(() => Object.fromEntries(nodes.map((service) => [
     service.id,
@@ -443,7 +493,7 @@ export default function InternalServiceMapPage() {
       <style dangerouslySetInnerHTML={{ __html: css }} />
       <header className="servicemap-topbar">
         <div className="brand">
-          <div className="brand-mark">⌘</div>
+          <div className="brand-mark"><ProjectMark /></div>
           <div>
             <h1>servicemap</h1>
             <p>{graph.project?.name ?? 'Project'} command center</p>
@@ -467,10 +517,20 @@ export default function InternalServiceMapPage() {
           <>
             <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" />
+                <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="hub"><div className="hub-inner">⌘</div></div>
+            <div className="hub"><div className="hub-inner"><ProjectMark /></div></div>
             {nodes.map((service) => (
               <button
                 type="button"
@@ -497,20 +557,24 @@ export default function InternalServiceMapPage() {
           <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)} />
+                <span
+                  key={\`\${service.id}-link\`}
+                  className={\`three-link \${selectedId === service.id ? 'is-active' : ''}\`}
+                  style={threeLinkStyle(index)}
+                />
               ))}
-              <div className="three-core">⌘</div>
+              <div className="three-core"><ProjectMark /></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)}
+                  style={threeNodeStyle(index, 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,
+                      x: Math.max(-8, Math.min(34, current.x - event.movementY * 0.18)),
+                      z: current.z + event.movementX * 0.16,
                     }));
                   }}
                   onClick={() => setSelectedId(service.id)}
@@ -520,7 +584,7 @@ export default function InternalServiceMapPage() {
                 </button>
               ))}
             </div>
-            <div className="three-hint">Drag to rotate / Scroll to zoom / Click a service</div>
+            <div className="three-hint">Drag a service to rotate / Click for details</div>
           </div>
         )}
         <footer className="scan-foot">
@@ -594,9 +658,27 @@ const html = ${JSON.stringify(htmlBody(graph))};
 `;
 }
 
+async function prepareProjectLogo(graph, outputRoot) {
+  const logoPath = graph.project?.logo?.path;
+  if (!logoPath) return;
+
+  const sourceRoot = graph.project?.root ? resolve(graph.project.root) : outputRoot;
+  const sourcePath = isAbsolute(logoPath) ? logoPath : resolve(sourceRoot, logoPath);
+  if (!existsSync(sourcePath)) return;
+
+  const extension = extname(sourcePath) || '.png';
+  const assetDir = join(outputRoot, 'public', 'internalservicemap-assets');
+  const assetPath = join(assetDir, `project-logo${extension}`);
+  await mkdir(assetDir, { recursive: true });
+  await copyFile(sourcePath, assetPath);
+
+  graph.project.logoUrl = `/internalservicemap-assets/project-logo${extension}`;
+}
+
 async function main() {
   const options = parseArgs();
   const graph = await readJson(options.input);
+  await prepareProjectLogo(graph, options.root);
   const route = routeFor(options.root, graph.project?.framework);
   const contents = route.kind === 'astro' ? astroPage(graph) : route.kind === 'static' ? staticHtml(graph) : tsxPage(graph);
 

package/servicemap/scripts/scan-project.mjs

@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 import { existsSync } from 'node:fs';
-import { readFile, readdir, stat, writeFile } from 'node:fs/promises';
+import { readFile, readdir, writeFile } from 'node:fs/promises';
 import { basename, dirname, extname, join, relative, resolve } from 'node:path';
 import { fileURLToPath } from 'node:url';
 
@@ -240,6 +240,59 @@ function buildEdges(projectName, services) {
   }));
 }
 
+async function findProjectLogo(root, files) {
+  const appIconManifests = files
+    .filter((file) => file.endsWith('AppIcon.appiconset/Contents.json'))
+    .sort((a, b) => scoreLogoManifest(b) - scoreLogoManifest(a));
+
+  for (const manifestPath of appIconManifests) {
+    const manifest = await readJson(manifestPath);
+    const images = Array.isArray(manifest?.images) ? manifest.images : [];
+    const candidates = images
+      .filter((image) => image?.filename)
+      .map((image) => ({
+        file: join(dirname(manifestPath), image.filename),
+        score: scoreAppIconImage(image),
+      }))
+      .filter((candidate) => existsSync(candidate.file))
+      .sort((a, b) => b.score - a.score);
+
+    if (candidates[0]) {
+      return {
+        path: relative(root, candidates[0].file),
+        source: 'asset-catalog-app-icon',
+      };
+    }
+  }
+
+  const namedLogo = files.find((file) => /(^|[/\\])(app-?icon|logo|favicon)\.(png|jpg|jpeg|webp|svg|ico)$/i.test(file));
+  if (namedLogo) {
+    return {
+      path: relative(root, namedLogo),
+      source: 'named-image-file',
+    };
+  }
+
+  return null;
+}
+
+function scoreLogoManifest(path) {
+  let score = 0;
+  if (/Assets\.xcassets[/\\]AppIcon\.appiconset/i.test(path)) score += 10;
+  if (/Assets 2\.xcassets/i.test(path)) score += 20;
+  return score;
+}
+
+function scoreAppIconImage(image) {
+  const size = Number.parseInt(String(image.size ?? '0').split('x')[0], 10) || 0;
+  let score = size;
+  const filename = String(image.filename ?? '').toLowerCase();
+  if (filename.includes('dark') || filename.includes('darker')) score += 100;
+  if (filename.includes('tinted')) score -= 50;
+  if (image.platform === 'ios') score += 25;
+  return score;
+}
+
 async function main() {
   const options = parseArgs();
   const packageJsonPath = join(options.root, 'package.json');
@@ -273,6 +326,7 @@ async function main() {
     configFiles: configFiles.map((file) => basename(file)),
     database,
   });
+  const logo = await findProjectLogo(options.root, files);
 
   const graph = {
     generatedAt: new Date().toISOString(),
@@ -280,6 +334,7 @@ async function main() {
       name: projectName,
       root: options.root,
       framework: detectFramework(options.root, packageJson, files),
+      logo,
     },
     access: {
       allowedEmails: options.allowedEmails,