servicemap 0.1.23 → 0.1.25

package/README.md

@@ -41,6 +41,15 @@ npx servicemap skills install --agent claude
 ```
 
 Agents with known local skill folders get the real `servicemap` skill installed.
+Symlink installs use a stable local clone at `~/.servicemap/source`, so updates can be pulled without reinstalling every agent folder.
+
+To update that local skill source:
+
+```bash
+npx servicemap update
+```
+
+Running `npx servicemap` again also refreshes the stable source before installing.
 
 After a global install, the command is:
 
@@ -73,6 +82,7 @@ servicemap install-skill --agent grok
 servicemap install-skill --agent all
 servicemap install-skill --targets universal,claude,grok
 servicemap skills install --agent codex
+servicemap update
 ```
 
 ## Contents

package/bin/servicemap.mjs

@@ -226,6 +226,7 @@ Usage:
   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]
+  servicemap update
 
 Examples:
   npx servicemap
@@ -236,6 +237,7 @@ Examples:
   npx servicemap install-skill --agent all
   npx servicemap install-skill --targets codex,claude,cursor
   npx servicemap skills install --agent claude
+  npx servicemap update
   servicemap --mode desktop
 `);
 }
@@ -593,6 +595,11 @@ async function prepareStableSource(options) {
   return resolve(sourceRoot, 'servicemap');
 }
 
+async function updateStableSource(options) {
+  const source = await prepareStableSource(options);
+  console.log(`Servicemap source is current at ${dirname(source)}`);
+}
+
 async function installIntoRoot(root, source, method, options) {
   const destination = join(root, 'servicemap');
   if (options.dryRun) {
@@ -667,8 +674,13 @@ async function main() {
     return;
   }
 
+  if (options.command === 'update') {
+    await updateStableSource(options);
+    return;
+  }
+
   if (options.command !== 'generate') {
-    throw new Error(`Unknown command "${options.command}". Use generate, install-skill, or skills install.`);
+    throw new Error(`Unknown command "${options.command}". Use generate, install-skill, update, or skills install.`);
   }
 
   if (!['auto', 'page', 'desktop'].includes(options.mode)) {

package/package.json

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

package/servicemap/SKILL.md

@@ -13,16 +13,18 @@ If no website can be found, create a desktop app fallback at `servicemap-desktop
 
 ## Workflow
 
-1. Inspect the project layout and current web framework.
-2. If the user gives a list of emails that may access the generated web page, pass them to the scan command with `--allow-email <email>` for each address or `--allow-emails <comma-separated-list>`.
-3. Run `scripts/scan-project.mjs --root <project-root>` to create `.servicemap/internal-servicemap.json`.
+1. If this skill is installed from the stable source clone at `~/.servicemap/source`, run `git -C ~/.servicemap/source pull --ff-only` before using the scripts.
+   If the update fails because the network is unavailable, continue with the installed local copy and report that the auto-update did not complete.
+2. Inspect the project layout and current web framework.
+3. If the user gives a list of emails that may access the generated web page, pass them to the scan command with `--allow-email <email>` for each address or `--allow-emails <comma-separated-list>`.
+4. Run `scripts/scan-project.mjs --root <project-root>` to create `.servicemap/internal-servicemap.json`.
    Include the access flags from the previous step when relevant.
-4. Review the scan output for obvious false positives or missing high-confidence services.
-5. If the scan detects a web framework or routeable website, run `scripts/generate-page.mjs --root <project-root>` to create the framework-specific `/internalservicemap` route.
-6. 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`.
-7. Adapt the generated surface to the project's existing design system only when the route is clear and the edits are low-risk.
-8. Run the project's relevant build, lint, and focused tests.
-9. 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.
+5. Review the scan output for obvious false positives or missing high-confidence services.
+6. If the scan detects a web framework or routeable website, run `scripts/generate-page.mjs --root <project-root>` to create the framework-specific `/internalservicemap` route.
+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.
 
 ## Safety Rules
 

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>
   `;