@atlaspack/inspector 0.0.19-canary.3998

package/src/backend/controllers/CacheDataController.ts

@@ -0,0 +1,187 @@
+import {Router} from 'express';
+import {getCacheStats} from '../services/getCacheStats';
+import {
+  getCache,
+  getRequestTracker,
+} from '../config/middleware/cacheDataMiddleware';
+
+export function makeCacheDataController(): Router {
+  const router = Router();
+
+  router.get('/api/stats', (_req, res) => {
+    const cache = getCache(res);
+    const stats = getCacheStats(cache);
+    res.json(stats);
+  });
+
+  router.get('/api/cache-invalidation-files/', (req, res) => {
+    const limit = req.query.limit != null ? Number(req.query.limit) : 100;
+    const cursor = req.query.cursor as string | undefined;
+    const sortBy = req.query.sortBy as string;
+
+    const requestTracker = getRequestTracker(res);
+    // 0 is file
+    let files = requestTracker.graph.nodes
+      .filter((node: any) => node.type === 0)
+      .map((node: any) => ({
+        ...node,
+        invalidationCount: requestTracker.graph
+          .getNodeIdsConnectedTo(
+            requestTracker.graph.getNodeIdByContentKey(node.id),
+            -1,
+          )
+          // type 1 is request
+          .filter((node: any) => requestTracker.graph.getNode(node).type === 1)
+          .length,
+      }));
+
+    if (sortBy == null || sortBy === 'invalidationCount') {
+      files.sort((a: any, b: any) => b.invalidationCount - a.invalidationCount);
+    }
+
+    const count = files.length;
+    const cursorIndex =
+      cursor != null && cursor !== ''
+        ? files.findIndex((node: any) => node.id === cursor) + 1
+        : 0;
+    const resultFiles = files.slice(cursorIndex, cursorIndex + limit);
+
+    res.json({
+      files: resultFiles,
+      count,
+      nextPageCursor:
+        cursorIndex + limit < count
+          ? resultFiles[resultFiles.length - 1]
+          : null,
+      hasNextPage: cursorIndex + limit < count,
+      limit,
+    });
+  });
+
+  router.get('/api/cache-invalidation-files/:fileId', (req, res) => {
+    const requestTracker = getRequestTracker(res);
+    const file = requestTracker.graph.nodes.find(
+      (node: any) => node.id === req.params.fileId,
+    );
+    if (!file) {
+      res.status(400).json({error: 'File not found'});
+      return;
+    }
+
+    const nodeId = requestTracker.graph.getNodeIdByContentKey(file.id);
+    const nodes = requestTracker.graph.getNodeIdsConnectedTo(nodeId, -1);
+
+    const invalidatedNodes = nodes
+      .map((node: any) => requestTracker.graph.getNode(node))
+      .filter((node: any) => node.type === 1);
+
+    const response = {
+      file,
+      invalidatedNodesCount: invalidatedNodes.length,
+    };
+
+    res.json(response);
+  });
+
+  router.get(
+    '/api/cache-invalidation-files/:fileId/invalidated-nodes',
+    (req, res) => {
+      const limit = req.query.limit != null ? Number(req.query.limit) : 100;
+      const cursor = req.query.cursor as string | undefined;
+
+      const requestTracker = getRequestTracker(res);
+      const file = requestTracker.graph.nodes.find(
+        (node: any) => node.id === req.params.fileId,
+      );
+      if (!file) {
+        res.status(400).json({error: 'File not found'});
+        return;
+      }
+
+      const nodeId = requestTracker.graph.getNodeIdByContentKey(file.id);
+      const nodes = requestTracker.graph.getNodeIdsConnectedTo(nodeId, -1);
+
+      const invalidatedNodes = nodes
+        .map((node: any) => requestTracker.graph.getNode(node))
+        .filter((node: any) => node.type === 1);
+      const cursorIndex =
+        cursor != null && cursor !== ''
+          ? invalidatedNodes.findIndex((node: any) => node.id === cursor) + 1
+          : 0;
+      const resultNodes = invalidatedNodes.slice(
+        cursorIndex,
+        cursorIndex + limit,
+      );
+
+      const response = {
+        data: resultNodes,
+        count: invalidatedNodes.length,
+        nextPageCursor:
+          cursorIndex + limit < invalidatedNodes.length
+            ? resultNodes[resultNodes.length - 1]
+            : null,
+        hasNextPage: cursorIndex + limit < invalidatedNodes.length,
+        limit,
+      };
+
+      res.json(response);
+    },
+  );
+
+  router.get('/api/cache-keys/', (req, res) => {
+    const cache = getCache(res);
+    const sortBy = req.query.sortBy as string;
+    const limit = req.query.limit != null ? Number(req.query.limit) : 100;
+    const cursor = req.query.cursor as string | undefined;
+
+    let resultKeys = Array.from(cache.keys());
+    if (sortBy === 'size') {
+      const sizes = resultKeys.map((key: any) => [
+        key,
+        cache.getBlobSync(key).length,
+      ]);
+      sizes.sort((a, b) => (b[1] as number) - (a[1] as number));
+      resultKeys = sizes.map(([key]: any) => key as string);
+    }
+
+    const count = resultKeys.length;
+    const cursorIndex =
+      cursor != null ? resultKeys.indexOf(cursor as string) + 1 : 0;
+    resultKeys = resultKeys.slice(cursorIndex, cursorIndex + limit);
+
+    res.json({
+      keys: resultKeys,
+      count,
+      nextPageCursor:
+        cursorIndex + limit < count ? resultKeys[resultKeys.length - 1] : null,
+      hasNextPage: cursorIndex + limit < count,
+      limit,
+    });
+  });
+
+  router.get('/api/cache-value/:key', (req, res) => {
+    const cache = getCache(res);
+    const key = req.params.key;
+
+    try {
+      const value = cache.getBlobSync(key);
+      // bigger than 1MB
+      if (typeof value.length === 'number' && value.length > 1024 * 1024) {
+        res.json({
+          size: value.length,
+          value: value.slice(0, 1024 * 1024).toString('utf-8'),
+        });
+        return;
+      }
+
+      res.json({
+        size: value.length,
+        value: value.toString('utf-8'),
+      });
+    } catch (error) {
+      res.status(500).json({error: (error as Error).message});
+    }
+  });
+
+  return router;
+}

