servicemap 0.1.45 → 0.1.48

package/SKILL.md

@@ -34,10 +34,13 @@ If no website can be found, create a desktop app fallback at `servicemap-desktop
     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.
-12. If a desktop app was created and the chat client supports Codex inline follow-ups, end the final response with this button, replacing `<absolute-desktop-app-path>` with the generated app's actual absolute path:
-    `- :codex-followup[Launch Service Map]{prompt="Open a terminal in <absolute-desktop-app-path>, run npm run tauri dev, keep the process running, and tell me when the desktop app opens."}`
-    The button sends a follow-up request to Codex; do not claim that it executes the command directly.
-    If inline follow-ups are unavailable, report the absolute app path and the equivalent `npm run tauri dev` command instead.
+12. If a desktop app was created, launch the native desktop app after validation instead of relying on chat follow-up buttons.
+    Open a terminal in the generated app directory and run `npm run tauri dev`.
+    Keep that process running.
+    Report whether the native desktop app opened.
+    If Tauri, Rust, platform prerequisites, or another local issue prevents the native app from launching, report the exact failure and include this fallback command:
+    `cd <absolute-desktop-app-path> && npm run tauri dev`.
+    Do not claim the app is open unless the launch succeeds.
 
 ## Safety Rules
 

package/assets/desktop-icons/LICENSE.lucide

@@ -0,0 +1,15 @@
+ISC License
+
+Copyright (c) for portions of Lucide are held by Cole Bemis 2013-2022 as part of Feather (MIT). All other copyright (c) for Lucide are held by Lucide Contributors 2022.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

package/assets/desktop-icons/README.md

@@ -0,0 +1,16 @@
+# Service Map desktop icon
+
+This icon reproduces the Service Map header in the SettleAI website source, rather than using a screenshot or the scanned project's logo.
+
+Source: `app/internal/service-map/desktop/App.tsx` (`Network size={18}`) and `app/internal/service-map/desktop/styles.css` (`.brand__mark`) in the SettleAI website repository.
+The SVG preserves the network paths, green gradient, mint stroke, rounded tile, and relative symbol size, with transparent padding for the Dock.
+The Network paths come from Lucide and their license is included in `LICENSE.lucide`.
+
+Regenerate the native assets using the Tauri CLI:
+
+```sh
+tauri icon assets/desktop-icons/service-map.svg --output assets/desktop-icons
+```
+
+Keep only the desktop PNG, ICNS, and ICO files used by `scripts/generate-desktop-app.mjs`; the command also generates unused mobile and Windows Store assets.
+The generator copies these prebuilt files so consumers do not need image-conversion tools.

package/assets/desktop-icons/service-map.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 48 48">
+  <defs><linearGradient id="tile" x1="0" y1="0" x2="1" y2="1"><stop stop-color="#245b45"/><stop offset="1" stop-color="#132e24"/></linearGradient></defs>
+  <rect x="4" y="4" width="40" height="40" rx="12.22" fill="url(#tile)" stroke="#9df0cb" stroke-opacity=".2" stroke-width="1.11"/>
+  <g transform="translate(14 14) scale(.8333333333)" fill="none" stroke="#a9f3d2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <rect x="16" y="16" width="6" height="6" rx="1"/>
+    <rect x="2" y="16" width="6" height="6" rx="1"/>
+    <rect x="9" y="2" width="6" height="6" rx="1"/>
+    <path d="M5 16v-3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3"/>
+    <path d="M12 12V8"/>
+  </g>
+</svg>

package/package.json

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

package/references/desktop-fallback.md

@@ -27,3 +27,9 @@ npm run build
 
 Do not install global tooling automatically.
 If native packaging fails because Rust, platform SDKs, or Tauri prerequisites are missing, report that the app source was generated and the web build passed.
+
+## Desktop identity
+
+The generated desktop app uses the shared green Service Map network logo for its Dock and application icons.
+The project logo belongs inside the map and must not replace `src-tauri/icons` or the configured bundle icons.
+The packaged icon source is `assets/desktop-icons/service-map.svg`, derived from the SettleAI website Service Map header.

package/scripts/generate-desktop-app.mjs

@@ -1,6 +1,10 @@
 #!/usr/bin/env node
 import { mkdir, readFile, writeFile } from 'node:fs/promises';
 import { dirname, join, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const desktopIcons = fileURLToPath(new URL('../assets/desktop-icons/', import.meta.url));
+const iconFiles = ['32x32.png', '128x128.png', '128x128@2x.png', 'icon.png', 'icon.icns', 'icon.ico'];
 import { interactiveTsxPage, prepareProjectLogo } from './generate-page.mjs';
 
 const defaultInput = '.servicemap/internal-servicemap.json';
@@ -116,6 +120,7 @@ function tauriConfig(graph) {
     bundle: {
       active: true,
       targets: 'all',
+      icon: iconFiles.map((name) => `icons/${name}`),
     },
   }, null, 2)}\n`;
 }
