archtracker-mcp 0.4.3 → 0.5.0

package/dist/cli/index.js

@@ -3,8 +3,8 @@
 // src/cli/index.ts
 import { Command } from "commander";
 import { watch } from "fs";
-import { writeFile as writeFile2, mkdir as mkdir2 } from "fs/promises";
-import { join as join6 } from "path";
+import { writeFile as writeFile3, mkdir as mkdir3 } from "fs/promises";
+import { join as join8 } from "path";
 
 // src/analyzer/analyze.ts
 import { resolve as resolve3 } from "path";
@@ -1088,6 +1088,13 @@ var java = {
         if (projectFiles.has(full)) return full;
       }
     }
+    for (let i = 1; i < segments.length; i++) {
+      const filePath = segments.slice(i).join("/") + ".java";
+      for (const srcRoot of ["", "src/main/java/", "src/", "app/src/main/java/"]) {
+        const full = join3(rootDir, srcRoot, filePath);
+        if (projectFiles.has(full)) return full;
+      }
+    }
     return null;
   },
   defaultExclude: ["build", "target", "\\.gradle", "\\.idea"]
@@ -1142,12 +1149,18 @@ var php = {
   importPatterns: [
     // require/include/require_once/include_once 'path'
     { regex: /\b(?:require|include)(?:_once)?\s+['"]([^'"]+)['"]/gm },
+    // require_once __DIR__ . '/path' (common PHP pattern)
+    { regex: /\b(?:require|include)(?:_once)?\s+__DIR__\s*\.\s*['"]([^'"]+)['"]/gm },
     // Bug #9 fix: use Namespace\Class — skip `function` and `const` keywords
     { regex: /^use\s+(?:function\s+|const\s+)?([\w\\]+)/gm }
   ],
   resolveImport(importPath, sourceFile, rootDir, projectFiles) {
-    if (importPath.includes("/") || importPath.endsWith(".php")) {
-      const withExt = importPath.endsWith(".php") ? importPath : importPath + ".php";
+    let normalizedPath = importPath;
+    if (normalizedPath.startsWith("/")) {
+      normalizedPath = normalizedPath.slice(1);
+    }
+    if (normalizedPath.includes("/") || normalizedPath.endsWith(".php")) {
+      const withExt = normalizedPath.endsWith(".php") ? normalizedPath : normalizedPath + ".php";
       const fromSource = resolve2(dirname(sourceFile), withExt);
       if (projectFiles.has(fromSource)) return fromSource;
       const fromRoot2 = join3(rootDir, withExt);
@@ -1163,15 +1176,46 @@ var php = {
   },
   defaultExclude: ["vendor"]
 };
+var SWIFT_SKIP_FILES = /* @__PURE__ */ new Set(["Package", "main", "AppDelegate", "SceneDelegate"]);
 var swift = {
   id: "swift",
   extensions: [".swift"],
   commentStyle: "c-style",
-  importPatterns: [
-    // Bug #10 fix: import ModuleName and @testable import ModuleName
-    { regex: /^(?:@testable\s+)?import\s+(?:class\s+|struct\s+|enum\s+|protocol\s+|func\s+|var\s+|let\s+|typealias\s+)?(\w+)/gm }
-  ],
-  resolveImport(importPath, sourceFile, rootDir, projectFiles) {
+  importPatterns: [],
+  // handled by extractImports
+  extractImports(content, filePath, _rootDir, projectFiles) {
+    const imports = [];
+    const moduleRegex = /^(?:@testable\s+)?import\s+(?:class\s+|struct\s+|enum\s+|protocol\s+|func\s+|var\s+|let\s+|typealias\s+)?(\w+)/gm;
+    let match;
+    while ((match = moduleRegex.exec(content)) !== null) {
+      imports.push(match[1]);
+    }
+    const typeMap = /* @__PURE__ */ new Map();
+    for (const f of projectFiles) {
+      if (f === filePath || !f.endsWith(".swift")) continue;
+      const basename = f.split("/").pop().replace(/\.swift$/, "");
+      if (!basename || SWIFT_SKIP_FILES.has(basename)) continue;
+      typeMap.set(basename, f);
+    }
+    if (typeMap.size > 0) {
+      const escaped = [...typeMap.keys()].map(
+        (n) => n.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")
+      );
+      const combined = new RegExp(`\\b(${escaped.join("|")})\\b`, "g");
+      const matched = /* @__PURE__ */ new Set();
+      while ((match = combined.exec(content)) !== null) {
+        const typeName = match[1];
+        const targetPath = typeMap.get(typeName);
+        if (targetPath && !matched.has(targetPath)) {
+          matched.add(targetPath);
+          imports.push(targetPath);
+        }
+      }
+    }
+    return imports;
+  },
+  resolveImport(importPath, _sourceFile, rootDir, projectFiles) {
+    if (projectFiles.has(importPath)) return importPath;
     const spmDir = join3(rootDir, "Sources", importPath);
     for (const f of projectFiles) {
       if (f.startsWith(spmDir + "/") && f.endsWith(".swift")) return f;
@@ -1196,7 +1240,8 @@ var kotlin = {
     if (cleanPath.endsWith(".")) {
       cleanPath = cleanPath.slice(0, -1);
     }
-    const filePath = cleanPath.replace(/\./g, "/");
+    const segments = cleanPath.split(".");
+    const filePath = segments.join("/");
     for (const ext of [".kt", ".kts"]) {
       for (const srcRoot of [
         "",
@@ -1210,6 +1255,22 @@ var kotlin = {
         if (projectFiles.has(full)) return full;
       }
     }
+    for (let i = 1; i < segments.length; i++) {
+      const suffixPath = segments.slice(i).join("/");
+      for (const ext of [".kt", ".kts"]) {
+        for (const srcRoot of [
+          "",
+          "src/main/kotlin/",
+          "src/main/java/",
+          "src/",
+          "app/src/main/kotlin/",
+          "app/src/main/java/"
+        ]) {
+          const full = join3(rootDir, srcRoot, suffixPath + ext);
+          if (projectFiles.has(full)) return full;
+        }
+      }
+    }
     return null;
   },
   defaultExclude: ["build", "\\.gradle", "\\.idea"]
@@ -1295,8 +1356,10 @@ var dart = {
       const prefix = `package:${ownPackage}/`;
       if (!importPath.startsWith(prefix)) return null;
       const relPath = importPath.slice(prefix.length);
-      const full = join3(rootDir, "lib", relPath);
-      if (projectFiles.has(full)) return full;
+      const libPath = join3(rootDir, "lib", relPath);
+      if (projectFiles.has(libPath)) return libPath;
+      const rootPath = join3(rootDir, relPath);
+      if (projectFiles.has(rootPath)) return rootPath;
       return null;
     }
     const resolved = resolve2(dirname(sourceFile), importPath);
@@ -1359,6 +1422,15 @@ var scala = {
         }
       }
     }
+    for (let i = 1; i < segments.length; i++) {
+      const suffixPath = segments.slice(i).join("/");
+      for (const ext of [".scala", ".sc"]) {
+        for (const srcRoot of ["", "src/main/scala/", "src/", "app/"]) {
+          const full = join3(rootDir, srcRoot, suffixPath + ext);
+          if (projectFiles.has(full)) return full;
+        }
+      }
+    }
     return null;
   },
   defaultExclude: ["target", "\\.bsp", "\\.metals", "\\.bloop"]
@@ -1546,6 +1618,11 @@ var en = {
   "analyze.snapshotSaved": "\nSnapshot saved alongside analysis.",
   // CI
   "ci.generated": "GitHub Actions workflow generated: {path}",
+  // Layers
+  "layers.alreadyExists": "layers.json already exists. Edit it manually to modify.",
+  "layers.created": "Created .archtracker/layers.json \u2014 edit it to configure your layers.",
+  "layers.notFound": "No .archtracker/layers.json found. Run 'archtracker layers init' to create one.",
+  "layers.header": "Configured layers ({count}):",
   // Web viewer
   "web.starting": "Starting architecture viewer...",
   "web.listening": "Architecture graph available at: http://localhost:{port}",
@@ -1634,6 +1711,11 @@ var ja = {
   "analyze.snapshotSaved": "\n\u5206\u6790\u3068\u540C\u6642\u306B\u30B9\u30CA\u30C3\u30D7\u30B7\u30E7\u30C3\u30C8\u3092\u4FDD\u5B58\u3057\u307E\u3057\u305F\u3002",
   // CI
   "ci.generated": "GitHub Actions \u30EF\u30FC\u30AF\u30D5\u30ED\u30FC\u3092\u751F\u6210\u3057\u307E\u3057\u305F: {path}",
+  // Layers
+  "layers.alreadyExists": "layers.json \u306F\u65E2\u306B\u5B58\u5728\u3057\u307E\u3059\u3002\u76F4\u63A5\u7DE8\u96C6\u3057\u3066\u304F\u3060\u3055\u3044\u3002",
+  "layers.created": ".archtracker/layers.json \u3092\u4F5C\u6210\u3057\u307E\u3057\u305F\u3002\u30EC\u30A4\u30E4\u30FC\u3092\u8A2D\u5B9A\u3057\u3066\u304F\u3060\u3055\u3044\u3002",
+  "layers.notFound": ".archtracker/layers.json \u304C\u898B\u3064\u304B\u308A\u307E\u305B\u3093\u3002'archtracker layers init' \u3067\u4F5C\u6210\u3057\u3066\u304F\u3060\u3055\u3044\u3002",
+  "layers.header": "\u8A2D\u5B9A\u6E08\u307F\u30EC\u30A4\u30E4\u30FC ({count}\u4EF6):",
   // Web viewer
   "web.starting": "\u30A2\u30FC\u30AD\u30C6\u30AF\u30C1\u30E3\u30D3\u30E5\u30FC\u30A2\u30FC\u3092\u8D77\u52D5\u4E2D...",
   "web.listening": "\u30A2\u30FC\u30AD\u30C6\u30AF\u30C1\u30E3\u30B0\u30E9\u30D5: http://localhost:{port}",
@@ -1710,13 +1792,396 @@ function formatAnalysisReport(graph, options = {}) {
   return lines.join("\n");
 }
 
+// src/analyzer/multi-layer.ts
+import { resolve as resolve4, join as join4 } from "path";
+import { readFileSync as readFileSync2 } from "fs";
+var LAYER_COLORS = [
+  "#58a6ff",
+  "#3fb950",
+  "#d2a8ff",
+  "#f0883e",
+  "#79c0ff",
+  "#56d4dd",
+  "#db61a2",
+  "#f778ba",
+  "#ffa657",
+  "#7ee787"
+];
+async function analyzeMultiLayer(projectRoot, layerDefs) {
+  const layers = {};
+  const layerMetadata = [];
+  for (let idx = 0; idx < layerDefs.length; idx++) {
+    const def = layerDefs[idx];
+    const targetDir = resolve4(projectRoot, def.targetDir);
+    const graph = await analyzeProject(targetDir, {
+      exclude: def.exclude,
+      language: def.language
+    });
+    const language = def.language ?? await detectLanguage(targetDir) ?? "javascript";
+    layers[def.name] = graph;
+    layerMetadata.push({
+      name: def.name,
+      originalRootDir: graph.rootDir,
+      language,
+      color: def.color ?? LAYER_COLORS[idx % LAYER_COLORS.length],
+      description: def.description,
+      fileCount: graph.totalFiles,
+      edgeCount: graph.totalEdges
+    });
+  }
+  const merged = mergeLayerGraphs(projectRoot, layers);
+  return { layers, layerMetadata, merged };
+}
+function detectCrossLayerConnections(layers, layerDefs) {
+  const MIN_NAME_LENGTH = 6;
+  const MIN_SCORE_THRESHOLD = 10;
+  const layerIdentifiers = /* @__PURE__ */ new Map();
+  for (const [layerName, graph] of Object.entries(layers)) {
+    const identifiers = /* @__PURE__ */ new Map();
+    for (const filePath of Object.keys(graph.files)) {
+      const basename = filePath.split("/").pop();
+      const nameNoExt = basename.replace(/\.[^.]+$/, "");
+      if (nameNoExt.length < MIN_NAME_LENGTH || GENERIC_BASENAMES.has(nameNoExt.toLowerCase())) continue;
+      identifiers.set(nameNoExt, filePath);
+    }
+    layerIdentifiers.set(layerName, identifiers);
+  }
+  const nameLayerCount = /* @__PURE__ */ new Map();
+  for (const [, ids] of layerIdentifiers) {
+    for (const name of ids.keys()) {
+      nameLayerCount.set(name, (nameLayerCount.get(name) ?? 0) + 1);
+    }
+  }
+  const pairBest = /* @__PURE__ */ new Map();
+  function tryAdd(pairKey, conn, score) {
+    if (score < MIN_SCORE_THRESHOLD) return;
+    const existing = pairBest.get(pairKey);
+    if (!existing || score > existing.score) {
+      pairBest.set(pairKey, { conn, score });
+    }
+  }
+  function isSelfDefined(content, name) {
+    const defPatterns = [
+      new RegExp(`\\b(?:class|struct|enum|interface|protocol|type|object)\\s+${escapeRegex(name)}\\b`),
+      new RegExp(`\\b(?:def|func|fun|fn)\\s+${escapeRegex(name)}\\b`),
+      new RegExp(`\\b${escapeRegex(name)}\\s*=\\s*(?:class|struct|type|interface)\\b`)
+    ];
+    return defPatterns.some((re) => re.test(content));
+  }
+  function isLocalImportOnly(content, name) {
+    const regex = new RegExp(`\\b${escapeRegex(name)}\\b`, "g");
+    const lines = content.split("\n");
+    let crossLayerRef = false;
+    for (const line of lines) {
+      if (!regex.test(line)) continue;
+      regex.lastIndex = 0;
+      const isLocalImport = /^\s*(?:from\s+[.'"]|import\s+[.'"]|require\s*\(\s*['"][.\/]|#include\s*")/.test(line);
+      if (!isLocalImport) {
+        crossLayerRef = true;
+        break;
+      }
+    }
+    return !crossLayerRef;
+  }
+  for (const [sourceLayer, graph] of Object.entries(layers)) {
+    const ownNames = layerIdentifiers.get(sourceLayer) ?? /* @__PURE__ */ new Map();
+    for (const filePath of Object.keys(graph.files)) {
+      const absPath = join4(graph.rootDir, filePath);
+      let content;
+      try {
+        content = readFileSync2(absPath, "utf-8");
+      } catch {
+        continue;
+      }
+      for (const [targetLayer, targetIds] of layerIdentifiers) {
+        if (targetLayer === sourceLayer) continue;
+        for (const [targetName, targetFile] of targetIds) {
+          if (ownNames.has(targetName)) continue;
+          if ((nameLayerCount.get(targetName) ?? 0) > 1) continue;
+          if (!content.includes(targetName)) continue;
+          const regex = new RegExp(`\\b${escapeRegex(targetName)}\\b`);
+          if (!regex.test(content)) continue;
+          if (isSelfDefined(content, targetName)) continue;
+          if (isLocalImportOnly(content, targetName)) continue;
+          const pairKey = `${sourceLayer}\u2192${targetLayer}`;
+          const isPascalCase = /^[A-Z][a-z]/.test(targetName);
+          const baseScore = targetName.length + (isPascalCase ? 5 : 0);
+          tryAdd(pairKey, {
+            fromLayer: sourceLayer,
+            fromFile: filePath,
+            toLayer: targetLayer,
+            toFile: targetFile,
+            type: "auto",
+            label: targetName
+          }, baseScore);
+        }
+      }
+      for (const def of layerDefs) {
+        if (def.name === sourceLayer) continue;
+        const pairKey = `${sourceLayer}\u2192${def.name}`;
+        const layerName = def.name;
+        const suffixes = ["Client", "Service", "API", "Handler", "Provider", "Manager", "Gateway", "Proxy", "Adapter", "Connector"];
+        const typedRe = new RegExp(`\\b${escapeRegex(layerName)}(?:${suffixes.join("|")})\\b`);
+        if (typedRe.test(content)) {
+          const targetGraph = layers[def.name];
+          if (!targetGraph) continue;
+          const entryFile = findEntryPoint(targetGraph);
+          if (entryFile) {
+            tryAdd(pairKey, {
+              fromLayer: sourceLayer,
+              fromFile: filePath,
+              toLayer: def.name,
+              toFile: entryFile,
+              type: "auto",
+              label: `${layerName}*`
+            }, 25);
+          }
+        }
+      }
+      for (const def of layerDefs) {
+        if (def.name === sourceLayer) continue;
+        const pairKey = `${sourceLayer}\u2192${def.name}`;
+        const dirName = def.targetDir.split("/").pop();
+        const isShortName = dirName.length <= 4;
+        const patterns = [];
+        if (!isShortName) {
+          patterns.push({ re: new RegExp(`(?:from|require|import)\\s+['"].*\\b${escapeRegex(dirName)}\\b`, "i"), score: 15 });
+          patterns.push({ re: new RegExp(`['"\`/]${escapeRegex(dirName)}/[\\w]`, "i"), score: 12 });
+        } else {
+          patterns.push({ re: new RegExp(`(?:from|require|import)\\s+['"].*/${escapeRegex(dirName)}/`, "i"), score: 13 });
+          patterns.push({ re: new RegExp(`['"\`]\\s*(?:https?://[^'"]*)?/${escapeRegex(dirName)}/[\\w]`, "i"), score: 11 });
+        }
+        for (const { re, score } of patterns) {
+          if (re.test(content)) {
+            const targetGraph = layers[def.name];
+            if (!targetGraph) continue;
+            const entryFile = findEntryPoint(targetGraph);
+            if (entryFile) {
+              tryAdd(pairKey, {
+                fromLayer: sourceLayer,
+                fromFile: filePath,
+                toLayer: def.name,
+                toFile: entryFile,
+                type: "auto",
+                label: `\u2192 ${def.name}`
+              }, score);
+            }
+            break;
+          }
+        }
+      }
+    }
+  }
+  return [...pairBest.values()].map((v) => v.conn);
+}
+function escapeRegex(s) {
+  return s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+function findEntryPoint(graph) {
+  const files = Object.values(graph.files);
+  if (files.length === 0) return null;
+  const sorted = files.sort((a, b) => b.dependents.length - a.dependents.length);
+  if (sorted[0].dependents.length > 0) return sorted[0].path;
+  const entryNames = ["main", "index", "app", "server", "lib", "mod"];
+  for (const name of entryNames) {
+    const entry = files.find((f) => {
+      const basename = f.path.split("/").pop().replace(/\.[^.]+$/, "").toLowerCase();
+      return basename === name;
+    });
+    if (entry) return entry.path;
+  }
+  return files[0].path;
+}
+var GENERIC_BASENAMES = /* @__PURE__ */ new Set([
+  // Build / project structure
+  "index",
+  "main",
+  "app",
+  "config",
+  "setup",
+  "init",
+  "mod",
+  "package",
+  "build",
+  "makefile",
+  "dockerfile",
+  "rakefile",
+  "gemfile",
+  "podfile",
+  // Common modules
+  "utils",
+  "helpers",
+  "types",
+  "models",
+  "views",
+  "controllers",
+  "services",
+  "lib",
+  "src",
+  "test",
+  "spec",
+  "tests",
+  "bench",
+  "example",
+  "examples",
+  // Infrastructure / patterns
+  "server",
+  "client",
+  "routes",
+  "middleware",
+  "database",
+  "engine",
+  "error",
+  "errors",
+  "logger",
+  "logging",
+  "constants",
+  "common",
+  "base",
+  "core",
+  "data",
+  "manager",
+  "handler",
+  "factory",
+  "context",
+  "state",
+  "store",
+  "cache",
+  "queue",
+  "task",
+  "worker",
+  "adapter",
+  "bridge",
+  // UI / presentation
+  "event",
+  "events",
+  "model",
+  "view",
+  "home",
+  "user",
+  "page",
+  "layout",
+  "router",
+  "provider",
+  "component",
+  "widget",
+  "screen",
+  "template",
+  "header",
+  "footer",
+  "sidebar",
+  "navbar",
+  "dialog",
+  "modal",
+  "panel",
+  // Data / IO
+  "reader",
+  "writer",
+  "parser",
+  "formatter",
+  "serializer",
+  "converter",
+  "loader",
+  "exporter",
+  "importer",
+  "transformer",
+  "mapper",
+  "reducer",
+  "filter",
+  "sorter",
+  "validator",
+  "checker",
+  "scanner",
+  "analyzer",
+  // Auth / Security (generic enough to exist in many layers)
+  "login",
+  "register",
+  "verify",
+  "token",
+  "session",
+  "credential",
+  "password",
+  "permission",
+  "profile",
+  "account",
+  "settings",
+  // Network / API
+  "request",
+  "response",
+  "endpoint",
+  "controller",
+  "service",
+  "gateway",
+  "proxy",
+  "connector",
+  "socket",
+  "channel",
+  "stream",
+  "pipeline",
+  // Storage / DB
+  "schema",
+  "migration",
+  "seed",
+  "fixture",
+  "record",
+  "entity",
+  "repository",
+  "storage",
+  "driver",
+  "connection",
+  "pool",
+  // Testing
+  "mock",
+  "stub",
+  "fake",
+  "helper",
+  "fixture",
+  "factory"
+]);
+function mergeLayerGraphs(projectRoot, layers) {
+  const mergedFiles = {};
+  const mergedEdges = [];
+  const mergedCircular = [];
+  for (const [layerName, graph] of Object.entries(layers)) {
+    for (const [origPath, node] of Object.entries(graph.files)) {
+      const prefixedPath = `${layerName}/${origPath}`;
+      mergedFiles[prefixedPath] = {
+        path: prefixedPath,
+        exists: node.exists,
+        dependencies: node.dependencies.map((d) => `${layerName}/${d}`),
+        dependents: node.dependents.map((d) => `${layerName}/${d}`)
+      };
+    }
+    for (const edge of graph.edges) {
+      mergedEdges.push({
+        source: `${layerName}/${edge.source}`,
+        target: `${layerName}/${edge.target}`,
+        type: edge.type
+      });
+    }
+    for (const circ of graph.circularDependencies) {
+      mergedCircular.push({
+        cycle: circ.cycle.map((f) => `${layerName}/${f}`)
+      });
+    }
+  }
+  return {
+    rootDir: resolve4(projectRoot),
+    files: mergedFiles,
+    edges: mergedEdges,
+    circularDependencies: mergedCircular,
+    totalFiles: Object.keys(mergedFiles).length,
+    totalEdges: mergedEdges.length
+  };
+}
+
 // src/storage/snapshot.ts
 import { mkdir, writeFile, readFile as readFile2, access } from "fs/promises";
-import { join as join4 } from "path";
+import { join as join5 } from "path";
 import { z } from "zod";
 
 // src/types/schema.ts
-var SCHEMA_VERSION = "1.0";
+var SCHEMA_VERSION = "1.1";
 
 // src/storage/snapshot.ts
 var ARCHTRACKER_DIR = ".archtracker";
@@ -1740,26 +2205,27 @@ var DependencyGraphSchema = z.object({
   totalEdges: z.number()
 });
 var SnapshotSchema = z.object({
-  version: z.literal(SCHEMA_VERSION),
+  version: z.enum([SCHEMA_VERSION, "1.0"]),
   timestamp: z.string(),
   rootDir: z.string(),
   graph: DependencyGraphSchema
 });
-async function saveSnapshot(projectRoot, graph) {
-  const dirPath = join4(projectRoot, ARCHTRACKER_DIR);
-  const filePath = join4(dirPath, SNAPSHOT_FILE);
+async function saveSnapshot(projectRoot, graph, multiLayer) {
+  const dirPath = join5(projectRoot, ARCHTRACKER_DIR);
+  const filePath = join5(dirPath, SNAPSHOT_FILE);
   const snapshot = {
     version: SCHEMA_VERSION,
     timestamp: (/* @__PURE__ */ new Date()).toISOString(),
     rootDir: graph.rootDir,
-    graph
+    graph,
+    ...multiLayer ? { multiLayer } : {}
   };
   await mkdir(dirPath, { recursive: true });
   await writeFile(filePath, JSON.stringify(snapshot, null, 2), "utf-8");
   return snapshot;
 }
 async function loadSnapshot(projectRoot) {
-  const filePath = join4(projectRoot, ARCHTRACKER_DIR, SNAPSHOT_FILE);
+  const filePath = join5(projectRoot, ARCHTRACKER_DIR, SNAPSHOT_FILE);
   let raw;
   try {
     raw = await readFile2(filePath, "utf-8");
@@ -1896,6 +2362,77 @@ function arraysEqual(a, b) {
   return true;
 }
 
+// src/storage/layers.ts
+import { readFile as readFile3, writeFile as writeFile2, mkdir as mkdir2 } from "fs/promises";
+import { join as join6 } from "path";
+import { z as z2 } from "zod";
+var ARCHTRACKER_DIR2 = ".archtracker";
+var LAYERS_FILE = "layers.json";
+var LayerDefinitionSchema = z2.object({
+  name: z2.string().min(1).regex(
+    /^[a-zA-Z0-9_-]+$/,
+    "Layer name must be alphanumeric (hyphens/underscores allowed)"
+  ),
+  targetDir: z2.string().min(1),
+  language: z2.enum(LANGUAGE_IDS).optional(),
+  exclude: z2.array(z2.string()).optional(),
+  color: z2.string().optional(),
+  description: z2.string().optional()
+});
+var CrossLayerConnectionSchema = z2.object({
+  fromLayer: z2.string(),
+  fromFile: z2.string(),
+  toLayer: z2.string(),
+  toFile: z2.string(),
+  type: z2.enum(["api-call", "event", "data-flow", "manual"]),
+  label: z2.string().optional()
+});
+var LayerConfigSchema = z2.object({
+  version: z2.literal("1.0"),
+  layers: z2.array(LayerDefinitionSchema).min(1).refine(
+    (layers) => {
+      const names = layers.map((l) => l.name);
+      return new Set(names).size === names.length;
+    },
+    { message: "Layer names must be unique" }
+  ),
+  connections: z2.array(CrossLayerConnectionSchema).optional()
+});
+async function loadLayerConfig(projectRoot) {
+  const filePath = join6(projectRoot, ARCHTRACKER_DIR2, LAYERS_FILE);
+  let raw;
+  try {
+    raw = await readFile3(filePath, "utf-8");
+  } catch (error) {
+    if (isNodeError2(error) && error.code === "ENOENT") {
+      return null;
+    }
+    throw new Error(`Failed to read ${filePath}`);
+  }
+  let parsed;
+  try {
+    parsed = JSON.parse(raw);
+  } catch {
+    throw new Error(`Invalid JSON in ${filePath}`);
+  }
+  const result = LayerConfigSchema.safeParse(parsed);
+  if (!result.success) {
+    const issues = result.error.issues.map((i) => `  ${i.path.join(".")}: ${i.message}`).slice(0, 5).join("\n");
+    throw new Error(`layers.json validation failed:
+${issues}`);
+  }
+  return result.data;
+}
+async function saveLayerConfig(projectRoot, config) {
+  const dirPath = join6(projectRoot, ARCHTRACKER_DIR2);
+  const filePath = join6(dirPath, LAYERS_FILE);
+  await mkdir2(dirPath, { recursive: true });
+  await writeFile2(filePath, JSON.stringify(config, null, 2) + "\n", "utf-8");
+}
+function isNodeError2(error) {
+  return error instanceof Error && "code" in error;
+}
+
 // src/web/server.ts
 import { createServer } from "http";
 
@@ -1903,6 +2440,8 @@ import { createServer } from "http";
 function buildGraphPage(graph, options = {}) {
   const locale = options.locale ?? "en";
   const diff = options.diff ?? null;
+  const layers = options.layerMetadata ?? null;
+  const crossEdges = options.crossLayerEdges ?? null;
   const files = Object.values(graph.files);
   const nodes = files.map((f) => ({
     id: f.path,
@@ -1911,7 +2450,8 @@ function buildGraphPage(graph, options = {}) {
     dependencies: f.dependencies,
     dependentsList: f.dependents,
     isOrphan: f.dependencies.length === 0 && f.dependents.length === 0,
-    dir: f.path.includes("/") ? f.path.substring(0, f.path.lastIndexOf("/")) : "."
+    dir: f.path.includes("/") ? f.path.substring(0, f.path.lastIndexOf("/")) : ".",
+    layer: layers && f.path.includes("/") ? f.path.substring(0, f.path.indexOf("/")) : null
   }));
   const links = graph.edges.map((e) => ({
     source: e.source,
@@ -1925,6 +2465,8 @@ function buildGraphPage(graph, options = {}) {
   const dirs = [...new Set(nodes.map((n) => n.dir))].sort();
   const projectName = graph.rootDir.split("/").filter(Boolean).pop() || "Project";
   const diffData = diff ? JSON.stringify(diff) : "null";
+  const layersData = layers ? JSON.stringify(layers) : "null";
+  const crossEdgesData = crossEdges ? JSON.stringify(crossEdges) : "null";
   const graphData = JSON.stringify({ nodes, links, circularFiles: [...circularFiles], dirs, projectName });
   return (
     /* html */
@@ -1989,13 +2531,25 @@ kbd { background: #21262d; border: 1px solid var(--border); border-radius: 3px;
 #tooltip .tt-out { color: var(--accent); }
 #tooltip .tt-in { color: var(--green); }
 
-/* \u2500\u2500\u2500 Filters \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
-#filters { position: absolute; bottom: 12px; left: 12px; right: 120px; z-index: 10; display: flex; flex-wrap: wrap; gap: 5px; }
-.filter-pill { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 3px 10px; font-size: 11px; cursor: pointer; user-select: none; transition: all 0.15s; display: flex; align-items: center; gap: 5px; }
+/* \u2500\u2500\u2500 Filter bar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+#filter-bar { position: absolute; bottom: 12px; left: 12px; right: 120px; z-index: 10; display: flex; flex-direction: column; gap: 6px; pointer-events: none; }
+#filter-bar > * { pointer-events: auto; }
+#filter-layer-row { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
+#filter-dir-toggle { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 3px 10px; font-size: 11px; cursor: pointer; user-select: none; color: var(--text-dim); transition: all 0.15s; flex-shrink: 0; }
+#filter-dir-toggle:hover { border-color: var(--text-dim); color: var(--text); }
+#filter-dir-toggle.open { border-color: var(--accent); color: var(--text); }
+#filter-dir-panel { display: none; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; max-height: 220px; overflow-y: auto; backdrop-filter: blur(8px); }
+#filter-dir-panel.open { display: block; }
+.dir-group { margin-bottom: 8px; }
+.dir-group:last-child { margin-bottom: 0; }
+.dir-group-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; display: flex; align-items: center; gap: 5px; cursor: pointer; user-select: none; }
+.dir-group-label .dg-dot { width: 6px; height: 6px; border-radius: 50%; }
+.dir-group-pills { display: flex; flex-wrap: wrap; gap: 3px; }
+.filter-pill { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 2px 8px; font-size: 10px; cursor: pointer; user-select: none; transition: all 0.15s; display: flex; align-items: center; gap: 4px; }
 .filter-pill:hover { border-color: var(--text-dim); }
 .filter-pill.active { border-color: var(--accent); }
-.filter-pill .pill-dot { width: 6px; height: 6px; border-radius: 50%; }
-.filter-pill .pill-count { color: var(--text-muted); font-size: 10px; }
+.filter-pill .pill-dot { width: 5px; height: 5px; border-radius: 50%; }
+.filter-pill .pill-count { color: var(--text-muted); font-size: 9px; }
 
 /* \u2500\u2500\u2500 Zoom controls \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
 #zoom-ctrl { position: absolute; bottom: 52px; right: 12px; z-index: 10; display: flex; flex-direction: column; gap: 2px; }
@@ -2054,6 +2608,24 @@ kbd { background: #21262d; border: 1px solid var(--border); border-radius: 3px;
 
 /* \u2500\u2500\u2500 Help bar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
 #help-bar { position: absolute; bottom: 12px; right: 12px; z-index: 10; font-size: 11px; color: var(--text-muted); background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 6px 10px; transition: background 0.3s; }
+
+/* \u2500\u2500\u2500 Layer hulls \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.layer-hull { fill-opacity: 0.06; stroke-width: 1.5; stroke-dasharray: 6,4; pointer-events: none; }
+.layer-hull-label { font-size: 13px; font-weight: 700; letter-spacing: 0.5px; pointer-events: none; opacity: 0.7; }
+
+/* \u2500\u2500\u2500 Layer tabs \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+#layer-tabs { display: flex; gap: 2px; margin-left: 12px; padding-left: 12px; border-left: 1px solid var(--border); }
+.layer-tab { padding: 4px 10px; font-size: 11px; color: var(--text-dim); cursor: pointer; border-radius: 4px; border: 1px solid transparent; transition: all 0.15s; user-select: none; display: flex; align-items: center; gap: 5px; }
+.layer-tab:hover { color: var(--text); background: var(--bg-hover); }
+.layer-tab.active { border-color: var(--accent); color: var(--text); }
+.layer-tab .lt-dot { width: 6px; height: 6px; border-radius: 50%; }
+
+/* \u2500\u2500\u2500 Layer filter pills \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.layer-pill { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 2px 9px; font-size: 11px; font-weight: 600; cursor: pointer; user-select: none; transition: all 0.15s; display: flex; align-items: center; gap: 5px; }
+.layer-pill:hover { border-color: var(--text-dim); }
+.layer-pill.active { border-color: var(--accent); }
+.layer-pill .lp-dot { width: 6px; height: 6px; border-radius: 50%; }
+.layer-pill .lp-count { color: var(--text-muted); font-size: 9px; font-weight: 400; }
 </style>
 </head>
 <body>
@@ -2064,6 +2636,7 @@ kbd { background: #21262d; border: 1px solid var(--border); border-radius: 3px;
   <div class="tab active" data-view="graph-view" data-i18n="tab.graph">Graph</div>
   <div class="tab" data-view="hier-view" data-i18n="tab.hierarchy">Hierarchy</div>
   <div class="tab" data-view="diff-view" id="diff-tab" style="display:none" data-i18n="tab.diff">Diff</div>
+  <div id="layer-tabs"></div>
   <div class="tab-right">
     <div class="tab-stats">
       <span><span data-i18n="stats.files">Files</span> <b id="s-files">0</b></span>
@@ -2104,6 +2677,11 @@ kbd { background: #21262d; border: 1px solid var(--border); border-radius: 3px;
     <input type="range" id="gravity-slider" min="10" max="500" value="150" oninput="setGravity(this.value)">
     <div class="setting-value"><span id="gravity-val">150</span></div>
   </div>
+  <div id="layer-gravity-setting" class="setting-group" style="display:none">
+    <label>Layer Cohesion</label>
+    <input type="range" id="layer-gravity-slider" min="1" max="40" value="12" oninput="setLayerGravity(this.value)">
+    <div class="setting-value"><span id="layer-gravity-val">12</span></div>
+  </div>
   <div class="setting-group">
     <label data-i18n="settings.language">Language</label>
     <div class="theme-toggle">
@@ -2111,6 +2689,12 @@ kbd { background: #21262d; border: 1px solid var(--border); border-radius: 3px;
       <div class="theme-btn lang-btn" data-lang="ja" onclick="setLang('ja')">\u65E5\u672C\u8A9E</div>
     </div>
   </div>
+  <div id="cross-layer-setting" class="setting-group" style="display:none">
+    <label>Cross-layer Links</label>
+    <div class="theme-toggle">
+      <div class="theme-btn active" id="cross-link-toggle" onclick="toggleCrossLinks()">ON</div>
+    </div>
+  </div>
   <div class="setting-group" style="margin-top:12px;padding-top:12px;border-top:1px solid var(--border)">
     <label data-i18n="settings.export">Export</label>
     <div class="theme-toggle">
@@ -2130,6 +2714,7 @@ kbd { background: #21262d; border: 1px solid var(--border); border-radius: 3px;
       <kbd>/</kbd>
     </div>
     <div class="hud-panel" id="legend-panel">
+      <div id="layer-legend"></div>
       <div class="legend-item"><div class="legend-dot" style="background:var(--red)"></div> <span data-i18n="legend.circular">Circular dep</span></div>
       <div class="legend-item"><div class="legend-dot" style="background:var(--text-muted)"></div> <span data-i18n="legend.orphan">Orphan</span></div>
       <div class="legend-item"><div class="legend-dot" style="border:2px solid var(--yellow);width:6px;height:6px"></div> <span data-i18n="legend.highCoupling">High coupling</span></div>
@@ -2143,7 +2728,10 @@ kbd { background: #21262d; border: 1px solid var(--border); border-radius: 3px;
     <div class="detail-section"><h4 data-i18n="detail.importedBy">Imported by</h4><ul class="detail-list" id="d-dependents"></ul></div>
     <div class="detail-section"><h4 data-i18n="detail.imports">Imports</h4><ul class="detail-list" id="d-deps"></ul></div>
   </div>
-  <div id="filters"></div>
+  <div id="filter-bar">
+    <div id="filter-dir-panel"></div>
+    <div id="filter-layer-row"></div>
+  </div>
   <div id="zoom-ctrl">
     <button onclick="zoomIn()" title="Zoom in">+</button>
     <button onclick="zoomOut()" title="Zoom out">\u2212</button>
@@ -2171,7 +2759,9 @@ kbd { background: #21262d; border: 1px solid var(--border); border-radius: 3px;
     <div class="detail-section"><h4 data-i18n="detail.importedBy">Imported by</h4><ul class="detail-list" id="hd-dependents"></ul></div>
     <div class="detail-section"><h4 data-i18n="detail.imports">Imports</h4><ul class="detail-list" id="hd-deps"></ul></div>
   </div>
-  <div id="hier-filters" style="position:absolute;bottom:42px;left:12px;right:120px;z-index:10;display:flex;flex-wrap:wrap;gap:5px;"></div>
+  <div id="hier-filter-bar" style="position:absolute;bottom:12px;left:12px;right:120px;z-index:10;display:none;">
+    <div id="hier-filter-row" style="display:flex;flex-wrap:wrap;gap:4px;"></div>
+  </div>
   <div id="help-bar" style="position:absolute" data-i18n="help.hierarchy">Scroll to navigate \xB7 Click to highlight</div>
 </div>
 
@@ -2263,7 +2853,7 @@ function i(key) { return (I18N[currentLang] || I18N.en)[key] || key; }
 // \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
 const STORAGE_KEY = 'archtracker-settings';
 function saveSettings() {
-  const s = { theme: document.body.getAttribute('data-theme') || 'dark', fontSize: document.getElementById('font-size-val').textContent, nodeSize: document.getElementById('node-size-val').textContent, linkOpacity: document.getElementById('link-opacity-val').textContent, gravity: document.getElementById('gravity-val').textContent, lang: currentLang, projectTitle: document.getElementById('project-title').textContent };
+  const s = { theme: document.body.getAttribute('data-theme') || 'dark', fontSize: document.getElementById('font-size-val').textContent, nodeSize: document.getElementById('node-size-val').textContent, linkOpacity: document.getElementById('link-opacity-val').textContent, gravity: document.getElementById('gravity-val').textContent, layerGravity: document.getElementById('layer-gravity-val').textContent, lang: currentLang, projectTitle: document.getElementById('project-title').textContent };
   try { localStorage.setItem(STORAGE_KEY, JSON.stringify(s)); } catch(e) {}
 }
 function loadSettings() {
@@ -2312,6 +2902,15 @@ window.setGravity = (v) => {
   }
   saveSettings();
 };
+let layerGravity = 12;
+window.setLayerGravity = (v) => {
+  layerGravity = +v;
+  document.getElementById('layer-gravity-val').textContent = v;
+  if (typeof simulation !== 'undefined' && typeof applyLayerFilter === 'function') {
+    applyLayerFilter();
+  }
+  saveSettings();
+};
 
 // \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
 // EXPORT
@@ -2347,6 +2946,8 @@ window.exportPNG = () => {
 // DATA
 // \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
 const DATA = ${graphData};
+const LAYERS = ${layersData};
+const CROSS_EDGES = ${crossEdgesData};
 const W = window.innerWidth, H = window.innerHeight - 44;
 const circularSet = new Set(DATA.circularFiles);
 
@@ -2367,6 +2968,7 @@ if (_savedSettings) {
   if (_savedSettings.nodeSize) { document.getElementById('node-size-slider').value = _savedSettings.nodeSize; document.getElementById('node-size-val').textContent = _savedSettings.nodeSize; nodeScale = _savedSettings.nodeSize / 100; }
   if (_savedSettings.linkOpacity) { document.getElementById('link-opacity-slider').value = _savedSettings.linkOpacity; document.getElementById('link-opacity-val').textContent = _savedSettings.linkOpacity; baseLinkOpacity = _savedSettings.linkOpacity / 100; }
   if (_savedSettings.gravity) { document.getElementById('gravity-slider').value = _savedSettings.gravity; document.getElementById('gravity-val').textContent = _savedSettings.gravity; gravityStrength = +_savedSettings.gravity; }
+  if (_savedSettings.layerGravity) { document.getElementById('layer-gravity-slider').value = _savedSettings.layerGravity; document.getElementById('layer-gravity-val').textContent = _savedSettings.layerGravity; layerGravity = +_savedSettings.layerGravity; }
 }
 
 document.getElementById('s-files').textContent = DATA.nodes.length;
@@ -2376,9 +2978,21 @@ document.getElementById('s-circular').textContent = DATA.circularFiles.length;
 const dirColor = d3.scaleOrdinal()
   .domain(DATA.dirs)
   .range(['#58a6ff','#3fb950','#d2a8ff','#f0883e','#79c0ff','#56d4dd','#db61a2','#f778ba','#ffa657','#7ee787']);
+
+// Layer color map (from LAYERS metadata)
+const layerColorMap = {};
+let activeLayerFilter = null; // DEPRECATED \u2014 kept for backward compat, always null with multi-select tabs
+const activeLayers = new Set(); // empty = no filter (show all); non-empty = show only selected
+if (LAYERS) {
+  LAYERS.forEach(l => { layerColorMap[l.name] = l.color; });
+  document.getElementById('layer-gravity-setting').style.display = '';
+}
+
 function nodeColor(d) {
   if (circularSet.has(d.id)) return '#f97583';
   if (d.isOrphan) return '#484f58';
+  // Layer coloring: all-visible or multi-select \u2192 layer colors; single-select \u2192 dir colors
+  if (LAYERS && d.layer && layerColorMap[d.layer] && activeLayers.size !== 1) return layerColorMap[d.layer];
   return dirColor(d.dir);
 }
 function nodeRadius(d) { return Math.max(5, Math.min(22, 4 + d.dependents * 1.8)); }
@@ -2388,13 +3002,18 @@ function fileName(id) { return id.split('/').pop(); }
 // TAB SWITCHING
 // \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
 let hierBuilt = false;
+let hierRelayout = null;
+let hierSyncFromTab = null;
 document.querySelectorAll('.tab').forEach(tab => {
   tab.addEventListener('click', () => {
     document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
     document.querySelectorAll('.view').forEach(v => v.classList.remove('active'));
     tab.classList.add('active');
     document.getElementById(tab.dataset.view).classList.add('active');
-    if (tab.dataset.view === 'hier-view' && !hierBuilt) { buildHierarchy(); hierBuilt = true; }
+    if (tab.dataset.view === 'hier-view') {
+      if (!hierBuilt) { buildHierarchy(); hierBuilt = true; }
+      if (hierSyncFromTab) { hierSyncFromTab(null); hierRelayout(); }
+    }
   });
 });
 
@@ -2485,6 +3104,35 @@ const link = g.append('g').selectAll('line').data(DATA.links).join('line')
   .attr('marker-end','url(#arrow-0)')
   .attr('opacity', baseLinkOpacity);
 
+// Cross-layer links (from layers.json connections)
+defs.append('marker').attr('id','arrow-cross').attr('viewBox','0 -4 8 8')
+  .attr('refX',8).attr('refY',0).attr('markerWidth',7).attr('markerHeight',7).attr('orient','auto')
+  .append('path').attr('d','M0,-3.5L8,0L0,3.5Z').attr('fill','#f0883e');
+
+const crossLinkData = (CROSS_EDGES || []).map(e => ({
+  source: e.fromLayer + '/' + e.fromFile,
+  target: e.toLayer + '/' + e.toFile,
+  sourceLayer: e.fromLayer,
+  targetLayer: e.toLayer,
+  type: e.type || 'api-call',
+  label: e.label || e.type || '',
+})).filter(e => DATA.nodes.some(n => n.id === e.source) && DATA.nodes.some(n => n.id === e.target));
+
+const crossLinkG = g.append('g');
+const crossLink = crossLinkG.selectAll('line').data(crossLinkData).join('line')
+  .attr('stroke', '#f0883e')
+  .attr('stroke-width', 2)
+  .attr('stroke-dasharray', '8,4')
+  .attr('marker-end', 'url(#arrow-cross)')
+  .attr('opacity', 0.7);
+const crossLabel = crossLinkG.selectAll('text').data(crossLinkData).join('text')
+  .text(d => d.label)
+  .attr('font-size', 9)
+  .attr('fill', '#f0883e')
+  .attr('text-anchor', 'middle')
+  .attr('opacity', 0.8)
+  .attr('pointer-events', 'none');
+
 // Nodes
 const node = g.append('g').selectAll('g').data(DATA.nodes).join('g')
   .attr('cursor','pointer')
@@ -2527,6 +3175,396 @@ const simulation = d3.forceSimulation(DATA.nodes)
     node.attr('transform', d=>\`translate(\${d.x},\${d.y})\`);
   });
 
+// \u2500\u2500\u2500 Layer convex hulls \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+let hullGroup = null;
+const activeDirs = new Set(DATA.dirs);
+const dirCounts = {};
+DATA.nodes.forEach(n => dirCounts[n.dir] = (dirCounts[n.dir] || 0) + 1);
+var applyLayerFilter = null; // hoisted for dir-filter integration
+
+if (LAYERS && LAYERS.length > 0) {
+  // \u2500\u2500\u2500 Water droplet physics: intra-layer cohesion + inter-layer separation \u2500\u2500\u2500
+  const allLayerCount = LAYERS.length;
+  const allBaseRadius = Math.max(60, Math.min(W, H) * 0.04 * Math.sqrt(allLayerCount));
+  // Pre-compute full-circle positions for all layers (used when no filter)
+  const allLayerCenters = {};
+  LAYERS.forEach((l, idx) => {
+    const angle = (2 * Math.PI * idx) / allLayerCount - Math.PI / 2;
+    allLayerCenters[l.name] = { x: Math.cos(angle) * allBaseRadius, y: Math.sin(angle) * allBaseRadius };
+  });
+
+  // Dynamic center calculation: compact when multi-selecting, full spread when all
+  function getLayerCenters() {
+    if (activeLayers.size <= 1) return allLayerCenters; // 0 = all, 1 = single (centered)
+    // Multi-select: arrange only selected layers compactly on a smaller circle
+    const selected = LAYERS.filter(l => activeLayers.has(l.name));
+    const count = selected.length;
+    const compactRadius = Math.max(40, Math.min(W, H) * 0.03 * Math.sqrt(count));
+    const centers = {};
+    selected.forEach((l, idx) => {
+      const angle = (2 * Math.PI * idx) / count - Math.PI / 2;
+      centers[l.name] = { x: Math.cos(angle) * compactRadius, y: Math.sin(angle) * compactRadius };
+    });
+    return centers;
+  }
+
+  // Replace default centering forces with per-layer positioning
+  const layerStrength = layerGravity / 100;
+  simulation.force('x', null).force('y', null).force('center', null);
+  simulation.force('layerX', d3.forceX(d => allLayerCenters[d.layer]?.x || 0).strength(d => d.layer ? layerStrength : 0.03));
+  simulation.force('layerY', d3.forceY(d => allLayerCenters[d.layer]?.y || 0).strength(d => d.layer ? layerStrength : 0.03));
+
+  // Custom clustering force \u2014 surface tension pulling nodes toward their layer centroid
+  function clusterForce() {
+    let nodes;
+    function force(alpha) {
+      const centroids = {};
+      const counts = {};
+      nodes.forEach(n => {
+        if (!n.layer) return;
+        if (!centroids[n.layer]) { centroids[n.layer] = {x: 0, y: 0}; counts[n.layer] = 0; }
+        centroids[n.layer].x += n.x;
+        centroids[n.layer].y += n.y;
+        counts[n.layer]++;
+      });
+      Object.keys(centroids).forEach(k => {
+        centroids[k].x /= counts[k];
+        centroids[k].y /= counts[k];
+      });
+      // Pull each node toward its layer centroid (surface tension)
+      const strength = 0.2;
+      nodes.forEach(n => {
+        if (!n.layer || !centroids[n.layer]) return;
+        n.vx += (centroids[n.layer].x - n.x) * alpha * strength;
+        n.vy += (centroids[n.layer].y - n.y) * alpha * strength;
+      });
+    }
+    force.initialize = (n) => { nodes = n; };
+    return force;
+  }
+  simulation.force('cluster', clusterForce());
+
+  // Boost link strength for intra-layer edges (tighter connections within a layer)
+  simulation.force('link').strength(l => {
+    const sLayer = (l.source.layer ?? l.source);
+    const tLayer = (l.target.layer ?? l.target);
+    return sLayer === tLayer ? 0.4 : 0.1;
+  });
+
+  hullGroup = g.insert('g', ':first-child');
+
+  function updateHulls() {
+    if (!hullGroup) return;
+    hullGroup.selectAll('*').remove();
+    // Show hulls always (filter to selected layers when focused)
+
+    LAYERS.forEach(layer => {
+      if (activeLayers.size > 0 && !activeLayers.has(layer.name)) return;
+      const layerNodes = DATA.nodes.filter(n => n.layer === layer.name);
+      if (layerNodes.length === 0) return;
+
+      const points = [];
+      layerNodes.forEach(n => {
+        if (n.x == null || n.y == null) return;
+        const r = nodeRadius(n) * nodeScale + 30;
+        // Add expanded points for a nicer hull shape
+        for (let a = 0; a < Math.PI * 2; a += Math.PI / 4) {
+          points.push([n.x + Math.cos(a) * r, n.y + Math.sin(a) * r]);
+        }
+      });
+
+      if (points.length < 3) {
+        // Fallback: circle for 1-2 nodes
+        const cx = layerNodes.reduce((s, n) => s + (n.x || 0), 0) / layerNodes.length;
+        const cy = layerNodes.reduce((s, n) => s + (n.y || 0), 0) / layerNodes.length;
+        const maxR = Math.max(60, ...layerNodes.map(n => {
+          const dx = (n.x || 0) - cx, dy = (n.y || 0) - cy;
+          return Math.sqrt(dx*dx + dy*dy) + nodeRadius(n) * nodeScale + 30;
+        }));
+        hullGroup.append('circle')
+          .attr('cx', cx).attr('cy', cy).attr('r', maxR)
+          .attr('class', 'layer-hull')
+          .attr('fill', layer.color).attr('stroke', layer.color);
+        hullGroup.append('text')
+          .attr('class', 'layer-hull-label')
+          .attr('x', cx).attr('y', cy - maxR - 8)
+          .attr('text-anchor', 'middle')
+          .attr('fill', layer.color)
+          .text(layer.name);
+        return;
+      }
+
+      const hull = d3.polygonHull(points);
+      if (!hull) return;
+
+      // Smooth the hull with a cardinal closed curve
+      hullGroup.append('path')
+        .attr('class', 'layer-hull')
+        .attr('d', d3.line().curve(d3.curveCatmullRomClosed.alpha(0.5))(hull))
+        .attr('fill', layer.color).attr('stroke', layer.color);
+
+      // Label at the top of the hull
+      const topPt = hull.reduce((best, p) => p[1] < best[1] ? p : best, hull[0]);
+      hullGroup.append('text')
+        .attr('class', 'layer-hull-label')
+        .attr('x', topPt[0]).attr('y', topPt[1] - 10)
+        .attr('text-anchor', 'middle')
+        .attr('fill', layer.color)
+        .text(layer.name);
+    });
+  }
+
+  // Update hulls + cross-layer links on each tick
+  simulation.on('tick', () => {
+    // Regular links
+    link.each(function(d) {
+      const dx=d.target.x-d.source.x, dy=d.target.y-d.source.y;
+      const dist=Math.sqrt(dx*dx+dy*dy)||1;
+      const rT=nodeRadius(d.target)*nodeScale, rS=nodeRadius(d.source)*nodeScale;
+      d3.select(this)
+        .attr('x1',d.source.x+(dx/dist)*rS).attr('y1',d.source.y+(dy/dist)*rS)
+        .attr('x2',d.target.x-(dx/dist)*rT).attr('y2',d.target.y-(dy/dist)*rT);
+    });
+    node.attr('transform', d=>\`translate(\${d.x},\${d.y})\`);
+    // Cross-layer links \u2014 resolve node positions by ID
+    if (crossLinkData.length > 0) {
+      const nodeById = {};
+      DATA.nodes.forEach(n => { nodeById[n.id] = n; });
+      crossLink.each(function(d) {
+        const sN = nodeById[d.source], tN = nodeById[d.target];
+        if (!sN || !tN) return;
+        const dx = tN.x - sN.x, dy = tN.y - sN.y;
+        const dist = Math.sqrt(dx*dx + dy*dy) || 1;
+        const rS = nodeRadius(sN) * nodeScale, rT = nodeRadius(tN) * nodeScale;
+        d3.select(this)
+          .attr('x1', sN.x + (dx/dist)*rS).attr('y1', sN.y + (dy/dist)*rS)
+          .attr('x2', tN.x - (dx/dist)*rT).attr('y2', tN.y - (dy/dist)*rT);
+      });
+      crossLabel.each(function(d) {
+        const sN = nodeById[d.source], tN = nodeById[d.target];
+        if (!sN || !tN) return;
+        d3.select(this).attr('x', (sN.x + tN.x) / 2).attr('y', (sN.y + tN.y) / 2 - 6);
+      });
+    }
+    updateHulls();
+  });
+
+  // \u2500\u2500\u2500 Layer legend \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+  const layerLegend = document.getElementById('layer-legend');
+  LAYERS.forEach(layer => {
+    const item = document.createElement('div');
+    item.className = 'legend-item';
+    item.innerHTML = '<div class="legend-dot" style="background:' + layer.color + '"></div> ' + layer.name;
+    layerLegend.appendChild(item);
+  });
+  // Cross-layer edge legend
+  if (CROSS_EDGES && CROSS_EDGES.length > 0) {
+    const crossItem = document.createElement('div');
+    crossItem.className = 'legend-item';
+    crossItem.innerHTML = '<span style="color:#f0883e;font-size:11px">- - \u2192</span> Cross-layer link';
+    layerLegend.appendChild(crossItem);
+  }
+  // Add separator
+  const sep = document.createElement('hr');
+  sep.style.cssText = 'border:none;border-top:1px solid var(--border);margin:6px 0;';
+  layerLegend.appendChild(sep);
+
+  // \u2500\u2500\u2500 Layer tabs (multi-select toggles in tab bar) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+  const layerTabsEl = document.getElementById('layer-tabs');
+  const allTab = document.createElement('div');
+  allTab.className = 'layer-tab active';
+  allTab.textContent = 'All';
+  allTab.onclick = () => {
+    activeLayers.clear();
+    syncLayerTabUI();
+    applyLayerFilter();
+    if (hierBuilt && hierSyncFromTab) { hierSyncFromTab(); hierRelayout(); }
+  };
+  layerTabsEl.appendChild(allTab);
+
+  LAYERS.forEach(layer => {
+    const tab = document.createElement('div');
+    tab.className = 'layer-tab';
+    tab.dataset.layer = layer.name;
+    tab.innerHTML = '<div class="lt-dot" style="background:' + layer.color + '"></div>' + layer.name;
+    tab.onclick = (e) => {
+      if (e.shiftKey) {
+        // Shift+click: solo this layer
+        activeLayers.clear();
+        activeLayers.add(layer.name);
+      } else {
+        // Toggle
+        if (activeLayers.has(layer.name)) activeLayers.delete(layer.name);
+        else activeLayers.add(layer.name);
+      }
+      syncLayerTabUI();
+      applyLayerFilter();
+      if (hierBuilt && hierSyncFromTab) { hierSyncFromTab(); hierRelayout(); }
+    };
+    layerTabsEl.appendChild(tab);
+  });
+
+  function syncLayerTabUI() {
+    allTab.classList.toggle('active', activeLayers.size === 0);
+    layerTabsEl.querySelectorAll('.layer-tab[data-layer]').forEach(t => {
+      t.classList.toggle('active', activeLayers.has(t.dataset.layer));
+    });
+    // Also sync the filter bar layer pills
+    layerRowEl.querySelectorAll('.layer-pill[data-layer]').forEach(p => {
+      p.classList.toggle('active', activeLayers.has(p.dataset.layer));
+    });
+  }
+
+  applyLayerFilter = function() {
+    const isSingleLayer = activeLayers.size === 1;
+    const hasLayerFilter = activeLayers.size > 0;
+    node.attr('display', d => {
+      if (!activeDirs.has(d.dir)) return 'none';
+      if (hasLayerFilter && !activeLayers.has(d.layer)) return 'none';
+      return null;
+    });
+    link.attr('display', l => {
+      const s = l.source.id ?? l.source, t = l.target.id ?? l.target;
+      const sN = DATA.nodes.find(n => n.id === s), tN = DATA.nodes.find(n => n.id === t);
+      if (!sN || !tN) return 'none';
+      if (!activeDirs.has(sN.dir) || !activeDirs.has(tN.dir)) return 'none';
+      if (hasLayerFilter && (!activeLayers.has(sN.layer) || !activeLayers.has(tN.layer))) return 'none';
+      return null;
+    });
+    // Refresh node colors: single-layer = dir-based, multi-layer = layer-based
+    node.select('circle')
+      .attr('fill', nodeColor)
+      .attr('stroke', d => d.deps >= 5 ? 'var(--yellow)' : nodeColor(d));
+    // Cross-layer links: respect user toggle + layer filter
+    if (typeof crossLink !== 'undefined') {
+      if (!crossLinksUserEnabled || isSingleLayer) {
+        crossLink.attr('display', 'none');
+        crossLabel.attr('display', 'none');
+      } else if (hasLayerFilter) {
+        crossLink.attr('display', d => (activeLayers.has(d.sourceLayer) && activeLayers.has(d.targetLayer)) ? null : 'none');
+        crossLabel.attr('display', d => (activeLayers.has(d.sourceLayer) && activeLayers.has(d.targetLayer)) ? null : 'none');
+      } else {
+        crossLink.attr('display', null);
+        crossLabel.attr('display', null);
+      }
+    }
+    // Update stats
+    const visibleNodes = DATA.nodes.filter(d => {
+      if (!activeDirs.has(d.dir)) return false;
+      if (hasLayerFilter && !activeLayers.has(d.layer)) return false;
+      return true;
+    });
+    const visibleIds = new Set(visibleNodes.map(n => n.id));
+    const visibleEdges = DATA.links.filter(l => {
+      const s = l.source.id ?? l.source, t = l.target.id ?? l.target;
+      return visibleIds.has(s) && visibleIds.has(t);
+    });
+    document.getElementById('s-files').textContent = visibleNodes.length;
+    document.getElementById('s-edges').textContent = visibleEdges.length;
+    const visCirc = DATA.circularFiles.filter(f => visibleIds.has(f));
+    document.getElementById('s-circular').textContent = visCirc.length;
+    updateHulls();
+    // Adjust physics: single-layer = centered, multi-select = compact, all = full spread
+    const lStrength = layerGravity / 100;
+    if (isSingleLayer) {
+      simulation.force('charge', d3.forceManyBody().strength(-gravityStrength * 3).distanceMax(800));
+      simulation.force('layerX', d3.forceX(0).strength(0.03));
+      simulation.force('layerY', d3.forceY(0).strength(0.03));
+    } else {
+      const centers = getLayerCenters();
+      simulation.force('charge', d3.forceManyBody().strength(-gravityStrength).distanceMax(500));
+      simulation.force('layerX', d3.forceX(d => centers[d.layer]?.x || 0).strength(d => d.layer ? lStrength : 0.03));
+      simulation.force('layerY', d3.forceY(d => centers[d.layer]?.y || 0).strength(d => d.layer ? lStrength : 0.03));
+    }
+    simulation.alpha(0.6).restart();
+    // Zoom to fit visible nodes after simulation settles
+    setTimeout(() => zoomFit(), 600);
+  }
+
+  // \u2500\u2500\u2500 Layer filter pills (new grouped bar) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+  const layerRowEl = document.getElementById('filter-layer-row');
+  const dirPanelEl = document.getElementById('filter-dir-panel');
+
+  // Dir toggle button
+  const dirToggle = document.createElement('div');
+  dirToggle.id = 'filter-dir-toggle';
+  dirToggle.textContent = '\u25B8 Dirs';
+  dirToggle.onclick = () => {
+    dirToggle.classList.toggle('open');
+    dirPanelEl.classList.toggle('open');
+    dirToggle.textContent = dirPanelEl.classList.contains('open') ? '\u25BE Dirs' : '\u25B8 Dirs';
+  };
+  layerRowEl.appendChild(dirToggle);
+
+  // Cross-layer link toggle (in settings sidebar)
+  let crossLinksUserEnabled = true;
+  if (crossLinkData.length > 0) {
+    document.getElementById('cross-layer-setting').style.display = '';
+    window.toggleCrossLinks = () => {
+      crossLinksUserEnabled = !crossLinksUserEnabled;
+      const btn = document.getElementById('cross-link-toggle');
+      btn.textContent = crossLinksUserEnabled ? 'ON' : 'OFF';
+      btn.classList.toggle('active', crossLinksUserEnabled);
+      applyLayerFilter();
+    };
+  }
+
+  LAYERS.forEach(layer => {
+    const layerNodes = DATA.nodes.filter(n => n.layer === layer.name);
+    const pill = document.createElement('div');
+    pill.className = 'layer-pill';
+    pill.dataset.layer = layer.name;
+    pill.innerHTML = '<div class="lp-dot" style="background:' + layer.color + '"></div>' + layer.name + ' <span class="lp-count">' + layerNodes.length + '</span>';
+    pill.onclick = () => {
+      if (activeLayers.has(layer.name)) activeLayers.delete(layer.name);
+      else activeLayers.add(layer.name);
+      syncLayerTabUI();
+      applyLayerFilter();
+    };
+    pill.onmouseenter = () => {
+      if (pinnedNode) return;
+      node.select('circle').transition().duration(120).attr('opacity', d => d.layer === layer.name ? 1 : 0.1);
+      node.select('text').transition().duration(120).attr('opacity', d => d.layer === layer.name ? 1 : 0.05);
+    };
+    pill.onmouseleave = () => {
+      if (pinnedNode) return;
+      node.select('circle').transition().duration(150).attr('opacity', 1);
+      node.select('text').transition().duration(150).attr('opacity', d => d.dependents >= 1 || d.deps >= 3 ? 1 : 0.5);
+    };
+    layerRowEl.appendChild(pill);
+
+    // Build dir group in panel for this layer
+    const layerDirs = [...new Set(layerNodes.map(n => n.dir))].sort();
+    if (layerDirs.length > 0) {
+      const group = document.createElement('div');
+      group.className = 'dir-group';
+      const label = document.createElement('div');
+      label.className = 'dir-group-label';
+      label.innerHTML = '<div class="dg-dot" style="background:' + layer.color + '"></div>' + layer.name;
+      group.appendChild(label);
+      const pillsWrap = document.createElement('div');
+      pillsWrap.className = 'dir-group-pills';
+      layerDirs.forEach(dir => {
+        const dp = document.createElement('div');
+        dp.className = 'filter-pill active';
+        const shortDir = dir.includes('/') ? dir.substring(dir.indexOf('/') + 1) : dir;
+        dp.innerHTML = '<div class="pill-dot" style="background:' + dirColor(dir) + '"></div>' + (shortDir || '.') + ' <span class="pill-count">' + (dirCounts[dir] || 0) + '</span>';
+        dp.onclick = () => {
+          if (activeDirs.has(dir)) { activeDirs.delete(dir); dp.classList.remove('active'); }
+          else { activeDirs.add(dir); dp.classList.add('active'); }
+          applyLayerFilter();
+        };
+        pillsWrap.appendChild(dp);
+      });
+      group.appendChild(pillsWrap);
+      dirPanelEl.appendChild(group);
+    }
+  });
+
+  // Override applyFilter to respect layers
+  window._origApplyFilter = applyFilter;
+}
+
 setTimeout(()=>zoomFit(), 1500);
 
 // Restore saved settings \u2014 phase 2: apply to graph elements now that they exist
@@ -2616,32 +3654,36 @@ searchInput.addEventListener('input',e=>{
 });
 
 // \u2500\u2500\u2500 Filters (click=toggle, hover=highlight nodes) \u2500\u2500
-const filtersEl=document.getElementById('filters');
-const activeDirs=new Set(DATA.dirs);
-const dirCounts={};
-DATA.nodes.forEach(n=>dirCounts[n.dir]=(dirCounts[n.dir]||0)+1);
-DATA.dirs.forEach(dir=>{
-  const pill=document.createElement('div');
-  pill.className='filter-pill active';
-  pill.innerHTML='<div class="pill-dot" style="background:'+dirColor(dir)+'"></div>'+(dir||'.')+' <span class="pill-count">'+dirCounts[dir]+'</span>';
-  pill.onclick=()=>{
-    if(activeDirs.has(dir)){activeDirs.delete(dir);pill.classList.remove('active');}
-    else{activeDirs.add(dir);pill.classList.add('active');}
-    applyFilter();
-  };
-  pill.onmouseenter=()=>{
-    if(pinnedNode)return;
-    node.select('circle').transition().duration(120).attr('opacity',d=>d.dir===dir?1:0.1);
-    node.select('text').transition().duration(120).attr('opacity',d=>d.dir===dir?1:0.05);
-  };
-  pill.onmouseleave=()=>{
-    if(pinnedNode)return;
-    node.select('circle').transition().duration(150).attr('opacity',1);
-    node.select('text').transition().duration(150).attr('opacity',d=>d.dependents>=1||d.deps>=3?1:0.5);
-  };
-  filtersEl.appendChild(pill);
-});
+if (!LAYERS) {
+  // Non-layer mode: flat pills in filter-layer-row
+  const filterRowEl=document.getElementById('filter-layer-row');
+  DATA.dirs.forEach(dir=>{
+    const pill=document.createElement('div');
+    pill.className='filter-pill active';
+    pill.innerHTML='<div class="pill-dot" style="background:'+dirColor(dir)+'"></div>'+(dir||'.')+' <span class="pill-count">'+dirCounts[dir]+'</span>';
+    pill.onclick=()=>{
+      if(activeDirs.has(dir)){activeDirs.delete(dir);pill.classList.remove('active');}
+      else{activeDirs.add(dir);pill.classList.add('active');}
+      applyFilter();
+    };
+    pill.onmouseenter=()=>{
+      if(pinnedNode)return;
+      node.select('circle').transition().duration(120).attr('opacity',d=>d.dir===dir?1:0.1);
+      node.select('text').transition().duration(120).attr('opacity',d=>d.dir===dir?1:0.05);
+    };
+    pill.onmouseleave=()=>{
+      if(pinnedNode)return;
+      node.select('circle').transition().duration(150).attr('opacity',1);
+      node.select('text').transition().duration(150).attr('opacity',d=>d.dependents>=1||d.deps>=3?1:0.5);
+    };
+    filterRowEl.appendChild(pill);
+  });
+}
 function applyFilter(){
+  if (LAYERS) {
+    // Delegate to layer-aware filter
+    if (typeof applyLayerFilter === 'function') { applyLayerFilter(); return; }
+  }
   node.attr('display',d=>activeDirs.has(d.dir)?null:'none');
   link.attr('display',l=>{
     const s=l.source.id??l.source,t=l.target.id??l.target;
@@ -2753,6 +3795,7 @@ function buildHierarchy(){
   for(let layer=0;layer<=maxLayer;layer++){
     if(!layerGroups[layer].length)continue;
     hG.append('text').attr('class','hier-layer-label').attr('font-size',11)
+      .attr('data-depth-idx',layer)
       .attr('x',12).attr('y',padY+layer*(boxH+gapY)+boxH/2+4).text('L'+layer);
   }
 
@@ -2822,30 +3865,184 @@ function buildHierarchy(){
   // Click on empty space to deselect
   hSvg.on('click',()=>{closeHierDetail();});
 
-  // Hierarchy dir filters
-  const hFiltersEl=document.getElementById('hier-filters');
-  const hActiveDirs=new Set(DATA.dirs);
-  DATA.dirs.forEach(dir=>{
-    const pill=document.createElement('div');
-    pill.className='filter-pill active';
-    pill.innerHTML='<div class="pill-dot" style="background:'+dirColor(dir)+'"></div>'+(dir||'.')+' <span class="pill-count">'+(dirCounts[dir]||0)+'</span>';
-    pill.onclick=()=>{
-      if(hActiveDirs.has(dir)){hActiveDirs.delete(dir);pill.classList.remove('active');}
-      else{hActiveDirs.add(dir);pill.classList.add('active');}
-      nodeG.selectAll('.hier-node').attr('opacity',function(){const nId=this.__data_id;return hActiveDirs.has(nodeMap[nId]?.dir)?1:0.1;});
-    };
-    pill.onmouseenter=()=>{
-      nodeG.selectAll('.hier-node').attr('opacity',function(){return this.__data_id&&nodeMap[this.__data_id]?.dir===dir?1:0.1;});
-    };
-    pill.onmouseleave=()=>{
-      nodeG.selectAll('.hier-node').attr('opacity',1);
+  // Hierarchy filters \u2014 layer pills or dir pills
+  const hFilterRow=document.getElementById('hier-filter-row');
+  const hFilterBar=document.getElementById('hier-filter-bar');
+  if (hFilterBar) hFilterBar.style.display='';
+  const hActiveLayers=new Set(); // empty = show all (same as graph view)
+
+  function hierRelayoutInner() {
+    function isVisible(nId) {
+      var nd = nodeMap[nId];
+      if (!nd) return false;
+      if (LAYERS && nd.layer && hActiveLayers.size > 0 && !hActiveLayers.has(nd.layer)) return false;
+      return true;
+    }
+
+    // Build visible layer groups and compact Y positions
+    var visibleDepths = [];
+    var visLayerGroups = {};
+    for (var depth = 0; depth <= maxLayer; depth++) {
+      var visItems = layerGroups[depth].filter(function(id) { return isVisible(id); });
+      if (visItems.length > 0) {
+        visLayerGroups[depth] = visItems;
+        visibleDepths.push(depth);
+      }
+    }
+
+    // Recalculate positions for visible nodes (compacted)
+    var newPositions = {};
+    var newMaxRowWidth = 0;
+    visibleDepths.forEach(function(depth) {
+      newMaxRowWidth = Math.max(newMaxRowWidth, visLayerGroups[depth].length * (boxW + gapX) - gapX);
+    });
+    visibleDepths.forEach(function(depth, yIdx) {
+      var items = visLayerGroups[depth];
+      var rowWidth = items.length * (boxW + gapX) - gapX;
+      var startX = padX + (newMaxRowWidth - rowWidth) / 2;
+      items.forEach(function(id, idx) {
+        newPositions[id] = { x: startX + idx * (boxW + gapX), y: padY + yIdx * (boxH + gapY) };
+      });
+    });
+
+    // Update SVG size
+    var newTotalW = (newMaxRowWidth || 0) + padX * 2;
+    var newTotalH = padY * 2 + Math.max(1, visibleDepths.length) * (boxH + gapY);
+    hSvg.attr('width', Math.max(newTotalW, W)).attr('height', Math.max(newTotalH, H));
+
+    // Update nodes: hide/show + transition positions
+    nodeG.selectAll('.hier-node').each(function() {
+      var nId = this.__data_id;
+      var el = d3.select(this);
+      if (!isVisible(nId) || !newPositions[nId]) {
+        el.attr('display', 'none');
+      } else {
+        el.attr('display', null)
+          .transition().duration(300)
+          .attr('transform', 'translate(' + newPositions[nId].x + ',' + newPositions[nId].y + ')');
+      }
+    });
+
+    // Update links: show only if both endpoints visible, recalculate bezier
+    linkG.selectAll('path').each(function() {
+      var sId = this.getAttribute('data-source');
+      var tId = this.getAttribute('data-target');
+      var el = d3.select(this);
+      if (!isVisible(sId) || !isVisible(tId) || !newPositions[sId] || !newPositions[tId]) {
+        el.attr('display', 'none');
+      } else {
+        var s = newPositions[sId], t = newPositions[tId];
+        var x1 = s.x + boxW / 2, y1 = s.y + boxH;
+        var x2 = t.x + boxW / 2, y2 = t.y;
+        var midY = (y1 + y2) / 2;
+        el.attr('display', null)
+          .transition().duration(300)
+          .attr('d', 'M' + x1 + ',' + y1 + ' C' + x1 + ',' + midY + ' ' + x2 + ',' + midY + ' ' + x2 + ',' + y2);
+      }
+    });
+
+    // Update depth labels: hide empty depths, reposition visible ones
+    hG.selectAll('.hier-layer-label').each(function() {
+      var depthIdx = +this.getAttribute('data-depth-idx');
+      var el = d3.select(this);
+      var yIdx = visibleDepths.indexOf(depthIdx);
+      if (yIdx === -1) {
+        el.attr('display', 'none');
+      } else {
+        el.attr('display', null)
+          .transition().duration(300)
+          .attr('y', padY + yIdx * (boxH + gapY) + boxH / 2 + 4);
+      }
+    });
+
+    // Close detail panel if pinned node became hidden
+    if (hierPinned && !isVisible(hierPinned)) {
+      closeHierDetail();
+    }
+  }
+
+  function hierSyncFromTabInner() {
+    if (!LAYERS) return;
+    hActiveLayers.clear();
+    activeLayers.forEach(function(name) { hActiveLayers.add(name); });
+    // Sync pill UI
+    hFilterRow.querySelectorAll('.layer-pill').forEach(function(p) {
+      var ln = p.dataset.layer;
+      if (ln === 'all') {
+        p.classList.toggle('active', hActiveLayers.size === 0);
+      } else {
+        p.classList.toggle('active', hActiveLayers.has(ln));
+      }
+    });
+  }
+
+  if (LAYERS) {
+    // "All" button
+    const allPill=document.createElement('div');
+    allPill.className='layer-pill active';
+    allPill.style.fontWeight='400';
+    allPill.textContent='All';
+    allPill.dataset.layer='all';
+    allPill.onclick=()=>{
+      hActiveLayers.clear();
+      hFilterRow.querySelectorAll('.layer-pill').forEach(p=>p.classList.remove('active'));
+      allPill.classList.add('active');
+      hierRelayoutInner();
     };
-    hFiltersEl.appendChild(pill);
-  });
+    hFilterRow.appendChild(allPill);
+
+    LAYERS.forEach(layer => {
+      const pill=document.createElement('div');
+      pill.className='layer-pill';
+      pill.dataset.layer=layer.name;
+      const count=DATA.nodes.filter(n=>n.layer===layer.name).length;
+      pill.innerHTML='<div class="lp-dot" style="background:'+layer.color+'"></div>'+layer.name+' <span class="lp-count">'+count+'</span>';
+      pill.onclick=(e)=>{
+        if (e.shiftKey) {
+          hActiveLayers.clear();
+          hActiveLayers.add(layer.name);
+        } else {
+          if (hActiveLayers.has(layer.name)) hActiveLayers.delete(layer.name);
+          else hActiveLayers.add(layer.name);
+        }
+        // Sync pill UI
+        hFilterRow.querySelectorAll('.layer-pill').forEach(function(p) {
+          var ln = p.dataset.layer;
+          if (ln === 'all') p.classList.toggle('active', hActiveLayers.size === 0);
+          else p.classList.toggle('active', hActiveLayers.has(ln));
+        });
+        hierRelayoutInner();
+      };
+      hFilterRow.appendChild(pill);
+    });
+  } else {
+    const hActiveDirs=new Set(DATA.dirs);
+    DATA.dirs.forEach(dir=>{
+      const pill=document.createElement('div');
+      pill.className='filter-pill active';
+      pill.innerHTML='<div class="pill-dot" style="background:'+dirColor(dir)+'"></div>'+(dir||'.')+' <span class="pill-count">'+(dirCounts[dir]||0)+'</span>';
+      pill.onclick=()=>{
+        if(hActiveDirs.has(dir)){hActiveDirs.delete(dir);pill.classList.remove('active');}
+        else{hActiveDirs.add(dir);pill.classList.add('active');}
+        nodeG.selectAll('.hier-node').attr('opacity',function(){const nId=this.__data_id;return hActiveDirs.has(nodeMap[nId]?.dir)?1:0.1;});
+      };
+      hFilterRow.appendChild(pill);
+    });
+  }
+
+  // Assign function pointers for cross-view sync
+  hierRelayout = hierRelayoutInner;
+  hierSyncFromTab = hierSyncFromTabInner;
 
   hSvg.call(hZoom.transform,d3.zoomIdentity.translate(
     Math.max(0,(W-totalW)/2),20
   ).scale(Math.min(1,W/(totalW+40),H/(totalH+40))));
+
+  // If a layer tab was already selected, sync hierarchy on first build
+  if (activeLayerFilter) {
+    hierSyncFromTabInner(activeLayerFilter);
+    hierRelayoutInner();
+  }
 }
 
 // \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
@@ -2879,12 +4076,12 @@ if (DIFF) {
       .attr('refX',8).attr('refY',0).attr('markerWidth',7).attr('markerHeight',7).attr('orient','auto')
       .append('path').attr('d','M0,-3.5L8,0L0,3.5Z').attr('fill','#30363d');
 
-    const dLink = dG.append('g').selectAll('line').data(DATA.links).join('line')
-      .attr('stroke','#30363d').attr('stroke-width',1).attr('marker-end','url(#darrow)').attr('opacity',0.3);
-
-    const simNodes = DATA.nodes.map(d=>({...d}));
+    const simNodes = DATA.nodes.map(d=>({...d, x:undefined, y:undefined, vx:undefined, vy:undefined}));
     const simLinks = DATA.links.map(d=>({source:d.source.id??d.source,target:d.target.id??d.target,type:d.type}));
 
+    const dLink = dG.append('g').selectAll('line').data(simLinks).join('line')
+      .attr('stroke','#30363d').attr('stroke-width',1).attr('marker-end','url(#darrow)').attr('opacity',0.3);
+
     const dNode = dG.append('g').selectAll('g').data(simNodes).join('g').attr('cursor','pointer');
     dNode.append('circle')
       .attr('r', d=>nodeRadius(d)*nodeScale)
@@ -2902,22 +4099,116 @@ if (DIFF) {
       .force('link', d3.forceLink(simLinks).id(d=>d.id).distance(70).strength(0.25))
       .force('charge', d3.forceManyBody().strength(-150).distanceMax(500))
       .force('center', d3.forceCenter(0,0))
-      .force('collision', d3.forceCollide().radius(d=>nodeRadius(d)*nodeScale+4))
-      .on('tick', ()=>{
-        dLink.each(function(d){
-          const dx=d.target.x-d.source.x,dy=d.target.y-d.source.y,dist=Math.sqrt(dx*dx+dy*dy)||1;
-          const rT=nodeRadius(d.target)*nodeScale,rS=nodeRadius(d.source)*nodeScale;
+      .force('collision', d3.forceCollide().radius(d=>nodeRadius(d)*nodeScale+4));
+
+    // Layer-aware physics for diff view (same pattern as graph view)
+    var dHullGroup = null;
+    if (LAYERS && LAYERS.length > 0) {
+      var dLayerCenters = {};
+      var dLayerCount = LAYERS.length;
+      var dBaseRadius = Math.max(60, Math.min(W, H) * 0.04 * Math.sqrt(dLayerCount));
+      LAYERS.forEach(function(l, idx) {
+        var angle = (2 * Math.PI * idx) / dLayerCount - Math.PI / 2;
+        dLayerCenters[l.name] = { x: Math.cos(angle) * dBaseRadius, y: Math.sin(angle) * dBaseRadius };
+      });
+      dSim.force('center', null);
+      dSim.force('layerX', d3.forceX(function(d) { return dLayerCenters[d.layer]?.x || 0; }).strength(function(d) { return d.layer ? 0.12 : 0.03; }));
+      dSim.force('layerY', d3.forceY(function(d) { return dLayerCenters[d.layer]?.y || 0; }).strength(function(d) { return d.layer ? 0.12 : 0.03; }));
+      dSim.force('link').strength(function(l) {
+        var sL = l.source.layer ?? l.source, tL = l.target.layer ?? l.target;
+        return sL === tL ? 0.4 : 0.1;
+      });
+      // Cluster force for diff view
+      dSim.force('cluster', (function() {
+        var ns;
+        function f(alpha) {
+          var centroids = {}, counts = {};
+          ns.forEach(function(n) {
+            if (!n.layer) return;
+            if (!centroids[n.layer]) { centroids[n.layer] = {x:0,y:0}; counts[n.layer] = 0; }
+            centroids[n.layer].x += n.x; centroids[n.layer].y += n.y; counts[n.layer]++;
+          });
+          Object.keys(centroids).forEach(function(k) { centroids[k].x /= counts[k]; centroids[k].y /= counts[k]; });
+          ns.forEach(function(n) {
+            if (!n.layer || !centroids[n.layer]) return;
+            n.vx += (centroids[n.layer].x - n.x) * alpha * 0.2;
+            n.vy += (centroids[n.layer].y - n.y) * alpha * 0.2;
+          });
+        }
+        f.initialize = function(n) { ns = n; };
+        return f;
+      })());
+
+      dHullGroup = dG.insert('g', ':first-child');
+    }
+
+    function isDiffNode(id) {
+      return addedSet.has(id) || removedSet.has(id) || modifiedSet.has(id) || affectedSet.has(id);
+    }
+
+    function updateDiffHulls() {
+      if (!dHullGroup) return;
+      dHullGroup.selectAll('*').remove();
+      LAYERS.forEach(function(layer) {
+        var layerNodes = simNodes.filter(function(n) { return n.layer === layer.name; });
+        if (layerNodes.length === 0) return;
+        var hasDiff = layerNodes.some(function(n) { return isDiffNode(n.id); });
+
+        var points = [];
+        layerNodes.forEach(function(n) {
+          if (n.x == null || n.y == null) return;
+          var r = nodeRadius(n) * nodeScale + 30;
+          for (var a = 0; a < Math.PI * 2; a += Math.PI / 4) {
+            points.push([n.x + Math.cos(a) * r, n.y + Math.sin(a) * r]);
+          }
+        });
+
+        var fillOp = hasDiff ? 0.15 : 0.06;
+        var strokeOp = hasDiff ? 0.6 : 0.2;
+        var sw = hasDiff ? 2.5 : 1;
+        if (points.length < 6) {
+          var cx = layerNodes.reduce(function(s, n) { return s + (n.x||0); }, 0) / layerNodes.length;
+          var cy = layerNodes.reduce(function(s, n) { return s + (n.y||0); }, 0) / layerNodes.length;
+          dHullGroup.append('circle').attr('cx', cx).attr('cy', cy).attr('r', 50)
+            .attr('fill', layer.color).attr('fill-opacity', fillOp)
+            .attr('stroke', layer.color).attr('stroke-opacity', strokeOp).attr('stroke-width', sw);
+        } else {
+          var hull = d3.polygonHull(points);
+          if (hull) {
+            dHullGroup.append('path')
+              .attr('d', 'M' + hull.map(function(p) { return p.join(','); }).join('L') + 'Z')
+              .attr('fill', layer.color).attr('fill-opacity', fillOp)
+              .attr('stroke', layer.color).attr('stroke-opacity', strokeOp).attr('stroke-width', sw)
+              .attr('stroke-dasharray', hasDiff ? null : '6,3');
+          }
+        }
+        // Layer name label
+        var lx = layerNodes.reduce(function(s, n) { return s + (n.x||0); }, 0) / layerNodes.length;
+        var ly = Math.min.apply(null, layerNodes.map(function(n) { return n.y||0; })) - 25;
+        dHullGroup.append('text')
+          .attr('x', lx).attr('y', ly).attr('text-anchor', 'middle')
+          .attr('fill', layer.color).attr('fill-opacity', hasDiff ? 0.9 : 0.4)
+          .attr('font-size', 12).attr('font-weight', 600).text(layer.name);
+      });
+    }
+
+    var dTickCount = 0;
+    dSim.on('tick', function() {
+        dLink.each(function(d) {
+          var dx=d.target.x-d.source.x, dy=d.target.y-d.source.y, dist=Math.sqrt(dx*dx+dy*dy)||1;
+          var rT=nodeRadius(d.target)*nodeScale, rS=nodeRadius(d.source)*nodeScale;
           d3.select(this).attr('x1',d.source.x+(dx/dist)*rS).attr('y1',d.source.y+(dy/dist)*rS)
             .attr('x2',d.target.x-(dx/dist)*rT).attr('y2',d.target.y-(dy/dist)*rT);
         });
-        dNode.attr('transform', d=>\`translate(\${d.x},\${d.y})\`);
+        dNode.attr('transform', function(d) { return 'translate('+d.x+','+d.y+')'; });
+        if (++dTickCount % 3 === 0) updateDiffHulls();
       });
 
-    dNode.on('mouseover',(e,d)=>showTooltip(e,d)).on('mousemove',e=>positionTooltip(e)).on('mouseout',()=>scheduleHideTooltip());
+    dNode.on('mouseover',function(e,d) { showTooltip(e,d); }).on('mousemove',function(e) { positionTooltip(e); }).on('mouseout',function() { scheduleHideTooltip(); });
 
-    setTimeout(()=>{
-      const b=dG.node().getBBox();if(!b.width)return;
-      const s=Math.min(W/(b.width+80),H/(b.height+80))*0.9;
+    setTimeout(function() {
+      var b=dG.node().getBBox(); if(!b.width) return;
+      var s=Math.min(W/(b.width+80),H/(b.height+80))*0.9;
       dSvg.call(dZoom.transform,d3.zoomIdentity.translate(W/2-(b.x+b.width/2)*s,H/2-(b.y+b.height/2)*s).scale(s));
     },1500);
   }
@@ -2945,7 +4236,12 @@ applyI18n();
 function startViewer(graph, options = {}) {
   const port = options.port ?? 3e3;
   const locale = options.locale ?? getLocale();
-  const html = buildGraphPage(graph, { locale, diff: options.diff });
+  const html = buildGraphPage(graph, {
+    locale,
+    diff: options.diff,
+    layerMetadata: options.layerMetadata,
+    crossLayerEdges: options.crossLayerEdges
+  });
   const graphJson = JSON.stringify(graph);
   const server = createServer((req, res) => {
     if (req.url === "/api/graph") {
@@ -2964,14 +4260,14 @@ function startViewer(graph, options = {}) {
 }
 
 // src/utils/version.ts
-import { readFileSync as readFileSync2 } from "fs";
-import { join as join5, dirname as dirname2 } from "path";
+import { readFileSync as readFileSync3 } from "fs";
+import { join as join7, dirname as dirname2 } from "path";
 import { fileURLToPath } from "url";
 function loadVersion() {
   let dir = dirname2(fileURLToPath(import.meta.url));
   for (let i = 0; i < 5; i++) {
     try {
-      const pkg = JSON.parse(readFileSync2(join5(dir, "package.json"), "utf-8"));
+      const pkg = JSON.parse(readFileSync3(join7(dir, "package.json"), "utf-8"));
       return pkg.version;
     } catch {
       dir = dirname2(dir);
@@ -2983,6 +4279,37 @@ var VERSION = loadVersion();
 
 // src/cli/index.ts
 var VALID_LANGUAGES = LANGUAGE_IDS;
+async function resolveGraph(opts) {
+  const targetExplicit = process.argv.some((a) => a === "-t" || a === "--target");
+  if (!targetExplicit) {
+    const layerConfig = await loadLayerConfig(opts.root);
+    if (layerConfig) {
+      const multi = await analyzeMultiLayer(opts.root, layerConfig.layers);
+      const autoConnections = detectCrossLayerConnections(multi.layers, layerConfig.layers);
+      const manualConnections = layerConfig.connections ?? [];
+      const manualKeys = new Set(manualConnections.map(
+        (c) => `${c.fromLayer}/${c.fromFile}\u2192${c.toLayer}/${c.toFile}`
+      ));
+      const merged = [
+        ...manualConnections,
+        ...autoConnections.filter(
+          (c) => !manualKeys.has(`${c.fromLayer}/${c.fromFile}\u2192${c.toLayer}/${c.toFile}`)
+        )
+      ];
+      return {
+        graph: multi.merged,
+        multiLayer: multi,
+        layerMetadata: multi.layerMetadata,
+        crossLayerEdges: merged
+      };
+    }
+  }
+  const graph = await analyzeProject(opts.target, {
+    exclude: opts.exclude,
+    language: opts.language
+  });
+  return { graph };
+}
 var program = new Command();
 program.name("archtracker").description(
   "Architecture & Dependency Tracker \u2014 Prevent missed architecture changes in AI-driven development"
@@ -2999,11 +4326,13 @@ program.command("init").description("Generate initial snapshot and save to .arch
   try {
     const language = validateLanguage(opts.language);
     console.log(t("cli.analyzing"));
-    const graph = await analyzeProject(opts.target, {
+    const { graph, multiLayer } = await resolveGraph({
+      target: opts.target,
+      root: opts.root,
       exclude: opts.exclude,
       language
     });
-    const snapshot = await saveSnapshot(opts.root, graph);
+    const snapshot = await saveSnapshot(opts.root, graph, multiLayer);
     console.log(t("cli.snapshotSaved"));
     console.log(t("cli.timestamp", { ts: snapshot.timestamp }));
     console.log(t("cli.fileCount", { count: graph.totalFiles }));
@@ -3034,14 +4363,16 @@ program.command("analyze").description(
   try {
     const language = validateLanguage(opts.language);
     console.log(t("cli.analyzing"));
-    const graph = await analyzeProject(opts.target, {
+    const { graph, multiLayer } = await resolveGraph({
+      target: opts.target,
+      root: opts.root,
       exclude: opts.exclude,
       language
     });
     const report = formatAnalysisReport(graph, { topN: parseInt(opts.top, 10) });
     console.log(report);
     if (opts.save) {
-      await saveSnapshot(opts.root, graph);
+      await saveSnapshot(opts.root, graph, multiLayer);
       console.log(t("analyze.snapshotSaved"));
     }
   } catch (error) {
@@ -3059,7 +4390,11 @@ program.command("check").description(
       process.exit(1);
     }
     console.log(t("cli.analyzing"));
-    const currentGraph = await analyzeProject(opts.target, { language });
+    const { graph: currentGraph } = await resolveGraph({
+      target: opts.target,
+      root: opts.root,
+      language
+    });
     const diff = computeDiff(existingSnapshot.graph, currentGraph);
     const report = formatDiffReport(diff);
     console.log(report);
@@ -3079,8 +4414,12 @@ program.command("context").description(
     let snapshot = await loadSnapshot(opts.root);
     if (!snapshot) {
       console.log(t("cli.autoGenerating"));
-      const graph2 = await analyzeProject(opts.target, { language });
-      snapshot = await saveSnapshot(opts.root, graph2);
+      const result = await resolveGraph({
+        target: opts.target,
+        root: opts.root,
+        language
+      });
+      snapshot = await saveSnapshot(opts.root, result.graph, result.multiLayer);
     }
     const graph = snapshot.graph;
     if (opts.json) {
@@ -3122,18 +4461,24 @@ program.command("serve").description(
     const language = validateLanguage(opts.language);
     console.log(t("web.starting"));
     console.log(t("cli.analyzing"));
-    let graph;
     let diff = null;
+    const result = await resolveGraph({
+      target: opts.target,
+      root: opts.root,
+      exclude: opts.exclude,
+      language
+    });
     const snapshot = await loadSnapshot(opts.root);
     if (snapshot) {
-      const currentGraph = await analyzeProject(opts.target, { exclude: opts.exclude, language });
-      diff = computeDiff(snapshot.graph, currentGraph);
-      graph = currentGraph;
-    } else {
-      graph = await analyzeProject(opts.target, { exclude: opts.exclude, language });
+      diff = computeDiff(snapshot.graph, result.graph);
     }
     const port = parseInt(opts.port, 10);
-    const viewer = startViewer(graph, { port, diff });
+    const viewer = startViewer(result.graph, {
+      port,
+      diff,
+      layerMetadata: result.layerMetadata,
+      crossLayerEdges: result.crossLayerEdges
+    });
     console.log(t("web.listening", { port }));
     console.log(t("web.stop"));
     if (opts.watch) {
@@ -3144,9 +4489,18 @@ program.command("serve").description(
         debounce = setTimeout(async () => {
           try {
             console.log(t("web.reloading"));
-            const newGraph = await analyzeProject(opts.target, { exclude: opts.exclude, language });
+            const newResult = await resolveGraph({
+              target: opts.target,
+              root: opts.root,
+              exclude: opts.exclude,
+              language
+            });
             viewer.close();
-            startViewer(newGraph, { port });
+            startViewer(newResult.graph, {
+              port,
+              layerMetadata: newResult.layerMetadata,
+              crossLayerEdges: newResult.crossLayerEdges
+            });
             console.log(t("web.reloaded"));
           } catch {
           }
@@ -3178,15 +4532,53 @@ jobs:
       - run: npx archtracker check --target ${opts.target} --ci
 `;
   try {
-    const dir = join6(".github", "workflows");
-    await mkdir2(dir, { recursive: true });
-    const path = join6(dir, "arch-check.yml");
-    await writeFile2(path, workflow, "utf-8");
+    const dir = join8(".github", "workflows");
+    await mkdir3(dir, { recursive: true });
+    const path = join8(dir, "arch-check.yml");
+    await writeFile3(path, workflow, "utf-8");
     console.log(t("ci.generated", { path }));
   } catch (error) {
     handleError(error);
   }
 });
+var layersCmd = program.command("layers").description("Manage multi-layer architecture configuration");
+layersCmd.command("init").description("Create a template .archtracker/layers.json").option("-r, --root <dir>", "Project root", ".").action(async (opts) => {
+  try {
+    const existing = await loadLayerConfig(opts.root);
+    if (existing) {
+      console.log(t("layers.alreadyExists"));
+      return;
+    }
+    const config = {
+      version: "1.0",
+      layers: [
+        { name: "Frontend", targetDir: "frontend", description: "UI layer" },
+        { name: "Backend", targetDir: "backend", description: "API layer" }
+      ]
+    };
+    await saveLayerConfig(opts.root, config);
+    console.log(t("layers.created"));
+  } catch (error) {
+    handleError(error);
+  }
+});
+layersCmd.command("list").description("List configured layers").option("-r, --root <dir>", "Project root", ".").action(async (opts) => {
+  try {
+    const config = await loadLayerConfig(opts.root);
+    if (!config) {
+      console.log(t("layers.notFound"));
+      return;
+    }
+    console.log(t("layers.header", { count: config.layers.length }));
+    for (const layer of config.layers) {
+      const lang = layer.language ? ` [${layer.language}]` : "";
+      const desc = layer.description ? ` \u2014 ${layer.description}` : "";
+      console.log(`  ${layer.name}: ${layer.targetDir}${lang}${desc}`);
+    }
+  } catch (error) {
+    handleError(error);
+  }
+});
 function validateLanguage(lang) {
   if (!lang) return void 0;
   if (VALID_LANGUAGES.includes(lang)) return lang;