package/src/backend/controllers/FrontendAssetsController.ts

@@ -0,0 +1,28 @@
+import path from 'path';
+import express, {Router} from 'express';
+
+/**
+ * On production builds, we intend to serve a pre-built version of the front-end `dist`
+ * directory in `src/frontend/dist`.
+ *
+ * On development mode, you should be running the front-end dev-server separately
+ * and pointing it at this host.
+ */
+export function makeFrontendAssetsController() {
+  const router = Router();
+
+  router.use(
+    express.static(path.join(__dirname, '../../../src/frontend/dist')),
+  );
+  router.use('/app/', (req, res, next) => {
+    if (req.method === 'GET') {
+      res.sendFile(
+        path.join(__dirname, '../../../src/frontend/dist/index.html'),
+      );
+    } else {
+      next();
+    }
+  });
+
+  return router;
+}

package/src/backend/controllers/TreeMapController.ts

@@ -0,0 +1,143 @@
+/* eslint-disable import/no-extraneous-dependencies */
+/* eslint-disable monorepo/no-internal-import */
+import {Router} from 'express';
+import path from 'path';
+import {
+  getBundleGraph,
+  getTreemap,
+} from '../config/middleware/cacheDataMiddleware';
+// @ts-expect-error TS2749
+import {Node} from '@atlaspack/core/lib/types.js';
+import {ALL_EDGE_TYPES} from '@atlaspack/graph';
+import {SourceCodeURL} from '../services/findSourceCodeUrl';
+import {logger} from '../config/logger';
+
+export interface MakeTreemapControllerParams {
+  sourceCodeURL: SourceCodeURL | null;
+  projectRoot: string;
+  repositoryRoot: string;
+}
+
+export function makeTreemapController({
+  sourceCodeURL,
+  projectRoot,
+  repositoryRoot,
+}: MakeTreemapControllerParams): Router {
+  const router = Router();
+
+  router.get('/api/treemap/reasons', (req, res) => {
+    const bundleGraph = getBundleGraph(res);
+
+    const queryPath = req.query.path as string;
+    const bundle = req.query.bundle as string;
+
+    const bundleNode = bundleGraph._graph.getNode(
+      bundleGraph._graph.getNodeIdByContentKey(bundle),
+    );
+
+    const relevantPaths: string[][] = [];
+    let tooManyPaths = false;
+    bundleGraph.traverseBundle(bundleNode.value, {
+      enter(
+        node: Node,
+        context: string[],
+        actions: {skipChildren: () => void; stop: () => void},
+      ) {
+        if (context == null) {
+          context = [];
+        }
+
+        if (node.type === 'asset') {
+          context.push(path.relative(repositoryRoot, node.value.filePath));
+        }
+
+        if (node.type === 'dependency') {
+          try {
+            const childNodeIds = bundleGraph._graph.getNodeIdsConnectedFrom(
+              bundleGraph._graph.getNodeIdByContentKey(node.id),
+              ALL_EDGE_TYPES,
+            );
+            let isParent = false;
+            for (const childNodeId of childNodeIds) {
+              const childNode = bundleGraph._graph.getNode(childNodeId);
+              if (
+                childNode.type === 'asset' &&
+                path
+                  .relative(repositoryRoot, childNode.value.filePath)
+                  .startsWith(queryPath)
+              ) {
+                actions.skipChildren();
+                isParent = true;
+              }
+            }
+
+            // For some reason we visit all nodes from the bundle, so we need to filter out
+            // stuff that is directly connected to the bundle node, since that's not useful
+            // information.
+            // e.g.: On the cases where the file is included directly to the bundle either due
+            // to manual bundling or entry dependencies, the user probably already knows about
+            // it.
+            if (isParent && context.length > 1) {
+              relevantPaths.push(context.slice());
+
+              if (relevantPaths.length > 50) {
+                tooManyPaths = true;
+                actions.stop();
+              }
+            }
+          } catch (err) {
+            logger.error(err);
+          }
+        }
+
+        return context;
+      },
+      exit(node: Node, context: string[] = []) {
+        if (node.type === 'asset') {
+          context.pop();
+        }
+        return context;
+      },
+    });
+
+    res.json({
+      tooManyPaths,
+      relevantPaths,
+      sourceCodeURL,
+      projectRoot,
+      repositoryRoot,
+    });
+  });
+
+  router.get('/api/treemap', (req, res) => {
+    const treemap = getTreemap(res);
+
+    const limit = Number(req.query.limit ?? 10000);
+    const offset = Number(req.query.offset ?? 0);
+
+    const bundleId = req.query.bundle as string | null;
+    let bundles = treemap!.bundles;
+    if (bundleId) {
+      bundles = bundles.filter((bundle) => bundle.id === bundleId);
+    } else {
+      bundles = bundles.map((bundle) => ({
+        ...bundle,
+        assetTree: {
+          id: `${bundle.id}::/`,
+          path: '',
+          children: {},
+          size: bundle.size,
+        },
+      }));
+    }
+
+    res.json({
+      bundles: bundles.slice(offset, offset + limit),
+      next: offset + limit < bundles.length ? offset + limit : null,
+      count: bundles.length,
+      totalSize: treemap!.totalSize,
+    });
+  });
+
+  return router;
+}