@@ -170,6 +175,9 @@ async function main() {
 
   await mkdir(options.output, { recursive: true });
   await prepareProjectLogo(graph, options.output);
+  for (const name of iconFiles) {
+    await writeProjectFile(options.output, `src-tauri/icons/${name}`, await readFile(join(desktopIcons, name)));
+  }
   await writeProjectFile(options.output, 'package.json', packageJson(graph));
   await writeProjectFile(options.output, 'index.html', indexHtml());
   await writeProjectFile(options.output, 'vite.config.js', viteConfig());

package/scripts/generate-page.mjs

@@ -290,7 +290,7 @@ export function interactiveTsxPage(graph, { desktop = false } = {}) {
   return `'use client';
 
 ${desktop ? "import ForceGraph3D from 'react-force-graph-3d';" : "import dynamic from 'next/dynamic';"}
-import { useCallback, useEffect, useMemo, useRef, useState, type CSSProperties, type PointerEvent } from 'react';
+import { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState, type CSSProperties, type PointerEvent } from 'react';
 import type { ForceGraphMethods, NodeObject } from 'react-force-graph-3d';
 import * as THREE from 'three';
 import SpriteText from 'three-spritetext';
@@ -689,11 +689,13 @@ function ServiceGraph3D({
   nodes,
   selectedId,
   resetKey,
+  controlsRef,
   onSelect,
 }: {
   nodes: ServiceNode[];
   selectedId: string | null;
   resetKey: number;
+  controlsRef: { current: { zoom: (factor: number) => void } | null };
   onSelect: (id: string | null) => void;
 }) {
   const containerRef = useRef<HTMLDivElement>(null);
@@ -807,6 +809,8 @@ function ServiceGraph3D({
     graphInstance.cameraPosition(nextPosition, target, 240);
   }, []);
 
+  useImperativeHandle(controlsRef, () => ({ zoom }), [zoom]);
+
   return (
     <div className="graph-3d" ref={containerRef}>
       <ForceGraph3D
@@ -861,10 +865,6 @@ function ServiceGraph3D({
           graphRef.current?.zoomToFit(700, 130);
         }}
       />
-      <div className="graph-3d__zoom" aria-label="3D zoom controls">
-        <button type="button" onClick={() => zoom(1 / 1.5)} title="Zoom in" aria-label="Zoom in">+</button>
-        <button type="button" onClick={() => zoom(1.5)} title="Zoom out" aria-label="Zoom out">−</button>
-      </div>
       <div className="graph-3d__help" aria-hidden="true">Drag to rotate <span /> Scroll to zoom <span /> Click a service</div>
       {selectedId && <div className="graph-3d__focus" aria-hidden="true">{activeTreeLinkIds.size} connections highlighted</div>}
     </div>
@@ -901,6 +901,7 @@ export default function InternalServiceMapPage() {
   const [panStart, setPanStart] = useState<{ pointerId: number; x: number; y: number; panX: number; panY: number } | null>(null);
   const [selectedId, setSelectedId] = useState<string | null>(null);
   const [reset3DKey, setReset3DKey] = useState(0);
+  const controls3DRef = useRef<{ zoom: (factor: number) => void } | null>(null);
   const startNodeDrag = (event: PointerEvent<HTMLButtonElement>, node: ServiceNode) => {
     if (event.button !== 0) return;
     event.stopPropagation();
@@ -946,8 +947,14 @@ export default function InternalServiceMapPage() {
   const selected = nodes.find((service) => service.id === selectedId) ?? null;
   const descendantIds = useMemo(() => collectDescendantIds(nodes, selectedId), [nodes, selectedId]);
   const highlightedChildIds = useMemo(() => selectedId === 'project' ? descendantIds : new Set<string>(), [descendantIds, selectedId]);
-  const zoomIn = () => setZoom((current) => Math.min(1.45, current * 1.5));
-  const zoomOut = () => setZoom((current) => current / 1.5);
+  const zoomIn = () => {
+    if (mode === '3d') controls3DRef.current?.zoom(1 / 1.5);
+    else setZoom((current) => Math.min(1.45, current * 1.5));
+  };
+  const zoomOut = () => {
+    if (mode === '3d') controls3DRef.current?.zoom(1.5);
+    else setZoom((current) => current / 1.5);
+  };
   const resetZoom = () => {
     setZoom(1);
     setPan({ x: 0, y: 0 });
@@ -1051,7 +1058,7 @@ export default function InternalServiceMapPage() {
           <>
             <div className="map-plane" style={{ '--zoom': zoom, '--pan-x': \`\${pan.x}px\`, '--pan-y': \`\${pan.y}px\` } as CSSProperties}>
               <Connections nodes={nodes} selectedId={selectedId} />
-              <button type="button" className={\`hub \${selectedId === 'project' ? 'is-selected' : ''}\`} onClick={() => setSelectedId('project')} aria-label={\`Trace \${graph.project?.name ?? 'Project'} child services\`}><div className="hub-inner"><ProjectMark /></div></button>
+              <button type="button" className={\`hub \${selectedId === 'project' ? 'is-selected' : ''}\`} onClick={() => setSelectedId((current) => current === 'project' ? null : 'project')} aria-label={selectedId === 'project' ? \`Stop tracing \${graph.project?.name ?? 'Project'} child services\` : \`Trace \${graph.project?.name ?? 'Project'} child services\`} aria-pressed={selectedId === 'project'}><div className="hub-inner"><ProjectMark /></div></button>
               {nodes.map((service) => {
                 const isHighlightedChild = highlightedChildIds.has(service.id);
                 const isRelated = descendantIds.has(service.id) || selected?.parentId === service.id || isHighlightedChild;
@@ -1088,12 +1095,12 @@ export default function InternalServiceMapPage() {
             </div>
           </>
         ) : (
-          <ServiceGraph3D nodes={nodes} selectedId={selectedId} resetKey={reset3DKey} onSelect={setSelectedId} />
+          <ServiceGraph3D nodes={nodes} selectedId={selectedId} resetKey={reset3DKey} controlsRef={controls3DRef} onSelect={setSelectedId} />
         )}
         <div className="zoom-controls" aria-label="Map zoom controls">
           <button type="button" className="zoom-button" onClick={zoomIn} aria-label="Zoom in">+</button>
           <button type="button" className="zoom-button" onClick={zoomOut} aria-label="Zoom out">−</button>
-          <button type="button" className="zoom-button" onClick={resetZoom} aria-label="Reset zoom"><span className="fit-icon" aria-hidden="true" /></button>
+          <button type="button" className="zoom-button" onClick={centerMap} aria-label="Reset zoom"><span className="fit-icon" aria-hidden="true" /></button>
         </div>
         <footer className="scan-foot">
           <div>Generated {new Date(graph.generatedAt).toLocaleString()}</div>