next-arch-map 0.1.27 → 0.1.28

package/dist/analyzers/pagesToEndpoints.js

@@ -1,6 +1,6 @@
 import path from "node:path";
 import ts from "typescript";
-import { buildActionNode, buildEdgeKey, buildEndpointNode, buildPageNode, collectStringConstants, ensureNode, getExistingDirectories, getPageRouteFromFile, getSourceFile, getStringLiteralValue, isIgnoredSourceFile, isPageFile, resolveLocalModulePath, resolveProjectRoot, walkDirectory, } from "../utils.js";
+import { buildActionNode, buildEdgeKey, buildEndpointNode, buildPageNode, buildServiceNode, collectStringConstants, ensureNode, getExistingDirectories, getPageRouteFromFile, getSourceFile, getStringLiteralValue, isIgnoredSourceFile, isPageFile, resolveLocalModulePath, resolveProjectRoot, walkDirectory, } from "../utils.js";
 const DEFAULT_APP_DIRS = ["app", "src/app"];
 const DEFAULT_EXTRA_SCAN_DIRS = ["src/features", "src/services", "src/lib", "src/hooks"];
 const DEFAULT_HTTP_CLIENT_IDENTIFIERS = ["fetch", "axios", "apiClient"];
@@ -48,11 +48,26 @@ export async function analyzePagesToEndpoints(options) {
                 const route = getPageRouteFromFile(appDir, filePath);
                 ensureNode(nodes, nodeIds, buildPageNode(route, filePath));
                 for (const call of httpCalls) {
+                    const pageNode = ensureNode(nodes, nodeIds, buildPageNode(route, filePath));
+                    // SDK calls create a single service node per client (e.g. "supabase")
+                    if (call.sdkClient) {
+                        const serviceNode = ensureNode(nodes, nodeIds, buildServiceNode(call.sdkClient, filePath));
+                        const edgeKey = buildEdgeKey(pageNode.id, serviceNode.id, "page-service");
+                        if (!edgeKeys.has(edgeKey)) {
+                            edgeKeys.add(edgeKey);
+                            edges.push({
+                                from: pageNode.id,
+                                to: serviceNode.id,
+                                kind: "page-service",
+                            });
+                        }
+                        continue;
+                    }
+                    // HTTP calls create endpoint nodes with action intermediaries
                     const nextCallIndex = (callIndexByRoute.get(route) ?? 0) + 1;
                     callIndexByRoute.set(route, nextCallIndex);
                     const actionContext = inferActionContext(call.node, sourceFile, nextCallIndex);
                     const actionId = allocateActionId(route, actionContext.id, actionIdCountByRoute);
-                    const pageNode = ensureNode(nodes, nodeIds, buildPageNode(route, filePath));
                     const actionNode = ensureNode(nodes, nodeIds, buildActionNode(route, actionId, filePath, actionContext.meta));
                     const endpointNode = ensureNode(nodes, nodeIds, buildEndpointNode(call.endpoint, filePath));
                     const pageActionKey = buildEdgeKey(pageNode.id, actionNode.id, "page-action");
@@ -177,7 +192,7 @@ function collectHttpCalls(sourceFile, httpClientIdentifiers, httpClientMethods,
                 if (sdkCall) {
                     calls.push({
                         endpoint: sdkCall.endpoint,
-                        method: sdkCall.method,
+                        sdkClient: sdkCall.sdkClient,
                         node,
                     });
                 }
@@ -233,8 +248,7 @@ function parseSdkCall(node, sdkClientIdentifiers) {
     if (segments.length < 2) {
         return null;
     }
-    const endpoint = `${current.text}.${segments.join(".")}`;
-    return { endpoint };
+    return { endpoint: current.text, sdkClient: current.text };
 }
 function getEndpointArgument(expression, constMap) {
     if (!expression) {

package/dist/model.d.ts

@@ -1,11 +1,11 @@
-export type NodeType = "page" | "endpoint" | "db" | "handler" | "action";
+export type NodeType = "page" | "endpoint" | "db" | "handler" | "action" | "service";
 export type Node = {
     id: string;
     type: NodeType;
     label: string;
     meta?: Record<string, any>;
 };
-export type EdgeKind = "page-endpoint" | "endpoint-db" | "endpoint-handler" | "page-action" | "action-endpoint" | "db-relation";
+export type EdgeKind = "page-endpoint" | "endpoint-db" | "endpoint-handler" | "page-action" | "action-endpoint" | "db-relation" | "page-service";
 export type Edge = {
     from: string;
     to: string;

package/dist/utils.d.ts

@@ -71,3 +71,12 @@ export declare function buildDbNode(modelName: string, filePath: string): {
         model: string;
     };
 };
+export declare function buildServiceNode(serviceName: string, filePath: string): {
+    id: string;
+    type: "service";
+    label: string;
+    meta: {
+        filePath: string;
+        service: string;
+    };
+};

package/dist/utils.js

@@ -292,3 +292,14 @@ export function buildDbNode(modelName, filePath) {
         },
     };
 }
+export function buildServiceNode(serviceName, filePath) {
+    return {
+        id: `service:${serviceName}`,
+        type: "service",
+        label: serviceName,
+        meta: {
+            filePath,
+            service: serviceName,
+        },
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-arch-map",
-  "version": "0.1.27",
+  "version": "0.1.28",
   "description": "Static analyzer that builds a multi-layer architecture graph for Next.js-style apps.",
   "type": "module",
   "bin": {

package/viewer/src/App.tsx

@@ -10,9 +10,11 @@ const ALL_NODE_TYPES: NodeType[] = [
   "endpoint",
   "handler",
   "db",
+  "service",
 ];
 const ALL_EDGE_KINDS: EdgeKind[] = [
   "page-endpoint",
+  "page-service",
   "endpoint-db",
   "endpoint-handler",
   "db-relation",

package/viewer/src/Filters.tsx

@@ -16,6 +16,7 @@ const NODE_TYPE_COLORS: Record<NodeType, string> = {
   endpoint: "bg-emerald-600",
   handler: "bg-teal-500",
   db: "bg-red-600",
+  service: "bg-violet-600",
 };
 
 export function Filters(props: FiltersProps) {

package/viewer/src/GraphView.tsx

@@ -7,7 +7,6 @@ import {
   MiniMap,
   Position,
   ReactFlow,
-  useReactFlow,
   type Edge as FlowEdge,
   type Node as FlowNode,
   type NodeMouseHandler,
@@ -31,13 +30,7 @@ const NODE_COLOR: Record<NodeType, string> = {
   endpoint: "#059669",
   db: "#dc2626",
   handler: "#14b8a6",
-};
-
-const NODE_BORDER: Record<NodeType, string> = {
-  page: "#2563eb",
-  endpoint: "#047857",
-  db: "#b91c1c",
-  handler: "#0d9488",
+  service: "#7c3aed",
 };
 
 const EDGE_COLOR: Record<EdgeKind, string> = {
@@ -47,19 +40,18 @@ const EDGE_COLOR: Record<EdgeKind, string> = {
   "page-action": "#8b5cf6",
   "action-endpoint": "#a855f7",
   "db-relation": "#94a3b8",
+  "page-service": "#a78bfa",
 };
 
 const DIFF_BORDER_COLOR: Record<DiffStatus, string> = {
   added: "#22c55e",
   removed: "#ef4444",
-  modified: "#f59e0b",
   unchanged: "rgba(15, 23, 42, 0.12)",
 };
 
 const DIFF_EDGE_COLOR: Record<DiffStatus, string> = {
   added: "#22c55e",
   removed: "#ef4444",
-  modified: "#f59e0b",
   unchanged: "#000000",
 };
 
@@ -337,7 +329,7 @@ export function GraphView(props: GraphViewProps) {
 
   // Compute layout without hover state — this is the expensive part
   const { flowNodes: baseFlowNodes, flowEdges: baseFlowEdges } = useMemo(() => {
-    const typeOrder: NodeType[] = ["page", "endpoint", "handler", "db"];
+    const typeOrder: NodeType[] = ["page", "endpoint", "handler", "db", "service"];
     const visibleNodes = graph.nodes.filter((node) => visibleNodeTypes.has(node.type));
     const visibleNodeIds = new Set(visibleNodes.map((node) => node.id));
     const nodesByType = new Map<NodeType, typeof visibleNodes>(

package/viewer/src/NodeDetails.tsx

@@ -8,9 +8,8 @@ const TYPE_BADGE_COLORS: Record<NodeType, string> = {
   page: "bg-blue-100 text-blue-700",
   endpoint: "bg-emerald-100 text-emerald-700",
   handler: "bg-teal-100 text-teal-700",
-  action: "bg-amber-100 text-amber-700",
   db: "bg-red-100 text-red-700",
-  ui: "bg-orange-100 text-orange-700",
+  service: "bg-violet-100 text-violet-700",
 };
 
 export function NodeDetails({ node }: NodeDetailsProps) {
@@ -46,11 +45,11 @@ export function NodeDetails({ node }: NodeDetailsProps) {
           {node.id}
         </div>
 
-        {(node.meta?.descriptionLong || node.meta?.description) && (
+        {(node.meta?.descriptionLong ?? node.meta?.description) ? (
           <p className="text-xs text-slate-600 leading-relaxed">
             {String(node.meta.descriptionLong ?? node.meta.description)}
           </p>
-        )}
+        ) : null}
 
         {filePath !== undefined && filePath !== null && (
           <div className="text-[11px] text-slate-500">
@@ -59,7 +58,7 @@ export function NodeDetails({ node }: NodeDetailsProps) {
           </div>
         )}
 
-        {node.meta?.screenshot && (
+        {node.meta?.screenshot ? (
           <div className="mt-2">
             <img
               src={String(node.meta.screenshot)}
@@ -67,7 +66,7 @@ export function NodeDetails({ node }: NodeDetailsProps) {
               className="w-full rounded-md border border-slate-200"
             />
           </div>
-        )}
+        ) : null}
 
         {node.meta && (
           <pre className="mt-2 p-2.5 rounded-md bg-slate-50 border border-slate-100 text-[11px] font-mono text-slate-600 max-h-40 overflow-auto whitespace-pre-wrap break-all">

package/viewer/src/types.ts

@@ -2,7 +2,8 @@ export type NodeType =
   | "page"
   | "endpoint"
   | "db"
-  | "handler";
+  | "handler"
+  | "service";
 
 export type Node = {
   id: string;
@@ -17,7 +18,8 @@ export type EdgeKind =
   | "endpoint-handler"
   | "page-action"
   | "action-endpoint"
-  | "db-relation";
+  | "db-relation"
+  | "page-service";
 
 export type Edge = {
   from: string;