package/src/backend/controllers/mcp/InspectorMCP.ts

@@ -0,0 +1,311 @@
+/* eslint-disable monorepo/no-internal-import */
+import {
+  McpServer,
+  ResourceTemplate,
+} from '@modelcontextprotocol/sdk/server/mcp.js';
+import {
+  isInitializeRequest,
+  ListResourcesResult,
+  ReadResourceResult,
+  Resource,
+} from '@modelcontextprotocol/sdk/types.js';
+import {StreamableHTTPServerTransport} from '@modelcontextprotocol/sdk/server/streamableHttp.js';
+import {randomUUID} from 'crypto';
+import {Request, Response} from 'express';
+import {z} from 'zod';
+import {LMDBLiteCache} from '@atlaspack/cache';
+import {
+  getBundleGraph,
+  getCache,
+  getTreemap,
+} from '../../config/middleware/cacheDataMiddleware';
+// @ts-expect-error TS2749
+import BundleGraph from '@atlaspack/core/lib/BundleGraph.js';
+import {Treemap} from '../../services/buildTreemap';
+
+/**
+ * Incomplete, toy MCP server for the Atlaspack Inspector.
+ */
+function makeInspectorMCPServer({
+  cache,
+  bundleGraph,
+  treemap,
+}: {
+  cache: LMDBLiteCache;
+  bundleGraph: BundleGraph;
+  treemap: Treemap;
+}): McpServer {
+  const server = new McpServer({
+    name: 'atlaspack-inspector-mcp',
+    version: '1.0.0',
+  });
+
+  server.registerTool(
+    'list-treemap-bundles',
+    {
+      title: 'List Treemap Bundles',
+      description: `List the bundles in the treemap.`,
+      inputSchema: {},
+    },
+    () => {
+      return {
+        content: [
+          {
+            type: 'text',
+            text: [
+              `Treemap bundles:`,
+              ...treemap.bundles.flatMap((bundle) => [
+                `- ${bundle.displayName} - ${bundle.id} - atlaspack://bundle-info/${bundle.id}`,
+                `  * ${bundle.size} bytes`,
+                `  * ${bundle.filePath} file path`,
+                `  * Run 'query-treemap ${bundle.id}' to get more information about this bundle`,
+              ]),
+            ].join('\n'),
+          },
+        ],
+      };
+    },
+  );
+
+  server.registerTool(
+    'query-treemap',
+    {
+      title: 'Query Treemap',
+      description: `Query the treemap for information about a given bundle.`,
+      inputSchema: {
+        bundleId: z.string(),
+      },
+    },
+    ({bundleId}) => {
+      const bundle = treemap.bundles.find((bundle) => bundle.id === bundleId);
+
+      if (!bundle) {
+        return {
+          content: [{type: 'text', text: `Bundle not found: ${bundleId}`}],
+        };
+      }
+
+      return {
+        content: [
+          {
+            type: 'text',
+            text: [
+              `Bundle: ${bundle.displayName}`,
+              `Bundle size: ${bundle.size} bytes`,
+            ].join('\n'),
+          },
+          {
+            type: 'text',
+            text: `Raw treemap JSON:\n${JSON.stringify(bundle)}`,
+          },
+        ],
+      };
+    },
+  );
+
+  server.registerTool(
+    'get-resolved-imports',
+    {
+      title: 'Get Resolved Imports',
+      description: `Get the resolved imports for a given JavaScript/TypeScript file, if it appears on the output bundles.`,
+      inputSchema: {
+        file: z.string(),
+      },
+    },
+    ({file}) => {
+      const assetId = bundleGraph._graph.nodes.find((node: any) => {
+        return node.type === 'asset' && node.value.filePath === file;
+      })?.id;
+
+      if (!assetId) {
+        return {
+          content: [
+            {type: 'text', text: `File not found in any bundles: ${file}`},
+          ],
+        };
+      }
+
+      const asset = bundleGraph.getAssetById(assetId);
+      const bundlesWithAsset = bundleGraph.getBundlesWithAsset(asset);
+
+      return {
+        content: [
+          {
+            type: 'text',
+            text: [
+              `Bundles with asset:`,
+              ...bundlesWithAsset.map(
+                (bundle: any) =>
+                  `- ${bundle.id} - ${bundle.displayName} - atlaspack://bundle-info/${bundle.id}`,
+              ),
+            ].join('\n'),
+          },
+          {
+            type: 'text',
+            text: `Raw asset JSON: ${JSON.stringify(asset)}`,
+          },
+        ],
+      };
+    },
+  );
+
+  server.registerResource(
+    'treemap-bundle-info',
+    new ResourceTemplate('atlaspack://bundle-info/{id}', {
+      list(): ListResourcesResult {
+        const resources: Resource[] = treemap.bundles
+          .slice(0, 10)
+          .map((bundle) => ({
+            uri: `atlaspack://bundle-info/${bundle.id}`,
+            name: `Bundle: ${bundle.displayName}`,
+          }));
+
+        return {
+          resources,
+        };
+      },
+    }),
+    {
+      name: 'Atlaspack Treemap Bundle Information',
+      description: `Information about a built JavaScript bundle in the application and its bundle size. Can be used to list available bundles in the application.`,
+    },
+    (uri: URL): ReadResourceResult => {
+      const id = uri.pathname.split('/').slice(1).join('/');
+      const bundle = treemap.bundles.find((bundle) => bundle.id === id);
+
+      if (!bundle) {
+        return {
+          contents: [],
+        };
+      }
+
+      return {
+        contents: [
+          {
+            uri: uri.toString(),
+            text: [
+              `Bundle: ${bundle.displayName}`,
+              `Bundle size: ${bundle.size} bytes`,
+            ].join('\n---\n'),
+          },
+        ],
+      };
+    },
+  );
+
+  server.registerResource(
+    'cache-key',
+    new ResourceTemplate('atlaspack://cache/{key}', {
+      list: undefined,
+    }),
+    {
+      name: 'Atlaspack Cache Entry',
+    },
+    (uri: URL): ReadResourceResult => {
+      const key = uri.pathname.split('/').slice(1).join('/');
+      const value = cache.getBlobSync(key);
+
+      return {
+        contents: [
+          {
+            uri: uri.toString(),
+            type: 'text',
+            text: [
+              `Cache key: ${key}`,
+              `Cache value total size: ${value.length} bytes`,
+              `First 500KB of cache value:\n\n${value.subarray(0, 1024 * 500).toString()}`,
+            ].join('\n---\n'),
+          },
+        ],
+      };
+    },
+  );
+
+  return server;
+}
+
+export interface InspectorMCPSession {
+  transport: StreamableHTTPServerTransport;
+  server: McpServer;
+}
+
+export class InspectorMCP {
+  private sessions: Map<string, InspectorMCPSession> = new Map();
+
+  constructor() {}
+
+  getSession(request: Request): InspectorMCPSession | undefined {
+    const sessionId = request.headers['mcp-session-id'] as string | undefined;
+    if (!sessionId) {
+      return undefined;
+    }
+    return this.sessions.get(sessionId);
+  }
+
+  async get(request: Request, response: Response): Promise<void> {
+    const session = this.getSession(request);
+    if (!session) {
+      response.status(400).send('Invalid or missing session ID');
+      return;
+    }
+
+    await session.transport.handleRequest(request, response);
+  }
+
+  async post(request: Request, response: Response): Promise<void> {
+    const sessionId = request.headers['mcp-session-id'] as string | undefined;
+    let transport: StreamableHTTPServerTransport;
+
+    if (sessionId && this.sessions.has(sessionId)) {
+      transport = this.sessions.get(sessionId)!.transport;
+    } else if (!sessionId && isInitializeRequest(request.body)) {
+      transport = await this.createSession(response);
+    } else {
+      response.status(400).json({
+        jsonrpc: '2.0',
+        error: {
+          code: -32000,
+          message: 'Bad Request: No valid session ID provided',
+        },
+        id: null,
+      });
+      return;
+    }
+
+    await transport.handleRequest(request, response, request.body);
+  }
+
+  private async createSession(
+    response: Response,
+  ): Promise<StreamableHTTPServerTransport> {
+    const cache = getCache(response);
+    const bundleGraph = getBundleGraph(response);
+    const treemap = getTreemap(response);
+
+    const server = makeInspectorMCPServer({
+      cache,
+      bundleGraph,
+      treemap,
+    });
+
+    const transport = new StreamableHTTPServerTransport({
+      sessionIdGenerator: () => randomUUID(),
+      onsessioninitialized: (sessionId) => {
+        this.sessions.set(sessionId, {
+          transport,
+          server,
+        });
+      },
+    });
+
+    transport.onclose = () => {
+      if (transport.sessionId) {
+        this.sessions.delete(transport.sessionId);
+      }
+    };
+
+    await server.connect(transport);
+
+    return transport;
+  }
+}

package/src/backend/controllers/mcp/InspectorMCPController.ts

@@ -0,0 +1,17 @@
+import {Router} from 'express';
+import {InspectorMCP} from './InspectorMCP';
+
+export function makeInspectorMCPController(): Router {
+  const router = Router();
+  const mcp = new InspectorMCP();
+
+  router.post('/api/mcp', (req, res) => {
+    mcp.post(req, res);
+  });
+
+  router.get('/api/mcp', (req, res) => {
+    mcp.get(req, res);
+  });
+
+  return router;
+}

package/src/backend/errors/HTTPError.test.ts

@@ -0,0 +1,19 @@
+import assert from 'assert';
+import {HTTPError} from './HTTPError';
+
+describe('HTTPError', function () {
+  it('should create HTTPError with message and status', function () {
+    const error = new HTTPError('Not found', 404);
+
+    assert.equal(error.message, 'Not found');
+    assert.equal(error.status, 404);
+    assert(error instanceof Error);
+    assert(error instanceof HTTPError);
+  });
+
+  it('should be throwable', function () {
+    assert.throws(() => {
+      throw new HTTPError('Server error', 500);
+    }, HTTPError);
+  });
+});