next-arch-map 0.1.29 → 0.1.30

package/dist/analyzers/prismaSchema.js

@@ -75,9 +75,7 @@ export async function analyzePrismaSchema(projectRoot) {
     }
     return {
         nodes: nodes.sort((a, b) => a.id.localeCompare(b.id)),
-        edges: edges.sort((a, b) => a.kind.localeCompare(b.kind) ||
-            a.from.localeCompare(b.from) ||
-            a.to.localeCompare(b.to)),
+        edges: edges.sort((a, b) => a.kind.localeCompare(b.kind) || a.from.localeCompare(b.from) || a.to.localeCompare(b.to)),
     };
 }
 function parseEnumNames(content) {
@@ -205,9 +203,13 @@ function parseField(line, modelNames, enumNames) {
     if (restLine.includes("@unique")) {
         column.isUnique = true;
     }
-    const defaultMatch = /@default\(([^)]*)\)/.exec(restLine);
-    if (defaultMatch) {
-        column.default = defaultMatch[1];
+    const defaultAttr = extractAttribute(restTokens, "@default");
+    if (defaultAttr) {
+        const innerStart = "@default(".length;
+        const innerEnd = defaultAttr.lastIndexOf(")");
+        if (innerEnd > innerStart) {
+            column.default = defaultAttr.slice(innerStart, innerEnd);
+        }
     }
     const mapMatch = /@map\("([^"]*)"\)/.exec(restLine);
     if (mapMatch) {

package/dist/cli.js

@@ -4,9 +4,164 @@ import fs from "node:fs";
 import path from "node:path";
 import { analyzeProject, diffGraphs } from "./index.js";
 import { generateDescribeContext } from "./describe.js";
-import { captureScreenshots, generateParamsTemplate, } from "./screenshot.js";
+import { captureScreenshots, generateParamsTemplate } from "./screenshot.js";
 import { serve } from "./serve.js";
 import { readJsonFile, writeJsonFile } from "./utils.js";
+function parseArgs(args, defs) {
+    const result = {};
+    for (const def of Object.values(defs)) {
+        if (def.type === "string[]") {
+            result[def.key] = [];
+        }
+        else if (def.type === "boolean") {
+            result[def.key] = false;
+        }
+        else if ("default" in def && def.default !== undefined) {
+            result[def.key] = def.default;
+        }
+        else {
+            result[def.key] = def.type === "number" ? 0 : "";
+        }
+    }
+    for (let i = 0; i < args.length; i += 1) {
+        const flag = args[i];
+        if (flag === "--help" || flag === "-h") {
+            printHelp();
+            process.exit(0);
+        }
+        const def = defs[flag];
+        if (!def) {
+            throw new Error(`Unknown argument: ${flag}`);
+        }
+        if (def.type === "boolean") {
+            result[def.key] = true;
+            continue;
+        }
+        const value = args[i + 1];
+        if (!value) {
+            throw new Error(`Missing value for ${flag}`);
+        }
+        i += 1;
+        if (def.type === "number") {
+            const num = Number(value);
+            if (!Number.isInteger(num) || num <= 0) {
+                throw new Error(`Invalid ${flag}: ${value}`);
+            }
+            result[def.key] = num;
+        }
+        else if (def.type === "string[]") {
+            result[def.key].push(value);
+        }
+        else {
+            result[def.key] = value;
+        }
+    }
+    return result;
+}
+// ---------------------------------------------------------------------------
+// Command-specific argument wrappers
+// ---------------------------------------------------------------------------
+function parseAnalyzeArgs(args) {
+    const raw = parseArgs(args, {
+        "--project-root": { key: "projectRoot", type: "string", default: process.cwd() },
+        "--out": { key: "out", type: "string", default: "arch/graph.full.json" },
+        "--app-dir": { key: "appDirs", type: "string[]" },
+    });
+    const appDirs = raw.appDirs;
+    return {
+        projectRoot: path.resolve(raw.projectRoot),
+        out: raw.out,
+        appDirs: appDirs.length > 0 ? appDirs : undefined,
+    };
+}
+function parseDiffArgs(args) {
+    const raw = parseArgs(args, {
+        "--before": { key: "beforePath", type: "string" },
+        "--after": { key: "afterPath", type: "string" },
+        "--out": { key: "out", type: "string", default: "arch/graph.diff.json" },
+    });
+    if (!raw.beforePath || !raw.afterPath) {
+        throw new Error("The diff command requires --before <path> and --after <path>.");
+    }
+    return {
+        beforePath: raw.beforePath,
+        afterPath: raw.afterPath,
+        out: raw.out,
+    };
+}
+function parseServeArgs(args) {
+    const raw = parseArgs(args, {
+        "--project-root": { key: "projectRoot", type: "string", default: process.cwd() },
+        "--port": { key: "port", type: "number", default: 4321 },
+        "--app-dir": { key: "appDirs", type: "string[]" },
+    });
+    const appDirs = raw.appDirs;
+    return {
+        projectRoot: path.resolve(raw.projectRoot),
+        port: raw.port,
+        appDirs: appDirs.length > 0 ? appDirs : undefined,
+    };
+}
+function parseDevArgs(args) {
+    const raw = parseArgs(args, {
+        "--project-root": { key: "projectRoot", type: "string", default: process.cwd() },
+        "--port": { key: "port", type: "number", default: 4321 },
+        "--viewer-dir": { key: "viewerDir", type: "string" },
+        "--app-dir": { key: "appDirs", type: "string[]" },
+    });
+    let viewerDir = raw.viewerDir;
+    if (!viewerDir) {
+        const packageDir = path.dirname(path.dirname(new URL(import.meta.url).pathname));
+        const builtinViewer = path.join(packageDir, "viewer");
+        if (fs.existsSync(path.join(builtinViewer, "package.json"))) {
+            viewerDir = builtinViewer;
+        }
+        if (!viewerDir) {
+            throw new Error("Could not find viewer directory. Provide --viewer-dir <path> pointing to the viewer app.");
+        }
+    }
+    else {
+        viewerDir = path.resolve(viewerDir);
+    }
+    const appDirs = raw.appDirs;
+    return {
+        projectRoot: path.resolve(raw.projectRoot),
+        port: raw.port,
+        viewerDir,
+        appDirs: appDirs.length > 0 ? appDirs : undefined,
+    };
+}
+function parseScreenshotArgs(args) {
+    const raw = parseArgs(args, {
+        "--base-url": { key: "baseUrl", type: "string" },
+        "--graph": { key: "graphPath", type: "string", default: "arch/graph.full.json" },
+        "--out-dir": { key: "outDir", type: "string", default: "arch/screenshots" },
+        "--params": { key: "paramsPath", type: "string", default: "arch/screenshot-params.json" },
+        "--generate-params": { key: "generateParams", type: "boolean" },
+    });
+    return {
+        baseUrl: raw.baseUrl,
+        graphPath: raw.graphPath,
+        outDir: raw.outDir,
+        paramsPath: raw.paramsPath,
+        generateParams: raw.generateParams,
+    };
+}
+function parseDescribeArgs(args) {
+    const raw = parseArgs(args, {
+        "--graph": { key: "graphPath", type: "string", default: "arch/graph.full.json" },
+        "--out": { key: "outPath", type: "string", default: "arch/describe-context.md" },
+        "--all": { key: "all", type: "boolean" },
+    });
+    return {
+        graphPath: raw.graphPath,
+        outPath: raw.outPath,
+        all: raw.all,
+    };
+}
+// ---------------------------------------------------------------------------
+// Commands
+// ---------------------------------------------------------------------------
 async function main() {
     const [commandOrArg, ...rest] = process.argv.slice(2);
     if (commandOrArg === "describe") {
@@ -74,233 +229,6 @@ async function main() {
     writeJsonFile(outputFile, graph);
     logAnalyzeSummary(graph, outputFile, options.projectRoot);
 }
-function parseAnalyzeArgs(args) {
-    let projectRoot = process.cwd();
-    let out = "arch/graph.full.json";
-    const appDirs = [];
-    for (let index = 0; index < args.length; index += 1) {
-        const argument = args[index];
-        if (argument === "--project-root" && args[index + 1]) {
-            projectRoot = path.resolve(args[index + 1]);
-            index += 1;
-            continue;
-        }
-        if (argument === "--out" && args[index + 1]) {
-            out = args[index + 1];
-            index += 1;
-            continue;
-        }
-        if (argument === "--app-dir" && args[index + 1]) {
-            appDirs.push(args[index + 1]);
-            index += 1;
-            continue;
-        }
-        if (argument === "--help" || argument === "-h") {
-            printHelp();
-            process.exit(0);
-        }
-        throw new Error(`Unknown argument: ${argument}`);
-    }
-    return {
-        projectRoot,
-        out,
-        appDirs: appDirs.length > 0 ? appDirs : undefined,
-    };
-}
-function parseDiffArgs(args) {
-    let beforePath = "";
-    let afterPath = "";
-    let out = "arch/graph.diff.json";
-    for (let index = 0; index < args.length; index += 1) {
-        const argument = args[index];
-        if (argument === "--before" && args[index + 1]) {
-            beforePath = args[index + 1];
-            index += 1;
-            continue;
-        }
-        if (argument === "--after" && args[index + 1]) {
-            afterPath = args[index + 1];
-            index += 1;
-            continue;
-        }
-        if (argument === "--out" && args[index + 1]) {
-            out = args[index + 1];
-            index += 1;
-            continue;
-        }
-        if (argument === "--help" || argument === "-h") {
-            printHelp();
-            process.exit(0);
-        }
-        throw new Error(`Unknown argument: ${argument}`);
-    }
-    if (!beforePath || !afterPath) {
-        throw new Error("The diff command requires --before <path> and --after <path>.");
-    }
-    return {
-        beforePath,
-        afterPath,
-        out,
-    };
-}
-function parseServeArgs(args) {
-    let projectRoot = process.cwd();
-    let port = 4321;
-    const appDirs = [];
-    for (let index = 0; index < args.length; index += 1) {
-        const argument = args[index];
-        if (argument === "--project-root" && args[index + 1]) {
-            projectRoot = path.resolve(args[index + 1]);
-            index += 1;
-            continue;
-        }
-        if (argument === "--port" && args[index + 1]) {
-            port = Number(args[index + 1]);
-            if (!Number.isInteger(port) || port <= 0) {
-                throw new Error(`Invalid port: ${args[index + 1]}`);
-            }
-            index += 1;
-            continue;
-        }
-        if (argument === "--app-dir" && args[index + 1]) {
-            appDirs.push(args[index + 1]);
-            index += 1;
-            continue;
-        }
-        if (argument === "--help" || argument === "-h") {
-            printHelp();
-            process.exit(0);
-        }
-        throw new Error(`Unknown argument: ${argument}`);
-    }
-    return {
-        projectRoot,
-        port,
-        appDirs: appDirs.length > 0 ? appDirs : undefined,
-    };
-}
-function parseDevArgs(args) {
-    let projectRoot = process.cwd();
-    let port = 4321;
-    let viewerDir = "";
-    const appDirs = [];
-    for (let index = 0; index < args.length; index += 1) {
-        const argument = args[index];
-        if (argument === "--project-root" && args[index + 1]) {
-            projectRoot = path.resolve(args[index + 1]);
-            index += 1;
-            continue;
-        }
-        if (argument === "--port" && args[index + 1]) {
-            port = Number(args[index + 1]);
-            if (!Number.isInteger(port) || port <= 0) {
-                throw new Error(`Invalid port: ${args[index + 1]}`);
-            }
-            index += 1;
-            continue;
-        }
-        if (argument === "--viewer-dir" && args[index + 1]) {
-            viewerDir = path.resolve(args[index + 1]);
-            index += 1;
-            continue;
-        }
-        if (argument === "--app-dir" && args[index + 1]) {
-            appDirs.push(args[index + 1]);
-            index += 1;
-            continue;
-        }
-        if (argument === "--help" || argument === "-h") {
-            printHelp();
-            process.exit(0);
-        }
-        throw new Error(`Unknown argument: ${argument}`);
-    }
-    if (!viewerDir) {
-        // Try to find the viewer relative to the analyzer package
-        const packageDir = path.dirname(path.dirname(new URL(import.meta.url).pathname));
-        const builtinViewer = path.join(packageDir, "viewer");
-        if (fs.existsSync(path.join(builtinViewer, "package.json"))) {
-            viewerDir = builtinViewer;
-        }
-        if (!viewerDir) {
-            throw new Error("Could not find viewer directory. Provide --viewer-dir <path> pointing to the viewer app.");
-        }
-    }
-    return {
-        projectRoot,
-        port,
-        viewerDir,
-        appDirs: appDirs.length > 0 ? appDirs : undefined,
-    };
-}
-function parseScreenshotArgs(args) {
-    let baseUrl = "";
-    let graphPath = "arch/graph.full.json";
-    let outDir = "arch/screenshots";
-    let paramsPath = "arch/screenshot-params.json";
-    let generateParams = false;
-    for (let index = 0; index < args.length; index += 1) {
-        const argument = args[index];
-        if (argument === "--base-url" && args[index + 1]) {
-            baseUrl = args[index + 1];
-            index += 1;
-            continue;
-        }
-        if (argument === "--graph" && args[index + 1]) {
-            graphPath = args[index + 1];
-            index += 1;
-            continue;
-        }
-        if (argument === "--out-dir" && args[index + 1]) {
-            outDir = args[index + 1];
-            index += 1;
-            continue;
-        }
-        if (argument === "--params" && args[index + 1]) {
-            paramsPath = args[index + 1];
-            index += 1;
-            continue;
-        }
-        if (argument === "--generate-params") {
-            generateParams = true;
-            continue;
-        }
-        if (argument === "--help" || argument === "-h") {
-            printHelp();
-            process.exit(0);
-        }
-        throw new Error(`Unknown argument: ${argument}`);
-    }
-    return { baseUrl, graphPath, outDir, paramsPath, generateParams };
-}
-function parseDescribeArgs(args) {
-    let graphPath = "arch/graph.full.json";
-    let outPath = "arch/describe-context.md";
-    let all = false;
-    for (let index = 0; index < args.length; index += 1) {
-        const argument = args[index];
-        if (argument === "--graph" && args[index + 1]) {
-            graphPath = args[index + 1];
-            index += 1;
-            continue;
-        }
-        if (argument === "--out" && args[index + 1]) {
-            outPath = args[index + 1];
-            index += 1;
-            continue;
-        }
-        if (argument === "--all") {
-            all = true;
-            continue;
-        }
-        if (argument === "--help" || argument === "-h") {
-            printHelp();
-            process.exit(0);
-        }
-        throw new Error(`Unknown argument: ${argument}`);
-    }
-    return { graphPath, outPath, all };
-}
 async function runDev(options) {
     const children = [];
     const cleanup = () => {
@@ -365,6 +293,9 @@ async function runDev(options) {
     // Keep the process alive
     await new Promise(() => { });
 }
+// ---------------------------------------------------------------------------
+// Output helpers
+// ---------------------------------------------------------------------------
 function logAnalyzeSummary(graph, outputFile, projectRoot) {
     const pageCount = graph.nodes.filter((node) => node.type === "page").length;
     const endpointCount = graph.nodes.filter((node) => node.type === "endpoint").length;

package/package.json

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

package/viewer/src/App.tsx

@@ -3,15 +3,17 @@ import * as Switch from "@radix-ui/react-switch";
 import { Filters } from "./Filters";
 import { GraphView } from "./GraphView";
 import { NodeDetails } from "./NodeDetails";
-import type { DiffStatus, EdgeKind, Graph, GraphDiff, Node, NodeType } from "./types";
-
-const ALL_NODE_TYPES: NodeType[] = [
-  "page",
-  "endpoint",
-  "handler",
-  "db",
-  "service",
-];
+import {
+  buildEdgeKey,
+  type DiffStatus,
+  type EdgeKind,
+  type Graph,
+  type GraphDiff,
+  type Node,
+  type NodeType,
+} from "./types";
+
+const ALL_NODE_TYPES: NodeType[] = ["page", "endpoint", "handler", "db", "service"];
 const ALL_EDGE_KINDS: EdgeKind[] = [
   "page-endpoint",
   "page-service",
@@ -20,7 +22,6 @@ const ALL_EDGE_KINDS: EdgeKind[] = [
   "db-relation",
 ];
 
-
 function isRecord(value: unknown): value is Record<string, unknown> {
   return !!value && typeof value === "object";
 }
@@ -48,10 +49,6 @@ function isGraphDiff(value: unknown): value is GraphDiff {
   );
 }
 
-function buildEdgeKey(from: string, to: string, kind: EdgeKind): string {
-  return `${from}::${to}::${kind}`;
-}
-
 export function App() {
   const [graph, setGraph] = useState<Graph | null>(null);
   const [graphDiff, setGraphDiff] = useState<GraphDiff | null>(null);
@@ -234,11 +231,8 @@ export function App() {
   const baseGraph = getRenderedGraph(graph, graphDiff);
   const pageRoutes = getPageRoutes(baseGraph);
   const renderedGraph =
-    focusedPageRoute && baseGraph
-      ? buildFocusedSubgraph(baseGraph, focusedPageRoute)
-      : baseGraph;
-  const selectedNode =
-    renderedGraph?.nodes.find((node) => node.id === selectedNodeId) ?? null;
+    focusedPageRoute && baseGraph ? buildFocusedSubgraph(baseGraph, focusedPageRoute) : baseGraph;
+  const selectedNode = renderedGraph?.nodes.find((node) => node.id === selectedNodeId) ?? null;
   const nodeStatusById = graphDiff ? buildNodeStatusById(graphDiff) : undefined;
   const edgeStatusByKey = graphDiff ? buildEdgeStatusByKey(graphDiff) : undefined;
 
@@ -263,12 +257,8 @@ export function App() {
         <div className="p-5 space-y-5">
           {/* Header */}
           <div>
-            <h1 className="text-base font-bold text-slate-900 tracking-tight">
-              next-arch-map
-            </h1>
-            <p className="text-[11px] text-slate-400 mt-0.5">
-              Architecture graph viewer
-            </p>
+            <h1 className="text-base font-bold text-slate-900 tracking-tight">next-arch-map</h1>
+            <p className="text-[11px] text-slate-400 mt-0.5">Architecture graph viewer</p>
           </div>
 
           {/* Status badge */}
@@ -280,11 +270,7 @@ export function App() {
               </span>
               <span className="text-xs text-slate-500">
                 {nodeCount} nodes, {edgeCount} edges
-                {graphDiff && (
-                  <span className="ml-1 text-emerald-600 font-medium">
-                    (diff)
-                  </span>
-                )}
+                {graphDiff && <span className="ml-1 text-emerald-600 font-medium">(diff)</span>}
               </span>
             </div>
           ) : loadError ? (
@@ -337,9 +323,7 @@ export function App() {
             )}
             {!useServer && (
               <div>
-                <label className="text-[11px] text-slate-500 block mb-1.5">
-                  Load graph JSON
-                </label>
+                <label className="text-[11px] text-slate-500 block mb-1.5">Load graph JSON</label>
                 <input
                   type="file"
                   accept="application/json,.json"
@@ -404,9 +388,7 @@ export function App() {
                 {isQueryLoading ? "Loading..." : "Query"}
               </button>
 
-              {queryError && (
-                <div className="text-xs text-red-600">{queryError}</div>
-              )}
+              {queryError && <div className="text-xs text-red-600">{queryError}</div>}
 
               {queryResult && (
                 <div className="text-xs text-slate-600">
@@ -443,8 +425,18 @@ export function App() {
           <div className="h-full flex items-center justify-center">
             <div className="text-center space-y-3">
               <div className="text-4xl opacity-20">
-                <svg className="mx-auto h-12 w-12 text-slate-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" />
+                <svg
+                  className="mx-auto h-12 w-12 text-slate-300"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={1.5}
+                    d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"
+                  />
                 </svg>
               </div>
               <p className="text-sm text-slate-400">

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",
+  action: "bg-purple-500",
   service: "bg-violet-600",
 };
 
@@ -38,10 +39,7 @@ export function Filters(props: FiltersProps) {
         </h3>
         <div className="space-y-1.5">
           {allNodeTypes.map((type) => (
-            <label
-              key={type}
-              className="flex items-center gap-2 cursor-pointer group"
-            >
+            <label key={type} className="flex items-center gap-2 cursor-pointer group">
               <Checkbox.Root
                 checked={visibleNodeTypes.has(type)}
                 onCheckedChange={() => onToggleNodeType(type)}
@@ -59,9 +57,7 @@ export function Filters(props: FiltersProps) {
                   </svg>
                 </Checkbox.Indicator>
               </Checkbox.Root>
-              <span
-                className={`h-2.5 w-2.5 rounded-full ${NODE_TYPE_COLORS[type]}`}
-              />
+              <span className={`h-2.5 w-2.5 rounded-full ${NODE_TYPE_COLORS[type]}`} />
               <span className="text-xs text-slate-600 group-hover:text-slate-900 transition-colors">
                 {type}
               </span>
@@ -77,10 +73,7 @@ export function Filters(props: FiltersProps) {
           </h3>
           <div className="space-y-1.5">
             {allEdgeKinds.map((kind) => (
-              <label
-                key={kind}
-                className="flex items-center gap-2 cursor-pointer group"
-              >
+              <label key={kind} className="flex items-center gap-2 cursor-pointer group">
                 <Checkbox.Root
                   checked={visibleEdgeKinds.has(kind)}
                   onCheckedChange={() => onToggleEdgeKind(kind)}

package/viewer/src/GraphView.tsx

@@ -13,7 +13,7 @@ import {
   type NodeProps,
 } from "@xyflow/react";
 import "@xyflow/react/dist/style.css";
-import type { DiffStatus, EdgeKind, Graph, NodeType } from "./types";
+import { buildEdgeKey, type DiffStatus, type EdgeKind, type Graph, type NodeType } from "./types";
 
 type GraphViewProps = {
   graph: Graph;
@@ -30,6 +30,7 @@ const NODE_COLOR: Record<NodeType, string> = {
   endpoint: "#059669",
   db: "#dc2626",
   handler: "#14b8a6",
+  action: "#8b5cf6",
   service: "#7c3aed",
 };
 
@@ -46,19 +47,17 @@ const EDGE_COLOR: Record<EdgeKind, string> = {
 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",
 };
 
-function buildEdgeKey(from: string, to: string, kind: EdgeKind): string {
-  return `${from}::${to}::${kind}`;
-}
-
 /**
  * Reorder nodes within each column so that connected nodes are placed
  * close together vertically, minimizing long diagonal edge crossings.
@@ -156,9 +155,7 @@ function PageNode({ data }: NodeProps) {
   return (
     <div>
       <Handle type="target" position={Position.Left} style={{ visibility: "hidden" }} />
-      <div style={{ fontSize: 12, fontWeight: 600 }}>
-        {String(d.label ?? "")}
-      </div>
+      <div style={{ fontSize: 12, fontWeight: 600 }}>{String(d.label ?? "")}</div>
       {description && <DescriptionLine text={description} />}
       {screenshot && (
         <img
@@ -240,9 +237,7 @@ function DbTableNode({ data }: NodeProps) {
               U
             </span>
           )}
-          {!col.isId && !col.isUnique && (
-            <span style={{ width: 12, display: "inline-block" }} />
-          )}
+          {!col.isId && !col.isUnique && <span style={{ width: 12, display: "inline-block" }} />}
           <span style={{ fontWeight: 500, flex: 1 }}>{col.name}</span>
           <span
             style={{
@@ -280,9 +275,7 @@ function DescribedNode({ data }: NodeProps) {
   return (
     <div>
       <Handle type="target" position={Position.Left} style={{ visibility: "hidden" }} />
-      <div style={{ fontSize: 12, fontWeight: 600 }}>
-        {String(d.label ?? "")}
-      </div>
+      <div style={{ fontSize: 12, fontWeight: 600 }}>{String(d.label ?? "")}</div>
       {description && <DescriptionLine text={description} dark={dark} />}
       <Handle type="source" position={Position.Right} style={{ visibility: "hidden" }} />
     </div>
@@ -332,9 +325,7 @@ export function GraphView(props: GraphViewProps) {
     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>(
-      typeOrder.map((type) => [type, []]),
-    );
+    const nodesByType = new Map<NodeType, typeof visibleNodes>(typeOrder.map((type) => [type, []]));
 
     for (const node of visibleNodes) {
       nodesByType.get(node.type)?.push(node);
@@ -350,9 +341,7 @@ export function GraphView(props: GraphViewProps) {
     const flowNodes: FlowNode[] = [];
     const columnWidth = 300;
     const defaultRowHeight = 80;
-    const hasScreenshots = graph.nodes.some(
-      (n) => n.type === "page" && n.meta?.screenshot,
-    );
+    const hasScreenshots = graph.nodes.some((n) => n.type === "page" && n.meta?.screenshot);
     const pageRowHeight = hasScreenshots ? 140 : defaultRowHeight;
 
     // Compute max db column count for row height
@@ -361,11 +350,13 @@ export function GraphView(props: GraphViewProps) {
       const cols = Array.isArray(n.meta?.columns) ? (n.meta?.columns as unknown[]).length : 0;
       return Math.max(max, cols);
     }, 0);
-    const dbRowHeight = maxDbColumns > 0 ? Math.max(defaultRowHeight, 30 + maxDbColumns * 22) : defaultRowHeight;
+    const dbRowHeight =
+      maxDbColumns > 0 ? Math.max(defaultRowHeight, 30 + maxDbColumns * 22) : defaultRowHeight;
 
     activeTypeOrder.forEach((type, columnIndex) => {
       const nodes = nodesByType.get(type) ?? [];
-      const rowHeight = type === "page" ? pageRowHeight : type === "db" ? dbRowHeight : defaultRowHeight;
+      const rowHeight =
+        type === "page" ? pageRowHeight : type === "db" ? dbRowHeight : defaultRowHeight;
       nodes.forEach((node, rowIndex) => {
         const isSelected = node.id === selectedNodeId;
         const status = nodeStatusById?.get(node.id) ?? "unchanged";
@@ -375,7 +366,10 @@ export function GraphView(props: GraphViewProps) {
         const screenshot = isPage ? (node.meta?.screenshot as string | undefined) : undefined;
         const description = node.meta?.description as string | undefined;
         const isDarkText = false;
-        const isDbTable = node.type === "db" && Array.isArray(node.meta?.columns) && (node.meta?.columns as unknown[]).length > 0;
+        const isDbTable =
+          node.type === "db" &&
+          Array.isArray(node.meta?.columns) &&
+          (node.meta?.columns as unknown[]).length > 0;
         const dbColumns = isDbTable ? (node.meta?.columns as DbColumn[]) : undefined;
 
         const nodeType = isDbTable
@@ -451,8 +445,10 @@ export function GraphView(props: GraphViewProps) {
           visibleNodeIds.has(edge.to),
       )
       .map((edge, index) => {
-        const status = edgeStatusByKey?.get(buildEdgeKey(edge.from, edge.to, edge.kind)) ?? "unchanged";
-        const strokeColor = status === "unchanged" ? EDGE_COLOR[edge.kind] : DIFF_EDGE_COLOR[status];
+        const status =
+          edgeStatusByKey?.get(buildEdgeKey(edge.from, edge.to, edge.kind)) ?? "unchanged";
+        const strokeColor =
+          status === "unchanged" ? EDGE_COLOR[edge.kind] : DIFF_EDGE_COLOR[status];
 
         return {
           id: `${edge.from}=>${edge.to}::${edge.kind}::${index}`,
@@ -474,14 +470,7 @@ export function GraphView(props: GraphViewProps) {
       });
 
     return { flowNodes, flowEdges };
-  }, [
-    edgeStatusByKey,
-    graph,
-    nodeStatusById,
-    selectedNodeId,
-    visibleEdgeKinds,
-    visibleNodeTypes,
-  ]);
+  }, [edgeStatusByKey, graph, nodeStatusById, selectedNodeId, visibleEdgeKinds, visibleNodeTypes]);
 
   // Apply hover highlighting as a cheap pass over precomputed nodes/edges
   const activeNodeId = hoveredNodeId ?? selectedNodeId;

package/viewer/src/NodeDetails.tsx

@@ -9,15 +9,14 @@ const TYPE_BADGE_COLORS: Record<NodeType, string> = {
   endpoint: "bg-emerald-100 text-emerald-700",
   handler: "bg-teal-100 text-teal-700",
   db: "bg-red-100 text-red-700",
+  action: "bg-purple-100 text-purple-700",
   service: "bg-violet-100 text-violet-700",
 };
 
 export function NodeDetails({ node }: NodeDetailsProps) {
   if (!node) {
     return (
-      <div className="mt-5 py-4 text-center text-xs text-slate-400">
-        Click a node to inspect
-      </div>
+      <div className="mt-5 py-4 text-center text-xs text-slate-400">Click a node to inspect</div>
     );
   }
 
@@ -36,14 +35,10 @@ export function NodeDetails({ node }: NodeDetailsProps) {
           >
             {node.type}
           </span>
-          <span className="text-sm font-medium text-slate-900 truncate">
-            {node.label}
-          </span>
+          <span className="text-sm font-medium text-slate-900 truncate">{node.label}</span>
         </div>
 
-        <div className="text-[11px] text-slate-500 font-mono break-all">
-          {node.id}
-        </div>
+        <div className="text-[11px] text-slate-500 font-mono break-all">{node.id}</div>
 
         {(node.meta?.descriptionLong ?? node.meta?.description) ? (
           <p className="text-xs text-slate-600 leading-relaxed">
@@ -73,7 +68,8 @@ export function NodeDetails({ node }: NodeDetailsProps) {
             {JSON.stringify(
               Object.fromEntries(
                 Object.entries(node.meta).filter(
-                  ([key]) => key !== "screenshot" && key !== "description" && key !== "descriptionLong",
+                  ([key]) =>
+                    key !== "screenshot" && key !== "description" && key !== "descriptionLong",
                 ),
               ),
               null,

package/viewer/src/types.ts

@@ -1,9 +1,6 @@
-export type NodeType =
-  | "page"
-  | "endpoint"
-  | "db"
-  | "handler"
-  | "service";
+// Keep in sync with src/model.ts and src/diff.ts (the backend is the source of truth).
+
+export type NodeType = "page" | "endpoint" | "db" | "handler" | "action" | "service";
 
 export type Node = {
   id: string;
@@ -33,7 +30,7 @@ export type Graph = {
   edges: Edge[];
 };
 
-export type DiffStatus = "added" | "removed" | "unchanged";
+export type DiffStatus = "added" | "removed" | "modified" | "unchanged";
 
 export type NodeDiff = {
   node: Node;
@@ -49,3 +46,7 @@ export type GraphDiff = {
   nodes: NodeDiff[];
   edges: EdgeDiff[];
 };
+
+export function buildEdgeKey(from: string, to: string, kind: EdgeKind): string {
+  return `${from}::${to}::${kind}`;
+}