archtracker-mcp 0.4.3 → 0.6.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,61 +1792,546 @@ function formatAnalysisReport(graph, options = {}) {
   return lines.join("\n");
 }
 
-// src/storage/snapshot.ts
-import { mkdir, writeFile, readFile as readFile2, access } from "fs/promises";
-import { join as join4 } from "path";
+// 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/layers.ts
+import { readFile as readFile2, writeFile, mkdir } from "fs/promises";
+import { join as join5 } from "path";
 import { z } from "zod";
+var ARCHTRACKER_DIR = ".archtracker";
+var LAYERS_FILE = "layers.json";
+var LayerDefinitionSchema = z.object({
+  name: z.string().min(1).regex(
+    /^[a-zA-Z0-9_-]+$/,
+    "Layer name must be alphanumeric (hyphens/underscores allowed)"
+  ),
+  targetDir: z.string().min(1),
+  language: z.enum(LANGUAGE_IDS).optional(),
+  exclude: z.array(z.string()).optional(),
+  color: z.string().optional(),
+  description: z.string().optional()
+});
+var CrossLayerConnectionSchema = z.object({
+  fromLayer: z.string(),
+  fromFile: z.string(),
+  toLayer: z.string(),
+  toFile: z.string(),
+  type: z.enum(["api-call", "event", "data-flow", "manual"]),
+  label: z.string().optional()
+});
+var LayerConfigSchema = z.object({
+  version: z.literal("1.0"),
+  layers: z.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: z.array(CrossLayerConnectionSchema).optional()
+});
+async function loadLayerConfig(projectRoot) {
+  const filePath = join5(projectRoot, ARCHTRACKER_DIR, LAYERS_FILE);
+  let raw;
+  try {
+    raw = await readFile2(filePath, "utf-8");
+  } catch (error) {
+    if (isNodeError(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 = join5(projectRoot, ARCHTRACKER_DIR);
+  const filePath = join5(dirPath, LAYERS_FILE);
+  await mkdir(dirPath, { recursive: true });
+  await writeFile(filePath, JSON.stringify(config, null, 2) + "\n", "utf-8");
+}
+function isNodeError(error) {
+  return error instanceof Error && "code" in error;
+}
+
+// src/analyzer/resolve.ts
+async function resolveGraph(opts) {
+  const layerConfig = await loadLayerConfig(opts.projectRoot);
+  if (layerConfig) {
+    const multi = await analyzeMultiLayer(opts.projectRoot, 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.targetDir, {
+    exclude: opts.exclude,
+    language: opts.language
+  });
+  return { graph };
+}
+
+// src/storage/snapshot.ts
+import { mkdir as mkdir2, writeFile as writeFile2, readFile as readFile3, access } from "fs/promises";
+import { join as join6 } from "path";
+import { z as z2 } from "zod";
 
 // src/types/schema.ts
-var SCHEMA_VERSION = "1.0";
+var SCHEMA_VERSION = "1.1";
 
 // src/storage/snapshot.ts
-var ARCHTRACKER_DIR = ".archtracker";
+var ARCHTRACKER_DIR2 = ".archtracker";
 var SNAPSHOT_FILE = "snapshot.json";
-var FileNodeSchema = z.object({
-  path: z.string(),
-  exists: z.boolean(),
-  dependencies: z.array(z.string()),
-  dependents: z.array(z.string())
+var FileNodeSchema = z2.object({
+  path: z2.string(),
+  exists: z2.boolean(),
+  dependencies: z2.array(z2.string()),
+  dependents: z2.array(z2.string())
 });
-var DependencyGraphSchema = z.object({
-  rootDir: z.string(),
-  files: z.record(z.string(), FileNodeSchema),
-  edges: z.array(z.object({
-    source: z.string(),
-    target: z.string(),
-    type: z.enum(["static", "dynamic", "type-only"])
+var DependencyGraphSchema = z2.object({
+  rootDir: z2.string(),
+  files: z2.record(z2.string(), FileNodeSchema),
+  edges: z2.array(z2.object({
+    source: z2.string(),
+    target: z2.string(),
+    type: z2.enum(["static", "dynamic", "type-only"])
   })),
-  circularDependencies: z.array(z.object({ cycle: z.array(z.string()) })),
-  totalFiles: z.number(),
-  totalEdges: z.number()
+  circularDependencies: z2.array(z2.object({ cycle: z2.array(z2.string()) })),
+  totalFiles: z2.number(),
+  totalEdges: z2.number()
 });
-var SnapshotSchema = z.object({
-  version: z.literal(SCHEMA_VERSION),
-  timestamp: z.string(),
-  rootDir: z.string(),
+var SnapshotSchema = z2.object({
+  version: z2.enum([SCHEMA_VERSION, "1.0"]),
+  timestamp: z2.string(),
+  rootDir: z2.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 = join6(projectRoot, ARCHTRACKER_DIR2);
+  const filePath = join6(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");
+  await mkdir2(dirPath, { recursive: true });
+  await writeFile2(filePath, JSON.stringify(snapshot, null, 2), "utf-8");
   return snapshot;
 }
 async function loadSnapshot(projectRoot) {
-  const filePath = join4(projectRoot, ARCHTRACKER_DIR, SNAPSHOT_FILE);
+  const filePath = join6(projectRoot, ARCHTRACKER_DIR2, SNAPSHOT_FILE);
   let raw;
   try {
-    raw = await readFile2(filePath, "utf-8");
+    raw = await readFile3(filePath, "utf-8");
   } catch (error) {
-    if (isNodeError(error) && error.code === "ENOENT") {
+    if (isNodeError2(error) && error.code === "ENOENT") {
       return null;
     }
     throw new StorageError(
@@ -1795,7 +2362,7 @@ var StorageError = class extends Error {
     this.name = "StorageError";
   }
 };
-function isNodeError(error) {
+function isNodeError2(error) {
   return error instanceof Error && "code" in error;
 }
 
@@ -1899,42 +2466,9 @@ function arraysEqual(a, b) {
 // src/web/server.ts
 import { createServer } from "http";
 
-// src/web/template.ts
-function buildGraphPage(graph, options = {}) {
-  const locale = options.locale ?? "en";
-  const diff = options.diff ?? null;
-  const files = Object.values(graph.files);
-  const nodes = files.map((f) => ({
-    id: f.path,
-    deps: f.dependencies.length,
-    dependents: f.dependents.length,
-    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("/")) : "."
-  }));
-  const links = graph.edges.map((e) => ({
-    source: e.source,
-    target: e.target,
-    type: e.type
-  }));
-  const circularFiles = /* @__PURE__ */ new Set();
-  for (const c of graph.circularDependencies) {
-    for (const f of c.cycle) circularFiles.add(f);
-  }
-  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 graphData = JSON.stringify({ nodes, links, circularFiles: [...circularFiles], dirs, projectName });
-  return (
-    /* html */
-    `<!DOCTYPE html>
-<html lang="${locale}">
-<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<title>${projectName} \u2014 Architecture Viewer</title>
-<style>
+// src/web/styles.ts
+function buildStyles() {
+  return `<style>
 :root {
   --bg: #0d1117; --bg-card: #161b22; --bg-hover: #1c2129;
   --border: #30363d; --border-active: #58a6ff;
@@ -1989,13 +2523,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; }
@@ -2052,18 +2598,42 @@ kbd { background: #21262d; border: 1px solid var(--border); border-radius: 3px;
 #impact-btn.active { background: var(--accent) !important; color: #fff !important; border-color: var(--accent) !important; }
 #impact-badge { position: absolute; bottom: 52px; left: 12px; z-index: 10; display: none; background: var(--accent); color: #fff; font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: var(--radius); }
 
+/* \u2500\u2500\u2500 Diff focus button \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+#diff-focus-btn.active { background: var(--accent) !important; color: #fff !important; border-color: var(--accent) !important; }
+
 /* \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; }
-</style>
-</head>
-<body>
 
+/* \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>`;
+}
+
+// src/web/viewer-html.ts
+function buildViewerHtml() {
+  return `
 <!-- Tab bar -->
 <div id="tab-bar">
   <span class="logo" id="project-title" contenteditable="true" spellcheck="false" title="Click to edit project name"></span>
   <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 +2674,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 +2686,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 +2711,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,11 +2725,14 @@ 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>
-    <button onclick="zoomFit()" title="Fit">\u22A1</button>
+    <button onclick="zoomFit()" title="Fit">\u229E</button>
     <button id="impact-btn" onclick="toggleImpactMode()" title="Impact simulation" style="font-size:12px;margin-top:4px" data-i18n="impact.btn">Impact</button>
   </div>
   <div id="impact-badge"></div>
@@ -2171,22 +2756,35 @@ 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>
 
 <!-- Diff View -->
 <div id="diff-view" class="view">
   <svg id="diff-svg"></svg>
-  <div id="diff-legend" style="position:absolute;top:12px;left:12px;z-index:10;">
+  <div id="diff-hud" style="position:absolute;top:12px;left:12px;z-index:10;display:flex;flex-direction:column;gap:8px;">
     <div class="hud-panel">
-      <div class="legend-item"><div class="legend-dot" style="background:var(--green)"></div> <span data-i18n="diff.addedLabel">Added</span></div>
-      <div class="legend-item"><div class="legend-dot" style="background:var(--red)"></div> <span data-i18n="diff.removedLabel">Removed</span></div>
-      <div class="legend-item"><div class="legend-dot" style="background:var(--yellow)"></div> <span data-i18n="diff.modifiedLabel">Modified</span></div>
-      <div class="legend-item"><div class="legend-dot" style="background:var(--accent)"></div> <span data-i18n="diff.affectedLabel">Affected</span></div>
+      <div class="legend-item"><div class="legend-dot" style="background:var(--green)"></div> <span data-i18n="diff.addedLabel">Added</span> <b id="diff-added-count" style="margin-left:auto">0</b></div>
+      <div class="legend-item"><div class="legend-dot" style="background:var(--red)"></div> <span data-i18n="diff.removedLabel">Removed</span> <b id="diff-removed-count" style="margin-left:auto">0</b></div>
+      <div class="legend-item"><div class="legend-dot" style="background:var(--yellow)"></div> <span data-i18n="diff.modifiedLabel">Modified</span> <b id="diff-modified-count" style="margin-left:auto">0</b></div>
+      <div class="legend-item"><div class="legend-dot" style="background:var(--accent)"></div> <span data-i18n="diff.affectedLabel">Affected</span> <b id="diff-affected-count" style="margin-left:auto">0</b></div>
+      <div style="margin-top:6px;border-top:1px solid var(--border);padding-top:6px;">
+        <button id="diff-focus-btn" onclick="toggleDiffFocus()" style="background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:4px 10px;cursor:pointer;color:var(--text-dim);font-size:11px;width:100%;transition:all 0.15s;" data-i18n="diff.focusChanges">Focus changes</button>
+      </div>
     </div>
   </div>
-  <div id="help-bar" style="position:absolute" data-i18n="help.diff">Green=added \xB7 Red=removed \xB7 Yellow=modified \xB7 Blue=affected</div>
+  <div id="diff-detail" style="position:absolute;top:12px;right:12px;width:280px;z-index:10;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:16px;font-size:13px;display:none;max-height:calc(100vh - 100px);overflow-y:auto;transition:background 0.3s;">
+    <button class="close-btn" onclick="closeDiffDetail()" style="position:absolute;top:8px;right:10px;background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:16px;">\u2715</button>
+    <div class="detail-name" id="dd-name"></div>
+    <div id="dd-status" style="margin:6px 0;font-size:12px;font-weight:600;"></div>
+    <div class="detail-meta" id="dd-meta"></div>
+    <div class="detail-section"><h4 data-i18n="diff.affectedByChange">Affected by this change</h4><ul class="detail-list" id="dd-affected"></ul></div>
+    <div class="detail-section"><h4 data-i18n="detail.imports">Imports</h4><ul class="detail-list" id="dd-deps"></ul></div>
+  </div>
+  <div id="help-bar" style="position:absolute" data-i18n="help.diff">Green=added \xB7 Red=removed \xB7 Yellow=modified \xB7 Blue=affected \xB7 Click: impact chain</div>
 </div>
 
 <!-- Tooltip (shared, interactive) -->
@@ -2197,79 +2795,798 @@ kbd { background: #21262d; border: 1px solid var(--border); border-radius: 3px;
     <span class="tt-badge tt-in" id="tt-dpt-count" style="margin-left:6px"></span> <span data-i18n="tooltip.importedBy">imported by</span>
   </div>
   <div class="tt-section" id="tt-details"></div>
-</div>
-
-<script src="https://d3js.org/d3.v7.min.js"></script>
-<script>
-// \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
-// i18n
-// \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 I18N = {
-  en: {
-    'tab.graph': 'Graph', 'tab.hierarchy': 'Hierarchy',
-    'stats.files': 'Files', 'stats.edges': 'Edges', 'stats.circular': 'Circular',
-    'settings.title': 'Settings', 'settings.theme': 'Theme', 'settings.fontSize': 'Font Size',
-    'settings.nodeSize': 'Node Size', 'settings.linkOpacity': 'Link Opacity', 'settings.gravity': 'Gravity', 'settings.language': 'Language', 'settings.export': 'Export',
-    'impact.title': 'Impact Simulation', 'impact.btn': 'Impact', 'impact.transitive': 'files affected',
-    'search.placeholder': 'Search files...',
-    'legend.circular': 'Circular dep', 'legend.orphan': 'Orphan', 'legend.highCoupling': 'High coupling',
-    'legend.imports': 'imports', 'legend.importedBy': 'imported by',
-    'detail.importedBy': 'Imported by', 'detail.imports': 'Imports',
-    'detail.none': 'none', 'detail.dir': 'Dir', 'detail.dependencies': 'Dependencies', 'detail.dependents': 'Dependents',
-    'tooltip.imports': 'imports', 'tooltip.importedBy': 'imported by',
-    'help.graph': 'Scroll: zoom \xB7 Drag: pan \xB7 Click: select \xB7 / search',
-    'help.hierarchy': 'Scroll to navigate \xB7 Click to highlight',
-    'help.diff': 'Green=added \xB7 Red=removed \xB7 Yellow=modified \xB7 Blue=affected',
-    'tab.diff': 'Diff',
-    'diff.addedLabel': 'Added', 'diff.removedLabel': 'Removed', 'diff.modifiedLabel': 'Modified', 'diff.affectedLabel': 'Affected',
-  },
-  ja: {
-    'tab.graph': '\u30B0\u30E9\u30D5', 'tab.hierarchy': '\u968E\u5C64\u56F3',
-    'stats.files': '\u30D5\u30A1\u30A4\u30EB', 'stats.edges': '\u30A8\u30C3\u30B8', 'stats.circular': '\u5FAA\u74B0\u53C2\u7167',
-    'settings.title': '\u8A2D\u5B9A', 'settings.theme': '\u30C6\u30FC\u30DE', 'settings.fontSize': '\u30D5\u30A9\u30F3\u30C8\u30B5\u30A4\u30BA',
-    'settings.nodeSize': '\u30CE\u30FC\u30C9\u30B5\u30A4\u30BA', 'settings.linkOpacity': '\u30EA\u30F3\u30AF\u900F\u660E\u5EA6', 'settings.gravity': '\u91CD\u529B', 'settings.language': '\u8A00\u8A9E', 'settings.export': '\u30A8\u30AF\u30B9\u30DD\u30FC\u30C8',
-    'impact.title': '\u5F71\u97FF\u7BC4\u56F2\u30B7\u30DF\u30E5\u30EC\u30FC\u30B7\u30E7\u30F3', 'impact.btn': '\u5F71\u97FF', 'impact.transitive': '\u30D5\u30A1\u30A4\u30EB\u306B\u5F71\u97FF',
-    'search.placeholder': '\u30D5\u30A1\u30A4\u30EB\u691C\u7D22...',
-    'legend.circular': '\u5FAA\u74B0\u53C2\u7167', 'legend.orphan': '\u5B64\u7ACB', 'legend.highCoupling': '\u9AD8\u7D50\u5408',
-    'legend.imports': 'import\u5148', 'legend.importedBy': 'import\u5143',
-    'detail.importedBy': 'import\u5143', 'detail.imports': 'import\u5148',
-    'detail.none': '\u306A\u3057', 'detail.dir': '\u30C7\u30A3\u30EC\u30AF\u30C8\u30EA', 'detail.dependencies': '\u4F9D\u5B58\u5148', 'detail.dependents': '\u88AB\u4F9D\u5B58',
-    'tooltip.imports': 'import\u5148', 'tooltip.importedBy': 'import\u5143',
-    'help.graph': '\u30B9\u30AF\u30ED\u30FC\u30EB: \u30BA\u30FC\u30E0 \xB7 \u30C9\u30E9\u30C3\u30B0: \u79FB\u52D5 \xB7 \u30AF\u30EA\u30C3\u30AF: \u9078\u629E \xB7 / \u691C\u7D22',
-    'help.hierarchy': '\u30B9\u30AF\u30ED\u30FC\u30EB\u3067\u79FB\u52D5 \xB7 \u30AF\u30EA\u30C3\u30AF\u3067\u30CF\u30A4\u30E9\u30A4\u30C8',
-    'help.diff': '\u7DD1=\u8FFD\u52A0 \xB7 \u8D64=\u524A\u9664 \xB7 \u9EC4=\u5909\u66F4 \xB7 \u9752=\u5F71\u97FF',
-    'tab.diff': '\u5DEE\u5206',
-    'diff.addedLabel': '\u8FFD\u52A0', 'diff.removedLabel': '\u524A\u9664', 'diff.modifiedLabel': '\u5909\u66F4', 'diff.affectedLabel': '\u5F71\u97FF',
-  }
-};
-let currentLang = '${locale}';
-function applyI18n() {
-  const msgs = I18N[currentLang] || I18N.en;
-  document.querySelectorAll('[data-i18n]').forEach(el => {
-    const key = el.getAttribute('data-i18n');
-    if (msgs[key]) el.textContent = msgs[key];
-  });
-  document.querySelectorAll('[data-i18n-placeholder]').forEach(el => {
-    const key = el.getAttribute('data-i18n-placeholder');
-    if (msgs[key]) el.placeholder = msgs[key];
-  });
-  document.querySelectorAll('.lang-btn').forEach(b => b.classList.toggle('active', b.dataset.lang === currentLang));
+</div>`;
 }
-window.setLang = (lang) => { currentLang = lang; applyI18n(); saveSettings(); };
-function i(key) { return (I18N[currentLang] || I18N.en)[key] || key; }
 
+// src/web/js-hierarchy.ts
+function buildHierarchyJs() {
+  return `
 // \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
-// SETTINGS (persisted to localStorage)
+// HIERARCHY VIEW
 // \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 };
-  try { localStorage.setItem(STORAGE_KEY, JSON.stringify(s)); } catch(e) {}
-}
-function loadSettings() {
-  try { return JSON.parse(localStorage.getItem(STORAGE_KEY)) || null; } catch(e) { return null; }
-}
-
+function buildHierarchy(){
+  const hSvg=d3.select('#hier-svg');
+  const hG=hSvg.append('g');
+  const hZoom=d3.zoom().scaleExtent([0.1,4]).on('zoom',e=>hG.attr('transform',e.transform));
+  hSvg.call(hZoom);
+
+  const nodeMap={}; DATA.nodes.forEach(n=>nodeMap[n.id]=n);
+  const importsMap={}; DATA.links.forEach(l=>{const s=l.source.id??l.source,t=l.target.id??l.target;if(!importsMap[s])importsMap[s]=[];importsMap[s].push(t);});
+
+  const entryPoints=DATA.nodes.filter(n=>n.dependents===0).map(n=>n.id);
+  const layers={};const visited=new Set();
+  const queue=entryPoints.map(id=>({id,layer:0}));
+  DATA.nodes.forEach(n=>{if(n.isOrphan)layers[n.id]=0;});
+
+  while(queue.length>0){
+    const{id,layer}=queue.shift();
+    if(visited.has(id)&&(layers[id]??-1)>=layer)continue;
+    layers[id]=Math.max(layers[id]??0,layer);visited.add(id);
+    (importsMap[id]||[]).forEach(t=>queue.push({id:t,layer:layer+1}));
+  }
+  DATA.nodes.forEach(n=>{if(!(n.id in layers))layers[n.id]=0;});
+
+  const maxLayer=Math.max(0,...Object.values(layers));
+  const layerGroups={};
+  for(let i=0;i<=maxLayer;i++)layerGroups[i]=[];
+  Object.entries(layers).forEach(([id,l])=>layerGroups[l].push(id));
+  Object.values(layerGroups).forEach(arr=>arr.sort((a,b)=>(nodeMap[a]?.dir||'').localeCompare(nodeMap[b]?.dir||'')||a.localeCompare(b)));
+
+  const boxW=200,boxH=30,gapX=24,gapY=70,padY=60,padX=40;
+  const positions={};let maxRowWidth=0;
+  for(let layer=0;layer<=maxLayer;layer++){const items=layerGroups[layer];maxRowWidth=Math.max(maxRowWidth,items.length*(boxW+gapX)-gapX);}
+  for(let layer=0;layer<=maxLayer;layer++){
+    const items=layerGroups[layer],rowWidth=items.length*(boxW+gapX)-gapX,startX=padX+(maxRowWidth-rowWidth)/2;
+    items.forEach((id,i)=>{positions[id]={x:startX+i*(boxW+gapX),y:padY+layer*(boxH+gapY)};});
+  }
+
+  const totalW=maxRowWidth+padX*2,totalH=padY*2+(maxLayer+1)*(boxH+gapY);
+  hSvg.attr('width',Math.max(totalW,W)).attr('height',Math.max(totalH,H));
+
+  const linkG=hG.append('g');
+  DATA.links.forEach(l=>{
+    const sId=l.source.id??l.source,tId=l.target.id??l.target;
+    const s=positions[sId],t=positions[tId]; if(!s||!t)return;
+    const x1=s.x+boxW/2,y1=s.y+boxH,x2=t.x+boxW/2,y2=t.y,midY=(y1+y2)/2;
+    linkG.append('path').attr('class','hier-link')
+      .attr('d',\`M\${x1},\${y1} C\${x1},\${midY} \${x2},\${midY} \${x2},\${y2}\`)
+      .attr('stroke',l.type==='type-only'?'#1f3d5c':'var(--border)')
+      .attr('stroke-dasharray',l.type==='type-only'?'4,3':null)
+      .attr('data-source',sId).attr('data-target',tId);
+  });
+
+  hSvg.append('defs').append('marker').attr('id','harrow').attr('viewBox','0 -3 6 6')
+    .attr('refX',6).attr('refY',0).attr('markerWidth',6).attr('markerHeight',6).attr('orient','auto')
+    .append('path').attr('d','M0,-3L6,0L0,3Z').attr('fill','var(--border)');
+  linkG.selectAll('path').attr('marker-end','url(#harrow)');
+
+  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);
+  }
+
+  const nodeG=hG.append('g');
+  DATA.nodes.forEach(n=>{
+    const pos=positions[n.id]; if(!pos)return;
+    const gn=nodeG.append('g').attr('class','hier-node').attr('transform',\`translate(\${pos.x},\${pos.y})\`);
+    gn.append('rect').attr('width',boxW).attr('height',boxH)
+      .attr('fill','var(--bg-card)').attr('stroke',nodeColor(n))
+      .attr('stroke-width',circularSet.has(n.id)?2:1.5);
+    gn.append('text').attr('x',8).attr('y',boxH/2+4).attr('font-size',11)
+      .text(fileName(n.id).length>24?fileName(n.id).slice(0,22)+'\\u2026':fileName(n.id));
+    gn.append('text').attr('x',boxW-8).attr('y',boxH/2+4)
+      .attr('text-anchor','end').attr('font-size',10).attr('fill','var(--text-muted)')
+      .text(n.dependents>0?'\\u2191'+n.dependents:'');
+    gn.append('text').attr('x',8).attr('y',-4).attr('font-size',9)
+      .attr('fill',dirColor(n.dir)).attr('opacity',0.7).text(n.dir);
+
+    gn.node().__data_id=n.id;
+    gn.on('mouseover',e=>{
+      showTooltip(e,n);
+      if (!hierPinned) hierHighlight(n.id);
+    })
+    .on('mousemove',e=>positionTooltip(e))
+    .on('mouseout',()=>{
+      scheduleHideTooltip();
+      if (!hierPinned) hierResetHighlight();
+    })
+    .on('click',(e)=>{
+      e.stopPropagation();
+      hierPinned=n.id;
+      hierHighlight(n.id);
+      showHierDetail(n);
+    });
+  });
+
+  // Hierarchy highlight helpers
+  let hierPinned=null;
+  function hierHighlight(nId){
+    linkG.selectAll('path')
+      .attr('stroke',function(){const s=this.getAttribute('data-source'),t=this.getAttribute('data-target');if(s===nId)return'#58a6ff';if(t===nId)return'#3fb950';return this.getAttribute('stroke-dasharray')?'#1f3d5c':'var(--border)';})
+      .attr('stroke-width',function(){const s=this.getAttribute('data-source'),t=this.getAttribute('data-target');return(s===nId||t===nId)?2.5:1;})
+      .attr('opacity',function(){const s=this.getAttribute('data-source'),t=this.getAttribute('data-target');return(s===nId||t===nId)?1:0.15;});
+    nodeG.selectAll('.hier-node').attr('opacity',function(){
+      const id=this.__data_id; if(id===nId)return 1;
+      const connected=DATA.links.some(l=>{const s=l.source.id??l.source,t=l.target.id??l.target;return(s===nId&&t===id)||(t===nId&&s===id);});
+      return connected?1:0.3;
+    });
+  }
+  function hierResetHighlight(){
+    hierPinned=null;
+    linkG.selectAll('path')
+      .attr('stroke',function(){return this.getAttribute('stroke-dasharray')?'#1f3d5c':'var(--border)';})
+      .attr('stroke-width',1).attr('opacity',1);
+    nodeG.selectAll('.hier-node').attr('opacity',1);
+  }
+  function showHierDetail(n){
+    const p=document.getElementById('hier-detail');
+    document.getElementById('hd-name').textContent=n.id;
+    document.getElementById('hd-meta').innerHTML=i('detail.dir')+': '+esc(n.dir)+'<br>'+i('detail.dependencies')+': '+n.deps+' \\u00b7 '+i('detail.dependents')+': '+n.dependents;
+    document.getElementById('hd-dependents').innerHTML=(n.dependentsList||[]).map(x=>'<li>\\u2190 '+esc(x)+'</li>').join('')||'<li style="color:var(--text-muted)">'+i('detail.none')+'</li>';
+    document.getElementById('hd-deps').innerHTML=(n.dependencies||[]).map(x=>'<li>\\u2192 '+esc(x)+'</li>').join('')||'<li style="color:var(--text-muted)">'+i('detail.none')+'</li>';
+    p.classList.add('open');
+  }
+  window.closeHierDetail=()=>{document.getElementById('hier-detail').classList.remove('open');hierResetHighlight();tooltip.style.display='none';tooltipLocked=false;};
+
+  // Click on empty space to deselect
+  hSvg.on('click',()=>{closeHierDetail();});
+
+  // 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();
+    };
+    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:'+esc(layer.color)+'"></div>'+esc(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>'+esc(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 layers were already filtered in graph view, sync hierarchy on first build
+  if (activeLayers.size > 0) {
+    hierSyncFromTabInner();
+    hierRelayoutInner();
+  }
+}
+`;
+}
+
+// src/web/js-diff.ts
+function buildDiffJs(diffData) {
+  return `
+// \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
+// DIFF VIEW
+// \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 DIFF = ${diffData};
+if (DIFF) {
+  document.getElementById('diff-tab').style.display = '';
+  const addedSet = new Set(DIFF.added||[]);
+  const removedSet = new Set(DIFF.removed||[]);
+  const modifiedSet = new Set(DIFF.modified||[]);
+  const affectedSet = new Set((DIFF.affectedDependents||[]).map(a=>a.file));
+
+  // Populate summary counts
+  document.getElementById('diff-added-count').textContent = addedSet.size;
+  document.getElementById('diff-removed-count').textContent = removedSet.size;
+  document.getElementById('diff-modified-count').textContent = modifiedSet.size;
+  document.getElementById('diff-affected-count').textContent = affectedSet.size;
+
+  function isDiffNode(id) {
+    return addedSet.has(id) || removedSet.has(id) || modifiedSet.has(id) || affectedSet.has(id);
+  }
+
+  function diffStatus(id) {
+    if (addedSet.has(id)) return 'Added';
+    if (removedSet.has(id)) return 'Removed';
+    if (modifiedSet.has(id)) return 'Modified';
+    if (affectedSet.has(id)) return 'Affected';
+    return 'Unchanged';
+  }
+
+  function diffStatusColor(id) {
+    if (addedSet.has(id)) return 'var(--green)';
+    if (removedSet.has(id)) return 'var(--red)';
+    if (modifiedSet.has(id)) return 'var(--yellow)';
+    if (affectedSet.has(id)) return 'var(--accent)';
+    return 'var(--text-muted)';
+  }
+
+  // Build reverse dependency map for impact chain
+  var diffRevMap = {};
+  DATA.links.forEach(function(l) {
+    var s = l.source.id ?? l.source, t = l.target.id ?? l.target;
+    if (!diffRevMap[t]) diffRevMap[t] = [];
+    diffRevMap[t].push(s);
+  });
+
+  function getImpactChain(startId) {
+    var result = new Set();
+    var queue = [startId];
+    while (queue.length) {
+      var id = queue.shift();
+      if (result.has(id)) continue;
+      result.add(id);
+      (diffRevMap[id] || []).forEach(function(x) { queue.push(x); });
+    }
+    return result;
+  }
+
+  let diffFocusMode = false;
+  var dNode, dLink, dSim, simNodes, simLinks;
+
+  window.toggleDiffFocus = function() {
+    diffFocusMode = !diffFocusMode;
+    var btn = document.getElementById('diff-focus-btn');
+    btn.classList.toggle('active', diffFocusMode);
+    btn.textContent = diffFocusMode ? i('diff.showAll') : i('diff.focusChanges');
+    if (!diffBuilt) return;
+    applyDiffFilter();
+  };
+
+  window.closeDiffDetail = function() {
+    document.getElementById('diff-detail').style.display = 'none';
+    if (diffBuilt) resetDiffHighlight();
+  };
+
+  function applyDiffFilter() {
+    dNode.attr('display', function(d) {
+      if (!diffFocusMode) return null;
+      return isDiffNode(d.id) ? null : 'none';
+    });
+    dNode.select('circle')
+      .attr('opacity', function(d) {
+        if (diffFocusMode) return isDiffNode(d.id) ? 1 : 0;
+        return isDiffNode(d.id) ? 1 : 0.12;
+      });
+    dNode.select('text')
+      .attr('opacity', function(d) {
+        if (diffFocusMode) return isDiffNode(d.id) ? 1 : 0;
+        return isDiffNode(d.id) ? 1 : 0.08;
+      });
+    dLink.attr('display', function(l) {
+      if (!diffFocusMode) return null;
+      var s = l.source.id ?? l.source, t = l.target.id ?? l.target;
+      return (isDiffNode(s) && isDiffNode(t)) ? null : 'none';
+    });
+    dLink.attr('opacity', function(l) {
+      var s = l.source.id ?? l.source, t = l.target.id ?? l.target;
+      if (isDiffNode(s) && isDiffNode(t)) return 0.6;
+      if (isDiffNode(s) || isDiffNode(t)) return 0.15;
+      return diffFocusMode ? 0 : 0.05;
+    });
+    dLink.attr('stroke', function(l) {
+      var s = l.source.id ?? l.source, t = l.target.id ?? l.target;
+      if (isDiffNode(s) && isDiffNode(t)) return diffStatusColor(s);
+      return '#30363d';
+    });
+    dNode.select('circle')
+      .attr('stroke-width', function(d) { return isDiffNode(d.id) ? 3 : 1; });
+  }
+
+  function resetDiffHighlight() {
+    applyDiffFilter();
+  }
+
+  function highlightDiffImpact(d) {
+    var chain = getImpactChain(d.id);
+    dNode.select('circle').transition().duration(200)
+      .attr('opacity', function(n) { return chain.has(n.id) ? 1 : 0.04; })
+      .attr('stroke-width', function(n) { return chain.has(n.id) && n.id !== d.id ? 3 : isDiffNode(n.id) ? 3 : 1; })
+      .attr('stroke', function(n) { return chain.has(n.id) && n.id !== d.id ? 'var(--red)' : diffStatusColor(n.id); });
+    dNode.select('text').transition().duration(200)
+      .attr('opacity', function(n) { return chain.has(n.id) ? 1 : 0.03; });
+    dLink.transition().duration(200)
+      .attr('opacity', function(l) {
+        var s = l.source.id ?? l.source, t = l.target.id ?? l.target;
+        return (chain.has(s) && chain.has(t)) ? 0.8 : 0.03;
+      })
+      .attr('stroke', function(l) {
+        var s = l.source.id ?? l.source, t = l.target.id ?? l.target;
+        return (chain.has(s) && chain.has(t)) ? 'var(--red)' : '#30363d';
+      });
+    return chain;
+  }
+
+  function showDiffDetail(d) {
+    var panel = document.getElementById('diff-detail');
+    document.getElementById('dd-name').textContent = d.id;
+    var statusEl = document.getElementById('dd-status');
+    statusEl.textContent = diffStatus(d.id);
+    statusEl.style.color = diffStatusColor(d.id);
+    document.getElementById('dd-meta').innerHTML = i('detail.dir') + ': ' + esc(d.dir) + '<br>' + i('detail.dependencies') + ': ' + d.deps + ' \\u00b7 ' + i('detail.dependents') + ': ' + d.dependents;
+
+    // Show impact chain
+    var chain = getImpactChain(d.id);
+    chain.delete(d.id);
+    var affectedList = document.getElementById('dd-affected');
+    if (chain.size > 0) {
+      affectedList.innerHTML = Array.from(chain).map(function(id) {
+        return '<li style="color:' + diffStatusColor(id) + '">\\u2190 ' + esc(id) + ' <span style="font-size:10px;color:var(--text-muted)">(' + diffStatus(id) + ')</span></li>';
+      }).join('');
+    } else {
+      affectedList.innerHTML = '<li style="color:var(--text-muted)">' + i('diff.noImpact') + '</li>';
+    }
+
+    // Show imports
+    var depsList = document.getElementById('dd-deps');
+    depsList.innerHTML = (d.dependencies || []).map(function(x) {
+      return '<li style="color:' + diffStatusColor(x) + '">\\u2192 ' + esc(x) + '</li>';
+    }).join('') || '<li style="color:var(--text-muted)">' + i('detail.none') + '</li>';
+
+    panel.style.display = 'block';
+  }
+
+  function buildDiffView() {
+    const dSvg = d3.select('#diff-svg').attr('width', W).attr('height', H);
+    const dG = dSvg.append('g');
+    const dZoom = d3.zoom().scaleExtent([0.05,10]).on('zoom', e=>dG.attr('transform',e.transform));
+    dSvg.call(dZoom);
+
+    function diffColor(d) {
+      if (addedSet.has(d.id)) return 'var(--green)';
+      if (removedSet.has(d.id)) return 'var(--red)';
+      if (modifiedSet.has(d.id)) return 'var(--yellow)';
+      if (affectedSet.has(d.id)) return 'var(--accent)';
+      return '#30363d';
+    }
+
+    const dDefs = dSvg.append('defs');
+    dDefs.append('marker').attr('id','darrow').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','#30363d');
+    // Colored arrow markers for diff edges
+    [['var(--green)','darrow-g'],['var(--red)','darrow-r'],['var(--yellow)','darrow-y'],['var(--accent)','darrow-a']].forEach(function(pair) {
+      dDefs.append('marker').attr('id',pair[1]).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',pair[0]);
+    });
+
+    simNodes = DATA.nodes.map(d=>({...d, x:undefined, y:undefined, vx:undefined, vy:undefined}));
+    simLinks = DATA.links.map(d=>({source:d.source.id??d.source,target:d.target.id??d.target,type:d.type}));
+
+    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.05);
+
+    dNode = dG.append('g').selectAll('g').data(simNodes).join('g').attr('cursor','pointer');
+    dNode.append('circle')
+      .attr('r', d=>nodeRadius(d)*nodeScale)
+      .attr('fill', diffColor)
+      .attr('stroke', diffColor).attr('stroke-width', d=>isDiffNode(d.id)?3:1)
+      .attr('opacity', d=>isDiffNode(d.id)?1:0.12);
+    dNode.append('text')
+      .text(d=>fileName(d.id).replace(/\\.tsx?$/,''))
+      .attr('dx', d=>nodeRadius(d)*nodeScale+4).attr('dy',3.5).attr('font-size',11)
+      .attr('fill', d=>isDiffNode(d.id)?'var(--text)':'var(--text-muted)')
+      .attr('opacity', d=>isDiffNode(d.id)?1:0.08)
+      .attr('pointer-events','none');
+
+    dSim = d3.forceSimulation(simNodes)
+      .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));
+
+    // 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 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;
+        if (diffFocusMode && !layerNodes.some(function(n) { return isDiffNode(n.id); })) 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;
+          if (diffFocusMode && !isDiffNode(n.id)) 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 visNodes = diffFocusMode ? layerNodes.filter(function(n) { return isDiffNode(n.id); }) : layerNodes;
+        if (visNodes.length === 0) return;
+        var lx = visNodes.reduce(function(s, n) { return s + (n.x||0); }, 0) / visNodes.length;
+        var ly = Math.min.apply(null, visNodes.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', function(d) { return 'translate('+d.x+','+d.y+')'; });
+        if (++dTickCount % 5 === 0) updateDiffHulls();
+      });
+
+    // Click: show impact chain + detail panel
+    dNode.on('click', function(e, d) {
+      e.stopPropagation();
+      highlightDiffImpact(d);
+      showDiffDetail(d);
+    });
+
+    // Click on empty space to deselect
+    dSvg.on('click', function() {
+      closeDiffDetail();
+    });
+
+    dNode.on('mouseover',function(e,d) { showTooltip(e,d); }).on('mousemove',function(e) { positionTooltip(e); }).on('mouseout',function() { scheduleHideTooltip(); });
+
+    // Apply initial filter (in case focus was toggled before build)
+    applyDiffFilter();
+
+    var dAutoFitDone = false;
+    dSim.on('end', function() {
+      if (dAutoFitDone) return;
+      dAutoFitDone = true;
+      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));
+    });
+  }
+
+}
+`;
+}
+
+// src/utils/html-escape.ts
+var ESC_FUNCTION_JS = `function esc(s) { return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;').replace(/'/g,'&#39;'); }`;
+
+// src/web/template.ts
+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,
+    deps: f.dependencies.length,
+    dependents: f.dependents.length,
+    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("/")) : ".",
+    layer: layers && f.path.includes("/") ? f.path.substring(0, f.path.indexOf("/")) : null
+  }));
+  const links = graph.edges.map((e) => ({
+    source: e.source,
+    target: e.target,
+    type: e.type
+  }));
+  const circularFiles = /* @__PURE__ */ new Set();
+  for (const c of graph.circularDependencies) {
+    for (const f of c.cycle) circularFiles.add(f);
+  }
+  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 */
+    `<!DOCTYPE html>
+<html lang="${locale}">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>${projectName} \u2014 Architecture Viewer</title>
+${buildStyles()}
+</head>
+<body>
+${buildViewerHtml()}
+<script src="https://d3js.org/d3.v7.min.js"></script>
+<script>
+// \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
+// i18n
+// \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 I18N = {
+  en: {
+    'tab.graph': 'Graph', 'tab.hierarchy': 'Hierarchy',
+    'stats.files': 'Files', 'stats.edges': 'Edges', 'stats.circular': 'Circular',
+    'settings.title': 'Settings', 'settings.theme': 'Theme', 'settings.fontSize': 'Font Size',
+    'settings.nodeSize': 'Node Size', 'settings.linkOpacity': 'Link Opacity', 'settings.gravity': 'Gravity', 'settings.language': 'Language', 'settings.export': 'Export',
+    'impact.title': 'Impact Simulation', 'impact.btn': 'Impact', 'impact.transitive': 'files affected',
+    'search.placeholder': 'Search files...',
+    'legend.circular': 'Circular dep', 'legend.orphan': 'Orphan', 'legend.highCoupling': 'High coupling',
+    'legend.imports': 'imports', 'legend.importedBy': 'imported by',
+    'detail.importedBy': 'Imported by', 'detail.imports': 'Imports',
+    'detail.none': 'none', 'detail.dir': 'Dir', 'detail.dependencies': 'Dependencies', 'detail.dependents': 'Dependents',
+    'tooltip.imports': 'imports', 'tooltip.importedBy': 'imported by',
+    'help.graph': 'Scroll: zoom \xB7 Drag: pan \xB7 Click: select \xB7 / search',
+    'help.hierarchy': 'Scroll to navigate \xB7 Click to highlight',
+    'help.diff': 'Green=added \xB7 Red=removed \xB7 Yellow=modified \xB7 Blue=affected',
+    'tab.diff': 'Diff',
+    'diff.addedLabel': 'Added', 'diff.removedLabel': 'Removed', 'diff.modifiedLabel': 'Modified', 'diff.affectedLabel': 'Affected',
+    'diff.showAll': 'Show all', 'diff.focusChanges': 'Focus changes', 'diff.noImpact': 'No downstream impact',
+    'diff.affectedByChange': 'Affected by this change',
+  },
+  ja: {
+    'tab.graph': '\u30B0\u30E9\u30D5', 'tab.hierarchy': '\u968E\u5C64\u56F3',
+    'stats.files': '\u30D5\u30A1\u30A4\u30EB', 'stats.edges': '\u30A8\u30C3\u30B8', 'stats.circular': '\u5FAA\u74B0\u53C2\u7167',
+    'settings.title': '\u8A2D\u5B9A', 'settings.theme': '\u30C6\u30FC\u30DE', 'settings.fontSize': '\u30D5\u30A9\u30F3\u30C8\u30B5\u30A4\u30BA',
+    'settings.nodeSize': '\u30CE\u30FC\u30C9\u30B5\u30A4\u30BA', 'settings.linkOpacity': '\u30EA\u30F3\u30AF\u900F\u660E\u5EA6', 'settings.gravity': '\u91CD\u529B', 'settings.language': '\u8A00\u8A9E', 'settings.export': '\u30A8\u30AF\u30B9\u30DD\u30FC\u30C8',
+    'impact.title': '\u5F71\u97FF\u7BC4\u56F2\u30B7\u30DF\u30E5\u30EC\u30FC\u30B7\u30E7\u30F3', 'impact.btn': '\u5F71\u97FF', 'impact.transitive': '\u30D5\u30A1\u30A4\u30EB\u306B\u5F71\u97FF',
+    'search.placeholder': '\u30D5\u30A1\u30A4\u30EB\u691C\u7D22...',
+    'legend.circular': '\u5FAA\u74B0\u53C2\u7167', 'legend.orphan': '\u5B64\u7ACB', 'legend.highCoupling': '\u9AD8\u7D50\u5408',
+    'legend.imports': 'import\u5148', 'legend.importedBy': 'import\u5143',
+    'detail.importedBy': 'import\u5143', 'detail.imports': 'import\u5148',
+    'detail.none': '\u306A\u3057', 'detail.dir': '\u30C7\u30A3\u30EC\u30AF\u30C8\u30EA', 'detail.dependencies': '\u4F9D\u5B58\u5148', 'detail.dependents': '\u88AB\u4F9D\u5B58',
+    'tooltip.imports': 'import\u5148', 'tooltip.importedBy': 'import\u5143',
+    'help.graph': '\u30B9\u30AF\u30ED\u30FC\u30EB: \u30BA\u30FC\u30E0 \xB7 \u30C9\u30E9\u30C3\u30B0: \u79FB\u52D5 \xB7 \u30AF\u30EA\u30C3\u30AF: \u9078\u629E \xB7 / \u691C\u7D22',
+    'help.hierarchy': '\u30B9\u30AF\u30ED\u30FC\u30EB\u3067\u79FB\u52D5 \xB7 \u30AF\u30EA\u30C3\u30AF\u3067\u30CF\u30A4\u30E9\u30A4\u30C8',
+    'help.diff': '\u7DD1=\u8FFD\u52A0 \xB7 \u8D64=\u524A\u9664 \xB7 \u9EC4=\u5909\u66F4 \xB7 \u9752=\u5F71\u97FF',
+    'tab.diff': '\u5DEE\u5206',
+    'diff.addedLabel': '\u8FFD\u52A0', 'diff.removedLabel': '\u524A\u9664', 'diff.modifiedLabel': '\u5909\u66F4', 'diff.affectedLabel': '\u5F71\u97FF',
+    'diff.showAll': '\u5168\u8868\u793A', 'diff.focusChanges': '\u5909\u66F4\u306E\u307F\u8868\u793A', 'diff.noImpact': '\u4E0B\u6D41\u3078\u306E\u5F71\u97FF\u306A\u3057',
+    'diff.affectedByChange': '\u3053\u306E\u5909\u66F4\u306E\u5F71\u97FF\u7BC4\u56F2',
+  }
+};
+let currentLang = '${locale}';
+function applyI18n() {
+  const msgs = I18N[currentLang] || I18N.en;
+  document.querySelectorAll('[data-i18n]').forEach(el => {
+    const key = el.getAttribute('data-i18n');
+    if (msgs[key]) el.textContent = msgs[key];
+  });
+  document.querySelectorAll('[data-i18n-placeholder]').forEach(el => {
+    const key = el.getAttribute('data-i18n-placeholder');
+    if (msgs[key]) el.placeholder = msgs[key];
+  });
+  document.querySelectorAll('.lang-btn').forEach(b => b.classList.toggle('active', b.dataset.lang === currentLang));
+}
+window.setLang = (lang) => { currentLang = lang; applyI18n(); saveSettings(); };
+function i(key) { return (I18N[currentLang] || I18N.en)[key] || key; }
+${ESC_FUNCTION_JS}
+
+// \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
+// SETTINGS (persisted to localStorage)
+// \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, 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() {
+  try { return JSON.parse(localStorage.getItem(STORAGE_KEY)) || null; } catch(e) { return null; }
+}
+
 let nodeScale = 1, baseLinkOpacity = 0.4;
 window.toggleSettings = () => document.getElementById('settings-panel').classList.toggle('open');
 window.setTheme = (theme) => {
@@ -2307,7 +3624,21 @@ window.setGravity = (v) => {
   gravityStrength = +v;
   document.getElementById('gravity-val').textContent = v;
   if (typeof simulation !== 'undefined') {
-    simulation.force('charge', d3.forceManyBody().strength(-gravityStrength).distanceMax(500));
+    if (typeof updateLayerPhysics === 'function') {
+      updateLayerPhysics();
+    } else {
+      simulation.force('charge', d3.forceManyBody().strength(-gravityStrength).distanceMax(500));
+    }
+    simulation.alpha(0.5).restart();
+  }
+  saveSettings();
+};
+let layerGravity = 12;
+window.setLayerGravity = (v) => {
+  layerGravity = +v;
+  document.getElementById('layer-gravity-val').textContent = v;
+  if (typeof simulation !== 'undefined' && typeof updateLayerPhysics === 'function') {
+    updateLayerPhysics();
     simulation.alpha(0.5).restart();
   }
   saveSettings();
@@ -2347,6 +3678,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 +3700,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 +3710,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 +3734,22 @@ 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 diffBuilt = 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(); hierRelayout(); }
+    }
+    if (tab.dataset.view === 'diff-view') {
+      if (!diffBuilt) { buildDiffView(); diffBuilt = true; }
+    }
   });
 });
 
@@ -2410,8 +3765,8 @@ function showTooltip(e, d) {
   document.getElementById('tt-name').textContent = d.id;
   document.getElementById('tt-dep-count').textContent = d.deps;
   document.getElementById('tt-dpt-count').textContent = d.dependents;
-  const out = (d.dependencies||[]).map(x => '<div class="tt-out">\u2192 '+x+'</div>');
-  const inc = (d.dependentsList||[]).map(x => '<div class="tt-in">\u2190 '+x+'</div>');
+  const out = (d.dependencies||[]).map(x => '<div class="tt-out">\u2192 '+esc(x)+'</div>');
+  const inc = (d.dependentsList||[]).map(x => '<div class="tt-in">\u2190 '+esc(x)+'</div>');
   document.getElementById('tt-details').innerHTML = [...out, ...inc].join('');
   tooltip.style.display = 'block';
   positionTooltip(e);
@@ -2485,6 +3840,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 +3911,403 @@ 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
+var updateLayerPhysics = null; // hoisted \u2014 updates charge/layer forces without visibility changes
+
+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:' + esc(layer.color) + '"></div> ' + esc(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:' + esc(layer.color) + '"></div>' + esc(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();
+    // Delegate physics update and zoom to fit
+    updateLayerPhysics();
+    simulation.alpha(0.6).restart();
+    setTimeout(() => zoomFit(), 600);
+  }
+
+  // Separated physics update: handles charge/layer forces based on filter state.
+  // Called by applyLayerFilter (with zoomFit), setGravity, setLayerGravity (without zoomFit).
+  updateLayerPhysics = function() {
+    const isSingleLayer = activeLayers.size === 1;
+    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));
+    }
+  }
+
+  // \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:' + esc(layer.color) + '"></div>' + esc(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:' + esc(layer.color) + '"></div>' + esc(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>' + esc(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
@@ -2584,12 +4365,15 @@ svg.on('click', () => {
 function showDetail(d) {
   const p=document.getElementById('detail');
   document.getElementById('d-name').textContent=d.id;
-  document.getElementById('d-meta').innerHTML=i('detail.dir')+': '+d.dir+'<br>'+i('detail.dependencies')+': '+d.deps+' \xB7 '+i('detail.dependents')+': '+d.dependents;
+  document.getElementById('d-meta').innerHTML=i('detail.dir')+': '+esc(d.dir)+'<br>'+i('detail.dependencies')+': '+d.deps+' \\u00b7 '+i('detail.dependents')+': '+d.dependents;
   const deptL=document.getElementById('d-dependents'), depsL=document.getElementById('d-deps');
-  deptL.innerHTML=(d.dependentsList||[]).map(x=>'<li onclick="focusNode(\\''+x+'\\')">\u2190 '+x+'</li>').join('')||'<li style="color:var(--text-muted)">'+i('detail.none')+'</li>';
-  depsL.innerHTML=(d.dependencies||[]).map(x=>'<li onclick="focusNode(\\''+x+'\\')">\u2192 '+x+'</li>').join('')||'<li style="color:var(--text-muted)">'+i('detail.none')+'</li>';
+  deptL.innerHTML=(d.dependentsList||[]).map(x=>'<li data-focus="'+esc(x)+'">\\u2190 '+esc(x)+'</li>').join('')||'<li style="color:var(--text-muted)">'+i('detail.none')+'</li>';
+  depsL.innerHTML=(d.dependencies||[]).map(x=>'<li data-focus="'+esc(x)+'">\\u2192 '+esc(x)+'</li>').join('')||'<li style="color:var(--text-muted)">'+i('detail.none')+'</li>';
   p.classList.add('open');
 }
+// Event delegation for detail panel list items (avoids inline onclick)
+document.getElementById('d-dependents').addEventListener('click', function(e) { var li=e.target.closest('li[data-focus]'); if(li) focusNode(li.dataset.focus); });
+document.getElementById('d-deps').addEventListener('click', function(e) { var li=e.target.closest('li[data-focus]'); if(li) focusNode(li.dataset.focus); });
 window.closeDetail=()=>document.getElementById('detail').classList.remove('open');
 window.focusNode=(id)=>{
   const n=DATA.nodes.find(x=>x.id===id); if(!n)return; showDetail(n);
@@ -2616,32 +4400,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>'+esc(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;
@@ -2691,246 +4479,8 @@ window.addEventListener('resize',()=>{
   svg.attr('width',w).attr('height',h);
 });
 
-// \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
-// HIERARCHY VIEW
-// \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
-function buildHierarchy(){
-  const hSvg=d3.select('#hier-svg');
-  const hG=hSvg.append('g');
-  const hZoom=d3.zoom().scaleExtent([0.1,4]).on('zoom',e=>hG.attr('transform',e.transform));
-  hSvg.call(hZoom);
-
-  const nodeMap={}; DATA.nodes.forEach(n=>nodeMap[n.id]=n);
-  const importsMap={}; DATA.links.forEach(l=>{const s=l.source.id??l.source,t=l.target.id??l.target;if(!importsMap[s])importsMap[s]=[];importsMap[s].push(t);});
-
-  const entryPoints=DATA.nodes.filter(n=>n.dependents===0).map(n=>n.id);
-  const layers={};const visited=new Set();
-  const queue=entryPoints.map(id=>({id,layer:0}));
-  DATA.nodes.forEach(n=>{if(n.isOrphan)layers[n.id]=0;});
-
-  while(queue.length>0){
-    const{id,layer}=queue.shift();
-    if(visited.has(id)&&(layers[id]??-1)>=layer)continue;
-    layers[id]=Math.max(layers[id]??0,layer);visited.add(id);
-    (importsMap[id]||[]).forEach(t=>queue.push({id:t,layer:layer+1}));
-  }
-  DATA.nodes.forEach(n=>{if(!(n.id in layers))layers[n.id]=0;});
-
-  const maxLayer=Math.max(0,...Object.values(layers));
-  const layerGroups={};
-  for(let i=0;i<=maxLayer;i++)layerGroups[i]=[];
-  Object.entries(layers).forEach(([id,l])=>layerGroups[l].push(id));
-  Object.values(layerGroups).forEach(arr=>arr.sort((a,b)=>(nodeMap[a]?.dir||'').localeCompare(nodeMap[b]?.dir||'')||a.localeCompare(b)));
-
-  const boxW=200,boxH=30,gapX=24,gapY=70,padY=60,padX=40;
-  const positions={};let maxRowWidth=0;
-  for(let layer=0;layer<=maxLayer;layer++){const items=layerGroups[layer];maxRowWidth=Math.max(maxRowWidth,items.length*(boxW+gapX)-gapX);}
-  for(let layer=0;layer<=maxLayer;layer++){
-    const items=layerGroups[layer],rowWidth=items.length*(boxW+gapX)-gapX,startX=padX+(maxRowWidth-rowWidth)/2;
-    items.forEach((id,i)=>{positions[id]={x:startX+i*(boxW+gapX),y:padY+layer*(boxH+gapY)};});
-  }
-
-  const totalW=maxRowWidth+padX*2,totalH=padY*2+(maxLayer+1)*(boxH+gapY);
-  hSvg.attr('width',Math.max(totalW,W)).attr('height',Math.max(totalH,H));
-
-  const linkG=hG.append('g');
-  DATA.links.forEach(l=>{
-    const sId=l.source.id??l.source,tId=l.target.id??l.target;
-    const s=positions[sId],t=positions[tId]; if(!s||!t)return;
-    const x1=s.x+boxW/2,y1=s.y+boxH,x2=t.x+boxW/2,y2=t.y,midY=(y1+y2)/2;
-    linkG.append('path').attr('class','hier-link')
-      .attr('d',\`M\${x1},\${y1} C\${x1},\${midY} \${x2},\${midY} \${x2},\${y2}\`)
-      .attr('stroke',l.type==='type-only'?'#1f3d5c':'var(--border)')
-      .attr('stroke-dasharray',l.type==='type-only'?'4,3':null)
-      .attr('data-source',sId).attr('data-target',tId);
-  });
-
-  hSvg.append('defs').append('marker').attr('id','harrow').attr('viewBox','0 -3 6 6')
-    .attr('refX',6).attr('refY',0).attr('markerWidth',6).attr('markerHeight',6).attr('orient','auto')
-    .append('path').attr('d','M0,-3L6,0L0,3Z').attr('fill','var(--border)');
-  linkG.selectAll('path').attr('marker-end','url(#harrow)');
-
-  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('x',12).attr('y',padY+layer*(boxH+gapY)+boxH/2+4).text('L'+layer);
-  }
-
-  const nodeG=hG.append('g');
-  DATA.nodes.forEach(n=>{
-    const pos=positions[n.id]; if(!pos)return;
-    const gn=nodeG.append('g').attr('class','hier-node').attr('transform',\`translate(\${pos.x},\${pos.y})\`);
-    gn.append('rect').attr('width',boxW).attr('height',boxH)
-      .attr('fill','var(--bg-card)').attr('stroke',nodeColor(n))
-      .attr('stroke-width',circularSet.has(n.id)?2:1.5);
-    gn.append('text').attr('x',8).attr('y',boxH/2+4).attr('font-size',11)
-      .text(fileName(n.id).length>24?fileName(n.id).slice(0,22)+'\u2026':fileName(n.id));
-    gn.append('text').attr('x',boxW-8).attr('y',boxH/2+4)
-      .attr('text-anchor','end').attr('font-size',10).attr('fill','var(--text-muted)')
-      .text(n.dependents>0?'\u2191'+n.dependents:'');
-    gn.append('text').attr('x',8).attr('y',-4).attr('font-size',9)
-      .attr('fill',dirColor(n.dir)).attr('opacity',0.7).text(n.dir);
-
-    gn.node().__data_id=n.id;
-    gn.on('mouseover',e=>{
-      showTooltip(e,n);
-      if (!hierPinned) hierHighlight(n.id);
-    })
-    .on('mousemove',e=>positionTooltip(e))
-    .on('mouseout',()=>{
-      scheduleHideTooltip();
-      if (!hierPinned) hierResetHighlight();
-    })
-    .on('click',(e)=>{
-      e.stopPropagation();
-      hierPinned=n.id;
-      hierHighlight(n.id);
-      showHierDetail(n);
-    });
-  });
-
-  // Hierarchy highlight helpers
-  let hierPinned=null;
-  function hierHighlight(nId){
-    linkG.selectAll('path')
-      .attr('stroke',function(){const s=this.getAttribute('data-source'),t=this.getAttribute('data-target');if(s===nId)return'#58a6ff';if(t===nId)return'#3fb950';return this.getAttribute('stroke-dasharray')?'#1f3d5c':'var(--border)';})
-      .attr('stroke-width',function(){const s=this.getAttribute('data-source'),t=this.getAttribute('data-target');return(s===nId||t===nId)?2.5:1;})
-      .attr('opacity',function(){const s=this.getAttribute('data-source'),t=this.getAttribute('data-target');return(s===nId||t===nId)?1:0.15;});
-    nodeG.selectAll('.hier-node').attr('opacity',function(){
-      const id=this.__data_id; if(id===nId)return 1;
-      const connected=DATA.links.some(l=>{const s=l.source.id??l.source,t=l.target.id??l.target;return(s===nId&&t===id)||(t===nId&&s===id);});
-      return connected?1:0.3;
-    });
-  }
-  function hierResetHighlight(){
-    hierPinned=null;
-    linkG.selectAll('path')
-      .attr('stroke',function(){return this.getAttribute('stroke-dasharray')?'#1f3d5c':'var(--border)';})
-      .attr('stroke-width',1).attr('opacity',1);
-    nodeG.selectAll('.hier-node').attr('opacity',1);
-  }
-  function showHierDetail(n){
-    const p=document.getElementById('hier-detail');
-    document.getElementById('hd-name').textContent=n.id;
-    document.getElementById('hd-meta').innerHTML=i('detail.dir')+': '+n.dir+'<br>'+i('detail.dependencies')+': '+n.deps+' \xB7 '+i('detail.dependents')+': '+n.dependents;
-    document.getElementById('hd-dependents').innerHTML=(n.dependentsList||[]).map(x=>'<li>\u2190 '+x+'</li>').join('')||'<li style="color:var(--text-muted)">'+i('detail.none')+'</li>';
-    document.getElementById('hd-deps').innerHTML=(n.dependencies||[]).map(x=>'<li>\u2192 '+x+'</li>').join('')||'<li style="color:var(--text-muted)">'+i('detail.none')+'</li>';
-    p.classList.add('open');
-  }
-  window.closeHierDetail=()=>{document.getElementById('hier-detail').classList.remove('open');hierResetHighlight();tooltip.style.display='none';tooltipLocked=false;};
-
-  // 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);
-    };
-    hFiltersEl.appendChild(pill);
-  });
-
-  hSvg.call(hZoom.transform,d3.zoomIdentity.translate(
-    Math.max(0,(W-totalW)/2),20
-  ).scale(Math.min(1,W/(totalW+40),H/(totalH+40))));
-}
-
-// \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
-// DIFF VIEW
-// \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 DIFF = ${diffData};
-if (DIFF) {
-  document.getElementById('diff-tab').style.display = '';
-  const addedSet = new Set(DIFF.added||[]);
-  const removedSet = new Set(DIFF.removed||[]);
-  const modifiedSet = new Set(DIFF.modified||[]);
-  const affectedSet = new Set((DIFF.affectedDependents||[]).map(a=>a.file));
-
-  let diffBuilt = false;
-  function buildDiffView() {
-    const dSvg = d3.select('#diff-svg').attr('width', W).attr('height', H);
-    const dG = dSvg.append('g');
-    const dZoom = d3.zoom().scaleExtent([0.05,10]).on('zoom', e=>dG.attr('transform',e.transform));
-    dSvg.call(dZoom);
-
-    function diffColor(d) {
-      if (addedSet.has(d.id)) return 'var(--green)';
-      if (removedSet.has(d.id)) return 'var(--red)';
-      if (modifiedSet.has(d.id)) return 'var(--yellow)';
-      if (affectedSet.has(d.id)) return 'var(--accent)';
-      return '#30363d';
-    }
-
-    const dDefs = dSvg.append('defs');
-    dDefs.append('marker').attr('id','darrow').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','#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 simLinks = DATA.links.map(d=>({source:d.source.id??d.source,target:d.target.id??d.target,type:d.type}));
-
-    const dNode = dG.append('g').selectAll('g').data(simNodes).join('g').attr('cursor','pointer');
-    dNode.append('circle')
-      .attr('r', d=>nodeRadius(d)*nodeScale)
-      .attr('fill', diffColor)
-      .attr('stroke', diffColor).attr('stroke-width', d=>(addedSet.has(d.id)||removedSet.has(d.id)||modifiedSet.has(d.id)||affectedSet.has(d.id))?3:1)
-      .attr('opacity', d=>(addedSet.has(d.id)||removedSet.has(d.id)||modifiedSet.has(d.id)||affectedSet.has(d.id))?1:0.2);
-    dNode.append('text')
-      .text(d=>fileName(d.id).replace(/\\.tsx?$/,''))
-      .attr('dx', d=>nodeRadius(d)*nodeScale+4).attr('dy',3.5).attr('font-size',11)
-      .attr('fill', d=>(addedSet.has(d.id)||removedSet.has(d.id)||modifiedSet.has(d.id)||affectedSet.has(d.id))?'var(--text)':'var(--text-muted)')
-      .attr('opacity', d=>(addedSet.has(d.id)||removedSet.has(d.id)||modifiedSet.has(d.id)||affectedSet.has(d.id))?1:0.2)
-      .attr('pointer-events','none');
-
-    const dSim = d3.forceSimulation(simNodes)
-      .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;
-          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.on('mouseover',(e,d)=>showTooltip(e,d)).on('mousemove',e=>positionTooltip(e)).on('mouseout',()=>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;
-      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);
-  }
-
-  // Hook into tab switching
-  const origTabHandler = document.querySelectorAll('.tab');
-  origTabHandler.forEach(tab=>{
-    tab.addEventListener('click',()=>{
-      if(tab.dataset.view==='diff-view'&&!diffBuilt){buildDiffView();diffBuilt=true;}
-    });
-  });
-}
-
+${buildHierarchyJs()}
+${buildDiffJs(diffData)}
 // \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
 // INIT
 // \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
@@ -2945,7 +4495,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 +4519,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 +4538,14 @@ var VERSION = loadVersion();
 
 // src/cli/index.ts
 var VALID_LANGUAGES = LANGUAGE_IDS;
+async function resolveGraphCli(opts) {
+  return resolveGraph({
+    targetDir: opts.target,
+    projectRoot: opts.root,
+    exclude: opts.exclude,
+    language: opts.language
+  });
+}
 var program = new Command();
 program.name("archtracker").description(
   "Architecture & Dependency Tracker \u2014 Prevent missed architecture changes in AI-driven development"
@@ -2999,11 +4562,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 resolveGraphCli({
+      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 +4599,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 resolveGraphCli({
+      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 +4626,11 @@ program.command("check").description(
       process.exit(1);
     }
     console.log(t("cli.analyzing"));
-    const currentGraph = await analyzeProject(opts.target, { language });
+    const { graph: currentGraph } = await resolveGraphCli({
+      target: opts.target,
+      root: opts.root,
+      language
+    });
     const diff = computeDiff(existingSnapshot.graph, currentGraph);
     const report = formatDiffReport(diff);
     console.log(report);
@@ -3079,8 +4650,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 resolveGraphCli({
+        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 +4697,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 resolveGraphCli({
+      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 +4725,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 resolveGraphCli({
+              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 +4768,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;